@dreamboard-games/cli 0.1.30-alpha.1 → 0.1.30-alpha.11

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

@@ -1,374 +0,0 @@
-import { useMemo, useRef, useState } from "react";
-import {
-  Badge,
-  Button,
-  cn,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  ScrollArea,
-} from "./host-primitives.js";
-import {
-  Check,
-  ChevronDown,
-  Clock3,
-  History,
-  RotateCcw,
-  Sparkles,
-  Users,
-} from "lucide-react";
-import type { HistoryState } from "../unified-session-store.js";
-import {
-  createHostSwitchControlledPlayerActuatorAttributes,
-  createHostSwitchControlledPlayerMenuTriggerAttributes,
-  createHostSwitchControlledPlayerRootAttributes,
-} from "../browser-interaction.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],
-  );
-  const switchRootAttributes = createHostSwitchControlledPlayerRootAttributes();
-  const switchMenuTriggerAttributes =
-    createHostSwitchControlledPlayerMenuTriggerAttributes();
-
-  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 (
-    <div {...switchRootAttributes}>
-      <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,
-            )}
-            {...switchMenuTriggerAttributes}
-          >
-            <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
-            {...switchRootAttributes}
-            value={controllingPlayerId ?? ""}
-            onValueChange={(playerId) => {
-              if (playerId !== controllingPlayerId) {
-                onSwitchPlayer(playerId);
-              }
-            }}
-          >
-            {controllablePlayers.map((player, index) => (
-              <DropdownMenuRadioItem
-                key={player.playerId}
-                value={player.playerId}
-                {...createHostSwitchControlledPlayerActuatorAttributes({
-                  playerId: player.playerId,
-                  selected: player.playerId === controllingPlayerId,
-                  enabled: true,
-                })}
-                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>
-    </div>
-  );
-}
-
-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

@@ -1,266 +0,0 @@
-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-games/sdk/ui";
-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.activePlayers.length;
-      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 { targetPlayer, title } = item.payload;
-      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.targetPlayer
-        ? `${item.payload.reason} (${item.payload.targetPlayer})`
-        : item.payload.reason;
-      return {
-        title: "Action rejected",
-        description: reason,
-        duration: 5000,
-        variant: "danger",
-        icon: AlertTriangle,
-      };
-    }
-  }
-
-  const exhaustive: never = item;
-  throw new Error(
-    `Unsupported host feedback item type: ${String((exhaustive as { type?: unknown }).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)",
-        },
-      }}
-    />
-  );
-}