@zuzjs/ui 0.9.7 → 0.9.82

package/dist/cjs/funs/index.js

@@ -502,3 +502,45 @@ export const checkPasswordStrength = (password) => {
         suggestion: suggestions
     };
 };
+export const getCaretCoordinates = (element, position) => {
+    const div = document.createElement('div');
+    const style = window.getComputedStyle(element);
+    const properties = [
+        'fontFamily', 'fontSize', 'fontWeight', 'letterSpacing',
+        'lineHeight', 'paddingLeft', 'paddingTop', 'borderLeftWidth',
+        'borderTopWidth', 'boxSizing', 'width', 'height', 'overflow'
+    ];
+    // Copy styles to temporary div
+    properties.forEach(prop => {
+        div.style.setProperty(prop, style.getPropertyValue(prop));
+    });
+    div.style.position = 'absolute';
+    div.style.visibility = 'hidden';
+    div.style.whiteSpace = 'pre-wrap';
+    div.style.wordWrap = 'break-word';
+    div.textContent = element.value.substring(0, position);
+    // Append a span to measure caret position
+    const span = document.createElement('span');
+    span.textContent = element.value.substring(position) || ' ';
+    div.appendChild(span);
+    document.body.appendChild(div);
+    // Get coordinates
+    const rect = span.getBoundingClientRect();
+    const textareaRect = element.getBoundingClientRect();
+    const coordinates = {
+        top: rect.top - textareaRect.top + element.scrollTop,
+        left: rect.left - textareaRect.left + element.scrollLeft,
+    };
+    document.body.removeChild(div);
+    return coordinates;
+};
+export const urlBase64ToUint8Array = (base64String) => {
+    const padding = '='.repeat((4 - base64String.length % 4) % 4);
+    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+    const rawData = window.atob(base64);
+    const outputArray = new Uint8Array(rawData.length);
+    for (let i = 0; i < rawData.length; ++i) {
+        outputArray[i] = rawData.charCodeAt(i);
+    }
+    return outputArray;
+};

package/dist/cjs/funs/stylesheet.js

@@ -257,6 +257,7 @@ export const cssProps = {
     "backdropFilter": "backdrop-filter",
     "placeItems": "place-items",
     "placeContent": "place-content",
+    "corner": "corner-shape",
 };
 export const cssDirect = {
     "extend": "@extend __VALUE__;",

package/dist/cjs/hooks/index.d.ts

@@ -2,6 +2,7 @@ export { default as useAnchorPosition } from './useAnchorPosition';
 export { default as useBase } from './useBase';
 export { default as useCalendar } from './useCalendar';
 export { useColorScheme } from './useColorScheme';
+export { default as useCommandActions, type Command, type CommandActionProps } from './useCommandActions';
 export { default as useContextMenu } from './useContextMenu';
 export { default as useDB, type IDBOptions, type IDBSchema } from './useDB';
 export { default as useDebounce } from './useDebounce';
@@ -28,6 +29,7 @@ export { default as useSheet } from './useSheet';
 export { default as useShortcuts } from './useShortcuts';
 export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as usePosition } from './usePosition';
+export { default as usePushNotifications, type PushNotificationsOptions, type PushNotificationsResult, type PushSubscriptionMeta } from './usePushNotifications';
 export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSlider } from './useSlider';
 export { default as useToast } from './useToast';

package/dist/cjs/hooks/index.js

@@ -2,6 +2,7 @@ export { default as useAnchorPosition } from './useAnchorPosition';
 export { default as useBase } from './useBase';
 export { default as useCalendar } from './useCalendar';
 export { useColorScheme } from './useColorScheme';
+export { default as useCommandActions } from './useCommandActions';
 export { default as useContextMenu } from './useContextMenu';
 export { default as useDB } from './useDB';
 export { default as useDebounce } from './useDebounce';
@@ -29,6 +30,7 @@ export { default as useSheet } from './useSheet';
 export { default as useShortcuts } from './useShortcuts';
 export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as usePosition } from './usePosition';
+export { default as usePushNotifications } from './usePushNotifications';
 export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSlider } from './useSlider';
 export { default as useToast } from './useToast';

package/dist/cjs/hooks/useCommandActions.d.ts

@@ -0,0 +1,29 @@
+import { RefObject } from "react";
+export type Command = {
+    label: string;
+    value: string;
+    icon?: string;
+    type?: 'command' | 'submenu' | 'action';
+    subCommands?: Command[];
+    action?: React.ReactNode | ((props: {
+        onSelect: (value: string) => void;
+    }) => React.ReactNode);
+};
+export type CommandActionProps = {
+    command?: string;
+    commands?: Command[];
+    cmd?: (value: string, textarea: HTMLTextAreaElement | HTMLInputElement) => void;
+    ref: RefObject<HTMLTextAreaElement | HTMLInputElement | null>;
+};
+declare const useCommandActions: ({ command, commands, cmd, ref, }: CommandActionProps) => {
+    showDropdown: boolean;
+    dropdownPosition: {
+        top: number;
+        left: number;
+    };
+    handleKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
+    handleInput: (event: React.FormEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
+    handleCommandSelect: (value: string) => void;
+    parentRef: RefObject<HTMLDivElement | null>;
+};
+export default useCommandActions;

package/dist/cjs/hooks/useCommandActions.js

@@ -0,0 +1,104 @@
+import { useEffect } from "react";
+import { useState } from "react";
+import { useRef } from "react";
+const useCommandActions = ({ command = '/', commands = [], cmd, ref, }) => {
+    const [commandStart, setCommandStart] = useState(-1);
+    const [showDropdown, setShowDropdown] = useState(false);
+    const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
+    const parentRef = useRef(null);
+    const handleInput = (event) => {
+        const textarea = ref.current;
+        if (textarea && showDropdown) {
+            const { value } = textarea;
+            if (commandStart < 0 || commandStart >= value.length || value[commandStart] !== command) {
+                setShowDropdown(false);
+            }
+        }
+    };
+    const handleKeyDown = (event) => {
+        const textarea = ref.current;
+        if (!textarea)
+            return;
+        const { selectionStart } = textarea;
+        if (event.key === command) {
+            setCommandStart(selectionStart || -1);
+            const caretPos = getCaretCoordinates(textarea, selectionStart || -1);
+            setDropdownPosition({
+                top: caretPos.top + 20,
+                left: caretPos.left,
+            });
+            setShowDropdown(true);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            setShowDropdown(false);
+        }
+    };
+    const handleCommandSelect = (value) => {
+        const textarea = ref.current;
+        if (!textarea)
+            return;
+        if (cmd) {
+            cmd(value, textarea);
+        }
+        else {
+            const { value: currentValue, selectionStart } = textarea;
+            const newValue = currentValue.slice(0, commandStart) +
+                value +
+                currentValue.slice(selectionStart || -1);
+            textarea.value = newValue;
+            textarea.setSelectionRange(commandStart + value.length, commandStart + value.length);
+            const event = new Event('input', { bubbles: true });
+            textarea.dispatchEvent(event);
+        }
+        setShowDropdown(false);
+        textarea.focus();
+    };
+    const getCaretCoordinates = (element, position) => {
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        if (!context) {
+            return { top: 0, left: 0 };
+        }
+        const style = window.getComputedStyle(element);
+        context.font = `${style.fontSize} ${style.fontFamily}`;
+        const text = element.value.substring(0, position);
+        const lines = text.split('\n');
+        const lastLine = lines[lines.length - 1];
+        const left = context.measureText(lastLine).width;
+        const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.2;
+        const top = (lines.length - 1) * lineHeight;
+        const paddingTop = parseFloat(style.paddingTop) || 0;
+        const paddingLeft = parseFloat(style.paddingLeft) || 0;
+        const scrollTop = element.scrollTop;
+        canvas.remove();
+        return {
+            top: top - scrollTop + paddingTop,
+            left: left + paddingLeft,
+        };
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current &&
+                parentRef.current &&
+                !ref.current.contains(event.target) &&
+                !parentRef.current.contains(event.target)) {
+                setShowDropdown(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [ref]);
+    return {
+        showDropdown,
+        dropdownPosition,
+        handleKeyDown,
+        handleInput,
+        handleCommandSelect,
+        parentRef,
+    };
+};
+export default useCommandActions;

package/dist/cjs/hooks/usePosition.d.ts

@@ -5,7 +5,8 @@ interface PositionOptions {
     container?: HTMLElement | null;
     triggerRef?: React.RefObject<HTMLElement>;
 }
-export declare const usePosition: (ref: React.RefObject<HTMLElement>, options?: PositionOptions) => {
+export declare const usePosition: (ref: React.RefObject<HTMLElement>, // The element to be positioned
+options?: PositionOptions) => {
     postion: "fixed" | "absolute" | null;
     reposition: () => void;
 };

package/dist/cjs/hooks/usePushNotifications.d.ts

@@ -0,0 +1,45 @@
+export type PushSubscriptionMeta = {
+    endpoint: string;
+    keys: {
+        p256dh: string;
+        auth: string;
+    };
+};
+export type PushNotificationsOptions = {
+    /**
+     * VAPID public key (required for subscription)
+     */
+    vapidPublicKey: string;
+    /**
+     * Path to your service worker file
+     * @default '/sw.js'
+     */
+    serviceWorkerPath?: string;
+    /**
+     * Auto-request permission on mount
+     * @default false
+     */
+    requestPermissionOnMount?: boolean;
+};
+export type PushNotificationsResult = {
+    /** Current permission state */
+    permission: NotificationPermission;
+    /** Push subscription object (or null if not subscribed) */
+    subscription: PushSubscription | null;
+    /** JSON representation of subscription (easy to send to backend) */
+    subscriptionMeta: PushSubscriptionMeta | null;
+    /** Is push supported in this browser? */
+    isSupported: boolean;
+    /** Request permission and subscribe */
+    subscribe: () => Promise<PushSubscription | null>;
+    /** Unsubscribe from push */
+    unsubscribe: () => Promise<boolean>;
+    /** Request notification permission only */
+    requestPermission: () => Promise<NotificationPermission>;
+    /** Error state */
+    error: string | null;
+    /** Loading state */
+    isLoading: boolean;
+};
+declare const usePushNotifications: (options: PushNotificationsOptions) => PushNotificationsResult;
+export default usePushNotifications;

package/dist/cjs/hooks/usePushNotifications.js

@@ -0,0 +1,166 @@
+import { useCallback, useEffect, useState } from "react";
+import { urlBase64ToUint8Array } from "../funs";
+const usePushNotifications = (options) => {
+    const { vapidPublicKey, serviceWorkerPath = '/sw.js', requestPermissionOnMount = false, } = options;
+    const [permission, setPermission] = useState('default');
+    const [subscription, setSubscription] = useState(null);
+    const [subscriptionMeta, setSubscriptionMeta] = useState(null);
+    const [error, setError] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [registration, setRegistration] = useState(null);
+    const [isSupported, setIsSupported] = useState(false);
+    // Register service worker
+    const registerServiceWorker = useCallback(async () => {
+        if (!isSupported)
+            return null;
+        try {
+            const reg = await navigator.serviceWorker.register(serviceWorkerPath, {
+                scope: '/',
+                updateViaCache: 'all',
+            });
+            setRegistration(reg);
+            return reg;
+        }
+        catch (err) {
+            console.error('Service Worker registration failed:', err);
+            setError('Failed to register service worker');
+            return null;
+        }
+    }, [serviceWorkerPath, isSupported]);
+    // Get current subscription
+    const getCurrentSubscription = useCallback(async (reg) => {
+        try {
+            const sub = await reg.pushManager.getSubscription();
+            setSubscription(sub);
+            if (sub) {
+                setSubscriptionMeta(sub.toJSON());
+            }
+            else {
+                setSubscriptionMeta(null);
+            }
+            return sub;
+        }
+        catch (err) {
+            console.error('Failed to get subscription:', err);
+            setError('Failed to get subscription');
+            return null;
+        }
+    }, []);
+    // Subscribe to push
+    const subscribe = useCallback(async () => {
+        if (!isSupported || !registration) {
+            setError('Push not supported or service worker not registered');
+            return null;
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            const permissionResult = await Notification.requestPermission();
+            setPermission(permissionResult);
+            if (permissionResult !== 'granted') {
+                setError('Permission not granted for notifications');
+                setIsLoading(false);
+                return null;
+            }
+            const applicationServerKey = urlBase64ToUint8Array(vapidPublicKey);
+            const pushSubscription = await registration.pushManager.subscribe({
+                userVisibleOnly: true,
+                applicationServerKey,
+            });
+            setSubscription(pushSubscription);
+            setSubscriptionMeta(pushSubscription.toJSON());
+            setIsLoading(false);
+            return pushSubscription;
+        }
+        catch (err) {
+            console.error('Subscription failed:', err);
+            setError(err.message || 'Failed to subscribe');
+            setIsLoading(false);
+            return null;
+        }
+    }, [isSupported, registration, vapidPublicKey]);
+    // Unsubscribe
+    const unsubscribe = useCallback(async () => {
+        if (!subscription)
+            return true;
+        try {
+            const result = await subscription.unsubscribe();
+            if (result) {
+                setSubscription(null);
+                setSubscriptionMeta(null);
+            }
+            return result;
+        }
+        catch (err) {
+            console.error('Failed to unsubscribe:', err);
+            return false;
+        }
+    }, [subscription]);
+    // Request permission only
+    const requestPermission = useCallback(async () => {
+        const result = await Notification.requestPermission();
+        setPermission(result);
+        return result;
+    }, []);
+    // Initialize
+    useEffect(() => {
+        const _isSupported = 'PushManager' in window && 'serviceWorker' in navigator;
+        setIsSupported(_isSupported);
+        if (!_isSupported) {
+            setError('Push notifications not supported in this browser');
+            return;
+        }
+        let isMounted = true;
+        const init = async () => {
+            const reg = await registerServiceWorker();
+            if (!reg || !isMounted)
+                return;
+            setPermission(Notification.permission);
+            await getCurrentSubscription(reg);
+            if (requestPermissionOnMount && Notification.permission === 'default') {
+                await requestPermission();
+            }
+        };
+        init();
+        return () => {
+            isMounted = false;
+        };
+    }, [
+        isSupported,
+        registerServiceWorker,
+        getCurrentSubscription,
+        requestPermissionOnMount,
+        requestPermission,
+    ]);
+    // Listen for permission changes
+    useEffect(() => {
+        if (!('permissions' in navigator))
+            return;
+        let revoked = false;
+        const checkPermission = async () => {
+            if (revoked)
+                return;
+            const perm = await navigator.permissions.query({ name: 'notifications' });
+            perm.onchange = () => {
+                setPermission(Notification.permission);
+                if (Notification.permission === 'denied') {
+                    revoked = true;
+                    unsubscribe();
+                }
+            };
+        };
+        checkPermission();
+    }, [unsubscribe]);
+    return {
+        permission,
+        subscription,
+        subscriptionMeta,
+        isSupported,
+        subscribe,
+        unsubscribe,
+        requestPermission,
+        error,
+        isLoading,
+    };
+};
+export default usePushNotifications;

package/dist/cjs/hooks/useSlider.d.ts

@@ -2,6 +2,6 @@ declare const useSlider: () => {
     push: (key: string) => void;
     goBack: () => void;
     prevKey: string | null;
-    direction: "left" | "right";
+    direction: "right" | "left";
 };
 export default useSlider;