Commit graph

56 commits

Author SHA1 Message Date
Danila Poyarkov f55b887d2b
feat(scene-graph)!: make a stroke a paint (#864)
* feat(scene-graph)!: make a stroke a paint

Stroke extends Fill, so a stroke carries the same paint vocabulary a
fill does instead of a lone color. Every construction site now states
a solid paint type, which keeps today's behaviour exactly; rendering,
.fig conversion, and the stroke panel still read solid strokes only.

copyFill is generic over the paint shape so copyStroke reuses it
rather than repeating the deep copy of gradient stops, transforms and
pattern fields.

Groundwork for the gradient and image strokes in #797.

* test(scene-graph): cover a stroke's nested paint data in copyStroke

A stroke is a paint now, so its gradient stops and transform must copy
as deeply as a fill's; the fixture was solid and proved only the color
and dash pattern.
2026-10-04 13:38:05 +04:00
Danila Poyarkov 899fecf845
fix: convert document colour profiles, keep text edits live, and fix .fig exports (#716)
* fix(vue): update instance text properties while typing

Instance text property edits only reached the canvas on Enter or blur, so
the canvas and layer tree lagged behind the field. Emit model updates as
the text changes, commit on blur or Enter, and route bursts through the
existing interactive-edit lease and undo batch so rapid edits collapse
into one transaction.

* fix(vue): present the canvas in sRGB to keep P3 blends correct

CanvasKit 0.41 wraps sRGB on-screen surfaces as RGBA8 but every other
color space as RGBA16F, while browser drawing buffers stay RGBA8 when
their color space changes. Requesting DISPLAY_P3 therefore produced
invalid destination copies and broken blends: black rectangles and brown
Overlay fills over Display-P3 documents. Keep presentation in sRGB and
read the buffer back rather than trusting the setter, leaving the
document color space and its stored colors untouched.

* perf(fig): encode glyph path commands without per-coordinate allocation

Glyph outline encoding allocated an ArrayBuffer, DataView, and Uint8Array
for every coordinate and spread each byte into a number array, so recovery
snapshots and text-heavy exports blocked the main thread for 159-167ms.
Size the output once and write through a single DataView; encoded bytes are
unchanged.

* refactor(vue): separate component property edit resolution from batching

The live text path had grown a boolean flag through a single applyValue that
resolved the edit, chose the batch, and mutated instances, which made the
two entry points differ only by that flag.

Resolve an edit once, keep a named batch key, and let setValue and
setTextValue state their own batching policy. Watch the page and selection
sources directly now that selection is replaced by identity, drop the
redundant scene dependencies the useSceneComputed wrapper already tracks,
move the variant option projection next to the swap projection, and resolve
the swap candidate list once per controls pass instead of once per control.

* feat(vue): restore wide-gamut P3 presentation where the renderer supports it

CanvasKit wraps sRGB on-screen surfaces as RGBA_8888 and every other color
space as RGBA_F16, with the pixel format deliberately not exposed, so a
Display-P3 surface only matches the browser buffer when that buffer is
floating point. Chromium 122+ provides drawingBufferStorage for that; this
negotiates the pairing, keeps the sRGB fallback everywhere else, and warns
with the existing dismissible banner when a Display-P3 document cannot be
presented in wide gamut.

Software rasterizers advertise the float extensions but fail an offscreen
framebuffer attach on the first content frame, so they stay on sRGB, as do
WebKit and Firefox, which have no drawingBufferStorage. A new
document:color-space-changed event recreates the surface when a P3 document
arrives after mount, which previously kept whatever surface the first
document created.

* refactor(web): report the canvas presentation instead of re-deriving it

The wide-gamut notice decided availability from a capability probe, which can
disagree with the surface: configurePresentation also falls back when the
float storage install is rejected or the color space setter is ignored. Pass
the surface's actual result through a new onPresentation option, mirror the
document color space into app state, and let the notice read both, so it
appears exactly when a Display-P3 document is really presented in sRGB. That
also removes two editor-event subscriptions and a tab watcher.

Rename SafariBanner to FileApiBanner, since the condition is the File System
Access API rather than Safari, and move the availability check and picker call
into one capability module instead of repeating them at each save site.

* refactor(web): point capability notices at one neutral support reference

The file API notice linked "Use Chrome" to a Chrome download page while
naming Edge as inert text, and the wide-gamut notice offered no browser
guidance at all. Both now link to the caniuse support table for the API that
decides the capability, so the advice is vendor-neutral and stays correct as
versions move.

External link behavior moves into one primitive: SettingsLink and both
notices share it, gaining rel="noopener noreferrer" and the desktop opener
path, which the notices need because the wide-gamut notice also renders in
Tauri where a raw anchor cannot open an external page.

* fix(fig): stop failing .fig export on unencodable OpenType feature tags

The Kiwi schema types toggledOn/OffOTFeatures as its OpenTypeFeature enum,
which has no PNUM, TNUM, LNUM, ONUM, FRAC, SMCP, C2SC, SUPS, or SUBS member.
Features that map to a typed axis were only written when enabled, so a
disabled one fell through to a raw tag, and encoding then rejected it:
`Invalid value "PNUM" for enum "OpenTypeFeature"`. Because save and recovery
snapshots share that export path, any text using those features could not be
written to a `.fig` file at all — the demo's own typography comparison hit it
in every run.

Disabled mapped tags now clear their axis to the schema's neutral NORMAL value,
an enabled tag on the same axis wins over a disabled sibling so "TNUM on, PNUM
off" still means tabular figures, and tags with no Kiwi representation are
dropped instead of poisoning the whole export.

* perf(core): recompute layout only for the pages a component edit affects

Editing a component recomputed layout for the entire graph, which cost tens
of milliseconds per edit in documents with several populated pages. Layout now
runs once per affected page: the pages of the edited subtrees, their
components, and every instance of those components, which may live on another
page.

The layout function is injected so the scoping contract is testable, and the
existing behaviour is kept when no page can be resolved.

* feat(core): follow the document colour profile when painting

Numbers in a document are coordinates in the profile that document declares,
so painting into a surface with a different profile has to convert them.
Nothing did: stored values were handed to the GPU as-is, which is why a
Display-P3 document looked more saturated on a wide-gamut display than on an
sRGB one, and why export labels and stored values disagreed.

Rendering now resolves each colour from the document's profile into the
surface's profile, reporting clipping when a wider profile does not fit, and
OKHCL colours resolve into the requested target instead of being baked to
sRGB. New documents also default to sRGB, matching Figma, so Display P3 is
reserved for documents that declare it rather than being assumed for
everything OpenPencil creates.

* test(canvas): exercise the P3 spec on the paint page

The P3 rendering spec used the demo's reference page and the shared
`selectDemoReferencePage` helper. The paint page covers the same ground —
gradients, shadows, blurs, multiply and screen blends, an alpha mask — and
the helper is going away with the reference page, so this keeps the spec
independent of that demo content.

The card specs now follow whichever page owns the card instead of switching
by page name, which works for either demo layout.
2026-09-18 00:43:10 +03:00
Danila Poyarkov 453b27f15f perf(properties): retain inactive panels safely
Retain one selection-property subtree while frame presets are shown. Suspend opted-in descendant scopes after cleanup, cancel drafts before detachment can blur inputs, close portals, and release previews and pending resource work.

Track focused-element removal with VueUse so WebKit shortcuts resume after input teardown. Cover retained identity, hidden inactivity, binding rollback, async disposal, undo, popup reactivation and browser focus behavior.
2026-09-15 17:01:44 +03:00
Danila Poyarkov d16400b3e6 feat(editor): checkpoint live interaction improvements
Unify preview-aware transforms across scene drawing, labels, selection and input. Give live property and creation edits explicit preview ownership, preserve cancellation and one-step undo, and reuse bounded text preparation resources.

Include retained device-grid handling, worktree HMR coverage, and nested/reflected interaction regressions in this cohesive progress checkpoint.

Validation: full check passes; 734 scoped unit tests and 53 targeted browser tests pass. This is NOT merge-ready: the unchanged exact nested filled-section held/released regression still fails with 63 differing pixels (maximum channel delta 5/255). The browser pass count excludes that separately run failure and the previously classified paint-field-width baseline. Raster-origin investigation and broader acceptance remain outstanding.
2026-09-15 11:36:17 +03:00
Danila Poyarkov 4340f864a4 test(properties): group corner specs by domain 2026-09-13 14:52:20 +03:00
Danila Poyarkov eb38da0d08 fix(properties): preserve shared corner bindings in collapsed controls 2026-09-13 14:45:26 +03:00
Danila Poyarkov 0dd1014c2a fix(properties): simplify Effect styles and equivalent corners 2026-09-11 03:27:27 +03:00
Danila Poyarkov b6f015a9f6 fix: address Select forwarding and MCP readiness review 2026-09-10 23:54:03 +03:00
Danila Poyarkov d3b8942dcc test(properties): refresh verified panel snapshots 2026-09-10 22:29:45 +03:00
Danila Poyarkov 7f80296c3b fix(ui): preserve focus for composed icon triggers 2026-09-10 21:41:10 +03:00
Danila Poyarkov 3d74f52344 fix(properties): simplify style controls and anchor variable pickers 2026-09-10 19:49:37 +03:00
Danila Poyarkov 77739c42a4
fix(bindings): resolve modes and preserve edit transactions (#671)
* fix(bindings): capture mode edits and expose unresolved values

* fix(bindings): correct unresolved accessibility metadata

* fix(bindings): distinguish mixed identities from unresolved values
2026-09-10 12:14:04 +03:00
Danila Poyarkov e69ba75c12
refactor(ui): compose shared editor controls (#670)
* refactor(ui): extract shared action and navigation primitives

* refactor(ui): compose settings and libraries with shared tabs

* feat(ui): preserve native activation and toolbar keyboard navigation

* refactor(home): share document entries and accessible input controls

* fix(layers): share virtualized row geometry and selection styling

* refactor(layout): compose spacing and readable dimension controls

* refactor(properties): compose advanced strokes and inline effects

* refactor(ui): reuse actions in page and property controls

* refactor(settings): adopt shared actions without changing workflows

* refactor(ui): share collaboration and provider actions

* refactor(ui): finish shell and paint action composition

* test(ui): restore extracted control and settings coverage

* test(ui): complete workflow extraction coverage

* fix(ui): address review and trim redundant snapshots

* fix(layout): preserve single-step Undo for guides and wrap
2026-09-10 12:09:06 +03:00
Danila Poyarkov bb8c5c18d9
fix(editor): commit vector drags on pointer release (#586)
* fix(editor): commit vector drags on pointer release

- Commit vertex and Bézier handle edits immediately on release\n- Rebase active vector-edit state after graph commits\n- Use vector-specific input paths and cover Pen-created Bézier drags

* test: reduce visual snapshot scope

- Replace behavior screenshots with scene assertions\n- Capture renderer fixtures from bounded canvas regions\n- Remove obsolete full-viewport snapshots

* fix(vector): harden edit cancellation and endpoint remapping

- Restore temporary vector geometry on cancelled pointer drags\n- Commit Bézier handle releases consistently and guard stale handle state\n- Preserve valid endpoint indices when connecting vector vertices

* fix(vector): cancel bend drags and satisfy formatting

* fix(vector): guard stale handle references

* fix(vector): guard stale overlay handle indices

* fix(vector): validate overlay handle keys

* refactor(vector): use typed handle selection ids

* test(vector): align typed handle selection coverage
2026-08-24 16:02:27 +03:00
Danila Poyarkov 751195891f Release v0.14.0 2026-08-10 11:40:44 +03:00
Danila Poyarkov c9cadf6fdd fix(ui): expose auto-layout flow choices 2026-07-26 11:15:57 +03:00
Danila Poyarkov 80750e65fc fix(ui): align layout sections with Figma 2026-07-26 10:52:48 +03:00
Danila Poyarkov a23e58d785 fix(ui): prevent overlapping tooltips
- 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
2026-07-26 10:31:05 +03:00
Luca Candela 18899ff13c
feat(editor): add Figma-style frame presets (#418)
Add frame preset creation and resizing with constraint-aware layout, undo/redo, toolbar flyouts, localization, documentation, and regression coverage.
2026-07-26 00:05:57 +03:00
Danila Poyarkov a9c44afc20 refactor(properties): static section titles and headerless font-feature toggles
- 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
2026-07-20 22:11:45 +03:00
Danila Poyarkov e00ba55bc4 test(ui): update panel snapshots for the new control density and add ruler theme regression
- Update design/properties panel snapshots for the 24px control height and
  section header bands, and the appearance field test to expect 24px
- Add a light-theme regression test asserting the canvas ruler theme tracks
  the active theme tokens instead of staying on the dark fallback
2026-07-18 10:55:51 +03:00
Danila Poyarkov d7a27a894c fix(app): preserve compact paint field sizing
- Keep embedded number fields from crowding color values\n- Cover paint-row geometry in property-panel E2E tests\n- Refresh the reviewed typography panel snapshot for visible variable actions
2026-07-18 04:57:48 +03:00
Danila Poyarkov fc5cc2d4b8 fix(app): align variable-enabled panel fields
- 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
2026-07-18 04:35:52 +03:00
Danila Poyarkov 0bd5afe784 feat(editor): add paint blend mode controls
- Expose localized blend mode selects for fills and expanded effects

- Reuse PropertyList batching for shared-style detachment and mixed-selection undo

- Share Appearance, Fill, and Effects blend mode options

- Add focused E2E and panel visual coverage
2026-07-17 22:10:27 +03:00
Danila Poyarkov 23645d5a2d feat(editor): add component property controls
- Model typed component definitions, references, assignments, and preferred swap values

- Add SDK-owned variant, text, boolean, and nested instance-swap controls with mixed-selection undo

- Preserve assignments across variant changes and component synchronization

- Round-trip component property metadata through .fig import and export
2026-07-17 21:59:49 +03:00
Danila Poyarkov c96f87bf9b feat(editor): add shared style bindings
- 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
2026-07-17 20:28:22 +03:00
Danila Poyarkov 1d8ddd951a feat(editor): add corner smoothing control
- Expose mixed smoothing percentages through Appearance controls
- Preserve per-node corner preview values in one-step undo
- Cover CanvasKit profiles and .fig import/export with engine and visual tests
2026-07-17 19:28:34 +03:00
Danila Poyarkov 2f8d799a5f feat(editor): add stroke geometry controls
- 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
2026-07-17 19:01:42 +03:00
Danila Poyarkov d19c05f48e feat(editor): add resize constraints
- 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
2026-07-17 18:32:58 +03:00
Danila Poyarkov 27fdef2ea4 feat(app): finish Design panel migration
- 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
2026-07-14 17:40:56 +03:00
Danila Poyarkov 5371ed11b8 feat(app): migrate paint effect and export panels
- 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
2026-07-14 17:06:28 +03:00
Danila Poyarkov fcdf7f1d4c feat(app): migrate layout size controls
- 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
2026-07-13 15:34:25 +03:00
Danila Poyarkov 12031b76c9 feat(app): migrate position and appearance panels
- 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
2026-07-13 14:47:48 +03:00
Danila Poyarkov 1d60d3a407 feat(ui): add binding field skins
- 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
2026-07-13 14:04:13 +03:00
Danila Poyarkov 1b7934b98e feat(vue): add property panel primitives
- Add headless PropertySection and accessible SegmentedControl anatomy

- Make PropertyList controlled and exactly typed with an undo-aware editor adapter

- Consolidate SDK metadata loaders and link untranslated docs to canonical pages
2026-07-13 12:36:03 +03:00
Danila Poyarkov ffb12824eb feat(vue): add BindableValue primitives
- Add provider-driven binding state, picker composition, and edit policies

- Integrate NumberField interactions with binding transactions and cancellation

- Migrate numeric variable fields and document the public API
2026-07-13 11:02:54 +03:00
Danila Poyarkov 5d9730ae04 feat(vue): finalize NumberField API and docs
- Remove ScrubInput aliases, app wrappers, test hooks, and translated legacy references

- Share a Tailwind NumberField demo between Storybook and VitePress

- Generate component API tables from Vue metadata and type-check examples with Twoslash

- Upgrade the docs stack to VitePress 2
2026-07-13 10:19:24 +03:00
Danila Poyarkov e8092bd561 feat(vue): add headless NumberField primitive
- Add pointer scrubbing, keyboard stepping, mixed and bound state contracts

- Parse safe numeric expressions and preserve deprecated ScrubInput aliases

- Cover the primitive with Storybook, SDK docs, unit tests, and E2E tests
2026-07-10 22:26:51 +03:00
Danila Poyarkov abd795bd9a chore: format codebase 2026-05-24 12:15:29 +03:00
Danila Poyarkov e65d53c9d3 test(canvas): add visual blend and mask fixtures 2026-05-22 23:13:46 +03:00
Danila Poyarkov ad0b984057 test(canvas): cover smoothed corner visuals 2026-05-22 23:09:55 +03:00
Danila Poyarkov 680350cdcb test(e2e): extract shared editor setup and store helpers
- useEditorSetup() / useEditorSetupWithClear() in tests/e2e/fixtures.ts
- Migrated 15 simple specs to shared fixture
- Moved getSelectedNode/getSelectedNodes to tests/helpers/store.ts
- Replaced inline getSelectedNode in 4 specs
- Reverted 8 specs with custom beforeAll setup (not fixture-compatible)
- Test duplication in tests/: 329 → 307 clones (10.12% → 8.95%)
2026-05-16 16:55:34 +03:00
Danila Poyarkov 11e38b626a test(e2e): extract shared editor setup fixture
- useEditorSetup() / useEditorSetupWithClear() in tests/e2e/fixtures.ts
- Migrated 17 specs to shared fixture, removing ~300 lines of boilerplate
- Moved getSelectedNode/getSelectedNodes to shared store helpers
- Replaced inline getSelectedNode in 4 specs with shared import
- Test duplication: 329 → 308 clones (10.12% → 9.08%)
2026-05-16 16:19:03 +03:00
Danila Poyarkov 23583525f5 test(e2e): hide rulers in visual regression snapshots
- Add &no-rulers to all E2E test URLs that use &no-chrome
- Regenerate snapshots without ruler ticks/selection badges
- Remove stale snapshot dirs from old test paths
2026-05-16 15:36:37 +03:00
Danila Poyarkov 6b406002dd test(e2e): remove remaining raw test id strings 2026-05-15 13:02:41 +03:00
Danila Poyarkov 1583181d3a test(e2e): remove raw test id selectors 2026-05-15 12:55:01 +03:00
Danila Poyarkov 2f94ce6510 test(e2e): use Playwright test id locators 2026-05-15 12:49:49 +03:00
Danila Poyarkov bbf122a5c5 chore(tests): route store access through browser bridge
- Expose window.openPencil.getStore() instead of a direct store property
- Update E2E helpers and specs to use the bridge getter
- Add lint coverage preventing direct window.openPencil.store access
2026-05-06 12:19:39 +03:00
Danila Poyarkov 86cb3970ff chore(tests): guard component and cache assertions
- Remove non-null assertions from component, visibility, scene cache, and redo sequence tests
- Add explicit node, store, renderer, and canvas bounds guards
- Validate check plus affected engine and E2E coverage
2026-05-06 11:07:47 +03:00
Danila Poyarkov 8ec70330b4 chore(lint): centralize OpenPencil window API
- Route browser globals through src/app/window-api.ts instead of private __OPEN_PENCIL fields
- Move E2E tests to the public window.openPencil test API
- Add an oxlint rule banning direct window.__OPEN_PENCIL* access
2026-05-06 10:38:03 +03:00