@cosmicdrift/kumiko-renderer 0.385.0 → 0.387.0

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)));

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/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 }))] }));
 }