@lumencast/runtime 0.5.0 → 0.7.0

package/src/render/tree.tsx

@@ -15,6 +15,15 @@ import { StaggerContext, computeStaggerDelayMs } from "./stagger-context";
 import { useBindAnimate } from "./bind-animate";
 import { checkNodeProps } from "./prop-allowlist";
 import { emitDiagnostic } from "./diagnostics";
+import { buildMask, parseMaskSpec, MASK_FEATHER_PAD } from "./mask";
+import { parseBlendMode } from "./blend-mode";
+import { useAllowedHosts } from "./allowed-hosts";
+import { useShapeIndex } from "./shape-index";
+import {
+  buildMaskCoverageFromShape,
+  buildMaskCoverageFromGroup,
+  coverageIsFeathered,
+} from "./shape-geometry";
 
 export interface TreeProps {
   node: RenderNode;
@@ -34,6 +43,12 @@ function Node({ node, store }: TreeProps): ReactNode {
   // re-renders only fire on touched paths.
   useSignals();
   const scope = usePathScope();
+  // ADR 002 §3.2 (#E) — the bundle's host allowlist, for gating an image
+  // mask source (T1/T2). `undefined` = deny every remote host.
+  const allowedHosts = useAllowedHosts();
+  // ADR 002 A2.1 (#K) — the bundle-wide `id → shape` index, for resolving a
+  // `mask.source.kind:"shape"` ref to inlined coverage geometry.
+  const shapeIndex = useShapeIndex();
 
   // Hooks must run unconditionally — the early-return for unknown
   // kinds happens *after* every hook has fired.
@@ -94,14 +109,67 @@ function Node({ node, store }: TreeProps): ReactNode {
   // primitives. Pulled out of `resolved` so primitives can ignore
   // them ; the wrapper composes with whatever transform/opacity the
   // primitive's own framer-motion may apply.
+  //
+  // ADR 002 §3.1 (D1) — absolute placement. The compiler flattens LSML
+  // `position:{x,y}` → `resolved.x`/`resolved.y` and `size:{w,h}` →
+  // `resolved.width`/`resolved.height` on EVERY primitive (compile.ts
+  // §universal-props). The wrapper consumes them as absolute placement,
+  // EXCEPT on `frame` : a frame already positions itself (it reads
+  // `x`/`y`/`width`/`height` into its own absolute box + transform), so
+  // letting the wrapper pin it too would double the offset. Every other
+  // kind (text/shape/image/media/instance/stack/grid) is placed by the
+  // wrapper. A node without `x`/`y` gets `position: undefined` → normal
+  // flow (RC#2 non-regression).
+  // A masked node with a real blend hoists that blend above the mask wrapper
+  // (the mask isolates an inner `mix-blend-mode`). Compute it once here so the
+  // universal prop and the wrapper below agree.
+  const maskHoistsBlend =
+    resolved.mask !== undefined &&
+    typeof resolved.blendMode === "string" &&
+    parseBlendMode(resolved.blendMode) !== undefined;
   const universal = {
     visible: typeof resolved.visible === "boolean" ? resolved.visible : undefined,
     opacity:
       typeof resolved.universal_opacity === "number" ? resolved.universal_opacity : undefined,
-    rotation: typeof resolved.rotation === "number" ? resolved.rotation : undefined,
+    // A frame applies its own static rotation (frame.tsx) so it pivots around
+    // its centre ; the wrapper has no box for a self-positioning frame and would
+    // pivot around a collapsed (0-height) box. Non-frames keep it on the wrapper
+    // (they DO carry position/size there).
+    rotation:
+      node.kind === "frame"
+        ? undefined
+        : typeof resolved.rotation === "number"
+          ? resolved.rotation
+          : undefined,
+    // Mirror (Figma scaleY(-1)) — like rotation, a frame mirrors itself
+    // (frame.tsx) ; non-frames carry it on the wrapper, composed with rotation.
+    flipY: node.kind === "frame" ? undefined : resolved.flipY === true,
+    blur: typeof resolved.blur === "number" ? resolved.blur : undefined,
     sizing: extractSizing(resolved.sizing),
+    position: node.kind === "frame" ? undefined : extractPosition(resolved),
+    size: node.kind === "frame" ? undefined : extractSize(resolved),
+    // ADR 002 §3.2 (D2 / #D) — `blendMode` is a universal prop on every
+    // primitive ; the wrapper re-validates it against the closed enum
+    // before applying `mix-blend-mode` (T4 runtime gate). Pass the raw
+    // resolved value through ; the wrapper omits anything off the enum.
+    // A blend on a MASKED node is hoisted ABOVE the mask wrapper (see below) —
+    // a CSS mask forms an isolating group, so a `mix-blend-mode` left on the
+    // (inner) wrapper would fold over a transparent backdrop (the caramel
+    // hard-light showed the raw blue wave instead of compositing over the warm
+    // gradient). Drop it here when it will be hoisted.
+    blendMode:
+      typeof resolved.blendMode === "string" && !maskHoistsBlend ? resolved.blendMode : undefined,
   };
 
+  // ADR 002 §3.1 (D1) — a container holding at least one absolutely
+  // positioned child must establish the containing block so the child's
+  // `left/top` resolve against it (and not a distant ancestor). `Frame`
+  // is already `position:absolute` ; `Stack`/`Grid` flip to
+  // `position:relative` only when needed (no change for pure auto-layout
+  // boards — RC#2). Threaded to the primitive so the layout container
+  // decides ; a node without absolute children is untouched.
+  const hasAbsoluteChild = node.children?.some(childIsAbsolute) ?? false;
+
   // Merge live-interpolated colour values (§6.5) over the resolved
   // props — the primitive re-validates them through `parseCssColor`.
   const resolvedWithColors =
@@ -109,19 +177,113 @@ function Node({ node, store }: TreeProps): ReactNode {
       ? { ...resolved, ...bindAnimate.colorProps }
       : resolved;
 
-  let body = (
-    <UniversalWrapper {...universal}>
-      <Primitive
-        resolved={resolvedWithColors}
-        nodeId={node.id}
-        transitionFor={transitionFor}
-        animateInitial={node.animate_initial}
-      >
-        {children}
-      </Primitive>
-    </UniversalWrapper>
+  const primitiveEl = (
+    <Primitive
+      resolved={resolvedWithColors}
+      nodeId={node.id}
+      transitionFor={transitionFor}
+      animateInitial={node.animate_initial}
+      establishesContainingBlock={hasAbsoluteChild}
+    >
+      {children}
+    </Primitive>
   );
 
+  // ADR 002 §3.2 (#E) — a typed `mask` lowered onto the node. Build it up-front
+  // so an IMAGE mask (CSS `mask-image`) can sit INSIDE the wrapper — it must
+  // rotate WITH the content under the wrapper's transform, else an outer
+  // un-rotated mask clips a mis-rotated crop (the caramel wave shrank off-box).
+  // A group/shape SVG mask stays OUTSIDE (its coverage is authored in the parent
+  // coordinate space). The mask is built ENTIRELY from typed fields (T3) ; enums
+  // re-validated (T4), image source host-gated (T1/T2) before any `href`.
+  let built: ReturnType<typeof buildMask> | null = null;
+  if (resolved.mask !== undefined) {
+    const spec = parseMaskSpec(resolved.mask, node.id);
+    // #K/#O — resolve a ref to its inlined coverage geometry, routed on the
+    // referenced node's `kind` (shape → own outline ; frame → visible children).
+    const resolveShape = (ref: string) => {
+      const target = shapeIndex.get(ref);
+      if (!target) return null;
+      return target.kind === "frame"
+        ? buildMaskCoverageFromGroup(target, target.id)
+        : buildMaskCoverageFromShape(target, target.id);
+    };
+    // A FEATHERED coverage (a blurred mask edge, e.g. the bg-texture ellipse) is
+    // the only case that needs the wrapper feather pad. Detect it from the mask
+    // SOURCE group's children so a sharp mask skips the pad entirely (no extra
+    // wrapper, no structural change).
+    let feather = false;
+    if (spec) {
+      const src = spec.source as { kind?: string; ref?: unknown };
+      if ((src.kind === "group" || src.kind === "shape") && typeof src.ref === "string") {
+        const t = shapeIndex.get(src.ref);
+        feather = t ? coverageIsFeathered(t) : false;
+      }
+    }
+    built = spec
+      ? buildMask(spec, allowedHosts, node.id, resolveShape, extractSize(resolved), feather)
+      : null;
+  }
+  const isImageMask =
+    built !== null && built.style != null && "maskImage" in (built.style as object);
+
+  let inner: ReactNode = primitiveEl;
+  if (built && isImageMask) {
+    // Image mask co-located with the content : the CSS mask-image is on a box the
+    // wrapper's transform rotates, keeping its alpha aligned to the wave.
+    inner = <div style={{ width: "100%", height: "100%", ...built.style }}>{inner}</div>;
+  }
+
+  let body = <UniversalWrapper {...universal}>{inner}</UniversalWrapper>;
+
+  if (built && !isImageMask) {
+    // The (group/shape) mask wrapper MUST own a real box for the CSS mask to clip
+    // anything : its content is `position:absolute`, so fill the parent's
+    // containing block to share the absolutely-placed body's coordinate space.
+    // `overflow:hidden` bounds the (oversized) masked content to this box — the
+    // CSS `mask` alone does NOT clip it (removing it leaked the 2786×1491 tile
+    // group everywhere).
+    // Only a FEATHERED mask grows the box (+ shifts the coverage, mask.tsx) ;
+    // a sharp mask uses pad 0 → inset:0, identical to the un-padded structure.
+    const pad = built.feather ? MASK_FEATHER_PAD : 0;
+    body = (
+      <div
+        style={{
+          position: "absolute",
+          inset: -pad,
+          overflow: "hidden",
+          ...built.style,
+        }}
+      >
+        <svg width={0} height={0} style={{ position: "absolute" }} aria-hidden>
+          <defs>{built.def}</defs>
+        </svg>
+        {/* Inner box inset by +PAD cancels the wrapper's −PAD grow for the
+            CONTENT — the body keeps its original coordinates while the masked
+            box (and its feathered rim) is the bigger one. */}
+        <div style={{ position: "absolute", inset: pad }}>{body}</div>
+      </div>
+    );
+  }
+  // Hoist the node's blend ABOVE the wrapper+mask : an outer box carrying ONLY
+  // `mix-blend-mode` (no transform / opacity / filter / mask) so it composites
+  // the masked result with the SCENE backdrop. The caramel 3d-render then
+  // hard-lights over the warm gradient (orange) instead of its raw image (blue).
+  if (built && maskHoistsBlend) {
+    const hoisted = parseBlendMode(resolved.blendMode);
+    body = (
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          mixBlendMode: hoisted as React.CSSProperties["mixBlendMode"],
+        }}
+      >
+        {body}
+      </div>
+    );
+  }
+
   // Scalar bindAnimate channels apply on a wrapping motion.div (same
   // composition model as UniversalWrapper). Motion values mutate the
   // style directly — zero React re-render per frame on the hot path.
@@ -156,6 +318,46 @@ function extractSizing(value: unknown): { x?: SizingMode; y?: SizingMode } | und
   return out.x !== undefined || out.y !== undefined ? out : undefined;
 }
 
+function finite(v: unknown): number | undefined {
+  return typeof v === "number" && Number.isFinite(v) ? v : undefined;
+}
+
+/** ADR 002 §3.1 (D1) — form the absolute-placement `position:{x,y}` from
+ *  the compiler-flattened `resolved.x`/`resolved.y`. BOTH axes must be
+ *  finite numbers : a partial or malformed pair yields `undefined` (the
+ *  node stays in the normal flow — RC#3 mistyped-position is inert, not
+ *  injected). Values are plain numbers, never untrusted strings. */
+function extractPosition(resolved: Record<string, unknown>): { x: number; y: number } | undefined {
+  const x = finite(resolved.x);
+  const y = finite(resolved.y);
+  if (x === undefined || y === undefined) return undefined;
+  return { x, y };
+}
+
+/** ADR 002 §3.1 (D1) — the absolute box size from `resolved.width`/
+ *  `resolved.height`. Only meaningful alongside `position` (the wrapper
+ *  ignores it otherwise). Partial sizes are allowed (one axis hugs). */
+function extractSize(resolved: Record<string, unknown>): { w?: number; h?: number } | undefined {
+  const w = finite(resolved.width);
+  const h = finite(resolved.height);
+  if (w === undefined && h === undefined) return undefined;
+  return { w, h };
+}
+
+/** True when a child node carries a finite `{x,y}` absolute position
+ *  (static prop OR a bound `x`/`y`). Used by a container primitive to
+ *  decide whether to establish a positioned containing block. A bound
+ *  position is treated as "absolute" structurally — the key presence is
+ *  static even if the value moves live. */
+function childIsAbsolute(child: RenderNode): boolean {
+  if (child.kind === "frame") return false; // a frame positions itself
+  const props = child.props ?? {};
+  const bindings = child.bindings ?? {};
+  const hasX = finite(props.x) !== undefined || "x" in bindings;
+  const hasY = finite(props.y) !== undefined || "y" in bindings;
+  return hasX && hasY;
+}
+
 function Repeat({ node, store }: TreeProps): ReactNode {
   useSignals();
   const scope = usePathScope();

package/src/render/universal-wrapper.tsx

@@ -1,6 +1,6 @@
 // Universal-props wrapper (LSML 1.1 §5.4).
 //
-// Every primitive renders inside this wrapper, which applies the four
+// Every primitive renders inside this wrapper, which applies the
 // universal props uniformly :
 //
 //   - `visible: false` → display: none (slot collapses in flex layouts)
@@ -9,6 +9,15 @@
 //   - `rotation` → CSS transform: rotate(<deg>)
 //   - `sizing.x`/`sizing.y` → flex shorthand on the wrapping div, lets
 //     a primitive participate in its parent flex layout's auto-sizing
+//   - `position.{x,y}` → absolute placement relative to the nearest
+//     positioned ancestor (ADR 002 §3.1 / D1) : a child carrying
+//     `position` is taken out of the normal flow and pinned at
+//     `left:x; top:y`. A child WITHOUT `position` keeps the normal flow
+//     untouched (auto-layout intact) — this is the Figma free-form vs
+//     auto-layout duality, honoured at render. `size.{w,h}` fixes the
+//     absolute box (the rating square's 24×7 / 14×22 text boxes) ;
+//     omitted → hug the content. Position is a static layout property and
+//     never animates (it stays off the 0-layout-event broadcast hot path).
 //
 // `bindUniversal` is resolved by the Tree renderer before the wrapper
 // sees its values, so this component only deals with concrete numbers
@@ -16,13 +25,35 @@
 
 import type { ReactNode, CSSProperties } from "react";
 
+import { parseBlendMode } from "./blend-mode";
+
 export type SizingMode = "fixed" | "hug" | "fill";
 
 export interface UniversalProps {
   visible?: boolean;
   opacity?: number;
   rotation?: number;
+  /** Mirror across the local X axis (Figma `scaleY(-1)`, negative-determinant
+   *  transform). Composed with `rotation` on the wrapper so image/shape leaves
+   *  mirror like frames do — without it the caramel 3d-render rendered as the
+   *  un-mirrored wave (blue where Figma is orange). */
+  flipY?: boolean;
+  /** Figma LAYER_BLUR radius (px) → CSS `filter: blur()`. */
+  blur?: number;
   sizing?: { x?: SizingMode; y?: SizingMode };
+  /** ADR 002 §3.1 (D1) — parent-relative absolute placement. When set,
+   *  the wrapper pins the primitive at `left:x; top:y` (position:absolute)
+   *  instead of leaving it in the normal flow. Both axes are required
+   *  (the Tree only forms this object from a finite `{x,y}` pair). */
+  position?: { x: number; y: number };
+  /** ADR 002 §3.1 (D1) — the absolute box's fixed size, applied only
+   *  alongside `position`. Omitted → the box hugs its content. */
+  size?: { w?: number; h?: number };
+  /** ADR 002 §3.2 (D2 / #D) — a Figma blend mode → CSS `mix-blend-mode`.
+   *  The value is re-validated against the closed enum at render
+   *  (`parseBlendMode`, T4 double-gate) ; anything outside the allowlist
+   *  is omitted, never written to the style. */
+  blendMode?: string;
 }
 
 export interface UniversalWrapperProps extends UniversalProps {
@@ -48,48 +79,124 @@ function flexFor(mode: SizingMode | undefined): string | undefined {
   }
 }
 
+/** Collapse a {x,y} sizing pair to a single `flex` shorthand. When both axes
+ *  agree, that value ; otherwise honour x (horizontal stacks dominate broadcast
+ *  boards — the renderer doesn't know the parent's axis here). */
+function sizingToFlex(sizing: { x?: SizingMode; y?: SizingMode } | undefined): string | undefined {
+  const x = flexFor(sizing?.x);
+  const y = flexFor(sizing?.y);
+  if (x === y && x !== undefined) return x;
+  return x ?? y;
+}
+
 export function UniversalWrapper({
   visible,
   opacity,
   rotation,
+  flipY,
+  blur,
   sizing,
+  position,
+  size,
+  blendMode,
   children,
 }: UniversalWrapperProps) {
   if (visible === false) {
     return null; // slot collapses in flex/grid layouts (§5.4)
   }
 
+  // ADR 002 §3.2 (D2 / #D) — re-validate the blend mode against the
+  // closed enum at render (T4 runtime gate). A recognised mode yields a
+  // CSS `mix-blend-mode` keyword ; anything else is `undefined` and never
+  // reaches the style (no free CSS string, no passthrough).
+  const mixBlendMode = parseBlendMode(blendMode);
   // No-op fast path — when no universal props are set, render children
   // directly. Lets simple bundles avoid an extra DOM node per primitive.
+  // A child WITHOUT `position` never enters the absolute branch, so the
+  // normal flow (auto-layout) is left exactly as before (ADR 002 §3.1
+  // non-regression : RC#2).
   const hasOpacity = typeof opacity === "number" && opacity !== 1;
   const hasRotation = typeof rotation === "number" && rotation !== 0;
+  const hasFlipY = flipY === true;
+  const hasBlur = typeof blur === "number" && blur > 0;
   const hasSizing = sizing?.x !== undefined || sizing?.y !== undefined;
-  if (!hasOpacity && !hasRotation && !hasSizing) {
+  const hasPosition = position !== undefined;
+  const hasBlendMode = mixBlendMode !== undefined;
+  if (
+    !hasOpacity &&
+    !hasRotation &&
+    !hasFlipY &&
+    !hasBlur &&
+    !hasSizing &&
+    !hasPosition &&
+    !hasBlendMode
+  ) {
     return <>{children}</>;
   }
 
-  const style: CSSProperties = {};
-  if (hasOpacity) style.opacity = opacity;
-  if (hasRotation) style.transform = `rotate(${rotation}deg)`;
+  // Build the transform string (rotation + mirror). `rotate(θ) scaleY(-1)`
+  // applies the mirror first (rightmost), then the rotation — matching Figma's
+  // `rotate·scaleY(-1)` matrix (the caramel's −114° + mirror).
+  let transform: string | undefined;
+  if (hasRotation || hasFlipY) {
+    const parts: string[] = [];
+    if (hasRotation) parts.push(`rotate(${rotation}deg)`);
+    if (hasFlipY) parts.push("scaleY(-1)");
+    transform = parts.join(" ");
+  }
+  // Figma LAYER_BLUR → CSS blur (radius ≈ 2× the CSS sigma, measured on 817:3).
+  // (A gamma-correct linearRGB blur was tried to close the bg-shine corner's ~23 R
+  // deficit vs the Figma PNG ; it measured WORSE — the deficit is in the high-R
+  // channel, which is gamma-INVARIANT — and supersampling the render closed that
+  // corner anyway. The Chromium(sRGB)≠Figma(linearRGB) blur gap is else irreducible.)
+  const filter = hasBlur ? `blur(${blur / 2}px)` : undefined;
 
-  // sizing.x / sizing.y map to flex / row-flex behaviour. The
-  // x-axis applies along the main axis of a horizontal stack ; the
-  // y-axis along a vertical stack. We emit `flex` (covers both via
-  // CSS's flex-direction) and rely on the parent stack for orientation.
-  if (hasSizing) {
-    const x = flexFor(sizing?.x);
-    const y = flexFor(sizing?.y);
-    // Emit a single flex declaration when both axes agree, otherwise
-    // ship explicit grow/shrink/basis based on the dominant intent.
-    if (x === y && x !== undefined) {
-      style.flex = x;
-    } else {
-      // Heuristic : honour x for horizontal stacks (most common in
-      // broadcast UIs). Renderer doesn't know the parent's axis here ;
-      // a future iteration could thread that through context.
-      style.flex = x ?? y;
+  const sizingFlex = hasSizing ? sizingToFlex(sizing) : undefined;
+
+  // A `mix-blend-mode` composites with the SCENE backdrop only when its element
+  // does not also form an isolating group. `transform`, `opacity < 1` and
+  // `filter` each force the element into its own group, so the blend would fold
+  // over a TRANSPARENT backdrop instead — the caramel hard-light then shows the
+  // raw blue wave rather than compositing over the warm gradient, a screen layer
+  // silently no-ops. When the node needs BOTH a blend and one of those, SPLIT:
+  // the blend (+ absolute placement) lives on the OUTER box, the isolating
+  // transform/opacity/blur on an INNER box that carries the sized content.
+  if (hasBlendMode && (hasOpacity || transform !== undefined || filter !== undefined)) {
+    const outer: CSSProperties = { mixBlendMode: mixBlendMode as CSSProperties["mixBlendMode"] };
+    if (hasPosition) {
+      outer.position = "absolute";
+      outer.left = position.x;
+      outer.top = position.y;
     }
+    if (sizingFlex !== undefined) outer.flex = sizingFlex;
+    const inner: CSSProperties = {};
+    if (typeof size?.w === "number") inner.width = size.w;
+    if (typeof size?.h === "number") inner.height = size.h;
+    if (hasOpacity) inner.opacity = opacity;
+    if (transform !== undefined) inner.transform = transform;
+    if (filter !== undefined) inner.filter = filter;
+    return (
+      <div style={outer}>
+        <div style={inner}>{children}</div>
+      </div>
+    );
+  }
+
+  const style: CSSProperties = {};
+  if (hasOpacity) style.opacity = opacity;
+  if (transform !== undefined) style.transform = transform;
+  if (filter !== undefined) style.filter = filter;
+  if (hasBlendMode) style.mixBlendMode = mixBlendMode as CSSProperties["mixBlendMode"];
+  // ADR 002 §3.1 (D1) — absolute placement relative to the nearest positioned
+  // ancestor. `size` (when present) fixes the box ; otherwise it hugs content.
+  if (hasPosition) {
+    style.position = "absolute";
+    style.left = position.x;
+    style.top = position.y;
+    if (typeof size?.w === "number") style.width = size.w;
+    if (typeof size?.h === "number") style.height = size.h;
   }
+  if (sizingFlex !== undefined) style.flex = sizingFlex;
 
   return <div style={style}>{children}</div>;
 }

package/src/transport/ws.ts

@@ -126,6 +126,14 @@ export class WsClient {
     void this.openSocket();
   }
 
+  /** Resolve the current session token (the one used for the WS
+   *  subscription). Mirrors `setToken` swaps. Used by the bundle fetcher to
+   *  authenticate the render-bundle GET with the same credential. A
+   *  `LumencastTokenProvider` is awaited. */
+  resolveCurrentToken(): Promise<string> {
+    return resolveToken(this.token);
+  }
+
   /** Send `input` patches to the server. No-op if not connected. */
   sendInput(patches: Patch[]): void {
     if (!this.socket || this.socket.readyState !== this.WebSocketCtor.OPEN) return;

package/dist/broadcast-3vYij4k-.js

@@ -1,11 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { T as e } from "./tree-D5wYHpPu.js";
-import { u as m } from "./index-CyOlpZAL.js";
-function a() {
-  const { store: o, bundle: r } = m();
-  return /* @__PURE__ */ t(e, { node: r.root, store: o });
-}
-export {
-  a as BroadcastMode
-};
-//# sourceMappingURL=broadcast-3vYij4k-.js.map

package/dist/broadcast-3vYij4k-.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"broadcast-3vYij4k-.js","sources":["../src/modes/broadcast.tsx"],"sourcesContent":["import { Tree } from \"../render/tree\";\nimport { useLumencastRuntime } from \"../overlay/runtime-context\";\n\n/** Broadcast mode : pure scene render, no UI chrome. */\nexport function BroadcastMode() {\n  const { store, bundle } = useLumencastRuntime();\n  return <Tree node={bundle.root} store={store} />;\n}\n"],"names":["BroadcastMode","store","bundle","useLumencastRuntime","jsx","Tree"],"mappings":";;;AAIO,SAASA,IAAgB;AAC9B,QAAM,EAAE,OAAAC,GAAO,QAAAC,EAAA,IAAWC,EAAA;AAC1B,SAAO,gBAAAC,EAACC,GAAA,EAAK,MAAMH,EAAO,MAAM,OAAAD,GAAc;AAChD;"}

package/dist/control-BFNkY7-6.js

@@ -1,16 +0,0 @@
-import { jsxs as e, Fragment as n, jsx as o } from "react/jsx-runtime";
-import { T as s } from "./tree-D5wYHpPu.js";
-import { S as m, C as a } from "./status-pill-DIpXc5du.js";
-import { u as i } from "./index-CyOlpZAL.js";
-function c() {
-  const { store: r, bundle: t } = i();
-  return /* @__PURE__ */ e(n, { children: [
-    /* @__PURE__ */ o(s, { node: t.root, store: r }),
-    /* @__PURE__ */ o(m, {}),
-    /* @__PURE__ */ o(a, {})
-  ] });
-}
-export {
-  c as ControlMode
-};
-//# sourceMappingURL=control-BFNkY7-6.js.map

package/dist/control-BFNkY7-6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"control-BFNkY7-6.js","sources":["../src/modes/control.tsx"],"sourcesContent":["import { Tree } from \"../render/tree\";\nimport { ControlPanel } from \"../overlay/control\";\nimport { StatusPill } from \"../overlay/status-pill\";\nimport { useLumencastRuntime } from \"../overlay/runtime-context\";\n\n/** Control mode : scene + operator overlay (status pill + fields\n *  panel from operator_inputs). */\nexport function ControlMode() {\n  const { store, bundle } = useLumencastRuntime();\n  return (\n    <>\n      <Tree node={bundle.root} store={store} />\n      <StatusPill />\n      <ControlPanel />\n    </>\n  );\n}\n"],"names":["ControlMode","store","bundle","useLumencastRuntime","jsxs","Fragment","jsx","Tree","StatusPill","ControlPanel"],"mappings":";;;;AAOO,SAASA,IAAc;AAC5B,QAAM,EAAE,OAAAC,GAAO,QAAAC,EAAA,IAAWC,EAAA;AAC1B,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAK,MAAML,EAAO,MAAM,OAAAD,GAAc;AAAA,sBACtCO,GAAA,EAAW;AAAA,sBACXC,GAAA,CAAA,CAAa;AAAA,EAAA,GAChB;AAEJ;"}