@graph-artifact/core 0.1.9 → 0.1.10

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/GraphCanvas.js

@@ -278,7 +278,24 @@ 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", { style: { width: '100%', height: '100%' }, children: [_jsx("style", { children: `
+        /* 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};
+        }
+      ` }), _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 }))] })] }));
 }
 export function GraphCanvas(props) {
     return (_jsx(ReactFlowProvider, { children: _jsx(GraphCanvasInner, { ...props }) }));

package/dist/components/nodes/SequenceNodes.js

@@ -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.js

@@ -69,7 +69,9 @@ 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,
             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.10",
   "description": "Composable Mermaid-like parser, layout engine, and React renderer for interactive diagram artifacts.",
   "license": "MIT",
   "repository": {