@cosmicdrift/kumiko-renderer 0.374.0 → 0.377.0

package/dist/web/index.d.ts

@@ -0,0 +1,78 @@
+export type { AppPrimitives, AppSchema, AppTokens, BannerProps, ButtonProps, CardProps, ColorTokens, CorePrimitives, CoreTokens, DataTableProps, DispatcherProviderProps, FeatureSchema, FieldProps, FontTokens, FormProps, GridCellProps, GridProps, HeadingProps, InputProps, KumikoScreenProps, LiveEvent, LiveEventSubscriber, LiveEventsProviderProps, LocaleProviderProps, NavApi, NavProviderProps, NavRoute, NavTarget, PrimitivesProviderProps, PrimitivesRegistry, RadiusTokens, RenderEditChangeState, RenderEditControls, RenderEditProps, RenderFieldProps, RenderListProps, SectionProps, ShadowTokens, SpacingTokens, TextProps, ThemeMode, ThemePreference, Tokens, TokensApi, TokensProviderProps, TranslationBundle, TranslationsByLocale, UseFormOptions, UseFormResult, UseQueryOptions, UseQueryResult, UserRolesProviderProps, WorkspaceSchema, } from "../index.ts";
+export { createStaticLocaleResolver, cssVarTokens, DispatcherProvider, formatPath, KumikoScreen, LiveEventsProvider, LocaleProvider, NavProvider, PrimitivesProvider, parsePath, qualifyScreenId, RenderEdit, RenderField, RenderList, synthesizeActionFormEntity, synthesizeActionFormScreen, TokensProvider, UserRolesProvider, useDispatcher, useDispatcherStatus, useForm, useLiveEvents, useLocale, useNav, usePrimitives, useQuery, useStore, useStoreSelector, useTokenController, useTokens, useTranslation, useUserRoles, } from "../index.ts";
+export { BROWSER_LOCALE_STORAGE_KEY, type CreateBrowserLocaleResolverOptions, createBrowserLocaleResolver, } from "./app/browser-locale.ts";
+export type { ClientFeatureDefinition } from "./app/client-plugin.tsx";
+export type { CreateKumikoAppOptions } from "./app/create-app.tsx";
+export { createKumikoApp } from "./app/create-app.tsx";
+export type { CreatePublicSurfaceOptions, PublicRoute } from "./app/create-public-surface.tsx";
+export { createPublicSurface } from "./app/create-public-surface.tsx";
+export type { CreateBrowserDraftStorageOptions } from "./app/draft-storage.ts";
+export { createBrowserDraftStorage } from "./app/draft-storage.ts";
+export type { KumikoLinkProps } from "./app/nav.tsx";
+export { KumikoLink, useBrowserNavApi } from "./app/nav.tsx";
+export { PlainContentEditor } from "./app/plain-content-editor.tsx";
+export { useResolvers } from "./app/resolvers-context.tsx";
+export { RichContentEditor } from "./app/rich-content-editor.tsx";
+export type { NavIconKey } from "./icons.tsx";
+export { Icon } from "./icons.tsx";
+export type { AppLayoutProps } from "./layout/app-layout.tsx";
+export { AppLayout } from "./layout/app-layout.tsx";
+export type { AvatarProps, AvatarSize } from "./layout/avatar.tsx";
+export { Avatar } from "./layout/avatar.tsx";
+export type { DefaultAppShellProps } from "./layout/default-app-shell.tsx";
+export { DefaultAppShell } from "./layout/default-app-shell.tsx";
+export type { EditorPanelProps, ResolverComponent } from "./layout/editor-panel.tsx";
+export { EditorPanel } from "./layout/editor-panel.tsx";
+export type { NavReparentOverride } from "./layout/filter-app-schema-navs.ts";
+export { filterAppSchemaNavsByAllowlist, reparentAppSchemaNavs, } from "./layout/filter-app-schema-navs.ts";
+export type { HeaderActionGroupProps } from "./layout/header-action-group.tsx";
+export { HeaderActionGroup } from "./layout/header-action-group.tsx";
+export type { LanguageMenuItemsProps } from "./layout/language-menu-items.tsx";
+export { LanguageMenuItems } from "./layout/language-menu-items.tsx";
+export type { LanguageSwitcherProps, LocaleOption } from "./layout/language-switcher.tsx";
+export { LanguageSwitcher } from "./layout/language-switcher.tsx";
+export type { NavTreeProps } from "./layout/nav-tree.tsx";
+export { buildNavRegistrySlice, buildNavRegistrySliceForApp, NavTree } from "./layout/nav-tree.tsx";
+export type { ProfileMenuItem, ProfileMenuProps } from "./layout/profile-menu.tsx";
+export { ProfileMenu } from "./layout/profile-menu.tsx";
+export type { SidebarProps } from "./layout/sidebar.tsx";
+export { Sidebar } from "./layout/sidebar.tsx";
+export type { SidebarBrandProps } from "./layout/sidebar-brand.tsx";
+export { SidebarBrand } from "./layout/sidebar-brand.tsx";
+export { SidebarPanel } from "./layout/sidebar-panel.tsx";
+export type { SidebarUserProps } from "./layout/sidebar-user.tsx";
+export { SidebarUser } from "./layout/sidebar-user.tsx";
+export { parseTargetFromSearchParams } from "./layout/target-url.ts";
+export type { ThemeMenuItemProps } from "./layout/theme-menu-item.tsx";
+export { ThemeMenuItem } from "./layout/theme-menu-item.tsx";
+export type { ThemeToggleProps } from "./layout/theme-toggle.tsx";
+export { ThemeToggle } from "./layout/theme-toggle.tsx";
+export type { TopbarProps } from "./layout/topbar.tsx";
+export { Topbar } from "./layout/topbar.tsx";
+export type { WorkspaceShellProps, WorkspaceShellUser } from "./layout/workspace-shell.tsx";
+export { filterByAccess, resolveDefaultId, WorkspaceShell } from "./layout/workspace-shell.tsx";
+export type { WorkspaceSwitcherProps } from "./layout/workspace-switcher.tsx";
+export { WorkspaceSwitcher } from "./layout/workspace-switcher.tsx";
+export { cn } from "./lib/cn.ts";
+export { postWithDownload } from "./lib/download.ts";
+export { downloadFileRef, FileDownloadFailedError, fetchFileRefBlob, fileNameFromContentDisposition, saveBlobAsFile, } from "./lib/file-ref-download.ts";
+export { buildFileUploadFormData } from "./lib/file-upload-form-data.ts";
+export { type FileRefTarget, FileUploadFailedError, uploadFileRef } from "./lib/upload-file-ref.ts";
+export type { ActionMenuProps, MenuItemDef } from "./primitives/action-menu.tsx";
+export { ActionMenu } from "./primitives/action-menu.tsx";
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuTrigger, } from "./primitives/dropdown-menu.tsx";
+export { BareFormProvider, DefaultCard as Card, defaultPrimitives, FormScreenShell, ScreenWidthProvider, } from "./primitives/index.tsx";
+export { PageSection, Stack } from "./primitives/layout.tsx";
+export { formatMoney } from "./primitives/money-input.tsx";
+export type { ToastOptions, ToastProviderProps, ToastVariant } from "./primitives/toast.tsx";
+export { ToastProvider, useToast } from "./primitives/toast.tsx";
+export { useIsNarrowViewport, useIsViewportBelow } from "./primitives/use-narrow-viewport.ts";
+export type { CreateEventSourceLiveEventsOptions } from "./sse/live-events.ts";
+export { createEventSourceLiveEvents } from "./sse/live-events.ts";
+export { applyTokensToCssVars, defaultTokens, lightTokens, useBrowserTokensApi, } from "./tokens.ts";
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./ui/resizable.tsx";
+export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar.tsx";
+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, 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, 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

@@ -0,0 +1,53 @@
+// Public entry of @cosmicdrift/kumiko-renderer/web. Re-exports the shared API
+// of the renderer root so samples import one entry, and adds the web-specific
+// helpers: createKumikoApp (react-dom bootstrap), defaultPrimitives (HTML),
+// useBrowserNavApi (window.history), createEventSourceLiveEvents, KumikoLink.
+export { createStaticLocaleResolver, cssVarTokens, DispatcherProvider, formatPath, KumikoScreen, LiveEventsProvider, LocaleProvider, NavProvider, PrimitivesProvider, parsePath, qualifyScreenId, RenderEdit, RenderField, RenderList, synthesizeActionFormEntity, synthesizeActionFormScreen, TokensProvider, UserRolesProvider, useDispatcher, useDispatcherStatus, useForm, useLiveEvents, useLocale, useNav, usePrimitives, useQuery, useStore, useStoreSelector, useTokenController, useTokens, useTranslation, useUserRoles, } from "../index.js";
+// --- Web-platform specifics ---
+export { BROWSER_LOCALE_STORAGE_KEY, createBrowserLocaleResolver, } from "./app/browser-locale.js";
+export { createKumikoApp } from "./app/create-app.js";
+export { createPublicSurface } from "./app/create-public-surface.js";
+export { createBrowserDraftStorage } from "./app/draft-storage.js";
+export { KumikoLink, useBrowserNavApi } from "./app/nav.js";
+export { PlainContentEditor } from "./app/plain-content-editor.js";
+export { useResolvers } from "./app/resolvers-context.js";
+export { RichContentEditor } from "./app/rich-content-editor.js";
+export { Icon } from "./icons.js";
+export { AppLayout } from "./layout/app-layout.js";
+export { Avatar } from "./layout/avatar.js";
+export { DefaultAppShell } from "./layout/default-app-shell.js";
+export { EditorPanel } from "./layout/editor-panel.js";
+export { filterAppSchemaNavsByAllowlist, reparentAppSchemaNavs, } from "./layout/filter-app-schema-navs.js";
+export { HeaderActionGroup } from "./layout/header-action-group.js";
+export { LanguageMenuItems } from "./layout/language-menu-items.js";
+export { LanguageSwitcher } from "./layout/language-switcher.js";
+export { buildNavRegistrySlice, buildNavRegistrySliceForApp, NavTree } from "./layout/nav-tree.js";
+export { ProfileMenu } from "./layout/profile-menu.js";
+export { Sidebar } from "./layout/sidebar.js";
+export { SidebarBrand } from "./layout/sidebar-brand.js";
+export { SidebarPanel } from "./layout/sidebar-panel.js";
+export { SidebarUser } from "./layout/sidebar-user.js";
+export { parseTargetFromSearchParams } from "./layout/target-url.js";
+export { ThemeMenuItem } from "./layout/theme-menu-item.js";
+export { ThemeToggle } from "./layout/theme-toggle.js";
+export { Topbar } from "./layout/topbar.js";
+export { filterByAccess, resolveDefaultId, WorkspaceShell } from "./layout/workspace-shell.js";
+export { WorkspaceSwitcher } from "./layout/workspace-switcher.js";
+export { cn } from "./lib/cn.js";
+export { postWithDownload } from "./lib/download.js";
+export { downloadFileRef, FileDownloadFailedError, fetchFileRefBlob, fileNameFromContentDisposition, saveBlobAsFile, } from "./lib/file-ref-download.js";
+export { buildFileUploadFormData } from "./lib/file-upload-form-data.js";
+export { FileUploadFailedError, uploadFileRef } from "./lib/upload-file-ref.js";
+export { ActionMenu } from "./primitives/action-menu.js";
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuTrigger, } from "./primitives/dropdown-menu.js";
+export { BareFormProvider, DefaultCard as Card, defaultPrimitives, FormScreenShell, ScreenWidthProvider, } from "./primitives/index.js";
+export { PageSection, Stack } from "./primitives/layout.js";
+export { formatMoney } from "./primitives/money-input.js";
+export { ToastProvider, useToast } from "./primitives/toast.js";
+export { useIsNarrowViewport, useIsViewportBelow } from "./primitives/use-narrow-viewport.js";
+export { createEventSourceLiveEvents } from "./sse/live-events.js";
+export { applyTokensToCssVars, defaultTokens, lightTokens, useBrowserTokensApi, } from "./tokens.js";
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./ui/resizable.js";
+export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar.js";
+export { readLoadedBuild } from "./version/update-checker.js";
+export { AiTextArea, AiTextField, BooleanField, CollapsibleSection, ComparisonTable, DateField, DetailList, Drawer, EmptyState, ErrorState, FeedList, FileField, FloatingPanel, InfinityList, LoadingState, MiniStat, ModeSwitch, MoneyField, NumberField, PercentField, PhotoSlots, PlanCard, PlanGrid, ProgressBar, ProgressList, PublicShell, QueryTable, RangeField, ResultPanel, ResultTable, SectionCard, SelectField, SideBySideTable, Sparkline, STATUS_TONE_TEXT, StatCard, StatusBadge, StatusBarChart, StepBar, smoothPath, TextareaField, TextField, TimeseriesChart, UploadZone, useDraft, } from "./widgets/index.js";

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+export type AppLayoutProps = {
+    /** Optional. Lebt nur über dem Main-Bereich, nicht über der 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. */
+    readonly fill?: boolean;
+    /** Optionaler Klassen-Append an die Wurzel (eigener Hintergrund etc.).
+     *  Erweitert die Defaults, ersetzt sie nicht (cn-merge). */
+    readonly className?: string;
+    /** Optionaler Klassen-Append an `<main>`. */
+    readonly mainClassName?: string;
+};
+export declare function AppLayout({ topbar, sidebar, children, testId, fill, className, mainClassName, }: AppLayoutProps): ReactNode;

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

@@ -0,0 +1,8 @@
+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.
+        "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

@@ -0,0 +1,12 @@
+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. */
+    readonly id: string;
+    /** Voller Name oder Email — Initials werden daraus extrahiert. */
+    readonly label: string;
+    readonly size?: AvatarSize;
+    readonly testId?: string;
+};
+export declare function Avatar({ id, label, size, testId }: AvatarProps): ReactNode;

package/dist/web/layout/avatar.js

@@ -0,0 +1,63 @@
+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.
+//
+// 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.
+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).
+const COLOR_CLASSES = [
+    "bg-rose-600 text-rose-50",
+    "bg-orange-600 text-orange-50",
+    "bg-amber-600 text-amber-50",
+    "bg-emerald-600 text-emerald-50",
+    "bg-teal-600 text-teal-50",
+    "bg-sky-600 text-sky-50",
+    "bg-indigo-600 text-indigo-50",
+    "bg-fuchsia-600 text-fuchsia-50",
+];
+const SIZE_CLASSES = {
+    sm: "size-5 text-[10px]",
+    md: "size-6 text-[11px]",
+    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.
+    let hash = 5381;
+    for (let i = 0; i < str.length; i++) {
+        hash = ((hash << 5) + hash + str.charCodeAt(i)) >>> 0;
+    }
+    return hash;
+}
+function pickColor(id) {
+    const idx = hashCode(id) % COLOR_CLASSES.length;
+    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
+    // upper-case.
+    const trimmed = label.trim();
+    if (trimmed.length === 0)
+        return "?";
+    const parts = trimmed.split(/\s+/);
+    if (parts.length >= 2) {
+        return `${(parts[0]?.[0] ?? "").toUpperCase()}${(parts[1]?.[0] ?? "").toUpperCase()}`;
+    }
+    return trimmed.slice(0, 2).toUpperCase();
+}
+export function Avatar({ id, label, size = "md", testId }) {
+    const colorClass = useMemo(() => pickColor(id), [id]);
+    const initials = useMemo(() => extractInitials(label), [label]);
+    return (_jsx("span", { "data-testid": testId, role: "img", "aria-label": label, className: cn("inline-flex items-center justify-center rounded font-semibold uppercase select-none", SIZE_CLASSES[size], colorClass), children: initials }));
+}

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

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import { type AppSchema, type FeatureSchema } from "../../index.ts";
+export type DefaultAppShellUser = {
+    readonly id: string;
+    readonly roles: readonly string[];
+};
+export type DefaultAppShellProps = {
+    /** Header-Slot oben in der Sidebar — Workspace-Identity (Logo, Name,
+     *  Plan-Tag). Caller liefert frei. */
+    readonly brand: ReactNode;
+    /** Schema (AppSchema oder legacy FeatureSchema) wird an NavTree
+     *  durchgereicht; Sidebar-Einträge bauen sich automatisch aus
+     *  schema.navs (per-Feature) auf. */
+    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). */
+    readonly user?: DefaultAppShellUser;
+    /** Icon-Row zwischen Brand und NavTree — typisch Search-Trigger,
+     *  ThemeToggle, 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. */
+    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. */
+    readonly headerActions?: ReactNode;
+    /** Footer-Slot unten in der Sidebar — Profile-Row, Help-Link,
+     *  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. */
+    readonly fill?: boolean;
+    /** Screen-Content der im SidebarInset gerendert wird. */
+    readonly children: ReactNode;
+};
+export declare function DefaultAppShell({ brand, schema, user, sidebarActions, headerActions, navBadges, sidebarFooter, fill, children, }: DefaultAppShellProps): ReactNode;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UserRolesProvider, useTranslation, } from "../../index.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarInset, SidebarProvider, SidebarRail, } from "../ui/sidebar.js";
+import { fillClasses } from "./fill-classes.js";
+import { NavTree } from "./nav-tree.js";
+import { PageHeaderSlotProvider } from "./page-header-slot.js";
+import { ShellHeader } from "./shell-header.js";
+import { SidebarPanelProvider, useSidebarPanelHost } from "./sidebar-panel.js";
+export function DefaultAppShell({ brand, schema, user, sidebarActions, headerActions, navBadges, sidebarFooter, fill = true, children, }) {
+    const fillCls = fillClasses(fill);
+    const t = useTranslation();
+    // Second column only when a screen fills it (sidebar-09 pattern) — otherwise
+    // every other screen would carry an empty strip next to the navigation.
+    const panel = useSidebarPanelHost();
+    return (_jsx(SidebarProvider, { ...fillCls.provider, children: _jsxs(SidebarPanelProvider, { value: panel.value, children: [_jsxs(Sidebar, { collapsible: "icon", mobileTitle: t("kumiko.sidebar.title"), mobileDescription: t("kumiko.sidebar.description"), children: [_jsx(SidebarHeader, { "data-kumiko-layout": "sidebar-header", children: brand }), sidebarActions !== undefined && (_jsx(SidebarGroup, { "data-kumiko-layout": "sidebar-actions", className: "flex-row flex-wrap items-center gap-1 py-0", children: sidebarActions })), _jsx(SidebarContent, { "data-kumiko-layout": "sidebar-nav", children: _jsx(NavTree, { schema: schema, ...(user !== undefined && { user }), ...(navBadges !== undefined && { navBadges }) }) }), sidebarFooter !== undefined && (_jsx(SidebarFooter, { "data-kumiko-layout": "sidebar-footer", className: "border-t border-sidebar-border", children: sidebarFooter })), _jsx(SidebarRail, { "aria-label": t("kumiko.sidebar.toggle"), title: t("kumiko.sidebar.toggle") })] }), _jsx("div", { ref: panel.ref, "data-kumiko-layout": "sidebar-panel", className: panel.occupied ? "flex h-svh shrink-0 flex-col" : "hidden" }), _jsx(SidebarInset, { className: fillCls.inset, children: _jsxs(PageHeaderSlotProvider, { children: [_jsx(ShellHeader, { schema: schema, ...(user !== undefined && { user }), ...(headerActions !== undefined && { headerActions }) }), _jsx("main", { className: fillCls.main, children: _jsx(UserRolesProvider, { roles: user?.roles, children: children }) })] }) })] }) }));
+}

package/dist/web/layout/editor-panel.d.ts

@@ -0,0 +1,10 @@
+import type { TargetRef } from "@cosmicdrift/kumiko-framework/engine";
+import type { ComponentType, ReactNode } from "react";
+export type ResolverComponent = ComponentType<{
+    readonly target: TargetRef;
+    readonly onClose: () => void;
+}>;
+export type EditorPanelProps = {
+    readonly resolvers: ReadonlyMap<string, ResolverComponent>;
+};
+export declare function EditorPanel({ resolvers }: EditorPanelProps): ReactNode;

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useCallback, useMemo } from "react";
+import { useNav, usePrimitives, useTranslation } from "../../index.js";
+import { clearTargetSearchParams, parseTargetFromSearchParams } from "./target-url.js";
+function EditorPanelInner({ target, resolvers, onClose, }) {
+    const { JsonView } = usePrimitives();
+    const t = useTranslation();
+    const resolverKey = `${target.featureId}:${target.action}`;
+    const Resolver = resolvers.get(resolverKey);
+    if (Resolver !== undefined) {
+        return _jsx(Resolver, { target: target, onClose: onClose });
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-4 p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold", children: "Editor" }), _jsx("button", { type: "button", "aria-label": t("kumiko.dialog.close"), className: "p-1 hover:bg-accent rounded", onClick: onClose, children: _jsx(X, { className: "size-4" }) })] }), _jsxs("div", { className: "text-sm text-muted-foreground space-y-2", children: [_jsxs("p", { children: ["Kein Editor f\u00FCr", " ", _jsxs("code", { children: [target.featureId, ":", target.action] }), " ", "registriert."] }), JsonView !== undefined ? (_jsx(JsonView, { value: target.args })) : (_jsx("pre", { className: "bg-muted p-2 rounded text-xs overflow-auto", children: JSON.stringify(target.args, null, 2) }))] })] }));
+}
+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).
+    const target = useMemo(() => parseTargetFromSearchParams(nav.searchParams), [nav.searchParams]);
+    const handleClose = useCallback(() => {
+        nav.setSearchParams(clearTargetSearchParams(nav.searchParams));
+    }, [nav]);
+    return (_jsx("div", { "data-kumiko-layout": "editor-main", className: "flex-1 overflow-y-auto", children: target === undefined ? (_jsx(EditorEmptyState, {})) : (_jsx(EditorPanelInner, { target: target, resolvers: resolvers, onClose: handleClose })) }));
+}
+function EditorEmptyState() {
+    return (_jsx("div", { className: "flex h-full items-center justify-center p-8 text-sm text-muted-foreground", children: _jsx("p", { children: "W\u00E4hle einen Knoten links zum Bearbeiten." }) }));
+}

package/dist/web/layout/fill-classes.d.ts

@@ -0,0 +1,9 @@
+export declare const fillClasses: (fill?: boolean) => {
+    provider: {
+        className: string;
+    } | {
+        className?: undefined;
+    };
+    inset: string;
+    main: string;
+};

package/dist/web/layout/fill-classes.js

@@ -0,0 +1,15 @@
+// Shared `fill`-prop wiring for the sidebar-based app shells
+// (DefaultAppShell, WorkspaceShell) — both wrap the same vendored
+// shadcn sidebar and need identical viewport-fit classes.
+//
+// min-w-0 on the inset is unconditional (not fill-gated): vendored
+// SidebarInset is `flex-1` with no min-width override, so a flex row child
+// never shrinks below its content's intrinsic width by default. Wide screen
+// content (e.g. a table with many columns) then grows the inset — and with
+// it the whole sidebar row and the page — past the viewport instead of
+// scrolling inside the inset's own `main` (which already has overflow-auto).
+export const fillClasses = (fill) => ({
+    provider: fill === true ? { className: "h-svh" } : {},
+    inset: fill === true ? "min-h-0 min-w-0" : "min-w-0",
+    main: fill === true ? "min-h-0 flex-1 overflow-auto" : "flex-1 overflow-auto",
+});

package/dist/web/layout/filter-app-schema-navs.d.ts

@@ -0,0 +1,7 @@
+import type { AppSchema } from "../../index.ts";
+export type NavReparentOverride = {
+    readonly parent: string;
+    readonly order: number;
+};
+export declare function reparentAppSchemaNavs(schema: AppSchema, overrides: ReadonlyMap<string, NavReparentOverride>): AppSchema;
+export declare function filterAppSchemaNavsByAllowlist(schema: AppSchema, allowedNavQns: ReadonlySet<string>, reparentOverrides?: ReadonlyMap<string, NavReparentOverride>): AppSchema;

package/dist/web/layout/filter-app-schema-navs.js

@@ -0,0 +1,68 @@
+import { qualifyNavId } from "./nav-tree.js";
+// Rewrites parent/order of the navs named in `overrides` (keyed by the nav's
+// qualified QN), leaving every other nav and schema field untouched. This is
+// how an app moves a foreign, otherwise-unmodifiable nav (a bundled feature's
+// own entry, a settings-hub-synthesized one) into a group of its own: the
+// boot-validator only lets a feature re-parent navs it registered itself.
+export function reparentAppSchemaNavs(schema, overrides) {
+    if (overrides.size === 0)
+        return schema;
+    return {
+        ...schema,
+        features: schema.features.map((feature) => {
+            if (feature.navs === undefined)
+                return feature;
+            return {
+                ...feature,
+                navs: feature.navs.map((nav) => {
+                    const override = overrides.get(qualifyNavId(feature.featureName, nav.id));
+                    return override === undefined
+                        ? nav
+                        : { ...nav, parent: override.parent, order: override.order };
+                }),
+            };
+        }),
+    };
+}
+// Reduces every feature's `navs` to the app's sidebar allowlist, leaving
+// screens/entities/handlers/translations and every other schema field
+// untouched. Pure and defensive: a feature with no `navs` passes through
+// unchanged, and a feature whose every nav gets stripped ends up with an
+// empty `navs` array, never `undefined` turned into something broken.
+//
+// An allowed nav whose parent exists but is not on the allowlist (and which has
+// no reparent override) loses its `parent` and surfaces at the top level, the same
+// as with `allowedNavQns` in buildNavRegistrySliceForApp; without that,
+// dropNavsWithNonexistentParent would drop it silently.
+//
+// `reparentOverrides` re-parents the surviving navs (see reparentAppSchemaNavs).
+export function filterAppSchemaNavsByAllowlist(schema, allowedNavQns, reparentOverrides = new Map()) {
+    const existingNavQns = new Set(schema.features.flatMap((feature) => (feature.navs ?? []).map((nav) => qualifyNavId(feature.featureName, nav.id))));
+    const parentFilteredOut = (featureName, nav) => {
+        if (nav.parent === undefined)
+            return false;
+        const parentQn = qualifyNavId(featureName, nav.parent);
+        return existingNavQns.has(parentQn) && !allowedNavQns.has(parentQn);
+    };
+    const allowed = {
+        ...schema,
+        features: schema.features.map((feature) => {
+            if (feature.navs === undefined)
+                return feature;
+            return {
+                ...feature,
+                navs: feature.navs
+                    .filter((nav) => allowedNavQns.has(qualifyNavId(feature.featureName, nav.id)))
+                    .map((nav) => parentFilteredOut(feature.featureName, nav) &&
+                    !reparentOverrides.has(qualifyNavId(feature.featureName, nav.id))
+                    ? withoutParent(nav)
+                    : nav),
+            };
+        }),
+    };
+    return reparentAppSchemaNavs(allowed, reparentOverrides);
+}
+function withoutParent(nav) {
+    const { parent: _filteredOutParent, ...topLevelNav } = nav;
+    return topLevelNav;
+}

package/dist/web/layout/header-action-group.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+export type HeaderActionGroupProps = {
+    readonly children: ReactNode;
+    readonly className?: string;
+};
+export declare function HeaderActionGroup({ children, className }: HeaderActionGroupProps): ReactNode;

package/dist/web/layout/header-action-group.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { cn } from "../lib/cn.js";
+import { HeaderOverflowMenuContext } from "./header-overflow-menu.js";
+export function HeaderActionGroup({ children, className }) {
+    const inOverflowMenu = useContext(HeaderOverflowMenuContext);
+    return (_jsx("div", { className: cn(inOverflowMenu ? "flex flex-col items-stretch gap-1" : "flex items-center gap-2", className), children: children }));
+}

package/dist/web/layout/header-overflow-menu.d.ts

@@ -0,0 +1,4 @@
+/** True for nodes rendered inside the phone header overflow menu, so controls
+ *  like ThemeToggle can draw a labelled menu row instead of an icon button. */
+export declare const HeaderOverflowMenuContext: import("react").Context<boolean>;
+export declare const headerOverflowMenuItemClass: string;

package/dist/web/layout/header-overflow-menu.js

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+/** True for nodes rendered inside the phone header overflow menu, so controls
+ *  like ThemeToggle can draw a labelled menu row instead of an icon button. */
+export const HeaderOverflowMenuContext = createContext(false);
+// Mirrors the DropdownMenuItem look in primitives/dropdown-menu.tsx, with a 40px touch target.
+export const headerOverflowMenuItemClass = "relative flex min-h-10 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm " +
+    "outline-none transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground " +
+    "disabled:pointer-events-none disabled:opacity-50";

package/dist/web/layout/language-menu-items.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+import type { LocaleOption } from "./language-switcher.tsx";
+export type LanguageMenuItemsProps = {
+    readonly locales: readonly LocaleOption[];
+    readonly label?: string;
+};
+/** Locale choices as dropdown entries, for a user menu that carries the shell controls. */
+export declare function LanguageMenuItems({ locales, label }: LanguageMenuItemsProps): ReactNode;

package/dist/web/layout/language-menu-items.js

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useLocale, useTranslation } from "../../index.js";
+import { DropdownMenuCheckboxItem, DropdownMenuLabel, DropdownMenuSeparator, } from "../primitives/dropdown-menu.js";
+/** Locale choices as dropdown entries, for a user menu that carries the shell controls. */
+export function LanguageMenuItems({ locales, label }) {
+    const resolver = useLocale();
+    const t = useTranslation();
+    const activeLocale = resolver.locale();
+    const activeOption = useMemo(() => locales.find((o) => o.code === activeLocale) ??
+        locales.find((o) => o.code === activeLocale.split("-")[0]), [locales, activeLocale]);
+    const setLocale = resolver.setLocale;
+    if (setLocale === undefined)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(DropdownMenuLabel, { children: label ?? t("kumiko.nav.language") }), locales.map((option) => (_jsx(DropdownMenuCheckboxItem, { checked: option === activeOption, onSelect: () => setLocale(option.code), children: _jsx("span", { className: "truncate", children: option.label }) }, option.code))), _jsx(DropdownMenuSeparator, {})] }));
+}

package/dist/web/layout/language-switcher.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+export type LocaleOption = {
+    /** BCP-47 code, e.g. "de", "en-US", "fr-CA". Passed through 1:1 to
+     *  resolver.setLocale(). */
+    readonly code: string;
+    /** Human-readable label shown in the dropdown. */
+    readonly label: string;
+};
+export type LanguageSwitcherProps = {
+    /** Selectable locales. Order = display order in the menu. */
+    readonly locales: readonly LocaleOption[];
+    /** Icon slot left of the button label. Default: 🌐. */
+    readonly icon?: ReactNode;
+    /** aria-label + title of the trigger. Default: translated "kumiko.nav.language". */
+    readonly label?: string;
+    /** What the trigger shows next to the icon: the uppercase code (default), the active
+     *  locale's label, or the icon only. aria-label/title are unaffected. */
+    readonly triggerContent?: "code" | "label" | "icon-only";
+    /** `default`: icon plus code/label button. `chip`: compact monospace chip with
+     *  the uppercase code in a border; `icon` and `triggerContent` are ignored. */
+    readonly variant?: "default" | "chip";
+    readonly testId?: string;
+};
+export declare const LANDMARK_SELECTOR = "header, footer, nav, main, aside, section[aria-label], section[aria-labelledby], [role='banner'], [role='contentinfo'], [role='navigation'], [role='main'], [role='complementary'], [role='region']";
+export declare function LanguageSwitcher({ locales, icon, label, triggerContent, variant, testId, }: LanguageSwitcherProps): ReactNode;

package/dist/web/layout/language-switcher.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// LanguageSwitcher — dropdown that switches the app locale via
+// LocaleResolver.setLocale. Built on Radix DropdownMenu, same stack
+// as UserMenu/TenantSwitcher.
+//
+// Renders nothing if the resolver doesn't offer a setLocale method
+// (static resolver) — the app dev then immediately sees they need to
+// wire up a stateful resolver before the switcher becomes visible in
+// the UI.
+//
+// Icon slot is optional: the framework doesn't pull in lucide-react
+// itself; an app that doesn't want an icon import gets the globe
+// unicode glyph (🌐) as default.
+import { useMemo, useState } from "react";
+import { useLocale, useTranslation } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, } from "../primitives/dropdown-menu.js";
+export const LANDMARK_SELECTOR = "header, footer, nav, main, aside, section[aria-label], section[aria-labelledby], [role='banner'], [role='contentinfo'], [role='navigation'], [role='main'], [role='complementary'], [role='region']";
+export function LanguageSwitcher({ locales, icon = "🌐", label, triggerContent = "code", variant = "default", testId, }) {
+    const resolver = useLocale();
+    const t = useTranslation();
+    const resolvedLabel = label ?? t("kumiko.nav.language");
+    // Portal into the surrounding landmark: content under document.body would sit outside every
+    // landmark and fail axe's "region" rule.
+    const [trigger, setTrigger] = useState(null);
+    const landmark = trigger?.closest(LANDMARK_SELECTOR);
+    const activeLocale = resolver.locale();
+    // Matches either exact ("de-DE") or the language root ("de") against
+    // the available options. So the switcher shows "German" active when
+    // the browser reports "de-AT" but the option is just "de".
+    const activeOption = useMemo(() => {
+        const exact = locales.find((o) => o.code === activeLocale);
+        if (exact)
+            return exact;
+        const root = activeLocale.split("-")[0];
+        return locales.find((o) => o.code === root);
+    }, [locales, activeLocale]);
+    if (resolver.setLocale === undefined) {
+        // Stateless resolver → no switching possible. No noise in the topbar.
+        return null;
+    }
+    const setLocale = resolver.setLocale;
+    return (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { ref: setTrigger, type: "button", "aria-label": resolvedLabel, title: resolvedLabel, "data-testid": testId, className: cn("inline-flex items-center border bg-background", "hover:bg-accent hover:text-accent-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", variant === "chip"
+                        ? "h-7 rounded-md px-2 font-mono text-xs text-foreground"
+                        : "h-8 gap-1.5 rounded-md px-2 text-sm"), children: [variant === "chip" && (activeOption?.code ?? activeLocale.slice(0, 2)).toUpperCase(), variant === "default" && _jsx("span", { "aria-hidden": "true", children: icon }), variant === "default" && triggerContent === "label" && (_jsx("span", { className: "text-xs text-muted-foreground", children: activeOption?.label ?? activeLocale.slice(0, 2) })), variant === "default" && triggerContent === "code" && (_jsx("span", { className: "uppercase text-xs text-muted-foreground", children: activeOption?.code ?? activeLocale.slice(0, 2) }))] }) }), _jsx(DropdownMenuContent, { align: "end", className: "min-w-[10rem]", "aria-label": resolvedLabel, portalContainer: landmark instanceof HTMLElement ? landmark : undefined, children: locales.map((opt) => (_jsx(DropdownMenuCheckboxItem, { checked: opt === activeOption, onSelect: () => setLocale(opt.code), children: _jsx("span", { className: "truncate", children: opt.label }) }, opt.code))) })] }));
+}

package/dist/web/layout/nav-tree.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+import type { NavRegistrySlice } from "../../headless/index.ts";
+import type { AppSchema, FeatureSchema } from "../../index.ts";
+import { lastSegment } from "../../index.ts";
+export type NavTreeProps = {
+    readonly schema: AppSchema | FeatureSchema;
+    readonly user?: {
+        readonly id: string;
+        readonly roles: readonly string[];
+    };
+    readonly testId?: string;
+    readonly allowedNavQns?: ReadonlySet<string>;
+    readonly navBadges?: ReadonlyMap<string, ReactNode>;
+};
+export declare function NavTree({ schema, user, testId, allowedNavQns, navBadges, }: NavTreeProps): ReactNode;
+export declare function buildNavRegistrySlice(schema: FeatureSchema, allowedNavQns?: ReadonlySet<string>): NavRegistrySlice;
+export declare function buildNavRegistrySliceForApp(app: AppSchema, allowedNavQns?: ReadonlySet<string>): NavRegistrySlice;
+export declare function qualifyNavId(feature: string, id: string): string;
+export { lastSegment };