@almadar/ui 2.1.5 → 2.1.8

package/dist/{chunk-Y7AFNUT2.js → chunk-BS6DAANP.js}

@@ -14,8 +14,8 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
-import { Prism } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism';
+import dark from 'react-syntax-highlighter/dist/cjs/styles/prism/vsc-dark-plus';
 
 var variantStyles = {
   primary: [
@@ -808,6 +808,7 @@ var Box = React41__default.forwardRef(
     const eventBus = useEventBus();
     const handleClick = useCallback((e) => {
       if (action) {
+        e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
@@ -4094,6 +4095,7 @@ var Menu2 = ({
   className
 }) => {
   const eventBus = useEventBus();
+  const { t } = useTranslate();
   const [isOpen, setIsOpen] = useState(false);
   const [activeSubMenu, setActiveSubMenu] = useState(null);
   const [triggerRect, setTriggerRect] = useState(null);
@@ -4172,6 +4174,7 @@ var Menu2 = ({
         onClick: () => handleItemClick({ ...item, id: itemId }),
         disabled: item.disabled,
         onMouseEnter: () => hasSubMenu && setActiveSubMenu(itemId),
+        "data-testid": item.event ? `action-${item.event}` : void 0,
         className: cn(
           "w-full flex items-center justify-between gap-3 px-4 py-2 text-left",
           "text-sm transition-colors",
@@ -5904,11 +5907,11 @@ var CodeBlock = React41__default.memo(
             padding: "1rem"
           },
           children: /* @__PURE__ */ jsx(
-            Prism,
+            SyntaxHighlighter,
             {
               PreTag: "div",
               language,
-              style: vscDarkPlus,
+              style: dark,
               customStyle: {
                 backgroundColor: "transparent",
                 borderRadius: 0,
@@ -7000,6 +7003,7 @@ var StatCard = ({
         variant: "ghost",
         onClick: handleActionClick,
         className: "mt-4 text-sm font-bold text-[var(--color-foreground)] hover:underline",
+        "data-testid": action.event ? `action-${action.event}` : void 0,
         children: [
           action.label,
           " \u2192"
@@ -7208,13 +7212,14 @@ var DetailPanel = ({
   error
 }) => {
   const eventBus = useEventBus();
+  const { t } = useTranslate();
   const isFieldDefArray = (arr) => {
     if (!arr || arr.length === 0) return false;
     const first = arr[0];
     return typeof first === "string" || typeof first === "object" && first !== null && "key" in first;
   };
   const effectiveFieldNames = isFieldDefArray(propFields) ? normalizeFieldDefs(propFields) : fieldNames;
-  const handleActionClick = useCallback(
+  useCallback(
     (action, data2) => {
       if (action.navigatesTo) {
         const url = action.navigatesTo.replace(
@@ -7359,9 +7364,9 @@ var DetailPanel = ({
     return /* @__PURE__ */ jsx(
       ErrorState,
       {
-        title: "Error loading data",
-        message: error.message || "An error occurred while loading the data.",
-        onRetry: () => window.location.reload(),
+        title: t("error.loadingData"),
+        message: error.message || t("error.genericLoad"),
+        retryEvent: "RETRY",
         className
       }
     );
@@ -7424,8 +7429,10 @@ var DetailPanel = ({
           Button,
           {
             variant: action.variant || "secondary",
-            onClick: () => handleActionClick(action, normalizedData),
+            action: action.event,
+            actionPayload: { row: normalizedData },
             icon: action.icon,
+            "data-testid": action.event ? `action-${action.event}` : void 0,
             children: action.label
           },
           idx
@@ -8062,6 +8069,7 @@ var CardGrid = ({
   showTotal = true
 }) => {
   const eventBus = useEventBus();
+  const { t } = useTranslate();
   const effectiveFieldNames = normalizeFields(fields).length > 0 ? normalizeFields(fields) : fieldNames ?? normalizeFields(columns);
   const gridTemplateColumns = `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const normalizedData = Array.isArray(entity) ? entity : entity ? [entity] : [];
@@ -8070,9 +8078,6 @@ var CardGrid = ({
   const handlePageChange = (newPage) => {
     eventBus.emit("UI:PAGINATE", { page: newPage, pageSize });
   };
-  const handleCardClick = (itemData) => {
-    eventBus.emit("UI:VIEW", { row: itemData });
-  };
   const renderContent = () => {
     if (children) {
       return children;
@@ -8117,7 +8122,8 @@ var CardGrid = ({
             "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"
           ),
-          onClick: () => handleCardClick(itemData),
+          action: "VIEW",
+          actionPayload: { row: itemData },
           children: [
             cardFields.map((field) => {
               const value = getNestedValue(itemData, field);
@@ -8135,6 +8141,7 @@ var CardGrid = ({
                   variant: buttonVariant,
                   size: "sm",
                   onClick: handleActionClick(action),
+                  "data-testid": action.event ? `action-${action.event}` : void 0,
                   children: action.label
                 },
                 actionIdx
@@ -9227,11 +9234,26 @@ function UISlotComponent({
   slot,
   portal = false,
   position,
-  className
+  className,
+  children,
+  pattern,
+  sourceTrait
 }) {
   const { slots, clear } = useUISlots();
   const suspenseConfig = useContext(SuspenseConfigContext);
   const content = slots[slot];
+  if (children !== void 0) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        id: `slot-${slot}`,
+        className: cn("ui-slot", `ui-slot-${slot}`, className),
+        "data-pattern": pattern,
+        "data-source-trait": sourceTrait,
+        children
+      }
+    );
+  }
   if (!content) {
     if (!portal) {
       return /* @__PURE__ */ jsx(

package/dist/components/index.d.ts

@@ -2809,10 +2809,16 @@ interface DetailPanelProps extends EntityDisplayProps {
     position?: "left" | "right";
     /** Panel width (CSS value, e.g., '400px', '50%') */
     width?: string;
+    /** Entity ID for fetching specific entity */
+    entityId?: string;
+    /** Display fields (alias for fields) */
+    displayFields?: readonly string[];
+    /** Show actions flag */
+    showActions?: boolean;
 }
 declare const DetailPanel: React__default.FC<DetailPanelProps>;
 
-interface FormSectionProps {
+interface FormSectionProps extends EntityDisplayProps {
     /** Section title */
     title?: string;
     /** Section description */
@@ -2827,47 +2833,28 @@ interface FormSectionProps {
     card?: boolean;
     /** Grid columns for fields */
     columns?: 1 | 2 | 3;
-    className?: string;
-    /** Loading state */
-    isLoading?: boolean;
-    /** Error state */
-    error?: Error | null;
-    /** Entity name */
-    entity?: string;
+    /** Entity ID for fetching specific entity */
+    entityId?: string;
 }
 declare const FormSection$1: React__default.FC<FormSectionProps>;
 /**
  * Form layout with multiple sections
  */
-interface FormLayoutProps {
+interface FormLayoutProps extends EntityDisplayProps {
     children: React__default.ReactNode;
     /** Show section dividers */
     dividers?: boolean;
-    className?: string;
-    /** Loading state */
-    isLoading?: boolean;
-    /** Error state */
-    error?: Error | null;
-    /** Entity name */
-    entity?: string;
 }
 declare const FormLayout: React__default.FC<FormLayoutProps>;
 /**
  * Form actions bar (submit/cancel buttons)
  */
-interface FormActionsProps {
+interface FormActionsProps extends EntityDisplayProps {
     children: React__default.ReactNode;
     /** Sticky at bottom */
     sticky?: boolean;
     /** Alignment */
     align?: "left" | "right" | "between" | "center";
-    className?: string;
-    /** Loading state */
-    isLoading?: boolean;
-    /** Error state */
-    error?: Error | null;
-    /** Entity name */
-    entity?: string;
 }
 declare const FormActions: React__default.FC<FormActionsProps>;
 
@@ -7183,13 +7170,19 @@ interface UISlotComponentProps {
     isLoading?: boolean;
     error?: Error | null;
     entity?: string;
+    /** Compiled mode: render children directly instead of resolving from context */
+    children?: React__default.ReactNode;
+    /** Pattern type for data-pattern attribute (compiled mode) */
+    pattern?: string;
+    /** Source trait name for data-source-trait attribute (compiled mode) */
+    sourceTrait?: string;
 }
 /**
  * Individual slot renderer.
  *
  * Handles different slot types with appropriate wrappers.
  */
-declare function UISlotComponent({ slot, portal, position, className, }: UISlotComponentProps): React__default.ReactElement | null;
+declare function UISlotComponent({ slot, portal, position, className, children, pattern, sourceTrait, }: UISlotComponentProps): React__default.ReactElement | null;
 interface SlotContentRendererProps {
     content: SlotContent;
     onDismiss: () => void;

package/dist/components/index.js

@@ -2,8 +2,8 @@ import { DEFAULT_CONFIG, renderStateMachineToDomData, parseContentSegments } fro
 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 '../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, HealthBar, ScoreDisplay, StateIndicator, Container, EntityDisplayEvents } from '../chunk-Y7AFNUT2.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-Y7AFNUT2.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-BS6DAANP.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-BS6DAANP.js';
 import '../chunk-BTXQJGFB.js';
 import { cn, getNestedValue } from '../chunk-KKCVDUK7.js';
 export { cn } from '../chunk-KKCVDUK7.js';
@@ -14,8 +14,8 @@ export { useEmitEvent, useEventBus, useEventListener } from '../chunk-YXZM3WCF.j
 export { DEFAULT_SLOTS, useUISlotManager } from '../chunk-7NEWMNNU.js';
 export { clearEntities, getAllEntities, getByType, getEntity, getSingleton, removeEntity, spawnEntity, updateEntity, updateSingleton } from '../chunk-N7MVUW4R.js';
 import { __publicField } from '../chunk-PKBMQBKP.js';
-import * as React42 from 'react';
-import React42__default, { createContext, useState, useCallback, useMemo, useEffect, useRef, useContext } from 'react';
+import * as React from 'react';
+import React__default, { createContext, useState, useCallback, useMemo, useEffect, useRef, useContext } from 'react';
 import { ChevronDown, X, Menu, ChevronRight, ChevronLeft, ArrowUp, ArrowDown, MoreVertical, Package, Check, AlertTriangle, Trash2, List as List$1, Printer, CheckCircle, XCircle, Play, RotateCcw, Send, Wrench, Bug, ArrowRight, Pause, SkipForward, Zap, Sword, Move, Heart, Shield, AlertCircle, Circle, Clock, CheckCircle2, Image as Image$1, Upload, ZoomIn, Eraser, FileText, ZoomOut, Download, Code, WrapText, Copy, Settings, Search, Bell, LogOut, Calendar, Pencil, Eye, MoreHorizontal, Minus, Plus } from 'lucide-react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -31,12 +31,20 @@ var FormSection = ({
   columns = 1,
   className
 }) => {
-  const [collapsed, setCollapsed] = React42__default.useState(defaultCollapsed);
+  const [collapsed, setCollapsed] = React__default.useState(defaultCollapsed);
+  const { t } = useTranslate();
+  const eventBus = useEventBus();
   const gridClass = {
     1: "grid-cols-1",
     2: "grid-cols-1 md:grid-cols-2",
     3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
   }[columns];
+  React__default.useCallback(() => {
+    if (collapsible) {
+      setCollapsed((prev) => !prev);
+      eventBus.emit("UI:TOGGLE_COLLAPSE", { collapsed: !collapsed });
+    }
+  }, [collapsible, collapsed, eventBus]);
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     (title || description) && /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "mb-4", children: [
       title && /* @__PURE__ */ jsxs(
@@ -45,7 +53,7 @@ var FormSection = ({
           justify: "between",
           align: "center",
           className: cn(collapsible && "cursor-pointer"),
-          onClick: () => collapsible && setCollapsed(!collapsed),
+          action: collapsible ? "TOGGLE_COLLAPSE" : void 0,
           children: [
             /* @__PURE__ */ jsx(Typography, { variant: "h3", weight: "semibold", children: title }),
             collapsible && /* @__PURE__ */ jsx(
@@ -53,7 +61,7 @@ var FormSection = ({
               {
                 variant: "ghost",
                 size: "sm",
-                onClick: () => setCollapsed(!collapsed),
+                action: "TOGGLE_COLLAPSE",
                 children: /* @__PURE__ */ jsx(
                   Icon,
                   {
@@ -1028,7 +1036,7 @@ var List = ({
     if (entity && typeof entity === "object" && "id" in entity) return [entity];
     return [];
   }, [entity]);
-  const getItemActions = React42__default.useCallback(
+  const getItemActions = React__default.useCallback(
     (item) => {
       if (!itemActions) return [];
       if (typeof itemActions === "function") {
@@ -1037,6 +1045,7 @@ var List = ({
       return itemActions.map((action, idx) => ({
         id: `${item.id}-action-${idx}`,
         label: action.label,
+        event: action.event,
         onClick: () => {
           if (action.navigatesTo) {
             const url = action.navigatesTo.replace(
@@ -1117,9 +1126,6 @@ var List = ({
       eventBus.emit(`UI:${EntityDisplayEvents.DESELECT}`, { ids: newIds });
     }
   };
-  const handleRowClick = (item) => {
-    eventBus.emit("UI:VIEW", { row: item });
-  };
   const defaultRenderItem = (item, index, isLast) => {
     const isSelected = selectedIds.map(String).includes(item.id);
     const actions = normalizedItemActions ? normalizedItemActions(item) : [];
@@ -1130,8 +1136,9 @@ var List = ({
     const editAction = actions.find(
       (a) => a.label.toLowerCase().includes("edit")
     );
-    const hasExplicitClick = !!(item.onClick || viewAction?.onClick);
-    const handleClick = item.onClick || viewAction?.onClick || (() => handleRowClick(item));
+    const hasExplicitClick = !!(viewAction?.event || item.onClick);
+    const rowAction = viewAction?.event ?? "VIEW";
+    const rowActionPayload = { row: item };
     const primaryField = effectiveFieldNames?.[0];
     const statusField = effectiveFieldNames?.find(
       (f) => f.toLowerCase().includes("status")
@@ -1166,20 +1173,28 @@ var List = ({
             isSelected && "bg-[var(--color-primary)]/10 shadow-inner",
             item.disabled && "opacity-50 cursor-not-allowed grayscale"
           ),
-          onClick: handleClick,
+          action: rowAction,
+          actionPayload: rowActionPayload,
           children: [
-            selectable && /* @__PURE__ */ jsx(Box, { className: "flex-shrink-0 pt-0.5", children: /* @__PURE__ */ jsx(
-              Checkbox,
+            selectable && /* @__PURE__ */ jsx(
+              Box,
               {
-                checked: isSelected,
-                onChange: (e) => handleSelect(item.id, e.target.checked),
-                onClick: (e) => e.stopPropagation(),
-                className: cn(
-                  "transition-transform active:scale-95",
-                  isSelected ? "border-[var(--color-primary)] bg-[var(--color-primary)]" : "border-[var(--color-border)]"
+                className: "flex-shrink-0 pt-0.5",
+                action: isSelected ? EntityDisplayEvents.DESELECT : EntityDisplayEvents.SELECT,
+                actionPayload: { ids: isSelected ? selectedIds.filter((sid) => String(sid) !== item.id) : [...selectedIds.map(String), item.id] },
+                children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: isSelected,
+                    onChange: (e) => handleSelect(item.id, e.target.checked),
+                    className: cn(
+                      "transition-transform active:scale-95",
+                      isSelected ? "border-[var(--color-primary)] bg-[var(--color-primary)]" : "border-[var(--color-border)]"
+                    )
+                  }
                 )
               }
-            ) }),
+            ),
             /* @__PURE__ */ jsxs(Box, { className: "flex-1 min-w-0 space-y-2.5", children: [
               /* @__PURE__ */ jsxs(HStack, { className: "flex items-center gap-4", children: [
                 /* @__PURE__ */ jsx(
@@ -1262,10 +1277,7 @@ var List = ({
                     Button,
                     {
                       variant: "ghost",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        editAction.onClick?.();
-                      },
+                      action: editAction.event,
                       className: cn(
                         "p-2 rounded-[var(--radius-lg)] transition-all duration-200",
                         "hover:bg-[var(--color-primary)]/10 hover:text-[var(--color-primary)]",
@@ -1273,6 +1285,7 @@ var List = ({
                         "active:scale-95"
                       ),
                       title: editAction.label,
+                      "data-testid": editAction.event ? `action-${editAction.event}` : void 0,
                       children: /* @__PURE__ */ jsx(Pencil, { className: "w-4 h-4" })
                     }
                   ),
@@ -1280,10 +1293,7 @@ var List = ({
                     Button,
                     {
                       variant: "ghost",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        viewAction.onClick?.();
-                      },
+                      action: viewAction.event,
                       className: cn(
                         "p-2 rounded-[var(--radius-lg)] transition-all duration-200",
                         "hover:bg-[var(--color-muted)] hover:text-[var(--color-foreground)]",
@@ -1291,6 +1301,7 @@ var List = ({
                         "active:scale-95"
                       ),
                       title: viewAction.label,
+                      "data-testid": viewAction.event ? `action-${viewAction.event}` : void 0,
                       children: /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4" })
                     }
                   ),
@@ -1530,7 +1541,7 @@ var WizardContainer = ({
           const isCompleted = index < currentStep;
           const stepKey = step.id ?? step.tabId ?? `step-${index}`;
           const stepTitle = step.title ?? step.name ?? `Step ${index + 1}`;
-          return /* @__PURE__ */ jsxs(React42__default.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -2754,7 +2765,7 @@ var StateMachineView = ({
             style: { top: title ? 30 : 0 },
             children: [
               entity && /* @__PURE__ */ jsx(EntityBox, { entity, config }),
-              states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React42__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
+              states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
                 StateNode,
                 {
                   state,
@@ -6769,7 +6780,7 @@ function GameMenu({
   } catch {
   }
   const eventBus = eventBusProp || eventBusFromHook;
-  const handleOptionClick = React42.useCallback(
+  const handleOptionClick = React.useCallback(
     (option) => {
       if (option.event && eventBus) {
         eventBus.emit(`UI:${option.event}`, { option });
@@ -6892,7 +6903,7 @@ function GameOverScreen({
   } catch {
   }
   const eventBus = eventBusProp || eventBusFromHook;
-  const handleActionClick = React42.useCallback(
+  const handleActionClick = React.useCallback(
     (action) => {
       if (action.event && eventBus) {
         eventBus.emit(`UI:${action.event}`, { action });
@@ -8159,7 +8170,7 @@ function LinearView({
     /* @__PURE__ */ jsx(HStack, { className: "flex-wrap items-center", gap: "xs", children: trait.states.map((state, i) => {
       const isDone = i < currentIdx;
       const isCurrent = i === currentIdx;
-      return /* @__PURE__ */ jsxs(React42__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -8813,7 +8824,7 @@ function SequenceBar({
     onSlotRemove(index);
   }, [onSlotRemove, playing]);
   const paddedSlots = Array.from({ length: maxSlots }, (_, i) => slots[i]);
-  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React42__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx(
       Typography,
       {
@@ -11113,7 +11124,7 @@ function generateCombatMessage(event) {
   return event.message;
 }
 function extractTitle(children) {
-  if (!React42__default.isValidElement(children)) return void 0;
+  if (!React__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -11148,7 +11159,7 @@ var ModalSlot = ({
 };
 ModalSlot.displayName = "ModalSlot";
 function extractTitle2(children) {
-  if (!React42__default.isValidElement(children)) return void 0;
+  if (!React__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -11185,7 +11196,7 @@ var DrawerSlot = ({
 };
 DrawerSlot.displayName = "DrawerSlot";
 function extractToastProps(children) {
-  if (!React42__default.isValidElement(children)) {
+  if (!React__default.isValidElement(children)) {
     if (typeof children === "string") {
       return { message: children };
     }
@@ -11216,7 +11227,7 @@ var ToastSlot = ({
     eventBus.emit("UI:CLOSE");
   };
   if (!isVisible) return null;
-  const isCustomContent = React42__default.isValidElement(children) && !message;
+  const isCustomContent = React__default.isValidElement(children) && !message;
   return /* @__PURE__ */ jsx(Box, { className: "fixed bottom-4 right-4 z-50", children: isCustomContent ? children : /* @__PURE__ */ jsx(
     Toast,
     {
@@ -11721,7 +11732,7 @@ var Timeline = ({
 }) => {
   const { t } = useTranslate();
   const entityData = Array.isArray(entity) ? entity : [];
-  const items = React42__default.useMemo(() => {
+  const items = React__default.useMemo(() => {
     if (propItems) return propItems;
     if (entityData.length === 0) return [];
     return entityData.map((record, idx) => {
@@ -11862,7 +11873,7 @@ var MediaGallery = ({
     [selectable, selectedItems, selectionEvent, eventBus]
   );
   const entityData = Array.isArray(entity) ? entity : [];
-  const items = React42__default.useMemo(() => {
+  const items = React__default.useMemo(() => {
     if (propItems) return propItems;
     if (entityData.length === 0) return [];
     return entityData.map((record, idx) => ({

package/dist/providers/index.js

@@ -1,4 +1,4 @@
-import { SuspenseConfigProvider } from '../chunk-Y7AFNUT2.js';
+import { SuspenseConfigProvider } from '../chunk-BS6DAANP.js';
 import { ThemeProvider } from '../chunk-BTXQJGFB.js';
 import { recordTransition, registerCheck, bindEventBus, bindTraitStateGetter } from '../chunk-45CTDYBT.js';
 import '../chunk-KKCVDUK7.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "2.1.5",
+  "version": "2.1.8",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",
@@ -80,7 +80,7 @@
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "rehype-katex": "^7.0.0",
-    "react-syntax-highlighter": "^15.6.1"
+    "react-syntax-highlighter": "^16.1.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -117,6 +117,7 @@
     "vitest": "^1.4.0",
     "@testing-library/react": "^14.2.0",
     "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/user-event": "^14.5.0",
     "@vitest/ui": "^1.4.0",
     "jsdom": "^24.0.0",
     "@storybook/addon-docs": "^10.2.6",