@vizel/svelte 0.0.1-alpha.6 → 1.0.0

package/README.md

@@ -5,7 +5,7 @@ Svelte 5 components for Vizel block-based Markdown editor.
 ## Installation
 
 ```bash
-npm install @vizel/svelte @vizel/core
+npm install @vizel/svelte
 ```
 
 ## Requirements

package/dist/components/Vizel.svelte

@@ -44,6 +44,10 @@ export interface VizelProps {
   features?: VizelFeatureOptions;
   /** Custom class name for the editor container */
   class?: string;
+  /** Whether to show the toolbar (default: false) */
+  showToolbar?: boolean;
+  /** Custom toolbar content */
+  toolbar?: Snippet<[{ editor: Editor }]>;
   /** Whether to show the bubble menu (default: true) */
   showBubbleMenu?: boolean;
   /** Enable embed option in bubble menu link editor (requires Embed extension) */
@@ -75,11 +79,14 @@ import { getVizelMarkdown, setVizelMarkdown } from "@vizel/core";
 import { createVizelEditor } from "../runes/createVizelEditor.svelte.ts";
 import VizelBubbleMenu from "./VizelBubbleMenu.svelte";
 import VizelEditor from "./VizelEditor.svelte";
+import VizelToolbar from "./VizelToolbar.svelte";
 
 // Use $props() without destructuring to avoid state_referenced_locally warnings
 // Props are intentionally captured once at editor creation time
 let {
   class: className,
+  showToolbar = false,
+  toolbar,
   showBubbleMenu = true,
   enableEmbed = false,
   bubbleMenu,
@@ -144,6 +151,15 @@ $effect(() => {
 </script>
 
 <div class="vizel-root {className ?? ''}" data-vizel-root>
+  {#if showToolbar && editor && toolbar}
+    <VizelToolbar {editor}>
+      {#snippet children({ editor: e })}
+        {@render toolbar({ editor: e })}
+      {/snippet}
+    </VizelToolbar>
+  {:else if showToolbar && editor}
+    <VizelToolbar {editor} />
+  {/if}
   <VizelEditor {editor} />
   {#if showBubbleMenu && editor && bubbleMenu}
     <VizelBubbleMenu {editor} {enableEmbed}>

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

@@ -41,6 +41,12 @@ export interface VizelProps {
     features?: VizelFeatureOptions;
     /** Custom class name for the editor container */
     class?: string;
+    /** Whether to show the toolbar (default: false) */
+    showToolbar?: boolean;
+    /** Custom toolbar content */
+    toolbar?: Snippet<[{
+        editor: Editor;
+    }]>;
     /** Whether to show the bubble menu (default: true) */
     showBubbleMenu?: boolean;
     /** Enable embed option in bubble menu link editor (requires Embed extension) */

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

@@ -1 +1 @@
-{"version":3,"file":"Vizel.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Vizel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAC5E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,UAAU;IACzB,qCAAqC;IACrC,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IACvD,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gFAAgF;IAChF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC3C,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC,CAAC;IAChD,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/C,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/C,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACxD,sCAAsC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C,uCAAuC;IACvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9C;AAyGD,QAAA,MAAM,KAAK,wDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Vizel.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Vizel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAC5E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,UAAU;IACzB,qCAAqC;IACrC,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IACvD,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACxC,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gFAAgF;IAChF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC3C,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC,CAAC;IAChD,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/C,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/C,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACxD,sCAAsC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C,uCAAuC;IACvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9C;AAsHD,QAAA,MAAM,KAAK,wDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/VizelBubbleMenuDefault.svelte

@@ -15,6 +15,7 @@ export interface VizelBubbleMenuDefaultProps {
 import { createVizelState } from "../runes/createVizelState.svelte.ts";
 import VizelBubbleMenuButton from "./VizelBubbleMenuButton.svelte";
 import VizelBubbleMenuColorPicker from "./VizelBubbleMenuColorPicker.svelte";
+import VizelBubbleMenuDivider from "./VizelBubbleMenuDivider.svelte";
 import VizelLinkEditor from "./VizelLinkEditor.svelte";
 import VizelIcon from "./VizelIcon.svelte";
 import VizelNodeSelector from "./VizelNodeSelector.svelte";
@@ -57,6 +58,7 @@ const isLinkActive = $derived.by(() => {
 {:else}
   <div class="vizel-bubble-menu-toolbar {className ?? ''}">
     <VizelNodeSelector {editor} />
+    <VizelBubbleMenuDivider />
     <VizelBubbleMenuButton
       action="bold"
       isActive={isBoldActive}
@@ -97,6 +99,7 @@ const isLinkActive = $derived.by(() => {
     >
       <VizelIcon name="code" />
     </VizelBubbleMenuButton>
+    <VizelBubbleMenuDivider />
     <VizelBubbleMenuButton
       action="link"
       isActive={isLinkActive}
@@ -105,6 +108,7 @@ const isLinkActive = $derived.by(() => {
     >
       <VizelIcon name="link" />
     </VizelBubbleMenuButton>
+    <VizelBubbleMenuDivider />
     <VizelBubbleMenuColorPicker {editor} type="textColor" />
     <VizelBubbleMenuColorPicker {editor} type="highlight" />
   </div>

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

@@ -1 +1 @@
-{"version":3,"file":"VizelBubbleMenuDefault.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelBubbleMenuDefault.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,WAAW,2BAA2B;IAC1C,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAmFD,QAAA,MAAM,sBAAsB,iEAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"VizelBubbleMenuDefault.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelBubbleMenuDefault.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,WAAW,2BAA2B;IAC1C,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAwFD,QAAA,MAAM,sBAAsB,iEAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/components/VizelToolbar.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+import type { Editor } from "@vizel/core";
+import type { Snippet } from "svelte";
+
+export interface VizelToolbarProps {
+  /** Editor instance. Falls back to context if not provided. */
+  editor?: Editor | null;
+  /** Custom class name */
+  class?: string;
+  /** Whether to show the default toolbar (default: true). Set to false when using custom children. */
+  showDefaultToolbar?: boolean;
+  /** Custom toolbar content */
+  children?: Snippet<[{ editor: Editor }]>;
+}
+</script>
+
+<script lang="ts">
+import { getVizelContextSafe } from "./VizelContext.ts";
+import VizelToolbarDefault from "./VizelToolbarDefault.svelte";
+
+let {
+  editor: editorProp,
+  class: className,
+  showDefaultToolbar = true,
+  children,
+}: VizelToolbarProps = $props();
+
+const contextEditor = getVizelContextSafe();
+const editor = $derived(editorProp ?? contextEditor?.() ?? null);
+</script>
+
+{#if editor}
+  <div class="vizel-toolbar {className ?? ''}" role="toolbar" aria-label="Formatting">
+    {#if children}
+      {@render children({ editor })}
+    {:else if showDefaultToolbar}
+      <VizelToolbarDefault {editor} />
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,18 @@
+import type { Editor } from "@vizel/core";
+import type { Snippet } from "svelte";
+export interface VizelToolbarProps {
+    /** Editor instance. Falls back to context if not provided. */
+    editor?: Editor | null;
+    /** Custom class name */
+    class?: string;
+    /** Whether to show the default toolbar (default: true). Set to false when using custom children. */
+    showDefaultToolbar?: boolean;
+    /** Custom toolbar content */
+    children?: Snippet<[{
+        editor: Editor;
+    }]>;
+}
+declare const VizelToolbar: import("svelte").Component<VizelToolbarProps, {}, "">;
+type VizelToolbar = ReturnType<typeof VizelToolbar>;
+export default VizelToolbar;
+//# sourceMappingURL=VizelToolbar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VizelToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelToolbar.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,iBAAiB;IAChC,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oGAAoG;IACpG,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;CAC1C;AAmCD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/VizelToolbarButton.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+import type { Snippet } from "svelte";
+
+export interface VizelToolbarButtonProps {
+  /** Whether the button is in active state */
+  isActive?: boolean;
+  /** Whether the button is disabled */
+  disabled?: boolean;
+  /** Tooltip title */
+  title?: string;
+  /** Custom class name */
+  class?: string;
+  /** Button content */
+  children: Snippet;
+  /** Click handler */
+  onclick?: () => void;
+  /** Action identifier for testing */
+  action?: string;
+}
+</script>
+
+<script lang="ts">
+let {
+  isActive = false,
+  disabled = false,
+  title,
+  class: className,
+  children,
+  onclick,
+  action,
+}: VizelToolbarButtonProps = $props();
+</script>
+
+<button
+  type="button"
+  {disabled}
+  aria-pressed={isActive}
+  class="vizel-toolbar-button {isActive ? 'is-active' : ''} {className ?? ''}"
+  {title}
+  data-active={isActive || undefined}
+  data-action={action}
+  {onclick}
+>
+  {@render children()}
+</button>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+export interface VizelToolbarButtonProps {
+    /** Whether the button is in active state */
+    isActive?: boolean;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Tooltip title */
+    title?: string;
+    /** Custom class name */
+    class?: string;
+    /** Button content */
+    children: Snippet;
+    /** Click handler */
+    onclick?: () => void;
+    /** Action identifier for testing */
+    action?: string;
+}
+declare const VizelToolbarButton: import("svelte").Component<VizelToolbarButtonProps, {}, "">;
+type VizelToolbarButton = ReturnType<typeof VizelToolbarButton>;
+export default VizelToolbarButton;
+//# sourceMappingURL=VizelToolbarButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VizelToolbarButton.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelToolbarButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,uBAAuB;IACtC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAsBD,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/VizelToolbarDefault.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" module>
+import type { Editor, VizelToolbarAction } from "@vizel/core";
+
+export interface VizelToolbarDefaultProps {
+  /** The editor instance */
+  editor: Editor;
+  /** Custom class name */
+  class?: string;
+  /** Custom toolbar actions (defaults to vizelDefaultToolbarActions) */
+  actions?: VizelToolbarAction[];
+}
+</script>
+
+<script lang="ts">
+import {
+  groupVizelToolbarActions,
+  vizelDefaultToolbarActions,
+} from "@vizel/core";
+import { createVizelState } from "../runes/createVizelState.svelte.ts";
+import VizelIcon from "./VizelIcon.svelte";
+import VizelToolbarButton from "./VizelToolbarButton.svelte";
+import VizelToolbarDivider from "./VizelToolbarDivider.svelte";
+
+let {
+  editor,
+  class: className,
+  actions = vizelDefaultToolbarActions,
+}: VizelToolbarDefaultProps = $props();
+
+// Subscribe to editor state changes to update active/enabled states
+const editorState = createVizelState(() => editor);
+
+const groups = $derived.by(() => {
+  void editorState.current;
+  return groupVizelToolbarActions(actions);
+});
+</script>
+
+<div class="vizel-toolbar-content {className ?? ''}" data-vizel-toolbar>
+  {#each groups as group, groupIndex (group[0]?.group ?? groupIndex)}
+    {#if groupIndex > 0}
+      <VizelToolbarDivider />
+    {/if}
+    {#each group as action (action.id)}
+      <VizelToolbarButton
+        action={action.id}
+        isActive={action.isActive(editor)}
+        disabled={!action.isEnabled(editor)}
+        title={action.shortcut ? `${action.label} (${action.shortcut})` : action.label}
+        onclick={() => action.run(editor)}
+      >
+        <VizelIcon name={action.icon} />
+      </VizelToolbarButton>
+    {/each}
+  {/each}
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"VizelToolbarDefault.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelToolbarDefault.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE9D,MAAM,WAAW,wBAAwB;IACvC,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAChC;AAmDD,QAAA,MAAM,mBAAmB,8DAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/VizelToolbarDivider.svelte

@@ -0,0 +1,12 @@
+<script lang="ts" module>
+export interface VizelToolbarDividerProps {
+  /** Custom class name */
+  class?: string;
+}
+</script>
+
+<script lang="ts">
+let { class: className }: VizelToolbarDividerProps = $props();
+</script>
+
+<span class="vizel-toolbar-divider {className ?? ''}"></span>

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

@@ -0,0 +1,8 @@
+export interface VizelToolbarDividerProps {
+    /** Custom class name */
+    class?: string;
+}
+declare const VizelToolbarDivider: import("svelte").Component<VizelToolbarDividerProps, {}, "">;
+type VizelToolbarDivider = ReturnType<typeof VizelToolbarDivider>;
+export default VizelToolbarDivider;
+//# sourceMappingURL=VizelToolbarDivider.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VizelToolbarDivider.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelToolbarDivider.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,wBAAwB;IACvC,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAYD,QAAA,MAAM,mBAAmB,8DAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/index.d.ts

@@ -20,4 +20,8 @@ export { default as VizelSlashMenu, type VizelSlashMenuProps, type VizelSlashMen
 export { default as VizelSlashMenuEmpty, type VizelSlashMenuEmptyProps, } from "./VizelSlashMenuEmpty.svelte";
 export { default as VizelSlashMenuItem, type VizelSlashMenuItemProps, } from "./VizelSlashMenuItem.svelte";
 export { default as VizelThemeProvider, type VizelThemeProviderProps, } from "./VizelThemeProvider.svelte";
+export { default as VizelToolbar, type VizelToolbarProps, } from "./VizelToolbar.svelte";
+export { default as VizelToolbarButton, type VizelToolbarButtonProps, } from "./VizelToolbarButton.svelte";
+export { default as VizelToolbarDefault, type VizelToolbarDefaultProps, } from "./VizelToolbarDefault.svelte";
+export { default as VizelToolbarDivider, type VizelToolbarDividerProps, } from "./VizelToolbarDivider.svelte";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAIlF,OAAO,EACL,OAAO,IAAI,eAAe,EAC1B,KAAK,oBAAoB,GAC1B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,OAAO,IAAI,qBAAqB,EAChC,KAAK,0BAA0B,GAChC,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,OAAO,IAAI,0BAA0B,EACrC,KAAK,+BAA+B,GACrC,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,OAAO,IAAI,sBAAsB,EACjC,KAAK,2BAA2B,GACjC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,OAAO,IAAI,sBAAsB,EACjC,KAAK,2BAA2B,GACjC,MAAM,iCAAiC,CAAC;AAIzC,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,KAAK,qBAAqB,GAC3B,MAAM,2BAA2B,CAAC;AAInC,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIzE,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,KAAK,gBAAgB,EACrB,KAAK,YAAY,GAClB,MAAM,sBAAsB,CAAC;AAI9B,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,KAAK,mBAAmB,GACzB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EACL,OAAO,IAAI,iBAAiB,EAC5B,KAAK,sBAAsB,GAC5B,MAAM,4BAA4B,CAAC;AAIpC,OAAO,EACL,OAAO,IAAI,eAAe,EAC1B,KAAK,oBAAoB,GAC1B,MAAM,0BAA0B,CAAC;AAIlC,OAAO,EACL,OAAO,IAAI,iBAAiB,EAC5B,KAAK,sBAAsB,GAC5B,MAAM,4BAA4B,CAAC;AAIpC,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,KAAK,gBAAgB,GACtB,MAAM,sBAAsB,CAAC;AAI9B,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,KAAK,kBAAkB,GACxB,MAAM,wBAAwB,CAAC;AAIhC,OAAO,EACL,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,6BAA6B,CAAC;AAIrC,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,GACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,OAAO,IAAI,mBAAmB,EAC9B,KAAK,wBAAwB,GAC9B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,6BAA6B,CAAC;AAIrC,OAAO,EACL,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAIlF,OAAO,EACL,OAAO,IAAI,eAAe,EAC1B,KAAK,oBAAoB,GAC1B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,OAAO,IAAI,qBAAqB,EAChC,KAAK,0BAA0B,GAChC,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,OAAO,IAAI,0BAA0B,EACrC,KAAK,+BAA+B,GACrC,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,OAAO,IAAI,sBAAsB,EACjC,KAAK,2BAA2B,GACjC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,OAAO,IAAI,sBAAsB,EACjC,KAAK,2BAA2B,GACjC,MAAM,iCAAiC,CAAC;AAIzC,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,KAAK,qBAAqB,GAC3B,MAAM,2BAA2B,CAAC;AAInC,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIzE,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,KAAK,gBAAgB,EACrB,KAAK,YAAY,GAClB,MAAM,sBAAsB,CAAC;AAI9B,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,KAAK,mBAAmB,GACzB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EACL,OAAO,IAAI,iBAAiB,EAC5B,KAAK,sBAAsB,GAC5B,MAAM,4BAA4B,CAAC;AAIpC,OAAO,EACL,OAAO,IAAI,eAAe,EAC1B,KAAK,oBAAoB,GAC1B,MAAM,0BAA0B,CAAC;AAIlC,OAAO,EACL,OAAO,IAAI,iBAAiB,EAC5B,KAAK,sBAAsB,GAC5B,MAAM,4BAA4B,CAAC;AAIpC,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,KAAK,gBAAgB,GACtB,MAAM,sBAAsB,CAAC;AAI9B,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,KAAK,kBAAkB,GACxB,MAAM,wBAAwB,CAAC;AAIhC,OAAO,EACL,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,6BAA6B,CAAC;AAIrC,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,GACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,OAAO,IAAI,mBAAmB,EAC9B,KAAK,wBAAwB,GAC9B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,6BAA6B,CAAC;AAIrC,OAAO,EACL,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,6BAA6B,CAAC;AAIrC,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,KAAK,iBAAiB,GACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,OAAO,IAAI,mBAAmB,EAC9B,KAAK,wBAAwB,GAC9B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,OAAO,IAAI,mBAAmB,EAC9B,KAAK,wBAAwB,GAC9B,MAAM,8BAA8B,CAAC"}

package/dist/components/index.js

@@ -62,3 +62,10 @@ export { default as VizelSlashMenuItem, } from "./VizelSlashMenuItem.svelte";
 // Vizel ThemeProvider component
 // ============================================================================
 export { default as VizelThemeProvider, } from "./VizelThemeProvider.svelte";
+// ============================================================================
+// Vizel Toolbar components
+// ============================================================================
+export { default as VizelToolbar, } from "./VizelToolbar.svelte";
+export { default as VizelToolbarButton, } from "./VizelToolbarButton.svelte";
+export { default as VizelToolbarDefault, } from "./VizelToolbarDefault.svelte";
+export { default as VizelToolbarDivider, } from "./VizelToolbarDivider.svelte";

package/dist/index.d.ts

@@ -5,6 +5,6 @@
  */
 import "./tiptap-extensions.ts";
 import "./iconRenderer.ts";
-export { getVizelContext, getVizelContextSafe, getVizelIconContext, setVizelIcons, Vizel, VizelBubbleMenu, VizelBubbleMenuButton, type VizelBubbleMenuButtonProps, VizelBubbleMenuColorPicker, type VizelBubbleMenuColorPickerProps, VizelBubbleMenuDefault, type VizelBubbleMenuDefaultProps, VizelBubbleMenuDivider, type VizelBubbleMenuDividerProps, type VizelBubbleMenuProps, VizelColorPicker, type VizelColorPickerProps, VizelEditor, type VizelEditorProps, VizelEmbedView, type VizelEmbedViewProps, type VizelExposed, VizelIcon, type VizelIconProps, VizelIconProvider, type VizelIconProviderProps, VizelLinkEditor, type VizelLinkEditorProps, VizelNodeSelector, type VizelNodeSelectorProps, VizelPortal, type VizelPortalProps, type VizelProps, VizelProvider, type VizelProviderProps, type VizelRef, VizelSaveIndicator, type VizelSaveIndicatorProps, VizelSlashMenu, VizelSlashMenuEmpty, type VizelSlashMenuEmptyProps, VizelSlashMenuItem, type VizelSlashMenuItemProps, type VizelSlashMenuProps, type VizelSlashMenuRef, VizelThemeProvider, type VizelThemeProviderProps, } from "./components/index.ts";
+export { getVizelContext, getVizelContextSafe, getVizelIconContext, setVizelIcons, Vizel, VizelBubbleMenu, VizelBubbleMenuButton, type VizelBubbleMenuButtonProps, VizelBubbleMenuColorPicker, type VizelBubbleMenuColorPickerProps, VizelBubbleMenuDefault, type VizelBubbleMenuDefaultProps, VizelBubbleMenuDivider, type VizelBubbleMenuDividerProps, type VizelBubbleMenuProps, VizelColorPicker, type VizelColorPickerProps, VizelEditor, type VizelEditorProps, VizelEmbedView, type VizelEmbedViewProps, type VizelExposed, VizelIcon, type VizelIconProps, VizelIconProvider, type VizelIconProviderProps, VizelLinkEditor, type VizelLinkEditorProps, VizelNodeSelector, type VizelNodeSelectorProps, VizelPortal, type VizelPortalProps, type VizelProps, VizelProvider, type VizelProviderProps, type VizelRef, VizelSaveIndicator, type VizelSaveIndicatorProps, VizelSlashMenu, VizelSlashMenuEmpty, type VizelSlashMenuEmptyProps, VizelSlashMenuItem, type VizelSlashMenuItemProps, type VizelSlashMenuProps, type VizelSlashMenuRef, VizelThemeProvider, type VizelThemeProviderProps, VizelToolbar, VizelToolbarButton, type VizelToolbarButtonProps, VizelToolbarDefault, type VizelToolbarDefaultProps, VizelToolbarDivider, type VizelToolbarDividerProps, type VizelToolbarProps, } from "./components/index.ts";
 export { type CreateVizelAutoSaveResult, type CreateVizelEditorOptions, type CreateVizelMarkdownOptions, type CreateVizelMarkdownResult, createVizelAutoSave, createVizelEditor, createVizelEditorState, createVizelMarkdown, createVizelSlashMenuRenderer, createVizelState, getVizelTheme, getVizelThemeSafe, type VizelSlashMenuRendererOptions, } from "./runes/index.ts";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,wBAAwB,CAAC;AAGhC,OAAO,mBAAmB,CAAC;AAG3B,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,mBAAmB,EACnB,aAAa,EAEb,KAAK,EAEL,eAAe,EACf,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,0BAA0B,EAC1B,KAAK,+BAA+B,EACpC,sBAAsB,EACtB,KAAK,2BAA2B,EAChC,sBAAsB,EACtB,KAAK,2BAA2B,EAChC,KAAK,oBAAoB,EAEzB,gBAAgB,EAChB,KAAK,qBAAqB,EAE1B,WAAW,EACX,KAAK,gBAAgB,EAErB,cAAc,EACd,KAAK,mBAAmB,EACxB,KAAK,YAAY,EAEjB,SAAS,EACT,KAAK,cAAc,EACnB,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,eAAe,EACf,KAAK,oBAAoB,EAEzB,iBAAiB,EACjB,KAAK,sBAAsB,EAE3B,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,QAAQ,EAEb,kBAAkB,EAClB,KAAK,uBAAuB,EAE5B,cAAc,EACd,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EACL,KAAK,yBAAyB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC9B,mBAAmB,EACnB,iBAAiB,EACjB,sBAAsB,EACtB,mBAAmB,EACnB,4BAA4B,EAC5B,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,KAAK,6BAA6B,GACnC,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,wBAAwB,CAAC;AAGhC,OAAO,mBAAmB,CAAC;AAG3B,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,mBAAmB,EACnB,aAAa,EAEb,KAAK,EAEL,eAAe,EACf,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,0BAA0B,EAC1B,KAAK,+BAA+B,EACpC,sBAAsB,EACtB,KAAK,2BAA2B,EAChC,sBAAsB,EACtB,KAAK,2BAA2B,EAChC,KAAK,oBAAoB,EAEzB,gBAAgB,EAChB,KAAK,qBAAqB,EAE1B,WAAW,EACX,KAAK,gBAAgB,EAErB,cAAc,EACd,KAAK,mBAAmB,EACxB,KAAK,YAAY,EAEjB,SAAS,EACT,KAAK,cAAc,EACnB,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,eAAe,EACf,KAAK,oBAAoB,EAEzB,iBAAiB,EACjB,KAAK,sBAAsB,EAE3B,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,QAAQ,EAEb,kBAAkB,EAClB,KAAK,uBAAuB,EAE5B,cAAc,EACd,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,kBAAkB,EAClB,KAAK,uBAAuB,EAE5B,YAAY,EACZ,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,iBAAiB,GACvB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EACL,KAAK,yBAAyB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC9B,mBAAmB,EACnB,iBAAiB,EACjB,sBAAsB,EACtB,mBAAmB,EACnB,4BAA4B,EAC5B,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,KAAK,6BAA6B,GACnC,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -28,6 +28,8 @@ VizelPortal, VizelProvider,
 // SaveIndicator
 VizelSaveIndicator, 
 // SlashMenu
-VizelSlashMenu, VizelSlashMenuEmpty, VizelSlashMenuItem, VizelThemeProvider, } from "./components/index.ts";
+VizelSlashMenu, VizelSlashMenuEmpty, VizelSlashMenuItem, VizelThemeProvider, 
+// Toolbar
+VizelToolbar, VizelToolbarButton, VizelToolbarDefault, VizelToolbarDivider, } from "./components/index.ts";
 // Runes (Svelte 5 reactive state)
 export { createVizelAutoSave, createVizelEditor, createVizelEditorState, createVizelMarkdown, createVizelSlashMenuRenderer, createVizelState, getVizelTheme, getVizelThemeSafe, } from "./runes/index.ts";

package/dist/runes/createVizelEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createVizelEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/runes/createVizelEditor.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,MAAM,EAEX,KAAK,wBAAwB,EAC9B,MAAM,aAAa,CAAC;AAGrB;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG,wBAAwB,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,GAAE,wBAA6B;;EAoCvE"}
+{"version":3,"file":"createVizelEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/runes/createVizelEditor.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,MAAM,EAEX,KAAK,wBAAwB,EAC9B,MAAM,aAAa,CAAC;AAGrB;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG,wBAAwB,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,GAAE,wBAA6B;;EAiDvE"}

package/dist/runes/createVizelEditor.svelte.js

@@ -38,23 +38,34 @@ export function createVizelEditor(options = {}) {
     // Store image upload options for event handler
     const imageOptions = typeof features?.image === "object" ? features.image : {};
     let editor = $state(null);
-    // Create editor on mount and cleanup on destroy
+    // Create editor on mount and cleanup on destroy (async - optional deps loaded dynamically)
     $effect(() => {
-        const { editor: instance } = createVizelEditorInstance({
-            ...editorOptions,
-            ...(features !== undefined && { features }),
-            extensions: additionalExtensions,
-            createSlashMenuRenderer: createVizelSlashMenuRenderer,
-        });
-        editor = instance;
-        // Handle vizel:upload-image custom event from slash command
-        const cleanupHandler = registerVizelUploadEventHandler({
-            getEditor: () => editor,
-            getImageOptions: () => imageOptions,
-        });
+        let isMounted = true;
+        let instance = null;
+        let cleanupHandler = null;
+        void (async () => {
+            const result = await createVizelEditorInstance({
+                ...editorOptions,
+                ...(features !== undefined && { features }),
+                extensions: additionalExtensions,
+                createSlashMenuRenderer: createVizelSlashMenuRenderer,
+            });
+            if (!isMounted) {
+                result.editor.destroy();
+                return;
+            }
+            instance = result.editor;
+            editor = instance;
+            // Handle vizel:upload-image custom event from slash command
+            cleanupHandler = registerVizelUploadEventHandler({
+                getEditor: () => editor,
+                getImageOptions: () => imageOptions,
+            });
+        })();
         return () => {
-            cleanupHandler();
-            editor?.destroy();
+            isMounted = false;
+            cleanupHandler?.();
+            instance?.destroy();
         };
     });
     return {

package/package.json

@@ -1,12 +1,32 @@
 {
   "name": "@vizel/svelte",
-  "version": "0.0.1-alpha.6",
+  "version": "1.0.0",
   "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/seijikohara/vizel",
     "directory": "packages/svelte"
   },
+  "description": "Svelte 5 components and runes for Vizel block-based Markdown editor",
+  "license": "MIT",
+  "author": "Seiji Kohara",
+  "homepage": "https://seijikohara.github.io/vizel/",
+  "bugs": {
+    "url": "https://github.com/seijikohara/vizel/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "vizel",
+    "tiptap",
+    "editor",
+    "markdown",
+    "svelte",
+    "wysiwyg",
+    "rich-text",
+    "block-editor"
+  ],
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "svelte": "./src/index.ts",
@@ -37,23 +57,23 @@
     "typecheck": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@iconify/svelte": "^5",
-    "@vizel/core": "^0.0.1-alpha.6"
+    "@iconify/svelte": "^5.2.1",
+    "@vizel/core": "^1.0.0"
   },
   "peerDependencies": {
     "svelte": "^5"
   },
   "devDependencies": {
-    "@sveltejs/package": "^2",
-    "@sveltejs/vite-plugin-svelte": "^6",
-    "@tiptap/extension-bold": "^3",
-    "@tiptap/extension-code": "^3",
-    "@tiptap/extension-color": "^3",
-    "@tiptap/extension-highlight": "^3",
-    "@tiptap/extension-italic": "^3",
-    "@tiptap/extension-strike": "^3",
-    "@tiptap/extension-text-style": "^3",
-    "@tiptap/extension-underline": "^3",
-    "svelte-check": "^4"
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@tiptap/extension-bold": "^3.18.0",
+    "@tiptap/extension-code": "^3.18.0",
+    "@tiptap/extension-color": "^3.18.0",
+    "@tiptap/extension-highlight": "^3.18.0",
+    "@tiptap/extension-italic": "^3.18.0",
+    "@tiptap/extension-strike": "^3.18.0",
+    "@tiptap/extension-text-style": "^3.18.0",
+    "@tiptap/extension-underline": "^3.18.0",
+    "svelte-check": "^4.3.5"
   }
 }