@justin_evo/evo-ui 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justin_evo/evo-ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",

package/src/RichTextArea/RichTextArea.tsx

@@ -502,9 +502,26 @@ export const EvoRichTextArea = forwardRef<EvoRichTextHandle, EvoRichTextAreaProp
 
   // ---- Insert image (used by paste, drop, button) ----
   const insertImageAtCaret = useCallback((src: string, alt = '') => {
-    editorRef.current?.focus();
-    const html = `<img src="${src.replace(/"/g, '&quot;')}" alt="${alt.replace(/"/g, '&quot;')}" />`;
-    execCommand('insertHTML', html);
+    const el = editorRef.current;
+    if (!el) return;
+    el.focus();
+    const safeSrc = src.replace(/"/g, '&quot;');
+    const safeAlt = alt.replace(/"/g, '&quot;');
+    // Images render display:block; inserting a bare <img> leaves the caret
+    // beside it, which paints at the image's top-right edge. Drop a trailing
+    // empty paragraph and move the caret into it, so the user lands on a clean
+    // new line *below* the image. (Marker idiom matches unwrapBlocks above.)
+    execCommand('insertHTML', `<img src="${safeSrc}" alt="${safeAlt}" /><p data-evo-caret><br></p>`);
+    const landing = el.querySelector<HTMLParagraphElement>('p[data-evo-caret]');
+    if (landing) {
+      landing.removeAttribute('data-evo-caret');
+      const sel = window.getSelection();
+      const r = document.createRange();
+      r.setStart(landing, 0);
+      r.collapse(true);
+      sel?.removeAllRanges();
+      sel?.addRange(r);
+    }
     emitChange();
   }, [emitChange]);
 

package/src/TopNav/TopNav.tsx

@@ -32,6 +32,14 @@ export interface EvoTopNavProps
   onOpenChange?: (open: boolean) => void;
   /** Width in px below which Menu collapses into the drawer. @default 768 */
   collapseBelow?: number;
+  /** Staggered mount animation for the bar's contents. @default 'none' */
+  entrance?: 'none' | 'rise' | 'fade';
+  /** Pin the bar with position: sticky; top: 0. @default false */
+  sticky?: boolean;
+  /** On-scroll treatment of a sticky bar. @default 'none' */
+  scrollBehavior?: 'none' | 'elevate' | 'shrink' | 'hide';
+  /** Render a thin scroll-progress accent line along the bottom edge. @default false */
+  showProgress?: boolean;
   className?: string;
 }
 
@@ -74,6 +82,17 @@ export interface EvoTopNavToggleProps
   className?: string;
 }
 
+export interface EvoTopNavSearchProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  /** Placeholder text shown inside the trigger. @default 'Search…' */
+  placeholder?: string;
+  /** Opt-in global hotkey, e.g. 'mod+k' (mod = ⌘ on macOS, Ctrl elsewhere). Default: none. */
+  shortcut?: string;
+  /** Override the kbd hint. @default platform-aware ⌘K / Ctrl K */
+  shortcutHint?: React.ReactNode;
+  className?: string;
+}
+
 export interface EvoTopNavDropdownProps {
   label: React.ReactNode;
   icon?: React.ReactNode;
@@ -159,6 +178,53 @@ const useHoverCapable = () =>
 const usePrefersReducedMotion = () =>
   useMediaQuery('(prefers-reduced-motion: reduce)');
 
+function useScrollState(
+  enabled: boolean,
+  behavior: 'none' | 'elevate' | 'shrink' | 'hide',
+  wantProgress: boolean,
+) {
+  const [scrolled, setScrolled] = useState(false);
+  const [hidden, setHidden] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const lastY = useRef(0);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !enabled) {
+      setScrolled(false);
+      setHidden(false);
+      setProgress(0);
+      lastY.current = 0;
+      return;
+    }
+    let raf = 0;
+    const read = () => {
+      raf = 0;
+      const doc = document.documentElement;
+      const y = window.scrollY || doc.scrollTop || 0;
+      setScrolled(y > 8);
+      setHidden(behavior === 'hide' ? y > lastY.current && y > 64 : false);
+      if (wantProgress) {
+        const max = doc.scrollHeight - doc.clientHeight || 1;
+        setProgress(Math.min(1, Math.max(0, y / max)));
+      }
+      lastY.current = y;
+    };
+    const onScroll = () => {
+      if (!raf) raf = requestAnimationFrame(read);
+    };
+    read();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', onScroll, { passive: true });
+    return () => {
+      if (raf) cancelAnimationFrame(raf);
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, [enabled, behavior, wantProgress]);
+
+  return { scrolled, hidden, progress };
+}
+
 function getFocusable(root: HTMLElement | null) {
   if (!root) return [] as HTMLElement[];
   return Array.from(
@@ -318,6 +384,23 @@ const ChevronIcon = ({ open }: { open: boolean }) => (
   </svg>
 );
 
+const SearchGlyph = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="11" cy="11" r="7" />
+    <path d="m20 20-3.2-3.2" />
+  </svg>
+);
+
 // ============================================================================
 // EvoTopNav.Brand
 // ============================================================================
@@ -522,6 +605,69 @@ const EvoTopNavToggle = forwardRef<HTMLButtonElement, EvoTopNavToggleProps>(
   },
 );
 
+// ============================================================================
+// EvoTopNav.Search — presentational ⌘K quick-search trigger
+// ============================================================================
+
+const EvoTopNavSearch = forwardRef<HTMLButtonElement, EvoTopNavSearchProps>(
+  function EvoTopNavSearch(
+    { placeholder = 'Search…', shortcut, shortcutHint, className, onClick, ...rest },
+    forwardedRef,
+  ) {
+    const localRef = useRef<HTMLButtonElement | null>(null);
+    const setRef = (node: HTMLButtonElement | null) => {
+      localRef.current = node;
+      if (typeof forwardedRef === 'function') forwardedRef(node);
+      else if (forwardedRef)
+        (forwardedRef as React.RefObject<HTMLButtonElement | null>).current = node;
+    };
+
+    // Platform-aware hint resolved after mount to avoid SSR hydration mismatch.
+    const [autoHint, setAutoHint] = useState<React.ReactNode>(null);
+    useEffect(() => {
+      if (shortcutHint !== undefined) return;
+      const platform =
+        (typeof navigator !== 'undefined' &&
+          (navigator.platform || navigator.userAgent)) || '';
+      setAutoHint(/Mac|iPhone|iPad|iPod/.test(platform) ? '⌘K' : 'Ctrl K');
+    }, [shortcutHint]);
+    const hint = shortcutHint !== undefined ? shortcutHint : autoHint;
+
+    // Opt-in global hotkey → dispatch a real click so onClick fires naturally.
+    useEffect(() => {
+      if (!shortcut) return;
+      const parts = shortcut.toLowerCase().split('+').map((p) => p.trim());
+      const wantMod = parts.some((p) => ['mod', 'cmd', 'meta', 'ctrl', 'control'].includes(p));
+      const key = parts[parts.length - 1];
+      const handler = (e: KeyboardEvent) => {
+        const mod = e.metaKey || e.ctrlKey;
+        if ((!wantMod || mod) && e.key.toLowerCase() === key) {
+          e.preventDefault();
+          localRef.current?.click();
+        }
+      };
+      document.addEventListener('keydown', handler);
+      return () => document.removeEventListener('keydown', handler);
+    }, [shortcut]);
+
+    return (
+      <button
+        ref={setRef}
+        className={cn(styles.topNavSearch, className)}
+        onClick={onClick}
+        {...rest}
+        type="button"
+      >
+        <span className={styles.topNavSearchIcon} aria-hidden="true">
+          <SearchGlyph />
+        </span>
+        <span className={styles.topNavSearchText}>{placeholder}</span>
+        {hint != null && <kbd className={styles.topNavSearchKbd}>{hint}</kbd>}
+      </button>
+    );
+  },
+);
+
 // ============================================================================
 // EvoTopNav.Dropdown
 // ============================================================================
@@ -812,7 +958,12 @@ export const EvoTopNav = forwardRef<HTMLElement, EvoTopNavProps>(
       defaultOpen = false,
       onOpenChange,
       collapseBelow = 768,
+      entrance = 'none',
+      sticky = false,
+      scrollBehavior = 'none',
+      showProgress = false,
       className,
+      style,
       ...rest
     },
     ref,
@@ -825,6 +976,12 @@ export const EvoTopNav = forwardRef<HTMLElement, EvoTopNavProps>(
 
     const isCollapsed = useIsCollapsed(collapseBelow);
     const reducedMotion = usePrefersReducedMotion();
+    const scrollEnabled = scrollBehavior !== 'none' || showProgress;
+    const { scrolled, hidden, progress } = useScrollState(scrollEnabled, scrollBehavior, showProgress);
+    const animateEntrance = entrance !== 'none' && !reducedMotion;
+    const mergedStyle: React.CSSProperties = showProgress
+      ? ({ ...style, ['--evo-topnav-progress' as string]: progress } as React.CSSProperties)
+      : (style as React.CSSProperties);
 
     const [toggleCount, setToggleCount] = useState(0);
     const registerToggle = useCallback(() => {
@@ -944,15 +1101,24 @@ export const EvoTopNav = forwardRef<HTMLElement, EvoTopNavProps>(
           ref={ref}
           className={cn(
             styles.topNav,
+            sticky && styles.topNavSticky,
             drawerActive && styles.topNavDrawerOpen,
             reducedMotion && styles.topNavReducedMotion,
             className,
           )}
+          style={mergedStyle}
           data-collapsed={isCollapsed || undefined}
           data-drawer-open={drawerActive || undefined}
+          data-entrance={animateEntrance ? entrance : undefined}
+          data-scroll={scrollBehavior !== 'none' ? scrollBehavior : undefined}
+          data-scrolled={scrolled || undefined}
+          data-hidden={hidden || undefined}
           {...rest}
         >
           <div className={styles.topNavInner}>{children}</div>
+          {showProgress && (
+            <span className={styles.topNavProgress} aria-hidden="true" />
+          )}
           {drawerActive && (
             <div
               className={styles.topNavBackdrop}
@@ -972,6 +1138,7 @@ export const EvoTopNav = forwardRef<HTMLElement, EvoTopNavProps>(
   Item: typeof EvoTopNavItem;
   Actions: typeof EvoTopNavActions;
   Toggle: typeof EvoTopNavToggle;
+  Search: typeof EvoTopNavSearch;
   Dropdown: typeof EvoTopNavDropdown;
   DropdownItem: typeof EvoTopNavDropdownItem;
 };
@@ -981,6 +1148,7 @@ EvoTopNavMenu.displayName = 'EvoTopNav.Menu';
 EvoTopNavItem.displayName = 'EvoTopNav.Item';
 EvoTopNavActions.displayName = 'EvoTopNav.Actions';
 EvoTopNavToggle.displayName = 'EvoTopNav.Toggle';
+EvoTopNavSearch.displayName = 'EvoTopNav.Search';
 EvoTopNavDropdown.displayName = 'EvoTopNav.Dropdown';
 EvoTopNavDropdownItem.displayName = 'EvoTopNav.DropdownItem';
 (EvoTopNav as { displayName?: string }).displayName = 'EvoTopNav';
@@ -990,5 +1158,6 @@ EvoTopNav.Menu = EvoTopNavMenu;
 EvoTopNav.Item = EvoTopNavItem;
 EvoTopNav.Actions = EvoTopNavActions;
 EvoTopNav.Toggle = EvoTopNavToggle;
+EvoTopNav.Search = EvoTopNavSearch;
 EvoTopNav.Dropdown = EvoTopNavDropdown;
 EvoTopNav.DropdownItem = EvoTopNavDropdownItem;

package/src/css/checkbox.module.scss

@@ -42,7 +42,7 @@
 
     &::after {
       opacity: 1;
-      transform: rotate(45deg) scale(1);
+      transform: translate(-50%, -60%) rotate(45deg) scale(1);
     }
   }
 
@@ -94,15 +94,18 @@
   &::after {
     content: '';
     position: absolute;
-    top: 0px;
-    left: 3px;
+    top: 50%;
+    left: 50%;
     width: 5px;
-    height: 8px;
+    height: 9px;
     border: 2px solid $evo-primary-fg;
     border-top: none;
     border-left: none;
     opacity: 0;
-    transform: rotate(45deg) scale(0.5);
+    // Centered via translate (parent's flex-centering can't reach an absolute
+    // child). -60% Y nudges the rotated "L" optically into the middle. The
+    // centering translate is folded into both states so the scale stays put.
+    transform: translate(-50%, -60%) rotate(45deg) scale(0.5);
     transition: opacity $transition-fast, transform $transition-fast;
   }
 }

package/src/css/topnav.module.scss

@@ -20,6 +20,16 @@
   to   { opacity: 1; transform: translateY(0); }
 }
 
+@keyframes topNavRise {
+  from { opacity: 0; transform: translateY(0.5rem); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes topNavFade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
 // ---------------------------------------------------------------------------
 // Root
 // ---------------------------------------------------------------------------
@@ -159,6 +169,61 @@
   flex-shrink: 0;
 }
 
+// ---------------------------------------------------------------------------
+// Search trigger (EvoTopNav.Search) — presentational ⌘K affordance
+// ---------------------------------------------------------------------------
+
+.topNavSearch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 2rem;
+  min-width: 12rem;
+  padding: 0 0.625rem;
+  font-family: inherit;
+  font-size: $text-sm;
+  color: $color-text-muted;
+  background-color: $color-surface-sunken;
+  border: 1px solid $color-border;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  transition:
+    background-color $transition-fast,
+    border-color $transition-fast,
+    color $transition-fast;
+
+  &:hover {
+    background-color: $color-surface-hover;
+    color: $color-text-secondary;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 2px;
+  }
+}
+
+.topNavSearchIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.topNavSearchText {
+  flex: 1;
+  text-align: left;
+}
+
+.topNavSearchKbd {
+  flex-shrink: 0;
+  font-family: inherit;
+  font-size: $text-xs;
+  color: $color-text-muted;
+  background-color: $color-surface;
+  border: 1px solid $color-border;
+  border-radius: 4px;
+  padding: 0.0625rem 0.3125rem;
+}
+
 // ---------------------------------------------------------------------------
 // Toggle (hamburger) — hidden above the collapse breakpoint
 // ---------------------------------------------------------------------------
@@ -360,6 +425,17 @@
     z-index: 55;
     animation: topNavOverlayFadeIn 180ms ease;
   }
+
+  .topNavSearch {
+    min-width: 0;
+    width: 2.75rem;
+    height: 2.75rem;
+    justify-content: center;
+    padding: 0;
+
+    .topNavSearchText,
+    .topNavSearchKbd { display: none; }
+  }
 }
 
 // Above the breakpoint, drawer-specific bits never render visually.
@@ -371,6 +447,85 @@
   }
 }
 
+// ---------------------------------------------------------------------------
+// Entrance animation (opt-in via `entrance` prop → data-entrance attribute)
+// ---------------------------------------------------------------------------
+
+.topNav[data-entrance='rise'] .topNavBrand,
+.topNav[data-entrance='rise'] .topNavMenu > li,
+.topNav[data-entrance='rise'] .topNavSearch,
+.topNav[data-entrance='rise'] .topNavActions {
+  animation: topNavRise 440ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.topNav[data-entrance='fade'] .topNavBrand,
+.topNav[data-entrance='fade'] .topNavMenu > li,
+.topNav[data-entrance='fade'] .topNavSearch,
+.topNav[data-entrance='fade'] .topNavActions {
+  animation: topNavFade 440ms ease both;
+}
+
+// Shared left-to-right stagger (applies to both variants).
+.topNav[data-entrance] .topNavBrand { animation-delay: 40ms; }
+.topNav[data-entrance] .topNavMenu > li:nth-child(1) { animation-delay: 110ms; }
+.topNav[data-entrance] .topNavMenu > li:nth-child(2) { animation-delay: 160ms; }
+.topNav[data-entrance] .topNavMenu > li:nth-child(3) { animation-delay: 210ms; }
+.topNav[data-entrance] .topNavMenu > li:nth-child(4) { animation-delay: 260ms; }
+.topNav[data-entrance] .topNavMenu > li:nth-child(n + 5) { animation-delay: 300ms; }
+.topNav[data-entrance] .topNavSearch { animation-delay: 320ms; }
+.topNav[data-entrance] .topNavActions { animation-delay: 360ms; }
+
+// ---------------------------------------------------------------------------
+// Sticky + scroll-aware behavior (opt-in via `sticky` / `scrollBehavior`)
+// ---------------------------------------------------------------------------
+
+.topNavSticky {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+}
+
+.topNav[data-scroll] {
+  transition:
+    background-color $transition-fast,
+    box-shadow $transition-fast,
+    transform 220ms ease;
+
+  .topNavInner { transition: min-height $transition-fast; }
+}
+
+.topNav[data-scrolled] {
+  background-color: $color-surface; // fallback for browsers without color-mix()
+  background-color: color-mix(in srgb, $color-surface 85%, transparent);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  box-shadow: $shadow-md;
+}
+
+.topNav[data-scroll='shrink'][data-scrolled] .topNavInner {
+  min-height: 2.75rem;
+}
+
+.topNav[data-scroll='hide'] { will-change: transform; }
+.topNav[data-scroll='hide'][data-hidden] { transform: translateY(-100%); }
+
+// ---------------------------------------------------------------------------
+// Scroll-progress line (opt-in via `showProgress`)
+// ---------------------------------------------------------------------------
+
+.topNavProgress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 2px;
+  background: $evo-primary-color;
+  transform: scaleX(var(--evo-topnav-progress, 0));
+  transform-origin: left center;
+  pointer-events: none;
+  z-index: 31;
+}
+
 // ---------------------------------------------------------------------------
 // Reduced motion — kill animations
 // ---------------------------------------------------------------------------
@@ -385,6 +540,16 @@
   .topNavDropdownChevron {
     transition: none;
   }
+
+  .topNavBrand,
+  .topNavMenu > li,
+  .topNavSearch,
+  .topNavActions {
+    animation: none !important;
+  }
+
+  &[data-scroll='hide'][data-hidden] { transition: none; }
+  .topNavProgress { transition: none; }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -393,4 +558,11 @@
   .topNavBackdrop {
     animation: none;
   }
+
+  .topNav[data-entrance] .topNavBrand,
+  .topNav[data-entrance] .topNavMenu > li,
+  .topNav[data-entrance] .topNavSearch,
+  .topNav[data-entrance] .topNavActions {
+    animation: none !important;
+  }
 }