@lostgradient/cinder 0.1.1 → 0.2.0

package/dist/components/chat/index.js

@@ -3112,7 +3112,10 @@ function Button($$anchor, $$props) {
     "aria-disabled",
     "aria-busy",
     "aria-label",
-    "aria-labelledby"
+    "aria-labelledby",
+    "aria-expanded",
+    "aria-controls",
+    "aria-haspopup"
   ]);
   const mergedClassName = $34.derived(() => classNames("cinder-button", $$props.class));
   const dataAttributes = $34.derived(() => ({
@@ -3170,6 +3173,9 @@ function Button($$anchor, $$props) {
         "aria-busy": $34.get(resolvedAriaBusy),
         "aria-label": $34.get(resolvedAriaLabel),
         "aria-labelledby": $34.get(resolvedAriaLabelledBy),
+        "aria-expanded": $$props["aria-expanded"],
+        "aria-controls": $$props["aria-controls"],
+        "aria-haspopup": $$props["aria-haspopup"],
         onclick: handleClick
       }));
       var node_10 = $34.child(a);
@@ -3189,6 +3195,9 @@ function Button($$anchor, $$props) {
         "aria-busy": $34.get(resolvedAriaBusy),
         "aria-label": $34.get(resolvedAriaLabel),
         "aria-labelledby": $34.get(resolvedAriaLabelledBy),
+        "aria-expanded": $$props["aria-expanded"],
+        "aria-controls": $$props["aria-controls"],
+        "aria-haspopup": $$props["aria-haspopup"],
         onclick: handleClick
       }));
       var node_11 = $34.child(button);
@@ -6734,7 +6743,8 @@ function Dropdown_menu($$anchor, $$props) {
 // src/components/dropdown-item/dropdown-item.svelte
 import"svelte/internal/disclose-version";
 import * as $62 from "svelte/internal/client";
-var root23 = $62.from_html(`<button><!></button>`);
+var root_115 = $62.from_html(`<a><!></a>`);
+var root_36 = $62.from_html(`<button><!></button>`);
 function Dropdown_item($$anchor, $$props) {
   $62.push($$props, true);
   let variant = $62.prop($$props, "variant", 3, "default"), inset = $62.prop($$props, "inset", 3, false), closeOnSelect = $62.prop($$props, "closeOnSelect", 3, true), rest = $62.rest_props($$props, [
@@ -6747,55 +6757,123 @@ function Dropdown_item($$anchor, $$props) {
     "closeOnSelect",
     "class",
     "onclick",
+    "onkeydown",
+    "href",
     "children"
   ]);
   const context = getDropdownContext();
+  const isLink = $62.derived(() => $$props.href !== undefined);
+  const sharedClass = $62.derived(() => classNames("cinder-_option-row", "cinder-dropdown-item", inset() && "cinder-dropdown-item--inset", $$props.class));
   function handleClick(event4) {
-    if ($$props.disabled)
+    if ($$props.disabled) {
+      event4.preventDefault();
       return;
+    }
     if (typeof $$props.onclick === "function") {
-      $$props.onclick(event4);
+      if ($62.get(isLink)) {
+        $$props.onclick(event4);
+      } else {
+        $$props.onclick(event4);
+      }
     }
     if (closeOnSelect()) {
       context.close();
     }
   }
-  var button = root23();
-  $62.attribute_effect(button, ($0) => ({
-    ...rest,
-    type: "button",
-    role: "menuitem",
-    class: $0,
-    "data-cinder-variant": variant(),
-    tabindex: -1,
-    "data-disabled": $$props.disabled ? "" : undefined,
-    "aria-disabled": $$props.disabled ? "true" : undefined,
-    onclick: handleClick
-  }), [
-    () => classNames("cinder-_option-row", "cinder-dropdown-item", inset() && "cinder-dropdown-item--inset", $$props.class)
-  ]);
-  var node = $62.child(button);
+  function handleAnchorKeydown(event4) {
+    if (typeof $$props.onkeydown === "function") {
+      $$props.onkeydown(event4);
+    }
+    if (event4.defaultPrevented)
+      return;
+    if (event4.key !== " " && event4.key !== "Spacebar")
+      return;
+    event4.preventDefault();
+    if ($$props.disabled)
+      return;
+    event4.currentTarget.click();
+  }
+  const anchorAttributes = rest;
+  const buttonAttributes = rest;
+  const buttonType = $62.derived(() => $$props.type ?? "button");
+  var fragment = $62.comment();
+  var node = $62.first_child(fragment);
   {
-    var consequent = ($$anchor2) => {
-      var fragment = $62.comment();
-      var node_1 = $62.first_child(fragment);
-      $62.snippet(node_1, () => $$props.children);
-      $62.append($$anchor2, fragment);
+    var consequent_1 = ($$anchor2) => {
+      var a = root_115();
+      $62.attribute_effect(a, () => ({
+        ...anchorAttributes,
+        href: $$props.href,
+        role: "menuitem",
+        class: $62.get(sharedClass),
+        "data-cinder-variant": variant(),
+        tabindex: -1,
+        "data-disabled": $$props.disabled ? "" : undefined,
+        "aria-disabled": $$props.disabled ? "true" : undefined,
+        onclick: handleClick,
+        onkeydown: handleAnchorKeydown
+      }));
+      var node_1 = $62.child(a);
+      {
+        var consequent = ($$anchor3) => {
+          var fragment_1 = $62.comment();
+          var node_2 = $62.first_child(fragment_1);
+          $62.snippet(node_2, () => $$props.children);
+          $62.append($$anchor3, fragment_1);
+        };
+        $62.if(node_1, ($$render) => {
+          if ($$props.children)
+            $$render(consequent);
+        });
+      }
+      $62.reset(a);
+      $62.append($$anchor2, a);
+    };
+    var alternate = ($$anchor2) => {
+      var button = root_36();
+      $62.attribute_effect(button, () => ({
+        ...buttonAttributes,
+        type: $62.get(buttonType),
+        role: "menuitem",
+        class: $62.get(sharedClass),
+        "data-cinder-variant": variant(),
+        tabindex: -1,
+        "data-disabled": $$props.disabled ? "" : undefined,
+        "aria-disabled": $$props.disabled ? "true" : undefined,
+        onclick: handleClick,
+        onkeydown: $$props.onkeydown
+      }));
+      var node_3 = $62.child(button);
+      {
+        var consequent_2 = ($$anchor3) => {
+          var fragment_2 = $62.comment();
+          var node_4 = $62.first_child(fragment_2);
+          $62.snippet(node_4, () => $$props.children);
+          $62.append($$anchor3, fragment_2);
+        };
+        $62.if(node_3, ($$render) => {
+          if ($$props.children)
+            $$render(consequent_2);
+        });
+      }
+      $62.reset(button);
+      $62.append($$anchor2, button);
     };
     $62.if(node, ($$render) => {
-      if ($$props.children)
-        $$render(consequent);
+      if ($62.get(isLink))
+        $$render(consequent_1);
+      else
+        $$render(alternate, -1);
     });
   }
-  $62.reset(button);
-  $62.append($$anchor, button);
+  $62.append($$anchor, fragment);
   $62.pop();
 }
 
 // src/components/markdown-editor/editor-toolbar/toolbar-dropdown.svelte
 var root_211 = $63.from_html(`<!> <span class="toolbar-dropdown-label svelte-1v28aut"> </span>`, 1);
 var root_63 = $63.from_html(`<!> <span class="dropdown-item-label svelte-1v28aut"> </span> <!>`, 1);
-var root_115 = $63.from_html(`<!> <!>`, 1);
+var root_116 = $63.from_html(`<!> <!>`, 1);
 function Toolbar_dropdown($$anchor, $$props) {
   $63.push($$props, true);
   let disabled = $63.prop($$props, "disabled", 3, false);
@@ -6808,7 +6886,7 @@ function Toolbar_dropdown($$anchor, $$props) {
       return $$props.id;
     },
     children: ($$anchor2, $$slotProps) => {
-      var fragment_1 = root_115();
+      var fragment_1 = root_116();
       var node = $63.first_child(fragment_1);
       {
         let $0 = $63.derived(() => classNames("toolbar-dropdown-trigger", $$props.class));
@@ -6902,7 +6980,7 @@ function Toolbar_dropdown($$anchor, $$props) {
 
 // src/components/markdown-editor/editor-toolbar/editor-toolbar.svelte
 var root_212 = $64.from_html(`<div class="toolbar-spacer svelte-1m9m099"></div> <!>`, 1);
-var root_116 = $64.from_html(`<div class="toolbar-group svelte-1m9m099" role="group" aria-label="History"><!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Block type"><!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Text formatting"><!> <!> <!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Links"><!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Lists"><!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Block operations"><!></div> <!>`, 1);
+var root_117 = $64.from_html(`<div class="toolbar-group svelte-1m9m099" role="group" aria-label="History"><!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Block type"><!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Text formatting"><!> <!> <!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Links"><!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Lists"><!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Block operations"><!></div> <!>`, 1);
 function Editor_toolbar($$anchor, $$props) {
   $64.push($$props, true);
   let canUndo = $64.prop($$props, "canUndo", 3, false), canRedo = $64.prop($$props, "canRedo", 3, false), disabled = $64.prop($$props, "disabled", 3, false), rest = $64.rest_props($$props, [
@@ -7022,7 +7100,7 @@ function Editor_toolbar($$anchor, $$props) {
       }
     }, () => rest, {
       children: ($$anchor2, $$slotProps) => {
-        var fragment_1 = root_116();
+        var fragment_1 = root_117();
         var div = $64.first_child(fragment_1);
         var node = $64.child(div);
         {
@@ -7370,19 +7448,19 @@ var getFormFieldContext = optionalContext(getFormFieldContextStrict);
 
 // src/components/input/input.svelte
 var calendarIcon = ($$anchor) => {
-  var svg = root_117();
+  var svg = root_118();
   $65.append($$anchor, svg);
 };
-var root_117 = $65.from_svg(`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`);
+var root_118 = $65.from_svg(`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`);
 var root_213 = $65.from_html(`<input/>`);
-var root_36 = $65.from_html(`<label class="cinder-input-field__label"> </label>`);
+var root_37 = $65.from_html(`<label class="cinder-input-field__label"> </label>`);
 var root_55 = $65.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
 var root_64 = $65.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
 var root_74 = $65.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
 var root_45 = $65.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
 var root_94 = $65.from_html(`<p class="cinder-input-field__description"> </p>`);
 var root_103 = $65.from_html(`<p class="cinder-input-field__error" aria-live="polite"> </p>`);
-var root24 = $65.from_html(`<div class="cinder-input-field"><!> <!> <!> <!></div>`);
+var root23 = $65.from_html(`<div class="cinder-input-field"><!> <!> <!> <!></div>`);
 function Input($$anchor, $$props) {
   $65.push($$props, true);
   const inputElement = ($$anchor2) => {
@@ -7441,11 +7519,11 @@ function Input($$anchor, $$props) {
   const hasTrailing = $65.derived(() => !!$$props.trailing || $65.get(isNativeDateInput));
   const hasGroupWrapper = $65.derived(() => !!$$props.leading || $65.get(hasTrailing));
   const isInvalid = $65.derived(() => $65.get(resolvedAriaInvalid) === "true" || $65.get(resolvedAriaInvalid) === true);
-  var div = root24();
+  var div = root23();
   var node = $65.child(div);
   {
     var consequent = ($$anchor2) => {
-      var label_1 = root_36();
+      var label_1 = root_37();
       var text4 = $65.child(label_1, true);
       $65.reset(label_1);
       $65.template_effect(() => {
@@ -7602,8 +7680,8 @@ function Unlink($$anchor, $$props) {
   }));
 }
 // src/components/markdown-editor/editor-toolbar/link-popover.svelte
-var root_37 = $67.from_html(`<!> Remove`, 1);
-var root25 = $67.from_html(`<div role="dialog" aria-modal="true" tabindex="-1"><header class="link-popover-header svelte-13b14j2"><h2 class="link-popover-title svelte-13b14j2"><!> </h2> <button type="button" class="link-popover-close svelte-13b14j2" aria-label="Close"><!></button></header> <div class="link-popover-content svelte-13b14j2"><!> <!></div> <footer class="link-popover-footer svelte-13b14j2"><div class="link-popover-actions svelte-13b14j2"><!></div> <div class="link-popover-primary-actions svelte-13b14j2"><!> <!></div></footer></div>`);
+var root_38 = $67.from_html(`<!> Remove`, 1);
+var root24 = $67.from_html(`<div role="dialog" aria-modal="true" tabindex="-1"><header class="link-popover-header svelte-13b14j2"><h2 class="link-popover-title svelte-13b14j2"><!> </h2> <button type="button" class="link-popover-close svelte-13b14j2" aria-label="Close"><!></button></header> <div class="link-popover-content svelte-13b14j2"><!> <!></div> <footer class="link-popover-footer svelte-13b14j2"><div class="link-popover-actions svelte-13b14j2"><!></div> <div class="link-popover-primary-actions svelte-13b14j2"><!> <!></div></footer></div>`);
 function Link_popover($$anchor, $$props) {
   $67.push($$props, true);
   let mode = $67.prop($$props, "mode", 3, "insert"), initialUrl = $67.prop($$props, "initialUrl", 3, ""), initialText = $67.prop($$props, "initialText", 3, ""), hasSelection = $67.prop($$props, "hasSelection", 3, false), anchorElement = $67.prop($$props, "anchorElement", 3, null);
@@ -7682,7 +7760,7 @@ function Link_popover($$anchor, $$props) {
   function handleRemove() {
     $$props.onremove?.();
   }
-  var div = root25();
+  var div = root24();
   var header = $67.child(div);
   var h2 = $67.child(header);
   var node = $67.child(h2);
@@ -7755,7 +7833,7 @@ function Link_popover($$anchor, $$props) {
         size: "sm",
         onclick: handleRemove,
         children: ($$anchor3, $$slotProps) => {
-          var fragment_2 = root_37();
+          var fragment_2 = root_38();
           var node_5 = $67.first_child(fragment_2);
           Unlink(node_5, { class: "icon-sm" });
           $67.next();
@@ -7835,10 +7913,10 @@ var root_46 = $68.from_html(`<div class="toolbar-leading svelte-1mxvqjb"><!></di
 var root_56 = $68.from_html(`<div class="toolbar-actions svelte-1mxvqjb"><!></div>`);
 var root_75 = $68.from_html(`<!> <!>`, 1);
 var root_65 = $68.from_html(`<div class="toolbar-mode-toggle svelte-1mxvqjb"><!></div>`);
-var root_38 = $68.from_html(`<div class="editor-toolbar-wrapper svelte-1mxvqjb"><!> <!> <!> <!></div>`);
+var root_39 = $68.from_html(`<div class="editor-toolbar-wrapper svelte-1mxvqjb"><!> <!> <!> <!></div>`);
 var root_114 = $68.from_html(`<div class="cinder-markdown-content prose markdown-editor surface svelte-1mxvqjb" role="application" tabindex="0"></div>`);
 var root_124 = $68.from_html(`<textarea class="markdown-editor surface source-mode svelte-1mxvqjb"></textarea>`);
-var root26 = $68.from_html(`<div><!> <!> <!></div>`);
+var root25 = $68.from_html(`<div><!> <!> <!></div>`);
 function Markdown_editor($$anchor, $$props) {
   $68.push($$props, true);
   let label = $68.prop($$props, "label", 3, "Markdown editor"), value = $68.prop($$props, "value", 15, ""), mode = $68.prop($$props, "mode", 15, "wysiwyg"), showModeToggle = $68.prop($$props, "showModeToggle", 3, false), modeLabel = $68.prop($$props, "modeLabel", 3, "Editor mode"), readonly = $68.prop($$props, "readonly", 3, false), placeholder = $68.prop($$props, "placeholder", 3, "Start writing..."), showToolbar = $68.prop($$props, "showToolbar", 3, true), plugins = $68.prop($$props, "plugins", 19, () => []), snapshotMode = $68.prop($$props, "snapshotMode", 3, false), rest = $68.rest_props($$props, [
@@ -8261,7 +8339,7 @@ function Markdown_editor($$anchor, $$props) {
     getView,
     getEditor
   };
-  var div = root26();
+  var div = root25();
   $68.attribute_effect(div, ($0) => ({
     class: $0,
     "data-initializing": $68.get(isInitializing) || undefined,
@@ -8284,7 +8362,7 @@ function Markdown_editor($$anchor, $$props) {
           $68.append($$anchor3, fragment_1);
         };
         var alternate = ($$anchor3) => {
-          var div_1 = root_38();
+          var div_1 = root_39();
           var node_3 = $68.child(div_1);
           {
             var consequent_1 = ($$anchor4) => {
@@ -8518,15 +8596,15 @@ function Markdown_editor($$anchor, $$props) {
 $68.delegate(["input"]);
 
 // src/components/chat/input/chat-input.svelte
-var root_118 = $69.from_html(`<input type="hidden"/>`);
-var root_39 = $69.from_html(`<div class="chat-input-attachment-wrapper svelte-1tzweuh" role="listitem"><!> <button type="button" class="chat-input-attachment-remove svelte-1tzweuh"><!></button></div>`);
+var root_119 = $69.from_html(`<input type="hidden"/>`);
+var root_310 = $69.from_html(`<div class="chat-input-attachment-wrapper svelte-1tzweuh" role="listitem"><!> <button type="button" class="chat-input-attachment-remove svelte-1tzweuh"><!></button></div>`);
 var root_214 = $69.from_html(`<div class="chat-input-attachments svelte-1tzweuh" role="list" aria-label="Attached files"></div>`);
 var root_47 = $69.from_html(`<input type="file" multiple="" class="sr-only svelte-1tzweuh" aria-label="Attach files"/> <!>`, 1);
 var root_76 = $69.from_html(`<button type="button" class="chat-input-send svelte-1tzweuh" data-stop="" aria-label="Stop generating"><!></button>`);
 var root_95 = $69.from_svg(`<svg class="chat-input-spinner svelte-1tzweuh" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true"><circle class="spinner-track svelte-1tzweuh" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="spinner-head svelte-1tzweuh" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>`);
 var root_83 = $69.from_html(`<button type="submit" class="chat-input-send svelte-1tzweuh"><!></button>`);
-var root_119 = $69.from_html(`<p class="chat-input-error svelte-1tzweuh" role="alert"> </p>`);
-var root27 = $69.from_html(`<form><!> <!> <div class="chat-input-editor-container svelte-1tzweuh"><!></div> <div class="chat-input-footer svelte-1tzweuh"><div class="chat-input-footer-left svelte-1tzweuh"><!> <span class="sr-only svelte-1tzweuh">Press Enter to send, Shift+Enter for newline</span> <span class="chat-input-hint svelte-1tzweuh" aria-hidden="true"><kbd class="svelte-1tzweuh">Enter</kbd> to send, <kbd class="svelte-1tzweuh">Shift</kbd>+<kbd class="svelte-1tzweuh">Enter</kbd> for newline</span></div> <div class="chat-input-footer-right svelte-1tzweuh"><!> <!></div></div> <!> <div aria-live="polite" aria-atomic="true" class="sr-only svelte-1tzweuh"> </div></form>`);
+var root_1110 = $69.from_html(`<p class="chat-input-error svelte-1tzweuh" role="alert"> </p>`);
+var root26 = $69.from_html(`<form><!> <!> <div class="chat-input-editor-container svelte-1tzweuh"><!></div> <div class="chat-input-footer svelte-1tzweuh"><div class="chat-input-footer-left svelte-1tzweuh"><!> <span class="sr-only svelte-1tzweuh">Press Enter to send, Shift+Enter for newline</span> <span class="chat-input-hint svelte-1tzweuh" aria-hidden="true"><kbd class="svelte-1tzweuh">Enter</kbd> to send, <kbd class="svelte-1tzweuh">Shift</kbd>+<kbd class="svelte-1tzweuh">Enter</kbd> for newline</span></div> <div class="chat-input-footer-right svelte-1tzweuh"><!> <!></div></div> <!> <div aria-live="polite" aria-atomic="true" class="sr-only svelte-1tzweuh"> </div></form>`);
 function Chat_input($$anchor, $$props) {
   $69.push($$props, true);
   const attachmentIdFactory = createIdFactory("attachment");
@@ -8753,7 +8831,7 @@ function Chat_input($$anchor, $$props) {
     $69.get(attachments).forEach((a) => URL.revokeObjectURL(a.previewUrl));
   });
   var $$exports = { focus, clear, getAttachments, addFiles };
-  var form = root27();
+  var form = root26();
   $69.attribute_effect(form, ($0) => ({
     class: $0,
     method: "POST",
@@ -8775,7 +8853,7 @@ function Chat_input($$anchor, $$props) {
   var node = $69.child(form);
   {
     var consequent = ($$anchor2) => {
-      var input_1 = root_118();
+      var input_1 = root_119();
       $69.remove_input_defaults(input_1);
       $69.template_effect(() => {
         $69.set_attribute(input_1, "name", name());
@@ -8793,7 +8871,7 @@ function Chat_input($$anchor, $$props) {
     var consequent_1 = ($$anchor2) => {
       var div = root_214();
       $69.each(div, 21, () => $69.get(attachments), (attachment) => attachment.id, ($$anchor3, attachment) => {
-        var div_1 = root_39();
+        var div_1 = root_310();
         var node_2 = $69.child(div_1);
         Chat_attachment_preview(node_2, {
           get attachment() {
@@ -8953,7 +9031,7 @@ function Chat_input($$anchor, $$props) {
   var node_12 = $69.sibling(div_3, 2);
   {
     var consequent_6 = ($$anchor2) => {
-      var p = root_119();
+      var p = root_1110();
       var text_1 = $69.child(p, true);
       $69.reset(p);
       $69.template_effect(() => {
@@ -9492,7 +9570,7 @@ function useChatSearch(options) {
 import * as $76 from "svelte/internal/client";
 function useIntersection(onIntersect, options = {}) {
   const {
-    root: root28 = null,
+    root: root27 = null,
     rootMargin = "0px",
     threshold = 0,
     enabled = () => true
@@ -9518,7 +9596,7 @@ function useIntersection(onIntersect, options = {}) {
         for (const entry of entries) {
           onIntersect(entry);
         }
-      }, { root: root28, rootMargin, threshold });
+      }, { root: root27, rootMargin, threshold });
       observer.observe(node);
       return () => {
         disconnectObserver();
@@ -9535,14 +9613,14 @@ import"svelte/internal/disclose-version";
 import * as $77 from "svelte/internal/client";
 var root_215 = $77.from_html(`<span class="chat-jump-badge svelte-1ornxh"> </span>`);
 var root_120 = $77.from_html(`<button type="button" class="chat-jump-button svelte-1ornxh"><!> <!></button>`);
-var root_310 = $77.from_html(`<button type="button" class="chat-new-indicator svelte-1ornxh"><!> <span aria-hidden="true"> </span></button>`);
-var root28 = $77.from_html(`<!> <!>`, 1);
+var root_311 = $77.from_html(`<button type="button" class="chat-new-indicator svelte-1ornxh"><!> <span aria-hidden="true"> </span></button>`);
+var root27 = $77.from_html(`<!> <!>`, 1);
 function Chat_jump_controls($$anchor, $$props) {
   $77.push($$props, true);
   function handleJump() {
     $$props.onjumptolatest?.();
   }
-  var fragment = root28();
+  var fragment = root27();
   var node = $77.first_child(fragment);
   {
     var consequent_1 = ($$anchor2) => {
@@ -9579,7 +9657,7 @@ function Chat_jump_controls($$anchor, $$props) {
   var node_3 = $77.sibling(node, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var button_1 = root_310();
+      var button_1 = root_311();
       var node_4 = $77.child(button_1);
       Chevron_down(node_4, { class: "icon-xs" });
       var span_1 = $77.sibling(node_4, 2);
@@ -9606,9 +9684,9 @@ $77.delegate(["click"]);
 // src/components/chat/container/chat-status-announcer.svelte
 import"svelte/internal/disclose-version";
 import * as $78 from "svelte/internal/client";
-var root29 = $78.from_html(`<div class="sr-only svelte-17c0dx4"> </div> <div class="sr-only svelte-17c0dx4" aria-live="polite" aria-atomic="true"> </div>`, 1);
+var root28 = $78.from_html(`<div class="sr-only svelte-17c0dx4"> </div> <div class="sr-only svelte-17c0dx4" aria-live="polite" aria-atomic="true"> </div>`, 1);
 function Chat_status_announcer($$anchor, $$props) {
-  var fragment = root29();
+  var fragment = root28();
   var div = $78.first_child(fragment);
   var text6 = $78.child(div);
   $78.reset(div);
@@ -9671,8 +9749,8 @@ function Search($$anchor, $$props) {
   }));
 }
 // src/components/chat/container/chat-search-bar.svelte
-var root_125 = $81.from_html(`<span class="chat-search-match-count svelte-13rzt40" aria-live="polite" aria-atomic="true"> </span>`);
-var root30 = $81.from_html(`<div class="chat-search-bar svelte-13rzt40" role="search" aria-label="Search messages"><span class="chat-search-icon svelte-13rzt40" aria-hidden="true"><!></span> <input type="search" class="chat-search-input svelte-13rzt40" placeholder="Search messages…" autocomplete="off" aria-label="Search messages"/> <!> <div class="chat-search-navigation svelte-13rzt40" role="group" aria-label="Navigate search results"><button type="button" class="chat-search-nav-button svelte-13rzt40" aria-label="Previous match" title="Previous match (Shift+Enter)"><!></button> <button type="button" class="chat-search-nav-button svelte-13rzt40" aria-label="Next match" title="Next match (Enter)"><!></button></div> <button type="button" class="chat-search-close svelte-13rzt40" aria-label="Close search" title="Close search (Escape)"><!></button></div>`);
+var root_121 = $81.from_html(`<span class="chat-search-match-count svelte-13rzt40" aria-live="polite" aria-atomic="true"> </span>`);
+var root29 = $81.from_html(`<div class="chat-search-bar svelte-13rzt40" role="search" aria-label="Search messages"><span class="chat-search-icon svelte-13rzt40" aria-hidden="true"><!></span> <input type="search" class="chat-search-input svelte-13rzt40" placeholder="Search messages…" autocomplete="off" aria-label="Search messages"/> <!> <div class="chat-search-navigation svelte-13rzt40" role="group" aria-label="Navigate search results"><button type="button" class="chat-search-nav-button svelte-13rzt40" aria-label="Previous match" title="Previous match (Shift+Enter)"><!></button> <button type="button" class="chat-search-nav-button svelte-13rzt40" aria-label="Next match" title="Next match (Enter)"><!></button></div> <button type="button" class="chat-search-close svelte-13rzt40" aria-label="Close search" title="Close search (Escape)"><!></button></div>`);
 function Chat_search_bar($$anchor, $$props) {
   $81.push($$props, true);
   const searchResultsId = $81.derived(() => `${$$props.instanceId}-search-results`);
@@ -9710,7 +9788,7 @@ function Chat_search_bar($$anchor, $$props) {
     }
   }
   var $$exports = { focusInput };
-  var div = root30();
+  var div = root29();
   var span = $81.child(div);
   var node = $81.child(span);
   Search(node, { class: "icon-sm" });
@@ -9721,7 +9799,7 @@ function Chat_search_bar($$anchor, $$props) {
   var node_1 = $81.sibling(input, 2);
   {
     var consequent = ($$anchor2) => {
-      var span_1 = root_125();
+      var span_1 = root_121();
       var text6 = $81.child(span_1, true);
       $81.reset(span_1);
       $81.template_effect(() => {
@@ -9773,7 +9851,7 @@ function Chat_search_bar($$anchor, $$props) {
 $81.delegate(["input", "keydown", "click"]);
 
 // src/components/chat/container/chat.svelte
-var root_127 = $82.from_html(`<div class="chat-drop-overlay svelte-932akd" aria-hidden="true"><span class="chat-drop-label svelte-932akd">Drop files here</span></div>`);
+var root_125 = $82.from_html(`<div class="chat-drop-overlay svelte-932akd" aria-hidden="true"><span class="chat-drop-label svelte-932akd">Drop files here</span></div>`);
 var root_216 = $82.from_html(`<div class="chat-header svelte-932akd"><!></div>`);
 var root_84 = $82.from_html(`<button type="button" class="chat-empty-prompt svelte-932akd"> </button>`);
 var root_77 = $82.from_html(`<div class="chat-empty-prompts svelte-932akd" role="group" aria-label="Suggested prompts"></div>`);
@@ -9784,7 +9862,7 @@ var root_192 = $82.from_html(`<span class="chat-typing-status svelte-932akd"> </
 var root_20 = $82.from_html(`<span class="chat-typing-dot svelte-932akd" aria-hidden="true"></span> <span class="chat-typing-dot svelte-932akd" aria-hidden="true"></span> <span class="chat-typing-dot svelte-932akd" aria-hidden="true"></span>`, 1);
 var root_182 = $82.from_html(`<div class="chat-typing-indicator svelte-932akd" role="status"><!></div>`);
 var root_96 = $82.from_html(`<!> <!> <div class="chat-bottom-sentinel svelte-932akd" aria-hidden="true"></div>`, 1);
-var root31 = $82.from_html(`<div><!> <!> <!> <div class="chat-timeline svelte-932akd" role="log" aria-label="Messages" aria-live="polite" aria-relevant="additions" tabindex="0"><!></div> <div class="chat-input-wrapper svelte-932akd"><!> <div class="chat-input-area svelte-932akd"><!></div></div> <!></div>`);
+var root30 = $82.from_html(`<div><!> <!> <!> <div class="chat-timeline svelte-932akd" role="log" aria-label="Messages" aria-live="polite" aria-relevant="additions" tabindex="0"><!></div> <div class="chat-input-wrapper svelte-932akd"><!> <div class="chat-input-area svelte-932akd"><!></div></div> <!></div>`);
 function Chat($$anchor, $$props) {
   $82.push($$props, true);
   const noopAttachment = () => {};
@@ -10036,7 +10114,7 @@ function Chat($$anchor, $$props) {
     pushToken,
     endStreaming
   };
-  var div = root31();
+  var div = root30();
   $82.attribute_effect(div, ($0) => ({
     id: $$props.id,
     class: $0,
@@ -10052,7 +10130,7 @@ function Chat($$anchor, $$props) {
   var node = $82.child(div);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root_127();
+      var div_1 = root_125();
       $82.append($$anchor2, div_1);
     };
     $82.if(node, ($$render) => {
@@ -10544,7 +10622,7 @@ var root_128 = $85.from_html(`<span class="copied-label svelte-ob3hx8">Copied!</
 var root_97 = $85.from_html(`<!> <span> </span> <!>`, 1);
 var root_48 = $85.from_html(`<!> <!>`, 1);
 var root_217 = $85.from_html(`<!> <!>`, 1);
-var root32 = $85.from_html(`<div><div class="sr-only" aria-live="polite" aria-atomic="true"><!></div> <!></div>`);
+var root31 = $85.from_html(`<div><div class="sr-only" aria-live="polite" aria-atomic="true"><!></div> <!></div>`);
 function Conversation_export_actions($$anchor, $$props) {
   $85.push($$props, true);
   const copyState = createCopyState();
@@ -10594,7 +10672,7 @@ function Conversation_export_actions($$anchor, $$props) {
     }
   }
   const formatLabels = { markdown: "Markdown", json: "JSON" };
-  var div = root32();
+  var div = root31();
   var div_1 = $85.child(div);
   var node = $85.child(div_1);
   {
@@ -10726,14 +10804,14 @@ function Conversation_export_actions($$anchor, $$props) {
 // src/components/chat/artifact/artifact-panel.svelte
 import"svelte/internal/disclose-version";
 import * as $86 from "svelte/internal/client";
-var root33 = $86.from_html(`<div class="artifact-panel svelte-o3c2et" role="complementary"><div class="artifact-panel-header svelte-o3c2et"><span class="artifact-panel-title svelte-o3c2et"> </span> <button type="button" class="artifact-panel-close svelte-o3c2et" aria-label="Close artifact panel"><!></button></div> <div class="artifact-panel-content svelte-o3c2et"><!></div></div>`);
+var root32 = $86.from_html(`<div class="artifact-panel svelte-o3c2et" role="complementary"><div class="artifact-panel-header svelte-o3c2et"><span class="artifact-panel-title svelte-o3c2et"> </span> <button type="button" class="artifact-panel-close svelte-o3c2et" aria-label="Close artifact panel"><!></button></div> <div class="artifact-panel-content svelte-o3c2et"><!></div></div>`);
 function Artifact_panel($$anchor, $$props) {
   let instanceId = $86.prop($$props, "instanceId", 3, "artifact");
   const titleId = $86.derived(() => `${instanceId()}-panel-title`);
   function focusOnMount(element2) {
     element2.focus();
   }
-  var div = root33();
+  var div = root32();
   var div_1 = $86.child(div);
   var span = $86.child(div_1);
   var text7 = $86.child(span, true);
@@ -10766,9 +10844,9 @@ import * as $87 from "svelte/internal/client";
 function wrapSvgInHtml(svg) {
   return `<!DOCTYPE html><html><body style="margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;">${svg}</body></html>`;
 }
-var root_129 = $87.from_html(`<iframe class="artifact-viewer artifact-viewer-html svelte-c4pced" sandbox=""></iframe>`);
+var root_127 = $87.from_html(`<iframe class="artifact-viewer artifact-viewer-html svelte-c4pced" sandbox=""></iframe>`);
 var root_218 = $87.from_html(`<iframe class="artifact-viewer artifact-viewer-svg svelte-c4pced" sandbox=""></iframe>`);
-var root_311 = $87.from_html(`<div class="artifact-viewer artifact-viewer-code svelte-c4pced"><pre class="artifact-code-block svelte-c4pced"><code class="svelte-c4pced"> </code></pre></div>`);
+var root_312 = $87.from_html(`<div class="artifact-viewer artifact-viewer-code svelte-c4pced"><pre class="artifact-code-block svelte-c4pced"><code class="svelte-c4pced"> </code></pre></div>`);
 var root_49 = $87.from_html(`<div class="artifact-viewer artifact-viewer-mermaid svelte-c4pced"><pre class="artifact-code-block svelte-c4pced" data-language="mermaid"><code class="svelte-c4pced"> </code></pre> <p class="artifact-mermaid-note svelte-c4pced" aria-live="polite">Mermaid diagram source. Install the Mermaid library to render diagrams.</p></div>`);
 function Artifact_viewer($$anchor, $$props) {
   const svgDocument = $87.derived(() => $$props.type === "svg" ? wrapSvgInHtml($$props.content) : "");
@@ -10776,7 +10854,7 @@ function Artifact_viewer($$anchor, $$props) {
   var node = $87.first_child(fragment);
   {
     var consequent = ($$anchor2) => {
-      var iframe = root_129();
+      var iframe = root_127();
       $87.template_effect(() => {
         $87.set_attribute(iframe, "srcdoc", $$props.content);
         $87.set_attribute(iframe, "title", $$props.title ?? "HTML artifact");
@@ -10794,7 +10872,7 @@ function Artifact_viewer($$anchor, $$props) {
       $87.append($$anchor2, iframe_1);
     };
     var consequent_2 = ($$anchor2) => {
-      var div = root_311();
+      var div = root_312();
       var pre = $87.child(div);
       var code = $87.child(pre);
       var text7 = $87.child(code, true);
@@ -10835,11 +10913,11 @@ function Artifact_viewer($$anchor, $$props) {
 // src/components/chat/artifact/chat-artifact-layout.svelte
 import"svelte/internal/disclose-version";
 import * as $88 from "svelte/internal/client";
-var root34 = $88.from_html(`<div><div class="chat-artifact-main svelte-ed4g6"><!></div> <!></div>`);
+var root33 = $88.from_html(`<div><div class="chat-artifact-main svelte-ed4g6"><!></div> <!></div>`);
 function Chat_artifact_layout($$anchor, $$props) {
   $88.push($$props, true);
   let instanceId = $88.prop($$props, "instanceId", 3, "artifact"), open = $88.prop($$props, "open", 3, false);
-  var div = root34();
+  var div = root33();
   var div_1 = $88.child(div);
   var node = $88.child(div_1);
   $88.snippet(node, () => $$props.children);
@@ -10915,4 +10993,4 @@ export {
   Artifact_panel as ArtifactPanel
 };
 
-//# debugId=602C7A171AE6FABC64756E2164756E21
+//# debugId=EAA9D3DA900B991764756E2164756E21

package/dist/components/choice-grid/choice-grid-context.d.ts

@@ -0,0 +1,23 @@
+import type { ChoiceGridContext } from './choice-grid.types.ts';
+export type { ChoiceGridContext };
+/**
+ * Context published by `<ChoiceGrid>` for descendant `<ChoiceGridItem>` children.
+ *
+ * All members are getter properties on the context object so reads stay
+ * reactive — when a consumer reads `context.value` inside a `$derived`,
+ * the read flows through the getter which returns a value recomputed from
+ * ChoiceGrid's `$derived` internals. Destructuring breaks reactivity;
+ * getter reads preserve it.
+ *
+ * The context is *required* — a `<ChoiceGridItem>` outside a `<ChoiceGrid>` is a
+ * programmer error. The `getChoiceGridContext` getter therefore throws
+ * (via Svelte 5's `createContext`) when no provider exists.
+ */
+declare const setChoiceGridContext: (context: ChoiceGridContext) => ChoiceGridContext;
+export { setChoiceGridContext };
+/**
+ * Read the enclosing `<ChoiceGrid>` context. Throws via Svelte 5's
+ * `createContext` when no provider exists — a `<ChoiceGridItem>` rendered
+ * outside a `<ChoiceGrid>` is a programmer error.
+ */
+export declare const getChoiceGridContext: () => ChoiceGridContext;

package/dist/components/choice-grid/choice-grid.css

@@ -0,0 +1,27 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@import '../choice-grid-item/choice-grid-item.css';
+
+@layer cinder.components {
+  /* ========================================
+   * CHOICE GRID — parent container
+   * ======================================== */
+
+  .cinder-choice-grid {
+    /* Default grid layout: responsive auto-fill. Overridden by the
+     * --cinder-choice-grid-columns inline style set from the `columns` prop. */
+    display: grid;
+    grid-template-columns: var(
+      --cinder-choice-grid-columns,
+      repeat(auto-fill, minmax(min(10rem, 100%), 1fr))
+    );
+    gap: var(--cinder-space-3);
+    inline-size: 100%;
+  }
+
+  /* Disabled grid dims every item. Individual item disabled states also apply. */
+  .cinder-choice-grid[data-cinder-disabled] {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}

package/dist/components/choice-grid/choice-grid.schema.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentSchema } from '../../schema-types';
+declare const _default: ComponentSchema;
+export default _default;