@eifi1/ui-kit 0.46.1 → 0.47.0

package/dist/notifications/quiet-hours-setting.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/notifications/quiet-hours-setting.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { Card } from \"../components/card\";\nimport { TimeInput } from \"../components/time-input\";\nimport { COMMIT_EXCEPT_BILLING } from \"../components/write-lock\";\nimport { CARD_DESCRIPTION_CLASS } from \"../settings/settings-card-classes\";\nimport { SettingsCardTitle } from \"../settings/settings-heading\";\nimport { settle, useMounted } from \"../account/account-parts\";\nimport { describeFailure, FailureLine, useNotificationsLabels, useWriteOverlay } from \"./notification-parts\";\nimport type { NotificationsLabels } from \"./notifications-labels\";\nimport type { NotificationSettingsPatch } from \"./notification-types\";\nimport { zoneName } from \"./time-zone-select\";\n\n/** The zone the server applies while no device ever reported one (§10.3): every app's. */\nconst DEFAULT_FALLBACK_ZONE = \"Europe/Zurich\";\n\nexport interface QuietHoursSettingProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"onChange\"> {\n  /** The `GET`'s `quiet_hours_start`, `\"HH:MM\"`, or `null`. */\n  start: string | null;\n  /** The `GET`'s `quiet_hours_end`. */\n  end: string | null;\n  /** The zone the 0.36 card showed, an IANA name, or `null`.\n   *  @deprecated 0.46 — pass `zone` (§10.3: the zone is the account's, automatic only); removed in 0.47.\n   *  Shown read-only while `zone` is left out; the card no longer offers a picker. */\n  timezone?: string | null;\n  /**\n   * 0.46 (§10.3, amended 2026-10-20: automatic only): the account's zone — `/auth/me`'s\n   * `device_timezone`, the zone of the device last used; `null` while no device has\n   * reported one, and the card then names `fallbackZone`, the zone the server applies.\n   * Shown read-only once a time is set (\"In your time zone (Europe / Zurich), which follows\n   * the device you last used.\"). No picker: the zone is never chosen.\n   */\n  zone?: string | null;\n  /** 0.46 (§10.4): the app queues a held push and sends it when the window ends (it runs\n   *  the notifications tick); the description says so. Default `false`: dropped. */\n  held?: boolean;\n  /**\n   * Save one change — `PATCH /notifications/settings`: a time, or `null` when cleared.\n   * Never a zone. The field shows the new value while the call runs and goes back if it\n   * rejects.\n   */\n  onChange: (patch: NotificationSettingsPatch) => Promise<unknown> | void;\n  /** The zone named while neither `zone` nor `timezone` names one: the one the server\n   *  applies. Default `\"Europe/Zurich\"`, every app's. */\n  fallbackZone?: string;\n  /** The app keeps an inbox, and the description says a held push still reaches it. */\n  inbox?: boolean;\n  disabled?: boolean;\n  /** The app's own words for a failed save, or `undefined` for the kit's `failed`. */\n  describeError?: (error: unknown) => ReactNode | undefined;\n  labels?: LabelOverride<NotificationsLabels>;\n}\n\ntype QuietField = \"quiet_hours_start\" | \"quiet_hours_end\";\n\n/**\n * Quiet hours (docs/notifications-harmonization.md §2.4, §2.6, §4.2): a window of local\n * times in the account's zone, which may cross midnight, when no push of a machine-sent\n * type is sent. A held push is dropped — or, with `held` (0.46, §10.4), sent when the\n * window ends; the inbox row and the mail go as usual. keksdose's block, as a card of its\n * own.\n *\n * **0.46 (§10.3, amended 2026-10-20, Marcel): the zone is the account's, automatic\n * only** — the zone of the device last used, else `Europe/Zurich`. The card names it\n * read-only and never sends one; there is no picker and no \"Use it\".\n *\n * - **Two times**, each saved as it is entered; a cleared time sends `null`. While only\n *   one is set the card says so: the window fails open until both are.\n * - **The zone** shows while a time is set: `zone`, else the deprecated `timezone`, else\n *   `fallbackZone`.\n *\n * Under a write lock the fields are `commit` controls exempt from billing.\n */\nexport function QuietHoursSetting({\n  start,\n  end,\n  timezone = null,\n  zone,\n  held = false,\n  onChange,\n  fallbackZone = DEFAULT_FALLBACK_ZONE,\n  inbox = false,\n  disabled = false,\n  describeError,\n  labels: labelsProp,\n  className,\n  ...rest\n}: QuietHoursSettingProps) {\n  const labels = useNotificationsLabels(labelsProp);\n  const overlay = useWriteOverlay<string | null>(`${start}|${end}`);\n  const [failure, setFailure] = useState<ReactNode>(null);\n  const mounted = useMounted();\n  const id = useId();\n\n  const shown = (field: QuietField, server: string | null) =>\n    overlay.has(field) ? (overlay.get(field) ?? null) : server;\n  const startShown = shown(\"quiet_hours_start\", start);\n  const endShown = shown(\"quiet_hours_end\", end);\n  const accountZone = (zone === undefined ? timezone : zone) ?? fallbackZone;\n\n  const save = (patch: NotificationSettingsPatch) => {\n    const fields = Object.keys(patch) as QuietField[];\n    setFailure(null);\n    for (const field of fields) overlay.set(field, patch[field] ?? null);\n    settle(() => onChange(patch)).then(\n      () => {\n        if (mounted.current) for (const field of fields) overlay.settle(field, true);\n      },\n      (error: unknown) => {\n        if (!mounted.current) return;\n        for (const field of fields) overlay.settle(field, false);\n        setFailure(describeFailure(describeError?.(error), labels.failed));\n      },\n    );\n  };\n\n  const saveTime = (field: \"quiet_hours_start\" | \"quiet_hours_end\", value: string) => {\n    const next = value || null;\n    if (next === shown(field, field === \"quiet_hours_start\" ? start : end)) return;\n    save({ [field]: next });\n  };\n\n  const anySet = Boolean(startShown || endShown);\n  const halfSet = Boolean(startShown) !== Boolean(endShown);\n\n  return (\n    <Card {...rest} className={cn(\"p-4 space-y-3\", className)}>\n      <div>\n        <SettingsCardTitle>{labels.quietTitle}</SettingsCardTitle>\n        <div className={CARD_DESCRIPTION_CLASS}>{labels.quietDescription(inbox, held)}</div>\n      </div>\n      <div className=\"flex flex-wrap items-end gap-3\">\n        <TimeInput\n          id={`${id}-start`}\n          label={labels.quietFrom}\n          value={startShown ?? \"\"}\n          disabled={disabled}\n          commit={COMMIT_EXCEPT_BILLING}\n          onValueChange={(value) => saveTime(\"quiet_hours_start\", value)}\n          className=\"w-36\"\n        />\n        <TimeInput\n          id={`${id}-end`}\n          label={labels.quietUntil}\n          value={endShown ?? \"\"}\n          disabled={disabled}\n          commit={COMMIT_EXCEPT_BILLING}\n          onValueChange={(value) => saveTime(\"quiet_hours_end\", value)}\n          className=\"w-36\"\n        />\n      </div>\n      {halfSet && (\n        <p className=\"text-xs text-warning\" data-quiet-incomplete=\"\">\n          {labels.quietIncomplete}\n        </p>\n      )}\n      {anySet && (\n        <p className={CARD_DESCRIPTION_CLASS} data-quiet-zone=\"\">\n          {labels.quietZone(zoneName(accountZone, labels.regions))}\n        </p>\n      )}\n      <FailureLine>{failure}</FailureLine>\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/notifications/quiet-hours-setting.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { Card } from \"../components/card\";\nimport { TimeInput } from \"../components/time-input\";\nimport { COMMIT_EXCEPT_BILLING } from \"../components/write-lock\";\nimport { CARD_DESCRIPTION_CLASS } from \"../settings/settings-card-classes\";\nimport { SettingsCardTitle } from \"../settings/settings-heading\";\nimport { settle, useMounted } from \"../account/account-parts\";\nimport { describeFailure, FailureLine, useNotificationsLabels, useWriteOverlay } from \"./notification-parts\";\nimport type { NotificationRegionLabels, NotificationsLabels } from \"./notifications-labels\";\nimport type { NotificationSettingsPatch } from \"./notification-types\";\n\n/** The zone the server applies while no device ever reported one (§10.3): every app's. */\nconst DEFAULT_FALLBACK_ZONE = \"Europe/Zurich\";\n\n/** A zone for a sentence: \"Europe / Zurich\", the region in the kit's words (`labels.regions`);\n *  a region the labels do not know keeps its IANA name, a zone with none (\"UTC\") is itself. */\nfunction zoneName(zone: string, regions: NotificationRegionLabels): string {\n  const slash = zone.indexOf(\"/\");\n  if (slash < 0) return zone;\n  const region = zone.slice(0, slash);\n  const named = Object.prototype.hasOwnProperty.call(regions, region)\n    ? regions[region as keyof NotificationRegionLabels]\n    : region;\n  return `${named} / ${zone.slice(slash + 1).replace(/_/g, \" \").replace(/\\//g, \" / \")}`;\n}\n\nexport interface QuietHoursSettingProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"onChange\"> {\n  /** The `GET`'s `quiet_hours_start`, `\"HH:MM\"`, or `null`. */\n  start: string | null;\n  /** The `GET`'s `quiet_hours_end`. */\n  end: string | null;\n  /**\n   * 0.46 (§10.3, amended 2026-10-20: automatic only): the account's zone — `/auth/me`'s\n   * `device_timezone`, the zone of the device last used; `null` while no device has\n   * reported one, and the card then names `fallbackZone`, the zone the server applies.\n   * Shown read-only once a time is set (\"In your time zone (Europe / Zurich), which follows\n   * the device you last used.\"). No picker: the zone is never chosen.\n   */\n  zone?: string | null;\n  /** 0.46 (§10.4): the app queues a held push and sends it when the window ends (it runs\n   *  the notifications tick); the description says so. Default `false`: dropped. */\n  held?: boolean;\n  /**\n   * Save one change — `PATCH /notifications/settings`: a time, or `null` when cleared.\n   * Never a zone. The field shows the new value while the call runs and goes back if it\n   * rejects.\n   */\n  onChange: (patch: NotificationSettingsPatch) => Promise<unknown> | void;\n  /** The zone named while `zone` names none: the one the server\n   *  applies. Default `\"Europe/Zurich\"`, every app's. */\n  fallbackZone?: string;\n  /** The app keeps an inbox, and the description says a held push still reaches it. */\n  inbox?: boolean;\n  disabled?: boolean;\n  /** The app's own words for a failed save, or `undefined` for the kit's `failed`. */\n  describeError?: (error: unknown) => ReactNode | undefined;\n  labels?: LabelOverride<NotificationsLabels>;\n}\n\ntype QuietField = \"quiet_hours_start\" | \"quiet_hours_end\";\n\n/**\n * Quiet hours (docs/notifications-harmonization.md §2.4, §2.6, §4.2): a window of local\n * times in the account's zone, which may cross midnight, when no push of a machine-sent\n * type is sent. A held push is dropped — or, with `held` (0.46, §10.4), sent when the\n * window ends; the inbox row and the mail go as usual. keksdose's block, as a card of its\n * own.\n *\n * **0.46 (§10.3, amended 2026-10-20, Marcel): the zone is the account's, automatic\n * only** — the zone of the device last used, else `Europe/Zurich`. The card names it\n * read-only and never sends one; there is no picker and no \"Use it\".\n *\n * - **Two times**, each saved as it is entered; a cleared time sends `null`. While only\n *   one is set the card says so: the window fails open until both are.\n * - **The zone** shows while a time is set: `zone`, else `fallbackZone`.\n *\n * Under a write lock the fields are `commit` controls exempt from billing.\n */\nexport function QuietHoursSetting({\n  start,\n  end,\n  zone,\n  held = false,\n  onChange,\n  fallbackZone = DEFAULT_FALLBACK_ZONE,\n  inbox = false,\n  disabled = false,\n  describeError,\n  labels: labelsProp,\n  className,\n  ...rest\n}: QuietHoursSettingProps) {\n  const labels = useNotificationsLabels(labelsProp);\n  const overlay = useWriteOverlay<string | null>(`${start}|${end}`);\n  const [failure, setFailure] = useState<ReactNode>(null);\n  const mounted = useMounted();\n  const id = useId();\n\n  const shown = (field: QuietField, server: string | null) =>\n    overlay.has(field) ? (overlay.get(field) ?? null) : server;\n  const startShown = shown(\"quiet_hours_start\", start);\n  const endShown = shown(\"quiet_hours_end\", end);\n  const accountZone = zone ?? fallbackZone;\n\n  const save = (patch: NotificationSettingsPatch) => {\n    const fields = Object.keys(patch) as QuietField[];\n    setFailure(null);\n    for (const field of fields) overlay.set(field, patch[field] ?? null);\n    settle(() => onChange(patch)).then(\n      () => {\n        if (mounted.current) for (const field of fields) overlay.settle(field, true);\n      },\n      (error: unknown) => {\n        if (!mounted.current) return;\n        for (const field of fields) overlay.settle(field, false);\n        setFailure(describeFailure(describeError?.(error), labels.failed));\n      },\n    );\n  };\n\n  const saveTime = (field: \"quiet_hours_start\" | \"quiet_hours_end\", value: string) => {\n    const next = value || null;\n    if (next === shown(field, field === \"quiet_hours_start\" ? start : end)) return;\n    save({ [field]: next });\n  };\n\n  const anySet = Boolean(startShown || endShown);\n  const halfSet = Boolean(startShown) !== Boolean(endShown);\n\n  return (\n    <Card {...rest} className={cn(\"p-4 space-y-3\", className)}>\n      <div>\n        <SettingsCardTitle>{labels.quietTitle}</SettingsCardTitle>\n        <div className={CARD_DESCRIPTION_CLASS}>{labels.quietDescription(inbox, held)}</div>\n      </div>\n      <div className=\"flex flex-wrap items-end gap-3\">\n        <TimeInput\n          id={`${id}-start`}\n          label={labels.quietFrom}\n          value={startShown ?? \"\"}\n          disabled={disabled}\n          commit={COMMIT_EXCEPT_BILLING}\n          onValueChange={(value) => saveTime(\"quiet_hours_start\", value)}\n          className=\"w-36\"\n        />\n        <TimeInput\n          id={`${id}-end`}\n          label={labels.quietUntil}\n          value={endShown ?? \"\"}\n          disabled={disabled}\n          commit={COMMIT_EXCEPT_BILLING}\n          onValueChange={(value) => saveTime(\"quiet_hours_end\", value)}\n          className=\"w-36\"\n        />\n      </div>\n      {halfSet && (\n        <p className=\"text-xs text-warning\" data-quiet-incomplete=\"\">\n          {labels.quietIncomplete}\n        </p>\n      )}\n      {anySet && (\n        <p className={CARD_DESCRIPTION_CLASS} data-quiet-zone=\"\">\n          {labels.quietZone(zoneName(accountZone, labels.regions))}\n        </p>\n      )}\n      <FailureLine>{failure}</FailureLine>\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/theme/theme-store.d.ts

@@ -16,10 +16,10 @@ export interface ThemeState {
 /**
  * Pre-hydration: read the theme PREFERENCE persisted under `storageKey` straight
  * from localStorage, resolve it to a concrete light/dark mode, and toggle the
- * `.dark` class on <html> — BEFORE React and the store mount, so the first paint
- * already has the right theme (no flash). Returns the resolved mode so the caller
- * can chain {@link applyPersistedPalette}. Encapsulates the zustand-persist
- * envelope + the legacy `mode`→`preference` fallback so apps never re-type the
+ * `.dark` class (and `color-scheme`) on <html> — BEFORE React and the store mount,
+ * so the first paint already has the right theme (no flash). Returns the resolved
+ * mode so the caller can chain {@link applyPersistedPalette}. Encapsulates the
+ * zustand-persist envelope + the legacy `mode`→`preference` fallback so apps never re-type the
  * storage shape in their entrypoint.
  */
 export declare function applyPersistedTheme(storageKey: string): ThemeMode;

package/dist/theme/theme-store.js

@@ -25,6 +25,7 @@ function applyThemeClass(mode) {
   const root = document.documentElement;
   if (mode === "dark") root.classList.add("dark");
   else root.classList.remove("dark");
+  root.style.colorScheme = mode;
 }
 function applyPersistedTheme(storageKey) {
   let preference = "system";

package/dist/theme/theme-store.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/theme-store.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\nimport { logger } from \"../lib/logger\";\nimport { registerDeviceSetting } from \"../lib/device-settings\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n/** What the user chose; \"system\" tracks the OS `prefers-color-scheme`. */\nexport type ThemePreference = \"light\" | \"dark\" | \"system\";\n\nexport interface ThemeState {\n  /** The user's choice (persisted). */\n  preference: ThemePreference;\n  /** The RESOLVED light/dark actually in effect (system → OS). Read this for\n   *  anything that needs the concrete theme (e.g. token selection, toasts). */\n  mode: ThemeMode;\n  setPreference: (preference: ThemePreference) => void;\n  /** Set an explicit light/dark choice (preference follows). */\n  setMode: (mode: ThemeMode) => void;\n  /** Flip the effective theme to the opposite explicit choice. */\n  toggle: () => void;\n}\n\nfunction systemPreference(): ThemeMode {\n  try {\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n  } catch {\n    return \"light\";\n  }\n}\n\nfunction resolve(preference: ThemePreference): ThemeMode {\n  return preference === \"system\" ? systemPreference() : preference;\n}\n\n/** Normalize a persisted theme-state blob to a valid preference. Older blobs\n *  persisted the concrete `mode` (light/dark); carry that over as an explicit\n *  preference so the choice survives. Shared by the store's `migrate` and the\n *  pre-hydration {@link applyPersistedTheme}. */\nfunction preferenceFromState(\n  s: { mode?: string; preference?: string } | null | undefined,\n): ThemePreference {\n  if (s?.preference === \"light\" || s?.preference === \"dark\" || s?.preference === \"system\") {\n    return s.preference;\n  }\n  if (s?.mode === \"light\" || s?.mode === \"dark\") return s.mode;\n  return \"system\";\n}\n\n/** Toggle the `.dark` class on <html> for a resolved light/dark mode. */\nfunction applyThemeClass(mode: ThemeMode): void {\n  const root = document.documentElement;\n  if (mode === \"dark\") root.classList.add(\"dark\");\n  else root.classList.remove(\"dark\");\n}\n\n/**\n * Pre-hydration: read the theme PREFERENCE persisted under `storageKey` straight\n * from localStorage, resolve it to a concrete light/dark mode, and toggle the\n * `.dark` class on <html> — BEFORE React and the store mount, so the first paint\n * already has the right theme (no flash). Returns the resolved mode so the caller\n * can chain {@link applyPersistedPalette}. Encapsulates the zustand-persist\n * envelope + the legacy `mode`→`preference` fallback so apps never re-type the\n * storage shape in their entrypoint.\n */\nexport function applyPersistedTheme(storageKey: string): ThemeMode {\n  let preference: ThemePreference = \"system\";\n  try {\n    const blob = JSON.parse(localStorage.getItem(storageKey) ?? \"{}\") as {\n      state?: { mode?: string; preference?: string };\n    };\n    preference = preferenceFromState(blob.state);\n  } catch {\n    /* malformed storage → system */\n  }\n  const mode = resolve(preference);\n  applyThemeClass(mode);\n  return mode;\n}\n\n/**\n * Build a theme store bound to a consumer-supplied localStorage key. Tracks a\n * light/dark/system PREFERENCE (feedback #330) and exposes the resolved `mode`.\n * Returns the `useTheme` hook plus a `useApplyTheme` effect that toggles the\n * `.dark` class on <html> and, while on \"system\", follows OS theme changes live.\n */\nexport function createThemeStore(storageKey: string) {\n  const useTheme = create<ThemeState>()(\n    logger(\n      persist(\n        (set, get) => ({\n          preference: \"system\" as ThemePreference,\n          mode: systemPreference(),\n          setPreference: (preference) => set({ preference, mode: resolve(preference) }),\n          setMode: (mode) => set({ preference: mode, mode }),\n          toggle: () => {\n            const next: ThemeMode = get().mode === \"dark\" ? \"light\" : \"dark\";\n            set({ preference: next, mode: next });\n          },\n        }),\n        {\n          name: storageKey,\n          version: 2,\n          // Only the preference is persisted; `mode` is derived on load.\n          partialize: (s) => ({ preference: s.preference }),\n          migrate: (persistedState): { preference: ThemePreference } => ({\n            preference: preferenceFromState(\n              persistedState as { mode?: string; preference?: string } | null,\n            ),\n          }),\n          onRehydrateStorage: () => (state) => {\n            // The persisted preference decides the concrete mode at load.\n            if (state) state.mode = resolve(state.preference);\n          },\n        },\n      ),\n      \"theme\",\n    ),\n  );\n  // Reset this device's settings (docs/settings-harmonization.md §11.4): back to\n  // \"System\" through the setter, which re-resolves `mode`; `useApplyTheme` puts the\n  // class back and follows the OS again, and the persisted blob is what the pre-paint\n  // `applyPersistedTheme` reads next load.\n  registerDeviceSetting({\n    key: storageKey,\n    kind: \"appearance\",\n    reset: () => useTheme.getState().setPreference(\"system\"),\n  });\n\n  function useApplyTheme(): void {\n    const mode = useTheme((s) => s.mode);\n    const preference = useTheme((s) => s.preference);\n    useEffect(() => {\n      applyThemeClass(mode);\n    }, [mode]);\n    // While tracking the system, follow OS theme changes live.\n    useEffect(() => {\n      if (preference !== \"system\") return;\n      let mq: MediaQueryList;\n      try {\n        mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n      } catch {\n        return;\n      }\n      const onChange = () => useTheme.setState({ mode: mq.matches ? \"dark\" : \"light\" });\n      onChange();\n      mq.addEventListener?.(\"change\", onChange);\n      return () => mq.removeEventListener?.(\"change\", onChange);\n    }, [preference]);\n  }\n\n  return { useTheme, useApplyTheme };\n}\n\nexport type ThemeStore = ReturnType<typeof createThemeStore>;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/theme/theme-store.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\nimport { logger } from \"../lib/logger\";\nimport { registerDeviceSetting } from \"../lib/device-settings\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n/** What the user chose; \"system\" tracks the OS `prefers-color-scheme`. */\nexport type ThemePreference = \"light\" | \"dark\" | \"system\";\n\nexport interface ThemeState {\n  /** The user's choice (persisted). */\n  preference: ThemePreference;\n  /** The RESOLVED light/dark actually in effect (system → OS). Read this for\n   *  anything that needs the concrete theme (e.g. token selection, toasts). */\n  mode: ThemeMode;\n  setPreference: (preference: ThemePreference) => void;\n  /** Set an explicit light/dark choice (preference follows). */\n  setMode: (mode: ThemeMode) => void;\n  /** Flip the effective theme to the opposite explicit choice. */\n  toggle: () => void;\n}\n\nfunction systemPreference(): ThemeMode {\n  try {\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n  } catch {\n    return \"light\";\n  }\n}\n\nfunction resolve(preference: ThemePreference): ThemeMode {\n  return preference === \"system\" ? systemPreference() : preference;\n}\n\n/** Normalize a persisted theme-state blob to a valid preference. Older blobs\n *  persisted the concrete `mode` (light/dark); carry that over as an explicit\n *  preference so the choice survives. Shared by the store's `migrate` and the\n *  pre-hydration {@link applyPersistedTheme}. */\nfunction preferenceFromState(\n  s: { mode?: string; preference?: string } | null | undefined,\n): ThemePreference {\n  if (s?.preference === \"light\" || s?.preference === \"dark\" || s?.preference === \"system\") {\n    return s.preference;\n  }\n  if (s?.mode === \"light\" || s?.mode === \"dark\") return s.mode;\n  return \"system\";\n}\n\n/**\n * Toggle the `.dark` class on <html> for a resolved light/dark mode, and say the same\n * to the BROWSER through `color-scheme` (0.47, keksdose dev #600): the class switches\n * the kit's tokens, but everything the browser paints itself — a native `<select>`'s\n * open list, a date input's popup, scrollbars, autofill — follows `color-scheme` only,\n * and stayed light on the dark theme. Inline on <html>, so it holds whatever an app's\n * stylesheet says, and it is set by the pre-paint {@link applyPersistedTheme} too.\n */\nfunction applyThemeClass(mode: ThemeMode): void {\n  const root = document.documentElement;\n  if (mode === \"dark\") root.classList.add(\"dark\");\n  else root.classList.remove(\"dark\");\n  root.style.colorScheme = mode;\n}\n\n/**\n * Pre-hydration: read the theme PREFERENCE persisted under `storageKey` straight\n * from localStorage, resolve it to a concrete light/dark mode, and toggle the\n * `.dark` class (and `color-scheme`) on <html> — BEFORE React and the store mount,\n * so the first paint already has the right theme (no flash). Returns the resolved\n * mode so the caller can chain {@link applyPersistedPalette}. Encapsulates the\n * zustand-persist envelope + the legacy `mode`→`preference` fallback so apps never re-type the\n * storage shape in their entrypoint.\n */\nexport function applyPersistedTheme(storageKey: string): ThemeMode {\n  let preference: ThemePreference = \"system\";\n  try {\n    const blob = JSON.parse(localStorage.getItem(storageKey) ?? \"{}\") as {\n      state?: { mode?: string; preference?: string };\n    };\n    preference = preferenceFromState(blob.state);\n  } catch {\n    /* malformed storage → system */\n  }\n  const mode = resolve(preference);\n  applyThemeClass(mode);\n  return mode;\n}\n\n/**\n * Build a theme store bound to a consumer-supplied localStorage key. Tracks a\n * light/dark/system PREFERENCE (feedback #330) and exposes the resolved `mode`.\n * Returns the `useTheme` hook plus a `useApplyTheme` effect that toggles the\n * `.dark` class on <html> and, while on \"system\", follows OS theme changes live.\n */\nexport function createThemeStore(storageKey: string) {\n  const useTheme = create<ThemeState>()(\n    logger(\n      persist(\n        (set, get) => ({\n          preference: \"system\" as ThemePreference,\n          mode: systemPreference(),\n          setPreference: (preference) => set({ preference, mode: resolve(preference) }),\n          setMode: (mode) => set({ preference: mode, mode }),\n          toggle: () => {\n            const next: ThemeMode = get().mode === \"dark\" ? \"light\" : \"dark\";\n            set({ preference: next, mode: next });\n          },\n        }),\n        {\n          name: storageKey,\n          version: 2,\n          // Only the preference is persisted; `mode` is derived on load.\n          partialize: (s) => ({ preference: s.preference }),\n          migrate: (persistedState): { preference: ThemePreference } => ({\n            preference: preferenceFromState(\n              persistedState as { mode?: string; preference?: string } | null,\n            ),\n          }),\n          onRehydrateStorage: () => (state) => {\n            // The persisted preference decides the concrete mode at load.\n            if (state) state.mode = resolve(state.preference);\n          },\n        },\n      ),\n      \"theme\",\n    ),\n  );\n  // Reset this device's settings (docs/settings-harmonization.md §11.4): back to\n  // \"System\" through the setter, which re-resolves `mode`; `useApplyTheme` puts the\n  // class back and follows the OS again, and the persisted blob is what the pre-paint\n  // `applyPersistedTheme` reads next load.\n  registerDeviceSetting({\n    key: storageKey,\n    kind: \"appearance\",\n    reset: () => useTheme.getState().setPreference(\"system\"),\n  });\n\n  function useApplyTheme(): void {\n    const mode = useTheme((s) => s.mode);\n    const preference = useTheme((s) => s.preference);\n    useEffect(() => {\n      applyThemeClass(mode);\n    }, [mode]);\n    // While tracking the system, follow OS theme changes live.\n    useEffect(() => {\n      if (preference !== \"system\") return;\n      let mq: MediaQueryList;\n      try {\n        mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n      } catch {\n        return;\n      }\n      const onChange = () => useTheme.setState({ mode: mq.matches ? \"dark\" : \"light\" });\n      onChange();\n      mq.addEventListener?.(\"change\", onChange);\n      return () => mq.removeEventListener?.(\"change\", onChange);\n    }, [preference]);\n  }\n\n  return { useTheme, useApplyTheme };\n}\n\nexport type ThemeStore = ReturnType<typeof createThemeStore>;\n"],"mappings":";AAAA,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,6BAA6B;AAmBtC,SAAS,mBAA8B;AACrC,MAAI;AACF,WAAO,OAAO,WAAW,8BAA8B,EAAE,UAAU,SAAS;AAAA,EAC9E,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,QAAQ,YAAwC;AACvD,SAAO,eAAe,WAAW,iBAAiB,IAAI;AACxD;AAMA,SAAS,oBACP,GACiB;AACjB,MAAI,GAAG,eAAe,WAAW,GAAG,eAAe,UAAU,GAAG,eAAe,UAAU;AACvF,WAAO,EAAE;AAAA,EACX;AACA,MAAI,GAAG,SAAS,WAAW,GAAG,SAAS,OAAQ,QAAO,EAAE;AACxD,SAAO;AACT;AAUA,SAAS,gBAAgB,MAAuB;AAC9C,QAAM,OAAO,SAAS;AACtB,MAAI,SAAS,OAAQ,MAAK,UAAU,IAAI,MAAM;AAAA,MACzC,MAAK,UAAU,OAAO,MAAM;AACjC,OAAK,MAAM,cAAc;AAC3B;AAWO,SAAS,oBAAoB,YAA+B;AACjE,MAAI,aAA8B;AAClC,MAAI;AACF,UAAM,OAAO,KAAK,MAAM,aAAa,QAAQ,UAAU,KAAK,IAAI;AAGhE,iBAAa,oBAAoB,KAAK,KAAK;AAAA,EAC7C,QAAQ;AAAA,EAER;AACA,QAAM,OAAO,QAAQ,UAAU;AAC/B,kBAAgB,IAAI;AACpB,SAAO;AACT;AAQO,SAAS,iBAAiB,YAAoB;AACnD,QAAM,WAAW,OAAmB;AAAA,IAClC;AAAA,MACE;AAAA,QACE,CAAC,KAAK,SAAS;AAAA,UACb,YAAY;AAAA,UACZ,MAAM,iBAAiB;AAAA,UACvB,eAAe,CAAC,eAAe,IAAI,EAAE,YAAY,MAAM,QAAQ,UAAU,EAAE,CAAC;AAAA,UAC5E,SAAS,CAAC,SAAS,IAAI,EAAE,YAAY,MAAM,KAAK,CAAC;AAAA,UACjD,QAAQ,MAAM;AACZ,kBAAM,OAAkB,IAAI,EAAE,SAAS,SAAS,UAAU;AAC1D,gBAAI,EAAE,YAAY,MAAM,MAAM,KAAK,CAAC;AAAA,UACtC;AAAA,QACF;AAAA,QACA;AAAA,UACE,MAAM;AAAA,UACN,SAAS;AAAA;AAAA,UAET,YAAY,CAAC,OAAO,EAAE,YAAY,EAAE,WAAW;AAAA,UAC/C,SAAS,CAAC,oBAAqD;AAAA,YAC7D,YAAY;AAAA,cACV;AAAA,YACF;AAAA,UACF;AAAA,UACA,oBAAoB,MAAM,CAAC,UAAU;AAEnC,gBAAI,MAAO,OAAM,OAAO,QAAQ,MAAM,UAAU;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAKA,wBAAsB;AAAA,IACpB,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO,MAAM,SAAS,SAAS,EAAE,cAAc,QAAQ;AAAA,EACzD,CAAC;AAED,WAAS,gBAAsB;AAC7B,UAAM,OAAO,SAAS,CAAC,MAAM,EAAE,IAAI;AACnC,UAAM,aAAa,SAAS,CAAC,MAAM,EAAE,UAAU;AAC/C,cAAU,MAAM;AACd,sBAAgB,IAAI;AAAA,IACtB,GAAG,CAAC,IAAI,CAAC;AAET,cAAU,MAAM;AACd,UAAI,eAAe,SAAU;AAC7B,UAAI;AACJ,UAAI;AACF,aAAK,OAAO,WAAW,8BAA8B;AAAA,MACvD,QAAQ;AACN;AAAA,MACF;AACA,YAAM,WAAW,MAAM,SAAS,SAAS,EAAE,MAAM,GAAG,UAAU,SAAS,QAAQ,CAAC;AAChF,eAAS;AACT,SAAG,mBAAmB,UAAU,QAAQ;AACxC,aAAO,MAAM,GAAG,sBAAsB,UAAU,QAAQ;AAAA,IAC1D,GAAG,CAAC,UAAU,CAAC;AAAA,EACjB;AAEA,SAAO,EAAE,UAAU,cAAc;AACnC;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.46.1",
+  "version": "0.47.0",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",
@@ -213,7 +213,7 @@
     "tsup": "^8.5.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.70.1",
-    "vite": "^8.3.1",
+    "vite": "^8.3.4",
     "vitest": "^5.0.2"
   },
   "license": "MIT",

package/src/components/data-table.tsx

@@ -1213,6 +1213,17 @@ export function DataTable<T>({
   const isMdUp = !usePhoneLayout();
   // `edgeFade` (0.25) on the desktop scroller; the phone list never scrolls sideways.
   const desktopScroller = useRef<HTMLDivElement | null>(null);
+  // 0.47 (keksdose S4): the scroller's visible width, as `--dt-visible-w` on it, for the
+  // expansion row's pinned content (below). Set on the element, not in state: a resize
+  // re-renders nothing. Only a table that can expand a row measures.
+  const measuresVisibleWidth = isMdUp && !!expandedRow;
+  useEffect(() => {
+    const el = desktopScroller.current;
+    if (!measuresVisibleWidth || !el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => el.style.setProperty("--dt-visible-w", `${el.clientWidth}px`));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [measuresVisibleWidth]);
   const edgeFadeProps = useEdgeFade(desktopScroller, edgeFade && isMdUp);
 
   // ---- Mobile card list (md:hidden) ----
@@ -1926,10 +1937,25 @@ export function DataTable<T>({
                           content in `w-0 min-w-full` pins the cell's preferred
                           width to ~0 (the explicit width:0 child), so it can never
                           perturb the columns; the div then fills to the full row
-                          width only at paint time, and long text wraps within it. */}
+                          width only at paint time, and long text wraps within it.
+                          Inside it the content is pinned to what the scroller SHOWS
+                          (0.47, keksdose S4): on a table wider than its scroller a
+                          table-wide panel put an inline editor's Save/Cancel off-screen.
+                          `sticky start-0` holds it at the scroller's start edge (the
+                          right one in RTL) as the row scrolls sideways, and
+                          `--dt-visible-w` (the scroller's clientWidth, measured above)
+                          sizes it; before the first measure, and in a table no wider
+                          than its scroller, it is the full width as before. */}
                       <td colSpan={totalColSpan} className="p-0">
-                        <div className={cn("w-0 min-w-full", compact ? "px-2 py-2" : "px-3 py-3")}>
-                          {expansion}
+                        <div className="w-0 min-w-full">
+                          <div
+                            className={cn(
+                              "sticky start-0 w-[var(--dt-visible-w,100%)] max-w-full",
+                              compact ? "px-2 py-2" : "px-3 py-3",
+                            )}
+                          >
+                            {expansion}
+                          </div>
                         </div>
                       </td>
                     </tr>

package/src/components/row-actions.tsx

@@ -13,6 +13,7 @@ import { useCommitReason, type CommitScope } from "./write-lock";
 import type { IconButtonGlyphSize, IconButtonSize } from "./icon-button";
 import type { TooltipSide } from "./tooltip";
 import type { DataTableColumn } from "./data-table";
+import { TableHeaderCell, type TableHeaderCellProps } from "./table";
 import { DEFAULT_ROW_ACTIONS_LABELS } from "./row-actions-labels";
 
 /**
@@ -538,6 +539,43 @@ function RowActionsHeader({
   return hidden ? <span className="sr-only">{word}</span> : <>{word}</>;
 }
 
+/** The actions cell's classes — `rowActionsColumn`'s `className`: the column hugs its
+ *  buttons, on one line, at the row's end. A hand-built table's `<TableCell>` takes them
+ *  around its {@link RowActions} (0.47, keksdose N17). */
+export const ROW_ACTIONS_CELL_CLASS = "w-px whitespace-nowrap text-end";
+/** The actions heading's classes — `rowActionsColumn`'s `headClassName`, which
+ *  {@link RowActionsHead} draws: hugging, end-aligned over the buttons (0.47, N17). */
+export const ROW_ACTIONS_HEAD_CLASS = "w-px text-end";
+
+export interface RowActionsHeadProps extends Omit<TableHeaderCellProps, "children"> {
+  /** The heading. Default: the provider's `rowActions.actions` ("Actions"). */
+  children?: ReactNode;
+  /** Named for a screen reader only — `rowActionsColumn`'s `header: false`. */
+  hideLabel?: boolean;
+  labels?: LabelOverride<RowActionsLabels>;
+}
+
+/**
+ * A hand-built table's actions heading (0.47, keksdose N17): the `<th>` `rowActionsColumn`
+ * gives a DataTable — "Actions" on screen in the provider's words, end-aligned over the
+ * buttons, hugging them. Pair it with `<TableCell className={ROW_ACTIONS_CELL_CLASS}>`
+ * around each row's {@link RowActions}. Every other `TableHeaderCell` prop passes on
+ * (`size`, the app's `className`, merged last).
+ *
+ *     <RowActionsHead size="sm" className={TH} />
+ */
+export function RowActionsHead({ children, hideLabel, labels, className, ...rest }: RowActionsHeadProps) {
+  return (
+    <TableHeaderCell align="end" {...rest} className={cn(ROW_ACTIONS_HEAD_CLASS, className)}>
+      {typeof children === "string" || children == null ? (
+        <RowActionsHeader text={children ?? undefined} labels={labels} hidden={hideLabel} />
+      ) : (
+        children
+      )}
+    </TableHeaderCell>
+  );
+}
+
 export interface RowActionsColumnOptions<T> {
   /** The column's key. Default `"actions"`. */
   key?: string;
@@ -617,9 +655,10 @@ export function rowActionsColumn<T>({
         labels={labels}
       />
     ),
-    className: "w-px whitespace-nowrap text-end",
-    // The heading over the buttons, at the row's end (0.46.1).
-    headClassName: "w-px text-end",
+    className: ROW_ACTIONS_CELL_CLASS,
+    // The heading over the buttons, at the row's end (0.46.1); a hand-built table's
+    // `RowActionsHead` (0.47).
+    headClassName: ROW_ACTIONS_HEAD_CLASS,
     noRowLink: true,
     ...column,
   };

package/src/components/tabs.tsx

@@ -48,10 +48,16 @@ export interface TabsLabels {
   add: string;
   /** Accessible name of a tab's × — "Remove <tab>". */
   remove: (tab: string) => string;
-  /** The `overflowCue` caret while tabs lie past the strip's end: "More tabs". */
+  /** The `overflowCue` › over the strip's end, while tabs lie past it: "More tabs". */
   more: string;
-  /** The `overflowCue` caret at the strip's end, which goes back to the first tab. */
-  backToFirst: string;
+  /** The `overflowCue` ‹ over the strip's start, while tabs lie before it: "Previous tabs". */
+  previous: string;
+  /**
+   * @deprecated 0.47: not drawn any more — the caret that turned into "back to the
+   * first tab" at the strip's end is now a ‹ of its own (`previous`). Accepted and
+   * ignored; removed in 0.48.
+   */
+  backToFirst?: string;
 }
 
 // Defined in ./ui-labels, which holds no component code (0.34, KS U8).
@@ -78,20 +84,22 @@ export interface TabsProps<T extends string>
   onChange: (id: T) => void;
   className?: string;
   /**
-   * The caret beside a SCROLLING strip (0.40, kk run 79 gap 1): a › while
-   * tabs lie past the strip's end — a tap scrolls it on by three quarters of its width —
-   * turning into a ‹ at the end, which goes back to the first. Shown only while the strip
-   * actually overflows.
+   * Carets over the ends of a SCROLLING strip (0.40, kk run 79 gap 1; 0.47, keksdose
+   * live #410 round 4): a › over the strip's end while tabs lie past it, and a ‹ over
+   * its start while tabs lie before it — each there only while something is hidden
+   * past ITS edge (1 px slack, so a few cut-off pixels count), each a step of three
+   * quarters of the strip's width toward its own side. Neither ever changes direction:
+   * until 0.46 one caret turned round into "back to the first" at the end, and read as
+   * an arrow pointing the wrong way. Start and end follow the reading direction.
    *
-   * The edge fade alone could read as the end of the row: at the default scroll position
-   * the last visible tab can finish exactly where the fade begins, so nothing looks cut
-   * off (keksdose live #410, whose `tab-strip-more.tsx` this replaces). One button that
-   * turns round rather than two that come and go, so the strip's width never changes
-   * under the thumb. Out of the tab order — the keyboard walks the strip with the arrow
-   * keys, which bring the focused tab into view. At every width since 0.46 (keksdose live
-   * #410 round 3: eleven report tabs overflow a laptop too); before, `md:hidden`. Ignored on
-   * a vertical strip (a side nav is a column, not a row). Names:
-   * `tabs.more` / `tabs.backToFirst`.
+   * The edge fade alone could read as the end of the row: the last visible tab can
+   * finish exactly where the fade begins, so nothing looks cut off (keksdose live #410).
+   * The carets sit OVER the strip's ends (positioned, on the page's surface), not beside
+   * it, so the strip's width never changes as they come and go. Out of the tab order —
+   * the keyboard walks the strip with the arrow keys, which bring the focused tab into
+   * view. At every width. Ignored on a vertical strip (a side nav is a column, not a
+   * row). Names: `tabs.more` / `tabs.previous`. keksdose's `scroll-edge-cues.tsx` is
+   * the reference this replaces.
    */
   overflowCue?: boolean;
   /**
@@ -254,36 +262,43 @@ export function Tabs<T extends string>({
   const stripRef = useRef<HTMLDivElement>(null);
   const setStrip = useMemo(() => mergeRefs(stripRef, ref), [ref]);
   const fade = useStripFade(stripRef);
-  // See `overflowCue`. `start` alone means the strip is scrolled to its end.
-  const cue = overflowCue && !vertical && fade.overflow !== undefined;
-  const cueAtEnd = fade.overflow === "start";
-  const onCue = () => {
+  // See `overflowCue`: a ‹ over the start while tabs lie before it, a › over the end
+  // while tabs lie past it — `fade.overflow` names the cut ends in reading-direction terms.
+  const cue = overflowCue && !vertical;
+  const cueStart = cue && (fade.overflow === "start" || fade.overflow === "both");
+  const cueEnd = cue && (fade.overflow === "end" || fade.overflow === "both");
+  // Three quarters of the visible width toward `side`; an RTL strip runs leftward.
+  const onCue = (side: "start" | "end") => {
     const strip = stripRef.current;
     if (!strip) return;
     const behavior: ScrollBehavior = prefersReducedMotion() ? "auto" : "smooth";
-    if (cueAtEnd) {
-      strip.scrollTo({ left: 0, behavior });
-      return;
-    }
     const rtl = getComputedStyle(strip).direction === "rtl";
-    strip.scrollBy({ left: (rtl ? -1 : 1) * Math.round(strip.clientWidth * 0.75), behavior });
+    const toward = (side === "end" ? 1 : -1) * (rtl ? -1 : 1);
+    strip.scrollBy({ left: toward * Math.round(strip.clientWidth * 0.75), behavior });
   };
-  const cueButton = cue ? (
-    // The strip's bottom rule continues under the caret, so the row reads as one.
-    <div data-tabs-overflow-cue="" className="flex shrink-0 items-center self-stretch border-b border-subtle">
+  // OVER the strip's end, on the page's surface, so the caret reads as a control and not
+  // as one more faded tab — and so it can come and go without the strip changing width
+  // under the thumb. The position sits on a wrapper of ours: IconButton puts its
+  // tooltip's span around the button, and a class on the button would land inside it.
+  const cueAt = (side: "start" | "end") => (
+    <div
+      data-tabs-overflow-cue={side}
+      className={cn("absolute top-1/2 z-10 flex -translate-y-1/2", side === "start" ? "start-0" : "end-0")}
+    >
       <IconButton
         size="sm"
-        variant="ghost"
-        tone="muted"
+        variant="secondary"
+        className="bg-surface shadow-sm"
         tabIndex={-1}
         type="button"
-        aria-label={cueAtEnd ? text.backToFirst : text.more}
-        onClick={onCue}
+        label={side === "start" ? text.previous : text.more}
+        labelVisible={false}
+        onClick={() => onCue(side)}
       >
-        {cueAtEnd ? <ChevronLeft className="rtl:-scale-x-100" /> : <ChevronRight className="rtl:-scale-x-100" />}
+        {side === "start" ? <ChevronLeft className="rtl:-scale-x-100" /> : <ChevronRight className="rtl:-scale-x-100" />}
       </IconButton>
     </div>
-  ) : null;
+  );
   // The OPEN tab is scrolled into the strip whenever it changes — on mount too, for a
   // deep link to the seventh report. A selection behind the cut edge was the worst
   // case of the overflow above: the one tab the panel below belongs to, sliced to
@@ -407,7 +422,7 @@ export function Tabs<T extends string>({
       // — it is the box a caller's margin or width is meant for.
       className={cn(
         vertical ? TABLIST_VERTICAL_CLASSES : TABLIST_CLASSES,
-        onAdd ? "min-w-0" : overflowCue && !vertical ? "min-w-0 flex-1" : className,
+        cue ? "min-w-0 flex-1" : onAdd ? "min-w-0" : className,
       )}
     >
       {tabs.map((tab) => {
@@ -575,16 +590,24 @@ export function Tabs<T extends string>({
         {text.remove(nameOf(activeTab))}
       </button>
     ) : null;
-  if (!onAdd && overflowCue && !vertical) {
-    // The caret needs a row to sit in beside the strip, and `className` goes there — it
-    // is the box a caller's margin or width is meant for, as with an add button. The box
-    // is there whether or not the strip overflows right now, so a resize never moves
-    // the caller's class from one element to another.
+  // The positioned box the carets sit in, over the strip's two ends (see `overflowCue`).
+  // There whether or not the strip overflows right now, so a resize never re-parents it.
+  const stripBox = cue ? (
+    <div className={cn("relative flex min-w-0", !onAdd && "flex-1")}>
+      {tablist}
+      {cueStart && cueAt("start")}
+      {cueEnd && cueAt("end")}
+    </div>
+  ) : (
+    tablist
+  );
+  if (!onAdd && cue) {
+    // `className` goes on the row around the strip — it is the box a caller's margin or
+    // width is meant for, as with an add button — and stays there at every scroll position.
     return (
       <div className={cn("flex items-end", className)}>
-        {tablist}
+        {stripBox}
         {removeButton}
-        {cueButton}
       </div>
     );
   }
@@ -614,9 +637,8 @@ export function Tabs<T extends string>({
   }
   return (
     <div className={cn("flex items-end", className)}>
-      {tablist}
+      {stripBox}
       {removeButton}
-      {cueButton}
       {/* Outside the tablist: an action, not a tab — and a tablist may own only
           tabs. The rule under the strip carries on beneath it. */}
       <div

package/src/components/ui-labels.ts

@@ -20,5 +20,5 @@ export const DEFAULT_TABS_LABELS: TabsLabels = {
   add: "Add tab",
   remove: (tab) => `Remove ${tab}`,
   more: "More tabs",
-  backToFirst: "Back to the first tab",
+  previous: "Previous tabs",
 };

package/src/feedback/feedback-attachment-download.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import type { MouseEvent } from "react";
+import { Download, FileText } from "lucide-react";
+import { Button } from "../components/button";
+import { toast } from "../components/toast";
+import type { AuthedFetcher } from "../hooks/use-authed-src";
+import { useKitLabels } from "../i18n/kit-labels";
+import { filenameFromDisposition, saveBlob } from "../lib/download";
+import { attachmentName } from "./feedback-record";
+import { DEFAULT_FEEDBACK_DETAIL_LABELS } from "./feedback-row-detail-labels";
+
+// Internal (not in the `./feedback` entry): the row detail's download button and its
+// plain fetch, shared since 0.47 with ./feedback-entry-file's inline entry files.
+
+/** The bytes behind a fetcher's answer — a `Blob` as it is, a `Response` checked. */
+async function toBlob(answer: Blob | Response): Promise<Blob> {
+  if (typeof Response !== "undefined" && answer instanceof Response) {
+    if (!answer.ok) throw new Error(`HTTP ${answer.status}`);
+    return answer.blob();
+  }
+  return answer as Blob;
+}
+
+/** No fetcher: the browser's own `fetch`, with the cookies a same-origin app uses. */
+export const plainFeedbackFetch: AuthedFetcher = (url, { signal }) =>
+  fetch(url, { signal, credentials: "same-origin" });
+
+/**
+ * A PDF or a text log (keksdose `FeedbackFileDownload`, dev #578): the bytes sit behind
+ * an authenticated route that serves them as `attachment`, never inline (§3.5), so a
+ * plain link would be a 401 the moment it was opened. Fetched through the app's
+ * fetcher and saved with {@link saveBlob}; a failure says so in a toast.
+ *
+ * Saved under the name the server gives it when the fetcher answers with a `Response`
+ * (server-kit's `content_disposition` puts the uploader's own name in `filename*`), and
+ * under the URL's last segment — the name on the button — when it answers with a bare
+ * `Blob`, which has no headers to ask. Words: `feedbackDetail.download` /
+ * `downloadFailed`.
+ */
+export function FeedbackAttachmentDownload({ url, fetcher }: { url: string; fetcher: AuthedFetcher }) {
+  const labels = useKitLabels("feedbackDetail", DEFAULT_FEEDBACK_DETAIL_LABELS);
+  const [busy, setBusy] = useState(false);
+  const name = attachmentName(url);
+  const download = async (event: MouseEvent) => {
+    // The row around the detail may toggle on a click.
+    event.stopPropagation();
+    setBusy(true);
+    try {
+      const answer = await fetcher(url, { signal: new AbortController().signal });
+      const blob = await toBlob(answer);
+      const saveAs =
+        typeof Response !== "undefined" && answer instanceof Response
+          ? filenameFromDisposition(answer.headers.get("Content-Disposition"), name)
+          : name;
+      saveBlob(blob, saveAs);
+    } catch {
+      toast.error(labels.downloadFailed);
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <Button
+      type="button"
+      variant="secondary"
+      size="sm"
+      pending={busy}
+      onClick={(event) => void download(event)}
+      aria-label={labels.download(name)}
+      className="max-w-full"
+    >
+      <FileText className="size-3.5 shrink-0" aria-hidden />
+      <span className="min-w-0 max-w-[14rem] truncate-until-large">{name}</span>
+      <Download className="size-3.5 shrink-0" aria-hidden />
+    </Button>
+  );
+}

package/src/feedback/feedback-comment-thread.tsx

@@ -4,11 +4,13 @@ import { EyeOff } from "lucide-react";
 import { Button } from "../components/button";
 import { useConfirm } from "../components/confirm-dialog";
 import type { CommitScope } from "../components/write-lock";
+import type { AuthedFetcher } from "../hooks/use-authed-src";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { FeedbackStatusBadge } from "./feedback-inbox";
 import type { FeedbackComment, FeedbackReply } from "./feedback-public-types";
 import { DEFAULT_FEEDBACK_PUBLIC_LABELS } from "./feedback-public-labels";
 import { FEEDBACK_COMMENT_MAX, attachmentName } from "./feedback-record";
+import { FeedbackEntryFile, useFeedbackEntryUpload, type FeedbackEntryUploadOptions } from "./feedback-entry-file";
 import { useFeedbackRepliesLabels } from "./feedback-replies";
 import { FeedbackRepliesDrawnAboveContext } from "./feedback-replies-context";
 import { FeedbackReworkEntryChip } from "./feedback-rework-entry-chip";
@@ -34,8 +36,13 @@ import { DEFAULT_FEEDBACK_COMMENTS_LABELS } from "./feedback-thread-parts-labels
  *   sees their text with that line; the admin sees it struck through, with **Unhide**.
  *   An admin has **Hide** on every visible comment; the writer **Delete** on their own,
  *   after a confirm (it is a hard delete). Nobody edits a comment.
- * - **The composer** (1–4 000 characters, no files) only with `onComment`: left out for
- *   a reader who may not write (a demo, a CRASH report — the app knows).
+ * - **The composer** (1–4 000 characters) only with `onComment`: left out for a reader
+ *   who may not write (a demo, a CRASH report — the app knows). Since 0.47 (§12) with
+ *   `onUpload` it takes one file as the rework note does — pasted into the box,
+ *   captured or picked — uploaded first, its URL `onComment`'s second argument.
+ * - **Files** (0.47, §12): a comment's or an entry's file under its text, a picture
+ *   INLINE — a thumbnail through `fetcher` that opens full size — any other file a
+ *   download ({@link FeedbackEntryFile}). A veiled comment shows none.
  *
  * Delete asks through `useConfirm`, so a thread with `onDelete` and a comment of the
  * viewer's needs the app's `ConfirmProvider` (each app mounts one already).
@@ -75,7 +82,7 @@ export { DEFAULT_FEEDBACK_COMMENTS_LABELS };
 
 /* ── The thread ───────────────────────────────────────────────────────────── */
 
-export interface FeedbackCommentThreadProps {
+export interface FeedbackCommentThreadProps extends FeedbackEntryUploadOptions {
   /** The report's replies (§9.7), oldest first. Left out or `[]`: none.
    *
    *  Inside `FeedbackRowDetail`'s `comments` they are dropped (0.38.1): the detail's
@@ -92,8 +99,12 @@ export interface FeedbackCommentThreadProps {
   /** `POST /feedback/{id}/comments`. Return the promise: the box clears when it
    *  resolves, and keeps the draft when it rejects. A failure is the app's to toast —
    *  the server's `detail`, else `feedbackToast.commentFailed` (0.38.1). Left out, no
-   *  composer. */
-  onComment?: (body: string) => void | Promise<unknown>;
+   *  composer. 0.47 (§12): `attachmentUrl` is the one file uploaded with it (with
+   *  `onUpload`), `undefined` for none — `attachment_url` in the body (server-kit 0.18). */
+  onComment?: (body: string, attachmentUrl?: string) => void | Promise<unknown>;
+  /** 0.47: the app's authenticated GET (`AuthedImage`'s) for the files in the thread.
+   *  Left out, the browser's own fetch with same-origin cookies. */
+  fetcher?: AuthedFetcher | null;
   /** `PATCH /feedback/{id}/comments/{comment_id} {hidden}` — the admin's. A rejection
    *  is caught (0.38.1) and is the app's to toast (`feedbackToast.updateFailed`). Left
    *  out, no Hide / Unhide. */
@@ -141,9 +152,18 @@ export function FeedbackCommentThread({
   loading = false,
   commit,
   now,
+  fetcher,
+  onUpload,
+  onCaptureScreenshot,
+  attachment,
   labels: labelsProp,
   className,
 }: FeedbackCommentThreadProps) {
+  const { composerAttachment, upload, uploading } = useFeedbackEntryUpload({
+    onUpload,
+    onCaptureScreenshot,
+    attachment,
+  });
   const labels = useKitLabels("feedbackComments", DEFAULT_FEEDBACK_COMMENTS_LABELS, labelsProp);
   const anonymous = useKitLabels("feedbackPublic", DEFAULT_FEEDBACK_PUBLIC_LABELS).anonymous;
   const replyLabels = useFeedbackRepliesLabels();
@@ -189,6 +209,10 @@ export function FeedbackCommentThread({
         author: reply.author_name ?? replyLabels.admin,
         createdAt: reply.created_at,
         body: reply.body,
+        // 0.47 (§12): an admin reply's file, where the view carries it.
+        attachments: reply.attachment_url
+          ? [{ name: attachmentName(reply.attachment_url), url: reply.attachment_url }]
+          : undefined,
         staff: true,
         badge: reply.status_to ? (
           <span className="inline-flex min-w-0 max-w-full flex-wrap items-center gap-1" data-feedback-reply-status={reply.status_to}>
@@ -244,6 +268,11 @@ export function FeedbackCommentThread({
         author: veiled ? undefined : comment.mine ? undefined : (comment.author_name ?? anonymous),
         createdAt: comment.created_at,
         body: veiled ? "" : (comment.body ?? ""),
+        // 0.47 (§12): its one file; none when veiled (the server sends none either).
+        attachments:
+          !veiled && comment.attachment_url
+            ? [{ name: attachmentName(comment.attachment_url), url: comment.attachment_url }]
+            : undefined,
         staff: !veiled && comment.staff,
         struck: comment.hidden && isAdmin && !veiled,
         footer: actions.length > 0 ? actions : undefined,
@@ -258,13 +287,19 @@ export function FeedbackCommentThread({
         messages={entries.map((entry) => entry.message)}
         loading={loading}
         now={now}
+        renderAttachment={(file) => (file.url ? <FeedbackEntryFile url={file.url} fetcher={fetcher} /> : file.name)}
         labels={{ thread: labels.comments, empty: labels.empty }}
       />
       {onComment && (
         <ChatComposer
           className="mt-3"
-          onSend={(body) => onComment(body)}
-          pending={pending}
+          onSend={async (body, file) => {
+            const url = await upload(file);
+            // The second argument only with a file, so a text comment calls as before 0.47.
+            return url === undefined ? onComment(body) : onComment(body, url);
+          }}
+          pending={pending || uploading}
+          attachment={composerAttachment}
           commit={commit}
           maxLength={FEEDBACK_COMMENT_MAX}
           showCount