@vanduo-oss/vd3-flowchart 1.2.0 → 1.3.0

package/dist/meta.json

@@ -6,7 +6,7 @@
       "format": "esm"
     },
     "src/core.js": {
-      "bytes": 127688,
+      "bytes": 139173,
       "imports": [
         {
           "path": "src/layout.js",
@@ -22,7 +22,7 @@
       "format": "esm"
     },
     "src/vue.js": {
-      "bytes": 3278,
+      "bytes": 3476,
       "imports": [
         {
           "path": "vue",
@@ -38,7 +38,7 @@
       "format": "esm"
     },
     "src/index.js": {
-      "bytes": 479,
+      "bytes": 509,
       "imports": [
         {
           "path": "src/vue.js",
@@ -59,7 +59,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 233948
+      "bytes": 253577
     },
     "dist/index.js": {
       "imports": [
@@ -70,6 +70,7 @@
         }
       ],
       "exports": [
+        "FLOWCHART_DOCUMENT_VERSION",
         "FLOWCHART_EDGE_MARKERS",
         "FLOWCHART_EDGE_ROUTES",
         "FLOWCHART_NODE_TYPES",
@@ -83,25 +84,25 @@
       "entryPoint": "src/index.js",
       "inputs": {
         "src/vue.js": {
-          "bytesInOutput": 2621
+          "bytesInOutput": 2817
         },
         "src/layout.js": {
           "bytesInOutput": 6422
         },
         "src/core.js": {
-          "bytesInOutput": 121438
+          "bytesInOutput": 132719
         },
         "src/index.js": {
           "bytesInOutput": 0
         }
       },
-      "bytes": 130805
+      "bytes": 142312
     },
     "dist/index.cjs.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 234554
+      "bytes": 254219
     },
     "dist/index.cjs": {
       "imports": [
@@ -115,19 +116,19 @@
       "entryPoint": "src/index.js",
       "inputs": {
         "src/index.js": {
-          "bytesInOutput": 502
+          "bytesInOutput": 566
         },
         "src/vue.js": {
-          "bytesInOutput": 2684
+          "bytesInOutput": 2880
         },
         "src/layout.js": {
           "bytesInOutput": 6422
         },
         "src/core.js": {
-          "bytesInOutput": 121438
+          "bytesInOutput": 132719
         }
       },
-      "bytes": 131961
+      "bytes": 143502
     }
   }
 }

package/dist/vd3-flowchart.css

@@ -44,7 +44,7 @@
 .vd-flowchart-shell {
   box-sizing: border-box;
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
   height: 100%;
   /* Fill the host only — a fixed min-height here overflowed short containers
      and clipped the bottom outline off-screen. */
@@ -352,8 +352,7 @@
 .vd-flowchart-field input:focus-visible,
 .vd-flowchart-field select:focus-visible,
 .vd-flowchart-field textarea:focus-visible,
-.vd-flowchart-json textarea:focus-visible,
-.vd-flowchart-canvas:focus-visible {
+.vd-flowchart-json textarea:focus-visible {
   outline: 2px solid color-mix(in srgb, var(--vd-flowchart-accent) 72%, transparent);
   outline-offset: 2px;
 }
@@ -727,3 +726,45 @@
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
+
+.vd-flowchart-outline {
+  max-height: 220px;
+  overflow: auto;
+  padding: 0.5rem 0.9rem;
+  border-top: 1px solid var(--vd-flowchart-border);
+  background: var(--vd-flowchart-panel);
+  font-size: 0.875rem;
+}
+
+.vd-flowchart-outline summary {
+  cursor: pointer;
+}
+
+.vd-flowchart-outline-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.vd-flowchart-host .vd-flowchart-outline select,
+.vd-flowchart-shell .vd-flowchart-outline select {
+  max-width: 16rem;
+  color: var(--vd-flowchart-text);
+  background: var(--vd-flowchart-surface);
+}
+
+.vd-flowchart-outline :focus-visible,
+.vd-flowchart-canvas:focus-visible {
+  outline: 2px solid var(--vd-flowchart-accent);
+  outline-offset: -2px;
+}
+
+.vd-flowchart-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanduo-oss/vd3-flowchart",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Vanduo Vue 3 flowchart editor — nodes, edges, layout, undo/redo, and a framework-agnostic core",
   "type": "module",
   "license": "MIT",
@@ -28,7 +28,10 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./css": "./dist/vd3-flowchart.css",
+    "./css": {
+      "types": "./styles.d.ts",
+      "default": "./dist/vd3-flowchart.css"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -36,7 +39,9 @@
     "README.md",
     "SKILL.md",
     "CHANGELOG.md",
-    "LICENSE"
+    "LICENSE",
+    "recipes",
+    "styles.d.ts"
   ],
   "keywords": [
     "vanduo",
@@ -73,12 +78,13 @@
     "build": "node scripts/build.js",
     "clean": "rm -rf dist",
     "lint": "eslint .",
-    "format": "prettier --write \"src/**/*.{js,ts}\" \"scripts/**/*.js\" \"tests/**/*.{js,ts}\"",
-    "format:check": "prettier --check \"src/**/*.{js,ts}\" \"scripts/**/*.js\" \"tests/**/*.{js,ts}\"",
+    "format": "prettier --write \"src/**/*.{js,ts}\" \"scripts/**/*.{js,mjs}\" \"tests/**/*.{js,ts}\"",
+    "format:check": "prettier --check \"src/**/*.{js,ts}\" \"scripts/**/*.{js,mjs}\" \"tests/**/*.{js,ts}\"",
     "stylelint": "stylelint \"src/**/*.css\"",
     "test": "vitest run",
     "test:types": "tsc --noEmit -p tests/types/tsconfig.json",
     "test:e2e": "playwright test",
-    "release": "pnpm run build && pnpm publish"
+    "release": "pnpm run build && pnpm publish",
+    "test:skills": "node scripts/check-skills.mjs"
   }
 }

package/recipes/editor.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VdFlowchart, type VdFlowchartDocument, type VdFlowchartExposed } from '@vanduo-oss/vd3-flowchart';
+import '@vanduo-oss/vd3-flowchart/css';
+const editor = ref<VdFlowchartExposed | null>(null);
+const readonly = ref(false);
+const document = ref<VdFlowchartDocument>({
+  nodes: [{ id: 'start', text: 'Start', x: 40, y: 100 }, { id: 'end', text: 'End', x: 300, y: 100 }],
+  edges: [{ id: 'next', from: { nodeId: 'start', port: 'right' }, to: { nodeId: 'end', port: 'left' } }],
+});
+</script>
+<template>
+  <button type="button" @click="readonly = !readonly">Toggle read-only</button>
+  <button type="button" :disabled="readonly" @click="editor?.undo()">Undo</button>
+  <VdFlowchart ref="editor" :data="document" :readonly="readonly" auto-fit
+    style="height: 560px" @change="document = $event.document" />
+</template>

package/styles.d.ts

@@ -0,0 +1,2 @@
+// TypeScript declaration for the side-effect stylesheet exports.
+export {};