- Build typed Reka-based dialog and alert-dialog anatomy with shared theme slots
- Migrate variables, asset details, and ACP permissions to the common shell
- Add Storybook coverage for reusable dialog states
- Add a headless PropertyGrid primitive with themed app composition
- Keep composite paint details full-width and show remove actions consistently
- Tighten color picker and Design-panel field sizing without clipping values
- Let nested actions claim tooltip ownership from parent controls
- Keep only one tooltip visible across pointer and keyboard focus
- Cover composite property fields and preserve WebKit behavior
- Section titles are no longer collapsible triggers — they render as static
text like Figma, so clicking a section header no longer collapses it
- Drop the 'Font features' group title; ligature/kerning toggles sit
directly in the Typography flow
- Update panel specs and snapshots for always-expanded sections
The B/I/U/S toggle buttons were borderless ghosts while the alignment
controls used a filled segmented container. Wrap them in the same
bg-panel-field container so both toggle groups share one visual style.
The group header and the toggle rows under it shared the same muted 11px
style, flattening the hierarchy. The OpenType features label is now
semibold surface text while items stay muted.
- Layout: gap between the Resizing segmented control and the W/H size fields
- Typography: breathing room between OpenType feature toggle rows and above
the Text formatting toolbar
Within-group label→field stays 4px; between-group margin rises from 6px to
12px so each property reads as a distinct unit instead of merging into a
continuous column. Matches Figma's grouping structure without removing the
labels.
- Move the Auto layout add/remove button from the section body into the
section header actions, matching the Layout grid and every other section
- Drop leading-none on section titles so descenders ('g' in 'Layout grid')
are not clipped by the 32px header band
Add a Layout grid section for frames/components with pattern (columns/rows/
grid), count, gutter/section size, and margin, plus visibility and remove
actions. The canvas already rendered layout grids from imported files; this
wires creation and editing through the standard panel list pattern with
undo support and icon+tooltip pattern options.
Surface the engine's textAutoResize as a Resizing segmented control for
text nodes, mapping Figma's three modes: Auto width (WIDTH_AND_HEIGHT),
Auto height/wrap (HEIGHT), Fixed size (NONE). Icon + tooltip options match
the panel's segmented-control language. The engine already reflows text on
content changes; this wires the control to it with undo support.
Layer lock/visibility actions, toolbar tools, tool flyout triggers, and
the app UI toggle rendered icon-only buttons with no accessible name, so
screen readers and role-based selectors could not identify them. Each now
exposes an aria-label from the existing i18n/tool labels.
- Menubar items render in surface text instead of muted (looked disabled),
at the 11px UI scale
- Menu items, document tabs, and tooltips normalized to 11px to match the
panel type scale; menu items use the 5px control radius
- Share button uses the control radius and 11px; presence popover drops its
border for the floating shadow
- Section headers become full 32px bands (title + trailing actions
vertically centered) instead of an 11px line crammed against fields,
giving each section a clear structural band like Figma
- Select dropdowns adopt the floating-surface elevation (12px radius, no
border, deep shadow), 24px flush items, and scroll up/down buttons for
long lists (blend modes)
- Font-settings gear trigger drops its hardcoded dark bg+border for the
ghost icon-button recipe
- Segmented-control active state uses neutral hover fill instead of the
blue-grey selection color
- Menus, popovers, dialogs, tooltips, and the toolbar drop the hard 1px
border for the established deep floating shadow (0 8px 30px /40%) and a
unified rounded-xl, so overlays read as floating rather than outlined
- Appearance section pairs Blend mode with Opacity on a 7fr/5fr grid so
'Pass through' no longer truncates at the denser 24px control height
- Normalize AppSelect text to 11px to match the panel type scale
Drop the spacing/radius sizing tokens (--spacing-control, --spacing-panel-*,
--radius-panel) and their generated classes (h-control, px-panel-x, gap-panel,
rounded-panel, etc.) in favor of direct Tailwind utilities (h-6, px-3, gap-1.5,
rounded). Color tokens are kept since they drive dark/light theming.
Behavior-preserving: 24px controls, 5px radius, identical computed layout.
- Selected Design/Code/AI tab now shows an accent underline instead of
only a weight/color change, giving a clear active affordance
- Normalize tab text to 11px to match the panel type scale
- Layer/page rows use the unified accent selection, 5px radius, airier
1.5 padding, and 11px labels
- Panel headers (Layers, Assets, Pages) drop the uppercase tracked style
for a single 11px/semibold/surface dialect matching section headers
- Segmented control md size uses 11px to match the rest of the panel
- Let virtualized Layer rows fill the panel width\n- Remove extra root indentation while preserving hierarchy depth\n- Keep icon menu labels beside their icons\n- Refresh reviewed panel snapshots
- Keep Fill and Effects settings inside their shared content rails\n- Use panel spacing tokens instead of ad-hoc offsets\n- Preserve selection when Escape dismisses overlays\n- Label the Font settings trigger for assistive technology
- Restore the empty collection call to action\n- Fill the table width and prevent variable type hint clipping\n- Let dialogs and popup menus handle Escape before editor shortcuts
- Keep Apply variable actions visible with restrained hover treatment
- Preserve the shared 26px NumberField height in column layouts
- Anchor variable pickers to their trigger instead of the zero-size contents wrapper
- Cover control dimensions, action visibility, and popover placement end to end
- Theme Variables, collaboration, presence, and provider status states\n- Expose semantic default, resizing, following, connection, and tone attributes\n- Remove the final dynamic-state allowlist and document enforced Vue template rules
- Share typed toolbar slots across desktop, mobile, flyout, and action controls\n- Theme alignment cells, fill tabs, and gradient stop states\n- Expose semantic active and disabled state and retire migrated allowlist entries
- Lock representative property and Layer Tree states with visual snapshots\n- Cover keyboard tab order and keyboard activation for panel controls\n- Reject template-time UI hooks and raw SVG app icons through parsed Vue ASTs
- Add case, justification, vertical alignment, truncation, max-lines, and OpenType controls
- Apply visual text case and measured vertical offsets in CanvasKit rendering
- Preserve nullable preview values, shared text styles, font demand, and .fig metadata
- Add panel, engine, and canvas visual coverage
- Move Pages and TabBar state styling into typed Tailwind Variants themes
- Reuse the segmented control contract for Layers and Assets navigation
- Add light and dark Storybook state coverage and remove migrated architecture allowlist entries
- Model imported fill, stroke, text, effect, and grid style definitions and references
- Add SDK and app selectors with mixed-selection batching, detach-on-edit, and undo restoration
- Preserve style definitions through .fig export and extracted subgraphs
- Document the shared-style composable and update compatibility coverage
- Add mixed-selection cap, join, and miter-limit controls with one-step undo
- Apply node miter limits across CanvasKit stroke paths and vector outline caches
- Preserve imported and edited stroke geometry through Plugin API and .fig roundtrips
- Add SDK-owned mixed constraint state, pin controls, and undo-aware updates
- Apply Figma constraint modes recursively during frame resize previews and commits
- Document and test the control, multi-selection behavior, and resize geometry
- Remove FillPickerRoot and useFillPicker from source, exports, and localized docs
- Replace the final PanelRow consumer with accessible auto-layout controls
- Document the canonical panel and fill composition contracts
- Rebuild Typography, Variant, Mask, and Page sections with shared labeled fields
- Expose semantic empty states across list sections
- Replace section test hooks with accessible roles and add focused visual coverage
- Share compact item-row and paint-field anatomy across Fill, Stroke, Effects, and Export
- Add COLOR binding transactions with picker rollback and one-step undo
- Replace bespoke panel test hooks with semantic selectors and visual coverage
- Add accessible OkHCL channel sliders and use Reka ColorSlider for standard color channels
- Split fill state and binding-aware swatches from application popover composition
- Add keyboard-operable gradient stops, shared demos, generated docs, and focused coverage
- Add a reactive useColorModel API for format state, channel edits, Reka bridges, and slider presentation
- Move the app color panel and ColorInputRoot onto the shared model and remove superseded picker helpers
- Document the public contract and cover precise RGB plus OkHCL intent round trips
- Replace duplicated width and height binding branches with shared semantic fields
- Switch edited Hug and Fill dimensions to Fixed in one reversible transaction
- Add typed LayoutControls actions, documentation, and visual coverage
- Move independent-corner presentation and batched mutations into AppearanceControls
- Rebuild Position and Appearance with aligned panel grids and semantic locators
- Replace type text headers with compact node icons and add visual coverage
- Show one variable picker affordance with a quiet identity pill and accessible combobox
- Keep bound NumberField focus non-destructive until the first value mutation
- Prefer accessible and semantic test selectors over compound test IDs
