@graph-artifact/core 0.1.10 → 0.1.12

package/dist/components/DiagramCanvas.d.ts

@@ -1,5 +1,6 @@
 import type { ParsedDiagram, NodeMetadata } from '../types.js';
 import type { GraphConfig } from '../config.js';
+import { GraphCanvas } from './GraphCanvas.js';
 interface DiagramCanvasProps {
     parsed: ParsedDiagram;
     metadata?: Record<string, NodeMetadata>;
@@ -8,6 +9,8 @@ interface DiagramCanvasProps {
     hideAttribution?: boolean;
     relayoutOnMeasure?: boolean;
     onLayoutStable?: () => void;
+    branding?: Parameters<typeof GraphCanvas>[0]['branding'];
+    download?: Parameters<typeof GraphCanvas>[0]['download'];
 }
-export declare function DiagramCanvas({ parsed, metadata, onNodeClick, canvasOverrides, hideAttribution, relayoutOnMeasure, onLayoutStable }: DiagramCanvasProps): import("react/jsx-runtime").JSX.Element;
+export declare function DiagramCanvas({ parsed, metadata, onNodeClick, canvasOverrides, hideAttribution, relayoutOnMeasure, onLayoutStable, branding, download, }: DiagramCanvasProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DiagramCanvas.js

@@ -11,9 +11,9 @@ function UnsupportedCustomDiagram({ parsed }) {
             fontSize: 14,
         }, children: `Diagram type '${parsed.diagramType}' is detected but custom rendering is not implemented yet.` }));
 }
-export function DiagramCanvas({ parsed, metadata, onNodeClick, canvasOverrides, hideAttribution, relayoutOnMeasure, onLayoutStable }) {
+export function DiagramCanvas({ parsed, metadata, onNodeClick, canvasOverrides, hideAttribution, relayoutOnMeasure, onLayoutStable, branding, download, }) {
     if (parsed.kind === 'graph') {
-        return (_jsx(GraphCanvas, { parsed: parsed, metadata: metadata, onNodeClick: onNodeClick, canvasOverrides: canvasOverrides, hideAttribution: hideAttribution, relayoutOnMeasure: relayoutOnMeasure, onLayoutStable: onLayoutStable }));
+        return (_jsx(GraphCanvas, { parsed: parsed, metadata: metadata, onNodeClick: onNodeClick, canvasOverrides: canvasOverrides, hideAttribution: hideAttribution, relayoutOnMeasure: relayoutOnMeasure, onLayoutStable: onLayoutStable, branding: branding, download: download }));
     }
     return _jsx(UnsupportedCustomDiagram, { parsed: parsed });
 }

package/dist/components/GraphCanvas.d.ts

@@ -1,12 +1,43 @@
+import type { ReactNode } from 'react';
 import '@xyflow/react/dist/style.css';
 import type { ParsedGraph, NodeMetadata } from '../types.js';
 import type { GraphConfig } from '../config.js';
+type CornerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 interface GraphCanvasProps {
     parsed: ParsedGraph;
     metadata?: Record<string, NodeMetadata>;
     onNodeClick: (nodeId: string, nodeLabel: string) => void;
     canvasOverrides?: Partial<GraphConfig['canvas']>;
     hideAttribution?: boolean;
+    /** Optional branding overlays (included in exports). */
+    branding?: {
+        logo?: {
+            /** Image URL to render (e.g. PNG). Prefer `node` for inline SVG via SVGR. */
+            src?: string;
+            /** Inline logo node (e.g. an SVGR component). */
+            node?: ReactNode;
+            alt?: string;
+            position?: CornerPosition;
+            width?: number;
+            height?: number;
+            opacity?: number;
+        };
+        watermark?: {
+            text: string;
+            icon?: ReactNode;
+            opacity?: number;
+        };
+    };
+    /** Optional download control (renders a button and exports the diagram as PNG). */
+    download?: {
+        enabled?: boolean;
+        position?: CornerPosition;
+        icon?: ReactNode;
+        fileName?: string;
+        pixelRatio?: number;
+        /** Background color used for export. Defaults to `canvas.containerBackground`. */
+        backgroundColor?: string;
+    };
     /**
      * If true, reruns dagre after React Flow measures node DOM sizes so
      * layout reflects actual rendered content (auto-sized text/markdown).

package/dist/components/GraphCanvas.js

@@ -1,14 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useCallback, useState, useEffect, useRef } from 'react';
-import { ReactFlow, Background, Controls, MiniMap, ReactFlowProvider, useReactFlow, useNodesInitialized, useStore, useStoreApi, } from '@xyflow/react';
+import { ReactFlow, Background, Controls, MiniMap, ReactFlowProvider, useReactFlow, useNodesInitialized, useStore, useStoreApi, Panel, } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import { toPng } from 'html-to-image';
 import { layoutNodes, buildLayoutEdges } from '../layout/index.js';
 import { getConfig, getNodeTypes } from '../config.js';
 import { useTheme } from '../ThemeContext.js';
 import { RoutedEdge } from './edges/RoutedEdge.js';
 // Stable reference — must be outside the component to avoid infinite re-renders
 const edgeTypes = { routed: RoutedEdge };
-function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hideAttribution, relayoutOnMeasure, onLayoutStable, }) {
+function cornerToPanelPosition(pos) {
+    return pos;
+}
+function defaultDownloadIcon(theme) {
+    const stroke = theme.mode === 'dark' ? theme.color.gray4 : theme.color.gray4;
+    return (_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M12 3v10m0 0l-4-4m4 4l4-4M5 17v3h14v-3", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hideAttribution, branding, download, relayoutOnMeasure, onLayoutStable, }) {
     const theme = useTheme();
     const { canvas: baseCanvas } = getConfig();
     const canvas = useMemo(() => ({ ...baseCanvas, ...(canvasOverrides ?? {}) }), [baseCanvas, canvasOverrides]);
@@ -264,6 +272,35 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
     const defaultEdgeOptions = useMemo(() => ({ animated: false, style: theme.edgeDefaults.style }), [theme.edgeDefaults.style]);
     const miniMapNodeColor = useCallback(() => theme.color.orange1, [theme.color.orange1]);
     const miniMapMaskColor = useMemo(() => `${theme.color.gray1}cc`, [theme.color.gray1]);
+    const exportRef = useRef(null);
+    const onDownload = useCallback(async () => {
+        if (!exportRef.current)
+            return;
+        const fileName = (download?.fileName ?? 'diagram')
+            .trim()
+            .replace(/[^\w\- ]+/g, '')
+            .replace(/\s+/g, '-')
+            .slice(0, 80) || 'diagram';
+        try {
+            const dataUrl = await toPng(exportRef.current, {
+                cacheBust: true,
+                pixelRatio: Math.max(1, download?.pixelRatio ?? 2),
+                backgroundColor: download?.backgroundColor ?? canvas.containerBackground,
+                filter: (node) => {
+                    if (!(node instanceof Element))
+                        return true;
+                    return !node.classList.contains('ga-no-export');
+                },
+            });
+            const a = document.createElement('a');
+            a.href = dataUrl;
+            a.download = `${fileName}.png`;
+            a.click();
+        }
+        catch {
+            // ignore export errors (e.g. CORS images, unmounted)
+        }
+    }, [canvas.containerBackground, download?.backgroundColor, download?.fileName, download?.pixelRatio]);
     if (layoutError) {
         return (_jsx("div", { style: {
                 width: '100%',
@@ -278,7 +315,24 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
                 textAlign: 'center',
             }, children: `Diagram syntax/layout error: ${layoutError}` }));
     }
-    return (_jsxs("div", { style: { width: '100%', height: '100%' }, children: [_jsx("style", { children: `
+    return (_jsxs("div", { ref: exportRef, style: {
+            width: '100%',
+            height: '100%',
+            position: 'relative',
+            backgroundColor: canvas.containerBackground,
+        }, children: [_jsx("style", { children: `
+        /* Default React Flow background isn't transparent; force it. */
+        .react-flow {
+          background: transparent;
+        }
+        .react-flow__renderer, .react-flow__pane, .react-flow__viewport {
+          background: transparent;
+        }
+        ${hideAttribution ? `
+        /* Ensure the "React Flow" attribution never shows in embeds. */
+        .react-flow__attribution { display: none !important; }
+        ` : ''}
+
         /* Theme React Flow chrome (controls/minimap) to match our tokens. */
         .react-flow__controls-button {
           background: ${theme.mode === 'dark' ? theme.color.darkBg3 : theme.color.white};
@@ -295,7 +349,52 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
           background: ${theme.mode === 'dark' ? theme.color.darkBg2 : theme.color.white};
           border: 1px solid ${theme.color.gray2};
         }
-      ` }), _jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: resolvedNodeTypes, edgeTypes: edgeTypes, onNodeClick: handleNodeClick, fitView: canvas.fitView, minZoom: canvas.minZoom, maxZoom: canvas.maxZoom, defaultEdgeOptions: defaultEdgeOptions, zIndexMode: "manual", colorMode: theme.mode, proOptions: hideAttribution ? { hideAttribution: true } : undefined, children: [canvas.showBackground && (_jsx(Background, { color: theme.color.gray2, gap: canvas.backgroundGap, size: canvas.backgroundSize })), canvas.showControls && _jsx(Controls, {}), canvas.showMiniMap && (_jsx(MiniMap, { nodeColor: miniMapNodeColor, maskColor: miniMapMaskColor }))] })] }));
+        /* Ensure inline SVG logos scale to the requested width. */
+        .ga-logo svg { width: 100%; height: auto; display: block; }
+      ` }), (branding?.logo?.src || branding?.logo?.node) && (_jsx("div", { style: {
+                    position: 'absolute',
+                    zIndex: 5,
+                    pointerEvents: 'none',
+                    ...(branding.logo.position === 'top-right' ? { top: 12, right: 12 } : {}),
+                    ...(branding.logo.position === 'bottom-left' ? { bottom: 12, left: 12 } : {}),
+                    ...(branding.logo.position === 'bottom-right' ? { bottom: 12, right: 12 } : {}),
+                    ...(branding.logo.position === 'top-left' || !branding.logo.position ? { top: 12, left: 12 } : {}),
+                    opacity: branding.logo.opacity ?? 1,
+                }, children: branding.logo.node ? (_jsx("div", { className: "ga-logo", style: {
+                        width: branding.logo.width ?? 120,
+                        height: branding.logo.height,
+                        display: 'block',
+                    }, children: branding.logo.node })) : (_jsx("img", { src: branding.logo.src, alt: branding.logo.alt ?? 'logo', width: branding.logo.width ?? 120, height: branding.logo.height, style: { display: 'block' } })) })), branding?.watermark?.text && (_jsxs("div", { style: {
+                    position: 'absolute',
+                    left: '50%',
+                    bottom: 14,
+                    transform: 'translateX(-50%)',
+                    zIndex: 5,
+                    pointerEvents: 'none',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    fontFamily: theme.font.family,
+                    fontSize: theme.font.size.sm,
+                    color: theme.mode === 'dark' ? theme.color.gray3 : theme.color.gray4,
+                    opacity: branding.watermark.opacity ?? 0.9,
+                    userSelect: 'none',
+                    whiteSpace: 'nowrap',
+                }, children: [branding.watermark.icon ?? null, _jsx("span", { children: branding.watermark.text })] })), _jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: resolvedNodeTypes, edgeTypes: edgeTypes, onNodeClick: handleNodeClick, fitView: canvas.fitView, minZoom: canvas.minZoom, maxZoom: canvas.maxZoom, defaultEdgeOptions: defaultEdgeOptions, zIndexMode: "manual", colorMode: theme.mode, proOptions: hideAttribution ? { hideAttribution: true } : undefined, children: [canvas.showBackground && (_jsx(Background, { color: canvas.gridColor === 'auto' ? theme.color.gray2 : canvas.gridColor, gap: canvas.backgroundGap, size: canvas.backgroundSize })), canvas.showControls && (_jsx(Controls, { position: canvas.controlsPosition, 
+                        // Remove the "lock" (interactive) button; we want pan/zoom always available.
+                        showInteractive: false })), ((download?.enabled ?? canvas.showControls) && download?.enabled !== false) && (_jsx(Panel, { position: cornerToPanelPosition(download?.position ?? 'top-right'), className: "ga-no-export", children: _jsx("button", { type: "button", onClick: onDownload, "aria-label": "Download diagram", title: "Download", style: {
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                width: 34,
+                                height: 34,
+                                borderRadius: theme.radius.md,
+                                background: theme.mode === 'dark' ? theme.color.darkBg3 : theme.color.white,
+                                color: theme.color.gray4,
+                                border: `1px solid ${theme.color.gray2}`,
+                                boxShadow: theme.shadow.card,
+                                cursor: 'pointer',
+                            }, children: download?.icon ?? defaultDownloadIcon(theme) }) })), canvas.showMiniMap && (_jsx(MiniMap, { nodeColor: miniMapNodeColor, maskColor: miniMapMaskColor }))] })] }));
 }
 export function GraphCanvas(props) {
     return (_jsx(ReactFlowProvider, { children: _jsx(GraphCanvasInner, { ...props }) }));

package/dist/components/nodes/SequenceNodes.js

@@ -65,7 +65,7 @@ export const SequenceLifelineNode = memo(function SequenceLifelineNode({ data })
             width: 2,
             height,
             pointerEvents: 'none',
-        }, children: _jsx("svg", { width: 2, height: height, style: { overflow: 'visible' }, children: _jsx("line", { x1: 1, y1: 0, x2: 1, y2: height, stroke: theme.color.gray2, strokeWidth: 1.5, strokeDasharray: "6,4" }) }) }));
+        }, children: _jsx("svg", { width: 2, height: height, style: { overflow: 'visible' }, children: _jsx("line", { x1: 1, y1: 0, x2: 1, y2: height, stroke: theme.color.orange2, strokeWidth: 1.5 }) }) }));
 });
 // ─── Anchor Node ───────────────────────────────────────────────────────────
 export const SequenceAnchorNode = memo(function SequenceAnchorNode() {

package/dist/config.d.ts

@@ -100,6 +100,12 @@ export interface GraphConfig {
         showBackground: boolean;
         showControls: boolean;
         showMiniMap: boolean;
+        /** React Flow container background color. Use 'transparent' to inherit from the host app. */
+        containerBackground: string;
+        /** Background dot/grid color (if showBackground is enabled). */
+        gridColor: string;
+        /** Position of the React Flow controls cluster. */
+        controlsPosition: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
         backgroundGap: number;
         backgroundSize: number;
     };

package/dist/config.js

@@ -72,6 +72,11 @@ function createDefaultConfig() {
             // MiniMap is useful in dedicated viewers but noisy in embedded contexts (chat, docs).
             // Host apps can enable it via `canvasOverrides`.
             showMiniMap: false,
+            // Default to transparent so embeds naturally match host application background.
+            containerBackground: 'transparent',
+            // Use theme token by default (GraphCanvas resolves this when set to 'auto').
+            gridColor: 'auto',
+            controlsPosition: 'bottom-right',
             backgroundGap: 20,
             backgroundSize: 1,
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graph-artifact/core",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Composable Mermaid-like parser, layout engine, and React renderer for interactive diagram artifacts.",
   "license": "MIT",
   "repository": {
@@ -60,7 +60,8 @@
     "react-markdown": "^9.0.0 || ^10.0.0"
   },
   "dependencies": {
-    "@dagrejs/dagre": "^1.1.4"
+    "@dagrejs/dagre": "^1.1.4",
+    "html-to-image": "^1.11.13"
   },
   "devDependencies": {
     "typescript": "^5.7.3",