@vanduo-oss/vd3-cbun 1.1.0 → 1.2.0

package/dist/draw/vd3-draw.css

@@ -0,0 +1,301 @@
+/* Draw tool styles — a local --vd-draw-* token layer over the global --vd-*
+   design tokens. Chrome (surface, grid, toolbar, panel, selection UI) reads
+   only the locals, so dark/light + palette changes flow through the cascade
+   with no JS. Marks carry an explicit, user-picked color and do not re-theme.
+   Override any local (no !important needed) to retheme. */
+:root {
+  --vd-draw-surface: var(--vd-bg-primary, #fcfbf7);
+  --vd-draw-panel: color-mix(in srgb, var(--vd-bg-secondary, #f4efe2) 88%, #ffffff);
+  --vd-draw-border: color-mix(in srgb, var(--vd-border-color, #d5ccba) 80%, #ffffff);
+  --vd-draw-accent: var(--vd-color-primary, #245f52);
+  --vd-draw-text: var(--vd-text-primary, #1f2720);
+  --vd-draw-muted: var(--vd-text-muted, #67746a);
+  --vd-draw-grid: color-mix(in srgb, var(--vd-border-color, #d5ccba) 55%, transparent);
+  /* Default ink for a fresh mark (theme-aware first stroke). */
+  --vd-draw-ink: var(--vd-text-primary, #1f2720);
+  --vd-draw-shape-stroke: var(--vd-color-primary, #245f52);
+  --vd-draw-sticky-fill: color-mix(in srgb, var(--vd-color-primary, #245f52) 12%, #fdf6d8);
+  --vd-draw-selection: var(--vd-color-primary, #245f52);
+  --vd-draw-handle-fill: var(--vd-bg-primary, #ffffff);
+  --vd-draw-guide: color-mix(in srgb, var(--vd-color-primary, #245f52) 60%, #d6336c);
+  /* SVG <text> does not inherit font-family reliably; set it explicitly. */
+  --vd-draw-font: inherit;
+}
+
+.vd-draw-host {
+  height: 560px;
+  font-family: var(--vd-draw-font);
+}
+
+.vd-draw-shell {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  height: 100%;
+  min-height: 380px;
+  border: 1px solid var(--vd-draw-border);
+  border-radius: 8px;
+  background: var(--vd-draw-surface);
+  color: var(--vd-draw-text);
+  overflow: hidden;
+}
+
+/* ── Toolbar ─────────────────────────────────────────────────────────── */
+.vd-draw-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  padding: 0.4rem 0.55rem;
+  border-bottom: 1px solid var(--vd-draw-border);
+  background: var(--vd-draw-panel);
+}
+
+.vd-draw-toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+}
+
+.vd-draw-tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.1rem;
+  height: 2.1rem;
+  padding: 0;
+  color: var(--vd-draw-text);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.vd-draw-tool:hover {
+  background: color-mix(in srgb, var(--vd-draw-accent) 12%, transparent);
+}
+
+.vd-draw-tool[aria-pressed='true'] {
+  background: color-mix(in srgb, var(--vd-draw-accent) 20%, transparent);
+  border-color: var(--vd-draw-accent);
+  color: var(--vd-draw-accent);
+}
+
+.vd-draw-tool:focus-visible {
+  outline: 2px solid var(--vd-draw-accent);
+  outline-offset: 1px;
+}
+
+/* Inline Phosphor icons — sized + a soft drop-shadow for visibility. */
+.vd-draw-icon {
+  width: 20px;
+  height: 20px;
+  display: block;
+  flex: none;
+  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.32));
+}
+
+/* ── Style panel (brushes, colors, sliders) ──────────────────────────── */
+.vd-draw-panel {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+  flex-wrap: wrap;
+  padding: 0.4rem 0.6rem;
+  border-bottom: 1px solid var(--vd-draw-border);
+  background: color-mix(in srgb, var(--vd-draw-panel) 60%, var(--vd-draw-surface));
+}
+
+.vd-draw-panel-group {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  flex-wrap: wrap;
+  padding-right: 0.6rem;
+  border-right: 1px solid color-mix(in srgb, var(--vd-draw-border) 60%, transparent);
+}
+
+.vd-draw-panel-group:last-child {
+  border-right: none;
+}
+
+.vd-draw-panel-label {
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--vd-draw-muted);
+  margin-right: 0.1rem;
+}
+
+.vd-draw-value {
+  min-width: 2.6em;
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--vd-draw-text);
+}
+
+.vd-draw-panel input[type='range'] {
+  width: 90px;
+  accent-color: var(--vd-draw-accent);
+  cursor: pointer;
+}
+
+.vd-draw-brush {
+  padding: 0.25rem 0.55rem;
+  font-size: 0.8rem;
+  line-height: 1.2;
+  color: var(--vd-draw-muted);
+  background: transparent;
+  border: 1px solid var(--vd-draw-border);
+  border-radius: 999px;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.vd-draw-brush:hover {
+  color: var(--vd-draw-text);
+}
+
+.vd-draw-brush[aria-pressed='true'] {
+  color: var(--vd-draw-accent);
+  border-color: var(--vd-draw-accent);
+  background: color-mix(in srgb, var(--vd-draw-accent) 12%, transparent);
+}
+
+.vd-draw-swatch {
+  width: 1.15rem;
+  height: 1.15rem;
+  padding: 0;
+  background: var(--sw, #000);
+  border: 1px solid color-mix(in srgb, var(--vd-draw-text) 22%, transparent);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.2);
+  transition: transform 0.12s ease;
+}
+
+.vd-draw-swatch:hover {
+  transform: scale(1.15);
+}
+
+.vd-draw-swatch[aria-pressed='true'] {
+  outline: 2px solid var(--vd-draw-accent);
+  outline-offset: 1px;
+}
+
+.vd-draw-color-input {
+  width: 1.6rem;
+  height: 1.4rem;
+  padding: 0;
+  background: none;
+  border: 1px solid var(--vd-draw-border);
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.vd-draw-recent {
+  display: inline-flex;
+  gap: 0.2rem;
+}
+
+/* ── Canvas ──────────────────────────────────────────────────────────── */
+.vd-draw-canvas {
+  position: relative;
+  overflow: hidden;
+  background: var(--vd-draw-surface);
+  touch-action: none;
+  user-select: none;
+  cursor: crosshair;
+}
+
+.vd-draw-canvas:focus {
+  outline: none;
+}
+
+.vd-draw-svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.vd-draw-grid-rect {
+  pointer-events: none;
+}
+
+/* Diagram shapes — outline in the current/themed stroke color. */
+.vd-draw-shape {
+  stroke: var(--vd-draw-shape-stroke);
+  fill: none;
+}
+
+/* Freehand brush strokes — filled outline in the mark's color (or themed ink). */
+.vd-draw-ink {
+  fill: var(--vd-draw-ink);
+  stroke: none;
+}
+
+.vd-draw-sticky {
+  fill: var(--vd-draw-sticky-fill);
+  stroke: color-mix(in srgb, var(--vd-draw-accent) 30%, var(--vd-draw-border));
+  stroke-width: 1;
+}
+
+.vd-draw-text {
+  fill: var(--vd-draw-text);
+  font-family: var(--vd-draw-font);
+  font-size: 16px;
+  dominant-baseline: hanging;
+}
+
+.vd-draw-selection-box {
+  stroke: var(--vd-draw-selection);
+  stroke-width: 1.5;
+  stroke-dasharray: 4 3;
+  pointer-events: none;
+}
+
+.vd-draw-handle {
+  fill: var(--vd-draw-handle-fill);
+  stroke: var(--vd-draw-selection);
+  stroke-width: 1.5;
+  cursor: nwse-resize;
+}
+
+.vd-draw-marquee-rect {
+  fill: color-mix(in srgb, var(--vd-draw-selection) 12%, transparent);
+  stroke: var(--vd-draw-selection);
+  stroke-width: 1;
+  stroke-dasharray: 3 2;
+  pointer-events: none;
+}
+
+.vd-draw-guide {
+  stroke: var(--vd-draw-guide);
+  stroke-width: 1;
+  pointer-events: none;
+}
+
+.vd-draw-text-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.vd-draw-text-editor {
+  position: absolute;
+  margin: 0;
+  padding: 2px 4px;
+  font-family: var(--vd-draw-font);
+  font-size: 16px;
+  color: var(--vd-draw-text);
+  background: var(--vd-draw-surface);
+  border: 1px solid var(--vd-draw-selection);
+  border-radius: 3px;
+  resize: none;
+  overflow: hidden;
+  pointer-events: auto;
+  box-sizing: border-box;
+}

package/dist/draw/vue.d.ts

@@ -0,0 +1,68 @@
+import type { DefineComponent } from 'vue';
+import type {
+  DrawDocument,
+  DrawTool,
+  DrawChangeEvent,
+  DrawSelectEvent,
+  DrawViewportEvent,
+  VdDraw as VdDrawCore,
+} from './core';
+
+/** Loosely-typed document accepted by the `data` prop. */
+export interface VdDrawDocument extends Partial<DrawDocument> {
+  shapes?: Array<Record<string, unknown>>;
+  [key: string]: unknown;
+}
+
+export interface VdDrawProps {
+  /** Drawing document ({ shapes, viewport }). */
+  data?: VdDrawDocument;
+  /** Render as a non-editable viewer. */
+  readonly?: boolean;
+  /** Active tool — updated live without recreating the editor. */
+  tool?: DrawTool;
+  /** Background grid size in px. */
+  gridSize?: number;
+  /** Show the background grid (default true). */
+  showGrid?: boolean;
+  /** Snap to nearby edges/centres while moving/resizing. */
+  snap?: boolean;
+  /** Fit the view to content once the editor reports a measurable size. */
+  autoFit?: boolean;
+  /** Enable the built-in undo/redo history (default true). */
+  history?: boolean;
+  /** Maximum number of history entries to retain. */
+  historyLimit?: number;
+}
+
+export interface VdDrawEmits {
+  (event: 'change', payload: DrawChangeEvent): void;
+  (event: 'select', payload: DrawSelectEvent): void;
+  (event: 'viewport', payload: DrawViewportEvent): void;
+  (event: 'ready', instance: VdDrawCore): void;
+}
+
+/** Methods exposed via a template ref. */
+export interface VdDrawExposed {
+  getInstance(): VdDrawCore | null;
+  setTool(tool: DrawTool): void;
+  undo(): void;
+  redo(): void;
+  canUndo(): boolean;
+  canRedo(): boolean;
+  toSVG(): string | undefined;
+  toPNG(options?: { scale?: number }): Promise<string> | undefined;
+}
+
+/* eslint-disable @typescript-eslint/no-empty-object-type -- DefineComponent filler params */
+export declare const VdDraw: DefineComponent<
+  VdDrawProps,
+  VdDrawExposed,
+  {},
+  {},
+  {},
+  {},
+  {},
+  VdDrawEmits
+>;
+/* eslint-enable @typescript-eslint/no-empty-object-type */

package/dist/index.d.ts

@@ -7,6 +7,8 @@
  */
 export declare const VD3_CBUN_VERSIONS: Readonly<{
   charts: string;
+  'code-editor': string;
+  draw: string;
   flowchart: string;
   'hex-grid': string;
   'music-player': string;

package/dist/index.js

@@ -2,6 +2,7 @@
 var VD3_CBUN_VERSIONS = Object.freeze({
   charts: "1.0.0",
   "code-editor": "1.0.0",
+  draw: "1.1.0",
   flowchart: "1.2.0",
   "hex-grid": "1.0.0",
   "music-player": "1.0.0"

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.js"],
-  "sourcesContent": ["// Root entry of @vanduo-oss/vd3-cbun.\n//\n// Exposes ONLY the per-component VERSION-constants map. Component APIs live on\n// the subpath exports (./charts, ./flowchart, ./hex-grid, ./music-player) so\n// importing one component never pulls in another (tree-shaking contract).\n//\n// The values below are hardcoded mirrors of component-versions.json (the\n// manifest is the source of truth). The version-consistency check \u2014\n// tests/smoke.spec.ts \u2014 asserts the two stay in sync; bump both together.\n// Note: `flowchart` continues the old-line 1.2.0 lineage because\n// VD_FLOWCHART_VERSION is serialized into user documents via toJSON().version.\n\nexport const VD3_CBUN_VERSIONS = Object.freeze({\n  charts: '1.0.0',\n  'code-editor': '1.0.0',\n  flowchart: '1.2.0',\n  'hex-grid': '1.0.0',\n  'music-player': '1.0.0',\n});\n"],
-  "mappings": ";AAYO,IAAM,oBAAoB,OAAO,OAAO;AAAA,EAC7C,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,gBAAgB;AAClB,CAAC;",
+  "sourcesContent": ["// Root entry of @vanduo-oss/vd3-cbun.\n//\n// Exposes ONLY the per-component VERSION-constants map. Component APIs live on\n// the subpath exports (./charts, ./flowchart, ./hex-grid, ./music-player) so\n// importing one component never pulls in another (tree-shaking contract).\n//\n// The values below are hardcoded mirrors of component-versions.json (the\n// manifest is the source of truth). The version-consistency check \u2014\n// tests/smoke.spec.ts \u2014 asserts the two stay in sync; bump both together.\n// Note: `flowchart` continues the old-line 1.2.0 lineage because\n// VD_FLOWCHART_VERSION is serialized into user documents via toJSON().version.\n\nexport const VD3_CBUN_VERSIONS = Object.freeze({\n  charts: '1.0.0',\n  'code-editor': '1.0.0',\n  draw: '1.1.0',\n  flowchart: '1.2.0',\n  'hex-grid': '1.0.0',\n  'music-player': '1.0.0',\n});\n"],
+  "mappings": ";AAYO,IAAM,oBAAoB,OAAO,OAAO;AAAA,EAC7C,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,MAAM;AAAA,EACN,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,gBAAgB;AAClB,CAAC;",
   "names": []
 }

package/dist/meta.json

@@ -1,7 +1,7 @@
 {
   "inputs": {
     "src/index.js": {
-      "bytes": 817,
+      "bytes": 834,
       "imports": [],
       "format": "esm"
     },
@@ -250,6 +250,59 @@
       ],
       "format": "esm"
     },
+    "src/draw/shapes.js": {
+      "bytes": 18178,
+      "imports": [],
+      "format": "esm"
+    },
+    "src/draw/core.js": {
+      "bytes": 68381,
+      "imports": [
+        {
+          "path": "src/draw/shapes.js",
+          "kind": "import-statement",
+          "original": "./shapes.js"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/draw/vue.js": {
+      "bytes": 3709,
+      "imports": [
+        {
+          "path": "vue",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "src/draw/core.js",
+          "kind": "import-statement",
+          "original": "./core.js"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/draw/index.js": {
+      "bytes": 378,
+      "imports": [
+        {
+          "path": "src/draw/vue.js",
+          "kind": "import-statement",
+          "original": "./vue.js"
+        },
+        {
+          "path": "src/draw/core.js",
+          "kind": "import-statement",
+          "original": "./core.js"
+        },
+        {
+          "path": "src/draw/shapes.js",
+          "kind": "import-statement",
+          "original": "./shapes.js"
+        }
+      ],
+      "format": "esm"
+    },
     "src/flowchart/layout.js": {
       "bytes": 7394,
       "imports": [],
@@ -399,7 +452,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 1071
+      "bytes": 1104
     },
     "dist/index.js": {
       "imports": [],
@@ -409,10 +462,10 @@
       "entryPoint": "src/index.js",
       "inputs": {
         "src/index.js": {
-          "bytesInOutput": 160
+          "bytesInOutput": 177
         }
       },
-      "bytes": 242
+      "bytes": 259
     },
     "dist/charts/index.js.map": {
       "imports": [],
@@ -636,6 +689,77 @@
       },
       "bytes": 38859
     },
+    "dist/draw/index.js.map": {
+      "imports": [],
+      "exports": [],
+      "inputs": {},
+      "bytes": 157160
+    },
+    "dist/draw/index.js": {
+      "imports": [
+        {
+          "path": "vue",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "exports": [
+        "BRUSH_PRESETS",
+        "DRAW_SHAPE_TYPES",
+        "DRAW_TOOLS",
+        "VD_DRAW_VERSION",
+        "VdDraw",
+        "VdDrawCore"
+      ],
+      "entryPoint": "src/draw/index.js",
+      "inputs": {
+        "src/draw/vue.js": {
+          "bytesInOutput": 3146
+        },
+        "src/draw/shapes.js": {
+          "bytesInOutput": 13933
+        },
+        "src/draw/core.js": {
+          "bytesInOutput": 66037
+        },
+        "src/draw/index.js": {
+          "bytesInOutput": 0
+        }
+      },
+      "bytes": 83359
+    },
+    "dist/draw/index.cjs.map": {
+      "imports": [],
+      "exports": [],
+      "inputs": {},
+      "bytes": 157643
+    },
+    "dist/draw/index.cjs": {
+      "imports": [
+        {
+          "path": "vue",
+          "kind": "require-call",
+          "external": true
+        }
+      ],
+      "exports": [],
+      "entryPoint": "src/draw/index.js",
+      "inputs": {
+        "src/draw/index.js": {
+          "bytesInOutput": 308
+        },
+        "src/draw/vue.js": {
+          "bytesInOutput": 3241
+        },
+        "src/draw/shapes.js": {
+          "bytesInOutput": 13933
+        },
+        "src/draw/core.js": {
+          "bytesInOutput": 66037
+        }
+      },
+      "bytes": 84459
+    },
     "dist/flowchart/index.js.map": {
       "imports": [],
       "exports": [],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vanduo-oss/vd3-cbun",
-  "version": "1.1.0",
-  "description": "Vanduo UI components bundle for Vue 3 — charts, code-editor, flowchart, hex-grid, music-player (the vd3 line)",
+  "version": "1.2.0",
+  "description": "Vanduo UI components bundle for Vue 3 — charts, code-editor, draw, flowchart, hex-grid, music-player (the vd3 line)",
   "type": "module",
   "license": "MIT",
   "author": "vanduo-oss",
@@ -36,6 +36,12 @@
       "require": "./dist/code-editor/index.cjs"
     },
     "./code-editor/css": "./dist/code-editor/vd3-code-editor.css",
+    "./draw": {
+      "types": "./dist/draw/index.d.ts",
+      "import": "./dist/draw/index.js",
+      "require": "./dist/draw/index.cjs"
+    },
+    "./draw/css": "./dist/draw/vd3-draw.css",
     "./flowchart": {
       "types": "./dist/flowchart/index.d.ts",
       "import": "./dist/flowchart/index.js",
@@ -73,6 +79,7 @@
     "components",
     "charts",
     "code-editor",
+    "draw",
     "flowchart",
     "hex-grid",
     "music-player"