@almadar/ui 6.54.0 → 6.56.0

package/dist/{chunk-Z5IYJU44.js → chunk-Y53Q55H5.js}

@@ -1,23 +1,26 @@
 import { useTapReveal } from './chunk-XJTHMW4G.js';
 import { useEventBus } from './chunk-6EV3OEBQ.js';
-import { updateAssetStatus } from './chunk-O7OLVVBR.js';
+import { updateAssetStatus } from './chunk-Q47ZN2DW.js';
 import { cn, domPassthrough } from './chunk-64WACXM7.js';
+import { __publicField } from './chunk-QPXIAUJD.js';
 import { createLogger } from '@almadar/logger';
-import React, { useCallback, createContext, useContext } from 'react';
-import { useThemeScope } from '@almadar/ui/context';
+import React, { useCallback, createContext, useContext, useState, useLayoutEffect } from 'react';
+import { useThemeScope, useTheme } from '@almadar/ui/context';
 import { jsx } from 'react/jsx-runtime';
 import { renderUiEntriesOf } from '@almadar/core/patterns';
-import { isInlineTrait } from '@almadar/core';
+import { DIAGRAM_TONES, isInlineTrait, DIAGRAM_TONE_COLOR_KEYS, DIAGRAM_TEXT_SIZES } from '@almadar/core';
 import { parseListenSource } from '@almadar/runtime';
 
 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)"
+  "var(--color-series-1)",
+  "var(--color-series-2)",
+  "var(--color-series-3)",
+  "var(--color-series-4)",
+  "var(--color-series-5)",
+  "var(--color-series-6)",
+  "var(--color-series-7)",
+  "var(--color-series-8)"
 ];
 function channel(value, unitScale) {
   return Math.round(Math.min(255, Math.max(0, Number(value) * unitScale)));
@@ -25,8 +28,40 @@ function channel(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];
@@ -678,30 +713,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 } = 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 } = 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;
 }
 
@@ -1902,6 +1947,458 @@ function DrawFxLayer(_props) {
   return null;
 }
 
+// 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 } } : {}
+    };
+  });
+}
+var log2 = createLogger("almadar:ui:canvas-theme");
+var toneVar = (tone) => `--color-${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(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 !== "") log2.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]);
+    log2.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;
+    log2.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;
+  }
+};
+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 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 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"), 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;
+}
+function markStrokeWidth(theme, literal, role, fallback = "normal") {
+  return literal ?? theme.strokes[role ?? fallback];
+}
+function labelFont(theme, roles, literalPx, literalFamily) {
+  const px = literalPx ?? theme.text[roles.textSize ?? theme.label.size];
+  const family = literalFamily ?? theme.faces[roles.font ?? theme.label.font];
+  return { font: `${theme.label.weight} ${px}px ${family}`, px };
+}
+function labelText(theme, text, textCase = "theme") {
+  return theme.label.uppercase && textCase === "theme" ? text.toUpperCase() : text;
+}
+function fillLabel(ctx, theme, text, x, y) {
+  if (!text) return;
+  ctx.save();
+  ctx.strokeStyle = theme.ground;
+  ctx.lineWidth = Math.max(2, theme.text.xs * 0.3);
+  ctx.lineJoin = "round";
+  ctx.strokeText(text, x, y);
+  ctx.restore();
+  ctx.fillText(text, x, y);
+}
+function outlineStroke(stroke, fill, style, fillTone) {
+  return outlineCarriesFill(fill, style, fillTone) && fill !== void 0 ? fill : stroke;
+}
+function outlineCarriesFill(fill, style, fillTone) {
+  return style === "outline" && fill !== void 0 && fillTone !== "fill";
+}
+function applyLineCharacter(ctx, theme, strokeColor) {
+  ctx.lineCap = theme.lineCap;
+  ctx.lineJoin = theme.lineJoin;
+  if (theme.glow > 0) {
+    ctx.shadowColor = strokeColor;
+    ctx.shadowBlur = theme.glow;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+  }
+}
+function markDash(theme, dash) {
+  if (dash === "dashed") return theme.dash;
+  if (dash === "dotted") return theme.dot;
+  return [];
+}
+function wobble(x, y, k) {
+  const s = Math.sin(x * 12.9898 + y * 78.233 + k * 37.719) * 43758.5453;
+  return (s - Math.floor(s)) * 2 - 1;
+}
+function tracePolyline(ctx, theme, points, closed) {
+  ctx.beginPath();
+  if (points.length === 0) return;
+  const amp = theme.roughness;
+  const pts = closed ? [...points, points[0]] : [...points];
+  ctx.moveTo(pts[0].x + amp * wobble(pts[0].x, pts[0].y, 0), pts[0].y + amp * wobble(pts[0].y, pts[0].x, 1));
+  for (let i = 1; i < pts.length; i++) {
+    const a = pts[i - 1];
+    const b = pts[i];
+    if (amp === 0) {
+      ctx.lineTo(b.x, b.y);
+      continue;
+    }
+    const steps = Math.max(1, Math.round(Math.hypot(b.x - a.x, b.y - a.y) / 24));
+    for (let s = 1; s <= steps; s++) {
+      const t = s / steps;
+      const x = a.x + (b.x - a.x) * t;
+      const y = a.y + (b.y - a.y) * t;
+      ctx.lineTo(x + amp * wobble(x, y, 2), y + amp * wobble(y, x, 3));
+    }
+  }
+  if (closed) ctx.closePath();
+}
+function arcPoints(cx, cy, rx, ry, startRad = 0, endRad = Math.PI * 2) {
+  const steps = Math.max(12, Math.round(Math.abs(endRad - startRad) * Math.max(rx, ry) / 8));
+  const out = [];
+  for (let i = 0; i <= steps; i++) {
+    const t = startRad + (endRad - startRad) * i / steps;
+    out.push({ x: cx + rx * Math.cos(t), y: cy + ry * Math.sin(t) });
+  }
+  return out;
+}
+function fillMark(ctx, theme, color, style = theme.fillStyle) {
+  if (style === "outline") return;
+  ctx.save();
+  ctx.shadowBlur = 0;
+  ctx.shadowColor = "transparent";
+  if (theme.shadow) {
+    ctx.shadowColor = theme.shadow.color;
+    ctx.shadowOffsetX = theme.shadow.offsetX;
+    ctx.shadowOffsetY = theme.shadow.offsetY;
+    ctx.shadowBlur = theme.shadow.blur;
+  }
+  if (style === "hatch") {
+    ctx.clip();
+    const span = ctx.canvas.width + ctx.canvas.height;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = theme.strokes.thin;
+    ctx.setLineDash([]);
+    ctx.beginPath();
+    for (let d = -span; d < span; d += 6) {
+      ctx.moveTo(d, 0);
+      ctx.lineTo(d + span, span);
+    }
+    ctx.stroke();
+  } else {
+    ctx.globalAlpha *= style === "tint" ? theme.fillOpacity : 1;
+    ctx.fillStyle = color;
+    ctx.fill();
+  }
+  ctx.restore();
+}
+function drawMarker(ctx, theme, x1, y1, x2, y2, color, width) {
+  const size = Math.max(8, width * 4);
+  const angle = Math.atan2(y2 - y1, x2 - x1);
+  const left = { x: x2 - size * Math.cos(angle - Math.PI / 6), y: y2 - size * Math.sin(angle - Math.PI / 6) };
+  const right = { x: x2 - size * Math.cos(angle + Math.PI / 6), y: y2 - size * Math.sin(angle + Math.PI / 6) };
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.fillStyle = color;
+  ctx.lineWidth = width;
+  ctx.setLineDash([]);
+  switch (theme.marker) {
+    case "triangle": {
+      ctx.beginPath();
+      ctx.moveTo(x2, y2);
+      ctx.lineTo(left.x, left.y);
+      ctx.lineTo(right.x, right.y);
+      ctx.closePath();
+      ctx.fill();
+      break;
+    }
+    case "open":
+    case "line": {
+      ctx.beginPath();
+      ctx.moveTo(left.x, left.y);
+      ctx.lineTo(x2, y2);
+      ctx.lineTo(right.x, right.y);
+      if (theme.marker === "open") ctx.stroke();
+      else {
+        ctx.moveTo(x2 - size * 0.5 * Math.cos(angle + Math.PI / 2), y2 - size * 0.5 * Math.sin(angle + Math.PI / 2));
+        ctx.lineTo(x2 + size * 0.5 * Math.cos(angle + Math.PI / 2), y2 + size * 0.5 * Math.sin(angle + Math.PI / 2));
+        ctx.stroke();
+      }
+      break;
+    }
+    case "dot": {
+      ctx.beginPath();
+      ctx.arc(x2, y2, Math.max(2.5, width * 1.5), 0, Math.PI * 2);
+      ctx.fill();
+      break;
+    }
+  }
+  ctx.restore();
+}
+function useCanvasTheme(scopeRef) {
+  const { appliedTheme } = useTheme();
+  const scopeKey = JSON.stringify(useThemeScope());
+  const [state, setState] = useState({ theme: null, version: 0 });
+  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/hitTest.ts
 function shapeDrawnItem(n) {
   if (n.shape !== "rect") return { pos: n.position, id: n.id };
@@ -2000,4 +2497,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, 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 };
+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, applyLineCharacter, applyMeshAnimation, applySceneMaterials, applyShapeAnimation, arcPoints, asEffectOperator, atlasFailed, atlasUrlOf, avlBlend, avlSeries, avlTint, blit, buildHitIndex, clampSegments, collectDrawnItems, createConfettiParticles, drawMarker, effectCategoryOf, effectZoneOf, expandFxLayer, fillLabel, fillMark, fxHash01, getAtlas, getImageStatus, getOrLoadImage, getStateRole, hitTestSprites, isAnimatedGroup, isAnimatedMesh, isAnimatedShape, isAtlasAsset, isSpriteSheetAtlas, isValidScenePos, labelFont, labelText, markColor, markDash, markStrokeWidth, outlineCarriesFill, outlineStroke, paintShape, paintSkinnedMesh, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, polyhedronBounds, pressableProps, resolveAssetSource, resolveDrawableColors, resolveThemeColor, rowOpenControlProps, spriteAssetState, spriteRect, subRectFor, tracePolyline, traitEventWires, traitLevelFromTrait, traitTransitionRenderUi, useCanvasTheme, withPreviewPosition, withSeries };