@lostgradient/cinder 0.3.0 → 0.4.0

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

@@ -3,7 +3,7 @@ var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // src/components/command-palette/command-palette.svelte
-import * as $ from "svelte/internal/server";
+import * as $2 from "svelte/internal/server";
 import { onDestroy } from "svelte";
 
 // src/_internal/overlay.ts
@@ -71,20 +71,6 @@ function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
-// 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/utilities/focus.ts
 function restoreFocusTo(target) {
   if (!target)
@@ -121,10 +107,186 @@ function hasCommandListContext() {
   }
 }
 
+// src/components/_internal/create-command-list-state.svelte.ts
+import * as $ from "svelte/internal/server";
+
+// 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 = [];
+  registrationsReady = false;
+  #itemCounter = 0;
+  #readyCycle = 0;
+  #intendedActiveId = null;
+  #enabledIds = $.derived(() => {
+    return inDocumentOrder(this.registrations).filter((registration) => !registration.getDisabled()).map((registration) => registration.id);
+  });
+  get enabledIds() {
+    return this.#enabledIds();
+  }
+  set enabledIds($$value) {
+    return this.#enabledIds($$value);
+  }
+  #activeItemId = $.derived(() => this.#intendedActiveId !== null && this.enabledIds.includes(this.#intendedActiveId) ? this.#intendedActiveId : this.enabledIds[0] ?? null);
+  get activeItemId() {
+    return this.#activeItemId();
+  }
+  set activeItemId($$value) {
+    return this.#activeItemId($$value);
+  }
+  constructor(listboxId) {
+    this.listboxId = listboxId;
+  }
+  resetActiveItem() {
+    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) {
+    this.#intendedActiveId = id;
+  }
+  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);
+      this.#intendedActiveId = ids[(index + 1) % ids.length] ?? null;
+      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);
+      this.#intendedActiveId = ids[index <= 0 ? ids.length - 1 : index - 1] ?? null;
+      return true;
+    }
+    if (event.key === "Home") {
+      if (ignoreModifiedNavigation && isModified)
+        return false;
+      event.preventDefault();
+      this.#intendedActiveId = ids[0] ?? null;
+      return true;
+    }
+    if (event.key === "End") {
+      if (ignoreModifiedNavigation && isModified)
+        return false;
+      event.preventDefault();
+      this.#intendedActiveId = ids[ids.length - 1] ?? null;
+      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-palette/command-palette.svelte
 function Command_palette($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
-    const baseId = $.props_id($$renderer2);
+    const baseId = $2.props_id($$renderer2);
     let {
       open = false,
       placeholder = "Search…",
@@ -143,15 +305,7 @@ function Command_palette($$renderer, $$props) {
     let inputElement = undefined;
     let mounted = false;
     let capturedFocus = null;
-    let registrations = [];
-    let itemCounter = 0;
-    let intendedActiveId = null;
-    const enabledIds = $.derived(() => {
-      return inDocumentOrder(registrations).filter((r) => !r.getDisabled()).map((r) => r.id);
-    });
-    const activeItemId = $.derived(() => intendedActiveId !== null && enabledIds().includes(intendedActiveId) ? intendedActiveId : enabledIds()[0] ?? null);
-    let registrationsReady = false;
-    let readyCycle = 0;
+    const commandList = createCommandListState(listboxId);
     let releaseEscape = null;
     function returnFocus() {
       const candidates = [triggerRef, capturedFocus];
@@ -193,94 +347,24 @@ function Command_palette($$renderer, $$props) {
       }
     }
     function handleKeydown(event) {
-      const ids = enabledIds();
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-        if (ids.length === 0)
-          return;
-        if (activeItemId() === null) {
-          const firstId = ids[0];
-          if (firstId !== undefined)
-            intendedActiveId = firstId;
-        } else {
-          const index = ids.indexOf(activeItemId());
-          const nextId = ids[(index + 1) % ids.length];
-          if (nextId !== undefined)
-            intendedActiveId = nextId;
-        }
-      } else if (event.key === "ArrowUp") {
-        event.preventDefault();
-        if (ids.length === 0)
-          return;
-        if (activeItemId() === null) {
-          const lastId = ids[ids.length - 1];
-          if (lastId !== undefined)
-            intendedActiveId = lastId;
-        } else {
-          const index = ids.indexOf(activeItemId());
-          const previousId = ids[index <= 0 ? ids.length - 1 : index - 1];
-          if (previousId !== undefined)
-            intendedActiveId = previousId;
-        }
-      } else if (event.key === "Home") {
-        event.preventDefault();
-        intendedActiveId = ids[0] ?? null;
-      } else if (event.key === "End") {
-        event.preventDefault();
-        intendedActiveId = ids[ids.length - 1] ?? null;
-      } else if (event.key === "Enter") {
-        event.preventDefault();
-        if (activeItemId() !== null)
-          context.activateItemById(activeItemId());
-      }
+      commandList.handleKeydown({
+        event,
+        onEnter: (id) => commandList.activateItemById(id),
+        preventDefaultOnEmptyEnter: true
+      });
     }
     function handleInput(event) {
       const target = event.target;
       query = target.value;
     }
-    const context = {
-      get listboxId() {
-        return listboxId;
-      },
-      get activeItemId() {
-        return activeItemId();
-      },
-      register(input, node) {
-        const id = `${listboxId}-item-${++itemCounter}`;
-        registrations.push({
-          id,
-          node,
-          getValue: input.getValue,
-          getOnselect: input.getOnselect,
-          getDisabled: input.getDisabled
-        });
-        return {
-          id,
-          unregister: () => {
-            const index = registrations.findIndex((r) => r.id === id);
-            if (index !== -1)
-              registrations.splice(index, 1);
-          }
-        };
-      },
-      setActiveById(id) {
-        intendedActiveId = id;
-      },
-      activateItemById(id) {
-        const record = registrations.find((r) => r.id === id);
-        if (record && !record.getDisabled()) {
-          record.getOnselect()();
-        }
-      }
-    };
-    setCommandListContext(context);
-    const showEmpty = $.derived(() => mounted && registrationsReady && registrations.length === 0);
+    setCommandListContext(commandList.createContext());
+    const showEmpty = $2.derived(() => mounted && commandList.registrationsReady && commandList.registrations.length === 0);
     if (mounted || open) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<dialog class="cinder-command-palette"${$.attr("aria-label", label)} aria-modal="true">`);
+      $$renderer2.push(`<dialog class="cinder-command-palette"${$2.attr("aria-label", label)} aria-modal="true">`);
       if (open) {
         $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`<div${$.attr_class($.clsx(classNames("cinder-command-palette__panel", className)))}><div class="cinder-command-palette__search"><svg class="cinder-command-palette__search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"></path></svg> <label${$.attr("for", inputId)} class="cinder-sr-only">${$.escape(label)}</label> <input${$.attr("id", inputId)} type="text" class="cinder-command-palette__input" role="combobox" autocomplete="off" autocorrect="off" spellcheck="false"${$.attr("placeholder", placeholder)}${$.attr("value", query)} aria-autocomplete="list" aria-expanded="true"${$.attr("aria-controls", listboxId)}${$.attr("aria-activedescendant", activeItemId() ?? undefined)}/></div> <ul${$.attr("id", listboxId)} role="listbox" class="cinder-command-palette__listbox">`);
+        $$renderer2.push(`<div${$2.attr_class($2.clsx(classNames("cinder-command-palette__panel", className)))}><div class="cinder-command-palette__search"><svg class="cinder-command-palette__search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"></path></svg> <label${$2.attr("for", inputId)} class="cinder-sr-only">${$2.escape(label)}</label> <input${$2.attr("id", inputId)} type="text" class="cinder-command-palette__input" role="combobox" autocomplete="off" autocorrect="off" spellcheck="false"${$2.attr("placeholder", placeholder)}${$2.attr("value", query)} aria-autocomplete="list" aria-expanded="true"${$2.attr("aria-controls", listboxId)}${$2.attr("aria-activedescendant", commandList.activeItemId ?? undefined)}/></div> <ul${$2.attr("id", listboxId)} role="listbox" class="cinder-command-palette__listbox">`);
         items($$renderer2, { query });
         $$renderer2.push(`<!----></ul> `);
         if (showEmpty() && empty) {
@@ -309,7 +393,7 @@ function Command_palette($$renderer, $$props) {
       $$renderer2.push("<!--[-1-->");
     }
     $$renderer2.push(`<!--]-->`);
-    $.bind_props($$props, { open, query });
+    $2.bind_props($$props, { open, query });
   });
 }
 
@@ -320,4 +404,4 @@ export {
   Command_palette as CommandPalette
 };
 
-//# debugId=E431A978D385DB8464756E2164756E21
+//# debugId=564C66E9D57339DA64756E2164756E21

package/dist/server/components/confirm-dialog/index.js

@@ -469,6 +469,10 @@ function captureFocus() {
 }
 
 // src/utilities/attachments.ts
+function isInsideEventPath(event, element) {
+  const path = event.composedPath();
+  return path.some((entry) => entry instanceof Node && element.contains(entry));
+}
 function createClickOutside(options) {
   const { handler, enabled = true, eventType = "click", capture = true, ignoreRefs } = options;
   return (node) => {
@@ -476,17 +480,19 @@ function createClickOutside(options) {
       const isEnabled = typeof enabled === "function" ? enabled() : enabled;
       if (!isEnabled)
         return;
+      if (event.type === "touchstart" && !event.cancelable)
+        return;
       const target = event.target;
       if (!(target instanceof Node)) {
         handler();
         return;
       }
-      if (node.contains(target))
+      if (isInsideEventPath(event, node))
         return;
       if (ignoreRefs) {
         for (const ref of ignoreRefs) {
           const element = ref();
-          if (element && element.contains(target))
+          if (element && isInsideEventPath(event, element))
             return;
         }
       }
@@ -781,4 +787,4 @@ export {
   Confirm_dialog as ConfirmDialog
 };
 
-//# debugId=FC6D94D831D4770164756E2164756E21
+//# debugId=2CF84EFD1A95315E64756E2164756E21

package/dist/server/components/context-menu/index.css

@@ -69,7 +69,7 @@
     border-radius: var(--cinder-radius-md);
     background: var(--cinder-surface-raised);
     color: var(--cinder-text);
-    box-shadow: var(--cinder-shadow-lg);
+    box-shadow: var(--cinder-shadow-overlay);
   }
 
   .cinder-dropdown__menu {
@@ -201,10 +201,16 @@
       position: fixed;
       inset: auto;
       top: calc(anchor(bottom)  + var(--cinder-space-1));
+      left: auto;
       right: anchor(right);
       position-try-fallbacks: flip-block, flip-inline;
     }
 
+    .cinder-dropdown-menu[popover][dir="rtl"] {
+      right: auto;
+      left: anchor(left);
+    }
+
     .cinder-dropdown__menu[popover] {
       position: fixed;
       margin: 0;