@zvk/composite 0.1.1 → 0.1.2

package/dist/ai/provider-model-selector.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Spinner } from "@zvk/ui/spinner";
+import { cn } from "../utils/cn.js";
+function hasValue(value) {
+    return value !== null && value !== undefined && value !== false;
+}
+function renderNode(value) {
+    return hasValue(value) ? value : null;
+}
+export function ProviderModelSelector({ advancedSettings, className, empty = "No provider models available.", groups, loading = false, onGroupSelect, onItemSelect, ref, search, selectedGroupId, selectedItemId, selectedSummary, ...props }) {
+    const selectedGroup = groups.find((group) => group.id === selectedGroupId);
+    const selectedItems = selectedGroup?.items ?? [];
+    const hasGroups = groups.length > 0;
+    const hasSelectedGroup = selectedGroup !== undefined;
+    const hasSelectedItems = selectedItems.length > 0;
+    const selectedGroupUnavailable = selectedGroup?.disabled === true;
+    const showLoader = loading;
+    const showEmptyRootState = !loading && !hasGroups;
+    const showItemEmptyState = !loading && hasGroups && (!hasSelectedGroup || !hasSelectedItems);
+    return (_jsxs("div", { ...props, ref: ref, "aria-busy": loading ? true : props["aria-busy"], className: cn("zvk-composite-provider-model-selector", className), "data-empty": showEmptyRootState ? "" : undefined, "data-loading": loading ? "" : undefined, children: [_jsxs("div", { className: "zvk-composite-provider-model-selector__header", children: [hasValue(search) ? _jsx("div", { className: "zvk-composite-provider-model-selector__search", children: search }) : null, hasValue(selectedSummary) ? (_jsx("div", { className: "zvk-composite-provider-model-selector__summary", children: selectedSummary })) : null] }), showLoader ? (_jsxs("div", { className: "zvk-composite-provider-model-selector__state", "data-state": "loading", children: [_jsx(Spinner, { label: "Loading provider models", size: "sm", tone: "muted" }), _jsx("span", { children: "Loading provider models..." })] })) : null, showEmptyRootState ? (_jsx("div", { className: "zvk-composite-provider-model-selector__state", "data-state": "empty", children: renderNode(empty) })) : null, !showLoader && hasGroups ? (_jsxs("div", { className: "zvk-composite-provider-model-selector__columns", children: [_jsxs("section", { "aria-label": "Providers", className: "zvk-composite-provider-model-selector__panel", "data-state": selectedGroupUnavailable ? "unavailable" : "ready", "data-unavailable": selectedGroupUnavailable ? "" : undefined, children: [_jsx("div", { className: "zvk-composite-provider-model-selector__panel-header", children: _jsx("div", { className: "zvk-composite-provider-model-selector__panel-copy", children: _jsx("h3", { className: "zvk-composite-provider-model-selector__panel-title", children: "Providers" }) }) }), _jsx("ul", { className: "zvk-composite-provider-model-selector__list", children: groups.map((group) => {
+                                    const isSelected = group.id === selectedGroupId;
+                                    const isDisabled = group.disabled === true;
+                                    return (_jsx("li", { className: "zvk-composite-provider-model-selector__list-item", children: _jsx("button", { "aria-pressed": isSelected, className: "zvk-composite-provider-model-selector__choice zvk-composite-provider-model-selector__group-choice", "data-disabled": isDisabled ? "" : undefined, "data-selected": isSelected ? "" : undefined, disabled: isDisabled, type: "button", onClick: () => {
+                                                if (isDisabled) {
+                                                    return;
+                                                }
+                                                onGroupSelect?.(group);
+                                            }, children: _jsxs("span", { className: "zvk-composite-provider-model-selector__choice-copy", children: [_jsxs("span", { className: "zvk-composite-provider-model-selector__choice-heading", children: [_jsx("span", { className: "zvk-composite-provider-model-selector__choice-label", children: group.label }), hasValue(group.badge) ? (_jsx("span", { className: "zvk-composite-provider-model-selector__choice-badge", children: group.badge })) : null] }), hasValue(group.description) ? (_jsx("span", { className: "zvk-composite-provider-model-selector__choice-description", children: group.description })) : null] }) }) }, group.id));
+                                }) })] }), _jsxs("section", { "aria-label": "Models", className: "zvk-composite-provider-model-selector__panel", "data-state": showItemEmptyState || selectedGroupUnavailable ? "unavailable" : "ready", "data-unavailable": showItemEmptyState || selectedGroupUnavailable ? "" : undefined, children: [_jsx("div", { className: "zvk-composite-provider-model-selector__panel-header", children: _jsxs("div", { className: "zvk-composite-provider-model-selector__panel-copy", children: [_jsx("h3", { className: "zvk-composite-provider-model-selector__panel-title", children: "Models" }), hasSelectedGroup ? (_jsxs("p", { className: "zvk-composite-provider-model-selector__panel-description", children: [selectedGroup?.label, hasValue(selectedGroup?.description) ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "zvk-composite-provider-model-selector__panel-description-separator", children: [" ", _jsx("span", { "aria-hidden": "true", children: "\u00B7" }), " "] }), selectedGroup?.description] })) : null] })) : null] }) }), !showItemEmptyState && hasSelectedGroup ? (_jsx("ul", { className: "zvk-composite-provider-model-selector__list", children: selectedItems.map((item) => {
+                                    const isSelected = item.id === selectedItemId;
+                                    const isDisabled = item.disabled === true || selectedGroupUnavailable;
+                                    return (_jsx("li", { className: "zvk-composite-provider-model-selector__list-item", children: _jsx("button", { "aria-pressed": isSelected, className: "zvk-composite-provider-model-selector__choice zvk-composite-provider-model-selector__item-choice", "data-disabled": isDisabled ? "" : undefined, "data-selected": isSelected ? "" : undefined, disabled: isDisabled, type: "button", onClick: () => {
+                                                if (isDisabled) {
+                                                    return;
+                                                }
+                                                onItemSelect?.(item, selectedGroup);
+                                            }, children: _jsxs("span", { className: "zvk-composite-provider-model-selector__choice-copy", children: [_jsxs("span", { className: "zvk-composite-provider-model-selector__choice-heading", children: [_jsx("span", { className: "zvk-composite-provider-model-selector__choice-label", children: item.label }), hasValue(item.badge) ? (_jsx("span", { className: "zvk-composite-provider-model-selector__choice-badge", children: item.badge })) : null] }), hasValue(item.description) ? (_jsx("span", { className: "zvk-composite-provider-model-selector__choice-description", children: item.description })) : null, hasValue(item.metadata) ? (_jsx("span", { className: "zvk-composite-provider-model-selector__choice-metadata", children: item.metadata })) : null] }) }) }, item.id));
+                                }) })) : null, showItemEmptyState ? (_jsx("div", { className: "zvk-composite-provider-model-selector__state", "data-state": "empty", children: renderNode(empty) })) : null, hasValue(advancedSettings) ? (_jsx("div", { className: "zvk-composite-provider-model-selector__advanced-settings", children: advancedSettings })) : null] })] })) : null, hasValue(advancedSettings) && !hasGroups && !showLoader ? (_jsx("div", { className: "zvk-composite-provider-model-selector__advanced-settings", children: advancedSettings })) : null] }));
+}

package/dist/ai/sticky-composer.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface StickyComposerProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "children"> {
+    readonly input: React.ReactNode;
+    readonly leadingTools?: React.ReactNode;
+    readonly trailingTools?: React.ReactNode;
+    readonly submit?: React.ReactNode;
+    readonly status?: React.ReactNode;
+    readonly error?: React.ReactNode;
+    readonly footer?: React.ReactNode;
+    readonly loading?: boolean;
+    readonly disabled?: boolean;
+    readonly ref?: React.Ref<HTMLFormElement>;
+}
+export declare function StickyComposer({ className, disabled, error, footer, input, leadingTools, loading, ref, status, submit, trailingTools, ...props }: StickyComposerProps): React.JSX.Element;

package/dist/ai/sticky-composer.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+function hasValue(value) {
+    return value !== null && value !== undefined && value !== false;
+}
+export function StickyComposer({ className, disabled = false, error, footer, input, leadingTools, loading = false, ref, status, submit, trailingTools, ...props }) {
+    const controlsDisabled = disabled || loading;
+    const hasToolbar = hasValue(leadingTools) || hasValue(trailingTools) || hasValue(submit);
+    const hasMeta = hasValue(status) || hasValue(error);
+    return (_jsxs("form", { ...props, ref: ref, "aria-busy": loading ? true : props["aria-busy"], "aria-disabled": controlsDisabled ? true : props["aria-disabled"], className: cn("zvk-composite-sticky-composer", className), "data-disabled": controlsDisabled ? "" : undefined, "data-loading": loading ? "" : undefined, children: [_jsxs("div", { className: "zvk-composite-sticky-composer__body", children: [_jsx("div", { className: "zvk-composite-sticky-composer__input", children: input }), hasToolbar ? (_jsxs("div", { className: "zvk-composite-sticky-composer__toolbar", children: [hasValue(leadingTools) ? (_jsx("div", { className: "zvk-composite-sticky-composer__tools", "data-slot": "leading", children: leadingTools })) : null, hasValue(trailingTools) ? (_jsx("div", { className: "zvk-composite-sticky-composer__tools", "data-slot": "trailing", children: trailingTools })) : null, hasValue(submit) ? _jsx("div", { className: "zvk-composite-sticky-composer__submit", children: submit }) : null] })) : null, hasMeta ? (_jsxs("div", { className: "zvk-composite-sticky-composer__meta", children: [hasValue(status) ? _jsx("div", { className: "zvk-composite-sticky-composer__status", children: status }) : null, hasValue(error) ? (_jsx("div", { className: "zvk-composite-sticky-composer__error", role: "alert", children: error })) : null] })) : null] }), hasValue(footer) ? _jsx("div", { className: "zvk-composite-sticky-composer__footer", children: footer }) : null] }));
+}

package/dist/data/data-table-control-bar.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface DataTableControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly search?: React.ReactNode;
+    readonly filters?: React.ReactNode;
+    readonly savedView?: React.ReactNode;
+    readonly densityControl?: React.ReactNode;
+    readonly columnControl?: React.ReactNode;
+    readonly selectionSummary?: React.ReactNode;
+    readonly bulkActions?: React.ReactNode;
+    readonly actions?: React.ReactNode;
+    readonly ref?: React.Ref<HTMLDivElement>;
+}
+export declare function DataTableControlBar({ actions, bulkActions, className, columnControl, densityControl, filters, children: _children, ref, savedView, search, selectionSummary, ...props }: DataTableControlBarProps): React.JSX.Element;

package/dist/data/data-table-control-bar.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+function hasValue(value) {
+    return value !== null && value !== undefined && value !== false;
+}
+export function DataTableControlBar({ actions, bulkActions, className, columnControl, densityControl, filters, children: _children, ref, savedView, search, selectionSummary, ...props }) {
+    const hasPrimaryControls = hasValue(search) || hasValue(filters) || hasValue(savedView) || hasValue(densityControl) || hasValue(columnControl);
+    const hasSecondaryControls = hasValue(selectionSummary) || hasValue(bulkActions) || hasValue(actions);
+    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-composite-data-table-control-bar", className), children: [hasPrimaryControls ? (_jsxs("div", { className: "zvk-composite-data-table-control-bar__primary", children: [hasValue(search) ? _jsx("div", { className: "zvk-composite-data-table-control-bar__search", children: search }) : null, hasValue(filters) ? _jsx("div", { className: "zvk-composite-data-table-control-bar__filters", children: filters }) : null, hasValue(savedView) ? _jsx("div", { className: "zvk-composite-data-table-control-bar__saved-view", children: savedView }) : null, hasValue(densityControl) ? (_jsx("div", { className: "zvk-composite-data-table-control-bar__density-control", children: densityControl })) : null, hasValue(columnControl) ? (_jsx("div", { className: "zvk-composite-data-table-control-bar__column-control", children: columnControl })) : null] })) : null, hasSecondaryControls ? (_jsxs("div", { className: "zvk-composite-data-table-control-bar__secondary", children: [hasValue(selectionSummary) ? (_jsx("div", { className: "zvk-composite-data-table-control-bar__selection-summary", children: selectionSummary })) : null, hasValue(bulkActions) || hasValue(actions) ? (_jsxs("div", { className: "zvk-composite-data-table-control-bar__actions", children: [hasValue(bulkActions) ? (_jsx("div", { className: "zvk-composite-data-table-control-bar__bulk-actions", children: bulkActions })) : null, hasValue(actions) ? _jsx("div", { className: "zvk-composite-data-table-control-bar__actions-slot", children: actions }) : null] })) : null] })) : null] }));
+}

package/dist/detail/detail-inspector-panel.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export interface DetailInspectorSection {
+    readonly id: string;
+    readonly title?: React.ReactNode;
+    readonly description?: React.ReactNode;
+    readonly content: React.ReactNode;
+    readonly actions?: React.ReactNode;
+}
+export interface DetailInspectorPanelProps extends Omit<React.ComponentPropsWithoutRef<"aside">, "title" | "children"> {
+    readonly title: React.ReactNode;
+    readonly description?: React.ReactNode;
+    readonly status?: React.ReactNode;
+    readonly metadata?: React.ReactNode;
+    readonly actions?: React.ReactNode;
+    readonly sections: readonly DetailInspectorSection[];
+    readonly empty?: React.ReactNode;
+    readonly loading?: boolean;
+    readonly footer?: React.ReactNode;
+    readonly ref?: React.Ref<HTMLElement>;
+}
+export declare function DetailInspectorPanel({ actions, className, description, empty, footer, loading, metadata, ref, sections, status, title, ...props }: DetailInspectorPanelProps): React.JSX.Element;

package/dist/detail/detail-inspector-panel.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Spinner } from "@zvk/ui/spinner";
+import { cn } from "../utils/cn.js";
+function hasValue(value) {
+    return value !== null && value !== undefined && value !== false;
+}
+export function DetailInspectorPanel({ actions, className, description, empty, footer, loading = false, metadata, ref, sections, status, title, ...props }) {
+    const sectionIdBase = React.useId();
+    const hasSections = sections.length > 0;
+    const showEmpty = !loading && !hasSections;
+    const hasHeaderAside = hasValue(status) || hasValue(metadata) || hasValue(actions);
+    return (_jsxs("aside", { ...props, ref: ref, "aria-busy": loading ? true : props["aria-busy"], className: cn("zvk-composite-detail-inspector-panel", className), "data-empty": showEmpty ? "" : undefined, "data-loading": loading ? "" : undefined, "data-state": loading ? "loading" : showEmpty ? "empty" : "ready", children: [_jsxs("header", { className: "zvk-composite-detail-inspector-panel__header", children: [_jsxs("div", { className: "zvk-composite-detail-inspector-panel__copy", children: [_jsx("h2", { className: "zvk-composite-detail-inspector-panel__title", children: title }), hasValue(description) ? (_jsx("p", { className: "zvk-composite-detail-inspector-panel__description", children: description })) : null] }), hasHeaderAside ? (_jsxs("div", { className: "zvk-composite-detail-inspector-panel__aside", children: [hasValue(status) ? _jsx("div", { className: "zvk-composite-detail-inspector-panel__status", children: status }) : null, hasValue(metadata) ? (_jsx("div", { className: "zvk-composite-detail-inspector-panel__metadata", children: metadata })) : null, hasValue(actions) ? _jsx("div", { className: "zvk-composite-detail-inspector-panel__actions", children: actions }) : null] })) : null] }), loading ? (_jsxs("div", { className: "zvk-composite-detail-inspector-panel__state", "data-state": "loading", role: "status", children: [_jsx(Spinner, { label: "Loading details", size: "sm", tone: "muted" }), _jsx("span", { children: "Loading details..." })] })) : showEmpty ? (_jsx("div", { className: "zvk-composite-detail-inspector-panel__state", "data-state": "empty", children: empty ?? "Select an item to inspect details." })) : (_jsx("div", { className: "zvk-composite-detail-inspector-panel__sections", children: sections.map((section, index) => {
+                    const sectionTitleId = `${sectionIdBase}-section-${index}-title`;
+                    const hasSectionHeader = hasValue(section.title) || hasValue(section.description) || hasValue(section.actions);
+                    return (_jsxs("section", { "aria-labelledby": hasValue(section.title) ? sectionTitleId : undefined, className: "zvk-composite-detail-inspector-panel__section", children: [hasSectionHeader ? (_jsxs("div", { className: "zvk-composite-detail-inspector-panel__section-header", children: [_jsxs("div", { className: "zvk-composite-detail-inspector-panel__section-copy", children: [hasValue(section.title) ? (_jsx("h3", { className: "zvk-composite-detail-inspector-panel__section-title", id: sectionTitleId, children: section.title })) : null, hasValue(section.description) ? (_jsx("p", { className: "zvk-composite-detail-inspector-panel__section-description", children: section.description })) : null] }), hasValue(section.actions) ? (_jsx("div", { className: "zvk-composite-detail-inspector-panel__section-actions", children: section.actions })) : null] })) : null, _jsx("div", { className: "zvk-composite-detail-inspector-panel__section-content", children: section.content })] }, section.id));
+                }) })), hasValue(footer) ? _jsx("footer", { className: "zvk-composite-detail-inspector-panel__footer", children: footer }) : null] }));
+}

package/dist/index.d.ts

@@ -1,13 +1,23 @@
+export { ActivityFeed } from "./activity/activity-feed.js";
+export type { ActivityFeedGroup, ActivityFeedItem, ActivityFeedProps, ActivityFeedTone } from "./activity/activity-feed.js";
 export { PageScaffold } from "./layout/page-scaffold.js";
 export type { PageScaffoldMaxWidth, PageScaffoldProps } from "./layout/page-scaffold.js";
+export { FeatureShell } from "./layout/feature-shell.js";
+export type { FeatureShellProps } from "./layout/feature-shell.js";
 export { AppWorkspaceShell } from "./navigation/app-workspace-shell.js";
 export type { AppWorkspaceShellProps } from "./navigation/app-workspace-shell.js";
+export { CommandPaletteShell } from "./navigation/command-palette-shell.js";
+export type { CommandPaletteCommand, CommandPaletteGroup, CommandPaletteShellProps } from "./navigation/command-palette-shell.js";
+export { EntitySwitcherMenu } from "./navigation/entity-switcher-menu.js";
+export type { EntitySwitcherGroup, EntitySwitcherItem, EntitySwitcherMenuProps, EntitySwitcherMenuSize } from "./navigation/entity-switcher-menu.js";
 export { BreadcrumbPageHeader, WorkspaceHeader } from "./navigation/workspace-header.js";
 export type { BreadcrumbPageHeaderProps, BreadcrumbPageHeaderItem, WorkspaceHeaderAlign, WorkspaceHeaderHeadingLevel, WorkspaceHeaderProps } from "./navigation/workspace-header.js";
 export { SectionedWorkspaceShell } from "./navigation/sectioned-workspace-shell.js";
 export type { SectionedWorkspaceItem, SectionedWorkspaceSection, SectionedWorkspaceShellProps } from "./navigation/sectioned-workspace-shell.js";
 export { StateSurface } from "./state/state-surface.js";
 export type { StateSurfaceAlign, StateSurfaceProps, StateSurfaceSize, StateSurfaceState } from "./state/state-surface.js";
+export { RouteStateFrame } from "./state/route-state-frame.js";
+export type { RouteStateFrameProps, RouteStateFrameStatus } from "./state/route-state-frame.js";
 export { EntityCard } from "./lists/entity-card.js";
 export type { EntityCardProps } from "./lists/entity-card.js";
 export { EntityListSection } from "./lists/entity-list-section.js";
@@ -20,5 +30,27 @@ export { ConfirmActionDialog } from "./forms/confirm-action-dialog.js";
 export type { ConfirmActionDialogProps, ConfirmActionDialogTone } from "./forms/confirm-action-dialog.js";
 export { FormSurface } from "./forms/form-surface.js";
 export type { FormSurfaceProps } from "./forms/form-surface.js";
+export { IntegrationStatusCard } from "./integrations/integration-status-card.js";
+export type { IntegrationStatusCardProps, IntegrationStatusTone } from "./integrations/integration-status-card.js";
+export { WorkflowStatusCard } from "./workflows/workflow-status-card.js";
+export type { WorkflowStatusCardProps, WorkflowStatusTone } from "./workflows/workflow-status-card.js";
+export { ProcessListPanel } from "./workflows/process-list-panel.js";
+export type { ProcessListPanelItem, ProcessListPanelProps } from "./workflows/process-list-panel.js";
+export { ParameterEditor } from "./settings/parameter-editor.js";
+export type { ParameterEditorDensity, ParameterEditorGroup, ParameterEditorProps, ParameterEditorRow } from "./settings/parameter-editor.js";
+export { SettingsSectionStack } from "./settings/settings-section-stack.js";
+export type { SettingsSection, SettingsSectionStackProps } from "./settings/settings-section-stack.js";
+export { ProviderModelSelector } from "./ai/provider-model-selector.js";
+export type { ProviderModelGroup, ProviderModelItem, ProviderModelSelectorProps } from "./ai/provider-model-selector.js";
+export { ConversationDirectory } from "./ai/conversation-directory.js";
+export type { ConversationDirectoryGroup, ConversationDirectoryItem, ConversationDirectoryProps } from "./ai/conversation-directory.js";
+export { StickyComposer } from "./ai/sticky-composer.js";
+export type { StickyComposerProps } from "./ai/sticky-composer.js";
+export { DetailInspectorPanel } from "./detail/detail-inspector-panel.js";
+export type { DetailInspectorPanelProps, DetailInspectorSection } from "./detail/detail-inspector-panel.js";
 export { DataTablePageFrame } from "./data/data-table-page-frame.js";
+export { DataTableControlBar } from "./data/data-table-control-bar.js";
+export { LinkAction } from "./navigation/link-action.js";
+export type { LinkActionProps } from "./navigation/link-action.js";
+export type { DataTableControlBarProps } from "./data/data-table-control-bar.js";
 export type { DataTablePageFrameProps } from "./data/data-table-page-frame.js";

package/dist/index.js

@@ -1,12 +1,28 @@
+export { ActivityFeed } from "./activity/activity-feed.js";
 export { PageScaffold } from "./layout/page-scaffold.js";
+export { FeatureShell } from "./layout/feature-shell.js";
 export { AppWorkspaceShell } from "./navigation/app-workspace-shell.js";
+export { CommandPaletteShell } from "./navigation/command-palette-shell.js";
+export { EntitySwitcherMenu } from "./navigation/entity-switcher-menu.js";
 export { BreadcrumbPageHeader, WorkspaceHeader } from "./navigation/workspace-header.js";
 export { SectionedWorkspaceShell } from "./navigation/sectioned-workspace-shell.js";
 export { StateSurface } from "./state/state-surface.js";
+export { RouteStateFrame } from "./state/route-state-frame.js";
 export { EntityCard } from "./lists/entity-card.js";
 export { EntityListSection } from "./lists/entity-list-section.js";
 export { SummaryMetricGrid } from "./lists/summary-metric-grid.js";
 export { SettingsHubList } from "./lists/settings-hub-list.js";
 export { ConfirmActionDialog } from "./forms/confirm-action-dialog.js";
 export { FormSurface } from "./forms/form-surface.js";
+export { IntegrationStatusCard } from "./integrations/integration-status-card.js";
+export { WorkflowStatusCard } from "./workflows/workflow-status-card.js";
+export { ProcessListPanel } from "./workflows/process-list-panel.js";
+export { ParameterEditor } from "./settings/parameter-editor.js";
+export { SettingsSectionStack } from "./settings/settings-section-stack.js";
+export { ProviderModelSelector } from "./ai/provider-model-selector.js";
+export { ConversationDirectory } from "./ai/conversation-directory.js";
+export { StickyComposer } from "./ai/sticky-composer.js";
+export { DetailInspectorPanel } from "./detail/detail-inspector-panel.js";
 export { DataTablePageFrame } from "./data/data-table-page-frame.js";
+export { DataTableControlBar } from "./data/data-table-control-bar.js";
+export { LinkAction } from "./navigation/link-action.js";

package/dist/integrations/integration-status-card.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export type IntegrationStatusTone = "neutral" | "success" | "warning" | "danger" | "info";
+export interface IntegrationStatusCardProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    status?: React.ReactNode;
+    statusTone?: IntegrationStatusTone;
+    badges?: React.ReactNode;
+    metadata?: React.ReactNode;
+    metrics?: React.ReactNode;
+    actions?: React.ReactNode;
+    footer?: React.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    error?: React.ReactNode;
+    ref?: React.Ref<HTMLElement>;
+}
+export declare function IntegrationStatusCard({ actions, badges, className, description, disabled, error, footer, icon, loading, metadata, metrics, ref, selected, status, statusTone, title, ...props }: IntegrationStatusCardProps): React.JSX.Element;

package/dist/integrations/integration-status-card.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Badge } from "@zvk/ui/badge";
+import { Spinner } from "@zvk/ui/spinner";
+import { cn } from "../utils/cn.js";
+function hasValue(value) {
+    return value !== null && value !== undefined && value !== false;
+}
+function getBadgeTone(tone) {
+    return tone === "danger" ? "destructive" : tone;
+}
+export function IntegrationStatusCard({ actions, badges, className, description, disabled = false, error, footer, icon, loading = false, metadata, metrics, ref, selected = false, status, statusTone = "neutral", title, ...props }) {
+    const showHeaderAside = hasValue(status) || loading || hasValue(actions);
+    return (_jsxs("article", { ...props, ref: ref, "aria-busy": loading ? true : props["aria-busy"], "aria-disabled": disabled ? true : props["aria-disabled"], className: cn("zvk-composite-integration-status-card", className), "data-disabled": disabled ? "" : undefined, "data-loading": loading ? "" : undefined, "data-selected": selected ? "" : undefined, "data-tone": statusTone, children: [_jsxs("div", { className: "zvk-composite-integration-status-card__main", children: [hasValue(icon) ? _jsx("div", { className: "zvk-composite-integration-status-card__icon", children: icon }) : null, _jsxs("div", { className: "zvk-composite-integration-status-card__body", children: [_jsxs("div", { className: "zvk-composite-integration-status-card__header", children: [_jsxs("div", { className: "zvk-composite-integration-status-card__copy", children: [_jsx("h3", { className: "zvk-composite-integration-status-card__title", children: title }), hasValue(description) ? (_jsx("p", { className: "zvk-composite-integration-status-card__description", children: description })) : null] }), showHeaderAside ? (_jsxs("div", { className: "zvk-composite-integration-status-card__aside", children: [loading ? _jsx(Spinner, { label: "Loading integration status", size: "sm", tone: "muted" }) : null, hasValue(status) ? (_jsx(Badge, { tone: getBadgeTone(statusTone), variant: "soft", children: status })) : null, hasValue(actions) ? _jsx("div", { className: "zvk-composite-integration-status-card__actions", children: actions }) : null] })) : null] }), hasValue(badges) ? _jsx("div", { className: "zvk-composite-integration-status-card__badges", children: badges }) : null, hasValue(metadata) ? _jsx("div", { className: "zvk-composite-integration-status-card__metadata", children: metadata }) : null, hasValue(metrics) ? _jsx("div", { className: "zvk-composite-integration-status-card__metrics", children: metrics }) : null, hasValue(error) ? (_jsx("div", { className: "zvk-composite-integration-status-card__error", role: "alert", children: error })) : null] })] }), hasValue(footer) ? _jsx("div", { className: "zvk-composite-integration-status-card__footer", children: footer }) : null] }));
+}

package/dist/layout/feature-shell.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface FeatureShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    readonly title: React.ReactNode;
+    readonly description?: React.ReactNode;
+    readonly eyebrow?: React.ReactNode;
+    readonly actions?: React.ReactNode;
+    readonly metadata?: React.ReactNode;
+    readonly toolbar?: React.ReactNode;
+    readonly children: React.ReactNode;
+    readonly className?: string;
+    readonly ref?: React.Ref<HTMLDivElement>;
+}
+export declare function FeatureShell({ actions, children, className, description, eyebrow, metadata, ref, title, toolbar, ...props }: FeatureShellProps): React.JSX.Element;

package/dist/layout/feature-shell.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { PageScaffold } from "../layout/page-scaffold.js";
+import { cn } from "../utils/cn.js";
+export function FeatureShell({ actions, children, className, description, eyebrow, metadata, ref, title, toolbar, ...props }) {
+    return (_jsx(PageScaffold, { ...props, ref: ref, actions: actions, className: cn("zvk-composite-feature-shell", className), description: description, eyebrow: eyebrow, status: metadata, title: title, toolbar: toolbar, children: children }));
+}

package/dist/navigation/command-palette-shell.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export interface CommandPaletteCommand {
+    description?: React.ReactNode | undefined;
+    disabled?: boolean | undefined;
+    icon?: React.ReactNode | undefined;
+    id: string;
+    keywords?: readonly string[] | undefined;
+    label: React.ReactNode;
+    shortcut?: React.ReactNode | undefined;
+}
+export interface CommandPaletteGroup {
+    commands: readonly CommandPaletteCommand[];
+    id: string;
+    label?: React.ReactNode | undefined;
+}
+export interface CommandPaletteShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    defaultQuery?: string | undefined;
+    empty?: React.ReactNode | undefined;
+    footer?: React.ReactNode | undefined;
+    groups: readonly CommandPaletteGroup[];
+    label?: React.ReactNode | undefined;
+    loading?: boolean | undefined;
+    onCommandSelect?: ((command: CommandPaletteCommand) => void) | undefined;
+    onOpenChange: (open: boolean) => void;
+    onQueryChange?: ((query: string) => void) | undefined;
+    open: boolean;
+    placeholder?: string | undefined;
+    query?: string | undefined;
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}
+export declare function CommandPaletteShell({ className, defaultQuery, empty, footer, groups, label, loading, onCommandSelect, onOpenChange, onQueryChange, open, placeholder, query, ref, ...props }: CommandPaletteShellProps): React.JSX.Element;

package/dist/navigation/command-palette-shell.js

@@ -0,0 +1,45 @@
+"use client";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Command } from "@zvk/ui/command";
+import { Dialog } from "@zvk/ui/dialog";
+import { cn } from "../utils/cn.js";
+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];
+}
+export function CommandPaletteShell({ className, defaultQuery = "", empty = "No commands found.", footer, groups, label = "Command menu", loading = false, onCommandSelect, onOpenChange, onQueryChange, open, placeholder = "Search commands...", query, ref, ...props }) {
+    const [resolvedQuery, setResolvedQuery] = useControllableValue({
+        defaultValue: defaultQuery,
+        ...(onQueryChange ? { onChange: onQueryChange } : {}),
+        ...(query !== undefined ? { value: query } : {})
+    });
+    const hasCommands = groups.some((group) => group.commands.length > 0);
+    const dialogProps = {
+        ...(ref !== undefined ? { ref } : {})
+    };
+    const handleSelect = React.useCallback((command) => {
+        onCommandSelect?.(command);
+        onOpenChange(false);
+    }, [onCommandSelect, onOpenChange]);
+    return (_jsx(Dialog, { ...props, ...dialogProps, className: cn("zvk-composite-command-palette-shell", className), onOpenChange: onOpenChange, open: open, children: _jsxs(Dialog.Content, { className: "zvk-composite-command-palette-shell__content", children: [_jsx(Dialog.Title, { className: "zvk-composite-command-palette-shell__title", children: label }), _jsxs(Command, { className: "zvk-composite-command-palette-shell__command", onValueChange: setResolvedQuery, value: resolvedQuery, children: [_jsx(Command.Input, { className: "zvk-composite-command-palette-shell__search", placeholder: placeholder }), _jsxs(Command.List, { className: "zvk-composite-command-palette-shell__list", children: [loading ? (_jsx("div", { className: "zvk-composite-command-palette-shell__state", "data-state": "loading", children: "Loading..." })) : null, !loading && !hasCommands ? (_jsx("div", { className: "zvk-composite-command-palette-shell__state", "data-state": "empty", children: empty })) : null, !loading && hasCommands ? _jsx(Command.Empty, { children: empty }) : null, !loading
+                                    ? groups.map((group) => (_jsx(Command.Group, { className: "zvk-composite-command-palette-shell__group", heading: group.label, children: group.commands.map((command) => {
+                                            const commandProps = {
+                                                ...(command.disabled !== undefined ? { disabled: command.disabled } : {}),
+                                                ...(command.keywords !== undefined ? { keywords: command.keywords } : {})
+                                            };
+                                            return (_createElement(Command.Item, { ...commandProps, className: "zvk-composite-command-palette-shell__item", key: command.id, onSelect: () => handleSelect(command), value: command.id },
+                                                command.icon ? (_jsx("span", { className: "zvk-composite-command-palette-shell__item-icon", "aria-hidden": "true", children: command.icon })) : null,
+                                                _jsxs("span", { className: "zvk-composite-command-palette-shell__item-content", children: [_jsx("span", { className: "zvk-composite-command-palette-shell__item-label", children: command.label }), command.description ? (_jsx("span", { className: "zvk-composite-command-palette-shell__item-description", children: command.description })) : null] }),
+                                                command.shortcut ? (_jsx(Command.Shortcut, { className: "zvk-composite-command-palette-shell__shortcut", children: command.shortcut })) : null));
+                                        }) }, group.id)))
+                                    : null] }), footer ? _jsx("div", { className: "zvk-composite-command-palette-shell__footer", children: footer }) : null] })] }) }));
+}

package/dist/navigation/entity-switcher-menu.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+export type EntitySwitcherMenuSize = "sm" | "md";
+export interface EntitySwitcherItem {
+    badge?: React.ReactNode | undefined;
+    description?: React.ReactNode | undefined;
+    disabled?: boolean | undefined;
+    icon?: React.ReactNode | undefined;
+    id: string;
+    keywords?: readonly string[] | undefined;
+    label: React.ReactNode;
+    meta?: React.ReactNode | undefined;
+}
+export interface EntitySwitcherGroup {
+    id: string;
+    items: readonly EntitySwitcherItem[];
+    label?: React.ReactNode | undefined;
+}
+export interface EntitySwitcherMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    createAction?: React.ReactNode | undefined;
+    current?: EntitySwitcherItem | undefined;
+    defaultOpen?: boolean | undefined;
+    defaultQuery?: string | undefined;
+    empty?: React.ReactNode | undefined;
+    groups: readonly EntitySwitcherGroup[];
+    label: React.ReactNode;
+    loading?: boolean | undefined;
+    loadingLabel?: React.ReactNode | undefined;
+    manageAction?: React.ReactNode | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    onQueryChange?: ((query: string) => void) | undefined;
+    onSelect?: ((item: EntitySwitcherItem) => void) | undefined;
+    open?: boolean | undefined;
+    placeholder?: string | undefined;
+    query?: string | undefined;
+    ref?: React.Ref<HTMLDivElement> | undefined;
+    size?: EntitySwitcherMenuSize | undefined;
+}
+export declare function EntitySwitcherMenu({ className, createAction, current, defaultOpen, defaultQuery, empty, groups, label, loading, loadingLabel, manageAction, onOpenChange, onQueryChange, onSelect, open, placeholder, query, ref, size, ...props }: EntitySwitcherMenuProps): React.JSX.Element;

package/dist/navigation/entity-switcher-menu.js

@@ -0,0 +1,56 @@
+"use client";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "@zvk/ui/button";
+import { Command } from "@zvk/ui/command";
+import { Popover } from "@zvk/ui/popover";
+import { cn } from "../utils/cn.js";
+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];
+}
+function hasRenderableNode(value) {
+    return value !== undefined && value !== null && value !== false;
+}
+export function EntitySwitcherMenu({ className, createAction, current, defaultOpen = false, defaultQuery = "", empty = "No entities found.", groups, label, loading = false, loadingLabel = "Loading...", manageAction, onOpenChange, onQueryChange, onSelect, open, placeholder = "Search...", query, ref, size = "md", ...props }) {
+    const [resolvedOpen, setResolvedOpen] = useControllableValue({
+        defaultValue: defaultOpen,
+        ...(onOpenChange ? { onChange: onOpenChange } : {}),
+        ...(open !== undefined ? { value: open } : {})
+    });
+    const [resolvedQuery, setResolvedQuery] = useControllableValue({
+        defaultValue: defaultQuery,
+        ...(onQueryChange ? { onChange: onQueryChange } : {}),
+        ...(query !== undefined ? { value: query } : {})
+    });
+    const hasActions = hasRenderableNode(createAction) || hasRenderableNode(manageAction);
+    const hasItems = groups.some((group) => group.items.length > 0);
+    const popoverProps = {
+        ...(ref !== undefined ? { ref } : {})
+    };
+    const handleSelect = React.useCallback((item) => {
+        onSelect?.(item);
+        setResolvedOpen(false);
+    }, [onSelect, setResolvedOpen]);
+    return (_jsxs(Popover, { ...props, ...popoverProps, className: cn("zvk-composite-entity-switcher-menu", className), "data-size": size, onOpenChange: setResolvedOpen, open: resolvedOpen, placement: "bottom-start", children: [_jsx(Popover.Trigger, { asChild: true, children: _jsxs(Button, { className: "zvk-composite-entity-switcher-menu__trigger", "data-state": resolvedOpen ? "open" : "closed", type: "button", variant: "outline", children: [_jsxs("span", { className: "zvk-composite-entity-switcher-menu__trigger-content", children: [_jsx("span", { className: "zvk-composite-entity-switcher-menu__label", children: label }), _jsxs("span", { className: "zvk-composite-entity-switcher-menu__current", children: [current?.icon ? (_jsx("span", { className: "zvk-composite-entity-switcher-menu__current-icon", "aria-hidden": "true", children: current.icon })) : null, current ? (_jsxs("span", { className: "zvk-composite-entity-switcher-menu__current-text", children: [_jsx("span", { className: "zvk-composite-entity-switcher-menu__current-label", children: current.label }), current.description ? (_jsx("span", { className: "zvk-composite-entity-switcher-menu__current-description", children: current.description })) : null] })) : null] })] }), _jsx("span", { className: "zvk-composite-entity-switcher-menu__chevron", "aria-hidden": "true", children: "v" })] }) }), _jsx(Popover.Content, { align: "start", className: "zvk-composite-entity-switcher-menu__content", matchTriggerWidth: true, side: "bottom", sideOffset: 8, children: _jsxs(Command, { className: "zvk-composite-entity-switcher-menu__command", onValueChange: setResolvedQuery, value: resolvedQuery, children: [_jsx(Command.Input, { className: "zvk-composite-entity-switcher-menu__search", placeholder: placeholder }), _jsxs(Command.List, { className: "zvk-composite-entity-switcher-menu__list", children: [loading ? (_jsx("div", { className: "zvk-composite-entity-switcher-menu__state", "data-state": "loading", children: loadingLabel })) : null, !loading && !hasItems ? (_jsx("div", { className: "zvk-composite-entity-switcher-menu__state", "data-state": "empty", children: empty })) : null, !loading && hasItems ? _jsx(Command.Empty, { children: empty }) : null, !loading
+                                    ? groups.map((group) => (_jsx(Command.Group, { className: "zvk-composite-entity-switcher-menu__group", heading: group.label, children: group.items.map((item) => {
+                                            const itemProps = {
+                                                ...(item.disabled !== undefined ? { disabled: item.disabled } : {}),
+                                                ...(item.keywords !== undefined ? { keywords: item.keywords } : {})
+                                            };
+                                            return (_createElement(Command.Item, { ...itemProps, className: "zvk-composite-entity-switcher-menu__item", "data-current": current && item.id === current.id ? "true" : undefined, key: item.id, onSelect: () => handleSelect(item), value: item.id },
+                                                item.icon ? (_jsx("span", { className: "zvk-composite-entity-switcher-menu__item-icon", "aria-hidden": "true", children: item.icon })) : null,
+                                                _jsxs("span", { className: "zvk-composite-entity-switcher-menu__item-content", children: [_jsx("span", { className: "zvk-composite-entity-switcher-menu__item-label", children: item.label }), item.description ? (_jsx("span", { className: "zvk-composite-entity-switcher-menu__item-description", children: item.description })) : null] }),
+                                                item.meta ? (_jsx("span", { className: "zvk-composite-entity-switcher-menu__item-meta", children: item.meta })) : null,
+                                                item.badge ? (_jsx("span", { className: "zvk-composite-entity-switcher-menu__item-badge", children: item.badge })) : null));
+                                        }) }, group.id)))
+                                    : null] }), hasActions ? (_jsxs("div", { className: "zvk-composite-entity-switcher-menu__actions", children: [createAction ? (_jsx("div", { className: "zvk-composite-entity-switcher-menu__action", "data-action": "create", children: createAction })) : null, manageAction ? (_jsx("div", { className: "zvk-composite-entity-switcher-menu__action", "data-action": "manage", children: manageAction })) : null] })) : null] }) })] }));
+}

package/dist/navigation/link-action.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { ButtonSize, ButtonVariant } from "@zvk/ui/button";
+export interface LinkActionProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "disabled"> {
+    readonly disabled?: boolean;
+    readonly leadingIcon?: React.ReactNode;
+    readonly ref?: React.Ref<HTMLAnchorElement>;
+    readonly size?: ButtonSize;
+    readonly trailingIcon?: React.ReactNode;
+    readonly variant?: ButtonVariant;
+}
+export declare function LinkAction({ children, className, disabled, leadingIcon, onClickCapture, onKeyDownCapture, ["aria-disabled"]: ariaDisabled, ref, size, trailingIcon, variant, ...props }: LinkActionProps): React.JSX.Element;

package/dist/navigation/link-action.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+function hasRenderableNode(value) {
+    if (value === null || value === undefined || value === false) {
+        return false;
+    }
+    if (typeof value === "string" || typeof value === "number" || typeof value === "bigint") {
+        return true;
+    }
+    if (React.isValidElement(value)) {
+        const props = value.props;
+        if (props["aria-hidden"] === true || props["aria-hidden"] === "true") {
+            return false;
+        }
+        if (typeof props["aria-label"] === "string" && props["aria-label"].trim() !== "") {
+            return true;
+        }
+        if (typeof props["aria-labelledby"] === "string" && props["aria-labelledby"].trim() !== "") {
+            return true;
+        }
+        if (typeof props["title"] === "string" && props["title"].trim() !== "") {
+            return true;
+        }
+        return React.Children.toArray(props.children).some(hasRenderableNode);
+    }
+    return false;
+}
+export function LinkAction({ children, className, disabled, leadingIcon, onClickCapture, onKeyDownCapture, ["aria-disabled"]: ariaDisabled, ref, size = "md", trailingIcon, variant = "outline", ...props }) {
+    const isDisabled = Boolean(disabled || ariaDisabled === true || ariaDisabled === "true");
+    const suppressDisabledActivation = React.useCallback((event) => {
+        if (!isDisabled) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }, [isDisabled]);
+    const hasContent = React.Children.count(children) > 0;
+    return (_jsxs("a", { ...props, "aria-disabled": isDisabled ? true : ariaDisabled, className: cn("zvk-ui-button", "zvk-composite-link-action", className), "data-disabled": isDisabled ? "true" : undefined, "data-size": size, "data-variant": variant, onClickCapture: isDisabled ? suppressDisabledActivation : onClickCapture, onKeyDownCapture: isDisabled ? suppressDisabledActivation : onKeyDownCapture, ref: ref, tabIndex: isDisabled ? -1 : props.tabIndex, children: [leadingIcon ? (_jsx("span", { "aria-hidden": hasRenderableNode(leadingIcon) ? undefined : true, className: "zvk-ui-button__icon zvk-composite-link-action__icon", children: leadingIcon })) : null, hasContent ? _jsx("span", { className: "zvk-ui-button__content zvk-composite-link-action__content", children: children }) : null, trailingIcon ? (_jsx("span", { "aria-hidden": hasRenderableNode(trailingIcon) ? undefined : true, className: "zvk-ui-button__icon zvk-composite-link-action__icon", children: trailingIcon })) : null] }));
+}

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

@@ -25,9 +25,10 @@ export interface SectionedWorkspaceShellProps extends Omit<React.HTMLAttributes<
     onItemSelect?: ((itemId: string) => void) | undefined;
     ref?: React.Ref<HTMLDivElement> | undefined;
     sections: SectionedWorkspaceShellSection[];
+    sidebarFooter?: React.ReactNode | undefined;
     title?: React.ReactNode | undefined;
     toolbar?: React.ReactNode | undefined;
 }
 export type SectionedWorkspaceItem = SectionedWorkspaceShellItem;
 export type SectionedWorkspaceSection = SectionedWorkspaceShellSection;
-export declare function SectionedWorkspaceShell({ actions, activeItemId, children, className, description, footer, headingLevel, navLabel, onItemSelect, ref, sections, title, toolbar, ...props }: SectionedWorkspaceShellProps): React.JSX.Element;
+export declare function SectionedWorkspaceShell({ actions, activeItemId, children, className, description, footer, headingLevel, navLabel, onItemSelect, ref, sections, sidebarFooter, title, toolbar, ...props }: SectionedWorkspaceShellProps): React.JSX.Element;

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

@@ -3,7 +3,7 @@ import * as React from "react";
 import { SectionedSidebarNav } from "@zvk/ui/sectioned-sidebar-nav";
 import { cn } from "../utils/cn.js";
 import { WorkspaceHeader } from "./workspace-header.js";
-export function SectionedWorkspaceShell({ actions, activeItemId, children, className, description, footer, headingLevel, navLabel = "Workspace navigation", onItemSelect, ref, sections, title, toolbar, ...props }) {
+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 navigationProps = {
         ...(activeItemId === undefined ? {} : { activeItemId }),
@@ -15,7 +15,7 @@ export function SectionedWorkspaceShell({ actions, activeItemId, children, class
         ...(headingLevel === undefined ? {} : { headingLevel }),
         ...(toolbar === undefined ? {} : { toolbar })
     };
-    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-composite-sectioned-workspace-shell", className), children: [_jsx("aside", { className: "zvk-composite-sectioned-workspace-shell__sidebar", children: _jsx(SectionedWorkspaceNavigation, { ...navigationProps, navLabel: navLabel, sections: sections }) }), _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 }), 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] })] }));
 }
 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))) }));