@nadicodeai/ui 10.0.2 → 12.1.0

package/docs/product-sections.md

@@ -1,200 +0,0 @@
-# Product Sections
-
-U5 adds shared shell skeletons, plugin containment, installer states, and automation/settings sections. These components are presentational only. Consumers own routing, persistence, server actions, runtime adapters, permission decisions, retries, plugin trust, installer side effects, analytics, and product-specific page copy.
-
-Import components through the existing component subpath after build:
-
-```tsx
-import { DashboardShell } from "@nadicodeai/ui/components/dashboard-shell"
-import { PluginSlotBoundary } from "@nadicodeai/ui/components/plugin-slot-boundary"
-```
-
-Fixtures live in:
-
-- [`../tests/guards/product-sections.test.ts`](../tests/guards/product-sections.test.ts)
-- [`../tests/guards/product-sections-ssr.test.ts`](../tests/guards/product-sections-ssr.test.ts)
-
-## Boundaries
-
-| Component | Package owns | Consumer owns |
-| --- | --- | --- |
-| `DashboardShell` | Responsive slot layout, sidebar/header/content/inspector regions, mobile sidebar trigger, focusable shell structure, overflow containment. | Route state, nav definitions, page data, permission filtering, tenant/workspace context, page-specific copy. |
-| `DesktopAppShell` | Titlebar/statusbar framing, activity rail, primary/secondary/inspector panes, resizable panel composition, overflow containment. | Desktop runtime, window controls, route selection, IPC, command execution, local persistence. |
-| `InstallerShell` | Welcome/progress/success/failure presentation, progress display, step list, feedback-state composition. | Installer state machine, platform checks, downloads, retries, recovery behavior, logs. |
-| `PluginSlotBoundary` | Visible plugin content boundary, permission badges, warning/error alerts, contained overflow, redaction guidance. | Plugin runtime, trust decisions, install/remove actions, grants, sandbox policy, secrets. |
-| `AutomationSection` | Automation row layout, status badges, enable switch placement, empty state. | Automation definitions, scheduling, execution, persistence, permission rules. |
-| `ProviderSettings` | Provider setting rows built on `SettingsSection` and `SettingsField`. | Provider list, validation, saving, rate limits, billing or policy behavior. |
-| `McpServerSettings` | MCP server rows, status badges, enable switch placement, field semantics. | Server discovery, connection checks, grants, persistence, tool execution. |
-| `EnvironmentVariablesSettings` | Variable name rows and redacted state display. | Secret storage, reveal controls, value validation, rotation, syncing. |
-
-## DashboardShell
-
-Use `DashboardShell` when a web/admin surface needs shared app chrome without the package owning navigation.
-
-```tsx
-<DashboardShell
-  sidebar={<WorkspaceNav />}
-  sidebarHeader={<WorkspaceSwitcher />}
-  sidebarFooter={<AccountMenu />}
-  header={<PageHeading />}
-  headerActions={<RunAction />}
-  inspector={<PermissionSummary />}
->
-  <AgentQueue />
-</DashboardShell>
-```
-
-| Prop | Purpose |
-| --- | --- |
-| `sidebar` | Sidebar content slot. Consumers pass nav items or any compatible sidebar content. |
-| `header` / `headerActions` | Top chrome slots. The package adds the mobile navigation trigger. |
-| `children` | Main content region. |
-| `inspector` | Optional right-side inspector that stacks below content on smaller screens. |
-| `sidebarHeader` / `sidebarFooter` | Optional sidebar framing slots. |
-| `sidebarSide` / `sidebarVariant` / `sidebarCollapsible` | Pass-through shell options over the existing sidebar primitive. |
-
-Accessibility: the shell exposes labeled content and inspector regions. The mobile trigger has an accessible label and the underlying sidebar primitive preserves keyboard access and collapsed labels.
-
-## DesktopAppShell
-
-Use `DesktopAppShell` for desktop-shaped layouts where the consumer owns runtime behavior.
-
-```tsx
-<DesktopAppShell
-  title="Nadia desktop"
-  activityRail={<ActivityButtons />}
-  secondaryPane={<RunContext />}
-  inspectorRail={<Inspector />}
-  statusbar={<StatusLine />}
->
-  <Workspace />
-</DesktopAppShell>
-```
-
-| Prop | Purpose |
-| --- | --- |
-| `title` / `titlebar` / `titlebarActions` | Titlebar slots. `titlebar` can replace the default title row. |
-| `activityRail` | Left rail slot for mode buttons or app tools. |
-| `children` | Primary pane. |
-| `secondaryPane` | Optional resizable middle pane. |
-| `inspectorRail` | Optional resizable inspector pane. |
-| `statusbar` | Bottom status slot. |
-| `primaryPaneSize` / `secondaryPaneSize` / `inspectorPaneSize` | Initial resizable panel sizes. |
-
-The component does not assume browser routing, desktop IPC, or command execution.
-
-## InstallerShell
-
-Use `InstallerShell` for installer or setup flows with an app-owned state machine.
-
-```tsx
-<InstallerShell
-  state="progress"
-  title="Installing"
-  description="Preparing the local workspace."
-  progressValue={62}
-  steps={[
-    { id: "package", label: "Prepare package", status: "complete" },
-    { id: "settings", label: "Apply settings", status: "running" },
-  ]}
-  actions={<CancelButton />}
-/>
-```
-
-Supported states: `welcome`, `progress`, `success`, and `failure`.
-
-Step statuses: `pending`, `running`, `complete`, and `error`.
-
-The shell uses `FeedbackState` for the primary state message. Consumers provide the installer state, recovery actions, and side effects.
-
-## PluginSlotBoundary
-
-Use `PluginSlotBoundary` around extension or plugin-rendered content. It makes the plugin boundary visible and keeps overflow contained.
-
-```tsx
-<PluginSlotBoundary
-  title="Planner plugin"
-  status="warning"
-  permissions={[
-    { id: "files", label: "Read files", level: "review" },
-    { id: "network", label: "Network blocked", level: "denied" },
-  ]}
-  warning="Review plugin scope before granting access."
->
-  <PluginPreview />
-</PluginSlotBoundary>
-```
-
-Supported statuses: `ready`, `warning`, `error`, and `disabled`.
-
-Permission levels: `safe`, `review`, `risk`, and `denied`.
-
-Redaction rule: package fixtures and examples may show synthetic names, variable names, and redacted placeholders only. They must not include secret values, environment variable values, raw terminal output, user memory, or hidden reasoning.
-
-## AutomationSection
-
-Use `AutomationSection` for a list of app-owned automations.
-
-```tsx
-<AutomationSection
-  title="Automation runs"
-  automations={[
-    {
-      id: "briefing",
-      title: "Briefing preparation",
-      description: "Drafts a review packet.",
-      status: "running",
-      enabled: true,
-      toggleLabel: "Toggle briefing preparation",
-    },
-  ]}
-  onAutomationEnabledChange={setAutomationEnabled}
-/>
-```
-
-Supported statuses: `ready`, `running`, `paused`, `error`, and `disabled`.
-
-The callback reports a requested toggle. It does not save, schedule, retry, or execute anything.
-
-## Settings Patterns
-
-`ProviderSettings`, `McpServerSettings`, and `EnvironmentVariablesSettings` compose `SettingsSection` and `SettingsField` so settings rows share label, description, error, invalid, disabled, and control alignment behavior.
-
-```tsx
-<ProviderSettings
-  fields={[
-    {
-      id: "provider",
-      label: "Provider",
-      description: "Displayed provider label.",
-      value: "Nadia synthetic provider",
-    },
-  ]}
-/>
-
-<McpServerSettings
-  servers={[
-    {
-      id: "docs",
-      label: "Docs server",
-      description: "Read-only documentation context.",
-      status: "connected",
-      enabled: true,
-    },
-  ]}
-/>
-
-<EnvironmentVariablesSettings
-  variables={[
-    {
-      id: "model-key",
-      name: "NADIA_MODEL_KEY",
-      description: "Configured by the consuming app.",
-      state: "configured",
-      required: true,
-    },
-  ]}
-/>
-```
-
-Environment variable rows intentionally render names and redacted state only. They do not accept or display actual values.