@ramme-io/ui 4.0.1 → 4.1.1

package/README.md

@@ -98,10 +98,12 @@ Storybook will start at `http://localhost:6006` with all component variants, sta
 
 When contributing a new component, you must complete the full supply chain:
 
-1. **Component** — React code with typed props and JSDoc comments.
+1. **Component** — React code with typed props and a `@wizard` JSDoc block.
 2. **Story** — A corresponding `[ComponentName].stories.tsx` file.
-3. **Styleguide** — Inject into the appropriate section in the internal styleguide.
-4. **Registry** — Run `npm run generate:registry` to update the dynamic manifests.
+3. **Styleguide** — Add an example to a styleguide app's `src/features/styleguide/`.
+4. **Generate** — Run `pnpm run generate` here, or `pnpm -w run generate:ui` from
+   anywhere in the repo. That is manifest **and** registry **and** the reference section
+   below; `generate:registry` alone leaves the manifest stale.
 
 ---
 
@@ -152,10 +154,160 @@ Recognized tags:
 Versioning is automatic: the generator fingerprints each entry's description/props/tags/category
 and bumps the patch version in `component-history.json` whenever that fingerprint changes.
 
-**Coverage gap:** as of this writing, `auth/`, `hardware/`, `molecular/`, `theme/`,
-and `showroom/` have zero `@wizard`-tagged components — they're real, in-use code,
-but the AI scaffolding pipeline can't see any of it. Tag components in those folders
-as they're touched.
+**Coverage is enforced, not tracked in prose.**
+`products/ramme-marketing/src/__tests__/catalog-coverage.test.ts` fails when a
+component is exported from the package barrel but has no `@wizard` block, and
+when the committed manifest no longer matches the blocks in the source. Internal
+tooling — `theme/` and `showroom/` — is exempt by name in that test, which makes
+the exemption a decision someone made rather than an omission nobody noticed.
+
+---
+
+## Reference
+
+Generated from the `@wizard` blocks — the same source as `src/wizardManifest.ts`
+and the Showroom. Do not edit it by hand; run `pnpm run generate`.
+
+Props, variants and live examples are in Storybook (`pnpm run storybook`) and at
+[ramme.io/docs/catalog](https://ramme.io/docs/catalog). This table answers only
+"does it already exist, and what is it for?".
+
+<!-- BEGIN GENERATED REFERENCE — do not edit by hand -->
+
+### Components (83)
+
+| Name | SKU | What it is |
+| --- | --- | --- |
+| `Actions` | `@molecule/ai/actions` | A container for displaying a list of suggested, clickable actions that the user can take next. |
+| `ActivityFeed` | `@atom/templates-patterns/activity-feed` | Displays a chronological list of recent activities, typically with a timeline indicator. |
+| `AIChatThread` | `@molecule/ai/aichat-thread` | A complete chat surface — message history, streaming indicator, error banner, provider/model attribution, and the composer. |
+| `Alert` | `@molecule/feedback/alert` | Displays static, in-page messages to convey important information like success, warnings, or errors. |
+| `ArchitectureReferenceCard` | `@molecule/ai/architecture-reference-card` | AI-generated card summarizing this platform's own data architecture — stack, data model, AI pipelines, and sentinel fleet |
+| `AreaChart` | `@atom/charts/area-chart` | A theme-aware area chart component powered by Recharts, ideal for showing trends and volume over time. |
+| `Avatar` | `@atom/primitive/avatar` | Displays a user's profile picture or initials as a fallback, with different size options. |
+| `Badge` | `@atom/primitive/badge` | A small component to display a status, count, or label. |
+| `BarChart` | `@atom/charts/bar-chart` | A theme-aware bar chart component powered by Recharts, for comparing categorical data. |
+| `BrandLogo` | `@atom/primitive/brand-logo` | The application's brand mark, theme-aware and sized by a single prop. |
+| `BreadcrumbItem` | `@molecule/nav/breadcrumb-item` | Represents a single step or link within a `Breadcrumbs` navigation path. |
+| `Breadcrumbs` | `@molecule/nav/breadcrumbs` | A navigation component that shows the user's current location within a hierarchy of pages. |
+| `Button` | `@atom/primitive/button` | The primary interactive trigger for all user actions in the Ramme design system. |
+| `ButtonGroup` | `@atom/form/button-group` | Groups multiple Button components visually and can function as a segmented control (radio group). |
+| `ChartWithTable` | `@atom/templates-patterns/chart-with-table` | A wrapper component that combines a chart with an option to view its underlying data in a table within a drawer. |
+| `ChatFAB` | `@atom/primitive/chat-fab` | A floating action button (FAB) specifically for opening a chat interface, with a tooltip and icon. |
+| `Checkbox` | `@atom/form/checkbox` | A standard checkbox input for selecting one or more options from a set. |
+| `CircularDial` | `@atom/hardware/circular-dial` | A 270-degree arc gauge for a single live telemetry value, styled like a physical instrument dial. |
+| `CodeBlock` | `@atom/primitive/code-block` | The one way to show code. |
+| `ComboBox` | `@atom/form/combo-box` | A text input with an integrated dropdown list of selectable options, allowing both typing and selection. |
+| `CompanyProfileCard` | `@molecule/ai/company-profile-card` | A company summary for a ticker — sector, industry, and description — fetched on demand and cached. |
+| `ConnectorOverlay` | `@molecule/feedback/connector-overlay` | Covers a panel while its data source is connecting, and explains itself when the connection fails. |
+| `Conversation` | `@molecule/ai/conversation` | A container component that holds a series of Message components and manages the layout and scrolling of the chat history. |
+| `CounterpartyGraphCard` | `@molecule/ai/counterparty-graph-card` | AI-generated counterparty relationship card showing suppliers, customers, partners, and competitors inferred from alternative signals |
+| `DataCard` | `@molecule/data/data-card` | A Card that owns its own loading, error, and content states. |
+| `DataTable` | `@molecule/data/data-table` | A "Smart" data grid that renders data based on a simple JSON schema. |
+| `DatePicker` | `@atom/form/date-picker` | A theme-aware calendar input for selecting dates. |
+| `DenseMetricRibbon` | `@molecule/data/dense-metric-ribbon` | A compact horizontal strip of KPIs with optional trend arrows. |
+| `DivergenceMetricsCard` | `@molecule/ai/divergence-metrics-card` | AI-generated card showing operational and customer divergence scores — a signed delta between expected and observed performance |
+| `EdgeInsightTerminal` | `@atom/hardware/edge-insight-terminal` | A terminal-styled panel that streams an AI analysis of live edge telemetry as it arrives. |
+| `EmptyState` | `@molecule/feedback/empty-state` | A component for displaying a message when there is no data or content to show. |
+| `FileUpload` | `@atom/form/file-upload` | A modern drag-and-drop file upload area with visual feedback and file listing. |
+| `FormTemplate` | `@atom/form/form-template` | A data-driven form builder that renders a grid of input fields from a configuration array. |
+| `HardwareCommandButton` | `@atom/hardware/hardware-command-button` | A command trigger that shows the full round trip to a physical device — transmitting, awaiting acknowledgement, then success or failure. |
+| `Icon` | `@atom/primitive/icon` | A dynamic component that renders scalable vector icons from the Lucide library. |
+| `Input` | `@atom/form/input` | A theme-aware text input with label, icon, helper text, and validation state support. |
+| `KeyInjectionOverlay` | `@molecule/ai/key-injection-overlay` | Blocks the app and collects an AI provider key when the gateway reports one is missing or expired. |
+| `KpiGrid` | `@atom/templates-patterns/kpi-grid` | A framework-level abstraction that takes raw data and metric configurations to auto-calculate values and render a grid of StatCards. |
+| `Label` | `@molecule/form/label` | The accessible caption for a form control. |
+| `LineChart` | `@atom/charts/line-chart` | A theme-aware line chart component... |
+| `LiveQuoteCard` | `@molecule/ai/live-quote-card` | AI-generated live stock quote card with real-time price data |
+| `Loader` | `@molecule/ai/loader` | A compact, theme-aware animation for indicating AI processing states. |
+| `LoginPage` | `@atom/auth/login-page` | The standard sign-in screen — email and password, with inline error and loading states already wired. |
+| `Menu` | `@atom/primitive/menu` | A dropdown menu component, useful for navigation or contextual actions. |
+| `MenuDivider` | `@atom/primitive/menu-divider` | A visual separator for grouping MenuItems within a Menu. |
+| `MenuItem` | `@atom/primitive/menu-item` | An individual selectable item within a Menu component. |
+| `Message` | `@molecule/ai/message` | Displays a single message in a conversation, including an avatar, author, content, and optional suggestions. |
+| `MobileNav` | `@molecule/nav/mobile-nav` | Mobile navigation, in two shapes. |
+| `MultiSelect` | `@molecule/form/multi-select` | A searchable dropdown for picking several options at once, rendering selections as removable chips. |
+| `NewsSummaryCard` | `@molecule/ai/news-summary-card` | AI-generated news summary card with recent headlines |
+| `PageHeader` | `@atom/templates-patterns/page-header` | Displays the main header section of a page, including a title, optional description, and a slot for action buttons. |
+| `Pagination` | `@molecule/nav/pagination` | A navigation control for moving between pages of content. |
+| `PieChart` | `@atom/charts/pie-chart` | A theme-aware pie chart component powered by Recharts, for showing proportional relationships of parts to a whole. |
+| `Plan` | `@molecule/feedback/plan` | A strategic component for displaying roadmaps, checklists, or step-by-step plans. |
+| `PromptInput` | `@molecule/ai/prompt-input` | A specialized input field for users to type and submit prompts, including a send button. |
+| `Radio` | `@atom/form/radio` | A single radio button input, typically used within a group where only one option can be selected. |
+| `ScatterChart` | `@atom/charts/scatter-chart` | A theme-aware scatter plot for visualising correlations and distributions between two numeric variables. |
+| `SearchInput` | `@atom/form/search-input` | A specialized input for search functionality, using the base Input component with a search icon. |
+| `SectionHeader` | `@atom/templates-patterns/section-header` | A simple, consistent header for organizing sections of content within a page. |
+| `SegmentedControl` | `@atom/form/segmented-control` | A theme-aware linear toggle component. |
+| `Select` | `@atom/form/select` | A fully theme-aware single-value dropdown selector built on react-select. |
+| `SignupPage` | `@atom/auth/signup-page` | The standard account-creation screen — name, email, and password with inline error and loading states. |
+| `Skeleton` | `@molecule/feedback/skeleton` | A pulsing placeholder block for content that hasn't loaded yet. |
+| `Sparkline` | `@atom/hardware/sparkline` | A compact, axis-less trend line for showing the shape of a series inline — in a table cell, a stat tile, or next to a live value. |
+| `StatCard` | `@atom/templates-patterns/stat-card` | A specialized card for prominently displaying a key statistic, including an icon and optional trend indicator. |
+| `StateMatrix` | `@molecule/data/state-matrix` | A compact grid for cross-referencing entities against attributes, where each cell is a clickable state rather than free text. |
+| `StatusBadge` | `@molecule/data/status-badge` | A consistent status indicator featuring a color-coded dot and an optional text label. |
+| `Stepper` | `@molecule/nav/stepper` | Guides users through a sequence of discrete steps, ideal for multi-step forms or onboarding flows. |
+| `StockChart` | `@molecule/ai/stock-chart` | AI-generated financial chart component with Bloomberg-style theming |
+| `Suggestion` | `@molecule/ai/suggestion` | A small, pill-shaped button that offers a quick, suggested reply or follow-up question to the user. |
+| `Table` | `@molecule/data/table` | A simple, theme-aware HTML table component for displaying tabular data, with support for custom cell rendering and empty states. |
+| `TabPanel` | `@molecule/nav/tab-panel` | Represents a single tab and its associated content panel within a `Tabs` component. |
+| `Tabs` | `@molecule/nav/tabs` | A navigation component that allows users to switch between different content panels within the same area. |
+| `TelemetryGraph` | `@molecule/ai/telemetry-graph` | AI-generated telemetry visualization component |
+| `TelemetryLog` | `@molecule/iot/telemetry-log` | A scrolling, newest-first table of raw sensor readings with a bounded row count. |
+| `Textarea` | `@atom/form/textarea` | A theme-aware multi-line text input with label, helper text, and validation state support. |
+| `TippyTooltip` | `@molecule/feedback/tippy-tooltip` | A flexible and theme-aware tooltip component that displays additional information on hover. |
+| `Toast` | `@molecule/feedback/toast` | A single, transient notification message that appears briefly to provide feedback. |
+| `ToastProvider` | `@molecule/feedback/toast-provider` | Provides a context for displaying transient notifications (toasts). |
+| `ToggleSwitch` | `@atom/form/toggle-switch` | A theme-aware toggle switch component, offering a boolean input alternative to a checkbox. |
+| `useToast` | `@molecule/feedback/use-toast` | A React hook to easily add and dismiss toast notifications anywhere within a `ToastProvider`. |
+| `WatchlistEngine` | `@molecule/block/watchlist-engine` | A self-contained financial watchlist showing tickers with live price, day change, market cap, and a risk grade. |
+| `WaterPumpControl` | `@molecule/iot/water-pump-control` | An irrigation control block: choose automatic or manual operation and set the soil-moisture target the controller should hold. |
+
+### Layouts (33)
+
+| Name | SKU | What it is |
+| --- | --- | --- |
+| `AboutRamme` | `@chassis/layout/about-ramme` | The "About" panel for a Settings Console — what the framework is, which packages make it up, and why it is built this way. |
+| `Accordion` | `@chassis/layout/accordion` | A container for multiple collapsible sections (`AccordionItem`s), useful for organizing content. |
+| `AccordionItem` | `@chassis/layout/accordion-item` | A single, collapsible section within an `Accordion` component, consisting of a header and a hidden content body. |
+| `ActionBar` | `@chassis/layout/action-bar` | A persistent bar, typically at the bottom of a form or page, used to group primary actions like 'Save' and 'Cancel'. |
+| `AppShell` | `@chassis/layout/app-shell` | The viewport orchestrator — the outermost frame that owns the sidebar, header, toolbar, statusbar, and inspector slots and decides how they compose. |
+| `AuthLayout` | `@chassis/layout/auth-layout` | The centred, chrome-free frame for unauthenticated screens, rendering the matched child route via an Outlet. |
+| `ButtonItem` | `@chassis/layout/button-item` | A single row inside a UserNav menu — icon, label, action. |
+| `Card` | `@chassis/layout/card` | The primary container atom for grouping related content. |
+| `CardContent` | `@chassis/layout/card-content` | The main body zone of a Card. |
+| `CardDescription` | `@chassis/layout/card-description` | A muted subtitle rendered below CardTitle inside a CardHeader. |
+| `CardFooter` | `@chassis/layout/card-footer` | The bottom action zone of a Card. |
+| `CardHeader` | `@chassis/layout/card-header` | The top zone of a Card. |
+| `CardLabel` | `@chassis/layout/card-label` | A compact uppercase-tracking eyebrow label for a Card's header, optionally preceded by an icon. |
+| `CardTitle` | `@chassis/layout/card-title` | The primary heading inside a CardHeader. |
+| `CollectionLayout` | `@chassis/layout/collection-layout` | The standard page arrangement for any list of records — title, description, header actions, an optional metrics ribbon, an optional filter sidebar, and a bulk-action bar. |
+| `DefinitionDescription` | `@chassis/layout/definition-description` | Represents the description for a term within a `DefinitionList`. |
+| `DefinitionList` | `@chassis/layout/definition-list` | Displays a list of terms and their corresponding definitions. |
+| `DefinitionTerm` | `@chassis/layout/definition-term` | Represents a term within a `DefinitionList`. |
+| `DetailDrawer` | `@chassis/layout/detail-drawer` | A resizable side panel for inspecting one record without leaving the list. |
+| `DeviceCard` | `@chassis/layout/device-card` | A specialized card designed to represent a physical device or a digital entity with live state. |
+| `Drawer` | `@chassis/layout/drawer` | A slide-in panel that overlays the page from any edge. |
+| `FilterPanel` | `@chassis/layout/filter-panel` | A bordered card container for a row of filter fields (selects, inputs, date ranges), laid out as a wrapping flex row with fields aligned to their bottom edge — the standard filter-bar shape used above a data table or grid. |
+| `Header` | `@chassis/layout/header` | The top bar region of the app shell. |
+| `List` | `@chassis/layout/list` | A component for displaying either ordered or unordered lists of `ListItem`s. |
+| `ListItem` | `@chassis/layout/list-item` | Represents a single item within a `List` component. |
+| `Modal` | `@chassis/layout/modal` | A centered dialog that blocks interaction with the page until dismissed. |
+| `PageContainer` | `@chassis/layout/page-container` | Standard responsive padding wrapper for the content inside a page. |
+| `SettingsContainer` | `@chassis/layout/settings-container` | The canonical settings page arrangement, with a fixed slot per section so every app's settings read the same way. |
+| `Sheet` | `@chassis/layout/sheet` | A bottom sheet that opens at a partial height and grows to full screen as you drag or scroll it up. |
+| `Sidebar` | `@chassis/layout/sidebar` | A collapsible, theme-aware application navigation rail. |
+| `Statusbar` | `@chassis/layout/statusbar` | The persistent strip pinned to the bottom of the app shell. |
+| `Toolbar` | `@chassis/layout/toolbar` | The secondary action strip that sits beneath the header. |
+| `UserNav` | `@chassis/layout/user-nav` | The signed-in user's avatar menu — identity plus account actions. |
+
+### Mock data (2)
+
+| Name | SKU | What it is |
+| --- | --- | --- |
+| `mockChartData` | `@data/mock/mock-chart-data` | Pre-defined datasets for prototyping charts and other data-driven components. |
+| `mockTableData` | `@data/mock/mock-table-data` | Pre-defined datasets for prototyping tables and other data-driven components. |
+
+<!-- END GENERATED REFERENCE -->
 
 ---
 

package/dist/blocks/ai/Actions.js

@@ -1,5 +1,5 @@
-import { jsx as o } from "react/jsx-runtime";
-const s = ({ children: t, onClick: r }) => /* @__PURE__ */ o("button", { onClick: r, className: "px-3 py-1.5 bg-card-alt hover:bg-bg-hover border border-border rounded-full text-sm text-text-light transition-colors", children: t }), a = ({ children: t }) => /* @__PURE__ */ o("div", { className: "flex flex-wrap gap-2 mt-3", children: t });
+import { jsx as r } from "react/jsx-runtime";
+const s = ({ children: o, onClick: t }) => /* @__PURE__ */ r("button", { onClick: t, className: "px-3 py-1.5 bg-card-alt hover:bg-bg-hover border border-border rounded-full text-sm text-muted-foreground transition-colors", children: o }), a = ({ children: o }) => /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-2 mt-3", children: o });
 export {
   a as Actions,
   s as Suggestion

package/dist/blocks/ai/PromptInput.js

@@ -1,14 +1,14 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { Icon as m } from "../../components/ui/Icon.js";
-const i = ({ value: t, onChange: r, onSubmit: o, placeholder: s = "Type your message..." }) => /* @__PURE__ */ n("form", { onSubmit: o, className: "flex items-center p-2 border-t border-border", children: [
+const i = ({ value: r, onChange: t, onSubmit: o, placeholder: n = "Type your message..." }) => /* @__PURE__ */ s("form", { onSubmit: o, className: "flex items-center p-2 border-t border-border", children: [
   /* @__PURE__ */ e(
     "input",
     {
       type: "text",
-      placeholder: s,
-      className: "flex-1 p-2 bg-transparent focus:outline-none text-text",
-      value: t,
-      onChange: r
+      placeholder: n,
+      className: "flex-1 p-2 bg-transparent focus:outline-none text-foreground",
+      value: r,
+      onChange: t
     }
   ),
   /* @__PURE__ */ e("button", { type: "submit", className: "p-2 text-primary hover:bg-primary/10 rounded-full transition-colors", children: /* @__PURE__ */ e(m, { name: "send" }) })