@eifi1/ui-kit 0.5.0 → 0.6.0

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/** The panel's accessible name. A `role=\"dialog\"` with no name announces as \"dialog\"\n *  and nothing else, which is worse than the unlabelled div it replaced — so it is a\n *  prop with an English default, like every other string this package renders. Callers\n *  should pass the control's own name (\"Filter\", \"Choose a date\"); the default is only\n *  there so an unmigrated call site is still named. */\nexport interface PopoverLabels {\n  panel: string;\n}\n\n// Exported since the kit grew one label tree (`UiKitLabels`, src/i18n): the complete\n// English reference a translator works from has to be able to name every namespace.\nexport const DEFAULT_POPOVER_LABELS: PopoverLabels = {\n  panel: \"Popover\",\n};\n\n/**\n * Exported, and extending the `<div>` attributes, so a consumer wrapping this — which is\n * what `DateField` and `FilterPopover` in this very package do — can hand anything\n * through to the PANEL: a `data-tour` anchor for the kit's own guided tour, a test id,\n * an `aria-describedby`, or an `aria-label` naming this particular popover.\n *\n * `children` is omitted from those attributes rather than inherited: here it is a render\n * prop taking the panel's `close`, not a `ReactNode`, so the two cannot be reconciled.\n */\nexport interface PopoverProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  width?: number;\n  labels?: Partial<PopoverLabels>;\n  /** Id for the panel, so a trigger wearing `role=\"combobox\"` can `aria-controls` it.\n   *  Required by ARIA on that role, and the panel is rendered here rather than by the\n   *  caller, so the id has to come in from outside. */\n  panelId?: string;\n  /** Extra classes for the PANEL. The trigger is the caller's own element. */\n  className?: string;\n}\n\nconst POPOVER_WIDTH = 288;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n *\n * ## Trapped, not merely focused — and why, because it is the closer call\n *\n * The audit's finding was that this panel *\"portals out of the tab order with no role\n * and no focus move\"*: Tab from the trigger went straight past the panel into the page\n * behind it, so the calendar, the calculator keypad and every column filter in the kit\n * were mouse-only. Two shapes fix that, and a popover is not automatically a dialog, so\n * this was chosen rather than inherited:\n *\n *  - **The light one** — move focus in on open, hand it back on close, and let Tab walk\n *    OUT of the panel into whatever follows the trigger. That is the right shape for a\n *    non-modal popover sitting inline in the document.\n *  - **The trap** — Tab cycles inside the panel; Escape and a click outside are the\n *    ways out. What is here.\n *\n * The deciding fact is the portal. This panel is rendered to the END of `<body>`, not\n * beside its trigger, so \"let Tab walk out\" does not mean \"carry on from the trigger\" —\n * it means land at the end of the document, several hundred controls from where the\n * user was. Tabbing out of it would be a worse place to arrive than the one the finding\n * complains about, and fixing that properly needs a sentinel-and-return dance that\n * nothing in this package has. The trap gets the user back to the trigger every time,\n * because `useFocusTrap` restores focus on close.\n *\n * And the panels this kit actually opens are self-contained: pick a date, tap out a\n * sum, narrow a column. Each of them commits and closes, and each already has two\n * documented ways out wired above — Escape and an outside press — so containment costs\n * a keyboard user nothing they had.\n *\n * **It stays non-modal in every other respect**, deliberately: no backdrop, no body\n * scroll lock, and no `aria-modal`, so the page behind is still readable by a screen\n * reader, still scrollable, and still clickable — clicking it is what dismisses this.\n * Only Tab is contained. A popover that took the page away as well would be a\n * {@link Modal}, and there is one of those.\n */\nexport function Popover({\n  trigger,\n  children,\n  width = POPOVER_WIDTH,\n  labels,\n  panelId,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  const close = () => setOpen(false);\n  const toggle = () => setOpen((v) => !v);\n  // prop > `<UiKitProvider labels={{ popover }}>` > English. The provider's\n  // `popover.panel` is only the last-resort name for a panel no caller named.\n  const text = useKitLabels(\"popover\", DEFAULT_POPOVER_LABELS, labels);\n\n  // Align the panel's right edge to the trigger's and clamp it horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  const pos = rect\n    ? {\n        top: placement.top,\n        left: Math.min(Math.max(8, rect.right - width), window.innerWidth - width - 8),\n      }\n    : null;\n\n  useOutsideClick([triggerRef, panelRef], close, open);\n  useEscapeKey(close, open);\n\n  useFocusTrap(panelRef, {\n    active: open && pos !== null,\n    // The panel keeps a focus one of its own children has already taken. `FilterPopover`\n    // autofocuses its text box on mount — that is what the press on \"Filter\" was FOR,\n    // and it is a prop there precisely so the popover keeps it — and a trap that\n    // unconditionally focused the container would take it straight back off again,\n    // one effect later and invisibly.\n    initialFocus: () => {\n      const panel = panelRef.current;\n      const active = document.activeElement;\n      return panel?.contains(active) ? (active as HTMLElement) : panel;\n    },\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\") return;\n    // `useEscapeKey` above listens on the document and still covers the case where\n    // focus somehow is not in here. This handler is for the case that focus IS, which\n    // is now the normal one — and it exists to STOP the key, because a popover opened\n    // from inside a `Modal` (the calculator on an amount field is exactly that) would\n    // otherwise have its Escape travel on up the React tree and close the dialog\n    // underneath as well. Closing twice is harmless — `close` is a state setter, not a\n    // caller's callback — so the two paths cannot double-fire anything.\n    e.stopPropagation();\n    close();\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open && pos &&\n        createPortal(\n          <div\n            // `...rest` first: the role, the id the trigger's `aria-controls` points at,\n            // the `tabIndex` the trap needs and the measured position are what make this\n            // a popover, and a caller reaching for a `data-tour` anchor must not be able\n            // to remove one of them by accident.\n            {...rest}\n            ref={panelRef}\n            role=\"dialog\"\n            id={panelId}\n            // The caller's own `aria-label` wins over {@link PopoverLabels.panel}, which\n            // is the package's English fallback for an unnamed panel. Both name the same\n            // element; the DOM spelling is the one being standardised on, so where both\n            // are present it is the one that survives.\n            aria-label={ariaLabel ?? text.panel}\n            // Without it the panel cannot take focus at all, and the trap above would\n            // silently do nothing on a panel whose children are not yet tabbable.\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            style={{\n              // Merged over the caller's, never replaced by it: these four are measured\n              // against the trigger every scroll and resize, and a panel that dropped\n              // them would paint at the top-left of the viewport.\n              ...style,\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              width,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":";AAsJI,mBAIM,KAJN;AAtJJ,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,cAAc,uBAAuB;AAC9C,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAatB,MAAM,yBAAwC;AAAA,EACnD,OAAO;AACT;AAwBA,MAAM,gBAAgB;AAwCf,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAiB;AACf,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,QAAM,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAGtC,QAAM,OAAO,aAAa,WAAW,wBAAwB,MAAM;AAMnE,QAAM,YAAY,iBAAiB,YAAY,IAAI;AACnD,QAAM,OAAO,UAAU;AACvB,QAAM,MAAM,OACR;AAAA,IACE,KAAK,UAAU;AAAA,IACf,MAAM,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,QAAQ,KAAK,GAAG,OAAO,aAAa,QAAQ,CAAC;AAAA,EAC/E,IACA;AAEJ,kBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,IAAI;AACnD,eAAa,OAAO,IAAI;AAExB,eAAa,UAAU;AAAA,IACrB,QAAQ,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxB,cAAc,MAAM;AAClB,YAAM,QAAQ,SAAS;AACvB,YAAM,SAAS,SAAS;AACxB,aAAO,OAAO,SAAS,MAAM,IAAK,SAAyB;AAAA,IAC7D;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,CAAC,MAAqC;AAC1D,QAAI,EAAE,QAAQ,SAAU;AAQxB,MAAE,gBAAgB;AAClB,UAAM;AAAA,EACR;AAEA,SACE,iCACG;AAAA,YAAQ,EAAE,MAAM,QAAQ,KAAK,WAAW,CAAC;AAAA,IACzC,QAAQ,OACP;AAAA,MACE;AAAA,QAAC;AAAA;AAAA,UAKE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL,IAAI;AAAA,UAKJ,cAAY,aAAa,KAAK;AAAA,UAG9B,UAAU;AAAA,UACV,WAAW;AAAA,UACX,OAAO;AAAA;AAAA;AAAA;AAAA,YAIL,GAAG;AAAA,YACH,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM,IAAI;AAAA,YACV;AAAA,YACA,WAAW,UAAU;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UAEC,mBAAS,KAAK;AAAA;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/** The panel's accessible name. A `role=\"dialog\"` with no name announces as \"dialog\"\n *  and nothing else, which is worse than the unlabelled div it replaced — so it is a\n *  prop with an English default, like every other string this package renders. Callers\n *  should pass the control's own name (\"Filter\", \"Choose a date\"); the default is only\n *  there so an unmigrated call site is still named. */\nexport interface PopoverLabels {\n  panel: string;\n}\n\n// Exported since the kit grew one label tree (`UiKitLabels`, src/i18n): the complete\n// English reference a translator works from has to be able to name every namespace.\nexport const DEFAULT_POPOVER_LABELS: PopoverLabels = {\n  // \"Pop-up\", not \"Popover\": the panel's accessible name is read to USERS, and\n  // \"popover\" is a developer's word for it (reported by keksdose, 0.5.0). Only a\n  // bare Popover falls back to this — the kit's own pickers name their panels.\n  panel: \"Pop-up\",\n};\n\n/**\n * Exported, and extending the `<div>` attributes, so a consumer wrapping this — which is\n * what `DateField` and `FilterPopover` in this very package do — can hand anything\n * through to the PANEL: a `data-tour` anchor for the kit's own guided tour, a test id,\n * an `aria-describedby`, or an `aria-label` naming this particular popover.\n *\n * `children` is omitted from those attributes rather than inherited: here it is a render\n * prop taking the panel's `close`, not a `ReactNode`, so the two cannot be reconciled.\n */\nexport interface PopoverProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  width?: number;\n  labels?: Partial<PopoverLabels>;\n  /** Id for the panel, so a trigger wearing `role=\"combobox\"` can `aria-controls` it.\n   *  Required by ARIA on that role, and the panel is rendered here rather than by the\n   *  caller, so the id has to come in from outside. */\n  panelId?: string;\n  /** Extra classes for the PANEL. The trigger is the caller's own element. */\n  className?: string;\n}\n\nconst POPOVER_WIDTH = 288;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n *\n * ## Trapped, not merely focused — and why, because it is the closer call\n *\n * The audit's finding was that this panel *\"portals out of the tab order with no role\n * and no focus move\"*: Tab from the trigger went straight past the panel into the page\n * behind it, so the calendar, the calculator keypad and every column filter in the kit\n * were mouse-only. Two shapes fix that, and a popover is not automatically a dialog, so\n * this was chosen rather than inherited:\n *\n *  - **The light one** — move focus in on open, hand it back on close, and let Tab walk\n *    OUT of the panel into whatever follows the trigger. That is the right shape for a\n *    non-modal popover sitting inline in the document.\n *  - **The trap** — Tab cycles inside the panel; Escape and a click outside are the\n *    ways out. What is here.\n *\n * The deciding fact is the portal. This panel is rendered to the END of `<body>`, not\n * beside its trigger, so \"let Tab walk out\" does not mean \"carry on from the trigger\" —\n * it means land at the end of the document, several hundred controls from where the\n * user was. Tabbing out of it would be a worse place to arrive than the one the finding\n * complains about, and fixing that properly needs a sentinel-and-return dance that\n * nothing in this package has. The trap gets the user back to the trigger every time,\n * because `useFocusTrap` restores focus on close.\n *\n * And the panels this kit actually opens are self-contained: pick a date, tap out a\n * sum, narrow a column. Each of them commits and closes, and each already has two\n * documented ways out wired above — Escape and an outside press — so containment costs\n * a keyboard user nothing they had.\n *\n * **It stays non-modal in every other respect**, deliberately: no backdrop, no body\n * scroll lock, and no `aria-modal`, so the page behind is still readable by a screen\n * reader, still scrollable, and still clickable — clicking it is what dismisses this.\n * Only Tab is contained. A popover that took the page away as well would be a\n * {@link Modal}, and there is one of those.\n */\nexport function Popover({\n  trigger,\n  children,\n  width = POPOVER_WIDTH,\n  labels,\n  panelId,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  const close = () => setOpen(false);\n  const toggle = () => setOpen((v) => !v);\n  // prop > `<UiKitProvider labels={{ popover }}>` > English. The provider's\n  // `popover.panel` is only the last-resort name for a panel no caller named.\n  const text = useKitLabels(\"popover\", DEFAULT_POPOVER_LABELS, labels);\n\n  // Align the panel's right edge to the trigger's and clamp it horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  const pos = rect\n    ? {\n        top: placement.top,\n        left: Math.min(Math.max(8, rect.right - width), window.innerWidth - width - 8),\n      }\n    : null;\n\n  useOutsideClick([triggerRef, panelRef], close, open);\n  useEscapeKey(close, open);\n\n  useFocusTrap(panelRef, {\n    active: open && pos !== null,\n    // The panel keeps a focus one of its own children has already taken. `FilterPopover`\n    // autofocuses its text box on mount — that is what the press on \"Filter\" was FOR,\n    // and it is a prop there precisely so the popover keeps it — and a trap that\n    // unconditionally focused the container would take it straight back off again,\n    // one effect later and invisibly.\n    initialFocus: () => {\n      const panel = panelRef.current;\n      const active = document.activeElement;\n      return panel?.contains(active) ? (active as HTMLElement) : panel;\n    },\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\") return;\n    // `useEscapeKey` above listens on the document and still covers the case where\n    // focus somehow is not in here. This handler is for the case that focus IS, which\n    // is now the normal one — and it exists to STOP the key, because a popover opened\n    // from inside a `Modal` (the calculator on an amount field is exactly that) would\n    // otherwise have its Escape travel on up the React tree and close the dialog\n    // underneath as well. Closing twice is harmless — `close` is a state setter, not a\n    // caller's callback — so the two paths cannot double-fire anything.\n    e.stopPropagation();\n    close();\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open && pos &&\n        createPortal(\n          <div\n            // `...rest` first: the role, the id the trigger's `aria-controls` points at,\n            // the `tabIndex` the trap needs and the measured position are what make this\n            // a popover, and a caller reaching for a `data-tour` anchor must not be able\n            // to remove one of them by accident.\n            {...rest}\n            ref={panelRef}\n            role=\"dialog\"\n            id={panelId}\n            // The caller's own `aria-label` wins over {@link PopoverLabels.panel}, which\n            // is the package's English fallback for an unnamed panel. Both name the same\n            // element; the DOM spelling is the one being standardised on, so where both\n            // are present it is the one that survives.\n            aria-label={ariaLabel ?? text.panel}\n            // Without it the panel cannot take focus at all, and the trap above would\n            // silently do nothing on a panel whose children are not yet tabbable.\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            style={{\n              // Merged over the caller's, never replaced by it: these four are measured\n              // against the trigger every scroll and resize, and a panel that dropped\n              // them would paint at the top-left of the viewport.\n              ...style,\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              width,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":";AAyJI,mBAIM,KAJN;AAzJJ,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,cAAc,uBAAuB;AAC9C,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAatB,MAAM,yBAAwC;AAAA;AAAA;AAAA;AAAA,EAInD,OAAO;AACT;AAwBA,MAAM,gBAAgB;AAwCf,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAiB;AACf,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,QAAM,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAGtC,QAAM,OAAO,aAAa,WAAW,wBAAwB,MAAM;AAMnE,QAAM,YAAY,iBAAiB,YAAY,IAAI;AACnD,QAAM,OAAO,UAAU;AACvB,QAAM,MAAM,OACR;AAAA,IACE,KAAK,UAAU;AAAA,IACf,MAAM,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,QAAQ,KAAK,GAAG,OAAO,aAAa,QAAQ,CAAC;AAAA,EAC/E,IACA;AAEJ,kBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,IAAI;AACnD,eAAa,OAAO,IAAI;AAExB,eAAa,UAAU;AAAA,IACrB,QAAQ,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxB,cAAc,MAAM;AAClB,YAAM,QAAQ,SAAS;AACvB,YAAM,SAAS,SAAS;AACxB,aAAO,OAAO,SAAS,MAAM,IAAK,SAAyB;AAAA,IAC7D;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,CAAC,MAAqC;AAC1D,QAAI,EAAE,QAAQ,SAAU;AAQxB,MAAE,gBAAgB;AAClB,UAAM;AAAA,EACR;AAEA,SACE,iCACG;AAAA,YAAQ,EAAE,MAAM,QAAQ,KAAK,WAAW,CAAC;AAAA,IACzC,QAAQ,OACP;AAAA,MACE;AAAA,QAAC;AAAA;AAAA,UAKE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL,IAAI;AAAA,UAKJ,cAAY,aAAa,KAAK;AAAA,UAG9B,UAAU;AAAA,UACV,WAAW;AAAA,UACX,OAAO;AAAA;AAAA;AAAA;AAAA,YAIL,GAAG;AAAA,YACH,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM,IAAI;AAAA,YACV;AAAA,YACA,WAAW,UAAU;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UAEC,mBAAS,KAAK;AAAA;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;","names":[]}

package/dist/components/search-field.d.ts

@@ -20,6 +20,22 @@ interface SearchFieldOwnProps extends Omit<InputHTMLAttributes<HTMLInputElement>
      *  decision, not a default: a filter you can type into and not untype is the
      *  complaint that produced the button on three of these four screens. */
     clearLabel?: string;
+    /**
+     * `"field"` (default): the bordered filter box that sits on a page.
+     *
+     * `"inline"`: no box at all — no border, no fill, no padding of its own — and no
+     * type size of its own either, so it takes the size of the header it sits in.
+     * For a search that IS the header: a command-palette sheet, a picker's top line
+     * (Keksdose's transaction search, which lost its `text-base` headline to a
+     * bordered `text-sm` box when it moved onto this component). The container is
+     * what frames it, so give the container the focus cue if it needs one
+     * (`focus-within:`); the caret is the field's own.
+     */
+    variant?: "field" | "inline";
+    /** Classes for the `<input>` itself. `className` styles the wrapper — the box the
+     *  icon and the clear button are positioned against — so it could set a width
+     *  and nothing else. See {@link Input}'s `inputClassName`. */
+    inputClassName?: string;
 }
 /**
  * One of the two spellings is REQUIRED, and the union is how that survives the

package/dist/components/search-field.js

@@ -4,15 +4,33 @@ import { forwardRef, useRef } from "react";
 import { Search, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { FIELD_BASE } from "./ui.js";
-const SearchField = forwardRef(function SearchField2({ value, onChange, label, clearLabel, className, placeholder, "aria-label": ariaLabel, ...rest }, ref) {
+const SEARCH_INLINE = "block w-full min-w-0 border-0 bg-transparent py-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:outline-none focus:ring-0";
+const SearchField = forwardRef(function SearchField2({
+  value,
+  onChange,
+  label,
+  clearLabel,
+  className,
+  inputClassName,
+  placeholder,
+  variant = "field",
+  "aria-label": ariaLabel,
+  ...rest
+}, ref) {
   const innerRef = useRef(null);
   const name = ariaLabel ?? label;
+  const inline = variant === "inline";
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsx(
       Search,
       {
         "aria-hidden": true,
-        className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]"
+        className: cn(
+          "pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
+          // Logical sides throughout, so a right-to-left page gets the icon at the
+          // start of the line and the clear button at its end.
+          inline ? "start-0" : "start-3"
+        )
       }
     ),
     /* @__PURE__ */ jsx(
@@ -35,12 +53,13 @@ const SearchField = forwardRef(function SearchField2({ value, onChange, label, c
         spellCheck: false,
         ...rest,
         className: cn(
-          FIELD_BASE,
-          "pl-9",
+          inline ? SEARCH_INLINE : FIELD_BASE,
+          inline ? "ps-7" : "ps-9",
           // Room for our own "×" only when there is one; a field that can't be
           // cleared has no reason to reserve the space.
-          clearLabel === void 0 ? "pr-3" : "pr-9",
-          "[&::-webkit-search-cancel-button]:appearance-none"
+          clearLabel === void 0 ? inline ? "pe-0" : "pe-3" : inline ? "pe-8" : "pe-9",
+          "[&::-webkit-search-cancel-button]:appearance-none",
+          inputClassName
         )
       }
     ),
@@ -53,7 +72,10 @@ const SearchField = forwardRef(function SearchField2({ value, onChange, label, c
           innerRef.current?.focus();
         },
         "aria-label": clearLabel,
-        className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]",
+        className: cn(
+          "absolute top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]",
+          inline ? "end-0" : "end-2"
+        ),
         children: /* @__PURE__ */ jsx(X, { className: "size-4" })
       }
     )

package/dist/components/search-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/search-field.tsx"],"sourcesContent":["import { forwardRef, useRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE } from \"./ui\";\n\ninterface SearchFieldOwnProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"value\" | \"onChange\" | \"type\" | \"aria-label\"\n  > {\n  value: string;\n  /** The typed text. Emitted as a plain string, not an event: every caller of the\n   *  four this replaced wanted the string, and one of them held it in a URL param\n   *  rather than in state. */\n  onChange: (value: string) => void;\n  /**\n   * The field's accessible name.\n   *\n   * @deprecated Pass `aria-label` instead — the DOM spelling this kit standardised on\n   * when it found three names for one idea (`ariaLabel`, `aria-label`, and this).\n   * Unchanged and still supported; it names the field only when `aria-label` is\n   * absent, so a consumer can migrate one call site at a time.\n   */\n  label?: string;\n  /** Names the clear button. Omit it and no clear button is rendered — which is a\n   *  decision, not a default: a filter you can type into and not untype is the\n   *  complaint that produced the button on three of these four screens. */\n  clearLabel?: string;\n}\n\n/**\n * One of the two spellings is REQUIRED, and the union is how that survives the\n * deprecation. Making `label` merely optional would have been the easy change and the\n * wrong one: the whole reason this component exists is that two of the four boxes it\n * replaced were named by nothing but their placeholder — which disappears the moment\n * someone types, i.e. exactly when a screen-reader user is working in the field. A\n * caller now has a choice of spelling; it still has no option to pass neither.\n */\nexport type SearchFieldProps = SearchFieldOwnProps &\n  ({ \"aria-label\": string; label?: string } | { label: string; \"aria-label\"?: string });\n\n/**\n * The page-level filter box: a search icon, a `type=\"search\"` input, and a clear\n * \"×\" that appears once there is something to clear.\n *\n * ## Why it is a component\n *\n * Keksdose had four of these and no two agreed. Two were character-identical\n * twenty-line copies (the settings catalogue filter and the tour list filter) —\n * the same absolute icon at `left-3`, the same `pl-9 pr-9`, the same\n * `[&::-webkit-search-cancel-button]:appearance-none`, the same conditional clear\n * button at `right-2` — differing only in which state setter they called. The\n * third (the admin support queue) was the same idea at `left-2`/`size-3.5`/`pl-7`\n * with no clear button and no `type=\"search\"`, so it had neither the `searchbox`\n * role nor a way to empty itself. The fourth (the bank picker) was a bare `<Input\n * placeholder=\"Search\">`: no icon, no clear, and no accessible name at all once\n * the placeholder went away.\n *\n * None of that is a design decision anyone made; it is four people solving the\n * same problem on four days. A shared component is how the fourth screen gets the\n * clear button the first one earned.\n *\n * ## The two X's\n *\n * `type=\"search\"` is what gives the field its `searchbox` role — and, in Chrome, a\n * NATIVE clear cross that paints right next to ours, so a non-empty box shows two\n * X's an inch apart. Ours is the one that survives: it carries an accessible name\n * and matches the app's other icon buttons, and it returns focus to the input so\n * the next query can be typed straight away.\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  { value, onChange, label, clearLabel, className, placeholder, \"aria-label\": ariaLabel, ...rest },\n  ref,\n) {\n  const innerRef = useRef<HTMLInputElement>(null);\n  // Whichever spelling the caller used. It is the accessible name AND the placeholder\n  // fallback, so a box named only by `aria-label` still says what it is before anyone\n  // has typed in it — the same deal `label` has always had.\n  const name = ariaLabel ?? label;\n  return (\n    <div className={cn(\"relative\", className)}>\n      <Search\n        aria-hidden\n        className=\"pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\"\n      />\n      <input\n        ref={(node) => {\n          innerRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        aria-label={name}\n        placeholder={placeholder ?? name}\n        // Keksdose live #333: *\"Entering the search here — is that set as password?\n        // … I got prompted for remembering my name or mail address\"*, typed into the\n        // settings filter on a phone.\n        //\n        // A `type=\"search\"` input with no `name` and no `autocomplete` is a field\n        // Chrome's autofill classifies by GUESSWORK, from the labels around it and\n        // the other fields on the page — and a settings page has an email and a\n        // password on it. Naming the field and declaring the intent is what takes it\n        // out of that guess: `autocomplete=\"off\"` says it is not part of any profile,\n        // and a `name` of \"search\" is the strongest hint the heuristics take.\n        //\n        // The three that follow are not about autofill but about the same keyboard:\n        // a filter box that capitalises the first letter and autocorrects \"2fa\" to\n        // \"2FA\" is fighting the person typing into it. Declared BEFORE `{...rest}` so\n        // a caller with a reason can still override any of them.\n        name=\"search\"\n        autoComplete=\"off\"\n        autoCapitalize=\"none\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        {...rest}\n        className={cn(\n          FIELD_BASE,\n          \"pl-9\",\n          // Room for our own \"×\" only when there is one; a field that can't be\n          // cleared has no reason to reserve the space.\n          clearLabel === undefined ? \"pr-3\" : \"pr-9\",\n          \"[&::-webkit-search-cancel-button]:appearance-none\",\n        )}\n      />\n      {clearLabel !== undefined && value !== \"\" && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            onChange(\"\");\n            // Clearing is the start of the next query far more often than it is the\n            // end of this one, so the caret stays where it can be typed into.\n            innerRef.current?.focus();\n          }}\n          aria-label={clearLabel}\n          className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\"\n        >\n          <X className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n});\nSearchField.displayName = \"SearchField\";\n"],"mappings":";AAiFI,SACE,KADF;AAjFJ,SAAS,YAAY,cAAc;AAEnC,SAAS,QAAQ,SAAS;AAC1B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAmEpB,MAAM,cAAc,WAA+C,SAASA,aACjF,EAAE,OAAO,UAAU,OAAO,YAAY,WAAW,aAAa,cAAc,WAAW,GAAG,KAAK,GAC/F,KACA;AACA,QAAM,WAAW,OAAyB,IAAI;AAI9C,QAAM,OAAO,aAAa;AAC1B,SACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACtC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,CAAC,SAAS;AACb,mBAAS,UAAU;AACnB,cAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,mBAC9B,IAAK,KAAI,UAAU;AAAA,QAC9B;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,cAAY;AAAA,QACZ,aAAa,eAAe;AAAA,QAgB5B,MAAK;AAAA,QACL,cAAa;AAAA,QACb,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,YAAY;AAAA,QACX,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA;AAAA,UAGA,eAAe,SAAY,SAAS;AAAA,UACpC;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACC,eAAe,UAAa,UAAU,MACrC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM;AACb,mBAAS,EAAE;AAGX,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,IACxB;AAAA,KAEJ;AAEJ,CAAC;AACD,YAAY,cAAc;","names":["SearchField"]}
+{"version":3,"sources":["../../src/components/search-field.tsx"],"sourcesContent":["import { forwardRef, useRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE } from \"./ui\";\n\ninterface SearchFieldOwnProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"value\" | \"onChange\" | \"type\" | \"aria-label\"\n  > {\n  value: string;\n  /** The typed text. Emitted as a plain string, not an event: every caller of the\n   *  four this replaced wanted the string, and one of them held it in a URL param\n   *  rather than in state. */\n  onChange: (value: string) => void;\n  /**\n   * The field's accessible name.\n   *\n   * @deprecated Pass `aria-label` instead — the DOM spelling this kit standardised on\n   * when it found three names for one idea (`ariaLabel`, `aria-label`, and this).\n   * Unchanged and still supported; it names the field only when `aria-label` is\n   * absent, so a consumer can migrate one call site at a time.\n   */\n  label?: string;\n  /** Names the clear button. Omit it and no clear button is rendered — which is a\n   *  decision, not a default: a filter you can type into and not untype is the\n   *  complaint that produced the button on three of these four screens. */\n  clearLabel?: string;\n  /**\n   * `\"field\"` (default): the bordered filter box that sits on a page.\n   *\n   * `\"inline\"`: no box at all — no border, no fill, no padding of its own — and no\n   * type size of its own either, so it takes the size of the header it sits in.\n   * For a search that IS the header: a command-palette sheet, a picker's top line\n   * (Keksdose's transaction search, which lost its `text-base` headline to a\n   * bordered `text-sm` box when it moved onto this component). The container is\n   * what frames it, so give the container the focus cue if it needs one\n   * (`focus-within:`); the caret is the field's own.\n   */\n  variant?: \"field\" | \"inline\";\n  /** Classes for the `<input>` itself. `className` styles the wrapper — the box the\n   *  icon and the clear button are positioned against — so it could set a width\n   *  and nothing else. See {@link Input}'s `inputClassName`. */\n  inputClassName?: string;\n}\n\n// The inline look: FIELD_DISPLAY's idea (the chrome gone, the value the thing\n// itself) without even its baseline, because the header it sits in already draws\n// the line. No `text-*` size, on purpose — the input inherits the caller's.\nconst SEARCH_INLINE =\n  \"block w-full min-w-0 border-0 bg-transparent py-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:outline-none focus:ring-0\";\n\n/**\n * One of the two spellings is REQUIRED, and the union is how that survives the\n * deprecation. Making `label` merely optional would have been the easy change and the\n * wrong one: the whole reason this component exists is that two of the four boxes it\n * replaced were named by nothing but their placeholder — which disappears the moment\n * someone types, i.e. exactly when a screen-reader user is working in the field. A\n * caller now has a choice of spelling; it still has no option to pass neither.\n */\nexport type SearchFieldProps = SearchFieldOwnProps &\n  ({ \"aria-label\": string; label?: string } | { label: string; \"aria-label\"?: string });\n\n/**\n * The page-level filter box: a search icon, a `type=\"search\"` input, and a clear\n * \"×\" that appears once there is something to clear.\n *\n * ## Why it is a component\n *\n * Keksdose had four of these and no two agreed. Two were character-identical\n * twenty-line copies (the settings catalogue filter and the tour list filter) —\n * the same absolute icon at `left-3`, the same `pl-9 pr-9`, the same\n * `[&::-webkit-search-cancel-button]:appearance-none`, the same conditional clear\n * button at `right-2` — differing only in which state setter they called. The\n * third (the admin support queue) was the same idea at `left-2`/`size-3.5`/`pl-7`\n * with no clear button and no `type=\"search\"`, so it had neither the `searchbox`\n * role nor a way to empty itself. The fourth (the bank picker) was a bare `<Input\n * placeholder=\"Search\">`: no icon, no clear, and no accessible name at all once\n * the placeholder went away.\n *\n * None of that is a design decision anyone made; it is four people solving the\n * same problem on four days. A shared component is how the fourth screen gets the\n * clear button the first one earned.\n *\n * ## The two X's\n *\n * `type=\"search\"` is what gives the field its `searchbox` role — and, in Chrome, a\n * NATIVE clear cross that paints right next to ours, so a non-empty box shows two\n * X's an inch apart. Ours is the one that survives: it carries an accessible name\n * and matches the app's other icon buttons, and it returns focus to the input so\n * the next query can be typed straight away.\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  {\n    value,\n    onChange,\n    label,\n    clearLabel,\n    className,\n    inputClassName,\n    placeholder,\n    variant = \"field\",\n    \"aria-label\": ariaLabel,\n    ...rest\n  },\n  ref,\n) {\n  const innerRef = useRef<HTMLInputElement>(null);\n  // Whichever spelling the caller used. It is the accessible name AND the placeholder\n  // fallback, so a box named only by `aria-label` still says what it is before anyone\n  // has typed in it — the same deal `label` has always had.\n  const name = ariaLabel ?? label;\n  const inline = variant === \"inline\";\n  return (\n    <div className={cn(\"relative\", className)}>\n      <Search\n        aria-hidden\n        className={cn(\n          \"pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\",\n          // Logical sides throughout, so a right-to-left page gets the icon at the\n          // start of the line and the clear button at its end.\n          inline ? \"start-0\" : \"start-3\",\n        )}\n      />\n      <input\n        ref={(node) => {\n          innerRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        aria-label={name}\n        placeholder={placeholder ?? name}\n        // Keksdose live #333: *\"Entering the search here — is that set as password?\n        // … I got prompted for remembering my name or mail address\"*, typed into the\n        // settings filter on a phone.\n        //\n        // A `type=\"search\"` input with no `name` and no `autocomplete` is a field\n        // Chrome's autofill classifies by GUESSWORK, from the labels around it and\n        // the other fields on the page — and a settings page has an email and a\n        // password on it. Naming the field and declaring the intent is what takes it\n        // out of that guess: `autocomplete=\"off\"` says it is not part of any profile,\n        // and a `name` of \"search\" is the strongest hint the heuristics take.\n        //\n        // The three that follow are not about autofill but about the same keyboard:\n        // a filter box that capitalises the first letter and autocorrects \"2fa\" to\n        // \"2FA\" is fighting the person typing into it. Declared BEFORE `{...rest}` so\n        // a caller with a reason can still override any of them.\n        name=\"search\"\n        autoComplete=\"off\"\n        autoCapitalize=\"none\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        {...rest}\n        className={cn(\n          inline ? SEARCH_INLINE : FIELD_BASE,\n          inline ? \"ps-7\" : \"ps-9\",\n          // Room for our own \"×\" only when there is one; a field that can't be\n          // cleared has no reason to reserve the space.\n          clearLabel === undefined ? (inline ? \"pe-0\" : \"pe-3\") : inline ? \"pe-8\" : \"pe-9\",\n          \"[&::-webkit-search-cancel-button]:appearance-none\",\n          inputClassName,\n        )}\n      />\n      {clearLabel !== undefined && value !== \"\" && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            onChange(\"\");\n            // Clearing is the start of the next query far more often than it is the\n            // end of this one, so the caret stays where it can be typed into.\n            innerRef.current?.focus();\n          }}\n          aria-label={clearLabel}\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\",\n            inline ? \"end-0\" : \"end-2\",\n          )}\n        >\n          <X className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n});\nSearchField.displayName = \"SearchField\";\n"],"mappings":";AAmHI,SACE,KADF;AAnHJ,SAAS,YAAY,cAAc;AAEnC,SAAS,QAAQ,SAAS;AAC1B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AA8C3B,MAAM,gBACJ;AA0CK,MAAM,cAAc,WAA+C,SAASA,aACjF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd,GAAG;AACL,GACA,KACA;AACA,QAAM,WAAW,OAAyB,IAAI;AAI9C,QAAM,OAAO,aAAa;AAC1B,QAAM,SAAS,YAAY;AAC3B,SACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACtC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA;AAAA;AAAA,UAGA,SAAS,YAAY;AAAA,QACvB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,CAAC,SAAS;AACb,mBAAS,UAAU;AACnB,cAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,mBAC9B,IAAK,KAAI,UAAU;AAAA,QAC9B;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,cAAY;AAAA,QACZ,aAAa,eAAe;AAAA,QAgB5B,MAAK;AAAA,QACL,cAAa;AAAA,QACb,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,YAAY;AAAA,QACX,GAAG;AAAA,QACJ,WAAW;AAAA,UACT,SAAS,gBAAgB;AAAA,UACzB,SAAS,SAAS;AAAA;AAAA;AAAA,UAGlB,eAAe,SAAa,SAAS,SAAS,SAAU,SAAS,SAAS;AAAA,UAC1E;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACC,eAAe,UAAa,UAAU,MACrC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM;AACb,mBAAS,EAAE;AAGX,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,cAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,SAAS,UAAU;AAAA,QACrB;AAAA,QAEA,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,IACxB;AAAA,KAEJ;AAEJ,CAAC;AACD,YAAY,cAAc;","names":["SearchField"]}

package/dist/components/signature-pad.d.ts

@@ -64,6 +64,12 @@ interface SignaturePadLabels {
     /** Live-region messages after the matching button. */
     cleared: string;
     undone: string;
+    /** {@link SignatureView}: what it says when there is no signature to show. */
+    viewEmpty: string;
+    /** {@link SignatureView}: the saved PNG's alternative text. */
+    viewDrawn: string;
+    /** {@link SignatureView}: the accessible name of a typed-name signature. */
+    viewTyped: (name: string) => string;
 }
 declare const DEFAULT_SIGNATURE_PAD_LABELS: SignaturePadLabels;
 /** How the value handed back was made. */
@@ -115,5 +121,41 @@ interface SignaturePadProps extends Omit<ComponentPropsWithoutRef<"div">, "onCha
     labels?: Partial<SignaturePadLabels>;
 }
 declare const SignaturePad: react.ForwardRefExoticComponent<SignaturePadProps & react.RefAttributes<SignaturePadHandle>>;
+interface SignatureViewProps extends ComponentPropsWithoutRef<"figure"> {
+    /** The saved PNG — what `SignaturePad` handed to `onChange`/`onSave`, as stored. */
+    value?: string | null;
+    /**
+     * A signature given as a typed name (`detail.typedName`), for a host that stores the
+     * text rather than its PNG. Rendered in the same script face the pad draws it in.
+     * Ignored while `value` is set.
+     */
+    typedName?: string | null;
+    /** Visible caption above the signature; defaults to `labels.label`. `null` hides it
+     *  (the image keeps its alternative text) — for a signature block whose own heading
+     *  already says whose signature it is. */
+    label?: ReactNode;
+    /**
+     * The exported PNG is dark ink on a transparent ground (`exportInk`), which is
+     * invisible on the dark theme's surface. By default the image is colour-inverted
+     * under `.dark`, so the ink reads light; `false` keeps the pixels as stored — for a
+     * PNG exported with its own `exportBackground`, which inverting would turn black.
+     */
+    adaptInk?: boolean;
+    /** Classes for the frame — its height, chiefly (default `h-40`, the pad's). */
+    frameClassName?: string;
+    /** User-facing strings; see {@link SignaturePadLabels} (`view*`). */
+    labels?: Partial<SignaturePadLabels>;
+}
+/**
+ * A saved signature, shown — the read side of {@link SignaturePad}: the same frame and
+ * signing line, none of the drawing chrome (no canvas, buttons, instructions or live
+ * region). A separate component rather than a `readOnly` pad because there is nothing
+ * of the pad to reuse: the pad's scene is STROKES, and a stored signature is a PNG
+ * (or a name) that cannot be turned back into them.
+ *
+ * Kastlan's handover protocol, reopened after signing, is the case: two signatures
+ * that must be visible, and must not look editable.
+ */
+declare function SignatureView({ value, typedName, label, adaptInk, frameClassName, labels: labelsProp, className, ...rest }: SignatureViewProps): react.JSX.Element;
 
-export { DEFAULT_SIGNATURE_PAD_LABELS, type SignatureDetail, SignaturePad, type SignaturePadHandle, type SignaturePadLabels, type SignaturePadProps };
+export { DEFAULT_SIGNATURE_PAD_LABELS, type SignatureDetail, SignaturePad, type SignaturePadHandle, type SignaturePadLabels, type SignaturePadProps, SignatureView, type SignatureViewProps };

package/dist/components/signature-pad.js

@@ -19,7 +19,10 @@ const DEFAULT_SIGNATURE_PAD_LABELS = {
   useDrawn: "Draw instead",
   typedName: "Full name",
   cleared: "Signature cleared",
-  undone: "Last stroke removed"
+  undone: "Last stroke removed",
+  viewEmpty: "Not signed",
+  viewDrawn: "Handwritten signature",
+  viewTyped: (name) => `Signed with the typed name ${name}`
 };
 const DEFAULT_EXPORT_INK = "#111111";
 const SCRIPT_FONT = `"Segoe Script", "Bradley Hand", "Brush Script MT", cursive`;
@@ -398,8 +401,77 @@ const SignaturePad = forwardRef(function SignaturePad2({
   ] });
 });
 SignaturePad.displayName = "SignaturePad";
+function SignatureView({
+  value,
+  typedName,
+  label,
+  adaptInk = true,
+  frameClassName,
+  labels: labelsProp,
+  className,
+  ...rest
+}) {
+  const labels = useKitLabels("signaturePad", DEFAULT_SIGNATURE_PAD_LABELS, labelsProp);
+  const name = typedName?.trim() ?? "";
+  const kind = value ? "drawn" : name ? "typed" : "empty";
+  const caption = label === void 0 ? labels.label : label;
+  const captionId = useId();
+  const captioned = caption !== null && caption !== false;
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      "aria-labelledby": captioned ? captionId : void 0,
+      ...rest,
+      className: cn("m-0 space-y-1.5", className),
+      "data-empty": kind === "empty" || void 0,
+      children: [
+        captioned && /* @__PURE__ */ jsx("figcaption", { id: captionId, className: "block text-sm font-medium text-[var(--text-primary)]", children: caption }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative flex h-40 items-center justify-center overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)]",
+              frameClassName
+            ),
+            children: [
+              kind === "drawn" && /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: value,
+                  alt: labels.viewDrawn,
+                  className: cn("relative max-h-full max-w-full object-contain", adaptInk && "dark:invert")
+                }
+              ),
+              kind === "typed" && // One name for the whole thing: the visible text alone would be read as a bare
+              // name, with nothing saying it IS the signature.
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  role: "img",
+                  "aria-label": labels.viewTyped(name),
+                  className: "relative max-w-[85%] truncate px-2 text-4xl italic text-[var(--text-primary)]",
+                  style: { fontFamily: SCRIPT_FONT },
+                  children: name
+                }
+              ),
+              kind === "empty" && /* @__PURE__ */ jsx("span", { className: "relative text-xs text-[var(--text-muted)]", children: labels.viewEmpty }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute inset-x-6 bottom-8 border-b border-dashed border-[var(--border-strong)]"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 export {
   DEFAULT_SIGNATURE_PAD_LABELS,
-  SignaturePad
+  SignaturePad,
+  SignatureView
 };
 //# sourceMappingURL=signature-pad.js.map

package/dist/components/signature-pad.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/signature-pad.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, PointerEvent as ReactPointerEvent, ReactNode } from \"react\";\nimport { Eraser, Keyboard, PenLine, Undo2 } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, FIELD_INVALID, Input } from \"./ui\";\n\n/**\n * A drawn signature, captured on a canvas and handed back as a PNG data URL.\n *\n * Kastlan wrote the first one (`features/handover/components/signature-pad.tsx`) for\n * the handover protocol, where tenant and inspector each sign on the same phone. This\n * keeps its contract — draw, get a PNG — and fixes what a copy per app would keep\n * getting wrong:\n *\n *  1. **Strokes are data, not pixels.** Each stroke is kept as a list of points, and\n *     the canvas is a VIEW of them. That is what lets a resize (a phone rotating\n *     mid-signature) keep the drawing instead of wiping it — setting `canvas.width`\n *     clears the bitmap, so a pixels-only pad loses everything — and what makes undo\n *     one `pop()`. The pixel buffer is sized to `devicePixelRatio`, so a stroke is\n *     sharp on a 3× screen rather than upscaled from a 1× bitmap.\n *  2. **Smooth, and pressure-aware.** Segments are quadratic curves through the\n *     midpoints between samples, so a fast stroke is a curve, not a polyline; a pen\n *     that reports pressure varies the width, a mouse or finger (whose `pressure` is a\n *     constant 0.5, or junk) draws at the base width.\n *  3. **Two inks.** On screen the ink is the computed `color` of the canvas, which is\n *     `--text-primary` — so it reads in the dark theme, where a hard-coded near-black\n *     stroke vanished into the surface. The exported PNG is re-rendered from the same\n *     strokes in `exportInk` (near-black by default) on a transparent background. A\n *     signature is a DOCUMENT artefact: it is printed on the protocol, shown on a white\n *     card, embedded in a PDF — none of which follow the signer's theme. Exporting\n *     the on-screen ink would have produced a pale-grey-on-transparent PNG for every\n *     dark-mode signer, invisible on white paper.\n *\n * **Accessibility.** A canvas has no content a screen reader or a keyboard can reach,\n * and no amount of ARIA changes that — drawing is a pointer act. What the pad does:\n * the canvas is `role=\"img\"`, named by the visible label and described by the\n * instructions and by its state (\"Nothing drawn yet\" / \"Signature drawn\"), so a\n * screen-reader user knows what the box is and whether it holds anything; undo and\n * clear are real buttons, and their effect is announced. What it cannot do is let\n * someone sign without a pointer — hence `allowTypedName`, which offers a typed name\n * instead. It is OPT-IN, because whether a typed name counts as a signature is a\n * product and legal decision, not a UI one (Kastlan's handover accepts one; a flow\n * that needs a drawn mark would not). Where a drawn mark is not strictly required,\n * turn it on.\n */\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** Every string the pad renders or speaks. */\nexport interface SignaturePadLabels {\n  /** Visible label above the pad, and the canvas's accessible name. The `label`\n   *  prop overrides it per instance. */\n  label: string;\n  /** Under the label, and part of the canvas's description. */\n  instructions: string;\n  /** Appended to the instructions when `allowTypedName` is on. */\n  typedFallbackHint: string;\n  /** The canvas's state for a screen reader. */\n  empty: string;\n  signed: string;\n  undo: string;\n  clear: string;\n  /** Only rendered when `onSave` is given. */\n  save: string;\n  /** The mode switch (`allowTypedName`). */\n  useTyped: string;\n  useDrawn: string;\n  /** Label of the typed-name field. */\n  typedName: string;\n  /** Live-region messages after the matching button. */\n  cleared: string;\n  undone: string;\n}\n\nexport const DEFAULT_SIGNATURE_PAD_LABELS: SignaturePadLabels = {\n  label: \"Signature\",\n  instructions: \"Sign in the box with a mouse, your finger or a pen.\",\n  typedFallbackHint: \"If you cannot draw, type your name instead.\",\n  empty: \"Nothing drawn yet\",\n  signed: \"Signature drawn\",\n  undo: \"Undo last stroke\",\n  clear: \"Clear\",\n  save: \"Save signature\",\n  useTyped: \"Type name instead\",\n  useDrawn: \"Draw instead\",\n  typedName: \"Full name\",\n  cleared: \"Signature cleared\",\n  undone: \"Last stroke removed\",\n};\n\n/* ── Types ───────────────────────────────────────────────────────────────── */\n\n/** How the value handed back was made. */\nexport interface SignatureDetail {\n  method: \"drawn\" | \"typed\";\n  /** The name as typed, when `method` is `\"typed\"` — the PNG shows it, but a host\n   *  that stores a typed name as TEXT (Kastlan does) wants the string. */\n  typedName?: string;\n}\n\n/** The imperative handle: `ref.current.toDataURL()` at submit time, for a form that\n *  does not want to mirror the value into state on every stroke. */\nexport interface SignaturePadHandle {\n  /** Remove every stroke and the typed name. Fires `onChange(null)`. */\n  clear: () => void;\n  /** The PNG, rendered in `exportInk` — or `null` while nothing is signed. */\n  toDataURL: () => string | null;\n  isEmpty: () => boolean;\n}\n\nexport interface SignaturePadProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /** Visible label; defaults to `labels.label`. */\n  label?: ReactNode;\n  /** Replaces `labels.instructions` for this instance (e.g. a legal note). */\n  description?: ReactNode;\n  /**\n   * After every finished stroke, undo, clear and typed-name edit: the PNG, or `null`\n   * once the pad is empty. Not called mid-stroke — encoding a PNG per pointer move\n   * would stall the drawing on a phone.\n   */\n  onChange?: (dataUrl: string | null, detail: SignatureDetail) => void;\n  /** Renders a Save button, enabled once something is signed. */\n  onSave?: (dataUrl: string, detail: SignatureDetail) => void;\n  disabled?: boolean;\n  /** Paints the pad as wrong and sets `aria-invalid`. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** Message under the pad; implies `invalid` and is attached with\n   *  `aria-describedby`, like the kit's other fields. */\n  error?: ReactNode;\n  /** Offer a typed name as an alternative to drawing. See the accessibility note. */\n  allowTypedName?: boolean;\n  /** Ink of the exported PNG. Default near-black, legible on white. */\n  exportInk?: string;\n  /** Fill behind the exported PNG. Default transparent. */\n  exportBackground?: string;\n  /** Base stroke width in CSS pixels. Default 2.5. */\n  lineWidth?: number;\n  /** Classes for the canvas — its height, chiefly (default `h-40`). */\n  canvasClassName?: string;\n  /** User-facing strings; see {@link SignaturePadLabels}. */\n  labels?: Partial<SignaturePadLabels>;\n}\n\n/* ── Drawing ─────────────────────────────────────────────────────────────── */\n\ninterface Point {\n  x: number;\n  y: number;\n  /** 0–1. A constant 0.5 for anything that is not a pen. */\n  p: number;\n}\n\ntype Stroke = Point[];\n\nconst DEFAULT_EXPORT_INK = \"#111111\";\n\n// A handwriting face where the platform has one, `cursive` everywhere else. Only\n// ever used to render a typed name onto the canvas.\nconst SCRIPT_FONT = `\"Segoe Script\", \"Bradley Hand\", \"Brush Script MT\", cursive`;\n\n/** Width multiplier from pressure: 0.5 (the no-pen constant) is exactly 1. */\nconst pressureWidth = (p: number) => 0.4 + 1.2 * p;\n\nconst mid = (a: Point, b: Point): Point => ({ x: (a.x + b.x) / 2, y: (a.y + b.y) / 2, p: (a.p + b.p) / 2 });\n\n/**\n * Segment `i` (1 ≤ i < n) of a stroke: a quadratic from the midpoint before sample\n * `i - 1` to the midpoint after it, with the sample as the control point. The live\n * drawing and the full repaint both go through here, so a stroke looks the same\n * before and after a resize.\n */\nfunction drawSegment(ctx: CanvasRenderingContext2D, pts: Stroke, i: number, scale: number, width: number) {\n  const a = i === 1 ? pts[0] : mid(pts[i - 2], pts[i - 1]);\n  const c = pts[i - 1];\n  const b = mid(pts[i - 1], pts[i]);\n  ctx.lineWidth = width * scale * pressureWidth((a.p + b.p) / 2);\n  ctx.beginPath();\n  ctx.moveTo(a.x * scale, a.y * scale);\n  ctx.quadraticCurveTo(c.x * scale, c.y * scale, b.x * scale, b.y * scale);\n  ctx.stroke();\n}\n\n/** The last half-segment, from the final midpoint to the final sample. Drawn once the\n *  stroke is finished — while drawing, the pen is still there and it would be redrawn\n *  on every move. A single tap is a dot. */\nfunction drawTail(ctx: CanvasRenderingContext2D, pts: Stroke, scale: number, width: number) {\n  const last = pts[pts.length - 1];\n  if (pts.length === 1) {\n    ctx.beginPath();\n    ctx.arc(last.x * scale, last.y * scale, (width * scale * pressureWidth(last.p)) / 2, 0, Math.PI * 2);\n    ctx.fill();\n    return;\n  }\n  const from = pts.length === 2 ? pts[0] : mid(pts[pts.length - 2], last);\n  ctx.lineWidth = width * scale * pressureWidth(last.p);\n  ctx.beginPath();\n  ctx.moveTo(from.x * scale, from.y * scale);\n  ctx.lineTo(last.x * scale, last.y * scale);\n  ctx.stroke();\n}\n\nfunction prepare(ctx: CanvasRenderingContext2D, ink: string, dpr: number) {\n  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n  ctx.lineCap = \"round\";\n  ctx.lineJoin = \"round\";\n  ctx.strokeStyle = ink;\n  ctx.fillStyle = ink;\n}\n\n/** A typed name, as large as fits, on the pad's baseline. */\nfunction drawName(ctx: CanvasRenderingContext2D, name: string, w: number, h: number) {\n  let size = Math.min(48, h * 0.45);\n  ctx.font = `italic ${size}px ${SCRIPT_FONT}`;\n  const room = w * 0.85;\n  const measured = ctx.measureText(name).width;\n  if (measured > room) {\n    size = Math.max(12, (size * room) / measured);\n    ctx.font = `italic ${size}px ${SCRIPT_FONT}`;\n  }\n  ctx.textAlign = \"center\";\n  ctx.textBaseline = \"alphabetic\";\n  ctx.fillText(name, w / 2, h * 0.68);\n}\n\n/* ── The component ───────────────────────────────────────────────────────── */\n\nexport const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(function SignaturePad(\n  {\n    label,\n    description,\n    onChange,\n    onSave,\n    disabled,\n    invalid,\n    error,\n    allowTypedName,\n    exportInk = DEFAULT_EXPORT_INK,\n    exportBackground,\n    lineWidth = 2.5,\n    canvasClassName,\n    labels: labelsProp,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  // Prop > <UiKitProvider> > English, like every labelled component in the kit.\n  const labels = useKitLabels(\"signaturePad\", DEFAULT_SIGNATURE_PAD_LABELS, labelsProp);\n  const { announce, regionProps } = useAnnounce();\n  const labelId = useId();\n  const descId = useId();\n  const statusId = useId();\n  const errorId = useId();\n\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  /**\n   * What is on the pad lives in a ref, not in state: a pointer move must not\n   * re-render, and `onChange` has to see the pad AFTER a change, from inside the\n   * handler that made it — before React has rendered anything. The state below\n   * mirrors the parts the markup needs (empty or not, which mode, the field's text).\n   */\n  const scene = useRef<{ strokes: Stroke[]; mode: \"drawn\" | \"typed\"; name: string }>({\n    strokes: [],\n    mode: \"drawn\",\n    name: \"\",\n  });\n  const live = useRef<{ id: number; stroke: Stroke } | null>(null);\n  /**\n   * The canvas width, in CSS px, the stored points are relative to. Fixed by the\n   * first stroke; a later resize scales the drawing UNIFORMLY by `width / refWidth`,\n   * so a rotated phone shows the same signature larger or smaller, never stretched.\n   */\n  const refWidth = useRef(0);\n  const [strokeCount, setStrokeCount] = useState(0);\n  const [mode, setMode] = useState<\"drawn\" | \"typed\">(\"drawn\");\n  const [typedName, setTypedName] = useState(\"\");\n\n  const typed = mode === \"typed\";\n  const isEmpty = typed ? typedName.trim() === \"\" : strokeCount === 0;\n\n  // Everything the paint and export paths read that can change between renders, so\n  // the observers below subscribe once instead of on every keystroke.\n  const opts = useRef({ lineWidth, exportInk, exportBackground });\n  useEffect(() => {\n    opts.current = { lineWidth, exportInk, exportBackground };\n  }, [lineWidth, exportInk, exportBackground]);\n\n  const sceneEmpty = () => {\n    const s = scene.current;\n    return s.mode === \"typed\" ? s.name.trim() === \"\" : s.strokes.length === 0;\n  };\n\n  /** The whole scene, painted into `ctx` at `w`×`h` CSS px. */\n  const paintInto = useCallback((ctx: CanvasRenderingContext2D, ink: string, w: number, h: number, dpr: number) => {\n    const { lineWidth: width } = opts.current;\n    const s = scene.current;\n    prepare(ctx, ink, dpr);\n    if (s.mode === \"typed\") {\n      if (s.name.trim()) drawName(ctx, s.name.trim(), w, h);\n      return;\n    }\n    const scale = refWidth.current > 0 ? w / refWidth.current : 1;\n    for (const stroke of s.strokes) {\n      for (let i = 1; i < stroke.length; i += 1) drawSegment(ctx, stroke, i, scale, width);\n      drawTail(ctx, stroke, scale, width);\n    }\n    const pending = live.current?.stroke;\n    if (pending) for (let i = 1; i < pending.length; i += 1) drawSegment(ctx, pending, i, scale, width);\n  }, []);\n\n  /** The ink on screen: the canvas's own computed `color`, i.e. `--text-primary`. */\n  const screenInk = (canvas: HTMLCanvasElement) =>\n    // Read as `color` rather than as the custom property: `--text-primary` is whatever\n    // the palette wrote (a `color-mix()` in some presets), which a 2D context may not\n    // parse; `color` has already been resolved by the browser.\n    getComputedStyle(canvas).color || opts.current.exportInk;\n\n  /** Repaint the visible canvas from the scene, in the theme's ink. */\n  const repaint = useCallback(() => {\n    const canvas = canvasRef.current;\n    const ctx = canvas?.getContext(\"2d\");\n    if (!canvas || !ctx) return;\n    const dpr = window.devicePixelRatio || 1;\n    ctx.setTransform(1, 0, 0, 1, 0, 0);\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    paintInto(ctx, screenInk(canvas), canvas.width / dpr, canvas.height / dpr, dpr);\n  }, [paintInto]);\n\n  /** Size the bitmap to the element × devicePixelRatio, then repaint. */\n  const resize = useCallback(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const rect = canvas.getBoundingClientRect();\n    const dpr = window.devicePixelRatio || 1;\n    const w = Math.round(rect.width * dpr);\n    const h = Math.round(rect.height * dpr);\n    // Assigning `width` clears the bitmap even when the value is unchanged, so only\n    // when it moved — and the repaint puts the strokes back either way.\n    if (canvas.width !== w) canvas.width = w;\n    if (canvas.height !== h) canvas.height = h;\n    repaint();\n  }, [repaint]);\n\n  useLayoutEffect(() => {\n    resize();\n  }, [resize]);\n\n  // A changed base width redraws what is already there.\n  useEffect(() => {\n    repaint();\n  }, [lineWidth, repaint]);\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const cleanups: Array<() => void> = [];\n    if (typeof ResizeObserver !== \"undefined\") {\n      const ro = new ResizeObserver(() => resize());\n      ro.observe(canvas);\n      cleanups.push(() => ro.disconnect());\n    }\n    // The ink follows the theme, and the theme is a class (`.dark`) or inline\n    // variables (the palette store) on <html> — neither of which tells a canvas.\n    if (typeof MutationObserver !== \"undefined\") {\n      const mo = new MutationObserver(() => repaint());\n      mo.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\", \"style\", \"data-theme\"] });\n      cleanups.push(() => mo.disconnect());\n    }\n    const mq = typeof window.matchMedia === \"function\" ? window.matchMedia(\"(prefers-color-scheme: dark)\") : null;\n    if (mq?.addEventListener) {\n      mq.addEventListener(\"change\", repaint);\n      cleanups.push(() => mq.removeEventListener(\"change\", repaint));\n    }\n    return () => cleanups.forEach((fn) => fn());\n  }, [resize, repaint]);\n\n  /** The PNG, re-rendered off-screen in the export ink — `null` while empty. */\n  const exportPng = useCallback((): string | null => {\n    const canvas = canvasRef.current;\n    if (!canvas || sceneEmpty()) return null;\n    const { exportInk: ink, exportBackground: bg } = opts.current;\n    const dpr = window.devicePixelRatio || 1;\n    const out = document.createElement(\"canvas\");\n    out.width = canvas.width;\n    out.height = canvas.height;\n    const ctx = out.getContext(\"2d\");\n    if (!ctx) return null;\n    if (bg) {\n      ctx.fillStyle = bg;\n      ctx.fillRect(0, 0, out.width, out.height);\n    }\n    paintInto(ctx, ink, out.width / dpr, out.height / dpr, dpr);\n    return out.toDataURL(\"image/png\");\n  }, [paintInto]);\n\n  const detail = (): SignatureDetail => {\n    const s = scene.current;\n    return s.mode === \"typed\" ? { method: \"typed\", typedName: s.name.trim() } : { method: \"drawn\" };\n  };\n\n  /** After every change to the scene: sync the markup's mirror, repaint, tell the host. */\n  const onChangeRef = useRef(onChange);\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n  const commit = () => {\n    const s = scene.current;\n    setStrokeCount(s.strokes.length);\n    setMode(s.mode);\n    setTypedName(s.name);\n    repaint();\n    onChangeRef.current?.(exportPng(), detail());\n  };\n\n  const clearScene = () => {\n    scene.current = { ...scene.current, strokes: [], name: \"\" };\n    live.current = null;\n    refWidth.current = 0;\n    commit();\n  };\n\n  useImperativeHandle(ref, () => ({ clear: clearScene, toDataURL: exportPng, isEmpty: sceneEmpty }));\n\n  /* ── Pointer ── */\n\n  const toPoint = (e: { clientX: number; clientY: number; pressure: number; pointerType: string }, rect: DOMRect): Point => {\n    const scale = refWidth.current > 0 && rect.width > 0 ? rect.width / refWidth.current : 1;\n    return {\n      x: (e.clientX - rect.left) / scale,\n      y: (e.clientY - rect.top) / scale,\n      // Only a pen's pressure means anything: a mouse reports 0.5 while pressed and\n      // touch hardware reports 0, 1 or noise.\n      p: e.pointerType === \"pen\" && e.pressure > 0 ? e.pressure : 0.5,\n    };\n  };\n\n  const onPointerDown = (e: ReactPointerEvent<HTMLCanvasElement>) => {\n    // One stroke at a time: a palm resting beside the pen is a second pointer.\n    if (disabled || typed || live.current) return;\n    if (e.pointerType === \"mouse\" && e.button !== 0) return;\n    e.preventDefault();\n    const canvas = e.currentTarget;\n    canvas.setPointerCapture?.(e.pointerId);\n    const rect = canvas.getBoundingClientRect();\n    if (refWidth.current === 0) refWidth.current = rect.width || 1;\n    live.current = { id: e.pointerId, stroke: [toPoint(e, rect)] };\n  };\n\n  const onPointerMove = (e: ReactPointerEvent<HTMLCanvasElement>) => {\n    const pending = live.current;\n    if (!pending || pending.id !== e.pointerId) return;\n    e.preventDefault();\n    const canvas = e.currentTarget;\n    const rect = canvas.getBoundingClientRect();\n    // Coalesced events: the samples the browser merged into this one move. A fast\n    // flick on a 120 Hz pen is otherwise a handful of long straight chords.\n    const samples = e.nativeEvent.getCoalescedEvents?.() ?? [];\n    const events = samples.length > 0 ? samples : [e];\n    const ctx = canvas.getContext(\"2d\");\n    if (ctx) prepare(ctx, screenInk(canvas), window.devicePixelRatio || 1);\n    const scale = refWidth.current > 0 && rect.width > 0 ? rect.width / refWidth.current : 1;\n    for (const ev of events) {\n      pending.stroke.push(toPoint(ev, rect));\n      // Only the newest segment — a full repaint per move is O(ink) on every event.\n      if (ctx) drawSegment(ctx, pending.stroke, pending.stroke.length - 1, scale, opts.current.lineWidth);\n    }\n  };\n\n  const endStroke = (e: ReactPointerEvent<HTMLCanvasElement>) => {\n    const pending = live.current;\n    if (!pending || pending.id !== e.pointerId) return;\n    e.currentTarget.releasePointerCapture?.(e.pointerId);\n    live.current = null;\n    scene.current = { ...scene.current, strokes: [...scene.current.strokes, pending.stroke] };\n    commit();\n  };\n\n  /* ── Buttons ── */\n\n  const undo = () => {\n    if (disabled || scene.current.strokes.length === 0) return;\n    const strokes = scene.current.strokes.slice(0, -1);\n    if (strokes.length === 0) refWidth.current = 0;\n    scene.current = { ...scene.current, strokes };\n    commit();\n    announce(labels.undone);\n  };\n\n  const clear = () => {\n    if (disabled || sceneEmpty()) return;\n    clearScene();\n    announce(labels.cleared);\n  };\n\n  const switchMode = () => {\n    if (disabled) return;\n    scene.current = { ...scene.current, mode: scene.current.mode === \"drawn\" ? \"typed\" : \"drawn\" };\n    commit();\n  };\n\n  const onTypedChange = (name: string) => {\n    scene.current = { ...scene.current, name };\n    commit();\n  };\n\n  const save = () => {\n    if (disabled) return;\n    const png = exportPng();\n    if (png) onSave?.(png, detail());\n  };\n\n  const hasError = error !== undefined && error !== null && error !== false && error !== \"\";\n  const isInvalid = Boolean(invalid) || hasError;\n  const describedBy = [descId, statusId, hasError ? errorId : null].filter(Boolean).join(\" \");\n\n  // `aria-disabled` rather than `disabled` on undo/clear: they disable THEMSELVES\n  // (clear empties the pad, the last undo does too), and a natively disabled button\n  // drops keyboard focus to <body> the moment it is activated.\n  const softDisabled = \"aria-disabled:cursor-not-allowed aria-disabled:opacity-50\";\n\n  return (\n    <div {...rest} className={cn(\"relative space-y-1.5\", className)} data-empty={isEmpty || undefined}>\n      <div>\n        <span id={labelId} className=\"block text-sm font-medium text-[var(--text-primary)]\">\n          {label ?? labels.label}\n        </span>\n        <p id={descId} className=\"text-xs text-[var(--text-muted)]\">\n          {description ?? labels.instructions}\n          {allowTypedName && !typed ? ` ${labels.typedFallbackHint}` : null}\n        </p>\n      </div>\n\n      <div className=\"relative\">\n        <canvas\n          ref={canvasRef}\n          role=\"img\"\n          aria-labelledby={labelId}\n          aria-describedby={describedBy}\n          // No `aria-invalid` / `aria-disabled`: `img` supports neither. The error\n          // reaches a screen reader through `aria-describedby`; the attributes below\n          // are for styling and tests.\n          data-invalid={isInvalid || undefined}\n          data-disabled={disabled || undefined}\n          onPointerDown={onPointerDown}\n          onPointerMove={onPointerMove}\n          onPointerUp={endStroke}\n          onPointerCancel={endStroke}\n          className={cn(\n            // `touch-none` stops the page scrolling under a finger that is signing.\n            \"block h-40 w-full touch-none select-none rounded-md border border-[var(--border)] bg-[var(--bg-surface)] text-[var(--text-primary)]\",\n            typed || disabled ? \"cursor-default\" : \"cursor-crosshair\",\n            disabled && \"opacity-60\",\n            isInvalid && FIELD_INVALID,\n            canvasClassName,\n          )}\n        />\n        {/* The signing line — where people expect to sign. Decoration only. */}\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-x-6 bottom-8 border-b border-dashed border-[var(--border-strong)]\"\n        />\n        <span id={statusId} className=\"sr-only\">\n          {isEmpty ? labels.empty : labels.signed}\n        </span>\n      </div>\n\n      {typed && (\n        <Input\n          label={labels.typedName}\n          value={typedName}\n          autoComplete=\"name\"\n          disabled={disabled}\n          onChange={(e) => onTypedChange(e.target.value)}\n        />\n      )}\n\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {!typed && (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            onClick={undo}\n            aria-disabled={disabled || strokeCount === 0 || undefined}\n            className={softDisabled}\n          >\n            <Undo2 aria-hidden=\"true\" className=\"size-4\" />\n            {labels.undo}\n          </Button>\n        )}\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          onClick={clear}\n          aria-disabled={disabled || isEmpty || undefined}\n          className={softDisabled}\n        >\n          <Eraser aria-hidden=\"true\" className=\"size-4\" />\n          {labels.clear}\n        </Button>\n        {allowTypedName && (\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={switchMode}\n            disabled={disabled}\n          >\n            {typed ? <PenLine aria-hidden=\"true\" className=\"size-4\" /> : <Keyboard aria-hidden=\"true\" className=\"size-4\" />}\n            {typed ? labels.useDrawn : labels.useTyped}\n          </Button>\n        )}\n        {onSave && (\n          <Button type=\"button\" variant=\"brand\" onClick={save} disabled={disabled || isEmpty} className=\"ms-auto\">\n            {labels.save}\n          </Button>\n        )}\n      </div>\n\n      {hasError && (\n        <p id={errorId} className=\"mt-1 text-[11px] leading-tight text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n      {/* Rendered from the start and never unmounted — see useAnnounce. */}\n      <div {...regionProps} />\n    </div>\n  );\n});\nSignaturePad.displayName = \"SignaturePad\";\n"],"mappings":"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","names":["SignaturePad"]}
+{"version":3,"sources":["../../src/components/signature-pad.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, PointerEvent as ReactPointerEvent, ReactNode } from \"react\";\nimport { Eraser, Keyboard, PenLine, Undo2 } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, FIELD_INVALID, Input } from \"./ui\";\n\n/**\n * A drawn signature, captured on a canvas and handed back as a PNG data URL.\n *\n * Kastlan wrote the first one (`features/handover/components/signature-pad.tsx`) for\n * the handover protocol, where tenant and inspector each sign on the same phone. This\n * keeps its contract — draw, get a PNG — and fixes what a copy per app would keep\n * getting wrong:\n *\n *  1. **Strokes are data, not pixels.** Each stroke is kept as a list of points, and\n *     the canvas is a VIEW of them. That is what lets a resize (a phone rotating\n *     mid-signature) keep the drawing instead of wiping it — setting `canvas.width`\n *     clears the bitmap, so a pixels-only pad loses everything — and what makes undo\n *     one `pop()`. The pixel buffer is sized to `devicePixelRatio`, so a stroke is\n *     sharp on a 3× screen rather than upscaled from a 1× bitmap.\n *  2. **Smooth, and pressure-aware.** Segments are quadratic curves through the\n *     midpoints between samples, so a fast stroke is a curve, not a polyline; a pen\n *     that reports pressure varies the width, a mouse or finger (whose `pressure` is a\n *     constant 0.5, or junk) draws at the base width.\n *  3. **Two inks.** On screen the ink is the computed `color` of the canvas, which is\n *     `--text-primary` — so it reads in the dark theme, where a hard-coded near-black\n *     stroke vanished into the surface. The exported PNG is re-rendered from the same\n *     strokes in `exportInk` (near-black by default) on a transparent background. A\n *     signature is a DOCUMENT artefact: it is printed on the protocol, shown on a white\n *     card, embedded in a PDF — none of which follow the signer's theme. Exporting\n *     the on-screen ink would have produced a pale-grey-on-transparent PNG for every\n *     dark-mode signer, invisible on white paper.\n *\n * **Accessibility.** A canvas has no content a screen reader or a keyboard can reach,\n * and no amount of ARIA changes that — drawing is a pointer act. What the pad does:\n * the canvas is `role=\"img\"`, named by the visible label and described by the\n * instructions and by its state (\"Nothing drawn yet\" / \"Signature drawn\"), so a\n * screen-reader user knows what the box is and whether it holds anything; undo and\n * clear are real buttons, and their effect is announced. What it cannot do is let\n * someone sign without a pointer — hence `allowTypedName`, which offers a typed name\n * instead. It is OPT-IN, because whether a typed name counts as a signature is a\n * product and legal decision, not a UI one (Kastlan's handover accepts one; a flow\n * that needs a drawn mark would not). Where a drawn mark is not strictly required,\n * turn it on.\n */\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** Every string the pad renders or speaks. */\nexport interface SignaturePadLabels {\n  /** Visible label above the pad, and the canvas's accessible name. The `label`\n   *  prop overrides it per instance. */\n  label: string;\n  /** Under the label, and part of the canvas's description. */\n  instructions: string;\n  /** Appended to the instructions when `allowTypedName` is on. */\n  typedFallbackHint: string;\n  /** The canvas's state for a screen reader. */\n  empty: string;\n  signed: string;\n  undo: string;\n  clear: string;\n  /** Only rendered when `onSave` is given. */\n  save: string;\n  /** The mode switch (`allowTypedName`). */\n  useTyped: string;\n  useDrawn: string;\n  /** Label of the typed-name field. */\n  typedName: string;\n  /** Live-region messages after the matching button. */\n  cleared: string;\n  undone: string;\n  /** {@link SignatureView}: what it says when there is no signature to show. */\n  viewEmpty: string;\n  /** {@link SignatureView}: the saved PNG's alternative text. */\n  viewDrawn: string;\n  /** {@link SignatureView}: the accessible name of a typed-name signature. */\n  viewTyped: (name: string) => string;\n}\n\nexport const DEFAULT_SIGNATURE_PAD_LABELS: SignaturePadLabels = {\n  label: \"Signature\",\n  instructions: \"Sign in the box with a mouse, your finger or a pen.\",\n  typedFallbackHint: \"If you cannot draw, type your name instead.\",\n  empty: \"Nothing drawn yet\",\n  signed: \"Signature drawn\",\n  undo: \"Undo last stroke\",\n  clear: \"Clear\",\n  save: \"Save signature\",\n  useTyped: \"Type name instead\",\n  useDrawn: \"Draw instead\",\n  typedName: \"Full name\",\n  cleared: \"Signature cleared\",\n  undone: \"Last stroke removed\",\n  viewEmpty: \"Not signed\",\n  viewDrawn: \"Handwritten signature\",\n  viewTyped: (name) => `Signed with the typed name ${name}`,\n};\n\n/* ── Types ───────────────────────────────────────────────────────────────── */\n\n/** How the value handed back was made. */\nexport interface SignatureDetail {\n  method: \"drawn\" | \"typed\";\n  /** The name as typed, when `method` is `\"typed\"` — the PNG shows it, but a host\n   *  that stores a typed name as TEXT (Kastlan does) wants the string. */\n  typedName?: string;\n}\n\n/** The imperative handle: `ref.current.toDataURL()` at submit time, for a form that\n *  does not want to mirror the value into state on every stroke. */\nexport interface SignaturePadHandle {\n  /** Remove every stroke and the typed name. Fires `onChange(null)`. */\n  clear: () => void;\n  /** The PNG, rendered in `exportInk` — or `null` while nothing is signed. */\n  toDataURL: () => string | null;\n  isEmpty: () => boolean;\n}\n\nexport interface SignaturePadProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /** Visible label; defaults to `labels.label`. */\n  label?: ReactNode;\n  /** Replaces `labels.instructions` for this instance (e.g. a legal note). */\n  description?: ReactNode;\n  /**\n   * After every finished stroke, undo, clear and typed-name edit: the PNG, or `null`\n   * once the pad is empty. Not called mid-stroke — encoding a PNG per pointer move\n   * would stall the drawing on a phone.\n   */\n  onChange?: (dataUrl: string | null, detail: SignatureDetail) => void;\n  /** Renders a Save button, enabled once something is signed. */\n  onSave?: (dataUrl: string, detail: SignatureDetail) => void;\n  disabled?: boolean;\n  /** Paints the pad as wrong and sets `aria-invalid`. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** Message under the pad; implies `invalid` and is attached with\n   *  `aria-describedby`, like the kit's other fields. */\n  error?: ReactNode;\n  /** Offer a typed name as an alternative to drawing. See the accessibility note. */\n  allowTypedName?: boolean;\n  /** Ink of the exported PNG. Default near-black, legible on white. */\n  exportInk?: string;\n  /** Fill behind the exported PNG. Default transparent. */\n  exportBackground?: string;\n  /** Base stroke width in CSS pixels. Default 2.5. */\n  lineWidth?: number;\n  /** Classes for the canvas — its height, chiefly (default `h-40`). */\n  canvasClassName?: string;\n  /** User-facing strings; see {@link SignaturePadLabels}. */\n  labels?: Partial<SignaturePadLabels>;\n}\n\n/* ── Drawing ─────────────────────────────────────────────────────────────── */\n\ninterface Point {\n  x: number;\n  y: number;\n  /** 0–1. A constant 0.5 for anything that is not a pen. */\n  p: number;\n}\n\ntype Stroke = Point[];\n\nconst DEFAULT_EXPORT_INK = \"#111111\";\n\n// A handwriting face where the platform has one, `cursive` everywhere else. Only\n// ever used to render a typed name onto the canvas.\nconst SCRIPT_FONT = `\"Segoe Script\", \"Bradley Hand\", \"Brush Script MT\", cursive`;\n\n/** Width multiplier from pressure: 0.5 (the no-pen constant) is exactly 1. */\nconst pressureWidth = (p: number) => 0.4 + 1.2 * p;\n\nconst mid = (a: Point, b: Point): Point => ({ x: (a.x + b.x) / 2, y: (a.y + b.y) / 2, p: (a.p + b.p) / 2 });\n\n/**\n * Segment `i` (1 ≤ i < n) of a stroke: a quadratic from the midpoint before sample\n * `i - 1` to the midpoint after it, with the sample as the control point. The live\n * drawing and the full repaint both go through here, so a stroke looks the same\n * before and after a resize.\n */\nfunction drawSegment(ctx: CanvasRenderingContext2D, pts: Stroke, i: number, scale: number, width: number) {\n  const a = i === 1 ? pts[0] : mid(pts[i - 2], pts[i - 1]);\n  const c = pts[i - 1];\n  const b = mid(pts[i - 1], pts[i]);\n  ctx.lineWidth = width * scale * pressureWidth((a.p + b.p) / 2);\n  ctx.beginPath();\n  ctx.moveTo(a.x * scale, a.y * scale);\n  ctx.quadraticCurveTo(c.x * scale, c.y * scale, b.x * scale, b.y * scale);\n  ctx.stroke();\n}\n\n/** The last half-segment, from the final midpoint to the final sample. Drawn once the\n *  stroke is finished — while drawing, the pen is still there and it would be redrawn\n *  on every move. A single tap is a dot. */\nfunction drawTail(ctx: CanvasRenderingContext2D, pts: Stroke, scale: number, width: number) {\n  const last = pts[pts.length - 1];\n  if (pts.length === 1) {\n    ctx.beginPath();\n    ctx.arc(last.x * scale, last.y * scale, (width * scale * pressureWidth(last.p)) / 2, 0, Math.PI * 2);\n    ctx.fill();\n    return;\n  }\n  const from = pts.length === 2 ? pts[0] : mid(pts[pts.length - 2], last);\n  ctx.lineWidth = width * scale * pressureWidth(last.p);\n  ctx.beginPath();\n  ctx.moveTo(from.x * scale, from.y * scale);\n  ctx.lineTo(last.x * scale, last.y * scale);\n  ctx.stroke();\n}\n\nfunction prepare(ctx: CanvasRenderingContext2D, ink: string, dpr: number) {\n  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n  ctx.lineCap = \"round\";\n  ctx.lineJoin = \"round\";\n  ctx.strokeStyle = ink;\n  ctx.fillStyle = ink;\n}\n\n/** A typed name, as large as fits, on the pad's baseline. */\nfunction drawName(ctx: CanvasRenderingContext2D, name: string, w: number, h: number) {\n  let size = Math.min(48, h * 0.45);\n  ctx.font = `italic ${size}px ${SCRIPT_FONT}`;\n  const room = w * 0.85;\n  const measured = ctx.measureText(name).width;\n  if (measured > room) {\n    size = Math.max(12, (size * room) / measured);\n    ctx.font = `italic ${size}px ${SCRIPT_FONT}`;\n  }\n  ctx.textAlign = \"center\";\n  ctx.textBaseline = \"alphabetic\";\n  ctx.fillText(name, w / 2, h * 0.68);\n}\n\n/* ── The component ───────────────────────────────────────────────────────── */\n\nexport const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(function SignaturePad(\n  {\n    label,\n    description,\n    onChange,\n    onSave,\n    disabled,\n    invalid,\n    error,\n    allowTypedName,\n    exportInk = DEFAULT_EXPORT_INK,\n    exportBackground,\n    lineWidth = 2.5,\n    canvasClassName,\n    labels: labelsProp,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  // Prop > <UiKitProvider> > English, like every labelled component in the kit.\n  const labels = useKitLabels(\"signaturePad\", DEFAULT_SIGNATURE_PAD_LABELS, labelsProp);\n  const { announce, regionProps } = useAnnounce();\n  const labelId = useId();\n  const descId = useId();\n  const statusId = useId();\n  const errorId = useId();\n\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  /**\n   * What is on the pad lives in a ref, not in state: a pointer move must not\n   * re-render, and `onChange` has to see the pad AFTER a change, from inside the\n   * handler that made it — before React has rendered anything. The state below\n   * mirrors the parts the markup needs (empty or not, which mode, the field's text).\n   */\n  const scene = useRef<{ strokes: Stroke[]; mode: \"drawn\" | \"typed\"; name: string }>({\n    strokes: [],\n    mode: \"drawn\",\n    name: \"\",\n  });\n  const live = useRef<{ id: number; stroke: Stroke } | null>(null);\n  /**\n   * The canvas width, in CSS px, the stored points are relative to. Fixed by the\n   * first stroke; a later resize scales the drawing UNIFORMLY by `width / refWidth`,\n   * so a rotated phone shows the same signature larger or smaller, never stretched.\n   */\n  const refWidth = useRef(0);\n  const [strokeCount, setStrokeCount] = useState(0);\n  const [mode, setMode] = useState<\"drawn\" | \"typed\">(\"drawn\");\n  const [typedName, setTypedName] = useState(\"\");\n\n  const typed = mode === \"typed\";\n  const isEmpty = typed ? typedName.trim() === \"\" : strokeCount === 0;\n\n  // Everything the paint and export paths read that can change between renders, so\n  // the observers below subscribe once instead of on every keystroke.\n  const opts = useRef({ lineWidth, exportInk, exportBackground });\n  useEffect(() => {\n    opts.current = { lineWidth, exportInk, exportBackground };\n  }, [lineWidth, exportInk, exportBackground]);\n\n  const sceneEmpty = () => {\n    const s = scene.current;\n    return s.mode === \"typed\" ? s.name.trim() === \"\" : s.strokes.length === 0;\n  };\n\n  /** The whole scene, painted into `ctx` at `w`×`h` CSS px. */\n  const paintInto = useCallback((ctx: CanvasRenderingContext2D, ink: string, w: number, h: number, dpr: number) => {\n    const { lineWidth: width } = opts.current;\n    const s = scene.current;\n    prepare(ctx, ink, dpr);\n    if (s.mode === \"typed\") {\n      if (s.name.trim()) drawName(ctx, s.name.trim(), w, h);\n      return;\n    }\n    const scale = refWidth.current > 0 ? w / refWidth.current : 1;\n    for (const stroke of s.strokes) {\n      for (let i = 1; i < stroke.length; i += 1) drawSegment(ctx, stroke, i, scale, width);\n      drawTail(ctx, stroke, scale, width);\n    }\n    const pending = live.current?.stroke;\n    if (pending) for (let i = 1; i < pending.length; i += 1) drawSegment(ctx, pending, i, scale, width);\n  }, []);\n\n  /** The ink on screen: the canvas's own computed `color`, i.e. `--text-primary`. */\n  const screenInk = (canvas: HTMLCanvasElement) =>\n    // Read as `color` rather than as the custom property: `--text-primary` is whatever\n    // the palette wrote (a `color-mix()` in some presets), which a 2D context may not\n    // parse; `color` has already been resolved by the browser.\n    getComputedStyle(canvas).color || opts.current.exportInk;\n\n  /** Repaint the visible canvas from the scene, in the theme's ink. */\n  const repaint = useCallback(() => {\n    const canvas = canvasRef.current;\n    const ctx = canvas?.getContext(\"2d\");\n    if (!canvas || !ctx) return;\n    const dpr = window.devicePixelRatio || 1;\n    ctx.setTransform(1, 0, 0, 1, 0, 0);\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    paintInto(ctx, screenInk(canvas), canvas.width / dpr, canvas.height / dpr, dpr);\n  }, [paintInto]);\n\n  /** Size the bitmap to the element × devicePixelRatio, then repaint. */\n  const resize = useCallback(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const rect = canvas.getBoundingClientRect();\n    const dpr = window.devicePixelRatio || 1;\n    const w = Math.round(rect.width * dpr);\n    const h = Math.round(rect.height * dpr);\n    // Assigning `width` clears the bitmap even when the value is unchanged, so only\n    // when it moved — and the repaint puts the strokes back either way.\n    if (canvas.width !== w) canvas.width = w;\n    if (canvas.height !== h) canvas.height = h;\n    repaint();\n  }, [repaint]);\n\n  useLayoutEffect(() => {\n    resize();\n  }, [resize]);\n\n  // A changed base width redraws what is already there.\n  useEffect(() => {\n    repaint();\n  }, [lineWidth, repaint]);\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const cleanups: Array<() => void> = [];\n    if (typeof ResizeObserver !== \"undefined\") {\n      const ro = new ResizeObserver(() => resize());\n      ro.observe(canvas);\n      cleanups.push(() => ro.disconnect());\n    }\n    // The ink follows the theme, and the theme is a class (`.dark`) or inline\n    // variables (the palette store) on <html> — neither of which tells a canvas.\n    if (typeof MutationObserver !== \"undefined\") {\n      const mo = new MutationObserver(() => repaint());\n      mo.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\", \"style\", \"data-theme\"] });\n      cleanups.push(() => mo.disconnect());\n    }\n    const mq = typeof window.matchMedia === \"function\" ? window.matchMedia(\"(prefers-color-scheme: dark)\") : null;\n    if (mq?.addEventListener) {\n      mq.addEventListener(\"change\", repaint);\n      cleanups.push(() => mq.removeEventListener(\"change\", repaint));\n    }\n    return () => cleanups.forEach((fn) => fn());\n  }, [resize, repaint]);\n\n  /** The PNG, re-rendered off-screen in the export ink — `null` while empty. */\n  const exportPng = useCallback((): string | null => {\n    const canvas = canvasRef.current;\n    if (!canvas || sceneEmpty()) return null;\n    const { exportInk: ink, exportBackground: bg } = opts.current;\n    const dpr = window.devicePixelRatio || 1;\n    const out = document.createElement(\"canvas\");\n    out.width = canvas.width;\n    out.height = canvas.height;\n    const ctx = out.getContext(\"2d\");\n    if (!ctx) return null;\n    if (bg) {\n      ctx.fillStyle = bg;\n      ctx.fillRect(0, 0, out.width, out.height);\n    }\n    paintInto(ctx, ink, out.width / dpr, out.height / dpr, dpr);\n    return out.toDataURL(\"image/png\");\n  }, [paintInto]);\n\n  const detail = (): SignatureDetail => {\n    const s = scene.current;\n    return s.mode === \"typed\" ? { method: \"typed\", typedName: s.name.trim() } : { method: \"drawn\" };\n  };\n\n  /** After every change to the scene: sync the markup's mirror, repaint, tell the host. */\n  const onChangeRef = useRef(onChange);\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n  const commit = () => {\n    const s = scene.current;\n    setStrokeCount(s.strokes.length);\n    setMode(s.mode);\n    setTypedName(s.name);\n    repaint();\n    onChangeRef.current?.(exportPng(), detail());\n  };\n\n  const clearScene = () => {\n    scene.current = { ...scene.current, strokes: [], name: \"\" };\n    live.current = null;\n    refWidth.current = 0;\n    commit();\n  };\n\n  useImperativeHandle(ref, () => ({ clear: clearScene, toDataURL: exportPng, isEmpty: sceneEmpty }));\n\n  /* ── Pointer ── */\n\n  const toPoint = (e: { clientX: number; clientY: number; pressure: number; pointerType: string }, rect: DOMRect): Point => {\n    const scale = refWidth.current > 0 && rect.width > 0 ? rect.width / refWidth.current : 1;\n    return {\n      x: (e.clientX - rect.left) / scale,\n      y: (e.clientY - rect.top) / scale,\n      // Only a pen's pressure means anything: a mouse reports 0.5 while pressed and\n      // touch hardware reports 0, 1 or noise.\n      p: e.pointerType === \"pen\" && e.pressure > 0 ? e.pressure : 0.5,\n    };\n  };\n\n  const onPointerDown = (e: ReactPointerEvent<HTMLCanvasElement>) => {\n    // One stroke at a time: a palm resting beside the pen is a second pointer.\n    if (disabled || typed || live.current) return;\n    if (e.pointerType === \"mouse\" && e.button !== 0) return;\n    e.preventDefault();\n    const canvas = e.currentTarget;\n    canvas.setPointerCapture?.(e.pointerId);\n    const rect = canvas.getBoundingClientRect();\n    if (refWidth.current === 0) refWidth.current = rect.width || 1;\n    live.current = { id: e.pointerId, stroke: [toPoint(e, rect)] };\n  };\n\n  const onPointerMove = (e: ReactPointerEvent<HTMLCanvasElement>) => {\n    const pending = live.current;\n    if (!pending || pending.id !== e.pointerId) return;\n    e.preventDefault();\n    const canvas = e.currentTarget;\n    const rect = canvas.getBoundingClientRect();\n    // Coalesced events: the samples the browser merged into this one move. A fast\n    // flick on a 120 Hz pen is otherwise a handful of long straight chords.\n    const samples = e.nativeEvent.getCoalescedEvents?.() ?? [];\n    const events = samples.length > 0 ? samples : [e];\n    const ctx = canvas.getContext(\"2d\");\n    if (ctx) prepare(ctx, screenInk(canvas), window.devicePixelRatio || 1);\n    const scale = refWidth.current > 0 && rect.width > 0 ? rect.width / refWidth.current : 1;\n    for (const ev of events) {\n      pending.stroke.push(toPoint(ev, rect));\n      // Only the newest segment — a full repaint per move is O(ink) on every event.\n      if (ctx) drawSegment(ctx, pending.stroke, pending.stroke.length - 1, scale, opts.current.lineWidth);\n    }\n  };\n\n  const endStroke = (e: ReactPointerEvent<HTMLCanvasElement>) => {\n    const pending = live.current;\n    if (!pending || pending.id !== e.pointerId) return;\n    e.currentTarget.releasePointerCapture?.(e.pointerId);\n    live.current = null;\n    scene.current = { ...scene.current, strokes: [...scene.current.strokes, pending.stroke] };\n    commit();\n  };\n\n  /* ── Buttons ── */\n\n  const undo = () => {\n    if (disabled || scene.current.strokes.length === 0) return;\n    const strokes = scene.current.strokes.slice(0, -1);\n    if (strokes.length === 0) refWidth.current = 0;\n    scene.current = { ...scene.current, strokes };\n    commit();\n    announce(labels.undone);\n  };\n\n  const clear = () => {\n    if (disabled || sceneEmpty()) return;\n    clearScene();\n    announce(labels.cleared);\n  };\n\n  const switchMode = () => {\n    if (disabled) return;\n    scene.current = { ...scene.current, mode: scene.current.mode === \"drawn\" ? \"typed\" : \"drawn\" };\n    commit();\n  };\n\n  const onTypedChange = (name: string) => {\n    scene.current = { ...scene.current, name };\n    commit();\n  };\n\n  const save = () => {\n    if (disabled) return;\n    const png = exportPng();\n    if (png) onSave?.(png, detail());\n  };\n\n  const hasError = error !== undefined && error !== null && error !== false && error !== \"\";\n  const isInvalid = Boolean(invalid) || hasError;\n  const describedBy = [descId, statusId, hasError ? errorId : null].filter(Boolean).join(\" \");\n\n  // `aria-disabled` rather than `disabled` on undo/clear: they disable THEMSELVES\n  // (clear empties the pad, the last undo does too), and a natively disabled button\n  // drops keyboard focus to <body> the moment it is activated.\n  const softDisabled = \"aria-disabled:cursor-not-allowed aria-disabled:opacity-50\";\n\n  return (\n    <div {...rest} className={cn(\"relative space-y-1.5\", className)} data-empty={isEmpty || undefined}>\n      <div>\n        <span id={labelId} className=\"block text-sm font-medium text-[var(--text-primary)]\">\n          {label ?? labels.label}\n        </span>\n        <p id={descId} className=\"text-xs text-[var(--text-muted)]\">\n          {description ?? labels.instructions}\n          {allowTypedName && !typed ? ` ${labels.typedFallbackHint}` : null}\n        </p>\n      </div>\n\n      <div className=\"relative\">\n        <canvas\n          ref={canvasRef}\n          role=\"img\"\n          aria-labelledby={labelId}\n          aria-describedby={describedBy}\n          // No `aria-invalid` / `aria-disabled`: `img` supports neither. The error\n          // reaches a screen reader through `aria-describedby`; the attributes below\n          // are for styling and tests.\n          data-invalid={isInvalid || undefined}\n          data-disabled={disabled || undefined}\n          onPointerDown={onPointerDown}\n          onPointerMove={onPointerMove}\n          onPointerUp={endStroke}\n          onPointerCancel={endStroke}\n          className={cn(\n            // `touch-none` stops the page scrolling under a finger that is signing.\n            \"block h-40 w-full touch-none select-none rounded-md border border-[var(--border)] bg-[var(--bg-surface)] text-[var(--text-primary)]\",\n            typed || disabled ? \"cursor-default\" : \"cursor-crosshair\",\n            disabled && \"opacity-60\",\n            isInvalid && FIELD_INVALID,\n            canvasClassName,\n          )}\n        />\n        {/* The signing line — where people expect to sign. Decoration only. */}\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-x-6 bottom-8 border-b border-dashed border-[var(--border-strong)]\"\n        />\n        <span id={statusId} className=\"sr-only\">\n          {isEmpty ? labels.empty : labels.signed}\n        </span>\n      </div>\n\n      {typed && (\n        <Input\n          label={labels.typedName}\n          value={typedName}\n          autoComplete=\"name\"\n          disabled={disabled}\n          onChange={(e) => onTypedChange(e.target.value)}\n        />\n      )}\n\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {!typed && (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            onClick={undo}\n            aria-disabled={disabled || strokeCount === 0 || undefined}\n            className={softDisabled}\n          >\n            <Undo2 aria-hidden=\"true\" className=\"size-4\" />\n            {labels.undo}\n          </Button>\n        )}\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          onClick={clear}\n          aria-disabled={disabled || isEmpty || undefined}\n          className={softDisabled}\n        >\n          <Eraser aria-hidden=\"true\" className=\"size-4\" />\n          {labels.clear}\n        </Button>\n        {allowTypedName && (\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={switchMode}\n            disabled={disabled}\n          >\n            {typed ? <PenLine aria-hidden=\"true\" className=\"size-4\" /> : <Keyboard aria-hidden=\"true\" className=\"size-4\" />}\n            {typed ? labels.useDrawn : labels.useTyped}\n          </Button>\n        )}\n        {onSave && (\n          <Button type=\"button\" variant=\"brand\" onClick={save} disabled={disabled || isEmpty} className=\"ms-auto\">\n            {labels.save}\n          </Button>\n        )}\n      </div>\n\n      {hasError && (\n        <p id={errorId} className=\"mt-1 text-[11px] leading-tight text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n      {/* Rendered from the start and never unmounted — see useAnnounce. */}\n      <div {...regionProps} />\n    </div>\n  );\n});\nSignaturePad.displayName = \"SignaturePad\";\n\n/* ── Read-only ───────────────────────────────────────────────────────────── */\n\nexport interface SignatureViewProps extends ComponentPropsWithoutRef<\"figure\"> {\n  /** The saved PNG — what `SignaturePad` handed to `onChange`/`onSave`, as stored. */\n  value?: string | null;\n  /**\n   * A signature given as a typed name (`detail.typedName`), for a host that stores the\n   * text rather than its PNG. Rendered in the same script face the pad draws it in.\n   * Ignored while `value` is set.\n   */\n  typedName?: string | null;\n  /** Visible caption above the signature; defaults to `labels.label`. `null` hides it\n   *  (the image keeps its alternative text) — for a signature block whose own heading\n   *  already says whose signature it is. */\n  label?: ReactNode;\n  /**\n   * The exported PNG is dark ink on a transparent ground (`exportInk`), which is\n   * invisible on the dark theme's surface. By default the image is colour-inverted\n   * under `.dark`, so the ink reads light; `false` keeps the pixels as stored — for a\n   * PNG exported with its own `exportBackground`, which inverting would turn black.\n   */\n  adaptInk?: boolean;\n  /** Classes for the frame — its height, chiefly (default `h-40`, the pad's). */\n  frameClassName?: string;\n  /** User-facing strings; see {@link SignaturePadLabels} (`view*`). */\n  labels?: Partial<SignaturePadLabels>;\n}\n\n/**\n * A saved signature, shown — the read side of {@link SignaturePad}: the same frame and\n * signing line, none of the drawing chrome (no canvas, buttons, instructions or live\n * region). A separate component rather than a `readOnly` pad because there is nothing\n * of the pad to reuse: the pad's scene is STROKES, and a stored signature is a PNG\n * (or a name) that cannot be turned back into them.\n *\n * Kastlan's handover protocol, reopened after signing, is the case: two signatures\n * that must be visible, and must not look editable.\n */\nexport function SignatureView({\n  value,\n  typedName,\n  label,\n  adaptInk = true,\n  frameClassName,\n  labels: labelsProp,\n  className,\n  ...rest\n}: SignatureViewProps) {\n  const labels = useKitLabels(\"signaturePad\", DEFAULT_SIGNATURE_PAD_LABELS, labelsProp);\n  const name = typedName?.trim() ?? \"\";\n  const kind = value ? \"drawn\" : name ? \"typed\" : \"empty\";\n  const caption = label === undefined ? labels.label : label;\n  const captionId = useId();\n  const captioned = caption !== null && caption !== false;\n  return (\n    <figure\n      // Named explicitly: the figcaption-to-figure name is not computed everywhere.\n      aria-labelledby={captioned ? captionId : undefined}\n      {...rest}\n      className={cn(\"m-0 space-y-1.5\", className)}\n      data-empty={kind === \"empty\" || undefined}\n    >\n      {captioned && (\n        <figcaption id={captionId} className=\"block text-sm font-medium text-[var(--text-primary)]\">{caption}</figcaption>\n      )}\n      <div\n        className={cn(\n          \"relative flex h-40 items-center justify-center overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)]\",\n          frameClassName,\n        )}\n      >\n        {kind === \"drawn\" && (\n          <img\n            src={value as string}\n            alt={labels.viewDrawn}\n            className={cn(\"relative max-h-full max-w-full object-contain\", adaptInk && \"dark:invert\")}\n          />\n        )}\n        {kind === \"typed\" && (\n          // One name for the whole thing: the visible text alone would be read as a bare\n          // name, with nothing saying it IS the signature.\n          <span\n            role=\"img\"\n            aria-label={labels.viewTyped(name)}\n            className=\"relative max-w-[85%] truncate px-2 text-4xl italic text-[var(--text-primary)]\"\n            style={{ fontFamily: SCRIPT_FONT }}\n          >\n            {name}\n          </span>\n        )}\n        {kind === \"empty\" && (\n          <span className=\"relative text-xs text-[var(--text-muted)]\">{labels.viewEmpty}</span>\n        )}\n        {/* The signing line, as on the pad. Decoration only. */}\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-x-6 bottom-8 border-b border-dashed border-[var(--border-strong)]\"\n        />\n      </div>\n    </figure>\n  );\n}\n"],"mappings":"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","names":["SignaturePad"]}

package/dist/components/swatch-picker.d.ts

@@ -0,0 +1,69 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import { TileSize } from './tile-radio.js';
+
+interface SwatchPickerLabels {
+    /** The "no colour" tile's name, when `allowNone` is set. */
+    none: string;
+    /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */
+    mixed: string;
+}
+declare const DEFAULT_SWATCH_PICKER_LABELS: SwatchPickerLabels;
+interface SwatchOption<T extends string> {
+    value: T;
+    /** Any CSS colour — a token (`var(--chart-3)`), a hex, an `oklch()`. Painted as an
+     *  inline background, so it does not have to be a class the kit's CSS knows.
+     *  Leave it out when `swatchClassName` paints the dot instead. */
+    color?: string;
+    /** The colour's name, in the user's language. Shown in the bubble and read out;
+     *  required, because a swatch with no name is a colour only some people can read. */
+    label: string;
+    /** Classes for the swatch dot, for a palette that lives in classes rather than
+     *  values (a light/dark pair). An inline `color` would win over a class, so pass
+     *  one or the other. */
+    swatchClassName?: string;
+    /** A remark read after the name and shown under it in the bubble ("used by
+     *  Groceries"). The tile wears a dot while it has one. */
+    note?: string;
+    disabled?: boolean;
+}
+/**
+ * `onChange` is the picker's own — the chosen VALUE, not a DOM event — so the div's
+ * is omitted rather than shadowed, as on {@link ToggleGroup}.
+ */
+interface SwatchPickerProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children" | "defaultValue"> {
+    options: SwatchOption<T>[];
+    /** The chosen colour, or `null` for none. */
+    value: T | null;
+    onChange: (value: T | null) => void;
+    /** Lead with a "no colour" tile whose value is `null`. Clearing a colour has to be
+     *  as reachable as setting one, and a radio cannot be unchecked by clicking it. */
+    allowNone?: boolean;
+    /**
+     * "Some of each" — a bulk edit over rows whose colours differ. Nothing is checked
+     * (not even "none", whatever `value` says), and the group is described as mixed.
+     * Distinct from `value={null}`, which is an answer: "no colour".
+     */
+    mixed?: boolean;
+    /** See {@link IconPickerProps.activation}. Default "automatic". */
+    activation?: "automatic" | "manual";
+    /** 28 / 32 / 44px tiles. Default "md"; "lg" is the touch-target size. */
+    size?: TileSize;
+    disabled?: boolean;
+    labels?: Partial<SwatchPickerLabels>;
+}
+/**
+ * A row of colour swatches that is one radio group.
+ *
+ * Name the group with `aria-label` or `aria-labelledby` — usually the visible heading
+ * above it. Each swatch is named by its `label` and shows it in a bubble on hover and
+ * focus, so the name is not the screen reader's alone.
+ *
+ * Keyboard (the APG radio group): Tab reaches the checked swatch, or the first one
+ * while nothing is checked; the arrow keys move between swatches and, by default,
+ * choose as they go; Home and End jump to the ends. Left and right follow the page's
+ * direction.
+ */
+declare function SwatchPicker<T extends string>({ options, value, onChange, allowNone, mixed, activation, size, disabled, labels, className, ...rest }: SwatchPickerProps<T>): react.JSX.Element;
+
+export { DEFAULT_SWATCH_PICKER_LABELS, type SwatchOption, SwatchPicker, type SwatchPickerLabels, type SwatchPickerProps };