@lostgradient/cinder 0.8.0 → 0.9.0

package/dist/server/{index.server-9s4na701.js → index.server-xjnge1yw.js}

@@ -1,13 +1,13 @@
 import {
   setTabsContext
 } from "./index.server-js3eva86.js";
+import {
+  commitValue
+} from "./index.server-42qeekwc.js";
 import {
   handleRovingKeydown,
   isRovingKey
 } from "./index.server-0a8m173j.js";
-import {
-  commitValue
-} from "./index.server-42qeekwc.js";
 import {
   classNames
 } from "./index.server-z7nvkz8v.js";
@@ -192,4 +192,4 @@ function Tabs($$renderer, $$props) {
 
 export { Tabs };
 
-//# debugId=FBD0BDC5785052B564756E2164756E21
+//# debugId=712CE44C77B0B2EF64756E2164756E21

package/dist/server/index.server-xtjjmsyq.js

@@ -0,0 +1,315 @@
+import {
+  Command_item
+} from "./index.server-krqvnt6p.js";
+import {
+  Command_menu,
+  detectTrigger
+} from "./index.server-rga8sc7j.js";
+
+// src/components/chat-composer-popover/chat-composer-popover.svelte
+import * as $ from "svelte/internal/server";
+import { onDestroy } from "svelte";
+
+// src/components/chat-composer-popover/chat-composer-popover-filter.ts
+function normalize(value) {
+  return value.trim().toLowerCase();
+}
+function fuzzySubsequenceScore(candidate, query) {
+  const normalizedCandidate = normalize(candidate);
+  const normalizedQuery = normalize(query);
+  if (normalizedQuery.length === 0)
+    return 0;
+  if (normalizedCandidate.length === 0)
+    return null;
+  let score = 0;
+  let searchIndex = 0;
+  let previousMatchIndex = -1;
+  for (const character of normalizedQuery) {
+    const matchIndex = normalizedCandidate.indexOf(character, searchIndex);
+    if (matchIndex === -1)
+      return null;
+    score += matchIndex === previousMatchIndex + 1 ? 4 : 1;
+    if (matchIndex === 0)
+      score += 2;
+    if (/[\s/_-]/u.test(normalizedCandidate[matchIndex - 1] ?? ""))
+      score += 2;
+    previousMatchIndex = matchIndex;
+    searchIndex = matchIndex + 1;
+  }
+  return score - normalizedCandidate.length * 0.01;
+}
+function filterFuzzySubsequence(items, query) {
+  const normalizedQuery = normalize(query);
+  if (normalizedQuery.length === 0)
+    return [...items];
+  const matchedItems = items.map((item, index) => {
+    const candidates = [item.label, item.value, ...item.keywords ?? []];
+    let bestScore = null;
+    for (const candidate of candidates) {
+      const score = fuzzySubsequenceScore(candidate, normalizedQuery);
+      if (score !== null && (bestScore === null || score > bestScore)) {
+        bestScore = score;
+      }
+    }
+    return bestScore === null ? null : { item, index, score: bestScore };
+  }).filter((result) => result !== null);
+  matchedItems.sort((a, b) => b.score - a.score || a.index - b.index);
+  return matchedItems.map((result) => result.item);
+}
+
+// src/components/chat-composer-popover/chat-composer-popover.svelte
+function Chat_composer_popover($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      id,
+      value = "",
+      items,
+      triggers = ["/", "@"],
+      label = "Composer suggestions",
+      placement = "bottom-start",
+      offset = 6,
+      composer,
+      item,
+      empty,
+      detectTrigger: detectTrigger2,
+      filter = filterFuzzySubsequence,
+      onselect,
+      ondismiss
+    } = $$props;
+    let open = false;
+    let anchor = null;
+    let caretIndex = 0;
+    const listboxId = $.derived(() => `${id}-listbox`);
+    let activeItemId = null;
+    let activeMatch = null;
+    let composerSyncTimer = null;
+    let lastSyncedValue = value;
+    let suppressNextValueSync = false;
+    const emptyContent = $.derived(() => empty);
+    const query = $.derived(() => activeMatch?.query ?? "");
+    const trigger = $.derived(() => activeMatch?.trigger ?? triggers[0] ?? "/");
+    const filteredItems = $.derived(() => {
+      if (!activeMatch)
+        return [];
+      return [...filter(items, activeMatch.query, activeMatch.trigger)];
+    });
+    const composerProps = $.derived(() => ({
+      composerRole: "combobox",
+      composerAriaExpanded: open,
+      composerAriaControls: open ? listboxId() : undefined,
+      composerAriaActiveDescendant: open ? activeItemId ?? undefined : undefined,
+      composerAriaAutocomplete: "list",
+      oncomposerinput: handleComposerInput,
+      oncomposerkeydown: handleComposerKeydown,
+      oncomposerselectionchange: handleComposerSelectionChange,
+      oncomposerblur: handleComposerBlur
+    }));
+    function getComposerElement(event) {
+      const target = event.currentTarget ?? event.target;
+      if (target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement) {
+        return target;
+      }
+      return null;
+    }
+    function findTriggerMatch(text, selectionStart, selectionEnd) {
+      if (detectTrigger2)
+        return detectTrigger2(text, selectionStart, selectionEnd);
+      for (const triggerChar of triggers) {
+        const match = detectTrigger({ text, selectionStart, selectionEnd, triggerChar });
+        if (match) {
+          return { ...match, trigger: triggerChar };
+        }
+      }
+      return null;
+    }
+    function updateFromComposer(composerElement, nextValue) {
+      if (composerElement)
+        anchor = composerElement;
+      const selectionStart = composerElement?.selectionStart ?? nextValue.length;
+      const selectionEnd = composerElement?.selectionEnd ?? selectionStart;
+      lastSyncedValue = nextValue;
+      value = nextValue;
+      caretIndex = selectionEnd;
+      activeMatch = findTriggerMatch(nextValue, selectionStart, selectionEnd);
+      const wasOpen = open;
+      open = activeMatch !== null && anchor !== null;
+      if (!open) {
+        activeItemId = null;
+        if (wasOpen)
+          ondismiss?.();
+      }
+    }
+    function dismiss({ restoreFocus = true } = {}) {
+      if (!open && !activeMatch && !activeItemId)
+        return;
+      clearComposerSyncTimer();
+      open = false;
+      activeItemId = null;
+      activeMatch = null;
+      if (restoreFocus)
+        anchor?.focus();
+      ondismiss?.();
+    }
+    function handleComposerInput(nextValue, event) {
+      suppressNextValueSync = false;
+      updateFromComposer(event ? getComposerElement(event) : anchor, nextValue);
+    }
+    function handleComposerSelectionChange(event) {
+      suppressNextValueSync = false;
+      const composerElement = getComposerElement(event);
+      if (!composerElement)
+        return;
+      syncComposerSelectionAfterNativeNavigation(composerElement);
+    }
+    function handleComposerBlur(event) {
+      if (event.currentTarget === anchor) {
+        dismiss({ restoreFocus: false });
+      }
+    }
+    function syncComposerSelectionAfterNativeNavigation(composerElement) {
+      clearComposerSyncTimer();
+      composerSyncTimer = setTimeout(() => {
+        composerSyncTimer = null;
+        updateFromComposer(composerElement, composerElement.value);
+      }, 0);
+    }
+    function clearComposerSyncTimer() {
+      if (composerSyncTimer === null)
+        return;
+      clearTimeout(composerSyncTimer);
+      composerSyncTimer = null;
+    }
+    function handleComposerKeydown(event) {
+      const composerElement = event.currentTarget instanceof HTMLTextAreaElement || event.currentTarget instanceof HTMLInputElement ? event.currentTarget : null;
+      if (composerElement) {
+        anchor = composerElement;
+        caretIndex = composerElement.selectionEnd ?? value.length;
+      }
+      if (!open || event.isComposing || event.keyCode === 229)
+        return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        dismiss();
+        return;
+      }
+      const isNavigationKey = event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End";
+      const isMenuNavigationKey = event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Home" || event.key === "End";
+      const isModifiedNavigation = isNavigationKey && (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey);
+      if (isMenuNavigationKey && !isModifiedNavigation || event.key === "Enter" && activeItemId) {
+        event.preventDefault();
+      }
+      if (composerElement && isNavigationKey && (isModifiedNavigation || !isMenuNavigationKey)) {
+        syncComposerSelectionAfterNativeNavigation(composerElement);
+      }
+    }
+    onDestroy(() => {
+      clearComposerSyncTimer();
+    });
+    function handleStateChange(state) {
+      activeItemId = state.activeItemId;
+    }
+    function handleSelect(selection) {
+      const selectedItem = filteredItems().find((candidate) => candidate.value === selection.value);
+      if (!selectedItem || !activeMatch)
+        return;
+      const detail = {
+        item: selectedItem,
+        value: selection.value,
+        query: activeMatch.query,
+        trigger: activeMatch.trigger,
+        range: { start: activeMatch.start, end: activeMatch.end }
+      };
+      open = false;
+      activeItemId = null;
+      activeMatch = null;
+      anchor?.focus();
+      suppressNextValueSync = true;
+      queueMicrotask(() => {
+        suppressNextValueSync = false;
+      });
+      onselect?.(detail);
+    }
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      composer($$renderer3, composerProps());
+      $$renderer3.push(`<!----> `);
+      {
+        let items2 = function($$renderer4) {
+          $$renderer4.push(`<!--[-->`);
+          const each_array = $.ensure_array_like(filteredItems());
+          for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+            let command = each_array[$$index];
+            Command_item($$renderer4, {
+              value: command.value,
+              disabled: command.disabled === true,
+              description: item ? "" : command.description ?? "",
+              accessibleLabel: command.description ? `${command.label}, ${command.description}` : command.label,
+              selectionMode: "parent",
+              children: ($$renderer5) => {
+                if (item) {
+                  $$renderer5.push("<!--[0-->");
+                  item($$renderer5, { item: command, query: query(), trigger: trigger() });
+                  $$renderer5.push(`<!---->`);
+                } else {
+                  $$renderer5.push("<!--[-1-->");
+                  $$renderer5.push(`${$.escape(command.label)}`);
+                }
+                $$renderer5.push(`<!--]-->`);
+              },
+              $$slots: { default: true }
+            });
+          }
+          $$renderer4.push(`<!--]-->`);
+        }, empty2 = function($$renderer4) {
+          if (emptyContent()) {
+            $$renderer4.push("<!--[0-->");
+            emptyContent()($$renderer4);
+            $$renderer4.push(`<!---->`);
+          } else {
+            $$renderer4.push("<!--[-1-->");
+            $$renderer4.push(`No suggestions`);
+          }
+          $$renderer4.push(`<!--]-->`);
+        };
+        Command_menu($$renderer3, {
+          anchor,
+          caretIndex,
+          query: query(),
+          placement,
+          offset,
+          label,
+          listboxId: listboxId(),
+          onselect: handleSelect,
+          ondismiss: () => dismiss({ restoreFocus: false }),
+          onstatechange: handleStateChange,
+          get open() {
+            return open;
+          },
+          set open($$value) {
+            open = $$value;
+            $$settled = false;
+          },
+          items: items2,
+          empty: empty2,
+          $$slots: { items: true, empty: true }
+        });
+      }
+      $$renderer3.push(`<!---->`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    $.bind_props($$props, { value });
+  }, Chat_composer_popover);
+}
+
+// src/components/chat-composer-popover/index.ts
+var chat_composer_popover_default = Chat_composer_popover;
+export { fuzzySubsequenceScore, filterFuzzySubsequence, Chat_composer_popover, chat_composer_popover_default };
+
+//# debugId=A26051A42F206F7F64756E2164756E21

package/dist/server/{index.server-hhxjaeen.js → index.server-xz99aed4.js}

@@ -1,12 +1,12 @@
+import {
+  Dropdown_group
+} from "./index.server-x8c8x34n.js";
 import {
   Dropdown_label
 } from "./index.server-z7tyy8gh.js";
 import {
   Dropdown_separator
 } from "./index.server-vcr8a585.js";
-import {
-  Dropdown_group
-} from "./index.server-x8c8x34n.js";
 import {
   Dropdown
 } from "./index.server-tfftb7hs.js";
@@ -32,4 +32,4 @@ var Dropdown2 = Object.assign(Dropdown, {
 var dropdown_default = Dropdown2;
 export { Dropdown2 as Dropdown, dropdown_default };
 
-//# debugId=4AD75212C41AB8F664756E2164756E21
+//# debugId=6DFC01E65956544564756E2164756E21

package/dist/server/{index.server-vne4rzfa.js → index.server-y4n8vc08.js}

@@ -1,6 +1,6 @@
 import {
   Popover
-} from "./index.server-hcfnae5y.js";
+} from "./index.server-dwwqssey.js";
 
 // src/components/popover/index.ts
 var popover_default = Popover;

package/dist/server/{index.server-5d01cn4f.js → index.server-y83kqayt.js}

@@ -1,10 +1,10 @@
+import {
+  createMultiSelection
+} from "./index.server-p3aw22qv.js";
 import {
   Accordion_item,
   setAccordionContext
 } from "./index.server-hfx487zj.js";
-import {
-  createMultiSelection
-} from "./index.server-p3aw22qv.js";
 import {
   classNames
 } from "./index.server-z7nvkz8v.js";
@@ -49,4 +49,4 @@ var Accordion2 = Object.assign(Accordion, {
 var accordion_default = Accordion2;
 export { Accordion2 as Accordion, accordion_default };
 
-//# debugId=AD282D0CC6C77AEF64756E2164756E21
+//# debugId=E689D757091789D364756E2164756E21

package/dist/server/{index.server-1nh09ck7.js → index.server-yhzydqxe.js}

@@ -1,15 +1,15 @@
 import {
   Popover
-} from "./index.server-hcfnae5y.js";
+} from "./index.server-dwwqssey.js";
 import {
   getFormFieldContext
 } from "./index.server-weae7gs2.js";
-import {
-  _visually_hidden_live_region
-} from "./index.server-44vrcbhz.js";
 import {
   resolveFieldControl
 } from "./index.server-abm21gz1.js";
+import {
+  _visually_hidden_live_region
+} from "./index.server-44vrcbhz.js";
 import {
   classNames
 } from "./index.server-z7nvkz8v.js";
@@ -374,4 +374,4 @@ var autocomplete_default = Autocomplete;
 
 export { autocomplete_default };
 
-//# debugId=97F5263277D289D864756E2164756E21
+//# debugId=D047F702637E518564756E2164756E21

package/dist/server/{index.server-atjc1qcq.js → index.server-yz4k36cw.js}

@@ -1,6 +1,6 @@
 import {
   conversationSummaryTimestamp
-} from "./index.server-s9khh4ry.js";
+} from "./index.server-mzzb7dnm.js";
 import {
   classNames
 } from "./index.server-z7nvkz8v.js";

package/dist/server/{index.server-w6k62afr.js → index.server-ze1ymmbw.js}

@@ -55,7 +55,7 @@ function _json_viewer_node($$renderer, $$props) {
       } else {
         $$renderer2.push("<!--[-1-->");
       }
-      $$renderer2.push(`<!--]--> <span class="cinder-json-viewer__caret"${$.attr("data-cinder-collapsed", collapsed || undefined)}></span> <span class="cinder-json-viewer__brace">${$.escape(isArray() ? "[" : "{")}</span> `);
+      $$renderer2.push(`<!--]--> <svg class="cinder-json-viewer__caret"${$.attr("data-cinder-collapsed", collapsed || undefined)} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z" clip-rule="evenodd"></path></svg> <span class="cinder-json-viewer__brace">${$.escape(isArray() ? "[" : "{")}</span> `);
       if (collapsed) {
         $$renderer2.push("<!--[0-->");
         $$renderer2.push(`<span class="cinder-json-viewer__summary">${$.escape(itemCount())} ${$.escape(itemCount() === 1 ? "item" : "items")}</span> <span class="cinder-json-viewer__brace">${$.escape(isArray() ? "]" : "}")}</span>`);
@@ -220,4 +220,4 @@ function Json_viewer($$renderer, $$props) {
 
 export { Json_viewer };
 
-//# debugId=4610D0EF23A4B97D64756E2164756E21
+//# debugId=73E01DFC934121F164756E2164756E21

package/dist/server/{index.server-914v805w.js → index.server-zgd1g8mk.js}

@@ -1,6 +1,6 @@
 import {
   Json_viewer
-} from "./index.server-w6k62afr.js";
+} from "./index.server-ze1ymmbw.js";
 
 // src/components/json-viewer/index.ts
 var json_viewer_default = Json_viewer;

package/dist/server/{index.server-aeexcxdp.js → index.server-zh3r8vfd.js}

@@ -1,6 +1,6 @@
 import {
   Payload_inspector
-} from "./index.server-vt6sn9y4.js";
+} from "./index.server-m0ezemav.js";
 
 // src/components/payload-inspector/index.ts
 var payload_inspector_default = Payload_inspector;

package/dist/server/{index.server-10jb2jzm.js → index.server-zsjf8enc.js}

@@ -1,9 +1,9 @@
-import {
-  getFormFieldContext
-} from "./index.server-weae7gs2.js";
 import {
   commitValue
 } from "./index.server-42qeekwc.js";
+import {
+  getFormFieldContext
+} from "./index.server-weae7gs2.js";
 import {
   classNames
 } from "./index.server-z7nvkz8v.js";
@@ -50,4 +50,4 @@ function Toggle($$renderer, $$props) {
 var toggle_default = Toggle;
 export { Toggle, toggle_default };
 
-//# debugId=426B7366973E509A64756E2164756E21
+//# debugId=12CB9C541A47207164756E2164756E21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lostgradient/cinder",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A Svelte 5 component library and design system focused on accessibility, theming, and per-component tree-shaking.",
   "keywords": [
     "svelte",
@@ -967,6 +967,38 @@
       "import": "./src/components/chat/chat.examples.json",
       "default": "./src/components/chat/chat.examples.json"
     },
+    "./chat-composer-popover": {
+      "types": "./dist/components/chat-composer-popover/index.d.ts",
+      "browser": "./src/components/chat-composer-popover/index.ts",
+      "node": "./dist/server/components/chat-composer-popover/index.js",
+      "svelte": "./src/components/chat-composer-popover/index.ts",
+      "import": "./src/components/chat-composer-popover/index.ts",
+      "default": "./dist/components/chat-composer-popover/index.js"
+    },
+    "./chat-composer-popover/schema": {
+      "types": "./dist/components/chat-composer-popover/chat-composer-popover.schema.d.ts",
+      "browser": "./src/components/chat-composer-popover/chat-composer-popover.schema.ts",
+      "node": "./dist/components/chat-composer-popover/chat-composer-popover.schema.js",
+      "svelte": "./src/components/chat-composer-popover/chat-composer-popover.schema.ts",
+      "import": "./src/components/chat-composer-popover/chat-composer-popover.schema.ts",
+      "default": "./dist/components/chat-composer-popover/chat-composer-popover.schema.js"
+    },
+    "./chat-composer-popover/variables": {
+      "types": "./dist/components/chat-composer-popover/chat-composer-popover.variables.d.ts",
+      "browser": "./src/components/chat-composer-popover/chat-composer-popover.variables.ts",
+      "node": "./dist/components/chat-composer-popover/chat-composer-popover.variables.js",
+      "svelte": "./src/components/chat-composer-popover/chat-composer-popover.variables.ts",
+      "import": "./src/components/chat-composer-popover/chat-composer-popover.variables.ts",
+      "default": "./dist/components/chat-composer-popover/chat-composer-popover.variables.js"
+    },
+    "./chat-composer-popover/styles": {
+      "types": "./dist/components/chat-composer-popover/chat-composer-popover.css.d.ts",
+      "default": "./dist/components/chat-composer-popover/chat-composer-popover.css"
+    },
+    "./chat-composer-popover/examples": {
+      "import": "./src/components/chat-composer-popover/chat-composer-popover.examples.json",
+      "default": "./src/components/chat-composer-popover/chat-composer-popover.examples.json"
+    },
     "./chat-conversation-header": {
       "types": "./dist/components/chat-conversation-header/index.d.ts",
       "browser": "./src/components/chat-conversation-header/index.ts",
@@ -6414,12 +6446,10 @@
     "@modelcontextprotocol/sdk": "^1.29.0",
     "@tanstack/virtual-core": "^3.17.1",
     "ajv": "^8",
-    "conversationalist": "^0.2.1",
     "diff-match-patch": "^1.0.5",
     "esm-env": "^1.2.0",
     "libphonenumber-js": "^1.13.3",
-    "qrcode": "^1.5.4",
-    "zod": "4.4.1"
+    "qrcode": "^1.5.4"
   },
   "devDependencies": {
     "@changesets/parse": "0.4.3",
@@ -6431,6 +6461,7 @@
     "@types/qrcode": "^1.5.6",
     "chalk": "^5.6.2",
     "change-case": "^5.4.4",
+    "conversationalist": "^0.2.1",
     "happy-dom": "^15.11.7",
     "js-yaml": "^4.1.0",
     "lucide-svelte": "^0.503.0",
@@ -6446,7 +6477,8 @@
     "svelte-check": "^4.0.0",
     "svelte2tsx": "^0.7.33",
     "ts-morph": "^28.0.0",
-    "typescript": "^5.9.0"
+    "typescript": "^5.9.0",
+    "zod": "4.4.1"
   },
   "peerDependencies": {
     "@milkdown/ctx": "^7.17.3",
@@ -6460,6 +6492,7 @@
     "@types/mdast": "^4.0.4",
     "@types/unist": "^3.0.0",
     "comlink": "^4.4.2",
+    "conversationalist": "^0.2.1",
     "hast-util-sanitize": "^5.0.0",
     "js-yaml": "^4.1.0",
     "lucide-svelte": ">=0.400.0 <1",
@@ -6480,7 +6513,8 @@
     "svelte": ">=5.56.0 <6",
     "unified": "^11.0.5",
     "unist-util-remove": "^4.0.0",
-    "unist-util-visit": "^5.0.0"
+    "unist-util-visit": "^5.0.0",
+    "zod": "4.4.1"
   },
   "peerDependenciesMeta": {
     "@milkdown/ctx": {

package/src/components/_internal/command-list-context.ts

@@ -34,18 +34,18 @@ 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; unregister: () => void };
+  ) => { readonly id: string; unregister: () => void };
   /** Called by items on pointerenter to sync hover with arrow-key navigation. */
   setActiveById: (id: string) => void;
   /** Called by items and owners to activate the current item by id. */