dreamboard 0.1.21 → 0.1.22

package/dist/runtime-packages/ui-host-runtime/src/components/host-controls.tsx

@@ -0,0 +1,359 @@
+import { useMemo, useRef, useState } from "react";
+import { cn } from "@dreamboard/ui/lib/utils";
+import { Button } from "@dreamboard/ui/components/button";
+import { Badge } from "@dreamboard/ui/components/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@dreamboard/ui/components/dropdown-menu";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@dreamboard/ui/components/popover";
+import { ScrollArea } from "@dreamboard/ui/components/scroll-area";
+import {
+  Check,
+  ChevronDown,
+  Clock3,
+  History,
+  RotateCcw,
+  Sparkles,
+  Users,
+} from "lucide-react";
+import type { HistoryState } from "../unified-session-store.js";
+
+export interface HostControllablePlayer {
+  playerId: string;
+  displayName: string;
+}
+
+export interface HostPlayerSwitcherProps {
+  controllablePlayers: HostControllablePlayer[];
+  controllingPlayerId: string | null;
+  onSwitchPlayer: (playerId: string) => void;
+  className?: string;
+}
+
+export interface HostHistoryNavigatorProps {
+  isHost: boolean;
+  history: HistoryState | null;
+  onRestoreHistory: (entryId: string) => Promise<void> | void;
+  className?: string;
+}
+
+export interface HostSessionToolbarProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+function formatHistoryTimestamp(timestamp: string): string {
+  try {
+    return new Date(timestamp).toLocaleTimeString(undefined, {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+  } catch {
+    return timestamp;
+  }
+}
+
+export function HostSessionToolbar({
+  children,
+  className,
+}: HostSessionToolbarProps) {
+  return (
+    <div
+      className={cn("flex flex-wrap items-center justify-end gap-2", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function HostPlayerSwitcher({
+  controllablePlayers,
+  controllingPlayerId,
+  onSwitchPlayer,
+  className,
+}: HostPlayerSwitcherProps) {
+  const currentPlayer = useMemo(
+    () =>
+      controllablePlayers.find(
+        (player) => player.playerId === controllingPlayerId,
+      ) ?? controllablePlayers[0],
+    [controllablePlayers, controllingPlayerId],
+  );
+
+  if (controllablePlayers.length <= 1) {
+    return null;
+  }
+
+  // Designer's Notebook: the trigger button is the ONE punctuation moment
+  // for this control (wobbly + hard shadow). The dropdown contents below are
+  // intentionally calm — plain rows, no rotation, no per-row wobbly borders.
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            "group h-auto min-h-14 min-w-[220px] justify-between gap-3 border-[3px] border-border bg-white px-4 py-3 text-left text-foreground hard-shadow transition-all hover:bg-[#fff9c4] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_#2d2d2d] wobbly-border-md",
+            className,
+          )}
+        >
+          <span className="flex min-w-0 items-center gap-3">
+            <span className="flex h-10 w-10 shrink-0 items-center justify-center border-2 border-border bg-[#e7eefc] text-[#2d5da1]">
+              <Users className="h-4 w-4 text-[#2d5da1]" />
+            </span>
+            <span className="min-w-0">
+              <span className="block text-[10px] font-bold uppercase tracking-[0.18em] text-muted-foreground">
+                Seat Control
+              </span>
+              <span className="block truncate font-display text-lg leading-none text-foreground">
+                {currentPlayer?.displayName ?? "Choose player"}
+              </span>
+              <span className="mt-1 block truncate text-xs text-muted-foreground">
+                {currentPlayer?.playerId ?? "Switch the active seat"}
+              </span>
+            </span>
+          </span>
+          <span className="flex shrink-0 items-center gap-2">
+            <Badge
+              variant="secondary"
+              className="border border-border/40 bg-[#efe7da] px-2.5 py-0.5 text-[10px] uppercase tracking-[0.14em] text-foreground shadow-none"
+            >
+              {controllablePlayers.length} seats
+            </Badge>
+            <ChevronDown className="h-4 w-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+          </span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="z-[80] w-[22rem] border-2 border-border bg-[#fdfbf7] p-2 font-sans"
+      >
+        <DropdownMenuLabel className="px-2 pb-3 pt-1">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-muted-foreground">
+                Play As
+              </p>
+              <p className="mt-1 font-display text-xl leading-none text-foreground">
+                Switch the active seat
+              </p>
+            </div>
+            <Sparkles className="h-5 w-5 text-primary shrink-0" />
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator className="mx-1 border-b border-border/40 bg-transparent" />
+        <DropdownMenuRadioGroup
+          value={controllingPlayerId ?? ""}
+          onValueChange={(playerId) => {
+            if (playerId !== controllingPlayerId) {
+              onSwitchPlayer(playerId);
+            }
+          }}
+        >
+          {controllablePlayers.map((player, index) => (
+            <DropdownMenuRadioItem
+              key={player.playerId}
+              value={player.playerId}
+              className="mb-1 rounded-none border-2 border-transparent bg-white px-3 py-3 transition-colors focus:border-border/40 focus:bg-[#fff9c4] focus:text-foreground focus:outline-none data-[state=checked]:border-border data-[state=checked]:bg-[#fff9c4] data-[state=checked]:text-foreground [&>span]:hidden"
+            >
+              <div className="flex min-w-0 items-center gap-3">
+                <div className="flex h-9 w-9 shrink-0 items-center justify-center border-2 border-border bg-[#efe7da] text-sm font-bold text-foreground">
+                  {index + 1}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <span className="block truncate font-display text-lg leading-none">
+                    {player.displayName}
+                  </span>
+                  <span className="mt-1 block truncate text-xs text-muted-foreground">
+                    {player.playerId}
+                  </span>
+                </div>
+                {player.playerId === controllingPlayerId ? (
+                  <Check className="ml-auto h-5 w-5 shrink-0 text-primary" />
+                ) : null}
+              </div>
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export function HostHistoryNavigator({
+  isHost,
+  history,
+  onRestoreHistory,
+  className,
+}: HostHistoryNavigatorProps) {
+  const triggerContainerRef = useRef<HTMLDivElement | null>(null);
+  const [open, setOpen] = useState(false);
+  const [confirmEntryId, setConfirmEntryId] = useState<string | null>(null);
+  const [restoringEntryId, setRestoringEntryId] = useState<string | null>(null);
+
+  const entries = useMemo(
+    () => (history ? [...history.entries].reverse() : []),
+    [history],
+  );
+
+  if (!isHost || !history || history.entries.length === 0) {
+    return null;
+  }
+
+  const handleRestoreClick = async (entryId: string) => {
+    if (confirmEntryId !== entryId) {
+      setConfirmEntryId(entryId);
+      return;
+    }
+
+    setRestoringEntryId(entryId);
+    try {
+      await onRestoreHistory(entryId);
+      setOpen(false);
+      setConfirmEntryId(null);
+    } finally {
+      setRestoringEntryId(null);
+    }
+  };
+
+  const popoverContainer = (() => {
+    const container = triggerContainerRef.current?.closest(
+      "[data-slot='drawer-content']",
+    );
+    return container instanceof HTMLElement ? container : null;
+  })();
+
+  return (
+    <div ref={triggerContainerRef}>
+      <Popover
+        open={open}
+        onOpenChange={(nextOpen) => {
+          setOpen(nextOpen);
+          if (!nextOpen) {
+            setConfirmEntryId(null);
+          }
+        }}
+      >
+        <PopoverTrigger asChild>
+          {/* Calm secondary control — the player switcher is the loud one
+              in this toolbar; history is its quiet sibling. */}
+          <Button
+            variant="outline"
+            size="sm"
+            className={cn(
+              "h-10 gap-2 border-2 border-border bg-white text-foreground transition-colors hover:bg-[#e5e0d8]",
+              className,
+            )}
+          >
+            <History className="h-4 w-4 text-muted-foreground" />
+            <span className="hidden sm:inline">History</span>
+            <Badge
+              variant="secondary"
+              className="border border-border/40 bg-[#fff9c4] text-foreground"
+            >
+              {history.entries.length}
+            </Badge>
+          </Button>
+        </PopoverTrigger>
+        {/* Designer's Notebook: trigger above is the punctuation moment.
+            Popover contents are calm — plain bordered rows, no per-row
+            wobbly. Restore CTA only "presses" via translate, no inflation. */}
+        <PopoverContent
+          container={popoverContainer}
+          side="right"
+          align="start"
+          sideOffset={12}
+          collisionPadding={16}
+          style={{ zIndex: 200 }}
+          className="z-[200] w-[26rem] border-2 border-border bg-[#fdfbf7] p-0"
+        >
+          <div className="border-b-2 border-border bg-white px-4 py-3">
+            <div className="flex items-center gap-2 font-display text-base">
+              <History className="h-4 w-4" />
+              Session History
+            </div>
+            <p className="mt-1 font-sans text-xs text-muted-foreground">
+              Restore a previous game state. This affects the shared host
+              session.
+            </p>
+          </div>
+          <ScrollArea className="max-h-80">
+            <div className="space-y-2 p-3">
+              {entries.map((entry: HistoryState["entries"][number]) => {
+                const isConfirming = confirmEntryId === entry.id;
+                const isRestoring = restoringEntryId === entry.id;
+
+                return (
+                  <div
+                    key={entry.id}
+                    className={cn(
+                      "border-2 border-border px-3 py-3 transition-colors",
+                      entry.isCurrent ? "bg-[#fff9c4]" : "bg-white",
+                    )}
+                  >
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0 space-y-1">
+                        <div className="flex items-center gap-2">
+                          <span className="truncate text-sm font-medium">
+                            {entry.description}
+                          </span>
+                          {entry.isCurrent && (
+                            <Badge
+                              variant="secondary"
+                              className="shrink-0 border border-border/40 bg-[#e5e0d8] text-foreground"
+                            >
+                              Current
+                            </Badge>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                          <Clock3 className="h-3.5 w-3.5" />
+                          <span>{formatHistoryTimestamp(entry.timestamp)}</span>
+                          <span>v{entry.version}</span>
+                        </div>
+                      </div>
+                      {!entry.isCurrent && (
+                        <Button
+                          size="sm"
+                          variant={isConfirming ? "default" : "outline"}
+                          className="shrink-0"
+                          disabled={isRestoring}
+                          onClick={() => void handleRestoreClick(entry.id)}
+                        >
+                          {isRestoring ? (
+                            "Restoring..."
+                          ) : isConfirming ? (
+                            <>
+                              <Check className="mr-1 h-4 w-4" />
+                              Confirm
+                            </>
+                          ) : (
+                            <>
+                              <RotateCcw className="mr-1 h-4 w-4" />
+                              Restore
+                            </>
+                          )}
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </ScrollArea>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/dist/runtime-packages/ui-host-runtime/src/components/host-feedback-toaster.tsx

@@ -0,0 +1,274 @@
+import { useEffect } from "react";
+import { Toaster, toast } from "sonner";
+import { AlertTriangle, Bell, Clock3, X } from "lucide-react";
+import {
+  intentForVariant,
+  surfaceStyle,
+  useTheme,
+  type ButtonVariant,
+  type Theme,
+} from "@dreamboard/ui-sdk";
+import type { HostFeedback } from "../unified-session-store.js";
+
+export interface HostFeedbackToasterProps {
+  feedback?: HostFeedback[];
+  onDismiss?: (feedbackId: string) => void;
+}
+
+interface FeedbackPresentation {
+  title: string;
+  description: string;
+  duration: number;
+  variant: Extract<ButtonVariant, "danger" | "warning" | "success" | "info">;
+  icon: typeof AlertTriangle;
+}
+
+function describeFeedback(item: HostFeedback): FeedbackPresentation {
+  switch (item.type) {
+    case "YOUR_TURN": {
+      const activePlayerCount =
+        item.payload.type === "YOUR_TURN"
+          ? item.payload.activePlayers.length
+          : 0;
+      return {
+        title: "Your turn",
+        description:
+          activePlayerCount > 1
+            ? "You can act with one of your controlled players."
+            : "You can act now.",
+        duration: 3500,
+        variant: "success",
+        icon: Bell,
+      };
+    }
+    case "PROMPT_OPENED": {
+      const title =
+        item.payload.type === "PROMPT_OPENED" ? item.payload.title : undefined;
+      const targetPlayer =
+        item.payload.type === "PROMPT_OPENED"
+          ? item.payload.targetPlayer
+          : undefined;
+      return {
+        title: "Response needed",
+        description: targetPlayer
+          ? `${title ?? "A prompt is waiting."} (${targetPlayer})`
+          : (title ?? "A prompt is waiting."),
+        duration: 5000,
+        variant: "warning",
+        icon: Clock3,
+      };
+    }
+    case "ACTION_REJECTED": {
+      const reason =
+        item.payload.type === "ACTION_REJECTED"
+          ? item.payload.targetPlayer
+            ? `${item.payload.reason} (${item.payload.targetPlayer})`
+            : item.payload.reason
+          : "Action rejected.";
+      return {
+        title: "Action rejected",
+        description: reason,
+        duration: 5000,
+        variant: "danger",
+        icon: AlertTriangle,
+      };
+    }
+  }
+
+  throw new Error(`Unsupported host feedback item type: ${String(item.type)}`);
+}
+
+interface HostFeedbackToastBodyProps {
+  presentation: FeedbackPresentation;
+  theme: Theme;
+  onDismiss: () => void;
+}
+
+/**
+ * Inner toast body. Rendered through sonner's `toast.custom` so the
+ * surface is fully owned by the active {@link Theme} — no implicit
+ * `richColors` styling, no hardcoded `bg-*` Tailwind classes.
+ */
+function HostFeedbackToastBody({
+  presentation,
+  theme,
+  onDismiss,
+}: HostFeedbackToastBodyProps) {
+  const intent = intentForVariant(theme, presentation.variant);
+  const Icon = presentation.icon;
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      style={{
+        ...surfaceStyle(theme, { tone: "card", radius: "lg" }),
+        background: intent.soft,
+        color: intent.onSoft,
+        border: `1px solid ${intent.border}`,
+        boxShadow: theme.elevation.lifted,
+        display: "flex",
+        alignItems: "flex-start",
+        gap: theme.space[3],
+        padding: theme.space[3],
+        // Match sonner's default 356px so the toast lines up with
+        // sibling toasts that may live inside the same stack.
+        minWidth: 320,
+        maxWidth: 420,
+        fontFamily: theme.typography.fontFamily.body,
+      }}
+    >
+      <Icon
+        size={20}
+        strokeWidth={2.5}
+        aria-hidden="true"
+        style={{
+          flexShrink: 0,
+          marginTop: 2,
+          color: intent.solid,
+        }}
+      />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div
+          style={{
+            fontFamily: theme.typography.fontFamily.display,
+            fontSize: theme.typography.fontSize.md,
+            fontWeight: theme.typography.fontWeight.bold,
+            lineHeight: theme.typography.lineHeight.tight,
+            color: intent.onSoft,
+          }}
+        >
+          {presentation.title}
+        </div>
+        <div
+          style={{
+            marginTop: theme.space[1],
+            fontSize: theme.typography.fontSize.sm,
+            fontWeight: theme.typography.fontWeight.medium,
+            lineHeight: theme.typography.lineHeight.normal,
+            color: intent.onSoft,
+            opacity: 0.92,
+            wordBreak: "break-word",
+          }}
+        >
+          {presentation.description}
+        </div>
+      </div>
+      <button
+        type="button"
+        aria-label="Dismiss notification"
+        onClick={onDismiss}
+        style={{
+          flexShrink: 0,
+          width: 28,
+          height: 28,
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "transparent",
+          border: "none",
+          borderRadius: theme.radius.pill,
+          color: intent.onSoft,
+          cursor: "pointer",
+          opacity: 0.7,
+          transition: `opacity ${theme.motion.duration.fast} ${theme.motion.easing.out}`,
+        }}
+        onMouseEnter={(event) => {
+          event.currentTarget.style.opacity = "1";
+        }}
+        onMouseLeave={(event) => {
+          event.currentTarget.style.opacity = "0.7";
+        }}
+      >
+        <X size={16} aria-hidden="true" />
+      </button>
+    </div>
+  );
+}
+
+/**
+ * Mounts a {@link Toaster} and dispatches host-feedback events as
+ * themed sonner toasts.
+ *
+ * Implementation notes:
+ *
+ * - We use `toast.custom(jsx, { id })` with a stable `id` so sonner
+ *   deduplicates the same feedback id by itself. The previous
+ *   implementation tracked processed ids in a `useRef`, which reset
+ *   across remounts (StrictMode in dev, parent re-renders that swap
+ *   the toaster's key) and caused the "shows / disappears / shows
+ *   again" flicker. With sonner-owned dedup, remounts no longer
+ *   replay the queue.
+ * - We render a fully themed body so the toast picks up the active
+ *   `useTheme()` palette, font stack, and elevation tokens. Sonner's
+ *   default `richColors` theme is intentionally not used because it
+ *   produces a parallel non-themeable colour scheme.
+ * - Host feedback is the canonical home for `YOUR_TURN`,
+ *   `PROMPT_OPENED` and `ACTION_REJECTED`. The plugin-side
+ *   `<ToastProvider>` no longer mirrors these; consumers must pass
+ *   the explicit `feedback` array sourced from the unified session
+ *   store.
+ */
+export function HostFeedbackToaster({
+  feedback = [],
+  onDismiss,
+}: HostFeedbackToasterProps) {
+  const theme = useTheme();
+
+  useEffect(() => {
+    for (const item of feedback) {
+      const presentation = describeFeedback(item);
+      const dismiss = () => onDismiss?.(item.id);
+
+      // `toast.custom(jsx, { id })` is idempotent — calling it again
+      // with the same id updates the existing toast in place rather
+      // than mounting a duplicate, which is exactly what we want for
+      // host-feedback ids that may flow through several store
+      // snapshots before being dismissed.
+      toast.custom(
+        (toastId) => (
+          <HostFeedbackToastBody
+            presentation={presentation}
+            theme={theme}
+            onDismiss={() => {
+              toast.dismiss(toastId);
+              dismiss();
+            }}
+          />
+        ),
+        {
+          id: item.id,
+          duration: presentation.duration,
+          unstyled: true,
+          onAutoClose: () => dismiss(),
+          onDismiss: () => dismiss(),
+        },
+      );
+    }
+  }, [feedback, onDismiss, theme]);
+
+  return (
+    <Toaster
+      position="top-center"
+      // Disable `richColors` because we render fully themed bodies
+      // via `toast.custom` and don't want sonner's default success /
+      // error palette competing with the active theme.
+      richColors={false}
+      // Forward the OS-level theme hint so sonner's container
+      // (backdrop, default text colour for any non-custom toasts)
+      // matches the resolved Dreamboard theme mode.
+      theme={theme.meta.mode === "dark" ? "dark" : "light"}
+      toastOptions={{
+        // We use unstyled toasts so the inner `HostFeedbackToastBody`
+        // has full control. `unstyled: true` removes sonner's
+        // built-in surface, padding and shadow.
+        unstyled: true,
+        // Make the offset match sonner's default but anchor to the
+        // viewport with safe-area insets so the toast clears phone
+        // notches.
+        style: {
+          marginTop: "env(safe-area-inset-top, 0px)",
+        },
+      }}
+    />
+  );
+}