openpencil/packages/vue/ARCHITECTURE.md
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

1.5 KiB

@open-pencil/vue architecture

Folder conventions

  • Canvas/, ColorPicker/, FillPicker/, FontPicker/, GradientEditor/, LayerTree/, PageList/, PropertyList/, NumberField/, Toolbar/ — component families and colocated helpers for structural/headless primitives
  • controls/ — editor control composables used by app property panels (useAppearance, useLayout, usePosition, useTypography, useFillControls, useStrokeControls, useEffectsControls, useExport, useNodeProps, usePropScrub)
  • VariablesEditor/ — variables domain composables and table wiring
  • selection/ — selection-focused composables (useSelectionState, useSelectionCapabilities)
  • context/ — dependency injection helpers (editorContext, createContext)
  • internal/ — cross-cutting internals not intended as primary public primitives (useSceneComputed, toolCursor)
  • shared/ — remaining cross-domain helpers that are still generic and not yet better served by a domain folder

Naming conventions

  • Composable filenames match export names: useFillControls.ts, useVariablesEditor.ts
  • Structural primitives follow Reka-style anatomy naming: XxxRoot, XxxItem, XxxTrigger
  • Prefer composables over thin root wrappers when there is no meaningful structural UI coordination

Public API guidance

  • Export stable, intentional entry points from src/index.ts
  • Prefer composables for property-panel/editor logic
  • Prefer component families for true headless UI primitives with internal coordination