@dskripchenko/flow 0.0.0-stage → 1.0.1

package/dist/style.css

@@ -0,0 +1,1119 @@
+/*
+ * @dskripchenko/flow — styles of the viewer and the editor. Colours come from
+ * the kit's tokens (--uid-*), so light and dark themes follow the kit.
+ * Hosts may override the --fl-* variables on .fl-view / .fl-editor.
+ */
+
+.fl-view,
+.fl-editor {
+  --fl-bg: var(--uid-surface-base, #fafafa);
+  --fl-grid: color-mix(in srgb, var(--uid-text-tertiary, #a1a1aa) 45%, transparent);
+  --fl-node-bg: var(--uid-surface-raised, #fff);
+  --fl-node-border: var(--uid-border-default, #d4d4d8);
+  --fl-node-text: var(--uid-text-primary, #18181b);
+  --fl-node-muted: var(--uid-text-secondary, #71717a);
+  --fl-edge: color-mix(in srgb, var(--uid-text-tertiary, #a1a1aa) 85%, var(--uid-text-secondary, #71717a));
+  --fl-accent: var(--uid-accent, #14b8a6);
+  --fl-accent-subtle: var(--uid-accent-subtle, #f0fdfa);
+  --fl-success: var(--uid-success, #059669);
+  --fl-success-subtle: var(--uid-success-subtle, #ecfdf5);
+  --fl-danger: var(--uid-danger, #e11d48);
+  --fl-danger-subtle: var(--uid-danger-subtle, #fff1f2);
+  --fl-warning: var(--uid-warning, #d97706);
+  --fl-warning-subtle: var(--uid-warning-subtle, #fffbeb);
+  --fl-info: var(--uid-info, #2563eb);
+  --fl-info-subtle: var(--uid-info-subtle, #eff6ff);
+  --fl-shadow: color-mix(in srgb, var(--uid-text-primary, #18181b) 9%, transparent);
+  --fl-font: var(--uid-font-family-sans, system-ui, sans-serif);
+  --fl-radius: var(--uid-radius-lg, 12px);
+
+  position: relative;
+  display: flex;
+  min-height: 360px;
+  height: 100%;
+  font-family: var(--fl-font);
+  color: var(--fl-node-text);
+}
+
+/* ------------------------------------------------------------------ canvas */
+
+.fl-canvas {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: inherit;
+  overflow: hidden;
+  background: var(--fl-bg);
+  border-radius: inherit;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: grab;
+  outline: none;
+}
+.fl-canvas.is-panning,
+.fl-canvas.is-space,
+.fl-canvas.is-space * {
+  cursor: grabbing;
+}
+.fl-canvas.is-editable {
+  cursor: default;
+}
+.fl-canvas.is-connecting,
+.fl-canvas.is-connecting * {
+  cursor: crosshair;
+}
+.fl-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  font-family: var(--fl-font);
+}
+.fl-canvas.is-animating .fl-viewport {
+  transition: transform 240ms var(--uid-ease-out, ease-out);
+}
+.fl-grid-dot {
+  fill: var(--fl-grid);
+}
+
+/* ------------------------------------------------------------------ groups */
+
+.fl-group rect {
+  fill: color-mix(in srgb, var(--fl-node-muted) 6%, transparent);
+  stroke: color-mix(in srgb, var(--fl-node-muted) 35%, transparent);
+  stroke-dasharray: 5 4;
+  stroke-width: 1;
+}
+.fl-group__label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  fill: var(--fl-node-muted);
+}
+
+/* ------------------------------------------------------------------- edges */
+
+.fl-edge__hit {
+  fill: none;
+  stroke: transparent;
+  stroke-width: 16;
+  pointer-events: stroke;
+  cursor: pointer;
+}
+.fl-edge__line {
+  fill: none;
+  stroke: var(--fl-edge);
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+  transition: stroke 120ms;
+}
+.fl-edge.is-hovered .fl-edge__line {
+  stroke: var(--fl-node-muted);
+  stroke-width: 2;
+}
+.fl-edge.is-association .fl-edge__line {
+  stroke-dasharray: 3 4;
+  stroke-width: 1.2;
+}
+.fl-edge.is-traversed .fl-edge__line {
+  stroke: color-mix(in srgb, var(--fl-success) 75%, var(--fl-edge));
+  stroke-width: 2;
+}
+.fl-edge.is-path .fl-edge__line {
+  stroke: var(--fl-accent);
+  stroke-width: 2.6;
+}
+.fl-edge__flow {
+  fill: none;
+  stroke: color-mix(in srgb, var(--fl-node-bg) 80%, transparent);
+  stroke-width: 1.4;
+  stroke-dasharray: 2 12;
+  stroke-linecap: round;
+  pointer-events: none;
+  animation: fl-flow 1.1s linear infinite;
+}
+.fl-edge.is-disabled .fl-edge__line {
+  stroke-dasharray: 5 5;
+  opacity: 0.45;
+}
+.fl-edge.is-selected .fl-edge__line,
+.fl-edge.is-focused .fl-edge__line {
+  stroke: var(--fl-accent);
+  stroke-width: 2.6;
+}
+.fl-edge.has-error .fl-edge__line {
+  stroke: var(--fl-danger);
+}
+.fl-edge.has-warning .fl-edge__line {
+  stroke: var(--fl-warning);
+}
+.fl-arrow path {
+  fill: var(--fl-edge);
+}
+.fl-arrow--accent path {
+  fill: var(--fl-accent);
+}
+.fl-arrow--success path {
+  fill: color-mix(in srgb, var(--fl-success) 75%, var(--fl-edge));
+}
+.fl-arrow--muted path {
+  fill: var(--fl-edge);
+  opacity: 0.45;
+}
+.fl-arrow--danger path {
+  fill: var(--fl-danger);
+}
+
+.fl-edge-label {
+  cursor: pointer;
+  outline: none;
+}
+.fl-edge-label__bg {
+  fill: var(--fl-bg);
+  stroke: var(--uid-border-subtle, #e4e4e7);
+  stroke-width: 1;
+}
+.fl-edge-label__text {
+  font-size: 12px;
+  font-weight: 500;
+  fill: var(--fl-node-muted);
+}
+.fl-edge-label.is-path .fl-edge-label__bg {
+  stroke: color-mix(in srgb, var(--fl-accent) 55%, transparent);
+  fill: var(--fl-accent-subtle);
+}
+.fl-edge-label.is-path .fl-edge-label__text {
+  fill: var(--uid-accent-text, var(--fl-accent));
+}
+.fl-edge-label.is-selected .fl-edge-label__bg,
+.fl-edge-label.is-focused .fl-edge-label__bg {
+  stroke: var(--fl-accent);
+  stroke-width: 1.5;
+}
+.fl-edge-label.is-disabled {
+  opacity: 0.5;
+}
+.fl-edge-label.is-disabled .fl-edge-label__text {
+  text-decoration: line-through;
+}
+.fl-edge-label:not(:has(rect)) {
+  pointer-events: none;
+}
+
+
+/* ------------------------------------------------------------------- nodes */
+
+.fl-node-wrap {
+  cursor: pointer;
+  outline: none;
+}
+.fl-canvas.is-editable .fl-node-wrap {
+  cursor: grab;
+}
+.fl-canvas.is-dragging .fl-node-wrap {
+  cursor: grabbing;
+}
+.fl-node__body {
+  fill: var(--fl-node-bg);
+  stroke: var(--fl-node-border);
+  stroke-width: 1;
+  transition: stroke 120ms, fill 120ms;
+}
+.fl-node__shadow {
+  fill: var(--fl-shadow);
+}
+.fl-node-wrap.is-hovered .fl-node__body {
+  stroke: var(--uid-border-hover, #a1a1aa);
+}
+.fl-node__label {
+  font-size: 14px;
+  font-weight: 500;
+  fill: var(--fl-node-text);
+  pointer-events: none;
+}
+.fl-node__label--outside {
+  font-size: 13px;
+  fill: var(--fl-node-muted);
+}
+.fl-node__desc {
+  font-size: 12px;
+  font-weight: 400;
+  fill: var(--fl-node-muted);
+}
+.fl-node__tile rect {
+  fill: var(--fl-accent-subtle);
+}
+.fl-node__tile svg {
+  color: var(--uid-accent-text, var(--fl-accent));
+}
+.fl-node--rect.fl-node .fl-node__tile rect {
+  fill: var(--fl-info-subtle);
+}
+.fl-node--rect.fl-node .fl-node__tile svg {
+  color: var(--fl-info);
+}
+.fl-node__body--start {
+  fill: var(--fl-success-subtle);
+  stroke: var(--fl-success);
+  stroke-width: 1.5;
+}
+.fl-node--circle .fl-node__glyph {
+  color: var(--fl-success);
+  fill: var(--fl-success);
+}
+.fl-node__body--end {
+  fill: var(--fl-node-bg);
+  stroke: var(--fl-node-text);
+  stroke-width: 3;
+}
+.fl-node__end-core {
+  fill: var(--fl-node-text);
+}
+.fl-node--note .fl-node__body {
+  fill: var(--fl-warning-subtle);
+  stroke: color-mix(in srgb, var(--fl-warning) 45%, transparent);
+}
+.fl-node--note .fl-node__shadow {
+  display: none;
+}
+.fl-node--note .fl-node__label {
+  font-size: 13px;
+  font-weight: 400;
+  fill: var(--fl-node-muted);
+}
+.fl-node--diamond .fl-node__body {
+  fill: var(--fl-node-bg);
+}
+
+/* Status tones. */
+.fl-node.fl-tone--accent .fl-node__body {
+  stroke: var(--fl-accent);
+  stroke-width: 2;
+}
+.fl-node.fl-tone--success .fl-node__body {
+  stroke: color-mix(in srgb, var(--fl-success) 70%, var(--fl-node-border));
+  stroke-width: 1.5;
+}
+.fl-node.fl-tone--danger .fl-node__body {
+  stroke: var(--fl-danger);
+  stroke-width: 2;
+  fill: color-mix(in srgb, var(--fl-danger-subtle) 60%, var(--fl-node-bg));
+}
+.fl-node.fl-tone--warning .fl-node__body {
+  stroke: var(--fl-warning);
+  stroke-width: 1.5;
+  stroke-dasharray: 6 3;
+}
+.fl-node.fl-tone--neutral .fl-node__body {
+  stroke-dasharray: 3 3;
+}
+.fl-node.fl-tone--neutral .fl-node__label {
+  fill: var(--fl-node-muted);
+}
+.fl-node.is-on-path:not(.has-status) .fl-node__body {
+  stroke: color-mix(in srgb, var(--fl-accent) 60%, var(--fl-node-border));
+}
+
+.fl-node__halo {
+  fill: none;
+  stroke: var(--fl-accent);
+  stroke-width: 6;
+  opacity: 0.22;
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: fl-pulse 1.8s ease-in-out infinite;
+  pointer-events: none;
+}
+.fl-node.is-current .fl-node__halo {
+  opacity: 0.32;
+}
+.fl-node__ring {
+  fill: none;
+  stroke: var(--fl-accent);
+  stroke-width: 2;
+  pointer-events: none;
+}
+.fl-node.is-focused:not(.is-selected) .fl-node__ring {
+  stroke-dasharray: 4 3;
+}
+
+.fl-node__chip circle,
+.fl-node__chip rect {
+  fill: var(--fl-node-muted);
+  stroke: var(--fl-bg);
+  stroke-width: 2;
+}
+.fl-node__chip svg {
+  color: #fff;
+}
+.fl-node__chip text {
+  font-size: 11px;
+  font-weight: 700;
+  fill: #fff;
+  font-variant-numeric: tabular-nums;
+}
+.fl-tone--success .fl-node__chip circle,
+.fl-tone--success .fl-node__chip rect {
+  fill: var(--fl-success);
+}
+.fl-tone--danger .fl-node__chip circle,
+.fl-tone--danger .fl-node__chip rect {
+  fill: var(--fl-danger);
+}
+.fl-tone--warning .fl-node__chip circle,
+.fl-tone--warning .fl-node__chip rect {
+  fill: var(--fl-warning);
+}
+.fl-tone--accent .fl-node__chip circle,
+.fl-tone--accent .fl-node__chip rect {
+  fill: var(--fl-accent);
+}
+.fl-tone--info .fl-node__chip circle,
+.fl-tone--info .fl-node__chip rect {
+  fill: var(--fl-info);
+}
+.fl-node__chip--pulse .fl-node__pulse {
+  opacity: 0.35;
+  stroke: none;
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: fl-ping 1.6s ease-out infinite;
+}
+
+/* Counters: quiet pills in kit tokens; accent for an active step, danger for an error. */
+.fl-node__count rect,
+.fl-edge-count rect {
+  fill: var(--uid-surface-raised, #fff);
+  stroke: var(--uid-border-default, #d4d4d8);
+  stroke-width: 1;
+}
+.fl-node__count text,
+.fl-edge-count text {
+  font-size: 11px;
+  font-weight: 600;
+  fill: var(--uid-text-secondary, #71717a);
+  font-variant-numeric: tabular-nums;
+}
+.fl-node__count--accent rect,
+.fl-edge-label.is-path .fl-edge-count rect {
+  fill: var(--fl-accent-subtle);
+  stroke: color-mix(in srgb, var(--fl-accent) 70%, transparent);
+}
+.fl-node__count--accent text,
+.fl-edge-label.is-path .fl-edge-count text {
+  fill: var(--uid-accent-text, var(--fl-accent));
+}
+.fl-node__count--danger rect {
+  fill: var(--fl-danger-subtle);
+  stroke: color-mix(in srgb, var(--fl-danger) 70%, transparent);
+}
+.fl-node__count--danger text {
+  fill: var(--fl-danger);
+}
+
+.fl-node__enter {
+  cursor: pointer;
+}
+.fl-node__enter rect {
+  fill: var(--fl-node-bg);
+  stroke: var(--fl-node-border);
+}
+.fl-node__enter svg {
+  color: var(--fl-node-muted);
+}
+.fl-node__enter:hover rect {
+  stroke: var(--fl-accent);
+  fill: var(--fl-accent-subtle);
+}
+.fl-node__enter:hover svg {
+  color: var(--uid-accent-text, var(--fl-accent));
+}
+
+.fl-node__issue circle {
+  stroke: var(--fl-bg);
+  stroke-width: 2;
+}
+.fl-node.has-error .fl-node__issue circle {
+  fill: var(--fl-danger);
+}
+.fl-node.has-warning .fl-node__issue circle {
+  fill: var(--fl-warning);
+}
+.fl-node__issue text {
+  font-size: 11px;
+  font-weight: 800;
+  fill: #fff;
+}
+.fl-node.has-error .fl-node__body {
+  stroke: var(--fl-danger);
+}
+
+.fl-node.is-disabled {
+  opacity: 0.5;
+}
+.fl-node.is-disabled .fl-node__body {
+  stroke-dasharray: 4 3;
+}
+.fl-node.is-disabled .fl-node__label tspan:not(.fl-node__desc) {
+  text-decoration: line-through;
+}
+.fl-node-wrap.is-drop-target .fl-node__body {
+  stroke: var(--fl-accent);
+  stroke-width: 2;
+}
+
+/* --------------------------------------------------------------- editor UI */
+
+.fl-handle {
+  cursor: crosshair;
+}
+.fl-handle__hit {
+  fill: transparent;
+}
+.fl-handle__dot {
+  fill: var(--fl-node-bg);
+  stroke: var(--fl-accent);
+  stroke-width: 1.6;
+  transition: r 100ms;
+}
+.fl-handle:hover .fl-handle__dot,
+.fl-handle.is-snapped .fl-handle__dot {
+  fill: var(--fl-accent);
+  r: 6.5;
+}
+.fl-edge-end {
+  fill: var(--fl-node-bg);
+  stroke: var(--fl-accent);
+  stroke-width: 2;
+  cursor: move;
+}
+.fl-edge-end:hover {
+  fill: var(--fl-accent);
+}
+.fl-connect-preview {
+  fill: none;
+  stroke: var(--fl-accent);
+  stroke-width: 2;
+  stroke-dasharray: 6 4;
+  pointer-events: none;
+}
+.fl-connect-preview.is-snapped {
+  stroke-dasharray: none;
+}
+.fl-band {
+  fill: color-mix(in srgb, var(--fl-accent) 10%, transparent);
+  stroke: var(--fl-accent);
+  stroke-width: 1;
+  stroke-dasharray: 4 3;
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+}
+
+/* ---------------------------------------------------------------- overlays */
+
+.fl-controls {
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  background: var(--fl-node-bg);
+  border: 1px solid var(--uid-border-subtle, #e4e4e7);
+  border-radius: var(--uid-radius-md, 8px);
+  box-shadow: var(--uid-shadow-md);
+  cursor: default;
+  z-index: 2;
+}
+.fl-controls__zoom {
+  min-width: 52px;
+  font-variant-numeric: tabular-nums;
+}
+.fl-controls__sep {
+  width: 1px;
+  align-self: stretch;
+  margin: 4px 2px;
+  background: var(--uid-border-subtle, #e4e4e7);
+}
+
+.fl-minimap {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  background: color-mix(in srgb, var(--fl-node-bg) 92%, transparent);
+  border: 1px solid var(--uid-border-subtle, #e4e4e7);
+  border-radius: var(--uid-radius-md, 8px);
+  box-shadow: var(--uid-shadow-md);
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 2;
+}
+.fl-minimap svg {
+  display: block;
+  touch-action: none;
+}
+.fl-minimap__node {
+  fill: color-mix(in srgb, var(--fl-node-muted) 45%, transparent);
+}
+.fl-minimap__node.is-current {
+  fill: var(--fl-accent);
+}
+.fl-minimap__node.is-selected {
+  fill: var(--uid-accent-text, var(--fl-accent));
+}
+.fl-minimap__group {
+  fill: color-mix(in srgb, var(--fl-node-muted) 10%, transparent);
+}
+.fl-minimap__view {
+  fill: color-mix(in srgb, var(--fl-accent) 8%, transparent);
+  stroke: var(--fl-accent);
+}
+
+.fl-hovebar {
+  position: absolute;
+  transform: translate(-50%, calc(-100% - 8px));
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px 4px 10px;
+  background: var(--fl-node-bg);
+  border: 1px solid var(--uid-border-subtle, #e4e4e7);
+  border-radius: var(--uid-radius-md, 8px);
+  box-shadow: var(--uid-shadow-md);
+  cursor: default;
+  z-index: 3;
+  white-space: nowrap;
+}
+.fl-hovebar::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -10px;
+  height: 10px;
+}
+.fl-hovebar--edge {
+  transform: translate(-50%, calc(-100% - 6px));
+}
+
+.fl-nav {
+  position: absolute;
+  left: 12px;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  max-width: min(640px, calc(100% - 24px));
+  padding: 3px 12px 3px 3px;
+  background: var(--fl-node-bg);
+  border: 1px solid var(--uid-border-subtle, #e4e4e7);
+  border-radius: var(--uid-radius-md, 8px);
+  box-shadow: var(--uid-shadow-sm);
+  width: max-content;
+  cursor: default;
+  z-index: 2;
+}
+.fl-nav__crumbs {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.fl-status {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  max-width: calc(100% - 24px);
+  padding: 4px 6px 4px 12px;
+  background: color-mix(in srgb, var(--fl-node-bg) 94%, transparent);
+  border: 1px solid var(--uid-border-subtle, #e4e4e7);
+  border-radius: var(--uid-radius-md, 8px);
+  box-shadow: var(--uid-shadow-sm);
+  font-size: var(--uid-font-size-sm, 13px);
+  color: var(--fl-node-muted);
+  cursor: default;
+  z-index: 2;
+}
+.fl-view:has(.fl-nav) .fl-status {
+  top: 60px;
+}
+.fl-status__text {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.fl-status__summary {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.fl-status__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--fl-node-muted);
+  flex: none;
+}
+.fl-status__dot.is-live {
+  background: var(--fl-success);
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--fl-success) 60%, transparent);
+  animation: fl-live 2s ease-out infinite;
+}
+.fl-status__dot.is-stale {
+  background: var(--fl-warning);
+}
+.fl-status__dot.is-error {
+  background: var(--fl-danger);
+}
+
+.fl-busy {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--fl-bg) 60%, transparent);
+  z-index: 4;
+}
+
+.fl-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 24px;
+  text-align: center;
+  cursor: default;
+  pointer-events: none;
+}
+.fl-empty > * {
+  pointer-events: auto;
+}
+.fl-empty__title {
+  margin: 0;
+  font-size: var(--uid-font-size-lg, 16px);
+  font-weight: 600;
+  color: var(--fl-node-text);
+}
+.fl-empty__hint {
+  margin: 0;
+  max-width: 360px;
+  color: var(--fl-node-muted);
+  font-size: var(--uid-font-size-sm, 13px);
+  line-height: 1.5;
+}
+.fl-layout-error {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--fl-danger);
+}
+
+/* ----------------------------------------------------------------- details */
+
+.fl-details {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.fl-details__head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+.fl-details__desc {
+  margin: 0;
+  color: var(--uid-text-secondary);
+  line-height: 1.5;
+}
+.fl-details__enter {
+  align-self: flex-start;
+}
+.fl-details__section {
+  margin: 4px 0 0;
+  font-size: var(--uid-font-size-xs, 12px);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--uid-text-secondary);
+}
+.fl-details code {
+  font-family: var(--uid-font-family-mono, monospace);
+  font-size: 0.92em;
+}
+
+/* --------------------------------------------------------------- animation */
+
+@keyframes fl-pulse {
+  0%,
+  100% {
+    opacity: 0.12;
+    stroke-width: 4;
+  }
+  50% {
+    opacity: 0.34;
+    stroke-width: 9;
+  }
+}
+@keyframes fl-ping {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1.9);
+    opacity: 0;
+  }
+}
+@keyframes fl-flow {
+  to {
+    stroke-dashoffset: -14;
+  }
+}
+@keyframes fl-live {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--fl-success) 55%, transparent);
+  }
+  70%,
+  100% {
+    box-shadow: 0 0 0 6px transparent;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fl-node__halo,
+  .fl-node__chip--pulse .fl-node__pulse,
+  .fl-edge__flow,
+  .fl-status__dot.is-live {
+    animation: none;
+  }
+  .fl-canvas.is-animating .fl-viewport {
+    transition: none;
+  }
+}
+
+@media (max-width: 640px) {
+  .fl-minimap {
+    display: none;
+  }
+  .fl-status__summary {
+    display: none;
+  }
+  .fl-controls__zoom {
+    display: none;
+  }
+}
+
+/* ------------------------------------------------------------------ editor */
+
+.fl-editor {
+  flex-direction: column;
+  background: var(--fl-node-bg);
+  border: 1px solid var(--uid-border-subtle, #e4e4e7);
+  border-radius: var(--fl-radius);
+  overflow: hidden;
+}
+.fl-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--uid-border-subtle, #e4e4e7);
+  background: var(--fl-node-bg);
+  min-height: 44px;
+  box-sizing: border-box;
+  flex: none;
+}
+.fl-toolbar__sep {
+  width: 1px;
+  height: 20px;
+  margin: 0 6px;
+  background: var(--uid-border-subtle, #e4e4e7);
+}
+.fl-toolbar__spacer {
+  flex: 1 1 auto;
+}
+.fl-toolbar__text {
+  white-space: nowrap;
+}
+.fl-editor__body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.fl-editor__palette {
+  flex: none;
+  width: 196px;
+  padding: 12px;
+  border-right: 1px solid var(--uid-border-subtle, #e4e4e7);
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+.fl-editor__canvas {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+}
+.fl-editor__canvas .fl-canvas {
+  border-radius: 0;
+}
+.fl-editor__side {
+  flex: none;
+  width: 312px;
+  border-left: 1px solid var(--uid-border-subtle, #e4e4e7);
+  overflow-y: auto;
+  padding: 4px 14px 16px;
+  box-sizing: border-box;
+}
+.fl-panel-title {
+  margin: 2px 2px 10px;
+  font-size: var(--uid-font-size-xs, 12px);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--fl-node-muted);
+}
+
+.fl-palette {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.fl-palette__item-wrap {
+  display: flex;
+}
+.fl-palette__item.uid-button {
+  flex: 1 1 auto;
+  justify-content: flex-start;
+  cursor: grab;
+  touch-action: none;
+}
+.fl-palette__hint {
+  margin: 8px 2px 0;
+  font-size: var(--uid-font-size-xs, 12px);
+  line-height: 1.45;
+  color: var(--fl-node-muted);
+}
+.fl-palette-ghost {
+  position: fixed;
+  z-index: 1000;
+  transform: translate(-50%, -50%);
+  padding: 8px 14px;
+  border-radius: 10px;
+  background: var(--uid-surface-raised, #fff);
+  border: 1.5px solid var(--uid-accent, #14b8a6);
+  box-shadow: var(--uid-shadow-lg);
+  color: var(--uid-text-primary);
+  font: 500 13px var(--uid-font-family-sans, system-ui, sans-serif);
+  pointer-events: none;
+  opacity: 0.92;
+}
+
+.fl-props {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding-top: 14px;
+}
+.fl-props__muted {
+  margin: 0;
+  color: var(--fl-node-muted);
+  font-size: var(--uid-font-size-sm, 13px);
+  line-height: 1.5;
+}
+.fl-props__route {
+  font-weight: 500;
+  color: var(--fl-node-text);
+}
+.fl-props__count {
+  margin: 0;
+  font-weight: 600;
+}
+.fl-props__tools {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.fl-props__section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 12px;
+  border-top: 1px solid var(--uid-border-subtle, #e4e4e7);
+}
+.fl-props__section h4 {
+  margin: 0;
+  font-size: var(--uid-font-size-xs, 12px);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--fl-node-muted);
+}
+.fl-props__row {
+  display: flex;
+  gap: 6px;
+}
+.fl-props__kv {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
+  gap: 4px;
+  align-items: center;
+}
+.fl-props__add,
+.fl-props__delete {
+  align-self: flex-start;
+}
+.fl-props__condition input {
+  font-family: var(--uid-font-family-mono, monospace);
+}
+
+.fl-issues__summary {
+  margin: 14px 0 8px;
+  font-size: var(--uid-font-size-sm, 13px);
+  color: var(--fl-node-muted);
+}
+.fl-issues__none {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px 0;
+  color: var(--fl-success);
+  font-size: var(--uid-font-size-sm, 13px);
+}
+.fl-issues__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.fl-issue.uid-button {
+  width: 100%;
+  justify-content: flex-start;
+  height: auto;
+  min-height: 32px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  text-align: left;
+  white-space: normal;
+  align-items: flex-start;
+}
+.fl-issue__text {
+  font-weight: 400;
+  line-height: 1.4;
+}
+.fl-issue--error .uid-icon {
+  color: var(--fl-danger);
+}
+.fl-issue--warning .uid-icon {
+  color: var(--fl-warning);
+}
+.fl-tab-issues__count {
+  margin-left: 6px;
+}
+
+.fl-hint {
+  position: absolute;
+  left: 50%;
+  bottom: 14px;
+  transform: translateX(-50%);
+  margin: 0;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--fl-node-bg) 85%, transparent);
+  color: var(--fl-node-muted);
+  font-size: var(--uid-font-size-xs, 12px);
+  pointer-events: none;
+  white-space: nowrap;
+}
+.fl-editor-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  max-width: 400px;
+}
+.fl-editor-empty__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.fl-menu-label {
+  flex: 1 1 auto;
+}
+.fl-menu-shortcut {
+  margin-left: 16px;
+  font: inherit;
+  font-size: var(--uid-font-size-xs, 12px);
+  color: var(--uid-text-tertiary, #a1a1aa);
+}
+
+.fl-import {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.fl-import__source textarea {
+  font-family: var(--uid-font-family-mono, monospace);
+  font-size: 13px;
+}
+
+.fl-editor.is-narrow .fl-hint {
+  display: none;
+}
+
+/* A pressed toggle (minimap, snap): the kit's secondary variant, tinted with the accent. */
+.fl-toggle.uid-button.is-active {
+  background: var(--fl-accent-subtle);
+  color: var(--uid-accent-text, var(--fl-accent));
+}
+
+.fl-props__head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.fl-props__head .uid-icon,
+.fl-props__head svg {
+  flex: none;
+  color: var(--fl-node-muted);
+}
+.fl-props__kind {
+  font-weight: 600;
+  font-size: var(--uid-font-size-sm, 13px);
+}
+.fl-props__id {
+  margin-left: auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--uid-font-family-mono, monospace);
+  font-size: var(--uid-font-size-xs, 12px);
+  color: var(--fl-node-muted);
+}
+.fl-props__transition.uid-button {
+  justify-content: flex-start;
+  width: 100%;
+}
+/*$vite$:1*/