@zvk/composite 0.1.2 → 0.1.4

package/dist/navigation/resource-explorer-shell.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export interface ResourceExplorerShellResource {
+    badge?: React.ReactNode | undefined;
+    children?: readonly ResourceExplorerShellResource[] | undefined;
+    description?: React.ReactNode | undefined;
+    disabled?: boolean | undefined;
+    icon?: React.ReactNode | undefined;
+    id: string;
+    label: React.ReactNode;
+    meta?: React.ReactNode | undefined;
+    textValue: string;
+}
+export interface ResourceExplorerShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    activeKey?: string | undefined;
+    empty?: React.ReactNode | undefined;
+    expandedKeys?: readonly string[] | undefined;
+    footer?: React.ReactNode | undefined;
+    label: string;
+    loading?: boolean | undefined;
+    onExpandedKeysChange?: ((keys: string[]) => void) | undefined;
+    onItemAction?: ((id: string, item: ResourceExplorerShellResource) => void) | undefined;
+    onSelectedKeysChange?: ((keys: string[]) => void) | undefined;
+    preview?: React.ReactNode | undefined;
+    ref?: React.Ref<HTMLDivElement> | undefined;
+    resultItems?: readonly ResourceExplorerShellResource[] | undefined;
+    search?: React.ReactNode | undefined;
+    selectedKeys?: readonly string[] | undefined;
+    toolbar?: React.ReactNode | undefined;
+    treeItems: readonly ResourceExplorerShellResource[];
+}
+export declare function ResourceExplorerShell({ activeKey, className, empty, expandedKeys, footer, label, loading, onExpandedKeysChange, onItemAction, onSelectedKeysChange, preview, ref, resultItems, search, selectedKeys, toolbar, treeItems, ...props }: ResourceExplorerShellProps): React.JSX.Element;

package/dist/navigation/resource-explorer-shell.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { GridList } from "@zvk/ui/grid-list";
+import { ListRow } from "@zvk/ui/list-row";
+import { TreeView } from "@zvk/ui/tree-view";
+import { cn } from "../utils/cn.js";
+function renderResourceRow(item, selected) {
+    return (_jsxs(ListRow, { selected: selected, variant: "plain", children: [item.icon ? _jsx(ListRow.Leading, { children: item.icon }) : null, _jsxs(ListRow.Content, { children: [_jsx(ListRow.Title, { children: item.label }), item.description ? _jsx(ListRow.Description, { children: item.description }) : null] }), item.meta ? _jsx(ListRow.Meta, { children: item.meta }) : null, item.badge ? _jsx(ListRow.Trailing, { children: item.badge }) : null] }));
+}
+export function ResourceExplorerShell({ activeKey, className, empty = "No resources found.", expandedKeys, footer, label, loading = false, onExpandedKeysChange, onItemAction, onSelectedKeysChange, preview, ref, resultItems, search, selectedKeys, toolbar, treeItems, ...props }) {
+    const records = resultItems ?? treeItems;
+    const selectedProps = {
+        ...(selectedKeys === undefined ? {} : { selectedKeys }),
+        ...(onSelectedKeysChange === undefined ? {} : { onSelectedKeysChange })
+    };
+    const treeProps = {
+        ...(activeKey === undefined ? {} : { activeKey }),
+        ...(expandedKeys === undefined ? { defaultExpandedKeys: treeItems.slice(0, 1).map((item) => item.id) } : {}),
+        ...(expandedKeys === undefined ? {} : { expandedKeys }),
+        ...(onExpandedKeysChange === undefined ? {} : { onExpandedKeysChange }),
+        ...(onItemAction === undefined ? {} : { onItemAction }),
+        ...selectedProps
+    };
+    const gridProps = {
+        ...(onItemAction === undefined ? {} : { onAction: onItemAction }),
+        ...selectedProps
+    };
+    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-composite-resource-explorer-shell", className), "data-with-preview": preview ? "true" : undefined, children: [_jsxs("aside", { className: "zvk-composite-resource-explorer-shell__tree", children: [_jsx("div", { className: "zvk-composite-resource-explorer-shell__tree-header", children: _jsx("strong", { children: label }) }), search ? _jsx("div", { className: "zvk-composite-resource-explorer-shell__search", children: search }) : null, _jsx(TreeView, { ...treeProps, "aria-label": `${label} tree`, getItemChildren: (item) => item.children, getItemId: (item) => item.id, getItemLabel: (item) => item.textValue, isItemDisabled: (item) => item.disabled === true, items: treeItems, renderItem: (item) => (_jsxs("span", { className: "zvk-composite-resource-explorer-shell__tree-item", children: [item.icon ? _jsx("span", { className: "zvk-composite-resource-explorer-shell__tree-item-icon", children: item.icon }) : null, _jsx("span", { children: item.label })] })), selectionMode: "single" }), footer ? _jsx("div", { className: "zvk-composite-resource-explorer-shell__footer", children: footer }) : null] }), _jsxs("section", { className: "zvk-composite-resource-explorer-shell__results", "aria-label": `${label} results`, children: [toolbar ? _jsx("div", { className: "zvk-composite-resource-explorer-shell__toolbar", children: toolbar }) : null, _jsx(GridList, { ...gridProps, "aria-label": `${label} resources`, emptyState: empty, getItemId: (item) => item.id, getItemTextValue: (item) => item.textValue, isItemDisabled: (item) => item.disabled === true, items: records, loading: loading, loadingState: "Loading resources...", renderItem: (item, state) => renderResourceRow(item, state.selected), selectionMode: "single" })] }), preview ? _jsx("aside", { className: "zvk-composite-resource-explorer-shell__preview", children: preview }) : null] }));
+}

package/dist/navigation/sectioned-workspace-shell.js

@@ -2,26 +2,33 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { SectionedSidebarNav } from "@zvk/ui/sectioned-sidebar-nav";
 import { cn } from "../utils/cn.js";
+import { hasRenderableShellSlot, ShellHeaderChrome } from "./shell-slot-rendering.js";
 import { WorkspaceHeader } from "./workspace-header.js";
 export function SectionedWorkspaceShell({ actions, activeItemId, children, className, description, footer, headingLevel, navLabel = "Workspace navigation", onItemSelect, ref, sections, sidebarFooter, title, toolbar, ...props }) {
-    const hasHeader = Boolean(title || description || actions || toolbar);
+    const hasActions = hasRenderableShellSlot(actions);
+    const hasDescription = hasRenderableShellSlot(description);
+    const hasFooter = hasRenderableShellSlot(footer);
+    const hasSidebarFooter = hasRenderableShellSlot(sidebarFooter);
+    const hasTitle = hasRenderableShellSlot(title);
+    const hasToolbar = hasRenderableShellSlot(toolbar);
+    const hasHeader = hasTitle || hasDescription || hasActions || hasToolbar;
     const navigationProps = {
         ...(activeItemId === undefined ? {} : { activeItemId }),
         ...(onItemSelect === undefined ? {} : { onItemSelect })
     };
     const headerProps = {
-        ...(actions === undefined ? {} : { actions }),
-        ...(description === undefined ? {} : { description }),
+        ...(hasActions ? { actions } : {}),
+        ...(hasDescription ? { description } : {}),
         ...(headingLevel === undefined ? {} : { headingLevel }),
-        ...(toolbar === undefined ? {} : { toolbar })
+        ...(hasToolbar ? { toolbar } : {})
     };
-    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-composite-sectioned-workspace-shell", className), children: [_jsxs("aside", { className: "zvk-composite-sectioned-workspace-shell__sidebar", children: [_jsx(SectionedWorkspaceNavigation, { ...navigationProps, navLabel: navLabel, sections: sections }), sidebarFooter ? (_jsx("div", { className: "zvk-composite-sectioned-workspace-shell__sidebar-footer", children: sidebarFooter })) : null] }), _jsxs("div", { className: "zvk-composite-sectioned-workspace-shell__body", children: [hasHeader ? (_jsx(WorkspaceHeader, { ...headerProps, className: "zvk-composite-sectioned-workspace-shell__header", title: title ?? "" })) : null, _jsx("main", { className: "zvk-composite-sectioned-workspace-shell__content", children: children }), footer ? _jsx("footer", { className: "zvk-composite-sectioned-workspace-shell__footer", children: footer }) : null] })] }));
+    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-composite-sectioned-workspace-shell", className), children: [_jsxs("aside", { className: "zvk-composite-sectioned-workspace-shell__sidebar", children: [_jsx(SectionedWorkspaceNavigation, { ...navigationProps, navLabel: navLabel, sections: sections }), hasSidebarFooter ? (_jsx("div", { className: "zvk-composite-sectioned-workspace-shell__sidebar-footer", children: sidebarFooter })) : null] }), _jsxs("div", { className: "zvk-composite-sectioned-workspace-shell__body", children: [hasHeader && hasTitle ? (_jsx(WorkspaceHeader, { ...headerProps, className: "zvk-composite-sectioned-workspace-shell__header", title: title })) : hasHeader ? (_jsx(ShellHeaderChrome, { actions: actions, className: "zvk-composite-sectioned-workspace-shell__header", description: description, toolbar: toolbar })) : null, _jsx("main", { className: "zvk-composite-sectioned-workspace-shell__content", children: children }), hasFooter ? _jsx("footer", { className: "zvk-composite-sectioned-workspace-shell__footer", children: footer }) : null] })] }));
 }
 function SectionedWorkspaceNavigation({ activeItemId, navLabel, onItemSelect, sections }) {
     return (_jsx(SectionedSidebarNav, { className: "zvk-composite-sectioned-workspace-shell__nav", label: navLabel, children: sections.map((section) => (_jsxs(SectionedSidebarNav.Section, { children: [_jsx(SectionedSidebarNav.SectionTitle, { children: section.label }), _jsx(SectionedSidebarNav.List, { children: section.items.map((item) => (_jsx(SectionedWorkspaceNavigationItem, { active: item.id === activeItemId, item: item, onItemSelect: onItemSelect }, item.id))) })] }, section.id))) }));
 }
 function SectionedWorkspaceNavigationItem({ active, item, onItemSelect }) {
-    const content = (_jsxs("span", { className: "zvk-composite-sectioned-workspace-shell__nav-item-content", children: [_jsx("span", { className: "zvk-composite-sectioned-workspace-shell__nav-item-label", children: item.label }), item.description ? (_jsx("span", { className: "zvk-composite-sectioned-workspace-shell__nav-item-description", children: item.description })) : null] }));
+    const content = (_jsxs("span", { className: "zvk-composite-sectioned-workspace-shell__nav-item-content", children: [_jsx("span", { className: "zvk-composite-sectioned-workspace-shell__nav-item-label", children: item.label }), hasRenderableShellSlot(item.description) ? (_jsx("span", { className: "zvk-composite-sectioned-workspace-shell__nav-item-description", children: item.description })) : null] }));
     const handleSelect = () => onItemSelect?.(item.id);
     const itemProps = {
         ...(item.badge === undefined ? {} : { badge: item.badge }),

package/dist/navigation/shell-slot-rendering.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { WorkspaceHeaderAlign } from "./workspace-header.js";
+export declare function hasRenderableShellSlot(value: React.ReactNode): boolean;
+export interface ShellHeaderChromeProps {
+    actions?: React.ReactNode | undefined;
+    align?: WorkspaceHeaderAlign | undefined;
+    className?: string | undefined;
+    description?: React.ReactNode | undefined;
+    eyebrow?: React.ReactNode | undefined;
+    status?: React.ReactNode | undefined;
+    toolbar?: React.ReactNode | undefined;
+}
+export declare function ShellHeaderChrome({ actions, align, className, description, eyebrow, status, toolbar }: ShellHeaderChromeProps): React.JSX.Element | null;

package/dist/navigation/shell-slot-rendering.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+export function hasRenderableShellSlot(value) {
+    if (value === undefined || value === null || typeof value === "boolean") {
+        return false;
+    }
+    if (typeof value === "string") {
+        return value.trim().length > 0;
+    }
+    return true;
+}
+export function ShellHeaderChrome({ actions, align = "start", className, description, eyebrow, status, toolbar }) {
+    const hasActions = hasRenderableShellSlot(actions);
+    const hasDescription = hasRenderableShellSlot(description);
+    const hasEyebrow = hasRenderableShellSlot(eyebrow);
+    const hasStatus = hasRenderableShellSlot(status);
+    const hasToolbar = hasRenderableShellSlot(toolbar);
+    const hasContent = hasEyebrow || hasStatus || hasDescription;
+    const hasControls = hasToolbar || hasActions;
+    if (!hasContent && !hasControls) {
+        return null;
+    }
+    return (_jsxs("div", { className: cn("zvk-composite-workspace-header", className), "data-align": align, children: [hasContent ? (_jsxs("div", { className: "zvk-composite-workspace-header__content", children: [hasEyebrow || hasStatus ? (_jsxs("div", { className: "zvk-composite-workspace-header__kicker", children: [hasEyebrow ? _jsx("span", { className: "zvk-composite-workspace-header__eyebrow", children: eyebrow }) : null, hasStatus ? _jsx("span", { className: "zvk-composite-workspace-header__status", children: status }) : null] })) : null, hasDescription ? (_jsx("div", { className: "zvk-composite-workspace-header__body", children: _jsx("p", { className: "zvk-composite-workspace-header__description", children: description }) })) : null] })) : (_jsx("div", { className: "zvk-composite-workspace-header__content", "aria-hidden": "true" })), hasControls ? (_jsxs("div", { className: "zvk-composite-workspace-header__controls", children: [hasToolbar ? _jsx("div", { className: "zvk-composite-workspace-header__toolbar", children: toolbar }) : null, hasActions ? _jsx("div", { className: "zvk-composite-workspace-header__actions", children: actions }) : null] })) : null] }));
+}

package/dist/navigation/simple-workspace-shell.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { WorkspaceHeaderHeadingLevel } from "./workspace-header.js";
+export interface SimpleWorkspaceShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    actions?: React.ReactNode | undefined;
+    aside?: React.ReactNode | undefined;
+    children?: React.ReactNode | undefined;
+    description?: React.ReactNode | undefined;
+    footer?: React.ReactNode | undefined;
+    headingLevel?: WorkspaceHeaderHeadingLevel | undefined;
+    navigation?: React.ReactNode | undefined;
+    ref?: React.Ref<HTMLDivElement> | undefined;
+    status?: React.ReactNode | undefined;
+    title?: React.ReactNode | undefined;
+    toolbar?: React.ReactNode | undefined;
+}
+export declare function SimpleWorkspaceShell({ actions, aside, children, className, description, footer, headingLevel, navigation, ref, status, title, toolbar, ...props }: SimpleWorkspaceShellProps): React.JSX.Element;

package/dist/navigation/simple-workspace-shell.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+import { hasRenderableShellSlot, ShellHeaderChrome } from "./shell-slot-rendering.js";
+import { WorkspaceHeader } from "./workspace-header.js";
+export function SimpleWorkspaceShell({ actions, aside, children, className, description, footer, headingLevel, navigation, ref, status, title, toolbar, ...props }) {
+    const hasActions = hasRenderableShellSlot(actions);
+    const hasAside = hasRenderableShellSlot(aside);
+    const hasDescription = hasRenderableShellSlot(description);
+    const hasFooter = hasRenderableShellSlot(footer);
+    const hasNavigation = hasRenderableShellSlot(navigation);
+    const hasStatus = hasRenderableShellSlot(status);
+    const hasTitle = hasRenderableShellSlot(title);
+    const hasToolbar = hasRenderableShellSlot(toolbar);
+    const hasHeader = hasTitle || hasDescription || hasStatus || hasToolbar || hasActions;
+    const headerProps = {
+        ...(hasActions ? { actions } : {}),
+        ...(hasDescription ? { description } : {}),
+        ...(headingLevel === undefined ? {} : { headingLevel }),
+        ...(hasStatus ? { status } : {}),
+        ...(hasToolbar ? { toolbar } : {})
+    };
+    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-composite-simple-workspace-shell", className), "data-with-aside": hasAside ? "true" : undefined, "data-with-navigation": hasNavigation ? "true" : undefined, children: [hasNavigation ? (_jsx("nav", { className: "zvk-composite-simple-workspace-shell__navigation", "aria-label": "Workspace navigation", children: navigation })) : null, _jsxs("div", { className: "zvk-composite-simple-workspace-shell__body", children: [hasHeader && hasTitle ? (_jsx(WorkspaceHeader, { ...headerProps, className: "zvk-composite-simple-workspace-shell__header", title: title })) : hasHeader ? (_jsx(ShellHeaderChrome, { actions: actions, className: "zvk-composite-simple-workspace-shell__header", description: description, status: status, toolbar: toolbar })) : null, _jsxs("div", { className: "zvk-composite-simple-workspace-shell__grid", children: [_jsx("main", { className: "zvk-composite-simple-workspace-shell__main", children: children }), hasAside ? _jsx("aside", { className: "zvk-composite-simple-workspace-shell__aside", children: aside }) : null] }), hasFooter ? (_jsx("footer", { className: "zvk-composite-simple-workspace-shell__footer", children: footer })) : null] })] }));
+}

package/dist/navigation/split-workspace-shell.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import type { SplitterValue } from "@zvk/ui/splitter";
+import type { WorkspaceHeaderHeadingLevel } from "./workspace-header.js";
+export interface SplitWorkspaceShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "title"> {
+    actions?: React.ReactNode | undefined;
+    collapsiblePrimary?: boolean | undefined;
+    defaultValue?: SplitterValue | undefined;
+    description?: React.ReactNode | undefined;
+    footer?: React.ReactNode | undefined;
+    headingLevel?: WorkspaceHeaderHeadingLevel | undefined;
+    maxPrimarySize?: number | undefined;
+    minPrimarySize?: number | undefined;
+    onResizeEnd?: ((value: SplitterValue) => void) | undefined;
+    onValueChange?: ((value: SplitterValue) => void) | undefined;
+    primary: React.ReactNode;
+    primaryLabel?: string | undefined;
+    ref?: React.Ref<HTMLDivElement> | undefined;
+    secondary: React.ReactNode;
+    secondaryLabel?: string | undefined;
+    title?: React.ReactNode | undefined;
+    toolbar?: React.ReactNode | undefined;
+    value?: SplitterValue | undefined;
+}
+export declare function SplitWorkspaceShell({ actions, className, collapsiblePrimary, defaultValue, description, footer, headingLevel, maxPrimarySize, minPrimarySize, onResizeEnd, onValueChange, primary, primaryLabel, ref, secondary, secondaryLabel, title, toolbar, value, ...props }: SplitWorkspaceShellProps): React.JSX.Element;

package/dist/navigation/split-workspace-shell.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Splitter } from "@zvk/ui/splitter";
+import { cn } from "../utils/cn.js";
+import { hasRenderableShellSlot, ShellHeaderChrome } from "./shell-slot-rendering.js";
+import { WorkspaceHeader } from "./workspace-header.js";
+export function SplitWorkspaceShell({ actions, className, collapsiblePrimary = false, defaultValue = [32, 68], description, footer, headingLevel, maxPrimarySize, minPrimarySize = 18, onResizeEnd, onValueChange, primary, primaryLabel = "Primary workspace pane", ref, secondary, secondaryLabel = "Secondary workspace pane", title, toolbar, value, ...props }) {
+    const hasActions = hasRenderableShellSlot(actions);
+    const hasDescription = hasRenderableShellSlot(description);
+    const hasFooter = hasRenderableShellSlot(footer);
+    const hasTitle = hasRenderableShellSlot(title);
+    const hasToolbar = hasRenderableShellSlot(toolbar);
+    const hasHeader = hasTitle || hasDescription || hasToolbar || hasActions;
+    const splitterProps = {
+        defaultValue,
+        ...(onResizeEnd === undefined ? {} : { onResizeEnd }),
+        ...(onValueChange === undefined ? {} : { onValueChange }),
+        ...(value === undefined ? {} : { value })
+    };
+    const primaryPanelProps = {
+        ...(maxPrimarySize === undefined ? {} : { maxSize: maxPrimarySize }),
+        minSize: minPrimarySize
+    };
+    const headerProps = {
+        ...(hasActions ? { actions } : {}),
+        ...(hasDescription ? { description } : {}),
+        ...(headingLevel === undefined ? {} : { headingLevel }),
+        ...(hasToolbar ? { toolbar } : {})
+    };
+    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-composite-split-workspace-shell", className), children: [hasHeader && hasTitle ? (_jsx(WorkspaceHeader, { ...headerProps, className: "zvk-composite-split-workspace-shell__header", title: title })) : hasHeader ? (_jsx(ShellHeaderChrome, { actions: actions, className: "zvk-composite-split-workspace-shell__header", description: description, toolbar: toolbar })) : null, _jsxs(Splitter, { ...splitterProps, className: "zvk-composite-split-workspace-shell__splitter", children: [_jsx(Splitter.Panel, { ...primaryPanelProps, "aria-label": primaryLabel, className: "zvk-composite-split-workspace-shell__pane", collapsible: collapsiblePrimary, children: primary }), _jsx(Splitter.Handle, { "aria-label": `Resize ${primaryLabel}` }), _jsx(Splitter.Panel, { "aria-label": secondaryLabel, className: "zvk-composite-split-workspace-shell__pane zvk-composite-split-workspace-shell__pane--secondary", children: secondary })] }), hasFooter ? (_jsx("footer", { className: "zvk-composite-split-workspace-shell__footer", children: footer })) : null] }));
+}

package/dist/styles.css

@@ -251,26 +251,6 @@
 }
 
 
-/* src/layout/feature-shell.css */
-@layer zvk-composite-components {
-  :where(.zvk-composite-feature-shell) {
-    container-type: inline-size;
-    min-inline-size: 0;
-    width: 100%;
-  }
-
-  @container (max-width: 36rem) {
-    :where(.zvk-composite-feature-shell .zvk-composite-workspace-header) {
-      grid-template-columns: minmax(0, 1fr);
-    }
-
-    :where(.zvk-composite-feature-shell .zvk-composite-workspace-header__controls) {
-      justify-content: start;
-    }
-  }
-}
-
-
 /* src/navigation/app-workspace-shell.css */
 @layer zvk-composite-components {
   :where(.zvk-composite-app-workspace-shell) {
@@ -686,6 +666,95 @@
 }
 
 
+/* src/navigation/resource-explorer-shell.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-resource-explorer-shell) {
+    color: var(--zvk-ui-color-foreground);
+    container: zvk-composite-resource-explorer-shell / inline-size;
+    display: grid;
+    font-family: var(--zvk-ui-font-family-primary);
+    gap: var(--zvk-ui-space-4);
+    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) minmax(16rem, 22rem);
+    min-block-size: 0;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-resource-explorer-shell:not([data-with-preview="true"])) {
+    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
+  }
+
+  :where(.zvk-composite-resource-explorer-shell__tree),
+  :where(.zvk-composite-resource-explorer-shell__results),
+  :where(.zvk-composite-resource-explorer-shell__preview) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-md);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    min-block-size: 0;
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-resource-explorer-shell__tree-header),
+  :where(.zvk-composite-resource-explorer-shell__toolbar),
+  :where(.zvk-composite-resource-explorer-shell__footer) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+  }
+
+  :where(.zvk-composite-resource-explorer-shell__tree-header) {
+    color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
+  }
+
+  :where(.zvk-composite-resource-explorer-shell__search) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: min(100%, 12rem);
+  }
+
+  :where(.zvk-composite-resource-explorer-shell__search > *) {
+    flex: 1 1 12rem;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-resource-explorer-shell__search :is(input, select, textarea, .zvk-ui-input, .zvk-ui-select__trigger)) {
+    inline-size: 100%;
+    max-inline-size: 100%;
+  }
+
+  :where(.zvk-composite-resource-explorer-shell__tree-item) {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-resource-explorer-shell__tree-item-icon) {
+    color: var(--zvk-ui-color-muted-foreground);
+    display: inline-flex;
+  }
+
+  @container zvk-composite-resource-explorer-shell (max-width: 72rem) {
+    :where(.zvk-composite-resource-explorer-shell),
+    :where(.zvk-composite-resource-explorer-shell:not([data-with-preview="true"])) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (max-width: 72rem) {
+    :where(.zvk-composite-resource-explorer-shell),
+    :where(.zvk-composite-resource-explorer-shell:not([data-with-preview="true"])) {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+
 /* src/navigation/sectioned-workspace-shell.css */
 @layer zvk-composite-components {
   :where(.zvk-composite-sectioned-workspace-shell) {
@@ -806,6 +875,130 @@
 }
 
 
+/* src/navigation/simple-workspace-shell.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-simple-workspace-shell) {
+    color: var(--zvk-ui-color-foreground);
+    container: zvk-composite-simple-workspace-shell / inline-size;
+    display: grid;
+    font-family: var(--zvk-ui-font-family-primary);
+    gap: var(--zvk-ui-space-5);
+    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-simple-workspace-shell:not([data-with-navigation="true"])) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  :where(.zvk-composite-simple-workspace-shell__navigation),
+  :where(.zvk-composite-simple-workspace-shell__aside) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-md);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-simple-workspace-shell__body) {
+    display: grid;
+    gap: var(--zvk-ui-space-5);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-simple-workspace-shell__header) {
+    border-block-end: 1px solid var(--zvk-ui-color-border);
+    padding-block-end: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-simple-workspace-shell__grid) {
+    align-items: start;
+    display: grid;
+    gap: var(--zvk-ui-space-5);
+    grid-template-columns: minmax(0, 1fr);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-simple-workspace-shell[data-with-aside="true"] .zvk-composite-simple-workspace-shell__grid) {
+    grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem);
+  }
+
+  :where(.zvk-composite-simple-workspace-shell__main) {
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-simple-workspace-shell__footer) {
+    border-block-start: 1px solid var(--zvk-ui-color-border);
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    padding-block-start: var(--zvk-ui-space-4);
+  }
+
+  @container zvk-composite-simple-workspace-shell (max-width: 64rem) {
+    :where(.zvk-composite-simple-workspace-shell),
+    :where(.zvk-composite-simple-workspace-shell[data-with-aside="true"] .zvk-composite-simple-workspace-shell__grid) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (max-width: 64rem) {
+    :where(.zvk-composite-simple-workspace-shell),
+    :where(.zvk-composite-simple-workspace-shell[data-with-aside="true"] .zvk-composite-simple-workspace-shell__grid) {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+
+/* src/navigation/split-workspace-shell.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-split-workspace-shell) {
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    font-family: var(--zvk-ui-font-family-primary);
+    gap: var(--zvk-ui-space-5);
+    min-block-size: 0;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-split-workspace-shell__header) {
+    border-block-end: 1px solid var(--zvk-ui-color-border);
+    padding-block-end: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-split-workspace-shell__splitter) {
+    min-block-size: 28rem;
+  }
+
+  :where(.zvk-composite-split-workspace-shell__pane) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-md);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    min-block-size: 0;
+    min-inline-size: 0;
+    overflow: auto;
+    padding: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-split-workspace-shell__pane--secondary) {
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--zvk-ui-color-primary) 5%, transparent), transparent 12rem),
+      var(--zvk-ui-color-surface);
+  }
+
+  :where(.zvk-composite-split-workspace-shell__footer) {
+    border-block-start: 1px solid var(--zvk-ui-color-border);
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    padding-block-start: var(--zvk-ui-space-4);
+  }
+}
+
+
 /* src/navigation/workspace-header.css */
 @layer zvk-composite-components {
   :where(.zvk-composite-workspace-header) {
@@ -923,6 +1116,26 @@
 }
 
 
+/* src/layout/feature-shell.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-feature-shell) {
+    container-type: inline-size;
+    min-inline-size: 0;
+    width: 100%;
+  }
+
+  @container (max-width: 36rem) {
+    :where(.zvk-composite-feature-shell .zvk-composite-workspace-header) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    :where(.zvk-composite-feature-shell .zvk-composite-workspace-header__controls) {
+      justify-content: start;
+    }
+  }
+}
+
+
 /* src/navigation/link-action.css */
 @layer zvk-composite-components {
   :where(.zvk-composite-link-action) {
@@ -2009,6 +2222,45 @@
 }
 
 
+/* src/workflows/wizard-shell.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-wizard-shell) {
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    font-family: var(--zvk-ui-font-family-primary);
+    gap: var(--zvk-ui-space-5);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-wizard-shell__header),
+  :where(.zvk-composite-wizard-shell__progress),
+  :where(.zvk-composite-wizard-shell__footer) {
+    border-block-end: 1px solid var(--zvk-ui-color-border);
+    padding-block-end: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-wizard-shell__content) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-md);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-5);
+  }
+
+  :where(.zvk-composite-wizard-shell__footer) {
+    border-block-end: 0;
+    border-block-start: 1px solid var(--zvk-ui-color-border);
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    padding-block-end: 0;
+    padding-block-start: var(--zvk-ui-space-4);
+  }
+}
+
+
 /* src/settings/parameter-editor.css */
 @layer zvk-composite-components {
   :where(.zvk-composite-parameter-editor) {

package/dist/utils/use-controllable-value.d.ts

@@ -0,0 +1,7 @@
+interface UseControllableValueOptions<Value> {
+    defaultValue: Value;
+    onChange?: ((value: Value) => void) | undefined;
+    value?: Value | undefined;
+}
+export declare function useControllableValue<Value>({ defaultValue, onChange, value }: UseControllableValueOptions<Value>): readonly [Value, (nextValue: Value) => void];
+export {};

package/dist/utils/use-controllable-value.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+export function useControllableValue({ defaultValue, onChange, value }) {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const resolvedValue = value ?? uncontrolledValue;
+    const setValue = React.useCallback((nextValue) => {
+        if (value === undefined) {
+            setUncontrolledValue(nextValue);
+        }
+        onChange?.(nextValue);
+    }, [onChange, value]);
+    return [resolvedValue, setValue];
+}

package/dist/workflows/wizard-shell.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import type { WorkspaceHeaderHeadingLevel } from "../navigation/workspace-header.js";
+export type WizardShellStepStatus = "idle" | "current" | "complete" | "error" | "disabled";
+export interface WizardShellStep {
+    description?: React.ReactNode | undefined;
+    disabled?: boolean | undefined;
+    id: string;
+    label: React.ReactNode;
+    status?: WizardShellStepStatus | undefined;
+}
+export interface WizardShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit" | "title"> {
+    actions?: React.ReactNode | undefined;
+    children: React.ReactNode;
+    currentStepId: string;
+    description?: React.ReactNode | undefined;
+    footer?: React.ReactNode | undefined;
+    headingLevel?: WorkspaceHeaderHeadingLevel | undefined;
+    onStepChange?: ((stepId: string) => void) | undefined;
+    progress?: React.ReactNode | undefined;
+    ref?: React.Ref<HTMLDivElement> | undefined;
+    steps: readonly WizardShellStep[];
+    title: React.ReactNode;
+}
+export declare function WizardShell({ actions, children, className, currentStepId, description, footer, headingLevel, onStepChange, progress, ref, steps, title, ...props }: WizardShellProps): React.JSX.Element;