@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/server-wake-labels.ts

@@ -1,11 +0,0 @@
-// The English words of ./server-wake, 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). ./server-wake re-exports them.
-
-import type { ServerWakeLabels } from "./server-wake";
-
-export const DEFAULT_SERVER_WAKE_LABELS: ServerWakeLabels = {
-  slow: "Still loading — this is taking longer than usual.",
-  waking: (appName) =>
-    `The server goes to sleep when nobody is using ${appName ?? "the app"}, so the first request after a break has to start it again. That can take a moment — nothing is lost, the page fills in by itself.`,
-};

package/src/components/server-wake.tsx

@@ -1,129 +0,0 @@
-import { useSyncExternalStore } from "react";
-
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import { cn } from "../lib/cn";
-import { serverWake } from "../lib/server-wake";
-import type { ServerWakeStage, ServerWakeWatcher } from "../lib/server-wake";
-import { AlertBanner } from "./alert-banner";
-import { Spinner } from "./spinner";
-import { DEFAULT_SERVER_WAKE_LABELS } from "./server-wake-labels";
-
-/**
- * The visible half of the cold-start watchdog (`lib/server-wake.ts`), keksdose's
- * `app/server-wake-notice.tsx` lifted into the kit: after a couple of seconds of an
- * unanswered read it says the app is still loading, and after seven it says WHY — the
- * server sleeps when nobody is using it, and the first request has to start it again.
- *
- * Non-blocking on purpose. The pages underneath already show their own skeletons; what
- * was missing is the explanation, not another overlay.
- *
- * **At the top, centred, and it takes no taps** (0.34, round C13; keksdose live #399:
- * *"Move the notification to the top where it can be better seen and not block any
- * sticky elements."*). Until 0.34 it sat in the bottom-start corner above the phone's
- * nav — exactly where a phone keeps what floats: a register's action group, a
- * FloatingActionButton, a dialog's sticky Create/Cancel footer — and a cold start is
- * when that Create is wanted first. It rose above a FloatingActionButton it measured,
- * but a sticky footer is not one. The top bar is the one band whose contents nobody
- * needs while the server is still waking, and `pointer-events-none` lets a tap through
- * to whatever the notice does cover: it is a status line with nothing in it to press.
- * Below the status bar and inside the side insets of a notched phone (`safe-area-inset-*`);
- * its width is in rem, so at the Large text size it is wider and wraps less, and the
- * screen's edges still stop it. The toasts stay readable: a phone shows them at the
- * bottom, and a desktop `TOASTER_OFFSET_TOP` (4rem) down, where they draw over a long
- * notice rather than under it (`--z-toast` is above this `z-50`).
- *
- * Mount it next to the router, not inside the app layout, so it also covers the login
- * screen and the landing page — a cold start is at its most confusing exactly there,
- * before anything of the app is on screen.
- */
-
-// ── Labels ────────────────────────────────────────────────────────────────────
-
-export interface ServerWakeLabels {
-  /** Past `slowMs` (2 s): a warm server would have answered by now. */
-  slow: string;
-  /** Past `wakingMs` (7 s): the explanation. `appName` is the notice's prop; without
-   *  one the sentence says "the app". */
-  waking: (appName?: string) => string;
-}
-
-// Defined in ./server-wake-labels, which holds no component code (0.34, KS U8).
-export { DEFAULT_SERVER_WAKE_LABELS };
-
-// ── Hook ──────────────────────────────────────────────────────────────────────
-
-/** The watcher's current stage, re-rendering on every change. Default: the shared
- *  {@link serverWake} instance. */
-export function useServerWakeStage(watcher: ServerWakeWatcher = serverWake): ServerWakeStage {
-  // The server snapshot is `idle`: nothing is in flight while the HTML is rendered.
-  return useSyncExternalStore(watcher.subscribe, watcher.getStage, () => "idle");
-}
-
-// ── Notice ────────────────────────────────────────────────────────────────────
-
-export interface ServerWakeNoticeProps {
-  /** Default: the shared {@link serverWake} instance. Pass the app's own when it was
-   *  made with {@link createServerWake} (e.g. to watch the login POST too). */
-  watcher?: ServerWakeWatcher;
-  /** Named in the `waking` sentence ("…when nobody is using Keksdose…"). Default: the
-   *  label says "the app". */
-  appName?: string;
-  labels?: LabelOverride<ServerWakeLabels>;
-  /** Extra classes on the fixed anchor — a different width (`max-w-*`), or another
-   *  `top-*` for an app that wants it under its top bar rather than over it. Merged, so
-   *  a class given here replaces the kit's of the same kind. */
-  className?: string;
-}
-
-/**
- * Renders nothing visible while idle. The LIVE REGION, though, is always mounted: a
- * `role="status"` element inserted together with its text is announced unreliably
- * (several screen readers only speak changes to a region they already knew about),
- * so the region waits empty and the banner appears inside it. keksdose's notice
- * mounted the region and the words at once.
- */
-export function ServerWakeNotice({ watcher, appName, labels: labelsProp, className }: ServerWakeNoticeProps) {
-  const labels = useKitLabels("serverWake", DEFAULT_SERVER_WAKE_LABELS, labelsProp);
-  const stage = useServerWakeStage(watcher);
-  const waking = stage === "waking";
-
-  return (
-    <div
-      role="status"
-      aria-live="polite"
-      data-stage={stage}
-      className={cn(
-        // Centred at the top (keksdose live #399): `left`/`right` hold it inside the
-        // side insets of a notched phone held sideways, `w-fit` + `mx-auto` centre it
-        // between them, and `top` puts it under the status bar.
-        "fixed z-50 mx-auto w-fit max-w-[24rem]",
-        "top-[calc(env(safe-area-inset-top,0px)+0.375rem)]",
-        "left-[max(1rem,env(safe-area-inset-left,0px))] right-[max(1rem,env(safe-area-inset-right,0px))]",
-        // No taps, ever: a status line has nothing in it to press, and whatever it
-        // covers — the top bar's buttons, a page's own header — must still answer
-        // underneath it. A link or button inside would take its taps back (none today:
-        // the labels are text), so the rule cannot quietly disable a control later.
-        "pointer-events-none [&_:is(a,button)]:pointer-events-auto",
-        className,
-      )}
-    >
-      {stage !== "idle" && (
-        // `elevated`: OPAQUE in both themes (keksdose live #209) — the notice that
-        // explains a stall is read over whatever stalled, and a translucent dark tint
-        // let the page's own text show through it. A box banner is role-less, so the
-        // wrapper above stays the one live region.
-        <AlertBanner
-          tone={waking ? "warning" : "neutral"}
-          size="sm"
-          elevated
-          // `label={null}`: a Spinner is its own `role="status"` saying "Loading…" —
-          // nested here, a second live region and a second announcement ahead of the
-          // words that actually explain the wait. Here it is decoration.
-          icon={<Spinner label={null} className="h-3.5 w-3.5" />}
-        >
-          {waking ? labels.waking(appName) : labels.slow}
-        </AlertBanner>
-      )}
-    </div>
-  );
-}

package/src/components/settings-fields.tsx

@@ -1,237 +0,0 @@
-import type { ReactNode } from "react";
-import { Select } from "./select";
-import type { SelectProps } from "./select";
-import { ToggleGroup } from "./toggle-group";
-import type { ToggleGroupBaseProps } from "./toggle-group";
-import type { ThemePreference } from "../theme/theme-store";
-import { TEXT_SIZES } from "../theme/text-size";
-import type { TextSize } from "../theme/text-size";
-import { CONTRAST_MODES } from "../theme/contrast";
-import type { ContrastMode } from "../theme/contrast";
-import { useAppearanceLabels } from "./appearance-labels";
-import type { AppearanceLabels } from "./appearance-labels";
-import type { LabelOverride } from "../i18n/kit-labels";
-import { LanguageSelect } from "./language-select";
-import type { KitLanguageCode } from "../i18n/languages";
-
-/**
- * App-agnostic settings-field components (feedback #333): the language + theme
- * controls that every app's settings page needs — and, since 0.32, the text size and
- * the contrast (docs/text-size-harmonization.md §6), whose words are the kit's own
- * `appearance` namespace — so they live in @hb/ui and the app just supplies the
- * current value, a change handler and translated labels.
- * The app owns WHERE these render (its own settings page) and any app-specific
- * fields around them.
- */
-
-/**
- * Everything a {@link Select} takes, minus the two this component owns: the value is a
- * {@link ThemePreference} rather than a string, and `onChange` hands over the preference
- * itself because no caller of this wants the event. The rest — `disabled`, `required`,
- * `invalid`, `error`, a `data-tour` anchor — passes straight through, which is what makes
- * this a settings FIELD rather than a fixed widget.
- *
- * The `Select` half of {@link ThemeSettingProps}; until 0.34 it carried that name, which
- * left the toggle out of the type the component is documented by (API-9).
- */
-export interface ThemeSettingSelectProps extends Omit<SelectProps, "value" | "onChange" | "children"> {
-  /** The `Select` (default). See {@link ThemeSettingToggleProps} for `"toggle"`. */
-  variant?: "select";
-  value: ThemePreference;
-  onChange: (value: ThemePreference) => void;
-  label: ReactNode;
-  /** Translated option labels. */
-  optionLabels: { system: string; light: string; dark: string };
-  id?: string;
-}
-
-/**
- * `variant="toggle"` (0.31.0, docs/settings-harmonization.md §2.8): the three choices as
- * one segmented control instead of a select — system, light and dark side by side, the
- * choice visible without opening anything, in every app (keksdose offered light and dark
- * only; its store already knew "system"). A {@link ToggleGroup}'s props pass through —
- * `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the options
- * and the value, which this owns. `ref` too: the group, whose `focus()` lands on the
- * checked option (pinned in round 0.35 R4; the select variant's `ref` is the `<select>`).
- *
- * The options wrap rather than truncate (`overflow="wrap"`), as in its two siblings
- * {@link TextSizeSetting} and {@link ContrastSetting} (0.32.1, Kurvenschmiede's 0.32
- * report: "Syst… Li… D…" in a card at Extra large on a 360 px phone).
- *
- * Bind it to the PREFERENCE (`"system"` included), never to the resolved mode: on a
- * system-dark device a control bound to the mode shows "dark" and cannot say "follow the
- * system" (keksdose's control, §8).
- */
-export interface ThemeSettingToggleProps extends Omit<ToggleGroupBaseProps<ThemePreference>, "options" | "label"> {
-  variant: "toggle";
-  value: ThemePreference;
-  onChange: (value: ThemePreference) => void;
-  /**
-   * Names the group: the field's label, or the label above it (`labelPlacement`). Leave
-   * it out inside a card already titled "Theme" and name the group with `aria-label` or
-   * `aria-labelledby` instead, so the card does not say "Theme" twice.
-   */
-  label?: ReactNode;
-  /** Translated option labels. */
-  optionLabels: { system: string; light: string; dark: string };
-  id?: string;
-}
-
-/**
- * What {@link ThemeSetting} takes: the select ({@link ThemeSettingSelectProps}, the
- * default) or the segmented control ({@link ThemeSettingToggleProps}, `variant="toggle"`)
- * — the union, as {@link ProfileSettingProps} is (API-9).
- */
-export type ThemeSettingProps = ThemeSettingSelectProps | ThemeSettingToggleProps;
-
-export function ThemeSetting(props: ThemeSettingProps) {
-  if (props.variant === "toggle") {
-    const { variant: _variant, value, onChange, label, optionLabels, overflow = "wrap", ...rest } = props;
-    return (
-      <ToggleGroup<ThemePreference>
-        {...rest}
-        overflow={overflow}
-        label={label}
-        value={value}
-        onChange={onChange}
-        options={[
-          { value: "system", label: optionLabels.system },
-          { value: "light", label: optionLabels.light },
-          { value: "dark", label: optionLabels.dark },
-        ]}
-      />
-    );
-  }
-  const { variant: _variant, value, onChange, label, optionLabels, id, ...rest } = props;
-  return (
-    <Select {...rest} id={id} label={label} value={value} onChange={(e) => onChange(e.target.value as ThemePreference)}>
-      <option value="system">{optionLabels.system}</option>
-      <option value="light">{optionLabels.light}</option>
-      <option value="dark">{optionLabels.dark}</option>
-    </Select>
-  );
-}
-
-/** See {@link ThemeSettingSelectProps}: a `Select`'s props with the value and the change
- *  handler re-typed to the language CODE the caller stores. */
-export interface LanguageSettingProps extends Omit<SelectProps, "value" | "onChange" | "children" | "multiple"> {
-  /** The reader's language: one of the rows' codes — or any tag, shown as the row it
-   *  resolves to ({@link LanguageSelect}'s rule). */
-  value: string;
-  onChange: (code: string) => void;
-  label: ReactNode;
-  /**
-   * The languages to offer, in order, and each one's text: {@link languageOptions}' rows
-   * as they come (the registry's names), or the app's own words for a code — keksdose's
-   * "Deutsch (Schweiz)". The text is the language's name in itself, as on every
-   * switcher, and each option carries that language's `lang`. A code the kit's registry
-   * does not know is not listed: the registry is where its `lang` comes from.
-   */
-  options: { code: string; label: string }[];
-  id?: string;
-}
-
-/**
- * The settings row for the reader's own language: a {@link LanguageSelect} over the rows
- * the app hands in (0.34, refactor audit 2026-10, API-7). It was a bare `Select` over the
- * same rows, so the three apps' language pickers lacked what LanguageSelect gives every
- * option — its `lang`, by which a screen reader says "Français" in French — and showed a
- * stored `de-AT` as nothing in particular rather than as the one German.
- */
-export function LanguageSetting({ options, ...rest }: LanguageSettingProps) {
-  const text = new Map(options.map((option) => [option.code, option.label]));
-  return (
-    <LanguageSelect
-      {...rest}
-      codes={options.map((option) => option.code as KitLanguageCode)}
-      optionLabel={(language) => text.get(language.code) ?? language.nativeName}
-      optionLang="own"
-    />
-  );
-}
-
-/**
- * What {@link TextSizeSetting} and {@link ContrastSetting} take: a {@link ToggleGroup}'s
- * props — `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the
- * options and the value, which they own, as {@link ThemeSettingToggleProps} does. `ref`
- * is the group's, as there (round 0.35 R4).
- */
-type AppearanceToggleProps<T extends string> = Omit<ToggleGroupBaseProps<T>, "options" | "label"> & {
-  value: T;
-  onChange: (value: T) => void;
-  /**
-   * The field's visible label. Leave it out inside a row already titled with the
-   * setting's name: the group is then named by `aria-label` / `aria-labelledby` if
-   * given, else by the kit's own word ("Text size", "Contrast").
-   */
-  label?: ReactNode;
-  /** The `appearance` namespace, for this instance. */
-  labels?: LabelOverride<AppearanceLabels>;
-};
-
-export type TextSizeSettingProps = AppearanceToggleProps<TextSize>;
-
-/**
- * The text size (0.32, docs/text-size-harmonization.md §6): Normal, Large, Extra large as
- * one segmented control, in the core `appearance` group after the theme. Bind it to the
- * size IN FORCE — `useAccountAppearance().textSize` — and hand a pick to its
- * `pickTextSize`, which stores the device's choice and, signed in, the account's.
- *
- * The options wrap rather than truncate (`overflow="wrap"`): at Extra large on a 360 px
- * phone the group has 240 px, and "Extra large" cut to "Extra l…" would be the one
- * setting that cannot read its own value.
- */
-export function TextSizeSetting({
-  value,
-  onChange,
-  label,
-  labels: labelsProp,
-  overflow = "wrap",
-  ...rest
-}: TextSizeSettingProps) {
-  const labels = useAppearanceLabels(labelsProp);
-  const named = label !== undefined && label !== null && label !== false;
-  return (
-    <ToggleGroup<TextSize>
-      {...rest}
-      aria-label={named || rest["aria-labelledby"] ? rest["aria-label"] : (rest["aria-label"] ?? labels.textSize)}
-      label={label}
-      overflow={overflow}
-      value={value}
-      onChange={onChange}
-      options={TEXT_SIZES.map((size) => ({ value: size, label: labels.textSizes[size] }))}
-    />
-  );
-}
-
-export type ContrastSettingProps = AppearanceToggleProps<ContrastMode>;
-
-/**
- * More contrast (0.32, §5, §6): System, Standard, More as one segmented control, beside
- * the text size. Bind it to the stored MODE, "system" included — never to whether more
- * contrast is on at the moment, or a device that asks for more contrast would show
- * "More" and could not say "follow the device" (the theme's lesson, §8 of the settings
- * contract). `useAccountAppearance().contrast` is that mode.
- */
-export function ContrastSetting({
-  value,
-  onChange,
-  label,
-  labels: labelsProp,
-  overflow = "wrap",
-  ...rest
-}: ContrastSettingProps) {
-  const labels = useAppearanceLabels(labelsProp);
-  const named = label !== undefined && label !== null && label !== false;
-  return (
-    <ToggleGroup<ContrastMode>
-      {...rest}
-      aria-label={named || rest["aria-labelledby"] ? rest["aria-label"] : (rest["aria-label"] ?? labels.contrast)}
-      label={label}
-      overflow={overflow}
-      value={value}
-      onChange={onChange}
-      options={CONTRAST_MODES.map((mode) => ({ value: mode, label: labels.contrastModes[mode] }))}
-    />
-  );
-}

package/src/components/share-card-labels.ts

@@ -1,30 +0,0 @@
-// The English words of ./share-card, 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). ./share-card re-exports them.
-
-import type { ShareCardLabels } from "./share-card";
-
-export const DEFAULT_SHARE_CARD_LABELS: ShareCardLabels = {
-  dialogTitle: "Share",
-  close: "Close",
-  email: "Email address",
-  emailOptional: "Email address (optional)",
-  emailPlaceholder: "name@example.com",
-  invalidEmail: "Enter a complete email address.",
-  role: "Role",
-  roleOf: (name) => `Role of ${name}`,
-  add: "Share",
-  whoHasAccess: "Who has access",
-  nobodyYet: "Nobody else has access yet.",
-  pending: "Pending",
-  openInvite: "Open invite link",
-  copyLink: "Copy link",
-  team: "Team",
-  teamHint: (name) => `Everyone in ${name} gets access.`,
-  remove: "Remove access",
-  removeConfirm: (name) => `Remove access for ${name}?`,
-  revokePending: "Withdraw invitation",
-  revokePendingConfirm: (name) => `Withdraw the invitation for ${name}?`,
-  failed: "That did not work. Please try again.",
-  loading: "Loading…",
-};