@eifi1/ui-kit 0.31.0 → 0.32.0

package/src/search/command-palette.tsx

@@ -3,8 +3,8 @@ import type { ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { CornerDownLeft, Search, X } from "lucide-react";
 import { cn } from "../lib/cn";
-import { PHONE_QUERY } from "../components/ui";
-import { useMediaQuery } from "../hooks/use-media-query";
+import { FIELD_TOUCH_TEXT } from "../components/ui";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { useOverlayHistory } from "../hooks/use-overlay-history";
 import { useFocusTrap } from "../hooks/use-focus-trap";
 import { useBodyScrollLock } from "../hooks/use-body-scroll-lock";
@@ -191,7 +191,7 @@ interface CommandPaletteProps {
    *  which overrides it per row). Off by default. */
   redactLabels?: boolean;
   /**
-   * Below the phone breakpoint ({@link PHONE_QUERY}) the palette fills the screen:
+   * In the phone layout (`usePhoneLayout()`) the palette fills the screen:
    * no inset, no rounded panel, the field pinned at the top inside the safe areas and
    * the list scrolling under it, with a close button since there is no backdrop to tap.
    * On by default — a top-centred card at 70vh leaves little room once the keyboard is
@@ -267,7 +267,7 @@ export function CommandPalette({
     setQuery(next);
   };
   const dirty = submitMode && draft !== query;
-  const isPhone = useMediaQuery(PHONE_QUERY, false) && fullScreenOnPhone;
+  const isPhone = usePhoneLayout() && fullScreenOnPhone;
   const [results, setResults] = useState<CommandItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [failed, setFailed] = useState(false);
@@ -471,11 +471,12 @@ export function CommandPalette({
             enterKeyHint={submitMode ? "search" : undefined}
             className={cn(
               "w-full bg-transparent py-3 outline-none placeholder:text-[var(--text-placeholder)] text-[var(--text-primary)]",
-              // 16px on a phone, or iOS zooms the page in on focus.
-              isPhone ? "text-base" : "text-sm",
+              // 16px on a phone, or iOS zooms the page in on focus — and on any other
+              // touch screen too (a tablet's popover), FIELD_TOUCH_TEXT (§10.1).
+              isPhone ? "text-base" : cn("text-sm", FIELD_TOUCH_TEXT),
             )}
           />
-          {loading && <span className="shrink-0 text-[11px] text-[var(--text-placeholder)]">{l.loading}</span>}
+          {loading && <span className="shrink-0 text-caption text-[var(--text-placeholder)]">{l.loading}</span>}
           {fieldText !== "" && (
             <button
               type="button"
@@ -536,7 +537,7 @@ export function CommandPalette({
               <div
                 id={groupId(groupIndex)}
                 role="presentation"
-                className="px-3 pb-0.5 pt-2 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]"
+                className="px-3 pb-0.5 pt-2 text-micro font-semibold uppercase tracking-wide text-[var(--text-placeholder)]"
               >
                 {group}
               </div>
@@ -635,7 +636,7 @@ export function CommandPalette({
         </ul>
 
         {l.hint && (
-          <div className="border-t border-[var(--border)] px-3 py-1.5 text-[11px] text-[var(--text-placeholder)]">
+          <div className="border-t border-[var(--border)] px-3 py-1.5 text-caption text-[var(--text-placeholder)]">
             {l.hint}
           </div>
         )}

package/src/settings/settings-labels.ts

@@ -1,3 +1,5 @@
+import { useKitLabels } from "../i18n/kit-labels";
+
 /**
  * The `settings` namespace (docs/settings-harmonization.md §4.3): the settings page's
  * own words, and the names and help lines of the five core groups every app shares —
@@ -61,7 +63,7 @@ export const DEFAULT_SETTINGS_LABELS: SettingsLabels = {
     },
     security: {
       title: "Security",
-      help: "How you sign in: password, two-factor codes, passkeys and sessions.",
+      help: "How you sign in, and where you are signed in.",
     },
     notifications: {
       title: "Notifications",
@@ -73,3 +75,13 @@ export const DEFAULT_SETTINGS_LABELS: SettingsLabels = {
     },
   },
 };
+
+/**
+ * 0.31.1: the `settings` namespace, resolved — English, then the provider, then `labels`.
+ * What an app reads for its catalogue's core group titles and help lines, and for the
+ * page title "<group> · Settings · <app>" (settings contract §3.1), without restating
+ * the namespace and its defaults (Kurvenschmiede's 0.31 adoption).
+ */
+export function useSettingsLabels(labels?: Partial<SettingsLabels>): SettingsLabels {
+  return useKitLabels("settings", DEFAULT_SETTINGS_LABELS, labels);
+}

package/src/settings/settings-layout.tsx

@@ -3,6 +3,7 @@ import type { ReactElement, ReactNode } from "react";
 import { Link, useHref, useLocation } from "react-router";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Button, Card, EmptyState, Tabs } from "../components/ui";
+import { FOCUS_RING } from "../components/focus-ring";
 import { Chip } from "../components/chip";
 import { List, ListItem } from "../components/list";
 import type { ListItemLinkProps } from "../components/list";
@@ -266,7 +267,7 @@ export function SettingsLayout<G extends string>({
                 e.preventDefault();
                 route.back();
               }}
-              className="-ms-1 inline-flex items-center gap-0.5 self-start rounded-md pe-1 text-sm font-medium text-[var(--text-muted)] hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+              className={cn("-ms-1 inline-flex items-center gap-0.5 self-start rounded-md pe-1 text-sm font-medium text-[var(--text-muted)] hover:text-[var(--text-primary)]", FOCUS_RING)}
             >
               <ChevronLeft aria-hidden className="size-4 rtl:-scale-x-100" />
               {pageTitle}

package/src/settings/use-account-appearance.ts

@@ -0,0 +1,148 @@
+import { useCallback, useMemo } from "react";
+import { isTextSize, resolveTextSize } from "../theme/text-size";
+import type { TextSize } from "../theme/text-size";
+import { isContrastMode, resolveContrastMode } from "../theme/contrast";
+import type { ContrastMode } from "../theme/contrast";
+
+/**
+ * The text size and contrast follow the account like the language does
+ * (docs/text-size-harmonization.md §2.2, §2.6, §6; settings contract §6.2) — the same
+ * rule as {@link useAccountLanguage}, for two values at once.
+ */
+
+/** Where a value in force came from, in the order they are asked. */
+export type AppearanceSource = "device" | "account" | "default";
+
+/** The two fields of an `/auth/me` answer this reads — server-kit 0.6's `UserResponse`,
+ *  both nullable (null = never chosen). */
+export interface AccountAppearanceFields {
+  text_size?: string | null;
+  contrast?: string | null;
+}
+
+/** This device's own choices — the text-size and contrast stores' values, `null` where
+ *  this device never chose. */
+export interface DeviceAppearance {
+  textSize?: string | null;
+  contrast?: string | null;
+}
+
+/** The body of `PATCH /auth/me` for a pick: one field, as server-kit's `ProfileUpdate`
+ *  spells it. */
+export type AccountAppearancePatch = { text_size: TextSize } | { contrast: ContrastMode };
+
+export interface ResolvedAccountAppearance {
+  textSize: TextSize;
+  /** The stored MODE — "system" included — not whether more contrast is on now. */
+  contrast: ContrastMode;
+  sources: { textSize: AppearanceSource; contrast: AppearanceSource };
+}
+
+function source(device: boolean, account: boolean): AppearanceSource {
+  return device ? "device" : account ? "account" : "default";
+}
+
+/**
+ * The values on a device (§2.6): **its own choice → the account's → the default**
+ * (Normal; "system" for contrast), each taken only when it is a known value. Pure.
+ */
+export function resolveAccountAppearance(
+  device: DeviceAppearance,
+  account: AccountAppearanceFields | null | undefined,
+): ResolvedAccountAppearance {
+  return {
+    textSize: resolveTextSize(device.textSize, account?.text_size),
+    contrast: resolveContrastMode(device.contrast, account?.contrast),
+    sources: {
+      textSize: source(isTextSize(device.textSize), isTextSize(account?.text_size)),
+      contrast: source(isContrastMode(device.contrast), isContrastMode(account?.contrast)),
+    },
+  };
+}
+
+export interface UseAccountAppearanceOptions {
+  /** The signed-in account (`/auth/me`), or `null` / `undefined` while signed out or not
+   *  loaded yet — then nothing is saved to it. */
+  account: AccountAppearanceFields | null | undefined;
+  /** This device's own choices: `useTextSizeStore((s) => s.size)` and
+   *  `useContrastStore((s) => s.contrast)`. */
+  device: DeviceAppearance;
+  /** Store a device choice: `(patch) => { if (patch.textSize) setSize(patch.textSize);
+   *  if (patch.contrast) setContrast(patch.contrast); }`. */
+  setDevice: (patch: { textSize?: TextSize; contrast?: ContrastMode }) => void;
+  /** Write the account: `PATCH /auth/me` with the patch as its body. Return its promise. */
+  save: (patch: AccountAppearancePatch) => unknown;
+  /** A demo session: a pick stays on the device, the account is never written (§6). */
+  isDemo?: boolean;
+}
+
+export interface AccountAppearance extends ResolvedAccountAppearance {
+  /** The user picked a size: it becomes the device's choice and — signed in, and not a
+   *  demo — the account's. The promise is `save`'s; the device keeps the pick if it
+   *  fails, and the app says so. */
+  pickTextSize: (size: TextSize) => Promise<unknown>;
+  /** As {@link pickTextSize}, for the contrast mode. */
+  pickContrast: (mode: ContrastMode) => Promise<unknown>;
+}
+
+/**
+ * The account's text size and contrast on this device (§6): the order of
+ * {@link resolveAccountAppearance}, and the writes.
+ *
+ * - **Nothing writes the account on its own.** Rendering, signing in and adopting the
+ *   account's values call neither `save` nor `setDevice`, so a new device adopts the
+ *   account instead of overwriting it.
+ * - **A pick** writes the device's choice, then `save` — except in a demo session or
+ *   signed out.
+ *
+ * The hook only answers. The values are put in force by the stores' apply hooks, which
+ * resolve the same order from the same inputs:
+ *
+ * ```tsx
+ * useApplyTextSize({ account: me?.text_size });
+ * useApplyContrast({ account: me?.contrast });
+ * ```
+ */
+export function useAccountAppearance(options: UseAccountAppearanceOptions): AccountAppearance {
+  const { account, device, setDevice, save, isDemo = false } = options;
+  const deviceTextSize = device.textSize;
+  const deviceContrast = device.contrast;
+  const accountTextSize = account?.text_size;
+  const accountContrast = account?.contrast;
+  const signedIn = account !== null && account !== undefined;
+  // By value, so a fresh `/auth/me` object with the same two fields changes nothing.
+  const resolved = useMemo(
+    () =>
+      resolveAccountAppearance(
+        { textSize: deviceTextSize, contrast: deviceContrast },
+        signedIn ? { text_size: accountTextSize, contrast: accountContrast } : undefined,
+      ),
+    [deviceTextSize, deviceContrast, signedIn, accountTextSize, accountContrast],
+  );
+  const write = useCallback(
+    (patch: AccountAppearancePatch) => {
+      if (isDemo || !signedIn) return Promise.resolve();
+      try {
+        return Promise.resolve(save(patch));
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    },
+    [save, isDemo, signedIn],
+  );
+  const pickTextSize = useCallback(
+    (size: TextSize) => {
+      setDevice({ textSize: size });
+      return write({ text_size: size });
+    },
+    [setDevice, write],
+  );
+  const pickContrast = useCallback(
+    (mode: ContrastMode) => {
+      setDevice({ contrast: mode });
+      return write({ contrast: mode });
+    },
+    [setDevice, write],
+  );
+  return { ...resolved, pickTextSize, pickContrast };
+}

package/src/settings/use-settings-route.ts

@@ -1,12 +1,11 @@
 import { useCallback, useEffect, useMemo } from "react";
 import { useLocation, useNavigate } from "react-router";
-import { useMediaQuery } from "../hooks/use-media-query";
-import { PHONE_QUERY } from "../components/ui";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { normalizeSettingsBase, visibleSettingsGroups } from "./settings-catalogue";
 import type { SettingsEntry, SettingsGroup } from "./settings-catalogue";
 
 /**
- * Which layout the settings page is in. `"auto"` follows the screen ({@link PHONE_QUERY},
+ * Which layout the settings page is in. `"auto"` follows the screen (`usePhoneLayout()`,
  * as `Tabs` does); `"desktop"` / `"phone"` pin one — for a preview of both side by side,
  * where the window is one width.
  */
@@ -187,7 +186,7 @@ export function useSettingsRoute<G extends string>(options: UseSettingsRouteOpti
   const { groups, entries, basePath, defaultGroup, aliases, layout = "auto" } = options;
   const location = useLocation();
   const navigate = useNavigate();
-  const narrow = useMediaQuery(PHONE_QUERY, false);
+  const narrow = usePhoneLayout();
   const phone = layout === "phone" || (layout === "auto" && narrow);
   const base = normalizeSettingsBase(basePath);