@opengeni/react 6.5.2-canary.41607687019001 → 6.7.0

package/dist/chunk-54YW6SZZ.js

@@ -0,0 +1,818 @@
+"use client";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger
+} from "./chunk-GM3LG6BG.js";
+import {
+  LogoTileSizeProvider
+} from "./chunk-K4DHWGCT.js";
+import {
+  Skeleton
+} from "./chunk-HJO32O7Z.js";
+import {
+  RelativeTimeDefaultsContext
+} from "./chunk-53AGXXZM.js";
+import {
+  useSectionListFrame
+} from "./chunk-ZMBJPN4T.js";
+import {
+  cn
+} from "./chunk-TXS65BB2.js";
+import {
+  useOpenGeniText
+} from "./chunk-7T2ZE3VT.js";
+
+// src/ui/list-row.tsx
+import {
+  createContext,
+  isValidElement,
+  useContext,
+  useId,
+  useMemo,
+  useRef
+} from "react";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ArrowUpRightIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  ChevronsUpDownIcon,
+  CircleAlertIcon,
+  LoaderCircleIcon,
+  MoreHorizontalIcon,
+  PlusIcon
+} from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var RowListContext = createContext(null);
+function useRowList() {
+  return useContext(RowListContext) ?? { variant: "resource", columns: NO_COLUMNS };
+}
+function useRowListVariant() {
+  return useRowList().variant;
+}
+var TILE_SIZE = {
+  catalog: "lg",
+  resource: "md",
+  table: "sm"
+};
+var DEFAULT_COLUMN_WIDTH = 132;
+var NO_COLUMNS = [];
+var NO_META = [];
+var NO_CELLS = {};
+var ROW_TIME_DEFAULTS = { focusable: false };
+function gridTemplate(columns, variant) {
+  const facts = columns.map((column) => `${column.width ?? DEFAULT_COLUMN_WIDTH}px`);
+  return ["minmax(0,1fr)", ...facts, variant === "table" ? "minmax(2.5rem,auto)" : "auto"].join(
+    " "
+  );
+}
+var SHARED_GRID = "grid grid-cols-[minmax(0,1fr)_auto] @[640px]/list:[grid-template-columns:var(--row-list-template)]";
+var SUBGRID = "col-span-full grid grid-cols-subgrid";
+var FLUSH_LIST = cn(
+  "[&>li]:relative [&>li+li]:before:pointer-events-none [&>li+li]:before:absolute [&>li+li]:before:inset-x-3 [&>li+li]:before:top-0 [&>li+li]:before:h-px [&>li+li]:before:bg-border [&>li+li]:before:content-['']",
+  "[&>li>div]:rounded-[10px]"
+);
+function RowList({
+  variant = "resource",
+  columns = NO_COLUMNS,
+  label,
+  nameLabel = "Name",
+  nameSortable = false,
+  sort,
+  onSortChange,
+  busy = false,
+  flush = false,
+  className,
+  children
+}) {
+  const t = useOpenGeniText();
+  const value = useMemo(() => ({ variant, columns }), [variant, columns]);
+  const frame = useSectionListFrame();
+  const flushCard = flush && frame === "card";
+  const templateStyle = {
+    "--row-list-template": gridTemplate(columns, variant)
+  };
+  const busyNote = busy ? /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: t("list.loading", { label: label.toLocaleLowerCase() }) }) : null;
+  let body;
+  if (variant === "table") {
+    body = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "table",
+        "aria-label": label,
+        "aria-busy": busy || void 0,
+        className: cn("min-w-0 gap-x-4", SHARED_GRID),
+        style: templateStyle,
+        children: [
+          /* @__PURE__ */ jsx("div", { role: "rowgroup", className: cn(SUBGRID, "hidden", "@[640px]/list:grid"), children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "row",
+              className: cn(SUBGRID, "min-h-9 items-center border-b border-border px-3"),
+              children: [
+                /* @__PURE__ */ jsx(
+                  HeaderCell,
+                  {
+                    label: nameLabel,
+                    columnId: "name",
+                    sortable: nameSortable,
+                    sort,
+                    onSortChange
+                  }
+                ),
+                columns.map((column) => /* @__PURE__ */ jsx(
+                  HeaderCell,
+                  {
+                    label: column.label,
+                    columnId: column.id,
+                    align: column.align,
+                    sortable: column.sortable,
+                    sort,
+                    onSortChange
+                  },
+                  column.id
+                )),
+                /* @__PURE__ */ jsx("div", { role: "columnheader", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" }) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { role: "rowgroup", className: cn(SUBGRID, "divide-y divide-border"), children })
+        ]
+      }
+    );
+  } else if (variant === "catalog") {
+    body = /* @__PURE__ */ jsx(
+      "ul",
+      {
+        "aria-label": label,
+        "aria-busy": busy || void 0,
+        className: "m-0 grid min-w-0 list-none grid-cols-1 gap-x-6 gap-y-1 p-0 @[720px]/list:grid-cols-2",
+        children
+      }
+    );
+  } else {
+    body = /* @__PURE__ */ jsx(
+      "ul",
+      {
+        "aria-label": label,
+        "aria-busy": busy || void 0,
+        className: cn(
+          "m-0 min-w-0 list-none gap-x-3 p-0",
+          SHARED_GRID,
+          flush ? FLUSH_LIST : "divide-y divide-border"
+        ),
+        style: templateStyle,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(RowListContext.Provider, { value, children: /* @__PURE__ */ jsx(LogoTileSizeProvider, { size: TILE_SIZE[variant], children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "row-list",
+      "data-variant": variant,
+      "data-flush": flush || void 0,
+      "data-frame": flushCard ? "card" : void 0,
+      className: cn(
+        "@container/list min-w-0",
+        flushCard ? "rounded-lg border border-border bg-surface px-2 py-1" : flush && "-mx-3",
+        className
+      ),
+      children: [
+        busyNote,
+        body
+      ]
+    }
+  ) }) });
+}
+function HeaderCell({
+  label,
+  columnId,
+  align = "start",
+  sortable = false,
+  sort,
+  onSortChange
+}) {
+  const active = sort?.column === columnId;
+  const ariaSort = active ? sort.direction === "asc" ? "ascending" : "descending" : void 0;
+  const text = "text-xs leading-4.5 font-medium text-fg-subtle";
+  if (!sortable || !onSortChange) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "columnheader",
+        className: cn("min-w-0 truncate", text, align === "end" && "text-right"),
+        children: label
+      }
+    );
+  }
+  const SortIcon = active ? sort.direction === "asc" ? ArrowUpIcon : ArrowDownIcon : ChevronsUpDownIcon;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "columnheader",
+      "aria-sort": ariaSort,
+      className: cn("min-w-0", align === "end" && "text-right"),
+      children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSortChange({
+            column: columnId,
+            direction: active && sort.direction === "asc" ? "desc" : "asc"
+          }),
+          className: cn(
+            "-mx-1.5 inline-flex max-w-full items-center gap-1 rounded-[6px] px-1.5 py-0.5 transition-colors duration-[120ms] hover:bg-hover hover:text-fg pointer-coarse:min-h-11",
+            text,
+            active && "text-fg",
+            align === "end" && "flex-row-reverse"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: label }),
+            /* @__PURE__ */ jsx(SortIcon, { "aria-hidden": "true", className: cn("size-3.5 shrink-0", !active && "opacity-60") })
+          ]
+        }
+      )
+    }
+  );
+}
+var INDICATOR_LABEL = {
+  open: "Open",
+  expand: "Show details",
+  external: "Opens in a new tab",
+  add: "Available to add",
+  added: "Added",
+  attention: "Needs attention",
+  unavailable: "Unavailable",
+  loading: "Working"
+};
+function RowIndicator({ kind, label, id, className }) {
+  const Icon = kind === "open" ? ChevronRightIcon : kind === "expand" ? ChevronDownIcon : kind === "external" ? ArrowUpRightIcon : kind === "add" ? PlusIcon : kind === "added" ? CheckIcon : kind === "loading" ? LoaderCircleIcon : CircleAlertIcon;
+  const visibleLabel = kind === "attention" || kind === "unavailable";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "row-indicator",
+      "data-kind": kind,
+      className: cn(
+        "pointer-events-none inline-flex min-w-0 shrink-0 items-center justify-end gap-1.5",
+        kind === "attention" ? "text-status-waiting" : kind === "added" ? "text-fg-muted" : "text-fg-subtle",
+        className
+      ),
+      children: [
+        visibleLabel ? (
+          // On narrow lists the row repeats the words under its title (see
+          // ListRow), so only the icon stays here and nothing truncates.
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              id,
+              className: "max-w-40 min-w-0 truncate text-xs leading-4.5 font-medium @max-[479px]/list:sr-only",
+              children: label ?? INDICATOR_LABEL[kind]
+            }
+          )
+        ) : null,
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            "aria-hidden": "true",
+            className: cn(
+              visibleLabel ? "size-4" : "size-[18px]",
+              kind === "loading" && "motion-safe:animate-spin",
+              kind === "expand" && "transition-transform duration-[120ms]"
+            )
+          }
+        ),
+        visibleLabel ? null : /* @__PURE__ */ jsx("span", { id, className: "sr-only", children: label ?? INDICATOR_LABEL[kind] })
+      ]
+    }
+  );
+}
+function textOf(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join("");
+  if (isValidElement(node)) return textOf(node.props.children);
+  return "";
+}
+var RAISED = "[data-slot=relative-time], [data-slot=status-badge]";
+function ListRow({
+  leading,
+  title,
+  titleAddon,
+  description,
+  meta = NO_META,
+  status,
+  cells = NO_CELLS,
+  indicator,
+  control,
+  menu,
+  menuLabel,
+  onOpen,
+  href,
+  linkProps,
+  selected = false,
+  expanded,
+  panel,
+  nested = false,
+  disabled = false,
+  disabledReason,
+  className
+}) {
+  const { variant, columns } = useRowList();
+  const actionRef = useRef(null);
+  const titleId = useId();
+  const secondaryId = useId();
+  const indicatorId = useId();
+  const panelId = useId();
+  const actionable = !disabled && Boolean(onOpen || href);
+  const indicatorSpec = typeof indicator === "string" ? { kind: indicator } : indicator;
+  const secondary = disabled && disabledReason ? disabledReason : description;
+  const narrowState = indicatorSpec && (indicatorSpec.kind === "attention" || indicatorSpec.kind === "unavailable") ? indicatorSpec.label ?? INDICATOR_LABEL[indicatorSpec.kind] : null;
+  const table = variant === "table";
+  const catalog = variant === "catalog";
+  const gridded = !catalog;
+  const hasColumns = gridded && columns.length > 0;
+  const expandable = !table && expanded !== void 0;
+  const singleLine = !catalog;
+  const presentFacts = columns.filter((column) => cells[column.id] != null);
+  const facts = [
+    ...presentFacts.filter((column) => column.leadsWhenFolded),
+    ...presentFacts.filter((column) => !column.leadsWhenFolded)
+  ];
+  const leadingFacts = facts.filter((column) => column.leadsWhenFolded).length;
+  const metaItems = meta.filter((item) => item != null && item !== false && item !== "");
+  const foldedFact = (column, index, order, leads) => /* @__PURE__ */ jsxs(
+    MetaPart,
+    {
+      order,
+      keep: leads,
+      oneLine: singleLine,
+      className: cn(
+        hasColumns && "@[640px]/list:hidden",
+        // A phone-width line has room for one folded fact (none next to a
+        // status) beyond the leading ones; more would only be cut to a dot
+        // and a few letters.
+        !leads && (index > 0 || status) && "@max-[479px]/list:hidden"
+      ),
+      children: [
+        column.hideLabel ? null : /* @__PURE__ */ jsxs("span", { className: "text-fg-subtle", children: [
+          column.label,
+          " "
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: cells[column.id] })
+      ]
+    },
+    column.id
+  );
+  const metaParts = [
+    // A leading fact never shrinks: the meta after it gives way instead.
+    ...facts.slice(0, leadingFacts).map((column, index) => foldedFact(column, index, index, true)),
+    ...metaItems.map((item, index) => {
+      const last = index === metaItems.length - 1;
+      return /* @__PURE__ */ jsx(
+        MetaPart,
+        {
+          order: leadingFacts + index,
+          keep: !last,
+          oneLine: singleLine,
+          children: item
+        },
+        `meta-${index}`
+      );
+    }),
+    ...facts.slice(leadingFacts).map(
+      (column, index) => foldedFact(column, leadingFacts + index, leadingFacts + metaItems.length + index, false)
+    )
+  ];
+  const statusPart = status ? /* @__PURE__ */ jsx(MetaPart, { keep: true, className: "@[480px]/list:hidden", children: status }, "status") : null;
+  const narrowStatePart = singleLine && narrowState ? /* @__PURE__ */ jsx(
+    MetaPart,
+    {
+      keep: true,
+      hidden: true,
+      className: cn(
+        "hidden font-medium @max-[479px]/list:flex",
+        indicatorSpec?.kind === "attention" ? "text-status-waiting" : "text-fg-subtle"
+      ),
+      children: narrowState
+    },
+    "narrow-state"
+  ) : null;
+  const lineParts = metaParts;
+  const trailingParts = [
+    ...singleLine && statusPart ? [statusPart] : [],
+    ...narrowStatePart ? [narrowStatePart] : []
+  ];
+  const hasLineDescription = Boolean(secondary && !(disabled && disabledReason));
+  const keptLeadParts = singleLine && hasLineDescription ? lineParts.slice(0, leadingFacts) : [];
+  const restLineParts = lineParts.slice(keptLeadParts.length);
+  const metaLine = !singleLine && metaParts.length > 0 ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mt-0.5 min-w-0 overflow-hidden text-xs leading-4.5 text-fg-subtle",
+        // Only folded facts: the line disappears once the columns show.
+        hasColumns && metaItems.length === 0 && "@[640px]/list:hidden"
+      ),
+      children: /* @__PURE__ */ jsx("p", { className: "m-0 -ml-4 flex min-w-0 flex-wrap items-center", children: metaParts })
+    }
+  ) : null;
+  const announceIndicator = indicatorSpec && indicatorSpec.kind !== "open" && indicatorSpec.kind !== "expand";
+  const labelledBy = [titleId, announceIndicator ? indicatorId : null].filter(Boolean).join(" ");
+  const actionProps = {
+    "data-row-action": "",
+    "aria-labelledby": labelledBy,
+    "aria-describedby": secondary ? secondaryId : void 0,
+    "aria-current": selected ? "true" : void 0,
+    "aria-expanded": expandable ? expanded : void 0,
+    // Only a rendered panel is controlled; a row that reveals sibling rows has none.
+    "aria-controls": expandable && expanded && panel ? panelId : void 0,
+    // The row draws the focus ring; the global focus outline is unlayered, so
+    // only an inline style keeps it off the title.
+    style: { outline: "none" },
+    className: cn(
+      "min-w-0 cursor-pointer truncate text-left text-sm leading-5 font-medium text-fg",
+      "after:absolute after:inset-0 after:z-0 after:content-['']"
+    )
+  };
+  const titleNode = actionable ? href ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...linkProps,
+      ...actionProps,
+      ref: actionRef,
+      href,
+      onClick: (event) => {
+        onOpen?.(event);
+        if (!event.defaultPrevented) linkProps?.onClick?.(event);
+      },
+      children: /* @__PURE__ */ jsx("span", { id: titleId, children: title })
+    }
+  ) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...actionProps,
+      ref: actionRef,
+      type: "button",
+      onClick: onOpen,
+      children: /* @__PURE__ */ jsx("span", { id: titleId, children: title })
+    }
+  ) : /* @__PURE__ */ jsx(
+    "span",
+    {
+      id: titleId,
+      className: cn(
+        "min-w-0 truncate text-sm leading-5 font-medium",
+        disabled ? "text-fg-muted" : "text-fg"
+      ),
+      children: title
+    }
+  );
+  const leadingNode = typeof leading === "function" ? leading(TILE_SIZE[variant]) : leading ? leading : null;
+  const menuNode = menu ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": menuLabel ?? `More actions for ${textOf(title) || "this item"}`,
+        className: "grid size-8 shrink-0 place-items-center rounded-[10px] text-fg-subtle transition-colors duration-[120ms] hover:bg-surface-3 hover:text-fg data-[state=open]:bg-surface-3 data-[state=open]:text-fg pointer-coarse:size-11",
+        children: /* @__PURE__ */ jsx(MoreHorizontalIcon, { "aria-hidden": "true", className: "size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "min-w-44", children: menu })
+  ] }) : null;
+  const controlNode = control ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative z-10 flex shrink-0 items-center",
+        hasColumns && (table ? "@max-[639px]/list:basis-full @max-[639px]/list:pl-9" : "@max-[639px]/list:basis-full @max-[639px]/list:pl-11")
+      ),
+      children: control
+    }
+  ) : null;
+  const controlInline = hasColumns;
+  const trailingContent = indicatorSpec || menuNode || control && !controlInline ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    controlInline ? null : controlNode,
+    menuNode ? /* @__PURE__ */ jsx("div", { className: "relative z-10 flex items-center", children: menuNode }) : null,
+    indicatorSpec ? /* @__PURE__ */ jsx(
+      RowIndicator,
+      {
+        kind: indicatorSpec.kind,
+        label: indicatorSpec.label,
+        id: indicatorId,
+        className: indicatorSpec.kind === "expand" && expanded ? "[&>svg]:rotate-180" : void 0
+      }
+    ) : null
+  ] }) : null;
+  const trailing = trailingContent || gridded ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: table ? "cell" : void 0,
+      className: "flex min-w-0 shrink-0 items-center justify-end gap-1",
+      children: trailingContent
+    }
+  ) : null;
+  const main = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 flex-1 items-center gap-x-3",
+        controlInline && control && "flex-wrap gap-y-2"
+      ),
+      children: [
+        leadingNode ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex shrink-0 items-center justify-center",
+              disabled && "opacity-60 grayscale"
+            ),
+            children: leadingNode
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+            titleNode,
+            titleAddon ? (
+              // Held to the title's 20px line: a chip never makes its row taller.
+              /* @__PURE__ */ jsx("span", { className: "flex h-5 shrink-0 items-center gap-1.5", children: titleAddon })
+            ) : null
+          ] }),
+          secondary && (catalog || disabled && disabledReason) ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: secondaryId,
+              className: cn(
+                "mt-0.5 min-w-0 text-xs leading-4.5 text-fg-muted",
+                // A disabled reason is the point of the row: it never truncates.
+                disabled && disabledReason ? "break-words" : "line-clamp-2 break-words"
+              ),
+              children: secondary
+            }
+          ) : null,
+          singleLine && (secondary && !(disabled && disabledReason) || lineParts.length > 0 || trailingParts.length > 0) ? /* @__PURE__ */ jsxs(
+            "p",
+            {
+              className: cn(
+                "m-0 mt-0.5 flex min-w-0 items-center overflow-hidden text-xs leading-4.5 whitespace-nowrap text-fg-subtle",
+                // Tables keep rows to one line once the columns show, unless
+                // the line still has facts that aren't columns.
+                table && metaItems.length === 0 && "@[640px]/list:hidden",
+                // Only folded facts (and a status, which moves to the row's end
+                // from 480px): the line disappears once the columns show.
+                !table && !secondary && hasColumns && metaItems.length === 0 && !narrowState && "@[640px]/list:hidden",
+                // Only a status: it moves to the row's end from 480px, taking
+                // the line with it, so the title stays centred.
+                !table && !secondary && !hasColumns && metaItems.length === 0 && status && !narrowState && "@[480px]/list:hidden"
+              ),
+              children: [
+                secondary && !(disabled && disabledReason) ? /* @__PURE__ */ jsx("span", { id: secondaryId, className: "min-w-0 shrink truncate text-fg-muted", children: secondary }) : null,
+                keptLeadParts.length > 0 ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: keptLeadParts }) : null,
+                restLineParts.length > 0 ? (
+                  // One line tall and wrapping: a part with no room for a few
+                  // letters wraps onto the clipped second line and disappears
+                  // whole, instead of staying behind as a lone dot. The empty
+                  // first item lets even the first part wrap away.
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: cn(
+                        "flex h-4.5 min-w-0 shrink-[2] flex-wrap content-start items-center overflow-hidden",
+                        // No description: drop the first part's leading dot.
+                        !(secondary && !(disabled && disabledReason)) && "-ml-4"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "h-4.5 w-0 shrink-0" }),
+                        restLineParts
+                      ]
+                    }
+                  )
+                ) : null,
+                trailingParts.length > 0 ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "flex shrink-0 items-center",
+                      // Nothing before it: drop its leading dot.
+                      !(secondary && !(disabled && disabledReason)) && restLineParts.length === 0 && "-ml-4"
+                    ),
+                    children: trailingParts
+                  }
+                ) : null
+              ]
+            }
+          ) : null,
+          metaLine,
+          !singleLine && narrowState ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "mt-1 hidden min-w-0 items-center text-xs leading-4.5 font-medium @max-[479px]/list:flex",
+                indicatorSpec?.kind === "attention" ? "text-status-waiting" : "text-fg-subtle"
+              ),
+              children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: narrowState })
+            }
+          ) : null
+        ] }),
+        status ? /* @__PURE__ */ jsx("div", { className: "relative z-10 hidden shrink-0 items-center @[480px]/list:flex", children: status }) : null,
+        controlInline ? controlNode : null
+      ]
+    }
+  );
+  const factColumns = hasColumns ? columns.map((column) => {
+    const value = cells[column.id];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: table ? "cell" : void 0,
+        className: cn(
+          "hidden min-w-0 @[640px]/list:block",
+          column.align === "end" && "text-right"
+        ),
+        children: table ? /* @__PURE__ */ jsx("span", { className: "block truncate text-sm leading-5 text-fg-muted", children: value ?? /* @__PURE__ */ jsx("span", { className: "text-fg-subtle", children: "-" }) }) : value == null ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+          column.hideLabel ? null : /* @__PURE__ */ jsx("span", { className: "block truncate text-2xs leading-4 text-fg-subtle", children: column.label }),
+          /* @__PURE__ */ jsx("span", { className: "block truncate text-xs leading-4.5 text-fg-muted", children: value })
+        ] })
+      },
+      column.id
+    );
+  }) : null;
+  const forwardClick = actionable ? (event) => {
+    if (event.defaultPrevented || !(event.target instanceof Element)) return;
+    if (event.target.closest("[data-row-action]")) return;
+    if (!event.target.closest(RAISED)) return;
+    actionRef.current?.click();
+  } : void 0;
+  const rowClass = cn(
+    // isolate: the raised times and badges stack inside the row, never above
+    // sticky headers or overlays around the list.
+    "group/row relative isolate min-w-0 items-center transition-colors duration-[120ms]",
+    "[&_[data-slot=relative-time]]:relative [&_[data-slot=relative-time]]:z-10 [&_[data-slot=status-badge]]:relative [&_[data-slot=status-badge]]:z-10",
+    catalog && "flex min-h-[76px] gap-3 rounded-[14px] px-3 py-3.5",
+    // One fixed height per list type: 64px resource rows (title plus one
+    // secondary line; a title-only row centers in the same height).
+    variant === "resource" && cn(SUBGRID, "min-h-16 px-3 py-3"),
+    variant === "resource" && nested && "pl-9",
+    table && cn(SUBGRID, "min-h-11 px-3 py-2"),
+    actionable && "hover:bg-hover",
+    selected && cn(
+      "bg-selection hover:bg-selection",
+      "before:absolute before:top-1/2 before:left-0 before:h-4 before:w-0.5 before:-translate-y-1/2 before:rounded-full before:bg-brand before:content-['']"
+    ),
+    // Focus ring on the whole row when its target has keyboard focus.
+    actionable && cn(
+      "has-[[data-row-action]:focus-visible]:outline-2 has-[[data-row-action]:focus-visible]:outline-brand/55",
+      catalog ? "has-[[data-row-action]:focus-visible]:outline-offset-2" : "has-[[data-row-action]:focus-visible]:-outline-offset-2"
+    ),
+    className
+  );
+  const content = /* @__PURE__ */ jsxs(RelativeTimeDefaultsContext.Provider, { value: ROW_TIME_DEFAULTS, children: [
+    table ? /* @__PURE__ */ jsx("div", { role: "rowheader", className: "flex min-w-0 items-center", children: main }) : main,
+    factColumns,
+    trailing
+  ] });
+  if (table) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "row",
+        "data-slot": "list-row",
+        "data-selected": selected || void 0,
+        "data-disabled": disabled || void 0,
+        "aria-disabled": disabled || void 0,
+        className: rowClass,
+        onClick: forwardClick,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "data-slot": "list-row",
+      "data-selected": selected || void 0,
+      "data-disabled": disabled || void 0,
+      "data-expanded": expandable ? expanded : void 0,
+      "aria-disabled": disabled || void 0,
+      className: cn("min-w-0", gridded && SUBGRID),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: rowClass, onClick: forwardClick, children: content }),
+        expandable && expanded && panel ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: panelId,
+            role: "region",
+            "aria-labelledby": titleId,
+            className: cn(
+              "col-span-full min-w-0 pr-3 pb-4",
+              catalog ? "pl-16" : nested && variant === "resource" ? "pl-20" : "pl-14"
+            ),
+            children: panel
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function MetaPart({
+  className,
+  children,
+  hidden = false,
+  order = 0,
+  keep = false,
+  oneLine = false
+}) {
+  const sizing = keep ? { flexShrink: 0 } : oneLine ? (
+    // Earlier parts fill to their full width before later ones grow past
+    // their few letters, so the line still gives way from the end.
+    { flexBasis: "3.5rem", flexGrow: 64 ** (4 - Math.min(order, 4)), flexShrink: 0 }
+  ) : { flexShrink: 64 ** Math.min(order, 4) };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": hidden || void 0,
+      style: sizing,
+      className: cn(
+        "flex min-w-0 items-center overflow-hidden whitespace-nowrap",
+        // max-content caps the growth; the 3.5rem basis is the most a part
+        // asks for before it fits, so a short fact never gains empty space.
+        oneLine && !keep ? "max-w-max" : "max-w-full",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "w-4 shrink-0 text-center text-fg-subtle", children: "\xB7" }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children })
+      ]
+    }
+  );
+}
+function ListRowSkeleton({ count = 3 }) {
+  const { variant, columns } = useRowList();
+  const table = variant === "table";
+  const catalog = variant === "catalog";
+  const tile = catalog ? "size-10 rounded-[10px]" : variant === "resource" ? "size-8 rounded-[10px]" : "size-6 rounded-[6px]";
+  const widths = ["w-2/5", "w-1/3", "w-1/2", "w-1/4"];
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: count }, (_, index) => {
+    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: cn("shrink-0 bg-surface-2", tile) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              className: cn("h-3.5 rounded-full bg-surface-2", widths[index % widths.length])
+            }
+          ),
+          table ? null : /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              className: cn(
+                "mt-2 h-3 rounded-full bg-surface-2",
+                catalog ? "w-4/5" : "w-3/5"
+              )
+            }
+          )
+        ] })
+      ] }),
+      catalog ? null : columns.map((column) => /* @__PURE__ */ jsxs("div", { className: "hidden min-w-0 @[640px]/list:block", children: [
+        table ? null : /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-12 rounded-full bg-surface-2" }),
+        /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            className: cn("h-3 w-20 rounded-full bg-surface-2", !table && "mt-1.5")
+          }
+        )
+      ] }, column.id)),
+      catalog ? null : /* @__PURE__ */ jsx("div", {})
+    ] });
+    const rowClass = cn(
+      "min-w-0 items-center",
+      catalog && "flex min-h-[76px] gap-3 px-3 py-3.5",
+      // One fixed height per list type: 64px resource rows (title plus one
+      // secondary line; a title-only row centers in the same height).
+      variant === "resource" && cn(SUBGRID, "min-h-16 px-3 py-3"),
+      table && cn(SUBGRID, "min-h-11 px-3 py-2")
+    );
+    return table ? (
+      // oxlint-disable-next-line react/no-array-index-key -- identical placeholders
+      /* @__PURE__ */ jsx("div", { role: "row", "aria-hidden": "true", className: rowClass, children: inner }, index)
+    ) : (
+      // oxlint-disable-next-line react/no-array-index-key -- identical placeholders
+      /* @__PURE__ */ jsx("li", { "aria-hidden": "true", className: cn(!catalog && SUBGRID), children: /* @__PURE__ */ jsx("div", { className: rowClass, children: inner }) }, index)
+    );
+  }) });
+}
+
+export {
+  useRowListVariant,
+  RowList,
+  RowIndicator,
+  ListRow,
+  ListRowSkeleton
+};
+//# sourceMappingURL=chunk-54YW6SZZ.js.map