swatch-token 0.0.0-stage → 0.1.0

package/dist/vite.js

@@ -0,0 +1,629 @@
+// src/vite.ts
+import { createHash } from "node:crypto";
+import { readFileSync as readFileSync4 } from "node:fs";
+import { fileURLToPath } from "node:url";
+
+// src/server/guard.ts
+var LOOPBACK = /^(127\.\d+\.\d+\.\d+|::1|::ffff:127\.\d+\.\d+\.\d+)$/;
+var LOCAL = /^(localhost|.+\.localhost|127\.\d+\.\d+\.\d+|::1|\[::1\])$/;
+var hostname = (host) => host.replace(/^\[([^\]]+)\](:\d+)?$/, "$1").replace(/:\d+$/, "").toLowerCase();
+function refuseWrite(req, trust = {}) {
+  const origin = req.headers.origin;
+  if (origin === void 0) {
+    return LOOPBACK.test(req.socket.remoteAddress ?? "") ? null : "a write with no Origin is only accepted from this machine";
+  }
+  let url;
+  try {
+    url = new URL(origin);
+  } catch {
+    return "cross-origin request refused";
+  }
+  if (url.protocol !== "http:" && url.protocol !== "https:") return "cross-origin request refused";
+  if (req.headers.host && url.host.toLowerCase() === req.headers.host.toLowerCase()) return null;
+  if (trust.allowedOrigins?.some((o) => o.replace(/\/$/, "").toLowerCase() === url.origin.toLowerCase())) return null;
+  const name = hostname(url.host);
+  if (LOCAL.test(name)) return "cross-origin request refused";
+  if (req.headers.host && name === hostname(req.headers.host)) return "cross-origin request refused";
+  if (trust.allowedHosts === true) return null;
+  if (trust.allowedHosts?.some((h) => h.startsWith(".") ? name === h.slice(1) || name.endsWith(h) : name === h.toLowerCase())) return null;
+  return "cross-origin request refused";
+}
+
+// src/server/project.ts
+import { existsSync, readFileSync as readFileSync2, readdirSync, statSync as statSync2 } from "node:fs";
+import { join, relative, resolve } from "node:path";
+import postcss2 from "postcss";
+
+// src/server/files.ts
+import { readFileSync, statSync, writeFileSync } from "node:fs";
+
+// src/server/stylesheet.ts
+import postcss from "postcss";
+var THEMES = ["light", "dark"];
+var LIGHT_SEL = /^(:root|html|:root,\s*html|html,\s*:root)$/;
+var DARK_FIRST = /^(:root|html)?(\.dark|\[data-(theme|mode|color-scheme)=["']?dark["']?\])$/;
+var DARK_MEDIA = /^\(\s*prefers-color-scheme\s*:\s*dark\s*\)$/;
+function enclosing(block) {
+  let media = null;
+  for (let p = block.parent; p && p.type !== "root"; p = p.parent) {
+    if (p.type !== "atrule") return { media, ok: false };
+    const at = p;
+    if (at.name === "layer") continue;
+    if (at.name === "media" && DARK_MEDIA.test(at.params.trim()) && !media) {
+      media = at.params;
+      continue;
+    }
+    return { media, ok: false };
+  }
+  return { media, ok: true };
+}
+function contextOf(block) {
+  const { media, ok } = enclosing(block);
+  if (!ok) return { theme: null, media };
+  if (block.type === "atrule") {
+    const declares = block.name === "theme" && !/\b(inline|reference)\b/.test(block.params);
+    return { theme: declares && !media ? "light" : null, media };
+  }
+  const sel = block.selector.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\s+/g, " ").trim();
+  if (media) return { theme: LIGHT_SEL.test(sel) ? "dark" : null, media };
+  if (LIGHT_SEL.test(sel)) return { theme: "light", media };
+  const first = sel.split(",")[0].trim();
+  return { theme: DARK_FIRST.test(first) ? "dark" : null, media };
+}
+function parse(css, from) {
+  const root = postcss.parse(css, { from });
+  const decls = [];
+  const blocks = { light: [], dark: [] };
+  let dark = null;
+  const take = (block) => {
+    const { theme, media } = contextOf(block);
+    if (!theme) return;
+    blocks[theme].push(block);
+    if (theme === "dark" && !dark && block.type === "rule") dark = { selector: block.selector.replace(/\s+/g, " ").trim(), media };
+    for (const node of block.nodes ?? []) if (node.type === "decl" && node.prop.startsWith("--")) decls.push({ decl: node, theme });
+  };
+  root.walk((node) => {
+    if (node.type === "rule") take(node);
+    else if (node.type === "atrule" && node.name === "theme") take(node);
+  });
+  return { root, decls, blocks, dark };
+}
+var shown = (d) => d ? d.value.trim() + (d.important ? " !important" : "") : null;
+function readText(css, from = "stylesheet.css") {
+  const { decls, dark } = parse(css, from);
+  const tokens = /* @__PURE__ */ new Map();
+  for (const { decl, theme } of decls) {
+    const t = tokens.get(decl.prop) ?? {};
+    t[theme] = shown(decl);
+    tokens.set(decl.prop, t);
+  }
+  return { tokens, dark };
+}
+function check(e) {
+  if (!e || typeof e !== "object") throw new Error("bad edit");
+  if (!THEMES.includes(e.theme)) throw new Error(`unknown theme "${e.theme}"`);
+  if (typeof e.name !== "string" || !/^--[a-zA-Z0-9_-]+$/.test(e.name)) throw new Error(`bad token name "${e.name}"`);
+  if (typeof e.value !== "string" || /[;{}\n\r\\]/.test(e.value) || e.value.length > 2e3) throw new Error(`bad value for ${e.name}`);
+  if (e.value.trim() === "") return;
+  try {
+    const rule = postcss.parse(`a{--x:${e.value}}`).first;
+    if (rule?.type !== "rule" || rule.nodes.length !== 1 || rule.first?.type !== "decl") throw new Error();
+    if (/\/\*/.test(e.value)) throw new Error();
+  } catch {
+    throw new Error(`bad value for ${e.name}: ${e.value}`);
+  }
+}
+function writeText(css, edits, from = "stylesheet.css") {
+  edits.forEach(check);
+  const parsed2 = parse(css, from);
+  const changes = [];
+  const lastPerBlock = (theme, name) => {
+    const m = /* @__PURE__ */ new Map();
+    for (const d of parsed2.decls) if (d.theme === theme && d.decl.prop === name) m.set(d.decl.parent, d);
+    return [...m.values()];
+  };
+  const drop = (d) => {
+    const decl = d.decl, block = decl.parent;
+    const next = decl.next();
+    if (next?.type === "comment" && !/\n/.test(next.raws.before ?? "")) next.remove();
+    if (block.last === decl) {
+      const tail = decl.value.match(/\s*$/)?.[0] ?? "";
+      if (tail && !block.raws.after) {
+        block.raws.after = tail;
+        block.raws.semicolon = true;
+      }
+    }
+    decl.remove();
+    parsed2.decls.splice(parsed2.decls.indexOf(d), 1);
+  };
+  for (const { theme, name, value: raw } of edits) {
+    const important = /\s*!important\s*$/i.test(raw);
+    const value = raw.replace(/\s*!important\s*$/i, "").trim();
+    const all = parsed2.decls.filter((d) => d.theme === theme && d.decl.prop === name);
+    const from2 = shown(all.at(-1)?.decl);
+    const to = value === "" ? null : value + (important ? " !important" : "");
+    if (from2 !== to) changes.push({ name, theme, from: from2, to });
+    if (value === "") {
+      for (const d of all) drop(d);
+      continue;
+    }
+    if (all.length) {
+      for (const { decl } of lastPerBlock(theme, name)) {
+        const kept = decl.raws.value?.raw.match(/\/\*[\s\S]*?\*\//g);
+        const next = value + (decl.value.match(/\s*$/)?.[0] ?? "");
+        decl.value = next;
+        if (kept) decl.raws.value = { value: next, raw: `${value} ${kept.join(" ")}` };
+        decl.important = important;
+      }
+      continue;
+    }
+    if (!parsed2.blocks[theme].length) {
+      const rule = postcss.rule({ selector: theme === "dark" ? ".dark" : ":root" });
+      parsed2.root.append(rule);
+      parsed2.blocks[theme].push(rule);
+    }
+    const firsts = /* @__PURE__ */ new Map();
+    for (const b of parsed2.blocks[theme]) {
+      const k = enclosing(b).media ?? "";
+      if (!firsts.has(k)) firsts.set(k, b);
+    }
+    for (const block of firsts.values()) {
+      const prev = [...block.nodes ?? []].reverse().find((n) => n.type === "decl");
+      const decl = postcss.decl({ prop: name, value, important });
+      if (prev) {
+        const tail = prev.value.match(/\s*$/)?.[0] ?? "";
+        if (tail) {
+          prev.value = prev.value.slice(0, -tail.length);
+          if (!block.raws.after) block.raws.after = tail;
+        }
+        decl.raws.before = prev.raws.before;
+        decl.raws.between = prev.raws.between;
+      }
+      block.raws.semicolon = true;
+      block.append(decl);
+      parsed2.decls.push({ decl, theme });
+    }
+  }
+  const out = parsed2.root.toString();
+  parse(out, from);
+  return { css: out, changes };
+}
+
+// src/server/files.ts
+var parsed = /* @__PURE__ */ new Map();
+function readSheet(file) {
+  const { mtimeMs, size } = statSync(file);
+  const hit = parsed.get(file);
+  if (hit && hit.mtime === mtimeMs && hit.size === size) return hit.sheet;
+  const sheet = readText(readFileSync(file, "utf8"), file);
+  parsed.set(file, { mtime: mtimeMs, size, sheet });
+  return sheet;
+}
+function writeAll(batches) {
+  const planned = [...batches].map(([file, edits]) => {
+    const before = readFileSync(file, "utf8");
+    return { file, before, ...writeText(before, edits, file) };
+  });
+  const done = [];
+  try {
+    for (const p of planned) {
+      writeFileSync(p.file, p.css);
+      done.push(p);
+    }
+  } catch (err) {
+    for (const p of done) {
+      try {
+        writeFileSync(p.file, p.before);
+      } catch {
+      }
+    }
+    throw new Error(`could not write ${planned[done.length]?.file ?? "a stylesheet"}, so nothing was saved: ${err instanceof Error ? err.message : err}`);
+  }
+  return planned.flatMap((p) => p.changes);
+}
+
+// src/server/project.ts
+var SOURCE = /\.(tsx?|jsx?|mjs|cjs|css|scss|vue|svelte|astro|html|mdx?)$/;
+function walk(dir, test, skip, acc = []) {
+  for (const f of readdirSync(dir)) {
+    if (f === "node_modules" || f.startsWith(".")) continue;
+    const p = join(dir, f);
+    if (skip.has(p)) continue;
+    let s;
+    try {
+      s = statSync2(p);
+    } catch {
+      continue;
+    }
+    if (s.isDirectory()) walk(p, test, skip, acc);
+    else if (test.test(f)) acc.push(p);
+  }
+  return acc;
+}
+var KINDS = "bg|text|border-[trblxyse]|border|ring-offset|ring|fill|stroke|from|via|to|outline|shadow|divide|placeholder|caret|decoration|accent";
+var PREFIX = String.raw`(?<![\w-])(?:[\w-]+(?:\[[^\]\s]*\])?:)*`;
+var UTIL = new RegExp(`${PREFIX}(?:${KINDS})-([a-z][\\w-]*?)(?:\\/[\\w.[\\]]+)?(?![\\w-])(?!\\s*:)`, "g");
+var UTIL_VAR = new RegExp(`${PREFIX}(?:${KINDS})-[([](--[\\w-]+)[)\\]]`, "g");
+var VAR = /var\(\s*(--[\w-]+)/g;
+var counted = /* @__PURE__ */ new Map();
+function countIn(path, trusted) {
+  const hit = counted.get(path);
+  if (trusted && hit) return hit.counts;
+  const mtime = statSync2(path).mtimeMs;
+  if (hit && hit.mtime === mtime) return hit.counts;
+  const text = readFileSync2(path, "utf8");
+  const counts = /* @__PURE__ */ new Map();
+  const add = (name) => counts.set(name, (counts.get(name) ?? 0) + 1);
+  const util = (name) => {
+    add(`--${name}`);
+    add(`--color-${name}`);
+  };
+  if (/\.s?css$/.test(path)) {
+    try {
+      postcss2.parse(text, { from: path }).walk((node) => {
+        if (node.type === "decl") {
+          let p = node.parent;
+          while (p && p.type !== "root") {
+            if (p.type === "atrule" && p.name === "theme") return;
+            p = p.parent;
+          }
+          for (const m of node.value.matchAll(VAR)) add(m[1]);
+        } else if (node.type === "atrule" && node.name === "apply") {
+          for (const m of node.params.matchAll(UTIL)) util(m[1]);
+        }
+      });
+    } catch (err) {
+      console.warn(`[swatch] could not count uses in ${path}: ${err}`);
+    }
+  } else {
+    for (const m of text.matchAll(VAR)) add(m[1]);
+    for (const m of text.matchAll(UTIL)) util(m[1]);
+    for (const m of text.matchAll(UTIL_VAR)) add(m[1]);
+  }
+  counted.set(path, { mtime, counts });
+  return counts;
+}
+var Project = class {
+  root;
+  options;
+  /** folders left out of every search, absolute */
+  skip;
+  // Under a dev server its file watcher says what changed, so a read walks
+  // no directories: the lists of stylesheets and sources are kept until a
+  // file is added or removed (or a stylesheet changes, which can give it
+  // tokens or take them away), and a file's use counts until it changes.
+  // Without a watcher (a test, the MCP server) every read looks at the disk.
+  watching = false;
+  sheets = null;
+  sources = null;
+  constructor(root, options = {}, skip = []) {
+    this.root = resolve(root);
+    this.options = options;
+    this.skip = new Set([...skip, "dist", "coverage", ...options.ignore ?? []].map((d) => resolve(this.root, d)));
+  }
+  get src() {
+    return join(this.root, this.options.src ?? "");
+  }
+  watch() {
+    this.watching = true;
+  }
+  /** A file changed (or was added or removed: `listChanged`). */
+  forget(path, listChanged) {
+    counted.delete(path);
+    if (listChanged) this.sources = null;
+    if (listChanged || path.endsWith(".css")) this.sheets = null;
+  }
+  /** The stylesheets that hold tokens: the ones named, or every one in the
+   *  project that declares a custom property on a theme. */
+  stylesheets() {
+    const named = this.options.css;
+    if (named) return [named].flat().map((f) => join(this.root, f)).filter((f) => existsSync(f));
+    if (this.watching && this.sheets) return this.sheets;
+    const found = walk(this.root, /\.css$/, this.skip).filter((f) => {
+      try {
+        return readSheet(f).tokens.size > 0;
+      } catch {
+        return false;
+      }
+    });
+    if (this.watching) this.sheets = found;
+    return found;
+  }
+  read() {
+    const files = this.stylesheets();
+    const tokens = /* @__PURE__ */ new Map();
+    const key = (d) => d ? `${d.media ?? ""}|${d.selector}` : "";
+    const darkOf = /* @__PURE__ */ new Map();
+    const votes = /* @__PURE__ */ new Map();
+    for (const file of files) {
+      let sheet;
+      try {
+        sheet = readSheet(file);
+      } catch (err) {
+        console.warn(`[swatch] could not read ${file}: ${err}`);
+        continue;
+      }
+      for (const [name, v] of sheet.tokens) {
+        const t = tokens.get(name) ?? { name, file: relative(this.root, file), uses: [] };
+        if (v.light !== void 0) {
+          t.light = v.light;
+          t.file = relative(this.root, file);
+        }
+        if (v.dark !== void 0) {
+          t.dark = v.dark;
+          darkOf.set(name, sheet.dark);
+          if (sheet.dark) {
+            const k = key(sheet.dark);
+            votes.set(k, { dark: sheet.dark, n: (votes.get(k)?.n ?? 0) + 1 });
+          }
+        } else if (!darkOf.has(name)) darkOf.set(name, sheet.dark);
+        tokens.set(name, t);
+      }
+    }
+    const dark = [...votes.values()].sort((a, b) => b.n - a.n)[0]?.dark ?? [...darkOf.values()].find(Boolean) ?? null;
+    for (const t of tokens.values()) {
+      const own = darkOf.get(t.name);
+      if (own && key(own) !== key(dark)) t.darkAt = own;
+    }
+    const sources = this.watching && this.sources || walk(this.src, SOURCE, this.skip);
+    if (this.watching) this.sources = sources;
+    for (const path of sources) {
+      for (const [name, n] of countIn(path, this.watching)) tokens.get(name)?.uses.push({ file: relative(this.root, path), n });
+    }
+    const groups = this.options.groups ? Object.entries(this.options.groups).map(([title, re]) => [title, typeof re === "string" ? re : re.source]) : null;
+    return { files: files.map((f) => relative(this.root, f)), tokens: [...tokens.values()], dark, groups, agent: !!this.options.agent };
+  }
+  /** Sends each edit to the stylesheet that holds the token in that theme;
+   *  failing that, the one that holds it in the other theme; failing that
+   *  (a new token), the one with the most tokens. Every edit is checked,
+   *  and every file's new text worked out, before any file is touched. */
+  write(edits) {
+    if (!Array.isArray(edits)) throw new Error("expected a list of edits");
+    edits.forEach(check);
+    const files = this.stylesheets();
+    if (!files.length) throw new Error("no stylesheet with tokens was found: name one with the `css` option");
+    const sheets = files.map((file) => ({ file, tokens: readSheet(file).tokens }));
+    const biggest = [...sheets].sort((a, b) => b.tokens.size - a.tokens.size)[0].file;
+    const holds = (name, theme) => sheets.filter((s) => {
+      const t = s.tokens.get(name);
+      return t && (theme ? t[theme] !== void 0 : true);
+    }).map((s) => s.file);
+    const batches = /* @__PURE__ */ new Map();
+    for (const e of edits) {
+      const here = holds(e.name, e.theme);
+      const targets = here.length ? here : e.value.trim() === "" ? [] : [holds(e.name).at(-1) ?? biggest];
+      for (const f of targets) batches.set(f, [...batches.get(f) ?? [], e]);
+    }
+    const changes = writeAll(batches);
+    const seen = /* @__PURE__ */ new Set();
+    return changes.filter((c) => {
+      const k = `${c.name}|${c.theme}`;
+      if (seen.has(k)) return false;
+      seen.add(k);
+      return true;
+    });
+  }
+};
+
+// src/server/requests.ts
+import { appendFileSync, existsSync as existsSync2, mkdirSync, readFileSync as readFileSync3, renameSync, rmSync, statSync as statSync3, writeFileSync as writeFileSync2 } from "node:fs";
+import { join as join2 } from "node:path";
+var Queue = class {
+  dir;
+  incoming;
+  constructor(root) {
+    this.dir = join2(root, ".swatch");
+    this.incoming = join2(this.dir, "incoming.json");
+  }
+  /** The queue holds only what was checked field by field: nothing a
+   *  caller adds to the body, and no field of ours a caller can replace. */
+  add(r, files) {
+    let body;
+    if (r?.kind === "commit") {
+      if (!Array.isArray(r.changes) || !r.changes.length || r.changes.length > 2e3) throw new Error("nothing to commit");
+      const text = (v) => v === null || typeof v === "string" && v.length <= 2e3 && !/[\n\r]/.test(v);
+      body = { kind: "commit", changes: r.changes.map((c) => {
+        if (typeof c?.name !== "string" || !/^--[a-zA-Z0-9_-]+$/.test(c.name) || !THEMES.includes(c.theme) || !text(c.from) || !text(c.to)) throw new Error("bad change");
+        return { name: c.name, theme: c.theme, from: c.from, to: c.to };
+      }) };
+    } else if (r?.kind === "figma-sync") {
+      let host = "";
+      try {
+        if (typeof r.figma === "string" && r.figma.length <= 500 && !/\s/.test(r.figma)) {
+          const u = new URL(r.figma);
+          if (u.protocol === "https:") host = u.hostname;
+        }
+      } catch {
+      }
+      if (host !== "figma.com" && host !== "www.figma.com") throw new Error("not a figma.com link");
+      body = { kind: "figma-sync", figma: r.figma };
+    } else throw new Error("unknown request");
+    const id = Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
+    const line = { ...body, id, at: (/* @__PURE__ */ new Date()).toISOString(), files };
+    mkdirSync(this.dir, { recursive: true });
+    appendFileSync(join2(this.dir, "requests.jsonl"), JSON.stringify(line) + "\n");
+    return { id: line.id };
+  }
+  /** What the agent left, or null (also while it is half written). */
+  take() {
+    if (!existsSync2(this.incoming)) return null;
+    try {
+      return JSON.parse(readFileSync3(this.incoming, "utf8"));
+    } catch {
+      return null;
+    }
+  }
+  clear() {
+    rmSync(this.incoming, { force: true });
+  }
+  get file() {
+    return join2(this.dir, "requests.jsonl");
+  }
+  // the parsed queue, kept while the file is unchanged: an agent waiting
+  // for a request asks twice a second, and almost always nothing is new
+  seen = null;
+  /** The requests no agent has dealt with yet, oldest first. A request that
+   *  has been dealt with is taken out of the file (below), so the file only
+   *  ever holds what is pending, and stays small. */
+  pending() {
+    if (!existsSync2(this.file)) return [];
+    const { mtimeMs, size } = statSync3(this.file);
+    if (this.seen && this.seen.mtime === mtimeMs && this.seen.size === size) return this.seen.requests;
+    const requests = readFileSync3(this.file, "utf8").split("\n").filter(Boolean).flatMap((l) => {
+      try {
+        return [JSON.parse(l)];
+      } catch {
+        return [];
+      }
+    }).filter((r) => r && typeof r.id === "string");
+    this.seen = { mtime: mtimeMs, size, requests };
+    return requests;
+  }
+  /** Takes a request out of the queue, as dealt with, and notes it (with
+   *  its note) in done.jsonl, which keeps the last hundred. The panel may
+   *  append a request while this rewrites the file: the file is read again
+   *  and the rewrite retried if it grew in between, so no request is lost. */
+  resolve(id, note) {
+    if (!this.pending().some((r) => r.id === id)) throw new Error(`no pending request "${id}"`);
+    for (let attempt = 0; attempt < 5; attempt++) {
+      const text = readFileSync3(this.file, "utf8");
+      const kept = text.split("\n").filter((l) => {
+        if (!l.trim()) return false;
+        try {
+          return JSON.parse(l).id !== id;
+        } catch {
+          return true;
+        }
+      });
+      const tmp = `${this.file}.tmp`;
+      writeFileSync2(tmp, kept.length ? kept.join("\n") + "\n" : "");
+      if (statSync3(this.file).size !== Buffer.byteLength(text)) continue;
+      renameSync(tmp, this.file);
+      this.seen = null;
+      const done = join2(this.dir, "done.jsonl");
+      const log = existsSync2(done) ? readFileSync3(done, "utf8").split("\n").filter(Boolean) : [];
+      log.push(JSON.stringify({ id, at: (/* @__PURE__ */ new Date()).toISOString(), ...note ? { note: String(note).slice(0, 500) } : {} }));
+      writeFileSync2(done, log.slice(-100).join("\n") + "\n");
+      return;
+    }
+    throw new Error("the queue kept changing while it was being updated; try again");
+  }
+  /** Leaves values for the panel to load as unsaved edits: every one
+   *  checked as a write would be, and the file put in place whole, so the
+   *  panel never reads half of it. Returns how many values. */
+  propose(edits, note) {
+    if (!edits || typeof edits !== "object" || Array.isArray(edits)) throw new Error("edits must be an object of token name to { light?, dark? }");
+    const clean = {};
+    let n = 0;
+    for (const [name, values] of Object.entries(edits)) {
+      if (!values || typeof values !== "object") throw new Error(`bad values for ${name}`);
+      for (const theme of THEMES) {
+        const value = values[theme];
+        if (value === void 0) continue;
+        check({ name, theme, value });
+        clean[name] = { ...clean[name], [theme]: value.trim() };
+        n++;
+      }
+    }
+    if (!n) throw new Error("no values to propose");
+    mkdirSync(this.dir, { recursive: true });
+    const tmp = `${this.incoming}.tmp`;
+    writeFileSync2(tmp, JSON.stringify({ edits: clean, ...note ? { note: String(note).slice(0, 300) } : {} }));
+    renameSync(tmp, this.incoming);
+    return n;
+  }
+};
+
+// src/vite.ts
+var LIMIT = 1e6;
+var CLIENT = fileURLToPath(new URL("./client.js", import.meta.url));
+function swatch(options = {}) {
+  let project;
+  let queue;
+  let trust = {};
+  let id = "";
+  return {
+    name: "swatch",
+    apply: "serve",
+    configResolved(config) {
+      project = new Project(config.root, options, [config.build.outDir, config.cacheDir, config.publicDir].filter(Boolean));
+      queue = new Queue(config.root);
+      id = createHash("sha256").update(project.root).digest("hex").slice(0, 12);
+      const hosts = config.server.allowedHosts;
+      trust = { allowedHosts: hosts === true ? true : Array.isArray(hosts) ? hosts : void 0, allowedOrigins: options.allowedOrigins };
+    },
+    transformIndexHtml: () => [
+      { tag: "script", attrs: { type: "module", src: "/__swatch/client.js", "data-swatch-project": id }, injectTo: "body" }
+    ],
+    configureServer(server) {
+      const version = { css: 0, incoming: 0 };
+      const changed = (f, listChanged) => {
+        project.forget(f, listChanged);
+        if (f === queue.incoming) version.incoming++;
+        else if (f.endsWith(".css")) version.css++;
+      };
+      project.watch();
+      server.watcher.add(queue.dir);
+      server.watcher.on("change", (f) => changed(f, false));
+      server.watcher.on("add", (f) => changed(f, true));
+      server.watcher.on("unlink", (f) => changed(f, true));
+      server.watcher.on("addDir", (f) => project.forget(f, true));
+      server.watcher.on("unlinkDir", (f) => project.forget(f, true));
+      server.middlewares.use("/__swatch", (req, res) => {
+        const send = (code, body) => {
+          res.statusCode = code;
+          res.setHeader("content-type", "application/json");
+          res.setHeader("cache-control", "no-store");
+          res.end(JSON.stringify(body));
+        };
+        const route = (req.url ?? "/").split("?")[0];
+        const method = req.method ?? "";
+        const routes = { "/": ["GET", "POST"], "/version": ["GET"], "/client.js": ["GET"], "/request": ["POST"], "/incoming": ["GET", "DELETE"] };
+        if (!routes[route]) return send(404, { error: "no such route" });
+        if (!routes[route].includes(method)) return send(405, { error: `${routes[route].join(" or ")} only` });
+        if (method !== "GET") {
+          const why = refuseWrite(req, trust);
+          if (why) return send(403, { error: why });
+        }
+        if (route === "/client.js") {
+          res.setHeader("content-type", "text/javascript");
+          res.setHeader("cache-control", "no-cache");
+          return res.end(readFileSync4(CLIENT));
+        }
+        if (route === "/version") return send(200, version);
+        if (method === "GET" || method === "DELETE") {
+          try {
+            if (route === "/") return send(200, project.read());
+            if (method === "DELETE") {
+              queue.clear();
+              return send(200, null);
+            }
+            return send(200, queue.take());
+          } catch (err) {
+            return send(500, { error: String(err instanceof Error ? err.message : err) });
+          }
+        }
+        const chunks = [];
+        let size = 0;
+        req.on("data", (c) => {
+          size += c.length;
+          if (size <= LIMIT) chunks.push(c);
+        });
+        req.on("end", () => {
+          if (size > LIMIT) return send(413, { error: "request too large" });
+          try {
+            const body = JSON.parse(Buffer.concat(chunks).toString("utf8"));
+            if (route === "/request") return send(200, queue.add(body, project.stylesheets().map((f) => f.slice(project.root.length + 1))));
+            const changes = project.write(body);
+            send(200, { ...project.read(), changes });
+          } catch (err) {
+            send(400, { error: String(err instanceof Error ? err.message : err) });
+          }
+        });
+      });
+    }
+  };
+}
+export {
+  swatch as default
+};