@digilogiclabs/saas-factory-ui 1.28.1 → 1.29.1

package/dist/index.d.mts

@@ -5257,15 +5257,28 @@ interface FlowTreeProps {
     hideControls?: boolean;
     /** Hide the breadcrumb legend at the bottom-left. */
     hideLegend?: boolean;
+    /**
+     * When > 0, cycles the focused path through the root's direct children
+     * every N milliseconds until the user interacts with the tree (clicks a
+     * card, pans, zooms, toggles a detail, or clicks a legend chip). Honors
+     * `prefers-reduced-motion` (disabled if reduced motion is requested).
+     * Default: 0 (disabled).
+     */
+    autoCycleMs?: number;
+    /**
+     * Explicit paths to cycle through when `autoCycleMs` is set. If omitted,
+     * the tree auto-cycles through the root's direct children.
+     */
+    autoCyclePaths?: string[][];
 }
-declare function FlowTree({ data, title, eyebrow, tagline, renderIcon: renderIconProp, tierColors: tierColorsProp, resolveHref: resolveHrefProp, layoutOptions, onNodeOpen, defaultFocusedPath, focusedPath: controlledPath, onFocusedPathChange, className, style, hideHeader, hideControls, hideLegend, }: FlowTreeProps): react_jsx_runtime.JSX.Element;
+declare function FlowTree({ data, title, eyebrow, tagline, renderIcon: renderIconProp, tierColors: tierColorsProp, resolveHref: resolveHrefProp, layoutOptions, onNodeOpen, defaultFocusedPath, focusedPath: controlledPath, onFocusedPathChange, className, style, hideHeader, hideControls, hideLegend, autoCycleMs, autoCyclePaths, }: FlowTreeProps): react_jsx_runtime.JSX.Element;
 
 /**
  * FlowTree CSS — injected once per page at runtime on the first mount.
  * Self-themed via `--ft-*` CSS variables, all with sensible fallbacks so the
  * component works standalone in any light or dark design system.
  */
-declare const FLOW_TREE_CSS = "\n.ft-shell {\n  --ft-bg: var(--ft-bg, oklch(0.185 0.008 80));\n  --ft-fg: var(--ft-fg, oklch(0.96 0.005 85));\n  --ft-muted-fg: var(--ft-muted-fg, oklch(0.68 0.008 80));\n  --ft-dim-fg: var(--ft-dim-fg, oklch(0.5 0.008 80));\n  --ft-line: var(--ft-line, oklch(0.28 0.008 80));\n  --ft-line-strong: var(--ft-line-strong, oklch(0.4 0.008 80));\n  --ft-grid-strong: var(--ft-grid-strong, oklch(0.24 0.008 80));\n  --ft-card-bg: var(--ft-card-bg, oklch(0.21 0.008 80));\n  --ft-card-active-bg: var(--ft-card-active-bg, oklch(0.25 0.015 60));\n  --ft-card-hover-bg: var(--ft-card-hover-bg, oklch(0.23 0.01 80 / 0.6));\n  --ft-rail-bg: var(--ft-rail-bg, oklch(0.19 0.008 80));\n  --ft-icon-bg: var(--ft-icon-bg, oklch(0.17 0.008 80));\n  --ft-detail-bg: var(--ft-detail-bg, oklch(0.16 0.008 80));\n  --ft-header-bg: var(--ft-header-bg, linear-gradient(180deg, oklch(0.21 0.01 60) 0%, oklch(0.19 0.008 70) 100%));\n  --ft-tier-orange: var(--ft-tier-orange, #f16c25);\n  --ft-tier-teal: var(--ft-tier-teal, #5fb7b8);\n  --ft-tier-blue: var(--ft-tier-blue, oklch(0.72 0.12 240));\n  --ft-tier-amber: var(--ft-tier-amber, oklch(0.8 0.14 75));\n  --ft-tier-green: var(--ft-tier-green, oklch(0.74 0.14 155));\n  --ft-accent: var(--ft-accent, var(--ft-tier-orange));\n  --ft-serif: var(--ft-serif, \"Instrument Serif\", Georgia, serif);\n  --ft-sans: var(--ft-sans, \"Inter\", system-ui, sans-serif);\n  --ft-mono: var(--ft-mono, \"JetBrains Mono\", ui-monospace, Menlo, monospace);\n\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  background: var(--ft-bg);\n  border: 1px solid var(--ft-line);\n  border-radius: 2px;\n  overflow: hidden;\n  color: var(--ft-fg);\n  font-family: var(--ft-sans);\n  font-size: 14px;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n  box-shadow: 0 30px 60px -30px oklch(0 0 0 / 0.5);\n}\n.ft-shell * { box-sizing: border-box; }\n.ft-shell .ft-mono {\n  font-family: var(--ft-mono);\n  font-size: 11px;\n  letter-spacing: 0.02em;\n}\n\n.ft-header {\n  padding: 22px 28px 20px;\n  border-bottom: 1px solid var(--ft-line);\n  background: var(--ft-header-bg);\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.ft-header__eyebrow {\n  font-family: var(--ft-mono);\n  font-size: 10.5px;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: var(--ft-accent);\n}\n.ft-header__title {\n  margin: 0;\n  font-family: var(--ft-serif);\n  font-weight: 400;\n  font-size: 44px;\n  line-height: 1;\n  letter-spacing: -0.015em;\n  color: var(--ft-fg);\n}\n.ft-header__tagline {\n  margin: 6px 0 0;\n  max-width: 76ch;\n  color: var(--ft-muted-fg);\n  font-size: 13px;\n}\n\n.ft-stage {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.ft-svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  cursor: grab;\n  touch-action: none;\n  user-select: none;\n}\n.ft-svg.is-dragging { cursor: grabbing; }\n\n.ft-controls {\n  position: absolute;\n  top: 14px;\n  right: 14px;\n  z-index: 5;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: oklch(0.2 0.008 80 / 0.94);\n  border: 1px solid var(--ft-line-strong);\n  padding: 5px 8px;\n  backdrop-filter: blur(8px);\n  border-radius: 2px;\n}\n.ft-controls button {\n  font-family: var(--ft-mono);\n  font-size: 12px;\n  width: 26px;\n  height: 26px;\n  background: transparent;\n  border: 1px solid var(--ft-line);\n  color: var(--ft-fg);\n  cursor: pointer;\n  padding: 0;\n}\n.ft-controls button:hover { border-color: var(--ft-accent); }\n.ft-controls__reset {\n  width: auto !important;\n  padding: 0 10px !important;\n  font-size: 9.5px !important;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n.ft-controls__hint {\n  font-family: var(--ft-mono);\n  font-size: 9.5px;\n  color: var(--ft-muted-fg);\n  letter-spacing: 0.04em;\n  padding-left: 8px;\n  margin-left: 2px;\n  border-left: 1px solid var(--ft-line);\n}\n\n.ft-legend {\n  position: absolute;\n  left: 18px;\n  bottom: 14px;\n  z-index: 5;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n  font-family: var(--ft-mono);\n  font-size: 10px;\n  color: var(--ft-muted-fg);\n  background: oklch(0.2 0.008 80 / 0.88);\n  border: 1px solid var(--ft-line);\n  padding: 6px 10px;\n  backdrop-filter: blur(6px);\n  max-width: calc(100% - 220px);\n}\n.ft-legend__chip { display: inline-flex; align-items: center; gap: 6px; }\n.ft-legend__dot {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background: var(--ft-accent);\n}\n.ft-legend__sep { color: var(--ft-line-strong); margin: 0 2px; }\n\n.ft-edge { fill: none; transition: stroke 260ms, opacity 260ms; }\n.ft-edge--off {\n  stroke: var(--ft-line);\n  stroke-width: 1;\n  opacity: 0.55;\n}\n.ft-edge--on {\n  stroke: var(--ft-accent);\n  stroke-width: 1.6;\n  stroke-dasharray: 4 5;\n  opacity: 1;\n  animation: ftDashFlow 1.4s linear infinite;\n}\n@keyframes ftDashFlow { to { stroke-dashoffset: -36; } }\n\n.ft-card {\n  --tier-local: var(--tier, var(--ft-line-strong));\n  width: 100%;\n  height: 100%;\n  display: grid;\n  grid-template-columns: 1fr auto;\n  align-items: stretch;\n  background: var(--ft-card-bg);\n  border: 1px solid var(--ft-line);\n  border-left: 3px solid var(--tier-local);\n  border-radius: 2px;\n  transition:\n    background 260ms cubic-bezier(.2,.8,.2,1),\n    border-color 260ms, box-shadow 260ms,\n    transform 260ms cubic-bezier(.2,.8,.2,1),\n    filter 260ms, opacity 260ms, color 260ms;\n  overflow: visible;\n  animation: ftCardIn 320ms cubic-bezier(.2,.8,.2,1) backwards;\n}\n@keyframes ftCardIn {\n  from { opacity: 0; transform: translateX(-6px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n.ft-card__main {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  gap: 10px;\n  align-items: center;\n  padding: 0 10px 0 12px;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: var(--ft-sans);\n  font-size: 13px;\n  text-align: left;\n  cursor: pointer;\n  min-width: 0;\n}\n.ft-card__main:hover { background: var(--ft-card-hover-bg); }\n.ft-card__icon {\n  width: 24px;\n  height: 24px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--tier-local);\n  border: 1px solid var(--ft-line-strong);\n  background: var(--ft-icon-bg);\n  flex-shrink: 0;\n}\n.ft-card__body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }\n.ft-card__label {\n  font-family: var(--ft-serif);\n  font-size: 15px;\n  line-height: 1.15;\n  color: var(--ft-fg);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.ft-card__sub {\n  font-family: var(--ft-mono);\n  font-size: 9.5px;\n  letter-spacing: 0.02em;\n  color: var(--ft-muted-fg);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ft-card__lock { color: var(--ft-muted-fg); display: inline-flex; }\n.ft-card__caret {\n  width: 18px;\n  height: 18px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--ft-mono);\n  font-size: 12px;\n  color: var(--ft-muted-fg);\n  border: 1px solid var(--ft-line);\n}\n.ft-card--active .ft-card__caret {\n  color: var(--tier-local);\n  border-color: var(--tier-local);\n}\n\n.ft-card__rail {\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--ft-line);\n  background: var(--ft-rail-bg);\n}\n.ft-card__mini {\n  flex: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  min-height: 20px;\n  background: transparent;\n  border: none;\n  color: var(--ft-muted-fg);\n  cursor: pointer;\n  transition: background 150ms, color 150ms;\n  border-bottom: 1px solid var(--ft-line);\n  padding: 0;\n  text-decoration: none;\n}\n.ft-card__mini:last-child { border-bottom: none; }\n.ft-card__mini:hover {\n  background: oklch(0.23 0.01 80);\n  color: var(--tier-local);\n}\n.ft-card__mini.is-on {\n  color: var(--tier-local);\n  background: oklch(0.23 0.01 80);\n}\n\n.ft-card--active {\n  background: var(--ft-card-active-bg);\n  box-shadow: 0 0 0 1px var(--tier-local), 0 14px 34px -16px oklch(0.5 0.18 50 / 0.55);\n  transform: scale(1.02);\n}\n.ft-card--dim {\n  filter: grayscale(0.85) brightness(0.82);\n  opacity: 0.7;\n  transform: scale(0.88);\n  transform-origin: center left;\n}\n.ft-card--dim .ft-card__label { color: var(--ft-dim-fg); }\n.ft-card--dim:hover {\n  filter: grayscale(0.3) brightness(0.96);\n  opacity: 1;\n  transform: scale(0.94);\n}\n.ft-card--cta {\n  border-left-color: var(--ft-accent);\n  background: linear-gradient(180deg, oklch(0.23 0.02 55) 0%, oklch(0.2 0.015 60) 100%);\n}\n.ft-card--root {\n  border-left-color: var(--ft-accent);\n  background: oklch(0.26 0.015 55);\n}\n.ft-card--root .ft-card__icon {\n  color: var(--ft-accent);\n  border-color: var(--ft-accent);\n}\n\n.ft-detail {\n  position: relative;\n  margin-top: 0;\n  padding: 16px 18px 14px;\n  background: var(--ft-detail-bg);\n  border: 1px solid var(--ft-line-strong);\n  border-left: 2px solid var(--ft-accent);\n  border-radius: 3px;\n  animation: ftDetailIn 220ms cubic-bezier(.2,.8,.2,1) backwards;\n  color: var(--ft-fg);\n  width: 320px;\n  box-shadow: 0 18px 40px -8px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);\n}\n.ft-detail__head {\n  display: flex;\n  align-items: center;\n  margin: -2px 28px 10px 0;\n}\n.ft-detail__title {\n  font-family: var(--ft-mono);\n  font-size: 10px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--ft-muted-fg);\n}\n.ft-detail__close {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  width: 22px;\n  height: 22px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: 1px solid var(--ft-line);\n  border-radius: 2px;\n  color: var(--ft-muted-fg);\n  cursor: pointer;\n  padding: 0;\n  transition: color 120ms, border-color 120ms, background 120ms;\n}\n.ft-detail__close:hover {\n  color: var(--ft-fg);\n  border-color: var(--ft-line-strong);\n  background: oklch(0.22 0.008 80);\n}\n@keyframes ftDetailIn {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n.ft-detail__lead {\n  font-family: var(--ft-serif);\n  font-size: 15px;\n  line-height: 1.35;\n  font-style: italic;\n  padding-left: 10px;\n  border-left: 2px solid var(--ft-accent);\n  margin-bottom: 10px;\n}\n.ft-detail__body {\n  margin: 0 0 10px;\n  font-size: 12px;\n  color: var(--ft-muted-fg);\n  line-height: 1.5;\n}\n.ft-detail__bullets {\n  margin: 0 0 10px;\n  padding-left: 16px;\n  font-size: 12px;\n  color: var(--ft-fg);\n}\n.ft-detail__bullets li { margin-bottom: 3px; }\n.ft-detail__meta {\n  margin: 0 0 10px;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.ft-detail__meta-row {\n  display: grid;\n  grid-template-columns: 96px 1fr;\n  gap: 8px;\n  font-size: 11px;\n}\n.ft-detail__meta-row dt {\n  font-family: var(--ft-mono);\n  font-size: 9.5px;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--ft-muted-fg);\n  padding-top: 1px;\n}\n.ft-detail__meta-row dd { margin: 0; color: var(--ft-fg); }\n.ft-detail__actions {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n  margin-top: 8px;\n}\n\n.ft-btn {\n  font-family: var(--ft-mono);\n  font-size: 10px;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  padding: 7px 10px;\n  background: transparent;\n  color: var(--ft-fg);\n  border: 1px solid var(--ft-line-strong);\n  text-decoration: none;\n  cursor: pointer;\n  display: inline-flex;\n  gap: 5px;\n  align-items: center;\n  transition: border-color 150ms, background 150ms;\n}\n.ft-btn:hover { border-color: var(--ft-accent); }\n.ft-btn--primary {\n  background: var(--ft-accent);\n  color: oklch(0.18 0.01 50);\n  border-color: var(--ft-accent);\n}\n\n@media (max-width: 760px) {\n  .ft-header { padding: 16px 18px 14px; }\n  .ft-header__title { font-size: 32px; }\n  .ft-controls__hint { display: none; }\n  .ft-legend { max-width: calc(100% - 24px); left: 10px; bottom: 10px; }\n}\n";
+declare const FLOW_TREE_CSS = "\n.ft-shell {\n  --ft-bg: var(--ft-bg, oklch(0.185 0.008 80));\n  --ft-fg: var(--ft-fg, oklch(0.96 0.005 85));\n  --ft-muted-fg: var(--ft-muted-fg, oklch(0.68 0.008 80));\n  --ft-dim-fg: var(--ft-dim-fg, oklch(0.5 0.008 80));\n  --ft-line: var(--ft-line, oklch(0.28 0.008 80));\n  --ft-line-strong: var(--ft-line-strong, oklch(0.4 0.008 80));\n  --ft-grid-strong: var(--ft-grid-strong, oklch(0.24 0.008 80));\n  --ft-card-bg: var(--ft-card-bg, oklch(0.21 0.008 80));\n  --ft-card-active-bg: var(--ft-card-active-bg, oklch(0.25 0.015 60));\n  --ft-card-hover-bg: var(--ft-card-hover-bg, oklch(0.23 0.01 80 / 0.6));\n  --ft-rail-bg: var(--ft-rail-bg, oklch(0.19 0.008 80));\n  --ft-icon-bg: var(--ft-icon-bg, oklch(0.17 0.008 80));\n  --ft-detail-bg: var(--ft-detail-bg, oklch(0.16 0.008 80));\n  --ft-header-bg: var(--ft-header-bg, linear-gradient(180deg, oklch(0.21 0.01 60) 0%, oklch(0.19 0.008 70) 100%));\n  --ft-tier-orange: var(--ft-tier-orange, #f16c25);\n  --ft-tier-teal: var(--ft-tier-teal, #5fb7b8);\n  --ft-tier-blue: var(--ft-tier-blue, oklch(0.72 0.12 240));\n  --ft-tier-amber: var(--ft-tier-amber, oklch(0.8 0.14 75));\n  --ft-tier-green: var(--ft-tier-green, oklch(0.74 0.14 155));\n  --ft-accent: var(--ft-accent, var(--ft-tier-orange));\n  --ft-serif: var(--ft-serif, \"Instrument Serif\", Georgia, serif);\n  --ft-sans: var(--ft-sans, \"Inter\", system-ui, sans-serif);\n  --ft-mono: var(--ft-mono, \"JetBrains Mono\", ui-monospace, Menlo, monospace);\n\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 420px;\n  background: var(--ft-bg);\n  border: 1px solid var(--ft-line);\n  border-radius: 2px;\n  overflow: hidden;\n  color: var(--ft-fg);\n  font-family: var(--ft-sans);\n  font-size: 14px;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n  box-shadow: 0 30px 60px -30px oklch(0 0 0 / 0.5);\n}\n.ft-shell * { box-sizing: border-box; }\n.ft-shell .ft-mono {\n  font-family: var(--ft-mono);\n  font-size: 11px;\n  letter-spacing: 0.02em;\n}\n\n.ft-header {\n  padding: 22px 28px 20px;\n  border-bottom: 1px solid var(--ft-line);\n  background: var(--ft-header-bg);\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.ft-header__eyebrow {\n  font-family: var(--ft-mono);\n  font-size: 10.5px;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: var(--ft-accent);\n}\n.ft-header__title {\n  margin: 0;\n  font-family: var(--ft-serif);\n  font-weight: 400;\n  font-size: 44px;\n  line-height: 1;\n  letter-spacing: -0.015em;\n  color: var(--ft-fg);\n}\n.ft-header__tagline {\n  margin: 6px 0 0;\n  max-width: 76ch;\n  color: var(--ft-muted-fg);\n  font-size: 13px;\n}\n\n.ft-stage {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  background:\n    radial-gradient(1000px 600px at 15% -10%, oklch(0.22 0.012 60 / 0.7), transparent 60%),\n    radial-gradient(800px 500px at 110% 110%, oklch(0.2 0.02 200 / 0.35), transparent 65%);\n}\n\n.ft-svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  cursor: grab;\n  touch-action: none;\n  user-select: none;\n}\n.ft-svg.is-dragging { cursor: grabbing; }\n\n.ft-controls {\n  position: absolute;\n  top: 14px;\n  right: 14px;\n  z-index: 5;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: oklch(0.2 0.008 80 / 0.94);\n  border: 1px solid var(--ft-line-strong);\n  padding: 5px 8px;\n  backdrop-filter: blur(8px);\n  border-radius: 2px;\n}\n.ft-controls button {\n  font-family: var(--ft-mono);\n  font-size: 12px;\n  width: 26px;\n  height: 26px;\n  background: transparent;\n  border: 1px solid var(--ft-line);\n  color: var(--ft-fg);\n  cursor: pointer;\n  padding: 0;\n}\n.ft-controls button:hover { border-color: var(--ft-accent); }\n.ft-controls__reset {\n  width: auto !important;\n  padding: 0 10px !important;\n  font-size: 9.5px !important;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n.ft-controls__hint {\n  font-family: var(--ft-mono);\n  font-size: 9.5px;\n  color: var(--ft-muted-fg);\n  letter-spacing: 0.04em;\n  padding-left: 8px;\n  margin-left: 2px;\n  border-left: 1px solid var(--ft-line);\n}\n\n.ft-legend {\n  position: absolute;\n  left: 18px;\n  bottom: 14px;\n  z-index: 5;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n  font-family: var(--ft-mono);\n  font-size: 10px;\n  color: var(--ft-muted-fg);\n  background: oklch(0.2 0.008 80 / 0.88);\n  border: 1px solid var(--ft-line);\n  padding: 6px 10px;\n  backdrop-filter: blur(6px);\n  max-width: calc(100% - 220px);\n}\n.ft-legend__chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 6px;\n  margin: -2px 0;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  cursor: pointer;\n  border-radius: 2px;\n  transition: background 120ms, color 120ms;\n}\n.ft-legend__chip:hover {\n  background: oklch(0.24 0.01 80);\n  color: var(--ft-fg);\n}\n.ft-legend__chip:disabled {\n  cursor: default;\n  color: var(--ft-fg);\n}\n.ft-legend__chip:disabled:hover { background: transparent; }\n.ft-legend__dot {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background: var(--ft-accent);\n  flex-shrink: 0;\n}\n.ft-legend__sep {\n  color: var(--ft-line-strong);\n  margin: 0 2px;\n  pointer-events: none;\n  user-select: none;\n}\n\n.ft-edge {\n  fill: none;\n  /* Critical: keep strokes the same screen size regardless of the tree's\n     scale transform. Without this, fit-to-viewport (z \u2248 0.6-0.9) makes\n     the edges sub-pixel wide and they visually disappear. */\n  vector-effect: non-scaling-stroke;\n  transition: stroke 260ms, opacity 260ms, stroke-width 260ms;\n}\n.ft-edge--off {\n  /* Use the accent color at low opacity instead of the dim line color \u2014\n     the accent (orange by default) reads far better on a dark stage. */\n  stroke: var(--ft-accent);\n  stroke-width: 1.5;\n  stroke-dasharray: 3 5;\n  opacity: 0.35;\n}\n.ft-edge--on {\n  stroke: var(--ft-accent);\n  stroke-width: 2.2;\n  stroke-dasharray: 6 5;\n  opacity: 1;\n  filter: drop-shadow(0 0 6px var(--ft-accent));\n  animation: ftDashFlow 1.4s linear infinite;\n}\n@keyframes ftDashFlow { to { stroke-dashoffset: -44; } }\n@media (prefers-reduced-motion: reduce) {\n  .ft-edge--on { animation: none; }\n}\n\n.ft-card {\n  --tier-local: var(--tier, var(--ft-line-strong));\n  width: 100%;\n  height: 100%;\n  display: grid;\n  grid-template-columns: 1fr auto;\n  align-items: stretch;\n  background: var(--ft-card-bg);\n  border: 1px solid var(--ft-line);\n  border-left: 3px solid var(--tier-local);\n  border-radius: 2px;\n  transition:\n    background 260ms cubic-bezier(.2,.8,.2,1),\n    border-color 260ms, box-shadow 260ms,\n    transform 260ms cubic-bezier(.2,.8,.2,1),\n    filter 260ms, opacity 260ms, color 260ms;\n  overflow: visible;\n  animation: ftCardIn 320ms cubic-bezier(.2,.8,.2,1) backwards;\n}\n@keyframes ftCardIn {\n  from { opacity: 0; transform: translateX(-6px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n.ft-card__main {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  gap: 10px;\n  align-items: center;\n  padding: 0 10px 0 12px;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: var(--ft-sans);\n  font-size: 13px;\n  text-align: left;\n  cursor: pointer;\n  min-width: 0;\n}\n.ft-card__main:hover { background: var(--ft-card-hover-bg); }\n.ft-card__icon {\n  width: 24px;\n  height: 24px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--tier-local);\n  border: 1px solid var(--ft-line-strong);\n  background: var(--ft-icon-bg);\n  flex-shrink: 0;\n}\n.ft-card__body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }\n.ft-card__label {\n  font-family: var(--ft-serif);\n  font-size: 15px;\n  line-height: 1.15;\n  color: var(--ft-fg);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.ft-card__sub {\n  font-family: var(--ft-mono);\n  font-size: 9.5px;\n  letter-spacing: 0.02em;\n  color: var(--ft-muted-fg);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ft-card__lock { color: var(--ft-muted-fg); display: inline-flex; }\n.ft-card__caret {\n  width: 18px;\n  height: 18px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--ft-mono);\n  font-size: 12px;\n  color: var(--ft-muted-fg);\n  border: 1px solid var(--ft-line);\n}\n.ft-card--active .ft-card__caret {\n  color: var(--tier-local);\n  border-color: var(--tier-local);\n}\n\n.ft-card__rail {\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--ft-line);\n  background: var(--ft-rail-bg);\n}\n.ft-card__mini {\n  flex: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  min-height: 20px;\n  background: transparent;\n  border: none;\n  color: var(--ft-muted-fg);\n  cursor: pointer;\n  transition: background 150ms, color 150ms;\n  border-bottom: 1px solid var(--ft-line);\n  padding: 0;\n  text-decoration: none;\n}\n.ft-card__mini:last-child { border-bottom: none; }\n.ft-card__mini:hover {\n  background: oklch(0.23 0.01 80);\n  color: var(--tier-local);\n}\n.ft-card__mini.is-on {\n  color: var(--tier-local);\n  background: oklch(0.23 0.01 80);\n}\n\n.ft-card--active {\n  background: var(--ft-card-active-bg);\n  box-shadow: 0 0 0 1px var(--tier-local), 0 14px 34px -16px oklch(0.5 0.18 50 / 0.55);\n  transform: scale(1.02);\n}\n.ft-card--dim {\n  filter: grayscale(0.85) brightness(0.82);\n  opacity: 0.7;\n  transform: scale(0.88);\n  transform-origin: center left;\n}\n.ft-card--dim .ft-card__label { color: var(--ft-dim-fg); }\n.ft-card--dim:hover {\n  filter: grayscale(0.3) brightness(0.96);\n  opacity: 1;\n  transform: scale(0.94);\n}\n.ft-card--cta {\n  border-left-color: var(--ft-accent);\n  background: linear-gradient(180deg, oklch(0.23 0.02 55) 0%, oklch(0.2 0.015 60) 100%);\n}\n.ft-card--root {\n  border-left-color: var(--ft-accent);\n  background: oklch(0.26 0.015 55);\n}\n.ft-card--root .ft-card__icon {\n  color: var(--ft-accent);\n  border-color: var(--ft-accent);\n}\n\n.ft-detail {\n  position: relative;\n  margin-top: 0;\n  padding: 16px 18px 14px;\n  background: var(--ft-detail-bg);\n  border: 1px solid var(--ft-line-strong);\n  border-left: 2px solid var(--ft-accent);\n  border-radius: 3px;\n  animation: ftDetailIn 220ms cubic-bezier(.2,.8,.2,1) backwards;\n  color: var(--ft-fg);\n  width: 320px;\n  box-shadow: 0 18px 40px -8px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);\n}\n.ft-detail__head {\n  display: flex;\n  align-items: center;\n  margin: -2px 28px 10px 0;\n}\n.ft-detail__title {\n  font-family: var(--ft-mono);\n  font-size: 10px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--ft-muted-fg);\n}\n.ft-detail__close {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  width: 22px;\n  height: 22px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: 1px solid var(--ft-line);\n  border-radius: 2px;\n  color: var(--ft-muted-fg);\n  cursor: pointer;\n  padding: 0;\n  transition: color 120ms, border-color 120ms, background 120ms;\n}\n.ft-detail__close:hover {\n  color: var(--ft-fg);\n  border-color: var(--ft-line-strong);\n  background: oklch(0.22 0.008 80);\n}\n@keyframes ftDetailIn {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n.ft-detail__lead {\n  font-family: var(--ft-serif);\n  font-size: 15px;\n  line-height: 1.35;\n  font-style: italic;\n  padding-left: 10px;\n  border-left: 2px solid var(--ft-accent);\n  margin-bottom: 10px;\n}\n.ft-detail__body {\n  margin: 0 0 10px;\n  font-size: 12px;\n  color: var(--ft-muted-fg);\n  line-height: 1.5;\n}\n.ft-detail__bullets {\n  margin: 0 0 10px;\n  padding-left: 16px;\n  font-size: 12px;\n  color: var(--ft-fg);\n}\n.ft-detail__bullets li { margin-bottom: 3px; }\n.ft-detail__meta {\n  margin: 0 0 10px;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.ft-detail__meta-row {\n  display: grid;\n  grid-template-columns: 96px 1fr;\n  gap: 8px;\n  font-size: 11px;\n}\n.ft-detail__meta-row dt {\n  font-family: var(--ft-mono);\n  font-size: 9.5px;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--ft-muted-fg);\n  padding-top: 1px;\n}\n.ft-detail__meta-row dd { margin: 0; color: var(--ft-fg); }\n.ft-detail__actions {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n  margin-top: 8px;\n}\n\n.ft-btn {\n  font-family: var(--ft-mono);\n  font-size: 10px;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  padding: 7px 10px;\n  background: transparent;\n  color: var(--ft-fg);\n  border: 1px solid var(--ft-line-strong);\n  text-decoration: none;\n  cursor: pointer;\n  display: inline-flex;\n  gap: 5px;\n  align-items: center;\n  transition: border-color 150ms, background 150ms;\n}\n.ft-btn:hover { border-color: var(--ft-accent); }\n.ft-btn--primary {\n  background: var(--ft-accent);\n  color: oklch(0.18 0.01 50);\n  border-color: var(--ft-accent);\n}\n\n@media (max-width: 760px) {\n  .ft-header { padding: 16px 18px 14px; }\n  .ft-header__title { font-size: 32px; }\n  .ft-controls__hint { display: none; }\n  .ft-legend { max-width: calc(100% - 24px); left: 10px; bottom: 10px; }\n}\n";
 
 type GameTimerMode = "countdown" | "countup";
 type GameTimerThemePreset = "green" | "red" | "blue" | "amber" | "purple" | "pink" | "teal";

package/dist/index.d.ts

@@ -5257,15 +5257,28 @@ interface FlowTreeProps {
     hideControls?: boolean;
     /** Hide the breadcrumb legend at the bottom-left. */
     hideLegend?: boolean;
+    /**
+     * When > 0, cycles the focused path through the root's direct children
+     * every N milliseconds until the user interacts with the tree (clicks a
+     * card, pans, zooms, toggles a detail, or clicks a legend chip). Honors
+     * `prefers-reduced-motion` (disabled if reduced motion is requested).
+     * Default: 0 (disabled).
+     */
+    autoCycleMs?: number;
+    /**
+     * Explicit paths to cycle through when `autoCycleMs` is set. If omitted,
+     * the tree auto-cycles through the root's direct children.
+     */
+    autoCyclePaths?: string[][];
 }
-declare function FlowTree({ data, title, eyebrow, tagline, renderIcon: renderIconProp, tierColors: tierColorsProp, resolveHref: resolveHrefProp, layoutOptions, onNodeOpen, defaultFocusedPath, focusedPath: controlledPath, onFocusedPathChange, className, style, hideHeader, hideControls, hideLegend, }: FlowTreeProps): react_jsx_runtime.JSX.Element;
+declare function FlowTree({ data, title, eyebrow, tagline, renderIcon: renderIconProp, tierColors: tierColorsProp, resolveHref: resolveHrefProp, layoutOptions, onNodeOpen, defaultFocusedPath, focusedPath: controlledPath, onFocusedPathChange, className, style, hideHeader, hideControls, hideLegend, autoCycleMs, autoCyclePaths, }: FlowTreeProps): react_jsx_runtime.JSX.Element;
 
 /**
  * FlowTree CSS — injected once per page at runtime on the first mount.
  * Self-themed via `--ft-*` CSS variables, all with sensible fallbacks so the
  * component works standalone in any light or dark design system.
  */
-declare const FLOW_TREE_CSS = "\n.ft-shell {\n  --ft-bg: var(--ft-bg, oklch(0.185 0.008 80));\n  --ft-fg: var(--ft-fg, oklch(0.96 0.005 85));\n  --ft-muted-fg: var(--ft-muted-fg, oklch(0.68 0.008 80));\n  --ft-dim-fg: var(--ft-dim-fg, oklch(0.5 0.008 80));\n  --ft-line: var(--ft-line, oklch(0.28 0.008 80));\n  --ft-line-strong: var(--ft-line-strong, oklch(0.4 0.008 80));\n  --ft-grid-strong: var(--ft-grid-strong, oklch(0.24 0.008 80));\n  --ft-card-bg: var(--ft-card-bg, oklch(0.21 0.008 80));\n  --ft-card-active-bg: var(--ft-card-active-bg, oklch(0.25 0.015 60));\n  --ft-card-hover-bg: var(--ft-card-hover-bg, oklch(0.23 0.01 80 / 0.6));\n  --ft-rail-bg: var(--ft-rail-bg, oklch(0.19 0.008 80));\n  --ft-icon-bg: var(--ft-icon-bg, oklch(0.17 0.008 80));\n  --ft-detail-bg: var(--ft-detail-bg, oklch(0.16 0.008 80));\n  --ft-header-bg: var(--ft-header-bg, linear-gradient(180deg, oklch(0.21 0.01 60) 0%, oklch(0.19 0.008 70) 100%));\n  --ft-tier-orange: var(--ft-tier-orange, #f16c25);\n  --ft-tier-teal: var(--ft-tier-teal, #5fb7b8);\n  --ft-tier-blue: var(--ft-tier-blue, oklch(0.72 0.12 240));\n  --ft-tier-amber: var(--ft-tier-amber, oklch(0.8 0.14 75));\n  --ft-tier-green: var(--ft-tier-green, oklch(0.74 0.14 155));\n  --ft-accent: var(--ft-accent, var(--ft-tier-orange));\n  --ft-serif: var(--ft-serif, \"Instrument Serif\", Georgia, serif);\n  --ft-sans: var(--ft-sans, \"Inter\", system-ui, sans-serif);\n  --ft-mono: var(--ft-mono, \"JetBrains Mono\", ui-monospace, Menlo, monospace);\n\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  background: var(--ft-bg);\n  border: 1px solid var(--ft-line);\n  border-radius: 2px;\n  overflow: hidden;\n  color: var(--ft-fg);\n  font-family: var(--ft-sans);\n  font-size: 14px;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n  box-shadow: 0 30px 60px -30px oklch(0 0 0 / 0.5);\n}\n.ft-shell * { box-sizing: border-box; }\n.ft-shell .ft-mono {\n  font-family: var(--ft-mono);\n  font-size: 11px;\n  letter-spacing: 0.02em;\n}\n\n.ft-header {\n  padding: 22px 28px 20px;\n  border-bottom: 1px solid var(--ft-line);\n  background: var(--ft-header-bg);\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.ft-header__eyebrow {\n  font-family: var(--ft-mono);\n  font-size: 10.5px;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: var(--ft-accent);\n}\n.ft-header__title {\n  margin: 0;\n  font-family: var(--ft-serif);\n  font-weight: 400;\n  font-size: 44px;\n  line-height: 1;\n  letter-spacing: -0.015em;\n  color: var(--ft-fg);\n}\n.ft-header__tagline {\n  margin: 6px 0 0;\n  max-width: 76ch;\n  color: var(--ft-muted-fg);\n  font-size: 13px;\n}\n\n.ft-stage {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.ft-svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  cursor: grab;\n  touch-action: none;\n  user-select: none;\n}\n.ft-svg.is-dragging { cursor: grabbing; }\n\n.ft-controls {\n  position: absolute;\n  top: 14px;\n  right: 14px;\n  z-index: 5;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: oklch(0.2 0.008 80 / 0.94);\n  border: 1px solid var(--ft-line-strong);\n  padding: 5px 8px;\n  backdrop-filter: blur(8px);\n  border-radius: 2px;\n}\n.ft-controls button {\n  font-family: var(--ft-mono);\n  font-size: 12px;\n  width: 26px;\n  height: 26px;\n  background: transparent;\n  border: 1px solid var(--ft-line);\n  color: var(--ft-fg);\n  cursor: pointer;\n  padding: 0;\n}\n.ft-controls button:hover { border-color: var(--ft-accent); }\n.ft-controls__reset {\n  width: auto !important;\n  padding: 0 10px !important;\n  font-size: 9.5px !important;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n.ft-controls__hint {\n  font-family: var(--ft-mono);\n  font-size: 9.5px;\n  color: var(--ft-muted-fg);\n  letter-spacing: 0.04em;\n  padding-left: 8px;\n  margin-left: 2px;\n  border-left: 1px solid var(--ft-line);\n}\n\n.ft-legend {\n  position: absolute;\n  left: 18px;\n  bottom: 14px;\n  z-index: 5;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n  font-family: var(--ft-mono);\n  font-size: 10px;\n  color: var(--ft-muted-fg);\n  background: oklch(0.2 0.008 80 / 0.88);\n  border: 1px solid var(--ft-line);\n  padding: 6px 10px;\n  backdrop-filter: blur(6px);\n  max-width: calc(100% - 220px);\n}\n.ft-legend__chip { display: inline-flex; align-items: center; gap: 6px; }\n.ft-legend__dot {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background: var(--ft-accent);\n}\n.ft-legend__sep { color: var(--ft-line-strong); margin: 0 2px; }\n\n.ft-edge { fill: none; transition: stroke 260ms, opacity 260ms; }\n.ft-edge--off {\n  stroke: var(--ft-line);\n  stroke-width: 1;\n  opacity: 0.55;\n}\n.ft-edge--on {\n  stroke: var(--ft-accent);\n  stroke-width: 1.6;\n  stroke-dasharray: 4 5;\n  opacity: 1;\n  animation: ftDashFlow 1.4s linear infinite;\n}\n@keyframes ftDashFlow { to { stroke-dashoffset: -36; } }\n\n.ft-card {\n  --tier-local: var(--tier, var(--ft-line-strong));\n  width: 100%;\n  height: 100%;\n  display: grid;\n  grid-template-columns: 1fr auto;\n  align-items: stretch;\n  background: var(--ft-card-bg);\n  border: 1px solid var(--ft-line);\n  border-left: 3px solid var(--tier-local);\n  border-radius: 2px;\n  transition:\n    background 260ms cubic-bezier(.2,.8,.2,1),\n    border-color 260ms, box-shadow 260ms,\n    transform 260ms cubic-bezier(.2,.8,.2,1),\n    filter 260ms, opacity 260ms, color 260ms;\n  overflow: visible;\n  animation: ftCardIn 320ms cubic-bezier(.2,.8,.2,1) backwards;\n}\n@keyframes ftCardIn {\n  from { opacity: 0; transform: translateX(-6px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n.ft-card__main {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  gap: 10px;\n  align-items: center;\n  padding: 0 10px 0 12px;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: var(--ft-sans);\n  font-size: 13px;\n  text-align: left;\n  cursor: pointer;\n  min-width: 0;\n}\n.ft-card__main:hover { background: var(--ft-card-hover-bg); }\n.ft-card__icon {\n  width: 24px;\n  height: 24px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--tier-local);\n  border: 1px solid var(--ft-line-strong);\n  background: var(--ft-icon-bg);\n  flex-shrink: 0;\n}\n.ft-card__body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }\n.ft-card__label {\n  font-family: var(--ft-serif);\n  font-size: 15px;\n  line-height: 1.15;\n  color: var(--ft-fg);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.ft-card__sub {\n  font-family: var(--ft-mono);\n  font-size: 9.5px;\n  letter-spacing: 0.02em;\n  color: var(--ft-muted-fg);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ft-card__lock { color: var(--ft-muted-fg); display: inline-flex; }\n.ft-card__caret {\n  width: 18px;\n  height: 18px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--ft-mono);\n  font-size: 12px;\n  color: var(--ft-muted-fg);\n  border: 1px solid var(--ft-line);\n}\n.ft-card--active .ft-card__caret {\n  color: var(--tier-local);\n  border-color: var(--tier-local);\n}\n\n.ft-card__rail {\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--ft-line);\n  background: var(--ft-rail-bg);\n}\n.ft-card__mini {\n  flex: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  min-height: 20px;\n  background: transparent;\n  border: none;\n  color: var(--ft-muted-fg);\n  cursor: pointer;\n  transition: background 150ms, color 150ms;\n  border-bottom: 1px solid var(--ft-line);\n  padding: 0;\n  text-decoration: none;\n}\n.ft-card__mini:last-child { border-bottom: none; }\n.ft-card__mini:hover {\n  background: oklch(0.23 0.01 80);\n  color: var(--tier-local);\n}\n.ft-card__mini.is-on {\n  color: var(--tier-local);\n  background: oklch(0.23 0.01 80);\n}\n\n.ft-card--active {\n  background: var(--ft-card-active-bg);\n  box-shadow: 0 0 0 1px var(--tier-local), 0 14px 34px -16px oklch(0.5 0.18 50 / 0.55);\n  transform: scale(1.02);\n}\n.ft-card--dim {\n  filter: grayscale(0.85) brightness(0.82);\n  opacity: 0.7;\n  transform: scale(0.88);\n  transform-origin: center left;\n}\n.ft-card--dim .ft-card__label { color: var(--ft-dim-fg); }\n.ft-card--dim:hover {\n  filter: grayscale(0.3) brightness(0.96);\n  opacity: 1;\n  transform: scale(0.94);\n}\n.ft-card--cta {\n  border-left-color: var(--ft-accent);\n  background: linear-gradient(180deg, oklch(0.23 0.02 55) 0%, oklch(0.2 0.015 60) 100%);\n}\n.ft-card--root {\n  border-left-color: var(--ft-accent);\n  background: oklch(0.26 0.015 55);\n}\n.ft-card--root .ft-card__icon {\n  color: var(--ft-accent);\n  border-color: var(--ft-accent);\n}\n\n.ft-detail {\n  position: relative;\n  margin-top: 0;\n  padding: 16px 18px 14px;\n  background: var(--ft-detail-bg);\n  border: 1px solid var(--ft-line-strong);\n  border-left: 2px solid var(--ft-accent);\n  border-radius: 3px;\n  animation: ftDetailIn 220ms cubic-bezier(.2,.8,.2,1) backwards;\n  color: var(--ft-fg);\n  width: 320px;\n  box-shadow: 0 18px 40px -8px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);\n}\n.ft-detail__head {\n  display: flex;\n  align-items: center;\n  margin: -2px 28px 10px 0;\n}\n.ft-detail__title {\n  font-family: var(--ft-mono);\n  font-size: 10px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--ft-muted-fg);\n}\n.ft-detail__close {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  width: 22px;\n  height: 22px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: 1px solid var(--ft-line);\n  border-radius: 2px;\n  color: var(--ft-muted-fg);\n  cursor: pointer;\n  padding: 0;\n  transition: color 120ms, border-color 120ms, background 120ms;\n}\n.ft-detail__close:hover {\n  color: var(--ft-fg);\n  border-color: var(--ft-line-strong);\n  background: oklch(0.22 0.008 80);\n}\n@keyframes ftDetailIn {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n.ft-detail__lead {\n  font-family: var(--ft-serif);\n  font-size: 15px;\n  line-height: 1.35;\n  font-style: italic;\n  padding-left: 10px;\n  border-left: 2px solid var(--ft-accent);\n  margin-bottom: 10px;\n}\n.ft-detail__body {\n  margin: 0 0 10px;\n  font-size: 12px;\n  color: var(--ft-muted-fg);\n  line-height: 1.5;\n}\n.ft-detail__bullets {\n  margin: 0 0 10px;\n  padding-left: 16px;\n  font-size: 12px;\n  color: var(--ft-fg);\n}\n.ft-detail__bullets li { margin-bottom: 3px; }\n.ft-detail__meta {\n  margin: 0 0 10px;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.ft-detail__meta-row {\n  display: grid;\n  grid-template-columns: 96px 1fr;\n  gap: 8px;\n  font-size: 11px;\n}\n.ft-detail__meta-row dt {\n  font-family: var(--ft-mono);\n  font-size: 9.5px;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--ft-muted-fg);\n  padding-top: 1px;\n}\n.ft-detail__meta-row dd { margin: 0; color: var(--ft-fg); }\n.ft-detail__actions {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n  margin-top: 8px;\n}\n\n.ft-btn {\n  font-family: var(--ft-mono);\n  font-size: 10px;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  padding: 7px 10px;\n  background: transparent;\n  color: var(--ft-fg);\n  border: 1px solid var(--ft-line-strong);\n  text-decoration: none;\n  cursor: pointer;\n  display: inline-flex;\n  gap: 5px;\n  align-items: center;\n  transition: border-color 150ms, background 150ms;\n}\n.ft-btn:hover { border-color: var(--ft-accent); }\n.ft-btn--primary {\n  background: var(--ft-accent);\n  color: oklch(0.18 0.01 50);\n  border-color: var(--ft-accent);\n}\n\n@media (max-width: 760px) {\n  .ft-header { padding: 16px 18px 14px; }\n  .ft-header__title { font-size: 32px; }\n  .ft-controls__hint { display: none; }\n  .ft-legend { max-width: calc(100% - 24px); left: 10px; bottom: 10px; }\n}\n";
+declare const FLOW_TREE_CSS = "\n.ft-shell {\n  --ft-bg: var(--ft-bg, oklch(0.185 0.008 80));\n  --ft-fg: var(--ft-fg, oklch(0.96 0.005 85));\n  --ft-muted-fg: var(--ft-muted-fg, oklch(0.68 0.008 80));\n  --ft-dim-fg: var(--ft-dim-fg, oklch(0.5 0.008 80));\n  --ft-line: var(--ft-line, oklch(0.28 0.008 80));\n  --ft-line-strong: var(--ft-line-strong, oklch(0.4 0.008 80));\n  --ft-grid-strong: var(--ft-grid-strong, oklch(0.24 0.008 80));\n  --ft-card-bg: var(--ft-card-bg, oklch(0.21 0.008 80));\n  --ft-card-active-bg: var(--ft-card-active-bg, oklch(0.25 0.015 60));\n  --ft-card-hover-bg: var(--ft-card-hover-bg, oklch(0.23 0.01 80 / 0.6));\n  --ft-rail-bg: var(--ft-rail-bg, oklch(0.19 0.008 80));\n  --ft-icon-bg: var(--ft-icon-bg, oklch(0.17 0.008 80));\n  --ft-detail-bg: var(--ft-detail-bg, oklch(0.16 0.008 80));\n  --ft-header-bg: var(--ft-header-bg, linear-gradient(180deg, oklch(0.21 0.01 60) 0%, oklch(0.19 0.008 70) 100%));\n  --ft-tier-orange: var(--ft-tier-orange, #f16c25);\n  --ft-tier-teal: var(--ft-tier-teal, #5fb7b8);\n  --ft-tier-blue: var(--ft-tier-blue, oklch(0.72 0.12 240));\n  --ft-tier-amber: var(--ft-tier-amber, oklch(0.8 0.14 75));\n  --ft-tier-green: var(--ft-tier-green, oklch(0.74 0.14 155));\n  --ft-accent: var(--ft-accent, var(--ft-tier-orange));\n  --ft-serif: var(--ft-serif, \"Instrument Serif\", Georgia, serif);\n  --ft-sans: var(--ft-sans, \"Inter\", system-ui, sans-serif);\n  --ft-mono: var(--ft-mono, \"JetBrains Mono\", ui-monospace, Menlo, monospace);\n\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 420px;\n  background: var(--ft-bg);\n  border: 1px solid var(--ft-line);\n  border-radius: 2px;\n  overflow: hidden;\n  color: var(--ft-fg);\n  font-family: var(--ft-sans);\n  font-size: 14px;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n  box-shadow: 0 30px 60px -30px oklch(0 0 0 / 0.5);\n}\n.ft-shell * { box-sizing: border-box; }\n.ft-shell .ft-mono {\n  font-family: var(--ft-mono);\n  font-size: 11px;\n  letter-spacing: 0.02em;\n}\n\n.ft-header {\n  padding: 22px 28px 20px;\n  border-bottom: 1px solid var(--ft-line);\n  background: var(--ft-header-bg);\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.ft-header__eyebrow {\n  font-family: var(--ft-mono);\n  font-size: 10.5px;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: var(--ft-accent);\n}\n.ft-header__title {\n  margin: 0;\n  font-family: var(--ft-serif);\n  font-weight: 400;\n  font-size: 44px;\n  line-height: 1;\n  letter-spacing: -0.015em;\n  color: var(--ft-fg);\n}\n.ft-header__tagline {\n  margin: 6px 0 0;\n  max-width: 76ch;\n  color: var(--ft-muted-fg);\n  font-size: 13px;\n}\n\n.ft-stage {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  background:\n    radial-gradient(1000px 600px at 15% -10%, oklch(0.22 0.012 60 / 0.7), transparent 60%),\n    radial-gradient(800px 500px at 110% 110%, oklch(0.2 0.02 200 / 0.35), transparent 65%);\n}\n\n.ft-svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  cursor: grab;\n  touch-action: none;\n  user-select: none;\n}\n.ft-svg.is-dragging { cursor: grabbing; }\n\n.ft-controls {\n  position: absolute;\n  top: 14px;\n  right: 14px;\n  z-index: 5;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: oklch(0.2 0.008 80 / 0.94);\n  border: 1px solid var(--ft-line-strong);\n  padding: 5px 8px;\n  backdrop-filter: blur(8px);\n  border-radius: 2px;\n}\n.ft-controls button {\n  font-family: var(--ft-mono);\n  font-size: 12px;\n  width: 26px;\n  height: 26px;\n  background: transparent;\n  border: 1px solid var(--ft-line);\n  color: var(--ft-fg);\n  cursor: pointer;\n  padding: 0;\n}\n.ft-controls button:hover { border-color: var(--ft-accent); }\n.ft-controls__reset {\n  width: auto !important;\n  padding: 0 10px !important;\n  font-size: 9.5px !important;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n.ft-controls__hint {\n  font-family: var(--ft-mono);\n  font-size: 9.5px;\n  color: var(--ft-muted-fg);\n  letter-spacing: 0.04em;\n  padding-left: 8px;\n  margin-left: 2px;\n  border-left: 1px solid var(--ft-line);\n}\n\n.ft-legend {\n  position: absolute;\n  left: 18px;\n  bottom: 14px;\n  z-index: 5;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n  font-family: var(--ft-mono);\n  font-size: 10px;\n  color: var(--ft-muted-fg);\n  background: oklch(0.2 0.008 80 / 0.88);\n  border: 1px solid var(--ft-line);\n  padding: 6px 10px;\n  backdrop-filter: blur(6px);\n  max-width: calc(100% - 220px);\n}\n.ft-legend__chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 6px;\n  margin: -2px 0;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  cursor: pointer;\n  border-radius: 2px;\n  transition: background 120ms, color 120ms;\n}\n.ft-legend__chip:hover {\n  background: oklch(0.24 0.01 80);\n  color: var(--ft-fg);\n}\n.ft-legend__chip:disabled {\n  cursor: default;\n  color: var(--ft-fg);\n}\n.ft-legend__chip:disabled:hover { background: transparent; }\n.ft-legend__dot {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background: var(--ft-accent);\n  flex-shrink: 0;\n}\n.ft-legend__sep {\n  color: var(--ft-line-strong);\n  margin: 0 2px;\n  pointer-events: none;\n  user-select: none;\n}\n\n.ft-edge {\n  fill: none;\n  /* Critical: keep strokes the same screen size regardless of the tree's\n     scale transform. Without this, fit-to-viewport (z \u2248 0.6-0.9) makes\n     the edges sub-pixel wide and they visually disappear. */\n  vector-effect: non-scaling-stroke;\n  transition: stroke 260ms, opacity 260ms, stroke-width 260ms;\n}\n.ft-edge--off {\n  /* Use the accent color at low opacity instead of the dim line color \u2014\n     the accent (orange by default) reads far better on a dark stage. */\n  stroke: var(--ft-accent);\n  stroke-width: 1.5;\n  stroke-dasharray: 3 5;\n  opacity: 0.35;\n}\n.ft-edge--on {\n  stroke: var(--ft-accent);\n  stroke-width: 2.2;\n  stroke-dasharray: 6 5;\n  opacity: 1;\n  filter: drop-shadow(0 0 6px var(--ft-accent));\n  animation: ftDashFlow 1.4s linear infinite;\n}\n@keyframes ftDashFlow { to { stroke-dashoffset: -44; } }\n@media (prefers-reduced-motion: reduce) {\n  .ft-edge--on { animation: none; }\n}\n\n.ft-card {\n  --tier-local: var(--tier, var(--ft-line-strong));\n  width: 100%;\n  height: 100%;\n  display: grid;\n  grid-template-columns: 1fr auto;\n  align-items: stretch;\n  background: var(--ft-card-bg);\n  border: 1px solid var(--ft-line);\n  border-left: 3px solid var(--tier-local);\n  border-radius: 2px;\n  transition:\n    background 260ms cubic-bezier(.2,.8,.2,1),\n    border-color 260ms, box-shadow 260ms,\n    transform 260ms cubic-bezier(.2,.8,.2,1),\n    filter 260ms, opacity 260ms, color 260ms;\n  overflow: visible;\n  animation: ftCardIn 320ms cubic-bezier(.2,.8,.2,1) backwards;\n}\n@keyframes ftCardIn {\n  from { opacity: 0; transform: translateX(-6px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n.ft-card__main {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  gap: 10px;\n  align-items: center;\n  padding: 0 10px 0 12px;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: var(--ft-sans);\n  font-size: 13px;\n  text-align: left;\n  cursor: pointer;\n  min-width: 0;\n}\n.ft-card__main:hover { background: var(--ft-card-hover-bg); }\n.ft-card__icon {\n  width: 24px;\n  height: 24px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--tier-local);\n  border: 1px solid var(--ft-line-strong);\n  background: var(--ft-icon-bg);\n  flex-shrink: 0;\n}\n.ft-card__body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }\n.ft-card__label {\n  font-family: var(--ft-serif);\n  font-size: 15px;\n  line-height: 1.15;\n  color: var(--ft-fg);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.ft-card__sub {\n  font-family: var(--ft-mono);\n  font-size: 9.5px;\n  letter-spacing: 0.02em;\n  color: var(--ft-muted-fg);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ft-card__lock { color: var(--ft-muted-fg); display: inline-flex; }\n.ft-card__caret {\n  width: 18px;\n  height: 18px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--ft-mono);\n  font-size: 12px;\n  color: var(--ft-muted-fg);\n  border: 1px solid var(--ft-line);\n}\n.ft-card--active .ft-card__caret {\n  color: var(--tier-local);\n  border-color: var(--tier-local);\n}\n\n.ft-card__rail {\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--ft-line);\n  background: var(--ft-rail-bg);\n}\n.ft-card__mini {\n  flex: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  min-height: 20px;\n  background: transparent;\n  border: none;\n  color: var(--ft-muted-fg);\n  cursor: pointer;\n  transition: background 150ms, color 150ms;\n  border-bottom: 1px solid var(--ft-line);\n  padding: 0;\n  text-decoration: none;\n}\n.ft-card__mini:last-child { border-bottom: none; }\n.ft-card__mini:hover {\n  background: oklch(0.23 0.01 80);\n  color: var(--tier-local);\n}\n.ft-card__mini.is-on {\n  color: var(--tier-local);\n  background: oklch(0.23 0.01 80);\n}\n\n.ft-card--active {\n  background: var(--ft-card-active-bg);\n  box-shadow: 0 0 0 1px var(--tier-local), 0 14px 34px -16px oklch(0.5 0.18 50 / 0.55);\n  transform: scale(1.02);\n}\n.ft-card--dim {\n  filter: grayscale(0.85) brightness(0.82);\n  opacity: 0.7;\n  transform: scale(0.88);\n  transform-origin: center left;\n}\n.ft-card--dim .ft-card__label { color: var(--ft-dim-fg); }\n.ft-card--dim:hover {\n  filter: grayscale(0.3) brightness(0.96);\n  opacity: 1;\n  transform: scale(0.94);\n}\n.ft-card--cta {\n  border-left-color: var(--ft-accent);\n  background: linear-gradient(180deg, oklch(0.23 0.02 55) 0%, oklch(0.2 0.015 60) 100%);\n}\n.ft-card--root {\n  border-left-color: var(--ft-accent);\n  background: oklch(0.26 0.015 55);\n}\n.ft-card--root .ft-card__icon {\n  color: var(--ft-accent);\n  border-color: var(--ft-accent);\n}\n\n.ft-detail {\n  position: relative;\n  margin-top: 0;\n  padding: 16px 18px 14px;\n  background: var(--ft-detail-bg);\n  border: 1px solid var(--ft-line-strong);\n  border-left: 2px solid var(--ft-accent);\n  border-radius: 3px;\n  animation: ftDetailIn 220ms cubic-bezier(.2,.8,.2,1) backwards;\n  color: var(--ft-fg);\n  width: 320px;\n  box-shadow: 0 18px 40px -8px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);\n}\n.ft-detail__head {\n  display: flex;\n  align-items: center;\n  margin: -2px 28px 10px 0;\n}\n.ft-detail__title {\n  font-family: var(--ft-mono);\n  font-size: 10px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--ft-muted-fg);\n}\n.ft-detail__close {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  width: 22px;\n  height: 22px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: 1px solid var(--ft-line);\n  border-radius: 2px;\n  color: var(--ft-muted-fg);\n  cursor: pointer;\n  padding: 0;\n  transition: color 120ms, border-color 120ms, background 120ms;\n}\n.ft-detail__close:hover {\n  color: var(--ft-fg);\n  border-color: var(--ft-line-strong);\n  background: oklch(0.22 0.008 80);\n}\n@keyframes ftDetailIn {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n.ft-detail__lead {\n  font-family: var(--ft-serif);\n  font-size: 15px;\n  line-height: 1.35;\n  font-style: italic;\n  padding-left: 10px;\n  border-left: 2px solid var(--ft-accent);\n  margin-bottom: 10px;\n}\n.ft-detail__body {\n  margin: 0 0 10px;\n  font-size: 12px;\n  color: var(--ft-muted-fg);\n  line-height: 1.5;\n}\n.ft-detail__bullets {\n  margin: 0 0 10px;\n  padding-left: 16px;\n  font-size: 12px;\n  color: var(--ft-fg);\n}\n.ft-detail__bullets li { margin-bottom: 3px; }\n.ft-detail__meta {\n  margin: 0 0 10px;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.ft-detail__meta-row {\n  display: grid;\n  grid-template-columns: 96px 1fr;\n  gap: 8px;\n  font-size: 11px;\n}\n.ft-detail__meta-row dt {\n  font-family: var(--ft-mono);\n  font-size: 9.5px;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--ft-muted-fg);\n  padding-top: 1px;\n}\n.ft-detail__meta-row dd { margin: 0; color: var(--ft-fg); }\n.ft-detail__actions {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n  margin-top: 8px;\n}\n\n.ft-btn {\n  font-family: var(--ft-mono);\n  font-size: 10px;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  padding: 7px 10px;\n  background: transparent;\n  color: var(--ft-fg);\n  border: 1px solid var(--ft-line-strong);\n  text-decoration: none;\n  cursor: pointer;\n  display: inline-flex;\n  gap: 5px;\n  align-items: center;\n  transition: border-color 150ms, background 150ms;\n}\n.ft-btn:hover { border-color: var(--ft-accent); }\n.ft-btn--primary {\n  background: var(--ft-accent);\n  color: oklch(0.18 0.01 50);\n  border-color: var(--ft-accent);\n}\n\n@media (max-width: 760px) {\n  .ft-header { padding: 16px 18px 14px; }\n  .ft-header__title { font-size: 32px; }\n  .ft-controls__hint { display: none; }\n  .ft-legend { max-width: calc(100% - 24px); left: 10px; bottom: 10px; }\n}\n";
 
 type GameTimerMode = "countdown" | "countup";
 type GameTimerThemePreset = "green" | "red" | "blue" | "amber" | "purple" | "pink" | "teal";

package/dist/index.js

@@ -35940,7 +35940,9 @@ var FLOW_TREE_CSS = `
 
   display: flex;
   flex-direction: column;
-  min-height: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 420px;
   background: var(--ft-bg);
   border: 1px solid var(--ft-line);
   border-radius: 2px;
@@ -35995,6 +35997,9 @@ var FLOW_TREE_CSS = `
   flex: 1;
   min-height: 0;
   overflow: hidden;
+  background:
+    radial-gradient(1000px 600px at 15% -10%, oklch(0.22 0.012 60 / 0.7), transparent 60%),
+    radial-gradient(800px 500px at 110% 110%, oklch(0.2 0.02 200 / 0.35), transparent 65%);
 }
 
 .ft-svg {
@@ -36069,29 +36074,72 @@ var FLOW_TREE_CSS = `
   backdrop-filter: blur(6px);
   max-width: calc(100% - 220px);
 }
-.ft-legend__chip { display: inline-flex; align-items: center; gap: 6px; }
+.ft-legend__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 6px;
+  margin: -2px 0;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: background 120ms, color 120ms;
+}
+.ft-legend__chip:hover {
+  background: oklch(0.24 0.01 80);
+  color: var(--ft-fg);
+}
+.ft-legend__chip:disabled {
+  cursor: default;
+  color: var(--ft-fg);
+}
+.ft-legend__chip:disabled:hover { background: transparent; }
 .ft-legend__dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--ft-accent);
+  flex-shrink: 0;
+}
+.ft-legend__sep {
+  color: var(--ft-line-strong);
+  margin: 0 2px;
+  pointer-events: none;
+  user-select: none;
 }
-.ft-legend__sep { color: var(--ft-line-strong); margin: 0 2px; }
 
-.ft-edge { fill: none; transition: stroke 260ms, opacity 260ms; }
+.ft-edge {
+  fill: none;
+  /* Critical: keep strokes the same screen size regardless of the tree's
+     scale transform. Without this, fit-to-viewport (z \u2248 0.6-0.9) makes
+     the edges sub-pixel wide and they visually disappear. */
+  vector-effect: non-scaling-stroke;
+  transition: stroke 260ms, opacity 260ms, stroke-width 260ms;
+}
 .ft-edge--off {
-  stroke: var(--ft-line);
-  stroke-width: 1;
-  opacity: 0.55;
+  /* Use the accent color at low opacity instead of the dim line color \u2014
+     the accent (orange by default) reads far better on a dark stage. */
+  stroke: var(--ft-accent);
+  stroke-width: 1.5;
+  stroke-dasharray: 3 5;
+  opacity: 0.35;
 }
 .ft-edge--on {
   stroke: var(--ft-accent);
-  stroke-width: 1.6;
-  stroke-dasharray: 4 5;
+  stroke-width: 2.2;
+  stroke-dasharray: 6 5;
   opacity: 1;
+  filter: drop-shadow(0 0 6px var(--ft-accent));
   animation: ftDashFlow 1.4s linear infinite;
 }
-@keyframes ftDashFlow { to { stroke-dashoffset: -36; } }
+@keyframes ftDashFlow { to { stroke-dashoffset: -44; } }
+@media (prefers-reduced-motion: reduce) {
+  .ft-edge--on { animation: none; }
+}
 
 .ft-card {
   --tier-local: var(--tier, var(--ft-line-strong));
@@ -36388,11 +36436,11 @@ var DEFAULT_TIER_COLORS = {
   gray: "var(--ft-line-strong)"
 };
 var DEFAULT_LAYOUT = {
-  col: 280,
-  row: 64,
-  compactRow: 42,
-  cardW: 244,
-  cardH: 56,
+  col: 290,
+  row: 76,
+  compactRow: 48,
+  cardW: 248,
+  cardH: 60,
   detailMaxW: 320
 };
 var STYLE_ID4 = "dll-flow-tree-styles";
@@ -36745,7 +36793,9 @@ function FlowTree({
   style,
   hideHeader = false,
   hideControls = false,
-  hideLegend = false
+  hideLegend = false,
+  autoCycleMs = 0,
+  autoCyclePaths
 }) {
   React87.useEffect(() => {
     ensureStylesInjected4();
@@ -36789,31 +36839,84 @@ function FlowTree({
     },
     [controlledPath, onFocusedPathChange]
   );
+  const [hasUserInteracted, setHasUserInteracted] = React87.useState(false);
+  const markInteracted = React87.useCallback(() => {
+    setHasUserInteracted(true);
+  }, []);
   const [expandedDetails, setExpandedDetails] = React87.useState(
     () => /* @__PURE__ */ new Set()
   );
-  const toggleDetail = React87.useCallback((n) => {
-    setExpandedDetails((prev) => {
-      const next = new Set(prev);
-      if (next.has(n.data.id)) next.delete(n.data.id);
-      else next.add(n.data.id);
-      return next;
-    });
-  }, []);
-  const closeDetail = React87.useCallback((id) => {
-    setExpandedDetails((prev) => {
-      const next = new Set(prev);
-      next.delete(id);
-      return next;
-    });
-  }, []);
+  const toggleDetail = React87.useCallback(
+    (n) => {
+      markInteracted();
+      setExpandedDetails((prev) => {
+        const next = new Set(prev);
+        if (next.has(n.data.id)) next.delete(n.data.id);
+        else next.add(n.data.id);
+        return next;
+      });
+    },
+    [markInteracted]
+  );
+  const closeDetail = React87.useCallback(
+    (id) => {
+      markInteracted();
+      setExpandedDetails((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+    },
+    [markInteracted]
+  );
   const activate = React87.useCallback(
     (n) => {
+      markInteracted();
       setFocusedPath(n.pathArr);
       setExpandedDetails(/* @__PURE__ */ new Set());
     },
-    [setFocusedPath]
+    [setFocusedPath, markInteracted]
+  );
+  const focusPathPrefix = React87.useCallback(
+    (prefixLen) => {
+      if (prefixLen < 1 || prefixLen >= focusedPath.length) return;
+      markInteracted();
+      setFocusedPath(focusedPath.slice(0, prefixLen));
+      setExpandedDetails(/* @__PURE__ */ new Set());
+    },
+    [focusedPath, setFocusedPath, markInteracted]
   );
+  const resolvedCyclePaths = React87.useMemo(() => {
+    if (!autoCycleMs || autoCycleMs <= 0) return [];
+    if (autoCyclePaths && autoCyclePaths.length) return autoCyclePaths;
+    return (data.children ?? []).map((c) => [data.id, c.id]);
+  }, [autoCycleMs, autoCyclePaths, data]);
+  React87.useEffect(() => {
+    if (!autoCycleMs || autoCycleMs <= 0) return;
+    if (hasUserInteracted) return;
+    if (controlledPath) return;
+    if (resolvedCyclePaths.length === 0) return;
+    if (typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+    const currentKey = focusedPath.join("/");
+    let i = Math.max(
+      0,
+      resolvedCyclePaths.findIndex((p) => p.join("/") === currentKey)
+    );
+    const id = window.setInterval(() => {
+      i = (i + 1) % resolvedCyclePaths.length;
+      const next = resolvedCyclePaths[i];
+      if (next) setFocusedPath(next);
+    }, autoCycleMs);
+    return () => window.clearInterval(id);
+  }, [
+    autoCycleMs,
+    hasUserInteracted,
+    controlledPath,
+    resolvedCyclePaths,
+    setFocusedPath
+  ]);
   const { nodes, edges, width, height } = React87.useMemo(
     () => layoutTree(data, focusedPath, opts, expandedDetails),
     [data, focusedPath.join("/"), opts, expandedDetails]
@@ -36873,6 +36976,7 @@ function FlowTree({
   const onPointerDown = (e) => {
     if (e.target.closest("button, a")) return;
     userInteractedRef.current = true;
+    markInteracted();
     dragRef.current = { sx: e.clientX, sy: e.clientY, px: pan.x, py: pan.y };
     e.currentTarget.setPointerCapture?.(e.pointerId);
     e.currentTarget.classList.add("is-dragging");
@@ -36892,6 +36996,7 @@ function FlowTree({
     if (!e.ctrlKey && !e.metaKey) return;
     e.preventDefault();
     userInteractedRef.current = true;
+    markInteracted();
     setZoom((z) => Math.max(0.35, Math.min(2, z + -e.deltaY * 15e-4)));
   };
   const resetView = () => {
@@ -37067,10 +37172,23 @@ function FlowTree({
       ),
       !hideLegend ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "ft-legend ft-mono", children: focusedPath.map((id, i) => {
         const n = nodeById[id];
-        return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("span", { className: "ft-legend__chip", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "ft-legend__dot" }),
-          n ? n.data.label : id,
-          i < focusedPath.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "ft-legend__sep", children: "\u203A" }) : null
+        const isLast = i === focusedPath.length - 1;
+        return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(React87.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: "ft-legend__chip",
+              onClick: () => focusPathPrefix(i + 1),
+              disabled: isLast,
+              title: isLast ? "Current focus" : `Jump back to ${n ? n.data.label : id}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "ft-legend__dot" }),
+                n ? n.data.label : id
+              ]
+            }
+          ),
+          !isLast ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "ft-legend__sep", "aria-hidden": true, children: "\u203A" }) : null
         ] }, id);
       }) }) : null
     ] })