@dreamboard-games/sdk 0.2.0

package/src/ui/hooks/useSquareGrid.ts

@@ -0,0 +1,328 @@
+/**
+ * useSquareGrid hook - Utilities for square grid operations
+ *
+ * Provides basic grid utilities and neighbor finding.
+ * Game-specific logic (pathfinding, movement rules) should be implemented by the parent.
+ *
+ * @example
+ * ```tsx
+ * const gridApi = useSquareGrid({ rows: 8, cols: 8, pieces });
+ *
+ * // Get neighbors
+ * const neighbors = gridApi.getNeighbors(3, 4);
+ *
+ * // Get piece at position
+ * const piece = gridApi.getPieceAt(0, 0);
+ *
+ * // Calculate distance
+ * const dist = gridApi.getDistance(0, 0, 7, 7);
+ * ```
+ */
+
+import { useMemo, useCallback } from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface GridPieceData {
+  /** Unique piece identifier */
+  id: string;
+  /** Row position (0-based) */
+  row: number;
+  /** Column position (0-based) */
+  col: number;
+  /** Piece type */
+  type: string;
+  /** Owner player ID */
+  owner?: string;
+  /** Additional data */
+  data?: Record<string, unknown>;
+}
+
+export interface CellData {
+  /** Row index */
+  row: number;
+  /** Column index */
+  col: number;
+  /** Whether the cell is blocked */
+  blocked?: boolean;
+  /** Cell type */
+  type?: string;
+  /** Additional data */
+  data?: Record<string, unknown>;
+}
+
+export type DistanceType = "manhattan" | "chebyshev" | "euclidean";
+export type NeighborType = "orthogonal" | "diagonal" | "all";
+
+export interface UseSquareGridOptions {
+  /** Number of rows */
+  rows: number;
+  /** Number of columns */
+  cols: number;
+  /** Pieces on the grid */
+  pieces?: GridPieceData[];
+  /** Blocked cells */
+  blockedCells?: Array<{ row: number; col: number }>;
+  /** Neighbor type for movement */
+  neighborType?: NeighborType;
+}
+
+export interface UseSquareGridReturn {
+  /** Get piece at a position */
+  getPieceAt: (row: number, col: number) => GridPieceData | undefined;
+
+  /** Get pieces by owner */
+  getPiecesByOwner: (owner: string) => GridPieceData[];
+
+  /** Get neighboring cells */
+  getNeighbors: (
+    row: number,
+    col: number,
+    type?: NeighborType,
+  ) => Array<{ row: number; col: number }>;
+
+  /** Calculate distance between two cells */
+  getDistance: (
+    r1: number,
+    c1: number,
+    r2: number,
+    c2: number,
+    type?: DistanceType,
+  ) => number;
+
+  /** Check if a cell is valid (within bounds) */
+  isValidCell: (row: number, col: number) => boolean;
+
+  /** Check if a cell is blocked */
+  isBlocked: (row: number, col: number) => boolean;
+
+  /** Check if a cell is occupied by a piece */
+  isOccupied: (row: number, col: number) => boolean;
+
+  /** Get cells in a rectangle area */
+  getCellsInRect: (
+    topRow: number,
+    leftCol: number,
+    bottomRow: number,
+    rightCol: number,
+  ) => Array<{ row: number; col: number }>;
+
+  /** Convert row/col to algebraic notation */
+  toAlgebraic: (row: number, col: number) => string;
+
+  /** Convert algebraic notation to row/col */
+  fromAlgebraic: (notation: string) => { row: number; col: number } | null;
+}
+
+// ============================================================================
+// Direction vectors
+// ============================================================================
+
+const ORTHOGONAL_DIRS = [
+  { dr: -1, dc: 0 }, // up
+  { dr: 1, dc: 0 }, // down
+  { dr: 0, dc: -1 }, // left
+  { dr: 0, dc: 1 }, // right
+];
+
+const DIAGONAL_DIRS = [
+  { dr: -1, dc: -1 }, // up-left
+  { dr: -1, dc: 1 }, // up-right
+  { dr: 1, dc: -1 }, // down-left
+  { dr: 1, dc: 1 }, // down-right
+];
+
+const ALL_DIRS = [...ORTHOGONAL_DIRS, ...DIAGONAL_DIRS];
+
+// ============================================================================
+// Hook Implementation
+// ============================================================================
+
+export function useSquareGrid(
+  options: UseSquareGridOptions,
+): UseSquareGridReturn {
+  const {
+    rows,
+    cols,
+    pieces = [],
+    blockedCells = [],
+    neighborType = "orthogonal",
+  } = options;
+
+  // Create lookup maps
+  const pieceMap = useMemo(() => {
+    const map = new Map<string, GridPieceData>();
+    pieces.forEach((p) => {
+      map.set(`${p.row},${p.col}`, p);
+    });
+    return map;
+  }, [pieces]);
+
+  const blockedSet = useMemo(() => {
+    return new Set(blockedCells.map((c) => `${c.row},${c.col}`));
+  }, [blockedCells]);
+
+  // Get piece at position
+  const getPieceAt = useCallback(
+    (row: number, col: number): GridPieceData | undefined => {
+      return pieceMap.get(`${row},${col}`);
+    },
+    [pieceMap],
+  );
+
+  // Get pieces by owner
+  const getPiecesByOwner = useCallback(
+    (owner: string): GridPieceData[] => {
+      return pieces.filter((p) => p.owner === owner);
+    },
+    [pieces],
+  );
+
+  // Check if cell is valid
+  const isValidCell = useCallback(
+    (row: number, col: number): boolean => {
+      return row >= 0 && row < rows && col >= 0 && col < cols;
+    },
+    [rows, cols],
+  );
+
+  // Check if cell is blocked
+  const isBlocked = useCallback(
+    (row: number, col: number): boolean => {
+      return blockedSet.has(`${row},${col}`);
+    },
+    [blockedSet],
+  );
+
+  // Check if cell is occupied
+  const isOccupied = useCallback(
+    (row: number, col: number): boolean => {
+      return pieceMap.has(`${row},${col}`);
+    },
+    [pieceMap],
+  );
+
+  // Get neighboring cells
+  const getNeighbors = useCallback(
+    (
+      row: number,
+      col: number,
+      type: NeighborType = neighborType,
+    ): Array<{ row: number; col: number }> => {
+      const dirs =
+        type === "orthogonal"
+          ? ORTHOGONAL_DIRS
+          : type === "diagonal"
+            ? DIAGONAL_DIRS
+            : ALL_DIRS;
+
+      const neighbors: Array<{ row: number; col: number }> = [];
+      for (const { dr, dc } of dirs) {
+        const newRow = row + dr;
+        const newCol = col + dc;
+        if (isValidCell(newRow, newCol)) {
+          neighbors.push({ row: newRow, col: newCol });
+        }
+      }
+      return neighbors;
+    },
+    [neighborType, isValidCell],
+  );
+
+  // Calculate distance
+  const getDistance = useCallback(
+    (
+      r1: number,
+      c1: number,
+      r2: number,
+      c2: number,
+      type: DistanceType = "manhattan",
+    ): number => {
+      const dr = Math.abs(r2 - r1);
+      const dc = Math.abs(c2 - c1);
+
+      switch (type) {
+        case "manhattan":
+          return dr + dc;
+        case "chebyshev":
+          return Math.max(dr, dc);
+        case "euclidean":
+          return Math.sqrt(dr * dr + dc * dc);
+        default:
+          return dr + dc;
+      }
+    },
+    [],
+  );
+
+  // Get cells in rectangle
+  const getCellsInRect = useCallback(
+    (
+      topRow: number,
+      leftCol: number,
+      bottomRow: number,
+      rightCol: number,
+    ): Array<{ row: number; col: number }> => {
+      const cells: Array<{ row: number; col: number }> = [];
+
+      const minRow = Math.max(0, Math.min(topRow, bottomRow));
+      const maxRow = Math.min(rows - 1, Math.max(topRow, bottomRow));
+      const minCol = Math.max(0, Math.min(leftCol, rightCol));
+      const maxCol = Math.min(cols - 1, Math.max(leftCol, rightCol));
+
+      for (let r = minRow; r <= maxRow; r++) {
+        for (let c = minCol; c <= maxCol; c++) {
+          cells.push({ row: r, col: c });
+        }
+      }
+
+      return cells;
+    },
+    [rows, cols],
+  );
+
+  // Convert to algebraic notation
+  const toAlgebraic = useCallback(
+    (row: number, col: number): string => {
+      const file = String.fromCharCode(97 + col);
+      const rank = rows - row;
+      return `${file}${rank}`;
+    },
+    [rows],
+  );
+
+  // Convert from algebraic notation
+  const fromAlgebraic = useCallback(
+    (notation: string): { row: number; col: number } | null => {
+      if (notation.length < 2) return null;
+
+      const file = notation.charCodeAt(0) - 97;
+      const rank = parseInt(notation.slice(1), 10);
+
+      if (isNaN(rank)) return null;
+
+      const row = rows - rank;
+      const col = file;
+
+      if (!isValidCell(row, col)) return null;
+
+      return { row, col };
+    },
+    [rows, isValidCell],
+  );
+
+  return {
+    getPieceAt,
+    getPiecesByOwner,
+    getNeighbors,
+    getDistance,
+    isValidCell,
+    isBlocked,
+    isOccupied,
+    getCellsInRect,
+    toAlgebraic,
+    fromAlgebraic,
+  };
+}

package/src/ui/index.ts

@@ -0,0 +1,98 @@
+export { calculateViewBox } from "./hooks/usePanZoom.js";
+export { toTrackBoardData } from "./helpers/track-board.js";
+export { useIsMobile } from "./hooks/useIsMobile.js";
+export {
+  ThemeProvider,
+  arcadeTheme,
+  buttonStyle,
+  chipStyle,
+  cssVar,
+  cssVarOr,
+  deriveBoardTheme,
+  getThemePreset,
+  intentForVariant,
+  mergeTheme,
+  motionDuration,
+  playerColor,
+  resolveTheme,
+  studioTheme,
+  surfaceStyle,
+  tabletopTheme,
+  themeToCssVars,
+  useBoardTheme,
+  useTheme,
+  useThemeCssVars,
+  type BoardTheme,
+  type ButtonSize,
+  type ButtonVariant,
+  type ColorRamp,
+  type ComponentTokens,
+  type Elevation,
+  type FoundationColor,
+  type IntentColor,
+  type Motion,
+  type PlayerColor,
+  type Radius,
+  type SemanticColor,
+  type Space,
+  type Theme,
+  type ThemeContextValue,
+  type ThemeMeta,
+  type ThemeOverride,
+  type ThemePresetId,
+  type ThemeProviderProps,
+  type Typography,
+} from "./theme/index.js";
+export {
+  normalizeHexBoardInput,
+  normalizeSquareBoardInput,
+} from "./types/tiled-board.js";
+export * from "./components/index.js";
+export {
+  dropTargetVisualStateDataAttributes,
+  visualStateDataAttributes,
+  type CardDropTargetVisualState,
+  type CardIntent,
+  type InteractionVisualState,
+  type TargetIntent,
+} from "./types/visual-state.js";
+export type * from "./hooks/useHandLayout.js";
+export type * from "./hooks/usePanZoom.js";
+export {
+  hexColor,
+  isHexColor,
+  parseHexColor,
+  type HexColor,
+} from "./types/hex-color.js";
+export type * from "./types/player-state.js";
+export type {
+  CardCollection,
+  ViewCard,
+  ViewSlotOccupant,
+} from "../types/index.js";
+export type {
+  AnyHexBoardInput,
+  AnySquareBoardInput,
+  BoardEdgeIdOf,
+  BoardSpaceIdOf,
+  BoardVertexIdOf,
+  AuthoredHexBoardInput,
+  AuthoredSquareBoardInput,
+  GeneratedHexBoardInput,
+  GeneratedHexSpaceStateLike,
+  GeneratedSquareBoardInput,
+  GeneratedSquareSpaceStateLike,
+  GeneratedTiledEdgeStateLike,
+  GeneratedTiledVertexStateLike,
+  HexBoardInput,
+  NormalizedHexBoard,
+  NormalizedHexEdgeOf,
+  NormalizedHexTileOf,
+  NormalizedHexVertexOf,
+  NormalizedSquareBoard,
+  NormalizedSquareCellOf,
+  NormalizedSquareEdgeOf,
+  NormalizedSquarePieceOf,
+  NormalizedSquareVertexOf,
+  SquareBoardInput,
+} from "./types/tiled-board.js";

package/src/ui/internal/ui/alert.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { cn } from "./utils.js";
+
+export interface AlertProps extends React.ComponentProps<"div"> {
+  variant?: "default" | "destructive";
+}
+
+export function Alert({
+  className,
+  variant = "default",
+  ...props
+}: AlertProps) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(
+        "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[1rem_1fr] has-[>svg]:gap-x-3 [&>svg]:translate-y-0.5",
+        variant === "destructive" && "border-red-300 text-red-800",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function AlertTitle({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn("col-start-2 font-medium tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+export function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn("col-start-2 text-sm opacity-90", className)}
+      {...props}
+    />
+  );
+}

package/src/ui/internal/ui/button.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "./utils.js";
+
+export type ButtonVariant =
+  | "default"
+  | "destructive"
+  | "outline"
+  | "secondary"
+  | "ghost"
+  | "link";
+
+export type ButtonSize = "default" | "sm" | "lg" | "icon";
+
+export interface ButtonProps extends React.ComponentProps<"button"> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  asChild?: boolean;
+}
+
+const variantClass: Record<ButtonVariant, string> = {
+  default: "border-slate-900 bg-white text-slate-950 hover:bg-slate-100",
+  destructive: "border-red-900 bg-red-600 text-white hover:bg-red-700",
+  outline: "border-slate-900 bg-transparent hover:bg-slate-100",
+  secondary: "border-slate-700 bg-slate-100 text-slate-950 hover:bg-slate-200",
+  ghost: "border-transparent bg-transparent hover:bg-slate-100",
+  link: "border-transparent bg-transparent text-blue-700 underline-offset-4 hover:underline",
+};
+
+const sizeClass: Record<ButtonSize, string> = {
+  default: "h-10 px-4 py-2",
+  sm: "h-9 px-3",
+  lg: "h-11 px-8",
+  icon: "size-10",
+};
+
+export function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot : "button";
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(
+        "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50",
+        "focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2",
+        variantClass[variant],
+        sizeClass[size],
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/ui/internal/ui/dialog.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { cn } from "./utils.js";
+
+export function Dialog(
+  props: React.ComponentProps<typeof DialogPrimitive.Root>,
+) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+export function DialogTrigger(
+  props: React.ComponentProps<typeof DialogPrimitive.Trigger>,
+) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+export function DialogPortal(
+  props: React.ComponentProps<typeof DialogPrimitive.Portal>,
+) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+export function DialogClose(
+  props: React.ComponentProps<typeof DialogPrimitive.Close>,
+) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+export function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn("fixed inset-0 z-50 bg-black/50", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  overlayClassName,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+  overlayClassName?: string;
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay className={overlayClassName} />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed left-1/2 top-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-white p-6 shadow-lg sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton ? (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400"
+          >
+            <XIcon aria-hidden="true" className="size-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        ) : null}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+export function DialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg font-semibold leading-none", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-slate-600", className)}
+      {...props}
+    />
+  );
+}

package/src/ui/internal/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { cn } from "./utils.js";
+
+export function Input({
+  className,
+  type,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-10 w-full min-w-0 rounded-md border border-slate-300 bg-white px-3 py-2 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:border-slate-600 focus-visible:ring-2 focus-visible:ring-slate-300",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/ui/internal/ui/label.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "./utils.js";
+
+export function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm font-medium leading-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}