@ai-digital-factory/state-flow 0.1.0 → 0.1.1

package/dist/state-flow.css

@@ -12,6 +12,9 @@
   --sf-warning: #fbbf24;
   --sf-warning-muted: #3d2f10;
   --sf-warning-ink: #fef3c7;
+  /* FinalState: distinct hue, paired with a visible "FINAL" kind tag. */
+  --sf-final: #38bdf8;
+  --sf-final-fill: #0f1d27;
 }
 
 .sf-root {
@@ -118,14 +121,14 @@
   margin: 0 0 20px;
 }
 
-.sf-chart-page-header {
+.sf-flow-page-header {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   margin-bottom: 1.25rem;
 }
 
-.sf-chart-page-header-icon {
+.sf-flow-page-header-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -138,15 +141,15 @@
   flex-shrink: 0;
 }
 
-.sf-chart-page-header-text {
+.sf-flow-page-header-text {
   min-width: 0;
 }
 
-.sf-chart-page-header .sf-title {
+.sf-flow-page-header .sf-title {
   margin: 0 0 0.35rem;
 }
 
-.sf-chart-page-header .sf-intro {
+.sf-flow-page-header .sf-intro {
   margin: 0;
 }
 
@@ -714,3 +717,65 @@
   width: 2.75rem;
   height: 1.1rem;
 }
+
+/* Branching transitions (ADR 0087): a shared stem, a split node, then one described branch per To. */
+.sf-flow-svg .flow-edge-branch {
+  stroke-dasharray: none;
+}
+
+.sf-flow-svg .overview-split-label .overview-edge-badge {
+  fill: var(--sf-selected);
+}
+
+/* Durable progress: the running transition, then the branch its execution recorded. */
+.sf-flow-svg .flow-edge.is-active-transition {
+  stroke: var(--sf-accent-strong);
+  stroke-width: 3.5;
+  stroke-dasharray: 6 4;
+  animation: sf-edge-running 0.9s linear infinite;
+}
+
+.sf-flow-svg .flow-edge.is-selected-destination {
+  stroke: var(--sf-accent-strong);
+  stroke-width: 4;
+  filter: drop-shadow(0 0 4px var(--sf-glow));
+}
+
+.sf-flow-svg .overview-edge-hit.is-active-transition .overview-edge-badge,
+.sf-flow-svg .overview-edge-hit.is-selected-destination .overview-edge-badge {
+  stroke: var(--sf-accent-strong);
+  stroke-width: 3;
+}
+
+@keyframes sf-edge-running {
+  to {
+    stroke-dashoffset: -20;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sf-flow-svg .flow-edge.is-active-transition {
+    animation: none;
+  }
+}
+
+.sf-overview-destination-list {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+  display: grid;
+  gap: 6px;
+}
+
+.sf-overview-destination-list .is-selected code {
+  color: var(--sf-accent-strong);
+}
+
+.sf-overview-destination-detail {
+  color: var(--sf-muted);
+}
+
+.sf-overview-detail-kind-tag.is-final {
+  color: var(--sf-final);
+  border-color: var(--sf-final);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-digital-factory/state-flow",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "React library for flow-style state (states, transitions, and related UI).",
   "main": "./dist/index.js",
@@ -13,7 +13,7 @@
     "./types": {
       "types": "./types/index.d.ts"
     },
-    "./tsconfig.charts.json": "./tsconfig.charts.json",
+    "./tsconfig.flows.json": "./tsconfig.flows.json",
     "./style.css": {
       "import": "./dist/state-flow.css",
       "default": "./dist/state-flow.css"
@@ -29,7 +29,7 @@
   "files": [
     "dist",
     "types",
-    "tsconfig.charts.json",
+    "tsconfig.flows.json",
     "README.md",
     "LICENSE"
   ],
@@ -37,7 +37,7 @@
     "react": "^19.0.0"
   },
   "dependencies": {
-    "@ai-digital-factory/state-flow-chart": "0.1.0"
+    "@ai-digital-factory/state-flow-definition": "0.1.1"
   },
   "devDependencies": {
     "@types/node": "^22",