@handamade/psi-react 0.15.0 → 0.16.0

package/dist/Pagination/Pagination.d.ts

@@ -20,7 +20,11 @@
  * standing in for one number is worse than the number. */
 export declare function paginationRange(page: number, pageCount: number, siblingCount: number): Array<number | "ellipsis">;
 export interface PaginationProps {
-    /** Current page, 1-based. */
+    /**
+     * Current page, 1-based. A value outside `[1, pageCount]` (including
+     * non-finite values like `NaN`) is clamped for rendering and logs a
+     * `console.warn` in development. `pageCount < 1` renders no page buttons.
+     */
     page: number;
     /** Total number of pages. */
     pageCount: number;

package/dist/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;;;;;0DAmB0D;AAC1D,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,GACnB,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC,CAkC5B;AAED,MAAM,WAAW,eAAe;IAC9B,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;2BAE2B;AAC3B,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,YAAgB,EAChB,YAAY,EAAE,SAAwB,EACtC,SAAS,GACV,EAAE,eAAe,+BA+CjB"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;;;;;0DAmB0D;AAC1D,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,GACnB,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC,CAkC5B;AAED,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;2BAE2B;AAC3B,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,YAAgB,EAChB,YAAY,EAAE,SAAwB,EACtC,SAAS,GACV,EAAE,eAAe,+BA6DjB"}

package/dist/Table/Table.d.ts

@@ -15,10 +15,13 @@ export interface TableProps {
     /** Controlled sort state; `null` when nothing is sorted. */
     sort?: TableSortState | null;
     /**
-     * Called when a header's sort control is activated. Optional in the type
-     * because `sortable` may be false; a discriminated union expressing the real
-     * contract does not survive docgen's flat prop extraction, which would strip
-     * these props from the manifest entirely (D62).
+     * Called with the **next** sort state, already toggled — store it as given
+     * and do not toggle again. A fresh column arrives `"asc"`; an active `"asc"`
+     * column emits `"desc"`; an active `"desc"` column emits `"asc"`.
+     *
+     * Optional in the type because `sortable` may be false; a discriminated union
+     * expressing the real contract does not survive docgen's flat prop
+     * extraction, which would strip these props from the manifest entirely (D62).
      */
     onSortChange?: (sort: TableSortState) => void;
     /** Renders the row-selection checkbox column. */

package/dist/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAErC,+DAA+D;AAC/D,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;CAC3B;AAiDD,MAAM,WAAW,UAAU;IACzB,oCAAoC;IACpC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC7B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5D,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED;iEACiE;AACjE,wBAAgB,KAAK,CAAC,EACpB,IAAS,EACT,YAAY,EACZ,QAAgB,EAChB,IAAW,EACX,YAAY,EACZ,UAAkB,EAClB,QAA0B,EAC1B,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,GAAG,GACJ,EAAE,UAAU,+BAkBZ"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAErC,+DAA+D;AAC/D,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;CAC3B;AAiDD,MAAM,WAAW,UAAU;IACzB,oCAAoC;IACpC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC7B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5D,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED;iEACiE;AACjE,wBAAgB,KAAK,CAAC,EACpB,IAAS,EACT,YAAY,EACZ,QAAgB,EAChB,IAAW,EACX,YAAY,EACZ,UAAkB,EAClB,QAA0B,EAC1B,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,GAAG,GACJ,EAAE,UAAU,+BAkBZ"}

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx as n, jsxs as f, Fragment as X } from "react/jsx-runtime";
-import { createContext as R, useId as H, useRef as k, useEffect as N, useContext as S, useState as _e, useCallback as g, cloneElement as ne, isValidElement as U, useMemo as oe, Children as A, Fragment as ce } from "react";
-const Be = "_button_c94w9_3", $e = "_disabled_c94w9_30", Ne = "_size24_c94w9_44", Le = "_size32_c94w9_54", Se = "_size40_c94w9_64", je = "_size48_c94w9_74", ze = "_accent_c94w9_87", Te = "_accentSubtle_c94w9_99", Ie = "_neutral_c94w9_111", Ee = "_neutralSubtle_c94w9_123", Me = "_ghost_c94w9_135", Ae = "_danger_c94w9_147", Pe = "_dangerSubtle_c94w9_159", We = "_outline_c94w9_171", w = {
+import { createContext as R, useId as H, useRef as k, useEffect as N, useContext as S, useState as _e, useCallback as g, cloneElement as ne, isValidElement as U, useMemo as oe, Children as P, Fragment as ce } from "react";
+const Be = "_button_c94w9_3", $e = "_disabled_c94w9_30", Ne = "_size24_c94w9_44", Le = "_size32_c94w9_54", Se = "_size40_c94w9_64", je = "_size48_c94w9_74", ze = "_accent_c94w9_87", Te = "_accentSubtle_c94w9_99", Ie = "_neutral_c94w9_111", Ee = "_neutralSubtle_c94w9_123", Me = "_ghost_c94w9_135", Pe = "_danger_c94w9_147", Ae = "_dangerSubtle_c94w9_159", We = "_outline_c94w9_171", w = {
   button: Be,
   disabled: $e,
   size24: Ne,
@@ -12,8 +12,8 @@ const Be = "_button_c94w9_3", $e = "_disabled_c94w9_30", Ne = "_size24_c94w9_44"
   neutral: Ie,
   neutralSubtle: Ee,
   ghost: Me,
-  danger: Ae,
-  dangerSubtle: Pe,
+  danger: Pe,
+  dangerSubtle: Ae,
   outline: We
 }, De = {
   accent: w.accent,
@@ -35,10 +35,10 @@ function He({
   size: t = 32,
   href: i,
   target: s,
-  rel: c,
+  rel: a,
   disabled: r,
   className: o,
-  onClick: a,
+  onClick: c,
   ref: d,
   ...l
 }) {
@@ -56,9 +56,9 @@ function He({
       className: u,
       href: r ? void 0 : i,
       target: s,
-      rel: c,
+      rel: a,
       "aria-disabled": r || void 0,
-      onClick: r ? void 0 : a,
+      onClick: r ? void 0 : c,
       ...l
     }
   ) : /* @__PURE__ */ n(
@@ -67,7 +67,7 @@ function He({
       ref: d,
       className: u,
       disabled: r,
-      onClick: a,
+      onClick: c,
       ...l
     }
   );
@@ -99,10 +99,10 @@ function J({
   size: t = 32,
   href: i,
   target: s,
-  rel: c,
+  rel: a,
   disabled: r,
   className: o,
-  onClick: a,
+  onClick: c,
   ref: d,
   ...l
 }) {
@@ -120,9 +120,9 @@ function J({
       className: u,
       href: r ? void 0 : i,
       target: s,
-      rel: c,
+      rel: a,
       "aria-disabled": r || void 0,
-      onClick: r ? void 0 : a,
+      onClick: r ? void 0 : c,
       ...l
     }
   ) : /* @__PURE__ */ n(
@@ -131,7 +131,7 @@ function J({
       ref: d,
       className: u,
       disabled: r,
-      onClick: a,
+      onClick: c,
       ...l
     }
   );
@@ -149,28 +149,28 @@ function Eo({
   media: t,
   hoverLift: i = !1,
   className: s,
-  children: c,
+  children: a,
   ref: r,
   ...o
 }) {
-  const a = [
+  const c = [
     I.card,
     e === "featured" ? I.featured : I.stacked,
     i ? I.hoverLift : void 0,
     s
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ f("div", { ref: r, className: a, ...o, children: [
+  return /* @__PURE__ */ f("div", { ref: r, className: c, ...o, children: [
     t != null && /* @__PURE__ */ n("div", { className: I.media, children: t }),
-    /* @__PURE__ */ n("div", { className: I.body, children: c })
+    /* @__PURE__ */ n("div", { className: I.body, children: a })
   ] });
 }
 const st = "_panel_jn8w4_1", at = "_padding16_jn8w4_8", le = {
   panel: st,
   padding16: at
 };
-function Mo({ padding: e = 24, className: t, children: i, ref: s, ...c }) {
+function Mo({ padding: e = 24, className: t, children: i, ref: s, ...a }) {
   const r = [le.panel, e === 16 ? le.padding16 : void 0, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("div", { ref: s, className: r, ...c, children: i });
+  return /* @__PURE__ */ n("div", { ref: s, className: r, ...a, children: i });
 }
 const ct = "_list_1lh3q_8", lt = "_item_1lh3q_26", dt = "_term_1lh3q_44", ut = "_value_1lh3q_50", Z = {
   list: ct,
@@ -178,18 +178,18 @@ const ct = "_list_1lh3q_8", lt = "_item_1lh3q_26", dt = "_term_1lh3q_44", ut = "
   term: dt,
   value: ut
 };
-function Ao({
+function Po({
   layout: e = "stacked",
   gap: t = 12,
   className: i,
   children: s,
-  ref: c,
+  ref: a,
   ...r
 }) {
   return /* @__PURE__ */ n(
     "dl",
     {
-      ref: c,
+      ref: a,
       className: [Z.list, i].filter(Boolean).join(" "),
       "data-layout": e,
       "data-gap": t,
@@ -198,8 +198,8 @@ function Ao({
     }
   );
 }
-function Po({ term: e, className: t, children: i, ref: s, ...c }) {
-  return /* @__PURE__ */ f("div", { ref: s, className: [Z.item, t].filter(Boolean).join(" "), ...c, children: [
+function Ao({ term: e, className: t, children: i, ref: s, ...a }) {
+  return /* @__PURE__ */ f("div", { ref: s, className: [Z.item, t].filter(Boolean).join(" "), ...a, children: [
     /* @__PURE__ */ n("dt", { className: Z.term, children: e }),
     /* @__PURE__ */ n("dd", { className: Z.value, children: i })
   ] });
@@ -211,9 +211,9 @@ const ht = "_navbar_1gyow_1", _t = "_inner_1gyow_12", ft = "_brand_1gyow_19", pt
   links: pt,
   actions: vt
 };
-function Wo({ brand: e, actions: t, children: i, className: s, ref: c, ...r }) {
+function Wo({ brand: e, actions: t, children: i, className: s, ref: a, ...r }) {
   const o = [F.navbar, s].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("header", { ref: c, className: o, ...r, children: /* @__PURE__ */ f("div", { className: `psi-container ${F.inner}`, children: [
+  return /* @__PURE__ */ n("header", { ref: a, className: o, ...r, children: /* @__PURE__ */ f("div", { className: `psi-container ${F.inner}`, children: [
     e != null && /* @__PURE__ */ n("div", { className: F.brand, children: e }),
     /* @__PURE__ */ n("nav", { className: F.links, children: i }),
     t != null && /* @__PURE__ */ n("div", { className: F.actions, children: t })
@@ -222,9 +222,9 @@ function Wo({ brand: e, actions: t, children: i, className: s, ref: c, ...r }) {
 const bt = "_frame_et4fc_1", gt = {
   frame: bt
 };
-function Do({ ratio: e, className: t, style: i, children: s, ref: c, ...r }) {
+function Do({ ratio: e, className: t, style: i, children: s, ref: a, ...r }) {
   const o = [gt.frame, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("div", { ref: c, className: o, style: { aspectRatio: String(e), ...i }, ...r, children: s });
+  return /* @__PURE__ */ n("div", { ref: a, className: o, style: { aspectRatio: String(e), ...i }, ...r, children: s });
 }
 const mt = "_field_lplye_1", yt = "_label_lplye_10", wt = "_marker_lplye_16", kt = "_message_lplye_20", xt = "_invalid_lplye_26", E = {
   field: mt,
@@ -238,10 +238,10 @@ function Ro({
   description: t,
   error: i,
   required: s = !1,
-  group: c = !1,
+  group: a = !1,
   htmlFor: r,
   className: o,
-  children: a,
+  children: c,
   ref: d,
   ...l
 }) {
@@ -249,11 +249,11 @@ function Ro({
     e,
     s && /* @__PURE__ */ n("span", { "aria-hidden": "true", className: E.marker, children: " *" })
   ] }) : null, b = /* @__PURE__ */ f(X, { children: [
-    C != null && (c ? /* @__PURE__ */ n("legend", { className: E.label, children: C }) : /* @__PURE__ */ n("label", { className: E.label, htmlFor: h, children: C })),
-    /* @__PURE__ */ n(re.Provider, { value: { id: h, describedBy: y, invalid: _, required: s }, children: a }),
+    C != null && (a ? /* @__PURE__ */ n("legend", { className: E.label, children: C }) : /* @__PURE__ */ n("label", { className: E.label, htmlFor: h, children: C })),
+    /* @__PURE__ */ n(re.Provider, { value: { id: h, describedBy: y, invalid: _, required: s }, children: c }),
     y && /* @__PURE__ */ n("p", { id: y, className: E.message, "aria-live": "polite", children: m })
   ] });
-  return c ? /* @__PURE__ */ n(
+  return a ? /* @__PURE__ */ n(
     "fieldset",
     {
       ref: d,
@@ -413,7 +413,7 @@ function ar({ size: e = 20, ...t }) {
     /* @__PURE__ */ n("circle", { cx: "19", cy: "12", r: "1.5", fill: "currentColor", stroke: "none" })
   ] });
 }
-const Lt = "_dialog_h5f0e_2", St = "_center_h5f0e_32", jt = "_inlineStart_h5f0e_40", zt = "_inlineEnd_h5f0e_41", Tt = "_w400_h5f0e_90", It = "_w560_h5f0e_91", Et = "_w720_h5f0e_92", Mt = "_panel_h5f0e_94", At = "_header_h5f0e_114", Pt = "_title_h5f0e_121", Wt = "_footer_h5f0e_127", L = {
+const Lt = "_dialog_h5f0e_2", St = "_center_h5f0e_32", jt = "_inlineStart_h5f0e_40", zt = "_inlineEnd_h5f0e_41", Tt = "_w400_h5f0e_90", It = "_w560_h5f0e_91", Et = "_w720_h5f0e_92", Mt = "_panel_h5f0e_94", Pt = "_header_h5f0e_114", At = "_title_h5f0e_121", Wt = "_footer_h5f0e_127", L = {
   dialog: Lt,
   center: St,
   inlineStart: jt,
@@ -422,8 +422,8 @@ const Lt = "_dialog_h5f0e_2", St = "_center_h5f0e_32", jt = "_inlineStart_h5f0e_
   w560: It,
   w720: Et,
   panel: Mt,
-  header: At,
-  title: Pt,
+  header: Pt,
+  title: At,
   footer: Wt
 }, Dt = {
   400: L.w400,
@@ -439,10 +439,10 @@ function cr({
   onClose: t,
   title: i,
   footer: s,
-  width: c = 560,
+  width: a = 560,
   placement: r = "center",
   dismissible: o = !0,
-  className: a,
+  className: c,
   children: d,
   ref: l,
   ...u
@@ -464,7 +464,7 @@ function cr({
     b.preventDefault(), o && t("esc");
   }, z = (b) => {
     o && b.target === h.current && t("backdrop");
-  }, C = [L.dialog, Dt[c], Rt[r], a].filter(Boolean).join(" ");
+  }, C = [L.dialog, Dt[a], Rt[r], c].filter(Boolean).join(" ");
   return /* @__PURE__ */ n(
     "dialog",
     {
@@ -495,7 +495,7 @@ function cr({
     }
   );
 }
-const Ht = "_input_hpei8_3", qt = "_size24_hpei8_37", Vt = "_size32_hpei8_43", Ft = "_size40_hpei8_49", Kt = "_size48_hpei8_55", Ot = "_error_hpei8_63", P = {
+const Ht = "_input_hpei8_3", qt = "_size24_hpei8_37", Vt = "_size32_hpei8_43", Ft = "_size40_hpei8_49", Kt = "_size48_hpei8_55", Ot = "_error_hpei8_63", A = {
   input: Ht,
   size24: qt,
   size32: Vt,
@@ -503,17 +503,17 @@ const Ht = "_input_hpei8_3", qt = "_size24_hpei8_37", Vt = "_size32_hpei8_43", F
   size48: Kt,
   error: Ot
 }, Ut = {
-  24: P.size24,
-  32: P.size32,
-  40: P.size40,
-  48: P.size48
+  24: A.size24,
+  32: A.size32,
+  40: A.size40,
+  48: A.size48
 };
-function lr({ size: e = 32, error: t = !1, type: i = "text", className: s, ref: c, ...r }) {
-  const o = S(re), a = t || ((o == null ? void 0 : o.invalid) ?? !1), d = [o == null ? void 0 : o.describedBy, r["aria-describedby"]].filter(Boolean).join(" ") || void 0, l = [P.input, Ut[e], a && P.error, s].filter(Boolean).join(" ");
+function lr({ size: e = 32, error: t = !1, type: i = "text", className: s, ref: a, ...r }) {
+  const o = S(re), c = t || ((o == null ? void 0 : o.invalid) ?? !1), d = [o == null ? void 0 : o.describedBy, r["aria-describedby"]].filter(Boolean).join(" ") || void 0, l = [A.input, Ut[e], c && A.error, s].filter(Boolean).join(" ");
   return /* @__PURE__ */ n(
     "input",
     {
-      ref: c,
+      ref: a,
       className: l,
       id: r.id ?? (o == null ? void 0 : o.id),
       required: r.required ?? ((o == null ? void 0 : o.required) || void 0),
@@ -542,13 +542,13 @@ function dr({
   error: t = !1,
   className: i,
   ref: s,
-  children: c,
+  children: a,
   ...r
 }) {
-  const o = S(re), a = t || ((o == null ? void 0 : o.invalid) ?? !1), d = [o == null ? void 0 : o.describedBy, r["aria-describedby"]].filter(Boolean).join(" ") || void 0, l = [
+  const o = S(re), c = t || ((o == null ? void 0 : o.invalid) ?? !1), d = [o == null ? void 0 : o.describedBy, r["aria-describedby"]].filter(Boolean).join(" ") || void 0, l = [
     W.select,
     en[e],
-    a && W.error,
+    c && W.error,
     i
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ n(
@@ -561,7 +561,7 @@ function dr({
       "aria-invalid": (o == null ? void 0 : o.invalid) || void 0,
       ...r,
       "aria-describedby": d,
-      children: c
+      children: a
     }
   );
 }
@@ -577,7 +577,7 @@ function pe({
   className: t,
   disabled: i,
   ref: s,
-  ...c
+  ...a
 }) {
   const r = [K.label, i && K.disabled, t].filter(Boolean).join(" ");
   return /* @__PURE__ */ f("label", { className: r, children: [
@@ -588,7 +588,7 @@ function pe({
         type: "checkbox",
         className: K.input,
         disabled: i,
-        ...c
+        ...a
       }
     ),
     /* @__PURE__ */ n("span", { className: K.indicator, "aria-hidden": "true" }),
@@ -608,7 +608,7 @@ function ur({
   className: t,
   disabled: i,
   ref: s,
-  ...c
+  ...a
 }) {
   const r = [M.label, i && M.disabled, t].filter(Boolean).join(" ");
   return /* @__PURE__ */ f("label", { className: r, children: [
@@ -620,7 +620,7 @@ function ur({
         role: "switch",
         className: M.input,
         disabled: i,
-        ...c
+        ...a
       }
     ),
     /* @__PURE__ */ n("span", { className: M.track, "aria-hidden": "true", children: /* @__PURE__ */ n("span", { className: M.thumb }) }),
@@ -658,13 +658,13 @@ function hr({
   subtle: t = !1,
   onDismiss: i,
   className: s,
-  children: c,
+  children: a,
   ref: r,
   ...o
 }) {
-  const a = t ? $n : Bn, d = [B.tag, a[e], s].filter(Boolean).join(" ");
+  const c = t ? $n : Bn, d = [B.tag, c[e], s].filter(Boolean).join(" ");
   return /* @__PURE__ */ f("span", { ref: r, className: d, ...o, children: [
-    c,
+    a,
     i && /* @__PURE__ */ n(
       "button",
       {
@@ -712,10 +712,10 @@ function _r({
   children: t,
   placement: i = "top"
 }) {
-  const [s, c] = _e(!1), r = H(), o = k(void 0), a = g(() => {
+  const [s, a] = _e(!1), r = H(), o = k(void 0), c = g(() => {
     o.current !== void 0 && (window.clearTimeout(o.current), o.current = void 0);
-  }, []), d = g(() => c(!0), []), l = g(() => c(!1), []);
-  N(() => a, [a]), N(() => {
+  }, []), d = g(() => a(!0), []), l = g(() => a(!1), []);
+  N(() => c, [c]), N(() => {
     if (!s) return;
     const h = (_) => {
       _.key === "Escape" && l();
@@ -725,12 +725,12 @@ function _r({
   const u = ne(t, {
     "aria-describedby": s ? r : void 0,
     onMouseEnter: (h) => {
-      a(), o.current = window.setTimeout(d, En);
+      c(), o.current = window.setTimeout(d, En);
       const _ = t.props.onMouseEnter;
       _ == null || _(h);
     },
     onMouseLeave: (h) => {
-      a(), l();
+      c(), l();
       const _ = t.props.onMouseLeave;
       _ == null || _(h);
     },
@@ -740,7 +740,7 @@ function _r({
       _ == null || _(h);
     },
     onBlur: (h) => {
-      a(), l();
+      c(), l();
       const _ = t.props.onBlur;
       _ == null || _(h);
     }
@@ -758,15 +758,15 @@ function _r({
     )
   ] });
 }
-const Mn = "_toolbar_1i848_1", An = "_gap8_1i848_7", Pn = "_gap12_1i848_8", Wn = "_gap16_1i848_9", G = {
+const Mn = "_toolbar_1i848_1", Pn = "_gap8_1i848_7", An = "_gap12_1i848_8", Wn = "_gap16_1i848_9", G = {
   toolbar: Mn,
-  gap8: An,
-  gap12: Pn,
+  gap8: Pn,
+  gap12: An,
   gap16: Wn
 }, Dn = { 8: G.gap8, 12: G.gap12, 16: G.gap16 };
-function fr({ gap: e = 8, className: t, children: i, ref: s, ...c }) {
+function fr({ gap: e = 8, className: t, children: i, ref: s, ...a }) {
   const r = [G.toolbar, Dn[e], t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("div", { ref: s, role: c["aria-label"] != null ? "group" : void 0, className: r, ...c, children: i });
+  return /* @__PURE__ */ n("div", { ref: s, role: a["aria-label"] != null ? "group" : void 0, className: r, ...a, children: i });
 }
 const Rn = "_trigger_vpa0u_4", Hn = "_menu_vpa0u_16", qn = "_item_vpa0u_37", Vn = "_separator_vpa0u_74", Q = {
   trigger: Rn,
@@ -775,12 +775,12 @@ const Rn = "_trigger_vpa0u_4", Hn = "_menu_vpa0u_16", qn = "_item_vpa0u_37", Vn
   separator: Vn
 }, Fn = 500;
 function Kn({ popoverRef: e, triggerRef: t, open: i, onEsc: s }) {
-  const c = k(""), r = k(0), o = g(() => {
+  const a = k(""), r = k(0), o = g(() => {
     const l = e.current;
     return l ? Array.from(
       l.querySelectorAll('[data-psi-menu-item]:not([aria-disabled="true"])')
     ) : [];
-  }, [e]), a = g(
+  }, [e]), c = g(
     (l) => {
       if (l) {
         for (const u of o()) u.tabIndex = u === l ? 0 : -1;
@@ -796,11 +796,11 @@ function Kn({ popoverRef: e, triggerRef: t, open: i, onEsc: s }) {
   return N(() => {
     if (!i) return;
     const l = o();
-    return a(l[0]), () => {
+    return c(l[0]), () => {
       var u;
       (u = e.current) != null && u.contains(document.activeElement) && d();
     };
-  }, [i, e, o, a, d]), g(
+  }, [i, e, o, c, d]), g(
     (l) => {
       if (l.key === "Escape") {
         l.preventDefault(), s();
@@ -811,46 +811,46 @@ function Kn({ popoverRef: e, triggerRef: t, open: i, onEsc: s }) {
       const h = u.indexOf(document.activeElement);
       switch (l.key) {
         case "ArrowDown":
-          l.preventDefault(), a(u[(h + 1 + u.length) % u.length]);
+          l.preventDefault(), c(u[(h + 1 + u.length) % u.length]);
           return;
         case "ArrowUp":
-          l.preventDefault(), a(u[h <= 0 ? u.length - 1 : h - 1]);
+          l.preventDefault(), c(u[h <= 0 ? u.length - 1 : h - 1]);
           return;
         case "Home":
-          l.preventDefault(), a(u[0]);
+          l.preventDefault(), c(u[0]);
           return;
         case "End":
-          l.preventDefault(), a(u[u.length - 1]);
+          l.preventDefault(), c(u[u.length - 1]);
           return;
       }
       if (l.key.length !== 1 || l.metaKey || l.ctrlKey || l.altKey) return;
       const _ = Date.now();
-      c.current = _ - r.current > Fn ? l.key.toLowerCase() : c.current + l.key.toLowerCase(), r.current = _;
+      a.current = _ - r.current > Fn ? l.key.toLowerCase() : a.current + l.key.toLowerCase(), r.current = _;
       const m = u.find(
-        (y) => (y.textContent ?? "").trim().toLowerCase().startsWith(c.current)
+        (y) => (y.textContent ?? "").trim().toLowerCase().startsWith(a.current)
       );
-      m && (l.preventDefault(), a(m));
+      m && (l.preventDefault(), c(m));
     },
-    [o, a, s]
+    [o, c, s]
   );
 }
 function On() {
   return typeof CSS < "u" && CSS.supports("anchor-name", "--x");
 }
-function Un({ popoverRef: e, triggerRef: t, open: i, placement: s, anchorName: c }) {
+function Un({ popoverRef: e, triggerRef: t, open: i, placement: s, anchorName: a }) {
   N(() => {
     const r = t.current, o = e.current;
-    !r || !o || (r.style.setProperty("anchor-name", c), o.style.setProperty("position-anchor", c));
-  }, [e, t, c]), N(() => {
+    !r || !o || (r.style.setProperty("anchor-name", a), o.style.setProperty("position-anchor", a));
+  }, [e, t, a]), N(() => {
     if (!i || On()) return;
     const r = t.current, o = e.current;
     if (!r || !o) return;
-    const a = () => {
+    const c = () => {
       const d = r.getBoundingClientRect(), l = s.startsWith("bottom"), u = s.endsWith("end"), h = getComputedStyle(r).direction === "rtl", _ = u !== h;
       o.style.position = "fixed", o.style.top = l ? `${d.bottom}px` : "", o.style.bottom = l ? "" : `${window.innerHeight - d.top}px`, o.style.left = _ ? "" : `${d.left}px`, o.style.right = _ ? `${window.innerWidth - d.right}px` : "";
     };
-    return a(), window.addEventListener("scroll", a, !0), window.addEventListener("resize", a), () => {
-      window.removeEventListener("scroll", a, !0), window.removeEventListener("resize", a);
+    return c(), window.addEventListener("scroll", c, !0), window.addEventListener("resize", c), () => {
+      window.removeEventListener("scroll", c, !0), window.removeEventListener("resize", c);
     };
   }, [i, s, e, t]);
 }
@@ -864,10 +864,10 @@ function pr({
   onClose: t,
   trigger: i,
   placement: s = "bottom-start",
-  children: c,
+  children: a,
   className: r,
   ref: o,
-  ...a
+  ...c
 }) {
   const d = k(null), l = k(null), u = k(!1), h = `--psi-menu-${H().replace(/:/g, "")}`;
   Un({ popoverRef: d, triggerRef: l, open: e, placement: s, anchorName: h });
@@ -911,7 +911,7 @@ function pr({
     /* @__PURE__ */ n(
       "div",
       {
-        ...a,
+        ...c,
         ref: _,
         popover: "auto",
         role: "menu",
@@ -920,13 +920,13 @@ function pr({
         className: [Q.menu, r].filter(Boolean).join(" "),
         onToggle: m,
         onKeyDown: y,
-        children: /* @__PURE__ */ n(ve.Provider, { value: { close: z }, children: c })
+        children: /* @__PURE__ */ n(ve.Provider, { value: { close: z }, children: a })
       }
     )
   ] });
 }
 function vr({ children: e, onSelect: t, variant: i = "neutral", disabled: s = !1 }) {
-  const { close: c } = S(ve);
+  const { close: a } = S(ve);
   return /* @__PURE__ */ n(
     "button",
     {
@@ -938,7 +938,7 @@ function vr({ children: e, onSelect: t, variant: i = "neutral", disabled: s = !1
       tabIndex: -1,
       className: Q.item,
       onClick: () => {
-        s || (t(), c("item-select"));
+        s || (t(), a("item-select"));
       },
       children: e
     }
@@ -970,24 +970,24 @@ function oo({ children: e, className: t }) {
 function ro(e) {
   const t = [];
   let i = !1, s = !1;
-  const c = (r) => {
-    A.forEach(r, function o(a) {
-      if (!U(a)) return;
-      if (a.type === ce) {
-        A.forEach(a.props.children, o);
+  const a = (r) => {
+    P.forEach(r, function o(c) {
+      if (!U(c)) return;
+      if (c.type === ce) {
+        P.forEach(c.props.children, o);
         return;
       }
-      const d = a.props.rowId;
+      const d = c.props.rowId;
       typeof d == "string" ? t.push(d) : s = !0;
     });
   };
-  return A.forEach(e, function r(o) {
+  return P.forEach(e, function r(o) {
     if (U(o)) {
       if (o.type === ce) {
-        A.forEach(o.props.children, r);
+        P.forEach(o.props.children, r);
         return;
       }
-      o.type === oo && (i = !0, c(o.props.children));
+      o.type === oo && (i = !0, a(o.props.children));
     }
   }), { ids: t, sawBody: i, hasRowWithoutId: s };
 }
@@ -996,39 +996,39 @@ function gr({
   stickyHeader: t,
   sortable: i = !1,
   sort: s = null,
-  onSortChange: c,
+  onSortChange: a,
   selectable: r = !1,
   selected: o = be,
-  onSelectionChange: a,
+  onSelectionChange: c,
   children: d,
   className: l,
   ref: u
 }) {
   const h = [x.table, t && x.sticky, l].filter(Boolean).join(" "), { ids: _, sawBody: m, hasRowWithoutId: y } = oe(() => ro(d), [d]);
-  return process.env.NODE_ENV !== "production" && (i && !c && console.warn("Psi Table: `sortable` is set without `onSortChange`; sorting will not respond."), r && !a && console.warn("Psi Table: `selectable` is set without `onSelectionChange`; selection will not respond."), r && !m && console.warn("Psi Table: `selectable` is set but no `TableBody` is visible to `Table`. Wrapping `TableBody` in a component other than a Fragment hides its rows, and select-all will clear the selection instead of filling it."), r && y && console.warn("Psi Table: `selectable` is set but a row in `TableBody` has no `rowId`. That row will render without a selection checkbox and select-all will not include it.")), /* @__PURE__ */ n(q.Provider, { value: { size: e, sortable: i, sort: s, onSortChange: c, selectable: r, selected: o, onSelectionChange: a }, children: /* @__PURE__ */ n(ge.Provider, { value: _, children: /* @__PURE__ */ n("table", { ref: u, className: h, "data-size": e, children: d }) }) });
+  return process.env.NODE_ENV !== "production" && (i && !a && console.warn("Psi Table: `sortable` is set without `onSortChange`; sorting will not respond."), r && !c && console.warn("Psi Table: `selectable` is set without `onSelectionChange`; selection will not respond."), r && !m && console.warn("Psi Table: `selectable` is set but no `TableBody` is visible to `Table`. Wrapping `TableBody` in a component other than a Fragment hides its rows, and select-all will clear the selection instead of filling it."), r && y && console.warn("Psi Table: `selectable` is set but a row in `TableBody` has no `rowId`. That row will render without a selection checkbox and select-all will not include it.")), /* @__PURE__ */ n(q.Provider, { value: { size: e, sortable: i, sort: s, onSortChange: a, selectable: r, selected: o, onSelectionChange: c }, children: /* @__PURE__ */ n(ge.Provider, { value: _, children: /* @__PURE__ */ n("table", { ref: u, className: h, "data-size": e, children: d }) }) });
 }
 function io({ rowId: e, label: t }) {
-  const { selected: i, onSelectionChange: s } = S(q), c = () => {
+  const { selected: i, onSelectionChange: s } = S(q), a = () => {
     const r = new Set(i);
     r.has(e) ? r.delete(e) : r.add(e), s == null || s(r);
   };
-  return /* @__PURE__ */ n("td", { className: `${x.cell} ${x.selectCell}`, children: /* @__PURE__ */ n(pe, { "aria-label": t, checked: i.has(e), onChange: c }) });
+  return /* @__PURE__ */ n("td", { className: `${x.cell} ${x.selectCell}`, children: /* @__PURE__ */ n(pe, { "aria-label": t, checked: i.has(e), onChange: a }) });
 }
 function so() {
-  const { selected: e, onSelectionChange: t } = S(q), i = S(ge), s = k(null), c = i.length > 0 && i.every((a) => e.has(a)), r = i.some((a) => e.has(a));
+  const { selected: e, onSelectionChange: t } = S(q), i = S(ge), s = k(null), a = i.length > 0 && i.every((c) => e.has(c)), r = i.some((c) => e.has(c));
   N(() => {
-    s.current && (s.current.indeterminate = r && !c);
-  }, [r, c]);
+    s.current && (s.current.indeterminate = r && !a);
+  }, [r, a]);
   const o = () => {
-    const a = new Set(e);
-    c ? i.forEach((d) => a.delete(d)) : i.forEach((d) => a.add(d)), t == null || t(a);
+    const c = new Set(e);
+    a ? i.forEach((d) => c.delete(d)) : i.forEach((d) => c.add(d)), t == null || t(c);
   };
-  return /* @__PURE__ */ n("th", { scope: "col", className: `${x.headerCell} ${x.selectCell}`, children: /* @__PURE__ */ n(pe, { ref: s, "aria-label": "Select all rows", checked: c, onChange: o }) });
+  return /* @__PURE__ */ n("th", { scope: "col", className: `${x.headerCell} ${x.selectCell}`, children: /* @__PURE__ */ n(pe, { ref: s, "aria-label": "Select all rows", checked: a, onChange: o }) });
 }
 function mr({ children: e, className: t }) {
   const { selectable: i } = S(q);
   let s = !1;
-  const c = i ? A.map(e, (r) => {
+  const a = i ? P.map(e, (r) => {
     if (s || !U(r)) return r;
     s = !0;
     const o = r;
@@ -1041,10 +1041,10 @@ function mr({ children: e, className: t }) {
       ] })
     );
   }) : e;
-  return /* @__PURE__ */ n("thead", { className: [x.head, t].filter(Boolean).join(" "), children: c });
+  return /* @__PURE__ */ n("thead", { className: [x.head, t].filter(Boolean).join(" "), children: a });
 }
 function yr({ rowId: e, selectLabel: t, children: i, className: s }) {
-  const { selectable: c, selected: r } = S(q), o = e !== void 0 && r.has(e);
+  const { selectable: a, selected: r } = S(q), o = e !== void 0 && r.has(e);
   return /* @__PURE__ */ f(
     "tr",
     {
@@ -1052,14 +1052,14 @@ function yr({ rowId: e, selectLabel: t, children: i, className: s }) {
       "data-row-id": e,
       "data-selected": o || void 0,
       children: [
-        c && e !== void 0 && /* @__PURE__ */ n(io, { rowId: e, label: t ?? `Select row ${e}` }),
+        a && e !== void 0 && /* @__PURE__ */ n(io, { rowId: e, label: t ?? `Select row ${e}` }),
         i
       ]
     }
   );
 }
 function wr({ sortKey: e, numeric: t, children: i, className: s }) {
-  const { sortable: c, sort: r, onSortChange: o } = S(q), a = c && e !== void 0, d = a && (r == null ? void 0 : r.key) === e, l = a ? d ? r.direction === "asc" ? "ascending" : "descending" : "none" : void 0, u = () => {
+  const { sortable: a, sort: r, onSortChange: o } = S(q), c = a && e !== void 0, d = c && (r == null ? void 0 : r.key) === e, l = c ? d ? r.direction === "asc" ? "ascending" : "descending" : "none" : void 0, u = () => {
     if (!e) return;
     const h = d && r.direction === "asc" ? "desc" : "asc";
     o == null || o({ key: e, direction: h });
@@ -1071,7 +1071,7 @@ function wr({ sortKey: e, numeric: t, children: i, className: s }) {
       className: [x.headerCell, s].filter(Boolean).join(" "),
       "data-numeric": t || void 0,
       "aria-sort": l,
-      children: a ? /* @__PURE__ */ f("button", { type: "button", className: x.sortButton, onClick: u, children: [
+      children: c ? /* @__PURE__ */ f("button", { type: "button", className: x.sortButton, onClick: u, children: [
         i,
         /* @__PURE__ */ n("span", { className: x.sortIndicator, "aria-hidden": "true", children: d ? r.direction === "asc" ? "↑" : "↓" : "" })
       ] }) : i
@@ -1089,52 +1089,56 @@ function O(e, t) {
   return Array.from({ length: t - e + 1 }, (i, s) => e + s);
 }
 function lo(e, t, i) {
-  const s = Math.max(0, i), c = s * 2 + 1, r = c + 4;
+  const s = Math.max(0, i), a = s * 2 + 1, r = a + 4;
   if (t <= r)
     return O(1, t);
-  const o = Math.max(e - s, 1), a = Math.min(e + s, t), d = o > 3, l = a < t - 2;
+  const o = Math.max(e - s, 1), c = Math.min(e + s, t), d = o > 3, l = c < t - 2;
   if (!d && l) {
-    const u = Math.max(a, c);
+    const u = Math.max(c, a);
     return [...O(1, u), "ellipsis", t];
   }
   if (d && !l) {
-    const u = Math.min(o, t - c + 1);
+    const u = Math.min(o, t - a + 1);
     return [1, "ellipsis", ...O(u, t)];
   }
-  return d && l ? [1, "ellipsis", ...O(o, a), "ellipsis", t] : O(1, t);
+  return d && l ? [1, "ellipsis", ...O(o, c), "ellipsis", t] : O(1, t);
 }
 function xr({
   page: e,
   pageCount: t,
   onPageChange: i,
   siblingCount: s = 1,
-  "aria-label": c = "Pagination",
+  "aria-label": a = "Pagination",
   className: r
 }) {
-  const o = lo(e, t, s);
-  return /* @__PURE__ */ f("nav", { "aria-label": c, className: [ue.nav, r].filter(Boolean).join(" "), children: [
+  const o = t >= 1, c = Number.isFinite(e) ? e : 1, d = o ? Math.min(Math.max(c, 1), t) : 0;
+  process.env.NODE_ENV !== "production" && (!o || e !== d) && console.warn(
+    `Psi Pagination: \`page\` ${e} is out of range for \`pageCount\` ${t}; rendering page ${o ? d : "none"}. Clamp \`page\` when \`pageCount\` shrinks — e.g. after filtering.`
+  );
+  const l = o ? lo(d, t, s) : [];
+  return /* @__PURE__ */ f("nav", { "aria-label": a, className: [ue.nav, r].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ n(
       J,
       {
         "aria-label": "Previous page",
         size: 32,
         variant: "ghost",
-        disabled: e <= 1,
-        onClick: () => i(e - 1),
+        disabled: !o || d <= 1,
+        onClick: () => i(d - 1),
         children: /* @__PURE__ */ n("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", width: "16", height: "16", children: /* @__PURE__ */ n("path", { d: "M10 3 5 8l5 5", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) })
       }
     ),
-    o.map(
-      (a, d) => a === "ellipsis" ? /* @__PURE__ */ n("span", { className: ue.ellipsis, "aria-hidden": "true", children: "…" }, `e${d}`) : /* @__PURE__ */ n(
+    l.map(
+      (u, h) => u === "ellipsis" ? /* @__PURE__ */ n("span", { className: ue.ellipsis, "aria-hidden": "true", children: "…" }, `e${h}`) : /* @__PURE__ */ n(
         He,
         {
           size: 32,
-          variant: a === e ? "accent-subtle" : "ghost",
-          "aria-current": a === e ? "page" : void 0,
-          onClick: () => i(a),
-          children: String(a)
+          variant: u === d ? "accent-subtle" : "ghost",
+          "aria-current": u === d ? "page" : void 0,
+          onClick: () => i(u),
+          children: String(u)
         },
-        a
+        u
       )
     ),
     /* @__PURE__ */ n(
@@ -1143,8 +1147,8 @@ function xr({
         "aria-label": "Next page",
         size: 32,
         variant: "ghost",
-        disabled: e >= t,
-        onClick: () => i(e + 1),
+        disabled: !o || d >= t,
+        onClick: () => i(d + 1),
         children: /* @__PURE__ */ n("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", width: "16", height: "16", children: /* @__PURE__ */ n("path", { d: "m6 3 5 5-5 5", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) })
       }
     )
@@ -1183,14 +1187,14 @@ function me({
   children: t,
   action: i,
   onDismiss: s,
-  className: c,
+  className: a,
   ref: r
 }) {
-  const o = ko[e], a = xo[e], d = [$.toast, c].filter(Boolean).join(" ");
+  const o = ko[e], c = xo[e], d = [$.toast, a].filter(Boolean).join(" ");
   return /* @__PURE__ */ f("div", { ref: r, className: d, "data-variant": e, "data-psi-toast": !0, children: [
     /* @__PURE__ */ n("span", { className: [$.icon, Co[e]].join(" "), children: /* @__PURE__ */ n(o, { size: 20, "aria-hidden": "true" }) }),
     /* @__PURE__ */ f("div", { className: $.body, children: [
-      a && /* @__PURE__ */ n("span", { className: $.srOnly, children: a }),
+      c && /* @__PURE__ */ n("span", { className: $.srOnly, children: c }),
       t
     ] }),
     i != null && /* @__PURE__ */ n("div", { className: $.action, children: i }),
@@ -1217,10 +1221,10 @@ function $o({
   "aria-label": t = "Notifications",
   children: i,
   className: s,
-  ref: c
+  ref: a
 }) {
   const r = k(null), o = (u) => {
-    r.current = u, typeof c == "function" ? c(u) : c && (c.current = u);
+    r.current = u, typeof a == "function" ? a(u) : a && (a.current = u);
   };
   N(() => {
     var h;
@@ -1231,7 +1235,7 @@ function $o({
         (_ = u.hidePopover) == null || _.call(u);
       };
   }, []);
-  const a = A.toArray(i), d = a.filter(he), l = a.filter((u) => !he(u));
+  const c = P.toArray(i), d = c.filter(he), l = c.filter((u) => !he(u));
   return /* @__PURE__ */ f(
     "div",
     {
@@ -1262,15 +1266,15 @@ function Br({
   duration: t = 5e3,
   actionDuration: i = 1e4,
   placement: s = "bottom-end",
-  children: c
+  children: a
 }) {
-  const [r, o] = _e([]), a = k(/* @__PURE__ */ new Map()), d = k(!1), l = k(0), u = H(), h = g((p) => {
-    const v = a.current.get(p);
-    (v == null ? void 0 : v.handle) !== void 0 && clearTimeout(v.handle), a.current.delete(p), o((T) => T.filter((V) => V.id !== p));
+  const [r, o] = _e([]), c = k(/* @__PURE__ */ new Map()), d = k(!1), l = k(0), u = H(), h = g((p) => {
+    const v = c.current.get(p);
+    (v == null ? void 0 : v.handle) !== void 0 && clearTimeout(v.handle), c.current.delete(p), o((T) => T.filter((V) => V.id !== p));
   }, []), _ = g(
     (p, v) => {
       const T = d.current ? { handle: void 0, remaining: v, startedAt: void 0 } : { handle: setTimeout(() => h(p), v), remaining: v, startedAt: Date.now() };
-      a.current.set(p, T);
+      c.current.set(p, T);
     },
     [h]
   ), m = g(
@@ -1279,25 +1283,25 @@ function Br({
       return o((Ce) => {
         const te = [...Ce, { id: V, variant: p, message: v, action: T, duration: se }];
         for (; te.length > e; ) {
-          const ae = te.shift(), Y = a.current.get(ae.id);
-          (Y == null ? void 0 : Y.handle) !== void 0 && clearTimeout(Y.handle), a.current.delete(ae.id);
+          const ae = te.shift(), Y = c.current.get(ae.id);
+          (Y == null ? void 0 : Y.handle) !== void 0 && clearTimeout(Y.handle), c.current.delete(ae.id);
         }
         return te;
       }), _(V, se), V;
     },
     [i, _, t, u, e]
   ), y = g(() => {
-    for (const p of a.current.values())
+    for (const p of c.current.values())
       p.handle !== void 0 && clearTimeout(p.handle);
-    a.current.clear(), o([]);
+    c.current.clear(), o([]);
   }, []), z = g(() => {
     if (!d.current) {
       d.current = !0;
-      for (const [p, v] of a.current) {
+      for (const [p, v] of c.current) {
         if (v.handle === void 0) continue;
         clearTimeout(v.handle);
         const T = v.startedAt === void 0 ? 0 : Date.now() - v.startedAt;
-        a.current.set(p, {
+        c.current.set(p, {
           handle: void 0,
           remaining: Math.max(0, v.remaining - T),
           startedAt: void 0
@@ -1307,8 +1311,8 @@ function Br({
   }, []), C = g(() => {
     if (d.current) {
       d.current = !1;
-      for (const [p, v] of a.current)
-        v.handle === void 0 && a.current.set(p, {
+      for (const [p, v] of c.current)
+        v.handle === void 0 && c.current.set(p, {
           handle: setTimeout(() => h(p), v.remaining),
           remaining: v.remaining,
           startedAt: Date.now()
@@ -1316,7 +1320,7 @@ function Br({
     }
   }, [h]);
   N(() => {
-    const p = a.current;
+    const p = c.current;
     return () => {
       for (const v of p.values())
         v.handle !== void 0 && clearTimeout(v.handle);
@@ -1328,7 +1332,7 @@ function Br({
     [m, h, y]
   );
   return /* @__PURE__ */ f(ye.Provider, { value: b, children: [
-    c,
+    a,
     /* @__PURE__ */ n(
       "div",
       {
@@ -1360,18 +1364,18 @@ function $r({
   onValueChange: t,
   orientation: i = "horizontal",
   children: s,
-  className: c,
+  className: a,
   ref: r
 }) {
-  const o = H(), a = oe(
+  const o = H(), c = oe(
     () => ({ value: e, onValueChange: t, orientation: i, idPrefix: o }),
     [e, t, i, o]
   );
-  return /* @__PURE__ */ n(we.Provider, { value: a, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(we.Provider, { value: c, children: /* @__PURE__ */ n(
     "div",
     {
       ref: r,
-      className: [ee.tabs, c].filter(Boolean).join(" "),
+      className: [ee.tabs, a].filter(Boolean).join(" "),
       "data-orientation": i,
       children: s
     }
@@ -1389,10 +1393,10 @@ function zo({ listRef: e, orientation: t, onValueChange: i }) {
     return r ? Array.from(
       r.querySelectorAll('[data-psi-tab]:not([aria-disabled="true"])')
     ) : [];
-  }, [e]), c = g(
+  }, [e]), a = g(
     (r) => {
       if (!r) return;
-      for (const a of s()) a.tabIndex = a === r ? 0 : -1;
+      for (const c of s()) c.tabIndex = c === r ? 0 : -1;
       r.focus();
       const o = r.dataset.value;
       o != null && i(o);
@@ -1403,48 +1407,48 @@ function zo({ listRef: e, orientation: t, onValueChange: i }) {
     (r) => {
       const o = s();
       if (o.length === 0) return;
-      const [a, d] = t === "vertical" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"], l = o.indexOf(document.activeElement);
+      const [c, d] = t === "vertical" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"], l = o.indexOf(document.activeElement);
       switch (r.key) {
         case d:
-          r.preventDefault(), c(o[(l + 1 + o.length) % o.length]);
+          r.preventDefault(), a(o[(l + 1 + o.length) % o.length]);
           break;
-        case a:
-          r.preventDefault(), c(o[(l - 1 + o.length) % o.length]);
+        case c:
+          r.preventDefault(), a(o[(l - 1 + o.length) % o.length]);
           break;
         case "Home":
-          r.preventDefault(), c(o[0]);
+          r.preventDefault(), a(o[0]);
           break;
         case "End":
-          r.preventDefault(), c(o[o.length - 1]);
+          r.preventDefault(), a(o[o.length - 1]);
           break;
       }
     },
-    [c, s, t]
+    [a, s, t]
   );
 }
 function Nr({ "aria-label": e, children: t, className: i, ref: s }) {
-  const { orientation: c, onValueChange: r } = ie("TabList"), o = k(null), a = (l) => {
+  const { orientation: a, onValueChange: r } = ie("TabList"), o = k(null), c = (l) => {
     o.current = l, typeof s == "function" ? s(l) : s && (s.current = l);
-  }, d = zo({ listRef: o, orientation: c, onValueChange: r });
+  }, d = zo({ listRef: o, orientation: a, onValueChange: r });
   return /* @__PURE__ */ n(
     "div",
     {
-      ref: a,
+      ref: c,
       role: "tablist",
       "aria-label": e,
-      "aria-orientation": c,
+      "aria-orientation": a,
       className: [ee.list, i].filter(Boolean).join(" "),
       onKeyDown: d,
       children: t
     }
   );
 }
-function Lr({ value: e, children: t, disabled: i = !1, className: s, ref: c }) {
+function Lr({ value: e, children: t, disabled: i = !1, className: s, ref: a }) {
   const r = ie("Tab"), o = r.value === e;
   return /* @__PURE__ */ n(
     "button",
     {
-      ref: c,
+      ref: a,
       type: "button",
       role: "tab",
       id: ke(r.idPrefix, e),
@@ -1463,14 +1467,14 @@ function Lr({ value: e, children: t, disabled: i = !1, className: s, ref: c }) {
   );
 }
 function Sr({ value: e, children: t, className: i, ref: s }) {
-  const c = ie("TabPanel"), r = c.value === e;
+  const a = ie("TabPanel"), r = a.value === e;
   return /* @__PURE__ */ n(
     "div",
     {
       ref: s,
       role: "tabpanel",
-      id: xe(c.idPrefix, e),
-      "aria-labelledby": ke(c.idPrefix, e),
+      id: xe(a.idPrefix, e),
+      "aria-labelledby": ke(a.idPrefix, e),
       hidden: !r,
       tabIndex: 0,
       className: [ee.panel, i].filter(Boolean).join(" "),
@@ -1483,8 +1487,8 @@ export {
   He as Button,
   Eo as Card,
   pe as Checkbox,
-  Po as DescriptionItem,
-  Ao as DescriptionList,
+  Ao as DescriptionItem,
+  Po as DescriptionList,
   cr as Dialog,
   Ro as Field,
   Nt as IconAlertCircle,

package/dist/manifest.json

@@ -1034,7 +1034,7 @@
           "type": "((sort: TableSortState) => void)",
           "required": false,
           "default": null,
-          "description": "Called when a header's sort control is activated. Optional in the type\nbecause `sortable` may be false; a discriminated union expressing the real\ncontract does not survive docgen's flat prop extraction, which would strip\nthese props from the manifest entirely (D62)."
+          "description": "Called with the **next** sort state, already toggled — store it as given\nand do not toggle again. A fresh column arrives `\"asc\"`; an active `\"asc\"`\ncolumn emits `\"desc\"`; an active `\"desc\"` column emits `\"asc\"`.\n\nOptional in the type because `sortable` may be false; a discriminated union\nexpressing the real contract does not survive docgen's flat prop\nextraction, which would strip these props from the manifest entirely (D62)."
         },
         {
           "name": "selectable",
@@ -1230,7 +1230,7 @@
           "type": "number",
           "required": true,
           "default": null,
-          "description": "Current page, 1-based."
+          "description": "Current page, 1-based. A value outside `[1, pageCount]` (including\nnon-finite values like `NaN`) is clamped for rendering and logs a\n`console.warn` in development. `pageCount < 1` renders no page buttons."
         },
         {
           "name": "pageCount",

package/dist/patterns.json

@@ -157,6 +157,10 @@
                             "numeric": true
                           },
                           "content": "amount-label"
+                        },
+                        {
+                          "component": "TableHeaderCell",
+                          "content": "actions-label"
                         }
                       ]
                     }
@@ -189,6 +193,10 @@
                             "numeric": true
                           },
                           "content": "amount-cell"
+                        },
+                        {
+                          "component": "TableCell",
+                          "content": "actions-cell"
                         }
                       ]
                     }
@@ -204,13 +212,15 @@
         "date-label": "Date",
         "payee-label": "Payee",
         "amount-label": "Amount",
+        "actions-label": "[a visible \"Actions\" header — the column needs an accessible name, so never an empty th]",
         "date-cell": "[one row per record]",
-        "payee-cell": "[put the row-actions menu in the last cell]",
-        "amount-cell": "[numeric columns align right and use tabular figures]"
+        "payee-cell": "[the record's payee]",
+        "amount-cell": "[numeric columns align right and use tabular figures]",
+        "actions-cell": "[the row-actions menu — compose it from the row-actions pattern]"
       },
       "gaps": [],
       "blocked": false,
-      "preset": "<Table\n  selectable={true}\n  sortable={true}\n>\n  <TableHead>\n    <TableRow>\n      <TableHeaderCell sortKey=\"date\">Date</TableHeaderCell>\n      <TableHeaderCell sortKey=\"payee\">Payee</TableHeaderCell>\n      <TableHeaderCell numeric={true} sortKey=\"amount\">Amount</TableHeaderCell>\n    </TableRow>\n  </TableHead>\n  <TableBody>\n    <TableRow\n      rowId=\"row-id\"\n    >\n      <TableCell>[one row per record]</TableCell>\n      <TableCell>[put the row-actions menu in the last cell]</TableCell>\n      <TableCell numeric={true}>[numeric columns align right and use tabular figures]</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>\n"
+      "preset": "<Table\n  selectable={true}\n  sortable={true}\n>\n  <TableHead>\n    <TableRow>\n      <TableHeaderCell sortKey=\"date\">Date</TableHeaderCell>\n      <TableHeaderCell sortKey=\"payee\">Payee</TableHeaderCell>\n      <TableHeaderCell numeric={true} sortKey=\"amount\">Amount</TableHeaderCell>\n      <TableHeaderCell>[a visible \"Actions\" header — the column needs an accessible name, so never an empty th]</TableHeaderCell>\n    </TableRow>\n  </TableHead>\n  <TableBody>\n    <TableRow\n      rowId=\"row-id\"\n    >\n      <TableCell>[one row per record]</TableCell>\n      <TableCell>[the record's payee]</TableCell>\n      <TableCell numeric={true}>[numeric columns align right and use tabular figures]</TableCell>\n      <TableCell>[the row-actions menu — compose it from the row-actions pattern]</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>\n"
     },
     {
       "id": "date-range-filter",

package/docs/Pagination.md

@@ -7,7 +7,7 @@ Numbered pager with ellipsis truncation (D63). Standalone rather than a Table fa
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
-| `page` | `number` | — | yes | Current page, 1-based. |
+| `page` | `number` | — | yes | Current page, 1-based. A value outside `[1, pageCount]` (including non-finite values like `NaN`) is clamped for rendering and logs a `console.warn` in development. `pageCount < 1` renders no page buttons. |
 | `pageCount` | `number` | — | yes | Total number of pages. |
 | `onPageChange` | `(page: number) => void` | — | yes | Called with the requested page. Required — unlike Table's `onSortChange`/ `onSelectionChange`, which are optional because `sortable`/`selectable` gate whether they're meaningful, `Pagination` has no such gating boolean: the prop is unconditionally meaningful, so a `Pagination` without it is a dead control (final review finding, D62). |
 | `siblingCount` | `number` | 1 | no | Pages shown either side of the current one before truncating. |

package/docs/Table.md

@@ -11,7 +11,7 @@ Data table on native table semantics. Holds no state: sorting, selection and pag
 | `stickyHeader` | `boolean` | — | no | Pins the header while the body scrolls. |
 | `sortable` | `boolean` | false | no | Enables the sort affordance on header cells that declare a `sortKey`. |
 | `sort` | `TableSortState \| null` | — | no | Controlled sort state; `null` when nothing is sorted. |
-| `onSortChange` | `((sort: TableSortState) => void)` | — | no | Called when a header's sort control is activated. Optional in the type because `sortable` may be false; a discriminated union expressing the real contract does not survive docgen's flat prop extraction, which would strip these props from the manifest entirely (D62). |
+| `onSortChange` | `((sort: TableSortState) => void)` | — | no | Called with the **next** sort state, already toggled — store it as given and do not toggle again. A fresh column arrives `"asc"`; an active `"asc"` column emits `"desc"`; an active `"desc"` column emits `"asc"`. Optional in the type because `sortable` may be false; a discriminated union expressing the real contract does not survive docgen's flat prop extraction, which would strip these props from the manifest entirely (D62). |
 | `selectable` | `boolean` | false | no | Renders the row-selection checkbox column. |
 | `selected` | `ReadonlySet<string>` | new Set<string>() | no | Controlled selection, keyed by each `TableRow`'s `rowId`. |
 | `onSelectionChange` | `((selected: ReadonlySet<string>) => void)` | — | no | Called with the next selection. See `onSortChange` on why it is optional. |

package/llms.txt

@@ -45,12 +45,12 @@
 - Full icon set: IconPlus, IconMinus, IconCheck, IconClose, IconChevronDown, IconChevronRight, IconSearch, IconSettings, IconUser, IconEye, IconEyeOff, IconEdit, IconCopy, IconTrash, IconLoader, IconExternalLink, plus D36 additions — arrows IconArrowDown and IconArrowUpRight, and social glyphs IconLinkedIn, IconGitHub, IconX, IconInstagram — plus the D64 status glyphs IconInfo, IconAlertTriangle and IconAlertCircle, and the D70 IconMoreHorizontal — the ellipsis glyph for a row-actions trigger.
 
 ## Table family (6)
-- `<Table>` renders `<table>` and is **controlled-only** — it holds no state (D62). Sorting is `sort={{key, direction}}` + `onSortChange`; selection is `selected` (a `ReadonlySet<string>` keyed by each `<TableRow rowId>`) + `onSelectionChange`. `sortable` and `selectable` only enable the affordances. `size` is `32 | 40 | 48` px (default 40) and `stickyHeader` pins the header. It does no filtering, sorting or slicing of rows — the consumer does that.
+- `<Table>` renders `<table>` and is **controlled-only** — it holds no state (D62). Sorting is `sort={{key, direction}}` + `onSortChange`, which is called with the **next** state, already toggled — store it as given (a fresh column arrives `asc`; an active `asc` emits `desc`); selection is `selected` (a `ReadonlySet<string>` keyed by each `<TableRow rowId>`) + `onSelectionChange`. `sortable` and `selectable` only enable the affordances. `size` is `32 | 40 | 48` px (default 40) and `stickyHeader` pins the header. It does no filtering, sorting or slicing of rows — the consumer does that.
 - `<TableHead>`, `<TableBody>`, `<TableRow>` render `<thead>`, `<tbody>`, `<tr>`. `<TableHeaderCell>` renders `<th scope="col">`, taking `sortKey` to become sortable and putting `aria-sort` on the `<th>`. `<TableCell>` renders `<td>`. Both cells take `numeric`, which right-aligns **and** renders tabular figures.
 - Selecting rows: give each `<TableRow>` a `rowId` and a `selectLabel` — the row checkbox has no visible label, so `selectLabel` is its accessible name. `<TableHead>` grows the select-all checkbox automatically; do not add one. Consult dist/patterns.json for the `data-table` pattern.
 
 ## Pagination
-- `<Pagination page={n} pageCount={total} onPageChange={...}>`: a numbered pager with ellipsis truncation (`‹ 1 … 4 5 6 … 13 ›`), built from Button/IconButton (D63). `siblingCount` (default 1) sets how many pages flank the current one before truncating; `aria-current="page"` marks the active page and the ellipsis is inert.
+- `<Pagination page={n} pageCount={total} onPageChange={...}>`: a numbered pager with ellipsis truncation (`‹ 1 … 4 5 6 … 13 ›`), built from Button/IconButton (D63). `siblingCount` (default 1) sets how many pages flank the current one before truncating; `aria-current="page"` marks the active page and the ellipsis is inert. `page` outside `[1, pageCount]` (including non-finite values) is clamped for rendering and warns in development (D78).
 - It is **standalone, not a Table family member** and has no connection to `Table` — `Table` has no `page` prop. The `table-pagination` pattern composes it as a `Toolbar` sibling of a page-size `Select`; the consumer owns page state and slices the rows.
 
 ## Dialog, and drawers (there is no Drawer component)
@@ -71,10 +71,16 @@
 - **Every panel renders; unselected ones get `hidden`.** So `aria-controls` always resolves and panel DOM state survives a switch. If a panel is expensive, render less *inside* it (`{selected ? <Heavy/> : null}`) rather than omitting the `TabPanel` — omitting it leaves the tab's `aria-controls` pointing at nothing.
 - `TabList` requires `aria-label`. The active panel is itself a tab stop, so a panel with no focusable content is still reachable.
 
+## Menu family (3)
+- `<Menu open onClose={(reason) => …} trigger={<IconButton …/>} placement="bottom-start|bottom-end|top-start|top-end" aria-label="…">`: action menu on the native Popover API — top layer and light dismiss come from the platform, roving keyboard and dismissal reasons from Psi (D53). **Controlled-only** like Dialog: `onClose(reason)` reports `"esc" | "outside" | "item-select"` and the consumer flips `open`. Compose `<MenuItem onSelect>` and `<MenuSeparator>`; the trigger needs an accessible name, so an icon-only trigger is `<IconButton aria-label>`.
+- Many menus, one state: for a row-actions column, hold a single `openMenuId` and render each row's Menu with `open={openMenuId === row.id}`, closing with `onClose={() => setOpenMenuId(null)}`. Do not give each row its own boolean. This is the shape D58 fixed a real dismissal bug in — switching directly between two menus left both closed, because the platform light-dismisses the first before the consumer's click handler runs.
+
 ## Compositions (recipes for what has no component yet)
 
 - Form field: wrap the label, control, and message with `<Field label description error required>{control}</Field>` — label association (htmlFor/id), the description/error message line (swaps to error, aria-live="polite"), and aria-describedby/aria-invalid wiring onto a nested Input/Select are automatic (D49). `group` mode renders fieldset/legend for self-labeled controls (Checkbox/Switch). Standalone Input/Select used outside Field still need `aria-invalid` and `aria-describedby` paired manually. Spacing: `psi-gap-24` between fields, `psi-gap-12` for toggle groups, `psi-gap-8` for button rows and label+Tag rows.
 - Stacks/rows: `.psi-gap-*` utilities set only the gap — they do not create a flex/grid container. Pair them with `display: flex` (column for stacks, row for button groups).
+- Page-level spacing: the form scale above (24/12/8) governs controls inside a form, not page layout. For layout use `psi-gap-32` between sections of a page, `psi-gap-24` between cards or panels in a grid, `psi-py-32` for a section's vertical padding, and `.psi-container` for the page's max-width and gutters (it is in utilities.css, not components.css). Marketing-scale rhythm is app-level and deliberately not tokenized — the system stops at the container.
+- Utility classes: families are `psi-gap-*`, `psi-p-*`/`psi-px-*`/`psi-py-*`, `psi-m-*`/`psi-mx-*`/`psi-my-*` (all on the spacing scale), `psi-text-*` and `psi-display-*` (typography), plus `.psi-tabular`, `.psi-container` and `.psi-media-tint`. Utilities set one property and create no layout context — pair `psi-gap-*` with `display: flex`. Use `psi-m-0` to kill a UA margin rather than an inline style. The exact roster is `@handamade/psi-tokens/guidance.json` → `utilities.classes`.
 - Native pass-through: components spread unlisted props onto their underlying element (Input → `<input>`, Select → `<select>`, Button → `<button>`/`<a>`), so `value`, `onChange`, `type`, `id`, `autoComplete`, `checked` etc. all work even though manifest.json lists only the component-specific props. Exception: Tooltip takes no host props — put handlers/attributes on its trigger child.
 - Theming, programmatic: the standard setup is `data-psi-theme` on `<html>`. From JS, set it once at app init: `document.documentElement.dataset.psiTheme = "dark"` (React: in a root-level effect). Theme CSS does NOT paint the page background — paint `background: var(--psi-bg-primary)` at your app root yourself. For a themed subtree, set `data-psi-theme` on a wrapper and paint its background the same way; brand font combos do not reach nested subtrees (see guidance.fonts.scope).
 - Size selection: 32 is the default (compact UI); 40 for comfortable forms and marketing pages; 24 for inline/table-row actions; 48 for hero CTAs.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handamade/psi-react",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -46,7 +46,7 @@
     "tsx": "^4.22.4",
     "vite": "^6.0.0",
     "vitest": "^3.2.6",
-    "@handamade/psi-tokens": "0.15.0"
+    "@handamade/psi-tokens": "0.16.0"
   },
   "scripts": {
     "build": "vite build && tsc -p tsconfig.build.json && tsx scripts/emit-styles-dts.ts && tsx scripts/emit-manifest.ts && tsx scripts/emit-patterns.ts && tsx scripts/emit-docs.ts",