@almadar/ui 6.53.1 → 6.55.0

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

@@ -12,13 +12,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var postprocessing = require('@react-three/postprocessing');
 var GLTFLoader_js = require('three/examples/jsm/loaders/GLTFLoader.js');
 var SkeletonUtils_js = require('three/examples/jsm/utils/SkeletonUtils.js');
+var context = require('@almadar/ui/context');
+var core = require('@almadar/core');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var OrbitControls_js = require('three/examples/jsm/controls/OrbitControls.js');
 var OBJLoader_js = require('three/examples/jsm/loaders/OBJLoader.js');
-var context = require('@almadar/ui/context');
 require('@almadar/core/patterns');
-var core = require('@almadar/core');
 var runtime = require('@almadar/runtime');
 var registry = require('@almadar/std/registry');
 
@@ -2046,13 +2046,392 @@ function FxLayer3D({
   const children = expandFxLayer(node, epochNow, "3d");
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(Drawable3D, { node: c, projector, groupOpacity }, i)) });
 }
+var log4 = logger.createLogger("almadar:ui:theme-color");
+function channel(value, unitScale) {
+  return Math.round(Math.min(255, Math.max(0, Number(value) * unitScale)));
+}
+function make(r, g, b, a) {
+  return { r, g, b, a, css: `rgb(${r}, ${g}, ${b})` };
+}
+function gamma(linear) {
+  const c = Math.min(1, Math.max(0, linear));
+  return Math.round(255 * (c <= 31308e-7 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055));
+}
+function fromOklab(L, a, b, alpha) {
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return make(
+    gamma(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
+    gamma(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
+    gamma(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s),
+    alpha
+  );
+}
+function component(raw, percentOf) {
+  if (raw === "none") return 0;
+  return raw.endsWith("%") ? Number(raw.slice(0, -1)) / 100 * percentOf : Number(raw);
+}
+var NUM = "(none|-?[\\d.]+(?:e-?\\d+)?%?)";
+var OKLCH = new RegExp(`^oklch\\(\\s*${NUM}\\s+${NUM}\\s+${NUM}(?:deg)?\\s*(?:\\/\\s*${NUM}\\s*)?\\)$`, "i");
+var OKLAB = new RegExp(`^oklab\\(\\s*${NUM}\\s+${NUM}\\s+${NUM}\\s*(?:\\/\\s*${NUM}\\s*)?\\)$`, "i");
+function parseComputedColor(value) {
+  const v = value.trim();
+  const lch = OKLCH.exec(v);
+  if (lch) {
+    const hue = component(lch[3], 360) * Math.PI / 180;
+    const chroma = component(lch[2], 0.4);
+    return fromOklab(component(lch[1], 1), chroma * Math.cos(hue), chroma * Math.sin(hue), lch[4] === void 0 ? 1 : component(lch[4], 1));
+  }
+  const lab = OKLAB.exec(v);
+  if (lab) {
+    return fromOklab(component(lab[1], 1), component(lab[2], 0.4), component(lab[3], 0.4), lab[4] === void 0 ? 1 : component(lab[4], 1));
+  }
+  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) log4.error("unresolvable-theme-color", { value, computed });
+  return parsed;
+}
 
-// lib/drawable/three/game3dTheme.ts
-var GRID_COLORS_3D = {
-  cell: "#444444",
-  section: "#666666"
+// lib/canvasTheme.ts
+var log5 = logger.createLogger("almadar:ui:canvas-theme");
+var toneVar = (tone) => `--color-${core.DIAGRAM_TONE_COLOR_KEYS[tone]}`;
+var SERIES_TONES = ["series-1", "series-2", "series-3", "series-4", "series-5", "series-6", "series-7", "series-8"];
+var TONE_SET = new Set(core.DIAGRAM_TONES);
+function isDiagramTone(value) {
+  return TONE_SET.has(value);
+}
+function colorCss(c) {
+  return c.a >= 1 ? c.css : `rgba(${c.r}, ${c.g}, ${c.b}, ${c.a})`;
+}
+function oneOf(value, allowed, fallback, name) {
+  const hit = allowed.find((a) => a === value);
+  if (hit !== void 0) return hit;
+  if (value !== "") log5.warn("invalid-theme-keyword", { var: name, value, allowed });
+  return fallback;
+}
+var PLAIN_LENGTH = /^(-?[\d.]+)(px)?$/;
+var ScopeReader = class {
+  constructor(scope) {
+    __publicField(this, "scope", scope);
+    __publicField(this, "style");
+    __publicField(this, "probe");
+    this.style = getComputedStyle(scope);
+    const doc = scope.ownerDocument;
+    this.probe = doc.createElement("span");
+    this.probe.style.position = "absolute";
+    this.probe.style.visibility = "hidden";
+    this.probe.style.pointerEvents = "none";
+    scope.appendChild(this.probe);
+  }
+  dispose() {
+    this.probe.remove();
+  }
+  raw(name) {
+    return this.style.getPropertyValue(name).trim();
+  }
+  /** A length var in px: a plain value parses directly, a derived one (`calc`, `var`) through the probe. */
+  length(name, fallback) {
+    const raw = this.raw(name);
+    const plain = PLAIN_LENGTH.exec(raw);
+    if (plain) return Number(plain[1]);
+    if (raw === "") return fallback;
+    this.probe.style.width = `var(${name})`;
+    const computed = PLAIN_LENGTH.exec(getComputedStyle(this.probe).width.trim());
+    this.probe.style.width = "";
+    if (computed) return Number(computed[1]);
+    log5.warn("unresolvable-theme-length", { var: name, raw });
+    return fallback;
+  }
+  number(name, fallback) {
+    const raw = this.raw(name);
+    if (raw === "") return fallback;
+    const n = Number(raw);
+    if (Number.isFinite(n)) return n;
+    log5.warn("unresolvable-theme-number", { var: name, raw });
+    return fallback;
+  }
+  /** A duration var in ms (`250ms`, `0.25s`, or a `var()` alias resolved through the probe). */
+  durationMs(name, fallback) {
+    const parse = (v) => {
+      const m = /^([\d.]+)(ms|s)$/.exec(v.trim());
+      return m ? Number(m[1]) * (m[2] === "s" ? 1e3 : 1) : null;
+    };
+    const raw = this.raw(name);
+    const direct = parse(raw);
+    if (direct !== null) return direct;
+    if (raw === "") return fallback;
+    this.probe.style.transitionDuration = `var(${name})`;
+    const computed = parse(getComputedStyle(this.probe).transitionDuration.split(",")[0] ?? "");
+    this.probe.style.transitionDuration = "";
+    return computed ?? fallback;
+  }
+  color(name) {
+    const raw = this.raw(name);
+    return parseComputedColor(raw) ?? resolveThemeColor(`var(${name})`, this.scope);
+  }
+  shadow(name) {
+    const raw = this.raw(name);
+    if (raw === "" || raw === "none") return null;
+    this.probe.style.boxShadow = `var(${name})`;
+    const computed = getComputedStyle(this.probe).boxShadow.trim() || raw;
+    this.probe.style.boxShadow = "";
+    const colorMatch = /(rgba?\([^)]*\)|#[0-9a-f]{3,8}|oklch\([^)]*\))/i.exec(computed);
+    const lengths = computed.replace(colorMatch?.[0] ?? "", "").trim().split(/\s+/).map((t) => PLAIN_LENGTH.exec(t)).filter((m) => m !== null).map((m) => Number(m[1]));
+    if (lengths.length < 2) return null;
+    const color = colorMatch ? parseComputedColor(colorMatch[0]) : null;
+    return { offsetX: lengths[0], offsetY: lengths[1], blur: lengths[2] ?? 0, color: color ? colorCss(color) : "rgba(0, 0, 0, 0.25)" };
+  }
+  family(name, fallback) {
+    return this.raw(name) || fallback;
+  }
 };
-var DEFAULT_BACKGROUND_3D = "#1a1a2e";
+function dashList(raw, fallback) {
+  if (raw === "") return fallback;
+  const parts = raw.split(/[\s,]+/).map(Number);
+  return parts.every((n) => Number.isFinite(n) && n >= 0) ? parts : fallback;
+}
+function prefersReducedMotion(scope) {
+  const view = scope.ownerDocument.defaultView;
+  return typeof view?.matchMedia === "function" && view.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function resolveCanvasTheme(scope) {
+  const r = new ScopeReader(scope);
+  try {
+    const tones = {};
+    for (const tone of core.DIAGRAM_TONES) {
+      const c = r.color(toneVar(tone));
+      tones[tone] = c ? colorCss(c) : "currentColor";
+    }
+    const ground = r.color("--surface-diagram");
+    const text = {};
+    const TEXT_FALLBACK = { xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24 };
+    for (const size of core.DIAGRAM_TEXT_SIZES) text[size] = r.length(`--text-${size}`, TEXT_FALLBACK[size]);
+    const body = r.family("--font-family-body", r.family("--font-family", "system-ui, sans-serif"));
+    return {
+      ground: ground ? colorCss(ground) : "transparent",
+      tones,
+      series: SERIES_TONES.map((t) => tones[t]),
+      strokes: {
+        thin: r.length("--diagram-stroke-thin", 1),
+        normal: r.length("--diagram-stroke-normal", 1.5),
+        bold: r.length("--diagram-stroke-bold", 3)
+      },
+      lineCap: oneOf(r.raw("--diagram-line-cap"), ["butt", "round", "square"], "round", "--diagram-line-cap"),
+      lineJoin: oneOf(r.raw("--diagram-line-join"), ["miter", "round", "bevel"], "round", "--diagram-line-join"),
+      dash: dashList(r.raw("--diagram-dash"), [6, 4]),
+      dot: dashList(r.raw("--diagram-dot"), [1, 4]),
+      fillStyle: oneOf(r.raw("--diagram-fill-style"), ["solid", "tint", "outline", "hatch"], "tint", "--diagram-fill-style"),
+      fillOpacity: r.number("--diagram-fill-opacity", 0.18),
+      roughness: r.number("--diagram-roughness", 0),
+      glow: r.number("--diagram-glow", 0),
+      shadow: r.shadow("--diagram-shadow"),
+      marker: oneOf(r.raw("--diagram-marker"), ["triangle", "open", "line", "dot"], "triangle", "--diagram-marker"),
+      faces: {
+        body,
+        display: r.family("--font-family-display", body),
+        mono: r.family("--font-family-mono", "ui-monospace, monospace")
+      },
+      label: {
+        font: oneOf(r.raw("--diagram-label-font"), ["body", "display", "mono"], "body", "--diagram-label-font"),
+        size: oneOf(r.raw("--diagram-label-size"), core.DIAGRAM_TEXT_SIZES, "sm", "--diagram-label-size"),
+        weight: r.raw("--diagram-label-weight") || "500",
+        uppercase: oneOf(r.raw("--diagram-label-case"), ["none", "uppercase"], "none", "--diagram-label-case") === "uppercase"
+      },
+      text,
+      corner: r.length("--diagram-corner", 4),
+      motion: {
+        enabled: r.raw("--motion-enable") !== "off" && !prefersReducedMotion(scope),
+        fastMs: r.durationMs("--duration-fast", 150),
+        normalMs: r.durationMs("--duration-normal", 250),
+        slowMs: r.durationMs("--duration-slow", 400),
+        easing: r.raw("--easing-standard") || "ease"
+      },
+      scene: {
+        roughness: r.number("--material-roughness", 0.6),
+        metalness: r.number("--material-metalness", 0),
+        flat: r.number("--material-flat", 0) >= 1,
+        outline: r.number("--material-outline", 0),
+        ambient: r.number("--light-ambient", 0.55),
+        key: r.number("--light-key", 1),
+        keyColor: (() => {
+          const c = r.color("--light-key-color");
+          return c ? colorCss(c) : "#ffffff";
+        })(),
+        fog: r.number("--scene-fog", 0)
+      }
+    };
+  } finally {
+    r.dispose();
+  }
+}
+function withSeries(theme, series, scope) {
+  if (!theme || !series || series.length === 0 || !scope) return theme;
+  const colors = series.map((c, i) => markColor(theme, c, scope, SERIES_TONES[i % SERIES_TONES.length]));
+  const tones = { ...theme.tones };
+  SERIES_TONES.forEach((tone, i) => {
+    tones[tone] = colors[i % colors.length];
+  });
+  return { ...theme, tones, series: SERIES_TONES.map((t) => tones[t]) };
+}
+function markColor(theme, value, scope, fallback) {
+  if (value === void 0 || value === "") return theme.tones[fallback];
+  if (isDiagramTone(value)) return theme.tones[value];
+  if (value.startsWith("var(") || value.startsWith("color-mix(")) {
+    const resolved = resolveThemeColor(value, scope);
+    return resolved ? colorCss(resolved) : theme.tones[fallback];
+  }
+  return value;
+}
+
+// hooks/useCanvasTheme.ts
+function useCanvasTheme(scopeRef) {
+  const { appliedTheme } = context.useTheme();
+  const scopeKey = JSON.stringify(context.useThemeScope());
+  const [state, setState] = React3.useState({ theme: null, version: 0 });
+  React3.useLayoutEffect(() => {
+    const scope = scopeRef.current;
+    if (!scope) return;
+    const theme = resolveCanvasTheme(scope);
+    setState((prev) => ({ theme, version: prev.version + 1 }));
+  }, [appliedTheme, scopeKey, scopeRef]);
+  return state;
+}
+
+// lib/drawable/themeDrawables.ts
+function opt(value, resolve) {
+  return value === void 0 ? void 0 : resolve(value);
+}
+function themeShape(node, resolve) {
+  return {
+    ...node,
+    ...node.fill !== void 0 ? { fill: resolve(node.fill) } : {},
+    ...node.stroke !== void 0 ? { stroke: resolve(node.stroke) } : {},
+    ...node.gradient ? { gradient: { ...node.gradient, stops: node.gradient.stops.map((s) => ({ ...s, color: resolve(s.color) })) } } : {},
+    ...node.fillPattern?.color !== void 0 ? { fillPattern: { ...node.fillPattern, color: resolve(node.fillPattern.color) } } : {},
+    ...node.shadow ? { shadow: { ...node.shadow, color: resolve(node.shadow.color) } } : {},
+    ...node.animation ? {
+      animation: {
+        ...node.animation,
+        keyframes: node.animation.keyframes.map((k) => ({
+          ...k,
+          ...k.fill !== void 0 ? { fill: resolve(k.fill) } : {},
+          ...k.stroke !== void 0 ? { stroke: resolve(k.stroke) } : {}
+        }))
+      }
+    } : {}
+  };
+}
+function themeText(node, resolve) {
+  return { ...node, color: resolve(node.color) };
+}
+function themeMaterial(material, resolve) {
+  if (!material) return material;
+  return {
+    ...material,
+    ...material.color !== void 0 ? { color: resolve(material.color) } : {},
+    ...material.emissive !== void 0 ? { emissive: resolve(material.emissive) } : {}
+  };
+}
+function resolveDrawableColors(nodes, resolve) {
+  return nodes.map((node) => {
+    switch (node.type) {
+      case "draw-shape":
+        return themeShape(node, resolve);
+      case "draw-text":
+        return themeText(node, resolve);
+      case "draw-group":
+        return { ...node, items: resolveDrawableColors(node.items, resolve) };
+      case "draw-shape-layer":
+        return { ...node, items: node.items.map((item) => themeShape(item, resolve)) };
+      case "draw-text-layer":
+        return { ...node, items: node.items.map((item) => themeText(item, resolve)) };
+      case "draw-fx-layer":
+        return {
+          ...node,
+          ...node.textColor !== void 0 ? { textColor: resolve(node.textColor) } : {},
+          ...node.presets ? {
+            presets: node.presets.map((p) => ({
+              ...p,
+              ...p.color !== void 0 ? { color: resolve(p.color) } : {},
+              ...p.color2 !== void 0 ? { color2: resolve(p.color2) } : {}
+            }))
+          } : {}
+        };
+      case "draw-mesh":
+        return {
+          ...node,
+          material: themeMaterial(node.material, resolve),
+          ...node.outline ? { outline: { ...node.outline, ...node.outline.color !== void 0 ? { color: resolve(node.outline.color) } : {} } } : {},
+          ...node.animation ? {
+            animation: {
+              ...node.animation,
+              keyframes: node.animation.keyframes.map((k) => ({
+                ...k,
+                ...k.color !== void 0 ? { color: resolve(k.color) } : {},
+                ...k.emissive !== void 0 ? { emissive: opt(k.emissive, resolve) } : {}
+              }))
+            }
+          } : {}
+        };
+      default:
+        return node;
+    }
+  });
+}
+function applySceneMaterials(nodes, theme) {
+  return nodes.map((node) => {
+    if (node.type === "draw-group") return { ...node, items: applySceneMaterials(node.items, theme) };
+    if (node.type !== "draw-mesh") return node;
+    const m = node.material ?? {};
+    const pbr = (m.kind ?? "standard") === "standard" || m.kind === "physical";
+    return {
+      ...node,
+      material: {
+        ...m,
+        ...pbr && m.roughness === void 0 ? { roughness: theme.scene.roughness } : {},
+        ...pbr && m.metalness === void 0 ? { metalness: theme.scene.metalness } : {},
+        ...m.flatShading === void 0 && theme.scene.flat ? { flatShading: true } : {}
+      },
+      ...node.outline === void 0 && theme.scene.outline > 0 ? { outline: { color: theme.tones.ink, width: theme.scene.outline * 0.02 } } : {}
+    };
+  });
+}
 
 // lib/theme-scale.ts
 var THEME_SCALE_KEYS = {
@@ -2087,7 +2466,6 @@ function cn(...inputs) {
 }
 var DEFAULT_GRID_CONFIG = {
   cellSize: 1};
-var EDIT_SELECTION_COLOR = "#3b82f6";
 var EDIT_SELECTION_RADIUS = 0.6;
 function CameraPose({
   position,
@@ -2128,7 +2506,8 @@ var Canvas3DHost = React3.forwardRef(
     orientation = "standard",
     overlay = "default",
     shadows = true,
-    backgroundColor = DEFAULT_BACKGROUND_3D,
+    backgroundColor,
+    series,
     className,
     isLoading: externalLoading,
     error: externalError,
@@ -2167,7 +2546,18 @@ var Canvas3DHost = React3.forwardRef(
     const { t } = hooks.useTranslate();
     const loadingMessage = loadingMessageProp ?? t("canvas3d.loadingScene");
     const keysRef = React3.useRef(/* @__PURE__ */ new Set());
-    const allDrawables = React3.useMemo(() => drawables ?? [], [drawables]);
+    const { theme: baseCanvasTheme } = useCanvasTheme(containerRef);
+    const seriesKey = series ? series.join("|") : "";
+    const canvasTheme = React3.useMemo(() => withSeries(baseCanvasTheme, series, containerRef.current), [baseCanvasTheme, seriesKey]);
+    const allDrawables = React3.useMemo(() => {
+      const raw = drawables ?? [];
+      const scope = containerRef.current;
+      if (!canvasTheme || !scope) return raw;
+      const resolved = resolveDrawableColors(raw, (c) => markColor(canvasTheme, c, scope, "ink"));
+      return applySceneMaterials(resolved, canvasTheme);
+    }, [drawables, canvasTheme]);
+    const ground = backgroundColor ?? canvasTheme?.ground ?? "transparent";
+    const selectionColor = canvasTheme?.tones.highlight ?? "currentColor";
     React3.useEffect(() => {
       if (!keyMap && !keyUpMap) return;
       const down = (e) => {
@@ -2464,7 +2854,7 @@ var Canvas3DHost = React3.forwardRef(
                   near: 0.1,
                   far: 1e3
                 },
-                style: { background: backgroundColor, position: "absolute", inset: 0 },
+                style: { background: ground, position: "absolute", inset: 0 },
                 onClick: (e) => {
                   if (e.target === e.currentTarget) {
                     eventHandlers.handleCanvasClick(e);
@@ -2484,10 +2874,10 @@ var Canvas3DHost = React3.forwardRef(
                       shadowCameraSize: 5,
                       shadowCameraNear: 0.5,
                       shadowCameraFar: 500,
-                      ambientIntensity: lighting?.ambient?.intensity,
+                      ambientIntensity: lighting?.ambient?.intensity ?? canvasTheme?.scene.ambient,
                       ambientColor: lighting?.ambient?.color,
-                      directionalIntensity: lighting?.directional?.intensity,
-                      directionalColor: lighting?.directional?.color,
+                      directionalIntensity: lighting?.directional?.intensity ?? canvasTheme?.scene.key,
+                      directionalColor: lighting?.directional?.color ?? canvasTheme?.scene.keyColor,
                       directionalPosition: lighting?.directional?.position,
                       hemisphereIntensity: lighting?.hemisphere?.intensity,
                       hemisphereColor: lighting?.hemisphere?.color,
@@ -2510,10 +2900,10 @@ var Canvas3DHost = React3.forwardRef(
                       ],
                       cellSize: 1,
                       cellThickness: 1,
-                      cellColor: GRID_COLORS_3D.cell,
+                      cellColor: canvasTheme?.tones.grid ?? "currentColor",
                       sectionSize: 5,
                       sectionThickness: 1.5,
-                      sectionColor: GRID_COLORS_3D.section,
+                      sectionColor: canvasTheme?.tones.axis ?? "currentColor",
                       fadeDistance: 50,
                       fadeStrength: 1
                     }
@@ -2534,7 +2924,7 @@ var Canvas3DHost = React3.forwardRef(
                         shape: "ellipse",
                         position: selectionPos,
                         radiusX: EDIT_SELECTION_RADIUS,
-                        stroke: EDIT_SELECTION_COLOR
+                        stroke: selectionColor
                       },
                       projector: drawableProjector
                     }
@@ -4126,6 +4516,7 @@ var en_default = {
   "status.draft": "Draft",
   "status.archived": "Archived",
   "error.generic": "Something went wrong",
+  "error.traitMountFailed": "{{trait}} failed to start",
   "error.retry": "Try again",
   "error.notFound": "Not found",
   "error.loadFailed": "Failed to load: {{message}}",
@@ -4254,6 +4645,7 @@ var en_default = {
   "template.ourTeam": "Our Team",
   "template.caseStudies": "Case Studies",
   "versionDiff.compare": "Compare",
+  "versionDiff.changes": "Changes",
   "versionDiff.to": "to",
   "versionDiff.beforeRevision": "Before revision",
   "versionDiff.afterRevision": "After revision",
@@ -4980,6 +5372,7 @@ var en_default = {
   "gridPicker.moreRefine": "+{{count}} more \u2014 refine your search",
   "graphCanvas.noNodes": "No nodes to display.",
   "codeBlock.noCode": "No code to display.",
+  "codeBlock.region": "Code",
   "fab.action": "Action",
   "fab.closeActions": "Close actions",
   "fab.openActions": "Open actions",
@@ -5296,7 +5689,14 @@ var en_default = {
   "agentActivity.earlierConversations": "Earlier conversations ({{count}})",
   "agentActivity.earlierActivity": "Earlier activity",
   "tabs.scrollStart": "Scroll tabs back",
-  "tabs.scrollEnd": "Scroll tabs forward"
+  "tabs.scrollEnd": "Scroll tabs forward",
+  "agentChat.workedThrough": "Worked through {{count}} steps",
+  "agentChat.newMessages": "New messages",
+  "agentChat.copy": "Copy reply",
+  "agentChat.copied": "Copied",
+  "agentChat.today": "Today",
+  "agentChat.yesterday": "Yesterday",
+  "agentChat.emptyDescription": "Ask in your own words \u2014 the assistant can look things up and make changes for you."
 };
 
 // lib/format.ts
@@ -5588,30 +5988,40 @@ function instanceOf(orbital, orbitalId, ref) {
   if (typeof ref === "object" && ref._resolved) return { ...at, name: ref.name ?? ref._resolved.name, trait: ref._resolved };
   return null;
 }
+var wiresBySchema = /* @__PURE__ */ new WeakMap();
 function traitEventWires(schema) {
+  const cached = wiresBySchema.get(schema);
+  if (cached) return cached;
   const instances = (schema.orbitals ?? []).flatMap(
     (o) => (o.traits ?? []).map((ref) => instanceOf(o.name, o.id, ref)).filter((i) => i !== null)
   );
+  const listensByEvent = /* @__PURE__ */ new Map();
+  for (const listener of instances) {
+    for (const listen of listener.trait.listens ?? []) {
+      const { bareEvent, matcher } = runtime.parseListenSource(listen, listener.orbital);
+      const bucket = listensByEvent.get(bareEvent);
+      if (bucket) bucket.push({ listener, matcher });
+      else listensByEvent.set(bareEvent, [{ listener, matcher }]);
+    }
+  }
   const wires = [];
   for (const emitter of instances) {
+    const source = { orbital: emitter.orbital, trait: emitter.name, ...emitter.orbitalId ? { orbitalId: emitter.orbitalId } : {}, ...emitter.trait.id ? { traitId: emitter.trait.id } : {} };
     for (const emit of emitter.trait.emits ?? []) {
-      for (const listener of instances) {
+      for (const { listener, matcher } of listensByEvent.get(emit.event) ?? []) {
         if (listener.orbital === emitter.orbital && listener.name === emitter.name) continue;
-        for (const listen of listener.trait.listens ?? []) {
-          const { bareEvent, matcher } = runtime.parseListenSource(listen, listener.orbital);
-          const source = { orbital: emitter.orbital, trait: emitter.name, ...emitter.orbitalId ? { orbitalId: emitter.orbitalId } : {}, ...emitter.trait.id ? { traitId: emitter.trait.id } : {} };
-          if (bareEvent !== emit.event || !matcher(source)) continue;
-          wires.push({
-            emitterOrbital: emitter.orbital,
-            emitterTrait: emitter.name,
-            listenerOrbital: listener.orbital,
-            listenerTrait: listener.name,
-            event: emit.event
-          });
-        }
+        if (!matcher(source)) continue;
+        wires.push({
+          emitterOrbital: emitter.orbital,
+          emitterTrait: emitter.name,
+          listenerOrbital: listener.orbital,
+          listenerTrait: listener.name,
+          event: emit.event
+        });
       }
     }
   }
+  wiresBySchema.set(schema, wires);
   return wires;
 }
 
@@ -5993,55 +6403,6 @@ function getBreadcrumbs(state) {
   }
   return crumbs;
 }
-var log4 = logger.createLogger("almadar:ui:theme-color");
-function channel(value, unitScale) {
-  return Math.round(Math.min(255, Math.max(0, Number(value) * unitScale)));
-}
-function make(r, g, b, a) {
-  return { r, g, b, a, css: `rgb(${r}, ${g}, ${b})` };
-}
-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) log4.error("unresolvable-theme-color", { value, computed });
-  return parsed;
-}
 
 // lib/avl-theme.ts
 function avlTint(token, percent) {
@@ -6170,6 +6531,7 @@ var OPERATOR_CATEGORY_COLORS = {
   "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-i18n": avlBlend("var(--color-info)", 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)"),
@@ -7976,7 +8338,7 @@ function useThemeColors(values, scopeRef) {
   }, [appliedTheme, scopeKey, valuesKey, scopeRef]);
   return resolved;
 }
-var log5 = logger.createLogger("almadar:ui:avl-3d-viewer");
+var log6 = logger.createLogger("almadar:ui:avl-3d-viewer");
 function CameraController({ targetPosition, targetLookAt, animated }) {
   const { camera } = fiber.useThree();
   const targetPosVec = React3.useRef(new THREE5__namespace.Vector3(...targetPosition));
@@ -8044,7 +8406,7 @@ var Avl3DViewer = ({
     for (const key of Object.keys(AVL_3D_COLORS)) {
       const resolved = resolvedColors[key];
       if (!resolved) {
-        log5.error("avl-3d-palette-key-unresolved", { key, value: AVL_3D_COLORS[key] });
+        log6.error("avl-3d-palette-key-unresolved", { key, value: AVL_3D_COLORS[key] });
         return null;
       }
       out[key] = resolved.css;