@cosmicdrift/kumiko-renderer-web 0.338.0 → 0.339.0

package/dist/default-color-scheme.d.ts

@@ -0,0 +1,2 @@
+export type DefaultColorScheme = "auto" | "light" | "dark";
+export declare const DEFAULT_COLOR_SCHEME_VARIABLE = "--kumiko-default-color-scheme";

package/dist/default-color-scheme.js

@@ -0,0 +1,3 @@
+// Written by createThemePlugin, read by the browser tokens hook. A separate
+// module keeps tailwindcss/plugin out of the client bundle.
+export const DEFAULT_COLOR_SCHEME_VARIABLE = "--kumiko-default-color-scheme";

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export type { AppPrimitives, AppSchema, AppTokens, BannerProps, ButtonProps, CardProps, ColorTokens, CorePrimitives, CoreTokens, DataTableProps, DispatcherProviderProps, FeatureSchema, FieldProps, FontTokens, FormProps, GridCellProps, GridProps, HeadingProps, InputProps, KumikoScreenProps, LiveEvent, LiveEventSubscriber, LiveEventsProviderProps, LocaleProviderProps, NavApi, NavProviderProps, NavRoute, NavTarget, PrimitivesProviderProps, PrimitivesRegistry, RadiusTokens, RenderEditChangeState, RenderEditControls, RenderEditProps, RenderFieldProps, RenderListProps, SectionProps, ShadowTokens, SpacingTokens, TextProps, ThemeMode, Tokens, TokensApi, TokensProviderProps, TranslationBundle, TranslationsByLocale, UseFormOptions, UseFormResult, UseQueryOptions, UseQueryResult, UserRolesProviderProps, WorkspaceSchema, } from "@cosmicdrift/kumiko-renderer";
+export type { AppPrimitives, AppSchema, AppTokens, BannerProps, ButtonProps, CardProps, ColorTokens, CorePrimitives, CoreTokens, DataTableProps, DispatcherProviderProps, FeatureSchema, FieldProps, FontTokens, FormProps, GridCellProps, GridProps, HeadingProps, InputProps, KumikoScreenProps, LiveEvent, LiveEventSubscriber, LiveEventsProviderProps, LocaleProviderProps, NavApi, NavProviderProps, NavRoute, NavTarget, PrimitivesProviderProps, PrimitivesRegistry, RadiusTokens, RenderEditChangeState, RenderEditControls, RenderEditProps, RenderFieldProps, RenderListProps, SectionProps, ShadowTokens, SpacingTokens, TextProps, ThemeMode, ThemePreference, Tokens, TokensApi, TokensProviderProps, TranslationBundle, TranslationsByLocale, UseFormOptions, UseFormResult, UseQueryOptions, UseQueryResult, UserRolesProviderProps, WorkspaceSchema, } from "@cosmicdrift/kumiko-renderer";
 export { createStaticLocaleResolver, cssVarTokens, DispatcherProvider, formatPath, KumikoScreen, LiveEventsProvider, LocaleProvider, NavProvider, PrimitivesProvider, parsePath, qualifyScreenId, RenderEdit, RenderField, RenderList, synthesizeActionFormEntity, synthesizeActionFormScreen, TokensProvider, UserRolesProvider, useDispatcher, useDispatcherStatus, useForm, useLiveEvents, useLocale, useNav, usePrimitives, useQuery, useStore, useStoreSelector, useTokenController, useTokens, useTranslation, useUserRoles, } from "@cosmicdrift/kumiko-renderer";
 export { createBrowserLocaleResolver } from "./app/browser-locale.js";
 export type { ClientFeatureDefinition } from "./app/client-plugin.js";
@@ -67,5 +67,7 @@ export { createEventSourceLiveEvents } from "./sse/live-events.js";
 export { applyTokensToCssVars, defaultTokens, lightTokens, useBrowserTokensApi, } from "./tokens.js";
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./ui/resizable.js";
 export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar.js";
-export type { AiTextAreaProps, AiTextFieldProps, BooleanFieldProps, ComparisonMetric, DateFieldProps, DrawerProps, FeedRow, FileFieldProps, FloatingPanelGeometry, FloatingPanelProps, InfinityListProps, InfinityListSelection, NumberFieldProps, PhotoSlotSpec, PhotoSlotsProps, PlanCardActionSlot, PlanCardPrice, PlanCardProps, PlanGridProps, ProgressListRow, PublicShellProps, PublicShellVariant, QueryTableColumn, QueryTableProps, RangeFieldProps, ResultColumn, SelectFieldProps, SideBySideTableCell, SideBySideTableColumn, SideBySideTableRow, StatDelta, StatTone, StatusBadgeTone, StatusBarEntry, StatusTone, TextareaFieldProps, TextFieldProps, TimeseriesPoint, UploadZoneProps, } from "./widgets/index.js";
+export type { KumikoBuild } from "./version/update-checker.js";
+export { readLoadedBuild } from "./version/update-checker.js";
+export type { AiTextAreaProps, AiTextFieldProps, BooleanFieldProps, ComparisonMetric, DateFieldProps, DrawerProps, FeedRow, FileFieldProps, FloatingPanelGeometry, FloatingPanelProps, InfinityListProps, InfinityListSelection, NumberFieldProps, PhotoSlotSpec, PhotoSlotsProps, PlanCardActionSlot, PlanCardPrice, PlanCardProps, PlanGridProps, ProgressListRow, PublicShellProps, PublicShellVariant, QueryTableColumn, QueryTableProps, RangeFieldProps, ResultColumn, SelectFieldProps, SideBySideTableCell, SideBySideTableColumn, SideBySideTableRow, StatDelta, StatTone, StatusBadgeTone, StatusBarEntry, StatusTone, TextareaFieldProps, TextFieldProps, TimeseriesPoint, TimeseriesReferenceLine, UploadZoneProps, } from "./widgets/index.js";
 export { AiTextArea, AiTextField, BooleanField, CollapsibleSection, ComparisonTable, DateField, DetailList, Drawer, EmptyState, ErrorState, FeedList, FileField, FloatingPanel, InfinityList, LoadingState, MiniStat, ModeSwitch, MoneyField, NumberField, PercentField, PhotoSlots, PlanCard, PlanGrid, ProgressBar, ProgressList, PublicShell, QueryTable, RangeField, ResultPanel, ResultTable, SectionCard, SelectField, SideBySideTable, Sparkline, STATUS_TONE_TEXT, StatCard, StatusBadge, StatusBarChart, StepBar, smoothPath, TextareaField, TextField, TimeseriesChart, UploadZone, useDraft, } from "./widgets/index.js";

package/dist/index.js

@@ -46,4 +46,5 @@ export { createEventSourceLiveEvents } from "./sse/live-events.js";
 export { applyTokensToCssVars, defaultTokens, lightTokens, useBrowserTokensApi, } from "./tokens.js";
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./ui/resizable.js";
 export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar.js";
+export { readLoadedBuild } from "./version/update-checker.js";
 export { AiTextArea, AiTextField, BooleanField, CollapsibleSection, ComparisonTable, DateField, DetailList, Drawer, EmptyState, ErrorState, FeedList, FileField, FloatingPanel, InfinityList, LoadingState, MiniStat, ModeSwitch, MoneyField, NumberField, PercentField, PhotoSlots, PlanCard, PlanGrid, ProgressBar, ProgressList, PublicShell, QueryTable, RangeField, ResultPanel, ResultTable, SectionCard, SelectField, SideBySideTable, Sparkline, STATUS_TONE_TEXT, StatCard, StatusBadge, StatusBarChart, StepBar, smoothPath, TextareaField, TextField, TimeseriesChart, UploadZone, useDraft, } from "./widgets/index.js";

package/dist/layout/language-switcher.js

@@ -12,13 +12,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // itself; an app that doesn't want an icon import gets the globe
 // unicode glyph (🌐) as default.
 import { useLocale, useTranslation } from "@cosmicdrift/kumiko-renderer";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { cn } from "../lib/cn.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, } from "../primitives/dropdown-menu.js";
 export function LanguageSwitcher({ locales, icon = "🌐", label, testId, }) {
     const resolver = useLocale();
     const t = useTranslation();
     const resolvedLabel = label ?? t("kumiko.nav.language");
+    // Portal into the surrounding landmark: content under document.body would sit outside every
+    // landmark and fail axe's "region" rule.
+    const [trigger, setTrigger] = useState(null);
+    const landmark = trigger?.closest("header, nav, main, aside, [role='banner']");
     const activeLocale = resolver.locale();
     // Matches either exact ("de-DE") or the language root ("de") against
     // the available options. So the switcher shows "German" active when
@@ -35,5 +39,5 @@ export function LanguageSwitcher({ locales, icon = "🌐", label, testId, }) {
         return null;
     }
     const setLocale = resolver.setLocale;
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": resolvedLabel, title: resolvedLabel, "data-testid": testId, className: cn("inline-flex h-8 items-center gap-1.5 rounded-md border bg-background px-2 text-sm", "hover:bg-accent hover:text-accent-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"), children: [_jsx("span", { "aria-hidden": "true", children: icon }), _jsx("span", { className: "uppercase text-xs text-muted-foreground", children: activeOption?.code ?? activeLocale.slice(0, 2) })] }) }), _jsx(DropdownMenuContent, { align: "end", className: "min-w-[10rem]", "aria-label": resolvedLabel, children: locales.map((opt) => (_jsx(DropdownMenuCheckboxItem, { checked: opt === activeOption, onSelect: () => setLocale(opt.code), children: _jsx("span", { className: "truncate", children: opt.label }) }, opt.code))) })] }));
+    return (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { ref: setTrigger, type: "button", "aria-label": resolvedLabel, title: resolvedLabel, "data-testid": testId, className: cn("inline-flex h-8 items-center gap-1.5 rounded-md border bg-background px-2 text-sm", "hover:bg-accent hover:text-accent-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"), children: [_jsx("span", { "aria-hidden": "true", children: icon }), _jsx("span", { className: "uppercase text-xs text-muted-foreground", children: activeOption?.code ?? activeLocale.slice(0, 2) })] }) }), _jsx(DropdownMenuContent, { align: "end", className: "min-w-[10rem]", "aria-label": resolvedLabel, portalContainer: landmark instanceof HTMLElement ? landmark : undefined, children: locales.map((opt) => (_jsx(DropdownMenuCheckboxItem, { checked: opt === activeOption, onSelect: () => setLocale(opt.code), children: _jsx("span", { className: "truncate", children: opt.label }) }, opt.code))) })] }));
 }

package/dist/layout/theme-label.d.ts

@@ -1,9 +1,15 @@
+import { type ThemePreference } from "@cosmicdrift/kumiko-renderer";
 export type ThemeToggleLabelOptions = {
+    /** Title while the next step is the light theme. */
     readonly titleInDark?: string | undefined;
+    /** Title while the next step is the dark theme. */
     readonly titleInLight?: string | undefined;
+    /** Title while the next step is the automatic theme. */
+    readonly titleForAuto?: string | undefined;
 };
-export declare function useThemeToggleLabel({ titleInDark, titleInLight }: ThemeToggleLabelOptions): {
-    readonly isDark: boolean;
+export declare function nextThemePreference(current: ThemePreference): ThemePreference;
+export declare function useThemeToggleLabel({ titleInDark, titleInLight, titleForAuto, }: ThemeToggleLabelOptions): {
+    readonly nextPreference: ThemePreference;
     readonly title: string;
-    readonly toggleMode: () => void;
+    readonly cyclePreference: () => void;
 };

package/dist/layout/theme-label.js

@@ -1,11 +1,35 @@
-import { useOptionalTranslation, useTokenController } from "@cosmicdrift/kumiko-renderer";
-export function useThemeToggleLabel({ titleInDark, titleInLight }) {
-    const { mode, toggleMode } = useTokenController();
+import { useOptionalTranslation, useTokenController, } from "@cosmicdrift/kumiko-renderer";
+// light -> dark -> auto -> light: a click describes and applies the NEXT step.
+export function nextThemePreference(current) {
+    if (current === "light")
+        return "dark";
+    if (current === "dark")
+        return "auto";
+    return "light";
+}
+export function useThemeToggleLabel({ titleInDark, titleInLight, titleForAuto, }) {
+    const { mode, preference = mode, setPreference, toggleMode } = useTokenController();
     // Optional: the toggle also renders outside a LocaleProvider (samples, tests).
     const translate = useOptionalTranslation();
-    const isDark = mode === "dark";
-    const title = isDark
-        ? (titleInDark ?? translate?.("kumiko.theme.light") ?? "Light theme")
-        : (titleInLight ?? translate?.("kumiko.theme.dark") ?? "Dark theme");
-    return { isDark, title, toggleMode };
+    // A TokensApi without setPreference is a plain light/dark implementation: no auto step.
+    const nextPreference = setPreference
+        ? nextThemePreference(preference)
+        : mode === "dark"
+            ? "light"
+            : "dark";
+    const titles = {
+        light: titleInDark ?? translate?.("kumiko.theme.light") ?? "Light theme",
+        dark: titleInLight ?? translate?.("kumiko.theme.dark") ?? "Dark theme",
+        auto: titleForAuto ?? translate?.("kumiko.theme.auto") ?? "Automatic theme",
+    };
+    return {
+        nextPreference,
+        title: titles[nextPreference],
+        cyclePreference: () => {
+            if (setPreference)
+                setPreference(nextPreference);
+            else
+                toggleMode();
+        },
+    };
 }

package/dist/layout/theme-menu-item.d.ts

@@ -2,9 +2,11 @@ import type { ReactNode } from "react";
 export type ThemeMenuItemProps = {
     readonly lightIcon?: ReactNode;
     readonly darkIcon?: ReactNode;
+    readonly autoIcon?: ReactNode;
     readonly titleInDark?: string;
     readonly titleInLight?: string;
+    readonly titleForAuto?: string;
     readonly testId?: string;
 };
 /** Theme toggle as a dropdown entry, for a user menu that carries the shell controls. */
-export declare function ThemeMenuItem({ lightIcon, darkIcon, titleInDark, titleInLight, testId, }: ThemeMenuItemProps): ReactNode;
+export declare function ThemeMenuItem({ lightIcon, darkIcon, autoIcon, titleInDark, titleInLight, titleForAuto, testId, }: ThemeMenuItemProps): ReactNode;

package/dist/layout/theme-menu-item.js

@@ -2,10 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DropdownMenuItem } from "../primitives/dropdown-menu.js";
 import { useThemeToggleLabel } from "./theme-label.js";
 /** Theme toggle as a dropdown entry, for a user menu that carries the shell controls. */
-export function ThemeMenuItem({ lightIcon = "☀", darkIcon = "☾", titleInDark, titleInLight, testId, }) {
-    const { isDark, title, toggleMode } = useThemeToggleLabel({ titleInDark, titleInLight });
+export function ThemeMenuItem({ lightIcon = "☀", darkIcon = "☾", autoIcon = "◐", titleInDark, titleInLight, titleForAuto, testId, }) {
+    const { nextPreference, title, cyclePreference } = useThemeToggleLabel({
+        titleInDark,
+        titleInLight,
+        titleForAuto,
+    });
+    const icons = { light: lightIcon, dark: darkIcon, auto: autoIcon };
     return (_jsxs(DropdownMenuItem, { "data-testid": testId, onSelect: (event) => {
             event.preventDefault();
-            toggleMode();
-        }, children: [_jsx("span", { "aria-hidden": "true", children: isDark ? lightIcon : darkIcon }), _jsx("span", { children: title })] }));
+            cyclePreference();
+        }, children: [_jsx("span", { "aria-hidden": "true", children: icons[nextPreference] }), _jsx("span", { children: title })] }));
 }

package/dist/layout/theme-toggle.d.ts

@@ -1,15 +1,17 @@
 import { type ReactNode } from "react";
 export type ThemeToggleProps = {
-    /** Icon für den hellen Modus (wird angezeigt WENN aktuell dark →
-     *  Klick wechselt zu light). Default: ☀ */
+    /** Icon for the step to light mode. Default: ☀ */
     readonly lightIcon?: ReactNode;
-    /** Icon für den dunklen Modus (wird angezeigt WENN aktuell light →
-     *  Klick wechselt zu dark). Default: ☾ */
+    /** Icon for the step to dark mode. Default: ☾ */
     readonly darkIcon?: ReactNode;
-    /** Title/aria-label im dunklen Modus. Default: i18n `kumiko.theme.light` */
+    /** Icon for the step to auto mode. Default: ◐ */
+    readonly autoIcon?: ReactNode;
+    /** Title/aria-label for the step to light mode. Default: i18n `kumiko.theme.light` */
     readonly titleInDark?: string;
-    /** Title/aria-label im hellen Modus. Default: i18n `kumiko.theme.dark` */
+    /** Title/aria-label for the step to dark mode. Default: i18n `kumiko.theme.dark` */
     readonly titleInLight?: string;
+    /** Title/aria-label for the step to auto mode. Default: i18n `kumiko.theme.auto` */
+    readonly titleForAuto?: string;
     readonly testId?: string;
 };
-export declare function ThemeToggle({ lightIcon, darkIcon, titleInDark, titleInLight, testId, }: ThemeToggleProps): ReactNode;
+export declare function ThemeToggle({ lightIcon, darkIcon, autoIcon, titleInDark, titleInLight, titleForAuto, testId, }: ThemeToggleProps): ReactNode;

package/dist/layout/theme-toggle.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// ThemeToggle — Button der useTokenController().toggleMode() aufruft.
+// ThemeToggle — Button der die Theme-Wahl weiterschaltet (hell → dunkel → auto).
 // Icon-Slots als Props, damit renderer-web keine Icon-Lib als Hard-
 // Dependency zieht. Default: Unicode-Glyphs (☀ / ☾) — funktionieren in
 // jedem Browser, jede App kann lucide/heroicons/eigene SVG via Props
@@ -7,12 +7,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { HeaderOverflowMenuContext, headerOverflowMenuItemClass } from "./header-overflow-menu.js";
 import { useThemeToggleLabel } from "./theme-label.js";
-export function ThemeToggle({ lightIcon = "☀", darkIcon = "☾", titleInDark, titleInLight, testId, }) {
+export function ThemeToggle({ lightIcon = "☀", darkIcon = "☾", autoIcon = "◐", titleInDark, titleInLight, titleForAuto, testId, }) {
     const inOverflowMenu = useContext(HeaderOverflowMenuContext);
-    const { isDark, title, toggleMode } = useThemeToggleLabel({ titleInDark, titleInLight });
-    const icon = isDark ? lightIcon : darkIcon;
+    const { nextPreference, title, cyclePreference } = useThemeToggleLabel({
+        titleInDark,
+        titleInLight,
+        titleForAuto,
+    });
+    const icon = { light: lightIcon, dark: darkIcon, auto: autoIcon }[nextPreference];
     if (inOverflowMenu) {
-        return (_jsxs("button", { type: "button", role: "menuitem", onClick: toggleMode, className: headerOverflowMenuItemClass, "data-testid": testId, children: [_jsx("span", { "aria-hidden": "true", children: icon }), _jsx("span", { children: title })] }));
+        return (_jsxs("button", { type: "button", role: "menuitem", onClick: cyclePreference, className: headerOverflowMenuItemClass, "data-testid": testId, children: [_jsx("span", { "aria-hidden": "true", children: icon }), _jsx("span", { children: title })] }));
     }
-    return (_jsx("button", { type: "button", onClick: toggleMode, className: "inline-flex h-8 w-8 items-center justify-center rounded-md border bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", title: title, "aria-label": title, "data-testid": testId, children: icon }));
+    return (_jsx("button", { type: "button", onClick: cyclePreference, className: "inline-flex h-8 w-8 items-center justify-center rounded-md border bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", title: title, "aria-label": title, "data-testid": testId, children: icon }));
 }

package/dist/primitives/dropdown-menu.d.ts

@@ -3,7 +3,10 @@ import type { ComponentPropsWithoutRef, ReactNode } from "react";
 export declare const DropdownMenu: import("react").FC<Primitive.DropdownMenuProps>;
 export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const DropdownMenuPortal: import("react").FC<Primitive.DropdownMenuPortalProps>;
-export declare function DropdownMenuContent({ className, sideOffset, ...props }: ComponentPropsWithoutRef<typeof Primitive.Content>): ReactNode;
+export declare function DropdownMenuContent({ className, sideOffset, portalContainer, ...props }: ComponentPropsWithoutRef<typeof Primitive.Content> & {
+    /** Mount point of the portal. Default: document.body, which sits outside every landmark. */
+    readonly portalContainer?: HTMLElement | null;
+}): ReactNode;
 export declare function DropdownMenuItem({ className, ...props }: ComponentPropsWithoutRef<typeof Primitive.Item>): ReactNode;
 export declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: ComponentPropsWithoutRef<typeof Primitive.CheckboxItem>): ReactNode;
 export declare const DropdownMenuRadioGroup: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/primitives/dropdown-menu.js

@@ -23,8 +23,8 @@ const contentClass = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-pop
     "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 " +
     "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 " +
     "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2";
-export function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
-    return (_jsx(Primitive.Portal, { children: _jsx(Primitive.Content, { sideOffset: sideOffset, className: cn(contentClass, className), ...props }) }));
+export function DropdownMenuContent({ className, sideOffset = 4, portalContainer, ...props }) {
+    return (_jsx(Primitive.Portal, { container: portalContainer, children: _jsx(Primitive.Content, { sideOffset: sideOffset, className: cn(contentClass, className), ...props }) }));
 }
 const itemClass = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm " +
     "outline-none transition-colors " +

package/dist/primitives/index.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { applyFormatSpec, isSafeHref } from "@cosmicdrift/kumiko-headless";
 import { InsideDrawerProvider, needsActionConfirm, STICKY_PRIMARY_ACTION_PROP, shouldRenderActionsIconOnly, statusToneForOptionTone, statusToneForValue, useColumnRenderer, useInsideDrawer, useOptionalLocale, useOptionalTranslation, useTranslation, WriteFailedError, } from "@cosmicdrift/kumiko-renderer";
 import { cva } from "class-variance-authority";
-import { ArrowDown, ArrowUp, ArrowUpDown, Building, CalendarDays, ChevronDown, ChevronLeft, ChevronRight, Globe, Hash, KeyRound, Link, Loader2, Lock, Mail, MapPin, MoreHorizontal, Phone, Search, SlidersHorizontal, Tag, Undo2, User, X, } from "lucide-react";
+import { ArrowDown, ArrowUp, ArrowUpDown, Building, CalendarDays, Check, ChevronDown, ChevronLeft, ChevronRight, Globe, Hash, KeyRound, Link, Loader2, Lock, Mail, MapPin, MoreHorizontal, Phone, Search, SlidersHorizontal, Tag, Undo2, User, X, } from "lucide-react";
 // The main entry pulls Node-only deps (yargs/pngjs) under bundlers that ignore
 // package.json#browser (Metro), hence the explicit browser subpath.
 import QRCode from "qrcode/lib/browser.js";
@@ -144,7 +144,7 @@ const DrawerBodyContext = createContext(false);
 function DefaultField({ id, label, required, issues, labelAppendix, fieldAppendix, appendixPlacement, description, status, children, layout, accent, hideLabel, testId, changed, }) {
     const t = useTranslation();
     const hasError = issues !== undefined && issues.length > 0;
-    const labelEl = (_jsxs(UiLabel, { id: fieldLabelId(id), htmlFor: id, className: cn("min-w-0 gap-0 text-[13px]", hasError ? "text-destructive" : "text-foreground", hideLabel === true && "sr-only"), children: [_jsx("span", { className: "truncate", title: typeof label === "string" ? label : undefined, children: label }), required === true && (_jsx("span", { "data-required": true, className: "ml-0.5 shrink-0 text-destructive", children: "*" }))] }));
+    const labelEl = (_jsxs(UiLabel, { id: fieldLabelId(id), htmlFor: id, className: cn("min-w-0 gap-0 text-[13px]", hasError ? "text-destructive" : "text-foreground", hideLabel === true && "sr-only"), children: [_jsx("span", { className: layout === "inline" ? undefined : "truncate", title: typeof label === "string" ? label : undefined, children: label }), required === true && (_jsx("span", { "data-required": true, className: "ml-0.5 shrink-0 text-destructive", children: "*" }))] }));
     const errorsEl = hasError ? (_jsx("div", { role: "alert", "data-testid": testId !== undefined ? `${testId}-errors` : undefined, className: "text-xs text-destructive", children: issues.map((issue) => (_jsx("div", { children: t(issue.i18nKey, issue.params) }, `${issue.path}:${issue.code}`))) })) : null;
     // Inline (boolean/checkbox): Control links, Label rechts — shadcn-Muster.
     if (layout === "inline") {
@@ -787,8 +787,18 @@ function isEmptyCellValue(value) {
     return (value === null || value === undefined || (typeof value === "string" && value.trim() === ""));
 }
 // A boolean false renders as an empty string unless the column's format spec names a falseLabel.
+// Projection lists synthesize every column as type "text", so a boolean format spec
+// marks a boolean column on its own.
+function isBooleanColumn(type, renderer) {
+    if (type === "boolean")
+        return true;
+    return (typeof renderer === "object" &&
+        renderer !== null &&
+        "format" in renderer &&
+        renderer.format === "boolean");
+}
 function isUnlabeledFalse(type, value, renderer) {
-    if (type !== "boolean" || value !== false)
+    if (value !== false || !isBooleanColumn(type, renderer))
         return false;
     if (renderer === undefined)
         return true;
@@ -798,10 +808,24 @@ function isUnlabeledFalse(type, value, renderer) {
         renderer.format === "boolean" &&
         !("falseLabel" in renderer));
 }
+function isUnlabeledBooleanFormat(renderer) {
+    return (typeof renderer === "object" &&
+        renderer !== null &&
+        "format" in renderer &&
+        renderer.format === "boolean" &&
+        !("trueLabel" in renderer) &&
+        !("falseLabel" in renderer));
+}
+function BooleanCell({ value, translate, }) {
+    const label = value
+        ? (translate?.("kumiko.boolean.yes") ?? "Yes")
+        : (translate?.("kumiko.boolean.no") ?? "No");
+    return (_jsxs("span", { "data-boolean-cell": value ? "true" : "false", children: [value ? (_jsx(Check, { "aria-hidden": "true", className: "h-4 w-4" })) : (_jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: EMPTY_CELL_PLACEHOLDER })), _jsx("span", { className: "sr-only", children: label })] }));
+}
 // True when the cell would render the default "✓": no renderer, or a boolean
 // format spec that names no trueLabel of its own.
 function showsBareCheckMark(type, value, renderer) {
-    if (type !== "boolean" || value !== true)
+    if (value !== true || !isBooleanColumn(type, renderer))
         return false;
     if (renderer === undefined)
         return true;
@@ -1162,13 +1186,13 @@ function humanizeSlug(slug) {
 }
 // Tooltip-Text für truncated Cells — bei Hover zeigt der Browser den
 // vollen Text. Skipping für Object/Array (das ist nicht user-readable);
-// Number/Boolean stringifyt der Browser ohnehin korrekt.
+// Number stringifyt der Browser ohnehin korrekt; booleans get no raw true/false tooltip.
 function cellTitle(value) {
     if (value === null || value === undefined)
         return undefined;
     if (typeof value === "string")
         return value.length > 0 ? value : undefined;
-    if (typeof value === "number" || typeof value === "boolean")
+    if (typeof value === "number")
         return String(value);
     return undefined;
 }
@@ -1228,6 +1252,9 @@ function DataTableCell({ value, row, field, type, renderer, optionLabels, option
     if (isEmptyCellValue(value) && typeof renderer !== "function" && componentRef === undefined) {
         return (_jsx("span", { "data-empty-cell": "true", className: "text-muted-foreground", children: EMPTY_CELL_PLACEHOLDER }));
     }
+    if (typeof value === "boolean" && isUnlabeledBooleanFormat(renderer)) {
+        return _jsx(BooleanCell, { value: value, translate: translate });
+    }
     if (isUnlabeledFalse(type, value, renderer)) {
         return (_jsx("span", { "data-empty-cell": "true", className: "text-muted-foreground", children: EMPTY_CELL_PLACEHOLDER }));
     }

package/dist/primitives/lightbox.d.ts

@@ -1,3 +1,3 @@
 import type { LightboxProps } from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
-export declare function DefaultLightbox({ open, onOpenChange, src, alt, testId, }: LightboxProps): ReactNode;
+export declare function DefaultLightbox(props: LightboxProps): ReactNode;

package/dist/primitives/lightbox.js

@@ -1,9 +1,35 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { ModalShell } from "./modal-shell.js";
-export function DefaultLightbox({ open, onOpenChange, src, alt, testId, }) {
+const NAV_BUTTON_CLASS = "absolute top-1/2 -translate-y-1/2 flex size-9 items-center justify-center rounded-full border border-border bg-card text-foreground opacity-80 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring";
+export function DefaultLightbox(props) {
+    const { open, onOpenChange, testId } = props;
     const t = useTranslation();
-    return (_jsxs(ModalShell, { open: open, onOpenChange: onOpenChange, testId: testId, closeLabel: t("kumiko.dialog.close"), noAriaDescription: true, contentClassName: cn("border-0 bg-transparent p-0 shadow-none", "max-w-[95vw] max-h-[90vh] w-auto"), children: [_jsx(DialogPrimitive.Title, { className: "sr-only", children: alt }), _jsx("img", { src: src, alt: alt, className: "block max-h-[85vh] max-w-[90vw] w-auto rounded-lg border border-border bg-card shadow-lg" })] }));
+    const images = "images" in props ? props.images : [{ src: props.src, alt: props.alt }];
+    const onIndexChange = "images" in props ? props.onIndexChange : undefined;
+    const total = images.length;
+    // Clamped here so a stale index after the image set shrinks never renders blank.
+    const requestedIndex = "images" in props ? props.index : 0;
+    const index = Math.min(Math.max(requestedIndex, 0), total - 1);
+    const current = images[index];
+    if (current === undefined)
+        return null;
+    const canNavigate = onIndexChange !== undefined && total > 1;
+    const goTo = (target) => {
+        onIndexChange?.((target + total) % total);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            goTo(index + 1);
+        }
+        else if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            goTo(index - 1);
+        }
+    };
+    return (_jsxs(ModalShell, { open: open, onOpenChange: onOpenChange, testId: testId, closeLabel: t("kumiko.dialog.close"), noAriaDescription: true, ...(canNavigate && { onContentKeyDown: handleKeyDown }), contentClassName: cn("border-0 bg-transparent p-0 shadow-none", "max-w-[95vw] max-h-[90vh] w-auto"), children: [_jsx(DialogPrimitive.Title, { className: "sr-only", children: current.alt }), _jsx("img", { src: current.src, alt: current.alt, className: "block max-h-[85vh] max-w-[90vw] w-auto rounded-lg border border-border bg-card shadow-lg" }), canNavigate && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": t("kumiko.lightbox.previous"), onClick: () => goTo(index - 1), className: cn(NAV_BUTTON_CLASS, "left-2"), children: _jsx(ChevronLeft, { className: "size-5" }) }), _jsx("button", { type: "button", "aria-label": t("kumiko.lightbox.next"), onClick: () => goTo(index + 1), className: cn(NAV_BUTTON_CLASS, "right-2"), children: _jsx(ChevronRight, { className: "size-5" }) }), _jsx("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-card px-3 py-1 text-xs text-foreground shadow-sm", children: t("kumiko.lightbox.position", { current: index + 1, total }) })] }))] }));
 }

package/dist/primitives/modal-shell.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { KeyboardEvent, ReactNode } from "react";
 export type ModalShellProps = {
     readonly open: boolean;
     readonly onOpenChange: (open: boolean) => void;
@@ -12,5 +12,6 @@ export type ModalShellProps = {
     /** Lets the caller take over Radix's initial-focus target — call
      *  `event.preventDefault()` and focus the desired element yourself. */
     readonly onOpenAutoFocus?: (event: Event) => void;
+    readonly onContentKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
 };
-export declare function ModalShell({ open, onOpenChange, children, testId, contentClassName, noAriaDescription, closeLabel, showCloseButton, onOpenAutoFocus, }: ModalShellProps): ReactNode;
+export declare function ModalShell({ open, onOpenChange, children, testId, contentClassName, noAriaDescription, closeLabel, showCloseButton, onOpenAutoFocus, onContentKeyDown, }: ModalShellProps): ReactNode;

package/dist/primitives/modal-shell.js

@@ -4,6 +4,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
-export function ModalShell({ open, onOpenChange, children, testId, contentClassName, noAriaDescription, closeLabel, showCloseButton = true, onOpenAutoFocus, }) {
-    return (_jsx(DialogPrimitive.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }), _jsxs(DialogPrimitive.Content, { "data-testid": testId, ...(noAriaDescription && { "aria-describedby": undefined }), ...(onOpenAutoFocus !== undefined && { onOpenAutoFocus }), className: cn("fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", contentClassName), children: [children, showCloseButton && closeLabel !== undefined && (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx("button", { type: "button", "aria-label": closeLabel, className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: _jsx(X, { className: "size-4" }) }) }))] })] }) }));
+export function ModalShell({ open, onOpenChange, children, testId, contentClassName, noAriaDescription, closeLabel, showCloseButton = true, onOpenAutoFocus, onContentKeyDown, }) {
+    return (_jsx(DialogPrimitive.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }), _jsxs(DialogPrimitive.Content, { "data-testid": testId, ...(noAriaDescription && { "aria-describedby": undefined }), ...(onOpenAutoFocus !== undefined && { onOpenAutoFocus }), ...(onContentKeyDown !== undefined && { onKeyDown: onContentKeyDown }), className: cn("fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", contentClassName), children: [children, showCloseButton && closeLabel !== undefined && (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx("button", { type: "button", "aria-label": closeLabel, className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: _jsx(X, { className: "size-4" }) }) }))] })] }) }));
 }

package/dist/theme-plugin.d.ts

@@ -1,4 +1,5 @@
 import plugin from "tailwindcss/plugin";
+import { type DefaultColorScheme } from "./default-color-scheme.js";
 export declare const FRAMEWORK_COLOR_NAMES: readonly ["background", "foreground", "foreground-secondary", "foreground-disabled", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-foreground", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "destructive-foreground", "border", "border-strong", "border-row", "input", "ring", "sidebar", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-muted", "sidebar-input", "sidebar-border", "sidebar-ring", "status-ok", "status-ok-surface", "status-warn", "status-warn-surface", "status-bad", "status-bad-surface", "status-critical", "status-critical-surface", "status-neutral", "status-neutral-surface", "status-active", "status-active-surface", "syntax-key", "syntax-string", "syntax-number", "syntax-literal", "promo", "promo-foreground", "promo-accent", "promo-accent-foreground"];
 export type FrameworkColorName = (typeof FRAMEWORK_COLOR_NAMES)[number];
 /** A plain string applies to both modes; `dark` falls back to `light`. */
@@ -7,6 +8,8 @@ export type ThemeColorValue = string | {
     readonly dark?: string;
 };
 export type AppTheme = {
+    /** Scheme for visitors without a stored choice. "auto" follows the OS setting. */
+    readonly defaultColorScheme?: DefaultColorScheme;
     readonly colors?: Readonly<Partial<Record<FrameworkColorName | (string & {}), ThemeColorValue>>>;
     /** Base radius; the sm/md/lg/xl scale derives from it. */
     readonly radius?: string;

package/dist/theme-plugin.js

@@ -1,4 +1,5 @@
 import plugin from "tailwindcss/plugin";
+import { DEFAULT_COLOR_SCHEME_VARIABLE } from "./default-color-scheme.js";
 export const FRAMEWORK_COLOR_NAMES = [
     "background",
     "foreground",
@@ -87,6 +88,9 @@ function buildColorDeclarations(colors) {
 }
 function buildModeInvariantDeclarations(theme) {
     const modeInvariant = {};
+    if (theme.defaultColorScheme !== undefined) {
+        modeInvariant[DEFAULT_COLOR_SCHEME_VARIABLE] = theme.defaultColorScheme;
+    }
     if (theme.radius !== undefined)
         modeInvariant["--radius"] = theme.radius;
     if (theme.fonts?.sans !== undefined)

package/dist/tokens.d.ts

@@ -1,9 +1,9 @@
 import { type Tokens, type TokensApi } from "@cosmicdrift/kumiko-renderer";
 export declare const THEME_STORAGE_KEY = "kumiko:theme";
-/** Liest die persistierte Theme-Wahl und setzt die `.dark`-Class. Wird
- *  beim ersten useBrowserTokensApi-Mount aufgerufen; das Inline-Script
- *  in der Host-HTML (siehe Header-Kommentar) macht dasselbe synchron
- *  vor dem ersten Paint. */
+/** Reads the persisted theme choice (or the app default) and sets the `.dark`
+ *  class. Called on the first useBrowserTokensApi mount; the inline script in
+ *  the host HTML (see header comment) does the same synchronously before the
+ *  first paint. */
 export declare function applyStoredThemeMode(): void;
 /** Nur für Tests: der once-per-page-load-Guard ist ein Module-Singleton —
  *  ohne Reset wäre der Mount-Restore-Pfad nach der ersten Render im

package/dist/tokens.js

@@ -1,6 +1,7 @@
 import { createStore } from "@cosmicdrift/kumiko-headless";
 import { cssVarTokens, } from "@cosmicdrift/kumiko-renderer";
-import { useState, useSyncExternalStore } from "react";
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { DEFAULT_COLOR_SCHEME_VARIABLE } from "./default-color-scheme.js";
 // Web-spezifische TokensApi-Impl. Theme-Toggle via `.dark`-Class auf
 // <html>. Die echten Farben leben in styles.css; hier ist nur die
 // JS-Seite die den class-switch triggert und React-Consumer mit
@@ -11,56 +12,105 @@ import { useState, useSyncExternalStore } from "react";
 // jedem Class-Wechsel hochzählen. So bleibt die DOM-Klasse die einzige
 // Wahrheit — readCurrentMode liest sie frisch bei jedem getSnapshot.
 //
-// Persistenz: die Wahl landet in localStorage (THEME_STORAGE_KEY) und
-// wird beim ersten Hook-Mount restored — ohne das war der Toggle nach
-// jedem Reload weg ("dark/light geht nicht", Prod-Bug 2026-06-07).
-// Gegen FOUC gehört zusätzlich ein synchrones Inline-Script in die
-// Host-HTML, VOR dem Stylesheet-Link:
+// Persistence: the choice is stored in localStorage (THEME_STORAGE_KEY) and
+// restored on the first hook mount; without it the toggle was lost on every
+// reload (prod bug 2026-06-07).
+// Preference: "auto" follows prefers-color-scheme live (matchMedia listener),
+// "light"/"dark" are explicit choices and win. Without a stored choice,
+// AppTheme.defaultColorScheme (CSS variable) applies, otherwise the HTML state.
 //
-//   <script>try{if(localStorage.getItem("kumiko:theme")==="dark")
+// Against FOUC the host HTML also needs a synchronous inline script BEFORE
+// the stylesheet link (nonce/hash under a strict CSP):
+//
+//   <script>try{var s=localStorage.getItem("kumiko:theme");
+//     if(s==="dark"||(s==="auto"&&matchMedia("(prefers-color-scheme: dark)").matches))
 //     document.documentElement.classList.add("dark")}catch(e){}</script>
 const themeTick = createStore(0);
 export const THEME_STORAGE_KEY = "kumiko:theme";
+const DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+function isThemePreference(value) {
+    return value === "auto" || value === "light" || value === "dark";
+}
 function readCurrentMode() {
     if (typeof document === "undefined")
         return "dark";
     return document.documentElement.classList.contains("dark") ? "dark" : "light";
 }
+function systemPrefersDark() {
+    return typeof window.matchMedia === "function" && window.matchMedia(DARK_SCHEME_QUERY).matches;
+}
+function resolveMode(preference) {
+    if (preference === "auto")
+        return systemPrefersDark() ? "dark" : "light";
+    return preference;
+}
+function readDefaultPreference() {
+    const declared = getComputedStyle(document.documentElement)
+        .getPropertyValue(DEFAULT_COLOR_SCHEME_VARIABLE)
+        .trim();
+    return isThemePreference(declared) ? declared : readCurrentMode();
+}
+function readStoredPreference() {
+    try {
+        const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+        return isThemePreference(stored) ? stored : undefined;
+    }
+    catch {
+        // skip: localStorage can throw (private mode); without a stored choice
+        // the default stays.
+        return undefined;
+    }
+}
+// Module singleton like storedModeApplied: null until the first read, so the
+// import stays safe without a DOM (SSR/tests).
+let currentPreference = null;
+function readCurrentPreference() {
+    if (currentPreference === null) {
+        if (typeof document === "undefined")
+            return "dark";
+        currentPreference = readStoredPreference() ?? readDefaultPreference();
+    }
+    return currentPreference;
+}
 // @wrapper-known semantic-alias
 function notifyThemeChange() {
     themeTick.setState((t) => t + 1);
 }
 // @wrapper-known semantic-alias
-function persistMode(mode) {
+function persistPreference(preference) {
     try {
-        window.localStorage.setItem(THEME_STORAGE_KEY, mode);
+        window.localStorage.setItem(THEME_STORAGE_KEY, preference);
     }
     catch {
         // skip: localStorage kann werfen (Private-Mode/Quota) — Theme bleibt
         // dann sessionbasiert, der Class-Toggle hat trotzdem funktioniert.
     }
 }
-/** Liest die persistierte Theme-Wahl und setzt die `.dark`-Class. Wird
- *  beim ersten useBrowserTokensApi-Mount aufgerufen; das Inline-Script
- *  in der Host-HTML (siehe Header-Kommentar) macht dasselbe synchron
- *  vor dem ersten Paint. */
+function applyPreference(preference) {
+    currentPreference = preference;
+    document.documentElement.classList.toggle("dark", resolveMode(preference) === "dark");
+    notifyThemeChange();
+}
+/** Reads the persisted theme choice (or the app default) and sets the `.dark`
+ *  class. Called on the first useBrowserTokensApi mount; the inline script in
+ *  the host HTML (see header comment) does the same synchronously before the
+ *  first paint. */
 export function applyStoredThemeMode() {
     // skip: no document (SSR/non-DOM context), nothing to apply
     if (typeof document === "undefined")
         return;
-    let stored = null;
-    try {
-        stored = window.localStorage.getItem(THEME_STORAGE_KEY);
-    }
-    catch {
-        // skip: localStorage kann werfen (Private-Mode) — ohne gespeicherte
-        // Wahl bleibt der Server-/HTML-Default stehen.
-    }
-    // skip: no valid persisted mode stored, keep server/HTML default
-    if (stored !== "dark" && stored !== "light")
+    const stored = readStoredPreference();
+    if (stored !== undefined) {
+        applyPreference(stored);
+        // skip: a stored choice wins over the app default
         return;
-    document.documentElement.classList.toggle("dark", stored === "dark");
-    notifyThemeChange();
+    }
+    // Without a stored choice only an app-declared default changes the HTML state.
+    const declared = getComputedStyle(document.documentElement)
+        .getPropertyValue(DEFAULT_COLOR_SCHEME_VARIABLE)
+        .trim();
+    if (isThemePreference(declared))
+        applyPreference(declared);
 }
 let storedModeApplied = false;
 /** Nur für Tests: der once-per-page-load-Guard ist ein Module-Singleton —
@@ -68,6 +118,7 @@ let storedModeApplied = false;
  *  Testfile strukturell unerreichbar. */
 export function __resetStoredModeAppliedForTests() {
     storedModeApplied = false;
+    currentPreference = null;
 }
 /** Hook der eine TokensApi für den Browser baut. Wird von
  *  createKumikoApp genutzt; App-Code der einen eigenen Token-State
@@ -87,24 +138,47 @@ export function useBrowserTokensApi() {
         return null;
     });
     const mode = useSyncExternalStore(themeTick.subscribe, readCurrentMode, () => "dark");
+    const preference = useSyncExternalStore(themeTick.subscribe, readCurrentPreference, () => "dark");
+    // kumiko-lint-ignore no-raw-hooks listener lifecycle, no data fetching
+    useEffect(() => {
+        // skip: without matchMedia, auto keeps the mode resolved at apply time
+        if (typeof window.matchMedia !== "function")
+            return;
+        const query = window.matchMedia(DARK_SCHEME_QUERY);
+        const followSystem = () => {
+            if (readCurrentPreference() === "auto")
+                applyPreference("auto");
+        };
+        // The OS scheme may have changed between the first apply and this mount.
+        followSystem();
+        query.addEventListener("change", followSystem);
+        return () => query.removeEventListener("change", followSystem);
+    }, []);
     return {
         tokens: cssVarTokens,
         mode,
+        preference,
+        setPreference: (next) => {
+            // skip: no document (SSR/non-DOM context), nothing to apply
+            if (typeof document === "undefined")
+                return;
+            persistPreference(next);
+            applyPreference(next);
+        },
         setMode: (next) => {
             // skip: no document (SSR/non-DOM context), nothing to toggle
             if (typeof document === "undefined")
                 return;
-            document.documentElement.classList.toggle("dark", next === "dark");
-            persistMode(next);
-            notifyThemeChange();
+            persistPreference(next);
+            applyPreference(next);
         },
         toggleMode: () => {
             // skip: no document (SSR/non-DOM context), nothing to toggle
             if (typeof document === "undefined")
                 return;
-            const nowDark = document.documentElement.classList.toggle("dark");
-            persistMode(nowDark ? "dark" : "light");
-            notifyThemeChange();
+            const next = readCurrentMode() === "dark" ? "light" : "dark";
+            persistPreference(next);
+            applyPreference(next);
         },
     };
 }

package/dist/version/update-checker.d.ts

@@ -1,14 +1,9 @@
 import { type ReactNode } from "react";
-type KumikoBuild = {
+export type KumikoBuild = {
     readonly id: string;
     readonly builtAt: string;
 };
-declare global {
-    interface Window {
-        __KUMIKO_BUILD__?: KumikoBuild;
-    }
-}
+export declare function readLoadedBuild(): KumikoBuild | undefined;
 export declare function shouldShowUpdate(loadedId: string | undefined, server: KumikoBuild | null): boolean;
 export declare function isKumikoBuild(v: unknown): v is Pick<KumikoBuild, "id">;
 export declare function UpdateChecker(): ReactNode;
-export {};

package/dist/version/update-checker.js

@@ -11,6 +11,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { useEffect, useState } from "react";
 import { cn } from "../lib/cn.js";
+export function readLoadedBuild() {
+    if (typeof document === "undefined")
+        return undefined;
+    const meta = document.querySelector('meta[name="kumiko-build"]');
+    const id = meta?.getAttribute("content");
+    if (!id)
+        return undefined;
+    return { id, builtAt: meta?.getAttribute("data-built-at") ?? "" };
+}
 // Korrektheitsgrenze der Update-Erkennung: ein Banner NUR bei echtem
 // ID-Drift. Kein geladener Stand (Dev/altes Bundle) oder kein Server-Stand
 // (Fetch-Fehler/kaputtes JSON → null) → nie ein Fake-Banner.
@@ -43,7 +52,7 @@ async function fetchServerBuild() {
 }
 export function UpdateChecker() {
     const t = useTranslation();
-    const loaded = typeof window !== "undefined" ? window.__KUMIKO_BUILD__ : undefined;
+    const loaded = readLoadedBuild();
     const [hasUpdate, setHasUpdate] = useState(false);
     useEffect(() => {
         const loadedId = loaded?.id;

package/dist/widgets/charts.d.ts

@@ -35,10 +35,17 @@ export type TimeseriesPoint = {
     /** null = Ausfall/kein Wert → fällt auf die Grundlinie (sichtbarer Einbruch). */
     readonly value: number | null;
 };
+export type TimeseriesReferenceLine = {
+    /** Same unit as the point values (e.g. a p95 or SLO threshold in ms). */
+    readonly value: number;
+    /** Translated by the caller. */
+    readonly label: string;
+    readonly tone?: StatusTone;
+};
 /** Zeitreihen-Linien-Chart (geglättete Linie + Flächen-Verlauf). x-Achse =
  *  ZEIT im Fenster windowStartMs..windowEndMs, nicht Index — 5 Min Daten in
  *  einem 30-Tage-Fenster ergeben ehrlich einen schmalen Streifen rechts. */
-export declare function TimeseriesChart({ points, windowStartMs, windowEndMs, tone, ariaLabel, axisLabels, markers, formatMarkerTime, emptyContent, testId, }: {
+export declare function TimeseriesChart({ points, windowStartMs, windowEndMs, tone, ariaLabel, axisLabels, markers, formatMarkerTime, referenceLines, emptyContent, testId, }: {
     readonly points: readonly TimeseriesPoint[];
     readonly windowStartMs: number;
     readonly windowEndMs: number;
@@ -53,6 +60,9 @@ export declare function TimeseriesChart({ points, windowStartMs, windowEndMs, to
     /** Numbered pins on the x-axis plus a numbered list below the chart. */
     readonly markers?: readonly ChartMarker[];
     readonly formatMarkerTime?: (atMs: number) => string;
+    /** Dashed horizontal threshold lines (e.g. p95); they extend the y-scale
+     *  when above the data maximum. Non-finite and negative values are dropped. */
+    readonly referenceLines?: readonly TimeseriesReferenceLine[];
     /** Rendert statt des Charts wenn <2 Messwerte vorliegen. */
     readonly emptyContent?: ReactNode;
     readonly testId?: string;

package/dist/widgets/charts.js

@@ -64,20 +64,23 @@ export function smoothPath(pts) {
 /** Zeitreihen-Linien-Chart (geglättete Linie + Flächen-Verlauf). x-Achse =
  *  ZEIT im Fenster windowStartMs..windowEndMs, nicht Index — 5 Min Daten in
  *  einem 30-Tage-Fenster ergeben ehrlich einen schmalen Streifen rechts. */
-export function TimeseriesChart({ points, windowStartMs, windowEndMs, tone = "ok", ariaLabel, axisLabels, markers, formatMarkerTime, emptyContent, testId, }) {
+export function TimeseriesChart({ points, windowStartMs, windowEndMs, tone = "ok", ariaLabel, axisLabels, markers, formatMarkerTime, referenceLines, emptyContent, testId, }) {
     const gradientId = useId();
+    const descId = useId();
     const chartWidth = 300;
     const chartHeight = 64;
     const values = points.map((p) => p.value).filter((v) => v !== null);
     if (values.length < 2) {
         return (_jsx("div", { className: "flex h-16 items-center justify-center text-[13px] text-muted-foreground", children: emptyContent }));
     }
-    const maxValue = Math.max(...values, 1);
+    const drawableLines = (referenceLines ?? []).filter((line) => Number.isFinite(line.value) && line.value >= 0);
+    const maxValue = Math.max(...values, ...drawableLines.map((line) => line.value), 1);
+    const yOf = (value) => chartHeight - (value / maxValue) * chartHeight;
     const span = Math.max(1, windowEndMs - windowStartMs);
     const xOf = (atMs) => Math.max(0, Math.min(1, (atMs - windowStartMs) / span)) * chartWidth;
     const chartPoints = points.map((p) => ({
         x: xOf(p.atMs),
-        y: p.value === null ? chartHeight : chartHeight - (p.value / maxValue) * chartHeight,
+        y: p.value === null ? chartHeight : yOf(p.value),
     }));
     const linePath = smoothPath(chartPoints);
     const firstPoint = chartPoints[0];
@@ -86,7 +89,11 @@ export function TimeseriesChart({ points, windowStartMs, windowEndMs, tone = "ok
         ? `${linePath} L ${lastPoint.x.toFixed(1)} ${chartHeight} L ${firstPoint.x.toFixed(1)} ${chartHeight} Z`
         : "";
     const color = TONE_VAR[tone];
-    return (_jsxs("div", { "data-testid": testId, className: STATUS_TONE_TEXT[tone], children: [_jsxs("svg", { viewBox: `0 0 ${chartWidth} ${chartHeight}`, preserveAspectRatio: "none", className: "block h-16 w-full", role: "img", "aria-label": ariaLabel, children: [_jsx("title", { children: ariaLabel }), _jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.3 }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.02 })] }) }), _jsx("path", { d: areaPath, fill: `url(#${gradientId})`, stroke: "none" }), _jsx("path", { d: linePath, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })] }), axisLabels !== undefined && (_jsxs("div", { className: "mt-1 flex justify-between text-[11px] text-muted-foreground", children: [_jsx("span", { children: axisLabels.start }), axisLabels.mid !== undefined && _jsx("span", { children: axisLabels.mid }), _jsx("span", { children: axisLabels.end })] })), markers !== undefined && markers.length > 0 && (_jsxs("div", { className: "text-foreground", children: [_jsx(MarkerPins, { markers: markers, windowStartMs: windowStartMs, windowEndMs: windowEndMs }), _jsx("div", { className: "mt-2", children: _jsx(MarkerLegend, { markers: markers, formatMarkerTime: formatMarkerTime }) })] }))] }));
+    const hasReferenceLines = drawableLines.length > 0;
+    const svg = (_jsxs("svg", { viewBox: `0 0 ${chartWidth} ${chartHeight}`, preserveAspectRatio: "none", className: "block h-16 w-full", role: "img", "aria-label": ariaLabel, "aria-describedby": hasReferenceLines ? descId : undefined, children: [_jsx("title", { children: ariaLabel }), hasReferenceLines && _jsx("desc", { id: descId, children: drawableLines.map((l) => l.label).join(", ") }), _jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.3 }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.02 })] }) }), _jsx("path", { d: areaPath, fill: `url(#${gradientId})`, stroke: "none" }), _jsx("path", { d: linePath, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }), drawableLines.map((line) => (_jsx("line", { "data-reference-line": "", x1: 0, x2: chartWidth, y1: yOf(line.value), y2: yOf(line.value), stroke: TONE_VAR[line.tone ?? "muted"], strokeWidth: 1, strokeDasharray: "4 3", vectorEffect: "non-scaling-stroke" }, `${line.value}:${line.label}`)))] }));
+    return (_jsxs("div", { "data-testid": testId, className: STATUS_TONE_TEXT[tone], children: [hasReferenceLines ? (_jsxs("div", { className: "relative", children: [svg, drawableLines.map((line) => (_jsx("span", { "aria-hidden": "true", className: cn("absolute right-0 rounded bg-background/80 px-1 text-[11px]", 
+                        // A line near the top would push its label above the chart box.
+                        yOf(line.value) >= chartHeight / 4 && "-translate-y-full", STATUS_TONE_TEXT[line.tone ?? "muted"]), style: { top: `${(yOf(line.value) / chartHeight) * 100}%` }, children: line.label }, `${line.value}:${line.label}`)))] })) : (svg), axisLabels !== undefined && (_jsxs("div", { className: "mt-1 flex justify-between text-[11px] text-muted-foreground", children: [_jsx("span", { children: axisLabels.start }), axisLabels.mid !== undefined && _jsx("span", { children: axisLabels.mid }), _jsx("span", { children: axisLabels.end })] })), markers !== undefined && markers.length > 0 && (_jsxs("div", { className: "text-foreground", children: [_jsx(MarkerPins, { markers: markers, windowStartMs: windowStartMs, windowEndMs: windowEndMs }), _jsx("div", { className: "mt-2", children: _jsx(MarkerLegend, { markers: markers, formatMarkerTime: formatMarkerTime }) })] }))] }));
 }
 const CHART_TONE_VAR = {
     positive: "var(--color-status-ok)",

package/dist/widgets/index.d.ts

@@ -1,5 +1,5 @@
 export { AiTextArea, type AiTextAreaProps, AiTextField, type AiTextFieldProps, } from "./ai-text-field.js";
-export { type ChartMarker, type ChartSeries, type ChartTone, SegmentBarChart, type SegmentBarRow, StackedAreaChart, StackedBarChart, StatusBarChart, type StatusBarEntry, smoothPath, TimeseriesChart, type TimeseriesPoint, } from "./charts.js";
+export { type ChartMarker, type ChartSeries, type ChartTone, SegmentBarChart, type SegmentBarRow, StackedAreaChart, StackedBarChart, StatusBarChart, type StatusBarEntry, smoothPath, TimeseriesChart, type TimeseriesPoint, type TimeseriesReferenceLine, } from "./charts.js";
 export { CollapsibleSection } from "./collapsible-section.js";
 export { type DashboardListColumn, DashboardListTable } from "./dashboard-list.js";
 export { DetailList } from "./detail-list.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.338.0",
+  "version": "0.339.0",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -20,11 +20,11 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.338.0",
-    "@cosmicdrift/kumiko-framework": "0.338.0",
-    "@cosmicdrift/kumiko-headless": "0.338.0",
-    "@cosmicdrift/kumiko-renderer": "0.338.0",
-    "@cosmicdrift/kumiko-types": "0.338.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.339.0",
+    "@cosmicdrift/kumiko-framework": "0.339.0",
+    "@cosmicdrift/kumiko-headless": "0.339.0",
+    "@cosmicdrift/kumiko-renderer": "0.339.0",
+    "@cosmicdrift/kumiko-types": "0.339.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -72,7 +72,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.338.0"
+    "@cosmicdrift/kumiko-locale-de": "0.339.0"
   },
   "repository": {
     "type": "git",

package/src/changes.json

@@ -1,4 +1,39 @@
 [
+  {
+    "version": "0.339.0",
+    "type": "fix",
+    "title": "Columns with format boolean show a check mark with the accessible name Yes, or a dash with No, instead of raw true/false",
+    "detail": "format boolean renders a localized Yes/No instead of raw true/false",
+    "migration": "No code change needed."
+  },
+  {
+    "version": "0.339.0",
+    "type": "fix",
+    "title": "Inline field labels wrap instead of truncating",
+    "detail": "`Field layout=\"inline\"` no longer puts its label in a single truncated line. Long checkbox labels such as the checkout consent texts wrap, so the dialog stays inside the viewport and its buttons stay reachable.",
+    "migration": "keine"
+  },
+  {
+    "version": "0.339.0",
+    "type": "fix",
+    "title": "The open LanguageSwitcher no longer hides the app root with aria-hidden and renders its menu inside the surrounding header landmark",
+    "detail": "LanguageSwitcher is axe-clean while open",
+    "migration": "No code change needed."
+  },
+  {
+    "version": "0.339.0",
+    "type": "improvement",
+    "title": "Theme preference auto follows the OS color scheme live; ThemeToggle and ThemeMenuItem step through light, dark and auto, a stored choice wins, and defineAppTheme accepts defaultColorScheme",
+    "detail": "Theme mode auto follows prefers-color-scheme",
+    "migration": "Apps with a theme-restore inline script in their host HTML must update it. The toggle can now store \"auto\", which an old script that only checks for \"dark\" treats as light, so dark-mode users see a light flash on load. Use the script from the comment in renderer-web tokens.ts, which also handles \"auto\" via matchMedia. Under a strict CSP, update the script hash or keep the nonce."
+  },
+  {
+    "version": "0.339.0",
+    "type": "improvement",
+    "title": "TimeseriesChart draws optional reference lines",
+    "detail": "`TimeseriesChart` accepts an optional `referenceLines` prop that draws dashed horizontal threshold lines (for example a p95 or an SLO target) with an accessible label. A line above the data maximum extends the y-scale.",
+    "migration": "No code change needed. Pass `referenceLines={[{ value, label, tone }]}` to draw a dashed threshold such as p95 or an SLO target."
+  },
   {
     "version": "0.337.0",
     "type": "fix",