@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/hooks/useDocument.tsx

@@ -0,0 +1,18 @@
+import { useSyncExternalStore } from "react";
+
+function subscribe() {
+  // Document object doesn't change, but we need a subscription for the hook
+  return () => {};
+}
+
+function getSnapshot() {
+  return typeof document !== "undefined" ? document : undefined;
+}
+
+function getServerSnapshot() {
+  return undefined;
+}
+
+export function useDocument() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/src/hooks/useDragSelect.ts

@@ -0,0 +1,116 @@
+import { useState, useCallback, useEffect } from "react";
+
+export interface UseDragSelectOptions {
+  onSelectionChange?: (selectedItems: Set<string>) => void;
+}
+
+export function useDragSelect(options: UseDragSelectOptions = {}) {
+  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragMode, setDragMode] = useState<"toggle" | "replace">("toggle");
+  const [dragStartItem, setDragStartItem] = useState<string | null>(null);
+
+  // Notify when selection changes
+  useEffect(() => {
+    options.onSelectionChange?.(selectedItems);
+  }, [selectedItems, options.onSelectionChange, options]);
+
+  const handleMouseDown = useCallback((id: string, e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+    setDragStartItem(id);
+
+    // Determine drag mode based on modifier keys
+    const mode = e.ctrlKey || e.metaKey ? "replace" : "toggle";
+    setDragMode(mode);
+
+    if (mode === "replace") {
+      // In replace mode, start fresh selection
+      setSelectedItems(new Set([id]));
+    } else {
+      // In toggle mode, toggle the starting item
+      setSelectedItems((prev) => {
+        const newSet = new Set(prev);
+        if (newSet.has(id)) {
+          newSet.delete(id);
+        } else {
+          newSet.add(id);
+        }
+        return newSet;
+      });
+    }
+  }, []);
+
+  const handleMouseEnter = useCallback(
+    (id: string) => {
+      if (!isDragging) return;
+      if (id === dragStartItem) return; // Don't re-process the starting item
+
+      if (dragMode === "replace") {
+        setSelectedItems((prev) => new Set([...prev, id]));
+      } else {
+        // In toggle mode, each item toggles its own state
+        setSelectedItems((prev) => {
+          const newSet = new Set(prev);
+          if (newSet.has(id)) {
+            newSet.delete(id);
+          } else {
+            newSet.add(id);
+          }
+          return newSet;
+        });
+      }
+    },
+    [isDragging, dragMode, dragStartItem],
+  );
+
+  // const handleMouseUp = useCallback(() => {
+  //   setIsDragging(false);
+  //   setDragStartItem(null);
+  // }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelectedItems(new Set());
+  }, []);
+
+  const isSelected = useCallback((id: string) => selectedItems.has(id), [selectedItems]);
+
+  const getItemProps = useCallback(
+    (id: string) => ({
+      "data-selected": selectedItems.has(id),
+      onMouseDown: (e: React.MouseEvent) => handleMouseDown(id, e),
+      onMouseEnter: () => handleMouseEnter(id),
+    }),
+    [selectedItems, handleMouseDown, handleMouseEnter],
+  );
+
+  // Handle global mouse up and escape key
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    const handleGlobalMouseUp = () => {
+      setIsDragging(false);
+      setDragStartItem(null);
+    };
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        clearSelection();
+      }
+    };
+
+    document.addEventListener("mouseup", handleGlobalMouseUp);
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("mouseup", handleGlobalMouseUp);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [clearSelection]);
+
+  return {
+    selectedItems,
+    isSelected,
+    clearSelection,
+    getItemProps,
+  };
+}

package/src/hooks/useIsMobile.ts

@@ -0,0 +1,35 @@
+import { useSyncExternalStore } from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+function subscribe(callback: () => void) {
+  if (typeof window === "undefined") {
+    return () => {};
+  }
+
+  const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+
+  // Modern browsers
+  if (mql.addEventListener) {
+    mql.addEventListener("change", callback);
+    return () => mql.removeEventListener("change", callback);
+  }
+
+  // Fallback for older browsers
+  mql.addListener(callback);
+  return () => mql.removeListener(callback);
+}
+
+function getSnapshot() {
+  if (typeof window === "undefined") return false;
+  return window.innerWidth < MOBILE_BREAKPOINT;
+}
+
+function getServerSnapshot() {
+  // Return false on server - most users are on desktop
+  return false;
+}
+
+export function useIsMobile() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/src/hooks/useLocalStorage.ts

@@ -0,0 +1,122 @@
+import { useCallback, useSyncExternalStore, useRef } from "react";
+
+// Store for managing localStorage state
+const localStorageStore = (() => {
+  const listeners = new Map<string, Set<() => void>>();
+
+  function subscribe(key: string, callback: () => void) {
+    if (!listeners.has(key)) {
+      listeners.set(key, new Set());
+    }
+    listeners.get(key)!.add(callback);
+
+    // Listen for storage events from other tabs/windows
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === key && e.storageArea === localStorage) {
+        listeners.get(key)?.forEach((listener) => listener());
+      }
+    };
+
+    if (typeof window !== "undefined") {
+      window.addEventListener("storage", handleStorageChange);
+    }
+
+    return () => {
+      listeners.get(key)?.delete(callback);
+      if (listeners.get(key)?.size === 0) {
+        listeners.delete(key);
+      }
+      if (typeof window !== "undefined") {
+        window.removeEventListener("storage", handleStorageChange);
+      }
+    };
+  }
+
+  function notifyListeners(key: string) {
+    listeners.get(key)?.forEach((listener) => listener());
+  }
+
+  return { subscribe, notifyListeners };
+})();
+
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T,
+): [T, (value: T | ((val: T) => T)) => void] {
+  // Use refs to store stable references
+  const keyRef = useRef(key);
+  const initialValueRef = useRef(initialValue);
+
+  // Update refs when props change
+  keyRef.current = key;
+  initialValueRef.current = initialValue;
+
+  const subscribe = useCallback(
+    (callback: () => void) => localStorageStore.subscribe(keyRef.current, callback),
+    [],
+  );
+
+  const getSnapshot = useCallback((): T => {
+    if (typeof window === "undefined") {
+      return initialValueRef.current;
+    }
+
+    try {
+      const item = window.localStorage.getItem(keyRef.current);
+      if (item === null) return initialValueRef.current;
+
+      // Handle different data types
+      if (typeof initialValueRef.current === "string") {
+        return item as T;
+      } else if (typeof initialValueRef.current === "number") {
+        return (parseFloat(item) || initialValueRef.current) as T;
+      } else if (typeof initialValueRef.current === "boolean") {
+        return (item === "true") as T;
+      } else {
+        // For objects and arrays, parse JSON
+        return JSON.parse(item);
+      }
+    } catch (error) {
+      console.warn(`Error reading localStorage key "${keyRef.current}":`, error);
+      return initialValueRef.current;
+    }
+  }, []);
+
+  const getServerSnapshot = useCallback((): T => {
+    return initialValueRef.current;
+  }, []);
+
+  const storedValue = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+  const setValue = useCallback(
+    (value: T | ((val: T) => T)) => {
+      try {
+        // Get current value for functional updates
+        const currentValue = getSnapshot();
+        // Allow value to be a function for functional updates
+        const valueToStore = value instanceof Function ? value(currentValue) : value;
+
+        // Save to localStorage only on client
+        if (typeof window !== "undefined") {
+          let stringValue: string;
+          if (typeof valueToStore === "string") {
+            stringValue = valueToStore;
+          } else if (typeof valueToStore === "number" || typeof valueToStore === "boolean") {
+            stringValue = valueToStore.toString();
+          } else {
+            stringValue = JSON.stringify(valueToStore);
+          }
+          window.localStorage.setItem(keyRef.current, stringValue);
+
+          // Notify all listeners for this key
+          localStorageStore.notifyListeners(keyRef.current);
+        }
+      } catch (error) {
+        console.warn(`Error setting localStorage key "${keyRef.current}":`, error);
+      }
+    },
+    [getSnapshot],
+  );
+
+  return [storedValue, setValue];
+}

package/src/hooks/useLocation.tsx

@@ -0,0 +1,95 @@
+import { useSyncExternalStore } from "react";
+
+interface LocationState {
+  href?: string;
+  pathname?: string;
+  search?: string;
+  hash?: string;
+  host?: string;
+  hostname?: string;
+  port?: string;
+  protocol?: string;
+  origin?: string;
+}
+
+let listeners: Array<() => void> = [];
+let currentSnapshot: LocationState | undefined = undefined;
+
+function updateSnapshot() {
+  if (typeof window === "undefined") {
+    currentSnapshot = undefined;
+    return;
+  }
+
+  currentSnapshot = {
+    href: window.location.href,
+    pathname: window.location.pathname,
+    search: window.location.search,
+    hash: window.location.hash,
+    host: window.location.host,
+    hostname: window.location.hostname,
+    port: window.location.port,
+    protocol: window.location.protocol,
+    origin: window.location.origin,
+  };
+}
+
+// Initialize snapshot
+updateSnapshot();
+
+function subscribe(callback: () => void) {
+  listeners.push(callback);
+
+  if (typeof window === "undefined") {
+    return () => {
+      listeners = listeners.filter((l) => l !== callback);
+    };
+  }
+
+  const notifyListeners = () => {
+    updateSnapshot();
+    listeners.forEach((listener) => listener());
+  };
+
+  // Listen to navigation events
+  window.addEventListener("popstate", notifyListeners);
+  window.addEventListener("hashchange", notifyListeners);
+
+  // Intercept pushState and replaceState
+  const originalPushState = window.history.pushState;
+  const originalReplaceState = window.history.replaceState;
+
+  window.history.pushState = function (...args) {
+    originalPushState.apply(window.history, args);
+    notifyListeners();
+  };
+
+  window.history.replaceState = function (...args) {
+    originalReplaceState.apply(window.history, args);
+    notifyListeners();
+  };
+
+  return () => {
+    listeners = listeners.filter((l) => l !== callback);
+    window.removeEventListener("popstate", notifyListeners);
+    window.removeEventListener("hashchange", notifyListeners);
+
+    // Restore original methods if no more listeners
+    if (listeners.length === 0) {
+      window.history.pushState = originalPushState;
+      window.history.replaceState = originalReplaceState;
+    }
+  };
+}
+
+function getSnapshot(): LocationState | undefined {
+  return currentSnapshot;
+}
+
+function getServerSnapshot(): LocationState | undefined {
+  return undefined;
+}
+
+export function useLocation() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/src/hooks/useQueryParams.tsx

@@ -0,0 +1,31 @@
+import { atom, useAtom } from "jotai";
+import { useEffect } from "react";
+
+import { useLocation } from "./useLocation";
+import { useWindow } from "./useWindow";
+
+const queryParamsAtom = atom<Record<string, string>>({});
+
+export function useQueryParams(key?: string) {
+  const [queryParams, setQueryParams] = useAtom(queryParamsAtom);
+
+  const window = useWindow();
+  const location = useLocation();
+
+  useEffect(() => {
+    if (!window) return;
+
+    const updateParams = () => {
+      const queries = new URLSearchParams(location?.search);
+      const params = Object.fromEntries(queries);
+      setQueryParams(params);
+    };
+
+    updateParams();
+    window.addEventListener("popstate", updateParams);
+    return () => window.removeEventListener("popstate", updateParams);
+  }, [window, location, setQueryParams]);
+
+  if (!window) return key ? null : {};
+  return key ? queryParams[key] || null : queryParams;
+}

package/src/hooks/useWindow.tsx

@@ -0,0 +1,18 @@
+import { useSyncExternalStore } from "react";
+
+function subscribe() {
+  // Window object doesn't change, but we need a subscription for the hook
+  return () => {};
+}
+
+function getSnapshot() {
+  return typeof window !== "undefined" ? window : undefined;
+}
+
+function getServerSnapshot() {
+  return undefined;
+}
+
+export function useWindow() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/src/index.css

@@ -0,0 +1,5 @@
+@import "tw-animate-css";
+
+@import "./styles/variables.css";
+@import "./styles/theme.css";
+@import "./styles/toast.css";

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./ui";
+export * from "./hooks";
+export * from "./highlight-cursor";
+export * from "./SyncScroll";
+export * from "./dial";

package/src/styles/theme.css

@@ -0,0 +1,152 @@
+@import "./variables.css";
+
+@custom-variant liquid (&:is(.liquid-dark *, .liquid-light *));
+
+@utility liquid-bg {
+  background: linear-gradient(
+    147.1deg,
+    rgba(172, 172, 172, 0.1) 0%,
+    rgba(74, 74, 74, 0.1) 105.28%
+  ) !important;
+  backdrop-filter: blur(20px) !important;
+}
+
+@utility liquid-bg-tooltip-arrow {
+  background: rgba(74, 74, 74, 0.1) !important;
+  backdrop-filter: blur(2px) !important;
+}
+
+@utility liquid-bg-tooltip-content {
+  background: rgba(74, 74, 74, 0.1) !important;
+  backdrop-filter: blur(2px) !important;
+}
+
+@utility liquid-bg-tooltip-top {
+  background: linear-gradient(
+    to bottom,
+    rgba(172, 172, 172, 0.1) 0%,
+    rgba(74, 74, 74, 0.1) 100%
+  ) !important;
+  backdrop-filter: blur(2px) !important;
+}
+
+@utility liquid-bg-tooltip-bottom {
+  background: linear-gradient(
+    to top,
+    rgba(172, 172, 172, 0.1) 0%,
+    rgba(74, 74, 74, 0.1) 100%
+  ) !important;
+  backdrop-filter: blur(2px) !important;
+}
+
+@utility liquid-bg-tooltip-left {
+  background: linear-gradient(
+    to right,
+    rgba(172, 172, 172, 0.1) 0%,
+    rgba(74, 74, 74, 0.1) 100%
+  ) !important;
+  backdrop-filter: blur(2px) !important;
+}
+
+@utility liquid-bg-tooltip-right {
+  background: linear-gradient(
+    to left,
+    rgba(172, 172, 172, 0.1),
+    rgba(74, 74, 74, 0.1)
+  ) !important;
+  backdrop-filter: blur(2px) !important;
+}
+
+@utility scrollbar-hide {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility scrollbar-track-transparent {
+  scrollbar-color: var(--bg-tertiary) transparent;
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: var(--bg-tertiary);
+    border-radius: 4px;
+  }
+}
+
+@theme inline {
+  --font-sans: Inter;
+  --font-number-input: "Fira Mono";
+
+  /* color */
+  --color-brand-primary: var(--brand-primary);
+  --color-brand-hover: var(--brand-hover);
+  --color-brand-pressed: var(--brand-pressed);
+  --color-alt-primary: var(--alt-primary);
+  --color-alt-hover: var(--alt-hover);
+  --color-alt-pressed: var(--alt-pressed);
+  --color-group-primary: var(--group-primary);
+  --color-group-hover: var(--group-hover);
+  --color-group-pressed: var(--group-pressed);
+  --color-text-highlight: var(--text-highlight);
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-tertiary: var(--text-tertiary);
+  --color-text-withbg: var(--text-withbg);
+  --color-bg-primary: var(--bg-primary);
+  --color-bg-secondary: var(--bg-secondary);
+  --color-bg-tertiary: var(--bg-tertiary);
+  --color-bg-quaternary: var(--bg-quaternary);
+  --color-bg-mask: var(--bg-mask);
+  --color-icon-highlight: var(--icon-highlight);
+  --color-icon-primary: var(--icon-primary);
+  --color-icon-secondary: var(--icon-secondary);
+  --color-icon-tertiary: var(--icon-tertiary);
+  --color-icon-withbg: var(--icon-withbg);
+  --color-danger-primary: var(--danger-primary);
+  --color-danger-secondary: var(--danger-secondary);
+  --color-danger-tertiary: var(--danger-tertiary);
+  --color-accent-warning: var(--accent-warning);
+  --color-accent-success: var(--accent-success);
+  --color-line-primary: var(--line-primary);
+  --color-line-secondary: var(--line-secondary);
+  --color-shadow-primary: var(--shadow-primary);
+  --color-shadow-secondary: var(--shadow-secondary);
+  --color-select-secondary: var(--select-secondary);
+  /* radius */
+  --radius-uk-xs: var(--radius); /* 4px */
+  --radius-uk-sm: calc(var(--radius) + 2px); /* 6px */
+  --radius-uk-md: calc(var(--radius) + 4px); /* 8px */
+  --radius-uk-lg: calc(var(--radius) + 10px); /* 12px */
+  --radius-uk-xl: calc(var(--radius) + 13px); /* 16px */
+  /* spacing */
+  --spacing-xxs: calc(var(--spacing) - 2px); /* 2px */
+  --spacing-xs: var(--spacing); /* 4px */
+  --spacing-sm: calc(var(--spacing) + 2px); /* 6px */
+  --spacing-md: calc(var(--spacing) + 4px); /* 8px */
+  --spacing-lg: calc(var(--spacing) + 9px); /* 12px */
+  --spacing-xl: calc(var(--spacing) + 12px); /* 16px */
+  /* font-size */
+  --text-uk-hint: 10px; /* hint text */
+  --text-uk-xs: 11px; /* primary text, input title */
+  --text-uk-sm: 12px; /* tab, highlight text, numbers */
+  --text-uk-subtitle: 13px; /* subtitle */
+  --text-uk-md: 14px; /* primary body, panel title */
+  --text-uk-lg: 16px; /* page title */
+  --text-uk-h3: 20px; /* heading 3 */
+  --text-uk-h2: 24px; /* heading 2 */
+  --text-uk-h1: 30px; /* heading 1 */
+  /* line-height */
+  --leading-uk-hint: 12px; /* hint text */
+  --leading-uk-xs: 14px; /* primary text, input title */
+  --leading-uk-sm: 16px; /* tab, highlight text, numbers */
+  --leading-uk-subtitle: 18px; /* subtitle */
+  --leading-uk-md: 20px; /* primary body, panel title */
+  --leading-uk-lg: 24px; /* page title */
+  --leading-uk-h3: 28px; /* heading 3 */
+  --leading-uk-h2: 32px; /* heading 2 */
+  --leading-uk-h1: 36px; /* heading 1 */
+}

package/src/styles/toast.css

@@ -0,0 +1,67 @@
+.vk-toast,
+[data-sonner-toast].vk-toast {
+  background: var(--color-bg-primary) !important;
+  border: none !important;
+  border-radius: var(--radius-uk-md) !important;
+  padding: var(--spacing-lg) !important;
+  box-shadow: 0px 4px 16px 0px var(--color-shadow-secondary) !important;
+  padding-right: 60px !important;
+}
+
+.vk-toast [data-title] {
+  color: var(--color-text-primary) !important;
+  font-size: var(--text-uk-md) !important;
+  line-height: var(--leading-uk-md) !important;
+  font-weight: 500 !important;
+  display: -webkit-box;
+  line-clamp: 1;
+  box-orient: vertical;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.vk-toast-description {
+  color: var(--color-text-secondary) !important;
+  font-size: var(--text-uk-sm) !important;
+  line-height: var(--leading-uk-sm) !important;
+  font-weight: 400 !important;
+  display: -webkit-box;
+  line-clamp: 3;
+  box-orient: vertical;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.vk-toast button[data-button] {
+  background: transparent !important;
+  color: var(--color-text-primary) !important;
+  border: none !important;
+  font-size: var(--text-uk-sm) !important;
+  line-height: var(--leading-uk-sm) !important;
+  font-weight: 400 !important;
+  border-top-right-radius: var(--radius-uk-md) !important;
+  border-bottom-right-radius: var(--radius-uk-md) !important;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  text-decoration: none !important;
+  cursor: pointer !important;
+  position: absolute !important;
+  right: 0 !important;
+  top: 0 !important;
+  height: 100% !important;
+  width: 60px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  text-overflow: ellipsis !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+}
+
+.vk-toast button[data-button]:hover {
+  background: var(--color-bg-secondary) !important;
+}