@eifi1/ui-kit 0.48.1 → 0.49.0

package/dist/eslint/index.js

@@ -47,7 +47,7 @@ const roleUtilities = {
     };
   }
 };
-const VERSION = true ? "0.48.1" : "0.0.0-source";
+const VERSION = true ? "0.49.0" : "0.0.0-source";
 const recommended = {
   name: "@eifi1/ui-kit/recommended",
   // Not the tests, as check:tokens skips the kit's: a test names the old class to assert it

package/dist/feedback/feedback-inbox.js

@@ -237,7 +237,7 @@ function FeedbackNoteEditor({
           ),
           /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
             /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onCancel, children: cancelLabel }),
-            /* @__PURE__ */ jsx(Button, { variant: "brand", disabled: pending || blank, commit, onClick: submit, children: saveLabel })
+            /* @__PURE__ */ jsx(Button, { variant: "accent", disabled: pending || blank, commit, onClick: submit, children: saveLabel })
           ] })
         ]
       }

package/dist/feedback/feedback-inbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/feedback/feedback-inbox.tsx"],"sourcesContent":["import { useId, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"../components/button\";\nimport { Textarea } from \"../components/textarea\";\nimport type { ButtonSize, ButtonVariant } from \"../components/button-look\";\nimport { Tooltip } from \"../components/tooltip\";\nimport { useCommitReason, useWriteLock, type CommitScope } from \"../components/write-lock\";\nimport { FeedbackAttachmentField, type FeedbackAttachmentErrorInfo } from \"./feedback-attachment\";\nimport type { FeedbackAttachmentLabels } from \"./feedback-dialog\";\nimport { useFeedbackCategoryLabels, useFeedbackStatusLabels } from \"./feedback-labels\";\nimport {\n  FEEDBACK_CATEGORY_META,\n  FEEDBACK_STATUS_META,\n  type FeedbackCategory,\n  type FeedbackStatus,\n} from \"./feedback-vocabulary\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\n// The words module, not ./feedback-row-detail: that one imports this file.\nimport { DEFAULT_FEEDBACK_DETAIL_LABELS } from \"./feedback-row-detail-labels\";\n\n/**\n * The feedback **inbox**, as the parts two apps were each writing separately.\n *\n * `feedback-dialog.tsx` next door is the other half — the form somebody files a\n * report with — and the split between them is the same one: the kit owns the\n * *vocabulary*, the *policy* about how a report moves (both in\n * feedback-vocabulary.ts since 0.34, re-exported below), and the *look* (here);\n * the app owns the data, the API and every string.\n *\n * It exists because both apps had grown their own copy. Keksdose's is the one\n * this is lifted from, comments and all, because it is the one that had been\n * argued with users for a year — the glyph per status, the two sizes of the\n * status control, what a row offers from where it currently stands. Steering\n * Design's was thinner in every one of those places and read as a different\n * product for no reason anyone chose.\n *\n * **The report itself lives next door (0.27.0).** This file used to say there\n * was deliberately no `Feedback` type here: the apps stored a report differently\n * (a context JSON column and an object store in one, a `page_path` and the bytes\n * in the row in another). Marcel's feedback round (2026-10-04,\n * docs/feedback-harmonization.md §5) gave all three apps one contract, so the\n * shape is now shared — `FeedbackRecord` / `FeedbackContext` in\n * feedback-record.ts, with the constants and body helpers. The components HERE\n * still take the values they draw rather than a row, which keeps them usable\n * from any surface; the detail panel stays a *shell* the row detail fills.\n *\n * **The words are the kit's too (0.27.0).** The status and category names are\n * the `feedbackStatus` / `feedbackCategory` namespaces (feedback-labels.ts,\n * keksdose's wording), read by default by the badges and the transitions below;\n * a `label` the caller passes still wins.\n */\n\n// The vocabulary — statuses, categories, their glyphs and orders, the transitions — is\n// feedback-vocabulary.ts since 0.34 (MOD-1): data the top bar's feedback menu imports\n// without this file's components. Re-exported, so every name is still found here.\nexport {\n  FEEDBACK_CATEGORY_META,\n  FEEDBACK_CATEGORY_ORDER,\n  FEEDBACK_STATUS_META,\n  FEEDBACK_STATUS_ORDER,\n  feedbackCategoryRank,\n  nextFeedbackStatus,\n  selectableFeedbackStatuses,\n  visibleFeedbackStatuses,\n} from \"./feedback-vocabulary\";\nexport type { FeedbackCategory, FeedbackStatus } from \"./feedback-vocabulary\";\n\n/**\n * The category as a badge.\n *\n * Falls back to OTHER's treatment for a category this build has never heard of,\n * so an older client against a newer API degrades to a readable neutral pill\n * instead of throwing on `meta.icon` — a crash report must not be able to cause\n * one. The *label* gets the same guard: by default the `feedbackCategory`\n * namespace's word (0.27.0), and for a value it has no word for, what OTHER is\n * called.\n */\nexport function FeedbackCategoryBadge({\n  category,\n  label,\n  compact = false,\n  className,\n}: {\n  category: FeedbackCategory;\n  /** Over the `feedbackCategory` label (0.27.0: optional — before, every app passed\n   *  its own translation). */\n  label?: ReactNode;\n  compact?: boolean;\n  className?: string;\n}) {\n  const names = useFeedbackCategoryLabels();\n  // Annotated `| undefined` because the Record's index signature promises a hit\n  // for every FeedbackCategory, and at runtime the API can hand us one that is not.\n  const known: (typeof FEEDBACK_CATEGORY_META)[\"OTHER\"] | undefined = FEEDBACK_CATEGORY_META[category];\n  const meta = known ?? FEEDBACK_CATEGORY_META.OTHER;\n  const Icon = meta.icon;\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center gap-1 rounded font-medium\",\n        compact ? \"px-1.5 py-0.5 text-caption\" : \"px-2 py-0.5 text-xs\",\n        meta.badgeBg,\n        meta.badgeText,\n        className,\n      )}\n    >\n      <Icon className={compact ? \"size-3\" : \"size-3.5\"} aria-hidden />\n      {label ?? (known ? names[category] : names.OTHER)}\n    </span>\n  );\n}\n\n/** Where a report stands, as a badge — for the places that only *report* the\n *  status rather than offering to change it. Named by the `feedbackStatus`\n *  namespace unless `label` says otherwise (0.27.0); a status this build has never\n *  heard of shows OPEN's look and its own raw value, never OPEN's name. */\nexport function FeedbackStatusBadge({\n  status,\n  label,\n  className,\n}: {\n  status: FeedbackStatus;\n  /** Over the `feedbackStatus` label (0.27.0: optional). */\n  label?: ReactNode;\n  className?: string;\n}) {\n  const names = useFeedbackStatusLabels();\n  const meta = FEEDBACK_STATUS_META[status] ?? FEEDBACK_STATUS_META.OPEN;\n  const name: string | undefined = names[status];\n  const Icon = meta.icon;\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center gap-1 whitespace-nowrap rounded px-1.5 py-0.5 text-caption font-medium\",\n        meta.activeBg,\n        meta.activeText,\n        className,\n      )}\n    >\n      <Icon className=\"size-3\" aria-hidden />\n      {label ?? name ?? status}\n    </span>\n  );\n}\n\n/**\n * A row of statuses to switch a report to — either a table column's icon row or\n * an expanded panel's labelled pills.\n *\n * One component for both, because everything except the class strings is the\n * same decision: which one is current, and when the buttons are disabled. Two\n * copies had already drifted — only the icon variant carried `aria-label` and\n * `aria-pressed`, so the pill row was unlabelled for a screen reader.\n *\n * WHICH statuses to offer is the caller's, not this component's:\n * {@link visibleFeedbackStatuses} for a compact column,\n * {@link selectableFeedbackStatuses} for an expanded row. Passing the list keeps\n * that policy readable at the two call sites instead of hiding it behind\n * `variant`.\n */\nexport function FeedbackStatusTransitions({\n  status,\n  statuses,\n  canEdit,\n  onPick,\n  variant,\n  label,\n  commit,\n  disabledReason: ownDisabledReason,\n  className,\n}: {\n  status: FeedbackStatus;\n  statuses: FeedbackStatus[];\n  canEdit: boolean;\n  onPick: (status: FeedbackStatus) => void;\n  variant: \"icon\" | \"pill\";\n  /** What each status is called. Default (0.27.0): the `feedbackStatus` namespace —\n   *  before, every app passed its own translation. */\n  label?: (status: FeedbackStatus) => string;\n  /**\n   * Every button here SAVES the moment it is pressed (0.27.0) — opt in and, under a\n   * locked {@link WriteLockProvider}, the row stays as it is and says why: each status\n   * the row could move to is `aria-disabled` but focusable, the click does nothing, and\n   * the lock's reason is in the kit Tooltip and the button's description — the\n   * `disabledReason` path `Button` takes. Off by default: a feedback inbox is not what\n   * every app's lock is about (keksdose's shell lock is a read-only demo BUDGET, and a\n   * report is not budget data).\n   */\n  commit?: CommitScope;\n  /** Why the statuses cannot be changed right now, the same way (a lock's own reason\n   *  wins over it). Only read while `canEdit`: a read-only row is a picture of the\n   *  workflow, not a refused action. */\n  disabledReason?: ReactNode;\n  className?: string;\n}) {\n  const names = useFeedbackStatusLabels();\n  const nameOf = label ?? ((value: FeedbackStatus) => names[value]);\n  const reason = useCommitReason(commit, ownDisabledReason);\n  const locked = canEdit && reason !== undefined && reason !== null && reason !== false && reason !== \"\";\n  const reasonId = useId();\n  return (\n    // Not a control: it only stops clicks on the buttons inside from bubbling to\n    // the row. The buttons are the keyboard path, and Enter/Space on them fires\n    // their own click, which lands here the same way.\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- propagation guard around real buttons\n    <div\n      className={cn(variant === \"icon\" ? \"flex items-center gap-0.5\" : \"flex flex-wrap gap-1.5\", className)}\n      // A status control inside a clickable row must not also open the row.\n      onClick={(event) => event.stopPropagation()}\n    >\n      {locked && (\n        <span id={reasonId} hidden>\n          {reason}\n        </span>\n      )}\n      {statuses.map((value) => {\n        const meta = FEEDBACK_STATUS_META[value];\n        const Icon = meta.icon;\n        const active = status === value;\n        const name = nameOf(value);\n        // Locked: focusable and described, never firing (see `commit`). The current\n        // status stays natively disabled — it was never something to press.\n        const refused = locked && !active;\n        const button = (\n          <button\n            key={value}\n            type=\"button\"\n            disabled={refused ? undefined : !canEdit || active}\n            aria-disabled={refused || undefined}\n            aria-describedby={refused ? reasonId : undefined}\n            onClick={() => {\n              if (!refused) onPick(value);\n            }}\n            aria-label={name}\n            aria-pressed={active}\n            className={cn(\n              \"transition-colors\",\n              variant === \"icon\"\n                ? cn(\n                    \"flex size-7 items-center justify-center rounded\",\n                    active\n                      ? cn(meta.activeBg, meta.activeText)\n                      : \"text-placeholder hover:text-secondary\",\n                  )\n                : cn(\n                    \"inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium\",\n                    active\n                      ? cn(meta.activeBg, meta.activeText, \"border-transparent\")\n                      : // The translucent ink on hover (0.33, B′), as Button's secondary:\n                        // the well is the page in light, and these pills sit on either.\n                        \"border-subtle bg-transparent text-primary hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]\",\n                  ),\n              // Both stay unclickable, but only the read-only case is DIMMED: the\n              // current status is the one thing in the row that has to be legible\n              // at a glance, and among eight pills a faded active one reads as\n              // \"unavailable\" rather than as \"this is where the row stands\".\n              (!canEdit || active) && \"cursor-default\",\n              !canEdit && \"opacity-60\",\n              refused && \"cursor-not-allowed opacity-50\",\n            )}\n          >\n            <Icon className={variant === \"icon\" ? \"size-4\" : \"size-3.5\"} aria-hidden />\n            {variant === \"pill\" && name}\n          </button>\n        );\n        // Locked, the bubble says WHY in both variants; the icon's name is still its\n        // `aria-label`, and the reason its description — the hidden copy above, which\n        // stays put, rather than the bubble (as on `Button`: the FRAGMENT keeps Tooltip\n        // from adding the bubble as a second, coming-and-going description).\n        if (refused) {\n          return (\n            <Tooltip key={value} label={reason} side=\"top\" portal={variant === \"icon\" || undefined}>\n              <>{button}</>\n            </Tooltip>\n          );\n        }\n        // The icon row has no visible label, so it needs the tooltip; the pills\n        // carry theirs inline.\n        //\n        // ⚠️ ABOVE, and portalled (Keksdose live #339). `side=\"bottom\"` put the bubble\n        // straight over the NEXT ROW's icons — in a queue you triage by running down it\n        // with the pointer, that is the row you are about to reach, and it was covered\n        // every time you paused on one. Above covers the row you have just left instead.\n        //\n        // `portal` is not cosmetic here. An absolutely-positioned bubble is clipped by\n        // any ancestor that scrolls — this cell lives inside the DataTable's own\n        // scroller — and it cannot flip: `placeTooltip` is what moves the bubble below\n        // the icon for the FIRST row, where there is no room above it, instead of\n        // painting it off the top of the list.\n        return variant === \"icon\" ? (\n          <Tooltip key={value} label={name} side=\"top\" portal>\n            {button}\n          </Tooltip>\n        ) : (\n          button\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * A textarea and its two buttons — for an outcome, for a note sent back with a\n * report, for a body being corrected.\n *\n * One component because all three are the same gesture: a draft that is not\n * committed until it is saved. Ctrl/⌘+Enter submits, which is the same shortcut\n * the compose dialog next door uses, so the habit carries across the feature.\n *\n * ## `initial` seeds the draft; it does not own it (changed 2026-09-22)\n *\n * This used to re-seed from `initial` in an effect, and that effect threw away\n * whatever was in the box — **and the picture attached to it** — every time the\n * prop arrived with a different value. `initial` is normally the saved note, so\n * the list refreshing under the editor, or the owner re-deriving the same string,\n * was enough: a triager halfway through a reply, with a screenshot picked out,\n * lost both and got the saved text back with no way to undo it.\n *\n * A draft belongs to the thing being edited, so switching to a different note is a\n * different editor — say so with a `key`:\n *\n * ```tsx\n * <FeedbackNoteEditor key={note.id} initial={note.body} … />\n * ```\n *\n * Where the id is not in hand at the call site, pass {@link resetKey} instead and\n * the editor re-seeds when THAT changes. Either way the decision is the caller's,\n * which is the point: the editor cannot tell a new subject from a new render.\n */\nexport function FeedbackNoteEditor({\n  initial,\n  pending,\n  onSave,\n  onCancel,\n  saveLabel,\n  cancelLabel,\n  placeholder,\n  label,\n  rows = 3,\n  attachment,\n  resetKey,\n  required = false,\n  commit,\n}: {\n  initial: string;\n  pending: boolean;\n  onSave: (value: string, attachment?: File | null) => void;\n  onCancel: () => void;\n  saveLabel: ReactNode;\n  cancelLabel: ReactNode;\n  /** A line above the field saying what to write, not an in-field placeholder:\n   *  a hint that disappears the moment somebody starts typing is a hint that is\n   *  gone exactly when it is being followed. */\n  placeholder?: ReactNode;\n  /** The box's accessible name (0.34). Without it the `placeholder` line names the\n   *  box, and without that the `feedbackDetail` namespace's `note` (\"Note\") does —\n   *  a box with neither was read out as just \"edit text\" (the showcase's axe check).\n   *  Given with a `placeholder`, this names the box and the line describes it. */\n  label?: string;\n  rows?: number;\n  /** Offer a picture with the note (Steering Design feedback #128). Omitted,\n   *  the editor is exactly the text box it always was — which is what the\n   *  *outcome* editor beside it wants, since an outcome is the answer rather\n   *  than the evidence. */\n  attachment?: FeedbackNoteAttachment;\n  /** Change this to say \"the editor is now editing something ELSE\", and the draft\n   *  and its attachment are dropped and re-seeded from `initial`. For call sites\n   *  that cannot put a `key` on the editor (see the note above). Leave it out and\n   *  the draft is never thrown away behind the user's back. */\n  resetKey?: string | number;\n  /**\n   * A blank note cannot be saved (0.27.0): Save stays disabled — and Ctrl/⌘+Enter does\n   * nothing — until the trimmed text is non-empty, and the box is `aria-required`. For\n   * the rework note, which the feedback contract requires (§3.4: a file alone cannot\n   * be sent; keksdose `feedback-page.tsx:577` dropped the click silently instead, so a\n   * press on Send with an empty box looked like a lost send). Default `false`: an\n   * outcome or a description may be cleared on purpose.\n   */\n  required?: boolean;\n  /** Save COMMITS (0.27.0): under a locked `WriteLockProvider` it is disabled the\n   *  `disabledReason` way, with the lock's reason, and Ctrl/⌘+Enter saves nothing. The\n   *  text box stays editable — nothing in it reaches the server until the save. */\n  commit?: CommitScope;\n}) {\n  const [draft, setDraft] = useState(initial);\n  const [file, setFile] = useState<File | null>(null);\n  // Adjusted during render rather than in an effect: an effect would paint the old\n  // draft first and then replace it, and — far worse — it is a second definition of\n  // when a draft dies that the caller cannot see. React re-runs this component\n  // immediately, before anything is committed to the screen.\n  const [seededFor, setSeededFor] = useState(resetKey);\n  if (resetKey !== seededFor) {\n    setSeededFor(resetKey);\n    setDraft(initial);\n    setFile(null);\n  }\n  // The editor's own root, which is where a paste made in the text box bubbles\n  // to: the attachment field below is the box's sibling, so a paste in the box\n  // never passes through the field's own subtree. It listens here instead\n  // (Steering Design feedback #140).\n  const root = useRef<HTMLDivElement>(null);\n  const hintId = useId();\n  const detailText = useKitLabels(\"feedbackDetail\", DEFAULT_FEEDBACK_DETAIL_LABELS);\n  // The lock as the save button sees it, with its scope (§12.36): `commit &&\n  // lock.locked` read a `{ except }` scope as `true`.\n  const lock = useWriteLock(commit ?? false);\n  const blank = required && !draft.trim();\n  // The shortcut obeys what the button shows: no save while one is in flight, while the\n  // note a `required` editor needs is missing, or while a `commit` save is locked.\n  const canSubmit = !pending && !blank && !lock.locked;\n  const submit = () => onSave(draft, file);\n  return (\n    // Not a control: a delegated Ctrl/Cmd+Enter shortcut for the textarea inside,\n    // which is what holds focus. The save button is the non-shortcut path.\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- delegated keyboard shortcut for the focused field\n    <div\n      ref={root}\n      className=\"space-y-2\"\n      onKeyDown={(event) => {\n        if ((event.ctrlKey || event.metaKey) && event.key === \"Enter\" && canSubmit) {\n          event.preventDefault();\n          submit();\n        }\n      }}\n    >\n      {/* The line names the box (0.27.0): it is the only text that says what to write\n          in it, and an unnamed textarea is read out as just \"edit text\". */}\n      {placeholder && (\n        <p id={hintId} className=\"text-xs text-muted\">\n          {placeholder}\n        </p>\n      )}\n      <Textarea\n        rows={rows}\n        value={draft}\n        onChange={(event) => setDraft(event.target.value)}\n        // Never nameless (round 0.34): the caller's `label`, else the line, else the\n        // `feedbackDetail` namespace's `note`. With both, the line describes the box.\n        aria-label={label ?? (placeholder ? undefined : detailText.note)}\n        aria-labelledby={placeholder && label === undefined ? hintId : undefined}\n        aria-describedby={placeholder && label !== undefined ? hintId : undefined}\n        aria-required={required || undefined}\n      />\n      {attachment && (\n        <FeedbackAttachmentField\n          value={file}\n          onChange={setFile}\n          // A pause while the save is in flight (the field's G5b `disabled`): the note\n          // goes out with the file AS IT WAS at the press, so a chip removed or added\n          // mid-send would be a lie about what was sent.\n          disabled={pending}\n          labels={attachment.labels}\n          accept={attachment.accept}\n          maxBytes={attachment.maxBytes}\n          onError={attachment.onError}\n          onCaptureScreenshot={attachment.onCaptureScreenshot}\n          buttonVariant={attachment.buttonVariant}\n          buttonSize={attachment.buttonSize}\n          // Within THIS editor's subtree, not on `document`: the editor sits\n          // inline on a page that has other fields, so a paste made in one of\n          // them is meant for that one. The textarea above is where the caret\n          // already is, and it is the field's sibling — so the field is told\n          // to listen on their common parent, where the paste bubbles to.\n          pasteFrom={root}\n        />\n      )}\n      <div className=\"flex justify-end gap-2\">\n        <Button variant=\"ghost\" onClick={onCancel}>\n          {cancelLabel}\n        </Button>\n        <Button variant=\"brand\" disabled={pending || blank} commit={commit} onClick={submit}>\n          {saveLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n\n/** What {@link FeedbackNoteEditor} needs in order to offer a picture with the\n *  note: the same things {@link FeedbackAttachmentField} takes, so the reply path is\n *  held to the app's own limits — and drawn in its own look — rather than the\n *  defaults. */\nexport interface FeedbackNoteAttachment {\n  /** Over the field's own `feedbackAttachment` namespace. Optional since 0.27.0 — the\n   *  field has read the provider's words since 0.7.0, so an app with a catalogue has\n   *  nothing to restate. */\n  labels?: LabelOverride<FeedbackAttachmentLabels>;\n  accept?: string[];\n  maxBytes?: number;\n  /** `info` (0.23.0) names the refused file and the limit. */\n  onError?: (kind: \"type\" | \"size\", info: FeedbackAttachmentErrorInfo) => void;\n  onCaptureScreenshot?: () => Promise<File | null>;\n  /**\n   * The add and capture buttons' look (0.25.0) — the field's `buttonVariant` (0.24.0),\n   * Button's own `variant`. Default `\"secondary\"`, as before.\n   *\n   * The note editor sits inline in a triage panel, and its buttons end in a ghost\n   * Cancel and a brand Save: two bordered full-size attachment buttons above them read\n   * as a second form. The field could already be told otherwise; the editor builds it\n   * itself and had nowhere to say so.\n   */\n  buttonVariant?: ButtonVariant;\n  /** The add and capture buttons' size (0.25.0) — the field's `buttonSize`. Default\n   *  `\"md\"`; `\"sm\"` draws their icons at 14px. */\n  buttonSize?: ButtonSize;\n}\n\n/**\n * One labelled block of an opened report.\n *\n * The detail panel is a stack of these, and it is a stack rather than a\n * component with fixed fields on purpose: the two apps keep a report's context\n * and its screenshot in genuinely different places, and a shell that insisted on\n * both would force one of them to invent a shape it does not have. What is\n * shared is what a section *looks* like — and that is all that made the two\n * panels read as different products.\n */\nexport function FeedbackDetailSection({\n  title,\n  action,\n  children,\n}: {\n  title: ReactNode;\n  /** Something on the title's own line — an edit button, a resolved-at date. */\n  action?: ReactNode;\n  children: ReactNode;\n}) {\n  return (\n    <div>\n      <div className=\"mb-1 flex items-center justify-between gap-2\">\n        <div className=\"text-xs font-medium uppercase tracking-wide text-muted\">\n          {title}\n        </div>\n        {action}\n      </div>\n      {children}\n    </div>\n  );\n}\n\n/** The stack a detail panel is. Here so the spacing between sections is decided\n *  once rather than by whichever app was written second. */\nexport function FeedbackDetail({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn(\"space-y-3 text-sm\", className)}>{children}</div>;\n}\n\n/** Prose inside a section — a body, an outcome, a note.\n *\n *  `whitespace-pre-wrap` is the whole component: a report is written in\n *  paragraphs, and a note appended to it later is separated by blank lines that\n *  carry the entire \"this arrived after the answer\" reading. */\nexport function FeedbackProse({ children, empty }: { children?: string; empty?: ReactNode }) {\n  if (!children) return <p className=\"text-placeholder\">{empty ?? \"—\"}</p>;\n  return (\n    <p className=\"whitespace-pre-wrap text-secondary\">{children}</p>\n  );\n}\n"],"mappings":"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","names":["FEEDBACK_CATEGORY_META","FEEDBACK_STATUS_META"]}
+{"version":3,"sources":["../../src/feedback/feedback-inbox.tsx"],"sourcesContent":["import { useId, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"../components/button\";\nimport { Textarea } from \"../components/textarea\";\nimport type { ButtonSize, ButtonVariant } from \"../components/button-look\";\nimport { Tooltip } from \"../components/tooltip\";\nimport { useCommitReason, useWriteLock, type CommitScope } from \"../components/write-lock\";\nimport { FeedbackAttachmentField, type FeedbackAttachmentErrorInfo } from \"./feedback-attachment\";\nimport type { FeedbackAttachmentLabels } from \"./feedback-dialog\";\nimport { useFeedbackCategoryLabels, useFeedbackStatusLabels } from \"./feedback-labels\";\nimport {\n  FEEDBACK_CATEGORY_META,\n  FEEDBACK_STATUS_META,\n  type FeedbackCategory,\n  type FeedbackStatus,\n} from \"./feedback-vocabulary\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\n// The words module, not ./feedback-row-detail: that one imports this file.\nimport { DEFAULT_FEEDBACK_DETAIL_LABELS } from \"./feedback-row-detail-labels\";\n\n/**\n * The feedback **inbox**, as the parts two apps were each writing separately.\n *\n * `feedback-dialog.tsx` next door is the other half — the form somebody files a\n * report with — and the split between them is the same one: the kit owns the\n * *vocabulary*, the *policy* about how a report moves (both in\n * feedback-vocabulary.ts since 0.34, re-exported below), and the *look* (here);\n * the app owns the data, the API and every string.\n *\n * It exists because both apps had grown their own copy. Keksdose's is the one\n * this is lifted from, comments and all, because it is the one that had been\n * argued with users for a year — the glyph per status, the two sizes of the\n * status control, what a row offers from where it currently stands. Steering\n * Design's was thinner in every one of those places and read as a different\n * product for no reason anyone chose.\n *\n * **The report itself lives next door (0.27.0).** This file used to say there\n * was deliberately no `Feedback` type here: the apps stored a report differently\n * (a context JSON column and an object store in one, a `page_path` and the bytes\n * in the row in another). Marcel's feedback round (2026-10-04,\n * docs/feedback-harmonization.md §5) gave all three apps one contract, so the\n * shape is now shared — `FeedbackRecord` / `FeedbackContext` in\n * feedback-record.ts, with the constants and body helpers. The components HERE\n * still take the values they draw rather than a row, which keeps them usable\n * from any surface; the detail panel stays a *shell* the row detail fills.\n *\n * **The words are the kit's too (0.27.0).** The status and category names are\n * the `feedbackStatus` / `feedbackCategory` namespaces (feedback-labels.ts,\n * keksdose's wording), read by default by the badges and the transitions below;\n * a `label` the caller passes still wins.\n */\n\n// The vocabulary — statuses, categories, their glyphs and orders, the transitions — is\n// feedback-vocabulary.ts since 0.34 (MOD-1): data the top bar's feedback menu imports\n// without this file's components. Re-exported, so every name is still found here.\nexport {\n  FEEDBACK_CATEGORY_META,\n  FEEDBACK_CATEGORY_ORDER,\n  FEEDBACK_STATUS_META,\n  FEEDBACK_STATUS_ORDER,\n  feedbackCategoryRank,\n  nextFeedbackStatus,\n  selectableFeedbackStatuses,\n  visibleFeedbackStatuses,\n} from \"./feedback-vocabulary\";\nexport type { FeedbackCategory, FeedbackStatus } from \"./feedback-vocabulary\";\n\n/**\n * The category as a badge.\n *\n * Falls back to OTHER's treatment for a category this build has never heard of,\n * so an older client against a newer API degrades to a readable neutral pill\n * instead of throwing on `meta.icon` — a crash report must not be able to cause\n * one. The *label* gets the same guard: by default the `feedbackCategory`\n * namespace's word (0.27.0), and for a value it has no word for, what OTHER is\n * called.\n */\nexport function FeedbackCategoryBadge({\n  category,\n  label,\n  compact = false,\n  className,\n}: {\n  category: FeedbackCategory;\n  /** Over the `feedbackCategory` label (0.27.0: optional — before, every app passed\n   *  its own translation). */\n  label?: ReactNode;\n  compact?: boolean;\n  className?: string;\n}) {\n  const names = useFeedbackCategoryLabels();\n  // Annotated `| undefined` because the Record's index signature promises a hit\n  // for every FeedbackCategory, and at runtime the API can hand us one that is not.\n  const known: (typeof FEEDBACK_CATEGORY_META)[\"OTHER\"] | undefined = FEEDBACK_CATEGORY_META[category];\n  const meta = known ?? FEEDBACK_CATEGORY_META.OTHER;\n  const Icon = meta.icon;\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center gap-1 rounded font-medium\",\n        compact ? \"px-1.5 py-0.5 text-caption\" : \"px-2 py-0.5 text-xs\",\n        meta.badgeBg,\n        meta.badgeText,\n        className,\n      )}\n    >\n      <Icon className={compact ? \"size-3\" : \"size-3.5\"} aria-hidden />\n      {label ?? (known ? names[category] : names.OTHER)}\n    </span>\n  );\n}\n\n/** Where a report stands, as a badge — for the places that only *report* the\n *  status rather than offering to change it. Named by the `feedbackStatus`\n *  namespace unless `label` says otherwise (0.27.0); a status this build has never\n *  heard of shows OPEN's look and its own raw value, never OPEN's name. */\nexport function FeedbackStatusBadge({\n  status,\n  label,\n  className,\n}: {\n  status: FeedbackStatus;\n  /** Over the `feedbackStatus` label (0.27.0: optional). */\n  label?: ReactNode;\n  className?: string;\n}) {\n  const names = useFeedbackStatusLabels();\n  const meta = FEEDBACK_STATUS_META[status] ?? FEEDBACK_STATUS_META.OPEN;\n  const name: string | undefined = names[status];\n  const Icon = meta.icon;\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center gap-1 whitespace-nowrap rounded px-1.5 py-0.5 text-caption font-medium\",\n        meta.activeBg,\n        meta.activeText,\n        className,\n      )}\n    >\n      <Icon className=\"size-3\" aria-hidden />\n      {label ?? name ?? status}\n    </span>\n  );\n}\n\n/**\n * A row of statuses to switch a report to — either a table column's icon row or\n * an expanded panel's labelled pills.\n *\n * One component for both, because everything except the class strings is the\n * same decision: which one is current, and when the buttons are disabled. Two\n * copies had already drifted — only the icon variant carried `aria-label` and\n * `aria-pressed`, so the pill row was unlabelled for a screen reader.\n *\n * WHICH statuses to offer is the caller's, not this component's:\n * {@link visibleFeedbackStatuses} for a compact column,\n * {@link selectableFeedbackStatuses} for an expanded row. Passing the list keeps\n * that policy readable at the two call sites instead of hiding it behind\n * `variant`.\n */\nexport function FeedbackStatusTransitions({\n  status,\n  statuses,\n  canEdit,\n  onPick,\n  variant,\n  label,\n  commit,\n  disabledReason: ownDisabledReason,\n  className,\n}: {\n  status: FeedbackStatus;\n  statuses: FeedbackStatus[];\n  canEdit: boolean;\n  onPick: (status: FeedbackStatus) => void;\n  variant: \"icon\" | \"pill\";\n  /** What each status is called. Default (0.27.0): the `feedbackStatus` namespace —\n   *  before, every app passed its own translation. */\n  label?: (status: FeedbackStatus) => string;\n  /**\n   * Every button here SAVES the moment it is pressed (0.27.0) — opt in and, under a\n   * locked {@link WriteLockProvider}, the row stays as it is and says why: each status\n   * the row could move to is `aria-disabled` but focusable, the click does nothing, and\n   * the lock's reason is in the kit Tooltip and the button's description — the\n   * `disabledReason` path `Button` takes. Off by default: a feedback inbox is not what\n   * every app's lock is about (keksdose's shell lock is a read-only demo BUDGET, and a\n   * report is not budget data).\n   */\n  commit?: CommitScope;\n  /** Why the statuses cannot be changed right now, the same way (a lock's own reason\n   *  wins over it). Only read while `canEdit`: a read-only row is a picture of the\n   *  workflow, not a refused action. */\n  disabledReason?: ReactNode;\n  className?: string;\n}) {\n  const names = useFeedbackStatusLabels();\n  const nameOf = label ?? ((value: FeedbackStatus) => names[value]);\n  const reason = useCommitReason(commit, ownDisabledReason);\n  const locked = canEdit && reason !== undefined && reason !== null && reason !== false && reason !== \"\";\n  const reasonId = useId();\n  return (\n    // Not a control: it only stops clicks on the buttons inside from bubbling to\n    // the row. The buttons are the keyboard path, and Enter/Space on them fires\n    // their own click, which lands here the same way.\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- propagation guard around real buttons\n    <div\n      className={cn(variant === \"icon\" ? \"flex items-center gap-0.5\" : \"flex flex-wrap gap-1.5\", className)}\n      // A status control inside a clickable row must not also open the row.\n      onClick={(event) => event.stopPropagation()}\n    >\n      {locked && (\n        <span id={reasonId} hidden>\n          {reason}\n        </span>\n      )}\n      {statuses.map((value) => {\n        const meta = FEEDBACK_STATUS_META[value];\n        const Icon = meta.icon;\n        const active = status === value;\n        const name = nameOf(value);\n        // Locked: focusable and described, never firing (see `commit`). The current\n        // status stays natively disabled — it was never something to press.\n        const refused = locked && !active;\n        const button = (\n          <button\n            key={value}\n            type=\"button\"\n            disabled={refused ? undefined : !canEdit || active}\n            aria-disabled={refused || undefined}\n            aria-describedby={refused ? reasonId : undefined}\n            onClick={() => {\n              if (!refused) onPick(value);\n            }}\n            aria-label={name}\n            aria-pressed={active}\n            className={cn(\n              \"transition-colors\",\n              variant === \"icon\"\n                ? cn(\n                    \"flex size-7 items-center justify-center rounded\",\n                    active\n                      ? cn(meta.activeBg, meta.activeText)\n                      : \"text-placeholder hover:text-secondary\",\n                  )\n                : cn(\n                    \"inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium\",\n                    active\n                      ? cn(meta.activeBg, meta.activeText, \"border-transparent\")\n                      : // The translucent ink on hover (0.33, B′), as Button's secondary:\n                        // the well is the page in light, and these pills sit on either.\n                        \"border-subtle bg-transparent text-primary hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]\",\n                  ),\n              // Both stay unclickable, but only the read-only case is DIMMED: the\n              // current status is the one thing in the row that has to be legible\n              // at a glance, and among eight pills a faded active one reads as\n              // \"unavailable\" rather than as \"this is where the row stands\".\n              (!canEdit || active) && \"cursor-default\",\n              !canEdit && \"opacity-60\",\n              refused && \"cursor-not-allowed opacity-50\",\n            )}\n          >\n            <Icon className={variant === \"icon\" ? \"size-4\" : \"size-3.5\"} aria-hidden />\n            {variant === \"pill\" && name}\n          </button>\n        );\n        // Locked, the bubble says WHY in both variants; the icon's name is still its\n        // `aria-label`, and the reason its description — the hidden copy above, which\n        // stays put, rather than the bubble (as on `Button`: the FRAGMENT keeps Tooltip\n        // from adding the bubble as a second, coming-and-going description).\n        if (refused) {\n          return (\n            <Tooltip key={value} label={reason} side=\"top\" portal={variant === \"icon\" || undefined}>\n              <>{button}</>\n            </Tooltip>\n          );\n        }\n        // The icon row has no visible label, so it needs the tooltip; the pills\n        // carry theirs inline.\n        //\n        // ⚠️ ABOVE, and portalled (Keksdose live #339). `side=\"bottom\"` put the bubble\n        // straight over the NEXT ROW's icons — in a queue you triage by running down it\n        // with the pointer, that is the row you are about to reach, and it was covered\n        // every time you paused on one. Above covers the row you have just left instead.\n        //\n        // `portal` is not cosmetic here. An absolutely-positioned bubble is clipped by\n        // any ancestor that scrolls — this cell lives inside the DataTable's own\n        // scroller — and it cannot flip: `placeTooltip` is what moves the bubble below\n        // the icon for the FIRST row, where there is no room above it, instead of\n        // painting it off the top of the list.\n        return variant === \"icon\" ? (\n          <Tooltip key={value} label={name} side=\"top\" portal>\n            {button}\n          </Tooltip>\n        ) : (\n          button\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * A textarea and its two buttons — for an outcome, for a note sent back with a\n * report, for a body being corrected.\n *\n * One component because all three are the same gesture: a draft that is not\n * committed until it is saved. Ctrl/⌘+Enter submits, which is the same shortcut\n * the compose dialog next door uses, so the habit carries across the feature.\n *\n * ## `initial` seeds the draft; it does not own it (changed 2026-09-22)\n *\n * This used to re-seed from `initial` in an effect, and that effect threw away\n * whatever was in the box — **and the picture attached to it** — every time the\n * prop arrived with a different value. `initial` is normally the saved note, so\n * the list refreshing under the editor, or the owner re-deriving the same string,\n * was enough: a triager halfway through a reply, with a screenshot picked out,\n * lost both and got the saved text back with no way to undo it.\n *\n * A draft belongs to the thing being edited, so switching to a different note is a\n * different editor — say so with a `key`:\n *\n * ```tsx\n * <FeedbackNoteEditor key={note.id} initial={note.body} … />\n * ```\n *\n * Where the id is not in hand at the call site, pass {@link resetKey} instead and\n * the editor re-seeds when THAT changes. Either way the decision is the caller's,\n * which is the point: the editor cannot tell a new subject from a new render.\n */\nexport function FeedbackNoteEditor({\n  initial,\n  pending,\n  onSave,\n  onCancel,\n  saveLabel,\n  cancelLabel,\n  placeholder,\n  label,\n  rows = 3,\n  attachment,\n  resetKey,\n  required = false,\n  commit,\n}: {\n  initial: string;\n  pending: boolean;\n  onSave: (value: string, attachment?: File | null) => void;\n  onCancel: () => void;\n  saveLabel: ReactNode;\n  cancelLabel: ReactNode;\n  /** A line above the field saying what to write, not an in-field placeholder:\n   *  a hint that disappears the moment somebody starts typing is a hint that is\n   *  gone exactly when it is being followed. */\n  placeholder?: ReactNode;\n  /** The box's accessible name (0.34). Without it the `placeholder` line names the\n   *  box, and without that the `feedbackDetail` namespace's `note` (\"Note\") does —\n   *  a box with neither was read out as just \"edit text\" (the showcase's axe check).\n   *  Given with a `placeholder`, this names the box and the line describes it. */\n  label?: string;\n  rows?: number;\n  /** Offer a picture with the note (Steering Design feedback #128). Omitted,\n   *  the editor is exactly the text box it always was — which is what the\n   *  *outcome* editor beside it wants, since an outcome is the answer rather\n   *  than the evidence. */\n  attachment?: FeedbackNoteAttachment;\n  /** Change this to say \"the editor is now editing something ELSE\", and the draft\n   *  and its attachment are dropped and re-seeded from `initial`. For call sites\n   *  that cannot put a `key` on the editor (see the note above). Leave it out and\n   *  the draft is never thrown away behind the user's back. */\n  resetKey?: string | number;\n  /**\n   * A blank note cannot be saved (0.27.0): Save stays disabled — and Ctrl/⌘+Enter does\n   * nothing — until the trimmed text is non-empty, and the box is `aria-required`. For\n   * the rework note, which the feedback contract requires (§3.4: a file alone cannot\n   * be sent; keksdose `feedback-page.tsx:577` dropped the click silently instead, so a\n   * press on Send with an empty box looked like a lost send). Default `false`: an\n   * outcome or a description may be cleared on purpose.\n   */\n  required?: boolean;\n  /** Save COMMITS (0.27.0): under a locked `WriteLockProvider` it is disabled the\n   *  `disabledReason` way, with the lock's reason, and Ctrl/⌘+Enter saves nothing. The\n   *  text box stays editable — nothing in it reaches the server until the save. */\n  commit?: CommitScope;\n}) {\n  const [draft, setDraft] = useState(initial);\n  const [file, setFile] = useState<File | null>(null);\n  // Adjusted during render rather than in an effect: an effect would paint the old\n  // draft first and then replace it, and — far worse — it is a second definition of\n  // when a draft dies that the caller cannot see. React re-runs this component\n  // immediately, before anything is committed to the screen.\n  const [seededFor, setSeededFor] = useState(resetKey);\n  if (resetKey !== seededFor) {\n    setSeededFor(resetKey);\n    setDraft(initial);\n    setFile(null);\n  }\n  // The editor's own root, which is where a paste made in the text box bubbles\n  // to: the attachment field below is the box's sibling, so a paste in the box\n  // never passes through the field's own subtree. It listens here instead\n  // (Steering Design feedback #140).\n  const root = useRef<HTMLDivElement>(null);\n  const hintId = useId();\n  const detailText = useKitLabels(\"feedbackDetail\", DEFAULT_FEEDBACK_DETAIL_LABELS);\n  // The lock as the save button sees it, with its scope (§12.36): `commit &&\n  // lock.locked` read a `{ except }` scope as `true`.\n  const lock = useWriteLock(commit ?? false);\n  const blank = required && !draft.trim();\n  // The shortcut obeys what the button shows: no save while one is in flight, while the\n  // note a `required` editor needs is missing, or while a `commit` save is locked.\n  const canSubmit = !pending && !blank && !lock.locked;\n  const submit = () => onSave(draft, file);\n  return (\n    // Not a control: a delegated Ctrl/Cmd+Enter shortcut for the textarea inside,\n    // which is what holds focus. The save button is the non-shortcut path.\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- delegated keyboard shortcut for the focused field\n    <div\n      ref={root}\n      className=\"space-y-2\"\n      onKeyDown={(event) => {\n        if ((event.ctrlKey || event.metaKey) && event.key === \"Enter\" && canSubmit) {\n          event.preventDefault();\n          submit();\n        }\n      }}\n    >\n      {/* The line names the box (0.27.0): it is the only text that says what to write\n          in it, and an unnamed textarea is read out as just \"edit text\". */}\n      {placeholder && (\n        <p id={hintId} className=\"text-xs text-muted\">\n          {placeholder}\n        </p>\n      )}\n      <Textarea\n        rows={rows}\n        value={draft}\n        onChange={(event) => setDraft(event.target.value)}\n        // Never nameless (round 0.34): the caller's `label`, else the line, else the\n        // `feedbackDetail` namespace's `note`. With both, the line describes the box.\n        aria-label={label ?? (placeholder ? undefined : detailText.note)}\n        aria-labelledby={placeholder && label === undefined ? hintId : undefined}\n        aria-describedby={placeholder && label !== undefined ? hintId : undefined}\n        aria-required={required || undefined}\n      />\n      {attachment && (\n        <FeedbackAttachmentField\n          value={file}\n          onChange={setFile}\n          // A pause while the save is in flight (the field's G5b `disabled`): the note\n          // goes out with the file AS IT WAS at the press, so a chip removed or added\n          // mid-send would be a lie about what was sent.\n          disabled={pending}\n          labels={attachment.labels}\n          accept={attachment.accept}\n          maxBytes={attachment.maxBytes}\n          onError={attachment.onError}\n          onCaptureScreenshot={attachment.onCaptureScreenshot}\n          buttonVariant={attachment.buttonVariant}\n          buttonSize={attachment.buttonSize}\n          // Within THIS editor's subtree, not on `document`: the editor sits\n          // inline on a page that has other fields, so a paste made in one of\n          // them is meant for that one. The textarea above is where the caret\n          // already is, and it is the field's sibling — so the field is told\n          // to listen on their common parent, where the paste bubbles to.\n          pasteFrom={root}\n        />\n      )}\n      <div className=\"flex justify-end gap-2\">\n        <Button variant=\"ghost\" onClick={onCancel}>\n          {cancelLabel}\n        </Button>\n        <Button variant=\"accent\" disabled={pending || blank} commit={commit} onClick={submit}>\n          {saveLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n\n/** What {@link FeedbackNoteEditor} needs in order to offer a picture with the\n *  note: the same things {@link FeedbackAttachmentField} takes, so the reply path is\n *  held to the app's own limits — and drawn in its own look — rather than the\n *  defaults. */\nexport interface FeedbackNoteAttachment {\n  /** Over the field's own `feedbackAttachment` namespace. Optional since 0.27.0 — the\n   *  field has read the provider's words since 0.7.0, so an app with a catalogue has\n   *  nothing to restate. */\n  labels?: LabelOverride<FeedbackAttachmentLabels>;\n  accept?: string[];\n  maxBytes?: number;\n  /** `info` (0.23.0) names the refused file and the limit. */\n  onError?: (kind: \"type\" | \"size\", info: FeedbackAttachmentErrorInfo) => void;\n  onCaptureScreenshot?: () => Promise<File | null>;\n  /**\n   * The add and capture buttons' look (0.25.0) — the field's `buttonVariant` (0.24.0),\n   * Button's own `variant`. Default `\"secondary\"`, as before.\n   *\n   * The note editor sits inline in a triage panel, and its buttons end in a ghost\n   * Cancel and a brand Save: two bordered full-size attachment buttons above them read\n   * as a second form. The field could already be told otherwise; the editor builds it\n   * itself and had nowhere to say so.\n   */\n  buttonVariant?: ButtonVariant;\n  /** The add and capture buttons' size (0.25.0) — the field's `buttonSize`. Default\n   *  `\"md\"`; `\"sm\"` draws their icons at 14px. */\n  buttonSize?: ButtonSize;\n}\n\n/**\n * One labelled block of an opened report.\n *\n * The detail panel is a stack of these, and it is a stack rather than a\n * component with fixed fields on purpose: the two apps keep a report's context\n * and its screenshot in genuinely different places, and a shell that insisted on\n * both would force one of them to invent a shape it does not have. What is\n * shared is what a section *looks* like — and that is all that made the two\n * panels read as different products.\n */\nexport function FeedbackDetailSection({\n  title,\n  action,\n  children,\n}: {\n  title: ReactNode;\n  /** Something on the title's own line — an edit button, a resolved-at date. */\n  action?: ReactNode;\n  children: ReactNode;\n}) {\n  return (\n    <div>\n      <div className=\"mb-1 flex items-center justify-between gap-2\">\n        <div className=\"text-xs font-medium uppercase tracking-wide text-muted\">\n          {title}\n        </div>\n        {action}\n      </div>\n      {children}\n    </div>\n  );\n}\n\n/** The stack a detail panel is. Here so the spacing between sections is decided\n *  once rather than by whichever app was written second. */\nexport function FeedbackDetail({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn(\"space-y-3 text-sm\", className)}>{children}</div>;\n}\n\n/** Prose inside a section — a body, an outcome, a note.\n *\n *  `whitespace-pre-wrap` is the whole component: a report is written in\n *  paragraphs, and a note appended to it later is separated by blank lines that\n *  carry the entire \"this arrived after the answer\" reading. */\nexport function FeedbackProse({ children, empty }: { children?: string; empty?: ReactNode }) {\n  if (!children) return <p className=\"text-placeholder\">{empty ?? \"—\"}</p>;\n  return (\n    <p className=\"whitespace-pre-wrap text-secondary\">{children}</p>\n  );\n}\n"],"mappings":"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","names":["FEEDBACK_CATEGORY_META","FEEDBACK_STATUS_META"]}

package/dist/hooks/use-anchored-panel.js

@@ -13,6 +13,7 @@ function readKeyboardInset({ minimum = MIN_KEYBOARD_PX } = {}) {
   const inset = Math.round(window.innerHeight - vv.height - vv.offsetTop);
   return inset >= minimum ? inset : 0;
 }
+const UNMEASURED_VIEWPORT = { top: 0, height: 0 };
 function readViewport() {
   if (typeof window === "undefined") return { top: 0, height: 0 };
   const vv = window.visualViewport;
@@ -89,7 +90,7 @@ function useVisualViewport(active) {
 }
 function useAnchoredPanel(ref, open, options = {}) {
   const rect = useAnchoredRect(ref, open);
-  const [viewport, setViewport] = useState(readViewport);
+  const [viewport, setViewport] = useState(UNMEASURED_VIEWPORT);
   const { scale } = useTextSize();
   const preferredHeight = (options.preferredHeight ?? 320) * scale;
   const minHeight = (options.minHeight ?? 160) * scale;

package/dist/hooks/use-anchored-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-anchored-panel.ts"],"sourcesContent":["import { useLayoutEffect, useState } from \"react\";\nimport type { RefObject } from \"react\";\nimport { useAnchoredRect, type AnchorRect } from \"./use-anchored-rect\";\nimport { useTextSize } from \"../theme/text-size\";\nimport type { Direction } from \"../lib/direction\";\n\n/**\n * Vertical placement for a portalled, `position: fixed` panel anchored to a trigger.\n *\n * The problem it solves (feedback #135): on a phone, opening a picker focuses its\n * search box, the on-screen keyboard slides up, and a panel pinned below a trigger in\n * the lower half of the screen ends up entirely behind that keyboard — with nothing\n * the user can do about it, because `position: fixed` does not scroll.\n *\n * The keyboard is invisible to the usual measurements: on Android Chrome the LAYOUT\n * viewport (`window.innerHeight`, and the origin `getBoundingClientRect` and\n * `position: fixed` are relative to) does not shrink when it opens. Only\n * `visualViewport` reports the region actually on screen, so that is what this reads.\n */\n\n/** The on-screen region, in layout-viewport coordinates. */\nexport interface ViewportBox {\n  top: number;\n  height: number;\n  /**\n   * The height of the LAYOUT viewport itself, which `position: fixed`'s `bottom` is\n   * measured from. Only {@link anchoredPanelPlacement} reads it, for a flipped panel's\n   * `bottom`. Defaults to `top + height`: the two are the same box whenever no keyboard\n   * and no zoom shrink the visible region.\n   */\n  layoutHeight?: number;\n}\n\n/**\n * Whether the page is pinch-zoomed (docs/text-size-harmonization.md §10.2). A zoom\n * shrinks `visualViewport.height` exactly like an on-screen keyboard does, so every\n * reader below must tell the two apart — and while zoomed, the answer is \"no keyboard\":\n * following a zoomed viewport would drag a pinned row on every pan, magnified, and the\n * browser already scrolls a focused field into view. The epsilon absorbs a scale of\n * 1.0000001 that some engines report at rest.\n */\nfunction isZoomed(vv: VisualViewport): boolean {\n  return vv.scale > 1.001;\n}\n\n/** Below this the \"keyboard\" is rounding noise or a browser UI strip — `innerHeight` and\n *  `visualViewport.height` routinely disagree by a pixel or two — and nothing should move\n *  (keksdose's `MIN_KEYBOARD_PX`). */\nconst MIN_KEYBOARD_PX = 100;\n\nexport interface KeyboardInsetOptions {\n  /** The smallest inset that counts as a keyboard. Default 100 px. */\n  minimum?: number;\n}\n\n/**\n * How many CSS px at the bottom of the LAYOUT viewport the on-screen keyboard covers, now\n * — the one guarded reader (§10.2), so the apps' copies go (keksdose's\n * `use-keyboard-inset.ts`):\n *\n * - 0 while the page is pinch-zoomed (`visualViewport.scale > 1`), where a smaller visual\n *   viewport is the zoom, not a keyboard;\n * - 0 below `minimum` (100 px), which is noise;\n * - 0 without `visualViewport` (SSR, jsdom, an old browser) and under\n *   `interactive-widget=resizes-content`, where `bottom: 0` already lands above the\n *   keyboard.\n *\n * Read it on `visualViewport`'s `resize` and `scroll` events (window `resize` as the\n * fallback); a bottom-anchored control lifts itself by the result.\n */\nexport function readKeyboardInset({ minimum = MIN_KEYBOARD_PX }: KeyboardInsetOptions = {}): number {\n  if (typeof window === \"undefined\") return 0;\n  const vv = window.visualViewport;\n  if (!vv || isZoomed(vv)) return 0;\n  const inset = Math.round(window.innerHeight - vv.height - vv.offsetTop);\n  return inset >= minimum ? inset : 0;\n}\n\nfunction readViewport(): ViewportBox {\n  if (typeof window === \"undefined\") return { top: 0, height: 0 };\n  const vv = window.visualViewport;\n  // The layout viewport's height is `innerHeight`, the reference `readKeyboardInset`\n  // measures the keyboard against. The keyboard leaves it alone (it shrinks only the\n  // VISUAL viewport; under `interactive-widget=resizes-content` it shrinks both, the\n  // fixed box with them), and it follows the mobile URL bar as it slides away, as a\n  // fixed box's `bottom` does. Not `documentElement.clientHeight`: on mobile Chrome and\n  // Safari that stays at the small, URL-bar-shown height, so with the bar scrolled away\n  // a flipped panel would sit that much too low, over its own field. `innerHeight`'s one\n  // error is a desktop page with a horizontal scrollbar, which it counts and the fixed\n  // box does not: the gap widens by the bar's thickness, and never closes.\n  const layoutHeight = window.innerHeight;\n  // offsetTop, not 0: with the keyboard up the user can also pan the visual viewport\n  // within the layout viewport, which shifts where \"visible\" starts.\n  return vv\n    ? { top: vv.offsetTop, height: vv.height, layoutHeight }\n    : { top: 0, height: window.innerHeight, layoutHeight };\n}\n\nexport interface AnchoredPanelOptions {\n  /** Space between trigger and panel. */\n  gap?: number;\n  /** Space kept clear at the viewport edges. */\n  margin?: number;\n  /** The height the panel would like, when there is room. In px at Normal text size:\n   *  {@link useAnchoredPanel} multiplies it by the size's scale, since what a panel\n   *  holds is rows of text (0.32, docs/text-size-harmonization.md §3.2). */\n  preferredHeight?: number;\n  /** Below this, the space under the trigger counts as unusable and a flip is considered.\n   *  In px at Normal, scaled likewise. */\n  minHeight?: number;\n}\n\n/**\n * `top` and `bottom` are the two edges of a panel exactly `maxHeight` tall. A panel is\n * sized by its content and `maxHeight` only caps it, so apply the edge on the trigger's\n * side, the one that holds whatever the height: `top` while the panel is below,\n * `bottom` (and no `top`) once it is flipped `above`.\n */\nexport interface AnchoredPanel {\n  /** The trigger's rect, or null while closed/unmeasured. */\n  rect: AnchorRect | null;\n  /** Viewport-space `top` for the panel — the one to apply while it is below. Flipped,\n   *  it is where a FULL-height panel's top would be, and a three-row list placed by it\n   *  floated far above its field (keksdose K1, live #401); place that one by `bottom`. */\n  top: number;\n  /** CSS `bottom` for a `position: fixed` panel: the distance from the layout\n   *  viewport's bottom edge up to the panel's. The one to apply once it is flipped\n   *  `above`: it keeps the panel's foot `gap` above the trigger however short its\n   *  content, and while a filtered list shrinks or grows under the user's typing. */\n  bottom: number;\n  /** Cap that keeps the panel inside the VISIBLE viewport — apply as `maxHeight`. */\n  maxHeight: number;\n  /** Whether the panel was flipped above the trigger. */\n  above: boolean;\n}\n\n/** Absolute floor: below this a list is useless, so overflow the margin instead. */\nconst FLOOR = 96;\n\n/** How much more room above must offer, when neither side fits the preferred height,\n *  before the panel changes sides — so it never jumps for a few pixels' gain. */\nconst FLIP_GAIN = 48;\n\n/**\n * The pure half of {@link useAnchoredPanel}: where a panel goes, given the trigger's\n * rect and the region actually on screen.\n *\n * Prefers below the trigger — the conventional direction, and the one that keeps the\n * trigger's own value visible — whenever the panel's preferred height fits there. When it\n * does not, the panel opens above if the full height fits there, or if above is clearly\n * roomier (by {@link FLIP_GAIN}); below an unusable `minHeight` it flips to any roomier\n * side, as before. It used to flip only below `minHeight`, so a select with 160–319 px\n * under it opened downward as a cramped list with 600 px free above (keksdose live #384,\n * the currency select of the new-budget form near the bottom of the screen). The\n * returned `maxHeight` is what makes the flip sufficient rather than merely different:\n * without it a tall panel placed above just runs off the top instead of the bottom.\n *\n * A flipped panel hangs from its BOTTOM edge, `gap` above the trigger, and is placed by\n * `bottom` (keksdose K1, live #401). It used to be placed by a `top` worked out as\n * though the panel were `maxHeight` tall, and a panel is only as tall as its content:\n * a three-row address list under a 256 px cap sat ~176 px above its field, on a phone\n * with the keyboard up. Only when even the {@link FLOOR} does not fit above does that\n * edge give way, as `top` always did, so the panel's head (a search box, often) stays\n * on screen rather than above it.\n *\n * Split out so the geometry is testable without a DOM and a fake keyboard — @hb/ui has\n * no test runner of its own, so this is exercised from the consuming app.\n */\nexport function anchoredPanelPlacement(\n  rect: Pick<AnchorRect, \"top\" | \"bottom\">,\n  viewport: ViewportBox,\n  { gap = 4, margin = 8, preferredHeight = 320, minHeight = 160 }: AnchoredPanelOptions = {},\n): Omit<AnchoredPanel, \"rect\"> {\n  const viewTop = viewport.top + margin;\n  const viewBottom = viewport.top + viewport.height - margin;\n  const spaceBelow = viewBottom - (rect.bottom + gap);\n  const spaceAbove = rect.top - gap - viewTop;\n  const above =\n    spaceAbove > spaceBelow &&\n    (spaceBelow < minHeight ||\n      (spaceBelow < preferredHeight && (spaceAbove >= preferredHeight || spaceAbove - spaceBelow >= FLIP_GAIN)));\n  const space = Math.max(FLOOR, above ? spaceAbove : spaceBelow);\n  const maxHeight = Math.min(preferredHeight, space);\n  // Unchanged, for the apps that call the hook and apply it: the edge to use below, and\n  // a full-height panel's top above. In layout-viewport space, like the rect.\n  const top = above ? Math.max(viewTop, rect.top - gap - maxHeight) : rect.bottom + gap;\n  // `bottom` counts up from the LAYOUT viewport's bottom edge, not the visible region's:\n  // `position: fixed` is laid out in the layout viewport, which runs on behind the\n  // keyboard, exactly as the rect is measured in it. The keyboard, the pan and the zoom\n  // are already in `maxHeight`, which keeps the panel's top inside what is on screen.\n  const layoutHeight = viewport.layoutHeight ?? viewport.top + viewport.height;\n  return { top, bottom: layoutHeight - (top + maxHeight), maxHeight, above };\n}\n\n/**\n * The glass a panel has to stay on, in CSS pixels — `window.innerWidth` is the wrong\n * width on a phone (keksdose run 72, live #381). There it is the LAYOUT viewport, and\n * that grows to the page's width as soon as anything sticks out past the screen: 430 on\n * a 406px screen in Chromium's mobile emulation, with `position: fixed` layers laid out\n * against the 430. A panel that had widened the page then measured itself as inside it.\n * The root element's client width is the initial containing block instead — the screen,\n * the width `100vw` and the media queries see — whatever overflows, and on a desktop it\n * also leaves a classic scrollbar out, which is where a fixed box's `right` is measured\n * from. It is 0 where nothing is laid out (jsdom), and the window is the answer there.\n * The height stays the window's: nothing measured grows it, and a phone's collapsing\n * toolbar makes the window the truer of the two.\n *\n * Tooltip's lesson, moved here so every anchored panel reads the same width (round 0.34\n * Wave 2, DUP-7).\n */\nexport function viewportSize(): { width: number; height: number } {\n  return {\n    width: document.documentElement.clientWidth || window.innerWidth,\n    height: window.innerHeight,\n  };\n}\n\nexport interface AnchoredInlineOptions {\n  /** The trigger's reading direction, which `start`, `end` and `after` follow. Default\n   *  `ltr`. A portalled panel has left the subtree it would inherit `dir` from, so read\n   *  it off the trigger (`dirOf`). */\n  dir?: Direction;\n  /**\n   * Which of the panel's edges lines up with which of the trigger's:\n   * - `start` / `end` — the panel's start (end) edge on the trigger's start (end) edge,\n   *   by reading direction: a picker hangs from its field's start, a popover from its\n   *   button's end;\n   * - `left` / `right` — the same, physically;\n   * - `after` — the panel's start edge on the trigger's END edge: beside it, as the\n   *   sidebar's flyout opens.\n   *\n   * Default `start`.\n   */\n  align?: \"start\" | \"end\" | \"left\" | \"right\" | \"after\";\n  /** The room kept from either edge of the glass, in px. Default 8. */\n  edge?: number;\n  /** The glass's width. Default {@link viewportSize}'s. */\n  viewportWidth?: number;\n}\n\n/** The horizontal place of a `position: fixed` panel: its `left`, and the `right` of the\n *  same box for a panel hung from its right edge (both in px, from the glass's edges). */\nexport interface InlinePlacement {\n  left: number;\n  right: number;\n}\n\n/**\n * The horizontal half of an anchored panel, beside {@link anchoredPanelPlacement}'s\n * vertical one (round 0.34 Wave 2, DUP-7): where a panel `panelWidth` wide goes against\n * the trigger's `rect`, kept `edge` px inside the glass ({@link viewportSize}).\n *\n * Popover, DropdownPanel, ComboboxPanel, HoverMenu and the AppShell flyout each wrote\n * this themselves, against three different widths: `innerWidth`, which on a phone is\n * the grown layout viewport and on a desktop counts the scrollbar; the root's client\n * width; and, for the entity picker's panel in a left-to-right form, no clamp at all.\n *\n * A panel wider than the room keeps its START on the glass — its left edge in a\n * left-to-right form, its right in a right-to-left one — as Tooltip's slide does: the\n * start of a row of text is the half worth keeping.\n */\nexport function anchoredInline(\n  rect: Pick<AnchorRect, \"left\" | \"right\">,\n  panelWidth: number,\n  { dir = \"ltr\", align = \"start\", edge = 8, viewportWidth = viewportSize().width }: AnchoredInlineOptions = {},\n): InlinePlacement {\n  const rtl = dir === \"rtl\";\n  // Where the panel's LEFT edge goes, before the clamp.\n  let wanted: number;\n  switch (align) {\n    case \"left\":\n      wanted = rect.left;\n      break;\n    case \"right\":\n      wanted = rect.right - panelWidth;\n      break;\n    case \"start\":\n      wanted = rtl ? rect.right - panelWidth : rect.left;\n      break;\n    case \"end\":\n      wanted = rtl ? rect.left : rect.right - panelWidth;\n      break;\n    case \"after\":\n      wanted = rtl ? rect.left - panelWidth : rect.right;\n      break;\n  }\n  const min = edge;\n  const max = viewportWidth - edge - panelWidth;\n  const left = max < min ? (rtl ? max : min) : Math.min(Math.max(wanted, min), max);\n  return { left, right: viewportWidth - left - panelWidth };\n}\n\n/**\n * The region actually on screen, tracked while `active` (Keksdose live #328).\n *\n * The same measurement {@link useAnchoredPanel} caps a dropdown with, for the callers\n * that need the box itself rather than a placement: a FULL-SCREEN sheet cannot use\n * `inset-0`, because on Android the on-screen keyboard shrinks only the VISUAL\n * viewport — `inset-0` still spans the whole screen, so the bottom of the sheet, and\n * the end of whatever list is scrolling inside it, live behind the keyboard where no\n * gesture reaches them.\n *\n * Returns `null` where there is nothing to correct: no `visualViewport` (jsdom, SSR,\n * older browsers) or no keyboard taking a bite out of it. A caller then keeps its\n * static layout, which is right at every width where this does not apply — and is why\n * the desktop and the test suite see exactly the markup they saw before.\n *\n * Also `null` while the page is pinch-zoomed (0.32, §10.2), with the guard\n * {@link readKeyboardInset} uses. A zoom shrinks the visual viewport like a keyboard,\n * and following it gave PickerSheet the zoomed region's top and height but the page's\n * full width — its close button sat off screen (kastlan, Kurvenschmiede). Zoomed, the\n * sheet keeps its static full-screen box, which the reader can pan to like the page.\n */\nexport function useVisualViewport(active: boolean): ViewportBox | null {\n  const [box, setBox] = useState<ViewportBox | null>(null);\n\n  useLayoutEffect(() => {\n    if (!active) return;\n    const update = () => {\n      const vv = typeof window === \"undefined\" ? undefined : window.visualViewport;\n      // The 1px slack is not superstition: `visualViewport.height` is fractional on a\n      // device-pixel-ratio that is not an integer (his phone reports 1.25), so a\n      // strict comparison would report a \"keyboard\" of 0.4px on every phone and pin\n      // a height where none was needed.\n      setBox(\n        vv && !isZoomed(vv) && vv.height < window.innerHeight - 1 ? { top: vv.offsetTop, height: vv.height } : null,\n      );\n    };\n    update();\n    const vv = window.visualViewport;\n    vv?.addEventListener(\"resize\", update);\n    vv?.addEventListener(\"scroll\", update);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      vv?.removeEventListener(\"resize\", update);\n      vv?.removeEventListener(\"scroll\", update);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [active]);\n\n  return box;\n}\n\n/**\n * Where to put a panel anchored under `ref`, tracking the visible viewport.\n *\n * Callers own horizontal placement, through {@link anchoredInline} — the pickers align\n * to the trigger's start edge, the popovers to its end — and must apply `maxHeight` with\n * an internal `overflow-y`.\n * Vertically, apply `top` while the panel is below and `bottom` (with no `top`) once it\n * is `above`; see {@link AnchoredPanel}.\n */\nexport function useAnchoredPanel<T extends HTMLElement>(\n  ref: RefObject<T | null>,\n  open: boolean,\n  options: AnchoredPanelOptions = {},\n): AnchoredPanel {\n  const rect = useAnchoredRect(ref, open);\n  const [viewport, setViewport] = useState<ViewportBox>(readViewport);\n  // A panel of rows wants room for the same number of rows at every text size; the gap\n  // and the edge margin are not text and stay px.\n  const { scale } = useTextSize();\n  const preferredHeight = (options.preferredHeight ?? 320) * scale;\n  const minHeight = (options.minHeight ?? 160) * scale;\n\n  useLayoutEffect(() => {\n    if (!open) return;\n    const update = () => setViewport(readViewport());\n    update();\n    const vv = window.visualViewport;\n    // The visualViewport events are the ones that fire when the keyboard opens;\n    // window.resize is the fallback for browsers without the API (and for a genuine\n    // window resize on desktop).\n    vv?.addEventListener(\"resize\", update);\n    vv?.addEventListener(\"scroll\", update);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      vv?.removeEventListener(\"resize\", update);\n      vv?.removeEventListener(\"scroll\", update);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open]);\n\n  if (!rect) {\n    return { rect: null, top: 0, bottom: 0, maxHeight: preferredHeight, above: false };\n  }\n  return { rect, ...anchoredPanelPlacement(rect, viewport, { ...options, preferredHeight, minHeight }) };\n}\n"],"mappings":"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","names":["vv"]}
+{"version":3,"sources":["../../src/hooks/use-anchored-panel.ts"],"sourcesContent":["import { useLayoutEffect, useState } from \"react\";\nimport type { RefObject } from \"react\";\nimport { useAnchoredRect, type AnchorRect } from \"./use-anchored-rect\";\nimport { useTextSize } from \"../theme/text-size\";\nimport type { Direction } from \"../lib/direction\";\n\n/**\n * Vertical placement for a portalled, `position: fixed` panel anchored to a trigger.\n *\n * The problem it solves (feedback #135): on a phone, opening a picker focuses its\n * search box, the on-screen keyboard slides up, and a panel pinned below a trigger in\n * the lower half of the screen ends up entirely behind that keyboard — with nothing\n * the user can do about it, because `position: fixed` does not scroll.\n *\n * The keyboard is invisible to the usual measurements: on Android Chrome the LAYOUT\n * viewport (`window.innerHeight`, and the origin `getBoundingClientRect` and\n * `position: fixed` are relative to) does not shrink when it opens. Only\n * `visualViewport` reports the region actually on screen, so that is what this reads.\n */\n\n/** The on-screen region, in layout-viewport coordinates. */\nexport interface ViewportBox {\n  top: number;\n  height: number;\n  /**\n   * The height of the LAYOUT viewport itself, which `position: fixed`'s `bottom` is\n   * measured from. Only {@link anchoredPanelPlacement} reads it, for a flipped panel's\n   * `bottom`. Defaults to `top + height`: the two are the same box whenever no keyboard\n   * and no zoom shrink the visible region.\n   */\n  layoutHeight?: number;\n}\n\n/**\n * Whether the page is pinch-zoomed (docs/text-size-harmonization.md §10.2). A zoom\n * shrinks `visualViewport.height` exactly like an on-screen keyboard does, so every\n * reader below must tell the two apart — and while zoomed, the answer is \"no keyboard\":\n * following a zoomed viewport would drag a pinned row on every pan, magnified, and the\n * browser already scrolls a focused field into view. The epsilon absorbs a scale of\n * 1.0000001 that some engines report at rest.\n */\nfunction isZoomed(vv: VisualViewport): boolean {\n  return vv.scale > 1.001;\n}\n\n/** Below this the \"keyboard\" is rounding noise or a browser UI strip — `innerHeight` and\n *  `visualViewport.height` routinely disagree by a pixel or two — and nothing should move\n *  (keksdose's `MIN_KEYBOARD_PX`). */\nconst MIN_KEYBOARD_PX = 100;\n\nexport interface KeyboardInsetOptions {\n  /** The smallest inset that counts as a keyboard. Default 100 px. */\n  minimum?: number;\n}\n\n/**\n * How many CSS px at the bottom of the LAYOUT viewport the on-screen keyboard covers, now\n * — the one guarded reader (§10.2), so the apps' copies go (keksdose's\n * `use-keyboard-inset.ts`):\n *\n * - 0 while the page is pinch-zoomed (`visualViewport.scale > 1`), where a smaller visual\n *   viewport is the zoom, not a keyboard;\n * - 0 below `minimum` (100 px), which is noise;\n * - 0 without `visualViewport` (SSR, jsdom, an old browser) and under\n *   `interactive-widget=resizes-content`, where `bottom: 0` already lands above the\n *   keyboard.\n *\n * Read it on `visualViewport`'s `resize` and `scroll` events (window `resize` as the\n * fallback); a bottom-anchored control lifts itself by the result.\n */\nexport function readKeyboardInset({ minimum = MIN_KEYBOARD_PX }: KeyboardInsetOptions = {}): number {\n  if (typeof window === \"undefined\") return 0;\n  const vv = window.visualViewport;\n  if (!vv || isZoomed(vv)) return 0;\n  const inset = Math.round(window.innerHeight - vv.height - vv.offsetTop);\n  return inset >= minimum ? inset : 0;\n}\n\nconst UNMEASURED_VIEWPORT: ViewportBox = { top: 0, height: 0 };\n\nfunction readViewport(): ViewportBox {\n  if (typeof window === \"undefined\") return { top: 0, height: 0 };\n  const vv = window.visualViewport;\n  // The layout viewport's height is `innerHeight`, the reference `readKeyboardInset`\n  // measures the keyboard against. The keyboard leaves it alone (it shrinks only the\n  // VISUAL viewport; under `interactive-widget=resizes-content` it shrinks both, the\n  // fixed box with them), and it follows the mobile URL bar as it slides away, as a\n  // fixed box's `bottom` does. Not `documentElement.clientHeight`: on mobile Chrome and\n  // Safari that stays at the small, URL-bar-shown height, so with the bar scrolled away\n  // a flipped panel would sit that much too low, over its own field. `innerHeight`'s one\n  // error is a desktop page with a horizontal scrollbar, which it counts and the fixed\n  // box does not: the gap widens by the bar's thickness, and never closes.\n  const layoutHeight = window.innerHeight;\n  // offsetTop, not 0: with the keyboard up the user can also pan the visual viewport\n  // within the layout viewport, which shifts where \"visible\" starts.\n  return vv\n    ? { top: vv.offsetTop, height: vv.height, layoutHeight }\n    : { top: 0, height: window.innerHeight, layoutHeight };\n}\n\nexport interface AnchoredPanelOptions {\n  /** Space between trigger and panel. */\n  gap?: number;\n  /** Space kept clear at the viewport edges. */\n  margin?: number;\n  /** The height the panel would like, when there is room. In px at Normal text size:\n   *  {@link useAnchoredPanel} multiplies it by the size's scale, since what a panel\n   *  holds is rows of text (0.32, docs/text-size-harmonization.md §3.2). */\n  preferredHeight?: number;\n  /** Below this, the space under the trigger counts as unusable and a flip is considered.\n   *  In px at Normal, scaled likewise. */\n  minHeight?: number;\n}\n\n/**\n * `top` and `bottom` are the two edges of a panel exactly `maxHeight` tall. A panel is\n * sized by its content and `maxHeight` only caps it, so apply the edge on the trigger's\n * side, the one that holds whatever the height: `top` while the panel is below,\n * `bottom` (and no `top`) once it is flipped `above`.\n */\nexport interface AnchoredPanel {\n  /** The trigger's rect, or null while closed/unmeasured. */\n  rect: AnchorRect | null;\n  /** Viewport-space `top` for the panel — the one to apply while it is below. Flipped,\n   *  it is where a FULL-height panel's top would be, and a three-row list placed by it\n   *  floated far above its field (keksdose K1, live #401); place that one by `bottom`. */\n  top: number;\n  /** CSS `bottom` for a `position: fixed` panel: the distance from the layout\n   *  viewport's bottom edge up to the panel's. The one to apply once it is flipped\n   *  `above`: it keeps the panel's foot `gap` above the trigger however short its\n   *  content, and while a filtered list shrinks or grows under the user's typing. */\n  bottom: number;\n  /** Cap that keeps the panel inside the VISIBLE viewport — apply as `maxHeight`. */\n  maxHeight: number;\n  /** Whether the panel was flipped above the trigger. */\n  above: boolean;\n}\n\n/** Absolute floor: below this a list is useless, so overflow the margin instead. */\nconst FLOOR = 96;\n\n/** How much more room above must offer, when neither side fits the preferred height,\n *  before the panel changes sides — so it never jumps for a few pixels' gain. */\nconst FLIP_GAIN = 48;\n\n/**\n * The pure half of {@link useAnchoredPanel}: where a panel goes, given the trigger's\n * rect and the region actually on screen.\n *\n * Prefers below the trigger — the conventional direction, and the one that keeps the\n * trigger's own value visible — whenever the panel's preferred height fits there. When it\n * does not, the panel opens above if the full height fits there, or if above is clearly\n * roomier (by {@link FLIP_GAIN}); below an unusable `minHeight` it flips to any roomier\n * side, as before. It used to flip only below `minHeight`, so a select with 160–319 px\n * under it opened downward as a cramped list with 600 px free above (keksdose live #384,\n * the currency select of the new-budget form near the bottom of the screen). The\n * returned `maxHeight` is what makes the flip sufficient rather than merely different:\n * without it a tall panel placed above just runs off the top instead of the bottom.\n *\n * A flipped panel hangs from its BOTTOM edge, `gap` above the trigger, and is placed by\n * `bottom` (keksdose K1, live #401). It used to be placed by a `top` worked out as\n * though the panel were `maxHeight` tall, and a panel is only as tall as its content:\n * a three-row address list under a 256 px cap sat ~176 px above its field, on a phone\n * with the keyboard up. Only when even the {@link FLOOR} does not fit above does that\n * edge give way, as `top` always did, so the panel's head (a search box, often) stays\n * on screen rather than above it.\n *\n * Split out so the geometry is testable without a DOM and a fake keyboard — @hb/ui has\n * no test runner of its own, so this is exercised from the consuming app.\n */\nexport function anchoredPanelPlacement(\n  rect: Pick<AnchorRect, \"top\" | \"bottom\">,\n  viewport: ViewportBox,\n  { gap = 4, margin = 8, preferredHeight = 320, minHeight = 160 }: AnchoredPanelOptions = {},\n): Omit<AnchoredPanel, \"rect\"> {\n  const viewTop = viewport.top + margin;\n  const viewBottom = viewport.top + viewport.height - margin;\n  const spaceBelow = viewBottom - (rect.bottom + gap);\n  const spaceAbove = rect.top - gap - viewTop;\n  const above =\n    spaceAbove > spaceBelow &&\n    (spaceBelow < minHeight ||\n      (spaceBelow < preferredHeight && (spaceAbove >= preferredHeight || spaceAbove - spaceBelow >= FLIP_GAIN)));\n  const space = Math.max(FLOOR, above ? spaceAbove : spaceBelow);\n  const maxHeight = Math.min(preferredHeight, space);\n  // Unchanged, for the apps that call the hook and apply it: the edge to use below, and\n  // a full-height panel's top above. In layout-viewport space, like the rect.\n  const top = above ? Math.max(viewTop, rect.top - gap - maxHeight) : rect.bottom + gap;\n  // `bottom` counts up from the LAYOUT viewport's bottom edge, not the visible region's:\n  // `position: fixed` is laid out in the layout viewport, which runs on behind the\n  // keyboard, exactly as the rect is measured in it. The keyboard, the pan and the zoom\n  // are already in `maxHeight`, which keeps the panel's top inside what is on screen.\n  const layoutHeight = viewport.layoutHeight ?? viewport.top + viewport.height;\n  return { top, bottom: layoutHeight - (top + maxHeight), maxHeight, above };\n}\n\n/**\n * The glass a panel has to stay on, in CSS pixels — `window.innerWidth` is the wrong\n * width on a phone (keksdose run 72, live #381). There it is the LAYOUT viewport, and\n * that grows to the page's width as soon as anything sticks out past the screen: 430 on\n * a 406px screen in Chromium's mobile emulation, with `position: fixed` layers laid out\n * against the 430. A panel that had widened the page then measured itself as inside it.\n * The root element's client width is the initial containing block instead — the screen,\n * the width `100vw` and the media queries see — whatever overflows, and on a desktop it\n * also leaves a classic scrollbar out, which is where a fixed box's `right` is measured\n * from. It is 0 where nothing is laid out (jsdom), and the window is the answer there.\n * The height stays the window's: nothing measured grows it, and a phone's collapsing\n * toolbar makes the window the truer of the two.\n *\n * Tooltip's lesson, moved here so every anchored panel reads the same width (round 0.34\n * Wave 2, DUP-7).\n */\nexport function viewportSize(): { width: number; height: number } {\n  return {\n    width: document.documentElement.clientWidth || window.innerWidth,\n    height: window.innerHeight,\n  };\n}\n\nexport interface AnchoredInlineOptions {\n  /** The trigger's reading direction, which `start`, `end` and `after` follow. Default\n   *  `ltr`. A portalled panel has left the subtree it would inherit `dir` from, so read\n   *  it off the trigger (`dirOf`). */\n  dir?: Direction;\n  /**\n   * Which of the panel's edges lines up with which of the trigger's:\n   * - `start` / `end` — the panel's start (end) edge on the trigger's start (end) edge,\n   *   by reading direction: a picker hangs from its field's start, a popover from its\n   *   button's end;\n   * - `left` / `right` — the same, physically;\n   * - `after` — the panel's start edge on the trigger's END edge: beside it, as the\n   *   sidebar's flyout opens.\n   *\n   * Default `start`.\n   */\n  align?: \"start\" | \"end\" | \"left\" | \"right\" | \"after\";\n  /** The room kept from either edge of the glass, in px. Default 8. */\n  edge?: number;\n  /** The glass's width. Default {@link viewportSize}'s. */\n  viewportWidth?: number;\n}\n\n/** The horizontal place of a `position: fixed` panel: its `left`, and the `right` of the\n *  same box for a panel hung from its right edge (both in px, from the glass's edges). */\nexport interface InlinePlacement {\n  left: number;\n  right: number;\n}\n\n/**\n * The horizontal half of an anchored panel, beside {@link anchoredPanelPlacement}'s\n * vertical one (round 0.34 Wave 2, DUP-7): where a panel `panelWidth` wide goes against\n * the trigger's `rect`, kept `edge` px inside the glass ({@link viewportSize}).\n *\n * Popover, DropdownPanel, ComboboxPanel, HoverMenu and the AppShell flyout each wrote\n * this themselves, against three different widths: `innerWidth`, which on a phone is\n * the grown layout viewport and on a desktop counts the scrollbar; the root's client\n * width; and, for the entity picker's panel in a left-to-right form, no clamp at all.\n *\n * A panel wider than the room keeps its START on the glass — its left edge in a\n * left-to-right form, its right in a right-to-left one — as Tooltip's slide does: the\n * start of a row of text is the half worth keeping.\n */\nexport function anchoredInline(\n  rect: Pick<AnchorRect, \"left\" | \"right\">,\n  panelWidth: number,\n  { dir = \"ltr\", align = \"start\", edge = 8, viewportWidth = viewportSize().width }: AnchoredInlineOptions = {},\n): InlinePlacement {\n  const rtl = dir === \"rtl\";\n  // Where the panel's LEFT edge goes, before the clamp.\n  let wanted: number;\n  switch (align) {\n    case \"left\":\n      wanted = rect.left;\n      break;\n    case \"right\":\n      wanted = rect.right - panelWidth;\n      break;\n    case \"start\":\n      wanted = rtl ? rect.right - panelWidth : rect.left;\n      break;\n    case \"end\":\n      wanted = rtl ? rect.left : rect.right - panelWidth;\n      break;\n    case \"after\":\n      wanted = rtl ? rect.left - panelWidth : rect.right;\n      break;\n  }\n  const min = edge;\n  const max = viewportWidth - edge - panelWidth;\n  const left = max < min ? (rtl ? max : min) : Math.min(Math.max(wanted, min), max);\n  return { left, right: viewportWidth - left - panelWidth };\n}\n\n/**\n * The region actually on screen, tracked while `active` (Keksdose live #328).\n *\n * The same measurement {@link useAnchoredPanel} caps a dropdown with, for the callers\n * that need the box itself rather than a placement: a FULL-SCREEN sheet cannot use\n * `inset-0`, because on Android the on-screen keyboard shrinks only the VISUAL\n * viewport — `inset-0` still spans the whole screen, so the bottom of the sheet, and\n * the end of whatever list is scrolling inside it, live behind the keyboard where no\n * gesture reaches them.\n *\n * Returns `null` where there is nothing to correct: no `visualViewport` (jsdom, SSR,\n * older browsers) or no keyboard taking a bite out of it. A caller then keeps its\n * static layout, which is right at every width where this does not apply — and is why\n * the desktop and the test suite see exactly the markup they saw before.\n *\n * Also `null` while the page is pinch-zoomed (0.32, §10.2), with the guard\n * {@link readKeyboardInset} uses. A zoom shrinks the visual viewport like a keyboard,\n * and following it gave PickerSheet the zoomed region's top and height but the page's\n * full width — its close button sat off screen (kastlan, Kurvenschmiede). Zoomed, the\n * sheet keeps its static full-screen box, which the reader can pan to like the page.\n */\nexport function useVisualViewport(active: boolean): ViewportBox | null {\n  const [box, setBox] = useState<ViewportBox | null>(null);\n\n  useLayoutEffect(() => {\n    if (!active) return;\n    const update = () => {\n      const vv = typeof window === \"undefined\" ? undefined : window.visualViewport;\n      // The 1px slack is not superstition: `visualViewport.height` is fractional on a\n      // device-pixel-ratio that is not an integer (his phone reports 1.25), so a\n      // strict comparison would report a \"keyboard\" of 0.4px on every phone and pin\n      // a height where none was needed.\n      setBox(\n        vv && !isZoomed(vv) && vv.height < window.innerHeight - 1 ? { top: vv.offsetTop, height: vv.height } : null,\n      );\n    };\n    update();\n    const vv = window.visualViewport;\n    vv?.addEventListener(\"resize\", update);\n    vv?.addEventListener(\"scroll\", update);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      vv?.removeEventListener(\"resize\", update);\n      vv?.removeEventListener(\"scroll\", update);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [active]);\n\n  return box;\n}\n\n/**\n * Where to put a panel anchored under `ref`, tracking the visible viewport.\n *\n * Callers own horizontal placement, through {@link anchoredInline} — the pickers align\n * to the trigger's start edge, the popovers to its end — and must apply `maxHeight` with\n * an internal `overflow-y`.\n * Vertically, apply `top` while the panel is below and `bottom` (with no `top`) once it\n * is `above`; see {@link AnchoredPanel}.\n */\nexport function useAnchoredPanel<T extends HTMLElement>(\n  ref: RefObject<T | null>,\n  open: boolean,\n  options: AnchoredPanelOptions = {},\n): AnchoredPanel {\n  const rect = useAnchoredRect(ref, open);\n  // Not read while rendering (0.48.2, keksdose K-052-2): in Chromium `visualViewport`'s\n  // geometry forces a style and layout pass on a dirty DOM, and every anchored panel —\n  // closed ones too — paid it on mount (a bulk bar's pickers appearing on the first\n  // ticked row of a long table paid a layout of the whole table). Nothing reads this\n  // before the layout effect below has filled it: `rect` is null until the panel is open\n  // and measured, and that same effect pass measures the viewport.\n  const [viewport, setViewport] = useState<ViewportBox>(UNMEASURED_VIEWPORT);\n  // A panel of rows wants room for the same number of rows at every text size; the gap\n  // and the edge margin are not text and stay px.\n  const { scale } = useTextSize();\n  const preferredHeight = (options.preferredHeight ?? 320) * scale;\n  const minHeight = (options.minHeight ?? 160) * scale;\n\n  useLayoutEffect(() => {\n    if (!open) return;\n    const update = () => setViewport(readViewport());\n    update();\n    const vv = window.visualViewport;\n    // The visualViewport events are the ones that fire when the keyboard opens;\n    // window.resize is the fallback for browsers without the API (and for a genuine\n    // window resize on desktop).\n    vv?.addEventListener(\"resize\", update);\n    vv?.addEventListener(\"scroll\", update);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      vv?.removeEventListener(\"resize\", update);\n      vv?.removeEventListener(\"scroll\", update);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open]);\n\n  if (!rect) {\n    return { rect: null, top: 0, bottom: 0, maxHeight: preferredHeight, above: false };\n  }\n  return { rect, ...anchoredPanelPlacement(rect, viewport, { ...options, preferredHeight, minHeight }) };\n}\n"],"mappings":"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","names":["vv"]}

package/dist/hooks/use-dismiss.d.ts

@@ -2,6 +2,9 @@ import type { KeyboardEvent as ReactKeyboardEvent, RefObject } from "react";
 /** A layer's handler, read through a ref so the stack holds one stable entry per open. */
 interface Layer {
     escape: (e: KeyboardEvent) => void;
+    /** Whether it covers the page — a dialog, a sheet, a popover, a list — rather than
+     *  annotating it (a tooltip). Counted by {@link useOverlayOpen}. */
+    overlay: boolean;
 }
 /** What {@link useDismissLayer} hands back: its layer while open, for
  *  {@link runOwnKeyDown} to tell whether that layer is the one on top. */
@@ -16,7 +19,12 @@ export type DismissLayer = RefObject<Layer | null>;
  * read live, so it need not be memoised; the layer is pushed and popped only when
  * `open` flips. The layer it returns is for the owner's {@link runOwnKeyDown}.
  */
-export declare function useDismissLayer(open: boolean, onEscape: (e: KeyboardEvent) => void): DismissLayer;
+export declare function useDismissLayer(open: boolean, onEscape: (e: KeyboardEvent) => void, { overlay }?: {
+    overlay?: boolean;
+}): DismissLayer;
+/** True while a kit dialog, sheet, popover, hover menu or list is open (any layer of the
+ *  Escape stack but a tooltip's). Internal. */
+export declare function useOverlayOpen(enabled?: boolean): boolean;
 /**
  * For a layer's own element, in its `onKeyDown`: hands an Escape on its way up to the
  * topmost layer — this one, unless something opened over it without taking focus (a

package/dist/hooks/use-dismiss.js

@@ -1,5 +1,5 @@
 "use client";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
 import { isComposing } from "../lib/ime.js";
 const layers = [];
 const claimed = /* @__PURE__ */ new WeakSet();
@@ -32,16 +32,18 @@ function push(layer) {
     document.addEventListener("keydown", onBubble);
   }
   layers.push(layer);
+  if (layer.overlay) notifyOverlays();
 }
 function pop(layer) {
   const at = layers.indexOf(layer);
   if (at >= 0) layers.splice(at, 1);
+  if (at >= 0 && layer.overlay) notifyOverlays();
   if (layers.length > 0) return;
   document.removeEventListener("keydown", onCapture, true);
   document.removeEventListener("keydown", onBubble);
   inFlight = null;
 }
-function useDismissLayer(open, onEscape) {
+function useDismissLayer(open, onEscape, { overlay = true } = {}) {
   const handlerRef = useRef(onEscape);
   const layerRef = useRef(null);
   useEffect(() => {
@@ -49,16 +51,33 @@ function useDismissLayer(open, onEscape) {
   });
   useEffect(() => {
     if (!open || typeof document === "undefined") return;
-    const layer = { escape: (e) => handlerRef.current(e) };
+    const layer = { escape: (e) => handlerRef.current(e), overlay };
     layerRef.current = layer;
     push(layer);
     return () => {
       pop(layer);
       layerRef.current = null;
     };
-  }, [open]);
+  }, [open, overlay]);
   return layerRef;
 }
+const overlayListeners = /* @__PURE__ */ new Set();
+function notifyOverlays() {
+  for (const listener of overlayListeners) listener();
+}
+function subscribeOverlays(listener) {
+  overlayListeners.add(listener);
+  return () => {
+    overlayListeners.delete(listener);
+  };
+}
+function anyOverlayOpen() {
+  return layers.some((layer) => layer.overlay);
+}
+function useOverlayOpen(enabled = true) {
+  const open = useSyncExternalStore(subscribeOverlays, anyOverlayOpen, () => false);
+  return enabled && open;
+}
 function takeEscape(e) {
   return handOver(e, true);
 }
@@ -136,6 +155,7 @@ export {
   takeEscape,
   useDismissLayer,
   useEscapeKey,
-  useOutsideClick
+  useOutsideClick,
+  useOverlayOpen
 };
 //# sourceMappingURL=use-dismiss.js.map

package/dist/hooks/use-dismiss.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-dismiss.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\nimport type { KeyboardEvent as ReactKeyboardEvent, RefObject } from \"react\";\nimport { isComposing } from \"../lib/ime\";\n\n/*\n * # One Escape stack (round 0.34 Wave 2, DUP-1)\n *\n * Escape closes the TOPMOST thing on screen, and only that: a list open in a dialog\n * closes and the dialog stays; the next press closes the dialog.\n *\n * \"Who owns Escape\" used to be decided five ways. The anchored pickers listened on the\n * document; Modal, FullBleedDialog, PickerSheet and Popover closed in their own panel's\n * `onKeyDown` and stopped the key; CommandPalette closed without stopping it. A dialog's\n * handler sits earlier on the key's path than any document listener, so Escape in an\n * open list inside a Modal closed the MODAL and threw the form away (BUG-1, sev 4,\n * kastlan's lease dialog), and HoverMenu, the numpad and a tooltip could not be\n * dismissed inside a dialog at all. And Modal and FullBleedDialog disagreed on when a\n * child had \"claimed\" the key: a ChipInput clearing its draft kept a Modal open and\n * closed a FullBleedDialog.\n *\n * Now every overlay and picker pushes a layer while it is open ({@link useDismissLayer}),\n * last in, first out, the way `use-overlay-history` stacks the Back gesture. One\n * capture-phase listener on the document notes which layer is on top as each Escape\n * goes down — before any handler on the page runs, so a layer that closes on the way\n * cannot pass the key on to the one beneath it. That layer, and only that one, is\n * handed the key:\n *\n * - at the first layer element the key passes on its way back up ({@link takeEscape},\n *   which Modal's panel, a picker's search box and the rest call from their\n *   `onKeyDown`). The key is stopped there, so nothing around the layers — a\n *   FloatingPanel, an app's own panel — closes with it;\n * - or, when focus is in none of them (a hover menu, a tooltip, the numpad over its\n *   field, a press on the page), at the document once the key has been everywhere else.\n *\n * Layers stack in the order they OPEN, which is the order their effects run. Two that\n * open in the same commit stack child first — the one case that order gets wrong, and\n * one no overlay in the kit does: each opens on a press, after whatever it sits in.\n *\n * ## Claiming the key: one rule\n *\n * An Escape that means \"undo this step\" is not a dismissal: ChipInput clearing its\n * draft, InlineEditField cancelling its edit, the date picker's month grid going back to\n * the days. Those call {@link claimEscape}, and no layer is handed the key. The only\n * other claim is the layer owner's OWN handler — a dialog's `onKeyDown` prop calling\n * `preventDefault()` on Escape (a busy reauth dialog holding itself open, Kurvenschmiede's\n * gear wizard asking first), through {@link runOwnKeyDown}. A `preventDefault()`\n * anywhere else claims nothing: a search box keeping Chromium from clearing itself\n * must not hold a dialog open (FullBleedDialog's 0.8.0 fix, which Modal never had).\n *\n * The owner's handler hears Escape only while its own layer is on top (0.35, KS). It\n * runs before the stack is asked, so with a tooltip, a hover menu or a list open over\n * the dialog and focus on the panel, the gear wizard asked \"Discard this gear?\" and the\n * tooltip stayed. Now the layer above takes that press, and the next one is the\n * owner's. Every other key reaches the handler as before.\n *\n * A handler that STOPS the key before it reaches a layer element has taken it too —\n * that is the DOM, and it is what the kit's cell editors and confirm buttons do.\n */\n\n/** A layer's handler, read through a ref so the stack holds one stable entry per open. */\ninterface Layer {\n  escape: (e: KeyboardEvent) => void;\n}\n\n/** What {@link useDismissLayer} hands back: its layer while open, for\n *  {@link runOwnKeyDown} to tell whether that layer is the one on top. */\nexport type DismissLayer = RefObject<Layer | null>;\n\n/** Open layers, oldest first. Module-level, because the order is ACROSS instances. */\nconst layers: Layer[] = [];\n\n/** Escapes a claimant has taken — see {@link claimEscape}. Weak: an event is garbage\n *  once its dispatch is over. */\nconst claimed = new WeakSet<Event>();\n\n/** The Escape on its way through the page: the layer that was topmost as it went down,\n *  and whether that layer has been handed it yet. */\nlet inFlight: { event: KeyboardEvent; layer: Layer; done: boolean } | null = null;\n\nfunction nativeOf(e: KeyboardEvent | ReactKeyboardEvent): KeyboardEvent {\n  return \"nativeEvent\" in e ? e.nativeEvent : e;\n}\n\nfunction onCapture(e: KeyboardEvent): void {\n  if (e.key !== \"Escape\") return;\n  // An Escape inside an IME composition cancels the composition and nothing else.\n  const top = isComposing(e) ? undefined : layers[layers.length - 1];\n  inFlight = top ? { event: e, layer: top, done: false } : null;\n}\n\n/** The fallback: no layer element was on the key's path, or none took it. */\nfunction onBubble(e: KeyboardEvent): void {\n  handOver(e, false);\n}\n\nfunction handOver(e: KeyboardEvent | ReactKeyboardEvent, stop: boolean): boolean {\n  const native = nativeOf(e);\n  const flight = inFlight;\n  if (native.key !== \"Escape\" || !flight || flight.event !== native || flight.done) return false;\n  if (claimed.has(native)) return false;\n  flight.done = true;\n  // Consumed: a type=\"search\" box does not clear itself as well, and a handler further\n  // out that checks `defaultPrevented` (FloatingPanel, an app's own panel) leaves it.\n  e.preventDefault();\n  if (stop) e.stopPropagation();\n  // A layer that closed on the way, by a handler of its own, has had its Escape.\n  if (layers.includes(flight.layer)) flight.layer.escape(native);\n  return true;\n}\n\nfunction push(layer: Layer): void {\n  if (layers.length === 0) {\n    document.addEventListener(\"keydown\", onCapture, true);\n    document.addEventListener(\"keydown\", onBubble);\n  }\n  layers.push(layer);\n}\n\nfunction pop(layer: Layer): void {\n  const at = layers.indexOf(layer);\n  if (at >= 0) layers.splice(at, 1);\n  if (layers.length > 0) return;\n  document.removeEventListener(\"keydown\", onCapture, true);\n  document.removeEventListener(\"keydown\", onBubble);\n  inFlight = null;\n}\n\n/**\n * An Escape layer on the stack while `open`: the topmost layer is handed the next\n * Escape and calls `onEscape`, every layer under it waits its turn. A list opened inside\n * a dialog is above the dialog; a popover opened from a list, above the list.\n *\n * Where focus can be INSIDE the layer, its element's `onKeyDown` calls\n * {@link takeEscape} too, so the key stops there — see the module note. `onEscape` is\n * read live, so it need not be memoised; the layer is pushed and popped only when\n * `open` flips. The layer it returns is for the owner's {@link runOwnKeyDown}.\n */\nexport function useDismissLayer(open: boolean, onEscape: (e: KeyboardEvent) => void): DismissLayer {\n  const handlerRef = useRef(onEscape);\n  const layerRef = useRef<Layer | null>(null);\n  // Written in an effect, not during render, so it satisfies react-hooks/refs: a\n  // render that React starts and then discards — a transition, a Suspense retry —\n  // would otherwise leave this holding a handler from a tree that never committed,\n  // and the stack would go on to call it. Keydown events fire after the commit, so\n  // the ref is always current by the time one arrives.\n  useEffect(() => {\n    handlerRef.current = onEscape;\n  });\n  useEffect(() => {\n    if (!open || typeof document === \"undefined\") return;\n    const layer: Layer = { escape: (e) => handlerRef.current(e) };\n    layerRef.current = layer;\n    push(layer);\n    return () => {\n      pop(layer);\n      layerRef.current = null;\n    };\n  }, [open]);\n  return layerRef;\n}\n\n/**\n * For a layer's own element, in its `onKeyDown`: hands an Escape on its way up to the\n * topmost layer — this one, unless something opened over it without taking focus (a\n * tooltip, the numpad) — and stops it here. True when it did; false for any other key,\n * a claimed Escape, or one already handed over.\n */\nexport function takeEscape(e: KeyboardEvent | ReactKeyboardEvent): boolean {\n  return handOver(e, true);\n}\n\n/**\n * For an Escape that means \"undo this step\", not \"close\": the key is the caller's, and\n * no layer is handed it. `preventDefault()`s it as well, so a handler further out that\n * checks `defaultPrevented` leaves it alone, as before.\n */\nexport function claimEscape(e: KeyboardEvent | ReactKeyboardEvent): void {\n  claimed.add(nativeOf(e));\n  e.preventDefault();\n}\n\n/**\n * Runs a layer owner's own key handler — a dialog's `onKeyDown` prop — and turns a\n * `preventDefault()` it makes on Escape into a claim: the one way, beside\n * {@link claimEscape}, to keep a layer open.\n *\n * Given the owner's `layer` (what {@link useDismissLayer} returned), an Escape that went\n * down while another layer was above that one skips the handler: the press is the\n * layer's on top, and the owner hears the next (0.35, KS). Without it, or while the\n * owner's layer is not open, the handler sees every key, as before.\n */\nexport function runOwnKeyDown<E extends ReactKeyboardEvent>(\n  e: E,\n  handler: ((e: E) => void) | undefined,\n  layer?: DismissLayer,\n): void {\n  if (!handler) return;\n  if (layer && aboveOwner(e, layer.current)) return;\n  const before = e.defaultPrevented;\n  handler(e);\n  if (e.key === \"Escape\" && !before && e.defaultPrevented) claimed.add(nativeOf(e));\n}\n\n/** Whether this Escape went down with a layer above `owner` — the topmost one then was\n *  another, and `owner` is on the stack. An Escape the stack did not note (one inside an\n *  IME composition) is nobody else's. */\nfunction aboveOwner(e: ReactKeyboardEvent, owner: Layer | null): boolean {\n  const flight = inFlight;\n  if (e.key !== \"Escape\" || !owner || !flight || flight.event !== nativeOf(e)) return false;\n  return flight.layer !== owner && layers.includes(owner);\n}\n\n/**\n * Calls `handler` on an Escape while `enabled` — as an Escape layer. Since 0.34 this is\n * {@link useDismissLayer} with its arguments the other way round: it hears the key only\n * while nothing opened above it, and inside a dialog it no longer loses the key to the\n * dialog (Wave 2, DUP-1). `handler` is read live, so it need not be memoised.\n */\nexport function useEscapeKey(handler: () => void, enabled = true): void {\n  useDismissLayer(enabled, handler);\n}\n\n/** Called with each native press an owner's React tree saw — see {@link useOutsideClick}. */\ntype PressMark = (press: Event) => void;\n\n/** The outside-click hooks watching each ref, for {@link pressInside}. */\nconst watchers = new WeakMap<RefObject<HTMLElement | null>, Set<PressMark>>();\n\n/** What an `onPointerDownCapture` hands over: a React event, its press inside. */\ntype ReactPress = { nativeEvent: Event };\n\n/**\n * An `onPointerDownCapture` for a panel whose `ref` an outside-click hook watches but\n * whose element the hook's owner does not render — {@link DropdownPanel} and\n * `ComboboxPanel` take `panelRef` from `useDropdown` / `useComboboxCore`. Every press\n * that reaches the panel through the React tree, a portalled list opened inside it\n * included, is marked inside for each hook watching `ref`. See {@link useOutsideClick}.\n */\nexport function pressInside(ref: RefObject<HTMLElement | null> | undefined): ((e: ReactPress) => void) | undefined {\n  if (!ref) return undefined;\n  return (e) => {\n    watchers.get(ref)?.forEach((mark) => mark(e.nativeEvent));\n  };\n}\n\n/**\n * Calls `handler` on a press that lands outside every supplied element, while\n * `enabled` — the outside-click-to-close half of the same dismissal story. Pass one\n * ref or several (trigger + panel); a press inside any of them is ignored. Refs and\n * `handler` are read live, so an inline `[triggerRef, panelRef]` array is fine and\n * won't churn the listener.\n *\n * ## A panel opened from inside is inside (0.48, keksdose dev#623)\n *\n * A CurrencySelect in a Popover: the currency list is portalled to `<body>`, so in the\n * DOM it is outside the popover's panel, and the first press on a currency closed the\n * POPOVER at pointerdown — the list went with it and the choice never landed. The same\n * for a combobox, a menu, a date picker's popover, a dropdown, at any depth.\n *\n * In the React tree the portal is still where it was opened from, and React passes a\n * press up that tree, through portals. So the hook hands back an\n * `onPointerDownCapture`: put it on the element the press should count as inside of —\n * the kit's Popover panel, HoverMenu, DropdownPanel and ComboboxPanel do — and every\n * press that travels through that element in React, portalled panels opened inside it\n * included, is not outside. React's listeners sit on the root and on each portal's\n * container, so they hear the press before this document listener does. No owner chain\n * to keep: depth is free, and an app's own portal inside a kit panel is covered too. A\n * panel the hook's owner does not render takes {@link pressInside} with the watched ref.\n *\n * **`pointerdown`, not `mousedown`** — one event covering mouse, touch and pen.\n * This listened for `mousedown` alone, which on a touch platform is a SYNTHESISED\n * event: the browser emits it for most taps, which is why nothing obviously broke,\n * but the synthesis is not guaranteed. A tap that begins a scroll, or one that lands\n * on an element which preventDefaults the touch sequence, may never produce one — and\n * on a phone-first PWA whose pickers, menus and flyouts all dismiss through this hook,\n * inheriting that is worse than choosing it.\n *\n * The one behaviour this changes deliberately: a touch-drag that starts outside an\n * open panel now dismisses it at touch-down, where before it did not dismiss at all\n * (a drag synthesises no mousedown). That matches every other platform surface, and\n * the anchored panels re-measure on scroll precisely because the page moves under\n * them.\n */\nexport function useOutsideClick(\n  refs: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],\n  handler: () => void,\n  enabled = true,\n): (e: ReactPress) => void {\n  const refsRef = useRef(refs);\n  const handlerRef = useRef(handler);\n  // The last press this owner's React tree saw: the one the document listener is about\n  // to hear, when it went through a panel the owner marked.\n  const insideRef = useRef<Event | null>(null);\n  // In an effect rather than during render — see the note in useDismissLayer.\n  useEffect(() => {\n    refsRef.current = refs;\n    handlerRef.current = handler;\n  });\n  const markInside = useCallback((e: ReactPress) => {\n    insideRef.current = e.nativeEvent;\n  }, []);\n  useEffect(() => {\n    if (!enabled) return;\n    const mark: PressMark = (press) => {\n      insideRef.current = press;\n    };\n    const watched = Array.isArray(refsRef.current) ? refsRef.current : [refsRef.current];\n    for (const r of watched) {\n      const set = watchers.get(r) ?? new Set<PressMark>();\n      set.add(mark);\n      watchers.set(r, set);\n    }\n    const onPointerDown = (e: Event) => {\n      const inside = insideRef.current === e;\n      insideRef.current = null;\n      if (inside) return;\n      const target = e.target as Node;\n      const list = Array.isArray(refsRef.current) ? refsRef.current : [refsRef.current];\n      for (const r of list) {\n        if (r.current?.contains(target)) return;\n      }\n      handlerRef.current();\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => {\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n      for (const r of watched) watchers.get(r)?.delete(mark);\n    };\n  }, [enabled]);\n  return markInside;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/hooks/use-dismiss.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useSyncExternalStore } from \"react\";\nimport type { KeyboardEvent as ReactKeyboardEvent, RefObject } from \"react\";\nimport { isComposing } from \"../lib/ime\";\n\n/*\n * # One Escape stack (round 0.34 Wave 2, DUP-1)\n *\n * Escape closes the TOPMOST thing on screen, and only that: a list open in a dialog\n * closes and the dialog stays; the next press closes the dialog.\n *\n * \"Who owns Escape\" used to be decided five ways. The anchored pickers listened on the\n * document; Modal, FullBleedDialog, PickerSheet and Popover closed in their own panel's\n * `onKeyDown` and stopped the key; CommandPalette closed without stopping it. A dialog's\n * handler sits earlier on the key's path than any document listener, so Escape in an\n * open list inside a Modal closed the MODAL and threw the form away (BUG-1, sev 4,\n * kastlan's lease dialog), and HoverMenu, the numpad and a tooltip could not be\n * dismissed inside a dialog at all. And Modal and FullBleedDialog disagreed on when a\n * child had \"claimed\" the key: a ChipInput clearing its draft kept a Modal open and\n * closed a FullBleedDialog.\n *\n * Now every overlay and picker pushes a layer while it is open ({@link useDismissLayer}),\n * last in, first out, the way `use-overlay-history` stacks the Back gesture. One\n * capture-phase listener on the document notes which layer is on top as each Escape\n * goes down — before any handler on the page runs, so a layer that closes on the way\n * cannot pass the key on to the one beneath it. That layer, and only that one, is\n * handed the key:\n *\n * - at the first layer element the key passes on its way back up ({@link takeEscape},\n *   which Modal's panel, a picker's search box and the rest call from their\n *   `onKeyDown`). The key is stopped there, so nothing around the layers — a\n *   FloatingPanel, an app's own panel — closes with it;\n * - or, when focus is in none of them (a hover menu, a tooltip, the numpad over its\n *   field, a press on the page), at the document once the key has been everywhere else.\n *\n * Layers stack in the order they OPEN, which is the order their effects run. Two that\n * open in the same commit stack child first — the one case that order gets wrong, and\n * one no overlay in the kit does: each opens on a press, after whatever it sits in.\n *\n * ## Claiming the key: one rule\n *\n * An Escape that means \"undo this step\" is not a dismissal: ChipInput clearing its\n * draft, InlineEditField cancelling its edit, the date picker's month grid going back to\n * the days. Those call {@link claimEscape}, and no layer is handed the key. The only\n * other claim is the layer owner's OWN handler — a dialog's `onKeyDown` prop calling\n * `preventDefault()` on Escape (a busy reauth dialog holding itself open, Kurvenschmiede's\n * gear wizard asking first), through {@link runOwnKeyDown}. A `preventDefault()`\n * anywhere else claims nothing: a search box keeping Chromium from clearing itself\n * must not hold a dialog open (FullBleedDialog's 0.8.0 fix, which Modal never had).\n *\n * The owner's handler hears Escape only while its own layer is on top (0.35, KS). It\n * runs before the stack is asked, so with a tooltip, a hover menu or a list open over\n * the dialog and focus on the panel, the gear wizard asked \"Discard this gear?\" and the\n * tooltip stayed. Now the layer above takes that press, and the next one is the\n * owner's. Every other key reaches the handler as before.\n *\n * A handler that STOPS the key before it reaches a layer element has taken it too —\n * that is the DOM, and it is what the kit's cell editors and confirm buttons do.\n */\n\n/** A layer's handler, read through a ref so the stack holds one stable entry per open. */\ninterface Layer {\n  escape: (e: KeyboardEvent) => void;\n  /** Whether it covers the page — a dialog, a sheet, a popover, a list — rather than\n   *  annotating it (a tooltip). Counted by {@link useOverlayOpen}. */\n  overlay: boolean;\n}\n\n/** What {@link useDismissLayer} hands back: its layer while open, for\n *  {@link runOwnKeyDown} to tell whether that layer is the one on top. */\nexport type DismissLayer = RefObject<Layer | null>;\n\n/** Open layers, oldest first. Module-level, because the order is ACROSS instances. */\nconst layers: Layer[] = [];\n\n/** Escapes a claimant has taken — see {@link claimEscape}. Weak: an event is garbage\n *  once its dispatch is over. */\nconst claimed = new WeakSet<Event>();\n\n/** The Escape on its way through the page: the layer that was topmost as it went down,\n *  and whether that layer has been handed it yet. */\nlet inFlight: { event: KeyboardEvent; layer: Layer; done: boolean } | null = null;\n\nfunction nativeOf(e: KeyboardEvent | ReactKeyboardEvent): KeyboardEvent {\n  return \"nativeEvent\" in e ? e.nativeEvent : e;\n}\n\nfunction onCapture(e: KeyboardEvent): void {\n  if (e.key !== \"Escape\") return;\n  // An Escape inside an IME composition cancels the composition and nothing else.\n  const top = isComposing(e) ? undefined : layers[layers.length - 1];\n  inFlight = top ? { event: e, layer: top, done: false } : null;\n}\n\n/** The fallback: no layer element was on the key's path, or none took it. */\nfunction onBubble(e: KeyboardEvent): void {\n  handOver(e, false);\n}\n\nfunction handOver(e: KeyboardEvent | ReactKeyboardEvent, stop: boolean): boolean {\n  const native = nativeOf(e);\n  const flight = inFlight;\n  if (native.key !== \"Escape\" || !flight || flight.event !== native || flight.done) return false;\n  if (claimed.has(native)) return false;\n  flight.done = true;\n  // Consumed: a type=\"search\" box does not clear itself as well, and a handler further\n  // out that checks `defaultPrevented` (FloatingPanel, an app's own panel) leaves it.\n  e.preventDefault();\n  if (stop) e.stopPropagation();\n  // A layer that closed on the way, by a handler of its own, has had its Escape.\n  if (layers.includes(flight.layer)) flight.layer.escape(native);\n  return true;\n}\n\nfunction push(layer: Layer): void {\n  if (layers.length === 0) {\n    document.addEventListener(\"keydown\", onCapture, true);\n    document.addEventListener(\"keydown\", onBubble);\n  }\n  layers.push(layer);\n  if (layer.overlay) notifyOverlays();\n}\n\nfunction pop(layer: Layer): void {\n  const at = layers.indexOf(layer);\n  if (at >= 0) layers.splice(at, 1);\n  if (at >= 0 && layer.overlay) notifyOverlays();\n  if (layers.length > 0) return;\n  document.removeEventListener(\"keydown\", onCapture, true);\n  document.removeEventListener(\"keydown\", onBubble);\n  inFlight = null;\n}\n\n/**\n * An Escape layer on the stack while `open`: the topmost layer is handed the next\n * Escape and calls `onEscape`, every layer under it waits its turn. A list opened inside\n * a dialog is above the dialog; a popover opened from a list, above the list.\n *\n * Where focus can be INSIDE the layer, its element's `onKeyDown` calls\n * {@link takeEscape} too, so the key stops there — see the module note. `onEscape` is\n * read live, so it need not be memoised; the layer is pushed and popped only when\n * `open` flips. The layer it returns is for the owner's {@link runOwnKeyDown}.\n */\nexport function useDismissLayer(\n  open: boolean,\n  onEscape: (e: KeyboardEvent) => void,\n  { overlay = true }: { overlay?: boolean } = {},\n): DismissLayer {\n  const handlerRef = useRef(onEscape);\n  const layerRef = useRef<Layer | null>(null);\n  // Written in an effect, not during render, so it satisfies react-hooks/refs: a\n  // render that React starts and then discards — a transition, a Suspense retry —\n  // would otherwise leave this holding a handler from a tree that never committed,\n  // and the stack would go on to call it. Keydown events fire after the commit, so\n  // the ref is always current by the time one arrives.\n  useEffect(() => {\n    handlerRef.current = onEscape;\n  });\n  useEffect(() => {\n    if (!open || typeof document === \"undefined\") return;\n    const layer: Layer = { escape: (e) => handlerRef.current(e), overlay };\n    layerRef.current = layer;\n    push(layer);\n    return () => {\n      pop(layer);\n      layerRef.current = null;\n    };\n  }, [open, overlay]);\n  return layerRef;\n}\n\n/*\n * Whether an overlay is open (0.49 KIT-11): every layer on the stack but a tooltip's is a\n * dialog, a sheet, a popover, a hover menu or a list covering part of the page, so the\n * stack is also the one place that knows. The floating launchers (`hideWhenOverlay`) step\n * aside while one is open instead of floating over it or beside it.\n */\nconst overlayListeners = new Set<() => void>();\n\nfunction notifyOverlays(): void {\n  for (const listener of overlayListeners) listener();\n}\n\nfunction subscribeOverlays(listener: () => void): () => void {\n  overlayListeners.add(listener);\n  return () => {\n    overlayListeners.delete(listener);\n  };\n}\n\nfunction anyOverlayOpen(): boolean {\n  return layers.some((layer) => layer.overlay);\n}\n\n/** True while a kit dialog, sheet, popover, hover menu or list is open (any layer of the\n *  Escape stack but a tooltip's). Internal. */\nexport function useOverlayOpen(enabled = true): boolean {\n  const open = useSyncExternalStore(subscribeOverlays, anyOverlayOpen, () => false);\n  return enabled && open;\n}\n\n/**\n * For a layer's own element, in its `onKeyDown`: hands an Escape on its way up to the\n * topmost layer — this one, unless something opened over it without taking focus (a\n * tooltip, the numpad) — and stops it here. True when it did; false for any other key,\n * a claimed Escape, or one already handed over.\n */\nexport function takeEscape(e: KeyboardEvent | ReactKeyboardEvent): boolean {\n  return handOver(e, true);\n}\n\n/**\n * For an Escape that means \"undo this step\", not \"close\": the key is the caller's, and\n * no layer is handed it. `preventDefault()`s it as well, so a handler further out that\n * checks `defaultPrevented` leaves it alone, as before.\n */\nexport function claimEscape(e: KeyboardEvent | ReactKeyboardEvent): void {\n  claimed.add(nativeOf(e));\n  e.preventDefault();\n}\n\n/**\n * Runs a layer owner's own key handler — a dialog's `onKeyDown` prop — and turns a\n * `preventDefault()` it makes on Escape into a claim: the one way, beside\n * {@link claimEscape}, to keep a layer open.\n *\n * Given the owner's `layer` (what {@link useDismissLayer} returned), an Escape that went\n * down while another layer was above that one skips the handler: the press is the\n * layer's on top, and the owner hears the next (0.35, KS). Without it, or while the\n * owner's layer is not open, the handler sees every key, as before.\n */\nexport function runOwnKeyDown<E extends ReactKeyboardEvent>(\n  e: E,\n  handler: ((e: E) => void) | undefined,\n  layer?: DismissLayer,\n): void {\n  if (!handler) return;\n  if (layer && aboveOwner(e, layer.current)) return;\n  const before = e.defaultPrevented;\n  handler(e);\n  if (e.key === \"Escape\" && !before && e.defaultPrevented) claimed.add(nativeOf(e));\n}\n\n/** Whether this Escape went down with a layer above `owner` — the topmost one then was\n *  another, and `owner` is on the stack. An Escape the stack did not note (one inside an\n *  IME composition) is nobody else's. */\nfunction aboveOwner(e: ReactKeyboardEvent, owner: Layer | null): boolean {\n  const flight = inFlight;\n  if (e.key !== \"Escape\" || !owner || !flight || flight.event !== nativeOf(e)) return false;\n  return flight.layer !== owner && layers.includes(owner);\n}\n\n/**\n * Calls `handler` on an Escape while `enabled` — as an Escape layer. Since 0.34 this is\n * {@link useDismissLayer} with its arguments the other way round: it hears the key only\n * while nothing opened above it, and inside a dialog it no longer loses the key to the\n * dialog (Wave 2, DUP-1). `handler` is read live, so it need not be memoised.\n */\nexport function useEscapeKey(handler: () => void, enabled = true): void {\n  useDismissLayer(enabled, handler);\n}\n\n/** Called with each native press an owner's React tree saw — see {@link useOutsideClick}. */\ntype PressMark = (press: Event) => void;\n\n/** The outside-click hooks watching each ref, for {@link pressInside}. */\nconst watchers = new WeakMap<RefObject<HTMLElement | null>, Set<PressMark>>();\n\n/** What an `onPointerDownCapture` hands over: a React event, its press inside. */\ntype ReactPress = { nativeEvent: Event };\n\n/**\n * An `onPointerDownCapture` for a panel whose `ref` an outside-click hook watches but\n * whose element the hook's owner does not render — {@link DropdownPanel} and\n * `ComboboxPanel` take `panelRef` from `useDropdown` / `useComboboxCore`. Every press\n * that reaches the panel through the React tree, a portalled list opened inside it\n * included, is marked inside for each hook watching `ref`. See {@link useOutsideClick}.\n */\nexport function pressInside(ref: RefObject<HTMLElement | null> | undefined): ((e: ReactPress) => void) | undefined {\n  if (!ref) return undefined;\n  return (e) => {\n    watchers.get(ref)?.forEach((mark) => mark(e.nativeEvent));\n  };\n}\n\n/**\n * Calls `handler` on a press that lands outside every supplied element, while\n * `enabled` — the outside-click-to-close half of the same dismissal story. Pass one\n * ref or several (trigger + panel); a press inside any of them is ignored. Refs and\n * `handler` are read live, so an inline `[triggerRef, panelRef]` array is fine and\n * won't churn the listener.\n *\n * ## A panel opened from inside is inside (0.48, keksdose dev#623)\n *\n * A CurrencySelect in a Popover: the currency list is portalled to `<body>`, so in the\n * DOM it is outside the popover's panel, and the first press on a currency closed the\n * POPOVER at pointerdown — the list went with it and the choice never landed. The same\n * for a combobox, a menu, a date picker's popover, a dropdown, at any depth.\n *\n * In the React tree the portal is still where it was opened from, and React passes a\n * press up that tree, through portals. So the hook hands back an\n * `onPointerDownCapture`: put it on the element the press should count as inside of —\n * the kit's Popover panel, HoverMenu, DropdownPanel and ComboboxPanel do — and every\n * press that travels through that element in React, portalled panels opened inside it\n * included, is not outside. React's listeners sit on the root and on each portal's\n * container, so they hear the press before this document listener does. No owner chain\n * to keep: depth is free, and an app's own portal inside a kit panel is covered too. A\n * panel the hook's owner does not render takes {@link pressInside} with the watched ref.\n *\n * **`pointerdown`, not `mousedown`** — one event covering mouse, touch and pen.\n * This listened for `mousedown` alone, which on a touch platform is a SYNTHESISED\n * event: the browser emits it for most taps, which is why nothing obviously broke,\n * but the synthesis is not guaranteed. A tap that begins a scroll, or one that lands\n * on an element which preventDefaults the touch sequence, may never produce one — and\n * on a phone-first PWA whose pickers, menus and flyouts all dismiss through this hook,\n * inheriting that is worse than choosing it.\n *\n * The one behaviour this changes deliberately: a touch-drag that starts outside an\n * open panel now dismisses it at touch-down, where before it did not dismiss at all\n * (a drag synthesises no mousedown). That matches every other platform surface, and\n * the anchored panels re-measure on scroll precisely because the page moves under\n * them.\n */\nexport function useOutsideClick(\n  refs: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],\n  handler: () => void,\n  enabled = true,\n): (e: ReactPress) => void {\n  const refsRef = useRef(refs);\n  const handlerRef = useRef(handler);\n  // The last press this owner's React tree saw: the one the document listener is about\n  // to hear, when it went through a panel the owner marked.\n  const insideRef = useRef<Event | null>(null);\n  // In an effect rather than during render — see the note in useDismissLayer.\n  useEffect(() => {\n    refsRef.current = refs;\n    handlerRef.current = handler;\n  });\n  const markInside = useCallback((e: ReactPress) => {\n    insideRef.current = e.nativeEvent;\n  }, []);\n  useEffect(() => {\n    if (!enabled) return;\n    const mark: PressMark = (press) => {\n      insideRef.current = press;\n    };\n    const watched = Array.isArray(refsRef.current) ? refsRef.current : [refsRef.current];\n    for (const r of watched) {\n      const set = watchers.get(r) ?? new Set<PressMark>();\n      set.add(mark);\n      watchers.set(r, set);\n    }\n    const onPointerDown = (e: Event) => {\n      const inside = insideRef.current === e;\n      insideRef.current = null;\n      if (inside) return;\n      const target = e.target as Node;\n      const list = Array.isArray(refsRef.current) ? refsRef.current : [refsRef.current];\n      for (const r of list) {\n        if (r.current?.contains(target)) return;\n      }\n      handlerRef.current();\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => {\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n      for (const r of watched) watchers.get(r)?.delete(mark);\n    };\n  }, [enabled]);\n  return markInside;\n}\n"],"mappings":"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","names":[]}

package/dist/hooks/use-document-title.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Writes the window's title (`document.title`) while the calling component is mounted,
+ * and puts back the title it found when it unmounts (0.49 KIT-9).
+ *
+ * `parts` are positional: `[page, section, app]`. The app falls back to the provider's
+ * `appName`, the format to the provider's `documentTitleFormat` (default
+ * "{page} · {section} · {app}"); a missing part drops with its separator
+ * ({@link formatDocumentTitle}). Parts that are ALL empty write nothing — the provider's
+ * app alone is not a page's title.
+ *
+ * `PageHeader` calls it for its `h1` (`documentTitle`); call it yourself for a page
+ * without one.
+ */
+export declare function useDocumentTitle(parts: ReadonlyArray<string | null | undefined | false>): void;

package/dist/hooks/use-document-title.js

@@ -0,0 +1,22 @@
+"use client";
+import { useEffect } from "react";
+import { useKitDocumentTitle } from "../i18n/kit-labels.js";
+import { DEFAULT_DOCUMENT_TITLE_FORMAT, formatDocumentTitle } from "../lib/document-title.js";
+function useDocumentTitle(parts) {
+  const { format, appName } = useKitDocumentTitle();
+  const [page, section, app] = parts.map((p) => typeof p === "string" && p.trim() !== "" ? p : void 0);
+  const any = parts.some((p) => typeof p === "string" && p.trim() !== "");
+  const title = any ? formatDocumentTitle(format ?? DEFAULT_DOCUMENT_TITLE_FORMAT, { page, section, app: app ?? appName }) : null;
+  useEffect(() => {
+    if (title === null || title === "") return;
+    const before = document.title;
+    document.title = title;
+    return () => {
+      document.title = before;
+    };
+  }, [title]);
+}
+export {
+  useDocumentTitle
+};
+//# sourceMappingURL=use-document-title.js.map

package/dist/hooks/use-document-title.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-document-title.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useKitDocumentTitle } from \"../i18n/kit-labels\";\nimport { DEFAULT_DOCUMENT_TITLE_FORMAT, formatDocumentTitle } from \"../lib/document-title\";\n\n/**\n * Writes the window's title (`document.title`) while the calling component is mounted,\n * and puts back the title it found when it unmounts (0.49 KIT-9).\n *\n * `parts` are positional: `[page, section, app]`. The app falls back to the provider's\n * `appName`, the format to the provider's `documentTitleFormat` (default\n * \"{page} · {section} · {app}\"); a missing part drops with its separator\n * ({@link formatDocumentTitle}). Parts that are ALL empty write nothing — the provider's\n * app alone is not a page's title.\n *\n * `PageHeader` calls it for its `h1` (`documentTitle`); call it yourself for a page\n * without one.\n */\nexport function useDocumentTitle(parts: ReadonlyArray<string | null | undefined | false>): void {\n  const { format, appName } = useKitDocumentTitle();\n  const [page, section, app] = parts.map((p) => (typeof p === \"string\" && p.trim() !== \"\" ? p : undefined));\n  const any = parts.some((p) => typeof p === \"string\" && p.trim() !== \"\");\n  const title = any ? formatDocumentTitle(format ?? DEFAULT_DOCUMENT_TITLE_FORMAT, { page, section, app: app ?? appName }) : null;\n  useEffect(() => {\n    if (title === null || title === \"\") return;\n    const before = document.title;\n    document.title = title;\n    return () => {\n      document.title = before;\n    };\n  }, [title]);\n}\n"],"mappings":";AAAA,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AACpC,SAAS,+BAA+B,2BAA2B;AAe5D,SAAS,iBAAiB,OAA+D;AAC9F,QAAM,EAAE,QAAQ,QAAQ,IAAI,oBAAoB;AAChD,QAAM,CAAC,MAAM,SAAS,GAAG,IAAI,MAAM,IAAI,CAAC,MAAO,OAAO,MAAM,YAAY,EAAE,KAAK,MAAM,KAAK,IAAI,MAAU;AACxG,QAAM,MAAM,MAAM,KAAK,CAAC,MAAM,OAAO,MAAM,YAAY,EAAE,KAAK,MAAM,EAAE;AACtE,QAAM,QAAQ,MAAM,oBAAoB,UAAU,+BAA+B,EAAE,MAAM,SAAS,KAAK,OAAO,QAAQ,CAAC,IAAI;AAC3H,YAAU,MAAM;AACd,QAAI,UAAU,QAAQ,UAAU,GAAI;AACpC,UAAM,SAAS,SAAS;AACxB,aAAS,QAAQ;AACjB,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AACZ;","names":[]}

package/dist/i18n/german.js

@@ -519,6 +519,7 @@ function germanLabels(numberLocale) {
       theme: "Theme wechseln",
       palette: "Darstellungsvorlage",
       language: "Sprache",
+      languageCurrent: (name) => `Sprache w\xE4hlen, aktuell: ${name}`,
       switchRole: "Rolle wechseln",
       role: (value) => `Rolle: ${value}`
     },
@@ -1786,11 +1787,14 @@ Die vollst\xE4ndige Postanschrift wird betroffenen Personen und Aufsichtsbeh\xF6
     },
     rowActions: {
       actions: "Aktionen",
-      actionsFor: (name) => `Aktionen f\xFCr ${name}`
+      actionsFor: (name) => `Aktionen f\xFCr ${name}`,
+      confirmTitle: (action, name) => name ? `${action}: \xAB${name}\xBB?` : `${action}?`,
+      confirmBody: "Das l\xE4sst sich nicht r\xFCckg\xE4ngig machen."
     },
     appShellMore: {
       more: "Mehr",
-      moreTitle: "Weitere Seiten"
+      moreTitle: "Weitere Seiten",
+      overview: "\xDCbersicht"
     },
     // 0.42.0 — docs/admin-harmonization.md §3.1: the admin area's shared words. "Verwaltung"
     // as settings §5 names the page; "mit Administratorrechten" rather than "für