deskforge 1.0.0

package/packages/renderer/dist/svg-export.js

@@ -0,0 +1,159 @@
+"use strict";
+// svg-export.ts
+// SVG export functionality for vector-format output
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SVGBuilder = void 0;
+exports.nodeToSVG = nodeToSVG;
+const icons_1 = require("./icons");
+/**
+ * Escape XML special characters
+ */
+function escapeXml(text) {
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;');
+}
+/**
+ * SVG builder for creating vector exports
+ */
+class SVGBuilder {
+    constructor(width, height) {
+        this.elements = [];
+        this.defs = [];
+        this.width = width;
+        this.height = height;
+    }
+    /**
+     * Add rectangle to SVG
+     */
+    addRect(x, y, width, height, fill, stroke, radius) {
+        const radiusAttr = radius ? ` rx="${radius}" ry="${radius}"` : '';
+        const fillAttr = fill ? ` fill="${fill}"` : ' fill="none"';
+        const strokeAttr = stroke ? ` stroke="${stroke}"` : '';
+        this.elements.push(`<rect x="${x}" y="${y}" width="${width}" height="${height}"${radiusAttr}${fillAttr}${strokeAttr} />`);
+    }
+    /**
+     * Add circle to SVG
+     */
+    addCircle(cx, cy, radius, fill, stroke) {
+        const fillAttr = fill ? ` fill="${fill}"` : ' fill="none"';
+        const strokeAttr = stroke ? ` stroke="${stroke}"` : '';
+        this.elements.push(`<circle cx="${cx}" cy="${cy}" r="${radius}"${fillAttr}${strokeAttr} />`);
+    }
+    /**
+     * Add text to SVG
+     */
+    addText(x, y, text, fill, fontSize, fontFamily) {
+        const fillAttr = fill ? ` fill="${fill}"` : '';
+        const fontSizeAttr = fontSize ? ` font-size="${fontSize}"` : '';
+        const fontFamilyAttr = fontFamily ? ` font-family="${fontFamily}"` : '';
+        this.elements.push(`<text x="${x}" y="${y}"${fillAttr}${fontSizeAttr}${fontFamilyAttr}>${this.escapeXml(text)}</text>`);
+    }
+    /**
+     * Add line to SVG
+     */
+    addLine(x1, y1, x2, y2, stroke, strokeWidth) {
+        const strokeAttr = stroke ? ` stroke="${stroke}"` : ' stroke="black"';
+        const strokeWidthAttr = strokeWidth ? ` stroke-width="${strokeWidth}"` : '';
+        this.elements.push(`<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}"${strokeAttr}${strokeWidthAttr} />`);
+    }
+    /**
+     * Add image reference to SVG
+     */
+    addImage(x, y, width, height, href) {
+        this.elements.push(`<image x="${x}" y="${y}" width="${width}" height="${height}" href="${href}" />`);
+    }
+    /**
+     * Add SVG path
+     */
+    addPath(data, fill, stroke, strokeWidth) {
+        const fillAttr = fill ? ` fill="${fill}"` : ' fill="none"';
+        const strokeAttr = stroke ? ` stroke="${stroke}"` : '';
+        const strokeWidthAttr = strokeWidth ? ` stroke-width="${strokeWidth}"` : '';
+        this.elements.push(`<path d="${this.escapeXml(data)}"${fillAttr}${strokeAttr}${strokeWidthAttr} />`);
+    }
+    /**
+     * Add group/container
+     */
+    addGroup(elements, transform) {
+        const transformAttr = transform ? ` transform="${transform}"` : '';
+        const group = `<g${transformAttr}>${elements.join('')}</g>`;
+        this.elements.push(group);
+    }
+    /**
+     * Build final SVG string
+     */
+    build() {
+        const defs = this.defs.length > 0 ? `<defs>${this.defs.join('')}</defs>` : '';
+        const content = this.elements.join('\n  ');
+        return `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="${this.width}" height="${this.height}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  ${defs}
+  ${content}
+</svg>`;
+    }
+    /**
+     * Escape XML special characters
+     */
+    escapeXml(text) {
+        return text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&apos;');
+    }
+}
+exports.SVGBuilder = SVGBuilder;
+/**
+ * Export node tree to SVG format
+ */
+function nodeToSVG(node, width, height) {
+    const svg = new SVGBuilder(width, height);
+    renderNodeToSVG(node, svg);
+    return svg.build();
+}
+/**
+ * Recursively render node to SVG
+ */
+function renderNodeToSVG(node, svg) {
+    const props = node.props;
+    switch (node.type) {
+        case 'rect':
+            svg.addRect(props.x ?? 0, props.y ?? 0, props.width ?? 100, props.height ?? 100, props.fill, props.stroke, props.radius);
+            break;
+        case 'circle':
+            svg.addCircle(props.cx ?? 0, props.cy ?? 0, props.radius ?? 50, props.fill, props.stroke);
+            break;
+        case 'text':
+            svg.addText(props.x ?? 0, props.y ?? 0, props.text ?? '', props.fill, props.fontSize, props.fontFamily);
+            break;
+        case 'line':
+            svg.addLine(props.x1 ?? 0, props.y1 ?? 0, props.x2 ?? 100, props.y2 ?? 100, props.stroke, props.strokeWidth);
+            break;
+        case 'Icon': {
+            const icon = (0, icons_1.getIconDefinition)(String(props.name ?? 'home'));
+            if (icon) {
+                const size = Number(props.size ?? 24);
+                const color = String(props.color ?? '#000000');
+                const x = Number(props.x ?? 0);
+                const y = Number(props.y ?? 0);
+                svg.addGroup([
+                    `<path d="${escapeXml(icon.path)}"${icon.type === 'fill' ? ` fill="${color}"` : ' fill="none"'}${icon.type === 'stroke' ? ` stroke="${color}"` : ''} stroke-width="2" />`
+                ], `translate(${x} ${y}) scale(${size / 24})`);
+            }
+            break;
+        }
+        case 'group':
+        case 'view':
+            // Render children
+            if (node.children) {
+                node.children.forEach(child => renderNodeToSVG(child, svg));
+            }
+            break;
+    }
+}
+//# sourceMappingURL=svg-export.js.map

package/packages/renderer/dist/svg-export.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg-export.js","sourceRoot":"","sources":["../src/svg-export.ts"],"names":[],"mappings":";AAAA,gBAAgB;AAChB,oDAAoD;;;AAwLpD,8BAIC;AAzLD,mCAA2C;AAE3C;;GAEG;AACH,SAAS,SAAS,CAAC,IAAY;IAC7B,OAAO,IAAI;SACR,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;SACtB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;SACvB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAA;AAC5B,CAAC;AAED;;GAEG;AACH,MAAa,UAAU;IAMrB,YAAY,KAAa,EAAE,MAAc;QAHjC,aAAQ,GAAa,EAAE,CAAA;QACvB,SAAI,GAAa,EAAE,CAAA;QAGzB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAClB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;IACtB,CAAC;IAED;;OAEG;IACH,OAAO,CACL,CAAS,EACT,CAAS,EACT,KAAa,EACb,MAAc,EACd,IAAa,EACb,MAAe,EACf,MAAe;QAEf,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,MAAM,SAAS,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;QACjE,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,UAAU,IAAI,GAAG,CAAC,CAAC,CAAC,cAAc,CAAA;QAC1D,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,YAAY,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;QAEtD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAChB,YAAY,CAAC,QAAQ,CAAC,YAAY,KAAK,aAAa,MAAM,IAAI,UAAU,GAAG,QAAQ,GAAG,UAAU,KAAK,CACtG,CAAA;IACH,CAAC;IAED;;OAEG;IACH,SAAS,CACP,EAAU,EACV,EAAU,EACV,MAAc,EACd,IAAa,EACb,MAAe;QAEf,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,UAAU,IAAI,GAAG,CAAC,CAAC,CAAC,cAAc,CAAA;QAC1D,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,YAAY,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;QAEtD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAChB,eAAe,EAAE,SAAS,EAAE,QAAQ,MAAM,IAAI,QAAQ,GAAG,UAAU,KAAK,CACzE,CAAA;IACH,CAAC;IAED;;OAEG;IACH,OAAO,CACL,CAAS,EACT,CAAS,EACT,IAAY,EACZ,IAAa,EACb,QAAiB,EACjB,UAAmB;QAEnB,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,UAAU,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;QAC9C,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,eAAe,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;QAC/D,MAAM,cAAc,GAAG,UAAU,CAAC,CAAC,CAAC,iBAAiB,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;QAEvE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAChB,YAAY,CAAC,QAAQ,CAAC,IAAI,QAAQ,GAAG,YAAY,GAAG,cAAc,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CACpG,CAAA;IACH,CAAC;IAED;;OAEG;IACH,OAAO,CACL,EAAU,EACV,EAAU,EACV,EAAU,EACV,EAAU,EACV,MAAe,EACf,WAAoB;QAEpB,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,YAAY,MAAM,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAA;QACrE,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,CAAC,kBAAkB,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;QAE3E,IAAI,CAAC,QAAQ,CAAC,IAAI,CAChB,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,UAAU,GAAG,eAAe,KAAK,CACtF,CAAA;IACH,CAAC;IAED;;OAEG;IACH,QAAQ,CACN,CAAS,EACT,CAAS,EACT,KAAa,EACb,MAAc,EACd,IAAY;QAEZ,IAAI,CAAC,QAAQ,CAAC,IAAI,CAChB,aAAa,CAAC,QAAQ,CAAC,YAAY,KAAK,aAAa,MAAM,WAAW,IAAI,MAAM,CACjF,CAAA;IACH,CAAC;IAED;;OAEG;IACH,OAAO,CACL,IAAY,EACZ,IAAa,EACb,MAAe,EACf,WAAoB;QAEpB,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,UAAU,IAAI,GAAG,CAAC,CAAC,CAAC,cAAc,CAAA;QAC1D,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,YAAY,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;QACtD,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,CAAC,kBAAkB,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;QAE3E,IAAI,CAAC,QAAQ,CAAC,IAAI,CAChB,YAAY,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,QAAQ,GAAG,UAAU,GAAG,eAAe,KAAK,CACjF,CAAA;IACH,CAAC;IAED;;OAEG;IACH,QAAQ,CACN,QAAkB,EAClB,SAAkB;QAElB,MAAM,aAAa,GAAG,SAAS,CAAC,CAAC,CAAC,eAAe,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;QAClE,MAAM,KAAK,GAAG,KAAK,aAAa,IAAI,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAA;QAC3D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC3B,CAAC;IAED;;OAEG;IACH,KAAK;QACH,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAA;QAC7E,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAE1C,OAAO;cACG,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC,MAAM;IAC5C,IAAI;IACJ,OAAO;OACJ,CAAA;IACL,CAAC;IAED;;OAEG;IACK,SAAS,CAAC,IAAY;QAC5B,OAAO,IAAI;aACR,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;aACtB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;aACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;aACrB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;aACvB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAA;IAC5B,CAAC;CACF;AA/JD,gCA+JC;AAED;;GAEG;AACH,SAAgB,SAAS,CAAC,IAAY,EAAE,KAAa,EAAE,MAAc;IACnE,MAAM,GAAG,GAAG,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACzC,eAAe,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;IAC1B,OAAO,GAAG,CAAC,KAAK,EAAE,CAAA;AACpB,CAAC;AAED;;GAEG;AACH,SAAS,eAAe,CAAC,IAAY,EAAE,GAAe;IACpD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAY,CAAA;IAE/B,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,MAAM;YACT,GAAG,CAAC,OAAO,CACT,KAAK,CAAC,CAAC,IAAI,CAAC,EACZ,KAAK,CAAC,CAAC,IAAI,CAAC,EACZ,KAAK,CAAC,KAAK,IAAI,GAAG,EAClB,KAAK,CAAC,MAAM,IAAI,GAAG,EACnB,KAAK,CAAC,IAAI,EACV,KAAK,CAAC,MAAM,EACZ,KAAK,CAAC,MAAM,CACb,CAAA;YACD,MAAK;QAEP,KAAK,QAAQ;YACX,GAAG,CAAC,SAAS,CACX,KAAK,CAAC,EAAE,IAAI,CAAC,EACb,KAAK,CAAC,EAAE,IAAI,CAAC,EACb,KAAK,CAAC,MAAM,IAAI,EAAE,EAClB,KAAK,CAAC,IAAI,EACV,KAAK,CAAC,MAAM,CACb,CAAA;YACD,MAAK;QAEP,KAAK,MAAM;YACT,GAAG,CAAC,OAAO,CACT,KAAK,CAAC,CAAC,IAAI,CAAC,EACZ,KAAK,CAAC,CAAC,IAAI,CAAC,EACZ,KAAK,CAAC,IAAI,IAAI,EAAE,EAChB,KAAK,CAAC,IAAI,EACV,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,UAAU,CACjB,CAAA;YACD,MAAK;QAEP,KAAK,MAAM;YACT,GAAG,CAAC,OAAO,CACT,KAAK,CAAC,EAAE,IAAI,CAAC,EACb,KAAK,CAAC,EAAE,IAAI,CAAC,EACb,KAAK,CAAC,EAAE,IAAI,GAAG,EACf,KAAK,CAAC,EAAE,IAAI,GAAG,EACf,KAAK,CAAC,MAAM,EACZ,KAAK,CAAC,WAAW,CAClB,CAAA;YACD,MAAK;QAEP,KAAK,MAAM,CAAC,CAAC,CAAC;YACZ,MAAM,IAAI,GAAG,IAAA,yBAAiB,EAAC,MAAM,CAAC,KAAK,CAAC,IAAI,IAAI,MAAM,CAAC,CAAC,CAAA;YAC5D,IAAI,IAAI,EAAE,CAAC;gBACT,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;gBACrC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,IAAI,SAAS,CAAC,CAAA;gBAC9C,MAAM,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;gBAC9B,MAAM,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;gBAE9B,GAAG,CAAC,QAAQ,CAAC;oBACX,YAAY,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAC9B,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,cAC9C,GACE,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,KAAK,GAAG,CAAC,CAAC,CAAC,EAClD,sBAAsB;iBACvB,EAAE,aAAa,CAAC,IAAI,CAAC,WAAW,IAAI,GAAG,EAAE,GAAG,CAAC,CAAA;YAChD,CAAC;YACD,MAAK;QACP,CAAC;QAED,KAAK,OAAO,CAAC;QACb,KAAK,MAAM;YACT,kBAAkB;YAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAA;YAC7D,CAAC;YACD,MAAK;IACT,CAAC;AACH,CAAC"}

package/packages/renderer/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@deskforge/renderer",
+  "version": "1.0.0",
+  "description": "DeskForge Skia-Canvas renderer — GPU-accelerated rendering engine",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "check": "tsc --noEmit",
+    "prepare": "npm run build"
+  },
+  "dependencies": {
+    "@deskforge/core": "1.0.0",
+    "skia-canvas": "3.0.8"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/deskforge/deskforge.git"
+  },
+  "bugs": {
+    "url": "https://github.com/deskforge/deskforge/issues"
+  },
+  "homepage": "https://github.com/deskforge/deskforge#readme"
+}

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

@@ -0,0 +1,23 @@
+import { Canvas as SkiaCanvas } from 'skia-canvas';
+/**
+ * Canvas wraps skia-canvas and provides DeskForge-specific methods
+ */
+interface Canvas {
+    skiaCanvas: InstanceType<typeof SkiaCanvas>;
+    width: number;
+    height: number;
+    getContext(): ReturnType<InstanceType<typeof SkiaCanvas>['getContext']>;
+    toBuffer(type?: 'png' | 'jpeg'): Promise<Buffer>;
+    toDataURL(type?: 'png' | 'jpeg'): Promise<string>;
+    saveAs(path: string, type?: 'png' | 'jpeg'): Promise<void>;
+}
+/**
+ * Creates a new Canvas instance
+ */
+declare function createCanvas(width: number, height: number): Canvas;
+/**
+ * Creates a canvas with a specific device pixel ratio
+ */
+declare function createCanvasWithDPR(width: number, height: number, dpr?: number): Canvas;
+export type { Canvas };
+export { createCanvas, createCanvasWithDPR };

package/packages/renderer/src/canvas.js

@@ -0,0 +1,38 @@
+"use strict";
+// canvas.ts
+// Canvas abstraction — wraps skia-canvas for the framework
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCanvas = createCanvas;
+exports.createCanvasWithDPR = createCanvasWithDPR;
+const skia_canvas_1 = require("skia-canvas");
+/**
+ * Creates a new Canvas instance
+ */
+function createCanvas(width, height) {
+    const skiaCanvas = new skia_canvas_1.Canvas(width, height);
+    return {
+        skiaCanvas,
+        width,
+        height,
+        getContext() {
+            return skiaCanvas.getContext('2d');
+        },
+        toBuffer(type = 'png') {
+            return skiaCanvas.toBuffer(type);
+        },
+        async toDataURL(type = 'png') {
+            return skiaCanvas.toURL(type);
+        },
+        async saveAs(path, type = 'png') {
+            return skiaCanvas.toFile(path, { format: type });
+        }
+    };
+}
+/**
+ * Creates a canvas with a specific device pixel ratio
+ */
+function createCanvasWithDPR(width, height, dpr = 1) {
+    const canvas = createCanvas(width * dpr, height * dpr);
+    return canvas;
+}
+//# sourceMappingURL=canvas.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.js","sourceRoot":"","sources":["canvas.ts"],"names":[],"mappings":";AAAA,YAAY;AACZ,2DAA2D;;AAoElD,oCAAY;AAAE,kDAAmB;AAlE1C,6CAAkD;AAwBlD;;GAEG;AACH,SAAS,YAAY,CAAC,KAAa,EAAE,MAAc;IACjD,MAAM,UAAU,GAAG,IAAI,oBAAU,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IAEhD,OAAO;QACL,UAAU;QACV,KAAK;QACL,MAAM;QAEN,UAAU;YACR,OAAO,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;QACpC,CAAC;QAED,QAAQ,CAAC,OAAuB,KAAK;YACnC,OAAO,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;QAClC,CAAC;QAED,KAAK,CAAC,SAAS,CAAC,OAAuB,KAAK;YAC1C,OAAO,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC/B,CAAC;QAED,KAAK,CAAC,MAAM,CAAC,IAAY,EAAE,OAAuB,KAAK;YACrD,OAAO,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAA;QAClD,CAAC;KACF,CAAA;AACH,CAAC;AAED;;GAEG;AACH,SAAS,mBAAmB,CAC1B,KAAa,EACb,MAAc,EACd,MAAc,CAAC;IAEf,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC,CAAA;IACtD,OAAO,MAAM,CAAA;AACf,CAAC"}

package/packages/renderer/src/canvas.ts

@@ -0,0 +1,70 @@
+// canvas.ts
+// Canvas abstraction — wraps skia-canvas for the framework
+
+import { Canvas as SkiaCanvas } from 'skia-canvas'
+
+/**
+ * Canvas wraps skia-canvas and provides DeskForge-specific methods
+ */
+interface Canvas {
+  // The underlying skia-canvas instance
+  skiaCanvas: InstanceType<typeof SkiaCanvas>
+  
+  // Canvas dimensions
+  width: number
+  height: number
+  
+  // Get the 2D rendering context
+  getContext(): ReturnType<InstanceType<typeof SkiaCanvas>['getContext']>
+  
+  // Render to PNG/JPEG
+  toBuffer(type?: 'png' | 'jpeg'): Promise<Buffer>
+  toDataURL(type?: 'png' | 'jpeg'): Promise<string>
+  
+  // Save to disk
+  saveAs(path: string, type?: 'png' | 'jpeg'): Promise<void>
+}
+
+/**
+ * Creates a new Canvas instance
+ */
+function createCanvas(width: number, height: number): Canvas {
+  const skiaCanvas = new SkiaCanvas(width, height)
+  
+  return {
+    skiaCanvas,
+    width,
+    height,
+    
+    getContext() {
+      return skiaCanvas.getContext('2d')
+    },
+    
+    toBuffer(type: 'png' | 'jpeg' = 'png'): Promise<Buffer> {
+      return skiaCanvas.toBuffer(type)
+    },
+    
+    async toDataURL(type: 'png' | 'jpeg' = 'png'): Promise<string> {
+      return skiaCanvas.toURL(type)
+    },
+    
+    async saveAs(path: string, type: 'png' | 'jpeg' = 'png'): Promise<void> {
+      return skiaCanvas.toFile(path, { format: type })
+    }
+  }
+}
+
+/**
+ * Creates a canvas with a specific device pixel ratio
+ */
+function createCanvasWithDPR(
+  width: number,
+  height: number,
+  dpr: number = 1
+): Canvas {
+  const canvas = createCanvas(width * dpr, height * dpr)
+  return canvas
+}
+
+export type { Canvas }
+export { createCanvas, createCanvasWithDPR }

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

@@ -0,0 +1,33 @@
+import type { Canvas, CanvasRenderingContext2D } from 'skia-canvas';
+/**
+ * RenderContext wraps the skia-canvas 2D rendering context
+ * and provides additional state for rendering operations
+ */
+interface RenderContext {
+    ctx: CanvasRenderingContext2D;
+    canvas: Canvas;
+    state: {
+        fillColor: string;
+        strokeColor: string;
+        strokeWidth: number;
+        opacity: number;
+        font: string;
+        textAlign: 'left' | 'center' | 'right';
+        textBaseline: 'top' | 'middle' | 'bottom';
+    };
+    stateStack: RenderContext['state'][];
+}
+/**
+ * Creates a new render context from a skia-canvas context
+ */
+declare function createRenderContext(ctx: CanvasRenderingContext2D, canvas: Canvas): RenderContext;
+/**
+ * Save the current rendering state to the stack
+ */
+declare function pushState(context: RenderContext): void;
+/**
+ * Restore the previous rendering state from the stack
+ */
+declare function popState(context: RenderContext): void;
+export type { RenderContext };
+export { createRenderContext, pushState, popState };

package/packages/renderer/src/context.js

@@ -0,0 +1,45 @@
+"use strict";
+// context.ts
+// Rendering context — wraps the skia-canvas drawing context
+// Provides a high-level API for rendering operations
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRenderContext = createRenderContext;
+exports.pushState = pushState;
+exports.popState = popState;
+/**
+ * Creates a new render context from a skia-canvas context
+ */
+function createRenderContext(ctx, canvas) {
+    return {
+        ctx,
+        canvas,
+        state: {
+            fillColor: '#000000',
+            strokeColor: '#000000',
+            strokeWidth: 1,
+            opacity: 1,
+            font: '12px sans-serif',
+            textAlign: 'left',
+            textBaseline: 'top'
+        },
+        stateStack: []
+    };
+}
+/**
+ * Save the current rendering state to the stack
+ */
+function pushState(context) {
+    context.stateStack.push({ ...context.state });
+    context.ctx.save();
+}
+/**
+ * Restore the previous rendering state from the stack
+ */
+function popState(context) {
+    const saved = context.stateStack.pop();
+    if (saved) {
+        context.state = saved;
+        context.ctx.restore();
+    }
+}
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["context.ts"],"names":[],"mappings":";AAAA,aAAa;AACb,4DAA4D;AAC5D,qDAAqD;;AAgF5C,kDAAmB;AAAE,8BAAS;AAAE,4BAAQ;AA3CjD;;GAEG;AACH,SAAS,mBAAmB,CAC1B,GAA6B,EAC7B,MAAc;IAEd,OAAO;QACL,GAAG;QACH,MAAM;QACN,KAAK,EAAE;YACL,SAAS,EAAE,SAAS;YACpB,WAAW,EAAE,SAAS;YACtB,WAAW,EAAE,CAAC;YACd,OAAO,EAAE,CAAC;YACV,IAAI,EAAE,iBAAiB;YACvB,SAAS,EAAE,MAAM;YACjB,YAAY,EAAE,KAAK;SACpB;QACD,UAAU,EAAE,EAAE;KACf,CAAA;AACH,CAAC;AAED;;GAEG;AACH,SAAS,SAAS,CAAC,OAAsB;IACvC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC,CAAA;IAC7C,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,CAAA;AACpB,CAAC;AAED;;GAEG;AACH,SAAS,QAAQ,CAAC,OAAsB;IACtC,MAAM,KAAK,GAAG,OAAO,CAAC,UAAU,CAAC,GAAG,EAAE,CAAA;IACtC,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;QACrB,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,CAAA;IACvB,CAAC;AACH,CAAC"}

package/packages/renderer/src/context.ts

@@ -0,0 +1,83 @@
+// context.ts
+// Rendering context — wraps the skia-canvas drawing context
+// Provides a high-level API for rendering operations
+
+import type { Canvas, CanvasRenderingContext2D } from 'skia-canvas'
+
+/**
+ * RenderContext wraps the skia-canvas 2D rendering context
+ * and provides additional state for rendering operations
+ */
+interface RenderContext {
+  // The skia-canvas rendering context
+  ctx: CanvasRenderingContext2D
+  
+  // The canvas being drawn to
+  canvas: Canvas
+  
+  // Current drawing state
+  state: {
+    // Current fill color
+    fillColor: string
+    // Current stroke color
+    strokeColor: string
+    // Current stroke width
+    strokeWidth: number
+    // Current opacity
+    opacity: number
+    // Current font
+    font: string
+    // Current text alignment
+    textAlign: 'left' | 'center' | 'right'
+    // Current text baseline
+    textBaseline: 'top' | 'middle' | 'bottom'
+  }
+  
+  // Stack of saved states for push/pop operations
+  stateStack: RenderContext['state'][]
+}
+
+/**
+ * Creates a new render context from a skia-canvas context
+ */
+function createRenderContext(
+  ctx: CanvasRenderingContext2D,
+  canvas: Canvas
+): RenderContext {
+  return {
+    ctx,
+    canvas,
+    state: {
+      fillColor: '#000000',
+      strokeColor: '#000000',
+      strokeWidth: 1,
+      opacity: 1,
+      font: '12px sans-serif',
+      textAlign: 'left',
+      textBaseline: 'top'
+    },
+    stateStack: []
+  }
+}
+
+/**
+ * Save the current rendering state to the stack
+ */
+function pushState(context: RenderContext): void {
+  context.stateStack.push({ ...context.state })
+  context.ctx.save()
+}
+
+/**
+ * Restore the previous rendering state from the stack
+ */
+function popState(context: RenderContext): void {
+  const saved = context.stateStack.pop()
+  if (saved) {
+    context.state = saved
+    context.ctx.restore()
+  }
+}
+
+export type { RenderContext }
+export { createRenderContext, pushState, popState }

package/packages/renderer/src/dirty-region.d.ts

@@ -0,0 +1,42 @@
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * Tracks dirty regions that need re-rendering
+ */
+export declare class DirtyRegionTracker {
+    private regions;
+    private canvasWidth;
+    private canvasHeight;
+    constructor(width: number, height: number);
+    /**
+     * Mark a region as dirty
+     */
+    markDirty(rect: Rect): void;
+    /**
+     * Mark entire canvas as dirty
+     */
+    markAllDirty(): void;
+    /**
+     * Get merged dirty regions (optimized)
+     */
+    getDirtyRegions(): Rect[];
+    /**
+     * Clear all dirty regions
+     */
+    clear(): void;
+    /**
+     * Check if region needs rendering
+     */
+    isDirty(rect: Rect): boolean;
+    /**
+     * Resize tracker when canvas resizes
+     */
+    resize(width: number, height: number): void;
+    private clampRect;
+    private rectsIntersect;
+    private mergeRegions;
+}

package/packages/renderer/src/dirty-region.js

@@ -0,0 +1,106 @@
+"use strict";
+// dirty-region.ts
+// Dirty region tracking for incremental rendering optimization
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DirtyRegionTracker = void 0;
+/**
+ * Tracks dirty regions that need re-rendering
+ */
+class DirtyRegionTracker {
+    constructor(width, height) {
+        this.regions = [];
+        this.canvasWidth = width;
+        this.canvasHeight = height;
+    }
+    /**
+     * Mark a region as dirty
+     */
+    markDirty(rect) {
+        this.regions.push(this.clampRect(rect));
+    }
+    /**
+     * Mark entire canvas as dirty
+     */
+    markAllDirty() {
+        this.regions = [{
+                x: 0,
+                y: 0,
+                width: this.canvasWidth,
+                height: this.canvasHeight,
+            }];
+    }
+    /**
+     * Get merged dirty regions (optimized)
+     */
+    getDirtyRegions() {
+        if (this.regions.length === 0)
+            return [];
+        if (this.regions.length === 1)
+            return this.regions;
+        // Simple merging: if regions overlap significantly, merge them
+        return this.mergeRegions(this.regions);
+    }
+    /**
+     * Clear all dirty regions
+     */
+    clear() {
+        this.regions = [];
+    }
+    /**
+     * Check if region needs rendering
+     */
+    isDirty(rect) {
+        return this.regions.some(r => this.rectsIntersect(r, rect));
+    }
+    /**
+     * Resize tracker when canvas resizes
+     */
+    resize(width, height) {
+        this.canvasWidth = width;
+        this.canvasHeight = height;
+        this.markAllDirty();
+    }
+    // Private helpers
+    clampRect(rect) {
+        return {
+            x: Math.max(0, rect.x),
+            y: Math.max(0, rect.y),
+            width: Math.min(this.canvasWidth - rect.x, rect.width),
+            height: Math.min(this.canvasHeight - rect.y, rect.height),
+        };
+    }
+    rectsIntersect(r1, r2) {
+        return !(r1.x + r1.width < r2.x ||
+            r2.x + r2.width < r1.x ||
+            r1.y + r1.height < r2.y ||
+            r2.y + r2.height < r1.y);
+    }
+    mergeRegions(rects) {
+        if (rects.length <= 1)
+            return rects;
+        const sorted = [...rects].sort((a, b) => a.x - b.x);
+        const merged = [];
+        for (const rect of sorted) {
+            const last = merged[merged.length - 1];
+            if (last && this.rectsIntersect(last, rect)) {
+                // Merge by creating bounding box
+                const minX = Math.min(last.x, rect.x);
+                const minY = Math.min(last.y, rect.y);
+                const maxX = Math.max(last.x + last.width, rect.x + rect.width);
+                const maxY = Math.max(last.y + last.height, rect.y + rect.height);
+                merged[merged.length - 1] = {
+                    x: minX,
+                    y: minY,
+                    width: maxX - minX,
+                    height: maxY - minY,
+                };
+            }
+            else {
+                merged.push(rect);
+            }
+        }
+        return merged;
+    }
+}
+exports.DirtyRegionTracker = DirtyRegionTracker;
+//# sourceMappingURL=dirty-region.js.map

package/packages/renderer/src/dirty-region.js.map

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