@anymux/ui-kit 0.1.0

package/src/file-browser/viewers/ImageViewer.tsx

@@ -0,0 +1,163 @@
+import React, { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ImageIcon, ZoomIn, ZoomOut, Maximize } from 'lucide-react';
+import { useScaler } from '@panscale/react';
+import { cn } from '../../lib/utils';
+import { ViewerProps } from '../registry/ViewerRegistry';
+import { ImageViewerModel } from './ImageViewerModel';
+
+const MIME_MAP: Record<string, string> = {
+  'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg',
+  'gif': 'image/gif', 'webp': 'image/webp', 'svg': 'image/svg+xml',
+  'bmp': 'image/bmp', 'ico': 'image/x-icon', 'avif': 'image/avif',
+  'tiff': 'image/tiff', 'tif': 'image/tiff',
+};
+
+// Convert ArrayBuffer to base64 data URL — no lifecycle management needed (unlike blob URLs)
+function arrayBufferToDataUrl(buffer: ArrayBuffer, mime: string): string {
+  const bytes = new Uint8Array(buffer);
+  let binary = '';
+  for (let i = 0; i < bytes.byteLength; i++) {
+    binary += String.fromCharCode(bytes[i]!);
+  }
+  return `data:${mime};base64,${btoa(binary)}`;
+}
+
+function getImageUrl(content: string | ArrayBuffer, name: string, mimeType?: string): string | null {
+  if (content instanceof ArrayBuffer) {
+    const ext = name.split('.').pop()?.toLowerCase() || 'png';
+    const mime = MIME_MAP[ext] || mimeType || 'image/png';
+    return arrayBufferToDataUrl(content, mime);
+  }
+  if (typeof content === 'string') {
+    if (content.startsWith('data:') || content.startsWith('http')) {
+      return content;
+    }
+    if (name.endsWith('.svg')) {
+      return `data:image/svg+xml,${encodeURIComponent(content)}`;
+    }
+    try {
+      const ext = name.split('.').pop()?.toLowerCase() || 'png';
+      const mime = MIME_MAP[ext] || mimeType || 'image/png';
+      return `data:${mime};base64,${btoa(content)}`;
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
+
+export const ImageViewer: React.FC<ViewerProps> = observer(({
+  file,
+  onClose,
+  onToolbarExtras,
+  className,
+}) => {
+  const imageUrl = file.content ? getImageUrl(file.content, file.name, file.mimeType) : null;
+  const [model] = useState(() => new ImageViewerModel());
+  const scaler = useScaler({ zooming: true, bouncing: true });
+
+  // Wire scaler into model and handle file changes
+  model.setScaler(scaler);
+  model.onFileChange(file.path);
+
+  const zoomPercent = model.zoomPercent;
+
+  // Register zoom controls in parent toolbar
+  useEffect(() => {
+    if (!onToolbarExtras || !imageUrl || model.imageError) {
+      onToolbarExtras?.(null);
+      return;
+    }
+    onToolbarExtras(
+      <div className="flex items-center gap-0.5">
+        <button
+          onClick={() => model.zoomOut()}
+          className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+          title="Zoom out"
+        >
+          <ZoomOut className="w-3.5 h-3.5" />
+        </button>
+        <span className="text-muted-foreground text-xs min-w-[2.5rem] text-center tabular-nums">
+          {zoomPercent}%
+        </span>
+        <button
+          onClick={() => model.zoomIn()}
+          className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+          title="Zoom in"
+        >
+          <ZoomIn className="w-3.5 h-3.5" />
+        </button>
+        <button
+          onClick={() => model.resetZoom()}
+          className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+          title="Fit to screen"
+        >
+          <Maximize className="w-3.5 h-3.5" />
+        </button>
+      </div>
+    );
+  }, [onToolbarExtras, imageUrl, model.imageError, zoomPercent, model]);
+
+  return (
+    <div className={cn("h-full flex flex-col", className)}>
+      {/* Pan/zoom image area — full height, no separate toolbar */}
+      <div
+        className="flex-1 min-h-0 relative"
+        style={{ backgroundColor: '#111' }}
+      >
+        {model.imageError || !imageUrl ? (
+          <div className="flex flex-col items-center justify-center h-full gap-3 text-white/60">
+            <ImageIcon className="w-16 h-16" />
+            <p className="text-sm">{model.imageError ? 'Failed to load image' : 'Preview not available'}</p>
+            <p className="text-xs text-white/40">{file.name}</p>
+          </div>
+        ) : (
+          <>
+            {!model.isLoaded && (
+              <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 text-white/60 z-10">
+                <div className="animate-spin w-6 h-6 border-2 border-white/40 border-t-white rounded-full" />
+                <p className="text-sm">Loading image...</p>
+              </div>
+            )}
+            {/* Panscale scaler container */}
+            <div
+              ref={scaler.ref}
+              style={{
+                width: '100%',
+                height: '100%',
+                overflow: 'hidden',
+                position: 'relative',
+                touchAction: 'none',
+              }}
+            >
+              <div
+                style={{
+                  transform: `translate(${scaler.values.translateX}px, ${scaler.values.translateY}px) scale(${scaler.values.zoom})`,
+                  transformOrigin: '0 0',
+                  willChange: 'transform',
+                }}
+              >
+                <img
+                  src={imageUrl}
+                  alt={file.name}
+                  className="select-none"
+                  style={{
+                    display: 'block',
+                    maxWidth: 'none',
+                    opacity: model.isLoaded ? 1 : 0,
+                  }}
+                  onLoad={(e) => model.handleImageLoad(e.currentTarget)}
+                  onError={() => model.handleImageError()}
+                  draggable={false}
+                />
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+});
+
+ImageViewer.displayName = 'ImageViewer';

package/src/file-browser/viewers/ImageViewerModel.ts

@@ -0,0 +1,79 @@
+import { makeAutoObservable } from 'mobx';
+
+type Scaler = {
+  ref: React.RefObject<HTMLDivElement | null>;
+  values: { zoom: number; translateX: number; translateY: number };
+  setZoomBounds: (min: number, max: number) => void;
+  setContentSize: (width: number, height: number) => void;
+  fitToContent: (animate?: boolean) => void;
+  zoomBy: (factor: number, animate?: boolean, originX?: number, originY?: number) => void;
+};
+
+export class ImageViewerModel {
+  imageError = false;
+  isLoaded = false;
+  currentFilePath = '';
+  private scaler: Scaler | null = null;
+
+  constructor() {
+    makeAutoObservable(this, { scaler: false });
+  }
+
+  setScaler(scaler: Scaler): void {
+    this.scaler = scaler;
+  }
+
+  get zoomPercent(): number {
+    return Math.round((this.scaler?.values.zoom ?? 1) * 100);
+  }
+
+  /** Reset state when navigating to a different file */
+  onFileChange(filePath: string): void {
+    if (this.currentFilePath !== filePath) {
+      this.currentFilePath = filePath;
+      this.isLoaded = false;
+      this.imageError = false;
+    }
+  }
+
+  handleImageLoad(img: HTMLImageElement): void {
+    if (!this.scaler) return;
+    this.scaler.setZoomBounds(0.01, 100);
+    requestAnimationFrame(() => {
+      this.scaler!.setContentSize(img.naturalWidth, img.naturalHeight);
+      this.scaler!.fitToContent(false);
+      this.isLoaded = true;
+    });
+  }
+
+  handleImageError(): void {
+    this.imageError = true;
+    this.isLoaded = true;
+  }
+
+  zoomIn(): void {
+    if (!this.scaler) return;
+    const el = this.scaler.ref.current;
+    if (el) {
+      const r = el.getBoundingClientRect();
+      this.scaler.zoomBy(1.3, true, r.width / 2, r.height / 2);
+    } else {
+      this.scaler.zoomBy(1.3, true);
+    }
+  }
+
+  zoomOut(): void {
+    if (!this.scaler) return;
+    const el = this.scaler.ref.current;
+    if (el) {
+      const r = el.getBoundingClientRect();
+      this.scaler.zoomBy(0.77, true, r.width / 2, r.height / 2);
+    } else {
+      this.scaler.zoomBy(0.77, true);
+    }
+  }
+
+  resetZoom(): void {
+    this.scaler?.fitToContent(true);
+  }
+}

package/src/file-browser/viewers/TextViewer.tsx

@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { FileText } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { ViewerProps } from '../registry/ViewerRegistry';
+
+export const TextViewer: React.FC<ViewerProps> = observer(({
+  file,
+  onClose,
+  className,
+}) => {
+  const [content, setContent] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadContent = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+
+        if (file.content) {
+          if (typeof file.content === 'string') {
+            setContent(file.content);
+          } else {
+            const decoder = new TextDecoder('utf-8');
+            setContent(decoder.decode(file.content));
+          }
+        } else {
+          setContent(`Sample content for ${file.name}\n\nPath: ${file.path}`);
+        }
+      } catch (err) {
+        setError(`Failed to load file: ${err instanceof Error ? err.message : 'Unknown error'}`);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadContent();
+  }, [file]);
+
+  if (isLoading) {
+    return (
+      <div className={cn("h-full flex flex-col", className)}>
+        <div className="flex items-center gap-2 px-4 py-3 border-b bg-muted/30 flex-shrink-0">
+          <FileText className="w-4 h-4 text-muted-foreground" />
+          <span className="text-sm font-medium">Loading {file.name}</span>
+        </div>
+        <div className="flex-1 flex items-center justify-center">
+          <span className="text-sm text-muted-foreground">Loading file content...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={cn("h-full flex flex-col", className)}>
+        <div className="flex items-center gap-2 px-4 py-3 border-b bg-muted/30 flex-shrink-0">
+          <FileText className="w-4 h-4 text-destructive" />
+          <span className="text-sm font-medium text-destructive">Error loading {file.name}</span>
+        </div>
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-center">
+            <p className="text-sm font-medium text-destructive">Failed to load file</p>
+            <p className="text-xs text-muted-foreground mt-1">{error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("h-full flex flex-col", className)}>
+      <div className="flex items-center justify-between px-4 py-3 border-b bg-muted/30 flex-shrink-0">
+        <div className="flex items-center gap-2">
+          <FileText className="w-4 h-4 text-muted-foreground" />
+          <span className="text-sm font-medium">{file.name}</span>
+          {file.size != null && (
+            <span className="text-xs text-muted-foreground">
+              ({(file.size / 1024).toFixed(1)} KB)
+            </span>
+          )}
+        </div>
+      </div>
+      <div className="flex-1 min-h-0 overflow-auto p-4">
+        <pre className="font-mono text-sm leading-relaxed whitespace-pre-wrap break-words m-0 p-4 bg-muted/50 rounded-md border">
+          {content}
+        </pre>
+      </div>
+    </div>
+  );
+});
+
+TextViewer.displayName = 'TextViewer';

package/src/file-browser/viewers/UnsupportedFileViewer.tsx

@@ -0,0 +1,57 @@
+import React, { useCallback } from 'react';
+import { FileQuestion, Download } from 'lucide-react';
+import { Button } from '@anymux/ui/components/button';
+import { cn } from '../../lib/utils';
+import type { ViewerProps } from '../registry/ViewerRegistry';
+
+export const UnsupportedFileViewer: React.FC<ViewerProps> = ({
+  file,
+  onClose,
+  className,
+}) => {
+  const extension = file.name.split('.').pop()?.toLowerCase() || '';
+
+  const handleDownload = useCallback(() => {
+    if (!file.content) return;
+
+    const blob = file.content instanceof ArrayBuffer
+      ? new Blob([file.content])
+      : new Blob([file.content], { type: 'text/plain' });
+
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = file.name;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [file.content, file.name]);
+
+  return (
+    <div className={cn("h-full flex items-center justify-center bg-muted/10", className)}>
+      <div className="flex flex-col items-center gap-4 text-center px-6">
+        <FileQuestion className="w-16 h-16 text-muted-foreground/60" />
+        <div>
+          <p className="text-sm font-medium">{file.name}</p>
+          <p className="text-sm text-muted-foreground mt-1">
+            Preview not available{extension ? ` for .${extension} files` : ''}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          {file.content && (
+            <Button variant="outline" size="sm" onClick={handleDownload}>
+              <Download className="w-4 h-4 mr-1.5" />
+              Download
+            </Button>
+          )}
+          {onClose && (
+            <Button variant="ghost" size="sm" onClick={onClose}>
+              Close
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+UnsupportedFileViewer.displayName = 'UnsupportedFileViewer';

package/src/file-browser/viewers/index.ts

@@ -0,0 +1,61 @@
+import { globalViewerRegistry } from '../registry/ViewerRegistry';
+import { TextViewer } from './TextViewer';
+import { ImageViewer } from './ImageViewer';
+
+// Export viewers
+export { TextViewer } from './TextViewer';
+export { ImageViewer } from './ImageViewer';
+export { UnsupportedFileViewer } from './UnsupportedFileViewer';
+export { globalViewerRegistry, type ViewerConfig, type ViewerProps } from '../registry/ViewerRegistry';
+
+// Also re-export new plugin types
+export type { FileViewerPlugin, FileMatchContext, ResolvedViewer, ToolbarAction, KeyboardShortcut } from '../registry/types';
+
+// Register default viewers for common file types using the new plugin API
+export function registerDefaultViewers() {
+  // Text files viewer (built-in, priority 10, default fallback)
+  globalViewerRegistry.registerPlugin({
+    id: 'text-viewer',
+    name: 'Text Viewer',
+    description: 'View text files, code, and configuration files',
+    extensions: [
+      'txt', 'md', 'mdx', 'rst', 'rtf',
+      'js', 'jsx', 'ts', 'tsx', 'json', 'jsonc',
+      'html', 'htm', 'css', 'scss', 'sass', 'less',
+      'xml', 'svg', 'yaml', 'yml', 'toml',
+      'ini', 'conf', 'config', 'env',
+      'py', 'java', 'cpp', 'c', 'cs', 'php', 'rb', 'go', 'rs',
+      'swift', 'kt', 'scala', 'sh', 'bash', 'zsh', 'fish',
+      'log', 'gitignore', 'dockerignore', 'editorconfig',
+    ],
+    capabilities: {
+      canEdit: false,
+      canPreview: true,
+      canFullscreen: true,
+    },
+    component: TextViewer,
+    priority: 10,
+    isDefault: true,
+  });
+
+  // Image files viewer (built-in, priority 20)
+  globalViewerRegistry.registerPlugin({
+    id: 'image-viewer',
+    name: 'Image Viewer',
+    description: 'View image files including photos and graphics',
+    extensions: [
+      'png', 'jpg', 'jpeg', 'gif', 'svg', 'webp',
+      'bmp', 'ico', 'tiff', 'tif', 'avif',
+    ],
+    capabilities: {
+      canEdit: false,
+      canPreview: true,
+      canFullscreen: true,
+    },
+    component: ImageViewer,
+    priority: 20,
+  });
+}
+
+// Auto-register default viewers when module is imported
+registerDefaultViewers();

package/src/git/BranchList.tsx

@@ -0,0 +1,128 @@
+import React, { useState, useMemo } from 'react';
+import {
+  GitBranch as GitBranchIcon,
+  Search,
+  Shield,
+  Check,
+} from 'lucide-react';
+import type { GitBranch } from '@anymux/file-system';
+
+// ---- Types ----
+
+export interface BranchListProps {
+  branches: GitBranch[];
+  currentBranch?: string;
+  onSelectBranch?: (branch: GitBranch) => void;
+  className?: string;
+}
+
+// ---- BranchList Component ----
+
+export const BranchList: React.FC<BranchListProps> = ({
+  branches,
+  currentBranch,
+  onSelectBranch,
+  className,
+}) => {
+  const [search, setSearch] = useState('');
+
+  const filtered = useMemo(() => {
+    if (!search) return branches;
+    const lower = search.toLowerCase();
+    return branches.filter((b) => b.name.toLowerCase().includes(lower));
+  }, [branches, search]);
+
+  // Sort: default branch first, then current, then alphabetical
+  const sorted = useMemo(() => {
+    return [...filtered].sort((a, b) => {
+      if (a.isDefault && !b.isDefault) return -1;
+      if (!a.isDefault && b.isDefault) return 1;
+      if (a.name === currentBranch && b.name !== currentBranch) return -1;
+      if (a.name !== currentBranch && b.name === currentBranch) return 1;
+      return a.name.localeCompare(b.name);
+    });
+  }, [filtered, currentBranch]);
+
+  return (
+    <div className={`flex flex-col h-full ${className ?? ''}`}>
+      {/* Search input */}
+      <div className="px-2 py-2 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+        <div className="relative">
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-gray-400" />
+          <input
+            type="text"
+            placeholder="Filter branches..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full pl-7 pr-2 py-1.5 text-xs rounded-md border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:outline-none focus:ring-1 focus:ring-blue-500 placeholder-gray-400"
+          />
+        </div>
+      </div>
+
+      {/* Branch list */}
+      <div className="flex-1 overflow-auto">
+        {sorted.length === 0 ? (
+          <div className="px-3 py-6 text-center text-xs text-gray-400">
+            {search ? 'No matching branches' : 'No branches found'}
+          </div>
+        ) : (
+          sorted.map((branch) => {
+            const isCurrent = branch.name === currentBranch;
+
+            return (
+              <button
+                key={branch.name}
+                onClick={() => onSelectBranch?.(branch)}
+                className={`flex items-center gap-2 w-full px-3 py-2 text-left transition-colors border-b border-gray-50 dark:border-gray-800/50 ${
+                  isCurrent
+                    ? 'bg-blue-50 dark:bg-blue-900/20'
+                    : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
+                }`}
+              >
+                {/* Current indicator */}
+                <span className="w-4 flex-shrink-0 flex items-center justify-center">
+                  {isCurrent ? (
+                    <Check className="h-3.5 w-3.5 text-blue-500" />
+                  ) : (
+                    <GitBranchIcon className="h-3.5 w-3.5 text-gray-400" />
+                  )}
+                </span>
+
+                {/* Branch name */}
+                <span
+                  className={`text-xs truncate flex-1 ${
+                    isCurrent
+                      ? 'font-semibold text-blue-700 dark:text-blue-300'
+                      : 'text-gray-700 dark:text-gray-300'
+                  }`}
+                >
+                  {branch.name}
+                </span>
+
+                {/* Badges */}
+                <div className="flex items-center gap-1 flex-shrink-0">
+                  {branch.isDefault && (
+                    <span className="px-1.5 py-0.5 text-[9px] font-medium bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 rounded">
+                      default
+                    </span>
+                  )}
+                  {branch.isProtected && (
+                    <span className="flex items-center gap-0.5 px-1.5 py-0.5 text-[9px] font-medium bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400 rounded">
+                      <Shield className="h-2.5 w-2.5" />
+                      protected
+                    </span>
+                  )}
+                </div>
+
+                {/* Short SHA */}
+                <code className="text-[10px] font-mono text-gray-400 dark:text-gray-500 flex-shrink-0">
+                  {branch.sha.slice(0, 7)}
+                </code>
+              </button>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};