@almadar/ui 5.12.0 → 5.13.2

package/dist/components/index.js

@@ -8627,7 +8627,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect72, useRef: useRef66, useCallback: useCallback128, useState: useState110 } = React80__default;
+      const { useEffect: useEffect72, useRef: useRef66, useCallback: useCallback128, useState: useState111 } = React80__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -8672,7 +8672,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState110(null);
+        const [clickedPosition, setClickedPosition] = useState111(null);
         const handleMapClick = useCallback128((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -16378,6 +16378,7 @@ function CalendarGrid({
   swipeRightEvent,
   dayWindow = "auto"
 }) {
+  const evs = Array.isArray(events2) ? events2 : events2 ? [events2] : [];
   const eventBus = useEventBus();
   const longPressTimer = useRef(null);
   const resolvedWeekStart = useMemo(
@@ -16426,7 +16427,7 @@ function CalendarGrid({
     [onEventClick]
   );
   const eventsForDayCount = useCallback(
-    (day) => events2.filter(
+    (day) => evs.filter(
       (ev) => new Date(ev.startTime).toDateString() === day.toDateString()
     ).length,
     [events2]
@@ -16541,7 +16542,7 @@ function CalendarGrid({
                   }
                 ) }),
                 visibleDays.map((day) => {
-                  const slotEvents = events2.filter(
+                  const slotEvents = evs.filter(
                     (ev) => eventInSlot(ev, day, time)
                   );
                   const isToday = day.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
@@ -25777,8 +25778,16 @@ function GameCanvas2D({
   drawEventRef.current = drawEvent;
   const emitRef = React80.useRef(emit);
   emitRef.current = emit;
+  const assetBaseUrlRef = React80.useRef(assetBaseUrl);
+  assetBaseUrlRef.current = assetBaseUrl;
+  const backgroundImageRef = React80.useRef(backgroundImage);
+  backgroundImageRef.current = backgroundImage;
+  const widthRef = React80.useRef(width);
+  widthRef.current = width;
+  const heightRef = React80.useRef(height);
+  heightRef.current = height;
   const loadImage = React80.useCallback((url) => {
-    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
+    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrlRef.current}${url}`;
     const cached = imageCache.current.get(fullUrl);
     if (cached?.complete && cached.naturalWidth > 0) return cached;
     if (!cached) {
@@ -25788,7 +25797,7 @@ function GameCanvas2D({
       imageCache.current.set(fullUrl, img);
     }
     return null;
-  }, [assetBaseUrl]);
+  }, []);
   React80.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -25810,10 +25819,10 @@ function GameCanvas2D({
         if (tickEventRef.current) {
           emitRef.current(tickEventRef.current, { dt, frame });
         }
-        if (backgroundImage) {
-          const bgImg = loadImage(backgroundImage);
+        if (backgroundImageRef.current) {
+          const bgImg = loadImage(backgroundImageRef.current);
           if (bgImg) {
-            ctx.drawImage(bgImg, 0, 0, width, height);
+            ctx.drawImage(bgImg, 0, 0, widthRef.current, heightRef.current);
           }
         }
         onDrawRef.current?.(ctx, frame);
@@ -25829,7 +25838,7 @@ function GameCanvas2D({
       running = false;
       cancelAnimationFrame(rafRef.current);
     };
-  }, [fps]);
+  }, [fps, loadImage]);
   return /* @__PURE__ */ jsx(Box, { className: cn("inline-block", className), children: /* @__PURE__ */ jsx(
     "canvas",
     {
@@ -27023,15 +27032,22 @@ function PlatformerCanvas({
   const eventBus = useEventBus();
   const keysRef = useRef(/* @__PURE__ */ new Set());
   const imageCache = useRef(/* @__PURE__ */ new Map());
+  const [loadedImages, setLoadedImages] = useState(/* @__PURE__ */ new Set());
   const loadImage = useCallback((url) => {
     const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
     const cached = imageCache.current.get(fullUrl);
-    if (cached?.complete && cached.naturalWidth > 0) return cached;
+    if (cached?.complete && cached.naturalWidth > 0) {
+      if (!loadedImages.has(fullUrl)) {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
+      }
+      return cached;
+    }
     if (!cached) {
       const img = new Image();
       img.crossOrigin = "anonymous";
       img.src = fullUrl;
       img.onload = () => {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
         updateAssetStatus(fullUrl, "loaded");
       };
       img.onerror = () => {
@@ -27041,7 +27057,7 @@ function PlatformerCanvas({
       updateAssetStatus(fullUrl, "pending");
     }
     return null;
-  }, [assetBaseUrl]);
+  }, [assetBaseUrl, loadedImages]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     const canvas = canvasRef.current;
@@ -27223,7 +27239,7 @@ function PlatformerCanvas({
       ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
       ctx.fill();
     }
-  });
+  }, [player, platforms, worldWidth, worldHeight, canvasWidth, canvasHeight, followCamera, bgColor, playerSprite, tileSprites, backgroundImage, assetBaseUrl, loadedImages]);
   return /* @__PURE__ */ jsx(
     "canvas",
     {
@@ -29274,7 +29290,7 @@ function useSafeEventBus10() {
   }
 }
 function SortableListInner({
-  items: initialItems = EMPTY_ITEMS,
+  items: initialItemsProp = EMPTY_ITEMS,
   renderItem,
   reorderEvent,
   reorderPayload,
@@ -29282,6 +29298,7 @@ function SortableListInner({
   className
 }) {
   const eventBus = useSafeEventBus10();
+  const initialItems = Array.isArray(initialItemsProp) ? initialItemsProp : initialItemsProp ? [initialItemsProp] : [];
   const handleReorder = useCallback(
     (fromIndex, toIndex, item) => {
       eventBus.emit(`UI:${reorderEvent}`, {
@@ -32778,9 +32795,10 @@ var init_ReplyTree = __esm({
       showActions = true,
       className
     }) => {
+      const nodeList = Array.isArray(nodes) ? nodes : nodes ? [nodes] : [];
       const [collapsedSet, setCollapsedSet] = useState(() => {
         const acc = /* @__PURE__ */ new Set();
-        collectInitiallyCollapsed(nodes, acc);
+        collectInitiallyCollapsed(nodeList, acc);
         return acc;
       });
       const toggleCollapse = useCallback((id) => {
@@ -32794,10 +32812,10 @@ var init_ReplyTree = __esm({
           return next;
         });
       }, []);
-      if (nodes.length === 0) {
+      if (nodeList.length === 0) {
         return /* @__PURE__ */ jsx(Box, { className: cn("text-sm text-muted-foreground", className), children: "No replies yet." });
       }
-      return /* @__PURE__ */ jsx(Box, { className: cn("flex flex-col gap-2 min-w-0", className), children: nodes.map((node) => /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(Box, { className: cn("flex flex-col gap-2 min-w-0", className), children: nodeList.map((node) => /* @__PURE__ */ jsx(
         ReplyTreeNode,
         {
           node,

package/dist/components/molecules/CalendarGrid.d.ts

@@ -6,7 +6,7 @@
  * Composes DayCell and TimeSlotCell atoms into a 7-day grid.
  */
 import React from "react";
-import type { EventEmit, EventPayload } from "@almadar/core";
+import type { EventEmit, EventPayload, EntityCollection } from "@almadar/core";
 export interface CalendarEvent {
     id: string;
     title: string;
@@ -26,7 +26,7 @@ export interface CalendarGridProps {
     /** Time slot labels (defaults to 09:00-17:00) */
     timeSlots?: string[];
     /** Events to display on the grid */
-    events?: CalendarEvent[];
+    events?: EntityCollection<CalendarEvent>;
     /** Called when a time slot is clicked */
     onSlotClick?: (day: Date, time: string) => void;
     /** Called when a day header is clicked */

package/dist/components/molecules/DataGrid.d.ts

@@ -11,7 +11,7 @@
  * Uses atoms only internally: Box, VStack, HStack, Typography, Badge, Button, Icon.
  */
 import React from 'react';
-import type { EntityRow, EventKey } from '@almadar/core';
+import type { EntityRow, EventKey, EntityCollection } from '@almadar/core';
 import { type DataDndProps } from './useDataDnd';
 export interface DataGridField {
     /** Entity field name (dot-notation supported) */
@@ -54,8 +54,14 @@ export interface DataGridProps<T extends EntityRow = EntityRow> extends DataDndP
      * without widening. The generic `T` lets consumers pass a narrower
      * entity (e.g. `CartItem`) and have the `children` render function
      * receive cards typed to that exact shape.
+     *
+     * Declared as the pattern's data INLET via `EntityCollection<T>` (the inlet
+     * half of the circuit, symmetric with the `EventKey` outlet props below):
+     * pattern-sync tags it `kind:"entity", cardinality:"collection"` so consumers
+     * bind the domain entity without name-matching the prop. Structurally still
+     * `T | readonly T[]` — see the brand's doc.
      */
-    entity: T | readonly T[];
+    entity: EntityCollection<T>;
     /**
      * Field definitions for rendering each card. The pattern contract in
      * `@almadar/patterns` documents `columns` as the wire-format alias the

package/dist/components/molecules/DataList.d.ts

@@ -11,7 +11,7 @@
  * Uses atoms only internally: Box, VStack, HStack, Typography, Badge, Button, Icon.
  */
 import React from 'react';
-import type { EntityRow, EventKey } from "@almadar/core";
+import type { EntityRow, EntityCollection, EventKey } from "@almadar/core";
 import { type DataDndProps } from './useDataDnd';
 export interface DataListField {
     /** Entity field name (dot-notation supported) */
@@ -45,7 +45,7 @@ export interface DataListProps<T extends EntityRow = EntityRow> extends DataDndP
      * entity (e.g. `CartItem`) and have the `children` render function
      * receive items of that exact shape.
      */
-    entity: T | readonly T[];
+    entity: EntityCollection<T>;
     /**
      * Field definitions for rendering each row. The pattern contract in
      * `@almadar/patterns` documents `columns` as the wire-format alias the

package/dist/components/molecules/PositionedCanvas.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { EventEmit, EventPayloadValue } from "@almadar/core";
+import type { EventEmit, EntityCollection } from "@almadar/core";
 export type CanvasItemStatus = 'empty' | 'seated' | 'ordered' | 'awaiting-bill' | 'cleaning';
 export type CanvasItemShape = 'round' | 'rectangle' | 'square';
 export interface CanvasItem {
@@ -20,7 +20,7 @@ export interface PositionedCanvasProps {
      * molecule narrows non-array values to `[]` and validates element shape at
      * render time via the `id` / `x` / `y` guards.
      */
-    items: readonly CanvasItem[] | EventPayloadValue;
+    items: EntityCollection<CanvasItem>;
     width?: number;
     height?: number;
     selectedId?: string | null;

package/dist/components/molecules/ReplyTree.d.ts

@@ -5,7 +5,7 @@
  * Composes the VoteStack molecule + Avatar/Typography/Button atoms.
  */
 import React from "react";
-import type { EventEmit } from "@almadar/core";
+import type { EventEmit, EntityCollection } from "@almadar/core";
 import { type VoteValue } from "../molecules/VoteStack";
 export interface ReplyNode {
     id: string;
@@ -19,7 +19,7 @@ export interface ReplyNode {
     collapsed?: boolean;
 }
 export interface ReplyTreeProps {
-    nodes: ReplyNode[];
+    nodes: EntityCollection<ReplyNode>;
     maxDepth?: number;
     onVote?: (nodeId: string, vote: VoteValue) => void;
     onReply?: (parentNodeId: string) => void;

package/dist/components/molecules/SortableList.d.ts

@@ -6,9 +6,9 @@
  * Shows a drop indicator line at the target position during drag.
  */
 import React from 'react';
-import type { EventKey, EventPayload, EventPayloadValue } from "@almadar/core";
+import type { EntityCollection, EventKey, EventPayload, EventPayloadValue } from "@almadar/core";
 export interface SortableListProps<T extends EventPayloadValue = EventPayload> {
-    items: T[];
+    items: EntityCollection<T>;
     renderItem: (item: T, index: number) => React.ReactNode;
     reorderEvent: EventKey;
     reorderPayload?: EventPayload;

package/dist/components/molecules/TableView.d.ts

@@ -12,7 +12,7 @@
  * Icon, Checkbox, Divider.
  */
 import React from 'react';
-import type { EntityRow, EventKey } from '@almadar/core';
+import type { EntityRow, EventKey, EntityCollection } from '@almadar/core';
 import { type DataDndProps } from './useDataDnd';
 export interface TableViewColumn {
     /** Stable column key (React key + default value lookup). */
@@ -52,7 +52,7 @@ export interface TableViewItemAction {
 }
 export interface TableViewProps<T extends EntityRow = EntityRow> extends DataDndProps {
     /** Schema entity data — single record or collection. */
-    entity: T | readonly T[];
+    entity: EntityCollection<T>;
     /** Column definitions. The compiler emits `columns`; `fields` is the alias. */
     columns?: readonly TableViewColumn[];
     /** Alias for `columns`. */

package/dist/components/organisms/DetailPanel.d.ts

@@ -7,6 +7,7 @@
  * See EntityDisplayProps in ./types.ts for base prop contract.
  */
 import React from "react";
+import type { EntityRecord, EntityRow } from "@almadar/core";
 import type { LucideIcon } from "lucide-react";
 import type { EntityDisplayProps } from "./types";
 export interface DetailField {
@@ -44,6 +45,8 @@ export type FieldDef = string | {
     type: string;
 };
 export interface DetailPanelProps extends EntityDisplayProps {
+    /** RECORD-cardinality override: renders ONE record (see body collapse below). */
+    entity?: EntityRecord<EntityRow>;
     title?: string;
     subtitle?: string;
     status?: {

package/dist/components/organisms/HeroOrganism.d.ts

@@ -10,9 +10,11 @@
  * - Never listens to events
  */
 import React from 'react';
+import type { EntityRecord } from '@almadar/core';
 import type { EntityDisplayProps } from './types';
 import type { HeroEntity } from './marketing-types';
 export interface HeroOrganismProps extends EntityDisplayProps<HeroEntity> {
+    entity?: EntityRecord<HeroEntity>;
     children?: React.ReactNode;
 }
 export declare const HeroOrganism: React.FC<HeroOrganismProps>;

package/dist/components/organisms/Timeline.d.ts

@@ -12,7 +12,7 @@
  */
 import React from "react";
 import type { EventKey } from "@almadar/core";
-import type { EntityRow } from "@almadar/core";
+import type { EntityCollection, EntityRow } from "@almadar/core";
 import type { LucideIcon } from "lucide-react";
 export type TimelineItemStatus = "complete" | "active" | "pending" | "error";
 /**
@@ -55,7 +55,7 @@ export interface TimelineProps {
      * TimelineItem fields (`icon`, callbacks) cannot round-trip through the
      * event bus, so decorative stories that need them pass `items` directly.
      */
-    entity?: EntityRow | readonly EntityRow[];
+    entity?: EntityCollection<EntityRow>;
     /** Timeline title */
     title?: string;
     /** Timeline items */

package/dist/components/organisms/book/BookViewer.d.ts

@@ -17,9 +17,12 @@
  * - Listens: UI:BOOK_START, UI:BOOK_NAVIGATE, UI:BOOK_PAGE_PREV/NEXT, UI:BOOK_PRINT, UI:BOOK_SHOW_TOC
  */
 import React from 'react';
+import type { EntityRecord, EntityRow } from '@almadar/core';
 import type { EntityDisplayProps } from '../types';
 import type { BookFieldMap } from './types';
 export interface BookViewerProps extends EntityDisplayProps {
+    /** Renders ONE record (the book), not a collection */
+    entity?: EntityRecord<EntityRow>;
     /** Initial page index (default: 0 = cover) */
     initialPage?: number;
     /** Field name translation map — a BookFieldMap object or locale key ("ar") */

package/dist/components/organisms/types.d.ts

@@ -7,7 +7,7 @@
  * Exception: Form manages local `formData` state for field input tracking.
  * This is the ONE allowed exception — documented here.
  */
-import type { EntityRow } from '@almadar/core';
+import type { EntityRow, EntityInlet } from '@almadar/core';
 export declare const EntityDisplayEvents: {
     readonly SORT: "SORT";
     readonly PAGINATE: "PAGINATE";
@@ -61,7 +61,7 @@ export interface EntityDisplayProps<T extends EntityRow = EntityRow> {
      * extend `EntityRow`. They surface `EntityDisplayProps<T>` constraint errors.
      * Tracked as a Phase 7 follow-up in `docs/Almadar_Entity_V2_Plan.md` §10.
      */
-    entity?: T | readonly T[];
+    entity?: EntityInlet<T>;
     /** Additional CSS classes */
     className?: string;
     /** Loading state indicator */

package/dist/docs/index.d.cts

@@ -318,7 +318,7 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
     /** onChange handler - accepts events from input, select, or textarea */
     onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
 }
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement>>;
 
 /**
  * DocSidebar Molecule Component

package/dist/providers/index.cjs

@@ -10244,7 +10244,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect69, useRef: useRef65, useCallback: useCallback114, useState: useState99 } = React86__namespace.default;
+      const { useEffect: useEffect69, useRef: useRef65, useCallback: useCallback114, useState: useState100 } = React86__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -10289,7 +10289,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState99(null);
+        const [clickedPosition, setClickedPosition] = useState100(null);
         const handleMapClick = useCallback114((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -17903,6 +17903,7 @@ function CalendarGrid({
   swipeRightEvent,
   dayWindow = "auto"
 }) {
+  const evs = Array.isArray(events2) ? events2 : events2 ? [events2] : [];
   const eventBus = useEventBus();
   const longPressTimer = React86.useRef(null);
   const resolvedWeekStart = React86.useMemo(
@@ -17951,7 +17952,7 @@ function CalendarGrid({
     [onEventClick]
   );
   const eventsForDayCount = React86.useCallback(
-    (day) => events2.filter(
+    (day) => evs.filter(
       (ev) => new Date(ev.startTime).toDateString() === day.toDateString()
     ).length,
     [events2]
@@ -18066,7 +18067,7 @@ function CalendarGrid({
                   }
                 ) }),
                 visibleDays.map((day) => {
-                  const slotEvents = events2.filter(
+                  const slotEvents = evs.filter(
                     (ev) => eventInSlot(ev, day, time)
                   );
                   const isToday = day.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
@@ -26853,8 +26854,16 @@ function GameCanvas2D({
   drawEventRef.current = drawEvent;
   const emitRef = React86__namespace.useRef(emit);
   emitRef.current = emit;
+  const assetBaseUrlRef = React86__namespace.useRef(assetBaseUrl);
+  assetBaseUrlRef.current = assetBaseUrl;
+  const backgroundImageRef = React86__namespace.useRef(backgroundImage);
+  backgroundImageRef.current = backgroundImage;
+  const widthRef = React86__namespace.useRef(width);
+  widthRef.current = width;
+  const heightRef = React86__namespace.useRef(height);
+  heightRef.current = height;
   const loadImage = React86__namespace.useCallback((url) => {
-    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
+    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrlRef.current}${url}`;
     const cached = imageCache.current.get(fullUrl);
     if (cached?.complete && cached.naturalWidth > 0) return cached;
     if (!cached) {
@@ -26864,7 +26873,7 @@ function GameCanvas2D({
       imageCache.current.set(fullUrl, img);
     }
     return null;
-  }, [assetBaseUrl]);
+  }, []);
   React86__namespace.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -26886,10 +26895,10 @@ function GameCanvas2D({
         if (tickEventRef.current) {
           emitRef.current(tickEventRef.current, { dt, frame });
         }
-        if (backgroundImage) {
-          const bgImg = loadImage(backgroundImage);
+        if (backgroundImageRef.current) {
+          const bgImg = loadImage(backgroundImageRef.current);
           if (bgImg) {
-            ctx.drawImage(bgImg, 0, 0, width, height);
+            ctx.drawImage(bgImg, 0, 0, widthRef.current, heightRef.current);
           }
         }
         onDrawRef.current?.(ctx, frame);
@@ -26905,7 +26914,7 @@ function GameCanvas2D({
       running = false;
       cancelAnimationFrame(rafRef.current);
     };
-  }, [fps]);
+  }, [fps, loadImage]);
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("inline-block", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     "canvas",
     {
@@ -28047,15 +28056,22 @@ function PlatformerCanvas({
   const eventBus = useEventBus();
   const keysRef = React86.useRef(/* @__PURE__ */ new Set());
   const imageCache = React86.useRef(/* @__PURE__ */ new Map());
+  const [loadedImages, setLoadedImages] = React86.useState(/* @__PURE__ */ new Set());
   const loadImage = React86.useCallback((url) => {
     const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
     const cached = imageCache.current.get(fullUrl);
-    if (cached?.complete && cached.naturalWidth > 0) return cached;
+    if (cached?.complete && cached.naturalWidth > 0) {
+      if (!loadedImages.has(fullUrl)) {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
+      }
+      return cached;
+    }
     if (!cached) {
       const img = new Image();
       img.crossOrigin = "anonymous";
       img.src = fullUrl;
       img.onload = () => {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
         updateAssetStatus(fullUrl, "loaded");
       };
       img.onerror = () => {
@@ -28065,7 +28081,7 @@ function PlatformerCanvas({
       updateAssetStatus(fullUrl, "pending");
     }
     return null;
-  }, [assetBaseUrl]);
+  }, [assetBaseUrl, loadedImages]);
   React86.useEffect(() => {
     if (typeof window === "undefined") return;
     const canvas = canvasRef.current;
@@ -28247,7 +28263,7 @@ function PlatformerCanvas({
       ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
       ctx.fill();
     }
-  });
+  }, [player, platforms, worldWidth, worldHeight, canvasWidth, canvasHeight, followCamera, bgColor, playerSprite, tileSprites, backgroundImage, assetBaseUrl, loadedImages]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "canvas",
     {
@@ -30276,7 +30292,7 @@ function useSafeEventBus10() {
   }
 }
 function SortableListInner({
-  items: initialItems = EMPTY_ITEMS,
+  items: initialItemsProp = EMPTY_ITEMS,
   renderItem,
   reorderEvent,
   reorderPayload,
@@ -30284,6 +30300,7 @@ function SortableListInner({
   className
 }) {
   const eventBus = useSafeEventBus10();
+  const initialItems = Array.isArray(initialItemsProp) ? initialItemsProp : initialItemsProp ? [initialItemsProp] : [];
   const handleReorder = React86.useCallback(
     (fromIndex, toIndex, item) => {
       eventBus.emit(`UI:${reorderEvent}`, {
@@ -33780,9 +33797,10 @@ var init_ReplyTree = __esm({
       showActions = true,
       className
     }) => {
+      const nodeList = Array.isArray(nodes) ? nodes : nodes ? [nodes] : [];
       const [collapsedSet, setCollapsedSet] = React86.useState(() => {
         const acc = /* @__PURE__ */ new Set();
-        collectInitiallyCollapsed(nodes, acc);
+        collectInitiallyCollapsed(nodeList, acc);
         return acc;
       });
       const toggleCollapse = React86.useCallback((id) => {
@@ -33796,10 +33814,10 @@ var init_ReplyTree = __esm({
           return next;
         });
       }, []);
-      if (nodes.length === 0) {
+      if (nodeList.length === 0) {
         return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("text-sm text-muted-foreground", className), children: "No replies yet." });
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("flex flex-col gap-2 min-w-0", className), children: nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("flex flex-col gap-2 min-w-0", className), children: nodeList.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
         ReplyTreeNode,
         {
           node,