kishare 1.0.0

package/src/components/workspace-app.ts

@@ -0,0 +1,270 @@
+/**
+ * Main application component
+ */
+
+import DOMPurify from 'dompurify';
+import { loadProjectIndex, type GitInfo, type ProjectMetadata } from '../lib/project-index.js';
+import { router } from '../lib/router.js';
+import { isSafeUrl, githubIcon } from '../lib/html-utils.js';
+import { SIDEBAR } from '../lib/constants.js';
+import { ProjectList } from './project-list.js';
+import { ViewerPanel } from './viewer-panel.js';
+
+export class WorkspaceApp extends HTMLElement {
+  private projectList!: ProjectList;
+  private viewerPanel!: ViewerPanel;
+  private projects: ProjectMetadata[] = [];
+  private title: string = 'KiShare';
+  private sidebarCollapsed: boolean = false;
+  private sidebarWidth: number = 300; // Track uncollapsed width
+  private gitInfo: GitInfo | null = null;
+
+  constructor() {
+    super();
+  }
+
+  async connectedCallback() {
+    this.render();
+    await this.loadProjects();
+    this.setupRouting();
+    this.setupSidebarToggle();
+    this.setupSidebarResize();
+  }
+
+  /**
+   * Load project index from server
+   */
+  private async loadProjects() {
+    try {
+      const index = await loadProjectIndex();
+      this.projects = index.projects;
+      this.title = DOMPurify.sanitize(index.title);
+
+      // Update title in UI
+      const titleEl = this.querySelector('.sidebar-title');
+      if (titleEl) {
+        titleEl.textContent = this.title;
+      }
+      document.title = this.title;
+
+      // Update git info in footer and viewer
+      this.gitInfo = index.git;
+      this.updateGitInfo(index.git);
+      this.viewerPanel.setGitInfo(index.git);
+
+      // Update project list
+      this.projectList.setGitInfo(index.git);
+      this.projectList.setProjects(this.projects);
+
+      console.log(`Loaded ${this.projects.length} projects`);
+    } catch (error) {
+      console.error('Failed to load projects:', error);
+      this.viewerPanel.showError('Failed to load project index');
+    }
+  }
+
+  /**
+   * Update git info in sidebar footer
+   */
+  private updateGitInfo(git: GitInfo) {
+    const footer = this.querySelector('.sidebar-footer');
+    if (!footer) return;
+
+    // Extract user/repo from repoUrl (e.g., "https://github.com/user/repo" -> "user/repo")
+    let repoPath = '';
+    if (git.repoUrl) {
+      const match = git.repoUrl.match(/https?:\/\/[^/]+\/(.+)/);
+      if (match) {
+        repoPath = match[1];
+      }
+    }
+
+    if (git.repoUrl && repoPath) {
+      const commitUrl = git.commitUrl || git.repoUrl;
+      if (!isSafeUrl(commitUrl)) {
+        console.warn('Invalid URL protocol in git info:', commitUrl);
+        return;
+      }
+
+      const html = `
+        <a href="${commitUrl}" target="_blank" rel="noopener" class="commit-link">
+          ${githubIcon(14)}
+          <span class="repo-path">${repoPath}</span>
+          ${git.commitHashShort ? `<span class="commit-separator">-</span><span class="commit-hash">${git.commitHashShort}</span>` : ''}
+        </a>
+      `;
+      footer.innerHTML = DOMPurify.sanitize(html);
+    } else if (git.commitHashShort) {
+      footer.innerHTML = DOMPurify.sanitize(`<span class="commit-hash">${git.commitHashShort}</span>`);
+    }
+  }
+
+  /**
+   * Setup sidebar toggle functionality
+   */
+  private setupSidebarToggle() {
+    const toggleBtn = this.querySelector('.sidebar-toggle') as HTMLElement;
+    const sidebar = this.querySelector('.sidebar') as HTMLElement;
+
+    toggleBtn?.addEventListener('click', () => {
+      this.sidebarCollapsed = !this.sidebarCollapsed;
+      sidebar?.classList.toggle('collapsed', this.sidebarCollapsed);
+      toggleBtn?.classList.toggle('collapsed', this.sidebarCollapsed);
+
+      // Update button position
+      if (this.sidebarCollapsed) {
+        toggleBtn.style.left = '8px';
+      } else {
+        // Restore position based on tracked width
+        toggleBtn.style.left = `${this.sidebarWidth + 8}px`;
+      }
+    });
+  }
+
+  /**
+   * Setup sidebar resize functionality
+   */
+  private setupSidebarResize() {
+    const resizeHandle = this.querySelector('.sidebar-resize-handle') as HTMLElement;
+    const sidebar = this.querySelector('.sidebar') as HTMLElement;
+    const toggleBtn = this.querySelector('.sidebar-toggle') as HTMLElement;
+
+    if (!resizeHandle || !sidebar) return;
+
+    // Load saved width from localStorage
+    const savedWidth = localStorage.getItem(SIDEBAR.STORAGE_KEY);
+    if (savedWidth) {
+      const width = parseInt(savedWidth, 10);
+      this.sidebarWidth = width;
+      sidebar.style.width = `${width}px`;
+      sidebar.style.minWidth = `${width}px`;
+      if (toggleBtn) {
+        toggleBtn.style.left = `${width + 8}px`;
+      }
+    } else {
+      // Initialize with default width
+      this.sidebarWidth = sidebar.offsetWidth || 300;
+    }
+
+    let isResizing = false;
+    let startX = 0;
+    let startWidth = 0;
+
+    const onMouseDown = (e: MouseEvent) => {
+      isResizing = true;
+      startX = e.clientX;
+      startWidth = sidebar.offsetWidth;
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+      e.preventDefault();
+    };
+
+    const onMouseMove = (e: MouseEvent) => {
+      if (!isResizing) return;
+
+      const delta = e.clientX - startX;
+      const newWidth = Math.max(SIDEBAR.MIN_WIDTH, Math.min(SIDEBAR.MAX_WIDTH, startWidth + delta));
+
+      this.sidebarWidth = newWidth;
+      sidebar.style.width = `${newWidth}px`;
+      sidebar.style.minWidth = `${newWidth}px`;
+      if (toggleBtn) {
+        toggleBtn.style.left = `${newWidth + 8}px`;
+      }
+    };
+
+    const onMouseUp = () => {
+      if (isResizing) {
+        isResizing = false;
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+
+        // Save width to localStorage
+        this.sidebarWidth = sidebar.offsetWidth;
+        localStorage.setItem(SIDEBAR.STORAGE_KEY, this.sidebarWidth.toString());
+      }
+    };
+
+    resizeHandle.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  }
+
+  /**
+   * Setup routing and handle route changes
+   */
+  private setupRouting() {
+    router.onRouteChange((route) => {
+      if (route.path === '/project' && route.projectId) {
+        this.loadProject(route.projectId, route.position, route.marker);
+      } else {
+        // Default route - show welcome
+        this.viewerPanel.showWelcome();
+        this.projectList.setSelectedProject(null);
+      }
+    });
+  }
+
+  /**
+   * Load and display a specific project
+   */
+  private loadProject(
+    projectId: string,
+    position?: import('../lib/router.js').ViewPosition,
+    marker?: import('../lib/router.js').MarkerBounds
+  ) {
+    const project = this.projects.find(p => p.id === projectId);
+
+    if (!project) {
+      console.error(`Project not found: ${projectId}`);
+      this.viewerPanel.showError(`Project "${projectId}" not found`);
+      return;
+    }
+
+    console.log(`Loading project: ${project.name}`);
+
+    // Update UI
+    this.projectList.setSelectedProject(projectId);
+    this.viewerPanel.loadProject(project, position, marker);
+  }
+
+  /**
+   * Initial render of the workspace structure
+   */
+  private render() {
+    this.innerHTML = `
+      <div class="workspace">
+        <aside class="sidebar">
+          <div class="sidebar-header">
+            <h1 class="sidebar-title">${this.title}</h1>
+          </div>
+          <div class="sidebar-content">
+            <project-list></project-list>
+          </div>
+          <div class="sidebar-hints">
+            <div class="hint">Right-click to pan</div>
+            <div class="hint">Press 'C' to open GitHub issue</div>
+            <div class="hint">Press 'T' to toggle markers</div>
+          </div>
+          <div class="sidebar-footer"></div>
+          <div class="sidebar-resize-handle"></div>
+        </aside>
+        <button class="sidebar-toggle" title="Toggle sidebar">
+          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+          </svg>
+        </button>
+        <main class="viewer-area">
+          <viewer-panel></viewer-panel>
+        </main>
+      </div>
+    `;
+
+    // Get references to child components
+    this.projectList = this.querySelector('project-list') as ProjectList;
+    this.viewerPanel = this.querySelector('viewer-panel') as ViewerPanel;
+  }
+}
+
+// Register custom element
+customElements.define('workspace-app', WorkspaceApp);

package/src/indexer/copy-public-files.ts

@@ -0,0 +1,65 @@
+#!/usr/bin/env tsx
+/**
+ * Copy relevant project files to output directory
+ * Respects .gitignore
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import type { WorkspaceConfig } from '../lib/project-index.js';
+import { initializePaths, loadConfig, getProjectDirs, getRootDir, getOutputDir, getTrackedFiles } from './indexer-utils.js';
+
+export function copyPublicFiles() {
+  initializePaths();
+  const config = loadConfig();
+  const projectDirs = getProjectDirs(config);
+
+  console.log(`Copying from directories: ${projectDirs.map(d => path.relative(getRootDir(), d)).join(', ')}`);
+
+  // Clean public directories for each project directory
+  for (const projectDir of projectDirs) {
+    const relativeDir = path.relative(getRootDir(), projectDir);
+    const publicDir = path.join(getOutputDir(), relativeDir);
+    if (fs.existsSync(publicDir)) {
+      fs.rmSync(publicDir, { recursive: true });
+    }
+  }
+
+  // Get tracked files from all project directories
+  const trackedFiles = getTrackedFiles(projectDirs);
+  if (trackedFiles.size === 0) {
+    console.log('No tracked files found in configured directories');
+    return;
+  }
+
+  console.log(`Found ${trackedFiles.size} tracked files`);
+
+  // Copy each tracked file, preserving the source directory structure
+  let copiedCount = 0;
+  for (const relativePath of trackedFiles) {
+    const srcPath = path.join(getRootDir(), relativePath);
+    const destPath = path.join(getOutputDir(), relativePath);
+
+    // Check if source is a directory (submodule)
+    const stat = fs.statSync(srcPath);
+    if (stat.isDirectory()) {
+      // Recursively copy submodule directory
+      fs.cpSync(srcPath, destPath, { recursive: true });
+      console.log(`  Copied submodule: ${relativePath}`);
+      copiedCount++;
+    } else {
+      // Create destination directory and copy file
+      fs.mkdirSync(path.dirname(destPath), { recursive: true });
+      fs.copyFileSync(srcPath, destPath);
+      copiedCount++;
+    }
+  }
+
+  console.log(`Copied ${copiedCount} entries to ${getOutputDir()}`);
+}
+
+// Run if this is the main module
+const isMainModule = import.meta.url === `file://${process.argv[1]}`;
+if (isMainModule) {
+  copyPublicFiles();
+}

package/src/indexer/indexer-utils.ts

@@ -0,0 +1,111 @@
+/**
+ * Shared utilities for indexer scripts
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import { execSync } from 'child_process';
+import { fileURLToPath } from 'url';
+import type { WorkspaceConfig } from '../lib/project-index.js';
+
+// Module-level variables set at runtime
+let ROOT_DIR: string;
+let OUTPUT_DIR: string;
+let KISHARE_ROOT: string;
+
+// Get kishare installation root from environment variable or resolve from this file's location
+function getKishareRoot(): string {
+  if (process.env.KISHARE_ROOT) {
+    return path.resolve(process.env.KISHARE_ROOT);
+  }
+  // Fallback: resolve from this file's location (two levels up from src/indexer/)
+  const __filename = fileURLToPath(import.meta.url);
+  return path.resolve(path.dirname(__filename), '../..');
+}
+
+// Get user's project root (where kishare-config.json and KiCad files live)
+function getProjectRoot(): string {
+  // KISHARE_PROJECT_ROOT is set by CLI, otherwise use cwd
+  return process.env.KISHARE_PROJECT_ROOT || process.cwd();
+}
+
+// Check if one path is a parent of another
+export function isParentOf(parent: string, child: string): boolean {
+  const relative = path.relative(parent, child);
+  return !!relative && !relative.startsWith('..') && !path.isAbsolute(relative);
+}
+
+// Read configuration from user's project directory
+export function loadConfig(): WorkspaceConfig {
+  const configPath = path.join(getProjectRoot(), 'kishare-config.json');
+  if (!fs.existsSync(configPath)) {
+    console.warn(`No config file found at ${configPath}, using defaults`);
+    return {};
+  }
+  const configData = fs.readFileSync(configPath, 'utf-8');
+  return JSON.parse(configData) as WorkspaceConfig;
+}
+
+// Initialize paths
+// ROOT_DIR = user's project (where KiCad files live)
+// KISHARE_ROOT = kishare package installation
+// OUTPUT_DIR = kishare's public directory (for Vite to serve)
+export function initializePaths() {
+  ROOT_DIR = getProjectRoot();
+  KISHARE_ROOT = getKishareRoot();
+  OUTPUT_DIR = path.join(KISHARE_ROOT, 'public');
+
+  console.log(`Config file: ${path.join(ROOT_DIR, 'kishare-config.json')}`);
+  console.log(`Root directory (project files): ${ROOT_DIR}`);
+  console.log(`KiShare root: ${KISHARE_ROOT}`);
+  console.log(`Output directory: ${OUTPUT_DIR}`);
+}
+
+// Get project directories from config (defaults to ['projects'])
+export function getProjectDirs(config: WorkspaceConfig): string[] {
+  const dirs = config.projectDirs || ['projects'];
+  return dirs.map(dir => path.join(ROOT_DIR, dir));
+}
+
+// Getters for initialized paths
+export function getRootDir(): string {
+  if (!ROOT_DIR) {
+    throw new Error('Paths not initialized. Call initializePaths() first.');
+  }
+  return ROOT_DIR;
+}
+
+export function getOutputDir(): string {
+  if (!OUTPUT_DIR) {
+    throw new Error('Paths not initialized. Call initializePaths() first.');
+  }
+  return OUTPUT_DIR;
+}
+
+export function getKishareRootDir(): string {
+  if (!KISHARE_ROOT) {
+    throw new Error('Paths not initialized. Call initializePaths() first.');
+  }
+  return KISHARE_ROOT;
+}
+
+// Get list of git-tracked files in the specified project directories
+export function getTrackedFiles(projectDirs: string[]): Set<string> {
+  const allFiles = new Set<string>();
+  for (const projectDir of projectDirs) {
+    try {
+      const relativeDir = path.relative(getRootDir(), projectDir);
+      console.log(`Getting git tracked files for ${relativeDir}...`);
+      const output = execSync(`git ls-files --recurse-submodules "${relativeDir}/"`, {
+        cwd: getRootDir(),
+        encoding: 'utf-8',
+      });
+
+      output.trim().split('\n').filter(f => f).forEach(f => allFiles.add(f));
+    } catch (error) {
+      console.warn(`Could not get git tracked files for ${projectDir}`);
+    }
+  }
+
+  return allFiles;
+}