openpencil/scripts/electron-dev.ts
Kayshen Xu a671c38785
V0.3.1 (#25)
* feat(mcp): enhance document management and design tools

- Updated `openDocument` to always re-fetch the live canvas, ensuring user edits are captured.
- Introduced new tools: `get_design_prompt` for retrieving design guidelines and `batch_design` for executing multiple design operations using a DSL.
- Improved `handleInsertNode` and `handleUpdateNode` to include validation for node data and return the final node state after operations.
- Enhanced design prompt with detailed PenNode schema and layout rules for better AI-generated designs.
- Added validation functions to ensure node data integrity during CRUD operations.
- Updated `handleOpenDocument` to provide context-aware design prompts based on document content.

* feat(electron): enhance build configuration and auto-update functionality

- Updated `electron-builder.yml` to include artifact naming conventions for Windows and Linux builds.
- Enhanced NSIS installer settings to create desktop and start menu shortcuts.
- Improved path handling for GUI applications on Windows to ensure proper environment variable inheritance.
- Refactored auto-update logic in `main.ts` to streamline update checks and improve error handling.
- Added new IPC handlers for managing pending file paths and improved file handling during application startup.
- Updated `use-electron-menu` hook to handle additional menu structures and improve document loading logic.

* chore: bump version to 0.3.1 and update project description

- Updated version in package.json to 0.3.1.
- Enhanced project description to highlight OpenPencil as the world's first open-source AI-native vector design tool featuring concurrent Agent Teams and Design-as-Code capabilities.
- Refactored auto-updater to utilize constants for GitHub repository details, improving maintainability.
- Introduced a new constants file to centralize shared values for the Electron application, enhancing code clarity and reducing duplication.
- Updated various components to use new constants for port file handling and window dimensions, ensuring consistency across the application.

* feat(ai): clarify mobile design guidelines and mockup usage

- Updated design guidelines to emphasize that "mobile" requests should generate actual mobile-sized screens (375x812) instead of desktop mockups.
- Added critical notes regarding the use of phone mockups, specifying they should only be used for marketing showcases and not for functional mobile screens.
- Enhanced clarity on sizing and layout rules for mobile and web designs to ensure consistent application of design principles.

* fix(canvas): improve text centering, layout inference, and Pencil format rendering

- Resolve fit-content parent dimensions in computeLayoutPositions instead of
  using 0 (which caused negative available space and broken child positioning)
- Reduce text width estimation minimum from 20px to 1px to fix centering of
  narrow single-character text in fixed-size centered frames
- Add inferLayout() to detect padding-only frames as layout containers, so
  padding offsets are applied to children (fixes badge text ignoring padding)
- Use Fabric's fontSize * 1.13 for single-line text height in centering
  calculations instead of fontSize * lineHeight
- Add fontWeight propagation to text width/height estimation functions
- Refine defaultLineHeight() tiers for better Pencil format compatibility
- Support Pencil's singular `effect` property alongside `effects` array
- Handle plain color strings in fill/stroke resolution for Pencil format
- Add directional stroke rendering as synthetic border rectangles
- Add icon_font node type rendering via lookupIconByName
- Fix z-order reconciliation to use fresh canvas object map after text recreation
- Fix canvas initialization race: defer reference tracking until canvas is ready
- Resolve $variable references with circular reference guards

* feat(types): add icon_font node type with panel and store support

- Add IconFontNode type to pen.ts for icon_font nodes storing iconFontName
- Extend property panel and icon section to recognize icon_font nodes
- Add icon_font type icon in layer panel
- Support icon_font in document tree utilities

* feat(ai): improve design generation accuracy and validation

- Add pre-validation pass to fix text with explicit pixel height to fit_content
- Enhance validation tree dump with textGrowth and lineHeight fields
- Update orchestrator prompts with structural patterns from Pencil analysis
- Simplify role-resolver defaults to match Pencil conventions
- Only force textGrowth=fixed-width on text >15 chars in streaming insertion

* feat(ai): optimize generation pipeline and fix streaming layout

- Disable LLM validation layer (pre-validation heuristics still run)
- Remove visual-ref pipeline (3 fewer LLM calls per generation)
- Compress sub-agent prompt and design principles (~70% smaller)
- Remove width>480 guards so mobile gets root frame height expansion
- Add gap field to orchestrator rootFrame format and guidance
- Default icon_font nodes to lucide family in generation heuristics

* feat(ai): load full Lucide icon set and default icon_font to lucide

- Load all 1,729 Lucide icons as primary set (replaces 286 hand-picked)
- Keep Feather as fallback for unmatched names
- Default iconFontFamily to 'lucide' during .pen file normalization

* feat(codegen): add icon_font support to all 8 code generators

Output Lucide icon references instead of 'Unknown node' comments.
React/RN use component syntax, HTML/Vue/Svelte use data-lucide,
Flutter/SwiftUI/Compose use framework-native icon APIs.

* feat(panels): replace product card quick action with food app homepage

* feat(electron): implement preferences management and app storage abstraction

- Introduced a new preferences management system in Electron, replacing localStorage with a JSON-based preferences file.
- Added IPC handlers for getting, setting, and removing preferences, ensuring data persistence across sessions.
- Created an app storage utility to provide a consistent API for accessing preferences in both Electron and web environments.
- Updated various components and stores to utilize the new app storage system for improved data handling and synchronization.
- Enhanced the initialization process to load preferences at startup, ensuring a seamless user experience.

---------

Co-authored-by: Fini <fini.yang@gmail.com>
2026-03-09 22:02:43 +08:00

124 lines
3.3 KiB
TypeScript

/**
* Electron development workflow orchestrator.
*
* 1. Start Vite dev server (bun run dev)
* 2. Wait for it to be ready on port 3000
* 3. Compile electron/ with esbuild
* 4. Launch Electron pointing at the dev server
*/
import { spawn, execSync, type ChildProcess } from 'node:child_process'
import { build } from 'esbuild'
import { join } from 'node:path'
const ROOT = join(import.meta.dirname, '..')
const VITE_DEV_PORT = 3000
// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
async function waitForServer(
url: string,
timeoutMs = 30_000,
): Promise<void> {
const start = Date.now()
while (Date.now() - start < timeoutMs) {
try {
const res = await fetch(url)
if (res.ok || res.status < 500) return
} catch {
// server not ready yet
}
await new Promise((r) => setTimeout(r, 500))
}
throw new Error(`Timeout waiting for ${url}`)
}
async function compileElectron(): Promise<void> {
const common: Parameters<typeof build>[0] = {
platform: 'node',
bundle: true,
sourcemap: true,
external: ['electron'],
target: 'node20',
outdir: join(ROOT, 'electron-dist'),
outExtension: { '.js': '.cjs' },
format: 'cjs' as const,
}
await Promise.all([
build({
...common,
entryPoints: [join(ROOT, 'electron', 'main.ts')],
}),
build({
...common,
entryPoints: [join(ROOT, 'electron', 'preload.ts')],
}),
])
console.log('[electron-dev] Electron files compiled')
}
// ---------------------------------------------------------------------------
// Main
// ---------------------------------------------------------------------------
async function main(): Promise<void> {
// 1. Start Vite dev server
console.log('[electron-dev] Starting Vite dev server...')
const vite = spawn('bun', ['--bun', 'run', 'dev'], {
cwd: ROOT,
stdio: 'inherit',
env: { ...process.env },
})
// Ensure cleanup on exit
const cleanup = () => {
if (process.platform === 'win32' && vite.pid) {
// SIGTERM is unreliable on Windows; use taskkill for proper tree-kill
try {
execSync(`taskkill /pid ${vite.pid} /T /F`, { stdio: 'ignore' })
} catch { /* ignore */ }
} else {
vite.kill()
}
process.exit()
}
process.on('SIGINT', cleanup)
process.on('SIGTERM', cleanup)
// 2. Wait for Vite to be ready
console.log(`[electron-dev] Waiting for Vite on port ${VITE_DEV_PORT}...`)
await waitForServer(`http://localhost:${VITE_DEV_PORT}`)
console.log('[electron-dev] Vite is ready')
// 3. Compile Electron files
await compileElectron()
// 4. Launch Electron
console.log('[electron-dev] Starting Electron...')
const electronBin = join(ROOT, 'node_modules', '.bin', 'electron')
const electron = spawn(electronBin, [join(ROOT, 'electron-dist', 'main.cjs')], {
cwd: ROOT,
stdio: 'inherit',
env: { ...process.env },
}) as ChildProcess
electron.on('exit', () => {
if (process.platform === 'win32' && vite.pid) {
try {
execSync(`taskkill /pid ${vite.pid} /T /F`, { stdio: 'ignore' })
} catch { /* ignore */ }
} else {
vite.kill()
}
process.exit()
})
}
main().catch((err) => {
console.error(err)
process.exit(1)
})