@cosmicdrift/kumiko-renderer-web 0.347.0 → 0.348.0

package/dist/index.d.ts

@@ -69,5 +69,5 @@ export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./ui/resiz
 export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar.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 type { AiTextAreaProps, AiTextFieldProps, BooleanFieldProps, ComparisonMetric, DateFieldProps, DrawerProps, FeedRow, FileFieldProps, FloatingPanelGeometry, FloatingPanelProps, InfinityListProps, InfinityListSelection, ModeSwitchVariant, 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, TimeseriesXAxis, TimeseriesYAxis, 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/layout/language-switcher.d.ts

@@ -16,6 +16,9 @@ export type LanguageSwitcherProps = {
     /** What the trigger shows next to the icon: the uppercase code (default), the active
      *  locale's label, or the icon only. aria-label/title are unaffected. */
     readonly triggerContent?: "code" | "label" | "icon-only";
+    /** `default`: icon plus code/label button. `chip`: compact monospace chip with
+     *  the uppercase code in a border; `icon` and `triggerContent` are ignored. */
+    readonly variant?: "default" | "chip";
     readonly testId?: string;
 };
-export declare function LanguageSwitcher({ locales, icon, label, triggerContent, testId, }: LanguageSwitcherProps): ReactNode;
+export declare function LanguageSwitcher({ locales, icon, label, triggerContent, variant, testId, }: LanguageSwitcherProps): ReactNode;

package/dist/layout/language-switcher.js

@@ -15,7 +15,7 @@ import { useLocale, useTranslation } from "@cosmicdrift/kumiko-renderer";
 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, triggerContent = "code", testId, }) {
+export function LanguageSwitcher({ locales, icon = "🌐", label, triggerContent = "code", variant = "default", testId, }) {
     const resolver = useLocale();
     const t = useTranslation();
     const resolvedLabel = label ?? t("kumiko.nav.language");
@@ -39,5 +39,7 @@ export function LanguageSwitcher({ locales, icon = "🌐", label, triggerContent
         return null;
     }
     const setLocale = resolver.setLocale;
-    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 }), triggerContent === "label" && (_jsx("span", { className: "text-xs text-muted-foreground", children: activeOption?.label ?? activeLocale.slice(0, 2) })), triggerContent === "code" && (_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))) })] }));
+    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 items-center border bg-background", "hover:bg-accent hover:text-accent-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", variant === "chip"
+                        ? "h-7 rounded-md px-2 font-mono text-xs text-foreground"
+                        : "h-8 gap-1.5 rounded-md px-2 text-sm"), children: [variant === "chip" && (activeOption?.code ?? activeLocale.slice(0, 2)).toUpperCase(), variant === "default" && _jsx("span", { "aria-hidden": "true", children: icon }), variant === "default" && triggerContent === "label" && (_jsx("span", { className: "text-xs text-muted-foreground", children: activeOption?.label ?? activeLocale.slice(0, 2) })), variant === "default" && triggerContent === "code" && (_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/widgets/charts.d.ts

@@ -35,6 +35,18 @@ export type TimeseriesPoint = {
     /** null = Ausfall/kein Wert → fällt auf die Grundlinie (sichtbarer Einbruch). */
     readonly value: number | null;
 };
+export type TimeseriesYAxis = {
+    /** Number of gridlines including the zero baseline (min 2). Tick values are
+     *  rounded to 1/2/5 x 10^n steps and the y-scale reaches the top tick. */
+    readonly ticks: number;
+    /** Label text per tick value (unit, locale). Default: the plain number. */
+    readonly format?: (value: number) => string;
+};
+export type TimeseriesXAxis = {
+    /** Number of evenly spaced time labels (min 2). */
+    readonly ticks: number;
+    readonly format: (atMs: number) => string;
+};
 export type TimeseriesReferenceLine = {
     /** Same unit as the point values (e.g. a p95 or SLO threshold in ms). */
     readonly value: number;
@@ -45,7 +57,7 @@ export type TimeseriesReferenceLine = {
 /** 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, referenceLines, emptyContent, testId, }: {
+export declare function TimeseriesChart({ points, windowStartMs, windowEndMs, tone, ariaLabel, axisLabels, xAxis, yAxis, height, markers, formatMarkerTime, referenceLines, emptyContent, testId, }: {
     readonly points: readonly TimeseriesPoint[];
     readonly windowStartMs: number;
     readonly windowEndMs: number;
@@ -57,6 +69,12 @@ export declare function TimeseriesChart({ points, windowStartMs, windowEndMs, to
         readonly mid?: string;
         readonly end: string;
     };
+    /** Date axis with n evenly spaced labels; replaces `axisLabels` when set. */
+    readonly xAxis?: TimeseriesXAxis;
+    /** Gridlines plus value labels in a left gutter. */
+    readonly yAxis?: TimeseriesYAxis;
+    /** Chart height in px. Default: 64 (`h-16`). */
+    readonly height?: number;
     /** Numbered pins on the x-axis plus a numbered list below the chart. */
     readonly markers?: readonly ChartMarker[];
     readonly formatMarkerTime?: (atMs: number) => string;

package/dist/widgets/charts.js

@@ -65,23 +65,44 @@ export function smoothPath(pts) {
         return d;
     return `${d} L ${last.x.toFixed(1)} ${last.y.toFixed(1)}`;
 }
+const DEFAULT_TIMESERIES_HEIGHT_CLASS = "h-16";
+const MIN_AXIS_TICKS = 2;
+const MAX_AXIS_TICKS = 20;
+function clampTickCount(requested) {
+    return Math.min(MAX_AXIS_TICKS, Math.max(MIN_AXIS_TICKS, Math.floor(requested) || MIN_AXIS_TICKS));
+}
+function evenlySpaced(count) {
+    const n = clampTickCount(count);
+    return Array.from({ length: n }, (_, i) => i / (n - 1));
+}
+function yTickPosition(index, count) {
+    if (index === 0)
+        return "-translate-y-full";
+    if (index === count - 1)
+        return "";
+    return "-translate-y-1/2";
+}
 /** 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, referenceLines, emptyContent, testId, }) {
+export function TimeseriesChart({ points, windowStartMs, windowEndMs, tone = "ok", ariaLabel, axisLabels, xAxis, yAxis, height, markers, formatMarkerTime, referenceLines, emptyContent, testId, }) {
     const gradientId = useId();
     const descId = useId();
     const chartWidth = 300;
     const chartHeight = 64;
+    const heightClass = height === undefined ? DEFAULT_TIMESERIES_HEIGHT_CLASS : undefined;
+    const heightStyle = height === undefined ? undefined : { height };
     const values = points.map((p) => p.value).filter((v) => v !== null);
     if (values.length === 0) {
-        return (_jsx("div", { className: "flex h-16 items-center justify-center text-[13px] text-muted-foreground", children: emptyContent }));
+        return (_jsx("div", { className: cn("flex items-center justify-center text-[13px] text-muted-foreground", heightClass), style: heightStyle, children: emptyContent }));
     }
     const drawableLines = (referenceLines ?? []).filter((line) => Number.isFinite(line.value) && line.value >= 0);
     const singleValue = values.length === 1 ? values[0] : undefined;
     // A lone value at the top edge would sit on the clip boundary; doubling the
     // scale centres it.
-    const maxValue = Math.max(...values.map((value) => (singleValue === undefined ? value : value * 2)), ...drawableLines.map((line) => line.value), 1);
+    const dataMax = Math.max(...values.map((value) => (singleValue === undefined ? value : value * 2)), ...drawableLines.map((line) => line.value), 1);
+    const yTicks = yAxis === undefined ? [] : niceYTicks(dataMax, yAxis.ticks);
+    const maxValue = yTicks.length > 0 ? (yTicks[yTicks.length - 1] ?? dataMax) : dataMax;
     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;
@@ -97,10 +118,11 @@ export function TimeseriesChart({ points, windowStartMs, windowEndMs, tone = "ok
         : "";
     const color = TONE_VAR[tone];
     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 })] }) }), singleValue === undefined ? (_jsxs(_Fragment, { children: [_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" })] })) : (_jsx("circle", { "data-testid": "timeseries-single-point", cx: chartWidth / 2, cy: clampDotY(yOf(singleValue), chartHeight), r: SINGLE_POINT_RADIUS, fill: color })), 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]", 
+    const svg = (_jsxs("svg", { viewBox: `0 0 ${chartWidth} ${chartHeight}`, preserveAspectRatio: "none", className: cn("block w-full", heightClass), style: heightStyle, 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 })] }) }), yTicks.map((tick) => (_jsx("line", { "data-grid-line": "", x1: 0, x2: chartWidth, y1: yOf(tick), y2: yOf(tick), stroke: "var(--color-border)", strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `grid-${tick}`))), singleValue === undefined ? (_jsxs(_Fragment, { children: [_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" })] })) : (_jsx("circle", { "data-testid": "timeseries-single-point", cx: chartWidth / 2, cy: clampDotY(yOf(singleValue), chartHeight), r: SINGLE_POINT_RADIUS, fill: color })), 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}`)))] }));
+    const plot = (_jsxs(_Fragment, { 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 }) })] }))] }));
+                        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), xAxis !== undefined ? (_jsx("div", { className: "mt-1 flex justify-between text-[11px] text-muted-foreground", children: evenlySpaced(xAxis.ticks).map((fraction) => (_jsx("span", { "data-x-label": "", children: xAxis.format(windowStartMs + fraction * (windowEndMs - windowStartMs)) }, fraction))) })) : (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 })] })))] }));
+    return (_jsxs("div", { "data-testid": testId, className: STATUS_TONE_TEXT[tone], children: [yAxis === undefined ? (plot) : (_jsxs("div", { className: "flex gap-1.5", children: [_jsx("div", { "aria-hidden": "true", className: cn("relative w-12 shrink-0 text-right text-[11px] text-muted-foreground", heightClass), style: heightStyle, children: yTicks.map((tick, index) => (_jsx("span", { "data-y-label": "", className: cn("absolute right-0 whitespace-nowrap leading-none", yTickPosition(index, yTicks.length)), style: { top: `${(yOf(tick) / chartHeight) * 100}%` }, children: (yAxis.format ?? String)(tick) }, tick))) }), _jsx("div", { className: "min-w-0 flex-1", children: plot })] })), 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)",
@@ -122,6 +144,11 @@ function niceCeil(max) {
     const step = normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10;
     return step * magnitude;
 }
+function niceYTicks(max, tickCount) {
+    const count = clampTickCount(tickCount);
+    const step = niceCeil(max / (count - 1));
+    return Array.from({ length: count }, (_, i) => i * step);
+}
 function bucketTimes(series) {
     const times = new Set();
     for (const s of series)

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, type TimeseriesReferenceLine, } from "./charts.js";
+export { type ChartMarker, type ChartSeries, type ChartTone, SegmentBarChart, type SegmentBarRow, StackedAreaChart, StackedBarChart, StatusBarChart, type StatusBarEntry, smoothPath, TimeseriesChart, type TimeseriesPoint, type TimeseriesReferenceLine, type TimeseriesXAxis, type TimeseriesYAxis, } from "./charts.js";
 export { CollapsibleSection } from "./collapsible-section.js";
 export { type DashboardListColumn, DashboardListTable } from "./dashboard-list.js";
 export { DetailList } from "./detail-list.js";
@@ -8,7 +8,7 @@ export { FeedList, type FeedRow } from "./feed-list.js";
 export { FloatingPanel, type FloatingPanelGeometry, type FloatingPanelProps, } from "./floating-panel.js";
 export { BooleanField, type BooleanFieldProps, DateField, type DateFieldProps, FileField, type FileFieldProps, MoneyField, NumberField, type NumberFieldProps, PercentField, RangeField, type RangeFieldProps, SelectField, type SelectFieldProps, TextareaField, type TextareaFieldProps, TextField, type TextFieldProps, } from "./form-fields.js";
 export { InfinityList, type InfinityListProps, type InfinityListSelection, } from "./infinity-list.js";
-export { ModeSwitch } from "./mode-switch.js";
+export { ModeSwitch, type ModeSwitchVariant } from "./mode-switch.js";
 export { type PhotoSlotSpec, PhotoSlots, type PhotoSlotsProps } from "./photo-slots.js";
 export { PlanCard, type PlanCardActionSlot, type PlanCardPrice, type PlanCardProps, PlanGrid, type PlanGridProps, } from "./plan-card.js";
 export { ProgressBar } from "./progress-bar.js";

package/dist/widgets/mode-switch.d.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
+export type ModeSwitchVariant = "outline" | "pill";
 /** Segmented-Control für sich ausschließende Modi — die prominente
  *  Alternative zum vergrabenen <select>. */
-export declare function ModeSwitch<T extends string>({ value, options, onChange, ariaLabel, testId, }: {
+export declare function ModeSwitch<T extends string>({ value, options, onChange, ariaLabel, variant, className, testId, }: {
     readonly value: T;
     readonly options: readonly {
         readonly value: T;
@@ -11,5 +12,9 @@ export declare function ModeSwitch<T extends string>({ value, options, onChange,
     }[];
     readonly onChange: (value: T) => void;
     readonly ariaLabel?: string;
+    /** `outline` (default): bordered segments, active tinted. `pill`: grey
+     *  track with a raised active segment. */
+    readonly variant?: ModeSwitchVariant;
+    readonly className?: string;
     readonly testId?: string;
 }): ReactNode;

package/dist/widgets/mode-switch.js

@@ -2,11 +2,24 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 /** Segmented-Control für sich ausschließende Modi — die prominente
  *  Alternative zum vergrabenen <select>. */
-export function ModeSwitch({ value, options, onChange, ariaLabel, testId, }) {
-    return (_jsx("div", { "data-testid": testId, role: "group", "aria-label": ariaLabel, className: "flex min-h-8 overflow-hidden rounded-md border border-input bg-background", children: options.map((o) => {
+export function ModeSwitch({ value, options, onChange, ariaLabel, variant = "outline", className, testId, }) {
+    const pill = variant === "pill";
+    return (_jsx("div", { "data-testid": testId, role: "group", "aria-label": ariaLabel, className: cn("flex min-h-8", pill
+            ? "gap-0.5 rounded-lg bg-muted p-0.5"
+            : "overflow-hidden rounded-md border border-input bg-background", className), children: options.map((o) => {
             const active = o.value === value;
-            return (_jsxs("button", { type: "button", "aria-pressed": active, onClick: () => onChange(o.value), className: cn("grow border-l border-input px-3 text-sm transition-colors first:border-l-0", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", active
-                    ? "bg-primary/10 font-semibold text-primary"
-                    : "text-foreground hover:bg-muted"), children: [o.label, o.count !== undefined && (_jsx("span", { "data-testid": testId !== undefined ? `${testId}-count-${o.value}` : undefined, className: cn("ml-1.5 font-normal tabular-nums", !active && "text-muted-foreground"), children: o.count }))] }, o.value));
+            return (_jsxs("button", { type: "button", "aria-pressed": active, onClick: () => onChange(o.value), className: cn("grow px-3 text-sm transition-colors", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", pill
+                    ? [
+                        "rounded-md",
+                        active
+                            ? "bg-card font-semibold text-foreground shadow-sm dark:bg-foreground/10"
+                            : "text-muted-foreground hover:text-foreground",
+                    ]
+                    : [
+                        "border-l border-input first:border-l-0",
+                        active
+                            ? "bg-primary/10 font-semibold text-primary"
+                            : "text-foreground hover:bg-muted",
+                    ]), children: [o.label, o.count !== undefined && (_jsx("span", { "data-testid": testId !== undefined ? `${testId}-count-${o.value}` : undefined, className: cn("ml-1.5 font-normal tabular-nums", !active && "text-muted-foreground"), children: o.count }))] }, o.value));
         }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.347.0",
+  "version": "0.348.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.347.0",
-    "@cosmicdrift/kumiko-framework": "0.347.0",
-    "@cosmicdrift/kumiko-headless": "0.347.0",
-    "@cosmicdrift/kumiko-renderer": "0.347.0",
-    "@cosmicdrift/kumiko-types": "0.347.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.348.0",
+    "@cosmicdrift/kumiko-framework": "0.348.0",
+    "@cosmicdrift/kumiko-headless": "0.348.0",
+    "@cosmicdrift/kumiko-renderer": "0.348.0",
+    "@cosmicdrift/kumiko-types": "0.348.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.347.0"
+    "@cosmicdrift/kumiko-locale-de": "0.348.0"
   },
   "repository": {
     "type": "git",