@entifix/react-controls 0.19.0 → 0.20.1

package/dist/ui/molecules/bulk-result/bulk-result.js

@@ -13,9 +13,9 @@ import { cn } from '../../utils/cn.js';
  * because the user walks away believing the work is done. So both counts are
  * always stated, and every failure is named with its own reason.
  *
- * `role="status"`, not `role="alert"`: a partial failure is an outcome to read,
- * not an interruption, and `alert` on a list this long is hostile. The region
- * is `tabIndex={-1}` so the caller can move focus to it once the run ends,
+ * `role="alert"` when anything failed, `role="status"` when nothing did
+ * (ADR 0028): rows the user believes were written and were not are news that
+ * cannot wait its turn. The region is `tabIndex={-1}` so the caller can move focus to it once the run ends,
  * which is the only reliable way a keyboard user learns the result arrived.
  */ export function BulkResult({ outcomes, labelFor, onRetryFailed, onDismiss, busy = false, className }) {
     const t = useT();
@@ -23,7 +23,7 @@ import { cn } from '../../utils/cn.js';
     const failed = outcomes.filter((outcome)=>!outcome.ok);
     const succeeded = succeededCount(outcomes);
     return /*#__PURE__*/ _jsxs("div", {
-        role: "status",
+        role: failed.length > 0 ? 'alert' : 'status',
         tabIndex: -1,
         "aria-label": t('bulk.resultLabel'),
         "data-testid": "bulk-result",

package/dist/ui/molecules/bulk-result/bulk-result.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/molecules/bulk-result/bulk-result.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type BulkOutcome,\n  type EntityId,\n  failedIds,\n  succeededCount,\n} from '@entifix/core';\n\nimport { useT, useTranslateKey } from '../../../i18n/index.js';\nimport { Button } from '../../atoms/button/index.js';\nimport { cn } from '../../utils/cn.js';\n\nexport interface BulkResultProps {\n  outcomes: readonly BulkOutcome[];\n  /**\n   * How a failed row is named to the user. An id is not an answer to \"which\n   * ones failed\" — the caller holds the rows and can render the same label the\n   * table shows. Falls back to the id when the row is no longer on the page.\n   */\n  labelFor?: (id: EntityId) => string | undefined;\n  /** Re-runs the failures **only**. Absent hides the affordance. */\n  onRetryFailed?: (ids: EntityId[]) => void;\n  onDismiss: () => void;\n  busy?: boolean;\n  className?: string;\n}\n\n/**\n * What a bulk action actually did, per row.\n *\n * The requirement this exists for: 40 selected, 3 fail. A single notice lies\n * whichever way it is written — as a failure it hides the 37 rows that were\n * written, and as a success it hides the 3 that were not, which is worse\n * because the user walks away believing the work is done. So both counts are\n * always stated, and every failure is named with its own reason.\n *\n * `role=\"status\"`, not `role=\"alert\"`: a partial failure is an outcome to read,\n * not an interruption, and `alert` on a list this long is hostile. The region\n * is `tabIndex={-1}` so the caller can move focus to it once the run ends,\n * which is the only reliable way a keyboard user learns the result arrived.\n */\nexport function BulkResult({\n  outcomes,\n  labelFor,\n  onRetryFailed,\n  onDismiss,\n  busy = false,\n  className,\n}: BulkResultProps) {\n  const t = useT();\n  const translateKey = useTranslateKey();\n\n  const failed = outcomes.filter(outcome => !outcome.ok);\n  const succeeded = succeededCount(outcomes);\n\n  return (\n    <div\n      role=\"status\"\n      tabIndex={-1}\n      aria-label={t('bulk.resultLabel')}\n      data-testid=\"bulk-result\"\n      className={cn(\n        'flex flex-col gap-2xs rounded-lg border border-border bg-surface-elevated px-s py-2xs',\n        className,\n      )}\n    >\n      <div className=\"flex flex-wrap items-center gap-2xs\">\n        <span className=\"text-step-sm text-content\">\n          {t('bulk.succeeded', { count: succeeded })}\n        </span>\n        {failed.length > 0 && (\n          <span className=\"text-step-sm text-danger\">\n            {t('bulk.failed', { count: failed.length })}\n          </span>\n        )}\n        {failed.length > 0 && onRetryFailed && (\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"sm\"\n            disabled={busy}\n            onClick={() => onRetryFailed(failedIds(outcomes))}\n          >\n            {t('bulk.retryFailed')}\n          </Button>\n        )}\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          disabled={busy}\n          onClick={onDismiss}\n        >\n          {t('bulk.dismiss')}\n        </Button>\n      </div>\n\n      {failed.length > 0 && (\n        <ul className=\"flex flex-col gap-3xs\">\n          {failed.map(outcome => (\n            <li\n              key={String(outcome.id)}\n              className=\"text-step-sm text-content-muted\"\n            >\n              <span className=\"text-content\">\n                {labelFor?.(outcome.id) ?? String(outcome.id)}\n              </span>\n              {' — '}\n              {/* The reason is a *code*, resolved through the shared `errors`\n                  catalog — the same vocabulary a service's `{ error, code }`\n                  body is rendered from, so a new failure reason is\n                  translatable rather than English, and a host's catalog\n                  check fails the build on one the catalog lacks. `unexpected` is the\n                  browser-side fallback the catalog already carries. */}\n              {translateKey(`errors:${outcome.code ?? 'unexpected'}`)}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"names":["failedIds","succeededCount","useT","useTranslateKey","Button","cn","BulkResult","outcomes","labelFor","onRetryFailed","onDismiss","busy","className","t","translateKey","failed","filter","outcome","ok","succeeded","div","role","tabIndex","aria-label","data-testid","span","count","length","type","variant","size","disabled","onClick","ul","map","li","id","String","code"],"mappings":"AAAA;;AAEA,SAGEA,SAAS,EACTC,cAAc,QACT,gBAAgB;AAEvB,SAASC,IAAI,EAAEC,eAAe,QAAQ,yBAAyB;AAC/D,SAASC,MAAM,QAAQ,8BAA8B;AACrD,SAASC,EAAE,QAAQ,oBAAoB;AAiBvC;;;;;;;;;;;;;CAaC,GACD,OAAO,SAASC,WAAW,EACzBC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,OAAO,KAAK,EACZC,SAAS,EACO;IAChB,MAAMC,IAAIX;IACV,MAAMY,eAAeX;IAErB,MAAMY,SAASR,SAASS,MAAM,CAACC,CAAAA,UAAW,CAACA,QAAQC,EAAE;IACrD,MAAMC,YAAYlB,eAAeM;IAEjC,qBACE,MAACa;QACCC,MAAK;QACLC,UAAU,CAAC;QACXC,cAAYV,EAAE;QACdW,eAAY;QACZZ,WAAWP,GACT,yFACAO;;0BAGF,MAACQ;gBAAIR,WAAU;;kCACb,KAACa;wBAAKb,WAAU;kCACbC,EAAE,kBAAkB;4BAAEa,OAAOP;wBAAU;;oBAEzCJ,OAAOY,MAAM,GAAG,mBACf,KAACF;wBAAKb,WAAU;kCACbC,EAAE,eAAe;4BAAEa,OAAOX,OAAOY,MAAM;wBAAC;;oBAG5CZ,OAAOY,MAAM,GAAG,KAAKlB,+BACpB,KAACL;wBACCwB,MAAK;wBACLC,SAAQ;wBACRC,MAAK;wBACLC,UAAUpB;wBACVqB,SAAS,IAAMvB,cAAcT,UAAUO;kCAEtCM,EAAE;;kCAGP,KAACT;wBACCwB,MAAK;wBACLC,SAAQ;wBACRC,MAAK;wBACLC,UAAUpB;wBACVqB,SAAStB;kCAERG,EAAE;;;;YAINE,OAAOY,MAAM,GAAG,mBACf,KAACM;gBAAGrB,WAAU;0BACXG,OAAOmB,GAAG,CAACjB,CAAAA;8BAegBA;yCAd1B,MAACkB;wBAECvB,WAAU;;0CAEV,KAACa;gCAAKb,WAAU;kDACbJ,4BAAAA,SAAWS,QAAQmB,EAAE,oBAAKC,OAAOpB,QAAQmB,EAAE;;4BAE7C;4BAOAtB,aAAa,CAAC,OAAO,GAAEG,gBAAAA,QAAQqB,IAAI,YAAZrB,gBAAgB,cAAc;;uBAbjDoB,OAAOpB,QAAQmB,EAAE;;;;;AAoBpC"}
+{"version":3,"sources":["../../../../src/ui/molecules/bulk-result/bulk-result.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type BulkOutcome,\n  type EntityId,\n  failedIds,\n  succeededCount,\n} from '@entifix/core';\n\nimport { useT, useTranslateKey } from '../../../i18n/index.js';\nimport { Button } from '../../atoms/button/index.js';\nimport { cn } from '../../utils/cn.js';\n\nexport interface BulkResultProps {\n  outcomes: readonly BulkOutcome[];\n  /**\n   * How a failed row is named to the user. An id is not an answer to \"which\n   * ones failed\" — the caller holds the rows and can render the same label the\n   * table shows. Falls back to the id when the row is no longer on the page.\n   */\n  labelFor?: (id: EntityId) => string | undefined;\n  /** Re-runs the failures **only**. Absent hides the affordance. */\n  onRetryFailed?: (ids: EntityId[]) => void;\n  onDismiss: () => void;\n  busy?: boolean;\n  className?: string;\n}\n\n/**\n * What a bulk action actually did, per row.\n *\n * The requirement this exists for: 40 selected, 3 fail. A single notice lies\n * whichever way it is written — as a failure it hides the 37 rows that were\n * written, and as a success it hides the 3 that were not, which is worse\n * because the user walks away believing the work is done. So both counts are\n * always stated, and every failure is named with its own reason.\n *\n * `role=\"alert\"` when anything failed, `role=\"status\"` when nothing did\n * (ADR 0028): rows the user believes were written and were not are news that\n * cannot wait its turn. The region is `tabIndex={-1}` so the caller can move focus to it once the run ends,\n * which is the only reliable way a keyboard user learns the result arrived.\n */\nexport function BulkResult({\n  outcomes,\n  labelFor,\n  onRetryFailed,\n  onDismiss,\n  busy = false,\n  className,\n}: BulkResultProps) {\n  const t = useT();\n  const translateKey = useTranslateKey();\n\n  const failed = outcomes.filter(outcome => !outcome.ok);\n  const succeeded = succeededCount(outcomes);\n\n  return (\n    <div\n      role={failed.length > 0 ? 'alert' : 'status'}\n      tabIndex={-1}\n      aria-label={t('bulk.resultLabel')}\n      data-testid=\"bulk-result\"\n      className={cn(\n        'flex flex-col gap-2xs rounded-lg border border-border bg-surface-elevated px-s py-2xs',\n        className,\n      )}\n    >\n      <div className=\"flex flex-wrap items-center gap-2xs\">\n        <span className=\"text-step-sm text-content\">\n          {t('bulk.succeeded', { count: succeeded })}\n        </span>\n        {failed.length > 0 && (\n          <span className=\"text-step-sm text-danger\">\n            {t('bulk.failed', { count: failed.length })}\n          </span>\n        )}\n        {failed.length > 0 && onRetryFailed && (\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"sm\"\n            disabled={busy}\n            onClick={() => onRetryFailed(failedIds(outcomes))}\n          >\n            {t('bulk.retryFailed')}\n          </Button>\n        )}\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          disabled={busy}\n          onClick={onDismiss}\n        >\n          {t('bulk.dismiss')}\n        </Button>\n      </div>\n\n      {failed.length > 0 && (\n        <ul className=\"flex flex-col gap-3xs\">\n          {failed.map(outcome => (\n            <li\n              key={String(outcome.id)}\n              className=\"text-step-sm text-content-muted\"\n            >\n              <span className=\"text-content\">\n                {labelFor?.(outcome.id) ?? String(outcome.id)}\n              </span>\n              {' — '}\n              {/* The reason is a *code*, resolved through the shared `errors`\n                  catalog — the same vocabulary a service's `{ error, code }`\n                  body is rendered from, so a new failure reason is\n                  translatable rather than English, and a host's catalog\n                  check fails the build on one the catalog lacks. `unexpected` is the\n                  browser-side fallback the catalog already carries. */}\n              {translateKey(`errors:${outcome.code ?? 'unexpected'}`)}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"names":["failedIds","succeededCount","useT","useTranslateKey","Button","cn","BulkResult","outcomes","labelFor","onRetryFailed","onDismiss","busy","className","t","translateKey","failed","filter","outcome","ok","succeeded","div","role","length","tabIndex","aria-label","data-testid","span","count","type","variant","size","disabled","onClick","ul","map","li","id","String","code"],"mappings":"AAAA;;AAEA,SAGEA,SAAS,EACTC,cAAc,QACT,gBAAgB;AAEvB,SAASC,IAAI,EAAEC,eAAe,QAAQ,yBAAyB;AAC/D,SAASC,MAAM,QAAQ,8BAA8B;AACrD,SAASC,EAAE,QAAQ,oBAAoB;AAiBvC;;;;;;;;;;;;;CAaC,GACD,OAAO,SAASC,WAAW,EACzBC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,OAAO,KAAK,EACZC,SAAS,EACO;IAChB,MAAMC,IAAIX;IACV,MAAMY,eAAeX;IAErB,MAAMY,SAASR,SAASS,MAAM,CAACC,CAAAA,UAAW,CAACA,QAAQC,EAAE;IACrD,MAAMC,YAAYlB,eAAeM;IAEjC,qBACE,MAACa;QACCC,MAAMN,OAAOO,MAAM,GAAG,IAAI,UAAU;QACpCC,UAAU,CAAC;QACXC,cAAYX,EAAE;QACdY,eAAY;QACZb,WAAWP,GACT,yFACAO;;0BAGF,MAACQ;gBAAIR,WAAU;;kCACb,KAACc;wBAAKd,WAAU;kCACbC,EAAE,kBAAkB;4BAAEc,OAAOR;wBAAU;;oBAEzCJ,OAAOO,MAAM,GAAG,mBACf,KAACI;wBAAKd,WAAU;kCACbC,EAAE,eAAe;4BAAEc,OAAOZ,OAAOO,MAAM;wBAAC;;oBAG5CP,OAAOO,MAAM,GAAG,KAAKb,+BACpB,KAACL;wBACCwB,MAAK;wBACLC,SAAQ;wBACRC,MAAK;wBACLC,UAAUpB;wBACVqB,SAAS,IAAMvB,cAAcT,UAAUO;kCAEtCM,EAAE;;kCAGP,KAACT;wBACCwB,MAAK;wBACLC,SAAQ;wBACRC,MAAK;wBACLC,UAAUpB;wBACVqB,SAAStB;kCAERG,EAAE;;;;YAINE,OAAOO,MAAM,GAAG,mBACf,KAACW;gBAAGrB,WAAU;0BACXG,OAAOmB,GAAG,CAACjB,CAAAA;8BAegBA;yCAd1B,MAACkB;wBAECvB,WAAU;;0CAEV,KAACc;gCAAKd,WAAU;kDACbJ,4BAAAA,SAAWS,QAAQmB,EAAE,oBAAKC,OAAOpB,QAAQmB,EAAE;;4BAE7C;4BAOAtB,aAAa,CAAC,OAAO,GAAEG,gBAAAA,QAAQqB,IAAI,YAAZrB,gBAAgB,cAAc;;uBAbjDoB,OAAOpB,QAAQmB,EAAE;;;;;AAoBpC"}

package/dist/ui/molecules/confirm-dialog/confirm-dialog.d.ts

@@ -1,31 +1,46 @@
 export type ConfirmTone = 'destructive' | 'neutral';
 export interface ConfirmDialogProps {
     open: boolean;
-    /** Already-resolved copy — this control renders text, it does not translate. */
+    /**
+     * Already-resolved copy — this control renders text, it does not translate.
+     * A question naming what is affected and how many: "Delete Acme?",
+     * "Archive 12 invoices?".
+     */
     title: string;
+    /** The consequence, in one or two sentences. */
     message: string;
     /** `destructive` paints the confirm button in the danger tokens. */
     tone?: ConfirmTone;
+    /**
+     * The confirming button. Repeat the verb, with the count when there is more
+     * than one — "Delete 12" — so the reader does not go back to the title to
+     * learn what they are agreeing to. Defaults to "Confirm".
+     */
     confirmLabel?: string;
     cancelLabel?: string;
+    /**
+     * Asks the reader to type this — the record's name, or the count — before
+     * the confirming button enables: for a destruction too large to be one
+     * misplaced click.
+     */
+    typed?: string;
     busy?: boolean;
     onConfirm: () => void;
     onCancel: () => void;
 }
 /**
- * Asks before an irreversible act.
+ * Asks before an irreversible act
+ * ([ADR 0026](../../../../../../../docs/adr/0026-actions-hierarchy-overflow-and-destructive-verbs.md)).
  *
- * It exists because a use-case descriptor may carry
- * `confirm: { tone, messageKey }`, and a surface that renders such a descriptor
- * without asking would fire the act on the first click — `revoke-sessions` ends
- * every session a user holds. The descriptor names the tone and the message key;
- * resolving that key is the caller's job, so this control stays copy-free apart
- * from its own two buttons.
+ * An `alertdialog`, not a `dialog`: it interrupts to ask a question that must
+ * be answered. Its message is wired as the dialog's description, so it is read
+ * with the title on opening, and **Cancel takes the initial focus** — Enter on
+ * a dialog that opened under the reader's hand keeps what they have.
  *
  * The dialog element fills the viewport rather than wrapping a `fixed` child in
  * a `relative` box, for the reason `EntityLinkPicker` records: a zero-sized
  * dialog is invisible to anything that measures it — assistive tech and
  * Playwright alike — even with a painted panel inside.
  */
-export declare function ConfirmDialog({ open, title, message, tone, confirmLabel, cancelLabel, busy, onConfirm, onCancel, }: ConfirmDialogProps): import("react").JSX.Element;
+export declare function ConfirmDialog({ open, title, message, tone, confirmLabel, cancelLabel, typed, busy, onConfirm, onCancel, }: ConfirmDialogProps): import("react").JSX.Element;
 //# sourceMappingURL=confirm-dialog.d.ts.map

package/dist/ui/molecules/confirm-dialog/confirm-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/confirm-dialog/confirm-dialog.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,SAAS,CAAC;AAEpD,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,OAAO,EACP,IAAgB,EAChB,YAAY,EACZ,WAAW,EACX,IAAY,EACZ,SAAS,EACT,QAAQ,GACT,EAAE,kBAAkB,+BAuCpB"}
+{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/confirm-dialog/confirm-dialog.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,SAAS,CAAC;AAEpD,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,OAAO,EACP,IAAgB,EAChB,YAAY,EACZ,WAAW,EACX,KAAK,EACL,IAAY,EACZ,SAAS,EACT,QAAQ,GACT,EAAE,kBAAkB,+BA4DpB"}

package/dist/ui/molecules/confirm-dialog/confirm-dialog.js

@@ -1,26 +1,31 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog, DialogPanel, DialogTitle } from '@headlessui/react';
+import { Dialog, DialogDescription, DialogPanel, DialogTitle } from '@headlessui/react';
+import { useId, useState } from 'react';
 import { useT } from '../../../i18n/index.js';
 import { Button } from '../../atoms/button/index.js';
+import { TextInput } from '../../atoms/field/index.js';
 /**
- * Asks before an irreversible act.
+ * Asks before an irreversible act
+ * ([ADR 0026](../../../../../../../docs/adr/0026-actions-hierarchy-overflow-and-destructive-verbs.md)).
  *
- * It exists because a use-case descriptor may carry
- * `confirm: { tone, messageKey }`, and a surface that renders such a descriptor
- * without asking would fire the act on the first click — `revoke-sessions` ends
- * every session a user holds. The descriptor names the tone and the message key;
- * resolving that key is the caller's job, so this control stays copy-free apart
- * from its own two buttons.
+ * An `alertdialog`, not a `dialog`: it interrupts to ask a question that must
+ * be answered. Its message is wired as the dialog's description, so it is read
+ * with the title on opening, and **Cancel takes the initial focus** — Enter on
+ * a dialog that opened under the reader's hand keeps what they have.
  *
  * The dialog element fills the viewport rather than wrapping a `fixed` child in
  * a `relative` box, for the reason `EntityLinkPicker` records: a zero-sized
  * dialog is invisible to anything that measures it — assistive tech and
  * Playwright alike — even with a painted panel inside.
- */ export function ConfirmDialog({ open, title, message, tone = 'neutral', confirmLabel, cancelLabel, busy = false, onConfirm, onCancel }) {
+ */ export function ConfirmDialog({ open, title, message, tone = 'neutral', confirmLabel, cancelLabel, typed, busy = false, onConfirm, onCancel }) {
     const t = useT();
+    const inputId = useId();
+    const [entered, setEntered] = useState('');
+    const matches = typed === undefined || entered.trim() === typed;
     return /*#__PURE__*/ _jsxs(Dialog, {
         open: open,
+        role: "alertdialog",
         onClose: onCancel,
         className: "inset-0 fixed z-(--z-overlay) flex items-center justify-center overflow-y-auto p-s",
         children: [
@@ -36,16 +41,36 @@ import { Button } from '../../atoms/button/index.js';
                         className: "text-step-1 font-semibold text-content",
                         children: title
                     }),
-                    /*#__PURE__*/ _jsx("p", {
+                    /*#__PURE__*/ _jsx(DialogDescription, {
                         className: "mt-2xs text-step-sm text-content-muted",
                         children: message
                     }),
+                    typed !== undefined && /*#__PURE__*/ _jsxs("div", {
+                        className: "mt-s flex flex-col gap-3xs",
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                htmlFor: inputId,
+                                className: "text-step-sm text-content",
+                                children: t('confirm.typeToConfirm', {
+                                    expected: typed
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(TextInput, {
+                                id: inputId,
+                                autoComplete: "off",
+                                spellCheck: false,
+                                value: entered,
+                                onChange: (event)=>setEntered(event.currentTarget.value)
+                            })
+                        ]
+                    }),
                     /*#__PURE__*/ _jsxs("div", {
                         className: "mt-s flex justify-end gap-xs",
                         children: [
                             /*#__PURE__*/ _jsx(Button, {
                                 type: "button",
                                 variant: "ghost",
+                                "data-autofocus": true,
                                 onClick: onCancel,
                                 disabled: busy,
                                 children: cancelLabel != null ? cancelLabel : t('confirm.cancel')
@@ -54,7 +79,7 @@ import { Button } from '../../atoms/button/index.js';
                                 type: "button",
                                 variant: tone === 'destructive' ? 'destructive' : 'primary',
                                 onClick: onConfirm,
-                                disabled: busy,
+                                disabled: busy || !matches,
                                 children: confirmLabel != null ? confirmLabel : t('confirm.confirm')
                             })
                         ]

package/dist/ui/molecules/confirm-dialog/confirm-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/molecules/confirm-dialog/confirm-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog, DialogPanel, DialogTitle } from '@headlessui/react';\n\nimport { useT } from '../../../i18n/index.js';\nimport { Button } from '../../atoms/button/index.js';\n\nexport type ConfirmTone = 'destructive' | 'neutral';\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  /** Already-resolved copy — this control renders text, it does not translate. */\n  title: string;\n  message: string;\n  /** `destructive` paints the confirm button in the danger tokens. */\n  tone?: ConfirmTone;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  busy?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n}\n\n/**\n * Asks before an irreversible act.\n *\n * It exists because a use-case descriptor may carry\n * `confirm: { tone, messageKey }`, and a surface that renders such a descriptor\n * without asking would fire the act on the first click — `revoke-sessions` ends\n * every session a user holds. The descriptor names the tone and the message key;\n * resolving that key is the caller's job, so this control stays copy-free apart\n * from its own two buttons.\n *\n * The dialog element fills the viewport rather than wrapping a `fixed` child in\n * a `relative` box, for the reason `EntityLinkPicker` records: a zero-sized\n * dialog is invisible to anything that measures it — assistive tech and\n * Playwright alike — even with a painted panel inside.\n */\nexport function ConfirmDialog({\n  open,\n  title,\n  message,\n  tone = 'neutral',\n  confirmLabel,\n  cancelLabel,\n  busy = false,\n  onConfirm,\n  onCancel,\n}: ConfirmDialogProps) {\n  const t = useT();\n\n  return (\n    <Dialog\n      open={open}\n      onClose={onCancel}\n      className=\"inset-0 fixed z-(--z-overlay) flex items-center justify-center overflow-y-auto p-s\"\n    >\n      <div aria-hidden className=\"inset-0 fixed bg-scrim\" />\n      <DialogPanel\n        data-testid=\"confirm-dialog\"\n        className=\"max-w-md relative w-full rounded-lg border border-border bg-surface p-s shadow-overlay\"\n      >\n        <DialogTitle className=\"text-step-1 font-semibold text-content\">\n          {title}\n        </DialogTitle>\n        <p className=\"mt-2xs text-step-sm text-content-muted\">{message}</p>\n        <div className=\"mt-s flex justify-end gap-xs\">\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            onClick={onCancel}\n            disabled={busy}\n          >\n            {cancelLabel ?? t('confirm.cancel')}\n          </Button>\n          <Button\n            type=\"button\"\n            variant={tone === 'destructive' ? 'destructive' : 'primary'}\n            onClick={onConfirm}\n            disabled={busy}\n          >\n            {confirmLabel ?? t('confirm.confirm')}\n          </Button>\n        </div>\n      </DialogPanel>\n    </Dialog>\n  );\n}\n"],"names":["Dialog","DialogPanel","DialogTitle","useT","Button","ConfirmDialog","open","title","message","tone","confirmLabel","cancelLabel","busy","onConfirm","onCancel","t","onClose","className","div","aria-hidden","data-testid","p","type","variant","onClick","disabled"],"mappings":"AAAA;;AAEA,SAASA,MAAM,EAAEC,WAAW,EAAEC,WAAW,QAAQ,oBAAoB;AAErE,SAASC,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,MAAM,QAAQ,8BAA8B;AAkBrD;;;;;;;;;;;;;;CAcC,GACD,OAAO,SAASC,cAAc,EAC5BC,IAAI,EACJC,KAAK,EACLC,OAAO,EACPC,OAAO,SAAS,EAChBC,YAAY,EACZC,WAAW,EACXC,OAAO,KAAK,EACZC,SAAS,EACTC,QAAQ,EACW;IACnB,MAAMC,IAAIZ;IAEV,qBACE,MAACH;QACCM,MAAMA;QACNU,SAASF;QACTG,WAAU;;0BAEV,KAACC;gBAAIC,aAAW;gBAACF,WAAU;;0BAC3B,MAAChB;gBACCmB,eAAY;gBACZH,WAAU;;kCAEV,KAACf;wBAAYe,WAAU;kCACpBV;;kCAEH,KAACc;wBAAEJ,WAAU;kCAA0CT;;kCACvD,MAACU;wBAAID,WAAU;;0CACb,KAACb;gCACCkB,MAAK;gCACLC,SAAQ;gCACRC,SAASV;gCACTW,UAAUb;0CAETD,sBAAAA,cAAeI,EAAE;;0CAEpB,KAACX;gCACCkB,MAAK;gCACLC,SAASd,SAAS,gBAAgB,gBAAgB;gCAClDe,SAASX;gCACTY,UAAUb;0CAETF,uBAAAA,eAAgBK,EAAE;;;;;;;;AAM/B"}
+{"version":3,"sources":["../../../../src/ui/molecules/confirm-dialog/confirm-dialog.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Dialog,\n  DialogDescription,\n  DialogPanel,\n  DialogTitle,\n} from '@headlessui/react';\nimport { useId, useState } from 'react';\n\nimport { useT } from '../../../i18n/index.js';\nimport { Button } from '../../atoms/button/index.js';\nimport { TextInput } from '../../atoms/field/index.js';\n\nexport type ConfirmTone = 'destructive' | 'neutral';\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  /**\n   * Already-resolved copy — this control renders text, it does not translate.\n   * A question naming what is affected and how many: \"Delete Acme?\",\n   * \"Archive 12 invoices?\".\n   */\n  title: string;\n  /** The consequence, in one or two sentences. */\n  message: string;\n  /** `destructive` paints the confirm button in the danger tokens. */\n  tone?: ConfirmTone;\n  /**\n   * The confirming button. Repeat the verb, with the count when there is more\n   * than one — \"Delete 12\" — so the reader does not go back to the title to\n   * learn what they are agreeing to. Defaults to \"Confirm\".\n   */\n  confirmLabel?: string;\n  cancelLabel?: string;\n  /**\n   * Asks the reader to type this — the record's name, or the count — before\n   * the confirming button enables: for a destruction too large to be one\n   * misplaced click.\n   */\n  typed?: string;\n  busy?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n}\n\n/**\n * Asks before an irreversible act\n * ([ADR 0026](../../../../../../../docs/adr/0026-actions-hierarchy-overflow-and-destructive-verbs.md)).\n *\n * An `alertdialog`, not a `dialog`: it interrupts to ask a question that must\n * be answered. Its message is wired as the dialog's description, so it is read\n * with the title on opening, and **Cancel takes the initial focus** — Enter on\n * a dialog that opened under the reader's hand keeps what they have.\n *\n * The dialog element fills the viewport rather than wrapping a `fixed` child in\n * a `relative` box, for the reason `EntityLinkPicker` records: a zero-sized\n * dialog is invisible to anything that measures it — assistive tech and\n * Playwright alike — even with a painted panel inside.\n */\nexport function ConfirmDialog({\n  open,\n  title,\n  message,\n  tone = 'neutral',\n  confirmLabel,\n  cancelLabel,\n  typed,\n  busy = false,\n  onConfirm,\n  onCancel,\n}: ConfirmDialogProps) {\n  const t = useT();\n  const inputId = useId();\n  const [entered, setEntered] = useState('');\n  const matches = typed === undefined || entered.trim() === typed;\n\n  return (\n    <Dialog\n      open={open}\n      role=\"alertdialog\"\n      onClose={onCancel}\n      className=\"inset-0 fixed z-(--z-overlay) flex items-center justify-center overflow-y-auto p-s\"\n    >\n      <div aria-hidden className=\"inset-0 fixed bg-scrim\" />\n      <DialogPanel\n        data-testid=\"confirm-dialog\"\n        className=\"max-w-md relative w-full rounded-lg border border-border bg-surface p-s shadow-overlay\"\n      >\n        <DialogTitle className=\"text-step-1 font-semibold text-content\">\n          {title}\n        </DialogTitle>\n        <DialogDescription className=\"mt-2xs text-step-sm text-content-muted\">\n          {message}\n        </DialogDescription>\n        {typed !== undefined && (\n          <div className=\"mt-s flex flex-col gap-3xs\">\n            <label htmlFor={inputId} className=\"text-step-sm text-content\">\n              {t('confirm.typeToConfirm', { expected: typed })}\n            </label>\n            <TextInput\n              id={inputId}\n              autoComplete=\"off\"\n              spellCheck={false}\n              value={entered}\n              onChange={event => setEntered(event.currentTarget.value)}\n            />\n          </div>\n        )}\n        <div className=\"mt-s flex justify-end gap-xs\">\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            data-autofocus\n            onClick={onCancel}\n            disabled={busy}\n          >\n            {cancelLabel ?? t('confirm.cancel')}\n          </Button>\n          <Button\n            type=\"button\"\n            variant={tone === 'destructive' ? 'destructive' : 'primary'}\n            onClick={onConfirm}\n            disabled={busy || !matches}\n          >\n            {confirmLabel ?? t('confirm.confirm')}\n          </Button>\n        </div>\n      </DialogPanel>\n    </Dialog>\n  );\n}\n"],"names":["Dialog","DialogDescription","DialogPanel","DialogTitle","useId","useState","useT","Button","TextInput","ConfirmDialog","open","title","message","tone","confirmLabel","cancelLabel","typed","busy","onConfirm","onCancel","t","inputId","entered","setEntered","matches","undefined","trim","role","onClose","className","div","aria-hidden","data-testid","label","htmlFor","expected","id","autoComplete","spellCheck","value","onChange","event","currentTarget","type","variant","data-autofocus","onClick","disabled"],"mappings":"AAAA;;AAEA,SACEA,MAAM,EACNC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,QACN,oBAAoB;AAC3B,SAASC,KAAK,EAAEC,QAAQ,QAAQ,QAAQ;AAExC,SAASC,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,MAAM,QAAQ,8BAA8B;AACrD,SAASC,SAAS,QAAQ,6BAA6B;AAkCvD;;;;;;;;;;;;;CAaC,GACD,OAAO,SAASC,cAAc,EAC5BC,IAAI,EACJC,KAAK,EACLC,OAAO,EACPC,OAAO,SAAS,EAChBC,YAAY,EACZC,WAAW,EACXC,KAAK,EACLC,OAAO,KAAK,EACZC,SAAS,EACTC,QAAQ,EACW;IACnB,MAAMC,IAAId;IACV,MAAMe,UAAUjB;IAChB,MAAM,CAACkB,SAASC,WAAW,GAAGlB,SAAS;IACvC,MAAMmB,UAAUR,UAAUS,aAAaH,QAAQI,IAAI,OAAOV;IAE1D,qBACE,MAAChB;QACCU,MAAMA;QACNiB,MAAK;QACLC,SAAST;QACTU,WAAU;;0BAEV,KAACC;gBAAIC,aAAW;gBAACF,WAAU;;0BAC3B,MAAC3B;gBACC8B,eAAY;gBACZH,WAAU;;kCAEV,KAAC1B;wBAAY0B,WAAU;kCACpBlB;;kCAEH,KAACV;wBAAkB4B,WAAU;kCAC1BjB;;oBAEFI,UAAUS,2BACT,MAACK;wBAAID,WAAU;;0CACb,KAACI;gCAAMC,SAASb;gCAASQ,WAAU;0CAChCT,EAAE,yBAAyB;oCAAEe,UAAUnB;gCAAM;;0CAEhD,KAACR;gCACC4B,IAAIf;gCACJgB,cAAa;gCACbC,YAAY;gCACZC,OAAOjB;gCACPkB,UAAUC,CAAAA,QAASlB,WAAWkB,MAAMC,aAAa,CAACH,KAAK;;;;kCAI7D,MAACT;wBAAID,WAAU;;0CACb,KAACtB;gCACCoC,MAAK;gCACLC,SAAQ;gCACRC,gBAAc;gCACdC,SAAS3B;gCACT4B,UAAU9B;0CAETF,sBAAAA,cAAeK,EAAE;;0CAEpB,KAACb;gCACCoC,MAAK;gCACLC,SAAS/B,SAAS,gBAAgB,gBAAgB;gCAClDiC,SAAS5B;gCACT6B,UAAU9B,QAAQ,CAACO;0CAElBV,uBAAAA,eAAgBM,EAAE;;;;;;;;AAM/B"}

package/dist/ui/molecules/entity-record-card/entity-record-card.d.ts

@@ -1,30 +1,43 @@
-import type { ReactNode } from 'react';
-export interface EntityRecordCardColumn {
-    name: string;
-    label: string;
+import { type ReactNode } from 'react';
+/** One line of a card: a member's label and its value. */
+export interface EntityRecordCardMeta {
+    key: string;
+    label: ReactNode;
+    value: ReactNode;
 }
 export interface EntityRecordCardProps {
-    columns: readonly EntityRecordCardColumn[];
-    /** Renders one column's cell. Supplied by the caller so a card and a table
-     *  row stay in agreement about custom renderers. */
-    renderCell: (column: EntityRecordCardColumn) => ReactNode;
-    /** Optional trailing actions (a link to the record, …). */
-    actions?: ReactNode;
     /**
-     * Rendered above the fields — the card's equivalent of a leading column.
-     *
-     * A selection box goes here rather than beside the actions because it is not
-     * an action on the record: it decides whether the record is *in the set* the
-     * actions will run over, and putting the two in one row reads as a third
-     * button.
+     * The record's heading — what it is read as, usually a link to it. A link
+     * here is stretched over the whole card, so the card is one target.
+     */
+    title: ReactNode;
+    /** A line under the heading. */
+    subtitle?: ReactNode;
+    /** Short values beside the heading — a status. */
+    badges?: readonly {
+        key: string;
+        value: ReactNode;
+    }[];
+    /** The record's other members, as a description list. */
+    meta: readonly EntityRecordCardMeta[];
+    /**
+     * Above the heading: a selection box. It is not an action on the record —
+     * it decides whether the record is *in the set* the actions run over — so it
+     * does not sit with them.
      */
     leading?: ReactNode;
+    /** Above the heading, at the end: the record's menu. */
+    actions?: ReactNode;
     className?: string;
 }
 /**
- * A record pivoted from a row into a label/value stack. This is the narrow
- * viewport form of a table row: at phone widths a horizontal scroll hides most
- * columns, whereas stacking keeps every visible column readable.
+ * A record pivoted from a row into a card: the narrow form of a table row,
+ * where a horizontal scroll would hide most columns.
+ *
+ * An `article` named by its `h3`, so a reader can move card by card with the
+ * heading keys and hears what each record is. The title's link is stretched
+ * over the card; the selection box and the menu sit above it, so they stay
+ * their own targets.
  */
-export declare function EntityRecordCard({ columns, renderCell, actions, leading, className, }: EntityRecordCardProps): import("react").JSX.Element;
+export declare function EntityRecordCard({ title, subtitle, badges, meta, leading, actions, className, }: EntityRecordCardProps): import("react").JSX.Element;
 //# sourceMappingURL=entity-record-card.d.ts.map

package/dist/ui/molecules/entity-record-card/entity-record-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entity-record-card.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/entity-record-card/entity-record-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C;wDACoD;IACpD,UAAU,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,SAAS,CAAC;IAC1D,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,UAAU,EACV,OAAO,EACP,OAAO,EACP,SAAS,GACV,EAAE,qBAAqB,+BAyBvB"}
+{"version":3,"file":"entity-record-card.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/entity-record-card/entity-record-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAI9C,0DAA0D;AAC1D,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;IACtD,yDAAyD;IACzD,IAAI,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wDAAwD;IACxD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,MAAW,EACX,IAAI,EACJ,OAAO,EACP,OAAO,EACP,SAAS,GACV,EAAE,qBAAqB,+BAyDvB"}

package/dist/ui/molecules/entity-record-card/entity-record-card.js

@@ -1,36 +1,69 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
 import { cn } from '../../utils/cn.js';
 /**
- * A record pivoted from a row into a label/value stack. This is the narrow
- * viewport form of a table row: at phone widths a horizontal scroll hides most
- * columns, whereas stacking keeps every visible column readable.
- */ export function EntityRecordCard({ columns, renderCell, actions, leading, className }) {
-    return /*#__PURE__*/ _jsxs("div", {
-        className: cn('rounded-xl border border-border bg-surface-elevated p-s text-content shadow-edge', className),
+ * A record pivoted from a row into a card: the narrow form of a table row,
+ * where a horizontal scroll would hide most columns.
+ *
+ * An `article` named by its `h3`, so a reader can move card by card with the
+ * heading keys and hears what each record is. The title's link is stretched
+ * over the card; the selection box and the menu sit above it, so they stay
+ * their own targets.
+ */ export function EntityRecordCard({ title, subtitle, badges = [], meta, leading, actions, className }) {
+    const titleId = useId();
+    return /*#__PURE__*/ _jsxs("article", {
+        "aria-labelledby": titleId,
+        className: cn('relative rounded-xl border border-border bg-surface-elevated p-s text-content shadow-edge focus-within:border-primary', className),
         children: [
-            leading && /*#__PURE__*/ _jsx("div", {
-                className: "mb-2xs flex",
-                children: leading
+            (leading !== undefined || actions !== undefined) && /*#__PURE__*/ _jsxs("div", {
+                className: "relative z-1 mb-2xs flex items-center justify-between gap-2xs",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "flex",
+                        children: leading
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "flex",
+                        children: actions
+                    })
+                ]
             }),
-            /*#__PURE__*/ _jsx("dl", {
-                className: "flex flex-col gap-2xs",
-                children: columns.map((column)=>/*#__PURE__*/ _jsxs("div", {
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-wrap items-baseline justify-between gap-2xs",
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        id: titleId,
+                        className: "m-0 [&_a]:after:inset-0 text-step-0 font-semibold [&_a]:after:absolute [&_a]:after:content-['']",
+                        children: title
+                    }),
+                    badges.length > 0 && /*#__PURE__*/ _jsx("div", {
+                        className: "flex flex-wrap gap-3xs",
+                        children: badges.map((badge)=>/*#__PURE__*/ _jsx("span", {
+                                className: "rounded-full border border-border px-2xs text-step-sm",
+                                children: badge.value
+                            }, badge.key))
+                    })
+                ]
+            }),
+            subtitle !== undefined && /*#__PURE__*/ _jsx("p", {
+                className: "m-0 text-step-sm text-content-muted",
+                children: subtitle
+            }),
+            meta.length > 0 && /*#__PURE__*/ _jsx("dl", {
+                className: "mt-2xs flex flex-col gap-2xs",
+                children: meta.map((line)=>/*#__PURE__*/ _jsxs("div", {
                         className: "flex items-baseline justify-between gap-2xs",
                         children: [
                             /*#__PURE__*/ _jsx("dt", {
                                 className: "tracking-wide text-step-xs text-content-muted uppercase",
-                                children: column.label
+                                children: line.label
                             }),
                             /*#__PURE__*/ _jsx("dd", {
-                                className: "text-right text-step-sm",
-                                children: renderCell(column)
+                                className: "m-0 text-right text-step-sm",
+                                children: line.value
                             })
                         ]
-                    }, column.name))
-            }),
-            actions && /*#__PURE__*/ _jsx("div", {
-                className: "mt-2xs flex justify-end",
-                children: actions
+                    }, line.key))
             })
         ]
     });

package/dist/ui/molecules/entity-record-card/entity-record-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/molecules/entity-record-card/entity-record-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils/cn.js';\n\nexport interface EntityRecordCardColumn {\n  name: string;\n  label: string;\n}\n\nexport interface EntityRecordCardProps {\n  columns: readonly EntityRecordCardColumn[];\n  /** Renders one column's cell. Supplied by the caller so a card and a table\n   *  row stay in agreement about custom renderers. */\n  renderCell: (column: EntityRecordCardColumn) => ReactNode;\n  /** Optional trailing actions (a link to the record, …). */\n  actions?: ReactNode;\n  /**\n   * Rendered above the fields — the card's equivalent of a leading column.\n   *\n   * A selection box goes here rather than beside the actions because it is not\n   * an action on the record: it decides whether the record is *in the set* the\n   * actions will run over, and putting the two in one row reads as a third\n   * button.\n   */\n  leading?: ReactNode;\n  className?: string;\n}\n\n/**\n * A record pivoted from a row into a label/value stack. This is the narrow\n * viewport form of a table row: at phone widths a horizontal scroll hides most\n * columns, whereas stacking keeps every visible column readable.\n */\nexport function EntityRecordCard({\n  columns,\n  renderCell,\n  actions,\n  leading,\n  className,\n}: EntityRecordCardProps) {\n  return (\n    <div\n      className={cn(\n        'rounded-xl border border-border bg-surface-elevated p-s text-content shadow-edge',\n        className,\n      )}\n    >\n      {leading && <div className=\"mb-2xs flex\">{leading}</div>}\n      <dl className=\"flex flex-col gap-2xs\">\n        {columns.map(column => (\n          <div\n            key={column.name}\n            className=\"flex items-baseline justify-between gap-2xs\"\n          >\n            <dt className=\"tracking-wide text-step-xs text-content-muted uppercase\">\n              {column.label}\n            </dt>\n            <dd className=\"text-right text-step-sm\">{renderCell(column)}</dd>\n          </div>\n        ))}\n      </dl>\n      {actions && <div className=\"mt-2xs flex justify-end\">{actions}</div>}\n    </div>\n  );\n}\n"],"names":["cn","EntityRecordCard","columns","renderCell","actions","leading","className","div","dl","map","column","dt","label","dd","name"],"mappings":";AAEA,SAASA,EAAE,QAAQ,oBAAoB;AA0BvC;;;;CAIC,GACD,OAAO,SAASC,iBAAiB,EAC/BC,OAAO,EACPC,UAAU,EACVC,OAAO,EACPC,OAAO,EACPC,SAAS,EACa;IACtB,qBACE,MAACC;QACCD,WAAWN,GACT,oFACAM;;YAGDD,yBAAW,KAACE;gBAAID,WAAU;0BAAeD;;0BAC1C,KAACG;gBAAGF,WAAU;0BACXJ,QAAQO,GAAG,CAACC,CAAAA,uBACX,MAACH;wBAECD,WAAU;;0CAEV,KAACK;gCAAGL,WAAU;0CACXI,OAAOE,KAAK;;0CAEf,KAACC;gCAAGP,WAAU;0CAA2BH,WAAWO;;;uBAN/CA,OAAOI,IAAI;;YAUrBV,yBAAW,KAACG;gBAAID,WAAU;0BAA2BF;;;;AAG5D"}
+{"version":3,"sources":["../../../../src/ui/molecules/entity-record-card/entity-record-card.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\n\nimport { cn } from '../../utils/cn.js';\n\n/** One line of a card: a member's label and its value. */\nexport interface EntityRecordCardMeta {\n  key: string;\n  label: ReactNode;\n  value: ReactNode;\n}\n\nexport interface EntityRecordCardProps {\n  /**\n   * The record's heading — what it is read as, usually a link to it. A link\n   * here is stretched over the whole card, so the card is one target.\n   */\n  title: ReactNode;\n  /** A line under the heading. */\n  subtitle?: ReactNode;\n  /** Short values beside the heading — a status. */\n  badges?: readonly { key: string; value: ReactNode }[];\n  /** The record's other members, as a description list. */\n  meta: readonly EntityRecordCardMeta[];\n  /**\n   * Above the heading: a selection box. It is not an action on the record —\n   * it decides whether the record is *in the set* the actions run over — so it\n   * does not sit with them.\n   */\n  leading?: ReactNode;\n  /** Above the heading, at the end: the record's menu. */\n  actions?: ReactNode;\n  className?: string;\n}\n\n/**\n * A record pivoted from a row into a card: the narrow form of a table row,\n * where a horizontal scroll would hide most columns.\n *\n * An `article` named by its `h3`, so a reader can move card by card with the\n * heading keys and hears what each record is. The title's link is stretched\n * over the card; the selection box and the menu sit above it, so they stay\n * their own targets.\n */\nexport function EntityRecordCard({\n  title,\n  subtitle,\n  badges = [],\n  meta,\n  leading,\n  actions,\n  className,\n}: EntityRecordCardProps) {\n  const titleId = useId();\n\n  return (\n    <article\n      aria-labelledby={titleId}\n      className={cn(\n        'relative rounded-xl border border-border bg-surface-elevated p-s text-content shadow-edge focus-within:border-primary',\n        className,\n      )}\n    >\n      {(leading !== undefined || actions !== undefined) && (\n        <div className=\"relative z-1 mb-2xs flex items-center justify-between gap-2xs\">\n          <div className=\"flex\">{leading}</div>\n          <div className=\"flex\">{actions}</div>\n        </div>\n      )}\n      <div className=\"flex flex-wrap items-baseline justify-between gap-2xs\">\n        <h3\n          id={titleId}\n          className=\"m-0 [&_a]:after:inset-0 text-step-0 font-semibold [&_a]:after:absolute [&_a]:after:content-['']\"\n        >\n          {title}\n        </h3>\n        {badges.length > 0 && (\n          <div className=\"flex flex-wrap gap-3xs\">\n            {badges.map(badge => (\n              <span\n                key={badge.key}\n                className=\"rounded-full border border-border px-2xs text-step-sm\"\n              >\n                {badge.value}\n              </span>\n            ))}\n          </div>\n        )}\n      </div>\n      {subtitle !== undefined && (\n        <p className=\"m-0 text-step-sm text-content-muted\">{subtitle}</p>\n      )}\n      {meta.length > 0 && (\n        <dl className=\"mt-2xs flex flex-col gap-2xs\">\n          {meta.map(line => (\n            <div\n              key={line.key}\n              className=\"flex items-baseline justify-between gap-2xs\"\n            >\n              <dt className=\"tracking-wide text-step-xs text-content-muted uppercase\">\n                {line.label}\n              </dt>\n              <dd className=\"m-0 text-right text-step-sm\">{line.value}</dd>\n            </div>\n          ))}\n        </dl>\n      )}\n    </article>\n  );\n}\n"],"names":["useId","cn","EntityRecordCard","title","subtitle","badges","meta","leading","actions","className","titleId","article","aria-labelledby","undefined","div","h3","id","length","map","badge","span","value","key","p","dl","line","dt","label","dd"],"mappings":";AAAA,SAAyBA,KAAK,QAAQ,QAAQ;AAE9C,SAASC,EAAE,QAAQ,oBAAoB;AAgCvC;;;;;;;;CAQC,GACD,OAAO,SAASC,iBAAiB,EAC/BC,KAAK,EACLC,QAAQ,EACRC,SAAS,EAAE,EACXC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,SAAS,EACa;IACtB,MAAMC,UAAUV;IAEhB,qBACE,MAACW;QACCC,mBAAiBF;QACjBD,WAAWR,GACT,yHACAQ;;YAGAF,CAAAA,YAAYM,aAAaL,YAAYK,SAAQ,mBAC7C,MAACC;gBAAIL,WAAU;;kCACb,KAACK;wBAAIL,WAAU;kCAAQF;;kCACvB,KAACO;wBAAIL,WAAU;kCAAQD;;;;0BAG3B,MAACM;gBAAIL,WAAU;;kCACb,KAACM;wBACCC,IAAIN;wBACJD,WAAU;kCAETN;;oBAEFE,OAAOY,MAAM,GAAG,mBACf,KAACH;wBAAIL,WAAU;kCACZJ,OAAOa,GAAG,CAACC,CAAAA,sBACV,KAACC;gCAECX,WAAU;0CAETU,MAAME,KAAK;+BAHPF,MAAMG,GAAG;;;;YASvBlB,aAAaS,2BACZ,KAACU;gBAAEd,WAAU;0BAAuCL;;YAErDE,KAAKW,MAAM,GAAG,mBACb,KAACO;gBAAGf,WAAU;0BACXH,KAAKY,GAAG,CAACO,CAAAA,qBACR,MAACX;wBAECL,WAAU;;0CAEV,KAACiB;gCAAGjB,WAAU;0CACXgB,KAAKE,KAAK;;0CAEb,KAACC;gCAAGnB,WAAU;0CAA+BgB,KAAKJ,KAAK;;;uBANlDI,KAAKH,GAAG;;;;AAa3B"}

package/dist/ui/molecules/filter-builder/filter-builder.d.ts

@@ -1,10 +1,16 @@
-import { type Entity, type EntityFieldDescriptor, type FilterGroup } from '@entifix/core';
+import { type Entity, type EntityFacetCounts, type EntityFieldDescriptor, type FilterGroup } from '@entifix/core';
 export interface FilterBuilderProps<TEntity extends Entity> {
     /** Filterable members, already resolved from the entity metadata. */
     descriptors: readonly EntityFieldDescriptor[];
     /** The filtering currently applied, used to seed the rows. */
     value?: FilterGroup<TEntity>;
     onChange: (filtering: FilterGroup<TEntity>) => void;
+    /**
+     * How many records hold each value, by member — shown beside an enum's or a
+     * boolean's choices, so a reader sees what a choice would keep before
+     * applying it ([ADR 0012](../../../../../../../docs/adr/0012-facet-counts-are-a-port-of-their-own.md)).
+     */
+    facets?: EntityFacetCounts;
 }
 /**
  * Builds an `EntityFiltering` value from entity metadata: the member list, the
@@ -15,5 +21,5 @@ export interface FilterBuilderProps<TEntity extends Entity> {
  * feeds a load request: emitting per keystroke would put one HTTP request on
  * the wire per character typed.
  */
-export declare function FilterBuilder<TEntity extends Entity>({ descriptors, value: applied, onChange, }: FilterBuilderProps<TEntity>): import("react").JSX.Element;
+export declare function FilterBuilder<TEntity extends Entity>({ descriptors, value: applied, onChange, facets, }: FilterBuilderProps<TEntity>): import("react").JSX.Element;
 //# sourceMappingURL=filter-builder.d.ts.map

package/dist/ui/molecules/filter-builder/filter-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-builder.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/filter-builder/filter-builder.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,MAAM,EACX,KAAK,qBAAqB,EAE1B,KAAK,WAAW,EAMjB,MAAM,eAAe,CAAC;AA+IvB,MAAM,WAAW,kBAAkB,CAAC,OAAO,SAAS,MAAM;IACxD,qEAAqE;IACrE,WAAW,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC9C,8DAA8D;IAC9D,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CACrD;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,OAAO,SAAS,MAAM,EAAE,EACpD,WAAW,EACX,KAAK,EAAE,OAAO,EACd,QAAQ,GACT,EAAE,kBAAkB,CAAC,OAAO,CAAC,+BA+L7B"}
+{"version":3,"file":"filter-builder.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/filter-builder/filter-builder.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,MAAM,EACX,KAAK,iBAAiB,EAEtB,KAAK,qBAAqB,EAE1B,KAAK,WAAW,EAMjB,MAAM,eAAe,CAAC;AA+IvB,MAAM,WAAW,kBAAkB,CAAC,OAAO,SAAS,MAAM;IACxD,qEAAqE;IACrE,WAAW,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC9C,8DAA8D;IAC9D,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACpD;;;;OAIG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,OAAO,SAAS,MAAM,EAAE,EACpD,WAAW,EACX,KAAK,EAAE,OAAO,EACd,QAAQ,EACR,MAAM,GACP,EAAE,kBAAkB,CAAC,OAAO,CAAC,+BAgM7B"}

package/dist/ui/molecules/filter-builder/filter-builder.js

@@ -98,7 +98,7 @@ function coerce(raw, type) {
  * Editing is a draft. `onChange` fires only on **Apply**, because the value
  * feeds a load request: emitting per keystroke would put one HTTP request on
  * the wire per character typed.
- */ export function FilterBuilder({ descriptors, value: applied, onChange }) {
+ */ export function FilterBuilder({ descriptors, value: applied, onChange, facets }) {
     var _ref;
     const t = useT();
     const idPrefix = useId();
@@ -218,6 +218,7 @@ function coerce(raw, type) {
                         }),
                         arity !== 'none' && /*#__PURE__*/ _jsx(FilterValueInput, {
                             descriptor: descriptor,
+                            counts: facets == null ? void 0 : facets[descriptor.name],
                             arity: arity,
                             value: draft.value,
                             end: draft.end,
@@ -276,9 +277,17 @@ function coerce(raw, type) {
         ]
     });
 }
-/** The value control the member's type calls for. */ function FilterValueInput({ descriptor, arity, value, end, onValueChange, onEndChange }) {
+/** The value control the member's type calls for. */ function FilterValueInput({ descriptor, counts, arity, value, end, onValueChange, onEndChange }) {
     const t = useT();
     const enumLabel = useEnumLabel();
+    /** A choice's label, with how many records hold it when that is known. */ const counted = (label, option)=>{
+        var _counts_find;
+        const count = counts == null ? void 0 : (_counts_find = counts.find((entry)=>String(entry.value) === option)) == null ? void 0 : _counts_find.count;
+        return count === undefined ? label : t('filter.withCount', {
+            label,
+            count
+        });
+    };
     if (descriptor.type === 'boolean') {
         return /*#__PURE__*/ _jsxs(Select, {
             "aria-label": t('filter.value'),
@@ -291,11 +300,11 @@ function coerce(raw, type) {
                 }),
                 /*#__PURE__*/ _jsx("option", {
                     value: "true",
-                    children: t('value.yes')
+                    children: counted(t('value.yes'), 'true')
                 }),
                 /*#__PURE__*/ _jsx("option", {
                     value: "false",
-                    children: t('value.no')
+                    children: counted(t('value.no'), 'false')
                 })
             ]
         });
@@ -312,7 +321,7 @@ function coerce(raw, type) {
                 }),
                 descriptor.enumValues.map((option)=>/*#__PURE__*/ _jsx("option", {
                         value: option,
-                        children: enumLabel(descriptor, option)
+                        children: counted(enumLabel(descriptor, option), option)
                     }, option))
             ]
         });