@almadar/ui 5.94.1 → 5.96.0

package/dist/components/core/atoms/AtlasImage.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { type SpriteRef } from '../../../lib/atlasSlice';
+/** Asset-compatible input: sheet url + optional atlas sub-texture reference. */
+export interface AtlasImageAsset extends SpriteRef {
+    name?: string;
+    category?: string;
+}
+export interface AtlasImageProps {
+    asset?: AtlasImageAsset;
+    /** Square pixel size (icon usage). Ignored when `fill`. */
+    size?: number;
+    width?: number;
+    height?: number;
+    /** Absolutely fill the nearest positioned ancestor (background usage). */
+    fill?: boolean;
+    fit?: 'contain' | 'cover' | 'fill';
+    alt?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    'aria-hidden'?: boolean;
+}
+/**
+ * Resolve an atlas slice to a standalone dataURL (extracted once, cached) so CSS can 9-slice or
+ * tile it — `border-image`/`background-repeat` can't crop a packed sheet. Returns undefined until
+ * the sheet + atlas are loaded; `onReady` re-fires the caller when they land.
+ */
+export declare function useAtlasSliceDataUrl(asset: AtlasImageAsset | undefined): string | undefined;
+export interface AtlasPanelProps {
+    asset?: AtlasImageAsset;
+    /** Border thickness (source pixels) for the 9-slice cut. */
+    borderSlice?: number;
+    /** Rendered border width in CSS px. */
+    borderWidth?: number;
+    /** 'nineSlice' scales edges crisp (panels/buttons); 'repeat' tiles the slice (pattern fills). */
+    mode?: 'nineSlice' | 'repeat';
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    'aria-hidden'?: boolean;
+}
+/**
+ * A container skinned by an atlas slice: 9-sliced panel chrome or a tiled pattern. The pack sheet
+ * is cropped once to a dataURL; CSS border-image / background-repeat does the scaling. Falls back
+ * to a plain container while the sheet/atlas load.
+ */
+export declare function AtlasPanel({ asset, borderSlice, borderWidth, mode, className, style, children, 'aria-hidden': ariaHidden }: AtlasPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AtlasPanel {
+    var displayName: string;
+}
+/**
+ * The one chrome-side renderer for `Asset` images. With `atlas`+`sprite` it draws EXACTLY that
+ * sub-rect of the packed sheet into a canvas (never the whole sheet); otherwise it renders the
+ * plain `<img>` path. `fill` + `fit` cover background/panel usage (GameShell, card frames).
+ */
+export declare function AtlasImage({ asset, size, width, height, fill, fit, alt, className, style, 'aria-hidden': ariaHidden, }: AtlasImageProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace AtlasImage {
+    var displayName: string;
+}

package/dist/components/core/atoms/index.d.ts

@@ -7,6 +7,7 @@ export { Select, type SelectProps, type SelectOption, type SelectOptionGroup } f
 export { Checkbox, type CheckboxProps } from "./Checkbox";
 export { Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter, type CardProps, } from "./Card";
 export { Badge, type BadgeProps, type BadgeVariant } from "./Badge";
+export { AtlasImage, AtlasPanel, useAtlasSliceDataUrl, type AtlasImageProps, type AtlasImageAsset, type AtlasPanelProps } from "./AtlasImage";
 export { FilterPill, type FilterPillProps, type FilterPillVariant, type FilterPillSize, } from "./FilterPill";
 export { Spinner, type SpinnerProps } from "./Spinner";
 export { Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, } from "./Avatar";

package/dist/components/core/molecules/index.d.ts

@@ -56,6 +56,7 @@ export { MathCanvas, type MathCanvasProps, type MathCurve, type MathPoint, type
 export { PhysicsCanvas, type PhysicsCanvasProps, type LearningPhysicsBody, type LearningPhysicsConstraint, } from '../../learning/molecules/PhysicsCanvas';
 export { BiologyCanvas, type BiologyCanvasProps, type BiologyNode, type BiologyEdge, } from '../../learning/molecules/BiologyCanvas';
 export { ChemistryCanvas, type ChemistryCanvasProps, type ChemistryAtom, type ChemistryBond, type ChemistryArrow, } from '../../learning/molecules/ChemistryCanvas';
+export { AlgorithmCanvas, type AlgorithmCanvasProps, type AlgorithmBar, type AlgorithmCell, type AlgorithmPointer, } from '../../learning/molecules/AlgorithmCanvas';
 export { GraphView, type GraphViewProps, type GraphViewNode, type GraphViewEdge } from './GraphView';
 export { MapView, type MapViewProps, type MapMarkerData, type MapRouteData, type MapRouteWaypoint } from './MapView';
 export { NumberStepper, type NumberStepperProps, type NumberStepperSize } from './NumberStepper';

package/dist/components/game/2d/molecules/Canvas2D.d.ts

@@ -53,6 +53,10 @@ export interface SidePlayer {
     vy?: number;
     grounded?: boolean;
     facingRight?: boolean;
+    /** Animation state name — driven by the LOLO state machine (e.g. "idle", "walk", "jump"). */
+    animation?: string;
+    /** Frame index within the animation — driven by the LOLO state machine. */
+    frame?: number;
 }
 export interface Canvas2DProps {
     /** Additional CSS classes */
@@ -134,12 +138,12 @@ export interface Canvas2DProps {
     spriteMaxWidthRatio?: number;
     /** Override for the diamond-top Y offset within the tile sprite. */
     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 terrain sprite from terrain key — a bare URL or an Asset (atlas sub-texture ref). */
+    getTerrainSprite?: (terrain: string) => string | Asset | undefined;
+    /** Resolve feature sprite from feature type key — a bare URL or an Asset. */
+    getFeatureSprite?: (featureType: string) => string | Asset | undefined;
+    /** Resolve unit static sprite — a bare URL or an Asset. */
+    getUnitSprite?: (unit: IsometricUnit) => string | Asset | undefined;
     /** Resolve animated sprite sheet frame for a unit */
     resolveUnitFrame?: (unitId: string) => ResolvedFrame | null;
     /** Additional sprite URLs to preload (e.g., effect sprites) */

package/dist/components/game/2d/templates/GameShell.d.ts

@@ -1,39 +1,35 @@
 /**
- * GameShell
+ * GameShell — thin fullscreen game SURFACE.
  *
- * A full-screen layout wrapper for game applications.
- * Replaces DashboardLayout for game clients — no sidebar nav, just full-viewport
- * rendering with an optional HUD overlay bar.
- *
- * Wrap game page content directly as children:
- *   <GameShell appName="TraitWars">
- *     <WorldMapPage />
- *   </GameShell>
- *
- * @generated pattern — can be customised per-game via props
+ * Contributes positioning + the game skin (Kenney font, 9-slice panel chrome, floating overlays)
+ * and nothing else: the canvas fills the viewport underneath; composed atoms/molecules land in
+ * overlay slots. `hud` floats top; `addons` floats bottom-right (action cluster). Dumb: props in,
+ * layout out — no descriptor resolution, no runtime logic.
  */
 import React from "react";
 import type { Asset } from "@almadar/core";
 export interface GameShellProps {
-    /** Application / game title shown in the HUD bar */
+    /** Application / game title shown as a floating chip */
     appName?: string;
-    /** Optional HUD content rendered above the main area */
+    /** Stat chips row — floats along the top edge */
     hud?: React.ReactNode;
+    /** Action cluster — floats bottom-right (End Turn, Fire, Reset, …) */
+    addons?: React.ReactNode;
+    /** Movement controls — floats bottom-left (d-pad / control-grid). */
+    controls?: React.ReactNode;
+    /** Centered overlay layer (victory/defeat banners, dialogs). */
+    overlay?: React.ReactNode;
     /** Extra class name on the root container */
     className?: string;
-    /** Whether to show the minimal top bar (default: true) */
+    /** Whether to show the title chip (default: true) */
     showTopBar?: boolean;
-    /** Game content rendered inside the full-screen area */
+    /** Game content — fills the whole surface underneath the overlays */
     children?: React.ReactNode;
-    /** Background image for the shell/main area (e.g. Kenny panel frame). Falls back to CSS #0a0a0f. */
+    /** Pattern slice tiled at low opacity across the surface (never cover-stretched). */
     backgroundAsset?: Asset;
-    /** Background image for the HUD bar. Falls back to CSS #12121f surface color. */
+    /** 9-sliced panel skin for the HUD chips row + title chip. */
     hudBackgroundAsset?: Asset;
+    /** Game font key (future | future-narrow | pixel | blocks | mini) or a CSS font-family. */
+    fontFamily?: string;
 }
-/**
- * Full-viewport game shell layout.
- *
- * Renders children inside a full-height flex container.
- * An optional top bar shows the game title and can host HUD widgets.
- */
 export declare const GameShell: React.FC<GameShellProps>;