@almadar/ui 6.52.0 → 6.53.0

package/dist/{chunk-BHZG4PDZ.js → chunk-7LM6I3NA.js}

@@ -1,673 +1,676 @@
 import { useTapReveal } from './chunk-XJTHMW4G.js';
 import { useEventBus } from './chunk-6EV3OEBQ.js';
 import { updateAssetStatus } from './chunk-O7OLVVBR.js';
-import { cn, domPassthrough } from './chunk-IN3BVW2Z.js';
+import { cn, domPassthrough } from './chunk-64WACXM7.js';
+import { createLogger } from '@almadar/logger';
 import React, { useCallback, createContext, useContext } from 'react';
 import { useThemeScope } from '@almadar/ui/context';
 import { jsx } from 'react/jsx-runtime';
-import { createLogger } from '@almadar/logger';
 import { renderUiEntriesOf } from '@almadar/core/patterns';
 import { isInlineTrait } from '@almadar/core';
 import { parseListenSource } from '@almadar/runtime';
 
-// lib/pressable.ts
-function clickElement(el) {
-  el.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+var log = createLogger("almadar:ui:theme-color");
+var THEME_SERIES = [
+  "var(--color-primary)",
+  "var(--color-success)",
+  "var(--color-warning)",
+  "var(--color-error)",
+  "var(--color-info)",
+  "var(--color-accent)"
+];
+function channel(value, unitScale) {
+  return Math.round(Math.min(255, Math.max(0, Number(value) * unitScale)));
 }
-function pressableProps(onPress, options = {}) {
-  if (!onPress) return {};
-  const { disabled = false } = options;
-  return {
-    role: "button",
-    tabIndex: disabled ? -1 : 0,
-    ...disabled ? { "aria-disabled": true } : void 0,
-    onClick: (e) => {
-      if (!disabled) onPress(e);
-    },
-    onKeyDown: (e) => {
-      if (disabled || e.target !== e.currentTarget) return;
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        clickElement(e.currentTarget);
-      }
-    }
-  };
+function make(r, g, b, a) {
+  return { r, g, b, a, css: `rgb(${r}, ${g}, ${b})` };
 }
-function rowActivationProps(onActivate) {
-  if (!onActivate) return {};
-  return {
-    tabIndex: 0,
-    onClick: onActivate,
-    onKeyDown: (e) => {
-      if (e.target !== e.currentTarget || e.key !== "Enter") return;
-      e.preventDefault();
-      clickElement(e.currentTarget);
-    }
-  };
+function parseComputedColor(value) {
+  const v = value.trim();
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(v);
+  if (hex) {
+    const h = hex[1].length === 3 ? hex[1].split("").map((c) => c + c).join("") : hex[1];
+    return make(parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16), 1);
+  }
+  const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*(?:[,/]\s*([\d.]+)\s*)?\)$/i.exec(v);
+  if (rgb) {
+    return make(channel(rgb[1], 1), channel(rgb[2], 1), channel(rgb[3], 1), rgb[4] === void 0 ? 1 : Number(rgb[4]));
+  }
+  const srgb = /^color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*(?:\/\s*([\d.]+)\s*)?\)$/i.exec(v);
+  if (srgb) {
+    return make(channel(srgb[1], 255), channel(srgb[2], 255), channel(srgb[3], 255), srgb[4] === void 0 ? 1 : Number(srgb[4]));
+  }
+  return null;
+}
+var SENTINEL = "rgb(1, 2, 3)";
+function getComputedSentinel(doc) {
+  const s = doc.createElement("span");
+  s.style.display = "none";
+  s.style.color = SENTINEL;
+  doc.body.appendChild(s);
+  const c = getComputedStyle(s).color;
+  doc.body.removeChild(s);
+  return c;
+}
+function resolveThemeColor(value, scope) {
+  const doc = scope.ownerDocument;
+  const wrapper = doc.createElement("span");
+  wrapper.style.display = "none";
+  wrapper.style.color = SENTINEL;
+  const probe = doc.createElement("span");
+  probe.style.color = value;
+  wrapper.appendChild(probe);
+  scope.appendChild(wrapper);
+  const computed = probe.style.color === "" ? "" : getComputedStyle(probe).color;
+  scope.removeChild(wrapper);
+  const parsed = computed === getComputedSentinel(doc) ? null : parseComputedColor(computed);
+  if (!parsed) log.error("unresolvable-theme-color", { value, computed });
+  return parsed;
 }
 
-// components/core/atoms/Box.tsx
-var paddingStyles = {
-  none: "p-0",
-  xs: "p-1",
-  sm: "p-2",
-  md: "p-4",
-  lg: "p-6",
-  xl: "p-8",
-  "2xl": "p-12"
-};
-var paddingXStyles = {
-  none: "px-0",
-  xs: "px-1",
-  sm: "px-2",
-  md: "px-4",
-  lg: "px-6",
-  xl: "px-8",
-  "2xl": "px-12"
-};
-var paddingYStyles = {
-  none: "py-0",
-  xs: "py-1",
-  sm: "py-2",
-  md: "py-4",
-  lg: "py-6",
-  xl: "py-8",
-  "2xl": "py-12"
-};
-var marginStyles = {
-  none: "m-0",
-  xs: "m-1",
-  sm: "m-2",
-  md: "m-4",
-  lg: "m-6",
-  xl: "m-8",
-  "2xl": "m-12",
-  auto: "m-auto"
-};
-var marginXStyles = {
-  none: "mx-0",
-  xs: "mx-1",
-  sm: "mx-2",
-  md: "mx-4",
-  lg: "mx-6",
-  xl: "mx-8",
-  "2xl": "mx-12",
-  auto: "mx-auto"
-};
-var marginYStyles = {
-  none: "my-0",
-  xs: "my-1",
-  sm: "my-2",
-  md: "my-4",
-  lg: "my-6",
-  xl: "my-8",
-  "2xl": "my-12",
-  auto: "my-auto"
-};
-var bgStyles = {
-  transparent: "bg-transparent",
-  primary: "bg-primary text-primary-foreground",
-  secondary: "bg-secondary text-secondary-foreground",
-  muted: "bg-muted text-foreground",
-  accent: "bg-accent text-accent-foreground",
-  surface: "bg-card",
-  overlay: "bg-card/80 backdrop-blur-sm"
+// lib/avl-theme.ts
+function avlTint(token, percent) {
+  return `color-mix(in srgb, ${token} ${percent}%, transparent)`;
+}
+function avlBlend(token, percent, other) {
+  return `color-mix(in srgb, ${token} ${percent}%, ${other})`;
+}
+var AVL_INK = {
+  text: "var(--color-foreground)",
+  quiet: "var(--color-muted-foreground)",
+  line: "var(--color-border)",
+  surface: "var(--color-card)",
+  wash: "var(--color-muted)",
+  canvas: "var(--color-background)",
+  focus: "var(--color-primary)",
+  onFocus: "var(--color-primary-foreground)",
+  pass: "var(--color-success)",
+  fail: "var(--color-error)",
+  caution: "var(--color-warning)"
 };
-var roundedStyles = {
-  none: "rounded-none",
-  sm: "rounded-sm",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  xl: "rounded-xl",
-  "2xl": "rounded-xl",
-  full: "rounded-full"
+var AVL_STROKE = {
+  hairline: 1,
+  wire: 1.5,
+  active: 2.5
 };
-var shadowStyles = {
-  none: "shadow-none",
-  sm: "shadow-sm",
-  md: "shadow",
-  lg: "shadow-lg",
-  xl: "shadow-lg"
+var AVL_FONT = {
+  body: "var(--font-family-body, var(--font-family))",
+  mono: "var(--font-family-mono, monospace)"
 };
-var displayStyles = {
-  block: "block",
-  inline: "inline",
-  "inline-block": "inline-block",
-  flex: "flex",
-  "inline-flex": "inline-flex",
-  grid: "grid"
+function avlSeries(i) {
+  const base = THEME_SERIES[i % THEME_SERIES.length];
+  const band = Math.floor(i / THEME_SERIES.length) % 3;
+  if (band === 0) return base;
+  return avlBlend(base, 65, band === 1 ? AVL_INK.text : AVL_INK.canvas);
+}
+var STATE_COLORS = {
+  initial: { fill: avlTint("var(--color-success)", 12), border: "var(--color-success)" },
+  terminal: { fill: avlTint("var(--color-foreground)", 6), border: "var(--color-foreground)" },
+  hub: { fill: avlTint("var(--color-info)", 12), border: "var(--color-info)" },
+  default: { fill: avlTint("var(--color-muted-foreground)", 8), border: "var(--color-muted-foreground)" }
 };
-var overflowStyles = {
-  auto: "overflow-auto",
-  hidden: "overflow-hidden",
-  visible: "overflow-visible",
-  scroll: "overflow-scroll"
+function getStateRole(isInitial, isTerminal, transitionCount, maxTransitionCount) {
+  if (isInitial) return "initial";
+  if (isTerminal) return "terminal";
+  if (transitionCount != null && maxTransitionCount != null && transitionCount === maxTransitionCount && transitionCount >= 3) return "hub";
+  return "default";
+}
+var CONNECTION_COLORS = {
+  forward: { color: "var(--color-muted-foreground)", width: 1.5, dash: "none" },
+  backward: { color: "var(--color-muted-foreground)", width: 1.5, dash: "5 4" },
+  selfLoop: { color: "var(--color-muted-foreground)", width: 1, dash: "3 2" },
+  emitListen: { color: "var(--color-warning)", width: 1.5, dash: "4 3" }
 };
-var positionStyles = {
-  relative: "relative",
-  absolute: "absolute",
-  fixed: "fixed",
-  sticky: "sticky"
+var EFFECT_CATEGORY_COLORS = {
+  ui: { color: "var(--color-accent)", bg: avlTint("var(--color-accent)", 10) },
+  data: { color: "var(--color-info)", bg: avlTint("var(--color-info)", 10) },
+  communication: { color: "var(--color-warning)", bg: avlTint("var(--color-warning)", 10) },
+  lifecycle: { color: "var(--color-success)", bg: avlTint("var(--color-success)", 10) },
+  control: { color: "var(--color-muted-foreground)", bg: avlTint("var(--color-muted-foreground)", 10) },
+  async: { color: avlBlend("var(--color-info)", 50, "var(--color-accent)"), bg: avlTint(avlBlend("var(--color-info)", 50, "var(--color-accent)"), 10) },
+  compute: { color: "var(--color-primary)", bg: avlTint("var(--color-primary)", 10) },
+  system: { color: avlBlend("var(--color-muted-foreground)", 60, "var(--color-primary)"), bg: avlTint("var(--color-muted-foreground)", 10) }
 };
-var Box = React.forwardRef(
-  ({
-    padding,
-    paddingX,
-    paddingY,
-    margin,
-    marginX,
-    marginY,
-    bg = "transparent",
-    border = false,
-    rounded = "none",
-    shadow = "none",
-    display,
-    fullWidth = false,
-    fullHeight = false,
-    overflow,
-    position,
-    className,
-    children,
-    as: Component = "div",
-    action,
-    actionPayload,
-    hoverEvent,
-    tapReveal = true,
-    maxWidth,
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    onPointerDown,
-    ...rest
-  }, ref) => {
-    const eventBus = useEventBus();
-    const { override: themeOverride } = useThemeScope();
-    const declaredTheme = rest["data-theme"];
-    const dataTheme = declaredTheme !== void 0 && themeOverride ? themeOverride : declaredTheme;
-    const handleClick = useCallback((e) => {
-      if (action) {
-        e.stopPropagation();
-        eventBus.emit(`UI:${action}`, actionPayload ?? {});
-      }
-      onClick?.(e);
-    }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = useCallback((e) => {
-      if (hoverEvent) {
-        eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
-      }
-      onMouseEnter?.(e);
-    }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = useCallback((e) => {
-      if (hoverEvent) {
-        eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
-      }
-      onMouseLeave?.(e);
-    }, [hoverEvent, eventBus, onMouseLeave]);
-    const { triggerProps } = useTapReveal({
-      enabled: tapReveal && !!hoverEvent,
-      onReveal: useCallback(() => {
-        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
-      }, [hoverEvent, eventBus]),
-      onDismiss: useCallback(() => {
-        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
-      }, [hoverEvent, eventBus])
-    });
-    const handlePointerDown = useCallback((e) => {
-      if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
-      onPointerDown?.(e);
-    }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
-    const isClickable = action || onClick;
-    const actionControl = action && rest.role === void 0 && rest.tabIndex === void 0 ? pressableProps(handleClick) : {};
-    return React.createElement(
-      Component,
-      {
-        ref,
-        className: cn(
-          padding && paddingStyles[padding],
-          paddingX && paddingXStyles[paddingX],
-          paddingY && paddingYStyles[paddingY],
-          margin && marginStyles[margin],
-          marginX && marginXStyles[marginX],
-          marginY && marginYStyles[marginY],
-          bgStyles[bg],
-          border && "border-[length:var(--border-width)] border-border",
-          roundedStyles[rounded],
-          shadowStyles[shadow],
-          display && displayStyles[display],
-          fullWidth && "w-full",
-          fullHeight && "h-full",
-          overflow && overflowStyles[overflow],
-          position && positionStyles[position],
-          isClickable && "cursor-pointer",
-          className
-        ),
-        onClick: isClickable ? handleClick : void 0,
-        ...actionControl,
-        onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
-        onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
-        onPointerDown: hoverEvent && tapReveal || onPointerDown ? handlePointerDown : void 0,
-        style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
-        ...rest,
-        "data-theme": dataTheme
-      },
-      children
-    );
-  }
-);
-Box.displayName = "Box";
-var gapStyles = {
-  none: "gap-0",
-  xs: "gap-1",
-  sm: "gap-2",
-  md: "gap-4",
-  lg: "gap-6",
-  xl: "gap-8",
-  "2xl": "gap-12"
+var EFFECT_OPERATOR_CATEGORY = {
+  "render-ui": "ui",
+  "navigate": "ui",
+  "navigate-back": "ui",
+  "set": "data",
+  "persist": "data",
+  "fetch": "data",
+  "fetch-stream": "data",
+  "ref": "data",
+  "deref": "data",
+  "swap": "data",
+  "watch": "data",
+  "emit": "communication",
+  "notify": "communication",
+  "send-server": "communication",
+  "call-service": "communication",
+  "integration/http": "communication",
+  "integration/github-get-repo": "communication",
+  "integration/github-create-issue": "communication",
+  "spawn": "lifecycle",
+  "despawn": "lifecycle",
+  "do": "control",
+  "if": "control",
+  "when": "control",
+  "let": "control",
+  "log": "control",
+  "atomic": "control",
+  "wait": "async",
+  "async/delay": "async",
+  "async/debounce": "async",
+  "async/throttle": "async",
+  "async/interval": "async",
+  "async/race": "async",
+  "async/all": "async",
+  "async/sequence": "async",
+  "async/timeout": "async",
+  "async/retry": "async",
+  "forward": "compute",
+  "train": "compute",
+  "evaluate": "compute",
+  "checkpoint/save": "compute",
+  "checkpoint/load": "compute",
+  "nn/setWeights": "compute",
+  "train/loop": "compute",
+  "train/step": "compute",
+  "train/clipGradients": "compute",
+  "train/clipWeights": "compute",
+  "train/sgd": "compute",
+  "train/adam": "compute",
+  "prob/seed": "compute",
+  "prob/condition": "compute",
+  "workspace/write-orbital": "system",
+  "workspace/write-file": "system",
+  "workspace/write-schema": "system",
+  "workspace/write-plan": "system",
+  "workspace/archive-orbital": "system",
+  "lolo/emit-body": "system"
 };
-var alignStyles = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch",
-  baseline: "items-baseline"
+var EFFECT_FAMILY_CATEGORY = {
+  agent: "system",
+  os: "system",
+  browser: "system",
+  llm: "system",
+  behavior: "system",
+  validate: "control",
+  session: "system",
+  compose: "system",
+  trace: "control",
+  memory: "data",
+  application: "system"
 };
-var justifyStyles = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around",
-  evenly: "justify-evenly"
+var EFFECT_OPERATOR_ZONE = {
+  "render-ui": "screen",
+  "navigate": "route",
+  "navigate-back": "route",
+  "set": "entity",
+  "swap": "entity",
+  "ref": "store",
+  "deref": "store",
+  "watch": "store",
+  "persist": "store",
+  "fetch": "store",
+  "fetch-stream": "store",
+  "emit": "bus",
+  "send-server": "bus",
+  "notify": "toast",
+  "call-service": "remote",
+  "integration/http": "remote",
+  "integration/github-get-repo": "remote",
+  "integration/github-create-issue": "remote",
+  "spawn": "instances",
+  "despawn": "instances",
+  "do": "flow",
+  "if": "flow",
+  "when": "flow",
+  "let": "flow",
+  "log": "flow",
+  "atomic": "flow",
+  "wait": "timer",
+  "async/delay": "timer",
+  "async/debounce": "timer",
+  "async/throttle": "timer",
+  "async/interval": "timer",
+  "async/race": "timer",
+  "async/all": "timer",
+  "async/sequence": "timer",
+  "async/timeout": "timer",
+  "async/retry": "timer",
+  "forward": "model",
+  "train": "model",
+  "evaluate": "model",
+  "checkpoint/save": "model",
+  "checkpoint/load": "model",
+  "nn/setWeights": "model",
+  "train/loop": "model",
+  "train/step": "model",
+  "train/clipGradients": "model",
+  "train/clipWeights": "model",
+  "train/sgd": "model",
+  "train/adam": "model",
+  "prob/seed": "model",
+  "prob/condition": "model",
+  "workspace/write-orbital": "system",
+  "workspace/write-file": "system",
+  "workspace/write-schema": "system",
+  "workspace/write-plan": "system",
+  "workspace/archive-orbital": "system",
+  "lolo/emit-body": "system"
 };
-var Stack = ({
-  direction = "vertical",
-  gap = "md",
-  align = "stretch",
-  justify = "start",
-  wrap = false,
-  reverse = false,
-  flex = false,
-  className,
-  style,
-  children,
-  as: Component = "div",
-  onClick,
-  onKeyDown,
-  role,
-  tabIndex,
-  action,
-  actionPayload,
-  responsive = false,
-  ...rest
-}) => {
-  const eventBus = useEventBus();
-  const handleClick = (e) => {
-    if (action) {
-      eventBus.emit(`UI:${action}`, actionPayload ?? {});
-    }
-    onClick?.(e);
-  };
-  const isHorizontal = direction === "horizontal";
-  const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-  return React.createElement(
-    Component,
-    {
-      ...domPassthrough(rest),
-      className: cn(
-        "flex",
-        directionClass,
-        gapStyles[gap],
-        alignStyles[align],
-        justifyStyles[justify],
-        wrap && "flex-wrap",
-        flex && "flex-1",
-        className
-      ),
-      style,
-      onClick: action || onClick ? handleClick : void 0,
-      onKeyDown,
-      role,
-      tabIndex
-    },
-    children
-  );
+var EFFECT_FAMILY_ZONE = {
+  agent: "system",
+  os: "system",
+  browser: "system",
+  llm: "remote",
+  behavior: "system",
+  validate: "flow",
+  session: "system",
+  compose: "system",
+  trace: "flow",
+  memory: "store",
+  application: "system"
 };
-var VStack = (props) => /* @__PURE__ */ jsx(Stack, { direction: "vertical", ...props });
-var HStack = (props) => /* @__PURE__ */ jsx(Stack, { direction: "horizontal", ...props });
-var log = createLogger("almadar:ui:theme-color");
-var THEME_SERIES = [
-  "var(--color-primary)",
-  "var(--color-success)",
-  "var(--color-warning)",
-  "var(--color-error)",
-  "var(--color-info)",
-  "var(--color-accent)"
-];
-function channel(value, unitScale) {
-  return Math.round(Math.min(255, Math.max(0, Number(value) * unitScale)));
+function isEffectOperator(head) {
+  return head in EFFECT_OPERATOR_CATEGORY;
 }
-function make(r, g, b, a) {
-  return { r, g, b, a, css: `rgb(${r}, ${g}, ${b})` };
+function isEffectFamily(prefix) {
+  return prefix in EFFECT_FAMILY_CATEGORY;
 }
-function parseComputedColor(value) {
-  const v = value.trim();
-  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(v);
-  if (hex) {
-    const h = hex[1].length === 3 ? hex[1].split("").map((c) => c + c).join("") : hex[1];
-    return make(parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16), 1);
-  }
-  const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*(?:[,/]\s*([\d.]+)\s*)?\)$/i.exec(v);
-  if (rgb) {
-    return make(channel(rgb[1], 1), channel(rgb[2], 1), channel(rgb[3], 1), rgb[4] === void 0 ? 1 : Number(rgb[4]));
-  }
-  const srgb = /^color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*(?:\/\s*([\d.]+)\s*)?\)$/i.exec(v);
-  if (srgb) {
-    return make(channel(srgb[1], 255), channel(srgb[2], 255), channel(srgb[3], 255), srgb[4] === void 0 ? 1 : Number(srgb[4]));
+function effectCategoryOf(head) {
+  if (isEffectOperator(head)) return EFFECT_OPERATOR_CATEGORY[head];
+  const slash = head.indexOf("/");
+  if (slash > 0) {
+    const prefix = head.slice(0, slash);
+    if (isEffectFamily(prefix)) return EFFECT_FAMILY_CATEGORY[prefix];
   }
   return null;
 }
-var SENTINEL = "rgb(1, 2, 3)";
-function getComputedSentinel(doc) {
-  const s = doc.createElement("span");
-  s.style.display = "none";
-  s.style.color = SENTINEL;
-  doc.body.appendChild(s);
-  const c = getComputedStyle(s).color;
-  doc.body.removeChild(s);
-  return c;
+function asEffectOperator(head) {
+  return isEffectOperator(head) ? head : null;
 }
-function resolveThemeColor(value, scope) {
-  const doc = scope.ownerDocument;
-  const wrapper = doc.createElement("span");
-  wrapper.style.display = "none";
-  wrapper.style.color = SENTINEL;
-  const probe = doc.createElement("span");
-  probe.style.color = value;
-  wrapper.appendChild(probe);
-  scope.appendChild(wrapper);
-  const computed = probe.style.color === "" ? "" : getComputedStyle(probe).color;
-  scope.removeChild(wrapper);
-  const parsed = computed === getComputedSentinel(doc) ? null : parseComputedColor(computed);
-  if (!parsed) log.error("unresolvable-theme-color", { value, computed });
-  return parsed;
+var OPERATOR_CATEGORY_COLORS = {
+  "arithmetic": "var(--color-primary)",
+  "comparison": "var(--color-warning)",
+  "logic": "var(--color-accent)",
+  "control": "var(--color-error)",
+  "effect": avlBlend("var(--color-warning)", 60, "var(--color-error)"),
+  "collection": "var(--color-info)",
+  "std-math": "var(--color-primary)",
+  "std-str": "var(--color-success)",
+  "std-array": "var(--color-info)",
+  "std-object": avlBlend("var(--color-info)", 60, "var(--color-foreground)"),
+  "std-validate": "var(--color-warning)",
+  "std-json": avlBlend("var(--color-success)", 60, "var(--color-foreground)"),
+  "std-time": avlBlend("var(--color-info)", 50, "var(--color-success)"),
+  "std-format": avlBlend("var(--color-success)", 60, "var(--color-background)"),
+  "std-async": avlBlend("var(--color-accent)", 50, "var(--color-error)"),
+  "std-nn": avlBlend("var(--color-primary)", 60, "var(--color-accent)"),
+  "std-tensor": avlBlend("var(--color-primary)", 60, "var(--color-info)"),
+  "std-train": avlBlend("var(--color-primary)", 60, "var(--color-warning)"),
+  "std-prob": avlBlend("var(--color-accent)", 60, "var(--color-warning)"),
+  "std-os": avlBlend("var(--color-muted-foreground)", 60, "var(--color-primary)"),
+  "std-browser": avlBlend("var(--color-muted-foreground)", 60, "var(--color-info)"),
+  "std-composition": avlBlend("var(--color-accent)", 60, "var(--color-foreground)"),
+  "std-vec": avlBlend("var(--color-primary)", 60, "var(--color-background)"),
+  "std-geo": avlBlend("var(--color-success)", 50, "var(--color-info)"),
+  "std-grid": avlBlend("var(--color-info)", 60, "var(--color-background)"),
+  "std-anim": avlBlend("var(--color-accent)", 60, "var(--color-background)"),
+  "std-ease": avlBlend("var(--color-accent)", 50, "var(--color-info)"),
+  "std-noise": avlBlend("var(--color-muted-foreground)", 60, "var(--color-accent)"),
+  "std-path": avlBlend("var(--color-success)", 60, "var(--color-primary)"),
+  "ml-arch": avlBlend("var(--color-primary)", 70, "var(--color-foreground)"),
+  "ml-effect": avlBlend("var(--color-primary)", 50, "var(--color-error)"),
+  "ml-tensor": avlBlend("var(--color-primary)", 50, "var(--color-info)"),
+  "ml-graph": avlBlend("var(--color-primary)", 50, "var(--color-success)"),
+  "ml-contract": avlBlend("var(--color-primary)", 50, "var(--color-warning)"),
+  "ml-data": avlBlend("var(--color-primary)", 50, "var(--color-background)"),
+  "std-llm": avlBlend("var(--color-accent)", 70, "var(--color-primary)"),
+  "std-workspace": avlBlend("var(--color-muted-foreground)", 60, "var(--color-warning)"),
+  "std-session": avlBlend("var(--color-muted-foreground)", 60, "var(--color-success)"),
+  "std-memory": avlBlend("var(--color-info)", 60, "var(--color-accent)"),
+  "std-trace": "var(--color-muted-foreground)",
+  "std-behavior": avlBlend("var(--color-accent)", 60, "var(--color-success)"),
+  "std-integration": avlBlend("var(--color-warning)", 60, "var(--color-info)")
+};
+function effectZoneOf(head) {
+  if (isEffectOperator(head)) return EFFECT_OPERATOR_ZONE[head];
+  const slash = head.indexOf("/");
+  if (slash > 0) {
+    const prefix = head.slice(0, slash);
+    if (isEffectFamily(prefix)) return EFFECT_FAMILY_ZONE[prefix];
+  }
+  return null;
 }
 
-// lib/avl-theme.ts
-function avlTint(token, percent) {
-  return `color-mix(in srgb, ${token} ${percent}%, transparent)`;
+// lib/pressable.ts
+function clickElement(el) {
+  el.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
 }
-function avlBlend(token, percent, other) {
-  return `color-mix(in srgb, ${token} ${percent}%, ${other})`;
+function pressableProps(onPress, options = {}) {
+  if (!onPress) return {};
+  const { disabled = false } = options;
+  return {
+    role: "button",
+    tabIndex: disabled ? -1 : 0,
+    ...disabled ? { "aria-disabled": true } : void 0,
+    onClick: (e) => {
+      if (!disabled) onPress(e);
+    },
+    onKeyDown: (e) => {
+      if (disabled || e.target !== e.currentTarget) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        clickElement(e.currentTarget);
+      }
+    }
+  };
 }
-var AVL_INK = {
-  text: "var(--color-foreground)",
-  quiet: "var(--color-muted-foreground)",
-  line: "var(--color-border)",
-  surface: "var(--color-card)",
-  wash: "var(--color-muted)",
-  canvas: "var(--color-background)",
-  focus: "var(--color-primary)",
-  onFocus: "var(--color-primary-foreground)",
-  pass: "var(--color-success)",
-  fail: "var(--color-error)",
-  caution: "var(--color-warning)"
+function rowOpenControlProps(enabled) {
+  if (!enabled) return {};
+  return {
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: (e) => {
+      if (e.target !== e.currentTarget || e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      clickElement(e.currentTarget);
+    }
+  };
+}
+var STRETCHED_CONTROL = "after:absolute after:inset-0 after:content-[''] after:rounded-[inherit] focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-primary focus-visible:after:ring-inset";
+var STRETCHED_ABOVE = "relative z-[1]";
+
+// components/core/atoms/Box.tsx
+var paddingStyles = {
+  none: "p-0",
+  xs: "p-1",
+  sm: "p-2",
+  md: "p-4",
+  lg: "p-6",
+  xl: "p-8",
+  "2xl": "p-12"
+};
+var paddingXStyles = {
+  none: "px-0",
+  xs: "px-1",
+  sm: "px-2",
+  md: "px-4",
+  lg: "px-6",
+  xl: "px-8",
+  "2xl": "px-12"
 };
-var AVL_STROKE = {
-  hairline: 1,
-  wire: 1.5,
-  active: 2.5
+var paddingYStyles = {
+  none: "py-0",
+  xs: "py-1",
+  sm: "py-2",
+  md: "py-4",
+  lg: "py-6",
+  xl: "py-8",
+  "2xl": "py-12"
 };
-var AVL_FONT = {
-  body: "var(--font-family-body, var(--font-family))",
-  mono: "var(--font-family-mono, monospace)"
+var marginStyles = {
+  none: "m-0",
+  xs: "m-1",
+  sm: "m-2",
+  md: "m-4",
+  lg: "m-6",
+  xl: "m-8",
+  "2xl": "m-12",
+  auto: "m-auto"
 };
-function avlSeries(i) {
-  const base = THEME_SERIES[i % THEME_SERIES.length];
-  const band = Math.floor(i / THEME_SERIES.length) % 3;
-  if (band === 0) return base;
-  return avlBlend(base, 65, band === 1 ? AVL_INK.text : AVL_INK.canvas);
-}
-var STATE_COLORS = {
-  initial: { fill: avlTint("var(--color-success)", 12), border: "var(--color-success)" },
-  terminal: { fill: avlTint("var(--color-foreground)", 6), border: "var(--color-foreground)" },
-  hub: { fill: avlTint("var(--color-info)", 12), border: "var(--color-info)" },
-  default: { fill: avlTint("var(--color-muted-foreground)", 8), border: "var(--color-muted-foreground)" }
+var marginXStyles = {
+  none: "mx-0",
+  xs: "mx-1",
+  sm: "mx-2",
+  md: "mx-4",
+  lg: "mx-6",
+  xl: "mx-8",
+  "2xl": "mx-12",
+  auto: "mx-auto"
 };
-function getStateRole(isInitial, isTerminal, transitionCount, maxTransitionCount) {
-  if (isInitial) return "initial";
-  if (isTerminal) return "terminal";
-  if (transitionCount != null && maxTransitionCount != null && transitionCount === maxTransitionCount && transitionCount >= 3) return "hub";
-  return "default";
-}
-var CONNECTION_COLORS = {
-  forward: { color: "var(--color-muted-foreground)", width: 1.5, dash: "none" },
-  backward: { color: "var(--color-muted-foreground)", width: 1.5, dash: "5 4" },
-  selfLoop: { color: "var(--color-muted-foreground)", width: 1, dash: "3 2" },
-  emitListen: { color: "var(--color-warning)", width: 1.5, dash: "4 3" }
+var marginYStyles = {
+  none: "my-0",
+  xs: "my-1",
+  sm: "my-2",
+  md: "my-4",
+  lg: "my-6",
+  xl: "my-8",
+  "2xl": "my-12",
+  auto: "my-auto"
 };
-var EFFECT_CATEGORY_COLORS = {
-  ui: { color: "var(--color-accent)", bg: avlTint("var(--color-accent)", 10) },
-  data: { color: "var(--color-info)", bg: avlTint("var(--color-info)", 10) },
-  communication: { color: "var(--color-warning)", bg: avlTint("var(--color-warning)", 10) },
-  lifecycle: { color: "var(--color-success)", bg: avlTint("var(--color-success)", 10) },
-  control: { color: "var(--color-muted-foreground)", bg: avlTint("var(--color-muted-foreground)", 10) },
-  async: { color: avlBlend("var(--color-info)", 50, "var(--color-accent)"), bg: avlTint(avlBlend("var(--color-info)", 50, "var(--color-accent)"), 10) },
-  compute: { color: "var(--color-primary)", bg: avlTint("var(--color-primary)", 10) },
-  system: { color: avlBlend("var(--color-muted-foreground)", 60, "var(--color-primary)"), bg: avlTint("var(--color-muted-foreground)", 10) }
+var bgStyles = {
+  transparent: "bg-transparent",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-foreground",
+  accent: "bg-accent text-accent-foreground",
+  surface: "bg-card",
+  overlay: "bg-card/80 backdrop-blur-sm"
 };
-var EFFECT_OPERATOR_CATEGORY = {
-  "render-ui": "ui",
-  "navigate": "ui",
-  "navigate-back": "ui",
-  "set": "data",
-  "persist": "data",
-  "fetch": "data",
-  "fetch-stream": "data",
-  "ref": "data",
-  "deref": "data",
-  "swap": "data",
-  "watch": "data",
-  "emit": "communication",
-  "notify": "communication",
-  "send-server": "communication",
-  "call-service": "communication",
-  "integration/http": "communication",
-  "integration/github-get-repo": "communication",
-  "integration/github-create-issue": "communication",
-  "spawn": "lifecycle",
-  "despawn": "lifecycle",
-  "do": "control",
-  "if": "control",
-  "when": "control",
-  "let": "control",
-  "log": "control",
-  "atomic": "control",
-  "wait": "async",
-  "async/delay": "async",
-  "async/debounce": "async",
-  "async/throttle": "async",
-  "async/interval": "async",
-  "async/race": "async",
-  "async/all": "async",
-  "async/sequence": "async",
-  "async/timeout": "async",
-  "async/retry": "async",
-  "forward": "compute",
-  "train": "compute",
-  "evaluate": "compute",
-  "checkpoint/save": "compute",
-  "checkpoint/load": "compute",
-  "nn/setWeights": "compute",
-  "train/loop": "compute",
-  "train/step": "compute",
-  "train/clipGradients": "compute",
-  "train/clipWeights": "compute",
-  "train/sgd": "compute",
-  "train/adam": "compute",
-  "prob/seed": "compute",
-  "prob/condition": "compute",
-  "workspace/write-orbital": "system",
-  "workspace/write-file": "system",
-  "workspace/write-schema": "system",
-  "workspace/write-plan": "system",
-  "workspace/archive-orbital": "system",
-  "lolo/emit-body": "system"
+var roundedStyles = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-xl",
+  full: "rounded-full"
 };
-var EFFECT_FAMILY_CATEGORY = {
-  agent: "system",
-  os: "system",
-  browser: "system",
-  llm: "system",
-  behavior: "system",
-  validate: "control",
-  session: "system",
-  compose: "system",
-  trace: "control",
-  memory: "data",
-  application: "system"
+var shadowStyles = {
+  none: "shadow-none",
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg",
+  xl: "shadow-lg"
+};
+var displayStyles = {
+  block: "block",
+  inline: "inline",
+  "inline-block": "inline-block",
+  flex: "flex",
+  "inline-flex": "inline-flex",
+  grid: "grid"
+};
+var overflowStyles = {
+  auto: "overflow-auto",
+  hidden: "overflow-hidden",
+  visible: "overflow-visible",
+  scroll: "overflow-scroll"
+};
+var positionStyles = {
+  relative: "relative",
+  absolute: "absolute",
+  fixed: "fixed",
+  sticky: "sticky"
+};
+var Box = React.forwardRef(
+  ({
+    padding,
+    paddingX,
+    paddingY,
+    margin,
+    marginX,
+    marginY,
+    bg = "transparent",
+    border = false,
+    rounded = "none",
+    shadow = "none",
+    display,
+    fullWidth = false,
+    fullHeight = false,
+    overflow,
+    position,
+    className,
+    children,
+    as: Component = "div",
+    action,
+    actionPayload,
+    hoverEvent,
+    tapReveal = true,
+    maxWidth,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onPointerDown,
+    ...rest
+  }, ref) => {
+    const eventBus = useEventBus();
+    const { override: themeOverride } = useThemeScope();
+    const declaredTheme = rest["data-theme"];
+    const dataTheme = declaredTheme !== void 0 && themeOverride ? themeOverride : declaredTheme;
+    const handleClick = useCallback((e) => {
+      if (action) {
+        e.stopPropagation();
+        eventBus.emit(`UI:${action}`, actionPayload ?? {});
+      }
+      onClick?.(e);
+    }, [action, actionPayload, eventBus, onClick]);
+    const handleMouseEnter = useCallback((e) => {
+      if (hoverEvent) {
+        eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
+      }
+      onMouseEnter?.(e);
+    }, [hoverEvent, eventBus, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+      if (hoverEvent) {
+        eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
+      }
+      onMouseLeave?.(e);
+    }, [hoverEvent, eventBus, onMouseLeave]);
+    const { triggerProps } = useTapReveal({
+      enabled: tapReveal && !!hoverEvent,
+      onReveal: useCallback(() => {
+        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
+      }, [hoverEvent, eventBus]),
+      onDismiss: useCallback(() => {
+        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
+      }, [hoverEvent, eventBus])
+    });
+    const handlePointerDown = useCallback((e) => {
+      if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
+      onPointerDown?.(e);
+    }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
+    const isClickable = action || onClick;
+    const actionControl = action && rest.role === void 0 && rest.tabIndex === void 0 ? pressableProps(handleClick) : {};
+    return React.createElement(
+      Component,
+      {
+        ref,
+        className: cn(
+          padding && paddingStyles[padding],
+          paddingX && paddingXStyles[paddingX],
+          paddingY && paddingYStyles[paddingY],
+          margin && marginStyles[margin],
+          marginX && marginXStyles[marginX],
+          marginY && marginYStyles[marginY],
+          bgStyles[bg],
+          border && "border-[length:var(--border-width)] border-border",
+          roundedStyles[rounded],
+          shadowStyles[shadow],
+          display && displayStyles[display],
+          fullWidth && "w-full",
+          fullHeight && "h-full",
+          overflow && overflowStyles[overflow],
+          position && positionStyles[position],
+          isClickable && "cursor-pointer",
+          className
+        ),
+        onClick: isClickable ? handleClick : void 0,
+        ...actionControl,
+        onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
+        onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
+        onPointerDown: hoverEvent && tapReveal || onPointerDown ? handlePointerDown : void 0,
+        style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
+        ...rest,
+        "data-theme": dataTheme
+      },
+      children
+    );
+  }
+);
+Box.displayName = "Box";
+var gapStyles = {
+  none: "gap-0",
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8",
+  "2xl": "gap-12"
 };
-var EFFECT_OPERATOR_ZONE = {
-  "render-ui": "screen",
-  "navigate": "route",
-  "navigate-back": "route",
-  "set": "entity",
-  "swap": "entity",
-  "ref": "store",
-  "deref": "store",
-  "watch": "store",
-  "persist": "store",
-  "fetch": "store",
-  "fetch-stream": "store",
-  "emit": "bus",
-  "send-server": "bus",
-  "notify": "toast",
-  "call-service": "remote",
-  "integration/http": "remote",
-  "integration/github-get-repo": "remote",
-  "integration/github-create-issue": "remote",
-  "spawn": "instances",
-  "despawn": "instances",
-  "do": "flow",
-  "if": "flow",
-  "when": "flow",
-  "let": "flow",
-  "log": "flow",
-  "atomic": "flow",
-  "wait": "timer",
-  "async/delay": "timer",
-  "async/debounce": "timer",
-  "async/throttle": "timer",
-  "async/interval": "timer",
-  "async/race": "timer",
-  "async/all": "timer",
-  "async/sequence": "timer",
-  "async/timeout": "timer",
-  "async/retry": "timer",
-  "forward": "model",
-  "train": "model",
-  "evaluate": "model",
-  "checkpoint/save": "model",
-  "checkpoint/load": "model",
-  "nn/setWeights": "model",
-  "train/loop": "model",
-  "train/step": "model",
-  "train/clipGradients": "model",
-  "train/clipWeights": "model",
-  "train/sgd": "model",
-  "train/adam": "model",
-  "prob/seed": "model",
-  "prob/condition": "model",
-  "workspace/write-orbital": "system",
-  "workspace/write-file": "system",
-  "workspace/write-schema": "system",
-  "workspace/write-plan": "system",
-  "workspace/archive-orbital": "system",
-  "lolo/emit-body": "system"
+var alignStyles = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline"
 };
-var EFFECT_FAMILY_ZONE = {
-  agent: "system",
-  os: "system",
-  browser: "system",
-  llm: "remote",
-  behavior: "system",
-  validate: "flow",
-  session: "system",
-  compose: "system",
-  trace: "flow",
-  memory: "store",
-  application: "system"
+var justifyStyles = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly"
 };
-function isEffectOperator(head) {
-  return head in EFFECT_OPERATOR_CATEGORY;
-}
-function isEffectFamily(prefix) {
-  return prefix in EFFECT_FAMILY_CATEGORY;
-}
-function effectCategoryOf(head) {
-  if (isEffectOperator(head)) return EFFECT_OPERATOR_CATEGORY[head];
-  const slash = head.indexOf("/");
-  if (slash > 0) {
-    const prefix = head.slice(0, slash);
-    if (isEffectFamily(prefix)) return EFFECT_FAMILY_CATEGORY[prefix];
-  }
-  return null;
-}
-function asEffectOperator(head) {
-  return isEffectOperator(head) ? head : null;
-}
-var OPERATOR_CATEGORY_COLORS = {
-  "arithmetic": "var(--color-primary)",
-  "comparison": "var(--color-warning)",
-  "logic": "var(--color-accent)",
-  "control": "var(--color-error)",
-  "effect": avlBlend("var(--color-warning)", 60, "var(--color-error)"),
-  "collection": "var(--color-info)",
-  "std-math": "var(--color-primary)",
-  "std-str": "var(--color-success)",
-  "std-array": "var(--color-info)",
-  "std-object": avlBlend("var(--color-info)", 60, "var(--color-foreground)"),
-  "std-validate": "var(--color-warning)",
-  "std-json": avlBlend("var(--color-success)", 60, "var(--color-foreground)"),
-  "std-time": avlBlend("var(--color-info)", 50, "var(--color-success)"),
-  "std-format": avlBlend("var(--color-success)", 60, "var(--color-background)"),
-  "std-async": avlBlend("var(--color-accent)", 50, "var(--color-error)"),
-  "std-nn": avlBlend("var(--color-primary)", 60, "var(--color-accent)"),
-  "std-tensor": avlBlend("var(--color-primary)", 60, "var(--color-info)"),
-  "std-train": avlBlend("var(--color-primary)", 60, "var(--color-warning)"),
-  "std-prob": avlBlend("var(--color-accent)", 60, "var(--color-warning)"),
-  "std-os": avlBlend("var(--color-muted-foreground)", 60, "var(--color-primary)"),
-  "std-browser": avlBlend("var(--color-muted-foreground)", 60, "var(--color-info)"),
-  "std-composition": avlBlend("var(--color-accent)", 60, "var(--color-foreground)"),
-  "std-vec": avlBlend("var(--color-primary)", 60, "var(--color-background)"),
-  "std-geo": avlBlend("var(--color-success)", 50, "var(--color-info)"),
-  "std-grid": avlBlend("var(--color-info)", 60, "var(--color-background)"),
-  "std-anim": avlBlend("var(--color-accent)", 60, "var(--color-background)"),
-  "std-ease": avlBlend("var(--color-accent)", 50, "var(--color-info)"),
-  "std-noise": avlBlend("var(--color-muted-foreground)", 60, "var(--color-accent)"),
-  "std-path": avlBlend("var(--color-success)", 60, "var(--color-primary)"),
-  "ml-arch": avlBlend("var(--color-primary)", 70, "var(--color-foreground)"),
-  "ml-effect": avlBlend("var(--color-primary)", 50, "var(--color-error)"),
-  "ml-tensor": avlBlend("var(--color-primary)", 50, "var(--color-info)"),
-  "ml-graph": avlBlend("var(--color-primary)", 50, "var(--color-success)"),
-  "ml-contract": avlBlend("var(--color-primary)", 50, "var(--color-warning)"),
-  "ml-data": avlBlend("var(--color-primary)", 50, "var(--color-background)"),
-  "std-llm": avlBlend("var(--color-accent)", 70, "var(--color-primary)"),
-  "std-workspace": avlBlend("var(--color-muted-foreground)", 60, "var(--color-warning)"),
-  "std-session": avlBlend("var(--color-muted-foreground)", 60, "var(--color-success)"),
-  "std-memory": avlBlend("var(--color-info)", 60, "var(--color-accent)"),
-  "std-trace": "var(--color-muted-foreground)",
-  "std-behavior": avlBlend("var(--color-accent)", 60, "var(--color-success)"),
-  "std-integration": avlBlend("var(--color-warning)", 60, "var(--color-info)")
+var Stack = ({
+  direction = "vertical",
+  gap = "md",
+  align = "stretch",
+  justify = "start",
+  wrap = false,
+  reverse = false,
+  flex = false,
+  className,
+  style,
+  children,
+  as: Component = "div",
+  onClick,
+  onKeyDown,
+  role,
+  tabIndex,
+  action,
+  actionPayload,
+  responsive = false,
+  ...rest
+}) => {
+  const eventBus = useEventBus();
+  const handleClick = (e) => {
+    if (action) {
+      eventBus.emit(`UI:${action}`, actionPayload ?? {});
+    }
+    onClick?.(e);
+  };
+  const isHorizontal = direction === "horizontal";
+  const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
+  return React.createElement(
+    Component,
+    {
+      ...domPassthrough(rest),
+      className: cn(
+        "flex",
+        directionClass,
+        gapStyles[gap],
+        alignStyles[align],
+        justifyStyles[justify],
+        wrap && "flex-wrap",
+        flex && "flex-1",
+        className
+      ),
+      style,
+      onClick: action || onClick ? handleClick : void 0,
+      onKeyDown,
+      role,
+      tabIndex
+    },
+    children
+  );
 };
-function effectZoneOf(head) {
-  if (isEffectOperator(head)) return EFFECT_OPERATOR_ZONE[head];
-  const slash = head.indexOf("/");
-  if (slash > 0) {
-    const prefix = head.slice(0, slash);
-    if (isEffectFamily(prefix)) return EFFECT_FAMILY_ZONE[prefix];
-  }
-  return null;
-}
+var VStack = (props) => /* @__PURE__ */ jsx(Stack, { direction: "vertical", ...props });
+var HStack = (props) => /* @__PURE__ */ jsx(Stack, { direction: "horizontal", ...props });
 function instanceOf(orbital, orbitalId, ref) {
   const at = orbitalId === void 0 ? { orbital } : { orbital, orbitalId };
   if (isInlineTrait(ref)) return { ...at, name: ref.name, trait: ref };
@@ -1996,4 +1999,4 @@ function rotatePoint(p, center, radians) {
   return { x: center.x + dx * cos - dy * sin, y: center.y + dx * sin + dy * cos };
 }
 
-export { AVL_FONT, AVL_INK, AVL_STROKE, Box, CONFETTI_BURST_KEYFRAMES, CONNECTION_COLORS, DrawFxLayer, DrawGroup, DrawMesh, DrawShape, DrawSkinnedMesh, DrawableRegistryContext, EFFECT_CATEGORY_COLORS, HStack, OPERATOR_CATEGORY_COLORS, SPRITE_FALLBACK_FILL, SPRITE_FALLBACK_STROKE, STATE_COLORS, Stack, THEME_SERIES, VStack, applyMeshAnimation, applyShapeAnimation, asEffectOperator, atlasFailed, atlasUrlOf, avlBlend, avlSeries, avlTint, blit, buildHitIndex, clampSegments, collectDrawnItems, createConfettiParticles, effectCategoryOf, effectZoneOf, expandFxLayer, fxHash01, getAtlas, getImageStatus, getOrLoadImage, getStateRole, hitTestSprites, isAnimatedGroup, isAnimatedMesh, isAnimatedShape, isAtlasAsset, isSpriteSheetAtlas, isValidScenePos, paintShape, paintSkinnedMesh, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, polyhedronBounds, pressableProps, resolveAssetSource, resolveThemeColor, rowActivationProps, spriteAssetState, spriteRect, subRectFor, traitEventWires, traitLevelFromTrait, traitTransitionRenderUi, withPreviewPosition };
+export { AVL_FONT, AVL_INK, AVL_STROKE, Box, CONFETTI_BURST_KEYFRAMES, CONNECTION_COLORS, DrawFxLayer, DrawGroup, DrawMesh, DrawShape, DrawSkinnedMesh, DrawableRegistryContext, EFFECT_CATEGORY_COLORS, HStack, OPERATOR_CATEGORY_COLORS, SPRITE_FALLBACK_FILL, SPRITE_FALLBACK_STROKE, STATE_COLORS, STRETCHED_ABOVE, STRETCHED_CONTROL, Stack, THEME_SERIES, VStack, applyMeshAnimation, applyShapeAnimation, asEffectOperator, atlasFailed, atlasUrlOf, avlBlend, avlSeries, avlTint, blit, buildHitIndex, clampSegments, collectDrawnItems, createConfettiParticles, effectCategoryOf, effectZoneOf, expandFxLayer, fxHash01, getAtlas, getImageStatus, getOrLoadImage, getStateRole, hitTestSprites, isAnimatedGroup, isAnimatedMesh, isAnimatedShape, isAtlasAsset, isSpriteSheetAtlas, isValidScenePos, paintShape, paintSkinnedMesh, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, polyhedronBounds, pressableProps, resolveAssetSource, resolveThemeColor, rowOpenControlProps, spriteAssetState, spriteRect, subRectFor, traitEventWires, traitLevelFromTrait, traitTransitionRenderUi, withPreviewPosition };