@flamingo-stack/openframe-frontend-core 0.0.591 → 0.0.592-snapshot.20260905013229

package/dist/{chunk-ZYA6274A.js → chunk-VUGQ3Z6E.js}

@@ -22,7 +22,7 @@ import {
   useLocalStorage,
   useNotificationPermission,
   useToast
-} from "./chunk-2TJSDSXW.js";
+} from "./chunk-MOHSA65M.js";
 import {
   Pagination
 } from "./chunk-GBON2OCG.js";
@@ -9315,7 +9315,8 @@ function ListPageLayout({
 // src/components/ui/entity-image.tsx
 import React7 from "react";
 import { jsx as jsx81 } from "react/jsx-runtime";
-function EntityImage({ src, alt, fallbackText, className }) {
+var ENTITY_IMAGE_SIZE = "size-[52px] md:size-[60px]";
+function EntityImage({ src, alt, fallbackText, sizeClassName, className }) {
   const resolvedSrc = useAuthedImageSrc(src);
   const [failedSrc, setFailedSrc] = React7.useState(null);
   const imageFailed = resolvedSrc !== void 0 && failedSrc === resolvedSrc;
@@ -9327,7 +9328,8 @@ function EntityImage({ src, alt, fallbackText, className }) {
       {
         "aria-label": alt,
         className: cn(
-          "flex size-[52px] shrink-0 select-none items-center justify-center rounded-md border border-ods-border bg-ods-bg text-ods-text-secondary text-h4 md:size-[60px]",
+          "flex shrink-0 select-none items-center justify-center rounded-md border border-ods-border bg-ods-bg text-ods-text-secondary text-h4",
+          sizeClassName ?? ENTITY_IMAGE_SIZE,
           className
         ),
         children: initials || "?"
@@ -9341,7 +9343,8 @@ function EntityImage({ src, alt, fallbackText, className }) {
       alt: alt ?? "",
       onError: () => setFailedSrc(resolvedSrc),
       className: cn(
-        "size-[52px] shrink-0 rounded-md border border-ods-border object-contain md:size-[60px]",
+        "shrink-0 rounded-md border border-ods-border object-contain",
+        sizeClassName ?? ENTITY_IMAGE_SIZE,
         className
       ),
       width: 60,
@@ -13936,7 +13939,7 @@ import { Fragment as Fragment18, jsx as jsx128, jsxs as jsxs98 } from "react/jsx
 var ROW_HEIGHT_DESKTOP2 = "h-[66px] md:h-[78px]";
 var ROW_HEIGHT_MOBILE2 = "h-[66px]";
 var ROW_SHELL_CLASSES = "items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]";
-function DataTableSkeleton({ rows = 10, className, rowClassName }) {
+function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeightClassName }) {
   const table = useDataTableContext();
   const columns = table.getVisibleFlatColumns();
   const firstColumnId = columns[0]?.id;
@@ -13945,36 +13948,60 @@ function DataTableSkeleton({ rows = 10, className, rowClassName }) {
     {
       className: cn(
         "relative animate-pulse overflow-hidden rounded-md border border-ods-border bg-ods-card",
+        // The slot height sits on the card, matching a real row.
+        rowHeightClassName,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx128("div", { className: cn("hidden py-0 md:flex", ROW_SHELL_CLASSES, ROW_HEIGHT_DESKTOP2, rowClassName), children: columns.map((column) => {
-          const meta = column.columnDef.meta;
-          return /* @__PURE__ */ jsxs98(
-            "div",
-            {
-              className: cn(
-                "flex shrink-0 flex-col justify-center",
-                meta?.width || "flex-1",
-                // Same responsive hiding the real header and row apply.
-                // Without it a `hideAt` column was drawn in the skeleton and
-                // absent from the loaded table, so below that breakpoint the
-                // remaining columns were sized against a different total and
-                // the whole row re-laid-out the moment data arrived.
-                getHideClasses2(meta?.hideAt)
-              ),
-              children: [
-                /* @__PURE__ */ jsx128("div", { className: "mb-[var(--spacing-system-xxs)] h-5 w-3/4 rounded-sm bg-ods-bg-surface" }),
-                index % 2 === 0 && column.id === firstColumnId && /* @__PURE__ */ jsx128("div", { className: "h-4 w-1/2 rounded-sm bg-ods-bg-surface opacity-60" })
-              ]
-            },
-            column.id
-          );
-        }) }),
-        /* @__PURE__ */ jsx128("div", { className: cn("flex justify-start py-0 md:hidden", ROW_SHELL_CLASSES, ROW_HEIGHT_MOBILE2, rowClassName), children: /* @__PURE__ */ jsxs98("div", { className: "flex min-w-0 flex-1 flex-col justify-center py-[var(--spacing-system-sf)]", children: [
-          /* @__PURE__ */ jsx128("div", { className: "mb-[var(--spacing-system-xsf)] h-4 w-3/4 rounded-sm bg-ods-bg-surface" }),
-          /* @__PURE__ */ jsx128("div", { className: "h-3 w-1/2 rounded-sm bg-ods-bg-surface opacity-60" })
-        ] }) })
+        /* @__PURE__ */ jsx128(
+          "div",
+          {
+            className: cn(
+              "hidden py-0 md:flex",
+              ROW_SHELL_CLASSES,
+              rowHeightClassName ? "h-full" : ROW_HEIGHT_DESKTOP2,
+              rowClassName
+            ),
+            children: columns.map((column) => {
+              const meta = column.columnDef.meta;
+              return /* @__PURE__ */ jsxs98(
+                "div",
+                {
+                  className: cn(
+                    "flex shrink-0 flex-col justify-center",
+                    meta?.width || "flex-1",
+                    // Same responsive hiding the real header and row apply.
+                    // Without it a `hideAt` column was drawn in the skeleton and
+                    // absent from the loaded table, so below that breakpoint the
+                    // remaining columns were sized against a different total and
+                    // the whole row re-laid-out the moment data arrived.
+                    getHideClasses2(meta?.hideAt)
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx128("div", { className: "mb-[var(--spacing-system-xxs)] h-5 w-3/4 rounded-sm bg-ods-bg-surface" }),
+                    index % 2 === 0 && column.id === firstColumnId && /* @__PURE__ */ jsx128("div", { className: "h-4 w-1/2 rounded-sm bg-ods-bg-surface opacity-60" })
+                  ]
+                },
+                column.id
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx128(
+          "div",
+          {
+            className: cn(
+              "flex justify-start py-0 md:hidden",
+              ROW_SHELL_CLASSES,
+              rowHeightClassName ? "h-full" : ROW_HEIGHT_MOBILE2,
+              rowClassName
+            ),
+            children: /* @__PURE__ */ jsxs98("div", { className: "flex min-w-0 flex-1 flex-col justify-center py-[var(--spacing-system-sf)]", children: [
+              /* @__PURE__ */ jsx128("div", { className: "mb-[var(--spacing-system-xsf)] h-4 w-3/4 rounded-sm bg-ods-bg-surface" }),
+              /* @__PURE__ */ jsx128("div", { className: "h-3 w-1/2 rounded-sm bg-ods-bg-surface opacity-60" })
+            ] })
+          }
+        )
       ]
     },
     index
@@ -13983,7 +14010,16 @@ function DataTableSkeleton({ rows = 10, className, rowClassName }) {
 
 // src/components/ui/data-table/data-table-row.tsx
 import { Fragment as Fragment19, jsx as jsx129, jsxs as jsxs99 } from "react/jsx-runtime";
-function DataTableRowImpl({ row, onClick, href, compact, autoHeight, className, subRow }) {
+function DataTableRowImpl({
+  row,
+  onClick,
+  href,
+  compact,
+  autoHeight,
+  rowHeightClassName,
+  className,
+  subRow
+}) {
   const hasSubRow = subRow != null && subRow !== false;
   const isLinkMode = Boolean(href) && !onClick;
   const isWholeCardLink = isLinkMode && !hasSubRow;
@@ -14004,7 +14040,11 @@ function DataTableRowImpl({ row, onClick, href, compact, autoHeight, className,
     [onClick, row.original, isLinkMode]
   );
   const containerClassName = cn(
-    "block overflow-hidden rounded-md border border-ods-border bg-ods-card text-inherit no-underline",
+    "overflow-hidden rounded-md border border-ods-border bg-ods-card text-inherit no-underline",
+    // A stated slot height goes HERE, on the card, with the cells flexing to
+    // fill whatever the sub-row leaves. `border-box` sizing means the number a
+    // caller writes is the number the row occupies, borders included.
+    rowHeightClassName ? `flex flex-col ${rowHeightClassName}` : "block",
     // With a sub-row the link wraps only the cells, so keep the clickable affordance off the whole card.
     (onClick || isWholeCardLink) && "cursor-pointer transition-colors hover:bg-ods-bg-active",
     className
@@ -14015,7 +14055,7 @@ function DataTableRowImpl({ row, onClick, href, compact, autoHeight, className,
       className: cn(
         "flex",
         ROW_SHELL_CLASSES,
-        compact ? "py-[var(--spacing-system-xsf)]" : autoHeight ? "min-h-[66px] py-[var(--spacing-system-sf)] md:min-h-[78px]" : `py-0 ${ROW_HEIGHT_DESKTOP2}`,
+        rowHeightClassName ? "min-h-0 flex-1 py-0" : compact ? "py-[var(--spacing-system-xsf)]" : autoHeight ? "min-h-[66px] py-[var(--spacing-system-sf)] md:min-h-[78px]" : `py-0 ${ROW_HEIGHT_DESKTOP2}`,
         hasSubRow && "border-b border-ods-border"
       ),
       children: row.getVisibleCells().map((cell) => {
@@ -14062,7 +14102,10 @@ function DataTableRowImpl({ row, onClick, href, compact, autoHeight, className,
           {
             href,
             prefetch: false,
-            className: "block cursor-pointer text-inherit no-underline transition-colors hover:bg-ods-bg-active",
+            className: cn(
+              "cursor-pointer text-inherit no-underline transition-colors hover:bg-ods-bg-active",
+              rowHeightClassName ? "flex min-h-0 flex-1 flex-col" : "block"
+            ),
             onClick: handleClick,
             children: cells
           }
@@ -14091,6 +14134,7 @@ function DataTableBody({
   rowClassName,
   compact,
   autoHeight,
+  rowHeightClassName,
   onRowClick,
   rowHref,
   minRows,
@@ -14099,13 +14143,13 @@ function DataTableBody({
   const table = useDataTableContext();
   const rows = table.getRowModel().rows;
   if (loading && rows.length === 0) {
-    return /* @__PURE__ */ jsx130("div", { className: cn("flex w-full flex-col gap-[var(--spacing-system-xsf)]", className), children: /* @__PURE__ */ jsx130(DataTableSkeleton, { rows: skeletonRows }) });
+    return /* @__PURE__ */ jsx130("div", { className: cn("flex w-full flex-col gap-[var(--spacing-system-xsf)]", className), children: /* @__PURE__ */ jsx130(DataTableSkeleton, { rows: skeletonRows, rowHeightClassName }) });
   }
   if (rows.length === 0) {
     const empty = emptyState ? /* @__PURE__ */ jsx130(DataTableEmpty, { ...emptyState }) : emptyMessage != null ? /* @__PURE__ */ jsx130(DataTableEmpty, { title: emptyMessage, description: void 0 }) : /* @__PURE__ */ jsx130(DataTableEmpty, {});
     if (minRows) {
       return /* @__PURE__ */ jsxs100("div", { className: cn("relative flex w-full flex-col gap-[var(--spacing-system-xsf)]", className), children: [
-        /* @__PURE__ */ jsx130(PlaceholderRows, { count: minRows }),
+        /* @__PURE__ */ jsx130(PlaceholderRows, { count: minRows, rowHeightClassName }),
         /* @__PURE__ */ jsx130("div", { className: "absolute inset-0 flex items-center justify-center", children: empty })
       ] });
     }
@@ -14125,24 +14169,46 @@ function DataTableBody({
           href,
           compact,
           autoHeight,
+          rowHeightClassName,
           className: cls,
           subRow: renderSubRow?.(item)
         },
         row.id
       );
     }),
-    padCount > 0 && /* @__PURE__ */ jsx130(PlaceholderRows, { count: padCount })
+    padCount > 0 && /* @__PURE__ */ jsx130(PlaceholderRows, { count: padCount, rowHeightClassName })
   ] });
 }
-function PlaceholderRows({ count }) {
+function PlaceholderRows({ count, rowHeightClassName }) {
   return /* @__PURE__ */ jsx130(Fragment20, { children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs100(
     "div",
     {
-      className: "pointer-events-none relative overflow-hidden rounded-md",
+      className: cn(
+        "pointer-events-none relative overflow-hidden rounded-md border border-transparent",
+        // The stated slot height belongs on the CARD, exactly as a real
+        // row carries it — a real row with a sub-row is taller than its
+        // cells, so reserving the cells' height here left every pad row
+        // short by the sub-row.
+        rowHeightClassName
+      ),
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx130("div", { className: cn("hidden py-0 md:flex", ROW_SHELL_CLASSES, ROW_HEIGHT_DESKTOP2) }),
-        /* @__PURE__ */ jsx130("div", { className: cn("flex justify-start py-0 md:hidden", ROW_SHELL_CLASSES, ROW_HEIGHT_MOBILE2) })
+        /* @__PURE__ */ jsx130(
+          "div",
+          {
+            className: cn("hidden py-0 md:flex", ROW_SHELL_CLASSES, rowHeightClassName ? "h-full" : ROW_HEIGHT_DESKTOP2)
+          }
+        ),
+        /* @__PURE__ */ jsx130(
+          "div",
+          {
+            className: cn(
+              "flex justify-start py-0 md:hidden",
+              ROW_SHELL_CLASSES,
+              rowHeightClassName ? "h-full" : ROW_HEIGHT_MOBILE2
+            )
+          }
+        )
       ]
     },
     `placeholder-${i}`
@@ -30611,4 +30677,4 @@ export {
   FilterPillRow,
   LazyMount
 };
-//# sourceMappingURL=chunk-ZYA6274A.js.map
+//# sourceMappingURL=chunk-VUGQ3Z6E.js.map