@wz927/codedesign 0.2.0 → 0.2.2

package/figma-plugin/dist/code.js

@@ -0,0 +1,363 @@
+/// <reference types="@figma/plugin-typings" />
+/**
+ * codedesign Figma Plugin — sandbox side.
+ *
+ * The sandbox cannot open WebSockets directly; ui.html does that, and we
+ * relay messages via figma.ui.postMessage / figma.ui.onmessage.
+ *
+ * Incoming messages from CLI (via UI): { id, op, params }
+ * Outgoing responses to CLI (via UI):  { id, ok, data?, error? }
+ */
+const PLUGIN_VERSION = '0.1.0';
+figma.showUI(__html__, { width: 360, height: 360, themeColors: true });
+function send(msg) {
+    figma.ui.postMessage({ __kind: 'to_cli', msg });
+}
+async function sendHello() {
+    var _a;
+    const page = figma.currentPage;
+    send({
+        id: 'hello-' + Date.now(),
+        op: 'hello',
+        params: {
+            fileKey: (_a = figma.fileKey) !== null && _a !== void 0 ? _a : 'unknown',
+            fileName: figma.root.name,
+            pageId: page.id,
+            pageName: page.name,
+            pluginVersion: PLUGIN_VERSION,
+        },
+    });
+}
+figma.ui.onmessage = async (m) => {
+    var _a;
+    if (!m)
+        return;
+    if (m.__kind === 'ws_open') {
+        sendHello();
+        return;
+    }
+    if (m.__kind === 'ws_close')
+        return;
+    if (m.__kind === 'from_cli' && m.msg) {
+        const req = m.msg;
+        try {
+            const data = await handle(req);
+            const res = { id: req.id, ok: true, data };
+            send(res);
+        }
+        catch (e) {
+            const res = { id: req.id, ok: false, error: (_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : String(e) };
+            send(res);
+        }
+    }
+};
+// ─── Helpers ─────────────────────────────────────────────────────────────
+function toPaint(p) {
+    var _a, _b;
+    if (!p)
+        throw new Error('Empty paint');
+    if (p.type === 'SOLID') {
+        return { type: 'SOLID', color: { r: p.color.r, g: p.color.g, b: p.color.b }, opacity: (_a = p.color.a) !== null && _a !== void 0 ? _a : 1 };
+    }
+    if (p.type === 'GRADIENT_LINEAR') {
+        const stops = ((_b = p.stops) !== null && _b !== void 0 ? _b : []).map((s) => {
+            var _a;
+            return ({
+                position: s.position,
+                color: { r: s.color.r, g: s.color.g, b: s.color.b, a: (_a = s.color.a) !== null && _a !== void 0 ? _a : 1 },
+            });
+        });
+        return {
+            type: 'GRADIENT_LINEAR',
+            gradientStops: stops,
+            gradientTransform: [[1, 0, 0], [0, 1, 0]],
+        };
+    }
+    throw new Error('Unsupported paint type ' + p.type);
+}
+function getParent(id) {
+    if (!id)
+        return figma.currentPage;
+    const n = figma.getNodeById(id);
+    if (!n)
+        throw new Error('Parent not found: ' + id);
+    if (!('appendChild' in n))
+        throw new Error('Node cannot have children: ' + id);
+    return n;
+}
+function applyFrameProps(node, p) {
+    if (typeof p.x === 'number')
+        node.x = p.x;
+    if (typeof p.y === 'number')
+        node.y = p.y;
+    if (typeof p.width === 'number' && typeof p.height === 'number')
+        node.resize(p.width, p.height);
+    if (typeof p.cornerRadius === 'number')
+        node.cornerRadius = p.cornerRadius;
+    if (p.fills)
+        node.fills = p.fills.map(toPaint);
+    if (p.strokes)
+        node.strokes = p.strokes.map(toPaint);
+    if (typeof p.strokeWeight === 'number')
+        node.strokeWeight = p.strokeWeight;
+    if (p.layoutMode)
+        node.layoutMode = p.layoutMode;
+    if (typeof p.itemSpacing === 'number')
+        node.itemSpacing = p.itemSpacing;
+    if (typeof p.paddingLeft === 'number')
+        node.paddingLeft = p.paddingLeft;
+    if (typeof p.paddingRight === 'number')
+        node.paddingRight = p.paddingRight;
+    if (typeof p.paddingTop === 'number')
+        node.paddingTop = p.paddingTop;
+    if (typeof p.paddingBottom === 'number')
+        node.paddingBottom = p.paddingBottom;
+    if (p.primaryAxisAlignItems)
+        node.primaryAxisAlignItems = p.primaryAxisAlignItems;
+    if (p.counterAxisAlignItems)
+        node.counterAxisAlignItems = p.counterAxisAlignItems;
+    if (typeof p.clipsContent === 'boolean')
+        node.clipsContent = p.clipsContent;
+    if (typeof p.name === 'string')
+        node.name = p.name;
+}
+function nodeSummary(n) {
+    const base = { id: n.id, name: n.name, type: n.type };
+    if ('x' in n)
+        base.x = n.x;
+    if ('y' in n)
+        base.y = n.y;
+    if ('width' in n)
+        base.width = n.width;
+    if ('height' in n)
+        base.height = n.height;
+    if ('children' in n)
+        base.childCount = n.children.length;
+    return base;
+}
+async function loadFontFor(props) {
+    var _a, _b;
+    const family = (_a = props.fontFamily) !== null && _a !== void 0 ? _a : 'Inter';
+    const style = (_b = props.fontStyle) !== null && _b !== void 0 ? _b : 'Regular';
+    await figma.loadFontAsync({ family, style });
+    return { family, style };
+}
+// ─── Ops ─────────────────────────────────────────────────────────────────
+async function handle(req) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const p = (_a = req.params) !== null && _a !== void 0 ? _a : {};
+    switch (req.op) {
+        case 'getCurrentPage':
+            return { id: figma.currentPage.id, name: figma.currentPage.name };
+        case 'getSelection':
+            return figma.currentPage.selection.map(nodeSummary);
+        case 'getNode': {
+            const n = figma.getNodeById(p.id);
+            if (!n)
+                throw new Error('Not found: ' + p.id);
+            const base = nodeSummary(n);
+            if ('children' in n)
+                base.children = n.children.map(nodeSummary);
+            if ('fills' in n)
+                base.fills = n.fills;
+            if ('characters' in n)
+                base.characters = n.characters;
+            return base;
+        }
+        case 'createFrame': {
+            const frame = figma.createFrame();
+            getParent(p.parentId).appendChild(frame);
+            applyFrameProps(frame, p);
+            return nodeSummary(frame);
+        }
+        case 'createText': {
+            const font = await loadFontFor(p);
+            const t = figma.createText();
+            getParent(p.parentId).appendChild(t);
+            t.fontName = { family: font.family, style: font.style };
+            t.characters = (_b = p.characters) !== null && _b !== void 0 ? _b : '';
+            if (typeof p.x === 'number')
+                t.x = p.x;
+            if (typeof p.y === 'number')
+                t.y = p.y;
+            if (typeof p.fontSize === 'number')
+                t.fontSize = p.fontSize;
+            if (typeof p.lineHeight === 'number')
+                t.lineHeight = { unit: 'PIXELS', value: p.lineHeight };
+            if (typeof p.letterSpacing === 'number')
+                t.letterSpacing = { unit: 'PIXELS', value: p.letterSpacing };
+            if (p.textAlignHorizontal)
+                t.textAlignHorizontal = p.textAlignHorizontal;
+            if (p.fills)
+                t.fills = p.fills.map(toPaint);
+            if (typeof p.width === 'number')
+                t.resize(p.width, t.height);
+            if (p.autoResize)
+                t.textAutoResize = p.autoResize;
+            if (typeof p.name === 'string')
+                t.name = p.name;
+            return nodeSummary(t);
+        }
+        case 'createRectangle': {
+            const r = figma.createRectangle();
+            getParent(p.parentId).appendChild(r);
+            if (typeof p.x === 'number')
+                r.x = p.x;
+            if (typeof p.y === 'number')
+                r.y = p.y;
+            r.resize(p.width, p.height);
+            if (typeof p.cornerRadius === 'number')
+                r.cornerRadius = p.cornerRadius;
+            if (p.fills)
+                r.fills = p.fills.map(toPaint);
+            if (p.strokes)
+                r.strokes = p.strokes.map(toPaint);
+            if (typeof p.strokeWeight === 'number')
+                r.strokeWeight = p.strokeWeight;
+            if (typeof p.name === 'string')
+                r.name = p.name;
+            return nodeSummary(r);
+        }
+        case 'createEllipse': {
+            const e = figma.createEllipse();
+            getParent(p.parentId).appendChild(e);
+            if (typeof p.x === 'number')
+                e.x = p.x;
+            if (typeof p.y === 'number')
+                e.y = p.y;
+            e.resize(p.width, p.height);
+            if (p.fills)
+                e.fills = p.fills.map(toPaint);
+            if (p.strokes)
+                e.strokes = p.strokes.map(toPaint);
+            if (typeof p.strokeWeight === 'number')
+                e.strokeWeight = p.strokeWeight;
+            if (typeof p.name === 'string')
+                e.name = p.name;
+            return nodeSummary(e);
+        }
+        case 'setProps': {
+            const n = figma.getNodeById(p.id);
+            if (!n)
+                throw new Error('Not found: ' + p.id);
+            const patch = (_c = p.patch) !== null && _c !== void 0 ? _c : {};
+            if ('characters' in n && typeof patch.characters === 'string') {
+                await figma.loadFontAsync(n.fontName);
+                n.characters = patch.characters;
+            }
+            if ('resize' in n && (typeof patch.width === 'number' || typeof patch.height === 'number')) {
+                n.resize((_d = patch.width) !== null && _d !== void 0 ? _d : n.width, (_e = patch.height) !== null && _e !== void 0 ? _e : n.height);
+            }
+            for (const k of ['x', 'y', 'cornerRadius', 'opacity', 'rotation', 'visible', 'name', 'itemSpacing',
+                'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'strokeWeight', 'layoutMode',
+                'primaryAxisAlignItems', 'counterAxisAlignItems', 'clipsContent', 'textAlignHorizontal', 'fontSize']) {
+                if (patch[k] !== undefined)
+                    n[k] = patch[k];
+            }
+            if (patch.fills)
+                n.fills = patch.fills.map(toPaint);
+            if (patch.strokes)
+                n.strokes = patch.strokes.map(toPaint);
+            return nodeSummary(n);
+        }
+        case 'setAutoLayout': {
+            const n = figma.getNodeById(p.id);
+            if (!n)
+                throw new Error('Not found: ' + p.id);
+            n.layoutMode = p.layoutMode;
+            if (typeof p.itemSpacing === 'number')
+                n.itemSpacing = p.itemSpacing;
+            if (p.padding) {
+                n.paddingLeft = p.padding.left;
+                n.paddingRight = p.padding.right;
+                n.paddingTop = p.padding.top;
+                n.paddingBottom = p.padding.bottom;
+            }
+            if (p.primaryAxisAlignItems)
+                n.primaryAxisAlignItems = p.primaryAxisAlignItems;
+            if (p.counterAxisAlignItems)
+                n.counterAxisAlignItems = p.counterAxisAlignItems;
+            return nodeSummary(n);
+        }
+        case 'appendChild': {
+            const par = getParent(p.parentId);
+            const child = figma.getNodeById(p.childId);
+            if (!child)
+                throw new Error('Child not found');
+            par.appendChild(child);
+            return nodeSummary(child);
+        }
+        case 'deleteNode': {
+            const n = figma.getNodeById(p.id);
+            if (!n)
+                throw new Error('Not found');
+            n.remove();
+            return { deleted: p.id };
+        }
+        case 'cloneNode': {
+            const n = figma.getNodeById(p.id);
+            if (!n || !('clone' in n))
+                throw new Error('Cannot clone');
+            const c = n.clone();
+            if (p.parentId)
+                getParent(p.parentId).appendChild(c);
+            else
+                (_f = n.parent) === null || _f === void 0 ? void 0 : _f.appendChild(c);
+            if (typeof p.dx === 'number')
+                c.x += p.dx;
+            if (typeof p.dy === 'number')
+                c.y += p.dy;
+            return nodeSummary(c);
+        }
+        case 'listStyles':
+            return {
+                paint: figma.getLocalPaintStyles().map((s) => ({ id: s.id, key: s.key, name: s.name })),
+                text: figma.getLocalTextStyles().map((s) => ({ id: s.id, key: s.key, name: s.name })),
+                effect: figma.getLocalEffectStyles().map((s) => ({ id: s.id, key: s.key, name: s.name })),
+            };
+        case 'listComponents':
+            return figma.root.findAllWithCriteria({ types: ['COMPONENT', 'COMPONENT_SET'] }).map((c) => ({
+                id: c.id, key: c.key, name: c.name, type: c.type,
+            }));
+        case 'createInstance': {
+            const all = figma.root.findAllWithCriteria({ types: ['COMPONENT'] });
+            const comp = all.find((c) => c.key === p.componentKey || c.id === p.componentKey);
+            if (!comp)
+                throw new Error('Component not found: ' + p.componentKey);
+            const inst = comp.createInstance();
+            getParent(p.parentId).appendChild(inst);
+            if (typeof p.x === 'number')
+                inst.x = p.x;
+            if (typeof p.y === 'number')
+                inst.y = p.y;
+            return nodeSummary(inst);
+        }
+        case 'viewport': {
+            const n = figma.getNodeById(p.id);
+            if (!n)
+                throw new Error('Not found');
+            figma.viewport.scrollAndZoomIntoView([n]);
+            if (typeof p.zoom === 'number')
+                figma.viewport.zoom = p.zoom;
+            return { ok: true };
+        }
+        case 'exportNode': {
+            const n = figma.getNodeById(p.id);
+            if (!n || !('exportAsync' in n))
+                throw new Error('Node not exportable');
+            const format = ((_g = p.format) !== null && _g !== void 0 ? _g : 'PNG').toUpperCase();
+            const settings = { format };
+            if (format === 'PNG' || format === 'JPG')
+                settings.constraint = { type: 'SCALE', value: (_h = p.scale) !== null && _h !== void 0 ? _h : 2 };
+            const bytes = await n.exportAsync(settings);
+            const b64 = figma.base64Encode(bytes);
+            return { bytesBase64: b64, format };
+        }
+        case 'notify':
+            figma.notify(p.message, { error: !!p.error });
+            return { ok: true };
+        default:
+            throw new Error('Unknown op: ' + req.op);
+    }
+}
+// Keep the plugin alive; user closes it manually.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wz927/codedesign",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Terminal AI agent for designers — drive Figma through natural-language conversation.",
   "type": "module",
   "bin": {
@@ -9,7 +9,8 @@
   "files": [
     "dist/main.js",
     "figma-plugin/manifest.json",
-    "figma-plugin/ui.html"
+    "figma-plugin/ui.html",
+    "figma-plugin/dist/code.js"
   ],
   "scripts": {
     "dev": "bun run src/main.tsx",