@motion-proto/live-tokens 0.1.0

package/dist-plugin/index.js

@@ -0,0 +1,407 @@
+// src/vite-plugin/tokenFileApi.ts
+import fs from "fs";
+import path from "path";
+function tokenFileApi(opts) {
+  const TOKENS_DIR = path.resolve(opts.tokensDir);
+  const CSS_PATH = path.resolve(opts.variablesCssPath);
+  const TOKENS_BACKUP_DIR = opts.tokensBackupDir ? path.resolve(opts.tokensBackupDir) : path.join(TOKENS_DIR, "_backups");
+  const CSS_BACKUP_DIR = opts.cssBackupDir ? path.resolve(opts.cssBackupDir) : path.join(path.dirname(CSS_PATH), "_backups");
+  const API_BASE = opts.apiBase ?? "/api";
+  const ACTIVE_FILE = path.join(TOKENS_DIR, "_active.json");
+  const PRODUCTION_FILE = path.join(TOKENS_DIR, "_production.json");
+  function ensureTokensDir() {
+    if (!fs.existsSync(TOKENS_DIR)) {
+      fs.mkdirSync(TOKENS_DIR, { recursive: true });
+    }
+    if (!fs.existsSync(path.join(TOKENS_DIR, "default.json"))) {
+      const defaultTokens = {
+        name: "Default",
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        editorConfigs: {},
+        cssVariables: {}
+      };
+      fs.writeFileSync(path.join(TOKENS_DIR, "default.json"), JSON.stringify(defaultTokens, null, 2));
+    }
+    if (!fs.existsSync(ACTIVE_FILE)) {
+      fs.writeFileSync(ACTIVE_FILE, JSON.stringify({ activeFile: "default" }));
+    }
+    if (!fs.existsSync(PRODUCTION_FILE)) {
+      const activeFile = getActiveFileName();
+      fs.writeFileSync(PRODUCTION_FILE, JSON.stringify({ productionFile: activeFile }));
+    }
+  }
+  function backupTokenFile(filePath, fileName) {
+    if (!fs.existsSync(filePath)) return;
+    if (!fs.existsSync(TOKENS_BACKUP_DIR)) {
+      fs.mkdirSync(TOKENS_BACKUP_DIR, { recursive: true });
+    }
+    const timestamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
+    const backupPath = path.join(TOKENS_BACKUP_DIR, `${fileName}_${timestamp}.json`);
+    fs.copyFileSync(filePath, backupPath);
+    const allBackups = fs.readdirSync(TOKENS_BACKUP_DIR).filter((f) => f.startsWith(`${fileName}_`) && f.endsWith(".json")).sort().reverse();
+    for (const old of allBackups.slice(10)) {
+      fs.unlinkSync(path.join(TOKENS_BACKUP_DIR, old));
+    }
+  }
+  function backupCssFile() {
+    if (!fs.existsSync(CSS_PATH)) return;
+    if (!fs.existsSync(CSS_BACKUP_DIR)) {
+      fs.mkdirSync(CSS_BACKUP_DIR, { recursive: true });
+    }
+    const timestamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
+    const backupPath = path.join(CSS_BACKUP_DIR, `variables_${timestamp}.css`);
+    fs.copyFileSync(CSS_PATH, backupPath);
+    const allBackups = fs.readdirSync(CSS_BACKUP_DIR).filter((f) => f.startsWith("variables_") && f.endsWith(".css")).sort().reverse();
+    for (const old of allBackups.slice(10)) {
+      fs.unlinkSync(path.join(CSS_BACKUP_DIR, old));
+    }
+  }
+  function getActiveFileName() {
+    try {
+      const data = JSON.parse(fs.readFileSync(ACTIVE_FILE, "utf-8"));
+      return data.activeFile || "default";
+    } catch {
+      return "default";
+    }
+  }
+  function getProductionFileName() {
+    try {
+      const data = JSON.parse(fs.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 = path.join(TOKENS_DIR, `${fileName}.json`);
+    if (!fs.existsSync(tokenPath)) return;
+    const tokenData = JSON.parse(fs.readFileSync(tokenPath, "utf-8"));
+    const cssVars = tokenData.cssVariables || {};
+    if (Object.keys(cssVars).length === 0) return;
+    const cssContent = fs.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();
+    fs.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 = fs.readdirSync(TOKENS_DIR).filter((f) => f.endsWith(".json") && !f.startsWith("_")).map((f) => {
+              const filePath = path.join(TOKENS_DIR, f);
+              const data = JSON.parse(fs.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 = path.join(TOKENS_DIR, `${activeFile}.json`);
+            if (!fs.existsSync(filePath)) {
+              jsonResponse(res, 404, { error: "Active token file not found" });
+              return;
+            }
+            const data = JSON.parse(fs.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 (!fs.existsSync(path.join(TOKENS_DIR, `${fileName}.json`))) {
+              jsonResponse(res, 404, { error: "Token file not found" });
+              return;
+            }
+            fs.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 = path.join(TOKENS_DIR, `${prodFile}.json`);
+            if (!fs.existsSync(filePath)) {
+              jsonResponse(res, 200, { fileName: prodFile, name: prodFile, cssVariables: {} });
+              return;
+            }
+            const data = JSON.parse(fs.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 (!fs.existsSync(path.join(TOKENS_DIR, `${fileName}.json`))) {
+              jsonResponse(res, 404, { error: "Token file not found" });
+              return;
+            }
+            fs.writeFileSync(PRODUCTION_FILE, JSON.stringify({ productionFile: fileName }));
+            syncTokensToCss(fileName);
+            const data = JSON.parse(fs.readFileSync(path.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 (fs.existsSync(TOKENS_BACKUP_DIR)) {
+              for (const f of fs.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 = fs.statSync(path.join(TOKENS_BACKUP_DIR, f));
+                backups.push({
+                  type: "tokens",
+                  file: f,
+                  name: match2[1],
+                  timestamp: fileTimestampToISO2(match2[2]),
+                  size: stat.size
+                });
+              }
+            }
+            if (fs.existsSync(CSS_BACKUP_DIR)) {
+              for (const f of fs.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 = fs.statSync(path.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 = path.join(CSS_BACKUP_DIR, decodeURIComponent(file));
+                if (!backupPath.startsWith(CSS_BACKUP_DIR) || !fs.existsSync(backupPath)) {
+                  jsonResponse(res, 404, { error: "Backup not found" });
+                  return;
+                }
+                backupCssFile();
+                fs.copyFileSync(backupPath, CSS_PATH);
+                jsonResponse(res, 200, { ok: true, restored: file });
+              } else {
+                const backupPath = path.join(TOKENS_BACKUP_DIR, decodeURIComponent(file));
+                if (!backupPath.startsWith(TOKENS_BACKUP_DIR) || !fs.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 = path.join(TOKENS_DIR, `${nameMatch[1]}.json`);
+                backupTokenFile(tokenFilePath, nameMatch[1]);
+                fs.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 = path.join(dir, decodeURIComponent(file));
+            if (!filePath.startsWith(dir) || !fs.existsSync(filePath)) {
+              jsonResponse(res, 404, { error: "Backup not found" });
+              return;
+            }
+            const content = fs.readFileSync(filePath, "utf-8");
+            jsonResponse(res, 200, { content, type, file });
+            return;
+          }
+        }
+        if (url === CURRENT_CSS_ROUTE && req.method === "GET") {
+          try {
+            const content = fs.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 = path.join(TOKENS_DIR, `${fileName}.json`);
+          if (req.method === "GET") {
+            try {
+              if (!fs.existsSync(filePath)) {
+                jsonResponse(res, 404, { error: "Not found" });
+                return;
+              }
+              const data = JSON.parse(fs.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 (fs.existsSync(filePath)) {
+                try {
+                  const existing = JSON.parse(fs.readFileSync(filePath, "utf-8"));
+                  if (existing.createdAt) body.createdAt = existing.createdAt;
+                } catch {
+                }
+              }
+              if (!body.createdAt) body.createdAt = body.updatedAt;
+              backupTokenFile(filePath, fileName);
+              fs.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 (fs.existsSync(filePath)) {
+                fs.unlinkSync(filePath);
+                if (getActiveFileName() === fileName) {
+                  fs.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();
+      });
+    }
+  };
+}
+export {
+  tokenFileApi
+};

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@motion-proto/live-tokens",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Design token editor with live CSS variable editing. Svelte 4 + Vite.",
+  "keywords": ["svelte", "vite", "design-tokens", "css-variables", "editor"],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/motionproto/live-tokens.git"
+  },
+  "homepage": "https://github.com/motionproto/live-tokens",
+  "bugs": "https://github.com/motionproto/live-tokens/issues",
+  "files": [
+    "src/lib",
+    "src/showcase",
+    "src/components",
+    "src/pages/Admin.svelte",
+    "src/pages/ShowcasePage.svelte",
+    "src/showcase/editor.css",
+    "src/styles/form-controls.css",
+    "src/styles/fonts.css",
+    "src/styles/fonts",
+    "dist-plugin"
+  ],
+  "exports": {
+    ".": {
+      "svelte": "./src/lib/index.ts",
+      "types": "./src/lib/index.ts",
+      "default": "./src/lib/index.ts"
+    },
+    "./components": {
+      "svelte": "./src/showcase/index.ts",
+      "types": "./src/showcase/index.ts",
+      "default": "./src/showcase/index.ts"
+    },
+    "./admin": {
+      "svelte": "./src/pages/Admin.svelte"
+    },
+    "./showcase-page": {
+      "svelte": "./src/pages/ShowcasePage.svelte"
+    },
+    "./overlay": {
+      "svelte": "./src/lib/LiveEditorOverlay.svelte"
+    },
+    "./columns-overlay": {
+      "svelte": "./src/lib/ColumnsOverlay.svelte"
+    },
+    "./vite-plugin": {
+      "types": "./dist-plugin/index.d.ts",
+      "import": "./dist-plugin/index.js",
+      "require": "./dist-plugin/index.cjs"
+    },
+    "./styles/editor.css": "./src/showcase/editor.css",
+    "./styles/form-controls.css": "./src/styles/form-controls.css",
+    "./styles/fonts.css": "./src/styles/fonts.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "build:plugin": "tsup src/vite-plugin/index.ts --out-dir dist-plugin --format esm,cjs --dts --external vite --platform node --clean",
+    "build:lib": "npm run build:plugin",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "peerDependencies": {
+    "svelte": "^4.2",
+    "vite": "^5.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@tsconfig/svelte": "^5.0.8",
+    "@types/node": "^24.12.0",
+    "svelte": "^4.2.20",
+    "svelte-check": "^3.8.6",
+    "tsup": "^8.5.1",
+    "typescript": "~5.9.3",
+    "vite": "^5.4.21"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^7.2.0",
+    "sass": "^1.98.0",
+    "svelte-preprocess": "^6.0.3"
+  }
+}

package/src/components/Badge.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  export let variant: 'info' | 'accent' | 'trait' | 'hero' = 'info';
+  export let size: 'default' | 'small' = 'default';
+  export let icon: string | undefined = undefined;
+</script>
+
+<span class="badge badge-{variant}" class:badge-small={size === 'small'}>
+  {#if icon}
+    <span class="icon"><i class={icon}></i></span>
+  {:else}
+    <span class="icon"><slot name="icon" /></span>
+  {/if}
+  <slot />
+</span>
+
+<style>
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-6);
+    font-size: var(--font-sm);
+    line-height: 1;
+    padding: var(--space-6) var(--space-12);
+    border-radius: var(--radius-full);
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-medium);
+    white-space: nowrap;
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    font-size: 1em;
+  }
+
+  .icon:empty {
+    display: none;
+  }
+
+  .badge-small {
+    font-size: var(--font-xs);
+    padding: var(--space-6) var(--space-12);
+    gap: var(--space-4);
+  }
+
+  /* Info (default) */
+  .badge-info {
+    color: var(--text-primary);
+    background: var(--surface-neutral-higher);
+    border: 1px solid var(--border-neutral-default);
+    box-shadow: var(--shadow-sm);
+  }
+
+
+  /* Accent */
+  .badge-accent {
+    color: var(--color-accent-300);
+    background: var(--surface-neutral-higher);
+    border: 1px solid var(--border-accent);
+    box-shadow: var(--shadow-sm);
+    text-transform: capitalize;
+  }
+
+
+  /* Hero */
+  .badge-hero {
+    color: #fff;
+    background: rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: 0.02em;
+  }
+
+  /* Trait */
+  .badge-trait {
+    color: var(--text-primary);
+    background: var(--surface-primary-high);
+    border: 1px solid var(--border-primary-strong);
+    text-transform: capitalize;
+  }
+</style>