hyperclaw 5.4.0 → 5.4.2

package/dist/renderer-B_ew6jRs.js

@@ -0,0 +1,228 @@
+const require_chunk = require('./chunk-jS-bbMI5.js');
+const require_paths = require('./paths-AIyBxIzm.js');
+const require_paths$1 = require('./paths-DPovhojT.js');
+const chalk = require_chunk.__toESM(require("chalk"));
+const fs_extra = require_chunk.__toESM(require("fs-extra"));
+const path = require_chunk.__toESM(require("path"));
+const crypto = require_chunk.__toESM(require("crypto"));
+
+//#region src/canvas/renderer.ts
+function randomId() {
+	return crypto.default.randomBytes(4).toString("hex");
+}
+var getCanvasDir, COMPONENT_TEMPLATES, CanvasRenderer;
+var init_renderer = require_chunk.__esm({ "src/canvas/renderer.ts"() {
+	require_paths$1.init_paths();
+	getCanvasDir = () => path.default.join(require_paths.getHyperClawDir(), "canvas");
+	COMPONENT_TEMPLATES = {
+		chart: (title, data) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  const { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } = window.Recharts || {};
+  if (!data || !ResponsiveContainer) return <div className="p-4 text-gray-400">Loading chart...</div>;
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-4">${title}</h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <LineChart data={data}>
+          <XAxis dataKey="label" stroke="#9ca3af" />
+          <YAxis stroke="#9ca3af" />
+          <Tooltip contentStyle={{ background: '#1f2937', border: '1px solid #374151' }} />
+          <Line type="monotone" dataKey="value" stroke="#06b6d4" strokeWidth={2} dot={false} />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}`,
+		table: (title, data) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  if (!Array.isArray(data) || data.length === 0) return <div className="p-4 text-gray-400">No data</div>;
+  const keys = Object.keys(data[0]);
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-4">${title}</h3>
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm text-left text-gray-300">
+          <thead className="text-xs text-gray-400 uppercase bg-gray-800">
+            <tr>{keys.map(k => <th key={k} className="px-4 py-2">{k}</th>)}</tr>
+          </thead>
+          <tbody>
+            {data.map((row, i) => (
+              <tr key={i} className="border-b border-gray-700 hover:bg-gray-800">
+                {keys.map(k => <td key={k} className="px-4 py-2">{String(row[k])}</td>)}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}`,
+		form: (title) => `
+function ${title.replace(/\W/g, "")}Component({ onSubmit }) {
+  const [values, setValues] = React.useState({});
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-4">${title}</h3>
+      <form onSubmit={e => { e.preventDefault(); onSubmit?.(values); }}
+            className="space-y-4">
+        <input
+          name="input"
+          className="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500"
+          placeholder="Type your answer…"
+          autoComplete="off"
+          onChange={e => setValues(v => ({ ...v, input: e.target.value }))}
+        />
+        <button type="submit"
+          className="bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-2 rounded">
+          Submit
+        </button>
+      </form>
+    </div>
+  );
+}`,
+		markdown: (title, data) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  return (
+    <div className="p-4 prose prose-invert max-w-none">
+      <h3 className="text-lg font-bold text-cyan-400 mb-2">${title}</h3>
+      <div className="text-gray-300 text-sm whitespace-pre-wrap">{data || ''}</div>
+    </div>
+  );
+}`,
+		image: (title, data) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-2">${title}</h3>
+      {data ? <img src={data} alt="${title}" className="max-w-full rounded" /> 
+             : <div className="text-gray-400">No image</div>}
+    </div>
+  );
+}`,
+		custom: (title) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-2">${title}</h3>
+      <pre className="text-green-400 text-xs overflow-auto">{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+}`,
+		script: (title) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  const raw = (data && data.script) || '';
+  const esc = raw.replace(/</g, '\\\\u003c').replace(/>/g, '\\\\u003e');
+  const html = '<!DOCTYPE html><html><body><script>' + esc + '<\\\\/script></body></html>';
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-2">${title}</h3>
+      <iframe title="Run" srcDoc={html} sandbox="allow-scripts" className="w-full border border-gray-700 rounded" style={{ minHeight: 200 }} />
+    </div>
+  );
+}`
+	};
+	CanvasRenderer = class {
+		canvasFile;
+		constructor() {
+			const canvasDir = getCanvasDir();
+			this.canvasFile = path.default.join(canvasDir, "state.json");
+			fs_extra.default.ensureDirSync(canvasDir);
+		}
+		async getOrCreate(sessionId) {
+			try {
+				return await fs_extra.default.readJson(this.canvasFile);
+			} catch {
+				return this.createCanvas(sessionId);
+			}
+		}
+		createCanvas(sessionId) {
+			return {
+				id: randomId(),
+				sessionId,
+				title: "HyperClaw Canvas",
+				components: [],
+				layout: "grid",
+				theme: "dark",
+				createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+				updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+			};
+		}
+		async addComponent(type, title, data) {
+			const canvas = await this.getOrCreate();
+			const now = (/* @__PURE__ */ new Date()).toISOString();
+			const component = {
+				id: randomId(),
+				type,
+				title,
+				jsx: COMPONENT_TEMPLATES[type](title, data),
+				data,
+				width: "half",
+				createdAt: now,
+				updatedAt: now
+			};
+			canvas.components.push(component);
+			canvas.updatedAt = now;
+			await fs_extra.default.writeJson(this.canvasFile, canvas, { spaces: 2 });
+			console.log(chalk.default.green(`\n  ✔  Canvas component added: ${type}/${title}`));
+			console.log(chalk.default.gray(`     View at: http://localhost:18789/canvas\n`));
+			return component;
+		}
+		async clear() {
+			const canvas = await this.getOrCreate();
+			canvas.components = [];
+			canvas.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+			await fs_extra.default.writeJson(this.canvasFile, canvas, { spaces: 2 });
+			console.log(chalk.default.green("  ✔  Canvas cleared\n"));
+		}
+		async show() {
+			const canvas = await this.getOrCreate();
+			console.log(chalk.default.bold.cyan("\n  🎨 CANVAS\n"));
+			if (canvas.components.length === 0) {
+				console.log(chalk.default.gray("  Canvas is empty."));
+				console.log(chalk.default.gray("  Add a component: hyperclaw canvas add chart \"My Chart\"\n"));
+				return;
+			}
+			for (const c of canvas.components) console.log(`  ${chalk.default.cyan(c.type.padEnd(10))} ${chalk.default.white(c.title)} ${chalk.default.gray(c.id)}`);
+			console.log();
+			console.log(chalk.default.gray(`  View live at: http://localhost:18789/canvas`));
+			console.log(chalk.default.gray(`  ${canvas.components.length} component(s)\n`));
+		}
+		async exportHtml() {
+			const canvas = await this.getOrCreate();
+			const componentsCode = canvas.components.map((c) => c.jsx).join("\n\n");
+			return `<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${canvas.title}</title>
+  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/recharts/umd/Recharts.js"></script>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>body { background: #0f172a; color: #e2e8f0; font-family: 'Inter', sans-serif; }</style>
+</head>
+<body>
+  <div id="root"></div>
+  <script>
+    ${componentsCode}
+
+    function HyperClawCanvas() {
+      return React.createElement('div', { className: 'grid grid-cols-2 gap-4 p-4 min-h-screen' },
+        ${canvas.components.map((c, i) => `React.createElement(${c.title.replace(/\W/g, "")}Component, { key: '${c.id}', data: ${JSON.stringify(c.data)} })`).join(",\n        ")}
+      );
+    }
+
+    ReactDOM.createRoot(document.getElementById('root')).render(
+      React.createElement(HyperClawCanvas)
+    );
+  </script>
+</body>
+</html>`;
+		}
+	};
+} });
+
+//#endregion
+init_renderer();
+exports.CanvasRenderer = CanvasRenderer;

package/dist/renderer-Cg3c41A5.js

@@ -0,0 +1,228 @@
+const require_chunk = require('./chunk-jS-bbMI5.js');
+const require_paths = require('./paths-AIyBxIzm.js');
+const require_paths$1 = require('./paths-DPovhojT.js');
+const chalk = require_chunk.__toESM(require("chalk"));
+const fs_extra = require_chunk.__toESM(require("fs-extra"));
+const path = require_chunk.__toESM(require("path"));
+const crypto = require_chunk.__toESM(require("crypto"));
+
+//#region src/canvas/renderer.ts
+function randomId() {
+	return crypto.default.randomBytes(4).toString("hex");
+}
+var getCanvasDir, COMPONENT_TEMPLATES, CanvasRenderer;
+var init_renderer = require_chunk.__esm({ "src/canvas/renderer.ts"() {
+	require_paths$1.init_paths();
+	getCanvasDir = () => path.default.join(require_paths.getHyperClawDir(), "canvas");
+	COMPONENT_TEMPLATES = {
+		chart: (title, data) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  const { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } = window.Recharts || {};
+  if (!data || !ResponsiveContainer) return <div className="p-4 text-gray-400">Loading chart...</div>;
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-4">${title}</h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <LineChart data={data}>
+          <XAxis dataKey="label" stroke="#9ca3af" />
+          <YAxis stroke="#9ca3af" />
+          <Tooltip contentStyle={{ background: '#1f2937', border: '1px solid #374151' }} />
+          <Line type="monotone" dataKey="value" stroke="#06b6d4" strokeWidth={2} dot={false} />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}`,
+		table: (title, data) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  if (!Array.isArray(data) || data.length === 0) return <div className="p-4 text-gray-400">No data</div>;
+  const keys = Object.keys(data[0]);
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-4">${title}</h3>
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm text-left text-gray-300">
+          <thead className="text-xs text-gray-400 uppercase bg-gray-800">
+            <tr>{keys.map(k => <th key={k} className="px-4 py-2">{k}</th>)}</tr>
+          </thead>
+          <tbody>
+            {data.map((row, i) => (
+              <tr key={i} className="border-b border-gray-700 hover:bg-gray-800">
+                {keys.map(k => <td key={k} className="px-4 py-2">{String(row[k])}</td>)}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}`,
+		form: (title) => `
+function ${title.replace(/\W/g, "")}Component({ onSubmit }) {
+  const [values, setValues] = React.useState({});
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-4">${title}</h3>
+      <form onSubmit={e => { e.preventDefault(); onSubmit?.(values); }}
+            className="space-y-4">
+        <input
+          name="input"
+          className="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500"
+          placeholder="Type your answer…"
+          autoComplete="off"
+          onChange={e => setValues(v => ({ ...v, input: e.target.value }))}
+        />
+        <button type="submit"
+          className="bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-2 rounded">
+          Submit
+        </button>
+      </form>
+    </div>
+  );
+}`,
+		markdown: (title, data) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  return (
+    <div className="p-4 prose prose-invert max-w-none">
+      <h3 className="text-lg font-bold text-cyan-400 mb-2">${title}</h3>
+      <div className="text-gray-300 text-sm whitespace-pre-wrap">{data || ''}</div>
+    </div>
+  );
+}`,
+		image: (title, data) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-2">${title}</h3>
+      {data ? <img src={data} alt="${title}" className="max-w-full rounded" /> 
+             : <div className="text-gray-400">No image</div>}
+    </div>
+  );
+}`,
+		custom: (title) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-2">${title}</h3>
+      <pre className="text-green-400 text-xs overflow-auto">{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+}`,
+		script: (title) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  const raw = (data && data.script) || '';
+  const esc = raw.replace(/</g, '\\\\u003c').replace(/>/g, '\\\\u003e');
+  const html = '<!DOCTYPE html><html><body><script>' + esc + '<\\\\/script></body></html>';
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-2">${title}</h3>
+      <iframe title="Run" srcDoc={html} sandbox="allow-scripts" className="w-full border border-gray-700 rounded" style={{ minHeight: 200 }} />
+    </div>
+  );
+}`
+	};
+	CanvasRenderer = class {
+		canvasFile;
+		constructor() {
+			const canvasDir = getCanvasDir();
+			this.canvasFile = path.default.join(canvasDir, "state.json");
+			fs_extra.default.ensureDirSync(canvasDir);
+		}
+		async getOrCreate(sessionId) {
+			try {
+				return await fs_extra.default.readJson(this.canvasFile);
+			} catch {
+				return this.createCanvas(sessionId);
+			}
+		}
+		createCanvas(sessionId) {
+			return {
+				id: randomId(),
+				sessionId,
+				title: "HyperClaw Canvas",
+				components: [],
+				layout: "grid",
+				theme: "dark",
+				createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+				updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+			};
+		}
+		async addComponent(type, title, data) {
+			const canvas = await this.getOrCreate();
+			const now = (/* @__PURE__ */ new Date()).toISOString();
+			const component = {
+				id: randomId(),
+				type,
+				title,
+				jsx: COMPONENT_TEMPLATES[type](title, data),
+				data,
+				width: "half",
+				createdAt: now,
+				updatedAt: now
+			};
+			canvas.components.push(component);
+			canvas.updatedAt = now;
+			await fs_extra.default.writeJson(this.canvasFile, canvas, { spaces: 2 });
+			console.log(chalk.default.green(`\n  ✔  Canvas component added: ${type}/${title}`));
+			console.log(chalk.default.gray(`     View at: http://localhost:18789/canvas\n`));
+			return component;
+		}
+		async clear() {
+			const canvas = await this.getOrCreate();
+			canvas.components = [];
+			canvas.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+			await fs_extra.default.writeJson(this.canvasFile, canvas, { spaces: 2 });
+			console.log(chalk.default.green("  ✔  Canvas cleared\n"));
+		}
+		async show() {
+			const canvas = await this.getOrCreate();
+			console.log(chalk.default.bold.cyan("\n  🎨 CANVAS\n"));
+			if (canvas.components.length === 0) {
+				console.log(chalk.default.gray("  Canvas is empty."));
+				console.log(chalk.default.gray("  Add a component: hyperclaw canvas add chart \"My Chart\"\n"));
+				return;
+			}
+			for (const c of canvas.components) console.log(`  ${chalk.default.cyan(c.type.padEnd(10))} ${chalk.default.white(c.title)} ${chalk.default.gray(c.id)}`);
+			console.log();
+			console.log(chalk.default.gray(`  View live at: http://localhost:18789/canvas`));
+			console.log(chalk.default.gray(`  ${canvas.components.length} component(s)\n`));
+		}
+		async exportHtml() {
+			const canvas = await this.getOrCreate();
+			const componentsCode = canvas.components.map((c) => c.jsx).join("\n\n");
+			return `<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${canvas.title}</title>
+  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/recharts/umd/Recharts.js"></script>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>body { background: #0f172a; color: #e2e8f0; font-family: 'Inter', sans-serif; }</style>
+</head>
+<body>
+  <div id="root"></div>
+  <script>
+    ${componentsCode}
+
+    function HyperClawCanvas() {
+      return React.createElement('div', { className: 'grid grid-cols-2 gap-4 p-4 min-h-screen' },
+        ${canvas.components.map((c, i) => `React.createElement(${c.title.replace(/\W/g, "")}Component, { key: '${c.id}', data: ${JSON.stringify(c.data)} })`).join(",\n        ")}
+      );
+    }
+
+    ReactDOM.createRoot(document.getElementById('root')).render(
+      React.createElement(HyperClawCanvas)
+    );
+  </script>
+</body>
+</html>`;
+		}
+	};
+} });
+
+//#endregion
+init_renderer();
+exports.CanvasRenderer = CanvasRenderer;

package/dist/renderer-UoPcgaAd.js

@@ -0,0 +1,228 @@
+const require_chunk = require('./chunk-jS-bbMI5.js');
+const require_paths = require('./paths-AIyBxIzm.js');
+const require_paths$1 = require('./paths-DPovhojT.js');
+const chalk = require_chunk.__toESM(require("chalk"));
+const fs_extra = require_chunk.__toESM(require("fs-extra"));
+const path = require_chunk.__toESM(require("path"));
+const crypto = require_chunk.__toESM(require("crypto"));
+
+//#region src/canvas/renderer.ts
+function randomId() {
+	return crypto.default.randomBytes(4).toString("hex");
+}
+var getCanvasDir, COMPONENT_TEMPLATES, CanvasRenderer;
+var init_renderer = require_chunk.__esm({ "src/canvas/renderer.ts"() {
+	require_paths$1.init_paths();
+	getCanvasDir = () => path.default.join(require_paths.getHyperClawDir(), "canvas");
+	COMPONENT_TEMPLATES = {
+		chart: (title, data) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  const { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } = window.Recharts || {};
+  if (!data || !ResponsiveContainer) return <div className="p-4 text-gray-400">Loading chart...</div>;
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-4">${title}</h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <LineChart data={data}>
+          <XAxis dataKey="label" stroke="#9ca3af" />
+          <YAxis stroke="#9ca3af" />
+          <Tooltip contentStyle={{ background: '#1f2937', border: '1px solid #374151' }} />
+          <Line type="monotone" dataKey="value" stroke="#06b6d4" strokeWidth={2} dot={false} />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}`,
+		table: (title, data) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  if (!Array.isArray(data) || data.length === 0) return <div className="p-4 text-gray-400">No data</div>;
+  const keys = Object.keys(data[0]);
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-4">${title}</h3>
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm text-left text-gray-300">
+          <thead className="text-xs text-gray-400 uppercase bg-gray-800">
+            <tr>{keys.map(k => <th key={k} className="px-4 py-2">{k}</th>)}</tr>
+          </thead>
+          <tbody>
+            {data.map((row, i) => (
+              <tr key={i} className="border-b border-gray-700 hover:bg-gray-800">
+                {keys.map(k => <td key={k} className="px-4 py-2">{String(row[k])}</td>)}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}`,
+		form: (title) => `
+function ${title.replace(/\W/g, "")}Component({ onSubmit }) {
+  const [values, setValues] = React.useState({});
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-4">${title}</h3>
+      <form onSubmit={e => { e.preventDefault(); onSubmit?.(values); }}
+            className="space-y-4">
+        <input
+          name="input"
+          className="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500"
+          placeholder="Type your answer…"
+          autoComplete="off"
+          onChange={e => setValues(v => ({ ...v, input: e.target.value }))}
+        />
+        <button type="submit"
+          className="bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-2 rounded">
+          Submit
+        </button>
+      </form>
+    </div>
+  );
+}`,
+		markdown: (title, data) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  return (
+    <div className="p-4 prose prose-invert max-w-none">
+      <h3 className="text-lg font-bold text-cyan-400 mb-2">${title}</h3>
+      <div className="text-gray-300 text-sm whitespace-pre-wrap">{data || ''}</div>
+    </div>
+  );
+}`,
+		image: (title, data) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-2">${title}</h3>
+      {data ? <img src={data} alt="${title}" className="max-w-full rounded" /> 
+             : <div className="text-gray-400">No image</div>}
+    </div>
+  );
+}`,
+		custom: (title) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-2">${title}</h3>
+      <pre className="text-green-400 text-xs overflow-auto">{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+}`,
+		script: (title) => `
+function ${title.replace(/\W/g, "")}Component({ data }) {
+  const raw = (data && data.script) || '';
+  const esc = raw.replace(/</g, '\\\\u003c').replace(/>/g, '\\\\u003e');
+  const html = '<!DOCTYPE html><html><body><script>' + esc + '<\\\\/script></body></html>';
+  return (
+    <div className="p-4">
+      <h3 className="text-lg font-bold text-cyan-400 mb-2">${title}</h3>
+      <iframe title="Run" srcDoc={html} sandbox="allow-scripts" className="w-full border border-gray-700 rounded" style={{ minHeight: 200 }} />
+    </div>
+  );
+}`
+	};
+	CanvasRenderer = class {
+		canvasFile;
+		constructor() {
+			const canvasDir = getCanvasDir();
+			this.canvasFile = path.default.join(canvasDir, "state.json");
+			fs_extra.default.ensureDirSync(canvasDir);
+		}
+		async getOrCreate(sessionId) {
+			try {
+				return await fs_extra.default.readJson(this.canvasFile);
+			} catch {
+				return this.createCanvas(sessionId);
+			}
+		}
+		createCanvas(sessionId) {
+			return {
+				id: randomId(),
+				sessionId,
+				title: "HyperClaw Canvas",
+				components: [],
+				layout: "grid",
+				theme: "dark",
+				createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+				updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+			};
+		}
+		async addComponent(type, title, data) {
+			const canvas = await this.getOrCreate();
+			const now = (/* @__PURE__ */ new Date()).toISOString();
+			const component = {
+				id: randomId(),
+				type,
+				title,
+				jsx: COMPONENT_TEMPLATES[type](title, data),
+				data,
+				width: "half",
+				createdAt: now,
+				updatedAt: now
+			};
+			canvas.components.push(component);
+			canvas.updatedAt = now;
+			await fs_extra.default.writeJson(this.canvasFile, canvas, { spaces: 2 });
+			console.log(chalk.default.green(`\n  ✔  Canvas component added: ${type}/${title}`));
+			console.log(chalk.default.gray(`     View at: http://localhost:18789/canvas\n`));
+			return component;
+		}
+		async clear() {
+			const canvas = await this.getOrCreate();
+			canvas.components = [];
+			canvas.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+			await fs_extra.default.writeJson(this.canvasFile, canvas, { spaces: 2 });
+			console.log(chalk.default.green("  ✔  Canvas cleared\n"));
+		}
+		async show() {
+			const canvas = await this.getOrCreate();
+			console.log(chalk.default.bold.cyan("\n  🎨 CANVAS\n"));
+			if (canvas.components.length === 0) {
+				console.log(chalk.default.gray("  Canvas is empty."));
+				console.log(chalk.default.gray("  Add a component: hyperclaw canvas add chart \"My Chart\"\n"));
+				return;
+			}
+			for (const c of canvas.components) console.log(`  ${chalk.default.cyan(c.type.padEnd(10))} ${chalk.default.white(c.title)} ${chalk.default.gray(c.id)}`);
+			console.log();
+			console.log(chalk.default.gray(`  View live at: http://localhost:18789/canvas`));
+			console.log(chalk.default.gray(`  ${canvas.components.length} component(s)\n`));
+		}
+		async exportHtml() {
+			const canvas = await this.getOrCreate();
+			const componentsCode = canvas.components.map((c) => c.jsx).join("\n\n");
+			return `<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${canvas.title}</title>
+  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/recharts/umd/Recharts.js"></script>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>body { background: #0f172a; color: #e2e8f0; font-family: 'Inter', sans-serif; }</style>
+</head>
+<body>
+  <div id="root"></div>
+  <script>
+    ${componentsCode}
+
+    function HyperClawCanvas() {
+      return React.createElement('div', { className: 'grid grid-cols-2 gap-4 p-4 min-h-screen' },
+        ${canvas.components.map((c, i) => `React.createElement(${c.title.replace(/\W/g, "")}Component, { key: '${c.id}', data: ${JSON.stringify(c.data)} })`).join(",\n        ")}
+      );
+    }
+
+    ReactDOM.createRoot(document.getElementById('root')).render(
+      React.createElement(HyperClawCanvas)
+    );
+  </script>
+</body>
+</html>`;
+		}
+	};
+} });
+
+//#endregion
+init_renderer();
+exports.CanvasRenderer = CanvasRenderer;