@geminilight/mindos 0.6.73 → 0.6.74

package/_standalone/components/TableOfContents.tsx

@@ -1,207 +0,0 @@
-'use client';
-
-import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
-import { ChevronRight } from 'lucide-react';
-import GithubSlugger from 'github-slugger';
-import { useLocale } from '@/lib/stores/locale-store';
-import { cn } from '@/lib/utils';
-
-interface Heading {
-  id: string;
-  text: string;
-  level: number;
-}
-
-function parseHeadings(content: string): Heading[] {
-  const slugger = new GithubSlugger();
-  const lines = content.split('\n');
-  const headings: Heading[] = [];
-  let inCodeBlock = false;
-  for (const line of lines) {
-    if (/^(`{3,}|~{3,})/.test(line)) {
-      inCodeBlock = !inCodeBlock;
-      continue;
-    }
-    if (inCodeBlock) continue;
-    const match = line.match(/^(#{1,4})\s+(.+)/);
-    if (match) {
-      const level = match[1].length;
-      const text = match[2].trim();
-      const id = slugger.slug(text);
-      headings.push({ id, text, level });
-    }
-  }
-  return headings;
-}
-
-const TOPBAR_H = 46;
-const SCROLL_OFFSET = TOPBAR_H + 12;
-const NAV_W = 212;
-
-interface TableOfContentsProps {
-  content: string;
-}
-
-export default function TableOfContents({ content }: TableOfContentsProps) {
-  const { t } = useLocale();
-  const { headings, minLevel } = useMemo(() => {
-    const h = parseHeadings(content);
-    return { headings: h, minLevel: h.length > 0 ? Math.min(...h.map(x => x.level)) : 1 };
-  }, [content]);
-  const [activeId, setActiveId] = useState<string>('');
-  const [collapsed, setCollapsed] = useState(false);
-
-  // Broadcast TOC width to content area via CSS variables
-  useEffect(() => {
-    const root = document.documentElement.style;
-    root.setProperty('--toc-width', collapsed ? '0px' : `${NAV_W}px`);
-    if (collapsed) {
-      root.removeProperty('--toc-margin');
-    } else {
-      root.setProperty('--toc-margin', `${NAV_W + 8}px`);
-    }
-    return () => { root.removeProperty('--toc-width'); root.removeProperty('--toc-margin'); };
-  }, [collapsed]);
-  const observerRef = useRef<IntersectionObserver | null>(null);
-  const navRef = useRef<HTMLElement | null>(null);
-  const linkRefs = useRef<Map<string, HTMLAnchorElement>>(new Map());
-
-  const scrollActiveIntoView = useCallback((id: string) => {
-    const link = linkRefs.current.get(id);
-    const nav = navRef.current;
-    if (!link || !nav || !link.isConnected) return;
-    const navRect = nav.getBoundingClientRect();
-    const linkRect = link.getBoundingClientRect();
-    const isAbove = linkRect.top < navRect.top + 40;
-    const isBelow = linkRect.bottom > navRect.bottom - 40;
-    if (isAbove || isBelow) {
-      link.scrollIntoView({ block: 'center', behavior: 'auto' });
-    }
-  }, []);
-
-  useEffect(() => {
-    if (headings.length === 0) return;
-    const timer = setTimeout(() => {
-      const elements = headings
-        .map(h => document.getElementById(h.id))
-        .filter(Boolean) as HTMLElement[];
-      if (elements.length === 0) return;
-      observerRef.current?.disconnect();
-      observerRef.current = new IntersectionObserver(
-        (entries) => {
-          for (const entry of entries) {
-            if (entry.isIntersecting) {
-              setActiveId(entry.target.id);
-              scrollActiveIntoView(entry.target.id);
-              break;
-            }
-          }
-        },
-        { rootMargin: `-${SCROLL_OFFSET}px 0% -70% 0%`, threshold: 0 }
-      );
-      elements.forEach(el => observerRef.current?.observe(el));
-    }, 150);
-    return () => { clearTimeout(timer); observerRef.current?.disconnect(); };
-  // headings is derived from content via useMemo; scrollActiveIntoView is stable (no deps)
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [headings]);
-
-  if (headings.length < 2) return null;
-
-  const handleClick = (e: React.MouseEvent, id: string) => {
-    e.preventDefault();
-    const el = document.getElementById(id);
-    if (!el) return;
-    const top = el.getBoundingClientRect().top + window.scrollY - SCROLL_OFFSET;
-    window.scrollTo({ top, behavior: 'smooth' });
-    setActiveId(id);
-  };
-
-  return (
-    <>
-      {/* Collapse / expand toggle — separate from aside so it stays visible */}
-      <button
-        onClick={() => setCollapsed(v => !v)}
-        className="hidden xl:flex fixed z-10 top-[46px] flex items-center justify-center w-5 h-8 rounded-l-md border border-r-0 border-border hover:bg-muted transition-colors"
-        style={{
-          right: `calc(var(--right-panel-width, 0px) + ${collapsed ? 0 : NAV_W}px)`,
-          background: 'var(--background)',
-          transition: 'right 200ms ease-in-out',
-        }}
-        title={collapsed ? t.view.tocExpand : t.view.tocCollapse}
-      >
-        <ChevronRight
-          size={11}
-          className="text-muted-foreground/60 transition-transform duration-200"
-          style={{ transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)' }}
-        />
-      </button>
-
-      {/* TOC panel */}
-      <aside
-        className="hidden xl:flex flex-col fixed z-10 overflow-hidden"
-        style={{
-          top: TOPBAR_H,
-          height: `calc(100vh - ${TOPBAR_H}px)`,
-          width: NAV_W,
-          right: 'var(--right-panel-width, 0px)',
-          transform: collapsed ? `translateX(${NAV_W}px)` : 'translateX(0)',
-          transition: 'transform 200ms ease-in-out, right 200ms ease-out',
-        }}
-      >
-      <div className="flex items-center h-[46px] px-4 border-l border-b border-border" style={{ background: 'var(--background)' }}>
-        <p className="text-2xs font-semibold uppercase tracking-wider text-muted-foreground/55 shrink-0">
-          {t.view.tocTitle}
-        </p>
-      </div>
-      <nav
-        ref={navRef}
-        aria-label={t.view.tocTitle}
-        className="flex flex-col gap-0.5 overflow-y-auto min-h-0 flex-1 pt-3 pb-5 pl-2 pr-3 border-l border-border"
-        style={{ background: 'var(--background)' }}
-      >
-        {headings.map((heading, i) => {
-          const indent = (heading.level - minLevel) * 14;
-          const isActive = activeId === heading.id;
-          const isNested = heading.level > minLevel;
-          return (
-            <a
-              key={`${heading.id}-${i}`}
-              ref={el => {
-                if (el) linkRefs.current.set(heading.id, el);
-                else linkRefs.current.delete(heading.id);
-              }}
-              href={`#${heading.id}`}
-              onClick={(e) => handleClick(e, heading.id)}
-              className={cn(
-                'block text-xs py-1 rounded transition-colors duration-100 leading-snug shrink-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
-                isActive && 'font-medium',
-              )}
-              style={{
-                paddingLeft: `${8 + indent}px`,
-                paddingRight: '8px',
-                borderLeft: '2px solid',
-                borderLeftColor: isActive
-                  ? 'var(--amber)'
-                  : isNested
-                    ? 'var(--border)'
-                    : 'transparent',
-                marginLeft: isNested ? '7px' : '0',
-                ...(isActive
-                  ? { color: 'var(--amber)', background: 'var(--amber-dim)' }
-                  : { color: 'var(--muted-foreground)' }
-                ),
-              }}
-              title={heading.text}
-            >
-              <span className="block truncate" suppressHydrationWarning>
-                {heading.text}
-              </span>
-            </a>
-          );
-        })}
-      </nav>
-    </aside>
-    </>
-  );
-}

package/_standalone/components/ThemeToggle.tsx

@@ -1,36 +0,0 @@
-'use client';
-
-import { useSyncExternalStore } from 'react';
-import { Sun, Moon } from 'lucide-react';
-
-export default function ThemeToggle() {
-  const dark = useSyncExternalStore(
-    (onStoreChange) => {
-      const listener = () => onStoreChange();
-      window.addEventListener('mindos-theme-change', listener);
-      return () => window.removeEventListener('mindos-theme-change', listener);
-    },
-    () => {
-      const stored = localStorage.getItem('theme');
-      return stored && stored !== 'system' ? stored === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches;
-    },
-    () => document.documentElement.classList.contains('dark'),
-  );
-
-  const toggle = () => {
-    const next = !dark;
-    document.documentElement.classList.toggle('dark', next);
-    localStorage.setItem('theme', next ? 'dark' : 'light');
-    window.dispatchEvent(new Event('mindos-theme-change'));
-  };
-
-  return (
-    <button
-      onClick={toggle}
-      className="p-1.5 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
-      title={dark ? 'Switch to light mode' : 'Switch to dark mode'}
-    >
-      {dark ? <Sun size={15} /> : <Moon size={15} />}
-    </button>
-  );
-}

package/_standalone/components/WysiwygEditor.tsx

@@ -1,165 +0,0 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-import { useEditor, EditorContent } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-import Placeholder from '@tiptap/extension-placeholder';
-import TaskList from '@tiptap/extension-task-list';
-import TaskItem from '@tiptap/extension-task-item';
-import Link from '@tiptap/extension-link';
-import Image from '@tiptap/extension-image';
-import { Table } from '@tiptap/extension-table';
-import { TableRow } from '@tiptap/extension-table';
-import { TableCell } from '@tiptap/extension-table';
-import { TableHeader } from '@tiptap/extension-table';
-import { Markdown } from 'tiptap-markdown';
-import { useEditorImageUpload } from '@/hooks/useEditorImageUpload';
-import { resolveImagePath } from '@/lib/image';
-import { toast } from '@/lib/toast';
-
-/**
- * Custom Image extension that resolves `/.media/` paths to API URLs in the DOM,
- * while keeping the raw path in the markdown serialization.
- */
-const ResolvedImage = Image.extend({
-  renderHTML({ HTMLAttributes }) {
-    const src = HTMLAttributes.src;
-    const resolvedSrc = typeof src === 'string' ? resolveImagePath(src) : src;
-    return ['img', { ...HTMLAttributes, src: resolvedSrc }];
-  },
-});
-
-interface WysiwygEditorProps {
-  value: string;
-  onChange: (markdown: string) => void;
-}
-
-export default function WysiwygEditor({ value, onChange }: WysiwygEditorProps) {
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
-
-  const { uploadToMedia, isUploading } = useEditorImageUpload();
-  const uploadRef = useRef(uploadToMedia);
-  uploadRef.current = uploadToMedia;
-
-  const editor = useEditor({
-    extensions: [
-      StarterKit.configure({
-        codeBlock: { HTMLAttributes: { class: 'not-prose' } },
-      }),
-      Markdown.configure({
-        html: true,
-        transformPastedText: true,
-        transformCopiedText: true,
-      }),
-      Placeholder.configure({ placeholder: 'Start writing…' }),
-      TaskList,
-      TaskItem.configure({ nested: true }),
-      Link.configure({ openOnClick: false, autolink: true }),
-      ResolvedImage.configure({
-        HTMLAttributes: { class: 'rounded-md max-w-full' },
-      }),
-      Table.configure({ resizable: false }),
-      TableRow,
-      TableHeader,
-      TableCell,
-    ],
-    content: value,
-    editorProps: {
-      attributes: {
-        class: 'prose max-w-none focus:outline-none wysiwyg-editor',
-      },
-    },
-    onUpdate({ editor }) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const md = (editor.storage as any).markdown?.getMarkdown?.() ?? editor.getText();
-      onChangeRef.current(md);
-    },
-    immediatelyRender: false,
-  });
-
-  // Set up drag/drop and paste handlers on editor mount
-  useEffect(() => {
-    if (!editor) return;
-
-    const editorDom = editor.view.dom;
-
-    const handleImageInsert = async (files: File[]) => {
-      if (!editor) return;
-      try {
-        const uploadedPaths = await uploadRef.current(files);
-        for (const p of uploadedPaths) {
-          editor.chain().focus().setImage({ src: p }).run();
-        }
-        toast.success('Images inserted');
-      } catch (err) {
-        toast.error('Failed to insert images');
-        console.error(err);
-      }
-    };
-
-    const handleDrop = (e: DragEvent) => {
-      const files = Array.from(e.dataTransfer?.files ?? []).filter((f) =>
-        f.type.startsWith('image/'),
-      );
-      if (files.length > 0) {
-        e.preventDefault();
-        e.stopPropagation();
-        handleImageInsert(files);
-      }
-    };
-
-    const handlePaste = (e: ClipboardEvent) => {
-      const items = e.clipboardData?.items;
-      if (!items) return;
-
-      const files: File[] = [];
-      for (let i = 0; i < items.length; i++) {
-        const item = items[i];
-        if (item.kind === 'file' && item.type.startsWith('image/')) {
-          const file = item.getAsFile();
-          if (file) files.push(file);
-        }
-      }
-
-      if (files.length > 0) {
-        e.preventDefault();
-        handleImageInsert(files);
-      }
-    };
-
-    editorDom.addEventListener('drop', handleDrop as EventListener);
-    editorDom.addEventListener('paste', handlePaste as EventListener);
-
-    return () => {
-      editorDom.removeEventListener('drop', handleDrop as EventListener);
-      editorDom.removeEventListener('paste', handlePaste as EventListener);
-    };
-  }, [editor]);
-
-  // Sync external value changes (e.g. cancel → revert) without full re-mount
-  const lastMd = useRef(value);
-  useEffect(() => {
-    if (!editor || value === lastMd.current) return;
-    lastMd.current = value;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const current = (editor.storage as any).markdown?.getMarkdown?.() ?? '';
-    if (current !== value) {
-      editor.commands.setContent(value);
-    }
-  }, [editor, value]);
-
-  return (
-    <div className="wysiwyg-wrapper h-full overflow-y-auto px-8 py-6">
-      {isUploading && (
-        <div className="fixed inset-0 overlay-backdrop flex items-center justify-center z-50">
-          <div className="bg-card border border-border rounded-lg px-6 py-4 text-center shadow-lg">
-            <div className="animate-spin inline-block w-5 h-5 border-2 border-primary border-t-transparent rounded-full" />
-            <p className="mt-2 text-sm text-muted-foreground">Uploading images...</p>
-          </div>
-        </div>
-      )}
-      <EditorContent editor={editor} />
-    </div>
-  );
-}