@cosmicdrift/kumiko-renderer 0.386.0 → 0.388.0

package/dist/web/layout/nav-tree.js

@@ -27,12 +27,12 @@ function treeContainsScreen(nodes, screenId) {
     return nodes.some((n) => (n.screen !== undefined && lastSegment(n.screen) === screenId) ||
         treeContainsScreen(n.children, screenId));
 }
-// Ein Knoten überlebt den Filter, wenn er selbst oder ein Nachfahre matcht.
-// Provider-Kinder sind zur Filterzeit schon materialisiert (Provider-Knoten
-// sind default-expanded → eager geladen), darum reicht die statische
-// children-Rekursion. ponytail: ein zur Filterzeit noch NICHT geladener
-// (user-zugeklappter) Provider wird über den force-expand in useNavNodeState
-// aufgeklappt, lädt und filtert dann mit.
+// A node survives filtering when it or a descendant matches.
+// Provider children are already materialized during filtering (provider nodes
+// are default-expanded → eagerly loaded), so static children recursion is
+// sufficient. ponytail: a provider that is still NOT loaded during filtering
+// (because the user collapsed it) is expanded via the force-expand in
+// useNavNodeState, then loaded and filtered.
 function subtreeMatches(node, matches) {
     return matches(node.label) || node.children.some((c) => subtreeMatches(c, matches));
 }
@@ -45,7 +45,7 @@ export function NavTree({ schema, user, testId, allowedNavQns, navBadges, }) {
     const nav = useNav();
     const activeScreenId = nav.route?.screenId;
     const activeEntityId = nav.route?.entityId;
-    // Same "no nav entry of its own" gap the breadcrumb closes (fw#2724):
+    // Same "no nav entry of its own" gap the breadcrumb closes:
     // when the routed screen has no node in {tree}, fall back to its
     // resolved parent so a detail/edit/form screen still orients the user.
     const activeMarker = useMemo(() => {
@@ -64,9 +64,9 @@ export function NavTree({ schema, user, testId, allowedNavQns, navBadges, }) {
             return { screenId: activeScreenId, exact: true };
         return parentScreenId !== undefined ? { screenId: parentScreenId, exact: false } : undefined;
     }, [tree, app.features, activeScreenId, activeEntityId]);
-    // Collapsed-Set: nur die explizit zugeklappten qualified-names. Default
-    // ist also "alles auf" — neue Features tauchen sofort offen auf, ohne
-    // dass der User erst klicken muss.
+    // The collapsed set contains only explicitly collapsed qualified names.
+    // Everything is therefore expanded by default, so new features appear open
+    // without requiring the user to click first.
     const [collapsed, setCollapsed] = useState(() => new Set());
     const onToggle = useCallback((qn) => {
         setCollapsed((prev) => {
@@ -83,7 +83,7 @@ export function NavTree({ schema, user, testId, allowedNavQns, navBadges, }) {
     const [filter, setFilter] = useState("");
     // The search box is only CSS-hidden (`group-data-[collapsible=icon]:hidden`)
     // when the sidebar collapses to icon rail, not unmounted — without this,
-    // a stale filter re-applies invisibly on the next expand (fw#1816).
+    // a stale filter re-applies invisibly on the next expand.
     useEffect(() => {
         if (sidebarState === "collapsed")
             setFilter("");
@@ -96,16 +96,16 @@ export function NavTree({ schema, user, testId, allowedNavQns, navBadges, }) {
     const navFilter = useMemo(() => ({ q, matches }), [q, matches]);
     return (_jsx(ActiveScreenMarkerContext.Provider, { value: activeMarker, children: _jsx(NavFilterContext.Provider, { value: navFilter, children: _jsx(NavBadgesContext.Provider, { value: navBadges ?? EMPTY_BADGES, children: _jsxs("div", { "data-testid": testId, "data-kumiko-layout": "nav-tree", className: "flex w-full flex-col gap-3", children: [_jsxs("div", { className: "relative mb-0 group-data-[collapsible=icon]:hidden", children: [_jsx(Search, { "aria-hidden": "true", className: "pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-sidebar-muted" }), _jsx(SidebarInput, { className: "pl-8", value: filter, onChange: (e) => setFilter(e.target.value), placeholder: t("kumiko.nav.search"), "aria-label": t("kumiko.nav.search") })] }), tree.map((node) => isPureSection(node) ? (_jsx(NavSection, { node: node, collapsed: collapsed, onToggle: onToggle }, node.qualifiedName)) : (_jsx(SidebarMenu, { children: _jsx(NavMenuNode, { node: node, collapsed: collapsed, onToggle: onToggle }) }, node.qualifiedName)))] }) }) }) }));
 }
-// Runtime-Badge-Slot rechts am Label, gekeyt auf die bare nav-id. Kein
-// Eintrag → nichts (silent, kein Layout-Shift). shrink-0 + die ml-auto
-// schiebt ihn ans rechte Ende; das truncate-Label gibt nach.
-// ponytail: nur an screen/target-Leaves verdrahtet, nicht an Container-
-// Knoten (die tragen den ml-auto-Chevron) — Tier-Badge ist ein Leaf.
-// Defense-in-depth (555/4): every current call site already guards on
+// The runtime badge slot is keyed by the bare nav ID. With no entry it
+// renders nothing, avoiding layout shift. shrink-0 and ml-auto move it to the
+// right edge while the truncated label gives up space.
+// ponytail: badges are wired only to screen/target leaves, not container nodes
+// (which use the ml-auto chevron). A tier badge belongs on a leaf.
+// Defense-in-depth: current call sites already guard on
 // node.screen/node.target !== undefined before rendering <NavBadge>, so this
-// early-return changes no current behavior — it's here so a future call
-// site added without that guard can't silently show a leaf's badge on an
-// unrelated container node that happens to share its last-segment.
+// early return does not change current behavior. It prevents a future call
+// site without that guard from showing a leaf badge on an unrelated container
+// node that happens to share its last segment.
 function NavBadge({ node }) {
     const badges = useContext(NavBadgesContext);
     if (node.screen === undefined && node.target === undefined)
@@ -115,10 +115,10 @@ function NavBadge({ node }) {
         return null;
     return _jsx("span", { className: "ml-auto shrink-0", children: badge });
 }
-// Pure section = ein Gruppen-Header ohne eigenen Screen, der nur seine
-// children gruppiert. Auf Top-Level wird daraus eine SidebarGroup mit
-// togglebarem GroupLabel; ein Node mit Screen (auch wenn er children hat)
-// ist dagegen ein klickbarer Menu-Eintrag.
+// A pure section is a group header without its own screen that only groups
+// its children. At the top level it becomes a SidebarGroup with a toggleable
+// GroupLabel; a node with a screen remains a clickable menu entry even when it
+// also has children.
 function isPureSection(node) {
     return (node.screen === undefined &&
         node.target === undefined &&
@@ -126,9 +126,9 @@ function isPureSection(node) {
         node.createAction === undefined &&
         node.children.length > 0);
 }
-// i18n-Key Konvention: enthält das label einen Punkt, durchs t() laufen
-// lassen (Bundle kennt den Key → übersetzt, sonst bleibt der Key sichtbar
-// = vergessene Übersetzung). Reine String-Labels bleiben unangetastet.
+// If the label contains a dot, pass it through t(): the bundle translates
+// the key; otherwise the key remains visible as a reminder of a missing
+// translation. Literal string labels are left unchanged.
 function useLabel(node) {
     const t = useTranslation();
     return node.label.includes(".") ? t(node.label) : node.label;
@@ -152,11 +152,12 @@ function NavLeadingIcon({ node, active, expanded = false, label, }) {
         return null;
     return (_jsx("span", { "aria-hidden": "true", className: cn("hidden size-4 shrink-0 items-center justify-center font-medium text-xs group-data-[collapsible=icon]:flex", active ? "text-sidebar-accent-foreground" : "text-sidebar-foreground/70"), children: initial }));
 }
-// Stable-reference empty-list — sonst destabilisiert ein neues `[]` pro
-// Render die useEffect-deps der SSE-Subscription.
+// A stable empty-list reference prevents a new `[]` on every render from
+// destabilizing the SSE subscription's useEffect dependencies.
 const EMPTY_ENTITY_LIST = [];
-// Active-Target-Vergleich: featureId + action exakt, args shallow-equal
-// (heute nur primitives). Gespiegelt aus dem alten TreeNodeRenderer.
+// Active targets require an exact featureId and action match, with shallow
+// equality for args (currently primitives only). This mirrors the former
+// TreeNodeRenderer.
 function targetsEqual(a, b) {
     if (b === undefined)
         return false;
@@ -172,11 +173,12 @@ function targetsEqual(a, b) {
     }
     return true;
 }
-// Adapter: provider-emittierte TreeNodes → renderbare NavNodes. Synthetische
-// QN aus parent-QN + idx-label (stabil über Emit-Order). Statische children
-// rekursiv. ponytail: eine TreeChildrenSubscribe-Function als children wird
-// als Leaf behandelt — nested-dynamic-Provider nutzt heute kein Consumer;
-// upgrade-path = synthetische QN registrieren wenn einer sie emittet.
+// Adapts provider-emitted TreeNodes to renderable NavNodes. Synthetic QNs use
+// the parent QN and index label, remaining stable as long as emit order is
+// stable. Static children are converted recursively. ponytail: a
+// TreeChildrenSubscribe-Function supplied as children is treated as a leaf;
+// nested dynamic providers have no consumer today. The upgrade path is to
+// register synthetic QNs when such a provider emits them.
 function treeNodeToNavNode(tn, parentQn, idx) {
     const qualifiedName = `${parentQn}/${idx}-${tn.label}`;
     const children = Array.isArray(tn.children)
@@ -193,10 +195,10 @@ function treeNodeToNavNode(tn, parentQn, idx) {
         ...(tn.createAction !== undefined && { createAction: tn.createAction }),
     };
 }
-// Lazy provider-children + SSE-Live-Refresh für einen `provider: true`-Knoten.
-// Subscribe läuft erst wenn der Knoten ausgeklappt ist (enabled); die
-// treeEntities-Liste (per QN) re-fired den Provider bei Entity-Events → neu
-// erstellte Knoten erscheinen live. Logik gespiegelt aus VisualTree.ProviderBranch.
+// Lazy provider children with SSE live refresh for a `provider: true` node.
+// Subscription starts only when the node is expanded (enabled). The
+// treeEntities list, keyed by QN, re-fires the provider on entity events so
+// newly created nodes appear live. The logic mirrors VisualTree.ProviderBranch.
 function useNavProviderChildren(qn, enabled) {
     const providers = useNavProviders();
     const entitiesMap = useNavEntities();
@@ -222,8 +224,8 @@ function useNavProviderChildren(qn, enabled) {
             scheduler.dispose();
         };
     }, [enabled, entities, subscribeLive]);
-    // `attempt` triggert SSE-Refresh + erneutes Subscribe — Biome sieht es
-    // nicht im body, semantisch ist es der re-fire-Trigger.
+    // `attempt` triggers an SSE refresh and a new subscription, although Biome
+    // cannot see its use in the body; semantically, it is the refire trigger.
     // biome-ignore lint/correctness/useExhaustiveDependencies: attempt = re-fire trigger
     useEffect(() => {
         if (!enabled) {
@@ -256,10 +258,9 @@ function useNavProviderChildren(qn, enabled) {
     const nodes = useMemo(() => (raw === null ? null : raw.map((tn, i) => treeNodeToNavNode(tn, qn, i))), [raw, qn]);
     return { nodes, error };
 }
-// Geteilte Knoten-Logik für Top-Level- (NavMenuNode) und Sub-Knoten
-// (NavSubNode): Label, Expand/Collapse, active-State (screen ODER target),
-// und die lazy Provider-Children. Die zwei Renderer unterscheiden sich nur
-// in den shadcn-Primitives, nicht in dieser Logik.
+// Shared node logic for top-level (NavMenuNode) and nested (NavSubNode)
+// nodes: labels, expansion, active state (screen or target), and lazy provider
+// children. The two renderers differ only in their shadcn primitives.
 function useNavNodeState(node, collapsed) {
     const nav = useNav();
     const { q: filterQ, matches } = useContext(NavFilterContext);
@@ -267,8 +268,8 @@ function useNavNodeState(node, collapsed) {
     const displayLabel = useLabel(node);
     const isCollapsed = collapsed.has(node.qualifiedName);
     const expandable = node.children.length > 0 || node.provider === true;
-    // Aktiver Filter klappt jeden Container auf, damit Treffer unter zugeklappten
-    // Ordnern sichtbar werden (und Provider-Kinder nachladen).
+    // An active filter expands every container so matches inside collapsed
+    // folders become visible and provider children can load.
     const isExpanded = expandable && (!isCollapsed || filterActive);
     const { nodes: providerChildren, error: providerError } = useNavProviderChildren(node.qualifiedName, node.provider === true && isExpanded);
     const activeTarget = useMemo(() => parseTargetFromSearchParams(nav.searchParams), [nav.searchParams]);
@@ -290,8 +291,8 @@ function useNavNodeState(node, collapsed) {
         active: screenActive || targetActive,
         ariaCurrent: screenIsExactMatch || targetActive,
         childNodes: visibleChildNodes,
-        // Ein gefilterter Knoten verschwindet nur, wenn weder er selbst noch ein
-        // sichtbar gebliebenes Kind matcht — sonst bliebe ein leerer Ordner-Header.
+        // A filtered node is hidden only when neither it nor a visible child matches;
+        // otherwise an empty folder header would remain.
         hidden: filterActive && !matches(node.label) && visibleChildNodes.length === 0,
         providerLoading: node.provider === true && isExpanded && providerChildren === null,
         providerError,
@@ -360,7 +361,7 @@ function NodeActions({ node, expandable, workspaceId, }) {
     const hover = "opacity-0 group-hover/menu-item:opacity-100 group-hover/menu-sub-item:opacity-100 group-focus-within/menu-item:opacity-100";
     return (_jsxs("div", { className: cn("absolute top-1 flex items-center gap-0.5", expandable ? "right-7" : "right-1"), children: [create !== undefined && (_jsx(TreeActionControl, { action: create, ariaLabel: label(create.label), className: btn, dispatch: dispatch, workspaceId: workspaceId, children: _jsx(Plus, { className: "size-3.5" }) })), actions.map((a) => (_jsx(TreeActionControl, { action: a, ariaLabel: label(a.label), className: cn(btn, hover), dispatch: dispatch, workspaceId: workspaceId, children: _jsx(ActionGlyph, { icon: a.icon }) }, a.label)))] }));
 }
-// Status-Zeilen innerhalb einer Provider-Sub-Liste (lazy-loading / error).
+// Status lines within a provider sub-list (lazy loading or error).
 function ProviderStatus({ loading, error, }) {
     if (error !== null) {
         return _jsx("li", { className: "px-2 py-1 text-xs text-destructive", children: error });
@@ -370,14 +371,15 @@ function ProviderStatus({ loading, error, }) {
     }
     return null;
 }
-// Top-Level-Section: SidebarGroup mit STATISCHEM Label (sidebar-07-Muster —
-// "Platform"/"Projects" sind feste Überschriften, keine Toggles). Collapse
-// gehört auf Items MIT children, nicht auf die Section selbst.
+// Top-level section: a SidebarGroup with a static label
+// ("Platform"/"Projects" are fixed headings, not toggles). Collapse belongs
+// on items with children, not on the section itself.
 function NavSection({ node, collapsed, onToggle }) {
     const displayLabel = useLabel(node);
     const { q, matches } = useContext(NavFilterContext);
-    // Provider-Kinder (statisch leer bis geladen) halten die Section offen — ihr
-    // Match lässt sich hier nicht statisch prüfen; der Knoten selbst self-hidet.
+    // Provider children are statically empty until loaded, so they keep the
+    // section visible; their matches cannot be checked statically, and the node
+    // hides itself.
     if (q !== "" &&
         !matches(node.label) &&
         !node.children.some((c) => c.provider === true || subtreeMatches(c, matches))) {
@@ -385,13 +387,13 @@ function NavSection({ node, collapsed, onToggle }) {
     }
     return (_jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: displayLabel }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: node.children.map((child) => (_jsx(NavMenuNode, { node: child, collapsed: collapsed, onToggle: onToggle }, child.qualifiedName))) }) })] }));
 }
-// Ein Menu-Eintrag (Top-Level-Item oder Section-Child). Drei Klick-Modi am
-// EINEN Knoten: `screen` → Route-Link (KumikoLink), `target` → EditorPanel-
-// Dispatch (useDispatchTarget), keins → Container/Provider-Knoten der nur
-// auf-/zuklappt. Provider-Knoten laden ihre Children lazy + SSE-live. Der
-// Collapse-Chevron sitzt als SidebarMenuAction daneben (separater Button,
-// sonst <button> im <a> = invalides HTML); createAction/actions als
-// absolute NodeActions links davon.
+// A menu entry (top-level item or section child) supports three click modes:
+// `screen` is a route link (KumikoLink), `target` dispatches to EditorPanel
+// (useDispatchTarget), and neither makes it a container/provider node that only
+// expands or collapses. Provider nodes load children lazily with SSE refresh.
+// The collapse chevron is a separate SidebarMenuAction because nesting a
+// <button> inside an <a> would produce invalid HTML; createAction/actions are
+// rendered as absolute NodeActions beside it.
 function NavMenuNode({ node, collapsed, onToggle }) {
     const t = useTranslation();
     const dispatch = useDispatchTarget();
@@ -414,21 +416,22 @@ function NavMenuNode({ node, collapsed, onToggle }) {
                 }, ...(s.expandable && { "aria-expanded": s.isExpanded }), children: [_jsx(NavLeadingIcon, { node: node, active: false, expanded: s.isExpanded, label: s.displayLabel }), _jsx("span", { className: "truncate group-data-[collapsible=icon]:hidden", title: s.displayLabel, children: s.displayLabel }), s.expandable &&
                         (s.isExpanded ? (_jsx(ChevronDown, { className: "ml-auto" })) : (_jsx(ChevronRight, { className: "ml-auto" })))] }), _jsx(NodeActions, { node: node, expandable: s.expandable, workspaceId: s.workspaceId }), sub] }));
 }
-// Verschachtelte Einträge (innerhalb SidebarMenuSub). Gleiche drei Klick-Modi
-// wie NavMenuNode, nur mit den Sub-Primitives. Folder-/Container-Knoten (kein
-// screen/target) klappen auf — Provider-Children + tiefere Statics rekursiv.
-// Non-Link-Klickziele brauchen asChild+<button> (SidebarMenuSubButton ist ein
-// <a>); der Chevron sitzt als eigener absoluter Button (kein Button-im-<a>).
+// Nested entries inside SidebarMenuSub use the same three click modes as
+// NavMenuNode, with the sub-primitives. Folder/container nodes without a
+// screen or target expand; provider children and deeper static nodes recurse.
+// Non-link targets require asChild with <button> because SidebarMenuSubButton
+// is an <a>; the chevron is a separate absolute button to avoid a button inside
+// an anchor.
 function NavSubNode({ node, collapsed, onToggle }) {
     const t = useTranslation();
     const dispatch = useDispatchTarget();
     const s = useNavNodeState(node, collapsed);
     if (s.hidden)
         return null;
-    // Kinder in ein eigenes SidebarMenuSub (<ul>) — ein Sub-Item ist ein <li>,
-    // verschachtelte <li> ohne <ul> dazwischen sind invalides HTML (nested
-    // Content-Ordner: Marketing/ > Block). Der <ul> trägt zugleich die
-    // Einrück-/Border-Stufe pro Tiefe.
+    // Children go in their own SidebarMenuSub (<ul>): a sub-item is an <li>, so
+    // nested <li> elements without an intervening <ul> would be invalid HTML
+    // (for example, nested content folders such as Marketing/ > Block). The
+    // <ul> also supplies the indentation and border level for each depth.
     const deeper = s.isExpanded ? (_jsxs(SidebarMenuSub, { children: [_jsx(ProviderStatus, { loading: s.providerLoading, error: s.providerError }), s.childNodes.map((child) => (_jsx(NavSubNode, { node: child, collapsed: collapsed, onToggle: onToggle }, child.qualifiedName)))] })) : null;
     const chevron = s.expandable ? (_jsx("button", { type: "button", "aria-label": t(s.isExpanded ? "kumiko.nav.collapse" : "kumiko.nav.expand"), "aria-expanded": s.isExpanded, onClick: (e) => {
             e.stopPropagation();
@@ -447,19 +450,18 @@ function NavSubNode({ node, collapsed, onToggle }) {
                             onToggle(node.qualifiedName);
                     }, children: [_jsx(NavLeadingIcon, { node: node, active: false, expanded: s.isExpanded, label: s.displayLabel }), _jsx("span", { className: "truncate group-data-[collapsible=icon]:hidden", title: s.displayLabel, children: s.displayLabel })] }) }), _jsx(NodeActions, { node: node, expandable: s.expandable, workspaceId: s.workspaceId }), chevron, deeper] }));
 }
-// Backwards-kompatibler Single-Feature-Builder. Convenience-Wrapper um
-// buildNavRegistrySliceForApp — bestehende Tests die direkt mit
-// FeatureSchema rufen brauchen keine Änderung.
+// Backward-compatible single-feature builder. This convenience wrapper around
+// buildNavRegistrySliceForApp lets existing tests that call it with
+// FeatureSchema remain unchanged.
 export function buildNavRegistrySlice(schema, allowedNavQns) {
     return buildNavRegistrySliceForApp(toAppSchema(schema), allowedNavQns);
 }
-// Multi-Feature-Variante. Iteriert alle Features, qualifiziert pro
-// Feature mit dem eigenen featureName. Reihenfolge: Features in der
-// AppSchema-Ordnung, navs in der vom Feature deklarierten Reihenfolge.
+// Multi-feature variant. Iterates over all features, qualifying each entry
+// with its own featureName. Feature order follows AppSchema, and nav order
+// follows each feature's declaration order.
 //
-// Cross-Feature-Workspaces sind hier nativ unterstützt — `navMembers`
-// referenzieren QNs, der Filter trifft die jeweils richtigen Einträge
-// egal in welchem Feature sie deklariert sind.
+// Cross-feature workspaces are supported natively: `navMembers` reference QNs,
+// and the filter selects the correct entries regardless of their feature.
 export function buildNavRegistrySliceForApp(app, allowedNavQns) {
     const screenAccessByQn = buildScreenAccessMap(app);
     const qualified = [];
@@ -468,7 +470,7 @@ export function buildNavRegistrySliceForApp(app, allowedNavQns) {
             const screen = n.screen !== undefined ? qualifyScreenId(feature.featureName, n.screen) : undefined;
             // Nav entries without their own `access` inherit the referenced
             // screen's access rule — otherwise a broader workspace/parent access
-            // lets a role see a nav entry whose target screen 403s them (#1099).
+            // lets a role see a nav entry whose target screen 403s them.
             // An explicit `n.access` always wins; inheritance only fills the gap.
             const inheritedAccess = n.access ?? (screen !== undefined ? screenAccessByQn.get(screen) : undefined);
             qualified.push({
@@ -540,6 +542,6 @@ function buildScreenAccessMap(app) {
     }
     return map;
 }
-// `lastSegment` lebt jetzt in @cosmicdrift/kumiko-renderer (./app/qn) — eine
-// Quelle, beide Pakete teilen sie.
+// `lastSegment` now lives in @cosmicdrift/kumiko-renderer (./app/qn), giving
+// both packages a shared implementation.
 export { lastSegment };

package/dist/web/layout/profile-menu.d.ts

@@ -4,7 +4,7 @@ export type ProfileMenuItem = MenuItemDef;
 export type ProfileMenuProps = {
     readonly user: {
         readonly id: string;
-        /** Display-Name oder Email — Quelle für Initials. */
+        /** Display name or email — the source for initials. */
         readonly label: string;
     };
     readonly items: readonly ProfileMenuItem[];

package/dist/web/layout/shell-header.js

@@ -19,6 +19,7 @@ import { HeaderOverflowMenuContext, headerOverflowMenuItemClass } from "./header
 import { buildNavRegistrySliceForApp, lastSegment } from "./nav-tree.js";
 import { usePageHeaderSlot } from "./page-header-slot.js";
 import { resolveDetailBreadcrumb, screenTitleKey, } from "./shell-breadcrumb.js";
+import { UNIFORM_BAR_CONTROLS_CLASSES } from "./uniform-bar-controls.js";
 export function ShellHeader({ schema, user, headerActions, }) {
     const nav = useNav();
     const t = useTranslation();
@@ -68,7 +69,7 @@ export function ShellHeader({ schema, user, headerActions, }) {
                                                     e.preventDefault();
                                                     nav.navigate({ screenId });
                                                 }, children: crumb.label })) : isLast ? (_jsx("h1", { "aria-current": "page", title: titleOverride ?? crumb.label, className: "truncate text-lg font-semibold text-foreground", children: titleOverride ?? crumb.label })) : (_jsx(BreadcrumbPage, { className: "whitespace-nowrap text-foreground-secondary", children: crumb.label })) })] }, screenId ?? crumb.label));
-                            }) }) })), _jsx("div", { ref: setStatusElement, "data-kumiko-layout": "page-header-status", className: cn("flex items-center gap-2 empty:hidden", compact ? "min-w-0 overflow-hidden" : "shrink-0") })] }), _jsxs("div", { className: cn("ml-auto flex items-center gap-2", compact ? "min-w-0 max-w-[60%]" : "min-w-0 max-w-[50%] shrink-0 sm:max-w-none"), children: [_jsx("div", { ref: setActionsElement, "data-kumiko-layout": "page-header-actions", className: cn("flex min-w-0 items-center gap-2 empty:hidden [&_*]:min-w-0 [&_*]:max-w-full [&_button]:overflow-hidden [&_button]:whitespace-nowrap", compact && "overflow-hidden") }), !compact && headerActions !== undefined && (_jsx("div", { "data-kumiko-layout": "header-actions", className: "flex items-center gap-2", children: headerActions })), hasOverflow && _jsx(HeaderOverflow, { items: overflowItems, headerActions: headerActions })] })] }));
+                            }) }) })), _jsx("div", { ref: setStatusElement, "data-kumiko-layout": "page-header-status", className: cn("flex items-center gap-2 empty:hidden", compact ? "min-w-0 overflow-hidden" : "shrink-0") })] }), _jsxs("div", { className: cn("ml-auto flex items-center gap-2", compact ? "min-w-0 max-w-[60%]" : "min-w-0 max-w-[50%] shrink-0 sm:max-w-none"), children: [_jsx("div", { ref: setActionsElement, "data-kumiko-layout": "page-header-actions", className: cn(UNIFORM_BAR_CONTROLS_CLASSES, "flex min-w-0 items-center gap-2 empty:hidden [&_*]:min-w-0 [&_*]:max-w-full [&_button]:overflow-hidden [&_button]:whitespace-nowrap", compact && "overflow-hidden") }), !compact && headerActions !== undefined && (_jsx("div", { "data-kumiko-layout": "header-actions", className: "flex items-center gap-2", children: headerActions })), hasOverflow && _jsx(HeaderOverflow, { items: overflowItems, headerActions: headerActions })] })] }));
 }
 // A hand-rolled menu instead of Radix DropdownMenu: app headerActions are opaque
 // nodes with their own popovers, and the panel stays mounted while closed so their

package/dist/web/layout/sidebar-brand.d.ts

@@ -1,15 +1,15 @@
 import type { ReactNode } from "react";
 export type SidebarBrandProps = {
-    /** Workspace-/App-Name (fett, erste Zeile). */
+    /** Workspace/app name (bold, first line). */
     readonly name: string;
-    /** Zweite Zeile — Plan, Tagline, Tenant (klein, gedimmt). */
+    /** Second line — plan, tagline, or tenant (small, dimmed). */
     readonly plan?: string;
-    /** Logo in der Kachel — typisch ein Lucide-Icon. Fehlt es, steht der
-     *  erste Buchstabe des Namens. */
+    /** The tile typically contains a Lucide icon. If omitted, the first
+     *  character of the name is shown. */
     readonly logo?: ReactNode;
-    /** Zeigt das ChevronsUpDown-Icon (Aufklapp-Affordance) nur wenn die App den
-     *  Brand tatsächlich in ein Dropdown wrappt. Default false: ohne Dropdown
-     *  ist das Chevron irreführend (suggeriert ein Menü, das nicht aufgeht). */
+    /** Shows the ChevronsUpDown icon only when the app wraps the brand in a
+     *  dropdown. Default false: without a dropdown, the chevron misleadingly
+     *  suggests a menu that does not open. */
     readonly collapsible?: boolean;
 };
 export declare function SidebarBrand({ name, plan, logo, collapsible, }: SidebarBrandProps): ReactNode;

package/dist/web/layout/sidebar-user.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 export type SidebarUserProps = {
     readonly name: string;
     readonly email?: string;
-    /** Avatar-URL. Fehlt sie, stehen die Initialen aus dem Namen. */
+    /** Avatar URL. When omitted, initials derived from the name are shown. */
     readonly avatar?: string;
 };
 export declare function SidebarUser({ name, email, avatar }: SidebarUserProps): ReactNode;

package/dist/web/layout/sidebar-user.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// SidebarUser — der NavUser-Footer aus shadcns sidebar-07: Avatar + Name +
-// Email + ChevronsUpDown. App-Author reicht ihn als `sidebarFooter` an
-// DefaultAppShell. Reiner Look (kein Account-Dropdown) — wer ein User-Menü
-// will, wrappt ihn in einen DropdownMenu.
+// SidebarUser is the NavUser footer from shadcns sidebar-07: avatar + name +
+// email + ChevronsUpDown. App authors pass it as `sidebarFooter` to
+// DefaultAppShell. It is purely visual (no account dropdown); wrap it in a
+// DropdownMenu to provide a user menu.
 import { ChevronsUpDown } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar.js";

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

@@ -1,16 +1,16 @@
 import type { ReactNode } from "react";
 export type SidebarProps = {
-    /** Header-Bereich oben — typisch Workspace-Avatar + Name + Badge.
-     *  Lebt VOR dem scroll-area, bleibt sichtbar wenn das nav scrollt. */
+    /** Header area at the top — typically a workspace avatar, name, and badge.
+     *  Sits ABOVE the scroll area and remains visible while the nav scrolls. */
     readonly header?: ReactNode;
-    /** Action-Cluster zwischen Header und Nav — typisch "+ Neu" Button
-     *  und Search-Icon. Linear-Pattern: prominent, nicht im scroll-area. */
+    /** Action cluster between the header and nav — typically a "+ Neu" button
+     *  and search icon. Linear pattern: prominent and outside the scroll area. */
     readonly actions?: ReactNode;
-    /** NavTree + freie Sections (z.B. "Your teams" Header + Sub-Items).
-     *  Scrollt eigenständig wenn der Inhalt zu lang wird. */
+    /** NavTree and free-form sections (e.g. "Your teams" header and sub-items).
+     *  Scrolls independently when the content becomes too long. */
     readonly children: ReactNode;
-    /** Footer-Bereich unten — typisch Invite-Link, Help, Plan-Banner.
-     *  Klebt am unteren Rand via mt-auto. */
+    /** Footer area at the bottom — typically an invite link, help, and plan banner.
+     *  Sticks to the bottom via mt-auto. */
     readonly footer?: ReactNode;
     readonly testId?: string;
 };

package/dist/web/layout/sidebar.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Sidebar({ header, actions, children, footer, testId }) {
-    // Linear-Pattern: 4 vertikale Bereiche
-    //   1. Header (Workspace-Identity)
-    //   2. Actions (Quick-Buttons, nicht-scrollend)
-    //   3. Nav-Scroll-Area (NavTree, scrollt wenn nötig)
-    //   4. Footer (klebt unten via mt-auto)
-    // bg-muted/40 + border-r für visuelle Distinction zur Main-Area;
-    // tighter padding (p-3) und kompakte gap-0.5 zwischen Items.
+    // Linear pattern: four vertical areas
+    //   1. Header (workspace identity)
+    //   2. Actions (non-scrolling quick buttons)
+    //   3. Nav scroll area (NavTree, scrolling when needed)
+    //   4. Footer (stays at the bottom via mt-auto)
+    // bg-muted/40 + border-r distinguish the sidebar visually from the main area;
+    // tighter padding (p-3) and a compact gap-0.5 between items.
     return (_jsxs("aside", { "data-testid": testId, "data-kumiko-layout": "sidebar", className: "hidden md:flex w-60 flex-shrink-0 bg-transparent flex-col text-sm", children: [header !== undefined && (_jsx("div", { "data-kumiko-layout": "sidebar-header", className: "h-12 flex items-center px-3 border-b border-border/50", children: header })), actions !== undefined && (_jsx("div", { "data-kumiko-layout": "sidebar-actions", className: "px-3 py-2 border-b border-border/50 flex flex-row items-center gap-1", children: actions })), _jsx("div", { "data-kumiko-layout": "sidebar-nav", className: "px-3 py-2 flex flex-col gap-0.5 overflow-auto flex-1", children: children }), footer !== undefined && (_jsx("div", { "data-kumiko-layout": "sidebar-footer", className: "px-3 py-2 border-t mt-auto flex flex-col gap-1 text-xs text-muted-foreground", children: footer }))] }));
 }

package/dist/web/layout/target-resolver-stub.d.ts

@@ -3,11 +3,11 @@ type DispatchListener = (target: TargetRef) => void;
 export declare function dispatchTarget(target: TargetRef): void;
 /** Test-Hook: Exklusiver Spy. Returnt cleanup. */
 export declare function setDispatchListener(fn: DispatchListener): () => void;
-/** Production-Subscriber registrieren. Returnt unsubscribe. Läuft nur
- *  wenn kein Test-Listener aktiv (Test-Isolation). */
+/** Registers a production subscriber and returns an unsubscribe function.
+ *  It runs only when no test listener is active (test isolation). */
 export declare function subscribeTargetDispatches(fn: DispatchListener): () => void;
-/** V.1.4b: empfohlener Production-Dispatch. Schreibt target in
- *  nav.searchParams (URL-State, F5-fähig) UND ruft dispatchTarget für
- *  Test-Listener + legacy-Subscribers. */
+/** Recommended production dispatch. Writes the target to
+ *  nav.searchParams (URL state, F5-compatible) AND calls dispatchTarget for
+ *  test listeners and legacy subscribers. */
 export declare function useDispatchTarget(): (target: TargetRef) => void;
 export {};

package/dist/web/layout/target-resolver-stub.js

@@ -1,20 +1,20 @@
-// TargetResolver — V.1.2: Multi-Listener-TargetDispatch mit Test-Hook.
-// V.1.4b: URL-State-Bridge via useDispatchTarget-Hook. Production schreibt
-// target in nav.searchParams (F5-recovery); Subscribe-Stream bleibt für
-// Test-Hooks (setDispatchListener) und Apps die kein NavProvider haben.
+// TargetResolver: multi-listener target dispatch with a test hook, plus a
+// URL-state bridge via the useDispatchTarget hook. Production writes
+// the target to nav.searchParams (F5 recovery); the subscription stream remains
+// available for test hooks (setDispatchListener) and apps without a NavProvider.
 //
-// Dispatch-Priority (V.1.2):
-//   1. Test-Listener (setDispatchListener) — exklusiv, kein Production-
-//      Subscriber läuft während Tests (Test-Isolation).
-//   2. Production-Subscriber (subscribeTargetDispatches) — alle
-//      registrierten Production-Subscriber.
-//   3. Kein Test-Listener + keine Subscriber → console.debug fallback
-//      (damit unhandled Klicks sichtbar bleiben).
+// Dispatch priority:
+//   1. Test listener (setDispatchListener) — exclusive; no production
+//      subscriber runs during tests (test isolation).
+//   2. Production subscribers (subscribeTargetDispatches) — all registered
+//      production subscribers.
+//   3. No test listener and no subscribers → console.debug fallback so unhandled
+//      clicks remain visible.
 //
-// **useDispatchTarget (V.1.4b)** ist der empfohlene Production-Pfad.
-// NavTree ruft den Hook im Click-Handler eines target-Knotens — er schreibt
-// die URL via nav.setSearchParams UND ruft den globalen dispatchTarget für
-// Test-Listener-Kompatibilität.
+// **useDispatchTarget** is the recommended production path.
+// NavTree calls the hook from a target node's click handler. It writes the URL
+// via nav.setSearchParams AND calls the global dispatchTarget for compatibility
+// with test listeners.
 import { useCallback } from "react";
 import { rendererDebug } from "../../dev-console.js";
 import { requestLeave, useNav } from "../../index.js";
@@ -41,17 +41,17 @@ export function setDispatchListener(fn) {
         testListener = undefined;
     };
 }
-/** Production-Subscriber registrieren. Returnt unsubscribe. Läuft nur
- *  wenn kein Test-Listener aktiv (Test-Isolation). */
+/** Registers a production subscriber and returns an unsubscribe function.
+ *  It runs only when no test listener is active (test isolation). */
 export function subscribeTargetDispatches(fn) {
     subscribers.add(fn);
     return () => {
         subscribers.delete(fn);
     };
 }
-/** V.1.4b: empfohlener Production-Dispatch. Schreibt target in
- *  nav.searchParams (URL-State, F5-fähig) UND ruft dispatchTarget für
- *  Test-Listener + legacy-Subscribers. */
+/** Recommended production dispatch. Writes the target to
+ *  nav.searchParams (URL state, F5-compatible) AND calls dispatchTarget for
+ *  test listeners and legacy subscribers. */
 export function useDispatchTarget() {
     const nav = useNav();
     return useCallback((target) => {

package/dist/web/layout/target-url.d.ts

@@ -1,12 +1,12 @@
 import type { TargetRef } from "@cosmicdrift/kumiko-framework/engine";
-/** Build a search-params update for `setSearchParams`. Clears all
- *  existing `a_*` keys plus `t` (so wechsel target nicht alte args
- *  liegen lässt). Returns null-value entries to clear, plus the new
+/** Builds a search-params update for `setSearchParams`. Clears all
+ *  existing `a_*` keys plus `t` so switching targets cannot leave stale
+ *  arguments behind. Returns null-valued entries to clear, plus the new
  *  target entries. */
 export declare function serializeTarget(target: TargetRef, currentParams: Readonly<Record<string, string>>): Readonly<Record<string, string | null>>;
-/** Inverse — parse the current search-params back into a TargetRef.
- *  Returns undefined wenn der `t`-Key fehlt (kein active target). */
+/** Parses the current search parameters back into a TargetRef.
+ *  Returns undefined when the `t` key is missing, indicating no active target. */
 export declare function parseTargetFromSearchParams(params: Readonly<Record<string, string>>): TargetRef | undefined;
-/** Returns null-valued updates that clear target + all args. Used vom
- *  Close-Button + onUnmount. */
+/** Returns null-valued updates that clear the target and all arguments. Used by
+ *  the close button and on unmount. */
 export declare function clearTargetSearchParams(currentParams: Readonly<Record<string, string>>): Readonly<Record<string, string | null>>;