@motion-proto/live-tokens 0.1.0

package/README.md

@@ -0,0 +1,41 @@
+# Live Tokens
+
+A starter Svelte + Vite site with a full design-token system and an in-browser editor.
+
+## What you get
+
+- **Design-token admin panel** at `/admin` (dev-only). Edit colors, typography, spacing, radii, shadows, and motion, and see the whole site update live.
+- **Live editor overlay** pinned to the top-right of every page in dev. Opens the token editor in a side panel or floating window without leaving the page you're styling.
+- **Page Source** button — jumps straight to the current page's Svelte file in VS Code (`vscode://` link).
+- **Component library** at `/components`: Button, Card, Dialog, Badge, Tabs, Tooltip, Toggle, and more.
+- **Token persistence**: each saved palette is a JSON file in `tokens/`. The active palette syncs into `src/styles/variables.css` on save, so production builds ship pure CSS.
+
+## Quick start
+
+```bash
+npm install
+npm run dev
+```
+
+Open http://localhost:5173. The editor overlay sits in the top-right corner. Click **Editor** to expand it, or hit **Fullscreen** to jump to `/admin`.
+
+## Layout
+
+- `src/pages/Landing.svelte` — the welcome page (replace this with your site)
+- `src/pages/Admin.svelte` — design-system editor
+- `src/pages/ShowcasePage.svelte` — component showcase
+- `src/components/` — the reusable components
+- `src/showcase/` — the editor UI (tabs, palette editors, curve editor, backup browser)
+- `src/lib/` — the overlay, router glue, token persistence, and color helpers
+- `src/styles/variables.css` — the generated CSS variables (this is the source of truth at runtime)
+- `tokens/` — persisted palette files; `_active.json` selects the palette loaded on dev, `_production.json` selects the palette synced to CSS
+
+## How the editor ships changes to prod
+
+1. Edit in `/admin` → the overlay writes to the active JSON file in `tokens/`.
+2. When you promote a palette to "production", its variables are written into `src/styles/variables.css` and backed up under `src/styles/_backups/`.
+3. `npm run build` bundles that CSS file as-is. No token-editor code or JSON lookups in the prod bundle.
+
+## License
+
+MIT. Originally extracted from RuneGoblin.

package/dist-plugin/index.cjs

@@ -0,0 +1,444 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vite-plugin/index.ts
+var index_exports = {};
+__export(index_exports, {
+  tokenFileApi: () => tokenFileApi
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/vite-plugin/tokenFileApi.ts
+var import_fs = __toESM(require("fs"), 1);
+var import_path = __toESM(require("path"), 1);
+function tokenFileApi(opts) {
+  const TOKENS_DIR = import_path.default.resolve(opts.tokensDir);
+  const CSS_PATH = import_path.default.resolve(opts.variablesCssPath);
+  const TOKENS_BACKUP_DIR = opts.tokensBackupDir ? import_path.default.resolve(opts.tokensBackupDir) : import_path.default.join(TOKENS_DIR, "_backups");
+  const CSS_BACKUP_DIR = opts.cssBackupDir ? import_path.default.resolve(opts.cssBackupDir) : import_path.default.join(import_path.default.dirname(CSS_PATH), "_backups");
+  const API_BASE = opts.apiBase ?? "/api";
+  const ACTIVE_FILE = import_path.default.join(TOKENS_DIR, "_active.json");
+  const PRODUCTION_FILE = import_path.default.join(TOKENS_DIR, "_production.json");
+  function ensureTokensDir() {
+    if (!import_fs.default.existsSync(TOKENS_DIR)) {
+      import_fs.default.mkdirSync(TOKENS_DIR, { recursive: true });
+    }
+    if (!import_fs.default.existsSync(import_path.default.join(TOKENS_DIR, "default.json"))) {
+      const defaultTokens = {
+        name: "Default",
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        editorConfigs: {},
+        cssVariables: {}
+      };
+      import_fs.default.writeFileSync(import_path.default.join(TOKENS_DIR, "default.json"), JSON.stringify(defaultTokens, null, 2));
+    }
+    if (!import_fs.default.existsSync(ACTIVE_FILE)) {
+      import_fs.default.writeFileSync(ACTIVE_FILE, JSON.stringify({ activeFile: "default" }));
+    }
+    if (!import_fs.default.existsSync(PRODUCTION_FILE)) {
+      const activeFile = getActiveFileName();
+      import_fs.default.writeFileSync(PRODUCTION_FILE, JSON.stringify({ productionFile: activeFile }));
+    }
+  }
+  function backupTokenFile(filePath, fileName) {
+    if (!import_fs.default.existsSync(filePath)) return;
+    if (!import_fs.default.existsSync(TOKENS_BACKUP_DIR)) {
+      import_fs.default.mkdirSync(TOKENS_BACKUP_DIR, { recursive: true });
+    }
+    const timestamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
+    const backupPath = import_path.default.join(TOKENS_BACKUP_DIR, `${fileName}_${timestamp}.json`);
+    import_fs.default.copyFileSync(filePath, backupPath);
+    const allBackups = import_fs.default.readdirSync(TOKENS_BACKUP_DIR).filter((f) => f.startsWith(`${fileName}_`) && f.endsWith(".json")).sort().reverse();
+    for (const old of allBackups.slice(10)) {
+      import_fs.default.unlinkSync(import_path.default.join(TOKENS_BACKUP_DIR, old));
+    }
+  }
+  function backupCssFile() {
+    if (!import_fs.default.existsSync(CSS_PATH)) return;
+    if (!import_fs.default.existsSync(CSS_BACKUP_DIR)) {
+      import_fs.default.mkdirSync(CSS_BACKUP_DIR, { recursive: true });
+    }
+    const timestamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
+    const backupPath = import_path.default.join(CSS_BACKUP_DIR, `variables_${timestamp}.css`);
+    import_fs.default.copyFileSync(CSS_PATH, backupPath);
+    const allBackups = import_fs.default.readdirSync(CSS_BACKUP_DIR).filter((f) => f.startsWith("variables_") && f.endsWith(".css")).sort().reverse();
+    for (const old of allBackups.slice(10)) {
+      import_fs.default.unlinkSync(import_path.default.join(CSS_BACKUP_DIR, old));
+    }
+  }
+  function getActiveFileName() {
+    try {
+      const data = JSON.parse(import_fs.default.readFileSync(ACTIVE_FILE, "utf-8"));
+      return data.activeFile || "default";
+    } catch {
+      return "default";
+    }
+  }
+  function getProductionFileName() {
+    try {
+      const data = JSON.parse(import_fs.default.readFileSync(PRODUCTION_FILE, "utf-8"));
+      return data.productionFile || "default";
+    } catch {
+      return "default";
+    }
+  }
+  function readBody(req) {
+    return new Promise((resolve, reject) => {
+      let body = "";
+      req.on("data", (chunk) => body += chunk);
+      req.on("end", () => resolve(body));
+      req.on("error", reject);
+    });
+  }
+  function jsonResponse(res, status, data) {
+    res.statusCode = status;
+    res.setHeader("Content-Type", "application/json");
+    res.end(JSON.stringify(data));
+  }
+  function sanitize(name) {
+    return name.toLowerCase().trim().replace(/\s+/g, "-").replace(/[^a-z0-9\-_]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "") || "unnamed";
+  }
+  function syncTokensToCss(fileName) {
+    const tokenPath = import_path.default.join(TOKENS_DIR, `${fileName}.json`);
+    if (!import_fs.default.existsSync(tokenPath)) return;
+    const tokenData = JSON.parse(import_fs.default.readFileSync(tokenPath, "utf-8"));
+    const cssVars = tokenData.cssVariables || {};
+    if (Object.keys(cssVars).length === 0) return;
+    const cssContent = import_fs.default.readFileSync(CSS_PATH, "utf-8");
+    const remaining = new Set(Object.keys(cssVars));
+    const updatedContent = cssContent.replace(
+      /^(\s*)(--[\w-]+):\s*(.+);/gm,
+      (_match, indent, varName, oldValue) => {
+        if (cssVars[varName] !== void 0) {
+          remaining.delete(varName);
+          return `${indent}${varName}: ${cssVars[varName]};`;
+        }
+        return `${indent}${varName}: ${oldValue.trim()};`;
+      }
+    );
+    let finalContent = updatedContent;
+    if (remaining.size > 0) {
+      const newVars = [...remaining].map((name) => `  ${name}: ${cssVars[name]};`).join("\n");
+      finalContent = finalContent.replace(
+        /\n\}(\s*)$/,
+        `
+
+  /* Token additions */
+${newVars}
+}$1`
+      );
+    }
+    backupCssFile();
+    import_fs.default.writeFileSync(CSS_PATH, finalContent);
+    console.log(`[syncTokensToCss] Wrote ${Object.keys(cssVars).length} variables from "${fileName}" into variables.css`);
+  }
+  const escapedBase = API_BASE.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const TOKENS_ROUTE = `${API_BASE}/tokens`;
+  const TOKENS_ACTIVE_ROUTE = `${API_BASE}/tokens/active`;
+  const TOKENS_PRODUCTION_ROUTE = `${API_BASE}/tokens/production`;
+  const BACKUPS_ROUTE = `${API_BASE}/backups`;
+  const CURRENT_CSS_ROUTE = `${API_BASE}/current-css`;
+  const TOKEN_BY_NAME_REGEX = new RegExp(`^${escapedBase}/tokens/([a-z0-9\\-_]+)$`);
+  const BACKUP_GET_REGEX = new RegExp(`^${escapedBase}/backups/(tokens|css)/(.+)$`);
+  const BACKUP_RESTORE_REGEX = new RegExp(`^${escapedBase}/backups/(tokens|css)/(.+)/restore$`);
+  return {
+    name: "token-file-api",
+    configureServer(server) {
+      ensureTokensDir();
+      server.middlewares.use(async (req, res, next) => {
+        const url = req.url || "";
+        if (url === TOKENS_ROUTE && req.method === "GET") {
+          try {
+            const activeFile = getActiveFileName();
+            const files = import_fs.default.readdirSync(TOKENS_DIR).filter((f) => f.endsWith(".json") && !f.startsWith("_")).map((f) => {
+              const filePath = import_path.default.join(TOKENS_DIR, f);
+              const data = JSON.parse(import_fs.default.readFileSync(filePath, "utf-8"));
+              const fileName = f.replace(".json", "");
+              return {
+                name: data.name || fileName,
+                fileName,
+                updatedAt: data.updatedAt || "",
+                isActive: fileName === activeFile
+              };
+            });
+            jsonResponse(res, 200, { files });
+          } catch (err) {
+            jsonResponse(res, 500, { error: err.message });
+          }
+          return;
+        }
+        if (url === TOKENS_ACTIVE_ROUTE && req.method === "GET") {
+          try {
+            const activeFile = getActiveFileName();
+            const filePath = import_path.default.join(TOKENS_DIR, `${activeFile}.json`);
+            if (!import_fs.default.existsSync(filePath)) {
+              jsonResponse(res, 404, { error: "Active token file not found" });
+              return;
+            }
+            const data = JSON.parse(import_fs.default.readFileSync(filePath, "utf-8"));
+            data._fileName = activeFile;
+            jsonResponse(res, 200, data);
+          } catch (err) {
+            jsonResponse(res, 500, { error: err.message });
+          }
+          return;
+        }
+        if (url === TOKENS_ACTIVE_ROUTE && req.method === "PUT") {
+          try {
+            const body = JSON.parse(await readBody(req));
+            const fileName = sanitize(body.name || "default");
+            if (!import_fs.default.existsSync(import_path.default.join(TOKENS_DIR, `${fileName}.json`))) {
+              jsonResponse(res, 404, { error: "Token file not found" });
+              return;
+            }
+            import_fs.default.writeFileSync(ACTIVE_FILE, JSON.stringify({ activeFile: fileName }));
+            jsonResponse(res, 200, { ok: true, activeFile: fileName });
+          } catch (err) {
+            jsonResponse(res, 500, { error: err.message });
+          }
+          return;
+        }
+        if (url === TOKENS_PRODUCTION_ROUTE && req.method === "GET") {
+          try {
+            const prodFile = getProductionFileName();
+            const filePath = import_path.default.join(TOKENS_DIR, `${prodFile}.json`);
+            if (!import_fs.default.existsSync(filePath)) {
+              jsonResponse(res, 200, { fileName: prodFile, name: prodFile, cssVariables: {} });
+              return;
+            }
+            const data = JSON.parse(import_fs.default.readFileSync(filePath, "utf-8"));
+            jsonResponse(res, 200, {
+              fileName: prodFile,
+              name: data.name || prodFile,
+              updatedAt: data.updatedAt || "",
+              cssVariables: data.cssVariables || {}
+            });
+          } catch (err) {
+            jsonResponse(res, 500, { error: err.message });
+          }
+          return;
+        }
+        if (url === TOKENS_PRODUCTION_ROUTE && req.method === "PUT") {
+          try {
+            const body = JSON.parse(await readBody(req));
+            const fileName = sanitize(body.name || "default");
+            if (!import_fs.default.existsSync(import_path.default.join(TOKENS_DIR, `${fileName}.json`))) {
+              jsonResponse(res, 404, { error: "Token file not found" });
+              return;
+            }
+            import_fs.default.writeFileSync(PRODUCTION_FILE, JSON.stringify({ productionFile: fileName }));
+            syncTokensToCss(fileName);
+            const data = JSON.parse(import_fs.default.readFileSync(import_path.default.join(TOKENS_DIR, `${fileName}.json`), "utf-8"));
+            jsonResponse(res, 200, {
+              ok: true,
+              fileName,
+              name: data.name || fileName,
+              updatedAt: data.updatedAt || ""
+            });
+          } catch (err) {
+            jsonResponse(res, 500, { error: err.message });
+          }
+          return;
+        }
+        if (url === BACKUPS_ROUTE && req.method === "GET") {
+          try {
+            let fileTimestampToISO2 = function(ts) {
+              return ts.replace(/T(\d{2})-(\d{2})-(\d{2})-(\d{3})Z/, "T$1:$2:$3.$4Z");
+            };
+            var fileTimestampToISO = fileTimestampToISO2;
+            const backups = [];
+            if (import_fs.default.existsSync(TOKENS_BACKUP_DIR)) {
+              for (const f of import_fs.default.readdirSync(TOKENS_BACKUP_DIR)) {
+                if (!f.endsWith(".json")) continue;
+                const match2 = f.match(/^(.+)_(\d{4}-\d{2}-\d{2}T\d{2}-\d{2}-\d{2}-\d{3}Z)\.json$/);
+                if (!match2) continue;
+                const stat = import_fs.default.statSync(import_path.default.join(TOKENS_BACKUP_DIR, f));
+                backups.push({
+                  type: "tokens",
+                  file: f,
+                  name: match2[1],
+                  timestamp: fileTimestampToISO2(match2[2]),
+                  size: stat.size
+                });
+              }
+            }
+            if (import_fs.default.existsSync(CSS_BACKUP_DIR)) {
+              for (const f of import_fs.default.readdirSync(CSS_BACKUP_DIR)) {
+                if (!f.endsWith(".css")) continue;
+                const match2 = f.match(/^(.+)_(\d{4}-\d{2}-\d{2}T\d{2}-\d{2}-\d{2}-\d{3}Z)\.css$/);
+                if (!match2) continue;
+                const stat = import_fs.default.statSync(import_path.default.join(CSS_BACKUP_DIR, f));
+                backups.push({
+                  type: "css",
+                  file: f,
+                  name: match2[1],
+                  timestamp: fileTimestampToISO2(match2[2]),
+                  size: stat.size
+                });
+              }
+            }
+            backups.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
+            jsonResponse(res, 200, { backups });
+          } catch (err) {
+            jsonResponse(res, 500, { error: err.message });
+          }
+          return;
+        }
+        {
+          const restoreMatch = url.match(BACKUP_RESTORE_REGEX);
+          if (restoreMatch && req.method === "POST") {
+            const [, type, file] = restoreMatch;
+            try {
+              if (type === "css") {
+                const backupPath = import_path.default.join(CSS_BACKUP_DIR, decodeURIComponent(file));
+                if (!backupPath.startsWith(CSS_BACKUP_DIR) || !import_fs.default.existsSync(backupPath)) {
+                  jsonResponse(res, 404, { error: "Backup not found" });
+                  return;
+                }
+                backupCssFile();
+                import_fs.default.copyFileSync(backupPath, CSS_PATH);
+                jsonResponse(res, 200, { ok: true, restored: file });
+              } else {
+                const backupPath = import_path.default.join(TOKENS_BACKUP_DIR, decodeURIComponent(file));
+                if (!backupPath.startsWith(TOKENS_BACKUP_DIR) || !import_fs.default.existsSync(backupPath)) {
+                  jsonResponse(res, 404, { error: "Backup not found" });
+                  return;
+                }
+                const nameMatch = decodeURIComponent(file).match(/^(.+)_\d{4}-/);
+                if (!nameMatch) {
+                  jsonResponse(res, 400, { error: "Cannot determine token file name from backup" });
+                  return;
+                }
+                const tokenFilePath = import_path.default.join(TOKENS_DIR, `${nameMatch[1]}.json`);
+                backupTokenFile(tokenFilePath, nameMatch[1]);
+                import_fs.default.copyFileSync(backupPath, tokenFilePath);
+                jsonResponse(res, 200, { ok: true, restored: file });
+              }
+            } catch (err) {
+              jsonResponse(res, 500, { error: err.message });
+            }
+            return;
+          }
+        }
+        {
+          const backupMatch = url.match(BACKUP_GET_REGEX);
+          if (backupMatch && req.method === "GET") {
+            const [, type, file] = backupMatch;
+            const dir = type === "css" ? CSS_BACKUP_DIR : TOKENS_BACKUP_DIR;
+            const filePath = import_path.default.join(dir, decodeURIComponent(file));
+            if (!filePath.startsWith(dir) || !import_fs.default.existsSync(filePath)) {
+              jsonResponse(res, 404, { error: "Backup not found" });
+              return;
+            }
+            const content = import_fs.default.readFileSync(filePath, "utf-8");
+            jsonResponse(res, 200, { content, type, file });
+            return;
+          }
+        }
+        if (url === CURRENT_CSS_ROUTE && req.method === "GET") {
+          try {
+            const content = import_fs.default.readFileSync(CSS_PATH, "utf-8");
+            jsonResponse(res, 200, { content });
+          } catch (err) {
+            jsonResponse(res, 500, { error: err.message });
+          }
+          return;
+        }
+        const match = url.match(TOKEN_BY_NAME_REGEX);
+        if (match) {
+          const fileName = match[1];
+          const filePath = import_path.default.join(TOKENS_DIR, `${fileName}.json`);
+          if (req.method === "GET") {
+            try {
+              if (!import_fs.default.existsSync(filePath)) {
+                jsonResponse(res, 404, { error: "Not found" });
+                return;
+              }
+              const data = JSON.parse(import_fs.default.readFileSync(filePath, "utf-8"));
+              data._fileName = fileName;
+              jsonResponse(res, 200, data);
+            } catch (err) {
+              jsonResponse(res, 500, { error: err.message });
+            }
+            return;
+          }
+          if (req.method === "PUT") {
+            try {
+              const body = JSON.parse(await readBody(req));
+              body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+              if (import_fs.default.existsSync(filePath)) {
+                try {
+                  const existing = JSON.parse(import_fs.default.readFileSync(filePath, "utf-8"));
+                  if (existing.createdAt) body.createdAt = existing.createdAt;
+                } catch {
+                }
+              }
+              if (!body.createdAt) body.createdAt = body.updatedAt;
+              backupTokenFile(filePath, fileName);
+              import_fs.default.writeFileSync(filePath, JSON.stringify(body, null, 2));
+              if (fileName === getProductionFileName()) {
+                syncTokensToCss(fileName);
+              }
+              jsonResponse(res, 200, { ok: true, fileName });
+            } catch (err) {
+              jsonResponse(res, 500, { error: err.message });
+            }
+            return;
+          }
+          if (req.method === "DELETE") {
+            if (fileName === "default") {
+              jsonResponse(res, 403, { error: "Cannot delete the default token file" });
+              return;
+            }
+            try {
+              if (import_fs.default.existsSync(filePath)) {
+                import_fs.default.unlinkSync(filePath);
+                if (getActiveFileName() === fileName) {
+                  import_fs.default.writeFileSync(ACTIVE_FILE, JSON.stringify({ activeFile: "default" }));
+                }
+              }
+              jsonResponse(res, 200, { ok: true });
+            } catch (err) {
+              jsonResponse(res, 500, { error: err.message });
+            }
+            return;
+          }
+          jsonResponse(res, 405, { error: "Method not allowed" });
+          return;
+        }
+        next();
+      });
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  tokenFileApi
+});

package/dist-plugin/index.d.cts

@@ -0,0 +1,12 @@
+import { Plugin } from 'vite';
+
+interface TokenFileApiOptions {
+    tokensDir: string;
+    variablesCssPath: string;
+    tokensBackupDir?: string;
+    cssBackupDir?: string;
+    apiBase?: string;
+}
+declare function tokenFileApi(opts: TokenFileApiOptions): Plugin;
+
+export { type TokenFileApiOptions, tokenFileApi };

package/dist-plugin/index.d.ts

@@ -0,0 +1,12 @@
+import { Plugin } from 'vite';
+
+interface TokenFileApiOptions {
+    tokensDir: string;
+    variablesCssPath: string;
+    tokensBackupDir?: string;
+    cssBackupDir?: string;
+    apiBase?: string;
+}
+declare function tokenFileApi(opts: TokenFileApiOptions): Plugin;
+
+export { type TokenFileApiOptions, tokenFileApi };