@vizel/react 0.0.1-alpha.6 → 1.0.0

package/README.md

@@ -5,7 +5,7 @@ React components for Vizel block-based Markdown editor.
 ## Installation
 
 ```bash
-npm install @vizel/react @vizel/core
+npm install @vizel/react
 ```
 
 ## Requirements
@@ -37,8 +37,8 @@ function App() {
 
   return (
     <>
-      <VizelEditor editor={editor.current} />
-      <VizelBubbleMenu editor={editor.current} />
+      <VizelEditor editor={editor} />
+      <VizelBubbleMenu editor={editor} />
     </>
   );
 }
@@ -51,14 +51,14 @@ import { useVizelEditor, useVizelMarkdown } from "@vizel/react";
 
 function App() {
   const editor = useVizelEditor();
-  const { getMarkdown, setMarkdown } = useVizelMarkdown(() => editor.current);
+  const { getMarkdown, setMarkdown } = useVizelMarkdown(() => editor);
 
   const handleExport = () => {
     const markdown = getMarkdown();
     console.log(markdown);
   };
 
-  return <VizelEditor editor={editor.current} />;
+  return <VizelEditor editor={editor} />;
 }
 ```
 

package/dist/index.d.ts

@@ -24,6 +24,7 @@ import { VizelSlashCommandItem } from '@vizel/core';
 import { VizelSlashMenuRendererOptions } from '@vizel/core';
 import { VizelThemeProviderOptions } from '@vizel/core';
 import { VizelThemeState } from '@vizel/core';
+import { VizelToolbarAction } from '@vizel/core';
 
 /**
  * Creates a suggestion render configuration for the SlashCommand extension.
@@ -333,7 +334,7 @@ export declare function useVizelThemeSafe(): VizelThemeState | null;
  * }
  * ```
  */
-export declare function Vizel({ ref, initialContent, initialMarkdown, transformDiagramsOnImport, placeholder, editable, autofocus, features, className, showBubbleMenu, enableEmbed, bubbleMenuContent, children, onUpdate, onCreate, onDestroy, onSelectionUpdate, onFocus, onBlur, }: VizelProps): ReactNode;
+export declare function Vizel({ ref, initialContent, initialMarkdown, transformDiagramsOnImport, placeholder, editable, autofocus, features, className, showToolbar, toolbarContent, showBubbleMenu, enableEmbed, bubbleMenuContent, children, onUpdate, onCreate, onDestroy, onSelectionUpdate, onFocus, onBlur, }: VizelProps): ReactNode;
 
 /**
  * A floating menu that appears when text is selected.
@@ -766,6 +767,10 @@ export declare interface VizelProps {
     features?: VizelFeatureOptions;
     /** Custom class name for the editor container */
     className?: string;
+    /** Whether to show the toolbar (default: false) */
+    showToolbar?: boolean;
+    /** Custom toolbar content */
+    toolbarContent?: ReactNode;
     /** Whether to show the bubble menu (default: true) */
     showBubbleMenu?: boolean;
     /** Enable embed option in bubble menu link editor (requires Embed extension) */
@@ -962,4 +967,105 @@ export declare interface VizelThemeProviderProps extends VizelThemeProviderOptio
     children: ReactNode;
 }
 
+/**
+ * Fixed toolbar component for the Vizel editor.
+ * Displays formatting buttons above the editor content area.
+ *
+ * @example
+ * ```tsx
+ * // Default toolbar with all formatting buttons
+ * <VizelToolbar editor={editor} />
+ *
+ * // Custom toolbar content
+ * <VizelToolbar editor={editor}>
+ *   <VizelToolbarButton onClick={() => editor.chain().focus().toggleBold().run()}>
+ *     <strong>B</strong>
+ *   </VizelToolbarButton>
+ * </VizelToolbar>
+ * ```
+ */
+export declare function VizelToolbar({ editor: editorProp, className, showDefaultToolbar, children, }: VizelToolbarProps): JSX.Element | null;
+
+/**
+ * A button component for use in the VizelToolbar.
+ *
+ * @example
+ * ```tsx
+ * <VizelToolbarButton
+ *   onClick={() => editor.chain().focus().toggleBold().run()}
+ *   isActive={editor.isActive("bold")}
+ *   title="Bold (Cmd+B)"
+ * >
+ *   <VizelIcon name="bold" />
+ * </VizelToolbarButton>
+ * ```
+ */
+export declare function VizelToolbarButton({ onClick, isActive, disabled, children, title, className, action, }: VizelToolbarButtonProps): JSX.Element;
+
+export declare interface VizelToolbarButtonProps {
+    /** Click handler */
+    onClick?: () => void;
+    /** Whether the action is currently active */
+    isActive?: boolean;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Button content (typically an icon) */
+    children: ReactNode;
+    /** Tooltip text */
+    title?: string;
+    /** Additional CSS class name */
+    className?: string;
+    /** Action identifier for testing */
+    action?: string;
+}
+
+/**
+ * The default toolbar content for VizelToolbar.
+ * Provides formatting buttons grouped by category with dividers between groups.
+ *
+ * @example
+ * ```tsx
+ * <VizelToolbar>
+ *   <VizelToolbarDefault editor={editor} />
+ * </VizelToolbar>
+ * ```
+ */
+export declare function VizelToolbarDefault({ editor, className, actions, }: VizelToolbarDefaultProps): JSX.Element;
+
+export declare interface VizelToolbarDefaultProps {
+    editor: Editor;
+    className?: string;
+    /** Custom toolbar actions (defaults to vizelDefaultToolbarActions) */
+    actions?: VizelToolbarAction[];
+}
+
+/**
+ * A divider component for separating groups of buttons in the VizelToolbar.
+ *
+ * @example
+ * ```tsx
+ * <VizelToolbar>
+ *   <VizelToolbarButton>B</VizelToolbarButton>
+ *   <VizelToolbarDivider />
+ *   <VizelToolbarButton>H1</VizelToolbarButton>
+ * </VizelToolbar>
+ * ```
+ */
+export declare function VizelToolbarDivider({ className }: VizelToolbarDividerProps): JSX.Element;
+
+export declare interface VizelToolbarDividerProps {
+    className?: string;
+}
+
+export declare interface VizelToolbarProps {
+    /** Editor instance. Falls back to context if not provided. */
+    editor?: Editor | null;
+    /** Additional CSS class name */
+    className?: string;
+    /** Whether to show the default toolbar (default: true). Set to false when using custom children. */
+    showDefaultToolbar?: boolean;
+    /** Custom toolbar content. When provided, replaces the default toolbar. */
+    children?: ReactNode;
+}
+
 export { }

package/dist/index.js

@@ -6,17 +6,17 @@ import "./index6.js";
 import "./index7.js";
 import "./index8.js";
 import "./index9.js";
-import { Vizel as f } from "./index10.js";
+import { Vizel as z } from "./index10.js";
 import { VizelBubbleMenu as u } from "./index11.js";
 import { VizelBubbleMenuButton as a } from "./index12.js";
 import { VizelBubbleMenuColorPicker as d } from "./index13.js";
 import { VizelBubbleMenuDefault as S } from "./index14.js";
 import { VizelBubbleMenuDivider as c } from "./index15.js";
 import { VizelColorPicker as v } from "./index16.js";
-import { useVizelContext as E, useVizelContextSafe as P } from "./index17.js";
-import { VizelEditor as I } from "./index18.js";
-import { VizelEmbedView as T } from "./index19.js";
-import { VizelIcon as D } from "./index20.js";
+import { useVizelContext as T, useVizelContextSafe as E } from "./index17.js";
+import { VizelEditor as C } from "./index18.js";
+import { VizelEmbedView as k } from "./index19.js";
+import { VizelIcon as w } from "./index20.js";
 import { VizelIconProvider as A, useVizelIconContext as L } from "./index21.js";
 import { VizelLinkEditor as R } from "./index22.js";
 import { VizelNodeSelector as j } from "./index23.js";
@@ -27,23 +27,27 @@ import { VizelSlashMenu as Q } from "./index27.js";
 import { VizelSlashMenuEmpty as W } from "./index28.js";
 import { VizelSlashMenuItem as Y } from "./index29.js";
 import { VizelThemeProvider as _, useVizelTheme as $, useVizelThemeSafe as ee } from "./index30.js";
-import { createVizelSlashMenuRenderer as re } from "./index31.js";
-import { useVizelAutoSave as ie } from "./index32.js";
-import { useVizelEditor as me } from "./index33.js";
-import { useVizelEditorState as Ve } from "./index34.js";
-import { useVizelMarkdown as fe } from "./index35.js";
-import { useVizelState as ue } from "./index36.js";
+import { VizelToolbar as re } from "./index31.js";
+import { VizelToolbarButton as ie } from "./index32.js";
+import { VizelToolbarDefault as me } from "./index33.js";
+import { VizelToolbarDivider as Ve } from "./index34.js";
+import { createVizelSlashMenuRenderer as ze } from "./index35.js";
+import { useVizelAutoSave as ue } from "./index36.js";
+import { useVizelEditor as ae } from "./index37.js";
+import { useVizelEditorState as de } from "./index38.js";
+import { useVizelMarkdown as Se } from "./index39.js";
+import { useVizelState as ce } from "./index40.js";
 export {
-  f as Vizel,
+  z as Vizel,
   u as VizelBubbleMenu,
   a as VizelBubbleMenuButton,
   d as VizelBubbleMenuColorPicker,
   S as VizelBubbleMenuDefault,
   c as VizelBubbleMenuDivider,
   v as VizelColorPicker,
-  I as VizelEditor,
-  T as VizelEmbedView,
-  D as VizelIcon,
+  C as VizelEditor,
+  k as VizelEmbedView,
+  w as VizelIcon,
   A as VizelIconProvider,
   R as VizelLinkEditor,
   j as VizelNodeSelector,
@@ -54,15 +58,19 @@ export {
   W as VizelSlashMenuEmpty,
   Y as VizelSlashMenuItem,
   _ as VizelThemeProvider,
-  re as createVizelSlashMenuRenderer,
-  ie as useVizelAutoSave,
-  E as useVizelContext,
-  P as useVizelContextSafe,
-  me as useVizelEditor,
-  Ve as useVizelEditorState,
+  re as VizelToolbar,
+  ie as VizelToolbarButton,
+  me as VizelToolbarDefault,
+  Ve as VizelToolbarDivider,
+  ze as createVizelSlashMenuRenderer,
+  ue as useVizelAutoSave,
+  T as useVizelContext,
+  E as useVizelContextSafe,
+  ae as useVizelEditor,
+  de as useVizelEditorState,
   L as useVizelIconContext,
-  fe as useVizelMarkdown,
-  ue as useVizelState,
+  Se as useVizelMarkdown,
+  ce as useVizelState,
   $ as useVizelTheme,
   ee as useVizelThemeSafe
 };

package/dist/index10.js

@@ -1,57 +1,62 @@
-import { jsxs as g, jsx as o } from "react/jsx-runtime";
-import { useImperativeHandle as h } from "react";
-import { useVizelEditor as q } from "./index33.js";
-import { VizelBubbleMenu as j } from "./index11.js";
-import { VizelEditor as u } from "./index18.js";
-function O({
-  ref: e,
-  initialContent: v,
-  initialMarkdown: d,
-  transformDiagramsOnImport: E = !0,
-  placeholder: m,
-  editable: H = !0,
-  autofocus: I = !1,
-  features: f,
-  className: N,
-  showBubbleMenu: s = !0,
-  enableEmbed: z = !1,
-  bubbleMenuContent: r,
-  children: $,
-  onUpdate: t,
-  onCreate: p,
-  onDestroy: V,
-  onSelectionUpdate: l,
-  onFocus: x,
-  onBlur: c
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import { useImperativeHandle as A } from "react";
+import { useVizelEditor as G } from "./index37.js";
+import { VizelBubbleMenu as H } from "./index11.js";
+import { VizelEditor as J } from "./index18.js";
+import { VizelToolbar as I } from "./index31.js";
+function T({
+  ref: N,
+  initialContent: m,
+  initialMarkdown: o,
+  transformDiagramsOnImport: $ = !0,
+  placeholder: f,
+  editable: g = !0,
+  autofocus: h = !1,
+  features: z,
+  className: q,
+  showToolbar: s = !1,
+  toolbarContent: d,
+  showBubbleMenu: p = !0,
+  enableEmbed: V = !1,
+  bubbleMenuContent: v,
+  children: t,
+  onUpdate: l,
+  onCreate: c,
+  onDestroy: x,
+  onSelectionUpdate: e,
+  onFocus: j,
+  onBlur: E
 }) {
-  const i = q({
-    ...v !== void 0 && { initialContent: v },
-    ...d !== void 0 && { initialMarkdown: d },
-    transformDiagramsOnImport: E,
-    ...m !== void 0 && { placeholder: m },
-    editable: H,
-    autofocus: I,
-    ...f !== void 0 && { features: f },
-    ...t !== void 0 && { onUpdate: t },
-    ...p !== void 0 && { onCreate: p },
-    ...V !== void 0 && { onDestroy: V },
-    ...l !== void 0 && { onSelectionUpdate: l },
-    ...x !== void 0 && { onFocus: x },
-    ...c !== void 0 && { onBlur: c }
+  const i = G({
+    ...m !== void 0 && { initialContent: m },
+    ...o !== void 0 && { initialMarkdown: o },
+    transformDiagramsOnImport: $,
+    ...f !== void 0 && { placeholder: f },
+    editable: g,
+    autofocus: h,
+    ...z !== void 0 && { features: z },
+    ...l !== void 0 && { onUpdate: l },
+    ...c !== void 0 && { onCreate: c },
+    ...x !== void 0 && { onDestroy: x },
+    ...e !== void 0 && { onSelectionUpdate: e },
+    ...j !== void 0 && { onFocus: j },
+    ...E !== void 0 && { onBlur: E }
   });
-  return h(
-    e,
+  return A(
+    N,
     () => ({
       editor: i
     }),
     [i]
-  ), /* @__PURE__ */ g("div", { className: `vizel-root ${N ?? ""}`, "data-vizel-root": "", children: [
-    /* @__PURE__ */ o(u, { editor: i }),
-    s && i && r && /* @__PURE__ */ o(j, { editor: i, enableEmbed: z, children: r }),
-    s && i && !r && /* @__PURE__ */ o(j, { editor: i, enableEmbed: z }),
-    $
+  ), /* @__PURE__ */ u("div", { className: `vizel-root ${q ?? ""}`, "data-vizel-root": "", children: [
+    s && i && d && /* @__PURE__ */ r(I, { editor: i, children: d }),
+    s && i && !d && /* @__PURE__ */ r(I, { editor: i }),
+    /* @__PURE__ */ r(J, { editor: i }),
+    p && i && v && /* @__PURE__ */ r(H, { editor: i, enableEmbed: V, children: v }),
+    p && i && !v && /* @__PURE__ */ r(H, { editor: i, enableEmbed: V }),
+    t
   ] });
 }
 export {
-  O as Vizel
+  T as Vizel
 };

package/dist/index14.js

@@ -1,91 +1,95 @@
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
 import { useState as a } from "react";
-import { useVizelState as m } from "./index36.js";
-import { VizelBubbleMenuButton as t } from "./index12.js";
-import { VizelBubbleMenuColorPicker as o } from "./index13.js";
-import { VizelIcon as l } from "./index20.js";
-import { VizelLinkEditor as h } from "./index22.js";
+import { useVizelState as h } from "./index40.js";
+import { VizelBubbleMenuButton as l } from "./index12.js";
+import { VizelBubbleMenuColorPicker as r } from "./index13.js";
+import { VizelBubbleMenuDivider as n } from "./index15.js";
+import { VizelIcon as t } from "./index20.js";
+import { VizelLinkEditor as f } from "./index22.js";
 import { VizelNodeSelector as k } from "./index23.js";
-function z({
-  editor: i,
-  className: r,
-  enableEmbed: n
+function V({
+  editor: e,
+  className: s,
+  enableEmbed: o
 }) {
-  m(() => i);
-  const [s, c] = a(!1);
-  return s ? /* @__PURE__ */ e(
-    h,
+  h(() => e);
+  const [u, c] = a(!1);
+  return u ? /* @__PURE__ */ i(
+    f,
     {
-      editor: i,
+      editor: e,
       onClose: () => c(!1),
-      ...n ? { enableEmbed: n } : {}
+      ...o ? { enableEmbed: o } : {}
     }
-  ) : /* @__PURE__ */ u("div", { className: `vizel-bubble-menu-toolbar ${r ?? ""}`, children: [
-    /* @__PURE__ */ e(k, { editor: i }),
-    /* @__PURE__ */ e(
-      t,
+  ) : /* @__PURE__ */ m("div", { className: `vizel-bubble-menu-toolbar ${s ?? ""}`, children: [
+    /* @__PURE__ */ i(k, { editor: e }),
+    /* @__PURE__ */ i(n, {}),
+    /* @__PURE__ */ i(
+      l,
       {
         action: "bold",
-        onClick: () => i.chain().focus().toggleBold().run(),
-        isActive: i.isActive("bold"),
+        onClick: () => e.chain().focus().toggleBold().run(),
+        isActive: e.isActive("bold"),
         title: "Bold (Cmd+B)",
-        children: /* @__PURE__ */ e(l, { name: "bold" })
+        children: /* @__PURE__ */ i(t, { name: "bold" })
       }
     ),
-    /* @__PURE__ */ e(
-      t,
+    /* @__PURE__ */ i(
+      l,
       {
         action: "italic",
-        onClick: () => i.chain().focus().toggleItalic().run(),
-        isActive: i.isActive("italic"),
+        onClick: () => e.chain().focus().toggleItalic().run(),
+        isActive: e.isActive("italic"),
         title: "Italic (Cmd+I)",
-        children: /* @__PURE__ */ e(l, { name: "italic" })
+        children: /* @__PURE__ */ i(t, { name: "italic" })
       }
     ),
-    /* @__PURE__ */ e(
-      t,
+    /* @__PURE__ */ i(
+      l,
       {
         action: "strike",
-        onClick: () => i.chain().focus().toggleStrike().run(),
-        isActive: i.isActive("strike"),
+        onClick: () => e.chain().focus().toggleStrike().run(),
+        isActive: e.isActive("strike"),
         title: "Strikethrough",
-        children: /* @__PURE__ */ e(l, { name: "strikethrough" })
+        children: /* @__PURE__ */ i(t, { name: "strikethrough" })
       }
     ),
-    /* @__PURE__ */ e(
-      t,
+    /* @__PURE__ */ i(
+      l,
       {
         action: "underline",
-        onClick: () => i.chain().focus().toggleUnderline().run(),
-        isActive: i.isActive("underline"),
+        onClick: () => e.chain().focus().toggleUnderline().run(),
+        isActive: e.isActive("underline"),
         title: "Underline (Cmd+U)",
-        children: /* @__PURE__ */ e(l, { name: "underline" })
+        children: /* @__PURE__ */ i(t, { name: "underline" })
       }
     ),
-    /* @__PURE__ */ e(
-      t,
+    /* @__PURE__ */ i(
+      l,
       {
         action: "code",
-        onClick: () => i.chain().focus().toggleCode().run(),
-        isActive: i.isActive("code"),
+        onClick: () => e.chain().focus().toggleCode().run(),
+        isActive: e.isActive("code"),
         title: "Code (Cmd+E)",
-        children: /* @__PURE__ */ e(l, { name: "code" })
+        children: /* @__PURE__ */ i(t, { name: "code" })
       }
     ),
-    /* @__PURE__ */ e(
-      t,
+    /* @__PURE__ */ i(n, {}),
+    /* @__PURE__ */ i(
+      l,
       {
         action: "link",
         onClick: () => c(!0),
-        isActive: i.isActive("link"),
+        isActive: e.isActive("link"),
         title: "Link (Cmd+K)",
-        children: /* @__PURE__ */ e(l, { name: "link" })
+        children: /* @__PURE__ */ i(t, { name: "link" })
       }
     ),
-    /* @__PURE__ */ e(o, { editor: i, type: "textColor" }),
-    /* @__PURE__ */ e(o, { editor: i, type: "highlight" })
+    /* @__PURE__ */ i(n, {}),
+    /* @__PURE__ */ i(r, { editor: e, type: "textColor" }),
+    /* @__PURE__ */ i(r, { editor: e, type: "highlight" })
   ] });
 }
 export {
-  z as VizelBubbleMenuDefault
+  V as VizelBubbleMenuDefault
 };

package/dist/index2.js

@@ -1,5 +1,5 @@
 import { Mark as a, markPasteRule as r, markInputRule as s, mergeAttributes as o } from "@tiptap/core";
-import { createElement as n } from "./index37.js";
+import { createElement as n } from "./index41.js";
 var d = /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))$/, i = /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))/g, l = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))$/, u = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))/g;
 a.create({
   name: "bold",

package/dist/index23.js

@@ -1,7 +1,7 @@
 import { jsxs as p, jsx as n } from "react/jsx-runtime";
 import { getVizelActiveNodeType as x, vizelDefaultNodeTypes as E } from "@vizel/core";
 import { useState as z, useRef as N, useEffect as w } from "react";
-import { useVizelState as y } from "./index36.js";
+import { useVizelState as y } from "./index40.js";
 import { VizelIcon as s } from "./index20.js";
 function $({
   editor: c,

package/dist/index31.js

@@ -1,36 +1,15 @@
-import { handleVizelSuggestionEscape as u, createVizelSuggestionContainer as m } from "@vizel/core";
-import { createElement as c } from "react";
-import { c as s } from "./index38.js";
-import { VizelSlashMenu as d } from "./index27.js";
-function z(l = {}) {
-  return {
-    render: () => {
-      let t = null, n = null, o = [], r = null;
-      const i = { current: null }, a = () => {
-        t && r && t.render(
-          c(d, {
-            items: o,
-            command: r,
-            ...l.className !== void 0 && { className: l.className },
-            ref: i
-          })
-        );
-      };
-      return {
-        onStart: (e) => {
-          o = e.items, r = e.command, n = m(), t = s.createRoot(n.menuContainer), a(), n.updatePosition(e.clientRect);
-        },
-        onUpdate: (e) => {
-          o = e.items, r = e.command, a(), n?.updatePosition(e.clientRect);
-        },
-        onKeyDown: (e) => u(e.event) ? !0 : i.current?.onKeyDown(e) ?? !1,
-        onExit: () => {
-          t?.unmount(), n?.destroy(), t = null, n = null;
-        }
-      };
-    }
-  };
+import { jsx as r } from "react/jsx-runtime";
+import { useVizelContextSafe as n } from "./index17.js";
+import { VizelToolbarDefault as m } from "./index33.js";
+function s({
+  editor: t,
+  className: e,
+  showDefaultToolbar: l = !0,
+  children: i
+}) {
+  const a = n(), o = t ?? a?.editor ?? null;
+  return o ? /* @__PURE__ */ r("div", { className: `vizel-toolbar ${e ?? ""}`, role: "toolbar", "aria-label": "Formatting", children: i ?? (l && /* @__PURE__ */ r(m, { editor: o })) }) : null;
 }
 export {
-  z as createVizelSlashMenuRenderer
+  s as VizelToolbar
 };

package/dist/index32.js

@@ -1,53 +1,28 @@
-import { VIZEL_DEFAULT_AUTO_SAVE_OPTIONS as c, createVizelAutoSaveHandlers as y } from "@vizel/core";
-import { useRef as h, useState as A, useCallback as u, useMemo as C, useEffect as R } from "react";
-function M(s, t = {}) {
-  const r = h(t);
-  r.current = t;
-  const n = t.enabled ?? c.enabled, d = t.debounceMs ?? c.debounceMs, l = t.storage ?? c.storage, v = t.key ?? c.key, [o, b] = A({
-    status: "saved",
-    hasUnsavedChanges: !1,
-    lastSaved: null,
-    error: null
-  }), f = h(s);
-  f.current = s;
-  const S = u((e) => {
-    b((m) => ({ ...m, ...e }));
-  }, []), a = C(
-    () => y(
-      () => f.current(),
-      {
-        enabled: n,
-        debounceMs: d,
-        storage: l,
-        key: v,
-        // Access callbacks through ref to avoid dependency on them
-        onSave: (e) => r.current.onSave?.(e),
-        onError: (e) => r.current.onError?.(e),
-        onRestore: (e) => r.current.onRestore?.(e)
-      },
-      S
-    ),
-    [n, d, l, v, S]
+import { jsx as i } from "react/jsx-runtime";
+function u({
+  onClick: a,
+  isActive: t = !1,
+  disabled: o = !1,
+  children: e,
+  title: r,
+  className: n,
+  action: l
+}) {
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      type: "button",
+      onClick: a,
+      disabled: o,
+      "aria-pressed": t,
+      className: `vizel-toolbar-button ${t ? "is-active" : ""} ${n ?? ""}`,
+      title: r,
+      "data-active": t || void 0,
+      "data-action": l,
+      children: e
+    }
   );
-  R(() => {
-    const e = s();
-    if (e && n)
-      return e.on("update", a.handleUpdate), () => {
-        e.off("update", a.handleUpdate), a.cancel();
-      };
-  }, [s, n, a]);
-  const U = u(async () => {
-    await a.saveNow();
-  }, [a]), g = u(async () => await a.restore(), [a]);
-  return {
-    status: o.status,
-    hasUnsavedChanges: o.hasUnsavedChanges,
-    lastSaved: o.lastSaved,
-    error: o.error,
-    save: U,
-    restore: g
-  };
 }
 export {
-  M as useVizelAutoSave
+  u as VizelToolbarButton
 };