@dreamboard-games/ui-sdk 0.0.41

package/src/components/Toast.tsx

@@ -0,0 +1,251 @@
+/**
+ * Plugin-internal toast notification system.
+ *
+ * `<ToastProvider>` exposes a `useToast()` API that game authors call
+ * imperatively to surface their own game-specific feedback ("Resource
+ * gained", "Card discarded", "Tip: rotate the board with R", …). It
+ * is intentionally NOT wired to the host notification stream:
+ * `YOUR_TURN`, `PROMPT_OPENED` and `ACTION_REJECTED` events are owned
+ * by `@dreamboard/ui-host-runtime`'s `<HostFeedbackToaster>` and must
+ * not be mirrored from inside the plugin tree.
+ */
+
+import { motion, AnimatePresence } from "framer-motion";
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from "lucide-react";
+import { Alert, AlertDescription } from "../internal/ui/alert.js";
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  type ReactNode,
+} from "react";
+import { useTheme } from "../theme/ThemeProvider.js";
+import { intentForVariant, type ButtonVariant } from "../theme/derive.js";
+import type { Theme } from "../theme/tokens.js";
+import { ThemedButton } from "./ThemedButton.js";
+
+export type ToastType = "success" | "error" | "info" | "warning";
+
+export interface Toast {
+  id: string;
+  type: ToastType;
+  message: string;
+  duration?: number;
+}
+
+interface ToastContextValue {
+  toasts: Toast[];
+  show: (message: string, type?: ToastType, duration?: number) => void;
+  dismiss: (id: string) => void;
+  success: (message: string, duration?: number) => void;
+  error: (message: string, duration?: number) => void;
+  info: (message: string, duration?: number) => void;
+  warning: (message: string, duration?: number) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export interface ToastProviderProps {
+  children: ReactNode;
+}
+
+export function ToastProvider({ children }: ToastProviderProps) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const show = useCallback(
+    (message: string, type: ToastType = "info", duration = 3000) => {
+      const id = `toast-${Date.now()}-${Math.random()}`;
+      const toast: Toast = { id, type, message, duration };
+
+      setToasts((prev) => {
+        // Dedup by `(type, message)` so a fast burst of identical
+        // toasts collapses to one visible toast instead of stacking
+        // and producing the flicker effect (toast-1 dismisses while
+        // toast-2 mounts → user sees a flash). Keep the existing
+        // entry untouched so its dismiss timer continues.
+        if (
+          prev.some((item) => item.type === type && item.message === message)
+        ) {
+          return prev;
+        }
+        return [...prev, toast];
+      });
+
+      if (duration > 0) {
+        setTimeout(() => {
+          setToasts((prev) => prev.filter((t) => t.id !== id));
+        }, duration);
+      }
+    },
+    [],
+  );
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const success = useCallback(
+    (message: string, duration?: number) => show(message, "success", duration),
+    [show],
+  );
+  const error = useCallback(
+    (message: string, duration?: number) => show(message, "error", duration),
+    [show],
+  );
+  const info = useCallback(
+    (message: string, duration?: number) => show(message, "info", duration),
+    [show],
+  );
+  const warning = useCallback(
+    (message: string, duration?: number) => show(message, "warning", duration),
+    [show],
+  );
+
+  return (
+    <ToastContext.Provider
+      value={{ toasts, show, dismiss, success, error, info, warning }}
+    >
+      {children}
+      <ToastContainer toasts={toasts} onDismiss={dismiss} />
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within ToastProvider");
+  }
+  return context;
+}
+
+function ToastContainer({
+  toasts,
+  onDismiss,
+}: {
+  toasts: Toast[];
+  onDismiss: (id: string) => void;
+}) {
+  return (
+    <div
+      className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 pointer-events-none"
+      role="region"
+      aria-live="polite"
+      aria-label="Notifications"
+    >
+      <AnimatePresence>
+        {toasts.map((toast) => (
+          <ToastItem key={toast.id} toast={toast} onDismiss={onDismiss} />
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+const TOAST_ICONS = {
+  success: CheckCircle,
+  error: AlertCircle,
+  info: Info,
+  warning: AlertTriangle,
+} as const satisfies Record<ToastType, unknown>;
+
+const TOAST_VARIANT: Record<
+  ToastType,
+  Exclude<ButtonVariant, "ghost" | "secondary">
+> = {
+  success: "success",
+  error: "danger",
+  info: "info",
+  warning: "warning",
+};
+
+function toastSurfaceStyle(theme: Theme, type: ToastType): React.CSSProperties {
+  const intent = intentForVariant(theme, TOAST_VARIANT[type]);
+  return {
+    minWidth: 280,
+    maxWidth: 400,
+    display: "flex",
+    alignItems: "flex-start",
+    gap: theme.space[3],
+    padding: theme.space[4],
+    background: intent.soft,
+    color: intent.onSoft,
+    border: `2px solid ${intent.border}`,
+    borderRadius: theme.radius.lg,
+    boxShadow: theme.elevation.lifted,
+    backdropFilter: "blur(4px)",
+    WebkitBackdropFilter: "blur(4px)",
+    fontFamily: theme.typography.fontFamily.body,
+  };
+}
+
+function ToastItem({
+  toast,
+  onDismiss,
+}: {
+  toast: Toast;
+  onDismiss: (id: string) => void;
+}) {
+  const theme = useTheme();
+  const reducedMotion = theme.motion.reducedMotion === "true";
+  const Icon = TOAST_ICONS[toast.type];
+  const intent = intentForVariant(theme, TOAST_VARIANT[toast.type]);
+  const surfaceStyle = toastSurfaceStyle(theme, toast.type);
+
+  return (
+    <motion.div
+      style={{ pointerEvents: "auto" }}
+      initial={
+        reducedMotion ? { opacity: 0 } : { opacity: 0, y: 20, scale: 0.9 }
+      }
+      animate={reducedMotion ? { opacity: 1 } : { opacity: 1, y: 0, scale: 1 }}
+      exit={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 100, scale: 0.9 }}
+      transition={{ type: "spring", stiffness: 300, damping: 25 }}
+    >
+      <Alert
+        variant={toast.type === "error" ? "destructive" : "default"}
+        style={surfaceStyle}
+      >
+        <Icon
+          size={20}
+          style={{
+            marginTop: 2,
+            flexShrink: 0,
+            color: intent.solid,
+          }}
+          aria-hidden="true"
+        />
+
+        <AlertDescription
+          style={{
+            flex: 1,
+            fontSize: theme.typography.fontSize.sm,
+            fontWeight: theme.typography.fontWeight.medium,
+            lineHeight: theme.typography.lineHeight.relaxed,
+            color: intent.onSoft,
+          }}
+        >
+          {toast.message}
+        </AlertDescription>
+
+        <ThemedButton
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => onDismiss(toast.id)}
+          style={{
+            height: 28,
+            width: 28,
+            flexShrink: 0,
+            borderRadius: theme.radius.pill,
+            color: intent.onSoft,
+          }}
+          aria-label="Close notification"
+        >
+          <X size={16} aria-hidden="true" />
+        </ThemedButton>
+      </Alert>
+    </motion.div>
+  );
+}

package/src/components/__fixtures__/ActionButton.fixture.tsx

@@ -0,0 +1,234 @@
+/**
+ * ActionButton component fixtures
+ * Demonstrates action buttons with various states and configurations
+ */
+import React, { useState } from "react";
+import {
+  Building,
+  Route,
+  Pickaxe,
+  Sword,
+  Shield,
+  Coins,
+  TreePine,
+  Gem,
+} from "lucide-react";
+import { ActionButton } from "../ActionButton.js";
+import type { ResourceDefinition } from "../CostDisplay.js";
+
+function Container({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-800 to-slate-900 p-8">
+      <div className="max-w-md mx-auto space-y-6">{children}</div>
+    </div>
+  );
+}
+
+const resourceDefs: ResourceDefinition[] = [
+  { type: "gold", label: "Gold", icon: Coins, color: "text-yellow-400" },
+  { type: "wood", label: "Wood", icon: TreePine, color: "text-amber-600" },
+  { type: "gems", label: "Gems", icon: Gem, color: "text-purple-400" },
+];
+
+const playerResources = { gold: 5, wood: 3, gems: 1 };
+
+// Loading demo
+function LoadingDemo() {
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = () => {
+    setLoading(true);
+    setTimeout(() => setLoading(false), 2000);
+  };
+
+  return (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Loading State</h2>
+      <ActionButton
+        label="Submit Action"
+        icon={Sword}
+        onClick={handleClick}
+        loading={loading}
+      />
+      <p className="text-slate-400 text-sm mt-2">Click to see loading state</p>
+    </Container>
+  );
+}
+
+export default {
+  default: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Default (Primary)</h2>
+      <ActionButton
+        label="Build Settlement"
+        icon={Building}
+        onClick={() => console.log("Clicked!")}
+      />
+    </Container>
+  ),
+
+  withDescription: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">With Description</h2>
+      <ActionButton
+        label="Build Road"
+        description="Connect two settlements"
+        icon={Route}
+        onClick={() => console.log("Build road")}
+      />
+    </Container>
+  ),
+
+  withCost: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">
+        With Cost (Affordable)
+      </h2>
+      <p className="text-slate-400 text-sm mb-4">
+        Player has: 5 gold, 3 wood, 1 gem
+      </p>
+      <ActionButton
+        label="Build Settlement"
+        icon={Building}
+        cost={{ gold: 2, wood: 2 }}
+        currentResources={playerResources}
+        resourceDefs={resourceDefs}
+        onClick={() => console.log("Build!")}
+      />
+    </Container>
+  ),
+
+  cannotAfford: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Cannot Afford</h2>
+      <p className="text-slate-400 text-sm mb-4">
+        Player has: 5 gold, 3 wood, 1 gem
+      </p>
+      <ActionButton
+        label="Build Castle"
+        description="Requires 10 gold and 5 gems"
+        icon={Building}
+        cost={{ gold: 10, gems: 5 }}
+        currentResources={playerResources}
+        resourceDefs={resourceDefs}
+        onClick={() => console.log("Cannot afford!")}
+      />
+    </Container>
+  ),
+
+  disabled: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">
+        Disabled with Reason
+      </h2>
+      <ActionButton
+        label="Attack Enemy"
+        icon={Sword}
+        available={false}
+        disabledReason="No enemies in range"
+        onClick={() => console.log("Attack!")}
+      />
+    </Container>
+  ),
+
+  variants: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Variants</h2>
+      <div className="space-y-3">
+        <ActionButton
+          label="Primary Action"
+          icon={Pickaxe}
+          variant="primary"
+          onClick={() => {}}
+        />
+        <ActionButton
+          label="Secondary Action"
+          icon={Shield}
+          variant="secondary"
+          onClick={() => {}}
+        />
+        <ActionButton
+          label="Danger Action"
+          icon={Sword}
+          variant="danger"
+          onClick={() => {}}
+        />
+        <ActionButton
+          label="Success Action"
+          icon={Building}
+          variant="success"
+          onClick={() => {}}
+        />
+      </div>
+    </Container>
+  ),
+
+  sizes: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Sizes</h2>
+      <div className="space-y-3">
+        <ActionButton
+          label="Small Button"
+          icon={Building}
+          size="sm"
+          onClick={() => {}}
+        />
+        <ActionButton
+          label="Medium Button (Default)"
+          icon={Building}
+          size="md"
+          onClick={() => {}}
+        />
+        <ActionButton
+          label="Large Button"
+          description="With a description"
+          icon={Building}
+          size="lg"
+          onClick={() => {}}
+        />
+      </div>
+    </Container>
+  ),
+
+  loading: <LoadingDemo />,
+
+  gameActions: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">
+        Game Actions Example
+      </h2>
+      <p className="text-slate-400 text-sm mb-4">
+        Player has: 5 gold, 3 wood, 1 gem
+      </p>
+      <div className="space-y-2">
+        <ActionButton
+          label="Build Road"
+          description="1 gold, 1 wood"
+          icon={Route}
+          cost={{ gold: 1, wood: 1 }}
+          currentResources={playerResources}
+          resourceDefs={resourceDefs}
+          onClick={() => {}}
+        />
+        <ActionButton
+          label="Build Settlement"
+          description="2 gold, 2 wood"
+          icon={Building}
+          cost={{ gold: 2, wood: 2 }}
+          currentResources={playerResources}
+          resourceDefs={resourceDefs}
+          onClick={() => {}}
+        />
+        <ActionButton
+          label="Build City"
+          description="3 gold, 3 gems (cannot afford)"
+          icon={Building}
+          cost={{ gold: 3, gems: 3 }}
+          currentResources={playerResources}
+          resourceDefs={resourceDefs}
+          onClick={() => {}}
+        />
+      </div>
+    </Container>
+  ),
+};