@huaqiu/component-gen-app 0.3.6

package/src/components/ResultStage.tsx

@@ -0,0 +1,92 @@
+/**
+ * `@huaqiu/component-gen-app` — completed-generation result stage.
+ *
+ * Renders the preview (from `ports.artifactContent`), a download action and a
+ * note when the generation was auto-generated or degraded. DSH-agnostic.
+ */
+import { useCallback, useEffect, useState, type ReactElement } from 'react'
+import type { ComponentGenPorts } from '../ports.js'
+import type { Translate } from '../copy/index.js'
+import { triggerDownload } from '../utils/ecad.js'
+import { PreviewStage } from './PreviewStage.js'
+
+export interface ResultStageProps {
+  ports: ComponentGenPorts
+  kind: 'symbol' | 'footprint'
+  result: Record<string, unknown>
+  t: Translate
+  /** bump to force a re-render of the preview for a new result. */
+  srcKey: string
+}
+
+function artifactIdOf(result: Record<string, unknown>): string | null {
+  const art = result.artifact
+  if (art && typeof art === 'object') {
+    const id = (art as { id?: unknown }).id
+    if (typeof id === 'string' && id) return id
+  }
+  return null
+}
+
+function filenameOf(result: Record<string, unknown>, kind: string): string {
+  const f = result.filename
+  if (typeof f === 'string' && f) return f
+  return `generated.${kind === 'symbol' ? 'kicad_sym' : 'kicad_mod'}`
+}
+
+export function ResultStage({ ports, kind, result, t, srcKey }: ResultStageProps): ReactElement {
+  const artifactId = artifactIdOf(result)
+  const [content, setContent] = useState<string | null>(null)
+  const [previewErr, setPreviewErr] = useState<string | null>(null)
+  const [downloading, setDownloading] = useState(false)
+
+  useEffect(() => {
+    if (!artifactId) return
+    let cancelled = false
+    setContent(null)
+    setPreviewErr(null)
+    ports.artifactContent(artifactId)
+      .then((text) => { if (!cancelled) setContent(text) })
+      .catch((e) => { if (!cancelled) setPreviewErr(String((e as Error)?.message || e)) })
+    return () => { cancelled = true }
+  }, [artifactId, ports, srcKey])
+
+  const download = useCallback(async (): Promise<void> => {
+    setDownloading(true)
+    try {
+      if (artifactId) {
+        const text = content ?? await ports.artifactContent(artifactId)
+        triggerDownload(filenameOf(result, kind), text)
+      } else {
+        const fileUrl = result.fileUrl
+        if (typeof fileUrl === 'string' && fileUrl) {
+          window.open(fileUrl, '_blank', 'noopener')
+        }
+      }
+    } finally {
+      setDownloading(false)
+    }
+  }, [artifactId, content, ports, result, kind])
+
+  const autoGenerated = result.autoGenerated === true
+  const note = typeof result.note === 'string' ? result.note : null
+
+  return (
+    <div className="cga-panel">
+      <div className="cga-panel__body">
+        {autoGenerated ? <div className="cga-banner cga-banner--info">{t('footprint.directGenerated')}</div> : null}
+        {content != null
+          ? <PreviewStage kind={kind} content={content} srcKey={srcKey} t={t} />
+          : previewErr
+            ? <div className="cga-banner cga-banner--error">{t('app.error')}{previewErr}</div>
+            : null}
+        {note ? <div className="cga-banner cga-banner--info">{note}</div> : null}
+        <div className="cga-actions">
+          <button type="button" className="cga-btn cga-btn--primary" onClick={() => void download()} disabled={downloading}>
+            {kind === 'symbol' ? t('symbol.download') : t('footprint.download')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/UploadInput.tsx

@@ -0,0 +1,121 @@
+/**
+ * `@huaqiu/component-gen-app` — image upload control (click + paste + drag).
+ *
+ * Reads a file, downscales it to a thumbnail data URL if needed (bounded by
+ * `maxBytes`), and reports both the original file and the data URL to the
+ * parent. The parent owns sending it to the server.
+ */
+import { useCallback, useRef, useState, type ReactElement } from 'react'
+import type { Translate } from '../copy/index.js'
+
+export interface UploadInputProps {
+  maxBytes: number
+  t: Translate
+  disabled?: boolean
+  imageDataUrl?: string | null
+  /** original file, for the server to store into history. */
+  file?: File | null
+  onFile: (file: File | null, dataUrl: string | null) => void
+}
+
+const MAX_EDGE = 1600
+
+/** Downscale an image file to a data URL bounded in edge + bytes. */
+export function fileToDataUrl(file: File, maxBytes: number): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onerror = () => reject(new Error('failed to read file'))
+    reader.onload = () => {
+      const src = String(reader.result)
+      if (src.length <= maxBytes) { resolve(src); return }
+      // Too big as-is — downscale via canvas.
+      const img = new Image()
+      img.onload = () => {
+        const scale = Math.min(1, MAX_EDGE / Math.max(img.width, img.height))
+        const canvas = document.createElement('canvas')
+        canvas.width = Math.max(1, Math.round(img.width * scale))
+        canvas.height = Math.max(1, Math.round(img.height * scale))
+        const ctx = canvas.getContext('2d')
+        if (!ctx) { reject(new Error('canvas unavailable')); return }
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+        let out = canvas.toDataURL('image/jpeg', 0.82)
+        // Quality ladder until it fits (or we give up after several tries).
+        for (const q of [0.7, 0.55, 0.4]) {
+          if (out.length <= maxBytes) break
+          out = canvas.toDataURL('image/jpeg', q)
+        }
+        resolve(out)
+      }
+      img.onerror = () => reject(new Error('failed to decode image'))
+      img.src = src
+    }
+    reader.readAsDataURL(file)
+  })
+}
+
+export function UploadInput(props: UploadInputProps): ReactElement {
+  const { maxBytes, t, disabled = false, imageDataUrl = null, file = null, onFile } = props
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const [dragging, setDragging] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const accept = useCallback(async (f: File | null): Promise<void> => {
+    if (!f) return
+    if (f.size > maxBytes) {
+      setError(t('upload.imageTooLarge'))
+      return
+    }
+    setError(null)
+    try {
+      const dataUrl = await fileToDataUrl(f, maxBytes)
+      onFile(f, dataUrl)
+    } catch (e) {
+      setError(String((e as Error)?.message || e))
+    }
+  }, [maxBytes, onFile, t])
+
+  return (
+    <div
+      className={`cga-upload${dragging ? ' cga-upload--dragging' : ''}`}
+      onClick={() => { if (!disabled) inputRef.current?.click() }}
+      onDragOver={(ev) => { ev.preventDefault(); if (!disabled) setDragging(true) }}
+      onDragLeave={() => setDragging(false)}
+      onDrop={(ev) => {
+        ev.preventDefault()
+        setDragging(false)
+        if (disabled) return
+        void accept(ev.dataTransfer.files?.[0] ?? null)
+      }}
+      onPaste={(ev) => {
+        const item = Array.from(ev.clipboardData?.items ?? []).find((i) => i.type.startsWith('image/'))
+        if (item) {
+          ev.preventDefault()
+          void accept(item.getAsFile())
+        }
+      }}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        style={{ display: 'none' }}
+        disabled={disabled}
+        onChange={(ev) => { void accept(ev.target.files?.[0] ?? null); ev.target.value = '' }}
+      />
+      {imageDataUrl
+        ? (
+          <>
+            <img className="cga-upload__thumb" src={imageDataUrl} alt="" />
+            <div className="cga-upload__text">{file?.name ?? ''}</div>
+          </>
+        )
+        : null}
+      <div className="cga-upload__text">
+        {imageDataUrl ? t('upload.replace') : t('upload.drop')}
+        <br />{t('upload.paste')}
+      </div>
+      {error ? <div className="cga-upload__text" style={{ color: 'var(--dsw-alias-state-error-primary, red)' }}>{error}</div> : null}
+      {!imageDataUrl ? <button type="button" className="cga-upload__browse">{t('upload.browse')}</button> : null}
+    </div>
+  )
+}

package/src/copy/en.ts

@@ -0,0 +1,150 @@
+/**
+ * `@huaqiu/component-gen-app` — en copy pack.
+ *
+ * Typed structurally against `ZH` (`DeepStrings`) so a missing or misshapen EN
+ * key is a compile error. zh stays the fallback everywhere.
+ */
+import type { ZH } from './zh.js'
+
+type DeepStrings<T> = { [K in keyof T]: T[K] extends string ? string : DeepStrings<T[K]> }
+
+export const EN: DeepStrings<typeof ZH> = {
+  app: {
+    title: 'Huaqiu Component Gen',
+    symbolTitle: 'Symbol Gen',
+    footprintTitle: 'Footprint Gen',
+    footprintTooltip: 'Open footprint generator',
+    symbolTooltip: 'Open symbol generator',
+    close: 'Close',
+    back: 'Back',
+    loading: 'Loading…',
+    error: 'Error',
+    unknownError: 'Unknown error',
+  },
+  upload: {
+    drop: 'Drop an image here, or click to upload',
+    paste: 'Or paste with Ctrl/⌘+V',
+    browse: 'Choose image',
+    imageTooLarge: 'Image too large; keep it under 4 MiB',
+    noImage: 'Upload an image first',
+    replace: 'Replace image',
+    uploading: 'Uploading…',
+    hint: 'Hint',
+  },
+  symbol: {
+    generate: 'Generate Symbol',
+    regenerate: 'Regenerate',
+    instructionPlaceholder: 'Optional instruction, e.g. "3-pin LDO, pin 1 is VIN"',
+    progress: 'Generating symbol…',
+    ready: 'Generated',
+    failed: 'Generation failed',
+    download: 'Download .kicad_sym',
+    save: 'Save to history',
+    saved: 'Saved to history',
+  },
+  footprint: {
+    extract: 'Extract dimensions',
+    generate: 'Generate Footprint',
+    regenerate: 'Regenerate',
+    hintPlaceholder: 'Optional package type hint, e.g. BGA / QFN / SOP',
+    extractProgress: 'Extracting package dimensions…',
+    generateProgress: 'Generating footprint…',
+    ready: 'Generated',
+    failed: 'Generation failed',
+    needsConfirmation: 'Confirm or correct the extracted package dimensions',
+    download: 'Download .kicad_mod',
+    save: 'Save to history',
+    saved: 'Saved to history',
+    directGenerated: 'A standard footprint was auto-generated; review it below',
+    autoGenerated: 'Auto-generated',
+    confirm: 'Confirm & generate',
+    cancel: 'Cancel',
+  },
+  editor: {
+    essential: 'Essential',
+    advanced: 'Advanced',
+    width: 'Width',
+    height: 'Height',
+    pinCount: 'Pin count',
+    pitch: 'Pitch',
+    packageType: 'Package type',
+    fileName: 'File name',
+    editedTag: 'Edited',
+    aiTag: 'AI-extracted',
+    dragHint: 'Drag the handles to adjust W / H',
+    validationOutOfRange: 'Out of range',
+    validationMinGtMax: 'Min > max',
+    validationInvalid: 'Invalid value',
+    unit: 'mm',
+    body: 'Body',
+    pins: '{count} pins',
+    validationIssue: '{n} value(s) need fixing',
+    validationOk: 'Values are valid',
+    issueOutOfRange: 'Out of allowed range',
+    issueMinGtMax: 'Min > max',
+    confirmLabel: 'Confirm',
+    cancelLabel: 'Cancel',
+  },
+  field: {
+    width: 'Width',
+    height: 'Height',
+    length: 'Length',
+    depth: 'Depth',
+    span: 'Span',
+    bodyWidth: 'Body width',
+    bodyLength: 'Body length',
+    bodyHeight: 'Body height',
+    boardWidth: 'Board width',
+    boardHeight: 'Board height',
+    overallWidth: 'Overall width',
+    overallLength: 'Overall length',
+    overallHeight: 'Overall height',
+    pitch: 'Pitch',
+    pitchX: 'Pitch X',
+    pitchY: 'Pitch Y',
+    leadPitch: 'Lead pitch',
+    padWidth: 'Pad width',
+    padLength: 'Pad length',
+    padHeight: 'Pad height',
+    leadWidth: 'Lead width',
+    leadLength: 'Lead length',
+    leadSpan: 'Lead span',
+    pinCount: 'Pin count',
+    rows: 'Rows',
+    columns: 'Columns',
+    standoff: 'Standoff',
+    maxOf: '{field} max',
+    minOf: '{field} min',
+  },
+  history: {
+    title: 'History',
+    empty: 'No history yet',
+    symbol: 'Symbol',
+    footprint: 'Footprint',
+    generated: 'Generated',
+    failed: 'Failed',
+    cancelled: 'Cancelled',
+    rename: 'Rename',
+    delete: 'Delete',
+    download: 'Download',
+    reopen: 'Open',
+    view: 'View history',
+    createdAt: 'Created',
+    loadMore: 'Load more',
+    noMore: 'No more',
+  },
+  auth: {
+    notLoggedIn: 'Not logged in to Huaqiu EDA',
+    login: 'Login to Huaqiu EDA',
+    loginRequired: 'This feature requires a Huaqiu EDA login',
+    loggedIn: 'Logged in',
+  },
+  status: {
+    queued: 'Queued',
+    running: 'Running',
+    needsConfirmation: 'Needs confirmation',
+    completed: 'Completed',
+    failed: 'Failed',
+    cancelled: 'Cancelled',
+  },
+}

package/src/copy/index.ts

@@ -0,0 +1,50 @@
+/**
+ * `@huaqiu/component-gen-app` — copy packs + translate resolver.
+ *
+ * Mirrors the `dsh-tool-symbol-footprint` house convention:
+ *   - `ZH as const` → `CopyKey` → `EN: Record<CopyKey, string>` (missing EN
+ *     key is a compile error; zh is the runtime fallback);
+ *   - `Translate = (key, params?) => string` with `{param}` substitution;
+ *   - `fieldLabel` (utils/labels.ts) resolves dimension keys through the
+ *     `field.*` copy section, so labels follow the UI language.
+ */
+import { ZH, type CopyKey } from './zh.js'
+import { EN } from './en.js'
+
+export type { CopyKey } from './zh.js'
+export { ZH } from './zh.js'
+export { EN } from './en.js'
+
+export type Translate = (key: string, params?: Record<string, unknown>) => string
+
+type FlatKey = string
+
+function lookup(pack: Record<string, unknown>, keys: FlatKey): string | undefined {
+  let node: unknown = pack
+  for (const seg of keys.split('.')) {
+    if (node && typeof node === 'object') node = (node as Record<string, unknown>)[seg]
+    else return undefined
+  }
+  return typeof node === 'string' ? node : undefined
+}
+
+export function translate(lang: string | undefined, key: string, params?: Record<string, unknown>): string {
+  const pack = lang?.toLowerCase().startsWith('en') ? (EN as unknown as Record<string, unknown>) : ZH as unknown as Record<string, unknown>
+  let v = lookup(pack, key)
+  if (v === undefined) v = lookup(ZH as unknown as Record<string, unknown>, key)
+  if (v === undefined) v = key
+  if (params) {
+    for (const k of Object.keys(params)) {
+      v = v.split(`{${k}}`).join(String(params[k]))
+    }
+  }
+  return v
+}
+
+/** Build a `(key, params?) => string` resolver for a given language. */
+export function translateFor(lang: string | undefined): Translate {
+  return (key, params) => translate(lang, key, params)
+}
+
+/** zh-only fallback (used when no locale is supplied). */
+export const defaultT: Translate = (key, params) => translate('zh', key, params)

package/src/copy/zh.ts

@@ -0,0 +1,154 @@
+/**
+ * `@huaqiu/component-gen-app` — zh copy pack (fallback everywhere).
+ *
+ * House i18n convention (`dsh-pcb-eda`): `ZH as const` → `CopyKey` →
+ * `EN: Record<CopyKey, string>` so a missing EN key is a compile error.
+ * Punctuation is i18n too（中文全角：；）.
+ */
+export const ZH = {
+  app: {
+    title: '华秋元器件生成',
+    symbolTitle: '符号生成',
+    footprintTitle: '封装生成',
+    footprintTooltip: '打开封装生成',
+    symbolTooltip: '打开符号生成',
+    close: '关闭',
+    back: '返回',
+    loading: '加载中…',
+    error: '出错了',
+    unknownError: '未知错误',
+  },
+  upload: {
+    drop: '拖拽图片到此处，或点击上传',
+    paste: '也可直接 Ctrl/⌘+V 粘贴图片',
+    browse: '选择图片',
+    imageTooLarge: '图片过大，请使用 4MiB 以内的图片',
+    noImage: '请先上传图片',
+    replace: '更换图片',
+    uploading: '上传中…',
+    hint: '提示',
+  },
+  symbol: {
+    generate: '生成符号',
+    regenerate: '重新生成',
+    instructionPlaceholder: '可选：补充生成说明，如“3 引脚 LDO，引脚 1 为 VIN”',
+    progress: '正在生成符号…',
+    ready: '生成完成',
+    failed: '生成失败',
+    download: '下载 .kicad_sym',
+    save: '保存到历史',
+    saved: '已保存到历史',
+  },
+  footprint: {
+    extract: '提取尺寸',
+    generate: '生成封装',
+    regenerate: '重新生成',
+    hintPlaceholder: '可选：封装类型提示，如 BGA / QFN / SOP',
+    extractProgress: '正在提取封装尺寸…',
+    generateProgress: '正在生成封装…',
+    ready: '生成完成',
+    failed: '生成失败',
+    needsConfirmation: '请确认或修改提取到的封装尺寸',
+    download: '下载 .kicad_mod',
+    save: '保存到历史',
+    saved: '已保存到历史',
+    directGenerated: '已自动生成标准封装，可预览后下载',
+    autoGenerated: '自动生成',
+    confirm: '确认并生成',
+    cancel: '取消',
+  },
+  editor: {
+    essential: '基本参数',
+    advanced: '高级参数',
+    width: '宽度',
+    height: '长度',
+    pinCount: '引脚数',
+    pitch: '间距',
+    packageType: '封装类型',
+    fileName: '文件名',
+    editedTag: '已修改',
+    aiTag: 'AI 提取',
+    dragHint: '拖动控制柄调整 W / H',
+    validationOutOfRange: '超出范围',
+    validationMinGtMax: '最小值大于最大值',
+    validationInvalid: '无效数值',
+    unit: 'mm',
+    body: '本体',
+    pins: '{count} 引脚',
+    validationIssue: '{n} 处数值需要修正',
+    validationOk: '数值有效',
+    issueOutOfRange: '超出允许范围',
+    issueMinGtMax: '最小值大于最大值',
+    confirmLabel: '确认',
+    cancelLabel: '取消',
+  },
+  field: {
+    width: '宽度',
+    height: '长度',
+    length: '长度',
+    depth: '深度',
+    span: '跨距',
+    bodyWidth: '本体宽度',
+    bodyLength: '本体长度',
+    bodyHeight: '本体高度',
+    boardWidth: '板宽',
+    boardHeight: '板高',
+    overallWidth: '总宽度',
+    overallLength: '总长度',
+    overallHeight: '总高度',
+    pitch: '间距',
+    pitchX: 'X 间距',
+    pitchY: 'Y 间距',
+    leadPitch: '引线间距',
+    padWidth: '焊盘宽',
+    padLength: '焊盘长',
+    padHeight: '焊盘高',
+    leadWidth: '引线宽',
+    leadLength: '引线长',
+    leadSpan: '引线跨距',
+    pinCount: '引脚数',
+    rows: '行数',
+    columns: '列数',
+    standoff: '离地高度',
+    maxOf: '{field} 最大值',
+    minOf: '{field} 最小值',
+  },
+  history: {
+    title: '历史记录',
+    empty: '暂无历史',
+    symbol: '符号',
+    footprint: '封装',
+    generated: '已生成',
+    failed: '失败',
+    cancelled: '已取消',
+    rename: '重命名',
+    delete: '删除',
+    download: '下载',
+    reopen: '打开',
+    view: '查看历史',
+    createdAt: '创建时间',
+    loadMore: '加载更多',
+    noMore: '没有更多了',
+  },
+  auth: {
+    notLoggedIn: '未登录华秋账号',
+    login: '登录华秋 EDA',
+    loginRequired: '该功能需要登录华秋 EDA 账号',
+    loggedIn: '已登录',
+  },
+  status: {
+    queued: '排队中',
+    running: '进行中',
+    needsConfirmation: '待确认',
+    completed: '已完成',
+    failed: '失败',
+    cancelled: '已取消',
+  },
+} as const
+
+/** Flat dotted key union derived from the nested `ZH` (e.g. "app.title"). */
+export type CopyKey = LeafKeys<typeof ZH>
+
+type LeafKeys<T> = {
+  [K in keyof T & string]: T[K] extends string ? K : `${K}.${LeafKeys<T[K]>}`
+}[keyof T & string]

package/src/hooks/useAuthGate.ts

@@ -0,0 +1,51 @@
+/**
+ * `@huaqiu/component-gen-app` — auth gate over `ComponentGenPorts.auth`.
+ *
+ * The app only knows the public `@huaqiu/dsh-auth` surface (the host wires it):
+ * read state, subscribe to changes, trigger the existing login flow. It never
+ * implements auth itself.
+ */
+import { useCallback, useEffect, useState } from 'react'
+import type { ComponentGenPorts } from '../ports.js'
+
+export type AuthPhase = 'unknown' | 'authenticated' | 'unauthenticated'
+
+export interface UseAuthGateResult {
+  phase: AuthPhase
+  user: { nickname?: string } | null
+  login: () => void
+  /** re-check immediately (used after login dialog closes). */
+  refresh: () => Promise<void>
+}
+
+export function useAuthGate(ports: ComponentGenPorts): UseAuthGateResult {
+  const [phase, setPhase] = useState<AuthPhase>('unknown')
+  const [user, setUser] = useState<{ nickname?: string } | null>(null)
+
+  const refresh = useCallback(async (): Promise<void> => {
+    try {
+      const ok = await ports.auth.isAuthenticated()
+      setPhase(ok ? 'authenticated' : 'unauthenticated')
+      setUser(ok ? await ports.auth.getUserInfo() : null)
+    } catch {
+      setPhase('unauthenticated')
+      setUser(null)
+    }
+  }, [ports])
+
+  useEffect(() => {
+    void refresh()
+    const unsub = ports.auth.onAuthStateChanged((authenticated) => {
+      setPhase(authenticated ? 'authenticated' : 'unauthenticated')
+      if (authenticated) void ports.auth.getUserInfo().then(setUser)
+      else setUser(null)
+    })
+    return unsub
+  }, [ports, refresh])
+
+  const login = useCallback(() => {
+    void ports.auth.login()
+  }, [ports])
+
+  return { phase, user, login, refresh }
+}