dekit-cli 0.1.0

package/src/editor-server.ts

@@ -0,0 +1,69 @@
+import { createServer } from "node:http";
+import { join } from "node:path";
+import { readFile } from "node:fs/promises";
+import type { DesignConfig } from "./types.js";
+
+export async function startEditorServer(
+  configRef: { current: DesignConfig },
+  port: number,
+  designPort: number
+): Promise<ReturnType<typeof createServer>> {
+  const editorDistDir = join(import.meta.dirname, "../dist/editor");
+
+  const server = createServer(async (req, res) => {
+    const url = req.url ?? "/";
+
+    // API: return design config as JSON
+    if (url === "/api/config") {
+      const config = configRef.current;
+      const pagePaths: Record<string, string> = {};
+      for (const [name, def] of Object.entries(config.pages)) {
+        pagePaths[name] = join(config.baseDir, def.template);
+      }
+      const payload = {
+        pages: Object.keys(config.pages),
+        pagePaths,
+        components: Object.keys(config.components),
+        designServerUrl: `http://localhost:${designPort}`,
+      };
+      res.setHeader("Content-Type", "application/json");
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.end(JSON.stringify(payload));
+      return;
+    }
+
+    // Serve static editor files
+    let filePath = join(editorDistDir, url === "/" ? "index.html" : url);
+    try {
+      const content = await readFile(filePath);
+      const ext = filePath.split(".").pop() ?? "";
+      const mimeTypes: Record<string, string> = {
+        html: "text/html",
+        js: "application/javascript",
+        css: "text/css",
+        svg: "image/svg+xml",
+        png: "image/png",
+        json: "application/json",
+      };
+      res.setHeader("Content-Type", mimeTypes[ext] ?? "application/octet-stream");
+      res.end(content);
+    } catch {
+      // SPA fallback
+      try {
+        const index = await readFile(join(editorDistDir, "index.html"));
+        res.setHeader("Content-Type", "text/html");
+        res.end(index);
+      } catch {
+        res.statusCode = 404;
+        res.end("Not found");
+      }
+    }
+  });
+
+  return new Promise((resolve) => {
+    server.listen(port, () => {
+      console.log(`  Editor server running at http://localhost:${port}`);
+      resolve(server);
+    });
+  });
+}

package/src/injected/inspector.ts

@@ -0,0 +1,314 @@
+export function generateInspectorScript(): string {
+  return `
+(function() {
+  let overlay = null;
+  let selectedNode = null;
+  let inspectEnabled = false;
+  let pageName = '';
+
+  function isOverlayEl(el) {
+    if (!overlay) return false;
+    return el === overlay || overlay.contains(el);
+  }
+
+  function createOverlay() {
+    const el = document.createElement('div');
+    el.id = '__dekit_overlay__';
+    el.style.cssText = 'position:fixed;pointer-events:none;z-index:999999;display:none;';
+
+    const layers = ['margin','border','padding','content'];
+    const colors = {
+      margin:  'rgba(246,178,107,0.66)',
+      border:  'rgba(255,229,153,0.66)',
+      padding: 'rgba(147,196,125,0.55)',
+      content: 'rgba(111,168,220,0.66)'
+    };
+    for (const name of layers) {
+      const d = document.createElement('div');
+      d.className = '__rl_' + name;
+      d.style.cssText = 'position:absolute;background:' + colors[name] + ';';
+      el.appendChild(d);
+    }
+
+    const tip = document.createElement('div');
+    tip.className = '__rl_tooltip';
+    tip.style.cssText = 'position:absolute;background:rgba(50,50,50,0.92);color:#fff;font:11px/1.4 SFMono-Regular,Menlo,monospace;padding:3px 6px;border-radius:3px;white-space:nowrap;pointer-events:none;';
+    el.appendChild(tip);
+
+    document.body.appendChild(el);
+    return el;
+  }
+
+  function showOverlay(node) {
+    if (!overlay) overlay = createOverlay();
+    const cs = getComputedStyle(node);
+    const rect = node.getBoundingClientRect();
+
+    const mt = parseFloat(cs.marginTop) || 0;
+    const mr = parseFloat(cs.marginRight) || 0;
+    const mb = parseFloat(cs.marginBottom) || 0;
+    const ml = parseFloat(cs.marginLeft) || 0;
+    const bt = parseFloat(cs.borderTopWidth) || 0;
+    const br = parseFloat(cs.borderRightWidth) || 0;
+    const bb = parseFloat(cs.borderBottomWidth) || 0;
+    const blw = parseFloat(cs.borderLeftWidth) || 0;
+    const pt = parseFloat(cs.paddingTop) || 0;
+    const pr = parseFloat(cs.paddingRight) || 0;
+    const pb = parseFloat(cs.paddingBottom) || 0;
+    const pl = parseFloat(cs.paddingLeft) || 0;
+
+    const mw = ml + rect.width + mr;
+    const mh = mt + rect.height + mb;
+
+    overlay.style.display = 'block';
+    overlay.style.left = (rect.x - ml) + 'px';
+    overlay.style.top = (rect.y - mt) + 'px';
+    overlay.style.width = mw + 'px';
+    overlay.style.height = mh + 'px';
+
+    // Coordinates relative to overlay container (margin box origin)
+    // Border box
+    const bx0 = ml, by0 = mt;
+    const bx1 = ml + rect.width, by1 = mt + rect.height;
+    // Padding box
+    const px0 = ml + blw, py0 = mt + bt;
+    const px1 = ml + rect.width - br, py1 = mt + rect.height - bb;
+    // Content box
+    const cx0 = ml + blw + pl, cy0 = mt + bt + pt;
+    const cx1 = ml + rect.width - br - pr, cy1 = mt + rect.height - bb - pb;
+
+    function ring(ox0, oy0, ox1, oy1, ix0, iy0, ix1, iy1) {
+      // Two separate closed subpaths via SVG path syntax — no connecting edges
+      return "path(evenodd, '" +
+        'M '+ox0+' '+oy0+' L '+ox1+' '+oy0+' L '+ox1+' '+oy1+' L '+ox0+' '+oy1+' Z ' +
+        'M '+ix0+' '+iy0+' L '+ix1+' '+iy0+' L '+ix1+' '+iy1+' L '+ix0+' '+iy1+" Z')";
+    }
+
+    // Each ring layer fills the container; clip-path cuts it to only show its ring
+    const marginEl = overlay.querySelector('.__rl_margin');
+    marginEl.style.left = '0px';
+    marginEl.style.top = '0px';
+    marginEl.style.width = mw + 'px';
+    marginEl.style.height = mh + 'px';
+    marginEl.style.clipPath = ring(0, 0, mw, mh, bx0, by0, bx1, by1);
+
+    const borderEl = overlay.querySelector('.__rl_border');
+    borderEl.style.left = '0px';
+    borderEl.style.top = '0px';
+    borderEl.style.width = mw + 'px';
+    borderEl.style.height = mh + 'px';
+    borderEl.style.clipPath = ring(bx0, by0, bx1, by1, px0, py0, px1, py1);
+
+    const paddingEl = overlay.querySelector('.__rl_padding');
+    paddingEl.style.left = '0px';
+    paddingEl.style.top = '0px';
+    paddingEl.style.width = mw + 'px';
+    paddingEl.style.height = mh + 'px';
+    paddingEl.style.clipPath = ring(px0, py0, px1, py1, cx0, cy0, cx1, cy1);
+
+    const contentEl = overlay.querySelector('.__rl_content');
+    contentEl.style.left = cx0 + 'px';
+    contentEl.style.top = cy0 + 'px';
+    contentEl.style.width = Math.max(0, cx1 - cx0) + 'px';
+    contentEl.style.height = Math.max(0, cy1 - cy0) + 'px';
+
+    const tip = overlay.querySelector('.__rl_tooltip');
+    const tag = node.tagName.toLowerCase();
+    const cls = node.getAttribute('class');
+    const w = Math.round(rect.width);
+    const h = Math.round(rect.height);
+    let label = tag;
+    if (cls) label += '.' + cls.trim().split(/\\s+/).join('.');
+    label += ' \\u2002 ' + w + ' \\u00d7 ' + h;
+    tip.textContent = label;
+
+    let tipTop = -mt - tip.offsetHeight - 4;
+    if (rect.y - mt + tipTop < 0) {
+      tipTop = mh + 4;
+    }
+    let tipLeft = ml;
+    tip.style.left = tipLeft + 'px';
+    tip.style.top = tipTop + 'px';
+
+    const tipRect = tip.getBoundingClientRect();
+    if (tipRect.right > window.innerWidth) {
+      tip.style.left = (ml - (tipRect.right - window.innerWidth) - 4) + 'px';
+    }
+  }
+
+  function hideOverlay() {
+    if (overlay) overlay.style.display = 'none';
+  }
+
+  function getNodePath(node) {
+    const parts = [];
+    let current = node;
+    while (current && current !== document.body) {
+      const parent = current.parentNode;
+      if (!parent) break;
+      const children = Array.from(parent.children);
+      const index = children.indexOf(current);
+      parts.unshift(current.tagName.toLowerCase() + '[' + index + ']');
+      current = parent;
+    }
+    parts.unshift('body');
+    return parts.join('/');
+  }
+
+  function getNodeInfo(node) {
+    const computed = getComputedStyle(node);
+    const rect = node.getBoundingClientRect();
+    const attrs = {};
+    for (const attr of node.attributes) {
+      attrs[attr.name] = attr.value;
+    }
+    const styles = {};
+    const styleProps = [
+      'width','height','padding','margin','display','position',
+      'background','backgroundColor','color','border','borderRadius','opacity',
+      'fontFamily','fontSize','fontWeight','lineHeight',
+      'paddingTop','paddingRight','paddingBottom','paddingLeft',
+      'marginTop','marginRight','marginBottom','marginLeft',
+      'borderTopWidth','borderRightWidth','borderBottomWidth','borderLeftWidth'
+    ];
+    for (const prop of styleProps) {
+      styles[prop] = computed[prop];
+    }
+    return {
+      tagName: node.tagName.toLowerCase(),
+      path: getNodePath(node),
+      attributes: attrs,
+      computedStyles: styles,
+      boundingRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height }
+    };
+  }
+
+  function buildDomTree(node) {
+    if (node.nodeType !== 1) return null;
+    const tagName = node.tagName.toLowerCase();
+    if (tagName === 'script' || tagName === 'style' || node.id === '__dekit_overlay__') return null;
+    const children = [];
+    for (const child of node.children) {
+      const subtree = buildDomTree(child);
+      if (subtree) children.push(subtree);
+    }
+    const classAttr = node.getAttribute('class');
+    return {
+      tagName,
+      path: getNodePath(node),
+      className: classAttr || '',
+      children
+    };
+  }
+
+  function resolveNodeByPath(path) {
+    const parts = path.split('/').slice(1);
+    let current = document.body;
+    for (const part of parts) {
+      const match = part.match(/^(.+)\\[(\\d+)\\]$/);
+      if (!match) break;
+      const children = Array.from(current.children);
+      current = children[parseInt(match[2])];
+      if (!current) break;
+    }
+    return (current && current !== document.body) ? current : null;
+  }
+
+  document.addEventListener('click', function(e) {
+    if (!inspectEnabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const node = e.target;
+    if (isOverlayEl(node)) return;
+    selectedNode = node;
+    const info = getNodeInfo(node);
+    window.parent.postMessage({ type: 'NODE_SELECTED', node: info }, '*');
+  }, true);
+
+  document.addEventListener('mouseover', function(e) {
+    if (!inspectEnabled) return;
+    const node = e.target;
+    if (isOverlayEl(node)) return;
+    showOverlay(node);
+    const info = getNodeInfo(node);
+    window.parent.postMessage({ type: 'NODE_HOVERED', node: info }, '*');
+  }, true);
+
+  document.addEventListener('mouseout', function(e) {
+    if (!inspectEnabled) return;
+    const related = e.relatedTarget;
+    if (related && isOverlayEl(related)) return;
+    hideOverlay();
+  }, true);
+
+  // Forward Alt key events to parent for inspect mode toggle
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Alt') {
+      window.parent.postMessage({ type: 'INSPECT_KEY', pressed: true }, '*');
+    }
+  }, true);
+  document.addEventListener('keyup', function(e) {
+    if (e.key === 'Alt') {
+      window.parent.postMessage({ type: 'INSPECT_KEY', pressed: false }, '*');
+    }
+  }, true);
+
+  window.addEventListener('message', function(e) {
+    const msg = e.data;
+    if (!msg || !msg.type) return;
+    if (msg.type === 'GET_DOM_TREE') {
+      const tree = buildDomTree(document.body);
+      window.parent.postMessage({ type: 'DOM_TREE', tree: tree ? [tree] : [] }, '*');
+    } else if (msg.type === 'HIGHLIGHT_NODE') {
+      const node = resolveNodeByPath(msg.path);
+      if (node) {
+        selectedNode = node;
+        hideOverlay();
+        const info = getNodeInfo(node);
+        window.parent.postMessage({ type: 'NODE_SELECTED', node: info }, '*');
+      }
+    } else if (msg.type === 'HOVER_NODE') {
+      const node = resolveNodeByPath(msg.path);
+      if (node) {
+        showOverlay(node);
+      }
+    } else if (msg.type === 'CLEAR_HIGHLIGHT') {
+      selectedNode = null;
+      hideOverlay();
+    } else if (msg.type === 'SET_TOUCH_CURSOR') {
+      let touchStyle = document.getElementById('__dekit_touch_cursor__');
+      if (msg.enabled) {
+        if (!touchStyle) {
+          touchStyle = document.createElement('style');
+          touchStyle.id = '__dekit_touch_cursor__';
+          touchStyle.textContent = '* { cursor: none !important; }';
+          document.head.appendChild(touchStyle);
+        }
+      } else {
+        if (touchStyle) touchStyle.remove();
+      }
+    } else if (msg.type === 'SET_INSPECT_MODE') {
+      inspectEnabled = !!msg.enabled;
+      if (!inspectEnabled) {
+        hideOverlay();
+      }
+    } else if (msg.type === 'SET_PAGE_NAME') {
+      pageName = msg.page || '';
+    } else if (msg.type === 'COPY_FEEDBACK') {
+      if (overlay) {
+        var tip = overlay.querySelector('.__rl_tooltip');
+        if (tip) {
+          var orig = tip.textContent;
+          tip.textContent = '\\u2713 Copied';
+          tip.style.color = '#4ade80';
+          setTimeout(function() {
+            tip.textContent = orig;
+            tip.style.color = '#fff';
+          }, 800);
+        }
+      }
+    }
+  });
+})();
+`;
+}

package/src/injected/register-components.ts

@@ -0,0 +1,57 @@
+import type { ComponentDef } from "../types.js";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+
+function tagNameToClassName(tagName: string): string {
+  return tagName
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("");
+}
+
+function extractTemplateContent(html: string): string {
+  const match = html.match(/<template[^>]*>([\s\S]*?)<\/template>/i);
+  return match ? match[1].trim() : html.trim();
+}
+
+export async function generateComponentRegistrationScript(
+  components: Record<string, ComponentDef>,
+  baseDir: string
+): Promise<string> {
+  const registrations: string[] = [];
+
+  for (const [tagName, def] of Object.entries(components)) {
+    const templateHtml = await readFile(join(baseDir, def.template), "utf-8");
+    const styleContent = await readFile(join(baseDir, def.style), "utf-8");
+    const innerContent = extractTemplateContent(templateHtml);
+    const className = tagNameToClassName(tagName);
+
+    // Escape backticks and ${} in content for use inside template literals
+    const escapedInnerContent = innerContent
+      .replace(/\\/g, "\\\\")
+      .replace(/`/g, "\\`")
+      .replace(/\$\{/g, "\\${");
+    const escapedStyleContent = styleContent
+      .replace(/\\/g, "\\\\")
+      .replace(/`/g, "\\`")
+      .replace(/\$\{/g, "\\${");
+
+    registrations.push(`
+class ${className} extends HTMLElement {
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: 'open' });
+    const style = document.createElement('style');
+    style.textContent = \`${escapedStyleContent}\`;
+    shadow.appendChild(style);
+    const tpl = document.createElement('template');
+    tpl.innerHTML = \`${escapedInnerContent}\`;
+    shadow.appendChild(tpl.content.cloneNode(true));
+  }
+}
+customElements.define(${JSON.stringify(tagName)}, ${className});
+`);
+  }
+
+  return registrations.join("\n");
+}

package/src/parser.test.ts

@@ -0,0 +1,68 @@
+import { describe, test, expect } from "vitest";
+import { parseDesignConfig } from "./parser.js";
+import { join } from "node:path";
+
+const DESIGN_DIR = join(import.meta.dirname, "../example");
+
+describe("parseDesignConfig", () => {
+  test("parses valid design.yaml", async () => {
+    const config = await parseDesignConfig(join(DESIGN_DIR, "design.yaml"));
+    expect(config.version).toBe(1.0);
+    expect(config.globalStyle).toBe("global.css");
+    expect(config.components["my-banner"]).toEqual({
+      template: "components/my-banner/banner.html",
+      style: "components/my-banner/banner.css",
+    });
+    expect(config.pages["cover"]).toEqual({
+      template: "pages/cover/cover.html",
+      style: "pages/cover/cover.css",
+    });
+    expect(config.pages["example"]).toBeDefined();
+  });
+
+  test("stores resolved base directory", async () => {
+    const config = await parseDesignConfig(join(DESIGN_DIR, "design.yaml"));
+    expect(config.baseDir).toBe(DESIGN_DIR);
+  });
+
+  test("rejects component key without hyphen", async () => {
+    const yaml = `
+version: 1.0
+global-style: "global.css"
+components:
+  banner:
+    template: "components/banner/banner.html"
+    style: "components/banner/banner.css"
+pages: {}
+`;
+    await expect(
+      parseDesignConfig("/fake/design.yaml", yaml)
+    ).rejects.toThrow(/hyphen/i);
+  });
+
+  test("rejects missing template file", async () => {
+    const yaml = `
+version: 1.0
+global-style: "global.css"
+components: {}
+pages:
+  cover:
+    template: "pages/nonexistent.html"
+    style: "pages/cover/cover.css"
+`;
+    await expect(
+      parseDesignConfig(join(DESIGN_DIR, "design.yaml"), yaml)
+    ).rejects.toThrow(/not found|does not exist/i);
+  });
+
+  test("rejects missing version field", async () => {
+    const yaml = `
+global-style: "global.css"
+components: {}
+pages: {}
+`;
+    await expect(
+      parseDesignConfig("/fake/design.yaml", yaml)
+    ).rejects.toThrow(/version/i);
+  });
+});

package/src/parser.ts

@@ -0,0 +1,90 @@
+import { readFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import yaml from "js-yaml";
+import type { DesignConfig, ComponentDef, PageDef } from "./types.js";
+
+export async function parseDesignConfig(
+  configPath: string,
+  rawContent?: string
+): Promise<DesignConfig> {
+  const absolutePath = resolve(configPath);
+  const baseDir = dirname(absolutePath);
+  const content = rawContent ?? (await readFile(absolutePath, "utf-8"));
+  const doc = yaml.load(content) as Record<string, unknown>;
+
+  if (!doc || typeof doc !== "object") {
+    throw new Error("Invalid design.yaml: not a valid YAML object");
+  }
+
+  if (doc.version == null) {
+    throw new Error("Invalid design.yaml: missing 'version' field");
+  }
+
+  // Validate file paths if the base directory actually exists on disk
+  const shouldValidateFiles = existsSync(baseDir);
+
+  const globalStyle = (doc["global-style"] as string) ?? "";
+  if (globalStyle && shouldValidateFiles) {
+    const globalStylePath = join(baseDir, globalStyle);
+    if (!existsSync(globalStylePath)) {
+      throw new Error(
+        `Global style file not found: ${globalStylePath}`
+      );
+    }
+  }
+
+  const rawComponents =
+    (doc.components as Record<string, { template: string; style: string }>) ??
+    {};
+  const components: Record<string, ComponentDef> = {};
+  for (const [key, val] of Object.entries(rawComponents)) {
+    if (!key.includes("-")) {
+      throw new Error(
+        `Component key "${key}" must contain a hyphen (Web Component spec requires it)`
+      );
+    }
+    if (shouldValidateFiles) {
+      validateFilePaths(baseDir, key, val.template, val.style);
+    }
+    components[key] = { template: val.template, style: val.style };
+  }
+
+  const rawPages =
+    (doc.pages as Record<string, { template: string; style: string }>) ?? {};
+  const pages: Record<string, PageDef> = {};
+  for (const [key, val] of Object.entries(rawPages)) {
+    if (shouldValidateFiles) {
+      validateFilePaths(baseDir, key, val.template, val.style);
+    }
+    pages[key] = { template: val.template, style: val.style };
+  }
+
+  return {
+    version: doc.version as number,
+    globalStyle,
+    components,
+    pages,
+    baseDir,
+  };
+}
+
+function validateFilePaths(
+  baseDir: string,
+  key: string,
+  template: string,
+  style: string
+): void {
+  const templatePath = join(baseDir, template);
+  if (!existsSync(templatePath)) {
+    throw new Error(
+      `Template file not found for "${key}": ${templatePath}`
+    );
+  }
+  const stylePath = join(baseDir, style);
+  if (!existsSync(stylePath)) {
+    throw new Error(
+      `Style file not found for "${key}": ${stylePath}`
+    );
+  }
+}

package/src/server.ts

@@ -0,0 +1,35 @@
+import type { DesignConfig } from "./types.js";
+import { startDesignServer } from "./design-server.js";
+import { startEditorServer } from "./editor-server.js";
+
+export interface ServerOptions {
+  config: DesignConfig;
+  port: number;
+  designPort: number;
+}
+
+export async function startServers(options: ServerOptions) {
+  const configRef = { current: options.config };
+
+  console.log("\n  Dekit Dev Server\n");
+
+  const designServer = await startDesignServer(configRef, options.designPort);
+  const editorServer = await startEditorServer(
+    configRef,
+    options.port,
+    options.designPort
+  );
+
+  const editorUrl = `http://localhost:${options.port}`;
+  console.log(`\n  Open ${editorUrl} in your browser\n`);
+
+  // Try to open browser
+  try {
+    const open = await import("open");
+    await open.default(editorUrl);
+  } catch {
+    // Silently ignore if open fails
+  }
+
+  return { designServer, editorServer };
+}

package/src/types.ts

@@ -0,0 +1,17 @@
+export interface ComponentDef {
+  template: string;
+  style: string;
+}
+
+export interface PageDef {
+  template: string;
+  style: string;
+}
+
+export interface DesignConfig {
+  version: number;
+  globalStyle: string;
+  components: Record<string, ComponentDef>;
+  pages: Record<string, PageDef>;
+  baseDir: string; // absolute path to directory containing design.yaml
+}