@almadar/ui 5.110.0 → 5.112.0

package/dist/components/index.js

@@ -42,7 +42,7 @@ import { DndContext, useSensors, useSensor, PointerSensor, KeyboardSensor, useDr
 import { useSortable, arrayMove, sortableKeyboardCoordinates, SortableContext, rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useNodeId, ReactFlowProvider, Handle, Position } from '@xyflow/react';
-import { getPatternDefinition as getPatternDefinition$1, getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
+import { isDrawHostPattern, getPatternDefinition as getPatternDefinition$1, getComponentForPattern as getComponentForPattern$1 } from '@almadar/core/patterns';
 import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
 
 var __defProp = Object.defineProperty;
@@ -15258,6 +15258,13 @@ function bindCanvasCapture(captureFn) {
     window.__orbitalVerification.captureFrame = captureFn;
   }
 }
+function bindLastDrawables(getDrawables) {
+  if (typeof window === "undefined") return;
+  exposeOnWindow();
+  if (window.__orbitalVerification) {
+    window.__orbitalVerification.getLastDrawables = getDrawables;
+  }
+}
 function updateAssetStatus(url, status) {
   if (typeof window === "undefined") return;
   exposeOnWindow();
@@ -15319,8 +15326,12 @@ var init_useImageCache = __esm({
     init_verificationRegistry();
   }
 });
-function useCamera() {
-  const cameraRef = useRef({ x: 0, y: 0, zoom: 1 });
+function useCamera(initial) {
+  const cameraRef = useRef({
+    x: initial?.x ?? 0,
+    y: initial?.y ?? 0,
+    zoom: initial?.zoom ?? 1
+  });
   const targetCameraRef = useRef(null);
   const isDraggingRef = useRef(false);
   const dragDistanceRef = useRef(0);
@@ -15820,8 +15831,9 @@ var init_DrawSprite = __esm({
         if (!r) return;
         src = { x: r.sx, y: r.sy, w: r.sw, h: r.sh };
       }
-      const w = node.width ?? (src ? src.w : tex.width);
-      const h = node.height ?? (src ? src.h : tex.height);
+      const tw = dctx.projector.tileWidth;
+      const w = node.width !== void 0 ? node.width * tw : src ? src.w : tex.width;
+      const h = node.height !== void 0 ? node.height * tw : src ? src.h : tex.height;
       const anchor = node.anchor ?? "top-left";
       const p = dctx.projector.anchorPoint(node.position, anchor);
       const dx = anchor === "top-left" ? p.x : p.x - w / 2;
@@ -15868,27 +15880,30 @@ var init_DrawShape = __esm({
         }
         case "rect": {
           const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "top-left");
-          const x = p.x + (node.offsetX ?? 0);
-          const y = p.y + (node.offsetY ?? 0);
-          const w = node.width ?? 0;
-          const h = node.height ?? 0;
+          const tw = dctx.projector.tileWidth;
+          const x = p.x + (node.offsetX ?? 0) * tw;
+          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);
           break;
         }
         case "ellipse": {
           const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "ground");
-          const cx = p.x + (node.offsetX ?? 0);
-          const cy = p.y + (node.offsetY ?? 0);
-          const rx = node.radiusX ?? 0;
-          const ry = node.radiusY ?? rx;
+          const tw = dctx.projector.tileWidth;
+          const cx = p.x + (node.offsetX ?? 0) * tw;
+          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);
           break;
         }
         case "poly": {
           const base = dctx.projector.project(node.position);
-          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x, y: base.y + pt.y }));
+          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);
           break;
@@ -16054,9 +16069,17 @@ function Canvas2D({
   scale = 0.4,
   showMinimap = true,
   followTarget,
+  cameraPos,
   bgColor
 }) {
+  const layerSummaries = drawables?.map((d) => {
+    if (!d || typeof d !== "object") return d;
+    const rec = d;
+    return { type: rec.type, itemsLen: Array.isArray(rec.items) ? rec.items.length : void 0, firstItem: Array.isArray(rec.items) ? rec.items[0] : void 0 };
+  });
+  console.error("[debug:Canvas2D] " + JSON.stringify({ projection, scale, cameraMode: camera, cameraPos, drawablesCount: drawables?.length, layerSummaries }));
   const backgroundImage = normalizeBackdrop(backgroundImageRaw);
+  const instanceId = useMemo(() => Math.random().toString(36).slice(2, 8), []);
   const isFree = projection === "free";
   const squareGrid = projection === "flat" || isFree || projection === "side";
   const layout = projection === "side" ? "free" : projection;
@@ -16119,10 +16142,12 @@ function Canvas2D({
     const canvas = canvasRef.current;
     if (!canvas) return;
     bindCanvasCapture(() => canvas.toDataURL("image/png"));
+    bindLastDrawables(() => drawables ?? null);
     return () => {
       bindCanvasCapture(() => null);
+      bindLastDrawables(() => null);
     };
-  }, []);
+  }, [drawables]);
   const enableCamera = camera === "pan-zoom";
   const {
     cameraRef,
@@ -16136,8 +16161,8 @@ function Canvas2D({
     zoomAtPoint,
     screenToWorld,
     lerpToTarget
-  } = useCamera();
-  const [, setAtlasVersion] = useState(0);
+  } = useCamera({ zoom: scale });
+  const [atlasVersion, setAtlasVersion] = useState(0);
   const bumpAtlas = useCallback(() => setAtlasVersion((v) => v + 1), []);
   const miniMapTiles = useMemo(() => {
     if (!showMinimap) return [];
@@ -16182,6 +16207,14 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
+    if (cameraPos && dragDistance() === 0) {
+      const p = projector.anchorPoint(cameraPos, "center");
+      cam.x = p.x - viewportSize.width / 2;
+      cam.y = p.y - viewportSize.height / 2;
+    }
+    const containerRect = containerRef.current?.getBoundingClientRect();
+    const canvasRect = canvas.getBoundingClientRect();
+    console.error("[debug:Canvas2D:draw:" + instanceId + "] " + JSON.stringify({ viewportSize, baseOffsetX, cam: { x: cam.x, y: cam.y, zoom: cam.zoom }, cameraPos, containerRect: containerRect ? { width: containerRect.width, height: containerRect.height } : null, canvasRect: canvasRect ? { width: canvasRect.width, height: canvasRect.height } : null }));
     const painter = createWebPainter(ctx, bumpAtlas);
     painter.save();
     painter.translate(viewportSize.width / 2, viewportSize.height / 2);
@@ -16205,6 +16238,9 @@ function Canvas2D({
   useEffect(() => {
     draw();
   }, [_imagePendingCount, draw]);
+  useEffect(() => {
+    draw();
+  }, [atlasVersion, draw]);
   useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     let running = true;
@@ -16449,6 +16485,7 @@ function Canvas({
   keyMap,
   keyUpMap
 }) {
+  console.error("[debug:Canvas] " + JSON.stringify({ mode, drawablesCount: drawables?.length, projection, camera }));
   const zoom = camera?.zoom;
   if (mode === "3d") {
     const props3d = {
@@ -16488,6 +16525,7 @@ function Canvas({
       camera: to2DCamera(camera?.mode),
       ...zoom !== void 0 ? { scale: zoom } : {},
       ...camera?.target !== void 0 ? { followTarget: camera.target } : {},
+      ...camera?.pos !== void 0 ? { cameraPos: camera.pos } : {},
       showMinimap,
       backgroundImage,
       ...backgroundColor !== void 0 ? { bgColor: backgroundColor } : {},
@@ -45728,7 +45766,7 @@ function SlotContentRenderer({
     const childrenConfig = content.props.children;
     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 = getPatternDefinition$1(content.pattern)?.drawHost === true;
+    const isDrawHost = isDrawHostPattern(content.pattern);
     const myPath = patternPath ?? "root";
     const renderedChildren = hasChildren && !isDrawHost ? renderPatternChildren(childrenConfig, onDismiss, content.id, myPath, content.sourceTrait, {
       slot: content.slot,

package/dist/{lib/themeTokens.d.ts → context/index.d.cts}

@@ -1,3 +1,10 @@
+export { U as UISlotContext, a as UISlotProvider, u as useSlotContent, b as useSlotHasContent, c as useUISlots } from '../UISlotContext-D8_SoDsD.cjs';
+export { A as ANONYMOUS_USER, B as BUILT_IN_THEMES, C as ColorMode, a as CurrentPagePathContext, b as CurrentPagePathProvider, c as CurrentPagePathProviderProps, D as DesignTheme, d as DesignThemeProvider, O as OrbitalThemeProvider, e as OrbitalThemeProviderProps, R as ResolvedMode, T as ThemeContext, f as ThemeProvider, g as ThemeProviderProps, U as UIThemeDefinition, h as UserContext, i as UserContextValue, j as UserData, k as UserProvider, l as UserProviderProps, u as useCurrentPagePath, m as useDesignTheme, n as useHasPermission, o as useHasRole, p as useTheme, q as useUser, r as useUserForEvaluation } from '../UserContext-bziZwgFL.cjs';
+import { ThemeRef, ThemeDefinition, ThemeTokens, ThemeVariant } from '@almadar/core';
+export { UISlot } from '@almadar/core';
+export { S as SlotAnimation, a as SlotChangeCallback, b as SlotContent, c as SlotRenderConfig, U as UISlotManager } from '../useUISlots-BesZYMks.cjs';
+import 'react';
+
 /**
  * themeTokens — runtime mirror of the orbital compiler's theme codegen.
  *
@@ -24,9 +31,9 @@
  *
  * @packageDocumentation
  */
-import type { ThemeDefinition, ThemeRef, ThemeTokens, ThemeVariant } from '@almadar/core';
+
 /** Resolved color mode. Mirrors `ThemeContext.resolvedMode`. */
-export type ThemeMode = 'light' | 'dark';
+type ThemeMode = 'light' | 'dark';
 /**
  * Convert `ThemeTokens` (+ optional dark variant) into a CSS custom-property
  * map keyed by variable name (e.g. `--color-primary`).
@@ -44,7 +51,7 @@ export type ThemeMode = 'light' | 'dark';
  * (`generate_tokens_css_dark`). Categories not present in `darkVariant` fall
  * back to the base tokens.
  */
-export declare function themeTokensToCssVars(tokens: ThemeTokens, mode?: ThemeMode, darkVariant?: ThemeVariant): Record<string, string>;
+declare function themeTokensToCssVars(tokens: ThemeTokens, mode?: ThemeMode, darkVariant?: ThemeVariant): Record<string, string>;
 /**
  * `ThemeRef` is `ThemeDefinition | string`. When it's a string, it's an
  * unresolved import reference (e.g. `"Ocean.theme"`) that should have been
@@ -52,4 +59,6 @@ export declare function themeTokensToCssVars(tokens: ThemeTokens, mode?: ThemeMo
  * string here, the upstream resolution path didn't run — return `undefined`
  * rather than guess. `OrbitalThemeProvider` falls through to passthrough.
  */
-export declare function resolveThemeForRuntime(theme: ThemeRef | undefined): ThemeDefinition | undefined;
+declare function resolveThemeForRuntime(theme: ThemeRef | undefined): ThemeDefinition | undefined;
+
+export { type ThemeMode, resolveThemeForRuntime, themeTokensToCssVars };

package/dist/context/index.d.ts

@@ -1,11 +1,64 @@
+export { U as UISlotContext, a as UISlotProvider, u as useSlotContent, b as useSlotHasContent, c as useUISlots } from '../UISlotContext-C1FsU9GB.js';
+export { A as ANONYMOUS_USER, B as BUILT_IN_THEMES, C as ColorMode, a as CurrentPagePathContext, b as CurrentPagePathProvider, c as CurrentPagePathProviderProps, D as DesignTheme, d as DesignThemeProvider, O as OrbitalThemeProvider, e as OrbitalThemeProviderProps, R as ResolvedMode, T as ThemeContext, f as ThemeProvider, g as ThemeProviderProps, U as UIThemeDefinition, h as UserContext, i as UserContextValue, j as UserData, k as UserProvider, l as UserProviderProps, u as useCurrentPagePath, m as useDesignTheme, n as useHasPermission, o as useHasRole, p as useTheme, q as useUser, r as useUserForEvaluation } from '../UserContext-bziZwgFL.js';
+import { ThemeRef, ThemeDefinition, ThemeTokens, ThemeVariant } from '@almadar/core';
+export { UISlot } from '@almadar/core';
+export { S as SlotAnimation, a as SlotChangeCallback, b as SlotContent, c as SlotRenderConfig, U as UISlotManager } from '../useUISlots-BesZYMks.js';
+import 'react';
+
 /**
- * Context barrel export
+ * themeTokens — runtime mirror of the orbital compiler's theme codegen.
+ *
+ * The compile path (orbital-rust/crates/orbital-shell-typescript/src/codegen/theme.rs)
+ * reads `OrbitalDefinition.theme.tokens` and emits CSS custom-property
+ * declarations into a `[data-theme="<name>-<mode>"]` block. The runtime
+ * does not parse compiled CSS — it reads the same `tokens` object directly
+ * and produces the same `{ '--color-primary': '…', '--radius-md': '…' }` map
+ * that the compiler emits.
+ *
+ * Keeping the two paths byte-identical at the variable level is the contract:
+ * editing tokens via the Studio Design System tab must produce the exact
+ * same rendered result as editing them in source and running `orbital
+ * compile`. The mapping rules here mirror `generate_tokens_css` /
+ * `generate_tokens_css_dark` (theme.rs:122–351).
+ *
+ * Compile vs runtime difference (intentional):
+ * - Compile emits the FULL set: schema overrides on top of defaults. This is
+ *   needed because the compiled CSS replaces the theme entirely.
+ * - Runtime emits ONLY the keys present in `tokens` (and `variants.dark`).
+ *   Missing keys cascade from the parent `[data-theme]` rule on the document
+ *   element. The provider scopes overrides to an orbital subtree without
+ *   shadowing inherited defaults.
+ *
+ * @packageDocumentation
  */
-export { UISlotProvider, useUISlots, useSlotContent, useSlotHasContent, UISlotContext, type UISlotManager, type UISlot, type SlotContent, type SlotRenderConfig, type SlotAnimation, type SlotChangeCallback, } from "../providers/UISlotContext";
-export { ThemeProvider, useTheme, BUILT_IN_THEMES, type UIThemeDefinition, type ThemeProviderProps, type ColorMode, type ResolvedMode, type DesignTheme, } from "../providers/ThemeContext";
-export { default as ThemeContext } from "../providers/ThemeContext";
-export { themeTokensToCssVars, resolveThemeForRuntime, type ThemeMode, } from "../lib/themeTokens";
-export { OrbitalThemeProvider, type OrbitalThemeProviderProps, } from "../providers/OrbitalThemeProvider";
-export { DesignThemeProvider, useDesignTheme } from "../providers/DesignThemeContext";
-export { CurrentPagePathProvider, CurrentPagePathContext, useCurrentPagePath, type CurrentPagePathProviderProps, } from "../providers/CurrentPagePathContext";
-export { UserProvider, UserContext, useUser, useHasRole, useHasPermission, useUserForEvaluation, ANONYMOUS_USER, type UserData, type UserContextValue, type UserProviderProps, } from "../providers/UserContext";
+
+/** Resolved color mode. Mirrors `ThemeContext.resolvedMode`. */
+type ThemeMode = 'light' | 'dark';
+/**
+ * Convert `ThemeTokens` (+ optional dark variant) into a CSS custom-property
+ * map keyed by variable name (e.g. `--color-primary`).
+ *
+ * Mapping rules (mirror theme.rs):
+ * - `tokens.colors.<k>`     → `--color-<k>`
+ * - `tokens.radii.<k>`      → `--radius-<k>`
+ * - `tokens.spacing.<k>`    → `--space-<k>`
+ * - `tokens.typography.<k>` → `--<k>` (keys already include their `font-`/
+ *                                       `letter-`/`line-` prefix)
+ * - `tokens.shadows.<k>`    → `--shadow-<k>` (schema key has no prefix)
+ *
+ * In `'dark'` mode, the `darkVariant` overrides are merged on top of the
+ * base tokens per category — same precedence the Rust compiler uses
+ * (`generate_tokens_css_dark`). Categories not present in `darkVariant` fall
+ * back to the base tokens.
+ */
+declare function themeTokensToCssVars(tokens: ThemeTokens, mode?: ThemeMode, darkVariant?: ThemeVariant): Record<string, string>;
+/**
+ * `ThemeRef` is `ThemeDefinition | string`. When it's a string, it's an
+ * unresolved import reference (e.g. `"Ocean.theme"`) that should have been
+ * inlined by the compiler's import phase before runtime. If we still see a
+ * string here, the upstream resolution path didn't run — return `undefined`
+ * rather than guess. `OrbitalThemeProvider` falls through to passthrough.
+ */
+declare function resolveThemeForRuntime(theme: ThemeRef | undefined): ThemeDefinition | undefined;
+
+export { type ThemeMode, resolveThemeForRuntime, themeTokensToCssVars };

package/dist/{types/event-bus-types.d.ts → event-bus-types-Bl78kokd.d.cts}

@@ -1,3 +1,5 @@
+import { EventPayload, BusEventSource, BusEventListener, Unsubscribe } from '@almadar/core';
+
 /**
  * Event Bus Types
  *
@@ -7,21 +9,18 @@
  *
  * @packageDocumentation
  */
-import type { BusEvent, BusEventSource, BusEventListener, EventPayload, Unsubscribe } from "@almadar/core";
-export type { BusEvent, BusEventSource, BusEventListener, EventPayload, Unsubscribe };
-/** @deprecated Use BusEventListener from @almadar/core directly. */
-export type EventListener = BusEventListener;
+
 /**
  * Event bus context type.
  *
  * `emit` accepts `EventPayload` from `@almadar/core` — the canonical
  * object shape (index signature over `EventPayloadValue`) that the bus
  * envelope stores and listeners consume. Pattern-specific payload types
- * from `@almadar/patterns` (`ItemActionPayload`, `SelectionChangePayload`,
+ * from `@almadar/core/patterns` (`ItemActionPayload`, `SelectionChangePayload`,
  * `FormSubmitPayload`, ...) are structural subtypes of `EventPayload`,
  * so components can pass them in without casts.
  */
-export interface EventBusContextType {
+interface EventBusContextType {
     /**
      * Emit an event to all listeners.
      *
@@ -62,3 +61,5 @@ export interface EventBusContextType {
      */
     onAny?: (listener: BusEventListener) => Unsubscribe;
 }
+
+export type { EventBusContextType as E };

package/dist/event-bus-types-Bl78kokd.d.ts

@@ -0,0 +1,65 @@
+import { EventPayload, BusEventSource, BusEventListener, Unsubscribe } from '@almadar/core';
+
+/**
+ * Event Bus Types
+ *
+ * Re-exports from @almadar/core so every package agrees on the same
+ * bus event envelope. @almadar/ui no longer owns its own KFlowEvent —
+ * that type was folded into core's BusEvent.
+ *
+ * @packageDocumentation
+ */
+
+/**
+ * Event bus context type.
+ *
+ * `emit` accepts `EventPayload` from `@almadar/core` — the canonical
+ * object shape (index signature over `EventPayloadValue`) that the bus
+ * envelope stores and listeners consume. Pattern-specific payload types
+ * from `@almadar/core/patterns` (`ItemActionPayload`, `SelectionChangePayload`,
+ * `FormSubmitPayload`, ...) are structural subtypes of `EventPayload`,
+ * so components can pass them in without casts.
+ */
+interface EventBusContextType {
+    /**
+     * Emit an event to all listeners.
+     *
+     * @param type - Event type identifier
+     * @param payload - Optional payload data (shape matches {@link EventPayload})
+     * @param source - Optional origin info (orbital/trait/...)
+     */
+    emit: (type: string, payload?: EventPayload, source?: BusEventSource) => void;
+    /**
+     * Subscribe to an event type.
+     *
+     * @param type - Event type to listen for
+     * @param listener - Callback function
+     * @returns Unsubscribe function
+     */
+    on: (type: string, listener: BusEventListener) => Unsubscribe;
+    /**
+     * Subscribe to an event type, but only fire once.
+     *
+     * @param type - Event type to listen for
+     * @param listener - Callback function
+     * @returns Unsubscribe function
+     */
+    once: (type: string, listener: BusEventListener) => Unsubscribe;
+    /**
+     * Check if there are any listeners for an event type.
+     *
+     * @param type - Event type to check
+     * @returns True if there are listeners
+     */
+    hasListeners: (type: string) => boolean;
+    /**
+     * Subscribe to ALL events regardless of type.
+     * Useful for verification, debugging, and analytics.
+     *
+     * @param listener - Callback function invoked for every emitted event
+     * @returns Unsubscribe function
+     */
+    onAny?: (listener: BusEventListener) => Unsubscribe;
+}
+
+export type { EventBusContextType as E };