@marlinjai/clearify 1.5.0

package/src/theme/TableOfContents.tsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from 'react';
+
+interface Heading {
+  id: string;
+  text: string;
+  level: number;
+}
+
+export function TableOfContents() {
+  const [headings, setHeadings] = useState<Heading[]>([]);
+  const [activeId, setActiveId] = useState('');
+
+  useEffect(() => {
+    const elements = document.querySelectorAll('.clearify-prose h2, .clearify-prose h3');
+    const items: Heading[] = [];
+
+    elements.forEach((el) => {
+      if (!el.id) {
+        el.id = el.textContent?.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '') ?? '';
+      }
+      items.push({
+        id: el.id,
+        text: el.textContent ?? '',
+        level: el.tagName === 'H2' ? 2 : 3,
+      });
+    });
+
+    setHeadings(items);
+  }, []);
+
+  useEffect(() => {
+    if (headings.length === 0) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+            break;
+          }
+        }
+      },
+      { rootMargin: '-80px 0px -80% 0px' }
+    );
+
+    headings.forEach(({ id }) => {
+      const el = document.getElementById(id);
+      if (el) observer.observe(el);
+    });
+
+    return () => observer.disconnect();
+  }, [headings]);
+
+  if (headings.length === 0) return null;
+
+  return (
+    <nav
+      style={{
+        width: 'var(--clearify-toc-width)',
+        flexShrink: 0,
+        padding: '2.5rem 1rem 2.5rem 0',
+        position: 'sticky',
+        top: 'var(--clearify-header-height)',
+        height: 'calc(100vh - var(--clearify-header-height))',
+        overflowY: 'auto',
+        fontSize: '0.8125rem',
+      }}
+      className="clearify-toc"
+    >
+      <div
+        style={{
+          fontWeight: 600,
+          fontSize: '0.6875rem',
+          textTransform: 'uppercase',
+          letterSpacing: '0.08em',
+          color: 'var(--clearify-text-tertiary)',
+          marginBottom: '0.875rem',
+          paddingLeft: '0.75rem',
+        }}
+      >
+        On this page
+      </div>
+      <ul style={{ listStyle: 'none', padding: 0, margin: 0, position: 'relative' }}>
+        {/* Vertical track line */}
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: 1,
+            backgroundColor: 'var(--clearify-border)',
+            borderRadius: 1,
+          }}
+        />
+        {headings.map((heading) => {
+          const isActive = activeId === heading.id;
+          return (
+            <li key={heading.id} style={{ position: 'relative' }}>
+              {isActive && (
+                <span
+                  style={{
+                    position: 'absolute',
+                    left: 0,
+                    top: 4,
+                    bottom: 4,
+                    width: 2,
+                    borderRadius: 1,
+                    background: 'var(--clearify-gradient)',
+                    transition: 'opacity 0.15s',
+                  }}
+                />
+              )}
+              <a
+                href={`#${heading.id}`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  document.getElementById(heading.id)?.scrollIntoView({ behavior: 'smooth' });
+                  setActiveId(heading.id);
+                }}
+                style={{
+                  display: 'block',
+                  padding: '0.25rem 0.75rem',
+                  paddingLeft: heading.level === 3 ? '1.25rem' : '0.75rem',
+                  color: isActive ? 'var(--clearify-primary)' : 'var(--clearify-text-tertiary)',
+                  fontWeight: isActive ? 500 : 400,
+                  textDecoration: 'none',
+                  transition: 'color 0.15s',
+                  fontSize: '0.8125rem',
+                  lineHeight: 1.5,
+                }}
+                className="clearify-toc-link"
+              >
+                {heading.text}
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+
+      <style>{`
+        .clearify-toc-link:hover {
+          color: var(--clearify-text) !important;
+        }
+        @media (max-width: 1024px) {
+          .clearify-toc {
+            display: none;
+          }
+        }
+      `}</style>
+    </nav>
+  );
+}

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,77 @@
+import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextValue {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue>({
+  theme: 'light',
+  toggleTheme: () => {},
+});
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}
+
+function getSystemTheme(): Theme {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function getStoredTheme(): Theme | null {
+  if (typeof window === 'undefined') return null;
+  return localStorage.getItem('clearify-theme') as Theme | null;
+}
+
+export function ThemeProvider({
+  mode,
+  children,
+}: {
+  mode: 'light' | 'dark' | 'auto';
+  children: React.ReactNode;
+}) {
+  const [theme, setTheme] = useState<Theme>(() => {
+    if (mode === 'auto') {
+      return getStoredTheme() ?? getSystemTheme();
+    }
+    return mode;
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+  }, [theme]);
+
+  useEffect(() => {
+    if (mode !== 'auto') return;
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => {
+      if (!getStoredTheme()) {
+        setTheme(e.matches ? 'dark' : 'light');
+      }
+    };
+    media.addEventListener('change', handler);
+    return () => media.removeEventListener('change', handler);
+  }, [mode]);
+
+  const toggleTheme = useCallback(() => {
+    setTheme((prev) => {
+      const next = prev === 'light' ? 'dark' : 'light';
+      localStorage.setItem('clearify-theme', next);
+      return next;
+    });
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}

package/src/theme/components/Accordion.tsx

@@ -0,0 +1,109 @@
+import React, { useState, Children, isValidElement } from 'react';
+
+interface AccordionProps {
+  title: string;
+  defaultOpen?: boolean;
+  icon?: string;
+  children: React.ReactNode;
+}
+
+export function Accordion({ title, defaultOpen = false, icon, children }: AccordionProps) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div
+      style={{
+        border: '1px solid var(--clearify-border)',
+        borderRadius: 'var(--clearify-radius)',
+        marginBottom: '0.5rem',
+        overflow: 'hidden',
+        background: 'var(--clearify-bg)',
+      }}
+      className="clearify-accordion"
+    >
+      <button
+        onClick={() => setOpen(!open)}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+          width: '100%',
+          padding: '0.75rem 1rem',
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          fontSize: '0.9375rem',
+          fontWeight: 600,
+          color: 'var(--clearify-text)',
+          fontFamily: 'var(--font-sans)',
+          textAlign: 'left',
+          letterSpacing: '-0.01em',
+        }}
+        className="clearify-accordion-trigger"
+      >
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{
+            flexShrink: 0,
+            transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
+            transition: 'transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)',
+            color: 'var(--clearify-text-secondary)',
+          }}
+        >
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+        {icon && <span style={{ flexShrink: 0 }}>{icon}</span>}
+        <span style={{ flex: 1 }}>{title}</span>
+      </button>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateRows: open ? '1fr' : '0fr',
+          transition: 'grid-template-rows 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+        }}
+      >
+        <div style={{ overflow: 'hidden' }}>
+          <div
+            style={{
+              padding: '0 1rem 1rem 2.5rem',
+              fontSize: '0.875rem',
+              color: 'var(--clearify-text-secondary)',
+              lineHeight: 1.6,
+            }}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+
+      <style>{`
+        .clearify-accordion-trigger:hover {
+          background-color: var(--clearify-bg-secondary) !important;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+interface AccordionGroupProps {
+  children: React.ReactNode;
+}
+
+export function AccordionGroup({ children }: AccordionGroupProps) {
+  const items = Children.toArray(children).filter(isValidElement);
+
+  return (
+    <div style={{ marginBottom: '1.25rem' }}>
+      {items.map((child, i) => (
+        <React.Fragment key={i}>{child}</React.Fragment>
+      ))}
+    </div>
+  );
+}

package/src/theme/components/Badge.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+const variants = {
+  default: {
+    bg: 'rgba(107, 114, 128, 0.08)',
+    bgDark: 'rgba(107, 114, 128, 0.15)',
+    color: '#4b5563',
+    colorDark: '#d1d5db',
+  },
+  success: {
+    bg: 'rgba(34, 197, 94, 0.08)',
+    bgDark: 'rgba(34, 197, 94, 0.15)',
+    color: '#16a34a',
+    colorDark: '#4ade80',
+  },
+  warning: {
+    bg: 'rgba(245, 158, 11, 0.08)',
+    bgDark: 'rgba(245, 158, 11, 0.15)',
+    color: '#d97706',
+    colorDark: '#fbbf24',
+  },
+  error: {
+    bg: 'rgba(239, 68, 68, 0.08)',
+    bgDark: 'rgba(239, 68, 68, 0.15)',
+    color: '#dc2626',
+    colorDark: '#f87171',
+  },
+  info: {
+    bg: 'rgba(99, 102, 241, 0.08)',
+    bgDark: 'rgba(99, 102, 241, 0.15)',
+    color: '#6366f1',
+    colorDark: '#818cf8',
+  },
+};
+
+interface BadgeProps {
+  children: React.ReactNode;
+  variant?: keyof typeof variants;
+}
+
+export function Badge({ children, variant = 'default' }: BadgeProps) {
+  const v = variants[variant];
+  const badgeClass = `clearify-badge-${variant}`;
+
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: '0.125rem 0.5rem',
+        borderRadius: '9999px',
+        fontSize: '0.75rem',
+        fontWeight: 500,
+        lineHeight: 1.5,
+        backgroundColor: v.bg,
+        color: v.color,
+        fontFamily: 'var(--font-sans)',
+        whiteSpace: 'nowrap',
+      }}
+      className={badgeClass}
+    >
+      {children}
+
+      <style>{`
+        .dark .${badgeClass} {
+          background-color: ${v.bgDark} !important;
+          color: ${v.colorDark} !important;
+        }
+      `}</style>
+    </span>
+  );
+}

package/src/theme/components/Breadcrumbs.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+function toTitleCase(str: string): string {
+  return str
+    .replace(/[-_]/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+export function Breadcrumbs() {
+  const location = useLocation();
+  const pathname = location.pathname;
+
+  // Don't show breadcrumbs on the root page
+  if (pathname === '/') return null;
+
+  const segments = pathname.split('/').filter(Boolean);
+  if (segments.length === 0) return null;
+
+  const crumbs = segments.map((segment, i) => {
+    const path = '/' + segments.slice(0, i + 1).join('/');
+    const label = toTitleCase(segment);
+    const isLast = i === segments.length - 1;
+    return { label, path, isLast };
+  });
+
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.375rem',
+        fontSize: '0.8125rem',
+        marginBottom: '1rem',
+        flexWrap: 'wrap',
+      }}
+    >
+      <Link
+        to="/"
+        style={{
+          color: 'var(--clearify-text-secondary)',
+          textDecoration: 'none',
+          transition: 'color 0.15s',
+        }}
+        className="clearify-breadcrumb-link"
+      >
+        Home
+      </Link>
+      {crumbs.map((crumb) => (
+        <React.Fragment key={crumb.path}>
+          <span
+            style={{
+              color: 'var(--clearify-text-tertiary)',
+              userSelect: 'none',
+              fontSize: '0.75rem',
+            }}
+          >
+            /
+          </span>
+          {crumb.isLast ? (
+            <span style={{ color: 'var(--clearify-text)', fontWeight: 500 }}>
+              {crumb.label}
+            </span>
+          ) : (
+            <Link
+              to={crumb.path}
+              style={{
+                color: 'var(--clearify-text-secondary)',
+                textDecoration: 'none',
+                transition: 'color 0.15s',
+              }}
+              className="clearify-breadcrumb-link"
+            >
+              {crumb.label}
+            </Link>
+          )}
+        </React.Fragment>
+      ))}
+
+      <style>{`
+        .clearify-breadcrumb-link:hover {
+          color: var(--clearify-primary) !important;
+        }
+      `}</style>
+    </nav>
+  );
+}

package/src/theme/components/Callout.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+
+const variants = {
+  info: {
+    bg: 'rgba(99, 102, 241, 0.06)',
+    bgDark: 'rgba(99, 102, 241, 0.1)',
+    border: '#6366f1',
+    iconColor: '#6366f1',
+    iconColorDark: '#818cf8',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="10" />
+        <line x1="12" y1="16" x2="12" y2="12" />
+        <line x1="12" y1="8" x2="12.01" y2="8" />
+      </svg>
+    ),
+  },
+  warning: {
+    bg: 'rgba(245, 158, 11, 0.06)',
+    bgDark: 'rgba(245, 158, 11, 0.1)',
+    border: '#f59e0b',
+    iconColor: '#d97706',
+    iconColorDark: '#fbbf24',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+        <line x1="12" y1="9" x2="12" y2="13" />
+        <line x1="12" y1="17" x2="12.01" y2="17" />
+      </svg>
+    ),
+  },
+  error: {
+    bg: 'rgba(239, 68, 68, 0.06)',
+    bgDark: 'rgba(239, 68, 68, 0.1)',
+    border: '#ef4444',
+    iconColor: '#dc2626',
+    iconColorDark: '#f87171',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="10" />
+        <line x1="15" y1="9" x2="9" y2="15" />
+        <line x1="9" y1="9" x2="15" y2="15" />
+      </svg>
+    ),
+  },
+  tip: {
+    bg: 'rgba(34, 197, 94, 0.06)',
+    bgDark: 'rgba(34, 197, 94, 0.1)',
+    border: '#22c55e',
+    iconColor: '#16a34a',
+    iconColorDark: '#4ade80',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M9 18h6" />
+        <path d="M10 22h4" />
+        <path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14" />
+      </svg>
+    ),
+  },
+};
+
+interface CalloutProps {
+  type?: keyof typeof variants;
+  title?: string;
+  children: React.ReactNode;
+}
+
+export function Callout({ type = 'info', title, children }: CalloutProps) {
+  const v = variants[type];
+  const calloutId = `clearify-callout-${type}`;
+
+  return (
+    <div
+      style={{
+        borderLeft: `3px solid ${v.border}`,
+        borderRadius: `0 var(--clearify-radius) var(--clearify-radius) 0`,
+        padding: '0.875rem 1.25rem',
+        marginBottom: '1.25rem',
+        backgroundColor: v.bg,
+        fontSize: '0.9375rem',
+      }}
+      className={calloutId}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+          marginBottom: children ? '0.375rem' : 0,
+          fontWeight: 600,
+          fontSize: '0.875rem',
+          color: v.iconColor,
+        }}
+      >
+        <span style={{ display: 'flex', alignItems: 'center', flexShrink: 0 }}>{v.icon}</span>
+        {title && <span>{title}</span>}
+        {!title && <span style={{ textTransform: 'capitalize' }}>{type}</span>}
+      </div>
+      {children && (
+        <div style={{ fontSize: '0.875rem', color: 'var(--clearify-text-secondary)', lineHeight: 1.6 }}>
+          {children}
+        </div>
+      )}
+
+      <style>{`
+        .dark .${calloutId} {
+          background-color: ${v.bgDark} !important;
+        }
+        .dark .${calloutId} > div:first-child {
+          color: ${v.iconColorDark} !important;
+        }
+      `}</style>
+    </div>
+  );
+}