@almadar/ui 5.110.0 → 5.112.0

package/dist/UserContext-bziZwgFL.d.ts

@@ -0,0 +1,278 @@
+import * as React from 'react';
+import React__default, { ReactNode, ReactElement } from 'react';
+import { ThemeRef, FieldValue } from '@almadar/core';
+
+/**
+ * Unified ThemeContext - Single provider for theme and color mode
+ *
+ * Combines design theme selection (ocean, wireframe, etc.) with
+ * color mode (light/dark) into a single, simple system.
+ *
+ * Uses a single data attribute: data-theme="ocean-light" or data-theme="ocean-dark"
+ *
+ * @packageDocumentation
+ */
+
+/** Color mode preference */
+type ColorMode = "light" | "dark" | "system";
+/** Resolved color mode (what's actually applied) */
+type ResolvedMode = "light" | "dark";
+/** Theme definition */
+interface UIThemeDefinition {
+    /** Theme identifier (e.g., "ocean", "wireframe") */
+    name: string;
+    /** Display name for UI (e.g., "Ocean Blue") */
+    displayName?: string;
+    /** Whether this theme has light mode styles */
+    hasLightMode?: boolean;
+    /** Whether this theme has dark mode styles */
+    hasDarkMode?: boolean;
+}
+/** Built-in themes available in the design system */
+declare const BUILT_IN_THEMES: UIThemeDefinition[];
+/** Theme context value */
+interface ThemeContextValue {
+    /** Current theme name */
+    theme: string;
+    /** Current color mode setting (may be 'system') */
+    mode: ColorMode;
+    /** Resolved color mode (always 'light' or 'dark') */
+    resolvedMode: ResolvedMode;
+    /** Set the theme */
+    setTheme: (theme: string) => void;
+    /** Set the color mode */
+    setMode: (mode: ColorMode) => void;
+    /** Toggle between light and dark modes */
+    toggleMode: () => void;
+    /** Available themes */
+    availableThemes: UIThemeDefinition[];
+    /** The full theme string applied to data-theme (e.g., "ocean-light") */
+    appliedTheme: string;
+}
+declare const ThemeContext: React__default.Context<ThemeContextValue | undefined>;
+interface ThemeProviderProps {
+    children: React__default.ReactNode;
+    /** Available themes (will be merged with built-in themes) */
+    themes?: readonly UIThemeDefinition[] | UIThemeDefinition[];
+    /** Default theme name */
+    defaultTheme?: string;
+    /** Default color mode */
+    defaultMode?: ColorMode;
+    /** Optional target element ref — when provided, theme attributes are applied to this element instead of document.documentElement */
+    targetRef?: React__default.RefObject<HTMLElement>;
+}
+/**
+ * Unified ThemeProvider component
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with built-in themes
+ * <ThemeProvider defaultTheme="wireframe" defaultMode="light">
+ *   <App />
+ * </ThemeProvider>
+ *
+ * // With custom themes from orbital schema
+ * import { THEMES } from './generated/theme-manifest';
+ * <ThemeProvider themes={THEMES} defaultTheme="ocean" defaultMode="system">
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
+/**
+ * Hook for accessing theme context
+ *
+ * @returns Theme context value
+ *
+ * @example
+ * ```tsx
+ * const { theme, resolvedMode, toggleMode, setTheme } = useTheme();
+ *
+ * // Toggle dark mode
+ * <button onClick={toggleMode}>
+ *   {resolvedMode === 'dark' ? 'Light' : 'Dark'}
+ * </button>
+ *
+ * // Change theme
+ * <select value={theme} onChange={(e) => setTheme(e.target.value)}>
+ *   {availableThemes.map(t => (
+ *     <option key={t.name} value={t.name}>{t.displayName || t.name}</option>
+ *   ))}
+ * </select>
+ * ```
+ */
+declare function useTheme(): ThemeContextValue;
+type DesignTheme = UIThemeDefinition;
+
+/**
+ * OrbitalThemeProvider — runtime application of `OrbitalDefinition.theme`.
+ *
+ * Wraps an orbital's rendered subtree in a wrapping `<div>` that sets the
+ * CSS variables derived from `theme.tokens` (and `variants.dark` when the
+ * resolved color mode is dark). Inline custom-property declarations on the
+ * wrapper override any `[data-theme]` selector rule for the same variable
+ * within the subtree, while letting unset variables cascade from the parent.
+ *
+ * Mapping is delegated to `themeTokensToCssVars`, which mirrors the Rust
+ * compiler's `generate_tokens_css`. Compile-time and runtime produce the
+ * same CSS variable map for the same `ThemeDefinition` input, so a Studio
+ * Design System edit and an `orbital compile` of the same schema render
+ * identically.
+ *
+ * No-op when:
+ * - `theme` is `undefined` (orbital declares no theme — parent cascades)
+ * - `theme` is a string ref that didn't get inlined upstream
+ *
+ * @example
+ * ```tsx
+ * <OrbitalThemeProvider theme={orbital.theme}>
+ *   <UISlotRenderer />
+ * </OrbitalThemeProvider>
+ * ```
+ */
+
+interface OrbitalThemeProviderProps {
+    /** The `OrbitalDefinition.theme` value (inline definition or string ref). */
+    theme?: ThemeRef;
+    children: ReactNode;
+}
+declare function OrbitalThemeProvider({ theme, children }: OrbitalThemeProviderProps): ReactElement;
+declare namespace OrbitalThemeProvider {
+    var displayName: string;
+}
+
+/**
+ * @deprecated Use ThemeProvider from ThemeContext instead
+ */
+declare const DesignThemeProvider: React.FC<ThemeProviderProps>;
+/**
+ * @deprecated Use useTheme from ThemeContext instead
+ *
+ * This wrapper provides backward compatibility with the old API.
+ */
+declare function useDesignTheme(): {
+    designTheme: string;
+    setDesignTheme: (theme: string) => void;
+    availableThemes: string[];
+};
+
+declare const CurrentPagePathContext: React__default.Context<string | undefined>;
+interface CurrentPagePathProviderProps {
+    value: string | undefined;
+    children: React__default.ReactNode;
+}
+declare const CurrentPagePathProvider: React__default.FC<CurrentPagePathProviderProps>;
+declare const useCurrentPagePath: () => string | undefined;
+
+/**
+ * UserContext
+ *
+ * React context for providing user data throughout the application.
+ * Enables @user bindings in S-expressions for role-based UI and permissions.
+ *
+ * Usage:
+ * ```tsx
+ * // In App.tsx or layout
+ * <UserProvider user={{ id: '123', role: 'admin', permissions: ['read', 'write'] }}>
+ *   <App />
+ * </UserProvider>
+ *
+ * // In components - access via hook
+ * const { user, hasRole, hasPermission } = useUser();
+ * if (hasRole('admin')) { ... }
+ * if (hasPermission('delete')) { ... }
+ * ```
+ *
+ * @packageDocumentation
+ */
+
+/**
+ * User data for @user bindings.
+ * Matches UserContext type from evaluator/context.ts
+ */
+interface UserData {
+    /** User's unique ID */
+    id: string;
+    /** User's email */
+    email?: string;
+    /** User's display name */
+    name?: string;
+    /** User's role (for RBAC) */
+    role?: string;
+    /** User's permissions */
+    permissions?: string[];
+    /** Additional custom profile fields */
+    [key: string]: FieldValue | undefined;
+}
+/**
+ * User context value.
+ */
+interface UserContextValue {
+    /** Current user data (null if not logged in) */
+    user: UserData | null;
+    /** Check if user is logged in */
+    isLoggedIn: boolean;
+    /** Check if user has a specific role */
+    hasRole: (role: string) => boolean;
+    /** Check if user has a specific permission */
+    hasPermission: (permission: string) => boolean;
+    /** Check if user has any of the specified roles */
+    hasAnyRole: (roles: string[]) => boolean;
+    /** Check if user has all of the specified permissions */
+    hasAllPermissions: (permissions: string[]) => boolean;
+    /** Get a user field by path (for @user.field bindings) */
+    getUserField: (path: string) => FieldValue | undefined;
+}
+/**
+ * Anonymous user for when no user is logged in.
+ */
+declare const ANONYMOUS_USER: UserData;
+declare const UserContext: React__default.Context<UserContextValue | null>;
+interface UserProviderProps {
+    /** User data (null if not logged in) */
+    user?: UserData | null;
+    /** Children to render */
+    children: React__default.ReactNode;
+}
+/**
+ * Provider component that provides user context to the application.
+ *
+ * Provides RBAC helpers and field access for @user bindings.
+ */
+declare function UserProvider({ user, children, }: UserProviderProps): React__default.ReactElement;
+/**
+ * Hook to access the user context.
+ *
+ * Returns default values if used outside of UserProvider (for resilience).
+ *
+ * @example
+ * ```tsx
+ * function AdminPanel() {
+ *   const { user, hasRole, hasPermission } = useUser();
+ *
+ *   if (!hasRole('admin') && !hasPermission('admin:access')) {
+ *     return <AccessDenied />;
+ *   }
+ *
+ *   return <div>Welcome, {user?.name}</div>;
+ * }
+ * ```
+ */
+declare function useUser(): UserContextValue;
+/**
+ * Hook to check if user has a specific role.
+ * Convenience wrapper around useUser().hasRole().
+ */
+declare function useHasRole(role: string): boolean;
+/**
+ * Hook to check if user has a specific permission.
+ * Convenience wrapper around useUser().hasPermission().
+ */
+declare function useHasPermission(permission: string): boolean;
+/**
+ * Hook to get user data for @user bindings in S-expressions.
+ * Returns the user data object compatible with EvaluationContext.user
+ */
+declare function useUserForEvaluation(): UserData | undefined;
+
+export { ANONYMOUS_USER as A, BUILT_IN_THEMES as B, type ColorMode as C, type DesignTheme as D, OrbitalThemeProvider as O, type ResolvedMode as R, ThemeContext as T, type UIThemeDefinition as U, CurrentPagePathContext as a, CurrentPagePathProvider as b, type CurrentPagePathProviderProps as c, DesignThemeProvider as d, type OrbitalThemeProviderProps as e, ThemeProvider as f, type ThemeProviderProps as g, UserContext as h, type UserContextValue as i, type UserData as j, UserProvider as k, type UserProviderProps as l, useDesignTheme as m, useHasPermission as n, useHasRole as o, useTheme as p, useUser as q, useUserForEvaluation as r, useCurrentPagePath as u };

package/dist/avl/index.cjs

@@ -39,7 +39,7 @@ var core = require('@almadar/core');
 var core$1 = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
-var patterns = require('@almadar/patterns');
+var patterns = require('@almadar/core/patterns');
 var OrbitalServerRuntime = require('@almadar/runtime/OrbitalServerRuntime');
 var runtime = require('@almadar/runtime');
 
@@ -11162,6 +11162,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();
@@ -12567,8 +12574,12 @@ var init_MiniMap = __esm({
     MiniMap.displayName = "MiniMap";
   }
 });
-function useCamera() {
-  const cameraRef = React90.useRef({ x: 0, y: 0, zoom: 1 });
+function useCamera(initial) {
+  const cameraRef = React90.useRef({
+    x: initial?.x ?? 0,
+    y: initial?.y ?? 0,
+    zoom: initial?.zoom ?? 1
+  });
   const targetCameraRef = React90.useRef(null);
   const isDraggingRef = React90.useRef(false);
   const dragDistanceRef = React90.useRef(0);
@@ -13006,8 +13017,9 @@ var init_DrawSprite = __esm({
         if (!r2) return;
         src = { x: r2.sx, y: r2.sy, w: r2.sw, h: r2.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;
@@ -13054,27 +13066,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;
@@ -13240,9 +13255,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 = React90.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;
@@ -13305,10 +13328,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,
@@ -13322,8 +13347,8 @@ function Canvas2D({
     zoomAtPoint,
     screenToWorld,
     lerpToTarget
-  } = useCamera();
-  const [, setAtlasVersion] = React90.useState(0);
+  } = useCamera({ zoom: scale });
+  const [atlasVersion, setAtlasVersion] = React90.useState(0);
   const bumpAtlas = React90.useCallback(() => setAtlasVersion((v) => v + 1), []);
   const miniMapTiles = React90.useMemo(() => {
     if (!showMinimap) return [];
@@ -13368,6 +13393,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);
@@ -13391,6 +13424,9 @@ function Canvas2D({
   React90.useEffect(() => {
     draw();
   }, [_imagePendingCount, draw]);
+  React90.useEffect(() => {
+    draw();
+  }, [atlasVersion, draw]);
   React90.useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     let running = true;
@@ -13635,6 +13671,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 = {
@@ -13674,6 +13711,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 } : {},
@@ -46185,7 +46223,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 = patterns.getPatternDefinition(content.pattern)?.drawHost === true;
+    const isDrawHost = patterns.isDrawHostPattern(content.pattern);
     const myPath = patternPath ?? "root";
     const renderedChildren = hasChildren && !isDrawHost ? renderPatternChildren(childrenConfig, onDismiss, content.id, myPath, content.sourceTrait, {
       slot: content.slot,
@@ -50208,6 +50246,14 @@ function effectsCallOp(effects, ops) {
   }
   return false;
 }
+function classifySharedTick(tick) {
+  const writes = effectsCallOp(tick.effects, SHARED_ENTITY_WRITE_OPS);
+  const renders = effectsCallOp(tick.effects, SHARED_ENTITY_RENDER_OPS);
+  if (writes && renders) return "both";
+  if (writes) return "writer";
+  if (renders) return "renderer";
+  return "neither";
+}
 function createSharedEntityWriter(binding, tick, traitStatesRef, emit) {
   return (scratch) => {
     const traitName = binding.trait.name;
@@ -50217,7 +50263,7 @@ function createSharedEntityWriter(binding, tick, traitStatesRef, emit) {
     const writes = [];
     const ctx = evaluator.createMinimalContext(scratchEntity, {}, currentState);
     const declaredDefaults = runtime.collectDeclaredConfigDefaults(binding.trait);
-    const callSiteConfig = binding.config;
+    const callSiteConfig = getBindingConfig(binding);
     if (declaredDefaults || callSiteConfig) {
       ctx.config = { ...declaredDefaults ?? {}, ...callSiteConfig ?? {} };
     }
@@ -50239,7 +50285,25 @@ function createSharedEntityWriter(binding, tick, traitStatesRef, emit) {
     return writes;
   };
 }
+function getBindingConfig(binding) {
+  const raw = binding.config;
+  const normalized = runtime.normalizeCallSiteConfigToValues(raw);
+  console.log("[debug:getBindingConfig]", binding.trait.name, "raw keys=", raw ? Object.keys(raw) : "undefined", "has tiles=", raw ? "tiles" in raw : false);
+  return normalized;
+}
+function evalFieldDefault(value) {
+  if (!Array.isArray(value) || value.length === 0) return value;
+  const head = value[0];
+  const isSExpr = typeof head === "string" && (head.includes("/") || head === "let" || head === "if" || head === "lambda");
+  if (!isSExpr) return value;
+  try {
+    return evaluator.evaluate(value, evaluator.createMinimalContext({}, {}, ""));
+  } catch {
+    return value;
+  }
+}
 function useTraitStateMachine(traitBindings, uiSlots, options) {
+  console.log("[debug:useTraitStateMachine] start, traitBindings count=", traitBindings.length, "names=", traitBindings.map((b) => b.trait.name).join(","));
   const eventBus = useEventBus();
   const { entities } = providers.useEntitySchema();
   const traitConfigsByName = options?.traitConfigsByName;
@@ -50259,7 +50323,11 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         let defaults;
         for (const field of entityDef.fields) {
           if (field.default !== void 0) {
-            (defaults ?? (defaults = {}))[field.name] = field.default;
+            const evaluated = evalFieldDefault(field.default);
+            if (field.name === "tiles") {
+              console.log(`[debug:seed] ${linkedEntityName}.tiles seed type=`, typeof evaluated, Array.isArray(evaluated) ? "len=" + evaluated?.length : "", "head=", Array.isArray(evaluated) && evaluated.length > 0 ? JSON.stringify(evaluated[0]).slice(0, 80) : "n/a");
+            }
+            (defaults ?? (defaults = {}))[field.name] = evaluated;
           }
         }
         group = { storeKey, entityName: linkedEntityName, writerBindings: [], renderBindings: [], defaults };
@@ -50272,7 +50340,10 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
     return groups;
   }, [traitBindings, entities, orbitalsByTrait]);
   for (const group of sharedGroups.values()) {
-    if (group.defaults) sharedEntityStore.seed(group.storeKey, group.defaults);
+    if (group.defaults) {
+      sharedEntityStore.seed(group.storeKey, group.defaults);
+      console.log("[debug:shared-seed]", group.storeKey, "writers=", group.writerBindings.map((b) => b.trait.name).join(","), "renderers=", group.renderBindings.map((b) => b.trait.name).join(","), "defaults.tiles=", Array.isArray(group.defaults.tiles) ? group.defaults.tiles.length : group.defaults.tiles);
+    }
   }
   const sharedKeyByTraitNameRef = React90.useRef(/* @__PURE__ */ new Map());
   React90.useEffect(() => {
@@ -50282,12 +50353,13 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
       for (const binding of group.renderBindings) map.set(binding.trait.name, group.storeKey);
     }
     sharedKeyByTraitNameRef.current = map;
+    console.log("[debug:shared-map]", Array.from(map.entries()).map(([k, v]) => `${k}->${v}`).join(","));
   }, [sharedGroups]);
   const manager = React90.useMemo(() => {
     const traitDefs = traitBindings.map(toTraitDefinition);
     const m = new runtime.StateMachineManager(traitDefs);
     for (const binding of traitBindings) {
-      const cfg = binding.config ?? traitConfigsByName?.[binding.trait.name];
+      const cfg = getBindingConfig(binding) ?? traitConfigsByName?.[binding.trait.name];
       if (cfg !== void 0) {
         m.setTraitConfig(binding.trait.name, cfg);
       }
@@ -50470,6 +50542,9 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
     const linkedEntity = binding.linkedEntity || "";
     const entityId = payload?.entityId;
     const sharedKey = sharedKeyByTraitNameRef.current.get(traitName);
+    if (traitName === "Hero" || traitName === "Authority") {
+      console.log(`[debug:executeTransitionEffects] ${traitName} sharedKey=`, sharedKey, "store tiles=", sharedKey ? sharedEntityStore.getSnapshot(sharedKey).tiles?.length : "n/a");
+    }
     let liveEntity;
     if (sharedKey !== void 0) {
       liveEntity = { ...sharedEntityStore.getSnapshot(sharedKey) };
@@ -50493,6 +50568,13 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
       eventBus,
       slotSetter: {
         addPattern: (slot, pattern, props) => {
+          if (traitName === "Hero" && slot === "main" && props && typeof props === "object") {
+            const canvasChild = Array.isArray(props.children) ? props.children[0] : null;
+            const grandChildren = canvasChild && typeof canvasChild === "object" ? canvasChild.children : null;
+            const firstLayer = Array.isArray(grandChildren) && grandChildren.length > 0 ? grandChildren[0] : null;
+            const firstLayerItems = firstLayer && typeof firstLayer === "object" ? firstLayer.items : null;
+            console.log(`[debug:render-ui] ${traitName} slot=${slot} canvasChild=`, canvasChild ? canvasChild.type : "none", "firstLayerItems=", Array.isArray(firstLayerItems) ? firstLayerItems.length : firstLayerItems);
+          }
           const existing = pendingSlots.get(slot) || [];
           existing.push({ pattern, props: props || {} });
           pendingSlots.set(slot, existing);
@@ -50524,7 +50606,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         state: previousState
       };
       const sharedDeclared = runtime.collectDeclaredConfigDefaults(binding.trait);
-      const sharedCallSite = binding.config;
+      const sharedCallSite = getBindingConfig(binding);
       if (sharedDeclared || sharedCallSite) {
         sharedBindings.config = {
           ...sharedDeclared ?? {},
@@ -50575,13 +50657,16 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
       state: previousState
     };
     const declaredDefaults = runtime.collectDeclaredConfigDefaults(binding.trait);
-    const callSiteConfig = binding.config;
+    const callSiteConfig = getBindingConfig(binding);
     if (declaredDefaults || callSiteConfig) {
       bindingCtx.config = {
         ...declaredDefaults ?? {},
         ...callSiteConfig ?? {}
       };
     }
+    if (traitName === "Authority" || traitName === "Hero") {
+      console.log(`[debug:executeTransitionEffects] ${traitName} config tiles type=`, typeof bindingCtx.config?.tiles, Array.isArray(bindingCtx.config?.tiles) ? "len=" + bindingCtx.config?.tiles?.length : "", "keys=", bindingCtx.config ? Object.keys(bindingCtx.config) : "none");
+    }
     const effectContext = {
       traitName,
       state: previousState,
@@ -50598,9 +50683,15 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         baseEmit(event, eventPayload, source);
       }
     };
+    if (traitName === "Hero") {
+      console.log(`[debug:executeTransitionEffects] ${traitName} effects count=${effects.length} hasRenderUI=${typeof handlers.renderUI === "function"} effect heads=${effects.map((e) => Array.isArray(e) ? String(e[0]) : "??").join(",")}`);
+    }
     const executor = new runtime.EffectExecutor({ handlers: trackingHandlers, bindings: bindingCtx, context: effectContext });
     try {
       await executor.executeAll(effects);
+      if (traitName === "Authority" || traitName === "Hero") {
+        console.log(`[debug:executeTransitionEffects] ${traitName} after executeAll liveEntity.tiles type=`, typeof liveEntity.tiles, Array.isArray(liveEntity.tiles) ? "len=" + liveEntity.tiles?.length : "", "firstTilePos=", Array.isArray(liveEntity.tiles) && liveEntity.tiles.length > 0 ? JSON.stringify(liveEntity.tiles[0]).slice(0, 120) : "n/a");
+      }
       if (sharedKey !== void 0) {
         sharedEntityStore.commit(sharedKey, liveEntity);
       }
@@ -50651,8 +50742,9 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         payload: {},
         state: currentState
       };
-      if (binding.config) {
-        guardCtx.config = binding.config;
+      const bindingCfg = getBindingConfig(binding);
+      if (bindingCfg) {
+        guardCtx.config = bindingCfg;
       }
       const passed = evaluator.evaluateGuard(
         tick.guard,
@@ -50679,12 +50771,14 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
   }, [eventBus]);
   React90.useEffect(() => {
     const scheduler = runtime.createTickScheduler();
-    const writerTraitNames = /* @__PURE__ */ new Set();
+    const pureWriterTickKeys = /* @__PURE__ */ new Set();
     for (const group of sharedGroups.values()) {
       const ticksByInterval = /* @__PURE__ */ new Map();
       for (const binding of group.writerBindings) {
-        writerTraitNames.add(binding.trait.name);
         for (const tick of binding.trait.ticks ?? []) {
+          const classification = classifySharedTick(tick);
+          if (classification !== "writer") continue;
+          pureWriterTickKeys.add(`${binding.trait.name}::${tick.name}`);
           const intervalKey = String(tick.interval);
           const entries = ticksByInterval.get(intervalKey) ?? [];
           entries.push({ binding, tick });
@@ -50711,8 +50805,11 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
       }
     }
     for (const binding of traitBindings) {
-      if (writerTraitNames.has(binding.trait.name)) continue;
       for (const tick of binding.trait.ticks ?? []) {
+        const sharedKey = sharedKeyByTraitNameRef.current.get(binding.trait.name);
+        if (sharedKey !== void 0 && pureWriterTickKeys.has(`${binding.trait.name}::${tick.name}`)) {
+          continue;
+        }
         if (tick.interval === "frame") {
           scheduler.add(0, () => runTickEffects(tick, binding));
         } else if (typeof tick.interval === "number") {