@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/Surface.js

@@ -0,0 +1,210 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { Separator as x } from "@base-ui/react/separator";
+import { ScrollArea as o } from "@base-ui/react/scroll-area";
+import { Collapsible as d } from "@base-ui/react/collapsible";
+import { cn as l } from "../lib/cn.js";
+import { Icon as p } from "./Icon.js";
+function j({ orientation: r = "horizontal", label: a, className: t, ref: n }) {
+  return a ? /* @__PURE__ */ s("div", { className: l("flex items-center gap-3", t), role: "separator", children: [
+    /* @__PURE__ */ e("span", { className: "h-px flex-1 bg-border-subtle" }),
+    /* @__PURE__ */ e("span", { className: "text-2xs font-semibold tracking-widest text-tertiary uppercase", children: a }),
+    /* @__PURE__ */ e("span", { className: "h-px flex-1 bg-border-subtle" })
+  ] }) : /* @__PURE__ */ e(
+    x,
+    {
+      ref: n,
+      orientation: r,
+      className: l(
+        "shrink-0 bg-border-subtle",
+        r === "horizontal" ? "h-px w-full" : "h-full w-px",
+        t
+      )
+    }
+  );
+}
+function C({ children: r, maxHeight: a, className: t }) {
+  return /* @__PURE__ */ s(o.Root, { className: l("relative min-w-0", t), children: [
+    /* @__PURE__ */ e(
+      o.Viewport,
+      {
+        className: "size-full overscroll-contain rounded-[inherit]",
+        style: a ? { maxHeight: a } : void 0,
+        children: /* @__PURE__ */ e(o.Content, { children: r })
+      }
+    ),
+    /* @__PURE__ */ e(
+      o.Scrollbar,
+      {
+        orientation: "vertical",
+        className: l(
+          "flex w-2.5 touch-none justify-center p-0.5 select-none",
+          "opacity-0 transition-[var(--tx-colors),opacity] duration-(--dur-base)",
+          "data-hovering:opacity-100 data-scrolling:opacity-100"
+        ),
+        children: /* @__PURE__ */ e(o.Thumb, { className: "w-1.5 rounded-full bg-border-strong transition-colors duration-(--dur-fast) hover:bg-border-interactive" })
+      }
+    ),
+    /* @__PURE__ */ e(
+      o.Scrollbar,
+      {
+        orientation: "horizontal",
+        className: l(
+          "flex h-2.5 touch-none flex-col justify-center p-0.5 select-none",
+          "opacity-0 transition-[var(--tx-colors),opacity] duration-(--dur-base)",
+          "data-hovering:opacity-100 data-scrolling:opacity-100"
+        ),
+        children: /* @__PURE__ */ e(o.Thumb, { className: "h-1.5 rounded-full bg-border-strong transition-colors duration-(--dur-fast) hover:bg-border-interactive" })
+      }
+    )
+  ] });
+}
+function b({ className: r, ...a }) {
+  return /* @__PURE__ */ e(d.Root, { className: l(r), ...a });
+}
+function f({ className: r, ...a }) {
+  return /* @__PURE__ */ e(
+    d.Trigger,
+    {
+      className: l(
+        "cursor-pointer text-left outline-none transition-colors duration-(--dur-fast)",
+        r
+      ),
+      ...a
+    }
+  );
+}
+function h({ className: r, ...a }) {
+  return /* @__PURE__ */ e(
+    d.Panel,
+    {
+      className: l(
+        "overflow-hidden",
+        "h-(--collapsible-panel-height) transition-[var(--tx-colors),height,opacity] duration-(--dur-slow) ease-emphasis",
+        "data-starting-style:h-0 data-starting-style:opacity-0",
+        "data-ending-style:h-0 data-ending-style:opacity-0 data-ending-style:duration-(--dur-exit-slow)",
+        r
+      ),
+      ...a
+    }
+  );
+}
+function T({
+  trigger: r,
+  defaultOpen: a,
+  open: t,
+  onOpenChange: n,
+  triggerClassName: i,
+  chevron: c = !0,
+  children: m,
+  className: u
+}) {
+  return /* @__PURE__ */ s(
+    b,
+    {
+      defaultOpen: a,
+      open: t,
+      onOpenChange: n,
+      className: l("flex min-w-0 flex-col", u),
+      children: [
+        /* @__PURE__ */ s(
+          f,
+          {
+            className: l(
+              "group/collapsible flex items-center gap-2 self-start rounded-md",
+              "text-sm font-medium text-secondary",
+              "hover:text-primary",
+              i
+            ),
+            children: [
+              c && /* @__PURE__ */ e(
+                p,
+                {
+                  name: "chevron-right",
+                  size: "sm",
+                  className: "transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-base) ease-snappy group-data-panel-open/collapsible:rotate-90"
+                }
+              ),
+              r
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e("div", { className: "pt-3", children: m }) })
+      ]
+    }
+  );
+}
+function E({
+  icon: r,
+  title: a,
+  description: t,
+  action: n,
+  secondaryAction: i,
+  className: c
+}) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: l(
+        "flex flex-col items-center justify-center gap-3 px-6 py-16 text-center",
+        c
+      ),
+      children: [
+        /* @__PURE__ */ e("span", { className: "grid size-14 place-items-center rounded-2xl bg-surface-hover text-tertiary", children: r ?? /* @__PURE__ */ e(p, { name: "folder-open", size: "lg" }) }),
+        /* @__PURE__ */ s("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ e("p", { className: "font-display text-md font-semibold text-primary text-balance", children: a }),
+          t && /* @__PURE__ */ e("div", { className: "mx-auto max-w-sm text-sm leading-relaxed text-tertiary text-pretty", children: t })
+        ] }),
+        (n || i) && /* @__PURE__ */ s("div", { className: "mt-1 flex flex-wrap items-center justify-center gap-2.5", children: [
+          n,
+          i
+        ] })
+      ]
+    }
+  );
+}
+const g = {
+  neutral: "border-border bg-surface text-tertiary",
+  accent: "border-accent-border bg-accent-subtle text-accent-text",
+  success: "border-success-border bg-success-subtle text-success-text",
+  warning: "border-warning-border bg-warning-subtle text-warning-text",
+  danger: "border-danger-border bg-danger-subtle text-danger-text"
+};
+function k({ items: r, className: a }) {
+  return /* @__PURE__ */ e("ol", { className: l("flex min-w-0 flex-col", a), children: r.map((t, n) => /* @__PURE__ */ s("li", { className: "relative flex min-w-0 gap-4 pb-6 last:pb-0", children: [
+    n < r.length - 1 && /* @__PURE__ */ e(
+      "span",
+      {
+        "aria-hidden": !0,
+        className: "absolute top-9 bottom-0 left-4 w-px -translate-x-1/2 bg-border-subtle"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: l(
+          "relative z-1 grid size-8 shrink-0 place-items-center rounded-full border",
+          g[t.tone ?? "neutral"]
+        ),
+        children: t.icon ?? /* @__PURE__ */ e(p, { name: "circle-dot", size: "sm" })
+      }
+    ),
+    /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 pt-1", children: [
+      /* @__PURE__ */ s("div", { className: "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-0.5", children: [
+        /* @__PURE__ */ e("span", { className: "text-sm font-medium text-primary", children: t.title }),
+        t.timestamp && /* @__PURE__ */ e("span", { className: "font-mono text-2xs tabular-nums text-tertiary", children: t.timestamp })
+      ] }),
+      t.description && /* @__PURE__ */ e("div", { className: "text-sm text-secondary text-pretty", children: t.description })
+    ] })
+  ] }, t.id)) });
+}
+export {
+  T as Collapsible,
+  h as CollapsiblePanel,
+  b as CollapsibleRoot,
+  f as CollapsibleTrigger,
+  E as EmptyState,
+  C as ScrollArea,
+  j as Separator,
+  k as Timeline
+};
+//# sourceMappingURL=Surface.js.map

package/dist/components/Surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.js","sources":["../../src/components/Surface.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode, Ref } from \"react\";\nimport { Separator as BaseSeparator } from \"@base-ui/react/separator\";\nimport { ScrollArea as BaseScrollArea } from \"@base-ui/react/scroll-area\";\nimport { Collapsible as BaseCollapsible } from \"@base-ui/react/collapsible\";\nimport { cn } from \"../lib/cn\";\nimport { Icon } from \"./Icon\";\n\n/* ============================================================================\n   SEPARATOR · SCROLL AREA · COLLAPSIBLE · EMPTY STATE\n   The small structural pieces. Individually unremarkable, collectively the\n   difference between a set of components and a system.\n   ========================================================================= */\n\nexport interface SeparatorProps {\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Text or a chip centred on the line — \"or\", \"Today\", a count. */\n  label?: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A rule.\n *\n * With a label it becomes two rules with content between them, which is the\n * only correct way to do it — a background-coloured span sitting on top of one\n * continuous line looks right until the surface behind it changes, and then\n * the patch is visible.\n */\nexport function Separator({ orientation = \"horizontal\", label, className, ref }: SeparatorProps) {\n  if (label) {\n    return (\n      <div className={cn(\"flex items-center gap-3\", className)} role=\"separator\">\n        <span className=\"h-px flex-1 bg-border-subtle\" />\n        <span className=\"text-2xs font-semibold tracking-widest text-tertiary uppercase\">\n          {label}\n        </span>\n        <span className=\"h-px flex-1 bg-border-subtle\" />\n      </div>\n    );\n  }\n\n  return (\n    <BaseSeparator\n      ref={ref}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border-subtle\",\n        orientation === \"horizontal\" ? \"h-px w-full\" : \"h-full w-px\",\n        className,\n      )}\n    />\n  );\n}\n\nexport interface ScrollAreaProps {\n  children: ReactNode;\n  /** Caps the height and scrolls internally. */\n  maxHeight?: string;\n  className?: string;\n}\n\n/**\n * A scrollable region with a styled, always-consistent scrollbar.\n *\n * Native scrollbars differ per platform: macOS overlays and hides them, Windows\n * reserves a permanent 17px gutter. That difference silently changes your\n * content width between platforms, which is why a layout that fits on a Mac\n * wraps on Windows. This reserves nothing and draws its own.\n *\n * The scrollbar FADES IN on hover and interaction rather than sitting there —\n * present when you are steering, invisible when you are reading.\n */\nexport function ScrollArea({ children, maxHeight, className }: ScrollAreaProps) {\n  return (\n    <BaseScrollArea.Root className={cn(\"relative min-w-0\", className)}>\n      <BaseScrollArea.Viewport\n        className=\"size-full overscroll-contain rounded-[inherit]\"\n        style={maxHeight ? { maxHeight } : undefined}\n      >\n        <BaseScrollArea.Content>{children}</BaseScrollArea.Content>\n      </BaseScrollArea.Viewport>\n\n      <BaseScrollArea.Scrollbar\n        orientation=\"vertical\"\n        className={cn(\n          \"flex w-2.5 touch-none justify-center p-0.5 select-none\",\n          \"opacity-0 transition-[var(--tx-colors),opacity] duration-(--dur-base)\",\n          \"data-hovering:opacity-100 data-scrolling:opacity-100\",\n        )}\n      >\n        <BaseScrollArea.Thumb className=\"w-1.5 rounded-full bg-border-strong transition-colors duration-(--dur-fast) hover:bg-border-interactive\" />\n      </BaseScrollArea.Scrollbar>\n\n      <BaseScrollArea.Scrollbar\n        orientation=\"horizontal\"\n        className={cn(\n          \"flex h-2.5 touch-none flex-col justify-center p-0.5 select-none\",\n          \"opacity-0 transition-[var(--tx-colors),opacity] duration-(--dur-base)\",\n          \"data-hovering:opacity-100 data-scrolling:opacity-100\",\n        )}\n      >\n        <BaseScrollArea.Thumb className=\"h-1.5 rounded-full bg-border-strong transition-colors duration-(--dur-fast) hover:bg-border-interactive\" />\n      </BaseScrollArea.Scrollbar>\n    </BaseScrollArea.Root>\n  );\n}\n\n/* ----------------------------------------------------------------------------\n   COLLAPSIBLE, HEADLESS PARTS (DX-3406).\n\n   `Collapsible` below is the fully-composed disclosure: one wrapper renders\n   the trigger row (chevron + content) and the panel nested directly under\n   it, in that fixed shape. That shape is wrong for a consumer whose trigger\n   needs to share its row with something else — an action button, a badge —\n   and whose panel needs to render full-width below the ROW, not indented\n   under the trigger button itself. Three consumers (`CardDisclosure.tsx` in\n   the `danxbot` repo's board UI, and the two `docs-step-list` diagrams\n   before their own gap closes separately) hand-rolled that shape themselves\n   for exactly this reason, each re-deriving Base UI's linkage by hand.\n\n   These three parts are that gap closed: `CollapsibleRoot` /\n   `CollapsibleTrigger` / `CollapsiblePanel` wrap the identical\n   `BaseCollapsible.Root` / `.Trigger` / `.Panel` primitives `Collapsible`\n   itself uses, so `aria-controls` / the panel's `id` are the REAL Base UI\n   pairing — computed from React context, not DOM adjacency — never a\n   hand-rolled `useId()` a consumer has to reimplement. Because the pairing\n   is context-based, `CollapsibleTrigger` and `CollapsiblePanel` only need to\n   share a `CollapsibleRoot` ancestor; they can be independent siblings with\n   arbitrary other content between them, in any layout the consumer wants.\n\n   Each part carries only the styling its bare DOM role needs (interactivity\n   cues on the trigger, the height-animation recipe on the panel) — no\n   forced flex row, no auto-chevron, no wrapping padding div. `Collapsible`\n   is rebuilt on top of these three so the animation/interaction recipe is\n   defined in exactly one place; its own public shape and rendered output\n   are unchanged for its existing consumers (`Message.tsx`'s tool-output and\n   reasoning disclosures, `SettingRow.tsx`, the demo pages).\n   -------------------------------------------------------------------------- */\n\nexport interface CollapsibleRootProps\n  extends Omit<ComponentProps<typeof BaseCollapsible.Root>, \"render\"> {}\n\n/**\n * Groups a `CollapsibleTrigger` and a `CollapsiblePanel` (or several of\n * either) that can live anywhere as siblings underneath it — the headless\n * counterpart to the fully-composed `Collapsible` below. Renders a plain\n * `<div>` (Base UI's own default); pass `className` for whatever layout the\n * trigger row and panel need to share, or leave it unset to render no box\n * at all beyond that default.\n */\nexport function CollapsibleRoot({ className, ...props }: CollapsibleRootProps) {\n  return <BaseCollapsible.Root className={cn(className)} {...props} />;\n}\n\nexport interface CollapsibleTriggerProps\n  extends Omit<ComponentProps<typeof BaseCollapsible.Trigger>, \"render\"> {}\n\n/**\n * The bare trigger `<button>` half of the headless `Collapsible` parts —\n * real Base UI `aria-controls`/`aria-expanded` wiring, zero imposed layout.\n * Unlike `Collapsible`'s own trigger, this draws no chevron and forces no\n * flex row: the caller's `children` are the ENTIRE button content, laid out\n * however the caller wants (e.g. sharing a row with an unrelated `action`\n * control that is NOT itself part of this button, rendered as a sibling\n * outside it).\n */\nexport function CollapsibleTrigger({ className, ...props }: CollapsibleTriggerProps) {\n  return (\n    <BaseCollapsible.Trigger\n      className={cn(\n        \"cursor-pointer text-left outline-none transition-colors duration-(--dur-fast)\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface CollapsiblePanelProps\n  extends Omit<ComponentProps<typeof BaseCollapsible.Panel>, \"render\"> {}\n\n/**\n * The bare panel half of the headless `Collapsible` parts — same\n * height-animation recipe `Collapsible`'s own panel uses, with no forced\n * inner padding wrapper, so the caller controls its own spacing.\n */\nexport function CollapsiblePanel({ className, ...props }: CollapsiblePanelProps) {\n  return (\n    <BaseCollapsible.Panel\n      className={cn(\n        \"overflow-hidden\",\n        \"h-(--collapsible-panel-height) transition-[var(--tx-colors),height,opacity] duration-(--dur-slow) ease-emphasis\",\n        \"data-starting-style:h-0 data-starting-style:opacity-0\",\n        \"data-ending-style:h-0 data-ending-style:opacity-0 data-ending-style:duration-(--dur-exit-slow)\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface CollapsibleProps {\n  /**\n   * The trigger's CONTENT — not a button.\n   *\n   * This component supplies the button itself, so passing one nests a button\n   * inside a button: invalid HTML, and unreachable by keyboard past the outer\n   * one. The prop is content-only by design, which removes the possibility\n   * rather than documenting against it.\n   */\n  trigger: ReactNode;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Restyles the trigger — for disclosures whose header is a full-width row\n   * rather than a line of text, which is most of them outside prose.\n   */\n  triggerClassName?: string;\n  /**\n   * Draws the leading chevron. Turn it off when the trigger places its own\n   * (trailing, usually) and rotate it with\n   * `group-data-panel-open/collapsible:rotate-90`.\n   */\n  chevron?: boolean;\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * One disclosure, without the accordion around it.\n *\n * Height animates from `--collapsible-panel-height`, which Base UI publishes —\n * no measuring, no effect, no frame of lag on first open. Built on the\n * headless `CollapsibleRoot`/`CollapsibleTrigger`/`CollapsiblePanel` parts\n * above — see their own doc if this fixed trigger-row-plus-nested-panel\n * shape doesn't fit your consumer.\n */\nexport function Collapsible({\n  trigger,\n  defaultOpen,\n  open,\n  onOpenChange,\n  triggerClassName,\n  chevron = true,\n  children,\n  className,\n}: CollapsibleProps) {\n  return (\n    <CollapsibleRoot\n      defaultOpen={defaultOpen}\n      open={open}\n      onOpenChange={onOpenChange}\n      className={cn(\"flex min-w-0 flex-col\", className)}\n    >\n      <CollapsibleTrigger\n        className={cn(\n          \"group/collapsible flex items-center gap-2 self-start rounded-md\",\n          \"text-sm font-medium text-secondary\",\n          \"hover:text-primary\",\n          triggerClassName,\n        )}\n      >\n        {chevron && (\n          <Icon\n            name=\"chevron-right\"\n            size=\"sm\"\n            className=\"transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-base) ease-snappy group-data-panel-open/collapsible:rotate-90\"\n          />\n        )}\n        {trigger}\n      </CollapsibleTrigger>\n\n      <CollapsiblePanel>\n        <div className=\"pt-3\">{children}</div>\n      </CollapsiblePanel>\n    </CollapsibleRoot>\n  );\n}\n\nexport interface EmptyStateProps {\n  icon?: ReactNode;\n  title: ReactNode;\n  description?: ReactNode;\n  /** The primary way out. An empty state without one is a dead end. */\n  action?: ReactNode;\n  /** A quieter alternative — \"learn more\", \"clear filters\". */\n  secondaryAction?: ReactNode;\n  className?: string;\n}\n\n/**\n * Nothing here — and what to do about it.\n *\n * The action is the point. An empty state that only apologises leaves someone\n * exactly where they started; the two questions worth answering are \"why is\n * this empty\" and \"what do I press\". \"No results\" with a Clear filters button\n * is a different experience from \"No results\" alone, and it is the same amount\n * of screen.\n */\nexport function EmptyState({\n  icon,\n  title,\n  description,\n  action,\n  secondaryAction,\n  className,\n}: EmptyStateProps) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center gap-3 px-6 py-16 text-center\",\n        className,\n      )}\n    >\n      <span className=\"grid size-14 place-items-center rounded-2xl bg-surface-hover text-tertiary\">\n        {icon ?? <Icon name=\"folder-open\" size=\"lg\" />}\n      </span>\n      <div className=\"flex flex-col gap-1\">\n        <p className=\"font-display text-md font-semibold text-primary text-balance\">{title}</p>\n        {/* `div` for the same reason as `Timeline`'s description below: the\n            prop is `ReactNode`, so block-level content is legal to pass and\n            illegal to nest in a `<p>`. */}\n        {description && (\n          <div className=\"mx-auto max-w-sm text-sm leading-relaxed text-tertiary text-pretty\">\n            {description}\n          </div>\n        )}\n      </div>\n      {(action || secondaryAction) && (\n        <div className=\"mt-1 flex flex-wrap items-center justify-center gap-2.5\">\n          {action}\n          {secondaryAction}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface TimelineItem {\n  id: string;\n  title: ReactNode;\n  description?: ReactNode;\n  timestamp?: ReactNode;\n  icon?: ReactNode;\n  tone?: \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\n}\n\nconst TIMELINE_TONE: Record<string, string> = {\n  neutral: \"border-border bg-surface text-tertiary\",\n  accent: \"border-accent-border bg-accent-subtle text-accent-text\",\n  success: \"border-success-border bg-success-subtle text-success-text\",\n  warning: \"border-warning-border bg-warning-subtle text-warning-text\",\n  danger: \"border-danger-border bg-danger-subtle text-danger-text\",\n};\n\nexport interface TimelineProps {\n  items: TimelineItem[];\n  className?: string;\n}\n\n/**\n * A vertical sequence of events.\n *\n * The connecting line is drawn per item and stops at the LAST one, rather than\n * being one line behind everything. A single full-height line runs past the\n * final marker into empty space, which reads as \"and then something else\n * happened\" — the opposite of what a finished timeline means.\n */\nexport function Timeline({ items, className }: TimelineProps) {\n  return (\n    <ol className={cn(\"flex min-w-0 flex-col\", className)}>\n      {items.map((item, i) => (\n        <li key={item.id} className=\"relative flex min-w-0 gap-4 pb-6 last:pb-0\">\n          {i < items.length - 1 && (\n            <span\n              aria-hidden\n              className=\"absolute top-9 bottom-0 left-4 w-px -translate-x-1/2 bg-border-subtle\"\n            />\n          )}\n          <span\n            className={cn(\n              \"relative z-1 grid size-8 shrink-0 place-items-center rounded-full border\",\n              TIMELINE_TONE[item.tone ?? \"neutral\"],\n            )}\n          >\n            {item.icon ?? <Icon name=\"circle-dot\" size=\"sm\" />}\n          </span>\n          <div className=\"flex min-w-0 flex-1 flex-col gap-0.5 pt-1\">\n            <div className=\"flex flex-wrap items-baseline justify-between gap-x-4 gap-y-0.5\">\n              <span className=\"text-sm font-medium text-primary\">{item.title}</span>\n              {item.timestamp && (\n                <span className=\"font-mono text-2xs tabular-nums text-tertiary\">\n                  {item.timestamp}\n                </span>\n              )}\n            </div>\n            {/* A `div`, NOT a `p`, and the type is why. `description` is declared\n                `ReactNode`, so a consumer is entitled to pass a disclosure, a\n                code block, anything — and all of those are block-level\n                content, which is INVALID inside a `<p>`. The cost is not\n                theoretical: the first consumer that needed one abandoned this\n                component and hand-rolled the same markup rather than fight it.\n                Identical classes, so nothing renders differently. */}\n            {item.description && (\n              <div className=\"text-sm text-secondary text-pretty\">{item.description}</div>\n            )}\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n}\n\n"],"names":["Separator","orientation","label","className","ref","jsxs","cn","jsx","BaseSeparator","ScrollArea","children","maxHeight","BaseScrollArea","CollapsibleRoot","props","BaseCollapsible","CollapsibleTrigger","CollapsiblePanel","Collapsible","trigger","defaultOpen","open","onOpenChange","triggerClassName","chevron","Icon","EmptyState","icon","title","description","action","secondaryAction","TIMELINE_TONE","Timeline","items","item","i"],"mappings":"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"}

package/dist/components/Table.js

@@ -0,0 +1,300 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { useState as R, useMemo as Q } from "react";
+import { useReactTable as X, getPaginationRowModel as Y, getFilteredRowModel as ee, getSortedRowModel as te, getCoreRowModel as oe, flexRender as b } from "@tanstack/react-table";
+import { cn as s } from "../lib/cn.js";
+import { Checkbox as A } from "./Choice.js";
+import { Icon as ne } from "./Icon.js";
+import { LoadingOverlay as ae, Skeleton as re } from "./Loading.js";
+import { PaginationBar as le } from "./PaginationBar.js";
+import { EmptyState as se } from "./Surface.js";
+import { useUiStrings as E } from "../lib/i18n/provider.js";
+import { useNumberFormat as ie } from "../lib/i18n/number-format.js";
+const ce = (l) => /* @__PURE__ */ o("span", { className: "font-semibold text-accent-text", children: l }), de = [10, 25, 50, 100], _ = {
+  comfortable: "h-16",
+  cozy: "h-[3.25rem]",
+  compact: "h-11"
+}, x = {
+  comfortable: "px-5 text-sm",
+  cozy: "px-4 text-sm",
+  compact: "px-3 text-xs"
+};
+function me(l, i) {
+  const r = [];
+  for (let a = 0; a < l.length; ) {
+    const m = Math.max(1, Math.min(i(l[a].column.id) ?? 1, l.length - a));
+    r.push({ cell: l[a], span: m }), a += m;
+  }
+  return r;
+}
+function Ne({
+  data: l,
+  columns: i,
+  density: r = "cozy",
+  selectable: a = !1,
+  maxHeight: m,
+  zebra: F = !1,
+  loading: g = !1,
+  refreshing: T = !1,
+  loadingRows: O = 6,
+  pageSize: S,
+  pageSizeOptions: L,
+  onPageSizeChange: $,
+  emptyState: j,
+  getRowClassName: B,
+  onRowClick: w,
+  getCellSpan: U,
+  toolbar: V,
+  className: G,
+  getRowId: P
+}) {
+  const p = E().table, h = ie(), [z, H] = R([]), [C, W] = R({}), v = typeof S == "number" && S > 0, [f, k] = R({
+    pageIndex: 0,
+    pageSize: S ?? 0
+  }), M = Q(() => a ? [{
+    id: "__select",
+    size: 52,
+    meta: { width: "52px" },
+    enableSorting: !1,
+    header: ({ table: e }) => /* @__PURE__ */ o(
+      A,
+      {
+        size: "sm",
+        checked: e.getIsAllPageRowsSelected(),
+        indeterminate: e.getIsSomePageRowsSelected(),
+        onCheckedChange: (n) => e.toggleAllPageRowsSelected(n),
+        "aria-label": p.selectAll
+      }
+    ),
+    cell: ({ row: e }) => (
+      /* stopPropagation so ticking a row inside a clickable table does not
+         also fire the row's navigation handler. */
+      /* @__PURE__ */ o("div", { onClick: (n) => n.stopPropagation(), children: /* @__PURE__ */ o(
+        A,
+        {
+          size: "sm",
+          checked: e.getIsSelected(),
+          onCheckedChange: (n) => e.toggleSelected(n),
+          "aria-label": p.selectRow(h(e.index + 1))
+        }
+      ) })
+    )
+  }, ...i] : i, [i, a, p, h]), d = X({
+    data: l,
+    columns: M,
+    state: v ? { sorting: z, rowSelection: C, pagination: f } : { sorting: z, rowSelection: C },
+    onSortingChange: H,
+    onRowSelectionChange: W,
+    enableRowSelection: a,
+    getCoreRowModel: oe(),
+    getSortedRowModel: te(),
+    getFilteredRowModel: ee(),
+    /* CONDITIONAL ON PURPOSE. TanStack paginates whenever this row model is
+       registered — there is no "register it but leave it off". Registering it
+       unconditionally would silently truncate every existing table that never
+       asked for pages, which is exactly the regression `pageSize` being
+       opt-in is meant to prevent. */
+    ...v ? { getPaginationRowModel: Y(), onPaginationChange: k } : {},
+    ...P ? { getRowId: P } : {}
+  }), D = d.getRowModel().rows, Z = !g && D.length === 0, I = M.length, y = d.getFilteredRowModel().rows.length, N = i.some((t) => t.meta?.width !== void 0), q = d.getAllLeafColumns().some((t) => t.columnDef.footer !== void 0), J = Array.from(
+    /* @__PURE__ */ new Set([...L ?? de, f.pageSize])
+  ).sort((t, e) => t - e);
+  function K(t) {
+    k({ pageIndex: 0, pageSize: t }), $?.(t);
+  }
+  return /* @__PURE__ */ u("div", { className: s("flex min-w-0 flex-col gap-3", G), children: [
+    V?.(d),
+    /* @__PURE__ */ o(
+      ae,
+      {
+        active: T && !g,
+        message: p.updating,
+        className: s(
+          "min-w-0 overflow-hidden rounded-xl border border-border bg-surface",
+          "shadow-sm"
+        ),
+        children: /* @__PURE__ */ o(
+          "div",
+          {
+            className: "w-full overflow-auto overscroll-x-contain",
+            style: m ? { maxHeight: m } : void 0,
+            children: /* @__PURE__ */ u("table", { className: s("w-full border-collapse text-left", N && "table-fixed"), children: [
+              N && /* @__PURE__ */ o("colgroup", { children: d.getVisibleLeafColumns().map((t) => /* @__PURE__ */ o(
+                "col",
+                {
+                  style: { width: t.columnDef.meta?.width }
+                },
+                t.id
+              )) }),
+              /* @__PURE__ */ o("thead", { className: "sticky top-0 z-10", children: d.getHeaderGroups().map((t) => /* @__PURE__ */ o("tr", { children: t.headers.map((e) => {
+                const n = e.column.getCanSort(), c = e.column.getIsSorted();
+                return /* @__PURE__ */ o(
+                  "th",
+                  {
+                    scope: "col",
+                    colSpan: e.colSpan,
+                    style: !N && e.column.columnDef.size ? { width: `${e.column.columnDef.size}px` } : void 0,
+                    "aria-sort": c === "asc" ? "ascending" : c === "desc" ? "descending" : n ? "none" : void 0,
+                    className: s(
+                      "h-12 whitespace-nowrap border-b border-border bg-surface-raised",
+                      "font-semibold uppercase tracking-widest text-2xs text-tertiary",
+                      x[r]
+                    ),
+                    children: e.isPlaceholder ? null : n ? /* @__PURE__ */ u(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: e.column.getToggleSortingHandler(),
+                        className: s(
+                          "dx-tap group/sort -mx-1.5 flex h-8 items-center gap-1.5 rounded-sm px-1.5",
+                          "uppercase tracking-widest transition-colors duration-(--dur-fast)",
+                          "hover:text-primary",
+                          c && "text-accent-text"
+                        ),
+                        children: [
+                          b(e.column.columnDef.header, e.getContext()),
+                          /* @__PURE__ */ o(
+                            ne,
+                            {
+                              name: "arrow-up",
+                              size: "xs",
+                              className: s(
+                                "transition-[var(--tx-colors),rotate,opacity] duration-(--dur-base) ease-snappy",
+                                c === "desc" && "rotate-180",
+                                !c && "opacity-0 group-hover/sort:opacity-40"
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    ) : b(e.column.columnDef.header, e.getContext())
+                  },
+                  e.id
+                );
+              }) }, t.id)) }),
+              /* @__PURE__ */ u("tbody", { children: [
+                g && Array.from({ length: O }).map((t, e) => /* @__PURE__ */ o("tr", { className: _[r], children: Array.from({ length: I }).map((n, c) => /* @__PURE__ */ o("td", { className: s("border-b border-border-subtle", x[r]), children: /* @__PURE__ */ o(
+                  re,
+                  {
+                    shape: "pill",
+                    height: "0.875rem",
+                    width: `${[68, 44, 82, 55, 72, 38][c % 6]}%`,
+                    style: { animationDelay: `${Math.min(e, 8) * 40}ms` }
+                  }
+                ) }, c)) }, `skeleton-${e}`)),
+                !g && D.map((t) => {
+                  const e = t.getIsSelected();
+                  return /* @__PURE__ */ o(
+                    "tr",
+                    {
+                      "data-selected": e || void 0,
+                      onClick: w ? () => w(t.original) : void 0,
+                      className: s(
+                        _[r],
+                        "border-b border-border-subtle transition-colors duration-(--dur-fast)",
+                        "last:border-b-0",
+                        F && "even:bg-surface-sunken/40",
+                        w && "cursor-pointer",
+                        /* One hover fill per row, picked here. As two classes
+                           they weigh the same and CLASS ORDER decided which a
+                           hovered selected row got; when the neutral one won,
+                           the row lost its selection while the pointer was on
+                           it. */
+                        e ? "bg-surface-selected hover:bg-surface-selected-hover" : "hover:bg-surface-hover",
+                        /* LAST, so the consumer's mark beats everything above
+                           it — see the prop's own doc for what that costs. */
+                        B?.(t.original, t.index)
+                      ),
+                      children: me(t.getVisibleCells(), (n) => U?.(t.original, n)).map(
+                        ({ cell: n, span: c }) => /* @__PURE__ */ o(
+                          "td",
+                          {
+                            colSpan: c > 1 ? c : void 0,
+                            className: s("align-middle text-primary", x[r]),
+                            children: b(n.column.columnDef.cell, n.getContext())
+                          },
+                          n.id
+                        )
+                      )
+                    },
+                    t.id
+                  );
+                }),
+                Z && /* @__PURE__ */ o("tr", { children: /* @__PURE__ */ o("td", { colSpan: I, className: "p-0", children: j ?? /* @__PURE__ */ o(ge, {}) }) })
+              ] }),
+              q && !g && /* @__PURE__ */ o("tfoot", { children: d.getFooterGroups().map((t) => /* @__PURE__ */ o("tr", { children: t.headers.map((e) => /* @__PURE__ */ o(
+                "td",
+                {
+                  colSpan: e.colSpan,
+                  className: s(
+                    /* PINNED ON THE CELLS, not on the `<tfoot>`. The
+                       opaque background has to sit on whatever is pinned
+                       — a translucent sticky element lets the rows scroll
+                       through it, which reads as a rendering bug — and
+                       these are the elements that paint. Splitting the
+                       two across different elements is how they end up
+                       disagreeing. */
+                    "sticky bottom-0 z-10 h-12 whitespace-nowrap bg-surface-raised",
+                    "border-t border-border font-semibold text-primary tabular-nums",
+                    x[r]
+                  ),
+                  children: e.isPlaceholder ? null : b(e.column.columnDef.footer, e.getContext())
+                },
+                e.id
+              )) }, t.id)) })
+            ] })
+          }
+        )
+      }
+    ),
+    a && Object.keys(C).length > 0 && /* @__PURE__ */ o("p", { className: "text-xs text-secondary animate-fade-in", "aria-live": "polite", children: p.selectedCount(d.getSelectedRowModel().rows.length, h(d.getSelectedRowModel().rows.length), h(y), ce) }),
+    v && !g && y > 0 && /* @__PURE__ */ o(
+      le,
+      {
+        mode: "numbered",
+        label: p.paginationLabel,
+        page: f.pageIndex + 1,
+        pageSize: f.pageSize,
+        pageSizeOptions: J,
+        total: y,
+        onPageChange: (t) => d.setPageIndex(t - 1),
+        onPageSizeChange: K
+      }
+    )
+  ] });
+}
+function ge({
+  icon: l,
+  title: i,
+  description: r,
+  action: a
+}) {
+  const m = E().table;
+  return /* @__PURE__ */ o(se, { icon: l, title: i ?? m.emptyTitle, description: r, action: a });
+}
+function Re({
+  primary: l,
+  secondary: i,
+  mono: r = !1,
+  wrapSecondary: a = !1
+}) {
+  return /* @__PURE__ */ u("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ o("div", { className: s("truncate font-medium text-primary", r && "font-mono text-xs"), children: l }),
+    i && /* @__PURE__ */ o(
+      "div",
+      {
+        className: s(
+          "mt-0.5 text-xs text-tertiary",
+          a ? "whitespace-normal break-words" : "truncate"
+        ),
+        children: i
+      }
+    )
+  ] });
+}
+export {
+  Re as CellStack,
+  Ne as DataTable,
+  ge as TableEmptyState,
+  me as visibleBodyCells
+};
+//# sourceMappingURL=Table.js.map

package/dist/components/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../src/components/Table.tsx"],"sourcesContent":["import {\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type PaginationState,\n  type RowData,\n  type RowSelectionState,\n  type SortingState,\n  type Table as TanstackTable,\n} from \"@tanstack/react-table\";\nimport { cn } from \"../lib/cn\";\nimport { useNumberFormat, useUiStrings, type Emphasis } from \"../lib/i18n\";\n\n/* The count in \"N of M selected\" keeps the accent the table has always given it. */\nconst selectedCountEmphasis: Emphasis = (count) => <span className=\"font-semibold text-accent-text\">{count}</span>;\nimport { Checkbox } from \"./Choice\";\nimport { Icon } from \"./Icon\";\nimport { LoadingOverlay, Skeleton } from \"./Loading\";\nimport { PaginationBar } from \"./PaginationBar\";\nimport { EmptyState } from \"./Surface\";\n\n/** Offered whenever a paginated table does not name its own options. */\nconst DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100] as const;\n\n/* ----------------------------------------------------------------------------\n   DataTable\n\n   Headless logic (TanStack Table) + our presentation. The two decisions that\n   make a table read as designed rather than defaulted:\n\n   1. NO VERTICAL GRID LINES. Column separators are the single biggest driver\n      of the \"spreadsheet\" look. Alignment and spacing carry the columns; a\n      horizontal hairline carries the rows.\n   2. The header is sticky and OPAQUE. A translucent sticky header lets row\n      text bleed through as it scrolls under, which reads as a rendering bug.\n\n   Density is a first-class prop rather than a fixed height: the same table\n   must serve a roomy 8-row summary and a 500-row audit log.\n   -------------------------------------------------------------------------- */\n\n/* DX-5185 — a column's width, in the column def's own `meta`. */\ndeclare module \"@tanstack/react-table\" {\n  /* The augmentation must repeat TanStack's type parameters, used or not. */\n  interface ColumnMeta<TData extends RowData, TValue> {\n    /**\n     * A CSS length (`\"12rem\"`, `\"30%\"`) this column is drawn at. The first\n     * column to carry one switches the table to a fixed layout: a column with\n     * a width is drawn at it, and the columns without one share what is left\n     * equally. Two tables of the same width whose column carries the same\n     * `width` therefore start the next column at the same x, which a\n     * content-sized (auto-layout) table cannot do: it sizes every column from\n     * its own cells. Widths that add up to more than the container scroll\n     * inside the table's wrapper. `size` only applies to a table with no\n     * `meta.width`, as a hint to the auto layout.\n     */\n    width?: string;\n  }\n}\n\nexport type TableDensity = \"comfortable\" | \"cozy\" | \"compact\";\n\nconst densityRow: Record<TableDensity, string> = {\n  comfortable: \"h-16\",\n  cozy: \"h-[3.25rem]\",\n  compact: \"h-11\",\n};\n\nconst densityCell: Record<TableDensity, string> = {\n  comfortable: \"px-5 text-sm\",\n  cozy: \"px-4 text-sm\",\n  compact: \"px-3 text-xs\",\n};\n\nexport interface DataTableProps<TData> {\n  data: TData[];\n  columns: ColumnDef<TData, unknown>[];\n  density?: TableDensity;\n  /** Adds a leading checkbox column with header select-all. */\n  selectable?: boolean;\n  /** Constrain height and scroll internally, keeping the header pinned. */\n  maxHeight?: string;\n  /** Tint alternating rows. Off by default — hairlines usually suffice. */\n  zebra?: boolean;\n  /**\n   * First load — no data yet. Draws skeleton rows.\n   *\n   * Distinct from `refreshing` on purpose: a skeleton REPLACES content, which\n   * is right when there is none and wrong the moment there is. Collapsing the\n   * two into one `loading` flag is what produces the table that flashes to grey\n   * bars on every filter change.\n   */\n  loading?: boolean;\n  /** Refetching with data already on screen. Dims the rows under a card. */\n  refreshing?: boolean;\n  /** Skeleton row count while `loading`. */\n  loadingRows?: number;\n  /**\n   * Rows per page. **Omit for no pagination** — that is the default and it is\n   * what every existing consumer already gets, unchanged.\n   *\n   * WHY OPT-IN RATHER THAN A DEFAULT PAGE SIZE: paginating a table nobody\n   * asked to paginate hides rows. A short table that suddenly grows a footer\n   * and a \"1 of 3\" is a worse regression than a long table, because the rows\n   * that vanished were on screen yesterday. So the caller says when the list\n   * is long enough to warrant it.\n   *\n   * The `Pagination` control this renders has existed in this library since\n   * long before `DataTable` did, as a fully independent component that was\n   * never connected to anything. This is that connection.\n   */\n  pageSize?: number;\n  /**\n   * The sizes offered by the footer's per-page picker. Defaults to\n   * `[10, 25, 50, 100]` (with `pageSize` folded in if it names a value not\n   * already on that list), so a caller that only ever set `pageSize` still\n   * gets a real picker rather than none at all — DX-2947 added this menu to\n   * every paginated table, not as an opt-in.\n   */\n  pageSizeOptions?: readonly number[];\n  /**\n   * Told when the footer's per-page picker changes the size, in addition to\n   * the table re-paginating itself immediately. Pagination stays entirely\n   * internal either way — this is for a caller that wants to remember the\n   * choice (e.g. persist it), not something that has to be wired for paging\n   * to work.\n   */\n  onPageSizeChange?: (size: number) => void;\n  emptyState?: ReactNode;\n  /**\n   * An extra class for the rows a consumer needs to mark — \"this figure could\n   * not be read from the source document\", \"this record is superseded\". Return\n   * `undefined` for the rows that are unremarkable.\n   *\n   * WHY A HOOK AND NOT A `tone` UNION. The reasons a row deserves a tint are\n   * the consumer's domain and there is no useful shortlist of them; a fixed set\n   * would be wrong for the second consumer and every one after. This is the\n   * same call `getRowId` makes about identity.\n   *\n   * THE CLASS IS APPLIED LAST, so it beats the density, zebra and selection\n   * styling the table picked — `cn` is tailwind-merge, and the last conflicting\n   * utility wins. That is deliberate: a tint that loses to the zebra fill is a\n   * tint nobody sees. It also means a background handed over here REPLACES the\n   * row's hover fill, so pass the hover with it (`bg-danger-subtle\n   * hover:bg-danger-subtle-hover`) if the row should still respond.\n   *\n   * THAT EXAMPLE USED TO NAME `warning`, WHICH HAD NO HOVER STEP AT THE TIME.\n   * `-subtle` exists for every semantic family; `-subtle-hover` exists for\n   * `accent`, `danger`, and (since SG-833 slice 7, which needed it for\n   * `Button`'s new `warning` variant) `warning` too. A consumer following the\n   * old wording got a hover class that compiled to nothing — no rule, no\n   * fill, no error anywhere, which is the same silent-nothing failure the\n   * theme bridge in `postbuild-css.mjs` exists to prevent one level up.\n   * Naming `warning` here would work today; pick whichever family actually\n   * fits your row, or supply the hover colour yourself. `token-parity.test.ts`\n   * now sweeps this docblock.\n   *\n   * `index` is the row's position in `data`, not on the current page — the same\n   * number `getRowId` receives, so the two never disagree about which row is\n   * being talked about.\n   *\n   * NOT CALLED FOR SKELETON ROWS. A skeleton stands in for a record nobody has\n   * yet, so there is nothing to classify and nothing to hand over.\n   */\n  getRowClassName?: (row: TData, index: number) => string | undefined;\n  onRowClick?: (row: TData) => void;\n  /**\n   * DX-4062 — opt-in column span. Called for every body cell with its row and\n   * column id; return how many columns the cell covers (including its own) and\n   * the table renders it with that `colSpan` and drops the cells it covers.\n   * Return `undefined` or `1` for an ordinary cell. A span past the last column\n   * is clamped to it.\n   *\n   * For a row that says one thing across several columns — \"None yet\" under\n   * both Person and Agent — which a per-column cell cannot express. Header\n   * cells are not affected. Off by default: no existing table changes.\n   */\n  getCellSpan?: (row: TData, columnId: string) => number | undefined;\n  /** Rendered above the table; receives the table instance for counts/filters. */\n  toolbar?: (table: TanstackTable<TData>) => ReactNode;\n  className?: string;\n  getRowId?: (row: TData, index: number) => string;\n}\n\n/**\n * DX-4062 — the cells a row actually renders once spans are applied: a cell\n * with span N is kept (carrying N) and the N-1 cells after it are dropped.\n * Exported for its test only; not part of the public surface.\n */\nexport function visibleBodyCells<C extends { column: { id: string } }>(\n  cells: C[],\n  spanOf: (columnId: string) => number | undefined,\n): { cell: C; span: number }[] {\n  const out: { cell: C; span: number }[] = [];\n  for (let i = 0; i < cells.length; ) {\n    const span = Math.max(1, Math.min(spanOf(cells[i]!.column.id) ?? 1, cells.length - i));\n    out.push({ cell: cells[i]!, span });\n    i += span;\n  }\n  return out;\n}\n\nexport function DataTable<TData>({\n  data,\n  columns,\n  density = \"cozy\",\n  selectable = false,\n  maxHeight,\n  zebra = false,\n  loading = false,\n  refreshing = false,\n  loadingRows = 6,\n  pageSize,\n  pageSizeOptions,\n  onPageSizeChange,\n  emptyState,\n  getRowClassName,\n  onRowClick,\n  getCellSpan,\n  toolbar,\n  className,\n  getRowId,\n}: DataTableProps<TData>) {\n  const strings = useUiStrings().table;\n  const fmt = useNumberFormat();\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n  /* A page size of 0 or undefined means \"do not paginate\" — one flag derived\n     once, so the row model, the state shape and the footer can never disagree\n     about whether this table is paginated. */\n  const paginated = typeof pageSize === \"number\" && pageSize > 0;\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize ?? 0,\n  });\n\n  const allColumns = useMemo<ColumnDef<TData, unknown>[]>(() => {\n    if (!selectable) return columns;\n\n    const selectColumn: ColumnDef<TData, unknown> = {\n      id: \"__select\",\n      size: 52,\n      meta: { width: \"52px\" },\n      enableSorting: false,\n      header: ({ table }) => (\n        <Checkbox\n          size=\"sm\"\n          checked={table.getIsAllPageRowsSelected()}\n          /* A separate flag rather than a third `checked` value. Indeterminate\n             is not a value the control holds — it is a display state layered\n             over an unchecked box — and modelling it as a value is what forces\n             every consumer to widen their boolean to a union. */\n          indeterminate={table.getIsSomePageRowsSelected()}\n          onCheckedChange={(v) => table.toggleAllPageRowsSelected(v)}\n          aria-label={strings.selectAll}\n        />\n      ),\n      cell: ({ row }) => (\n        /* stopPropagation so ticking a row inside a clickable table does not\n           also fire the row's navigation handler. */\n        <div onClick={(e) => e.stopPropagation()}>\n          <Checkbox\n            size=\"sm\"\n            checked={row.getIsSelected()}\n            onCheckedChange={(v) => row.toggleSelected(v)}\n            aria-label={strings.selectRow(fmt(row.index + 1))}\n          />\n        </div>\n      ),\n    };\n    return [selectColumn, ...columns];\n  }, [columns, selectable, strings, fmt]);\n\n  const table = useReactTable({\n    data,\n    columns: allColumns,\n    state: paginated\n      ? { sorting, rowSelection, pagination }\n      : { sorting, rowSelection },\n    onSortingChange: setSorting,\n    onRowSelectionChange: setRowSelection,\n    enableRowSelection: selectable,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    /* CONDITIONAL ON PURPOSE. TanStack paginates whenever this row model is\n       registered — there is no \"register it but leave it off\". Registering it\n       unconditionally would silently truncate every existing table that never\n       asked for pages, which is exactly the regression `pageSize` being\n       opt-in is meant to prevent. */\n    ...(paginated\n      ? { getPaginationRowModel: getPaginationRowModel(), onPaginationChange: setPagination }\n      : {}),\n    ...(getRowId ? { getRowId } : {}),\n  });\n\n  const rows = table.getRowModel().rows;\n  const isEmpty = !loading && rows.length === 0;\n  const colCount = allColumns.length;\n  /* `rows` is only the current PAGE once paginated. Every count outside the\n     <tbody> means the whole filtered set, so it reads from there instead — a\n     100-row table must not report \"3 of 10 selected\" because ten happen to be\n     on screen. */\n  const totalRows = table.getFilteredRowModel().rows.length;\n  /* A fixed layout only when a column named a width — every other table stays\n     content-sized, as it has always been. */\n  const hasColumnWidths = columns.some((column) => column.meta?.width !== undefined);\n  /* A `<tfoot>` ONLY WHEN A COLUMN ASKED FOR ONE. Rendering it unconditionally\n     would put an empty bordered strip under every table in every consuming\n     app — and the opt-in costs the caller nothing, because `footer` is already\n     part of the `ColumnDef` they are writing. There is no separate footer prop\n     for the same reason there is no separate header one: the column is where a\n     column's business lives. */\n  const hasFooter = table.getAllLeafColumns().some((column) => column.columnDef.footer !== undefined);\n\n  /* The picker's own options — `pageSize` folded in and de-duplicated, so a\n     caller who set an unusual `pageSize` (say 20) still sees it as a selectable\n     choice rather than watching their own initial value vanish the moment they\n     open the menu. */\n  const resolvedPageSizeOptions = Array.from(\n    new Set([...(pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS), pagination.pageSize]),\n  ).sort((a, b) => a - b);\n\n  function handlePageSizeChange(size: number) {\n    /* Page 1, not the current index — a page index that made sense at the old\n       size can easily be past the end at the new one (page 4 of 10-per-page\n       does not exist once the size becomes 50). */\n    setPagination({ pageIndex: 0, pageSize: size });\n    onPageSizeChange?.(size);\n  }\n\n  return (\n    <div className={cn(\"flex min-w-0 flex-col gap-3\", className)}>\n      {toolbar?.(table)}\n\n      <LoadingOverlay\n        active={refreshing && !loading}\n        message={strings.updating}\n        className={cn(\n          \"min-w-0 overflow-hidden rounded-xl border border-border bg-surface\",\n          \"shadow-sm\",\n        )}\n      >\n        {/* Horizontal scroll lives here so the rounded border never clips\n            mid-scroll and the header can stay sticky inside it. */}\n        <div\n          className=\"w-full overflow-auto overscroll-x-contain\"\n          style={maxHeight ? { maxHeight } : undefined}\n        >\n          <table className={cn(\"w-full border-collapse text-left\", hasColumnWidths && \"table-fixed\")}>\n            {/* DX-5185: a fixed layout takes its widths from this group (the\n                header cells carry none), so a width is the column's own rather\n                than a hint the cells can outgrow. */}\n            {hasColumnWidths && (\n              <colgroup>\n                {table.getVisibleLeafColumns().map((column) => (\n                  <col\n                    key={column.id}\n                    style={{ width: column.columnDef.meta?.width }}\n                  />\n                ))}\n              </colgroup>\n            )}\n            <thead className=\"sticky top-0 z-10\">\n              {table.getHeaderGroups().map((headerGroup) => (\n                <tr key={headerGroup.id}>\n                  {headerGroup.headers.map((header) => {\n                    const canSort = header.column.getCanSort();\n                    const sorted = header.column.getIsSorted();\n\n                    return (\n                      <th\n                        key={header.id}\n                        scope=\"col\"\n                        colSpan={header.colSpan}\n                        /* DX-5185: with column widths the colgroup owns them.\n                           TanStack gives every column a default `size` (150),\n                           and in a fixed layout a header cell's width counts as\n                           specified, which made the free space be shared in\n                           proportion instead of going to the columns without a\n                           width. */\n                        style={\n                          !hasColumnWidths && header.column.columnDef.size\n                            ? { width: `${header.column.columnDef.size}px` }\n                            : undefined\n                        }\n                        aria-sort={\n                          sorted === \"asc\"\n                            ? \"ascending\"\n                            : sorted === \"desc\"\n                              ? \"descending\"\n                              : canSort\n                                ? \"none\"\n                                : undefined\n                        }\n                        className={cn(\n                          \"h-12 whitespace-nowrap border-b border-border bg-surface-raised\",\n                          \"font-semibold uppercase tracking-widest text-2xs text-tertiary\",\n                          densityCell[density],\n                        )}\n                      >\n                        {header.isPlaceholder ? null : canSort ? (\n                          <button\n                            type=\"button\"\n                            onClick={header.column.getToggleSortingHandler()}\n                            className={cn(\n                              \"dx-tap group/sort -mx-1.5 flex h-8 items-center gap-1.5 rounded-sm px-1.5\",\n                              \"uppercase tracking-widest transition-colors duration-(--dur-fast)\",\n                              \"hover:text-primary\",\n                              sorted && \"text-accent-text\",\n                            )}\n                          >\n                            {flexRender(header.column.columnDef.header, header.getContext())}\n                            {/* ONE arrow that rotates, rather than swapping\n                                between an up and a down glyph. The rotation is\n                                the only thing on screen that actually shows the\n                                direction REVERSING; two separate icons just\n                                blink, and at 14px a blink is invisible.\n\n                                Space is reserved at all times (the idle state\n                                is the same glyph at low opacity), so applying a\n                                sort never shifts the header label. */}\n                            <Icon\n                              name=\"arrow-up\"\n                              size=\"xs\"\n                              className={cn(\n                                \"transition-[var(--tx-colors),rotate,opacity] duration-(--dur-base) ease-snappy\",\n                                sorted === \"desc\" && \"rotate-180\",\n                                !sorted && \"opacity-0 group-hover/sort:opacity-40\",\n                              )}\n                            />\n                          </button>\n                        ) : (\n                          flexRender(header.column.columnDef.header, header.getContext())\n                        )}\n                      </th>\n                    );\n                  })}\n                </tr>\n              ))}\n            </thead>\n\n            <tbody>\n              {loading &&\n                Array.from({ length: loadingRows }).map((_, i) => (\n                  <tr key={`skeleton-${i}`} className={densityRow[density]}>\n                    {Array.from({ length: colCount }).map((__, j) => (\n                      <td key={j} className={cn(\"border-b border-border-subtle\", densityCell[density])}>\n                        {/* Varied widths, not uniform bars. A skeleton table of\n                            identical rectangles reads as a loading GRAPHIC; a\n                            ragged one reads as the actual data arriving. */}\n                        <Skeleton\n                          shape=\"pill\"\n                          height=\"0.875rem\"\n                          width={`${[68, 44, 82, 55, 72, 38][j % 6]}%`}\n                          /* Stagger capped at 8 steps so a long skeleton never\n                             turns into a slow cascade down the page. */\n                          style={{ animationDelay: `${Math.min(i, 8) * 40}ms` }}\n                        />\n                      </td>\n                    ))}\n                  </tr>\n                ))}\n\n              {!loading &&\n                rows.map((row) => {\n                  const selected = row.getIsSelected();\n                  return (\n                    <tr\n                      key={row.id}\n                      data-selected={selected || undefined}\n                      onClick={onRowClick ? () => onRowClick(row.original) : undefined}\n                      className={cn(\n                        densityRow[density],\n                        \"border-b border-border-subtle transition-colors duration-(--dur-fast)\",\n                        \"last:border-b-0\",\n                        zebra && \"even:bg-surface-sunken/40\",\n                        onRowClick && \"cursor-pointer\",\n                        /* One hover fill per row, picked here. As two classes\n                           they weigh the same and CLASS ORDER decided which a\n                           hovered selected row got; when the neutral one won,\n                           the row lost its selection while the pointer was on\n                           it. */\n                        selected\n                          ? \"bg-surface-selected hover:bg-surface-selected-hover\"\n                          : \"hover:bg-surface-hover\",\n                        /* LAST, so the consumer's mark beats everything above\n                           it — see the prop's own doc for what that costs. */\n                        getRowClassName?.(row.original, row.index),\n                      )}\n                    >\n                      {visibleBodyCells(row.getVisibleCells(), (id) => getCellSpan?.(row.original, id)).map(\n                        ({ cell, span }) => (\n                          <td\n                            key={cell.id}\n                            colSpan={span > 1 ? span : undefined}\n                            className={cn(\"align-middle text-primary\", densityCell[density])}\n                          >\n                            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                          </td>\n                        ),\n                      )}\n                    </tr>\n                  );\n                })}\n\n              {isEmpty && (\n                <tr>\n                  <td colSpan={colCount} className=\"p-0\">\n                    {emptyState ?? <TableEmptyState />}\n                  </td>\n                </tr>\n              )}\n            </tbody>\n\n            {/* THE TOTALS ROW IS NOT A ROW. Put a total in `data` and it sorts\n                with the records, can be selected, and lands on whichever page\n                it happens to fall on — wrong three ways. A `<tfoot>` is outside\n                every one of those, and a column's `footer` receives the table\n                instance, so a sum reads `getFilteredRowModel()` and describes\n                the WHOLE filtered set rather than the page on screen. */}\n            {hasFooter && !loading && (\n              <tfoot>\n                {table.getFooterGroups().map((footerGroup) => (\n                  <tr key={footerGroup.id}>\n                    {footerGroup.headers.map((header) => (\n                      <td\n                        key={header.id}\n                        colSpan={header.colSpan}\n                        className={cn(\n                          /* PINNED ON THE CELLS, not on the `<tfoot>`. The\n                             opaque background has to sit on whatever is pinned\n                             — a translucent sticky element lets the rows scroll\n                             through it, which reads as a rendering bug — and\n                             these are the elements that paint. Splitting the\n                             two across different elements is how they end up\n                             disagreeing. */\n                          \"sticky bottom-0 z-10 h-12 whitespace-nowrap bg-surface-raised\",\n                          \"border-t border-border font-semibold text-primary tabular-nums\",\n                          densityCell[density],\n                        )}\n                      >\n                        {header.isPlaceholder\n                          ? null\n                          : flexRender(header.column.columnDef.footer, header.getContext())}\n                      </td>\n                    ))}\n                  </tr>\n                ))}\n              </tfoot>\n            )}\n          </table>\n        </div>\n      </LoadingOverlay>\n\n      {selectable && Object.keys(rowSelection).length > 0 && (\n        <p className=\"text-xs text-secondary animate-fade-in\" aria-live=\"polite\">\n          {strings.selectedCount(table.getSelectedRowModel().rows.length, fmt(table.getSelectedRowModel().rows.length), fmt(totalRows), selectedCountEmphasis)}\n        </p>\n      )}\n\n      {/* One page is not a pagination problem, so it gets no control — but the\n          range line stays regardless, since \"1-25 of 240\" is the answer to\n          \"did it cut something off\", which the page numbers alone never give.\n          `PaginationBar` in `\"numbered\"` mode already omits the numbered\n          control by itself once `pageCount <= 1`, so nothing extra is needed\n          here to reproduce that. */}\n      {paginated && !loading && totalRows > 0 && (\n        <PaginationBar\n          mode=\"numbered\"\n          label={strings.paginationLabel}\n          page={pagination.pageIndex + 1}\n          pageSize={pagination.pageSize}\n          pageSizeOptions={resolvedPageSizeOptions}\n          total={totalRows}\n          onPageChange={(page) => table.setPageIndex(page - 1)}\n          onPageSizeChange={handlePageSizeChange}\n        />\n      )}\n    </div>\n  );\n}\n\n/** `DataTable`'s own default empty state — a thin `EmptyState` wrapper (DX-3254:\n *  this used to be a second, independently hand-written copy of `EmptyState`'s\n *  markup) whose one real addition is a table-appropriate default title, since\n *  `EmptyState.title` has none. */\nexport function TableEmptyState({\n  icon,\n  title,\n  description,\n  action,\n}: {\n  icon?: ReactNode;\n  title?: string;\n  description?: string;\n  action?: ReactNode;\n}) {\n  const strings = useUiStrings().table;\n  return <EmptyState icon={icon} title={title ?? strings.emptyTitle} description={description} action={action} />;\n}\n\n/**\n * Two-line cell: a strong primary value with a muted secondary beneath.\n * The secondary truncates to one row by default; `wrapSecondary` lets it wrap\n * onto as many rows as it needs (DX-4456), for a cell whose second line is the\n * point of the column and must be readable in place, not behind a tooltip.\n */\nexport function CellStack({\n  primary,\n  secondary,\n  mono = false,\n  wrapSecondary = false,\n}: {\n  primary: ReactNode;\n  secondary?: ReactNode;\n  mono?: boolean;\n  wrapSecondary?: boolean;\n}) {\n  return (\n    <div className=\"min-w-0\">\n      <div className={cn(\"truncate font-medium text-primary\", mono && \"font-mono text-xs\")}>\n        {primary}\n      </div>\n      {secondary && (\n        <div\n          className={cn(\n            \"mt-0.5 text-xs text-tertiary\",\n            wrapSecondary ? \"whitespace-normal break-words\" : \"truncate\",\n          )}\n        >\n          {secondary}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["selectedCountEmphasis","count","DEFAULT_PAGE_SIZE_OPTIONS","densityRow","densityCell","visibleBodyCells","cells","spanOf","out","i","span","DataTable","data","columns","density","selectable","maxHeight","zebra","loading","refreshing","loadingRows","pageSize","pageSizeOptions","onPageSizeChange","emptyState","getRowClassName","onRowClick","getCellSpan","toolbar","className","getRowId","strings","useUiStrings","fmt","useNumberFormat","sorting","setSorting","useState","rowSelection","setRowSelection","paginated","pagination","setPagination","allColumns","useMemo","table","jsx","Checkbox","v","row","e","useReactTable","getCoreRowModel","getSortedRowModel","getFilteredRowModel","getPaginationRowModel","rows","isEmpty","colCount","totalRows","hasColumnWidths","column","hasFooter","resolvedPageSizeOptions","a","b","handlePageSizeChange","size","cn","LoadingOverlay","headerGroup","header","canSort","sorted","jsxs","flexRender","Icon","_","__","j","Skeleton","selected","id","cell","TableEmptyState","footerGroup","PaginationBar","page","icon","title","description","action","EmptyState","CellStack","primary","secondary","mono","wrapSecondary"],"mappings":";;;;;;;;;;;AAuBA,MAAMA,KAAkC,CAACC,wBAAW,QAAA,EAAK,WAAU,kCAAkC,UAAAA,GAAM,GAQrGC,KAA4B,CAAC,IAAI,IAAI,IAAI,GAAG,GAuC5CC,IAA2C;AAAA,EAC/C,aAAa;AAAA,EACb,MAAM;AAAA,EACN,SAAS;AACX,GAEMC,IAA4C;AAAA,EAChD,aAAa;AAAA,EACb,MAAM;AAAA,EACN,SAAS;AACX;AAqHO,SAASC,GACdC,GACAC,GAC6B;AAC7B,QAAMC,IAAmC,CAAA;AACzC,WAASC,IAAI,GAAGA,IAAIH,EAAM,UAAU;AAClC,UAAMI,IAAO,KAAK,IAAI,GAAG,KAAK,IAAIH,EAAOD,EAAMG,CAAC,EAAG,OAAO,EAAE,KAAK,GAAGH,EAAM,SAASG,CAAC,CAAC;AACrF,IAAAD,EAAI,KAAK,EAAE,MAAMF,EAAMG,CAAC,GAAI,MAAAC,GAAM,GAClCD,KAAKC;AAAA,EACP;AACA,SAAOF;AACT;AAEO,SAASG,GAAiB;AAAA,EAC/B,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA0B;AACxB,QAAMC,IAAUC,IAAe,OACzBC,IAAMC,GAAA,GACN,CAACC,GAASC,CAAU,IAAIC,EAAuB,CAAA,CAAE,GACjD,CAACC,GAAcC,CAAe,IAAIF,EAA4B,CAAA,CAAE,GAIhEG,IAAY,OAAOnB,KAAa,YAAYA,IAAW,GACvD,CAACoB,GAAYC,CAAa,IAAIL,EAA0B;AAAA,IAC5D,WAAW;AAAA,IACX,UAAUhB,KAAY;AAAA,EAAA,CACvB,GAEKsB,IAAaC,EAAqC,MACjD7B,IAiCE,CA/ByC;AAAA,IAC9C,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,MAAM,EAAE,OAAO,OAAA;AAAA,IACf,eAAe;AAAA,IACf,QAAQ,CAAC,EAAE,OAAA8B,QACT,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAASF,EAAM,yBAAA;AAAA,QAKf,eAAeA,EAAM,0BAAA;AAAA,QACrB,iBAAiB,CAACG,MAAMH,EAAM,0BAA0BG,CAAC;AAAA,QACzD,cAAYjB,EAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAGxB,MAAM,CAAC,EAAE,KAAAkB,EAAA;AAAA;AAAA;AAAA,wBAGN,OAAA,EAAI,SAAS,CAACC,MAAMA,EAAE,mBACrB,UAAA,gBAAAJ;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAASE,EAAI,cAAA;AAAA,UACb,iBAAiB,CAACD,MAAMC,EAAI,eAAeD,CAAC;AAAA,UAC5C,cAAYjB,EAAQ,UAAUE,EAAIgB,EAAI,QAAQ,CAAC,CAAC;AAAA,QAAA;AAAA,MAAA,EAClD,CACF;AAAA;AAAA,EAAA,GAGkB,GAAGpC,CAAO,IAjCRA,GAkCvB,CAACA,GAASE,GAAYgB,GAASE,CAAG,CAAC,GAEhCY,IAAQM,EAAc;AAAA,IAC1B,MAAAvC;AAAA,IACA,SAAS+B;AAAA,IACT,OAAOH,IACH,EAAE,SAAAL,GAAS,cAAAG,GAAc,YAAAG,MACzB,EAAE,SAAAN,GAAS,cAAAG,EAAA;AAAA,IACf,iBAAiBF;AAAA,IACjB,sBAAsBG;AAAA,IACtB,oBAAoBxB;AAAA,IACpB,iBAAiBqC,GAAA;AAAA,IACjB,mBAAmBC,GAAA;AAAA,IACnB,qBAAqBC,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,GAAId,IACA,EAAE,uBAAuBe,KAAyB,oBAAoBb,EAAA,IACtE,CAAA;AAAA,IACJ,GAAIZ,IAAW,EAAE,UAAAA,MAAa,CAAA;AAAA,EAAC,CAChC,GAEK0B,IAAOX,EAAM,YAAA,EAAc,MAC3BY,IAAU,CAACvC,KAAWsC,EAAK,WAAW,GACtCE,IAAWf,EAAW,QAKtBgB,IAAYd,EAAM,oBAAA,EAAsB,KAAK,QAG7Ce,IAAkB/C,EAAQ,KAAK,CAACgD,MAAWA,EAAO,MAAM,UAAU,MAAS,GAO3EC,IAAYjB,EAAM,kBAAA,EAAoB,KAAK,CAACgB,MAAWA,EAAO,UAAU,WAAW,MAAS,GAM5FE,IAA0B,MAAM;AAAA,IACpC,oBAAI,IAAI,CAAC,GAAIzC,KAAmBpB,IAA4BuC,EAAW,QAAQ,CAAC;AAAA,EAAA,EAChF,KAAK,CAACuB,GAAGC,MAAMD,IAAIC,CAAC;AAEtB,WAASC,EAAqBC,GAAc;AAI1C,IAAAzB,EAAc,EAAE,WAAW,GAAG,UAAUyB,GAAM,GAC9C5C,IAAmB4C,CAAI;AAAA,EACzB;AAEA,2BACG,OAAA,EAAI,WAAWC,EAAG,+BAA+BvC,CAAS,GACxD,UAAA;AAAA,IAAAD,IAAUiB,CAAK;AAAA,IAEhB,gBAAAC;AAAA,MAACuB;AAAA,MAAA;AAAA,QACC,QAAQlD,KAAc,CAACD;AAAA,QACvB,SAASa,EAAQ;AAAA,QACjB,WAAWqC;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAKF,UAAA,gBAAAtB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO9B,IAAY,EAAE,WAAAA,EAAA,IAAc;AAAA,YAEnC,4BAAC,SAAA,EAAM,WAAWoD,EAAG,oCAAoCR,KAAmB,aAAa,GAItF,UAAA;AAAA,cAAAA,uBACE,YAAA,EACE,UAAAf,EAAM,wBAAwB,IAAI,CAACgB,MAClC,gBAAAf;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,OAAO,EAAE,OAAOe,EAAO,UAAU,MAAM,MAAA;AAAA,gBAAM;AAAA,gBADxCA,EAAO;AAAA,cAAA,CAGf,GACH;AAAA,gCAED,SAAA,EAAM,WAAU,qBACd,UAAAhB,EAAM,kBAAkB,IAAI,CAACyB,wBAC3B,MAAA,EACE,UAAAA,EAAY,QAAQ,IAAI,CAACC,MAAW;AACnC,sBAAMC,IAAUD,EAAO,OAAO,WAAA,GACxBE,IAASF,EAAO,OAAO,YAAA;AAE7B,uBACE,gBAAAzB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBAEC,OAAM;AAAA,oBACN,SAASyB,EAAO;AAAA,oBAOhB,OACE,CAACX,KAAmBW,EAAO,OAAO,UAAU,OACxC,EAAE,OAAO,GAAGA,EAAO,OAAO,UAAU,IAAI,SACxC;AAAA,oBAEN,aACEE,MAAW,QACP,cACAA,MAAW,SACT,eACAD,IACE,SACA;AAAA,oBAEV,WAAWJ;AAAA,sBACT;AAAA,sBACA;AAAA,sBACAhE,EAAYU,CAAO;AAAA,oBAAA;AAAA,oBAGpB,UAAAyD,EAAO,gBAAgB,OAAOC,IAC7B,gBAAAE;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,SAASH,EAAO,OAAO,wBAAA;AAAA,wBACvB,WAAWH;AAAA,0BACT;AAAA,0BACA;AAAA,0BACA;AAAA,0BACAK,KAAU;AAAA,wBAAA;AAAA,wBAGX,UAAA;AAAA,0BAAAE,EAAWJ,EAAO,OAAO,UAAU,QAAQA,EAAO,YAAY;AAAA,0BAU/D,gBAAAzB;AAAA,4BAAC8B;AAAA,4BAAA;AAAA,8BACC,MAAK;AAAA,8BACL,MAAK;AAAA,8BACL,WAAWR;AAAA,gCACT;AAAA,gCACAK,MAAW,UAAU;AAAA,gCACrB,CAACA,KAAU;AAAA,8BAAA;AAAA,4BACb;AAAA,0BAAA;AAAA,wBACF;AAAA,sBAAA;AAAA,oBAAA,IAGFE,EAAWJ,EAAO,OAAO,UAAU,QAAQA,EAAO,YAAY;AAAA,kBAAA;AAAA,kBA7D3DA,EAAO;AAAA,gBAAA;AAAA,cAiElB,CAAC,EAAA,GAxEMD,EAAY,EAyErB,CACD,EAAA,CACH;AAAA,gCAEC,SAAA,EACE,UAAA;AAAA,gBAAApD,KACC,MAAM,KAAK,EAAE,QAAQE,EAAA,CAAa,EAAE,IAAI,CAACyD,GAAGpE,MAC1C,gBAAAqC,EAAC,MAAA,EAAyB,WAAW3C,EAAWW,CAAO,GACpD,UAAA,MAAM,KAAK,EAAE,QAAQ4C,EAAA,CAAU,EAAE,IAAI,CAACoB,GAAIC,MACzC,gBAAAjC,EAAC,MAAA,EAAW,WAAWsB,EAAG,iCAAiChE,EAAYU,CAAO,CAAC,GAI7E,UAAA,gBAAAgC;AAAA,kBAACkC;AAAA,kBAAA;AAAA,oBACC,OAAM;AAAA,oBACN,QAAO;AAAA,oBACP,OAAO,GAAG,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,EAAE,EAAED,IAAI,CAAC,CAAC;AAAA,oBAGzC,OAAO,EAAE,gBAAgB,GAAG,KAAK,IAAItE,GAAG,CAAC,IAAI,EAAE,KAAA;AAAA,kBAAK;AAAA,gBAAA,KAV/CsE,CAYT,CACD,KAfM,YAAYtE,CAAC,EAgBtB,CACD;AAAA,gBAEF,CAACS,KACAsC,EAAK,IAAI,CAACP,MAAQ;AAChB,wBAAMgC,IAAWhC,EAAI,cAAA;AACrB,yBACE,gBAAAH;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBAEC,iBAAemC,KAAY;AAAA,sBAC3B,SAASvD,IAAa,MAAMA,EAAWuB,EAAI,QAAQ,IAAI;AAAA,sBACvD,WAAWmB;AAAA,wBACTjE,EAAWW,CAAO;AAAA,wBAClB;AAAA,wBACA;AAAA,wBACAG,KAAS;AAAA,wBACTS,KAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMduD,IACI,wDACA;AAAA;AAAA;AAAA,wBAGJxD,IAAkBwB,EAAI,UAAUA,EAAI,KAAK;AAAA,sBAAA;AAAA,sBAG1C,UAAA5C,GAAiB4C,EAAI,gBAAA,GAAmB,CAACiC,MAAOvD,IAAcsB,EAAI,UAAUiC,CAAE,CAAC,EAAE;AAAA,wBAChF,CAAC,EAAE,MAAAC,GAAM,MAAAzE,EAAA,MACP,gBAAAoC;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BAEC,SAASpC,IAAO,IAAIA,IAAO;AAAA,4BAC3B,WAAW0D,EAAG,6BAA6BhE,EAAYU,CAAO,CAAC;AAAA,4BAE9D,YAAWqE,EAAK,OAAO,UAAU,MAAMA,EAAK,YAAY;AAAA,0BAAA;AAAA,0BAJpDA,EAAK;AAAA,wBAAA;AAAA,sBAKZ;AAAA,oBAEJ;AAAA,oBAhCKlC,EAAI;AAAA,kBAAA;AAAA,gBAmCf,CAAC;AAAA,gBAEFQ,KACC,gBAAAX,EAAC,MAAA,EACC,UAAA,gBAAAA,EAAC,MAAA,EAAG,SAASY,GAAU,WAAU,OAC9B,UAAAlC,KAAc,gBAAAsB,EAACsC,IAAA,CAAA,CAAgB,GAClC,EAAA,CACF;AAAA,cAAA,GAEJ;AAAA,cAQCtB,KAAa,CAAC5C,KACb,gBAAA4B,EAAC,SAAA,EACE,YAAM,gBAAA,EAAkB,IAAI,CAACuC,MAC5B,gBAAAvC,EAAC,MAAA,EACE,YAAY,QAAQ,IAAI,CAACyB,MACxB,gBAAAzB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,SAASyB,EAAO;AAAA,kBAChB,WAAWH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAQT;AAAA,oBACA;AAAA,oBACAhE,EAAYU,CAAO;AAAA,kBAAA;AAAA,kBAGpB,UAAAyD,EAAO,gBACJ,OACAI,EAAWJ,EAAO,OAAO,UAAU,QAAQA,EAAO,WAAA,CAAY;AAAA,gBAAA;AAAA,gBAjB7DA,EAAO;AAAA,cAAA,CAmBf,KAtBMc,EAAY,EAuBrB,CACD,EAAA,CACH;AAAA,YAAA,EAAA,CAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAGDtE,KAAc,OAAO,KAAKuB,CAAY,EAAE,SAAS,KAChD,gBAAAQ,EAAC,KAAA,EAAE,WAAU,0CAAyC,aAAU,UAC7D,UAAAf,EAAQ,cAAcc,EAAM,oBAAA,EAAsB,KAAK,QAAQZ,EAAIY,EAAM,oBAAA,EAAsB,KAAK,MAAM,GAAGZ,EAAI0B,CAAS,GAAG3D,EAAqB,GACrJ;AAAA,IASDwC,KAAa,CAACtB,KAAWyC,IAAY,KACpC,gBAAAb;AAAA,MAACwC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOvD,EAAQ;AAAA,QACf,MAAMU,EAAW,YAAY;AAAA,QAC7B,UAAUA,EAAW;AAAA,QACrB,iBAAiBsB;AAAA,QACjB,OAAOJ;AAAA,QACP,cAAc,CAAC4B,MAAS1C,EAAM,aAAa0C,IAAO,CAAC;AAAA,QACnD,kBAAkBrB;AAAA,MAAA;AAAA,IAAA;AAAA,EACpB,GAEJ;AAEJ;AAMO,SAASkB,GAAgB;AAAA,EAC9B,MAAAI;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AACF,GAKG;AACD,QAAM5D,IAAUC,IAAe;AAC/B,SAAO,gBAAAc,EAAC8C,MAAW,MAAAJ,GAAY,OAAOC,KAAS1D,EAAQ,YAAY,aAAA2D,GAA0B,QAAAC,GAAgB;AAC/G;AAQO,SAASE,GAAU;AAAA,EACxB,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,eAAAC,IAAgB;AAClB,GAKG;AACD,SACE,gBAAAvB,EAAC,OAAA,EAAI,WAAU,WACb,UAAA;AAAA,IAAA,gBAAA5B,EAAC,SAAI,WAAWsB,EAAG,qCAAqC4B,KAAQ,mBAAmB,GAChF,UAAAF,GACH;AAAA,IACCC,KACC,gBAAAjD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWsB;AAAA,UACT;AAAA,UACA6B,IAAgB,kCAAkC;AAAA,QAAA;AAAA,QAGnD,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}