@nadicodeai/ui 6.0.2 → 6.1.0

package/docs/product-compositions.md

@@ -1,13 +1,10 @@
 # Product Compositions
 
-U4 adds the first shared product compositions for NadicodeAI admin, settings, and agent-work surfaces. These components are presentational only: consumers own routing, persistence, server actions, mutations, analytics, auth providers, permissions, and product-specific page copy.
+Shared product compositions own repeatable presentation and interaction. Consumers bind routing, persistence, permissions, and product copy. See the [component contract](contract.md) for each family's ownership.
 
-When first-party shadcn or assistant-ui registry source already covers the same
-generic product UI, use that registry item in the consuming app instead of
-adding a parallel NadicodeAI package API. Data tables, command palettes, and
-chart cards follow this rule: use `@shadcn/data-table-demo`,
-`@shadcn/command-dialog`, `@shadcn/chart`, or the relevant `@shadcn/chart-*`
-block/example as the source of truth.
+Check first-party shadcn or assistant-ui registry patterns before adding a
+composition. Once adapted, reuse its maintained owner; do not assemble the same
+registry example again for each page.
 
 Import components through the wildcard component subpath after build:
 
@@ -19,12 +16,13 @@ Fixtures live in:
 
 - [`../tests/guards/product-compositions.test.ts`](../tests/guards/product-compositions.test.ts)
 - [`../tests/guards/product-compositions-ssr.test.ts`](../tests/guards/product-compositions-ssr.test.ts)
+- [`../src/components/settings-section.test.tsx`](../src/components/settings-section.test.tsx)
 
 ## Boundaries
 
 | Component | Package owns | Consumer owns |
 | --- | --- | --- |
-| `SettingsSection` / `SettingsField` | Horizontal settings layout, `Field` composition, labels, descriptions, errors, deterministic description and error ids, `data-invalid`, and render-prop control wiring. | Form state, validation rules, submission, persistence, settings taxonomy, save/cancel behavior, and explicit control wiring for element children. |
+| `SettingsSection` / `SettingsField` | Header, divided save footer, field layout, labels, descriptions, errors, and control associations. | Form state, validation, submission, persistence, settings taxonomy, and save/cancel behavior. |
 | `FeedbackState` | Shared empty, loading, saving, error, permission, offline, no-results, and fatal state presentation. | Recovery actions, retry behavior, permission escalation, app-specific state language. |
 
 ## SettingsSection
@@ -35,6 +33,7 @@ Use `SettingsSection` and `SettingsField` for horizontal settings rows that need
 <SettingsSection
   title="Workspace defaults"
   description="Shared defaults for agent work."
+  footer={<Button type="submit">Save</Button>}
 >
   <SettingsField
     id="review-window"
@@ -44,7 +43,7 @@ Use `SettingsSection` and `SettingsField` for horizontal settings rows that need
     invalid={Boolean(reviewWindowError)}
   >
     {({ controlProps }) => (
-      <input {...controlProps} value={reviewWindow} onChange={onReviewWindowChange} />
+      <Input {...controlProps} value={reviewWindow} onChange={onReviewWindowChange} />
     )}
   </SettingsField>
 </SettingsSection>
@@ -53,11 +52,15 @@ Use `SettingsSection` and `SettingsField` for horizontal settings rows that need
 | Prop | Purpose |
 | --- | --- |
 | `title` / `description` / `actions` | Section header content and right-side action slot. |
+| `footer` | Local Save/Cancel controls and completion feedback. The owning form wraps the section. |
 | `id` / `label` | Required field identity and accessible label. |
 | `description` / `error` / `invalid` | Field helper text, error text, and invalid state. |
-| `children` | A render function receives `controlProps` for the real control and requires a client-component consumer. An element child renders unchanged and must put an explicit `id` matching the field `id` on its control. |
+| `children` | A render function receives `controlProps` for the real control in server and client components. |
 
-Accessibility: `FieldLabel` uses the field `id` as `htmlFor`. The render-prop form passes `id`, `aria-invalid`, `aria-describedby`, `disabled`, and `required` to the consumer for placement on the real control. Functions cannot cross the React Server Component boundary, so this form requires a client-component consumer. Element children render unchanged; the consumer must put the matching `id` on the control and add `aria-describedby` when needed. Descriptions render with `${id}-description`, and errors render with `${id}-error`.
+Spread `controlProps` onto the real control. SettingsField invokes the callback
+before rendered children cross any client boundary; it does not forward the
+callback to a client component. The [contract](contract.md) owns the field's
+accessibility and state guarantees.
 
 ## FeedbackState
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "6.0.2",
+  "version": "6.1.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -70,7 +70,7 @@
     "@assistant-ui/react": "0.15.18",
     "@assistant-ui/react-markdown": "0.14.14",
     "@base-ui/react": "^1.8.0",
-    "@nadicodeai/design-system": "6.0.2",
+    "@nadicodeai/design-system": "6.1.0",
     "@paper-design/shaders": "0.0.80",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -106,6 +106,7 @@
     "@stryker-mutator/vitest-runner": "10.0.0",
     "@tailwindcss/postcss": "^4.3.3",
     "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.7",
     "axe-core": "^4.13.0",