@vadimcomanescu/nadicode-design-system 5.0.1 → 5.0.2

package/.agents/skills/seed/SKILL.md

@@ -200,17 +200,39 @@ Token source of truth: `src/lib/tokens.config.js` (authored), `src/index.css` (g
 
 Use `Heading` for semantic headings. Use `Typography` for non-heading copy only.
 
-```tsx
-import { seedComponents } from "@vadimcomanescu/nadicode-design-system/catalog/components"
-const { Heading, Typography } = seedComponents
-
-<Heading level={1}>Page title</Heading>
-<Heading level={2} size="section">Section title</Heading>
-<Heading level={3} size="label">Card title</Heading>
-
-<Typography>Body copy</Typography>
-<Typography variant="small">Meta text</Typography>
-<Typography variant="muted">Muted text</Typography>
+```json
+{
+  "page-title": {
+    "type": "Heading",
+    "props": { "level": 1, "size": null, "className": null },
+    "children": ["Page title"]
+  },
+  "section-title": {
+    "type": "Heading",
+    "props": { "level": 2, "size": "section", "className": null },
+    "children": ["Section title"]
+  },
+  "card-title": {
+    "type": "Heading",
+    "props": { "level": 3, "size": "label", "className": null },
+    "children": ["Card title"]
+  },
+  "body-text": {
+    "type": "Typography",
+    "props": { "variant": null, "className": null },
+    "children": ["Body copy"]
+  },
+  "meta-text": {
+    "type": "Typography",
+    "props": { "variant": "small", "className": null },
+    "children": ["Meta text"]
+  },
+  "muted-text": {
+    "type": "Typography",
+    "props": { "variant": "muted", "className": null },
+    "children": ["Muted text"]
+  }
+}
 ```
 
 **Heading props**
@@ -353,12 +375,12 @@ Do not copy DS catalog files into the app.
 **Test helpers**
 Consumer apps can import `SeedTestProvider` from `@vadimcomanescu/nadicode-design-system/test` when they need the package-owned test wrapper. The showcase app keeps its local `@/test/SeedTestProvider` wrapper for in-repo tests.
 
-**LanguageSwitcher** (`@vadimcomanescu/nadicode-design-system/language-switcher`)
-Props: `locales` (string[], default `['en','it']`), `value` (current locale), `onLocaleChange` (callback), `className`. Uses `useTranslations('components.languageSwitcher')` for labels. Without `onLocaleChange`, sets a `NEXT_LOCALE` cookie and calls `router.refresh()`.
+**LanguageSwitcher** (catalog: `seedComponents.LanguageSwitcher`)
+Consumed via the catalog. Schema props: `locales` (string[], default `['en','it']`), `value` (current locale), `className`. Fires `emit('localeChange')` for locale changes. Uses `useTranslations('components.languageSwitcher')` for labels. Without a `localeChange` handler, sets a `NEXT_LOCALE` cookie and calls `router.refresh()`.
 
-**SettingsModal** (`@vadimcomanescu/nadicode-design-system/settings-modal`)
-Exports: `defaultSettingsTabs`, `SettingsTabDef` (interface), `SettingsModal` (component).
-Props: `open`, `onOpenChange`, `defaultTab`, `tabs` (SettingsTabDef[]), `renderContent` (preferred: `(tab: string) => ReactNode`), `ContentComponent` (deprecated). Uses `useTranslations('pages.settings')` for tab labels and headings. The default language tab renders `LanguageSwitcher` automatically.
+**SettingsModal** (catalog: `seedComponents.SettingsModal`)
+Consumed via the catalog. Exports: `defaultSettingsTabs`, `SettingsTabDef` (interface).
+Schema props: `open`, `defaultTab`, `tabs` (SettingsTabDef[]). Fires `emit('openChange')` and `emit('renderContent')` for modal state and tab content. Uses `useTranslations('pages.settings')` for tab labels and headings. The default language tab renders `LanguageSwitcher` automatically.
 
 ---
 
@@ -376,7 +398,7 @@ Every page = **Shell > Sections > Components**.
 
 | Intent | Shell | Components |
 |--------|-------|------------|
-| App (dashboard, settings, CRUD, analytics, agents) | `app-shell` | `Sidebar` + top bar + `SearchCommand` |
+| App (dashboard, settings, CRUD, analytics, agents) | `app-shell` | `Sidebar` + top bar + `CommandPaletteBlock` |
 | Marketing (landing, pricing, blog) | `marketing-shell` | `HeaderBlock` + `FooterBlock` |
 | Auth | `auth-shell` | `AuthLayout` (split/centered) |
 | Onboarding | `onboarding-shell` | Minimal header + progress bar |

package/.agents/skills/seed/references/composition.md

@@ -26,7 +26,7 @@ Shell           -- persistent frame (sidebar, header, footer)
 
 | Intent | Shell | Components |
 |--------|-------|------------|
-| App pages (dashboard, settings, CRUD, analytics, agents) | `app-shell` | `Sidebar` + top bar + `SearchCommand` |
+| App pages (dashboard, settings, CRUD, analytics, agents) | `app-shell` | `Sidebar` + top bar + `CommandPaletteBlock` |
 | Marketing (landing, pricing, blog) | `marketing-shell` | `HeaderBlock` + `FooterBlock` |
 | Auth (login, signup, reset) | `auth-shell` | `AuthLayout` (split-screen or centered) |
 | Onboarding | `onboarding-shell` | Minimal header + progress bar, no nav |
@@ -110,26 +110,42 @@ Is it marketing / public?
 
 ### Section Template
 
-```tsx
-{/* App section */}
-<section className="py-6 md:py-8">
-  <div className="flex items-center justify-between mb-4">
-    <Heading level={3} size="subsection" >Section Title</Heading>
-    <Button variant="outline" size="sm">Action</Button>
-  </div>
-  {/* Section content */}
-</section>
-
-{/* Marketing section */}
-<section className="py-16 md:py-24">
-  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-    <Heading level={2} size="section"  className="mb-4">Section Title</Heading>
-    <Typography variant="lead" className="mb-12 text-text-secondary">
-      Section description
-    </Typography>
-    {/* Section content */}
-  </div>
-</section>
+App section — heading + action bar above content:
+
+```json
+{
+  "component": "section",
+  "props": { "className": "py-6 md:py-8" },
+  "children": [
+    {
+      "component": "div",
+      "props": { "className": "flex items-center justify-between mb-4" },
+      "children": [
+        { "component": "Heading", "props": { "level": 3, "size": "subsection", "children": "Section Title" } },
+        { "component": "Button", "props": { "variant": "outline", "size": "sm", "children": "Action" } }
+      ]
+    }
+  ]
+}
+```
+
+Marketing section — centered heading + lead text above content:
+
+```json
+{
+  "component": "section",
+  "props": { "className": "py-16 md:py-24" },
+  "children": [
+    {
+      "component": "div",
+      "props": { "className": "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center" },
+      "children": [
+        { "component": "Heading", "props": { "level": 2, "size": "section", "className": "mb-4", "children": "Section Title" } },
+        { "component": "Typography", "props": { "variant": "lead", "className": "mb-12 text-text-secondary", "children": "Section description" } }
+      ]
+    }
+  ]
+}
 ```
 
 ---

package/.agents/skills/seed/references/glass-and-effects.md

@@ -95,13 +95,15 @@
 
 ### AmbientGrid
 
-Subtle CSS grid overlay for structural rhythm.
+Subtle CSS grid overlay for structural rhythm. Cataloged — use via `seedComponents`.
 
 ```tsx
-import { AmbientGrid } from "@vadimcomanescu/nadicode-design-system/ambient-grid"
-<AmbientGrid />            // 24px cells, 0.06 opacity
-<AmbientGrid debug />      // 0.15 opacity for alignment checking
-<AmbientGrid size={32} />  // Custom cell size
+import { seedComponents } from "@vadimcomanescu/nadicode-design-system/catalog/components"
+<seedComponents.AmbientGrid props={{}} emit={() => {}} on={{}} />
+// With custom cell size:
+<seedComponents.AmbientGrid props={{ size: 32 }} emit={() => {}} on={{}} />
+// Debug mode (0.15 opacity for alignment checking):
+<seedComponents.AmbientGrid props={{ debug: true }} emit={() => {}} on={{}} />
 ```
 
 ### MeteorShower

package/.agents/skills/seed/references/responsive.md

@@ -99,78 +99,37 @@ Breakpoint contracts, mobile-first patterns, touch targets, and responsive rules
 
 ### Navigation Collapse
 
-```tsx
-// Desktop: full sidebar visible
-// Mobile: sheet-based sidebar triggered by hamburger
-<SidebarProvider>
-  <Sidebar className="hidden lg:flex">
-    {/* Full sidebar */}
-  </Sidebar>
-  <main className="flex-1">
-    <header className="lg:hidden flex items-center p-4">
-      <SidebarTrigger />
-      <span className="ml-3 font-medium">Page Title</span>
-    </header>
-    {children}
-  </main>
-</SidebarProvider>
-```
+Desktop shows the full sidebar; mobile hides it behind a sheet triggered by a hamburger button.
+
+- Sidebar element: `className="hidden lg:flex"` (visible only at `lg:` and up).
+- Mobile header: `className="lg:hidden"` — contains `SidebarTrigger` and the page title.
+- The `SidebarProvider` wraps the layout; the sheet/drawer behavior is built into the `Sidebar` block.
+
+CSS classes that drive this pattern: `hidden lg:flex` on the sidebar, `lg:hidden` on the mobile header bar.
 
 ### Table to Card List
 
-```tsx
-// Desktop: DataTable. Mobile: Card list.
-<div className="hidden sm:block">
-  <DataTable columns={columns} data={data} />
-</div>
-<div className="sm:hidden space-y-3">
-  {data.map((item) => (
-    <Card key={item.id} className="p-4">
-      {/* Card representation of row */}
-    </Card>
-  ))}
-</div>
-```
+At `sm:` and up, render `DataTable`. Below `sm:`, render a card list with one `Card` per row.
+
+- Table wrapper: `className="hidden sm:block"`
+- Card list wrapper: `className="sm:hidden space-y-3"`
+- Each card uses `className="p-4"` and mirrors the key fields of the table row.
 
 ### Tab Navigation Scroll
 
-```tsx
-// Horizontal scrollable tabs on mobile
-<div className="overflow-x-auto -mx-4 px-4">
-  <TabsList className="inline-flex w-auto min-w-full sm:w-full">
-    <TabsTrigger value="general">General</TabsTrigger>
-    <TabsTrigger value="security">Security</TabsTrigger>
-    <TabsTrigger value="billing">Billing</TabsTrigger>
-  </TabsList>
-</div>
-```
+Settings and similar pages use horizontally scrollable tab lists on mobile so all tabs are reachable without wrapping.
+
+- Outer wrapper: `className="overflow-x-auto -mx-4 px-4"` (negative margin bleeds to viewport edge, then re-pads).
+- `TabsList`: `className="inline-flex w-auto min-w-full sm:w-full"` — `inline-flex w-auto` allows scroll; `min-w-full` ensures full width when content is narrow; `sm:w-full` snaps to full width on larger screens.
 
 ### Multi-Panel to Drawers
 
-```tsx
-// Desktop: visible panels. Mobile: main content + drawer-triggered panels.
-<div className="flex h-dvh">
-  <aside className="hidden xl:block w-[280px] border-r border-border">
-    <TeamPanel />
-  </aside>
-  <main className="flex-1 flex flex-col">
-    <header className="xl:hidden flex items-center gap-2 p-3 border-b border-border">
-      <Sheet>
-        <SheetTrigger asChild>
-          <Button variant="ghost" size="icon"><UsersIcon size={16} /></Button>
-        </SheetTrigger>
-        <SheetContent side="left"><TeamPanel /></SheetContent>
-      </Sheet>
-      <span className="flex-1 text-center font-medium">Agent Chat</span>
-    </header>
-    <ConversationArea />
-    <Composer />
-  </main>
-  <aside className="hidden xl:block w-[320px] border-l border-border">
-    <WorkPanel />
-  </aside>
-</div>
-```
+3-panel agent workbench: both side panels are visible at `xl:`, the left panel is visible at `lg:`, and on mobile both panels move into sheet drawers.
+
+- Left panel (`aside`): `className="hidden xl:block w-[280px] border-r border-border"`.
+- Right panel (`aside`): `className="hidden xl:block w-[320px] border-l border-border"`.
+- Mobile header: `className="xl:hidden"` — contains `Sheet`/`SheetTrigger` buttons to open each panel as a drawer.
+- Main area: `className="flex-1 flex flex-col"` with `h-dvh` on the outer container (never `h-screen`).
 
 ---
 

package/.agents/skills/seed/references/state-machines.md

@@ -79,39 +79,33 @@ Expected wait time?
 
 ### Form Implementation Pattern
 
-```tsx
-import { useForm } from "react-hook-form"
-import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@vadimcomanescu/nadicode-design-system/form"
-
-function MyForm() {
-  const form = useForm<FormValues>({ defaultValues: { name: "" } })
-  const { formState: { isDirty, isSubmitting } } = form
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Name</FormLabel>  {/* Always stacked, above */}
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />  {/* Validation error */}
-            </FormItem>
-          )}
-        />
-        <Button type="submit" disabled={!isDirty || isSubmitting}>
-          {isSubmitting ? <Spinner /> : "Save"}
-        </Button>
-      </form>
-    </Form>
-  )
+Forms are specified as JSON element trees. Use `$bindState` to wire form fields to block state, and emit `"submit"` when the form is submitted. The block handles `isDirty` / `isSubmitting` state internally via `useBoundProp`.
+
+```json
+{
+  "component": "FormBlock",
+  "props": {
+    "fields": [
+      {
+        "name": "name",
+        "label": "Name",
+        "type": "text",
+        "required": true
+      }
+    ],
+    "submitLabel": "Save"
+  },
+  "on": {
+    "submit": "handleSave"
+  }
 }
 ```
 
+Key rules:
+- Labels always stacked above their field (never inline).
+- `FormMessage` (field-level validation error) renders below the field automatically.
+- Submit button shows `Spinner` while `isSubmitting`; disabled when form is `pristine`.
+
 ---
 
 ## CRUD List States
@@ -213,22 +207,36 @@ function MyForm() {
 
 ### Streaming Implementation
 
-```tsx
-<ChatMessage role="assistant">
-  <ChatMessageContent isStreaming={isStreaming}>
-    {streamingContent}  {/* Updates as tokens arrive; shows cursor when isStreaming */}
-  </ChatMessageContent>
-</ChatMessage>
-
-<ChatToolCall state="input-available">  {/* input-available | output-available | output-error */}
-  <ChatToolCallHeader name="search_files" />
-  <ChatToolCallContent>
-    <ChatToolCallInput>{JSON.stringify({ query: "utils.ts" }, null, 2)}</ChatToolCallInput>
-    {toolResult && <ChatToolCallOutput>{toolResult}</ChatToolCallOutput>}
-  </ChatToolCallContent>
-</ChatToolCall>
-
-<ChatThinkingMessage variant="pill" />  {/* Animated dots; variant="dots" for inline */}
+Streaming chat UI is composed in JSON spec element trees. The block controls `isStreaming` state internally and exposes it through `$bindState`. Each message, tool call, and thinking indicator maps to a catalog component:
+
+- `ChatMessage` — wraps a single turn; `props.role` is `"assistant"` or `"user"`.
+- `ChatMessageContent` — renders streaming text; `props.isStreaming` shows the cursor while tokens arrive.
+- `ChatToolCall` — shows a tool invocation; `props.state` is one of `"input-available"`, `"output-available"`, or `"output-error"`.
+- `ChatThinkingMessage` — animated dots; `props.variant` is `"pill"` (block) or `"dots"` (inline).
+
+Example spec fragment for a streaming assistant turn with a tool call:
+
+```json
+[
+  {
+    "component": "ChatMessage",
+    "props": { "role": "assistant" },
+    "children": [
+      {
+        "component": "ChatMessageContent",
+        "props": { "$bindState": "isStreaming", "text": "$bindState:streamingContent" }
+      }
+    ]
+  },
+  {
+    "component": "ChatToolCall",
+    "props": { "state": "input-available", "name": "search_files", "input": { "query": "utils.ts" } }
+  },
+  {
+    "component": "ChatThinkingMessage",
+    "props": { "variant": "pill" }
+  }
+]
 ```
 
 ---

package/dist/{TeamPage-IYWL6N4I.js → TeamPage-UO3V2JDK.js}

@@ -1,4 +1,4 @@
-import { seedComponents } from './chunk-PIFVLS5S.js';
+import { seedComponents } from './chunk-WGQHM56J.js';
 import './chunk-PQOL3E2V.js';
 import './chunk-YGDO5KDY.js';
 import './chunk-EJQ73FJ5.js';
@@ -60,7 +60,7 @@ import './chunk-GE4WUAAE.js';
 import './chunk-H3KTAHJP.js';
 import './chunk-NDQO7AO6.js';
 import './chunk-AP5SGSN7.js';
-import './chunk-XX4XJJSH.js';
+import './chunk-XUWKGDUY.js';
 import './chunk-D6MFOI3N.js';
 import './chunk-7AUNUDHM.js';
 import './chunk-4ZST7OY5.js';
@@ -367,6 +367,9 @@ import './chunk-QYZT24TS.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var { InviteUserModal } = seedComponents;
+var noop = () => {
+};
+var noopOn = () => ({ emit: noop, shouldPreventDefault: false, bound: false });
 var initialMembers = [
   {
     id: "1",
@@ -412,10 +415,8 @@ function TeamPage() {
         InviteUserModal,
         {
           props: { email: null, role: null },
-          emit: () => {
-          },
-          on: () => ({ emit: () => {
-          }, shouldPreventDefault: false, bound: false })
+          emit: noop,
+          on: noopOn
         }
       )
     ] }),

package/dist/catalog/components.js

@@ -1,5 +1,5 @@
 'use client';
-export { seedComponents } from '../chunk-PIFVLS5S.js';
+export { seedComponents } from '../chunk-WGQHM56J.js';
 import '../chunk-PQOL3E2V.js';
 import '../chunk-YGDO5KDY.js';
 import '../chunk-EJQ73FJ5.js';
@@ -61,7 +61,7 @@ import '../chunk-GE4WUAAE.js';
 import '../chunk-H3KTAHJP.js';
 import '../chunk-NDQO7AO6.js';
 import '../chunk-AP5SGSN7.js';
-import '../chunk-XX4XJJSH.js';
+import '../chunk-XUWKGDUY.js';
 import '../chunk-D6MFOI3N.js';
 import '../chunk-7AUNUDHM.js';
 import '../chunk-4ZST7OY5.js';

package/dist/{chunk-PIFVLS5S.js → chunk-WGQHM56J.js}

@@ -35,7 +35,7 @@ import { ComparisonBlock } from './chunk-GE4WUAAE.js';
 import { ContactBlock } from './chunk-H3KTAHJP.js';
 import { CreateBlock } from './chunk-NDQO7AO6.js';
 import { CrudListBlock } from './chunk-AP5SGSN7.js';
-import { DashboardBlock } from './chunk-XX4XJJSH.js';
+import { DashboardBlock } from './chunk-XUWKGDUY.js';
 import { DataGridBlock } from './chunk-D6MFOI3N.js';
 import { DirectoryBlock } from './chunk-7AUNUDHM.js';
 import { BlogIndexBlock } from './chunk-4ZST7OY5.js';

package/dist/{chunk-XX4XJJSH.js → chunk-XUWKGDUY.js}

@@ -25,7 +25,7 @@ import dynamic from 'next/dynamic';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var ProfilePage = dynamic(() => import('./ProfilePage-KJVA3ZQ5.js').then((m) => ({ default: m.ProfilePage })), { ssr: false, loading: () => null });
-var TeamPage = dynamic(() => import('./TeamPage-IYWL6N4I.js').then((m) => ({ default: m.TeamPage })), { ssr: false, loading: () => null });
+var TeamPage = dynamic(() => import('./TeamPage-UO3V2JDK.js').then((m) => ({ default: m.TeamPage })), { ssr: false, loading: () => null });
 function SettingsContent({ tab }) {
   switch (tab) {
     case "profile":

package/dist/components/blocks/DashboardBlock.js

@@ -1,5 +1,5 @@
 'use client';
-export { DashboardBlock } from '../../chunk-XX4XJJSH.js';
+export { DashboardBlock } from '../../chunk-XUWKGDUY.js';
 import '../../chunk-ZTNHUABC.js';
 import '../../chunk-DQPK2XRL.js';
 import '../../chunk-KKBTPNXT.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vadimcomanescu/nadicode-design-system",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"