@jlcpcb/cli 0.2.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jlcpcb/cli",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "private": false,
   "type": "module",
   "description": "CLI for JLC/EasyEDA component sourcing and KiCad library management",
@@ -20,6 +20,7 @@
   "scripts": {
     "build": "bun build ./src/index.ts --outdir ./dist --target node && mkdir -p ./dist/assets && cp ../core/dist/assets/search.html ./dist/assets/",
     "dev": "bun --watch ./src/index.ts",
+    "lint": "eslint src --ext .ts,.tsx",
     "typecheck": "tsc --noEmit",
     "test": "bun test",
     "clean": "rm -rf dist"
@@ -44,7 +45,9 @@
     "ink-select-input": "6.2.0",
     "@jlcpcb/core": "workspace:*",
     "open": "11.0.0",
-    "react-devtools-core": "7.0.1"
+    "react": "^19.0.0",
+    "react-devtools-core": "7.0.1",
+    "string-width": "^8.2.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",

package/src/app/App.tsx

@@ -80,9 +80,10 @@ export function App<T extends ScreenName>({ initialScreen, initialParams }: AppP
   );
 }
 
-export function renderApp<T extends ScreenName>(
+export async function renderApp<T extends ScreenName>(
   initialScreen: T,
   initialParams: ScreenParams[T]
-): void {
-  render(<App initialScreen={initialScreen} initialParams={initialParams} />);
+): Promise<void> {
+  const instance = render(<App initialScreen={initialScreen} initialParams={initialParams} />);
+  await instance.waitUntilExit();
 }

package/src/app/components/DetailView.tsx

@@ -142,8 +142,8 @@ export function DetailView({ component, terminalWidth, isInstalled, installedInf
 
   // Footer text based on installation status
   const footerText = isInstalled
-    ? 'S Symbol • F Footprint • M 3D Model • R Regenerate • D Datasheet • Esc Back'
-    : 'Enter Install • D Datasheet • Esc Back';
+    ? 'R Regenerate • D Delete • O Datasheet • Esc Back'
+    : 'Enter Install • O Datasheet • Esc Back';
 
   return (
     <Box flexDirection="column" width="100%">

package/src/app/components/ListView.tsx

@@ -2,6 +2,11 @@ import React from 'react';
 import { Box, Text } from 'ink';
 import type { ComponentSearchResult } from '@jlcpcb/core';
 import { Divider } from './Divider.js';
+import {
+  formatListHeader,
+  formatListRow,
+  getListViewColumnWidths,
+} from './list-view-format.js';
 
 interface ListViewProps {
   results: ComponentSearchResult[];
@@ -10,72 +15,47 @@ interface ListViewProps {
   terminalWidth: number;
 }
 
-function formatStock(stock: number): string {
-  if (stock < 1000) return String(stock);
-  return '>1k';
-}
-
-function truncate(str: string, len: number): string {
-  if (!str) return '';
-  return str.length > len ? str.slice(0, len - 1) + '…' : str;
-}
-
 export function ListView({
   results,
   selectedIndex,
   isFiltered,
   terminalWidth,
 }: ListViewProps) {
-  // Calculate column widths based on terminal width
-  const minWidth = 80;
-  const availableWidth = Math.max(terminalWidth - 4, minWidth);
-
-  // Fixed columns: MFR.Part(18), Package(10), Stock(6), Price(8), Library(10) + spacing
-  const mfrPartWidth = 18;
-  const pkgWidth = 10;
-  const stockWidth = 6;
-  const priceWidth = 8;
-  const libraryWidth = 10;
-  const fixedWidth = mfrPartWidth + pkgWidth + stockWidth + priceWidth + libraryWidth + 4; // +4 for spacing
-
-  // Description gets all remaining space
-  const descWidth = Math.max(availableWidth - fixedWidth, 15);
+  const widths = getListViewColumnWidths(terminalWidth);
 
   return (
     <Box flexDirection="column">
       <Box marginBottom={1}>
-        <Text bold dimColor>
-          {'  '}
-          {'MFR.Part'.padEnd(mfrPartWidth)}
-          {'Description'.padEnd(descWidth)}
-          {'Package'.padEnd(pkgWidth)}
-          {'Stock'.padStart(stockWidth)}
-          {'Price'.padStart(priceWidth)}
-          {'  Library'}
-        </Text>
+        <Text bold dimColor>{formatListHeader(widths)}</Text>
       </Box>
       {results.map((r, i) => {
         const isSelected = i === selectedIndex;
-        const mfrPart = truncate(r.name || '', mfrPartWidth - 1).padEnd(mfrPartWidth);
-        const desc = truncate(r.description || '', descWidth - 1).padEnd(descWidth);
-        const pkg = truncate(r.package || '', pkgWidth - 1).padEnd(pkgWidth);
-        const stock = formatStock(r.stock || 0).padStart(stockWidth);
-        const price = r.price ? `$${r.price.toFixed(2)}`.padStart(priceWidth) : '     N/A';
-        const library = r.libraryType === 'basic' ? 'Basic' : 'Extended';
-        const libraryColor = r.libraryType === 'basic' ? 'green' : 'yellow';
+        const row = formatListRow(r, widths);
 
         return (
           <Box key={r.lcscId}>
             <Text color="cyan">{isSelected ? '▶' : '  '}</Text>
-            <Text inverse={isSelected}>
-              <Text color="cyan">{mfrPart}</Text>
-              <Text dimColor>{desc}</Text>
-              {pkg}
-              {stock}
-              {price}
-              {'  '}
-              <Text color={libraryColor}>{library}</Text>
-            </Text>
+            {isSelected ? (
+              <Text inverse>
+                {row.mfrPart}
+                {row.desc}
+                {row.pkg}
+                {row.stock}
+                {row.price}
+                {'  '}
+                {row.library}
+              </Text>
+            ) : (
+              <Text>
+                <Text color="cyan">{row.mfrPart}</Text>
+                <Text dimColor>{row.desc}</Text>
+                {row.pkg}
+                {row.stock}
+                {row.price}
+                {'  '}
+                <Text color={row.libraryColor}>{row.library}</Text>
+              </Text>
+            )}
           </Box>
         );
       })}

package/src/app/components/library-table-format.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'bun:test';
+
+import type { InstalledComponent } from '@jlcpcb/core';
+
+import {
+  formatLibraryHeader,
+  formatLibraryRow,
+  getLibraryTableWidths,
+} from './library-table-format.js';
+import { measureTextWidth } from './table-text.js';
+
+function createInstalledComponent(
+  overrides: Partial<InstalledComponent>
+): InstalledComponent {
+  return {
+    lcscId: 'C123',
+    name: 'LM2940CT-5.0/NOPB',
+    category: 'Power',
+    symbolRef: 'JLC-MCP:LM2940CT-5.0/NOPB',
+    footprintRef: 'JLC-MCP:TO-220',
+    library: 'JLC-MCP',
+    has3dModel: true,
+    ...overrides,
+  };
+}
+
+describe('library-table-format', () => {
+  it('formats header and rows to deterministic widths', () => {
+    const widths = getLibraryTableWidths(120);
+    const header = formatLibraryHeader(widths);
+    const with3d = formatLibraryRow(
+      createInstalledComponent({ has3dModel: true }),
+      '宽字符 description',
+      widths
+    );
+    const without3d = formatLibraryRow(
+      createInstalledComponent({ has3dModel: false, footprintRef: undefined }),
+      'plain description',
+      widths
+    );
+
+    const render = (row: ReturnType<typeof formatLibraryRow>) =>
+      '  ' +
+      row.name +
+      row.category +
+      row.description +
+      row.sym +
+      row.fp +
+      row.model;
+
+    expect(measureTextWidth(header)).toBe(measureTextWidth(render(with3d)));
+    expect(measureTextWidth(render(with3d))).toBe(
+      measureTextWidth(render(without3d))
+    );
+    expect(measureTextWidth(with3d.model)).toBe(widths.modelWidth);
+    expect(measureTextWidth(without3d.fp)).toBe(widths.fpWidth);
+  });
+});

package/src/app/components/library-table-format.ts

@@ -0,0 +1,87 @@
+import type { InstalledComponent } from '@jlcpcb/core';
+
+import {
+  padEndToWidth,
+  truncateToWidth,
+} from './table-text.js';
+
+export interface LibraryTableWidths {
+  nameWidth: number;
+  categoryWidth: number;
+  descWidth: number;
+  symWidth: number;
+  fpWidth: number;
+  modelWidth: number;
+}
+
+export function getLibraryTableWidths(terminalWidth: number): LibraryTableWidths {
+  const nameWidth = 20;
+  const categoryWidth = 12;
+  const symWidth = 5;
+  const fpWidth = 5;
+  const modelWidth = 5;
+  const descWidth = Math.max(
+    terminalWidth - 2 - nameWidth - categoryWidth - symWidth - fpWidth - modelWidth,
+    15
+  );
+
+  return {
+    nameWidth,
+    categoryWidth,
+    descWidth,
+    symWidth,
+    fpWidth,
+    modelWidth,
+  };
+}
+
+export function formatLibraryHeader(widths: LibraryTableWidths): string {
+  return (
+    '  ' +
+    padEndToWidth('Name', widths.nameWidth) +
+    padEndToWidth('Category', widths.categoryWidth) +
+    padEndToWidth('Description', widths.descWidth) +
+    padEndToWidth('Sym', widths.symWidth) +
+    padEndToWidth('FP', widths.fpWidth) +
+    padEndToWidth('3D', widths.modelWidth)
+  );
+}
+
+export function formatLibraryRow(
+  item: InstalledComponent,
+  description: string,
+  widths: LibraryTableWidths
+): {
+  name: string;
+  category: string;
+  description: string;
+  sym: string;
+  fp: string;
+  model: string;
+  fpColor: 'red' | 'cyan' | 'green';
+  modelColor: 'red' | 'green';
+} {
+  const isStandardFp =
+    item.footprintRef && !item.footprintRef.startsWith('JLC-MCP:');
+  const fpLabel = !item.footprintRef ? 'N' : isStandardFp ? 'S' : 'Y';
+
+  return {
+    name: padEndToWidth(
+      truncateToWidth(item.name, widths.nameWidth - 1),
+      widths.nameWidth
+    ),
+    category: padEndToWidth(
+      truncateToWidth(item.category, widths.categoryWidth - 1),
+      widths.categoryWidth
+    ),
+    description: padEndToWidth(
+      truncateToWidth(description, widths.descWidth - 1),
+      widths.descWidth
+    ),
+    sym: padEndToWidth('Y', widths.symWidth),
+    fp: padEndToWidth(fpLabel, widths.fpWidth),
+    model: padEndToWidth(item.has3dModel ? 'Y' : 'N', widths.modelWidth),
+    fpColor: !item.footprintRef ? 'red' : isStandardFp ? 'cyan' : 'green',
+    modelColor: item.has3dModel ? 'green' : 'red',
+  };
+}

package/src/app/components/list-view-format.test.ts

@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'bun:test';
+
+import type { ComponentSearchResult } from '@jlcpcb/core';
+
+import {
+  formatListHeader,
+  formatListRow,
+  getListViewColumnWidths,
+} from './list-view-format.js';
+import { measureTextWidth } from './table-text.js';
+
+function createResult(
+  overrides: Partial<ComponentSearchResult>
+): ComponentSearchResult {
+  return {
+    lcscId: 'C123',
+    name: 'LM2940CT-5.0/NOPB',
+    description:
+      '1 150uVrms 1A 26V 30mA 500mV@(1A) 5V 72dB@(120Hz) Fixed Positive Under Voltage Lockout',
+    package: 'TO-220',
+    manufacturer: 'TI',
+    stock: 28,
+    price: 1.01,
+    libraryType: 'extended',
+    ...overrides,
+  };
+}
+
+describe('list-view-format', () => {
+  it('formats header and rows to deterministic widths', () => {
+    const widths = getListViewColumnWidths(120);
+    const header = formatListHeader(widths);
+    const extendedRow = formatListRow(createResult({ libraryType: 'extended' }), widths);
+    const basicRow = formatListRow(createResult({ libraryType: 'basic' }), widths);
+
+    const render = (row: ReturnType<typeof formatListRow>) =>
+      '  ' + row.mfrPart + row.desc + row.pkg + row.stock + row.price + '  ' + row.library;
+
+    expect(measureTextWidth(header)).toBe(measureTextWidth(render(extendedRow)));
+    expect(measureTextWidth(render(extendedRow))).toBe(
+      measureTextWidth(render(basicRow))
+    );
+    expect(measureTextWidth(extendedRow.library)).toBe(widths.libraryWidth);
+    expect(measureTextWidth(basicRow.library)).toBe(widths.libraryWidth);
+  });
+
+  it('truncates and pads by display width for wide characters', () => {
+    const widths = getListViewColumnWidths(60);
+    const row = formatListRow(
+      createResult({
+        name: '电源模块-REGULATOR',
+        description: '宽字符 mixed description',
+      }),
+      widths
+    );
+
+    expect(measureTextWidth(row.mfrPart)).toBe(widths.mfrPartWidth);
+    expect(measureTextWidth(row.desc)).toBe(widths.descWidth);
+  });
+});

package/src/app/components/list-view-format.ts

@@ -0,0 +1,97 @@
+import type { ComponentSearchResult } from '@jlcpcb/core';
+import {
+  padEndToWidth,
+  padStartToWidth,
+  truncateToWidth,
+} from './table-text.js';
+
+export interface ListViewColumnWidths {
+  mfrPartWidth: number;
+  descWidth: number;
+  pkgWidth: number;
+  stockWidth: number;
+  priceWidth: number;
+  libraryWidth: number;
+}
+
+export function formatStock(stock: number): string {
+  if (stock < 1000) return String(stock);
+  return '>1k';
+}
+
+export function truncate(str: string, len: number): string {
+  return truncateToWidth(str, len);
+}
+
+export function getListViewColumnWidths(terminalWidth: number): ListViewColumnWidths {
+  const minWidth = 80;
+  const availableWidth = Math.max(terminalWidth - 4, minWidth);
+
+  const mfrPartWidth = 18;
+  const pkgWidth = 10;
+  const stockWidth = 6;
+  const priceWidth = 8;
+  const libraryWidth = 10;
+  const fixedWidth =
+    mfrPartWidth + pkgWidth + stockWidth + priceWidth + libraryWidth + 4;
+
+  return {
+    mfrPartWidth,
+    descWidth: Math.max(availableWidth - fixedWidth, 15),
+    pkgWidth,
+    stockWidth,
+    priceWidth,
+    libraryWidth,
+  };
+}
+
+export function formatListHeader(widths: ListViewColumnWidths): string {
+  return (
+    '  ' +
+    padEndToWidth('MFR.Part', widths.mfrPartWidth) +
+    padEndToWidth('Description', widths.descWidth) +
+    padEndToWidth('Package', widths.pkgWidth) +
+    padStartToWidth('Stock', widths.stockWidth) +
+    padStartToWidth('Price', widths.priceWidth) +
+    '  ' +
+    padEndToWidth('Library', widths.libraryWidth)
+  );
+}
+
+export function formatListRow(
+  result: ComponentSearchResult,
+  widths: ListViewColumnWidths
+): {
+  mfrPart: string;
+  desc: string;
+  pkg: string;
+  stock: string;
+  price: string;
+  library: string;
+  libraryLabel: string;
+  libraryColor: 'green' | 'yellow';
+} {
+  const libraryLabel = result.libraryType === 'basic' ? 'Basic' : 'Extended';
+
+  return {
+    mfrPart: padEndToWidth(
+      truncate(result.name || '', widths.mfrPartWidth - 1),
+      widths.mfrPartWidth
+    ),
+    desc: padEndToWidth(
+      truncate(result.description || '', widths.descWidth - 1),
+      widths.descWidth
+    ),
+    pkg: padEndToWidth(
+      truncate(result.package || '', widths.pkgWidth - 1),
+      widths.pkgWidth
+    ),
+    stock: padStartToWidth(formatStock(result.stock || 0), widths.stockWidth),
+    price: result.price
+      ? padStartToWidth(`$${result.price.toFixed(2)}`, widths.priceWidth)
+      : padStartToWidth('N/A', widths.priceWidth),
+    library: padEndToWidth(libraryLabel, widths.libraryWidth),
+    libraryLabel,
+    libraryColor: result.libraryType === 'basic' ? 'green' : 'yellow',
+  };
+}

package/src/app/components/table-text.ts

@@ -0,0 +1,59 @@
+import stringWidth from 'string-width';
+
+const segmenter =
+  typeof Intl !== 'undefined' && 'Segmenter' in Intl
+    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+    : null;
+
+function getGraphemes(value: string): string[] {
+  if (!segmenter) {
+    return Array.from(value);
+  }
+
+  return Array.from(segmenter.segment(value), ({ segment }) => segment);
+}
+
+export function measureTextWidth(value: string): number {
+  return stringWidth(value);
+}
+
+export function padEndToWidth(value: string, width: number): string {
+  const padding = Math.max(width - measureTextWidth(value), 0);
+  return value + ' '.repeat(padding);
+}
+
+export function padStartToWidth(value: string, width: number): string {
+  const padding = Math.max(width - measureTextWidth(value), 0);
+  return ' '.repeat(padding) + value;
+}
+
+export function truncateToWidth(value: string, width: number): string {
+  if (!value || width <= 0) {
+    return '';
+  }
+
+  if (measureTextWidth(value) <= width) {
+    return value;
+  }
+
+  const ellipsis = '…';
+  const ellipsisWidth = measureTextWidth(ellipsis);
+  if (width <= ellipsisWidth) {
+    return ellipsis;
+  }
+
+  let output = '';
+  let currentWidth = 0;
+  const targetWidth = width - ellipsisWidth;
+
+  for (const grapheme of getGraphemes(value)) {
+    const graphemeWidth = measureTextWidth(grapheme);
+    if (currentWidth + graphemeWidth > targetWidth) {
+      break;
+    }
+    output += grapheme;
+    currentWidth += graphemeWidth;
+  }
+
+  return output + ellipsis;
+}

package/src/app/navigation/NavigationContext.tsx

@@ -83,5 +83,9 @@ export function useNavigation(): NavigationContextValue {
 
 export function useCurrentScreen(): HistoryEntry {
   const { history, currentIndex } = useNavigation();
-  return history[currentIndex];
+  const entry = history[currentIndex];
+  if (!entry) {
+    throw new Error(`Invalid navigation state: currentIndex=${currentIndex}, history.length=${history.length}`);
+  }
+  return entry;
 }

package/src/app/screens/InfoScreen.tsx

@@ -73,38 +73,14 @@ export function InfoScreen() {
   const datasheetUrl = component && ('datasheetPdf' in component ? component.datasheetPdf : 'datasheet' in component ? component.datasheet : undefined);
 
   const [isRegenerating, setIsRegenerating] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
   const [regenerateMessage, setRegenerateMessage] = useState<string | null>(null);
 
   useInput((input, key) => {
-    if (isLoading || !component || isCheckingLibrary || isRegenerating) return;
+    if (isLoading || !component || isCheckingLibrary || isRegenerating || isDeleting) return;
 
     const lowerInput = input.toLowerCase();
 
-    // S - Open Symbol in KiCad
-    if (lowerInput === 's' && installedInfo && libraryStatus) {
-      const symbolPath = `${libraryStatus.paths.symbolsDir}/JLC-MCP-${installedInfo.category}.kicad_sym`;
-      open(symbolPath);
-      return;
-    }
-
-    // F - Open Footprint in KiCad
-    if (lowerInput === 'f' && installedInfo && libraryStatus) {
-      if (installedInfo.footprintRef?.startsWith('JLC-MCP:')) {
-        const fpName = installedInfo.footprintRef.split(':')[1];
-        const footprintPath = `${libraryStatus.paths.footprintsDir}/JLC-MCP.pretty/${fpName}.kicad_mod`;
-        open(footprintPath);
-      }
-      // Standard KiCad footprints can't be opened directly
-      return;
-    }
-
-    // M - Open 3D Model
-    if (lowerInput === 'm' && installedInfo && libraryStatus && installedInfo.has3dModel) {
-      const modelPath = `${libraryStatus.paths.models3dDir}/${installedInfo.name}.step`;
-      open(modelPath);
-      return;
-    }
-
     // R - Regenerate symbol and footprint
     if (lowerInput === 'r' && installedInfo) {
       setIsRegenerating(true);
@@ -124,8 +100,27 @@ export function InfoScreen() {
       return;
     }
 
-    // D - Open Datasheet
-    if (lowerInput === 'd' && datasheetUrl) {
+    // D - Delete component
+    if (lowerInput === 'd' && installedInfo) {
+      setIsDeleting(true);
+      setRegenerateMessage('Deleting component...');
+
+      libraryService.remove(installedInfo.lcscId)
+        .then(() => {
+          setRegenerateMessage('✓ Component deleted');
+          setInstalledInfo(null);
+          setTimeout(() => setRegenerateMessage(null), 2000);
+        })
+        .catch((err) => {
+          setRegenerateMessage(`✗ Delete failed: ${err instanceof Error ? err.message : 'Unknown error'}`);
+          setTimeout(() => setRegenerateMessage(null), 3000);
+        })
+        .finally(() => setIsDeleting(false));
+      return;
+    }
+
+    // O - Open Datasheet
+    if (lowerInput === 'o' && datasheetUrl) {
       open(datasheetUrl);
       return;
     }