@karmaniverous/jeeves-server 3.0.0-0

package/client/src/components/LinkDropdown.tsx

@@ -0,0 +1,134 @@
+import { Link as LinkIcon } from 'lucide-react';
+
+import { DropdownMenuItem, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
+import { ActionDropdown, DropdownErrorBanner, type ActionState } from '@/components/ActionDropdown';
+import { useActionState } from '@/components/useActionState';
+import { getShareLink, type ShareSettings } from '@/lib/api';
+
+interface LinkDropdownProps {
+  path: string;
+  shareSettings: ShareSettings;
+  onShareSettingsChange: (settings: ShareSettings) => void;
+  showEvent?: boolean;
+  showRaw?: boolean;
+  compact?: boolean;
+  isDirectory?: boolean;
+  variant?: 'header' | 'default' | 'menuItem';
+  onError?: (error: string) => void;
+  onStateChange?: (state: ActionState) => void;
+}
+
+type LinkType = 'page' | 'raw' | 'event';
+
+async function copyShareLink(path: string, settings: ShareSettings, type: LinkType, isDirectory?: boolean) {
+  let expiryParam: string | undefined;
+  if (settings.expiry) {
+    const match = settings.expiry.match(/^(\d+)([hdw])$/i);
+    if (match) {
+      const val = parseInt(match[1], 10);
+      const unit = match[2].toLowerCase();
+      const multiplier: Record<string, number> = { h: 3_600_000, d: 86_400_000, w: 604_800_000 };
+      expiryParam = String(Date.now() + val * multiplier[unit]);
+    }
+  }
+
+  const depth = !isDirectory && settings.depth > 0 ? settings.depth : undefined;
+  const dirs = !isDirectory && settings.dirs ? true : undefined;
+
+  const data = await getShareLink(path, expiryParam, depth, dirs);
+  if (!data.url) throw new Error('No URL returned');
+
+  let fullUrl = window.location.origin + data.url;
+  if (type === 'raw') {
+    const shareUrl = new URL(fullUrl);
+    shareUrl.pathname = shareUrl.pathname.replace('/browse/', '/api/raw/');
+    fullUrl = shareUrl.toString();
+  } else if (type === 'event') {
+    fullUrl = window.location.origin + '/event?key=' + data.url.split('key=')[1];
+  }
+  await navigator.clipboard.writeText(fullUrl);
+}
+
+const EXPIRY_OPTIONS = [
+  { label: 'Never', value: '' },
+  { label: '1 hour', value: '1h' },
+  { label: '24 hours', value: '24h' },
+  { label: '7 days', value: '7d' },
+  { label: '30 days', value: '30d' },
+];
+
+export function LinkDropdown({ path, shareSettings, onShareSettingsChange, showEvent, showRaw, compact, isDirectory, variant = 'default', onError, onStateChange }: LinkDropdownProps) {
+  const { state, errorMsg, handleAction, resetOnClose } = useActionState(onError, onStateChange);
+
+  const items: { label: string; type: LinkType }[] = [{ label: 'Page', type: 'page' }];
+  if (showRaw) items.push({ label: 'Raw', type: 'raw' });
+  if (showEvent) items.push({ label: 'Event', type: 'event' });
+
+  return (
+    <ActionDropdown
+      icon={LinkIcon}
+      label="Share"
+      title="Copy share link"
+      variant={variant}
+      compact={compact}
+      state={state}
+      contentClass="w-52"
+      onOpenChange={resetOnClose}
+      errorSlot={<DropdownErrorBanner message={errorMsg} />}
+    >
+      {items.map((item) => (
+        <DropdownMenuItem
+          key={item.type}
+          onSelect={() => void handleAction(() => copyShareLink(path, shareSettings, item.type, isDirectory))}
+          className="cursor-pointer"
+        >
+          Copy {item.label} Link
+        </DropdownMenuItem>
+      ))}
+
+      <DropdownMenuSeparator />
+
+      <div className="px-2 py-1 flex items-center justify-between gap-2">
+        <span className="text-xs text-muted-foreground whitespace-nowrap">Expires</span>
+        <select
+          className="text-xs bg-popover text-popover-foreground border border-border rounded px-1 py-0.5 focus:outline-none focus:ring-1 focus:ring-ring min-w-0"
+          value={shareSettings.expiry}
+          onChange={(e) => onShareSettingsChange({ ...shareSettings, expiry: e.target.value })}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {EXPIRY_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+      </div>
+
+      {!isDirectory && (
+        <>
+          <div className="px-2 py-1 flex items-center justify-between gap-2">
+            <span className="text-xs text-muted-foreground whitespace-nowrap">Depth</span>
+            <input
+              type="number"
+              min={0}
+              max={10}
+              className="text-xs bg-popover text-popover-foreground border border-border rounded px-1 py-0.5 w-14 text-right focus:outline-none focus:ring-1 focus:ring-ring"
+              value={shareSettings.depth}
+              onChange={(e) => onShareSettingsChange({ ...shareSettings, depth: Math.max(0, parseInt(e.target.value, 10) || 0) })}
+              onClick={(e) => e.stopPropagation()}
+            />
+          </div>
+
+          <div className="px-2 py-1 flex items-center justify-between gap-2">
+            <span className="text-xs text-muted-foreground whitespace-nowrap">Directories</span>
+            <input
+              type="checkbox"
+              className="rounded border-border"
+              checked={shareSettings.dirs}
+              onChange={(e) => onShareSettingsChange({ ...shareSettings, dirs: e.target.checked })}
+              onClick={(e) => e.stopPropagation()}
+            />
+          </div>
+        </>
+      )}
+    </ActionDropdown>
+  );
+}

package/client/src/components/MarkdownView.tsx

@@ -0,0 +1,115 @@
+/**
+ * Markdown rendered view with TOC sidebar.
+ */
+import type { FileContent } from '@/lib/api';
+import { initEmbeddedDiagramPanzoom } from '@/components/EmbeddedDiagramPanzoom';
+import { initLazyDiagrams } from '@/components/LazyDiagram';
+import { initInlineSvgPanzoom } from '@/components/InlineSvgPanzoom';
+import { initCodeBlockCm6 } from '@/lib/codeBlockCm6';
+import { injectCopyButtons } from '@/lib/codeBlockCopy';
+import { useTheme } from '@/lib/theme';
+import { scrollToIdInContainer } from './scrollUtils';
+
+interface MarkdownViewProps {
+  fileRendered: FileContent;
+  proseWidth: 'narrow' | 'medium' | 'wide';
+  topBarHeight: number;
+  mainRef: React.RefObject<HTMLElement | null>;
+  mobileTocOpen: boolean;
+  setMobileTocOpen: (open: boolean) => void;
+}
+
+export function MarkdownView({
+  fileRendered, proseWidth, topBarHeight, mainRef,
+  mobileTocOpen, setMobileTocOpen,
+}: MarkdownViewProps) {
+  const [theme] = useTheme();
+  const plainCode = new URLSearchParams(window.location.search).has('plain_code');
+  const hasHeadings = fileRendered.headings && fileRendered.headings.length > 2;
+
+  return (
+    <>
+      {/* Mobile TOC overlay */}
+      {mobileTocOpen && hasHeadings && (
+        <>
+          <div className="lg:hidden fixed inset-0 z-40" onClick={() => setMobileTocOpen(false)} />
+          <div
+            className="lg:hidden fixed left-2 right-2 z-50 bg-popover text-popover-foreground border border-border rounded-lg shadow-lg max-h-[60vh] overflow-y-auto px-4 py-3"
+            style={{ top: `${topBarHeight + 4}px` }}
+          >
+            <nav>
+              {fileRendered.headings!.map((h) => (
+                <button
+                  key={h.slug}
+                  type="button"
+                  onClick={() => { scrollToIdInContainer(mainRef.current, h.slug); setMobileTocOpen(false); }}
+                  className="block text-left text-sm text-muted-foreground hover:text-foreground cursor-pointer py-1 transition-colors w-full"
+                  style={{ paddingLeft: `${(h.level - 1) * 0.75}rem` }}
+                >
+                  {h.text}
+                </button>
+              ))}
+            </nav>
+          </div>
+        </>
+      )}
+
+      <div className="flex gap-6">
+        {/* Desktop TOC sidebar */}
+        {hasHeadings && (
+          <aside
+            className="toc-sidebar hidden lg:block w-56 shrink-0"
+            style={{ maxHeight: `calc(100vh - ${topBarHeight + 32}px)` }}
+          >
+            <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">Contents</div>
+            <nav className="border-l border-border pl-3">
+              {fileRendered.headings!.map((h) => (
+                <button
+                  key={h.slug}
+                  type="button"
+                  onClick={() => scrollToIdInContainer(mainRef.current, h.slug)}
+                  className="block text-left text-sm text-muted-foreground hover:text-foreground cursor-pointer py-0.5 transition-colors"
+                  style={{ paddingLeft: `${(h.level - 1) * 0.75}rem` }}
+                >
+                  {h.text}
+                </button>
+              ))}
+            </nav>
+          </aside>
+        )}
+
+        {/* Markdown article */}
+        <article
+          ref={(el) => { if (el) { if (!plainCode) initCodeBlockCm6(el, theme); injectCopyButtons(el); initInlineSvgPanzoom(el); initEmbeddedDiagramPanzoom(el); initLazyDiagrams(el); } }}
+          className={`prose bg-background p-6 rounded-lg border border-border min-w-0 flex-1 ${
+            proseWidth === 'narrow' ? 'max-w-prose' : proseWidth === 'medium' ? 'max-w-5xl' : 'max-w-none'
+          }`}
+          style={{
+            '--tw-prose-body': 'var(--foreground)',
+            '--tw-prose-headings': 'var(--foreground)',
+            '--tw-prose-bold': 'var(--foreground)',
+            '--tw-prose-links': '#3b82f6',
+            '--tw-prose-code': 'var(--foreground)',
+            '--tw-prose-pre-bg': 'var(--muted)',
+            '--tw-prose-pre-code': 'var(--foreground)',
+            '--tw-prose-hr': 'var(--border)',
+            '--tw-prose-quotes': 'var(--muted-foreground)',
+            '--tw-prose-quote-borders': 'var(--border)',
+            '--tw-prose-th-borders': 'var(--border)',
+            '--tw-prose-td-borders': 'var(--border)',
+          } as React.CSSProperties}
+          dangerouslySetInnerHTML={{ __html: fileRendered.html! }}
+          onClick={(e) => {
+            const target = e.target as HTMLElement;
+            const anchor = target.closest('a');
+            const href = anchor?.getAttribute('href');
+            if (href?.startsWith('#')) {
+              e.preventDefault();
+              scrollToIdInContainer(mainRef.current, href.slice(1));
+            }
+          }}
+        />
+      </div>
+    </>
+  );
+}

package/client/src/components/MermaidViewer.tsx

@@ -0,0 +1,21 @@
+import { SvgViewer } from './SvgViewer';
+
+interface MermaidViewerProps {
+  /** Server-rendered SVG string */
+  html: string | null;
+  /** Raw mermaid source (fallback) */
+  content: string;
+}
+
+export function MermaidViewer({ html, content }: MermaidViewerProps) {
+  if (!html) {
+    return (
+      <div className="p-4 bg-red-950/20 border border-red-800 rounded-lg">
+        <div className="text-red-400 text-sm font-medium mb-2">Mermaid render failed</div>
+        <pre className="text-red-300 text-xs overflow-x-auto">{content}</pre>
+      </div>
+    );
+  }
+
+  return <SvgViewer content={html} />;
+}

package/client/src/components/PlantUmlViewer.tsx

@@ -0,0 +1,21 @@
+import { SvgViewer } from './SvgViewer';
+
+interface PlantUmlViewerProps {
+  /** Server-rendered SVG string */
+  html: string | null;
+  /** Raw PlantUML source (fallback) */
+  content: string;
+}
+
+export function PlantUmlViewer({ html, content }: PlantUmlViewerProps) {
+  if (!html) {
+    return (
+      <div className="p-4 bg-red-950/20 border border-red-800 rounded-lg">
+        <div className="text-red-400 text-sm font-medium mb-2">PlantUML render failed</div>
+        <pre className="text-red-300 text-xs overflow-x-auto">{content}</pre>
+      </div>
+    );
+  }
+
+  return <SvgViewer content={html} />;
+}