@zvk/composite 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @zvk/composite Changelog
 
+## [0.1.4](https://github.com/brandon-schabel/zvk/compare/composite-v0.1.3...composite-v0.1.4) (2026-06-25)
+
+
+### Features
+
+* improve out-of-box DX and UI components ([#24](https://github.com/brandon-schabel/zvk/issues/24)) ([b01272a](https://github.com/brandon-schabel/zvk/commit/b01272a2b35099f5e1fa1dea5883687a0fb4c2e6))
+
+## [0.1.3](https://github.com/brandon-schabel/zvk/compare/composite-v0.1.2...composite-v0.1.3) (2026-06-20)
+
+
+### Features
+
+* improve package release workflow and repo maintainability ([#22](https://github.com/brandon-schabel/zvk/issues/22)) ([a41cb66](https://github.com/brandon-schabel/zvk/commit/a41cb66554496f241c5a8e30b29a76c8b8ca92b3))
+
 ## [0.1.2](https://github.com/brandon-schabel/zvk/compare/composite-v0.1.1...composite-v0.1.2) (2026-06-19)
 
 

package/README.md

@@ -13,6 +13,21 @@ Components are UI-only and accept typed props, slots, and callbacks. They do not
 
 Composite typography inherits the shared `@zvk/ui` font-family slots: primary for body/control text, secondary for titles and navigation accents, and tertiary wherever composed UI primitives render code or technical values.
 
+## Domain Ownership
+
+The package is organized around product-surface domains so repeated shell structure stays readable without creating new public import groups. This map is for internal ownership and review; it does not add domain barrel imports to the public API.
+
+- `shell`: `AppWorkspaceShell`, `PageScaffold`, `FeatureShell`
+- `navigation`: `WorkspaceHeader`, `BreadcrumbPageHeader`, `SimpleWorkspaceShell`, `SplitWorkspaceShell`, `SectionedWorkspaceShell`, `ResourceExplorerShell`, `EntitySwitcherMenu`, `CommandPaletteShell`, `LinkAction`
+- `state`: `StateSurface`, `RouteStateFrame`
+- `forms`: `FormSurface`, `ConfirmActionDialog`
+- `data`: `EntityCard`, `EntityListSection`, `SummaryMetricGrid`, `DataTablePageFrame`, `DataTableControlBar`
+- `workflow`: `IntegrationStatusCard`, `WorkflowStatusCard`, `ProcessListPanel`, `WizardShell`
+- `settings`: `SettingsHubList`, `ParameterEditor`, `SettingsSectionStack`
+- `ai`: `ProviderModelSelector`, `ConversationDirectory`, `StickyComposer`
+- `activity`: `ActivityFeed`
+- `detail`: `DetailInspectorPanel`
+
 ## What Composite Does Not Own
 
 `@zvk/composite` owns repeated product-surface structure, semantic markup, accessible labels for the UI it renders, token-backed spacing, density-aware layout, and typed slots. It deliberately does not own app policy or runtime orchestration.
@@ -27,6 +42,15 @@ Keep these in the consuming app or a more specific package:
 - AI provider catalogs, model compatibility, prompt state, tool execution, attachments, message history, and AI SDK integration;
 - analytics, telemetry, business copy, domain transforms, date formatting, and error classification.
 
+## Public Stability
+
+- All current component subpaths and the root export are stable public API.
+- Watched surfaces may evolve only through additive, UI-only props, callbacks, and tests; keep them app-agnostic and preserve the current import paths.
+- `./styles.css` is a stable stylesheet export.
+- `./package.json` is stable metadata and tooling export, not a component surface.
+
+Watched surfaces: `SimpleWorkspaceShell`, `SplitWorkspaceShell`, `ResourceExplorerShell`, `WizardShell`, `EntitySwitcherMenu`, `CommandPaletteShell`, `ConfirmActionDialog`, `IntegrationStatusCard`, `WorkflowStatusCard`, `ProcessListPanel`, `ActivityFeed`, `ParameterEditor`, `ProviderModelSelector`, `ConversationDirectory`, `StickyComposer`, and `DataTableControlBar`.
+
 ## App Surface Exports
 
 App surfaces are intentionally router-agnostic and UI-only:
@@ -38,7 +62,10 @@ App surfaces are intentionally router-agnostic and UI-only:
 | `CommandPaletteShell` | `@zvk/composite/command-palette-shell` | Controlled command palette dialog with grouped commands and app-owned command execution. |
 | `WorkspaceHeader` | `@zvk/composite/workspace-header` | Page header with title, description, status, metadata, and actions. |
 | `BreadcrumbPageHeader` | `@zvk/composite/breadcrumb-page-header` | Breadcrumb-aware page header for nested workspace routes. |
+| `SimpleWorkspaceShell` | `@zvk/composite/simple-workspace-shell` | Generic workspace frame with optional navigation, header, toolbar, actions, aside, footer, and content slots. |
+| `SplitWorkspaceShell` | `@zvk/composite/split-workspace-shell` | Resizable two-pane workspace shell built on `@zvk/ui/splitter` for app-owned resource/detail or editor/preview layouts. |
 | `SectionedWorkspaceShell` | `@zvk/composite/sectioned-workspace-shell` | Sectioned navigation shell for dense workspace panels. |
+| `ResourceExplorerShell` | `@zvk/composite/resource-explorer-shell` | Tree plus result-list explorer shell for app-owned repositories, files, records, resources, or docs. |
 | `PageScaffold` | `@zvk/composite/page-scaffold` | Page layout with toolbar, aside, constrained width, and content slots. |
 | `FeatureShell` | `@zvk/composite/feature-shell` | Reusable feature page layout with title, description, actions, metadata, and toolbar slots. |
 | `StateSurface` | `@zvk/composite/state-surface` | Empty, loading, error, permission, success, and search-empty state panels. |
@@ -52,6 +79,7 @@ App surfaces are intentionally router-agnostic and UI-only:
 | `IntegrationStatusCard` | `@zvk/composite/integration-status-card` | Provider/API/service connection status card with status, badges, metadata, metrics, actions, and errors. |
 | `WorkflowStatusCard` | `@zvk/composite/workflow-status-card` | Workflow, run, import, queue, deploy, or parser status card with progress and current-step slots. |
 | `ProcessListPanel` | `@zvk/composite/process-list-panel` | List panel for app-owned background work items, rendered by default through workflow status cards. |
+| `WizardShell` | `@zvk/composite/wizard-shell` | Step-by-step workflow frame built on `@zvk/ui/stepper`, with app-owned validation, submission, and persistence. |
 | `ActivityFeed` | `@zvk/composite/activity-feed` | Ordered activity, audit, workflow, comment, or notification feed with app-owned ordering and timestamps. |
 | `ParameterEditor` | `@zvk/composite/parameter-editor` | Grouped parameter/settings rows where controls, validation, persistence, and reset actions stay in the app. |
 | `SettingsSectionStack` | `@zvk/composite/settings-section-stack` | Settings page section stack with controlled dirty/save presentation and app-owned forms. |
@@ -92,6 +120,18 @@ import { LinkAction } from "@zvk/composite/link-action";
 
 These components should stay focused on visual structure, semantics, and affordances; routing, domain mapping, and data orchestration remain in the consuming app.
 
+## Future Feature Acceptance
+
+Accept a new composite only when all of these are true:
+
+- [ ] It replaces repeated product-surface structure, not a primitive control or wrapper `div`.
+- [ ] Its name and props stay app-agnostic.
+- [ ] It composes public `@zvk/ui` exports, existing public composites, or local presentational helpers only.
+- [ ] Routing, persistence, data fetching, auth, billing, validation, table engines, AI SDKs, analytics, policy checks, and business rules stay in the app or a more specific package.
+- [ ] It fits an existing domain owner or clearly justifies a new owner in this README and the composite skill.
+- [ ] It can be covered by package export map, root export, internal domain barrel, CSS aggregate, type fixture, SSR import smoke, export validation, tarball inspection, README guidance, preview example, and skill update.
+- [ ] It remains SSR-safe at module initialization and deterministic in initial render.
+
 ## Migration Guide
 
 Migrate repeated app-owned shells into `@zvk/composite` only when the repeated part is visual structure and interaction affordance, not domain behavior.
@@ -99,11 +139,14 @@ Migrate repeated app-owned shells into `@zvk/composite` only when the repeated p
 | Repeated app surface | Composite target | Keep in the app |
 | --- | --- | --- |
 | Product workspace chrome with brand, account, nav, switcher, command, and content slots | `AppWorkspaceShell` | route tree, auth context, workspace persistence, account menu actions |
+| Generic workspace pages with navigation, actions, sidebars, and footer chrome | `SimpleWorkspaceShell` | route tree, permissions, data loading, selected-record state |
+| Split resource/detail, editor/preview, or list/inspector workspaces | `SplitWorkspaceShell` | persistence of pane sizes, route params, selected entity fetching, mobile drawer behavior |
 | Tab-with-sidebar or dense route workspace wrappers | `SectionedWorkspaceShell` | active route, URL updates, permission gating, tab persistence |
+| Tree plus result-list explorers | `ResourceExplorerShell` | search/filter algorithms, repository adapters, file I/O, routing, permissions, preview data fetching |
 | Route/page loading, empty, permission, error, and ready wrappers | `RouteStateFrame` or `StateSurface` | loader state, retry mutations, fetch errors, domain-specific empty data |
 | Page headers and breadcrumb headers | `WorkspaceHeader` or `BreadcrumbPageHeader` | router links, breadcrumb construction, page-level data policy |
 | Settings index pages and settings detail pages | `SettingsHubList` or `SettingsSectionStack` | route anchors, dirty-state calculation, validation, persistence, permission decisions |
-| Provider/API status cards, workflow cards, and process lists | `IntegrationStatusCard`, `WorkflowStatusCard`, or `ProcessListPanel` | health checks, polling, process control, retries, logs, provider credentials |
+| Provider/API status cards, workflow cards, process lists, and setup flows | `IntegrationStatusCard`, `WorkflowStatusCard`, `ProcessListPanel`, or `WizardShell` | health checks, polling, process control, retries, logs, provider credentials, validation, submission |
 | Audit logs, run histories, review threads, and notification feeds | `ActivityFeed` | event fetching, ordering, timestamps, subscriptions, comment mutations, infinite scroll |
 | AI model choices, conversation sidebars, and sticky prompt forms | `ProviderModelSelector`, `ConversationDirectory`, or `StickyComposer` | catalogs, compatibility rules, message fetching, prompt validation, streaming, tools, persistence |
 | Table page wrappers and table control bars | `DataTablePageFrame` or `DataTableControlBar` | table engine adapters, query state, sorting, filters, pagination, row selection, saved views |
@@ -420,3 +463,117 @@ import { DataTableControlBar } from "@zvk/composite/data-table-control-bar";
   selectionSummary="3 selected"
 />;
 ```
+
+## Local-First Workspace Recipe
+
+For a local-first todo or list workspace, reach for `AppWorkspaceShell` first, then use `FeatureShell` or `PageScaffold` for the page body, `SummaryMetricGrid` for counts, `EntityListSection` for the repeated list, `FormSurface` for the native form, and `StateSurface` for empty/loading/error presentation.
+
+Keep the app-owned parts small and explicit:
+
+- route state, persistence, and server actions stay in the app;
+- fields, details, and validation stay in app-owned primitives or local helpers;
+- shell chrome stays in `@zvk/composite`, not custom page CSS;
+- aim for under 120 lines of app-local CSS before you add another shell wrapper.
+
+```tsx
+import "@zvk/ui/styles.css";
+import "@zvk/composite/styles.css";
+
+import {
+  AppWorkspaceShell,
+  EntityListSection,
+  FeatureShell,
+  FormSurface,
+  StateSurface,
+  SummaryMetricGrid
+} from "@zvk/composite";
+
+type Task = {
+  id: string;
+  title: string;
+  status: "open" | "doing" | "done";
+  dueLabel: string;
+};
+
+async function createTask(formData: FormData) {
+  "use server";
+
+  // App-owned mutation, persistence, and revalidation.
+  void formData;
+}
+
+export function TasksPage({ tasks }: { tasks: readonly Task[] }) {
+  return (
+    <AppWorkspaceShell
+      brand={<strong>Northline</strong>}
+      navigation={<nav aria-label="Workspace navigation">...</nav>}
+    >
+      <FeatureShell
+        actions={<button type="button">Sync</button>}
+        description="Keep the workspace local-first and fast to scan."
+        title="Tasks"
+      >
+        <SummaryMetricGrid
+          columns={3}
+          metrics={[
+            { id: "open", label: "Open", value: 12 },
+            { id: "doing", label: "In progress", value: 4 },
+            { id: "done", label: "Done", value: 31 }
+          ]}
+          title="Today"
+        />
+
+        {tasks.length > 0 ? (
+          <EntityListSection
+            description="App-owned data, routes, and filters stay outside the composite."
+            getItemKey={(task) => task.id}
+            items={tasks}
+            renderItem={(task) => (
+              <article>
+                <h3>{task.title}</h3>
+                <p>
+                  {task.status} · {task.dueLabel}
+                </p>
+              </article>
+            )}
+            title="Backlog"
+          />
+        ) : (
+          <StateSurface
+            description="Add the first task with the form below."
+            state="empty"
+            title="No tasks yet"
+          />
+        )}
+      </FeatureShell>
+
+      <FormSurface
+        action={createTask}
+        description="Native inputs and server actions stay app-owned."
+        footer={<button type="submit">Create task</button>}
+        method="post"
+        title="Add task"
+      >
+        <label>
+          Title
+          <input name="title" required />
+        </label>
+        <label>
+          Notes
+          <textarea name="notes" rows={4} />
+        </label>
+      </FormSurface>
+    </AppWorkspaceShell>
+  );
+}
+```
+
+Checklist:
+
+- use `@zvk/composite` before adding custom shell CSS;
+- keep primitives for fields and details only;
+- prefer native forms and app-owned server actions over custom mutation plumbing.
+
+## Repo Skill
+
+Use `.codex/skills/use-zvk-composite/SKILL.md` when maintaining this package.

package/dist/domains/activity.d.ts

@@ -0,0 +1,2 @@
+export { ActivityFeed } from "../activity/activity-feed.js";
+export type { ActivityFeedGroup, ActivityFeedItem, ActivityFeedProps, ActivityFeedTone } from "../activity/activity-feed.js";

package/dist/domains/activity.js

@@ -0,0 +1 @@
+export { ActivityFeed } from "../activity/activity-feed.js";

package/dist/domains/ai.d.ts

@@ -0,0 +1,6 @@
+export { ConversationDirectory } from "../ai/conversation-directory.js";
+export type { ConversationDirectoryGroup, ConversationDirectoryItem, ConversationDirectoryProps } from "../ai/conversation-directory.js";
+export { ProviderModelSelector } from "../ai/provider-model-selector.js";
+export type { ProviderModelGroup, ProviderModelItem, ProviderModelSelectorProps } from "../ai/provider-model-selector.js";
+export { StickyComposer } from "../ai/sticky-composer.js";
+export type { StickyComposerProps } from "../ai/sticky-composer.js";

package/dist/domains/ai.js

@@ -0,0 +1,3 @@
+export { ConversationDirectory } from "../ai/conversation-directory.js";
+export { ProviderModelSelector } from "../ai/provider-model-selector.js";
+export { StickyComposer } from "../ai/sticky-composer.js";

package/dist/domains/data.d.ts

@@ -0,0 +1,10 @@
+export { DataTableControlBar } from "../data/data-table-control-bar.js";
+export type { DataTableControlBarProps } from "../data/data-table-control-bar.js";
+export { DataTablePageFrame } from "../data/data-table-page-frame.js";
+export type { DataTablePageFrameProps } from "../data/data-table-page-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";
+export type { EntityListSectionProps } from "../lists/entity-list-section.js";
+export { SummaryMetricGrid } from "../lists/summary-metric-grid.js";
+export type { SummaryMetric, SummaryMetricGridActionPosition, SummaryMetricGridColumns, SummaryMetricGridProps } from "../lists/summary-metric-grid.js";

package/dist/domains/data.js

@@ -0,0 +1,5 @@
+export { DataTableControlBar } from "../data/data-table-control-bar.js";
+export { DataTablePageFrame } from "../data/data-table-page-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";

package/dist/domains/detail.d.ts

@@ -0,0 +1,2 @@
+export { DetailInspectorPanel } from "../detail/detail-inspector-panel.js";
+export type { DetailInspectorPanelProps, DetailInspectorSection } from "../detail/detail-inspector-panel.js";

package/dist/domains/detail.js

@@ -0,0 +1 @@
+export { DetailInspectorPanel } from "../detail/detail-inspector-panel.js";

package/dist/domains/forms.d.ts

@@ -0,0 +1,4 @@
+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";

package/dist/domains/forms.js

@@ -0,0 +1,2 @@
+export { ConfirmActionDialog } from "../forms/confirm-action-dialog.js";
+export { FormSurface } from "../forms/form-surface.js";

package/dist/domains/navigation.d.ts

@@ -0,0 +1,16 @@
+export { BreadcrumbPageHeader, WorkspaceHeader } from "../navigation/workspace-header.js";
+export type { BreadcrumbPageHeaderItem, BreadcrumbPageHeaderProps, WorkspaceHeaderAlign, WorkspaceHeaderHeadingLevel, WorkspaceHeaderProps } from "../navigation/workspace-header.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 { LinkAction } from "../navigation/link-action.js";
+export type { LinkActionProps } from "../navigation/link-action.js";
+export { ResourceExplorerShell } from "../navigation/resource-explorer-shell.js";
+export type { ResourceExplorerShellProps, ResourceExplorerShellResource } from "../navigation/resource-explorer-shell.js";
+export { SectionedWorkspaceShell } from "../navigation/sectioned-workspace-shell.js";
+export type { SectionedWorkspaceItem, SectionedWorkspaceSection, SectionedWorkspaceShellProps } from "../navigation/sectioned-workspace-shell.js";
+export { SimpleWorkspaceShell } from "../navigation/simple-workspace-shell.js";
+export type { SimpleWorkspaceShellProps } from "../navigation/simple-workspace-shell.js";
+export { SplitWorkspaceShell } from "../navigation/split-workspace-shell.js";
+export type { SplitWorkspaceShellProps } from "../navigation/split-workspace-shell.js";

package/dist/domains/navigation.js

@@ -0,0 +1,8 @@
+export { BreadcrumbPageHeader, WorkspaceHeader } from "../navigation/workspace-header.js";
+export { CommandPaletteShell } from "../navigation/command-palette-shell.js";
+export { EntitySwitcherMenu } from "../navigation/entity-switcher-menu.js";
+export { LinkAction } from "../navigation/link-action.js";
+export { ResourceExplorerShell } from "../navigation/resource-explorer-shell.js";
+export { SectionedWorkspaceShell } from "../navigation/sectioned-workspace-shell.js";
+export { SimpleWorkspaceShell } from "../navigation/simple-workspace-shell.js";
+export { SplitWorkspaceShell } from "../navigation/split-workspace-shell.js";

package/dist/domains/settings.d.ts

@@ -0,0 +1,6 @@
+export { ParameterEditor } from "../settings/parameter-editor.js";
+export type { ParameterEditorDensity, ParameterEditorGroup, ParameterEditorProps, ParameterEditorRow } from "../settings/parameter-editor.js";
+export { SettingsHubList } from "../lists/settings-hub-list.js";
+export type { SettingsHubItem, SettingsHubListProps } from "../lists/settings-hub-list.js";
+export { SettingsSectionStack } from "../settings/settings-section-stack.js";
+export type { SettingsSection, SettingsSectionStackProps } from "../settings/settings-section-stack.js";

package/dist/domains/settings.js

@@ -0,0 +1,3 @@
+export { ParameterEditor } from "../settings/parameter-editor.js";
+export { SettingsHubList } from "../lists/settings-hub-list.js";
+export { SettingsSectionStack } from "../settings/settings-section-stack.js";

package/dist/domains/shell.d.ts

@@ -0,0 +1,6 @@
+export { AppWorkspaceShell } from "../navigation/app-workspace-shell.js";
+export type { AppWorkspaceShellProps } from "../navigation/app-workspace-shell.js";
+export { FeatureShell } from "../layout/feature-shell.js";
+export type { FeatureShellProps } from "../layout/feature-shell.js";
+export { PageScaffold } from "../layout/page-scaffold.js";
+export type { PageScaffoldMaxWidth, PageScaffoldProps } from "../layout/page-scaffold.js";

package/dist/domains/shell.js

@@ -0,0 +1,3 @@
+export { AppWorkspaceShell } from "../navigation/app-workspace-shell.js";
+export { FeatureShell } from "../layout/feature-shell.js";
+export { PageScaffold } from "../layout/page-scaffold.js";

package/dist/domains/state.d.ts

@@ -0,0 +1,4 @@
+export { RouteStateFrame } from "../state/route-state-frame.js";
+export type { RouteStateFrameProps, RouteStateFrameStatus } from "../state/route-state-frame.js";
+export { StateSurface } from "../state/state-surface.js";
+export type { StateSurfaceAlign, StateSurfaceProps, StateSurfaceSize, StateSurfaceState } from "../state/state-surface.js";

package/dist/domains/state.js

@@ -0,0 +1,2 @@
+export { RouteStateFrame } from "../state/route-state-frame.js";
+export { StateSurface } from "../state/state-surface.js";

package/dist/domains/workflow.d.ts

@@ -0,0 +1,8 @@
+export { IntegrationStatusCard } from "../integrations/integration-status-card.js";
+export type { IntegrationStatusCardProps, IntegrationStatusTone } from "../integrations/integration-status-card.js";
+export { ProcessListPanel } from "../workflows/process-list-panel.js";
+export type { ProcessListPanelItem, ProcessListPanelProps } from "../workflows/process-list-panel.js";
+export { WizardShell } from "../workflows/wizard-shell.js";
+export type { WizardShellProps, WizardShellStep, WizardShellStepStatus } from "../workflows/wizard-shell.js";
+export { WorkflowStatusCard } from "../workflows/workflow-status-card.js";
+export type { WorkflowStatusCardProps, WorkflowStatusTone } from "../workflows/workflow-status-card.js";

package/dist/domains/workflow.js

@@ -0,0 +1,4 @@
+export { IntegrationStatusCard } from "../integrations/integration-status-card.js";
+export { ProcessListPanel } from "../workflows/process-list-panel.js";
+export { WizardShell } from "../workflows/wizard-shell.js";
+export { WorkflowStatusCard } from "../workflows/workflow-status-card.js";

package/dist/index.d.ts

@@ -1,56 +1,10 @@
-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";
-export type { EntityListSectionProps } from "./lists/entity-list-section.js";
-export { SummaryMetricGrid } from "./lists/summary-metric-grid.js";
-export type { SummaryMetric, SummaryMetricGridActionPosition, SummaryMetricGridColumns, SummaryMetricGridProps } from "./lists/summary-metric-grid.js";
-export { SettingsHubList } from "./lists/settings-hub-list.js";
-export type { SettingsHubItem, SettingsHubListProps } from "./lists/settings-hub-list.js";
-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";
+export * from "./domains/activity.js";
+export * from "./domains/shell.js";
+export * from "./domains/navigation.js";
+export * from "./domains/state.js";
+export * from "./domains/data.js";
+export * from "./domains/forms.js";
+export * from "./domains/workflow.js";
+export * from "./domains/settings.js";
+export * from "./domains/ai.js";
+export * from "./domains/detail.js";

package/dist/index.js

@@ -1,28 +1,10 @@
-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";
+export * from "./domains/activity.js";
+export * from "./domains/shell.js";
+export * from "./domains/navigation.js";
+export * from "./domains/state.js";
+export * from "./domains/data.js";
+export * from "./domains/forms.js";
+export * from "./domains/workflow.js";
+export * from "./domains/settings.js";
+export * from "./domains/ai.js";
+export * from "./domains/detail.js";

package/dist/layout/page-scaffold.js

@@ -1,19 +1,27 @@
 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 "../navigation/shell-slot-rendering.js";
 import { WorkspaceHeader } from "../navigation/workspace-header.js";
 export function PageScaffold({ actions, aside, children, className, description, eyebrow, footer, headerAlign, headingLevel, maxWidth = "xl", ref, state, status, title, toolbar, ...props }) {
-    const hasTitle = title !== undefined && title !== null && title !== false;
-    const hasHeader = Boolean(hasTitle || actions || toolbar);
-    const hasAside = Boolean(aside);
+    const hasActions = hasRenderableShellSlot(actions);
+    const hasAside = hasRenderableShellSlot(aside);
+    const hasDescription = hasRenderableShellSlot(description);
+    const hasEyebrow = hasRenderableShellSlot(eyebrow);
+    const hasFooter = hasRenderableShellSlot(footer);
+    const hasState = hasRenderableShellSlot(state);
+    const hasStatus = hasRenderableShellSlot(status);
+    const hasTitle = hasRenderableShellSlot(title);
+    const hasToolbar = hasRenderableShellSlot(toolbar);
+    const hasHeader = hasTitle || hasEyebrow || hasDescription || hasStatus || hasToolbar || hasActions;
     const headerProps = {
-        ...(actions === undefined ? {} : { actions }),
-        ...(description === undefined ? {} : { description }),
-        ...(eyebrow === undefined ? {} : { eyebrow }),
+        ...(hasActions ? { actions } : {}),
+        ...(hasDescription ? { description } : {}),
+        ...(hasEyebrow ? { eyebrow } : {}),
         ...(headerAlign === undefined ? {} : { align: headerAlign }),
         ...(headingLevel === undefined ? {} : { headingLevel }),
-        ...(status === undefined ? {} : { status }),
-        ...(toolbar === undefined ? {} : { toolbar })
+        ...(hasStatus ? { status } : {}),
+        ...(hasToolbar ? { toolbar } : {})
     };
-    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-composite-page-scaffold", className), "data-max-width": maxWidth, "data-with-aside": hasAside ? "true" : "false", children: [hasTitle ? (_jsx(WorkspaceHeader, { ...headerProps, className: "zvk-composite-page-scaffold__header", title: title })) : hasHeader ? (_jsxs("div", { className: "zvk-composite-page-scaffold__header zvk-composite-page-scaffold__header--controls-only", children: [toolbar ? _jsx("div", { className: "zvk-composite-page-scaffold__toolbar", children: toolbar }) : null, actions ? _jsx("div", { className: "zvk-composite-page-scaffold__actions", children: actions }) : null] })) : null, state ? _jsx("div", { className: "zvk-composite-page-scaffold__state", children: state }) : null, _jsxs("div", { className: "zvk-composite-page-scaffold__grid", children: [_jsx("main", { className: "zvk-composite-page-scaffold__main", children: children }), hasAside ? _jsx("aside", { className: "zvk-composite-page-scaffold__aside", children: aside }) : null] }), footer ? _jsx("footer", { className: "zvk-composite-page-scaffold__footer", children: footer }) : null] }));
+    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-composite-page-scaffold", className), "data-max-width": maxWidth, "data-with-aside": hasAside ? "true" : "false", children: [hasHeader && hasTitle ? (_jsx(WorkspaceHeader, { ...headerProps, className: "zvk-composite-page-scaffold__header", title: title })) : hasHeader ? (_jsx(ShellHeaderChrome, { actions: actions, align: headerAlign, className: "zvk-composite-page-scaffold__header", description: description, eyebrow: eyebrow, status: status, toolbar: toolbar })) : null, hasState ? _jsx("div", { className: "zvk-composite-page-scaffold__state", children: state }) : null, _jsxs("div", { className: "zvk-composite-page-scaffold__grid", children: [_jsx("main", { className: "zvk-composite-page-scaffold__main", children: children }), hasAside ? _jsx("aside", { className: "zvk-composite-page-scaffold__aside", children: aside }) : null] }), hasFooter ? _jsx("footer", { className: "zvk-composite-page-scaffold__footer", children: footer }) : null] }));
 }

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

@@ -20,6 +20,7 @@ export interface CommandPaletteShellProps extends Omit<React.HTMLAttributes<HTML
     groups: readonly CommandPaletteGroup[];
     label?: React.ReactNode | undefined;
     loading?: boolean | undefined;
+    loadingLabel?: React.ReactNode | undefined;
     onCommandSelect?: ((command: CommandPaletteCommand) => void) | undefined;
     onOpenChange: (open: boolean) => void;
     onQueryChange?: ((query: string) => void) | undefined;
@@ -28,4 +29,4 @@ export interface CommandPaletteShellProps extends Omit<React.HTMLAttributes<HTML
     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;
+export declare function CommandPaletteShell({ className, defaultQuery, empty, footer, groups, label, loading, loadingLabel, onCommandSelect, onOpenChange, onQueryChange, open, placeholder, query, ref, ...props }: CommandPaletteShellProps): React.JSX.Element;

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

@@ -5,18 +5,8 @@ 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 }) {
+import { useControllableValue } from "../utils/use-controllable-value.js";
+export function CommandPaletteShell({ className, defaultQuery = "", empty = "No commands found.", footer, groups, label = "Command menu", loading = false, loadingLabel = "Loading...", onCommandSelect, onOpenChange, onQueryChange, open, placeholder = "Search commands...", query, ref, ...props }) {
     const [resolvedQuery, setResolvedQuery] = useControllableValue({
         defaultValue: defaultQuery,
         ...(onQueryChange ? { onChange: onQueryChange } : {}),
@@ -30,7 +20,7 @@ export function CommandPaletteShell({ className, defaultQuery = "", empty = "No
         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
+    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: loadingLabel })) : 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 } : {}),

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

@@ -6,17 +6,7 @@ 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];
-}
+import { useControllableValue } from "../utils/use-controllable-value.js";
 function hasRenderableNode(value) {
     return value !== undefined && value !== null && value !== false;
 }