@the-package-labs/idocs-core 0.5.0 → 0.6.0

package/dist/browser.js

@@ -6,8 +6,8 @@ import {
   createIconResolver,
   normalizeRoot,
   route
-} from "./chunk-Q2NHZ6TV.js";
-import "./chunk-ZYFFV7Y7.js";
+} from "./chunk-MUGDM3EQ.js";
+import "./chunk-H77C3DSX.js";
 export {
   KNOWN_KEYS,
   RootSchema,

package/dist/chunk-H77C3DSX.js

@@ -0,0 +1,817 @@
+// src/defaults.ts
+var BUILTIN_KINDS = {
+  client: { icon: "lucide:monitor", family: "slate" },
+  user: { icon: "lucide:user", family: "slate" },
+  ui: { icon: "lucide:layout-dashboard", family: "slate" },
+  external: { icon: "lucide:cloud", family: "slate" },
+  service: { icon: "lucide:server", family: "blue" },
+  gateway: { icon: "lucide:route", family: "blue" },
+  worker: { icon: "lucide:cog", family: "blue" },
+  container: { icon: "lucide:container", family: "blue" },
+  function: { icon: "lucide:square-function", family: "blue" },
+  database: { icon: "lucide:database", family: "green" },
+  cache: { icon: "lucide:zap", family: "green" },
+  storage: { icon: "lucide:hard-drive", family: "green" },
+  queue: { icon: "lucide:list-ordered", family: "amber" },
+  agent: { icon: "lucide:bot", family: "violet" },
+  network: { icon: "lucide:network", family: "violet" },
+  vm: { icon: "lucide:box", family: "violet" },
+  auth: { icon: "lucide:key-round", family: "teal" },
+  monitor: { icon: "lucide:activity", family: "teal" },
+  entity: { icon: "lucide:table-2", family: "blue" }
+};
+var BUILTIN_EDGE_KINDS = {
+  http: { label: "HTTP request / response", color: "ink", width: 1.5 },
+  channel: { label: "Persistent channel (websocket, gRPC)", color: "accent", width: 2.4 },
+  tunnel: { label: "Overlay tunnel", color: "tunnel", width: 5 },
+  queue: { label: "Queue / broker", color: "ok", width: 2, dash: "2 4" },
+  ws: { label: "WebSocket", color: "ink", width: 1.6, dash: "7 4" },
+  data: { label: "Data access", color: "muted", width: 1.3 },
+  relation: { label: "Relation between entities", color: "muted", width: 1.4 }
+};
+var STEP_KIND_COLORS = {
+  request: "accent",
+  response: "ok",
+  error: "bad",
+  lookup: "muted",
+  event: "warn"
+};
+var DEFAULT_NODE_WIDTH = 178;
+var DEFAULT_ENTITY_WIDTH = 280;
+
+// src/geometry.ts
+function polylineLength(points) {
+  let total = 0;
+  for (let i = 1; i < points.length; i++) total += dist(points[i - 1], points[i]);
+  return total;
+}
+function dist(a, b) {
+  return Math.hypot(b.x - a.x, b.y - a.y);
+}
+function pointAt(points, d) {
+  if (points.length === 0) return { x: 0, y: 0 };
+  let left = Math.max(0, d);
+  for (let i = 1; i < points.length; i++) {
+    const a = points[i - 1];
+    const b = points[i];
+    const len = dist(a, b);
+    if (left <= len || i === points.length - 1) {
+      const t = len === 0 ? 0 : Math.min(1, left / len);
+      return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+    }
+    left -= len;
+  }
+  return points[points.length - 1];
+}
+function roundedPath(points, radius = 8) {
+  if (points.length === 0) return "";
+  const first = points[0];
+  let d = `M${r(first.x)} ${r(first.y)}`;
+  for (let i = 1; i < points.length - 1; i++) {
+    const prev = points[i - 1];
+    const cur = points[i];
+    const next = points[i + 1];
+    const inLen = dist(prev, cur);
+    const outLen = dist(cur, next);
+    const rad = Math.min(radius, inLen / 2, outLen / 2);
+    if (rad < 0.5) {
+      d += `L${r(cur.x)} ${r(cur.y)}`;
+      continue;
+    }
+    const a = {
+      x: cur.x + (prev.x - cur.x) / inLen * rad,
+      y: cur.y + (prev.y - cur.y) / inLen * rad
+    };
+    const b = {
+      x: cur.x + (next.x - cur.x) / outLen * rad,
+      y: cur.y + (next.y - cur.y) / outLen * rad
+    };
+    d += `L${r(a.x)} ${r(a.y)}Q${r(cur.x)} ${r(cur.y)} ${r(b.x)} ${r(b.y)}`;
+  }
+  if (points.length > 1) {
+    const last = points[points.length - 1];
+    d += `L${r(last.x)} ${r(last.y)}`;
+  }
+  return d;
+}
+function r(n) {
+  return Math.round(n * 10) / 10;
+}
+function letterKey(index) {
+  let n = index;
+  let out = "";
+  do {
+    out = String.fromCharCode(65 + n % 26) + out;
+    n = Math.floor(n / 26) - 1;
+  } while (n >= 0);
+  return out;
+}
+
+// src/highlight.ts
+var FAMILIES = {
+  shell: [
+    "sh",
+    "bash",
+    "zsh",
+    "shell",
+    "console",
+    "shellsession",
+    "fish",
+    "powershell",
+    "pwsh",
+    "ps1"
+  ],
+  yaml: ["yaml", "yml"],
+  json: ["json", "jsonc", "json5"],
+  http: ["http"],
+  ini: ["ini", "toml", "properties"],
+  env: ["env", "dotenv"],
+  clike: [
+    ...["js", "javascript", "jsx", "mjs", "cjs", "ts", "typescript", "tsx", "java", "c", "cpp"],
+    ...["c++", "cs", "csharp", "go", "rust", "rs", "swift", "kotlin", "scala", "php", "dart"],
+    ...["css", "scss", "less"]
+  ],
+  hash: [
+    ...["py", "python", "rb", "ruby", "perl", "r", "make", "makefile", "dockerfile", "nginx"],
+    ...["conf", "hcl", "terraform", "tf", "graphql"]
+  ],
+  sql: ["sql"]
+};
+var FAMILY_OF = new Map(
+  Object.entries(FAMILIES).flatMap(
+    ([f, langs]) => langs.map((l) => [l, f])
+  )
+);
+var LABELS = {
+  sh: "Shell",
+  shell: "Shell",
+  bash: "Bash",
+  zsh: "Zsh",
+  fish: "Fish",
+  console: "Console",
+  shellsession: "Console",
+  powershell: "PowerShell",
+  pwsh: "PowerShell",
+  ps1: "PowerShell",
+  bat: "Batch",
+  cmd: "Batch",
+  yaml: "YAML",
+  yml: "YAML",
+  json: "JSON",
+  jsonc: "JSON",
+  json5: "JSON5",
+  http: "HTTP",
+  env: ".env",
+  dotenv: ".env",
+  ini: "INI",
+  toml: "TOML",
+  properties: "Properties",
+  text: "Text",
+  txt: "Text",
+  plain: "Text",
+  js: "JavaScript",
+  javascript: "JavaScript",
+  jsx: "JSX",
+  ts: "TypeScript",
+  typescript: "TypeScript",
+  tsx: "TSX",
+  py: "Python",
+  python: "Python",
+  rb: "Ruby",
+  ruby: "Ruby",
+  go: "Go",
+  rs: "Rust",
+  rust: "Rust",
+  cs: "C#",
+  csharp: "C#",
+  cpp: "C++",
+  html: "HTML",
+  xml: "XML",
+  css: "CSS",
+  scss: "SCSS",
+  sql: "SQL",
+  md: "Markdown",
+  mdx: "MDX",
+  markdown: "Markdown",
+  diff: "Diff",
+  dockerfile: "Dockerfile",
+  graphql: "GraphQL",
+  tf: "Terraform",
+  terraform: "Terraform",
+  hcl: "HCL",
+  php: "PHP",
+  java: "Java",
+  c: "C"
+};
+function languageLabel(lang) {
+  const l = (lang ?? "").toLowerCase();
+  if (!l) return "Text";
+  return LABELS[l] ?? l.charAt(0).toUpperCase() + l.slice(1);
+}
+var Painter = class {
+  tokens = [];
+  put(text, cls) {
+    if (!text) return;
+    const last = this.tokens[this.tokens.length - 1];
+    if (last && last.cls === cls) last.text += text;
+    else this.tokens.push(cls ? { text, cls } : { text });
+  }
+};
+function highlight(lang, text) {
+  const family = FAMILY_OF.get((lang ?? "").toLowerCase());
+  if (!family || !text) return text ? [{ text }] : [];
+  const p = new Painter();
+  switch (family) {
+    case "shell":
+      shell(text, p);
+      break;
+    case "yaml":
+      yaml(text, p);
+      break;
+    case "json":
+      json(text, p);
+      break;
+    case "http":
+      http(text, p);
+      break;
+    case "ini":
+    case "env":
+      ini(text, p);
+      break;
+    default:
+      generic(text, p, family);
+  }
+  return p.tokens;
+}
+var THEN_COMMAND = /* @__PURE__ */ new Set([
+  ...["sudo", "env", "time", "exec", "xargs", "nohup", "command", "if", "then", "else", "elif"],
+  ...["do", "while", "until", "!", "{"]
+]);
+var SHELL_WORD = /^[^\s|&;<>()'"$`\\]+/;
+var ASSIGN = /^[A-Za-z_][A-Za-z0-9_]*=/;
+var NUMBER = /^[+-]?\d+(\.\d+)?$/;
+function shell(text, p) {
+  let i = 0;
+  let command = true;
+  let continued = false;
+  const n = text.length;
+  const quoted = (at) => {
+    const q = text[at];
+    let j = at + 1;
+    let chunk = q;
+    while (j < n && text[j] !== q) {
+      if (q !== "'" && text[j] === "\\" && j + 1 < n) {
+        chunk += text.slice(j, j + 2);
+        j += 2;
+        continue;
+      }
+      if (q === '"' && text[j] === "$") {
+        const v = text.slice(j).match(/^\$(?:\{[^}\n]*\}|[A-Za-z_][A-Za-z0-9_]*|[0-9@*?#!$-])/);
+        if (v) {
+          p.put(chunk, "string");
+          p.put(v[0], "variable");
+          chunk = "";
+          j += v[0].length;
+          continue;
+        }
+      }
+      chunk += text[j];
+      j++;
+    }
+    if (j < n) chunk += q;
+    p.put(chunk, "string");
+    return Math.min(j + 1, n);
+  };
+  const value = (at) => {
+    const c = text[at];
+    if (c === '"' || c === "'" || c === "`") return quoted(at);
+    if (c === "$") {
+      const v = text.slice(at).match(/^\$(?:\{[^}\n]*\}|[A-Za-z_][A-Za-z0-9_]*|[0-9@*?#!$-])/);
+      if (v) {
+        p.put(v[0], "variable");
+        return at + v[0].length;
+      }
+    }
+    const w = text.slice(at).match(SHELL_WORD);
+    if (w) {
+      p.put(w[0], NUMBER.test(w[0]) ? "number" : void 0);
+      return at + w[0].length;
+    }
+    return at;
+  };
+  while (i < n) {
+    const c = text[i];
+    if (c === "\n") {
+      p.put(c);
+      i++;
+      if (!continued) command = true;
+      continued = false;
+      continue;
+    }
+    if (c === " " || c === "	" || c === "\r") {
+      const ws = text.slice(i).match(/^[ \t\r]+/)?.[0];
+      p.put(ws);
+      i += ws.length;
+      continue;
+    }
+    if (c === "\\" && (text[i + 1] === "\n" || text[i + 1] === "\r" && text[i + 2] === "\n")) {
+      p.put(c, "operator");
+      i++;
+      continued = true;
+      continue;
+    }
+    if (c === "#" && (i === 0 || /[\s;|&(]/.test(text[i - 1]))) {
+      const end = text.indexOf("\n", i);
+      const stop = end === -1 ? n : end;
+      p.put(text.slice(i, stop), "comment");
+      i = stop;
+      continue;
+    }
+    if (c === '"' || c === "'" || c === "`") {
+      i = quoted(i);
+      command = false;
+      continue;
+    }
+    if (c === "$") {
+      if (text[i + 1] === "(") {
+        p.put("$(", "operator");
+        i += 2;
+        command = true;
+        continue;
+      }
+      const at = i;
+      i = value(i);
+      if (i === at) {
+        p.put(c);
+        i++;
+      }
+      command = false;
+      continue;
+    }
+    if ("|&;<>()".includes(c)) {
+      const op = text.slice(i).match(/^(?:\|\||&&|>>|<<|[|&;<>()])/)?.[0];
+      p.put(op, "operator");
+      i += op.length;
+      const fd = text.slice(i).match(/^&\d/);
+      if (fd && (op === ">" || op === "<")) {
+        p.put(fd[0], "operator");
+        i += fd[0].length;
+      }
+      if ("|&;(".includes(c)) command = true;
+      continue;
+    }
+    const word = text.slice(i).match(SHELL_WORD)?.[0];
+    if (!word) {
+      p.put(c);
+      i++;
+      continue;
+    }
+    if (ASSIGN.test(word)) {
+      const eq = word.indexOf("=");
+      p.put(word.slice(0, eq), "variable");
+      p.put("=", "operator");
+      i += eq + 1;
+      i = value(i);
+      continue;
+    }
+    if (word.startsWith("-") && word.length > 1 && !NUMBER.test(word)) {
+      const eq = word.indexOf("=");
+      if (eq > 0) {
+        p.put(word.slice(0, eq), "flag");
+        p.put("=", "operator");
+        i += eq + 1;
+        i = value(i);
+      } else {
+        p.put(word, "flag");
+        i += word.length;
+      }
+      continue;
+    }
+    if (command) {
+      p.put(word, "keyword");
+      command = THEN_COMMAND.has(word);
+    } else {
+      p.put(word, NUMBER.test(word) ? "number" : void 0);
+    }
+    i += word.length;
+  }
+}
+var LITERAL = /^(?:true|false|null|yes|no|on|off|~)$/i;
+var SCALAR_NUMBER = /^[+-]?(?:0x[\da-f]+|\d[\d_]*(?:\.\d+)?(?:e[+-]?\d+)?)$/i;
+function scalars(p, s, yaml2) {
+  let i = 0;
+  let block = false;
+  while (i < s.length) {
+    const c = s[i];
+    if (/\s/.test(c)) {
+      const ws = s.slice(i).match(/^\s+/)?.[0];
+      p.put(ws);
+      i += ws.length;
+    } else if ((c === "#" || !yaml2 && c === ";") && (i === 0 || /\s/.test(s[i - 1]))) {
+      p.put(s.slice(i), "comment");
+      break;
+    } else if (c === '"' || c === "'") {
+      let j = i + 1;
+      while (j < s.length && s[j] !== c) j += c === '"' && s[j] === "\\" ? 2 : 1;
+      p.put(s.slice(i, j + 1), "string");
+      i = j + 1;
+    } else if ("[]{},".includes(c)) {
+      p.put(c, "operator");
+      i++;
+    } else if (yaml2 && /^[|>][+-]?\d*\s*(?:#.*)?$/.test(s.slice(i)) && !s.slice(0, i).trim()) {
+      const ind = s.slice(i).match(/^[|>][+-]?\d*/)?.[0];
+      p.put(ind, "operator");
+      i += ind.length;
+      block = true;
+    } else if (yaml2 && (c === "&" || c === "*")) {
+      const w = s.slice(i).match(/^[^\s[\]{},]+/)?.[0];
+      p.put(w, "variable");
+      i += w.length;
+    } else if (yaml2 && c === "!") {
+      const w = s.slice(i).match(/^[^\s[\]{},]+/)?.[0];
+      p.put(w, "keyword");
+      i += w.length;
+    } else {
+      const w = s.slice(i).match(/^[^\s[\]{},]+/)?.[0] ?? c;
+      p.put(w, SCALAR_NUMBER.test(w) ? "number" : LITERAL.test(w) ? "literal" : void 0);
+      i += w.length;
+    }
+  }
+  return block;
+}
+var YAML_KEY = /^("(?:[^"\\]|\\.)*"|'[^']*'|[^\s#'"[\]{},&*!|>%@`][^#]*?)(\s*):(?=\s|$)/;
+function yaml(text, p) {
+  let block = -1;
+  const lines = text.split("\n");
+  lines.forEach((line, idx) => {
+    const nl = idx < lines.length - 1 ? "\n" : "";
+    const body = line.trimStart();
+    const indent = line.length - body.length;
+    if (block >= 0) {
+      if (!body.trim() || indent > block) {
+        p.put(line, body.trim() ? "string" : void 0);
+        p.put(nl);
+        return;
+      }
+      block = -1;
+    }
+    p.put(line.slice(0, indent));
+    if (!body) {
+      p.put(nl);
+      return;
+    }
+    if (body.startsWith("#")) {
+      p.put(body, "comment");
+      p.put(nl);
+      return;
+    }
+    let rest = body;
+    let at = indent;
+    if (/^(?:---|\.\.\.)(?:\s|$)/.test(rest)) {
+      p.put(rest.slice(0, 3), "operator");
+      rest = rest.slice(3);
+    }
+    for (let dash = rest.match(/^-(\s+|$)/); dash; dash = rest.match(/^-(\s+|$)/)) {
+      p.put("-", "operator");
+      p.put(dash[1]);
+      at += dash[0].length;
+      rest = rest.slice(dash[0].length);
+    }
+    const key = rest.match(YAML_KEY);
+    if (key) {
+      p.put(key[1], "key");
+      p.put(key[2]);
+      p.put(":", "operator");
+      rest = rest.slice(key[0].length);
+    }
+    if (scalars(p, rest, true)) block = key ? at : indent;
+    p.put(nl);
+  });
+}
+function ini(text, p) {
+  const lines = text.split("\n");
+  lines.forEach((line, idx) => {
+    const nl = idx < lines.length - 1 ? "\n" : "";
+    const body = line.trimStart();
+    const indent = line.slice(0, line.length - body.length);
+    p.put(indent);
+    if (/^[#;]/.test(body)) {
+      p.put(body, "comment");
+    } else if (/^\[.*\]\s*$/.test(body)) {
+      p.put(body, "section");
+    } else {
+      const kv = body.match(/^(export\s+)?([^=#;\s][^=]*?)(\s*)=(\s*)(.*)$/);
+      if (kv) {
+        if (kv[1]) p.put(kv[1], "keyword");
+        p.put(kv[2], "key");
+        p.put(kv[3]);
+        p.put("=", "operator");
+        p.put(kv[4]);
+        scalars(p, kv[5], false);
+      } else {
+        p.put(body);
+      }
+    }
+    p.put(nl);
+  });
+}
+function json(text, p) {
+  let i = 0;
+  const n = text.length;
+  while (i < n) {
+    const c = text[i];
+    if (c === '"') {
+      let j = i + 1;
+      while (j < n && text[j] !== '"' && text[j] !== "\n") j += text[j] === "\\" ? 2 : 1;
+      const end = Math.min(text[j] === '"' ? j + 1 : j, n);
+      const isKey = /^\s*:/.test(text.slice(end));
+      p.put(text.slice(i, end), isKey ? "key" : "string");
+      i = end;
+    } else if (c === "/" && text[i + 1] === "/") {
+      const e = text.indexOf("\n", i);
+      const stop = e === -1 ? n : e;
+      p.put(text.slice(i, stop), "comment");
+      i = stop;
+    } else if (c === "/" && text[i + 1] === "*") {
+      const e = text.indexOf("*/", i + 2);
+      const stop = e === -1 ? n : e + 2;
+      p.put(text.slice(i, stop), "comment");
+      i = stop;
+    } else if ("{}[],:".includes(c)) {
+      p.put(c, "operator");
+      i++;
+    } else {
+      const num = text.slice(i).match(/^-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/)?.[0];
+      const word = text.slice(i).match(/^[A-Za-z_]\w*/)?.[0];
+      if (num) {
+        p.put(num, "number");
+        i += num.length;
+      } else if (word) {
+        p.put(word, /^(?:true|false|null)$/.test(word) ? "literal" : void 0);
+        i += word.length;
+      } else {
+        p.put(c);
+        i++;
+      }
+    }
+  }
+}
+var METHODS = /^(GET|POST|PUT|PATCH|DELETE|HEAD|OPTIONS|TRACE|CONNECT)(\s+)(\S+)(?:(\s+)(HTTP\/[\d.]+))?(.*)$/;
+var STATUS = /^(HTTP\/[\d.]+)(\s+)(\d{3})(.*)$/;
+function http(text, p) {
+  const lines = text.split("\n");
+  let state = "start";
+  for (let idx = 0; idx < lines.length; idx++) {
+    const line = lines[idx];
+    const nl = idx < lines.length - 1 ? "\n" : "";
+    if (state === "body") {
+      const rest = lines.slice(idx).join("\n");
+      if (/^\s*[{[]/.test(rest)) json(rest, p);
+      else p.put(rest);
+      return;
+    }
+    if (!line.trim()) {
+      state = "body";
+      p.put(line + nl);
+      continue;
+    }
+    const req = state === "start" ? line.match(METHODS) : null;
+    const res = state === "start" && !req ? line.match(STATUS) : null;
+    const header = line.match(/^([A-Za-z][\w-]*)(\s*)(:)(.*)$/);
+    if (req) {
+      p.put(req[1], "keyword");
+      p.put(req[2]);
+      p.put(req[3]);
+      p.put(req[4] ?? "");
+      p.put(req[5] ?? "", "literal");
+      p.put(req[6]);
+    } else if (res) {
+      p.put(res[1], "literal");
+      p.put(res[2]);
+      p.put(res[3], "number");
+      p.put(res[4]);
+    } else if (header) {
+      p.put(header[1], "key");
+      p.put(header[2]);
+      p.put(":", "operator");
+      p.put(header[4]);
+    } else {
+      p.put(line);
+    }
+    state = "headers";
+    p.put(nl);
+  }
+}
+var NUM_AT = /^(?:0x[\da-f]+|\d[\d_]*(?:\.\d+)?(?:e[+-]?\d+)?)/i;
+var IDENT = /^[A-Za-z_$][\w$]*/;
+function generic(text, p, family) {
+  let i = 0;
+  const n = text.length;
+  while (i < n) {
+    const c = text[i];
+    const prev = text[i - 1] ?? "";
+    const lineComment = family === "clike" && c === "/" && text[i + 1] === "/" && prev !== ":" || family === "hash" && c === "#" && (i === 0 || /\s/.test(prev)) || family === "sql" && c === "-" && text[i + 1] === "-";
+    if (lineComment) {
+      const e = text.indexOf("\n", i);
+      const stop = e === -1 ? n : e;
+      p.put(text.slice(i, stop), "comment");
+      i = stop;
+    } else if (family !== "hash" && c === "/" && text[i + 1] === "*") {
+      const e = text.indexOf("*/", i + 2);
+      const stop = e === -1 ? n : e + 2;
+      p.put(text.slice(i, stop), "comment");
+      i = stop;
+    } else if (c === '"' || c === "'" || c === "`") {
+      const triple = family === "hash" && c !== "`" && text.startsWith(c.repeat(3), i);
+      let j = i + (triple ? 3 : 1);
+      let closed = false;
+      while (j < n) {
+        if (text[j] === "\\") {
+          j += 2;
+        } else if (triple ? text.startsWith(c.repeat(3), j) : text[j] === c) {
+          closed = true;
+          break;
+        } else if (c !== "`" && !triple && text[j] === "\n") {
+          break;
+        } else {
+          j++;
+        }
+      }
+      const stop = Math.min(closed ? j + (triple ? 3 : 1) : j, n);
+      p.put(text.slice(i, stop), "string");
+      i = stop;
+    } else if (/[A-Za-z_$]/.test(c)) {
+      const id = text.slice(i).match(IDENT)?.[0];
+      p.put(id);
+      i += id.length;
+    } else if (/\d/.test(c) && !/[\w$]/.test(prev)) {
+      const num = text.slice(i).match(NUM_AT)?.[0];
+      p.put(num, "number");
+      i += num.length;
+    } else {
+      p.put(c);
+      i++;
+    }
+  }
+}
+var HOLE = "\uE000";
+function highlightSegments(lang, segments) {
+  const vars = segments.filter(
+    (s) => s.kind === "var"
+  );
+  const text = segments.map((s) => s.kind === "text" ? s.text.replaceAll(HOLE, "\uFFFD") : HOLE).join("");
+  const out = [];
+  let next = 0;
+  for (const t of highlight(lang, text)) {
+    t.text.split(HOLE).forEach((part, i) => {
+      if (i > 0) out.push({ kind: "var", segment: vars[next++] });
+      if (part)
+        out.push(t.cls ? { kind: "text", text: part, cls: t.cls } : { kind: "text", text: part });
+    });
+  }
+  return out;
+}
+
+// src/placeholders.ts
+var TOKEN = /\\([{<][A-Za-z_][\w-]*[}>])|(?<![${])\{([A-Za-z_][\w-]*)\}(?!\})|(?<!<)<([A-Za-z_][\w-]*)>/g;
+function varKey(name) {
+  return name.toLowerCase().replace(/-/g, "_");
+}
+var SECRET = /(^|_)(pat|token|jwt|secret|password|passwd|pwd|apikey|key|credentials?)s?($|_)/;
+function isSecretKey(key) {
+  return SECRET.test(key);
+}
+function splitPlaceholders(text) {
+  const out = [];
+  const push = (s) => {
+    if (!s) return;
+    const last = out[out.length - 1];
+    if (last?.kind === "text") last.text += s;
+    else out.push({ kind: "text", text: s });
+  };
+  let at = 0;
+  for (const m of text.matchAll(TOKEN)) {
+    push(text.slice(at, m.index));
+    at = m.index + m[0].length;
+    if (m[1] !== void 0) {
+      push(m[1]);
+      continue;
+    }
+    const name = m[2] ?? m[3];
+    out.push({ kind: "var", raw: m[0], name, key: varKey(name) });
+  }
+  push(text.slice(at));
+  return out;
+}
+function placeholdersOf(segments) {
+  const seen = /* @__PURE__ */ new Map();
+  for (const s of segments) {
+    if (s.kind === "var" && !seen.has(s.key)) {
+      seen.set(s.key, { key: s.key, name: s.name, raw: s.raw, secret: isSecretKey(s.key) });
+    }
+  }
+  return [...seen.values()];
+}
+function valueFor(values, key) {
+  const v = Object.hasOwn(values, key) ? values[key] : void 0;
+  return typeof v === "string" && v !== "" ? v : void 0;
+}
+function fillSegments(segments, values) {
+  return segments.map((s) => s.kind === "text" ? s.text : valueFor(values, s.key) ?? s.raw).join("");
+}
+function fillPlaceholders(text, values) {
+  return fillSegments(splitPlaceholders(text), values);
+}
+function unsetPlaceholders(segments, values) {
+  return placeholdersOf(segments).filter((p) => valueFor(values, p.key) === void 0);
+}
+var MASK = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
+function shownPlaceholder(segment, values) {
+  const v = valueFor(values, segment.key);
+  if (v === void 0) return { text: segment.raw, state: "unset" };
+  return isSecretKey(segment.key) ? { text: MASK, state: "secret" } : { text: v, state: "set" };
+}
+var COMMAND_LANGUAGES = /* @__PURE__ */ new Set([
+  "",
+  "sh",
+  "bash",
+  "shell",
+  "zsh",
+  "fish",
+  "console",
+  "shellsession",
+  "powershell",
+  "pwsh",
+  "ps1",
+  "bat",
+  "cmd",
+  "text",
+  "txt",
+  "plain",
+  "env",
+  "dotenv",
+  "ini",
+  "toml",
+  "yaml",
+  "yml",
+  "http"
+]);
+function takesPlaceholders(lang, meta) {
+  const words = (meta ?? "").split(/\s+/);
+  if (words.includes("novars")) return false;
+  if (words.includes("vars")) return true;
+  return COMMAND_LANGUAGES.has((lang ?? "").toLowerCase());
+}
+
+// src/suggest.ts
+function didYouMean(word, options) {
+  let best;
+  let bestDist = Math.max(2, Math.floor(word.length / 3)) + 1;
+  for (const o of options) {
+    const d = levenshtein(word.toLowerCase(), o.toLowerCase());
+    if (d < bestDist) {
+      best = o;
+      bestDist = d;
+    }
+  }
+  return best ? `Did you mean "${best}"?` : void 0;
+}
+function levenshtein(a, b) {
+  const row = Array.from({ length: b.length + 1 }, (_, i) => i);
+  for (let i = 1; i <= a.length; i++) {
+    let prev = row[0];
+    row[0] = i;
+    for (let j = 1; j <= b.length; j++) {
+      const tmp = row[j];
+      row[j] = Math.min(row[j] + 1, row[j - 1] + 1, prev + (a[i - 1] === b[j - 1] ? 0 : 1));
+      prev = tmp;
+    }
+  }
+  return row[b.length];
+}
+
+export {
+  BUILTIN_KINDS,
+  BUILTIN_EDGE_KINDS,
+  STEP_KIND_COLORS,
+  DEFAULT_NODE_WIDTH,
+  DEFAULT_ENTITY_WIDTH,
+  polylineLength,
+  dist,
+  pointAt,
+  roundedPath,
+  letterKey,
+  languageLabel,
+  highlight,
+  highlightSegments,
+  didYouMean,
+  varKey,
+  isSecretKey,
+  splitPlaceholders,
+  placeholdersOf,
+  fillSegments,
+  fillPlaceholders,
+  unsetPlaceholders,
+  shownPlaceholder,
+  takesPlaceholders
+};

package/dist/{chunk-Q2NHZ6TV.js → chunk-MUGDM3EQ.js}

@@ -3,8 +3,12 @@ import {
   BUILTIN_KINDS,
   DEFAULT_ENTITY_WIDTH,
   didYouMean,
-  letterKey
-} from "./chunk-ZYFFV7Y7.js";
+  highlightSegments,
+  languageLabel,
+  letterKey,
+  splitPlaceholders,
+  takesPlaceholders
+} from "./chunk-H77C3DSX.js";
 
 // src/icon-resolver.ts
 import { getIconData, iconToSVG } from "@iconify/utils";
@@ -104,7 +108,62 @@ import remarkGfm from "remark-gfm";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
 import { unified } from "unified";
-var processor = unified().use(remarkParse).use(remarkGfm).use(remarkRehype).use(rehypeStringify);
+var isElement = (n, tag) => n.type === "element" && (tag === void 0 || n.tagName === tag);
+var classesOf = (el2) => {
+  const c = el2.properties.className;
+  return Array.isArray(c) ? c.map(String) : typeof c === "string" ? c.split(/\s+/) : [];
+};
+var titleOf = (meta) => {
+  const m = meta?.match(/\btitle=(?:"([^"]*)"|'([^']*)')/);
+  return m?.[1] ?? m?.[2];
+};
+var el = (tagName, properties, children = []) => ({ type: "element", tagName, properties, children });
+function commandBlocks() {
+  const wrap = (pre) => {
+    const code = pre.children.find((c) => isElement(c, "code"));
+    if (!code || !isElement(code)) return pre;
+    const lang = classesOf(code).find((c) => c.startsWith("language-"))?.slice("language-".length);
+    const title = titleOf(code.data?.meta);
+    if (code.children.every((c) => c.type === "text")) {
+      const text = code.children.map((c) => c.value).join("");
+      const segments = takesPlaceholders(lang, code.data?.meta) ? splitPlaceholders(text) : [{ kind: "text", text }];
+      code.children = highlightSegments(lang, segments).map((piece) => {
+        if (piece.kind === "var") {
+          const { key, raw } = piece.segment;
+          return el("span", { className: ["idocs-ph"], dataKey: key, dataRaw: raw }, [
+            { type: "text", value: raw }
+          ]);
+        }
+        return piece.cls ? el("span", { className: [`hl-${piece.cls}`] }, [{ type: "text", value: piece.text }]) : { type: "text", value: piece.text };
+      });
+    }
+    return el(
+      "div",
+      { className: ["idocs-cmd"], dataIdocsCmd: "", ...lang ? { dataLang: lang } : {} },
+      [
+        el("div", { className: ["idocs-cmd-head"] }, [
+          el("span", { className: ["idocs-cmd-lang"] }, [
+            { type: "text", value: languageLabel(lang) }
+          ]),
+          ...title ? [el("span", { className: ["idocs-cmd-title"] }, [{ type: "text", value: title }])] : [],
+          el("div", { className: ["idocs-cmd-bar"] })
+        ]),
+        pre,
+        el("div", { className: ["idocs-cmd-panel"] })
+      ]
+    );
+  };
+  const walk = (node) => {
+    if (!("children" in node) || !node.children) return;
+    node.children = node.children.map((c) => {
+      if (isElement(c, "pre")) return wrap(c);
+      walk(c);
+      return c;
+    });
+  };
+  return (tree) => walk(tree);
+}
+var processor = unified().use(remarkParse).use(remarkGfm).use(remarkRehype).use(commandBlocks).use(rehypeStringify);
 function renderMarkdown(md) {
   const body = stripFrontmatter(md).trim();
   if (!body) return "";

package/dist/{chunk-P2X2XSBM.js → chunk-RJUH342Z.js}

@@ -1,6 +1,6 @@
 import {
   didYouMean
-} from "./chunk-ZYFFV7Y7.js";
+} from "./chunk-H77C3DSX.js";
 
 // src/nesting.ts
 function nestedDiagrams(all, name) {

package/dist/highlight.d.ts

@@ -0,0 +1,21 @@
+import type { PlaceholderSegment } from './placeholders';
+export type TokenClass = 'comment' | 'string' | 'keyword' | 'flag' | 'number' | 'variable' | 'key' | 'literal' | 'operator' | 'section';
+export interface Token {
+    text: string;
+    cls?: TokenClass;
+}
+/** The name of a language as a block's header shows it. Blocks with none are text. */
+export declare function languageLabel(lang: string | undefined): string;
+export declare function highlight(lang: string | undefined, text: string): Token[];
+export type Piece = {
+    kind: 'text';
+    text: string;
+    cls?: TokenClass;
+} | {
+    kind: 'var';
+    segment: Extract<PlaceholderSegment, {
+        kind: 'var';
+    }>;
+};
+/** A block's text as pieces to draw: coloured runs, with each placeholder where it was. */
+export declare function highlightSegments(lang: string | undefined, segments: PlaceholderSegment[]): Piece[];

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 export * from './defaults';
 export * from './geometry';
+export * from './highlight';
 export * from './layout';
 export * from './nested-layout';
 export * from './nesting';
 export * from './outline';
 export * from './phases';
+export * from './placeholders';
 export * from './route';
 export * from './scrubber';
 export * from './start';

package/dist/index.js

@@ -2,7 +2,7 @@ import {
   attachNested,
   linkDiagrams,
   nestedDiagrams
-} from "./chunk-P2X2XSBM.js";
+} from "./chunk-RJUH342Z.js";
 import {
   BUILTIN_EDGE_KINDS,
   BUILTIN_KINDS,
@@ -10,11 +10,23 @@ import {
   DEFAULT_NODE_WIDTH,
   STEP_KIND_COLORS,
   dist,
+  fillPlaceholders,
+  fillSegments,
+  highlight,
+  highlightSegments,
+  isSecretKey,
+  languageLabel,
   letterKey,
+  placeholdersOf,
   pointAt,
   polylineLength,
-  roundedPath
-} from "./chunk-ZYFFV7Y7.js";
+  roundedPath,
+  shownPlaceholder,
+  splitPlaceholders,
+  takesPlaceholders,
+  unsetPlaceholders,
+  varKey
+} from "./chunk-H77C3DSX.js";
 
 // src/layout.ts
 import ELK from "elkjs/lib/elk.bundled.js";
@@ -1575,9 +1587,15 @@ export {
   defaultExpanded,
   defaultMode,
   dist,
+  fillPlaceholders,
+  fillSegments,
   frameAt,
   hasPhases,
+  highlight,
+  highlightSegments,
+  isSecretKey,
   labelWidth,
+  languageLabel,
   layoutNested,
   layoutView,
   letterKey,
@@ -1589,6 +1607,7 @@ export {
   packGrid,
   pathJoin,
   phaseSpans,
+  placeholdersOf,
   pointAt,
   polylineLength,
   positionAt,
@@ -1597,11 +1616,16 @@ export {
   routeEdges,
   runBounds,
   scopeSvgIds,
+  shownPlaceholder,
   slotAt,
   slotOfStep,
+  splitPlaceholders,
   startOf,
   stepAt,
   stepEnd,
   stepStart,
-  timeAt
+  takesPlaceholders,
+  timeAt,
+  unsetPlaceholders,
+  varKey
 };

package/dist/node.js

@@ -2,7 +2,7 @@ import {
   attachNested,
   linkDiagrams,
   nestedDiagrams
-} from "./chunk-P2X2XSBM.js";
+} from "./chunk-RJUH342Z.js";
 import {
   FamilySchema,
   KNOWN_KEYS,
@@ -11,8 +11,8 @@ import {
   compileDiagram,
   createIconResolver,
   renderMarkdown
-} from "./chunk-Q2NHZ6TV.js";
-import "./chunk-ZYFFV7Y7.js";
+} from "./chunk-MUGDM3EQ.js";
+import "./chunk-H77C3DSX.js";
 
 // src/node.ts
 import { existsSync, readdirSync, readFileSync as readFileSync2, statSync } from "node:fs";

package/dist/placeholders.d.ts

@@ -0,0 +1,40 @@
+export type PlaceholderSegment = {
+    kind: 'text';
+    text: string;
+} | {
+    kind: 'var';
+    /** As written, braces or angle brackets included: `{yourname}`. */
+    raw: string;
+    /** As written, without them: `yourname`. */
+    name: string;
+    /** What `{Token}`, `<token>` and `<TOKEN>` share, so one value fills them all. */
+    key: string;
+};
+export interface Placeholder {
+    key: string;
+    /** The first spelling in the text. */
+    name: string;
+    raw: string;
+    /** A token or a password: kept in memory, never stored, masked on the page. */
+    secret: boolean;
+}
+export declare function varKey(name: string): string;
+export declare function isSecretKey(key: string): boolean;
+export declare function splitPlaceholders(text: string): PlaceholderSegment[];
+/** Each distinct placeholder once, in the order the text first uses it. */
+export declare function placeholdersOf(segments: PlaceholderSegment[]): Placeholder[];
+/** The text to copy: values where the reader set them, the placeholder as written where not. */
+export declare function fillSegments(segments: PlaceholderSegment[], values: Record<string, string>): string;
+export declare function fillPlaceholders(text: string, values: Record<string, string>): string;
+/** Placeholders in `segments` the reader has not set. */
+export declare function unsetPlaceholders(segments: PlaceholderSegment[], values: Record<string, string>): Placeholder[];
+export interface Shown {
+    text: string;
+    state: 'unset' | 'set' | 'secret';
+}
+/** What the page shows in place of a placeholder: the value, a mask for a secret, or the placeholder. */
+export declare function shownPlaceholder(segment: Extract<PlaceholderSegment, {
+    kind: 'var';
+}>, values: Record<string, string>): Shown;
+/** Whether a code block takes placeholders: by language, and `vars` / `novars` in the fence info decide otherwise. */
+export declare function takesPlaceholders(lang: string | undefined, meta: string | undefined): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@the-package-labs/idocs-core",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "exports": {
     ".": {

package/dist/chunk-ZYFFV7Y7.js

@@ -1,149 +0,0 @@
-// src/defaults.ts
-var BUILTIN_KINDS = {
-  client: { icon: "lucide:monitor", family: "slate" },
-  user: { icon: "lucide:user", family: "slate" },
-  ui: { icon: "lucide:layout-dashboard", family: "slate" },
-  external: { icon: "lucide:cloud", family: "slate" },
-  service: { icon: "lucide:server", family: "blue" },
-  gateway: { icon: "lucide:route", family: "blue" },
-  worker: { icon: "lucide:cog", family: "blue" },
-  container: { icon: "lucide:container", family: "blue" },
-  function: { icon: "lucide:square-function", family: "blue" },
-  database: { icon: "lucide:database", family: "green" },
-  cache: { icon: "lucide:zap", family: "green" },
-  storage: { icon: "lucide:hard-drive", family: "green" },
-  queue: { icon: "lucide:list-ordered", family: "amber" },
-  agent: { icon: "lucide:bot", family: "violet" },
-  network: { icon: "lucide:network", family: "violet" },
-  vm: { icon: "lucide:box", family: "violet" },
-  auth: { icon: "lucide:key-round", family: "teal" },
-  monitor: { icon: "lucide:activity", family: "teal" },
-  entity: { icon: "lucide:table-2", family: "blue" }
-};
-var BUILTIN_EDGE_KINDS = {
-  http: { label: "HTTP request / response", color: "ink", width: 1.5 },
-  channel: { label: "Persistent channel (websocket, gRPC)", color: "accent", width: 2.4 },
-  tunnel: { label: "Overlay tunnel", color: "tunnel", width: 5 },
-  queue: { label: "Queue / broker", color: "ok", width: 2, dash: "2 4" },
-  ws: { label: "WebSocket", color: "ink", width: 1.6, dash: "7 4" },
-  data: { label: "Data access", color: "muted", width: 1.3 },
-  relation: { label: "Relation between entities", color: "muted", width: 1.4 }
-};
-var STEP_KIND_COLORS = {
-  request: "accent",
-  response: "ok",
-  error: "bad",
-  lookup: "muted",
-  event: "warn"
-};
-var DEFAULT_NODE_WIDTH = 178;
-var DEFAULT_ENTITY_WIDTH = 280;
-
-// src/geometry.ts
-function polylineLength(points) {
-  let total = 0;
-  for (let i = 1; i < points.length; i++) total += dist(points[i - 1], points[i]);
-  return total;
-}
-function dist(a, b) {
-  return Math.hypot(b.x - a.x, b.y - a.y);
-}
-function pointAt(points, d) {
-  if (points.length === 0) return { x: 0, y: 0 };
-  let left = Math.max(0, d);
-  for (let i = 1; i < points.length; i++) {
-    const a = points[i - 1];
-    const b = points[i];
-    const len = dist(a, b);
-    if (left <= len || i === points.length - 1) {
-      const t = len === 0 ? 0 : Math.min(1, left / len);
-      return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
-    }
-    left -= len;
-  }
-  return points[points.length - 1];
-}
-function roundedPath(points, radius = 8) {
-  if (points.length === 0) return "";
-  const first = points[0];
-  let d = `M${r(first.x)} ${r(first.y)}`;
-  for (let i = 1; i < points.length - 1; i++) {
-    const prev = points[i - 1];
-    const cur = points[i];
-    const next = points[i + 1];
-    const inLen = dist(prev, cur);
-    const outLen = dist(cur, next);
-    const rad = Math.min(radius, inLen / 2, outLen / 2);
-    if (rad < 0.5) {
-      d += `L${r(cur.x)} ${r(cur.y)}`;
-      continue;
-    }
-    const a = {
-      x: cur.x + (prev.x - cur.x) / inLen * rad,
-      y: cur.y + (prev.y - cur.y) / inLen * rad
-    };
-    const b = {
-      x: cur.x + (next.x - cur.x) / outLen * rad,
-      y: cur.y + (next.y - cur.y) / outLen * rad
-    };
-    d += `L${r(a.x)} ${r(a.y)}Q${r(cur.x)} ${r(cur.y)} ${r(b.x)} ${r(b.y)}`;
-  }
-  if (points.length > 1) {
-    const last = points[points.length - 1];
-    d += `L${r(last.x)} ${r(last.y)}`;
-  }
-  return d;
-}
-function r(n) {
-  return Math.round(n * 10) / 10;
-}
-function letterKey(index) {
-  let n = index;
-  let out = "";
-  do {
-    out = String.fromCharCode(65 + n % 26) + out;
-    n = Math.floor(n / 26) - 1;
-  } while (n >= 0);
-  return out;
-}
-
-// src/suggest.ts
-function didYouMean(word, options) {
-  let best;
-  let bestDist = Math.max(2, Math.floor(word.length / 3)) + 1;
-  for (const o of options) {
-    const d = levenshtein(word.toLowerCase(), o.toLowerCase());
-    if (d < bestDist) {
-      best = o;
-      bestDist = d;
-    }
-  }
-  return best ? `Did you mean "${best}"?` : void 0;
-}
-function levenshtein(a, b) {
-  const row = Array.from({ length: b.length + 1 }, (_, i) => i);
-  for (let i = 1; i <= a.length; i++) {
-    let prev = row[0];
-    row[0] = i;
-    for (let j = 1; j <= b.length; j++) {
-      const tmp = row[j];
-      row[j] = Math.min(row[j] + 1, row[j - 1] + 1, prev + (a[i - 1] === b[j - 1] ? 0 : 1));
-      prev = tmp;
-    }
-  }
-  return row[b.length];
-}
-
-export {
-  BUILTIN_KINDS,
-  BUILTIN_EDGE_KINDS,
-  STEP_KIND_COLORS,
-  DEFAULT_NODE_WIDTH,
-  DEFAULT_ENTITY_WIDTH,
-  polylineLength,
-  dist,
-  pointAt,
-  roundedPath,
-  letterKey,
-  didYouMean
-};