@nikala-ui/hooks 0.10.1 → 0.11.0-nightly.b01fa01

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nikala-ui/hooks",
-  "version": "0.10.1",
+  "version": "0.11.0-nightly.b01fa01",
   "description": "Reactive SolidJS primitives and primitives for Nikala UI",
   "type": "module",
   "main": "./src/index.ts",

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-chat-scroll.ts

@@ -0,0 +1,113 @@
+import { createSignal, createEffect, onCleanup, onMount, type Accessor } from "solid-js";
+
+export interface CreateChatScrollOptions {
+  /** Target scrollable container element or accessor */
+  target: HTMLElement | Accessor<HTMLElement | undefined>;
+  /** Dependency accessor (e.g. messages length or content signal) that triggers auto-scroll when changed */
+  trigger?: Accessor<any>;
+  /** Threshold in pixels from bottom to consider the container "at bottom". Defaults to 40. */
+  threshold?: number;
+  /** Whether auto-scroll is enabled. Defaults to true. */
+  enabled?: boolean | Accessor<boolean>;
+  /** Scroll behavior: "smooth" or "auto". Defaults to "smooth". */
+  behavior?: ScrollBehavior;
+}
+
+export interface CreateChatScrollReturn {
+  /** Accessor indicating whether the container is currently scrolled to the bottom */
+  isAtBottom: Accessor<boolean>;
+  /** Accessor indicating whether user has manually scrolled up away from bottom */
+  isScrolledUp: Accessor<boolean>;
+  /** Programmatically scroll container directly to the bottom */
+  scrollToBottom: (options?: { smooth?: boolean }) => void;
+}
+
+/**
+ * SolidJS reactive primitive for chat and streaming message auto-scrolling with user scroll detection.
+ *
+ * @param options Chat scroll configuration options.
+ */
+export function createChatScroll(options: CreateChatScrollOptions): CreateChatScrollReturn {
+  const [isAtBottom, setIsAtBottom] = createSignal<boolean>(true);
+  const isScrolledUp = () => !isAtBottom();
+
+  const getElement = (): HTMLElement | undefined => {
+    if (typeof options.target === "function") {
+      return (options.target as Accessor<HTMLElement | undefined>)();
+    }
+    return options.target;
+  };
+
+  const isEnabled = () => {
+    if (typeof options.enabled === "function") {
+      return (options.enabled as Accessor<boolean>)();
+    }
+    return options.enabled ?? true;
+  };
+
+  const threshold = options.threshold ?? 40;
+
+  const checkIfAtBottom = () => {
+    const el = getElement();
+    if (!el) return true;
+    const distanceToBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    return distanceToBottom <= threshold;
+  };
+
+  const scrollToBottom = (opts?: { smooth?: boolean }) => {
+    const el = getElement();
+    if (!el) return;
+
+    const useSmooth = opts?.smooth ?? (options.behavior === "smooth" || options.behavior === undefined);
+
+    el.scrollTo({
+      top: el.scrollHeight,
+      behavior: useSmooth ? "smooth" : "auto",
+    });
+    setIsAtBottom(true);
+  };
+
+  const handleScroll = () => {
+    const atBottom = checkIfAtBottom();
+    setIsAtBottom(atBottom);
+  };
+
+  onMount(() => {
+    if (typeof window === "undefined") return;
+
+    const el = getElement();
+    if (el) {
+      el.addEventListener("scroll", handleScroll, { passive: true });
+      setIsAtBottom(checkIfAtBottom());
+    }
+  });
+
+  onCleanup(() => {
+    if (typeof window === "undefined") return;
+    const el = getElement();
+    if (el) {
+      el.removeEventListener("scroll", handleScroll);
+    }
+  });
+
+  // Watch trigger dependencies (e.g. messages length or stream tokens)
+  if (options.trigger) {
+    createEffect(() => {
+      // Track trigger dependency
+      options.trigger!();
+
+      if (isEnabled() && isAtBottom()) {
+        // Run after microtask/DOM paint
+        setTimeout(() => {
+          scrollToBottom({ smooth: true });
+        }, 10);
+      }
+    });
+  }
+
+  return {
+    isAtBottom,
+    isScrolledUp,
+    scrollToBottom,
+  };
+}

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,
+  };
+}