SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity
openpencil/package.json
Danila Poyarkov 759f9eb611
feat: show controls in a prebuilt demo and fix what saving it to .fig lost (#938) 
* feat: show controls in the demo and tidy the component panels

The demo gains a Controls page: a switch, checkbox, slider, tabs, text
field, and a button with interaction states, written as Reka-named design
JSX, and a settings card of their instances to try in preview.

Go to main component and Detach instance move into the instance's panel
header as icon buttons. The Behaviour section's "Still needed" line is a
status rather than a button that only moved focus, and the rows it names
are marked instead.

The DOM projection writes flex-start for auto layout's start alignment:
CSS stretches children by default, so a hugging button in a column filled
its card in preview and HTML export. The paint page snapshot catches up
with the frame names #930 draws.

* perf: open the demo as a prebuilt .fig instead of generating it

/demo built every page in the browser and laid them all out in one task,
which froze the page for about six seconds. The demo's content moves to
tools/generate/demo, which builds public/demo.fig headlessly, before Vite
serves or bundles the app and only when its inputs changed; /demo opens
that file like any other, off the main thread and behind the loader. The
document is now lint-clean: small captions are 12 px, and the badge and
disabled button text meet contrast.

Opening the demo from .fig showed three bugs in saving and reading files,
fixed here:
- A layer's blend mode was never written, so Multiply and Screen reopened
  as pass-through.
- Underlines drawn from saved glyphs ran to the text box edge; glyphs now
  keep their advance, read from and written to .fig, and the underline
  ends where the text does.
- A frame laid out on its own because of a saved hug size ignored the
  width its parent stretched it to, so centred content moved to the start.

* feat(design-jsx): write Reka elements in TSX

The Reka element names were only part of the JSX string grammar, so code
that builds trees in TypeScript had to assemble strings by hand, unchecked.
@open-pencil/design-jsx now exports each Reka namespace as typed element
functions (Switch.Root, Slider.Thumb, Tabs.Trigger, …), derived from the
same table the string renderer reads, with props typed as the behaviour
props a root binds. The demo's controls are TSX built with them.

* fix(canvas): draw a component set's editing border at the live zoom

A component set without a stroke got its dashed border in the scene, sized
by dividing by the zoom. The scene is cached as retained pictures and
scaled while navigating, so the border was recorded at one zoom and grew
into thick dashes when zooming in, until the page was redrawn. It is
editor chrome, so it now comes from the overlay pass, which draws every
frame at the live zoom, as slot outlines do. The label cache tracks every
component set on the page for it, and image export no longer includes the
border.

* test: fit the P3 paint page to the canvas size it is captured at

The P3 test zoomed to the paint page while the wide-gamut notice still
took space, then dismissed it, so the first capture fit a shorter canvas
than the second and the two only matched by timing. focusPaintEffects
waits for the canvas to take a window resize, the test focuses again after
the notice goes, and the snapshot shows the demo as it now opens.

* refactor(canvas): fill sections and sets through one helper

Without its own fallback border, a component set fills and strokes its rounded bounds the way a section does; fillRoundedBounds fills them for both.

* test: check the demo controls on their own page and type pixel reads

The demo test built and round-tripped the whole four-page document to
check the controls, which took six seconds on CI and timed out; it now
builds the Controls page alone through the same measured-text setup the
build uses. The underline test reads CanvasKit pixels as any number array,
since readPixels may return floats.

* fix(canvas): measure long text extents without spreading glyphs

Spreading every glyph into Math.min/max overflows the argument limit on long texts.

* fix(demo): keep a tab touched while the demo loads and report a failed load

A file opened or a layer drawn during the fetch keeps the tab; a failed fetch shows the open-file error instead of an unhandled rejection.

* test: check a component set border stays one pixel wide when zoomed
2026-10-07 18:37:05 +00:00

274 lines
13 KiB
JSON
Raw Blame History

{
"name": "open-pencil-app",
"version": "0.15.1",
"private": true,
"license": "MIT",
"workspaces": [
"packages/scene-graph",
"packages/pen",
"packages/kiwi",
"packages/fig",
"packages/core",
"packages/dom-css",
"packages/design-jsx",
"packages/emit",
"packages/vue",
"packages/cli",
"packages/mcp",
"packages/harness",
"packages/docs",
"tools",
"tools/checks/architecture",
"tools/checks/docs",
"tools/checks/i18n",
"tools/checks/lint",
"tools/checks/package-quality",
"tools/checks/secret-scan",
"tools/checks/test-homes",
"tools/checks/type-shapes",
"tools/ci/images",
"tools/ci/policy",
"tools/ci/pr-review-guidance",
"tools/dev/dev-server",
"tools/dev/navigation-benchmark",
"tools/dev/unit-tests",
"tools/generate/authoring-reference",
"tools/generate/brand",
"tools/generate/demo",
"tools/generate/tauri-menu",
"tools/generate/visual-oracles",
"tools/release/package-artifacts",
"tools/release/release-packages"
],
"type": "module",
"scripts": {
"dev": "vite",
"dev:portless": "portless run vite",
"build": "bun run build:packages && bun run lint && vite build",
"preview": "vite preview",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"tauri": "tauri",
"build:native-test": "bun run generate:icons --target desktop && bun run build:packages && bun tauri build --debug --no-bundle --features native-test --config desktop/tauri.native-test.conf.json",
"benchmark:navigation": "bun tools/dev/navigation-benchmark/src/cli.ts run",
"test:native": "bun run build:native-test && wdio run wdio.conf.ts",
"lint": "bun run lint:structure && oxlint -c oxlint.json --type-aware --type-check src/ packages/scene-graph/src/ packages/core/src/ packages/vue/src/ packages/cli/src/ packages/mcp/src/ packages/harness/src/ packages/dom-css/src/ packages/pen/src/ packages/design-jsx/src/ packages/emit/src/ packages/kiwi/src/ packages/fig/src/",
"lint:structure": "oxlint -c oxlint.json commitlint.config.ts vite.config.ts vite/ .storybook/ src/ packages/scene-graph/src/ packages/scene-graph/scripts/ packages/core/src/ packages/vue/src/ packages/cli/src/ packages/mcp/src/ packages/harness/src/ packages/harness/tests/ packages/dom-css/src/ packages/dom-css/tests/ packages/dom-css/scripts/ packages/pen/src/ packages/pen/scripts/ packages/design-jsx/src/ packages/design-jsx/tests/ packages/design-jsx/scripts/ packages/emit/src/ packages/emit/tests/ packages/emit/scripts/ packages/kiwi/src/ packages/kiwi/tests/ packages/kiwi/scripts/ packages/fig/src/ packages/fig/tests/ packages/fig/scripts/ packages/core/tests/ packages/cli/tests/ packages/scene-graph/tests/ packages/vue/tests/ tests/ scripts/ tools/",
"format": "oxfmt --write .oxfmtrc.json commitlint.config.ts vite.config.ts vite/ .storybook/ src/ packages/scene-graph/src/ packages/scene-graph/scripts/ packages/core/src/ packages/cli/src/ packages/mcp/src/ packages/harness/src/ packages/harness/tests/ packages/vue/src/ packages/dom-css/src/ packages/dom-css/tests/ packages/dom-css/scripts/ packages/pen/src/ packages/pen/scripts/ packages/design-jsx/src/ packages/design-jsx/tests/ packages/design-jsx/scripts/ packages/emit/src/ packages/emit/tests/ packages/emit/scripts/ packages/kiwi/src/ packages/kiwi/tests/ packages/kiwi/scripts/ packages/fig/src/ packages/fig/tests/ packages/fig/scripts/ tests scripts/ tools/",
"format:check": "bun run format && status=$(git status --porcelain -uall) && test -z \"$status\" || (echo \"$status\" && exit 1)",
"check": "bun run check:icons && bun run build:packages && bun run lint && tsgo --noEmit && bun run check:vue && bun run check:native-test && bun run check:i18n && bun run check:docs && bun run check:changelog && bun run check:packages && bun run check:deps && bun run check:audit && bun run check:secrets && bun run check:monorepo && bun run check:arch && bun run check:test-homes && bun run check:test-types && bun run test:type-shapes && bun run check:tools && bun run test:tools && bun run test:dupes",
"check:commits": "commitlint",
"check:changelog": "bun tools/release/release-packages/src/check-changelog.ts",
"check:deps": "knip --include unlisted,unresolved,binaries",
"check:docs": "bun --filter @open-pencil/docs check && bun run check:authoring-reference",
"check:authoring-reference": "bun tools/generate/authoring-reference/src/check.ts",
"generate:authoring-reference": "bun tools/generate/authoring-reference/src/generate.ts",
"check:audit": "bun audit --audit-level=critical",
"check:secrets": "bun tools/checks/secret-scan/src/index.ts",
"check:monorepo": "sherif --ignore-rule root-package-dependencies",
"check:native-test": "tsc --noEmit -p tests/e2e/native/tsconfig.json",
"check:i18n": "bun tools/checks/i18n/src/check-locales.ts",
"check:packages": "bun tools/checks/package-quality/src/cli.ts check",
"check:arch": "steiger .",
"check:test-homes": "bun tools/checks/test-homes/src/index.ts",
"check:test-types": "bun tools/checks/test-types/src/index.ts",
"check:vue": "vue-tsc --noEmit -p tsconfig.json && vue-tsc --noEmit -p packages/vue/tsconfig.json",
"test": "OPENPENCIL_TEST_SERVER=app playwright test --project=openpencil --grep-invert @real-llm",
"test:storybook": "OPENPENCIL_TEST_SERVER=storybook playwright test --project=storybook-chromium",
"test:real-llm": "OPENPENCIL_TEST_SERVER=app playwright test --project=openpencil --grep @real-llm",
"test:update": "OPENPENCIL_TEST_SERVER=app playwright test --project=openpencil --update-snapshots",
"test:figma": "OPENPENCIL_TEST_SERVER=app playwright test --project=figma",
"figma:debug": "open -a Figma --args --remote-debugging-port=9222",
"typecheck": "tsgo --noEmit && bun run check:vue",
"test:unit": "bun tools/dev/unit-tests/src/run.ts all --include-heavy",
"test:unit:quick": "bun tools/dev/unit-tests/src/run.ts all -- --parallel",
"test:unit:isolated": "bun tools/dev/unit-tests/src/run.ts all -- --isolate",
"test:unit:heavy": "bun tools/dev/unit-tests/src/run.ts all --heavy-only -- --timeout 180000",
"test:coverage": "bun tools/dev/unit-tests/src/run.ts all --include-heavy -- --coverage",
"test:type-shapes": "bun tools/checks/type-shapes/src/index.ts",
"test:tools": "bun --filter '@open-pencil/*-tools' test && bun --filter @open-pencil/harness test",
"test:dupes": "jscpd packages/scene-graph/src packages/pen/src packages/design-jsx/src packages/emit/src packages/core/src packages/cli/src packages/dom-css/src packages/fig/src src --min-lines 5 --min-tokens 50 --format typescript --threshold 0",
"test:packages": "bun tools/checks/package-quality/src/cli.ts verify",
"build:packages": "bun tools/release/package-artifacts/src/build.ts",
"open-pencil": "bun packages/cli/src/index.ts",
"docs:dev": "bun --filter @open-pencil/docs dev",
"docs:build": "bun --filter @open-pencil/docs build",
"docs:build:production": "bun --filter @open-pencil/docs build:production",
"docs:preview": "bun --filter @open-pencil/docs preview",
"generate:demo": "bun tools/generate/demo/src/cli.ts --force",
"generate:icons": "bun tools/generate/brand/src/cli.ts generate",
"check:icons": "bun tools/generate/brand/src/cli.ts check",
"generate:tauri-menu": "bun tools/generate/tauri-menu/src/generate.ts",
"check:tools": "tsgo --noEmit -p tools/tsconfig.json"
},
"dependencies": {
"@ai-sdk/anthropic": "^4.0.71",
"@ai-sdk/deepseek": "^3.0.58",
"@ai-sdk/google": "^4.0.87",
"@ai-sdk/openai": "^4.0.83",
"@ai-sdk/valibot": "^3.0.53",
"@ai-sdk/vue": "^4.0.127",
"@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.2.0",
"@chenglou/pretext": "^0.0.7",
"@codemirror/autocomplete": "^6.20.3",
"@codemirror/commands": "^6.11.1",
"@codemirror/lang-css": "^6.3.1",
"@codemirror/lang-html": "^6.4.12",
"@codemirror/lang-javascript": "^6.2.5",
"@codemirror/lang-json": "^6.0.2",
"@codemirror/language": "^6.12.4",
"@codemirror/lint": "^6.9.7",
"@codemirror/merge": "^6.12.2",
"@codemirror/search": "^6.7.2",
"@codemirror/state": "^6.7.6",
"@codemirror/view": "^6.43.9",
"@lezer/highlight": "^1.2.3",
"@nanostores/i18n": "^1.3.3",
"@nanostores/vue": "^1.1.0",
"@open-pencil/cli": "workspace:*",
"@open-pencil/core": "workspace:*",
"@open-pencil/design-jsx": "workspace:*",
"@open-pencil/dom-css": "workspace:*",
"@open-pencil/fig": "workspace:*",
"@open-pencil/harness": "workspace:*",
"@open-pencil/kiwi": "workspace:*",
"@open-pencil/pen": "workspace:*",
"@open-pencil/scene-graph": "workspace:*",
"@open-pencil/vue": "workspace:*",
"@openrouter/ai-sdk-provider": "^3.1.0",
"@stream-markdown/code": "2.0.0-beta.5",
"@tailwindcss/vite": "^4.3.3",
"@tauri-apps/api": "^2.12.1",
"@tauri-apps/plugin-clipboard-manager": "^2.4.1",
"@tauri-apps/plugin-dialog": "^2.8.1",
"@tauri-apps/plugin-fs": "^2.6.0",
"@tauri-apps/plugin-opener": "^2.7.0",
"@tauri-apps/plugin-os": "^2.3.2",
"@tauri-apps/plugin-process": "^2.3.1",
"@tauri-apps/plugin-shell": "^2.4.0",
"@tauri-apps/plugin-updater": "^2.13.1",
"@unhead/vue": "^2.1.17",
"@valibot/to-json-schema": "^1.8.0",
"@vueuse/core": "^14.4.0",
"@xmldom/xmldom": "^0.9.12",
"ai": "^7.0.127",
"aws4fetch": "^1.0.20",
"canvaskit-wasm": "^0.41.1",
"copy-to-clipboard": "^4.0.2",
"culori": "^4.0.2",
"dedent": "^1.7.2",
"diff": "^8.0.4",
"es-toolkit": "^1.52.0",
"fflate": "^0.8.3",
"fuse.js": "^7.5.0",
"fzstd": "^0.1.1",
"hast-util-to-html": "^9.0.5",
"idb": "^8.0.3",
"js-base64": "^3.9.3",
"jspdf": "^4.2.1",
"lib0": "^0.2.117",
"motion-v": "^2.5.2",
"nanostores": "^1.5.4",
"opentype.js": "^2.0.0",
"partial-json": "^0.1.7",
"reka-ui": "^2.10.5",
"svg2pdf.js": "^2.8.1",
"tailwind-merge": "^3.7.0",
"tailwind-variants": "^3.3.1",
"tailwindcss": "^4.3.3",
"tinykeys": "^3.1.0",
"trystero": "^0.22.0",
"valibot": "^1.5.0",
"vee-validate": "5.0.0-beta.0",
"vue": "^3.5.43",
"vue-router": "^5.3.1",
"vue-stream-markdown": "2.0.0-beta.5",
"y-indexeddb": "^9.0.12",
"y-protocols": "^1.0.7",
"yjs": "^13.6.32",
"yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.3",
"zod": "^4.6.5"
},
"devDependencies": {
"@agentclientprotocol/sdk": "^0.14.1",
"@arethetypeswrong/cli": "0.18.4",
"@commitlint/cli": "^21.2.3",
"@commitlint/config-conventional": "^21.2.3",
"@commitlint/is-ignored": "^21.2.3",
"@commitlint/types": "^21.2.3",
"@feature-sliced/steiger-plugin": "^0.5.8",
"@figma/plugin-typings": "^1.140.0",
"@hono/node-server": "^1.19.17",
"@iconify-json/lucide": "^1.2.139",
"@lobehub/icons-static-svg": "^1.95.1",
"@modelcontextprotocol/client": "^2.0.0",
"@open-pencil/brand-tools": "workspace:*",
"@open-pencil/demo-tools": "workspace:*",
"@open-pencil/mcp": "workspace:*",
"@oxlint/plugins": "1.57.0",
"@playwright/test": "^1.63.0",
"@storybook/addon-a11y": "^10.6.1",
"@storybook/addon-docs": "^10.6.1",
"@storybook/addon-themes": "^10.6.1",
"@storybook/vue3-vite": "^10.6.1",
"@tauri-apps/cli": "2.12.1",
"@types/bun": "^1.3.14",
"@types/culori": "^4.0.1",
"@types/node": "^25.9.9",
"@types/opentype.js": "^1.3.10",
"@types/ws": "^8.18.1",
"@typescript-eslint/utils": "^8.71.0",
"@typescript/native-preview": "^7.0.0-dev.20260707.2",
"@vitejs/plugin-vue": "^6.0.9",
"@vue/compiler-core": "^3.5.43",
"@wdio/cli": "9.30.1",
"@wdio/globals": "9.29.1",
"@wdio/local-runner": "9.30.1",
"@wdio/mocha-framework": "9.30.1",
"@wdio/spec-reporter": "9.30.1",
"@wdio/tauri-service": "1.3.0",
"changelog-parser": "^4.1.0",
"cloudflare-redirect-parser": "^1.0.0",
"esbuild": "^0.27.7",
"eslint-plugin-compat": "^7.0.2",
"expect-webdriverio": "5.7.0",
"fake-indexeddb": "^6.2.5",
"franc": "^6.2.0",
"hono": "^4.13.13",
"jscpd": "^4.3.0",
"knip": "6.20.0",
"mdast": "^3.0.0",
"mdast-util-from-markdown": "^2.0.3",
"mitata": "^1.0.34",
"oxfmt": "^0.67.0",
"oxlint": "1.57.0",
"oxlint-tsgolint": "^0.16.0",
"portless": "0.15.5",
"publint": "0.3.20",
"sherif": "1.12.0",
"steiger": "^0.5.13",
"storybook": "^10.6.1",
"tsdown": "^0.22.14",
"tw-animate-css": "^1.4.0",
"typescript": "~5.8.3",
"unist-util-visit": "^5.1.0",
"unplugin-icons": "^23.0.1",
"unplugin-raw": "^0.7.0",
"unplugin-vue": "^7.2.0",
"unplugin-vue-components": "^31.1.0",
"vite": "8.1.4",
"vite-plugin-pwa": "^1.3.0",
"vue-tsc": "3.3.11",
"webmcp-types": "^0.1.10",
"workbox-window": "^7.4.1",
"ws": "^8.21.3"
},
"overrides": {
"@codemirror/view": "6.43.9",
"protobufjs": "7.5.5",
"websocket-driver": "0.7.5"
},
"packageManager": "bun@1.4.2"
}
Reference in a new issue View git blame Copy permalink