@almadar/ui 5.8.0 → 5.9.0

package/dist/components/index.js

@@ -28234,6 +28234,311 @@ var init_Lightbox = __esm({
     Lightbox.displayName = "Lightbox";
   }
 });
+function columnLabel(col) {
+  return col.header ?? col.label ?? col.key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function statusVariant4(value) {
+  const v = value.toLowerCase();
+  if (["active", "completed", "done", "approved", "published", "resolved", "open", "online", "ok"].includes(v)) return "success";
+  if (["pending", "in_progress", "in-progress", "review", "draft", "processing", "warn", "warning"].includes(v)) return "warning";
+  if (["inactive", "deleted", "rejected", "failed", "error", "blocked", "closed", "offline"].includes(v)) return "error";
+  if (["new", "created", "scheduled", "queued", "info"].includes(v)) return "info";
+  return "default";
+}
+function formatCell(value, format) {
+  if (value === void 0 || value === null) return "";
+  switch (format) {
+    case "date": {
+      const d = new Date(String(value));
+      return isNaN(d.getTime()) ? String(value) : d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+    }
+    case "currency":
+      return typeof value === "number" ? `$${value.toFixed(2)}` : String(value);
+    case "number":
+      return typeof value === "number" ? value.toLocaleString() : String(value);
+    case "percent":
+      return typeof value === "number" ? `${Math.round(value)}%` : String(value);
+    case "boolean":
+      return value ? "Yes" : "No";
+    default:
+      return String(value);
+  }
+}
+function groupData2(items, field) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const key = String(getNestedValue(item, field) ?? "");
+    const group = groups.get(key);
+    if (group) group.push(item);
+    else groups.set(key, [item]);
+  }
+  return Array.from(groups.entries()).map(([label, groupItems]) => ({ label, items: groupItems }));
+}
+function TableView({
+  entity,
+  columns,
+  fields,
+  itemActions,
+  selectable = false,
+  selectEvent,
+  selectedIds,
+  sortEvent,
+  sortColumn,
+  sortDirection,
+  className,
+  emptyMessage,
+  isLoading = false,
+  error = null,
+  groupBy,
+  pageSize = 0,
+  children,
+  renderItem: _schemaRenderItem,
+  look = "dense",
+  // DnD props consumed by useDataDnd.
+  dragGroup,
+  accepts,
+  sortable,
+  dropEvent,
+  reorderEvent,
+  positionEvent,
+  dndItemIdField,
+  dndRoot
+}) {
+  const eventBus = useEventBus();
+  const { t } = useTranslate();
+  const [visibleCount, setVisibleCount] = React80__default.useState(pageSize > 0 ? pageSize : Infinity);
+  const [localSelected, setLocalSelected] = React80__default.useState(/* @__PURE__ */ new Set());
+  const colDefs = columns ?? fields ?? [];
+  const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
+  const dnd = useDataDnd({
+    items: allDataRaw,
+    layout: "list",
+    dragGroup,
+    accepts,
+    sortable,
+    dropEvent,
+    reorderEvent,
+    positionEvent,
+    dndItemIdField,
+    dndRoot
+  });
+  const ordered = dnd.orderedItems;
+  const data = pageSize > 0 ? ordered.slice(0, visibleCount) : ordered;
+  const hasMore = pageSize > 0 && visibleCount < ordered.length;
+  const hasRenderProp = typeof children === "function";
+  const idField = dndItemIdField ?? "id";
+  const selected = selectedIds ? new Set(selectedIds) : localSelected;
+  const emitSelection = (next) => {
+    if (!selectedIds) setLocalSelected(next);
+    if (selectEvent) {
+      const payload = { selectedIds: Array.from(next) };
+      eventBus.emit(`UI:${selectEvent}`, payload);
+    }
+  };
+  const allSelected = selectable && data.length > 0 && data.every((r, i) => selected.has(String(r[idField] ?? i)));
+  const toggleAll = () => {
+    if (allSelected) emitSelection(/* @__PURE__ */ new Set());
+    else emitSelection(new Set(data.map((r, i) => String(r[idField] ?? i))));
+  };
+  const toggleRow = (id) => {
+    const next = new Set(selected);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    emitSelection(next);
+  };
+  const handleSort = (col) => {
+    if (!col.sortable || !sortEvent) return;
+    const dir = sortColumn === (col.field ?? col.key) && sortDirection === "asc" ? "desc" : "asc";
+    eventBus.emit(`UI:${sortEvent}`, { column: col.field ?? col.key, direction: dir });
+  };
+  const handleActionClick = (action, row) => (e) => {
+    e.stopPropagation();
+    const payload = {
+      id: row.id,
+      row
+    };
+    eventBus.emit(`UI:${action.event}`, payload);
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading\u2026" }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "error", children: error.message }) });
+  }
+  if (data.length === 0) {
+    const emptyNode = /* @__PURE__ */ jsx(Box, { className: "text-center py-12", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: emptyMessage || t("empty.noItems") || "No records" }) });
+    return dnd.enabled ? /* @__PURE__ */ jsx(Fragment, { children: dnd.wrapContainer(emptyNode) }) : emptyNode;
+  }
+  const lk = LOOKS[look];
+  const header = /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "row",
+      className: cn(
+        "flex items-center gap-3 sticky top-0 z-10",
+        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-table-border)]",
+        "text-[var(--color-text-muted)] uppercase text-xs font-semibold tracking-wide",
+        lk.headPad
+      ),
+      children: [
+        selectable && /* @__PURE__ */ jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsx(Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
+        colDefs.map((col) => {
+          const active = sortColumn === (col.field ?? col.key);
+          return /* @__PURE__ */ jsxs(
+            Box,
+            {
+              role: "columnheader",
+              onClick: () => handleSort(col),
+              className: cn(
+                "flex items-center gap-1 min-w-0",
+                col.width ?? "flex-1",
+                alignClass[col.align ?? "left"],
+                col.sortable && sortEvent && "cursor-pointer select-none hover:text-foreground"
+              ),
+              children: [
+                col.icon && /* @__PURE__ */ jsx(Icon, { name: col.icon, size: "xs" }),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: columnLabel(col) }),
+                col.sortable && sortEvent && /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: active ? sortDirection === "asc" ? "chevron-up" : "chevron-down" : "chevrons-up-down",
+                    size: "xs",
+                    className: cn("flex-shrink-0", active ? "text-foreground" : "opacity-40")
+                  }
+                )
+              ]
+            },
+            col.key
+          );
+        }),
+        itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(Box, { className: "w-px flex-shrink-0", "aria-hidden": true })
+      ]
+    }
+  );
+  const renderRow = (row, index) => {
+    const id = String(row[idField] ?? index);
+    const rowInner = /* @__PURE__ */ jsxs(
+      Box,
+      {
+        role: "row",
+        "data-entity-row": true,
+        "data-entity-id": id,
+        className: cn(
+          "group flex items-center gap-3 transition-colors duration-fast",
+          lk.rowPad,
+          lk.divider && "border-b border-[var(--color-table-border)]",
+          lk.striped && index % 2 === 1 && "bg-[var(--color-surface-subtle)]",
+          "hover:bg-[var(--color-surface-subtle)]",
+          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-table-border)] [&>*:last-child]:border-r-0"
+        ),
+        children: [
+          selectable && /* @__PURE__ */ jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: selected.has(id),
+              onChange: () => toggleRow(id),
+              "aria-label": `Select row ${id}`
+            }
+          ) }),
+          hasRenderProp ? /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0", children: children(row, index) }) : colDefs.map((col) => {
+            const raw = getNestedValue(row, col.field ?? col.key);
+            const cellBase = cn(
+              "flex items-center min-w-0",
+              col.width ?? "flex-1",
+              alignClass[col.align ?? "left"],
+              weightClass[col.weight ?? "normal"],
+              col.className
+            );
+            if (col.format === "badge" && raw != null && raw !== "") {
+              return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx(Badge, { variant: statusVariant4(String(raw)), size: "sm", children: String(raw) }) }, col.key);
+            }
+            return /* @__PURE__ */ jsx(Box, { role: "cell", className: cn(cellBase, "truncate block"), children: formatCell(raw, col.format) }, col.key);
+          }),
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: itemActions.map((action, i) => /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: action.variant ?? "ghost",
+              size: "sm",
+              onClick: handleActionClick(action, row),
+              "data-testid": `action-${action.event}`,
+              "data-row-id": String(row.id),
+              className: cn(action.variant === "danger" && "text-error hover:bg-error/10"),
+              children: [
+                action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                action.label
+              ]
+            },
+            i
+          )) })
+        ]
+      }
+    );
+    return dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsx(React80__default.Fragment, { children: rowInner }, id);
+  };
+  const items = data.map((row) => row);
+  const groups = groupBy ? groupData2(items, groupBy) : [{ label: "", items }];
+  let runningIndex = 0;
+  const body = /* @__PURE__ */ jsx(Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxs(React80__default.Fragment, { children: [
+    group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: gi > 0 ? "mt-3" : "mt-0" }),
+    group.items.map((row) => renderRow(row, runningIndex++))
+  ] }, gi)) });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "table",
+      className: cn("w-full text-sm", className),
+      children: [
+        header,
+        dnd.wrapContainer(body),
+        hasMore && /* @__PURE__ */ jsx(Box, { className: "flex justify-center py-3", children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setVisibleCount((p2) => p2 + (pageSize || 5)), children: [
+          /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "xs", className: "mr-1" }),
+          t("common.showMore"),
+          " (",
+          ordered.length - visibleCount,
+          " remaining)"
+        ] }) })
+      ]
+    }
+  );
+}
+var alignClass, weightClass, LOOKS;
+var init_TableView = __esm({
+  "components/molecules/TableView.tsx"() {
+    "use client";
+    init_cn();
+    init_getNestedValue();
+    init_useEventBus();
+    init_useTranslate();
+    init_Box();
+    init_Stack();
+    init_Typography();
+    init_Badge();
+    init_Button();
+    init_Icon();
+    init_Checkbox();
+    init_Divider();
+    init_useDataDnd();
+    createLogger("almadar:ui:table-view");
+    alignClass = {
+      left: "justify-start text-left",
+      center: "justify-center text-center",
+      right: "justify-end text-right"
+    };
+    weightClass = {
+      normal: "",
+      medium: "font-medium",
+      semibold: "font-semibold"
+    };
+    LOOKS = {
+      dense: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: false, divider: true },
+      spacious: { rowPad: "px-5 py-4", headPad: "px-5 py-3", striped: false, divider: true },
+      striped: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: true, divider: false },
+      borderless: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: false, divider: false },
+      bordered: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: false, divider: true }
+    };
+    TableView.displayName = "TableView";
+  }
+});
 function formatNumber(value, format) {
   if (value == null) return "0";
   const v = typeof value === "number" ? value : value;
@@ -33924,6 +34229,7 @@ var init_molecules = __esm({
     init_Lightbox();
     init_DataGrid();
     init_DataList();
+    init_TableView();
     init_StatDisplay();
     init_Meter();
     init_SwipeableRow();
@@ -41386,7 +41692,7 @@ function VerifyModePanel({
     }
     prevCountRef.current = transitions.length;
   }, [transitions.length, expanded]);
-  const hudBottom = typeof document !== "undefined" ? document.getElementById("runtime-debugger-portal") ?? document.getElementById("slot-hud-bottom") : null;
+  const hudBottom = typeof document !== "undefined" ? document.getElementById("runtime-debugger-portal") : null;
   const panel = /* @__PURE__ */ jsxs(
     "div",
     {
@@ -45925,6 +46231,7 @@ var init_component_registry_generated = __esm({
     init_Switch();
     init_TabbedContainer();
     init_Table();
+    init_TableView();
     init_Tabs();
     init_TagCloud();
     init_TagInput();
@@ -46242,6 +46549,7 @@ var init_component_registry_generated = __esm({
       "Switch": Switch,
       "TabbedContainer": TabbedContainer,
       "Table": Table,
+      "TableView": TableView,
       "Tabs": Tabs,
       "TagCloud": TagCloud,
       "TagInput": TagInput,
@@ -47358,7 +47666,7 @@ var FormActions = ({
   align = "right",
   className
 }) => {
-  const alignClass = {
+  const alignClass2 = {
     left: "justify-start",
     right: "justify-end",
     between: "justify-between",
@@ -47371,7 +47679,7 @@ var FormActions = ({
       align: "center",
       className: cn(
         "pt-6 border-t border-border",
-        alignClass,
+        alignClass2,
         sticky && "sticky bottom-0 bg-card py-4 -mx-6 px-6 shadow-[0_-4px_6px_-1px_rgb(0,0,0,0.05)]",
         className
       ),
@@ -50153,4 +50461,4 @@ function useGitHubBranches(owner, repo, enabled = true) {
   });
 }
 
-export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, CodeBlock, CodeExample, CodeView, CodeViewer, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocCodeBlock, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FeatureRenderer2 as FeatureRenderer, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, HStack, Header, Heading, HealthBar, HealthPanel, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NotifyListener, NumberStepper, ObjectRulePanel, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, Table, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, clearEntities, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createTranslate, createUnitAnimationState, drawSprite, generateCombatMessage, getAllEntities, getByType, getCurrentFrame, getEntity, getSingleton, getTileDimensions, inferDirection, isoToScreen, mapBookData, parseQueryBinding, pendulum, projectileMotion, removeEntity, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, spawnEntity, springOscillator, tickAnimationState, transitionAnimation, updateEntity, updateSingleton, useAgentChat, useAuthContext, useBattleState, useCamera, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEntities, useEntitiesByType, useEntity as useEntityById, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGameAudioContext, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useInput, useLongPress, useOrbitalHistory, usePhysics, usePhysics2D, usePinchZoom, usePlayer, usePreview, usePullToRefresh, useQuerySingleton, useSingletonEntity, useSpriteAnimations, useSwipeGesture, useTraitListens, useTranslate, useUIEvents, useUISlotManager, useValidation };
+export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, CodeBlock, CodeExample, CodeView, CodeViewer, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocCodeBlock, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FeatureRenderer2 as FeatureRenderer, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, HStack, Header, Heading, HealthBar, HealthPanel, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NotifyListener, NumberStepper, ObjectRulePanel, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, Table, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, clearEntities, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createTranslate, createUnitAnimationState, drawSprite, generateCombatMessage, getAllEntities, getByType, getCurrentFrame, getEntity, getSingleton, getTileDimensions, inferDirection, isoToScreen, mapBookData, parseQueryBinding, pendulum, projectileMotion, removeEntity, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, spawnEntity, springOscillator, tickAnimationState, transitionAnimation, updateEntity, updateSingleton, useAgentChat, useAuthContext, useBattleState, useCamera, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEntities, useEntitiesByType, useEntity as useEntityById, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGameAudioContext, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useInput, useLongPress, useOrbitalHistory, usePhysics, usePhysics2D, usePinchZoom, usePlayer, usePreview, usePullToRefresh, useQuerySingleton, useSingletonEntity, useSpriteAnimations, useSwipeGesture, useTraitListens, useTranslate, useUIEvents, useUISlotManager, useValidation };

package/dist/components/molecules/TableView.d.ts

@@ -0,0 +1,105 @@
+/**
+ * TableView Molecule
+ *
+ * A simplified, schema-driven column table for iterating over entity data.
+ * The table-shaped sibling of DataList (rows) and DataGrid (cards): same
+ * `entity` + `columns`/`fields` + `itemActions` contract and the same
+ * `useDataDnd` drag-to-reorder machinery, rendered as aligned columns with a
+ * header. All complexity is opt-in: selection, drag-reorder, and per-column
+ * sorting are each enabled by their own props and emit via the event bus.
+ *
+ * Uses atoms only internally: Box, VStack, HStack, Typography, Badge, Button,
+ * Icon, Checkbox, Divider.
+ */
+import React from 'react';
+import type { EntityRow, EventKey } from '@almadar/core';
+import { type DataDndProps } from './useDataDnd';
+export interface TableViewColumn {
+    /** Stable column key (React key + default value lookup). */
+    key: string;
+    /** Entity field to read (dot-notation ok). Defaults to `key`. */
+    field?: string;
+    /** Header cell text. Falls back to `label`, then a humanized `key`. */
+    header?: string;
+    /** Accessibility / fallback label. */
+    label?: string;
+    /** Width utility class applied to header + body cells (e.g. "w-28", "flex-1", "min-w-[10rem]"). */
+    width?: string;
+    /** Horizontal alignment of the column's cells. */
+    align?: 'left' | 'center' | 'right';
+    /** Extra cell classes (e.g. "font-mono tabular-nums truncate"). */
+    className?: string;
+    /** Render the cell value with the given font weight. */
+    weight?: 'normal' | 'medium' | 'semibold';
+    /** Value formatting hint. `badge` renders a status Badge. */
+    format?: 'badge' | 'date' | 'currency' | 'number' | 'percent' | 'boolean';
+    /** Lucide icon shown before the header label. */
+    icon?: string;
+    /** Allow click-to-sort on this column's header (emits `sortEvent`). */
+    sortable?: boolean;
+}
+export interface TableViewItemAction {
+    /** Button label. */
+    label: string;
+    /** Event name to emit (dispatched as UI:{event} with { id, row }). */
+    event: EventKey;
+    /** Lucide icon name. */
+    icon?: string;
+    /** Button variant. */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+}
+export interface TableViewProps<T extends EntityRow = EntityRow> extends DataDndProps {
+    /** Schema entity data — single record or collection. */
+    entity: T | readonly T[];
+    /** Column definitions. The compiler emits `columns`; `fields` is the alias. */
+    columns?: readonly TableViewColumn[];
+    /** Alias for `columns`. */
+    fields?: readonly TableViewColumn[];
+    /** Per-row action buttons (trailing column). */
+    itemActions?: readonly TableViewItemAction[];
+    /** Render a leading checkbox column. Selection changes emit `selectEvent`. */
+    selectable?: boolean;
+    /** Event emitted on selection change: UI:{selectEvent} with { ids, rows }. */
+    selectEvent?: EventKey;
+    /** Currently-selected ids (controlled). Falls back to local state when omitted. */
+    selectedIds?: readonly string[];
+    /** Event emitted on sortable-header click: UI:{sortEvent} with { column, direction }. */
+    sortEvent?: EventKey;
+    /** Current sort column (display hint for the active header arrow). */
+    sortColumn?: string;
+    /** Current sort direction (display hint). */
+    sortDirection?: 'asc' | 'desc';
+    /** Additional CSS classes applied to the table root. */
+    className?: string;
+    /** Message shown when there are no rows. */
+    emptyMessage?: string;
+    /** Loading state. */
+    isLoading?: boolean;
+    /** Error state. */
+    error?: Error | null;
+    /** Group rows under section headers by a field value. */
+    groupBy?: string;
+    /** Max rows before a "Show More" button. Defaults to 0 (show all). */
+    pageSize?: number;
+    /**
+     * Custom per-row render. When provided, the whole row content is delegated
+     * to this function (columns are ignored for the body; the header still
+     * renders). Mirrors DataList's children render prop.
+     */
+    children?: (item: T, index: number) => React.ReactNode;
+    /**
+     * Per-row render function (schema alias). In .orb: ["fn","item",{...}].
+     * The compiler converts this to the children render prop.
+     * @deprecated Use children in React code; exists for pattern registry sync.
+     */
+    renderItem?: (item: T, index: number) => React.ReactNode;
+    /**
+     * Layer 2 visual treatment — mirrors the data-list / entity-table look enum
+     * so authors share one knob name across row renderers.
+     */
+    look?: 'dense' | 'spacious' | 'striped' | 'borderless' | 'bordered';
+}
+export declare function TableView<T extends EntityRow = EntityRow>({ entity, columns, fields, itemActions, selectable, selectEvent, selectedIds, sortEvent, sortColumn, sortDirection, className, emptyMessage, isLoading, error, groupBy, pageSize, children, renderItem: _schemaRenderItem, look, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, }: TableViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace TableView {
+    var displayName: string;
+}

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

@@ -53,6 +53,7 @@ export { UploadDropZone, type UploadDropZoneProps } from './UploadDropZone';
 export { Lightbox, type LightboxProps, type LightboxImage } from './Lightbox';
 export { DataGrid, type DataGridProps, type DataGridField, type DataGridItemAction } from './DataGrid';
 export { DataList, type DataListProps, type DataListField, type DataListItemAction } from './DataList';
+export { TableView, type TableViewProps, type TableViewColumn } from './TableView';
 export { StatDisplay, type StatDisplayProps } from './StatDisplay';
 export { Meter, type MeterProps, type MeterVariant, type MeterThreshold, type MeterAction } from './Meter';
 export { SwipeableRow, type SwipeableRowProps, type SwipeAction } from './SwipeableRow';

package/dist/docs/index.d.cts

@@ -16,6 +16,8 @@ type BoxBg = "transparent" | "primary" | "secondary" | "muted" | "accent" | "sur
 type BoxRounded = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 type BoxShadow = "none" | "sm" | "md" | "lg" | "xl";
 interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     /** Padding on all sides */
     padding?: BoxPadding;
     /** Horizontal padding (overrides padding for x-axis) */
@@ -169,6 +171,8 @@ declare const Typography: React.FC<TypographyProps>;
 type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default";
 type ButtonSize = "sm" | "md" | "lg";
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     variant?: ButtonVariant;
     size?: ButtonSize;
     isLoading?: boolean;
@@ -234,6 +238,8 @@ type CardShadow = "none" | "sm" | "md" | "lg";
  */
 type CardLook = "elevated" | "flat-bordered" | "borderless-divider" | "ticket" | "invoice" | "chip" | "tile-image-first";
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     variant?: "default" | "bordered" | "elevated" | "interactive";
     padding?: "none" | "sm" | "md" | "lg";
     /** Card title - renders in header if provided */
@@ -284,6 +290,8 @@ interface SelectOption {
     label: string;
 }
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     /** Placeholder text */
     placeholder?: string;
     /** Current value */

package/dist/marketing/index.d.cts

@@ -15,6 +15,8 @@ type BoxBg = "transparent" | "primary" | "secondary" | "muted" | "accent" | "sur
 type BoxRounded = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 type BoxShadow = "none" | "sm" | "md" | "lg" | "xl";
 interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     /** Padding on all sides */
     padding?: BoxPadding;
     /** Horizontal padding (overrides padding for x-axis) */
@@ -168,6 +170,8 @@ declare const Typography: React.FC<TypographyProps>;
 type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default";
 type ButtonSize = "sm" | "md" | "lg";
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     variant?: ButtonVariant;
     size?: ButtonSize;
     isLoading?: boolean;
@@ -193,6 +197,8 @@ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAtt
 type BadgeVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "error" | "info" | "neutral";
 type BadgeSize = "sm" | "md" | "lg";
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     variant?: BadgeVariant;
     size?: BadgeSize;
     /** Numeric count or amount to display in badge */
@@ -256,6 +262,8 @@ type CardShadow = "none" | "sm" | "md" | "lg";
  */
 type CardLook = "elevated" | "flat-bordered" | "borderless-divider" | "ticket" | "invoice" | "chip" | "tile-image-first";
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     variant?: "default" | "bordered" | "elevated" | "interactive";
     padding?: "none" | "sm" | "md" | "lg";
     /** Card title - renders in header if provided */
@@ -859,6 +867,8 @@ declare const AnimatedCounter: React.FC<AnimatedCounterProps>;
 type RevealTrigger = 'scroll' | 'hover' | 'manual';
 type RevealAnimation = 'fade-up' | 'fade-down' | 'fade-in' | 'fade-left' | 'fade-right' | 'scale' | 'scale-up' | 'none';
 interface AnimatedRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     /** What triggers the animation */
     trigger?: RevealTrigger;
     /** Built-in animation preset */
@@ -882,6 +892,8 @@ declare const AnimatedReveal: React.ForwardRefExoticComponent<AnimatedRevealProp
 
 type GraphicAnimation = 'draw' | 'fill' | 'pulse' | 'morph';
 interface AnimatedGraphicProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     /** URL to an SVG file. Fetched and inlined to enable stroke/fill animations. */
     src?: string;
     /** Inline SVG string. Takes precedence over src if both provided. */