@dreamboard-games/sdk 0.2.1-alpha.0 → 0.3.0-alpha.1

package/src/ui/hooks/useSquareGrid.ts

@@ -1,328 +0,0 @@
-/**
- * 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

@@ -1,98 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,134 +0,0 @@
-"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

@@ -1,21 +0,0 @@
-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

@@ -1,21 +0,0 @@
-"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}
-    />
-  );
-}