fix(studio): render complete interactive gallery previews

packages/design-studio/src/preview-assets.ts

@@ -0,0 +1,57 @@
+import lucide from "@iconify-json/lucide/icons.json";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { createRequire } from "node:module";
+
+/** Inline the real shipped icon shapes: preview frames never need an icon CDN. */
+export function previewIconCss(markup: string) {
+  const names = new Set([...markup.matchAll(/icon-\[lucide--([\w-]+)\]/g)].map((m) => m[1]!));
+  // Controllers introduce these icons after interaction.
+  for (const name of ["check", "x", "chevron-down", "chevron-up", "loader-circle"]) names.add(name);
+  const icons = lucide.icons as Record<string, { body: string }>;
+  return [...names]
+    .map((name) => {
+      const aliases = lucide.aliases as Record<string, { parent: string }>;
+      let key = name;
+      const visited = new Set<string>();
+      while (!icons[key] && aliases[key] && !visited.has(key)) {
+        visited.add(key);
+        key = aliases[key]!.parent;
+      }
+      const icon = icons[key];
+      if (!icon) throw Error(`Unknown preview icon: lucide--${name}`);
+      const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">${icon.body}</svg>`;
+      const url = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+      return `[class~="icon-[lucide--${name}]"]{display:inline-block;width:1em;height:1em;flex-shrink:0;background-color:currentColor;mask:${url} center/contain no-repeat;-webkit-mask:${url} center/contain no-repeat}`;
+    })
+    .join("\n");
+}
+
+const runtimeCache = new Map<string, Promise<string>>();
+export async function previewProviderRuntime(name: "chart" | "drawflow") {
+  if (!runtimeCache.has(name))
+    runtimeCache.set(
+      name,
+      (async () => {
+        const result = await Bun.build({
+          entrypoints: [fileURLToPath(import.meta.resolve(`@wrnexus/ui/${name}-runtime`))],
+          target: "browser",
+          format: "iife",
+          minify: true,
+        });
+        if (!result.success) throw Error(result.logs.join("\n"));
+        return result.outputs[0]!.text();
+      })().catch((error) => {
+        runtimeCache.delete(name);
+        throw error;
+      }),
+    );
+  return runtimeCache.get(name)!;
+}
+export function previewDrawflowCss() {
+  const require = createRequire(import.meta.resolve("@wrnexus/ui/drawflow-runtime"));
+  return (
+    readFileSync(require.resolve("drawflow/dist/drawflow.min.css"), "utf8") +
+    readFileSync(fileURLToPath(import.meta.resolve("@wrnexus/ui/drawflow.css")), "utf8")
+  );
+}