@entifix/react-controls 0.18.2 → 0.20.0

package/dist/ui/molecules/empty-state/empty-state.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** One sentence: what is not here, and why when it is not obvious. */
+    children: ReactNode;
+    /** The one thing to do about it — create the first record, clear a filter. */
+    action?: ReactNode;
+}
+/**
+ * What a region shows when it holds nothing: one sentence, and at most one way
+ * forward. Not a failure — a region that could not load says so with an
+ * `Alert` instead, because an empty result and a dead backend must never look
+ * alike. Server-safe.
+ */
+export declare function EmptyState({ action, className, children, ...props }: EmptyStateProps): import("react").JSX.Element;
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/ui/molecules/empty-state/empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/empty-state/empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,CACX;IACC,sEAAsE;IACtE,QAAQ,EAAE,SAAS,CAAC;IACpB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,+BAejB"}

package/dist/ui/molecules/empty-state/empty-state.js

@@ -0,0 +1,29 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+/**
+ * What a region shows when it holds nothing: one sentence, and at most one way
+ * forward. Not a failure — a region that could not load says so with an
+ * `Alert` instead, because an empty result and a dead backend must never look
+ * alike. Server-safe.
+ */ export function EmptyState(_0) {
+    let { action, className, children } = _0, props = _object_without_properties_loose(_0, [
+        "action",
+        "className",
+        "children"
+    ]);
+    return /*#__PURE__*/ _jsxs("div", _extends({
+        className: cn('flex flex-col items-center gap-s rounded-lg border border-dashed border-border px-m py-l text-center', className)
+    }, props, {
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                className: "m-0 max-w-(--measure) text-step-sm text-content-muted",
+                children: children
+            }),
+            action
+        ]
+    }));
+}
+
+//# sourceMappingURL=empty-state.js.map

package/dist/ui/molecules/empty-state/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/molecules/empty-state/empty-state.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\n\nimport { cn } from '../../utils/cn.js';\n\nexport interface EmptyStateProps extends Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'children'\n> {\n  /** One sentence: what is not here, and why when it is not obvious. */\n  children: ReactNode;\n  /** The one thing to do about it — create the first record, clear a filter. */\n  action?: ReactNode;\n}\n\n/**\n * What a region shows when it holds nothing: one sentence, and at most one way\n * forward. Not a failure — a region that could not load says so with an\n * `Alert` instead, because an empty result and a dead backend must never look\n * alike. Server-safe.\n */\nexport function EmptyState({\n  action,\n  className,\n  children,\n  ...props\n}: EmptyStateProps) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center gap-s rounded-lg border border-dashed border-border px-m py-l text-center',\n        className,\n      )}\n      {...props}\n    >\n      <p className=\"m-0 max-w-(--measure) text-step-sm text-content-muted\">\n        {children}\n      </p>\n      {action}\n    </div>\n  );\n}\n"],"names":["cn","EmptyState","action","className","children","props","div","p"],"mappings":";;;AAEA,SAASA,EAAE,QAAQ,oBAAoB;AAYvC;;;;;CAKC,GACD,OAAO,SAASC,WAAW,EAKT;QALS,EACzBC,MAAM,EACNC,SAAS,EACTC,QAAQ,EAEQ,OADbC;;;;;IAEH,qBACE,MAACC;QACCH,WAAWH,GACT,wGACAG;OAEEE;;0BAEJ,KAACE;gBAAEJ,WAAU;0BACVC;;YAEFF;;;AAGP"}

package/dist/ui/molecules/empty-state/index.d.ts

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

package/dist/ui/molecules/empty-state/index.d.ts.map

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

package/dist/ui/molecules/empty-state/index.js

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

package/dist/ui/molecules/empty-state/index.js.map

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

package/dist/ui/molecules/entity-link-input/entity-link-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entity-link-input.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/entity-link-input/entity-link-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,MAAM,EACN,qBAAqB,EACrB,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAcvB,MAAM,WAAW,oBAAoB,CAAC,OAAO,SAAS,MAAM;IAC1D,+DAA+D;IAC/D,UAAU,EAAE,qBAAqB,CAAC;IAClC,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,gCAAgC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,OAAO,SAAS,MAAM,EAAE,EACtD,UAAU,EACV,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,EAAE,EACF,QAAgB,GACjB,EAAE,oBAAoB,CAAC,OAAO,CAAC,+BAiJ/B"}
+{"version":3,"file":"entity-link-input.d.ts","sourceRoot":"","sources":["../../../../src/ui/molecules/entity-link-input/entity-link-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,MAAM,EACN,qBAAqB,EACrB,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAcvB,MAAM,WAAW,oBAAoB,CAAC,OAAO,SAAS,MAAM;IAC1D,+DAA+D;IAC/D,UAAU,EAAE,qBAAqB,CAAC;IAClC,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,gCAAgC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,OAAO,SAAS,MAAM,EAAE,EACtD,UAAU,EACV,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,EAAE,EACF,QAAgB,GACjB,EAAE,oBAAoB,CAAC,OAAO,CAAC,+BAoJ/B"}

package/dist/ui/molecules/entity-link-input/entity-link-input.js

@@ -97,7 +97,7 @@ import { LoadingBoundary } from '../loading-boundary/index.js';
                                     disabled: disabled,
                                     onChange: (event)=>source.quick.setTerm(event.currentTarget.value),
                                     className: [
-                                        'w-full rounded-lg border border-border bg-surface-elevated px-2xs py-3xs',
+                                        'min-h-(--target-min) w-full rounded-lg border border-border-control bg-surface-elevated px-2xs py-3xs',
                                         'text-step-sm text-content',
                                         'focus-ring',
                                         'disabled:cursor-not-allowed disabled:opacity-50'
@@ -112,7 +112,7 @@ import { LoadingBoundary } from '../loading-boundary/index.js';
                                 }),
                                 /*#__PURE__*/ _jsxs(ComboboxOptions, {
                                     className: [
-                                        'max-h-64 absolute z-50 mt-3xs w-full overflow-auto',
+                                        'max-h-64 absolute z-(--z-dropdown) mt-3xs w-full overflow-auto',
                                         'rounded-lg border border-border bg-surface-elevated p-3xs shadow-overlay',
                                         // The panel itself is a focus-managed CONTAINER, not a target: the ring
                                         // belongs on the item inside it. Stripping the outline here is
@@ -134,8 +134,11 @@ import { LoadingBoundary } from '../loading-boundary/index.js';
                                         source.quick.options.map((option)=>/*#__PURE__*/ _jsx(ComboboxOption, {
                                                 value: option,
                                                 className: [
-                                                    'cursor-pointer rounded-md px-2xs py-3xs text-step-sm text-content',
-                                                    'data-focus:bg-surface'
+                                                    'flex min-h-(--target-min) cursor-pointer items-center rounded-md border-l-2 border-transparent px-2xs py-3xs text-step-sm text-content',
+                                                    // Active: the focus ring. Chosen but not under the
+                                                    // keyboard: a `selected` edge, 3:1 on the panel.
+                                                    'focus-ring data-focus:bg-surface data-focus:-outline-offset-2',
+                                                    'data-selected:border-selected'
                                                 ].join(' '),
                                                 children: source.labelOf(option)
                                             }, String(option.id)))

package/dist/ui/molecules/entity-link-input/entity-link-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/molecules/entity-link-input/entity-link-input.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  Entity,\n  EntityFieldDescriptor,\n  EntityLinkSource,\n} from '@entifix/core';\nimport {\n  Combobox,\n  ComboboxButton,\n  ComboboxInput,\n  ComboboxOption,\n  ComboboxOptions,\n} from '@headlessui/react';\n\nimport { useErrorMessage, useT } from '../../../i18n/index.js';\nimport { Button } from '../../atoms/button/index.js';\nimport { EntityLinkPicker } from '../entity-link-picker/index.js';\nimport { LoadingBoundary } from '../loading-boundary/index.js';\n\nexport interface EntityLinkInputProps<TTarget extends Entity> {\n  /** The relation being edited. Its label names the controls. */\n  descriptor: EntityFieldDescriptor;\n  /** The held foreign key, as the draft carries it. `''` means unassigned. */\n  value: string;\n  source: EntityLinkSource<TTarget>;\n  /** A target was chosen — in either mode. */\n  onSelect: (entity: TTarget) => void;\n  /** The relation was emptied. */\n  onClear: () => void;\n  /** The id the field's label points at. */\n  id?: string;\n  disabled?: boolean;\n}\n\n/** Chevron — the quick search. Inline so the package ships no icon dependency. */\nfunction ChevronIcon() {\n  return (\n    <svg aria-hidden viewBox=\"0 0 20 20\" className=\"size-4 fill-current\">\n      <path d=\"M5.5 7.5 10 12l4.5-4.5z\" />\n    </svg>\n  );\n}\n\n/** Ellipsis — the browse dialog, the same affordance a desktop app uses. */\nfunction EllipsisIcon() {\n  return (\n    <svg aria-hidden viewBox=\"0 0 20 20\" className=\"size-4 fill-current\">\n      <circle cx=\"4\" cy=\"10\" r=\"1.5\" />\n      <circle cx=\"10\" cy=\"10\" r=\"1.5\" />\n      <circle cx=\"16\" cy=\"10\" r=\"1.5\" />\n    </svg>\n  );\n}\n\n/**\n * The editor for a to-one relation: what the value *is*, plus the two ways to\n * change it.\n *\n * - the chevron opens a type-ahead over the target entity — \"I know roughly what\n *   it is called\";\n * - the ellipsis opens the target's full table in a dialog — \"I need to filter\n *   the catalog to find it\".\n *\n * It is presentational. Every option, loading flag and error arrives through\n * {@link EntityLinkSource}, which the integration layer produces; this component\n * cannot fetch, and never decides how the relation is written back — it reports\n * the chosen instance and the form's reconstruction step applies the entity's own\n * `linkSerialization` policy.\n *\n * The displayed text is the target's label when one is known and the bare foreign\n * key when it is not, so a draft restored before its label resolves still shows\n * *something* true rather than an empty box.\n */\nexport function EntityLinkInput<TTarget extends Entity>({\n  descriptor,\n  value,\n  source,\n  onSelect,\n  onClear,\n  id,\n  disabled = false,\n}: EntityLinkInputProps<TTarget>) {\n  const t = useT();\n  const errorMessage = useErrorMessage();\n\n  const assigned = value !== '';\n  const label = source.selected.label ?? (assigned ? value : '');\n  const display = source.selected.isLoading\n    ? t('link.loading')\n    : label === ''\n      ? t('link.empty')\n      : label;\n\n  /**\n   * Headless UI reports `null` when the search is abandoned (escape, blur). That\n   * is not a request to empty the relation — clearing is the explicit action\n   * beside the input — so it leaves the held value alone.\n   */\n  const handleSelect = (entity: TTarget | null) => {\n    if (entity === null) return;\n    onSelect(entity);\n    source.quick.setTerm('');\n  };\n\n  return (\n    <div className=\"flex flex-col gap-3xs\">\n      <div className=\"flex items-stretch gap-3xs\">\n        <div className=\"relative flex-1\">\n          <Combobox<TTarget | null>\n            value={null}\n            onChange={handleSelect}\n            disabled={disabled}\n            immediate\n          >\n            {/*\n            The input edits the *search term*, never the value: the value is a\n            foreign key, which is not something a user types. So it displays the\n            resolved label while idle and the term while searching.\n          */}\n            <ComboboxInput\n              id={id}\n              aria-label={t('link.search', { field: descriptor.label })}\n              placeholder={display}\n              value={source.quick.term}\n              disabled={disabled}\n              onChange={event =>\n                source.quick.setTerm(event.currentTarget.value)\n              }\n              className={[\n                'w-full rounded-lg border border-border bg-surface-elevated px-2xs py-3xs',\n                'text-step-sm text-content',\n                'focus-ring',\n                'disabled:cursor-not-allowed disabled:opacity-50',\n              ].join(' ')}\n            />\n            <ComboboxButton\n              aria-label={t('link.suggestAria', { field: descriptor.label })}\n              className=\"inset-y-0 right-0 absolute flex items-center px-2xs text-content-muted\"\n            >\n              <ChevronIcon />\n            </ComboboxButton>\n            <ComboboxOptions\n              className={[\n                'max-h-64 absolute z-50 mt-3xs w-full overflow-auto',\n                'rounded-lg border border-border bg-surface-elevated p-3xs shadow-overlay',\n                // The panel itself is a focus-managed CONTAINER, not a target: the ring\n                // belongs on the item inside it. Stripping the outline here is\n                // correct, and is not a missing `focus-ring`.\n                'focus:outline-none',\n              ].join(' ')}\n            >\n              {source.quick.isLoading && (\n                <LoadingBoundary\n                  isLoading\n                  lines={2}\n                  label={t('link.loading')}\n                  className=\"px-2xs py-3xs\"\n                >\n                  {null}\n                </LoadingBoundary>\n              )}\n              {!source.quick.isLoading && source.quick.options.length === 0 && (\n                <div className=\"px-2xs py-3xs text-step-sm text-content-muted\">\n                  {t('link.noResults')}\n                </div>\n              )}\n              {source.quick.options.map(option => (\n                <ComboboxOption\n                  key={String(option.id)}\n                  value={option}\n                  className={[\n                    'cursor-pointer rounded-md px-2xs py-3xs text-step-sm text-content',\n                    'data-focus:bg-surface',\n                  ].join(' ')}\n                >\n                  {source.labelOf(option)}\n                </ComboboxOption>\n              ))}\n            </ComboboxOptions>\n          </Combobox>\n        </div>\n\n        <Button\n          type=\"button\"\n          variant=\"secondary\"\n          size=\"sm\"\n          disabled={disabled}\n          aria-label={t('link.browseAria', { field: descriptor.label })}\n          onClick={source.browse.open}\n        >\n          <EllipsisIcon />\n        </Button>\n        {/* Clearing is only offered when there is something to clear — and a\n            required relation still offers it, because `required` is the form's\n            rule to report, not the input's to enforce. */}\n        {assigned && !disabled && (\n          <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onClear}>\n            {t('link.clear', { field: descriptor.label })}\n          </Button>\n        )}\n      </div>\n\n      {/* The held value, always readable — the combobox input shows the term. */}\n      <span\n        data-testid={`entity-link-value-${descriptor.name}`}\n        className=\"text-step-sm text-content\"\n      >\n        {display}\n      </span>\n\n      {source.quick.error && (\n        <span role=\"alert\" className=\"text-step-sm text-danger\">\n          {errorMessage(source.quick.error)}\n        </span>\n      )}\n\n      <EntityLinkPicker<TTarget>\n        descriptor={descriptor}\n        source={source}\n        onSelect={entity => {\n          onSelect(entity);\n          source.browse.close();\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["Combobox","ComboboxButton","ComboboxInput","ComboboxOption","ComboboxOptions","useErrorMessage","useT","Button","EntityLinkPicker","LoadingBoundary","ChevronIcon","svg","aria-hidden","viewBox","className","path","d","EllipsisIcon","circle","cx","cy","r","EntityLinkInput","descriptor","value","source","onSelect","onClear","id","disabled","t","errorMessage","assigned","label","selected","display","isLoading","handleSelect","entity","quick","setTerm","div","onChange","immediate","aria-label","field","placeholder","term","event","currentTarget","join","lines","options","length","map","option","labelOf","String","type","variant","size","onClick","browse","open","span","data-testid","name","error","role","close"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/ui/molecules/entity-link-input/entity-link-input.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  Entity,\n  EntityFieldDescriptor,\n  EntityLinkSource,\n} from '@entifix/core';\nimport {\n  Combobox,\n  ComboboxButton,\n  ComboboxInput,\n  ComboboxOption,\n  ComboboxOptions,\n} from '@headlessui/react';\n\nimport { useErrorMessage, useT } from '../../../i18n/index.js';\nimport { Button } from '../../atoms/button/index.js';\nimport { EntityLinkPicker } from '../entity-link-picker/index.js';\nimport { LoadingBoundary } from '../loading-boundary/index.js';\n\nexport interface EntityLinkInputProps<TTarget extends Entity> {\n  /** The relation being edited. Its label names the controls. */\n  descriptor: EntityFieldDescriptor;\n  /** The held foreign key, as the draft carries it. `''` means unassigned. */\n  value: string;\n  source: EntityLinkSource<TTarget>;\n  /** A target was chosen — in either mode. */\n  onSelect: (entity: TTarget) => void;\n  /** The relation was emptied. */\n  onClear: () => void;\n  /** The id the field's label points at. */\n  id?: string;\n  disabled?: boolean;\n}\n\n/** Chevron — the quick search. Inline so the package ships no icon dependency. */\nfunction ChevronIcon() {\n  return (\n    <svg aria-hidden viewBox=\"0 0 20 20\" className=\"size-4 fill-current\">\n      <path d=\"M5.5 7.5 10 12l4.5-4.5z\" />\n    </svg>\n  );\n}\n\n/** Ellipsis — the browse dialog, the same affordance a desktop app uses. */\nfunction EllipsisIcon() {\n  return (\n    <svg aria-hidden viewBox=\"0 0 20 20\" className=\"size-4 fill-current\">\n      <circle cx=\"4\" cy=\"10\" r=\"1.5\" />\n      <circle cx=\"10\" cy=\"10\" r=\"1.5\" />\n      <circle cx=\"16\" cy=\"10\" r=\"1.5\" />\n    </svg>\n  );\n}\n\n/**\n * The editor for a to-one relation: what the value *is*, plus the two ways to\n * change it.\n *\n * - the chevron opens a type-ahead over the target entity — \"I know roughly what\n *   it is called\";\n * - the ellipsis opens the target's full table in a dialog — \"I need to filter\n *   the catalog to find it\".\n *\n * It is presentational. Every option, loading flag and error arrives through\n * {@link EntityLinkSource}, which the integration layer produces; this component\n * cannot fetch, and never decides how the relation is written back — it reports\n * the chosen instance and the form's reconstruction step applies the entity's own\n * `linkSerialization` policy.\n *\n * The displayed text is the target's label when one is known and the bare foreign\n * key when it is not, so a draft restored before its label resolves still shows\n * *something* true rather than an empty box.\n */\nexport function EntityLinkInput<TTarget extends Entity>({\n  descriptor,\n  value,\n  source,\n  onSelect,\n  onClear,\n  id,\n  disabled = false,\n}: EntityLinkInputProps<TTarget>) {\n  const t = useT();\n  const errorMessage = useErrorMessage();\n\n  const assigned = value !== '';\n  const label = source.selected.label ?? (assigned ? value : '');\n  const display = source.selected.isLoading\n    ? t('link.loading')\n    : label === ''\n      ? t('link.empty')\n      : label;\n\n  /**\n   * Headless UI reports `null` when the search is abandoned (escape, blur). That\n   * is not a request to empty the relation — clearing is the explicit action\n   * beside the input — so it leaves the held value alone.\n   */\n  const handleSelect = (entity: TTarget | null) => {\n    if (entity === null) return;\n    onSelect(entity);\n    source.quick.setTerm('');\n  };\n\n  return (\n    <div className=\"flex flex-col gap-3xs\">\n      <div className=\"flex items-stretch gap-3xs\">\n        <div className=\"relative flex-1\">\n          <Combobox<TTarget | null>\n            value={null}\n            onChange={handleSelect}\n            disabled={disabled}\n            immediate\n          >\n            {/*\n            The input edits the *search term*, never the value: the value is a\n            foreign key, which is not something a user types. So it displays the\n            resolved label while idle and the term while searching.\n          */}\n            <ComboboxInput\n              id={id}\n              aria-label={t('link.search', { field: descriptor.label })}\n              placeholder={display}\n              value={source.quick.term}\n              disabled={disabled}\n              onChange={event =>\n                source.quick.setTerm(event.currentTarget.value)\n              }\n              className={[\n                'min-h-(--target-min) w-full rounded-lg border border-border-control bg-surface-elevated px-2xs py-3xs',\n                'text-step-sm text-content',\n                'focus-ring',\n                'disabled:cursor-not-allowed disabled:opacity-50',\n              ].join(' ')}\n            />\n            <ComboboxButton\n              aria-label={t('link.suggestAria', { field: descriptor.label })}\n              className=\"inset-y-0 right-0 absolute flex items-center px-2xs text-content-muted\"\n            >\n              <ChevronIcon />\n            </ComboboxButton>\n            <ComboboxOptions\n              className={[\n                'max-h-64 absolute z-(--z-dropdown) mt-3xs w-full overflow-auto',\n                'rounded-lg border border-border bg-surface-elevated p-3xs shadow-overlay',\n                // The panel itself is a focus-managed CONTAINER, not a target: the ring\n                // belongs on the item inside it. Stripping the outline here is\n                // correct, and is not a missing `focus-ring`.\n                'focus:outline-none',\n              ].join(' ')}\n            >\n              {source.quick.isLoading && (\n                <LoadingBoundary\n                  isLoading\n                  lines={2}\n                  label={t('link.loading')}\n                  className=\"px-2xs py-3xs\"\n                >\n                  {null}\n                </LoadingBoundary>\n              )}\n              {!source.quick.isLoading && source.quick.options.length === 0 && (\n                <div className=\"px-2xs py-3xs text-step-sm text-content-muted\">\n                  {t('link.noResults')}\n                </div>\n              )}\n              {source.quick.options.map(option => (\n                <ComboboxOption\n                  key={String(option.id)}\n                  value={option}\n                  className={[\n                    'flex min-h-(--target-min) cursor-pointer items-center rounded-md border-l-2 border-transparent px-2xs py-3xs text-step-sm text-content',\n                    // Active: the focus ring. Chosen but not under the\n                    // keyboard: a `selected` edge, 3:1 on the panel.\n                    'focus-ring data-focus:bg-surface data-focus:-outline-offset-2',\n                    'data-selected:border-selected',\n                  ].join(' ')}\n                >\n                  {source.labelOf(option)}\n                </ComboboxOption>\n              ))}\n            </ComboboxOptions>\n          </Combobox>\n        </div>\n\n        <Button\n          type=\"button\"\n          variant=\"secondary\"\n          size=\"sm\"\n          disabled={disabled}\n          aria-label={t('link.browseAria', { field: descriptor.label })}\n          onClick={source.browse.open}\n        >\n          <EllipsisIcon />\n        </Button>\n        {/* Clearing is only offered when there is something to clear — and a\n            required relation still offers it, because `required` is the form's\n            rule to report, not the input's to enforce. */}\n        {assigned && !disabled && (\n          <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onClear}>\n            {t('link.clear', { field: descriptor.label })}\n          </Button>\n        )}\n      </div>\n\n      {/* The held value, always readable — the combobox input shows the term. */}\n      <span\n        data-testid={`entity-link-value-${descriptor.name}`}\n        className=\"text-step-sm text-content\"\n      >\n        {display}\n      </span>\n\n      {source.quick.error && (\n        <span role=\"alert\" className=\"text-step-sm text-danger\">\n          {errorMessage(source.quick.error)}\n        </span>\n      )}\n\n      <EntityLinkPicker<TTarget>\n        descriptor={descriptor}\n        source={source}\n        onSelect={entity => {\n          onSelect(entity);\n          source.browse.close();\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["Combobox","ComboboxButton","ComboboxInput","ComboboxOption","ComboboxOptions","useErrorMessage","useT","Button","EntityLinkPicker","LoadingBoundary","ChevronIcon","svg","aria-hidden","viewBox","className","path","d","EllipsisIcon","circle","cx","cy","r","EntityLinkInput","descriptor","value","source","onSelect","onClear","id","disabled","t","errorMessage","assigned","label","selected","display","isLoading","handleSelect","entity","quick","setTerm","div","onChange","immediate","aria-label","field","placeholder","term","event","currentTarget","join","lines","options","length","map","option","labelOf","String","type","variant","size","onClick","browse","open","span","data-testid","name","error","role","close"],"mappings":"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"}

package/dist/ui/molecules/entity-link-picker/entity-link-picker.js

@@ -23,11 +23,11 @@ import { EntityTable } from '../../organisms/entity-table/index.js';
     /*#__PURE__*/ _jsxs(Dialog, {
         open: browse.isOpen,
         onClose: browse.close,
-        className: "inset-0 fixed z-50 flex items-start justify-center overflow-y-auto p-s",
+        className: "inset-0 fixed z-(--z-overlay) flex items-start justify-center overflow-y-auto p-s",
         children: [
             /*#__PURE__*/ _jsx("div", {
                 "aria-hidden": true,
-                className: "inset-0 bg-black/40 fixed"
+                className: "inset-0 fixed bg-scrim"
             }),
             /*#__PURE__*/ _jsxs(DialogPanel, {
                 className: "max-w-4xl relative w-full rounded-lg border border-border bg-surface p-s shadow-overlay",

package/dist/ui/molecules/entity-link-picker/entity-link-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/molecules/entity-link-picker/entity-link-picker.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  Entity,\n  EntityFieldDescriptor,\n  EntityLinkSource,\n} from '@entifix/core';\nimport { Dialog, DialogPanel, DialogTitle } from '@headlessui/react';\n\nimport { useT } from '../../../i18n/index.js';\nimport { Button } from '../../atoms/button/index.js';\nimport { EntityTable } from '../../organisms/entity-table/index.js';\n\nexport interface EntityLinkPickerProps<TTarget extends Entity> {\n  /** The relation being set — its label names the dialog. */\n  descriptor: EntityFieldDescriptor;\n  source: EntityLinkSource<TTarget>;\n  onSelect: (entity: TTarget) => void;\n}\n\n/**\n * The thorough half of setting a relation: the target entity's own table, with\n * its filters, sorting and paging, inside a dialog.\n *\n * It adds nothing to the table — that is the point. A picker that re-implemented\n * filtering would drift from the listing the user already knows, so this mounts\n * the same `EntityTable` and swaps navigation for selection through `onSelect`.\n * Everything it renders comes from `source.browse`, so it holds no fetch of its\n * own.\n */\nexport function EntityLinkPicker<TTarget extends Entity>({\n  descriptor,\n  source,\n  onSelect,\n}: EntityLinkPickerProps<TTarget>) {\n  const t = useT();\n  const { browse } = source;\n\n  return (\n    // The dialog element itself fills the viewport rather than wrapping a\n    // `fixed` child in a `relative` box: a zero-sized dialog is invisible to\n    // anything measuring it — assistive tech and Playwright alike — even with a\n    // painted panel inside it.\n    <Dialog\n      open={browse.isOpen}\n      onClose={browse.close}\n      className=\"inset-0 fixed z-50 flex items-start justify-center overflow-y-auto p-s\"\n    >\n      {/* Backdrop and panel are separate so a click outside closes the dialog\n          without the table's own clicks bubbling into it. */}\n      <div aria-hidden className=\"inset-0 bg-black/40 fixed\" />\n      <DialogPanel className=\"max-w-4xl relative w-full rounded-lg border border-border bg-surface p-s shadow-overlay\">\n        <div className=\"flex items-center justify-between gap-s\">\n          <DialogTitle className=\"text-step-1 font-semibold text-content\">\n            {t('link.browseTitle', { field: descriptor.label })}\n          </DialogTitle>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={browse.close}\n          >\n            {t('link.close')}\n          </Button>\n        </div>\n\n        <EntityTable<TTarget>\n          entityConstructor={source.entityConstructor}\n          isLoading={browse.isLoading}\n          error={browse.error}\n          items={browse.items}\n          totalItems={browse.totalItems}\n          currentPage={browse.currentPage}\n          pageSize={browse.pageSize}\n          onPageChange={browse.onPageChange}\n          onPageSizeChange={browse.onPageSizeChange}\n          filtering={browse.filtering}\n          sorting={browse.sorting}\n          onFilteringChange={browse.onFilteringChange}\n          onSortingChange={browse.onSortingChange}\n          onSelect={onSelect}\n          // Scoped so a picker's column personalization does not overwrite the\n          // one the user set on the full listing of the same entity.\n          preferencesKey={`link-picker:${descriptor.name}`}\n        />\n      </DialogPanel>\n    </Dialog>\n  );\n}\n"],"names":["Dialog","DialogPanel","DialogTitle","useT","Button","EntityTable","EntityLinkPicker","descriptor","source","onSelect","t","browse","open","isOpen","onClose","close","className","div","aria-hidden","field","label","type","variant","size","onClick","entityConstructor","isLoading","error","items","totalItems","currentPage","pageSize","onPageChange","onPageSizeChange","filtering","sorting","onFilteringChange","onSortingChange","preferencesKey","name"],"mappings":"AAAA;;AAOA,SAASA,MAAM,EAAEC,WAAW,EAAEC,WAAW,QAAQ,oBAAoB;AAErE,SAASC,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,MAAM,QAAQ,8BAA8B;AACrD,SAASC,WAAW,QAAQ,wCAAwC;AASpE;;;;;;;;;CASC,GACD,OAAO,SAASC,iBAAyC,EACvDC,UAAU,EACVC,MAAM,EACNC,QAAQ,EACuB;IAC/B,MAAMC,IAAIP;IACV,MAAM,EAAEQ,MAAM,EAAE,GAAGH;IAEnB,OACE,sEAAsE;IACtE,yEAAyE;IACzE,4EAA4E;IAC5E,2BAA2B;kBAC3B,MAACR;QACCY,MAAMD,OAAOE,MAAM;QACnBC,SAASH,OAAOI,KAAK;QACrBC,WAAU;;0BAIV,KAACC;gBAAIC,aAAW;gBAACF,WAAU;;0BAC3B,MAACf;gBAAYe,WAAU;;kCACrB,MAACC;wBAAID,WAAU;;0CACb,KAACd;gCAAYc,WAAU;0CACpBN,EAAE,oBAAoB;oCAAES,OAAOZ,WAAWa,KAAK;gCAAC;;0CAEnD,KAAChB;gCACCiB,MAAK;gCACLC,SAAQ;gCACRC,MAAK;gCACLC,SAASb,OAAOI,KAAK;0CAEpBL,EAAE;;;;kCAIP,KAACL;wBACCoB,mBAAmBjB,OAAOiB,iBAAiB;wBAC3CC,WAAWf,OAAOe,SAAS;wBAC3BC,OAAOhB,OAAOgB,KAAK;wBACnBC,OAAOjB,OAAOiB,KAAK;wBACnBC,YAAYlB,OAAOkB,UAAU;wBAC7BC,aAAanB,OAAOmB,WAAW;wBAC/BC,UAAUpB,OAAOoB,QAAQ;wBACzBC,cAAcrB,OAAOqB,YAAY;wBACjCC,kBAAkBtB,OAAOsB,gBAAgB;wBACzCC,WAAWvB,OAAOuB,SAAS;wBAC3BC,SAASxB,OAAOwB,OAAO;wBACvBC,mBAAmBzB,OAAOyB,iBAAiB;wBAC3CC,iBAAiB1B,OAAO0B,eAAe;wBACvC5B,UAAUA;wBACV,qEAAqE;wBACrE,2DAA2D;wBAC3D6B,gBAAgB,CAAC,YAAY,EAAE/B,WAAWgC,IAAI,EAAE;;;;;;AAK1D"}
+{"version":3,"sources":["../../../../src/ui/molecules/entity-link-picker/entity-link-picker.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  Entity,\n  EntityFieldDescriptor,\n  EntityLinkSource,\n} from '@entifix/core';\nimport { Dialog, DialogPanel, DialogTitle } from '@headlessui/react';\n\nimport { useT } from '../../../i18n/index.js';\nimport { Button } from '../../atoms/button/index.js';\nimport { EntityTable } from '../../organisms/entity-table/index.js';\n\nexport interface EntityLinkPickerProps<TTarget extends Entity> {\n  /** The relation being set — its label names the dialog. */\n  descriptor: EntityFieldDescriptor;\n  source: EntityLinkSource<TTarget>;\n  onSelect: (entity: TTarget) => void;\n}\n\n/**\n * The thorough half of setting a relation: the target entity's own table, with\n * its filters, sorting and paging, inside a dialog.\n *\n * It adds nothing to the table — that is the point. A picker that re-implemented\n * filtering would drift from the listing the user already knows, so this mounts\n * the same `EntityTable` and swaps navigation for selection through `onSelect`.\n * Everything it renders comes from `source.browse`, so it holds no fetch of its\n * own.\n */\nexport function EntityLinkPicker<TTarget extends Entity>({\n  descriptor,\n  source,\n  onSelect,\n}: EntityLinkPickerProps<TTarget>) {\n  const t = useT();\n  const { browse } = source;\n\n  return (\n    // The dialog element itself fills the viewport rather than wrapping a\n    // `fixed` child in a `relative` box: a zero-sized dialog is invisible to\n    // anything measuring it — assistive tech and Playwright alike — even with a\n    // painted panel inside it.\n    <Dialog\n      open={browse.isOpen}\n      onClose={browse.close}\n      className=\"inset-0 fixed z-(--z-overlay) flex items-start justify-center overflow-y-auto p-s\"\n    >\n      {/* Backdrop and panel are separate so a click outside closes the dialog\n          without the table's own clicks bubbling into it. */}\n      <div aria-hidden className=\"inset-0 fixed bg-scrim\" />\n      <DialogPanel className=\"max-w-4xl relative w-full rounded-lg border border-border bg-surface p-s shadow-overlay\">\n        <div className=\"flex items-center justify-between gap-s\">\n          <DialogTitle className=\"text-step-1 font-semibold text-content\">\n            {t('link.browseTitle', { field: descriptor.label })}\n          </DialogTitle>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={browse.close}\n          >\n            {t('link.close')}\n          </Button>\n        </div>\n\n        <EntityTable<TTarget>\n          entityConstructor={source.entityConstructor}\n          isLoading={browse.isLoading}\n          error={browse.error}\n          items={browse.items}\n          totalItems={browse.totalItems}\n          currentPage={browse.currentPage}\n          pageSize={browse.pageSize}\n          onPageChange={browse.onPageChange}\n          onPageSizeChange={browse.onPageSizeChange}\n          filtering={browse.filtering}\n          sorting={browse.sorting}\n          onFilteringChange={browse.onFilteringChange}\n          onSortingChange={browse.onSortingChange}\n          onSelect={onSelect}\n          // Scoped so a picker's column personalization does not overwrite the\n          // one the user set on the full listing of the same entity.\n          preferencesKey={`link-picker:${descriptor.name}`}\n        />\n      </DialogPanel>\n    </Dialog>\n  );\n}\n"],"names":["Dialog","DialogPanel","DialogTitle","useT","Button","EntityTable","EntityLinkPicker","descriptor","source","onSelect","t","browse","open","isOpen","onClose","close","className","div","aria-hidden","field","label","type","variant","size","onClick","entityConstructor","isLoading","error","items","totalItems","currentPage","pageSize","onPageChange","onPageSizeChange","filtering","sorting","onFilteringChange","onSortingChange","preferencesKey","name"],"mappings":"AAAA;;AAOA,SAASA,MAAM,EAAEC,WAAW,EAAEC,WAAW,QAAQ,oBAAoB;AAErE,SAASC,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,MAAM,QAAQ,8BAA8B;AACrD,SAASC,WAAW,QAAQ,wCAAwC;AASpE;;;;;;;;;CASC,GACD,OAAO,SAASC,iBAAyC,EACvDC,UAAU,EACVC,MAAM,EACNC,QAAQ,EACuB;IAC/B,MAAMC,IAAIP;IACV,MAAM,EAAEQ,MAAM,EAAE,GAAGH;IAEnB,OACE,sEAAsE;IACtE,yEAAyE;IACzE,4EAA4E;IAC5E,2BAA2B;kBAC3B,MAACR;QACCY,MAAMD,OAAOE,MAAM;QACnBC,SAASH,OAAOI,KAAK;QACrBC,WAAU;;0BAIV,KAACC;gBAAIC,aAAW;gBAACF,WAAU;;0BAC3B,MAACf;gBAAYe,WAAU;;kCACrB,MAACC;wBAAID,WAAU;;0CACb,KAACd;gCAAYc,WAAU;0CACpBN,EAAE,oBAAoB;oCAAES,OAAOZ,WAAWa,KAAK;gCAAC;;0CAEnD,KAAChB;gCACCiB,MAAK;gCACLC,SAAQ;gCACRC,MAAK;gCACLC,SAASb,OAAOI,KAAK;0CAEpBL,EAAE;;;;kCAIP,KAACL;wBACCoB,mBAAmBjB,OAAOiB,iBAAiB;wBAC3CC,WAAWf,OAAOe,SAAS;wBAC3BC,OAAOhB,OAAOgB,KAAK;wBACnBC,OAAOjB,OAAOiB,KAAK;wBACnBC,YAAYlB,OAAOkB,UAAU;wBAC7BC,aAAanB,OAAOmB,WAAW;wBAC/BC,UAAUpB,OAAOoB,QAAQ;wBACzBC,cAAcrB,OAAOqB,YAAY;wBACjCC,kBAAkBtB,OAAOsB,gBAAgB;wBACzCC,WAAWvB,OAAOuB,SAAS;wBAC3BC,SAASxB,OAAOwB,OAAO;wBACvBC,mBAAmBzB,OAAOyB,iBAAiB;wBAC3CC,iBAAiB1B,OAAO0B,eAAe;wBACvC5B,UAAUA;wBACV,qEAAqE;wBACrE,2DAA2D;wBAC3D6B,gBAAgB,CAAC,YAAY,EAAE/B,WAAWgC,IAAI,EAAE;;;;;;AAK1D"}

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))
             ]
         });