@nikala-ui/hooks 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nikala-ui/hooks",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Reactive SolidJS primitives and primitives for Nikala UI",
   "type": "module",
   "main": "./src/index.ts",
@@ -23,5 +23,26 @@
   },
   "peerDependencies": {
     "solid-js": "^1.9.0"
+  },
+  "dependencies": {
+    "@tiptap/core": "^3.31.0",
+    "@tiptap/extension-character-count": "^3.31.0",
+    "@tiptap/extension-highlight": "^3.31.0",
+    "@tiptap/extension-image": "^3.31.0",
+    "@tiptap/extension-link": "^3.31.0",
+    "@tiptap/extension-placeholder": "^3.31.0",
+    "@tiptap/extension-subscript": "^3.31.0",
+    "@tiptap/extension-superscript": "^3.31.0",
+    "@tiptap/extension-table": "^3.31.0",
+    "@tiptap/extension-table-cell": "^3.31.0",
+    "@tiptap/extension-table-header": "^3.31.0",
+    "@tiptap/extension-table-row": "^3.31.0",
+    "@tiptap/extension-task-item": "^3.31.0",
+    "@tiptap/extension-task-list": "^3.31.0",
+    "@tiptap/extension-text-align": "^3.31.0",
+    "@tiptap/extension-typography": "^3.31.0",
+    "@tiptap/extension-underline": "^3.31.0",
+    "@tiptap/starter-kit": "^3.31.0",
+    "tiptap-markdown": "^0.9.0"
   }
 }

package/src/create-app-updater.ts

@@ -0,0 +1,272 @@
+import { createSignal, onMount, type Accessor } from "solid-js";
+import { isTauriEnvironment } from "./create-tauri-window";
+
+export type UpdaterStatus =
+  | "idle"
+  | "checking"
+  | "available"
+  | "up-to-date"
+  | "downloading"
+  | "downloaded"
+  | "error";
+
+export interface UpdateManifestInfo {
+  version: string;
+  currentVersion?: string;
+  date?: string;
+  body?: string;
+}
+
+export interface UpdateProgressInfo {
+  downloaded: number;
+  total: number;
+  percentage: number;
+}
+
+export interface CreateAppUpdaterOptions {
+  /** Automatically check for updates on mount. Defaults to false. */
+  autoCheck?: boolean;
+  /** Current application version fallback if not detected. */
+  currentVersion?: string;
+  /** Callback fired when an update is available. */
+  onUpdateAvailable?: (info: UpdateManifestInfo) => void;
+  /** Callback fired when download finishes. */
+  onDownloadFinished?: () => void;
+  /** Callback fired on update check or download error. */
+  onError?: (error: Error | string) => void;
+}
+
+export interface CreateAppUpdaterReturn {
+  /** Current lifecycle status of the updater. */
+  status: Accessor<UpdaterStatus>;
+  /** Update metadata (new version, release notes, release date). */
+  updateInfo: Accessor<UpdateManifestInfo | null>;
+  /** Download progress (bytes downloaded, total bytes, percentage). */
+  progress: Accessor<UpdateProgressInfo>;
+  /** Error message if an operation failed. */
+  error: Accessor<string | null>;
+  /** Whether an update is currently being checked or downloaded. */
+  isLoading: Accessor<boolean>;
+  /** Check update endpoint for a new release. */
+  checkForUpdates: () => Promise<boolean>;
+  /** Download and install the available update. */
+  downloadAndInstall: () => Promise<void>;
+  /** Restart application to apply the downloaded update. */
+  relaunch: () => Promise<void>;
+  /** Dismiss current update prompt or clear error state. */
+  dismiss: () => void;
+  /** Simulate an update cycle in web / playground preview environments. */
+  simulateUpdate: (mockInfo?: Partial<UpdateManifestInfo>) => void;
+}
+
+/**
+ * SolidJS reactive primitive for controlling and observing Tauri v2 application updates.
+ * Integrates with @tauri-apps/plugin-updater with full web simulation support.
+ */
+export function createAppUpdater(
+  options: CreateAppUpdaterOptions = {}
+): CreateAppUpdaterReturn {
+  const [status, setStatus] = createSignal<UpdaterStatus>("idle");
+  const [updateInfo, setUpdateInfo] = createSignal<UpdateManifestInfo | null>(null);
+  const [progress, setProgress] = createSignal<UpdateProgressInfo>({
+    downloaded: 0,
+    total: 0,
+    percentage: 0,
+  });
+  const [error, setError] = createSignal<string | null>(null);
+
+  let activeTauriUpdate: any = null;
+  let simulatedTimer: any = null;
+
+  const getTauriUpdaterPlugin = async () => {
+    if (typeof window === "undefined") return null;
+    try {
+      if ((window as any).__TAURI__?.updater) {
+        return (window as any).__TAURI__.updater;
+      }
+      const moduleName = "@tauri-apps/plugin-updater";
+      // @ts-ignore - Optional runtime dependency in Tauri apps
+      const plugin = await import(/* @vite-ignore */ moduleName).catch(() => null);
+      return plugin;
+    } catch {
+      return null;
+    }
+  };
+
+  const getTauriProcessPlugin = async () => {
+    if (typeof window === "undefined") return null;
+    try {
+      if ((window as any).__TAURI__?.process) {
+        return (window as any).__TAURI__.process;
+      }
+      const moduleName = "@tauri-apps/plugin-process";
+      // @ts-ignore - Optional runtime dependency in Tauri apps
+      const plugin = await import(/* @vite-ignore */ moduleName).catch(() => null);
+      return plugin;
+    } catch {
+      return null;
+    }
+  };
+
+  const checkForUpdates = async (): Promise<boolean> => {
+    setStatus("checking");
+    setError(null);
+
+    if (isTauriEnvironment()) {
+      try {
+        const updaterPlugin = await getTauriUpdaterPlugin();
+        if (updaterPlugin?.check) {
+          const update = await updaterPlugin.check();
+          if (update?.available) {
+            activeTauriUpdate = update;
+            const info: UpdateManifestInfo = {
+              version: update.version,
+              currentVersion: update.currentVersion || options.currentVersion || "v1.0.0",
+              date: update.date,
+              body: update.body || "Bug fixes and performance enhancements.",
+            };
+            setUpdateInfo(info);
+            setStatus("available");
+            options.onUpdateAvailable?.(info);
+            return true;
+          } else {
+            setStatus("up-to-date");
+            return false;
+          }
+        }
+      } catch (err: any) {
+        const errMsg = err?.message || String(err);
+        setError(errMsg);
+        setStatus("error");
+        options.onError?.(errMsg);
+        return false;
+      }
+    }
+
+    // In web preview / non-tauri mode, simulate checking
+    await new Promise((resolve) => setTimeout(resolve, 800));
+    setStatus("up-to-date");
+    return false;
+  };
+
+  const downloadAndInstall = async (): Promise<void> => {
+    if (status() !== "available" && status() !== "error") return;
+    setStatus("downloading");
+    setError(null);
+    setProgress({ downloaded: 0, total: 100, percentage: 0 });
+
+    if (isTauriEnvironment() && activeTauriUpdate?.downloadAndInstall) {
+      try {
+        let downloadedBytes = 0;
+        let contentLength = 0;
+
+        await activeTauriUpdate.downloadAndInstall((event: any) => {
+          if (event.event === "Started") {
+            contentLength = event.data?.contentLength || 100;
+          } else if (event.event === "Progress") {
+            downloadedBytes += event.data?.chunkLength || 0;
+            const pct = contentLength > 0 ? Math.min(100, Math.round((downloadedBytes / contentLength) * 100)) : 50;
+            setProgress({
+              downloaded: downloadedBytes,
+              total: contentLength,
+              percentage: pct,
+            });
+          } else if (event.event === "Finished") {
+            setProgress({
+              downloaded: contentLength,
+              total: contentLength,
+              percentage: 100,
+            });
+          }
+        });
+
+        setStatus("downloaded");
+        options.onDownloadFinished?.();
+        return;
+      } catch (err: any) {
+        const errMsg = err?.message || String(err);
+        setError(errMsg);
+        setStatus("error");
+        options.onError?.(errMsg);
+        return;
+      }
+    }
+
+    // Web simulation mode with smooth progress step
+    let currentPct = 0;
+    simulatedTimer = setInterval(() => {
+      currentPct += 15;
+      if (currentPct >= 100) {
+        clearInterval(simulatedTimer);
+        setProgress({ downloaded: 45.8 * 1024 * 1024, total: 45.8 * 1024 * 1024, percentage: 100 });
+        setStatus("downloaded");
+        options.onDownloadFinished?.();
+      } else {
+        const downloaded = (45.8 * 1024 * 1024 * currentPct) / 100;
+        setProgress({ downloaded, total: 45.8 * 1024 * 1024, percentage: currentPct });
+      }
+    }, 250);
+  };
+
+  const relaunch = async (): Promise<void> => {
+    if (isTauriEnvironment()) {
+      try {
+        const processPlugin = await getTauriProcessPlugin();
+        if (processPlugin?.relaunch) {
+          await processPlugin.relaunch();
+          return;
+        }
+      } catch {
+        // Fallback
+      }
+    }
+
+    if (typeof window !== "undefined") {
+      window.location.reload();
+    }
+  };
+
+  const dismiss = (): void => {
+    if (simulatedTimer) clearInterval(simulatedTimer);
+    setStatus("idle");
+    setError(null);
+  };
+
+  const simulateUpdate = (mockInfo?: Partial<UpdateManifestInfo>): void => {
+    if (simulatedTimer) clearInterval(simulatedTimer);
+    const info: UpdateManifestInfo = {
+      version: mockInfo?.version || "v1.2.0",
+      currentVersion: mockInfo?.currentVersion || options.currentVersion || "v1.0.0",
+      date: mockInfo?.date || new Date().toISOString().split("T")[0],
+      body:
+        mockInfo?.body ||
+        "### What's New in v1.2.0\n- Added native Window Titlebar tabs\n- Enhanced Tauri v2 capability security\n- Optimized SolidJS signal reactivity\n- Fixed titlebar drag region jitter on Linux",
+    };
+    setUpdateInfo(info);
+    setStatus("available");
+    setError(null);
+    setProgress({ downloaded: 0, total: 100, percentage: 0 });
+    options.onUpdateAvailable?.(info);
+  };
+
+  onMount(() => {
+    if (options.autoCheck) {
+      checkForUpdates();
+    }
+  });
+
+  const isLoading = () => status() === "checking" || status() === "downloading";
+
+  return {
+    status,
+    updateInfo,
+    progress,
+    error,
+    isLoading,
+    checkForUpdates,
+    downloadAndInstall,
+    relaunch,
+    dismiss,
+    simulateUpdate,
+  };
+}

package/src/create-document-tabs.ts

@@ -0,0 +1,267 @@
+import {
+  createSignal,
+  createMemo,
+  onMount,
+  onCleanup,
+  type Accessor,
+} from "solid-js";
+
+export interface TabItem<T = any> {
+  id: string;
+  title: string;
+  icon?: any;
+  isDirty?: boolean;
+  isPinned?: boolean;
+  closable?: boolean;
+  data?: T;
+}
+
+export interface CreateDocumentTabsOptions<T = any> {
+  /** Initial array of tab items. */
+  initialTabs?: TabItem<T>[];
+  /** Default active tab id. Defaults to first tab if available. */
+  defaultActiveId?: string;
+  /** Whether to enable keyboard shortcuts (Ctrl/Cmd+W to close active, Ctrl/Cmd+T for new tab). */
+  enableKeybindings?: boolean;
+  /** Callback triggered when the active tab changes. */
+  onTabChange?: (tab: TabItem<T> | undefined) => void;
+  /** Callback triggered before or when a tab closes. Return false to prevent closing. */
+  onTabClose?: (tab: TabItem<T>) => boolean | void;
+  /** Callback triggered when a new tab is created. */
+  onTabAdd?: (tab: TabItem<T>) => void;
+}
+
+export interface CreateDocumentTabsReturn<T = any> {
+  /** All tabs list. */
+  tabs: Accessor<TabItem<T>[]>;
+  /** Currently active tab ID. */
+  activeTabId: Accessor<string>;
+  /** Currently active tab object. */
+  activeTab: Accessor<TabItem<T> | undefined>;
+  /** Pinned tabs only. */
+  pinnedTabs: Accessor<TabItem<T>[]>;
+  /** Standard unpinned tabs. */
+  unpinnedTabs: Accessor<TabItem<T>[]>;
+  /** Whether any open tab has unsaved changes (isDirty). */
+  hasDirtyTabs: Accessor<boolean>;
+  /** Count of total open tabs. */
+  count: Accessor<number>;
+  /** Add a new tab to the list. */
+  addTab: (tab: TabItem<T>, activate?: boolean) => void;
+  /** Close a tab by ID with auto-switching to adjacent tab. */
+  closeTab: (id: string) => boolean;
+  /** Set the active tab. */
+  setActiveTab: (id: string) => void;
+  /** Mark or unmark a tab as dirty (unsaved changes). */
+  markDirty: (id: string, isDirty?: boolean) => void;
+  /** Toggle pinned state of a tab. */
+  togglePin: (id: string) => void;
+  /** Close all tabs except the specified one. */
+  closeOthers: (id: string) => void;
+  /** Close all open unpinned tabs. */
+  closeAll: (includePinned?: boolean) => void;
+  /** Switch to the next tab in sequence. */
+  nextTab: () => void;
+  /** Switch to the previous tab in sequence. */
+  prevTab: () => void;
+  /** Reorder tabs from one position to another. */
+  reorderTabs: (fromIndex: number, toIndex: number) => void;
+}
+
+function findLastPinnedIndex<T>(items: TabItem<T>[]): number {
+  for (let i = items.length - 1; i >= 0; i--) {
+    if (items[i].isPinned) return i;
+  }
+  return -1;
+}
+
+/**
+ * SolidJS reactive primitive for managing multi-document tabs, editor buffers, and browser tab states.
+ */
+export function createDocumentTabs<T = any>(
+  options: CreateDocumentTabsOptions<T> = {}
+): CreateDocumentTabsReturn<T> {
+  const initial = options.initialTabs || [];
+  const [tabs, setTabs] = createSignal<TabItem<T>[]>(initial);
+  const [activeTabId, setActiveTabId] = createSignal<string>(
+    options.defaultActiveId || (initial.length > 0 ? initial[0].id : "")
+  );
+
+  const activeTab = createMemo(() => tabs().find((t) => t.id === activeTabId()));
+  const pinnedTabs = createMemo(() => tabs().filter((t) => t.isPinned));
+  const unpinnedTabs = createMemo(() => tabs().filter((t) => !t.isPinned));
+  const hasDirtyTabs = createMemo(() => tabs().some((t) => t.isDirty));
+  const count = createMemo(() => tabs().length);
+
+  const setActive = (id: string) => {
+    const target = tabs().find((t) => t.id === id);
+    if (target) {
+      setActiveTabId(id);
+      options.onTabChange?.(target);
+    }
+  };
+
+  const addTab = (tab: TabItem<T>, activate = true) => {
+    const existing = tabs().find((t) => t.id === tab.id);
+    if (existing) {
+      if (activate) setActive(tab.id);
+      return;
+    }
+
+    setTabs((prev) => {
+      if (tab.isPinned) {
+        const lastPinnedIdx = findLastPinnedIndex(prev);
+        if (lastPinnedIdx === -1) return [tab, ...prev];
+        const next = [...prev];
+        next.splice(lastPinnedIdx + 1, 0, tab);
+        return next;
+      }
+      return [...prev, tab];
+    });
+
+    if (activate) {
+      setActiveTabId(tab.id);
+      options.onTabChange?.(tab);
+    }
+    options.onTabAdd?.(tab);
+  };
+
+  const closeTab = (id: string): boolean => {
+    const currentTabs = tabs();
+    const tabToClose = currentTabs.find((t) => t.id === id);
+    if (!tabToClose) return false;
+
+    if (options.onTabClose && options.onTabClose(tabToClose) === false) {
+      return false;
+    }
+
+    const closeIdx = currentTabs.findIndex((t) => t.id === id);
+    const nextTabs = currentTabs.filter((t) => t.id !== id);
+    setTabs(nextTabs);
+
+    if (activeTabId() === id) {
+      if (nextTabs.length === 0) {
+        setActiveTabId("");
+        options.onTabChange?.(undefined);
+      } else {
+        const nextIdx = Math.min(closeIdx, nextTabs.length - 1);
+        const nextActive = nextTabs[nextIdx];
+        setActiveTabId(nextActive.id);
+        options.onTabChange?.(nextActive);
+      }
+    }
+    return true;
+  };
+
+  const markDirty = (id: string, isDirty = true) => {
+    setTabs((prev) =>
+      prev.map((t) => (t.id === id ? { ...t, isDirty } : t))
+    );
+  };
+
+  const togglePin = (id: string) => {
+    setTabs((prev) => {
+      const target = prev.find((t) => t.id === id);
+      if (!target) return prev;
+      const updated = { ...target, isPinned: !target.isPinned };
+      const remaining = prev.filter((t) => t.id !== id);
+
+      if (updated.isPinned) {
+        const lastPinnedIdx = findLastPinnedIndex(remaining);
+        if (lastPinnedIdx === -1) return [updated, ...remaining];
+        remaining.splice(lastPinnedIdx + 1, 0, updated);
+        return remaining;
+      }
+      return [...remaining, updated];
+    });
+  };
+
+  const closeOthers = (id: string) => {
+    setTabs((prev) => prev.filter((t) => t.id === id || t.isPinned));
+    setActive(id);
+  };
+
+  const closeAll = (includePinned = false) => {
+    if (includePinned) {
+      setTabs([]);
+      setActiveTabId("");
+      options.onTabChange?.(undefined);
+    } else {
+      const pinned = tabs().filter((t) => t.isPinned);
+      setTabs(pinned);
+      if (pinned.length > 0) {
+        setActiveTabId(pinned[0].id);
+        options.onTabChange?.(pinned[0]);
+      } else {
+        setActiveTabId("");
+        options.onTabChange?.(undefined);
+      }
+    }
+  };
+
+  const nextTab = () => {
+    const list = tabs();
+    if (list.length <= 1) return;
+    const currentIdx = list.findIndex((t) => t.id === activeTabId());
+    const nextIdx = (currentIdx + 1) % list.length;
+    setActive(list[nextIdx].id);
+  };
+
+  const prevTab = () => {
+    const list = tabs();
+    if (list.length <= 1) return;
+    const currentIdx = list.findIndex((t) => t.id === activeTabId());
+    const prevIdx = (currentIdx - 1 + list.length) % list.length;
+    setActive(list[prevIdx].id);
+  };
+
+  const reorderTabs = (fromIndex: number, toIndex: number) => {
+    setTabs((prev) => {
+      if (fromIndex < 0 || fromIndex >= prev.length || toIndex < 0 || toIndex >= prev.length) {
+        return prev;
+      }
+      const clone = [...prev];
+      const [moved] = clone.splice(fromIndex, 1);
+      clone.splice(toIndex, 0, moved);
+      return clone;
+    });
+  };
+
+  onMount(() => {
+    if (!options.enableKeybindings || typeof window === "undefined") return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const isCmdOrCtrl = e.metaKey || e.ctrlKey;
+      if (isCmdOrCtrl && (e.key === "w" || e.key === "W")) {
+        const active = activeTabId();
+        if (active) {
+          e.preventDefault();
+          closeTab(active);
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => window.removeEventListener("keydown", handleKeyDown));
+  });
+
+  return {
+    tabs,
+    activeTabId,
+    activeTab,
+    pinnedTabs,
+    unpinnedTabs,
+    hasDirtyTabs,
+    count,
+    addTab,
+    closeTab,
+    setActiveTab: setActive,
+    markDirty,
+    togglePin,
+    closeOthers,
+    closeAll,
+    nextTab,
+    prevTab,
+    reorderTabs,
+  };
+}