@eifi1/ui-kit 0.32.1 → 0.33.0

package/src/components/row-actions.tsx

@@ -7,8 +7,9 @@ import { useLargeText } from "../hooks/use-large-text";
 import { useKitLabels } from "../i18n/kit-labels";
 import { Popover } from "./popover";
 import { Button, CompactControls, IconButton } from "./ui";
-import { useCommitReason } from "./write-lock";
-import type { IconButtonSize } from "./ui";
+import { useCommitReason, type CommitScope } from "./write-lock";
+import type { IconButtonGlyphSize, IconButtonSize } from "./ui";
+import type { TooltipSide } from "./tooltip";
 import type { DataTableColumn } from "./data-table";
 
 /**
@@ -24,8 +25,17 @@ import type { DataTableColumn } from "./data-table";
  *
  * The data is the roster's `UserRowActionList`, generalised: entries, and `false` /
  * `null` for the ones a condition left out (`row.locked || {…}`).
+ *
+ * 0.33 (§10.16): an action carries its state at both sizes — a toggle (`pressed`), a
+ * disclosure (`expanded`, `controls`), a tone, a tour anchor (`dataTour`) — so a row
+ * with an "on" share button or a tour step no longer keeps hand-rolled IconButtons at
+ * Normal and this only at Large (keksdose k15).
  */
 
+/** An action's colour: IconButton's tone inline; in the menu the glyph takes it and the
+ *  words keep the text colour, except `danger`, whose words are the danger text. */
+export type RowActionTone = "default" | "muted" | "info" | "warning" | "danger";
+
 /** One action of a row. */
 export interface RowAction {
   /** React key. Default: the label. */
@@ -57,9 +67,15 @@ export interface RowAction {
    * without one is a small text button; in the menu it is the words alone.
    */
   icon?: LucideIcon | ReactElement;
-  /** `danger` for delete, revoke, erase: the quiet red of IconButton's `tone="danger"`
-   *  inline, the danger text tone in the menu. */
-  tone?: "default" | "danger";
+  /**
+   * `danger` for delete, revoke, erase: the quiet red of IconButton's `tone="danger"`
+   * inline, the danger text tone in the menu. `muted` (an open or add that should not
+   * compete), `info` (a notice-worthy, harmless action: keksdose's reconcile) and
+   * `warning` (a flag that wants attention): IconButton's tone inline; in the menu the
+   * glyph takes it and the words keep the text colour, so `muted` looks like `default`
+   * there (0.33).
+   */
+  tone?: RowActionTone;
   /** Why it is not available for this row. It stays listed, focusable, and says so — an
    *  action that silently vanished would leave the reader looking for it. */
   disabledReason?: ReactNode;
@@ -68,7 +84,7 @@ export interface RowAction {
    * {@link WriteLockProvider} it is refused with the lock's reason, as {@link Button}'s
    * `commit` is, inline and in the menu alike. No provider, or an unlocked one: no effect.
    */
-  commit?: boolean;
+  commit?: CommitScope;
   /**
    * In flight — the request it started has not answered. Inline, the icon turns into
    * IconButton's spinner (`pending`); collapsed, the "⋯" button does, since the menu
@@ -84,6 +100,33 @@ export interface RowAction {
   disabled?: boolean;
   /** Leave it out for this row. */
   hidden?: boolean;
+  /**
+   * A toggle (0.33): `aria-pressed` and IconButton's "on" look inline, `aria-pressed` on
+   * the menu entry. Keep the label the same in both states ("Share budget"): the pressed
+   * state already says whether it is on. Not on an `href` action — a link is not a
+   * toggle — nor with `expanded`.
+   */
+  pressed?: boolean;
+  /**
+   * Opens or closes something IN THE PAGE (0.33) — a share card under the row, an
+   * add-category row: `aria-expanded`, inline and on the menu entry. Not with `pressed`:
+   * a disclosure says open, not on. Not on an `href` action.
+   */
+  expanded?: boolean;
+  /** The `id` of what `expanded` opens: `aria-controls`, inline and on the menu entry. */
+  controls?: string;
+  /**
+   * A tour anchor (0.33, §10.18): `data-tour` on ONE element per action at a time.
+   * Inline, on the action's own control (the IconButton, the small text button, the
+   * link). Collapsed, on an `aria-hidden` box laid over the "⋯" button — `[data-tour=x]`
+   * resolves to a box the size of the "⋯", whose `data-slot="row-actions"` box holds the
+   * button, two anchored actions in one row don't fight over one attribute, and a tap
+   * still reaches the button. Never on the entry in the open menu: the kit's tour takes
+   * the first visible match and the menu is portalled after the row, so a copy there
+   * would never be found, only make the selector match twice. The kit's name for it, as
+   * `AppShellNavItem.dataTour`.
+   */
+  dataTour?: string;
 }
 
 /** What a row's actions may be: entries, and `false` / `null` / `undefined` for the ones
@@ -130,8 +173,14 @@ export interface RowActionsProps {
   size?: RowActionsSize;
   /** The menu's width. Default `"15rem"`, in rem so it grows with the words (§3.2). */
   menuWidth?: `${number}rem`;
-  /** On the wrapper: the inline strip, or the "⋯" button's box. */
+  /** On the wrapper: the inline strip, or the box round the "⋯" button. */
   className?: string;
+  /** The inline glyphs' size, IconButton's `glyphSize` — e.g. 14 in a dense header strip
+   *  (keksdose's category group header). The "⋯" button keeps its box's own. */
+  glyphSize?: IconButtonGlyphSize;
+  /** The inline tooltips' side, IconButton's `tooltipSide` — `"start"` for a table's last
+   *  column, so a bubble does not run off the row's end. Per row: every inline action. */
+  tooltipSide?: TooltipSide;
   labels?: Partial<RowActionsLabels>;
 }
 
@@ -147,6 +196,30 @@ function glyphOf(icon: RowAction["icon"]): ReactNode {
   return <Icon />;
 }
 
+/** The menu glyph's tint per tone (0.33): the words keep the text colour, so the glyph
+ *  carries `info` and `warning` — IconButton's toned colours. `danger` colours the words
+ *  through Button's tone, and `muted` is the default look in a menu. */
+const MENU_GLYPH_TONE: Partial<Record<RowActionTone, string>> = {
+  info: "text-info",
+  warning: "text-warning",
+};
+
+/** The state an action's control says, inline and in the menu alike: `aria-expanded` and
+ *  `aria-controls` for a disclosure (a toggle's `aria-pressed` goes through the button's
+ *  own `pressed`, which also draws the "on" look). */
+function stateAttrs(action: RowAction) {
+  return {
+    "aria-expanded": action.expanded,
+    "aria-controls": action.expanded === undefined ? undefined : action.controls,
+  };
+}
+
+/** An action's tone on its inline control, for a caller's CSS and a test: `data-tone`,
+ *  left off for the default look. */
+function toneAttr(tone: RowActionTone | undefined) {
+  return { "data-tone": tone === undefined || tone === "default" ? undefined : tone };
+}
+
 /**
  * A row's actions, inline or as a "⋯" menu — see {@link RowActionsCollapse}. Every
  * control stops its click (and the Enter/Space it stands for) from reaching the row, so
@@ -170,6 +243,8 @@ export function RowActions({
   size = "xs",
   menuWidth = "15rem",
   className,
+  glyphSize,
+  tooltipSide,
   labels: labelsProp,
 }: RowActionsProps) {
   const labels = useKitLabels("rowActions", DEFAULT_ROW_ACTIONS_LABELS, labelsProp);
@@ -181,7 +256,13 @@ export function RowActions({
     const strip = (
       <div data-slot="row-actions" className={cn("inline-flex items-center gap-0.5", className)}>
         {entries.map((action) => (
-          <InlineAction key={action.key ?? action.label} action={action} size={size} />
+          <InlineAction
+            key={action.key ?? action.label}
+            action={action}
+            size={size}
+            glyphSize={glyphSize}
+            tooltipSide={tooltipSide}
+          />
         ))}
       </div>
     );
@@ -192,37 +273,43 @@ export function RowActions({
   const title = name ? labels.actionsFor(name) : labels.actions;
   // The menu closed when the action was chosen, so what is in flight shows on "⋯".
   const busy = entries.some((action) => action.pending);
+  const anchored = entries.filter((action) => action.dataTour);
   return (
-    <Popover
-      width={menuWidth}
-      aria-label={title}
-      className="p-1"
-      trigger={({ open, toggle, ref }) => (
-        <IconButton
-          ref={ref}
-          size={size}
-          label={title}
-          // "⋯" is read by everyone as "more actions"; the menu it opens is the words.
-          labelVisible={false}
-          aria-haspopup="dialog"
-          aria-expanded={open}
-          pending={busy}
-          stopPropagation
-          onClick={toggle}
-          className={className}
-        >
-          <MoreHorizontal />
-        </IconButton>
-      )}
-    >
-      {(close) => (
-        // React carries an event out of a portal along the COMPONENT tree, so a click on
-        // an entry (or between two) reached a clickable row or a DataTable `onRowClick`
-        // the menu was opened from, though the panel is nowhere near it in the page —
-        // only the "⋯" trigger stopped its own (0.32.1, keksdose's 0.32 report). Stopped
-        // here for the whole panel: clicks, and the Enter / Space a row also listens for.
-        // Escape goes on, to the popover that closes on it.
-        <div role="presentation" onClick={stopClick} onKeyDown={stopActivationKeys}>
+    // The "⋯" in a box of its own, the inline strip's slot: the tour anchors of the
+    // collapsed actions lie over the button in it (see `dataTour`), and `className`
+    // places the box as it places the strip.
+    <div data-slot="row-actions" className={cn("relative inline-flex", className)}>
+      <Popover
+        width={menuWidth}
+        aria-label={title}
+        className="p-1"
+        trigger={({ open, toggle, ref }) => (
+          <IconButton
+            ref={ref}
+            size={size}
+            label={title}
+            // "⋯" is read by everyone as "more actions"; the menu it opens is the words.
+            labelVisible={false}
+            aria-haspopup="dialog"
+            aria-expanded={open}
+            pending={busy}
+            stopPropagation
+            onClick={toggle}
+          >
+            <MoreHorizontal />
+          </IconButton>
+        )}
+        // React carries an event out of a portal along the COMPONENT tree, so a click in
+        // the menu reached a clickable row or a DataTable `onRowClick` the menu was opened
+        // from, though the panel is nowhere near it in the page — only the "⋯" trigger
+        // stopped its own (keksdose's 0.32 report). Stopped on the PANEL itself, its padding
+        // and border included (0.32.2: 0.32.1 stopped it on an inner box, and a click on
+        // the panel's `p-1` still went through): clicks, and the Enter / Space a row also
+        // listens for. Escape goes on, to the popover's own handler that closes it.
+        onClick={stopClick}
+        onKeyDown={stopActivationKeys}
+      >
+        {(close) => (
           <ul data-slot="row-actions-menu" className="space-y-0.5">
             {entries.map((action) => (
               <li key={action.key ?? action.label}>
@@ -230,9 +317,18 @@ export function RowActions({
               </li>
             ))}
           </ul>
-        </div>
-      )}
-    </Popover>
+        )}
+      </Popover>
+      {anchored.map((action) => (
+        // The More cell's TourAnchor: decoration over the button, which keeps every tap.
+        <span
+          key={action.key ?? action.label}
+          aria-hidden
+          data-tour={action.dataTour}
+          className="pointer-events-none absolute inset-0"
+        />
+      ))}
+    </div>
   );
 }
 
@@ -260,10 +356,15 @@ function useActionHref(action: RowAction): string | undefined {
 function MenuAction({ action, close }: { action: RowAction; close: () => void }) {
   const href = useActionHref(action);
   const glyph = glyphOf(action.icon);
+  const glyphTone = action.tone === undefined ? undefined : MENU_GLYPH_TONE[action.tone];
   const words = (
     <>
       {glyph && (
-        <span aria-hidden className="flex shrink-0 [&_svg]:size-4">
+        <span
+          aria-hidden
+          data-tone={glyphTone ? action.tone : undefined}
+          className={cn("flex shrink-0 [&_svg]:size-4", glyphTone)}
+        >
           {glyph}
         </span>
       )}
@@ -294,11 +395,13 @@ function MenuAction({ action, close }: { action: RowAction; close: () => void })
   }
   return (
     <Button
+      {...stateAttrs(action)}
       type="button"
       variant="ghost"
       size="sm"
       stretch
       tone={tone}
+      pressed={action.pressed}
       disabledReason={action.disabledReason}
       commit={action.commit}
       pending={action.pending}
@@ -312,20 +415,37 @@ function MenuAction({ action, close }: { action: RowAction; close: () => void })
 }
 
 /** One inline action: an IconButton with its icon, else a small text button — each a
- *  link for an `href` (see {@link useActionHref}). */
-function InlineAction({ action, size }: { action: RowAction; size: RowActionsSize }) {
+ *  link for an `href` (see {@link useActionHref}). The control carries the action's
+ *  state, its tone and its tour anchor. */
+function InlineAction({
+  action,
+  size,
+  glyphSize,
+  tooltipSide,
+}: {
+  action: RowAction;
+  size: RowActionsSize;
+  glyphSize?: IconButtonGlyphSize;
+  tooltipSide?: TooltipSide;
+}) {
   const href = useActionHref(action);
   const glyph = glyphOf(action.icon);
-  const tone = action.tone === "danger" ? "danger" : undefined;
+  const iconTone = action.tone === "default" ? undefined : action.tone;
+  // A text button has Button's two tones; `info` and `warning` are a glyph's colours.
+  const textTone = action.tone === "danger" || action.tone === "muted" ? action.tone : undefined;
+  const marks = { "data-tour": action.dataTour, ...toneAttr(action.tone) };
   if (glyph) {
     if (href !== undefined) {
       return (
         <IconButton
+          {...marks}
           href={href}
           external={action.external}
           size={size}
+          glyphSize={glyphSize}
           label={action.label}
-          tone={tone}
+          tooltipSide={tooltipSide}
+          tone={iconTone}
           disabled={action.disabled}
           stopPropagation
           onClick={() => action.onSelect?.()}
@@ -336,9 +456,14 @@ function InlineAction({ action, size }: { action: RowAction; size: RowActionsSiz
     }
     return (
       <IconButton
+        {...marks}
+        {...stateAttrs(action)}
         size={size}
+        glyphSize={glyphSize}
         label={action.label}
-        tone={tone}
+        tooltipSide={tooltipSide}
+        tone={iconTone}
+        pressed={action.pressed}
         disabledReason={action.disabledReason}
         commit={action.commit}
         pending={action.pending}
@@ -362,17 +487,29 @@ function InlineAction({ action, size }: { action: RowAction; size: RowActionsSiz
   };
   if (href !== undefined) {
     return (
-      <Button href={href} external={action.external} variant="ghost" size="sm" tone={tone} disabled={action.disabled} {...stop}>
+      <Button
+        {...marks}
+        href={href}
+        external={action.external}
+        variant="ghost"
+        size="sm"
+        tone={textTone}
+        disabled={action.disabled}
+        {...stop}
+      >
         {action.label}
       </Button>
     );
   }
   return (
     <Button
+      {...marks}
+      {...stateAttrs(action)}
       type="button"
       variant="ghost"
       size="sm"
-      tone={tone}
+      tone={textTone}
+      pressed={action.pressed}
       disabledReason={action.disabledReason}
       commit={action.commit}
       pending={action.pending}
@@ -401,6 +538,10 @@ export interface RowActionsColumnOptions<T> {
   collapse?: RowActionsCollapse;
   /** Default `xs`. */
   size?: RowActionsSize;
+  /** See {@link RowActionsProps.glyphSize}. */
+  glyphSize?: IconButtonGlyphSize;
+  /** See {@link RowActionsProps.tooltipSide} — `"start"` in a table's last column. */
+  tooltipSide?: TooltipSide;
   /**
    * The column's name as plain text — the column-settings checklist and the phone
    * card's label read it (`DataTableColumn.headerText`). Pass the app's own word; left
@@ -431,6 +572,8 @@ export function rowActionsColumn<T>({
   name,
   collapse,
   size,
+  glyphSize,
+  tooltipSide,
   headerText,
   labels,
   column,
@@ -440,7 +583,15 @@ export function rowActionsColumn<T>({
     header: <RowActionsHeader text={headerText} labels={labels} />,
     headerText,
     cell: (row) => (
-      <RowActions actions={actions(row)} name={name?.(row)} collapse={collapse} size={size} labels={labels} />
+      <RowActions
+        actions={actions(row)}
+        name={name?.(row)}
+        collapse={collapse}
+        size={size}
+        glyphSize={glyphSize}
+        tooltipSide={tooltipSide}
+        labels={labels}
+      />
     ),
     className: "w-px whitespace-nowrap text-end",
     headClassName: "w-px",

package/src/components/share-card.tsx

@@ -18,7 +18,8 @@ import { Caption, SectionLabel } from "./text";
 import { ToggleGroup } from "./toggle-group";
 import { Tooltip } from "./tooltip";
 import { Button, Card, IconButton, Spinner } from "./ui";
-import { useWriteLock } from "./write-lock";
+import { COMMIT_EXCEPT_BILLING, useWriteLock } from "./write-lock";
+import type { WriteLock } from "./write-lock";
 import type { CardProps } from "./ui";
 import type { DisabledReasonDisplay } from "./field-parts";
 
@@ -174,8 +175,11 @@ type MaybePromise = void | Promise<unknown>;
 
 export interface SharePanelProps {
   grantees: ShareGrantee[];
-  /** The role vocabulary, in display order. One role: no choice is offered and each
-   *  row shows its chip. */
+  /** The role vocabulary, in display order, NARROWEST FIRST — viewer, then editor, as
+   *  Kurvenschmiede lists them. One role: no choice is offered and each row shows its
+   *  chip. The order is what tells a lowering from a raise under a write lock: a lapsed
+   *  plan lets a grantee's role be lowered, which removes access, and never raised
+   *  (docs/billing-harmonization.md decision 26 as amended, §12.36). */
   roles: ShareRole[];
   pending?: SharePendingGrant[];
   /** Completions for the field. Left out: the field is a plain address field. */
@@ -244,6 +248,40 @@ function LockedRoleChoice({ reason, children }: { reason: ReactNode; children: R
   return reason === undefined ? children : <Tooltip label={reason}>{children}</Tooltip>;
 }
 
+/** What a grantee's role choice may do under the write lock: `group` locks the whole
+ *  choice with that reason; `raise` leaves it live for a lowering and refuses a raise
+ *  with that reason. Neither: the choice is free. */
+interface RoleChoiceLock {
+  group?: ReactNode;
+  raise?: ReactNode;
+}
+
+/**
+ * A grantee's role choice under the write lock (decision 26 as amended,
+ * docs/billing-harmonization.md §12.36). `roles` is read narrowest first, so an option
+ * before the grantee's role LOWERS it: that removes access, which a lapsed plan allows
+ * (§12.13), so it sees the lock as `COMMIT_EXCEPT_BILLING` does (`removal`). An option
+ * after it RAISES it — a role grant, which every lock refuses (`every`), billing's with
+ * its own reason. Kurvenschmiede's server refuses exactly that: a widening while lapsed,
+ * not a narrowing (`shares_router.py:229-234`).
+ *
+ * A segmented choice is locked as a whole, so per grantee: under a demo's lock nothing
+ * moves; under billing's, a grantee at the narrowest role has only raises (locked), one
+ * at the widest only lowerings (live), and one in between keeps its lowerings while its
+ * raises are dimmed and refused. A role the vocabulary does not list cannot be told
+ * either way and stays locked.
+ */
+function roleChoiceLock(index: number, count: number, every: WriteLock, removal: WriteLock): RoleChoiceLock {
+  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 } : {};
+}
+
+/** The look of a raise refused while the lowerings beside it stay live — the dimmed
+ *  segment of a locked group (ToggleGroup's `dimmed`), on that segment alone. */
+const RAISE_REFUSED = "cursor-not-allowed opacity-50 hover:bg-transparent dark:hover:bg-transparent";
+
 /**
  * The body both forms share: the add form, then the list. Exported for an app that
  * frames it itself (a settings section, a sheet).
@@ -272,8 +310,12 @@ export function SharePanel({
   const labels = useKitLabels("shareCard", DEFAULT_SHARE_CARD_LABELS, labelsProp);
   const confirm = useConfirm();
   // Every commit below opts into the surrounding WriteLockProvider with `commit`; the
-  // role choices save on change, cannot take it, and read the lock themselves.
+  // role choices save on change, cannot take it, and read the lock themselves. Adding
+  // and raising a role see every lock (`lock`); removing access, withdrawing an
+  // invitation and lowering a role see it as a lapsed plan's lock allows them
+  // (`removal`, COMMIT_EXCEPT_BILLING; docs/billing-harmonization.md §12.13, §12.36).
   const lock = useWriteLock();
+  const removal = useWriteLock(COMMIT_EXCEPT_BILLING);
   const [email, setEmail] = useState("");
   // A candidate taken from the completion. Typing again lets it go: the field then
   // names an address again, and a chosen team beside free text would be two answers
@@ -454,6 +496,8 @@ export function SharePanel({
               const editable = !readOnly && !g.locked;
               const changeable = editable && onRoleChange !== undefined && choosable;
               const key = `grantee:${g.id}`;
+              const rank = roles.findIndex((r) => r.key === g.role);
+              const roleLock = roleChoiceLock(rank, roles.length, lock, removal);
               return (
                 <li key={key} className="space-y-1.5 py-2 first:pt-0 last:pb-0">
                   {/* Wraps rather than squeezes: on a phone the controls drop under
@@ -462,13 +506,13 @@ export function SharePanel({
                     <div className="min-w-0 flex-1 basis-40">
                       <div className="flex min-w-0 items-center gap-1.5 text-sm font-medium text-[var(--text-primary)]">
                         {g.kind === "team" && <UsersRound className="size-4 shrink-0" aria-hidden />}
-                        <span data-private className="truncate">
+                        <span data-private className="truncate-until-large">
                           {g.name}
                         </span>
                         {!changeable && <ShareRoleChip role={roleOf(g.role)} />}
                       </div>
                       {(g.kind === "team" || g.email) && (
-                        <div data-private className="truncate text-xs text-[var(--text-muted)]">
+                        <div data-private className="truncate-until-large text-xs text-[var(--text-muted)]">
                           {g.kind === "team" ? labels.team : g.email}
                         </div>
                       )}
@@ -476,15 +520,23 @@ export function SharePanel({
                     {(changeable || (editable && onRemove)) && (
                       <div className={ROW_CONTROLS}>
                         {changeable && (
-                          <LockedRoleChoice reason={lock.locked ? lock.reason : undefined}>
+                          <LockedRoleChoice reason={roleLock.group ?? roleLock.raise}>
                             <ToggleGroup<string>
                               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 !== undefined && i > rank ? RAISE_REFUSED : undefined,
+                              }))}
                               value={g.role}
-                              disabled={busy !== null || lock.locked}
+                              disabled={busy !== null || roleLock.group !== undefined}
                               onChange={(next) => {
-                                if (next !== g.role) void run(`role:${g.id}`, () => onRoleChange(g, next));
+                                if (next === g.role) return;
+                                // A raise under a lock that allows only lowerings: refused,
+                                // and the tooltip round the choice says why.
+                                if (roleLock.raise !== undefined && roles.findIndex((r) => r.key === next) > rank) return;
+                                void run(`role:${g.id}`, () => onRoleChange(g, next));
                               }}
                             />
                           </LockedRoleChoice>
@@ -493,7 +545,8 @@ export function SharePanel({
                           <IconButton
                             tone="danger"
                             size="xs"
-                            commit
+                            // Removing access: a lapsed plan allows it (§12.13).
+                            commit={COMMIT_EXCEPT_BILLING}
                             label={labels.remove}
                             // The icon alone at every text size (§10.8): the row's one
                             // control beside its role toggle, where "Remove access" as
@@ -533,7 +586,7 @@ export function SharePanel({
                       <div
                         data-private={p.email ? true : undefined}
                         className={cn(
-                          "truncate text-sm",
+                          "truncate-until-large text-sm",
                           p.email ? "text-[var(--text-primary)]" : "text-[var(--text-muted)]",
                         )}
                       >
@@ -553,7 +606,8 @@ export function SharePanel({
                           <IconButton
                             tone="danger"
                             size="xs"
-                            commit
+                            // Withdrawing an invitation removes access too (§12.13).
+                            commit={COMMIT_EXCEPT_BILLING}
                             label={labels.revokePending}
                             // As the grantee's remove above: one action beside the
                             // copy icon (which is an icon at every size), and the

package/src/components/status-dot.tsx

@@ -75,13 +75,13 @@ const SIZE: Record<StatusDotSize, string> = { sm: "size-2", md: "size-2.5", lg:
  * (`1lh`, the label's own line height, which the dot inherits) leaves around it.
  * `large:` classes, so Normal keeps its one centred line.
  *
- * `break-words`, not `[overflow-wrap:anywhere]`: a legend often sits in a table, and
- * `anywhere` lowers the label's min-content width to one letter, so an auto-sized column
- * squeezed it to a letter per line (the showcase's tone table at 360 px, Extra large).
- * `break-word` keeps each word whole wherever the width is the content's to choose, and
- * still breaks one that cannot fit its line at all.
+ * 0.33 (§10.17): the kit's one `truncate-until-large` (tokens.css) in place of this
+ * file's own `truncate` + `large:whitespace-normal large:break-words`. The utility breaks
+ * with `overflow-wrap: anywhere`, which lowers the label's min-content width: a legend in
+ * an auto-sized table column (the showcase's tone table at 360 px, Extra large) wants the
+ * column given a width, or it is squeezed to a letter per line.
  */
-const LABEL_WRAP_AT_LARGE = "large:whitespace-normal large:break-words";
+const LABEL_TRUNCATE = "truncate-until-large";
 const DOT_ON_FIRST_LINE: Record<StatusDotSize, string> = {
   sm: "large:mt-[calc((1lh_-_0.5rem)/2)]",
   md: "large:mt-[calc((1lh_-_0.625rem)/2)]",
@@ -155,7 +155,7 @@ export function StatusDot({
     // span is one ARIA forbids and screen readers ignore.
     <span {...rest} className={cn("inline-flex min-w-0 items-center gap-1.5 text-sm large:items-start", className)}>
       {dot}
-      <span className={cn("min-w-0 truncate", LABEL_WRAP_AT_LARGE)}>{label}</span>
+      <span className={cn("min-w-0", LABEL_TRUNCATE)}>{label}</span>
     </span>
   );
 }

package/src/components/swatch-picker.tsx

@@ -5,7 +5,7 @@ import { useKitLabels } from "../i18n/kit-labels";
 import { TILE_SIZE, TileRadioGroup } from "./tile-radio";
 import type { TileItem, TileSize } from "./tile-radio";
 import { Tooltip } from "./tooltip";
-import { useCommitReason } from "./write-lock";
+import { useCommitReason, type CommitScope } from "./write-lock";
 import { hasContent, LabelStrip } from "./field-parts";
 
 export interface SwatchPickerLabels {
@@ -115,7 +115,7 @@ export interface SwatchPickerProps<T extends string>
   /** This picker COMMITS — choosing a colour saves it. Under a locked
    *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's
    *  reason, as {@link Button}'s `commit` does. */
-  commit?: boolean;
+  commit?: CommitScope;
 }
 
 /**