2026-04-30 13:01:47 +00:00
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
"label": "File",
|
|
|
|
|
"items": [
|
|
|
|
|
{
|
|
|
|
|
"id": "new",
|
|
|
|
|
"label": "New",
|
|
|
|
|
"accelerator": "CmdOrCtrl+N"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "open",
|
|
|
|
|
"label": "Open…",
|
|
|
|
|
"accelerator": "CmdOrCtrl+O"
|
|
|
|
|
},
|
2026-08-17 22:19:53 +00:00
|
|
|
{
|
|
|
|
|
"id": "open-recent",
|
|
|
|
|
"label": "Open Recent"
|
|
|
|
|
},
|
2026-08-03 14:28:39 +00:00
|
|
|
{
|
|
|
|
|
"id": "open-storage-workspace",
|
|
|
|
|
"label": "Open Storage Workspace…"
|
|
|
|
|
},
|
2026-04-30 13:01:47 +00:00
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "save",
|
|
|
|
|
"label": "Save",
|
|
|
|
|
"accelerator": "CmdOrCtrl+S"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "save-as",
|
|
|
|
|
"label": "Save As…",
|
|
|
|
|
"accelerator": "CmdOrCtrl+Shift+S"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "export-selection",
|
|
|
|
|
"label": "Export Selection",
|
|
|
|
|
"accelerator": "CmdOrCtrl+Shift+E",
|
|
|
|
|
"sub": [
|
|
|
|
|
{
|
|
|
|
|
"id": "export-png",
|
|
|
|
|
"label": "PNG"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "export-svg",
|
|
|
|
|
"label": "SVG"
|
|
|
|
|
},
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
{
|
|
|
|
|
"id": "export-pptx",
|
|
|
|
|
"label": "PPTX"
|
|
|
|
|
},
|
2026-04-30 13:01:47 +00:00
|
|
|
{
|
|
|
|
|
"id": "export-fig",
|
|
|
|
|
"label": ".fig"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "autosave",
|
|
|
|
|
"label": "Autosave",
|
|
|
|
|
"checkbox": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "close",
|
|
|
|
|
"label": "Close Tab",
|
|
|
|
|
"accelerator": "CmdOrCtrl+W"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "Edit",
|
|
|
|
|
"items": [
|
|
|
|
|
{
|
|
|
|
|
"id": "edit.undo",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Undo",
|
|
|
|
|
"accelerator": "CmdOrCtrl+Z"
|
2026-04-30 13:01:47 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "edit.redo",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Redo",
|
|
|
|
|
"accelerator": "CmdOrCtrl+Shift+Z"
|
2026-04-30 13:01:47 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "copy",
|
|
|
|
|
"label": "Copy",
|
|
|
|
|
"accelerator": "CmdOrCtrl+C"
|
|
|
|
|
},
|
2026-05-17 11:50:43 +00:00
|
|
|
{
|
|
|
|
|
"id": "cut",
|
|
|
|
|
"label": "Cut",
|
|
|
|
|
"accelerator": "CmdOrCtrl+X"
|
|
|
|
|
},
|
2026-04-30 13:01:47 +00:00
|
|
|
{
|
|
|
|
|
"id": "paste",
|
|
|
|
|
"label": "Paste",
|
|
|
|
|
"accelerator": "CmdOrCtrl+V"
|
|
|
|
|
},
|
2026-05-17 13:05:28 +00:00
|
|
|
{
|
|
|
|
|
"id": "paste-to-replace",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Paste to replace",
|
|
|
|
|
"accelerator": "CmdOrCtrl+Shift+R"
|
2026-05-17 13:05:28 +00:00
|
|
|
},
|
2026-04-30 13:01:47 +00:00
|
|
|
{
|
|
|
|
|
"id": "selection.duplicate",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Duplicate",
|
|
|
|
|
"accelerator": "CmdOrCtrl+D"
|
2026-04-30 13:01:47 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.delete",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Delete",
|
|
|
|
|
"accelerator": "Backspace"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.rename",
|
|
|
|
|
"label": "Rename Selection…",
|
|
|
|
|
"accelerator": "CmdOrCtrl+R"
|
2026-04-30 13:01:47 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.selectAll",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Select All",
|
|
|
|
|
"accelerator": "CmdOrCtrl+A"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.selectInverse",
|
|
|
|
|
"label": "Select Inverse",
|
|
|
|
|
"accelerator": "CmdOrCtrl+Shift+A"
|
2026-04-30 13:01:47 +00:00
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "View",
|
|
|
|
|
"items": [
|
|
|
|
|
{
|
|
|
|
|
"id": "view.zoom100",
|
2026-05-17 12:07:14 +00:00
|
|
|
"label": "Zoom to 100%"
|
2026-04-30 13:01:47 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "view.zoomFit",
|
2026-05-17 12:07:14 +00:00
|
|
|
"label": "Zoom to Fit"
|
2026-04-30 13:01:47 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "view.zoomSelection",
|
2026-05-17 12:07:14 +00:00
|
|
|
"label": "Zoom to Selection"
|
2026-04-30 13:01:47 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "zoom-in",
|
|
|
|
|
"label": "Zoom In",
|
|
|
|
|
"accelerator": "CmdOrCtrl+="
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "zoom-out",
|
|
|
|
|
"label": "Zoom Out",
|
|
|
|
|
"accelerator": "CmdOrCtrl+-"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
2026-08-15 07:31:52 +00:00
|
|
|
{
|
|
|
|
|
"id": "view-split-right",
|
|
|
|
|
"label": "Split Right"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "view-split-down",
|
|
|
|
|
"label": "Split Down"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
feat: edit variables as tokens in the variables dialog (#907)
* feat: prototype the design tokens panel
Undoable editor actions for token fields and mode conditions, a token view model, and table, inspector, collection and stylesheet panels shown in a Storybook story with a real editor.
* feat: lay the tokens panel out for mobile
Below the mobile breakpoint the collection tabs become a select, the list shows one chosen mode with the CSS name under each token, and the token, the modes, and the stylesheet each open over the list behind Back. CodeViewer can fill its container for the full-screen stylesheet.
* feat: share drill-in navigation and put tokens on a listbox
PanelDrillIn gives detail views one back control that names where it returns, a slide preset from theme/motion, and focus that moves into the detail and back to what opened it. The Settings model editor and the tokens panel's mobile views use it. The token list is a Reka Listbox with arrow-key navigation and labelled groups, and the inspector and stylesheet swap with a short fade under the motion policy.
* feat: lay the tokens panel out by container width
The panel switches to the compact drill-in by its own measured width, and the list's columns follow the list's width through container queries, so the panel adapts inside dialogs and split views, not only on phones. src/AGENTS.md now says when to use container queries, measured size, and viewport breakpoints.
* test(core): group the variable undo tests in a domain folder
* feat: edit variables as tokens in the variables dialog
The variables dialog now hosts the tokens panel: a grouped token list with CSS names, an inspector for each token and for the collection and its modes, and the live stylesheet. It keeps adding variables by type, search, collection and mode management, and copying the document's stylesheet, and lays out by its own width down to phones.
useVariables().collections returns copies, so components given a collection see modes added or renamed in place, and addVariable returns the new ID so the panel can open it.
* fix: satisfy the type-aware lint in token updates and panel stories
* docs: describe the tokens panel in the translated variables guides
* feat: say when each mode applies in plain words
A mode's condition was a raw CSS field that designers could not read. Each non-default mode now picks when it applies (switched manually, system dark or light mode, high contrast, reduced motion, screen or container width, or custom CSS), with the CSS it writes shown underneath and a note on how the mode behaves on the canvas and in exported code. Presets only write the condition string modes already store, so files round-trip unchanged. Column headers name the condition in words, and deleting the collection moves into a menu beside its name.
* feat: bring the variables dialog up to Figma's
The dialog now covers what Figma's variables dialog offers: collections and groups in a sidebar with counts, a group, search and type filter, type icons, names and values edited in place, drag to reorder, multi-select with a context menu, the Delete key and a side panel to duplicate, group and delete, aliases chosen from a variable picker and detached back to the value they showed, hiding from publishing, and an expand toggle. It opens from View → Variables… and the command palette as well as the Design panel.
It also fixes review findings: a single-mode collection labels its value Value, column titles share one font, a CSS name is typed after a fixed -- and checked by the CSS parser before it is saved, and the stylesheet previews CSS with the format chosen when copying. AppInput applies an instance's input classes last so they can override adornment padding.
* feat: undo and redo inside the variables dialog
Canvas shortcuts stop while any dialog is open, so Cmd+Z did nothing in the variables dialog although every edit there is on the editor's history. Undo and redo now take a document scope: they also run when the topmost layer is a dialog that edits the document, which the variables dialog marks, while menus, pickers and Settings still hold them back and a field with uncommitted text keeps its own undo.
Enter commits a field and returns focus to the list. The panel drops selections, group filters and collections that undo removed. A color picker session undoes as one step through a coalesce key on updateVariableValue, and undoing a deletion puts the variable back in its place.
* feat: search variables like the command palette
The variables search matched a substring of the name only, so a CSS name, a hex color or a description found nothing, and the palette, AppPicker and AppCombobox each spelled out the same Fuse.js options. One helper in @open-pencil/vue now owns the matching: fuzzySearch ranks results for lists people pick from, and fuzzyFilter keeps a list's own order for lists people arrange. The panel searches names, CSS names, descriptions and every mode's value, alias names included; useVariables() searches names and descriptions.
* fix: say a token group once when its name repeats it
Kits that mirror Tailwind classes name tokens like Gap/gap-1, which derived --gap-gap-1. A group the next segment repeats is now said once, giving --gap-1.
* fix: keep the add variable menu under its button after a resize
The toolbar swaps the icon button for the labelled one when the dialog widens. Reka keeps the anchor it mounted with, so the menu opened at the window corner; keying the trigger remounts it with the new button.
* fix: leave bound layers alone when variables are added or reordered
Adding, copying, or reordering variables re-resolved every bound layer in the document. In the shadcn kit two Avatar instances are saved at 24 while their binding gives 40, so adding a number resized them and relaid out about 7,800 layers, freezing the browser for seconds. These changes alter no bound value and now only request a render, as renaming already did.
* refactor: let the variables dialog own its undo shortcuts
Undo and redo in the dialog went through a document scope in the global shortcut registry, which decided whether the dialog was on top by querying Reka's dismissable layers in DOM order. The dialog now listens on its own content with a tinykeys handler built from the command keybindings: menus and pickers it opens portal elsewhere, so their keys never reach it, and the registry is back to one scope.
* refactor: read mode conditions with css-tree
Presets were recognized by normalizing the condition with regular expressions and matching another. css-tree, which Core already ships through unifont, now parses the condition into its media or container feature, so spacing, case and comments are handled as CSS does, and a non-breaking space, which CSS does not treat as whitespace, no longer turns a custom condition into a preset.
* refactor: take the mode attribute hint from modeAttribute
The hint for a manually switched mode cut the brackets off its selector with a regular expression. It now reads the attribute name and value from modeAttribute, which the selector is built from.
* fix: keep a refused CSS name in focus and color picker sessions apart
Enter on a CSS name the parser refuses no longer hands the keyboard back to the list, so the name can be corrected. The typed name is read with parseCSSName instead of stripping a leading -- by hand, so a pasted var(--name) works too.
Each color picker session takes a random undo key; a counter restarted when the inspector remounted, so two sessions on the same token could merge into one undo step.
* fix: keep token expressions and cleared fields in step with their variable
Editing a number left its CSS expression recording the old number, so reopening the file dropped the expression as edited elsewhere. A number now updates its expression, and an alias drops it, in the same undo step.
Undoing a token field that had been unset kept the key with an undefined value; it is now removed.
* fix: preview and detach aliases in their own mode
An alias in the Dark column showed, and detached to, what its target gives in the mode the canvas is in. Both now resolve in the column's mode.
* fix: drop tokens a filter hides from the selection
A search, group, or type filter could hide selected tokens that stayed selected, so the inspector, the bulk actions, and the Delete key still acted on rows the list no longer showed.
* fix: keep a drill-in's list out of the tab order while its detail slides
The list stayed focusable until the detail finished sliding in, and became focusable again under a detail sliding out. It is now inert from the moment the detail opens and the departing detail is inert. A detail with no field focuses its back control, and hidden inputs are skipped.
* docs: drop a duplicated Stroke entry from the changelog
Two merges left the Stroke-extends-Fill breaking change twice; the copy that still said strokes render solid only is outdated, since gradient and image strokes now import and render.
2026-10-06 12:35:40 +00:00
|
|
|
{
|
|
|
|
|
"id": "variables",
|
|
|
|
|
"label": "Variables…"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
{
|
|
|
|
|
"id": "view-rulers",
|
|
|
|
|
"label": "Rulers",
|
|
|
|
|
"checkbox": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "view-multiplayer-cursors",
|
|
|
|
|
"label": "Multiplayer Cursors",
|
|
|
|
|
"checkbox": true
|
|
|
|
|
},
|
feat: check designs live with a Lint panel, canvas markers, and fixes (#804)
* feat: check designs live with a Check panel and canvas issue markers
Design lint only ran from the CLI and AI tools, and its rules were too noisy
to show continuously: on a real imported page 786 of 888 layers had a
warning. The rules now report where a finding is actionable (a hardcoded
color only when a variable matches it, nesting only where the limit is
crossed, instance sublayers through their main component) and carry
structured data, and Recommended keeps warnings for likely problems.
The app checks the current page after edits settle. The Check tab groups
issues by rule with hover highlighting, reveal on click, and one-step
variable binding. Errors and warnings are marked on the canvas with
clustered markers that roll up to visible ancestors when zoomed out; markers
explain themselves on hover, open Check on click, and toggle with
View > Design issues.
* fix: keep the right panel and markers stable
The Check tab made the right-panel tab row overflow at common window widths,
so focusing the zoom menu scrolled the row and shifted the panel. Code and
AI tabs now drop their labels to screen readers when the row is narrow.
Touch target names are matched as whole words: "Rectangle" contained "cta"
and marked every rectangle. Markers also stay drawn during interactive edits
instead of blinking while a value is scrubbed.
* fix(ui): show right panel tab labels whenever they fit
* fix(ui): name the design check tab Lint and keep panel tabs consistent
The tab was an unlabelled icon between labelled Code and AI tabs. It is now
Lint, with the same icon and label anatomy as its neighbours, and its icon
takes the severity color instead of a count badge. All labelled tabs show
their labels when the row fits and drop them together when it does not.
* refactor(ui): build the Lint panel from shared components
Issue groups use AppCollapsible, actions use AppButton, and the severity
filters are a Reka toggle group with keyboard navigation. Issue rows no
longer nest a button inside a button. Panel state, visibility and the
focused-issue scroll live in useDesignCheckPanel, the rules menu is its own
component, and rule preferences change through preference actions.
Severity ordering reuses Core's ranking, detail numbers follow the app
language, and the check debounce uses useTimeoutFn.
* fix(lint): check the WCAG AA touch target size in the Recommended preset
Recommended flagged a 394 × 39 input because it required the 44 × 44 AAA size. It now checks the 24 × 24 AA minimum through a minSize option; Strict and Accessibility keep 44 × 44.
* feat(lint): fix design issues from rules, the Lint panel, the CLI, and agents
Rules attach fixes as data: a safe fix keeps the design as it looks (bind a
color to the variable it matches, round subpixel geometry that layout does
not own), a suggestion changes values (snap radius and spacing to the
scale, raise small text to the minimum). One Core applier re-validates
each fix against the current graph and merges changes per layer.
The Lint panel offers a fix per row and Fix all for safe fixes as one undo
step; openpencil lint --fix writes the fixed document; the lint and
lint_fix tools expose the same to MCP and AI chat.
The design-check spec's Close button is now 24 x 20: at 24 x 24 it passes
the WCAG AA touch target size that Recommended checks.
* feat(lint): pin issues outside the view to the canvas edge
Errors and warnings on layers outside the viewport had no marker, so a
check could report issues nobody could see. They are now pinned to the
canvas edge where a ray from the viewport center toward them leaves it,
with a chevron pointing their way; pins in one direction merge like
markers. Hovering lists them under the direction they lie in, and
clicking reveals and opens the most severe, nearest one.
Pins keep clear of UI floating over the canvas: the toolbar marks itself
with data-canvas-obstacle, and canvases report such rectangles to the
renderer through getOverlayObstacles each frame.
* feat(lint): mark layers with design issues in the Layers panel
Like an IDE marks files with problems and the folders holding them, a
layer with errors or warnings shows the most severe as an icon, and a
collapsed layer with issues inside it shows a dot in that color.
Suggestions stay in the Lint panel, as on the canvas, and the marks
follow the View → Design issues toggle.
* feat(lint): show issues per page and across the document
Loaded pages beyond the current one are now checked in the background,
one page at a time while the editor is idle, and checked again only when
an edit touches them; pages a large .fig file has not loaded are left
alone until opened rather than forced in. The page list shows each page's
errors and warnings like an IDE's problem count, and the Lint panel gains
a Document scope that lists every page's issues, tags the ones on other
pages, and switches to a row's page when it is opened.
* test(lint): use the core-tests alias and no comma operator in lint tests
Master now rejects ../../ imports and the comma operator in tests.
* refactor(app): create the Lint session with the editor store modules
The composition root passed its line budget once master added recent
pages; the Lint session belongs with the other per-editor services that
the modules factory creates and disposes.
* docs(changelog): keep master's latest Unreleased entries
2026-10-04 10:08:39 +00:00
|
|
|
{
|
|
|
|
|
"id": "view-design-issues",
|
|
|
|
|
"label": "Design Issues",
|
|
|
|
|
"checkbox": true
|
|
|
|
|
},
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
2026-04-30 13:01:47 +00:00
|
|
|
{
|
|
|
|
|
"id": "theme",
|
|
|
|
|
"label": "Theme",
|
|
|
|
|
"sub": [
|
|
|
|
|
{
|
|
|
|
|
"id": "theme-light",
|
|
|
|
|
"label": "Light",
|
|
|
|
|
"checkbox": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "theme-dark",
|
|
|
|
|
"label": "Dark",
|
|
|
|
|
"checkbox": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "theme-auto",
|
|
|
|
|
"label": "Auto",
|
|
|
|
|
"checkbox": true
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
2026-08-18 16:11:48 +00:00
|
|
|
{
|
|
|
|
|
"id": "preferences",
|
|
|
|
|
"label": "Preferences",
|
|
|
|
|
"sub": [
|
|
|
|
|
{
|
|
|
|
|
"id": "snap-geometry",
|
|
|
|
|
"label": "Snap to Geometry",
|
|
|
|
|
"checkbox": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "snap-objects",
|
|
|
|
|
"label": "Snap to Objects",
|
|
|
|
|
"checkbox": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "snap-pixel-grid",
|
|
|
|
|
"label": "Snap to Pixel Grid",
|
|
|
|
|
"checkbox": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "settings",
|
|
|
|
|
"label": "Settings…",
|
|
|
|
|
"accelerator": "CmdOrCtrl+,"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
2026-04-30 13:01:47 +00:00
|
|
|
{
|
|
|
|
|
"id": "toggle-ui",
|
|
|
|
|
"label": "Toggle UI",
|
|
|
|
|
"accelerator": "CmdOrCtrl+\\"
|
|
|
|
|
},
|
feat: behaviours and preview mode (#893)
* feat: author behaviours on main components
A main component or component set can behave as a Switch, Checkbox,
Slider, or Tabs, after Reka UI's primitives. The behaviour lives in
OpenPencil plugin data: boolean values bind to variant or boolean
properties with the values meaning on and off, a number keeps its own
range since Figma has no number property, and the control's
subcomponents bind to the component's slots. A Behaviour section in the
properties panel adds, binds, and removes it, each as one undo step,
and flags required bindings that are missing. The canvas-only layout's
pill becomes a component that preview will reuse.
* feat: preview instances with behaviours on the canvas
View > Preview (Cmd+Alt+Enter) puts the canvas in preview: a lone canvas
switches to the canvas-only layout with a Previewing pill, and a split
canvas previews on its own side. Clicking a Switch or Checkbox flips it,
dragging a Slider moves its thumb and range, and clicking a Tabs trigger
shows its panel. Preview keeps its state on copies of the instances it
touched, in a private graph with the document's ids, and the canvas
draws those copies in place of the originals, so the document, undo,
autosave, and collaborators never see it. Escape or the pill leaves
preview, Reset restores every control, and editing shortcuts, labels,
and outlines stay off while previewing.
* feat: translate behaviour and preview strings; cover preview with an e2e flow
* refactor(vue): reuse VariantDefinitionControl for behaviour property options
* refactor: split variant actions and preview interactions by domain
Variant authoring was one 706-line closure; it is now graph queries
(model), undo snapshots (history), property definition edits
(definitions), and the editor facade (index). Preview interactions move
into play/kinds, one module per control, registered by behaviour kind so
a new kind cannot ship without its contract and interaction. Behaviour
contracts are keyed by kind. In the Vue SDK, slot and variant authoring
controls get their own folders beside component-props and behaviour,
and the app's variant section joins slot/ and behaviour/.
* refactor: keep the behaviour model in scene-graph's plugin-data registry
Master now defines every OpenPencil plugin-data key in one typed registry
in scene-graph. The behaviour schema registers there as a field, and the
model and contracts move beside slots, exported from the package root;
the @open-pencil/core/behaviours subpath is gone.
* feat: interaction states and keyboard focus in preview
A behaviour can bind a variant property to the default, hover, pressed,
focus, and disabled states; binding it maps values named like those
states. Preview switches the instance's copy to the matching variant as
the pointer hovers, presses, and releases, keeps other values when the
set draws the combination and falls back to rest otherwise, and skips
disabled instances. Tab moves visible keyboard focus between controls,
Space, Enter, arrows, Home, and End use the focused one, and Escape
takes visible focus off before leaving preview. A Button kind covers
controls that only have states.
* feat: toggle, radio, group, progress, collapsible, and accordion behaviours
Radio group, toggle group, and accordion hold their items in a slot;
each item is an instance with its own behaviour, so a press inside the
slot goes to the group, which turns the pressed item on and the others
off through the item's own interaction. Progress shares the slider's
number handling through rangeControl, and a collapsible shows and hides
its content slot from its trigger, remembering its open state even
when no property draws it. Tabs and groups share arrow-key navigation.
* feat: text field, textarea, and number field behaviours
A behaviour value can now be text, bound to a text property, so
preview types into a copy of the field through the same property path
the editor uses. A bound Filled value switches to the placeholder
variant when the field empties. A number field keeps its own range,
shows its value through a text property, and steps from its increment
and decrement slots and the arrow keys. Text fields show focus from a
click, and the focused control receives every key; Option still types,
and only Cmd or Ctrl combinations stay shortcuts.
* fix: keep behaviour bindings when saving as .fig
Saving as .fig gives component properties new GUIDs, but behaviours
kept the old ids in their plugin data, so every binding read as missing
after reopening. The export now renames the ids behaviours bind with
the same GUIDs, on its own copy of the document.
* fix: let previewed controls resize layout imported from .fig
Layers from a .fig keep the sizes Figma computed, and auto layout
prefers them, so an opened collapsible or accordion item kept its
closed height in preview. When preview shows, hides, or retypes a
layer in a copy, it drops those sizes from the layer's copied ancestors
so auto layout sizes them again; untouched layers keep Figma's sizes.
* fix: publish behaviours and other plugin content with library assets
Every OpenPencil plugin-data field now declares its role: content that
exists only as plugin data (behaviours, OkHCL picks), format copies of
node fields written for files, or bookkeeping about where a document
or node came from. Library snapshots keep a node's content plugin data,
including other plugins' entries, and drop the rest; the asset hash
counts the same entries, so a behaviour-only change is offered as an
update while a .fig round trip still changes nothing.
* feat: name behaviour rows by meaning and create what they need
The Behaviour section named every main value "Value" under a "Values"
heading, and a component without matching properties left an empty
picker with no way forward. Rows are now named for the control (On,
Checked, Pressed, Text), rows the control needs or already uses come
first, and the optional rest folds under More options; a button keeps
its states in view. An empty row creates what it needs in one undo
step: a text layer and text property, Off and On variants on a set, or
a slot frame for a part. The missing chip names the row it means and
takes you there.
* fix(dom-css): position free layers, hug content, and round ellipses
HTML and Tailwind export stacked the layers of frames without auto
layout in block flow, wrote fixed pixel sizes for auto layout frames
set to Hug and for auto-sizing text, and drew ellipses as boxes. Layers
a parent does not lay out are now absolutely positioned at their
coordinates inside a relative frame, hugging axes are left to the
content, and ellipses get a 50% radius.
* feat: run preview as live Reka UI islands over the canvas
Preview simulated controls on the canvas: copies of instances, a
handler per kind, its own key routing, and append-only text. It now
runs them as real components. Each top-level layer that holds an
instance with a behaviour becomes an island: its layers are projected
to DOM through dom-css into a shadow root laid over the pane at its pan
and zoom, and each behaviour mounts its Reka UI primitives on its
layers, so text fields are real inputs and focus, keys, and layout are
the browser's. Core's resolvePlayState shows instances in a state on a
private graph, so the component's variants draw it, and controls are
keyed by layer path so a variant switch keeps their DOM. The canvas
leaves island layers to the islands, and the canvas play runtime and
its key routing are gone.
* fix: derive variant properties from Property=Value component names
figma.combineAsVariants and Combine as variants only derived variant
properties from slash-separated names, so components named as Figma
names variants, such as State=On, Size=Large, became a set with no
properties. Both now derive each named property and its values, after
the slash form.
* feat: script and tool access to behaviours by name
Behaviour contracts follow Reka UI's anatomy: tabs keep their triggers
in the list slot and their content panels in a panels slot, and a slot
of repeated parts names the Reka part of its children. A behaviour
spec names component properties and slots instead of ids and resolves
to the stored behaviour and back, with errors that list what the
component has.
Scripts get an `openpencil` global next to `figma`, in the Figma API's
style: setBehaviour, getBehaviour with bindValue, bindPart, states,
and missing, behaviourKinds, and createSlot. The eval tool, the CLI,
and app automation compile scripts through one compileScript, so the
CLI now returns the last expression as the others do. MCP and AI chat
get set_behaviour, get_behaviour, and create_slot.
* feat: write controls in design JSX with Reka UI's element names
`<Switch.Root modelValue="State">` renders a main component, or a set
when its children are variants, that behaves as a switch, and
`<Switch.Thumb>` the slot that draws its thumb, one slot across the
set's variants. Inputs become the text property of a field, tab
triggers and panels go in their List and Panels slots, and a group's
items are `<RadioGroup.Item of={…} />` instances in its Items slot.
JSX export writes components with behaviours the same way, so they
render back unchanged. The authoring reference documents controls, and
the codegen and chat prompts now include it verbatim instead of
dedenting its code examples.
* chore: format the CLI export test
* docs: document slots, behaviours, preview, and the openpencil API
The components guide covers slots, behaviours, and preview with its
shortcut; scripting covers the openpencil global and eval's last-
expression result; the MCP and AI chat pages list the new tools; the
features overview, README, and roadmap mention working controls. The
chat prompt says how to build a control, and the codegen prompt builds
components with behaviours on their Reka UI primitives.
* chore: format the eval CLI test
* docs: explain behaviours and preview islands, and guide the openpencil API
A development page explains the behaviour model, the four authoring
surfaces, how preview islands turn a control's state into live Reka UI
components, and how to add a kind; the architecture page links it. The
Core guide sets the rules for OpenPencilAPI: Figma-only `figma`,
OpenPencil features on `openpencil` in the same style, one
compileScript, names over ids, and docs with every member. Package
READMEs mention the openpencil global, PlayIslands, Reka-named JSX, and
the behaviour model. Design JSX's behaviour modules move into a
behaviours folder instead of a suffixed sibling.
* refactor: center pasted layers through translate
centerNodesAt repeated translate's loop, which test:dupes reports on
master too.
* fix: validate behaviour ranges and guess on and off by name
A number value now needs max above min and a positive step: the schema,
specs, and the panel reject a range a slider cannot step through. Binding
a variant property guesses on and off by value name, as specs do, and a
boolean property gets no on/off pair. Part bindings are read through
partBinding, a replaced document restarts preview from its designed
state, and the e2e preview shortcut uses ControlOrMeta.
* feat: make the Behaviour section say what to do next
A slider's range fields now carry inline Min, Max, Step, and Start labels.
States offers Add state variants, which adds a Default, Hover, Pressed,
Focus, and Disabled variant and binds them; Add Off and On variants and
Add state variants turn a lone main component into a component set first,
and a part's slot can be added to a set, in every variant under one slot
id. Rows that could do nothing are gone: no empty pickers and no hints to
combine variants by hand, and an unbound Disabled is left to the states.
A warning line names what is still needed and replaces the missing chip,
and the Switch's main value is called Checked.
* fix: keep each slot to one part and keep creating slots at hand
A slot draws one part, so the Behaviour section no longer offers a slot
another part uses, and specs (the openpencil API, tools, and JSX) reject
binding one slot to two parts. A part's picker keeps an action to add a
new slot in its footer, so adding the first slot no longer hides it for
the other parts.
2026-10-06 13:23:05 +00:00
|
|
|
{
|
|
|
|
|
"id": "toggle-preview",
|
|
|
|
|
"label": "Preview",
|
|
|
|
|
"accelerator": "CmdOrCtrl+Alt+Enter"
|
|
|
|
|
},
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
2026-04-30 13:01:47 +00:00
|
|
|
{
|
|
|
|
|
"id": "dev-tools",
|
2026-05-17 12:02:42 +00:00
|
|
|
"label": "Developer Tools",
|
|
|
|
|
"accelerator": "CmdOrCtrl+Alt+I"
|
2026-04-30 13:01:47 +00:00
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "Object",
|
|
|
|
|
"items": [
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.group",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Group Selection",
|
|
|
|
|
"accelerator": "CmdOrCtrl+G"
|
2026-04-30 13:01:47 +00:00
|
|
|
},
|
2026-05-17 12:52:20 +00:00
|
|
|
{
|
|
|
|
|
"id": "selection.frameSelection",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Frame Selection",
|
|
|
|
|
"accelerator": "CmdOrCtrl+Alt+G"
|
2026-05-17 12:52:20 +00:00
|
|
|
},
|
2026-04-30 13:01:47 +00:00
|
|
|
{
|
|
|
|
|
"id": "selection.ungroup",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Ungroup Selection",
|
|
|
|
|
"accelerator": "CmdOrCtrl+Shift+G"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.toggleMask",
|
|
|
|
|
"label": "Use as Mask",
|
|
|
|
|
"accelerator": "CmdOrCtrl+Alt+M"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.toggleVisibility",
|
|
|
|
|
"label": "Show/Hide",
|
|
|
|
|
"accelerator": "CmdOrCtrl+Shift+H"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.toggleLock",
|
|
|
|
|
"label": "Lock/Unlock",
|
|
|
|
|
"accelerator": "CmdOrCtrl+Shift+L"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.flipHorizontal",
|
|
|
|
|
"label": "Flip Horizontal",
|
|
|
|
|
"accelerator": "Shift+H"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.flipVertical",
|
|
|
|
|
"label": "Flip Vertical",
|
|
|
|
|
"accelerator": "Shift+V"
|
2026-04-30 13:01:47 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
2026-05-17 14:33:26 +00:00
|
|
|
{
|
|
|
|
|
"id": "selection.booleanUnion",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Union selection",
|
|
|
|
|
"accelerator": "Alt+Shift+U"
|
2026-05-17 14:33:26 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.booleanSubtract",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Subtract selection",
|
|
|
|
|
"accelerator": "Alt+Shift+S"
|
2026-05-17 14:33:26 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.booleanIntersect",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Intersect selection",
|
|
|
|
|
"accelerator": "Alt+Shift+I"
|
2026-05-17 14:33:26 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.booleanExclude",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Exclude selection",
|
|
|
|
|
"accelerator": "Alt+Shift+E"
|
2026-05-17 14:33:26 +00:00
|
|
|
},
|
2026-05-17 15:27:54 +00:00
|
|
|
{
|
|
|
|
|
"id": "selection.flatten",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Flatten",
|
|
|
|
|
"accelerator": "Alt+Shift+F"
|
2026-05-17 15:27:54 +00:00
|
|
|
},
|
2026-05-17 16:45:39 +00:00
|
|
|
{
|
|
|
|
|
"id": "selection.outlineText",
|
|
|
|
|
"label": "Outline text"
|
|
|
|
|
},
|
2026-05-17 17:18:14 +00:00
|
|
|
{
|
|
|
|
|
"id": "selection.outlineStroke",
|
|
|
|
|
"label": "Outline stroke"
|
|
|
|
|
},
|
2026-05-17 14:33:26 +00:00
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
2026-04-30 13:01:47 +00:00
|
|
|
{
|
|
|
|
|
"id": "selection.createComponent",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Create Component",
|
|
|
|
|
"accelerator": "CmdOrCtrl+Alt+K"
|
2026-04-30 13:01:47 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.createComponentSet",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Create Component Set",
|
|
|
|
|
"accelerator": "CmdOrCtrl+Shift+K"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.createInstance",
|
|
|
|
|
"label": "Create Instance"
|
|
|
|
|
},
|
feat: create, fill, and edit slots (#862)
* feat(app): add slot property controls and a shared picker
AppPicker is a searchable, grouped list that opens beside the properties
panel, built on Reka's popover and listbox so search keeps arrow-key
navigation. It has comfortable rows with a thumbnail and description and
compact rows for plain names, plus an optional footer action.
The slot property row shows whether an instance's slot is Default or
Modified, its item count, its limits with a checklist popover, Add
instances on AppPicker, and Reset slot and Delete contents. These are
presentational; wiring them to the editor follows. Strings are English
only until the locale files catch up.
* feat(app): open variable, style, and instance-swap choices in the shared picker
The variable binding picker, the shared style fields, and instance-swap
properties now open AppPicker: a titled panel beside the properties panel
with search that keeps arrow-key navigation, a check on the current
choice, and footer actions. Variable binding keeps its detach and
create-variable actions. Instance-swap choices list the property's
preferred components first; instanceSwapOptions keeps the preferred flag
it already computed. AppPickerField gives select-shaped fields the same
picker with a combobox trigger.
* feat(core): edit instance slot content
Only an instance's slots take layers now. slotScope classifies a parent as
free, a slot of an instance, or the locked rest of an instance. Moves,
reorders, layer-panel drops, paste, duplicate, and instance creation
claim an untouched slot first, as Figma does on the first edit, and
refuse the locked part; drops over it land in the instance's parent.
Claiming keeps the layers but unlinks them from the component and moves
the instance's overrides on nested instances onto those instances.
Reset slot, Delete contents, and Add instance are editor actions, each
one undo step that restores the instance's subtree. A canvas drop or
reorder that claims a slot undoes together with the move.
* feat(app): show and edit slot properties of the selected instance
The component properties section lists each slot of the selected instance
with its state, item count and limits, and adds instances, resets or clears
its content through the editor's slot actions. The slot model lives in the
Vue SDK as useSlotProperties.
* feat(app): outline slots on the canvas and mark them in the layers panel
Hovering or selecting a component, an instance, or a layer inside a slot
draws its slots with a dashed pink outline and tints empty ones. Slot
frames are selected and hovered in pink and show a dashed-square icon in
the layers panel.
* test(app): cover slot outlines with canvas snapshots
* feat(app): translate slot and picker strings
* docs: note slot editing and the shared picker
* refactor: share slot test and story setup
* refactor(app): name the picker's header prop heading
* feat(core): create, configure, and remove slots on main components
A frame of a main component becomes a slot through a SLOT property
named after it; other sibling layers are first wrapped in an auto
layout frame. Slot settings and removal are single undo steps.
Instances now follow the component's property bindings on sync, so a
slot created or removed on the component reaches existing instances.
Slot helpers move to a slots domain folder in Scene Graph and Core.
* feat(app): create and configure slots from the menu and properties panel
Create slot joins the canvas context menu for layers of a main
component. A Slots section on main components and their frames
renames slots, sets their description, layer limits, and preferred
components, and removes them.
* fix: keep slot claims in the same undo step and refuse wraps inside instances
Creating an instance and pasting HTML now batch the slot claim with the
edit. Undoing an added slot instance restores the previous selection.
Grouping or wrapping layers in the locked part of an instance is
refused, and a section that cannot move no longer claims a slot. The
picker clears its search however it closes, and its close and slot
actions labels are translated.
* feat(core): create and inspect slots through the plugin API
component.createSlot() adds a 100x100 frame named Slot, Slot 2, and so
on, bound to a new SLOT property, as live Figma does. Slot frames read
type SLOT, resetSlot() restores an instance slot's component content,
and limitViolations reports BELOW_MIN, ABOVE_MAX, and
HAS_NON_PREFERRED for instance slots. addComponentProperty and
editComponentProperty take a description and slotSettings, a cloned
slot is a plain frame, and componentPropertyReferences uses property
keys in both directions. The limit checks move to Scene Graph so the
Vue SDK and the plugin API share them.
* fix: keep nested slot content across swaps and read nested instance properties
A nested instance points at the instance it was cloned from, so its
component properties resolved to nothing. Properties now resolve through
those links to the main component, and a swap or variant switch parks
the slot content nested instances own and restores it into nested
instances of the same names, as live Figma does. Plugin appendChild and
insertChild claim the slot they add to and refuse the locked part of an
instance with Figma's error.
* test(core): record resetSlot on a main component slot; fix the Slots roadmap row
* fix(core): refuse deleting layers outside an instance's slots
As in Figma, delete and plugin remove() leave an instance's own layers
and its slot frames alone, while removing slot content claims the slot
in the same undo step as the delete.
* test(app): wait for the bulk rename dialog to close before the next shortcut
* feat(app): unify add, remove, and settings controls in the properties panel
A section's + adds an item and a row's - removes it everywhere: grid
tracks and variant properties now follow the fill and effect lists, and
the header + of a component set adds Property 1 ready to rename instead
of an inline form. Removing a variant is Delete, as for any layer.
Row settings share the sliders icon, the variables button opens with
its own icon, every icon button requires a label, and the instance
header buttons use sentence case. Create Slot joins the app menu.
* docs: note the unified properties panel controls
* feat(app): animate floating panels alike and share the severity icon
Popovers, menus, selects, comboboxes, and pickers now fade and grow in
from the side they open on and fade out on close, from one motion
preset that respects reduced motion; tooltips keep the tooltip preset.
SeverityIcon and its colours move from the design check to shared
feedback UI, and slot limits use them, so a broken limit reads like a
design-check warning.
* docs: note consistent popover and menu animation
* feat(app): give every floating panel one surface and close it at once
Popovers, menus, selects, comboboxes, pickers, presence cards, chat
history, and the issue tooltip share one rounded surface with a 1px
ring that outlines it in both themes; one-line tooltips keep a compact
shape with the same edge. The select theme's radius and elevation
options and local shadow overrides are gone. Panels still grow in from
their side but now close immediately: a fading modal menu kept blocking
the canvas and shortcuts until it unmounted.
* fix(app): keep a reopened context menu open and name option-drag undo Duplicate
Closing the canvas menu hands focus back to the canvas; when that
landed just after a quick reopen, the new menu closed as focus moved
outside it. Shortcuts no longer wait for a panel that is already
closing, and an option-drag duplicate that claims a slot is undone as
Duplicate rather than Move.
* test(app): wait for menus and popovers to close before the next key
2026-10-04 17:02:28 +00:00
|
|
|
{
|
|
|
|
|
"id": "selection.createSlot",
|
|
|
|
|
"label": "Create Slot"
|
|
|
|
|
},
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
{
|
|
|
|
|
"id": "selection.goToMainComponent",
|
|
|
|
|
"label": "Go to Main Component"
|
2026-04-30 13:01:47 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.detachInstance",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Detach Instance",
|
|
|
|
|
"accelerator": "CmdOrCtrl+Alt+B"
|
2026-04-30 13:01:47 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
{
|
|
|
|
|
"id": "selection.bringForward",
|
|
|
|
|
"label": "Bring Forward",
|
|
|
|
|
"accelerator": "CmdOrCtrl+]"
|
|
|
|
|
},
|
2026-04-30 13:01:47 +00:00
|
|
|
{
|
|
|
|
|
"id": "selection.bringToFront",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Bring to Front",
|
|
|
|
|
"accelerator": "]"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.sendBackward",
|
|
|
|
|
"label": "Send Backward",
|
|
|
|
|
"accelerator": "CmdOrCtrl+["
|
2026-04-30 13:01:47 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.sendToBack",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Send to Back",
|
|
|
|
|
"accelerator": "["
|
2026-04-30 13:01:47 +00:00
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "Text",
|
|
|
|
|
"items": [
|
|
|
|
|
{
|
|
|
|
|
"id": "text.bold",
|
|
|
|
|
"label": "Bold",
|
|
|
|
|
"accelerator": "CmdOrCtrl+B"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "text.italic",
|
|
|
|
|
"label": "Italic",
|
|
|
|
|
"accelerator": "CmdOrCtrl+I"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "text.underline",
|
|
|
|
|
"label": "Underline",
|
|
|
|
|
"accelerator": "CmdOrCtrl+U"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "Arrange",
|
|
|
|
|
"items": [
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.wrapInAutoLayout",
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
"label": "Wrap in Auto Layout",
|
|
|
|
|
"accelerator": "Shift+A"
|
2026-04-30 13:01:47 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
|
|
|
|
{
|
2026-06-30 07:25:52 +00:00
|
|
|
"id": "arrange.align-left",
|
2026-04-30 13:01:47 +00:00
|
|
|
"label": "Align Left",
|
|
|
|
|
"accelerator": "Alt+A"
|
|
|
|
|
},
|
|
|
|
|
{
|
2026-06-30 07:25:52 +00:00
|
|
|
"id": "arrange.align-center",
|
2026-04-30 13:01:47 +00:00
|
|
|
"label": "Align Center",
|
|
|
|
|
"accelerator": "Alt+H"
|
|
|
|
|
},
|
|
|
|
|
{
|
2026-06-30 07:25:52 +00:00
|
|
|
"id": "arrange.align-right",
|
2026-04-30 13:01:47 +00:00
|
|
|
"label": "Align Right",
|
|
|
|
|
"accelerator": "Alt+D"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
|
|
|
|
{
|
2026-06-30 07:25:52 +00:00
|
|
|
"id": "arrange.align-top",
|
2026-04-30 13:01:47 +00:00
|
|
|
"label": "Align Top",
|
|
|
|
|
"accelerator": "Alt+W"
|
|
|
|
|
},
|
|
|
|
|
{
|
2026-06-30 07:25:52 +00:00
|
|
|
"id": "arrange.align-middle",
|
2026-04-30 13:01:47 +00:00
|
|
|
"label": "Align Middle",
|
|
|
|
|
"accelerator": "Alt+V"
|
|
|
|
|
},
|
|
|
|
|
{
|
2026-06-30 07:25:52 +00:00
|
|
|
"id": "arrange.align-bottom",
|
2026-04-30 13:01:47 +00:00
|
|
|
"label": "Align Bottom",
|
|
|
|
|
"accelerator": "Alt+S"
|
feat(app): expand Figma menu and selection parity (#459)
- Add Figma-style object, component, selection, view, settings, and browser Move to Page actions
- Add undoable z-order, transformed distribution, inverse selection, and single/bulk rename behavior
- Keep browser and native menus, shortcuts, generated schema, localization, and documentation aligned
2026-08-02 21:23:05 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "separator"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.distributeHorizontal",
|
|
|
|
|
"label": "Distribute Horizontal Spacing"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "selection.distributeVertical",
|
|
|
|
|
"label": "Distribute Vertical Spacing"
|
2026-04-30 13:01:47 +00:00
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|