@eifi1/ui-kit 0.33.0 → 0.34.0

package/src/components/tree-view.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useId, useMemo, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactNode } from "react";
+import type { ComponentPropsWithRef, KeyboardEvent, MouseEvent, ReactNode } from "react";
 import { ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn";
 import { horizontalStep } from "../lib/direction";
-import { Spinner } from "./ui";
+import { Spinner } from "./spinner";
 import { FOCUS_RING } from "./focus-ring";
 
 /**
@@ -68,7 +68,7 @@ export interface TreeItemState {
 
 /* ── TreeRow ─────────────────────────────────────────────────────────────── */
 
-export interface TreeRowProps extends ComponentPropsWithoutRef<"div"> {
+export interface TreeRowProps extends ComponentPropsWithRef<"div"> {
   /** 1 for a top-level row. Sets the indent and the number of guides. */
   level: number;
   /** `true`/`false` for a row that can fold; leave it `undefined` for a leaf, which
@@ -154,8 +154,8 @@ export function TreeRow({
       className={cn(
         "relative flex min-h-8 items-center gap-1.5 rounded pe-2 text-sm",
         selected
-          ? "bg-[var(--bg-active)] font-medium text-[var(--text-primary)]"
-          : "text-[var(--text-secondary)]",
+          ? "bg-active font-medium text-primary"
+          : "text-secondary",
         className,
       )}
     >
@@ -183,12 +183,12 @@ export function TreeRow({
             e.stopPropagation();
             onToggle();
           }}
-          className={cn("flex size-4 shrink-0 items-center justify-center rounded text-[var(--text-muted)] outline-none hover:text-[var(--text-primary)]", FOCUS_RING)}
+          className={cn("flex size-4 shrink-0 items-center justify-center rounded text-muted outline-none hover:text-primary", FOCUS_RING)}
         >
           {chevron}
         </button>
       ) : expandable ? (
-        <span data-tree-toggle="" className="flex size-4 shrink-0 cursor-pointer items-center justify-center text-[var(--text-muted)]">
+        <span data-tree-toggle="" className="flex size-4 shrink-0 cursor-pointer items-center justify-center text-muted">
           {chevron}
         </span>
       ) : (
@@ -197,11 +197,13 @@ export function TreeRow({
       {children ?? (
         <>
           {icon && <span className="flex shrink-0 items-center">{icon}</span>}
-          <span id={labelId} data-tree-label="" className="min-w-0 flex-1 truncate">
+          {/* One line at Normal; from Large up it wraps and the `min-h-8` row grows
+              (text size §10.17, round 0.34 T1: the sweep read "1020 Operat…"). */}
+          <span id={labelId} data-tree-label="" className="min-w-0 flex-1 truncate-until-large">
             {label}
           </span>
           {trailing !== undefined && trailing !== null && (
-            <span className="ms-auto flex shrink-0 items-center gap-1 text-xs tabular-nums text-[var(--text-muted)]">
+            <span className="ms-auto flex shrink-0 items-center gap-1 text-xs tabular-nums text-muted">
               {trailing}
             </span>
           )}
@@ -214,7 +216,7 @@ export function TreeRow({
 /* ── TreeView ────────────────────────────────────────────────────────────── */
 
 export interface TreeViewProps<T = unknown>
-  extends Omit<ComponentPropsWithoutRef<"ul">, "onSelect" | "children" | "defaultValue"> {
+  extends Omit<ComponentPropsWithRef<"ul">, "onSelect" | "children" | "defaultValue"> {
   items: readonly TreeNode<T>[];
   /** Open nodes, controlled. */
   expanded?: readonly string[];
@@ -544,7 +546,7 @@ export function TreeView<T = unknown>({
           }}
           // The ring goes on this row's own box, not the <li>: the <li> contains the
           // whole open branch below it, and ringing that would outline a subtree.
-          className="outline-none [&:focus-visible>[data-tree-row]]:ring-[length:var(--focus-ring-width)] [&:focus-visible>[data-tree-row]]:ring-[var(--brand)]"
+          className="outline-none [&:focus-visible>[data-tree-row]]:ring-focus [&:focus-visible>[data-tree-row]]:ring-brand"
         >
           <TreeRow
             id={rowId}
@@ -558,7 +560,7 @@ export function TreeView<T = unknown>({
             selected={isSelected}
             loading={isLoading}
             className={cn(
-              node.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-[var(--bg-hover)]",
+              node.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-hover",
               rowClassName,
             )}
           >

package/src/components/ui-labels.ts

@@ -0,0 +1,22 @@
+// The English words of ./ui, in a module with no component code: the English catalogue
+// (src/i18n/defaults.ts) imports them without the component, so `en` loads as one chunk
+// like the other languages (0.34, KS U8). ./ui re-exports them.
+
+import type { CharacterCountLabels, PasswordRevealLabels } from "./field-base";
+import type { TabsLabels } from "./tabs";
+
+export const DEFAULT_PASSWORD_REVEAL_LABELS: PasswordRevealLabels = {
+  show: "Show password",
+  hide: "Hide password",
+};
+
+export const DEFAULT_CHARACTER_COUNT_LABELS: CharacterCountLabels = {
+  count: (used, max) => `${used} of ${max} characters`,
+  remaining: (left) => (left === 1 ? "1 character left" : `${left} characters left`),
+  limitReached: "Character limit reached",
+};
+
+export const DEFAULT_TABS_LABELS: TabsLabels = {
+  add: "Add tab",
+  remove: (tab) => `Remove ${tab}`,
+};

package/src/components/user-avatar.tsx

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { personInitials } from "../lib/person-name";
 import type { PersonName } from "../lib/person-name";
@@ -31,7 +31,7 @@ const AVATAR_SIZES = {
 } as const;
 
 const CHIP =
-  "inline-flex shrink-0 items-center justify-center rounded-full bg-[var(--bg-inverse)] font-semibold text-[var(--text-inverse)]";
+  "inline-flex shrink-0 items-center justify-center rounded-full bg-inverse font-semibold text-inverse";
 
 /** The dot grows with the avatar: 8px on `sm`, 10px on `md` (keksdose's), 12px on `lg`. */
 const BADGE_SIZES: Record<keyof typeof AVATAR_SIZES, StatusDotSize> = { sm: "sm", md: "md", lg: "lg" };
@@ -47,7 +47,7 @@ export interface UserAvatarBadge {
 
 /** A `<span>`'s props, minus `children`: the content is the initials this computes
  *  from `person`/`name`/`email`, so there is nothing for a caller to put inside. */
-export interface UserAvatarProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
+export interface UserAvatarProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
   name?: string | null;
   email?: string | null;
   /**

package/src/components/wizard-stepper.tsx

@@ -5,10 +5,15 @@ import { cn } from "../lib/cn";
 export function WizardStepper({
   steps,
   current,
+  "aria-label": ariaLabelAttr,
   ariaLabel,
 }: {
   steps: { key: string; label: string }[];
   current: string;
+  /** Names the list of steps ("Import steps"). */
+  "aria-label"?: string;
+  /** @deprecated 0.34 — use `aria-label`; removed in 0.35 (refactor audit 2026-10, API-1).
+   *  Names the steps only when `aria-label` is absent. */
   ariaLabel?: string;
 }) {
   const currentIndex = steps.findIndex((s) => s.key === current);
@@ -17,19 +22,19 @@ export function WizardStepper({
     // (0.32.1, the 360 px Extra-large sweep; docs/text-size-harmonization.md §4).
     // "Upload — Map columns — Confirm" ran 22 px past a 360 px phone at Extra large.
     // Where the steps fit, they stay one row.
-    <ol className="flex flex-wrap items-center gap-1 text-xs" aria-label={ariaLabel}>
+    <ol className="flex flex-wrap items-center gap-1 text-xs" aria-label={ariaLabelAttr ?? ariaLabel}>
       {steps.map((step, i) => (
         <li key={step.key} className="flex items-center gap-1">
-          {i > 0 && <span className="w-4 border-t border-[var(--border)]" />}
+          {i > 0 && <span className="w-4 border-t border-subtle" />}
           <span
             aria-current={step.key === current ? "step" : undefined}
             className={cn(
               "rounded-full px-2 py-0.5",
               i === currentIndex
-                ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)] font-medium"
+                ? "bg-inverse text-inverse font-medium"
                 : i < currentIndex
-                  ? "text-[var(--text-secondary)]"
-                  : "text-[var(--text-placeholder)]",
+                  ? "text-secondary"
+                  : "text-placeholder",
             )}
           >
             {step.label}

package/src/components/write-lock-labels.ts

@@ -0,0 +1,9 @@
+// The English words of ./write-lock, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./write-lock re-exports them.
+
+import type { WriteLockLabels } from "./write-lock";
+
+export const DEFAULT_WRITE_LOCK_LABELS: WriteLockLabels = {
+  reason: "You can view this but not change it.",
+};

package/src/components/write-lock.tsx

@@ -1,6 +1,8 @@
 import { createContext, useContext, useMemo } from "react";
 import type { ReactNode } from "react";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { hasContent } from "../lib/presence";
+import { DEFAULT_WRITE_LOCK_LABELS } from "./write-lock-labels";
 
 /** The words {@link WriteLockProvider} renders on its own behalf. */
 export interface WriteLockLabels {
@@ -8,9 +10,8 @@ export interface WriteLockLabels {
   reason: string;
 }
 
-export const DEFAULT_WRITE_LOCK_LABELS: WriteLockLabels = {
-  reason: "You can view this but not change it.",
-};
+// Defined in ./write-lock-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_WRITE_LOCK_LABELS };
 
 /**
  * What kind of lock a source is (docs/billing-harmonization.md §12.36, ui-kit 0.33).
@@ -96,15 +97,12 @@ export interface WriteLockProviderProps {
    * `labels.reason`.
    */
   holds?: readonly WriteLockHold[];
-  labels?: Partial<WriteLockLabels>;
+  labels?: LabelOverride<WriteLockLabels>;
   children?: ReactNode;
 }
 
-// `null`/`""`/`false` count as "no reason given": a lock whose tooltip is empty would be
-// a disabled button that cannot say why, the thing this replaces.
-function given(reason: ReactNode): boolean {
-  return reason !== undefined && reason !== null && reason !== false && reason !== "";
-}
+// `null`/`""`/`false` count as "no reason given" (`hasContent`): a lock whose tooltip is
+// empty would be a disabled button that cannot say why, the thing this replaces.
 
 /**
  * The read-only lock — **everything renders; only the commit is locked.**
@@ -150,7 +148,7 @@ export function WriteLockProvider({ locked, reason, kind, holds, labels, childre
   const several = locked && holds !== undefined && holds.length > 0 ? holds : undefined;
   const firstKind = several ? several[0].kind : kind;
   const firstGiven = several ? several[0].reason : reason;
-  const firstReason = given(firstGiven) ? firstGiven : fallback;
+  const firstReason = hasContent(firstGiven) ? firstGiven : fallback;
   // Memoised on the first hold's kind and sentence — the strings an app passes — so a
   // one-source lock keeps one context value across renders; a list of several is
   // memoised on its own identity.
@@ -158,7 +156,7 @@ export function WriteLockProvider({ locked, reason, kind, holds, labels, childre
   const value = useMemo<WriteLock>(() => {
     if (!locked) return UNLOCKED;
     const all = many
-      ? many.map((hold) => ({ kind: hold.kind, reason: given(hold.reason) ? hold.reason : fallback }))
+      ? many.map((hold) => ({ kind: hold.kind, reason: hasContent(hold.reason) ? hold.reason : fallback }))
       : [{ kind: firstKind, reason: firstReason }];
     return { locked: true, reason: firstReason, kind: firstKind, holds: all };
   }, [locked, many, firstKind, firstReason, fallback]);

package/src/data-table.ts

@@ -14,6 +14,10 @@ export { DataTable, DEFAULT_DATA_TABLE_SORT_LABELS } from "./components/data-tab
 export type {
   DataTableSortLabels,
   DataTableColumn,
+  // The barrel had these two and this entry did not (refactor audit 2026-10, MOD-5):
+  // the types of a column's `cellProps` and `headProps`.
+  DataTableCellProps,
+  DataTableHeadProps,
   DataTableProps,
   ServerPagination,
   FilterState,

package/src/demo/demo-banner.tsx

@@ -3,8 +3,10 @@ import type { ComponentPropsWithoutRef } from "react";
 import { ChevronDown, ChevronUp, Timer } from "lucide-react";
 
 import { cn } from "../lib/cn";
+import { readSessionStored, writeSessionStored } from "../lib/safe-storage";
 import { AlertBanner } from "../components/alert-banner";
-import { Button, IconButton } from "../components/ui";
+import { Button } from "../components/button";
+import { IconButton } from "../components/icon-button";
 import { useAccessAction } from "../landing/access";
 import type { AccessChoice } from "../landing/access";
 import { useLandingLabels } from "../landing/landing-labels";
@@ -14,31 +16,11 @@ import type { DemoCountdown, DemoExpiry } from "./demo-countdown";
 import { useDemoLabels } from "./demo-labels";
 import type { DemoLabels } from "./demo-labels";
 import type { DemoModel } from "./demo-session";
+import type { LabelOverride } from "../i18n/kit-labels";
 
 /** The default `sessionStorage` key of the collapsed state. */
 const COLLAPSE_KEY = "kit.demoBanner.collapsed";
 
-/** `sessionStorage`, guarded like `lib/safe-storage`'s `localStorage`: blocked storage
- *  reads as "not set" and writes nothing. */
-function readSession(key: string): string | null {
-  if (typeof window === "undefined") return null;
-  try {
-    return window.sessionStorage.getItem(key);
-  } catch {
-    return null;
-  }
-}
-
-function writeSession(key: string, value: string | null): void {
-  if (typeof window === "undefined") return;
-  try {
-    if (value === null) window.sessionStorage.removeItem(key);
-    else window.sessionStorage.setItem(key, value);
-  } catch {
-    // storage blocked: the banner just opens again next time
-  }
-}
-
 /** "Demo · 23 h 12 min left", "Demo · 50 min left", the end, or plain "Demo". */
 function timeText(countdown: DemoCountdown, labels: DemoLabels): string {
   if (countdown.minutesLeft === null) return labels.badge;
@@ -66,7 +48,7 @@ export interface DemoBannerProps extends Omit<ComponentPropsWithoutRef<"div">, "
   collapseKey?: string;
   /** The clock, for tests and previews. Default `Date.now`. Keep it stable. */
   now?: () => number;
-  labels?: Partial<DemoLabels>;
+  labels?: LabelOverride<DemoLabels>;
   /** The access words (`landing` namespace) for this instance. */
   landingLabels?: Partial<LandingLabels>;
 }
@@ -106,12 +88,14 @@ export function DemoBanner({
   const landing = useLandingLabels(landingLabels);
   const accessLink = useAccessAction(access, landingLabels);
   const countdown = useDemoCountdown(expiresAt, { now, onEnded });
-  const [collapsed, setCollapsed] = useState(() => readSession(collapseKey) === "1");
+  // `sessionStorage`, guarded (lib/safe-storage): blocked storage reads as "not set",
+  // and the banner just opens again next time.
+  const [collapsed, setCollapsed] = useState(() => readSessionStored(collapseKey) === "1");
 
   const toggle = () => {
     const next = !collapsed;
     setCollapsed(next);
-    writeSession(collapseKey, next ? "1" : null);
+    writeSessionStored(collapseKey, next ? "1" : null);
   };
 
   return (

package/src/demo/demo-ended.tsx

@@ -1,8 +1,8 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 import { Hourglass } from "lucide-react";
 
 import { cn } from "../lib/cn";
-import { Button } from "../components/ui";
+import { Button } from "../components/button";
 import { useNoIndex } from "../hooks/use-noindex";
 import type { AuthHeadingLevel } from "../auth/status-parts";
 import { useAccessAction } from "../landing/access";
@@ -12,8 +12,9 @@ import type { LandingLabels } from "../landing/landing-labels";
 import { useDemoLabels } from "./demo-labels";
 import type { DemoLabels } from "./demo-labels";
 import type { DemoModel } from "./demo-session";
+import type { LabelOverride } from "../i18n/kit-labels";
 
-export interface DemoEndedProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "title"> {
+export interface DemoEndedProps extends Omit<ComponentPropsWithRef<"div">, "children" | "title"> {
   /** Which line the page says about the data (§2.3). */
   model: DemoModel;
   /** "Request access". */
@@ -29,7 +30,7 @@ export interface DemoEndedProps extends Omit<ComponentPropsWithoutRef<"div">, "c
   noIndex?: boolean;
   /** Default `h2`, under `AuthLayout`'s `h1`. */
   headingAs?: AuthHeadingLevel;
-  labels?: Partial<DemoLabels>;
+  labels?: LabelOverride<DemoLabels>;
   /** The access words (`landing` namespace) for this instance. */
   landingLabels?: Partial<LandingLabels>;
 }
@@ -67,9 +68,9 @@ export function DemoEnded({
   useNoIndex(noIndex);
   return (
     <div {...rest} className={cn("flex flex-col items-center gap-2 py-4 text-center", className)}>
-      <Hourglass aria-hidden className="size-10 text-[var(--text-placeholder)]" />
-      <Heading className="mt-2 text-xl font-semibold text-[var(--text-primary)]">{labels.endedTitle}</Heading>
-      <p className="max-w-prose text-sm text-[var(--text-secondary)]">
+      <Hourglass aria-hidden className="size-10 text-placeholder" />
+      <Heading className="mt-2 text-xl font-semibold text-primary">{labels.endedTitle}</Heading>
+      <p className="max-w-prose text-sm text-secondary">
         {model === "sandbox" ? labels.endedSandbox : labels.endedReadOnly}
       </p>
       {children}

package/src/demo/demo-labels.ts

@@ -1,4 +1,4 @@
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 
 /**
  * The demo's words (docs/landing-demo-harmonization.md §5) — the `demo` namespace of
@@ -73,6 +73,6 @@ export const DEFAULT_DEMO_LABELS: DemoLabels = {
 
 /** The `demo` namespace, resolved: English, then the provider, then `labels`. The app
  *  reads `writeLocked` from here for its `WriteLockProvider`. */
-export function useDemoLabels(labels?: Partial<DemoLabels>): DemoLabels {
+export function useDemoLabels(labels?: LabelOverride<DemoLabels>): DemoLabels {
   return useKitLabels("demo", DEFAULT_DEMO_LABELS, labels);
 }

package/src/demo/demo-start.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 
 import { cn } from "../lib/cn";
 import { AlertBanner } from "../components/alert-banner";
-import { Button, Spinner } from "../components/ui";
+import { Button } from "../components/button";
+import { Spinner } from "../components/spinner";
 import { useNoIndex } from "../hooks/use-noindex";
 import { authErrorCode, isRateLimited, retryAfterSeconds } from "../auth/auth-errors";
 import { useOncePerKey } from "../auth/status-parts";
@@ -12,6 +13,7 @@ import type { AccessChoice } from "../landing/access";
 import type { LandingLabels } from "../landing/landing-labels";
 import { useDemoLabels } from "./demo-labels";
 import type { DemoLabels } from "./demo-labels";
+import type { LabelOverride } from "../i18n/kit-labels";
 
 /** Why a start was refused, in the page's terms (§5.2). */
 type Refusal =
@@ -53,7 +55,7 @@ function messageOf(refusal: Refusal, labels: DemoLabels): string {
 /** The one start a mount makes. */
 const ONCE = "demo";
 
-export interface DemoStartProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+export interface DemoStartProps<T> extends Omit<ComponentPropsWithRef<"div">, "children"> {
   /**
    * Create the demo: the app's `POST /auth/demo-session {locale}`. Resolve with what it
    * answered (the `TokenResponse`, `refresh_token: null`, `expires_at`); reject with the
@@ -70,7 +72,7 @@ export interface DemoStartProps<T> extends Omit<ComponentPropsWithoutRef<"div">,
   /** `false` adds no `noindex` — for a preview. Default `true`: `/demo` is never indexed
    *  (§4.3). */
   noIndex?: boolean;
-  labels?: Partial<DemoLabels>;
+  labels?: LabelOverride<DemoLabels>;
   /** The access words (`landing` namespace) for this instance. */
   landingLabels?: Partial<LandingLabels>;
 }
@@ -125,7 +127,7 @@ export function DemoStart<T>({
           progress line is announced (a region inserted with its text often is not). */}
       <div role="status" aria-live="polite" className="w-full">
         {refusal === null ? (
-          <p className="flex items-center justify-center gap-2 text-sm text-[var(--text-secondary)]">
+          <p className="flex items-center justify-center gap-2 text-sm text-secondary">
             <Spinner label={null} className="size-5" />
             {labels.starting}
           </p>

package/src/feedback/feedback-attachment-labels.ts

@@ -0,0 +1,36 @@
+// The English words of ./feedback-attachment, in a module with no component code: the
+// English catalogue (src/i18n/defaults.ts) imports them without the component, so `en`
+// loads as one chunk like the other languages (0.34, KS U8). ./feedback-attachment
+// re-exports them.
+
+import type { FeedbackAttachmentFieldLabels } from "./feedback-attachment";
+
+/**
+ * English, in the feedback contract's wording since 0.27.0 (docs/feedback-harmonization.md
+ * §4.2: keksdose's `feedback.*` keys are the canon, and the kit owns them now). Three
+ * strings moved with it:
+ *
+ * - `attachmentAdd` "Attach image" → **"Add attachment"**: the field takes a PDF or a text
+ *   log as well wherever the app passes `FEEDBACK_ATTACHMENT_ACCEPT` (keksdose feedback
+ *   #87), and a button that says "image" over a picker that offers a PDF is wrong in one
+ *   of the two places.
+ * - `attachmentPaste` → keksdose's longer line, which says WHY one would paste — a region
+ *   snip shows one corner rather than the whole page (Steering Design feedback #39).
+ * - `attachmentLimit` for one: "remove **it**", as keksdose's `attachments_full_one`;
+ *   "remove one" of a single file read oddly.
+ */
+export const DEFAULT_FEEDBACK_ATTACHMENT_LABELS: FeedbackAttachmentFieldLabels = {
+  attachmentAdd: "Add attachment",
+  attachmentCapture: "Capture screenshot",
+  attachmentPaste: "…or paste a screenshot straight from the clipboard, so you can show one corner rather than the whole page.",
+  attachmentRemove: "Remove attachment",
+  attachmentList: "Attachments",
+  attachmentScreenshot: "Screenshot",
+  attachmentRemoveFile: (name) => `Remove ${name}`,
+  attachmentLimit: (max) =>
+    max === 1
+      ? "Up to 1 attachment — remove it to add another."
+      : `Up to ${max} attachments — remove one to add another.`,
+  attachmentUploading: "Uploading…",
+  attachmentUploadFailed: (name) => `“${name}” could not be uploaded`,
+};