@almadar/ui 2.14.0 → 2.15.0

package/dist/components/molecules/game/CombatLog.d.ts

@@ -0,0 +1,30 @@
+/**
+ * CombatLog Component
+ *
+ * Scrollable log of combat events with icons and colors.
+ * Generalized from Trait Wars — removed asset manifest coupling.
+ */
+import React from 'react';
+export type CombatLogEventType = 'attack' | 'defend' | 'heal' | 'move' | 'special' | 'death' | 'spawn';
+export interface CombatEvent {
+    id: string;
+    type: CombatLogEventType;
+    message: string;
+    timestamp: number;
+    actorName?: string;
+    targetName?: string;
+    value?: number;
+    turn?: number;
+}
+export interface CombatLogProps {
+    events: CombatEvent[];
+    maxVisible?: number;
+    autoScroll?: boolean;
+    showTimestamps?: boolean;
+    title?: string;
+    className?: string;
+}
+export declare function CombatLog({ events, maxVisible, autoScroll, showTimestamps, className, title, }: CombatLogProps): React.JSX.Element;
+export declare namespace CombatLog {
+    var displayName: string;
+}

package/dist/components/molecules/game/CraftingRecipe.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export interface CraftingIngredient {
+    /** Icon component or emoji */
+    icon?: React.ReactNode;
+    /** Ingredient label */
+    label: string;
+    /** Number required for the recipe */
+    required: number;
+    /** Number currently available */
+    available: number;
+}
+export interface CraftingRecipeProps {
+    /** Input ingredients for the recipe */
+    inputs: CraftingIngredient[];
+    /** Output item produced by the recipe */
+    output: {
+        icon?: React.ReactNode;
+        label: string;
+        rarity?: string;
+    };
+    /** Whether the player has enough ingredients to craft */
+    canCraft?: boolean;
+    /** Callback when the craft button is clicked */
+    onCraft?: () => void;
+    /** Event bus event name for crafting */
+    craftEvent?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function CraftingRecipe({ inputs, output, canCraft, onCraft, craftEvent, className, }: CraftingRecipeProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CraftingRecipe {
+    var displayName: string;
+}

package/dist/components/molecules/game/DPad.d.ts

@@ -0,0 +1,22 @@
+export type DPadDirection = 'up' | 'down' | 'left' | 'right';
+/** Event Contract:
+ *  Emits: UI:DIRECTION
+ */
+export interface DPadProps {
+    /** Called when a direction is pressed/released */
+    onDirection?: (direction: DPadDirection, pressed: boolean) => void;
+    /** Declarative event name emitted on direction press/release via useEventBus */
+    directionEvent?: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether to include diagonal buttons */
+    includeDiagonals?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Disabled state */
+    disabled?: boolean;
+}
+export declare function DPad({ onDirection, directionEvent, size, includeDiagonals, className, disabled, }: DPadProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DPad {
+    var displayName: string;
+}

package/dist/components/molecules/game/DialogueBox.d.ts

@@ -0,0 +1,78 @@
+/**
+ * DialogueBox Component
+ *
+ * NPC dialogue display with typewriter effect and choices.
+ *
+ * **State categories (closed-circuit compliant):**
+ * - Content (dialogue node, speaker, text, choices) → received via props
+ * - UI-transient animation (displayedText, isTyping, charIndex, selectedChoice) → local only
+ * - Events → emitted via `useEventBus()` (complete, choice, advance)
+ *
+ * Local state is typewriter animation only — an inherently rendering-only
+ * concern analogous to Form's `formData`.
+ */
+import React from 'react';
+export interface DialogueChoice {
+    text: string;
+    action?: string;
+    next?: string;
+    disabled?: boolean;
+}
+export interface DialogueNode {
+    id?: string;
+    speaker: string;
+    text: string;
+    portrait?: string;
+    choices?: DialogueChoice[];
+    autoAdvance?: number;
+}
+/** Event Contract:
+ *  Emits: UI:COMPLETE
+ *  Emits: UI:CHOICE
+ *  Emits: UI:ADVANCE
+ */
+export interface DialogueBoxProps {
+    /** Current dialogue node to display */
+    dialogue: DialogueNode;
+    /** Typewriter speed in ms per character (0 = instant) */
+    typewriterSpeed?: number;
+    /** Position of dialogue box */
+    position?: 'top' | 'bottom';
+    /** Called when text animation completes */
+    onComplete?: () => void;
+    /** Called when a choice is selected */
+    onChoice?: (choice: DialogueChoice) => void;
+    /** Called when dialogue is advanced (no choices) */
+    onAdvance?: () => void;
+    /** Declarative event: emits UI:{completeEvent} when text animation completes */
+    completeEvent?: string;
+    /** Declarative event: emits UI:{choiceEvent} with { choice } when a choice is selected */
+    choiceEvent?: string;
+    /** Declarative event: emits UI:{advanceEvent} when dialogue is advanced */
+    advanceEvent?: string;
+    /** Optional className */
+    className?: string;
+}
+/**
+ * Dialogue box component with typewriter effect
+ *
+ * @example
+ * ```tsx
+ * <DialogueBox
+ *   dialogue={{
+ *     speaker: "Old Man",
+ *     text: "It's dangerous to go alone! Take this.",
+ *     portrait: "/portraits/oldman.png",
+ *     choices: [
+ *       { text: "Thank you!", action: "ACCEPT_ITEM" },
+ *       { text: "No thanks", next: "decline_node" }
+ *     ]
+ *   }}
+ *   typewriterSpeed={30}
+ *   onChoice={(choice) => handleChoice(choice)}
+ *   position="bottom"
+ * />
+ * ```
+ */
+export declare function DialogueBox({ dialogue, typewriterSpeed, position, onComplete, onChoice, onAdvance, completeEvent, choiceEvent, advanceEvent, className, }: DialogueBoxProps): React.JSX.Element;
+export default DialogueBox;

package/dist/components/molecules/game/EnemyPlate.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export interface EnemyPlateEffect {
+    /** Effect icon */
+    icon: React.ReactNode;
+    /** Effect label */
+    label?: string;
+    /** Effect type */
+    variant?: 'buff' | 'debuff' | 'neutral';
+}
+export interface EnemyPlateProps {
+    /** Enemy name */
+    name: string;
+    /** Current health */
+    health: number;
+    /** Maximum health */
+    maxHealth: number;
+    /** Enemy level */
+    level?: number;
+    /** Active status effects */
+    effects?: EnemyPlateEffect[];
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function EnemyPlate({ name, health, maxHealth, level, effects, className, }: EnemyPlateProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace EnemyPlate {
+    var displayName: string;
+}

package/dist/components/molecules/game/GameCanvas2D.d.ts

@@ -0,0 +1,18 @@
+export interface GameCanvas2DProps {
+    /** Canvas width in pixels */
+    width?: number;
+    /** Canvas height in pixels */
+    height?: number;
+    /** Called each frame with the 2D context and current frame count */
+    onDraw?: (ctx: CanvasRenderingContext2D, frame: number) => void;
+    /** Called each tick with delta time in seconds */
+    onTick?: (dt: number) => void;
+    /** Target frames per second */
+    fps?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function GameCanvas2D({ width, height, onDraw, onTick, fps, className, }: GameCanvas2DProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace GameCanvas2D {
+    var displayName: string;
+}

package/dist/components/molecules/game/GameHud.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { type StatBadgeProps } from "./StatBadge";
+export interface GameHudStat extends Omit<StatBadgeProps, "size"> {
+    /** Data source entity name */
+    source?: string;
+    /** Field name in the source */
+    field?: string;
+}
+/**
+ * Schema-style HUD element definition.
+ * Used when elements are passed from schema render_ui effects.
+ */
+export interface GameHudElement {
+    type?: string;
+    bind?: string;
+    position?: string;
+    label?: string;
+    /** Direct value (from compiled render-ui effects) */
+    value?: number | string;
+    /** Icon name or node */
+    icon?: React.ReactNode;
+    /** Display format */
+    format?: string;
+    /** Max value (for bars/hearts) */
+    max?: number;
+}
+export interface GameHudProps {
+    /** Position of the HUD */
+    position?: "top" | "bottom" | "corners" | string;
+    /** Stats to display - accepts readonly for compatibility with generated const arrays */
+    stats?: readonly GameHudStat[];
+    /** Alias for stats (schema compatibility) */
+    items?: readonly GameHudStat[];
+    /**
+     * Schema-style elements array (alternative to stats).
+     * Converted to stats internally for backwards compatibility.
+     */
+    elements?: readonly GameHudElement[];
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether to use a semi-transparent background */
+    transparent?: boolean;
+}
+export declare function GameHud({ position: propPosition, stats: propStats, items, elements, size, className, transparent, }: GameHudProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace GameHud {
+    var displayName: string;
+}

package/dist/components/molecules/game/GameMenu.d.ts

@@ -0,0 +1,43 @@
+import { type EventBusContextType } from "../../../hooks/useEventBus";
+export interface MenuOption {
+    /** Optional ID (generated from index if not provided) */
+    id?: string;
+    /** Display label */
+    label: string;
+    /** Event to emit on click */
+    event?: string;
+    /** Page to navigate to */
+    navigatesTo?: string;
+    /** Button variant */
+    variant?: "primary" | "secondary" | "ghost" | string;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+    /** Sub-label or description */
+    subLabel?: string;
+    /** Action identifier (alternative to event) */
+    action?: string;
+}
+export interface GameMenuProps {
+    /** Menu title */
+    title: string;
+    /** Optional subtitle or version */
+    subtitle?: string;
+    /** Menu options - accepts readonly for compatibility with generated const arrays */
+    options?: readonly MenuOption[];
+    /** Alias for options (schema compatibility) */
+    menuItems?: readonly MenuOption[];
+    /** Called when an option is selected (legacy callback, prefer event bus) */
+    onSelect?: (option: MenuOption) => void;
+    /** Event bus for emitting UI events (optional, uses hook if not provided) */
+    eventBus?: EventBusContextType;
+    /** Background image or gradient */
+    background?: string;
+    /** Logo image URL */
+    logo?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function GameMenu({ title, subtitle, options, menuItems, onSelect, eventBus: eventBusProp, background, logo, className, }: GameMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace GameMenu {
+    var displayName: string;
+}

package/dist/components/molecules/game/GameOverScreen.d.ts

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { type EventBusContextType } from "../../../hooks/useEventBus";
+export interface GameOverStat {
+    /** Stat label */
+    label: string;
+    /** Stat value (required if bind is not provided) */
+    value?: number | string;
+    /**
+     * Schema-style data binding (e.g., "player.score").
+     * Alternative to value - used when stats come from schema render_ui effects.
+     * Component will display 0 as placeholder since runtime binding is not implemented.
+     */
+    bind?: string;
+    /** Display format */
+    format?: "number" | "time" | "text";
+    /** Icon */
+    icon?: React.ReactNode;
+}
+export interface GameOverAction {
+    /** Display label */
+    label: string;
+    /** Event to emit on click */
+    event?: string;
+    /** Page to navigate to */
+    navigatesTo?: string;
+    /** Button variant */
+    variant?: "primary" | "secondary" | "ghost";
+}
+export interface GameOverScreenProps {
+    /** Screen title (e.g., "Game Over", "Victory!") */
+    title: string;
+    /** Optional message */
+    message?: string;
+    /** Stats to display */
+    stats?: GameOverStat[];
+    /** Action buttons */
+    actions?: GameOverAction[];
+    /** Alias for actions (schema compatibility) */
+    menuItems?: GameOverAction[];
+    /** Called when an action is selected (legacy callback, prefer event bus) */
+    onAction?: (action: GameOverAction) => void;
+    /** Event bus for emitting UI events (optional, uses hook if not provided) */
+    eventBus?: EventBusContextType;
+    /** Victory or defeat variant */
+    variant?: "victory" | "defeat" | "neutral";
+    /** High score (optional, shows "NEW HIGH SCORE!" if exceeded) */
+    highScore?: number | string;
+    /** Current score for high score comparison (accepts string for schema bindings) */
+    currentScore?: number | string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function GameOverScreen({ title, message, stats, actions, menuItems, onAction, eventBus: eventBusProp, variant, highScore, currentScore, className, }: GameOverScreenProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace GameOverScreen {
+    var displayName: string;
+}

package/dist/components/molecules/game/HealthPanel.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export interface HealthPanelProps {
+    /** Current health value */
+    current: number;
+    /** Maximum health value */
+    max: number;
+    /** Shield/armor points */
+    shield?: number;
+    /** Label shown above the bar */
+    label?: string;
+    /** Active status effects displayed as small badges */
+    effects?: {
+        icon: React.ReactNode;
+        label?: string;
+        variant?: 'buff' | 'debuff' | 'neutral';
+    }[];
+    /** Whether to display numeric HP values */
+    showNumbers?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function HealthPanel({ current, max, shield, label, effects, showNumbers, size, className, }: HealthPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace HealthPanel {
+    var displayName: string;
+}

package/dist/components/molecules/game/InventoryGrid.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export interface InventoryGridItem {
+    id: string;
+    icon?: React.ReactNode;
+    label?: string;
+    quantity?: number;
+    rarity?: 'common' | 'uncommon' | 'rare' | 'epic' | 'legendary';
+}
+export interface InventoryGridProps {
+    /** Array of items to display in the grid */
+    items: InventoryGridItem[];
+    /** Number of columns in the grid */
+    columns?: number;
+    /** Total number of slots (empty slots fill remaining space) */
+    totalSlots?: number;
+    /** Currently selected item ID */
+    selectedId?: string;
+    /** Callback when an item is selected */
+    onSelect?: (id: string) => void;
+    /** Event bus event name for selection */
+    selectEvent?: string;
+    /** Size variant for all item slots */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function InventoryGrid({ items, columns, totalSlots, selectedId, onSelect, selectEvent, size, className, }: InventoryGridProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InventoryGrid {
+    var displayName: string;
+}

package/dist/components/molecules/game/InventoryPanel.d.ts

@@ -0,0 +1,67 @@
+/**
+ * InventoryPanel Component
+ *
+ * Grid-based inventory UI with item selection and tooltips.
+ *
+ * **State categories (closed-circuit compliant):**
+ * - Data (items, slots, selectedSlot) → received via props
+ * - UI-transient (hoveredSlot, tooltipPosition) → local only
+ * - Events → emitted via `useEventBus()` (selectSlot, useItem, dropItem)
+ *
+ * Local state is hover/tooltip only — rendering-only concerns.
+ */
+import React from 'react';
+export interface InventoryItem {
+    id: string;
+    type: string;
+    quantity: number;
+    sprite?: string;
+    name?: string;
+    description?: string;
+}
+export interface InventoryPanelProps {
+    /** Array of items in inventory */
+    items: InventoryItem[];
+    /** Total number of slots */
+    slots: number;
+    /** Number of columns in grid */
+    columns: number;
+    /** Currently selected slot index */
+    selectedSlot?: number;
+    /** Called when a slot is selected */
+    onSelectSlot?: (index: number) => void;
+    /** Called when an item is used (double-click or Enter) */
+    onUseItem?: (item: InventoryItem) => void;
+    /** Called when an item is dropped */
+    onDropItem?: (item: InventoryItem) => void;
+    /** Declarative event: emits UI:{selectSlotEvent} with { index } when a slot is selected */
+    selectSlotEvent?: string;
+    /** Declarative event: emits UI:{useItemEvent} with { item } when an item is used */
+    useItemEvent?: string;
+    /** Declarative event: emits UI:{dropItemEvent} with { item } when an item is dropped */
+    dropItemEvent?: string;
+    /** Show item tooltips on hover */
+    showTooltips?: boolean;
+    /** Optional className */
+    className?: string;
+    /** Slot size in pixels */
+    slotSize?: number;
+}
+/**
+ * Inventory panel component with grid layout
+ *
+ * @example
+ * ```tsx
+ * <InventoryPanel
+ *   items={playerInventory}
+ *   slots={20}
+ *   columns={5}
+ *   selectedSlot={selectedSlot}
+ *   onSelectSlot={setSelectedSlot}
+ *   onUseItem={(item) => console.log('Used:', item.name)}
+ *   showTooltips
+ * />
+ * ```
+ */
+export declare function InventoryPanel({ items, slots, columns, selectedSlot, onSelectSlot, onUseItem, onDropItem, selectSlotEvent, useItemEvent, dropItemEvent, showTooltips, className, slotSize, }: InventoryPanelProps): React.JSX.Element;
+export default InventoryPanel;

package/dist/components/molecules/game/IsometricCanvas.d.ts

@@ -0,0 +1,127 @@
+/**
+ * IsometricCanvas
+ *
+ * Core isometric game renderer. Maps to the `game-canvas` pattern.
+ * Adapted from projects/trait-wars/design-system/organisms/IsometricGameCanvas.tsx
+ * with full closed-circuit pattern compliance (className, isLoading, error).
+ *
+ * Architecture:
+ * - 2:1 diamond isometric projection
+ * - Painter's algorithm (tile → feature → unit depth sort)
+ * - Camera pan/zoom with lerp
+ * - Off-screen culling
+ * - Minimap on separate canvas
+ * - Sprite sheet animation via resolveUnitFrame
+ * - Event bus–friendly handlers (onTileClick, onUnitClick, etc.)
+ *
+ * **State categories (closed-circuit compliant):**
+ * - All game data (tiles, units, features, selection, validMoves) → received via props
+ * - Rendering state (viewportSize, RAF, camera lerp, sprite cache) → local only
+ * - Events → emitted via `useEventBus()` for trait integration
+ *
+ * This component is a **pure renderer** — it holds no game logic state.
+ *
+ * @packageDocumentation
+ */
+import * as React from 'react';
+import type { IsometricTile, IsometricUnit, IsometricFeature } from '../../organisms/game/types/isometric';
+import type { ResolvedFrame } from '../../organisms/game/types/spriteAnimation';
+/** Event Contract:
+ *  Emits: UI:TILE_CLICK
+ *  Emits: UI:UNIT_CLICK
+ *  Emits: UI:TILE_HOVER
+ *  Emits: UI:TILE_LEAVE
+ */
+export interface IsometricCanvasProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Loading state indicator */
+    isLoading?: boolean;
+    /** Error state */
+    error?: Error | null;
+    /** Array of tiles to render */
+    tiles?: IsometricTile[];
+    /** Array of units on the board */
+    units?: IsometricUnit[];
+    /** Array of features (resources, portals, buildings, etc.) */
+    features?: IsometricFeature[];
+    /** Currently selected unit ID */
+    selectedUnitId?: string | null;
+    /** Valid move positions (shown as pulsing green highlights) */
+    validMoves?: Array<{
+        x: number;
+        y: number;
+    }>;
+    /** Attack target positions (shown as pulsing red highlights) */
+    attackTargets?: Array<{
+        x: number;
+        y: number;
+    }>;
+    /** Hovered tile position */
+    hoveredTile?: {
+        x: number;
+        y: number;
+    } | null;
+    onTileClick?: (x: number, y: number) => void;
+    onUnitClick?: (unitId: string) => void;
+    onTileHover?: (x: number, y: number) => void;
+    onTileLeave?: () => void;
+    /** Declarative event: emits UI:{tileClickEvent} with { x, y } on tile click */
+    tileClickEvent?: string;
+    /** Declarative event: emits UI:{unitClickEvent} with { unitId } on unit click */
+    unitClickEvent?: string;
+    /** Declarative event: emits UI:{tileHoverEvent} with { x, y } on tile hover */
+    tileHoverEvent?: string;
+    /** Declarative event: emits UI:{tileLeaveEvent} with {} on tile leave */
+    tileLeaveEvent?: string;
+    /** Render scale (0.4 = 40% zoom) */
+    scale?: number;
+    /** Show debug grid lines and coordinates */
+    debug?: boolean;
+    /** Background image URL tiled behind the isometric grid */
+    backgroundImage?: string;
+    /** Toggle minimap overlay */
+    showMinimap?: boolean;
+    /** Enable camera pan/zoom controls */
+    enableCamera?: boolean;
+    /** Extra scale multiplier for unit draw size. 1 = default. */
+    unitScale?: number;
+    /** Board width in tiles (overrides tile-derived size) */
+    boardWidth?: number;
+    /** Board height in tiles (overrides tile-derived size) */
+    boardHeight?: number;
+    /** Override for the diamond-top Y offset within the tile sprite (default: 374).
+     *  This controls where the flat diamond face sits vertically inside the tile image. */
+    diamondTopY?: number;
+    /** Resolve terrain sprite URL from terrain key */
+    getTerrainSprite?: (terrain: string) => string | undefined;
+    /** Resolve feature sprite URL from feature type key */
+    getFeatureSprite?: (featureType: string) => string | undefined;
+    /** Resolve unit static sprite URL */
+    getUnitSprite?: (unit: IsometricUnit) => string | undefined;
+    /** Resolve animated sprite sheet frame for a unit */
+    resolveUnitFrame?: (unitId: string) => ResolvedFrame | null;
+    /** Additional sprite URLs to preload (e.g., effect sprites) */
+    effectSpriteUrls?: string[];
+    /** Callback to draw canvas effects after units (canvas-specific: cannot be declarative) */
+    onDrawEffects?: (ctx: CanvasRenderingContext2D, animTime: number, getImage: (url: string) => HTMLImageElement | undefined) => void;
+    /** Whether there are active effects — keeps RAF loop alive */
+    hasActiveEffects?: boolean;
+    /** Base URL for remote asset resolution. When set, manifest paths
+     *  are prefixed with this URL. Example: "https://trait-wars-assets.web.app" */
+    assetBaseUrl?: string;
+    /** Manifest mapping entity keys to relative sprite paths.
+     *  Combined with assetBaseUrl to produce full URLs.
+     *  Used as a fallback when inline URLs and callbacks don't resolve. */
+    assetManifest?: {
+        terrains?: Record<string, string>;
+        units?: Record<string, string>;
+        features?: Record<string, string>;
+        effects?: Record<string, string>;
+    };
+}
+export declare function IsometricCanvas({ className, isLoading, error, tiles: _tilesPropRaw, units: _unitsPropRaw, features: _featuresPropRaw, selectedUnitId, validMoves, attackTargets, hoveredTile, onTileClick, onUnitClick, onTileHover, onTileLeave, tileClickEvent, unitClickEvent, tileHoverEvent, tileLeaveEvent, scale, debug, backgroundImage, showMinimap, enableCamera, unitScale, getTerrainSprite, getFeatureSprite, getUnitSprite, resolveUnitFrame, effectSpriteUrls, onDrawEffects, hasActiveEffects, diamondTopY: diamondTopYProp, assetBaseUrl, assetManifest, }: IsometricCanvasProps): React.JSX.Element;
+export declare namespace IsometricCanvas {
+    var displayName: string;
+}
+export default IsometricCanvas;

package/dist/components/molecules/game/PlatformerCanvas.d.ts

@@ -0,0 +1,52 @@
+export interface PlatformerPlatform {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    type?: 'ground' | 'platform' | 'hazard' | 'goal';
+}
+export interface PlatformerPlayer {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    vx?: number;
+    vy?: number;
+    grounded?: boolean;
+    facingRight?: boolean;
+}
+export interface PlatformerCanvasProps {
+    /** Player state data */
+    player?: PlatformerPlayer;
+    /** Static platforms / level geometry */
+    platforms?: readonly PlatformerPlatform[];
+    /** World dimensions */
+    worldWidth?: number;
+    worldHeight?: number;
+    /** Canvas display size */
+    canvasWidth?: number;
+    canvasHeight?: number;
+    /** Camera follows player */
+    followCamera?: boolean;
+    /** Background color */
+    bgColor?: string;
+    /** Player sprite image URL */
+    playerSprite?: string;
+    /** Map of platform type to tile sprite URL */
+    tileSprites?: Record<string, string>;
+    /** Background image URL */
+    backgroundImage?: string;
+    /** Base URL prefix for asset URLs */
+    assetBaseUrl?: string;
+    /** Event names for keyboard controls */
+    leftEvent?: string;
+    rightEvent?: string;
+    jumpEvent?: string;
+    stopEvent?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function PlatformerCanvas({ player, platforms, worldWidth, worldHeight, canvasWidth, canvasHeight, followCamera, bgColor, playerSprite, tileSprites, backgroundImage, assetBaseUrl, leftEvent, rightEvent, jumpEvent, stopEvent, className, }: PlatformerCanvasProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PlatformerCanvas {
+    var displayName: string;
+}