@lostgradient/cinder 0.3.0 → 0.4.0

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

@@ -1902,7 +1902,8 @@ function copyInheritedPortalAttributes(element, source, inheritAttributes, fallb
   dir: element.getAttribute("dir"),
   theme: element.getAttribute("data-cinder-theme")
 }) {
-  const inheritedDir = inheritAttributes && source ? source.closest("[dir]")?.getAttribute("dir") : null;
+  const preservesExplicitDirection = element.dataset["cinderExplicitDirection"] === "true";
+  const inheritedDir = inheritAttributes && source && !preservesExplicitDirection ? source.closest("[dir]")?.getAttribute("dir") : null;
   const nextDir = inheritedDir ?? fallbackAttributes.dir;
   if (nextDir) {
     element.setAttribute("dir", nextDir);
@@ -2022,7 +2023,7 @@ import"@lostgradient/cinder/command-menu/styles";
 
 // src/components/command-menu/command-menu.svelte
 import"svelte/internal/disclose-version";
-import * as $5 from "svelte/internal/client";
+import * as $6 from "svelte/internal/client";
 
 // src/components/command-menu/caret-rect.svelte.ts
 import * as $3 from "svelte/internal/client";
@@ -2273,20 +2274,6 @@ function createAnchoredOverlay(options) {
   };
 }
 
-// src/utilities/document-order.ts
-function inDocumentOrder(items) {
-  return items.toSorted((a, b) => {
-    if (a.node === b.node)
-      return 0;
-    const position = a.node.compareDocumentPosition(b.node);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
-      return -1;
-    if (position & Node.DOCUMENT_POSITION_PRECEDING)
-      return 1;
-    return 0;
-  });
-}
-
 // src/components/_internal/command-list-context.ts
 import { createContext } from "svelte";
 var [getCommandListContextStrict, setCommandListContextRaw] = createContext();
@@ -2305,6 +2292,194 @@ function hasCommandListContext() {
   }
 }
 
+// src/components/_internal/create-command-list-state.svelte.ts
+import * as $5 from "svelte/internal/client";
+
+// src/utilities/document-order.ts
+function inDocumentOrder(items) {
+  return items.toSorted((a, b) => {
+    if (a.node === b.node)
+      return 0;
+    const position = a.node.compareDocumentPosition(b.node);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+      return -1;
+    if (position & Node.DOCUMENT_POSITION_PRECEDING)
+      return 1;
+    return 0;
+  });
+}
+
+// src/components/_internal/create-command-list-state.svelte.ts
+class CommandListState {
+  listboxId;
+  #registrations = $5.state($5.proxy([]));
+  get registrations() {
+    return $5.get(this.#registrations);
+  }
+  set registrations(value) {
+    $5.set(this.#registrations, value, true);
+  }
+  #registrationsReady = $5.state(false);
+  get registrationsReady() {
+    return $5.get(this.#registrationsReady);
+  }
+  set registrationsReady(value) {
+    $5.set(this.#registrationsReady, value, true);
+  }
+  #itemCounter = 0;
+  #readyCycle = 0;
+  #intendedActiveId = $5.state(null);
+  #enabledIds = $5.derived(() => {
+    return inDocumentOrder(this.registrations).filter((registration) => !registration.getDisabled()).map((registration) => registration.id);
+  });
+  get enabledIds() {
+    return $5.get(this.#enabledIds);
+  }
+  set enabledIds(value) {
+    $5.set(this.#enabledIds, value);
+  }
+  #activeItemId = $5.derived(() => $5.get(this.#intendedActiveId) !== null && this.enabledIds.includes($5.get(this.#intendedActiveId)) ? $5.get(this.#intendedActiveId) : this.enabledIds[0] ?? null);
+  get activeItemId() {
+    return $5.get(this.#activeItemId);
+  }
+  set activeItemId(value) {
+    $5.set(this.#activeItemId, value);
+  }
+  constructor(listboxId) {
+    this.listboxId = listboxId;
+  }
+  resetActiveItem() {
+    $5.set(this.#intendedActiveId, null);
+  }
+  refreshRegistrationsReady() {
+    this.registrationsReady = false;
+    const cycle = ++this.#readyCycle;
+    queueMicrotask(() => {
+      if (cycle === this.#readyCycle)
+        this.registrationsReady = true;
+    });
+  }
+  scrollActiveItemIntoView() {
+    if (this.activeItemId === null)
+      return;
+    const record = this.registrations.find((registration) => registration.id === this.activeItemId);
+    record?.node.scrollIntoView({ block: "nearest" });
+  }
+  setActiveById(id) {
+    $5.set(this.#intendedActiveId, id, true);
+  }
+  register(input, node) {
+    const id = `${this.listboxId}-item-${++this.#itemCounter}`;
+    this.registrations.push({
+      id,
+      node,
+      getValue: input.getValue,
+      getOnselect: input.getOnselect,
+      getDisabled: input.getDisabled
+    });
+    return {
+      id,
+      unregister: () => {
+        const index = this.registrations.findIndex((registration) => registration.id === id);
+        if (index !== -1)
+          this.registrations.splice(index, 1);
+      }
+    };
+  }
+  activateItemById(id) {
+    const record = this.registrations.find((registration) => registration.id === id);
+    if (!record || record.getDisabled())
+      return null;
+    record.getOnselect()();
+    return record;
+  }
+  handleKeydown({
+    event,
+    onEnter,
+    onEscape,
+    ignoreModifiedNavigation = false,
+    preventDefaultOnEmptyEnter = false
+  }) {
+    if (event.isComposing || event.keyCode === 229)
+      return false;
+    const isModified = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+    const ids = this.enabledIds;
+    if (event.key === "ArrowDown") {
+      if (ignoreModifiedNavigation && isModified)
+        return false;
+      event.preventDefault();
+      if (ids.length === 0)
+        return true;
+      const index = this.activeItemId === null ? -1 : ids.indexOf(this.activeItemId);
+      $5.set(this.#intendedActiveId, ids[(index + 1) % ids.length] ?? null, true);
+      return true;
+    }
+    if (event.key === "ArrowUp") {
+      if (ignoreModifiedNavigation && isModified)
+        return false;
+      event.preventDefault();
+      if (ids.length === 0)
+        return true;
+      const index = this.activeItemId === null ? 0 : ids.indexOf(this.activeItemId);
+      $5.set(this.#intendedActiveId, ids[index <= 0 ? ids.length - 1 : index - 1] ?? null, true);
+      return true;
+    }
+    if (event.key === "Home") {
+      if (ignoreModifiedNavigation && isModified)
+        return false;
+      event.preventDefault();
+      $5.set(this.#intendedActiveId, ids[0] ?? null, true);
+      return true;
+    }
+    if (event.key === "End") {
+      if (ignoreModifiedNavigation && isModified)
+        return false;
+      event.preventDefault();
+      $5.set(this.#intendedActiveId, ids[ids.length - 1] ?? null, true);
+      return true;
+    }
+    if (event.key === "Enter") {
+      if (!onEnter)
+        return false;
+      if (this.activeItemId === null && !preventDefaultOnEmptyEnter)
+        return false;
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.activeItemId === null)
+        return true;
+      onEnter?.(this.activeItemId);
+      return true;
+    }
+    if (event.key === "Escape" && onEscape) {
+      event.preventDefault();
+      event.stopPropagation();
+      onEscape();
+      return true;
+    }
+    return false;
+  }
+  createContext(activateItemById = (id) => void this.activateItemById(id)) {
+    const listboxId = 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;
+      },
+      get activeItemId() {
+        return getActiveItemId();
+      },
+      register,
+      setActiveById,
+      activateItemById
+    };
+  }
+}
+function createCommandListState(listboxId) {
+  return new CommandListState(listboxId);
+}
+
 // src/components/command-menu/command-menu-trigger.ts
 function isSingleNonWhitespaceCodePoint(value) {
   return Array.from(value).length === 1 && !/\s/u.test(value);
@@ -2340,29 +2515,22 @@ function detectTrigger({
 }
 
 // src/components/command-menu/command-menu.svelte
-var root_2 = $5.from_html(`<div class="cinder-command-menu__empty" role="status"><!></div>`);
-var root_1 = $5.from_html(`<div><ul role="listbox" class="cinder-command-menu__listbox"><!></ul> <!></div>`);
+var root_2 = $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 = $5.props_id();
-  $5.push($$props, true);
-  let open = $5.prop($$props, "open", 15, false), query = $5.prop($$props, "query", 11, ""), placement = $5.prop($$props, "placement", 3, "bottom-start"), offset3 = $5.prop($$props, "offset", 3, 6), label = $5.prop($$props, "label", 3, "Commands");
+  const listboxId = $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");
   const portalAttachment = createPortalAttachment({
     target: () => document.body,
     inheritAttributes: true,
     source: () => $$props.anchor
   });
-  let mounted = $5.state(false);
-  let listElement = $5.state(undefined);
-  let registrations = $5.state($5.proxy([]));
-  let activeItemId = $5.state(null);
-  let itemCounter = 0;
-  let registrationsReady = $5.state(false);
-  let readyCycle = 0;
-  const enabledIds = $5.derived(() => {
-    return inDocumentOrder($5.get(registrations)).filter((registration) => !registration.getDisabled()).map((registration) => registration.id);
-  });
-  const showEmpty = $5.derived(() => $5.get(mounted) && open() && $5.get(registrationsReady) && $5.get(registrations).length === 0);
-  const caretAnchor = $5.derived(() => {
+  let mounted = $6.state(false);
+  let listElement = $6.state(undefined);
+  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;
     const currentCaretIndex = $$props.caretIndex;
     if (!anchorElement)
@@ -2375,81 +2543,41 @@ function Command_menu($$anchor, $$props) {
   });
   const anchoredOverlay = createAnchoredOverlay({
     open: () => open(),
-    anchor: () => $5.get(caretAnchor),
-    panel: () => $5.get(listElement),
+    anchor: () => $6.get(caretAnchor),
+    panel: () => $6.get(listElement),
     placement: () => placement(),
     offset: () => offset3(),
     widthMode: () => "content"
   });
-  $5.user_effect(() => {
-    $5.set(mounted, true);
+  $6.user_effect(() => {
+    $6.set(mounted, true);
   });
-  $5.user_effect(() => {
-    const ids = $5.get(enabledIds);
+  $6.user_effect(() => {
     if (!open()) {
-      $5.set(activeItemId, null);
+      commandList.resetActiveItem();
       return;
     }
-    if ($5.get(activeItemId) !== null && ids.includes($5.get(activeItemId)))
-      return;
-    $5.set(activeItemId, ids[0] ?? null, true);
   });
-  $5.user_effect(() => {
+  $6.user_effect(() => {
     query();
-    $5.set(registrationsReady, false);
-    const cycle = ++readyCycle;
-    queueMicrotask(() => {
-      if (cycle === readyCycle)
-        $5.set(registrationsReady, true);
+    commandList.refreshRegistrationsReady();
+  });
+  $6.user_effect(() => {
+    $$props.onstatechange?.({
+      listboxId,
+      activeItemId: open() ? commandList.activeItemId : null
     });
   });
-  $5.user_effect(() => {
-    $$props.onstatechange?.({ listboxId, activeItemId: open() ? $5.get(activeItemId) : null });
-  });
-  $5.user_effect(() => {
-    if ($5.get(activeItemId) === null)
-      return;
-    document.getElementById($5.get(activeItemId))?.scrollIntoView({ block: "nearest" });
+  $6.user_effect(() => {
+    commandList.scrollActiveItemIntoView();
   });
   function activateItemById(id) {
-    const record = $5.get(registrations).find((registration) => registration.id === id);
-    if (!record || record.getDisabled())
+    const record = commandList.activateItemById(id);
+    if (!record)
       return;
-    record.getOnselect()();
     $$props.onselect?.({ value: record.getValue(), query: query() });
   }
-  const context = {
-    get listboxId() {
-      return listboxId;
-    },
-    get activeItemId() {
-      return $5.get(activeItemId);
-    },
-    register(input, node) {
-      const id = `${listboxId}-item-${++itemCounter}`;
-      $5.set(registrations, [
-        ...$5.get(registrations),
-        {
-          id,
-          node,
-          getValue: input.getValue,
-          getOnselect: input.getOnselect,
-          getDisabled: input.getDisabled
-        }
-      ], true);
-      return {
-        id,
-        unregister: () => {
-          $5.set(registrations, $5.get(registrations).filter((registration) => registration.id !== id), true);
-        }
-      };
-    },
-    setActiveById(id) {
-      $5.set(activeItemId, id, true);
-    },
-    activateItemById
-  };
-  setCommandListContext(context);
+  setCommandListContext(commandList.createContext(activateItemById));
   function dismiss() {
     if (!open())
       return;
@@ -2459,44 +2587,12 @@ function Command_menu($$anchor, $$props) {
   function handleKeydown(event) {
     if (!open())
       return;
-    if (event.isComposing || event.keyCode === 229)
-      return;
-    const ids = $5.get(enabledIds);
-    if (event.key === "ArrowDown") {
-      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
-        return;
-      event.preventDefault();
-      if (ids.length === 0)
-        return;
-      const index = $5.get(activeItemId) === null ? -1 : ids.indexOf($5.get(activeItemId));
-      $5.set(activeItemId, ids[(index + 1) % ids.length] ?? null, true);
-    } else if (event.key === "ArrowUp") {
-      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
-        return;
-      event.preventDefault();
-      if (ids.length === 0)
-        return;
-      const index = $5.get(activeItemId) === null ? 0 : ids.indexOf($5.get(activeItemId));
-      $5.set(activeItemId, ids[index <= 0 ? ids.length - 1 : index - 1] ?? null, true);
-    } else if (event.key === "Home") {
-      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
-        return;
-      event.preventDefault();
-      $5.set(activeItemId, ids[0] ?? null, true);
-    } else if (event.key === "End") {
-      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
-        return;
-      event.preventDefault();
-      $5.set(activeItemId, ids[ids.length - 1] ?? null, true);
-    } else if (event.key === "Enter" && $5.get(activeItemId) !== null) {
-      event.preventDefault();
-      event.stopPropagation();
-      activateItemById($5.get(activeItemId));
-    } else if (event.key === "Escape") {
-      event.preventDefault();
-      event.stopPropagation();
-      dismiss();
-    }
+    commandList.handleKeydown({
+      event,
+      onEnter: activateItemById,
+      onEscape: dismiss,
+      ignoreModifiedNavigation: true
+    });
   }
   function handleDocumentPointerdown(event) {
     const target = event.target;
@@ -2504,11 +2600,11 @@ function Command_menu($$anchor, $$props) {
       return;
     if ($$props.anchor?.contains(target))
       return;
-    if ($5.get(listElement)?.contains(target))
+    if ($6.get(listElement)?.contains(target))
       return;
     dismiss();
   }
-  $5.user_effect(() => {
+  $6.user_effect(() => {
     if (!open() || !$$props.anchor)
       return;
     const stopKeydown = on($$props.anchor, "keydown", handleKeydown);
@@ -2518,51 +2614,51 @@ function Command_menu($$anchor, $$props) {
       stopPointerdown();
     };
   });
-  var fragment = $5.comment();
-  var node_1 = $5.first_child(fragment);
+  var fragment = $6.comment();
+  var node = $6.first_child(fragment);
   {
     var consequent_1 = ($$anchor2) => {
       var div = root_1();
-      var ul = $5.child(div);
-      var node_2 = $5.child(ul);
-      $5.snippet(node_2, () => $$props.items, () => ({ query: query() }));
-      $5.reset(ul);
-      var node_3 = $5.sibling(ul, 2);
+      var ul = $6.child(div);
+      var node_1 = $6.child(ul);
+      $6.snippet(node_1, () => $$props.items, () => ({ query: query() }));
+      $6.reset(ul);
+      var node_2 = $6.sibling(ul, 2);
       {
         var consequent = ($$anchor3) => {
           var div_1 = root_2();
-          var node_4 = $5.child(div_1);
-          $5.snippet(node_4, () => $$props.empty);
-          $5.reset(div_1);
-          $5.append($$anchor3, div_1);
+          var node_3 = $6.child(div_1);
+          $6.snippet(node_3, () => $$props.empty);
+          $6.reset(div_1);
+          $6.append($$anchor3, div_1);
         };
-        $5.if(node_3, ($$render) => {
-          if ($5.get(showEmpty) && $$props.empty)
+        $6.if(node_2, ($$render) => {
+          if ($6.get(showEmpty) && $$props.empty)
             $$render(consequent);
         });
       }
-      $5.reset(div);
-      $5.bind_this(div, ($$value) => $5.set(listElement, $$value), () => $5.get(listElement));
-      $5.attach(div, () => portalAttachment);
-      $5.template_effect(($0) => {
-        $5.set_attribute(div, "aria-hidden", anchoredOverlay.positionReady ? undefined : "true");
-        $5.set_class(div, 1, $0);
-        $5.set_attribute(div, "data-cinder-position-ready", anchoredOverlay.positionReady);
-        $5.set_style(div, anchoredOverlay.positionStyle);
-        $5.set_attribute(ul, "id", listboxId);
-        $5.set_attribute(ul, "aria-label", label());
+      $6.reset(div);
+      $6.bind_this(div, ($$value) => $6.set(listElement, $$value), () => $6.get(listElement));
+      $6.attach(div, () => portalAttachment);
+      $6.template_effect(($0) => {
+        $6.set_attribute(div, "aria-hidden", anchoredOverlay.positionReady ? undefined : "true");
+        $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, "aria-label", label());
       }, [
-        () => $5.clsx(classNames("cinder-_floating-surface", "cinder-command-menu", $$props.class))
+        () => $6.clsx(classNames("cinder-_floating-surface", "cinder-command-menu", $$props.class))
       ]);
-      $5.append($$anchor2, div);
+      $6.append($$anchor2, div);
     };
-    $5.if(node_1, ($$render) => {
-      if ($5.get(mounted) && open() && $$props.anchor)
+    $6.if(node, ($$render) => {
+      if ($6.get(mounted) && open() && $$props.anchor)
         $$render(consequent_1);
     });
   }
-  $5.append($$anchor, fragment);
-  $5.pop();
+  $6.append($$anchor, fragment);
+  $6.pop();
 }
 
 // src/components/command-menu/index.ts
@@ -2573,4 +2669,4 @@ export {
   Command_menu as CommandMenu
 };
 
-//# debugId=B99DC0358AB8037E64756E2164756E21
+//# debugId=270F83915598742564756E2164756E21

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

@@ -42,8 +42,7 @@ var schema = {
       type: "string",
       description: `Bindable search query. Mutated by the input's oninput handler.
 Exposed to the items snippet so consumers can filter.
-Note: query is NOT reset on close — consumers who want a fresh query on
-each open should reset it in their \`onclose\` callback.`
+Reset to an empty string each time the palette opens.`
     },
     class: {
       type: "string",
@@ -88,4 +87,4 @@ export {
   command_palette_schema_default as default
 };
 
-//# debugId=87EE7DC104A525B564756E2164756E21
+//# debugId=B6A3186E958E9E2A64756E2164756E21

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

@@ -12,8 +12,7 @@ export type CommandPaletteProps = {
     /**
      * Bindable search query. Mutated by the input's oninput handler.
      * Exposed to the items snippet so consumers can filter.
-     * Note: query is NOT reset on close — consumers who want a fresh query on
-     * each open should reset it in their `onclose` callback.
+     * Reset to an empty string each time the palette opens.
      */
     query?: string;
     /** Fired after any close path routed through the palette close lifecycle. */