@zseven-w/pen-types 0.5.2 → 0.7.0

package/README.md

@@ -23,7 +23,7 @@ This package provides all TypeScript types and interfaces for the OpenPencil des
 ## Usage
 
 ```ts
-import type { PenDocument, PenNode, FrameNode } from '@zseven-w/pen-types'
+import type { PenDocument, PenNode, FrameNode } from '@zseven-w/pen-types';
 ```
 
 ## License

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@zseven-w/pen-types",
-  "version": "0.5.2",
+  "version": "0.7.0",
   "description": "Type definitions for OpenPencil document model",
+  "files": [
+    "src"
+  ],
   "type": "module",
   "exports": {
     ".": {
@@ -9,9 +12,6 @@
       "import": "./src/index.ts"
     }
   },
-  "files": [
-    "src"
-  ],
   "scripts": {
     "typecheck": "tsc --noEmit"
   },

package/src/__tests__/codegen.test.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+import { FRAMEWORKS } from '../codegen';
+import type { NodeSnapshot, ResolvedDepContract } from '../codegen';
+
+describe('codegen types', () => {
+  it('FRAMEWORKS contains all 8 frameworks', () => {
+    expect(FRAMEWORKS).toHaveLength(8);
+    expect(FRAMEWORKS).toContain('react');
+    expect(FRAMEWORKS).toContain('flutter');
+  });
+
+  it('NodeSnapshot allows truncated children', () => {
+    const snapshot: NodeSnapshot = {
+      id: 'n1',
+      type: 'frame',
+      name: 'Test',
+      children: '...',
+    } as NodeSnapshot;
+    expect(snapshot.children).toBe('...');
+  });
+
+  it('NodeSnapshot allows nested snapshots', () => {
+    const snapshot: NodeSnapshot = {
+      id: 'n1',
+      type: 'frame',
+      name: 'Parent',
+      children: [{ id: 'n2', type: 'rectangle', name: 'Child' } as NodeSnapshot],
+    } as NodeSnapshot;
+    expect(Array.isArray(snapshot.children)).toBe(true);
+  });
+
+  it('ResolvedDepContract allows null', () => {
+    const resolved: ResolvedDepContract = null;
+    expect(resolved).toBeNull();
+  });
+});

package/src/canvas.ts

@@ -7,25 +7,25 @@ export type ToolType =
   | 'polygon'
   | 'path'
   | 'text'
-  | 'hand'
+  | 'hand';
 
 export interface ViewportState {
-  zoom: number
-  panX: number
-  panY: number
+  zoom: number;
+  panX: number;
+  panY: number;
 }
 
 export interface SelectionState {
-  selectedIds: string[]
-  activeId: string | null
-  hoveredId: string | null
-  enteredFrameId: string | null
-  enteredFrameStack: string[]
+  selectedIds: string[];
+  activeId: string | null;
+  hoveredId: string | null;
+  enteredFrameId: string | null;
+  enteredFrameStack: string[];
 }
 
 export interface CanvasInteraction {
-  isDrawing: boolean
-  isPanning: boolean
-  isDragging: boolean
-  drawStartPoint: { x: number; y: number } | null
+  isDrawing: boolean;
+  isPanning: boolean;
+  isDragging: boolean;
+  drawStartPoint: { x: number; y: number } | null;
 }

package/src/codegen.ts

@@ -0,0 +1,147 @@
+import type { PenNode } from './pen.js';
+
+// === Canonical framework type ===
+
+export type Framework =
+  | 'react'
+  | 'vue'
+  | 'svelte'
+  | 'html'
+  | 'flutter'
+  | 'swiftui'
+  | 'compose'
+  | 'react-native';
+
+export const FRAMEWORKS: Framework[] = [
+  'react',
+  'vue',
+  'svelte',
+  'html',
+  'flutter',
+  'swiftui',
+  'compose',
+  'react-native',
+];
+
+// === Step 1 output: AI planner returns this (no node data, minimal tokens) ===
+
+export interface PlannedChunk {
+  id: string;
+  name: string;
+  nodeIds: string[];
+  role: string;
+  suggestedComponentName: string;
+  dependencies: string[];
+  exposedSlots?: string[];
+}
+
+export interface CodePlanFromAI {
+  chunks: PlannedChunk[];
+  sharedStyles: { name: string; description: string }[];
+  rootLayout: { direction: string; gap: number; responsive: boolean };
+}
+
+// === Runtime: hydrated with node data + execution order ===
+
+export interface ExecutableChunk extends PlannedChunk {
+  nodes: PenNode[];
+  order: number;
+  depContracts: ChunkContract[];
+}
+
+export interface CodeExecutionPlan {
+  chunks: ExecutableChunk[];
+  sharedStyles: { name: string; description: string }[];
+  rootLayout: { direction: string; gap: number; responsive: boolean };
+}
+
+// === Chunk contract: structured metadata output from each chunk ===
+
+export interface ChunkContract {
+  chunkId: string;
+  componentName: string;
+  exportedProps: PropDef[];
+  slots: SlotDef[];
+  cssClasses: string[];
+  cssVariables: string[];
+  imports: ImportDef[];
+}
+
+export interface PropDef {
+  name: string;
+  type: string;
+  required: boolean;
+}
+
+export interface SlotDef {
+  name: string;
+  description: string;
+}
+
+export interface ImportDef {
+  source: string;
+  specifiers: string[];
+}
+
+// === Chunk generation output ===
+
+export interface ChunkResult {
+  chunkId: string;
+  code: string;
+  contract: ChunkContract;
+}
+
+// === Progress events ===
+
+export type ChunkStatus = 'pending' | 'running' | 'done' | 'degraded' | 'failed' | 'skipped';
+
+export type CodeGenProgress =
+  | {
+      step: 'planning';
+      status: 'running' | 'done' | 'failed';
+      plan?: CodePlanFromAI;
+      error?: string;
+    }
+  | {
+      step: 'chunk';
+      chunkId: string;
+      name: string;
+      status: ChunkStatus;
+      result?: ChunkResult;
+      error?: string;
+    }
+  | { step: 'assembly'; status: 'running' | 'done' | 'failed'; error?: string }
+  | { step: 'complete'; finalCode: string; degraded: boolean }
+  | { step: 'error'; message: string; chunkId?: string };
+
+// === Contract validation ===
+
+export interface ContractValidationResult {
+  valid: boolean;
+  issues: string[];
+}
+
+// === Wire DTO types (MCP/CLI responses) ===
+
+/**
+ * Depth-limited node snapshot for wire transfer.
+ * When depth is exhausted, `children` is the string `"..."` instead of NodeSnapshot[].
+ */
+export type NodeSnapshot = Omit<PenNode, 'children'> & {
+  children?: NodeSnapshot[] | '...';
+};
+
+/**
+ * Hydrated chunk payload returned by codegen_plan and codegen_submit_chunk.
+ * Uses NodeSnapshot (depth-limited) instead of PenNode[].
+ * depContracts entries may be null when a dependency chunk failed/was skipped.
+ */
+export interface ExecutableChunkPayload extends Omit<ExecutableChunk, 'nodes' | 'depContracts'> {
+  nodes: NodeSnapshot[];
+  depContracts: ResolvedDepContract[];
+}
+
+/**
+ * A dependency contract that may be absent if the upstream chunk failed or was skipped.
+ */
+export type ResolvedDepContract = ChunkContract | null;

package/src/design-md.ts

@@ -1,24 +1,24 @@
 export interface DesignMdSpec {
   /** Original markdown source (for round-trip fidelity) */
-  raw: string
-  projectName?: string
-  visualTheme?: string
-  colorPalette?: DesignMdColor[]
-  typography?: DesignMdTypography
-  componentStyles?: string
-  layoutPrinciples?: string
-  generationNotes?: string
+  raw: string;
+  projectName?: string;
+  visualTheme?: string;
+  colorPalette?: DesignMdColor[];
+  typography?: DesignMdTypography;
+  componentStyles?: string;
+  layoutPrinciples?: string;
+  generationNotes?: string;
 }
 
 export interface DesignMdColor {
-  name: string
-  hex: string
-  role: string
+  name: string;
+  hex: string;
+  role: string;
 }
 
 export interface DesignMdTypography {
-  fontFamily?: string
-  headings?: string
-  body?: string
-  scale?: string
+  fontFamily?: string;
+  headings?: string;
+  body?: string;
+  scale?: string;
 }

package/src/engine.ts

@@ -0,0 +1,116 @@
+import type { PenDocument } from './pen.js';
+import type { ViewportState, ToolType } from './canvas.js';
+
+// ---------------------------------------------------------------------------
+// Engine Options
+// ---------------------------------------------------------------------------
+
+export interface DesignEngineOptions {
+  /** URL pattern for CanvasKit WASM files. */
+  canvasKitPath?: string | ((file: string) => string);
+  /** Base URL for bundled font files. */
+  fontBasePath?: string;
+  /** Custom Google Fonts CSS endpoint. */
+  googleFontsCssUrl?: string;
+  /** Icon lookup function for resolving icon names to SVG path data. */
+  iconLookup?: IconLookupFn;
+  /** Canvas background color. Default: '#1a1a1a' */
+  backgroundColor?: string;
+  /** Device pixel ratio override. */
+  devicePixelRatio?: number;
+  /** Maximum undo/redo history states. Default: 300 */
+  maxHistoryStates?: number;
+}
+
+// ---------------------------------------------------------------------------
+// Engine Events
+// ---------------------------------------------------------------------------
+
+export interface DesignEngineEvents {
+  /** Fired after document mutation (batch-aware: only once per batch). Payload is immutable ref. */
+  'document:change': (doc: PenDocument) => void;
+  'selection:change': (ids: string[]) => void;
+  'viewport:change': (state: ViewportState) => void;
+  'tool:change': (tool: ToolType) => void;
+  'history:change': (state: { canUndo: boolean; canRedo: boolean }) => void;
+  'node:hover': (id: string | null) => void;
+  'page:change': (pageId: string) => void;
+  /** Fired after canvas re-render (browser adapter only). */
+  render: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Code Generation
+// ---------------------------------------------------------------------------
+
+export type CodePlatform =
+  | 'react'
+  | 'html'
+  | 'css'
+  | 'vue'
+  | 'svelte'
+  | 'flutter'
+  | 'swiftui'
+  | 'compose'
+  | 'react-native';
+
+/** Structured code generation result. */
+export interface CodeResult {
+  files: Array<{ filename: string; content: string; language: string }>;
+  /** CSS variables block if the document uses design variables. */
+  variables?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Icon Lookup
+// ---------------------------------------------------------------------------
+
+/** Injectable icon lookup function for resolving icon names to SVG path data. */
+export interface IconLookupFn {
+  (name: string): { d: string; iconId: string; style: 'stroke' | 'fill' } | null;
+}
+
+// ---------------------------------------------------------------------------
+// Canvas Interaction Types
+// ---------------------------------------------------------------------------
+
+export interface TextEditState {
+  nodeId: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  content: string;
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: number;
+  textAlign: string;
+  color: string;
+  lineHeight: number;
+}
+
+export interface AgentIndicatorEntry {
+  nodeId: string;
+  color: string;
+  name: string;
+}
+
+export interface AgentFrameEntry {
+  frameId: string;
+  color: string;
+  name: string;
+}
+
+export interface InsertionIndicator {
+  x: number;
+  y: number;
+  length: number;
+  orientation: 'horizontal' | 'vertical';
+}
+
+export interface ContainerHighlight {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}

package/src/index.ts

@@ -12,22 +12,13 @@ export type {
   ShadowEffect,
   PenEffect,
   StyledTextSegment,
-} from './styles.js'
+} from './styles.js';
 
 // Variables
-export type {
-  VariableDefinition,
-  VariableValue,
-  ThemedValue,
-} from './variables.js'
+export type { VariableDefinition, VariableValue, ThemedValue } from './variables.js';
 
 // Canvas
-export type {
-  ToolType,
-  ViewportState,
-  SelectionState,
-  CanvasInteraction,
-} from './canvas.js'
+export type { ToolType, ViewportState, SelectionState, CanvasInteraction } from './canvas.js';
 
 // Document model
 export type {
@@ -43,6 +34,9 @@ export type {
   EllipseNode,
   LineNode,
   PolygonNode,
+  PenPathHandle,
+  PenPathAnchor,
+  PenPathPointType,
   PathNode,
   TextNode,
   ImageFitMode,
@@ -50,24 +44,51 @@ export type {
   IconFontNode,
   RefNode,
   PenNode,
-} from './pen.js'
+} from './pen.js';
 
 // UIKit
-export type {
-  ComponentCategory,
-  KitComponent,
-  UIKit,
-} from './uikit.js'
+export type { ComponentCategory, KitComponent, UIKit } from './uikit.js';
 
 // Theme presets
-export type {
-  ThemePreset,
-  ThemePresetFile,
-} from './theme-preset.js'
+export type { ThemePreset, ThemePresetFile } from './theme-preset.js';
 
 // Design.md
+export type { DesignMdSpec, DesignMdColor, DesignMdTypography } from './design-md.js';
+
+// Layout
+export type { Padding } from './layout.js';
+
+// Engine
+export type {
+  DesignEngineOptions,
+  DesignEngineEvents,
+  CodePlatform,
+  CodeResult,
+  TextEditState,
+  AgentIndicatorEntry,
+  AgentFrameEntry,
+  InsertionIndicator,
+  ContainerHighlight,
+  IconLookupFn,
+} from './engine.js';
+
+// Codegen
 export type {
-  DesignMdSpec,
-  DesignMdColor,
-  DesignMdTypography,
-} from './design-md.js'
+  Framework,
+  PlannedChunk,
+  CodePlanFromAI,
+  ExecutableChunk,
+  CodeExecutionPlan,
+  ChunkContract,
+  PropDef,
+  SlotDef,
+  ImportDef,
+  ChunkResult,
+  ChunkStatus,
+  CodeGenProgress,
+  ContractValidationResult,
+  NodeSnapshot,
+  ExecutableChunkPayload,
+  ResolvedDepContract,
+} from './codegen.js';
+export { FRAMEWORKS } from './codegen.js';

package/src/layout.ts

@@ -0,0 +1,6 @@
+export interface Padding {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}

package/src/pen.ts

@@ -1,28 +1,23 @@
-import type {
-  PenFill,
-  PenStroke,
-  PenEffect,
-  StyledTextSegment,
-} from './styles.js'
-import type { VariableDefinition } from './variables.js'
+import type { PenFill, PenStroke, PenEffect, StyledTextSegment } from './styles.js';
+import type { VariableDefinition } from './variables.js';
 
 // --- Page ---
 
 export interface PenPage {
-  id: string
-  name: string
-  children: PenNode[]
+  id: string;
+  name: string;
+  children: PenNode[];
 }
 
 // --- Document Root ---
 
 export interface PenDocument {
-  version: string
-  name?: string
-  themes?: Record<string, string[]>
-  variables?: Record<string, VariableDefinition>
-  pages?: PenPage[]
-  children: PenNode[]
+  version: string;
+  name?: string;
+  themes?: Record<string, string[]>;
+  variables?: Record<string, VariableDefinition>;
+  pages?: PenPage[];
+  children: PenNode[];
 }
 
 // --- Node Types ---
@@ -38,171 +33,179 @@ export type PenNodeType =
   | 'text'
   | 'image'
   | 'icon_font'
-  | 'ref'
+  | 'ref';
 
-export type SizingBehavior = number | 'fit_content' | 'fill_container' | string
+export type SizingBehavior = number | 'fit_content' | 'fill_container' | string;
 
 // --- Base ---
 
 export interface PenNodeBase {
-  id: string
-  type: PenNodeType
-  name?: string
-  role?: string // semantic role for AI generation ("button", "card", "heading", etc.)
-  x?: number
-  y?: number
-  rotation?: number
-  opacity?: number | string // number or $variable
-  enabled?: boolean | string
-  visible?: boolean // default true
-  locked?: boolean // default false
-  flipX?: boolean
-  flipY?: boolean
-  theme?: Record<string, string>
+  id: string;
+  type: PenNodeType;
+  name?: string;
+  role?: string; // semantic role for AI generation ("button", "card", "heading", etc.)
+  x?: number;
+  y?: number;
+  rotation?: number;
+  opacity?: number | string; // number or $variable
+  enabled?: boolean | string;
+  visible?: boolean; // default true
+  locked?: boolean; // default false
+  flipX?: boolean;
+  flipY?: boolean;
+  theme?: Record<string, string>;
 }
 
 // --- Container (shared layout props) ---
 
 export interface ContainerProps {
-  width?: SizingBehavior
-  height?: SizingBehavior
-  layout?: 'none' | 'vertical' | 'horizontal'
-  gap?: number | string
-  padding?:
-    | number
-    | [number, number]
-    | [number, number, number, number]
-    | string
-  justifyContent?:
-    | 'start'
-    | 'center'
-    | 'end'
-    | 'space_between'
-    | 'space_around'
-  alignItems?: 'start' | 'center' | 'end'
-  clipContent?: boolean
-  children?: PenNode[]
-  cornerRadius?: number | [number, number, number, number]
-  fill?: PenFill[]
-  stroke?: PenStroke
-  effects?: PenEffect[]
+  width?: SizingBehavior;
+  height?: SizingBehavior;
+  layout?: 'none' | 'vertical' | 'horizontal';
+  gap?: number | string;
+  padding?: number | [number, number] | [number, number, number, number] | string;
+  justifyContent?: 'start' | 'center' | 'end' | 'space_between' | 'space_around';
+  alignItems?: 'start' | 'center' | 'end';
+  clipContent?: boolean;
+  children?: PenNode[];
+  cornerRadius?: number | [number, number, number, number];
+  fill?: PenFill[];
+  stroke?: PenStroke;
+  effects?: PenEffect[];
 }
 
 // --- Concrete Nodes ---
 
 export interface FrameNode extends PenNodeBase, ContainerProps {
-  type: 'frame'
-  reusable?: boolean
-  slot?: string[]
+  type: 'frame';
+  reusable?: boolean;
+  slot?: string[];
 }
 
 export interface GroupNode extends PenNodeBase, ContainerProps {
-  type: 'group'
+  type: 'group';
 }
 
 export interface RectangleNode extends PenNodeBase, ContainerProps {
-  type: 'rectangle'
+  type: 'rectangle';
 }
 
 export interface EllipseNode extends PenNodeBase {
-  type: 'ellipse'
-  width?: SizingBehavior
-  height?: SizingBehavior
-  cornerRadius?: number
-  innerRadius?: number
-  startAngle?: number
-  sweepAngle?: number
-  fill?: PenFill[]
-  stroke?: PenStroke
-  effects?: PenEffect[]
+  type: 'ellipse';
+  width?: SizingBehavior;
+  height?: SizingBehavior;
+  cornerRadius?: number;
+  innerRadius?: number;
+  startAngle?: number;
+  sweepAngle?: number;
+  fill?: PenFill[];
+  stroke?: PenStroke;
+  effects?: PenEffect[];
 }
 
 export interface LineNode extends PenNodeBase {
-  type: 'line'
-  x2?: number
-  y2?: number
-  stroke?: PenStroke
-  effects?: PenEffect[]
+  type: 'line';
+  x2?: number;
+  y2?: number;
+  stroke?: PenStroke;
+  effects?: PenEffect[];
 }
 
 export interface PolygonNode extends PenNodeBase {
-  type: 'polygon'
-  polygonCount: number
-  width?: SizingBehavior
-  height?: SizingBehavior
-  cornerRadius?: number
-  fill?: PenFill[]
-  stroke?: PenStroke
-  effects?: PenEffect[]
+  type: 'polygon';
+  polygonCount: number;
+  width?: SizingBehavior;
+  height?: SizingBehavior;
+  cornerRadius?: number;
+  fill?: PenFill[];
+  stroke?: PenStroke;
+  effects?: PenEffect[];
+}
+
+export interface PenPathHandle {
+  x: number;
+  y: number;
+}
+
+export type PenPathPointType = 'corner' | 'mirrored' | 'independent';
+
+export interface PenPathAnchor {
+  x: number;
+  y: number;
+  handleIn: PenPathHandle | null;
+  handleOut: PenPathHandle | null;
+  pointType?: PenPathPointType;
 }
 
 export interface PathNode extends PenNodeBase {
-  type: 'path'
-  iconId?: string // Iconify icon ID, e.g. "lucide:home"
-  d: string
-  width?: SizingBehavior
-  height?: SizingBehavior
-  fill?: PenFill[]
-  stroke?: PenStroke
-  effects?: PenEffect[]
+  type: 'path';
+  iconId?: string; // Iconify icon ID, e.g. "lucide:home"
+  d: string;
+  anchors?: PenPathAnchor[];
+  closed?: boolean;
+  width?: SizingBehavior;
+  height?: SizingBehavior;
+  fill?: PenFill[];
+  stroke?: PenStroke;
+  effects?: PenEffect[];
 }
 
 export interface TextNode extends PenNodeBase {
-  type: 'text'
-  width?: SizingBehavior
-  height?: SizingBehavior
-  content: string | StyledTextSegment[]
-  fontFamily?: string
-  fontSize?: number
-  fontWeight?: number | string
-  fontStyle?: 'normal' | 'italic'
-  letterSpacing?: number
-  lineHeight?: number
-  textAlign?: 'left' | 'center' | 'right' | 'justify'
-  textAlignVertical?: 'top' | 'middle' | 'bottom'
-  textGrowth?: 'auto' | 'fixed-width' | 'fixed-width-height'
-  underline?: boolean
-  strikethrough?: boolean
-  fill?: PenFill[]
-  effects?: PenEffect[]
-}
-
-export type ImageFitMode = 'fill' | 'fit' | 'crop' | 'tile'
+  type: 'text';
+  width?: SizingBehavior;
+  height?: SizingBehavior;
+  content: string | StyledTextSegment[];
+  fontFamily?: string;
+  fontSize?: number;
+  fontWeight?: number | string;
+  fontStyle?: 'normal' | 'italic';
+  letterSpacing?: number;
+  lineHeight?: number;
+  textAlign?: 'left' | 'center' | 'right' | 'justify';
+  textAlignVertical?: 'top' | 'middle' | 'bottom';
+  textGrowth?: 'auto' | 'fixed-width' | 'fixed-width-height';
+  underline?: boolean;
+  strikethrough?: boolean;
+  fill?: PenFill[];
+  effects?: PenEffect[];
+}
+
+export type ImageFitMode = 'fill' | 'fit' | 'crop' | 'tile';
 
 export interface ImageNode extends PenNodeBase {
-  type: 'image'
-  src: string
-  objectFit?: ImageFitMode
-  width?: SizingBehavior
-  height?: SizingBehavior
-  cornerRadius?: number | [number, number, number, number]
-  effects?: PenEffect[]
-  exposure?: number    // -100 to 100
-  contrast?: number    // -100 to 100
-  saturation?: number  // -100 to 100
-  temperature?: number // -100 to 100
-  tint?: number        // -100 to 100
-  highlights?: number  // -100 to 100
-  shadows?: number     // -100 to 100
-  imagePrompt?: string       // Descriptive prompt for AI image generation (long)
-  imageSearchQuery?: string  // Short keywords for image search (e.g. "burger fries")
+  type: 'image';
+  src: string;
+  objectFit?: ImageFitMode;
+  width?: SizingBehavior;
+  height?: SizingBehavior;
+  cornerRadius?: number | [number, number, number, number];
+  effects?: PenEffect[];
+  exposure?: number; // -100 to 100
+  contrast?: number; // -100 to 100
+  saturation?: number; // -100 to 100
+  temperature?: number; // -100 to 100
+  tint?: number; // -100 to 100
+  highlights?: number; // -100 to 100
+  shadows?: number; // -100 to 100
+  imagePrompt?: string; // Descriptive prompt for AI image generation (long)
+  imageSearchQuery?: string; // Short keywords for image search (e.g. "burger fries")
 }
 
 export interface IconFontNode extends PenNodeBase {
-  type: 'icon_font'
-  iconFontName: string
-  iconFontFamily?: string
-  width?: SizingBehavior
-  height?: SizingBehavior
-  fill?: PenFill[]
-  stroke?: PenStroke
+  type: 'icon_font';
+  iconFontName: string;
+  iconFontFamily?: string;
+  width?: SizingBehavior;
+  height?: SizingBehavior;
+  fill?: PenFill[];
+  stroke?: PenStroke;
 }
 
 export interface RefNode extends PenNodeBase {
-  type: 'ref'
-  ref: string
-  descendants?: Record<string, Partial<PenNode>>
-  children?: PenNode[]
+  type: 'ref';
+  ref: string;
+  descendants?: Record<string, Partial<PenNode>>;
+  children?: PenNode[];
 }
 
 // --- Union ---
@@ -218,4 +221,4 @@ export type PenNode =
   | TextNode
   | ImageNode
   | IconFontNode
-  | RefNode
+  | RefNode;

package/src/styles.ts

@@ -9,100 +9,97 @@ export type BlendMode =
   | 'hue'
   | 'saturation'
   | 'color'
-  | 'luminosity'
+  | 'luminosity';
 
 // --- Fill Types ---
 
 export interface SolidFill {
-  type: 'solid'
-  color: string // #RRGGBB or #RRGGBBAA
-  opacity?: number
-  blendMode?: BlendMode
+  type: 'solid';
+  color: string; // #RRGGBB or #RRGGBBAA
+  opacity?: number;
+  blendMode?: BlendMode;
 }
 
 export interface GradientStop {
-  offset: number // 0 to 1
-  color: string
+  offset: number; // 0 to 1
+  color: string;
 }
 
 export interface LinearGradientFill {
-  type: 'linear_gradient'
-  angle?: number
-  stops: GradientStop[]
-  opacity?: number
-  blendMode?: BlendMode
+  type: 'linear_gradient';
+  angle?: number;
+  stops: GradientStop[];
+  opacity?: number;
+  blendMode?: BlendMode;
 }
 
 export interface RadialGradientFill {
-  type: 'radial_gradient'
-  cx?: number
-  cy?: number
-  radius?: number
-  stops: GradientStop[]
-  opacity?: number
-  blendMode?: BlendMode
+  type: 'radial_gradient';
+  cx?: number;
+  cy?: number;
+  radius?: number;
+  stops: GradientStop[];
+  opacity?: number;
+  blendMode?: BlendMode;
 }
 
 export interface ImageFill {
-  type: 'image'
-  url: string
-  mode?: 'fill' | 'fit' | 'crop' | 'tile' | 'stretch'
-  opacity?: number
-  exposure?: number    // -100 to 100
-  contrast?: number    // -100 to 100
-  saturation?: number  // -100 to 100
-  temperature?: number // -100 to 100
-  tint?: number        // -100 to 100
-  highlights?: number  // -100 to 100
-  shadows?: number     // -100 to 100
+  type: 'image';
+  url: string;
+  mode?: 'fill' | 'fit' | 'crop' | 'tile' | 'stretch';
+  opacity?: number;
+  exposure?: number; // -100 to 100
+  contrast?: number; // -100 to 100
+  saturation?: number; // -100 to 100
+  temperature?: number; // -100 to 100
+  tint?: number; // -100 to 100
+  highlights?: number; // -100 to 100
+  shadows?: number; // -100 to 100
 }
 
-export type PenFill =
-  | SolidFill
-  | LinearGradientFill
-  | RadialGradientFill
-  | ImageFill
+export type PenFill = SolidFill | LinearGradientFill | RadialGradientFill | ImageFill;
 
 // --- Stroke ---
 
 export interface PenStroke {
-  thickness: number | [number, number, number, number]
-  align?: 'inside' | 'center' | 'outside'
-  join?: 'miter' | 'bevel' | 'round'
-  cap?: 'none' | 'round' | 'square'
-  dashPattern?: number[]
-  fill?: PenFill[]
+  thickness: number | [number, number, number, number];
+  align?: 'inside' | 'center' | 'outside';
+  join?: 'miter' | 'bevel' | 'round';
+  cap?: 'none' | 'round' | 'square';
+  dashPattern?: number[];
+  dashOffset?: number;
+  fill?: PenFill[];
 }
 
 // --- Effects ---
 
 export interface BlurEffect {
-  type: 'blur' | 'background_blur'
-  radius: number
+  type: 'blur' | 'background_blur';
+  radius: number;
 }
 
 export interface ShadowEffect {
-  type: 'shadow'
-  inner?: boolean
-  offsetX: number
-  offsetY: number
-  blur: number
-  spread: number
-  color: string
+  type: 'shadow';
+  inner?: boolean;
+  offsetX: number;
+  offsetY: number;
+  blur: number;
+  spread: number;
+  color: string;
 }
 
-export type PenEffect = BlurEffect | ShadowEffect
+export type PenEffect = BlurEffect | ShadowEffect;
 
 // --- Text ---
 
 export interface StyledTextSegment {
-  text: string
-  fontFamily?: string
-  fontSize?: number
-  fontWeight?: number
-  fontStyle?: 'normal' | 'italic'
-  fill?: string
-  underline?: boolean
-  strikethrough?: boolean
-  href?: string
+  text: string;
+  fontFamily?: string;
+  fontSize?: number;
+  fontWeight?: number;
+  fontStyle?: 'normal' | 'italic';
+  fill?: string;
+  underline?: boolean;
+  strikethrough?: boolean;
+  href?: string;
 }

package/src/theme-preset.ts

@@ -1,17 +1,17 @@
-import type { VariableDefinition } from './variables.js'
+import type { VariableDefinition } from './variables.js';
 
 export interface ThemePreset {
-  id: string
-  name: string
-  themes: Record<string, string[]>
-  variables: Record<string, VariableDefinition>
-  createdAt: number
+  id: string;
+  name: string;
+  themes: Record<string, string[]>;
+  variables: Record<string, VariableDefinition>;
+  createdAt: number;
 }
 
 export interface ThemePresetFile {
-  type: 'openpencil-theme-preset'
-  version: '1.0.0'
-  name: string
-  themes: Record<string, string[]>
-  variables: Record<string, VariableDefinition>
+  type: 'openpencil-theme-preset';
+  version: '1.0.0';
+  name: string;
+  themes: Record<string, string[]>;
+  variables: Record<string, VariableDefinition>;
 }

package/src/uikit.ts

@@ -1,4 +1,4 @@
-import type { PenDocument } from './pen.js'
+import type { PenDocument } from './pen.js';
 
 export type ComponentCategory =
   | 'buttons'
@@ -8,35 +8,35 @@ export type ComponentCategory =
   | 'layout'
   | 'feedback'
   | 'data-display'
-  | 'other'
+  | 'other';
 
 export interface KitComponent {
   /** Node ID of the reusable FrameNode in the kit document */
-  id: string
+  id: string;
   /** Display name */
-  name: string
+  name: string;
   /** Category for organization in the browser */
-  category: ComponentCategory
+  category: ComponentCategory;
   /** Tags for search */
-  tags: string[]
+  tags: string[];
   /** Component dimensions for preview sizing */
-  width: number
-  height: number
+  width: number;
+  height: number;
 }
 
 export interface UIKit {
   /** Unique identifier */
-  id: string
+  id: string;
   /** Display name */
-  name: string
+  name: string;
   /** Optional description */
-  description?: string
+  description?: string;
   /** Version string */
-  version: string
+  version: string;
   /** Whether this is a built-in kit that ships with the app */
-  builtIn: boolean
+  builtIn: boolean;
   /** Backing PenDocument containing the reusable nodes */
-  document: PenDocument
+  document: PenDocument;
   /** Extracted component metadata for browsing */
-  components: KitComponent[]
+  components: KitComponent[];
 }

package/src/variables.ts

@@ -1,11 +1,11 @@
 export interface VariableDefinition {
-  type: 'color' | 'number' | 'boolean' | 'string'
-  value: VariableValue
+  type: 'color' | 'number' | 'boolean' | 'string';
+  value: VariableValue;
 }
 
-export type VariableValue = string | number | boolean | ThemedValue[]
+export type VariableValue = string | number | boolean | ThemedValue[];
 
 export interface ThemedValue {
-  value: string | number | boolean
-  theme?: Record<string, string>
+  value: string | number | boolean;
+  theme?: Record<string, string>;
 }