@purview-dev/astroc4 1.0.0-prerelease.5 → 1.0.0-prerelease.6

package/dist/integration.js

@@ -1,13 +1,40 @@
 // src/integration.ts
-import { createRequire as createRequire2 } from "node:module";
-import { join } from "node:path";
-import { fileURLToPath as fileURLToPath2 } from "node:url";
+import { existsSync } from "node:fs";
+import { dirname as dirname3, join as join5, resolve as resolve5 } from "node:path";
+import { fileURLToPath as fileURLToPath4 } from "node:url";
 import { LikeC4VitePlugin } from "likec4/vite-plugin";
 
 // src/fences.ts
 import { createHash } from "node:crypto";
+import { readFile } from "node:fs/promises";
+import { dirname, isAbsolute, relative, resolve } from "node:path";
 import { createRequire } from "node:module";
 import { fileURLToPath } from "node:url";
+
+// src/translations.ts
+var translations = {
+  en: {
+    "likec4.view.title": "Architecture diagram",
+    "likec4.view.description": "Interactive LikeC4 diagram for this section.",
+    "likec4.view.hint": "Click a node in the diagram to open its details.",
+    "likec4.view.badge": "Click any node to open the modal",
+    "likec4.view.loading": "Loading architecture diagram…",
+    "likec4.fence.title": "Diagram",
+    "likec4.fence.hint": "Click any node to open its details.",
+    "likec4.fence.loading": "Loading diagram…",
+    "likec4.error.title": "We couldn’t load this diagram.",
+    "likec4.error.body": "Please retry, or refresh the page if the issue persists.",
+    "likec4.error.retry": "Retry",
+    "likec4.error.viewIdRequired": "A LikeC4 viewId is required to render the diagram.",
+    "likec4.error.noProjects": "No LikeC4 projects are available in this workspace.",
+    "likec4.error.unknownProject": 'Unknown LikeC4 projectId "{projectId}". Available projects: {available}.',
+    "likec4.error.projectRequired": 'Several LikeC4 projects exist ({available}); pass project="…".',
+    "likec4.error.unresolvedProject": "Unable to resolve a LikeC4 project.",
+    "likec4.error.loadFailed": 'Unable to load LikeC4 project "{projectId}".'
+  }
+};
+
+// src/fences.ts
 var require2 = createRequire(import.meta.url);
 var likec4ApiPromise;
 function loadLikeC4() {
@@ -25,6 +52,7 @@ var IMPORTS = {
   [INLINE_COMPONENT]: `${PACKAGE_NAME}/components/LikeC4Fence.astro`,
   [PROJECT_COMPONENT]: `${PACKAGE_NAME}/components/LikeC4View.astro`
 };
+var STRINGS = translations.en;
 var layoutCache = new Map;
 function parseFenceMeta(meta) {
   const options = {};
@@ -40,7 +68,7 @@ function parseFenceMeta(meta) {
   }
   return options;
 }
-async function layoutSnippet(source) {
+async function layoutSource(source) {
   const key = createHash("sha256").update(source).digest("hex");
   const cached = layoutCache.get(key);
   if (cached)
@@ -92,26 +120,11 @@ function describe(fileURL) {
     return String(fileURL);
   }
 }
-var CONSOLE_REPORTER = {
-  warn: (message) => console.warn(`[likec4-fences] ${message}`)
-};
-function likec4Fences({ reporter = CONSOLE_REPORTER, mdx = true } = {}) {
+function likec4Fences({ root, projects } = {}) {
   return (factory) => {
-    if (factory.sourceFormat !== "mdx") {
-      if (!factory.source.includes("```" + FENCE_LANG))
-        return null;
-      const fix = mdx ? "Rename the page to .mdx, or use <LikeC4View /> directly." : "Add @astrojs/mdx (`astro add mdx`) and rename the page to .mdx, or use <LikeC4View /> directly.";
-      return {
-        name: "likec4-fences:warn",
-        code(node, ctx) {
-          if (node.lang !== FENCE_LANG)
-            return;
-          reporter.warn(`${describe(ctx.fileURL)} has a \`\`\`${FENCE_LANG} fence, but fences only ` + `render as diagrams in .mdx files. ${fix}`);
-        }
-      };
-    }
     if (!factory.source.includes("```" + FENCE_LANG))
       return null;
+    const markdown = factory.sourceFormat !== "mdx";
     const used = new Set;
     return {
       name: "likec4-fences",
@@ -120,7 +133,7 @@ function likec4Fences({ reporter = CONSOLE_REPORTER, mdx = true } = {}) {
           return;
         const where = `${describe(ctx.fileURL)}: \`\`\`${FENCE_LANG} fence`;
         const options = parseFenceMeta(node.meta);
-        const source = (node.value ?? "").trim();
+        const source = options.file ? await readFenceFile(options.file, ctx.fileURL, root, where) : (node.value ?? "").trim();
         const common = {
           title: options.title,
           description: options.description,
@@ -132,25 +145,40 @@ function likec4Fences({ reporter = CONSOLE_REPORTER, mdx = true } = {}) {
           if (!options.view) {
             throw new Error(`${where} is empty, so it needs \`view="<id>"\` to name a view in the project model.`);
           }
+          checkProject(options.project, projects, where);
+          if (markdown) {
+            ctx.replaceNode(node, {
+              raw: fencePlaceholder({ ...placeholderOptions(options), viewId: options.view, project: options.project }),
+              mdxExpressions: false
+            });
+            return;
+          }
           used.add(PROJECT_COMPONENT);
           ctx.replaceNode(node, {
             type: "mdxJsxFlowElement",
             name: PROJECT_COMPONENT,
-            attributes: attributes({ ...common, viewId: options.view }),
+            attributes: attributes({ ...common, viewId: options.view, project: options.project }),
             children: []
           });
           return;
         }
         let layout;
         try {
-          layout = await layoutSnippet(source);
+          layout = await layoutSource(source);
         } catch (error) {
           throw new Error(`${where} is not valid LikeC4 — ${error instanceof Error ? error.message : String(error)}`);
         }
-        const viewId = options.view ?? layout.viewIds[0];
+        const viewId = options.view ?? defaultView(source, layout.viewIds);
         if (!viewId || !layout.viewIds.includes(viewId)) {
           throw new Error(`${where} has no view "${viewId ?? "(none)"}". Declared: ${layout.viewIds.join(", ") || "(none)"}.`);
         }
+        if (markdown) {
+          ctx.replaceNode(node, {
+            raw: fencePlaceholder({ ...placeholderOptions(options), viewId, model: layout.dump }),
+            mdxExpressions: false
+          });
+          return;
+        }
         used.add(INLINE_COMPONENT);
         ctx.replaceNode(node, {
           type: "mdxJsxFlowElement",
@@ -167,49 +195,590 @@ function likec4Fences({ reporter = CONSOLE_REPORTER, mdx = true } = {}) {
     };
   };
 }
+function checkProject(project, projects, where) {
+  if (projects === undefined)
+    return;
+  const requested = project?.trim();
+  const available = projects.join(", ");
+  if (!requested) {
+    if (projects.length > 1) {
+      throw new Error(`${where}: ${STRINGS["likec4.error.projectRequired"].replace("{available}", available)}`);
+    }
+    return;
+  }
+  if (!projects.includes(requested)) {
+    throw new Error(`${where}: ${STRINGS["likec4.error.unknownProject"].replace("{projectId}", requested).replace("{available}", available || "(none)")}`);
+  }
+}
+function defaultView(source, viewIds) {
+  for (const match of source.matchAll(/(?<![\w-])view\s+([\w-]+)/g)) {
+    if (viewIds.includes(match[1]))
+      return match[1];
+  }
+  return viewIds[0];
+}
+var token = {
+  border: "var(--likec4-border, var(--sl-color-gray-5, rgba(128, 128, 128, 0.35)))",
+  surface: "var(--likec4-surface, var(--sl-color-bg, transparent))",
+  surfaceAlt: "var(--likec4-surface-alt, var(--sl-color-bg-nav, rgba(128, 128, 128, 0.06)))",
+  text: "var(--likec4-text, var(--sl-color-white, inherit))",
+  textMuted: "var(--likec4-text-muted, var(--sl-color-gray-2, rgba(128, 128, 128, 0.95)))"
+};
+function fencePlaceholder({
+  viewId,
+  model,
+  project,
+  title = STRINGS["likec4.fence.title"],
+  description,
+  height = 420,
+  collapsible = true,
+  defaultOpen = true
+}) {
+  const data = [
+    `data-astroc4-fence`,
+    `data-view-id="${escapeHtml(viewId)}"`,
+    project ? `data-project="${escapeHtml(project)}"` : "",
+    model === undefined ? "" : `data-model="${escapeHtml(JSON.stringify(model))}"`
+  ].filter(Boolean).join(" ");
+  const headerStyle = `display: block; padding: 1em 1.25rem; border-bottom: 1px solid ${token.border}; background: ${token.surface};`;
+  const heading = [
+    `<h3 style="display: inline; margin: 0; font-size: 1rem; font-weight: 600; color: ${token.text};">${escapeHtml(title)}</h3>`,
+    description ? `<p style="margin: 0.25rem 0 0; font-size: 0.875rem; color: ${token.textMuted};">${escapeHtml(description)}</p>` : ""
+  ].join("");
+  const body = [
+    `<div style="padding: 1em 1.25rem;">`,
+    `<div class="likec4-frame" style="position: relative; width: 100%; height: ${height}px; min-height: ${height}px;">`,
+    `<p class="likec4-loading" aria-live="polite" style="color: ${token.textMuted};">${escapeHtml(STRINGS["likec4.fence.loading"])}</p>`,
+    `</div>`,
+    `</div>`
+  ].join("");
+  const shell = collapsible ? `<details${defaultOpen ? " open" : ""}><summary style="cursor: pointer; ${headerStyle}">${heading}</summary>${body}</details>` : `<header style="${headerStyle}">${heading}</header>${body}`;
+  return [
+    `<section class="not-content likec4-md-fence" ${data} style="margin: 1.5rem 0; overflow: hidden; border: 1px solid ${token.border}; border-radius: 0.75rem; background: ${token.surfaceAlt};">`,
+    shell,
+    `</section>`
+  ].join("");
+}
+function placeholderOptions(options) {
+  const height = Number.parseInt(options.height ?? "", 10);
+  return {
+    title: options.title || undefined,
+    description: options.description || undefined,
+    height: Number.isFinite(height) ? height : undefined,
+    collapsible: options.collapsible !== "false",
+    defaultOpen: options.defaultOpen !== "false"
+  };
+}
+function escapeHtml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("'", "&#39;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+async function readFenceFile(file, pageURL, root, where) {
+  if (!pageURL || !root) {
+    throw new Error(`${where} uses file="${file}", which needs the page's location and the site root.`);
+  }
+  const path = resolve(dirname(fileURLToPath(pageURL)), file);
+  const fromRoot = relative(resolve(root), path);
+  if (fromRoot.startsWith("..") || isAbsolute(fromRoot)) {
+    throw new Error(`${where} uses file="${file}", which is outside the site (${path}).`);
+  }
+  try {
+    return (await readFile(path, "utf8")).trim();
+  } catch {
+    throw new Error(`${where} uses file="${file}", which does not exist (${path}).`);
+  }
+}
+
+// src/file-layout.ts
+import { readFile as readFile2 } from "node:fs/promises";
+var FILE_LAYOUT_QUERY = "?astroc4-layout";
+function fileLayoutPlugin() {
+  return {
+    name: "@purview-dev/astroc4/file-layout",
+    async load(id) {
+      if (!id.endsWith(FILE_LAYOUT_QUERY))
+        return null;
+      const file = id.slice(0, -FILE_LAYOUT_QUERY.length);
+      this.addWatchFile(file);
+      let layout;
+      try {
+        layout = await layoutSource(await readFile2(file, "utf8"));
+      } catch (error) {
+        throw new Error(`[astroc4] ${file} is not valid LikeC4 — ${error.message}`);
+      }
+      return `export default ${JSON.stringify(layout)};`;
+    }
+  };
+}
+
+// src/icon-plugin.ts
+import { readFile as readFile4, copyFile, mkdir } from "node:fs/promises";
+import { dirname as dirname2, extname, join as join3 } from "node:path";
+import { fileURLToPath as fileURLToPath3, pathToFileURL as pathToFileURL2 } from "node:url";
+
+// src/icon-assets.ts
+import { realpathSync } from "node:fs";
+import { isAbsolute as isAbsolute2, join as join2, relative as relative2, resolve as resolve3, sep } from "node:path";
+import { fileURLToPath as fileURLToPath2, pathToFileURL } from "node:url";
+
+// src/projects.ts
+import { readdir, readFile as readFile3, stat } from "node:fs/promises";
+import { basename, join, resolve as resolve2 } from "node:path";
+var CONFIG_FILES = [
+  ".likec4rc",
+  ".likec4.config.json",
+  "likec4.config.json",
+  "likec4.config.js",
+  "likec4.config.cjs",
+  "likec4.config.mjs",
+  "likec4.config.ts",
+  "likec4.config.cts",
+  "likec4.config.mts"
+];
+var JSON_CONFIG_FILES = CONFIG_FILES.slice(0, 3);
+
+class Astroc4ConfigError extends Error {
+  constructor(message) {
+    super(`[astroc4] ${message}`);
+    this.name = "Astroc4ConfigError";
+  }
+}
+async function discoverProjects(root) {
+  const found = [];
+  async function walk(folder) {
+    const entries = await readdir(folder, { withFileTypes: true });
+    const file = configFileIn(entries.filter((entry) => entry.isFile()).map((entry) => entry.name));
+    if (file) {
+      const config = await readConfig(folder, file);
+      found.push(toProject(config.name, folder, config, "discovered"));
+    }
+    for (const entry of entries) {
+      if (!entry.isDirectory() || entry.name === "node_modules" || entry.name.startsWith("."))
+        continue;
+      await walk(join(folder, entry.name));
+    }
+  }
+  await walk(resolve2(root));
+  return found;
+}
+async function resolveProjects(options) {
+  const configured = [];
+  for (const [name, path] of Object.entries(options.configured ?? {})) {
+    const folder = resolve2(options.root, path);
+    if (!await isDirectory(folder)) {
+      throw new Astroc4ConfigError(`project "${name}": folder ${folder} does not exist.`);
+    }
+    const file = configFileIn(await readdir(folder));
+    if (!file) {
+      throw new Astroc4ConfigError(`project "${name}": no LikeC4 config file (likec4.config.json, .likec4rc, likec4.config.ts, …) in ${folder}.`);
+    }
+    configured.push(toProject(name, folder, await readConfig(folder, file), "configured"));
+  }
+  const configuredFolders = new Set(configured.map((project) => project.folder));
+  const projects = [
+    ...configured,
+    ...options.discovered.filter((project) => !configuredFolders.has(project.folder))
+  ];
+  const byName = new Map;
+  for (const project of projects) {
+    const existing = byName.get(project.name);
+    if (existing) {
+      throw new Astroc4ConfigError(`two LikeC4 projects are named "${project.name}": ${existing.folder} and ${project.folder}.`);
+    }
+    byName.set(project.name, project);
+  }
+  const byId = new Map;
+  for (const project of projects) {
+    const existing = byId.get(project.likec4Id);
+    if (existing) {
+      throw new Astroc4ConfigError(`two LikeC4 projects declare "name": "${project.likec4Id}" in their configs: ${existing.folder} and ${project.folder}. Rename one.`);
+    }
+    byId.set(project.likec4Id, project);
+  }
+  return projects;
+}
+function configFileIn(names) {
+  return CONFIG_FILES.find((file) => names.includes(file));
+}
+async function readConfig(folder, file) {
+  const path = join(folder, file);
+  let config;
+  try {
+    config = JSON_CONFIG_FILES.includes(file) ? await readJsonConfig(path) : await evaluateConfig(path, folder);
+  } catch (error) {
+    throw new Astroc4ConfigError(`${path} could not be read: ${error.message}`);
+  }
+  if (typeof config !== "object" || config === null || Array.isArray(config)) {
+    throw new Astroc4ConfigError(`${path} must define a config object.`);
+  }
+  const { name = basename(folder), imageAliases } = config;
+  if (typeof name !== "string" || name.trim().length === 0) {
+    throw new Astroc4ConfigError(`${path} has an empty "name".`);
+  }
+  return { name, imageAliases: isRecord(imageAliases) ? imageAliases : undefined };
+}
+async function readJsonConfig(path) {
+  const { default: JSON5 } = await import("json5");
+  const text = (await readFile3(path, "utf8")).trim();
+  return JSON5.parse(text || "{}");
+}
+async function evaluateConfig(path, folder) {
+  const { bundleRequire } = await import("bundle-require");
+  const { mod } = await bundleRequire({
+    filepath: path,
+    cwd: folder,
+    esbuildOptions: {
+      resolveExtensions: [".ts", ".mts", ".cts", ".mjs", ".js", ".cjs"],
+      plugins: [
+        {
+          name: "astroc4-likec4-config",
+          setup(build) {
+            build.onResolve({ filter: /^@?likec4\/config$/ }, (args) => ({
+              path: args.path,
+              namespace: "astroc4-likec4-config"
+            }));
+            build.onLoad({ filter: /.*/, namespace: "astroc4-likec4-config" }, () => ({
+              contents: [
+                "const identity = (value) => value;",
+                "export { identity as defineConfig, identity as defineGenerators, identity as defineStyle, identity as defineTheme, identity as defineThemeColor };"
+              ].join(`
+`),
+              loader: "js"
+            }));
+          }
+        }
+      ]
+    }
+  });
+  return mod.default ?? mod;
+}
+function toProject(name, folder, config, source) {
+  const imageAliases = Object.fromEntries(Object.entries(config.imageAliases ?? {}).map(([alias, path]) => [alias, resolve2(folder, path)]));
+  return { name, folder: resolve2(folder), likec4Id: config.name, source, imageAliases };
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) && Object.values(value).every((entry) => typeof entry === "string");
+}
+async function isDirectory(path) {
+  return (await stat(path).catch(() => null))?.isDirectory() ?? false;
+}
+
+// src/icon-assets.ts
+var ICON_ROUTE = "/_astroc4/";
+var UP = "__up";
+function iconAssetFor(project, fileUrl, base, siteRoot) {
+  const file = realFile(fileUrl);
+  const prefix = base.replace(/\/+$/, "");
+  const publicFolder = tryRealpath(join2(siteRoot, "public"));
+  if (isInside(file, publicFolder)) {
+    const path = split(relative2(publicFolder, file)).map(encodeURIComponent).join("/");
+    return { file, url: `${prefix}/${path}`, projectName: project.name, public: true };
+  }
+  const segments = aliasSegments(project, file) ?? relativeSegments(tryRealpath(project.folder), file);
+  const path = [project.name, ...segments].map(encodeURIComponent).join("/");
+  return { file, url: `${prefix}${ICON_ROUTE}${path}`, projectName: project.name };
+}
+function unstage(fileUrl, project, stagingDir) {
+  if (stagingDir === undefined)
+    return fileUrl;
+  let path;
+  try {
+    path = fileURLToPath2(decodeDrive(fileUrl));
+  } catch {
+    return fileUrl;
+  }
+  const fromLink = relative2(join2(stagingDir, project.name), path);
+  return pathToFileURL(resolve3(project.folder, fromLink)).href;
+}
+function buildIconManifest(entries, base, siteRoot) {
+  const manifest = new Map;
+  const byUrl = new Map;
+  for (const { project, fileUrl, source } of entries) {
+    let asset;
+    try {
+      asset = iconAssetFor(project, fileUrl, base, siteRoot);
+    } catch (error) {
+      throw new Astroc4ConfigError(`${source}: ${error.message.replace(/^\[astroc4\] /, "")}`);
+    }
+    if (asset === null)
+      continue;
+    const existing = byUrl.get(asset.url);
+    if (existing && !samePath(existing.asset.file, asset.file)) {
+      throw new Astroc4ConfigError(`two icons would be served at ${asset.url}: ${existing.asset.file} (${existing.source}) and ${asset.file} (${source}). Rename one, or give its alias another name.`);
+    }
+    byUrl.set(asset.url, { asset, source });
+    manifest.set(fileUrl, asset);
+  }
+  return manifest;
+}
+function aliasSegments(project, file) {
+  let best = null;
+  for (const [alias, folder] of Object.entries(project.imageAliases)) {
+    const real = tryRealpath(folder);
+    if (isInside(file, real) && (best === null || real.length > best.folder.length)) {
+      best = { folder: real, alias };
+    }
+  }
+  if (best === null)
+    return null;
+  const name = best.alias.replace(/^@/, "");
+  return [...name ? [name] : [], ...split(relative2(best.folder, file))];
+}
+function relativeSegments(folder, file) {
+  return split(relative2(folder, file)).map((segment) => segment === ".." ? UP : segment);
+}
+function realFile(fileUrl) {
+  let path;
+  try {
+    path = fileURLToPath2(decodeDrive(fileUrl));
+  } catch {
+    throw new Astroc4ConfigError(`icon ${fileUrl} is not a file URL.`);
+  }
+  try {
+    return realpathSync(path);
+  } catch {
+    throw new Astroc4ConfigError(`icon ${path} does not exist.`);
+  }
+}
+function decodeDrive(fileUrl) {
+  return fileUrl.replace(/^file:\/\/\/([A-Za-z])%3A/i, "file:///$1:");
+}
+function tryRealpath(path) {
+  try {
+    return realpathSync(path);
+  } catch {
+    return path;
+  }
+}
+function isInside(file, folder) {
+  const path = relative2(folder, file);
+  return path.length > 0 && !path.startsWith("..") && !isAbsolute2(path);
+}
+function samePath(a, b) {
+  return sep === "\\" ? a.toLowerCase() === b.toLowerCase() : a === b;
+}
+function split(path) {
+  return path.split(/[\\/]+/).filter((segment) => segment.length > 0);
+}
+
+// src/icon-plugin.ts
+var LIKEC4_MODULE = /likec4:plugin\/(?<projectId>[^/]+)\/[^/]+$/;
+var FILE_URL = /file:(?:\\u002F|\/){3}[^"'`\s]+/g;
+var CONTENT_TYPES = {
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+  ".ico": "image/x-icon"
+};
+function astroc4IconPlugin(state) {
+  const manifest = new Map;
+  const byUrl = new Map;
+  const base = state.base.replace(/\/+$/, "");
+  function gather(project, fileUrl) {
+    const known = manifest.get(fileUrl);
+    if (known)
+      return known;
+    const entries = [
+      ...[...byUrl.values()].map((asset) => ({
+        project: state.projects.find((p) => p.name === asset.projectName),
+        fileUrl: pathToFileURL2(asset.file).href,
+        source: `LikeC4 project "${asset.projectName}"`
+      })),
+      { project, fileUrl, source: `LikeC4 project "${project.name}"` }
+    ];
+    const asset = buildIconManifest(entries, state.base, state.siteRoot).get(fileUrl);
+    if (!asset)
+      return;
+    manifest.set(fileUrl, asset);
+    if (!asset.public)
+      byUrl.set(asset.url, asset);
+    return asset;
+  }
+  return {
+    name: "@purview-dev/astroc4/icons",
+    enforce: "post",
+    transform(code, id) {
+      const match = LIKEC4_MODULE.exec(id);
+      if (!match)
+        return null;
+      const project = state.projects.find((p) => p.likec4Id === match.groups.projectId);
+      if (!project || !code.includes("file:"))
+        return null;
+      const rewritten = code.replace(FILE_URL, (found) => {
+        const escapedForm = found.includes("\\u002F");
+        const [fileUrl, query] = found.replaceAll("\\u002F", "/").split("?", 2);
+        const real = unstage(fileUrl, project, state.stagingDir);
+        if (query !== undefined) {
+          return `${fileURLToPath3(real).replaceAll("\\", "/")}?${query}`;
+        }
+        const asset = gather(project, real);
+        if (!asset)
+          return found;
+        return escapedForm ? asset.url.replaceAll("/", "\\u002F") : asset.url;
+      });
+      return rewritten === code ? null : { code: rewritten, map: null };
+    },
+    configureServer(server) {
+      const prefix = `${base}${ICON_ROUTE}`;
+      server.middlewares.use(async (req, res, next) => {
+        const url = req.url?.split("?")[0];
+        if (!url?.startsWith(prefix))
+          return next();
+        const asset = byUrl.get(url);
+        if (!asset) {
+          res.statusCode = 404;
+          res.end();
+          return;
+        }
+        res.setHeader("Content-Type", CONTENT_TYPES[extname(asset.file).toLowerCase()] ?? "application/octet-stream");
+        res.end(await readFile4(asset.file));
+      });
+    },
+    manifest: () => manifest,
+    async emit(outDir) {
+      for (const asset of byUrl.values()) {
+        const target = join3(outDir, ...decodeURIComponent(asset.url.slice(base.length)).split("/"));
+        await mkdir(dirname2(target), { recursive: true });
+        await copyFile(asset.file, target);
+      }
+    }
+  };
+}
+
+// src/workspace.ts
+import { lstat, mkdir as mkdir2, readdir as readdir2, readlink, realpath, rm, symlink } from "node:fs/promises";
+import { join as join4, resolve as resolve4 } from "node:path";
+var PROJECTS_MODULE_ID = "virtual:astroc4/projects";
+async function prepareWorkspace(projects, cacheDir) {
+  const staging = join4(cacheDir, "workspace");
+  await mkdir2(staging, { recursive: true });
+  const wanted = new Map(projects.map((project) => [project.name, resolve4(project.folder)]));
+  for (const entry of await readdir2(staging)) {
+    const target = wanted.get(entry);
+    if (target === undefined || !await pointsAt(join4(staging, entry), target)) {
+      await rm(join4(staging, entry), { recursive: false, force: true });
+    }
+  }
+  for (const [name, folder] of wanted) {
+    const link = join4(staging, name);
+    if (await exists(link))
+      continue;
+    await symlink(folder, link, "junction");
+  }
+  return staging;
+}
+function projectsModule(projects) {
+  const names = projects.map((project) => project.name);
+  const ids = Object.fromEntries(projects.map((project) => [project.name, project.likec4Id]));
+  return [
+    `export const projectNames = ${JSON.stringify(names)};`,
+    `export const likec4IdFor = ${JSON.stringify(ids)};`
+  ].join(`
+`);
+}
+async function pointsAt(link, target) {
+  try {
+    const stats = await lstat(link);
+    if (!stats.isSymbolicLink())
+      return false;
+    await readlink(link);
+    return await realpath(link) === await realpath(target);
+  } catch {
+    return false;
+  }
+}
+async function exists(path) {
+  return await lstat(path).catch(() => null) !== null;
+}
 
 // src/integration.ts
 var PACKAGE_NAME2 = "@purview-dev/astroc4";
 var OPTIMIZED_DEPENDENCIES = ["react/compiler-runtime"];
+var MD_FENCES_SCRIPT = [
+  `const mountLikeC4Fences = () => {`,
+  `  if (!document.querySelector('[data-astroc4-fence]:not([data-astroc4-mounted])')) return;`,
+  `  import('${PACKAGE_NAME2}/components/md-fences').then((module) => module.mountFences());`,
+  `};`,
+  `if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', mountLikeC4Fences);`,
+  `else mountLikeC4Fences();`,
+  `document.addEventListener('astro:page-load', mountLikeC4Fences);`
+].join(`
+`);
 function missingOptimizedDependencies(include, root) {
   const existing = Array.isArray(include) ? include : [];
   return OPTIMIZED_DEPENDENCIES.filter((dependency) => !existing.includes(dependency) && resolvesFrom(dependency, root));
 }
 function resolvesFrom(specifier, root) {
-  try {
-    createRequire2(join(root, "package.json")).resolve(specifier);
-    return true;
-  } catch {
-    return false;
+  const name = specifier.split("/", specifier.startsWith("@") ? 2 : 1).join("/");
+  for (let dir = resolve5(root);; dir = dirname3(dir)) {
+    if (existsSync(join5(dir, "node_modules", name, "package.json")))
+      return true;
+    if (dirname3(dir) === dir)
+      return false;
   }
 }
 function likec4Integration({
   vitePlugin = {},
+  projects,
   fences = true
 } = {}) {
+  let icons;
   return {
     name: `${PACKAGE_NAME2}/integration`,
     hooks: {
-      "astro:config:setup": async ({ command, config, updateConfig, logger }) => {
-        const optimizeDeps = missingOptimizedDependencies(config.vite?.optimizeDeps?.include, fileURLToPath2(config.root));
+      "astro:config:setup": async ({ command, config, updateConfig, injectScript, logger }) => {
+        const root = fileURLToPath4(config.root);
+        const optimizeDeps = missingOptimizedDependencies(config.vite?.optimizeDeps?.include, root);
+        const { pluginOptions, resolved, stagingDir } = await workspaceFor(root, vitePlugin, projects, logger);
+        icons = astroc4IconPlugin({ projects: resolved, base: config.base ?? "/", siteRoot: root, stagingDir });
         updateConfig({
           vite: {
-            plugins: [LikeC4VitePlugin(vitePlugin)],
+            plugins: [LikeC4VitePlugin(pluginOptions), projectsPlugin(resolved), icons, fileLayoutPlugin()],
             ssr: { noExternal: [PACKAGE_NAME2] },
             ...optimizeDeps.length > 0 ? { optimizeDeps: { include: optimizeDeps } } : {}
           }
         });
         if (fences) {
-          await registerFences(config, updateConfig, logger);
+          await registerFences(config, updateConfig, logger, resolved);
+          injectScript("page", MD_FENCES_SCRIPT);
         }
         await ensureReactRenderer(config, updateConfig, logger);
         if (command === "build") {
           await preloadLikeC4();
         }
+      },
+      "astro:build:done": async ({ dir }) => {
+        await icons?.emit(fileURLToPath4(dir));
       }
     }
   };
 }
+async function workspaceFor(root, vitePlugin, configured, logger) {
+  const hasConfigured = configured !== undefined && Object.keys(configured).length > 0;
+  if (vitePlugin.workspace !== undefined || "languageServices" in vitePlugin) {
+    if (hasConfigured) {
+      logger.warn("`projects` is ignored because `vitePlugin.workspace` or `vitePlugin.languageServices` is set; remove one of them.");
+    }
+    return { pluginOptions: vitePlugin, resolved: [] };
+  }
+  const discovered = await discoverProjects(root);
+  if (!hasConfigured) {
+    return { pluginOptions: vitePlugin, resolved: discovered };
+  }
+  const resolved = await resolveProjects({ root, configured, discovered });
+  const workspace = await prepareWorkspace(resolved, join5(root, ".astro", "astroc4"));
+  return { pluginOptions: { ...vitePlugin, workspace }, resolved, stagingDir: workspace };
+}
+function projectsPlugin(projects) {
+  const resolvedId = `\x00${PROJECTS_MODULE_ID}`;
+  return {
+    name: `${PACKAGE_NAME2}/projects`,
+    resolveId: (id) => id === PROJECTS_MODULE_ID ? resolvedId : undefined,
+    load: (id) => id === resolvedId ? projectsModule(projects) : undefined
+  };
+}
 async function ensureReactRenderer(config, updateConfig, logger) {
   if (config.integrations.some((integration) => integration.name === "@astrojs/react"))
     return;
@@ -221,16 +790,13 @@ async function ensureReactRenderer(config, updateConfig, logger) {
     logger.warn("@astrojs/react is not installed, so <LikeC4View> cannot render. Install it (`astro add react`).");
   }
 }
-async function registerFences(config, updateConfig, logger) {
+async function registerFences(config, updateConfig, logger, projects) {
   const { satteri, isSatteriProcessor } = await import("@astrojs/markdown-satteri");
   const existing = config.markdown?.processor;
-  const fences = () => {
-    const fenceLogger = logger.fork("likec4-fences");
-    return likec4Fences({
-      reporter: { warn: (message) => fenceLogger.warn(message) },
-      mdx: config.integrations.some((integration) => integration.name === "@astrojs/mdx")
-    });
-  };
+  const fences = () => likec4Fences({
+    root: fileURLToPath4(config.root),
+    projects: projects.length > 0 ? projects.map((project) => project.name) : undefined
+  });
   if (existing === undefined) {
     updateConfig({ markdown: { processor: satteri({ mdastPlugins: [fences()] }) } });
     return;
@@ -257,5 +823,5 @@ export {
   missingOptimizedDependencies
 };
 
-//# debugId=C86C94AAF98979CF64756E2164756E21
+//# debugId=6B1EB5C52F4EEAE864756E2164756E21
 //# sourceMappingURL=integration.js.map