@eifi1/ui-kit 0.32.2 → 0.33.0

package/src/components/form-actions.tsx

@@ -8,6 +8,7 @@ import { useLargeText } from "../hooks/use-large-text";
 import { isApplePlatform } from "../hooks/use-hotkey";
 import { Button, Spinner, type ButtonProps, type ButtonSize, type ButtonVariant } from "./ui";
 import { useWriteLock } from "./write-lock";
+import type { CommitScope } from "./write-lock";
 
 /** The words {@link FormActions} renders on its own behalf — the `form` namespace. */
 export interface FormActionsLabels {
@@ -197,8 +198,11 @@ export interface FormActionsProps extends Omit<ComponentPropsWithoutRef<"div">,
    * keksdose wrote `submitDisabled={lock.locked || …}` and
    * `submitDisabledReason={lock.locked ? lock.reason : undefined}` at each form; this is
    * that pair, read from the provider.
+   *
+   * 0.33: a {@link CommitScope} — `COMMIT_EXCEPT_BILLING` for a form a lapsed plan still
+   * allows (the account's own settings, docs/billing-harmonization.md §12.36).
    */
-  commit?: boolean;
+  commit?: CommitScope;
   /** The save button's variant. Default `brand`; `danger` for a save that destroys
    *  (kastlan's `destructive` flag on its own FormActions). */
   submitVariant?: ButtonVariant;
@@ -392,7 +396,9 @@ export function FormActions({
   // column stretches but which keeps its control at the control's own width.
   const full = stacked ? "w-full" : undefined;
   const labels = useKitLabels("form", DEFAULT_FORM_ACTIONS_LABELS);
-  const lock = useWriteLock();
+  // The lock as Save sees it: with its scope, so a billing lock leaves a
+  // `COMMIT_EXCEPT_BILLING` form's shortcut live too.
+  const lock = useWriteLock(commit);
   const rootRef = useRef<HTMLDivElement>(null);
   const saveRef = useRef<HTMLButtonElement | null>(null);
   // The caller's own `submitProps.ref` still gets the element.
@@ -422,7 +428,7 @@ export function FormActions({
   }, [pending]);
   // Read by the shortcut's listener at the moment of the key press, so the listener
   // itself is attached once and never sees a stale `pending`.
-  const canSave = !pending && !submitDisabled && !(commit && lock.locked);
+  const canSave = !pending && !submitDisabled && !lock.locked;
   const canSaveRef = useRef(canSave);
   useEffect(() => {
     canSaveRef.current = canSave;
@@ -535,8 +541,9 @@ export function FormActions({
           disabled={pending || submitDisabled}
           disabledReason={pending ? undefined : submitDisabledReason}
           // Not while pending: the save already left, and the lock's look over the
-          // spinner would say it had not.
-          commit={commit && !pending}
+          // spinner would say it had not. A ternary, not `commit && !pending`, which
+          // turned a `{ except }` scope into `true` (§12.36).
+          commit={pending ? false : commit}
           aria-busy={pending || undefined}
           className={cn(submitProps?.className, full)}
         >

package/src/components/inline-edit-field.tsx

@@ -6,7 +6,7 @@ import { useKitLabels } from "../i18n/kit-labels";
 import { Input, Spinner } from "./ui";
 import { FOCUS_RING } from "./focus-ring";
 import { Tooltip } from "./tooltip";
-import { useCommitReason } from "./write-lock";
+import { useCommitReason, type CommitScope } from "./write-lock";
 
 /**
  * Every string {@link InlineEditField} says on its own behalf — the `inlineEdit`
@@ -101,7 +101,7 @@ interface InlineEditFieldBaseProps<T> {
   /** This field COMMITS — under a locked {@link WriteLockProvider} it takes the
    *  `disabledReason` path with the lock's reason (which wins over its own). No
    *  provider, or an unlocked one: no effect. */
-  commit?: boolean;
+  commit?: CommitScope;
   /** The value is the user's own data: `data-private` on the display and the editor,
    *  so the app's demo-mode blur covers both. */
   redact?: boolean;
@@ -164,13 +164,13 @@ function RenderEditor<T>({ render, ...props }: InlineEditorProps<T> & { render:
  * big type cannot recover a cut-off end by squinting. A `large:` class, so a table of
  * these keeps its one-line cells at Normal.
  *
- * `break-words`, not `[overflow-wrap:anywhere]`: these live in table cells (keksdose's
- * budget and invoice lines), and `anywhere` lowers the value's min-content width to one
- * letter, so an auto-sized column could squeeze an amount to a digit per line. With
- * `break-word` a column keeps each word whole; the button is `w-full`, so a word wider
- * than a sized cell still breaks.
+ * 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 value's min-content width: in
+ * an auto-sized table column (keksdose's budget and invoice lines) give the column a
+ * width, or an amount can be squeezed to a digit per line.
  */
-const VALUE_WRAP_AT_LARGE = "large:whitespace-normal large:break-words";
+const VALUE_TRUNCATE = "truncate-until-large";
 
 /** `onCommit`'s result, if it is a promise. */
 function asPromise(result: unknown): Promise<unknown> | null {
@@ -432,7 +432,7 @@ export function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {
   let body: ReactNode;
   if (readOnly) {
     body = (
-      <span {...private_} className={cn("block min-w-0 truncate", VALUE_WRAP_AT_LARGE, alignClass)}>
+      <span {...private_} className={cn("block min-w-0", VALUE_TRUNCATE, alignClass)}>
         {content}
       </span>
     );
@@ -508,8 +508,8 @@ export function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {
             aria-describedby={reasonId}
             onClick={(e) => e.preventDefault()}
             className={cn(
-              "block w-full min-w-0 cursor-not-allowed truncate rounded-sm focus:outline-none",
-              VALUE_WRAP_AT_LARGE,
+              "block w-full min-w-0 cursor-not-allowed rounded-sm focus:outline-none",
+              VALUE_TRUNCATE,
               FOCUS_RING,
               alignClass,
             )}
@@ -533,8 +533,8 @@ export function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {
           {...private_}
           onClick={() => setOpen(true)}
           className={cn(
-            "block w-full min-w-0 truncate rounded-sm underline-offset-2 hover:underline focus:outline-none",
-            VALUE_WRAP_AT_LARGE,
+            "block w-full min-w-0 rounded-sm underline-offset-2 hover:underline focus:outline-none",
+            VALUE_TRUNCATE,
             FOCUS_RING,
             alignClass,
           )}

package/src/components/list.tsx

@@ -12,6 +12,7 @@ import { useKitLabels, useKitLink } from "../i18n/kit-labels";
 import { pickLinkRenderer } from "./text-link";
 import { mergeDescribedBy } from "./choice-parts";
 import { LockedReason, useLockReason } from "./field-parts";
+import type { CommitScope } from "./write-lock";
 
 /* ── Labels ───────────────────────────────────────────────────────────────── */
 
@@ -122,11 +123,11 @@ const TARGET_RING = cn(FOCUS_RING, "focus-visible:ring-inset");
  * §4 "ListItem: title, subtitle and meta wrap instead of truncating" at Large and Extra
  * large (docs/text-size-harmonization.md). `large:` variants over the Normal look, so
  * a list keeps its one-height rows at Normal and costs no render to switch: a one-line
- * `truncate` wraps (and breaks a word too long for the row), a `line-clamp-2` lets go.
- * An ellipsis hides the end of a name, which is the part a reader who needs big type
- * cannot recover by squinting.
+ * line is `truncate-until-large` (tokens.css, 0.33 §10.17: `truncate`, and at Large a
+ * wrap that breaks a word too long for the row — the kit's one name for what this file
+ * spelt as `WRAP_AT_LARGE`), a `line-clamp-2` lets go. An ellipsis hides the end of a
+ * name, which is the part a reader who needs big type cannot recover by squinting.
  */
-const WRAP_AT_LARGE = "large:whitespace-normal large:[overflow-wrap:anywhere]";
 const UNCLAMP_AT_LARGE = "large:line-clamp-none";
 
 interface ListItemBaseProps {
@@ -341,7 +342,7 @@ export type ListItemProps = ListItemBaseProps &
          * the `disabledReason` way with the lock's reason (which wins over its own). No
          * provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3.
          */
-        commit?: boolean;
+        commit?: CommitScope;
         href?: never;
         renderLink?: never;
         external?: never;
@@ -528,7 +529,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
           now-wrapping title into a column one word wide (§4, 240 px effective width). */}
       <span className={cn("flex min-w-0 flex-1 flex-col", trailing != null && "large:basis-40")}>
         {overline != null && (
-          <span className={cn("block truncate text-caption font-medium leading-snug text-[var(--text-muted)]", WRAP_AT_LARGE)}>
+          <span className="block truncate-until-large text-caption font-medium leading-snug text-[var(--text-muted)]">
             {overline}
           </span>
         )}
@@ -538,7 +539,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
           className={cn(
             "block text-sm text-[var(--text-primary)]",
             titleLines === 1
-              ? cn("truncate", WRAP_AT_LARGE)
+              ? "truncate-until-large"
               : titleLines === 2
                 ? cn("line-clamp-2 break-words", UNCLAMP_AT_LARGE)
                 : "break-words",
@@ -553,7 +554,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
           <span
             className={cn(
               "block text-xs text-[var(--text-muted)]",
-              subtitleLines === 2 ? cn("line-clamp-2 break-words", UNCLAMP_AT_LARGE) : cn("truncate", WRAP_AT_LARGE),
+              subtitleLines === 2 ? cn("line-clamp-2 break-words", UNCLAMP_AT_LARGE) : "truncate-until-large",
             )}
           >
             {subtitle}
@@ -563,7 +564,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
           <span
             className={cn(
               "mt-0.5 text-caption leading-snug text-[var(--text-muted)]",
-              metaWrap ? "flex flex-wrap items-center gap-1" : cn("block truncate", WRAP_AT_LARGE),
+              metaWrap ? "flex flex-wrap items-center gap-1" : "block truncate-until-large",
             )}
           >
             {meta}

package/src/components/month-picker.tsx

@@ -10,7 +10,7 @@ import { Popover } from "./popover";
 import { splitTriggerAria } from "./trigger-aria";
 import type { TriggerAria } from "./trigger-aria";
 import { useKitDateFormatter, useKitLabels, useKitLocale } from "../i18n/kit-labels";
-import { FieldBox, FieldLabelLine, hasContent, useFieldMessages } from "./field-parts";
+import { FieldBox, FieldLabelLine, hasContent, LABEL_ABOVE_BOX, useFieldMessages } from "./field-parts";
 
 /**
  * Every string the month picker can speak. The month and year names are NOT here —
@@ -1005,7 +1005,13 @@ export function MonthPicker(props: MonthPickerProps) {
   const field = (
     // `w-fit` for the toolbar size: the calendar glyph is placed against this box, and a
     // full-width box would park it at the far end of the row, away from its trigger.
-    <div {...wrapperRest} ref={rootRef} className={cn("relative", small && "w-fit max-w-full", className)}>
+    // At Large a labelled box is a grid: the label above, the calendar glyph measured
+    // against the trigger's row (LABEL_ABOVE_BOX, 0.33 §10.17).
+    <div
+      {...wrapperRest}
+      ref={rootRef}
+      className={cn("relative", small && "w-fit max-w-full", label !== undefined && LABEL_ABOVE_BOX, className)}
+    >
       {label !== undefined && <FieldLabelLine label={label} hint={messages.labelHint} />}
       {/* The hidden twin the trigger is named by — see DateField. `sr-only-fixed`,
           and inside this `relative` root either way. */}

package/src/components/multi-entity-combobox.tsx

@@ -26,7 +26,7 @@ import {
   useLockReason,
 } from "./field-parts";
 import { assignRef, mergeDescribedBy } from "./choice-parts";
-import { useCommitReason } from "./write-lock";
+import { useCommitReason, type CommitScope } from "./write-lock";
 
 /** `onChange` is the kit's — "a selection was made", carrying values — rather
  *  than the div's form event, so the DOM's spelling of it is omitted. */
@@ -65,7 +65,7 @@ export interface MultiEntityComboboxProps<V extends string | number>
   disabledReason?: ReactNode;
   /** This picker COMMITS — toggling saves. Locked the `disabledReason` way under a
    *  locked {@link WriteLockProvider}. See {@link EntityCombobox}'s `commit`. */
-  commit?: boolean;
+  commit?: CommitScope;
   /** When set, a "create" row appears for a non-empty query with no exact match.
    *  The panel stays open (adding the new entity to `value` is the caller's job). */
   onCreate?: (query: string) => void;
@@ -75,7 +75,7 @@ export interface MultiEntityComboboxProps<V extends string | number>
   createEmptyLabel?: string;
   /** The create row is a write while toggling is not: locked on its own under a locked
    *  {@link WriteLockProvider}. See {@link EntityCombobox}'s `createCommit`. */
-  createCommit?: boolean;
+  createCommit?: CommitScope;
   /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
   invalid?: boolean;
   /** What is wrong with the value, as {@link Input}'s `error`: rendered under the

package/src/components/numpad-sheet.tsx

@@ -87,11 +87,15 @@ const PAD_KEYS: PadKey[] = [
  *  thinner than an outward ring plus the neighbour it would spill onto — inset keeps the
  *  ring inside the key it describes.
  *
- *  --brand rather than --border-strong: the operator keys are filled with --border, and
- *  a ring in the colour of the thing it surrounds is not an indicator. */
+ *  --brand rather than --border-strong: the operator keys are filled with a step of the
+ *  ink, and a ring in the colour of the thing it surrounds is not an indicator. */
 const PAD_BTN = `flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none ${FOCUS_RING} focus-visible:ring-inset active:scale-[0.97]`;
-const PAD_DIGIT = "bg-[var(--bg-surface-2)] text-[var(--text-primary)] active:bg-[var(--border)]";
-const PAD_ACCENT = "bg-[var(--border)] text-[var(--text-primary)] active:bg-[var(--bg-surface-2)]";
+// Digits on the well, operators a step down on `--bg-active`, each pressing toward the
+// other. `--bg-active`, not `--border` (0.33, docs/colour-roles-harmonization.md §12.9):
+// More contrast steps the border until it is a 3:1 LINE, and as a fill under the label
+// that left 2.7–3.3:1; `--bg-active` carries the ink at 7:1 and up at both levels.
+const PAD_DIGIT = "bg-surface-2 text-primary active:bg-active";
+const PAD_ACCENT = "bg-active text-primary active:bg-surface-2";
 
 export function NumberPadSheet({
   value,