@lostgradient/cinder 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @lostgradient/cinder
 
+## 0.9.0
+
+### Minor Changes
+
+- [#693](https://github.com/stevekinney/cinder/pull/693) [`124e7b2`](https://github.com/stevekinney/cinder/commit/124e7b2740d8243e434c1eb831e2c760dab6265a) Thanks [@stevekinney](https://github.com/stevekinney)! - Move `conversationalist` from a transitive dependency to a required peer
+  dependency. Consumers that use Chat or Cinder's conversation helpers must
+  install `conversationalist@^0.2.1` and `zod@4.4.1` directly so the application
+  and Cinder share one conversation type/schema instance.
+
 ## 0.8.0
 
 ### Minor Changes

package/README.md

@@ -7,10 +7,10 @@ Use cinder when you want UI building blocks without adopting a framework-level r
 ## Install
 
 ```bash
-bun add @lostgradient/cinder svelte lucide-svelte
+bun add @lostgradient/cinder svelte lucide-svelte conversationalist zod
 ```
 
-`svelte` and `lucide-svelte` are peer dependencies. Cinder uses Lucide for its own component chrome, but it does not provide a general icon library for your application-specific icons.
+`svelte`, `lucide-svelte`, `conversationalist`, and `zod` are required peer dependencies. Cinder uses Lucide for its own component chrome, but it does not provide a general icon library for your application-specific icons. `@lostgradient/cinder/chat` expects your app to provide `conversationalist@^0.2.1` and `zod@4.4.1` so Chat data contracts resolve through the same package instances as the host application.
 
 Rich editor, markdown rendering, editor/commentary re-exports, and syntax-highlighting surfaces use optional peer dependencies. Install them only when your app imports `@lostgradient/cinder/chat` with the default composer, `@lostgradient/cinder/markdown-editor`, `@lostgradient/cinder/review-editor`, `@lostgradient/cinder/markdown`, `@lostgradient/cinder/markdown/*`, `@lostgradient/cinder/editor`, `@lostgradient/cinder/editor/*`, `@lostgradient/cinder/commentary`, `@lostgradient/cinder/commentary/*`, `@lostgradient/cinder/highlighters/shiki`, or relies on `Chat` built-in markdown/tool message rendering or `CodeBlock` automatic highlighting:
 

package/components.json

@@ -3,7 +3,7 @@
   "manifestVersion": 1,
   "package": {
     "name": "@lostgradient/cinder",
-    "version": "0.8.0",
+    "version": "0.9.0",
     "framework": "svelte",
     "frameworkVersionRange": ">=5.56.0 <6",
     "classPrefix": "cinder-",
@@ -290,14 +290,7 @@
           "reason": "Collecting arbitrary form input for a workflow — compose form controls directly instead."
         }
       ],
-      "related": [
-        "card",
-        "badge",
-        "status-dot",
-        "payload-inspector",
-        "secret-value-field",
-        "code-block"
-      ],
+      "related": ["card", "badge", "status-dot", "payload-inspector", "code-block", "collapsible"],
       "hasConstraints": false,
       "hasExamples": true,
       "artifacts": {
@@ -307,7 +300,7 @@
       },
       "a11y": {
         "notes": [
-          "Uses a named region and native button controls so approval actions are discoverable by assistive technology.",
+          "Renders as an article with native button controls so approval actions are discoverable without polluting the landmark list.",
           "Expiration changes update the visible state but do not fire approval callbacks automatically."
         ]
       }
@@ -950,6 +943,56 @@
         "examples": "@lostgradient/cinder/chat/examples"
       }
     },
+    {
+      "name": "ChatComposerPopover",
+      "id": "chat-composer-popover",
+      "import": "@lostgradient/cinder/chat-composer-popover",
+      "exportName": "ChatComposerPopover",
+      "category": "overlay",
+      "status": "beta",
+      "purpose": "Chat composer-bound slash-command and mention listbox primitive.",
+      "tags": ["chat", "command", "overlay"],
+      "useWhen": [
+        "Adding slash commands, mentions, or autocomplete to ChatInput without re-implementing combobox ARIA.",
+        "Composer suggestions should stay anchored to the active token and leave command definitions in application code."
+      ],
+      "avoidWhen": [
+        {
+          "reason": "Opening a global command launcher detached from the composer — use command-palette instead."
+        },
+        {
+          "reason": "Anchoring a generic command menu to an arbitrary input — use command-menu instead."
+        }
+      ],
+      "related": ["chat", "command-menu", "command-item", "command-palette"],
+      "hasConstraints": false,
+      "hasExamples": true,
+      "artifacts": {
+        "schema": "@lostgradient/cinder/chat-composer-popover/schema",
+        "variables": "@lostgradient/cinder/chat-composer-popover/variables",
+        "examples": "@lostgradient/cinder/chat-composer-popover/examples"
+      },
+      "a11y": {
+        "pattern": "WAI-ARIA Combobox with Listbox Popup",
+        "keyboard": [
+          {
+            "keys": "ArrowUp / ArrowDown",
+            "action": "Moves the active suggestion."
+          },
+          {
+            "keys": "Enter",
+            "action": "Selects the active suggestion."
+          },
+          {
+            "keys": "Escape",
+            "action": "Dismisses the suggestion popover."
+          }
+        ],
+        "notes": [
+          "Passes combobox role and aria-expanded, aria-controls, aria-activedescendant, and aria-autocomplete through to ChatInput's composer overlay API."
+        ]
+      }
+    },
     {
       "name": "ChatConversationHeader",
       "id": "chat-conversation-header",
@@ -3645,11 +3688,11 @@
       "exportName": "PayloadInspector",
       "category": "data-display",
       "status": "stable",
-      "purpose": "Composed inspector for structured payloads with summary, tree, and raw views, copy actions, and size/truncation status.",
+      "purpose": "Compact inspector for structured payloads: a labeled tree view with a copy action and size/truncation status.",
       "tags": ["json", "inspector", "payload"],
       "useWhen": [
         "Inspecting workflow inputs, signal payloads, activity results, or API response bodies in a dashboard.",
-        "Displaying a structured payload with metadata like content type, source, and timestamp."
+        "Displaying a structured payload with a visible label, byte size, and copy affordance."
       ],
       "avoidWhen": [
         {
@@ -3659,7 +3702,7 @@
           "reason": "Needing search, filtering, or virtualization over large collections — compose a custom viewer."
         }
       ],
-      "related": ["json-viewer", "code-block", "description-list", "copy-button"],
+      "related": ["json-viewer", "code-block", "copy-button"],
       "hasConstraints": false,
       "hasExamples": true,
       "artifacts": {
@@ -5126,11 +5169,12 @@
       "exportName": "Tab",
       "category": "navigation",
       "status": "stable",
-      "purpose": "Single selectable tab trigger inside a tabs composite that registers with the parent context and controls a matching tab-panel.",
+      "purpose": "Single selectable tab trigger inside a tabs composite that registers with the parent context and controls a matching tab-panel or caller-owned panel id.",
       "tags": ["navigation", "tabs"],
       "useWhen": [
         "Declaring one tab heading inside a tabs ancestor with a stable value identifier.",
-        "Pairing one-to-one with a tab-panel that shares the same value to wire aria-controls."
+        "Pairing one-to-one with a tab-panel that shares the same value to wire aria-controls.",
+        "Pointing multiple tab triggers at a caller-owned panel with the controls prop."
       ],
       "avoidWhen": [
         {

package/dist/components/_internal/command-list-context.d.ts

@@ -30,16 +30,16 @@ export type CommandItemRegistrationInput = {
  * Context provided by CommandPalette and consumed by CommandItem.
  */
 export type CommandListContext = {
-    /** Stable id for the listbox; items compose their own ids from this. */
+    /** Live id for the listbox; items keep their ids in sync with it. */
     readonly listboxId: string;
     /** Id of the currently active (virtually focused) item, or null. */
     readonly activeItemId: string | null;
     /**
      * Called by each CommandItem when it mounts.
-     * Returns a stable id and an unregister function.
+     * Returns a live id handle and an unregister function.
      */
     register: (input: CommandItemRegistrationInput, node: HTMLElement) => {
-        id: string;
+        readonly id: string;
         unregister: () => void;
     };
     /** Called by items on pointerenter to sync hover with arrow-key navigation. */

package/dist/components/_internal/create-command-list-state.svelte.d.ts

@@ -1,7 +1,12 @@
 import type { CommandItemRegistrationInput } from './command-list-context.ts';
+type RegistrationHandle = {
+    id: string;
+    unregister: () => void;
+};
 type RegistrationRecord = CommandItemRegistrationInput & {
     id: string;
     node: HTMLElement;
+    handle: RegistrationHandle;
 };
 export type CommandListKeyboardOptions = {
     event: KeyboardEvent;
@@ -12,32 +17,27 @@ export type CommandListKeyboardOptions = {
 };
 export declare class CommandListState {
     #private;
-    readonly listboxId: string;
     registrations: RegistrationRecord[];
     registrationsReady: boolean;
     enabledIds: string[];
     activeItemId: string | null;
-    constructor(listboxId: string);
+    constructor(listboxId: string | (() => string));
+    get listboxId(): string;
+    syncListboxId(nextListboxId?: string): void;
     resetActiveItem(): void;
     refreshRegistrationsReady(): void;
     scrollActiveItemIntoView(): void;
     setActiveById(id: string): void;
-    register(input: CommandItemRegistrationInput, node: HTMLElement): {
-        id: string;
-        unregister: () => void;
-    };
+    register(input: CommandItemRegistrationInput, node: HTMLElement): RegistrationHandle;
     activateItemById(id: string): RegistrationRecord | null;
     handleKeydown({ event, onEnter, onEscape, ignoreModifiedNavigation, preventDefaultOnEmptyEnter, }: CommandListKeyboardOptions): boolean;
     createContext(activateItemById?: (id: string) => void): {
         readonly listboxId: string;
         readonly activeItemId: string | null;
-        register: (input: CommandItemRegistrationInput, node: HTMLElement) => {
-            id: string;
-            unregister: () => void;
-        };
+        register: (input: CommandItemRegistrationInput, node: HTMLElement) => RegistrationHandle;
         setActiveById: (id: string) => void;
         activateItemById: (id: string) => void;
     };
 }
-export declare function createCommandListState(listboxId: string): CommandListState;
+export declare function createCommandListState(listboxId: string | (() => string)): CommandListState;
 export {};