@almadar/ui 2.1.10 → 2.1.11

package/dist/{chunk-XDCOHA5C.js → chunk-CTNDYHXY.js}

@@ -3587,6 +3587,7 @@ function Card2({
   action
 }) {
   const eventBus = useEventBus();
+  const { t } = useTranslate();
   const isClickable = !!onClick || !!action;
   const handleClick = () => {
     if (action) eventBus.emit(`UI:${action}`, {});
@@ -3611,7 +3612,7 @@ function Card2({
           "img",
           {
             src: image,
-            alt: title || "Card image",
+            alt: title || t("card.imageAlt"),
             className: "w-full h-full object-cover"
           }
         ) }),
@@ -6654,6 +6655,7 @@ function DataTable({
               /* @__PURE__ */ jsx(
                 "th",
                 {
+                  "data-column": String(col.key),
                   className: cn(
                     "px-4 py-3 text-left text-xs font-bold text-[var(--color-foreground)] uppercase tracking-wider whitespace-nowrap",
                     col.sortable && "cursor-pointer select-none hover:bg-[var(--color-table-row-hover)]"
@@ -6727,6 +6729,7 @@ function DataTable({
             /* @__PURE__ */ jsxs(
               "tr",
               {
+                "data-entity-row": true,
                 className: cn(
                   "border-b border-[var(--color-table-border)] last:border-0 hover:bg-[var(--color-table-row-hover)] transition-colors",
                   selectedIds.includes(row.id) && "bg-[var(--color-primary)]/10 font-medium",
@@ -6752,6 +6755,7 @@ function DataTable({
                       /* @__PURE__ */ jsx(
                         "td",
                         {
+                          "data-column": String(col.key),
                           className: "px-4 py-3 text-sm text-[var(--color-foreground)] whitespace-nowrap sm:whitespace-normal",
                           children: col.render ? col.render(cellValue, row, rowIndex) : String(cellValue ?? "")
                         },
@@ -7443,8 +7447,9 @@ var DetailPanel = ({
       /* @__PURE__ */ jsx(Typography, { variant: "h4", weight: "semibold", children: section.title }),
       /* @__PURE__ */ jsx(Divider, {}),
       /* @__PURE__ */ jsx(SimpleGrid, { minChildWidth: "250px", maxCols: 2, gap: "lg", children: section.fields.map((field, fieldIdx) => {
+        const fieldKey = typeof field === "string" ? field : void 0;
         const resolved = typeof field === "string" ? { label: formatFieldLabel(field), value: normalizedData ? formatFieldValue(getNestedValue(normalizedData, field), field) : "\u2014", icon: getFieldIcon(field) } : field;
-        return /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "start", children: [
+        return /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "start", "data-field": fieldKey, children: [
           resolved.icon && /* @__PURE__ */ jsx(
             Icon,
             {
@@ -7751,7 +7756,7 @@ var Form = ({
       const inputType = determineInputType(field);
       const label = field.label || fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/([A-Z])/g, " $1");
       const currentValue = formData[fieldName] ?? field.defaultValue ?? "";
-      return /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+      return /* @__PURE__ */ jsxs(VStack, { gap: "xs", "data-field": fieldName, children: [
         inputType !== "checkbox" && /* @__PURE__ */ jsxs(Typography, { as: "label", variant: "label", weight: "bold", children: [
           label,
           field.required && /* @__PURE__ */ jsx(Typography, { as: "span", color: "error", className: "ml-1", children: "*" })
@@ -8118,6 +8123,7 @@ var CardGrid = ({
       return /* @__PURE__ */ jsxs(
         Box,
         {
+          "data-entity-row": true,
           className: cn(
             "bg-[var(--color-card)] rounded-[var(--radius-lg)] border border-[var(--color-border)] p-4 shadow-[var(--shadow-sm)]",
             "cursor-pointer hover:border-[var(--color-primary)] transition-colors"

package/dist/components/index.d.ts

@@ -114,6 +114,8 @@ type BadgeSize = "sm" | "md" | "lg";
 interface BadgeProps extends React__default.HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
     size?: BadgeSize;
+    /** Numeric count or amount to display in badge */
+    amount?: number;
 }
 declare const Badge: React__default.ForwardRefExoticComponent<BadgeProps & React__default.RefAttributes<HTMLSpanElement>>;
 
@@ -1437,6 +1439,14 @@ interface CardProps {
     className?: string;
     /** Declarative event name — emits UI:{action} via eventBus on card click */
     action?: string;
+    /** Whether the card is selected (highlighted state) */
+    isSelected?: boolean;
+    /** Card name (alias for title) */
+    name?: string;
+    /** Level indicator */
+    level?: number;
+    /** Maximum level */
+    maxLevel?: number;
 }
 /**
  * Card component for displaying content in a contained box
@@ -2683,6 +2693,8 @@ interface StatCardProps extends EntityDisplayProps {
     };
     /** Metrics to display (schema format) - accepts readonly for compatibility with generated const arrays */
     metrics?: readonly MetricDefinition[];
+    /** Compact display mode */
+    compact?: boolean;
 }
 declare const StatCard: React__default.FC<StatCardProps>;
 
@@ -3587,6 +3599,10 @@ interface CardGridProps extends EntityDisplayProps {
     itemActions?: readonly CardItemAction[];
     /** Show total count in pagination */
     showTotal?: boolean;
+    /** Show avatar/image field on cards */
+    showAvatar?: boolean;
+    /** Visual variant for the card grid */
+    variant?: string;
 }
 /**
  * CardGrid - Responsive card collection layout
@@ -4387,15 +4403,13 @@ interface SpriteSheetUrls {
  * @packageDocumentation
  */
 
-interface IsometricCanvasProps {
-    /** Additional CSS classes */
-    className?: string;
-    /** Loading state indicator */
-    isLoading?: boolean;
-    /** Error state */
-    error?: Error | null;
-    /** Entity name for schema-driven auto-fetch */
-    entity?: string;
+/** Event Contract:
+ *  Emits: UI:TILE_CLICK
+ *  Emits: UI:UNIT_CLICK
+ *  Emits: UI:TILE_HOVER
+ *  Emits: UI:TILE_LEAVE
+ */
+interface IsometricCanvasProps extends EntityDisplayProps {
     /** Array of tiles to render */
     tiles?: IsometricTile[];
     /** Array of units on the board */
@@ -4419,13 +4433,9 @@ interface IsometricCanvasProps {
         x: number;
         y: number;
     } | null;
-    /** Tile click handler */
     onTileClick?: (x: number, y: number) => void;
-    /** Unit click handler */
     onUnitClick?: (unitId: string) => void;
-    /** Tile hover handler */
     onTileHover?: (x: number, y: number) => void;
-    /** Tile leave handler */
     onTileLeave?: () => void;
     /** Declarative event: emits UI:{tileClickEvent} with { x, y } on tile click */
     tileClickEvent?: string;
@@ -4447,6 +4457,10 @@ interface IsometricCanvasProps {
     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;
@@ -4460,7 +4474,7 @@ interface IsometricCanvasProps {
     resolveUnitFrame?: (unitId: string) => ResolvedFrame | null;
     /** Additional sprite URLs to preload (e.g., effect sprites) */
     effectSpriteUrls?: string[];
-    /** Callback to draw canvas effects after units */
+    /** 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;
@@ -5350,6 +5364,11 @@ interface DialogueNode {
     choices?: DialogueChoice[];
     autoAdvance?: number;
 }
+/** Event Contract:
+ *  Emits: UI:COMPLETE
+ *  Emits: UI:CHOICE
+ *  Emits: UI:ADVANCE
+ */
 interface DialogueBoxProps {
     /** Current dialogue node to display */
     dialogue: DialogueNode;
@@ -5706,6 +5725,13 @@ interface WorldMapEntity {
     };
     backgroundImage?: string;
 }
+/** Event Contract:
+ *  Emits: UI:HERO_SELECT
+ *  Emits: UI:HERO_MOVE
+ *  Emits: UI:BATTLE_ENCOUNTER
+ *  Emits: UI:FEATURE_ENTER
+ *  Emits: UI:TILE_CLICK
+ */
 interface WorldMapBoardProps extends Omit<EntityDisplayProps, 'entity'> {
     /** World map entity data */
     entity: WorldMapEntity;
@@ -5929,6 +5955,10 @@ interface SlotItemData {
     /** Optional state machine for tooltip display */
     stateMachine?: TraitStateMachineDefinition;
 }
+/** Event Contract:
+ *  Emits: UI:CLICK
+ *  Emits: UI:REMOVE
+ */
 interface TraitSlotProps {
     /** Slot index (1-based) */
     slotNumber: number;
@@ -7866,6 +7896,8 @@ interface DashboardLayoutProps {
     sidebarFooter?: React__default.ReactNode;
     /** Callback when user clicks sign out (optional - uses auth context signOut if not provided) */
     onSignOut?: () => void;
+    /** Page content rendered inside the main area */
+    children?: React__default.ReactNode;
 }
 declare const DashboardLayout: React__default.FC<DashboardLayoutProps>;
 
@@ -7997,11 +8029,10 @@ declare const GenericAppTemplate: React__default.FC<GenericAppTemplateProps>;
  * Replaces DashboardLayout for game clients — no sidebar nav, just full-viewport
  * rendering with an optional HUD overlay bar.
  *
- * Used as a React Router layout route element:
- *   <Route element={<GameShell appName="TraitWars" />}>
- *     <Route index element={<WorldMapPage />} />
- *     ...
- *   </Route>
+ * Wrap game page content directly as children:
+ *   <GameShell appName="TraitWars">
+ *     <WorldMapPage />
+ *   </GameShell>
  *
  * @generated pattern — can be customised per-game via props
  */
@@ -8015,11 +8046,13 @@ interface GameShellProps {
     className?: string;
     /** Whether to show the minimal top bar (default: true) */
     showTopBar?: boolean;
+    /** Game content rendered inside the full-screen area */
+    children?: React__default.ReactNode;
 }
 /**
  * Full-viewport game shell layout.
  *
- * Renders child routes via `<Outlet />` inside a full-height flex container.
+ * Renders children inside a full-height flex container.
  * An optional top bar shows the game title and can host HUD widgets.
  */
 declare const GameShell: React__default.FC<GameShellProps>;

package/dist/components/index.js

@@ -2,8 +2,8 @@ import { useAuthContext } from '../chunk-6OACETQB.js';
 export { ENTITY_EVENTS, useAgentChat, useAuthContext, useCompile, useConnectGitHub, useCreateEntity, useDeepAgentGeneration, useDeleteEntity, useDisconnectGitHub, useEntities, useEntitiesByType, useEntity as useEntityById, useEntityMutations, useExtensions, useFileEditor, useFileSystem, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useInput, useOrbitalHistory, useOrbitalMutations, usePhysics, usePlayer, usePreview, useResolvedEntity, useSelectedEntity, useSendOrbitalEvent, useSingletonEntity, useUIEvents, useUpdateEntity, useValidation } from '../chunk-6OACETQB.js';
 import { DEFAULT_CONFIG, renderStateMachineToDomData, parseContentSegments } from '../chunk-N6DJVKZ6.js';
 import '../chunk-3HJHHULT.js';
-import { VStack, HStack, Typography, Button, Icon, Box, Card, Avatar, Badge, SearchInput, Checkbox, Menu as Menu$1, Pagination, LoadingState, EmptyState, Modal, ErrorState, QuizBlock, CodeBlock, ScaledDiagram, MarkdownContent, Divider, ProgressBar, Stack, Select, Drawer, Toast, Tabs, Input, ThemeToggle, EntityDisplayEvents, HealthBar, ScoreDisplay, StateIndicator, Container } from '../chunk-XDCOHA5C.js';
-export { Accordion, Card2 as ActionCard, Alert, Avatar, Badge, Box, Breadcrumb, Button, ButtonGroup, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Center, Checkbox, CodeBlock, ConditionalWrapper, Container, ControlButton, DataTable, DetailPanel, Divider, Drawer, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, FilterGroup, Flex, FloatingActionButton, Form, FormField, FormSectionHeader, Grid, HStack, Heading, HealthBar, Icon, Input, InputGroup, Label, LawReferenceTooltip, LoadingState, MarkdownContent, MasterDetail, Menu, Modal, Overlay, PageHeader, Pagination, Popover, ProgressBar, QuizBlock, Radio, RelationSelect, RepeatableFormSection, ScaledDiagram, ScoreDisplay, SearchInput, Select, SidePanel, SimpleGrid, Skeleton, SlotContentRenderer, Spacer, Spinner, Sprite, Stack, StatCard, StateIndicator, Switch, Tabs, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, Toast, Tooltip, Typography, UISlotComponent, UISlotRenderer, VStack, ViolationAlert, WizardNavigation, WizardProgress, drawSprite } from '../chunk-XDCOHA5C.js';
+import { VStack, HStack, Typography, Button, Icon, Box, Card, Avatar, Badge, SearchInput, Checkbox, Menu as Menu$1, Pagination, LoadingState, EmptyState, Modal, ErrorState, QuizBlock, CodeBlock, ScaledDiagram, MarkdownContent, Divider, ProgressBar, Stack, Select, Drawer, Toast, Tabs, Input, ThemeToggle, EntityDisplayEvents, HealthBar, ScoreDisplay, StateIndicator, Container } from '../chunk-CTNDYHXY.js';
+export { Accordion, Card2 as ActionCard, Alert, Avatar, Badge, Box, Breadcrumb, Button, ButtonGroup, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Center, Checkbox, CodeBlock, ConditionalWrapper, Container, ControlButton, DataTable, DetailPanel, Divider, Drawer, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, FilterGroup, Flex, FloatingActionButton, Form, FormField, FormSectionHeader, Grid, HStack, Heading, HealthBar, Icon, Input, InputGroup, Label, LawReferenceTooltip, LoadingState, MarkdownContent, MasterDetail, Menu, Modal, Overlay, PageHeader, Pagination, Popover, ProgressBar, QuizBlock, Radio, RelationSelect, RepeatableFormSection, ScaledDiagram, ScoreDisplay, SearchInput, Select, SidePanel, SimpleGrid, Skeleton, SlotContentRenderer, Spacer, Spinner, Sprite, Stack, StatCard, StateIndicator, Switch, Tabs, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, Toast, Tooltip, Typography, UISlotComponent, UISlotRenderer, VStack, ViolationAlert, WizardNavigation, WizardProgress, drawSprite } from '../chunk-CTNDYHXY.js';
 import '../chunk-BTXQJGFB.js';
 import { useTranslate } from '../chunk-JLEMVREZ.js';
 export { EntityDataProvider, I18nProvider, createTranslate, entityDataKeys, parseQueryBinding, useEntity, useEntityDataAdapter, useEntityDetail, useEntityList, useEntityListSuspense, useEntitySuspense, useQuerySingleton, useTranslate } from '../chunk-JLEMVREZ.js';
@@ -3961,6 +3961,7 @@ function IsometricCanvas({
   assetManifest
 }) {
   const eventBus = useEventBus();
+  const { t } = useTranslate();
   const canvasRef = useRef(null);
   const containerRef = useRef(null);
   const minimapRef = useRef(null);
@@ -3994,11 +3995,11 @@ function IsometricCanvas({
   }, [tilesProp]);
   const gridWidth = useMemo(() => {
     if (sortedTiles.length === 0) return 0;
-    return Math.max(...sortedTiles.map((t) => t.x)) + 1;
+    return Math.max(...sortedTiles.map((t2) => t2.x)) + 1;
   }, [sortedTiles]);
   const gridHeight = useMemo(() => {
     if (sortedTiles.length === 0) return 0;
-    return Math.max(...sortedTiles.map((t) => t.y)) + 1;
+    return Math.max(...sortedTiles.map((t2) => t2.y)) + 1;
   }, [sortedTiles]);
   const scaledTileWidth = TILE_WIDTH * scale;
   const scaledTileHeight = TILE_HEIGHT * scale;
@@ -4095,7 +4096,7 @@ function IsometricCanvas({
     miniCanvas.width = mW;
     miniCanvas.height = mH;
     mCtx.clearRect(0, 0, mW, mH);
-    const allScreenPos = sortedTiles.map((t) => isoToScreen(t.x, t.y, scale, baseOffsetX));
+    const allScreenPos = sortedTiles.map((t2) => isoToScreen(t2.x, t2.y, scale, baseOffsetX));
     const minX = Math.min(...allScreenPos.map((p2) => p2.x));
     const maxX = Math.max(...allScreenPos.map((p2) => p2.x + scaledTileWidth));
     const minY = Math.min(...allScreenPos.map((p2) => p2.y));
@@ -4508,7 +4509,7 @@ function IsometricCanvas({
     const adjustedX = world.x - scaledTileWidth / 2;
     const adjustedY = world.y - scaledDiamondTopY - scaledFloorHeight / 2;
     const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX);
-    const tileExists = tilesProp.some((t) => t.x === isoPos.x && t.y === isoPos.y);
+    const tileExists = tilesProp.some((t2) => t2.x === isoPos.x && t2.y === isoPos.y);
     if (tileExists) {
       if (tileHoverEvent) eventBus.emit(`UI:${tileHoverEvent}`, { x: isoPos.x, y: isoPos.y });
       onTileHover?.(isoPos.x, isoPos.y);
@@ -4536,7 +4537,7 @@ function IsometricCanvas({
       if (unitClickEvent) eventBus.emit(`UI:${unitClickEvent}`, { unitId: clickedUnit.id });
       onUnitClick?.(clickedUnit.id);
     } else if (onTileClick || tileClickEvent) {
-      const tileExists = tilesProp.some((t) => t.x === isoPos.x && t.y === isoPos.y);
+      const tileExists = tilesProp.some((t2) => t2.x === isoPos.x && t2.y === isoPos.y);
       if (tileExists) {
         if (tileClickEvent) eventBus.emit(`UI:${tileClickEvent}`, { x: isoPos.x, y: isoPos.y });
         onTileClick?.(isoPos.x, isoPos.y);
@@ -4544,7 +4545,7 @@ function IsometricCanvas({
     }
   }, [dragDistance, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, scale, baseOffsetX, units, tilesProp, onUnitClick, onTileClick, unitClickEvent, tileClickEvent, eventBus]);
   if (error) {
-    return /* @__PURE__ */ jsx(ErrorState, { title: "Canvas Error", message: error.message, className });
+    return /* @__PURE__ */ jsx(ErrorState, { title: t("canvas.errorTitle"), message: error.message, className });
   }
   if (isLoading) {
     return /* @__PURE__ */ jsx(LoadingState, { className });
@@ -12949,7 +12950,8 @@ var DashboardLayout = ({
   headerActions,
   showSearch = true,
   sidebarFooter,
-  onSignOut: onSignOutProp
+  onSignOut: onSignOutProp,
+  children
 }) => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [userMenuOpen, setUserMenuOpen] = useState(false);
@@ -13197,7 +13199,7 @@ var DashboardLayout = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx(Box, { as: "main", className: "p-4 sm:p-6 pb-20 sm:pb-6", children: /* @__PURE__ */ jsx(Outlet, {}) })
+      /* @__PURE__ */ jsx(Box, { as: "main", className: "p-4 sm:p-6 pb-20 sm:pb-6", children })
     ] })
   ] });
 };
@@ -13717,7 +13719,8 @@ var GameShell = ({
   appName = "Game",
   hud,
   className,
-  showTopBar = true
+  showTopBar = true,
+  children
 }) => {
   return /* @__PURE__ */ jsxs(
     Box,
@@ -13773,7 +13776,7 @@ var GameShell = ({
               overflow: "hidden",
               position: "relative"
             },
-            children: /* @__PURE__ */ jsx(Outlet, {})
+            children
           }
         )
       ]

package/dist/providers/index.js

@@ -1,4 +1,4 @@
-import { SuspenseConfigProvider } from '../chunk-XDCOHA5C.js';
+import { SuspenseConfigProvider } from '../chunk-CTNDYHXY.js';
 import { ThemeProvider } from '../chunk-BTXQJGFB.js';
 import { SelectionProvider, EntityDataProvider } from '../chunk-JLEMVREZ.js';
 export { SelectionContext, SelectionProvider, useSelection, useSelectionOptional } from '../chunk-JLEMVREZ.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",
@@ -123,7 +123,11 @@
     "@storybook/addon-docs": "^10.2.6",
     "@types/react-syntax-highlighter": "^15.5.0",
     "katex": "^0.16.0",
-    "@types/node": "^22.0.0"
+    "@types/node": "^22.0.0",
+    "eslint": "10.0.0",
+    "@typescript-eslint/parser": "8.56.0",
+    "@almadar/eslint-plugin": ">=2.3.0",
+    "eslint-plugin-react-compiler": "19.1.0-rc.2"
   },
   "repository": {
     "type": "git",