@jlcpcb/cli 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jlcpcb/cli",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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"
@@ -42,12 +43,13 @@
     "commander": "^12.0.0",
     "ink": "6.6.0",
     "ink-select-input": "6.2.0",
-    "@jlcpcb/core": "workspace:*",
     "open": "11.0.0",
     "react": "^19.0.0",
-    "react-devtools-core": "7.0.1"
+    "react-devtools-core": "7.0.1",
+    "string-width": "^8.2.0"
   },
   "devDependencies": {
+    "@jlcpcb/core": "workspace:*",
     "@types/node": "^20.0.0",
     "@types/react": "19.2.7"
   }

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/screens/LibraryScreen.tsx

@@ -6,15 +6,15 @@ import type { LibraryParams } from '../navigation/types.js';
 import { useAppState } from '../state/AppStateContext.js';
 import { useTerminalSize } from '../hooks/useTerminalSize.js';
 import { Divider } from '../components/Divider.js';
+import {
+  formatLibraryHeader,
+  formatLibraryRow,
+  getLibraryTableWidths,
+} from '../components/library-table-format.js';
 
 const libraryService = createLibraryService();
 const componentService = createComponentService();
 
-function truncate(str: string, len: number): string {
-  if (!str) return '';
-  return str.length > len ? str.slice(0, len - 1) + '…' : str;
-}
-
 function StatusBadge({ installed, linked }: { installed: boolean; linked: boolean }) {
   if (installed && linked) {
     return <Text color="green">Installed & Linked</Text>;
@@ -193,10 +193,7 @@ export function LibraryScreen() {
   // Components table - full width responsive layout
   // Fixed columns: selector(2) + name + category + status columns(15)
   // Description takes remaining space
-  const nameWidth = 20;
-  const categoryWidth = 12;
-  const statusWidth = 15; // Sym(5) + FP(5) + 3D(5)
-  const descWidth = Math.max(terminalWidth - 2 - nameWidth - categoryWidth - statusWidth, 15);
+  const widths = getLibraryTableWidths(terminalWidth);
 
   return (
     <Box flexDirection="column" width="100%">
@@ -216,36 +213,36 @@ export function LibraryScreen() {
       </Box>
       <Divider width={terminalWidth} />
       <Box marginBottom={1} marginTop={1}>
-        <Text bold dimColor>
-          {'  '}
-          {'Name'.padEnd(nameWidth)}
-          {'Category'.padEnd(categoryWidth)}
-          {'Description'.padEnd(descWidth)}
-          {'Sym'.padEnd(5)}
-          {'FP'.padEnd(5)}
-          {'3D'}
-        </Text>
+        <Text bold dimColor>{formatLibraryHeader(widths)}</Text>
       </Box>
       {installed.map((item, i) => {
         const isSelected = i === selectedIndex;
         const desc = descriptions[item.lcscId] || '';
-        // Check if footprint is standard KiCad (not JLC-MCP custom)
-        const isStandardFp = item.footprintRef && !item.footprintRef.startsWith('JLC-MCP:');
-        const fpLabel = !item.footprintRef ? 'N' : isStandardFp ? 'S' : 'Y';
-        const fpColor = !item.footprintRef ? 'red' : isStandardFp ? 'cyan' : 'green';
+        const row = formatLibraryRow(item, desc, widths);
         return (
           <Box key={`${item.lcscId}-${i}`}>
             <Text color={isSelected ? 'cyan' : undefined}>
               {isSelected ? '> ' : '  '}
             </Text>
-            <Text inverse={isSelected}>
-              <Text color="cyan">{truncate(item.name, nameWidth - 1).padEnd(nameWidth)}</Text>
-              {truncate(item.category, categoryWidth - 1).padEnd(categoryWidth)}
-              <Text dimColor>{truncate(desc, descWidth - 1).padEnd(descWidth)}</Text>
-              <Text color="green">{'Y'.padEnd(5)}</Text>
-              <Text color={fpColor}>{fpLabel.padEnd(5)}</Text>
-              <Text color={item.has3dModel ? 'green' : 'red'}>{item.has3dModel ? 'Y' : 'N'}</Text>
-            </Text>
+            {isSelected ? (
+              <Text inverse>
+                {row.name}
+                {row.category}
+                {row.description}
+                {row.sym}
+                {row.fp}
+                {row.model}
+              </Text>
+            ) : (
+              <Text>
+                <Text color="cyan">{row.name}</Text>
+                {row.category}
+                <Text dimColor>{row.description}</Text>
+                <Text color="green">{row.sym}</Text>
+                <Text color={row.fpColor}>{row.fp}</Text>
+                <Text color={row.modelColor}>{row.model}</Text>
+              </Text>
+            )}
           </Box>
         );
       })}

package/src/package-metadata.test.ts

@@ -0,0 +1,25 @@
+import { readFile } from "node:fs/promises";
+
+import { describe, expect, it } from "bun:test";
+
+type PackageJson = {
+  dependencies?: Record<string, string>;
+};
+
+async function readPackageJson(): Promise<PackageJson> {
+  const packageJsonPath = new URL("../package.json", import.meta.url);
+  const packageJson = await readFile(packageJsonPath, "utf8");
+  return JSON.parse(packageJson) as PackageJson;
+}
+
+describe("package metadata", () => {
+  it("does not publish workspace protocol runtime dependencies", async () => {
+    const packageJson = await readPackageJson();
+    const workspaceDependencies = Object.entries(packageJson.dependencies ?? {})
+      .filter(([, version]) => version.startsWith("workspace:"))
+      .map(([name]) => name);
+
+    expect(workspaceDependencies).toEqual([]);
+    expect(packageJson.dependencies?.["@jlcpcb/core"]).toBeUndefined();
+  });
+});