@pennyfarthing/core 11.3.8 → 11.4.0

package/packages/core/src/public/components/FontPicker/index.tsx

@@ -0,0 +1,430 @@
+/**
+ * FontPicker Component
+ *
+ * Font selection with system font browser via queryLocalFonts() API.
+ * Story MSSCI-12769 - Font Customization
+ *
+ * Features:
+ * - shadcn Select-based dropdown with system font discovery
+ * - Live font preview in each option
+ * - Monospace detection for code font filtering
+ * - Graceful fallback when queryLocalFonts() unavailable
+ * - Font size picker (segmented control)
+ * - ARIA accessibility via Radix Select
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  UI_FONT_PRESETS,
+  CODE_FONT_PRESETS,
+  FONT_SIZE_SCALE,
+  FontSize,
+} from '../../utils/font-presets';
+import './FontPicker.css';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface FontPickerProps {
+  type: 'ui' | 'code';
+  currentFont: string;
+  customFont?: string;
+  onSelect: (presetId: string, customFamily?: string) => void;
+  onCustomFontChange?: (family: string) => void;
+  className?: string;
+}
+
+export interface FontSizePickerProps {
+  currentSize: FontSize;
+  onSelect: (size: FontSize) => void;
+  className?: string;
+}
+
+interface SystemFont {
+  family: string;
+  isMonospace: boolean;
+}
+
+// =============================================================================
+// Monospace Detection via OpenType `post` table
+// =============================================================================
+
+/**
+ * Parse SFNT table directory to find a table's offset and length.
+ * SFNT header: version(4) + numTables(2) + searchRange(2) + entrySelector(2) + rangeShift(2) = 12
+ * Each table record: tag(4) + checksum(4) + offset(4) + length(4) = 16
+ */
+function findSfntTable(view: DataView, tag: string): { offset: number; length: number } | null {
+  const numTables = view.getUint16(4);
+  for (let i = 0; i < numTables; i++) {
+    const recordOffset = 12 + i * 16;
+    const tableTag = String.fromCharCode(
+      view.getUint8(recordOffset),
+      view.getUint8(recordOffset + 1),
+      view.getUint8(recordOffset + 2),
+      view.getUint8(recordOffset + 3),
+    );
+    if (tableTag === tag) {
+      return {
+        offset: view.getUint32(recordOffset + 8),
+        length: view.getUint32(recordOffset + 12),
+      };
+    }
+  }
+  return null;
+}
+
+/**
+ * Read `isFixedPitch` from the `post` table.
+ * post layout: version(4) + italicAngle(4) + underlinePosition(2) + underlineThickness(2) = offset 12
+ * isFixedPitch is uint32 at offset 12: 0 = proportional, non-zero = monospace.
+ */
+async function detectMonospaceFromBlob(fontData: { blob: () => Promise<Blob> }): Promise<boolean> {
+  try {
+    const blob = await fontData.blob();
+    const buffer = await blob.arrayBuffer();
+    const view = new DataView(buffer);
+
+    const post = findSfntTable(view, 'post');
+    if (post) {
+      const isFixedPitch = view.getUint32(post.offset + 12);
+      return isFixedPitch !== 0;
+    }
+    return false;
+  } catch {
+    return false;
+  }
+}
+
+// =============================================================================
+// System Font Discovery
+// =============================================================================
+
+interface FontDataEntry {
+  family: string;
+  fullName: string;
+  postscriptName: string;
+  style: string;
+  blob: () => Promise<Blob>;
+}
+
+const FONT_CACHE_KEY = 'cyclist-system-fonts';
+
+interface FontCacheData {
+  fonts: SystemFont[];
+  count: number; // number of font families — if it changes, fonts were installed/removed
+}
+
+function loadCachedFonts(): SystemFont[] | null {
+  try {
+    const raw = localStorage.getItem(FONT_CACHE_KEY);
+    if (!raw) return null;
+    const data: FontCacheData = JSON.parse(raw);
+    if (data.fonts?.length > 0) return data.fonts;
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function saveCachedFonts(fonts: SystemFont[], count: number): void {
+  try {
+    const data: FontCacheData = { fonts, count };
+    localStorage.setItem(FONT_CACHE_KEY, JSON.stringify(data));
+  } catch {
+    // localStorage full or unavailable — not critical
+  }
+}
+
+let systemFontsPromise: Promise<SystemFont[]> | null = null;
+
+async function getSystemFonts(): Promise<SystemFont[]> {
+  if (systemFontsPromise) return systemFontsPromise;
+
+  systemFontsPromise = (async () => {
+    if (!('queryLocalFonts' in window)) {
+      return [];
+    }
+
+    try {
+      const fonts: FontDataEntry[] = await (window as unknown as { queryLocalFonts: () => Promise<FontDataEntry[]> }).queryLocalFonts();
+
+      // Deduplicate by family name, keep one FontData per family for mono detection
+      const familyMap = new Map<string, FontDataEntry>();
+      for (const font of fonts) {
+        if (!familyMap.has(font.family)) {
+          familyMap.set(font.family, font);
+        }
+      }
+
+      const familyCount = familyMap.size;
+
+      // Check localStorage cache — reuse if font count hasn't changed
+      const cached = loadCachedFonts();
+      if (cached && cached.length > 0) {
+        // Load raw cached data to check count
+        try {
+          const raw = localStorage.getItem(FONT_CACHE_KEY);
+          if (raw) {
+            const data: FontCacheData = JSON.parse(raw);
+            if (data.count === familyCount) {
+              return cached;
+            }
+          }
+        } catch {
+          // Fall through to re-detect
+        }
+      }
+
+      // Detect monospace via post table in parallel
+      const entries = Array.from(familyMap.entries());
+      const monoResults = await Promise.all(
+        entries.map(([, fontData]) => detectMonospaceFromBlob(fontData))
+      );
+
+      const result: SystemFont[] = entries.map(([family], i) => ({
+        family,
+        isMonospace: monoResults[i],
+      }));
+
+      result.sort((a, b) => a.family.localeCompare(b.family));
+      saveCachedFonts(result, familyCount);
+      return result;
+    } catch {
+      // Permission denied or API error
+      return [];
+    }
+  })();
+
+  return systemFontsPromise;
+}
+
+// Prefix for system font values to distinguish from preset IDs
+const SYSTEM_FONT_PREFIX = 'system-font:';
+
+// =============================================================================
+// FontPicker Component
+// =============================================================================
+
+export function FontPicker({
+  type,
+  currentFont,
+  customFont,
+  onSelect,
+  onCustomFontChange,
+  className = '',
+}: FontPickerProps): React.ReactElement {
+  const [customValue, setCustomValue] = useState(customFont || '');
+  const [systemFonts, setSystemFonts] = useState<SystemFont[]>([]);
+  const [fontsLoaded, setFontsLoaded] = useState(false);
+
+  const presets = type === 'ui' ? UI_FONT_PRESETS : CODE_FONT_PRESETS;
+  const currentPreset = presets.find(p => p.id === currentFont);
+
+  // Load system fonts eagerly
+  useEffect(() => {
+    if (!fontsLoaded) {
+      getSystemFonts().then(fonts => {
+        setSystemFonts(fonts);
+        setFontsLoaded(true);
+      });
+    }
+  }, [fontsLoaded]);
+
+  // Filter system fonts: English-only (Latin names), monospace-only for code
+  const filteredSystemFonts = useMemo(() => {
+    let fonts = systemFonts;
+
+    // Filter to fonts with Latin-script names (excludes CJK, Arabic, Devanagari, etc.)
+    fonts = fonts.filter(f => /^[\x20-\x7E\u00C0-\u024F]+$/.test(f.family));
+
+    // For code fonts, only show monospace
+    if (type === 'code') {
+      fonts = fonts.filter(f => f.isMonospace);
+    }
+
+    return fonts;
+  }, [systemFonts, type]);
+
+  // Non-custom presets for display
+  const displayPresets = useMemo(() => {
+    return presets.filter(p => !p.isCustom);
+  }, [presets]);
+
+  // Update custom value when prop changes
+  useEffect(() => {
+    if (customFont !== undefined) {
+      setCustomValue(customFont);
+    }
+  }, [customFont]);
+
+  // Compute the Select value: for system fonts we encode as "system-font:FamilyName"
+  const selectValue = useMemo(() => {
+    if (currentFont === 'custom' && customValue) {
+      // Check if this matches a system font
+      const isSystemFont = systemFonts.some(f => f.family === customValue);
+      if (isSystemFont) {
+        return `${SYSTEM_FONT_PREFIX}${customValue}`;
+      }
+      return 'custom';
+    }
+    return currentFont;
+  }, [currentFont, customValue, systemFonts]);
+
+  const handleValueChange = useCallback(
+    (value: string) => {
+      if (value.startsWith(SYSTEM_FONT_PREFIX)) {
+        const family = value.slice(SYSTEM_FONT_PREFIX.length);
+        onSelect('custom', family);
+      } else if (value === 'custom') {
+        onSelect('custom');
+      } else {
+        onSelect(value);
+      }
+    },
+    [onSelect]
+  );
+
+  const handleCustomChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+      setCustomValue(value);
+      onCustomFontChange?.(value);
+      if (currentFont === 'custom') {
+        onSelect('custom', value);
+      }
+    },
+    [currentFont, onSelect, onCustomFontChange]
+  );
+
+  const hasSystemFonts = systemFonts.length > 0;
+  const showCustomInput = currentFont === 'custom' && !hasSystemFonts;
+
+  return (
+    <div className={`font-picker ${className}`}>
+      <Select value={selectValue} onValueChange={handleValueChange}>
+        <SelectTrigger
+          className="font-picker-trigger"
+          aria-label={`Select ${type} font`}
+          style={{ fontFamily: currentPreset?.fontFamily || (customValue ? `"${customValue}"` : 'inherit') }}
+        >
+          <SelectValue placeholder="Select font..." />
+        </SelectTrigger>
+        <SelectContent className="max-h-[300px]">
+          {/* Presets section */}
+          {displayPresets.length > 0 && (
+            <SelectGroup>
+              <SelectLabel>Presets</SelectLabel>
+              {displayPresets.map((preset) => (
+                <SelectItem
+                  key={preset.id}
+                  value={preset.id}
+                  style={{ fontFamily: preset.fontFamily || 'inherit' }}
+                >
+                  <span className="font-picker-item-content">
+                    <span className="font-name">{preset.name}</span>
+                    <span className="font-preview" style={{ fontFamily: preset.fontFamily }}>
+                      Aa
+                    </span>
+                  </span>
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          )}
+
+          {/* System fonts section */}
+          {hasSystemFonts && filteredSystemFonts.length > 0 && (
+            <SelectGroup>
+              <SelectLabel>System Fonts ({filteredSystemFonts.length})</SelectLabel>
+              {filteredSystemFonts.map((font) => (
+                <SelectItem
+                  key={font.family}
+                  value={`${SYSTEM_FONT_PREFIX}${font.family}`}
+                  style={{ fontFamily: `"${font.family}", inherit` }}
+                >
+                  <span className="font-picker-item-content">
+                    <span className="font-name">{font.family}</span>
+                    <span className="font-preview" style={{ fontFamily: `"${font.family}"` }}>
+                      Aa
+                    </span>
+                  </span>
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          )}
+
+          {/* Custom option (fallback when no system fonts) */}
+          {!hasSystemFonts && fontsLoaded && (
+            <SelectGroup>
+              <SelectLabel>Custom</SelectLabel>
+              <SelectItem value="custom">
+                Custom...
+              </SelectItem>
+            </SelectGroup>
+          )}
+        </SelectContent>
+      </Select>
+
+      {showCustomInput && (
+        <input
+          type="text"
+          className="font-picker-custom-input"
+          value={customValue}
+          onChange={handleCustomChange}
+          placeholder="Enter font family..."
+          aria-label="Custom font family"
+        />
+      )}
+    </div>
+  );
+}
+
+// =============================================================================
+// FontSizePicker Component
+// =============================================================================
+
+const SIZES: FontSize[] = ['xs', 'sm', 'base', 'lg', 'xl'];
+
+export function FontSizePicker({
+  currentSize,
+  onSelect,
+  className = '',
+}: FontSizePickerProps): React.ReactElement {
+  return (
+    <TooltipProvider delayDuration={300}>
+    <div className={`font-size-picker ${className}`} role="group" aria-label="Font size">
+      {SIZES.map((size) => (
+        <Tooltip key={size}>
+          <TooltipTrigger asChild>
+            <Button
+              variant={size === currentSize ? 'secondary' : 'ghost'}
+              size="sm"
+              className={`font-size-option ${size === currentSize ? 'active' : ''}`}
+              data-size={size}
+              onClick={() => onSelect(size)}
+              aria-pressed={size === currentSize}
+            >
+              {size.toUpperCase()}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{`${FONT_SIZE_SCALE[size]} (${size})`}</TooltipContent>
+        </Tooltip>
+      ))}
+    </div>
+    </TooltipProvider>
+  );
+}
+
+export default FontPicker;

package/packages/core/src/public/components/FullFileTree.tsx

@@ -0,0 +1,237 @@
+/**
+ * FullFileTree - Complete directory tree with changed file highlighting
+ *
+ * Displays the full project file tree with lazy-loaded directories.
+ * Changed files are highlighted with git status colors (created/modified/deleted).
+ * Uses /api/files for directory listing and /ws/git for change status.
+ */
+
+import React, { useState, useCallback, useEffect } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { useFileBrowser, DirectoryEntry } from '../hooks/useFileBrowser';
+import type { FileStatus } from './FileTree';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface FullFileTreeProps {
+  /** Map of file path → git status for highlighting */
+  changedFiles: Map<string, FileStatus>;
+  /** Callback when a file is clicked */
+  onFileClick?: (entry: DirectoryEntry, status?: FileStatus) => void;
+}
+
+// =============================================================================
+// File Item Component
+// =============================================================================
+
+function TreeFileItem({
+  entry,
+  status,
+  depth,
+  onFileClick,
+}: {
+  entry: DirectoryEntry;
+  status?: FileStatus;
+  depth: number;
+  onFileClick?: (entry: DirectoryEntry, status?: FileStatus) => void;
+}): React.ReactElement {
+  const statusIcon = status === 'created' ? '+' : status === 'modified' ? '~' : status === 'deleted' ? '-' : null;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          role="treeitem"
+          className={`file-item${status ? ` file-${status}` : ''}`}
+          style={{ paddingLeft: `${12 + depth * 16}px` }}
+          tabIndex={0}
+          aria-label={`${entry.name}${status ? `, ${status}` : ''}`}
+          onClick={() => onFileClick?.(entry, status)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              onFileClick?.(entry, status);
+            }
+          }}
+        >
+          {statusIcon && (
+            <span className={`status-icon status-${status}`} aria-hidden="true">
+              {statusIcon}
+            </span>
+          )}
+          <span className={`file-name${status === 'deleted' ? '' : ''}`}>{entry.name}</span>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>{entry.path}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+// =============================================================================
+// Directory Node Component (recursive)
+// =============================================================================
+
+function TreeDirectoryNode({
+  entry,
+  depth,
+  changedFiles,
+  onFileClick,
+  fetchDirectory,
+  cache,
+  loading,
+}: {
+  entry: DirectoryEntry;
+  depth: number;
+  changedFiles: Map<string, FileStatus>;
+  onFileClick?: (entry: DirectoryEntry, status?: FileStatus) => void;
+  fetchDirectory: (path: string) => Promise<void>;
+  cache: Record<string, DirectoryEntry[]>;
+  loading: Set<string>;
+}): React.ReactElement {
+  // Check if this directory contains any changed files
+  const hasChanges = Array.from(changedFiles.keys()).some(
+    (filePath) => filePath.startsWith(entry.path + '/')
+  );
+
+  const [isOpen, setIsOpen] = useState(hasChanges);
+  const children = cache[entry.path];
+  const isLoading = loading.has(entry.path);
+
+  // Auto-fetch children when directory has changes and is opened by default
+  useEffect(() => {
+    if (hasChanges && !children && !loading.has(entry.path)) {
+      fetchDirectory(entry.path);
+    }
+  }, [hasChanges, children, entry.path, fetchDirectory, loading]);
+
+  // Auto-open when changes appear in this directory
+  useEffect(() => {
+    if (hasChanges) {
+      setIsOpen(true);
+    }
+  }, [hasChanges]);
+
+  const handleToggle = useCallback(() => {
+    const willOpen = !isOpen;
+    setIsOpen(willOpen);
+    if (willOpen && !children) {
+      fetchDirectory(entry.path);
+    }
+  }, [isOpen, children, entry.path, fetchDirectory]);
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={handleToggle}>
+      <CollapsibleTrigger asChild>
+        <div
+          className={`directory-header${hasChanges ? ' has-changes' : ''}`}
+          style={{ paddingLeft: `${4 + depth * 16}px` }}
+        >
+          <span className="directory-toggle">
+            <span className="toggle-icon">{isOpen ? '▼' : '▶'}</span>
+          </span>
+          <span className="directory-name">{entry.name}</span>
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        {isLoading && (
+          <div
+            className="tree-loading"
+            style={{ paddingLeft: `${12 + (depth + 1) * 16}px` }}
+          >
+            Loading...
+          </div>
+        )}
+        {children?.map((child) =>
+          child.type === 'directory' ? (
+            <TreeDirectoryNode
+              key={child.path}
+              entry={child}
+              depth={depth + 1}
+              changedFiles={changedFiles}
+              onFileClick={onFileClick}
+              fetchDirectory={fetchDirectory}
+              cache={cache}
+              loading={loading}
+            />
+          ) : (
+            <TreeFileItem
+              key={child.path}
+              entry={child}
+              status={changedFiles.get(child.path)}
+              depth={depth + 1}
+              onFileClick={onFileClick}
+            />
+          )
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+// =============================================================================
+// FullFileTree Component
+// =============================================================================
+
+export function FullFileTree({ changedFiles, onFileClick }: FullFileTreeProps): React.ReactElement {
+  const { cache, loading, error, fetchDirectory } = useFileBrowser();
+
+  // Load root directory on mount
+  useEffect(() => {
+    fetchDirectory('');
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const rootEntries = cache['__root__'];
+  const changedCount = changedFiles.size;
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div role="tree" aria-label="Project files" className="filetree full-filetree">
+        {changedCount > 0 && (
+          <Badge
+            variant="secondary"
+            data-testid="file-count-badge"
+            className="file-count-badge"
+            aria-label={`${changedCount} files changed`}
+          >
+            {changedCount}
+          </Badge>
+        )}
+        <ScrollArea className="filetree-scroll">
+          {error && <div className="tree-error">{error}</div>}
+          {!rootEntries && !error && (
+            <div className="tree-loading">Loading project files...</div>
+          )}
+          {rootEntries?.map((entry) =>
+            entry.type === 'directory' ? (
+              <TreeDirectoryNode
+                key={entry.path}
+                entry={entry}
+                depth={0}
+                changedFiles={changedFiles}
+                onFileClick={onFileClick}
+                fetchDirectory={fetchDirectory}
+                cache={cache}
+                loading={loading}
+              />
+            ) : (
+              <TreeFileItem
+                key={entry.path}
+                entry={entry}
+                status={changedFiles.get(entry.path)}
+                depth={0}
+                onFileClick={onFileClick}
+              />
+            )
+          )}
+        </ScrollArea>
+      </div>
+    </TooltipProvider>
+  );
+}
+
+export default FullFileTree;