@venturewild/workspace 0.3.5 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@venturewild/workspace",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Claude Code Web — Replit/Lovable-style chat-first browser UI that wraps the AI agent already installed on your machine.",
   "license": "MIT",
   "bin": {

package/server/src/canvas/core.mjs

@@ -211,6 +211,12 @@ export function createCanvas({ baseDir } = {}) {
   const dir = baseDir || defaultCanvasDir();
   const blocksFile = path.join(dir, 'blocks.json');
   const themeFile = path.join(dir, 'theme.json');
+  // Server-side persistence for canvas state (layout, templates, user-theme).
+  // Fixes the localStorage-per-origin divergence bug (req-1 gave the user two
+  // origins → two divergent canvas states for the same workspace).
+  const layoutFile = path.join(dir, 'layout.json');
+  const templatesFile = path.join(dir, 'templates.json');
+  const userThemeFile = path.join(dir, 'user-theme.json');
 
   function ensureDir() {
     try {
@@ -298,10 +304,101 @@ export function createCanvas({ baseDir } = {}) {
     return theme;
   }
 
+  // --- canvas layout (which blocks exist and where) — one file per workspace ----
+
+  function getLayout() {
+    const v = readJsonSafe(layoutFile, null);
+    return v && typeof v === 'object' ? v : null;
+  }
+
+  function saveLayout(layout) {
+    // Validate: blocks is an array, layouts has an lg array.
+    const blocks = Array.isArray(layout?.blocks) ? layout.blocks : [];
+    const lg = Array.isArray(layout?.layouts?.lg) ? layout.layouts.lg : [];
+    const data = { blocks, layouts: { lg }, ts: Date.now() };
+    ensureDir();
+    try { writeJsonAtomic(layoutFile, data); } catch { /* best-effort */ }
+    return data;
+  }
+
+  // --- user templates (saved layouts) — global per install ----
+
+  function getTemplates() {
+    const v = readJsonSafe(templatesFile, null);
+    return Array.isArray(v) ? v : [];
+  }
+
+  function saveTemplates(templates) {
+    const data = Array.isArray(templates) ? templates : [];
+    ensureDir();
+    try { writeJsonAtomic(templatesFile, data); } catch { /* best-effort */ }
+    return data;
+  }
+
+  // --- user theme (mode + accent from the picker) — separate from the agent theme ---
+  // The agent theme (theme.json) holds tokens/wallpaper set by set_theme; the user
+  // theme holds the user's own mode+accent choice from the ThemePicker. They merge
+  // at render time (mergeAgentTheme in theme.js).
+
+  function getUserTheme() {
+    const v = readJsonSafe(userThemeFile, null);
+    return v && typeof v === 'object' ? v : null;
+  }
+
+  function saveUserTheme(raw) {
+    // Only persist allowlisted fields — mode, accent, hot, accentManual, tokens.
+    const accent = hexOr(raw?.accent);
+    const theme = {
+      mode: raw?.mode === 'dark' ? 'dark' : 'light',
+      accent: accent || '#0891b2',
+      hot: hexOr(raw?.hot) || (accent ? darkenHex(accent) : '#0e7490'),
+      accentManual: !!raw?.accentManual,
+      tokens: {},
+    };
+    if (raw?.tokens && typeof raw.tokens === 'object') {
+      for (const key of TOKEN_KEYS) {
+        const hex = hexOr(raw.tokens[key]);
+        if (hex) theme.tokens[key] = hex;
+      }
+    }
+    ensureDir();
+    try { writeJsonAtomic(userThemeFile, theme); } catch { /* best-effort */ }
+    return theme;
+  }
+
+  // Darken helper (standalone — can't import from theme.js which is client-only)
+  function darkenHex(hex, f = 0.16) {
+    const h = hex.replace('#', '');
+    const k = 1 - f;
+    const c = (i) => Math.max(0, Math.min(255, Math.round(parseInt(h.slice(i, i + 2), 16) * k)));
+    return `#${[0, 2, 4].map((i) => c(i).toString(16).padStart(2, '0')).join('')}`;
+  }
+
+  // --- batch get/save (used by /api/canvas/state) ---
+
+  function getState() {
+    return {
+      layout: getLayout(),
+      templates: getTemplates(),
+      userTheme: getUserTheme(),
+    };
+  }
+
+  function saveState(updates) {
+    const result = {};
+    if (updates.layout) result.layout = saveLayout(updates.layout);
+    if (updates.templates) result.templates = saveTemplates(updates.templates);
+    if (updates.userTheme) result.userTheme = saveUserTheme(updates.userTheme);
+    return result;
+  }
+
   return {
-    dir, blocksFile, themeFile,
+    dir, blocksFile, themeFile, layoutFile, templatesFile, userThemeFile,
     listBlocks, getBlock, addBlock, updateBlock, removeBlock,
     getTheme, setTheme,
+    getLayout, saveLayout, getTemplates, saveTemplates,
+    getUserTheme, saveUserTheme,
+    getState, saveState,
   };
 }
 

package/server/src/index.mjs

@@ -1801,6 +1801,22 @@ export async function createServer(overrides = {}) {
     return c.json({ theme: canvas.getTheme() });
   });
 
+  // Canvas state — the source of truth for layout, templates, and user-theme.
+  // Fixes the localStorage-per-origin divergence (req-1 gave two origins for the
+  // same workspace → divergent canvas). Server stores the canonical state; client
+  // uses localStorage as a read-through cache.
+  app.get('/api/canvas/state', (c) => {
+    const forbidden = require(c, 'chat');
+    if (forbidden) return forbidden;
+    return c.json(canvas.getState());
+  });
+  app.post('/api/canvas/state', async (c) => {
+    const forbidden = require(c, 'chatWrite');
+    if (forbidden) return forbidden;
+    const body = await c.req.json().catch(() => ({}));
+    return c.json({ ok: true, ...canvas.saveState(body) });
+  });
+
   // The built site, served SAME-ORIGIN through this (already authed) server — no
   // squatted dev port, no mixed-content under the public proxy. The build dir
   // comes from preview.json (written by the agent's launch_preview / record_use).