@almadar/ui 5.8.0 → 5.9.0

package/dist/avl/index.cjs

@@ -32824,6 +32824,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] = React98__namespace.default.useState(pageSize > 0 ? pageSize : Infinity);
+  const [localSelected, setLocalSelected] = React98__namespace.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((r2, i) => selected.has(String(r2[idField] ?? i)));
+  const toggleAll = () => {
+    if (allSelected) emitSelection(/* @__PURE__ */ new Set());
+    else emitSelection(new Set(data.map((r2, i) => String(r2[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__ */ jsxRuntime.jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading\u2026" }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "error", children: error.message }) });
+  }
+  if (data.length === 0) {
+    const emptyNode = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "text-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: emptyMessage || t("empty.noItems") || "No records" }) });
+    return dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: dnd.wrapContainer(emptyNode) }) : emptyNode;
+  }
+  const lk = LOOKS[look];
+  const header = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
+        colDefs.map((col) => {
+          const active = sortColumn === (col.field ?? col.key);
+          return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { name: col.icon, size: "xs" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: columnLabel(col) }),
+                col.sortable && sortEvent && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { className: "w-px flex-shrink-0", "aria-hidden": true })
+      ]
+    }
+  );
+  const renderRow = (row, index) => {
+    const id = String(row[idField] ?? index);
+    const rowInner = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Checkbox,
+            {
+              checked: selected.has(id),
+              onChange: () => toggleRow(id),
+              "aria-label": `Select row ${id}`
+            }
+          ) }),
+          hasRenderProp ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant4(String(raw)), size: "sm", children: String(raw) }) }, col.key);
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cn(cellBase, "truncate block"), children: formatCell(raw, col.format) }, col.key);
+          }),
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: itemActions.map((action, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                action.label
+              ]
+            },
+            i
+          )) })
+        ]
+      }
+    );
+    return dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsxRuntime.jsx(React98__namespace.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__ */ jsxRuntime.jsx(Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React98__namespace.default.Fragment, { children: [
+    group.label && /* @__PURE__ */ jsxRuntime.jsx(Divider, { label: group.label, className: gi > 0 ? "mt-3" : "mt-0" }),
+    group.items.map((row) => renderRow(row, runningIndex++))
+  ] }, gi)) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Box,
+    {
+      role: "table",
+      className: cn("w-full text-sm", className),
+      children: [
+        header,
+        dnd.wrapContainer(body),
+        hasMore && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex justify-center py-3", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setVisibleCount((p2) => p2 + (pageSize || 5)), children: [
+          /* @__PURE__ */ jsxRuntime.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();
+    logger.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;
@@ -45258,7 +45563,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__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -54986,6 +55291,7 @@ var init_component_registry_generated = __esm({
     init_Switch();
     init_TabbedContainer();
     init_Table();
+    init_TableView();
     init_Tabs();
     init_TagCloud();
     init_TagInput();
@@ -55303,6 +55609,7 @@ var init_component_registry_generated = __esm({
       "Switch": Switch,
       "TabbedContainer": TabbedContainer,
       "Table": Table,
+      "TableView": TableView,
       "Tabs": Tabs,
       "TagCloud": TagCloud,
       "TagInput": TagInput,

package/dist/avl/index.js

@@ -32775,6 +32775,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] = React98__default.useState(pageSize > 0 ? pageSize : Infinity);
+  const [localSelected, setLocalSelected] = React98__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((r2, i) => selected.has(String(r2[idField] ?? i)));
+  const toggleAll = () => {
+    if (allSelected) emitSelection(/* @__PURE__ */ new Set());
+    else emitSelection(new Set(data.map((r2, i) => String(r2[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(React98__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(React98__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;
@@ -45209,7 +45514,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",
     {
@@ -54937,6 +55242,7 @@ var init_component_registry_generated = __esm({
     init_Switch();
     init_TabbedContainer();
     init_Table();
+    init_TableView();
     init_Tabs();
     init_TagCloud();
     init_TagInput();
@@ -55254,6 +55560,7 @@ var init_component_registry_generated = __esm({
       "Switch": Switch,
       "TabbedContainer": TabbedContainer,
       "Table": Table,
+      "TableView": TableView,
       "Tabs": Tabs,
       "TagCloud": TagCloud,
       "TagInput": TagInput,

package/dist/components/atoms/AnimatedGraphic.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 export type GraphicAnimation = 'draw' | 'fill' | 'pulse' | 'morph';
 export 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. */