@lostgradient/cinder 0.4.0 → 0.4.1

package/dist/components/diff-viewer/index.js

@@ -1445,17 +1445,21 @@ import * as $14 from "svelte/internal/client";
 import { createContext as createContext2 } from "svelte";
 
 // src/utilities/document-order.ts
+var DOCUMENT_POSITION_PRECEDING = 2;
+var DOCUMENT_POSITION_FOLLOWING = 4;
 function inDocumentOrder(items) {
-  return items.toSorted((a, b) => {
+  const sortedItems = [...items];
+  sortedItems.sort((a, b) => {
     if (a.node === b.node)
       return 0;
     const position = a.node.compareDocumentPosition(b.node);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+    if (position & DOCUMENT_POSITION_FOLLOWING)
       return -1;
-    if (position & Node.DOCUMENT_POSITION_PRECEDING)
+    if (position & DOCUMENT_POSITION_PRECEDING)
       return 1;
     return 0;
   });
+  return sortedItems;
 }
 
 // src/utilities/roving-tabindex.ts
@@ -1754,7 +1758,11 @@ function Segment($$anchor, $$props) {
 // src/components/segmented-control/segmented-control.svelte
 import"svelte/internal/disclose-version";
 import * as $16 from "svelte/internal/client";
-var root8 = $16.from_html(`<div class="cinder-segmented-control-container"><span> </span> <div><!></div></div>`);
+import { untrack as untrack3 } from "svelte";
+import { SvelteSet } from "svelte/reactivity";
+var root_25 = $16.from_html(`<input type="hidden"/>`);
+var root_18 = $16.from_html(`<input type="hidden" disabled=""/> <!>`, 1);
+var root8 = $16.from_html(`<div class="cinder-segmented-control-container"><span> </span> <div><!></div> <!></div>`);
 function Segmented_control($$anchor, $$props) {
   $16.push($$props, true);
   let value = $16.prop($$props, "value", 15), hideLabel = $16.prop($$props, "hideLabel", 3, false), disabled = $16.prop($$props, "disabled", 3, false), size = $16.prop($$props, "size", 3, "md"), orientation = $16.prop($$props, "orientation", 3, "horizontal"), detached = $16.prop($$props, "detached", 3, false), fullWidth = $16.prop($$props, "fullWidth", 3, false), variant = $16.prop($$props, "variant", 3, "radiogroup"), selectionMode = $16.prop($$props, "selectionMode", 3, "single"), disallowEmptySelection = $16.prop($$props, "disallowEmptySelection", 3, true), rest = $16.rest_props($$props, [
@@ -1764,6 +1772,7 @@ function Segmented_control($$anchor, $$props) {
     "id",
     "value",
     "label",
+    "name",
     "hideLabel",
     "disabled",
     "size",
@@ -1778,6 +1787,10 @@ function Segmented_control($$anchor, $$props) {
     "onchange",
     "children"
   ]);
+  let resetInputElement = $16.state(null);
+  let resetSyncTimeout;
+  const initialSingleValue = untrack3(() => typeof value() === "string" ? value() : undefined);
+  const initialMultipleValues = untrack3(() => selectionMode() === "multiple" && value() instanceof SvelteSet ? Array.from(value()) : undefined);
   const controller = new SegmentedControlController({
     selectionMode: () => selectionMode(),
     variant: () => variant(),
@@ -1808,6 +1821,35 @@ function Segmented_control($$anchor, $$props) {
   setSegmentedControlContext(contextValue);
   const groupRole = $16.derived(() => selectionMode() === "multiple" ? "group" : variant() === "tablist" ? "tablist" : "radiogroup");
   const effectiveSize = $16.derived(() => $$props.density === "toolbar" ? "sm" : size());
+  const selectedValues = $16.derived(() => selectionMode() === "multiple" ? value() instanceof SvelteSet ? Array.from(value()) : [] : typeof value() === "string" ? [value()] : []);
+  function resetToInitialValue(event) {
+    if (resetSyncTimeout !== undefined)
+      clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if (event.defaultPrevented)
+        return;
+      if (selectionMode() === "multiple") {
+        value(initialMultipleValues === undefined ? undefined : new SvelteSet(initialMultipleValues));
+        return;
+      }
+      value(initialSingleValue);
+    }, 0);
+  }
+  $16.user_effect(() => {
+    const input = $16.get(resetInputElement);
+    if (input === null)
+      return;
+    const form = input.form;
+    form?.addEventListener("reset", resetToInitialValue);
+    return () => {
+      form?.removeEventListener("reset", resetToInitialValue);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
   var div = root8();
   var span = $16.child(div);
   var text6 = $16.child(span, true);
@@ -1834,6 +1876,30 @@ function Segmented_control($$anchor, $$props) {
   var node = $16.child(div_1);
   $16.snippet(node, () => $$props.children);
   $16.reset(div_1);
+  var node_1 = $16.sibling(div_1, 2);
+  {
+    var consequent = ($$anchor2) => {
+      var fragment = root_18();
+      var input_1 = $16.first_child(fragment);
+      $16.bind_this(input_1, ($$value) => $16.set(resetInputElement, $$value), () => $16.get(resetInputElement));
+      var node_2 = $16.sibling(input_1, 2);
+      $16.each(node_2, 16, () => $16.get(selectedValues), (selectedValue) => selectedValue, ($$anchor3, selectedValue) => {
+        var input_2 = root_25();
+        $16.remove_input_defaults(input_2);
+        $16.template_effect(() => {
+          $16.set_attribute(input_2, "name", $$props.name);
+          $16.set_value(input_2, selectedValue);
+          input_2.disabled = disabled();
+        });
+        $16.append($$anchor3, input_2);
+      });
+      $16.append($$anchor2, fragment);
+    };
+    $16.if(node_1, ($$render) => {
+      if ($$props.name)
+        $$render(consequent);
+    });
+  }
   $16.reset(div);
   $16.template_effect(($0) => {
     $16.set_attribute(span, "id", `${$$props.id}-label`);
@@ -1922,7 +1988,7 @@ function Refresh_cw($$anchor, $$props) {
   }));
 }
 // src/components/diff-viewer/diff-toolbar.svelte
-var root_18 = $20.from_html(`<!> <!> <!>`, 1);
+var root_110 = $20.from_html(`<!> <!> <!>`, 1);
 var root_112 = $20.from_html(`<span class="no-changes svelte-1p8ursg">No changes</span>`);
 var root_172 = $20.from_html(`<!> Revert All`, 1);
 var root_192 = $20.from_html(`<!> Compute Diff`, 1);
@@ -1969,7 +2035,7 @@ function Diff_toolbar($$anchor, $$props) {
       viewMode($$value);
     },
     children: ($$anchor2, $$slotProps) => {
-      var fragment = root_18();
+      var fragment = root_110();
       var node_1 = $20.first_child(fragment);
       Segment(node_1, {
         value: "unified",
@@ -2267,7 +2333,7 @@ var root_6 = $21.from_html(`<div class="diff-warning svelte-1fvc2en" role="statu
 var root_113 = $21.from_html(`<!> Revert`, 1);
 var root_103 = $21.from_html(`<div class="hunk-header svelte-1fvc2en"><span class="hunk-range svelte-1fvc2en"> </span> <!></div>`);
 var root_92 = $21.from_html(`<!> <!>`, 1);
-var root_110 = $21.from_html(`<!> <!> <div class="diff-content svelte-1fvc2en"><!> <!></div>`, 1);
+var root_111 = $21.from_html(`<!> <!> <div class="diff-content svelte-1fvc2en"><!> <!></div>`, 1);
 function Diff_viewer($$anchor, $$props) {
   const instanceId = $21.props_id();
   $21.push($$props, true);
@@ -2429,7 +2495,7 @@ ${match[1] ?? ""}
         return $21.get($1);
       },
       children: ($$anchor2, $$slotProps) => {
-        var fragment_1 = root_110();
+        var fragment_1 = root_111();
         var node = $21.first_child(fragment_1);
         {
           var consequent = ($$anchor3) => {
@@ -2632,4 +2698,4 @@ export {
   Diff_viewer as DiffViewer
 };
 
-//# debugId=85EB3E1EB069B7FC64756E2164756E21
+//# debugId=8DE2126F46B7723F64756E2164756E21

package/dist/components/dropdown/index.js

@@ -2152,7 +2152,7 @@ function Dropdown_item($$anchor, $$props) {
   const anchorAttributes = $4.derived(() => rest);
   const buttonAttributes = $4.derived(() => rest);
   const buttonType = $4.derived(() => $$props.type ?? "button");
-  const ariaChecked = $4.derived(() => itemRole() === "menuitemradio" ? checked() : undefined);
+  const ariaChecked = $4.derived(() => itemRole() === "menuitemcheckbox" || itemRole() === "menuitemradio" ? checked() : undefined);
   var fragment = $4.comment();
   var node = $4.first_child(fragment);
   {
@@ -2618,6 +2618,50 @@ function observeTextDirection(element, onChange) {
   return () => observer.disconnect();
 }
 
+// src/utilities/typeahead.ts
+function isTypeaheadKey(event) {
+  return event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey && !event.isComposing;
+}
+function findTypeaheadMatch(candidates, prefix, currentIndex) {
+  if (candidates.length === 0)
+    return;
+  const normalizedPrefix = prefix.toLocaleLowerCase();
+  const startIndex = currentIndex < 0 ? -1 : currentIndex;
+  for (let offset3 = 1;offset3 <= candidates.length; offset3 += 1) {
+    const index = (startIndex + offset3) % candidates.length;
+    const candidate = candidates[index];
+    if (!candidate || candidate.disabled)
+      continue;
+    if (candidate.label.toLocaleLowerCase().startsWith(normalizedPrefix)) {
+      return candidate.value;
+    }
+  }
+  return;
+}
+
+class TypeaheadBuffer {
+  #value = "";
+  #timer = null;
+  push(character) {
+    this.clearTimer();
+    this.#value += character.toLocaleLowerCase();
+    this.#timer = setTimeout(() => {
+      this.reset();
+    }, 500);
+    return this.#value;
+  }
+  reset() {
+    this.clearTimer();
+    this.#value = "";
+  }
+  clearTimer() {
+    if (this.#timer === null)
+      return;
+    clearTimeout(this.#timer);
+    this.#timer = null;
+  }
+}
+
 // src/components/dropdown-menu/dropdown-menu.svelte
 var root_12 = $7.from_html(`<div><!></div>`);
 function Dropdown_menu($$anchor, $$props) {
@@ -2645,6 +2689,7 @@ function Dropdown_menu($$anchor, $$props) {
   const fallbackAnchorElement = $7.derived(() => context.fallbackAnchorElement === undefined ? context.anchorElement : context.fallbackAnchorElement);
   let menuElement = $7.state(null);
   let focusedFallbackOpen = false;
+  const typeaheadBuffer = new TypeaheadBuffer;
   const anchoredFallback = createAnchoredOverlay({
     open: () => context.isOpen && !context.supportsPopover && Boolean($7.get(fallbackAnchorElement)),
     anchor: () => $7.get(fallbackAnchorElement),
@@ -2665,6 +2710,13 @@ function Dropdown_menu($$anchor, $$props) {
     registerMenu($7.get(menuElement));
     return () => registerMenu(null);
   });
+  $7.user_effect(() => {
+    return () => typeaheadBuffer.reset();
+  });
+  $7.user_effect(() => {
+    if (!context.isOpen)
+      typeaheadBuffer.reset();
+  });
   $7.user_effect(() => {
     if ($$props.dir && $$props.dir !== "auto")
       return;
@@ -2687,7 +2739,11 @@ function Dropdown_menu($$anchor, $$props) {
   function getOwnedMenuItems() {
     if (!$7.get(menuElement))
       return [];
-    return Array.from($7.get(menuElement).querySelectorAll('[role="menuitem"]:not([data-disabled]), [role="menuitemradio"]:not([data-disabled])')).filter((item) => item.closest('[role="menu"]') === $7.get(menuElement));
+    return Array.from($7.get(menuElement).querySelectorAll([
+      '[role="menuitem"]:not([data-disabled])',
+      '[role="menuitemcheckbox"]:not([data-disabled])',
+      '[role="menuitemradio"]:not([data-disabled])'
+    ].join(", "))).filter((item) => item.closest('[role="menu"]') === $7.get(menuElement));
   }
   function focusMenuItem(index) {
     const items = getOwnedMenuItems();
@@ -2730,6 +2786,16 @@ function Dropdown_menu($$anchor, $$props) {
       event.preventDefault();
       event.stopPropagation();
       focusMenuItem(itemsArray.length - 1);
+    } else if (isTypeaheadKey(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const match = findTypeaheadMatch(itemsArray.map((item, index) => ({
+        value: index,
+        label: item.textContent?.trim() ?? "",
+        disabled: item.hasAttribute("data-disabled")
+      })), typeaheadBuffer.push(event.key), currentIndex);
+      if (match !== undefined)
+        focusMenuItem(match);
     }
   }
   function handleToggle(event) {
@@ -3299,4 +3365,4 @@ export {
   Dropdown2 as Dropdown
 };
 
-//# debugId=E4656A6CA8AE02EB64756E2164756E21
+//# debugId=DFB3275630BC268364756E2164756E21

package/dist/components/dropdown-item/dropdown-item.schema.js

@@ -31,12 +31,12 @@ var schema = {
       description: "Visual style of the item. Use `danger` to signal a destructive action. Default `default`."
     },
     itemRole: {
-      enum: ["menuitem", "menuitemradio"],
-      description: "ARIA role for the row. Use `menuitemradio` for mutually exclusive menu selections."
+      enum: ["menuitem", "menuitemcheckbox", "menuitemradio"],
+      description: "ARIA role for the row. Use `menuitemcheckbox` or `menuitemradio` for selectable menu items."
     },
     checked: {
       type: "boolean",
-      description: 'Checked state for `itemRole="menuitemradio"`. Omitted for normal menu items.'
+      description: "Checked state for checkbox and radio menu items. Omitted for normal menu items."
     },
     inset: {
       type: "boolean",
@@ -78,4 +78,4 @@ export {
   dropdown_item_schema_default as default
 };
 
-//# debugId=85BA1F701522FDD064756E2164756E21
+//# debugId=DE2F07E8A7AF21EB64756E2164756E21

package/dist/components/dropdown-item/dropdown-item.types.d.ts

@@ -1,13 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 export type DropdownItemVariant = 'default' | 'danger';
-export type DropdownItemRole = 'menuitem' | 'menuitemradio';
+export type DropdownItemRole = 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
 type DropdownItemBase = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
     /** Visual style of the item. Use `danger` to signal a destructive action. Default `default`. */
     variant?: DropdownItemVariant;
-    /** ARIA role for the row. Use `menuitemradio` for mutually exclusive menu selections. */
+    /** ARIA role for the row. Use `menuitemcheckbox` or `menuitemradio` for selectable menu items. */
     itemRole?: DropdownItemRole;
-    /** Checked state for `itemRole="menuitemradio"`. Omitted for normal menu items. */
+    /** Checked state for checkbox and radio menu items. Omitted for normal menu items. */
     checked?: boolean;
     /** When true, adds leading padding to align the item with items that have a leading icon or indicator. Default `false`. */
     inset?: boolean;

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

@@ -97,7 +97,7 @@ function Dropdown_item($$anchor, $$props) {
   const anchorAttributes = $.derived(() => rest);
   const buttonAttributes = $.derived(() => rest);
   const buttonType = $.derived(() => $$props.type ?? "button");
-  const ariaChecked = $.derived(() => itemRole() === "menuitemradio" ? checked() : undefined);
+  const ariaChecked = $.derived(() => itemRole() === "menuitemcheckbox" || itemRole() === "menuitemradio" ? checked() : undefined);
   var fragment = $.comment();
   var node = $.first_child(fragment);
   {
@@ -181,4 +181,4 @@ export {
   Dropdown_item as DropdownItem
 };
 
-//# debugId=063E0BA05B36ED5964756E2164756E21
+//# debugId=F3C1CD3F21E64FA264756E2164756E21

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

@@ -2380,6 +2380,50 @@ function observeTextDirection(element, onChange) {
   return () => observer.disconnect();
 }
 
+// src/utilities/typeahead.ts
+function isTypeaheadKey(event) {
+  return event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey && !event.isComposing;
+}
+function findTypeaheadMatch(candidates, prefix, currentIndex) {
+  if (candidates.length === 0)
+    return;
+  const normalizedPrefix = prefix.toLocaleLowerCase();
+  const startIndex = currentIndex < 0 ? -1 : currentIndex;
+  for (let offset3 = 1;offset3 <= candidates.length; offset3 += 1) {
+    const index = (startIndex + offset3) % candidates.length;
+    const candidate = candidates[index];
+    if (!candidate || candidate.disabled)
+      continue;
+    if (candidate.label.toLocaleLowerCase().startsWith(normalizedPrefix)) {
+      return candidate.value;
+    }
+  }
+  return;
+}
+
+class TypeaheadBuffer {
+  #value = "";
+  #timer = null;
+  push(character) {
+    this.clearTimer();
+    this.#value += character.toLocaleLowerCase();
+    this.#timer = setTimeout(() => {
+      this.reset();
+    }, 500);
+    return this.#value;
+  }
+  reset() {
+    this.clearTimer();
+    this.#value = "";
+  }
+  clearTimer() {
+    if (this.#timer === null)
+      return;
+    clearTimeout(this.#timer);
+    this.#timer = null;
+  }
+}
+
 // src/components/dropdown/dropdown.context.ts
 import { createContext as createContext2 } from "svelte";
 var [getDropdownContextStrict, setDropdownContext] = createContext2();
@@ -2418,6 +2462,7 @@ function Dropdown_menu($$anchor, $$props) {
   const fallbackAnchorElement = $4.derived(() => context.fallbackAnchorElement === undefined ? context.anchorElement : context.fallbackAnchorElement);
   let menuElement = $4.state(null);
   let focusedFallbackOpen = false;
+  const typeaheadBuffer = new TypeaheadBuffer;
   const anchoredFallback = createAnchoredOverlay({
     open: () => context.isOpen && !context.supportsPopover && Boolean($4.get(fallbackAnchorElement)),
     anchor: () => $4.get(fallbackAnchorElement),
@@ -2438,6 +2483,13 @@ function Dropdown_menu($$anchor, $$props) {
     registerMenu($4.get(menuElement));
     return () => registerMenu(null);
   });
+  $4.user_effect(() => {
+    return () => typeaheadBuffer.reset();
+  });
+  $4.user_effect(() => {
+    if (!context.isOpen)
+      typeaheadBuffer.reset();
+  });
   $4.user_effect(() => {
     if ($$props.dir && $$props.dir !== "auto")
       return;
@@ -2460,7 +2512,11 @@ function Dropdown_menu($$anchor, $$props) {
   function getOwnedMenuItems() {
     if (!$4.get(menuElement))
       return [];
-    return Array.from($4.get(menuElement).querySelectorAll('[role="menuitem"]:not([data-disabled]), [role="menuitemradio"]:not([data-disabled])')).filter((item) => item.closest('[role="menu"]') === $4.get(menuElement));
+    return Array.from($4.get(menuElement).querySelectorAll([
+      '[role="menuitem"]:not([data-disabled])',
+      '[role="menuitemcheckbox"]:not([data-disabled])',
+      '[role="menuitemradio"]:not([data-disabled])'
+    ].join(", "))).filter((item) => item.closest('[role="menu"]') === $4.get(menuElement));
   }
   function focusMenuItem(index) {
     const items = getOwnedMenuItems();
@@ -2503,6 +2559,16 @@ function Dropdown_menu($$anchor, $$props) {
       event.preventDefault();
       event.stopPropagation();
       focusMenuItem(itemsArray.length - 1);
+    } else if (isTypeaheadKey(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const match = findTypeaheadMatch(itemsArray.map((item, index) => ({
+        value: index,
+        label: item.textContent?.trim() ?? "",
+        disabled: item.hasAttribute("data-disabled")
+      })), typeaheadBuffer.push(event.key), currentIndex);
+      if (match !== undefined)
+        focusMenuItem(match);
     }
   }
   function handleToggle(event) {
@@ -2571,4 +2637,4 @@ export {
   Dropdown_menu as DropdownMenu
 };
 
-//# debugId=8C171C0DDAD76F3C64756E2164756E21
+//# debugId=D7E4ED91BC33EED464756E2164756E21

package/dist/components/experimental/json-viewer/index.d.ts

@@ -1,2 +1,4 @@
-export { default, JsonViewer } from '../../json-viewer/index.ts';
+import JsonViewer from '../../json-viewer/index.ts';
+export default JsonViewer;
 export type { JsonViewerProps } from '../../json-viewer/index.ts';
+export { JsonViewer };