cynx-lib 1.3.83 → 1.3.85

package/gen.js

@@ -1,77 +1,77 @@
-#!/usr/bin/env node
-'use strict';
-
-import { uid, prefixedId, uuid, ALPHABETS } from './utils/index.js';
-
-const ALPHABET_MAP = {
-  hex: ALPHABETS.hex,
-  num: ALPHABETS.numeric,
-  numeric: ALPHABETS.numeric,
-  numbers: ALPHABETS.numeric,
-  digits: ALPHABETS.numeric,
-  lc: ALPHABETS.lowercase,
-  lower: ALPHABETS.lowercase,
-  lowercase: ALPHABETS.lowercase,
-  uc: ALPHABETS.uppercase,
-  upper: ALPHABETS.uppercase,
-  uppercase: ALPHABETS.uppercase,
-  mixed: ALPHABETS.alphanumeric,
-  alpha: ALPHABETS.alphanumeric,
-  alphanumeric: ALPHABETS.alphanumeric,
-  url: ALPHABETS.urlSafe,
-  urlsafe: ALPHABETS.urlSafe,
-  'url-safe': ALPHABETS.urlSafe,
-  clean: ALPHABETS.noLookalikes,
-  nolookalikes: ALPHABETS.noLookalikes,
-  'no-lookalikes': ALPHABETS.noLookalikes,
-};
-
-async function main() {
-  const rawArgs = process.argv.slice(2);
-  let prefix = '';
-  let size = 24;
-  let count = 1;
-  let isUuid = false;
-  let alphabet = ALPHABETS.lowercase;
-
-  for (let i = 0; i < rawArgs.length; i++) {
-    const raw = rawArgs[i].trim();
-    const clean = raw.toLowerCase().replace(/^--?/, '');
-
-    if (clean === 'uuid') {
-      isUuid = true;
-    } else if (clean === 'n' || clean === 'count') {
-      count = parseInt(rawArgs[++i], 10) || 1;
-    } else if (clean === 's' || clean === 'size' || clean === 'l' || clean === 'length') {
-      size = parseInt(rawArgs[++i], 10) || 24;
-    } else if (clean === 'p' || clean === 'prefix') {
-      prefix = rawArgs[++i] || '';
-    } else if (clean === 'a' || clean === 'alphabet') {
-      const val = (rawArgs[++i] || '').toLowerCase();
-      alphabet = ALPHABET_MAP[val] || ALPHABETS[val] || val || ALPHABETS.lowercase;
-    } else if (ALPHABET_MAP[clean]) {
-      alphabet = ALPHABET_MAP[clean];
-    } else if (!isNaN(Number(raw)) && /^\d+$/.test(raw)) {
-      size = parseInt(raw, 10);
-    } else if (!prefix && !raw.startsWith('-')) {
-      prefix = raw;
-    }
-  }
-
-  for (let i = 0; i < count; i++) {
-    let result;
-    if (isUuid) {
-      result = uuid();
-    } else if (prefix) {
-      result = prefixedId(prefix, size, alphabet);
-    } else {
-      result = uid(size, alphabet);
-    }
-    console.log(result);
-  }
-}
-
-main().catch((err) => {
-  console.error('[Error]:', err.message);
-  process.exit(1);
-});
+#!/usr/bin/env node
+'use strict';
+
+import { uid, prefixedId, uuid, ALPHABETS } from './utils/index.js';
+
+const ALPHABET_MAP = {
+  hex: ALPHABETS.hex,
+  num: ALPHABETS.numeric,
+  numeric: ALPHABETS.numeric,
+  numbers: ALPHABETS.numeric,
+  digits: ALPHABETS.numeric,
+  lc: ALPHABETS.lowercase,
+  lower: ALPHABETS.lowercase,
+  lowercase: ALPHABETS.lowercase,
+  uc: ALPHABETS.uppercase,
+  upper: ALPHABETS.uppercase,
+  uppercase: ALPHABETS.uppercase,
+  mixed: ALPHABETS.alphanumeric,
+  alpha: ALPHABETS.alphanumeric,
+  alphanumeric: ALPHABETS.alphanumeric,
+  url: ALPHABETS.urlSafe,
+  urlsafe: ALPHABETS.urlSafe,
+  'url-safe': ALPHABETS.urlSafe,
+  clean: ALPHABETS.noLookalikes,
+  nolookalikes: ALPHABETS.noLookalikes,
+  'no-lookalikes': ALPHABETS.noLookalikes,
+};
+
+async function main() {
+  const rawArgs = process.argv.slice(2);
+  let prefix = '';
+  let size = 24;
+  let count = 1;
+  let isUuid = false;
+  let alphabet = ALPHABETS.lowercase;
+
+  for (let i = 0; i < rawArgs.length; i++) {
+    const raw = rawArgs[i].trim();
+    const clean = raw.toLowerCase().replace(/^--?/, '');
+
+    if (clean === 'uuid') {
+      isUuid = true;
+    } else if (clean === 'n' || clean === 'count') {
+      count = parseInt(rawArgs[++i], 10) || 1;
+    } else if (clean === 's' || clean === 'size' || clean === 'l' || clean === 'length') {
+      size = parseInt(rawArgs[++i], 10) || 24;
+    } else if (clean === 'p' || clean === 'prefix') {
+      prefix = rawArgs[++i] || '';
+    } else if (clean === 'a' || clean === 'alphabet') {
+      const val = (rawArgs[++i] || '').toLowerCase();
+      alphabet = ALPHABET_MAP[val] || ALPHABETS[val] || val || ALPHABETS.lowercase;
+    } else if (ALPHABET_MAP[clean]) {
+      alphabet = ALPHABET_MAP[clean];
+    } else if (!isNaN(Number(raw)) && /^\d+$/.test(raw)) {
+      size = parseInt(raw, 10);
+    } else if (!prefix && !raw.startsWith('-')) {
+      prefix = raw;
+    }
+  }
+
+  for (let i = 0; i < count; i++) {
+    let result;
+    if (isUuid) {
+      result = uuid();
+    } else if (prefix) {
+      result = prefixedId(prefix, size, alphabet);
+    } else {
+      result = uid(size, alphabet);
+    }
+    console.log(result);
+  }
+}
+
+main().catch((err) => {
+  console.error('[Error]:', err.message);
+  process.exit(1);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.83",
+  "version": "1.3.85",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",
@@ -37,6 +37,10 @@
       "import": "./utils/utils/storage_manager.js",
       "require": "./utils/utils/storage_manager.cjs"
     },
+    "./session": {
+      "import": "./utils/utils/session_manager.js",
+      "require": "./utils/utils/session_manager.cjs"
+    },
     "./gen": "./gen.js"
   },
   "peerDependencies": {

package/ui/components/Drawer.jsx

@@ -1,208 +1,208 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { X } from 'lucide-react';
-
-const DRAWER_STYLES = `
-@keyframes cynxDrawerFadeIn { from { opacity: 0; } to { opacity: 1; } }
-@keyframes cynxDrawerFadeOut { from { opacity: 1; } to { opacity: 0; } }
-@keyframes cynxDrawerSlideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
-@keyframes cynxDrawerSlideOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } }
-@keyframes cynxDrawerSlideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
-@keyframes cynxDrawerSlideOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } }
-`;
-
-let _drawer_id = 'cynx-drawer-styles';
-function ensureDrawerStyles() {
-  if (typeof document === 'undefined') return;
-  if (document.getElementById(_drawer_id)) return;
-  const tag = document.createElement('style');
-  tag.id = _drawer_id;
-  tag.textContent = DRAWER_STYLES;
-  document.head.appendChild(tag);
-}
-
-export function Drawer({
-  open = false,
-  onClose,
-  title = '',
-  description = '',
-  width = 560,
-  side = 'right',
-  showClose = true,
-  children,
-  footer,
-  header,
-  style = {},
-  bodyStyle = {},
-}) {
-  const [closing, setClosing] = useState(false);
-
-  useEffect(() => {
-    ensureDrawerStyles();
-  }, []);
-
-  const handleClose = () => {
-    if (closing) return;
-    setClosing(true);
-    setTimeout(() => {
-      setClosing(false);
-      onClose?.();
-    }, 260);
-  };
-
-  useEffect(() => {
-    if (typeof document === 'undefined') return;
-    const handleKeydown = (e) => {
-      if (e.key === 'Escape' && open) handleClose();
-    };
-    if (open) {
-      document.body.style.overflow = 'hidden';
-      window.addEventListener('keydown', handleKeydown);
-    } else {
-      document.body.style.overflow = '';
-      window.removeEventListener('keydown', handleKeydown);
-    }
-    return () => {
-      document.body.style.overflow = '';
-      window.removeEventListener('keydown', handleKeydown);
-    };
-  }, [open]);
-
-  if (!open && !closing) return null;
-  if (typeof document === 'undefined') return null;
-
-  const resolvedWidth = typeof width === 'number' ? `${width}px` : width;
-  const slideInAnim = side === 'left' ? 'cynxDrawerSlideInLeft' : 'cynxDrawerSlideInRight';
-  const slideOutAnim = side === 'left' ? 'cynxDrawerSlideOutLeft' : 'cynxDrawerSlideOutRight';
-
-  return createPortal(
-    <div
-      style={{
-        position: 'fixed',
-        inset: 0,
-        background: 'rgba(20, 22, 41, .45)',
-        zIndex: 8500,
-        display: 'flex',
-        justifyContent: side === 'left' ? 'flex-start' : 'flex-end',
-        animation: `${closing ? 'cynxDrawerFadeOut' : 'cynxDrawerFadeIn'} .26s ease forwards`,
-      }}
-      onMouseDown={(e) => {
-        if (e.target === e.currentTarget) handleClose();
-      }}
-    >
-      <div
-        style={{
-          background: 'var(--surface, #ffffff)',
-          borderLeft: side === 'right' ? '1px solid var(--border, var(--bd, #e2e8f0))' : 'none',
-          borderRight: side === 'left' ? '1px solid var(--border, var(--bd, #e2e8f0))' : 'none',
-          width: resolvedWidth,
-          maxWidth: '100vw',
-          height: '100%',
-          boxShadow: 'var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, .25))',
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'hidden',
-          animation: `${closing ? slideOutAnim : slideInAnim} .26s cubic-bezier(.16, 1, .3, 1) forwards`,
-          ...style,
-        }}
-        onMouseDown={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            padding: '16px 20px',
-            borderBottom: '1px solid var(--border-light, #ebebf0)',
-            flexShrink: 0,
-          }}
-        >
-          {header ? (
-            header
-          ) : (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-              <span
-                style={{
-                  fontSize: '1rem',
-                  fontWeight: 700,
-                  letterSpacing: '-.01em',
-                  color: 'var(--t, var(--primary-text, #0f111c))',
-                }}
-              >
-                {{ title }}
-              </span>
-              {description && (
-                <span
-                  style={{
-                    fontSize: '.75rem',
-                    color: 'var(--muted, #797b8d)',
-                  }}
-                >
-                  {description}
-                </span>
-              )}
-            </div>
-          )}
-
-          {showClose && (
-            <button
-              type="button"
-              style={{
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                padding: '6px',
-                borderRadius: '6px',
-                color: 'var(--muted, #797b8d)',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                transition: 'all .14s',
-              }}
-              onClick={handleClose}
-            >
-              <X size={18} />
-            </button>
-          )}
-        </div>
-
-        {/* Body */}
-        <div
-          className="custom-scrollbar"
-          style={{
-            padding: '20px',
-            overflowX: 'hidden',
-            overflowY: 'auto',
-            flex: '1 1 auto',
-            minHeight: 0,
-            color: 'var(--t, var(--primary-text, #0f111c))',
-            ...bodyStyle,
-          }}
-        >
-          {children}
-        </div>
-
-        {/* Footer */}
-        {footer && (
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'flex-end',
-              gap: 8,
-              padding: '14px 20px',
-              borderTop: '1px solid var(--border-light, #ebebf0)',
-              background: 'var(--grey-1, #f5f5f8)',
-              flexShrink: 0,
-            }}
-          >
-            {footer}
-          </div>
-        )}
-      </div>
-    </div>,
-    document.body
-  );
-}
-
-export default Drawer;
+import React, { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+
+const DRAWER_STYLES = `
+@keyframes cynxDrawerFadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes cynxDrawerFadeOut { from { opacity: 1; } to { opacity: 0; } }
+@keyframes cynxDrawerSlideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
+@keyframes cynxDrawerSlideOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } }
+@keyframes cynxDrawerSlideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+@keyframes cynxDrawerSlideOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } }
+`;
+
+let _drawer_id = 'cynx-drawer-styles';
+function ensureDrawerStyles() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(_drawer_id)) return;
+  const tag = document.createElement('style');
+  tag.id = _drawer_id;
+  tag.textContent = DRAWER_STYLES;
+  document.head.appendChild(tag);
+}
+
+export function Drawer({
+  open = false,
+  onClose,
+  title = '',
+  description = '',
+  width = 560,
+  side = 'right',
+  showClose = true,
+  children,
+  footer,
+  header,
+  style = {},
+  bodyStyle = {},
+}) {
+  const [closing, setClosing] = useState(false);
+
+  useEffect(() => {
+    ensureDrawerStyles();
+  }, []);
+
+  const handleClose = () => {
+    if (closing) return;
+    setClosing(true);
+    setTimeout(() => {
+      setClosing(false);
+      onClose?.();
+    }, 260);
+  };
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const handleKeydown = (e) => {
+      if (e.key === 'Escape' && open) handleClose();
+    };
+    if (open) {
+      document.body.style.overflow = 'hidden';
+      window.addEventListener('keydown', handleKeydown);
+    } else {
+      document.body.style.overflow = '';
+      window.removeEventListener('keydown', handleKeydown);
+    }
+    return () => {
+      document.body.style.overflow = '';
+      window.removeEventListener('keydown', handleKeydown);
+    };
+  }, [open]);
+
+  if (!open && !closing) return null;
+  if (typeof document === 'undefined') return null;
+
+  const resolvedWidth = typeof width === 'number' ? `${width}px` : width;
+  const slideInAnim = side === 'left' ? 'cynxDrawerSlideInLeft' : 'cynxDrawerSlideInRight';
+  const slideOutAnim = side === 'left' ? 'cynxDrawerSlideOutLeft' : 'cynxDrawerSlideOutRight';
+
+  return createPortal(
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(20, 22, 41, .45)',
+        zIndex: 8500,
+        display: 'flex',
+        justifyContent: side === 'left' ? 'flex-start' : 'flex-end',
+        animation: `${closing ? 'cynxDrawerFadeOut' : 'cynxDrawerFadeIn'} .26s ease forwards`,
+      }}
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) handleClose();
+      }}
+    >
+      <div
+        style={{
+          background: 'var(--surface, #ffffff)',
+          borderLeft: side === 'right' ? '1px solid var(--border, var(--bd, #e2e8f0))' : 'none',
+          borderRight: side === 'left' ? '1px solid var(--border, var(--bd, #e2e8f0))' : 'none',
+          width: resolvedWidth,
+          maxWidth: '100vw',
+          height: '100%',
+          boxShadow: 'var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, .25))',
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+          animation: `${closing ? slideOutAnim : slideInAnim} .26s cubic-bezier(.16, 1, .3, 1) forwards`,
+          ...style,
+        }}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '16px 20px',
+            borderBottom: '1px solid var(--border-light, #ebebf0)',
+            flexShrink: 0,
+          }}
+        >
+          {header ? (
+            header
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+              <span
+                style={{
+                  fontSize: '1rem',
+                  fontWeight: 700,
+                  letterSpacing: '-.01em',
+                  color: 'var(--t, var(--primary-text, #0f111c))',
+                }}
+              >
+                {{ title }}
+              </span>
+              {description && (
+                <span
+                  style={{
+                    fontSize: '.75rem',
+                    color: 'var(--muted, #797b8d)',
+                  }}
+                >
+                  {description}
+                </span>
+              )}
+            </div>
+          )}
+
+          {showClose && (
+            <button
+              type="button"
+              style={{
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                padding: '6px',
+                borderRadius: '6px',
+                color: 'var(--muted, #797b8d)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transition: 'all .14s',
+              }}
+              onClick={handleClose}
+            >
+              <X size={18} />
+            </button>
+          )}
+        </div>
+
+        {/* Body */}
+        <div
+          className="custom-scrollbar"
+          style={{
+            padding: '20px',
+            overflowX: 'hidden',
+            overflowY: 'auto',
+            flex: '1 1 auto',
+            minHeight: 0,
+            color: 'var(--t, var(--primary-text, #0f111c))',
+            ...bodyStyle,
+          }}
+        >
+          {children}
+        </div>
+
+        {/* Footer */}
+        {footer && (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              gap: 8,
+              padding: '14px 20px',
+              borderTop: '1px solid var(--border-light, #ebebf0)',
+              background: 'var(--grey-1, #f5f5f8)',
+              flexShrink: 0,
+            }}
+          >
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+export default Drawer;

package/ui/components/Layout.jsx

@@ -12,6 +12,24 @@ export default function Layout({
   user,
   onLogout,
   onLock,
+  // Footer customization & actions
+  footerActions,
+  extraFooterActions,
+  footerSlot,
+  lockLabel,
+  logoutLabel,
+  lockTitle,
+  logoutTitle,
+  lockIcon,
+  logoutIcon,
+  showLock,
+  showLogout,
+  userSlot,
+  renderUser,
+  footerStyle,
+  footerClassName,
+  footerActionsLayout,
+  footerActionsStyle,
   collapsible = true,
   isCollapsed,
   onToggleCollapse,
@@ -38,6 +56,7 @@ export default function Layout({
   contentStyle = {},
   contentClassName,
   children,
+  ...restProps
 }) {
   return (
     <div
@@ -59,6 +78,23 @@ export default function Layout({
         user={user}
         onLogout={onLogout}
         onLock={onLock}
+        footerActions={footerActions}
+        extraFooterActions={extraFooterActions}
+        footerSlot={footerSlot}
+        lockLabel={lockLabel}
+        logoutLabel={logoutLabel}
+        lockTitle={lockTitle}
+        logoutTitle={logoutTitle}
+        lockIcon={lockIcon}
+        logoutIcon={logoutIcon}
+        showLock={showLock}
+        showLogout={showLogout}
+        userSlot={userSlot}
+        renderUser={renderUser}
+        footerStyle={footerStyle}
+        footerClassName={footerClassName}
+        footerActionsLayout={footerActionsLayout}
+        footerActionsStyle={footerActionsStyle}
         collapsible={collapsible}
         isCollapsed={isCollapsed}
         onToggleCollapse={onToggleCollapse}
@@ -75,6 +111,7 @@ export default function Layout({
         activeSubColor={activeSubColor}
         subItemsIndent={subItemsIndent}
         hasPermission={hasPermission}
+        {...restProps}
       />
 
       {/* Main Content Area */}