@unovis/mcp 1.7.0-mcp.0

package/dist/render/spec.js

@@ -0,0 +1,15 @@
+/** ChartSpec — a JSON-serializable intermediate representation of a chart.
+ *
+ * Tool inputs are converted to a ChartSpec (recipes), which the renderer
+ * materializes into live Unovis containers/components. Keeping the IR
+ * serializable enables the `config` output mode and, later, framework code
+ * generation. Accessors are descriptors referencing data fields by name —
+ * user input is never evaluated as code.
+ */
+export const isAccessorRef = (value) => {
+    if (typeof value !== 'object' || value === null || Array.isArray(value))
+        return false;
+    const keys = Object.keys(value);
+    return keys.some(k => ['$field', '$index', '$const', '$dateTickFormat', '$numTickFormat', '$lookup', '$format', '$mapField'].includes(k));
+};
+//# sourceMappingURL=spec.js.map

package/dist/render/spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../src/render/spec.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAuBH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAc,EAAwB,EAAE;IACpE,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAA;IACrF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC/B,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;AAC3I,CAAC,CAAA"}

package/dist/server.d.ts

@@ -0,0 +1,4 @@
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import type { ToolFilterOptions } from './tools/register.js';
+export declare function getPackageVersion(): string;
+export declare function buildServer(options?: ToolFilterOptions): McpServer;

package/dist/server.js

@@ -0,0 +1,44 @@
+import { readFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { registerTools, WIDGET_URI } from './tools/register.js';
+import { buildEmbedDocument } from './html/document.js';
+export function getPackageVersion() {
+    try {
+        const pkgPath = join(dirname(fileURLToPath(import.meta.url)), '..', 'package.json');
+        return JSON.parse(readFileSync(pkgPath, 'utf8')).version ?? '0.0.0';
+    }
+    catch {
+        return '0.0.0';
+    }
+}
+export function buildServer(options = {}) {
+    const server = new McpServer({
+        name: 'unovis',
+        version: getPackageVersion(),
+    });
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    registerWidgetResource(server);
+    registerTools(server, options);
+    return server;
+}
+/** The interactive chart widget, served as an MCP UI resource.
+ *
+ * Clients that support embedded UI resources fetch this once and drive it with
+ * the spec from a tool call's structuredContent; the same document works as a
+ * plain iframe (see the embed protocol in src/widget/entry.ts). */
+function registerWidgetResource(server) {
+    server.registerResource('chart-widget', WIDGET_URI, {
+        title: 'Unovis chart widget',
+        description: 'Interactive chart renderer. Send it a chart spec to render.',
+        mimeType: 'text/html+skybridge',
+    }, async () => ({
+        contents: [{
+                uri: WIDGET_URI,
+                mimeType: 'text/html+skybridge',
+                text: buildEmbedDocument(),
+            }],
+    }));
+}
+//# sourceMappingURL=server.js.map

package/dist/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAA;AAEnE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAE/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAEvD,MAAM,UAAU,iBAAiB;IAC/B,IAAI,CAAC;QACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAA;QACnF,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,OAAO,CAAA;IACrE,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,OAAO,CAAA;IAChB,CAAC;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAE,UAA6B,EAAE;IAC1D,MAAM,MAAM,GAAG,IAAI,SAAS,CAAC;QAC3B,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE,iBAAiB,EAAE;KAC7B,CAAC,CAAA;IACF,mEAAmE;IACnE,sBAAsB,CAAC,MAAM,CAAC,CAAA;IAC9B,aAAa,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,OAAO,MAAM,CAAA;AACf,CAAC;AAED;;;;mEAImE;AACnE,SAAS,sBAAsB,CAAE,MAAiB;IAChD,MAAM,CAAC,gBAAgB,CACrB,cAAc,EACd,UAAU,EACV;QACE,KAAK,EAAE,qBAAqB;QAC5B,WAAW,EAAE,6DAA6D;QAC1E,QAAQ,EAAE,qBAAqB;KAChC,EACD,KAAK,IAAI,EAAE,CAAC,CAAC;QACX,QAAQ,EAAE,CAAC;gBACT,GAAG,EAAE,UAAU;gBACf,QAAQ,EAAE,qBAAqB;gBAC/B,IAAI,EAAE,kBAAkB,EAAE;aAC3B,CAAC;KACH,CAAC,CACH,CAAA;AACH,CAAC"}

package/dist/svg/collect-css.d.ts

@@ -0,0 +1,14 @@
+/** Harvest CSS rules from emotion's injected <style> tags.
+ *
+ * Emotion may run in "speedy" mode where rules are inserted through the
+ * CSSOM (`sheet.insertRule`) and the <style> tags have empty text content —
+ * so rules are read from `sheet.cssRules` first, falling back to textContent.
+ */
+export interface CollectedRule {
+    selector: string;
+    /** Declaration block text (without braces) */
+    block: string;
+    /** Full rule text */
+    cssText: string;
+}
+export declare function collectCssRules(document: Document): CollectedRule[];

package/dist/svg/collect-css.js

@@ -0,0 +1,53 @@
+/** Harvest CSS rules from emotion's injected <style> tags.
+ *
+ * Emotion may run in "speedy" mode where rules are inserted through the
+ * CSSOM (`sheet.insertRule`) and the <style> tags have empty text content —
+ * so rules are read from `sheet.cssRules` first, falling back to textContent.
+ */
+export function collectCssRules(document) {
+    const rules = [];
+    for (const styleEl of Array.from(document.querySelectorAll('style'))) {
+        const sheet = styleEl.sheet;
+        if (sheet) {
+            let cssRules;
+            try {
+                cssRules = sheet.cssRules;
+            }
+            catch { /* cross-origin or detached sheets */ }
+            if (cssRules && cssRules.length) {
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                for (const rule of Array.from(cssRules))
+                    collectRule(rule, rules);
+                continue;
+            }
+        }
+        const text = styleEl.textContent;
+        if (text) {
+            for (const match of text.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+                rules.push({ selector: match[1].trim(), block: match[2].trim(), cssText: match[0] });
+            }
+        }
+    }
+    return rules;
+}
+function collectRule(rule, out) {
+    // CSSStyleRule
+    const styleRule = rule;
+    if (styleRule.selectorText !== undefined) {
+        const cssText = rule.cssText || '';
+        const blockMatch = /\{([\s\S]*)\}/.exec(cssText);
+        out.push({
+            selector: styleRule.selectorText,
+            block: blockMatch ? blockMatch[1].trim() : '',
+            cssText,
+        });
+        return;
+    }
+    // Grouping rules (@media, @supports) — recurse
+    const grouping = rule;
+    if (grouping.cssRules) {
+        for (const child of Array.from(grouping.cssRules))
+            collectRule(child, out);
+    }
+}
+//# sourceMappingURL=collect-css.js.map

package/dist/svg/collect-css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collect-css.js","sourceRoot":"","sources":["../../src/svg/collect-css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH,MAAM,UAAU,eAAe,CAAE,QAAkB;IACjD,MAAM,KAAK,GAAoB,EAAE,CAAA;IAEjC,KAAK,MAAM,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC;QACrE,MAAM,KAAK,GAAI,OAA4B,CAAC,KAAK,CAAA;QACjD,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,QAAiC,CAAA;YACrC,IAAI,CAAC;gBACH,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAA;YAC3B,CAAC;YAAC,MAAM,CAAC,CAAC,qCAAqC,CAAC,CAAC;YACjD,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;gBAChC,mEAAmE;gBACnE,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;oBAAE,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;gBACjE,SAAQ;YACV,CAAC;QACH,CAAC;QACD,MAAM,IAAI,GAAG,OAAO,CAAC,WAAW,CAAA;QAChC,IAAI,IAAI,EAAE,CAAC;YACT,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,uBAAuB,CAAC,EAAE,CAAC;gBAC3D,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;YACtF,CAAC;QACH,CAAC;IACH,CAAC;IACD,OAAO,KAAK,CAAA;AACd,CAAC;AAED,SAAS,WAAW,CAAE,IAAa,EAAE,GAAoB;IACvD,eAAe;IACf,MAAM,SAAS,GAAG,IAAoB,CAAA;IACtC,IAAI,SAAS,CAAC,YAAY,KAAK,SAAS,EAAE,CAAC;QACzC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAClC,MAAM,UAAU,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAChD,GAAG,CAAC,IAAI,CAAC;YACP,QAAQ,EAAE,SAAS,CAAC,YAAY;YAChC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;YAC7C,OAAO;SACR,CAAC,CAAA;QACF,OAAM;IACR,CAAC;IACD,+CAA+C;IAC/C,MAAM,QAAQ,GAAG,IAAuB,CAAA;IACxC,IAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC;QACtB,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,WAAW,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAC5E,CAAC;AACH,CAAC"}

package/dist/svg/css-vars.d.ts

@@ -0,0 +1,17 @@
+/** CSS custom-property baking for standalone SVG output.
+ *
+ * The rendered DOM references theme values as `var(--vis-*)` (in inline
+ * styles and presentation attributes). Standalone SVG viewers — and PNG
+ * rasterizers — can't be relied on to support custom properties, so every
+ * `var()` reference is resolved to a literal value.
+ */
+import type { VarMaps } from '../env/computed-style.js';
+export interface VarContext {
+    maps: VarMaps;
+    theme: 'light' | 'dark';
+    /** Highest-priority overrides (e.g. a custom palette) */
+    overrides?: Map<string, string>;
+}
+export declare function lookupVar(name: string, el: Element | null, ctx: VarContext): string | undefined;
+export declare function substituteVarsForElement(value: string, el: Element | null, ctx: VarContext, depth?: number): string;
+export declare function bakeCssVars(svg: SVGSVGElement, ctx: VarContext): void;

package/dist/svg/css-vars.js

@@ -0,0 +1,64 @@
+const VAR_PATTERN = /var\(\s*(--[\w-]+)\s*(?:,\s*([^()]*(?:\([^()]*\)[^()]*)*))?\)/;
+export function lookupVar(name, el, ctx) {
+    // Inline definitions on the element chain win (matches browser behavior)
+    let node = el;
+    while (node) {
+        const inline = node.style?.getPropertyValue(name);
+        if (inline)
+            return inline;
+        node = node.parentElement;
+    }
+    if (ctx.overrides?.has(name))
+        return ctx.overrides.get(name);
+    if (ctx.theme === 'dark' && ctx.maps.dark.has(name))
+        return ctx.maps.dark.get(name);
+    return ctx.maps.light.get(name);
+}
+export function substituteVarsForElement(value, el, ctx, depth = 0) {
+    if (depth > 10)
+        return value;
+    let result = value;
+    let match;
+    while ((match = VAR_PATTERN.exec(result))) {
+        const [full, name, fallback] = match;
+        const resolvedRaw = lookupVar(name, el, ctx);
+        const replacement = resolvedRaw !== undefined
+            ? substituteVarsForElement(resolvedRaw, el, ctx, depth + 1)
+            : (fallback !== undefined ? substituteVarsForElement(fallback.trim(), el, ctx, depth + 1) : '');
+        result = result.slice(0, match.index) + replacement + result.slice(match.index + full.length);
+    }
+    return result;
+}
+/** Attributes that commonly carry var() references or url() functions */
+const PAINT_ATTRS = ['fill', 'stroke', 'color', 'stop-color', 'marker', 'marker-start', 'marker-mid', 'marker-end', 'mask', 'filter', 'stroke-dasharray', 'flood-color'];
+export function bakeCssVars(svg, ctx) {
+    const elements = [svg, ...Array.from(svg.querySelectorAll('*'))];
+    for (const el of elements) {
+        const style = el.style;
+        if (style && style.length !== undefined) {
+            const props = Array.from({ length: style.length }, (_, i) => style.item(i));
+            for (const prop of props) {
+                const value = style.getPropertyValue(prop);
+                if (!value)
+                    continue;
+                if (prop.startsWith('--'))
+                    continue; // custom-prop definitions are dropped below
+                if (value.includes('var(')) {
+                    style.setProperty(prop, substituteVarsForElement(value, el, ctx), style.getPropertyPriority(prop));
+                }
+            }
+            // Drop custom-property definitions after all references were resolved
+            for (const prop of props) {
+                if (prop.startsWith('--'))
+                    style.removeProperty(prop);
+            }
+        }
+        for (const attr of PAINT_ATTRS) {
+            const value = el.getAttribute(attr);
+            if (value && value.includes('var(')) {
+                el.setAttribute(attr, substituteVarsForElement(value, el, ctx));
+            }
+        }
+    }
+}
+//# sourceMappingURL=css-vars.js.map

package/dist/svg/css-vars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-vars.js","sourceRoot":"","sources":["../../src/svg/css-vars.ts"],"names":[],"mappings":"AAgBA,MAAM,WAAW,GAAG,+DAA+D,CAAA;AAEnF,MAAM,UAAU,SAAS,CAAE,IAAY,EAAE,EAAkB,EAAE,GAAe;IAC1E,yEAAyE;IACzE,IAAI,IAAI,GAAmB,EAAE,CAAA;IAC7B,OAAO,IAAI,EAAE,CAAC;QACZ,MAAM,MAAM,GAAI,IAAiC,CAAC,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAA;QAC/E,IAAI,MAAM;YAAE,OAAO,MAAM,CAAA;QACzB,IAAI,GAAG,IAAI,CAAC,aAAa,CAAA;IAC3B,CAAC;IACD,IAAI,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC;QAAE,OAAO,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;IAC5D,IAAI,GAAG,CAAC,KAAK,KAAK,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;QAAE,OAAO,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;IACnF,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;AACjC,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAE,KAAa,EAAE,EAAkB,EAAE,GAAe,EAAE,KAAK,GAAG,CAAC;IACrG,IAAI,KAAK,GAAG,EAAE;QAAE,OAAO,KAAK,CAAA;IAC5B,IAAI,MAAM,GAAG,KAAK,CAAA;IAClB,IAAI,KAA6B,CAAA;IACjC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;QAC1C,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAA;QACpC,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,CAAA;QAC5C,MAAM,WAAW,GAAG,WAAW,KAAK,SAAS;YAC3C,CAAC,CAAC,wBAAwB,CAAC,WAAW,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAC;YAC3D,CAAC,CAAC,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,wBAAwB,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;QACjG,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,CAAA;IAC/F,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC;AAED,yEAAyE;AACzE,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,kBAAkB,EAAE,aAAa,CAAC,CAAA;AAExK,MAAM,UAAU,WAAW,CAAE,GAAkB,EAAE,GAAe;IAC9D,MAAM,QAAQ,GAAG,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;IAChE,KAAK,MAAM,EAAE,IAAI,QAAQ,EAAE,CAAC;QAC1B,MAAM,KAAK,GAAI,EAAiB,CAAC,KAAK,CAAA;QACtC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;YACxC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA;YAC3E,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;gBACzB,MAAM,KAAK,GAAG,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAA;gBAC1C,IAAI,CAAC,KAAK;oBAAE,SAAQ;gBACpB,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;oBAAE,SAAQ,CAAC,4CAA4C;gBAChF,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;oBAC3B,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,wBAAwB,CAAC,KAAK,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAA;gBACpG,CAAC;YACH,CAAC;YACD,sEAAsE;YACtE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;gBACzB,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;oBAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;YACvD,CAAC;QACH,CAAC;QACD,KAAK,MAAM,IAAI,IAAI,WAAW,EAAE,CAAC;YAC/B,MAAM,KAAK,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;YACnC,IAAI,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBACpC,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,wBAAwB,CAAC,KAAK,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,CAAA;YACjE,CAAC;QACH,CAAC;IACH,CAAC;AACH,CAAC"}

package/dist/svg/header.d.ts

@@ -0,0 +1,8 @@
+import type { VarContext } from './css-vars.js';
+import type { LegendItemSpec } from '../render/spec.js';
+export interface HeaderSpec {
+    title?: string;
+    legend?: LegendItemSpec[];
+    fontFamily: string;
+}
+export declare function renderHeader(svg: SVGSVGElement, document: Document, header: HeaderSpec, ctx: VarContext, width: number): number;

package/dist/svg/header.js

@@ -0,0 +1,81 @@
+/** Title and legend synthesis.
+ *
+ * Unovis containers have no title concept, and its legends (BulletLegend) are
+ * HTML components rendered outside the SVG — neither can appear in standalone
+ * SVG output. Both are synthesized here: the chart content is wrapped in a
+ * translated group and a header block (title + swatch legend) is drawn above.
+ */
+import { measureTextWidth } from '../env/canvas.js';
+import { substituteVarsForElement } from './css-vars.js';
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const TITLE_FONT_SIZE = 16;
+const TITLE_ROW_HEIGHT = 28;
+const LEGEND_FONT_SIZE = 12;
+const LEGEND_ROW_HEIGHT = 22;
+const LEGEND_SWATCH = 10;
+const LEGEND_GAP = 16;
+const PADDING_X = 16;
+const PADDING_TOP = 12;
+const PADDING_BOTTOM = 4;
+export function renderHeader(svg, document, header, ctx, width) {
+    if (!header.title && !header.legend?.length)
+        return 0;
+    const dark = ctx.theme === 'dark';
+    const titleColor = dark ? '#f2f4f9' : '#1f2937';
+    const labelColor = dark ? '#c8ced9' : '#4b5563';
+    const font = (size) => `${size}px ${header.fontFamily}`;
+    // Lay out legend items with wrapping
+    const items = [];
+    let legendRows = 0;
+    if (header.legend?.length) {
+        let x = PADDING_X;
+        let row = 0;
+        for (const item of header.legend) {
+            const color = item.color ?? substituteVarsForElement(`var(--vis-color${(item.paletteIndex ?? 0) % 6})`, null, ctx);
+            const labelWidth = measureTextWidth(item.name, font(LEGEND_FONT_SIZE));
+            const itemWidth = LEGEND_SWATCH + 6 + labelWidth;
+            if (x + itemWidth > width - PADDING_X && x > PADDING_X) {
+                row += 1;
+                x = PADDING_X;
+            }
+            items.push({ name: item.name, color, x, row, labelWidth });
+            x += itemWidth + LEGEND_GAP;
+        }
+        legendRows = row + 1;
+    }
+    const headerHeight = PADDING_TOP + (header.title ? TITLE_ROW_HEIGHT : 0) + legendRows * LEGEND_ROW_HEIGHT + PADDING_BOTTOM;
+    // The caller wraps the chart content and offsets it below the header
+    const headerGroup = document.createElementNS(SVG_NS, 'g');
+    svg.insertBefore(headerGroup, svg.firstChild);
+    if (header.title) {
+        const titleEl = document.createElementNS(SVG_NS, 'text');
+        titleEl.setAttribute('x', String(PADDING_X));
+        titleEl.setAttribute('y', String(PADDING_TOP + TITLE_FONT_SIZE));
+        titleEl.setAttribute('font-size', String(TITLE_FONT_SIZE));
+        titleEl.setAttribute('font-weight', '600');
+        titleEl.setAttribute('fill', titleColor);
+        titleEl.textContent = header.title;
+        headerGroup.appendChild(titleEl);
+    }
+    const legendOffsetY = PADDING_TOP + (header.title ? TITLE_ROW_HEIGHT : 0);
+    for (const item of items) {
+        const y = legendOffsetY + item.row * LEGEND_ROW_HEIGHT + (LEGEND_ROW_HEIGHT - LEGEND_SWATCH) / 2;
+        const swatch = document.createElementNS(SVG_NS, 'rect');
+        swatch.setAttribute('x', String(item.x));
+        swatch.setAttribute('y', String(y));
+        swatch.setAttribute('width', String(LEGEND_SWATCH));
+        swatch.setAttribute('height', String(LEGEND_SWATCH));
+        swatch.setAttribute('rx', '2');
+        swatch.setAttribute('fill', item.color);
+        headerGroup.appendChild(swatch);
+        const label = document.createElementNS(SVG_NS, 'text');
+        label.setAttribute('x', String(item.x + LEGEND_SWATCH + 6));
+        label.setAttribute('y', String(y + LEGEND_SWATCH - 1));
+        label.setAttribute('font-size', String(LEGEND_FONT_SIZE));
+        label.setAttribute('fill', labelColor);
+        label.textContent = item.name;
+        headerGroup.appendChild(label);
+    }
+    return headerHeight;
+}
+//# sourceMappingURL=header.js.map

package/dist/svg/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/svg/header.ts"],"names":[],"mappings":"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"}

package/dist/svg/ids.d.ts

@@ -0,0 +1,12 @@
+/** Id rewriting and url() reference normalization.
+ *
+ * Rendered charts contain random `guid()` ids (clip paths, filters) and
+ * absolute references like `url(http://localhost/#saturate)` (built from
+ * `window.location.href` in the XYContainer constructor). For standalone,
+ * embeddable SVG we rewrite ids with a deterministic prefix and strip the
+ * base URL from all references.
+ */
+/** Copy referenced defs living outside the chart SVG (e.g. globally injected
+ * pattern defs) into the chart's own defs so the output is self-contained. */
+export declare function importExternalDefs(svg: SVGSVGElement, document: Document): void;
+export declare function rewriteIds(svg: SVGSVGElement, prefix: string): void;

package/dist/svg/ids.js

@@ -0,0 +1,94 @@
+/** Id rewriting and url() reference normalization.
+ *
+ * Rendered charts contain random `guid()` ids (clip paths, filters) and
+ * absolute references like `url(http://localhost/#saturate)` (built from
+ * `window.location.href` in the XYContainer constructor). For standalone,
+ * embeddable SVG we rewrite ids with a deterministic prefix and strip the
+ * base URL from all references.
+ */
+const URL_REF = /url\(["']?([^"')]+)["']?\)/g;
+const extractRefId = (raw) => {
+    const hashIndex = raw.indexOf('#');
+    if (hashIndex === -1)
+        return undefined;
+    return raw.slice(hashIndex + 1);
+};
+/** Copy referenced defs living outside the chart SVG (e.g. globally injected
+ * pattern defs) into the chart's own defs so the output is self-contained. */
+export function importExternalDefs(svg, document) {
+    const referencedIds = new Set();
+    for (const el of [svg, ...Array.from(svg.querySelectorAll('*'))]) {
+        for (const attr of Array.from(el.attributes)) {
+            for (const match of attr.value.matchAll(URL_REF)) {
+                const id = extractRefId(match[1]);
+                if (id)
+                    referencedIds.add(id);
+            }
+        }
+        const href = el.getAttribute('href') ?? el.getAttribute('xlink:href');
+        if (href?.startsWith('#'))
+            referencedIds.add(href.slice(1));
+    }
+    for (const id of referencedIds) {
+        if (svg.querySelector(`[id="${id}"]`))
+            continue;
+        const external = document.getElementById(id);
+        if (!external)
+            continue;
+        let defs = svg.querySelector(':scope > defs');
+        if (!defs) {
+            defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+            svg.prepend(defs);
+        }
+        defs.appendChild(external.cloneNode(true));
+    }
+}
+export function rewriteIds(svg, prefix) {
+    const idMap = new Map();
+    let counter = 0;
+    for (const el of Array.from(svg.querySelectorAll('[id]'))) {
+        const oldId = el.getAttribute('id');
+        const newId = `${prefix}${counter++}`;
+        idMap.set(oldId, newId);
+        el.setAttribute('id', newId);
+    }
+    const rewriteValue = (value) => {
+        let result = value.replace(URL_REF, (_match, ref) => {
+            const id = extractRefId(ref);
+            if (id === undefined)
+                return `url(${ref})`; // external URL without fragment — drop quotes consistently
+            const mapped = idMap.get(id) ?? id;
+            return `url(#${mapped})`;
+        });
+        if (result.startsWith('#')) {
+            const mapped = idMap.get(result.slice(1));
+            if (mapped)
+                result = `#${mapped}`;
+        }
+        return result;
+    };
+    for (const el of [svg, ...Array.from(svg.querySelectorAll('*'))]) {
+        for (const attr of Array.from(el.attributes)) {
+            if (attr.name === 'id')
+                continue;
+            if (attr.value.includes('url(') || attr.value.startsWith('#')) {
+                const rewritten = rewriteValue(attr.value);
+                if (rewritten !== attr.value)
+                    el.setAttribute(attr.name, rewritten);
+            }
+        }
+        const style = el.style;
+        if (style && style.length) {
+            for (let i = 0; i < style.length; i++) {
+                const prop = style.item(i);
+                const value = style.getPropertyValue(prop);
+                if (value.includes('url(')) {
+                    const rewritten = rewriteValue(value);
+                    if (rewritten !== value)
+                        style.setProperty(prop, rewritten);
+                }
+            }
+        }
+    }
+}
+//# sourceMappingURL=ids.js.map

package/dist/svg/ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ids.js","sourceRoot":"","sources":["../../src/svg/ids.ts"],"names":[],"mappings":"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"}

package/dist/svg/postprocess.d.ts

@@ -0,0 +1,41 @@
+import type { LegendItemSpec } from '../render/spec.js';
+import type { VarMaps } from '../env/computed-style.js';
+/** What the output frame needs to know about a chart — deliberately not a
+ * ChartSpec, so the SVG layer stays independent of the spec format. */
+export interface SvgFrame {
+    width: number;
+    height: number;
+    theme?: 'light' | 'dark';
+    /** Rendered as a heading above the chart */
+    title?: string;
+    /** Rendered as swatch + label rows under the title */
+    legend?: LegendItemSpec[];
+    /** Palette overriding --vis-colorN */
+    colors?: string[];
+}
+export interface FinalizeContext {
+    document: Document;
+    frame: SvgFrame;
+    varMaps: VarMaps;
+    /** Deterministic id prefix (tests); random per render by default */
+    idPrefix?: string;
+    /** Keep emotion class attributes and skip style inlining (debug) */
+    keepClasses?: boolean;
+    /** Frame padding; defaults to CHART_PADDING */
+    padding?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}
+/** Frame around the chart so content never touches the image edges.
+ * The requested width/height are the final image size — the renderer draws
+ * the chart at the inner size and the content is offset here. */
+export declare const CHART_PADDING: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare function finalizeSvg(svg: SVGSVGElement, ctx: FinalizeContext): string;

package/dist/svg/postprocess.js

@@ -0,0 +1,135 @@
+/** Turn a rendered chart's live SVG element into a standalone SVG string.
+ *
+ * The rendered DOM depends on the page context: emotion classes reference
+ * stylesheet rules, colors are `var(--vis-*)` references, url(#) refs may be
+ * absolute, ids are random guids. This pipeline makes the SVG self-contained:
+ *
+ *  1. import externally-injected defs that the chart references
+ *  2. inline matched stylesheet declarations as inline styles (classes are
+ *     dropped afterwards — survives sanitizers, <img> embedding, rasterizers)
+ *  3. bake every var() reference into a literal value (theme-aware)
+ *  4. synthesize the title/legend header
+ *  5. rewrite ids with a deterministic prefix and normalize url() refs
+ *  6. root hygiene: dimensions, viewBox, role, font-family, cleanup
+ */
+import { collectCssRules } from './collect-css.js';
+import { bakeCssVars, substituteVarsForElement } from './css-vars.js';
+import { importExternalDefs, rewriteIds } from './ids.js';
+import { renderHeader } from './header.js';
+const PSEUDO_SELECTOR = /:(hover|focus|active|visited|checked|disabled)|::/;
+/** Frame around the chart so content never touches the image edges.
+ * The requested width/height are the final image size — the renderer draws
+ * the chart at the inner size and the content is offset here. */
+export const CHART_PADDING = { top: 12, right: 16, bottom: 16, left: 16 };
+export function finalizeSvg(svg, ctx) {
+    const { document, frame } = ctx;
+    const spec = frame;
+    const padding = ctx.padding ?? CHART_PADDING;
+    const overrides = new Map();
+    spec.colors?.forEach((color, i) => {
+        overrides.set(`--vis-color${i}`, color);
+        overrides.set(`--vis-dark-color${i}`, color);
+    });
+    const varCtx = { maps: ctx.varMaps, theme: spec.theme ?? 'light', overrides };
+    importExternalDefs(svg, document);
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    if (!ctx.keepClasses)
+        inlineStyles(svg, document, varCtx);
+    bakeCssVars(svg, varCtx);
+    const fontFamily = substituteVarsForElement('var(--vis-font-family)', null, varCtx) ||
+        'Inter, Arial, "Helvetica Neue", Helvetica, sans-serif';
+    // Frame the chart: wrap the rendered content and offset it by the padding
+    // (and below the synthesized header). width/height stay the requested size.
+    const width = spec.width;
+    const contentGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    while (svg.firstChild)
+        contentGroup.appendChild(svg.firstChild);
+    svg.appendChild(contentGroup);
+    const headerHeight = renderHeader(svg, document, {
+        title: spec.title,
+        legend: spec.legend,
+        fontFamily,
+    }, varCtx, width);
+    contentGroup.setAttribute('transform', `translate(${padding.left},${headerHeight + padding.top})`);
+    rewriteIds(svg, ctx.idPrefix ?? `uv${Math.random().toString(36).slice(2, 6)}-`);
+    // Root hygiene
+    const totalHeight = spec.height + headerHeight;
+    svg.setAttribute('width', String(width));
+    svg.setAttribute('height', String(totalHeight));
+    svg.setAttribute('viewBox', `0 0 ${width} ${totalHeight}`);
+    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    svg.removeAttribute('aria-hidden');
+    svg.setAttribute('role', 'img');
+    svg.style.removeProperty('display');
+    svg.style.setProperty('font-family', fontFamily);
+    if (spec.theme === 'dark')
+        svg.style.setProperty('background-color', '#292b34');
+    if (spec.title) {
+        const titleEl = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+        titleEl.textContent = spec.title;
+        svg.prepend(titleEl);
+    }
+    if (!ctx.keepClasses) {
+        for (const el of [svg, ...Array.from(svg.querySelectorAll('*'))]) {
+            el.removeAttribute('class');
+            el.removeAttribute('animating');
+            if (el.getAttribute('style') === '')
+                el.removeAttribute('style');
+        }
+    }
+    return new ctx.document.defaultView.XMLSerializer().serializeToString(svg);
+}
+/** Apply matched stylesheet declarations as inline styles.
+ * jsdom's querySelectorAll does the selector matching; declarations never
+ * override author inline styles, while later rules override earlier ones.
+ * var() references are resolved at write time — jsdom's typed CSS properties
+ * (e.g. opacity) would otherwise mangle them into "NaN". */
+function inlineStyles(svg, document, varCtx) {
+    const ruleApplied = new WeakMap();
+    for (const rule of collectCssRules(document)) {
+        if (rule.selector.includes(':root') || PSEUDO_SELECTOR.test(rule.selector))
+            continue;
+        let matches;
+        try {
+            matches = [
+                ...(svg.matches(rule.selector) ? [svg] : []),
+                ...Array.from(svg.querySelectorAll(rule.selector)),
+            ];
+        }
+        catch {
+            continue;
+        }
+        if (!matches.length)
+            continue;
+        const declarations = [];
+        for (const match of rule.block.matchAll(/(--[\w-]+|[a-zA-Z-]+)\s*:\s*([^;]+)/g)) {
+            const prop = match[1].trim();
+            if (prop === 'label')
+                continue; // emotion debug labels
+            declarations.push([prop, match[2].trim()]);
+        }
+        if (!declarations.length)
+            continue;
+        for (const el of matches) {
+            const style = el.style;
+            if (!style)
+                continue;
+            let applied = ruleApplied.get(el);
+            if (!applied) {
+                applied = new Set();
+                ruleApplied.set(el, applied);
+            }
+            for (const [prop, value] of declarations) {
+                const existing = style.getPropertyValue(prop);
+                if (existing && !applied.has(prop))
+                    continue; // author inline style wins
+                const resolved = !prop.startsWith('--') && value.includes('var(')
+                    ? substituteVarsForElement(value, el, varCtx)
+                    : value;
+                style.setProperty(prop, resolved);
+                applied.add(prop);
+            }
+        }
+    }
+}
+//# sourceMappingURL=postprocess.js.map