@supersoniks/concorde 5.1.2 → 5.1.3-immutable.2

package/scripts/site-pages.test.mjs

@@ -0,0 +1,116 @@
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import os from "node:os";
+import path from "path";
+import test from "node:test";
+import { STATIC_PAGES, homepageJsonLd } from "./site-pages.mjs";
+import {
+  generateHomepageMarkdown,
+  generateHtaccess,
+  generateSitemap,
+  writeAgentSiteArtifacts,
+} from "./generate-crawl-docs.mjs";
+
+function stripTags(html) {
+  return html
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+test("homepage JSON-LD has SoftwareApplication and complete Organization", () => {
+  const ld = homepageJsonLd();
+  assert.equal(ld["@context"], "https://schema.org");
+  const byType = Object.fromEntries(ld["@graph"].map((n) => [n["@type"], n]));
+  const app = byType.SoftwareApplication;
+  assert.ok(app.name && app.description && app.url && app.offers);
+  assert.equal(app.publisher["@id"], byType.Organization["@id"]);
+  const org = byType.Organization;
+  assert.equal(org.url, "https://supersoniks.com/");
+  assert.equal(org.address["@type"], "PostalAddress");
+  assert.equal(org.address.addressLocality, "Tours");
+  assert.equal(org.contactPoint["@type"], "ContactPoint");
+  assert.ok(org.contactPoint.contactType && org.contactPoint.telephone);
+  assert.ok(org.sameAs.every((u) => u.startsWith("https://")));
+});
+
+test("source index.html embeds the generated JSON-LD and Open Graph tags", () => {
+  const html = fs.readFileSync(path.resolve("index.html"), "utf8");
+  const block = html.match(
+    /<script type="application\/ld\+json">([\s\S]*?)<\/script>/,
+  );
+  assert.ok(block, "JSON-LD script missing");
+  assert.deepEqual(JSON.parse(block[1]), homepageJsonLd());
+  for (const prop of ["og:type", "og:title", "og:description", "og:url", "og:image"]) {
+    assert.match(html, new RegExp(`<meta property="${prop}" content="[^"]+"`), prop);
+  }
+  assert.match(
+    html,
+    /<meta property="og:image" content="https:\/\/concorde\.supersoniks\.org\/img\/og-concorde\.jpg"/,
+  );
+  assert.ok(fs.existsSync(path.resolve("public/img/og-concorde.jpg")));
+  assert.match(html, /<meta name="twitter:card" content="summary_large_image"/);
+  assert.match(html, /href="\/about"/);
+  assert.match(html, /href="\/privacy"/);
+});
+
+test("site page Markdown is read from site-pages/", () => {
+  assert.deepEqual(
+    STATIC_PAGES.map((p) => p.slug),
+    ["about", "privacy"],
+  );
+  for (const { slug, markdown } of STATIC_PAGES) {
+    assert.equal(
+      markdown,
+      fs.readFileSync(path.resolve(`site-pages/${slug}.md`), "utf8"),
+    );
+    assert.match(markdown, /^# /);
+  }
+});
+
+test("site pages are SPA shells with their own metadata and inline content", () => {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), "concorde-pages-"));
+  try {
+    writeAgentSiteArtifacts(dir);
+    for (const { slug } of STATIC_PAGES) {
+      const md = fs.readFileSync(path.join(dir, `${slug}.md`), "utf8");
+      const html = fs.readFileSync(path.join(dir, `${slug}.html`), "utf8");
+      assert.ok(md.length >= 500, `${slug}.md too short (${md.length})`);
+      const section = html.match(
+        /<section id="docs-agent-content"[^>]*>([\s\S]*?)<\/section>/,
+      );
+      assert.ok(section, `${slug}.html page section missing`);
+      assert.ok(stripTags(section[1]).length >= 500, `${slug}.html too short`);
+      assert.match(section[1], /<h1/);
+      assert.doesNotMatch(section[1], /<h1>Concorde by Supersoniks<\/h1>/);
+      assert.match(html, /<sonic-router>/, "SPA shell expected");
+      const url = `https://concorde\\.supersoniks\\.org/${slug}`;
+      assert.match(html, new RegExp(`<link rel="canonical" href="${url}" />`));
+      assert.match(html, new RegExp(`<meta property="og:url" content="${url}"`));
+      assert.match(html, new RegExp(`href="/${slug}\\.md"`));
+      assert.equal((html.match(/<title>/g) || []).length, 1);
+      const ld = JSON.parse(
+        html.match(/<script type="application\/ld\+json">([\s\S]*?)<\/script>/)[1],
+      );
+      assert.equal(ld.url, `https://concorde.supersoniks.org/${slug}`);
+      assert.equal(ld.publisher.address.addressLocality, "Tours");
+    }
+  } finally {
+    fs.rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("sitemap and homepage Markdown link the site pages", () => {
+  const xml = generateSitemap([], []);
+  const md = generateHomepageMarkdown();
+  for (const slug of ["about", "privacy"]) {
+    assert.match(xml, new RegExp(`<loc>https://concorde\\.supersoniks\\.org/${slug}</loc>`));
+    assert.match(md, new RegExp(`https://concorde\\.supersoniks\\.org/${slug}\\)`));
+  }
+});
+
+test("htaccess serves site pages as HTML or Markdown", () => {
+  const conf = generateHtaccess();
+  assert.match(conf, /\^\(about\|privacy\)\$ \/\$1\.md \[END\]/);
+  assert.match(conf, /\^\(about\|privacy\)\$ \/\$1\.html \[END\]/);
+});

package/site-pages/about.md

@@ -0,0 +1,22 @@
+# About Concorde
+
+Concorde is an open-source web components framework built on [Lit](https://lit.dev). It is designed, written and maintained by [Supersoniks](https://supersoniks.com/), a company based in Tours, France, which uses it in production.
+
+## Why it exists
+
+Supersoniks works on many stacks: PHP back offices, static pages, React and Vue front ends. Rewriting the same buttons, forms and data lists for each stack was slow and led to inconsistent interfaces. Concorde solves this with standard custom elements (`sonic-*`) that work the same way in any host page, plus a small data layer (DataProvider, decorators) that connects components to each other and to REST APIs without a framework.
+
+## What it includes
+
+- UI components: buttons, inputs, selects, checkboxes, modals, toasts, cards, menus, tooltips and more.
+- Data components: lists, queues, fetch, submit, router, states and server-driven UI from JSON.
+- Lit decorators such as `@get`, `@post`, `@subscribe` and `@bind`.
+- Theming through CSS custom properties, with light and dark modes.
+
+## Licence and distribution
+
+Concorde is published on npm as [`@supersoniks/concorde`](https://www.npmjs.com/package/@supersoniks/concorde) under the MIT licence. This site (https://concorde.supersoniks.org) is its official documentation.
+
+## Publisher
+
+Supersoniks, 22 rue du Docteur Bretonneau, 37000 Tours, France · +33 2 47 68 93 25 · [contact Supersoniks](https://supersoniks.com/un-projet). See also the [privacy notice](/privacy).

package/site-pages/privacy.md

@@ -0,0 +1,32 @@
+# Privacy notice
+
+This notice covers the Concorde documentation site, https://concorde.supersoniks.org, published by [Supersoniks](https://supersoniks.com/), 22 rue du Docteur Bretonneau, 37000 Tours, France.
+
+## What this site does not do
+
+- It has no user accounts, sign-up or login.
+- It sets no cookies and runs no analytics, advertising or tracking scripts.
+- It has no forms that send personal data to Supersoniks.
+
+## What is stored in your browser
+
+- `sonicTheme` in localStorage remembers your light or dark theme choice. It never leaves your browser.
+- A service worker serves the mock API used by live examples (`/docs-mock-api/…`). It runs locally in your browser.
+- Some examples demonstrate features that store values in localStorage (for example dismissed alerts or cached labels). They only run when you open those pages.
+
+## Third-party services
+
+To display pages, your browser loads files from these providers, which receive your IP address and browser details as part of any web request:
+
+- Google Fonts (fonts.googleapis.com, fonts.gstatic.com) for the Schibsted Grotesk font.
+- jsDelivr (cdn.jsdelivr.net) for the search and Markdown libraries.
+- cdn.supersoniks.com for icons.
+- A few live examples call public demo APIs (geo.api.gouv.fr, reqres.in, i.pravatar.cc) when you open them.
+
+## Server logs
+
+Like any web server, the host records technical request data (IP address, URL, date, user agent) to operate and secure the site.
+
+## Your rights
+
+Under the GDPR you can ask for access to, correction or deletion of data about you. Contact Supersoniks through [supersoniks.com/un-projet](https://supersoniks.com/un-projet), by phone at +33 2 47 68 93 25, or by mail at 22 rue du Docteur Bretonneau, 37000 Tours, France. See also the [Supersoniks privacy policy](https://supersoniks.com/politique-de-confidentialite) and [legal notice](https://supersoniks.com/mentions-legales).

package/src/core/components/functional/date/date.md

@@ -116,7 +116,7 @@ A child `<template data-value="<part>">` wraps a part in your own markup: `weekd
         <template data-value="year"><span class="block text-lg font-bold leading-tight"></span></template>
         <template data-value="to"><span class="block my-1 text-3xl leading-none">↓</span></template>
       </sonic-date>
-      <sonic-image src="img/concorde/plane_03.jpg" alt="Concorde specifications board" ratio="1/1" cover></sonic-image>
+      <sonic-image src="/img/concorde/plane_03.jpg" alt="Concorde specifications board" ratio="1/1" cover></sonic-image>
     </div>
   </template>
 </sonic-code>

package/src/core/components/functional/example/example.ts

@@ -2,6 +2,7 @@ import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { Endpoint } from "@supersoniks/concorde/utils";
 import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
+import type { Frozen } from "@supersoniks/concorde/utils/deepReadonly";
 import {
   get,
   publish,
@@ -19,6 +20,7 @@ const endpoint = new Endpoint<City[], { limit: number }>(
 /** Même path que l’endpoint ; type = charge utile `@get` pour `@publish`. */
 const dpKey = new DataProviderKey<ApiResult<City[]>>(endpoint.path);
 
+
 const tagName = "sonic-example"; // For Astro.build
 @customElement(tagName)
 export class SonicComponent extends LitElement {
@@ -31,7 +33,7 @@ export class SonicComponent extends LitElement {
 
   @state()
   @subscribe(dpKey.result)
-  geoCommunesResult?: City[];
+  geoCommunesResult?: Frozen<City[]>;
 
   render() {
     return html` <span part="api-get-demo">

package/src/core/components/functional/list/list.md

@@ -1,6 +1,6 @@
 # List
 
-**`sonic-list`** renders one row per entry of its `props` array, either set directly or loaded with `fetch`. From Lit, pass a row renderer on the `items` property; in plain HTML, declare `<template>` children. Each row gets its own data provider at `<dataProvider>/list-item/<index>`.
+**`sonic-list`** renders one row per entry of its `props` array, either set directly or loaded with `fetch`. In TypeScript, prefer the `.items` row renderer (with `.separator` · `.noItems` · `.skeleton`); `<template>` children are for plain HTML hosts without Lit. Each row gets its own data provider at `<dataProvider>/list-item/<index>`.
 
 ## Basic example
 
@@ -16,7 +16,7 @@ Add `fetch` to load `props` from `serviceURL` + `endPoint` (or `dataProvider` wh
   </template>
 </sonic-code>
 
-Fetch attributes (`lazyload` · `refetchEveryMs` · headers · authentication) are shared with [Fetch](/core/components/functional/fetch).
+This example uses HTML templates; from Lit, use the [row renderer](#row-renderer) instead. Fetch attributes (`lazyload` · `refetchEveryMs` · headers · authentication) are shared with [Fetch](/core/components/functional/fetch).
 
 ## Row renderer
 
@@ -98,6 +98,8 @@ With no `loader`, nothing is shown while fetching. Set `loader` (`fixed`) or `lo
 | `loader` | `fixed` (when empty) · `inline` | Loader shown while fetching. None by default |
 | `debug` | boolean | Shows each row's data on hover |
 
+Properties (TypeScript / Lit, preferred):
+
 | Property | Type | Description |
 |----------|------|-------------|
 | `props` | array · object | Rows to render |
@@ -107,6 +109,8 @@ With no `loader`, nothing is shown while fetching. Set `loader` (`fixed`) or `lo
 | `skeleton` | `() => TemplateResult` | Rendered while fetching |
 | `itemPropertyMap` | object | `propertyMap` passed to each row subscriber |
 
+Templates (plain HTML hosts):
+
 | Template | Description |
 |----------|-------------|
 | `<template>` | Row markup; several are used in turn |

package/src/core/components/functional/list/list.ts

@@ -339,10 +339,23 @@ export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
         };
 
         childPublisher._key_ = key + "";
-        childPublisher._metadata_ = {
-          ...childPublisher._metadata_.get(),
-          ...metadata,
-        };
+        // Immutable store: assigning `_metadata_` every render rebuilds the item + list
+        // publisher and retriggers render → infinite loop. Only write when values change.
+        const previousMetadata =
+          childPublisher._metadata_?.get() as ListItemMetadata | null;
+        if (
+          previousMetadata?.key !== metadata.key ||
+          previousMetadata?.even !== metadata.even ||
+          previousMetadata?.odd !== metadata.odd ||
+          previousMetadata?.onlyChild !== metadata.onlyChild ||
+          previousMetadata?.firstChild !== metadata.firstChild ||
+          previousMetadata?.lastChild !== metadata.lastChild
+        ) {
+          childPublisher._metadata_ = {
+            ...(previousMetadata || {}),
+            ...metadata,
+          };
+        }
 
         // Essayer d'utiliser les templates programmatiques
         const programmaticTemplate = this.handleProgrammaticTemplates(

package/src/core/components/functional/sdui/component-catalog.gaps.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "generatedAt": "2026-10-26T08:58:38.625Z",
+  "generatedAt": "2026-11-02T09:56:04.637Z",
   "count": 66,
   "items": [
     {

package/src/core/components/functional/sdui/component-catalog.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "generatedAt": "2026-10-26T08:58:38.625Z",
+  "generatedAt": "2026-11-02T09:56:04.637Z",
   "componentCount": 67,
   "components": [
     {
@@ -755,7 +755,7 @@
         {
           "name": "geoCommunesResult",
           "attribute": "geoCommunesResult",
-          "type": "City[] | undefined"
+          "type": "Frozen<City[]> | undefined"
         }
       ]
     },

package/src/core/components/functional/sdui/sdui-immutable.spec.ts

@@ -0,0 +1,74 @@
+import { afterEach, describe, expect, it } from "vitest";
+import TestUtils from "@supersoniks/concorde/test-utils/TestUtils";
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { snapshotLightDom } from "./sdui-dom-snapshot";
+import type { SDUIDescriptor } from "./types";
+import "./sdui";
+import type { SonicSDUI } from "./sdui";
+
+async function flushSdui(elt: SonicSDUI) {
+  await elt.updateComplete;
+  await Promise.resolve();
+  await Promise.resolve();
+  await elt.updateComplete;
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  PublisherManager.getInstance().delete("sdui-immutable-spec");
+});
+
+describe("sonic-sdui + immutable publisher props", () => {
+  it("rend un descripteur servi par un publisher frozen (cas doc / dataProvider)", async () => {
+    const descriptor: SDUIDescriptor = {
+      nodes: [
+        {
+          tagName: "div",
+          attributes: { class: "sdui-imm-ok" },
+          textContent: "FROM_FROZEN_PROPS",
+        },
+      ],
+    };
+
+    const [elt] = TestUtils.bootstrap(
+      `<sonic-sdui dataProvider="sdui-immutable-spec"></sonic-sdui>`
+    ) as unknown as SonicSDUI[];
+
+    // Même chemin que Subscriber : props → publisher.set → get() frozen → willUpdate
+    elt.props = descriptor as never;
+    await flushSdui(elt);
+
+    expect(Object.isFrozen(elt.props)).toBe(true);
+    expect(elt.querySelector(".sdui-imm-ok")?.textContent).toBe(
+      "FROM_FROZEN_PROPS"
+    );
+    expect(JSON.stringify(snapshotLightDom(elt))).toContain("FROM_FROZEN_PROPS");
+  });
+
+  it("supporte libraryKey avec props frozen (merge library mutable en local)", async () => {
+    const descriptor: SDUIDescriptor = {
+      library: {
+        card: {
+          tagName: "div",
+          attributes: { class: "lib-card" },
+          nodes: [{ tagName: "span" }],
+          contentElementSelector: "span",
+        },
+      },
+      nodes: [
+        {
+          libraryKey: "card",
+          nodes: [{ tagName: "em", textContent: "LIB_OK" }],
+        },
+      ],
+    };
+
+    const [elt] = TestUtils.bootstrap(
+      `<sonic-sdui dataProvider="sdui-immutable-spec"></sonic-sdui>`
+    ) as unknown as SonicSDUI[];
+    elt.props = descriptor as never;
+    await flushSdui(elt);
+
+    expect(elt.querySelector(".lib-card em")?.textContent).toBe("LIB_OK");
+  });
+});

package/src/core/components/functional/sdui/sdui.ts

@@ -69,6 +69,9 @@ export class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
    */
   @property({ type: String }) opsDataProvider?: string;
   private sduiDescriptor: SDUIDescriptor = {};
+  /** Ref publisher/props d’origine (peut être frozen) — pour skip willUpdate. */
+  private sduiPropsRef: SDUIDescriptor | Record<string, SDUIDescriptor> | null =
+    null;
   private nodeIndex = new Map<string, SDUINode>();
   /** Garde-fou cycles childNodeIds. */
   private renderingStack = new Set<string>();
@@ -78,6 +81,16 @@ export class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
   private incrementalActive = false;
   private opsUnsub?: () => void;
 
+  /** Copie de travail mutable : updateContents / parseRootNodes mutent library & nodes. */
+  private cloneDescriptor(source: SDUIDescriptor | null | undefined): SDUIDescriptor {
+    if (source == null) return {};
+    try {
+      return structuredClone(source) as SDUIDescriptor;
+    } catch {
+      return JSON.parse(JSON.stringify(source)) as SDUIDescriptor;
+    }
+  }
+
   private get isSafeProfile(): boolean {
     return this.profile === "safe";
   }
@@ -100,21 +113,33 @@ export class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
       return;
     }
     if (this.props == null) {
-      this.sduiDescriptor = {};
-    }
-    {
+      if (this.sduiPropsRef != null || Object.keys(this.sduiDescriptor).length) {
+        this.sduiPropsRef = null;
+        this.sduiDescriptor = {};
+        this.updateContents();
+      }
+    } else {
+      const propsRoot = this.props as
+        | SDUIDescriptor
+        | Record<string, SDUIDescriptor>;
       const newSduiDescriptor = this.sduiKey
-        ? (this.props as Record<string, SDUIDescriptor>)[this.sduiKey]
-        : (this.props as SDUIDescriptor);
+        ? (propsRoot as Record<string, SDUIDescriptor>)[this.sduiKey]
+        : (propsRoot as SDUIDescriptor);
       const profileChanged = changedProperties.has("profile");
       const partialChanged = changedProperties.has("partial");
+      // Comparer la ref d’entrée (frozen publisher), pas la copie locale mutable.
       if (
-        this.sduiDescriptor == newSduiDescriptor &&
+        this.sduiPropsRef == newSduiDescriptor &&
         !profileChanged &&
         !partialChanged
-      )
+      ) {
+        super.willUpdate(changedProperties);
         return;
-      this.sduiDescriptor = newSduiDescriptor;
+      }
+      this.sduiPropsRef = newSduiDescriptor ?? null;
+      // Ownership locale : le store immutable freeze props ; SDUI doit muter
+      // library / nodes / toast pendant le rendu.
+      this.sduiDescriptor = this.cloneDescriptor(newSduiDescriptor);
       this.updateContents();
     }
     super.willUpdate(changedProperties);

package/src/core/components/functional/submit/submit.spec.ts

@@ -0,0 +1,60 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import TestUtils from "@supersoniks/concorde/test-utils/TestUtils";
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import "./submit";
+import type { Submit } from "./submit";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  vi.restoreAllMocks();
+  PublisherManager.getInstance().delete("submit-spec-form");
+  PublisherManager.getInstance().delete("submit-spec-result");
+});
+
+describe("sonic-submit + immutable publisher", () => {
+  it("envoie le formulaire sans muter le get() frozen (delete isFormValid)", async () => {
+    const [elt] = TestUtils.bootstrap(`
+      <div
+        formDataProvider="submit-spec-form"
+        submitResultDataProvider="submit-spec-result"
+        serviceURL="https://example.test"
+        dataProvider="api/register"
+      >
+        <sonic-submit></sonic-submit>
+      </div>
+    `) as unknown as [HTMLElement];
+
+    const submit = elt.querySelector("sonic-submit") as Submit;
+    await submit.updateComplete;
+
+    const formPub = PublisherManager.get("submit-spec-form");
+    formPub.set({
+      email: "ada@example.com",
+      password: "secret",
+      isFormValid: true,
+      needsCaptchaValidation: false,
+    });
+
+    const frozen = formPub.get() as Record<string, unknown>;
+    expect(Object.isFrozen(frozen)).toBe(true);
+
+    const post = vi.fn(async () => ({ id: 1, token: "t" }));
+    (submit as any).api = { post, lastResult: { ok: true } };
+
+    await submit.submit();
+
+    expect(post).toHaveBeenCalledTimes(1);
+    const call = post.mock.calls[0] as unknown as [
+      unknown,
+      Record<string, unknown>,
+    ];
+    const body = call[1];
+    expect(body).toMatchObject({
+      email: "ada@example.com",
+      password: "secret",
+    });
+    expect(body.isFormValid).toBeUndefined();
+    // Store still frozen and untouched for isFormValid key presence as set
+    expect(formPub.get().email).toBe("ada@example.com");
+  });
+});

package/src/core/components/functional/submit/submit.ts

@@ -137,7 +137,8 @@ export class Submit extends Subscriber(LitElement) {
     const method = this.getAttribute("method")?.toLocaleLowerCase() || "post";
 
     const sendAsFormData = this.hasAttribute("sendAsFormData");
-    const formData = formPublisher.get();
+    // Shallow copies: publisher get() is frozen under the immutable store.
+    const formData: Record<string, any> = { ...(formPublisher.get() as object) };
     delete formData.isFormValid;
     const headesDataProvider = this.getAncestorAttributeValue(
       "headersDataProvider"
@@ -145,8 +146,10 @@ export class Submit extends Subscriber(LitElement) {
     const headerPublisher = headesDataProvider
       ? PublisherManager.getInstance().get(headesDataProvider)
       : null;
-    let headerData: any = {};
-    if (headerPublisher) headerData = headerPublisher.get();
+    let headerData: Record<string, any> = {};
+    if (headerPublisher) {
+      headerData = { ...(headerPublisher.get() as object) };
+    }
     let result: SubmitResult = null;
     const dataProvider = this.getAncestorAttributeValue("dataProvider");
     const endPoint = this.endPoint || dataProvider;

package/src/core/components/ui/card/card.md

@@ -160,7 +160,7 @@ Header, media, body, and footer together.
         <sonic-image
           rounded
           ratio="16/9"
-          src="img/concorde/plane_04.jpg"
+          src="/img/concorde/plane_04.jpg"
           alt="Concorde on the apron under a blue sky"
         ></sonic-image>
         <p class="mb-0">

package/src/core/components/ui/form/input/input.md

@@ -89,7 +89,25 @@ Fields sharing the same `formDataProvider` and `name` stay in sync. The attribut
   </template>
 </sonic-code>
 
-`sameValueAs` sets `pattern` to the value of another field in the same store, for confirmation fields.
+## Nested keys
+
+A dot in `name` stores a nested object in the form publisher.
+
+<sonic-code>
+  <template>
+    <div formDataProvider="input-nested-demo" class="grid grid-cols-2 gap-3">
+      <sonic-input label="Passenger" name="passenger.name" value="Ada Lindqvist"></sonic-input>
+      <sonic-input label="Seat" name="passenger.seat" value="2A"></sonic-input>
+      <div class="col-span-2">
+        <sonic-value dataProvider="input-nested-demo" key="passenger.name"></sonic-value>
+        ·
+        <sonic-value dataProvider="input-nested-demo" key="passenger.seat"></sonic-value>
+      </div>
+    </div>
+  </template>
+</sonic-code>
+
+`sameValueAs` sets `pattern` to the value of another field in the same store, for confirmation fields. Dot paths are supported.
 
 <sonic-code>
   <template>

package/src/core/components/ui/form/input/input.ts

@@ -15,6 +15,7 @@ import {
 } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
+import { traverseDotNotation } from "@supersoniks/concorde/core/utils/Objects";
 import { classMap } from "lit/directives/class-map.js";
 import {
   fontSize,
@@ -107,7 +108,10 @@ export class Input extends FormInput(FormElement(LitElement)) {
         (this.pattern = this.escapeRegExp(v));
       const formPublisher = this.getFormPublisher();
       if (!formPublisher || !this.sameValueAsName) return;
-      formPublisher[this.sameValueAsName].onAssign(this.sameValueAsHandle);
+      // Dot notation (same as FormElement name) — not formPublisher["a.b"].
+      traverseDotNotation(formPublisher, this.sameValueAsName).onAssign(
+        this.sameValueAsHandle,
+      );
     }
     if (this.type == "password") {
       this.isPassword = true;
@@ -120,7 +124,9 @@ export class Input extends FormInput(FormElement(LitElement)) {
     if (this.hasAttribute("sameValueAs") && this.sameValueAsName) {
       const formPublisher = this.getFormPublisher();
       if (!formPublisher) return;
-      formPublisher[this.sameValueAsName].offAssign(this.sameValueAsHandle);
+      traverseDotNotation(formPublisher, this.sameValueAsName).offAssign(
+        this.sameValueAsHandle,
+      );
     }
   }
 

package/src/core/components/ui/form/radio/radio.md

@@ -47,6 +47,20 @@ With no `size`, the radio follows `md` (1rem).
   </template>
 </sonic-code>
 
+## Nested keys
+
+A dot in `name` writes a nested object in the form store (same as [Submit](/core/components/functional/submit) nested fields).
+
+<sonic-code>
+  <template>
+    <div formDataProvider="radio-nested-demo" class="grid gap-2">
+      <sonic-radio name="passenger.seat" value="window" checked>Window</sonic-radio>
+      <sonic-radio name="passenger.seat" value="aisle">Aisle</sonic-radio>
+      <div>Seat: <sonic-value dataProvider="radio-nested-demo" key="passenger.seat"></sonic-value></div>
+    </div>
+  </template>
+</sonic-code>
+
 ## Filtering a list
 
 The radio group writes one `status` value to the store used as `dataFilterProvider` by a `sonic-queue`. See [Checkbox](/core/components/ui/form/checkbox) for the multi-value version.