@cosmicdrift/kumiko-renderer 0.386.0 → 0.388.0

package/dist/web/components/config-cascade.js

@@ -12,9 +12,9 @@ const SOURCE_I18N_KEY = {
     default: "kumiko.config.source.default",
     missing: "kumiko.config.source.missing",
 };
-// Fallback-Reihenfolge der Cascade, spezifischste Quelle zuerst.
-// Index-Vergleich gegen die Screen-Scope-Quelle entscheidet, welche
-// Ebenen ein Nicht-Operator sehen darf.
+// Fallback order of the cascade, with the most specific source first.
+// Comparing indices with the screen-scope source determines which
+// levels a non-operator may see.
 const SOURCE_ORDER = [
     "user-row",
     "tenant-row",
@@ -51,16 +51,16 @@ function scopeToSource(scope) {
     return "system-row";
 }
 function toDisplayLevels(levels, screenScopeSource) {
-    // System-Screens sind Operator-Sicht — volle Cascade inkl.
-    // app-override/computed/default bleibt sichtbar.
+    // System screens have operator visibility, so the full cascade, including
+    // app-override/computed/default, remains visible.
     if (screenScopeSource === "system-row") {
         return levels.map((level) => ({ level, badgeSource: level.source }));
     }
     const scopeIdx = SOURCE_ORDER.indexOf(screenScopeSource);
     const own = levels.filter((l) => SOURCE_ORDER.indexOf(l.source) <= scopeIdx);
     const higher = levels.filter((l) => SOURCE_ORDER.indexOf(l.source) > scopeIdx);
-    // Genau eine Fallback-Zeile: die aktive höhere Ebene (deren Wert der
-    // User effektiv bekommt), sonst der deklarierte Default/Missing.
+    // Exactly one fallback row: the active higher level (whose value the user
+    // effectively receives), or the declared default/missing level.
     const fallback = higher.find((l) => l.isActive) ??
         higher.find((l) => l.source === "default" || l.source === "missing");
     const ownRows = own.map((level) => ({ level, badgeSource: level.source }));
@@ -71,12 +71,11 @@ function toDisplayLevels(levels, screenScopeSource) {
         {
             level: fallback,
             badgeSource: "default",
-            // Ein durchgängiger Begriff "Standard" (DE) / "Default" (EN) — derselbe
-            // Key wie das Feld-Label-Badge (kumiko.config.source.default), damit
-            // Badge + Cascade-Disclosure NICHT zwei verschiedene Wörter zeigen
-            // (Bug-Bash 3 #11). Der Screen-Scope kann die Operator-Ebenen
-            // (System/Override/Computed) weder setzen noch zurücksetzen, deshalb
-            // erscheinen sie hier neutral als "Standard".
+            // Use one consistent term, "Standard" (DE) / "Default" (EN)—the same
+            // key as the field-label badge (kumiko.config.source.default), so the
+            // badge and cascade disclosure do not show two different words. The
+            // screen scope cannot set or reset the operator levels (System/Override/
+            // Computed), so they appear here neutrally as "Standard".
             badgeLabelKey: "kumiko.config.source.default",
         },
     ];
@@ -106,11 +105,11 @@ export function ConfigCascadeView({ cascade, screenScope, onReset, qualifiedKey,
     const displayLevels = toDisplayLevels(cascade.levels, screenScopeSource);
     const activeDisplay = displayLevels.find((d) => d.level.isActive);
     const hasOverride = activeDisplay?.level.source === screenScopeSource;
-    // Aufklappbar nur wenn das Panel echten Mehrwert bringt: ein eigener
-    // Override (→ Reset) oder mehr als eine Ebene MIT Wert. Leere Ebenen
-    // (z.B. die ungesetzte tenant-row eines reinen Default-Felds) zählen
-    // nicht — sonst wäre ein Feld, das nur seinen Standard zeigt, fälschlich
-    // aufklappbar und das Panel nur eine Wiederholung des Triggers.
+    // Expandable only when the panel provides meaningful additional information:
+    // an own override (→ Reset) or more than one level with a value. Empty levels
+    // (e.g. the unset tenant-row of a field using only its default) do not count;
+    // otherwise a field showing only its default would incorrectly be expandable,
+    // making the panel merely repeat the trigger.
     const valuedLevels = displayLevels.filter((d) => d.level.hasValue);
     const expandable = hasOverride || valuedLevels.length > 1;
     const isUnset = activeDisplay === undefined || !activeDisplay.level.hasValue;

package/dist/web/components/config-source-badge.js

@@ -40,10 +40,10 @@ function scopeToSource(scope) {
 }
 export function ConfigSourceBadge({ source, screenScope, }) {
     const t = useTranslation();
-    // Gleiche Kollaps-Regel wie toDisplayLevels (config-cascade.tsx):
-    // Operator-Quellen oberhalb des Screen-Scopes erscheinen für Nicht-
-    // Operator-Screens als neutrales "Vorgabe"-Badge — sonst leakte das
-    // Badge die System-Quelle, die die Cascade-View bewusst versteckt.
+    // Uses the same collapsing rule as toDisplayLevels (config-cascade.tsx):
+    // for non-operator screens, operator sources above the screen scope appear
+    // as a neutral "Vorgabe" badge so the badge does not reveal the system source
+    // intentionally hidden by the cascade view.
     let effective = source;
     if (screenScope !== undefined && screenScope !== "system") {
         const scopeIdx = SOURCE_ORDER.indexOf(scopeToSource(screenScope));

package/dist/web/index.d.ts

@@ -75,4 +75,4 @@ export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from
 export type { KumikoBuild } from "./version/update-checker.tsx";
 export { readLoadedBuild } from "./version/update-checker.tsx";
 export type { AiTextAreaProps, AiTextFieldProps, BooleanFieldProps, ComparisonMetric, DateFieldProps, DrawerProps, FeedRow, FileFieldProps, FloatingPanelGeometry, FloatingPanelProps, InfinityListProps, InfinityListSelection, ModeSwitchVariant, NumberFieldProps, PdfPreviewSource, PhotoSlotSpec, PhotoSlotsProps, PlanCardActionSlot, PlanCardLinkSlot, PlanCardPrice, PlanCardProps, PlanGridProps, ProgressListRow, PublicShellProps, PublicShellVariant, QueryTableColumn, QueryTableProps, RangeFieldProps, ResultColumn, SelectFieldProps, SideBySideTableCell, SideBySideTableColumn, SideBySideTableRow, StatDelta, StatTone, StatusBadgeTone, StatusBarEntry, StatusTone, TextareaFieldProps, TextFieldProps, TimeseriesHeight, TimeseriesPoint, TimeseriesReferenceLine, TimeseriesXAxis, TimeseriesYAxis, UploadZoneProps, } from "./widgets/index.ts";
-export { AiTextArea, AiTextField, BooleanField, CollapsibleSection, ComparisonTable, DateField, DetailList, Drawer, EmptyState, ErrorState, FeedList, FileField, FloatingPanel, InfinityList, LoadingState, MiniStat, ModeSwitch, MoneyField, NumberField, PdfPreview, 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.ts";
+export { AiTextArea, AiTextField, BooleanField, ChoiceCards, CollapsibleSection, ComparisonTable, DateField, DetailList, Drawer, EmptyState, ErrorState, FeedList, FileField, FloatingPanel, InfinityList, LoadingState, MiniStat, ModeSwitch, MoneyField, NumberField, PdfPreview, 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.ts";

package/dist/web/index.js

@@ -50,4 +50,4 @@ export { applyTokensToCssVars, defaultTokens, lightTokens, useBrowserTokensApi,
 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, PdfPreview, 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";
+export { AiTextArea, AiTextField, BooleanField, ChoiceCards, CollapsibleSection, ComparisonTable, DateField, DetailList, Drawer, EmptyState, ErrorState, FeedList, FileField, FloatingPanel, InfinityList, LoadingState, MiniStat, ModeSwitch, MoneyField, NumberField, PdfPreview, 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/web/layout/app-layout.d.ts

@@ -1,19 +1,19 @@
 import type { ReactNode } from "react";
 export type AppLayoutProps = {
-    /** Optional. Lebt nur über dem Main-Bereich, nicht über der Sidebar. */
+    /** Optional. Exists only above the main area, not above the sidebar. */
     readonly topbar?: ReactNode;
     readonly sidebar?: ReactNode;
     readonly children: ReactNode;
     readonly testId?: string;
-    /** Viewport-fit Shell. Default `true` → Wurzel = `h-screen` (fixe
-     *  Viewport-Höhe), Sidebar/Topbar bleiben stehen, der Main-Bereich
-     *  scrollt INNEN (`min-h-0` + `overflow-auto`). `false` → klassischer
-     *  `min-h-screen`-Flow, die ganze Seite scrollt — Escape-Hatch für
-     *  eine öffentliche, lange Content-Seite die echten Body-Scroll
-     *  braucht. Clippt nie — der Content scrollt in `main` statt im Body. */
+    /** Viewport-fit shell. Default `true` → root = `h-screen` (fixed
+     *  viewport height); sidebar/topbar remain fixed while the main area
+     *  scrolls INSIDE (`min-h-0` + `overflow-auto`). `false` → classic
+     *  `min-h-screen` flow where the whole page scrolls—an escape hatch for
+     *  a public, long content page that needs real body scrolling. Never
+     *  clips—content scrolls in `main` instead of the body. */
     readonly fill?: boolean;
-    /** Optionaler Klassen-Append an die Wurzel (eigener Hintergrund etc.).
-     *  Erweitert die Defaults, ersetzt sie nicht (cn-merge). */
+    /** Optional classes appended to the root (for a custom background, etc.).
+     *  Extends the defaults rather than replacing them (`cn` merge). */
     readonly className?: string;
     /** Optionaler Klassen-Append an `<main>`. */
     readonly mainClassName?: string;

package/dist/web/layout/app-layout.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 export function AppLayout({ topbar, sidebar, children, testId, fill = true, className, mainClassName, }) {
     return (_jsxs("div", { "data-testid": testId, "data-kumiko-layout": "app", ...(fill === true && { "data-kumiko-fill": "true" }), className: cn(
-        // new-york inset-Frame: gedämpfter Rail-Background, die Sidebar sitzt
-        // transparent darauf, der Main-Bereich schwebt als eigenes Panel.
+        // new-york inset frame: muted rail background; the sidebar sits
+        // transparently on it, while the main area floats as its own panel.
         "flex flex-row bg-muted/40 text-foreground", fill === true ? "h-screen" : "min-h-screen", className), children: [sidebar, _jsxs("div", { className: cn("flex flex-1 min-w-0 flex-col overflow-hidden rounded-xl border bg-background shadow-sm m-2 md:ml-0", fill === true && "min-h-0"), children: [topbar, _jsx("main", { className: cn("flex-1 overflow-auto", fill === true && "min-h-0", mainClassName), children: children })] })] }));
 }

package/dist/web/layout/avatar.d.ts

@@ -1,10 +1,11 @@
 import { type ReactNode } from "react";
 export type AvatarSize = "sm" | "md" | "lg";
 export type AvatarProps = {
-    /** Stable Identifier — Hash-Quelle für die Background-Farbe. Üblich
-     *  user.id; bei rein labelbasierten Avataren auch der label-String. */
+    /** Stable identifier—the source for the background-color hash. Usually
+     *  `user.id`; for avatars based only on a label, the label string can also
+     *  be used. */
     readonly id: string;
-    /** Voller Name oder Email — Initials werden daraus extrahiert. */
+    /** Full name or email—the initials are extracted from this value. */
     readonly label: string;
     readonly size?: AvatarSize;
     readonly testId?: string;

package/dist/web/layout/avatar.js

@@ -1,20 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// Avatar-Pill mit Initials. Color-coded background basierend auf
-// string-hash damit der gleiche User immer dieselbe Farbe bekommt
-// (Linear-Pattern). 8 Hue-Targets für gute Distinktion ohne über-
-// bunte Sidebar.
+// Avatar pill with initials. The color is based on a string hash so the same
+// user always gets the same color (linear pattern). Eight hue targets provide
+// good distinction without making the sidebar overly colorful.
 //
-// Nutzung: `<Avatar id="user-123" label="Daniel Hennig" size="md" />`.
-// `id` ist die Hash-Quelle für die Farbe; `label` wird für Initials
-// + aria-label genutzt. Kein Image-Slot im MVP — kommt wenn Apps
-// echte Avatar-URLs haben.
+// Usage: `<Avatar id="user-123" label="Daniel Hennig" size="md" />`.
+// `id` is the color's hash source; `label` is used for initials and the
+// aria-label. There is no image slot yet; one follows once apps provide real
+// avatar URLs.
 import { useMemo } from "react";
 import { cn } from "../lib/cn.js";
-// Tailwind-Klassen pro Hue. Die Background-Lightness ist dezent (550-
-// 600 für saturation), die Foreground-Lightness ist hell (50-100) für
-// Kontrast. Passt zu beiden Modes weil die Tokens via CSS-vars greifen
-// — aber: feste hex-Farben hier sind stabiler als token-mapping
-// (Avatar-Farbe sollte deterministic sein, nicht theme-abhängig).
+// Tailwind classes for each hue. Background lightness is moderate (550–600)
+// for saturation, while foreground lightness is high (50–100) for contrast.
+// Fixed colors keep avatar colors deterministic and independent of the theme,
+// even though the tokens work in both modes through CSS variables.
 const COLOR_CLASSES = [
     "bg-rose-600 text-rose-50",
     "bg-orange-600 text-orange-50",
@@ -31,8 +29,8 @@ const SIZE_CLASSES = {
     lg: "size-8 text-xs",
 };
 function hashCode(str) {
-    // djb2-Variante — schnell, deterministic, gut genug verteilt für
-    // 8 Buckets. Crypto-Hash wäre Overkill für color-bucketing.
+    // A djb2 variant: fast and sufficiently well distributed for 8 buckets.
+    // A cryptographic hash would be overkill for color bucketing.
     let hash = 5381;
     for (let i = 0; i < str.length; i++) {
         hash = ((hash << 5) + hash + str.charCodeAt(i)) >>> 0;
@@ -44,8 +42,8 @@ function pickColor(id) {
     return COLOR_CLASSES[idx] ?? COLOR_CLASSES[0] ?? "bg-muted";
 }
 function extractInitials(label) {
-    // "Daniel Hennig" → "DH". "alice@example.com" → "AL". Single-word
-    // fällt auf erste 2 Buchstaben zurück ("Daniel" → "DA"). Alles
+    // "Daniel Hennig" → "DH". "alice@example.com" → "AL". For a single word,
+    // it falls back to the first 2 letters ("Daniel" → "DA"). Everything is
     // upper-case.
     const trimmed = label.trim();
     if (trimmed.length === 0)

package/dist/web/layout/default-app-shell.d.ts

@@ -5,37 +5,36 @@ export type DefaultAppShellUser = {
     readonly roles: readonly string[];
 };
 export type DefaultAppShellProps = {
-    /** Header-Slot oben in der Sidebar — Workspace-Identity (Logo, Name,
-     *  Plan-Tag). Caller liefert frei. */
+    /** Header slot at the top of the sidebar — workspace identity (logo, name,
+     *  plan tag). The caller provides the content. */
     readonly brand: ReactNode;
-    /** Schema (AppSchema oder legacy FeatureSchema) wird an NavTree
-     *  durchgereicht; Sidebar-Einträge bauen sich automatisch aus
-     *  schema.navs (per-Feature) auf. */
+    /** Schema (AppSchema or legacy FeatureSchema) passed through to NavTree;
+     *  sidebar entries are generated automatically from
+     *  schema.navs (per-feature). */
     readonly schema: AppSchema | FeatureSchema;
-    /** Current user — drives nav role-gating. Ohne user-prop werden
-     *  role-gated nav-einträge (`access: { roles: [...] }`) komplett
-     *  ausgeblendet (resolveNavigation behandelt undefined-user als
-     *  anonymous). */
+    /** Current user — drives navigation role gating. Without a user prop,
+     *  role-gated navigation entries (`access: { roles: [...] }`) are hidden
+     *  completely (resolveNavigation treats an undefined user as anonymous). */
     readonly user?: DefaultAppShellUser;
-    /** Icon-Row zwischen Brand und NavTree — typisch Search-Trigger,
-     *  ThemeToggle, TenantSwitcher. */
+    /** Icon row between the brand and NavTree — typically a Search trigger,
+     *  ThemeToggle, or TenantSwitcher. */
     readonly sidebarActions?: ReactNode;
-    /** Runtime-Badges pro Nav-Item (bare nav-id → ReactNode), an NavTree
-     *  durchgereicht. Für Tier-/Status-Badges, die die App pro User liefert
-     *  (Wert + Farbe), statt sie ins statische Schema zu backen. */
+    /** Runtime badges per navigation item (bare nav-id → ReactNode), passed
+     *  through to NavTree. For tier/status badges supplied by the app per user
+     *  (value + color), rather than embedded in the static schema. */
     readonly navBadges?: ReadonlyMap<string, ReactNode>;
-    /** Rechtsbündiger Slot in der Topbar (neben dem Breadcrumb) — für
-     *  ThemeToggle, globale Actions o.ä. Spart die eigene sidebarActions-
-     *  Zeile in der Sidebar. */
+    /** Right-aligned slot in the topbar (next to the breadcrumb) — for
+     *  ThemeToggle, global actions, and similar controls. Avoids a separate
+     *  sidebarActions row in the sidebar. */
     readonly headerActions?: ReactNode;
-    /** Footer-Slot unten in der Sidebar — Profile-Row, Help-Link,
-     *  Plan-Banner. */
+    /** Footer slot at the bottom of the sidebar — profile row, help link,
+     *  or plan banner. */
     readonly sidebarFooter?: ReactNode;
-    /** Viewport-fit Shell. true → fixe Viewport-Höhe (`h-svh`), der Content
-     *  scrollt INNEN statt der ganzen Seite. Default true — `fill={false}`
-     *  schaltet zurück auf Seiten-Scroll. */
+    /** Viewport-fit shell. true → fixed viewport height (`h-svh`); content
+     *  scrolls inside instead of the whole page. Defaults to true — `fill={false}`
+     *  switches back to page scrolling. */
     readonly fill?: boolean;
-    /** Screen-Content der im SidebarInset gerendert wird. */
+    /** Screen content rendered inside SidebarInset. */
     readonly children: ReactNode;
 };
 export declare function DefaultAppShell({ brand, schema, user, sidebarActions, headerActions, navBadges, sidebarFooter, fill, children, }: DefaultAppShellProps): ReactNode;

package/dist/web/layout/editor-panel.js

@@ -15,9 +15,9 @@ function EditorPanelInner({ target, resolvers, onClose, }) {
 }
 export function EditorPanel({ resolvers }) {
     const nav = useNav();
-    // target derived from URL → F5/Back stellen state wieder her.
-    // useMemo stabilisiert reference solange searchParams shallow-gleich
-    // sind (nav-Impl liefert plain-record für genau diesen check).
+    // target is derived from the URL, so F5 and Back restore the state.
+    // useMemo keeps the reference stable while searchParams are shallow-equal
+    // (the nav implementation provides a plain record for this check).
     const target = useMemo(() => parseTargetFromSearchParams(nav.searchParams), [nav.searchParams]);
     const handleClose = useCallback(() => {
         requestLeave(() => nav.setSearchParams(clearTargetSearchParams(nav.searchParams)));