@inkra/react 0.11.0 → 0.13.0

package/dist/node-graph/index.d.ts

@@ -49,6 +49,13 @@ export interface NodeGraphControlLabels {
     zoomOut: string;
     fitView: string;
 }
+export interface NodeGraphControlsOptions {
+    zoomIn?: boolean;
+    zoomOut?: boolean;
+    fitView?: boolean;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+export type NodeGraphExtraControls = ReactNode | ((api: NodeGraphRef) => ReactNode);
 export interface NodeGraphRootProps<NodeType extends NodeGraphNode = NodeGraphNode, EdgeType extends NodeGraphEdge = NodeGraphEdge> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onError'> {
     /** Immutable snapshots: replace the array and each changed node (including changed nested data). */
     nodes: NodeType[];
@@ -63,7 +70,8 @@ export interface NodeGraphRootProps<NodeType extends NodeGraphNode = NodeGraphNo
     renderEdgeLabel?: (edge: EdgeType) => ReactNode;
     readOnly?: boolean;
     emptyState?: ReactNode;
-    controls?: boolean;
+    controls?: boolean | NodeGraphControlsOptions;
+    extraControls?: NodeGraphExtraControls;
     controlLabels?: Partial<NodeGraphControlLabels>;
     fitView?: boolean;
     fitViewOptions?: FitViewOptions<NodeType>;
@@ -77,6 +85,7 @@ export interface NodeGraphRootProps<NodeType extends NodeGraphNode = NodeGraphNo
     zoomOnPinch?: boolean;
     connectOnClick?: boolean;
     onlyRenderVisibleElements?: boolean;
+    hideAttribution?: boolean;
 }
 export interface NodeGraphPortProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'children'> {
     id: string;
@@ -106,12 +115,16 @@ export interface NodeGraphEdgeProps {
     className?: string;
 }
 export interface NodeGraphControlsProps extends HTMLAttributes<HTMLDivElement> {
+    zoomIn?: boolean;
+    zoomOut?: boolean;
+    fitView?: boolean;
+    extraControls?: NodeGraphExtraControls;
     fitViewOptions?: FitViewOptions;
     zoomInLabel?: string;
     zoomOutLabel?: string;
     fitViewLabel?: string;
 }
-declare function NodeGraphControls(inkraProps: NodeGraphControlsProps): import("react").JSX.Element;
+declare function NodeGraphControls(inkraProps: NodeGraphControlsProps): import("react").JSX.Element | null;
 export declare function applyNodeGraphNodeChanges<NodeType extends NodeGraphNode>(changes: NodeGraphNodeChange<NodeType>[], nodes: NodeType[]): NodeType[];
 export declare function applyNodeGraphEdgeChanges<EdgeType extends NodeGraphEdge>(changes: NodeGraphEdgeChange<EdgeType>[], edges: EdgeType[]): EdgeType[];
 export declare function addNodeGraphEdge<EdgeType extends NodeGraphEdge>(connection: NodeGraphConnection | EdgeType, edges: EdgeType[]): EdgeType[];

package/dist/node-graph/index.js

@@ -241,21 +241,30 @@ function NodeGraphConnectionLine({ fromX, fromY, toX, toY, fromPosition, toPosit
 }
 function NodeGraphControls(inkraProps) {
     const { t } = useInkraLocale();
-    const { className, fitViewOptions, zoomInLabel = t('common.zoomIn'), zoomOutLabel = t('common.zoomOut'), fitViewLabel = t('graph.fit'), ...props } = inkraProps;
+    const { className, children, zoomIn = true, zoomOut = true, fitView = true, extraControls, fitViewOptions, zoomInLabel = t('common.zoomIn'), zoomOutLabel = t('common.zoomOut'), fitViewLabel = t('graph.fit'), ...props } = inkraProps;
     const flow = useReactFlow();
+    const api = {
+        zoomIn: () => flow.zoomIn(),
+        zoomOut: () => flow.zoomOut(),
+        fitView: options => flow.fitView(options ?? fitViewOptions),
+        getViewport: () => flow.getViewport(),
+    };
+    const extra = typeof extraControls === 'function' ? extraControls(api) : extraControls;
     const actions = [
-        { label: zoomInLabel, paths: zoomInPaths, run: () => flow.zoomIn() },
-        { label: zoomOutLabel, paths: zoomOutPaths, run: () => flow.zoomOut() },
-        { label: fitViewLabel, paths: fitViewPaths, run: () => flow.fitView(fitViewOptions) },
-    ];
-    return _jsx("div", { ...props, className: ['inkra-node-graph__controls', 'nopan', className].filter(Boolean).join(' '), children: actions.map(action => _jsxs(PencilSurface, { as: "button", "aria-label": action.label, className: "inkra-node-graph__control", "data-tooltip": action.label, onClick: () => void action.run(), variant: "paper", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-node-graph__control-focus", radius: 6, seed: `node-graph-${action.label}-focus`, variant: "outline" }), _jsx(PencilIcon, { decorative: true, paths: action.paths, size: 22, sourceSize: 24, seed: `node-graph-${action.label}` })] }, action.label)) });
+        { id: 'zoomIn', enabled: zoomIn, label: zoomInLabel, paths: zoomInPaths, run: api.zoomIn },
+        { id: 'zoomOut', enabled: zoomOut, label: zoomOutLabel, paths: zoomOutPaths, run: api.zoomOut },
+        { id: 'fitView', enabled: fitView, label: fitViewLabel, paths: fitViewPaths, run: () => api.fitView() },
+    ].filter(action => action.enabled);
+    if (!actions.length && extra == null && children == null)
+        return null;
+    return _jsxs("div", { ...props, className: ['inkra-node-graph__controls', 'nopan', className].filter(Boolean).join(' '), children: [actions.map(action => _jsxs(PencilSurface, { as: "button", "aria-label": action.label, className: "inkra-node-graph__control", "data-tooltip": action.label, onClick: () => void action.run(), variant: "paper", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-node-graph__control-focus", radius: 6, seed: `node-graph-${action.label}-focus`, variant: "outline" }), _jsx(PencilIcon, { decorative: true, paths: action.paths, size: 22, sourceSize: 24, seed: `node-graph-${action.label}` })] }, action.id)), extra, children] });
 }
 function SsrFallback({ nodes, emptyState, label, }) {
     return _jsx("div", { className: "inkra-node-graph__ssr", role: "group", "aria-label": label, children: nodes.length === 0 ? _jsx("div", { className: "inkra-node-graph__empty", children: emptyState }) : _jsx("ul", { children: nodes.map(node => _jsx("li", { children: readableLabel(node.data.label, node.id) }, node.id)) }) });
 }
 function NodeGraphRootInner(inkraProps, forwardedRef) {
     const { t } = useInkraLocale();
-    const { nodes, edges, onNodesChange, onEdgesChange, onConnect, isValidConnection, renderNode, renderEdge, renderEdgeLabel, readOnly = false, emptyState = t('graph.empty'), controls = true, controlLabels, fitView = false, fitViewOptions, defaultViewport = { x: 0, y: 0, zoom: 1 }, viewport, onViewportChange, minZoom = 0.25, maxZoom = 2, panOnDrag = true, zoomOnScroll = true, zoomOnPinch = true, connectOnClick = true, onlyRenderVisibleElements = false, className, style, 'aria-label': ariaLabel = t('graph.label'), ...props } = inkraProps;
+    const { nodes, edges, onNodesChange, onEdgesChange, onConnect, isValidConnection, renderNode, renderEdge, renderEdgeLabel, readOnly = false, emptyState = t('graph.empty'), controls = true, extraControls, controlLabels, fitView = false, fitViewOptions, defaultViewport = { x: 0, y: 0, zoom: 1 }, viewport, onViewportChange, minZoom = 0.25, maxZoom = 2, panOnDrag = true, zoomOnScroll = true, zoomOnPinch = true, connectOnClick = true, onlyRenderVisibleElements = false, hideAttribution = false, className, style, 'aria-label': ariaLabel = t('graph.label'), ...props } = inkraProps;
     const [mounted, setMounted] = useState(false);
     const instanceRef = useRef(null);
     useEffect(() => setMounted(true), []);
@@ -318,7 +327,7 @@ function NodeGraphRootInner(inkraProps, forwardedRef) {
                         'node.a11yDescription.ariaLiveMessage': ({ x, y }) => t('graph.nodeMoved', { x, y }),
                         'edge.a11yDescription.default': t('graph.edgeInstructions'),
                         'handle.ariaLabel': t('graph.handle'),
-                    }, nodes: internalNodes, edges: internalEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onInit: instance => { instanceRef.current = instance; }, onNodesChange: changes => onNodesChange?.(changes), onEdgesChange: changes => onEdgesChange?.(changes), onConnect: readOnly ? undefined : onConnect, isValidConnection: isValidConnection, nodesDraggable: !readOnly, nodesConnectable: !readOnly, elementsSelectable: !readOnly, edgesReconnectable: !readOnly, nodesFocusable: true, edgesFocusable: true, deleteKeyCode: readOnly ? null : ['Backspace', 'Delete'], fitView: fitView, fitViewOptions: fitViewOptions, defaultViewport: defaultViewport, viewport: viewport, onViewportChange: onViewportChange, minZoom: minZoom, maxZoom: maxZoom, panOnDrag: panOnDrag, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, connectOnClick: connectOnClick && !readOnly, connectionLineComponent: NodeGraphConnectionLine, onlyRenderVisibleElements: onlyRenderVisibleElements, noDragClassName: "nodrag", noPanClassName: "nopan", children: controls && _jsx(Panel, { position: "bottom-left", children: _jsx(NodeGraphControls, { fitViewLabel: controlLabels?.fitView, fitViewOptions: fitViewOptions, zoomInLabel: controlLabels?.zoomIn, zoomOutLabel: controlLabels?.zoomOut }) }) }), nodes.length === 0 && _jsx("div", { className: "inkra-node-graph__empty", role: "status", children: emptyState })] }) });
+                    }, nodes: internalNodes, edges: internalEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onInit: instance => { instanceRef.current = instance; }, onNodesChange: changes => onNodesChange?.(changes), onEdgesChange: changes => onEdgesChange?.(changes), onConnect: readOnly ? undefined : onConnect, isValidConnection: isValidConnection, nodesDraggable: !readOnly, nodesConnectable: !readOnly, elementsSelectable: !readOnly, edgesReconnectable: !readOnly, nodesFocusable: true, edgesFocusable: true, deleteKeyCode: readOnly ? null : ['Backspace', 'Delete'], fitView: fitView, fitViewOptions: fitViewOptions, defaultViewport: defaultViewport, viewport: viewport, onViewportChange: onViewportChange, minZoom: minZoom, maxZoom: maxZoom, panOnDrag: panOnDrag, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, connectOnClick: connectOnClick && !readOnly, connectionLineComponent: NodeGraphConnectionLine, onlyRenderVisibleElements: onlyRenderVisibleElements, proOptions: { hideAttribution }, noDragClassName: "nodrag", noPanClassName: "nopan", children: controls !== false && _jsx(Panel, { position: typeof controls === 'object' ? controls.position ?? 'bottom-left' : 'bottom-left', children: _jsx(NodeGraphControls, { zoomIn: typeof controls === 'object' ? controls.zoomIn : undefined, zoomOut: typeof controls === 'object' ? controls.zoomOut : undefined, fitView: typeof controls === 'object' ? controls.fitView : undefined, extraControls: extraControls, fitViewLabel: controlLabels?.fitView, fitViewOptions: fitViewOptions, zoomInLabel: controlLabels?.zoomIn, zoomOutLabel: controlLabels?.zoomOut }) }) }), nodes.length === 0 && _jsx("div", { className: "inkra-node-graph__empty", role: "status", children: emptyState })] }) });
 }
 const NodeGraphRoot = forwardRef(NodeGraphRootInner);
 export function applyNodeGraphNodeChanges(changes, nodes) {

package/dist/styles/dependency-graph.css

@@ -0,0 +1,176 @@
+.inkra-node-graph {
+  position: relative;
+  isolation: isolate;
+  inline-size: 100%;
+  min-inline-size: 0;
+  block-size: min(68vh, 620px);
+  min-block-size: 320px;
+  overflow: hidden;
+  color: var(--inkra-ink);
+  background: color-mix(in srgb, var(--inkra-paper) 92%, transparent);
+  border-radius: var(--inkra-radius-lg);
+}
+
+.inkra-node-graph .react-flow {
+  position: relative;
+  z-index: 0;
+  overflow: hidden;
+  direction: inherit;
+  inline-size: 100%;
+  block-size: 100%;
+  background: transparent;
+  --xy-edge-stroke: var(--inkra-ink-muted);
+  --xy-edge-stroke-selected: var(--inkra-accent-strong);
+  --xy-connectionline-stroke: var(--inkra-accent-strong);
+  --xy-selection-background-color: color-mix(in srgb, var(--inkra-selection-pigment) 13%, transparent);
+  --xy-selection-border: 0;
+}
+
+.inkra-node-graph .react-flow__container { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
+.inkra-node-graph .react-flow__pane { z-index: 1; touch-action: none; }
+.inkra-node-graph .react-flow__pane.draggable { cursor: grab; }
+.inkra-node-graph .react-flow__pane.dragging { cursor: grabbing; }
+.inkra-node-graph .react-flow__pane.selection { cursor: pointer; }
+.inkra-node-graph .react-flow__viewport { position: absolute; inset: 0; z-index: 2; transform-origin: 0 0; pointer-events: none; }
+.inkra-node-graph .react-flow__renderer { z-index: 4; }
+.inkra-node-graph .react-flow__edges { position: absolute; }
+.inkra-node-graph .react-flow__edges svg { position: absolute; overflow: visible; pointer-events: none; }
+.inkra-node-graph .react-flow__edge { pointer-events: visibleStroke; }
+.inkra-node-graph .react-flow__edge.selectable { cursor: pointer; }
+.inkra-node-graph .react-flow__edge.inactive { pointer-events: none; }
+.inkra-node-graph .react-flow__edge:focus,
+.inkra-node-graph .react-flow__edge:focus-visible { outline: none; }
+.inkra-node-graph svg.react-flow__connectionline { position: absolute; z-index: 8; overflow: visible; pointer-events: none; }
+.inkra-node-graph .react-flow__nodes { pointer-events: none; transform-origin: 0 0; }
+.inkra-node-graph .react-flow__node { position: absolute; box-sizing: border-box; transform-origin: 0 0; pointer-events: all; user-select: none; }
+.inkra-node-graph .react-flow__node.selectable { cursor: pointer; }
+.inkra-node-graph .react-flow__node.draggable { cursor: grab; }
+.inkra-node-graph .react-flow__node.draggable.dragging { cursor: grabbing; }
+.inkra-node-graph .react-flow__node:focus { outline: none; }
+.inkra-node-graph .react-flow__nodesselection { z-index: 3; transform-origin: left top; pointer-events: none; }
+.inkra-node-graph .react-flow__nodesselection-rect { position: absolute; pointer-events: all; cursor: grab; }
+.inkra-node-graph .react-flow__nodesselection-rect:focus,
+.inkra-node-graph .react-flow__nodesselection-rect:focus-visible { outline: none; }
+.inkra-node-graph .react-flow__selection { z-index: 6; }
+.inkra-node-graph .react-flow__panel { position: absolute; z-index: 7; margin: var(--inkra-space-3); }
+.inkra-node-graph .react-flow__panel.top { inset-block-start: 0; }
+.inkra-node-graph .react-flow__panel.bottom { inset-block-end: 0; }
+.inkra-node-graph .react-flow__panel.left { inset-inline-start: 0; }
+.inkra-node-graph .react-flow__panel.right { inset-inline-end: 0; }
+.inkra-node-graph .react-flow__pane.selection .react-flow__panel { pointer-events: none; }
+.inkra-node-graph .react-flow__selection-rect,
+.inkra-node-graph .react-flow__nodesselection-rect { border: 0; background: color-mix(in srgb, var(--inkra-selection-pigment) 13%, transparent); }
+.inkra-node-graph .react-flow__viewport-portal { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; user-select: none; }
+.inkra-node-graph .react-flow__attribution { color: var(--inkra-ink-muted); font-size: 10px; line-height: 1.2; }
+.inkra-node-graph .react-flow__attribution a { color: inherit; }
+
+.inkra-node-graph__node-shell { position: relative; min-inline-size: 168px; max-inline-size: min(280px, 72vw); }
+.inkra-node-graph__node-paper { position: relative; min-inline-size: inherit; color: var(--inkra-ink); }
+.inkra-node-graph__node-selection { position: absolute; z-index: -1; inset: 2px; pointer-events: none; }
+.inkra-node-graph__node-content { position: relative; z-index: 1; display: grid; gap: var(--inkra-space-2); padding: var(--inkra-space-4); min-inline-size: 0; }
+.inkra-node-graph__node-label { color: var(--inkra-ink); font-size: var(--inkra-text-md); line-height: var(--inkra-line-ui); overflow-wrap: anywhere; }
+.inkra-node-graph__node-description { color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-body); overflow-wrap: anywhere; }
+.inkra-node-graph__node-body { min-inline-size: 0; }
+.inkra-node-graph__node-focus { position: absolute; z-index: 3; inset: -4px; opacity: 0; pointer-events: none; }
+.inkra-node-graph .react-flow__node:focus-visible .inkra-node-graph__node-focus { opacity: 1; }
+
+.inkra-node-graph__port.react-flow__handle {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  inline-size: var(--inkra-touch-target);
+  block-size: var(--inkra-touch-target);
+  border: 0;
+  background: transparent;
+  pointer-events: none;
+  transform: translate(-50%, -50%) scale(var(--inkra-node-graph-port-scale, 1));
+  z-index: 4;
+}
+.inkra-node-graph__port.react-flow__handle.connectionindicator { pointer-events: all; cursor: crosshair; }
+.inkra-node-graph__port.react-flow__handle-left { inset-inline-start: 0; inset-block-start: 50%; }
+.inkra-node-graph__port.react-flow__handle-right { inset-inline-start: 100%; inset-block-start: 50%; }
+.inkra-node-graph__port.react-flow__handle-top { inset-inline-start: 50%; inset-block-start: 0; }
+.inkra-node-graph__port.react-flow__handle-bottom { inset-inline-start: 50%; inset-block-start: 100%; }
+.inkra-node-graph__port-visual { position: relative; display: grid; place-items: center; inline-size: 18px; block-size: 18px; pointer-events: none; }
+.inkra-node-graph__port-mark,
+.inkra-node-graph__port-feedback { position: absolute; inset: 0; pointer-events: none; }
+.inkra-node-graph__port-feedback { opacity: 0; }
+.inkra-node-graph__port:hover .inkra-node-graph__port-feedback,
+.inkra-node-graph__port.connectingfrom .inkra-node-graph__port-feedback,
+.inkra-node-graph__port.valid .inkra-node-graph__port-feedback { opacity: 1; }
+
+.inkra-node-graph__edge-hit { pointer-events: stroke; }
+.inkra-node-graph__edge-pencil { color: var(--inkra-ink-muted); pointer-events: none; }
+.inkra-node-graph__edge-pencil[data-selected] { color: var(--inkra-accent-strong); }
+.inkra-node-graph__edge-measure { stroke: transparent; stroke-width: 1; pointer-events: none; }
+.inkra-node-graph__edge-fallback { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
+.inkra-node-graph__edge-pencil[data-pencil-ready] .inkra-node-graph__edge-fallback { visibility: hidden; }
+.inkra-node-graph__edge-foreign-object { overflow: visible; pointer-events: none; }
+.inkra-node-graph__edge-canvas { display: block; color: inherit; overflow: visible; pointer-events: none; }
+.inkra-node-graph__edge-label { position: absolute; z-index: 5; max-inline-size: 180px; padding: 4px 8px; color: var(--inkra-ink); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-ui); pointer-events: all; overflow-wrap: anywhere; }
+.inkra-node-graph .react-flow__edgelabel-renderer { position: absolute; inset: 0; z-index: 5; inline-size: 100%; block-size: 100%; pointer-events: none; user-select: none; }
+
+.inkra-node-graph__controls { display: flex; gap: var(--inkra-space-1); }
+.inkra-node-graph__control { appearance: none; position: relative; display: inline-grid; place-items: center; inline-size: var(--inkra-touch-target); block-size: var(--inkra-touch-target); padding: 0; border: 0; color: var(--inkra-ink); cursor: pointer; }
+.inkra-node-graph__control:focus { outline: none; }
+.inkra-node-graph__control-focus { position: absolute; inset: 2px; opacity: 0; pointer-events: none; }
+.inkra-node-graph__control:focus-visible .inkra-node-graph__control-focus { opacity: 1; }
+
+.inkra-node-graph__empty { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: var(--inkra-space-6); color: var(--inkra-ink-muted); text-align: center; pointer-events: none; }
+.inkra-node-graph__ssr { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--inkra-space-5); color: var(--inkra-ink); }
+.inkra-node-graph__ssr ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--inkra-space-3); margin: 0; padding: 0; list-style: none; }
+.inkra-node-graph__ssr li { padding: var(--inkra-space-3) var(--inkra-space-4); }
+
+@media (max-width: 390px) {
+  .inkra-node-graph { block-size: 440px; min-block-size: 360px; }
+  .inkra-node-graph__node-shell { min-inline-size: 144px; max-inline-size: 68vw; }
+  .inkra-node-graph__node-content { padding: var(--inkra-space-3); }
+  .inkra-node-graph .react-flow__panel { margin: var(--inkra-space-2); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-node-graph * { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
+}
+
+@media print, (forced-colors: active) {
+  .inkra-node-graph { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
+  .inkra-node-graph__edge-canvas { visibility: hidden; }
+  .inkra-node-graph__edge-fallback { visibility: visible !important; stroke: CanvasText; }
+  .inkra-node-graph__port-mark { outline: 1px solid CanvasText; outline-offset: -6px; }
+  .inkra-node-graph .react-flow__node:focus-visible .inkra-node-graph__node-shell,
+  .inkra-node-graph__control:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
+}
+
+.inkra-dependency-graph__node { position: relative; width: 100%; height: 100%; }
+.inkra-dependency-graph__anchor.react-flow__handle { position: absolute; width: 0; height: 0; min-width: 0; min-height: 0; border: 0; opacity: 0; pointer-events: none; }
+.inkra-dependency-graph__card, .inkra-dependency-graph__icon-button { box-sizing: border-box; width: 100%; height: 100%; padding: 14px 16px; border: 0; font: inherit; color: var(--inkra-ink); text-align: start; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
+.inkra-dependency-graph__card--custom { padding: 0; }
+.inkra-dependency-graph__header { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.inkra-dependency-graph__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
+.inkra-dependency-graph__title { appearance: none; background: none; border: 0; padding: 0; margin: 0; min-width: 0; flex: 1; font: inherit; color: inherit; text-align: start; font-weight: 600; cursor: pointer; }
+.inkra-dependency-graph__title > * { max-width: 100%; }
+.inkra-dependency-graph__actions { display: flex; align-items: center; flex: 0 0 auto; gap: 4px; margin-inline-start: auto; }
+.inkra-dependency-graph__body { min-height: 0; overflow: auto; font-size: var(--inkra-text-sm); color: var(--inkra-ink-muted); }
+.inkra-dependency-graph__footer { display: flex; align-items: center; gap: 8px; margin-top: auto; }
+.inkra-dependency-graph__icon-button { align-items: center; justify-content: center; padding: 10px; cursor: pointer; }
+.inkra-dependency-graph__card:focus-visible, .inkra-dependency-graph__title:focus-visible, .inkra-dependency-graph__icon-button:focus-visible { outline: 0; }
+.inkra-dependency-graph__focus { --inkra-accent-strong: var(--inkra-focus); position: absolute !important; inset: -5px; pointer-events: none; opacity: 0; }
+.inkra-dependency-graph__card:focus-visible > .inkra-dependency-graph__focus,
+.inkra-dependency-graph__card--custom:focus-visible .inkra-dependency-graph__focus,
+.inkra-dependency-graph__card:has(.inkra-dependency-graph__title:focus-visible) > .inkra-dependency-graph__focus,
+.inkra-dependency-graph__icon-button:focus-visible > .inkra-dependency-graph__focus { opacity: 1; }
+.inkra-dependency-graph__node[data-disabled] { opacity: .55; }
+.inkra-dependency-graph__title:disabled, .inkra-dependency-graph__icon-button:disabled { cursor: not-allowed; }
+.inkra-dependency-graph__status { font-size: var(--inkra-text-sm); color: var(--inkra-ink-muted); }
+.inkra-dependency-graph__node[data-status="completed"] .inkra-dependency-graph__status { color: var(--inkra-success); }
+.inkra-dependency-graph__node[data-status="available"] .inkra-dependency-graph__status,
+.inkra-dependency-graph__node[data-status="active"] .inkra-dependency-graph__status { color: var(--inkra-accent-strong); }
+.inkra-dependency-graph__highlight { position: absolute !important; inset: -3px; pointer-events: none; }
+.inkra-dependency-graph__node[data-dimmed], .inkra-dependency-graph__edge[data-dimmed] { opacity: .5; }
+.inkra-dependency-graph__edge { color: var(--inkra-ink-muted); }
+.inkra-dependency-graph__edge[data-highlighted], .inkra-dependency-graph__edge--highlighted { color: var(--inkra-accent-strong); }
+@media (forced-colors: active) {
+  .inkra-dependency-graph__card:focus-visible, .inkra-dependency-graph__title:focus-visible, .inkra-dependency-graph__icon-button:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: 4px; }
+  .inkra-dependency-graph__focus { display: none !important; }
+  .inkra-dependency-graph__node[data-dimmed], .inkra-dependency-graph__edge[data-dimmed] { opacity: 1; }
+}

package/dist/styles/journey-map.css

@@ -1,9 +1,11 @@
 .inkra-journey-map { min-width: 0; width: 100%; color: var(--inkra-ink); }
 .inkra-journey-map__viewport { position: relative; overflow: hidden; isolation: isolate; background: var(--inkra-paper); }
 .inkra-journey-map__host { position: absolute; inset: 0; background: transparent; font: inherit; }
-.inkra-journey-map__ink { position: absolute; inset: 0; pointer-events: none; z-index: 350; }
+.inkra-journey-map__ink { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 350; }
 .inkra-journey-map__tools { position: absolute; z-index: 600; inset-block-end: 9px; inset-inline-start: 9px; display: grid; gap: 4px; }
 .inkra-journey-map__marker { display: grid; place-items: center; }
+.inkra-journey-map__symbol, .inkra-journey-map__stop { display: block; width: 44px; height: 44px; }
+.inkra-journey-map__stop { pointer-events: none; }
 .inkra-journey-map__pin { position: absolute; top: 37px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 140px; text-align: center; color: var(--inkra-ink); font: 14px/1.4 var(--inkra-font-hand); }
 .inkra-journey-map__marker[aria-pressed="true"] .inkra-journey-map__pin { color: var(--inkra-accent-strong); }
 .inkra-journey-map__orientation { position: absolute; bottom: 18px; right: 18px; z-index: 600; display: flex; align-items: end; gap: 12px; pointer-events: none; }

package/dist/styles/markdown.css

@@ -1,4 +1,5 @@
 .inkra-markdown {
+  inline-size: 100%;
   color: var(--inkra-ink);
   font-family: var(--inkra-font-body);
   font-size: var(--inkra-text-md);
@@ -203,6 +204,7 @@
 .inkra-markdown__code-text > .inkra-pencil-text__source { font-family: inherit; }
 
 .inkra-markdown__code-frame {
+  inline-size: 100%;
   margin-block: 0 var(--inkra-space-4);
   max-width: 100%;
   min-width: 0;

package/dist/styles.css

@@ -7301,6 +7301,40 @@ div.inkra-choice-grid > .inkra-radio-group {
   .inkra-node-graph__control:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
 }
 
+.inkra-dependency-graph__node { position: relative; width: 100%; height: 100%; }
+.inkra-dependency-graph__anchor.react-flow__handle { position: absolute; width: 0; height: 0; min-width: 0; min-height: 0; border: 0; opacity: 0; pointer-events: none; }
+.inkra-dependency-graph__card, .inkra-dependency-graph__icon-button { box-sizing: border-box; width: 100%; height: 100%; padding: 14px 16px; border: 0; font: inherit; color: var(--inkra-ink); text-align: start; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
+.inkra-dependency-graph__card--custom { padding: 0; }
+.inkra-dependency-graph__header { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.inkra-dependency-graph__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
+.inkra-dependency-graph__title { appearance: none; background: none; border: 0; padding: 0; margin: 0; min-width: 0; flex: 1; font: inherit; color: inherit; text-align: start; font-weight: 600; cursor: pointer; }
+.inkra-dependency-graph__title > * { max-width: 100%; }
+.inkra-dependency-graph__actions { display: flex; align-items: center; flex: 0 0 auto; gap: 4px; margin-inline-start: auto; }
+.inkra-dependency-graph__body { min-height: 0; overflow: auto; font-size: var(--inkra-text-sm); color: var(--inkra-ink-muted); }
+.inkra-dependency-graph__footer { display: flex; align-items: center; gap: 8px; margin-top: auto; }
+.inkra-dependency-graph__icon-button { align-items: center; justify-content: center; padding: 10px; cursor: pointer; }
+.inkra-dependency-graph__card:focus-visible, .inkra-dependency-graph__title:focus-visible, .inkra-dependency-graph__icon-button:focus-visible { outline: 0; }
+.inkra-dependency-graph__focus { --inkra-accent-strong: var(--inkra-focus); position: absolute !important; inset: -5px; pointer-events: none; opacity: 0; }
+.inkra-dependency-graph__card:focus-visible > .inkra-dependency-graph__focus,
+.inkra-dependency-graph__card--custom:focus-visible .inkra-dependency-graph__focus,
+.inkra-dependency-graph__card:has(.inkra-dependency-graph__title:focus-visible) > .inkra-dependency-graph__focus,
+.inkra-dependency-graph__icon-button:focus-visible > .inkra-dependency-graph__focus { opacity: 1; }
+.inkra-dependency-graph__node[data-disabled] { opacity: .55; }
+.inkra-dependency-graph__title:disabled, .inkra-dependency-graph__icon-button:disabled { cursor: not-allowed; }
+.inkra-dependency-graph__status { font-size: var(--inkra-text-sm); color: var(--inkra-ink-muted); }
+.inkra-dependency-graph__node[data-status="completed"] .inkra-dependency-graph__status { color: var(--inkra-success); }
+.inkra-dependency-graph__node[data-status="available"] .inkra-dependency-graph__status,
+.inkra-dependency-graph__node[data-status="active"] .inkra-dependency-graph__status { color: var(--inkra-accent-strong); }
+.inkra-dependency-graph__highlight { position: absolute !important; inset: -3px; pointer-events: none; }
+.inkra-dependency-graph__node[data-dimmed], .inkra-dependency-graph__edge[data-dimmed] { opacity: .5; }
+.inkra-dependency-graph__edge { color: var(--inkra-ink-muted); }
+.inkra-dependency-graph__edge[data-highlighted], .inkra-dependency-graph__edge--highlighted { color: var(--inkra-accent-strong); }
+@media (forced-colors: active) {
+  .inkra-dependency-graph__card:focus-visible, .inkra-dependency-graph__title:focus-visible, .inkra-dependency-graph__icon-button:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: 4px; }
+  .inkra-dependency-graph__focus { display: none !important; }
+  .inkra-dependency-graph__node[data-dimmed], .inkra-dependency-graph__edge[data-dimmed] { opacity: 1; }
+}
+
 .inkra-overflow-list {
   --inkra-overflow-list-gap: var(--inkra-space-2);
 
@@ -8747,6 +8781,7 @@ div.inkra-choice-grid > .inkra-radio-group {
 }
 
 .inkra-markdown {
+  inline-size: 100%;
   color: var(--inkra-ink);
   font-family: var(--inkra-font-body);
   font-size: var(--inkra-text-md);
@@ -8951,6 +8986,7 @@ div.inkra-choice-grid > .inkra-radio-group {
 .inkra-markdown__code-text > .inkra-pencil-text__source { font-family: inherit; }
 
 .inkra-markdown__code-frame {
+  inline-size: 100%;
   margin-block: 0 var(--inkra-space-4);
   max-width: 100%;
   min-width: 0;
@@ -9984,9 +10020,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .inkra-journey-map { min-width: 0; width: 100%; color: var(--inkra-ink); }
 .inkra-journey-map__viewport { position: relative; overflow: hidden; isolation: isolate; background: var(--inkra-paper); }
 .inkra-journey-map__host { position: absolute; inset: 0; background: transparent; font: inherit; }
-.inkra-journey-map__ink { position: absolute; inset: 0; pointer-events: none; z-index: 350; }
+.inkra-journey-map__ink { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 350; }
 .inkra-journey-map__tools { position: absolute; z-index: 600; inset-block-end: 9px; inset-inline-start: 9px; display: grid; gap: 4px; }
 .inkra-journey-map__marker { display: grid; place-items: center; }
+.inkra-journey-map__symbol, .inkra-journey-map__stop { display: block; width: 44px; height: 44px; }
+.inkra-journey-map__stop { pointer-events: none; }
 .inkra-journey-map__pin { position: absolute; top: 37px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 140px; text-align: center; color: var(--inkra-ink); font: 14px/1.4 var(--inkra-font-hand); }
 .inkra-journey-map__marker[aria-pressed="true"] .inkra-journey-map__pin { color: var(--inkra-accent-strong); }
 .inkra-journey-map__orientation { position: absolute; bottom: 18px; right: 18px; z-index: 600; display: flex; align-items: end; gap: 12px; pointer-events: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkra/react",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "Hand-drawn React controls with native semantics and deterministic decoration.",
   "type": "module",
   "license": "MIT",
@@ -489,7 +489,13 @@
     "./styles/tree-select.css": "./dist/styles/tree-select.css",
     "./styles/typewriter.css": "./dist/styles/typewriter.css",
     "./styles/upload.css": "./dist/styles/upload.css",
-    "./styles/virtual-list.css": "./dist/styles/virtual-list.css"
+    "./styles/virtual-list.css": "./dist/styles/virtual-list.css",
+    "./dependency-graph": {
+      "types": "./dist/dependency-graph/index.d.ts",
+      "import": "./dist/dependency-graph/index.js",
+      "default": "./dist/dependency-graph/index.js"
+    },
+    "./styles/dependency-graph.css": "./dist/styles/dependency-graph.css"
   },
   "files": [
     "dist",