@wz927/codedesign 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of @wz927/codedesign might be problematic. Click here for more details.
- package/README.md +124 -0
- package/dist/main.js +2 -0
- package/figma-plugin/manifest.json +8 -0
- package/figma-plugin/ui.html +98 -0
- package/package.json +42 -0
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<!-- Figma Plugin UI: connects to the codedesign CLI WebSocket bridge.
|
|
2
|
+
The sandbox `code.ts` cannot open WebSockets, so all traffic is relayed
|
|
3
|
+
through this iframe via postMessage. -->
|
|
4
|
+
<!DOCTYPE html>
|
|
5
|
+
<html>
|
|
6
|
+
<head>
|
|
7
|
+
<meta charset="utf-8" />
|
|
8
|
+
<style>
|
|
9
|
+
:root {
|
|
10
|
+
color-scheme: dark light;
|
|
11
|
+
font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
|
|
12
|
+
font-size: 12px;
|
|
13
|
+
}
|
|
14
|
+
body { margin: 0; padding: 12px; }
|
|
15
|
+
h1 { margin: 0 0 8px; font-size: 13px; }
|
|
16
|
+
.row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
|
17
|
+
input { flex: 1; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; }
|
|
18
|
+
button { padding: 6px 10px; border: 1px solid #333; border-radius: 4px; background: #111; color: #fff; cursor: pointer; font-size: 12px; }
|
|
19
|
+
button.secondary { background: #eee; color: #111; border-color: #ccc; }
|
|
20
|
+
.status { padding: 6px 8px; border-radius: 4px; font-size: 12px; }
|
|
21
|
+
.ok { background: #0a7f2e22; color: #0a7f2e; }
|
|
22
|
+
.bad { background: #a8121222; color: #a81212; }
|
|
23
|
+
.log { margin-top: 8px; max-height: 200px; overflow: auto; font-family: ui-monospace, "SF Mono", monospace; font-size: 11px; background: #0000000a; padding: 6px; border-radius: 4px; white-space: pre-wrap; }
|
|
24
|
+
</style>
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
27
|
+
<h1>codedesign bridge</h1>
|
|
28
|
+
<div class="row">
|
|
29
|
+
<label style="min-width:70px;">WS URL</label>
|
|
30
|
+
<input id="url" value="ws://127.0.0.1:7778" />
|
|
31
|
+
<button id="connect">Connect</button>
|
|
32
|
+
</div>
|
|
33
|
+
<div id="status" class="status bad">Disconnected</div>
|
|
34
|
+
<div id="log" class="log"></div>
|
|
35
|
+
|
|
36
|
+
<script>
|
|
37
|
+
const urlInput = document.getElementById('url');
|
|
38
|
+
const statusEl = document.getElementById('status');
|
|
39
|
+
const logEl = document.getElementById('log');
|
|
40
|
+
const connectBtn = document.getElementById('connect');
|
|
41
|
+
let ws = null;
|
|
42
|
+
let reconnectTimer = null;
|
|
43
|
+
|
|
44
|
+
function log(line) {
|
|
45
|
+
const t = new Date().toLocaleTimeString();
|
|
46
|
+
logEl.textContent += `[${t}] ${line}\n`;
|
|
47
|
+
logEl.scrollTop = logEl.scrollHeight;
|
|
48
|
+
}
|
|
49
|
+
function setStatus(ok, msg) {
|
|
50
|
+
statusEl.className = 'status ' + (ok ? 'ok' : 'bad');
|
|
51
|
+
statusEl.textContent = msg;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function connect() {
|
|
55
|
+
if (ws) { try { ws.close(); } catch {} }
|
|
56
|
+
const url = urlInput.value.trim();
|
|
57
|
+
log('Connecting ' + url);
|
|
58
|
+
ws = new WebSocket(url);
|
|
59
|
+
ws.onopen = () => {
|
|
60
|
+
setStatus(true, 'Connected to codedesign CLI');
|
|
61
|
+
log('Open');
|
|
62
|
+
// Ask the sandbox to send hello info.
|
|
63
|
+
parent.postMessage({ pluginMessage: { __kind: 'ws_open' } }, '*');
|
|
64
|
+
};
|
|
65
|
+
ws.onclose = () => {
|
|
66
|
+
setStatus(false, 'Disconnected — click Connect to retry');
|
|
67
|
+
log('Closed');
|
|
68
|
+
parent.postMessage({ pluginMessage: { __kind: 'ws_close' } }, '*');
|
|
69
|
+
};
|
|
70
|
+
ws.onerror = (e) => { log('WebSocket error'); };
|
|
71
|
+
ws.onmessage = (ev) => {
|
|
72
|
+
// Forward CLI → sandbox
|
|
73
|
+
let msg;
|
|
74
|
+
try { msg = JSON.parse(ev.data); } catch { log('bad frame: ' + ev.data); return; }
|
|
75
|
+
parent.postMessage({ pluginMessage: { __kind: 'from_cli', msg } }, '*');
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
connectBtn.onclick = connect;
|
|
80
|
+
|
|
81
|
+
// Sandbox → CLI relay
|
|
82
|
+
window.onmessage = (event) => {
|
|
83
|
+
const m = event.data && event.data.pluginMessage;
|
|
84
|
+
if (!m) return;
|
|
85
|
+
if (m.__kind === 'to_cli') {
|
|
86
|
+
if (ws && ws.readyState === 1) {
|
|
87
|
+
ws.send(JSON.stringify(m.msg));
|
|
88
|
+
} else {
|
|
89
|
+
log('drop (ws closed): ' + m.msg.op);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
// Auto-connect on load.
|
|
95
|
+
connect();
|
|
96
|
+
</script>
|
|
97
|
+
</body>
|
|
98
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@wz927/codedesign",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Terminal AI agent for designers — drive Figma through natural-language conversation.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"bin": {
|
|
7
|
+
"codedesign": "./dist/main.js"
|
|
8
|
+
},
|
|
9
|
+
"files": [
|
|
10
|
+
"dist/main.js",
|
|
11
|
+
"figma-plugin/manifest.json",
|
|
12
|
+
"figma-plugin/ui.html"
|
|
13
|
+
],
|
|
14
|
+
"scripts": {
|
|
15
|
+
"dev": "bun run src/main.tsx",
|
|
16
|
+
"start": "bun run src/main.tsx",
|
|
17
|
+
"build": "bash scripts/build.sh",
|
|
18
|
+
"build:plugin": "cd figma-plugin && bun install && bun run build",
|
|
19
|
+
"typecheck": "tsc --noEmit",
|
|
20
|
+
"prepublishOnly": "bash scripts/build.sh"
|
|
21
|
+
},
|
|
22
|
+
"dependencies": {
|
|
23
|
+
"chalk": "^5.3.0",
|
|
24
|
+
"ink": "^5.0.1",
|
|
25
|
+
"ink-spinner": "^5.0.0",
|
|
26
|
+
"ink-text-input": "^6.0.0",
|
|
27
|
+
"openai": "^6.37.0",
|
|
28
|
+
"react": "^18.3.1",
|
|
29
|
+
"ws": "^8.18.0",
|
|
30
|
+
"zod": "^3.23.8"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@types/node": "^22.0.0",
|
|
34
|
+
"@types/react": "^18.3.3",
|
|
35
|
+
"@types/ws": "^8.5.12",
|
|
36
|
+
"javascript-obfuscator": "^5.4.2",
|
|
37
|
+
"typescript": "^5.5.4"
|
|
38
|
+
},
|
|
39
|
+
"engines": {
|
|
40
|
+
"node": ">=20"
|
|
41
|
+
}
|
|
42
|
+
}
|