@almadar/ui 5.25.0 → 5.26.0

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

@@ -1,8 +1,8 @@
 /**
- * FlipContainer - A 3D perspective container atom for flip animations.
- *
- * Provides CSS 3D transform infrastructure: perspective on the outer wrapper,
- * preserve-3d + rotateY on the inner, and backface-visibility hidden on each child face.
+ * FlipContainer — CSS 3D perspective atom (distinct from FlipCard molecule).
+ * Owns perspective/preserve-3d/rotateY only. Children are the raw face elements.
+ * Use FlipCard when you need standard card chrome; use FlipContainer when you
+ * need the flip mechanic around custom face content.
  */
 import React from 'react';
 export interface FlipContainerProps {

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

@@ -13,8 +13,10 @@
  */
 import React from 'react';
 import type { LucideIcon } from 'lucide-react';
+import type { ColorToken } from './types';
 export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type IconAnimation = 'spin' | 'pulse' | 'none';
+export type { ColorToken };
 /**
  * Resolve an icon name to a Lucide icon component.
  * Supports all 1500+ Lucide icons via dynamic PascalCase lookup.
@@ -32,8 +34,8 @@ export interface IconProps {
     name?: string;
     /** Size of the icon */
     size?: IconSize;
-    /** Color class (Tailwind color class) or 'inherit' for theme default */
-    color?: string;
+    /** Semantic palette token or an arbitrary Tailwind color class. */
+    color?: ColorToken | string;
     /** Animation type */
     animation?: IconAnimation;
     /** Additional CSS classes */

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

@@ -5,7 +5,7 @@
  */
 import React from "react";
 export type ProgressBarType = "linear" | "circular" | "stepped";
-export type ProgressBarVariant = "default" | "primary" | "success" | "warning" | "danger";
+export type ProgressBarVariant = "default" | "primary" | "success" | "warning" | "error" | "danger";
 export type ProgressBarColor = ProgressBarVariant;
 export interface ProgressBarProps {
     /**

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

@@ -37,21 +37,3 @@ export interface TypographyProps {
     children?: React.ReactNode;
 }
 export declare const Typography: React.FC<TypographyProps>;
-/**
- * Heading component - convenience wrapper for Typography heading variants
- */
-export interface HeadingProps extends Omit<TypographyProps, "variant"> {
-    /** Heading level (1-6) */
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-    /** Override font size */
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
-}
-export declare const Heading: React.FC<HeadingProps>;
-/**
- * Text component - convenience wrapper for Typography body/caption variants
- */
-export interface TextProps extends Omit<TypographyProps, "level"> {
-    /** Text variant */
-    variant?: "body" | "body1" | "body2" | "caption" | "small" | "large" | "label" | "overline";
-}
-export declare const Text: React.FC<TextProps>;

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

@@ -21,7 +21,7 @@ export { Switch, type SwitchProps } from "./Switch";
 export { Spacer, type SpacerProps, type SpacerSize } from "./Spacer";
 export { Stack, VStack, HStack, type StackProps, type VStackProps, type HStackProps, type StackDirection, type StackGap, type StackAlign, type StackJustify, } from "./Stack";
 export { TextHighlight, type TextHighlightProps, type HighlightType, } from "./TextHighlight";
-export { Typography, Heading, Text, type TypographyProps, type TypographyVariant, type HeadingProps, type TextProps, } from "./Typography";
+export { Typography, type TypographyProps, type TypographyVariant, } from "./Typography";
 export { ThemeToggle, type ThemeToggleProps } from "./ThemeToggle";
 export { ThemeSelector } from "./ThemeSelector";
 export { Overlay, type OverlayProps } from "./Overlay";

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

@@ -1,6 +1,12 @@
 /**
  * Cross-cutting atom-level prop shapes shared across the design system.
  */
+/**
+ * Canonical semantic color palette.  Values are the Tailwind / CSS-var token
+ * names that every component in the design system understands.  Prefer this
+ * over a bare `string` for any `color` or `variant` prop.
+ */
+export type ColorToken = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'muted';
 /**
  * Concrete error-state shape read by display components (`error.message`,
  * occasionally `error.stack`). Structurally assignable from the global `Error`,

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { TraitConfigValue } from '@almadar/core';
+export interface ArrayEditorProps {
+    /** Current array value. */
+    value: ReadonlyArray<TraitConfigValue>;
+    /** Fired when the array changes. */
+    onChange: (next: ReadonlyArray<TraitConfigValue>) => void;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * ArrayEditor — edits a `ReadonlyArray<TraitConfigValue>` with add / remove per row.
+ * Each row infers its editor from the element's runtime type.
+ */
+export declare const ArrayEditor: React.FC<ArrayEditorProps>;

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

@@ -7,7 +7,13 @@
  */
 import React from 'react';
 import type { EventEmit } from '@almadar/core';
-export interface CarouselProps<T = Record<string, unknown>> {
+/** Default shape for carousel slide items when no generic is provided. */
+export interface CarouselItem {
+    id?: string;
+    title?: string;
+    image?: string;
+}
+export interface CarouselProps<T = CarouselItem> {
     /** Array of items to display as slides */
     items: T[];
     /** Render function for each slide */
@@ -33,4 +39,4 @@ export interface CarouselProps<T = Record<string, unknown>> {
     /** Additional CSS classes */
     className?: string;
 }
-export declare const Carousel: <T = Record<string, unknown>>({ items, renderItem, children, autoPlay, autoPlayInterval, showDots, showArrows, loop, slideChangeEvent, slideChangePayload, className, }: CarouselProps<T>) => React.ReactElement | null;
+export declare const Carousel: <T = CarouselItem>({ items, renderItem, children, autoPlay, autoPlayInterval, showDots, showArrows, loop, slideChangeEvent, slideChangePayload, className, }: CarouselProps<T>) => React.ReactElement | null;

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

@@ -1,8 +1,8 @@
 /**
- * Container Component
- *
- * A max-width wrapper that centers content horizontally.
- * Essential for controlling page width and maintaining consistent margins.
+ * Container — max-width centering wrapper (distinct from Box).
+ * Box controls padding/margin/bg/shadow on an arbitrary element.
+ * Container constrains page width and centers; use it at the layout level,
+ * not as a generic div replacement.
  */
 import React from 'react';
 export type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';

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

@@ -1,8 +1,7 @@
 /**
- * DateRangeSelector Molecule Component
- *
- * Button group for selecting time range periods.
- * Pure UI molecule with no entity binding.
+ * DateRangeSelector — preset period button-group (e.g. 1W / 1M / 3M / 1Y).
+ * Distinct from DateRangePicker: no calendar inputs, no custom dates.
+ * Use DateRangePicker when the user needs to enter an arbitrary from/to range.
  */
 import React from 'react';
 export interface DateRangeSelectorOption {

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

@@ -1,8 +1,8 @@
 /**
- * DocSidebar Molecule Component
- *
- * A documentation navigation sidebar with collapsible category sections.
- * Composes from Box, VStack, HStack, Typography, and Icon atoms.
+ * DocSidebar — collapsible documentation navigation sidebar.
+ * Renders a nested item tree with expand/collapse per category and active-item
+ * highlighting. Not a generic nav; it owns doc-site-specific UX (uppercase
+ * category headers, indented children, active highlight).
  */
 import React from 'react';
 export interface DocSidebarItem {

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

@@ -15,6 +15,7 @@
  * sides of the parent container.
  */
 import React from 'react';
+import type { ColorToken } from '../atoms/types';
 export type EdgeVariant = 'arch' | 'vine' | 'lattice';
 export type EdgeSide = 'left' | 'right' | 'both';
 export interface EdgeDecorationProps {
@@ -24,8 +25,8 @@ export interface EdgeDecorationProps {
     side?: EdgeSide;
     /** Overall opacity (default: 0.15) */
     opacity?: number;
-    /** Stroke color */
-    color?: string;
+    /** Semantic palette token or a raw CSS color value for the stroke. */
+    color?: ColorToken | string;
     /** Stroke width */
     strokeWidth?: number;
     /** Width of the decoration area as percentage of container (default: 15) */

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

@@ -1,8 +1,8 @@
 /**
- * Flex Component
- *
- * A flexbox wrapper with all common flex properties exposed as props.
- * More explicit than Stack for when you need full flex control.
+ * Flex — full-surface flexbox primitive (distinct from Stack).
+ * Stack covers the 95% case (VStack/HStack with gap/align/justify).
+ * Flex exposes direction, wrap, grow, shrink, basis individually; use it
+ * when you need those extra axes or inline-flex behavior.
  */
 import React from 'react';
 export type FlexDirection = 'row' | 'row-reverse' | 'col' | 'col-reverse';

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

@@ -1,8 +1,7 @@
 /**
- * FlipCard - A two-sided card with 3D flip animation.
- *
- * Pure presentational molecule: no entity binding, no event bus, no translations.
- * Uses the FlipContainer atom for the 3D transform mechanics.
+ * FlipCard — two-sided card molecule with front/back faces (distinct from FlipContainer).
+ * FlipContainer is the raw 3D-transform atom; FlipCard wraps it with card styling,
+ * absolute face positioning, and `front`/`back` ReactNode props for lolo consumers.
  */
 import React from 'react';
 export interface FlipCardProps {

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

@@ -5,9 +5,10 @@
  * Used between major sections for visual separation without hard background-color breaks.
  */
 import React from 'react';
+import type { ColorToken } from '../atoms/types';
 export interface GradientDividerProps {
-    /** Override the center color (CSS value). Defaults to var(--color-primary). */
-    color?: string;
+    /** Semantic palette token or a raw CSS color value. Defaults to 'primary'. */
+    color?: ColorToken | string;
     /** Additional class names */
     className?: string;
 }

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { TraitConfigObject } from '@almadar/core';
+export interface MapEditorProps {
+    /** Current map value (object used as string-keyed map). */
+    value: TraitConfigObject;
+    /** Fired when an entry is added, removed, or its key/value is changed. */
+    onChange: (next: TraitConfigObject) => void;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * MapEditor — edits a `TraitConfigObject` as a dynamic key/value map.
+ * Unlike ObjectEditor (fixed schema keys), MapEditor allows adding/removing entries
+ * and renaming keys.
+ */
+export declare const MapEditor: React.FC<MapEditorProps>;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { TraitConfigObject } from '@almadar/core';
+export interface ObjectEditorProps {
+    /** Current object value. */
+    value: TraitConfigObject;
+    /** Fired when any field changes. */
+    onChange: (next: TraitConfigObject) => void;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * ObjectEditor — edits a `TraitConfigObject` showing one labeled row per key.
+ * Keys are fixed (derived from the current object's shape).
+ */
+export declare const ObjectEditor: React.FC<ObjectEditorProps>;

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

@@ -1,8 +1,8 @@
 /**
- * SidePanel Molecule Component
- *
- * A side panel that slides in from the right (or left) with header and content.
- * Uses Button, Typography atoms.
+ * SidePanel — fixed side panel for contextual detail on top of the page layout.
+ * Distinct from Drawer: Drawer is driven by the UI Slot system (render_ui drawer)
+ * and is generic. SidePanel is a direct-render component with its own close event
+ * API, used where the panel is always present in the component tree.
  */
 import React from "react";
 import type { EventEmit } from "@almadar/core";

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

@@ -1,9 +1,8 @@
 /**
- * SortableList Molecule
- *
- * A list where items can be dragged to reorder via drag handles.
- * Uses useDragReorder for drag state management and useEventBus for event emission.
- * Shows a drop indicator line at the target position during drag.
+ * SortableList — drag-to-reorder list (distinct from DataList).
+ * DataList is a read/action list with no drag. SortableList owns drag
+ * handles and emits a REORDER event with fromIndex/toIndex/item — use it
+ * when item ordering is user-controlled.
  */
 import React from 'react';
 import type { EntityRow, EventKey, EventPayload } from "@almadar/core";

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

@@ -1,13 +1,8 @@
 /**
- * ViolationAlert
- *
- * Displays inspection violations with law references and action types.
- * Used in inspection forms to show detected compliance violations.
- *
- * Action Types:
- * - measure: Corrective measure required (warning)
- * - admin: Administrative action (error)
- * - penalty: Penalty proceedings (error, severe)
+ * ViolationAlert — domain-specific compliance violation display (distinct from Alert).
+ * Alert is a generic dismissible message. ViolationAlert owns structured
+ * `ViolationRecord` (law/article/actionType/adminAction/penaltyAction) and
+ * an optional "navigate to field" action — use it in inspection/compliance forms only.
  */
 import React from "react";
 export type ViolationRecord = {

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

@@ -1,4 +1,7 @@
 export { ErrorBoundary, type ErrorBoundaryProps } from './ErrorBoundary';
+export { ArrayEditor, type ArrayEditorProps } from './ArrayEditor';
+export { ObjectEditor, type ObjectEditorProps } from './ObjectEditor';
+export { MapEditor, type MapEditorProps } from './MapEditor';
 export { FileTree, type FileTreeProps, type FileTreeNode } from './FileTree';
 export { FormField, type FormFieldProps } from './FormField';
 export { EmptyState, type EmptyStateProps } from './EmptyState';
@@ -33,7 +36,7 @@ export { Drawer, type DrawerProps, type DrawerPosition, type DrawerSize } from '
 export { WizardProgress, type WizardProgressProps, type WizardProgressStep } from './WizardProgress';
 export { WizardNavigation, type WizardNavigationProps } from './WizardNavigation';
 export { MarkdownContent, type MarkdownContentProps } from './markdown/MarkdownContent';
-export { CodeBlock, type CodeBlockProps, type CodeLanguage } from './markdown/CodeBlock';
+export { CodeBlock, type CodeBlockProps, type CodeLanguage, type CodeViewerMode, type DiffLine, type CodeViewerFile, type CodeViewerAction, toCodeLanguage, } from './markdown/CodeBlock';
 export { QuizBlock, type QuizBlockProps } from './QuizBlock';
 export { ScaledDiagram, type ScaledDiagramProps } from './ScaledDiagram';
 export { CalendarGrid, type CalendarGridProps } from './CalendarGrid';
@@ -97,7 +100,6 @@ export { ReplyTree, type ReplyTreeProps } from './ReplyTree';
 export { BranchingLogicBuilder, type BranchingLogicBuilderProps, type BranchingQuestion, type BranchingRule } from './BranchingLogicBuilder';
 export { VersionDiff, type VersionDiffProps, type DiffRevision, type DiffLine as VersionDiffLine, type DiffLineType } from './VersionDiff';
 export { DocBreadcrumb, type DocBreadcrumbProps, type DocBreadcrumbItem } from './DocBreadcrumb';
-export { DocCodeBlock, type DocCodeBlockProps } from './DocCodeBlock';
 export { DocPagination, type DocPaginationProps, type DocPaginationLink } from './DocPagination';
 export { DocSearch, type DocSearchProps, type DocSearchResult } from './DocSearch';
 export { DocSidebar, type DocSidebarProps, type DocSidebarItem } from './DocSidebar';
@@ -124,4 +126,3 @@ export { Chart, type ChartProps, type ChartType, type ChartSeries, } from "./Cha
 export { SignaturePad, type SignaturePadProps, } from "./SignaturePad";
 export { DocumentViewer, type DocumentViewerProps, type DocumentType, } from "./DocumentViewer";
 export { GraphCanvas, type GraphCanvasProps, type GraphNode, type GraphEdge, } from "./GraphCanvas";
-export { CodeViewer, type CodeViewerProps, type CodeViewerMode, type DiffLine, } from "./CodeViewer";

package/dist/components/core/molecules/markdown/CodeBlock.d.ts

@@ -8,6 +8,7 @@
  * - Emits: UI:COPY_CODE { language, success }
  */
 import React from 'react';
+import type { UiError } from '../../atoms/types';
 /**
  * The set of languages with a registered PrismLight grammar (above) plus the
  * `.orb`/`.lolo` grammars from `@almadar/syntax`. Authoritative: an unregistered
@@ -22,9 +23,26 @@ export type CodeLanguage = (typeof CODE_LANGUAGES)[number];
  * grammar — matching the highlighter's own plain-text fallback.
  */
 export declare function toCodeLanguage(value: string | undefined): CodeLanguage;
+export type CodeViewerMode = 'code' | 'diff';
+export interface DiffLine {
+    type: 'add' | 'remove' | 'context';
+    content: string;
+    lineNumber?: number;
+}
+export interface CodeViewerAction {
+    label: string;
+    event?: string;
+    navigatesTo?: string;
+    variant?: 'primary' | 'secondary' | 'ghost';
+}
+export interface CodeViewerFile {
+    label: string;
+    code: string;
+    language?: CodeLanguage;
+}
 export interface CodeBlockProps {
     /** The code content to display */
-    code: string;
+    code?: string;
     /** Programming language for syntax highlighting */
     language?: CodeLanguage;
     /** Show the copy button */
@@ -32,7 +50,7 @@ export interface CodeBlockProps {
     /** Show the language badge */
     showLanguageBadge?: boolean;
     /** Maximum height before scrolling */
-    maxHeight?: string;
+    maxHeight?: string | number;
     /** Enable brace-based code folding of multi-line `{}`/`[]` blocks (default: true). */
     foldable?: boolean;
     /** Additional CSS classes */
@@ -62,5 +80,29 @@ export interface CodeBlockProps {
      * path → line map from the schema + validation results.
      */
     errorLines?: Map<number, 'error' | 'warning'>;
+    /** Title shown in the toolbar */
+    title?: string;
+    /** Diff or plain-code display mode */
+    mode?: CodeViewerMode;
+    /** Pre-computed diff lines */
+    diff?: readonly DiffLine[];
+    /** Old source text — generates diff when combined with newValue */
+    oldValue?: string;
+    /** New source text — generates diff when combined with oldValue */
+    newValue?: string;
+    /** Show line numbers in code / diff mode */
+    showLineNumbers?: boolean;
+    /** Enable word-wrap in code / diff mode */
+    wordWrap?: boolean;
+    /** Multiple files shown as tabs */
+    files?: readonly CodeViewerFile[];
+    /** Action badges in the toolbar */
+    actions?: readonly CodeViewerAction[];
+    /** Loading state */
+    isLoading?: boolean;
+    /** Error state */
+    error?: UiError | null;
+    /** Show copy button (viewer alias for showCopyButton) */
+    showCopy?: boolean;
 }
 export declare const CodeBlock: React.NamedExoticComponent<CodeBlockProps>;

package/dist/components/core/organisms/ComponentPatterns.d.ts

@@ -122,9 +122,6 @@ export interface HeadingPatternProps extends ClosedCircuitProps {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
     className?: string;
 }
-/**
- * Heading pattern.
- */
 export declare function HeadingPattern({ content, level, size, className, }: HeadingPatternProps): React.ReactElement;
 export declare namespace HeadingPattern {
     var displayName: string;

package/dist/components/game/atoms/DialogueBubble.d.ts

@@ -1,10 +1,11 @@
+import type { AssetUrl } from '@almadar/core';
 export interface DialogueBubbleProps {
     /** Speaker name displayed at the top */
     speaker?: string;
     /** Dialogue text content */
     text: string;
     /** URL for the speaker portrait image */
-    portrait?: string;
+    portrait?: AssetUrl;
     /** Position of the bubble on screen */
     position?: 'top' | 'bottom';
     /** Additional CSS classes */

package/dist/components/game/atoms/ResourceCounter.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { ColorToken } from '../../core/atoms/types';
 export interface ResourceCounterProps {
     /** Icon component or emoji */
     icon?: React.ReactNode;
@@ -8,8 +9,8 @@ export interface ResourceCounterProps {
     value: number;
     /** Maximum value */
     max?: number;
-    /** Accent color class (e.g. 'text-yellow-400') */
-    color?: string;
+    /** Semantic palette token or an arbitrary Tailwind color class. */
+    color?: ColorToken | string;
     /** Size variant */
     size?: 'sm' | 'md' | 'lg';
     /** Additional CSS classes */

package/dist/components/game/atoms/Sprite.d.ts

@@ -4,10 +4,10 @@
  * Renders a single frame from a spritesheet with transform support.
  */
 import React from 'react';
-import type { EventKey } from "@almadar/core";
+import type { EventKey, AssetUrl } from "@almadar/core";
 export interface SpriteProps {
     /** Spritesheet image URL */
-    spritesheet: string;
+    spritesheet: AssetUrl;
     /** Width of each frame in pixels */
     frameWidth: number;
     /** Height of each frame in pixels */

package/dist/components/game/atoms/StateIndicator.d.ts

@@ -1,9 +1,8 @@
 /**
- * StateIndicator Component
- *
- * Displays a visual indicator for a game entity's current state.
- * Generic — not tied to any specific game. Projects can extend
- * the state styles via the `stateStyles` prop.
+ * StateIndicator — animated game-entity state pill (distinct from core Badge atom).
+ * Badge is a static text label. StateIndicator maps a state string (idle/active/
+ * moving/…) to icon + bg colour + optional pulse via a style registry that callers
+ * can extend. Use it in game HUDs where the entity state machine drives the display.
  */
 import React from 'react';
 export interface StateStyle {

package/dist/components/game/atoms/StatusEffect.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
 export interface StatusEffectProps {
-    /** Icon to display for the effect */
-    icon: React.ReactNode;
+    /** Lucide kebab-case icon name */
+    icon: string;
     /** Label describing the effect */
     label?: string;
     /** Remaining duration in seconds */

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

@@ -1,3 +1,9 @@
+/**
+ * ActionButtons — configurable button-group molecule for game controls (distinct from ActionButton atom).
+ * ActionButton is a single button with cooldown overlay and hotkey badge.
+ * ActionButtons manages a *set* of ControlButtons, tracks press/release state,
+ * and supports horizontal/vertical/diamond layouts for gamepad-style UI.
+ */
 import * as React from 'react';
 import type { EventEmit } from '@almadar/core';
 export interface ActionButtonConfig {

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

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { type StatBadgeProps } from "./StatBadge";
 export interface GameHudStat extends Omit<StatBadgeProps, "size"> {
     /** Data source entity name */
@@ -17,8 +16,8 @@ export interface GameHudElement {
     label?: string;
     /** Direct value (from compiled render-ui effects) */
     value?: number | string;
-    /** Icon name or node */
-    icon?: React.ReactNode;
+    /** Lucide kebab-case icon name */
+    icon?: string;
     /** Display format */
     format?: string;
     /** Max value (for bars/hearts) */

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

@@ -1,4 +1,10 @@
 import * as React from 'react';
+/**
+ * StatBadge — game stat display molecule (distinct from core Badge atom).
+ * Badge shows a text label/status token. StatBadge shows a numeric value
+ * with optional HealthBar (hearts/bar) or ScoreDisplay (animated number) and
+ * a named label — purpose-built for HUD stat rows, not general status tags.
+ */
 export interface StatBadgeProps {
     /** Stat label */
     label: string;

package/dist/components/game/organisms/puzzles/state-architect/StateJsonView.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface StateJsonViewProps {
+    /** JSON data to display */
+    data: Record<string, unknown>;
+    /** Label */
+    label?: string;
+    /** Whether the code is expanded by default */
+    defaultExpanded?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function StateJsonView({ data, label, defaultExpanded, className, }: StateJsonViewProps): React.JSX.Element;
+export declare namespace StateJsonView {
+    var displayName: string;
+}
+export default StateJsonView;

package/dist/components/game/organisms/puzzles/state-architect/index.d.ts

@@ -4,7 +4,7 @@ export { TransitionArrow } from './TransitionArrow';
 export type { TransitionArrowProps } from './TransitionArrow';
 export { VariablePanel } from './VariablePanel';
 export type { VariablePanelProps } from './VariablePanel';
-export { CodeView } from './CodeView';
-export type { CodeViewProps } from './CodeView';
+export { StateJsonView } from './StateJsonView';
+export type { StateJsonViewProps } from './StateJsonView';
 export { StateArchitectBoard } from './StateArchitectBoard';
 export type { StateArchitectBoardProps, StateArchitectTransition, TestCase, } from './StateArchitectBoard';