@entifix/react-controls 0.1.0-0

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

@@ -0,0 +1,86 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { failedIds, succeededCount } from '@entifix/core';
+import { useT, useTranslateKey } from '../../../i18n/index.js';
+import { Button } from '../../atoms/button/index.js';
+import { cn } from '../../utils/cn.js';
+/**
+ * What a bulk action actually did, per row.
+ *
+ * The requirement this exists for: 40 selected, 3 fail. A single notice lies
+ * whichever way it is written — as a failure it hides the 37 rows that were
+ * written, and as a success it hides the 3 that were not, which is worse
+ * 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,
+ * 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();
+    const translateKey = useTranslateKey();
+    const failed = outcomes.filter((outcome)=>!outcome.ok);
+    const succeeded = succeededCount(outcomes);
+    return /*#__PURE__*/ _jsxs("div", {
+        role: "status",
+        tabIndex: -1,
+        "aria-label": t('bulk.resultLabel'),
+        "data-testid": "bulk-result",
+        className: cn('flex flex-col gap-2xs rounded-lg border border-border bg-surface-elevated px-s py-2xs', className),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-wrap items-center gap-2xs",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "text-step-sm text-content",
+                        children: t('bulk.succeeded', {
+                            count: succeeded
+                        })
+                    }),
+                    failed.length > 0 && /*#__PURE__*/ _jsx("span", {
+                        className: "text-step-sm text-danger",
+                        children: t('bulk.failed', {
+                            count: failed.length
+                        })
+                    }),
+                    failed.length > 0 && onRetryFailed && /*#__PURE__*/ _jsx(Button, {
+                        type: "button",
+                        variant: "secondary",
+                        size: "sm",
+                        disabled: busy,
+                        onClick: ()=>onRetryFailed(failedIds(outcomes)),
+                        children: t('bulk.retryFailed')
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        type: "button",
+                        variant: "ghost",
+                        size: "sm",
+                        disabled: busy,
+                        onClick: onDismiss,
+                        children: t('bulk.dismiss')
+                    })
+                ]
+            }),
+            failed.length > 0 && /*#__PURE__*/ _jsx("ul", {
+                className: "flex flex-col gap-3xs",
+                children: failed.map((outcome)=>{
+                    var _ref, _outcome_code;
+                    return /*#__PURE__*/ _jsxs("li", {
+                        className: "text-step-sm text-content-muted",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-content",
+                                children: (_ref = labelFor == null ? void 0 : labelFor(outcome.id)) != null ? _ref : String(outcome.id)
+                            }),
+                            ' — ',
+                            translateKey(`errors:${(_outcome_code = outcome.code) != null ? _outcome_code : 'unexpected'}`)
+                        ]
+                    }, String(outcome.id));
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=bulk-result.js.map

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

@@ -0,0 +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 `@r10c/i18n-check`\n                  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"}

package/dist/ui/molecules/bulk-result/index.d.ts

@@ -0,0 +1,2 @@
+export * from './bulk-result.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/molecules/bulk-result/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/bulk-result/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from './bulk-result.js';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/molecules/bulk-result/index.ts"],"sourcesContent":["export * from './bulk-result.js';\n"],"names":[],"mappings":"AAAA,cAAc,mBAAmB"}

package/dist/ui/molecules/card/card.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export type CardProps = ComponentPropsWithoutRef<'div'>;
+/** Elevated surface with themed border and fluid padding. */
+export declare function Card({ className, ...props }: CardProps): import("react").JSX.Element;
+//# sourceMappingURL=card.d.ts.map

package/dist/ui/molecules/card/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAItD,MAAM,MAAM,SAAS,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAExD,6DAA6D;AAC7D,wBAAgB,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAWtD"}

package/dist/ui/molecules/card/card.js

@@ -0,0 +1,14 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+/** Elevated surface with themed border and fluid padding. */ export function Card(_0) {
+    let { className } = _0, props = _object_without_properties_loose(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ _jsx("div", _extends({
+        className: cn('rounded-2xl border border-border bg-surface-elevated p-m text-content', 'shadow-card transition-shadow duration-200 hover:shadow-overlay', className)
+    }, props));
+}
+
+//# sourceMappingURL=card.js.map

package/dist/ui/molecules/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/molecules/card/card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '../../utils/cn.js';\n\nexport type CardProps = ComponentPropsWithoutRef<'div'>;\n\n/** Elevated surface with themed border and fluid padding. */\nexport function Card({ className, ...props }: CardProps) {\n  return (\n    <div\n      className={cn(\n        'rounded-2xl border border-border bg-surface-elevated p-m text-content',\n        'shadow-card transition-shadow duration-200 hover:shadow-overlay',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"names":["cn","Card","className","props","div"],"mappings":";;;AAEA,SAASA,EAAE,QAAQ,oBAAoB;AAIvC,2DAA2D,GAC3D,OAAO,SAASC,KAAK,EAAkC;QAAlC,EAAEC,SAAS,EAAuB,OAAlBC;;;IACnC,qBACE,KAACC;QACCF,WAAWF,GACT,yEACA,mEACAE;OAEEC;AAGV"}

package/dist/ui/molecules/card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './card.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/molecules/card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/card/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/ui/molecules/card/index.js

@@ -0,0 +1,3 @@
+export * from './card.js';
+
+//# sourceMappingURL=index.js.map

package/dist/ui/molecules/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/molecules/card/index.ts"],"sourcesContent":["export * from './card.js';\n"],"names":[],"mappings":"AAAA,cAAc,YAAY"}

package/dist/ui/molecules/column-settings/column-settings.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The user's column layout for one table. Stored through the UI-preferences
+ * port, so it is deliberately plain JSON: names only, no descriptors — a column
+ * that disappears from the entity simply stops matching.
+ */
+export interface ColumnPersonalization {
+    /** Column names, most-significant first. Unlisted columns keep their default
+     *  position at the end, so a new entity member never breaks a saved layout. */
+    order?: string[];
+    /** Column names the user hid. */
+    hidden?: string[];
+}
+export interface ColumnSettingsColumn {
+    name: string;
+    label: string;
+}
+export interface ColumnSettingsProps {
+    /** Columns in their currently resolved order. */
+    columns: readonly ColumnSettingsColumn[];
+    hidden: readonly string[];
+    onChange: (next: ColumnPersonalization) => void;
+}
+/**
+ * Popover for reordering and hiding columns. Reordering uses explicit up/down
+ * buttons rather than drag-and-drop: it needs no dependency, works on touch, and
+ * is keyboard-operable for free.
+ */
+export declare function ColumnSettings({ columns, hidden, onChange, }: ColumnSettingsProps): import("react").JSX.Element;
+//# sourceMappingURL=column-settings.d.ts.map

package/dist/ui/molecules/column-settings/column-settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-settings.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/column-settings/column-settings.tsx"],"names":[],"mappings":"AASA;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IACpC;mFAC+E;IAC/E,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,iDAAiD;IACjD,OAAO,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACzC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD;AASD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,+BAmFrB"}

package/dist/ui/molecules/column-settings/column-settings.js

@@ -0,0 +1,117 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react';
+import { useT } from '../../../i18n/index.js';
+import { Button } from '../../atoms/button/index.js';
+import { Checkbox } from '../../atoms/field/index.js';
+import { Text } from '../../atoms/text/index.js';
+function move(names, from, to) {
+    const next = [
+        ...names
+    ];
+    const [moved] = next.splice(from, 1);
+    next.splice(to, 0, moved);
+    return next;
+}
+/**
+ * Popover for reordering and hiding columns. Reordering uses explicit up/down
+ * buttons rather than drag-and-drop: it needs no dependency, works on touch, and
+ * is keyboard-operable for free.
+ */ export function ColumnSettings({ columns, hidden, onChange }) {
+    const order = columns.map((column)=>column.name);
+    const toggle = (name)=>onChange({
+            order,
+            hidden: hidden.includes(name) ? hidden.filter((entry)=>entry !== name) : [
+                ...hidden,
+                name
+            ]
+        });
+    const t = useT();
+    const shift = (index, delta)=>{
+        const target = index + delta;
+        // Defence in depth: the buttons are already disabled at both ends, so this
+        // is unreachable through the UI — but an out-of-range splice would silently
+        // corrupt the order rather than no-op.
+        /* v8 ignore next */ if (target < 0 || target >= order.length) return;
+        onChange({
+            order: move(order, index, target),
+            hidden: [
+                ...hidden
+            ]
+        });
+    };
+    return /*#__PURE__*/ _jsxs(Popover, {
+        className: "relative",
+        children: [
+            /*#__PURE__*/ _jsx(PopoverButton, {
+                as: Button,
+                type: "button",
+                variant: "secondary",
+                size: "sm",
+                children: t('columns.title')
+            }),
+            /*#__PURE__*/ _jsxs(PopoverPanel, {
+                anchor: "bottom end",
+                className: "w-64 z-10 mt-3xs rounded-xl border border-border bg-surface-elevated p-2xs shadow-card",
+                children: [
+                    /*#__PURE__*/ _jsx(Text, {
+                        step: -2,
+                        tone: "muted",
+                        className: "px-3xs pb-3xs",
+                        children: t('columns.subtitle')
+                    }),
+                    /*#__PURE__*/ _jsx("ul", {
+                        className: "flex flex-col gap-3xs",
+                        children: columns.map((column, index)=>/*#__PURE__*/ _jsxs("li", {
+                                className: "flex items-center justify-between gap-2xs px-3xs",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Checkbox, {
+                                        label: column.label,
+                                        checked: !hidden.includes(column.name),
+                                        onChange: ()=>toggle(column.name)
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        className: "flex gap-3xs",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                type: "button",
+                                                variant: "ghost",
+                                                size: "sm",
+                                                "aria-label": t('columns.moveUp', {
+                                                    column: column.label
+                                                }),
+                                                disabled: index === 0,
+                                                onClick: ()=>shift(index, -1),
+                                                children: "↑"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                type: "button",
+                                                variant: "ghost",
+                                                size: "sm",
+                                                "aria-label": t('columns.moveDown', {
+                                                    column: column.label
+                                                }),
+                                                disabled: index === columns.length - 1,
+                                                onClick: ()=>shift(index, 1),
+                                                children: "↓"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, column.name))
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        type: "button",
+                        variant: "ghost",
+                        size: "sm",
+                        className: "mt-2xs w-full",
+                        onClick: ()=>onChange({}),
+                        children: t('columns.reset')
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=column-settings.js.map

package/dist/ui/molecules/column-settings/column-settings.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/molecules/column-settings/column-settings.tsx"],"sourcesContent":["'use client';\n\nimport { Popover, PopoverButton, PopoverPanel } from '@headlessui/react';\n\nimport { useT } from '../../../i18n/index.js';\nimport { Button } from '../../atoms/button/index.js';\nimport { Checkbox } from '../../atoms/field/index.js';\nimport { Text } from '../../atoms/text/index.js';\n\n/**\n * The user's column layout for one table. Stored through the UI-preferences\n * port, so it is deliberately plain JSON: names only, no descriptors — a column\n * that disappears from the entity simply stops matching.\n */\nexport interface ColumnPersonalization {\n  /** Column names, most-significant first. Unlisted columns keep their default\n   *  position at the end, so a new entity member never breaks a saved layout. */\n  order?: string[];\n  /** Column names the user hid. */\n  hidden?: string[];\n}\n\nexport interface ColumnSettingsColumn {\n  name: string;\n  label: string;\n}\n\nexport interface ColumnSettingsProps {\n  /** Columns in their currently resolved order. */\n  columns: readonly ColumnSettingsColumn[];\n  hidden: readonly string[];\n  onChange: (next: ColumnPersonalization) => void;\n}\n\nfunction move(names: readonly string[], from: number, to: number): string[] {\n  const next = [...names];\n  const [moved] = next.splice(from, 1);\n  next.splice(to, 0, moved);\n  return next;\n}\n\n/**\n * Popover for reordering and hiding columns. Reordering uses explicit up/down\n * buttons rather than drag-and-drop: it needs no dependency, works on touch, and\n * is keyboard-operable for free.\n */\nexport function ColumnSettings({\n  columns,\n  hidden,\n  onChange,\n}: ColumnSettingsProps) {\n  const order = columns.map(column => column.name);\n\n  const toggle = (name: string) =>\n    onChange({\n      order,\n      hidden: hidden.includes(name)\n        ? hidden.filter(entry => entry !== name)\n        : [...hidden, name],\n    });\n\n  const t = useT();\n\n  const shift = (index: number, delta: number) => {\n    const target = index + delta;\n    // Defence in depth: the buttons are already disabled at both ends, so this\n    // is unreachable through the UI — but an out-of-range splice would silently\n    // corrupt the order rather than no-op.\n    /* v8 ignore next */\n    if (target < 0 || target >= order.length) return;\n    onChange({ order: move(order, index, target), hidden: [...hidden] });\n  };\n\n  return (\n    <Popover className=\"relative\">\n      <PopoverButton as={Button} type=\"button\" variant=\"secondary\" size=\"sm\">\n        {t('columns.title')}\n      </PopoverButton>\n      <PopoverPanel\n        anchor=\"bottom end\"\n        className=\"w-64 z-10 mt-3xs rounded-xl border border-border bg-surface-elevated p-2xs shadow-card\"\n      >\n        <Text step={-2} tone=\"muted\" className=\"px-3xs pb-3xs\">\n          {t('columns.subtitle')}\n        </Text>\n        <ul className=\"flex flex-col gap-3xs\">\n          {columns.map((column, index) => (\n            <li\n              key={column.name}\n              className=\"flex items-center justify-between gap-2xs px-3xs\"\n            >\n              <Checkbox\n                label={column.label}\n                checked={!hidden.includes(column.name)}\n                onChange={() => toggle(column.name)}\n              />\n              <span className=\"flex gap-3xs\">\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  aria-label={t('columns.moveUp', { column: column.label })}\n                  disabled={index === 0}\n                  onClick={() => shift(index, -1)}\n                >\n                  ↑\n                </Button>\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  aria-label={t('columns.moveDown', { column: column.label })}\n                  disabled={index === columns.length - 1}\n                  onClick={() => shift(index, 1)}\n                >\n                  ↓\n                </Button>\n              </span>\n            </li>\n          ))}\n        </ul>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          className=\"mt-2xs w-full\"\n          onClick={() => onChange({})}\n        >\n          {t('columns.reset')}\n        </Button>\n      </PopoverPanel>\n    </Popover>\n  );\n}\n"],"names":["Popover","PopoverButton","PopoverPanel","useT","Button","Checkbox","Text","move","names","from","to","next","moved","splice","ColumnSettings","columns","hidden","onChange","order","map","column","name","toggle","includes","filter","entry","t","shift","index","delta","target","length","className","as","type","variant","size","anchor","step","tone","ul","li","label","checked","span","aria-label","disabled","onClick"],"mappings":"AAAA;;AAEA,SAASA,OAAO,EAAEC,aAAa,EAAEC,YAAY,QAAQ,oBAAoB;AAEzE,SAASC,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,MAAM,QAAQ,8BAA8B;AACrD,SAASC,QAAQ,QAAQ,6BAA6B;AACtD,SAASC,IAAI,QAAQ,4BAA4B;AA2BjD,SAASC,KAAKC,KAAwB,EAAEC,IAAY,EAAEC,EAAU;IAC9D,MAAMC,OAAO;WAAIH;KAAM;IACvB,MAAM,CAACI,MAAM,GAAGD,KAAKE,MAAM,CAACJ,MAAM;IAClCE,KAAKE,MAAM,CAACH,IAAI,GAAGE;IACnB,OAAOD;AACT;AAEA;;;;CAIC,GACD,OAAO,SAASG,eAAe,EAC7BC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACY;IACpB,MAAMC,QAAQH,QAAQI,GAAG,CAACC,CAAAA,SAAUA,OAAOC,IAAI;IAE/C,MAAMC,SAAS,CAACD,OACdJ,SAAS;YACPC;YACAF,QAAQA,OAAOO,QAAQ,CAACF,QACpBL,OAAOQ,MAAM,CAACC,CAAAA,QAASA,UAAUJ,QACjC;mBAAIL;gBAAQK;aAAK;QACvB;IAEF,MAAMK,IAAIvB;IAEV,MAAMwB,QAAQ,CAACC,OAAeC;QAC5B,MAAMC,SAASF,QAAQC;QACvB,2EAA2E;QAC3E,4EAA4E;QAC5E,uCAAuC;QACvC,kBAAkB,GAClB,IAAIC,SAAS,KAAKA,UAAUZ,MAAMa,MAAM,EAAE;QAC1Cd,SAAS;YAAEC,OAAOX,KAAKW,OAAOU,OAAOE;YAASd,QAAQ;mBAAIA;aAAO;QAAC;IACpE;IAEA,qBACE,MAAChB;QAAQgC,WAAU;;0BACjB,KAAC/B;gBAAcgC,IAAI7B;gBAAQ8B,MAAK;gBAASC,SAAQ;gBAAYC,MAAK;0BAC/DV,EAAE;;0BAEL,MAACxB;gBACCmC,QAAO;gBACPL,WAAU;;kCAEV,KAAC1B;wBAAKgC,MAAM,CAAC;wBAAGC,MAAK;wBAAQP,WAAU;kCACpCN,EAAE;;kCAEL,KAACc;wBAAGR,WAAU;kCACXjB,QAAQI,GAAG,CAAC,CAACC,QAAQQ,sBACpB,MAACa;gCAECT,WAAU;;kDAEV,KAAC3B;wCACCqC,OAAOtB,OAAOsB,KAAK;wCACnBC,SAAS,CAAC3B,OAAOO,QAAQ,CAACH,OAAOC,IAAI;wCACrCJ,UAAU,IAAMK,OAAOF,OAAOC,IAAI;;kDAEpC,MAACuB;wCAAKZ,WAAU;;0DACd,KAAC5B;gDACC8B,MAAK;gDACLC,SAAQ;gDACRC,MAAK;gDACLS,cAAYnB,EAAE,kBAAkB;oDAAEN,QAAQA,OAAOsB,KAAK;gDAAC;gDACvDI,UAAUlB,UAAU;gDACpBmB,SAAS,IAAMpB,MAAMC,OAAO,CAAC;0DAC9B;;0DAGD,KAACxB;gDACC8B,MAAK;gDACLC,SAAQ;gDACRC,MAAK;gDACLS,cAAYnB,EAAE,oBAAoB;oDAAEN,QAAQA,OAAOsB,KAAK;gDAAC;gDACzDI,UAAUlB,UAAUb,QAAQgB,MAAM,GAAG;gDACrCgB,SAAS,IAAMpB,MAAMC,OAAO;0DAC7B;;;;;+BA1BER,OAAOC,IAAI;;kCAiCtB,KAACjB;wBACC8B,MAAK;wBACLC,SAAQ;wBACRC,MAAK;wBACLJ,WAAU;wBACVe,SAAS,IAAM9B,SAAS,CAAC;kCAExBS,EAAE;;;;;;AAKb"}

package/dist/ui/molecules/column-settings/index.d.ts

@@ -0,0 +1,2 @@
+export * from './column-settings.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/molecules/column-settings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/column-settings/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/ui/molecules/column-settings/index.js

@@ -0,0 +1,3 @@
+export * from './column-settings.js';
+
+//# sourceMappingURL=index.js.map

package/dist/ui/molecules/column-settings/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/molecules/column-settings/index.ts"],"sourcesContent":["export * from './column-settings.js';\n"],"names":[],"mappings":"AAAA,cAAc,uBAAuB"}

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

@@ -0,0 +1,31 @@
+export type ConfirmTone = 'destructive' | 'neutral';
+export interface ConfirmDialogProps {
+    open: boolean;
+    /** Already-resolved copy — this control renders text, it does not translate. */
+    title: string;
+    message: string;
+    /** `destructive` paints the confirm button in the danger tokens. */
+    tone?: ConfirmTone;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    busy?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+/**
+ * Asks before an irreversible act.
+ *
+ * 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.
+ *
+ * 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;
+//# sourceMappingURL=confirm-dialog.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogPanel, DialogTitle } from '@headlessui/react';
+import { useT } from '../../../i18n/index.js';
+import { Button } from '../../atoms/button/index.js';
+/**
+ * Asks before an irreversible act.
+ *
+ * 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.
+ *
+ * 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 }) {
+    const t = useT();
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: open,
+        onClose: onCancel,
+        className: "inset-0 fixed z-50 flex items-center justify-center overflow-y-auto p-s",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                "aria-hidden": true,
+                className: "inset-0 bg-black/40 fixed"
+            }),
+            /*#__PURE__*/ _jsxs(DialogPanel, {
+                "data-testid": "confirm-dialog",
+                className: "max-w-md relative w-full rounded-lg border border-border bg-surface p-s shadow-overlay",
+                children: [
+                    /*#__PURE__*/ _jsx(DialogTitle, {
+                        className: "text-step-1 font-semibold text-content",
+                        children: title
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "mt-2xs text-step-sm text-content-muted",
+                        children: message
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "mt-s flex justify-end gap-xs",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                type: "button",
+                                variant: "ghost",
+                                onClick: onCancel,
+                                disabled: busy,
+                                children: cancelLabel != null ? cancelLabel : t('confirm.cancel')
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                type: "button",
+                                variant: tone === 'destructive' ? 'destructive' : 'primary',
+                                onClick: onConfirm,
+                                disabled: busy,
+                                children: confirmLabel != null ? confirmLabel : t('confirm.confirm')
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=confirm-dialog.js.map

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

@@ -0,0 +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-50 flex items-center justify-center overflow-y-auto p-s\"\n    >\n      <div aria-hidden className=\"inset-0 bg-black/40 fixed\" />\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"}

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

@@ -0,0 +1,2 @@
+export * from './confirm-dialog.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/confirm-dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from './confirm-dialog.js';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/molecules/confirm-dialog/index.ts"],"sourcesContent":["export * from './confirm-dialog.js';\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB"}

package/dist/ui/molecules/drawer/drawer.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+export interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    /** Names the dialog. A dialog with no accessible name is announced as "dialog". */
+    title: ReactNode;
+    /** Accessible name for the close control. */
+    closeLabel: string;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * An off-canvas panel anchored to the inline start of the viewport.
+ *
+ * Built on Headless UI's `Dialog`, like {@link ConfirmDialog} and the entity link
+ * picker, so the focus trap, `Escape`, the backdrop click and focus restoration
+ * to the trigger are the library's rather than four hand-written behaviours that
+ * each have to be got right — and a drawer that traps focus badly is worse than
+ * no drawer, because a keyboard visitor cannot leave it.
+ *
+ * It carries no viewport logic. *When* a drawer is the right shape is the page
+ * shell's decision (`useViewportMode`); this is only the shape.
+ */
+export declare function Drawer({ open, onClose, title, closeLabel, children, className, }: DrawerProps): import("react").JSX.Element;
+//# sourceMappingURL=drawer.d.ts.map

package/dist/ui/molecules/drawer/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/drawer/drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,mFAAmF;IACnF,KAAK,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,GACV,EAAE,WAAW,+BA+Bb"}

package/dist/ui/molecules/drawer/drawer.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogPanel, DialogTitle } from '@headlessui/react';
+import { Button } from '../../atoms/button/index.js';
+import { cn } from '../../utils/cn.js';
+/**
+ * An off-canvas panel anchored to the inline start of the viewport.
+ *
+ * Built on Headless UI's `Dialog`, like {@link ConfirmDialog} and the entity link
+ * picker, so the focus trap, `Escape`, the backdrop click and focus restoration
+ * to the trigger are the library's rather than four hand-written behaviours that
+ * each have to be got right — and a drawer that traps focus badly is worse than
+ * no drawer, because a keyboard visitor cannot leave it.
+ *
+ * It carries no viewport logic. *When* a drawer is the right shape is the page
+ * shell's decision (`useViewportMode`); this is only the shape.
+ */ export function Drawer({ open, onClose, title, closeLabel, children, className }) {
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: open,
+        onClose: onClose,
+        className: "relative z-50",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                "aria-hidden": true,
+                className: "inset-0 bg-black/40 fixed"
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "inset-0 fixed flex",
+                children: /*#__PURE__*/ _jsxs(DialogPanel, {
+                    "data-testid": "drawer",
+                    className: cn(// 200ms is `--default-transition-duration`, the beat every other
+                    // transition in the system already uses.
+                    'w-72 flex max-w-[85vw] flex-col gap-m overflow-y-auto border-r border-border bg-surface-elevated p-s transition duration-200', className),
+                    children: [
+                        /*#__PURE__*/ _jsxs(DialogTitle, {
+                            className: "flex items-center justify-between gap-2xs text-step-1 font-semibold text-content",
+                            children: [
+                                title,
+                                /*#__PURE__*/ _jsx(Button, {
+                                    type: "button",
+                                    variant: "ghost",
+                                    size: "sm",
+                                    "aria-label": closeLabel,
+                                    onClick: onClose,
+                                    children: /*#__PURE__*/ _jsx("span", {
+                                        "aria-hidden": "true",
+                                        children: "✕"
+                                    })
+                                })
+                            ]
+                        }),
+                        children
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=drawer.js.map

package/dist/ui/molecules/drawer/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/molecules/drawer/drawer.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog, DialogPanel, DialogTitle } from '@headlessui/react';\nimport type { ReactNode } from 'react';\n\nimport { Button } from '../../atoms/button/index.js';\nimport { cn } from '../../utils/cn.js';\n\nexport interface DrawerProps {\n  open: boolean;\n  onClose: () => void;\n  /** Names the dialog. A dialog with no accessible name is announced as \"dialog\". */\n  title: ReactNode;\n  /** Accessible name for the close control. */\n  closeLabel: string;\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * An off-canvas panel anchored to the inline start of the viewport.\n *\n * Built on Headless UI's `Dialog`, like {@link ConfirmDialog} and the entity link\n * picker, so the focus trap, `Escape`, the backdrop click and focus restoration\n * to the trigger are the library's rather than four hand-written behaviours that\n * each have to be got right — and a drawer that traps focus badly is worse than\n * no drawer, because a keyboard visitor cannot leave it.\n *\n * It carries no viewport logic. *When* a drawer is the right shape is the page\n * shell's decision (`useViewportMode`); this is only the shape.\n */\nexport function Drawer({\n  open,\n  onClose,\n  title,\n  closeLabel,\n  children,\n  className,\n}: DrawerProps) {\n  return (\n    <Dialog open={open} onClose={onClose} className=\"relative z-50\">\n      <div aria-hidden className=\"inset-0 bg-black/40 fixed\" />\n      <div className=\"inset-0 fixed flex\">\n        <DialogPanel\n          data-testid=\"drawer\"\n          className={cn(\n            // 200ms is `--default-transition-duration`, the beat every other\n            // transition in the system already uses.\n            'w-72 flex max-w-[85vw] flex-col gap-m overflow-y-auto border-r border-border bg-surface-elevated p-s transition duration-200',\n            className,\n          )}\n        >\n          <DialogTitle className=\"flex items-center justify-between gap-2xs text-step-1 font-semibold text-content\">\n            {title}\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              aria-label={closeLabel}\n              onClick={onClose}\n            >\n              <span aria-hidden=\"true\">✕</span>\n            </Button>\n          </DialogTitle>\n          {children}\n        </DialogPanel>\n      </div>\n    </Dialog>\n  );\n}\n"],"names":["Dialog","DialogPanel","DialogTitle","Button","cn","Drawer","open","onClose","title","closeLabel","children","className","div","aria-hidden","data-testid","type","variant","size","aria-label","onClick","span"],"mappings":"AAAA;;AAEA,SAASA,MAAM,EAAEC,WAAW,EAAEC,WAAW,QAAQ,oBAAoB;AAGrE,SAASC,MAAM,QAAQ,8BAA8B;AACrD,SAASC,EAAE,QAAQ,oBAAoB;AAavC;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,OAAO,EACrBC,IAAI,EACJC,OAAO,EACPC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACG;IACZ,qBACE,MAACX;QAAOM,MAAMA;QAAMC,SAASA;QAASI,WAAU;;0BAC9C,KAACC;gBAAIC,aAAW;gBAACF,WAAU;;0BAC3B,KAACC;gBAAID,WAAU;0BACb,cAAA,MAACV;oBACCa,eAAY;oBACZH,WAAWP,GACT,iEAAiE;oBACjE,yCAAyC;oBACzC,gIACAO;;sCAGF,MAACT;4BAAYS,WAAU;;gCACpBH;8CACD,KAACL;oCACCY,MAAK;oCACLC,SAAQ;oCACRC,MAAK;oCACLC,cAAYT;oCACZU,SAASZ;8CAET,cAAA,KAACa;wCAAKP,eAAY;kDAAO;;;;;wBAG5BH;;;;;;AAKX"}

package/dist/ui/molecules/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './drawer.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/molecules/drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/drawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/ui/molecules/drawer/index.js

@@ -0,0 +1,3 @@
+export * from './drawer.js';
+
+//# sourceMappingURL=index.js.map

package/dist/ui/molecules/drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/molecules/drawer/index.ts"],"sourcesContent":["export * from './drawer.js';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc"}