@nikala-ui/docs 0.12.0

package/dist/vendor/hooks-src/create-timer.ts

@@ -0,0 +1,150 @@
+import { createEffect, createSignal, onCleanup, type Accessor } from "solid-js";
+
+export interface CreateTimerOptions {
+  /** Whether the timer starts running automatically on mount. Defaults to false. */
+  autostart?: boolean;
+}
+
+export interface CreateTimerReturn {
+  /** Accessor indicating if timer is actively running */
+  isRunning: Accessor<boolean>;
+  /** Function to start or resume the timer */
+  start: () => void;
+  /** Function to pause/stop the timer */
+  stop: () => void;
+  /** Function to reset and restart the timer */
+  reset: () => void;
+  /** Function to toggle running state */
+  toggle: () => void;
+}
+
+/**
+ * SolidJS reactive primitive for recurring interval timers.
+ *
+ * @param intervalMs Interval duration in milliseconds.
+ * @param callback Function to execute on each interval tick.
+ * @param options Configuration options including autostart.
+ */
+export function createTimer(
+  intervalMs: number | Accessor<number>,
+  callback: () => void,
+  options: CreateTimerOptions = {}
+): CreateTimerReturn {
+  const [isRunning, setIsRunning] = createSignal<boolean>(options.autostart ?? false);
+  let timerId: ReturnType<typeof setInterval> | undefined;
+
+  const getInterval = () => (typeof intervalMs === "function" ? intervalMs() : intervalMs);
+
+  const stop = () => {
+    if (timerId) {
+      clearInterval(timerId);
+      timerId = undefined;
+    }
+    setIsRunning(false);
+  };
+
+  const start = () => {
+    stop();
+    const delay = getInterval();
+    if (delay <= 0) return;
+
+    setIsRunning(true);
+    timerId = setInterval(() => {
+      callback();
+    }, delay);
+  };
+
+  const reset = () => {
+    start();
+  };
+
+  const toggle = () => {
+    if (isRunning()) {
+      stop();
+    } else {
+      start();
+    }
+  };
+
+  createEffect(() => {
+    if (isRunning()) {
+      start();
+    }
+  });
+
+  onCleanup(() => {
+    stop();
+  });
+
+  return {
+    isRunning,
+    start,
+    stop,
+    reset,
+    toggle,
+  };
+}
+
+export interface CreateCountdownOptions extends CreateTimerOptions {
+  /** Callback fired when countdown reaches zero */
+  onComplete?: () => void;
+}
+
+export interface CreateCountdownReturn extends CreateTimerReturn {
+  /** Accessor for remaining seconds */
+  remainingSeconds: Accessor<number>;
+  /** Accessor for formatted time string (MM:SS) */
+  formatted: Accessor<string>;
+}
+
+/**
+ * SolidJS reactive primitive for countdown timers.
+ *
+ * @param durationSeconds Total countdown duration in seconds.
+ * @param options Configuration options including autostart and onComplete callback.
+ */
+export function createCountdown(
+  durationSeconds: number | Accessor<number>,
+  options: CreateCountdownOptions = {}
+): CreateCountdownReturn {
+  const getInitialDuration = () =>
+    typeof durationSeconds === "function" ? durationSeconds() : durationSeconds;
+
+  const [remaining, setRemaining] = createSignal<number>(getInitialDuration());
+
+  const timer = createTimer(
+    1000,
+    () => {
+      setRemaining((prev) => {
+        if (prev <= 1) {
+          timer.stop();
+          options.onComplete?.();
+          return 0;
+        }
+        return prev - 1;
+      });
+    },
+    { autostart: options.autostart }
+  );
+
+  const reset = () => {
+    setRemaining(getInitialDuration());
+    timer.start();
+  };
+
+  const formatted = (): string => {
+    const total = remaining();
+    const minutes = Math.floor(total / 60);
+    const seconds = total % 60;
+    const mm = String(minutes).padStart(2, "0");
+    const ss = String(seconds).padStart(2, "0");
+    return `${mm}:${ss}`;
+  };
+
+  return {
+    ...timer,
+    remainingSeconds: remaining,
+    formatted,
+    reset,
+  };
+}

package/dist/vendor/hooks-src/create-tiptap-editor.ts

@@ -0,0 +1,326 @@
+import {
+  createSignal,
+  onMount,
+  onCleanup,
+  type Accessor,
+} from "solid-js";
+import { Editor, type EditorOptions, type Extension } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import Link from "@tiptap/extension-link";
+import Image from "@tiptap/extension-image";
+import TaskList from "@tiptap/extension-task-list";
+import TaskItem from "@tiptap/extension-task-item";
+import { Table, TableRow, TableCell, TableHeader } from "@tiptap/extension-table";
+import Underline from "@tiptap/extension-underline";
+import TextAlign from "@tiptap/extension-text-align";
+import Highlight from "@tiptap/extension-highlight";
+import CharacterCount from "@tiptap/extension-character-count";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import Typography from "@tiptap/extension-typography";
+import { Markdown } from "tiptap-markdown";
+
+export interface CreateTiptapEditorOptions
+  extends Partial<Omit<EditorOptions, "element">> {
+  placeholder?: string;
+  characterLimit?: number;
+}
+
+export interface CreateTiptapEditorReturn {
+  editor: Accessor<Editor | null>;
+  html: Accessor<string>;
+  text: Accessor<string>;
+  markdown: Accessor<string>;
+  isEmpty: Accessor<boolean>;
+  characterCount: Accessor<number>;
+  wordCount: Accessor<number>;
+  canUndo: Accessor<boolean>;
+  canRedo: Accessor<boolean>;
+  mount: (element: HTMLElement) => void;
+  destroy: () => void;
+  isActive: (name: string | Record<string, any>, attributes?: Record<string, any>) => boolean;
+  toggleBold: () => void;
+  toggleItalic: () => void;
+  toggleUnderline: () => void;
+  toggleStrike: () => void;
+  toggleCode: () => void;
+  toggleHighlight: (color?: string) => void;
+  setHeading: (level: 1 | 2 | 3 | 4 | 5 | 6) => void;
+  setParagraph: () => void;
+  toggleBulletList: () => void;
+  toggleOrderedList: () => void;
+  toggleTaskList: () => void;
+  toggleBlockquote: () => void;
+  toggleCodeBlock: () => void;
+  setTextAlign: (alignment: "left" | "center" | "right" | "justify") => void;
+  setLink: (options: string | { href: string; target?: string }) => void;
+  unsetLink: () => void;
+  setImage: (options: string | { src: string; alt?: string; title?: string }) => void;
+  insertTable: (options?: { rows?: number; cols?: number; withHeaderRow?: boolean }) => void;
+  insertHorizontalRule: () => void;
+  clearContent: () => void;
+  setContent: (content: string) => void;
+  setEditable: (editable: boolean) => void;
+  undo: () => void;
+  redo: () => void;
+}
+
+export function createTiptapEditor(
+  options: CreateTiptapEditorOptions = {}
+): CreateTiptapEditorReturn {
+  const [editorInstance, setEditorInstance] = createSignal<Editor | null>(null);
+  const [html, setHtml] = createSignal<string>("");
+  const [text, setText] = createSignal<string>("");
+  const [markdown, setMarkdown] = createSignal<string>("");
+  const [isEmpty, setIsEmpty] = createSignal<boolean>(true);
+  const [characterCount, setCharacterCount] = createSignal<number>(0);
+  const [wordCount, setWordCount] = createSignal<number>(0);
+  const [canUndo, setCanUndo] = createSignal<boolean>(false);
+  const [canRedo, setCanRedo] = createSignal<boolean>(false);
+  const [transactionVersion, setTransactionVersion] = createSignal<number>(0);
+
+  let targetElement: HTMLElement | null = null;
+
+  const updateStats = (ed: Editor) => {
+    const currentHtml = ed.getHTML();
+    const currentText = ed.getText();
+    const currentMd = (ed.storage as any).markdown?.getMarkdown?.() || "";
+    setHtml(currentHtml);
+    setText(currentText);
+    setMarkdown(currentMd);
+    setIsEmpty(ed.isEmpty);
+    setCharacterCount(ed.storage.characterCount?.characters?.() ?? currentText.length);
+    setWordCount(ed.storage.characterCount?.words?.() ?? currentText.split(/\s+/).filter(Boolean).length);
+    setCanUndo(ed.can().undo());
+    setCanRedo(ed.can().redo());
+    setTransactionVersion((v) => v + 1);
+  };
+
+  const defaultExtensions: Extension[] = [
+    StarterKit.configure({
+      heading: {
+        levels: [1, 2, 3, 4, 5, 6],
+        HTMLAttributes: { class: "font-heading tracking-tight" },
+      },
+      bulletList: {
+        HTMLAttributes: { class: "list-disc pl-6 my-3 space-y-1" },
+      },
+      orderedList: {
+        HTMLAttributes: { class: "list-decimal pl-6 my-3 space-y-1" },
+      },
+      codeBlock: {
+        HTMLAttributes: {
+          class: "rounded-lg bg-muted p-4 font-mono text-xs border border-border my-3 overflow-x-auto text-foreground",
+        },
+      },
+      code: {
+        HTMLAttributes: {
+          class: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-foreground font-semibold border border-border/50",
+        },
+      },
+      blockquote: {
+        HTMLAttributes: {
+          class: "border-l-4 border-primary pl-4 italic text-muted-foreground my-3",
+        },
+      },
+    }) as Extension,
+    Placeholder.configure({
+      placeholder: options.placeholder || "Write something rich or type '/' for commands...",
+      emptyEditorClass: "is-editor-empty",
+    }) as Extension,
+    Underline as Extension,
+    Subscript as Extension,
+    Superscript as Extension,
+    Typography as Extension,
+    Highlight.configure({
+      multicolor: true,
+      HTMLAttributes: { class: "rounded px-1 py-0.5" },
+    }) as Extension,
+    TextAlign.configure({ types: ["heading", "paragraph"] }) as Extension,
+    Link.configure({
+      openOnClick: false,
+      HTMLAttributes: {
+        class: "text-primary font-medium underline underline-offset-4 hover:opacity-80 transition-opacity cursor-pointer",
+      },
+    }) as Extension,
+    Image.configure({
+      HTMLAttributes: {
+        class: "rounded-lg max-w-full h-auto my-4 border border-border shadow-xs",
+      },
+    }) as Extension,
+    TaskList.configure({
+      HTMLAttributes: { class: "list-none pl-0 my-3 space-y-2" },
+    }) as Extension,
+    TaskItem.configure({
+      nested: true,
+      HTMLAttributes: { class: "flex items-start gap-2.5 my-1" },
+    }) as Extension,
+    Table.configure({
+      resizable: true,
+      HTMLAttributes: {
+        class: "border-collapse table-auto w-full my-4 border border-border rounded-lg overflow-hidden text-sm",
+      },
+    }) as Extension,
+    TableRow as Extension,
+    TableHeader.configure({
+      HTMLAttributes: { class: "border border-border bg-muted/70 px-3 py-2 font-semibold text-left text-xs" },
+    }) as Extension,
+    TableCell.configure({
+      HTMLAttributes: { class: "border border-border px-3 py-2 text-xs" },
+    }) as Extension,
+    CharacterCount.configure({ limit: options.characterLimit }) as Extension,
+    Markdown.configure({
+      html: true,
+      tightLists: true,
+      bulletListMarker: "-",
+      linkify: true,
+      breaks: false,
+      transformPastedText: true,
+      transformCopiedText: true,
+    }) as Extension,
+  ];
+
+  const initEditor = (el: HTMLElement) => {
+    if (typeof window === "undefined") return;
+
+    const extensions = [...defaultExtensions, ...(options.extensions || [])];
+
+    const editor = new Editor({
+      element: el,
+      content: options.content,
+      editable: options.editable ?? true,
+      autofocus: options.autofocus ?? false,
+      extensions,
+      editorProps: {
+        attributes: {
+          class:
+            "focus:outline-hidden min-h-[220px] w-full max-w-none text-foreground leading-relaxed text-sm " +
+            "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:tracking-tight [&_h1]:mt-6 [&_h1]:mb-3 " +
+            "[&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:tracking-tight [&_h2]:mt-5 [&_h2]:mb-2.5 " +
+            "[&_h3]:text-xl [&_h3]:font-semibold [&_h3]:mt-4 [&_h3]:mb-2 " +
+            "[&_h4]:text-lg [&_h4]:font-semibold [&_h4]:mt-3 [&_h4]:mb-1.5 " +
+            "[&_p]:my-2 [&_p]:leading-7 " +
+            "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:my-3 [&_ul]:space-y-1 " +
+            "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:my-3 [&_ol]:space-y-1 " +
+            "[&_li]:my-0.5 " +
+            "[&_ul[data-type=taskList]]:list-none [&_ul[data-type=taskList]]:pl-0 [&_ul[data-type=taskList]]:my-3 [&_ul[data-type=taskList]]:space-y-2 " +
+            "[&_ul[data-type=taskList]_li]:flex [&_ul[data-type=taskList]_li]:items-start [&_ul[data-type=taskList]_li]:gap-2.5 " +
+            "[&_ul[data-type=taskList]_input[type=checkbox]]:mt-1 [&_ul[data-type=taskList]_input[type=checkbox]]:h-4 [&_ul[data-type=taskList]_input[type=checkbox]]:w-4 [&_ul[data-type=taskList]_input[type=checkbox]]:rounded [&_ul[data-type=taskList]_input[type=checkbox]]:border-border [&_ul[data-type=taskList]_input[type=checkbox]]:accent-primary [&_ul[data-type=taskList]_input[type=checkbox]]:cursor-pointer " +
+            "[&_mark]:text-foreground [&_mark]:dark:text-background [&_mark]:font-medium [&_mark]:rounded-xs [&_mark]:px-1 [&_mark]:py-0.5 " +
+            "[&_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)] [&_.is-editor-empty:first-child::before]:text-muted-foreground [&_.is-editor-empty:first-child::before]:float-left [&_.is-editor-empty:first-child::before]:pointer-events-none [&_.is-editor-empty:first-child::before]:h-0",
+        },
+        ...options.editorProps,
+      },
+      onUpdate: (props) => {
+        updateStats(props.editor);
+        options.onUpdate?.(props);
+      },
+      onSelectionUpdate: (props) => {
+        updateStats(props.editor);
+        options.onSelectionUpdate?.(props);
+      },
+      onTransaction: (props) => {
+        updateStats(props.editor);
+        options.onTransaction?.(props);
+      },
+      onFocus: (args) => options.onFocus?.(args),
+      onBlur: (args) => options.onBlur?.(args),
+    });
+
+    setEditorInstance(editor);
+    updateStats(editor);
+  };
+
+  const mount = (element: HTMLElement) => {
+    targetElement = element;
+    initEditor(element);
+  };
+
+  const destroy = () => {
+    editorInstance()?.destroy();
+    setEditorInstance(null);
+  };
+
+  onCleanup(() => {
+    destroy();
+  });
+
+  const isActive = (name: string | Record<string, any>, attributes?: Record<string, any>) => {
+    transactionVersion();
+    const ed = editorInstance();
+    if (!ed) return false;
+    if (typeof name === "string") {
+      return ed.isActive(name, attributes);
+    }
+    return ed.isActive(name);
+  };
+
+  return {
+    editor: editorInstance,
+    html,
+    text,
+    markdown,
+    isEmpty,
+    characterCount,
+    wordCount,
+    canUndo,
+    canRedo,
+    mount,
+    destroy,
+    isActive,
+    toggleBold: () => editorInstance()?.chain().focus().toggleBold().run(),
+    toggleItalic: () => editorInstance()?.chain().focus().toggleItalic().run(),
+    toggleUnderline: () => editorInstance()?.chain().focus().toggleUnderline().run(),
+    toggleStrike: () => editorInstance()?.chain().focus().toggleStrike().run(),
+    toggleCode: () => editorInstance()?.chain().focus().toggleCode().run(),
+    toggleHighlight: (color) => {
+      const ed = editorInstance();
+      if (!ed) return;
+      if (color) {
+        ed.chain().focus().toggleHighlight({ color }).run();
+      } else {
+        ed.chain().focus().toggleHighlight().run();
+      }
+    },
+    setHeading: (level) => editorInstance()?.chain().focus().toggleHeading({ level }).run(),
+    setParagraph: () => editorInstance()?.chain().focus().setParagraph().run(),
+    toggleBulletList: () => editorInstance()?.chain().focus().toggleBulletList().run(),
+    toggleOrderedList: () => editorInstance()?.chain().focus().toggleOrderedList().run(),
+    toggleTaskList: () => editorInstance()?.chain().focus().toggleTaskList().run(),
+    toggleBlockquote: () => editorInstance()?.chain().focus().toggleBlockquote().run(),
+    toggleCodeBlock: () => editorInstance()?.chain().focus().toggleCodeBlock().run(),
+    setTextAlign: (alignment) => editorInstance()?.chain().focus().setTextAlign(alignment).run(),
+    setLink: (opts) => {
+      const ed = editorInstance();
+      if (!ed) return;
+      if (typeof opts === "string") {
+        ed.chain().focus().setLink({ href: opts, target: "_blank" }).run();
+      } else {
+        ed.chain().focus().setLink({ href: opts.href, target: opts.target ?? "_blank" }).run();
+      }
+    },
+    unsetLink: () => editorInstance()?.chain().focus().unsetLink().run(),
+    setImage: (opts) => {
+      const ed = editorInstance();
+      if (!ed) return;
+      if (typeof opts === "string") {
+        ed.chain().focus().setImage({ src: opts }).run();
+      } else {
+        ed.chain().focus().setImage(opts).run();
+      }
+    },
+    insertTable: (opts) =>
+      editorInstance()?.chain().focus().insertTable({
+        rows: opts?.rows ?? 3,
+        cols: opts?.cols ?? 3,
+        withHeaderRow: opts?.withHeaderRow ?? true,
+      }).run(),
+    insertHorizontalRule: () => editorInstance()?.chain().focus().setHorizontalRule().run(),
+    clearContent: () => editorInstance()?.chain().focus().clearContent().run(),
+    setContent: (c) => editorInstance()?.commands.setContent(c),
+    setEditable: (editable: boolean) => editorInstance()?.setEditable(editable),
+    undo: () => editorInstance()?.chain().focus().undo().run(),
+    redo: () => editorInstance()?.chain().focus().redo().run(),
+  };
+}

package/dist/vendor/hooks-src/create-undo-redo.ts

@@ -0,0 +1,100 @@
+import { createSignal, type Accessor } from "solid-js";
+
+export interface CreateUndoRedoOptions<T> {
+  /** Maximum number of history states to retain. Defaults to 50. */
+  maxHistory?: number;
+}
+
+export interface CreateUndoRedoReturn<T> {
+  /** Signal containing the current state value. */
+  state: Accessor<T>;
+  /** Update state value and append to history. */
+  set: (nextState: T | ((prev: T) => T)) => void;
+  /** Revert to previous state history entry. */
+  undo: () => void;
+  /** Advance to next state history entry. */
+  redo: () => void;
+  /** Signal indicating whether undo is available. */
+  canUndo: Accessor<boolean>;
+  /** Signal indicating whether redo is available. */
+  canRedo: Accessor<boolean>;
+  /** History stack of past states. */
+  history: Accessor<T[]>;
+  /** Reset history to initial state value. */
+  reset: (initialState?: T) => void;
+}
+
+/**
+ * SolidJS reactive primitive for undo/redo state history management.
+ */
+export function createUndoRedo<T>(
+  initialValue: T | Accessor<T>,
+  options: CreateUndoRedoOptions<T> = {}
+): CreateUndoRedoReturn<T> {
+  const getInitial = (): T => {
+    return typeof initialValue === "function"
+      ? (initialValue as Accessor<T>)()
+      : initialValue;
+  };
+
+  const maxHistory = options.maxHistory ?? 50;
+
+  const [history, setHistory] = createSignal<T[]>([getInitial()]);
+  const [pointer, setPointer] = createSignal<number>(0);
+
+  const state = (): T => history()[pointer()] ?? getInitial();
+
+  const canUndo = (): boolean => pointer() > 0;
+  const canRedo = (): boolean => pointer() < history().length - 1;
+
+  const set = (nextState: T | ((prev: T) => T)): void => {
+    const current = state();
+    const resolved =
+      typeof nextState === "function"
+        ? (nextState as (prev: T) => T)(current)
+        : nextState;
+
+    if (Object.is(resolved, current)) return;
+
+    /* Slice history up to current pointer and push new state */
+    const sliced = history().slice(0, pointer() + 1);
+    const updated = [...sliced, resolved];
+
+    /* Trim to maxHistory limit */
+    if (updated.length > maxHistory) {
+      updated.shift();
+    }
+
+    setHistory(updated);
+    setPointer(updated.length - 1);
+  };
+
+  const undo = (): void => {
+    if (canUndo()) {
+      setPointer((p) => p - 1);
+    }
+  };
+
+  const redo = (): void => {
+    if (canRedo()) {
+      setPointer((p) => p + 1);
+    }
+  };
+
+  const reset = (newInitial?: T): void => {
+    const init = newInitial !== undefined ? newInitial : getInitial();
+    setHistory([init]);
+    setPointer(0);
+  };
+
+  return {
+    state,
+    set,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    history,
+    reset,
+  };
+}

package/dist/vendor/hooks-src/create-web-notification.ts

@@ -0,0 +1,111 @@
+import { createSignal, createEffect, type Accessor } from "solid-js";
+
+export interface CreateWebNotificationOptions extends NotificationOptions {
+  /** Title of the notification. */
+  title?: string;
+  /** Callback fired when notification is clicked. */
+  onClick?: (event: Event) => void;
+  /** Callback fired when notification is closed. */
+  onClose?: (event: Event) => void;
+  /** Callback fired when notification error occurs. */
+  onError?: (event: Event) => void;
+  /** Callback fired when notification is shown. */
+  onShow?: (event: Event) => void;
+}
+
+export interface CreateWebNotificationReturn {
+  /** Signal accessor containing current Notification permission state. */
+  permission: Accessor<NotificationPermission>;
+  /** Signal accessor indicating whether Web Notifications API is supported in browser environment. */
+  isSupported: Accessor<boolean>;
+  /** Function to show a web notification. */
+  show: (overrideTitle?: string, overrideOptions?: NotificationOptions) => Notification | null;
+  /** Request notification permission from browser. */
+  requestPermission: () => Promise<NotificationPermission>;
+  /** Close active notification. */
+  close: () => void;
+}
+
+/**
+ * SolidJS reactive primitive for sending browser desktop notifications and managing notification permissions.
+ */
+export function createWebNotification(
+  defaultOptions: CreateWebNotificationOptions = {}
+): CreateWebNotificationReturn {
+  const [permission, setPermission] = createSignal<NotificationPermission>("default");
+
+  const isSupported = (): boolean =>
+    typeof window !== "undefined" &&
+    "Notification" in window;
+
+  let activeNotification: Notification | null = null;
+
+  const updatePermission = (): void => {
+    if (isSupported()) {
+      setPermission(Notification.permission);
+    } else {
+      setPermission("denied");
+    }
+  };
+
+  const requestPermission = async (): Promise<NotificationPermission> => {
+    if (!isSupported()) return "denied";
+
+    try {
+      const result = await Notification.requestPermission();
+      setPermission(result);
+      return result;
+    } catch {
+      updatePermission();
+      return permission();
+    }
+  };
+
+  const close = (): void => {
+    if (activeNotification) {
+      activeNotification.close();
+      activeNotification = null;
+    }
+  };
+
+  const show = (
+    overrideTitle?: string,
+    overrideOptions?: NotificationOptions
+  ): Notification | null => {
+    if (!isSupported() || permission() !== "granted") return null;
+
+    const title = overrideTitle ?? defaultOptions.title ?? "Notification";
+    const options: NotificationOptions = {
+      ...defaultOptions,
+      ...overrideOptions,
+    };
+
+    close();
+
+    try {
+      const notification = new Notification(title, options);
+      activeNotification = notification;
+
+      if (defaultOptions.onClick) notification.onclick = (e) => defaultOptions.onClick?.(e);
+      if (defaultOptions.onClose) notification.onclose = (e) => defaultOptions.onClose?.(e);
+      if (defaultOptions.onError) notification.onerror = (e) => defaultOptions.onError?.(e);
+      if (defaultOptions.onShow) notification.onshow = (e) => defaultOptions.onShow?.(e);
+
+      return notification;
+    } catch {
+      return null;
+    }
+  };
+
+  createEffect(() => {
+    updatePermission();
+  });
+
+  return {
+    permission,
+    isSupported,
+    show,
+    requestPermission,
+    close,
+  };
+}