remotion: Add Visual Mode controls for border properties

[sksingh2005]

Summary

• Adds style.borderWidth (number), style.borderStyle (enum) and style.borderColor (color) to borderSchema.
• Each property maps onto an existing field type, so no new field type or editor component is needed.
• borderWidth and borderColor are keyframable and can be animated individually; borderStyle is discrete, like style.fontWeight.
• borderStyle defaults to none, the CSS initial value, and offers all 10 CSS border-style keywords.
• Exports Interactive.borderSchema so custom components can opt in, matching Interactive.textSchema / Interactive.transformSchema.
• Uses the longhand properties rather than the style.border shorthand, which avoids the shorthand's edge cases — e.g. border: 0 is a number rather than a string, so a parser could not read it as a width.
• Migrates the lower-third Element to longhand, since React does not expand CSS shorthands; rendered output is unchanged.
• Documents Interactive.borderSchema in interactive.mdx and interactivity-schema.mdx.

Verification

• Verified in Studio: all three controls render, read existing values, and write back to source.
• turbo run make test formatting lint passes across remotion, @remotion/studio and @remotion/studio-shared.
• Adds schema-shape tests in packages/core and keyframability tests in @remotion/studio-shared.
• borderSchema emits exactly style.borderWidth (number), style.borderStyle (enum, 10 variants) and style.borderColor (color).
• isInteractivitySchemaFieldKeyframable returns true for borderWidth and borderColor, false for borderStyle.
• border: 0 cannot report a 1px border: no field defaults to 1, and each control reads its own value with no inference.
• lower-third renders identically, as borderWidth: 1 resolves to 1px.

Related issue - #8806

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
bugs	Ready	Preview, Comment	Jul 17, 2026 10:24am
remotion	Ready	Preview, Comment	Jul 17, 2026 10:24am

[pullfrog]

test

  ^{｜ Fix it ➔ ｜ View workflow run ｜ Using Kimi K2 (free via Pullfrog for OSS) ｜ 𝕏}

[pullfrog]

Important

Add docs and tests for the new Interactive.borderSchema public surface before merging. The schema wiring itself looks correct.

Reviewed changes — this PR adds longhand border controls (style.borderWidth, style.borderStyle, style.borderColor) to the Visual Mode interactivity schema, exports Interactive.borderSchema, and migrates the lower-third Element to longhand.

• Adds borderSchema with three style fields and wires it into Interactive elements.
• Exports Interactive.borderSchema for custom component schemas.
• Converts lower-third from border shorthand to borderWidth/borderStyle/borderColor.

⚠️ PR description refers to a shorthand-parser removal not present in this diff

The description says the change "removes the shorthand parser entirely," but the diff contains only the new longhand schema and no deletion of an existing parser. If the parser was removed in a prior commit or another branch, update the description so reviewers can follow; otherwise remove that claim to avoid confusion.

ℹ️ New public schema helper lacks docs and tests

Interactive.borderSchema is now a public API alongside transformSchema, textSchema, etc., but it is not mentioned in the Interactive or InteractivitySchema docs, and there is no schema-shape test in packages/core/src/test/with-interactivity-schema-helpers.test.ts.

For docs, add a ### Interactive.borderSchema section to both packages/docs/docs/interactive.mdx and packages/docs/docs/interactivity-schema.mdx listing style.borderWidth, style.borderStyle and style.borderColor. Use <AvailableFrom> with the next patch version.

For tests, mirror the existing textSchema exposes common text style fields test: assert Object.keys(borderSchema), verify each field's type/default/min/step/hiddenFromList/keyframable expectations, and check that isInteractivitySchemaFieldKeyframable returns true for borderWidth/borderColor and false for borderStyle.

Line-specific notes

• packages/core/src/Interactive.tsx:252 — exporting a new public schema helper; please add matching docs in interactive.mdx and interactivity-schema.mdx.
• packages/core/src/interactivity-schema.ts:328-360 — consider adding a borderSchema shape/keyframability unit test in packages/core/src/test/with-interactivity-schema-helpers.test.ts.

  ^{｜ View workflow run ｜ via Pullfrog ｜ Using Kimi K2 (free via Pullfrog for OSS) ｜ 𝕏}