@eifi1/ui-kit 0.51.6 → 0.52.0

package/dist/components/share-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/share-card.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Trash2, UserPlus, UsersRound } from \"lucide-react\";\n\nimport { useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { foldForSearch } from \"../lib/text-match\";\nimport { AlertBanner } from \"./alert-banner\";\nimport { Autocomplete } from \"./autocomplete\";\nimport type { ComboOption } from \"./combobox-core\";\nimport { Chip } from \"./chip\";\nimport { RoleChip } from \"./account-chips\";\nimport type { RoleDefinition } from \"./account-chips\";\nimport { useConfirm } from \"./confirm-dialog\";\nimport { CopyButton } from \"./copy-button\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport type { DialogFrameProps } from \"./dialog-frame\";\nimport { Caption, SectionLabel } from \"./text\";\nimport { ToggleGroup } from \"./toggle-group\";\nimport { Tooltip } from \"./tooltip\";\nimport { Button } from \"./button\";\nimport { Card } from \"./card\";\nimport { IconButton } from \"./icon-button\";\nimport { Spinner } from \"./spinner\";\nimport { COMMIT_EXCEPT_BILLING, useWriteLock } from \"./write-lock\";\nimport type { WriteLock } from \"./write-lock\";\nimport type { CardProps } from \"./card\";\nimport type { DisabledReasonDisplay } from \"./field-parts\";\nimport { DEFAULT_SHARE_CARD_LABELS } from \"./share-card-labels\";\n\n/**\n * Who holds one record, and the owner's every way of changing that — Kurvenschmiede's\n * `features/sharing/share-dialog.tsx` and keksdose's `features/budgets/budget-share-card.tsx`,\n * which are the same component twice (Kurvenschmiede's own doc comment says so).\n *\n * Presentational: the kit draws the rows, asks before a removal (the kit's\n * {@link useConfirm}), keeps the field and the busy state, and checks only that an\n * address is SHAPED like one. Everything that is policy stays with the app — who may\n * share, whether an address has an account (that is what makes a grant pending), what\n * a role permits, every request — through the callbacks, which may return a promise.\n */\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\nexport interface ShareCardLabels {\n  /** ShareDialog's heading. */\n  dialogTitle: string;\n  /** ShareDialog's close button. */\n  close: string;\n  /** The add field's label. */\n  email: string;\n  /** The add field's label when `addWithoutEmail` lets it stay empty. */\n  emailOptional: string;\n  emailPlaceholder: string;\n  /** Under the field when what was typed is not an address. */\n  invalidEmail: string;\n  /** Accessible name of the role choice beside the field. */\n  role: string;\n  /** Accessible name of one grantee's role choice. */\n  roleOf: (name: string) => string;\n  /** The add button. */\n  add: string;\n  /** Heading over the list. */\n  whoHasAccess: string;\n  /** The list is empty. */\n  nobodyYet: string;\n  /** Chip on a grant whose address has no account yet. */\n  pending: string;\n  /** A pending grant with no address — a link anybody holding it can redeem. */\n  openInvite: string;\n  copyLink: string;\n  /** A candidate that is a team (its sublabel, and the line under a team row). */\n  team: string;\n  /** Under the field while a team is the one named. */\n  teamHint: (name: string) => string;\n  /** The remove button on a grantee. */\n  remove: string;\n  removeConfirm: (name: string) => string;\n  /** The remove button on a pending grant. */\n  revokePending: string;\n  revokePendingConfirm: (name: string) => string;\n  /** A callback rejected and no `formatError` says better. */\n  failed: string;\n  /** Shown while `loading`. */\n  loading: string;\n}\n\n// Defined in ./share-card-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_SHARE_CARD_LABELS };\n\n// ── Data shapes ───────────────────────────────────────────────────────────────\n\n/**\n * One role of the app's vocabulary: Kurvenschmiede's viewer/editor, keksdose's guest.\n *\n * The admin roster's {@link RoleDefinition} (label, tone, icon) plus the key it is\n * filed under — an ARRAY here rather than the keyed `RoleVocabulary` record,\n * because the order is the order of the role choice's segments.\n */\nexport type ShareRole = RoleDefinition & {\n  key: string;\n  /** What the role allows — under the role choice once chosen, and the chip's tooltip. */\n  description?: string;\n};\n\n/** Somebody (or a team) who holds the record now. */\nexport interface ShareGrantee {\n  id: string | number;\n  name: string;\n  /** The second line. A team row says {@link ShareCardLabels.team} instead. */\n  email?: string | null;\n  /** A {@link ShareRole.key}. */\n  role: string;\n  /** `team`: the grant reaches everybody in it (Kurvenschmiede). Default `person`. */\n  kind?: \"person\" | \"team\";\n  /** Shown, but neither its role nor its access can be changed here (an owner row). */\n  locked?: boolean;\n  /** The app's own line under the row — keksdose's per-guest key delivery. */\n  extra?: ReactNode;\n}\n\n/** A grant waiting for its address to have an account — or, with no address, an\n *  open invite link (keksdose). */\nexport interface SharePendingGrant {\n  id: string | number;\n  email?: string | null;\n  /** A {@link ShareRole.key}; left out when the app has only one role. */\n  role?: string;\n  /** The invite link, offered with a copy button. */\n  link?: string;\n}\n\n/** A completion offered while typing: a past grantee, or one of the sharer's teams. */\nexport interface ShareCandidate {\n  id: string | number;\n  name: string;\n  /** A person's address: taking the row fills the field with it, and the grant is\n   *  then an ordinary address grant. */\n  email?: string | null;\n  /** `team` (or a person with no address): taking the row names THIS candidate, and\n   *  `onAdd` receives it instead of an address. */\n  kind?: \"person\" | \"team\";\n  icon?: ReactNode;\n}\n\n/** What the add button asks for. Exactly one of `email` / `candidate` is set, except\n *  under `addWithoutEmail`, where both may be null (an open invite). */\nexport interface ShareAddRequest {\n  email: string | null;\n  candidate: ShareCandidate | null;\n  /** A {@link ShareRole.key}. */\n  role: string;\n}\n\ntype MaybePromise = void | Promise<unknown>;\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\nexport interface SharePanelProps {\n  grantees: ShareGrantee[];\n  /** The role vocabulary, in display order, NARROWEST FIRST — viewer, then editor, as\n   *  Kurvenschmiede lists them. One role: no choice is offered and each row shows its\n   *  chip. The order is what tells a lowering from a raise under a write lock: a lapsed\n   *  plan lets a grantee's role be lowered, which removes access, and never raised\n   *  (docs/billing-harmonization.md decision 26 as amended, §12.36). */\n  roles: ShareRole[];\n  pending?: SharePendingGrant[];\n  /** Completions for the field. Left out: the field is a plain address field. */\n  candidates?: ShareCandidate[];\n  /** The role a new grant starts with. Default: the first of `roles`. */\n  defaultRole?: string;\n  /** Resolve to clear the field; reject to keep it and show the error. Left out (or\n   *  `readOnly`): no add form. */\n  onAdd?: (request: ShareAddRequest) => MaybePromise;\n  /** Left out: roles are shown as chips. */\n  onRoleChange?: (grantee: ShareGrantee, role: string) => MaybePromise;\n  /** Called after the kit's confirm. Left out: no remove button. */\n  onRemove?: (grantee: ShareGrantee) => MaybePromise;\n  /** Called after the kit's confirm. Left out: no withdraw button. */\n  onRevokePending?: (grant: SharePendingGrant) => MaybePromise;\n  /** keksdose: an empty field is a request too — an invite link with no address. */\n  addWithoutEmail?: boolean;\n  /** Under the add field: whatever the app needs said there (Kurvenschmiede's \"your\n   *  pending grant does not let anybody register\"). A function receives the taken\n   *  candidate, so it can say something else while a team is named. */\n  caption?: ReactNode | ((candidate: ShareCandidate | null) => ReactNode);\n  /** Above everything — what sharing means here (keksdose's guest explanation). */\n  intro?: ReactNode;\n  /** The list is being fetched: a spinner instead of the rows. */\n  loading?: boolean;\n  /** The app's own error, shown in the error box (wins over a caught rejection). */\n  error?: ReactNode;\n  /** Turns a callback's rejection into words. Default {@link ShareCardLabels.failed}. */\n  formatError?: (error: unknown) => ReactNode;\n  /** Look, do not touch: no form, chips for roles, no remove buttons. Copying an\n   *  invite link still works. */\n  readOnly?: boolean;\n  /** Focus the field on mount — a dialog that exists to add somebody. */\n  autoFocus?: boolean;\n  labels?: LabelOverride<ShareCardLabels>;\n}\n\n// Shape only. Whether the address exists, is allowed, or is the sharer's own is the\n// app's question — the field must never become a way to probe for accounts.\nconst EMAIL_SHAPE = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\n/** The kit's {@link RoleChip}, so a role looks the same here as in the admin roster,\n *  with the role's description in a tooltip. */\nfunction ShareRoleChip({ role }: { role: ShareRole | undefined }) {\n  if (!role) return null;\n  const chip = <RoleChip value={role.key} roles={{ [role.key]: role }} />;\n  return role.description ? <Tooltip label={role.description}>{chip}</Tooltip> : chip;\n}\n\n/**\n * A row's controls: the role toggle and the remove icon, or a pending grant's copy and\n * revoke. Held to the row and wrapping inside it (0.32.1, the 360 px Extra-large sweep;\n * docs/text-size-harmonization.md §4 \"nothing overflows\"): under a write lock on a touch\n * screen or at Large the remove icon gives its reason as a line under it, up to 20rem\n * wide, and a `shrink-0` box ran 31 px past a 390 px phone at Normal and 269 px past a\n * 360 px one at Extra large. Where the controls fit in one row, nothing changes.\n */\nconst ROW_CONTROLS = \"ms-auto flex min-w-0 max-w-full flex-wrap items-center justify-end gap-1\";\n\n/**\n * A row's role choice saves on change, so it is a commit that cannot take `commit`:\n * under a write lock it is disabled, and the lock's reason is put in the kit Tooltip\n * around it — the same sentence the locked buttons beside it give.\n */\nfunction LockedRoleChoice({ reason, children }: { reason: ReactNode; children: ReactNode }) {\n  return reason === undefined ? children : <Tooltip label={reason}>{children}</Tooltip>;\n}\n\n/** What a grantee's role choice may do under the write lock: `group` locks the whole\n *  choice with that reason; `raise` leaves it live for a lowering and refuses a raise\n *  with that reason. Neither: the choice is free. */\ninterface RoleChoiceLock {\n  group?: ReactNode;\n  raise?: ReactNode;\n}\n\n/**\n * A grantee's role choice under the write lock (decision 26 as amended,\n * docs/billing-harmonization.md §12.36). `roles` is read narrowest first, so an option\n * before the grantee's role LOWERS it: that removes access, which a lapsed plan allows\n * (§12.13), so it sees the lock as `COMMIT_EXCEPT_BILLING` does (`removal`). An option\n * after it RAISES it — a role grant, which every lock refuses (`every`), billing's with\n * its own reason. Kurvenschmiede's server refuses exactly that: a widening while lapsed,\n * not a narrowing (`shares_router.py:229-234`).\n *\n * A segmented choice is locked as a whole, so per grantee: under a demo's lock nothing\n * moves; under billing's, a grantee at the narrowest role has only raises (locked), one\n * at the widest only lowerings (live), and one in between keeps its lowerings while its\n * raises are dimmed and refused. A role the vocabulary does not list cannot be told\n * either way and stays locked.\n */\nfunction roleChoiceLock(index: number, count: number, every: WriteLock, removal: WriteLock): RoleChoiceLock {\n  if (removal.locked) return { group: removal.reason };\n  if (!every.locked) return {};\n  if (index <= 0) return { group: every.reason };\n  return index < count - 1 ? { raise: every.reason } : {};\n}\n\n/** The look of a raise refused while the lowerings beside it stay live — the dimmed\n *  segment of a locked group (ToggleGroup's `dimmed`), on that segment alone. */\nconst RAISE_REFUSED = \"cursor-not-allowed opacity-50 hover:bg-transparent dark:hover:bg-transparent\";\n\n/**\n * The body both forms share: the add form, then the list. Exported for an app that\n * frames it itself (a settings section, a sheet).\n */\nexport function SharePanel({\n  grantees,\n  roles,\n  pending = [],\n  candidates,\n  defaultRole,\n  onAdd,\n  onRoleChange,\n  onRemove,\n  onRevokePending,\n  addWithoutEmail = false,\n  caption,\n  intro,\n  loading = false,\n  error,\n  formatError,\n  readOnly = false,\n  autoFocus,\n  labels: labelsProp,\n}: SharePanelProps) {\n  // The `shareCard` namespace: prop > `<UiKitProvider labels>` > English.\n  const labels = useKitLabels(\"shareCard\", DEFAULT_SHARE_CARD_LABELS, labelsProp);\n  const locale = useKitLocale();\n  const confirm = useConfirm();\n  // Every commit below opts into the surrounding WriteLockProvider with `commit`; the\n  // role choices save on change, cannot take it, and read the lock themselves. Adding\n  // and raising a role see every lock (`lock`); removing access, withdrawing an\n  // invitation and lowering a role see it as a lapsed plan's lock allows them\n  // (`removal`, COMMIT_EXCEPT_BILLING; docs/billing-harmonization.md §12.13, §12.36).\n  const lock = useWriteLock();\n  const removal = useWriteLock(COMMIT_EXCEPT_BILLING);\n  const [email, setEmail] = useState(\"\");\n  // A candidate taken from the completion. Typing again lets it go: the field then\n  // names an address again, and a chosen team beside free text would be two answers\n  // to \"who\" (Kurvenschmiede's rule).\n  const [target, setTarget] = useState<ShareCandidate | null>(null);\n  const [newRole, setNewRole] = useState(defaultRole ?? roles[0]?.key ?? \"\");\n  const [invalid, setInvalid] = useState(false);\n  // One action at a time, for the whole panel: two in flight against one record's\n  // grants can answer out of order. The key says which control draws the spinner.\n  const [busy, setBusy] = useState<string | null>(null);\n  const [failure, setFailure] = useState<ReactNode>(null);\n\n  const roleOf = (key: string | undefined) => roles.find((r) => r.key === key);\n  const choosable = roles.length > 1;\n  const canAdd = !readOnly && onAdd !== undefined;\n  // Under a write lock the form's Share button gives the lock's sentence as a line (on\n  // touch and at Large). A row's remove or revoke icon then keeps it in its tooltip, as\n  // the role toggle beside it does, rather than repeat the same line under every row\n  // (0.32.1, the 360 px Extra-large sweep). Without the form the rows' lines are the\n  // only place it is said, so they stay — and ROW_CONTROLS wraps them.\n  const rowReason: DisabledReasonDisplay = canAdd ? \"tooltip\" : \"auto\";\n\n  const run = async (key: string, action: () => MaybePromise): Promise<boolean> => {\n    setBusy(key);\n    setFailure(null);\n    try {\n      await action();\n      return true;\n    } catch (caught) {\n      setFailure(formatError ? formatError(caught) : labels.failed);\n      return false;\n    } finally {\n      setBusy(null);\n    }\n  };\n\n  const address = email.trim();\n  const empty = !target && address === \"\";\n\n  const submit = async () => {\n    // Enter in the field is a commit too — the button's lock does not see it.\n    if (!onAdd || busy || lock.locked) return;\n    if (empty && !addWithoutEmail) return;\n    if (!target && address !== \"\" && !EMAIL_SHAPE.test(address)) {\n      setInvalid(true);\n      return;\n    }\n    const request: ShareAddRequest = {\n      email: target ? null : address || null,\n      candidate: target,\n      role: newRole,\n    };\n    if (await run(\"add\", () => onAdd(request))) {\n      setEmail(\"\");\n      setTarget(null);\n    }\n  };\n\n  const options: ComboOption<string>[] = (candidates ?? []).map((c) => ({\n    value: String(c.id),\n    label: c.name,\n    sublabel: c.kind === \"team\" ? labels.team : (c.email ?? undefined),\n    icon: c.icon ?? (c.kind === \"team\" ? <UsersRound className=\"size-4\" /> : undefined),\n  }));\n\n  // The completion is a convenience, not a search: an address that matches nobody is\n  // the ordinary case (somebody new), so no \"No results\" box opens over the field —\n  // and over its error. The same narrowing Autocomplete applies, asked first — folded as\n  // every kit list folds (DUP-5).\n  const needle = foldForSearch((target ? \"\" : email).trim(), locale);\n  const offers =\n    needle !== \"\" &&\n    options.some((o) => [o.label, o.sublabel ?? \"\"].some((s) => foldForSearch(s, locale).includes(needle)));\n\n  const captionNode = typeof caption === \"function\" ? caption(target) : caption;\n  const shownError = error ?? failure;\n  const nobody = grantees.length === 0 && pending.length === 0;\n\n  return (\n    <div className=\"space-y-3\">\n      {intro && <div className=\"text-xs text-muted\">{intro}</div>}\n\n      {canAdd && (\n        <div className=\"space-y-2\">\n          <div\n            className={cn(\"grid grid-cols-1 gap-2\", choosable && \"sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start\")}\n          >\n            <Autocomplete<string>\n              label={addWithoutEmail ? labels.emailOptional : labels.email}\n              placeholder={labels.emailPlaceholder}\n              value={target ? target.name : email}\n              options={options}\n              open={offers ? undefined : false}\n              fillOnSelect={false}\n              // eslint-disable-next-line jsx-a11y/no-autofocus -- a documented prop the caller opts into (off by default); the field never takes focus on its own.\n              autoFocus={autoFocus}\n              inputMode=\"email\"\n              autoComplete=\"off\"\n              autoCapitalize=\"none\"\n              spellCheck={false}\n              disabled={busy !== null}\n              error={invalid ? labels.invalidEmail : undefined}\n              onChange={(text) => {\n                setTarget(null);\n                setInvalid(false);\n                setFailure(null);\n                setEmail(text);\n              }}\n              onSelect={(option) => {\n                const chosen = (candidates ?? []).find((c) => String(c.id) === option.value);\n                if (!chosen) return;\n                setInvalid(false);\n                if (chosen.kind !== \"team\" && chosen.email) {\n                  setTarget(null);\n                  setEmail(chosen.email);\n                } else {\n                  setTarget(chosen);\n                  setEmail(\"\");\n                }\n              }}\n              onKeyDown={(event) => {\n                if (event.key === \"Enter\") void submit();\n              }}\n            />\n            {choosable && (\n              <ToggleGroup<string>\n                aria-label={labels.role}\n                options={roles.map((r) => ({ value: r.key, label: r.label }))}\n                value={newRole}\n                onChange={setNewRole}\n                disabled={busy !== null}\n                caption={roles.some((r) => r.description) ? (key: string) => roleOf(key)?.description : undefined}\n                // Level with the floating field beside it, as the two apps do by hand.\n                optionClassName=\"sm:min-h-10\"\n              />\n            )}\n          </div>\n          <div className=\"flex flex-wrap items-center justify-between gap-2\">\n            <div className=\"min-w-0 flex-1 basis-48 space-y-1\">\n              {target?.kind === \"team\" && <Caption>{labels.teamHint(target.name)}</Caption>}\n              {captionNode && <Caption as=\"div\">{captionNode}</Caption>}\n            </div>\n            <Button\n              variant=\"accent\"\n              commit\n              pending={busy === \"add\"}\n              disabled={busy !== null || (empty && !addWithoutEmail)}\n              onClick={() => void submit()}\n              className=\"ms-auto\"\n            >\n              <UserPlus className=\"size-4\" aria-hidden />\n              {labels.add}\n            </Button>\n          </div>\n        </div>\n      )}\n\n      {shownError && (\n        <AlertBanner tone=\"danger\" size=\"sm\">\n          {shownError}\n        </AlertBanner>\n      )}\n\n      {loading ? (\n        <div className=\"flex justify-center py-3\">\n          <Spinner label={labels.loading} />\n        </div>\n      ) : (\n        <div className=\"space-y-2\">\n          <SectionLabel as=\"h4\">{labels.whoHasAccess}</SectionLabel>\n          {nobody && <Caption>{labels.nobodyYet}</Caption>}\n          <ul className=\"divide-y divide-subtle\">\n            {grantees.map((g) => {\n              const editable = !readOnly && !g.locked;\n              const changeable = editable && onRoleChange !== undefined && choosable;\n              const key = `grantee:${g.id}`;\n              const rank = roles.findIndex((r) => r.key === g.role);\n              const roleLock = roleChoiceLock(rank, roles.length, lock, removal);\n              return (\n                <li key={key} className=\"space-y-1.5 py-2 first:pt-0 last:pb-0\">\n                  {/* Wraps rather than squeezes: on a phone the controls drop under\n                      the name, full row, instead of truncating it to a letter. */}\n                  <div className=\"flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5\">\n                    <div className=\"min-w-0 flex-1 basis-40\">\n                      <div className=\"flex min-w-0 items-center gap-1.5 text-sm font-medium text-primary\">\n                        {g.kind === \"team\" && <UsersRound className=\"size-4 shrink-0\" aria-hidden />}\n                        <span data-private className=\"truncate-until-large\">\n                          {g.name}\n                        </span>\n                        {!changeable && <ShareRoleChip role={roleOf(g.role)} />}\n                      </div>\n                      {(g.kind === \"team\" || g.email) && (\n                        <div data-private className=\"truncate-until-large text-xs text-muted\">\n                          {g.kind === \"team\" ? labels.team : g.email}\n                        </div>\n                      )}\n                    </div>\n                    {(changeable || (editable && onRemove)) && (\n                      <div className={ROW_CONTROLS}>\n                        {changeable && (\n                          <LockedRoleChoice reason={roleLock.group ?? roleLock.raise}>\n                            <ToggleGroup<string>\n                              size=\"sm\"\n                              aria-label={labels.roleOf(g.name)}\n                              options={roles.map((r, i) => ({\n                                value: r.key,\n                                label: r.label,\n                                className: roleLock.raise !== undefined && i > rank ? RAISE_REFUSED : undefined,\n                              }))}\n                              value={g.role}\n                              disabled={busy !== null || roleLock.group !== undefined}\n                              onChange={(next) => {\n                                if (next === g.role) return;\n                                // A raise under a lock that allows only lowerings: refused,\n                                // and the tooltip round the choice says why.\n                                if (roleLock.raise !== undefined && roles.findIndex((r) => r.key === next) > rank)\n                                  return;\n                                void run(`role:${g.id}`, () => onRoleChange(g, next));\n                              }}\n                            />\n                          </LockedRoleChoice>\n                        )}\n                        {editable && onRemove && (\n                          <IconButton\n                            tone=\"danger\"\n                            size=\"xs\"\n                            // Removing access: a lapsed plan allows it (§12.13).\n                            commit={COMMIT_EXCEPT_BILLING}\n                            label={labels.remove}\n                            // The icon alone at every text size (§10.8): the row's one\n                            // control beside its role toggle, where \"Remove access\" as\n                            // text at Large would not fit a 240 px row. It carries a\n                            // spinner and the write lock, which a \"⋯\" menu entry\n                            // cannot, and its confirmation names the action in words.\n                            labelVisible={false}\n                            disabledReasonDisplay={rowReason}\n                            pending={busy === key}\n                            disabled={busy !== null}\n                            onClick={async () => {\n                              const yes = await confirm({\n                                title: labels.removeConfirm(g.name),\n                                confirmLabel: labels.remove,\n                                tone: \"danger\",\n                              });\n                              if (yes) await run(key, () => onRemove(g));\n                            }}\n                          >\n                            <Trash2 />\n                          </IconButton>\n                        )}\n                      </div>\n                    )}\n                  </div>\n                  {g.extra}\n                </li>\n              );\n            })}\n            {pending.map((p) => {\n              const key = `pending:${p.id}`;\n              const name = p.email || labels.openInvite;\n              return (\n                <li key={key} className=\"py-2 first:pt-0 last:pb-0\">\n                  <div className=\"flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5\">\n                    <div className=\"min-w-0 flex-1 basis-40\">\n                      <div\n                        data-private={p.email ? true : undefined}\n                        className={cn(\"truncate-until-large text-sm\", p.email ? \"text-primary\" : \"text-muted\")}\n                      >\n                        {name}\n                      </div>\n                      <div className=\"mt-0.5 flex flex-wrap items-center gap-1\">\n                        <Chip size=\"sm\" shape=\"square\" tone=\"warning\" caps>\n                          {labels.pending}\n                        </Chip>\n                        <ShareRoleChip role={roleOf(p.role)} />\n                      </div>\n                    </div>\n                    {(p.link || (!readOnly && onRevokePending)) && (\n                      <div className={ROW_CONTROLS}>\n                        {p.link && <CopyButton size=\"xs\" tone=\"muted\" text={p.link} label={labels.copyLink} />}\n                        {!readOnly && onRevokePending && (\n                          <IconButton\n                            tone=\"danger\"\n                            size=\"xs\"\n                            // Withdrawing an invitation removes access too (§12.13).\n                            commit={COMMIT_EXCEPT_BILLING}\n                            label={labels.revokePending}\n                            // As the grantee's remove above: one action beside the\n                            // copy icon (which is an icon at every size), and the\n                            // confirmation says it in words.\n                            labelVisible={false}\n                            disabledReasonDisplay={rowReason}\n                            pending={busy === key}\n                            disabled={busy !== null}\n                            onClick={async () => {\n                              const yes = await confirm({\n                                title: labels.revokePendingConfirm(name),\n                                confirmLabel: labels.revokePending,\n                                tone: \"danger\",\n                              });\n                              if (yes) await run(key, () => onRevokePending(p));\n                            }}\n                          >\n                            <Trash2 />\n                          </IconButton>\n                        )}\n                      </div>\n                    )}\n                  </div>\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ── The two frames ────────────────────────────────────────────────────────────\n\nexport interface ShareCardProps extends SharePanelProps {\n  /** A heading over the card. */\n  title?: ReactNode;\n  /** The Card's variant. Default `outline` — a block inside a section, as keksdose's\n   *  card under a budget row is. */\n  variant?: CardProps[\"variant\"];\n  className?: string;\n}\n\n/** {@link SharePanel} in a card — keksdose's inline form, under the row it shares. */\nexport function ShareCard({ title, variant = \"outline\", className, ...panel }: ShareCardProps) {\n  return (\n    <Card variant={variant} padding=\"sm\" className={cn(\"space-y-3\", className)}>\n      {title && <h3 className=\"text-sm font-semibold text-primary\">{title}</h3>}\n      <SharePanel {...panel} />\n    </Card>\n  );\n}\n\nexport interface ShareDialogProps\n  extends SharePanelProps, Pick<DialogFrameProps, \"open\" | \"onClose\" | \"size\" | \"className\"> {\n  /** The heading. Default {@link ShareCardLabels.dialogTitle}. */\n  title?: ReactNode;\n  /** Under the heading — what is being shared (Kurvenschmiede passes its name). */\n  description?: ReactNode;\n}\n\n/**\n * {@link SharePanel} in the kit's {@link DialogFrame} with a Close button —\n * Kurvenschmiede's form. Sharing commits as it goes, so there is nothing to save or\n * cancel: Close is the only action.\n */\nexport function ShareDialog({ open, onClose, size, className, title, description, ...panel }: ShareDialogProps) {\n  const labels = useKitLabels(\"shareCard\", DEFAULT_SHARE_CARD_LABELS, panel.labels);\n  return (\n    <DialogFrame\n      open={open}\n      onClose={onClose}\n      size={size}\n      className={className}\n      title={title ?? labels.dialogTitle}\n      description={description}\n      actions={(close) => (\n        <Button variant=\"secondary\" onClick={close}>\n          {labels.close}\n        </Button>\n      )}\n    >\n      <SharePanel {...panel} />\n    </DialogFrame>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/share-card.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Trash2, UserPlus, UsersRound } from \"lucide-react\";\n\nimport { useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { matchesSearch, searchWords } from \"../lib/text-match\";\nimport { AlertBanner } from \"./alert-banner\";\nimport { Autocomplete } from \"./autocomplete\";\nimport type { ComboOption } from \"./combobox-core\";\nimport { Chip } from \"./chip\";\nimport { RoleChip } from \"./account-chips\";\nimport type { RoleDefinition } from \"./account-chips\";\nimport { useConfirm } from \"./confirm-dialog\";\nimport { CopyButton } from \"./copy-button\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport type { DialogFrameProps } from \"./dialog-frame\";\nimport { Caption, SectionLabel } from \"./text\";\nimport { ToggleGroup } from \"./toggle-group\";\nimport { Tooltip } from \"./tooltip\";\nimport { Button } from \"./button\";\nimport { Card } from \"./card\";\nimport { IconButton } from \"./icon-button\";\nimport { Spinner } from \"./spinner\";\nimport { COMMIT_EXCEPT_BILLING, useWriteLock } from \"./write-lock\";\nimport type { WriteLock } from \"./write-lock\";\nimport type { CardProps } from \"./card\";\nimport type { DisabledReasonDisplay } from \"./field-parts\";\nimport { DEFAULT_SHARE_CARD_LABELS } from \"./share-card-labels\";\n\n/**\n * Who holds one record, and the owner's every way of changing that — Kurvenschmiede's\n * `features/sharing/share-dialog.tsx` and keksdose's `features/budgets/budget-share-card.tsx`,\n * which are the same component twice (Kurvenschmiede's own doc comment says so).\n *\n * Presentational: the kit draws the rows, asks before a removal (the kit's\n * {@link useConfirm}), keeps the field and the busy state, and checks only that an\n * address is SHAPED like one. Everything that is policy stays with the app — who may\n * share, whether an address has an account (that is what makes a grant pending), what\n * a role permits, every request — through the callbacks, which may return a promise.\n */\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\nexport interface ShareCardLabels {\n  /** ShareDialog's heading. */\n  dialogTitle: string;\n  /** ShareDialog's close button. */\n  close: string;\n  /** The add field's label. */\n  email: string;\n  /** The add field's label when `addWithoutEmail` lets it stay empty. */\n  emailOptional: string;\n  emailPlaceholder: string;\n  /** Under the field when what was typed is not an address. */\n  invalidEmail: string;\n  /** Accessible name of the role choice beside the field. */\n  role: string;\n  /** Accessible name of one grantee's role choice. */\n  roleOf: (name: string) => string;\n  /** The add button. */\n  add: string;\n  /** Heading over the list. */\n  whoHasAccess: string;\n  /** The list is empty. */\n  nobodyYet: string;\n  /** Chip on a grant whose address has no account yet. */\n  pending: string;\n  /** A pending grant with no address — a link anybody holding it can redeem. */\n  openInvite: string;\n  copyLink: string;\n  /** A candidate that is a team (its sublabel, and the line under a team row). */\n  team: string;\n  /** Under the field while a team is the one named. */\n  teamHint: (name: string) => string;\n  /** The remove button on a grantee. */\n  remove: string;\n  removeConfirm: (name: string) => string;\n  /** The remove button on a pending grant. */\n  revokePending: string;\n  revokePendingConfirm: (name: string) => string;\n  /** A callback rejected and no `formatError` says better. */\n  failed: string;\n  /** Shown while `loading`. */\n  loading: string;\n}\n\n// Defined in ./share-card-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_SHARE_CARD_LABELS };\n\n// ── Data shapes ───────────────────────────────────────────────────────────────\n\n/**\n * One role of the app's vocabulary: Kurvenschmiede's viewer/editor, keksdose's guest.\n *\n * The admin roster's {@link RoleDefinition} (label, tone, icon) plus the key it is\n * filed under — an ARRAY here rather than the keyed `RoleVocabulary` record,\n * because the order is the order of the role choice's segments.\n */\nexport type ShareRole = RoleDefinition & {\n  key: string;\n  /** What the role allows — under the role choice once chosen, and the chip's tooltip. */\n  description?: string;\n};\n\n/** Somebody (or a team) who holds the record now. */\nexport interface ShareGrantee {\n  id: string | number;\n  name: string;\n  /** The second line. A team row says {@link ShareCardLabels.team} instead. */\n  email?: string | null;\n  /** A {@link ShareRole.key}. */\n  role: string;\n  /** `team`: the grant reaches everybody in it (Kurvenschmiede). Default `person`. */\n  kind?: \"person\" | \"team\";\n  /** Shown, but neither its role nor its access can be changed here (an owner row). */\n  locked?: boolean;\n  /** The app's own line under the row — keksdose's per-guest key delivery. */\n  extra?: ReactNode;\n}\n\n/** A grant waiting for its address to have an account — or, with no address, an\n *  open invite link (keksdose). */\nexport interface SharePendingGrant {\n  id: string | number;\n  email?: string | null;\n  /** A {@link ShareRole.key}; left out when the app has only one role. */\n  role?: string;\n  /** The invite link, offered with a copy button. */\n  link?: string;\n}\n\n/** A completion offered while typing: a past grantee, or one of the sharer's teams. */\nexport interface ShareCandidate {\n  id: string | number;\n  name: string;\n  /** A person's address: taking the row fills the field with it, and the grant is\n   *  then an ordinary address grant. */\n  email?: string | null;\n  /** `team` (or a person with no address): taking the row names THIS candidate, and\n   *  `onAdd` receives it instead of an address. */\n  kind?: \"person\" | \"team\";\n  icon?: ReactNode;\n}\n\n/** What the add button asks for. Exactly one of `email` / `candidate` is set, except\n *  under `addWithoutEmail`, where both may be null (an open invite). */\nexport interface ShareAddRequest {\n  email: string | null;\n  candidate: ShareCandidate | null;\n  /** A {@link ShareRole.key}. */\n  role: string;\n}\n\ntype MaybePromise = void | Promise<unknown>;\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\nexport interface SharePanelProps {\n  grantees: ShareGrantee[];\n  /** The role vocabulary, in display order, NARROWEST FIRST — viewer, then editor, as\n   *  Kurvenschmiede lists them. One role: no choice is offered and each row shows its\n   *  chip. The order is what tells a lowering from a raise under a write lock: a lapsed\n   *  plan lets a grantee's role be lowered, which removes access, and never raised\n   *  (docs/billing-harmonization.md decision 26 as amended, §12.36). */\n  roles: ShareRole[];\n  pending?: SharePendingGrant[];\n  /** Completions for the field. Left out: the field is a plain address field. */\n  candidates?: ShareCandidate[];\n  /** The role a new grant starts with. Default: the first of `roles`. */\n  defaultRole?: string;\n  /** Resolve to clear the field; reject to keep it and show the error. Left out (or\n   *  `readOnly`): no add form. */\n  onAdd?: (request: ShareAddRequest) => MaybePromise;\n  /** Left out: roles are shown as chips. */\n  onRoleChange?: (grantee: ShareGrantee, role: string) => MaybePromise;\n  /** Called after the kit's confirm. Left out: no remove button. */\n  onRemove?: (grantee: ShareGrantee) => MaybePromise;\n  /** Called after the kit's confirm. Left out: no withdraw button. */\n  onRevokePending?: (grant: SharePendingGrant) => MaybePromise;\n  /** keksdose: an empty field is a request too — an invite link with no address. */\n  addWithoutEmail?: boolean;\n  /** Under the add field: whatever the app needs said there (Kurvenschmiede's \"your\n   *  pending grant does not let anybody register\"). A function receives the taken\n   *  candidate, so it can say something else while a team is named. */\n  caption?: ReactNode | ((candidate: ShareCandidate | null) => ReactNode);\n  /** Above everything — what sharing means here (keksdose's guest explanation). */\n  intro?: ReactNode;\n  /** The list is being fetched: a spinner instead of the rows. */\n  loading?: boolean;\n  /** The app's own error, shown in the error box (wins over a caught rejection). */\n  error?: ReactNode;\n  /** Turns a callback's rejection into words. Default {@link ShareCardLabels.failed}. */\n  formatError?: (error: unknown) => ReactNode;\n  /** Look, do not touch: no form, chips for roles, no remove buttons. Copying an\n   *  invite link still works. */\n  readOnly?: boolean;\n  /** Focus the field on mount — a dialog that exists to add somebody. */\n  autoFocus?: boolean;\n  labels?: LabelOverride<ShareCardLabels>;\n}\n\n// Shape only. Whether the address exists, is allowed, or is the sharer's own is the\n// app's question — the field must never become a way to probe for accounts.\nconst EMAIL_SHAPE = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\n/** The kit's {@link RoleChip}, so a role looks the same here as in the admin roster,\n *  with the role's description in a tooltip. */\nfunction ShareRoleChip({ role }: { role: ShareRole | undefined }) {\n  if (!role) return null;\n  const chip = <RoleChip value={role.key} roles={{ [role.key]: role }} />;\n  return role.description ? <Tooltip label={role.description}>{chip}</Tooltip> : chip;\n}\n\n/**\n * A row's controls: the role toggle and the remove icon, or a pending grant's copy and\n * revoke. Held to the row and wrapping inside it (0.32.1, the 360 px Extra-large sweep;\n * docs/text-size-harmonization.md §4 \"nothing overflows\"): under a write lock on a touch\n * screen or at Large the remove icon gives its reason as a line under it, up to 20rem\n * wide, and a `shrink-0` box ran 31 px past a 390 px phone at Normal and 269 px past a\n * 360 px one at Extra large. Where the controls fit in one row, nothing changes.\n */\nconst ROW_CONTROLS = \"ms-auto flex min-w-0 max-w-full flex-wrap items-center justify-end gap-1\";\n\n/**\n * A row's role choice saves on change, so it is a commit that cannot take `commit`:\n * under a write lock it is disabled, and the lock's reason is put in the kit Tooltip\n * around it — the same sentence the locked buttons beside it give.\n */\nfunction LockedRoleChoice({ reason, children }: { reason: ReactNode; children: ReactNode }) {\n  return reason === undefined ? children : <Tooltip label={reason}>{children}</Tooltip>;\n}\n\n/** What a grantee's role choice may do under the write lock: `group` locks the whole\n *  choice with that reason; `raise` leaves it live for a lowering and refuses a raise\n *  with that reason. Neither: the choice is free. */\ninterface RoleChoiceLock {\n  group?: ReactNode;\n  raise?: ReactNode;\n}\n\n/**\n * A grantee's role choice under the write lock (decision 26 as amended,\n * docs/billing-harmonization.md §12.36). `roles` is read narrowest first, so an option\n * before the grantee's role LOWERS it: that removes access, which a lapsed plan allows\n * (§12.13), so it sees the lock as `COMMIT_EXCEPT_BILLING` does (`removal`). An option\n * after it RAISES it — a role grant, which every lock refuses (`every`), billing's with\n * its own reason. Kurvenschmiede's server refuses exactly that: a widening while lapsed,\n * not a narrowing (`shares_router.py:229-234`).\n *\n * A segmented choice is locked as a whole, so per grantee: under a demo's lock nothing\n * moves; under billing's, a grantee at the narrowest role has only raises (locked), one\n * at the widest only lowerings (live), and one in between keeps its lowerings while its\n * raises are dimmed and refused. A role the vocabulary does not list cannot be told\n * either way and stays locked.\n */\nfunction roleChoiceLock(index: number, count: number, every: WriteLock, removal: WriteLock): RoleChoiceLock {\n  if (removal.locked) return { group: removal.reason };\n  if (!every.locked) return {};\n  if (index <= 0) return { group: every.reason };\n  return index < count - 1 ? { raise: every.reason } : {};\n}\n\n/** The look of a raise refused while the lowerings beside it stay live — the dimmed\n *  segment of a locked group (ToggleGroup's `dimmed`), on that segment alone. */\nconst RAISE_REFUSED = \"cursor-not-allowed opacity-50 hover:bg-transparent dark:hover:bg-transparent\";\n\n/**\n * The body both forms share: the add form, then the list. Exported for an app that\n * frames it itself (a settings section, a sheet).\n */\nexport function SharePanel({\n  grantees,\n  roles,\n  pending = [],\n  candidates,\n  defaultRole,\n  onAdd,\n  onRoleChange,\n  onRemove,\n  onRevokePending,\n  addWithoutEmail = false,\n  caption,\n  intro,\n  loading = false,\n  error,\n  formatError,\n  readOnly = false,\n  autoFocus,\n  labels: labelsProp,\n}: SharePanelProps) {\n  // The `shareCard` namespace: prop > `<UiKitProvider labels>` > English.\n  const labels = useKitLabels(\"shareCard\", DEFAULT_SHARE_CARD_LABELS, labelsProp);\n  const locale = useKitLocale();\n  const confirm = useConfirm();\n  // Every commit below opts into the surrounding WriteLockProvider with `commit`; the\n  // role choices save on change, cannot take it, and read the lock themselves. Adding\n  // and raising a role see every lock (`lock`); removing access, withdrawing an\n  // invitation and lowering a role see it as a lapsed plan's lock allows them\n  // (`removal`, COMMIT_EXCEPT_BILLING; docs/billing-harmonization.md §12.13, §12.36).\n  const lock = useWriteLock();\n  const removal = useWriteLock(COMMIT_EXCEPT_BILLING);\n  const [email, setEmail] = useState(\"\");\n  // A candidate taken from the completion. Typing again lets it go: the field then\n  // names an address again, and a chosen team beside free text would be two answers\n  // to \"who\" (Kurvenschmiede's rule).\n  const [target, setTarget] = useState<ShareCandidate | null>(null);\n  const [newRole, setNewRole] = useState(defaultRole ?? roles[0]?.key ?? \"\");\n  const [invalid, setInvalid] = useState(false);\n  // One action at a time, for the whole panel: two in flight against one record's\n  // grants can answer out of order. The key says which control draws the spinner.\n  const [busy, setBusy] = useState<string | null>(null);\n  const [failure, setFailure] = useState<ReactNode>(null);\n\n  const roleOf = (key: string | undefined) => roles.find((r) => r.key === key);\n  const choosable = roles.length > 1;\n  const canAdd = !readOnly && onAdd !== undefined;\n  // Under a write lock the form's Share button gives the lock's sentence as a line (on\n  // touch and at Large). A row's remove or revoke icon then keeps it in its tooltip, as\n  // the role toggle beside it does, rather than repeat the same line under every row\n  // (0.32.1, the 360 px Extra-large sweep). Without the form the rows' lines are the\n  // only place it is said, so they stay — and ROW_CONTROLS wraps them.\n  const rowReason: DisabledReasonDisplay = canAdd ? \"tooltip\" : \"auto\";\n\n  const run = async (key: string, action: () => MaybePromise): Promise<boolean> => {\n    setBusy(key);\n    setFailure(null);\n    try {\n      await action();\n      return true;\n    } catch (caught) {\n      setFailure(formatError ? formatError(caught) : labels.failed);\n      return false;\n    } finally {\n      setBusy(null);\n    }\n  };\n\n  const address = email.trim();\n  const empty = !target && address === \"\";\n\n  const submit = async () => {\n    // Enter in the field is a commit too — the button's lock does not see it.\n    if (!onAdd || busy || lock.locked) return;\n    if (empty && !addWithoutEmail) return;\n    if (!target && address !== \"\" && !EMAIL_SHAPE.test(address)) {\n      setInvalid(true);\n      return;\n    }\n    const request: ShareAddRequest = {\n      email: target ? null : address || null,\n      candidate: target,\n      role: newRole,\n    };\n    if (await run(\"add\", () => onAdd(request))) {\n      setEmail(\"\");\n      setTarget(null);\n    }\n  };\n\n  const options: ComboOption<string>[] = (candidates ?? []).map((c) => ({\n    value: String(c.id),\n    label: c.name,\n    sublabel: c.kind === \"team\" ? labels.team : (c.email ?? undefined),\n    icon: c.icon ?? (c.kind === \"team\" ? <UsersRound className=\"size-4\" /> : undefined),\n  }));\n\n  // The completion is a convenience, not a search: an address that matches nobody is\n  // the ordinary case (somebody new), so no \"No results\" box opens over the field —\n  // and over its error. The same narrowing Autocomplete applies, asked first — folded as\n  // every kit list folds (DUP-5), and word by word as its list matches since 0.51.4\n  // (refactor audit 2026-10-30, DUP-4): \"weber jonas\" kept the list shut over a\n  // candidate the list itself would have shown.\n  const words = searchWords(target ? \"\" : email, locale);\n  const offers = words.length > 0 && options.some((o) => matchesSearch(words, [o.label, o.sublabel], locale));\n\n  const captionNode = typeof caption === \"function\" ? caption(target) : caption;\n  const shownError = error ?? failure;\n  const nobody = grantees.length === 0 && pending.length === 0;\n\n  return (\n    <div className=\"space-y-3\">\n      {intro && <div className=\"text-xs text-muted\">{intro}</div>}\n\n      {canAdd && (\n        <div className=\"space-y-2\">\n          <div\n            className={cn(\"grid grid-cols-1 gap-2\", choosable && \"sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start\")}\n          >\n            <Autocomplete<string>\n              label={addWithoutEmail ? labels.emailOptional : labels.email}\n              placeholder={labels.emailPlaceholder}\n              value={target ? target.name : email}\n              options={options}\n              open={offers ? undefined : false}\n              fillOnSelect={false}\n              // eslint-disable-next-line jsx-a11y/no-autofocus -- a documented prop the caller opts into (off by default); the field never takes focus on its own.\n              autoFocus={autoFocus}\n              inputMode=\"email\"\n              autoComplete=\"off\"\n              autoCapitalize=\"none\"\n              spellCheck={false}\n              disabled={busy !== null}\n              error={invalid ? labels.invalidEmail : undefined}\n              onChange={(text) => {\n                setTarget(null);\n                setInvalid(false);\n                setFailure(null);\n                setEmail(text);\n              }}\n              onSelect={(option) => {\n                const chosen = (candidates ?? []).find((c) => String(c.id) === option.value);\n                if (!chosen) return;\n                setInvalid(false);\n                if (chosen.kind !== \"team\" && chosen.email) {\n                  setTarget(null);\n                  setEmail(chosen.email);\n                } else {\n                  setTarget(chosen);\n                  setEmail(\"\");\n                }\n              }}\n              onKeyDown={(event) => {\n                if (event.key === \"Enter\") void submit();\n              }}\n            />\n            {choosable && (\n              <ToggleGroup<string>\n                aria-label={labels.role}\n                options={roles.map((r) => ({ value: r.key, label: r.label }))}\n                value={newRole}\n                onChange={setNewRole}\n                disabled={busy !== null}\n                caption={roles.some((r) => r.description) ? (key: string) => roleOf(key)?.description : undefined}\n                // Level with the floating field beside it, as the two apps do by hand.\n                optionClassName=\"sm:min-h-10\"\n              />\n            )}\n          </div>\n          <div className=\"flex flex-wrap items-center justify-between gap-2\">\n            <div className=\"min-w-0 flex-1 basis-48 space-y-1\">\n              {target?.kind === \"team\" && <Caption>{labels.teamHint(target.name)}</Caption>}\n              {captionNode && <Caption as=\"div\">{captionNode}</Caption>}\n            </div>\n            <Button\n              variant=\"accent\"\n              commit\n              pending={busy === \"add\"}\n              disabled={busy !== null || (empty && !addWithoutEmail)}\n              onClick={() => void submit()}\n              className=\"ms-auto\"\n            >\n              <UserPlus className=\"size-4\" aria-hidden />\n              {labels.add}\n            </Button>\n          </div>\n        </div>\n      )}\n\n      {shownError && (\n        <AlertBanner tone=\"danger\" size=\"sm\">\n          {shownError}\n        </AlertBanner>\n      )}\n\n      {loading ? (\n        <div className=\"flex justify-center py-3\">\n          <Spinner label={labels.loading} />\n        </div>\n      ) : (\n        <div className=\"space-y-2\">\n          <SectionLabel as=\"h4\">{labels.whoHasAccess}</SectionLabel>\n          {nobody && <Caption>{labels.nobodyYet}</Caption>}\n          <ul className=\"divide-y divide-subtle\">\n            {grantees.map((g) => {\n              const editable = !readOnly && !g.locked;\n              const changeable = editable && onRoleChange !== undefined && choosable;\n              const key = `grantee:${g.id}`;\n              const rank = roles.findIndex((r) => r.key === g.role);\n              const roleLock = roleChoiceLock(rank, roles.length, lock, removal);\n              return (\n                <li key={key} className=\"space-y-1.5 py-2 first:pt-0 last:pb-0\">\n                  {/* Wraps rather than squeezes: on a phone the controls drop under\n                      the name, full row, instead of truncating it to a letter. */}\n                  <div className=\"flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5\">\n                    <div className=\"min-w-0 flex-1 basis-40\">\n                      <div className=\"flex min-w-0 items-center gap-1.5 text-sm font-medium text-primary\">\n                        {g.kind === \"team\" && <UsersRound className=\"size-4 shrink-0\" aria-hidden />}\n                        <span data-private className=\"truncate-until-large\">\n                          {g.name}\n                        </span>\n                        {!changeable && <ShareRoleChip role={roleOf(g.role)} />}\n                      </div>\n                      {(g.kind === \"team\" || g.email) && (\n                        <div data-private className=\"truncate-until-large text-xs text-muted\">\n                          {g.kind === \"team\" ? labels.team : g.email}\n                        </div>\n                      )}\n                    </div>\n                    {(changeable || (editable && onRemove)) && (\n                      <div className={ROW_CONTROLS}>\n                        {changeable && (\n                          <LockedRoleChoice reason={roleLock.group ?? roleLock.raise}>\n                            <ToggleGroup<string>\n                              size=\"sm\"\n                              aria-label={labels.roleOf(g.name)}\n                              options={roles.map((r, i) => ({\n                                value: r.key,\n                                label: r.label,\n                                className: roleLock.raise !== undefined && i > rank ? RAISE_REFUSED : undefined,\n                              }))}\n                              value={g.role}\n                              disabled={busy !== null || roleLock.group !== undefined}\n                              onChange={(next) => {\n                                if (next === g.role) return;\n                                // A raise under a lock that allows only lowerings: refused,\n                                // and the tooltip round the choice says why.\n                                if (roleLock.raise !== undefined && roles.findIndex((r) => r.key === next) > rank)\n                                  return;\n                                void run(`role:${g.id}`, () => onRoleChange(g, next));\n                              }}\n                            />\n                          </LockedRoleChoice>\n                        )}\n                        {editable && onRemove && (\n                          <IconButton\n                            tone=\"danger\"\n                            size=\"xs\"\n                            // Removing access: a lapsed plan allows it (§12.13).\n                            commit={COMMIT_EXCEPT_BILLING}\n                            label={labels.remove}\n                            // The icon alone at every text size (§10.8): the row's one\n                            // control beside its role toggle, where \"Remove access\" as\n                            // text at Large would not fit a 240 px row. It carries a\n                            // spinner and the write lock, which a \"⋯\" menu entry\n                            // cannot, and its confirmation names the action in words.\n                            labelVisible={false}\n                            disabledReasonDisplay={rowReason}\n                            pending={busy === key}\n                            disabled={busy !== null}\n                            onClick={async () => {\n                              const yes = await confirm({\n                                title: labels.removeConfirm(g.name),\n                                confirmLabel: labels.remove,\n                                tone: \"danger\",\n                              });\n                              if (yes) await run(key, () => onRemove(g));\n                            }}\n                          >\n                            <Trash2 />\n                          </IconButton>\n                        )}\n                      </div>\n                    )}\n                  </div>\n                  {g.extra}\n                </li>\n              );\n            })}\n            {pending.map((p) => {\n              const key = `pending:${p.id}`;\n              const name = p.email || labels.openInvite;\n              return (\n                <li key={key} className=\"py-2 first:pt-0 last:pb-0\">\n                  <div className=\"flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5\">\n                    <div className=\"min-w-0 flex-1 basis-40\">\n                      <div\n                        data-private={p.email ? true : undefined}\n                        className={cn(\"truncate-until-large text-sm\", p.email ? \"text-primary\" : \"text-muted\")}\n                      >\n                        {name}\n                      </div>\n                      <div className=\"mt-0.5 flex flex-wrap items-center gap-1\">\n                        <Chip size=\"sm\" shape=\"square\" tone=\"warning\" caps>\n                          {labels.pending}\n                        </Chip>\n                        <ShareRoleChip role={roleOf(p.role)} />\n                      </div>\n                    </div>\n                    {(p.link || (!readOnly && onRevokePending)) && (\n                      <div className={ROW_CONTROLS}>\n                        {p.link && <CopyButton size=\"xs\" tone=\"muted\" text={p.link} label={labels.copyLink} />}\n                        {!readOnly && onRevokePending && (\n                          <IconButton\n                            tone=\"danger\"\n                            size=\"xs\"\n                            // Withdrawing an invitation removes access too (§12.13).\n                            commit={COMMIT_EXCEPT_BILLING}\n                            label={labels.revokePending}\n                            // As the grantee's remove above: one action beside the\n                            // copy icon (which is an icon at every size), and the\n                            // confirmation says it in words.\n                            labelVisible={false}\n                            disabledReasonDisplay={rowReason}\n                            pending={busy === key}\n                            disabled={busy !== null}\n                            onClick={async () => {\n                              const yes = await confirm({\n                                title: labels.revokePendingConfirm(name),\n                                confirmLabel: labels.revokePending,\n                                tone: \"danger\",\n                              });\n                              if (yes) await run(key, () => onRevokePending(p));\n                            }}\n                          >\n                            <Trash2 />\n                          </IconButton>\n                        )}\n                      </div>\n                    )}\n                  </div>\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ── The two frames ────────────────────────────────────────────────────────────\n\nexport interface ShareCardProps extends SharePanelProps {\n  /** A heading over the card. */\n  title?: ReactNode;\n  /** The Card's variant. Default `outline` — a block inside a section, as keksdose's\n   *  card under a budget row is. */\n  variant?: CardProps[\"variant\"];\n  className?: string;\n}\n\n/** {@link SharePanel} in a card — keksdose's inline form, under the row it shares. */\nexport function ShareCard({ title, variant = \"outline\", className, ...panel }: ShareCardProps) {\n  return (\n    <Card variant={variant} padding=\"sm\" className={cn(\"space-y-3\", className)}>\n      {title && <h3 className=\"text-sm font-semibold text-primary\">{title}</h3>}\n      <SharePanel {...panel} />\n    </Card>\n  );\n}\n\nexport interface ShareDialogProps\n  extends SharePanelProps, Pick<DialogFrameProps, \"open\" | \"onClose\" | \"size\" | \"className\"> {\n  /** The heading. Default {@link ShareCardLabels.dialogTitle}. */\n  title?: ReactNode;\n  /** Under the heading — what is being shared (Kurvenschmiede passes its name). */\n  description?: ReactNode;\n}\n\n/**\n * {@link SharePanel} in the kit's {@link DialogFrame} with a Close button —\n * Kurvenschmiede's form. Sharing commits as it goes, so there is nothing to save or\n * cancel: Close is the only action.\n */\nexport function ShareDialog({ open, onClose, size, className, title, description, ...panel }: ShareDialogProps) {\n  const labels = useKitLabels(\"shareCard\", DEFAULT_SHARE_CARD_LABELS, panel.labels);\n  return (\n    <DialogFrame\n      open={open}\n      onClose={onClose}\n      size={size}\n      className={className}\n      title={title ?? labels.dialogTitle}\n      description={description}\n      actions={(close) => (\n        <Button variant=\"secondary\" onClick={close}>\n          {labels.close}\n        </Button>\n      )}\n    >\n      <SharePanel {...panel} />\n    </DialogFrame>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/sign-chip-labels.d.ts

@@ -1,2 +1,3 @@
 import type { SignChipLabels } from "./sign-chip.js";
+/** @deprecated 0.52 — a `Chip` of your own, as keksdose's DirectionToggle is (MOD-5); removed in 0.53. */
 export declare const DEFAULT_SIGN_CHIP_LABELS: SignChipLabels;

package/dist/components/sign-chip-labels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/sign-chip-labels.ts"],"sourcesContent":["// The English words of ./sign-chip, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./sign-chip re-exports them.\n\nimport type { SignChipLabels } from \"./sign-chip\";\n\nexport const DEFAULT_SIGN_CHIP_LABELS: SignChipLabels = {\n  outflow: \"Outflow\",\n  inflow: \"Inflow\",\n  direction: (current, next) => `Direction: ${current} — switch to ${next}`,\n  switchTo: (next) => `Switch to ${next}`,\n};\n"],"mappings":";AAMO,MAAM,2BAA2C;AAAA,EACtD,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW,CAAC,SAAS,SAAS,cAAc,OAAO,qBAAgB,IAAI;AAAA,EACvE,UAAU,CAAC,SAAS,aAAa,IAAI;AACvC;","names":[]}
+{"version":3,"sources":["../../src/components/sign-chip-labels.ts"],"sourcesContent":["// The English words of ./sign-chip, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./sign-chip re-exports them.\n\nimport type { SignChipLabels } from \"./sign-chip\";\n\n/** @deprecated 0.52 — a `Chip` of your own, as keksdose's DirectionToggle is (MOD-5); removed in 0.53. */\nexport const DEFAULT_SIGN_CHIP_LABELS: SignChipLabels = {\n  outflow: \"Outflow\",\n  inflow: \"Inflow\",\n  direction: (current, next) => `Direction: ${current} — switch to ${next}`,\n  switchTo: (next) => `Switch to ${next}`,\n};\n"],"mappings":";AAOO,MAAM,2BAA2C;AAAA,EACtD,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW,CAAC,SAAS,SAAS,cAAc,OAAO,qBAAgB,IAAI;AAAA,EACvE,UAAU,CAAC,SAAS,aAAa,IAAI;AACvC;","names":[]}

package/dist/components/sign-chip.d.ts

@@ -1,7 +1,9 @@
 import { type LabelOverride } from "../i18n/kit-labels.js";
 import { DEFAULT_SIGN_CHIP_LABELS } from "./sign-chip-labels.js";
 /** The words a {@link SignChip} says — the `signChip` namespace of
- *  `<UiKitProvider labels>`, and per chip through its `labels` prop. */
+ *  `<UiKitProvider labels>`, and per chip through its `labels` prop.
+ *
+ * @deprecated 0.52 — a `Chip` of your own, as keksdose's DirectionToggle is (MOD-5); removed in 0.53. */
 export interface SignChipLabels {
     /** The chip's text while the figure is negative — money going out. */
     outflow: string;
@@ -17,6 +19,7 @@ export interface SignChipLabels {
     switchTo: (next: string) => string;
 }
 export { DEFAULT_SIGN_CHIP_LABELS };
+/** @deprecated 0.52 — a `Chip` of your own, as keksdose's DirectionToggle is (MOD-5); removed in 0.53. */
 export interface SignChipProps {
     /** The figure is negative (an outflow) — the same flag {@link AmountInput}'s
      *  `negative` is, so one state feeds both: `<AmountInput negative={neg}
@@ -64,5 +67,11 @@ export interface SignChipProps {
  * to own the row the two share, and every form lays that row out differently (beside
  * the figure on a phone, in a grid column on a desktop). The chip is the part that was
  * being re-written; the row stays the form's.
+ *
+ * Deprecated in 0.52, removed in 0.53 (decision 4 of the refactor audit 2026-10-30,
+ * MOD-5): keksdose, whose chip this was (K15), kept its own `DirectionToggle` on `Chip`
+ * and `Tooltip`, and no other app renders one.
+ *
+ * @deprecated 0.52 — a `Chip` of your own, as keksdose's DirectionToggle is (MOD-5); removed in 0.53.
  */
 export declare function SignChip({ negative, onNegativeChange, disabled, labels: labelsProp, className }: SignChipProps): import("react").JSX.Element;

package/dist/components/sign-chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/sign-chip.tsx"],"sourcesContent":["import { ArrowUpDown, Minus, Plus } from \"lucide-react\";\nimport { Chip } from \"./chip\";\nimport { Tooltip } from \"./tooltip\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { useLargeText } from \"../hooks/use-large-text\";\nimport { DEFAULT_SIGN_CHIP_LABELS } from \"./sign-chip-labels\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The words a {@link SignChip} says — the `signChip` namespace of\n *  `<UiKitProvider labels>`, and per chip through its `labels` prop. */\nexport interface SignChipLabels {\n  /** The chip's text while the figure is negative — money going out. */\n  outflow: string;\n  /** The chip's text while the figure is positive — money coming in. */\n  inflow: string;\n  /** The chip's accessible name and its tooltip: the state it is in, and what a press\n   *  turns it into — `current` and `next` are the two words above. The other option is\n   *  nowhere on screen to be read, so the name has to say both. */\n  direction: (current: string, next: string) => string;\n  /** 0.32: what a press does, in words under the chip at Large and Extra large —\n   *  `next` is the other direction's word (\"Switch to Inflow\"). The tooltip's half of\n   *  `direction`, shown, since a fact may not live only in a tooltip there (§4). */\n  switchTo: (next: string) => string;\n}\n\n// Defined in ./sign-chip-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_SIGN_CHIP_LABELS };\n\nexport interface SignChipProps {\n  /** The figure is negative (an outflow) — the same flag {@link AmountInput}'s\n   *  `negative` is, so one state feeds both: `<AmountInput negative={neg}\n   *  onNegativeChange={setNeg} />` and `<SignChip negative={neg}\n   *  onNegativeChange={setNeg} />`. */\n  negative: boolean;\n  /** A press: the other direction. */\n  onNegativeChange: (negative: boolean) => void;\n  disabled?: boolean;\n  /** Per-chip overrides of the `signChip` namespace. */\n  labels?: LabelOverride<SignChipLabels>;\n  /** On the chip. Place it in its row from here — keksdose's form passes `self-end`\n   *  to sit it on the display figure's baseline strip. */\n  className?: string;\n}\n\n/**\n * The SIGN of an amount, as one chip that shows only the state it is in — keksdose\n * K15, its `DirectionToggle` (feedback #417, #430, #431, dev#434) made a kit piece,\n * so the figure and its direction come from one package and wear one palette.\n *\n * WHY A CHIP, NOT A SEGMENTED CONTROL. A two-option toggle spends half its width\n * telling you what the figure is NOT, and at a phone's width it was the widest thing on\n * the form after the figure itself (#417). This sits beside the amount and reads as one\n * phrase with it — \"−42,50 Outflow\" — and a press flips it. Hiding the alternative costs\n * discoverability, so two things pay it back: the ± glyph and the swap arrows say \"this\n * is a control\", not a badge; and the name and tooltip spell out both the current state\n * and what a press will do.\n *\n * NOT A PRESSED/UNPRESSED TOGGLE. A {@link Chip} toggle has a FIXED label naming its\n * on-state, with `aria-pressed` carrying the state. Here the word IS the state, so it\n * is an action button with no `aria-pressed`: \"Direction: Inflow, not pressed\" would\n * name no on-state for \"not pressed\" to be the absence of. The name changing under\n * focus is the echo.\n *\n * THE COLOUR is the money pairing — the chip's `expense` / `income` tones, the same\n * `--money-expense` / `--money-income` that {@link AmountInput}'s `tone` paints the\n * figure with (dev#434): only the text and the border carry the tint, on a neutral\n * surface, because a filled pill next to a tinted figure reads as one smear.\n *\n * SIZE. `lg` on a phone — the 44px touch target beside a display figure that has no\n * field height to match — and from `md` up exactly a labelled field's 42px, so it never\n * stands taller than the fields in its grid row (#431).\n *\n * An exported chip rather than an `AmountInput signControl` slot: the slot would have\n * to own the row the two share, and every form lays that row out differently (beside\n * the figure on a phone, in a grid column on a desktop). The chip is the part that was\n * being re-written; the row stays the form's.\n */\nexport function SignChip({ negative, onNegativeChange, disabled, labels: labelsProp, className }: SignChipProps) {\n  const labels = useKitLabels(\"signChip\", DEFAULT_SIGN_CHIP_LABELS, labelsProp);\n  const current = negative ? labels.outflow : labels.inflow;\n  const next = negative ? labels.inflow : labels.outflow;\n  const name = labels.direction(current, next);\n  // §4: at Large the chip's word is joined by what a press does, as a line under it —\n  // and the bubble that said only that goes.\n  const large = useLargeText();\n  const chip = (\n    <Chip\n      size=\"lg\"\n      tone={negative ? \"expense\" : \"income\"}\n      icon={negative ? Minus : Plus}\n      onClick={() => onNegativeChange(!negative)}\n      disabled={disabled}\n      aria-label={name}\n      // `gap-1.5 px-3`: the chip's narrower body, because on a 375px screen every\n      // pixel of it is taken from the figure beside it (#430). `md:py-2.5` with the\n      // hairline border is the 42px a labelled field measures (#431).\n      className={cn(\"shrink-0 gap-1.5 whitespace-nowrap px-3 font-medium md:min-h-0 md:py-2.5\", !large && className)}\n    >\n      {current}\n      {/* The swap arrows after the word, in the label's own row: decoration (the\n            name already says what a press does), set a little apart from the word. */}\n      <ArrowUpDown className=\"ms-1.5 inline size-3.5 align-[-0.2em] opacity-60\" aria-hidden />\n    </Chip>\n  );\n  if (!large) {\n    return (\n      <Tooltip label={name} lazy>\n        {chip}\n      </Tooltip>\n    );\n  }\n  return (\n    // The caller's placement (`self-end`…) moves to the pair, which is now the row's item.\n    <span data-slot=\"sign-chip\" className={cn(\"inline-flex shrink-0 flex-col items-start gap-0.5\", className)}>\n      {chip}\n      {/* Hidden from the accessibility tree: the chip's name already says it. */}\n      <span aria-hidden className=\"text-xs text-muted\">\n        {labels.switchTo(next)}\n      </span>\n    </span>\n  );\n}\n"],"mappings":";AAwFI,SAeE,KAfF;AAxFJ,SAAS,aAAa,OAAO,YAAY;AACzC,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,UAAU;AACnB,SAAS,oBAAwC;AACjD,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAyElC,SAAS,SAAS,EAAE,UAAU,kBAAkB,UAAU,QAAQ,YAAY,UAAU,GAAkB;AAC/G,QAAM,SAAS,aAAa,YAAY,0BAA0B,UAAU;AAC5E,QAAM,UAAU,WAAW,OAAO,UAAU,OAAO;AACnD,QAAM,OAAO,WAAW,OAAO,SAAS,OAAO;AAC/C,QAAM,OAAO,OAAO,UAAU,SAAS,IAAI;AAG3C,QAAM,QAAQ,aAAa;AAC3B,QAAM,OACJ;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAM,WAAW,YAAY;AAAA,MAC7B,MAAM,WAAW,QAAQ;AAAA,MACzB,SAAS,MAAM,iBAAiB,CAAC,QAAQ;AAAA,MACzC;AAAA,MACA,cAAY;AAAA,MAIZ,WAAW,GAAG,4EAA4E,CAAC,SAAS,SAAS;AAAA,MAE5G;AAAA;AAAA,QAGD,oBAAC,eAAY,WAAU,oDAAmD,eAAW,MAAC;AAAA;AAAA;AAAA,EACxF;AAEF,MAAI,CAAC,OAAO;AACV,WACE,oBAAC,WAAQ,OAAO,MAAM,MAAI,MACvB,gBACH;AAAA,EAEJ;AACA;AAAA;AAAA,IAEE,qBAAC,UAAK,aAAU,aAAY,WAAW,GAAG,qDAAqD,SAAS,GACrG;AAAA;AAAA,MAED,oBAAC,UAAK,eAAW,MAAC,WAAU,sBACzB,iBAAO,SAAS,IAAI,GACvB;AAAA,OACF;AAAA;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/sign-chip.tsx"],"sourcesContent":["import { ArrowUpDown, Minus, Plus } from \"lucide-react\";\nimport { Chip } from \"./chip\";\nimport { Tooltip } from \"./tooltip\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { useLargeText } from \"../hooks/use-large-text\";\nimport { DEFAULT_SIGN_CHIP_LABELS } from \"./sign-chip-labels\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The words a {@link SignChip} says — the `signChip` namespace of\n *  `<UiKitProvider labels>`, and per chip through its `labels` prop.\n *\n * @deprecated 0.52 — a `Chip` of your own, as keksdose's DirectionToggle is (MOD-5); removed in 0.53. */\nexport interface SignChipLabels {\n  /** The chip's text while the figure is negative — money going out. */\n  outflow: string;\n  /** The chip's text while the figure is positive — money coming in. */\n  inflow: string;\n  /** The chip's accessible name and its tooltip: the state it is in, and what a press\n   *  turns it into — `current` and `next` are the two words above. The other option is\n   *  nowhere on screen to be read, so the name has to say both. */\n  direction: (current: string, next: string) => string;\n  /** 0.32: what a press does, in words under the chip at Large and Extra large —\n   *  `next` is the other direction's word (\"Switch to Inflow\"). The tooltip's half of\n   *  `direction`, shown, since a fact may not live only in a tooltip there (§4). */\n  switchTo: (next: string) => string;\n}\n\n// Defined in ./sign-chip-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_SIGN_CHIP_LABELS };\n\n/** @deprecated 0.52 — a `Chip` of your own, as keksdose's DirectionToggle is (MOD-5); removed in 0.53. */\nexport interface SignChipProps {\n  /** The figure is negative (an outflow) — the same flag {@link AmountInput}'s\n   *  `negative` is, so one state feeds both: `<AmountInput negative={neg}\n   *  onNegativeChange={setNeg} />` and `<SignChip negative={neg}\n   *  onNegativeChange={setNeg} />`. */\n  negative: boolean;\n  /** A press: the other direction. */\n  onNegativeChange: (negative: boolean) => void;\n  disabled?: boolean;\n  /** Per-chip overrides of the `signChip` namespace. */\n  labels?: LabelOverride<SignChipLabels>;\n  /** On the chip. Place it in its row from here — keksdose's form passes `self-end`\n   *  to sit it on the display figure's baseline strip. */\n  className?: string;\n}\n\n/**\n * The SIGN of an amount, as one chip that shows only the state it is in — keksdose\n * K15, its `DirectionToggle` (feedback #417, #430, #431, dev#434) made a kit piece,\n * so the figure and its direction come from one package and wear one palette.\n *\n * WHY A CHIP, NOT A SEGMENTED CONTROL. A two-option toggle spends half its width\n * telling you what the figure is NOT, and at a phone's width it was the widest thing on\n * the form after the figure itself (#417). This sits beside the amount and reads as one\n * phrase with it — \"−42,50 Outflow\" — and a press flips it. Hiding the alternative costs\n * discoverability, so two things pay it back: the ± glyph and the swap arrows say \"this\n * is a control\", not a badge; and the name and tooltip spell out both the current state\n * and what a press will do.\n *\n * NOT A PRESSED/UNPRESSED TOGGLE. A {@link Chip} toggle has a FIXED label naming its\n * on-state, with `aria-pressed` carrying the state. Here the word IS the state, so it\n * is an action button with no `aria-pressed`: \"Direction: Inflow, not pressed\" would\n * name no on-state for \"not pressed\" to be the absence of. The name changing under\n * focus is the echo.\n *\n * THE COLOUR is the money pairing — the chip's `expense` / `income` tones, the same\n * `--money-expense` / `--money-income` that {@link AmountInput}'s `tone` paints the\n * figure with (dev#434): only the text and the border carry the tint, on a neutral\n * surface, because a filled pill next to a tinted figure reads as one smear.\n *\n * SIZE. `lg` on a phone — the 44px touch target beside a display figure that has no\n * field height to match — and from `md` up exactly a labelled field's 42px, so it never\n * stands taller than the fields in its grid row (#431).\n *\n * An exported chip rather than an `AmountInput signControl` slot: the slot would have\n * to own the row the two share, and every form lays that row out differently (beside\n * the figure on a phone, in a grid column on a desktop). The chip is the part that was\n * being re-written; the row stays the form's.\n *\n * Deprecated in 0.52, removed in 0.53 (decision 4 of the refactor audit 2026-10-30,\n * MOD-5): keksdose, whose chip this was (K15), kept its own `DirectionToggle` on `Chip`\n * and `Tooltip`, and no other app renders one.\n *\n * @deprecated 0.52 — a `Chip` of your own, as keksdose's DirectionToggle is (MOD-5); removed in 0.53.\n */\nexport function SignChip({ negative, onNegativeChange, disabled, labels: labelsProp, className }: SignChipProps) {\n  const labels = useKitLabels(\"signChip\", DEFAULT_SIGN_CHIP_LABELS, labelsProp);\n  const current = negative ? labels.outflow : labels.inflow;\n  const next = negative ? labels.inflow : labels.outflow;\n  const name = labels.direction(current, next);\n  // §4: at Large the chip's word is joined by what a press does, as a line under it —\n  // and the bubble that said only that goes.\n  const large = useLargeText();\n  const chip = (\n    <Chip\n      size=\"lg\"\n      tone={negative ? \"expense\" : \"income\"}\n      icon={negative ? Minus : Plus}\n      onClick={() => onNegativeChange(!negative)}\n      disabled={disabled}\n      aria-label={name}\n      // `gap-1.5 px-3`: the chip's narrower body, because on a 375px screen every\n      // pixel of it is taken from the figure beside it (#430). `md:py-2.5` with the\n      // hairline border is the 42px a labelled field measures (#431).\n      className={cn(\"shrink-0 gap-1.5 whitespace-nowrap px-3 font-medium md:min-h-0 md:py-2.5\", !large && className)}\n    >\n      {current}\n      {/* The swap arrows after the word, in the label's own row: decoration (the\n            name already says what a press does), set a little apart from the word. */}\n      <ArrowUpDown className=\"ms-1.5 inline size-3.5 align-[-0.2em] opacity-60\" aria-hidden />\n    </Chip>\n  );\n  if (!large) {\n    return (\n      <Tooltip label={name} lazy>\n        {chip}\n      </Tooltip>\n    );\n  }\n  return (\n    // The caller's placement (`self-end`…) moves to the pair, which is now the row's item.\n    <span data-slot=\"sign-chip\" className={cn(\"inline-flex shrink-0 flex-col items-start gap-0.5\", className)}>\n      {chip}\n      {/* Hidden from the accessibility tree: the chip's name already says it. */}\n      <span aria-hidden className=\"text-xs text-muted\">\n        {labels.switchTo(next)}\n      </span>\n    </span>\n  );\n}\n"],"mappings":";AAiGI,SAeE,KAfF;AAjGJ,SAAS,aAAa,OAAO,YAAY;AACzC,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,UAAU;AACnB,SAAS,oBAAwC;AACjD,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAkFlC,SAAS,SAAS,EAAE,UAAU,kBAAkB,UAAU,QAAQ,YAAY,UAAU,GAAkB;AAC/G,QAAM,SAAS,aAAa,YAAY,0BAA0B,UAAU;AAC5E,QAAM,UAAU,WAAW,OAAO,UAAU,OAAO;AACnD,QAAM,OAAO,WAAW,OAAO,SAAS,OAAO;AAC/C,QAAM,OAAO,OAAO,UAAU,SAAS,IAAI;AAG3C,QAAM,QAAQ,aAAa;AAC3B,QAAM,OACJ;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAM,WAAW,YAAY;AAAA,MAC7B,MAAM,WAAW,QAAQ;AAAA,MACzB,SAAS,MAAM,iBAAiB,CAAC,QAAQ;AAAA,MACzC;AAAA,MACA,cAAY;AAAA,MAIZ,WAAW,GAAG,4EAA4E,CAAC,SAAS,SAAS;AAAA,MAE5G;AAAA;AAAA,QAGD,oBAAC,eAAY,WAAU,oDAAmD,eAAW,MAAC;AAAA;AAAA;AAAA,EACxF;AAEF,MAAI,CAAC,OAAO;AACV,WACE,oBAAC,WAAQ,OAAO,MAAM,MAAI,MACvB,gBACH;AAAA,EAEJ;AACA;AAAA;AAAA,IAEE,qBAAC,UAAK,aAAU,aAAY,WAAW,GAAG,qDAAqD,SAAS,GACrG;AAAA;AAAA,MAED,oBAAC,UAAK,eAAW,MAAC,WAAU,sBACzB,iBAAO,SAAS,IAAI,GACvB;AAAA,OACF;AAAA;AAEJ;","names":[]}

package/dist/components/tabs-labels.d.ts

@@ -0,0 +1,2 @@
+import type { TabsLabels } from "./tabs.js";
+export declare const DEFAULT_TABS_LABELS: TabsLabels;

package/dist/components/tabs-labels.js

@@ -0,0 +1,11 @@
+"use client";
+const DEFAULT_TABS_LABELS = {
+  add: "Add tab",
+  remove: (tab) => `Remove ${tab}`,
+  more: "More tabs",
+  previous: "Previous tabs"
+};
+export {
+  DEFAULT_TABS_LABELS
+};
+//# sourceMappingURL=tabs-labels.js.map

package/dist/components/tabs-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/tabs-labels.ts"],"sourcesContent":["// The English words of ./tabs, in a module with no component code: the English catalogue\n// (src/i18n/defaults.ts) imports them without the component, so `en` loads as one chunk\n// like the other languages (0.34, KS U8). ./tabs re-exports them. (In ui-labels.ts with the\n// field base's until 0.52, MOD-7.)\n\nimport type { TabsLabels } from \"./tabs\";\n\nexport const DEFAULT_TABS_LABELS: TabsLabels = {\n  add: \"Add tab\",\n  remove: (tab) => `Remove ${tab}`,\n  more: \"More tabs\",\n  previous: \"Previous tabs\",\n};\n"],"mappings":";AAOO,MAAM,sBAAkC;AAAA,EAC7C,KAAK;AAAA,EACL,QAAQ,CAAC,QAAQ,UAAU,GAAG;AAAA,EAC9B,MAAM;AAAA,EACN,UAAU;AACZ;","names":[]}

package/dist/components/tabs.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 import { type LabelOverride } from "../i18n/kit-labels.js";
-import { DEFAULT_TABS_LABELS } from "./ui-labels.js";
+import { DEFAULT_TABS_LABELS } from "./tabs-labels.js";
 /** One tab of a {@link Tabs} strip. */
 export interface TabItem<T extends string> {
     id: T;

package/dist/components/tabs.js

@@ -3,27 +3,27 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useMemo, useRef } from "react";
 import { ChevronLeft, ChevronRight, Plus, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
-import { FOCUS_RING_WIDTH } from "./focus-ring.js";
+import { FOCUS_RING } from "./focus-ring.js";
 import { scrollIntoStrip, useStripFade } from "../lib/strip-fade.js";
 import { horizontalStep } from "../lib/direction.js";
 import { usePhoneLayout } from "../hooks/use-breakpoint.js";
 import { prefersReducedMotion } from "../lib/reduced-motion.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { mergeRefs } from "./field-parts.js";
-import { DEFAULT_TABS_LABELS } from "./ui-labels.js";
+import { DEFAULT_TABS_LABELS } from "./tabs-labels.js";
 import { IconButton } from "./icon-button.js";
 import { HIT_AREA_LARGE } from "./button-look.js";
 const TABLIST_CLASSES = "flex gap-1 overflow-x-auto overflow-y-hidden border-b border-subtle";
 const TABLIST_VERTICAL_CLASSES = "flex flex-col gap-0.5";
-const TAB_VERTICAL_CLASSES = FOCUS_RING_WIDTH + " flex w-full items-center rounded-md px-3 py-2 text-start text-sm font-medium transition-colors focus:outline-none focus-visible:ring-strong";
+const TAB_VERTICAL_CLASSES = `flex w-full items-center rounded-md px-3 py-2 text-start text-sm font-medium transition-colors focus:outline-none ${FOCUS_RING}`;
 const TAB_VERTICAL_ACTIVE_CLASSES = "bg-active text-primary";
 const TAB_VERTICAL_INACTIVE_CLASSES = "text-muted hover:bg-hover hover:text-primary";
-const TAB_CLASSES = FOCUS_RING_WIDTH + " max-w-full whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus-visible:ring-strong";
+const TAB_CLASSES = `max-w-full whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none ${FOCUS_RING} focus-visible:ring-inset`;
 const TAB_ACTIVE_CLASSES = "border-[var(--text-primary)] text-primary";
 const TAB_INACTIVE_CLASSES = "border-transparent text-muted hover:text-secondary hover:border-strong";
 const TAB_REMOVABLE_CLASSES = "pe-8";
 const TAB_EMPTY_CLASSES = "-mx-1.5 rounded border border-dashed border-strong px-1.5";
-const TAB_ADD_CLASSES = FOCUS_RING_WIDTH + " inline-flex items-center gap-1 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium text-muted transition-colors hover:text-primary focus:outline-none focus-visible:ring-strong disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4";
+const TAB_ADD_CLASSES = `inline-flex items-center gap-1 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium text-muted transition-colors hover:text-primary focus:outline-none ${FOCUS_RING} disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4`;
 const TAB_ADD_PHONE_CLASSES = "relative max-md:px-2";
 function Tabs({
   tabs,
@@ -52,6 +52,7 @@ function Tabs({
   const cue = overflowCue && !vertical;
   const cueStart = cue && (fade.overflow === "start" || fade.overflow === "both");
   const cueEnd = cue && (fade.overflow === "end" || fade.overflow === "both");
+  const gutters = cue && fade.overflow !== void 0;
   const onCue = (side) => {
     const strip = stripRef.current;
     if (!strip) return;
@@ -93,10 +94,11 @@ function Tabs({
     const strip = stripRef.current;
     const tab = strip?.querySelector('[role="tab"][aria-selected="true"]');
     if (strip && tab) scrollIntoStrip(strip, tab);
-  }, [active]);
+  }, [active, gutters]);
   const isRemovable = (tab) => onRemove !== void 0 && tab.removable !== false;
   const deletesOnKey = (tab) => isRemovable(tab) && (removeOn === "every" || tab.id === active);
   const nameOf = (tab) => tab.name ?? (typeof tab.label === "string" ? tab.label : tab.id);
+  const stop = tabs.some((t) => t.id === active) ? active : tabs[0]?.id;
   const pendingFocus = useRef(null);
   const removeRef = useRef(null);
   const requestRemove = (id) => {
@@ -116,10 +118,11 @@ function Tabs({
     if (!strip) return;
     const focused = document.activeElement;
     if (focused && focused !== document.body && !strip.contains(focused) && focused !== removeRef.current) return;
-    const target = !pending.wasActive && tabs.some((t) => t.id === pending.neighbour) ? pending.neighbour : active;
+    const present = (id) => tabs.some((t) => t.id === id);
+    const target = pending.wasActive && present(active) ? active : present(pending.neighbour) ? pending.neighbour : stop;
     const index = tabs.findIndex((t) => t.id === target);
     strip.querySelectorAll('[role="tab"]')[index]?.focus();
-  }, [tabs, active]);
+  }, [tabs, active, stop]);
   const onTabKeyDown = (e, tab) => {
     if (e.key === "Delete" && deletesOnKey(tab)) {
       e.preventDefault();
@@ -168,8 +171,8 @@ function Tabs({
           // strip back on the next visit in a state they never chose. The cost is that
           // Tab out and back returns to the open tab rather than to the last one
           // looked at; the ARIA pattern allows either, and this one needs no second
-          // piece of state shadowing `active`.
-          tabIndex: isActive ? 0 : -1,
+          // piece of state shadowing `active`. With nothing open, the first tab (`stop`).
+          tabIndex: tab.id === stop ? 0 : -1,
           // Only the open tab: see `panelId`.
           "aria-controls": isActive ? panelId : void 0,
           id: isActive && panelId ? `${panelId}-tab` : void 0,
@@ -268,7 +271,6 @@ function Tabs({
       children: text.remove(nameOf(activeTab))
     }
   ) : null;
-  const gutters = cue && fade.overflow !== void 0;
   const stripBox = cue ? /* @__PURE__ */ jsxs("div", { className: cn("relative flex min-w-0", !onAdd && "flex-1", gutters && "px-[24px]"), children: [
     tablist,
     gutters && gutterAt("start", cueStart),