Roll back the Pulse music-app demo to the prior standalone showcase
(Components / App Preview / Effects) which cleanly demonstrates gradients,
drop/inner shadows, blend modes, masks, and corner smoothing. Also removed the
Pulse JSX showcase file and restored the matching demo test.
<svg> icons always rendered at the 24px default because the size fell back
to 24 even when w/h were given. Prefer explicit w/h over the default so icon
content scales to fit its frame.
- Populate requested pages for scoped reads and all pages for document-wide operations
- Export whole FIG documents by default while keeping explicit page exports partial
Fill the three biggest gaps that blocked authoring real designs in JSX:
- mask prop on any node: <Ellipse mask> / mask="luminance" / mask="vector"
sets isMask + maskType so sibling content clips (Figma's mask model)
- <svg> element rendering inline SVG markup into vector nodes, reusing the
iconify path pipeline (extractPaths + parseSVGPath + scalePathInfos)
- Instance overrides: <Instance of="X" overrides={{ 'childName:prop': v }} />
applies child overrides by name and records them so component sync keeps them
Adds gap tests and the shared scalePathInfos/finishIconRender helpers to
avoid duplicating the iconify pipeline.
Rebuild the demo as a cohesive product showcase:
- Component Library: Button/Badge/Avatar/Nav/Toggle as real components
- App — Analytics: a modern dashboard assembled from instances with real
auto-layout and semantic variables, teaching the OpenPencil workflow
- Correct stat badge tones and component captions
Apply success/accent/danger tones to the stat badges after layout with the
label fill recorded as an override, so component sync preserves them.
Badges now read +14% green, +8% blue, -3% red.
- Remap descendant clone sources when instance branches are repopulated
- Keep same-name component-property siblings distinct
- Name swapped variants after their component sets
Replace the grab-bag demo (3 disconnected feature boxes) with a real product
screen that teaches the OpenPencil workflow by example:
- Component Library: Button (primary/secondary), Badge, Avatar, Nav item,
Toggle as actual COMPONENTs
- App — Analytics: a modern dashboard assembled from INSTANCEs of those
components, laid out with real auto-layout (sidebar, stat row, chart,
callout), themed via bound semantic variables
- Single restrained palette (one accent + surfaces/text/semantic tones)
- Instance text set with recorded overrides so component sync keeps labels
Editing a variable re-themes the screen; resizing frames demonstrates live
auto-layout reflow.
- Reuse imported collection, mode, and variable GUIDs when safe
- Keep raw paint asset refs instead of promoting incomplete library bindings
- Retain GUID conversion only for effect aliases required by Kiwi
- Import and round-trip per-node variable mode overrides
- Resolve fill and stroke aliases through the nearest mode scope
- Preserve mode maps across cloning and instance synchronization
- 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.
- Isolate the Copy/Paste submenu scenario from prior context-menu state
- Close shared fixture pages safely when a project-level skip bypasses setup
- Refresh the reviewed typography panel snapshot
- Keep the development MCP bridge alive until Vite shuts down
- Ignore empty host-font responses and cover current browser font policy
- Update interaction selectors, menu labels, resize accounting, and reviewed UI snapshots
Fields previously used a transparent idle fill (a misread of Figma, whose
inputs actually keep a visible fill at idle). Editable controls now read as
controls: idle fill #383838 (dark) / #f0f1f3 (light), one step up from the
panel, with a slightly stronger hover and the accent focus border.
- Iterate assignment-bearing instances instead of rescanning the expanded graph
- Build clone indexes from the SceneGraph instance index
- Reuse static component property maps across convergence passes
- Populate only the first page during initial document reads
- Avoid duplicating immutable instance payloads and opaque source metadata
- Propagate derived text through source-ordered clone chains
- 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
Wire two engine-supported features into the properties panel:
- Text auto-resize: a Resizing segmented control for text nodes (Auto width
/ Auto height / Fixed size) backed by the existing textAutoResize engine
- Layout grids: a full editor section for frames (pattern, count, gutter/
section size, margin, visibility) using the existing canvas renderer
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.
