@graph-artifact/core 0.1.9 → 0.1.11

package/dist/ThemeContext.d.ts

@@ -2,6 +2,8 @@ import type { ReactNode } from 'react';
 import type { ThemeOverride } from './types.js';
 import type { ThemeTokens } from './theme/index.js';
 export interface Theme {
+    /** Theme mode used for host integration (React Flow colorMode, etc.). */
+    mode: 'dark' | 'light';
     color: Record<string, string>;
     font: {
         family: string;
@@ -39,9 +41,11 @@ export interface Theme {
 }
 export declare const defaultTheme: Theme;
 interface ThemeProviderProps {
+    /** Override the base theme used ('dark' | 'light' | custom registered theme). */
+    baseTheme?: string;
     overrides?: ThemeOverride;
     children: ReactNode;
 }
-export declare function ThemeProvider({ overrides, children }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ baseTheme, overrides, children }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useTheme(): Theme;
 export {};

package/dist/ThemeContext.js

@@ -5,6 +5,8 @@ import { getThemeTokens } from './theme/index.js';
 // ─── Build Theme from Tokens ──────────────────────────────────────────────────
 function buildTheme(tokens) {
     return {
+        // Most consumers only ship dark + light. Treat unknown themes as dark by default.
+        mode: tokens.color.darkBg2 === '#ffffff' ? 'light' : 'dark',
         color: { ...tokens.color },
         font: {
             family: tokens.font.family,
@@ -72,8 +74,21 @@ function resolveTheme(instanceOverrides) {
 }
 // ─── Context & Provider ───────────────────────────────────────────────────────
 const ThemeContext = createContext(defaultTheme);
-export function ThemeProvider({ overrides, children }) {
-    const theme = useMemo(() => resolveTheme(overrides), [overrides]);
+export function ThemeProvider({ baseTheme, overrides, children }) {
+    const theme = useMemo(() => {
+        if (!baseTheme)
+            return resolveTheme(overrides);
+        const tokens = getThemeTokens(baseTheme);
+        let resolved = buildTheme(tokens);
+        const { theme: configOverrides } = getConfig();
+        if (configOverrides && Object.keys(configOverrides).length > 0) {
+            resolved = deepMerge(resolved, configOverrides);
+        }
+        if (overrides && Object.keys(overrides).length > 0) {
+            resolved = deepMerge(resolved, overrides);
+        }
+        return resolved;
+    }, [baseTheme, overrides]);
     return _jsx(ThemeContext.Provider, { value: theme, children: children });
 }
 export function useTheme() {

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,40 @@
+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?: {
+            src: string;
+            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,80 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
                 textAlign: 'center',
             }, children: `Diagram syntax/layout error: ${layoutError}` }));
     }
-    return (_jsx("div", { style: { width: '100%', height: '100%' }, children: _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", 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 }))] }) }));
+    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};
+          color: ${theme.mode === 'dark' ? theme.color.gray4 : theme.color.gray4};
+          border: 1px solid ${theme.color.gray2};
+        }
+        .react-flow__controls-button:hover {
+          background: ${theme.mode === 'dark' ? theme.color.gray1 : theme.color.gray1};
+        }
+        .react-flow__controls-button svg {
+          fill: currentColor;
+        }
+        .react-flow__minimap {
+          background: ${theme.mode === 'dark' ? theme.color.darkBg2 : theme.color.white};
+          border: 1px solid ${theme.color.gray2};
+        }
+      ` }), branding?.logo?.src && (_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: _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() {
@@ -80,7 +80,7 @@ export const SequenceNoteNode = memo(function SequenceNoteNode({ data }) {
     const ns = theme.nodeStyles.sequence;
     return (_jsx("div", { style: {
             width: w,
-            backgroundColor: theme.color.darkBg3,
+            backgroundColor: ns.note.backgroundColor,
             border: `${ns.note.borderWidth} solid ${theme.color.gray2}`,
             borderRadius: theme.radius.sm,
             display: 'flex',
@@ -90,7 +90,7 @@ export const SequenceNoteNode = memo(function SequenceNoteNode({ data }) {
             pointerEvents: 'none',
             boxSizing: 'border-box',
         }, children: _jsx("span", { style: {
-                color: theme.color.gray4,
+                color: ns.note.textColor,
                 fontSize: theme.font.size.sm,
                 fontFamily: theme.font.family,
                 textAlign: 'center',

package/dist/components/nodes/StateNode.js

@@ -38,7 +38,7 @@ export const StateNode = memo(function StateNode({ data }) {
     if (shape === 'circle') {
         return (_jsx("div", { style: {
                 width: layoutWidth, height: layoutHeight,
-                backgroundColor: theme.color.gray5, borderRadius: theme.radius.full,
+                backgroundColor: theme.color.orange1, borderRadius: theme.radius.full,
             }, children: _jsx(StateHandles, { fwIn: fwIn, fwOut: fwOut }) }));
     }
     // End state: bullseye (outer ring + inner filled dot).
@@ -49,23 +49,26 @@ export const StateNode = memo(function StateNode({ data }) {
                 width: layoutWidth, height: layoutHeight,
                 boxSizing: 'border-box',
                 borderRadius: theme.radius.full,
-                border: `${theme.borderWidth.md} solid ${theme.color.gray5}`,
+                border: `${theme.borderWidth.md} solid ${theme.color.orange1}`,
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
             }, children: [_jsx("div", { style: {
                         width: innerSize, height: innerSize,
-                        backgroundColor: theme.color.gray5, borderRadius: theme.radius.full,
+                        // Inner fill: dark in dark mode, dark gray in light mode.
+                        backgroundColor: theme.mode === 'dark' ? theme.color.darkBg2 : theme.color.gray5,
+                        borderRadius: theme.radius.full,
                     } }), _jsx(StateHandles, { fwIn: fwIn, fwOut: fwOut })] }));
     }
     return (_jsxs("div", { style: {
-            backgroundColor: theme.color.darkBg2, border: `${theme.borderWidth.sm} solid ${theme.color.gray2}`,
-            borderLeft: `${ns.rect.accentWidth} solid ${theme.color.orange1}`, borderRadius: theme.radius.pill,
+            backgroundColor: theme.color.orange1,
+            border: `${theme.borderWidth.sm} solid ${theme.color.orange3}`,
+            borderRadius: theme.radius.pill,
             padding: `${theme.space[3]} ${theme.space[6]}`,
             width: layoutWidth, height: layoutHeight,
             boxSizing: 'border-box',
             fontFamily: theme.font.family, cursor: 'pointer',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
         }, children: [_jsx("div", { style: {
-                    color: theme.color.gray5, fontSize: theme.font.size.lg, fontWeight: theme.font.weight.semibold,
+                    color: theme.color.white, fontSize: theme.font.size.lg, fontWeight: theme.font.weight.semibold,
                     textAlign: 'center', whiteSpace: 'nowrap',
                 }, children: label }), _jsx(StateHandles, { fwIn: fwIn, fwOut: fwOut })] }));
 });

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

@@ -69,7 +69,14 @@ function createDefaultConfig() {
             fitView: true,
             showBackground: true,
             showControls: true,
-            showMiniMap: true,
+            // 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/dist/layout/sequenceLayout.js

@@ -400,6 +400,7 @@ export function layoutSequenceDiagram(sequence, theme, metadata) {
 function buildSequenceEdge(id, source, target, arrowType, theme, showArrow) {
     const isDashed = arrowType === 'dashed' || arrowType === 'dashed_open';
     const isOpen = arrowType === 'solid_open' || arrowType === 'dashed_open';
+    const markerSize = theme.edgeDefaults.markerSize;
     return {
         id,
         source,
@@ -414,8 +415,8 @@ function buildSequenceEdge(id, source, target, arrowType, theme, showArrow) {
             markerEnd: {
                 type: MarkerType.ArrowClosed,
                 color: theme.color.gray3,
-                width: 10,
-                height: 10,
+                width: markerSize,
+                height: markerSize,
             },
         } : {}),
     };
@@ -424,6 +425,7 @@ function buildSequenceRoutedEdge(id, source, target, arrowType, theme, showArrow
     const isDashed = arrowType === 'dashed' || arrowType === 'dashed_open';
     const isOpen = arrowType === 'solid_open' || arrowType === 'dashed_open';
     const svgPath = generateRoundedPath(points, 14);
+    const markerSize = theme.edgeDefaults.markerSize;
     return {
         id,
         source,
@@ -439,8 +441,8 @@ function buildSequenceRoutedEdge(id, source, target, arrowType, theme, showArrow
             markerEnd: {
                 type: MarkerType.ArrowClosed,
                 color: theme.color.gray3,
-                width: 10,
-                height: 10,
+                width: markerSize,
+                height: markerSize,
             },
         } : {}),
     };

package/dist/theme/dark.js

@@ -107,7 +107,7 @@ const edgeDefaults = {
     labelBgBorderRadius: 4,
     dashedPattern: '5,5',
     thickWidth: 3,
-    markerSize: 12,
+    markerSize: 14,
 };
 // ─── Shared Node Base Styles ────────────────────────────────────────────────
 const nodeBase = {
@@ -160,7 +160,7 @@ const nodeStyles = {
     sequence: {
         number: { size: 22, fontSize: font.size.xs, borderWidth: '1.5px' },
         block: { borderWidth: borderWidth.sm, dividerWidth: borderWidth.sm, labelCharWidth: 8, labelOffsetBase: 24 },
-        note: { borderWidth: borderWidth.sm, paddingY: space[1] },
+        note: { borderWidth: borderWidth.sm, paddingY: space[1], backgroundColor: color.darkBg3, textColor: color.gray4 },
     },
     subgraph: {
         pointerEvents: 'none',

package/dist/theme/light.js

@@ -107,7 +107,7 @@ const edgeDefaults = {
     labelBgBorderRadius: 4,
     dashedPattern: '5,5',
     thickWidth: 3,
-    markerSize: 12,
+    markerSize: 14,
 };
 // ─── Shared Node Base Styles ────────────────────────────────────────────────
 const nodeBase = {
@@ -160,7 +160,8 @@ const nodeStyles = {
     sequence: {
         number: { size: 22, fontSize: font.size.xs, borderWidth: '1.5px' },
         block: { borderWidth: borderWidth.sm, dividerWidth: borderWidth.sm, labelCharWidth: 8, labelOffsetBase: 24 },
-        note: { borderWidth: borderWidth.sm, paddingY: space[1] },
+        // Light mode notes: use a darker neutral so they don't disappear on white backgrounds.
+        note: { borderWidth: borderWidth.sm, paddingY: space[1], backgroundColor: color.gray2, textColor: color.gray5 },
     },
     subgraph: {
         pointerEvents: 'none',

package/dist/theme/types.d.ts

@@ -81,6 +81,8 @@ export interface ThemeTokens {
             note: {
                 borderWidth: string;
                 paddingY: string;
+                backgroundColor: string;
+                textColor: string;
             };
         };
         subgraph: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graph-artifact/core",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "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",