@ai-gui/image 0.34.0 → 0.35.0

package/README.md

@@ -1,9 +1,11 @@
 # @ai-gui/image
 
-Render [AIGUI](../../README.md) markdown blocks — ECharts charts, Mermaid diagrams, KaTeX math, tables, cards, dashboards — to PNG, by running the real `@ai-gui/vanilla` renderer in a headless Chromium and screenshotting each block.
+Render [AIGUI](../../README.md) markdown blocks — ECharts charts, Mermaid diagrams, KaTeX math, tables, cards, dashboards, 3D scenes, orbits, data walls and molecules — to PNG, by running the real `@ai-gui/vanilla` renderer in a headless Chromium and screenshotting each block.
 
 Use it where a channel carries pictures but not markup: WeChat, email, an image-only webhook.
 
+The 3D families (`scene`, `molecule` in 3D, the big screen's 3D and globe panels) draw with WebGL. Headless Chromium has no GPU, so the browser is launched with SwiftShader — software WebGL — enabled; it is slower than a real GPU, which is why the per-block budget is ten seconds and a canvas is given a moment to paint before the screenshot. Anything animated is drawn at its finished state: the counted number, the grown bar, the bodies at the end of their run.
+
 ## Install
 
 ```sh
@@ -45,7 +47,7 @@ Blocks that fail to render are left in `text` as their original source, so a bro
 ## Options
 
 - `outDir` — where PNGs are written (required).
-- `kinds` — which families to draw. Default: all six.
+- `kinds` — which families to draw. Default: all ten — `chart`, `mermaid`, `dashboard`, `card`, `math`, `table`, `scene`, `gravity`, `bigscreen`, `molecule`.
 - `theme` — `"light"` (default) or `"dark"`.
 - `width` — viewport width in CSS pixels. Default 720.
 - `scale` — device pixels per CSS pixel. Default 2, which is what a phone screen wants.

package/dist/index.cjs

@@ -23,10 +23,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 
 //#endregion
 const __ai_gui_core = __toESM(require("@ai-gui/core"));
+const __ai_gui_plugin_bigscreen = __toESM(require("@ai-gui/plugin-bigscreen"));
 const __ai_gui_plugin_chart = __toESM(require("@ai-gui/plugin-chart"));
 const __ai_gui_plugin_dashboard = __toESM(require("@ai-gui/plugin-dashboard"));
+const __ai_gui_plugin_gravity = __toESM(require("@ai-gui/plugin-gravity"));
 const __ai_gui_plugin_katex = __toESM(require("@ai-gui/plugin-katex"));
 const __ai_gui_plugin_mermaid = __toESM(require("@ai-gui/plugin-mermaid"));
+const __ai_gui_plugin_molecule = __toESM(require("@ai-gui/plugin-molecule"));
+const __ai_gui_plugin_scene = __toESM(require("@ai-gui/plugin-scene"));
 const node_fs_promises = __toESM(require("node:fs/promises"));
 const node_module = __toESM(require("node:module"));
 const node_path = __toESM(require("node:path"));
@@ -40,7 +44,11 @@ const DEFAULT_KINDS = [
 	"dashboard",
 	"card",
 	"math",
-	"table"
+	"table",
+	"scene",
+	"gravity",
+	"bigscreen",
+	"molecule"
 ];
 const DEFAULT_WIDTH = 720;
 const DEFAULT_SCALE = 2;
@@ -54,7 +62,10 @@ const DEFAULT_IDLE_SHUTDOWN_MS = 3e5;
 * The plugins an image render understands.
 *
 * `interactive: false` is not a preference. It makes plugin-chart return an SSR SVG in the same
-* tick rather than mounting a live ECharts instance with animations to wait out.
+* tick rather than mounting a live ECharts instance with animations to wait out. The same goes
+* for `animate: false` on gravity and the big screen: a picture is one moment, and the moment
+* wanted is the finished one — the number counted up, the bar grown, the bodies at the end of
+* their run — not whichever frame the screenshot happened to land on.
 *
 * The chart is sized to the page rather than left at the plugin's 600x400 default, which would
 * otherwise sit in a 720px column with a band of dead space beside it.
@@ -69,7 +80,18 @@ function imagePlugins(width = DEFAULT_WIDTH) {
 		}),
 		(0, __ai_gui_plugin_mermaid.mermaid)(),
 		(0, __ai_gui_plugin_katex.katex)({ css: "" }),
-		(0, __ai_gui_plugin_dashboard.dashboard)()
+		(0, __ai_gui_plugin_dashboard.dashboard)(),
+		(0, __ai_gui_plugin_scene.scene)({ height: Math.round(inner * .6) }),
+		(0, __ai_gui_plugin_gravity.gravity)({
+			animate: false,
+			width: inner,
+			height: Math.round(inner * .625)
+		}),
+		(0, __ai_gui_plugin_bigscreen.bigscreen)({ animate: false }),
+		(0, __ai_gui_plugin_molecule.molecule)({
+			width: inner,
+			height: Math.round(inner * .6)
+		})
 	];
 }
 
@@ -87,7 +109,7 @@ function imagePlugins(width = DEFAULT_WIDTH) {
 * models write tables without leading pipes at least as often as with them, and they escalate a
 * fence to four backticks whenever the payload contains three.
 */
-const TRIGGER = /^ {0,3}(?:(?:`{3,}|~{3,})[ \t]*(?:chart|mermaid|dashboard|card:)|\$\$|\||:?-+:?[ \t]*\|)/m;
+const TRIGGER = /^ {0,3}(?:(?:`{3,}|~{3,})[ \t]*(?:chart|mermaid|dashboard|scene|gravity|bigscreen|molecule|card:)|\$\$|\||:?-+:?[ \t]*\|)/m;
 function hasTrigger(markdown) {
 	return TRIGGER.test(markdown);
 }
@@ -99,8 +121,17 @@ function hasTrigger(markdown) {
 * registering a renderer, and tables are plain markdown-it, so both arrive as generic `html`
 * nodes carrying already-rendered markup. They have to be recognised by what is in that markup.
 */
+const FENCED = new Set([
+	"chart",
+	"mermaid",
+	"dashboard",
+	"scene",
+	"gravity",
+	"bigscreen",
+	"molecule"
+]);
 function classify(node) {
-	if (node.type === "chart" || node.type === "mermaid" || node.type === "dashboard") return node.complete ? node.type : void 0;
+	if (FENCED.has(node.type)) return node.complete ? node.type : void 0;
 	if (node.type === "card") return node.card?.complete && node.card.valid ? "card" : void 0;
 	if (node.type !== "html") return void 0;
 	const html = node.content ?? "";
@@ -156,9 +187,24 @@ var BrowserUnavailableError = class extends Error {
 		this.cause = cause;
 	}
 };
+/**
+* Chromium's flags.
+*
+* The 3D blocks — scenes, molecules, the big screen's bars and globes — draw with WebGL, and a
+* headless browser has no GPU. SwiftShader renders it in software instead; recent Chromium keeps
+* that behind `--enable-unsafe-swiftshader` and needs to be told to use it, or `getContext("webgl")`
+* returns null and every 3D block falls back to its text. Hinting is off so glyphs look the same
+* at every scale factor.
+*/
+const LAUNCH_ARGS = [
+	"--font-render-hinting=none",
+	"--use-angle=swiftshader",
+	"--enable-unsafe-swiftshader",
+	"--ignore-gpu-blocklist"
+];
 const defaultLauncher = async () => {
 	const playwright = await import("playwright");
-	return await playwright.chromium.launch({ args: ["--font-render-hinting=none"] });
+	return await playwright.chromium.launch({ args: LAUNCH_ARGS });
 };
 let browser;
 let launching;
@@ -279,6 +325,10 @@ const THEMES = {
 * plugin animate on entry, and an animating element is a coin flip between a finished picture and
 * a half-faded one. The font stack names CJK families explicitly: a screenshot has no fallback
 * chain to fall back to at read time, so a missing face is permanent tofu in the delivered image.
+*
+* The molecule plugin leaves its stylesheet to the host, so it is included here, and its Reset
+* button — a control for a reader who can turn the molecule — is hidden from a picture nobody can
+* turn.
 */
 function pageHtml(options = {}) {
 	const theme = THEMES[options.theme ?? "light"];
@@ -288,9 +338,11 @@ function pageHtml(options = {}) {
 *,*::before,*::after{animation:none!important;transition:none!important}
 html,body{margin:0;padding:0;background:${theme.bg};color:${theme.fg}}
 body{font-family:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC",system-ui,sans-serif;font-size:16px;line-height:1.6}
-#root{display:inline-block;padding:16px;box-sizing:border-box;max-width:${options.width ?? 720}px}
+#root{display:inline-block;padding:16px;box-sizing:border-box;width:${options.width ?? 720}px;max-width:${options.width ?? 720}px}
 ${__ai_gui_core.baseCss}
 ${katexCss()}
+${__ai_gui_plugin_molecule.moleculeCss}
+[data-aigui-molecule-reset]{display:none}
 ${pluginCss}
 </style></head><body><div id="root"></div></body></html>`;
 }

package/dist/index.d.cts

@@ -1,9 +1,19 @@
 import { CardRegistry } from "@ai-gui/core";
 
 //#region src/types.d.ts
-/** A block family that can be turned into a picture. */
-/** A block family that can be turned into a picture. */
-type RenderableKind = "chart" | "mermaid" | "dashboard" | "card" | "math" | "table";
+/**
+* A block family that can be turned into a picture.
+*
+* The first six are flat. `scene`, `molecule` and `bigscreen` draw on WebGL, which headless
+* Chromium provides in software; `gravity` is SVG with the animation switched off.
+*/
+/**
+ * A block family that can be turned into a picture.
+ *
+ * The first six are flat. `scene`, `molecule` and `bigscreen` draw on WebGL, which headless
+ * Chromium provides in software; `gravity` is SVG with the animation switched off.
+ */
+type RenderableKind = "chart" | "mermaid" | "dashboard" | "card" | "math" | "table" | "scene" | "gravity" | "bigscreen" | "molecule";
 /** One block chosen for rendering, with the source range it occupies. */
 interface BlockSelection {
   kind: RenderableKind;

package/dist/index.d.ts

@@ -1,9 +1,19 @@
 import { CardRegistry } from "@ai-gui/core";
 
 //#region src/types.d.ts
-/** A block family that can be turned into a picture. */
-/** A block family that can be turned into a picture. */
-type RenderableKind = "chart" | "mermaid" | "dashboard" | "card" | "math" | "table";
+/**
+* A block family that can be turned into a picture.
+*
+* The first six are flat. `scene`, `molecule` and `bigscreen` draw on WebGL, which headless
+* Chromium provides in software; `gravity` is SVG with the animation switched off.
+*/
+/**
+ * A block family that can be turned into a picture.
+ *
+ * The first six are flat. `scene`, `molecule` and `bigscreen` draw on WebGL, which headless
+ * Chromium provides in software; `gravity` is SVG with the animation switched off.
+ */
+type RenderableKind = "chart" | "mermaid" | "dashboard" | "card" | "math" | "table" | "scene" | "gravity" | "bigscreen" | "molecule";
 /** One block chosen for rendering, with the source range it occupies. */
 interface BlockSelection {
   kind: RenderableKind;

package/dist/index.js

@@ -1,8 +1,12 @@
 import { baseCss, collectPluginStyles, createParserWithMetadata } from "@ai-gui/core";
+import { bigscreen } from "@ai-gui/plugin-bigscreen";
 import { chart } from "@ai-gui/plugin-chart";
 import { dashboard } from "@ai-gui/plugin-dashboard";
+import { gravity } from "@ai-gui/plugin-gravity";
 import { katex } from "@ai-gui/plugin-katex";
 import { mermaid } from "@ai-gui/plugin-mermaid";
+import { molecule, moleculeCss } from "@ai-gui/plugin-molecule";
+import { scene } from "@ai-gui/plugin-scene";
 import { mkdir } from "node:fs/promises";
 import { createRequire } from "node:module";
 import { dirname, join } from "node:path";
@@ -16,7 +20,11 @@ const DEFAULT_KINDS = [
 	"dashboard",
 	"card",
 	"math",
-	"table"
+	"table",
+	"scene",
+	"gravity",
+	"bigscreen",
+	"molecule"
 ];
 const DEFAULT_WIDTH = 720;
 const DEFAULT_SCALE = 2;
@@ -30,7 +38,10 @@ const DEFAULT_IDLE_SHUTDOWN_MS = 3e5;
 * The plugins an image render understands.
 *
 * `interactive: false` is not a preference. It makes plugin-chart return an SSR SVG in the same
-* tick rather than mounting a live ECharts instance with animations to wait out.
+* tick rather than mounting a live ECharts instance with animations to wait out. The same goes
+* for `animate: false` on gravity and the big screen: a picture is one moment, and the moment
+* wanted is the finished one — the number counted up, the bar grown, the bodies at the end of
+* their run — not whichever frame the screenshot happened to land on.
 *
 * The chart is sized to the page rather than left at the plugin's 600x400 default, which would
 * otherwise sit in a 720px column with a band of dead space beside it.
@@ -45,7 +56,18 @@ function imagePlugins(width = DEFAULT_WIDTH) {
 		}),
 		mermaid(),
 		katex({ css: "" }),
-		dashboard()
+		dashboard(),
+		scene({ height: Math.round(inner * .6) }),
+		gravity({
+			animate: false,
+			width: inner,
+			height: Math.round(inner * .625)
+		}),
+		bigscreen({ animate: false }),
+		molecule({
+			width: inner,
+			height: Math.round(inner * .6)
+		})
 	];
 }
 
@@ -63,7 +85,7 @@ function imagePlugins(width = DEFAULT_WIDTH) {
 * models write tables without leading pipes at least as often as with them, and they escalate a
 * fence to four backticks whenever the payload contains three.
 */
-const TRIGGER = /^ {0,3}(?:(?:`{3,}|~{3,})[ \t]*(?:chart|mermaid|dashboard|card:)|\$\$|\||:?-+:?[ \t]*\|)/m;
+const TRIGGER = /^ {0,3}(?:(?:`{3,}|~{3,})[ \t]*(?:chart|mermaid|dashboard|scene|gravity|bigscreen|molecule|card:)|\$\$|\||:?-+:?[ \t]*\|)/m;
 function hasTrigger(markdown) {
 	return TRIGGER.test(markdown);
 }
@@ -75,8 +97,17 @@ function hasTrigger(markdown) {
 * registering a renderer, and tables are plain markdown-it, so both arrive as generic `html`
 * nodes carrying already-rendered markup. They have to be recognised by what is in that markup.
 */
+const FENCED = new Set([
+	"chart",
+	"mermaid",
+	"dashboard",
+	"scene",
+	"gravity",
+	"bigscreen",
+	"molecule"
+]);
 function classify(node) {
-	if (node.type === "chart" || node.type === "mermaid" || node.type === "dashboard") return node.complete ? node.type : void 0;
+	if (FENCED.has(node.type)) return node.complete ? node.type : void 0;
 	if (node.type === "card") return node.card?.complete && node.card.valid ? "card" : void 0;
 	if (node.type !== "html") return void 0;
 	const html = node.content ?? "";
@@ -132,9 +163,24 @@ var BrowserUnavailableError = class extends Error {
 		this.cause = cause;
 	}
 };
+/**
+* Chromium's flags.
+*
+* The 3D blocks — scenes, molecules, the big screen's bars and globes — draw with WebGL, and a
+* headless browser has no GPU. SwiftShader renders it in software instead; recent Chromium keeps
+* that behind `--enable-unsafe-swiftshader` and needs to be told to use it, or `getContext("webgl")`
+* returns null and every 3D block falls back to its text. Hinting is off so glyphs look the same
+* at every scale factor.
+*/
+const LAUNCH_ARGS = [
+	"--font-render-hinting=none",
+	"--use-angle=swiftshader",
+	"--enable-unsafe-swiftshader",
+	"--ignore-gpu-blocklist"
+];
 const defaultLauncher = async () => {
 	const playwright = await import("playwright");
-	return await playwright.chromium.launch({ args: ["--font-render-hinting=none"] });
+	return await playwright.chromium.launch({ args: LAUNCH_ARGS });
 };
 let browser;
 let launching;
@@ -255,6 +301,10 @@ const THEMES = {
 * plugin animate on entry, and an animating element is a coin flip between a finished picture and
 * a half-faded one. The font stack names CJK families explicitly: a screenshot has no fallback
 * chain to fall back to at read time, so a missing face is permanent tofu in the delivered image.
+*
+* The molecule plugin leaves its stylesheet to the host, so it is included here, and its Reset
+* button — a control for a reader who can turn the molecule — is hidden from a picture nobody can
+* turn.
 */
 function pageHtml(options = {}) {
 	const theme = THEMES[options.theme ?? "light"];
@@ -264,9 +314,11 @@ function pageHtml(options = {}) {
 *,*::before,*::after{animation:none!important;transition:none!important}
 html,body{margin:0;padding:0;background:${theme.bg};color:${theme.fg}}
 body{font-family:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC",system-ui,sans-serif;font-size:16px;line-height:1.6}
-#root{display:inline-block;padding:16px;box-sizing:border-box;max-width:${options.width ?? 720}px}
+#root{display:inline-block;padding:16px;box-sizing:border-box;width:${options.width ?? 720}px;max-width:${options.width ?? 720}px}
 ${baseCss}
 ${katexCss()}
+${moleculeCss}
+[data-aigui-molecule-reset]{display:none}
 ${pluginCss}
 </style></head><body><div id="root"></div></body></html>`;
 }