cynx-lib 1.3.90 → 1.3.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.90",
+  "version": "1.3.92",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/ui/components/ActionsMenu.jsx

@@ -1,169 +1,357 @@
-import { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
-import { createPortal } from 'react-dom';
-
-export function ActionsMenu({ items, align = 'right' }) {
-  const [open, setOpen] = useState(false);
-  const [closing, setClosing] = useState(false);
-  const wrapRef = useRef(null);
-  const menuRef = useRef(null);
-  const btnRef = useRef(null);
-
-  const close = useCallback(() => {
-    setClosing(true);
-    setTimeout(() => { setClosing(false); setOpen(false); }, 140);
-  }, []);
-
-  const positionMenu = useCallback(() => {
-    const btn = btnRef.current;
-    const menu = menuRef.current;
-    if (!btn || !menu) return;
-    const br = btn.getBoundingClientRect();
-    const mw = menu.offsetWidth || 180;
-    const mh = menu.offsetHeight || 120;
-    const spaceBelow = window.innerHeight - br.bottom;
-    const spaceAbove = br.top;
-    const openUp = spaceBelow < mh + 12 && spaceAbove > spaceBelow;
-
-    let top, left;
-    if (openUp) {
-      top = br.top - mh - 6;
-    } else {
-      top = br.bottom + 6;
-    }
-    if (align === 'left') {
-      left = br.left;
-    } else {
-      left = br.right - mw;
-    }
-    left = Math.max(8, Math.min(left, window.innerWidth - mw - 8));
-
-    menu.style.top = top + 'px';
-    menu.style.left = left + 'px';
-    menu.style.transformOrigin = openUp
-      ? (align === 'left' ? 'bottom left' : 'bottom right')
-      : (align === 'left' ? 'top left' : 'top right');
-    menu.classList.toggle('open-up', openUp);
-    if (!closing) {
-      menu.style.animationName = openUp ? 'actionsDropUp' : 'actionsDrop';
-    }
-  }, [align, closing]);
-
-  useEffect(() => {
-    if (!open) return;
-    function onDocClick(e) {
-      if (
-        wrapRef.current && !wrapRef.current.contains(e.target) &&
-        menuRef.current && !menuRef.current.contains(e.target)
-      ) {
-        close();
-      }
-    }
-    function onScroll() { positionMenu(); }
-    document.addEventListener('mousedown', onDocClick);
-    document.addEventListener('scroll', onScroll, true);
-    window.addEventListener('resize', onScroll);
-    return () => {
-      document.removeEventListener('mousedown', onDocClick);
-      document.removeEventListener('scroll', onScroll, true);
-      window.removeEventListener('resize', onScroll);
-    };
-  }, [open, close, positionMenu]);
-
-  useLayoutEffect(() => {
-    if (open) {
-      positionMenu();
-    }
-  }, [open, positionMenu]);
-
-  function toggle() {
-    if (open) close();
-    else { setOpen(true); setClosing(false); }
-  }
-
-  const isOpen = open && !closing;
-
-  return (
-    <div ref={wrapRef} style={{ position: 'relative', display: 'inline-block' }}>
-      <button
-        ref={btnRef}
-        type="button"
-        onClick={toggle}
-        style={{
-          width: 32, height: 32, borderRadius: 'var(--rads,8px)',
-          border: isOpen ? '1px solid var(--accent,#f99e2c)' : '1px solid var(--border-light,#d7d8e0)',
-          background: 'var(--surface,#fff)',
-          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
-          color: isOpen ? 'var(--accent, #f99e2c)' : 'var(--muted,#797b8d)', transition: 'all .14s',
-          boxShadow: isOpen ? 'var(--pd, rgba(249,158,44,.12))' : 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
-        }}
-      >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-          <circle cx="5" cy="12" r="1.5" /><circle cx="12" cy="12" r="1.5" /><circle cx="19" cy="12" r="1.5" />
-        </svg>
-      </button>
-
-      {open && typeof document !== 'undefined' && createPortal(
-        <div
-          ref={menuRef}
-          style={{
-            position: 'fixed', zIndex: 99999, minWidth: 180, padding: 5,
-            background: 'var(--surface,#fff)', border: '1.5px solid var(--border-light,#e2e8f0)',
-            borderRadius: 'var(--rads,8px)',
-            boxShadow: 'var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06))',
-            transformOrigin: align === 'left' ? 'top left' : 'top right',
-            animation: closing
-              ? 'actionsClose .14s ease forwards'
-              : 'actionsDrop .14s cubic-bezier(.16,1,.3,1)',
-          }}
-        >
-          {items.map((item, i) => (
-            item.dividerBefore ? (
-              <div key={i} style={{ height: 1, background: 'var(--border-light,#e2e8f0)', margin: '4px 0' }} />
-            ) : (
-              <div
-                key={i}
-                onClick={() => { close(); item.onClick?.(); }}
-                style={{
-                  display: 'flex', alignItems: 'center', gap: 8,
-                  padding: '6px 10px', borderRadius: 'var(--rads,8px)',
-                  fontSize: 12, cursor: 'pointer', transition: 'all .14s',
-                  color: (item.variant === 'danger' || item.danger) ? 'var(--danger, #ef4444)' : item.variant === 'success' ? 'var(--success, #16a34a)' : item.variant === 'warning' ? 'var(--warning, #f59e0b)' : 'var(--primary-text, #18181b)',
-                  fontWeight: 500,
-                }}
-                onMouseEnter={e => {
-                  e.currentTarget.style.background = (item.variant === 'danger' || item.danger) ? 'var(--danger-bg, rgba(239,68,68,.10))' : item.variant === 'success' ? 'var(--success-bg, rgba(22,163,74,.10))' : item.variant === 'warning' ? 'var(--warning-bg, rgba(245,158,11,.12))' : 'var(--grey-1, #f4f4f5)';
-                }}
-                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
-              >
-                {item.icon && (
-                  <span style={{
-                    width: 24, height: 24, borderRadius: 5,
-                    display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    flexShrink: 0, color: 'inherit', fontSize: 12,
-                  }}>{item.icon}</span>
-                )}
-                <span>{item.label}</span>
-              </div>
-            )
-          ))}
-        </div>,
-        document.body
-      )}
-
-      <style>{`
-        @keyframes actionsDrop {
-          from { opacity: 0; transform: translateY(-6px); }
-          to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes actionsDropUp {
-          from { opacity: 0; transform: translateY(6px); }
-          to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes actionsClose {
-          from { opacity: 1; transform: translateY(0); }
-          to { opacity: 0; transform: translateY(-4px); }
-        }
-      `}</style>
-    </div>
-  );
-}
+import { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+function ActionSubmenu({ items, menuRect, itemRect, closeAll, onMouseEnter, onMouseLeave }) {
+  const subRef = useRef(null);
+
+  useLayoutEffect(() => {
+    const sub = subRef.current;
+    if (!sub || !menuRect || !itemRect) return;
+
+    const subWidth = sub.offsetWidth || 190;
+    const subHeight = sub.offsetHeight || 150;
+
+    // Determine horizontal docking relative to PARENT MENU container
+    const spaceRight = window.innerWidth - menuRect.right;
+    let left;
+    let originX = 'left';
+
+    if (spaceRight >= subWidth + 8) {
+      // Dock cleanly to the right side of parent menu
+      left = menuRect.right + 4;
+      originX = 'left';
+    } else {
+      // Dock cleanly to the left side of parent menu (never overlaps!)
+      left = menuRect.left - subWidth - 4;
+      originX = 'right';
+    }
+
+    // Keep within viewport bounds
+    left = Math.max(8, Math.min(left, window.innerWidth - subWidth - 8));
+
+    // Determine vertical docking relative to the active item
+    let top = itemRect.top - 5;
+    let originY = 'top';
+
+    if (top + subHeight > window.innerHeight - 8) {
+      top = Math.max(8, window.innerHeight - subHeight - 8);
+      originY = 'bottom';
+    }
+
+    sub.style.top = top + 'px';
+    sub.style.left = left + 'px';
+    sub.style.transformOrigin = `${originY} ${originX}`;
+  }, [menuRect, itemRect]);
+
+  return createPortal(
+    <div
+      ref={subRef}
+      data-cynx-submenu="true"
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      style={{
+        position: 'fixed',
+        zIndex: 100000,
+        minWidth: 190,
+        padding: 5,
+        top: itemRect ? (itemRect.top - 5) + 'px' : '0px',
+        left: menuRect ? (menuRect.left - 200) + 'px' : '0px',
+        background: 'var(--surface,#fff)',
+        border: '1.5px solid var(--border-light,#e2e8f0)',
+        borderRadius: 'var(--rads,8px)',
+        boxShadow: 'var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06))',
+        animation: 'actionsDrop .12s cubic-bezier(.16,1,.3,1)',
+      }}
+    >
+      {items.map((subItem, j) => (
+        subItem.dividerBefore ? (
+          <div key={j} style={{ height: 1, background: 'var(--border-light,#e2e8f0)', margin: '4px 0' }} />
+        ) : (
+          <div
+            key={j}
+            onClick={() => { closeAll(); subItem.onClick?.(); }}
+            style={{
+              display: 'flex', alignItems: 'center', gap: 8,
+              padding: '6px 10px', borderRadius: 'var(--rads,8px)',
+              fontSize: 12, cursor: 'pointer', transition: 'all .14s',
+              whiteSpace: 'nowrap',
+              color: (subItem.variant === 'danger' || subItem.danger) ? 'var(--danger, #ef4444)' : subItem.variant === 'success' ? 'var(--success, #16a34a)' : subItem.variant === 'warning' ? 'var(--warning, #f59e0b)' : 'var(--primary-text, #18181b)',
+              fontWeight: 500,
+            }}
+            onMouseEnter={e => {
+              e.currentTarget.style.background = (subItem.variant === 'danger' || subItem.danger) ? 'var(--danger-bg, rgba(239,68,68,.10))' : subItem.variant === 'success' ? 'var(--success-bg, rgba(22,163,74,.10))' : subItem.variant === 'warning' ? 'var(--warning-bg, rgba(245,158,11,.12))' : 'var(--grey-1, #f4f4f5)';
+            }}
+            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
+          >
+            {subItem.icon && (
+              <span style={{
+                width: 24, height: 24, borderRadius: 5,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                flexShrink: 0, color: 'inherit', fontSize: 12,
+              }}>{subItem.icon}</span>
+            )}
+            <span>{subItem.label}</span>
+          </div>
+        )
+      ))}
+    </div>,
+    document.body
+  );
+}
+
+export function ActionsMenu({ items, align = 'right' }) {
+  const [open, setOpen] = useState(false);
+  const [closing, setClosing] = useState(false);
+  const [activeSub, setActiveSub] = useState(null); // { index, items, itemRect, menuRect }
+  const wrapRef = useRef(null);
+  const menuRef = useRef(null);
+  const btnRef = useRef(null);
+  const subTimerRef = useRef(null);
+
+  const close = useCallback(() => {
+    setClosing(true);
+    setActiveSub(null);
+    clearTimeout(subTimerRef.current);
+    setTimeout(() => { setClosing(false); setOpen(false); }, 140);
+  }, []);
+
+  const openSub = (index, subItems, e) => {
+    clearTimeout(subTimerRef.current);
+    const itemRect = e.currentTarget.getBoundingClientRect();
+    const menuRect = menuRef.current ? menuRef.current.getBoundingClientRect() : itemRect;
+    setActiveSub({ index, items: subItems, itemRect, menuRect });
+  };
+
+  const scheduleCloseSub = () => {
+    clearTimeout(subTimerRef.current);
+    subTimerRef.current = setTimeout(() => {
+      setActiveSub(null);
+    }, 150);
+  };
+
+  const cancelCloseSub = () => {
+    clearTimeout(subTimerRef.current);
+  };
+
+  const positionMenu = useCallback(() => {
+    const btn = btnRef.current;
+    const menu = menuRef.current;
+    if (!btn || !menu) return;
+    const br = btn.getBoundingClientRect();
+    const mw = menu.offsetWidth || 180;
+    const mh = menu.offsetHeight || 120;
+    const spaceBelow = window.innerHeight - br.bottom;
+    const spaceAbove = br.top;
+    const openUp = spaceBelow < mh + 12 && spaceAbove > spaceBelow;
+
+    let top, left;
+    if (openUp) {
+      top = br.top - mh - 6;
+    } else {
+      top = br.bottom + 6;
+    }
+    if (align === 'left') {
+      left = br.left;
+    } else {
+      left = br.right - mw;
+    }
+    left = Math.max(8, Math.min(left, window.innerWidth - mw - 8));
+
+    menu.style.top = top + 'px';
+    menu.style.left = left + 'px';
+    menu.style.transformOrigin = openUp
+      ? (align === 'left' ? 'bottom left' : 'bottom right')
+      : (align === 'left' ? 'top left' : 'top right');
+    menu.classList.toggle('open-up', openUp);
+    if (!closing) {
+      menu.style.animationName = openUp ? 'actionsDropUp' : 'actionsDrop';
+    }
+  }, [align, closing]);
+
+  useEffect(() => {
+    if (!open) return;
+    function onDocClick(e) {
+      if (
+        wrapRef.current && !wrapRef.current.contains(e.target) &&
+        menuRef.current && !menuRef.current.contains(e.target) &&
+        !e.target.closest?.('[data-cynx-submenu]')
+      ) {
+        close();
+      }
+    }
+    function onScroll() { positionMenu(); }
+    document.addEventListener('mousedown', onDocClick);
+    document.addEventListener('scroll', onScroll, true);
+    window.addEventListener('resize', onScroll);
+    return () => {
+      document.removeEventListener('mousedown', onDocClick);
+      document.removeEventListener('scroll', onScroll, true);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, [open, close, positionMenu]);
+
+  useLayoutEffect(() => {
+    if (open) {
+      positionMenu();
+    }
+  }, [open, positionMenu]);
+
+  function toggle() {
+    if (open) close();
+    else { setOpen(true); setClosing(false); setActiveSub(null); }
+  }
+
+  const isOpen = open && !closing;
+
+  return (
+    <div ref={wrapRef} style={{ position: 'relative', display: 'inline-block' }}>
+      <button
+        ref={btnRef}
+        type="button"
+        onClick={toggle}
+        style={{
+          width: 32, height: 32, borderRadius: 'var(--rads,8px)',
+          border: isOpen ? '1px solid var(--accent,#f99e2c)' : '1px solid var(--border-light,#d7d8e0)',
+          background: 'var(--surface,#fff)',
+          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+          color: isOpen ? 'var(--accent, #f99e2c)' : 'var(--muted,#797b8d)', transition: 'all .14s',
+          boxShadow: isOpen ? 'var(--pd, rgba(249,158,44,.12))' : 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
+        }}
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <circle cx="5" cy="12" r="1.5" /><circle cx="12" cy="12" r="1.5" /><circle cx="19" cy="12" r="1.5" />
+        </svg>
+      </button>
+
+      {open && typeof document !== 'undefined' && createPortal(
+        <div
+          ref={menuRef}
+          style={{
+            position: 'fixed', zIndex: 99999, minWidth: 180, padding: 5,
+            background: 'var(--surface,#fff)', border: '1.5px solid var(--border-light,#e2e8f0)',
+            borderRadius: 'var(--rads,8px)',
+            boxShadow: 'var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06))',
+            transformOrigin: align === 'left' ? 'top left' : 'top right',
+            animation: closing
+              ? 'actionsClose .14s ease forwards'
+              : 'actionsDrop .14s cubic-bezier(.16,1,.3,1)',
+          }}
+        >
+          {items.map((item, i) => {
+            if (item.dividerBefore) {
+              return <div key={i} style={{ height: 1, background: 'var(--border-light,#e2e8f0)', margin: '4px 0' }} />;
+            }
+
+            const hasSub = Array.isArray(item.items) && item.items.length > 0;
+            const isSubActive = activeSub && activeSub.index === i;
+
+            return (
+              <div
+                key={i}
+                onClick={(e) => {
+                  if (hasSub) {
+                    e.stopPropagation();
+                    openSub(i, item.items, e);
+                  } else {
+                    close();
+                    item.onClick?.();
+                  }
+                }}
+                onMouseEnter={(e) => {
+                  if (hasSub) {
+                    openSub(i, item.items, e);
+                  } else {
+                    clearTimeout(subTimerRef.current);
+                    setActiveSub(null);
+                  }
+                  e.currentTarget.style.background = (item.variant === 'danger' || item.danger)
+                    ? 'var(--danger-bg, rgba(239,68,68,.10))'
+                    : item.variant === 'success'
+                    ? 'var(--success-bg, rgba(22,163,74,.10))'
+                    : item.variant === 'warning'
+                    ? 'var(--warning-bg, rgba(245,158,11,.12))'
+                    : 'var(--grey-1, #f4f4f5)';
+                }}
+                onMouseLeave={(e) => {
+                  if (hasSub) {
+                    scheduleCloseSub();
+                  }
+                  if (!isSubActive) {
+                    e.currentTarget.style.background = 'transparent';
+                  }
+                }}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 8,
+                  padding: '6px 10px', borderRadius: 'var(--rads,8px)',
+                  fontSize: 12, cursor: 'pointer', transition: 'all .14s',
+                  whiteSpace: 'nowrap',
+                  background: isSubActive ? 'var(--grey-1, #f4f4f5)' : 'transparent',
+                  color: (item.variant === 'danger' || item.danger)
+                    ? 'var(--danger, #ef4444)'
+                    : item.variant === 'success'
+                    ? 'var(--success, #16a34a)'
+                    : item.variant === 'warning'
+                    ? 'var(--warning, #f59e0b)'
+                    : 'var(--primary-text, #18181b)',
+                  fontWeight: 500,
+                }}
+              >
+                {item.icon && (
+                  <span style={{
+                    width: 24, height: 24, borderRadius: 5,
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    flexShrink: 0, color: 'inherit', fontSize: 12,
+                  }}>{item.icon}</span>
+                )}
+                <span>{item.label}</span>
+
+                {hasSub && (
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    style={{ marginLeft: 'auto', opacity: 0.55 }}
+                  >
+                    <polyline points="9 18 15 12 9 6" />
+                  </svg>
+                )}
+              </div>
+            );
+          })}
+        </div>,
+        document.body
+      )}
+
+      {open && activeSub && (
+        <ActionSubmenu
+          items={activeSub.items}
+          menuRect={activeSub.menuRect}
+          itemRect={activeSub.itemRect}
+          closeAll={close}
+          onMouseEnter={cancelCloseSub}
+          onMouseLeave={scheduleCloseSub}
+        />
+      )}
+
+      <style>{`
+        @keyframes actionsDrop {
+          from { opacity: 0; transform: translateY(-6px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes actionsDropUp {
+          from { opacity: 0; transform: translateY(6px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes actionsClose {
+          from { opacity: 1; transform: translateY(0); }
+          to { opacity: 0; transform: translateY(-4px); }
+        }
+      `}</style>
+    </div>
+  );
+}