@zseven-w/pen-sdk 0.6.0 → 0.7.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ZSeven—W
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,56 +1,147 @@
 # @zseven-w/pen-sdk
 
-The umbrella SDK for [OpenPencil](https://github.com/nicepkg/openpencil). One import gives you everything — types, document operations, code generation, Figma import, and rendering.
+The umbrella SDK for [OpenPencil](https://github.com/ZSeven-W/openpencil). One import gives you everything — types, document operations, headless engine, React components, code generation, Figma import, and GPU rendering.
 
 ## Install
 
 ```bash
 npm install @zseven-w/pen-sdk
+# or
+bun add @zseven-w/pen-sdk
 ```
 
-## What's Included
+## Overview
+
+`pen-sdk` re-exports all OpenPencil packages through a single entry point. Use it when you want the full stack without managing individual dependencies. For smaller bundles, install only the packages you need.
 
-This package re-exports all OpenPencil packages:
+## What's Included
 
-| Package | Provides |
-|---|---|
-| `@zseven-w/pen-types` | TypeScript types for the document model |
-| `@zseven-w/pen-core` | Tree operations, layout engine, variables, boolean ops |
-| `@zseven-w/pen-codegen` | Code generators (React, HTML, Vue, Svelte, Flutter, SwiftUI, Compose, RN) |
-| `@zseven-w/pen-figma` | Figma `.fig` parser and converter |
-| `@zseven-w/pen-renderer` | CanvasKit/Skia GPU renderer |
+| Package                                     | Provides                                                                            |
+| ------------------------------------------- | ----------------------------------------------------------------------------------- |
+| [`@zseven-w/pen-types`](../pen-types)       | TypeScript types for the document model (`PenDocument`, `PenNode`, `PenFill`, etc.) |
+| [`@zseven-w/pen-core`](../pen-core)         | Tree operations, layout engine, variables, boolean ops, normalization, 3-way merge  |
+| [`@zseven-w/pen-engine`](../pen-engine)     | Headless design engine — document, selection, history, viewport, spatial index      |
+| [`@zseven-w/pen-react`](../pen-react)       | React UI SDK — `DesignProvider`, `DesignCanvas`, 10 hooks, 39 components            |
+| [`@zseven-w/pen-renderer`](../pen-renderer) | CanvasKit/Skia GPU renderer with viewport, hit testing, font/image management       |
+| [`@zseven-w/pen-figma`](../pen-figma)       | Figma `.fig` binary parser and converter                                            |
 
 ## Usage
 
-```ts
+### Build a full editor
+
+```tsx
+import {
+  DesignProvider,
+  DesignCanvas,
+  CoreToolbar,
+  LayerPanel,
+  PropertyPanel,
+  useDocument,
+  useSelection,
+  useHistory,
+} from '@zseven-w/pen-sdk';
+
+function Editor() {
+  return (
+    <DesignProvider initialDocument={myDoc}>
+      <CoreToolbar />
+      <DesignCanvas />
+      <LayerPanel />
+      <PropertyPanel />
+    </DesignProvider>
+  );
+}
+```
+
+### Document operations
+
+```typescript
 import {
-  // Types
   type PenDocument,
   type PenNode,
-
-  // Document operations
   createEmptyDocument,
   findNodeInTree,
   insertNodeInTree,
+  flattenNodes,
   normalizePenDocument,
+  resolveNodeForCanvas,
+} from '@zseven-w/pen-sdk';
+
+const doc = createEmptyDocument();
+const node = findNodeInTree(doc.children, 'header');
+```
+
+### Headless engine (no React)
+
+```typescript
+import { DesignEngine } from '@zseven-w/pen-sdk';
+
+const engine = new DesignEngine();
+engine.loadDocument(doc);
+engine.addNode(null, { type: 'frame', name: 'Page', width: 1200, height: 800 });
+engine.select(['node-1']);
+engine.undo();
+```
+
+### Code generation
 
-  // Code generation
+```typescript
+import {
   generateReactFromDocument,
   generateHTMLFromDocument,
   generateFlutterFromDocument,
+  generateVueFromDocument,
+  generateSvelteFromDocument,
+  generateSwiftUIFromDocument,
+} from '@zseven-w/pen-sdk';
+
+const reactCode = generateReactFromDocument(doc);
+const htmlCode = generateHTMLFromDocument(doc);
+```
 
-  // Figma import
-  parseFigFile,
-  figmaAllPagesToPenDocument,
+### Figma import
 
-  // Rendering
-  loadCanvasKit,
-  PenRenderer,
-} from '@zseven-w/pen-sdk'
+```typescript
+import { parseFigFile, figmaAllPagesToPenDocument, isFigmaClipboardHtml } from '@zseven-w/pen-sdk';
+
+const figFile = parseFigFile(buffer);
+const document = figmaAllPagesToPenDocument(figFile);
 ```
 
-Or install individual packages for smaller bundles — see each package's README for details.
+### GPU rendering (headless)
+
+```typescript
+import { loadCanvasKit, PenRenderer } from '@zseven-w/pen-sdk';
+
+await loadCanvasKit();
+const renderer = new PenRenderer(canvas, document);
+renderer.render();
+```
+
+## Individual Packages
+
+For smaller bundles, install only what you need:
+
+```bash
+# Types only (zero runtime)
+npm install @zseven-w/pen-types
+
+# Document operations (no rendering)
+npm install @zseven-w/pen-core
+
+# Headless engine (no React)
+npm install @zseven-w/pen-engine
+
+# React components
+npm install @zseven-w/pen-react
+
+# GPU renderer
+npm install @zseven-w/pen-renderer canvaskit-wasm
+
+# Figma import
+npm install @zseven-w/pen-figma
+```
 
 ## License
 
-MIT
+[MIT](./LICENSE)

package/package.json

@@ -1,7 +1,24 @@
 {
   "name": "@zseven-w/pen-sdk",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "OpenPencil SDK — parse, manipulate, and generate code from .op design files",
+  "homepage": "https://github.com/ZSeven-W/openpencil/tree/main/packages/pen-sdk",
+  "bugs": {
+    "url": "https://github.com/ZSeven-W/openpencil/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "ZSeven-W",
+    "email": "xkayshen@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ZSeven-W/openpencil.git",
+    "directory": "packages/pen-sdk"
+  },
+  "files": [
+    "src"
+  ],
   "type": "module",
   "exports": {
     ".": {
@@ -9,18 +26,16 @@
       "import": "./src/index.ts"
     }
   },
-  "files": [
-    "src"
-  ],
   "scripts": {
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@zseven-w/pen-types": "0.6.0",
-    "@zseven-w/pen-core": "0.6.0",
-    "@zseven-w/pen-codegen": "0.6.0",
-    "@zseven-w/pen-figma": "0.6.0",
-    "@zseven-w/pen-renderer": "0.6.0"
+    "@zseven-w/pen-core": "0.7.1",
+    "@zseven-w/pen-engine": "0.7.1",
+    "@zseven-w/pen-figma": "0.7.1",
+    "@zseven-w/pen-react": "0.7.1",
+    "@zseven-w/pen-renderer": "0.7.1",
+    "@zseven-w/pen-types": "0.7.1"
   },
   "devDependencies": {
     "typescript": "^5.7.2"

package/src/index.ts

@@ -10,7 +10,6 @@
  *   type PenDocument,
  *   createEmptyDocument,
  *   normalizePenDocument,
- *   generateReactFromDocument,
  *   parseFigFile,
  * } from '@zseven-w/pen-sdk'
  * ```
@@ -65,7 +64,7 @@ export type {
   // Theme presets
   ThemePreset,
   ThemePresetFile,
-} from '@zseven-w/pen-types'
+} from '@zseven-w/pen-types';
 
 // ── Core: Document operations ──────────────────────────────────────────
 export {
@@ -121,38 +120,28 @@ export {
   type BooleanOpType,
   canBooleanOp,
   executeBooleanOp,
-} from '@zseven-w/pen-core'
+} from '@zseven-w/pen-core';
 
-// ── Codegen: Multi-platform code generation ────────────────────────────
-export {
-  // CSS Variables
-  variableNameToCSS,
-  generateCSSVariables,
-  // React + Tailwind
-  generateReactCode,
-  generateReactFromDocument,
-  // HTML + CSS
-  generateHTMLCode,
-  generateHTMLFromDocument,
-  // Vue 3
-  generateVueCode,
-  generateVueFromDocument,
-  // Svelte
-  generateSvelteCode,
-  generateSvelteFromDocument,
-  // Flutter
-  generateFlutterCode,
-  generateFlutterFromDocument,
-  // SwiftUI
-  generateSwiftUICode,
-  generateSwiftUIFromDocument,
-  // Android Compose
-  generateComposeCode,
-  generateComposeFromDocument,
-  // React Native
-  generateReactNativeCode,
-  generateReactNativeFromDocument,
-} from '@zseven-w/pen-codegen'
+// ── Codegen types (from pen-types) ──────────────────────────────────────
+export type {
+  Framework,
+  PlannedChunk,
+  CodePlanFromAI,
+  ExecutableChunk,
+  CodeExecutionPlan,
+  ChunkContract,
+  PropDef,
+  SlotDef,
+  ImportDef,
+  ChunkResult,
+  ChunkStatus,
+  CodeGenProgress,
+  ContractValidationResult,
+  NodeSnapshot,
+  ExecutableChunkPayload,
+  ResolvedDepContract,
+} from '@zseven-w/pen-types';
+export { FRAMEWORKS } from '@zseven-w/pen-types';
 
 // ── Figma: .fig file import ────────────────────────────────────────────
 export {
@@ -168,7 +157,30 @@ export {
   setIconLookup,
   type FigmaDecodedFile,
   type FigmaImportLayoutMode,
-} from '@zseven-w/pen-figma'
+} from '@zseven-w/pen-figma';
+
+// ── Engine: Headless design engine ────────────────────────────────────
+export {
+  DesignEngine,
+  TypedEventEmitter,
+  HistoryManager,
+  DocumentManager,
+  SelectionManager,
+  PageManager,
+  VariableManager,
+  ViewportController,
+  EngineSpatialIndex,
+  createNodeForTool,
+  isDrawingTool,
+  parseSvgToNodes,
+  type DesignEngineOptions,
+  type DesignEngineEvents,
+  type CodePlatform,
+  type CodeResult,
+} from '@zseven-w/pen-engine';
+
+// ── React: React hooks and components ─────────────────────────────────
+export * from '@zseven-w/pen-react';
 
 // ── Renderer: CanvasKit/Skia rendering engine ────────────────────────
 export {
@@ -192,4 +204,4 @@ export {
   type RenderNode,
   type PenRendererOptions,
   type IconLookupFn,
-} from '@zseven-w/pen-renderer'
+} from '@zseven-w/pen-renderer';