@ds-mo/ui 9.1.0 → 9.2.1

package/README.md

@@ -114,82 +114,3 @@ Components that accept icons use a named `icon` slot:
 ```
 
 `icon` / `name` must be a canonical IcoMo export key (`ArrowRight`, `Bell`, …).
-
-## Figma Code Connect
-
-This repo includes [Figma Code Connect](https://developers.figma.com/docs/code-connect/) templates under `code-connect/` so Dev Mode can show curated snippets (e.g. React wrappers from `@ds-mo/ui/react`).
-
-**Prerequisites**
-
-- Node **20.19+** or **22.12+** (see `package.json` `engines` and `.nvmrc`).
-- A Figma **personal access token** with **Code Connect (Write)** and **File content (Read)**. Set it locally only — never commit it:
-  - `export FIGMA_ACCESS_TOKEN='…'`, or
-  - pass `--token` / `-t` when publishing.
-
-**CLI**
-
-The [`@figma/code-connect`](https://www.npmjs.com/package/@figma/code-connect) package is a devDependency. Use `npx` from the repo root (or install `@figma/code-connect` globally and run `figma connect …`):
-
-```bash
-npx figma connect --help
-```
-
-You should see subcommands including `publish`, `unpublish`, `create`, and `preview`.
-
-**Config**
-
-- `figma.config.json` — include glob `code-connect/published/**/*.figma.ts`, snippet label `React`, language `jsx`.
-- `tsconfig.figma.json` — optional; point your editor at it for `figma` template typings (`types: ["@figma/code-connect/figma-types"]`).
-
-**Scripts**
-
-```bash
-npm run figma:connect:publish:dry-run   # hits Figma API; needs FIGMA_ACCESS_TOKEN or --token
-npm run figma:connect:publish           # publish mappings (same token requirement)
-npm run figma:connect:preview           # local preview of snippets from templates
-npm run typecheck:figma                 # typecheck template files only
-```
-
-**First publish**
-
-1. Copy `code-connect/examples/ds-icon.figma.ts` to `code-connect/published/DsIcon.figma.ts`, then set the `// url=…` line from Figma → **Copy link to selection** (see `code-connect/README.md`).
-2. Ensure Figma’s GitHub / Code Connect integration points at **this** `compomo` repo and branch.
-3. Run `npm run figma:connect:publish:dry-run`, then `npm run figma:connect:publish`.
-
-Each contributor can use their own `FIGMA_ACCESS_TOKEN` in a local shell or `.env.local` (gitignored); do not commit tokens.
-
-### Dev Mode vs “the template” (why mapping exists)
-
-- **The canvas** is whatever designers built (variant names like `Type = Main`, nested structure, etc.). Code Connect does **not** rewrite your Figma file.
-- **Dev Mode** can show a **link to your repo file** (e.g. `src/wc/components/Icon/Icon.tsx`) when you connect the repo — that answers “where is this implemented?”
-- The **Code Connect snippet** is the **copy-paste example** Figma shows in Inspect. That text comes from **your published templates** (or from other Figma features like MCP context), not from magically knowing your Stencil prop names.
-
-So: if Figma props already match your API (`intent`, `appearance`), your template can be a thin wrapper and life is easy. If they **do not** match (legacy `Type` vs real `intent`), the template is where you **translate** so the snippet still shows **canonical** usage. You are not making Dev Mode “look like Figma internals” — you are choosing what **engineers should copy** when names diverge.
-
-### GitHub Actions — auto-publish on `main` (optional)
-
-This repo includes [`.github/workflows/figma-code-connect.yml`](.github/workflows/figma-code-connect.yml). It runs `npm run figma:connect:publish` when **`main`** changes under `code-connect/`, `figma.config.json`, or `tsconfig.figma.json`, and on **manual** “Run workflow”.
-
-**1. Create a Figma personal access token**
-
-1. Figma → **Settings** (avatar) → **Security** (or **Personal access tokens** depending on UI).
-2. **Generate new token** with at least **File content (Read)** and **Code Connect (Write)** (same scopes as local publish).
-3. Copy the token once; you will not see it again.
-
-**2. Add it as a GitHub Actions secret**
-
-1. Open the repo on GitHub: `https://github.com/zainadeel/compomo` (or your fork’s **Settings** if you only care about that fork).
-2. **Settings** → **Secrets and variables** → **Actions**.
-3. **New repository secret**
-   - **Name:** `FIGMA_ACCESS_TOKEN` (must match the workflow exactly).
-   - **Secret:** paste the token → **Add secret**.
-
-**3. Confirm the workflow**
-
-- **Actions** tab → **Figma Code Connect** → run **workflow_dispatch** once to verify green, then merge a small change under `code-connect/` to test the `push` path.
-
-If the secret is missing, the publish step fails with Figma’s “no access token” style error until you add it.
-
-### Icon batch files — CompoMo vs IcoMo
-
-**Publish from CompoMo.** Code Connect templates live under `code-connect/published/` (see `code-connect/examples/` for starters). `figma connect publish` runs from this repo. Snippets should show **`@ds-mo/ui`** usage (e.g. `<ds-icon name="Bell" />` or `<DsIcon name="Bell" />` from `@ds-mo/ui/react`). **`name`** values must match **IcoMo** export keys.

package/dist/.build-stamp

@@ -1 +1 @@
-1784331945246
+1784517070546

package/dist/agent-patterns.json

@@ -1,9 +1,85 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "9.1.0",
+  "packageVersion": "9.2.1",
   "kind": "patterns",
   "entries": [
+    {
+      "id": "pattern:agent-chat",
+      "status": "experimental",
+      "summary": "Extend the generic conversation pattern with ordered agent response parts while keeping transport and product behavior outside the design system.",
+      "useWhen": [
+        "A chat presents rich agent output including Markdown, safe activity, display-only tool calls, attachments, or sources."
+      ],
+      "avoidWhen": [
+        "The channel is person-to-person or the component would be expected to execute models, tools, approvals, or persistence."
+      ],
+      "components": [
+        {
+          "component": "component:ds-message-scroller",
+          "role": "Provides generic transcript movement and live-edge behavior.",
+          "required": true
+        },
+        {
+          "component": "component:ds-message",
+          "role": "Renders participant turns with channel-neutral semantics.",
+          "required": true
+        },
+        {
+          "component": "component:ds-message-bubble",
+          "role": "Renders participant copy with the shared body-medium regular message baseline.",
+          "required": true
+        },
+        {
+          "component": "component:ds-agent-response",
+          "role": "Renders ordered normalized agent response parts.",
+          "required": true
+        },
+        {
+          "component": "component:ds-message-composer",
+          "role": "Emits participant submission and stop intent.",
+          "required": true
+        }
+      ],
+      "stateOwnership": [
+        "The application owns scripted or real transport, immutable response parts, retry, stop, generated titles, and persistence.",
+        "Participant turns use MessageBubble's body-medium regular default; the application does not promote ordinary sent-message copy to body-large.",
+        "AgentResponse owns ordered display only and never reveals private reasoning.",
+        "Tool-call components display execution state but do not request participant approval."
+      ],
+      "accessibility": [
+        "Agent activity must be concise user-safe summaries, never hidden chain-of-thought.",
+        "Sources use descriptive external links and unsafe schemes remain non-interactive.",
+        "Streaming and tool states remain available as text without relying on animation."
+      ],
+      "responsiveBehavior": [
+        "Use wider ghost responses for rich content while retaining readable text measure and horizontal scrolling for code or tables."
+      ],
+      "implementations": {
+        "customElements": {
+          "status": "planned",
+          "references": [
+            "src/wc/components/MessageScroller/MessageScroller.stories.ts"
+          ]
+        },
+        "react": {
+          "status": "planned",
+          "references": [
+            "src/react/components.ts"
+          ]
+        },
+        "angular": {
+          "status": "planned",
+          "references": [
+            "src/angular/index.ts"
+          ]
+        }
+      },
+      "references": [
+        "agent/patterns/conversation/pattern.agent.json",
+        "src/wc/components/AgentResponse/AgentResponse.tsx"
+      ]
+    },
     {
       "id": "pattern:application-shell",
       "status": "experimental",
@@ -91,6 +167,94 @@
         "docs/framework-integration.md"
       ]
     },
+    {
+      "id": "pattern:conversation",
+      "status": "experimental",
+      "summary": "Compose channel-neutral history, transcript, message surfaces, attachments, and composer behavior for reusable conversations.",
+      "useWhen": [
+        "A product needs threaded conversation UX that may serve agent or person-to-person channels."
+      ],
+      "avoidWhen": [
+        "The experience is a static activity feed or form without conversational turns."
+      ],
+      "components": [
+        {
+          "component": "component:ds-conversation-list",
+          "role": "Owns history scrolling, empty layout, and floating action placement.",
+          "required": true
+        },
+        {
+          "component": "component:ds-panel-tool-search",
+          "role": "Collects a product-owned conversation history search query when the conversation is presented as a PanelTools product.",
+          "required": false
+        },
+        {
+          "component": "component:ds-message-scroller",
+          "role": "Owns transcript position and live-edge following.",
+          "required": true
+        },
+        {
+          "component": "component:ds-message",
+          "role": "Owns each turn's direction, grouping, and metadata.",
+          "required": true
+        },
+        {
+          "component": "component:ds-message-bubble",
+          "role": "Owns the visible content surface and body-medium default independently of row semantics.",
+          "required": true
+        },
+        {
+          "component": "component:ds-message-composer",
+          "role": "Emits draft, submit, and stop intent without transport ownership.",
+          "required": true
+        },
+        {
+          "component": "component:ds-attachment-list",
+          "role": "Displays existing attachment metadata when present.",
+          "required": false
+        }
+      ],
+      "stateOwnership": [
+        "The application owns conversations, messages, selection, drafts, persistence, transport, unread policy, and any history search query or matching policy. ConversationListItem presents every positive unreadCount as one dot aligned with the title row; unread titles are primary and read titles are secondary.",
+        "The application owns contextual row-menu commands such as pin, rename, members, and delete; ConversationListItem supplies the sibling actions slot and hover/focus/touch presentation.",
+        "When history search is present, distinguish an empty history from a populated history with no matching conversations.",
+        "Plain incoming and outgoing message copy uses MessageBubble's body-medium regular default; the application must not promote ordinary conversation turns to body-large.",
+        "MessageScroller owns reader-relative transcript position and follow behavior. Compose MessageComposer in its overlay slot so transcript content moves behind the surface while measured bottom clearance keeps the latest turn readable.",
+        "MessageComposer emits intent while the application controls its value and status. Its submit action defaults to brand for agent and person-to-person channels; select another submitIntent only for a different semantic consequence, never merely to identify AI content."
+      ],
+      "accessibility": [
+        "Give history and transcript regions distinct localized names.",
+        "Preserve message author, order, time, status, and delivery meaning in text.",
+        "Do not force the reader back to the live edge after deliberate transcript interaction."
+      ],
+      "responsiveBehavior": [
+        "Let the containing product select drawer or full-width layout while keeping transcript measure readable and rich content horizontally scrollable."
+      ],
+      "implementations": {
+        "customElements": {
+          "status": "planned",
+          "references": [
+            "src/wc/components/MessageScroller/MessageScroller.stories.ts"
+          ]
+        },
+        "react": {
+          "status": "planned",
+          "references": [
+            "src/react/components.ts"
+          ]
+        },
+        "angular": {
+          "status": "planned",
+          "references": [
+            "src/angular/index.ts"
+          ]
+        }
+      },
+      "references": [
+        "src/wc/components/ConversationList/ConversationList.stories.ts",
+        "src/wc/components/MessageScroller/MessageScroller.stories.ts"
+      ]
+    },
     {
       "id": "pattern:menu-trigger",
       "status": "stable",