@vizel/svelte 0.0.1-alpha.1

package/dist/components/VizelNodeSelector.svelte

@@ -0,0 +1,172 @@
+<script lang="ts" module>
+import type { Editor, VizelNodeTypeOption } from "@vizel/core";
+
+export interface VizelNodeSelectorProps {
+  /** The editor instance */
+  editor: Editor;
+  /** Custom node types (defaults to vizelDefaultNodeTypes) */
+  nodeTypes?: VizelNodeTypeOption[];
+  /** Custom class name */
+  class?: string;
+}
+</script>
+
+<script lang="ts">
+import { vizelDefaultNodeTypes, getVizelActiveNodeType } from "@vizel/core";
+import { createVizelState } from "../runes/createVizelState.svelte.ts";
+import VizelIcon from "./VizelIcon.svelte";
+
+let { editor, nodeTypes = vizelDefaultNodeTypes, class: className }: VizelNodeSelectorProps = $props();
+
+// Subscribe to editor state changes
+const editorState = createVizelState(() => editor);
+
+let isOpen = $state(false);
+let focusedIndex = $state(0);
+let containerRef: HTMLDivElement | undefined = $state();
+let dropdownRef: HTMLDivElement | undefined = $state();
+
+const activeNodeType = $derived.by(() => {
+  void editorState.current; // Trigger reactivity
+  return getVizelActiveNodeType(editor, nodeTypes);
+});
+
+const currentLabel = $derived(activeNodeType?.label ?? "Text");
+const currentIcon = $derived(activeNodeType?.icon ?? "paragraph");
+
+// Close dropdown when clicking outside
+function handleClickOutside(event: MouseEvent) {
+  if (containerRef && !containerRef.contains(event.target as Node)) {
+    isOpen = false;
+  }
+}
+
+$effect(() => {
+  document.addEventListener("mousedown", handleClickOutside);
+  return () => document.removeEventListener("mousedown", handleClickOutside);
+});
+
+// Focus the dropdown when it opens to ensure keyboard navigation works
+$effect(() => {
+  if (isOpen && dropdownRef) {
+    dropdownRef.focus();
+  }
+});
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (!isOpen) {
+    if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+      event.preventDefault();
+      isOpen = true;
+      focusedIndex = 0;
+    }
+    return;
+  }
+
+  switch (event.key) {
+    case "Escape":
+      event.preventDefault();
+      isOpen = false;
+      break;
+    case "ArrowDown":
+      event.preventDefault();
+      focusedIndex = (focusedIndex + 1) % nodeTypes.length;
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      focusedIndex = (focusedIndex - 1 + nodeTypes.length) % nodeTypes.length;
+      break;
+    case "Enter":
+    case " ": {
+      event.preventDefault();
+      const selectedNodeType = nodeTypes[focusedIndex];
+      if (selectedNodeType) {
+        handleSelectNodeType(selectedNodeType);
+      }
+      break;
+    }
+    case "Home":
+      event.preventDefault();
+      focusedIndex = 0;
+      break;
+    case "End":
+      event.preventDefault();
+      focusedIndex = nodeTypes.length - 1;
+      break;
+    default:
+      // Allow other keys to propagate
+      break;
+  }
+}
+
+function handleSelectNodeType(nodeType: VizelNodeTypeOption) {
+  nodeType.command(editor);
+  isOpen = false;
+}
+
+function isNodeTypeActive(nodeType: VizelNodeTypeOption): boolean {
+  void editorState.current; // Trigger reactivity
+  return nodeType.isActive(editor);
+}
+</script>
+
+<div
+  bind:this={containerRef}
+  class="vizel-node-selector {className ?? ''}"
+  data-vizel-node-selector
+>
+  <button
+    type="button"
+    class="vizel-node-selector-trigger"
+    aria-haspopup="listbox"
+    aria-expanded={isOpen}
+    aria-label={`Current block type: ${currentLabel}`}
+    title="Change block type"
+    onclick={() => (isOpen = !isOpen)}
+    onkeydown={handleKeyDown}
+  >
+    <span class="vizel-node-selector-icon">
+      <VizelIcon name={currentIcon} />
+    </span>
+    <span class="vizel-node-selector-label">{currentLabel}</span>
+    <span class="vizel-node-selector-chevron" aria-hidden="true">
+      <VizelIcon name="chevronDown" />
+    </span>
+  </button>
+
+  {#if isOpen}
+    <div
+      bind:this={dropdownRef}
+      class="vizel-node-selector-dropdown"
+      role="listbox"
+      aria-label="Block types"
+      data-vizel-node-selector-dropdown
+      tabindex="-1"
+      onkeydown={handleKeyDown}
+    >
+      {#each nodeTypes as nodeType, index}
+        {@const active = isNodeTypeActive(nodeType)}
+        {@const focused = index === focusedIndex}
+        <button
+          type="button"
+          role="option"
+          aria-selected={active}
+          class="vizel-node-selector-option {active ? 'is-active' : ''} {focused ? 'is-focused' : ''}"
+          tabindex={focused ? 0 : -1}
+          onclick={() => handleSelectNodeType(nodeType)}
+          onmouseenter={() => (focusedIndex = index)}
+        >
+          <span class="vizel-node-selector-option-icon">
+            <VizelIcon name={nodeType.icon} />
+          </span>
+          <span class="vizel-node-selector-option-label">{nodeType.label}</span>
+          {#if active}
+            <span class="vizel-node-selector-check" aria-hidden="true">
+              <VizelIcon name="check" />
+            </span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/components/VizelNodeSelector.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Editor, VizelNodeTypeOption } from "@vizel/core";
+export interface VizelNodeSelectorProps {
+    /** The editor instance */
+    editor: Editor;
+    /** Custom node types (defaults to vizelDefaultNodeTypes) */
+    nodeTypes?: VizelNodeTypeOption[];
+    /** Custom class name */
+    class?: string;
+}
+declare const VizelNodeSelector: import("svelte").Component<VizelNodeSelectorProps, {}, "">;
+type VizelNodeSelector = ReturnType<typeof VizelNodeSelector>;
+export default VizelNodeSelector;
+//# sourceMappingURL=VizelNodeSelector.svelte.d.ts.map

package/dist/components/VizelNodeSelector.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelNodeSelector.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelNodeSelector.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAE/D,MAAM,WAAW,sBAAsB;IACrC,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,SAAS,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAClC,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8ID,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/components/VizelPortal.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+import type { VizelPortalLayer } from "@vizel/core";
+import type { Snippet } from "svelte";
+
+/**
+ * Props for the Portal component.
+ */
+export interface VizelPortalProps {
+  /** Content to render in the portal */
+  children: Snippet;
+  /** Z-index layer for the portal content */
+  layer?: VizelPortalLayer;
+  /** Additional CSS class name */
+  class?: string;
+  /** Whether the portal is disabled (renders children in place) */
+  disabled?: boolean;
+}
+</script>
+
+<script lang="ts">
+  import { getVizelPortalContainer, VIZEL_PORTAL_Z_INDEX } from "@vizel/core";
+
+  const {
+    children,
+    layer = "dropdown",
+    class: className,
+    disabled = false,
+  }: VizelPortalProps = $props();
+
+  // Create portal action that moves content to the portal container
+  function portal(node: HTMLElement) {
+    const container = getVizelPortalContainer();
+
+    // Create wrapper element
+    const wrapper = document.createElement("div");
+    wrapper.setAttribute("data-vizel-portal-layer", layer);
+    if (className) {
+      wrapper.className = className;
+    }
+    wrapper.style.position = "absolute";
+    wrapper.style.top = "0";
+    wrapper.style.left = "0";
+    wrapper.style.zIndex = String(VIZEL_PORTAL_Z_INDEX[layer]);
+
+    // Move node's children to wrapper
+    while (node.firstChild) {
+      wrapper.appendChild(node.firstChild);
+    }
+
+    container.appendChild(wrapper);
+
+    return {
+      destroy() {
+        // Move content back to original location for cleanup
+        while (wrapper.firstChild) {
+          node.appendChild(wrapper.firstChild);
+        }
+        wrapper.remove();
+      },
+    };
+  }
+</script>
+
+{#if disabled}
+  {@render children()}
+{:else}
+  <div use:portal>
+    {@render children()}
+  </div>
+{/if}

package/dist/components/VizelPortal.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { VizelPortalLayer } from "@vizel/core";
+import type { Snippet } from "svelte";
+/**
+ * Props for the Portal component.
+ */
+export interface VizelPortalProps {
+    /** Content to render in the portal */
+    children: Snippet;
+    /** Z-index layer for the portal content */
+    layer?: VizelPortalLayer;
+    /** Additional CSS class name */
+    class?: string;
+    /** Whether the portal is disabled (renders children in place) */
+    disabled?: boolean;
+}
+declare const VizelPortal: import("svelte").Component<VizelPortalProps, {}, "">;
+type VizelPortal = ReturnType<typeof VizelPortal>;
+export default VizelPortal;
+//# sourceMappingURL=VizelPortal.svelte.d.ts.map

package/dist/components/VizelPortal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelPortal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelPortal.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,sCAAsC;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6DD,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/VizelProvider.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+import type { Editor } from "@vizel/core";
+import type { Snippet } from "svelte";
+
+export interface VizelProviderProps {
+  /** The editor instance */
+  editor: Editor | null;
+  /** Custom class name */
+  class?: string;
+  /** Children content */
+  children: Snippet;
+}
+</script>
+
+<script lang="ts">
+import { setContext } from "svelte";
+import { VIZEL_CONTEXT_KEY } from "./VizelContext.ts";
+
+let { editor, class: className, children }: VizelProviderProps = $props();
+
+setContext(VIZEL_CONTEXT_KEY, () => editor);
+</script>
+
+<div class={className} data-vizel-root>
+  {@render children()}
+</div>

package/dist/components/VizelProvider.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Editor } from "@vizel/core";
+import type { Snippet } from "svelte";
+export interface VizelProviderProps {
+    /** The editor instance */
+    editor: Editor | null;
+    /** Custom class name */
+    class?: string;
+    /** Children content */
+    children: Snippet;
+}
+declare const VizelProvider: import("svelte").Component<VizelProviderProps, {}, "">;
+type VizelProvider = ReturnType<typeof VizelProvider>;
+export default VizelProvider;
+//# sourceMappingURL=VizelProvider.svelte.d.ts.map

package/dist/components/VizelProvider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,kBAAkB;IACjC,0BAA0B;IAC1B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAuBD,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/VizelSaveIndicator.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" module>
+import type { VizelSaveStatus } from "@vizel/core";
+
+export interface VizelSaveIndicatorProps {
+  /** Current save status */
+  status: VizelSaveStatus;
+  /** Timestamp of last successful save */
+  lastSaved?: Date | null;
+  /** Show relative timestamp (default: true) */
+  showTimestamp?: boolean;
+  /** Custom class name */
+  class?: string;
+}
+</script>
+
+<script lang="ts">
+import { formatVizelRelativeTime } from "@vizel/core";
+import VizelIcon from "./VizelIcon.svelte";
+
+let {
+  status,
+  lastSaved = null,
+  showTimestamp = true,
+  class: className,
+}: VizelSaveIndicatorProps = $props();
+
+let relativeTime = $state("");
+
+function updateTime() {
+  if (lastSaved) {
+    relativeTime = formatVizelRelativeTime(lastSaved);
+  } else {
+    relativeTime = "";
+  }
+}
+
+$effect(() => {
+  updateTime();
+  const intervalId = setInterval(updateTime, 10000);
+
+  return () => {
+    clearInterval(intervalId);
+  };
+});
+
+// Watch lastSaved changes
+$effect(() => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  lastSaved;
+  updateTime();
+});
+
+const statusText = $derived.by(() => {
+  switch (status) {
+    case "saved":
+      return "Saved";
+    case "saving":
+      return "Saving...";
+    case "unsaved":
+      return "Unsaved";
+    case "error":
+      return "Error saving";
+    default:
+      return "";
+  }
+});
+
+const shouldShowTimestamp = $derived(showTimestamp && lastSaved && relativeTime && status === "saved");
+</script>
+
+<div
+  class="vizel-save-indicator vizel-save-indicator--{status} {className ?? ''}"
+  role="status"
+  aria-live="polite"
+  data-vizel-save-indicator
+>
+  <span class="vizel-save-indicator-icon" aria-hidden="true">
+    {#if status === "saved"}
+      <VizelIcon name="check" />
+    {:else if status === "saving"}
+      <span class="vizel-save-indicator-spinner" aria-hidden="true">
+        <VizelIcon name="loader" />
+      </span>
+    {:else if status === "unsaved"}
+      <VizelIcon name="circle" />
+    {:else if status === "error"}
+      <VizelIcon name="warning" />
+    {/if}
+  </span>
+  <span class="vizel-save-indicator-text">{statusText}</span>
+  {#if shouldShowTimestamp}
+    <span class="vizel-save-indicator-timestamp">{relativeTime}</span>
+  {/if}
+</div>

package/dist/components/VizelSaveIndicator.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { VizelSaveStatus } from "@vizel/core";
+export interface VizelSaveIndicatorProps {
+    /** Current save status */
+    status: VizelSaveStatus;
+    /** Timestamp of last successful save */
+    lastSaved?: Date | null;
+    /** Show relative timestamp (default: true) */
+    showTimestamp?: boolean;
+    /** Custom class name */
+    class?: string;
+}
+declare const VizelSaveIndicator: import("svelte").Component<VizelSaveIndicatorProps, {}, "">;
+type VizelSaveIndicator = ReturnType<typeof VizelSaveIndicator>;
+export default VizelSaveIndicator;
+//# sourceMappingURL=VizelSaveIndicator.svelte.d.ts.map

package/dist/components/VizelSaveIndicator.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelSaveIndicator.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelSaveIndicator.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,MAAM,WAAW,uBAAuB;IACtC,0BAA0B;IAC1B,MAAM,EAAE,eAAe,CAAC;IACxB,wCAAwC;IACxC,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACxB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqFD,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/VizelSlashMenu.svelte

@@ -0,0 +1,211 @@
+<script lang="ts" module>
+import type { VizelSlashCommandItem } from "@vizel/core";
+import type { Snippet } from "svelte";
+
+export interface VizelSlashMenuRef {
+  onKeyDown: (event: KeyboardEvent) => boolean;
+}
+
+export interface VizelSlashMenuProps {
+  /** The list of slash command items */
+  items: VizelSlashCommandItem[];
+  /** Custom class name */
+  class?: string;
+  /** Command handler */
+  oncommand?: (item: VizelSlashCommandItem) => void;
+  /** Whether to show items grouped by category (default: true when not searching) */
+  showGroups?: boolean;
+  /** Custom group order */
+  groupOrder?: string[];
+  /** Custom item renderer */
+  renderItem?: Snippet<[{ item: VizelSlashCommandItem; isSelected: boolean; onclick: () => void }]>;
+  /** Custom empty state renderer */
+  renderEmpty?: Snippet;
+}
+</script>
+
+<script lang="ts">
+import { groupVizelSlashCommands, type VizelSlashCommandGroup } from "@vizel/core";
+import { tick } from "svelte";
+import VizelSlashMenuItem from "./VizelSlashMenuItem.svelte";
+import VizelSlashMenuEmpty from "./VizelSlashMenuEmpty.svelte";
+
+let {
+  items,
+  class: className,
+  oncommand,
+  showGroups = true,
+  groupOrder,
+  renderItem,
+  renderEmpty,
+}: VizelSlashMenuProps = $props();
+
+let selectedIndex = $state(0);
+let itemRefs: (HTMLElement | null)[] = $state([]);
+
+// Clean up itemRefs when items decrease
+$effect(() => {
+  const length = flatItems.length;
+  if (itemRefs.length > length) {
+    itemRefs.length = length;
+  }
+});
+
+// Group items when showGroups is true and there are enough items
+const groups = $derived.by<VizelSlashCommandGroup[]>(() => {
+  if (!showGroups || items.length <= 5) {
+    // Don't group if explicitly disabled or few items (likely search results)
+    return [{ name: "", items }];
+  }
+  return groupVizelSlashCommands(items, groupOrder);
+});
+
+// Flatten for navigation
+const flatItems = $derived(groups.flatMap((g) => g.items));
+
+// Reset selection when items change
+$effect(() => {
+  items;
+  selectedIndex = 0;
+});
+
+// Scroll selected item into view when selection changes
+$effect(() => {
+  const index = selectedIndex;
+  tick().then(() => {
+    const selectedElement = itemRefs[index];
+    if (selectedElement) {
+      selectedElement.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  });
+});
+
+function selectItem(index: number) {
+  const item = flatItems[index];
+  if (item) {
+    oncommand?.(item);
+  }
+}
+
+// Navigate to next group with Tab
+function tabHandler() {
+  if (groups.length <= 1) return;
+
+  let currentGroupIndex = 0;
+  let itemCount = 0;
+  for (let i = 0; i < groups.length; i++) {
+    const group = groups[i];
+    if (!group) continue;
+    if (selectedIndex < itemCount + group.items.length) {
+      currentGroupIndex = i;
+      break;
+    }
+    itemCount += group.items.length;
+  }
+
+  // Move to next group
+  const nextGroupIndex = (currentGroupIndex + 1) % groups.length;
+  let nextIndex = 0;
+  for (let i = 0; i < nextGroupIndex; i++) {
+    const group = groups[i];
+    if (group) {
+      nextIndex += group.items.length;
+    }
+  }
+  selectedIndex = nextIndex;
+}
+
+// Calculate global index for items
+function getGlobalIndex(groupIndex: number, itemIndex: number): number {
+  let index = 0;
+  for (let i = 0; i < groupIndex; i++) {
+    const group = groups[i];
+    if (group) {
+      index += group.items.length;
+    }
+  }
+  return index + itemIndex;
+}
+
+export function onKeyDown(event: KeyboardEvent): boolean {
+  if (event.key === "ArrowUp") {
+    selectedIndex = (selectedIndex + flatItems.length - 1) % flatItems.length;
+    return true;
+  }
+
+  if (event.key === "ArrowDown") {
+    selectedIndex = (selectedIndex + 1) % flatItems.length;
+    return true;
+  }
+
+  if (event.key === "Enter") {
+    selectItem(selectedIndex);
+    return true;
+  }
+
+  if (event.key === "Tab") {
+    event.preventDefault();
+    tabHandler();
+    return true;
+  }
+
+  return false;
+}
+</script>
+
+<div class="vizel-slash-menu {className ?? ''}" data-vizel-slash-menu>
+  {#if flatItems.length === 0}
+    {#if renderEmpty}
+      {@render renderEmpty()}
+    {:else}
+      <VizelSlashMenuEmpty />
+    {/if}
+  {:else}
+    {#each groups as group, groupIndex (group.name || groupIndex)}
+      {#if group.name}
+        <!-- Group with header -->
+        <div class="vizel-slash-menu-group" data-vizel-slash-menu-group>
+          <div class="vizel-slash-menu-group-header">{group.name}</div>
+          {#each group.items as item, itemIndex (item.title)}
+            {@const globalIdx = getGlobalIndex(groupIndex, itemIndex)}
+            <div bind:this={itemRefs[globalIdx]}>
+              {#if renderItem}
+                {@render renderItem({
+                  item,
+                  isSelected: globalIdx === selectedIndex,
+                  onclick: () => selectItem(globalIdx),
+                })}
+              {:else}
+                <VizelSlashMenuItem
+                  {item}
+                  isSelected={globalIdx === selectedIndex}
+                  onclick={() => selectItem(globalIdx)}
+                />
+              {/if}
+            </div>
+          {/each}
+        </div>
+      {:else}
+        <!-- Items without group header -->
+        {#each group.items as item, itemIndex (item.title)}
+          {@const globalIdx = getGlobalIndex(groupIndex, itemIndex)}
+          <div bind:this={itemRefs[globalIdx]}>
+            {#if renderItem}
+              {@render renderItem({
+                item,
+                isSelected: globalIdx === selectedIndex,
+                onclick: () => selectItem(globalIdx),
+              })}
+            {:else}
+              <VizelSlashMenuItem
+                {item}
+                isSelected={globalIdx === selectedIndex}
+                onclick={() => selectItem(globalIdx)}
+              />
+            {/if}
+          </div>
+        {/each}
+      {/if}
+    {/each}
+  {/if}
+</div>

package/dist/components/VizelSlashMenu.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { VizelSlashCommandItem } from "@vizel/core";
+import type { Snippet } from "svelte";
+export interface VizelSlashMenuRef {
+    onKeyDown: (event: KeyboardEvent) => boolean;
+}
+export interface VizelSlashMenuProps {
+    /** The list of slash command items */
+    items: VizelSlashCommandItem[];
+    /** Custom class name */
+    class?: string;
+    /** Command handler */
+    oncommand?: (item: VizelSlashCommandItem) => void;
+    /** Whether to show items grouped by category (default: true when not searching) */
+    showGroups?: boolean;
+    /** Custom group order */
+    groupOrder?: string[];
+    /** Custom item renderer */
+    renderItem?: Snippet<[{
+        item: VizelSlashCommandItem;
+        isSelected: boolean;
+        onclick: () => void;
+    }]>;
+    /** Custom empty state renderer */
+    renderEmpty?: Snippet;
+}
+declare const VizelSlashMenu: import("svelte").Component<VizelSlashMenuProps, {
+    onKeyDown: (event: KeyboardEvent) => boolean;
+}, "">;
+type VizelSlashMenu = ReturnType<typeof VizelSlashMenu>;
+export default VizelSlashMenu;
+//# sourceMappingURL=VizelSlashMenu.svelte.d.ts.map

package/dist/components/VizelSlashMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelSlashMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelSlashMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;CAC9C;AAED,MAAM,WAAW,mBAAmB;IAClC,sCAAsC;IACtC,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,IAAI,EAAE,qBAAqB,CAAC;QAAC,UAAU,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CAAC;IAClG,kCAAkC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA8LD,QAAA,MAAM,cAAc;uBA/EO,aAAa,KAAG,OAAO;MA+EU,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}