@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/OrderedEntityManager.js

@@ -0,0 +1,170 @@
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { Button as Y } from "./Button.js";
+import { Card as Z, CardHeader as _ } from "./Card.js";
+import { ColorPicker as $ } from "./ColorPicker.js";
+import { AlertDialog as ee } from "./Dialog.js";
+import { DragDrop as re, DragDropContainer as ne, DragDropItem as oe, DragDropHandle as te } from "./DragDrop.js";
+import { EmojiPicker as ae } from "./EmojiPicker.js";
+import { Field as ie } from "./Field.js";
+import { Icon as p } from "./Icon.js";
+import { IconButton as le } from "./IconButton.js";
+import { Input as R } from "./Input.js";
+import { cn as C } from "../lib/cn.js";
+import { useUiStrings as se } from "../lib/i18n/provider.js";
+import { applyMove as de } from "../lib/dnd/geometry.js";
+function Ee(S) {
+  const {
+    items: H,
+    title: y,
+    description: N,
+    emptyMessage: K,
+    containerId: O,
+    containerLabel: A,
+    onCreate: f,
+    addFieldLabel: T,
+    addPlaceholder: U,
+    onReorder: q,
+    onRename: c,
+    onDelete: u,
+    onChangeColor: k,
+    onChangeEmoji: D,
+    colorPicker: G,
+    emojiPicker: J,
+    highlightedId: Q,
+    rowStatus: v,
+    className: E
+  } = S, o = se().orderedEntityManager, [g, w] = m(""), [h, x] = m(null), [z, I] = m(""), [l, b] = m(null), i = H.slice().sort((e, n) => e.order - n.order);
+  function j() {
+    const e = g.trim();
+    if (!e || !f) return;
+    const n = i.length === 0 ? 0 : Math.max(...i.map((t) => t.order)) + 1;
+    f({ name: e, order: n }), w("");
+  }
+  function V(e) {
+    x(e.id), I(e.name);
+  }
+  function M() {
+    const e = z.trim();
+    h && e && c && c(h, e), x(null);
+  }
+  function W(e) {
+    if (!e.moved) return;
+    const n = de(i, e.from.index, e.to.index);
+    n.some((t, s) => v?.(t).locked && i[s] !== t) || q(n.map((t, s) => ({ ...t, order: s })));
+  }
+  const P = i.length === 0 ? /* @__PURE__ */ r("p", { className: "text-sm text-tertiary", children: K }) : /* @__PURE__ */ r(re, { onDragEnd: W, children: /* @__PURE__ */ r(ne, { id: O, label: A, children: i.map((e, n) => {
+    const { badge: t, disabledReason: s, locked: X } = v?.(e) ?? {}, L = e.id === Q;
+    return /* @__PURE__ */ r(oe, { id: e.id, index: n, label: e.name, children: /* @__PURE__ */ d(
+      "div",
+      {
+        "aria-current": L ? "true" : void 0,
+        className: C(
+          "flex items-center gap-2 rounded-lg border bg-surface p-2",
+          L ? "border-accent-border bg-accent-subtle" : "border-border-subtle"
+        ),
+        children: [
+          X ? /* @__PURE__ */ r("span", { role: "img", "aria-label": o.locked(e.name), className: "dx-tap flex size-7 shrink-0 items-center justify-center text-tertiary", children: /* @__PURE__ */ r(p, { name: "lock", size: "xs" }) }) : /* @__PURE__ */ r(te, {}),
+          k && /* @__PURE__ */ r(
+            $,
+            {
+              value: e.color,
+              onChange: (a) => k(e.id, a),
+              label: o.color(e.name),
+              size: "sm",
+              ...G
+            }
+          ),
+          D && /* @__PURE__ */ r(
+            ae,
+            {
+              value: e.emoji,
+              onChange: (a) => D(e.id, a),
+              label: o.emoji(e.name),
+              ...J
+            }
+          ),
+          c && h === e.id ? /* @__PURE__ */ r(
+            R,
+            {
+              autoFocus: !0,
+              size: "sm",
+              value: z,
+              onChange: (a) => I(a.target.value),
+              onBlur: M,
+              onKeyDown: (a) => {
+                a.key === "Enter" && M(), a.key === "Escape" && x(null);
+              },
+              className: "min-w-0 flex-1"
+            }
+          ) : c ? /* @__PURE__ */ d(
+            "button",
+            {
+              type: "button",
+              onClick: () => V(e),
+              className: "dx-tap flex min-w-0 flex-1 items-center gap-1.5 rounded-md px-2 py-1 text-left text-sm text-primary transition-colors duration-(--dur-fast) hover:bg-surface-hover",
+              children: [
+                /* @__PURE__ */ r("span", { className: "min-w-0 truncate", children: e.name }),
+                /* @__PURE__ */ r(p, { name: "pencil", size: "xs", className: "shrink-0 text-tertiary" })
+              ]
+            }
+          ) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate px-2 py-1 text-sm text-primary", children: e.name }),
+          t,
+          u && /* @__PURE__ */ r(
+            le,
+            {
+              icon: /* @__PURE__ */ r(p, { name: "trash-2", size: "sm" }),
+              label: o.delete(e.name),
+              tone: "danger",
+              disabledReason: s,
+              onClick: () => b({ item: e, open: !0 })
+            }
+          )
+        ]
+      }
+    ) }, e.id);
+  }) }) }), B = f && /* @__PURE__ */ d("div", { className: "flex flex-wrap items-end gap-2 border-t border-border-subtle pt-4", children: [
+    /* @__PURE__ */ r(ie, { label: T, className: "w-56", children: /* @__PURE__ */ r(
+      R,
+      {
+        size: "sm",
+        value: g,
+        onChange: (e) => w(e.target.value),
+        onKeyDown: (e) => {
+          e.key === "Enter" && (e.preventDefault(), j());
+        },
+        placeholder: U
+      }
+    ) }),
+    /* @__PURE__ */ r(Y, { size: "sm", onClick: j, disabled: !g.trim(), leadingIcon: /* @__PURE__ */ r(p, { name: "plus", size: "xs" }), children: o.add })
+  ] }), F = u && /* @__PURE__ */ r(
+    ee,
+    {
+      open: l?.open ?? !1,
+      onOpenChange: (e) => {
+        e || b((n) => n && { ...n, open: !1 });
+      },
+      title: l ? o.deleteTitle(l.item.name) : null,
+      description: o.deleteDescription,
+      confirmLabel: o.deleteConfirm,
+      destructive: !0,
+      onConfirm: () => {
+        l && u(l.item.id), b((e) => e && { ...e, open: !1 });
+      }
+    }
+  );
+  return !y && !N ? /* @__PURE__ */ d("div", { className: C("flex flex-col gap-4", E), children: [
+    P,
+    B,
+    F
+  ] }) : /* @__PURE__ */ d(Z, { variant: "sunken", padding: "md", className: C("gap-4", E), children: [
+    /* @__PURE__ */ r(_, { title: y, description: N }),
+    P,
+    B,
+    F
+  ] });
+}
+export {
+  Ee as OrderedEntityManager
+};
+//# sourceMappingURL=OrderedEntityManager.js.map

package/dist/components/OrderedEntityManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedEntityManager.js","sources":["../../src/components/OrderedEntityManager.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Button } from \"./Button\";\nimport { Card, CardHeader } from \"./Card\";\nimport { ColorPicker, type ColorPickerProps } from \"./ColorPicker\";\nimport { AlertDialog } from \"./Dialog\";\nimport { DragDrop, DragDropContainer, DragDropHandle, DragDropItem } from \"./DragDrop\";\nimport { EmojiPicker, type EmojiPickerProps } from \"./EmojiPicker\";\nimport { Field } from \"./Field\";\nimport { Icon } from \"./Icon\";\nimport { IconButton } from \"./IconButton\";\nimport { Input } from \"./Input\";\nimport { applyMove, type DragEndEvent } from \"../lib/dnd\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\n\n/* ============================================================================\n   ORDERED ENTITY MANAGER - the library's ordered list manager (DXUI-27).\n\n   A small, named, person-orderable list: entries are added, renamed in place,\n   deleted behind a confirm and reordered by drag or keyboard, and each may\n   carry an optional colour and emoji edited in place. It began as the shape\n   `PhaseManager` and `TrackManager` shared (DX-3254) and is now the package's\n   one component for the job, so danxbot's dispatch queue and board lists use\n   it rather than a second implementation.\n\n   CONTROLLED, WITH NO SERVER LOGIC. The caller passes `items` and receives a\n   change event per edit; it persists and re-renders. The component keeps only\n   transient UI state (the rename draft, the add field, an open picker, a\n   pending delete), never the entries themselves, so what is on screen is\n   always what the caller passed.\n\n   EVERY CAPABILITY IS OPT-IN BY ITS HANDLER. Reorder is the one thing the\n   component is for and is always on. `onCreate`, `onRename`, `onDelete`,\n   `onChangeColor` and `onChangeEmoji` each switch on their own control when\n   given and draw nothing when absent: a queue that only reorders passes\n   `onReorder`; board lists pass all of them.\n\n   COLOUR AND EMOJI ARE THE LIBRARY'S OWN PICKERS (`ColorPicker`, the one\n   colour control, and `EmojiPicker`), composed here. Colour is a required\n   `#rrggbb` on every entry whenever `onChangeColor` is passed (an entry\n   without one throws, as `ColorPicker` does); `colorPicker.presets` hands the\n   caller's palette to it. Emoji is configured through `emojiPicker`: the\n   caller's own options, its validator for a typed value, search and whether\n   the value may be removed.\n\n   A LOCKED ROW STAYS WHERE IT IS. `rowStatus` may mark a row `locked` (a\n   queue item already running): it shows a lock instead of the drag handle and\n   no reorder, by drag or keyboard, may change its position - a move that\n   would shift it is refused and `onReorder` does not fire.\n\n   WHAT STAYS PER-CALLER. A delete guard is a DECISION (a phase is blocked by\n   any reference, a track only by built work), so `rowStatus` keeps it in the\n   caller: it returns a read-only `badge` and, when delete must refuse, the\n   `disabledReason` shown on the control itself.\n   ========================================================================= */\n\nexport interface OrderedEntity {\n  id: string;\n  name: string;\n  order: number;\n  /** The entry's colour, `#rrggbb`. Required on every entry when `onChangeColor` is passed. */\n  color?: string;\n  /** Optional emoji, stored as the caller's value (the Unicode character by default). `null`/absent = none. */\n  emoji?: string | null;\n}\n\n/** What a row shows beyond its name: an optional READ-ONLY status badge, and\n *  - when non-empty - the reason the delete control refuses (see\n *  `IconButton`'s `disabledReason`, the only way to turn it off, so a caller\n *  cannot forget to explain a blocked delete). */\nexport interface OrderedEntityRowStatus {\n  badge?: ReactNode;\n  /** The row cannot be moved, and no move may shift it (a running queue item). */\n  locked?: boolean;\n  disabledReason?: string;\n}\n\ntype AddProps =\n  | { onCreate: (entity: { name: string; order: number }) => void; addFieldLabel: string; addPlaceholder: string }\n  | { onCreate?: undefined; addFieldLabel?: undefined; addPlaceholder?: undefined };\n\nexport type OrderedEntityManagerProps<T extends OrderedEntity> = AddProps & {\n  items: T[];\n  /** With `title` or `description` the list sits in a `Card` with that header; with neither it is the bare list (inside a `Dialog`, say). */\n  title?: string;\n  description?: string;\n  emptyMessage: ReactNode;\n  containerId: string;\n  containerLabel: string;\n  /** The full list, reordered and renumbered (`order` === new index) - the\n      caller persists each row's new `order`, e.g. one `update` per id. */\n  onReorder: (items: T[]) => void;\n  /** Present: a name is renamed in place (click, Enter commits, Escape cancels). */\n  onRename?: (id: string, name: string) => void;\n  /** Present: each row has a delete that asks for confirmation first. */\n  onDelete?: (id: string) => void;\n  /** Present: each row has a colour picker. Told the committed lowercase `#rrggbb`; a colour is never removed. */\n  onChangeColor?: (id: string, color: string) => void;\n  /** Present: each row has an emoji picker. `null` removes the emoji. */\n  onChangeEmoji?: (id: string, emoji: string | null) => void;\n  /** The colour picker's own options: `presets`, the caller's palette. */\n  colorPicker?: Pick<ColorPickerProps, \"presets\">;\n  /** The emoji picker's own options: `options`, `allowCustom`, `validateCustom`, `renderValue`, `clearable`, `searchable`. */\n  emojiPicker?: Pick<EmojiPickerProps, \"options\" | \"allowCustom\" | \"validateCustom\" | \"renderValue\" | \"clearable\" | \"searchable\">;\n  /** The one entry to draw attention to (the item just added). */\n  highlightedId?: string | null;\n  rowStatus?: (item: T) => OrderedEntityRowStatus;\n  className?: string;\n};\n\nexport function OrderedEntityManager<T extends OrderedEntity>(props: OrderedEntityManagerProps<T>) {\n  const {\n    items,\n    title,\n    description,\n    emptyMessage,\n    containerId,\n    containerLabel,\n    onCreate,\n    addFieldLabel,\n    addPlaceholder,\n    onReorder,\n    onRename,\n    onDelete,\n    onChangeColor,\n    onChangeEmoji,\n    colorPicker,\n    emojiPicker,\n    highlightedId,\n    rowStatus,\n    className,\n  } = props;\n  const strings = useUiStrings().orderedEntityManager;\n  const [newName, setNewName] = useState(\"\");\n  const [editingId, setEditingId] = useState<string | null>(null);\n  const [editingName, setEditingName] = useState(\"\");\n  /* The entry being confirmed stays set while the dialog plays its exit, so the title does not lose the name mid-fade. */\n  const [deleting, setDeleting] = useState<{ item: T; open: boolean } | null>(null);\n\n  const sorted = items.slice().sort((a, b) => a.order - b.order);\n\n  function handleCreate() {\n    const name = newName.trim();\n    if (!name || !onCreate) return;\n    const order = sorted.length === 0 ? 0 : Math.max(...sorted.map((item) => item.order)) + 1;\n    onCreate({ name, order });\n    setNewName(\"\");\n  }\n\n  function startEditing(item: T) {\n    setEditingId(item.id);\n    setEditingName(item.name);\n  }\n\n  function commitEditing() {\n    const name = editingName.trim();\n    if (editingId && name && onRename) onRename(editingId, name);\n    setEditingId(null);\n  }\n\n  function handleDragEnd(event: DragEndEvent) {\n    if (!event.moved) return;\n    const moved = applyMove(sorted, event.from.index, event.to.index);\n    // DXUI-27: a locked row keeps its position - a move that would shift it is refused.\n    if (moved.some((item, index) => rowStatus?.(item).locked && sorted[index] !== item)) return;\n    onReorder(moved.map((item, index) => ({ ...item, order: index })));\n  }\n\n  const list =\n    sorted.length === 0 ? (\n      <p className=\"text-sm text-tertiary\">{emptyMessage}</p>\n    ) : (\n      <DragDrop onDragEnd={handleDragEnd}>\n        {/* No `gap-*` here - `DragDropContainer`'s own axis=\"y\" recipe\n            already spaces items via a margin on each `DragDropItem` (see\n            `drag-drop/recipe.ts`'s banner on why a flex `gap` would break\n            the zero-height insertion marker). */}\n        <DragDropContainer id={containerId} label={containerLabel}>\n          {sorted.map((item, index) => {\n            const { badge, disabledReason, locked } = rowStatus?.(item) ?? {};\n            const highlighted = item.id === highlightedId;\n\n            return (\n              <DragDropItem key={item.id} id={item.id} index={index} label={item.name}>\n                <div\n                  aria-current={highlighted ? \"true\" : undefined}\n                  className={cn(\n                    \"flex items-center gap-2 rounded-lg border bg-surface p-2\",\n                    highlighted ? \"border-accent-border bg-accent-subtle\" : \"border-border-subtle\",\n                  )}\n                >\n                  {locked ? (\n                    <span role=\"img\" aria-label={strings.locked(item.name)} className=\"dx-tap flex size-7 shrink-0 items-center justify-center text-tertiary\">\n                      <Icon name=\"lock\" size=\"xs\" />\n                    </span>\n                  ) : (\n                    <DragDropHandle />\n                  )}\n\n                  {onChangeColor && (\n                    <ColorPicker\n                      value={item.color as string}\n                      onChange={(color) => onChangeColor(item.id, color)}\n                      label={strings.color(item.name)}\n                      size=\"sm\"\n                      {...colorPicker}\n                    />\n                  )}\n\n                  {onChangeEmoji && (\n                    <EmojiPicker\n                      value={item.emoji}\n                      onChange={(emoji) => onChangeEmoji(item.id, emoji)}\n                      label={strings.emoji(item.name)}\n                      {...emojiPicker}\n                    />\n                  )}\n\n                  {onRename && editingId === item.id ? (\n                    <Input\n                      autoFocus\n                      size=\"sm\"\n                      value={editingName}\n                      onChange={(event) => setEditingName(event.target.value)}\n                      onBlur={commitEditing}\n                      onKeyDown={(event) => {\n                        if (event.key === \"Enter\") commitEditing();\n                        if (event.key === \"Escape\") setEditingId(null);\n                      }}\n                      className=\"min-w-0 flex-1\"\n                    />\n                  ) : onRename ? (\n                    <button\n                      type=\"button\"\n                      onClick={() => startEditing(item)}\n                      className=\"dx-tap flex min-w-0 flex-1 items-center gap-1.5 rounded-md px-2 py-1 text-left text-sm text-primary transition-colors duration-(--dur-fast) hover:bg-surface-hover\"\n                    >\n                      <span className=\"min-w-0 truncate\">{item.name}</span>\n                      <Icon name=\"pencil\" size=\"xs\" className=\"shrink-0 text-tertiary\" />\n                    </button>\n                  ) : (\n                    <span className=\"min-w-0 flex-1 truncate px-2 py-1 text-sm text-primary\">{item.name}</span>\n                  )}\n\n                  {/* The VISIBLE reason a delete guard applies, or a queue\n                      item's state, when the caller's `rowStatus` supplies\n                      one - rendered whenever present, not just on hover.\n                      Read-only: a badge is never a control. */}\n                  {badge}\n\n                  {/* The guard states itself ON the control, not only in the\n                      badge beside it. `disabledReason` is the only way to\n                      turn an `IconButton` off, so the explanation cannot be\n                      omitted. */}\n                  {onDelete && (\n                    <IconButton\n                      icon={<Icon name=\"trash-2\" size=\"sm\" />}\n                      label={strings.delete(item.name)}\n                      tone=\"danger\"\n                      disabledReason={disabledReason}\n                      onClick={() => setDeleting({ item, open: true })}\n                    />\n                  )}\n                </div>\n              </DragDropItem>\n            );\n          })}\n        </DragDropContainer>\n      </DragDrop>\n    );\n\n  const add = onCreate && (\n    <div className=\"flex flex-wrap items-end gap-2 border-t border-border-subtle pt-4\">\n      <Field label={addFieldLabel} className=\"w-56\">\n        <Input\n          size=\"sm\"\n          value={newName}\n          onChange={(event) => setNewName(event.target.value)}\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              event.preventDefault();\n              handleCreate();\n            }\n          }}\n          placeholder={addPlaceholder}\n        />\n      </Field>\n      <Button size=\"sm\" onClick={handleCreate} disabled={!newName.trim()} leadingIcon={<Icon name=\"plus\" size=\"xs\" />}>\n        {strings.add}\n      </Button>\n    </div>\n  );\n\n  const confirm = onDelete && (\n    <AlertDialog\n      open={deleting?.open ?? false}\n      onOpenChange={(open) => {\n        if (!open) setDeleting((current) => current && { ...current, open: false });\n      }}\n      title={deleting ? strings.deleteTitle(deleting.item.name) : null}\n      description={strings.deleteDescription}\n      confirmLabel={strings.deleteConfirm}\n      destructive\n      onConfirm={() => {\n        if (deleting) onDelete(deleting.item.id);\n        setDeleting((current) => current && { ...current, open: false });\n      }}\n    />\n  );\n\n  if (!title && !description) {\n    return (\n      <div className={cn(\"flex flex-col gap-4\", className)}>\n        {list}\n        {add}\n        {confirm}\n      </div>\n    );\n  }\n\n  return (\n    <Card variant=\"sunken\" padding=\"md\" className={cn(\"gap-4\", className)}>\n      <CardHeader title={title} description={description} />\n      {list}\n      {add}\n      {confirm}\n    </Card>\n  );\n}\n"],"names":["OrderedEntityManager","props","items","title","description","emptyMessage","containerId","containerLabel","onCreate","addFieldLabel","addPlaceholder","onReorder","onRename","onDelete","onChangeColor","onChangeEmoji","colorPicker","emojiPicker","highlightedId","rowStatus","className","strings","useUiStrings","newName","setNewName","useState","editingId","setEditingId","editingName","setEditingName","deleting","setDeleting","sorted","a","b","handleCreate","name","order","item","startEditing","commitEditing","handleDragEnd","event","moved","applyMove","index","list","jsx","DragDrop","DragDropContainer","badge","disabledReason","locked","highlighted","DragDropItem","jsxs","cn","Icon","DragDropHandle","ColorPicker","color","EmojiPicker","emoji","Input","IconButton","add","Field","Button","confirm","AlertDialog","open","current","Card","CardHeader"],"mappings":"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"}

package/dist/components/PagedWindowList.js

@@ -0,0 +1,74 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useEffect as x, useCallback as A, useRef as D, Fragment as H } from "react";
+import { cn as N } from "../lib/cn.js";
+import { blockCountFor as U, blockStatus as q, placeholderHeight as G } from "../lib/paged-window/layout.js";
+import { useMeasuredPitch as I } from "../lib/paged-window/use-measured-pitch.js";
+import { usePageVisibility as J } from "../lib/paged-window/use-page-visibility.js";
+import { useScrollRoot as K } from "../lib/paged-window/use-scroll-root.js";
+import { useListOwner as Q, useReportBusy as X } from "../lib/paged-window/list-owner.js";
+import { PageBlock as Y } from "./paged-window/PageBlock.js";
+import { useUiStrings as Z } from "../lib/i18n/provider.js";
+import { useDragLive as _ } from "../lib/dnd/use-drag.js";
+function ut({
+  source: e,
+  getKey: L,
+  renderItem: C,
+  estimatedItemHeight: M,
+  className: S
+}) {
+  const l = Z().pagedWindowList, u = Q(), p = e.pages.some((t) => t.status === "loading");
+  X(u, p);
+  const { setAnchorPage: z, setFrozen: i, invalidatePage: F, pageSize: m, pageCount: T, epoch: o, offset: V } = e, f = _();
+  x(() => (i(f), () => i(!1)), [f, i]);
+  const { ref: B, scroller: r } = K(), { observe: d } = J(r, z), { pitch: E, observe: g } = I(M), O = A(
+    (t) => {
+      if (!t) return;
+      const s = d(t), n = g(t);
+      return () => {
+        s(), n();
+      };
+    },
+    [d, g]
+  ), h = D(o);
+  x(() => {
+    !r?.el || h.current === o || (h.current = o, r.el.scrollTop = 0);
+  }, [o, r]);
+  const b = new Map(e.pages.map((t) => [t.page, t])), W = e.total ?? m, v = Math.max(1, Math.round(E)), w = [];
+  let y = 0;
+  const j = U(T, b.size);
+  for (let t = 0; t < j; t++) {
+    const s = b.get(t), n = q(s), P = y, c = n === "ready" ? s.items : [];
+    y += c.length, w.push(
+      /* @__PURE__ */ a(
+        Y,
+        {
+          page: t,
+          status: n,
+          count: c.length,
+          height: G(t, m, W, v),
+          pitch: v,
+          blockRef: O,
+          errorText: l.failed,
+          retryText: l.retry,
+          onRetry: () => F(t),
+          children: c.map((k, R) => /* @__PURE__ */ a(H, { children: C(k, { local: P + R, global: V + P + R }) }, L(k)))
+        },
+        t
+      )
+    );
+  }
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ref: B,
+      "data-paged-window": "",
+      "aria-busy": p && !u ? !0 : void 0,
+      className: N("min-w-0 shrink-0", S),
+      children: w
+    }
+  );
+}
+export {
+  ut as PagedWindowList
+};
+//# sourceMappingURL=PagedWindowList.js.map

package/dist/components/PagedWindowList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PagedWindowList.js","sources":["../../src/components/PagedWindowList.tsx"],"sourcesContent":["import { Fragment, useCallback, useEffect, useRef, type ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { useDragLive } from \"../lib/dnd\";\nimport type { PagedWindow } from \"../lib/paged-window\";\nimport { blockCountFor, blockStatus, placeholderHeight } from \"../lib/paged-window/layout\";\nimport { useMeasuredPitch } from \"../lib/paged-window/use-measured-pitch\";\nimport { usePageVisibility } from \"../lib/paged-window/use-page-visibility\";\nimport { useScrollRoot } from \"../lib/paged-window/use-scroll-root\";\nimport { useListOwner, useReportBusy } from \"../lib/paged-window/list-owner\";\nimport { PageBlock } from \"./paged-window/PageBlock\";\n\n/* ============================================================================\n   PAGED WINDOW LIST — renders a `usePagedWindow` as one long scrollable list\n   that holds only a few pages of cards in the DOM and in memory. DX-4540.\n\n   THE SCROLLBAR TELLS THE TRUTH. A page that is not resident is a PLACEHOLDER\n   BLOCK of `items on that page x measured item height`, so the scroll extent\n   spans the whole `total` and the viewer can drag the scrollbar anywhere. The\n   page under the viewport loads on arrival, its neighbours are already\n   prefetched (they are the other pages of the window) and everything farther is\n   replaced in the DOM by a placeholder of the same height. The rows of a page\n   that was loaded stay in memory (DX-5521), so scrolling back to it draws its\n   cards at once with no loading rows and no request; only a page never loaded\n   shows loading rows.\n\n   ONE BLOCK PER PAGE, ALWAYS. A page's block is the same element whether it is\n   a placeholder or holds its cards — one component (`PageBlock`) at one key, so\n   React keeps the DOM node through a load, a drop and a failure — which is what\n   makes three things work:\n     - the viewer's position is read from `IntersectionObserver` on the blocks,\n       rooted at the scroll container (`usePageVisibility`): no scroll listener,\n       no polling. A page is \"in view\" while its block intersects the root, and\n       the window follows the middle of the pages in view;\n     - the element under the viewport survives a load, so the browser's own\n       scroll anchoring keeps the viewer's place when a page above arrives or\n       is dropped and its real height differs from the estimate;\n     - a non-resident page costs one empty div, so a 20,000-item list is 1,000 of\n       them, not 20,000 cards.\n   ALL THREE NEED EACH BLOCK TO HOLD ITS OWN PAGE'S ITEMS, AND ONLY THEM (DX-5521).\n   A consumer that draws an item of one page inside another page's block (a box\n   gathering a parent's cards from two pages into the first) breaks both: the\n   viewer reading the moved cards is told they are on the block's page, and when a\n   page above is drawn and the cards move to it, the browser holds its place on\n   the emptied block, whose top just moved, and scrolls the viewer away by the\n   height of the moved cards (a board lane trapped its reader this way). A\n   `renderItem` draws its item where it is called; a box spanning two pages is a\n   piece in each page's block (`DragDropGroup`'s `continuesBefore` /\n   `continuesAfter`).\n\n   THIS FILE IS THE RENDER LOOP AND THE DRAG FREEZE. The other jobs are their\n   own hooks: finding the scroller (`useScrollRoot`), reading what is in view\n   (`usePageVisibility`), measuring what an item costs (`useMeasuredPitch`),\n   and the block every page is drawn as (`PageBlock`).\n\n   THE SCROLLER IS NOT THIS COMPONENT'S. It is the nearest ancestor that\n   scrolls — a board lane's `DragDropContainer`, or this component's own\n   `className` when that sets `overflow-y-auto` — found once on mount. So the\n   list drops into a lane as plain children and the lane keeps its own scrolling,\n   auto-scroll during a drag included.\n\n   ONLY RENDERED CARDS ARE DROP TARGETS. The drag engine measures the items that\n   are registered (`lib/dnd/session.ts#remeasure`), and a page that is not resident\n   registers none: a card dropped over a placeholder lands against the nearest\n   card that is there. And the window FREEZES for the length of a drag\n   (`useDragLive`): the carried card lives in its page, and dropping that page\n   because autoscroll moved the viewer would unmount the card and cancel the\n   drag. The memory bound still holds — a frozen window is the window that was\n   there at pickup.\n\n   WHAT A CONSUMER OWNS. This renders `renderItem(item, {local, global})` for\n   each shown item and nothing about what an item is. `local` counts the shown\n   items only (what the drag engine's `index` wants: a position among the\n   registered cards), `global` is the item's position in the whole list\n   (`source.offset + local`, what a server wants).\n   ========================================================================= */\n\nexport interface PagedWindowItemPosition {\n  /** Position among the items currently shown, across every shown page. */\n  local: number;\n  /** Position in the whole list: `source.offset + local`. */\n  global: number;\n}\n\nexport interface PagedWindowListProps<T> {\n  /** The window to render — what `usePagedWindow` returned. */\n  source: PagedWindow<T>;\n  /** Stable across renders and pages. Never an array index. */\n  getKey: (item: T) => string | number;\n  renderItem: (item: T, position: PagedWindowItemPosition) => ReactNode;\n  /**\n   * One item's height INCLUDING its spacing, in px, used for placeholders until\n   * real pages have been measured. Replaced by the measured mean as pages\n   * arrive, so it only has to be close.\n   */\n  estimatedItemHeight: number;\n  className?: string;\n}\n\nexport function PagedWindowList<T>({\n  source,\n  getKey,\n  renderItem,\n  estimatedItemHeight,\n  className,\n}: PagedWindowListProps<T>) {\n  const words = useUiStrings().pagedWindowList;\n  const listOwner = useListOwner();\n  const busy = source.pages.some((p) => p.status === \"loading\");\n  useReportBusy(listOwner, busy);\n  const { setAnchorPage, setFrozen, invalidatePage, pageSize, pageCount, epoch, offset } = source;\n\n  /* THE DRAG FREEZE. Cleanup thaws, so a list that unmounts mid-drag cannot\n     leave a window that never moves again. */\n  const dragLive = useDragLive();\n  useEffect(() => {\n    setFrozen(dragLive);\n    return () => setFrozen(false);\n  }, [dragLive, setFrozen]);\n\n  const { ref: rootRef, scroller } = useScrollRoot();\n  const { observe: observeVisibility } = usePageVisibility(scroller, setAnchorPage);\n  const { pitch, observe: observePitch } = useMeasuredPitch(estimatedItemHeight);\n\n  /* One stable ref for every block. Its returned cleanup knows its own element,\n     which a null-called ref callback would not. */\n  const blockRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      if (!el) return;\n      const unobserveVisibility = observeVisibility(el);\n      const unobservePitch = observePitch(el);\n      return () => {\n        unobserveVisibility();\n        unobservePitch();\n      };\n    },\n    [observeVisibility, observePitch],\n  );\n\n  /* A new query starts at the top, whatever the old one's scroll position. */\n  const seenEpoch = useRef(epoch);\n  useEffect(() => {\n    if (!scroller?.el || seenEpoch.current === epoch) return;\n    seenEpoch.current = epoch;\n    scroller.el.scrollTop = 0;\n  }, [epoch, scroller]);\n\n  const drawn = new Map(source.pages.map((p) => [p.page, p]));\n  const total = source.total ?? pageSize;\n  const roundedPitch = Math.max(1, Math.round(pitch));\n\n  const nodes: ReactNode[] = [];\n  let local = 0;\n  const blockCount = blockCountFor(pageCount, drawn.size);\n  for (let page = 0; page < blockCount; page++) {\n    const current = drawn.get(page);\n    const status = blockStatus(current);\n    const first = local;\n    const shown = status === \"ready\" ? current!.items : [];\n    local += shown.length;\n    nodes.push(\n      <PageBlock\n        key={page}\n        page={page}\n        status={status}\n        count={shown.length}\n        height={placeholderHeight(page, pageSize, total, roundedPitch)}\n        pitch={roundedPitch}\n        blockRef={blockRef}\n        errorText={words.failed}\n        retryText={words.retry}\n        onRetry={() => invalidatePage(page)}\n      >\n        {shown.map((item, i) => (\n          <Fragment key={getKey(item)}>\n            {renderItem(item, { local: first + i, global: offset + first + i })}\n          </Fragment>\n        ))}\n      </PageBlock>,\n    );\n  }\n\n  return (\n    <div\n      ref={rootRef}\n      data-paged-window=\"\"\n      /* DX-5084: inside a lane's `role=\"list\"` the lane carries `aria-busy` (see\n         `list-owner.tsx`); a role-less box with a global ARIA attribute there would be a\n         non-listitem child of the list. Anywhere else this root is the busy element. */\n      aria-busy={busy && !listOwner ? true : undefined}\n      className={cn(\"min-w-0 shrink-0\", className)}\n    >\n      {nodes}\n    </div>\n  );\n}\n"],"names":["PagedWindowList","source","getKey","renderItem","estimatedItemHeight","className","words","useUiStrings","listOwner","useListOwner","busy","p","useReportBusy","setAnchorPage","setFrozen","invalidatePage","pageSize","pageCount","epoch","offset","dragLive","useDragLive","useEffect","rootRef","scroller","useScrollRoot","observeVisibility","usePageVisibility","pitch","observePitch","useMeasuredPitch","blockRef","useCallback","el","unobserveVisibility","unobservePitch","seenEpoch","useRef","drawn","total","roundedPitch","nodes","local","blockCount","blockCountFor","page","current","status","blockStatus","first","shown","jsx","PageBlock","placeholderHeight","item","i","Fragment","cn"],"mappings":"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"}

package/dist/components/PaginationBar.js

@@ -0,0 +1,95 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { cn as N } from "../lib/cn.js";
+import { Button as M } from "./Button.js";
+import { Icon as l } from "./Icon.js";
+import { IconButton as p } from "./IconButton.js";
+import { Menu as P, MenuRadioGroup as B, MenuRadioItem as k } from "./Menu.js";
+import { Pagination as y } from "./Navigation.js";
+import { useBelow as I } from "../lib/use-media-query.js";
+import { useUiStrings as R } from "../lib/i18n/provider.js";
+import { useNumberFormat as j } from "../lib/i18n/number-format.js";
+function A({
+  page: d,
+  pageSize: i,
+  pageSizeOptions: u,
+  total: t,
+  onPageChange: m,
+  onPageSizeChange: h,
+  mode: g = "simple",
+  label: f,
+  className: x
+}) {
+  const s = Math.max(1, Math.ceil(t / i)), r = Math.min(d, s), v = t === 0 ? 0 : (r - 1) * i + 1, b = t === 0 ? 0 : Math.min(t, r * i), w = I("sm"), n = R().paginationBar, a = j();
+  return /* @__PURE__ */ c(
+    "nav",
+    {
+      "aria-label": n.navLabel(f),
+      className: N("flex flex-nowrap items-center justify-between gap-2", x),
+      children: [
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: "min-w-0 shrink truncate text-xs text-secondary tabular",
+            "aria-live": "polite",
+            children: n.range(a(v), a(b), a(t))
+          }
+        ),
+        /* @__PURE__ */ c("div", { className: "flex shrink-0 items-center gap-2", children: [
+          /* @__PURE__ */ e(
+            P,
+            {
+              align: "end",
+              trigger: /* @__PURE__ */ e(
+                M,
+                {
+                  size: "sm",
+                  variant: "outline",
+                  "aria-label": n.rowsPerPage(a(i)),
+                  trailingIcon: /* @__PURE__ */ e(l, { name: "chevron-down", size: "xs", className: "text-tertiary" }),
+                  children: w ? a(i) : /* @__PURE__ */ e("span", { className: "whitespace-nowrap", children: n.pageSizeTrigger(a(i)) })
+                }
+              ),
+              children: /* @__PURE__ */ e(
+                B,
+                {
+                  value: String(i),
+                  onValueChange: (o) => h(Number(o)),
+                  children: u.map((o) => /* @__PURE__ */ e(k, { value: String(o), children: n.pageSizeOption(a(o)) }, o))
+                }
+              )
+            }
+          ),
+          g === "numbered" ? s > 1 && /* @__PURE__ */ e(y, { page: r, pageCount: s, onPageChange: m }) : /* @__PURE__ */ c("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ e(
+              p,
+              {
+                icon: /* @__PURE__ */ e(l, { name: "chevron-left", size: "sm" }),
+                label: n.previousPage,
+                variant: "ghost",
+                size: "sm",
+                disabledReason: r <= 1 ? n.onFirstPage : void 0,
+                onClick: () => m(r - 1)
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: "text-xs whitespace-nowrap text-secondary tabular", children: n.pageOf(a(r), a(s)) }),
+            /* @__PURE__ */ e(
+              p,
+              {
+                icon: /* @__PURE__ */ e(l, { name: "chevron-right", size: "sm" }),
+                label: n.nextPage,
+                variant: "ghost",
+                size: "sm",
+                disabledReason: r >= s ? n.onLastPage : void 0,
+                onClick: () => m(r + 1)
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  A as PaginationBar
+};
+//# sourceMappingURL=PaginationBar.js.map

package/dist/components/PaginationBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationBar.js","sources":["../../src/components/PaginationBar.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\nimport { useNumberFormat, useUiStrings } from \"../lib/i18n\";\nimport { Button } from \"./Button\";\nimport { Icon } from \"./Icon\";\nimport { IconButton } from \"./IconButton\";\nimport { Menu, MenuRadioGroup, MenuRadioItem } from \"./Menu\";\nimport { Pagination } from \"./Navigation\";\nimport { useBelow } from \"../lib/use-media-query\";\n\n/* ============================================================================\n   PAGINATIONBAR — the one footer every paged list in this system uses.\n\n   Before this component there were two, hand-rolled independently:\n   `CardList.tsx`'s (range text + a plain native `Select` for per-page +\n   prev/\"Page N of M\"/next) and `DataTable`'s (range text + the numbered\n   `Pagination` control, no per-page control at all). Neither wrapped\n   gracefully — `CardList`'s used `flex-wrap`, so at ordinary widths the range\n   text sat alone on its own line and the per-page select and page controls\n   wrapped to a second. `flex-nowrap` here is not a style preference, it is\n   the actual fix: the bar simply has nowhere to put a second row.\n\n   THE PER-PAGE CONTROL IS A POPOVER, NOT A SELECT. A native `<select>` opens\n   its OS's own list — different chrome, no keyboard-radio affordance, and\n   visually unrelated to every other menu in the app. `CardList`'s own Sort\n   button (a `Menu` trigger showing an icon, opening `MenuRadioGroup` /\n   `MenuRadioItem` radio options) already solved exactly this shape one\n   control to the left, so the per-page picker is built the identical way —\n   same trigger silhouette, same popup, same keyboard model — rather than\n   inventing a second pattern for what is the same kind of choice.\n\n   PAGE NAVIGATION IS A MODE, NOT A FORK. The two existing footers disagreed\n   about this because their lists have different shapes: `CardList` pages a\n   short, usually-single-page list, where \"Page 1 of 1\" is the common case and\n   jumping past adjacent pages is never needed. `DataTable` backs lists long\n   enough that the numbered window earns its width. Rather than picking one\n   and quietly regressing the other's UX, `mode` says which: `\"simple\"`\n   (prev / \"Page N of M\" / next — fixed width regardless of how many pages\n   exist, and the shape this bar defaults to because it is the one guaranteed\n   to fit a narrow bar with no help from anything else) or `\"numbered\"` (the\n   existing windowed `Pagination` control, which already collapses its own\n   siblings below the `sm` breakpoint via `useBelow(\"sm\")`).\n\n   NEVER WRAPS, AT ANY WIDTH THE DASHBOARD RENDERS AT (375/768/1024/1280).\n   What degrades first, in order, as the bar runs out of room:\n     1. The per-page trigger's \" / page\" suffix drops below `sm` — the bare\n        number plus the chevron is still an unambiguous control.\n     2. The range text is `min-w-0 truncate` and sits in a `shrink` slot, so a\n        very long total (\"1,204,391 of 1,204,391\") clips with an ellipsis\n        rather than pushing the controls (which never shrink) off the row.\n     3. In `\"numbered\"` mode, `Pagination` itself drops its sibling page\n        numbers below `sm`, exactly as it already does inside `DataTable`.\n   Nothing here ever calls `flex-wrap`, so there is no second row to fall\n   into regardless of how far degradation goes.\n   ========================================================================= */\n\nexport type PaginationBarMode = \"numbered\" | \"simple\";\n\nexport interface PaginationBarProps {\n  /** 1-based current page. */\n  page: number;\n  /** Rows per page. Should be one of `pageSizeOptions`. */\n  pageSize: number;\n  /** The sizes offered in the per-page popover, in the order shown. */\n  pageSizeOptions: readonly number[];\n  /** Total matching items across every page — drives the range text and page count. */\n  total: number;\n  onPageChange: (page: number) => void;\n  onPageSizeChange: (size: number) => void;\n  /**\n   * `\"simple\"`: ‹ Page N of M › — fixed width regardless of how many pages\n   * exist, and the shape guaranteed to fit a narrow bar unaided.\n   * `\"numbered\"`: the numbered-window `Pagination` control, for a list long\n   * enough that jumping past adjacent pages is worth the room it costs.\n   * @default \"simple\"\n   */\n  mode?: PaginationBarMode;\n  /** Names the bar for assistive tech, e.g. \"Cards\" or \"Dispatches\". */\n  label: string;\n  className?: string;\n}\n\n/**\n * Range text + a popover-based per-page picker + page navigation, always on\n * one row. See the file banner above for the reasoning behind the popover\n * and the `mode` split — this replaces both of gpt-manager's pre-existing,\n * differently-shaped hand-rolled footers.\n */\nexport function PaginationBar({\n  page,\n  pageSize,\n  pageSizeOptions,\n  total,\n  onPageChange,\n  onPageSizeChange,\n  mode = \"simple\",\n  label,\n  className,\n}: PaginationBarProps) {\n  const pageCount = Math.max(1, Math.ceil(total / pageSize));\n  const clampedPage = Math.min(page, pageCount);\n  const first = total === 0 ? 0 : (clampedPage - 1) * pageSize + 1;\n  const last = total === 0 ? 0 : Math.min(total, clampedPage * pageSize);\n  /* Drives ONLY the per-page trigger's label — see degradation step 1 above.\n     `Pagination`'s own sibling collapse is internal to that component and\n     applies independently in `\"numbered\"` mode. */\n  const narrow = useBelow(\"sm\");\n  const strings = useUiStrings().paginationBar;\n  const fmt = useNumberFormat();\n\n  return (\n    <nav\n      aria-label={strings.navLabel(label)}\n      className={cn(\"flex flex-nowrap items-center justify-between gap-2\", className)}\n    >\n      <span\n        className=\"min-w-0 shrink truncate text-xs text-secondary tabular\"\n        aria-live=\"polite\"\n      >\n        {strings.range(fmt(first), fmt(last), fmt(total))}\n      </span>\n\n      <div className=\"flex shrink-0 items-center gap-2\">\n        <Menu\n          align=\"end\"\n          trigger={\n            <Button\n              size=\"sm\"\n              variant=\"outline\"\n              aria-label={strings.rowsPerPage(fmt(pageSize))}\n              trailingIcon={<Icon name=\"chevron-down\" size=\"xs\" className=\"text-tertiary\" />}\n            >\n              {narrow ? fmt(pageSize) : <span className=\"whitespace-nowrap\">{strings.pageSizeTrigger(fmt(pageSize))}</span>}\n            </Button>\n          }\n        >\n          <MenuRadioGroup\n            value={String(pageSize)}\n            onValueChange={(value) => onPageSizeChange(Number(value))}\n          >\n            {pageSizeOptions.map((size) => (\n              <MenuRadioItem key={size} value={String(size)}>\n                {strings.pageSizeOption(fmt(size))}\n              </MenuRadioItem>\n            ))}\n          </MenuRadioGroup>\n        </Menu>\n\n        {mode === \"numbered\" ? (\n          pageCount > 1 && (\n            <Pagination page={clampedPage} pageCount={pageCount} onPageChange={onPageChange} />\n          )\n        ) : (\n          <div className=\"flex items-center gap-1\">\n            <IconButton\n              icon={<Icon name=\"chevron-left\" size=\"sm\" />}\n              label={strings.previousPage}\n              variant=\"ghost\"\n              size=\"sm\"\n              disabledReason={clampedPage <= 1 ? strings.onFirstPage : undefined}\n              onClick={() => onPageChange(clampedPage - 1)}\n            />\n            <span className=\"text-xs whitespace-nowrap text-secondary tabular\">\n              {strings.pageOf(fmt(clampedPage), fmt(pageCount))}\n            </span>\n            <IconButton\n              icon={<Icon name=\"chevron-right\" size=\"sm\" />}\n              label={strings.nextPage}\n              variant=\"ghost\"\n              size=\"sm\"\n              disabledReason={clampedPage >= pageCount ? strings.onLastPage : undefined}\n              onClick={() => onPageChange(clampedPage + 1)}\n            />\n          </div>\n        )}\n      </div>\n    </nav>\n  );\n}\n"],"names":["PaginationBar","page","pageSize","pageSizeOptions","total","onPageChange","onPageSizeChange","mode","label","className","pageCount","clampedPage","first","last","narrow","useBelow","strings","useUiStrings","fmt","useNumberFormat","jsxs","cn","jsx","Menu","Button","Icon","MenuRadioGroup","value","size","MenuRadioItem","Pagination","IconButton"],"mappings":"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"}