@almadar/ui 5.62.0 → 5.63.2

package/dist/components/core/atoms/Box.d.ts

@@ -52,6 +52,8 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
     actionPayload?: EventPayload;
     /** Declarative hover event — emits UI:{hoverEvent} with { hovered: true/false } on mouseEnter/mouseLeave */
     hoverEvent?: EventKey;
+    /** When true (default), a touch/pen tap also fires `hoverEvent` (toggling hovered) so hover-only reveals work on touch. */
+    tapReveal?: boolean;
     /** Maximum width (CSS value, e.g., "550px", "80rem") */
     maxWidth?: string;
     /** Children elements */

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

@@ -13,13 +13,21 @@ import type { EventEmit, EventPayload, EntityRow, EntityWith } from "@almadar/co
  * 7 on laptop+ (≥1025).
  */
 export type CalendarDayWindow = 1 | 3 | 7;
+/** The per-event entity fields this grid reads. `startTime`/`endTime` are ISO
+ *  strings; `color` is a Tailwind class string applied to the event chip. */
+export interface CalendarEventRow {
+    title: string;
+    startTime: string;
+    endTime?: string;
+    color?: string;
+}
 export interface CalendarGridProps {
     /** Start of the week (defaults to current week's Monday) */
     weekStart?: Date;
     /** Time slot labels (defaults to 09:00-17:00) */
     timeSlots?: string[];
     /** Events to display on the grid */
-    events?: readonly EntityWith<'id' | 'title' | 'startTime'>[];
+    events?: readonly EntityWith<CalendarEventRow>[];
     /** Called when a time slot is clicked */
     onSlotClick?: (day: Date, time: string) => void;
     /** Called when a day header is clicked */

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

@@ -2,12 +2,25 @@ import React from "react";
 import type { EventEmit, EntityWith } from "@almadar/core";
 export type CanvasItemStatus = 'empty' | 'seated' | 'ordered' | 'awaiting-bill' | 'cleaning';
 export type CanvasItemShape = 'round' | 'rectangle' | 'square';
+/** The per-item entity fields this canvas reads. `x`/`y` are pixel coordinates
+ *  in the canvas plane; `status`/`shape` are string literal unions widened to
+ *  `string` at the row level. */
+export interface CanvasItemRow {
+    label: string;
+    x: number;
+    y: number;
+    capacity: number;
+    partySize?: number;
+    serverName?: string;
+    status?: CanvasItemStatus;
+    shape?: CanvasItemShape;
+}
 export interface PositionedCanvasProps {
     /**
      * Items to render. The molecule narrows non-array values to `[]` and reads
      * each row's `id` / `x` / `y` / `label` fields at render time.
      */
-    items: readonly EntityWith<'id' | 'label' | 'x' | 'y'>[];
+    items: readonly EntityWith<CanvasItemRow>[];
     width?: number;
     height?: number;
     selectedId?: string | null;

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

@@ -7,8 +7,20 @@
 import React from "react";
 import type { EventEmit, EntityWith } from "@almadar/core";
 import { type VoteValue } from "./VoteStack";
+/** The per-node entity fields this tree reads. `replies` is the same row shape
+ *  nested recursively; `userVote` carries the `VoteValue` literal union. */
+export interface ReplyNodeRow {
+    authorName: string;
+    content: string;
+    authorAvatarUrl?: string;
+    postedAt?: string;
+    voteCount?: number;
+    userVote?: VoteValue;
+    collapsed?: boolean;
+    replies?: readonly EntityWith<ReplyNodeRow>[];
+}
 export interface ReplyTreeProps {
-    nodes: readonly EntityWith<'id' | 'authorName' | 'content'>[];
+    nodes: readonly EntityWith<ReplyNodeRow>[];
     maxDepth?: number;
     onVote?: (nodeId: string, vote: VoteValue) => void;
     onReply?: (parentNodeId: string) => void;

package/dist/components/game/molecules/three/index.cjs

@@ -3101,6 +3101,9 @@ var GameCanvas3D = React11.forwardRef(
                         target: cameraTarget,
                         enableDamping: true,
                         dampingFactor: 0.05,
+                        enableZoom: true,
+                        enablePan: true,
+                        touches: { ONE: THREE6__namespace.TOUCH.ROTATE, TWO: THREE6__namespace.TOUCH.DOLLY_PAN },
                         minDistance: 2,
                         maxDistance: 100,
                         maxPolarAngle: Math.PI / 2 - 0.1
@@ -4438,6 +4441,51 @@ function GameBoard3D({
   ] });
 }
 GameBoard3D.displayName = "GameBoard3D";
+function useTapReveal(options = {}) {
+  const { onReveal, onDismiss, refs, enabled = true } = options;
+  const [revealed, setRevealed] = React11.useState(false);
+  const onRevealRef = React11.useRef(onReveal);
+  const onDismissRef = React11.useRef(onDismiss);
+  onRevealRef.current = onReveal;
+  onDismissRef.current = onDismiss;
+  const reveal = React11.useCallback(() => {
+    setRevealed((wasRevealed) => {
+      if (!wasRevealed) onRevealRef.current?.();
+      return true;
+    });
+  }, []);
+  const dismiss = React11.useCallback(() => {
+    setRevealed((wasRevealed) => {
+      if (wasRevealed) onDismissRef.current?.();
+      return false;
+    });
+  }, []);
+  const onPointerDown = React11.useCallback(
+    (e) => {
+      if (!enabled || e.pointerType === "mouse") return;
+      if (revealed) dismiss();
+      else reveal();
+    },
+    [enabled, revealed, reveal, dismiss]
+  );
+  React11.useEffect(() => {
+    if (!revealed || typeof document === "undefined") return;
+    const onDocDown = (ev) => {
+      const target = ev.target;
+      if (!(target instanceof Node)) return;
+      const inside = (refs ?? []).some((r) => r.current?.contains(target));
+      if (!inside) dismiss();
+    };
+    const id = setTimeout(() => document.addEventListener("pointerdown", onDocDown), 0);
+    return () => {
+      clearTimeout(id);
+      document.removeEventListener("pointerdown", onDocDown);
+    };
+  }, [revealed, refs, dismiss]);
+  return { revealed, triggerProps: { onPointerDown }, reveal, dismiss };
+}
+
+// components/core/atoms/Box.tsx
 var paddingStyles = {
   none: "p-0",
   xs: "p-1",
@@ -4563,10 +4611,12 @@ var Box = React11__default.default.forwardRef(
     action,
     actionPayload,
     hoverEvent,
+    tapReveal = true,
     maxWidth,
     onClick,
     onMouseEnter,
     onMouseLeave,
+    onPointerDown,
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
@@ -4589,6 +4639,19 @@ var Box = React11__default.default.forwardRef(
       }
       onMouseLeave?.(e);
     }, [hoverEvent, eventBus, onMouseLeave]);
+    const { triggerProps } = useTapReveal({
+      enabled: tapReveal && !!hoverEvent,
+      onReveal: React11.useCallback(() => {
+        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
+      }, [hoverEvent, eventBus]),
+      onDismiss: React11.useCallback(() => {
+        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
+      }, [hoverEvent, eventBus])
+    });
+    const handlePointerDown = React11.useCallback((e) => {
+      if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
+      onPointerDown?.(e);
+    }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
     const isClickable = action || onClick;
     return React11__default.default.createElement(
       Component2,
@@ -4616,6 +4679,7 @@ var Box = React11__default.default.forwardRef(
         onClick: isClickable ? handleClick : void 0,
         onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
         onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
+        onPointerDown: hoverEvent && tapReveal || onPointerDown ? handlePointerDown : void 0,
         style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
         ...rest
       },

package/dist/components/game/molecules/three/index.js

@@ -3077,6 +3077,9 @@ var GameCanvas3D = forwardRef(
                         target: cameraTarget,
                         enableDamping: true,
                         dampingFactor: 0.05,
+                        enableZoom: true,
+                        enablePan: true,
+                        touches: { ONE: THREE6.TOUCH.ROTATE, TWO: THREE6.TOUCH.DOLLY_PAN },
                         minDistance: 2,
                         maxDistance: 100,
                         maxPolarAngle: Math.PI / 2 - 0.1
@@ -4414,6 +4417,51 @@ function GameBoard3D({
   ] });
 }
 GameBoard3D.displayName = "GameBoard3D";
+function useTapReveal(options = {}) {
+  const { onReveal, onDismiss, refs, enabled = true } = options;
+  const [revealed, setRevealed] = useState(false);
+  const onRevealRef = useRef(onReveal);
+  const onDismissRef = useRef(onDismiss);
+  onRevealRef.current = onReveal;
+  onDismissRef.current = onDismiss;
+  const reveal = useCallback(() => {
+    setRevealed((wasRevealed) => {
+      if (!wasRevealed) onRevealRef.current?.();
+      return true;
+    });
+  }, []);
+  const dismiss = useCallback(() => {
+    setRevealed((wasRevealed) => {
+      if (wasRevealed) onDismissRef.current?.();
+      return false;
+    });
+  }, []);
+  const onPointerDown = useCallback(
+    (e) => {
+      if (!enabled || e.pointerType === "mouse") return;
+      if (revealed) dismiss();
+      else reveal();
+    },
+    [enabled, revealed, reveal, dismiss]
+  );
+  useEffect(() => {
+    if (!revealed || typeof document === "undefined") return;
+    const onDocDown = (ev) => {
+      const target = ev.target;
+      if (!(target instanceof Node)) return;
+      const inside = (refs ?? []).some((r) => r.current?.contains(target));
+      if (!inside) dismiss();
+    };
+    const id = setTimeout(() => document.addEventListener("pointerdown", onDocDown), 0);
+    return () => {
+      clearTimeout(id);
+      document.removeEventListener("pointerdown", onDocDown);
+    };
+  }, [revealed, refs, dismiss]);
+  return { revealed, triggerProps: { onPointerDown }, reveal, dismiss };
+}
+
+// components/core/atoms/Box.tsx
 var paddingStyles = {
   none: "p-0",
   xs: "p-1",
@@ -4539,10 +4587,12 @@ var Box = React11.forwardRef(
     action,
     actionPayload,
     hoverEvent,
+    tapReveal = true,
     maxWidth,
     onClick,
     onMouseEnter,
     onMouseLeave,
+    onPointerDown,
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
@@ -4565,6 +4615,19 @@ var Box = React11.forwardRef(
       }
       onMouseLeave?.(e);
     }, [hoverEvent, eventBus, onMouseLeave]);
+    const { triggerProps } = useTapReveal({
+      enabled: tapReveal && !!hoverEvent,
+      onReveal: useCallback(() => {
+        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
+      }, [hoverEvent, eventBus]),
+      onDismiss: useCallback(() => {
+        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
+      }, [hoverEvent, eventBus])
+    });
+    const handlePointerDown = useCallback((e) => {
+      if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
+      onPointerDown?.(e);
+    }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
     const isClickable = action || onClick;
     return React11.createElement(
       Component2,
@@ -4592,6 +4655,7 @@ var Box = React11.forwardRef(
         onClick: isClickable ? handleClick : void 0,
         onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
         onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
+        onPointerDown: hoverEvent && tapReveal || onPointerDown ? handlePointerDown : void 0,
         style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
         ...rest
       },

package/dist/components/game/organisms/hooks/useCamera.d.ts

@@ -21,6 +21,22 @@ interface CameraResult {
     handleMouseLeave: () => void;
     /** Wheel handler — zoom in/out */
     handleWheel: (e: React.WheelEvent, drawFn?: () => void) => void;
+    /** Pointer down — starts panning (mouse/touch/pen via Pointer Events). */
+    handlePointerDown: (e: React.PointerEvent) => void;
+    /** Pointer up — stops panning. */
+    handlePointerUp: () => void;
+    /** Pointer move — pans camera if dragging, returns true if panning. */
+    handlePointerMove: (e: React.PointerEvent, drawFn?: () => void) => boolean;
+    /** Apply a two-finger pan delta (screen px) directly to the camera. */
+    panBy: (dx: number, dy: number, drawFn?: () => void) => void;
+    /**
+     * Multiplicative zoom by `factor` keeping the world point under (centerX,centerY)
+     * — screen px relative to the canvas — fixed. Used by wheel + pinch.
+     */
+    zoomAtPoint: (factor: number, centerX: number, centerY: number, viewportSize: {
+        width: number;
+        height: number;
+    }, drawFn?: () => void) => void;
     /** Convert screen coordinates to world coordinates (inverse camera transform) */
     screenToWorld: (clientX: number, clientY: number, canvas: HTMLCanvasElement, viewportSize: {
         width: number;