@eifi1/ui-kit 0.32.2 → 0.33.0

package/dist/components/row-actions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/row-actions.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from \"react\";\nimport { MoreHorizontal } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useLargeText } from \"../hooks/use-large-text\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Popover } from \"./popover\";\nimport { Button, CompactControls, IconButton } from \"./ui\";\nimport { useCommitReason } from \"./write-lock\";\nimport type { IconButtonSize } from \"./ui\";\nimport type { DataTableColumn } from \"./data-table\";\n\n/**\n * A row's actions — inline icons at Normal, one \"⋯\" menu at Large and above\n * (docs/text-size-harmonization.md §10.8).\n *\n * At Large an IconButton shows its label as text (§4). In a dense row — a register's\n * action column, a list row's end — every label at once does not fit: Kurvenschmiede\n * has 44 IconButtons in rows, kastlan 119. So a row's actions collapse instead, into\n * the menu the user roster has used since 0.31 (`UserRowActions`, now built on this):\n * one \"⋯\" button, and a menu with each action's icon AND words, where a locked one stays\n * listed and says why.\n *\n * The data is the roster's `UserRowActionList`, generalised: entries, and `false` /\n * `null` for the ones a condition left out (`row.locked || {…}`).\n */\n\n/** One action of a row. */\nexport interface RowAction {\n  /** React key. Default: the label. */\n  key?: string;\n  /** The action's name: the inline icon's name and tooltip, the menu entry's words. */\n  label: string;\n  /**\n   * Runs it. The kit sends nothing — the app opens its confirmation or calls its API.\n   * Optional only beside `href`; an action has one or the other (or both: `onSelect`\n   * then runs as the link is followed).\n   */\n  onSelect?: () => void;\n  /**\n   * The action NAVIGATES — an edit page, a mail to compose (0.32.1, kastlan's 0.32\n   * report): a real link inline and in the menu, so open in a new tab, a middle click\n   * and the URL on hover work, which `onSelect` + `navigate` lost. The kit's link rule\n   * applies ({@link Button}'s `href`): in-app through the provider's `linkComponent`, an\n   * external or `#anchor` one a plain `<a>`, `mailto:` included.\n   *\n   * A link cannot carry a reason or a spinner, so an action with a `disabledReason`\n   * (or under a write lock, with `commit`) or `pending` stays a button and says why.\n   */\n  href?: string;\n  /** With `href`: leaves the app — a new tab, and a screen reader is told so. */\n  external?: boolean;\n  /**\n   * The glyph: a Lucide icon (`Pencil`), or an element (`<Pencil />`, an app's own\n   * svg) — DataTable's `rowActions` hand their `icon` node through. Inline, an action\n   * without one is a small text button; in the menu it is the words alone.\n   */\n  icon?: LucideIcon | ReactElement;\n  /** `danger` for delete, revoke, erase: the quiet red of IconButton's `tone=\"danger\"`\n   *  inline, the danger text tone in the menu. */\n  tone?: \"default\" | \"danger\";\n  /** Why it is not available for this row. It stays listed, focusable, and says so — an\n   *  action that silently vanished would leave the reader looking for it. */\n  disabledReason?: ReactNode;\n  /**\n   * This action COMMITS — it saves, sends, deletes: under a locked\n   * {@link WriteLockProvider} it is refused with the lock's reason, as {@link Button}'s\n   * `commit` is, inline and in the menu alike. No provider, or an unlocked one: no effect.\n   */\n  commit?: boolean;\n  /**\n   * In flight — the request it started has not answered. Inline, the icon turns into\n   * IconButton's spinner (`pending`); collapsed, the \"⋯\" button does, since the menu\n   * closed when the action was chosen. Either way nothing in the row can be pressed again\n   * until it settles: the \"⋯\" opens no menu while busy.\n   */\n  pending?: boolean;\n  /**\n   * Not available for a moment, with nothing to explain — another action of the list\n   * is in flight (an admin panel's `busy`). The plain `disabled`; a lasting refusal is a\n   * `disabledReason`, which says why.\n   */\n  disabled?: boolean;\n  /** Leave it out for this row. */\n  hidden?: boolean;\n}\n\n/** What a row's actions may be: entries, and `false` / `null` / `undefined` for the ones\n *  a condition left out. */\nexport type RowActionList = readonly (RowAction | false | null | undefined)[];\n\nexport interface RowActionsLabels {\n  /** The menu button's name when the row has no name of its own; also the actions\n   *  column's (hidden) header in {@link rowActionsColumn}. */\n  actions: string;\n  /** The menu button's name, given the row's: \"Actions for Ada Example\". */\n  actionsFor: (name: string) => string;\n}\n\nexport const DEFAULT_ROW_ACTIONS_LABELS: RowActionsLabels = {\n  actions: \"Actions\",\n  actionsFor: (name) => `Actions for ${name}`,\n};\n\n/**\n * - `\"auto\"` (default): the icons inline at Normal; the \"⋯\" menu at Large and Extra\n *   large once there are two or more (§10.8). A single action stays inline at every\n *   size, with its label as text at Large — one label fits a row, and a menu of one is\n *   a detour.\n * - `\"menu\"`: the menu at every size — the roster's choice, whose actions grow (§2.4\n *   there) and do not fit a phone card as a strip.\n * - `\"inline\"`: the icons at every size — for a row the app knows has room; at Large\n *   each then shows its label (IconButton's `labelVisible`).\n */\nexport type RowActionsCollapse = \"auto\" | \"menu\" | \"inline\";\n\n/** The sizes a row action comes in: IconButton's row steps. `2xs` is DataTable's\n *  compact density. At Large every one is at least a 48 px target (IconButton). */\nexport type RowActionsSize = Extract<IconButtonSize, \"md\" | \"sm\" | \"xs\" | \"2xs\">;\n\nexport interface RowActionsProps {\n  actions: RowActionList;\n  /** The row's name, for the menu button's name — \"Actions for Ada Example\". Without it\n   *  (or `null`, as API fields often are) the button is \"Actions\". */\n  name?: string | null;\n  /** When the actions collapse into the menu — see {@link RowActionsCollapse}. */\n  collapse?: RowActionsCollapse;\n  /** The inline icons' and the \"⋯\" button's size. Default `xs`, a list row's action. */\n  size?: RowActionsSize;\n  /** The menu's width. Default `\"15rem\"`, in rem so it grows with the words (§3.2). */\n  menuWidth?: `${number}rem`;\n  /** On the wrapper: the inline strip, or the \"⋯\" button's box. */\n  className?: string;\n  labels?: Partial<RowActionsLabels>;\n}\n\nfunction visibleActions(actions: RowActionList): RowAction[] {\n  return actions.filter((a): a is RowAction => Boolean(a) && !(a as RowAction).hidden);\n}\n\n/** An action's glyph as a node: a component is rendered, an element is used as is. */\nfunction glyphOf(icon: RowAction[\"icon\"]): ReactNode {\n  if (icon === undefined) return null;\n  if (isValidElement(icon)) return icon;\n  const Icon = icon as LucideIcon;\n  return <Icon />;\n}\n\n/**\n * A row's actions, inline or as a \"⋯\" menu — see {@link RowActionsCollapse}. Every\n * control stops its click (and the Enter/Space it stands for) from reaching the row, so\n * a clickable row or a DataTable `rowLink` does not open as well; in a DataTable column\n * also set `noRowLink: true`, as {@link rowActionsColumn} does.\n *\n * Inline, the icons sit in a {@link CompactControls} region at Normal: their labels\n * stay the names and the tooltips, and a locked one keeps its reason in the tooltip — a\n * line under one icon of a row would break the row. In the menu a locked action's\n * reason is a line under its words at Large and on touch (Button's\n * `disabledReasonDisplay`).\n *\n * The menu is portalled, so a table's scroller cannot clip it; Escape and an outside\n * press close it, and focus goes back to the \"⋯\" button, which is where a confirmation\n * dialog then returns it.\n */\nexport function RowActions({\n  actions,\n  name,\n  collapse = \"auto\",\n  size = \"xs\",\n  menuWidth = \"15rem\",\n  className,\n  labels: labelsProp,\n}: RowActionsProps) {\n  const labels = useKitLabels(\"rowActions\", DEFAULT_ROW_ACTIONS_LABELS, labelsProp);\n  const large = useLargeText();\n  const entries = visibleActions(actions);\n  if (entries.length === 0) return null;\n  const asMenu = collapse === \"menu\" || (collapse === \"auto\" && large && entries.length > 1);\n  if (!asMenu) {\n    const strip = (\n      <div data-slot=\"row-actions\" className={cn(\"inline-flex items-center gap-0.5\", className)}>\n        {entries.map((action) => (\n          <InlineAction key={action.key ?? action.label} action={action} size={size} />\n        ))}\n      </div>\n    );\n    // Compact at Normal (no room for a reason line in a row); at Large an inline action\n    // is the app's choice (\"inline\") or the row's only one, and shows its words.\n    return large ? strip : <CompactControls>{strip}</CompactControls>;\n  }\n  const title = name ? labels.actionsFor(name) : labels.actions;\n  // The menu closed when the action was chosen, so what is in flight shows on \"⋯\".\n  const busy = entries.some((action) => action.pending);\n  return (\n    <Popover\n      width={menuWidth}\n      aria-label={title}\n      className=\"p-1\"\n      trigger={({ open, toggle, ref }) => (\n        <IconButton\n          ref={ref}\n          size={size}\n          label={title}\n          // \"⋯\" is read by everyone as \"more actions\"; the menu it opens is the words.\n          labelVisible={false}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          pending={busy}\n          stopPropagation\n          onClick={toggle}\n          className={className}\n        >\n          <MoreHorizontal />\n        </IconButton>\n      )}\n      // React carries an event out of a portal along the COMPONENT tree, so a click in\n      // the menu reached a clickable row or a DataTable `onRowClick` the menu was opened\n      // from, though the panel is nowhere near it in the page — only the \"⋯\" trigger\n      // stopped its own (keksdose's 0.32 report). Stopped on the PANEL itself, its padding\n      // and border included (0.32.2: 0.32.1 stopped it on an inner box, and a click on\n      // the panel's `p-1` still went through): clicks, and the Enter / Space a row also\n      // listens for. Escape goes on, to the popover's own handler that closes it.\n      onClick={stopClick}\n      onKeyDown={stopActivationKeys}\n    >\n      {(close) => (\n        <ul data-slot=\"row-actions-menu\" className=\"space-y-0.5\">\n          {entries.map((action) => (\n            <li key={action.key ?? action.label}>\n              <MenuAction action={action} close={close} />\n            </li>\n          ))}\n        </ul>\n      )}\n    </Popover>\n  );\n}\n\nfunction stopClick(e: MouseEvent) {\n  e.stopPropagation();\n}\n\nfunction stopActivationKeys(e: KeyboardEvent) {\n  if (e.key === \"Enter\" || e.key === \" \") e.stopPropagation();\n}\n\n/**\n * The `href` an action renders as a link with, or `undefined` for a button: a link\n * cannot carry a reason or a spinner (Button's link form has neither), so a refused\n * action — its own `disabledReason`, or a write lock on a `commit` — and a pending one\n * stay buttons and say so.\n */\nfunction useActionHref(action: RowAction): string | undefined {\n  const reason = useCommitReason(action.commit, action.disabledReason);\n  const refused = reason !== undefined && reason !== null && reason !== false && reason !== \"\";\n  return action.href !== undefined && !action.pending && !refused ? action.href : undefined;\n}\n\n/** One entry of the \"⋯\" menu: the words, as a link for an `href`, else a button. */\nfunction MenuAction({ action, close }: { action: RowAction; close: () => void }) {\n  const href = useActionHref(action);\n  const glyph = glyphOf(action.icon);\n  const words = (\n    <>\n      {glyph && (\n        <span aria-hidden className=\"flex shrink-0 [&_svg]:size-4\">\n          {glyph}\n        </span>\n      )}\n      {action.label}\n    </>\n  );\n  const tone = action.tone === \"danger\" ? \"danger\" : undefined;\n  const select = () => {\n    close();\n    action.onSelect?.();\n  };\n  if (href !== undefined) {\n    return (\n      <Button\n        href={href}\n        external={action.external}\n        variant=\"ghost\"\n        size=\"sm\"\n        stretch\n        tone={tone}\n        disabled={action.disabled}\n        className=\"w-full justify-start text-start\"\n        onClick={select}\n      >\n        {words}\n      </Button>\n    );\n  }\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      stretch\n      tone={tone}\n      disabledReason={action.disabledReason}\n      commit={action.commit}\n      pending={action.pending}\n      disabled={action.disabled}\n      className=\"w-full justify-start text-start\"\n      onClick={select}\n    >\n      {words}\n    </Button>\n  );\n}\n\n/** One inline action: an IconButton with its icon, else a small text button — each a\n *  link for an `href` (see {@link useActionHref}). */\nfunction InlineAction({ action, size }: { action: RowAction; size: RowActionsSize }) {\n  const href = useActionHref(action);\n  const glyph = glyphOf(action.icon);\n  const tone = action.tone === \"danger\" ? \"danger\" : undefined;\n  if (glyph) {\n    if (href !== undefined) {\n      return (\n        <IconButton\n          href={href}\n          external={action.external}\n          size={size}\n          label={action.label}\n          tone={tone}\n          disabled={action.disabled}\n          stopPropagation\n          onClick={() => action.onSelect?.()}\n        >\n          {glyph}\n        </IconButton>\n      );\n    }\n    return (\n      <IconButton\n        size={size}\n        label={action.label}\n        tone={tone}\n        disabledReason={action.disabledReason}\n        commit={action.commit}\n        pending={action.pending}\n        disabled={action.disabled}\n        stopPropagation\n        onClick={() => action.onSelect?.()}\n      >\n        {glyph}\n      </IconButton>\n    );\n  }\n  // A row listening for clicks must not open as well (IconButton's stopPropagation).\n  const stop = {\n    onClick: (e: MouseEvent) => {\n      e.stopPropagation();\n      action.onSelect?.();\n    },\n    onKeyDown: (e: KeyboardEvent) => {\n      if (e.key === \"Enter\" || e.key === \" \") e.stopPropagation();\n    },\n  };\n  if (href !== undefined) {\n    return (\n      <Button href={href} external={action.external} variant=\"ghost\" size=\"sm\" tone={tone} disabled={action.disabled} {...stop}>\n        {action.label}\n      </Button>\n    );\n  }\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      tone={tone}\n      disabledReason={action.disabledReason}\n      commit={action.commit}\n      pending={action.pending}\n      disabled={action.disabled}\n      {...stop}\n    >\n      {action.label}\n    </Button>\n  );\n}\n\n/** The actions column's hidden header, in the provider's words. */\nfunction RowActionsHeader({ text, labels }: { text?: string; labels?: Partial<RowActionsLabels> }) {\n  const resolved = useKitLabels(\"rowActions\", DEFAULT_ROW_ACTIONS_LABELS, labels);\n  return <span className=\"sr-only\">{text ?? resolved.actions}</span>;\n}\n\nexport interface RowActionsColumnOptions<T> {\n  /** The column's key. Default `\"actions\"`. */\n  key?: string;\n  /** The row's actions — `false` / `null` for the ones a condition leaves out. */\n  actions: (row: T) => RowActionList;\n  /** The row's name, for the \"⋯\" button's name (\"Actions for Ada Example\"). `null` and\n   *  `undefined` both mean \"Actions\". */\n  name?: (row: T) => string | null | undefined;\n  collapse?: RowActionsCollapse;\n  /** Default `xs`. */\n  size?: RowActionsSize;\n  /**\n   * The column's name as plain text — the column-settings checklist and the phone\n   * card's label read it (`DataTableColumn.headerText`). Pass the app's own word; left\n   * out, the header shows the provider's `rowActions.actions` to a screen reader and\n   * the plain-text places fall back to the column's `key`.\n   */\n  headerText?: string;\n  labels?: Partial<RowActionsLabels>;\n  /** Anything else for the column (`mobileHidden`, `cellProps`…), merged last. */\n  column?: Partial<DataTableColumn<T>>;\n}\n\n/**\n * A DataTable column of {@link RowActions} — an app's action column in one line\n * (§10.8): inline icons at Normal, the \"⋯\" menu at Large with two or more actions.\n *\n *     columns={[...columns, rowActionsColumn({ actions: (r) => [...], name: (r) => r.name })]}\n *\n * The header is visually hidden (the icons say what the column is), the column hugs its\n * content at the row's end, and `noRowLink` keeps a `rowHref` anchor off it, so the\n * buttons keep their own clicks. On a phone it is a line of the card like any column;\n * set `column: { mobileHidden: true }` to drop it there (with `mobileDetailsInRow` it\n * then shows in the opened row instead).\n */\nexport function rowActionsColumn<T>({\n  key = \"actions\",\n  actions,\n  name,\n  collapse,\n  size,\n  headerText,\n  labels,\n  column,\n}: RowActionsColumnOptions<T>): DataTableColumn<T> {\n  return {\n    key,\n    header: <RowActionsHeader text={headerText} labels={labels} />,\n    headerText,\n    cell: (row) => (\n      <RowActions actions={actions(row)} name={name?.(row)} collapse={collapse} size={size} labels={labels} />\n    ),\n    className: \"w-px whitespace-nowrap text-end\",\n    headClassName: \"w-px\",\n    noRowLink: true,\n    ...column,\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/row-actions.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from \"react\";\nimport { MoreHorizontal } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useLargeText } from \"../hooks/use-large-text\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Popover } from \"./popover\";\nimport { Button, CompactControls, IconButton } from \"./ui\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport type { IconButtonGlyphSize, IconButtonSize } from \"./ui\";\nimport type { TooltipSide } from \"./tooltip\";\nimport type { DataTableColumn } from \"./data-table\";\n\n/**\n * A row's actions — inline icons at Normal, one \"⋯\" menu at Large and above\n * (docs/text-size-harmonization.md §10.8).\n *\n * At Large an IconButton shows its label as text (§4). In a dense row — a register's\n * action column, a list row's end — every label at once does not fit: Kurvenschmiede\n * has 44 IconButtons in rows, kastlan 119. So a row's actions collapse instead, into\n * the menu the user roster has used since 0.31 (`UserRowActions`, now built on this):\n * one \"⋯\" button, and a menu with each action's icon AND words, where a locked one stays\n * listed and says why.\n *\n * The data is the roster's `UserRowActionList`, generalised: entries, and `false` /\n * `null` for the ones a condition left out (`row.locked || {…}`).\n *\n * 0.33 (§10.16): an action carries its state at both sizes — a toggle (`pressed`), a\n * disclosure (`expanded`, `controls`), a tone, a tour anchor (`dataTour`) — so a row\n * with an \"on\" share button or a tour step no longer keeps hand-rolled IconButtons at\n * Normal and this only at Large (keksdose k15).\n */\n\n/** An action's colour: IconButton's tone inline; in the menu the glyph takes it and the\n *  words keep the text colour, except `danger`, whose words are the danger text. */\nexport type RowActionTone = \"default\" | \"muted\" | \"info\" | \"warning\" | \"danger\";\n\n/** One action of a row. */\nexport interface RowAction {\n  /** React key. Default: the label. */\n  key?: string;\n  /** The action's name: the inline icon's name and tooltip, the menu entry's words. */\n  label: string;\n  /**\n   * Runs it. The kit sends nothing — the app opens its confirmation or calls its API.\n   * Optional only beside `href`; an action has one or the other (or both: `onSelect`\n   * then runs as the link is followed).\n   */\n  onSelect?: () => void;\n  /**\n   * The action NAVIGATES — an edit page, a mail to compose (0.32.1, kastlan's 0.32\n   * report): a real link inline and in the menu, so open in a new tab, a middle click\n   * and the URL on hover work, which `onSelect` + `navigate` lost. The kit's link rule\n   * applies ({@link Button}'s `href`): in-app through the provider's `linkComponent`, an\n   * external or `#anchor` one a plain `<a>`, `mailto:` included.\n   *\n   * A link cannot carry a reason or a spinner, so an action with a `disabledReason`\n   * (or under a write lock, with `commit`) or `pending` stays a button and says why.\n   */\n  href?: string;\n  /** With `href`: leaves the app — a new tab, and a screen reader is told so. */\n  external?: boolean;\n  /**\n   * The glyph: a Lucide icon (`Pencil`), or an element (`<Pencil />`, an app's own\n   * svg) — DataTable's `rowActions` hand their `icon` node through. Inline, an action\n   * without one is a small text button; in the menu it is the words alone.\n   */\n  icon?: LucideIcon | ReactElement;\n  /**\n   * `danger` for delete, revoke, erase: the quiet red of IconButton's `tone=\"danger\"`\n   * inline, the danger text tone in the menu. `muted` (an open or add that should not\n   * compete), `info` (a notice-worthy, harmless action: keksdose's reconcile) and\n   * `warning` (a flag that wants attention): IconButton's tone inline; in the menu the\n   * glyph takes it and the words keep the text colour, so `muted` looks like `default`\n   * there (0.33).\n   */\n  tone?: RowActionTone;\n  /** Why it is not available for this row. It stays listed, focusable, and says so — an\n   *  action that silently vanished would leave the reader looking for it. */\n  disabledReason?: ReactNode;\n  /**\n   * This action COMMITS — it saves, sends, deletes: under a locked\n   * {@link WriteLockProvider} it is refused with the lock's reason, as {@link Button}'s\n   * `commit` is, inline and in the menu alike. No provider, or an unlocked one: no effect.\n   */\n  commit?: CommitScope;\n  /**\n   * In flight — the request it started has not answered. Inline, the icon turns into\n   * IconButton's spinner (`pending`); collapsed, the \"⋯\" button does, since the menu\n   * closed when the action was chosen. Either way nothing in the row can be pressed again\n   * until it settles: the \"⋯\" opens no menu while busy.\n   */\n  pending?: boolean;\n  /**\n   * Not available for a moment, with nothing to explain — another action of the list\n   * is in flight (an admin panel's `busy`). The plain `disabled`; a lasting refusal is a\n   * `disabledReason`, which says why.\n   */\n  disabled?: boolean;\n  /** Leave it out for this row. */\n  hidden?: boolean;\n  /**\n   * A toggle (0.33): `aria-pressed` and IconButton's \"on\" look inline, `aria-pressed` on\n   * the menu entry. Keep the label the same in both states (\"Share budget\"): the pressed\n   * state already says whether it is on. Not on an `href` action — a link is not a\n   * toggle — nor with `expanded`.\n   */\n  pressed?: boolean;\n  /**\n   * Opens or closes something IN THE PAGE (0.33) — a share card under the row, an\n   * add-category row: `aria-expanded`, inline and on the menu entry. Not with `pressed`:\n   * a disclosure says open, not on. Not on an `href` action.\n   */\n  expanded?: boolean;\n  /** The `id` of what `expanded` opens: `aria-controls`, inline and on the menu entry. */\n  controls?: string;\n  /**\n   * A tour anchor (0.33, §10.18): `data-tour` on ONE element per action at a time.\n   * Inline, on the action's own control (the IconButton, the small text button, the\n   * link). Collapsed, on an `aria-hidden` box laid over the \"⋯\" button — `[data-tour=x]`\n   * resolves to a box the size of the \"⋯\", whose `data-slot=\"row-actions\"` box holds the\n   * button, two anchored actions in one row don't fight over one attribute, and a tap\n   * still reaches the button. Never on the entry in the open menu: the kit's tour takes\n   * the first visible match and the menu is portalled after the row, so a copy there\n   * would never be found, only make the selector match twice. The kit's name for it, as\n   * `AppShellNavItem.dataTour`.\n   */\n  dataTour?: string;\n}\n\n/** What a row's actions may be: entries, and `false` / `null` / `undefined` for the ones\n *  a condition left out. */\nexport type RowActionList = readonly (RowAction | false | null | undefined)[];\n\nexport interface RowActionsLabels {\n  /** The menu button's name when the row has no name of its own; also the actions\n   *  column's (hidden) header in {@link rowActionsColumn}. */\n  actions: string;\n  /** The menu button's name, given the row's: \"Actions for Ada Example\". */\n  actionsFor: (name: string) => string;\n}\n\nexport const DEFAULT_ROW_ACTIONS_LABELS: RowActionsLabels = {\n  actions: \"Actions\",\n  actionsFor: (name) => `Actions for ${name}`,\n};\n\n/**\n * - `\"auto\"` (default): the icons inline at Normal; the \"⋯\" menu at Large and Extra\n *   large once there are two or more (§10.8). A single action stays inline at every\n *   size, with its label as text at Large — one label fits a row, and a menu of one is\n *   a detour.\n * - `\"menu\"`: the menu at every size — the roster's choice, whose actions grow (§2.4\n *   there) and do not fit a phone card as a strip.\n * - `\"inline\"`: the icons at every size — for a row the app knows has room; at Large\n *   each then shows its label (IconButton's `labelVisible`).\n */\nexport type RowActionsCollapse = \"auto\" | \"menu\" | \"inline\";\n\n/** The sizes a row action comes in: IconButton's row steps. `2xs` is DataTable's\n *  compact density. At Large every one is at least a 48 px target (IconButton). */\nexport type RowActionsSize = Extract<IconButtonSize, \"md\" | \"sm\" | \"xs\" | \"2xs\">;\n\nexport interface RowActionsProps {\n  actions: RowActionList;\n  /** The row's name, for the menu button's name — \"Actions for Ada Example\". Without it\n   *  (or `null`, as API fields often are) the button is \"Actions\". */\n  name?: string | null;\n  /** When the actions collapse into the menu — see {@link RowActionsCollapse}. */\n  collapse?: RowActionsCollapse;\n  /** The inline icons' and the \"⋯\" button's size. Default `xs`, a list row's action. */\n  size?: RowActionsSize;\n  /** The menu's width. Default `\"15rem\"`, in rem so it grows with the words (§3.2). */\n  menuWidth?: `${number}rem`;\n  /** On the wrapper: the inline strip, or the box round the \"⋯\" button. */\n  className?: string;\n  /** The inline glyphs' size, IconButton's `glyphSize` — e.g. 14 in a dense header strip\n   *  (keksdose's category group header). The \"⋯\" button keeps its box's own. */\n  glyphSize?: IconButtonGlyphSize;\n  /** The inline tooltips' side, IconButton's `tooltipSide` — `\"start\"` for a table's last\n   *  column, so a bubble does not run off the row's end. Per row: every inline action. */\n  tooltipSide?: TooltipSide;\n  labels?: Partial<RowActionsLabels>;\n}\n\nfunction visibleActions(actions: RowActionList): RowAction[] {\n  return actions.filter((a): a is RowAction => Boolean(a) && !(a as RowAction).hidden);\n}\n\n/** An action's glyph as a node: a component is rendered, an element is used as is. */\nfunction glyphOf(icon: RowAction[\"icon\"]): ReactNode {\n  if (icon === undefined) return null;\n  if (isValidElement(icon)) return icon;\n  const Icon = icon as LucideIcon;\n  return <Icon />;\n}\n\n/** The menu glyph's tint per tone (0.33): the words keep the text colour, so the glyph\n *  carries `info` and `warning` — IconButton's toned colours. `danger` colours the words\n *  through Button's tone, and `muted` is the default look in a menu. */\nconst MENU_GLYPH_TONE: Partial<Record<RowActionTone, string>> = {\n  info: \"text-info\",\n  warning: \"text-warning\",\n};\n\n/** The state an action's control says, inline and in the menu alike: `aria-expanded` and\n *  `aria-controls` for a disclosure (a toggle's `aria-pressed` goes through the button's\n *  own `pressed`, which also draws the \"on\" look). */\nfunction stateAttrs(action: RowAction) {\n  return {\n    \"aria-expanded\": action.expanded,\n    \"aria-controls\": action.expanded === undefined ? undefined : action.controls,\n  };\n}\n\n/** An action's tone on its inline control, for a caller's CSS and a test: `data-tone`,\n *  left off for the default look. */\nfunction toneAttr(tone: RowActionTone | undefined) {\n  return { \"data-tone\": tone === undefined || tone === \"default\" ? undefined : tone };\n}\n\n/**\n * A row's actions, inline or as a \"⋯\" menu — see {@link RowActionsCollapse}. Every\n * control stops its click (and the Enter/Space it stands for) from reaching the row, so\n * a clickable row or a DataTable `rowLink` does not open as well; in a DataTable column\n * also set `noRowLink: true`, as {@link rowActionsColumn} does.\n *\n * Inline, the icons sit in a {@link CompactControls} region at Normal: their labels\n * stay the names and the tooltips, and a locked one keeps its reason in the tooltip — a\n * line under one icon of a row would break the row. In the menu a locked action's\n * reason is a line under its words at Large and on touch (Button's\n * `disabledReasonDisplay`).\n *\n * The menu is portalled, so a table's scroller cannot clip it; Escape and an outside\n * press close it, and focus goes back to the \"⋯\" button, which is where a confirmation\n * dialog then returns it.\n */\nexport function RowActions({\n  actions,\n  name,\n  collapse = \"auto\",\n  size = \"xs\",\n  menuWidth = \"15rem\",\n  className,\n  glyphSize,\n  tooltipSide,\n  labels: labelsProp,\n}: RowActionsProps) {\n  const labels = useKitLabels(\"rowActions\", DEFAULT_ROW_ACTIONS_LABELS, labelsProp);\n  const large = useLargeText();\n  const entries = visibleActions(actions);\n  if (entries.length === 0) return null;\n  const asMenu = collapse === \"menu\" || (collapse === \"auto\" && large && entries.length > 1);\n  if (!asMenu) {\n    const strip = (\n      <div data-slot=\"row-actions\" className={cn(\"inline-flex items-center gap-0.5\", className)}>\n        {entries.map((action) => (\n          <InlineAction\n            key={action.key ?? action.label}\n            action={action}\n            size={size}\n            glyphSize={glyphSize}\n            tooltipSide={tooltipSide}\n          />\n        ))}\n      </div>\n    );\n    // Compact at Normal (no room for a reason line in a row); at Large an inline action\n    // is the app's choice (\"inline\") or the row's only one, and shows its words.\n    return large ? strip : <CompactControls>{strip}</CompactControls>;\n  }\n  const title = name ? labels.actionsFor(name) : labels.actions;\n  // The menu closed when the action was chosen, so what is in flight shows on \"⋯\".\n  const busy = entries.some((action) => action.pending);\n  const anchored = entries.filter((action) => action.dataTour);\n  return (\n    // The \"⋯\" in a box of its own, the inline strip's slot: the tour anchors of the\n    // collapsed actions lie over the button in it (see `dataTour`), and `className`\n    // places the box as it places the strip.\n    <div data-slot=\"row-actions\" className={cn(\"relative inline-flex\", className)}>\n      <Popover\n        width={menuWidth}\n        aria-label={title}\n        className=\"p-1\"\n        trigger={({ open, toggle, ref }) => (\n          <IconButton\n            ref={ref}\n            size={size}\n            label={title}\n            // \"⋯\" is read by everyone as \"more actions\"; the menu it opens is the words.\n            labelVisible={false}\n            aria-haspopup=\"dialog\"\n            aria-expanded={open}\n            pending={busy}\n            stopPropagation\n            onClick={toggle}\n          >\n            <MoreHorizontal />\n          </IconButton>\n        )}\n        // React carries an event out of a portal along the COMPONENT tree, so a click in\n        // the menu reached a clickable row or a DataTable `onRowClick` the menu was opened\n        // from, though the panel is nowhere near it in the page — only the \"⋯\" trigger\n        // stopped its own (keksdose's 0.32 report). Stopped on the PANEL itself, its padding\n        // and border included (0.32.2: 0.32.1 stopped it on an inner box, and a click on\n        // the panel's `p-1` still went through): clicks, and the Enter / Space a row also\n        // listens for. Escape goes on, to the popover's own handler that closes it.\n        onClick={stopClick}\n        onKeyDown={stopActivationKeys}\n      >\n        {(close) => (\n          <ul data-slot=\"row-actions-menu\" className=\"space-y-0.5\">\n            {entries.map((action) => (\n              <li key={action.key ?? action.label}>\n                <MenuAction action={action} close={close} />\n              </li>\n            ))}\n          </ul>\n        )}\n      </Popover>\n      {anchored.map((action) => (\n        // The More cell's TourAnchor: decoration over the button, which keeps every tap.\n        <span\n          key={action.key ?? action.label}\n          aria-hidden\n          data-tour={action.dataTour}\n          className=\"pointer-events-none absolute inset-0\"\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction stopClick(e: MouseEvent) {\n  e.stopPropagation();\n}\n\nfunction stopActivationKeys(e: KeyboardEvent) {\n  if (e.key === \"Enter\" || e.key === \" \") e.stopPropagation();\n}\n\n/**\n * The `href` an action renders as a link with, or `undefined` for a button: a link\n * cannot carry a reason or a spinner (Button's link form has neither), so a refused\n * action — its own `disabledReason`, or a write lock on a `commit` — and a pending one\n * stay buttons and say so.\n */\nfunction useActionHref(action: RowAction): string | undefined {\n  const reason = useCommitReason(action.commit, action.disabledReason);\n  const refused = reason !== undefined && reason !== null && reason !== false && reason !== \"\";\n  return action.href !== undefined && !action.pending && !refused ? action.href : undefined;\n}\n\n/** One entry of the \"⋯\" menu: the words, as a link for an `href`, else a button. */\nfunction MenuAction({ action, close }: { action: RowAction; close: () => void }) {\n  const href = useActionHref(action);\n  const glyph = glyphOf(action.icon);\n  const glyphTone = action.tone === undefined ? undefined : MENU_GLYPH_TONE[action.tone];\n  const words = (\n    <>\n      {glyph && (\n        <span\n          aria-hidden\n          data-tone={glyphTone ? action.tone : undefined}\n          className={cn(\"flex shrink-0 [&_svg]:size-4\", glyphTone)}\n        >\n          {glyph}\n        </span>\n      )}\n      {action.label}\n    </>\n  );\n  const tone = action.tone === \"danger\" ? \"danger\" : undefined;\n  const select = () => {\n    close();\n    action.onSelect?.();\n  };\n  if (href !== undefined) {\n    return (\n      <Button\n        href={href}\n        external={action.external}\n        variant=\"ghost\"\n        size=\"sm\"\n        stretch\n        tone={tone}\n        disabled={action.disabled}\n        className=\"w-full justify-start text-start\"\n        onClick={select}\n      >\n        {words}\n      </Button>\n    );\n  }\n  return (\n    <Button\n      {...stateAttrs(action)}\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      stretch\n      tone={tone}\n      pressed={action.pressed}\n      disabledReason={action.disabledReason}\n      commit={action.commit}\n      pending={action.pending}\n      disabled={action.disabled}\n      className=\"w-full justify-start text-start\"\n      onClick={select}\n    >\n      {words}\n    </Button>\n  );\n}\n\n/** One inline action: an IconButton with its icon, else a small text button — each a\n *  link for an `href` (see {@link useActionHref}). The control carries the action's\n *  state, its tone and its tour anchor. */\nfunction InlineAction({\n  action,\n  size,\n  glyphSize,\n  tooltipSide,\n}: {\n  action: RowAction;\n  size: RowActionsSize;\n  glyphSize?: IconButtonGlyphSize;\n  tooltipSide?: TooltipSide;\n}) {\n  const href = useActionHref(action);\n  const glyph = glyphOf(action.icon);\n  const iconTone = action.tone === \"default\" ? undefined : action.tone;\n  // A text button has Button's two tones; `info` and `warning` are a glyph's colours.\n  const textTone = action.tone === \"danger\" || action.tone === \"muted\" ? action.tone : undefined;\n  const marks = { \"data-tour\": action.dataTour, ...toneAttr(action.tone) };\n  if (glyph) {\n    if (href !== undefined) {\n      return (\n        <IconButton\n          {...marks}\n          href={href}\n          external={action.external}\n          size={size}\n          glyphSize={glyphSize}\n          label={action.label}\n          tooltipSide={tooltipSide}\n          tone={iconTone}\n          disabled={action.disabled}\n          stopPropagation\n          onClick={() => action.onSelect?.()}\n        >\n          {glyph}\n        </IconButton>\n      );\n    }\n    return (\n      <IconButton\n        {...marks}\n        {...stateAttrs(action)}\n        size={size}\n        glyphSize={glyphSize}\n        label={action.label}\n        tooltipSide={tooltipSide}\n        tone={iconTone}\n        pressed={action.pressed}\n        disabledReason={action.disabledReason}\n        commit={action.commit}\n        pending={action.pending}\n        disabled={action.disabled}\n        stopPropagation\n        onClick={() => action.onSelect?.()}\n      >\n        {glyph}\n      </IconButton>\n    );\n  }\n  // A row listening for clicks must not open as well (IconButton's stopPropagation).\n  const stop = {\n    onClick: (e: MouseEvent) => {\n      e.stopPropagation();\n      action.onSelect?.();\n    },\n    onKeyDown: (e: KeyboardEvent) => {\n      if (e.key === \"Enter\" || e.key === \" \") e.stopPropagation();\n    },\n  };\n  if (href !== undefined) {\n    return (\n      <Button\n        {...marks}\n        href={href}\n        external={action.external}\n        variant=\"ghost\"\n        size=\"sm\"\n        tone={textTone}\n        disabled={action.disabled}\n        {...stop}\n      >\n        {action.label}\n      </Button>\n    );\n  }\n  return (\n    <Button\n      {...marks}\n      {...stateAttrs(action)}\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      tone={textTone}\n      pressed={action.pressed}\n      disabledReason={action.disabledReason}\n      commit={action.commit}\n      pending={action.pending}\n      disabled={action.disabled}\n      {...stop}\n    >\n      {action.label}\n    </Button>\n  );\n}\n\n/** The actions column's hidden header, in the provider's words. */\nfunction RowActionsHeader({ text, labels }: { text?: string; labels?: Partial<RowActionsLabels> }) {\n  const resolved = useKitLabels(\"rowActions\", DEFAULT_ROW_ACTIONS_LABELS, labels);\n  return <span className=\"sr-only\">{text ?? resolved.actions}</span>;\n}\n\nexport interface RowActionsColumnOptions<T> {\n  /** The column's key. Default `\"actions\"`. */\n  key?: string;\n  /** The row's actions — `false` / `null` for the ones a condition leaves out. */\n  actions: (row: T) => RowActionList;\n  /** The row's name, for the \"⋯\" button's name (\"Actions for Ada Example\"). `null` and\n   *  `undefined` both mean \"Actions\". */\n  name?: (row: T) => string | null | undefined;\n  collapse?: RowActionsCollapse;\n  /** Default `xs`. */\n  size?: RowActionsSize;\n  /** See {@link RowActionsProps.glyphSize}. */\n  glyphSize?: IconButtonGlyphSize;\n  /** See {@link RowActionsProps.tooltipSide} — `\"start\"` in a table's last column. */\n  tooltipSide?: TooltipSide;\n  /**\n   * The column's name as plain text — the column-settings checklist and the phone\n   * card's label read it (`DataTableColumn.headerText`). Pass the app's own word; left\n   * out, the header shows the provider's `rowActions.actions` to a screen reader and\n   * the plain-text places fall back to the column's `key`.\n   */\n  headerText?: string;\n  labels?: Partial<RowActionsLabels>;\n  /** Anything else for the column (`mobileHidden`, `cellProps`…), merged last. */\n  column?: Partial<DataTableColumn<T>>;\n}\n\n/**\n * A DataTable column of {@link RowActions} — an app's action column in one line\n * (§10.8): inline icons at Normal, the \"⋯\" menu at Large with two or more actions.\n *\n *     columns={[...columns, rowActionsColumn({ actions: (r) => [...], name: (r) => r.name })]}\n *\n * The header is visually hidden (the icons say what the column is), the column hugs its\n * content at the row's end, and `noRowLink` keeps a `rowHref` anchor off it, so the\n * buttons keep their own clicks. On a phone it is a line of the card like any column;\n * set `column: { mobileHidden: true }` to drop it there (with `mobileDetailsInRow` it\n * then shows in the opened row instead).\n */\nexport function rowActionsColumn<T>({\n  key = \"actions\",\n  actions,\n  name,\n  collapse,\n  size,\n  glyphSize,\n  tooltipSide,\n  headerText,\n  labels,\n  column,\n}: RowActionsColumnOptions<T>): DataTableColumn<T> {\n  return {\n    key,\n    header: <RowActionsHeader text={headerText} labels={labels} />,\n    headerText,\n    cell: (row) => (\n      <RowActions\n        actions={actions(row)}\n        name={name?.(row)}\n        collapse={collapse}\n        size={size}\n        glyphSize={glyphSize}\n        tooltipSide={tooltipSide}\n        labels={labels}\n      />\n    ),\n    className: \"w-px whitespace-nowrap text-end\",\n    headClassName: \"w-px\",\n    noRowLink: true,\n    ...column,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/components/series-chart.d.ts

@@ -5,22 +5,27 @@ import { LegendEntry } from './toggle-legend.js';
 import { SeriesChartLabels } from './series-chart-labels.js';
 import { TimeTickUnit } from './series-chart-ticks.js';
 import { SeriesChartAxisBudget } from './series-chart-budget.js';
-import { c6 as ChartTooltipPlacement } from '../delete-account-setting-Dy4kJgUm.js';
+import { c6 as ChartTooltipPlacement } from '../delete-account-setting-DiPX4Vue.js';
 import { ChartHeight } from './chart-height.js';
 import 'recharts';
 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 'lucide-react';
+import './field-parts.js';
+import './write-lock.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import '../hooks/use-breakpoint.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -31,7 +36,6 @@ import './month-picker.js';
 import './page-contents.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';
@@ -43,9 +47,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';
@@ -61,7 +62,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';

package/dist/components/settings-fields.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { eY as SelectProps } from '../delete-account-setting-Dy4kJgUm.js';
+import { f8 as SelectProps } from '../delete-account-setting-DiPX4Vue.js';
 import { ToggleGroupBaseProps } from './toggle-group.js';
 import { ThemePreference } from '../theme/theme-store.js';
 import { TextSize } from '../theme/text-size.js';
@@ -9,16 +9,21 @@ import { AppearanceLabels } from './appearance-labels.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 'lucide-react';
+import './field-parts.js';
+import './write-lock.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import '../hooks/use-breakpoint.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -30,7 +35,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';
@@ -42,9 +46,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';
@@ -60,7 +61,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';

package/dist/components/share-card.d.ts

@@ -1,7 +1,7 @@
 import 'react';
 import './account-chips.js';
 import './dialog-frame.js';
-export { cP as DEFAULT_SHARE_CARD_LABELS, eZ as ShareAddRequest, e_ as ShareCandidate, e$ as ShareCard, f0 as ShareCardLabels, f1 as ShareCardProps, f2 as ShareDialog, f3 as ShareDialogProps, f4 as ShareGrantee, f5 as SharePanel, f6 as SharePanelProps, f7 as SharePendingGrant, f8 as ShareRole } from '../delete-account-setting-Dy4kJgUm.js';
+export { cQ as DEFAULT_SHARE_CARD_LABELS, f9 as ShareAddRequest, fa as ShareCandidate, fb as ShareCard, fc as ShareCardLabels, fd as ShareCardProps, fe as ShareDialog, ff as ShareDialogProps, fg as ShareGrantee, fh as SharePanel, fi as SharePanelProps, fj as SharePendingGrant, fk as ShareRole } from '../delete-account-setting-DiPX4Vue.js';
 import 'lucide-react';
 import '../lib/format.js';
 import './chip.js';
@@ -9,9 +9,14 @@ import './field-parts.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-kpAAVi6g.js';
+import './write-lock.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 './modal.js';
 import '../hooks/use-search-param-state.js';
 import './mini-calendar.js';
@@ -29,7 +34,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';
@@ -38,9 +42,6 @@ import './icon-picker.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';
@@ -56,7 +57,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';

package/dist/components/share-card.js

@@ -15,7 +15,7 @@ import { Caption, SectionLabel } from "./text.js";
 import { ToggleGroup } from "./toggle-group.js";
 import { Tooltip } from "./tooltip.js";
 import { Button, Card, IconButton, Spinner } from "./ui.js";
-import { useWriteLock } from "./write-lock.js";
+import { COMMIT_EXCEPT_BILLING, useWriteLock } from "./write-lock.js";
 const DEFAULT_SHARE_CARD_LABELS = {
   dialogTitle: "Share",
   close: "Close",
@@ -50,6 +50,13 @@ const ROW_CONTROLS = "ms-auto flex min-w-0 max-w-full flex-wrap items-center jus
 function LockedRoleChoice({ reason, children }) {
   return reason === void 0 ? children : /* @__PURE__ */ jsx(Tooltip, { label: reason, children });
 }
+function roleChoiceLock(index, count, every, removal) {
+  if (removal.locked) return { group: removal.reason };
+  if (!every.locked) return {};
+  if (index <= 0) return { group: every.reason };
+  return index < count - 1 ? { raise: every.reason } : {};
+}
+const RAISE_REFUSED = "cursor-not-allowed opacity-50 hover:bg-transparent dark:hover:bg-transparent";
 function SharePanel({
   grantees,
   roles,
@@ -73,6 +80,7 @@ function SharePanel({
   const labels = useKitLabels("shareCard", DEFAULT_SHARE_CARD_LABELS, labelsProp);
   const confirm = useConfirm();
   const lock = useWriteLock();
+  const removal = useWriteLock(COMMIT_EXCEPT_BILLING);
   const [email, setEmail] = useState("");
   const [target, setTarget] = useState(null);
   const [newRole, setNewRole] = useState(defaultRole ?? roles[0]?.key ?? "");
@@ -222,27 +230,35 @@ function SharePanel({
           const editable = !readOnly && !g.locked;
           const changeable = editable && onRoleChange !== void 0 && choosable;
           const key = `grantee:${g.id}`;
+          const rank = roles.findIndex((r) => r.key === g.role);
+          const roleLock = roleChoiceLock(rank, roles.length, lock, removal);
           return /* @__PURE__ */ jsxs("li", { className: "space-y-1.5 py-2 first:pt-0 last:pb-0", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5", children: [
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 basis-40", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5 text-sm font-medium text-[var(--text-primary)]", children: [
                   g.kind === "team" && /* @__PURE__ */ jsx(UsersRound, { className: "size-4 shrink-0", "aria-hidden": true }),
-                  /* @__PURE__ */ jsx("span", { "data-private": true, className: "truncate", children: g.name }),
+                  /* @__PURE__ */ jsx("span", { "data-private": true, className: "truncate-until-large", children: g.name }),
                   !changeable && /* @__PURE__ */ jsx(ShareRoleChip, { role: roleOf(g.role) })
                 ] }),
-                (g.kind === "team" || g.email) && /* @__PURE__ */ jsx("div", { "data-private": true, className: "truncate text-xs text-[var(--text-muted)]", children: g.kind === "team" ? labels.team : g.email })
+                (g.kind === "team" || g.email) && /* @__PURE__ */ jsx("div", { "data-private": true, className: "truncate-until-large text-xs text-[var(--text-muted)]", children: g.kind === "team" ? labels.team : g.email })
               ] }),
               (changeable || editable && onRemove) && /* @__PURE__ */ jsxs("div", { className: ROW_CONTROLS, children: [
-                changeable && /* @__PURE__ */ jsx(LockedRoleChoice, { reason: lock.locked ? lock.reason : void 0, children: /* @__PURE__ */ jsx(
+                changeable && /* @__PURE__ */ jsx(LockedRoleChoice, { reason: roleLock.group ?? roleLock.raise, children: /* @__PURE__ */ jsx(
                   ToggleGroup,
                   {
                     size: "sm",
                     "aria-label": labels.roleOf(g.name),
-                    options: roles.map((r) => ({ value: r.key, label: r.label })),
+                    options: roles.map((r, i) => ({
+                      value: r.key,
+                      label: r.label,
+                      className: roleLock.raise !== void 0 && i > rank ? RAISE_REFUSED : void 0
+                    })),
                     value: g.role,
-                    disabled: busy !== null || lock.locked,
+                    disabled: busy !== null || roleLock.group !== void 0,
                     onChange: (next) => {
-                      if (next !== g.role) void run(`role:${g.id}`, () => onRoleChange(g, next));
+                      if (next === g.role) return;
+                      if (roleLock.raise !== void 0 && roles.findIndex((r) => r.key === next) > rank) return;
+                      void run(`role:${g.id}`, () => onRoleChange(g, next));
                     }
                   }
                 ) }),
@@ -251,7 +267,7 @@ function SharePanel({
                   {
                     tone: "danger",
                     size: "xs",
-                    commit: true,
+                    commit: COMMIT_EXCEPT_BILLING,
                     label: labels.remove,
                     labelVisible: false,
                     disabledReasonDisplay: rowReason,
@@ -283,7 +299,7 @@ function SharePanel({
                 {
                   "data-private": p.email ? true : void 0,
                   className: cn(
-                    "truncate text-sm",
+                    "truncate-until-large text-sm",
                     p.email ? "text-[var(--text-primary)]" : "text-[var(--text-muted)]"
                   ),
                   children: name
@@ -301,7 +317,7 @@ function SharePanel({
                 {
                   tone: "danger",
                   size: "xs",
-                  commit: true,
+                  commit: COMMIT_EXCEPT_BILLING,
                   label: labels.revokePending,
                   labelVisible: false,
                   disabledReasonDisplay: rowReason,

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 } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\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, Card, IconButton, Spinner } from \"./ui\";\nimport { useWriteLock } from \"./write-lock\";\nimport type { CardProps } from \"./ui\";\nimport type { DisabledReasonDisplay } from \"./field-parts\";\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\nexport const DEFAULT_SHARE_CARD_LABELS: ShareCardLabels = {\n  dialogTitle: \"Share\",\n  close: \"Close\",\n  email: \"Email address\",\n  emailOptional: \"Email address (optional)\",\n  emailPlaceholder: \"name@example.com\",\n  invalidEmail: \"Enter a complete email address.\",\n  role: \"Role\",\n  roleOf: (name) => `Role of ${name}`,\n  add: \"Share\",\n  whoHasAccess: \"Who has access\",\n  nobodyYet: \"Nobody else has access yet.\",\n  pending: \"Pending\",\n  openInvite: \"Open invite link\",\n  copyLink: \"Copy link\",\n  team: \"Team\",\n  teamHint: (name) => `Everyone in ${name} gets access.`,\n  remove: \"Remove access\",\n  removeConfirm: (name) => `Remove access for ${name}?`,\n  revokePending: \"Withdraw invitation\",\n  revokePendingConfirm: (name) => `Withdraw the invitation for ${name}?`,\n  failed: \"That did not work. Please try again.\",\n  loading: \"Loading…\",\n};\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. One role: no choice is offered and each\n   *  row shows its chip. */\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?: Partial<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/**\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 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.\n  const lock = useWriteLock();\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.\n  const needle = (target ? \"\" : email).trim().toLowerCase();\n  const offers =\n    needle !== \"\" &&\n    options.some((o) => o.label.toLowerCase().includes(needle) || (o.sublabel ?? \"\").toLowerCase().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-[var(--text-muted)]\">{intro}</div>}\n\n      {canAdd && (\n        <div className=\"space-y-2\">\n          <div\n            className={cn(\n              \"grid grid-cols-1 gap-2\",\n              choosable && \"sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start\",\n            )}\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={\n                  roles.some((r) => r.description) ? (key: string) => roleOf(key)?.description : undefined\n                }\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=\"brand\"\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-[var(--border)]\">\n            {grantees.map((g) => {\n              const editable = !readOnly && !g.locked;\n              const changeable = editable && onRoleChange !== undefined && choosable;\n              const key = `grantee:${g.id}`;\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-[var(--text-primary)]\">\n                        {g.kind === \"team\" && <UsersRound className=\"size-4 shrink-0\" aria-hidden />}\n                        <span data-private className=\"truncate\">\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 text-xs text-[var(--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={lock.locked ? lock.reason : undefined}>\n                            <ToggleGroup<string>\n                              size=\"sm\"\n                              aria-label={labels.roleOf(g.name)}\n                              options={roles.map((r) => ({ value: r.key, label: r.label }))}\n                              value={g.role}\n                              disabled={busy !== null || lock.locked}\n                              onChange={(next) => {\n                                if (next !== g.role) 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                            commit\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(\n                          \"truncate text-sm\",\n                          p.email ? \"text-[var(--text-primary)]\" : \"text-[var(--text-muted)]\",\n                        )}\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                            commit\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-[var(--text-primary)]\">{title}</h3>}\n      <SharePanel {...panel} />\n    </Card>\n  );\n}\n\nexport interface ShareDialogProps\n  extends SharePanelProps,\n    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 } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\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, Card, IconButton, Spinner } from \"./ui\";\nimport { COMMIT_EXCEPT_BILLING, useWriteLock } from \"./write-lock\";\nimport type { WriteLock } from \"./write-lock\";\nimport type { CardProps } from \"./ui\";\nimport type { DisabledReasonDisplay } from \"./field-parts\";\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\nexport const DEFAULT_SHARE_CARD_LABELS: ShareCardLabels = {\n  dialogTitle: \"Share\",\n  close: \"Close\",\n  email: \"Email address\",\n  emailOptional: \"Email address (optional)\",\n  emailPlaceholder: \"name@example.com\",\n  invalidEmail: \"Enter a complete email address.\",\n  role: \"Role\",\n  roleOf: (name) => `Role of ${name}`,\n  add: \"Share\",\n  whoHasAccess: \"Who has access\",\n  nobodyYet: \"Nobody else has access yet.\",\n  pending: \"Pending\",\n  openInvite: \"Open invite link\",\n  copyLink: \"Copy link\",\n  team: \"Team\",\n  teamHint: (name) => `Everyone in ${name} gets access.`,\n  remove: \"Remove access\",\n  removeConfirm: (name) => `Remove access for ${name}?`,\n  revokePending: \"Withdraw invitation\",\n  revokePendingConfirm: (name) => `Withdraw the invitation for ${name}?`,\n  failed: \"That did not work. Please try again.\",\n  loading: \"Loading…\",\n};\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?: Partial<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 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.\n  const needle = (target ? \"\" : email).trim().toLowerCase();\n  const offers =\n    needle !== \"\" &&\n    options.some((o) => o.label.toLowerCase().includes(needle) || (o.sublabel ?? \"\").toLowerCase().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-[var(--text-muted)]\">{intro}</div>}\n\n      {canAdd && (\n        <div className=\"space-y-2\">\n          <div\n            className={cn(\n              \"grid grid-cols-1 gap-2\",\n              choosable && \"sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start\",\n            )}\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={\n                  roles.some((r) => r.description) ? (key: string) => roleOf(key)?.description : undefined\n                }\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=\"brand\"\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-[var(--border)]\">\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-[var(--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-[var(--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) 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(\n                          \"truncate-until-large text-sm\",\n                          p.email ? \"text-[var(--text-primary)]\" : \"text-[var(--text-muted)]\",\n                        )}\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-[var(--text-primary)]\">{title}</h3>}\n      <SharePanel {...panel} />\n    </Card>\n  );\n}\n\nexport interface ShareDialogProps\n  extends SharePanelProps,\n    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/status-dot.d.ts

@@ -9,6 +9,7 @@ import './field-parts.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
+import './write-lock.js';
 
 /**
  * The tones are `ProgressBar`'s, name for name — which are `Chip`'s, less nothing — so a