@exxatdesignux/ui 0.2.18 → 0.3.0

package/dist/components/data-views/finder-panel-view.js

@@ -0,0 +1,388 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { GripVertical } from 'lucide-react';
+import { Panel, Group, Separator } from 'react-resizable-panels';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function ResizablePanelGroup({
+  direction = "horizontal",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      orientation: direction,
+      className: cn(
+        "flex h-full w-full",
+        direction === "vertical" && "flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var ResizablePanel = Panel;
+function ResizableHandle({ withHandle, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      className: cn(
+        // Base — horizontal handle (between side-by-side panels)
+        "relative flex w-1 shrink-0 cursor-col-resize items-center justify-center bg-border/60",
+        "transition-colors hover:bg-border active:bg-primary/30",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+        // Vertical handle (between stacked panels)
+        "data-[orientation=vertical]:h-1 data-[orientation=vertical]:w-full data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:flex-row",
+        className
+      ),
+      ...props,
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-5 w-3.5 items-center justify-center rounded-sm border border-border bg-background shadow-sm", children: /* @__PURE__ */ jsx(GripVertical, { className: "h-3 w-3 text-muted-foreground" }) })
+    }
+  );
+}
+function ListPageTreeColumnHeader({
+  title,
+  trailing,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("shrink-0 border-b border-border/50 bg-card px-3 py-2", className), children: /* @__PURE__ */ jsxs("div", { className: "flex h-9 items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsx("h3", { className: "min-w-0 flex-1 truncate text-sm font-medium text-foreground", children: title }),
+    trailing ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-0.5", children: trailing }) : null
+  ] }) });
+}
+function ListPageSplitDetailsPlaceholder({
+  title = "Nothing selected",
+  description,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-full min-h-0 flex-col items-center justify-center bg-card px-6 py-10 text-center",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-4 flex size-14 items-center justify-center rounded-2xl border border-dashed border-border/70 bg-card", children: /* @__PURE__ */ jsx(
+          "i",
+          {
+            className: "fa-light fa-sidebar text-[1.65rem] leading-none text-muted-foreground/70",
+            "aria-hidden": "true"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx("div", { className: "mt-1.5 max-w-[16rem] text-xs leading-relaxed text-muted-foreground", children: description }) : null
+      ]
+    }
+  );
+}
+
+// src/components/data-views/list-page-split-hub-tokens.ts
+var LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS = "w-1 bg-border/40 hover:bg-brand/20 transition-colors";
+var LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS = "flex min-h-0 min-w-0 flex-col bg-card";
+var LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS = "flex min-h-0 min-w-0 flex-col bg-card";
+function GroupsColumn({
+  groups,
+  selectedGroupId,
+  onSelect,
+  columnTitle
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx(ListPageTreeColumnHeader, { title: columnTitle }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "min-h-0 flex-1 overflow-y-auto py-1",
+        role: "listbox",
+        "aria-label": "Group navigation",
+        "aria-multiselectable": "false",
+        children: groups.map((group) => {
+          const isSelected = group.id === selectedGroupId;
+          return /* @__PURE__ */ jsx("div", { className: "group flex items-center hover:bg-muted/50", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": isSelected,
+              onClick: () => onSelect(group.id),
+              className: cn(
+                "flex w-full flex-1 items-center gap-2 px-3 py-2 text-start text-sm transition-colors duration-75",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+                isSelected ? "bg-accent font-medium text-accent-foreground" : "text-foreground"
+              ),
+              children: [
+                group.accent ? /* @__PURE__ */ jsx("span", { className: cn("size-2 shrink-0 rounded-full", group.accent), "aria-hidden": "true" }) : group.icon ? /* @__PURE__ */ jsx(
+                  "i",
+                  {
+                    className: cn(
+                      "fa-light shrink-0 text-xs",
+                      group.icon,
+                      isSelected ? "text-accent-foreground" : "text-muted-foreground"
+                    ),
+                    "aria-hidden": "true"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate leading-tight", children: group.label }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "shrink-0 tabular-nums text-xs",
+                      isSelected ? "text-accent-foreground/80" : "text-muted-foreground"
+                    ),
+                    children: group.count
+                  }
+                )
+              ]
+            }
+          ) }, group.id);
+        })
+      }
+    )
+  ] });
+}
+function FinderGroupStrip({
+  groups,
+  selectedGroupId,
+  onSelect,
+  ariaLabel = "Scope"
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": ariaLabel,
+      className: "flex min-h-10 flex-wrap items-center gap-1.5 border-b border-border bg-card px-2 py-2",
+      children: groups.map((group) => {
+        const isSelected = group.id === selectedGroupId;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": isSelected,
+            onClick: () => onSelect(group.id),
+            className: cn(
+              "inline-flex h-8 max-w-full min-w-0 shrink-0 items-center gap-1.5 rounded-lg border px-2.5 text-xs font-medium transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              isSelected ? "border-brand/40 bg-accent text-accent-foreground" : "border-transparent bg-background/80 text-foreground hover:bg-muted"
+            ),
+            children: [
+              group.accent ? /* @__PURE__ */ jsx("span", { className: cn("size-2 shrink-0 rounded-full", group.accent), "aria-hidden": "true" }) : group.icon ? /* @__PURE__ */ jsx(
+                "i",
+                {
+                  className: cn(
+                    "fa-light shrink-0 text-[11px]",
+                    group.icon,
+                    isSelected ? "text-accent-foreground" : "text-muted-foreground"
+                  ),
+                  "aria-hidden": "true"
+                }
+              ) : null,
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: group.label }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "shrink-0 tabular-nums text-[11px]",
+                    isSelected ? "text-accent-foreground/85" : "text-muted-foreground"
+                  ),
+                  children: group.count
+                }
+              )
+            ]
+          },
+          group.id
+        );
+      })
+    }
+  );
+}
+function ListColumn({
+  rows,
+  getRowId,
+  selectedId,
+  renderListRow,
+  onSelect,
+  emptyList,
+  groupLabel,
+  columnTitle,
+  onAddItem
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx(ListPageTreeColumnHeader, { title: columnTitle }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "min-h-0 flex-1 overflow-y-auto py-1",
+          role: "listbox",
+          "aria-label": `${groupLabel} items`,
+          "aria-multiselectable": "false",
+          children: rows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center px-4 py-12 text-center text-sm text-muted-foreground", children: emptyList ?? /* @__PURE__ */ jsx("p", { children: "No items in this group." }) }) : rows.map((row) => {
+            const id = getRowId(row);
+            const isSelected = id === selectedId;
+            return /* @__PURE__ */ jsx("div", { className: "group flex items-center hover:bg-muted/50", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": isSelected,
+                onClick: () => onSelect(id),
+                className: cn(
+                  "flex w-full flex-1 items-center gap-3 px-3 py-2 text-start text-sm transition-colors duration-75",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+                  isSelected ? "bg-accent font-medium text-accent-foreground" : "text-foreground"
+                ),
+                children: renderListRow(row, isSelected)
+              }
+            ) }, id);
+          })
+        }
+      ),
+      onAddItem ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center border-t border-border/50 px-2 py-1.5", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onAddItem,
+          className: "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "aria-label": `Add item to ${groupLabel}`,
+          children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-plus text-xs", "aria-hidden": "true" })
+        }
+      ) }) : null
+    ] })
+  ] });
+}
+function DetailColumn({ children }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS, "overflow-hidden"), children: [
+    /* @__PURE__ */ jsx(ListPageTreeColumnHeader, { title: "Details" }),
+    /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children })
+  ] });
+}
+function DefaultEmptyDetail() {
+  return /* @__PURE__ */ jsx(ListPageSplitDetailsPlaceholder, { title: "Nothing selected" });
+}
+function FinderPanelView({
+  groups,
+  rows,
+  getRowId,
+  getRowGroupId,
+  renderListRow,
+  renderDetail,
+  emptyDetail,
+  emptyList,
+  defaultGroupId,
+  ariaLabel = "List and details",
+  autoSaveId = "finder-panel-view",
+  className,
+  style,
+  onAddItem,
+  embedded = false,
+  groupsColumnTitle = "Categories",
+  getListColumnTitle = (g) => g?.label ?? "Items"
+}) {
+  const mergedStyle = React.useMemo(() => {
+    if (embedded) {
+      return { height: "100%", minHeight: 0, ...style };
+    }
+    return {
+      height: "calc(100vh - 280px)",
+      minHeight: 420,
+      ...style
+    };
+  }, [embedded, style]);
+  const firstGroupId = defaultGroupId ?? groups[0]?.id ?? "all";
+  const [selectedGroupId, setSelectedGroupId] = React.useState(firstGroupId);
+  const [selectedRowId, setSelectedRowId] = React.useState(null);
+  const visibleRows = React.useMemo(() => {
+    if (selectedGroupId === "all") return rows;
+    return rows.filter((r) => getRowGroupId(r) === selectedGroupId);
+  }, [rows, selectedGroupId, getRowGroupId]);
+  React.useEffect(() => {
+    setSelectedRowId(visibleRows[0] ? getRowId(visibleRows[0]) : null);
+  }, [selectedGroupId, visibleRows, getRowId]);
+  React.useEffect(() => {
+    if (selectedRowId !== null && !visibleRows.find((r) => getRowId(r) === selectedRowId)) {
+      setSelectedRowId(visibleRows[0] ? getRowId(visibleRows[0]) : null);
+    }
+  }, [visibleRows, selectedRowId, getRowId]);
+  const selectedRow = selectedRowId !== null ? visibleRows.find((r) => getRowId(r) === selectedRowId) ?? null : null;
+  const selectedGroup = groups.find((g) => g.id === selectedGroupId);
+  const listColumnTitle = getListColumnTitle(selectedGroup);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        embedded ? "flex h-full min-h-0 flex-col overflow-hidden" : "mx-4 mb-6 overflow-hidden rounded-xl border border-border bg-card lg:mx-6",
+        className
+      ),
+      style: mergedStyle,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxs(
+        ResizablePanelGroup,
+        {
+          id: String(autoSaveId),
+          direction: "horizontal",
+          className: "h-full min-h-0 w-full flex-1",
+          children: [
+            /* @__PURE__ */ jsx(
+              ResizablePanel,
+              {
+                id: "groups",
+                defaultSize: "22%",
+                minSize: "16%",
+                maxSize: "32%",
+                className: LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS,
+                children: /* @__PURE__ */ jsx(
+                  GroupsColumn,
+                  {
+                    columnTitle: groupsColumnTitle,
+                    groups,
+                    selectedGroupId,
+                    onSelect: (id) => setSelectedGroupId(id)
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true, className: LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS }),
+            /* @__PURE__ */ jsx(
+              ResizablePanel,
+              {
+                id: "list",
+                defaultSize: "34%",
+                minSize: "22%",
+                maxSize: "48%",
+                className: LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS,
+                children: /* @__PURE__ */ jsx(
+                  ListColumn,
+                  {
+                    columnTitle: listColumnTitle,
+                    rows: visibleRows,
+                    getRowId,
+                    selectedId: selectedRowId,
+                    renderListRow,
+                    onSelect: (id) => setSelectedRowId(id),
+                    emptyList,
+                    groupLabel: selectedGroup?.label ?? "All",
+                    onAddItem
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true, className: LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS }),
+            /* @__PURE__ */ jsx(ResizablePanel, { id: "detail", defaultSize: "44%", minSize: "30%", className: LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS, children: /* @__PURE__ */ jsx(DetailColumn, { children: selectedRow ? renderDetail(selectedRow) : emptyDetail ?? /* @__PURE__ */ jsx(DefaultEmptyDetail, {}) }) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export { FinderGroupStrip, FinderPanelView, GroupsColumn };
+//# sourceMappingURL=finder-panel-view.js.map
+//# sourceMappingURL=finder-panel-view.js.map

package/dist/components/data-views/finder-panel-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/resizable.tsx","../../../src/components/data-views/list-page-tree-column-header.tsx","../../../src/components/data-views/list-page-split-details-placeholder.tsx","../../../src/components/data-views/list-page-split-hub-tokens.ts","../../../src/components/data-views/finder-panel-view.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"finder-panel-view.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { GripVertical } from \"lucide-react\"\nimport { Group, Panel, Separator } from \"react-resizable-panels\"\nimport type { GroupProps, PanelProps, SeparatorProps } from \"react-resizable-panels\"\n\nimport { cn } from \"../../lib/utils\"\n\n// ─── ResizablePanelGroup ──────────────────────────────────────────────────────\n\nexport type ResizablePanelGroupProps = Omit<GroupProps, \"orientation\"> & {\n  direction?: \"horizontal\" | \"vertical\"\n}\n\nexport function ResizablePanelGroup({\n  direction = \"horizontal\",\n  className,\n  ...props\n}: ResizablePanelGroupProps) {\n  return (\n    <Group\n      orientation={direction}\n      className={cn(\n        \"flex h-full w-full\",\n        direction === \"vertical\" && \"flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n// ─── ResizablePanel ───────────────────────────────────────────────────────────\n\nexport type ResizablePanelProps = PanelProps\n\nexport const ResizablePanel = Panel\n\n// ─── ResizableHandle ──────────────────────────────────────────────────────────\n\nexport type ResizableHandleProps = Omit<SeparatorProps, \"children\"> & {\n  /** Render a visible grip icon on the handle. */\n  withHandle?: boolean\n}\n\nexport function ResizableHandle({ withHandle, className, ...props }: ResizableHandleProps) {\n  return (\n    <Separator\n      className={cn(\n        // Base — horizontal handle (between side-by-side panels)\n        \"relative flex w-1 shrink-0 cursor-col-resize items-center justify-center bg-border/60\",\n        \"transition-colors hover:bg-border active:bg-primary/30\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\",\n        // Vertical handle (between stacked panels)\n        \"data-[orientation=vertical]:h-1 data-[orientation=vertical]:w-full data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:flex-row\",\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-5 w-3.5 items-center justify-center rounded-sm border border-border bg-background shadow-sm\">\n          <GripVertical className=\"h-3 w-3 text-muted-foreground\" />\n        </div>\n      )}\n    </Separator>\n  )\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\n\nexport interface ListPageTreeColumnHeaderProps {\n  title: string\n  /** Right side (e.g. icon buttons) — keep touch targets ≥ 24px */\n  trailing?: React.ReactNode\n  className?: string\n}\n\n/**\n * Shared left-column header for tree / outline surfaces — matches Question bank “Questions” bar.\n */\nexport function ListPageTreeColumnHeader({\n  title,\n  trailing,\n  className,\n}: ListPageTreeColumnHeaderProps) {\n  return (\n    <div className={cn(\"shrink-0 border-b border-border/50 bg-card px-3 py-2\", className)}>\n      <div className=\"flex h-9 items-center justify-between gap-2\">\n        <h3 className=\"min-w-0 flex-1 truncate text-sm font-medium text-foreground\">{title}</h3>\n        {trailing ? (\n          <div className=\"flex shrink-0 items-center gap-0.5\">{trailing}</div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\n\nexport interface ListPageSplitDetailsPlaceholderProps {\n  title?: string\n  description?: React.ReactNode\n  className?: string\n}\n\n/**\n * Empty right pane for split hubs — flat `bg-card` to match Miller / tree columns.\n */\nexport function ListPageSplitDetailsPlaceholder({\n  title = \"Nothing selected\",\n  description,\n  className,\n}: ListPageSplitDetailsPlaceholderProps) {\n  return (\n    <div\n      className={cn(\n        \"flex h-full min-h-0 flex-col items-center justify-center bg-card px-6 py-10 text-center\",\n        className,\n      )}\n    >\n      <div className=\"mb-4 flex size-14 items-center justify-center rounded-2xl border border-dashed border-border/70 bg-card\">\n        <i\n          className=\"fa-light fa-sidebar text-[1.65rem] leading-none text-muted-foreground/70\"\n          aria-hidden=\"true\"\n        />\n      </div>\n      <p className=\"text-sm font-medium text-foreground\">{title}</p>\n      {description ? (\n        <div className=\"mt-1.5 max-w-[16rem] text-xs leading-relaxed text-muted-foreground\">{description}</div>\n      ) : null}\n    </div>\n  )\n}\n","/**\n * Shared layout tokens for list-hub split surfaces (Miller columns, tree + details).\n * Keeps Question bank panel / tree and generic `FinderPanelView` visually aligned.\n */\n\n/** `ResizableHandle` between miller / tree columns — matches Question bank panel. */\nexport const LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS =\n  \"w-1 bg-border/40 hover:bg-brand/20 transition-colors\"\n\n/** Primary column stack (scope list, folder list, record list, …). */\nexport const LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS =\n  \"flex min-h-0 min-w-0 flex-col bg-card\"\n\n/** Right-hand inspector / detail column shell. */\nexport const LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS =\n  \"flex min-h-0 min-w-0 flex-col bg-card\"\n","\"use client\"\n\n/**\n * FinderPanelView — Miller-style 3-column split for list-page hubs.\n *\n * Visual shell matches Question bank panel (`ListPageTreeColumnHeader`, `LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS`,\n * shared resizable handles) — see `list-page-split-hub-tokens.ts`.\n */\n\nimport * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"../ui/resizable\"\nimport { ListPageTreeColumnHeader } from \"./list-page-tree-column-header\"\nimport { ListPageSplitDetailsPlaceholder } from \"./list-page-split-details-placeholder\"\nimport {\n  LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS,\n  LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS,\n  LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS,\n} from \"./list-page-split-hub-tokens\"\n\nexport interface FinderGroup {\n  id: string\n  label: string\n  icon?: string\n  accent?: string\n  count: number\n}\n\nexport interface FinderPanelViewProps<T> {\n  groups: FinderGroup[]\n  rows: T[]\n  getRowId: (row: T) => string | number\n  getRowGroupId: (row: T) => string\n  renderListRow: (row: T, isSelected: boolean) => React.ReactNode\n  renderDetail: (row: T) => React.ReactNode\n  emptyDetail?: React.ReactNode\n  emptyList?: React.ReactNode\n  defaultGroupId?: string\n  ariaLabel?: string\n  autoSaveId?: string\n  className?: string\n  style?: React.CSSProperties\n  onAddItem?: () => void\n  /**\n   * When true, omit outer margin, border, and card fill so the grid fits inside\n   * `ListPageSplitHubChrome` (shared split surface across hubs).\n   */\n  embedded?: boolean\n  /** Left column title (Question bank: “Categories”). */\n  groupsColumnTitle?: string\n  /** Middle column title; defaults from the active group label. */\n  getListColumnTitle?: (activeGroup: FinderGroup | undefined) => string\n}\n\nexport function GroupsColumn({\n  groups,\n  selectedGroupId,\n  onSelect,\n  columnTitle,\n}: {\n  groups: FinderGroup[]\n  selectedGroupId: string\n  onSelect: (id: string) => void\n  columnTitle: string\n}) {\n  return (\n    <div className=\"flex h-full min-h-0 flex-col overflow-hidden\">\n      <ListPageTreeColumnHeader title={columnTitle} />\n      <div\n        className=\"min-h-0 flex-1 overflow-y-auto py-1\"\n        role=\"listbox\"\n        aria-label=\"Group navigation\"\n        aria-multiselectable=\"false\"\n      >\n        {groups.map(group => {\n          const isSelected = group.id === selectedGroupId\n          return (\n            <div key={group.id} className=\"group flex items-center hover:bg-muted/50\">\n              <button\n                type=\"button\"\n                role=\"option\"\n                aria-selected={isSelected}\n                onClick={() => onSelect(group.id)}\n                className={cn(\n                  \"flex w-full flex-1 items-center gap-2 px-3 py-2 text-start text-sm transition-colors duration-75\",\n                  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset\",\n                  isSelected\n                    ? \"bg-accent font-medium text-accent-foreground\"\n                    : \"text-foreground\",\n                )}\n              >\n                {group.accent ? (\n                  <span className={cn(\"size-2 shrink-0 rounded-full\", group.accent)} aria-hidden=\"true\" />\n                ) : group.icon ? (\n                  <i\n                    className={cn(\n                      \"fa-light shrink-0 text-xs\",\n                      group.icon,\n                      isSelected ? \"text-accent-foreground\" : \"text-muted-foreground\",\n                    )}\n                    aria-hidden=\"true\"\n                  />\n                ) : null}\n                <span className=\"min-w-0 flex-1 truncate leading-tight\">{group.label}</span>\n                <span\n                  className={cn(\n                    \"shrink-0 tabular-nums text-xs\",\n                    isSelected ? \"text-accent-foreground/80\" : \"text-muted-foreground\",\n                  )}\n                >\n                  {group.count}\n                </span>\n              </button>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\n/**\n * Horizontal scope strip (toolbar toggles). Optional: place above a hub body when you need\n * status scope without consuming a Finder column.\n */\nexport function FinderGroupStrip({\n  groups,\n  selectedGroupId,\n  onSelect,\n  ariaLabel = \"Scope\",\n}: {\n  groups: FinderGroup[]\n  selectedGroupId: string\n  onSelect: (id: string) => void\n  ariaLabel?: string\n}) {\n  return (\n    <div\n      role=\"toolbar\"\n      aria-label={ariaLabel}\n      className=\"flex min-h-10 flex-wrap items-center gap-1.5 border-b border-border bg-card px-2 py-2\"\n    >\n      {groups.map(group => {\n        const isSelected = group.id === selectedGroupId\n        return (\n          <button\n            key={group.id}\n            type=\"button\"\n            aria-pressed={isSelected}\n            onClick={() => onSelect(group.id)}\n            className={cn(\n              \"inline-flex h-8 max-w-full min-w-0 shrink-0 items-center gap-1.5 rounded-lg border px-2.5 text-xs font-medium transition-colors\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n              isSelected\n                ? \"border-brand/40 bg-accent text-accent-foreground\"\n                : \"border-transparent bg-background/80 text-foreground hover:bg-muted\",\n            )}\n          >\n            {group.accent ? (\n              <span className={cn(\"size-2 shrink-0 rounded-full\", group.accent)} aria-hidden=\"true\" />\n            ) : group.icon ? (\n              <i\n                className={cn(\n                  \"fa-light shrink-0 text-[11px]\",\n                  group.icon,\n                  isSelected ? \"text-accent-foreground\" : \"text-muted-foreground\",\n                )}\n                aria-hidden=\"true\"\n              />\n            ) : null}\n            <span className=\"min-w-0 truncate\">{group.label}</span>\n            <span\n              className={cn(\n                \"shrink-0 tabular-nums text-[11px]\",\n                isSelected ? \"text-accent-foreground/85\" : \"text-muted-foreground\",\n              )}\n            >\n              {group.count}\n            </span>\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n\nfunction ListColumn<T>({\n  rows,\n  getRowId,\n  selectedId,\n  renderListRow,\n  onSelect,\n  emptyList,\n  groupLabel,\n  columnTitle,\n  onAddItem,\n}: {\n  rows: T[]\n  getRowId: (row: T) => string | number\n  selectedId: string | number | null\n  renderListRow: (row: T, isSelected: boolean) => React.ReactNode\n  onSelect: (id: string | number) => void\n  emptyList?: React.ReactNode\n  groupLabel: string\n  columnTitle: string\n  onAddItem?: () => void\n}) {\n  return (\n    <div className=\"flex h-full min-h-0 flex-col overflow-hidden\">\n      <ListPageTreeColumnHeader title={columnTitle} />\n      <div className=\"flex min-h-0 flex-1 flex-col\">\n        <div\n          className=\"min-h-0 flex-1 overflow-y-auto py-1\"\n          role=\"listbox\"\n          aria-label={`${groupLabel} items`}\n          aria-multiselectable=\"false\"\n        >\n          {rows.length === 0 ? (\n            <div className=\"flex flex-col items-center justify-center px-4 py-12 text-center text-sm text-muted-foreground\">\n              {emptyList ?? <p>No items in this group.</p>}\n            </div>\n          ) : (\n            rows.map(row => {\n              const id = getRowId(row)\n              const isSelected = id === selectedId\n              return (\n                <div key={id} className=\"group flex items-center hover:bg-muted/50\">\n                  <button\n                    type=\"button\"\n                    role=\"option\"\n                    aria-selected={isSelected}\n                    onClick={() => onSelect(id)}\n                    className={cn(\n                      \"flex w-full flex-1 items-center gap-3 px-3 py-2 text-start text-sm transition-colors duration-75\",\n                      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset\",\n                      isSelected\n                        ? \"bg-accent font-medium text-accent-foreground\"\n                        : \"text-foreground\",\n                    )}\n                  >\n                    {renderListRow(row, isSelected)}\n                  </button>\n                </div>\n              )\n            })\n          )}\n        </div>\n        {onAddItem ? (\n          <div className=\"flex shrink-0 items-center justify-center border-t border-border/50 px-2 py-1.5\">\n            <button\n              type=\"button\"\n              onClick={onAddItem}\n              className=\"flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n              aria-label={`Add item to ${groupLabel}`}\n            >\n              <i className=\"fa-light fa-plus text-xs\" aria-hidden=\"true\" />\n            </button>\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\nfunction DetailColumn({ children }: { children: React.ReactNode }) {\n  return (\n    <div className={cn(LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS, \"overflow-hidden\")}>\n      <ListPageTreeColumnHeader title=\"Details\" />\n      <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden\">{children}</div>\n    </div>\n  )\n}\n\nfunction DefaultEmptyDetail() {\n  return (\n    <ListPageSplitDetailsPlaceholder title=\"Nothing selected\" />\n  )\n}\n\nexport function FinderPanelView<T>({\n  groups,\n  rows,\n  getRowId,\n  getRowGroupId,\n  renderListRow,\n  renderDetail,\n  emptyDetail,\n  emptyList,\n  defaultGroupId,\n  ariaLabel = \"List and details\",\n  autoSaveId = \"finder-panel-view\",\n  className,\n  style,\n  onAddItem,\n  embedded = false,\n  groupsColumnTitle = \"Categories\",\n  getListColumnTitle = g => g?.label ?? \"Items\",\n}: FinderPanelViewProps<T>) {\n  const mergedStyle = React.useMemo<React.CSSProperties>(() => {\n    if (embedded) {\n      return { height: \"100%\", minHeight: 0, ...style }\n    }\n    return {\n      height: \"calc(100vh - 280px)\",\n      minHeight: 420,\n      ...style,\n    }\n  }, [embedded, style])\n  const firstGroupId = defaultGroupId ?? groups[0]?.id ?? \"all\"\n  const [selectedGroupId, setSelectedGroupId] = React.useState(firstGroupId)\n  const [selectedRowId, setSelectedRowId] = React.useState<string | number | null>(null)\n\n  const visibleRows = React.useMemo(() => {\n    if (selectedGroupId === \"all\") return rows\n    return rows.filter(r => getRowGroupId(r) === selectedGroupId)\n  }, [rows, selectedGroupId, getRowGroupId])\n\n  React.useEffect(() => {\n    setSelectedRowId(visibleRows[0] ? getRowId(visibleRows[0]) : null)\n  }, [selectedGroupId, visibleRows, getRowId])\n\n  React.useEffect(() => {\n    if (selectedRowId !== null && !visibleRows.find(r => getRowId(r) === selectedRowId)) {\n      setSelectedRowId(visibleRows[0] ? getRowId(visibleRows[0]) : null)\n    }\n  }, [visibleRows, selectedRowId, getRowId])\n\n  const selectedRow =\n    selectedRowId !== null\n      ? (visibleRows.find(r => getRowId(r) === selectedRowId) ?? null)\n      : null\n\n  const selectedGroup = groups.find(g => g.id === selectedGroupId)\n  const listColumnTitle = getListColumnTitle(selectedGroup)\n\n  return (\n    <div\n      className={cn(\n        embedded\n          ? \"flex h-full min-h-0 flex-col overflow-hidden\"\n          : \"mx-4 mb-6 overflow-hidden rounded-xl border border-border bg-card lg:mx-6\",\n        className,\n      )}\n      style={mergedStyle}\n      aria-label={ariaLabel}\n    >\n      <ResizablePanelGroup\n        id={String(autoSaveId)}\n        direction=\"horizontal\"\n        className=\"h-full min-h-0 w-full flex-1\"\n      >\n        <ResizablePanel\n          id=\"groups\"\n          defaultSize=\"22%\"\n          minSize=\"16%\"\n          maxSize=\"32%\"\n          className={LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS}\n        >\n          <GroupsColumn\n            columnTitle={groupsColumnTitle}\n            groups={groups}\n            selectedGroupId={selectedGroupId}\n            onSelect={id => setSelectedGroupId(id)}\n          />\n        </ResizablePanel>\n\n        <ResizableHandle withHandle className={LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS} />\n\n        <ResizablePanel\n          id=\"list\"\n          defaultSize=\"34%\"\n          minSize=\"22%\"\n          maxSize=\"48%\"\n          className={LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS}\n        >\n          <ListColumn\n            columnTitle={listColumnTitle}\n            rows={visibleRows}\n            getRowId={getRowId}\n            selectedId={selectedRowId}\n            renderListRow={renderListRow}\n            onSelect={id => setSelectedRowId(id)}\n            emptyList={emptyList}\n            groupLabel={selectedGroup?.label ?? \"All\"}\n            onAddItem={onAddItem}\n          />\n        </ResizablePanel>\n\n        <ResizableHandle withHandle className={LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS} />\n\n        <ResizablePanel id=\"detail\" defaultSize=\"44%\" minSize=\"30%\" className={LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS}>\n          <DetailColumn>\n            {selectedRow\n              ? renderDetail(selectedRow)\n              : (emptyDetail ?? <DefaultEmptyDetail />)}\n          </DetailColumn>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </div>\n  )\n}\n"]}

package/dist/components/data-views/folder-grid-view.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface FolderGridViewProps<T> {
+    rows: T[];
+    getRowId: (row: T) => string | number;
+    /** Render one tile — receives the row, returns a React node (typically a `<button>`). */
+    renderTile: (row: T) => React.ReactNode;
+    /** Shown when `rows` is empty. */
+    emptyContent?: React.ReactNode;
+    /** `aria-label` on the grid list. */
+    ariaLabel?: string;
+    className?: string;
+    /**
+     * When true, constrains the grid to a centered max width so folder tiles don’t stretch
+     * edge-to-edge on very wide viewports.
+     */
+    constrainWidth?: boolean;
+}
+declare function FolderGridView<T>({ rows, getRowId, renderTile, emptyContent, ariaLabel, className, constrainWidth, }: FolderGridViewProps<T>): react_jsx_runtime.JSX.Element;
+
+export { FolderGridView, type FolderGridViewProps };

package/dist/components/data-views/folder-grid-view.js

@@ -0,0 +1,58 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var LIST_PAGE_VIEW_FRAME_GUTTER = "mx-4 mb-6 lg:mx-6";
+var LIST_PAGE_VIEW_FRAME_MAX_ICON_GRID = "max-w-6xl";
+function ListPageViewFrame({
+  children,
+  className,
+  maxWidthClassName,
+  gutterClassName = LIST_PAGE_VIEW_FRAME_GUTTER,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn(gutterClassName, className), ...rest, children: maxWidthClassName ? /* @__PURE__ */ jsx("div", { className: cn("mx-auto w-full min-w-0", maxWidthClassName), children }) : children });
+}
+function FolderGridView({
+  rows,
+  getRowId,
+  renderTile,
+  emptyContent,
+  ariaLabel = "Folder view",
+  className,
+  constrainWidth = false
+}) {
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(
+      ListPageViewFrame,
+      {
+        maxWidthClassName: constrainWidth ? LIST_PAGE_VIEW_FRAME_MAX_ICON_GRID : void 0,
+        className: cn(className),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center rounded-xl border border-dashed border-border py-16 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("i", { className: "fa-solid fa-grid-2 mb-3 text-3xl opacity-40", "aria-hidden": "true" }),
+          emptyContent ?? /* @__PURE__ */ jsx("p", { children: "No records found." })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(ListPageViewFrame, { className: cn(className), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8",
+        constrainWidth && "mx-auto max-w-6xl"
+      ),
+      role: "list",
+      "aria-label": ariaLabel,
+      children: rows.map((row) => /* @__PURE__ */ jsx("div", { role: "listitem", children: renderTile(row) }, getRowId(row)))
+    }
+  ) });
+}
+
+export { FolderGridView };
+//# sourceMappingURL=folder-grid-view.js.map
+//# sourceMappingURL=folder-grid-view.js.map

package/dist/components/data-views/folder-grid-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/list-page-view-frame.tsx","../../../src/components/data-views/folder-grid-view.tsx"],"names":["jsx"],"mappings":";;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACuBO,IAAM,2BAAA,GAA8B,mBAAA;AAGpC,IAAM,kCAAA,GAAqC,WAAA;AAgB3C,SAAS,iBAAA,CAAkB;AAAA,EAChC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,eAAA,GAAkB,2BAAA;AAAA,EAClB,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,eAAA,EAAiB,SAAS,GAAI,GAAG,IAAA,EACjD,8CACC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,EAAA,CAAG,wBAAA,EAA0B,iBAAiB,CAAA,EAAI,QAAA,EAAS,IAE3E,QAAA,EAEJ,CAAA;AAEJ;ACnBO,SAAS,cAAA,CAAkB;AAAA,EAChC,IAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA,GAAY,aAAA;AAAA,EACZ,SAAA;AAAA,EACA,cAAA,GAAiB;AACnB,CAAA,EAA2B;AACzB,EAAA,IAAI,IAAA,CAAK,WAAW,CAAA,EAAG;AACrB,IAAA,uBACEA,GAAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,iBAAA,EAAmB,iBAAiB,kCAAA,GAAqC,MAAA;AAAA,QACzE,SAAA,EAAW,GAAG,SAAS,CAAA;AAAA,QAEvB,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6HAAA,EACb,QAAA,EAAA;AAAA,0BAAAA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,6CAAA,EAA8C,eAAY,MAAA,EAAO,CAAA;AAAA,UAC7E,YAAA,oBAAgBA,GAAAA,CAAC,GAAA,EAAA,EAAE,QAAA,EAAA,mBAAA,EAAiB;AAAA,SAAA,EACvC;AAAA;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,uBACEA,GAAAA,CAAC,iBAAA,EAAA,EAAkB,WAAW,EAAA,CAAG,SAAS,GACxC,QAAA,kBAAAA,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,oGAAA;AAAA,QACA,cAAA,IAAkB;AAAA,OACpB;AAAA,MACA,IAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,SAAA;AAAA,MAEX,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAA,GAAA,qBACRA,IAAC,KAAA,EAAA,EAAwB,IAAA,EAAK,UAAA,EAC3B,QAAA,EAAA,UAAA,CAAW,GAAG,CAAA,EAAA,EADP,QAAA,CAAS,GAAG,CAEtB,CACD;AAAA;AAAA,GACH,EACF,CAAA;AAEJ","file":"folder-grid-view.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\n/**\n * ListPageViewFrame — shared horizontal gutter + optional centered max-width\n * for list-hub **view bodies** (folder icon grid, finder panel chrome,\n * OS-style folder explorer, dashboard slices, etc.).\n *\n * MUST be used instead of ad-hoc `mx-4 lg:mx-6` + `mx-auto max-w-*` pairs on\n * each page — see `apps/web/AGENTS.md` §4.5 and\n * `.cursor/rules/exxat-list-page-view-shells.mdc`.\n *\n * MUST NOT wrap `DataTable` when its toolbar already applies the same inset\n * (avoid double gutter); use this for **non-table** view branches or\n * **sections below** the shared toolbar.\n *\n * Promotion note: this file lived at\n * `apps/web/components/data-views/list-page-view-frame.tsx` until\n * 2026-05-20. It moved into `@exxatdesignux/ui` because the gutter / max-\n * width contract is entity-agnostic and other consumers (a future docs\n * site, partner apps) need the same rhythm without dragging in the whole\n * `data-views/` family.\n */\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\n/** Default horizontal rhythm for view bodies under `ListPageTemplate` (matches `FolderGridView`). */\nexport const LIST_PAGE_VIEW_FRAME_GUTTER = \"mx-4 mb-6 lg:mx-6\"\n\n/** Typical max width for icon grids / dense tile views on ultra-wide monitors. */\nexport const LIST_PAGE_VIEW_FRAME_MAX_ICON_GRID = \"max-w-6xl\"\n\n/** Slightly wider shell when a view includes toolbar + breadcrumbs + grid (e.g. OS folder explorer). */\nexport const LIST_PAGE_VIEW_FRAME_MAX_WIDE = \"max-w-7xl\"\n\nexport interface ListPageViewFrameProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  /**\n   * When set, children are wrapped in `mx-auto w-full min-w-0` + this\n   * max-width so the block stays centered inside the primary page column.\n   */\n  maxWidthClassName?: string\n  /** Override outer gutter; default `LIST_PAGE_VIEW_FRAME_GUTTER`. */\n  gutterClassName?: string\n}\n\nexport function ListPageViewFrame({\n  children,\n  className,\n  maxWidthClassName,\n  gutterClassName = LIST_PAGE_VIEW_FRAME_GUTTER,\n  ...rest\n}: ListPageViewFrameProps) {\n  return (\n    <div className={cn(gutterClassName, className)} {...rest}>\n      {maxWidthClassName ? (\n        <div className={cn(\"mx-auto w-full min-w-0\", maxWidthClassName)}>{children}</div>\n      ) : (\n        children\n      )}\n    </div>\n  )\n}\n","\"use client\"\n\n/**\n * FolderGridView — generic icon-grid layout for any list-page hub.\n *\n * Handles the responsive CSS grid shell, empty state, and accessibility list role.\n * Pass a `renderTile` render-prop for domain-specific tile content\n * (Placements, Team, Rotations, etc.).\n *\n * Usage:\n * ```tsx\n * <FolderGridView\n *   rows={placements}\n *   getRowId={r => r.id}\n *   renderTile={row => <PlacementFolderTile row={row} onClick={…} />}\n *   ariaLabel=\"Placements folder view\"\n * />\n * ```\n */\n\nimport * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\nimport {\n  ListPageViewFrame,\n  LIST_PAGE_VIEW_FRAME_MAX_ICON_GRID,\n} from \"../ui/list-page-view-frame\"\n\nexport interface FolderGridViewProps<T> {\n  rows: T[]\n  getRowId: (row: T) => string | number\n  /** Render one tile — receives the row, returns a React node (typically a `<button>`). */\n  renderTile: (row: T) => React.ReactNode\n  /** Shown when `rows` is empty. */\n  emptyContent?: React.ReactNode\n  /** `aria-label` on the grid list. */\n  ariaLabel?: string\n  className?: string\n  /**\n   * When true, constrains the grid to a centered max width so folder tiles don’t stretch\n   * edge-to-edge on very wide viewports.\n   */\n  constrainWidth?: boolean\n}\n\nexport function FolderGridView<T>({\n  rows,\n  getRowId,\n  renderTile,\n  emptyContent,\n  ariaLabel = \"Folder view\",\n  className,\n  constrainWidth = false,\n}: FolderGridViewProps<T>) {\n  if (rows.length === 0) {\n    return (\n      <ListPageViewFrame\n        maxWidthClassName={constrainWidth ? LIST_PAGE_VIEW_FRAME_MAX_ICON_GRID : undefined}\n        className={cn(className)}\n      >\n        <div className=\"flex flex-col items-center justify-center rounded-xl border border-dashed border-border py-16 text-sm text-muted-foreground\">\n          <i className=\"fa-solid fa-grid-2 mb-3 text-3xl opacity-40\" aria-hidden=\"true\" />\n          {emptyContent ?? <p>No records found.</p>}\n        </div>\n      </ListPageViewFrame>\n    )\n  }\n\n  return (\n    <ListPageViewFrame className={cn(className)}>\n      <div\n        className={cn(\n          \"grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8\",\n          constrainWidth && \"mx-auto max-w-6xl\",\n        )}\n        role=\"list\"\n        aria-label={ariaLabel}\n      >\n        {rows.map(row => (\n          <div key={getRowId(row)} role=\"listitem\">\n            {renderTile(row)}\n          </div>\n        ))}\n      </div>\n    </ListPageViewFrame>\n  )\n}\n"]}