@lostgradient/cinder 0.8.0 → 0.9.0

package/dist/components/code-block/code-block.schema.js

@@ -72,6 +72,10 @@ var schema = {
       type: "boolean",
       description: "When true, render a copy button in the header."
     },
+    showLanguageLabel: {
+      type: "boolean",
+      description: "Whether to render the language label in the header. Default `true`.\nPass `false` to keep `language`-driven highlighting without the visible\nheader chip; with `copyable` also unset, no header renders at all."
+    },
     class: {
       type: "string",
       description: "Additional class names merged with `.cinder-code-block`."
@@ -94,4 +98,4 @@ export {
   code_block_schema_default as default
 };
 
-//# debugId=99D7DA0AA5EB435F64756E2164756E21
+//# debugId=40E5318FEC4A70D364756E2164756E21

package/dist/components/code-block/code-block.types.d.ts

@@ -48,6 +48,12 @@ export type CodeBlockProps = {
     highlighter?: Highlighter;
     /** When true, render a copy button in the header. */
     copyable?: boolean;
+    /**
+     * Whether to render the language label in the header. Default `true`.
+     * Pass `false` to keep `language`-driven highlighting without the visible
+     * header chip; with `copyable` also unset, no header renders at all.
+     */
+    showLanguageLabel?: boolean;
     /** Additional class names merged with `.cinder-code-block`. */
     class?: string;
 };

package/dist/components/code-block/index.js

@@ -516,7 +516,7 @@ var root_3 = $6.from_html(`<div class="cinder-code-block__highlighted"></div>`);
 var root_4 = $6.from_html(`<div><!> <div class="cinder-code-block__viewport" tabindex="0"><!></div></div>`);
 function Code_block($$anchor, $$props) {
   $6.push($$props, true);
-  let copyable = $6.prop($$props, "copyable", 3, false);
+  let copyable = $6.prop($$props, "copyable", 3, false), showLanguageLabel = $6.prop($$props, "showLanguageLabel", 3, true);
   let highlighted = $6.state(null);
   $6.user_effect(() => {
     if ($$props.highlight === false || !$$props.language) {
@@ -562,7 +562,7 @@ function Code_block($$anchor, $$props) {
           $6.append($$anchor3, span);
         };
         $6.if(node_1, ($$render) => {
-          if ($$props.language)
+          if ($$props.language && showLanguageLabel())
             $$render(consequent);
         });
       }
@@ -588,7 +588,7 @@ function Code_block($$anchor, $$props) {
       $6.append($$anchor2, header);
     };
     $6.if(node, ($$render) => {
-      if ($$props.language || copyable())
+      if ($$props.language && showLanguageLabel() || copyable())
         $$render(consequent_2);
     });
   }
@@ -647,4 +647,4 @@ export {
   Code_block as CodeBlock
 };
 
-//# debugId=19A9E27608520E6264756E2164756E21
+//# debugId=DFB6B54AA309E18164756E2164756E21

package/dist/components/command-item/index.js

@@ -95,18 +95,19 @@ function Command_item($$anchor, $$props) {
   let onselect = $.prop($$props, "onselect", 3, () => {}), selectionMode = $.prop($$props, "selectionMode", 3, "item"), disabled = $.prop($$props, "disabled", 3, false);
   const commandList = getCommandListContext();
   untrack(() => selectionMode());
-  let itemId = $.state(null);
+  let registrationHandle = $.state(null);
+  const itemId = $.derived(() => $.get(registrationHandle)?.id ?? null);
   const registerWithPalette = (node) => {
     return untrack(() => {
-      const { id, unregister } = commandList.register({
+      const registeredItem = commandList.register({
         getValue: () => $$props.value,
         getOnselect: () => onselect(),
         getDisabled: () => disabled()
       }, node);
-      $.set(itemId, id, true);
+      $.set(registrationHandle, registeredItem, true);
       return () => {
-        unregister();
-        $.set(itemId, null);
+        registeredItem.unregister();
+        $.set(registrationHandle, null);
       };
     });
   };
@@ -208,4 +209,4 @@ export {
   Command_item as CommandItem
 };
 
-//# debugId=CCF7E53F1B398B3764756E2164756E21
+//# debugId=FEE2EDDE39E8401564756E2164756E21

package/dist/components/command-menu/command-menu.schema.js

@@ -56,6 +56,10 @@ var schema = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   type: "object",
   properties: {
+    listboxId: {
+      type: "string",
+      description: "Stable listbox id. Defaults to a generated component id."
+    },
     open: {
       type: "boolean",
       description: "Open state. Bindable. Default `false`."
@@ -138,4 +142,4 @@ export {
   command_menu_schema_default as default
 };
 
-//# debugId=03C609F12C9C699564756E2164756E21
+//# debugId=C36E080217C53B5964756E2164756E21

package/dist/components/command-menu/command-menu.types.d.ts

@@ -15,6 +15,8 @@ export type CommandMenuState = {
     activeItemId: string | null;
 };
 export type CommandMenuProps = {
+    /** Stable listbox id. Defaults to a generated component id. */
+    listboxId?: string;
     /** Open state. Bindable. Default `false`. */
     open?: boolean;
     /** Text field used as the caret-position anchor. */

package/dist/components/command-menu/index.js

@@ -2420,7 +2420,8 @@ function inDocumentOrder(items) {
 
 // src/components/_internal/create-command-list-state.svelte.ts
 class CommandListState {
-  listboxId;
+  #getListboxId;
+  #registeredListboxId = $5.state("");
   #registrations = $5.state($5.proxy([]));
   get registrations() {
     return $5.get(this.#registrations);
@@ -2455,7 +2456,24 @@ class CommandListState {
     $5.set(this.#activeItemId, value);
   }
   constructor(listboxId) {
-    this.listboxId = listboxId;
+    this.#getListboxId = typeof listboxId === "function" ? listboxId : () => listboxId;
+    $5.set(this.#registeredListboxId, this.#getListboxId(), true);
+  }
+  get listboxId() {
+    return $5.get(this.#registeredListboxId);
+  }
+  syncListboxId(nextListboxId = this.#getListboxId()) {
+    const listboxId = nextListboxId;
+    if ($5.get(this.#registeredListboxId) === listboxId)
+      return;
+    $5.set(this.#registeredListboxId, listboxId, true);
+    $5.set(this.#intendedActiveId, null);
+    this.registrations = this.registrations.map((registration, index) => ({
+      ...registration,
+      id: updateRegistrationHandleId(registration, `${listboxId}-item-${index + 1}`)
+    }));
+    this.#itemCounter = this.registrations.length;
+    this.refreshRegistrationsReady();
   }
   resetActiveItem() {
     $5.set(this.#intendedActiveId, null);
@@ -2478,22 +2496,26 @@ class CommandListState {
     $5.set(this.#intendedActiveId, id, true);
   }
   register(input, node) {
+    this.syncListboxId();
     const id = `${this.listboxId}-item-${++this.#itemCounter}`;
-    this.registrations.push({
-      id,
-      node,
-      getValue: input.getValue,
-      getOnselect: input.getOnselect,
-      getDisabled: input.getDisabled
-    });
-    return {
+    const handle = $5.proxy({
       id,
       unregister: () => {
-        const index = this.registrations.findIndex((registration) => registration.id === id);
+        const index = this.registrations.findIndex((registeredItem) => registeredItem.node === node);
         if (index !== -1)
           this.registrations.splice(index, 1);
       }
+    });
+    const registration = {
+      id,
+      node,
+      handle,
+      getValue: input.getValue,
+      getOnselect: input.getOnselect,
+      getDisabled: input.getDisabled
     };
+    this.registrations.push(registration);
+    return handle;
   }
   activateItemById(id) {
     const record = this.registrations.find((registration) => registration.id === id);
@@ -2568,13 +2590,13 @@ class CommandListState {
     return false;
   }
   createContext(activateItemById = (id) => void this.activateItemById(id)) {
-    const listboxId = this.listboxId;
+    const getListboxId = () => this.listboxId;
     const getActiveItemId = () => this.activeItemId;
     const register = (input, node) => this.register(input, node);
     const setActiveById = (id) => this.setActiveById(id);
     return {
       get listboxId() {
-        return listboxId;
+        return getListboxId();
       },
       get activeItemId() {
         return getActiveItemId();
@@ -2588,6 +2610,10 @@ class CommandListState {
 function createCommandListState(listboxId) {
   return new CommandListState(listboxId);
 }
+function updateRegistrationHandleId(registration, id) {
+  registration.handle.id = id;
+  return id;
+}
 
 // src/components/command-menu/command-menu-trigger.ts
 function isSingleNonWhitespaceCodePoint(value) {
@@ -2627,9 +2653,9 @@ function detectTrigger({
 var root2 = $6.from_html(`<div class="cinder-command-menu__empty" role="status"><!></div>`);
 var root_1 = $6.from_html(`<div><ul role="listbox" class="cinder-command-menu__listbox"><!></ul> <!></div>`);
 function Command_menu($$anchor, $$props) {
-  const listboxId = $6.props_id();
+  const fallbackListboxId = $6.props_id();
   $6.push($$props, true);
-  let open = $6.prop($$props, "open", 15, false), query = $6.prop($$props, "query", 11, ""), placement = $6.prop($$props, "placement", 3, "bottom-start"), offset3 = $6.prop($$props, "offset", 3, 6), label = $6.prop($$props, "label", 3, "Commands");
+  let listboxId = $6.prop($$props, "listboxId", 3, fallbackListboxId), open = $6.prop($$props, "open", 15, false), query = $6.prop($$props, "query", 11, ""), placement = $6.prop($$props, "placement", 3, "bottom-start"), offset3 = $6.prop($$props, "offset", 3, 6), label = $6.prop($$props, "label", 3, "Commands");
   const portalAttachment = createPortalAttachment({
     target: () => document.body,
     inheritAttributes: true,
@@ -2637,7 +2663,7 @@ function Command_menu($$anchor, $$props) {
   });
   let mounted = $6.state(false);
   let listElement = $6.state(undefined);
-  const commandList = createCommandListState(listboxId);
+  const commandList = createCommandListState(() => listboxId());
   const showEmpty = $6.derived(() => $6.get(mounted) && open() && commandList.registrationsReady && commandList.registrations.length === 0);
   const caretAnchor = $6.derived(() => {
     const anchorElement = $$props.anchor;
@@ -2661,6 +2687,9 @@ function Command_menu($$anchor, $$props) {
   $6.user_effect(() => {
     $6.set(mounted, true);
   });
+  $6.user_effect(() => {
+    commandList.syncListboxId(listboxId());
+  });
   $6.user_effect(() => {
     if (!open()) {
       commandList.resetActiveItem();
@@ -2673,7 +2702,7 @@ function Command_menu($$anchor, $$props) {
   });
   $6.user_effect(() => {
     $$props.onstatechange?.({
-      listboxId,
+      listboxId: commandList.listboxId,
       activeItemId: open() ? commandList.activeItemId : null
     });
   });
@@ -2754,7 +2783,7 @@ function Command_menu($$anchor, $$props) {
         $6.set_class(div, 1, $0);
         $6.set_attribute(div, "data-cinder-position-ready", anchoredOverlay.positionReady);
         $6.set_style(div, anchoredOverlay.positionStyle);
-        $6.set_attribute(ul, "id", listboxId);
+        $6.set_attribute(ul, "id", commandList.listboxId);
         $6.set_attribute(ul, "aria-label", label());
       }, [
         () => $6.clsx(classNames("cinder-_floating-surface", "cinder-command-menu", $$props.class))
@@ -2778,4 +2807,4 @@ export {
   Command_menu as CommandMenu
 };
 
-//# debugId=24A463365305974A64756E2164756E21
+//# debugId=B1D4E7A8E577F02F64756E2164756E21

package/dist/components/command-palette/index.js

@@ -183,7 +183,8 @@ function inDocumentOrder(items) {
 
 // src/components/_internal/create-command-list-state.svelte.ts
 class CommandListState {
-  listboxId;
+  #getListboxId;
+  #registeredListboxId = $.state("");
   #registrations = $.state($.proxy([]));
   get registrations() {
     return $.get(this.#registrations);
@@ -218,7 +219,24 @@ class CommandListState {
     $.set(this.#activeItemId, value);
   }
   constructor(listboxId) {
-    this.listboxId = listboxId;
+    this.#getListboxId = typeof listboxId === "function" ? listboxId : () => listboxId;
+    $.set(this.#registeredListboxId, this.#getListboxId(), true);
+  }
+  get listboxId() {
+    return $.get(this.#registeredListboxId);
+  }
+  syncListboxId(nextListboxId = this.#getListboxId()) {
+    const listboxId = nextListboxId;
+    if ($.get(this.#registeredListboxId) === listboxId)
+      return;
+    $.set(this.#registeredListboxId, listboxId, true);
+    $.set(this.#intendedActiveId, null);
+    this.registrations = this.registrations.map((registration, index) => ({
+      ...registration,
+      id: updateRegistrationHandleId(registration, `${listboxId}-item-${index + 1}`)
+    }));
+    this.#itemCounter = this.registrations.length;
+    this.refreshRegistrationsReady();
   }
   resetActiveItem() {
     $.set(this.#intendedActiveId, null);
@@ -241,22 +259,26 @@ class CommandListState {
     $.set(this.#intendedActiveId, id, true);
   }
   register(input, node) {
+    this.syncListboxId();
     const id = `${this.listboxId}-item-${++this.#itemCounter}`;
-    this.registrations.push({
-      id,
-      node,
-      getValue: input.getValue,
-      getOnselect: input.getOnselect,
-      getDisabled: input.getDisabled
-    });
-    return {
+    const handle = $.proxy({
       id,
       unregister: () => {
-        const index = this.registrations.findIndex((registration) => registration.id === id);
+        const index = this.registrations.findIndex((registeredItem) => registeredItem.node === node);
         if (index !== -1)
           this.registrations.splice(index, 1);
       }
+    });
+    const registration = {
+      id,
+      node,
+      handle,
+      getValue: input.getValue,
+      getOnselect: input.getOnselect,
+      getDisabled: input.getDisabled
     };
+    this.registrations.push(registration);
+    return handle;
   }
   activateItemById(id) {
     const record = this.registrations.find((registration) => registration.id === id);
@@ -331,13 +353,13 @@ class CommandListState {
     return false;
   }
   createContext(activateItemById = (id) => void this.activateItemById(id)) {
-    const listboxId = this.listboxId;
+    const getListboxId = () => this.listboxId;
     const getActiveItemId = () => this.activeItemId;
     const register = (input, node) => this.register(input, node);
     const setActiveById = (id) => this.setActiveById(id);
     return {
       get listboxId() {
-        return listboxId;
+        return getListboxId();
       },
       get activeItemId() {
         return getActiveItemId();
@@ -351,6 +373,10 @@ class CommandListState {
 function createCommandListState(listboxId) {
   return new CommandListState(listboxId);
 }
+function updateRegistrationHandleId(registration, id) {
+  registration.handle.id = id;
+  return id;
+}
 
 // src/components/command-palette/command-palette.svelte
 var root = $2.from_html(`<div class="cinder-command-palette__empty" role="status"><!></div>`);
@@ -542,4 +568,4 @@ export {
   Command_palette as CommandPalette
 };
 
-//# debugId=4904936021E903D864756E2164756E21
+//# debugId=132CB9AD97181AEA64756E2164756E21

package/dist/components/event-stream-viewer/index.js

@@ -399,7 +399,7 @@ var root_1 = $6.from_html(`<span class="cinder-json-viewer__key"> </span>`);
 var root_2 = $6.from_html(`<span class="cinder-json-viewer__summary"> </span> <span class="cinder-json-viewer__brace"> </span>`, 1);
 var root_3 = $6.from_html(`<li role="none"><!></li>`);
 var root_4 = $6.from_html(`<ul class="cinder-json-viewer__children" role="group"></ul> <span class="cinder-json-viewer__brace"> </span>`, 1);
-var root_5 = $6.from_html(`<span role="treeitem"><button type="button" class="cinder-json-viewer__toggle" tabindex="-1"><!> <span class="cinder-json-viewer__caret"></span> <span class="cinder-json-viewer__brace"> </span> <!></button> <!></span>`);
+var root_5 = $6.from_html(`<span role="treeitem"><button type="button" class="cinder-json-viewer__toggle" tabindex="-1"><!> <svg class="cinder-json-viewer__caret" 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"> </span> <!></button> <!></span>`);
 var root_6 = $6.from_html(`<span class="cinder-json-viewer__node" role="treeitem"><!> <span class="cinder-json-viewer__too-deep">…</span></span>`);
 var root_7 = $6.from_html(`<span class="cinder-json-viewer__node" role="treeitem"><!> <span class="cinder-json-viewer__value"><!></span></span>`);
 function _json_viewer_node($$anchor, $$props) {
@@ -451,20 +451,20 @@ function _json_viewer_node($$anchor, $$props) {
             $$render(consequent);
         });
       }
-      var span_2 = $6.sibling(node_1, 2);
-      var span_3 = $6.sibling(span_2, 2);
-      var text_1 = $6.child(span_3, true);
-      $6.reset(span_3);
-      var node_2 = $6.sibling(span_3, 2);
+      var svg = $6.sibling(node_1, 2);
+      var span_2 = $6.sibling(svg, 2);
+      var text_1 = $6.child(span_2, true);
+      $6.reset(span_2);
+      var node_2 = $6.sibling(span_2, 2);
       {
         var consequent_1 = ($$anchor3) => {
           var fragment_1 = root_2();
-          var span_4 = $6.first_child(fragment_1);
-          var text_2 = $6.child(span_4);
+          var span_3 = $6.first_child(fragment_1);
+          var text_2 = $6.child(span_3);
+          $6.reset(span_3);
+          var span_4 = $6.sibling(span_3, 2);
+          var text_3 = $6.child(span_4, true);
           $6.reset(span_4);
-          var span_5 = $6.sibling(span_4, 2);
-          var text_3 = $6.child(span_5, true);
-          $6.reset(span_5);
           $6.template_effect(() => {
             $6.set_text(text_2, `${$6.get(itemCount) ?? ""} ${$6.get(itemCount) === 1 ? "item" : "items"}`);
             $6.set_text(text_3, $6.get(isArray) ? "]" : "}");
@@ -519,9 +519,9 @@ function _json_viewer_node($$anchor, $$props) {
             $6.append($$anchor4, li);
           });
           $6.reset(ul);
-          var span_6 = $6.sibling(ul, 2);
-          var text_4 = $6.child(span_6, true);
-          $6.reset(span_6);
+          var span_5 = $6.sibling(ul, 2);
+          var text_4 = $6.child(span_5, true);
+          $6.reset(span_5);
           $6.template_effect(() => $6.set_text(text_4, $6.get(isArray) ? "]" : "}"));
           $6.append($$anchor3, fragment_2);
         };
@@ -540,22 +540,22 @@ function _json_viewer_node($$anchor, $$props) {
         $6.set_attribute(span, "aria-setsize", $$props.setSize);
         $6.set_attribute(span, "tabindex", root4() ? 0 : -1);
         $6.set_attribute(button, "aria-label", $6.get(toggleLabel));
-        $6.set_attribute(span_2, "data-cinder-collapsed", $6.get(collapsed) || undefined);
+        $6.set_attribute(svg, "data-cinder-collapsed", $6.get(collapsed) || undefined);
         $6.set_text(text_1, $6.get(isArray) ? "[" : "{");
       }, [() => $6.clsx(classNames("cinder-json-viewer__node"))]);
       $6.delegated("click", button, () => $6.set(collapsed, !$6.get(collapsed)));
       $6.append($$anchor2, span);
     };
     var consequent_5 = ($$anchor2) => {
-      var span_7 = root_6();
-      var node_5 = $6.child(span_7);
+      var span_6 = root_6();
+      var node_5 = $6.child(span_6);
       {
         var consequent_4 = ($$anchor3) => {
-          var span_8 = root_1();
-          var text_5 = $6.child(span_8);
-          $6.reset(span_8);
+          var span_7 = root_1();
+          var text_5 = $6.child(span_7);
+          $6.reset(span_7);
           $6.template_effect(() => $6.set_text(text_5, `${$$props.keyName ?? ""}:`));
-          $6.append($$anchor3, span_8);
+          $6.append($$anchor3, span_7);
         };
         $6.if(node_5, ($$render) => {
           if ($$props.keyName !== undefined)
@@ -563,33 +563,33 @@ function _json_viewer_node($$anchor, $$props) {
         });
       }
       $6.next(2);
-      $6.reset(span_7);
+      $6.reset(span_6);
       $6.template_effect(() => {
-        $6.set_attribute(span_7, "tabindex", root4() ? 0 : -1);
-        $6.set_attribute(span_7, "aria-level", $$props.depth + 1);
-        $6.set_attribute(span_7, "aria-posinset", $$props.position);
-        $6.set_attribute(span_7, "aria-setsize", $$props.setSize);
+        $6.set_attribute(span_6, "tabindex", root4() ? 0 : -1);
+        $6.set_attribute(span_6, "aria-level", $$props.depth + 1);
+        $6.set_attribute(span_6, "aria-posinset", $$props.position);
+        $6.set_attribute(span_6, "aria-setsize", $$props.setSize);
       });
-      $6.append($$anchor2, span_7);
+      $6.append($$anchor2, span_6);
     };
     var alternate_1 = ($$anchor2) => {
-      var span_9 = root_7();
-      var node_6 = $6.child(span_9);
+      var span_8 = root_7();
+      var node_6 = $6.child(span_8);
       {
         var consequent_6 = ($$anchor3) => {
-          var span_10 = root_1();
-          var text_6 = $6.child(span_10);
-          $6.reset(span_10);
+          var span_9 = root_1();
+          var text_6 = $6.child(span_9);
+          $6.reset(span_9);
           $6.template_effect(() => $6.set_text(text_6, `${$$props.keyName ?? ""}:`));
-          $6.append($$anchor3, span_10);
+          $6.append($$anchor3, span_9);
         };
         $6.if(node_6, ($$render) => {
           if ($$props.keyName !== undefined)
             $$render(consequent_6);
         });
       }
-      var span_11 = $6.sibling(node_6, 2);
-      var node_7 = $6.child(span_11);
+      var span_10 = $6.sibling(node_6, 2);
+      var node_7 = $6.child(span_10);
       {
         var consequent_7 = ($$anchor3) => {
           var text_7 = $6.text();
@@ -608,16 +608,16 @@ function _json_viewer_node($$anchor, $$props) {
             $$render(alternate, -1);
         });
       }
-      $6.reset(span_11);
-      $6.reset(span_9);
+      $6.reset(span_10);
+      $6.reset(span_8);
       $6.template_effect(($0) => {
-        $6.set_attribute(span_9, "tabindex", root4() ? 0 : -1);
-        $6.set_attribute(span_9, "aria-level", $$props.depth + 1);
-        $6.set_attribute(span_9, "aria-posinset", $$props.position);
-        $6.set_attribute(span_9, "aria-setsize", $$props.setSize);
-        $6.set_attribute(span_11, "data-cinder-type", $0);
+        $6.set_attribute(span_8, "tabindex", root4() ? 0 : -1);
+        $6.set_attribute(span_8, "aria-level", $$props.depth + 1);
+        $6.set_attribute(span_8, "aria-posinset", $$props.position);
+        $6.set_attribute(span_8, "aria-setsize", $$props.setSize);
+        $6.set_attribute(span_10, "data-cinder-type", $0);
       }, [() => valueClass($$props.value)]);
-      $6.append($$anchor2, span_9);
+      $6.append($$anchor2, span_8);
     };
     $6.if(node, ($$render) => {
       if ($6.get(isObject) && !$6.get(tooDeep))
@@ -1419,4 +1419,4 @@ export {
   Event_stream_viewer as EventStreamViewer
 };
 
-//# debugId=37CB422D9CEF197864756E2164756E21
+//# debugId=0D414EEECEEE39D864756E2164756E21