@eifi1/ui-kit 0.32.2 → 0.33.1

package/dist/components/file-dropzone.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\nimport { Upload, X } from \"lucide-react\";\nimport { Button, IconButton, Spinner } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitFileLabels, useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  DEFAULT_FILE_PICKER_LABELS,\n  formatAccept,\n  judgePick,\n  screenFiles,\n  summariseRejections,\n} from \"./file-button\";\nimport type { FilePickHandler, FilePickerLabels, FileRejection } from \"./file-button\";\nimport { useDragTarget } from \"../hooks/use-file-drop\";\nimport { toast } from \"./toast\";\nimport { useCommitReason } from \"./write-lock\";\n\n/**\n * Where a refused file's message goes.\n *\n *  - `\"toast\"` — a `sonner` toast (the 0.5 behaviour, kept as the default for a caller\n *    that handles nothing itself so no existing dropzone goes quiet on upgrade).\n *  - `\"inline\"` — under the drop target, in the danger colour, tied to it with\n *    `aria-describedby` (plus `data-invalid` for styling), and spoken through a live\n *    region. Cleared by the next accepted pick.\n *  - `\"none\"` — nothing visible; the caller shows it from `onReject` / `onInvalid`.\n *    Still spoken, so a host rendering it should not ALSO make it `role=\"alert\"`.\n */\nexport type FileDropzoneRejectionFeedback = \"toast\" | \"inline\" | \"none\";\n\n/** What a custom {@link FileDropzoneProps.renderBody} is handed. */\nexport interface FileDropzoneState {\n  /** A file drag is over the zone right now. */\n  dragOver: boolean;\n  disabled: boolean;\n  busy: boolean;\n  /** 0.22: locked with a reason (`disabledReason`, or `commit` under a locked\n   *  {@link WriteLockProvider}) — takes no files, like `disabled`. */\n  locked: boolean;\n  /** The reason while `locked`, for a custom body to show; `undefined` otherwise. */\n  disabledReason: ReactNode | undefined;\n  /** What is chosen: `files` in multiple mode, `[file]` or `[]` in single mode. */\n  files: readonly File[];\n  /** The inline refusal, when `rejectionFeedback=\"inline\"` has one to show. */\n  error: string | null;\n  /** Open the system picker — for a body that brings its own trigger (a second\n   *  \"Take photo\" button). Does nothing while `disabled` or `busy`. */\n  open: () => void;\n  /** The resolved `filePicker` strings, so a custom body speaks the same language. */\n  labels: FilePickerLabels;\n}\n\n/**\n * `onInvalid` is omitted from the `<div>` attributes and kept as this component's own.\n * The DOM event of that name belongs to form validation and takes a `FormEvent`; this\n * one takes the rejected `File`, and the kit's meaning is the one every caller already\n * writes. Everything else a `<div>` takes reaches the root — which carries\n * `role=\"group\"` named by `dropLabel`, so that is also where an `aria-label` or an\n * `aria-describedby` belongs.\n *\n * Two modes. SINGLE (the default, and all of 0.5): `file` + `onFileSelected`. MULTIPLE\n * (`multiple`): `files` + `onFilesSelected`. They are optional rather than a union so\n * `FileDropzoneProps` stays an interface a caller can extend; a single-mode pick also\n * reaches `onFilesSelected` as a one-element array, so one handler can serve both.\n */\nexport interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onInvalid\"> {\n  /** Single mode: the chosen file, echoed with its size. */\n  file?: File | null;\n  /** Single mode: called with the accepted file. */\n  onFileSelected?: (file: File) => void;\n  /** Take several files per pick or drop. Without it a drop of several keeps the first. */\n  multiple?: boolean;\n  /** Multiple mode: the chosen files, listed in the zone. */\n  files?: readonly File[];\n  /** Every accepted file of one pick, in order. Never called with an empty array. */\n  onFilesSelected?: (files: File[]) => void;\n  /**\n   * Show a remove button inside the zone once something is chosen (kastlan asked for\n   * it: the only way to un-choose a file was to reload). Single mode: removes the file.\n   * Multiple mode: a \"remove all\" button. The host clears its own state here — the\n   * zone is controlled. Focus moves to the Browse button, and the removal is announced.\n   */\n  onClear?: () => void;\n  /** Multiple mode: a remove button per listed file. */\n  onRemove?: (file: File, index: number) => void;\n  accept: string;\n  /**\n   * The caller's check. Optional since 0.6: without it the zone checks `accept` itself\n   * (a drop ignores the dialog's filter). With it, `accept` is NOT re-checked — every\n   * 0.5 caller's `isValid` is its own type check, and doubling it could refuse a file\n   * the caller accepts (a `.zip` the OS labelled `application/octet-stream`).\n   */\n  isValid?: (file: File) => boolean;\n  /** The message for an `isValid` refusal. Defaults to `labels.rejectedInvalid`. */\n  invalidMessage?: string;\n  /** Bytes; larger files are refused. */\n  maxSize?: number;\n  /** Multiple mode: files one pick may add. Pass what is LEFT for a running cap. */\n  maxFiles?: number;\n  /**\n   * Called once per refused file. The 0.5 hook, kept as it was; {@link onReject}\n   * carries the reason and the translated message as well.\n   *\n   * Its existence used to be what switched the toast off, and it still does (see\n   * {@link rejectionFeedback}). The toast is the kit's `toast`, which loads `sonner`\n   * lazily: it is an OPTIONAL peer, and a static import here once broke\n   * `import { Button }` for every app without it (see `optional-peer-imports.test.tsx`).\n   */\n  onInvalid?: (file: File) => void;\n  /** Every refused file of one pick, with its reason and message. */\n  onReject?: (rejections: FileRejection[]) => void;\n  /** The whole pick at once, before any of the above — return `false` to refuse all\n   *  of it (see {@link FilePickHandler}). A refused pick selects nothing; its one\n   *  message (`labels.rejectedPick`) goes where `rejectionFeedback` says. */\n  onPick?: FilePickHandler;\n  /** See {@link FileDropzoneRejectionFeedback}. Defaults to `\"toast\"` when neither\n   *  `onInvalid` nor `onReject` is given, `\"none\"` when one is. */\n  rejectionFeedback?: FileDropzoneRejectionFeedback;\n  /** Per-instance overrides of the `filePicker` label namespace. */\n  labels?: Partial<FilePickerLabels>;\n  /** The dropzone's accessible name. A caller's own `aria-label` wins over it — see\n   *  the root element below. Optional since 0.8, like the three below: each falls back\n   *  to its `filePicker` string from `<UiKitProvider labels>`, then to English. They\n   *  were required, so every call site passed four strings through `t()` by hand, and a\n   *  zone nested in a kit component (the feedback form) had no call site to pass them. */\n  dropLabel?: string;\n  /** Default `filePicker.browse`. */\n  browseLabel?: string;\n  /** What the zone says while nothing is chosen. Default `filePicker.empty` /\n   *  `emptyMultiple`. */\n  emptyLabel?: string;\n  /** The second line, e.g. what may be dropped. Default `filePicker.hint(accept)`. */\n  hint?: string;\n  /**\n   * Not taking files: no drop, no picker, no remove buttons; `aria-disabled` on the\n   * group. keksdose locks its invoice zone while another form holds unsaved changes,\n   * and hand-rolled the whole zone to be able to (invoice-upload.tsx, \"Locked\").\n   */\n  disabled?: boolean;\n  /**\n   * Working on what it was given — an upload, an OCR pass. Inert like `disabled`, plus\n   * `aria-busy`, a spinner in place of the upload icon, and `filePicker.busy` as the\n   * text. The other half of why keksdose's invoice zone was hand-rolled.\n   */\n  busy?: boolean;\n  /**\n   * Why the zone is not taking files — the write lock's sentence, a quota, a closed\n   * period (keksdose K3). Takes no drop, no picker and no removal, like `disabled`, and\n   * SAYS so: the Browse button (and every remove button) stays focusable,\n   * `aria-disabled`, with the reason in the kit Tooltip and its description, the zone's\n   * group is described by it, and the default body shows it where the hint was. Not\n   * dimmed: what is chosen stays readable. Wins over `disabled`'s silent look.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This zone COMMITS — an upload that starts on drop. Under a locked\n   * {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n   * reason (which wins over one of its own). No provider, or an unlocked one: no\n   * effect. A zone that only stages a file for a form saved later is not a commit.\n   */\n  commit?: boolean;\n  /**\n   * Replace the zone's body — the icon, the text and the chosen-file list — with your\n   * own, given the zone's state: keksdose's spinner-plus-\"uploading\", its multi-shot\n   * hint (\"several photos are possible\"), a second trigger for the camera.\n   *\n   * The Browse button, the inline error and the live regions stay: Browse is the\n   * keyboard path, and a body that forgot it would leave the zone unreachable without\n   * a pointer. A click on a control inside the body does not also open the picker.\n   */\n  renderBody?: (state: FileDropzoneState) => ReactNode;\n  /** Extra classes for the dropzone's root. */\n  className?: string;\n}\n\n/** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml) and\n * kastlan's document forms. Refusals go to `onReject`/`onInvalid` and to\n * `rejectionFeedback`; the chosen file(s) are echoed with their size, otherwise\n * `emptyLabel` + `hint` describe what to drop. For a trigger with no drop area, see\n * `FileButton`. */\nexport function FileDropzone({\n  file,\n  onFileSelected,\n  multiple,\n  files,\n  onFilesSelected,\n  onClear,\n  onRemove,\n  accept,\n  isValid,\n  invalidMessage,\n  maxSize,\n  maxFiles,\n  onInvalid,\n  onReject,\n  onPick,\n  rejectionFeedback,\n  labels: labelsProp,\n  dropLabel: dropLabelProp,\n  browseLabel: browseLabelProp,\n  emptyLabel: emptyLabelProp,\n  hint: hintProp,\n  disabled,\n  busy,\n  disabledReason: ownDisabledReason,\n  commit,\n  renderBody,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": describedByProp,\n  ...rest\n}: FileDropzoneProps) {\n  const [error, setError] = useState<string | null>(null);\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasReason(disabledReason);\n  // Locked counts as inert for every file path (drop, click, Browse, remove); only the\n  // LOOK and the native `disabled` keep it apart, so its controls stay focusable.\n  const inert = Boolean(disabled || busy) || locked;\n  const reasonId = useId();\n  // State rather than a ref: `open` is handed to `renderBody` during render, and a\n  // function that reads a ref there is exactly what the refs rule cannot prove safe.\n  const [fileInput, setFileInput] = useState<HTMLInputElement | null>(null);\n  const browseRef = useRef<HTMLButtonElement>(null);\n  const errorId = useId();\n  // The size through the kit's `file.size` label (the provider's locale by default).\n  // This was `${n / 1024} KB`: ASCII digits, an English unit, and a binary kilobyte\n  // mislabelled as a decimal one, all in one template literal.\n  const fileText = useKitFileLabels();\n  const labels = useKitLabels(\"filePicker\", DEFAULT_FILE_PICKER_LABELS, labelsProp);\n  // Two regions, two urgencies: a pick or a removal is news, a refusal is a failure.\n  // The echoed file name is only text in the zone, and text changing somewhere on the\n  // page is not announced by itself.\n  const status = useAnnounce();\n  const alert = useAnnounce({ politeness: \"assertive\" });\n  const feedback: FileDropzoneRejectionFeedback =\n    rejectionFeedback ?? (onInvalid || onReject ? \"none\" : \"toast\");\n  const dropLabel = dropLabelProp ?? labels.dropzone;\n  const browseLabel = browseLabelProp ?? labels.browse;\n  const emptyLabel = emptyLabelProp ?? (multiple ? labels.emptyMultiple : labels.empty);\n  const hint = hintProp ?? labels.hint(formatAccept(accept));\n\n  const acceptFiles = (list: ArrayLike<File> | null | undefined) => {\n    if (inert || !list || list.length === 0) return;\n    const all = Array.from(list);\n    const picked = multiple ? all : all.slice(0, 1);\n    const { accepted, rejected } = screenFiles(\n      picked,\n      {\n        accept: isValid ? undefined : accept,\n        maxSize,\n        maxFiles: multiple ? maxFiles : undefined,\n        isValid,\n        invalidMessage,\n      },\n      labels,\n      fileText.size,\n    );\n    const stands = judgePick(onPick, accepted, rejected);\n    if (stands && accepted.length > 0) {\n      setError(null);\n      if (multiple) {\n        onFilesSelected?.(accepted);\n      } else {\n        onFileSelected?.(accepted[0]);\n        onFilesSelected?.(accepted);\n      }\n      status.announce(labels.selected(accepted.length, accepted[0].name));\n    }\n    if (!stands || rejected.length > 0) {\n      for (const r of rejected) onInvalid?.(r.file);\n      if (rejected.length > 0) onReject?.(rejected);\n      const message = stands\n        ? summariseRejections(rejected, labels)\n        : labels.rejectedPick(picked.length);\n      if (feedback === \"toast\") {\n        // The kit's `toast`, which loads sonner (an optional peer) lazily, so an app\n        // that never trips this never has to install it. Nothing downstream depends\n        // on the toast having appeared. The toaster is a live region, so this path\n        // does not announce a second time.\n        toast.error(message);\n      } else {\n        if (feedback === \"inline\") setError(message);\n        alert.announce(message);\n      }\n    }\n  };\n\n  // The remove buttons unmount with the file they removed, and focus would fall to\n  // <body>. Browse is where the next action (pick again) starts.\n  const afterRemoval = (message: string) => {\n    browseRef.current?.focus();\n    status.announce(message);\n  };\n\n  // The enter/leave counter lives in the shared hook: the boolean this was flickered\n  // across every child of the zone in Safari, whose drag events carry no\n  // `relatedTarget` to tell a move onto a child from a real leave.\n  const { dropProps, isOver: dragOver } = useDragTarget<HTMLDivElement>({\n    disabled: inert,\n    onDropFiles: acceptFiles,\n  });\n  const open = () => {\n    if (!inert) fileInput?.click();\n  };\n\n  const chosen: readonly File[] = multiple ? (files ?? []) : file ? [file] : [];\n  const showError = feedback === \"inline\" && error !== null;\n  const describedBy = cn(describedByProp, showError && errorId, locked && reasonId) || undefined;\n  // The controls inside: natively disabled while disabled or busy; locked, they take\n  // the reason instead and stay reachable (Button's `disabledReason` path).\n  const controlDisabled = Boolean(disabled || busy);\n  const controlReason = locked ? disabledReason : undefined;\n  const reasonLine = locked && (\n    <div data-slot=\"file-dropzone-reason\" className=\"text-xs text-[var(--text-muted)]\">\n      {disabledReason}\n    </div>\n  );\n\n  return (\n    <>\n      {/* A named group, NOT a `role=\"button\"`. It was one, with real buttons (Browse,\n          the remove buttons) inside it: nested interactive controls, which ARIA forbids\n          because a button's children are presentational — a screen reader either read\n          the zone as one opaque button or skipped the inner ones, and the zone was an\n          extra Tab stop that did what Browse does. Now the keyboard path is Browse, a\n          real button; the zone keeps its drop target and its click-anywhere for a\n          pointer, which is a convenience on top of Browse rather than the only way in. */}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions -- the click is a pointer shortcut for Browse, see above */}\n      <div\n        // `...rest` first: every handler below is the drop gesture itself.\n        {...rest}\n        {...dropProps}\n        // Pointer only; every control inside stops its own click from reaching here\n        // (and one in a custom body is skipped below). The keyboard equivalent is the\n        // Browse button, so no key handler belongs on a group.\n        onClick={(e) => {\n          if (fromControl(e)) return;\n          open();\n        }}\n        role=\"group\"\n        // The DOM spelling wins over `dropLabel`, which stays the name for every caller\n        // that passes no `aria-label` — i.e. all of them today. Standardising on\n        // `aria-label` (audit §api-design) does not get to silently rename an existing\n        // required prop.\n        aria-label={ariaLabel ?? dropLabel}\n        // No `aria-invalid`: ARIA does not allow it on `role=\"group\"`. The message is\n        // reached through the description instead, and spoken when it appears.\n        aria-describedby={describedBy}\n        data-invalid={showError || undefined}\n        aria-disabled={disabled || locked || undefined}\n        aria-busy={busy || undefined}\n        data-drag-over={dragOver || undefined}\n        className={cn(\n          // `relative` is load-bearing, not cosmetic. The file input below is `sr-only`,\n          // which Tailwind implements as `position: absolute` — so without a positioned\n          // ancestor its containing block is the INITIAL one, and it is laid out at its\n          // own offset from the top of the document. Nothing looks wrong, because the\n          // input is 1x1 and clipped; what breaks is the page height. On a long page\n          // every escaped sr-only element extends `documentElement.scrollHeight` to its\n          // own offset, which produces a second, whole-document scrollbar alongside the\n          // app shell's own — one that scrolls past the end of the content into nothing.\n          // Measured on the showcase: body 900px, document 47,919px.\n          \"relative flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors\",\n          // Three states out of two border tokens: the target rests on the plain\n          // hairline, hover pulls it to `--border-strong`, and a live drag keeps that\n          // border and adds the `--bg-active` wash on top — so \"let go here\" still reads\n          // one step louder than \"you are over it\". A refusal shown inline takes the\n          // danger border until the next good pick.\n          // Inert zones keep the resting hairline and lose the hover pull: a border that\n          // answers the pointer promises a drop the zone will refuse.\n          disabled\n            ? \"cursor-not-allowed border-[var(--border)] opacity-60\"\n            : busy\n              ? \"cursor-progress border-[var(--border)]\"\n              : locked\n                ? \"cursor-not-allowed border-[var(--border)]\"\n                : dragOver\n                ? \"cursor-pointer border-[var(--border-strong)] bg-[var(--bg-active)]\"\n                : showError\n                  ? \"cursor-pointer border-[var(--danger-border-strong)]\"\n                  : \"cursor-pointer border-[var(--border)] hover:border-[var(--border-strong)]\",\n          className,\n        )}\n      >\n        {renderBody ? (\n          renderBody({\n            dragOver,\n            disabled: Boolean(disabled),\n            busy: Boolean(busy),\n            locked,\n            disabledReason: locked ? disabledReason : undefined,\n            files: chosen,\n            error: showError ? error : null,\n            open,\n            labels,\n          })\n        ) : busy ? (\n          <>\n            {/* `label={null}`: the zone is `aria-busy` and the line below says the\n                same in words; a spoken \"Loading\" would only run into it. */}\n            <Spinner label={null} className=\"size-5\" />\n            <div className=\"text-sm text-[var(--text-secondary)]\">{labels.busy}</div>\n          </>\n        ) : (\n          <>\n            <Upload aria-hidden className=\"size-5 text-[var(--text-muted)]\" />\n            {multiple && chosen.length > 0 ? (\n              <>\n                <ul className=\"flex w-full max-w-sm flex-col gap-1 text-start\">\n                  {chosen.map((f, i) => (\n                    <li\n                      // Name + size + position: two files may share a name, and the index\n                      // alone would re-key every row below a removal.\n                      key={`${f.name}-${f.size}-${i}`}\n                      className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)]\"\n                    >\n                      <span className=\"min-w-0 flex-1 truncate font-medium\">{f.name}</span>\n                      <span className=\"shrink-0 text-xs text-[var(--text-muted)]\">{fileText.size(f.size)}</span>\n                      {onRemove && (\n                        <IconButton\n                          type=\"button\"\n                          size=\"sm\"\n                          disabled={controlDisabled}\n                          disabledReason={controlReason}\n                          aria-label={labels.remove(f.name)}\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            onRemove(f, i);\n                            afterRemoval(labels.removed(f.name));\n                          }}\n                        >\n                          <X aria-hidden />\n                        </IconButton>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n                {reasonLine}\n              </>\n            ) : (\n              <>\n                <div className=\"flex items-center gap-1 text-sm text-[var(--text-secondary)]\">\n                  {/* `!multiple`: in multiple mode an empty `files` list is \"nothing chosen\",\n                      whatever a stray `file` prop says — it used to show that file's name. */}\n                  {!multiple && file ? <span className=\"font-medium\">{file.name}</span> : emptyLabel}\n                  {!multiple && file && onClear && (\n                    <IconButton\n                      type=\"button\"\n                      size=\"sm\"\n                      disabled={controlDisabled}\n                      disabledReason={controlReason}\n                      aria-label={labels.remove(file.name)}\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        onClear();\n                        afterRemoval(labels.removed(file.name));\n                      }}\n                    >\n                      <X aria-hidden />\n                    </IconButton>\n                  )}\n                </div>\n                {/* Locked, the reason takes the hint's place: what may be dropped is moot\n                    while nothing may. A chosen file keeps its size, the reason below. */}\n                {locked && !(file && !multiple) ? (\n                  reasonLine\n                ) : (\n                  <div className=\"text-xs text-[var(--text-muted)]\">\n                    {file && !multiple ? fileText.size(file.size) : hint}\n                  </div>\n                )}\n                {locked && file && !multiple && reasonLine}\n              </>\n            )}\n          </>\n        )}\n        <div className=\"flex flex-wrap items-center justify-center gap-2\">\n          <Button\n            ref={browseRef}\n            type=\"button\"\n            variant=\"secondary\"\n            disabled={controlDisabled}\n            disabledReason={controlReason}\n            onClick={(e) => {\n              e.stopPropagation();\n              open();\n            }}\n          >\n            {browseLabel}\n          </Button>\n          {multiple && chosen.length > 0 && onClear && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              disabled={controlDisabled}\n              disabledReason={controlReason}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClear();\n                afterRemoval(labels.cleared);\n              }}\n            >\n              {labels.clearAll}\n            </Button>\n          )}\n        </div>\n        {showError && (\n          <p id={errorId} className=\"text-xs text-[var(--danger)]\">\n            {error}\n          </p>\n        )}\n        {/* The group's description while locked: a copy of its own, so a custom body\n            that does not show the reason still has the zone say it. */}\n        {locked && (\n          <span id={reasonId} hidden>\n            {disabledReason}\n          </span>\n        )}\n        <input\n          ref={setFileInput}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={inert}\n          onChange={(e) => {\n            // Copy, THEN reset: `files` is a live view of the value, and without the\n            // reset picking the same file a second time fires no `change` at all —\n            // the retry after a failed upload silently did nothing (kastlan).\n            const picked = Array.from(e.currentTarget.files ?? []);\n            e.currentTarget.value = \"\";\n            acceptFiles(picked);\n          }}\n          // Clicks are forwarded here programmatically; one reaching the zone's own\n          // handler again would open the dialog a second time.\n          onClick={(e) => e.stopPropagation()}\n          className=\"sr-only\"\n        />\n      </div>\n      {/* Outside the zone, where they have always been (the zone used to be a\n          `role=\"button\"`, whose content is presentational). `sr-only-fixed`, so they\n          need no positioned ancestor. */}\n      <span {...status.regionProps} />\n      <span {...alert.regionProps} />\n    </>\n  );\n}\n\n/** A reason that is really there — `null`, `false` and `\"\"` are no reason. */\nfunction hasReason(reason: ReactNode): boolean {\n  return reason !== undefined && reason !== null && reason !== false && reason !== \"\";\n}\n\n/** A click that landed on a control inside the zone (a custom body's own button, a\n *  link in the hint) is that control's, not a request to open the picker. */\nfunction fromControl(e: MouseEvent<HTMLElement>): boolean {\n  const target = e.target as Element | null;\n  const control = target?.closest?.(\"button, a[href], input, select, textarea, label, [role='button']\");\n  return Boolean(control && control !== e.currentTarget && e.currentTarget.contains(control));\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\nimport { Upload, X } from \"lucide-react\";\nimport { Button, IconButton, Spinner } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitFileLabels, useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  DEFAULT_FILE_PICKER_LABELS,\n  formatAccept,\n  judgePick,\n  screenFiles,\n  summariseRejections,\n} from \"./file-button\";\nimport type { FilePickHandler, FilePickerLabels, FileRejection } from \"./file-button\";\nimport { useDragTarget } from \"../hooks/use-file-drop\";\nimport { toast } from \"./toast\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\n\n/**\n * Where a refused file's message goes.\n *\n *  - `\"toast\"` — a `sonner` toast (the 0.5 behaviour, kept as the default for a caller\n *    that handles nothing itself so no existing dropzone goes quiet on upgrade).\n *  - `\"inline\"` — under the drop target, in the danger colour, tied to it with\n *    `aria-describedby` (plus `data-invalid` for styling), and spoken through a live\n *    region. Cleared by the next accepted pick.\n *  - `\"none\"` — nothing visible; the caller shows it from `onReject` / `onInvalid`.\n *    Still spoken, so a host rendering it should not ALSO make it `role=\"alert\"`.\n */\nexport type FileDropzoneRejectionFeedback = \"toast\" | \"inline\" | \"none\";\n\n/** What a custom {@link FileDropzoneProps.renderBody} is handed. */\nexport interface FileDropzoneState {\n  /** A file drag is over the zone right now. */\n  dragOver: boolean;\n  disabled: boolean;\n  busy: boolean;\n  /** 0.22: locked with a reason (`disabledReason`, or `commit` under a locked\n   *  {@link WriteLockProvider}) — takes no files, like `disabled`. */\n  locked: boolean;\n  /** The reason while `locked`, for a custom body to show; `undefined` otherwise. */\n  disabledReason: ReactNode | undefined;\n  /** What is chosen: `files` in multiple mode, `[file]` or `[]` in single mode. */\n  files: readonly File[];\n  /** The inline refusal, when `rejectionFeedback=\"inline\"` has one to show. */\n  error: string | null;\n  /** Open the system picker — for a body that brings its own trigger (a second\n   *  \"Take photo\" button). Does nothing while `disabled` or `busy`. */\n  open: () => void;\n  /** The resolved `filePicker` strings, so a custom body speaks the same language. */\n  labels: FilePickerLabels;\n}\n\n/**\n * `onInvalid` is omitted from the `<div>` attributes and kept as this component's own.\n * The DOM event of that name belongs to form validation and takes a `FormEvent`; this\n * one takes the rejected `File`, and the kit's meaning is the one every caller already\n * writes. Everything else a `<div>` takes reaches the root — which carries\n * `role=\"group\"` named by `dropLabel`, so that is also where an `aria-label` or an\n * `aria-describedby` belongs.\n *\n * Two modes. SINGLE (the default, and all of 0.5): `file` + `onFileSelected`. MULTIPLE\n * (`multiple`): `files` + `onFilesSelected`. They are optional rather than a union so\n * `FileDropzoneProps` stays an interface a caller can extend; a single-mode pick also\n * reaches `onFilesSelected` as a one-element array, so one handler can serve both.\n */\nexport interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onInvalid\"> {\n  /** Single mode: the chosen file, echoed with its size. */\n  file?: File | null;\n  /** Single mode: called with the accepted file. */\n  onFileSelected?: (file: File) => void;\n  /** Take several files per pick or drop. Without it a drop of several keeps the first. */\n  multiple?: boolean;\n  /** Multiple mode: the chosen files, listed in the zone. */\n  files?: readonly File[];\n  /** Every accepted file of one pick, in order. Never called with an empty array. */\n  onFilesSelected?: (files: File[]) => void;\n  /**\n   * Show a remove button inside the zone once something is chosen (kastlan asked for\n   * it: the only way to un-choose a file was to reload). Single mode: removes the file.\n   * Multiple mode: a \"remove all\" button. The host clears its own state here — the\n   * zone is controlled. Focus moves to the Browse button, and the removal is announced.\n   */\n  onClear?: () => void;\n  /** Multiple mode: a remove button per listed file. */\n  onRemove?: (file: File, index: number) => void;\n  accept: string;\n  /**\n   * The caller's check. Optional since 0.6: without it the zone checks `accept` itself\n   * (a drop ignores the dialog's filter). With it, `accept` is NOT re-checked — every\n   * 0.5 caller's `isValid` is its own type check, and doubling it could refuse a file\n   * the caller accepts (a `.zip` the OS labelled `application/octet-stream`).\n   */\n  isValid?: (file: File) => boolean;\n  /** The message for an `isValid` refusal. Defaults to `labels.rejectedInvalid`. */\n  invalidMessage?: string;\n  /** Bytes; larger files are refused. */\n  maxSize?: number;\n  /** Multiple mode: files one pick may add. Pass what is LEFT for a running cap. */\n  maxFiles?: number;\n  /**\n   * Called once per refused file. The 0.5 hook, kept as it was; {@link onReject}\n   * carries the reason and the translated message as well.\n   *\n   * Its existence used to be what switched the toast off, and it still does (see\n   * {@link rejectionFeedback}). The toast is the kit's `toast`, which loads `sonner`\n   * lazily: it is an OPTIONAL peer, and a static import here once broke\n   * `import { Button }` for every app without it (see `optional-peer-imports.test.tsx`).\n   */\n  onInvalid?: (file: File) => void;\n  /** Every refused file of one pick, with its reason and message. */\n  onReject?: (rejections: FileRejection[]) => void;\n  /** The whole pick at once, before any of the above — return `false` to refuse all\n   *  of it (see {@link FilePickHandler}). A refused pick selects nothing; its one\n   *  message (`labels.rejectedPick`) goes where `rejectionFeedback` says. */\n  onPick?: FilePickHandler;\n  /** See {@link FileDropzoneRejectionFeedback}. Defaults to `\"toast\"` when neither\n   *  `onInvalid` nor `onReject` is given, `\"none\"` when one is. */\n  rejectionFeedback?: FileDropzoneRejectionFeedback;\n  /** Per-instance overrides of the `filePicker` label namespace. */\n  labels?: Partial<FilePickerLabels>;\n  /** The dropzone's accessible name. A caller's own `aria-label` wins over it — see\n   *  the root element below. Optional since 0.8, like the three below: each falls back\n   *  to its `filePicker` string from `<UiKitProvider labels>`, then to English. They\n   *  were required, so every call site passed four strings through `t()` by hand, and a\n   *  zone nested in a kit component (the feedback form) had no call site to pass them. */\n  dropLabel?: string;\n  /** Default `filePicker.browse`. */\n  browseLabel?: string;\n  /** What the zone says while nothing is chosen. Default `filePicker.empty` /\n   *  `emptyMultiple`. */\n  emptyLabel?: string;\n  /** The second line, e.g. what may be dropped. Default `filePicker.hint(accept)`. */\n  hint?: string;\n  /**\n   * Not taking files: no drop, no picker, no remove buttons; `aria-disabled` on the\n   * group. keksdose locks its invoice zone while another form holds unsaved changes,\n   * and hand-rolled the whole zone to be able to (invoice-upload.tsx, \"Locked\").\n   */\n  disabled?: boolean;\n  /**\n   * Working on what it was given — an upload, an OCR pass. Inert like `disabled`, plus\n   * `aria-busy`, a spinner in place of the upload icon, and `filePicker.busy` as the\n   * text. The other half of why keksdose's invoice zone was hand-rolled.\n   */\n  busy?: boolean;\n  /**\n   * Why the zone is not taking files — the write lock's sentence, a quota, a closed\n   * period (keksdose K3). Takes no drop, no picker and no removal, like `disabled`, and\n   * SAYS so: the Browse button (and every remove button) stays focusable,\n   * `aria-disabled`, with the reason in the kit Tooltip and its description, the zone's\n   * group is described by it, and the default body shows it where the hint was. Not\n   * dimmed: what is chosen stays readable. Wins over `disabled`'s silent look.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This zone COMMITS — an upload that starts on drop. Under a locked\n   * {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n   * reason (which wins over one of its own). No provider, or an unlocked one: no\n   * effect. A zone that only stages a file for a form saved later is not a commit.\n   */\n  commit?: CommitScope;\n  /**\n   * Replace the zone's body — the icon, the text and the chosen-file list — with your\n   * own, given the zone's state: keksdose's spinner-plus-\"uploading\", its multi-shot\n   * hint (\"several photos are possible\"), a second trigger for the camera.\n   *\n   * The Browse button, the inline error and the live regions stay: Browse is the\n   * keyboard path, and a body that forgot it would leave the zone unreachable without\n   * a pointer. A click on a control inside the body does not also open the picker.\n   */\n  renderBody?: (state: FileDropzoneState) => ReactNode;\n  /** Extra classes for the dropzone's root. */\n  className?: string;\n}\n\n/** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml) and\n * kastlan's document forms. Refusals go to `onReject`/`onInvalid` and to\n * `rejectionFeedback`; the chosen file(s) are echoed with their size, otherwise\n * `emptyLabel` + `hint` describe what to drop. For a trigger with no drop area, see\n * `FileButton`. */\nexport function FileDropzone({\n  file,\n  onFileSelected,\n  multiple,\n  files,\n  onFilesSelected,\n  onClear,\n  onRemove,\n  accept,\n  isValid,\n  invalidMessage,\n  maxSize,\n  maxFiles,\n  onInvalid,\n  onReject,\n  onPick,\n  rejectionFeedback,\n  labels: labelsProp,\n  dropLabel: dropLabelProp,\n  browseLabel: browseLabelProp,\n  emptyLabel: emptyLabelProp,\n  hint: hintProp,\n  disabled,\n  busy,\n  disabledReason: ownDisabledReason,\n  commit,\n  renderBody,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": describedByProp,\n  ...rest\n}: FileDropzoneProps) {\n  const [error, setError] = useState<string | null>(null);\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasReason(disabledReason);\n  // Locked counts as inert for every file path (drop, click, Browse, remove); only the\n  // LOOK and the native `disabled` keep it apart, so its controls stay focusable.\n  const inert = Boolean(disabled || busy) || locked;\n  const reasonId = useId();\n  // State rather than a ref: `open` is handed to `renderBody` during render, and a\n  // function that reads a ref there is exactly what the refs rule cannot prove safe.\n  const [fileInput, setFileInput] = useState<HTMLInputElement | null>(null);\n  const browseRef = useRef<HTMLButtonElement>(null);\n  const errorId = useId();\n  // The size through the kit's `file.size` label (the provider's locale by default).\n  // This was `${n / 1024} KB`: ASCII digits, an English unit, and a binary kilobyte\n  // mislabelled as a decimal one, all in one template literal.\n  const fileText = useKitFileLabels();\n  const labels = useKitLabels(\"filePicker\", DEFAULT_FILE_PICKER_LABELS, labelsProp);\n  // Two regions, two urgencies: a pick or a removal is news, a refusal is a failure.\n  // The echoed file name is only text in the zone, and text changing somewhere on the\n  // page is not announced by itself.\n  const status = useAnnounce();\n  const alert = useAnnounce({ politeness: \"assertive\" });\n  const feedback: FileDropzoneRejectionFeedback =\n    rejectionFeedback ?? (onInvalid || onReject ? \"none\" : \"toast\");\n  const dropLabel = dropLabelProp ?? labels.dropzone;\n  const browseLabel = browseLabelProp ?? labels.browse;\n  const emptyLabel = emptyLabelProp ?? (multiple ? labels.emptyMultiple : labels.empty);\n  const hint = hintProp ?? labels.hint(formatAccept(accept));\n\n  const acceptFiles = (list: ArrayLike<File> | null | undefined) => {\n    if (inert || !list || list.length === 0) return;\n    const all = Array.from(list);\n    const picked = multiple ? all : all.slice(0, 1);\n    const { accepted, rejected } = screenFiles(\n      picked,\n      {\n        accept: isValid ? undefined : accept,\n        maxSize,\n        maxFiles: multiple ? maxFiles : undefined,\n        isValid,\n        invalidMessage,\n      },\n      labels,\n      fileText.size,\n    );\n    const stands = judgePick(onPick, accepted, rejected);\n    if (stands && accepted.length > 0) {\n      setError(null);\n      if (multiple) {\n        onFilesSelected?.(accepted);\n      } else {\n        onFileSelected?.(accepted[0]);\n        onFilesSelected?.(accepted);\n      }\n      status.announce(labels.selected(accepted.length, accepted[0].name));\n    }\n    if (!stands || rejected.length > 0) {\n      for (const r of rejected) onInvalid?.(r.file);\n      if (rejected.length > 0) onReject?.(rejected);\n      const message = stands\n        ? summariseRejections(rejected, labels)\n        : labels.rejectedPick(picked.length);\n      if (feedback === \"toast\") {\n        // The kit's `toast`, which loads sonner (an optional peer) lazily, so an app\n        // that never trips this never has to install it. Nothing downstream depends\n        // on the toast having appeared. The toaster is a live region, so this path\n        // does not announce a second time.\n        toast.error(message);\n      } else {\n        if (feedback === \"inline\") setError(message);\n        alert.announce(message);\n      }\n    }\n  };\n\n  // The remove buttons unmount with the file they removed, and focus would fall to\n  // <body>. Browse is where the next action (pick again) starts.\n  const afterRemoval = (message: string) => {\n    browseRef.current?.focus();\n    status.announce(message);\n  };\n\n  // The enter/leave counter lives in the shared hook: the boolean this was flickered\n  // across every child of the zone in Safari, whose drag events carry no\n  // `relatedTarget` to tell a move onto a child from a real leave.\n  const { dropProps, isOver: dragOver } = useDragTarget<HTMLDivElement>({\n    disabled: inert,\n    onDropFiles: acceptFiles,\n  });\n  const open = () => {\n    if (!inert) fileInput?.click();\n  };\n\n  const chosen: readonly File[] = multiple ? (files ?? []) : file ? [file] : [];\n  const showError = feedback === \"inline\" && error !== null;\n  const describedBy = cn(describedByProp, showError && errorId, locked && reasonId) || undefined;\n  // The controls inside: natively disabled while disabled or busy; locked, they take\n  // the reason instead and stay reachable (Button's `disabledReason` path).\n  const controlDisabled = Boolean(disabled || busy);\n  const controlReason = locked ? disabledReason : undefined;\n  const reasonLine = locked && (\n    <div data-slot=\"file-dropzone-reason\" className=\"text-xs text-[var(--text-muted)]\">\n      {disabledReason}\n    </div>\n  );\n\n  return (\n    <>\n      {/* A named group, NOT a `role=\"button\"`. It was one, with real buttons (Browse,\n          the remove buttons) inside it: nested interactive controls, which ARIA forbids\n          because a button's children are presentational — a screen reader either read\n          the zone as one opaque button or skipped the inner ones, and the zone was an\n          extra Tab stop that did what Browse does. Now the keyboard path is Browse, a\n          real button; the zone keeps its drop target and its click-anywhere for a\n          pointer, which is a convenience on top of Browse rather than the only way in. */}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions -- the click is a pointer shortcut for Browse, see above */}\n      <div\n        // `...rest` first: every handler below is the drop gesture itself.\n        {...rest}\n        {...dropProps}\n        // Pointer only; every control inside stops its own click from reaching here\n        // (and one in a custom body is skipped below). The keyboard equivalent is the\n        // Browse button, so no key handler belongs on a group.\n        onClick={(e) => {\n          if (fromControl(e)) return;\n          open();\n        }}\n        role=\"group\"\n        // The DOM spelling wins over `dropLabel`, which stays the name for every caller\n        // that passes no `aria-label` — i.e. all of them today. Standardising on\n        // `aria-label` (audit §api-design) does not get to silently rename an existing\n        // required prop.\n        aria-label={ariaLabel ?? dropLabel}\n        // No `aria-invalid`: ARIA does not allow it on `role=\"group\"`. The message is\n        // reached through the description instead, and spoken when it appears.\n        aria-describedby={describedBy}\n        data-invalid={showError || undefined}\n        aria-disabled={disabled || locked || undefined}\n        aria-busy={busy || undefined}\n        data-drag-over={dragOver || undefined}\n        className={cn(\n          // `relative` is load-bearing, not cosmetic. The file input below is `sr-only`,\n          // which Tailwind implements as `position: absolute` — so without a positioned\n          // ancestor its containing block is the INITIAL one, and it is laid out at its\n          // own offset from the top of the document. Nothing looks wrong, because the\n          // input is 1x1 and clipped; what breaks is the page height. On a long page\n          // every escaped sr-only element extends `documentElement.scrollHeight` to its\n          // own offset, which produces a second, whole-document scrollbar alongside the\n          // app shell's own — one that scrolls past the end of the content into nothing.\n          // Measured on the showcase: body 900px, document 47,919px.\n          \"relative flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors\",\n          // Three states out of two border tokens: the target rests on the plain\n          // hairline, hover pulls it to `--border-strong`, and a live drag keeps that\n          // border and adds the `--bg-active` wash on top — so \"let go here\" still reads\n          // one step louder than \"you are over it\". A refusal shown inline takes the\n          // danger border until the next good pick.\n          // Inert zones keep the resting hairline and lose the hover pull: a border that\n          // answers the pointer promises a drop the zone will refuse.\n          disabled\n            ? \"cursor-not-allowed border-[var(--border)] opacity-60\"\n            : busy\n              ? \"cursor-progress border-[var(--border)]\"\n              : locked\n                ? \"cursor-not-allowed border-[var(--border)]\"\n                : dragOver\n                ? \"cursor-pointer border-[var(--border-strong)] bg-[var(--bg-active)]\"\n                : showError\n                  ? \"cursor-pointer border-[var(--danger-border-strong)]\"\n                  : \"cursor-pointer border-[var(--border)] hover:border-[var(--border-strong)]\",\n          className,\n        )}\n      >\n        {renderBody ? (\n          renderBody({\n            dragOver,\n            disabled: Boolean(disabled),\n            busy: Boolean(busy),\n            locked,\n            disabledReason: locked ? disabledReason : undefined,\n            files: chosen,\n            error: showError ? error : null,\n            open,\n            labels,\n          })\n        ) : busy ? (\n          <>\n            {/* `label={null}`: the zone is `aria-busy` and the line below says the\n                same in words; a spoken \"Loading\" would only run into it. */}\n            <Spinner label={null} className=\"size-5\" />\n            <div className=\"text-sm text-[var(--text-secondary)]\">{labels.busy}</div>\n          </>\n        ) : (\n          <>\n            <Upload aria-hidden className=\"size-5 text-[var(--text-muted)]\" />\n            {multiple && chosen.length > 0 ? (\n              <>\n                <ul className=\"flex w-full max-w-sm flex-col gap-1 text-start\">\n                  {chosen.map((f, i) => (\n                    <li\n                      // Name + size + position: two files may share a name, and the index\n                      // alone would re-key every row below a removal.\n                      key={`${f.name}-${f.size}-${i}`}\n                      className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)]\"\n                    >\n                      <span className=\"min-w-0 flex-1 truncate font-medium\">{f.name}</span>\n                      <span className=\"shrink-0 text-xs text-[var(--text-muted)]\">{fileText.size(f.size)}</span>\n                      {onRemove && (\n                        <IconButton\n                          type=\"button\"\n                          size=\"sm\"\n                          disabled={controlDisabled}\n                          disabledReason={controlReason}\n                          aria-label={labels.remove(f.name)}\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            onRemove(f, i);\n                            afterRemoval(labels.removed(f.name));\n                          }}\n                        >\n                          <X aria-hidden />\n                        </IconButton>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n                {reasonLine}\n              </>\n            ) : (\n              <>\n                <div className=\"flex items-center gap-1 text-sm text-[var(--text-secondary)]\">\n                  {/* `!multiple`: in multiple mode an empty `files` list is \"nothing chosen\",\n                      whatever a stray `file` prop says — it used to show that file's name. */}\n                  {!multiple && file ? <span className=\"font-medium\">{file.name}</span> : emptyLabel}\n                  {!multiple && file && onClear && (\n                    <IconButton\n                      type=\"button\"\n                      size=\"sm\"\n                      disabled={controlDisabled}\n                      disabledReason={controlReason}\n                      aria-label={labels.remove(file.name)}\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        onClear();\n                        afterRemoval(labels.removed(file.name));\n                      }}\n                    >\n                      <X aria-hidden />\n                    </IconButton>\n                  )}\n                </div>\n                {/* Locked, the reason takes the hint's place: what may be dropped is moot\n                    while nothing may. A chosen file keeps its size, the reason below. */}\n                {locked && !(file && !multiple) ? (\n                  reasonLine\n                ) : (\n                  <div className=\"text-xs text-[var(--text-muted)]\">\n                    {file && !multiple ? fileText.size(file.size) : hint}\n                  </div>\n                )}\n                {locked && file && !multiple && reasonLine}\n              </>\n            )}\n          </>\n        )}\n        <div className=\"flex flex-wrap items-center justify-center gap-2\">\n          <Button\n            ref={browseRef}\n            type=\"button\"\n            variant=\"secondary\"\n            disabled={controlDisabled}\n            disabledReason={controlReason}\n            onClick={(e) => {\n              e.stopPropagation();\n              open();\n            }}\n          >\n            {browseLabel}\n          </Button>\n          {multiple && chosen.length > 0 && onClear && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              disabled={controlDisabled}\n              disabledReason={controlReason}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClear();\n                afterRemoval(labels.cleared);\n              }}\n            >\n              {labels.clearAll}\n            </Button>\n          )}\n        </div>\n        {showError && (\n          <p id={errorId} className=\"text-xs text-[var(--danger)]\">\n            {error}\n          </p>\n        )}\n        {/* The group's description while locked: a copy of its own, so a custom body\n            that does not show the reason still has the zone say it. */}\n        {locked && (\n          <span id={reasonId} hidden>\n            {disabledReason}\n          </span>\n        )}\n        <input\n          ref={setFileInput}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={inert}\n          onChange={(e) => {\n            // Copy, THEN reset: `files` is a live view of the value, and without the\n            // reset picking the same file a second time fires no `change` at all —\n            // the retry after a failed upload silently did nothing (kastlan).\n            const picked = Array.from(e.currentTarget.files ?? []);\n            e.currentTarget.value = \"\";\n            acceptFiles(picked);\n          }}\n          // Clicks are forwarded here programmatically; one reaching the zone's own\n          // handler again would open the dialog a second time.\n          onClick={(e) => e.stopPropagation()}\n          className=\"sr-only\"\n        />\n      </div>\n      {/* Outside the zone, where they have always been (the zone used to be a\n          `role=\"button\"`, whose content is presentational). `sr-only-fixed`, so they\n          need no positioned ancestor. */}\n      <span {...status.regionProps} />\n      <span {...alert.regionProps} />\n    </>\n  );\n}\n\n/** A reason that is really there — `null`, `false` and `\"\"` are no reason. */\nfunction hasReason(reason: ReactNode): boolean {\n  return reason !== undefined && reason !== null && reason !== false && reason !== \"\";\n}\n\n/** A click that landed on a control inside the zone (a custom body's own button, a\n *  link in the hint) is that control's, not a request to open the picker. */\nfunction fromControl(e: MouseEvent<HTMLElement>): boolean {\n  const target = e.target as Element | null;\n  const control = target?.closest?.(\"button, a[href], input, select, textarea, label, [role='button']\");\n  return Boolean(control && control !== e.currentTarget && e.currentTarget.contains(control));\n}\n"],"mappings":"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","names":[]}

package/dist/components/floating-panel.js

@@ -89,7 +89,7 @@ function FloatingActionButton({
         // "on" in both states — and says "on" in the brand family.
         toggle && "border border-[var(--border)]",
         pressed === false && "bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
-        pressed === true && "border-[var(--brand)] bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]",
+        pressed === true && "border-[var(--brand)] bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)] hover:text-brand-muted",
         "outline-none focus-visible:ring-offset-2",
         FOCUS_RING,
         className
@@ -298,9 +298,9 @@ function FloatingActionGroup({
   ] });
 }
 const BADGE_TONE = {
-  warning: "bg-[var(--warning)] text-[var(--text-inverse)]",
-  danger: "bg-[var(--danger)] text-[var(--danger-contrast)]",
-  brand: "bg-[var(--brand)] text-[var(--brand-contrast)]"
+  warning: "bg-warning text-warning-contrast",
+  danger: "bg-danger text-danger-contrast",
+  brand: "bg-brand text-brand-contrast"
 };
 function FloatingAction({
   label,
@@ -331,7 +331,7 @@ function FloatingAction({
     "outline-none focus-visible:ring-inset",
     FOCUS_RING,
     "disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-5",
-    variant === "primary" ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]" : pressed && !isLink && pressedStyle === "tint" ? "bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
+    variant === "primary" ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]" : pressed && !isLink && pressedStyle === "tint" ? "bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)] hover:text-brand-muted" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
     className
   );
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/floating-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/floating-panel.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  AnchorHTMLAttributes,\n  ButtonHTMLAttributes,\n  CSSProperties,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { registerFloating } from \"../lib/floating-stack\";\nimport { useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport { assignRef } from \"./choice-parts\";\nimport { pickLinkRenderer } from \"./text-link\";\nimport { Tooltip, type TooltipSide } from \"./tooltip\";\n\nexport interface FloatingPanelLabels {\n  /** Accessible name of the panel header's X. */\n  close: string;\n  /**\n   * What a {@link FloatingAction}'s count badge adds to its accessible name (\"3 new\"),\n   * read after the label: \"Invoices, 3 new\". The dot itself is hidden from a reader —\n   * a bare \"3\" read out of context says nothing about what is counted.\n   */\n  badge: (count: number) => string;\n}\n\nexport const DEFAULT_FLOATING_PANEL_LABELS: FloatingPanelLabels = {\n  close: \"Close\",\n  badge: (count) => `${count} new`,\n};\n\n/** A LOGICAL corner: `bottom-end` is bottom-right in LTR and bottom-left in RTL. */\nexport type FloatingCorner = \"bottom-end\" | \"bottom-start\";\n\n/**\n * How far off the bottom edge anything floating here sits: clear of `AppShell`'s phone\n * nav (`--app-nav-h`, `0px` above `md` where the nav is not rendered) and of the home\n * indicator, whichever reaches higher — the nav does not pad itself for the inset, so\n * with no nav on screen the inset is all there is to clear. `max`, not a sum: where the\n * nav does cover the inset, adding both would float the button a nav-height too high.\n */\nconst BOTTOM_CLEARANCE = \"max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px))\";\n/** The side gutter, widened for a landscape notch. Both insets, because a logical\n *  side has no one physical inset to name. */\nconst SIDE_GUTTER = \"max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))\";\n\nfunction cornerStyle(corner: FloatingCorner, lift: string): CSSProperties {\n  return {\n    bottom: `calc(${BOTTOM_CLEARANCE} + ${lift})`,\n    // Logical properties, so the corner follows the reading direction with no JS. The\n    // portal carries the `dir` across (see `usePortalDir`).\n    [corner === \"bottom-start\" ? \"insetInlineStart\" : \"insetInlineEnd\"]: SIDE_GUTTER,\n  };\n}\n\n/**\n * The reading direction where the component was RENDERED, for its portalled root: a\n * portal to `<body>` leaves the subtree whose `dir` it inherited, and a logical\n * `inset-inline-end` resolves against the portal's own direction. Read off a hidden\n * inline marker in a layout effect, so the first painted frame already has it.\n */\nfunction usePortalDir(): [Ref<HTMLSpanElement>, Direction | undefined] {\n  const marker = useRef<HTMLSpanElement>(null);\n  const [dir, setDir] = useState<Direction | undefined>(undefined);\n  useLayoutEffect(() => {\n    setDir(dirOf(marker.current));\n  }, []);\n  return [marker, dir];\n}\n\nexport interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n  /** The accessible name — the button shows only its icon. */\n  label: string;\n  icon: ReactNode;\n  /** Default `bottom-end`. */\n  corner?: FloatingCorner;\n  /**\n   * Distance above the nav / home indicator, as a CSS length. Default `1rem`. Raise it\n   * to stack above another floating control in the same corner — keksdose's assistant\n   * clears the transactions page's own action group this way (`calc(1rem + 4rem)`).\n   */\n  offset?: string;\n  /**\n   * Whether the button carries the browser's own tooltip (`title`, the `label` unless a\n   * `title` is passed). Default `true`, so an icon-only button keeps a hover hint for a\n   * mouse user with no other way to learn what it is. `false` renders no `title` at all:\n   * keksdose has ONE tooltip, the kit's `Tooltip` (dev#523), and its source scan fails a\n   * native `title=` anywhere — so a flag, not `title=\"\"`, which the scan would still\n   * see. An empty `title` renders no attribute either, for the caller who has no scan.\n   *\n   * Not flipped to off by default: a FAB wrapped in nothing would lose the only hover\n   * hint it has, silently, in every app already on it. And the kit cannot wrap itself\n   * in its `Tooltip` — the bubble's anchor is a `relative inline-flex` span, and the\n   * button is `fixed` and portalled — so the one-tooltip caller wraps it.\n   */\n  nativeTitle?: boolean;\n  /**\n   * Make it a toggle. `true`/`false` set `aria-pressed` and swap the solid brand disc for\n   * a surface disc — the glyph in brand on the quiet brand fill when on, the secondary\n   * text colour when off — the \"on\" look of `IconButton`'s `pressed` and of a selected\n   * Chip. Left out, it is the ordinary action FAB. For keksdose's corner filter toggles\n   * (feedback-page's \"awaiting only\", the /transactions pending and upcoming toggles),\n   * which paint `text-[var(--brand)]` on a surface button by hand. Keep `label` the same\n   * in both states; `aria-pressed` already says which one it is in.\n   */\n  pressed?: boolean;\n  /**\n   * Show `label` beside the icon: the EXTENDED FAB, a pill rather than a disc. For a\n   * corner control whose words are the point — kastlan's offline indicator\n   * (shared/offline/offline-indicator.tsx:39) is a pill saying \"Offline — 2 photo(s)\n   * queued\" / \"Syncing…\", hand-placed at `fixed bottom-4 left-4`, i.e. over the\n   * bottom nav and on the wrong side in RTL. Same height as the disc (3rem), so a\n   * {@link FloatingPanel} card above it still clears it.\n   */\n  extended?: boolean;\n  /**\n   * Announce `label` whenever it changes, through a polite `role=\"status\"` region — for\n   * an extended FAB that REPORTS something (kastlan's offline/sync state), where a\n   * sighted user sees the words change and a screen reader user otherwise hears\n   * nothing until they happen to land on the button.\n   *\n   * ⚠️ A live region announces changes, not its own arrival: a FAB that mounts already\n   * saying \"Offline\" says it to nobody. Keep it mounted and pass `hidden` while there\n   * is nothing to report (kastlan returns `null` when online and idle); the region\n   * stays in the page, and the first real status is heard.\n   */\n  live?: boolean;\n  /**\n   * `primary` (default): the solid brand disc of a page's main action. `surface`: the\n   * page's surface with a hairline border — for a FAB that is a status rather than a\n   * call to action, as kastlan's offline pill is (a brand pill would shout \"press me\"\n   * at a user who is merely offline). Ignored while `pressed` is set; a toggle has its\n   * own two looks.\n   */\n  variant?: \"primary\" | \"surface\";\n  /**\n   * Hover and focus label in the kit {@link Tooltip}, instead of the native `title` —\n   * keksdose has ONE tooltip (dev#523) and wrapped its assistant launcher by hand,\n   * which cannot work: the tooltip's anchor is a `relative inline-flex` span, and this\n   * button is `fixed` and portalled. With `tooltip` the FAB positions a fixed wrapper\n   * instead and the button sits in the tooltip inside it. `true` shows the `label`;\n   * any other content shows that. Implies no native `title` (whatever `nativeTitle`\n   * says): one hover hint, not two. `style` stays on the button; the corner and\n   * `offset` move to the wrapper.\n   */\n  tooltip?: ReactNode;\n  /** Where the {@link tooltip} opens. Default `top`; the bubble is portalled and kept on\n   *  screen, so a corner button's label is not pushed off the edge. */\n  tooltipSide?: TooltipSide;\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * A round, icon-only button pinned to a corner of the viewport — the trigger of a\n * {@link FloatingPanel}, and usable alone for a page's one primary action.\n *\n * keksdose hand-placed each of its floating controls: the assistant launcher at\n * `fixed bottom-36 right-4 md:bottom-6`, the feedback page's and the transactions\n * page's action groups at `right-4 bottom-20`. Every one of those numbers is a guess\n * at the phone nav's height plus whatever else floats there (Keksdose live #314 found\n * out what such a guess is worth for a footer), `right` rather than `end` puts it over\n * the page's leading edge in RTL, and none allows for the home indicator. Here the\n * base is `--app-nav-h` and the safe-area inset, the corner is logical, and\n * {@link FloatingActionButtonProps.offset} is the one number left to the caller — the\n * height of whatever else it has to clear, not the nav's.\n *\n * Portalled, because `position: fixed` inside any transformed ancestor (an animated\n * page transition) is fixed to that ancestor, not to the screen.\n *\n * While mounted it reports its box (`lib/floating-stack.ts`), so `ServerWakeNotice`\n * stacks above it rather than over it.\n */\nexport function FloatingActionButton({\n  label,\n  icon,\n  corner = \"bottom-end\",\n  offset = \"1rem\",\n  nativeTitle = true,\n  pressed,\n  extended = false,\n  live = false,\n  variant = \"primary\",\n  tooltip,\n  tooltipSide = \"top\",\n  className,\n  style,\n  type = \"button\",\n  title,\n  ref,\n  ...rest\n}: FloatingActionButtonProps) {\n  const [marker, dir] = usePortalDir();\n  const toggle = pressed !== undefined;\n  const tip = tooltip === true ? label : tooltip === false || tooltip === \"\" ? undefined : tooltip;\n  const wrapped = tip !== undefined && tip !== null;\n  // The fixed element — the button, or the wrapper when there is a tooltip.\n  const [fixed, setFixed] = useState<HTMLElement | null>(null);\n  useEffect(() => (fixed ? registerFloating(fixed) : undefined), [fixed]);\n  const buttonRef = useCallback(\n    (node: HTMLButtonElement | null) => {\n      assignRef(ref, node);\n      if (!wrapped) setFixed(node);\n    },\n    [ref, wrapped],\n  );\n  // An empty title is \"no tooltip\", not an attribute with nothing in it. The kit\n  // tooltip replaces it outright.\n  const nativeTip = !wrapped && nativeTitle && title !== \"\" ? (title ?? label) : undefined;\n  const button = (\n          <button\n            {...rest}\n            ref={buttonRef}\n            type={type}\n            dir={dir}\n            aria-label={label}\n            aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n            title={nativeTip}\n            style={wrapped ? style : { ...cornerStyle(corner, offset), ...style }}\n            className={cn(\n              // Wrapped, the wrapper is the fixed thing and the button sits in it.\n              !wrapped && \"fixed z-40\",\n              \"inline-flex items-center justify-center rounded-full\",\n              extended ? \"h-12 gap-2 px-4 text-sm font-medium [&_svg]:size-5\" : \"size-12 [&_svg]:size-6\",\n              \"shadow-lg transition-colors disabled:cursor-default\",\n              !toggle &&\n                variant === \"primary\" &&\n                \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\",\n              !toggle &&\n                variant === \"surface\" &&\n                \"border border-[var(--border)] bg-[var(--bg-surface)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)] disabled:hover:bg-[var(--bg-surface)]\",\n              // A toggle sits on the page's surface — a solid brand disc would read as\n              // \"on\" in both states — and says \"on\" in the brand family.\n              toggle && \"border border-[var(--border)]\",\n              pressed === false &&\n                \"bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]\",\n              pressed === true &&\n                \"border-[var(--brand)] bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]\",\n              \"outline-none focus-visible:ring-offset-2\",\n              FOCUS_RING,\n              className,\n            )}\n          >\n            {icon}\n            {/* Visible words, not the name: `aria-label` already is the name, and the\n                span would only repeat it. */}\n            {extended && (\n              <span aria-hidden className=\"whitespace-nowrap\">\n                {label}\n              </span>\n            )}\n          </button>\n  );\n  return (\n    <>\n      <span ref={marker} hidden />\n      {typeof document !== \"undefined\" &&\n        createPortal(\n          <>\n            {wrapped ? (\n              <div\n                ref={setFixed}\n                dir={dir}\n                hidden={rest.hidden}\n                style={cornerStyle(corner, offset)}\n                className=\"fixed z-40 inline-flex\"\n              >\n                <Tooltip label={tip} side={tooltipSide} portal>\n                  {/* A fragment when the bubble says the name again, so the tooltip\n                      does not describe the button with its own label — a reader would\n                      hear it twice. Other text is a real description. */}\n                  {tip === label ? <>{button}</> : button}\n                </Tooltip>\n              </div>\n            ) : (\n              button\n            )}\n            {live && (\n              <span role=\"status\" className=\"sr-only\">\n                {label}\n              </span>\n            )}\n          </>,\n          document.body,\n        )}\n    </>\n  );\n}\n\nexport interface FloatingPanelProps {\n  /** The panel's heading, and its accessible name. */\n  title: ReactNode;\n  /** The trigger's accessible name (\"Assistant\", \"Send feedback\"). */\n  fabLabel: string;\n  fabIcon: ReactNode;\n  /** Controlled open state. Leave it out to let the panel own it. */\n  open?: boolean;\n  /** Uncontrolled initial state. Default closed. */\n  defaultOpen?: boolean;\n  /** Every request to open or close — the FAB, the X, Escape. */\n  onOpenChange?: (open: boolean) => void;\n  /** Default `bottom-end`. */\n  corner?: FloatingCorner;\n  /** The FAB's distance above the nav — see {@link FloatingActionButtonProps.offset}.\n   *  From `md` up the card sits above the FAB, so it moves with it. */\n  offset?: string;\n  /** The FAB's native `title` — see {@link FloatingActionButtonProps.nativeTitle}.\n   *  `false` for keksdose's assistant launcher, under its one-tooltip rule (dev#523). */\n  fabNativeTitle?: boolean;\n  /** The FAB's kit tooltip — see {@link FloatingActionButtonProps.tooltip}. `true` for\n   *  keksdose's assistant launcher, which wanted the kit bubble and had no way to\n   *  put one on a fixed, portalled button (dev#523). */\n  fabTooltip?: ReactNode;\n  /** Default: `floatingPanel.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /**\n   * Where focus goes on open. Default the panel itself, so a phone's keyboard does not\n   * rise over the sheet before the user has asked to type; pass the chat field for a\n   * panel whose one job is typing.\n   */\n  initialFocus?: () => HTMLElement | null;\n  /** Extra classes for the panel. */\n  className?: string;\n  /** Extra classes for the scrolling body. */\n  bodyClassName?: string;\n  children: ReactNode;\n}\n\n/**\n * A docked, NON-MODAL panel in a corner of the screen, opened by a\n * {@link FloatingActionButton} — keksdose's assistant launcher and its feedback page,\n * which each built one.\n *\n * ## Not a Modal\n *\n * The page stays usable while it is open: that is the point of an assistant beside the\n * data it is asked about. So there is no backdrop, no scroll lock, no `aria-modal` and\n * no focus trap — Tab walks out of the panel into the page and back, and a click on the\n * page does not close it. It is `role=\"dialog\"` without `aria-modal`, which is what\n * ARIA calls a non-modal dialog, named by its heading.\n *\n * What it keeps from a dialog is the focus HANDOFF: opening moves focus into it (a\n * keyboard user who pressed the FAB should not have to hunt for what appeared), and\n * closing gives it back to the FAB — but only when focus was in the panel, so a panel\n * closed from the page (a controlled owner) never pulls focus out of the field the\n * user is typing in. Escape closes it while focus is inside, and only then: on the\n * panel element, not the document, so Escape in the page keeps meaning whatever the\n * page means by it.\n *\n * ## Layout\n *\n * From `md` up, a card above the FAB in its corner. Below `md`, a full-width sheet\n * docked to the bottom, sitting ON the `AppShell` bottom nav (`--app-nav-h`) and\n * clear of the home indicator. Pure CSS — no width is measured in JavaScript.\n *\n * The FAB carries `aria-expanded` and, while the panel exists, `aria-controls`. The\n * panel unmounts when closed; an app that must keep a draft across a close keeps it in\n * its own state, where it also survives a reload.\n */\nexport function FloatingPanel({\n  title,\n  fabLabel,\n  fabIcon,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  corner = \"bottom-end\",\n  offset = \"1rem\",\n  fabNativeTitle,\n  fabTooltip,\n  closeLabel,\n  initialFocus,\n  className,\n  bodyClassName,\n  children,\n}: FloatingPanelProps) {\n  const labels = useKitLabels(\n    \"floatingPanel\",\n    DEFAULT_FLOATING_PANEL_LABELS,\n    closeLabel === undefined ? undefined : { close: closeLabel },\n  );\n  const [ownOpen, setOwnOpen] = useState(defaultOpen);\n  const open = openProp ?? ownOpen;\n  const setOpen = (next: boolean) => {\n    if (openProp === undefined) setOwnOpen(next);\n    onOpenChange?.(next);\n  };\n\n  const uid = useId();\n  const panelId = `${uid}-panel`;\n  const titleId = `${uid}-title`;\n  const fabRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [marker, dir] = usePortalDir();\n\n  const initialFocusRef = useRef(initialFocus);\n  useEffect(() => {\n    initialFocusRef.current = initialFocus;\n  });\n\n  // Focus follows the open/closed TRANSITION, never the mount: a panel that renders\n  // open (`defaultOpen`, a restored route) does not take the page's focus by existing.\n  const wasOpen = useRef(open);\n  // Whether focus was inside the panel when it last changed — read at close time, when\n  // the panel (and whatever had focus in it) is already gone.\n  const focusInside = useRef(false);\n  useEffect(() => {\n    const changed = wasOpen.current !== open;\n    wasOpen.current = open;\n    if (!changed) return;\n    if (open) {\n      (initialFocusRef.current?.() ?? panelRef.current)?.focus();\n      return;\n    }\n    const active = document.activeElement;\n    const lost = active === null || active === document.body;\n    if (focusInside.current || lost) fabRef.current?.focus();\n    focusInside.current = false;\n  }, [open]);\n\n  const onPanelKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\" || e.defaultPrevented) return;\n    // Stopped here, so an overlay underneath with a document-level Escape listener does\n    // not close too — the innermost thing that has focus is the one that closes.\n    e.stopPropagation();\n    focusInside.current = true;\n    setOpen(false);\n  };\n\n  return (\n    <>\n      <span ref={marker} hidden />\n      <FloatingActionButton\n        ref={fabRef}\n        label={fabLabel}\n        icon={fabIcon}\n        corner={corner}\n        offset={offset}\n        nativeTitle={fabNativeTitle}\n        tooltip={fabTooltip}\n        aria-expanded={open}\n        aria-controls={open ? panelId : undefined}\n        onClick={() => {\n          // A press ON the FAB closing the panel: the FAB keeps focus by being clicked,\n          // nothing to hand back.\n          focusInside.current = false;\n          setOpen(!open);\n        }}\n      />\n      {open &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          // A container for Escape bubbling up from anything inside it, as a dialog is.\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n          <div\n            ref={panelRef}\n            id={panelId}\n            role=\"dialog\"\n            aria-labelledby={titleId}\n            tabIndex={-1}\n            dir={dir}\n            data-corner={corner}\n            onKeyDown={onPanelKeyDown}\n            onFocus={() => {\n              focusInside.current = true;\n            }}\n            onBlur={(e) => {\n              if (!e.currentTarget.contains(e.relatedTarget as Node | null)) focusInside.current = false;\n            }}\n            // The phone's sheet sits on the nav; from `md` up the card floats above the\n            // FAB (its offset + the 3rem button + a 0.75rem gap).\n            style={\n              {\n                \"--fp-bottom\": `calc(${BOTTOM_CLEARANCE})`,\n                \"--fp-bottom-md\": `calc(${BOTTOM_CLEARANCE} + ${offset} + 3.75rem)`,\n                \"--fp-side\": SIDE_GUTTER,\n              } as CSSProperties\n            }\n            className={cn(\n              \"animate-sheet fixed z-40 flex flex-col overflow-hidden outline-none\",\n              \"border border-[var(--border)] bg-[var(--bg-surface)] shadow-2xl\",\n              // Phone: full width, docked, rounded only where it meets the page.\n              \"inset-x-0 bottom-[var(--fp-bottom)] max-h-[min(85dvh,calc(100dvh_-_var(--fp-bottom)_-_1rem))] rounded-t-xl border-x-0 border-b-0\",\n              \"pb-[env(safe-area-inset-bottom,0px)] md:pb-0\",\n              // md+: a card in the corner, above the FAB.\n              \"md:inset-x-auto md:bottom-[var(--fp-bottom-md)] md:w-[24rem] md:max-h-[min(36rem,calc(100dvh_-_var(--fp-bottom-md)_-_1rem))] md:rounded-xl md:border\",\n              corner === \"bottom-start\" ? \"md:start-[var(--fp-side)]\" : \"md:end-[var(--fp-side)]\",\n              className,\n            )}\n          >\n            <div className=\"flex shrink-0 items-center justify-between gap-2 border-b border-[var(--border)] px-4 py-3\">\n              <h2 id={titleId} className=\"min-w-0 truncate text-base font-semibold text-[var(--text-primary)]\">\n                {title}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  focusInside.current = true;\n                  setOpen(false);\n                }}\n                aria-label={labels.close}\n                className={cn(\"-me-1.5 shrink-0 rounded p-1.5 text-[var(--text-muted)] outline-none hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\", FOCUS_RING)}\n              >\n                <X aria-hidden className=\"size-5\" />\n              </button>\n            </div>\n            <div className={cn(\"min-h-0 flex-1 overflow-y-auto overscroll-contain p-4\", bodyClassName)}>\n              {children}\n            </div>\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n\nexport interface FloatingActionGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, \"role\"> {\n  /** Name the group (\"Register actions\"); a reader then introduces the members as one\n   *  set. A group with no name is one more unlabelled wrapper. */\n  \"aria-label\"?: string;\n  /** Default `bottom-end`. */\n  corner?: FloatingCorner;\n  /** Distance above the nav / home indicator — see {@link FloatingActionButtonProps.offset}. */\n  offset?: string;\n  /** {@link FloatingAction}s, in reading order. */\n  children: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A floating pill of {@link FloatingAction}s — one to four `size-12` toggles, actions\n * or links with hairline dividers — pinned to a corner exactly as the\n * {@link FloatingActionButton} is: `--app-nav-h` and the home indicator cleared, a\n * logical corner, portalled.\n *\n * keksdose built it twice by hand: the /transactions phone toolbar\n * (transactions-page.tsx:644 — upcoming and pending toggles, an invoices link with a\n * pending count, and the brand \"+\") and the feedback page's \"awaiting only\" toggle\n * (feedback-page.tsx:854, one button in the group anyway, so the two pages look\n * alike). Both at `right-4 bottom-20` — `right`, not `end`, so over the page's leading\n * edge in RTL — with `divide-x`, slate hovers, and each member's `Tooltip` spelled out.\n *\n * `role=\"group\"`, NOT a toolbar: every member keeps its own tab stop, as the\n * hand-built ones did, and there is no arrow-key roving to learn. Hide it where it\n * does not belong with a class (`md:hidden`, as both keksdose pages do).\n */\nexport function FloatingActionGroup({\n  corner = \"bottom-end\",\n  offset = \"1rem\",\n  className,\n  style,\n  children,\n  ...rest\n}: FloatingActionGroupProps) {\n  const [marker, dir] = usePortalDir();\n  return (\n    <>\n      <span ref={marker} hidden />\n      {typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            {...rest}\n            role=\"group\"\n            dir={dir}\n            data-corner={corner}\n            style={{ ...cornerStyle(corner, offset), ...style }}\n            className={cn(\n              \"fixed z-40 inline-flex flex-row overflow-hidden rounded-2xl\",\n              \"border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n              // Dividers on the logical start edge of every member but the first, so\n              // they sit between the same two members in RTL. The member is the\n              // tooltip's wrapper span, which is the direct child.\n              \"[&>*:not(:first-child)]:border-s [&>*]:border-[var(--border)]\",\n              className,\n            )}\n          >\n            {children}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n\n/** What {@link FloatingActionProps.renderLink} is handed. Spread it onto your router's\n *  link, mapping `href` — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface FloatingActionLinkProps {\n  href: string;\n  /** The member's whole look — keep it. */\n  className: string;\n  children: ReactNode;\n  \"aria-label\": string;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface FloatingActionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\" | \"onClick\"> {\n  /** The accessible name, and the tooltip's text. Keep it the same in both states of a\n   *  toggle; `aria-pressed` says which one it is in. */\n  label: string;\n  icon: ReactNode;\n  /** Make it a toggle: `aria-pressed` and the brand \"on\" look (the brand glyph on the\n   *  quiet brand fill), as {@link FloatingActionButtonProps.pressed}. Ignored on a link.\n   *  For the state without the tint, see {@link pressedStyle}. */\n  pressed?: boolean;\n  /**\n   * How `pressed` looks. `tint` (default): the brand \"on\" look. `plain`: the member\n   * keeps its quiet look in both states and only `aria-pressed` changes — for a toggle\n   * whose icon already says which state it is in (keksdose's /transactions \"Upcoming\"\n   * swaps two icons; a tint on top said it twice). The same as passing `aria-pressed`\n   * without `pressed`, which also rides through untinted.\n   */\n  pressedStyle?: \"tint\" | \"plain\";\n  /**\n   * `primary`: the brand-filled member, for the group's main action (the /transactions\n   * \"+\"). Default: the quiet one.\n   */\n  variant?: \"default\" | \"primary\";\n  /**\n   * A count in a dot at the member's top end corner — the /transactions invoices link's\n   * pending count. Nothing is drawn for `0` or less; above 99 it reads `99+`. The count\n   * joins the accessible name through `floatingPanel.badge` (\"Invoices, 3 new\"), or\n   * `badgeLabel` when passed.\n   */\n  badge?: number;\n  /** The badge's words for a reader, replacing `floatingPanel.badge` — \"3 to review\". */\n  badgeLabel?: string;\n  /** The dot's colour. Default `warning`, the pending count's. */\n  badgeTone?: \"warning\" | \"danger\" | \"brand\";\n  /** Show `label` in the kit {@link Tooltip} on hover and focus. Default `true`: the\n   *  members are icon-only and this is their only visible label. */\n  tooltip?: boolean;\n  /** Where the tooltip opens. Default `top` — the group sits at the bottom of the screen. */\n  tooltipSide?: TooltipSide;\n  /** Make it a link — the /transactions invoices member. Drawn by `renderLink`, else\n   *  the `<UiKitProvider linkComponent>` (an in-app `href`), else a plain `<a>`. */\n  href?: string;\n  /** Render the link through your router's `Link` — see {@link FloatingActionLinkProps}. */\n  renderLink?: (props: FloatingActionLinkProps) => ReactElement;\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nconst BADGE_TONE: Record<NonNullable<FloatingActionProps[\"badgeTone\"]>, string> = {\n  warning: \"bg-[var(--warning)] text-[var(--text-inverse)]\",\n  danger: \"bg-[var(--danger)] text-[var(--danger-contrast)]\",\n  brand: \"bg-[var(--brand)] text-[var(--brand-contrast)]\",\n};\n\n/**\n * One member of a {@link FloatingActionGroup}: a `size-12` icon button, toggle or link\n * with its label in a styled tooltip — what each keksdose member wrapped by hand in\n * `<Tooltip portal>`. The tooltip is portalled because the group clips (`overflow-hidden`\n * keeps the brand member's fill inside the pill's corners), and the focus ring is inset\n * for the same reason.\n */\nexport function FloatingAction({\n  label,\n  icon,\n  pressed,\n  pressedStyle = \"tint\",\n  variant = \"default\",\n  badge,\n  badgeLabel,\n  badgeTone = \"warning\",\n  tooltip = true,\n  tooltipSide = \"top\",\n  href,\n  renderLink,\n  className,\n  type = \"button\",\n  onClick,\n  ref,\n  ...rest\n}: FloatingActionProps) {\n  const labels = useKitLabels(\"floatingPanel\", DEFAULT_FLOATING_PANEL_LABELS);\n  const kitLink = useKitLink();\n  const counted = badge !== undefined && badge > 0;\n  const name = counted ? `${label}, ${badgeLabel ?? labels.badge(badge)}` : label;\n  const isLink = href !== undefined;\n  const look = cn(\n    \"relative flex size-12 items-center justify-center transition-colors\",\n    \"outline-none focus-visible:ring-inset\",\n    FOCUS_RING,\n    \"disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-5\",\n    variant === \"primary\"\n      ? \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\"\n      : pressed && !isLink && pressedStyle === \"tint\"\n        ? \"bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]\"\n        : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]\",\n    className,\n  );\n  const body = (\n    <>\n      {icon}\n      {counted && (\n        <span\n          aria-hidden\n          data-badge=\"\"\n          className={cn(\n            \"pointer-events-none absolute end-1 top-1 h-4 min-w-4 rounded-full px-1 text-center text-micro leading-4 font-semibold\",\n            BADGE_TONE[badgeTone],\n          )}\n        >\n          {badge > 99 ? \"99+\" : badge}\n        </span>\n      )}\n    </>\n  );\n\n  let member: ReactElement;\n  if (isLink) {\n    // The button-only attributes stay behind; `aria-*`, `data-*` and the like ride along.\n    const { disabled: _disabled, form: _form, value: _value, name: _name, ...anchorRest } = rest;\n    const linkProps: FloatingActionLinkProps = {\n      ...(anchorRest as AnchorHTMLAttributes<HTMLAnchorElement>),\n      href,\n      \"aria-label\": name,\n      onClick,\n      className: look,\n      children: body,\n    };\n    const { children: content, ...anchor } = linkProps;\n    const render = pickLinkRenderer(renderLink, kitLink, href);\n    member = render ? (\n      <RenderedFloatingLink render={render} {...linkProps} />\n    ) : (\n      <a {...anchor}>{content}</a>\n    );\n  } else {\n    member = (\n      <button\n        {...rest}\n        ref={ref}\n        type={type}\n        aria-label={name}\n        aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n        onClick={onClick}\n        className={look}\n      >\n        {body}\n      </button>\n    );\n  }\n  if (!tooltip) return member;\n  return (\n    // A fragment: the bubble says the member's name, and a description that repeats\n    // the name is read twice.\n    <Tooltip label={label} side={tooltipSide} portal>\n      <>{member}</>\n    </Tooltip>\n  );\n}\n\n/** Calls `renderLink` as a component, so its hooks belong to the link, not to us. */\nfunction RenderedFloatingLink({\n  render,\n  ...props\n}: FloatingActionLinkProps & { render: (props: FloatingActionLinkProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":";AA0NU,SA6DyB,UAxBrB,KArCJ;AA1NV,SAAS,aAAa,WAAW,OAAO,iBAAiB,QAAQ,gBAAgB;AACjF,SAAS,oBAAoB;AAY7B,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,aAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,cAAc,kBAAkB;AACzC,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB;AACjC,SAAS,eAAiC;AAanC,MAAM,gCAAqD;AAAA,EAChE,OAAO;AAAA,EACP,OAAO,CAAC,UAAU,GAAG,KAAK;AAC5B;AAYA,MAAM,mBAAmB;AAGzB,MAAM,cAAc;AAEpB,SAAS,YAAY,QAAwB,MAA6B;AACxE,SAAO;AAAA,IACL,QAAQ,QAAQ,gBAAgB,MAAM,IAAI;AAAA;AAAA;AAAA,IAG1C,CAAC,WAAW,iBAAiB,qBAAqB,gBAAgB,GAAG;AAAA,EACvE;AACF;AAQA,SAAS,eAA8D;AACrE,QAAM,SAAS,OAAwB,IAAI;AAC3C,QAAM,CAAC,KAAK,MAAM,IAAI,SAAgC,MAAS;AAC/D,kBAAgB,MAAM;AACpB,WAAO,MAAM,OAAO,OAAO,CAAC;AAAA,EAC9B,GAAG,CAAC,CAAC;AACL,SAAO,CAAC,QAAQ,GAAG;AACrB;AAwGO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,SAAS;AAAA,EACT,cAAc;AAAA,EACd;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA8B;AAC5B,QAAM,CAAC,QAAQ,GAAG,IAAI,aAAa;AACnC,QAAM,SAAS,YAAY;AAC3B,QAAM,MAAM,YAAY,OAAO,QAAQ,YAAY,SAAS,YAAY,KAAK,SAAY;AACzF,QAAM,UAAU,QAAQ,UAAa,QAAQ;AAE7C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA6B,IAAI;AAC3D,YAAU,MAAO,QAAQ,iBAAiB,KAAK,IAAI,QAAY,CAAC,KAAK,CAAC;AACtE,QAAM,YAAY;AAAA,IAChB,CAAC,SAAmC;AAClC,gBAAU,KAAK,IAAI;AACnB,UAAI,CAAC,QAAS,UAAS,IAAI;AAAA,IAC7B;AAAA,IACA,CAAC,KAAK,OAAO;AAAA,EACf;AAGA,QAAM,YAAY,CAAC,WAAW,eAAe,UAAU,KAAM,SAAS,QAAS;AAC/E,QAAM,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MACZ,gBAAc,WAAW,KAAK,cAAc;AAAA,MAC5C,OAAO;AAAA,MACP,OAAO,UAAU,QAAQ,EAAE,GAAG,YAAY,QAAQ,MAAM,GAAG,GAAG,MAAM;AAAA,MACpE,WAAW;AAAA;AAAA,QAET,CAAC,WAAW;AAAA,QACZ;AAAA,QACA,WAAW,uDAAuD;AAAA,QAClE;AAAA,QACA,CAAC,UACC,YAAY,aACZ;AAAA,QACF,CAAC,UACC,YAAY,aACZ;AAAA;AAAA;AAAA,QAGF,UAAU;AAAA,QACV,YAAY,SACV;AAAA,QACF,YAAY,QACV;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,QAGA,YACC,oBAAC,UAAK,eAAW,MAAC,WAAU,qBACzB,iBACH;AAAA;AAAA;AAAA,EAEJ;AAER,SACE,iCACE;AAAA,wBAAC,UAAK,KAAK,QAAQ,QAAM,MAAC;AAAA,IACzB,OAAO,aAAa,eACnB;AAAA,MACE,iCACG;AAAA,kBACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,QAAQ,KAAK;AAAA,YACb,OAAO,YAAY,QAAQ,MAAM;AAAA,YACjC,WAAU;AAAA,YAEV,8BAAC,WAAQ,OAAO,KAAK,MAAM,aAAa,QAAM,MAI3C,kBAAQ,QAAQ,gCAAG,kBAAO,IAAM,QACnC;AAAA;AAAA,QACF,IAEA;AAAA,QAED,QACC,oBAAC,UAAK,MAAK,UAAS,WAAU,WAC3B,iBACH;AAAA,SAEJ;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;AAwEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,IACA,eAAe,SAAY,SAAY,EAAE,OAAO,WAAW;AAAA,EAC7D;AACA,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,WAAW;AAClD,QAAM,OAAO,YAAY;AACzB,QAAM,UAAU,CAAC,SAAkB;AACjC,QAAI,aAAa,OAAW,YAAW,IAAI;AAC3C,mBAAe,IAAI;AAAA,EACrB;AAEA,QAAM,MAAM,MAAM;AAClB,QAAM,UAAU,GAAG,GAAG;AACtB,QAAM,UAAU,GAAG,GAAG;AACtB,QAAM,SAAS,OAA0B,IAAI;AAC7C,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,QAAQ,GAAG,IAAI,aAAa;AAEnC,QAAM,kBAAkB,OAAO,YAAY;AAC3C,YAAU,MAAM;AACd,oBAAgB,UAAU;AAAA,EAC5B,CAAC;AAID,QAAM,UAAU,OAAO,IAAI;AAG3B,QAAM,cAAc,OAAO,KAAK;AAChC,YAAU,MAAM;AACd,UAAM,UAAU,QAAQ,YAAY;AACpC,YAAQ,UAAU;AAClB,QAAI,CAAC,QAAS;AACd,QAAI,MAAM;AACR,OAAC,gBAAgB,UAAU,KAAK,SAAS,UAAU,MAAM;AACzD;AAAA,IACF;AACA,UAAM,SAAS,SAAS;AACxB,UAAM,OAAO,WAAW,QAAQ,WAAW,SAAS;AACpD,QAAI,YAAY,WAAW,KAAM,QAAO,SAAS,MAAM;AACvD,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,iBAAiB,CAAC,MAAqC;AAC3D,QAAI,EAAE,QAAQ,YAAY,EAAE,iBAAkB;AAG9C,MAAE,gBAAgB;AAClB,gBAAY,UAAU;AACtB,YAAQ,KAAK;AAAA,EACf;AAEA,SACE,iCACE;AAAA,wBAAC,UAAK,KAAK,QAAQ,QAAM,MAAC;AAAA,IAC1B;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,aAAa;AAAA,QACb,SAAS;AAAA,QACT,iBAAe;AAAA,QACf,iBAAe,OAAO,UAAU;AAAA,QAChC,SAAS,MAAM;AAGb,sBAAY,UAAU;AACtB,kBAAQ,CAAC,IAAI;AAAA,QACf;AAAA;AAAA,IACF;AAAA,IACC,QACC,OAAO,aAAa,eACpB;AAAA;AAAA;AAAA,MAGE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,MAAK;AAAA,UACL,mBAAiB;AAAA,UACjB,UAAU;AAAA,UACV;AAAA,UACA,eAAa;AAAA,UACb,WAAW;AAAA,UACX,SAAS,MAAM;AACb,wBAAY,UAAU;AAAA,UACxB;AAAA,UACA,QAAQ,CAAC,MAAM;AACb,gBAAI,CAAC,EAAE,cAAc,SAAS,EAAE,aAA4B,EAAG,aAAY,UAAU;AAAA,UACvF;AAAA,UAGA,OACE;AAAA,YACE,eAAe,QAAQ,gBAAgB;AAAA,YACvC,kBAAkB,QAAQ,gBAAgB,MAAM,MAAM;AAAA,YACtD,aAAa;AAAA,UACf;AAAA,UAEF,WAAW;AAAA,YACT;AAAA,YACA;AAAA;AAAA,YAEA;AAAA,YACA;AAAA;AAAA,YAEA;AAAA,YACA,WAAW,iBAAiB,8BAA8B;AAAA,YAC1D;AAAA,UACF;AAAA,UAEA;AAAA,iCAAC,SAAI,WAAU,8FACb;AAAA,kCAAC,QAAG,IAAI,SAAS,WAAU,uEACxB,iBACH;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS,MAAM;AACb,gCAAY,UAAU;AACtB,4BAAQ,KAAK;AAAA,kBACf;AAAA,kBACA,cAAY,OAAO;AAAA,kBACnB,WAAW,GAAG,sIAAsI,UAAU;AAAA,kBAE9J,8BAAC,KAAE,eAAW,MAAC,WAAU,UAAS;AAAA;AAAA,cACpC;AAAA,eACF;AAAA,YACA,oBAAC,SAAI,WAAW,GAAG,yDAAyD,aAAa,GACtF,UACH;AAAA;AAAA;AAAA,MACF;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;AAgCO,SAAS,oBAAoB;AAAA,EAClC,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,QAAM,CAAC,QAAQ,GAAG,IAAI,aAAa;AACnC,SACE,iCACE;AAAA,wBAAC,UAAK,KAAK,QAAQ,QAAM,MAAC;AAAA,IACzB,OAAO,aAAa,eACnB;AAAA,MACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,MAAK;AAAA,UACL;AAAA,UACA,eAAa;AAAA,UACb,OAAO,EAAE,GAAG,YAAY,QAAQ,MAAM,GAAG,GAAG,MAAM;AAAA,UAClD,WAAW;AAAA,YACT;AAAA,YACA;AAAA;AAAA;AAAA;AAAA,YAIA;AAAA,YACA;AAAA,UACF;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;AA8DA,MAAM,aAA4E;AAAA,EAChF,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AACT;AASO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,SAAS,aAAa,iBAAiB,6BAA6B;AAC1E,QAAM,UAAU,WAAW;AAC3B,QAAM,UAAU,UAAU,UAAa,QAAQ;AAC/C,QAAM,OAAO,UAAU,GAAG,KAAK,KAAK,cAAc,OAAO,MAAM,KAAK,CAAC,KAAK;AAC1E,QAAM,SAAS,SAAS;AACxB,QAAM,OAAO;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY,YACR,iFACA,WAAW,CAAC,UAAU,iBAAiB,SACrC,8EACA;AAAA,IACN;AAAA,EACF;AACA,QAAM,OACJ,iCACG;AAAA;AAAA,IACA,WACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,cAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA,WAAW,SAAS;AAAA,QACtB;AAAA,QAEC,kBAAQ,KAAK,QAAQ;AAAA;AAAA,IACxB;AAAA,KAEJ;AAGF,MAAI;AACJ,MAAI,QAAQ;AAEV,UAAM,EAAE,UAAU,WAAW,MAAM,OAAO,OAAO,QAAQ,MAAM,OAAO,GAAG,WAAW,IAAI;AACxF,UAAM,YAAqC;AAAA,MACzC,GAAI;AAAA,MACJ;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA,WAAW;AAAA,MACX,UAAU;AAAA,IACZ;AACA,UAAM,EAAE,UAAU,SAAS,GAAG,OAAO,IAAI;AACzC,UAAM,SAAS,iBAAiB,YAAY,SAAS,IAAI;AACzD,aAAS,SACP,oBAAC,wBAAqB,QAAiB,GAAG,WAAW,IAErD,oBAAC,OAAG,GAAG,QAAS,mBAAQ;AAAA,EAE5B,OAAO;AACL,aACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,gBAAc,WAAW,KAAK,cAAc;AAAA,QAC5C;AAAA,QACA,WAAW;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,EAEJ;AACA,MAAI,CAAC,QAAS,QAAO;AACrB;AAAA;AAAA;AAAA,IAGE,oBAAC,WAAQ,OAAc,MAAM,aAAa,QAAM,MAC9C,0CAAG,kBAAO,GACZ;AAAA;AAEJ;AAGA,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA,GAAG;AACL,GAA2F;AACzF,SAAO,OAAO,KAAK;AACrB;","names":[]}
+{"version":3,"sources":["../../src/components/floating-panel.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  AnchorHTMLAttributes,\n  ButtonHTMLAttributes,\n  CSSProperties,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { registerFloating } from \"../lib/floating-stack\";\nimport { useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport { assignRef } from \"./choice-parts\";\nimport { pickLinkRenderer } from \"./text-link\";\nimport { Tooltip, type TooltipSide } from \"./tooltip\";\n\nexport interface FloatingPanelLabels {\n  /** Accessible name of the panel header's X. */\n  close: string;\n  /**\n   * What a {@link FloatingAction}'s count badge adds to its accessible name (\"3 new\"),\n   * read after the label: \"Invoices, 3 new\". The dot itself is hidden from a reader —\n   * a bare \"3\" read out of context says nothing about what is counted.\n   */\n  badge: (count: number) => string;\n}\n\nexport const DEFAULT_FLOATING_PANEL_LABELS: FloatingPanelLabels = {\n  close: \"Close\",\n  badge: (count) => `${count} new`,\n};\n\n/** A LOGICAL corner: `bottom-end` is bottom-right in LTR and bottom-left in RTL. */\nexport type FloatingCorner = \"bottom-end\" | \"bottom-start\";\n\n/**\n * How far off the bottom edge anything floating here sits: clear of `AppShell`'s phone\n * nav (`--app-nav-h`, `0px` above `md` where the nav is not rendered) and of the home\n * indicator, whichever reaches higher — the nav does not pad itself for the inset, so\n * with no nav on screen the inset is all there is to clear. `max`, not a sum: where the\n * nav does cover the inset, adding both would float the button a nav-height too high.\n */\nconst BOTTOM_CLEARANCE = \"max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px))\";\n/** The side gutter, widened for a landscape notch. Both insets, because a logical\n *  side has no one physical inset to name. */\nconst SIDE_GUTTER = \"max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))\";\n\nfunction cornerStyle(corner: FloatingCorner, lift: string): CSSProperties {\n  return {\n    bottom: `calc(${BOTTOM_CLEARANCE} + ${lift})`,\n    // Logical properties, so the corner follows the reading direction with no JS. The\n    // portal carries the `dir` across (see `usePortalDir`).\n    [corner === \"bottom-start\" ? \"insetInlineStart\" : \"insetInlineEnd\"]: SIDE_GUTTER,\n  };\n}\n\n/**\n * The reading direction where the component was RENDERED, for its portalled root: a\n * portal to `<body>` leaves the subtree whose `dir` it inherited, and a logical\n * `inset-inline-end` resolves against the portal's own direction. Read off a hidden\n * inline marker in a layout effect, so the first painted frame already has it.\n */\nfunction usePortalDir(): [Ref<HTMLSpanElement>, Direction | undefined] {\n  const marker = useRef<HTMLSpanElement>(null);\n  const [dir, setDir] = useState<Direction | undefined>(undefined);\n  useLayoutEffect(() => {\n    setDir(dirOf(marker.current));\n  }, []);\n  return [marker, dir];\n}\n\nexport interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n  /** The accessible name — the button shows only its icon. */\n  label: string;\n  icon: ReactNode;\n  /** Default `bottom-end`. */\n  corner?: FloatingCorner;\n  /**\n   * Distance above the nav / home indicator, as a CSS length. Default `1rem`. Raise it\n   * to stack above another floating control in the same corner — keksdose's assistant\n   * clears the transactions page's own action group this way (`calc(1rem + 4rem)`).\n   */\n  offset?: string;\n  /**\n   * Whether the button carries the browser's own tooltip (`title`, the `label` unless a\n   * `title` is passed). Default `true`, so an icon-only button keeps a hover hint for a\n   * mouse user with no other way to learn what it is. `false` renders no `title` at all:\n   * keksdose has ONE tooltip, the kit's `Tooltip` (dev#523), and its source scan fails a\n   * native `title=` anywhere — so a flag, not `title=\"\"`, which the scan would still\n   * see. An empty `title` renders no attribute either, for the caller who has no scan.\n   *\n   * Not flipped to off by default: a FAB wrapped in nothing would lose the only hover\n   * hint it has, silently, in every app already on it. And the kit cannot wrap itself\n   * in its `Tooltip` — the bubble's anchor is a `relative inline-flex` span, and the\n   * button is `fixed` and portalled — so the one-tooltip caller wraps it.\n   */\n  nativeTitle?: boolean;\n  /**\n   * Make it a toggle. `true`/`false` set `aria-pressed` and swap the solid brand disc for\n   * a surface disc — the glyph in brand on the quiet brand fill when on, the secondary\n   * text colour when off — the \"on\" look of `IconButton`'s `pressed` and of a selected\n   * Chip. Left out, it is the ordinary action FAB. For keksdose's corner filter toggles\n   * (feedback-page's \"awaiting only\", the /transactions pending and upcoming toggles),\n   * which paint `text-[var(--brand)]` on a surface button by hand. Keep `label` the same\n   * in both states; `aria-pressed` already says which one it is in.\n   */\n  pressed?: boolean;\n  /**\n   * Show `label` beside the icon: the EXTENDED FAB, a pill rather than a disc. For a\n   * corner control whose words are the point — kastlan's offline indicator\n   * (shared/offline/offline-indicator.tsx:39) is a pill saying \"Offline — 2 photo(s)\n   * queued\" / \"Syncing…\", hand-placed at `fixed bottom-4 left-4`, i.e. over the\n   * bottom nav and on the wrong side in RTL. Same height as the disc (3rem), so a\n   * {@link FloatingPanel} card above it still clears it.\n   */\n  extended?: boolean;\n  /**\n   * Announce `label` whenever it changes, through a polite `role=\"status\"` region — for\n   * an extended FAB that REPORTS something (kastlan's offline/sync state), where a\n   * sighted user sees the words change and a screen reader user otherwise hears\n   * nothing until they happen to land on the button.\n   *\n   * ⚠️ A live region announces changes, not its own arrival: a FAB that mounts already\n   * saying \"Offline\" says it to nobody. Keep it mounted and pass `hidden` while there\n   * is nothing to report (kastlan returns `null` when online and idle); the region\n   * stays in the page, and the first real status is heard.\n   */\n  live?: boolean;\n  /**\n   * `primary` (default): the solid brand disc of a page's main action. `surface`: the\n   * page's surface with a hairline border — for a FAB that is a status rather than a\n   * call to action, as kastlan's offline pill is (a brand pill would shout \"press me\"\n   * at a user who is merely offline). Ignored while `pressed` is set; a toggle has its\n   * own two looks.\n   */\n  variant?: \"primary\" | \"surface\";\n  /**\n   * Hover and focus label in the kit {@link Tooltip}, instead of the native `title` —\n   * keksdose has ONE tooltip (dev#523) and wrapped its assistant launcher by hand,\n   * which cannot work: the tooltip's anchor is a `relative inline-flex` span, and this\n   * button is `fixed` and portalled. With `tooltip` the FAB positions a fixed wrapper\n   * instead and the button sits in the tooltip inside it. `true` shows the `label`;\n   * any other content shows that. Implies no native `title` (whatever `nativeTitle`\n   * says): one hover hint, not two. `style` stays on the button; the corner and\n   * `offset` move to the wrapper.\n   */\n  tooltip?: ReactNode;\n  /** Where the {@link tooltip} opens. Default `top`; the bubble is portalled and kept on\n   *  screen, so a corner button's label is not pushed off the edge. */\n  tooltipSide?: TooltipSide;\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * A round, icon-only button pinned to a corner of the viewport — the trigger of a\n * {@link FloatingPanel}, and usable alone for a page's one primary action.\n *\n * keksdose hand-placed each of its floating controls: the assistant launcher at\n * `fixed bottom-36 right-4 md:bottom-6`, the feedback page's and the transactions\n * page's action groups at `right-4 bottom-20`. Every one of those numbers is a guess\n * at the phone nav's height plus whatever else floats there (Keksdose live #314 found\n * out what such a guess is worth for a footer), `right` rather than `end` puts it over\n * the page's leading edge in RTL, and none allows for the home indicator. Here the\n * base is `--app-nav-h` and the safe-area inset, the corner is logical, and\n * {@link FloatingActionButtonProps.offset} is the one number left to the caller — the\n * height of whatever else it has to clear, not the nav's.\n *\n * Portalled, because `position: fixed` inside any transformed ancestor (an animated\n * page transition) is fixed to that ancestor, not to the screen.\n *\n * While mounted it reports its box (`lib/floating-stack.ts`), so `ServerWakeNotice`\n * stacks above it rather than over it.\n */\nexport function FloatingActionButton({\n  label,\n  icon,\n  corner = \"bottom-end\",\n  offset = \"1rem\",\n  nativeTitle = true,\n  pressed,\n  extended = false,\n  live = false,\n  variant = \"primary\",\n  tooltip,\n  tooltipSide = \"top\",\n  className,\n  style,\n  type = \"button\",\n  title,\n  ref,\n  ...rest\n}: FloatingActionButtonProps) {\n  const [marker, dir] = usePortalDir();\n  const toggle = pressed !== undefined;\n  const tip = tooltip === true ? label : tooltip === false || tooltip === \"\" ? undefined : tooltip;\n  const wrapped = tip !== undefined && tip !== null;\n  // The fixed element — the button, or the wrapper when there is a tooltip.\n  const [fixed, setFixed] = useState<HTMLElement | null>(null);\n  useEffect(() => (fixed ? registerFloating(fixed) : undefined), [fixed]);\n  const buttonRef = useCallback(\n    (node: HTMLButtonElement | null) => {\n      assignRef(ref, node);\n      if (!wrapped) setFixed(node);\n    },\n    [ref, wrapped],\n  );\n  // An empty title is \"no tooltip\", not an attribute with nothing in it. The kit\n  // tooltip replaces it outright.\n  const nativeTip = !wrapped && nativeTitle && title !== \"\" ? (title ?? label) : undefined;\n  const button = (\n          <button\n            {...rest}\n            ref={buttonRef}\n            type={type}\n            dir={dir}\n            aria-label={label}\n            aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n            title={nativeTip}\n            style={wrapped ? style : { ...cornerStyle(corner, offset), ...style }}\n            className={cn(\n              // Wrapped, the wrapper is the fixed thing and the button sits in it.\n              !wrapped && \"fixed z-40\",\n              \"inline-flex items-center justify-center rounded-full\",\n              extended ? \"h-12 gap-2 px-4 text-sm font-medium [&_svg]:size-5\" : \"size-12 [&_svg]:size-6\",\n              \"shadow-lg transition-colors disabled:cursor-default\",\n              !toggle &&\n                variant === \"primary\" &&\n                \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\",\n              !toggle &&\n                variant === \"surface\" &&\n                \"border border-[var(--border)] bg-[var(--bg-surface)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)] disabled:hover:bg-[var(--bg-surface)]\",\n              // A toggle sits on the page's surface — a solid brand disc would read as\n              // \"on\" in both states — and says \"on\" in the brand family.\n              toggle && \"border border-[var(--border)]\",\n              pressed === false &&\n                \"bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]\",\n              pressed === true &&\n                \"border-[var(--brand)] bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)] hover:text-brand-muted\",\n              \"outline-none focus-visible:ring-offset-2\",\n              FOCUS_RING,\n              className,\n            )}\n          >\n            {icon}\n            {/* Visible words, not the name: `aria-label` already is the name, and the\n                span would only repeat it. */}\n            {extended && (\n              <span aria-hidden className=\"whitespace-nowrap\">\n                {label}\n              </span>\n            )}\n          </button>\n  );\n  return (\n    <>\n      <span ref={marker} hidden />\n      {typeof document !== \"undefined\" &&\n        createPortal(\n          <>\n            {wrapped ? (\n              <div\n                ref={setFixed}\n                dir={dir}\n                hidden={rest.hidden}\n                style={cornerStyle(corner, offset)}\n                className=\"fixed z-40 inline-flex\"\n              >\n                <Tooltip label={tip} side={tooltipSide} portal>\n                  {/* A fragment when the bubble says the name again, so the tooltip\n                      does not describe the button with its own label — a reader would\n                      hear it twice. Other text is a real description. */}\n                  {tip === label ? <>{button}</> : button}\n                </Tooltip>\n              </div>\n            ) : (\n              button\n            )}\n            {live && (\n              <span role=\"status\" className=\"sr-only\">\n                {label}\n              </span>\n            )}\n          </>,\n          document.body,\n        )}\n    </>\n  );\n}\n\nexport interface FloatingPanelProps {\n  /** The panel's heading, and its accessible name. */\n  title: ReactNode;\n  /** The trigger's accessible name (\"Assistant\", \"Send feedback\"). */\n  fabLabel: string;\n  fabIcon: ReactNode;\n  /** Controlled open state. Leave it out to let the panel own it. */\n  open?: boolean;\n  /** Uncontrolled initial state. Default closed. */\n  defaultOpen?: boolean;\n  /** Every request to open or close — the FAB, the X, Escape. */\n  onOpenChange?: (open: boolean) => void;\n  /** Default `bottom-end`. */\n  corner?: FloatingCorner;\n  /** The FAB's distance above the nav — see {@link FloatingActionButtonProps.offset}.\n   *  From `md` up the card sits above the FAB, so it moves with it. */\n  offset?: string;\n  /** The FAB's native `title` — see {@link FloatingActionButtonProps.nativeTitle}.\n   *  `false` for keksdose's assistant launcher, under its one-tooltip rule (dev#523). */\n  fabNativeTitle?: boolean;\n  /** The FAB's kit tooltip — see {@link FloatingActionButtonProps.tooltip}. `true` for\n   *  keksdose's assistant launcher, which wanted the kit bubble and had no way to\n   *  put one on a fixed, portalled button (dev#523). */\n  fabTooltip?: ReactNode;\n  /** Default: `floatingPanel.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /**\n   * Where focus goes on open. Default the panel itself, so a phone's keyboard does not\n   * rise over the sheet before the user has asked to type; pass the chat field for a\n   * panel whose one job is typing.\n   */\n  initialFocus?: () => HTMLElement | null;\n  /** Extra classes for the panel. */\n  className?: string;\n  /** Extra classes for the scrolling body. */\n  bodyClassName?: string;\n  children: ReactNode;\n}\n\n/**\n * A docked, NON-MODAL panel in a corner of the screen, opened by a\n * {@link FloatingActionButton} — keksdose's assistant launcher and its feedback page,\n * which each built one.\n *\n * ## Not a Modal\n *\n * The page stays usable while it is open: that is the point of an assistant beside the\n * data it is asked about. So there is no backdrop, no scroll lock, no `aria-modal` and\n * no focus trap — Tab walks out of the panel into the page and back, and a click on the\n * page does not close it. It is `role=\"dialog\"` without `aria-modal`, which is what\n * ARIA calls a non-modal dialog, named by its heading.\n *\n * What it keeps from a dialog is the focus HANDOFF: opening moves focus into it (a\n * keyboard user who pressed the FAB should not have to hunt for what appeared), and\n * closing gives it back to the FAB — but only when focus was in the panel, so a panel\n * closed from the page (a controlled owner) never pulls focus out of the field the\n * user is typing in. Escape closes it while focus is inside, and only then: on the\n * panel element, not the document, so Escape in the page keeps meaning whatever the\n * page means by it.\n *\n * ## Layout\n *\n * From `md` up, a card above the FAB in its corner. Below `md`, a full-width sheet\n * docked to the bottom, sitting ON the `AppShell` bottom nav (`--app-nav-h`) and\n * clear of the home indicator. Pure CSS — no width is measured in JavaScript.\n *\n * The FAB carries `aria-expanded` and, while the panel exists, `aria-controls`. The\n * panel unmounts when closed; an app that must keep a draft across a close keeps it in\n * its own state, where it also survives a reload.\n */\nexport function FloatingPanel({\n  title,\n  fabLabel,\n  fabIcon,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  corner = \"bottom-end\",\n  offset = \"1rem\",\n  fabNativeTitle,\n  fabTooltip,\n  closeLabel,\n  initialFocus,\n  className,\n  bodyClassName,\n  children,\n}: FloatingPanelProps) {\n  const labels = useKitLabels(\n    \"floatingPanel\",\n    DEFAULT_FLOATING_PANEL_LABELS,\n    closeLabel === undefined ? undefined : { close: closeLabel },\n  );\n  const [ownOpen, setOwnOpen] = useState(defaultOpen);\n  const open = openProp ?? ownOpen;\n  const setOpen = (next: boolean) => {\n    if (openProp === undefined) setOwnOpen(next);\n    onOpenChange?.(next);\n  };\n\n  const uid = useId();\n  const panelId = `${uid}-panel`;\n  const titleId = `${uid}-title`;\n  const fabRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [marker, dir] = usePortalDir();\n\n  const initialFocusRef = useRef(initialFocus);\n  useEffect(() => {\n    initialFocusRef.current = initialFocus;\n  });\n\n  // Focus follows the open/closed TRANSITION, never the mount: a panel that renders\n  // open (`defaultOpen`, a restored route) does not take the page's focus by existing.\n  const wasOpen = useRef(open);\n  // Whether focus was inside the panel when it last changed — read at close time, when\n  // the panel (and whatever had focus in it) is already gone.\n  const focusInside = useRef(false);\n  useEffect(() => {\n    const changed = wasOpen.current !== open;\n    wasOpen.current = open;\n    if (!changed) return;\n    if (open) {\n      (initialFocusRef.current?.() ?? panelRef.current)?.focus();\n      return;\n    }\n    const active = document.activeElement;\n    const lost = active === null || active === document.body;\n    if (focusInside.current || lost) fabRef.current?.focus();\n    focusInside.current = false;\n  }, [open]);\n\n  const onPanelKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\" || e.defaultPrevented) return;\n    // Stopped here, so an overlay underneath with a document-level Escape listener does\n    // not close too — the innermost thing that has focus is the one that closes.\n    e.stopPropagation();\n    focusInside.current = true;\n    setOpen(false);\n  };\n\n  return (\n    <>\n      <span ref={marker} hidden />\n      <FloatingActionButton\n        ref={fabRef}\n        label={fabLabel}\n        icon={fabIcon}\n        corner={corner}\n        offset={offset}\n        nativeTitle={fabNativeTitle}\n        tooltip={fabTooltip}\n        aria-expanded={open}\n        aria-controls={open ? panelId : undefined}\n        onClick={() => {\n          // A press ON the FAB closing the panel: the FAB keeps focus by being clicked,\n          // nothing to hand back.\n          focusInside.current = false;\n          setOpen(!open);\n        }}\n      />\n      {open &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          // A container for Escape bubbling up from anything inside it, as a dialog is.\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n          <div\n            ref={panelRef}\n            id={panelId}\n            role=\"dialog\"\n            aria-labelledby={titleId}\n            tabIndex={-1}\n            dir={dir}\n            data-corner={corner}\n            onKeyDown={onPanelKeyDown}\n            onFocus={() => {\n              focusInside.current = true;\n            }}\n            onBlur={(e) => {\n              if (!e.currentTarget.contains(e.relatedTarget as Node | null)) focusInside.current = false;\n            }}\n            // The phone's sheet sits on the nav; from `md` up the card floats above the\n            // FAB (its offset + the 3rem button + a 0.75rem gap).\n            style={\n              {\n                \"--fp-bottom\": `calc(${BOTTOM_CLEARANCE})`,\n                \"--fp-bottom-md\": `calc(${BOTTOM_CLEARANCE} + ${offset} + 3.75rem)`,\n                \"--fp-side\": SIDE_GUTTER,\n              } as CSSProperties\n            }\n            className={cn(\n              \"animate-sheet fixed z-40 flex flex-col overflow-hidden outline-none\",\n              \"border border-[var(--border)] bg-[var(--bg-surface)] shadow-2xl\",\n              // Phone: full width, docked, rounded only where it meets the page.\n              \"inset-x-0 bottom-[var(--fp-bottom)] max-h-[min(85dvh,calc(100dvh_-_var(--fp-bottom)_-_1rem))] rounded-t-xl border-x-0 border-b-0\",\n              \"pb-[env(safe-area-inset-bottom,0px)] md:pb-0\",\n              // md+: a card in the corner, above the FAB.\n              \"md:inset-x-auto md:bottom-[var(--fp-bottom-md)] md:w-[24rem] md:max-h-[min(36rem,calc(100dvh_-_var(--fp-bottom-md)_-_1rem))] md:rounded-xl md:border\",\n              corner === \"bottom-start\" ? \"md:start-[var(--fp-side)]\" : \"md:end-[var(--fp-side)]\",\n              className,\n            )}\n          >\n            <div className=\"flex shrink-0 items-center justify-between gap-2 border-b border-[var(--border)] px-4 py-3\">\n              <h2 id={titleId} className=\"min-w-0 truncate text-base font-semibold text-[var(--text-primary)]\">\n                {title}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  focusInside.current = true;\n                  setOpen(false);\n                }}\n                aria-label={labels.close}\n                className={cn(\"-me-1.5 shrink-0 rounded p-1.5 text-[var(--text-muted)] outline-none hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\", FOCUS_RING)}\n              >\n                <X aria-hidden className=\"size-5\" />\n              </button>\n            </div>\n            <div className={cn(\"min-h-0 flex-1 overflow-y-auto overscroll-contain p-4\", bodyClassName)}>\n              {children}\n            </div>\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n\nexport interface FloatingActionGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, \"role\"> {\n  /** Name the group (\"Register actions\"); a reader then introduces the members as one\n   *  set. A group with no name is one more unlabelled wrapper. */\n  \"aria-label\"?: string;\n  /** Default `bottom-end`. */\n  corner?: FloatingCorner;\n  /** Distance above the nav / home indicator — see {@link FloatingActionButtonProps.offset}. */\n  offset?: string;\n  /** {@link FloatingAction}s, in reading order. */\n  children: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A floating pill of {@link FloatingAction}s — one to four `size-12` toggles, actions\n * or links with hairline dividers — pinned to a corner exactly as the\n * {@link FloatingActionButton} is: `--app-nav-h` and the home indicator cleared, a\n * logical corner, portalled.\n *\n * keksdose built it twice by hand: the /transactions phone toolbar\n * (transactions-page.tsx:644 — upcoming and pending toggles, an invoices link with a\n * pending count, and the brand \"+\") and the feedback page's \"awaiting only\" toggle\n * (feedback-page.tsx:854, one button in the group anyway, so the two pages look\n * alike). Both at `right-4 bottom-20` — `right`, not `end`, so over the page's leading\n * edge in RTL — with `divide-x`, slate hovers, and each member's `Tooltip` spelled out.\n *\n * `role=\"group\"`, NOT a toolbar: every member keeps its own tab stop, as the\n * hand-built ones did, and there is no arrow-key roving to learn. Hide it where it\n * does not belong with a class (`md:hidden`, as both keksdose pages do).\n */\nexport function FloatingActionGroup({\n  corner = \"bottom-end\",\n  offset = \"1rem\",\n  className,\n  style,\n  children,\n  ...rest\n}: FloatingActionGroupProps) {\n  const [marker, dir] = usePortalDir();\n  return (\n    <>\n      <span ref={marker} hidden />\n      {typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            {...rest}\n            role=\"group\"\n            dir={dir}\n            data-corner={corner}\n            style={{ ...cornerStyle(corner, offset), ...style }}\n            className={cn(\n              \"fixed z-40 inline-flex flex-row overflow-hidden rounded-2xl\",\n              \"border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n              // Dividers on the logical start edge of every member but the first, so\n              // they sit between the same two members in RTL. The member is the\n              // tooltip's wrapper span, which is the direct child.\n              \"[&>*:not(:first-child)]:border-s [&>*]:border-[var(--border)]\",\n              className,\n            )}\n          >\n            {children}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n\n/** What {@link FloatingActionProps.renderLink} is handed. Spread it onto your router's\n *  link, mapping `href` — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface FloatingActionLinkProps {\n  href: string;\n  /** The member's whole look — keep it. */\n  className: string;\n  children: ReactNode;\n  \"aria-label\": string;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface FloatingActionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\" | \"onClick\"> {\n  /** The accessible name, and the tooltip's text. Keep it the same in both states of a\n   *  toggle; `aria-pressed` says which one it is in. */\n  label: string;\n  icon: ReactNode;\n  /** Make it a toggle: `aria-pressed` and the brand \"on\" look (the brand glyph on the\n   *  quiet brand fill), as {@link FloatingActionButtonProps.pressed}. Ignored on a link.\n   *  For the state without the tint, see {@link pressedStyle}. */\n  pressed?: boolean;\n  /**\n   * How `pressed` looks. `tint` (default): the brand \"on\" look. `plain`: the member\n   * keeps its quiet look in both states and only `aria-pressed` changes — for a toggle\n   * whose icon already says which state it is in (keksdose's /transactions \"Upcoming\"\n   * swaps two icons; a tint on top said it twice). The same as passing `aria-pressed`\n   * without `pressed`, which also rides through untinted.\n   */\n  pressedStyle?: \"tint\" | \"plain\";\n  /**\n   * `primary`: the brand-filled member, for the group's main action (the /transactions\n   * \"+\"). Default: the quiet one.\n   */\n  variant?: \"default\" | \"primary\";\n  /**\n   * A count in a dot at the member's top end corner — the /transactions invoices link's\n   * pending count. Nothing is drawn for `0` or less; above 99 it reads `99+`. The count\n   * joins the accessible name through `floatingPanel.badge` (\"Invoices, 3 new\"), or\n   * `badgeLabel` when passed.\n   */\n  badge?: number;\n  /** The badge's words for a reader, replacing `floatingPanel.badge` — \"3 to review\". */\n  badgeLabel?: string;\n  /** The dot's colour. Default `warning`, the pending count's. */\n  badgeTone?: \"warning\" | \"danger\" | \"brand\";\n  /** Show `label` in the kit {@link Tooltip} on hover and focus. Default `true`: the\n   *  members are icon-only and this is their only visible label. */\n  tooltip?: boolean;\n  /** Where the tooltip opens. Default `top` — the group sits at the bottom of the screen. */\n  tooltipSide?: TooltipSide;\n  /** Make it a link — the /transactions invoices member. Drawn by `renderLink`, else\n   *  the `<UiKitProvider linkComponent>` (an in-app `href`), else a plain `<a>`. */\n  href?: string;\n  /** Render the link through your router's `Link` — see {@link FloatingActionLinkProps}. */\n  renderLink?: (props: FloatingActionLinkProps) => ReactElement;\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  ref?: Ref<HTMLButtonElement>;\n}\n\n// Each fill under its own foreground (0.33): warning borrowed `--text-inverse`, the\n// surface colour, which was 4.24:1 on the light warning fill.\nconst BADGE_TONE: Record<NonNullable<FloatingActionProps[\"badgeTone\"]>, string> = {\n  warning: \"bg-warning text-warning-contrast\",\n  danger: \"bg-danger text-danger-contrast\",\n  brand: \"bg-brand text-brand-contrast\",\n};\n\n/**\n * One member of a {@link FloatingActionGroup}: a `size-12` icon button, toggle or link\n * with its label in a styled tooltip — what each keksdose member wrapped by hand in\n * `<Tooltip portal>`. The tooltip is portalled because the group clips (`overflow-hidden`\n * keeps the brand member's fill inside the pill's corners), and the focus ring is inset\n * for the same reason.\n */\nexport function FloatingAction({\n  label,\n  icon,\n  pressed,\n  pressedStyle = \"tint\",\n  variant = \"default\",\n  badge,\n  badgeLabel,\n  badgeTone = \"warning\",\n  tooltip = true,\n  tooltipSide = \"top\",\n  href,\n  renderLink,\n  className,\n  type = \"button\",\n  onClick,\n  ref,\n  ...rest\n}: FloatingActionProps) {\n  const labels = useKitLabels(\"floatingPanel\", DEFAULT_FLOATING_PANEL_LABELS);\n  const kitLink = useKitLink();\n  const counted = badge !== undefined && badge > 0;\n  const name = counted ? `${label}, ${badgeLabel ?? labels.badge(badge)}` : label;\n  const isLink = href !== undefined;\n  const look = cn(\n    \"relative flex size-12 items-center justify-center transition-colors\",\n    \"outline-none focus-visible:ring-inset\",\n    FOCUS_RING,\n    \"disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-5\",\n    variant === \"primary\"\n      ? \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\"\n      : pressed && !isLink && pressedStyle === \"tint\"\n        ? \"bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)] hover:text-brand-muted\"\n        : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]\",\n    className,\n  );\n  const body = (\n    <>\n      {icon}\n      {counted && (\n        <span\n          aria-hidden\n          data-badge=\"\"\n          className={cn(\n            \"pointer-events-none absolute end-1 top-1 h-4 min-w-4 rounded-full px-1 text-center text-micro leading-4 font-semibold\",\n            BADGE_TONE[badgeTone],\n          )}\n        >\n          {badge > 99 ? \"99+\" : badge}\n        </span>\n      )}\n    </>\n  );\n\n  let member: ReactElement;\n  if (isLink) {\n    // The button-only attributes stay behind; `aria-*`, `data-*` and the like ride along.\n    const { disabled: _disabled, form: _form, value: _value, name: _name, ...anchorRest } = rest;\n    const linkProps: FloatingActionLinkProps = {\n      ...(anchorRest as AnchorHTMLAttributes<HTMLAnchorElement>),\n      href,\n      \"aria-label\": name,\n      onClick,\n      className: look,\n      children: body,\n    };\n    const { children: content, ...anchor } = linkProps;\n    const render = pickLinkRenderer(renderLink, kitLink, href);\n    member = render ? (\n      <RenderedFloatingLink render={render} {...linkProps} />\n    ) : (\n      <a {...anchor}>{content}</a>\n    );\n  } else {\n    member = (\n      <button\n        {...rest}\n        ref={ref}\n        type={type}\n        aria-label={name}\n        aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n        onClick={onClick}\n        className={look}\n      >\n        {body}\n      </button>\n    );\n  }\n  if (!tooltip) return member;\n  return (\n    // A fragment: the bubble says the member's name, and a description that repeats\n    // the name is read twice.\n    <Tooltip label={label} side={tooltipSide} portal>\n      <>{member}</>\n    </Tooltip>\n  );\n}\n\n/** Calls `renderLink` as a component, so its hooks belong to the link, not to us. */\nfunction RenderedFloatingLink({\n  render,\n  ...props\n}: FloatingActionLinkProps & { render: (props: FloatingActionLinkProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":"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","names":[]}

package/dist/components/form-actions.d.ts

@@ -1,18 +1,23 @@
 import 'react';
 import 'lucide-react';
-export { cC as DEFAULT_FORM_ACTIONS_LABELS, ds as FormActions, dt as FormActionsAlign, du as FormActionsDestructive, dv as FormActionsLabels, dw as FormActionsPlacement, dx as FormActionsProps, dy as FormActionsStack, dz as FormActionsStickyWithin, dA as FormActionsSubmitProps, dB as FormActionsSubmitShortcut, ey as ResponsiveFormActionsPlacement } from '../delete-account-setting-Dy4kJgUm.js';
+export { cC as DEFAULT_FORM_ACTIONS_LABELS, dt as FormActions, du as FormActionsAlign, dv as FormActionsDestructive, dw as FormActionsLabels, dx as FormActionsPlacement, dy as FormActionsProps, dz as FormActionsStack, dA as FormActionsStickyWithin, dB as FormActionsSubmitProps, dC as FormActionsSubmitShortcut, eJ as ResponsiveFormActionsPlacement } from '../delete-account-setting-DAgGBrbn.js';
+import './write-lock.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-kpAAVi6g.js';
+import '../data-table-labels-BJ5JE_X2.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
+import './status-dot.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './stat-tile.js';
+import './chip.js';
+import './field-parts.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import '../hooks/use-breakpoint.js';
-import './chip.js';
-import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -24,7 +29,6 @@ import './page-contents.js';
 import './series-chart-labels.js';
 import './pie-chart-labels.js';
 import './sparkline.js';
-import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
 import './swatch-picker.js';
@@ -36,9 +40,6 @@ import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
 import './user-avatar.js';
 import '../lib/person-name.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
 import '../shell/topbar-action-menu.js';
 import './menu-item.js';
 import './floating-panel.js';
@@ -54,7 +55,6 @@ import './error-boundary.js';
 import './authed-image.js';
 import './image-grid.js';
 import './lightbox.js';
-import './write-lock.js';
 import '../auth/sign-in-form.js';
 import '../landing/access.js';
 import '../landing/landing-labels.js';
@@ -81,6 +81,7 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import '../i18n/plurals.js';
 import './appearance-labels.js';
 import '../theme/contrast.js';
 import '../theme/text-size.js';

package/dist/components/form-actions.js

@@ -90,7 +90,7 @@ function FormActions({
   const stacked = stack !== "never" && phone && (stack === "phone" || large);
   const full = stacked ? "w-full" : void 0;
   const labels = useKitLabels("form", DEFAULT_FORM_ACTIONS_LABELS);
-  const lock = useWriteLock();
+  const lock = useWriteLock(commit);
   const rootRef = useRef(null);
   const saveRef = useRef(null);
   const callerSaveRef = submitProps?.ref;
@@ -112,7 +112,7 @@ function FormActions({
     if (!ours) return;
     if (document.activeElement === null || document.activeElement === document.body) saveRef.current?.focus();
   }, [pending]);
-  const canSave = !pending && !submitDisabled && !(commit && lock.locked);
+  const canSave = !pending && !submitDisabled && !lock.locked;
   const canSaveRef = useRef(canSave);
   useEffect(() => {
     canSaveRef.current = canSave;
@@ -213,7 +213,7 @@ function FormActions({
               size: saveSize,
               disabled: pending || submitDisabled,
               disabledReason: pending ? void 0 : submitDisabledReason,
-              commit: commit && !pending,
+              commit: pending ? false : commit,
               "aria-busy": pending || void 0,
               className: cn(submitProps?.className, full),
               children: [