@almadar/ui 5.28.1 → 5.28.3

package/dist/components/game/templates/WorldMapTemplate.d.ts

@@ -9,7 +9,9 @@
  * @packageDocumentation
  */
 import React from 'react';
+import type { WorldMapBoardProps } from '../organisms/WorldMapBoard';
 import type { TemplateProps } from '../../core/templates/types';
+import type { IsometricTile, IsometricUnit, IsometricFeature } from '../organisms/types/isometric';
 export type { WorldMapSlotContext } from '../organisms/WorldMapBoard';
 export interface WorldMapTemplateProps extends TemplateProps {
     /** Canvas render scale */
@@ -20,8 +22,16 @@ export interface WorldMapTemplateProps extends TemplateProps {
     diamondTopY?: number;
     /** Allow selecting / moving ALL heroes (including enemy). For testing. */
     allowMoveAllHeroes?: boolean;
+    /** Direct tile data — forwarded to WorldMapBoard; takes priority over entity. */
+    tiles?: IsometricTile[];
+    /** Direct unit data — forwarded to WorldMapBoard; takes priority over entity. */
+    units?: IsometricUnit[];
+    /** Direct feature data — forwarded to WorldMapBoard; takes priority over entity. */
+    features?: IsometricFeature[];
+    /** Direct asset manifest — forwarded to WorldMapBoard; takes priority over entity. */
+    assetManifest?: WorldMapBoardProps['assetManifest'];
 }
-export declare function WorldMapTemplate({ entity, scale, unitScale, diamondTopY, allowMoveAllHeroes, className, }: WorldMapTemplateProps): React.JSX.Element;
+export declare function WorldMapTemplate({ entity, scale, unitScale, diamondTopY, allowMoveAllHeroes, tiles, units, features, assetManifest, className, }: WorldMapTemplateProps): React.JSX.Element;
 export declare namespace WorldMapTemplate {
     var displayName: string;
 }

package/dist/components/index.cjs

@@ -9302,7 +9302,7 @@ function IsometricCanvas({
   // Rendering options
   scale = 0.4,
   debug: debug2 = false,
-  backgroundImage,
+  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/court.png",
   showMinimap = true,
   enableCamera = true,
   unitScale = 1,
@@ -9317,7 +9317,7 @@ function IsometricCanvas({
   // Tuning
   diamondTopY: diamondTopYProp,
   // Remote asset loading
-  assetBaseUrl,
+  assetBaseUrl = "https://almadar-kflow-assets.web.app/shared/",
   assetManifest
 }) {
   const tilesProp = Array.isArray(_tilesPropRaw) ? _tilesPropRaw : [];
@@ -10077,6 +10077,10 @@ var init_boardEntity = __esm({
 });
 function BattleBoard({
   entity,
+  tiles: propTiles,
+  units: propUnits,
+  features: propFeatures,
+  assetManifest: propAssetManifest,
   scale = 0.45,
   unitScale = 1,
   header,
@@ -10102,11 +10106,11 @@ function BattleBoard({
   className
 }) {
   const board = boardEntity(entity) ?? {};
-  const tiles = Array.isArray(board.tiles) ? board.tiles : [];
-  const features = Array.isArray(board.features) ? board.features : [];
+  const tiles = propTiles ?? (Array.isArray(board.tiles) ? board.tiles : []);
+  const features = propFeatures ?? (Array.isArray(board.features) ? board.features : []);
   const boardWidth = num(board.boardWidth, 8);
   const boardHeight = num(board.boardHeight, 6);
-  const assetManifest = board.assetManifest;
+  const assetManifest = propAssetManifest ?? board.assetManifest;
   const backgroundImage = board.backgroundImage;
   const units = rows(board.units);
   const selectedUnitId = board.selectedUnitId ?? null;
@@ -10198,7 +10202,7 @@ function BattleBoard({
     }, 16);
     return () => clearInterval(interval);
   }, []);
-  const isoUnits = React74.useMemo(() => {
+  const derivedIsoUnits = React74.useMemo(() => {
     return units.filter((u) => unitHealth(u) > 0).map((unit) => {
       const id = str(unit.id);
       const pos = movingPositions.get(id) ?? unitPosition(unit);
@@ -10222,6 +10226,7 @@ function BattleBoard({
       };
     });
   }, [units, movingPositions]);
+  const isoUnits = propUnits ?? derivedIsoUnits;
   const maxY = Math.max(...tiles.map((t2) => t2.y), 0);
   const baseOffsetX = (maxY + 1) * (exports.TILE_WIDTH * scale / 2);
   const tileToScreen = React74.useCallback(
@@ -17425,16 +17430,21 @@ function EmojiEffect({
     }
   );
 }
-function CanvasEffect(props) {
+function CanvasEffect({
+  effectSpriteUrl = "https://almadar-kflow-assets.web.app/shared/effects/gas/gas00.png",
+  assetBaseUrl = "https://almadar-kflow-assets.web.app/shared/effects/",
+  ...props
+}) {
   const eventBus = useEventBus();
-  const { completeEvent, onComplete, ...rest } = props;
+  const mergedProps = { effectSpriteUrl, assetBaseUrl, ...props };
+  const { completeEvent, onComplete, ...rest } = mergedProps;
   const handleComplete = React74.useCallback(() => {
     if (completeEvent) eventBus.emit(`UI:${completeEvent}`, {});
     onComplete?.();
   }, [completeEvent, eventBus, onComplete]);
   const enhancedProps = { ...rest, onComplete: handleComplete };
-  if (props.assetManifest) {
-    return /* @__PURE__ */ jsxRuntime.jsx(CanvasEffectEngine, { ...enhancedProps, assetManifest: props.assetManifest });
+  if (rest.assetManifest) {
+    return /* @__PURE__ */ jsxRuntime.jsx(CanvasEffectEngine, { ...enhancedProps, assetManifest: rest.assetManifest });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(EmojiEffect, { ...enhancedProps });
 }
@@ -18219,6 +18229,10 @@ var init_CaseStudyOrganism = __esm({
 });
 function CastleBoard({
   entity,
+  tiles: propTiles,
+  units: propUnits,
+  features: propFeatures,
+  assetManifest: propAssetManifest,
   scale = 0.45,
   header,
   sidePanel,
@@ -18234,10 +18248,10 @@ function CastleBoard({
 }) {
   const eventBus = useEventBus();
   const resolved = boardEntity(entity);
-  const tiles = Array.isArray(resolved?.tiles) ? resolved.tiles : [];
-  const features = Array.isArray(resolved?.features) ? resolved.features : [];
-  const units = Array.isArray(resolved?.units) ? resolved.units : [];
-  const assetManifest = resolved?.assetManifest;
+  const tiles = propTiles ?? (Array.isArray(resolved?.tiles) ? resolved.tiles : []);
+  const features = propFeatures ?? (Array.isArray(resolved?.features) ? resolved.features : []);
+  const units = propUnits ?? (Array.isArray(resolved?.units) ? resolved.units : []);
+  const assetManifest = propAssetManifest ?? resolved?.assetManifest;
   const backgroundImage = resolved?.backgroundImage;
   const [hoveredTile, setHoveredTile] = React74.useState(null);
   const [selectedFeature, setSelectedFeature] = React74.useState(null);
@@ -18340,14 +18354,22 @@ var init_CastleBoard = __esm({
 function CastleTemplate({
   entity,
   scale = 0.45,
+  tiles,
+  units,
+  features,
+  assetManifest,
   className
 }) {
   const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
-  if (!resolved) return null;
+  if (!resolved && !tiles && !units && !features && !assetManifest) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     CastleBoard,
     {
       entity: resolved,
+      tiles,
+      units,
+      features,
+      assetManifest,
       scale,
       featureClickEvent: "FEATURE_CLICK",
       unitClickEvent: "UNIT_CLICK",
@@ -22335,10 +22357,10 @@ function Row({
   const [keyDraft, setKeyDraft] = React74__namespace.default.useState(rowKey);
   React74__namespace.default.useEffect(() => setKeyDraft(rowKey), [rowKey]);
   const container = isObj(value) || isArr(value);
-  return /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "none", className: "group", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", align: "center", className: "py-0.5", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "none", className: "group w-max min-w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", align: "center", className: "py-0.5 w-max", children: [
       /* @__PURE__ */ jsxRuntime.jsx(KindSelect, { kind: kindOf(value), onChange: onChangeKind }),
-      isArrayItem ? /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "muted", className: "w-7 shrink-0 font-mono", children: rowKey }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-28 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+      isArrayItem ? /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "muted", className: "w-6 shrink-0 font-mono", children: rowKey }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
         exports.Input,
         {
           inputType: "text",
@@ -22351,8 +22373,7 @@ function Row({
           className: "font-mono"
         }
       ) }),
-      !container && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(ValueNode, { value, onChange: onValue, depth: depth + 1 }) }),
-      container && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+      !container && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-48 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(ValueNode, { value, onChange: onValue, depth: depth + 1 }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         exports.Button,
         {
@@ -22361,11 +22382,11 @@ function Row({
           icon: "x",
           onClick: onRemove,
           "aria-label": "Remove",
-          className: "opacity-0 group-hover:opacity-100 transition-opacity"
+          className: "shrink-0 text-muted-foreground hover:text-error"
         }
       )
     ] }),
-    container && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-3", children: /* @__PURE__ */ jsxRuntime.jsx(ValueNode, { value, onChange: onValue, depth: depth + 1 }) })
+    container && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-2", children: /* @__PURE__ */ jsxRuntime.jsx(ValueNode, { value, onChange: onValue, depth: depth + 1 }) })
   ] });
 }
 function ContainerNode({
@@ -22432,7 +22453,7 @@ function ContainerNode({
       exports.VStack,
       {
         gap: "none",
-        className: cn("ml-2 pl-2 border-l-[length:var(--border-width-thin)] border-border"),
+        className: cn("ml-1.5 pl-1.5 w-max min-w-full border-l-[length:var(--border-width-thin)] border-border"),
         children: [
           entries.map(([k, v], idx) => /* @__PURE__ */ jsxRuntime.jsx(
             Row,
@@ -22480,15 +22501,15 @@ var init_JsonTreeEditor = __esm({
     TYPE_LABEL = {
       object: "{}",
       array: "[]",
-      string: "abc",
-      number: "123",
-      boolean: "on/off",
+      string: "txt",
+      number: "num",
+      boolean: "y/n",
       null: "\u2014"
     };
     KIND_OPTIONS = ["string", "number", "boolean", "object", "array"];
     exports.JsonTreeEditor = ({ value, onChange, className }) => {
       const root = value ?? "";
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full rounded-sm bg-card/40 p-2 border-[length:var(--border-width-thin)] border-border", className), children: /* @__PURE__ */ jsxRuntime.jsx(ValueNode, { value: root, onChange, depth: 0 }) });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto rounded-sm bg-card/40 p-2 border-[length:var(--border-width-thin)] border-border", className), children: /* @__PURE__ */ jsxRuntime.jsx(ValueNode, { value: root, onChange, depth: 0 }) });
     };
   }
 });
@@ -26235,8 +26256,8 @@ function GameCanvas2D({
   tickEvent,
   drawEvent,
   fps = 60,
-  backgroundImage,
-  assetBaseUrl = "",
+  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/resonators.jpeg",
+  assetBaseUrl = "https://almadar-kflow-assets.web.app/shared/",
   className
 }) {
   const canvasRef = React74__namespace.useRef(null);
@@ -26300,6 +26321,9 @@ function GameCanvas2D({
           const bgImg = loadImage(backgroundImageRef.current);
           if (bgImg) {
             ctx.drawImage(bgImg, 0, 0, widthRef.current, heightRef.current);
+          } else {
+            ctx.fillStyle = "#0f1420";
+            ctx.fillRect(0, 0, widthRef.current, heightRef.current);
           }
         }
         onDrawRef.current?.(ctx, frame);
@@ -27496,10 +27520,10 @@ function PlatformerCanvas({
   canvasHeight = 400,
   followCamera = true,
   bgColor,
-  playerSprite,
+  playerSprite = "https://almadar-kflow-assets.web.app/shared/platformer/characters/platformChar_idle.png",
   tileSprites,
-  backgroundImage,
-  assetBaseUrl = "",
+  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/court.png",
+  assetBaseUrl = "https://almadar-kflow-assets.web.app/shared/platformer/",
   leftEvent = "MOVE_LEFT",
   rightEvent = "MOVE_RIGHT",
   jumpEvent = "JUMP",
@@ -38382,7 +38406,7 @@ var init_DetailPanel = __esm({
 function DialogueBubble({
   speaker,
   text,
-  portrait = "https://almadar-kflow-assets.web.app/shared/characters/archetypes/00_base_model.png",
+  portrait = "https://almadar-kflow-assets.web.app/shared/characters/archetypes/04_hero.png",
   position = "bottom",
   className
 }) {
@@ -46673,6 +46697,10 @@ function defaultIsInRange(from, to, range) {
 }
 function WorldMapBoard({
   entity,
+  tiles: propTiles,
+  units: propUnits,
+  features: propFeatures,
+  assetManifest: propAssetManifest,
   isLoading,
   scale = 0.4,
   unitScale = 2.5,
@@ -46701,16 +46729,16 @@ function WorldMapBoard({
   const resolved = boardEntity(entity);
   const hexes = rows(resolved?.hexes);
   const heroes = rows(resolved?.heroes);
-  const features = Array.isArray(resolved?.features) ? resolved.features : [];
+  const features = propFeatures ?? (Array.isArray(resolved?.features) ? resolved.features : []);
   const selectedHeroId = resolved?.selectedHeroId ?? null;
-  const assetManifest = resolved?.assetManifest;
+  const assetManifest = propAssetManifest ?? resolved?.assetManifest;
   const backgroundImage = resolved?.backgroundImage;
   const [hoveredTile, setHoveredTile] = React74.useState(null);
   const selectedHero = React74.useMemo(
     () => heroes.find((h) => str(h.id) === selectedHeroId) ?? null,
     [heroes, selectedHeroId]
   );
-  const tiles = React74.useMemo(
+  const derivedTiles = React74.useMemo(
     () => hexes.map((hex) => ({
       x: num(hex.x),
       y: num(hex.y),
@@ -46719,8 +46747,9 @@ function WorldMapBoard({
     })),
     [hexes]
   );
+  const tiles = propTiles ?? derivedTiles;
   const baseUnits = React74.useMemo(
-    () => heroes.map((hero) => ({
+    () => propUnits ?? heroes.map((hero) => ({
       id: str(hero.id),
       position: heroPosition(hero),
       name: str(hero.name),
@@ -46729,7 +46758,7 @@ function WorldMapBoard({
       maxHealth: 100,
       sprite: hero.sprite == null ? void 0 : str(hero.sprite)
     })),
-    [heroes]
+    [heroes, propUnits]
   );
   const MOVE_SPEED_MS_PER_TILE = 300;
   const movementAnimRef = React74.useRef(null);
@@ -46939,12 +46968,20 @@ function WorldMapTemplate({
   unitScale = 2.5,
   diamondTopY,
   allowMoveAllHeroes = false,
+  tiles,
+  units,
+  features,
+  assetManifest,
   className
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     WorldMapBoard,
     {
       entity,
+      tiles,
+      units,
+      features,
+      assetManifest,
       scale,
       unitScale,
       diamondTopY,

package/dist/components/index.js

@@ -9254,7 +9254,7 @@ function IsometricCanvas({
   // Rendering options
   scale = 0.4,
   debug: debug2 = false,
-  backgroundImage,
+  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/court.png",
   showMinimap = true,
   enableCamera = true,
   unitScale = 1,
@@ -9269,7 +9269,7 @@ function IsometricCanvas({
   // Tuning
   diamondTopY: diamondTopYProp,
   // Remote asset loading
-  assetBaseUrl,
+  assetBaseUrl = "https://almadar-kflow-assets.web.app/shared/",
   assetManifest
 }) {
   const tilesProp = Array.isArray(_tilesPropRaw) ? _tilesPropRaw : [];
@@ -10029,6 +10029,10 @@ var init_boardEntity = __esm({
 });
 function BattleBoard({
   entity,
+  tiles: propTiles,
+  units: propUnits,
+  features: propFeatures,
+  assetManifest: propAssetManifest,
   scale = 0.45,
   unitScale = 1,
   header,
@@ -10054,11 +10058,11 @@ function BattleBoard({
   className
 }) {
   const board = boardEntity(entity) ?? {};
-  const tiles = Array.isArray(board.tiles) ? board.tiles : [];
-  const features = Array.isArray(board.features) ? board.features : [];
+  const tiles = propTiles ?? (Array.isArray(board.tiles) ? board.tiles : []);
+  const features = propFeatures ?? (Array.isArray(board.features) ? board.features : []);
   const boardWidth = num(board.boardWidth, 8);
   const boardHeight = num(board.boardHeight, 6);
-  const assetManifest = board.assetManifest;
+  const assetManifest = propAssetManifest ?? board.assetManifest;
   const backgroundImage = board.backgroundImage;
   const units = rows(board.units);
   const selectedUnitId = board.selectedUnitId ?? null;
@@ -10150,7 +10154,7 @@ function BattleBoard({
     }, 16);
     return () => clearInterval(interval);
   }, []);
-  const isoUnits = useMemo(() => {
+  const derivedIsoUnits = useMemo(() => {
     return units.filter((u) => unitHealth(u) > 0).map((unit) => {
       const id = str(unit.id);
       const pos = movingPositions.get(id) ?? unitPosition(unit);
@@ -10174,6 +10178,7 @@ function BattleBoard({
       };
     });
   }, [units, movingPositions]);
+  const isoUnits = propUnits ?? derivedIsoUnits;
   const maxY = Math.max(...tiles.map((t2) => t2.y), 0);
   const baseOffsetX = (maxY + 1) * (TILE_WIDTH * scale / 2);
   const tileToScreen = useCallback(
@@ -17377,16 +17382,21 @@ function EmojiEffect({
     }
   );
 }
-function CanvasEffect(props) {
+function CanvasEffect({
+  effectSpriteUrl = "https://almadar-kflow-assets.web.app/shared/effects/gas/gas00.png",
+  assetBaseUrl = "https://almadar-kflow-assets.web.app/shared/effects/",
+  ...props
+}) {
   const eventBus = useEventBus();
-  const { completeEvent, onComplete, ...rest } = props;
+  const mergedProps = { effectSpriteUrl, assetBaseUrl, ...props };
+  const { completeEvent, onComplete, ...rest } = mergedProps;
   const handleComplete = useCallback(() => {
     if (completeEvent) eventBus.emit(`UI:${completeEvent}`, {});
     onComplete?.();
   }, [completeEvent, eventBus, onComplete]);
   const enhancedProps = { ...rest, onComplete: handleComplete };
-  if (props.assetManifest) {
-    return /* @__PURE__ */ jsx(CanvasEffectEngine, { ...enhancedProps, assetManifest: props.assetManifest });
+  if (rest.assetManifest) {
+    return /* @__PURE__ */ jsx(CanvasEffectEngine, { ...enhancedProps, assetManifest: rest.assetManifest });
   }
   return /* @__PURE__ */ jsx(EmojiEffect, { ...enhancedProps });
 }
@@ -18171,6 +18181,10 @@ var init_CaseStudyOrganism = __esm({
 });
 function CastleBoard({
   entity,
+  tiles: propTiles,
+  units: propUnits,
+  features: propFeatures,
+  assetManifest: propAssetManifest,
   scale = 0.45,
   header,
   sidePanel,
@@ -18186,10 +18200,10 @@ function CastleBoard({
 }) {
   const eventBus = useEventBus();
   const resolved = boardEntity(entity);
-  const tiles = Array.isArray(resolved?.tiles) ? resolved.tiles : [];
-  const features = Array.isArray(resolved?.features) ? resolved.features : [];
-  const units = Array.isArray(resolved?.units) ? resolved.units : [];
-  const assetManifest = resolved?.assetManifest;
+  const tiles = propTiles ?? (Array.isArray(resolved?.tiles) ? resolved.tiles : []);
+  const features = propFeatures ?? (Array.isArray(resolved?.features) ? resolved.features : []);
+  const units = propUnits ?? (Array.isArray(resolved?.units) ? resolved.units : []);
+  const assetManifest = propAssetManifest ?? resolved?.assetManifest;
   const backgroundImage = resolved?.backgroundImage;
   const [hoveredTile, setHoveredTile] = useState(null);
   const [selectedFeature, setSelectedFeature] = useState(null);
@@ -18292,14 +18306,22 @@ var init_CastleBoard = __esm({
 function CastleTemplate({
   entity,
   scale = 0.45,
+  tiles,
+  units,
+  features,
+  assetManifest,
   className
 }) {
   const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
-  if (!resolved) return null;
+  if (!resolved && !tiles && !units && !features && !assetManifest) return null;
   return /* @__PURE__ */ jsx(
     CastleBoard,
     {
       entity: resolved,
+      tiles,
+      units,
+      features,
+      assetManifest,
       scale,
       featureClickEvent: "FEATURE_CLICK",
       unitClickEvent: "UNIT_CLICK",
@@ -22287,10 +22309,10 @@ function Row({
   const [keyDraft, setKeyDraft] = React74__default.useState(rowKey);
   React74__default.useEffect(() => setKeyDraft(rowKey), [rowKey]);
   const container = isObj(value) || isArr(value);
-  return /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "group", children: [
-    /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", className: "py-0.5", children: [
+  return /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "group w-max min-w-full", children: [
+    /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", className: "py-0.5 w-max", children: [
       /* @__PURE__ */ jsx(KindSelect, { kind: kindOf(value), onChange: onChangeKind }),
-      isArrayItem ? /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", className: "w-7 shrink-0 font-mono", children: rowKey }) : /* @__PURE__ */ jsx("div", { className: "w-28 shrink-0", children: /* @__PURE__ */ jsx(
+      isArrayItem ? /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", className: "w-6 shrink-0 font-mono", children: rowKey }) : /* @__PURE__ */ jsx("div", { className: "w-20 shrink-0", children: /* @__PURE__ */ jsx(
         Input,
         {
           inputType: "text",
@@ -22303,8 +22325,7 @@ function Row({
           className: "font-mono"
         }
       ) }),
-      !container && /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(ValueNode, { value, onChange: onValue, depth: depth + 1 }) }),
-      container && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      !container && /* @__PURE__ */ jsx("div", { className: "w-48 shrink-0", children: /* @__PURE__ */ jsx(ValueNode, { value, onChange: onValue, depth: depth + 1 }) }),
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -22313,11 +22334,11 @@ function Row({
           icon: "x",
           onClick: onRemove,
           "aria-label": "Remove",
-          className: "opacity-0 group-hover:opacity-100 transition-opacity"
+          className: "shrink-0 text-muted-foreground hover:text-error"
         }
       )
     ] }),
-    container && /* @__PURE__ */ jsx("div", { className: "pl-3", children: /* @__PURE__ */ jsx(ValueNode, { value, onChange: onValue, depth: depth + 1 }) })
+    container && /* @__PURE__ */ jsx("div", { className: "pl-2", children: /* @__PURE__ */ jsx(ValueNode, { value, onChange: onValue, depth: depth + 1 }) })
   ] });
 }
 function ContainerNode({
@@ -22384,7 +22405,7 @@ function ContainerNode({
       VStack,
       {
         gap: "none",
-        className: cn("ml-2 pl-2 border-l-[length:var(--border-width-thin)] border-border"),
+        className: cn("ml-1.5 pl-1.5 w-max min-w-full border-l-[length:var(--border-width-thin)] border-border"),
         children: [
           entries.map(([k, v], idx) => /* @__PURE__ */ jsx(
             Row,
@@ -22432,15 +22453,15 @@ var init_JsonTreeEditor = __esm({
     TYPE_LABEL = {
       object: "{}",
       array: "[]",
-      string: "abc",
-      number: "123",
-      boolean: "on/off",
+      string: "txt",
+      number: "num",
+      boolean: "y/n",
       null: "\u2014"
     };
     KIND_OPTIONS = ["string", "number", "boolean", "object", "array"];
     JsonTreeEditor = ({ value, onChange, className }) => {
       const root = value ?? "";
-      return /* @__PURE__ */ jsx("div", { className: cn("w-full rounded-sm bg-card/40 p-2 border-[length:var(--border-width-thin)] border-border", className), children: /* @__PURE__ */ jsx(ValueNode, { value: root, onChange, depth: 0 }) });
+      return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto rounded-sm bg-card/40 p-2 border-[length:var(--border-width-thin)] border-border", className), children: /* @__PURE__ */ jsx(ValueNode, { value: root, onChange, depth: 0 }) });
     };
   }
 });
@@ -26187,8 +26208,8 @@ function GameCanvas2D({
   tickEvent,
   drawEvent,
   fps = 60,
-  backgroundImage,
-  assetBaseUrl = "",
+  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/resonators.jpeg",
+  assetBaseUrl = "https://almadar-kflow-assets.web.app/shared/",
   className
 }) {
   const canvasRef = React74.useRef(null);
@@ -26252,6 +26273,9 @@ function GameCanvas2D({
           const bgImg = loadImage(backgroundImageRef.current);
           if (bgImg) {
             ctx.drawImage(bgImg, 0, 0, widthRef.current, heightRef.current);
+          } else {
+            ctx.fillStyle = "#0f1420";
+            ctx.fillRect(0, 0, widthRef.current, heightRef.current);
           }
         }
         onDrawRef.current?.(ctx, frame);
@@ -27448,10 +27472,10 @@ function PlatformerCanvas({
   canvasHeight = 400,
   followCamera = true,
   bgColor,
-  playerSprite,
+  playerSprite = "https://almadar-kflow-assets.web.app/shared/platformer/characters/platformChar_idle.png",
   tileSprites,
-  backgroundImage,
-  assetBaseUrl = "",
+  backgroundImage = "https://almadar-kflow-assets.web.app/shared/scenes/court.png",
+  assetBaseUrl = "https://almadar-kflow-assets.web.app/shared/platformer/",
   leftEvent = "MOVE_LEFT",
   rightEvent = "MOVE_RIGHT",
   jumpEvent = "JUMP",
@@ -38334,7 +38358,7 @@ var init_DetailPanel = __esm({
 function DialogueBubble({
   speaker,
   text,
-  portrait = "https://almadar-kflow-assets.web.app/shared/characters/archetypes/00_base_model.png",
+  portrait = "https://almadar-kflow-assets.web.app/shared/characters/archetypes/04_hero.png",
   position = "bottom",
   className
 }) {
@@ -46625,6 +46649,10 @@ function defaultIsInRange(from, to, range) {
 }
 function WorldMapBoard({
   entity,
+  tiles: propTiles,
+  units: propUnits,
+  features: propFeatures,
+  assetManifest: propAssetManifest,
   isLoading,
   scale = 0.4,
   unitScale = 2.5,
@@ -46653,16 +46681,16 @@ function WorldMapBoard({
   const resolved = boardEntity(entity);
   const hexes = rows(resolved?.hexes);
   const heroes = rows(resolved?.heroes);
-  const features = Array.isArray(resolved?.features) ? resolved.features : [];
+  const features = propFeatures ?? (Array.isArray(resolved?.features) ? resolved.features : []);
   const selectedHeroId = resolved?.selectedHeroId ?? null;
-  const assetManifest = resolved?.assetManifest;
+  const assetManifest = propAssetManifest ?? resolved?.assetManifest;
   const backgroundImage = resolved?.backgroundImage;
   const [hoveredTile, setHoveredTile] = useState(null);
   const selectedHero = useMemo(
     () => heroes.find((h) => str(h.id) === selectedHeroId) ?? null,
     [heroes, selectedHeroId]
   );
-  const tiles = useMemo(
+  const derivedTiles = useMemo(
     () => hexes.map((hex) => ({
       x: num(hex.x),
       y: num(hex.y),
@@ -46671,8 +46699,9 @@ function WorldMapBoard({
     })),
     [hexes]
   );
+  const tiles = propTiles ?? derivedTiles;
   const baseUnits = useMemo(
-    () => heroes.map((hero) => ({
+    () => propUnits ?? heroes.map((hero) => ({
       id: str(hero.id),
       position: heroPosition(hero),
       name: str(hero.name),
@@ -46681,7 +46710,7 @@ function WorldMapBoard({
       maxHealth: 100,
       sprite: hero.sprite == null ? void 0 : str(hero.sprite)
     })),
-    [heroes]
+    [heroes, propUnits]
   );
   const MOVE_SPEED_MS_PER_TILE = 300;
   const movementAnimRef = useRef(null);
@@ -46891,12 +46920,20 @@ function WorldMapTemplate({
   unitScale = 2.5,
   diamondTopY,
   allowMoveAllHeroes = false,
+  tiles,
+  units,
+  features,
+  assetManifest,
   className
 }) {
   return /* @__PURE__ */ jsx(
     WorldMapBoard,
     {
       entity,
+      tiles,
+      units,
+      features,
+      assetManifest,
       scale,
       unitScale,
       diamondTopY,