@creopse/bridge 0.0.1 → 0.1.0

package/dist/react/components/AsyncImg/AsyncImg.d.ts

@@ -0,0 +1,12 @@
+import React, { type CSSProperties } from 'react';
+export interface Props {
+    load: () => Promise<string>;
+    alt?: string;
+    width?: string | number;
+    height?: string | number;
+    title?: string;
+    loading?: 'lazy' | 'eager';
+    style?: CSSProperties;
+}
+declare const AsyncImg: React.FC<Props>;
+export default AsyncImg;

package/dist/react/components/AsyncImg/AsyncImg.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+const AsyncImg = ({ load, alt, width, height, title, loading, style }) => {
+    const [url, setUrl] = useState('');
+    useEffect(() => {
+        const init = async () => {
+            try {
+                const loadedUrl = await load();
+                setUrl(loadedUrl);
+            }
+            catch (error) {
+                console.error('Failed to load image:', error);
+                // Optionally set a fallback image or error state
+            }
+        };
+        init();
+    }, [load]);
+    return (_jsx("img", { src: url, alt: alt, title: title, style: style, width: width, height: height, loading: loading }));
+};
+export default AsyncImg;

package/dist/react/components/AsyncImg/index.d.ts

@@ -0,0 +1 @@
+export { default as AsyncImg, type Props as AsyncImgProps } from './AsyncImg';

package/dist/react/components/AsyncImg/index.js

@@ -0,0 +1 @@
+export { default as AsyncImg } from './AsyncImg';

package/dist/react/components/CustomTransition/CustomTransition.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type Animation = 'fade' | 'slide-fade' | 'bounce';
+type Mode = 'wait' | 'sync' | 'popLayout' | undefined;
+export interface Props {
+    name?: Animation;
+    mode?: Mode;
+    appear?: boolean;
+    children?: React.ReactNode;
+    contentKey?: string | number;
+}
+declare const CustomTransition: React.FC<Props>;
+export default CustomTransition;

package/dist/react/components/CustomTransition/CustomTransition.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, AnimatePresence } from 'framer-motion';
+const CustomTransition = ({ name = 'fade', mode = 'wait', appear = false, children, contentKey = 'default', }) => {
+    const animations = {
+        fade: {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: { duration: 0.5, ease: 'easeInOut' },
+        },
+        'slide-fade': {
+            initial: { opacity: 0, x: 20 },
+            animate: { opacity: 1, x: 0 },
+            exit: { opacity: 0, x: 20 },
+            transition: {
+                duration: 0.3,
+                ease: 'easeOut'
+            },
+            // Separate exit transition
+            exitTransition: {
+                duration: 0.8,
+                ease: [0.36, 0.66, 0.04, 1]
+            },
+        },
+        bounce: {
+            initial: { scale: 0 },
+            animate: { scale: 1 },
+            exit: { scale: 0 },
+            transition: {
+                duration: 0.5,
+                type: 'spring',
+                bounce: 0.4,
+            },
+        },
+    };
+    const animation = animations[name];
+    // For AnimatePresence modes
+    if (mode) {
+        return (_jsx(AnimatePresence, { mode: mode, initial: appear, children: _jsx(motion.div, { initial: animation.initial, animate: animation.animate, exit: animation.exit, transition: animation.transition, ...(name === 'slide-fade' && {
+                    exit: animation.exit,
+                    // @ts-expect-error - exitTransition is a custom property we added
+                    transition: { ...animation.transition, exit: animation.exitTransition }
+                }), children: children }, contentKey) }));
+    }
+    // For simple animations without AnimatePresence
+    return (_jsx(motion.div, { initial: appear ? animation.initial : false, animate: animation.animate, transition: animation.transition, children: children }));
+};
+export default CustomTransition;

package/dist/react/components/CustomTransition/index.d.ts

@@ -0,0 +1 @@
+export { default as CustomTransition, type Props as CustomTransitionProps, } from './CustomTransition';

package/dist/react/components/CustomTransition/index.js

@@ -0,0 +1 @@
+export { default as CustomTransition, } from './CustomTransition';

package/dist/react/components/Image/Image.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface Props {
+    src: string;
+    alt?: string;
+    width?: string | number;
+    height?: string | number;
+    title?: string;
+    loading?: 'lazy' | 'eager';
+    style?: React.CSSProperties;
+    size?: 'small' | 'medium' | 'large' | 'original';
+    sync?: boolean;
+}
+declare const Image: React.FC<Props>;
+export default Image;

package/dist/react/components/Image/Image.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AsyncImg } from '../AsyncImg';
+import { useCoreBridge } from '../../hooks/core-bridge';
+const Image = (props) => {
+    const { src, alt = '', width, height, title, loading, style, size = 'original', sync = false } = props;
+    const { helpers: { getImage }, } = useCoreBridge();
+    const filteredProps = {
+        alt,
+        width,
+        height,
+        title,
+        loading,
+        style,
+    };
+    if (sync) {
+        return _jsx("img", { src: src, ...filteredProps });
+    }
+    return _jsx(AsyncImg, { load: () => getImage(src, size), ...filteredProps });
+};
+export default Image;

package/dist/react/components/Image/index.d.ts

@@ -0,0 +1 @@
+export { default as Image, type Props as ImageProps } from './Image';

package/dist/react/components/Image/index.js

@@ -0,0 +1 @@
+export { default as Image } from './Image';

package/dist/react/components/MountedTeleport/MountedTeleport.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface Props {
+    to: string | HTMLElement;
+    children: React.ReactNode;
+    disabled?: boolean;
+}
+declare const MountedTeleport: React.FC<Props>;
+export default MountedTeleport;

package/dist/react/components/MountedTeleport/MountedTeleport.js

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+const MountedTeleport = ({ to, children, disabled = false, }) => {
+    const [isMounted, setIsMounted] = useState(false);
+    const [targetElement, setTargetElement] = useState(null);
+    useEffect(() => {
+        setIsMounted(true);
+        // Only cleanup on unmount, not on every effect run
+        return () => {
+            setIsMounted(false);
+        };
+    }, []);
+    useEffect(() => {
+        if (!isMounted || disabled) {
+            setTargetElement(null);
+            return;
+        }
+        let target = null;
+        if (typeof to === 'string') {
+            target = document.querySelector(to);
+            if (!target) {
+                console.warn(`MountedTeleport: Target element not found for selector "${to}"`);
+                setTargetElement(null);
+                return;
+            }
+        }
+        else if (to instanceof HTMLElement) {
+            target = to;
+        }
+        else {
+            console.warn('MountedTeleport: Invalid target type. Expected string selector or HTMLElement.');
+            setTargetElement(null);
+            return;
+        }
+        setTargetElement(target);
+    }, [to, isMounted, disabled]);
+    // Don't render if not mounted, disabled, or no valid target
+    if (!isMounted || disabled || !targetElement) {
+        return null;
+    }
+    return createPortal(children, targetElement);
+};
+export default MountedTeleport;

package/dist/react/components/MountedTeleport/index.d.ts

@@ -0,0 +1 @@
+export { default as MountedTeleport, type Props as MountedTeleportProps, } from './MountedTeleport';

package/dist/react/components/MountedTeleport/index.js

@@ -0,0 +1 @@
+export { default as MountedTeleport, } from './MountedTeleport';

package/dist/react/components/PageLayout/PageLayout.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+export interface Props {
+    title?: string | null;
+    displayTitle?: boolean;
+    onBack?: (() => void) | null;
+    header?: ReactNode;
+    headerExtra?: ReactNode;
+    titleSlot?: ReactNode;
+    children?: ReactNode;
+}
+export interface PageHeaderProps {
+    title?: ReactNode;
+    extra?: ReactNode;
+    header?: ReactNode;
+    onBack?: () => void;
+    children?: ReactNode;
+}
+export declare const PageHeader: ({ title, extra, header, onBack, children, }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PageLayout: ({ title, displayTitle, onBack, header, headerExtra, titleSlot, children, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default PageLayout;

package/dist/react/components/PageLayout/PageLayout.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { useResponsive } from '../../hooks/responsive';
+export const PageHeader = ({ title, extra, header, onBack, children, }) => {
+    return (_jsxs("div", { className: "n-page-header", children: [header && (_jsx("div", { className: "n-page-header__header", children: header })), _jsxs("div", { className: "n-page-header__content-header", children: [_jsx("div", { className: "n-page-header__back", onClick: onBack, role: "button", "aria-label": "Go back", children: _jsx("div", { className: "n-page-header-back", children: _jsx(Icon, { icon: "ic:baseline-arrow-back-ios" }) }) }), title && (_jsx("div", { className: "n-page-header__title", children: title })), extra && (_jsx("div", { className: "n-page-header__extra", children: extra }))] }), children && (_jsx("div", { className: "n-page-header__content", children: children }))] }));
+};
+// ——— PageLayout ——————————————————————————————————————————————————————————————
+export const PageLayout = ({ title = null, displayTitle = true, onBack = null, header, headerExtra, titleSlot, children, }) => {
+    const { isMobile } = useResponsive();
+    const handleBack = () => {
+        if (onBack) {
+            onBack();
+        }
+        else {
+            window.__creopse__.router.back();
+        }
+    };
+    return (_jsxs("div", { children: [_jsx(PageHeader, { header: header, title: displayTitle
+                    ? titleSlot ?? (_jsx("span", { style: {
+                            display: '-webkit-box',
+                            WebkitLineClamp: 2,
+                            WebkitBoxOrient: 'vertical',
+                            overflow: 'hidden',
+                            wordBreak: 'break-word',
+                        }, children: title || '' }))
+                    : undefined, extra: headerExtra ? (_jsx("div", { className: isMobile
+                        ? 'flex flex-col items-end gap-2'
+                        : 'flex items-center gap-2', children: headerExtra })) : undefined, onBack: handleBack }), children] }));
+};
+export default PageLayout;

package/dist/react/components/PageLayout/index.d.ts

@@ -0,0 +1 @@
+export { default as PageLayout, type Props as PageLayoutProps, PageHeader, type PageHeaderProps, } from './PageLayout';

package/dist/react/components/PageLayout/index.js

@@ -0,0 +1 @@
+export { default as PageLayout, PageHeader, } from './PageLayout';

package/dist/react/components/ReadMore/ReadMore.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface Props {
+    moreStr?: string;
+    lessStr?: string;
+    text: string;
+    link?: string;
+    maxChars?: number;
+    className?: string;
+    linkClassName?: string;
+}
+declare const ReadMore: React.FC<Props>;
+export default ReadMore;

package/dist/react/components/ReadMore/ReadMore.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+const ReadMore = ({ moreStr = 'Read more', lessStr = 'Read less', link = '#', maxChars = 100, text, className = '', linkClassName = '', }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const formattedText = () => {
+        if (!isExpanded && text.length > maxChars) {
+            return text.substring(0, maxChars).trim() + '...';
+        }
+        return text;
+    };
+    const handleToggle = (event) => {
+        // Always prevent default for toggle functionality
+        event.preventDefault();
+        setIsExpanded(!isExpanded);
+    };
+    // Don't render anything if text is empty
+    if (!text) {
+        return null;
+    }
+    const shouldShowToggle = text.length > maxChars;
+    return (_jsxs("div", { className: className, children: [_jsx("span", { children: formattedText() }), shouldShowToggle && (_jsxs(_Fragment, { children: [' ', !isExpanded ? (_jsx("a", { href: link, onClick: handleToggle, className: linkClassName, role: "button", tabIndex: 0, onKeyDown: (e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                setIsExpanded(true);
+                            }
+                        }, children: moreStr })) : (lessStr && (_jsx("a", { href: link, onClick: handleToggle, className: linkClassName, role: "button", tabIndex: 0, onKeyDown: (e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                setIsExpanded(false);
+                            }
+                        }, children: lessStr })))] }))] }));
+};
+export default ReadMore;

package/dist/react/components/ReadMore/index.d.ts

@@ -0,0 +1 @@
+export { default as ReadMore, type Props as ReadMoreProps } from './ReadMore';

package/dist/react/components/ReadMore/index.js

@@ -0,0 +1 @@
+export { default as ReadMore } from './ReadMore';

package/dist/react/components/StickyBottom/StickyBottom.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface Props {
+    bottom?: number;
+    zIndex?: number;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const StickyBottom: React.FC<Props>;
+export default StickyBottom;

package/dist/react/components/StickyBottom/StickyBottom.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+const StickyBottom = ({ bottom = 0, zIndex = 1, className = '', children = _jsx("div", { children: "Sticky Bottom" }), }) => {
+    const elRef = useRef(null);
+    const [isSticky, setIsSticky] = useState(false);
+    const [width, setWidth] = useState('auto');
+    const [height, setHeight] = useState('auto');
+    useEffect(() => {
+        const handleScroll = () => {
+            if (!elRef.current)
+                return;
+            const rect = elRef.current.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            // Element should be sticky when it would go below the specified bottom position
+            const shouldStick = rect.bottom <= viewportHeight - bottom;
+            if (shouldStick && !isSticky) {
+                setWidth(rect.width + 'px');
+                setHeight(rect.height + 'px');
+                setIsSticky(true);
+            }
+            else if (!shouldStick && isSticky) {
+                setIsSticky(false);
+                setWidth('auto');
+            }
+        };
+        const handleResize = () => {
+            if (!isSticky && elRef.current) {
+                // Update dimensions when not sticky
+                const rect = elRef.current.getBoundingClientRect();
+                setHeight(rect.height + 'px');
+            }
+        };
+        // Initial setup
+        if (elRef.current) {
+            const rect = elRef.current.getBoundingClientRect();
+            setHeight(rect.height + 'px');
+        }
+        window.addEventListener('scroll', handleScroll);
+        window.addEventListener('resize', handleResize);
+        // Check initial state
+        handleScroll();
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [bottom, isSticky]);
+    return (_jsx("div", { ref: elRef, style: {
+            height: isSticky ? height : 'auto',
+            zIndex
+        }, children: _jsx("div", { className: className, style: {
+                position: isSticky ? 'fixed' : 'static',
+                bottom: isSticky ? `${bottom}px` : 'auto',
+                width: isSticky ? width : 'auto',
+                zIndex,
+            }, children: children }) }));
+};
+export default StickyBottom;

package/dist/react/components/StickyBottom/index.d.ts

@@ -0,0 +1 @@
+export { default as StickyBottom, type Props as StickyBottomProps, } from './StickyBottom';

package/dist/react/components/StickyBottom/index.js

@@ -0,0 +1 @@
+export { default as StickyBottom, } from './StickyBottom';

package/dist/react/components/StickyTop/StickyTop.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface Props {
+    top?: number;
+    zIndex?: number;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const StickyTop: React.FC<Props>;
+export default StickyTop;

package/dist/react/components/StickyTop/StickyTop.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+const StickyTop = ({ top = 0, zIndex = 1, className = '', children = _jsx("div", { children: "Sticky Top" }), }) => {
+    const elRef = useRef(null);
+    const [isSticky, setIsSticky] = useState(false);
+    const [width, setWidth] = useState('auto');
+    const [height, setHeight] = useState('auto');
+    useEffect(() => {
+        const handleScroll = () => {
+            if (!elRef.current)
+                return;
+            const rect = elRef.current.getBoundingClientRect();
+            // Element should be sticky when it would go above the specified top position
+            const shouldStick = rect.top <= top;
+            if (shouldStick && !isSticky) {
+                setWidth(rect.width + 'px');
+                setHeight(rect.height + 'px');
+                setIsSticky(true);
+            }
+            else if (!shouldStick && isSticky) {
+                setIsSticky(false);
+                setWidth('auto');
+            }
+        };
+        const handleResize = () => {
+            if (!isSticky && elRef.current) {
+                // Update dimensions when not sticky
+                const rect = elRef.current.getBoundingClientRect();
+                setHeight(rect.height + 'px');
+            }
+        };
+        // Initial setup
+        if (elRef.current) {
+            const rect = elRef.current.getBoundingClientRect();
+            setHeight(rect.height + 'px');
+        }
+        window.addEventListener('scroll', handleScroll);
+        window.addEventListener('resize', handleResize);
+        // Check initial state
+        handleScroll();
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [top, isSticky]);
+    return (_jsx("div", { ref: elRef, style: {
+            height: isSticky ? height : 'auto',
+            zIndex
+        }, children: _jsx("div", { className: className, style: {
+                position: isSticky ? 'fixed' : 'static',
+                top: isSticky ? `${top}px` : 'auto',
+                width: isSticky ? width : 'auto',
+                zIndex,
+            }, children: children }) }));
+};
+export default StickyTop;

package/dist/react/components/StickyTop/index.d.ts

@@ -0,0 +1 @@
+export { default as StickyTop, type Props as StickyTopProps } from './StickyTop';

package/dist/react/components/StickyTop/index.js

@@ -0,0 +1 @@
+export { default as StickyTop } from './StickyTop';

package/dist/react/components/index.d.ts

@@ -0,0 +1,8 @@
+export * from './PageLayout';
+export * from './AsyncImg';
+export * from './Image';
+export * from './StickyTop';
+export * from './StickyBottom';
+export * from './CustomTransition';
+export * from './ReadMore';
+export * from './MountedTeleport';

package/dist/react/components/index.js

@@ -0,0 +1,8 @@
+export * from './PageLayout';
+export * from './AsyncImg';
+export * from './Image';
+export * from './StickyTop';
+export * from './StickyBottom';
+export * from './CustomTransition';
+export * from './ReadMore';
+export * from './MountedTeleport';

package/dist/react/hooks/access.d.ts

@@ -0,0 +1,25 @@
+import { AccessGuard } from '@creopse/utils/enums';
+import type { NTagType } from '@creopse/utils/types';
+export declare const useAccess: () => {
+    accessGuards: {
+        label: string;
+        value: AccessGuard;
+        tagType: string;
+    }[];
+    getAccessGuardLabel: (value: AccessGuard) => string | undefined;
+    getAccessGuardTagType: (value: AccessGuard) => NTagType;
+    getRoleName: (roles: {
+        id: number;
+        name: string;
+    }[], id: number) => string;
+    isPermissionNative: (name: string) => boolean;
+    userIsSuperAdmin: (roles: {
+        name: string;
+    }[]) => boolean;
+    userCan: (permissions: {
+        name: string;
+    }[], permissionName: string) => boolean;
+    userIs: (roles: {
+        name: string;
+    }[], roleName: string) => boolean;
+};

package/dist/react/hooks/access.js

@@ -0,0 +1,41 @@
+import { AccessGuard, Permission, UserRole } from '@creopse/utils/enums';
+export const useAccess = () => {
+    // ── Permissions ───────────────────────────────────────────────────────────
+    const userCan = (permissions, permissionName) => {
+        return ((permissions?.findIndex((permission) => permission.name === permissionName) ?? -1) > -1);
+    };
+    const userIs = (roles, roleName) => {
+        return (roles?.findIndex((role) => role.name === roleName) ?? -1) > -1;
+    };
+    const userIsSuperAdmin = (roles) => {
+        return userIs(roles, UserRole.SUPER_ADMIN);
+    };
+    const isPermissionNative = (name) => {
+        return Object.values(Permission).includes(name);
+    };
+    // ── Access Guards ─────────────────────────────────────────────────────────
+    const accessGuards = [
+        { label: 'API', value: AccessGuard.API, tagType: 'warning' },
+        { label: 'Web', value: AccessGuard.WEB, tagType: 'info' },
+        { label: 'Admin', value: AccessGuard.ADMIN, tagType: 'success' },
+        { label: 'Mobile', value: AccessGuard.MOBILE, tagType: 'error' },
+    ];
+    const getAccessGuardLabel = (value) => accessGuards.find((guard) => guard.value === value)?.label;
+    const getAccessGuardTagType = (value) => (accessGuards.find((guard) => guard.value === value)?.tagType ||
+        'default');
+    // ── Roles ─────────────────────────────────────────────────────────────────
+    const getRoleName = (roles, id) => {
+        return (roles?.find((r) => r.id === id)?.name ||
+            window.__creopse__.i18n.t('undefined'));
+    };
+    return {
+        accessGuards,
+        getAccessGuardLabel,
+        getAccessGuardTagType,
+        getRoleName,
+        isPermissionNative,
+        userIsSuperAdmin,
+        userCan,
+        userIs,
+    };
+};

package/dist/react/hooks/core-bridge.d.ts

@@ -0,0 +1,13 @@
+import { BridgeAuthState, BridgeServerState, UserInterfaceState } from '@creopse/utils';
+export declare const useCoreBridge: () => {
+    locale: string | undefined;
+    env: Readonly<import("@creopse/utils").EnvData> | undefined;
+    appConfig: Readonly<import("@creopse/utils").AppConfig> | undefined;
+    api: import("@creopse/utils").Api;
+    i18n: import("@creopse/utils").BridgeI18n;
+    router: import("@creopse/utils").BridgeRouter;
+    helpers: import("@creopse/utils").BridgeHelpers;
+    auth: BridgeAuthState;
+    server: BridgeServerState;
+    ui: UserInterfaceState;
+};

package/dist/react/hooks/core-bridge.js

@@ -0,0 +1,19 @@
+import { useStore } from 'zustand';
+export const useCoreBridge = () => {
+    const { sharedData, api, i18n, router, helpers, stores } = window.__creopse__;
+    const authState = useStore(stores.auth);
+    const serverState = useStore(stores.server);
+    const uiState = useStore(stores.ui);
+    return {
+        locale: sharedData?.locale,
+        env: sharedData?.env,
+        appConfig: sharedData?.appConfig,
+        api,
+        i18n,
+        router,
+        helpers,
+        auth: authState,
+        server: serverState,
+        ui: uiState,
+    };
+};

package/dist/react/hooks/responsive.d.ts

@@ -0,0 +1,15 @@
+export declare const useResponsive: () => {
+    is2XlScreen: boolean;
+    isXlScreen: boolean;
+    isLgScreen: boolean;
+    isMdScreen: boolean;
+    isSmScreen: boolean;
+    fromSm: boolean;
+    fromMd: boolean;
+    fromLg: boolean;
+    fromXl: boolean;
+    from2Xl: boolean;
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+};

package/dist/react/hooks/responsive.js

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+const query = (q) => window.matchMedia(q);
+const useMediaQuery = (q) => {
+    const [matches, setMatches] = useState(() => query(q).matches);
+    useEffect(() => {
+        const mq = query(q);
+        const handler = (e) => setMatches(e.matches);
+        mq.addEventListener('change', handler);
+        return () => mq.removeEventListener('change', handler);
+    }, [q]);
+    return matches;
+};
+export const useResponsive = () => {
+    const is2XlScreen = useMediaQuery('(min-width: 1536px)');
+    const isXlScreen = useMediaQuery('(min-width: 1280px) and (max-width: 1535px)');
+    const isLgScreen = useMediaQuery('(min-width: 1024px) and (max-width: 1279px)');
+    const isMdScreen = useMediaQuery('(min-width: 768px) and (max-width: 1023px)');
+    const isSmScreen = useMediaQuery('(max-width: 767px)');
+    const fromSm = useMediaQuery('(min-width: 640px)');
+    const fromMd = useMediaQuery('(min-width: 768px)');
+    const fromLg = useMediaQuery('(min-width: 1024px)');
+    const fromXl = useMediaQuery('(min-width: 1280px)');
+    const from2Xl = useMediaQuery('(min-width: 1536px)');
+    const isMobile = !fromMd;
+    const isTablet = fromMd && !fromLg;
+    const isDesktop = fromLg;
+    return {
+        is2XlScreen,
+        isXlScreen,
+        isLgScreen,
+        isMdScreen,
+        isSmScreen,
+        fromSm,
+        fromMd,
+        fromLg,
+        fromXl,
+        from2Xl,
+        isMobile,
+        isTablet,
+        isDesktop,
+    };
+};

package/dist/react/hooks/user-preference.d.ts

@@ -0,0 +1,4 @@
+import type { UserPrefs } from '@creopse/utils/types';
+export declare const useUserPreference: () => {
+    defaultPrefs: UserPrefs;
+};

package/dist/react/hooks/user-preference.js

@@ -0,0 +1,17 @@
+import { Bool } from '@creopse/utils/enums';
+import { useEffect, useState } from 'react';
+export const useUserPreference = () => {
+    const [defaultPrefs, setDefaultPrefs] = useState({
+        inAppNotifEnabled: Bool.TRUE,
+        emailNotifEnabled: Bool.TRUE,
+        locale: window.__creopse__.i18n.getLocale(),
+    });
+    useEffect(() => {
+        // Resync if the locale changes on the host
+        setDefaultPrefs((prev) => ({
+            ...prev,
+            locale: window.__creopse__.i18n.getLocale(),
+        }));
+    }, []);
+    return { defaultPrefs };
+};

package/dist/vite/react.js

@@ -1,3 +1,4 @@
+import { DASHBOARD_MODULE_NAME, sanitizeId, SETTINGS_MODULE_NAME, } from '@creopse/utils/helpers';
 import federation from '@originjs/vite-plugin-federation';
 import basicSsl from '@vitejs/plugin-basic-ssl';
 import react from '@vitejs/plugin-react';
@@ -10,8 +11,6 @@ import AutoImportPlugin from 'vite-plugin-auto-import-lite';
 import i18nextLoader from 'vite-plugin-i18next-loader';
 import json5Plugin from 'vite-plugin-json5';
 import topLevelAwait from 'vite-plugin-top-level-await';
-import { DASHBOARD_MODULE_NAME, SETTINGS_MODULE_NAME } from '../utils/constants';
-import { sanitizeId } from '../utils/functions';
 // ——— Plugin ——————————————————————————————————————————————————————————————————
 export function CreopseReactPlugin(options = {}) {
     const { manifestPath = './manifest.jsonc', srcDir = './src', outDir = 'frontend', i18nLocalesPath, hooksDirs = ['src/hooks'], shared = [], unocss = false, eslintAutoImport = false, } = options;

package/dist/vite/vue.js

@@ -1,3 +1,4 @@
+import { DASHBOARD_MODULE_NAME, sanitizeId, SETTINGS_MODULE_NAME, } from '@creopse/utils/helpers';
 import federation from '@originjs/vite-plugin-federation';
 import basicSsl from '@vitejs/plugin-basic-ssl';
 import vue from '@vitejs/plugin-vue';
@@ -10,8 +11,6 @@ import AutoImportPlugin from 'vite-plugin-auto-import-lite';
 import i18nextLoader from 'vite-plugin-i18next-loader';
 import json5Plugin from 'vite-plugin-json5';
 import topLevelAwait from 'vite-plugin-top-level-await';
-import { DASHBOARD_MODULE_NAME, SETTINGS_MODULE_NAME } from '../utils/constants';
-import { sanitizeId } from '../utils/functions';
 // ——— Plugin ——————————————————————————————————————————————————————————————————
 export function CreopseVuePlugin(options = {}) {
     const { manifestPath = './manifest.jsonc', srcDir = './src', outDir = 'frontend', i18nLocalesPath, composablesDirs = ['src/composables'], shared = [], unocss = false, } = options;

package/dist/vue/composables/access.d.ts

@@ -0,0 +1,25 @@
+import { AccessGuard } from '@creopse/utils/enums';
+import type { NTagType } from '@creopse/utils/types';
+export declare const useAccess: () => {
+    accessGuards: {
+        label: string;
+        value: AccessGuard;
+        tagType: string;
+    }[];
+    getAccessGuardLabel: (value: AccessGuard) => string | undefined;
+    getAccessGuardTagType: (value: AccessGuard) => NTagType;
+    getRoleName: (roles: {
+        id: number;
+        name: string;
+    }[], id: number) => string;
+    isPermissionNative: (name: string) => boolean;
+    userIsSuperAdmin: (roles: {
+        name: string;
+    }[]) => boolean;
+    userCan: (permissions: {
+        name: string;
+    }[], permissionName: string) => boolean;
+    userIs: (roles: {
+        name: string;
+    }[], roleName: string) => boolean;
+};

package/dist/vue/composables/access.js

@@ -0,0 +1,58 @@
+import { AccessGuard, Permission, UserRole } from '@creopse/utils/enums';
+import { useI18n } from 'vue-i18n';
+export const useAccess = () => {
+    const { t } = useI18n();
+    // ── Permissions ───────────────────────────────────────────────────────────
+    const userCan = (permissions, permissionName) => {
+        return ((permissions?.findIndex((permission) => permission.name === permissionName) ?? -1) > -1);
+    };
+    const userIs = (roles, roleName) => {
+        return (roles?.findIndex((role) => role.name === roleName) ?? -1) > -1;
+    };
+    const userIsSuperAdmin = (roles) => {
+        return userIs(roles, UserRole.SUPER_ADMIN);
+    };
+    const isPermissionNative = (name) => {
+        return Object.values(Permission).includes(name);
+    };
+    // ── Access Guards ─────────────────────────────────────────────────────────
+    const accessGuards = [
+        {
+            label: 'API',
+            value: AccessGuard.API,
+            tagType: 'warning',
+        },
+        {
+            label: 'Web',
+            value: AccessGuard.WEB,
+            tagType: 'info',
+        },
+        {
+            label: 'Admin',
+            value: AccessGuard.ADMIN,
+            tagType: 'success',
+        },
+        {
+            label: 'Mobile',
+            value: AccessGuard.MOBILE,
+            tagType: 'error',
+        },
+    ];
+    const getAccessGuardLabel = (value) => accessGuards.find((guard) => guard.value === value)?.label;
+    const getAccessGuardTagType = (value) => (accessGuards.find((guard) => guard.value === value)?.tagType ||
+        'default');
+    // ── Roles ─────────────────────────────────────────────────────────────────
+    const getRoleName = (roles, id) => {
+        return roles?.find((r) => r.id === id)?.name || t('undefined');
+    };
+    return {
+        accessGuards,
+        getAccessGuardLabel,
+        getAccessGuardTagType,
+        getRoleName,
+        isPermissionNative,
+        userIsSuperAdmin,
+        userCan,
+        userIs,
+    };
+};

package/dist/vue/composables/core-bridge.d.ts

@@ -0,0 +1,12 @@
+export declare const useCoreBridge: () => {
+    locale: string | undefined;
+    env: Readonly<import("@creopse/utils").EnvData> | undefined;
+    appConfig: Readonly<import("@creopse/utils").AppConfig> | undefined;
+    api: import("@creopse/utils").Api;
+    i18n: import("@creopse/utils").BridgeI18n;
+    router: import("@creopse/utils").BridgeRouter;
+    helpers: import("@creopse/utils").BridgeHelpers;
+    auth: import("@creopse/utils").BridgeStore<import("@creopse/utils").BridgeAuthState>;
+    server: import("@creopse/utils").BridgeStore<import("@creopse/utils").BridgeServerState>;
+    ui: import("@creopse/utils").BridgeStore<import("@creopse/utils").UserInterfaceState>;
+};

package/dist/vue/composables/core-bridge.js

@@ -0,0 +1,15 @@
+export const useCoreBridge = () => {
+    const { sharedData, api, i18n, router, helpers, stores } = window.__creopse__;
+    return {
+        locale: sharedData?.locale,
+        env: sharedData?.env,
+        appConfig: sharedData?.appConfig,
+        api,
+        i18n,
+        router,
+        helpers,
+        auth: stores.auth,
+        server: stores.server,
+        ui: stores.ui,
+    };
+};

package/dist/vue/composables/responsive.d.ts

@@ -0,0 +1,15 @@
+export declare const useResponsive: () => {
+    is2XlScreen: import("vue").Ref<boolean, boolean>;
+    isXlScreen: import("vue").Ref<boolean, boolean>;
+    isLgScreen: import("vue").Ref<boolean, boolean>;
+    isMdScreen: import("vue").Ref<boolean, boolean>;
+    isSmScreen: import("vue").Ref<boolean, boolean>;
+    fromSm: import("vue").Ref<boolean, boolean>;
+    fromMd: import("vue").Ref<boolean, boolean>;
+    fromLg: import("vue").Ref<boolean, boolean>;
+    fromXl: import("vue").Ref<boolean, boolean>;
+    from2Xl: import("vue").Ref<boolean, boolean>;
+    isMobile: import("vue").ComputedRef<boolean>;
+    isTablet: import("vue").ComputedRef<boolean>;
+    isDesktop: import("vue").ComputedRef<boolean>;
+};

package/dist/vue/composables/responsive.js

@@ -0,0 +1,35 @@
+import { useMediaQuery } from '@vueuse/core';
+import { computed } from 'vue';
+export const useResponsive = () => {
+    // ── Approach (closed ranks) ─────────────────────────────
+    const is2XlScreen = useMediaQuery('(min-width: 1536px)');
+    const isXlScreen = useMediaQuery('(min-width: 1280px) and (max-width: 1535px)');
+    const isLgScreen = useMediaQuery('(min-width: 1024px) and (max-width: 1279px)');
+    const isMdScreen = useMediaQuery('(min-width: 768px) and (max-width: 1023px)');
+    const isSmScreen = useMediaQuery('(max-width: 767px)');
+    // ── Approach (min-width, mobile-first) ────────────────────
+    const fromSm = useMediaQuery('(min-width: 640px)');
+    const fromMd = useMediaQuery('(min-width: 768px)');
+    const fromLg = useMediaQuery('(min-width: 1024px)');
+    const fromXl = useMediaQuery('(min-width: 1280px)');
+    const from2Xl = useMediaQuery('(min-width: 1536px)');
+    // ── Semantic aliases  ────────
+    const isMobile = computed(() => !fromMd.value);
+    const isTablet = computed(() => fromMd.value && !fromLg.value);
+    const isDesktop = computed(() => fromLg.value);
+    return {
+        is2XlScreen,
+        isXlScreen,
+        isLgScreen,
+        isMdScreen,
+        isSmScreen,
+        fromSm,
+        fromMd,
+        fromLg,
+        fromXl,
+        from2Xl,
+        isMobile,
+        isTablet,
+        isDesktop,
+    };
+};

package/dist/vue/composables/user-preference.d.ts

@@ -0,0 +1,12 @@
+import { Bool, UserPrefs } from '@creopse/utils';
+export declare const useUserPreference: () => {
+    defaultPrefs: import("vue").Ref<{
+        inAppNotifEnabled?: Bool | undefined;
+        emailNotifEnabled?: Bool | undefined;
+        locale?: string | undefined;
+    }, UserPrefs | {
+        inAppNotifEnabled?: Bool | undefined;
+        emailNotifEnabled?: Bool | undefined;
+        locale?: string | undefined;
+    }>;
+};

package/dist/vue/composables/user-preference.js

@@ -0,0 +1,14 @@
+import { Bool } from '@creopse/utils';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+export const useUserPreference = () => {
+    const { locale } = useI18n();
+    const defaultPrefs = ref({
+        inAppNotifEnabled: Bool.TRUE,
+        emailNotifEnabled: Bool.TRUE,
+        locale: locale.value,
+    });
+    return {
+        defaultPrefs,
+    };
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@creopse/bridge",
   "description": "Creopse Bridge Toolkit",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "private": false,
   "author": "Noé Gnanih <noegnanih@gmail.com>",
   "license": "MIT",
@@ -20,8 +20,54 @@
     "dist",
     "README.md"
   ],
+  "peerDependencies": {
+    "@iconify/react": "^6.0.2",
+    "@iconify/vue": "^5.0.0",
+    "@vueuse/core": "^10.11.1",
+    "naive-ui": "^2.44.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "vue": "^3.5.27",
+    "vue-i18n": "^11.3.0",
+    "zustand": "^5.0.12"
+  },
+  "peerDependenciesMeta": {
+    "naive-ui": {
+      "optional": true
+    },
+    "@vueuse/core": {
+      "optional": true
+    },
+    "@iconify/vue": {
+      "optional": true
+    },
+    "@iconify/react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "vue-i18n": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "zustand": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "framer-motion": "^12.23.9",
+    "@creopse/utils": "0.1.0"
+  },
   "devDependencies": {
     "@originjs/vite-plugin-federation": "^1.4.1",
+    "@types/react": "^19.2.4",
+    "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-basic-ssl": "^2.3.0",
     "@vitejs/plugin-react": "^4.6.0",
     "@vitejs/plugin-vue": "^6.0.0",
@@ -34,8 +80,7 @@
     "vite-plugin-auto-import-lite": "^0.0.2",
     "vite-plugin-i18next-loader": "^3.1.3",
     "vite-plugin-json5": "^1.2.0",
-    "vite-plugin-top-level-await": "^1.6.0",
-    "@creopse/utils": "0.0.16"
+    "vite-plugin-top-level-await": "^1.6.0"
   },
   "repository": {
     "type": "git",