45df90c5c7
* Switch to @open-pencil/yoga-layout with CSS Grid support Use our fork (open-pencil/yoga, grid branch) which cherry-picks the upstream CSS Grid PRs (#1893–#1898) onto current main. The JS bindings are ported from the old embind approach to the new wasm_bridge.c API. npm:@open-pencil/yoga-layout alias keeps all imports as 'yoga-layout'. Also handle FinalizationRegistry change (upstream #1908) — node.free() no longer exists, nodes are garbage collected automatically. * Add CSS Grid layout mode Scene graph: - LayoutMode gains 'GRID' option alongside HORIZONTAL/VERTICAL - GridTrack type (sizing: FIXED/FR/AUTO, value) for track definitions - GridPosition type (column, row, columnSpan, rowSpan) for children - New node props: gridTemplateColumns/Rows, gridColumnGap, gridRowGap, gridPosition Layout engine: - buildGridTree() sets Display.Grid and maps GridTrack[] to Yoga's setGridTemplateColumns/Rows API with FR/Points/Auto track types - Grid children use gridPosition for column/row placement with span - Flex layout path unchanged Store: - setLayoutMode('GRID') auto-creates NxM track grid based on child count (sqrt heuristic), defaults to 1fr tracks UI (LayoutSection.vue): - Grid button (grid-2x2 icon) added to flow direction row - Columns/Rows track editors: ScrubInput for value + AppSelect for sizing mode (Fill fr / Fixed px / Auto), add/remove buttons - Separate column gap and row gap ScrubInputs - Wrap button hidden when grid is active - Flex alignment grid hidden when grid is active Kiwi serialization skips GRID mode for now (no .fig codec support). * Add grid layout integration tests 12 new test scenarios covering: - Basic 2x2 grid, fixed columns, mixed fr/fixed, unequal fr weights - Column gap, row gap, both gaps combined - Padding offsets - Explicit gridPosition placement, column span, row span - Absolute children skipped - Hidden children collapsed - Nested grid inside flex parent (computeAllLayouts) Also fix: grid frames as children of flex parents now correctly use Display.Grid via configureChildAsGrid() instead of falling through to configureChildAsAutoLayout() which set FlexDirection. * Deduplicate grid yoga configuration Extract configureAsGrid() and createGridChildNode() shared by buildGridTree (root-level grid) and configureChildAsGrid (grid nested inside flex parent). * Add grid layout to changelog * Add grid support to JSX and Tailwind CSS export OpenPencil format: grid → columns/rows/columnGap/rowGap props, child colStart/rowStart/colSpan/rowSpan. Tailwind format: grid grid-cols-N grid-rows-N gap-x-* gap-y-*, mixed tracks use arbitrary values (grid-cols-[200px_1fr_auto]), child col-start-*/row-start-*/col-span-*/row-span-*. Both formats: padding emitted for grid frames (shared with flex), flex-only props (justify/items/wrap/gap) scoped to isFlex. * Remove duplicate gridTrackToTw, use shared formatTrack Also drop unused GridTrackSizing import from LayoutSection.vue. * Fix grid icon: use layout-grid instead of grid-2x2 unplugin-icons can't resolve icon names with digits after hyphens (grid-2x2 → grid2x2 which doesn't exist). * Polish layout UI and fix auto-layout behavior - Replace text labels with compact icons: ↔/↕ for gap, ☐ for uniform padding, T/R/B/L for per-side padding - Direction-aware gap icon: ↕ for vertical, ↔ for horizontal - Pin +/− padding toggle button right of gap input - Fix alignment grid axes for vertical layout (transpose primary/counter) - Fix grid switch: set FIXED sizing, compute frame size from children - Remove hardcoded white fill from Shift+A wrap - Auto-detect horizontal vs vertical from selection bounds * Add flex-to-grid switch integration test Verify HUG frame expands and children are placed in 2x2 grid when switching from vertical flex to grid layout. * Update changelog for grid layout
97 lines
3.1 KiB
JSON
97 lines
3.1 KiB
JSON
{
|
|
"name": "open-pencil-app",
|
|
"private": true,
|
|
"version": "0.8.0",
|
|
"license": "MIT",
|
|
"type": "module",
|
|
"workspaces": [
|
|
"packages/*"
|
|
],
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsgo --noEmit && vite build",
|
|
"preview": "vite preview",
|
|
"tauri": "tauri",
|
|
"lint": "oxlint -c oxlint.json src/",
|
|
"format": "oxfmt --write src/",
|
|
"typecheck": "tsgo --noEmit",
|
|
"check": "bun run lint && bun run typecheck",
|
|
"test": "playwright test --project=openpencil",
|
|
"test:update": "playwright test --project=openpencil --update-snapshots",
|
|
"test:figma": "playwright test --project=figma",
|
|
"figma:debug": "open -a Figma --args --remote-debugging-port=9222",
|
|
"test:unit": "bun test ./tests/engine",
|
|
"test:coverage": "bun test --coverage ./tests/engine",
|
|
"test:dupes": "jscpd packages/core/src packages/cli/src src --min-lines 5 --min-tokens 50 --format typescript",
|
|
"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:preview": "bun --filter @open-pencil/docs preview",
|
|
"visual-compare": "bun scripts/visual-compare.ts"
|
|
},
|
|
"dependencies": {
|
|
"@ai-sdk/openai": "^3.0.37",
|
|
"@ai-sdk/valibot": "^2.0.17",
|
|
"@ai-sdk/vue": "^3.0.105",
|
|
"@open-pencil/cli": "workspace:*",
|
|
"@open-pencil/core": "workspace:*",
|
|
"@openrouter/ai-sdk-provider": "^2.2.3",
|
|
"@tailwindcss/vite": "^4.2.1",
|
|
"@tanstack/vue-table": "^8.21.3",
|
|
"@tauri-apps/api": "^2",
|
|
"@tauri-apps/plugin-dialog": "^2.6.0",
|
|
"@tauri-apps/plugin-fs": "^2.4.5",
|
|
"@tauri-apps/plugin-opener": "^2",
|
|
"@unhead/vue": "^2.1.10",
|
|
"@vueuse/core": "^14.2.1",
|
|
"ai": "^6.0.105",
|
|
"canvaskit-wasm": "^0.40.0",
|
|
"culori": "^4.0.2",
|
|
"dedent": "^1.7.1",
|
|
"fflate": "^0.8.2",
|
|
"fzstd": "^0.1.1",
|
|
"lib0": "^0.2.117",
|
|
"motion-v": "^2.0.0",
|
|
"prismjs": "^1.30.0",
|
|
"reka-ui": "^2.9.0",
|
|
"tailwind-merge": "^3.5.0",
|
|
"tailwind-variants": "^3.2.2",
|
|
"tailwindcss": "^4.2.1",
|
|
"trystero": "^0.22.0",
|
|
"valibot": "^1.2.0",
|
|
"vue": "^3.5.29",
|
|
"vue-router": "^5.0.3",
|
|
"vue-stream-markdown": "^0.6.0",
|
|
"y-indexeddb": "^9.0.12",
|
|
"y-protocols": "^1.0.7",
|
|
"yjs": "^13.6.29",
|
|
"yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2"
|
|
},
|
|
"devDependencies": {
|
|
"@agentclientprotocol/sdk": "^0.14.1",
|
|
"@hono/node-server": "^1.19.11",
|
|
"@iconify-json/lucide": "^1.2.94",
|
|
"@modelcontextprotocol/sdk": "^1.27.1",
|
|
"@playwright/test": "^1.58.2",
|
|
"@tauri-apps/cli": "^2",
|
|
"@types/culori": "^4.0.1",
|
|
"@types/node": "^25.3.2",
|
|
"@types/prismjs": "^1.26.6",
|
|
"@types/ws": "^8.18.1",
|
|
"@typescript/native-preview": "^7.0.0-dev.20260228.1",
|
|
"@vitejs/plugin-vue": "^6.0.4",
|
|
"esbuild": "^0.27.3",
|
|
"hono": "^4.12.5",
|
|
"jscpd": "^4.0.8",
|
|
"oxfmt": "^0.35.0",
|
|
"oxlint": "^1.50.0",
|
|
"tw-animate-css": "^1.4.0",
|
|
"typescript": "~5.8.3",
|
|
"unplugin-icons": "^23.0.1",
|
|
"unplugin-vue-components": "^31.0.0",
|
|
"vite": "^7.0.4",
|
|
"vite-plugin-pwa": "^1.2.0",
|
|
"workbox-window": "^7.4.0",
|
|
"ws": "^8.19.0"
|
|
}
|
|
} |