@vanduo-oss/vd3-flowchart 1.5.0 → 1.5.1

package/dist/meta.json

@@ -1,7 +1,7 @@
 {
   "inputs": {
     "src/layout.js": {
-      "bytes": 7389,
+      "bytes": 12120,
       "imports": [],
       "format": "esm"
     },
@@ -11,7 +11,7 @@
       "format": "esm"
     },
     "src/core.js": {
-      "bytes": 207176,
+      "bytes": 213356,
       "imports": [
         {
           "path": "src/layout.js",
@@ -69,7 +69,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 379973
+      "bytes": 398554
     },
     "dist/index.js": {
       "imports": [
@@ -98,25 +98,25 @@
           "bytesInOutput": 4145
         },
         "src/layout.js": {
-          "bytesInOutput": 6422
+          "bytesInOutput": 11220
         },
         "src/mindmap.js": {
           "bytesInOutput": 4886
         },
         "src/core.js": {
-          "bytesInOutput": 197291
+          "bytesInOutput": 203072
         },
         "src/index.js": {
           "bytesInOutput": 0
         }
       },
-      "bytes": 213149
+      "bytes": 223728
     },
     "dist/index.cjs.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 380653
+      "bytes": 399234
     },
     "dist/index.cjs": {
       "imports": [
@@ -136,16 +136,16 @@
           "bytesInOutput": 4208
         },
         "src/layout.js": {
-          "bytesInOutput": 6422
+          "bytesInOutput": 11220
         },
         "src/mindmap.js": {
           "bytesInOutput": 4886
         },
         "src/core.js": {
-          "bytesInOutput": 197291
+          "bytesInOutput": 203072
         }
       },
-      "bytes": 214375
+      "bytes": 224954
     }
   }
 }

package/dist/vd3-flowchart.css

@@ -28,6 +28,27 @@
   --vd-flowchart-font: inherit;
 }
 
+/* Dark idle strokes lean on accent so nodes stay outlined without hover. Hosts
+   may still override --vd-flowchart-node-stroke for a stronger brand stroke. */
+[data-theme='dark'],
+:root:where([data-theme='dark']) {
+  --vd-flowchart-node-stroke: color-mix(
+    in srgb,
+    var(--vd-flowchart-accent) 48%,
+    var(--vd-border-color, #404040)
+  );
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --vd-flowchart-node-stroke: color-mix(
+      in srgb,
+      var(--vd-flowchart-accent) 48%,
+      var(--vd-border-color, #404040)
+    );
+  }
+}
+
 .vd-flowchart-host {
   /* A definite height (not just min-height) so the editor's internal grid can
      size its body row deterministically. Consumers that set a larger min-height
@@ -753,11 +774,14 @@
   box-sizing: border-box;
   min-width: 0;
   min-height: 0;
-  border: 1px solid color-mix(in srgb, var(--vd-flowchart-accent) 78%, var(--vd-flowchart-border));
+  /* Transparent chrome so the SVG silhouette (circle, diamond, …) stays
+     visible while typing. Opaque fills are restored for textbox/edge/label. */
+  border: 1px solid transparent;
   border-radius: 8px;
-  background: color-mix(in srgb, var(--vd-flowchart-panel) 92%, var(--vd-bg-primary, #fcfbf7));
+  background: transparent;
   color: var(--vd-flowchart-text);
-  box-shadow: 0 12px 26px color-mix(in srgb, var(--vd-flowchart-accent) 16%, transparent);
+  box-shadow: none;
+  caret-color: var(--vd-flowchart-accent);
   font: inherit;
   font-weight: 600;
   outline: none;
@@ -766,13 +790,27 @@
   text-align: center;
 }
 
+.vd-flowchart-text-editor--circle {
+  border-radius: 50%;
+}
+
+.vd-flowchart-text-editor--diamond {
+  border-radius: 0;
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+}
+
 .vd-flowchart-text-editor--textbox {
-  border-style: dashed;
+  border: 1px dashed color-mix(in srgb, var(--vd-flowchart-accent) 78%, var(--vd-flowchart-border));
+  background: color-mix(in srgb, var(--vd-flowchart-panel) 92%, var(--vd-bg-primary, #fcfbf7));
+  box-shadow: 0 12px 26px color-mix(in srgb, var(--vd-flowchart-accent) 16%, transparent);
   font-weight: 500;
   text-align: left;
 }
 
 .vd-flowchart-text-editor--edge {
+  border: 1px solid color-mix(in srgb, var(--vd-flowchart-accent) 78%, var(--vd-flowchart-border));
+  background: color-mix(in srgb, var(--vd-flowchart-panel) 92%, var(--vd-bg-primary, #fcfbf7));
+  box-shadow: 0 12px 26px color-mix(in srgb, var(--vd-flowchart-accent) 16%, transparent);
   font-weight: 500;
   white-space: nowrap;
 }
@@ -780,6 +818,7 @@
 .vd-flowchart-text-editor--label {
   border-color: transparent;
   background: color-mix(in srgb, var(--vd-flowchart-panel) 82%, transparent);
+  box-shadow: 0 12px 26px color-mix(in srgb, var(--vd-flowchart-accent) 16%, transparent);
   font-weight: 700;
 }
 
@@ -937,6 +976,13 @@
   outline-offset: -2px;
 }
 
+/* The canvas is often full-bleed. Hide the viewport ring once a node is
+   selected (Enter/Tab shape entry). An empty focused canvas still shows it. */
+.vd-flowchart-canvas:focus-visible:has(.is-selected),
+.vd-flowchart-canvas:focus:has(.is-selected) {
+  outline: none;
+}
+
 .vd-flowchart-sr-only {
   position: absolute;
   width: 1px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanduo-oss/vd3-flowchart",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Vanduo Vue 3 flowchart editor — nodes, edges, layout, undo/redo, and a framework-agnostic core",
   "type": "module",
   "license": "MIT",