@marlinjai/clearify 1.5.0

package/src/theme/Search.tsx

@@ -0,0 +1,359 @@
+import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+// @ts-expect-error virtual module
+import searchEntries from 'virtual:clearify/search-index';
+
+interface SearchEntry {
+  id: number;
+  path: string;
+  title: string;
+  description: string;
+  content: string;
+  sectionId?: string;
+  sectionLabel?: string;
+}
+
+function search(query: string, entries: SearchEntry[]): SearchEntry[] {
+  if (!query.trim()) return [];
+  const q = query.toLowerCase();
+  const terms = q.split(/\s+/);
+
+  return entries
+    .map((entry) => {
+      const text = `${entry.title} ${entry.description} ${entry.content}`.toLowerCase();
+      let score = 0;
+      for (const term of terms) {
+        if (entry.title.toLowerCase().includes(term)) score += 10;
+        if (entry.description.toLowerCase().includes(term)) score += 5;
+        if (text.includes(term)) score += 1;
+      }
+      return { entry, score };
+    })
+    .filter((r) => r.score > 0)
+    .sort((a, b) => b.score - a.score)
+    .slice(0, 8)
+    .map((r) => r.entry);
+}
+
+function getExcerpt(content: string, query: string): string {
+  const q = query.toLowerCase();
+  const idx = content.toLowerCase().indexOf(q);
+  if (idx === -1) return content.slice(0, 120) + '...';
+  const start = Math.max(0, idx - 40);
+  const end = Math.min(content.length, idx + query.length + 80);
+  let excerpt = content.slice(start, end);
+  if (start > 0) excerpt = '...' + excerpt;
+  if (end < content.length) excerpt = excerpt + '...';
+  return excerpt;
+}
+
+export function Search() {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [selected, setSelected] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const navigate = useNavigate();
+
+  const results = useMemo(() => search(query, searchEntries as SearchEntry[]), [query]);
+
+  useEffect(() => {
+    setSelected(0);
+  }, [results]);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
+      if (e.key === 'Escape') {
+        setOpen(false);
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+    } else {
+      setQuery('');
+    }
+  }, [open]);
+
+  const handleSelect = useCallback(
+    (path: string) => {
+      navigate(path);
+      setOpen(false);
+    },
+    [navigate]
+  );
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setSelected((s) => Math.min(s + 1, results.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setSelected((s) => Math.max(s - 1, 0));
+    } else if (e.key === 'Enter' && results[selected]) {
+      handleSelect(results[selected].path);
+    }
+  };
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+          padding: '0.4rem 0.75rem',
+          border: '1px solid var(--clearify-border)',
+          borderRadius: 'var(--clearify-radius)',
+          background: 'var(--clearify-bg-secondary)',
+          cursor: 'pointer',
+          fontSize: '0.8125rem',
+          color: 'var(--clearify-text-tertiary)',
+          minWidth: 200,
+          transition: 'border-color 0.15s, box-shadow 0.15s',
+          height: 36,
+        }}
+        className="clearify-search-btn"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21-4.3-4.3" />
+        </svg>
+        Search docs...
+        <kbd
+          style={{
+            marginLeft: 'auto',
+            padding: '0.1rem 0.375rem',
+            borderRadius: 'var(--clearify-radius-sm)',
+            border: '1px solid var(--clearify-border)',
+            fontSize: '0.625rem',
+            fontFamily: 'var(--font-mono)',
+            color: 'var(--clearify-text-tertiary)',
+            fontWeight: 500,
+            lineHeight: 1.6,
+          }}
+        >
+          {navigator.platform?.includes('Mac') ? '\u2318K' : 'Ctrl+K'}
+        </kbd>
+
+        <style>{`
+          .clearify-search-btn:hover {
+            border-color: var(--clearify-border-strong) !important;
+            box-shadow: var(--clearify-shadow-sm);
+          }
+        `}</style>
+      </button>
+
+      {open && (
+        <div
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 100,
+            display: 'flex',
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            paddingTop: '12vh',
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            backdropFilter: 'blur(8px)',
+            WebkitBackdropFilter: 'blur(8px)',
+            animation: 'clearify-fade-in 0.15s ease-out',
+          }}
+          onClick={() => setOpen(false)}
+        >
+          <div
+            style={{
+              width: '100%',
+              maxWidth: 580,
+              margin: '0 1rem',
+              backgroundColor: 'var(--clearify-surface-elevated)',
+              border: '1px solid var(--clearify-border-strong)',
+              borderRadius: 'var(--clearify-radius-xl)',
+              boxShadow: 'var(--clearify-shadow-lg)',
+              overflow: 'hidden',
+              backdropFilter: 'blur(20px) saturate(180%)',
+              WebkitBackdropFilter: 'blur(20px) saturate(180%)',
+              animation: 'clearify-scale-in 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                padding: '0.875rem 1.25rem',
+                borderBottom: '1px solid var(--clearify-border)',
+              }}
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="var(--clearify-text-tertiary)"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                style={{ flexShrink: 0 }}
+              >
+                <circle cx="11" cy="11" r="8" />
+                <path d="m21 21-4.3-4.3" />
+              </svg>
+              <input
+                ref={inputRef}
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="Search documentation..."
+                style={{
+                  flex: 1,
+                  border: 'none',
+                  outline: 'none',
+                  background: 'none',
+                  padding: '0.25rem 0.75rem',
+                  fontSize: '0.9375rem',
+                  color: 'var(--clearify-text)',
+                  fontFamily: 'var(--font-sans)',
+                }}
+              />
+              <kbd
+                style={{
+                  padding: '0.15rem 0.5rem',
+                  borderRadius: 'var(--clearify-radius-sm)',
+                  border: '1px solid var(--clearify-border)',
+                  fontSize: '0.6875rem',
+                  color: 'var(--clearify-text-tertiary)',
+                  fontFamily: 'var(--font-mono)',
+                  fontWeight: 500,
+                }}
+              >
+                Esc
+              </kbd>
+            </div>
+
+            <div
+              style={{
+                maxHeight: 420,
+                overflowY: 'auto',
+                padding: results.length > 0 ? '0.375rem' : '0',
+              }}
+            >
+              {query && results.length === 0 && (
+                <div
+                  style={{
+                    padding: '2.5rem 1rem',
+                    textAlign: 'center',
+                    color: 'var(--clearify-text-tertiary)',
+                    fontSize: '0.875rem',
+                  }}
+                >
+                  <svg
+                    width="32"
+                    height="32"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    style={{ margin: '0 auto 0.75rem', opacity: 0.4 }}
+                  >
+                    <circle cx="11" cy="11" r="8" />
+                    <path d="m21 21-4.3-4.3" />
+                    <line x1="8" y1="8" x2="14" y2="14" />
+                    <line x1="14" y1="8" x2="8" y2="14" />
+                  </svg>
+                  No results for "{query}"
+                </div>
+              )}
+              {results.map((result, i) => (
+                <button
+                  key={result.id}
+                  onClick={() => handleSelect(result.path)}
+                  style={{
+                    display: 'block',
+                    width: '100%',
+                    textAlign: 'left',
+                    padding: '0.75rem 1rem',
+                    border: 'none',
+                    borderRadius: 'var(--clearify-radius)',
+                    cursor: 'pointer',
+                    backgroundColor: selected === i ? 'var(--clearify-primary-soft)' : 'transparent',
+                    color: 'var(--clearify-text)',
+                    transition: 'background-color 0.1s',
+                    fontFamily: 'var(--font-sans)',
+                  }}
+                  onMouseEnter={() => setSelected(i)}
+                >
+                  <div
+                    style={{
+                      fontWeight: 600,
+                      fontSize: '0.875rem',
+                      marginBottom: '0.25rem',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '0.5rem',
+                      letterSpacing: '-0.01em',
+                    }}
+                  >
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke={selected === i ? 'var(--clearify-primary)' : 'var(--clearify-text-tertiary)'}
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      style={{ flexShrink: 0, transition: 'stroke 0.15s' }}
+                    >
+                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                      <polyline points="14 2 14 8 20 8" />
+                    </svg>
+                    {result.title}
+                    {result.sectionLabel && (
+                      <span
+                        style={{
+                          fontSize: '0.625rem',
+                          fontWeight: 600,
+                          padding: '0.1rem 0.4rem',
+                          borderRadius: '9999px',
+                          background: 'var(--clearify-gradient-subtle)',
+                          border: '1px solid var(--clearify-border)',
+                          color: 'var(--clearify-text-secondary)',
+                          whiteSpace: 'nowrap',
+                        }}
+                      >
+                        {result.sectionLabel}
+                      </span>
+                    )}
+                  </div>
+                  <div
+                    style={{
+                      fontSize: '0.8125rem',
+                      color: 'var(--clearify-text-tertiary)',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                      paddingLeft: '1.625rem',
+                    }}
+                  >
+                    {getExcerpt(result.content, query)}
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/theme/Sidebar.tsx

@@ -0,0 +1,325 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import clsx from 'clsx';
+import type { NavigationItem, SectionNavigation } from '../types/index.js';
+
+interface SidebarProps {
+  sections: SectionNavigation[];
+  open: boolean;
+  onClose: () => void;
+}
+
+function findActiveSection(pathname: string, sections: SectionNavigation[]): string {
+  let bestMatch = sections[0]?.id ?? '';
+  let bestLen = 0;
+
+  for (const section of sections) {
+    const bp = section.basePath;
+    if (bp === '/' && pathname === '/') {
+      if (bestLen === 0) {
+        bestMatch = section.id;
+        bestLen = 1;
+      }
+    } else if (bp !== '/' && pathname.startsWith(bp)) {
+      const rest = pathname.slice(bp.length);
+      if (rest === '' || rest.startsWith('/')) {
+        if (bp.length > bestLen) {
+          bestMatch = section.id;
+          bestLen = bp.length;
+        }
+      }
+    }
+  }
+
+  if (bestLen === 0 && sections.length > 0) {
+    bestMatch = sections[0].id;
+  }
+
+  return bestMatch;
+}
+
+function SectionSwitcher({
+  sections,
+  activeId,
+  onSelect,
+}: {
+  sections: SectionNavigation[];
+  activeId: string;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: '0.25rem',
+        padding: '0.625rem 1.25rem',
+        marginBottom: '0.25rem',
+      }}
+    >
+      {sections.map((section) => {
+        const isActive = activeId === section.id;
+        return (
+          <button
+            key={section.id}
+            onClick={() => onSelect(section.id)}
+            style={{
+              padding: '0.3rem 0.75rem',
+              borderRadius: '9999px',
+              border: 'none',
+              fontSize: '0.75rem',
+              fontWeight: 600,
+              cursor: 'pointer',
+              background: isActive ? 'var(--clearify-gradient)' : 'var(--clearify-bg-secondary)',
+              color: isActive ? '#fff' : 'var(--clearify-text-secondary)',
+              transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+              boxShadow: isActive ? 'var(--clearify-shadow-sm)' : 'none',
+            }}
+          >
+            {section.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export function Sidebar({ sections, open, onClose }: SidebarProps) {
+  const location = useLocation();
+
+  const isSectionData = sections.length > 0 && sections[0]?.id != null && Array.isArray(sections[0]?.navigation);
+  const legacyNavigation = !isSectionData ? (sections as unknown as NavigationItem[]) : null;
+
+  const [selectedSectionId, setSelectedSectionId] = useState(() =>
+    isSectionData ? findActiveSection(location.pathname, sections) : ''
+  );
+
+  useEffect(() => {
+    if (isSectionData) {
+      const active = findActiveSection(location.pathname, sections);
+      setSelectedSectionId(active);
+    }
+  }, [location.pathname, sections, isSectionData]);
+
+  const sidebarRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const sidebar = sidebarRef.current;
+    if (!sidebar) return;
+    // Small delay to allow render to complete
+    const timer = setTimeout(() => {
+      const activeEl = sidebar.querySelector('[data-active="true"]');
+      if (activeEl) {
+        activeEl.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [location.pathname]);
+
+  const activeSection = isSectionData
+    ? (sections.find((s) => s.id === selectedSectionId) ?? sections[0])
+    : null;
+  const navigation = legacyNavigation ?? activeSection?.navigation ?? [];
+  const showSwitcher = isSectionData && sections.length > 1;
+
+  return (
+    <>
+      {/* Mobile overlay */}
+      {open && (
+        <div
+          onClick={onClose}
+          style={{
+            position: 'fixed',
+            inset: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            backdropFilter: 'blur(4px)',
+            WebkitBackdropFilter: 'blur(4px)',
+            zIndex: 40,
+            animation: 'clearify-fade-in 0.15s ease-out',
+          }}
+          className="clearify-sidebar-overlay"
+        />
+      )}
+
+      <aside
+        ref={sidebarRef}
+        style={{
+          width: 'var(--clearify-sidebar-width)',
+          flexShrink: 0,
+          borderRight: '1px solid var(--clearify-border)',
+          overflowY: 'auto',
+          padding: '0.75rem 0',
+          height: 'calc(100vh - var(--clearify-header-height))',
+          position: 'sticky',
+          top: 'var(--clearify-header-height)',
+          backgroundColor: 'var(--clearify-bg)',
+          transition: 'transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+        }}
+        className={clsx('clearify-sidebar', open && 'clearify-sidebar-open')}
+      >
+        {showSwitcher && (
+          <SectionSwitcher
+            sections={sections}
+            activeId={selectedSectionId}
+            onSelect={setSelectedSectionId}
+          />
+        )}
+        <nav style={{ padding: '0 0.5rem' }}>
+          {navigation.map((item, i) => (
+            <NavItem key={i} item={item} depth={0} onNavigate={onClose} />
+          ))}
+        </nav>
+      </aside>
+
+      <style>{`
+        @media (max-width: 768px) {
+          .clearify-sidebar {
+            position: fixed !important;
+            top: var(--clearify-header-height) !important;
+            left: 0;
+            z-index: 41;
+            transform: translateX(-100%);
+            height: calc(100vh - var(--clearify-header-height)) !important;
+            box-shadow: var(--clearify-shadow-lg);
+          }
+          .clearify-sidebar-open {
+            transform: translateX(0) !important;
+          }
+          .clearify-menu-btn {
+            display: flex !important;
+          }
+        }
+      `}</style>
+    </>
+  );
+}
+
+function NavItem({ item, depth, onNavigate }: { item: NavigationItem; depth: number; onNavigate: () => void }) {
+  const location = useLocation();
+  const [expanded, setExpanded] = useState(true);
+  const isActive = item.path === location.pathname;
+
+  if (item.children) {
+    return (
+      <div style={{ marginBottom: '0.125rem' }}>
+        <button
+          onClick={() => setExpanded(!expanded)}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            width: '100%',
+            padding: '0.4rem 0.75rem',
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            fontSize: '0.6875rem',
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: '0.06em',
+            color: 'var(--clearify-text-tertiary)',
+            marginTop: depth === 0 ? '1.25rem' : 0,
+            borderRadius: 'var(--clearify-radius-sm)',
+            transition: 'color 0.15s',
+          }}
+          onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--clearify-text-secondary)')}
+          onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--clearify-text-tertiary)')}
+        >
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            style={{
+              marginRight: '0.375rem',
+              transition: 'transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+              transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
+              flexShrink: 0,
+            }}
+          >
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+          {item.label}
+        </button>
+        {expanded && (
+          <div style={{ animation: 'clearify-fade-in 0.15s ease-out' }}>
+            {item.children.map((child, i) => (
+              <NavItem key={i} item={child} depth={depth + 1} onNavigate={onNavigate} />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <Link
+      to={item.path!}
+      data-active={isActive ? 'true' : undefined}
+      onClick={() => {
+        onNavigate();
+        window.scrollTo(0, 0);
+      }}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.375rem',
+        padding: '0.4rem 0.75rem',
+        paddingLeft: `${0.75 + depth * 0.75}rem`,
+        fontSize: '0.8125rem',
+        fontWeight: isActive ? 600 : 400,
+        color: isActive ? 'var(--clearify-primary)' : 'var(--clearify-text-secondary)',
+        backgroundColor: isActive ? 'var(--clearify-primary-soft)' : 'transparent',
+        borderRadius: 'var(--clearify-radius-sm)',
+        textDecoration: 'none',
+        transition: 'all 0.15s ease',
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+      className="clearify-nav-link"
+    >
+      {isActive && (
+        <span
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: '15%',
+            bottom: '15%',
+            width: 3,
+            borderRadius: '0 2px 2px 0',
+            background: 'var(--clearify-gradient)',
+          }}
+        />
+      )}
+      {item.icon && <span style={{ flexShrink: 0, fontSize: '1rem', lineHeight: 1 }}>{item.icon}</span>}
+      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.label}</span>
+      {item.badge && (
+        <span style={{
+          fontSize: '0.5625rem',
+          fontWeight: 700,
+          fontFamily: 'var(--font-mono)',
+          padding: '0.0625rem 0.3rem',
+          borderRadius: '3px',
+          backgroundColor: item.badgeColor ?? 'var(--clearify-primary)',
+          color: '#fff',
+          marginLeft: 'auto',
+          flexShrink: 0,
+          textTransform: 'uppercase',
+          letterSpacing: '0.02em',
+          lineHeight: '1.4',
+        }}>
+          {item.badge}
+        </span>
+      )}
+
+      <style>{`
+        .clearify-nav-link:hover {
+          color: var(--clearify-text) !important;
+          background-color: var(--clearify-bg-secondary) !important;
+        }
+      `}</style>
+    </Link>
+  );
+}