@almadar/ui 5.139.0 → 5.140.0

package/dist/components/index.js

@@ -15632,6 +15632,12 @@ function createWebPainter(ctx, onAssetLoad) {
     for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
     if (closed) ctx.closePath();
   };
+  const toCanvasStyle = (style) => {
+    if (typeof style === "string") return style;
+    const g = style.kind === "linear" ? ctx.createLinearGradient(style.x1, style.y1, style.x2, style.y2) : ctx.createRadialGradient(style.cx, style.cy, 0, style.cx, style.cy, style.r);
+    for (const stop of style.stops) g.addColorStop(stop.offset, stop.color);
+    return g;
+  };
   return {
     setViewport(width, height, dpr) {
       vw = width;
@@ -15685,47 +15691,47 @@ function createWebPainter(ctx, onAssetLoad) {
         ctx.drawImage(img, dest.x, dest.y, dw, dh);
       }
     },
-    fillRect(x, y, w, h, color) {
-      ctx.fillStyle = color;
+    fillRect(x, y, w, h, style) {
+      ctx.fillStyle = toCanvasStyle(style);
       ctx.fillRect(x, y, w, h);
     },
-    strokeRect(x, y, w, h, color, lineWidth = 1) {
-      ctx.strokeStyle = color;
+    strokeRect(x, y, w, h, style, lineWidth = 1) {
+      ctx.strokeStyle = toCanvasStyle(style);
       ctx.lineWidth = lineWidth;
       ctx.strokeRect(x, y, w, h);
     },
-    fillPoly(points, color) {
+    fillPoly(points, style) {
       if (points.length === 0) return;
       tracePoly(points, true);
-      ctx.fillStyle = color;
+      ctx.fillStyle = toCanvasStyle(style);
       ctx.fill();
     },
-    strokePoly(points, color, lineWidth = 1, closed = false) {
+    strokePoly(points, style, lineWidth = 1, closed = false) {
       if (points.length === 0) return;
       tracePoly(points, closed);
-      ctx.strokeStyle = color;
+      ctx.strokeStyle = toCanvasStyle(style);
       ctx.lineWidth = lineWidth;
       ctx.stroke();
     },
-    fillEllipse(cx, cy, rx, ry, color) {
+    fillEllipse(cx, cy, rx, ry, style) {
       ctx.beginPath();
       ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
-      ctx.fillStyle = color;
+      ctx.fillStyle = toCanvasStyle(style);
       ctx.fill();
     },
-    strokeEllipse(cx, cy, rx, ry, color, lineWidth = 1) {
+    strokeEllipse(cx, cy, rx, ry, style, lineWidth = 1) {
       ctx.beginPath();
       ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
-      ctx.strokeStyle = color;
+      ctx.strokeStyle = toCanvasStyle(style);
       ctx.lineWidth = lineWidth;
       ctx.stroke();
     },
-    fillPath(d, color) {
-      ctx.fillStyle = color;
+    fillPath(d, style) {
+      ctx.fillStyle = toCanvasStyle(style);
       ctx.fill(new Path2D(d));
     },
-    strokePath(d, color, lineWidth = 1) {
-      ctx.strokeStyle = color;
+    strokePath(d, style, lineWidth = 1) {
+      ctx.strokeStyle = toCanvasStyle(style);
       ctx.lineWidth = lineWidth;
       ctx.stroke(new Path2D(d));
     },
@@ -15962,6 +15968,84 @@ var init_registry = __esm({
     DrawableRegistryContext = createContext(null);
   }
 });
+function isAnimatedShape(node) {
+  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
+}
+function applyShapeAnimation(node, timeMs) {
+  const anim = node.animation;
+  if (!anim || !(anim.durationMs > 0) || anim.keyframes.length === 0) return node;
+  const frames = [...anim.keyframes].sort((a, b) => a.at - b.at);
+  const cycle = timeMs / anim.durationMs;
+  const t = anim.loop === false ? Math.min(cycle, 1) : cycle - Math.floor(cycle);
+  const out = { ...node };
+  const trackValue = (key) => {
+    const defined = frames.filter((f3) => f3[key] !== void 0);
+    if (defined.length === 0) return void 0;
+    let prev;
+    let next;
+    for (const f3 of defined) {
+      if (f3.at <= t) prev = f3;
+      else if (!next) next = f3;
+    }
+    if (!prev) return defined[0][key];
+    if (!next) return prev[key];
+    const span = next.at - prev.at;
+    const k = span > 0 ? (t - prev.at) / span : 1;
+    const a = prev[key];
+    const b = next[key];
+    if (typeof a === "number" && typeof b === "number") return lerp(a, b, k);
+    return a;
+  };
+  for (const key of NUMERIC_TRACKS) {
+    const v = trackValue(key);
+    if (v !== void 0) out[key] = v;
+  }
+  const fill = trackValue("fill");
+  if (fill !== void 0) out.fill = fill;
+  const stroke = trackValue("stroke");
+  if (stroke !== void 0) out.stroke = stroke;
+  const shadowFrames = frames.filter((f3) => f3.shadow !== void 0);
+  if (shadowFrames.length > 0) {
+    const sh = trackValue("shadow");
+    if (sh !== void 0) {
+      let prevSh;
+      let nextSh;
+      for (const f3 of shadowFrames) {
+        if (f3.at <= t) prevSh = f3;
+        else if (!nextSh) nextSh = f3;
+      }
+      if (prevSh?.shadow && nextSh?.shadow) {
+        const span = nextSh.at - prevSh.at;
+        const k = span > 0 ? (t - prevSh.at) / span : 1;
+        out.shadow = { color: prevSh.shadow.color, blur: lerp(prevSh.shadow.blur, nextSh.shadow.blur, k) };
+      } else {
+        out.shadow = sh;
+      }
+    }
+  }
+  return out;
+}
+function gradientStyle(g, ox, oy, scale) {
+  if (g.kind === "linear") {
+    if (!g.from || !g.to) return void 0;
+    return {
+      kind: "linear",
+      x1: ox + g.from.x * scale,
+      y1: oy + g.from.y * scale,
+      x2: ox + g.to.x * scale,
+      y2: oy + g.to.y * scale,
+      stops: g.stops
+    };
+  }
+  if (!g.center || g.radius === void 0) return void 0;
+  return {
+    kind: "radial",
+    cx: ox + g.center.x * scale,
+    cy: oy + g.center.y * scale,
+    r: g.radius * scale,
+    stops: g.stops
+  };
+}
 function DrawShape(props) {
   const register = useContext(DrawableRegistryContext);
   if (register) {
@@ -15972,25 +16056,51 @@ function DrawShape(props) {
       ...opacity !== void 0 && opacity > 0 ? { opacity } : {}
     };
     register(node);
-    return /* @__PURE__ */ jsx("div", { "data-draw-shape-debug": "", style: { position: "absolute", width: 4, height: 4, background: "red", zIndex: 9999 } });
   }
   return null;
 }
-var paintShape;
+var NUMERIC_TRACKS, lerp, paintShape;
 var init_DrawShape = __esm({
   "components/game/atoms/DrawShape.tsx"() {
     "use client";
     init_contract();
     init_registry();
-    paintShape = (painter, node, dctx) => {
+    NUMERIC_TRACKS = [
+      "offsetX",
+      "offsetY",
+      "rotate",
+      "opacity",
+      "radiusX",
+      "radiusY",
+      "width",
+      "height",
+      "strokeWidth"
+    ];
+    lerp = (a, b, k) => a + (b - a) * k;
+    paintShape = (painter, rawNode, dctx) => {
+      const node = dctx.time > 0 ? applyShapeAnimation(rawNode, dctx.time) : rawNode;
       if (!isValidScenePos(node.position)) return;
       painter.save();
       if (node.opacity !== void 0 && node.opacity !== 1) painter.setAlpha(node.opacity);
+      const origin = dctx.projector.project(node.position);
+      const tileWidth = dctx.projector.tileWidth;
+      if (node.rotate) {
+        const pivot = node.pivot ?? { x: 0.5, y: 0.5 };
+        const px = origin.x + pivot.x * tileWidth;
+        const py = origin.y + pivot.y * tileWidth;
+        painter.translate(px, py);
+        painter.rotate(node.rotate);
+        painter.translate(-px, -py);
+      }
+      if (node.shadow) painter.setShadow({ color: node.shadow.color, blur: node.shadow.blur * tileWidth });
+      const fill = node.fill === "none" ? void 0 : node.fill;
+      const stroke = node.stroke === "none" ? void 0 : node.stroke;
+      const pxFill = node.gradient ? gradientStyle(node.gradient, origin.x, origin.y, tileWidth) ?? fill : fill;
       switch (node.shape) {
         case "cell": {
           const pts = dctx.projector.cellPath(node.position);
-          if (node.fill) painter.fillPoly(pts, node.fill);
-          if (node.stroke) painter.strokePoly(pts, node.stroke, node.strokeWidth ?? 1, true);
+          if (pxFill) painter.fillPoly(pts, pxFill);
+          if (stroke) painter.strokePoly(pts, stroke, node.strokeWidth ?? 1, true);
           break;
         }
         case "rect": {
@@ -16000,8 +16110,8 @@ var init_DrawShape = __esm({
           const y = p.y + (node.offsetY ?? 0) * tw;
           const w = (node.width ?? 0) * tw;
           const h = (node.height ?? 0) * tw;
-          if (node.fill) painter.fillRect(x, y, w, h, node.fill);
-          if (node.stroke) painter.strokeRect(x, y, w, h, node.stroke, node.strokeWidth ?? 1);
+          if (pxFill) painter.fillRect(x, y, w, h, pxFill);
+          if (stroke) painter.strokeRect(x, y, w, h, stroke, node.strokeWidth ?? 1);
           break;
         }
         case "ellipse": {
@@ -16011,26 +16121,26 @@ var init_DrawShape = __esm({
           const cy = p.y + (node.offsetY ?? 0) * tw;
           const rx = (node.radiusX ?? 0) * tw;
           const ry = (node.radiusY ?? rx) * tw;
-          if (node.fill) painter.fillEllipse(cx, cy, rx, ry, node.fill);
-          if (node.stroke) painter.strokeEllipse(cx, cy, rx, ry, node.stroke, node.strokeWidth ?? 1);
+          if (pxFill) painter.fillEllipse(cx, cy, rx, ry, pxFill);
+          if (stroke) painter.strokeEllipse(cx, cy, rx, ry, stroke, node.strokeWidth ?? 1);
           break;
         }
         case "poly": {
-          const base = dctx.projector.project(node.position);
-          const tw = dctx.projector.tileWidth;
-          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x * tw, y: base.y + pt.y * tw }));
-          if (node.fill) painter.fillPoly(pts, node.fill);
-          if (node.stroke) painter.strokePoly(pts, node.stroke, node.strokeWidth ?? 1, true);
+          const pts = (node.points ?? []).map((pt) => ({
+            x: origin.x + ((node.offsetX ?? 0) + pt.x) * tileWidth,
+            y: origin.y + ((node.offsetY ?? 0) + pt.y) * tileWidth
+          }));
+          if (pxFill) painter.fillPoly(pts, pxFill);
+          if (stroke) painter.strokePoly(pts, stroke, node.strokeWidth ?? 1, true);
           break;
         }
         case "path": {
           if (!node.d) break;
-          const base = dctx.projector.project(node.position);
-          const tw = dctx.projector.tileWidth;
-          painter.translate(base.x, base.y);
-          painter.scale(tw, tw);
-          if (node.fill) painter.fillPath(node.d, node.fill);
-          if (node.stroke) painter.strokePath(node.d, node.stroke, (node.strokeWidth ?? 1) / tw);
+          painter.translate(origin.x + (node.offsetX ?? 0) * tileWidth, origin.y + (node.offsetY ?? 0) * tileWidth);
+          painter.scale(tileWidth, tileWidth);
+          const localFill = node.gradient ? gradientStyle(node.gradient, 0, 0, 1) ?? fill : fill;
+          if (localFill) painter.fillPath(node.d, localFill);
+          if (stroke) painter.strokePath(node.d, stroke, (node.strokeWidth ?? 1) / tileWidth);
           break;
         }
       }
@@ -16242,7 +16352,6 @@ function Canvas2D({
     childDrawablesRef.current.push(node);
   }, []);
   const hasJsxChildren = React76.Children.count(children) > 0;
-  drawables && drawables.length > 0 ? drawables : childDrawablesRef.current;
   function isDrawableLayer(node) {
     return node.type === "draw-sprite-layer" || node.type === "draw-shape-layer" || node.type === "draw-text-layer";
   }
@@ -16391,11 +16500,24 @@ function Canvas2D({
   }, [showMinimap, scenePositions]);
   const miniMapWidth = gridExtent.width || 10;
   const miniMapHeight = gridExtent.height || 10;
-  const draw = useCallback(() => {
+  const drawableIsAnimated = (node) => {
+    if (node.type === "draw-shape") return isAnimatedShape(node);
+    if (node.type === "draw-group") return Array.isArray(node.items) && node.items.some(drawableIsAnimated);
+    if (node.type === "draw-shape-layer") return Array.isArray(node.items) && node.items.some(isAnimatedShape);
+    return false;
+  };
+  const animRafRef = useRef(0);
+  const drawTimeRef = useRef(() => void 0);
+  const draw = useCallback((timeMs = 0) => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
+    const scheduleAnimation = (nodes) => {
+      if (!nodes.some(drawableIsAnimated)) return;
+      cancelAnimationFrame(animRafRef.current);
+      animRafRef.current = requestAnimationFrame(() => drawTimeRef.current(performance.now()));
+    };
     const dpr = window.devicePixelRatio || 1;
     canvas.width = viewportSize.width * dpr;
     canvas.height = viewportSize.height * dpr;
@@ -16428,14 +16550,24 @@ function Canvas2D({
     if (!drawables || drawables.length === 0) {
       const childDrawables = childDrawablesRef.current;
       if (childDrawables.length === 0) return;
+      const cam0 = cameraRef.current;
+      if (camera !== "follow" && dragDistance() === 0) {
+        const focus = cameraPos ?? defaultGridFocus;
+        if (focus) {
+          const p = projector.anchorPoint(focus, "center");
+          cam0.x = p.x - viewportSize.width / 2;
+          cam0.y = p.y - viewportSize.height / 2;
+        }
+      }
       const painter0 = createWebPainter(ctx, bumpAtlas);
       painter0.save();
       painter0.translate(viewportSize.width / 2, viewportSize.height / 2);
-      painter0.scale(cameraRef.current.zoom, cameraRef.current.zoom);
-      painter0.translate(-viewportSize.width / 2, -viewportSize.height / 2);
-      const dctx0 = { projector, time: 0, invalidate: bumpAtlas };
+      painter0.scale(cam0.zoom, cam0.zoom);
+      painter0.translate(-viewportSize.width / 2 - cam0.x, -viewportSize.height / 2 - cam0.y);
+      const dctx0 = { projector, time: timeMs, invalidate: bumpAtlas };
       for (const node of childDrawables) paintDrawable(painter0, node, dctx0);
       painter0.restore();
+      scheduleAnimation(childDrawables);
       return;
     }
     const cam = cameraRef.current;
@@ -16455,10 +16587,15 @@ function Canvas2D({
     painter.translate(viewportSize.width / 2, viewportSize.height / 2);
     painter.scale(cam.zoom, cam.zoom);
     painter.translate(-viewportSize.width / 2 - cam.x, -viewportSize.height / 2 - cam.y);
-    const dctx = { projector, time: 0, invalidate: bumpAtlas };
+    const dctx = { projector, time: timeMs, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
+    scheduleAnimation(drawables);
   }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
+  useEffect(() => {
+    drawTimeRef.current = draw;
+  }, [draw]);
+  useEffect(() => () => cancelAnimationFrame(animRafRef.current), []);
   useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");
@@ -16681,15 +16818,7 @@ function Canvas2D({
             mapHeight: miniMapHeight
           }
         ) }),
-        hasJsxChildren && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { position: "absolute", width: 0, height: 0, overflow: "hidden" }, children }),
-        /* @__PURE__ */ jsxs("div", { "data-debug": "", style: { position: "absolute", top: 0, left: 0, background: "yellow", color: "black", zIndex: 9999, fontSize: 24, padding: 8 }, children: [
-          "C=",
-          React76.Children.count(children),
-          " J=",
-          String(hasJsxChildren),
-          " D=",
-          drawables?.length ?? -1
-        ] })
+        hasJsxChildren && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { position: "absolute", width: 0, height: 0, overflow: "hidden" }, children })
       ]
     }
   ) });
@@ -16714,6 +16843,7 @@ var init_Canvas2D = __esm({
     init_webPainter2d();
     init_projector();
     init_paintDispatch();
+    init_DrawShape();
     init_registry();
     init_hitTest();
     init_isometric();
@@ -46894,8 +47024,13 @@ function SlotContentRenderer({
     const isSingleChild = typeof childrenConfig === "string" || typeof childrenConfig === "object" && childrenConfig !== null && !Array.isArray(childrenConfig) && "type" in childrenConfig;
     const hasChildren = PATTERNS_WITH_CHILDREN.has(content.pattern) || Array.isArray(childrenConfig) && childrenConfig.length > 0 || isSingleChild;
     const isDrawHost = isDrawHostPattern(content.pattern);
+    const arr = Array.isArray(childrenConfig) ? childrenConfig : childrenConfig ? [childrenConfig] : [];
+    const hasTraitChildren = arr.some(
+      (c) => typeof c === "string" && TRAIT_BINDING_RE.test(c)
+    );
+    const drawHostUsesReactChildren = isDrawHost && hasTraitChildren;
     const myPath = patternPath ?? "root";
-    const renderedChildren = hasChildren && !isDrawHost ? renderPatternChildren(childrenConfig, onDismiss, content.id, myPath, content.sourceTrait, {
+    const renderedChildren = hasChildren && (!isDrawHost || drawHostUsesReactChildren) ? renderPatternChildren(childrenConfig, onDismiss, content.id, myPath, content.sourceTrait, {
       slot: content.slot,
       transitionEvent: content.transitionEvent,
       fromState: content.fromState,
@@ -46956,7 +47091,7 @@ function SlotContentRenderer({
     for (const [k, v] of Object.entries(nodeSlotOverrides)) {
       finalProps[k] = v;
     }
-    if (isDrawHost && Array.isArray(childrenConfig) && childrenConfig.length > 0) {
+    if (isDrawHost && !drawHostUsesReactChildren && Array.isArray(childrenConfig) && childrenConfig.length > 0) {
       finalProps.drawables = toDrawableNodes(childrenConfig);
     }
     const entityVal = finalProps.entity;
@@ -47135,6 +47270,8 @@ var init_UISlotRenderer = __esm({
       "vstack",
       "hstack",
       "box",
+      "canvas",
+      "canvas-2d",
       "grid",
       "center",
       "card",

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

@@ -3,7 +3,7 @@ import React__default, { Component, ReactNode, ErrorInfo } from 'react';
 import { ScenePos, EventEmit, JsonObject, OrbitalSchema } from '@almadar/core';
 import * as THREE from 'three';
 import { QuadraticBezierCurve3 } from 'three';
-import { D as DrawableNode } from '../../../paintDispatch-DXygiK7M.cjs';
+import { D as DrawableNode } from '../../../paintDispatch-B5pPeSEp.cjs';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { I as IsometricTile, a as IsometricUnit, b as IsometricFeature, A as ApplicationLevelData, O as OrbitalLevelData, T as TraitLevelData, c as TransitionLevelData } from '../../../avl-schema-parser-B8Onmfsu.cjs';
 export { U as UnitAnimationState } from '../../../avl-schema-parser-B8Onmfsu.cjs';

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

@@ -3,7 +3,7 @@ import React__default, { Component, ReactNode, ErrorInfo } from 'react';
 import { ScenePos, EventEmit, JsonObject, OrbitalSchema } from '@almadar/core';
 import * as THREE from 'three';
 import { QuadraticBezierCurve3 } from 'three';
-import { D as DrawableNode } from '../../../paintDispatch-DXygiK7M.js';
+import { D as DrawableNode } from '../../../paintDispatch-B5pPeSEp.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { I as IsometricTile, a as IsometricUnit, b as IsometricFeature, A as ApplicationLevelData, O as OrbitalLevelData, T as TraitLevelData, c as TransitionLevelData } from '../../../avl-schema-parser-B8Onmfsu.js';
 export { U as UnitAnimationState } from '../../../avl-schema-parser-B8Onmfsu.js';

package/dist/lib/index.d.cts

@@ -1,7 +1,7 @@
-export { C as ContentSegment, D as DEFAULT_CONFIG, a as DomEntityBox, b as DomLayoutData, c as DomOutputsBox, d as DomStateNode, e as DomTransitionLabel, f as DomTransitionPath, E as EntityDefinition, R as RenderOptions, S as StateDefinition, g as StateMachineDefinition, T as TraitSnapshotGetter, h as TransitionDefinition, V as VisualizerConfig, i as bindCanvasCapture, j as bindEventBus, k as bindLastDrawables, l as bindTraitStateGetter, m as clearVerification, n as cn, o as extractOutputsFromTransitions, p as extractStateMachine, q as formatGuard, r as getAllChecks, s as getBridgeHealth, t as getEffectSummary, u as getSnapshot, v as getSummary, w as getTraitSnapshots, x as getTransitions, y as getTransitionsForTrait, z as parseContentSegments, A as parseMarkdownWithCodeBlocks, B as recordServerResponse, F as recordTransition, G as registerCheck, H as registerTraitSnapshot, I as renderStateMachineToDomData, J as renderStateMachineToSvg, K as subscribeToVerification, L as updateAssetStatus, M as updateBridgeHealth, N as updateCheck, O as waitForTransition } from '../cn-CL0kdshO.cjs';
+export { C as ContentSegment, D as DEFAULT_CONFIG, a as DomEntityBox, b as DomLayoutData, c as DomOutputsBox, d as DomStateNode, e as DomTransitionLabel, f as DomTransitionPath, E as EntityDefinition, R as RenderOptions, S as StateDefinition, g as StateMachineDefinition, T as TraitSnapshotGetter, h as TransitionDefinition, V as VisualizerConfig, i as bindCanvasCapture, j as bindEventBus, k as bindLastDrawables, l as bindTraitStateGetter, m as clearVerification, n as cn, o as extractOutputsFromTransitions, p as extractStateMachine, q as formatGuard, r as getAllChecks, s as getBridgeHealth, t as getEffectSummary, u as getSnapshot, v as getSummary, w as getTraitSnapshots, x as getTransitions, y as getTransitionsForTrait, z as parseContentSegments, A as parseMarkdownWithCodeBlocks, B as recordServerResponse, F as recordTransition, G as registerCheck, H as registerTraitSnapshot, I as renderStateMachineToDomData, J as renderStateMachineToSvg, K as subscribeToVerification, L as updateAssetStatus, M as updateBridgeHealth, N as updateCheck, O as waitForTransition } from '../cn-DkGYzPOg.cjs';
 import { FieldValue, EntityRow, EventPayload } from '@almadar/core';
 export { AssetLoadStatus, BridgeHealth, CheckStatus, EffectTrace, EventLogEntry, OrbitalVerificationAPI, ServerResponseTrace, TraitStateSnapshot, TransitionTrace, VerificationCheck, VerificationSnapshot, VerificationSummary } from '@almadar/core';
-import '../paintDispatch-DXygiK7M.cjs';
+import '../paintDispatch-B5pPeSEp.cjs';
 import 'clsx';
 
 /**

package/dist/lib/index.d.ts

@@ -1,7 +1,7 @@
-export { C as ContentSegment, D as DEFAULT_CONFIG, a as DomEntityBox, b as DomLayoutData, c as DomOutputsBox, d as DomStateNode, e as DomTransitionLabel, f as DomTransitionPath, E as EntityDefinition, R as RenderOptions, S as StateDefinition, g as StateMachineDefinition, T as TraitSnapshotGetter, h as TransitionDefinition, V as VisualizerConfig, i as bindCanvasCapture, j as bindEventBus, k as bindLastDrawables, l as bindTraitStateGetter, m as clearVerification, n as cn, o as extractOutputsFromTransitions, p as extractStateMachine, q as formatGuard, r as getAllChecks, s as getBridgeHealth, t as getEffectSummary, u as getSnapshot, v as getSummary, w as getTraitSnapshots, x as getTransitions, y as getTransitionsForTrait, z as parseContentSegments, A as parseMarkdownWithCodeBlocks, B as recordServerResponse, F as recordTransition, G as registerCheck, H as registerTraitSnapshot, I as renderStateMachineToDomData, J as renderStateMachineToSvg, K as subscribeToVerification, L as updateAssetStatus, M as updateBridgeHealth, N as updateCheck, O as waitForTransition } from '../cn-CCaph5o9.js';
+export { C as ContentSegment, D as DEFAULT_CONFIG, a as DomEntityBox, b as DomLayoutData, c as DomOutputsBox, d as DomStateNode, e as DomTransitionLabel, f as DomTransitionPath, E as EntityDefinition, R as RenderOptions, S as StateDefinition, g as StateMachineDefinition, T as TraitSnapshotGetter, h as TransitionDefinition, V as VisualizerConfig, i as bindCanvasCapture, j as bindEventBus, k as bindLastDrawables, l as bindTraitStateGetter, m as clearVerification, n as cn, o as extractOutputsFromTransitions, p as extractStateMachine, q as formatGuard, r as getAllChecks, s as getBridgeHealth, t as getEffectSummary, u as getSnapshot, v as getSummary, w as getTraitSnapshots, x as getTransitions, y as getTransitionsForTrait, z as parseContentSegments, A as parseMarkdownWithCodeBlocks, B as recordServerResponse, F as recordTransition, G as registerCheck, H as registerTraitSnapshot, I as renderStateMachineToDomData, J as renderStateMachineToSvg, K as subscribeToVerification, L as updateAssetStatus, M as updateBridgeHealth, N as updateCheck, O as waitForTransition } from '../cn-Do5Ra3l3.js';
 import { FieldValue, EntityRow, EventPayload } from '@almadar/core';
 export { AssetLoadStatus, BridgeHealth, CheckStatus, EffectTrace, EventLogEntry, OrbitalVerificationAPI, ServerResponseTrace, TraitStateSnapshot, TransitionTrace, VerificationCheck, VerificationSnapshot, VerificationSummary } from '@almadar/core';
-import '../paintDispatch-DXygiK7M.js';
+import '../paintDispatch-B5pPeSEp.js';
 import 'clsx';
 
 /**

package/dist/{paintDispatch-DXygiK7M.d.cts → paintDispatch-B5pPeSEp.d.cts}

@@ -17,6 +17,11 @@ interface PainterShadow {
     color: string;
     blur: number;
 }
+/** One color stop of a {@link PainterGradient}; `offset` is 0..1 along the gradient. */
+interface PainterGradientStop {
+    offset: number;
+    color: string;
+}
 
 /**
  * Drawable contract — the shared vocabulary every neutral drawable primitive
@@ -110,6 +115,64 @@ interface DrawSpriteProps extends DrawableBase {
  */
 
 type ShapeKind = 'cell' | 'rect' | 'ellipse' | 'poly' | 'path';
+/** One gradient color stop; `offset` is 0..1 along the gradient axis. */
+type DrawShapeGradientStop = PainterGradientStop;
+/**
+ * A gradient fill in world units relative to the cell's projected top-left —
+ * same coordinate convention as `points` and `d`. Overrides `fill` when present.
+ */
+interface DrawShapeGradient {
+    kind: 'linear' | 'radial';
+    /** Linear start point in world units. */
+    from?: PainterPoint;
+    /** Linear end point in world units. */
+    to?: PainterPoint;
+    /** Radial center in world units. */
+    center?: PainterPoint;
+    /** Radial radius in world units. */
+    radius?: number;
+    /** Ordered color stops. */
+    stops: DrawShapeGradientStop[];
+}
+/** A soft glow / drop-shadow behind the shape; `blur` is in world units. */
+interface DrawShapeShadow {
+    color: string;
+    blur: number;
+}
+/**
+ * One keyframe of a {@link DrawShapeAnimation}: `at` is the 0..1 position in
+ * the cycle; every other field overrides the shape's base prop at that moment.
+ */
+interface DrawShapeKeyframe {
+    at: number;
+    offsetX?: number;
+    offsetY?: number;
+    rotate?: number;
+    opacity?: number;
+    radiusX?: number;
+    radiusY?: number;
+    width?: number;
+    height?: number;
+    strokeWidth?: number;
+    fill?: string;
+    stroke?: string;
+    shadow?: DrawShapeShadow;
+}
+/**
+ * Declarative keyframe animation for a drawable. The host runs a paint clock
+ * while any drawable declares one; numeric tracks lerp between keyframes,
+ * string tracks hold the previous keyframe's value, `shadow` lerps `blur` and
+ * holds `color`. A track starts from the shape's base prop until its first
+ * keyframe defines it.
+ */
+interface DrawShapeAnimation {
+    /** One cycle length in ms. */
+    durationMs: number;
+    /** Loop the cycle (default true); false plays once and holds the final keyframes. */
+    loop?: boolean;
+    /** Keyframes ordered by `at` (0..1). */
+    keyframes: DrawShapeKeyframe[];
+}
 interface DrawShapeProps extends DrawableBase {
     type: 'draw-shape';
     shape: ShapeKind;
@@ -125,7 +188,7 @@ interface DrawShapeProps extends DrawableBase {
     radiusX?: number;
     /** Ellipse vertical radius in world units; omitted → `radiusX` (a circle). */
     radiusY?: number;
-    /** Fine nudge from the anchor point in world units. */
+    /** Fine nudge in world units — applies to every shape kind except `cell` (rect/ellipse from their anchor point; poly/path from the projected top-left). */
     offsetX?: number;
     offsetY?: number;
     /** Poly vertices as world-unit offsets relative to the cell's projected top-left. */
@@ -133,8 +196,18 @@ interface DrawShapeProps extends DrawableBase {
     /** SVG path data in world units relative to the cell's projected top-left — same coordinate convention as `points`. */
     d?: string;
     fill?: string;
+    /** Gradient fill in world units; overrides `fill` when present. */
+    gradient?: DrawShapeGradient;
     stroke?: string;
     strokeWidth?: number;
+    /** Rotation in radians (painter units, same as `draw-group`), about `pivot`. */
+    rotate?: number;
+    /** Rotation pivot in world units relative to the cell's projected top-left; default `{x:0.5, y:0.5}` (cell center). */
+    pivot?: PainterPoint;
+    /** Soft glow / drop-shadow behind the shape; `blur` in world units. */
+    shadow?: DrawShapeShadow;
+    /** Keyframe animation over this shape's props; the host runs a paint clock while present. */
+    animation?: DrawShapeAnimation;
     /** 0..1 opacity. */
     opacity?: number;
 }

package/dist/{paintDispatch-DXygiK7M.d.ts → paintDispatch-B5pPeSEp.d.ts}

@@ -17,6 +17,11 @@ interface PainterShadow {
     color: string;
     blur: number;
 }
+/** One color stop of a {@link PainterGradient}; `offset` is 0..1 along the gradient. */
+interface PainterGradientStop {
+    offset: number;
+    color: string;
+}
 
 /**
  * Drawable contract — the shared vocabulary every neutral drawable primitive
@@ -110,6 +115,64 @@ interface DrawSpriteProps extends DrawableBase {
  */
 
 type ShapeKind = 'cell' | 'rect' | 'ellipse' | 'poly' | 'path';
+/** One gradient color stop; `offset` is 0..1 along the gradient axis. */
+type DrawShapeGradientStop = PainterGradientStop;
+/**
+ * A gradient fill in world units relative to the cell's projected top-left —
+ * same coordinate convention as `points` and `d`. Overrides `fill` when present.
+ */
+interface DrawShapeGradient {
+    kind: 'linear' | 'radial';
+    /** Linear start point in world units. */
+    from?: PainterPoint;
+    /** Linear end point in world units. */
+    to?: PainterPoint;
+    /** Radial center in world units. */
+    center?: PainterPoint;
+    /** Radial radius in world units. */
+    radius?: number;
+    /** Ordered color stops. */
+    stops: DrawShapeGradientStop[];
+}
+/** A soft glow / drop-shadow behind the shape; `blur` is in world units. */
+interface DrawShapeShadow {
+    color: string;
+    blur: number;
+}
+/**
+ * One keyframe of a {@link DrawShapeAnimation}: `at` is the 0..1 position in
+ * the cycle; every other field overrides the shape's base prop at that moment.
+ */
+interface DrawShapeKeyframe {
+    at: number;
+    offsetX?: number;
+    offsetY?: number;
+    rotate?: number;
+    opacity?: number;
+    radiusX?: number;
+    radiusY?: number;
+    width?: number;
+    height?: number;
+    strokeWidth?: number;
+    fill?: string;
+    stroke?: string;
+    shadow?: DrawShapeShadow;
+}
+/**
+ * Declarative keyframe animation for a drawable. The host runs a paint clock
+ * while any drawable declares one; numeric tracks lerp between keyframes,
+ * string tracks hold the previous keyframe's value, `shadow` lerps `blur` and
+ * holds `color`. A track starts from the shape's base prop until its first
+ * keyframe defines it.
+ */
+interface DrawShapeAnimation {
+    /** One cycle length in ms. */
+    durationMs: number;
+    /** Loop the cycle (default true); false plays once and holds the final keyframes. */
+    loop?: boolean;
+    /** Keyframes ordered by `at` (0..1). */
+    keyframes: DrawShapeKeyframe[];
+}
 interface DrawShapeProps extends DrawableBase {
     type: 'draw-shape';
     shape: ShapeKind;
@@ -125,7 +188,7 @@ interface DrawShapeProps extends DrawableBase {
     radiusX?: number;
     /** Ellipse vertical radius in world units; omitted → `radiusX` (a circle). */
     radiusY?: number;
-    /** Fine nudge from the anchor point in world units. */
+    /** Fine nudge in world units — applies to every shape kind except `cell` (rect/ellipse from their anchor point; poly/path from the projected top-left). */
     offsetX?: number;
     offsetY?: number;
     /** Poly vertices as world-unit offsets relative to the cell's projected top-left. */
@@ -133,8 +196,18 @@ interface DrawShapeProps extends DrawableBase {
     /** SVG path data in world units relative to the cell's projected top-left — same coordinate convention as `points`. */
     d?: string;
     fill?: string;
+    /** Gradient fill in world units; overrides `fill` when present. */
+    gradient?: DrawShapeGradient;
     stroke?: string;
     strokeWidth?: number;
+    /** Rotation in radians (painter units, same as `draw-group`), about `pivot`. */
+    rotate?: number;
+    /** Rotation pivot in world units relative to the cell's projected top-left; default `{x:0.5, y:0.5}` (cell center). */
+    pivot?: PainterPoint;
+    /** Soft glow / drop-shadow behind the shape; `blur` in world units. */
+    shadow?: DrawShapeShadow;
+    /** Keyframe animation over this shape's props; the host runs a paint clock while present. */
+    animation?: DrawShapeAnimation;
     /** 0..1 opacity. */
     opacity?: number;
 }