deskforge 1.0.0

package/packages/renderer/src/filters.ts

@@ -0,0 +1,63 @@
+// filters.ts
+// Rendering filters and blend modes for advanced visual effects
+
+export type BlendMode =
+  | 'source-over'
+  | 'multiply'
+  | 'screen'
+  | 'overlay'
+  | 'darken'
+  | 'lighten'
+  | 'color-dodge'
+  | 'color-burn'
+  | 'hard-light'
+  | 'soft-light'
+  | 'difference'
+  | 'exclusion'
+
+export interface FilterOptions {
+  blur?: number
+  brightness?: number // 0-2, 1 = normal
+  contrast?: number // 0-2, 1 = normal
+  saturation?: number // 0-2, 1 = normal
+  hueRotate?: number // 0-360
+  invert?: boolean
+  sepia?: boolean
+}
+
+/**
+ * Apply CSS filter string to canvas context
+ */
+export function applyFilter(
+  ctx: CanvasRenderingContext2D,
+  filter: FilterOptions
+): string {
+  const parts: string[] = []
+
+  if (filter.blur) parts.push(`blur(${filter.blur}px)`)
+  if (filter.brightness) parts.push(`brightness(${filter.brightness})`)
+  if (filter.contrast) parts.push(`contrast(${filter.contrast})`)
+  if (filter.saturation) parts.push(`saturate(${filter.saturation})`)
+  if (filter.hueRotate) parts.push(`hue-rotate(${filter.hueRotate}deg)`)
+  if (filter.invert) parts.push(`invert(1)`)
+  if (filter.sepia) parts.push(`sepia(1)`)
+
+  return parts.join(' ')
+}
+
+/**
+ * Set blend mode on canvas context
+ */
+export function setBlendMode(
+  ctx: CanvasRenderingContext2D,
+  mode: BlendMode
+): void {
+  ctx.globalCompositeOperation = mode as GlobalCompositeOperation
+}
+
+/**
+ * Reset to default blend mode
+ */
+export function resetBlendMode(ctx: CanvasRenderingContext2D): void {
+  ctx.globalCompositeOperation = 'source-over'
+}

package/packages/renderer/src/icons.ts

@@ -0,0 +1,33 @@
+// icons.ts
+// Shared icon path definitions for renderer and SVG export.
+
+type IconDefinition = { path: string; type: 'fill' | 'stroke' }
+
+const iconDefinitions: Record<string, IconDefinition> = {
+  home: { path: 'M3 10 L12 3 L21 10 L21 20 L14 20 L14 13 L10 13 L10 20 L3 20 Z', type: 'fill' },
+  search: { path: 'M3 10 L17 10 M10 3 L10 17', type: 'stroke' },
+  settings: { path: 'M12 3 L14 7 L19 8 L15.5 12 L16.5 17 L12 14.5 L7.5 17 L8.5 12 L5 8 L10 7 Z', type: 'fill' },
+  user: { path: 'M12 12 C15.3 12 18 9.3 18 6 C18 2.7 15.3 0 12 0 C8.7 0 6 2.7 6 6 C6 9.3 8.7 12 12 12 Z M12 14 C7.3 14 3 16.4 3 20 L3 24 L21 24 L21 20 C21 16.4 16.7 14 12 14 Z', type: 'fill' },
+  bell: { path: 'M12 2 C8.7 2 6 4.7 6 8 L6 10.3 C6 12.1 5.2 13.8 4 15 L3 16 L21 16 L20 15 C18.8 13.8 18 12.1 18 10.3 L18 8 C18 4.7 15.3 2 12 2 Z M9 20 C9.6 21.2 10.7 22 12 22 C13.3 22 14.4 21.2 15 20 Z', type: 'fill' },
+  heart: { path: 'M12 21 C12 21 3 14 3 8 C3 5 5 3 8 3 C10 3 12 4 12 4 C12 4 14 3 16 3 C19 3 21 5 21 8 C21 14 12 21 12 21 Z', type: 'fill' },
+  star: { path: 'M12 2 L15.1 8.6 L22 9.5 L16.9 14.2 L18.8 21 L12 17.5 L5.2 21 L7.1 14.2 L2 9.5 L8.9 8.6 Z', type: 'fill' },
+  plus: { path: 'M12 3 L12 21 M3 12 L21 12', type: 'stroke' },
+  check: { path: 'M3 12 L9 18 L21 6', type: 'stroke' },
+  close: { path: 'M4 4 L20 20 M20 4 L4 20', type: 'stroke' },
+  menu: { path: 'M3 6 L21 6 M3 12 L21 12 M3 18 L21 18', type: 'stroke' },
+  'chevron-right': { path: 'M8 4 L16 12 L8 20', type: 'stroke' },
+  'chevron-left': { path: 'M16 4 L8 12 L16 20', type: 'stroke' },
+  'arrow-right': { path: 'M4 12 L20 12 M14 6 L20 12 L14 18', type: 'stroke' },
+  'arrow-left': { path: 'M20 12 L4 12 M10 6 L4 12 L10 18', type: 'stroke' },
+  info: { path: 'M12 2 C6.5 2 2 6.5 2 12 C2 17.5 6.5 22 12 22 C17.5 22 22 17.5 22 12 C22 6.5 17.5 2 12 2 Z M13 17 L11 17 L11 11 L13 11 Z M13 9 L11 9 L11 7 L13 7 Z', type: 'fill' },
+  pin: { path: 'M11 2 H13 C15.2 2 17 3.8 17 6 C17 7.5 16.3 8.8 15.1 9.7 L13 12 L13 21 H11 L11 12 L8.9 9.7 C7.7 8.8 7 7.5 7 6 C7 3.8 8.8 2 11 2 Z', type: 'stroke' },
+  'pin-filled': { path: 'M11 2 H13 C15.2 2 17 3.8 17 6 C17 7.5 16.3 8.8 15.1 9.7 L13 12 L13 21 H11 L11 12 L8.9 9.7 C7.7 8.8 7 7.5 7 6 C7 3.8 8.8 2 11 2 Z', type: 'fill' },
+  archive: { path: 'M4 6 H20 V18 H4 Z M8 10 H16 M12 10 V14', type: 'stroke' },
+  trash: { path: 'M6 6 H18 M8 6 V18 H16 V6 M10 6 V4 H14 V6', type: 'stroke' }
+}
+
+export function getIconDefinition(name: string): IconDefinition | undefined {
+  return iconDefinitions[name] ?? iconDefinitions.home
+}
+
+export type { IconDefinition }

package/packages/renderer/src/index.d.ts

@@ -0,0 +1,15 @@
+export { Renderer } from './renderer';
+export type { RenderContext } from './context';
+export { createRenderContext, pushState, popState } from './context';
+export type { Canvas } from './canvas';
+export { createCanvas, createCanvasWithDPR } from './canvas';
+export { createNode, createTree } from '@deskforge/core';
+export type { PaintHandler, ComponentPainters } from './painter';
+export { defaultPainters, paintNode, paintTree } from './painter';
+export { RenderEngine } from './engine';
+export type { RenderEngineConfig } from './engine';
+export type { BlendMode, FilterOptions } from './filters';
+export { applyFilter, setBlendMode, resetBlendMode } from './filters';
+export { DirtyRegionTracker } from './dirty-region';
+export type { Rect } from './dirty-region';
+export { SVGBuilder, nodeToSVG } from './svg-export';

package/packages/renderer/src/index.js

@@ -0,0 +1,34 @@
+"use strict";
+// index.ts
+// Public API for the renderer package
+// Everything needed to render DeskForge components with skia-canvas
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nodeToSVG = exports.SVGBuilder = exports.DirtyRegionTracker = exports.resetBlendMode = exports.setBlendMode = exports.applyFilter = exports.RenderEngine = exports.paintTree = exports.paintNode = exports.defaultPainters = exports.createTree = exports.createNode = exports.createCanvasWithDPR = exports.createCanvas = exports.popState = exports.pushState = exports.createRenderContext = exports.Renderer = void 0;
+var renderer_1 = require("./renderer");
+Object.defineProperty(exports, "Renderer", { enumerable: true, get: function () { return renderer_1.Renderer; } });
+var context_1 = require("./context");
+Object.defineProperty(exports, "createRenderContext", { enumerable: true, get: function () { return context_1.createRenderContext; } });
+Object.defineProperty(exports, "pushState", { enumerable: true, get: function () { return context_1.pushState; } });
+Object.defineProperty(exports, "popState", { enumerable: true, get: function () { return context_1.popState; } });
+var canvas_1 = require("./canvas");
+Object.defineProperty(exports, "createCanvas", { enumerable: true, get: function () { return canvas_1.createCanvas; } });
+Object.defineProperty(exports, "createCanvasWithDPR", { enumerable: true, get: function () { return canvas_1.createCanvasWithDPR; } });
+var core_1 = require("@deskforge/core");
+Object.defineProperty(exports, "createNode", { enumerable: true, get: function () { return core_1.createNode; } });
+Object.defineProperty(exports, "createTree", { enumerable: true, get: function () { return core_1.createTree; } });
+var painter_1 = require("./painter");
+Object.defineProperty(exports, "defaultPainters", { enumerable: true, get: function () { return painter_1.defaultPainters; } });
+Object.defineProperty(exports, "paintNode", { enumerable: true, get: function () { return painter_1.paintNode; } });
+Object.defineProperty(exports, "paintTree", { enumerable: true, get: function () { return painter_1.paintTree; } });
+var engine_1 = require("./engine");
+Object.defineProperty(exports, "RenderEngine", { enumerable: true, get: function () { return engine_1.RenderEngine; } });
+var filters_1 = require("./filters");
+Object.defineProperty(exports, "applyFilter", { enumerable: true, get: function () { return filters_1.applyFilter; } });
+Object.defineProperty(exports, "setBlendMode", { enumerable: true, get: function () { return filters_1.setBlendMode; } });
+Object.defineProperty(exports, "resetBlendMode", { enumerable: true, get: function () { return filters_1.resetBlendMode; } });
+var dirty_region_1 = require("./dirty-region");
+Object.defineProperty(exports, "DirtyRegionTracker", { enumerable: true, get: function () { return dirty_region_1.DirtyRegionTracker; } });
+var svg_export_1 = require("./svg-export");
+Object.defineProperty(exports, "SVGBuilder", { enumerable: true, get: function () { return svg_export_1.SVGBuilder; } });
+Object.defineProperty(exports, "nodeToSVG", { enumerable: true, get: function () { return svg_export_1.nodeToSVG; } });
+//# sourceMappingURL=index.js.map

package/packages/renderer/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";AAAA,WAAW;AACX,sCAAsC;AACtC,oEAAoE;;;AAEpE,uCAAqC;AAA5B,oGAAA,QAAQ,OAAA;AAEjB,qCAAoE;AAA3D,8GAAA,mBAAmB,OAAA;AAAE,oGAAA,SAAS,OAAA;AAAE,mGAAA,QAAQ,OAAA;AAEjD,mCAA4D;AAAnD,sGAAA,YAAY,OAAA;AAAE,6GAAA,mBAAmB,OAAA;AAC1C,wCAAwD;AAA/C,kGAAA,UAAU,OAAA;AAAE,kGAAA,UAAU,OAAA;AAE/B,qCAAiE;AAAxD,0GAAA,eAAe,OAAA;AAAE,oGAAA,SAAS,OAAA;AAAE,oGAAA,SAAS,OAAA;AAC9C,mCAAuC;AAA9B,sGAAA,YAAY,OAAA;AAGrB,qCAAqE;AAA5D,sGAAA,WAAW,OAAA;AAAE,uGAAA,YAAY,OAAA;AAAE,yGAAA,cAAc,OAAA;AAClD,+CAAmD;AAA1C,kHAAA,kBAAkB,OAAA;AAE3B,2CAAoD;AAA3C,wGAAA,UAAU,OAAA;AAAE,uGAAA,SAAS,OAAA"}

package/packages/renderer/src/index.ts

@@ -0,0 +1,19 @@
+// index.ts
+// Public API for the renderer package
+// Everything needed to render DeskForge components with skia-canvas
+
+export { Renderer } from './renderer'
+export type { RenderContext } from './context'
+export { createRenderContext, pushState, popState } from './context'
+export type { Canvas } from './canvas'
+export { createCanvas, createCanvasWithDPR } from './canvas'
+export { createNode, createTree } from '@deskforge/core'
+export type { PaintHandler, ComponentPainters } from './painter'
+export { defaultPainters, paintNode, paintTree } from './painter'
+export { RenderEngine } from './engine'
+export type { RenderEngineConfig } from './engine'
+export type { BlendMode, FilterOptions } from './filters'
+export { applyFilter, setBlendMode, resetBlendMode } from './filters'
+export { DirtyRegionTracker } from './dirty-region'
+export type { Rect } from './dirty-region'
+export { SVGBuilder, nodeToSVG } from './svg-export'

package/packages/renderer/src/painter.d.ts

@@ -0,0 +1,26 @@
+import type { DFNode } from '@deskforge/core';
+import type { RenderContext } from './context';
+/**
+ * Handler function for rendering a specific component type
+ */
+type PaintHandler = (node: DFNode, context: RenderContext) => void;
+/**
+ * Component painters — maps component types to rendering functions
+ */
+interface ComponentPainters {
+    [componentType: string]: PaintHandler;
+}
+/**
+ * Default component painters for built-in components
+ */
+declare const defaultPainters: ComponentPainters;
+/**
+ * Paints a single node using the appropriate painter
+ */
+declare function paintNode(node: DFNode, context: RenderContext, painters?: ComponentPainters): void;
+/**
+ * Paints a tree of nodes recursively
+ */
+declare function paintTree(node: DFNode, context: RenderContext, painters?: ComponentPainters): void;
+export type { PaintHandler, ComponentPainters };
+export { defaultPainters, paintNode, paintTree };

package/packages/renderer/src/painter.js

@@ -0,0 +1,127 @@
+"use strict";
+// painter.ts
+// Core painting logic — converts DFNode trees to skia-canvas rendering
+// Interprets component types and renders them appropriately
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultPainters = void 0;
+exports.paintNode = paintNode;
+exports.paintTree = paintTree;
+/**
+ * Default component painters for built-in components
+ */
+const defaultPainters = {
+    // Rect component
+    rect(node, context) {
+        const { x = 0, y = 0, width = 100, height = 100, fill, stroke, radius = 0 } = node.props;
+        const { ctx } = context;
+        if (radius) {
+            ctx.beginPath();
+            ctx.roundRect(x, y, width, height, radius);
+            ctx.closePath();
+        }
+        else {
+            ctx.beginPath();
+            ctx.rect(x, y, width, height);
+            ctx.closePath();
+        }
+        if (fill) {
+            ctx.fillStyle = fill;
+            ctx.fill();
+        }
+        if (stroke) {
+            ctx.strokeStyle = stroke;
+            ctx.stroke();
+        }
+    },
+    // Circle component
+    circle(node, context) {
+        const { x = 0, y = 0, radius = 50, fill, stroke } = node.props;
+        const { ctx } = context;
+        ctx.beginPath();
+        ctx.arc(x + radius, y + radius, radius, 0, Math.PI * 2);
+        ctx.closePath();
+        if (fill) {
+            ctx.fillStyle = fill;
+            ctx.fill();
+        }
+        if (stroke) {
+            ctx.strokeStyle = stroke;
+            ctx.stroke();
+        }
+    },
+    // Text component
+    text(node, context) {
+        const { x = 0, y = 0, text = '', fill = '#000000', font = '12px sans-serif' } = node.props;
+        const { ctx } = context;
+        ctx.fillStyle = fill;
+        ctx.font = font;
+        ctx.fillText(text, x, y);
+    },
+    // Line component
+    line(node, context) {
+        const { x1 = 0, y1 = 0, x2 = 100, y2 = 100, stroke = '#000000', width = 1 } = node.props;
+        const { ctx } = context;
+        ctx.strokeStyle = stroke;
+        ctx.lineWidth = width;
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.stroke();
+    },
+    // Image component
+    image(node, context) {
+        const { x = 0, y = 0, width = 100, height = 100, src } = node.props;
+        const { ctx } = context;
+        if (src) {
+            // For now, we'll skip image rendering as it requires async loading
+            // This would need to be handled at a higher level in the renderer
+            console.warn('Image component rendering not yet implemented');
+        }
+    },
+    // Group component (just renders children)
+    group(node, context) {
+        // Groups don't render anything themselves
+        // Their children are rendered normally
+    },
+    // Container/View component
+    view(node, context) {
+        const { x = 0, y = 0, width = 100, height = 100, fill, stroke } = node.props;
+        const { ctx } = context;
+        ctx.beginPath();
+        ctx.rect(x, y, width, height);
+        ctx.closePath();
+        if (fill) {
+            ctx.fillStyle = fill;
+            ctx.fill();
+        }
+        if (stroke) {
+            ctx.strokeStyle = stroke;
+            ctx.stroke();
+        }
+    }
+};
+exports.defaultPainters = defaultPainters;
+/**
+ * Paints a single node using the appropriate painter
+ */
+function paintNode(node, context, painters = defaultPainters) {
+    const painter = painters[node.type];
+    if (painter) {
+        painter(node, context);
+    }
+    else {
+        console.warn(`No painter found for component type: ${node.type}`);
+    }
+}
+/**
+ * Paints a tree of nodes recursively
+ */
+function paintTree(node, context, painters = defaultPainters) {
+    // Paint this node
+    paintNode(node, context, painters);
+    // Paint children
+    for (const child of node.children) {
+        paintTree(child, context, painters);
+    }
+}
+//# sourceMappingURL=painter.js.map

package/packages/renderer/src/painter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"painter.js","sourceRoot":"","sources":["painter.ts"],"names":[],"mappings":"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"}

package/packages/renderer/src/painter.ts

@@ -0,0 +1,269 @@
+// painter.ts
+// Core painting logic — converts DFNode trees to skia-canvas rendering
+// Interprets component types and renders them appropriately
+
+import type { DFNode } from '@deskforge/core'
+import type { RenderContext } from './context'
+
+import { getIconDefinition } from './icons'
+
+type IconDefinition = { path: string; type: 'fill' | 'stroke' }
+
+function drawPath(ctx: any, path: string): void {
+  const tokens = path.trim().split(/\s+/).filter(Boolean)
+  let i = 0
+  let x = 0
+  let y = 0
+  let startX = 0
+  let startY = 0
+
+  while (i < tokens.length) {
+    const command = tokens[i++]
+    if (!command) continue
+
+    const upper = command.toUpperCase()
+    if (upper === 'Z') {
+      x = startX
+      y = startY
+      ctx.closePath()
+      continue
+    }
+
+    const isRelative = command === command.toLowerCase()
+    const isMove = upper === 'M'
+    const isLine = upper === 'L'
+    const isHorizontal = upper === 'H'
+    const isVertical = upper === 'V'
+
+    if (!isMove && !isLine && !isHorizontal && !isVertical) {
+      continue
+    }
+
+    const args: number[] = []
+    while (i < tokens.length && !/[A-Za-z]/.test(tokens[i]!)) {
+      args.push(Number(tokens[i++]!))
+    }
+
+    if (args.length === 0) continue
+
+    if (isMove) {
+      const nextX = isRelative ? x + args[0]! : args[0]!
+      const nextY = isRelative ? y + (args[1] ?? 0) : (args[1] ?? args[0]!)
+      ctx.moveTo(nextX, nextY)
+      x = nextX
+      y = nextY
+      startX = x
+      startY = y
+    } else if (isLine) {
+      for (let index = 0; index + 1 < args.length; index += 2) {
+        const nextX = isRelative ? x + args[index]! : args[index]!
+        const nextY = isRelative ? y + args[index + 1]! : args[index + 1]!
+        ctx.lineTo(nextX, nextY)
+        x = nextX
+        y = nextY
+      }
+    } else if (isHorizontal) {
+      for (const value of args) {
+        const nextX = isRelative ? x + value : value
+        ctx.lineTo(nextX, y)
+        x = nextX
+      }
+    } else if (isVertical) {
+      for (const value of args) {
+        const nextY = isRelative ? y + value : value
+        ctx.lineTo(x, nextY)
+        y = nextY
+      }
+    }
+  }
+}
+
+/**
+ * Handler function for rendering a specific component type
+ */
+type PaintHandler = (node: DFNode, context: RenderContext) => void
+
+/**
+ * Component painters — maps component types to rendering functions
+ */
+interface ComponentPainters {
+  [componentType: string]: PaintHandler
+}
+
+/**
+ * Default component painters for built-in components
+ */
+const defaultPainters: ComponentPainters = {
+  // Rect component
+  rect(node: DFNode, context: RenderContext): void {
+    const { x = 0, y = 0, width = 100, height = 100, fill, stroke, radius = 0 } = node.props as any
+    const { ctx } = context
+    
+    if (radius) {
+      ctx.beginPath()
+      ctx.roundRect(x, y, width, height, radius)
+      ctx.closePath()
+    } else {
+      ctx.beginPath()
+      ctx.rect(x, y, width, height)
+      ctx.closePath()
+    }
+    
+    if (fill) {
+      ctx.fillStyle = fill
+      ctx.fill()
+    }
+    if (stroke) {
+      ctx.strokeStyle = stroke
+      ctx.stroke()
+    }
+  },
+  
+  // Circle component
+  circle(node: DFNode, context: RenderContext): void {
+    const { x = 0, y = 0, radius = 50, fill, stroke } = node.props as any
+    const { ctx } = context
+    
+    ctx.beginPath()
+    ctx.arc(x + radius, y + radius, radius, 0, Math.PI * 2)
+    ctx.closePath()
+    
+    if (fill) {
+      ctx.fillStyle = fill
+      ctx.fill()
+    }
+    if (stroke) {
+      ctx.strokeStyle = stroke
+      ctx.stroke()
+    }
+  },
+  
+  // Text component
+  text(node: DFNode, context: RenderContext): void {
+    const { x = 0, y = 0, text = '', fill = '#000000', font = '12px sans-serif' } = node.props as any
+    const { ctx } = context
+    
+    ctx.fillStyle = fill
+    ctx.font = font
+    ctx.fillText(text, x, y)
+  },
+  
+  // Line component
+  line(node: DFNode, context: RenderContext): void {
+    const { x1 = 0, y1 = 0, x2 = 100, y2 = 100, stroke = '#000000', width = 1 } = node.props as any
+    const { ctx } = context
+    
+    ctx.strokeStyle = stroke
+    ctx.lineWidth = width
+    ctx.beginPath()
+    ctx.moveTo(x1, y1)
+    ctx.lineTo(x2, y2)
+    ctx.stroke()
+  },
+  
+  // Image component
+  image(node: DFNode, context: RenderContext): void {
+    const { x = 0, y = 0, width = 100, height = 100, src } = node.props as any
+    const { ctx } = context
+    
+    if (src) {
+      // For now, we'll skip image rendering as it requires async loading
+      // This would need to be handled at a higher level in the renderer
+      console.warn('Image component rendering not yet implemented')
+    }
+  },
+  
+  // Icon component
+  Icon(node: DFNode, context: RenderContext): void {
+    const { x = 0, y = 0, size = 24, color = '#000000', opacity = 1, name = 'home' } = node.props as any
+    const { ctx } = context
+    const icon = getIconDefinition(String(name))
+
+    if (!icon) {
+      return
+    }
+
+    ctx.save()
+    ctx.translate(x, y)
+    ctx.scale(size / 24, size / 24)
+    ctx.globalAlpha = opacity
+    ctx.fillStyle = color
+    ctx.strokeStyle = color
+    ctx.lineCap = 'round'
+    ctx.lineJoin = 'round'
+    ctx.lineWidth = 2
+
+    ctx.beginPath()
+    drawPath(ctx, icon.path)
+
+    if (icon.type === 'fill') {
+      ctx.fill()
+    } else {
+      ctx.stroke()
+    }
+
+    ctx.restore()
+  },
+  
+  // Group component (just renders children)
+  group(node: DFNode, context: RenderContext): void {
+    // Groups don't render anything themselves
+    // Their children are rendered normally
+  },
+  
+  // Container/View component
+  view(node: DFNode, context: RenderContext): void {
+    const { x = 0, y = 0, width = 100, height = 100, fill, stroke } = node.props as any
+    const { ctx } = context
+    
+    ctx.beginPath()
+    ctx.rect(x, y, width, height)
+    ctx.closePath()
+    
+    if (fill) {
+      ctx.fillStyle = fill
+      ctx.fill()
+    }
+    if (stroke) {
+      ctx.strokeStyle = stroke
+      ctx.stroke()
+    }
+  }
+}
+
+/**
+ * Paints a single node using the appropriate painter
+ */
+function paintNode(
+  node: DFNode,
+  context: RenderContext,
+  painters: ComponentPainters = defaultPainters
+): void {
+  const painter = painters[node.type]
+  
+  if (painter) {
+    painter(node, context)
+  } else {
+    console.warn(`No painter found for component type: ${node.type}`)
+  }
+}
+
+/**
+ * Paints a tree of nodes recursively
+ */
+function paintTree(
+  node: DFNode,
+  context: RenderContext,
+  painters: ComponentPainters = defaultPainters
+): void {
+  // Paint this node
+  paintNode(node, context, painters)
+  
+  // Paint children
+  for (const child of node.children) {
+    paintTree(child, context, painters)
+  }
+}
+
+export type { PaintHandler, ComponentPainters }
+export { defaultPainters, paintNode, paintTree }

package/packages/renderer/src/renderer.d.ts

@@ -0,0 +1,71 @@
+import type { DFNode, DFTree } from '@deskforge/core';
+import type { Canvas } from './canvas';
+import type { RenderContext } from './context';
+import type { ComponentPainters } from './painter';
+/**
+ * Configuration for the renderer
+ */
+interface RendererConfig {
+    width: number;
+    height: number;
+    devicePixelRatio?: number;
+    backgroundColor?: string;
+    painters?: ComponentPainters;
+}
+/**
+ * Main Renderer class
+ * Handles rendering DFNode trees to skia-canvas
+ */
+declare class Renderer {
+    private config;
+    private canvas;
+    private context;
+    private painters;
+    private initialized;
+    constructor(config: RendererConfig);
+    /**
+     * Render a single node
+     */
+    renderNode(node: DFNode): void;
+    /**
+     * Render a tree
+     */
+    renderTree(tree: DFTree): void;
+    /**
+     * Clear the canvas
+     */
+    clear(): void;
+    /**
+     * Get the canvas instance
+     */
+    getCanvas(): Canvas;
+    /**
+     * Get the rendering context
+     */
+    getContext(): RenderContext;
+    /**
+     * Export the rendered output as PNG buffer
+     */
+    toBuffer(): Promise<Buffer>;
+    /**
+     * Export the rendered output as data URL
+     */
+    toDataURL(): Promise<string>;
+    /**
+     * Save the rendered output to disk
+     */
+    saveAs(path: string): Promise<void>;
+    /**
+     * Register a custom painter for a component type
+     */
+    registerPainter(type: string, painter: (node: DFNode, context: RenderContext) => void): void;
+    /**
+     * Resize the renderer
+     */
+    resize(width: number, height: number): void;
+    /**
+     * Check if renderer is initialized
+     */
+    private ensureInitialized;
+}
+export { Renderer };