@almadar/ui 5.95.0 → 5.97.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/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 */

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>;