@eifi1/ui-kit 0.33.0 → 0.33.1

package/src/admin/plan-change.tsx

@@ -2,6 +2,8 @@ import { useCallback, useMemo, useState } from "react";
 import type { ReactNode } from "react";
 
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { pluralForm } from "../i18n/plurals";
+import type { PluralForms } from "../i18n/plurals";
 import { formatNumber, EMPTY_FORMATTED_VALUE } from "../lib/format";
 import { toLocalIso } from "../lib/dates";
 import type { DataTableColumn } from "../components/data-table";
@@ -61,8 +63,14 @@ export interface PlanChangeLabels {
   untilDone: (date: string) => string;
   /** The result: the account owns more than the new plan allows. */
   overLimit: string;
-  /** The column's usage, spelled out (its tooltip): "1 of 5 budgets". Figures arrive
-   *  formatted; `dimension` is the app's word, as `usage` gives it. */
+  /**
+   * The column's usage, spelled out (its tooltip): "1 of 5 budgets". Figures arrive
+   * formatted; `dimension` is the app's word, as `usage.label` gives it — since 0.33.1
+   * in the form the LIMIT takes when the label gives its plural forms ("1 of 1 budget",
+   * "1 of 5 budgets"): in every shipped language the word follows the limit, or heads
+   * the line in German, whose `von` would want a dative plural no app form carries
+   * ("Budgets: 1 von 5"). An override of yours gets the same word.
+   */
   usageOf: (used: string, limit: string, dimension: string) => string;
 }
 
@@ -98,8 +106,17 @@ export interface PlanColumnUsage {
   used: number;
   /** The plan's limit for it; `null` (unlimited, or none known): no line. */
   limit: number | null;
-  /** The app's word for what is counted, as in "1 of 5 budgets". */
-  label: string;
+  /**
+   * The app's word for what is counted, as it reads after a number: "budgets" in "1 of 5
+   * budgets" — the word in a sentence, not a heading's "Budgets".
+   *
+   * Its plural forms (0.33.1, keksdose): `{ one: "budget", other: "budgets" }` — your
+   * catalogue's `_one` / `_other` pair, any CLDR category allowed, `other` for the rest
+   * ({@link PluralForms}). The column picks the form for the limit in the provider's
+   * locale, so a plan of one reads "1 of 1 budget". A plain string is used as it is,
+   * whatever the count.
+   */
+  label: string | PluralForms;
 }
 
 export interface PlanColumnOptions<T> {
@@ -113,13 +130,18 @@ export interface PlanColumnOptions<T> {
    *  undefined for a row: no chip — billing off, where a status says nothing. */
   status?: (row: T) => SubscriptionStatus | undefined;
   /** The row's usage of its plan's limit: "1/5" under the name, "1 of 5 budgets" in
-   *  the tooltip. Undefined for a row, or a `null` limit: no line. */
+   *  the tooltip (`planChange.usageOf`, with the label's form for the limit). Undefined
+   *  for a row, or a `null` limit: no line. */
   usage?: (row: T) => PlanColumnUsage | undefined;
   /** A select filter over these codes, each named by `planName`. Left out: none. */
   filterPlans?: readonly string[];
   /**
    * The sort. Default: by the plan code (keksdose's, `users-panel.tsx:739`). A function:
    * by its value — the catalogue's `sort` for rank order. `false`: not sortable.
+   *
+   * Client-side only, as every column's `sortBy`: a `DataTable` with `serverPagination`
+   * holds one page, so it sorts nothing itself — with `onSortsChange` it reports the
+   * column's `key` (default `"plan"`), and your server orders the rows by it.
    */
   sortBy?: false | ((row: T) => string | number | null | undefined);
   /** The header's text. Default `planChange.column`. */
@@ -145,6 +167,8 @@ function PlanCell({
 }) {
   const locale = useKitLocale();
   const figure = (value: number) => formatNumber(value, { locale });
+  const word = (label: PlanColumnUsage["label"], limit: number) =>
+    typeof label === "string" ? label : pluralForm(limit, label, locale);
   return (
     <div className="whitespace-nowrap" data-plan={code ?? undefined}>
       <div className="flex items-center gap-1.5">
@@ -155,7 +179,7 @@ function PlanCell({
       {usage && usage.limit !== null && (
         // "1/5" under the plan, "1 of 5 budgets" in the tooltip: the sentence spelled out
         // inline was the widest thing in keksdose's table.
-        <Tooltip label={usageOf(figure(usage.used), figure(usage.limit), usage.label)}>
+        <Tooltip label={usageOf(figure(usage.used), figure(usage.limit), word(usage.label, usage.limit))}>
           <span className="block text-xs tabular-nums text-[var(--text-muted)]">
             {figure(usage.used)}/{figure(usage.limit)}
           </span>
@@ -175,7 +199,11 @@ function PlanCell({
  *       plan: (u) => u.plan,
  *       planName,
  *       status: billingOn ? (u) => u.subscription?.status : undefined,
- *       usage: (u) => ({ used: u.budgets_owned, limit: u.limits.budgets, label: t("budgets") }),
+ *       usage: (u) => ({
+ *         used: u.budgets_owned,
+ *         limit: u.limits.budgets,
+ *         label: { one: t("planUsage.budget_one"), other: t("planUsage.budget_other") },
+ *       }),
  *       filterPlans: plans.map((p) => p.code),
  *     })]
  *

package/src/billing/pay-page.ts

@@ -73,9 +73,10 @@ function kitLanguageOf(tag: unknown): PayPageLanguage | undefined {
  * The kit's locale → Paddle's checkout locale: `de-CH` → `de`, `zh` → `zh-Hans`, `hu` →
  * `en` (Paddle has no Hungarian), the others as they are. Any tag is read as the kit
  * reads it (`de-AT` is the one German, `zh-TW` the one Chinese); one the kit doesn't
- * ship is English.
+ * ship is English, and so is `undefined` (0.33.1) — `useKitLocale()` with no provider
+ * locale.
  */
-export function paddleLocale(kitLocale: string): string {
+export function paddleLocale(kitLocale: string | undefined): string {
   return PADDLE_LOCALES[kitLanguageOf(kitLocale) ?? "en"];
 }
 
@@ -86,11 +87,14 @@ export function paddleLocale(kitLocale: string): string {
  *
  *     const { url } = await api.checkout({ plan, interval, currency });
  *     noteCheckoutStarted(user.id, overview);
- *     window.location.assign(payPageUrl(url, i18n.language));
+ *     window.location.assign(payPageUrl(url, locale));   // locale = useKitLocale()
  *
- * A wrong `lang` costs nothing but the language: the page falls back to the browser's.
+ * `locale` may be `undefined` (0.33.1, keksdose): `useKitLocale()` answers that with no
+ * provider locale, the runtime's language. The link then goes without `lang`, and the
+ * page speaks the browser's language, else English — what a missing or wrong `lang`
+ * already did: it costs nothing but the language.
  */
-export function payPageUrl(checkoutUrl: string, locale: string): string {
+export function payPageUrl(checkoutUrl: string, locale: string | undefined): string {
   const language = kitLanguageOf(locale);
   if (!language) return checkoutUrl;
   let url: URL;

package/src/components/autocomplete.tsx

@@ -266,7 +266,7 @@ function AutocompleteInner<V extends string | number = string>(
   // the highlight put one there.
   const activeId = expanded && isOptionEnabled(results[active]) ? optionId(active) : undefined;
   useActiveOptionScroll(activeId);
-  const { rect, top, maxHeight } = useAnchoredPanel(fieldRef, expanded, { preferredHeight: 256 });
+  const { rect, top, bottom, maxHeight, above } = useAnchoredPanel(fieldRef, expanded, { preferredHeight: 256 });
   const dir = useAnchorDir(fieldRef, expanded);
 
   const close = () => {
@@ -484,7 +484,10 @@ function AutocompleteInner<V extends string | number = string>(
             dir={dir}
             onMouseDown={(e) => e.preventDefault()}
             className="fixed z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg"
-            style={{ top, left: rect.left, width: rect.width, maxHeight }}
+            // Flipped above, the list hangs from its bottom edge: three rows under a
+            // 256 px cap, placed by `top`, floated ~176 px above the field (keksdose K1),
+            // and the rows come and go as the user types.
+            style={{ ...(above ? { bottom } : { top }), left: rect.left, width: rect.width, maxHeight }}
           >
             {results.length > 0 && (
               <ul

package/src/components/combobox-core.tsx

@@ -899,11 +899,14 @@ export function ComboboxPanel<V extends string | number>({
       onKeyDown={onKeyDown}
       // `placement` keeps the panel inside the region actually on screen: on a phone
       // the search box below pulls up the keyboard, and a panel pinned under a
-      // low trigger would otherwise sit entirely behind it (feedback #135).
+      // low trigger would otherwise sit entirely behind it (feedback #135). Flipped
+      // above, it hangs from its bottom edge, so a list shorter than its cap still meets
+      // the trigger (keksdose K1); the edge not in use is cleared, a caller's included.
       style={{
         ...style,
         position: "fixed",
-        top: placement.top,
+        top: placement.above ? undefined : placement.top,
+        bottom: placement.above ? placement.bottom : undefined,
         ...inline,
         width: rect.width,
         // 220 px at Normal, in rem so the panel's text keeps its room at Large (§3.2).

package/src/components/combobox.tsx

@@ -112,7 +112,7 @@ function SuggestionList({
   panelRef: RefObject<HTMLDivElement | null>;
   children: ReactNode;
 }) {
-  const { rect, top, maxHeight } = useAnchoredPanel(anchorRef, true, { preferredHeight: 256 });
+  const { rect, top, bottom, maxHeight, above } = useAnchoredPanel(anchorRef, true, { preferredHeight: 256 });
   const dir = useAnchorDir(anchorRef, true);
   if (!rect) return null;
   return createPortal(
@@ -124,7 +124,9 @@ function SuggestionList({
       // Portalled out of the form's `dir`; the field's is put back. The list is
       // exactly the field's width, so `left` places it in either direction.
       dir={dir}
-      style={{ top, left: rect.left, width: rect.width }}
+      // Flipped above, the list hangs from its bottom edge: it filters as the user
+      // types, and a short one placed by `top` floated above the field (keksdose K1).
+      style={{ ...(above ? { bottom } : { top }), left: rect.left, width: rect.width }}
     >
       <ul id={id} role="listbox" data-clips="" className={LIST_CLASS} style={{ maxHeight }}>
         {children}

package/src/components/dropdown.tsx

@@ -341,8 +341,18 @@ export function DropdownPanel({
       dir={dir}
       // The caller's `style` is kept underneath, but the placement is measured rather
       // than chosen (dev#548: an `overflow` ancestor clipped a third of this panel
-      // away), so those five values are the panel's own.
-      style={{ ...style, position: "fixed", top: anchored.top, left, width, maxHeight: anchored.maxHeight }}
+      // away), so these values are the panel's own. Flipped above, it hangs from its
+      // bottom edge, so a list shorter than its cap still meets the trigger (keksdose
+      // K1); the edge not in use is cleared, a caller's included.
+      style={{
+        ...style,
+        position: "fixed",
+        top: anchored.above ? undefined : anchored.top,
+        bottom: anchored.above ? anchored.bottom : undefined,
+        left,
+        width,
+        maxHeight: anchored.maxHeight,
+      }}
       className={cn(
         "z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
         // The list, not the panel, is what scrolls: the search header has to stay put

package/src/components/full-bleed-dialog.tsx

@@ -154,6 +154,12 @@ export function FullBleedDialog({
   // This is the phone's row EDITOR and its first child is usually an input; focusing it
   // would pull the software keyboard up over half the form before the user has said
   // which field they came for. `Modal` made the same call for the same reason.
+  //
+  // That default only decides when nothing inside asked for focus. A field the app
+  // autofocuses on purpose keeps it (0.33.1): keksdose's create card autofocuses its
+  // amount, and the trap used to take focus straight back to the dialog — and on a
+  // phone the numpad sheet, which shows only while the field is focused, went with it
+  // (live #402). Closing still hands focus back to whatever opened the dialog.
   useFocusTrap(dialogRef, { active: open });
 
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {

package/src/components/modal.tsx

@@ -333,6 +333,11 @@ function ModalPanel({
   // hook adds per-keystroke recomputation, a guard on restoring to a detached node,
   // and nesting, none of which this copy had. Released when `open` turns false, which
   // hands focus back to the trigger while the panel is still on its way out.
+  //
+  // "The panel itself" only when nothing inside asked for focus: a field the app
+  // autofocuses on purpose keeps it (0.33.1, keksdose live #402 — the same trap took
+  // an autofocused amount straight back in `FullBleedDialog`). Its keyboard is then the
+  // one the app chose to show; the trigger still gets focus back on close.
   useFocusTrap(panelRef, { active, initialFocus: "container" });
   const leaving = closing || exiting;
 

package/src/components/number-field.tsx

@@ -141,6 +141,13 @@ function roundTo(n: number, digits: number | undefined): number {
  * or a dot typed as the decimal in a comma locale); it is re-spelt in the locale's mark
  * when it commits.
  *
+ * LOCKED (0.33.1, Kurvenschmiede). A field that saves itself takes `commit` (or a
+ * `disabledReason` of its own), NumberInput's: under a locked `WriteLockProvider` it
+ * stays in the tab order showing its value, `readOnly`, with the lock's reason in the
+ * kit Tooltip and its description; the step keys, the calculator and the numpad are
+ * off, and nothing reaches `onValueChange` or `onCommit`. `disabled` takes it out of
+ * the tab order, which is what a lock must not do.
+ *
  * NOT FOR MONEY. `digits={2}` rounds, but a currency is more than two decimals: JPY has
  * none, a unit price has four, and the chip, the minor-unit default and `min`/`max` on
  * the SIGNED figure are {@link MoneyField}'s (number value) and {@link AmountInput}'s

package/src/components/number-input.tsx

@@ -5,7 +5,8 @@ import { NumberPadSheet, type NumberPadSheetLabels } from "./numpad-sheet";
 import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField } from "./ui";
 import { CURRENCIES } from "./currency-select";
 import { hasMessage, mergeDescribedBy } from "./choice-parts";
-import { useInlineHint } from "./field-parts";
+import { LockedReason, useInlineHint, useLockReason } from "./field-parts";
+import type { CommitScope } from "./write-lock";
 import { cn } from "../lib/cn";
 import { commitExpression, formatResult } from "../lib/calc";
 import { decimalMark, localizeMark, readTyped, showsTyped } from "../lib/decimal-marks";
@@ -135,6 +136,32 @@ interface NumberInputProps {
    *  numeric field that clamps what is typed as well. */
   min?: number;
   max?: number;
+  /**
+   * Why the value cannot be changed — {@link Button}'s `disabledReason`, for a number
+   * that SAVES itself: a setting committed on blur, a figure in a row editor
+   * (Kurvenschmiede's session page, 0.33.1). `disabled` takes the field out of the tab
+   * order, so the reason never reached a keyboard, and Kurvenschmiede wrote its own
+   * `CommitInput` to keep it in.
+   *
+   * With a reason the field stays in the tab order and shows its value, `readOnly` (the
+   * settled grey FIELD_BASE gives a `[readonly]` field) and `aria-disabled`, as the
+   * Combobox family's lock is. Nothing changes the value: the step keys do nothing, the
+   * calculator and the phone's numpad are not offered, and neither blur nor Enter
+   * commits — so `onChange` and `onCommit` are never called. Enter is swallowed, so the
+   * field does not submit the form around it. The reason is in the kit {@link Tooltip}
+   * and on the input's `aria-describedby`, between the caption and the error. Wins over
+   * `disabled`.
+   */
+  disabledReason?: ReactNode;
+  /**
+   * This field COMMITS — {@link Button}'s `commit`: under a locked
+   * {@link WriteLockProvider} it is locked the `disabledReason` way with the lock's reason
+   * (which wins over its own). A field whose value only reaches the server through the
+   * form's Save leaves this off and stays editable under the lock; the Save takes
+   * `commit`. No provider, or an unlocked one: no effect. {@link NumberField} and
+   * {@link IntegerField} pass it on.
+   */
+  commit?: CommitScope;
 }
 
 /** Decimal places of `n` as written ("0.25" → 2, "1e-7" → 7), for decimal-exact
@@ -289,11 +316,18 @@ export function NumberInput(props: NumberInputProps) {
     step,
     min,
     max,
+    disabledReason,
+    commit: commitScope,
   } = props;
   const generatedId = useId();
   const fieldId = id ?? generatedId;
   const hintId = useId();
   const errorId = useId();
+  // The lock: focusable, `readOnly`, nothing changes or commits — see `disabledReason`.
+  const lock = useLockReason(commitScope, disabledReason);
+  const locked = lock.locked;
+  // Locked wins over `disabled`: the point of a reason is a field a keyboard reaches.
+  const off = Boolean(disabled) && !locked;
   // §4 "No fact only in a tooltip" (docs/text-size-harmonization.md): at Large and on a
   // touch screen a FieldHint is its words, so it takes the caption's path below — the
   // other kit fields do the same through `useFieldHint`.
@@ -303,15 +337,17 @@ export function NumberInput(props: NumberInputProps) {
   const hasError = hasMessage(error);
   // Passed at all — even as `undefined` — the field keeps its box; see `error`.
   const reserve = "error" in props || "hint" in props;
-  // The standing advice first, the news second: the caller's ids, the caption, the error.
-  const describedBy = mergeDescribedBy(ariaDescribedBy, textHint && hintId, hasError && errorId);
+  // The standing advice first, the news second: the caller's ids, the caption, the
+  // error — a lock's reason between the last two, as on Select.
+  const describedBy = mergeDescribedBy(ariaDescribedBy, textHint && hintId, locked && lock.reasonId, hasError && errorId);
   const invalid = Boolean(invalidProp) || hasError || ariaInvalid === true || ariaInvalid === "true";
   const labelled = label !== undefined;
   // On phones we suppress the OS keyboard (inputMode="none" below) for our own
   // calculator numpad, so the desktop popover trigger is hidden (feedback #334).
   const isMobile = usePhoneLayout();
   const asDisplay = isMobile && variant === "display";
-  const showCalc = calculator && !disabled && !isMobile;
+  // A locked field offers no calculator: its result would be a value.
+  const showCalc = calculator && !disabled && !locked && !isMobile;
   const [focused, setFocused] = useState(false);
   // The unit and the calculator's measured width, reserved as the field's end padding.
   const endRef = useRef<HTMLDivElement>(null);
@@ -338,7 +374,7 @@ export function NumberInput(props: NumberInputProps) {
   }, [hasEnd]);
   // On mobile, focusing opens the numpad bottom sheet instead of the native
   // keyboard (#334); the ref lets its "Done" blur → commit + close.
-  const showNumpad = isMobile && !disabled && focused;
+  const showNumpad = isMobile && !disabled && !locked && focused;
   const inputRef = useRef<HTMLInputElement>(null);
 
   // The mark is the locale's; see the component's note. `derived` is the value in that
@@ -395,6 +431,12 @@ export function NumberInput(props: NumberInputProps) {
   };
 
   const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    // Locked: Enter submits no form and commits nothing, and no key steps the value.
+    // The arrows and Home/End stay the caret's, for a long value someone is reading.
+    if (locked) {
+      if (e.key === "Enter") e.preventDefault();
+      return;
+    }
     if (e.key === "Enter") return commit();
     // A zero, negative or non-finite step is no step: the keys stay the caret's.
     if (!step || !(step > 0) || !Number.isFinite(step) || e.altKey || e.ctrlKey || e.metaKey) return;
@@ -406,9 +448,12 @@ export function NumberInput(props: NumberInputProps) {
     stepBy(count);
   };
 
+  // While locked the field sits in the reason's Tooltip, which becomes its outermost
+  // box — so `className` (a width, a flex or grid cell) moves onto that, and the form
+  // keeps its layout, as on Select.
   const field = (
     <FloatingField
-      className={cn("w-full", className)}
+      className={cn("w-full", !locked && className)}
       htmlFor={fieldId}
       label={label}
       srOnlyLabel={asDisplay}
@@ -425,16 +470,23 @@ export function NumberInput(props: NumberInputProps) {
         autoComplete="off"
         // 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.
         autoFocus={autoFocus}
-        disabled={disabled}
+        disabled={off}
+        // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.
+        readOnly={locked || undefined}
+        aria-disabled={locked || undefined}
         // Display mode has no floating label to feed the blank-placeholder trick,
         // and an empty borderless figure shows nothing — so it keeps whatever
         // placeholder the caller gave, falling back to a zero to aim at.
         placeholder={asDisplay ? (placeholder ?? "0") : labelled ? " " : placeholder}
         value={display}
-        onChange={(e) => typed(e.target.value)}
+        onChange={(e) => {
+          if (!locked) typed(e.target.value);
+        }}
         onFocus={() => setFocused(true)}
         onBlur={() => {
-          commit();
+          // Nothing commits under the lock — not even a draft typed before it arrived,
+          // which stays in the field for when it lifts.
+          if (!locked) commit();
           setFocused(false);
         }}
         onKeyDown={onKeyDown}
@@ -455,6 +507,7 @@ export function NumberInput(props: NumberInputProps) {
           inputClassName,
           showCalc && suffix !== undefined ? "pe-16" : showCalc ? "pe-9" : suffix !== undefined ? "pe-8" : undefined,
           invalid && FIELD_INVALID,
+          locked && "cursor-not-allowed",
         )}
         // The classes above are the fallback; once the end controls are measured the
         // field reserves exactly their width (+4px). A fixed pe-8 for any unit left a
@@ -511,13 +564,20 @@ export function NumberInput(props: NumberInputProps) {
       )}
     </FloatingField>
   );
-  if (!textHint && !hasError && !reserve) return field;
+  const box = locked ? (
+    <LockedReason lock={lock} className={cn("block w-full", className)}>
+      {field}
+    </LockedReason>
+  ) : (
+    field
+  );
+  if (!textHint && !hasError && !reserve) return box;
   // Outside the field's own `relative` box, as Select's caption is: the calculator
   // and the unit are `inset-y-0` in it and would stretch down over a second line.
   // `className` stays on the field, so adding a caption cannot change what it styles.
   return (
     <div>
-      {field}
+      {box}
       {textHint && (
         <p id={hintId} className="mt-1 text-caption leading-tight text-[var(--text-muted)]">
           {hint}

package/src/components/popover.tsx

@@ -144,7 +144,10 @@ export function Popover({
     : 0;
   const pos = rect
     ? {
-        top: placement.top,
+        // Flipped above, the panel hangs from its bottom edge, so one shorter than its
+        // cap still meets the trigger (keksdose K1); the edge not in use is cleared.
+        top: placement.above ? undefined : placement.top,
+        bottom: placement.above ? placement.bottom : undefined,
         left: Math.min(
           Math.max(EDGE, dir === "rtl" ? rect.left : rect.right - panelWidth),
           window.innerWidth - panelWidth - EDGE,
@@ -213,12 +216,13 @@ export function Popover({
             tabIndex={-1}
             onKeyDown={handleKeyDown}
             style={{
-              // Merged over the caller's, never replaced by it: these four are measured
+              // Merged over the caller's, never replaced by it: these are measured
               // against the trigger every scroll and resize, and a panel that dropped
               // them would paint at the top-left of the viewport.
               ...style,
               position: "fixed",
               top: pos.top,
+              bottom: pos.bottom,
               left: pos.left,
               width: panelWidth,
               maxHeight: placement.maxHeight,

package/src/components/skeleton.tsx

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 import { cn } from "../lib/cn";
 
 /**
@@ -14,7 +14,15 @@ export const SKELETON_CLASS = "animate-pulse rounded bg-[var(--bg-active)] motio
 
 export type SkeletonShape = "line" | "block" | "circle";
 
-export interface SkeletonProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+/**
+ * A `div`'s props, `ref` included (0.33.1, keksdose): they were spread onto the
+ * placeholder all along, but `ComponentPropsWithoutRef` kept `ref` out of the type, so an
+ * app could not hold the element (to measure it, or scroll it into view) without a
+ * wrapper. The ref is the placeholder's — with `lines`, the box round the lines; with
+ * `label`, still the placeholder, not the `role="status"` region round it — where
+ * `className` goes too.
+ */
+export interface SkeletonProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
   /** `line` (default): a bar the height of a line of small text. `block`: an area
    *  (an image, a chart, a card body). `circle`: an avatar. Size any of them with
    *  `className` (`w-32`, `h-40`, `size-8`). */

package/src/feedback/feedback-thread.tsx

@@ -7,6 +7,8 @@ import { Button, EmptyState, Spinner, Textarea } from "../components/ui";
 import type { CharacterCountLabels } from "../components/ui";
 import { Skeleton } from "../components/skeleton";
 import { Tooltip } from "../components/tooltip";
+import { useWriteLock } from "../components/write-lock";
+import type { CommitScope } from "../components/write-lock";
 import { useKitFileLabels, useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import { FeedbackAttachmentField } from "./feedback-attachment";
 import type { FeedbackAttachmentFieldSingleProps } from "./feedback-attachment";
@@ -565,6 +567,18 @@ export interface FeedbackComposerProps {
   /** Rendered INSTEAD of the composer — the thread is closed, or read-only for this
    *  reader. */
   disabledReason?: ReactNode;
+  /**
+   * Send COMMITS (0.33.1, kastlan's assistant): under a locked {@link WriteLockProvider}
+   * Send is disabled the `disabledReason` way — focusable, the lock's reason in its
+   * tooltip and description, as on {@link Button}'s `commit` — and neither Enter nor
+   * Ctrl/⌘+Enter sends. The box stays editable and the draft stays: nothing in it
+   * reaches the server until Send, and the lock may lift. No provider, or an unlocked
+   * one: no effect. A {@link CommitScope}: kastlan's assistant answers under the demo
+   * and not under a lapsed plan (its backend's 402), so it passes
+   * `commit={{ except: ["demo"] }}` where it read `useWriteLock` and fed `canSend` and a
+   * reason by hand. Not the prop above: that one replaces the box, this one keeps it.
+   */
+  commit?: CommitScope;
   rows?: number;
   /**
    * The longest draft the box takes, in UTF-16 code units as the browser counts — the
@@ -671,6 +685,7 @@ export function FeedbackComposer({
   canSend: canSendProp,
   sendOn = "mod-enter",
   disabledReason,
+  commit,
   rows = 3,
   maxLength,
   showCount,
@@ -686,6 +701,9 @@ export function FeedbackComposer({
   ...rest
 }: FeedbackComposerProps) {
   const labels = useKitLabels("feedbackComposer", DEFAULT_FEEDBACK_COMPOSER_LABELS, labelsProp);
+  // The lock as Send sees it, with its scope (§12.36). Send's Button reads the same
+  // through its own `commit`; this holds the keyboard's send back with it.
+  const lock = useWriteLock(commit ?? false);
   const rootAttributes = { id, ...dataAttributes(rest) };
   const hintId = useId();
   const [ownDraft, setOwnDraft] = useState("");
@@ -752,7 +770,7 @@ export function FeedbackComposer({
   // Longer than `maxLength` only through `insertText` or a controlled value (typing
   // stops at it): the server would refuse it, so it does not go.
   const tooLong = maxLength !== undefined && draft.length > maxLength;
-  const canSend = (canSendProp ?? draft.trim().length > 0) && !pending && !tooLong;
+  const canSend = (canSendProp ?? draft.trim().length > 0) && !pending && !tooLong && !lock.locked;
   const send = () => {
     if (!canSend) return;
     const sentDraft = draft;
@@ -844,6 +862,7 @@ export function FeedbackComposer({
           <Button
             onClick={send}
             disabled={!canSend}
+            commit={commit}
             aria-busy={pending || undefined}
             size={size === "sm" ? "sm" : undefined}
           >