@sourcescape/ds-cli 0.1.0 → 0.3.0

package/dist/chunk-U44UTENA.js

@@ -0,0 +1,492 @@
+// src/systems.ts
+import { readFileSync, readdirSync, existsSync, statSync } from "fs";
+import { join, resolve } from "path";
+function getSystemsRoot() {
+  const dir = process.env.DESIGN_SYSTEMS_DIR;
+  if (!dir) {
+    throw new Error(
+      "DESIGN_SYSTEMS_DIR environment variable is required. Set it to the path containing your design system definitions."
+    );
+  }
+  return resolve(dir);
+}
+function readComponentJson(componentDir) {
+  const jsonPath = join(componentDir, "description.json");
+  if (!existsSync(jsonPath)) return null;
+  try {
+    return JSON.parse(readFileSync(jsonPath, "utf-8"));
+  } catch {
+    return null;
+  }
+}
+function listSystems() {
+  return readdirSync(getSystemsRoot(), { withFileTypes: true }).filter((d) => d.isDirectory()).map((d) => d.name).sort();
+}
+function systemDir(system) {
+  return join(getSystemsRoot(), system);
+}
+function systemExists(system) {
+  return existsSync(systemDir(system));
+}
+function readFirstHeading(filePath) {
+  if (!existsSync(filePath)) return "";
+  const content = readFileSync(filePath, "utf-8");
+  const match = content.match(/^#\s+(.+)$/m);
+  return match ? match[1].trim() : "";
+}
+function readFirstParagraph(filePath) {
+  if (!existsSync(filePath)) return "";
+  const lines = readFileSync(filePath, "utf-8").split("\n");
+  let pastHeading = false;
+  for (const line of lines) {
+    if (line.startsWith("# ")) {
+      pastHeading = true;
+      continue;
+    }
+    if (pastHeading && line.trim().length > 0 && !line.startsWith("#")) {
+      return line.trim();
+    }
+  }
+  return "";
+}
+function readFile(filePath) {
+  return readFileSync(filePath, "utf-8");
+}
+function getSystemInfo(system) {
+  const descPath = join(systemDir(system), "DESCRIPTION.md");
+  return {
+    name: system,
+    description: readFirstHeading(descPath)
+  };
+}
+function readDescription(system) {
+  const descPath = join(systemDir(system), "DESCRIPTION.md");
+  if (!existsSync(descPath)) return "";
+  return readFile(descPath);
+}
+function listComponents(system) {
+  const compsDir = join(systemDir(system), "components");
+  const results = [];
+  for (const kind of ["molecules", "cells"]) {
+    const kindDir = join(compsDir, kind);
+    if (!existsSync(kindDir)) continue;
+    const dirs = readdirSync(kindDir, { withFileTypes: true }).filter((d) => d.isDirectory()).map((d) => d.name).sort();
+    for (const name of dirs) {
+      const compDir = join(kindDir, name);
+      const json = readComponentJson(compDir);
+      if (json) {
+        results.push({
+          name,
+          kind,
+          description: json.description,
+          tag: json.tag,
+          example: json.example
+        });
+      } else {
+        const descPath = join(compDir, "description.md");
+        results.push({
+          name,
+          kind,
+          description: readFirstParagraph(descPath)
+        });
+      }
+    }
+  }
+  return results;
+}
+function findComponent(system, name) {
+  const compsDir = join(systemDir(system), "components");
+  for (const kind of ["molecules", "cells"]) {
+    const dir = join(compsDir, kind, name);
+    if (existsSync(dir) && statSync(dir).isDirectory()) {
+      return { kind, dir };
+    }
+  }
+  return null;
+}
+function allComponentNames(system) {
+  const compsDir = join(systemDir(system), "components");
+  const results = [];
+  for (const kind of ["molecules", "cells"]) {
+    const kindDir = join(compsDir, kind);
+    if (!existsSync(kindDir)) continue;
+    const dirs = readdirSync(kindDir, { withFileTypes: true }).filter((d) => d.isDirectory()).map((d) => ({ name: d.name, kind }));
+    results.push(...dirs);
+  }
+  return results;
+}
+function suggestComponent(system, query) {
+  const all = allComponentNames(system);
+  const q = query.toLowerCase();
+  return all.filter((c) => c.name.includes(q) || q.includes(c.name)).map((c) => `${c.name} (${c.kind})`);
+}
+function readComponentMeta(system, componentName) {
+  const found = findComponent(system, componentName);
+  if (!found) return { name: componentName, tag: "", description: "" };
+  const descPath = join(found.dir, "description.md");
+  if (!existsSync(descPath)) return { name: componentName, tag: "", description: "" };
+  const lines = readFileSync(descPath, "utf-8").split("\n");
+  let name = componentName;
+  let tag = "";
+  let description = "";
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.startsWith("# ")) {
+      name = line.slice(2).trim();
+      continue;
+    }
+    if (!tag && /^`<.+>`$/.test(line.trim())) {
+      tag = line.trim();
+      continue;
+    }
+    if (name && line.trim().length > 0 && !line.startsWith("#") && !line.startsWith("`")) {
+      description = line.trim();
+      break;
+    }
+  }
+  return { name, tag: tag || "*(auto)*", description };
+}
+function readFullDescription(system, name, kind) {
+  const compDir = join(systemDir(system), "components", kind, name);
+  if (!existsSync(compDir)) return "";
+  const mdPath = join(compDir, "description.md");
+  if (existsSync(mdPath)) {
+    return readFileSync(mdPath, "utf-8");
+  }
+  const json = readComponentJson(compDir);
+  return json?.description ?? "";
+}
+function descriptionMtime(system, name, kind) {
+  const compDir = join(systemDir(system), "components", kind, name);
+  if (!existsSync(compDir)) return 0;
+  const mdPath = join(compDir, "description.md");
+  if (existsSync(mdPath)) {
+    return statSync(mdPath).mtimeMs;
+  }
+  const jsonPath = join(compDir, "description.json");
+  if (existsSync(jsonPath)) {
+    return statSync(jsonPath).mtimeMs;
+  }
+  return 0;
+}
+function findComponentSources(system, name) {
+  const found = findComponent(system, name);
+  if (!found) return { css: [], js: [] };
+  const css = [];
+  const js = [];
+  const stylePath = join(found.dir, "style.css");
+  const scriptPath = join(found.dir, "component.js");
+  if (existsSync(stylePath)) css.push(stylePath);
+  if (existsSync(scriptPath)) js.push(scriptPath);
+  return { css, js };
+}
+
+// src/tokens.ts
+import { readFileSync as readFileSync2, readdirSync as readdirSync2 } from "fs";
+import { join as join2, basename } from "path";
+function loadTokens(system) {
+  const dir = join2(systemDir(system), "tokens");
+  const files = readdirSync2(dir).filter((f) => f.endsWith(".json")).sort();
+  return files.map((f) => ({
+    name: basename(f, ".json"),
+    data: JSON.parse(readFileSync2(join2(dir, f), "utf-8"))
+  }));
+}
+function walkTokens(obj, path = []) {
+  const leaves = [];
+  for (const [key, val] of Object.entries(obj)) {
+    if (key.startsWith("$")) continue;
+    const child = val;
+    if (child.$type !== void 0 && child.$value !== void 0) {
+      leaves.push({ path: [...path, key], type: child.$type, value: child.$value });
+    } else if (typeof child === "object" && child !== null) {
+      leaves.push(...walkTokens(child, [...path, key]));
+    }
+  }
+  return leaves;
+}
+function toCssVarName(path) {
+  return `--${path.join("-")}`;
+}
+function formatValue(type, value) {
+  switch (type) {
+    case "color":
+    case "dimension":
+    case "gradient":
+    case "duration":
+      return String(value);
+    case "fontFamily": {
+      const families = value;
+      const generics = ["serif", "sans-serif", "monospace", "cursive", "fantasy", "system-ui"];
+      return families.map((f) => {
+        if (generics.includes(f) || !/\s/.test(f)) return f;
+        return f.includes("'") ? `"${f}"` : `'${f}'`;
+      }).join(", ");
+    }
+    // Composite types — skip
+    case "typography":
+    case "object":
+    case "cubicBezier":
+      return null;
+    default:
+      return null;
+  }
+}
+function generateTokensCss(system) {
+  const tokenFiles = loadTokens(system);
+  const groups = [];
+  for (const { name, data } of tokenFiles) {
+    const leaves = walkTokens(data);
+    const vars = [];
+    for (const leaf of leaves) {
+      const formatted = formatValue(leaf.type, leaf.value);
+      if (formatted !== null) {
+        vars.push(`    ${toCssVarName(leaf.path)}: ${formatted};`);
+      }
+    }
+    if (vars.length > 0) {
+      groups.push({ name, vars });
+    }
+  }
+  const lines = ["@layer tokens {", "  :root {"];
+  for (let i = 0; i < groups.length; i++) {
+    const { name, vars } = groups[i];
+    if (i > 0) lines.push("");
+    lines.push(`    /* ${name}.json */`);
+    lines.push(...vars);
+  }
+  lines.push("  }", "}");
+  return lines.join("\n") + "\n";
+}
+
+// src/resolve-deps.ts
+import { readFileSync as readFileSync3, existsSync as existsSync2 } from "fs";
+import { join as join3, relative } from "path";
+function buildRegistry(system) {
+  const components = listComponents(system);
+  const entries = [];
+  const tagMap = /* @__PURE__ */ new Map();
+  for (const comp of components) {
+    const found = findComponent(system, comp.name);
+    if (!found) continue;
+    const scriptPath = join3(found.dir, "component.js");
+    const stylePath = join3(found.dir, "style.css");
+    const hasJs = existsSync2(scriptPath);
+    const hasCss = existsSync2(stylePath);
+    const tags = [];
+    const dynamicTags = [];
+    if (hasJs) {
+      const js = readFileSync3(scriptPath, "utf-8");
+      for (const m of js.matchAll(/customElements\.define\(\s*['"]([^'"]+)['"]/g)) {
+        tags.push(m[1]);
+      }
+      for (const m of js.matchAll(/document\.createElement\(\s*['"]([a-z][a-z0-9]*-[a-z0-9-]*)['"]\s*\)/g)) {
+        if (!tags.includes(m[1])) dynamicTags.push(m[1]);
+      }
+      for (const m of js.matchAll(/<([a-z][a-z0-9]*-[a-z0-9-]*)[>\s/'"]/g)) {
+        const tag = m[1];
+        if (!tags.includes(tag) && !dynamicTags.includes(tag)) {
+          dynamicTags.push(tag);
+        }
+      }
+    }
+    if (hasCss) {
+      const css = readFileSync3(stylePath, "utf-8");
+      for (const m of css.matchAll(/(?:^|[\s,}>+~])([a-z][a-z0-9]*-[a-z0-9-]*)(?=[\s,{[:.>+~]|$)/gm)) {
+        const tag = m[1];
+        if (!tags.includes(tag)) tags.push(tag);
+      }
+    }
+    const dirName = comp.name;
+    if (dirName.includes("-") && !tags.includes(dirName)) {
+      tags.push(dirName);
+    }
+    const prdName = `prd-${dirName}`;
+    if (!tags.includes(prdName)) {
+      tags.push(prdName);
+    }
+    const entry = {
+      name: comp.name,
+      kind: comp.kind,
+      dir: found.dir,
+      tags,
+      dynamicTags,
+      hasCss,
+      hasJs
+    };
+    entries.push(entry);
+    for (const tag of tags) {
+      if (!tagMap.has(tag)) tagMap.set(tag, entry);
+    }
+  }
+  return { tagMap, entries };
+}
+function resolveMarkup(registry, markup) {
+  const markupTags = /* @__PURE__ */ new Set();
+  for (const m of markup.matchAll(/<([a-z][a-z0-9]*-[a-z0-9-]*)/g)) {
+    markupTags.add(m[1]);
+  }
+  const matched = /* @__PURE__ */ new Set();
+  const unmatchedTags = [];
+  const resolved = /* @__PURE__ */ new Set();
+  const queue = [...markupTags];
+  while (queue.length > 0) {
+    const tag = queue.pop();
+    if (resolved.has(tag)) continue;
+    resolved.add(tag);
+    const entry = registry.tagMap.get(tag);
+    if (entry) {
+      if (!matched.has(entry)) {
+        matched.add(entry);
+        for (const dt of entry.dynamicTags) {
+          if (!resolved.has(dt)) queue.push(dt);
+        }
+      }
+    } else {
+      unmatchedTags.push(tag);
+    }
+  }
+  const cssFiles = [];
+  const jsFiles = [];
+  for (const entry of matched) {
+    if (entry.hasCss) cssFiles.push(join3(entry.dir, "style.css"));
+    if (entry.hasJs) jsFiles.push(join3(entry.dir, "component.js"));
+  }
+  return { cssFiles, jsFiles, unmatchedTags };
+}
+async function bundleJs(system) {
+  const entrypoint = join3(systemDir(system), "src", "index.js");
+  if (!existsSync2(entrypoint)) return null;
+  const { build } = await import("esbuild");
+  const result = await build({
+    entryPoints: [entrypoint],
+    bundle: true,
+    write: false,
+    format: "esm"
+  });
+  if (result.outputFiles.length === 0) return null;
+  return result.outputFiles[0].text;
+}
+function buildPreviewHtml(system, markup, deps, bundledJs) {
+  const sysDir = systemDir(system);
+  const blocks = ["@layer tokens, base, components;"];
+  const tokensCss = generateTokensCss(system);
+  blocks.push("/* tokens (generated) */");
+  blocks.push(tokensCss);
+  const baseCss = join3(sysDir, "src", "_shared", "_base.css");
+  if (existsSync2(baseCss)) {
+    blocks.push(`/* ${relative(sysDir, baseCss)} */`);
+    blocks.push(readFileSync3(baseCss, "utf-8"));
+  }
+  for (const p of deps.cssFiles) {
+    blocks.push(`/* ${relative(sysDir, p)} */`);
+    blocks.push(readFileSync3(p, "utf-8"));
+  }
+  const inlinedCss = blocks.join("\n");
+  const scriptTags = bundledJs ? `  <script>
+${bundledJs}
+  </script>` : deps.jsFiles.map((p) => `  <script type="module" src="/${relative(sysDir, p)}"></script>`).join("\n");
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+${inlinedCss}
+  </style>
+</head>
+<body>
+${markup}
+${scriptTags}
+</body>
+</html>`;
+}
+
+// src/preview-server.ts
+import { createServer } from "http";
+import { join as join4, extname } from "path";
+import { readFile as readFile2 } from "fs/promises";
+import { existsSync as existsSync3 } from "fs";
+var MIME_TYPES = {
+  ".html": "text/html; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".js": "application/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".ttf": "font/ttf",
+  ".otf": "font/otf",
+  ".eot": "application/vnd.ms-fontobject"
+};
+function startPreviewServer(systemDir2, opts) {
+  return new Promise((resolve2, reject) => {
+    const server = createServer(async (req, res) => {
+      const url = new URL(req.url ?? "/", `http://${req.headers.host}`);
+      if (url.pathname === "/" && opts.html) {
+        res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+        res.end(opts.html);
+        return;
+      }
+      const filePath = join4(systemDir2, decodeURIComponent(url.pathname));
+      if (!existsSync3(filePath)) {
+        res.writeHead(404);
+        res.end("Not found");
+        return;
+      }
+      try {
+        const data = await readFile2(filePath);
+        const ext = extname(filePath).toLowerCase();
+        const contentType = MIME_TYPES[ext] ?? "application/octet-stream";
+        res.writeHead(200, { "Content-Type": contentType });
+        res.end(data);
+      } catch {
+        res.writeHead(500);
+        res.end("Internal server error");
+      }
+    });
+    server.listen(0, () => {
+      const addr = server.address();
+      if (!addr || typeof addr === "string") {
+        reject(new Error("Failed to get server address"));
+        return;
+      }
+      resolve2({
+        url: `http://localhost:${addr.port}`,
+        stop: () => server.close()
+      });
+    });
+    server.on("error", reject);
+  });
+}
+
+export {
+  readComponentJson,
+  listSystems,
+  systemDir,
+  systemExists,
+  readFile,
+  getSystemInfo,
+  readDescription,
+  listComponents,
+  findComponent,
+  suggestComponent,
+  readComponentMeta,
+  readFullDescription,
+  descriptionMtime,
+  findComponentSources,
+  loadTokens,
+  walkTokens,
+  toCssVarName,
+  formatValue,
+  generateTokensCss,
+  buildRegistry,
+  resolveMarkup,
+  bundleJs,
+  buildPreviewHtml,
+  startPreviewServer
+};