@almadar/ui 6.59.0 → 6.62.0

package/dist/lib/drawable/three/index.cjs

@@ -2238,6 +2238,10 @@ function resolveCanvasTheme(scope) {
       const c = r.color(toneVar(tone));
       tones[tone] = c ? colorCss(c) : "currentColor";
     }
+    const surface = (name) => {
+      const c = r.color(name);
+      return c ? colorCss(c) : "transparent";
+    };
     const ground = r.color("--surface-diagram");
     const text = {};
     const TEXT_FALLBACK = { xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24 };
@@ -2245,6 +2249,11 @@ function resolveCanvasTheme(scope) {
     const body = r.family("--font-family-body", r.family("--font-family", "system-ui, sans-serif"));
     return {
       ground: ground ? colorCss(ground) : "transparent",
+      surfaces: {
+        muted: surface("--color-muted"),
+        card: surface("--color-card"),
+        onPrimary: surface("--color-primary-foreground")
+      },
       tones,
       series: SERIES_TONES.map((t) => tones[t]),
       strokes: {
@@ -2332,6 +2341,25 @@ function useCanvasTheme(scopeRef) {
   }, [appliedTheme, scopeKey, scopeRef]);
   return state;
 }
+function useOnScreen(ref, margin = "200px") {
+  const [intersecting, setIntersecting] = React3.useState(true);
+  const [pageVisible, setPageVisible] = React3.useState(true);
+  React3.useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting), { rootMargin: margin });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref, margin]);
+  React3.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const update = () => setPageVisible(document.visibilityState !== "hidden");
+    update();
+    document.addEventListener("visibilitychange", update);
+    return () => document.removeEventListener("visibilitychange", update);
+  }, []);
+  return intersecting && pageVisible;
+}
 
 // lib/drawable/themeDrawables.ts
 function opt(value, resolve) {
@@ -2540,6 +2568,7 @@ var Canvas3DHost = React3.forwardRef(
     moveEvent
   }, ref) => {
     const containerRef = React3.useRef(null);
+    const onScreen = useOnScreen(containerRef);
     const controlsRef = React3.useRef(null);
     const [internalError, setInternalError] = React3.useState(null);
     const eventBus = useEventBus();
@@ -2845,6 +2874,7 @@ var Canvas3DHost = React3.forwardRef(
             children: /* @__PURE__ */ jsxRuntime.jsxs(
               fiber.Canvas,
               {
+                frameloop: onScreen ? "always" : "never",
                 shadows,
                 flat: lighting?.toneMapping === "none",
                 gl: { preserveDrawingBuffer: true },
@@ -4177,6 +4207,44 @@ var SpatialHashGrid = class {
     };
   }
 };
+
+// lib/bandShapes.ts
+var shape = (d) => `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='${d}'/></svg>")`;
+var BAND_SHAPES = {
+  wave: shape("M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z"),
+  arc: shape("M0 100 Q720 0 1440 100 Z"),
+  tilt: shape("M0 100 L1440 0 V100 Z"),
+  step: shape("M0 100 V75 H360 V50 H720 V25 H1080 V0 H1440 V100 Z"),
+  scallop: shape("M0 100 V40 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 V100 Z")
+};
+var BAND_EDGE_HEIGHT = "clamp(24px, 6vw, 96px)";
+var BAND_ACCENT_FALLBACK = "linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 12%, var(--color-background)), var(--color-background))";
+var BAND_EDGE_FILL = {
+  background: "var(--surface-page-image, none), var(--color-background)",
+  muted: "var(--color-muted)",
+  surface: "var(--color-card)",
+  gradient: `var(--surface-accent-image, ${BAND_ACCENT_FALLBACK}), var(--color-muted)`,
+  inverse: "var(--color-foreground)"
+};
+function bandEdgeMask(edge) {
+  return edge === "curve" ? "var(--surface-edge-mask, none)" : BAND_SHAPES[edge];
+}
+function bandEdgeHeight(edge) {
+  return edge === "curve" ? `var(--surface-edge-height, ${BAND_EDGE_HEIGHT})` : BAND_EDGE_HEIGHT;
+}
+function bandEdgeLayerStyle(edge, side, flip, color) {
+  const mask = bandEdgeMask(edge);
+  const turn = side === "top" ? flip ? "scaleY(-1)" : "rotate(180deg)" : flip ? "scaleX(-1)" : void 0;
+  const style = { height: bandEdgeHeight(edge), background: BAND_EDGE_FILL[color], maskImage: mask, WebkitMaskImage: mask, transform: turn };
+  if (color === "background") {
+    style.backgroundSize = "var(--surface-page-image-size, auto), auto";
+    style.backgroundAttachment = "fixed";
+  }
+  return style;
+}
+function bandPadding(basePad, edge) {
+  return edge === "none" ? void 0 : `calc(${basePad} + ${bandEdgeHeight(edge)})`;
+}
 function useTapReveal(options = {}) {
   const { onReveal, onDismiss, refs, enabled = true } = options;
   const [revealed, setRevealed] = React3.useState(false);
@@ -4245,7 +4313,237 @@ function pressableProps(onPress, options = {}) {
   };
 }
 
-// components/core/atoms/Box.tsx
+// lib/domPassthrough.ts
+var GLOBAL_ATTRIBUTES = /* @__PURE__ */ new Set(["role", "id", "lang", "dir", "tabIndex"]);
+function domPassthrough(props) {
+  const out = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (key.startsWith("aria-") || key.startsWith("data-") || GLOBAL_ATTRIBUTES.has(key)) {
+      if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === void 0) {
+        out[key] = value;
+      }
+    }
+  }
+  return out;
+}
+var motionEnabledCache = null;
+function isMotionEnabled() {
+  if (typeof document === "undefined") return true;
+  if (motionEnabledCache !== null) return motionEnabledCache;
+  const v = getComputedStyle(document.documentElement).getPropertyValue("--motion-enable").trim().toLowerCase();
+  motionEnabledCache = v !== "off";
+  return motionEnabledCache;
+}
+
+// lib/motion-tokens.ts
+function cssTimeMs(value) {
+  const v = value.trim();
+  if (v.endsWith("ms")) return Number.parseFloat(v);
+  if (v.endsWith("s")) return Number.parseFloat(v) * 1e3;
+  return Number.NaN;
+}
+function tokenAt(el, name) {
+  for (let at = el; at !== null; at = at.parentElement) {
+    const value = getComputedStyle(at).getPropertyValue(name).trim();
+    if (value !== "") return value;
+  }
+  return "";
+}
+function motionTiming(durationToken, easingToken, scope) {
+  const duration = cssTimeMs(tokenAt(scope ?? document.documentElement, durationToken));
+  const easing = tokenAt(scope ?? document.documentElement, easingToken);
+  const reduced = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  if (!isMotionEnabled() || reduced || !Number.isFinite(duration) || easing === "") return void 0;
+  return { duration, easing };
+}
+function layoutScale(el) {
+  const layoutWidth = el instanceof HTMLElement ? el.offsetWidth : 0;
+  const screenWidth = el.getBoundingClientRect().width;
+  return layoutWidth > 0 && screenWidth > 0 ? screenWidth / layoutWidth : 1;
+}
+
+// lib/animate-changes.ts
+function ownMotion(el) {
+  return el.closest("[data-item-move]") !== null || /\balmadar-enter-/.test(el.getAttribute("class") ?? "");
+}
+function boxesOf(el) {
+  return getComputedStyle(el).display === "contents" ? boxedChildren(el) : [el];
+}
+function boxedChildren(el) {
+  return [...el.children].flatMap(boxesOf);
+}
+var GHOST_STYLE = ["font", "letterSpacing", "lineHeight", "color", "textAlign", "whiteSpace", "textTransform"];
+function roll(el, oldText, timing) {
+  const box = el.getBoundingClientRect();
+  const scale2 = layoutScale(el);
+  const computed = getComputedStyle(el);
+  const holder = document.createElement("span");
+  holder.setAttribute("aria-hidden", "true");
+  Object.assign(holder.style, {
+    position: "fixed",
+    left: `${box.left}px`,
+    top: `${box.top}px`,
+    width: `${box.width / scale2}px`,
+    height: `${box.height / scale2}px`,
+    transform: scale2 === 1 ? "" : `scale(${scale2})`,
+    transformOrigin: "top left",
+    pointerEvents: "none",
+    zIndex: "2147483647"
+  });
+  const ghost = document.createElement("span");
+  ghost.setAttribute("data-change-ghost", "");
+  ghost.setAttribute("aria-hidden", "true");
+  ghost.textContent = oldText;
+  for (const prop of GHOST_STYLE) ghost.style[prop] = computed[prop];
+  Object.assign(ghost.style, { display: "block", width: "100%", height: "100%", overflow: "visible" });
+  holder.appendChild(ghost);
+  document.body.appendChild(holder);
+  const out = ghost.animate(
+    [{ opacity: 1, transform: "none" }, { opacity: 0, transform: "translateY(-40%)", offset: 0.5 }, { opacity: 0, transform: "translateY(-40%)" }],
+    timing
+  );
+  if (out === void 0) holder.remove();
+  else {
+    out.addEventListener("finish", () => holder.remove());
+    out.addEventListener("cancel", () => holder.remove());
+  }
+  el.animate(
+    [{ opacity: 0, transform: "translateY(40%)" }, { opacity: 0, transform: "translateY(40%)", offset: 0.4 }, { opacity: 1, transform: "none" }],
+    timing
+  );
+}
+var textOnly = (el) => el instanceof HTMLElement && el.childNodes.length > 0 && [...el.childNodes].every((n) => n.nodeType === Node.TEXT_NODE);
+function settle(root, added, changed) {
+  const timing = motionTiming("--duration-normal", "--easing-emphasized", root);
+  if (timing === void 0) return;
+  for (const el of added) {
+    if (ownMotion(el) || el.parentElement !== null && [...added].some((other) => other !== el && other.contains(el))) continue;
+    for (const box of boxesOf(el)) {
+      if (ownMotion(box)) continue;
+      box.animate([{ opacity: 0, transform: "translateY(6px)" }, { opacity: 1, transform: "none" }], timing);
+    }
+  }
+  for (const [el, oldText] of changed) {
+    if (ownMotion(el) || [...added].some((a) => a.contains(el))) continue;
+    if (oldText !== void 0 && oldText !== el.textContent && textOnly(el)) roll(el, oldText, timing);
+    else el.animate([{ opacity: 0.25 }, { opacity: 1 }], timing);
+  }
+}
+function blocks(root) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const wrapper of root.querySelectorAll("[data-pattern]")) {
+    for (const box of boxesOf(wrapper)) if (!ownMotion(box)) seen.add(box);
+  }
+  return [...seen];
+}
+function glidePushed(root, places) {
+  const timing = motionTiming("--duration-normal", "--easing-emphasized", root);
+  const origin = root.getBoundingClientRect();
+  const applied = /* @__PURE__ */ new Map();
+  const present = /* @__PURE__ */ new Set();
+  for (const el of blocks(root)) {
+    present.add(el);
+    if ((el.getAnimations?.() ?? []).length > 0) {
+      places.delete(el);
+      continue;
+    }
+    const box = el.getBoundingClientRect();
+    const now = { x: box.left - origin.left, y: box.top - origin.top };
+    const was = places.get(el);
+    places.set(el, now);
+    if (was === void 0 || timing === void 0) continue;
+    let inherited = { x: 0, y: 0 };
+    for (let up = el.parentElement; up !== null && up !== root; up = up.parentElement) {
+      const a = applied.get(up);
+      if (a !== void 0) {
+        inherited = a;
+        break;
+      }
+    }
+    const dx = was.x - now.x - inherited.x;
+    const dy = was.y - now.y - inherited.y;
+    if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) {
+      if (inherited.x !== 0 || inherited.y !== 0) applied.set(el, inherited);
+      continue;
+    }
+    const scale2 = layoutScale(el);
+    el.animate([{ transform: `translate(${dx / scale2}px, ${dy / scale2}px)` }, { transform: "none" }], { ...timing, composite: "add" });
+    applied.set(el, { x: inherited.x + dx, y: inherited.y + dy });
+  }
+  for (const el of places.keys()) if (!present.has(el)) places.delete(el);
+}
+function easeHeight(root) {
+  if (typeof ResizeObserver === "undefined") return () => void 0;
+  let rest;
+  let glide;
+  const sizes = new ResizeObserver(() => {
+    const scale2 = layoutScale(root);
+    const shown = root.getBoundingClientRect().height / scale2;
+    const gliding = glide !== void 0 && glide.playState === "running";
+    glide?.cancel();
+    glide = void 0;
+    const height = root.getBoundingClientRect().height / scale2;
+    const from = gliding ? shown : rest;
+    rest = height;
+    const timing = motionTiming("--duration-normal", "--easing-emphasized", root);
+    if (from === void 0 || timing === void 0 || Math.abs(from - height) < 1) return;
+    glide = root.animate(
+      [{ height: `${from}px`, overflow: "clip" }, { height: `${height}px`, overflow: "clip" }],
+      timing
+    ) ?? void 0;
+  });
+  let watched = [];
+  const watch = () => {
+    const next = boxedChildren(root);
+    if (next.length === watched.length && next.every((el, i) => el === watched[i])) return;
+    watched = next;
+    sizes.disconnect();
+    for (const el of next) sizes.observe(el);
+  };
+  watch();
+  const children = new MutationObserver(watch);
+  children.observe(root, { childList: true, subtree: true });
+  return () => {
+    children.disconnect();
+    sizes.disconnect();
+  };
+}
+function useAnimateChanges(ref, enabled) {
+  React3.useEffect(() => {
+    const root = ref.current;
+    if (!enabled || root === null) return;
+    return easeHeight(root);
+  }, [ref, enabled]);
+  React3.useEffect(() => {
+    const root = ref.current;
+    if (!enabled || root === null || typeof MutationObserver === "undefined") return;
+    const observer = new MutationObserver((records) => {
+      const added = /* @__PURE__ */ new Set();
+      const changed = /* @__PURE__ */ new Map();
+      for (const record of records) {
+        if (record.type === "childList") {
+          for (const node of record.addedNodes) {
+            if (node instanceof Element) added.add(node);
+            else if (node.nodeType === Node.TEXT_NODE && node.parentElement !== null && changed.get(node.parentElement) === void 0) {
+              const removed = [...record.removedNodes].filter((n) => n.nodeType === Node.TEXT_NODE);
+              changed.set(node.parentElement, removed.length > 0 ? removed.map((n) => n.textContent ?? "").join("") : void 0);
+            }
+          }
+        } else if (record.type === "characterData") {
+          const el = record.target.parentElement;
+          if (el === null || changed.get(el) !== void 0) continue;
+          changed.set(el, [...el.childNodes].map((n) => n === record.target ? record.oldValue ?? "" : n.textContent ?? "").join(""));
+        }
+      }
+      glidePushed(root, places);
+      settle(root, added, changed);
+    });
+    const places = /* @__PURE__ */ new Map();
+    glidePushed(root, places);
+    observer.observe(root, { subtree: true, childList: true, characterData: true, characterDataOldValue: true });
+    return () => observer.disconnect();
+  }, [ref, enabled]);
+}
 var paddingStyles = {
   none: "p-0",
   xs: "p-1",
@@ -4310,7 +4608,18 @@ var bgStyles = {
   muted: "bg-muted text-foreground",
   accent: "bg-accent text-accent-foreground",
   surface: "bg-card",
-  overlay: "bg-card/80 backdrop-blur-sm"
+  overlay: "bg-card/80 backdrop-blur-sm",
+  gradient: "band-gradient",
+  inverse: "band-inverse"
+};
+var paddingRem = {
+  none: "0rem",
+  xs: "0.25rem",
+  sm: "0.5rem",
+  md: "1rem",
+  lg: "1.5rem",
+  xl: "2rem",
+  "2xl": "3rem"
 };
 var roundedStyles = {
   none: "rounded-none",
@@ -4373,6 +4682,13 @@ var Box = React3__default.default.forwardRef(
     hoverEvent,
     tapReveal = true,
     maxWidth,
+    edgeTop = "none",
+    edgeBottom = "none",
+    edgeColor = "background",
+    edgeFlip = false,
+    texture = false,
+    animateChanges = false,
+    backdrop,
     onClick,
     onMouseEnter,
     onMouseLeave,
@@ -4380,6 +4696,13 @@ var Box = React3__default.default.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
+    const ownRef = React3.useRef(null);
+    useAnimateChanges(ownRef, animateChanges);
+    const setRef = React3.useCallback((node) => {
+      ownRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref !== null) ref.current = node;
+    }, [ref]);
     const { override: themeOverride } = context.useThemeScope();
     const declaredTheme = rest["data-theme"];
     const dataTheme = declaredTheme !== void 0 && themeOverride ? themeOverride : declaredTheme;
@@ -4415,12 +4738,25 @@ var Box = React3__default.default.forwardRef(
       if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
       onPointerDown?.(e);
     }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
+    const isBand = backdrop != null || texture || edgeTop !== "none" || edgeBottom !== "none";
+    const padKey = paddingY ?? padding;
+    const bandStyle = {};
+    const padTop = padKey ? bandPadding(paddingRem[padKey], edgeTop) : void 0;
+    const padBottom = padKey ? bandPadding(paddingRem[padKey], edgeBottom) : void 0;
+    if (padTop) bandStyle.paddingTop = padTop;
+    if (padBottom) bandStyle.paddingBottom = padBottom;
+    const bandLayers = isBand ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      backdrop != null && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-backdrop", children: backdrop }),
+      texture && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-texture" }),
+      edgeTop !== "none" && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-edge band-edge-top", style: bandEdgeLayerStyle(edgeTop, "top", edgeFlip, edgeColor) }),
+      edgeBottom !== "none" && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-edge band-edge-bottom", style: bandEdgeLayerStyle(edgeBottom, "bottom", edgeFlip, edgeColor) })
+    ] }) : null;
     const isClickable = action || onClick;
     const actionControl = action && rest.role === void 0 && rest.tabIndex === void 0 ? pressableProps(handleClick) : {};
     return React3__default.default.createElement(
       Component2,
       {
-        ref,
+        ref: setRef,
         className: cn(
           padding && paddingStyles[padding],
           paddingX && paddingXStyles[paddingX],
@@ -4438,6 +4774,7 @@ var Box = React3__default.default.forwardRef(
           overflow && overflowStyles[overflow],
           position && positionStyles[position],
           isClickable && "cursor-pointer",
+          isBand && "band",
           className
         ),
         onClick: isClickable ? handleClick : void 0,
@@ -4445,11 +4782,15 @@ var Box = React3__default.default.forwardRef(
         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,
+        style: maxWidth || isBand ? { ...maxWidth ? { maxWidth } : {}, ...bandStyle, ...rest.style } : rest.style,
         ...rest,
-        "data-theme": dataTheme
+        "data-theme": dataTheme,
+        "data-motion": animateChanges ? "presentation" : void 0
       },
-      children
+      isBand ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        bandLayers,
+        children
+      ] }) : children
     );
   }
 );
@@ -4591,7 +4932,6 @@ var en_default = {
   "aria.upvote": "Upvote",
   "aria.downvote": "Downvote",
   "aria.qrScanner": "QR scanner",
-  "aria.mockScanDev": "Mock scan (dev)",
   "aria.openMenu": "Open menu",
   "aria.closeMenu": "Close menu",
   "aria.openSidebar": "Open sidebar",
@@ -4789,7 +5129,6 @@ var en_default = {
   "qrScanner.pauseScanning": "Pause scanning",
   "qrScanner.switchToFrontCamera": "Switch to front camera",
   "qrScanner.switchToRearCamera": "Switch to rear camera",
-  "qrScanner.mockScan": "Mock Scan",
   "docSearch.placeholder": "Search documentation...",
   "stateMachine.loading": "Loading state machine\u2026",
   "stateMachine.noStateMachine": "No state machine to visualize",
@@ -5711,7 +6050,8 @@ var en_default = {
   "avl.stateInitial": "start",
   "avl.stateTerminal": "end",
   "avl.guardCaption": "The transition only fires when this check is true.",
-  "avl.effectsCaption": "What runs, in order, when the transition fires."
+  "avl.effectsCaption": "What runs, in order, when the transition fires.",
+  "aria.carousel": "carousel"
 };
 
 // lib/format.ts
@@ -5773,20 +6113,6 @@ function formatValue(value, format, fmt = {}) {
 
 // lib/inlineText.ts
 var INLINE_TEXT_ATTR = "data-inline-text";
-
-// lib/domPassthrough.ts
-var GLOBAL_ATTRIBUTES = /* @__PURE__ */ new Set(["role", "id", "lang", "dir", "tabIndex"]);
-function domPassthrough(props) {
-  const out = {};
-  for (const [key, value] of Object.entries(props)) {
-    if (key.startsWith("aria-") || key.startsWith("data-") || GLOBAL_ATTRIBUTES.has(key)) {
-      if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === void 0) {
-        out[key] = value;
-      }
-    }
-  }
-  return out;
-}
 var variantStyles = {
   h1: "text-4xl heading-voice text-foreground",
   h2: "text-3xl heading-voice text-foreground",
@@ -6502,17 +6828,20 @@ var EFFECT_OPERATOR_CATEGORY = {
   "workspace/write-schema": "system",
   "workspace/write-plan": "system",
   "workspace/archive-orbital": "system",
-  "lolo/emit-body": "system"
+  "behavior/catalog": "system",
+  "behavior/describe": "system",
+  "behavior/source": "system",
+  "program/read": "system",
+  "program/print": "system",
+  "program/eval": "system",
+  "program/compose": "system"
 };
 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"
@@ -6532,7 +6861,12 @@ function effectCategoryOf(head) {
   }
   return null;
 }
+var PENDING_STD_CATEGORY_COLORS = {
+  "std-behavior-value": avlBlend("var(--color-accent)", 40, "var(--color-success)"),
+  "std-program": avlBlend("var(--color-accent)", 60, "var(--color-info)")
+};
 var OPERATOR_CATEGORY_COLORS = {
+  ...PENDING_STD_CATEGORY_COLORS,
   "arithmetic": "var(--color-primary)",
   "comparison": "var(--color-warning)",
   "logic": "var(--color-accent)",

package/dist/lib/drawable/three/index.d.ts

@@ -5,8 +5,8 @@ import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { JsonObject, EventEmit, OrbitalSchema } from '@almadar/core';
 import { Z as ZoomLevel } from '../../../avl-zoom-state-CKMVuBFg.js';
-import { b as Avl3DModelOverrides } from '../../../avl-3d-context-BpBKZIbc.js';
-export { d as AVL_3D_COLORS, A as Avl3DConfig, a as Avl3DContext, C as CAMERA_POSITIONS, P as Position3D, e as arcCurve3D, f as fibonacciSpherePositions, g as goldenSpiralPositions, o as orbitRingPositions, s as selfLoopCurve3D, t as treeLayout3D, u as useAvl3DConfig } from '../../../avl-3d-context-BpBKZIbc.js';
+import { b as Avl3DModelOverrides } from '../../../avl-3d-context-Dxun3-ri.js';
+export { d as AVL_3D_COLORS, A as Avl3DConfig, a as Avl3DContext, C as CAMERA_POSITIONS, P as Position3D, e as arcCurve3D, f as fibonacciSpherePositions, g as goldenSpiralPositions, o as orbitRingPositions, s as selfLoopCurve3D, t as treeLayout3D, u as useAvl3DConfig } from '../../../avl-3d-context-Dxun3-ri.js';
 import { A as ApplicationLevelData, b as OrbitalLevelData, T as TraitLevelData, c as TransitionLevelData } from '../../../avl-schema-parser-CH1QoZw1.js';
 import '../../../paintDispatch-Cp1_S93j.js';
 import 'lucide-react';

package/dist/lib/drawable/three/index.js

@@ -1,13 +1,13 @@
-import { goldenSpiralPositions, forceDirectedPositions, Avl3DOrbitalNode, Avl3DCrossWire, Avl3DEntityCore, fibonacciSpherePositions, Avl3DLabel, Avl3DStateNode, Avl3DTransitionArc, Avl3DExprTree, AVL_3D_COLORS, zoomReducer, initialZoomState, CAMERA_POSITIONS, getBreadcrumbs, Avl3DTooltip } from '../../../chunk-7CVXM2KS.js';
-export { AVL_3D_COLORS, CAMERA_POSITIONS, arcCurve3D, fibonacciSpherePositions, goldenSpiralPositions, orbitRingPositions, selfLoopCurve3D, treeLayout3D } from '../../../chunk-7CVXM2KS.js';
-import { useCanvasTheme, withSeries, resolveDrawableColors, markColor, applySceneMaterials, collectDrawnItems, buildHitIndex, withPreviewPosition, isValidScenePos, isAnimatedShape, applyShapeAnimation, expandFxLayer, isAnimatedGroup, applyMeshAnimation, spriteAssetState, SPRITE_FALLBACK_FILL, isAnimatedMesh, clampSegments, isAtlasAsset, getAtlas, subRectFor, polyhedronBounds, AVL_INK, parseTransitionLevel, parseTraitLevel, parseOrbitalLevel, parseApplicationLevel, Box, HStack, pressableProps, resolveThemeColor } from '../../../chunk-J755QADM.js';
-import { Typography } from '../../../chunk-4ZGXIW3B.js';
+import { goldenSpiralPositions, forceDirectedPositions, Avl3DOrbitalNode, Avl3DCrossWire, Avl3DEntityCore, fibonacciSpherePositions, Avl3DLabel, Avl3DStateNode, Avl3DTransitionArc, Avl3DExprTree, AVL_3D_COLORS, zoomReducer, initialZoomState, CAMERA_POSITIONS, getBreadcrumbs, Avl3DTooltip } from '../../../chunk-EZ5FSNOE.js';
+export { AVL_3D_COLORS, CAMERA_POSITIONS, arcCurve3D, fibonacciSpherePositions, goldenSpiralPositions, orbitRingPositions, selfLoopCurve3D, treeLayout3D } from '../../../chunk-EZ5FSNOE.js';
+import { useCanvasTheme, withSeries, resolveDrawableColors, markColor, applySceneMaterials, collectDrawnItems, buildHitIndex, withPreviewPosition, isValidScenePos, isAnimatedShape, applyShapeAnimation, expandFxLayer, isAnimatedGroup, applyMeshAnimation, spriteAssetState, SPRITE_FALLBACK_FILL, isAnimatedMesh, clampSegments, isAtlasAsset, getAtlas, subRectFor, polyhedronBounds, AVL_INK, parseTransitionLevel, parseTraitLevel, parseOrbitalLevel, parseApplicationLevel, Box, HStack, pressableProps, resolveThemeColor } from '../../../chunk-EDPUQ2ZJ.js';
+import { Typography } from '../../../chunk-ERDYADVZ.js';
 import '../../../chunk-XJTHMW4G.js';
 import { useEventBus, useEmitEvent } from '../../../chunk-CHNC4UYE.js';
-import { keyMapCode, resolveKeyMapEvent } from '../../../chunk-Q47ZN2DW.js';
+import { keyMapCode, resolveKeyMapEvent } from '../../../chunk-N23SVGTH.js';
 import { cn } from '../../../chunk-64WACXM7.js';
-import '../../../chunk-723MJUU3.js';
-import '../../../chunk-LZRW6GXG.js';
+import '../../../chunk-CXQENFO2.js';
+import '../../../chunk-QOV3TUAA.js';
 import { __publicField } from '../../../chunk-QPXIAUJD.js';
 import React3, { createContext, forwardRef, useRef, useState, useMemo, useEffect, useCallback, useImperativeHandle, Component, useContext, useReducer, useLayoutEffect } from 'react';
 import { useTranslate } from '@almadar/ui/hooks';
@@ -1274,6 +1274,25 @@ function FxLayer3D({
   const children = expandFxLayer(node, epochNow, "3d", void 0, void 0);
   return /* @__PURE__ */ jsx(Fragment, { children: children.map((c, i) => /* @__PURE__ */ jsx(Drawable3D, { node: c, projector, groupOpacity }, i)) });
 }
+function useOnScreen(ref, margin = "200px") {
+  const [intersecting, setIntersecting] = useState(true);
+  const [pageVisible, setPageVisible] = useState(true);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting), { rootMargin: margin });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref, margin]);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const update = () => setPageVisible(document.visibilityState !== "hidden");
+    update();
+    document.addEventListener("visibilitychange", update);
+    return () => document.removeEventListener("visibilitychange", update);
+  }, []);
+  return intersecting && pageVisible;
+}
 var DEFAULT_GRID_CONFIG = {
   cellSize: 1};
 var EDIT_SELECTION_RADIUS = 0.6;
@@ -1350,6 +1369,7 @@ var Canvas3DHost = forwardRef(
     moveEvent
   }, ref) => {
     const containerRef = useRef(null);
+    const onScreen = useOnScreen(containerRef);
     const controlsRef = useRef(null);
     const [internalError, setInternalError] = useState(null);
     const eventBus = useEventBus();
@@ -1655,6 +1675,7 @@ var Canvas3DHost = forwardRef(
             children: /* @__PURE__ */ jsxs(
               Canvas,
               {
+                frameloop: onScreen ? "always" : "never",
                 shadows,
                 flat: lighting?.toneMapping === "none",
                 gl: { preserveDrawingBuffer: true },