@pixerate/editor-react 0.42.0 → 0.43.0

package/dist/canvas/index.d.cts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import React__default from 'react';
 import { AgentPresence } from '@pixerate/editor/agent';
 import * as _pixerate_editor_canvas from '@pixerate/editor/canvas';
-import { CanvasNode, CanvasEdge, IncrementalLayoutOptions, XYPosition, GraphDifferences, Rect, CanvasLayoutOptions, Side, PlaceBesideOptions, getCenteredNodePosition, CanvasDockingCallbacks, DockStrategy, ExplodeNodeOptions, CollapseNodeOptions, ExplosionSnapshot, ArrangeHistoryTarget, SnapGuidesOptions, NodeRectOptions, AutoLayoutOptions, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, FreehandTool, FreehandStrokeStyle, FreehandStroke, FreehandDrawOptions, ShapeDescription, AutoLayoutMeasure, CanvasTokenOptions, AnimationHistoryTarget, Clock, AnimationLoopMode, AnimatableProperty, CanvasComponentSyncOptions, CanvasComponentsController, DiagramLayoutOptions, MermaidFlowNode, MermaidFlowEdge, DiagramLayout, DiagramSvgOptions } from '@pixerate/editor/canvas';
+import { CanvasNode, CanvasEdge, IncrementalLayoutOptions, XYPosition, GraphDifferences, Rect, CanvasLayoutOptions, Side, PlaceBesideOptions, getCenteredNodePosition, CanvasDockingCallbacks, DockStrategy, ExplodeNodeOptions, CollapseNodeOptions, ExplosionSnapshot, ArrangeHistoryTarget, SnapGuidesOptions, NodeRectOptions, AutoLayoutOptions, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, FreehandTool, FreehandStrokeStyle, FreehandStroke, FreehandDrawOptions, ShapeDescription, AutoLayoutMeasure, CanvasTokenOptions, AnimationHistoryTarget, Clock, AnimationLoopMode, AnimatableProperty, CanvasComponentSyncOptions, CanvasComponentsController, DiagramScene, DiagramLayoutOptions, DiagramSceneTheme, MermaidFlowNode, MermaidFlowEdge, DiagramLayout, DiagramSvgOptions } from '@pixerate/editor/canvas';
 export { ANIMATABLE_PROPERTIES, ANIMATION_DATA_KEY, ANIMATION_EASING_LABELS, ANIMATION_EASING_PRESETS, ANIMATION_TIME_EPSILON, AUTO_LAYOUT_DATA_KEY, AddCanvasVariantOptions, AlignEdge, AnimatableProperty, AnimateNodeOptions, AnimationDocument, AnimationEasing, AnimationEasingPreset, AnimationEditError, AnimationEditErrorCode, AnimationFrame, AnimationHistoryTarget, AnimationKeyframe, AnimationKeyframeClipboard, AnimationLoopMode, AnimationMotionPath, AnimationOverrides, AnimationPlayer, AnimationPlayerOptions, AnimationPlayerState, AnimationTrack, AnimationValue, AnimationValueType, ArrangeShortcutBinding, AutoLayout, AutoLayoutAlignContent, AutoLayoutAlignCross, AutoLayoutAlignMain, AutoLayoutCellAlign, AutoLayoutChild, AutoLayoutConstraints, AutoLayoutGrid, AutoLayoutGridArea, AutoLayoutGridCell, AutoLayoutGridGeometry, AutoLayoutGridTrack, AutoLayoutHorizontalConstraint, AutoLayoutInsertTarget, AutoLayoutMeasure, AutoLayoutMode, AutoLayoutOptions, AutoLayoutPadding, AutoLayoutSize, AutoLayoutSizing, AutoLayoutSizingPair, AutoLayoutVerticalConstraint, BezierCommand, BezierPath, BezierPathInput, CANVAS_COMPONENT_DRAG_TYPE, CANVAS_GRADIENT_PRESETS, CANVAS_TOKEN_PROPERTIES, CHILD_LAYOUT_DATA_KEY, CONNECTION_LINE_TYPES, CSS_ANIMATION_PROPERTIES, CUBIC_BEZIER_PRESETS, CanvasAnimationController, CanvasAnimationControllerOptions, CanvasAnimationState, CanvasArrangeAction, CanvasAutoLayoutController, CanvasAutoLayoutControllerOptions, CanvasClipboardPayload, CanvasComponentInfo, CanvasComponentPropertyDef, CanvasComponentPropertyField, CanvasComponentResult, CanvasComponentSetInfo, CanvasComponentSyncOptions, CanvasComponentsController, CanvasComponentsControllerOptions, CanvasConnectionLineType, CanvasDockingCallbacks, CanvasDrawControllerOptions, CanvasEdge, CanvasGradientDef, CanvasHeightOptions, CanvasInstanceInfo, CanvasLayoutOptions, CanvasLinearGradient, CanvasNode, CanvasNodeUpdate, CanvasRadialGradient, CanvasScene, CanvasScenesState, CanvasScenesStore, CanvasTokenBindingInfo, CanvasTokenOptions, CanvasTokenProperty, CanvasViewport, Clock, CollapseNodeOptions, CombineShapeNodesOptions, CombineShapeNodesRefusal, CombineShapeNodesResult, ConnectorSnap, ConnectorSnapTarget, CssAnimationExport, CssExportOptions, CubicBezierEasing, CubicSegment, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DividePathsResult, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, FreehandStroke, FreehandStrokeStyle, FreehandTool, GradientStop, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, KeyframeDragState, KeyframePatch, KeyframeRef, KeyframeSnap, MAX_KEYFRAME_REFS, ManualClock, MeasureGuide, MeasureSelectionOptions, MeasureSelectionResult, MultiPolygon, NodeAnimation, NodeTransition, OffsetPathOptions, OffsetShapeNodesOptions, OklabColor, OutlineShapeStrokesOptions, OutlineStrokeOptions, PathBooleanResult, PathCommand, PathOperand, PathOperandInput, PathOpsOptions, PathShape, PlaceBesideOptions, Point, PolygonBooleanOperation, PolygonBooleanOptions, PolygonFillRule, PolygonInput, PolygonOperand, PolygonPiece, PolygonRing, PolygonToPathOptions, PolygonWithHoles, Position, RESIZE_HANDLES, Rect, RectShape, ReflowDisplacementOptions, RegularPolygonShape, ResizeHandle, SHAPE_DATA_KEY, SHAPE_KINDS, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, SetCanvasVariantPropertiesOptions, ShapeDescription, ShapeKind, ShapeNodePolygonOptions, ShapeOperation, ShapePaint, ShapePathEditOperation, ShapePathEditRefusal, ShapePathEditResult, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, SnapNodeResizeOptions, SnapNodeResizeResult, SnapResizeOptions, SnapResizeResult, SnapResult, SpringEasing, StarShape, StrokeCap, StrokeJoin, StrokeToShapeNodeOptions, SvgGradientDef, SvgGradientStop, TOKEN_BINDINGS_DATA_KEY, TOKEN_MODES_DATA_KEY, TimelineKeyframe, TimelineRow, TrajectoryFunction, TrajectoryPoint, WebAnimationSpec, XYPosition, ZOrderOperation, addCanvasVariant, addKeyframesAtTime, alignNodes, angleToSvgLinearCoords, animateNode, applyAnimation, applyAnimationOverrides, applyConstraints, applyNodeUpdates, applyShapeCombination, applyShapeReplacement, bezierPathArea, bezierPathBounds, bezierPathLength, bezierPathPointAtLength, bezierPathSignedArea, bezierPathToSvg, bindCanvasComponentProperty, bindCanvasToken, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canOffsetShapeNodes, canOutlineShapeNodeStrokes, canvasHeight, centerNodes, centre, clampAnimationValue, clampLayoutSize, combineCanvasComponentsAsVariants, combineShapeNodes, computeNodesBoundingBox, computeSnapGuides, connectedOnly, copyKeyframes, countPathSegments, createAnimationPlayer, createBezierTrajectory, createCanvasAnimationController, createCanvasAutoLayoutController, createCanvasComponent, createCanvasComponentsController, createCanvasDrawController, createCanvasInstance, createCanvasScenesStore, createDefaultStrokeStyle, createFanOutTrajectory, createGuideIndex, createNodeGuideIndex, cubicBezierAt, cubicPointAt, cubicsToPathData, dashContours, defaultEasing, deleteKeyframes, detachCanvasInstance, detachTokenBindings, distanceToBezierPath, distributeNodes, dividePaths, dividePolygons, easingFromInfluence, easingLabel, easingToCss, ensureLayout, estimateCanvasHeight, estimateNodeSize, evaluateAnimation, evaluateEasing, evaluateTrack, excludePaths, exportCssAnimation, findConnectorSnap, findStrokesAtPoint, fitCubicRun, fitCubics, fitFreehandPath, fitPathData, fitViewportToNodes, fitViewportToRect, flattenSvgPath, flowSide, formatAnimationTime, formatOklab, getAbsolutePosition, getAnimatableProperty, getAnimatedProperties, getAnimatedValue, getAnimationDuration, getAnimationTrack, getAutoLayout, getAutoLayoutGrid, getAutoLayoutInsertTarget, getBindableTokenProperties, getCanvasComponentDragId, getCanvasTokenProperty, getCenteredNodePosition, getChildLayout, getComponentSourceId, getCssPropertyAnimations, getEffectiveTokenModes, getFlowChildren, getInstanceData, getInstanceStatus, getKeyframeTimes, getLayoutParent, getLayoutSizing, getLayoutedNodes, getNextVariantValues, getNodeAnimation, getNodeOverrides, getNodeRect, getNodeShape, getNodeSize, getNodeTokenBindings, getNodeTokenModes, getResizingNodeRect, getShapeRenderData, getShapeSvg, getTimelineRows, getTimelineTicks, getTokenPropertyScope, getTokensForProperty, gradientToSvgDef, handlePoint, hasVisibleStroke, inferResizeHandle, inspectCanvasInstance, inspectNodeTokens, interpolateAnimationValue, intersectPaths, intersectPolygons, invertNodeUpdates, isAnimationEasing, isAnimationKeyframe, isAutoLayoutFrame, isCanvasComponent, isCanvasComponentSet, isCanvasGradient, isCanvasInstance, isCssExportExact, isEventFromTextInput, isKeyframeSelected, isLocked, isMeasureModifierHeld, isNodeAnimated, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, listCanvasComponents, lockNodes, makeSizingCoherent, matchArrangeShortcut, matchSize, measureBetween, measureLabel, measureSelection, measureToLine, mergeNodeUpdates, mixColorsOklab, moveKeyframes, moveLayoutChild, multiPolygonArea, multiPolygonBounds, nearestHandlePositions, normalizeBezierPath, normalizeKeyframes, offsetPath, offsetShapeNodes, oklabToRgb, oppositePosition, outlineShapeNodeStrokes, outlineStroke, overlaps, parseCanvasClipboardData, parseCanvasScenes, parseCssEasing, parseCssGradient, parseKeyframeClipboard, parseOklab, parseSvgPath, pasteKeyframes, pathBoolean, placeBeside, playWebAnimations, pointInBezierPath, pointInMultiPolygon, pointInRings, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, pruneCanvasTokenModes, pushCanvasInstanceOverrides, readAnimatableValue, readNodeStyleProperty, readStyleSize, realClock, recordAnimationChanges, relayoutUpdates, remapPastedNodes, removeCanvasVariant, removeTrack, renameCanvasVariantProperty, renameCanvasVariantValue, reorderNodes, repositionNodesTo, resetCanvasInstanceOverrides, resizeHandleAxes, resolveCanvasGradient, resolveCanvasTokens, resolveEasing, resolvePadding, restoreCanvasMainComponent, revertShapeCombination, rgbToOklab, ringSignedArea, runMultiNodeTransition, sampleAnimationFrames, scaleKeyframes, serializeCanvasNodes, setCanvasComponentProperty, setCanvasInstanceProperties, setCanvasTokenMode, setCanvasVariantProperties, setKeyframe, setKeyframeEasing, setMotionPath, setTrackEnabled, shapeNodeToBezierPath, shapeNodeToPolygon, shapeToBezierPath, shapeToPolygon, sideToPosition, simplifyRing, snapKeyframeDelta, snapNodeDrag, snapNodeResize, snapResize, snapTimeToFrame, snapToGrid, springAt, streamlinePoints, strokeOutlineRings, strokePointsToPathData, strokeToShapeNode, subtractPaths, subtractPolygons, swapCanvasInstance, syncAllCanvasInstances, syncCanvasComponents, syncCanvasInstance, timeToX, toBezierPath, toWebAnimations, toggleLockNodes, transformBezierPath, unionPolygons, unitePaths, unlockNodes, updateKeyframe, withNodeAnimation, withStyleSize, wouldCreateComponentCycle, wrapAnimationTime, writeNodeStyleProperty, xToTime, xorPolygons } from '@pixerate/editor/canvas';
 import { TokenState, TokenStore, TokenModeContext } from '@pixerate/editor/tokens';
 import { DiagramControllerOptions, DiagramController, DiagramState, MermaidDocument, EditOp, DiagramActionResult, DiagramPlacement, PresenceClock, PresenceStore, DiagramDirector, PresenceState } from '@pixerate/editor/diagram';
@@ -766,9 +766,39 @@ interface CanvasInstanceInspectorProps<TNode extends CanvasNode = CanvasNode> {
  */
 declare function CanvasInstanceInspector<TNode extends CanvasNode = CanvasNode>({ nodes, nodeId, components, onError, className }: CanvasInstanceInspectorProps<TNode>): React__default.JSX.Element | null;
 
+interface MermaidFamilySceneProps {
+    /** The family's picture (`useMermaidDiagram().scene`, or `mermaidToScene`). */
+    scene: DiagramScene;
+    /** Room around the drawing in px (default 16). */
+    padding?: number;
+    /** Marks with a target get a pointer and report clicks (default true). */
+    interactive?: boolean;
+    /** A mark was clicked: its node, edge, group or `::title` target (null: the background). */
+    onSelect?: (target: string | null, event: React__default.MouseEvent) => void;
+    /** A mark was double-clicked (rename it with `diagramRenameOp`). */
+    onOpen?: (target: string, event: React__default.MouseEvent) => void;
+    /** Colour of selected marks' outline (default `var(--primary, #2563eb)`). */
+    selectionColor?: string;
+    /** Arrow head colour (default `var(--muted-foreground, #64748b)`). */
+    markerColor?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+    /** Accessible name (default: the family). */
+    title?: string;
+}
+/**
+ * Headless renderer for a Mermaid family drawn as its own picture (pie, Gantt, sequence,
+ * quadrant, timeline, journey, gitGraph, mindmap, C4, architecture, XY and radar charts):
+ * one SVG of the scene's marks, sized to the drawing. Clicking a mark selects its node,
+ * edge or group; double-clicking opens it for renaming.
+ */
+declare function MermaidFamilyScene({ scene, padding, interactive, onSelect, onOpen, selectionColor, markerColor, className, style, title }: MermaidFamilySceneProps): React__default.JSX.Element;
+
 interface UseMermaidDiagramOptions extends DiagramControllerOptions {
     /** Layout spacing and node measuring for new nodes (stored positions always win). */
     layoutOptions?: DiagramLayoutOptions;
+    /** Colours for families drawn as scenes (default: the page's CSS colour variables). */
+    sceneTheme?: Partial<DiagramSceneTheme>;
 }
 type Placed = {
     id: string;
@@ -788,6 +818,12 @@ interface UseMermaidDiagramResult {
     nodes: MermaidFlowNode[];
     edges: MermaidFlowEdge[];
     layout: DiagramLayout;
+    /**
+     * The family's own picture (pie, Gantt, sequence, XY, radar…) with the selection marked;
+     * null for families drawn as nodes and edges (flowchart, state, class, ER) and text-only
+     * ones. Render it with `MermaidFamilyScene`.
+     */
+    scene: DiagramScene | null;
     apply: (ops: EditOp | EditOp[], label?: string) => DiagramActionResult;
     /** Replaces the source; `clearHistory` when opening a different diagram. */
     load: (source: string, options?: {
@@ -799,6 +835,8 @@ interface UseMermaidDiagramResult {
     /** Removes nodes / groups (with their edges) and edges by id, as one undo step. */
     remove: (ids: readonly string[]) => DiagramActionResult;
     rename: (id: string, label: string) => DiagramActionResult;
+    /** Renames what a scene mark targets: the title (`::title`), a group, an edge or a node. */
+    renameTarget: (target: string, label: string) => DiagramActionResult | null;
     select: (ids: readonly string[]) => void;
     undo: () => void;
     redo: () => void;
@@ -810,7 +848,9 @@ declare function useDiagramState(controller: DiagramController): DiagramState;
  * one from options), lays it out and returns canvas nodes and edges with bound edits. Every
  * edit rewrites only the statements it touches; positions go into `%% @pixerate`.
  */
-declare function useMermaidDiagram(controllerOrOptions?: DiagramController | UseMermaidDiagramOptions): UseMermaidDiagramResult;
+declare function useMermaidDiagram(controllerOrOptions?: DiagramController | UseMermaidDiagramOptions, 
+/** Layout and scene colours when passing a controller (options carry them otherwise). */
+view?: Pick<UseMermaidDiagramOptions, 'layoutOptions' | 'sceneTheme'>): UseMermaidDiagramResult;
 interface UseMermaidStreamOptions extends DiagramLayoutOptions {
     /** True once the whole source has arrived (unconnected nodes are shown then). */
     complete?: boolean;
@@ -915,4 +955,4 @@ interface DiagramPresenceLayerProps {
 /** Agent cursors and their notes over a canvas, from a `PresenceStore` (see `DiagramDirector`). */
 declare function DiagramPresenceLayer({ presence, viewport, className }: DiagramPresenceLayerProps): React__default.JSX.Element | null;
 
-export { AgentPresenceLayer, type AgentPresenceLayerProps, AnimationTimeline, type AnimationTimelineProps, type CanvasAnimation, type CanvasArrange, type CanvasAutoLayout, type CanvasComponents, CanvasComponentsPanel, type CanvasComponentsPanelActions, type CanvasComponentsPanelProps, type CanvasDraw, type CanvasDrawActions, CanvasDrawLayer, type CanvasDrawLayerProps, type CanvasDrawState, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, CanvasInstanceInspector, type CanvasInstanceInspectorActions, type CanvasInstanceInspectorProps, type CanvasMeasure, type CanvasScenes, type CanvasTokens, DiagramPresenceLayer, type DiagramPresenceLayerProps, MermaidDiagramGroup, MermaidDiagramNode, type MermaidDiagramNodeData, type MermaidDiagramNodeProps, MermaidThumbnail, type MermaidThumbnailProps, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasAnimationOptions, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasComponentsOptions, type UseCanvasDockingOptions, type UseCanvasDrawOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseCanvasTokensOptions, type UseDiagramDirectorOptions, type UseMermaidDiagramOptions, type UseMermaidDiagramResult, type UseMermaidStreamOptions, type UseMermaidStreamResult, type UseStreamingCanvasOptions, mermaidNodeStyle, useCanvasAnimation, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasComponents, useCanvasDocking, useCanvasDraw, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useDiagramDirector, useDiagramState, useMermaidDiagram, useMermaidStream, usePresenceState, useStreamingCanvas };
+export { AgentPresenceLayer, type AgentPresenceLayerProps, AnimationTimeline, type AnimationTimelineProps, type CanvasAnimation, type CanvasArrange, type CanvasAutoLayout, type CanvasComponents, CanvasComponentsPanel, type CanvasComponentsPanelActions, type CanvasComponentsPanelProps, type CanvasDraw, type CanvasDrawActions, CanvasDrawLayer, type CanvasDrawLayerProps, type CanvasDrawState, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, CanvasInstanceInspector, type CanvasInstanceInspectorActions, type CanvasInstanceInspectorProps, type CanvasMeasure, type CanvasScenes, type CanvasTokens, DiagramPresenceLayer, type DiagramPresenceLayerProps, MermaidDiagramGroup, MermaidDiagramNode, type MermaidDiagramNodeData, type MermaidDiagramNodeProps, MermaidFamilyScene, type MermaidFamilySceneProps, MermaidThumbnail, type MermaidThumbnailProps, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasAnimationOptions, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasComponentsOptions, type UseCanvasDockingOptions, type UseCanvasDrawOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseCanvasTokensOptions, type UseDiagramDirectorOptions, type UseMermaidDiagramOptions, type UseMermaidDiagramResult, type UseMermaidStreamOptions, type UseMermaidStreamResult, type UseStreamingCanvasOptions, mermaidNodeStyle, useCanvasAnimation, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasComponents, useCanvasDocking, useCanvasDraw, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useDiagramDirector, useDiagramState, useMermaidDiagram, useMermaidStream, usePresenceState, useStreamingCanvas };

package/dist/canvas/index.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import React__default from 'react';
 import { AgentPresence } from '@pixerate/editor/agent';
 import * as _pixerate_editor_canvas from '@pixerate/editor/canvas';
-import { CanvasNode, CanvasEdge, IncrementalLayoutOptions, XYPosition, GraphDifferences, Rect, CanvasLayoutOptions, Side, PlaceBesideOptions, getCenteredNodePosition, CanvasDockingCallbacks, DockStrategy, ExplodeNodeOptions, CollapseNodeOptions, ExplosionSnapshot, ArrangeHistoryTarget, SnapGuidesOptions, NodeRectOptions, AutoLayoutOptions, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, FreehandTool, FreehandStrokeStyle, FreehandStroke, FreehandDrawOptions, ShapeDescription, AutoLayoutMeasure, CanvasTokenOptions, AnimationHistoryTarget, Clock, AnimationLoopMode, AnimatableProperty, CanvasComponentSyncOptions, CanvasComponentsController, DiagramLayoutOptions, MermaidFlowNode, MermaidFlowEdge, DiagramLayout, DiagramSvgOptions } from '@pixerate/editor/canvas';
+import { CanvasNode, CanvasEdge, IncrementalLayoutOptions, XYPosition, GraphDifferences, Rect, CanvasLayoutOptions, Side, PlaceBesideOptions, getCenteredNodePosition, CanvasDockingCallbacks, DockStrategy, ExplodeNodeOptions, CollapseNodeOptions, ExplosionSnapshot, ArrangeHistoryTarget, SnapGuidesOptions, NodeRectOptions, AutoLayoutOptions, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, FreehandTool, FreehandStrokeStyle, FreehandStroke, FreehandDrawOptions, ShapeDescription, AutoLayoutMeasure, CanvasTokenOptions, AnimationHistoryTarget, Clock, AnimationLoopMode, AnimatableProperty, CanvasComponentSyncOptions, CanvasComponentsController, DiagramScene, DiagramLayoutOptions, DiagramSceneTheme, MermaidFlowNode, MermaidFlowEdge, DiagramLayout, DiagramSvgOptions } from '@pixerate/editor/canvas';
 export { ANIMATABLE_PROPERTIES, ANIMATION_DATA_KEY, ANIMATION_EASING_LABELS, ANIMATION_EASING_PRESETS, ANIMATION_TIME_EPSILON, AUTO_LAYOUT_DATA_KEY, AddCanvasVariantOptions, AlignEdge, AnimatableProperty, AnimateNodeOptions, AnimationDocument, AnimationEasing, AnimationEasingPreset, AnimationEditError, AnimationEditErrorCode, AnimationFrame, AnimationHistoryTarget, AnimationKeyframe, AnimationKeyframeClipboard, AnimationLoopMode, AnimationMotionPath, AnimationOverrides, AnimationPlayer, AnimationPlayerOptions, AnimationPlayerState, AnimationTrack, AnimationValue, AnimationValueType, ArrangeShortcutBinding, AutoLayout, AutoLayoutAlignContent, AutoLayoutAlignCross, AutoLayoutAlignMain, AutoLayoutCellAlign, AutoLayoutChild, AutoLayoutConstraints, AutoLayoutGrid, AutoLayoutGridArea, AutoLayoutGridCell, AutoLayoutGridGeometry, AutoLayoutGridTrack, AutoLayoutHorizontalConstraint, AutoLayoutInsertTarget, AutoLayoutMeasure, AutoLayoutMode, AutoLayoutOptions, AutoLayoutPadding, AutoLayoutSize, AutoLayoutSizing, AutoLayoutSizingPair, AutoLayoutVerticalConstraint, BezierCommand, BezierPath, BezierPathInput, CANVAS_COMPONENT_DRAG_TYPE, CANVAS_GRADIENT_PRESETS, CANVAS_TOKEN_PROPERTIES, CHILD_LAYOUT_DATA_KEY, CONNECTION_LINE_TYPES, CSS_ANIMATION_PROPERTIES, CUBIC_BEZIER_PRESETS, CanvasAnimationController, CanvasAnimationControllerOptions, CanvasAnimationState, CanvasArrangeAction, CanvasAutoLayoutController, CanvasAutoLayoutControllerOptions, CanvasClipboardPayload, CanvasComponentInfo, CanvasComponentPropertyDef, CanvasComponentPropertyField, CanvasComponentResult, CanvasComponentSetInfo, CanvasComponentSyncOptions, CanvasComponentsController, CanvasComponentsControllerOptions, CanvasConnectionLineType, CanvasDockingCallbacks, CanvasDrawControllerOptions, CanvasEdge, CanvasGradientDef, CanvasHeightOptions, CanvasInstanceInfo, CanvasLayoutOptions, CanvasLinearGradient, CanvasNode, CanvasNodeUpdate, CanvasRadialGradient, CanvasScene, CanvasScenesState, CanvasScenesStore, CanvasTokenBindingInfo, CanvasTokenOptions, CanvasTokenProperty, CanvasViewport, Clock, CollapseNodeOptions, CombineShapeNodesOptions, CombineShapeNodesRefusal, CombineShapeNodesResult, ConnectorSnap, ConnectorSnapTarget, CssAnimationExport, CssExportOptions, CubicBezierEasing, CubicSegment, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DividePathsResult, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, FreehandStroke, FreehandStrokeStyle, FreehandTool, GradientStop, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, KeyframeDragState, KeyframePatch, KeyframeRef, KeyframeSnap, MAX_KEYFRAME_REFS, ManualClock, MeasureGuide, MeasureSelectionOptions, MeasureSelectionResult, MultiPolygon, NodeAnimation, NodeTransition, OffsetPathOptions, OffsetShapeNodesOptions, OklabColor, OutlineShapeStrokesOptions, OutlineStrokeOptions, PathBooleanResult, PathCommand, PathOperand, PathOperandInput, PathOpsOptions, PathShape, PlaceBesideOptions, Point, PolygonBooleanOperation, PolygonBooleanOptions, PolygonFillRule, PolygonInput, PolygonOperand, PolygonPiece, PolygonRing, PolygonToPathOptions, PolygonWithHoles, Position, RESIZE_HANDLES, Rect, RectShape, ReflowDisplacementOptions, RegularPolygonShape, ResizeHandle, SHAPE_DATA_KEY, SHAPE_KINDS, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, SetCanvasVariantPropertiesOptions, ShapeDescription, ShapeKind, ShapeNodePolygonOptions, ShapeOperation, ShapePaint, ShapePathEditOperation, ShapePathEditRefusal, ShapePathEditResult, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, SnapNodeResizeOptions, SnapNodeResizeResult, SnapResizeOptions, SnapResizeResult, SnapResult, SpringEasing, StarShape, StrokeCap, StrokeJoin, StrokeToShapeNodeOptions, SvgGradientDef, SvgGradientStop, TOKEN_BINDINGS_DATA_KEY, TOKEN_MODES_DATA_KEY, TimelineKeyframe, TimelineRow, TrajectoryFunction, TrajectoryPoint, WebAnimationSpec, XYPosition, ZOrderOperation, addCanvasVariant, addKeyframesAtTime, alignNodes, angleToSvgLinearCoords, animateNode, applyAnimation, applyAnimationOverrides, applyConstraints, applyNodeUpdates, applyShapeCombination, applyShapeReplacement, bezierPathArea, bezierPathBounds, bezierPathLength, bezierPathPointAtLength, bezierPathSignedArea, bezierPathToSvg, bindCanvasComponentProperty, bindCanvasToken, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canOffsetShapeNodes, canOutlineShapeNodeStrokes, canvasHeight, centerNodes, centre, clampAnimationValue, clampLayoutSize, combineCanvasComponentsAsVariants, combineShapeNodes, computeNodesBoundingBox, computeSnapGuides, connectedOnly, copyKeyframes, countPathSegments, createAnimationPlayer, createBezierTrajectory, createCanvasAnimationController, createCanvasAutoLayoutController, createCanvasComponent, createCanvasComponentsController, createCanvasDrawController, createCanvasInstance, createCanvasScenesStore, createDefaultStrokeStyle, createFanOutTrajectory, createGuideIndex, createNodeGuideIndex, cubicBezierAt, cubicPointAt, cubicsToPathData, dashContours, defaultEasing, deleteKeyframes, detachCanvasInstance, detachTokenBindings, distanceToBezierPath, distributeNodes, dividePaths, dividePolygons, easingFromInfluence, easingLabel, easingToCss, ensureLayout, estimateCanvasHeight, estimateNodeSize, evaluateAnimation, evaluateEasing, evaluateTrack, excludePaths, exportCssAnimation, findConnectorSnap, findStrokesAtPoint, fitCubicRun, fitCubics, fitFreehandPath, fitPathData, fitViewportToNodes, fitViewportToRect, flattenSvgPath, flowSide, formatAnimationTime, formatOklab, getAbsolutePosition, getAnimatableProperty, getAnimatedProperties, getAnimatedValue, getAnimationDuration, getAnimationTrack, getAutoLayout, getAutoLayoutGrid, getAutoLayoutInsertTarget, getBindableTokenProperties, getCanvasComponentDragId, getCanvasTokenProperty, getCenteredNodePosition, getChildLayout, getComponentSourceId, getCssPropertyAnimations, getEffectiveTokenModes, getFlowChildren, getInstanceData, getInstanceStatus, getKeyframeTimes, getLayoutParent, getLayoutSizing, getLayoutedNodes, getNextVariantValues, getNodeAnimation, getNodeOverrides, getNodeRect, getNodeShape, getNodeSize, getNodeTokenBindings, getNodeTokenModes, getResizingNodeRect, getShapeRenderData, getShapeSvg, getTimelineRows, getTimelineTicks, getTokenPropertyScope, getTokensForProperty, gradientToSvgDef, handlePoint, hasVisibleStroke, inferResizeHandle, inspectCanvasInstance, inspectNodeTokens, interpolateAnimationValue, intersectPaths, intersectPolygons, invertNodeUpdates, isAnimationEasing, isAnimationKeyframe, isAutoLayoutFrame, isCanvasComponent, isCanvasComponentSet, isCanvasGradient, isCanvasInstance, isCssExportExact, isEventFromTextInput, isKeyframeSelected, isLocked, isMeasureModifierHeld, isNodeAnimated, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, listCanvasComponents, lockNodes, makeSizingCoherent, matchArrangeShortcut, matchSize, measureBetween, measureLabel, measureSelection, measureToLine, mergeNodeUpdates, mixColorsOklab, moveKeyframes, moveLayoutChild, multiPolygonArea, multiPolygonBounds, nearestHandlePositions, normalizeBezierPath, normalizeKeyframes, offsetPath, offsetShapeNodes, oklabToRgb, oppositePosition, outlineShapeNodeStrokes, outlineStroke, overlaps, parseCanvasClipboardData, parseCanvasScenes, parseCssEasing, parseCssGradient, parseKeyframeClipboard, parseOklab, parseSvgPath, pasteKeyframes, pathBoolean, placeBeside, playWebAnimations, pointInBezierPath, pointInMultiPolygon, pointInRings, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, pruneCanvasTokenModes, pushCanvasInstanceOverrides, readAnimatableValue, readNodeStyleProperty, readStyleSize, realClock, recordAnimationChanges, relayoutUpdates, remapPastedNodes, removeCanvasVariant, removeTrack, renameCanvasVariantProperty, renameCanvasVariantValue, reorderNodes, repositionNodesTo, resetCanvasInstanceOverrides, resizeHandleAxes, resolveCanvasGradient, resolveCanvasTokens, resolveEasing, resolvePadding, restoreCanvasMainComponent, revertShapeCombination, rgbToOklab, ringSignedArea, runMultiNodeTransition, sampleAnimationFrames, scaleKeyframes, serializeCanvasNodes, setCanvasComponentProperty, setCanvasInstanceProperties, setCanvasTokenMode, setCanvasVariantProperties, setKeyframe, setKeyframeEasing, setMotionPath, setTrackEnabled, shapeNodeToBezierPath, shapeNodeToPolygon, shapeToBezierPath, shapeToPolygon, sideToPosition, simplifyRing, snapKeyframeDelta, snapNodeDrag, snapNodeResize, snapResize, snapTimeToFrame, snapToGrid, springAt, streamlinePoints, strokeOutlineRings, strokePointsToPathData, strokeToShapeNode, subtractPaths, subtractPolygons, swapCanvasInstance, syncAllCanvasInstances, syncCanvasComponents, syncCanvasInstance, timeToX, toBezierPath, toWebAnimations, toggleLockNodes, transformBezierPath, unionPolygons, unitePaths, unlockNodes, updateKeyframe, withNodeAnimation, withStyleSize, wouldCreateComponentCycle, wrapAnimationTime, writeNodeStyleProperty, xToTime, xorPolygons } from '@pixerate/editor/canvas';
 import { TokenState, TokenStore, TokenModeContext } from '@pixerate/editor/tokens';
 import { DiagramControllerOptions, DiagramController, DiagramState, MermaidDocument, EditOp, DiagramActionResult, DiagramPlacement, PresenceClock, PresenceStore, DiagramDirector, PresenceState } from '@pixerate/editor/diagram';
@@ -766,9 +766,39 @@ interface CanvasInstanceInspectorProps<TNode extends CanvasNode = CanvasNode> {
  */
 declare function CanvasInstanceInspector<TNode extends CanvasNode = CanvasNode>({ nodes, nodeId, components, onError, className }: CanvasInstanceInspectorProps<TNode>): React__default.JSX.Element | null;
 
+interface MermaidFamilySceneProps {
+    /** The family's picture (`useMermaidDiagram().scene`, or `mermaidToScene`). */
+    scene: DiagramScene;
+    /** Room around the drawing in px (default 16). */
+    padding?: number;
+    /** Marks with a target get a pointer and report clicks (default true). */
+    interactive?: boolean;
+    /** A mark was clicked: its node, edge, group or `::title` target (null: the background). */
+    onSelect?: (target: string | null, event: React__default.MouseEvent) => void;
+    /** A mark was double-clicked (rename it with `diagramRenameOp`). */
+    onOpen?: (target: string, event: React__default.MouseEvent) => void;
+    /** Colour of selected marks' outline (default `var(--primary, #2563eb)`). */
+    selectionColor?: string;
+    /** Arrow head colour (default `var(--muted-foreground, #64748b)`). */
+    markerColor?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+    /** Accessible name (default: the family). */
+    title?: string;
+}
+/**
+ * Headless renderer for a Mermaid family drawn as its own picture (pie, Gantt, sequence,
+ * quadrant, timeline, journey, gitGraph, mindmap, C4, architecture, XY and radar charts):
+ * one SVG of the scene's marks, sized to the drawing. Clicking a mark selects its node,
+ * edge or group; double-clicking opens it for renaming.
+ */
+declare function MermaidFamilyScene({ scene, padding, interactive, onSelect, onOpen, selectionColor, markerColor, className, style, title }: MermaidFamilySceneProps): React__default.JSX.Element;
+
 interface UseMermaidDiagramOptions extends DiagramControllerOptions {
     /** Layout spacing and node measuring for new nodes (stored positions always win). */
     layoutOptions?: DiagramLayoutOptions;
+    /** Colours for families drawn as scenes (default: the page's CSS colour variables). */
+    sceneTheme?: Partial<DiagramSceneTheme>;
 }
 type Placed = {
     id: string;
@@ -788,6 +818,12 @@ interface UseMermaidDiagramResult {
     nodes: MermaidFlowNode[];
     edges: MermaidFlowEdge[];
     layout: DiagramLayout;
+    /**
+     * The family's own picture (pie, Gantt, sequence, XY, radar…) with the selection marked;
+     * null for families drawn as nodes and edges (flowchart, state, class, ER) and text-only
+     * ones. Render it with `MermaidFamilyScene`.
+     */
+    scene: DiagramScene | null;
     apply: (ops: EditOp | EditOp[], label?: string) => DiagramActionResult;
     /** Replaces the source; `clearHistory` when opening a different diagram. */
     load: (source: string, options?: {
@@ -799,6 +835,8 @@ interface UseMermaidDiagramResult {
     /** Removes nodes / groups (with their edges) and edges by id, as one undo step. */
     remove: (ids: readonly string[]) => DiagramActionResult;
     rename: (id: string, label: string) => DiagramActionResult;
+    /** Renames what a scene mark targets: the title (`::title`), a group, an edge or a node. */
+    renameTarget: (target: string, label: string) => DiagramActionResult | null;
     select: (ids: readonly string[]) => void;
     undo: () => void;
     redo: () => void;
@@ -810,7 +848,9 @@ declare function useDiagramState(controller: DiagramController): DiagramState;
  * one from options), lays it out and returns canvas nodes and edges with bound edits. Every
  * edit rewrites only the statements it touches; positions go into `%% @pixerate`.
  */
-declare function useMermaidDiagram(controllerOrOptions?: DiagramController | UseMermaidDiagramOptions): UseMermaidDiagramResult;
+declare function useMermaidDiagram(controllerOrOptions?: DiagramController | UseMermaidDiagramOptions, 
+/** Layout and scene colours when passing a controller (options carry them otherwise). */
+view?: Pick<UseMermaidDiagramOptions, 'layoutOptions' | 'sceneTheme'>): UseMermaidDiagramResult;
 interface UseMermaidStreamOptions extends DiagramLayoutOptions {
     /** True once the whole source has arrived (unconnected nodes are shown then). */
     complete?: boolean;
@@ -915,4 +955,4 @@ interface DiagramPresenceLayerProps {
 /** Agent cursors and their notes over a canvas, from a `PresenceStore` (see `DiagramDirector`). */
 declare function DiagramPresenceLayer({ presence, viewport, className }: DiagramPresenceLayerProps): React__default.JSX.Element | null;
 
-export { AgentPresenceLayer, type AgentPresenceLayerProps, AnimationTimeline, type AnimationTimelineProps, type CanvasAnimation, type CanvasArrange, type CanvasAutoLayout, type CanvasComponents, CanvasComponentsPanel, type CanvasComponentsPanelActions, type CanvasComponentsPanelProps, type CanvasDraw, type CanvasDrawActions, CanvasDrawLayer, type CanvasDrawLayerProps, type CanvasDrawState, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, CanvasInstanceInspector, type CanvasInstanceInspectorActions, type CanvasInstanceInspectorProps, type CanvasMeasure, type CanvasScenes, type CanvasTokens, DiagramPresenceLayer, type DiagramPresenceLayerProps, MermaidDiagramGroup, MermaidDiagramNode, type MermaidDiagramNodeData, type MermaidDiagramNodeProps, MermaidThumbnail, type MermaidThumbnailProps, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasAnimationOptions, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasComponentsOptions, type UseCanvasDockingOptions, type UseCanvasDrawOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseCanvasTokensOptions, type UseDiagramDirectorOptions, type UseMermaidDiagramOptions, type UseMermaidDiagramResult, type UseMermaidStreamOptions, type UseMermaidStreamResult, type UseStreamingCanvasOptions, mermaidNodeStyle, useCanvasAnimation, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasComponents, useCanvasDocking, useCanvasDraw, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useDiagramDirector, useDiagramState, useMermaidDiagram, useMermaidStream, usePresenceState, useStreamingCanvas };
+export { AgentPresenceLayer, type AgentPresenceLayerProps, AnimationTimeline, type AnimationTimelineProps, type CanvasAnimation, type CanvasArrange, type CanvasAutoLayout, type CanvasComponents, CanvasComponentsPanel, type CanvasComponentsPanelActions, type CanvasComponentsPanelProps, type CanvasDraw, type CanvasDrawActions, CanvasDrawLayer, type CanvasDrawLayerProps, type CanvasDrawState, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, CanvasInstanceInspector, type CanvasInstanceInspectorActions, type CanvasInstanceInspectorProps, type CanvasMeasure, type CanvasScenes, type CanvasTokens, DiagramPresenceLayer, type DiagramPresenceLayerProps, MermaidDiagramGroup, MermaidDiagramNode, type MermaidDiagramNodeData, type MermaidDiagramNodeProps, MermaidFamilyScene, type MermaidFamilySceneProps, MermaidThumbnail, type MermaidThumbnailProps, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasAnimationOptions, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasComponentsOptions, type UseCanvasDockingOptions, type UseCanvasDrawOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseCanvasTokensOptions, type UseDiagramDirectorOptions, type UseMermaidDiagramOptions, type UseMermaidDiagramResult, type UseMermaidStreamOptions, type UseMermaidStreamResult, type UseStreamingCanvasOptions, mermaidNodeStyle, useCanvasAnimation, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasComponents, useCanvasDocking, useCanvasDraw, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useDiagramDirector, useDiagramState, useMermaidDiagram, useMermaidStream, usePresenceState, useStreamingCanvas };

package/dist/canvas/index.js

@@ -2533,14 +2533,146 @@ import {
   gradientToSvgDef as gradientToSvgDef2
 } from "@pixerate/editor/canvas";
 
+// src/canvas/MermaidFamilyScene.tsx
+import { useId } from "react";
+import { diagramTextBaseline } from "@pixerate/editor/canvas";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function MermaidFamilyScene({
+  scene,
+  padding = 16,
+  interactive = true,
+  onSelect,
+  onOpen,
+  selectionColor = "var(--primary, #2563eb)",
+  markerColor = "var(--muted-foreground, #64748b)",
+  className = "",
+  style,
+  title
+}) {
+  const uid = useId().replace(/:/g, "");
+  const marker = (kind) => kind ? `url(#${uid}-${kind})` : void 0;
+  const x = scene.x - padding;
+  const y = scene.y - padding;
+  const width = Math.max(1, scene.width + padding * 2);
+  const height = Math.max(1, scene.height + padding * 2);
+  const handlers = (mark) => interactive && mark.target ? {
+    onClick: (event) => {
+      event.stopPropagation();
+      onSelect?.(mark.target, event);
+    },
+    onDoubleClick: (event) => {
+      event.stopPropagation();
+      onOpen?.(mark.target, event);
+    },
+    cursor: "pointer"
+  } : { pointerEvents: "none" };
+  const stroke = (mark) => mark.selected ? { stroke: selectionColor, strokeWidth: Math.max(2, mark.strokeWidth ?? 0) } : { stroke: mark.stroke, strokeWidth: mark.strokeWidth };
+  return /* @__PURE__ */ jsxs8(
+    "svg",
+    {
+      className: `pixerate-diagram-scene ${className}`.trim(),
+      "data-family": scene.family,
+      role: "img",
+      "aria-label": title ?? `${scene.family} diagram`,
+      viewBox: `${x} ${y} ${width} ${height}`,
+      width,
+      height,
+      style: { display: "block", maxWidth: "100%", height: "auto", overflow: "visible", ...style },
+      onClick: interactive ? (event) => onSelect?.(null, event) : void 0,
+      children: [
+        /* @__PURE__ */ jsxs8("defs", { children: [
+          /* @__PURE__ */ jsx8("marker", { id: `${uid}-arrowclosed`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx8("path", { d: "M0,0 L10,5 L0,10 Z", style: { fill: markerColor } }) }),
+          /* @__PURE__ */ jsx8("marker", { id: `${uid}-arrow`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx8("path", { d: "M0,0 L10,5 L0,10", style: { fill: "none", stroke: markerColor, strokeWidth: 1.5 } }) })
+        ] }),
+        scene.marks.map((mark) => {
+          const common = { "data-role": mark.role, "data-target": mark.target, "data-selected": mark.selected ? "" : void 0, opacity: mark.opacity, ...handlers(mark) };
+          switch (mark.kind) {
+            case "rect":
+              return /* @__PURE__ */ jsx8(
+                "rect",
+                {
+                  ...common,
+                  x: mark.x,
+                  y: mark.y,
+                  width: Math.max(0, mark.width),
+                  height: Math.max(0, mark.height),
+                  rx: mark.radius,
+                  strokeDasharray: mark.dash,
+                  style: { fill: mark.fill, ...stroke(mark) }
+                },
+                mark.key
+              );
+            case "circle":
+              return /* @__PURE__ */ jsx8("circle", { ...common, cx: mark.cx, cy: mark.cy, r: mark.r, style: { fill: mark.fill, ...stroke(mark) } }, mark.key);
+            case "line":
+              return /* @__PURE__ */ jsx8(
+                "line",
+                {
+                  ...common,
+                  x1: mark.x1,
+                  y1: mark.y1,
+                  x2: mark.x2,
+                  y2: mark.y2,
+                  strokeDasharray: mark.dash,
+                  markerEnd: marker(mark.markerEnd),
+                  markerStart: marker(mark.markerStart),
+                  style: { stroke: mark.selected ? selectionColor : mark.stroke, strokeWidth: mark.strokeWidth ?? 1 }
+                },
+                mark.key
+              );
+            case "path":
+              return /* @__PURE__ */ jsx8(
+                "path",
+                {
+                  ...common,
+                  d: mark.d,
+                  strokeDasharray: mark.dash,
+                  strokeLinejoin: "round",
+                  markerEnd: marker(mark.markerEnd),
+                  markerStart: marker(mark.markerStart),
+                  style: { fill: mark.fill ?? "none", ...stroke(mark) }
+                },
+                mark.key
+              );
+            case "text":
+              return /* @__PURE__ */ jsx8(
+                "text",
+                {
+                  ...common,
+                  x: mark.x,
+                  y: mark.y,
+                  textAnchor: mark.anchor,
+                  dominantBaseline: diagramTextBaseline(mark.baseline),
+                  transform: mark.rotate ? `rotate(${mark.rotate} ${mark.x} ${mark.y})` : void 0,
+                  style: {
+                    fill: mark.selected ? selectionColor : mark.fill,
+                    fontSize: mark.size,
+                    fontWeight: mark.weight,
+                    fontStyle: mark.italic ? "italic" : void 0,
+                    userSelect: "none"
+                  },
+                  children: mark.text
+                },
+                mark.key
+              );
+          }
+        })
+      ]
+    }
+  );
+}
+
 // src/canvas/useMermaidDiagram.ts
 import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef15, useState as useState8, useSyncExternalStore as useSyncExternalStore4 } from "react";
 import {
   DiagramController
 } from "@pixerate/editor/diagram";
 import {
+  CSS_VARIABLE_DIAGRAM_SCENE_THEME,
   DiagramStream,
   blendDiagramLayout,
+  diagramRenameOp,
+  familySceneFromLayout,
   easeDiagramTween,
   mermaidMovesFromCanvas,
   mermaidToCanvas
@@ -2548,7 +2680,7 @@ import {
 function useDiagramState(controller) {
   return useSyncExternalStore4(controller.subscribe, controller.getState, controller.getState);
 }
-function useMermaidDiagram(controllerOrOptions = {}) {
+function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
   const own = useRef15(null);
   let controller;
   if (controllerOrOptions instanceof DiagramController) controller = controllerOrOptions;
@@ -2556,13 +2688,19 @@ function useMermaidDiagram(controllerOrOptions = {}) {
     if (!own.current) own.current = new DiagramController(controllerOrOptions);
     controller = own.current;
   }
-  const layoutOptions = controllerOrOptions instanceof DiagramController ? void 0 : controllerOrOptions.layoutOptions;
+  const layoutOptions = (controllerOrOptions instanceof DiagramController ? void 0 : controllerOrOptions.layoutOptions) ?? view.layoutOptions;
+  const sceneTheme = (controllerOrOptions instanceof DiagramController ? void 0 : controllerOrOptions.sceneTheme) ?? view.sceneTheme;
   const state = useDiagramState(controller);
   const canvas = useMemo8(
     () => mermaidToCanvas(state.document, { ...layoutOptions, editable: state.editable }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.document, state.editable]
   );
+  const scene = useMemo8(
+    () => state.document.tier === "editable" ? familySceneFromLayout(state.document.family, state.document.graph, canvas.layout, { theme: { ...CSS_VARIABLE_DIAGRAM_SCENE_THEME, ...sceneTheme }, selection: state.selection }) : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.document, canvas.layout, state.selection]
+  );
   const layoutRef = useRef15(canvas.layout);
   layoutRef.current = canvas.layout;
   const actions = useMemo8(
@@ -2588,13 +2726,17 @@ function useMermaidDiagram(controllerOrOptions = {}) {
         controller.getDocument().graph.groups.some((g) => g.id === id) ? { type: "renameGroup", id, label } : { type: "renameNode", id, label },
         "Rename"
       ),
+      renameTarget: (target, label) => {
+        const op = diagramRenameOp(controller.getDocument(), target, label);
+        return op ? controller.apply(op, "Rename") : null;
+      },
       select: (ids) => controller.select(ids),
       undo: () => void controller.undo(),
       redo: () => void controller.redo()
     }),
     [controller]
   );
-  return { controller, state, document: state.document, source: state.source, ...canvas, ...actions };
+  return { controller, state, document: state.document, source: state.source, ...canvas, scene, ...actions };
 }
 function useMermaidStream(source, options = {}) {
   const { complete = false, duration = 300, ...layoutOptions } = options;
@@ -2637,7 +2779,7 @@ function useMermaidStream(source, options = {}) {
 
 // src/canvas/MermaidDiagramNode.tsx
 import { MERMAID_SHAPE_PAINT, mermaidLabelLines, mermaidNodeMembers, mermaidNodePaint, mermaidShapePaths } from "@pixerate/editor/canvas";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function mermaidNodeStyle(styles = {}, selected = false) {
   const paint = mermaidNodePaint(styles, selected);
   const { color, "stroke-width": strokeWidth, "stroke-dasharray": strokeDasharray, ...vars } = paint;
@@ -2647,7 +2789,7 @@ function MermaidDiagramNode({ data, width = 160, height = 56, selected, classNam
   const node = data.node;
   if (!node) return null;
   const members = mermaidNodeMembers(node.data);
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: `pixerate-diagram-node ${className}`.trim(),
@@ -2655,14 +2797,14 @@ function MermaidDiagramNode({ data, width = 160, height = 56, selected, classNam
       "data-selected": selected ? "true" : void 0,
       style: { position: "relative", width: "100%", height: "100%", ...mermaidNodeStyle(data.resolvedStyles, selected) },
       children: [
-        /* @__PURE__ */ jsx8("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", width: "100%", height: "100%", style: { position: "absolute", inset: 0, overflow: "visible" }, "aria-hidden": "true", children: mermaidShapePaths(node.shape, width, height).map((path, i) => /* @__PURE__ */ jsx8("path", { d: path.d, style: { ...MERMAID_SHAPE_PAINT[path.paint], vectorEffect: "non-scaling-stroke" } }, i)) }),
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsx9("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", width: "100%", height: "100%", style: { position: "absolute", inset: 0, overflow: "visible" }, "aria-hidden": "true", children: mermaidShapePaths(node.shape, width, height).map((path, i) => /* @__PURE__ */ jsx9("path", { d: path.d, style: { ...MERMAID_SHAPE_PAINT[path.paint], vectorEffect: "non-scaling-stroke" } }, i)) }),
+        /* @__PURE__ */ jsxs9(
           "div",
           {
             style: { position: "relative", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: members.length ? "flex-start" : "center", height: "100%", padding: "6px 10px", boxSizing: "border-box", fontSize: 13, lineHeight: 1.3, textAlign: "center", pointerEvents: "none" },
             children: [
-              mermaidLabelLines(node.label).map((line, i) => /* @__PURE__ */ jsx8("span", { style: { fontWeight: members.length ? 600 : void 0 }, children: line }, i)),
-              members.length > 0 && /* @__PURE__ */ jsx8("div", { style: { alignSelf: "stretch", marginTop: 4, paddingTop: 4, borderTop: "1px solid var(--pixerate-diagram-node-border)", textAlign: "left", fontSize: 12 }, children: members.map((m, i) => /* @__PURE__ */ jsx8("div", { children: m }, i)) })
+              mermaidLabelLines(node.label).map((line, i) => /* @__PURE__ */ jsx9("span", { style: { fontWeight: members.length ? 600 : void 0 }, children: line }, i)),
+              members.length > 0 && /* @__PURE__ */ jsx9("div", { style: { alignSelf: "stretch", marginTop: 4, paddingTop: 4, borderTop: "1px solid var(--pixerate-diagram-node-border)", textAlign: "left", fontSize: 12 }, children: members.map((m, i) => /* @__PURE__ */ jsx9("div", { children: m }, i)) })
             ]
           }
         ),
@@ -2674,7 +2816,7 @@ function MermaidDiagramNode({ data, width = 160, height = 56, selected, classNam
 function MermaidDiagramGroup({ data, selected, className = "", children }) {
   const group = data.group;
   if (!group) return null;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: `pixerate-diagram-group ${className}`.trim(),
@@ -2689,7 +2831,7 @@ function MermaidDiagramGroup({ data, selected, className = "", children }) {
         color: data.resolvedStyles?.color ?? "var(--muted-foreground, #475569)"
       },
       children: [
-        /* @__PURE__ */ jsx8("div", { style: { padding: "6px 10px", fontSize: 12, fontWeight: 600 }, children: mermaidLabelLines(group.label).join(" ") }),
+        /* @__PURE__ */ jsx9("div", { style: { padding: "6px 10px", fontSize: 12, fontWeight: 600 }, children: mermaidLabelLines(group.label).join(" ") }),
         children
       ]
     }
@@ -2700,7 +2842,7 @@ function MermaidDiagramGroup({ data, selected, className = "", children }) {
 import { useMemo as useMemo9 } from "react";
 import { parseMermaid } from "@pixerate/editor/diagram";
 import { mermaidThumbnailSvg } from "@pixerate/editor/canvas";
-import { Fragment as Fragment2, jsx as jsx9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx10 } from "react/jsx-runtime";
 function MermaidThumbnail({ source, className = "", fallback = null, ...options }) {
   const doc = useMemo9(() => typeof source === "string" ? parseMermaid(source) : source, [source]);
   const key = JSON.stringify(options);
@@ -2709,8 +2851,8 @@ function MermaidThumbnail({ source, className = "", fallback = null, ...options
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [doc, key]
   );
-  if (!drawn) return /* @__PURE__ */ jsx9(Fragment2, { children: fallback });
-  return /* @__PURE__ */ jsx9("span", { className: `pixerate-diagram-thumbnail ${className}`.trim(), style: { display: "inline-block", lineHeight: 0 }, dangerouslySetInnerHTML: { __html: drawn.svg } });
+  if (!drawn) return /* @__PURE__ */ jsx10(Fragment2, { children: fallback });
+  return /* @__PURE__ */ jsx10("span", { className: `pixerate-diagram-thumbnail ${className}`.trim(), style: { display: "inline-block", lineHeight: 0 }, dangerouslySetInnerHTML: { __html: drawn.svg } });
 }
 
 // src/canvas/useDiagramDirector.ts
@@ -2734,13 +2876,13 @@ function usePresenceState(presence) {
 }
 
 // src/canvas/DiagramPresenceLayer.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   const { actors } = usePresenceState(presence);
   if (!actors.length) return null;
-  return /* @__PURE__ */ jsx10("div", { className: `pixerate-diagram-presence ${className}`.trim(), "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden", zIndex: 50 }, children: actors.map((a) => /* @__PURE__ */ jsxs9("div", { "data-actor": a.id, style: { position: "absolute", left: 0, top: 0, transform: `translate(${a.x * viewport.zoom + viewport.x}px, ${a.y * viewport.zoom + viewport.y}px)` }, children: [
-    /* @__PURE__ */ jsx10("svg", { width: "18", height: "20", viewBox: "0 0 12 18", style: { display: "block", transform: a.pressed ? "scale(0.85)" : void 0, transformOrigin: "0 0" }, children: /* @__PURE__ */ jsx10("path", { d: "M0,0 L0,14 L4,10.5 L7,17 L9.5,16 L6.5,9.5 L11.5,9.5 Z", style: { fill: a.color, stroke: "#ffffff", strokeWidth: 1 } }) }),
-    /* @__PURE__ */ jsx10("span", { style: { position: "absolute", left: 14, top: 16, whiteSpace: "nowrap", borderRadius: 4, padding: "1px 6px", fontSize: 11, fontWeight: 600, color: "#ffffff", background: a.color }, children: a.message ?? a.name })
+  return /* @__PURE__ */ jsx11("div", { className: `pixerate-diagram-presence ${className}`.trim(), "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden", zIndex: 50 }, children: actors.map((a) => /* @__PURE__ */ jsxs10("div", { "data-actor": a.id, style: { position: "absolute", left: 0, top: 0, transform: `translate(${a.x * viewport.zoom + viewport.x}px, ${a.y * viewport.zoom + viewport.y}px)` }, children: [
+    /* @__PURE__ */ jsx11("svg", { width: "18", height: "20", viewBox: "0 0 12 18", style: { display: "block", transform: a.pressed ? "scale(0.85)" : void 0, transformOrigin: "0 0" }, children: /* @__PURE__ */ jsx11("path", { d: "M0,0 L0,14 L4,10.5 L7,17 L9.5,16 L6.5,9.5 L11.5,9.5 Z", style: { fill: a.color, stroke: "#ffffff", strokeWidth: 1 } }) }),
+    /* @__PURE__ */ jsx11("span", { style: { position: "absolute", left: 14, top: 16, whiteSpace: "nowrap", borderRadius: 4, padding: "1px 6px", fontSize: 11, fontWeight: 600, color: "#ffffff", background: a.color }, children: a.message ?? a.name })
   ] }, a.id)) });
 }
 export {
@@ -2772,6 +2914,7 @@ export {
   ManualClock,
   MermaidDiagramGroup,
   MermaidDiagramNode,
+  MermaidFamilyScene,
   MermaidThumbnail,
   RESIZE_HANDLES,
   SHAPE_DATA_KEY,