@digilogiclabs/saas-factory-ui 1.29.0 → 1.29.2

package/dist/index.d.mts

@@ -5278,7 +5278,7 @@ declare function FlowTree({ data, title, eyebrow, tagline, renderIcon: renderIco
  * 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  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  transition: stroke 260ms, opacity 260ms, stroke-width 260ms;\n}\n.ft-edge--off {\n  stroke: var(--ft-line-strong);\n  stroke-width: 1.1;\n  stroke-dasharray: 2 4;\n  opacity: 0.5;\n}\n.ft-edge--on {\n  stroke: var(--ft-accent);\n  stroke-width: 1.8;\n  stroke-dasharray: 5 5;\n  opacity: 1;\n  filter: drop-shadow(0 0 4px var(--ft-accent));\n  animation: ftDashFlow 1.4s linear infinite;\n}\n@keyframes ftDashFlow { to { stroke-dashoffset: -40; } }\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";
+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

@@ -5278,7 +5278,7 @@ declare function FlowTree({ data, title, eyebrow, tagline, renderIcon: renderIco
  * 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  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  transition: stroke 260ms, opacity 260ms, stroke-width 260ms;\n}\n.ft-edge--off {\n  stroke: var(--ft-line-strong);\n  stroke-width: 1.1;\n  stroke-dasharray: 2 4;\n  opacity: 0.5;\n}\n.ft-edge--on {\n  stroke: var(--ft-accent);\n  stroke-width: 1.8;\n  stroke-dasharray: 5 5;\n  opacity: 1;\n  filter: drop-shadow(0 0 4px var(--ft-accent));\n  animation: ftDashFlow 1.4s linear infinite;\n}\n@keyframes ftDashFlow { to { stroke-dashoffset: -40; } }\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";
+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;
@@ -36112,23 +36114,29 @@ var FLOW_TREE_CSS = `
 
 .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-strong);
-  stroke-width: 1.1;
-  stroke-dasharray: 2 4;
-  opacity: 0.5;
+  /* 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.8;
-  stroke-dasharray: 5 5;
+  stroke-width: 2.2;
+  stroke-dasharray: 6 5;
   opacity: 1;
-  filter: drop-shadow(0 0 4px var(--ft-accent));
+  filter: drop-shadow(0 0 6px var(--ft-accent));
   animation: ftDashFlow 1.4s linear infinite;
 }
-@keyframes ftDashFlow { to { stroke-dashoffset: -40; } }
+@keyframes ftDashFlow { to { stroke-dashoffset: -44; } }
 @media (prefers-reduced-motion: reduce) {
   .ft-edge--on { animation: none; }
 }
@@ -36436,6 +36444,19 @@ var DEFAULT_LAYOUT = {
   detailMaxW: 320
 };
 var STYLE_ID4 = "dll-flow-tree-styles";
+function FlowTreeStyles() {
+  const reactHostingProps = {
+    href: STYLE_ID4,
+    precedence: "default"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+    "style",
+    {
+      ...reactHostingProps,
+      dangerouslySetInnerHTML: { __html: FLOW_TREE_CSS }
+    }
+  );
+}
 function ensureStylesInjected4() {
   if (typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID4)) return;
@@ -37027,162 +37048,165 @@ function FlowTree({
     placed.push({ x: ox, y: oy, w: detailW, h: detailH });
     return { n, ox, oy, detailW, detailH };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: `ft-shell ${className}`, style, children: [
-    showHeader ? /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("header", { className: "ft-header", children: [
-      eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "ft-header__eyebrow", children: eyebrow }) : null,
-      title ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("h2", { className: "ft-header__title", children: title }) : null,
-      tagline ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("p", { className: "ft-header__tagline", children: tagline }) : null
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "ft-stage", ref: containerRef, children: [
-      !hideControls ? /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "ft-controls", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              userInteractedRef.current = true;
-              setZoom((z) => Math.min(2, z + 0.1));
-            },
-            "aria-label": "Zoom in",
-            children: "+"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              userInteractedRef.current = true;
-              setZoom((z) => Math.max(0.35, z - 0.1));
-            },
-            "aria-label": "Zoom out",
-            children: "\u2212"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-          "button",
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(FlowTreeStyles, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: `ft-shell ${className}`, style, children: [
+      showHeader ? /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("header", { className: "ft-header", children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "ft-header__eyebrow", children: eyebrow }) : null,
+        title ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("h2", { className: "ft-header__title", children: title }) : null,
+        tagline ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("p", { className: "ft-header__tagline", children: tagline }) : null
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "ft-stage", ref: containerRef, children: [
+        !hideControls ? /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "ft-controls", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                userInteractedRef.current = true;
+                setZoom((z) => Math.min(2, z + 0.1));
+              },
+              "aria-label": "Zoom in",
+              children: "+"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                userInteractedRef.current = true;
+                setZoom((z) => Math.max(0.35, z - 0.1));
+              },
+              "aria-label": "Zoom out",
+              children: "\u2212"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ft-controls__reset",
+              onClick: resetView,
+              children: "Fit"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "ft-controls__hint", children: "drag to pan \xB7 \u2318/ctrl + scroll to zoom" })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
+          "svg",
           {
-            type: "button",
-            className: "ft-controls__reset",
-            onClick: resetView,
-            children: "Fit"
+            className: "ft-svg",
+            width: "100%",
+            height: "100%",
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel: onPointerUp,
+            onWheel,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                "pattern",
+                {
+                  id: "ft-dots",
+                  width: "18",
+                  height: "18",
+                  patternUnits: "userSpaceOnUse",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("circle", { cx: "1", cy: "1", r: "0.7", fill: "var(--ft-grid-strong)" })
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                "rect",
+                {
+                  x: "0",
+                  y: "0",
+                  width: "100%",
+                  height: "100%",
+                  fill: "url(#ft-dots)",
+                  opacity: "0.45"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
+                "g",
+                {
+                  transform: `translate(${pan.x}, ${pan.y}) scale(${zoom})`,
+                  style: {
+                    transition: dragRef.current ? "none" : "transform 380ms cubic-bezier(.2,.8,.2,1)"
+                  },
+                  children: [
+                    edgePaths.map(
+                      (e) => !e.onPath ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("path", { d: e.d, className: "ft-edge ft-edge--off" }, e.id) : null
+                    ),
+                    edgePaths.map(
+                      (e) => e.onPath ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("path", { d: e.d, className: "ft-edge ft-edge--on" }, e.id) : null
+                    ),
+                    nodes.map((n) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                      FlowCard,
+                      {
+                        n,
+                        colors,
+                        renderIcon,
+                        resolveHref,
+                        opts,
+                        onActivate: activate,
+                        onToggleDetail: toggleDetail,
+                        onOpen: onNodeOpen
+                      },
+                      n.pathId
+                    )),
+                    detailItems.map(({ n, ox, oy, detailW, detailH }) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                      "g",
+                      {
+                        transform: `translate(${ox}, ${oy})`,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                          "foreignObject",
+                          {
+                            x: 0,
+                            y: 0,
+                            width: detailW + 8,
+                            height: detailH + 40,
+                            style: { overflow: "visible" },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                              DetailPop,
+                              {
+                                node: n.data,
+                                resolveHref,
+                                onClose: () => closeDetail(n.data.id)
+                              }
+                            )
+                          }
+                        )
+                      },
+                      `detail-${n.pathId}`
+                    ))
+                  ]
+                }
+              )
+            ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "ft-controls__hint", children: "drag to pan \xB7 \u2318/ctrl + scroll to zoom" })
-      ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
-        "svg",
-        {
-          className: "ft-svg",
-          width: "100%",
-          height: "100%",
-          onPointerDown,
-          onPointerMove,
-          onPointerUp,
-          onPointerCancel: onPointerUp,
-          onWheel,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-              "pattern",
-              {
-                id: "ft-dots",
-                width: "18",
-                height: "18",
-                patternUnits: "userSpaceOnUse",
-                children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("circle", { cx: "1", cy: "1", r: "0.7", fill: "var(--ft-grid-strong)" })
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-              "rect",
-              {
-                x: "0",
-                y: "0",
-                width: "100%",
-                height: "100%",
-                fill: "url(#ft-dots)",
-                opacity: "0.45"
-              }
-            ),
+        !hideLegend ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "ft-legend ft-mono", children: focusedPath.map((id, i) => {
+          const n = nodeById[id];
+          const isLast = i === focusedPath.length - 1;
+          return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(React87.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
-              "g",
+              "button",
               {
-                transform: `translate(${pan.x}, ${pan.y}) scale(${zoom})`,
-                style: {
-                  transition: dragRef.current ? "none" : "transform 380ms cubic-bezier(.2,.8,.2,1)"
-                },
+                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: [
-                  edgePaths.map(
-                    (e) => !e.onPath ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("path", { d: e.d, className: "ft-edge ft-edge--off" }, e.id) : null
-                  ),
-                  edgePaths.map(
-                    (e) => e.onPath ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("path", { d: e.d, className: "ft-edge ft-edge--on" }, e.id) : null
-                  ),
-                  nodes.map((n) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-                    FlowCard,
-                    {
-                      n,
-                      colors,
-                      renderIcon,
-                      resolveHref,
-                      opts,
-                      onActivate: activate,
-                      onToggleDetail: toggleDetail,
-                      onOpen: onNodeOpen
-                    },
-                    n.pathId
-                  )),
-                  detailItems.map(({ n, ox, oy, detailW, detailH }) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-                    "g",
-                    {
-                      transform: `translate(${ox}, ${oy})`,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-                        "foreignObject",
-                        {
-                          x: 0,
-                          y: 0,
-                          width: detailW + 8,
-                          height: detailH + 40,
-                          style: { overflow: "visible" },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-                            DetailPop,
-                            {
-                              node: n.data,
-                              resolveHref,
-                              onClose: () => closeDetail(n.data.id)
-                            }
-                          )
-                        }
-                      )
-                    },
-                    `detail-${n.pathId}`
-                  ))
+                  /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "ft-legend__dot" }),
+                  n ? n.data.label : id
                 ]
               }
-            )
-          ]
-        }
-      ),
-      !hideLegend ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "ft-legend ft-mono", children: focusedPath.map((id, i) => {
-        const n = nodeById[id];
-        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
+            ),
+            !isLast ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "ft-legend__sep", "aria-hidden": true, children: "\u203A" }) : null
+          ] }, id);
+        }) }) : null
+      ] })
     ] })
   ] });
 }