@likec4/diagram 1.58.0 → 1.59.0

package/dist/base-primitives/element/ElementDetailsButton.js

@@ -47,7 +47,7 @@ var container = css({
 	_smallZoom: { display: "none" },
 	_print: { display: "none" }
 });
-function ElementDetailsButton({ selected = false, data: { hovered: isHovered = false }, icon, onClick }) {
+function ElementDetailsButton({ selected = false, data: { hovered: isHovered = false }, icon, ariaLabel = "Open details", onClick }) {
 	let variant;
 	switch (true) {
 		case isHovered:
@@ -58,6 +58,7 @@ function ElementDetailsButton({ selected = false, data: { hovered: isHovered = f
 			break;
 		default: variant = "normal";
 	}
+	const isActionVisible = isHovered || selected;
 	return /* @__PURE__ */ jsx(Box$1, {
 		className: cx(container, "details-button"),
 		children: /* @__PURE__ */ jsx(ActionIcon, {
@@ -70,7 +71,9 @@ function ElementDetailsButton({ selected = false, data: { hovered: isHovered = f
 			whileTap: "whileTap",
 			onClick,
 			onDoubleClick: stopPropagation,
-			tabIndex: -1,
+			tabIndex: isActionVisible ? 0 : -1,
+			inert: isActionVisible ? void 0 : true,
+			"aria-label": ariaLabel,
 			children: icon ?? /* @__PURE__ */ jsx(IconId, {
 				stroke: 1.8,
 				style: { width: "75%" }

package/dist/base-primitives/element/ElementNodeContainer.js

@@ -2,8 +2,8 @@ import "../../_virtual/_rolldown/runtime.js";
 import { cx } from "@likec4/styles/css";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import * as m from "motion/react-m";
 import { ensureSizes } from "@likec4/core/types";
+import * as m from "motion/react-m";
 import { elementNode } from "@likec4/styles/recipes";
 //#region src/base-primitives/element/ElementNodeContainer.tsx
 var variants = {

package/dist/base-primitives/element/ElementShape.js

@@ -324,6 +324,7 @@ function ElementShape({ data, width, height, showSelectionOutline = true }) {
 	const borderStyle = data.style?.border ?? "none";
 	const withBorder = borderStyle !== "none";
 	if (data.shape === "rectangle") return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": true,
 		style: { borderStyle },
 		className: elementShapeRecipe({
 			shapetype: "html",
@@ -337,6 +338,7 @@ function ElementShape({ data, width, height, showSelectionOutline = true }) {
 		withOutline: showSelectionOutline
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [isMultiple && /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": true,
 		className,
 		"data-likec4-shape-multiple": "true",
 		viewBox: `0 0 ${w} ${h}`,
@@ -347,6 +349,7 @@ function ElementShape({ data, width, height, showSelectionOutline = true }) {
 			h
 		})
 	}), /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": true,
 		className,
 		viewBox: `0 0 ${w} ${h}`,
 		children: [/* @__PURE__ */ jsx(ShapeSvgOutline, {

package/dist/components/ErrorFallback.js

@@ -1,7 +1,7 @@
 import { __name } from "../_virtual/_rolldown/runtime.js";
 import { css } from "@likec4/styles/css";
 import { IconX } from "@tabler/icons-react";
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, ScrollAreaAutosize, Text, ThemeIcon } from "@mantine/core";
 import { HStack, VStack } from "@likec4/styles/jsx";
@@ -10,10 +10,8 @@ import { ErrorBoundary } from "react-error-boundary";
 function ErrorFallback({ error, resetErrorBoundary }) {
 	const errorString = error instanceof Error ? error.message : "Unknown error";
 	const dialogRef = useRef(null);
-	useEffect(() => {
-		dialogRef.current?.showModal();
-	}, []);
 	return /* @__PURE__ */ jsx("dialog", {
+		open: true,
 		ref: dialogRef,
 		className: css({
 			margin: "0",
@@ -111,4 +109,4 @@ function ErrorBoundary$1(props) {
 }
 __name(ErrorBoundary$1, "ErrorBoundary");
 //#endregion
-export { ErrorBoundary$1 as ErrorBoundary };
+export { ErrorBoundary$1 as ErrorBoundary, ErrorFallback };

package/dist/components/Link.js

@@ -3,7 +3,7 @@ import { GithubIcon } from "./GithubIcon.js";
 import { css, cx } from "@likec4/styles/css";
 import { IconCheck, IconCopy } from "@tabler/icons-react";
 import { forwardRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ActionIcon, Badge, CopyButton } from "@mantine/core";
 import { styled } from "@likec4/styles/jsx";
 //#region src/components/Link.tsx
@@ -17,7 +17,7 @@ var Link = forwardRef(({ value, className, ...props }, ref) => {
 		radius: "sm",
 		size: "sm",
 		tt: "none",
-		leftSection: value.title ? /* @__PURE__ */ jsx(Fragment$1, { children: value.title }) : null,
+		leftSection: null,
 		rightSection: /* @__PURE__ */ jsx(CopyButton, {
 			value: url,
 			timeout: 1500,
@@ -52,8 +52,8 @@ var Link = forwardRef(({ value, className, ...props }, ref) => {
 				backgroundColor: {
 					base: "transparent",
 					_hover: {
-						base: "mantine.colors.gray[1]",
-						_dark: "mantine.colors.dark[5]"
+						base: "mantine.gray[1]",
+						_dark: "mantine.dark[5]"
 					}
 				}
 			}),
@@ -85,14 +85,14 @@ var Link = forwardRef(({ value, className, ...props }, ref) => {
 					_hover: "underline"
 				}
 			},
-			children: [isGithub && /* @__PURE__ */ jsx(GithubIcon, {
+			children: [!value.title && isGithub && /* @__PURE__ */ jsx(GithubIcon, {
 				height: "12",
 				width: "12",
 				style: {
 					verticalAlign: "middle",
 					marginRight: "4px"
 				}
-			}), isGithub ? url.replace(GITHUB_PREFIX, "") : url]
+			}), value.title ?? (isGithub ? url.replace(GITHUB_PREFIX, "") : url)]
 		})
 	});
 });

package/dist/components/NavigationPanel.js

@@ -21,7 +21,7 @@ var LogoButton = forwardRef(({ className, ...props }, ref) => {
 var NavigationPanel = {
 	Root: withProvider(m$1.div, "root", { shouldForwardProp }),
 	Body: withContext(m$1.div, "body", { shouldForwardProp }),
-	Logo: withContext(LogoButton, "logo"),
+	Logo: withContext(LogoButton, "logo", { shouldForwardProp }),
 	Label: withContext(m$1.div, "label", { shouldForwardProp }),
 	Dropdown: withContext(m$1.div, "dropdown", { shouldForwardProp })
 };

package/dist/components/SearchControl.css.js

@@ -8,15 +8,15 @@ var root = css({
 	border: "1px solid",
 	borderColor: {
 		base: "default.border",
-		_light: "mantine.colors.gray[4]",
-		_dark: "mantine.colors.dark[4]",
+		_light: "mantine.gray[4]",
+		_dark: "mantine.dark[4]",
 		_hover: "default.border"
 	},
 	cursor: "pointer",
 	background: {
 		base: "default",
 		_light: "white",
-		_dark: "mantine.colors.dark[6]",
+		_dark: "mantine.dark[6]",
 		_hover: "default.hover"
 	},
 	width: "100%",
@@ -49,19 +49,19 @@ var shortcut = css({
 	border: "1px solid",
 	transition: "fast",
 	_light: {
-		color: "mantine.colors.gray[7]",
-		borderColor: "mantine.colors.gray[2]"
+		color: "mantine.gray[7]",
+		borderColor: "mantine.gray[2]"
 	},
 	_dark: {
-		color: "mantine.colors.dark[0]",
-		borderColor: "mantine.colors.dark[7]"
+		color: "mantine.dark[0]",
+		borderColor: "mantine.dark[7]"
 	},
 	backgroundColor: {
-		_light: "mantine.colors.gray[2]/70",
-		_dark: "mantine.colors.dark[8]/70",
+		_light: "mantine.gray[2]/70",
+		_dark: "mantine.dark[8]/70",
 		_groupHover: {
-			_light: "mantine.colors.gray[2]",
-			_dark: "mantine.colors.dark[8]"
+			_light: "mantine.gray[2]",
+			_dark: "mantine.dark[8]"
 		}
 	}
 });

package/dist/context/TagStylesContext.d.ts

@@ -1,8 +1,8 @@
 import { TagSpecification } from '@likec4/core';
 import { PropsWithChildren } from 'react';
-export declare const generateColorVars: (spec: TagSpecification) => string;
-export declare function TagStylesProvider({ children, rootSelector }: PropsWithChildren<{
-    rootSelector: string;
+export declare function generateColorVars(spec: TagSpecification): string;
+export declare function TagStylesProvider({ children, id }: PropsWithChildren<{
+    id: string;
 }>): import("react").JSX.Element;
 export declare function useTagSpecifications(): Record<string, TagSpecification>;
 export declare function useTagSpecification(tag: string): TagSpecification;

package/dist/context/TagStylesContext.js

@@ -1,15 +1,14 @@
 import "../_virtual/_rolldown/runtime.js";
 import { useLikeC4Specification } from "../hooks/useLikeC4Model.js";
 import { createContext, memo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { entries, flatMap, isEmpty, join, pipe } from "remeda";
 import { isTagColorSpecified } from "@likec4/core";
 import { useMantineStyleNonce } from "@mantine/core";
 import { DefaultTagColors, getContrastedColorsAPCA, isValidColor } from "@likec4/core/styles";
 //#region src/context/TagStylesContext.tsx
-var TagStylesContext = createContext({});
 var radixColors = DefaultTagColors;
-var generateColorVars = (spec) => {
+function generateColorVars(spec) {
 	const color = spec.color;
 	if (isTagColorSpecified(spec) && isValidColor(color)) return `
       --colors-likec4-tag-bg: ${color};
@@ -17,21 +16,22 @@ var generateColorVars = (spec) => {
       --colors-likec4-tag-text: ${getContrastedColorsAPCA(color).hiContrast};
     `;
 	if (!radixColors.includes(color)) return "";
-	let textcolor = "12";
+	let textcolor = `var(--colors-${color}-12)`;
 	if ([
 		"mint",
 		"grass",
 		"lime",
 		"yellow",
 		"amber"
-	].includes(color)) textcolor = "dark-2";
+	].includes(color)) textcolor = "rgba(0 0 0 / 0.85)";
 	return `
   --colors-likec4-tag-border: var(--colors-${color}-8);
   --colors-likec4-tag-bg: var(--colors-${color}-9);
   --colors-likec4-tag-bg-hover: var(--colors-${color}-10);
-  --colors-likec4-tag-text: var(--colors-${color}-${textcolor});
+  --colors-likec4-tag-text: ${textcolor};
   `;
-};
+}
+var TagStylesContext = createContext({});
 function generateStylesheet(tags, rootSelector) {
 	if (!tags || isEmpty(tags)) return "";
 	return pipe(entries(tags), flatMap(([tag, spec]) => [
@@ -40,17 +40,17 @@ function generateStylesheet(tags, rootSelector) {
 		"}"
 	]), join("\n"));
 }
-function TagStylesProvider({ children, rootSelector }) {
+function TagStylesProvider({ children, id }) {
 	const tags = useLikeC4Specification().tags;
 	const nonce = useMantineStyleNonce()?.();
-	const stylesheet = generateStylesheet(tags, rootSelector);
-	return /* @__PURE__ */ jsxs(TagStylesContext.Provider, {
+	const stylesheet = generateStylesheet(tags, `#${id}`);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, {
+		nonce,
+		stylesheet
+	}), /* @__PURE__ */ jsx(TagStylesContext.Provider, {
 		value: tags,
-		children: [stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, {
-			nonce,
-			stylesheet
-		}), children]
-	});
+		children
+	})] });
 }
 var TagStylesheet = memo(({ stylesheet, nonce }) => {
 	return /* @__PURE__ */ jsx("style", {
@@ -61,4 +61,4 @@ var TagStylesheet = memo(({ stylesheet, nonce }) => {
 	});
 });
 //#endregion
-export { TagStylesProvider };
+export { TagStylesProvider, generateColorVars };

package/dist/custom/index.d.ts

@@ -13,3 +13,4 @@ export type { OverlayProps } from '../overlays/overlay/Overlay';
 export { PortalToContainer } from '../components/PortalToContainer';
 export { FramerMotionConfig } from '../context/FramerMotionConfig';
 export { NavigationPanel } from '../components/NavigationPanel';
+export { ErrorBoundary, ErrorFallback } from '../components/ErrorFallback';

package/dist/custom/index.js

@@ -9,6 +9,7 @@ import { useDiagramContext, useOnDiagramEvent } from "../hooks/useDiagram.js";
 import { useCurrentView, useCurrentViewId } from "../hooks/useCurrentView.js";
 import { useOptionalCurrentViewModel, useOptionalLikeC4Model } from "../context/LikeC4ModelContext.js";
 import { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from "../hooks/useLikeC4Model.js";
+import { ErrorBoundary, ErrorFallback } from "../components/ErrorFallback.js";
 import { useCurrentViewModel } from "../hooks/useCurrentViewModel.js";
 import { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from "../hooks/useLikeC4Project.js";
 import { useLikeC4Styles } from "../hooks/useLikeC4Styles.js";
@@ -35,6 +36,6 @@ import { CompoundDeploymentToolbar, CompoundElementToolbar } from "../likec4diag
 import { DeploymentElementToolbar, ElementToolbar } from "../likec4diagram/custom/nodes/toolbar/ElementToolbar.js";
 import { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from "../likec4diagram/custom/nodes/nodes.js";
 import { SequenceActorNode, SequenceParallelArea } from "../likec4diagram/custom/nodes/SequenceActorNode.js";
-import { NavigationPanel } from "../components/NavigationPanel.js";
 import { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode } from "./customNodes.js";
-export { Base, CompoundActionButton, CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButton, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, CompoundNodeContainer, CompoundTitle, DefaultHandles, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActionButtons, ElementActions, ElementData, ElementDetailsButton, ElementDetailsButtonWithHandler, ElementNode, ElementNodeContainer, ElementShape, ElementTag, ElementTags, ElementToolbar, FramerMotionConfig, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, Markdown, NavigationPanel, Overlay, PortalToContainer, SequenceActorNode, SequenceParallelArea, Toolbar, ViewGroupNode, compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, memoEdge, memoNode, sequenceActorNode, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramEventHandlers, useEnabledFeatures, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useOptionalLikeC4Model, useSetState, useUpdateEffect, viewGroupNode };
+import { NavigationPanel } from "../components/NavigationPanel.js";
+export { Base, CompoundActionButton, CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButton, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, CompoundNodeContainer, CompoundTitle, DefaultHandles, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActionButtons, ElementActions, ElementData, ElementDetailsButton, ElementDetailsButtonWithHandler, ElementNode, ElementNodeContainer, ElementShape, ElementTag, ElementTags, ElementToolbar, ErrorBoundary, ErrorFallback, FramerMotionConfig, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, Markdown, NavigationPanel, Overlay, PortalToContainer, SequenceActorNode, SequenceParallelArea, Toolbar, ViewGroupNode, compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, memoEdge, memoNode, sequenceActorNode, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramEventHandlers, useEnabledFeatures, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useOptionalLikeC4Model, useSetState, useUpdateEffect, viewGroupNode };

package/dist/editor/actor/actions.js

@@ -185,4 +185,4 @@ var clearQueue = () => machine.assign({
 	processing: null
 });
 //#endregion
-export { cancelSync, clearQueue, deleteNodesAndEdges, makeSnapshot, pushHistory, pushToSyncQueue, redo, saveBeforeEditing, scheduleSync, undo };
+export { cancelSync, clearQueue, deleteNodesAndEdges, isLayoutChange, isLayoutChangeOp, makeSnapshot, pushHistory, pushToSyncQueue, redo, saveBeforeEditing, scheduleSync, undo };

package/dist/editor/actor/machine.d.ts

@@ -1,9 +1,7 @@
-import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
-import { EditorActorContext, EditorActorEmitedEvent, EditorActorEvent, EditorActorInput, EditorActorStateTag } from './types';
-export interface EditorActorLogic extends StateMachine<EditorActorContext, EditorActorEvent, any, any, any, any, any, {
-    editor: 'idle' | 'moving';
-    syncQueue: 'idle' | 'pending' | 'suspended' | 'process';
-}, EditorActorStateTag, EditorActorInput, any, EditorActorEmitedEvent, any, any> {
+import { ActorRef, SnapshotFrom } from 'xstate';
+import { BaseEditorActorLogic } from './setup';
+import { EditorActorEmitedEvent, EditorActorEvent } from './types';
+export interface EditorActorLogic extends BaseEditorActorLogic {
 }
 export declare const editorActorLogic: EditorActorLogic;
 export type EditorActorSnapshot = SnapshotFrom<EditorActorLogic>;

package/dist/editor/actor/setup.d.ts

@@ -1,5 +1,6 @@
+import { ActorRefFromLogic, StateMachine, StateValue, PromiseActorLogic, EventObject, SetupReturn, NonReducibleUnknown, MetaObject } from 'xstate';
+import { inferChildrenRef, inferProvidedActor } from '../../utils/defineActors';
 import { EditorActorContext, EditorActorEmitedEvent, EditorActorEvent, EditorActorInput, EditorActorStateTag } from './types';
-import { SetupReturn, PromiseActorLogic, EventObject, NonReducibleUnknown, MetaObject } from 'xstate';
 import { HotkeyActorLogic } from './hotkey';
 import type * as t from '@likec4/core/types';
 export declare namespace EditorCalls {
@@ -41,11 +42,17 @@ export declare namespace EditorCalls {
         };
     }
 }
-export declare const machine: SetupReturn<EditorActorContext, EditorActorEvent, {
+declare const actors: {
+    hotkey: HotkeyActorLogic;
     applyLatest: PromiseActorLogic<EditorCalls.ApplyLatestToManual.Output, EditorCalls.ApplyLatestToManual.Input, EventObject>;
     executeChange: PromiseActorLogic<EditorCalls.ExecuteChange.Output, EditorCalls.ExecuteChange.Input, EventObject>;
     applySemanticLayout: PromiseActorLogic<EditorCalls.ApplySemanticLayout.Output, EditorCalls.ApplySemanticLayout.Input, EventObject>;
+};
+export declare const machine: SetupReturn<EditorActorContext, EditorActorEvent, {
     hotkey: HotkeyActorLogic;
+    applyLatest: PromiseActorLogic<EditorCalls.ApplyLatestToManual.Output, EditorCalls.ApplyLatestToManual.Input, EventObject>;
+    executeChange: PromiseActorLogic<EditorCalls.ExecuteChange.Output, EditorCalls.ExecuteChange.Input, EventObject>;
+    applySemanticLayout: PromiseActorLogic<EditorCalls.ApplySemanticLayout.Output, EditorCalls.ApplySemanticLayout.Input, EventObject>;
 }, {
     hotkey: "hotkey";
 }, {}, {
@@ -53,3 +60,10 @@ export declare const machine: SetupReturn<EditorActorContext, EditorActorEvent,
     'can undo': unknown;
     'can redo': unknown;
 }, "500ms" | "wait-after-edit", EditorActorStateTag, EditorActorInput, NonReducibleUnknown, EditorActorEmitedEvent, MetaObject>;
+/**
+ * to workaround circular dependency issue between editor and diagram packages
+ */
+export interface BaseEditorActorLogic<State extends StateValue = any> extends StateMachine<EditorActorContext, EditorActorEvent, inferChildrenRef<typeof actors>, inferProvidedActor<typeof actors>, never, never, never, State, EditorActorStateTag, EditorActorInput, never, EditorActorEmitedEvent, never, never> {
+}
+export type BaseEditorActorRef = ActorRefFromLogic<BaseEditorActorLogic>;
+export {};

package/dist/editor/actor/setup.js

@@ -1,4 +1,5 @@
 import "../../_virtual/_rolldown/runtime.js";
+import { defineActors } from "../../utils/defineActors.js";
 import { hotkey } from "./hotkey.js";
 import { fromPromise, setup } from "xstate";
 var machine = setup({
@@ -10,7 +11,8 @@ var machine = setup({
 		children: {},
 		tags: ""
 	},
-	actors: {
+	actors: defineActors({
+		hotkey,
 		applyLatest: fromPromise(() => {
 			throw new Error("Not implemented");
 		}),
@@ -19,9 +21,8 @@ var machine = setup({
 		}),
 		applySemanticLayout: fromPromise(() => {
 			throw new Error("Not implemented");
-		}),
-		hotkey
-	},
+		})
+	}),
 	delays: {
 		"500ms": 500,
 		"wait-after-edit": 1e3

package/dist/hooks/index.d.ts

@@ -11,4 +11,4 @@ export { useCurrentViewModel } from './useCurrentViewModel';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, useOptionalLikeC4Model, } from './useLikeC4Model';
 export { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './useLikeC4Project';
 export { useLikeC4Styles } from './useLikeC4Styles';
-export * from './useDiagram';
+export { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramSelector, useOnDiagramEvent, } from './useDiagram';

package/dist/hooks/safeContext.d.ts

@@ -1,7 +1,160 @@
 import { Provider } from 'react';
+import { AnyActorRef, SnapshotFrom, MachineSnapshot, ActorRefFromLogic } from 'xstate';
 import { DiagramApi } from '../likec4diagram/state/diagram-api';
-import { DiagramActorRef } from '../likec4diagram/state/types';
-export declare const DiagramActorContextProvider: Provider<DiagramActorRef>;
+import { DiagramActorRef, DiagramContext } from '../likec4diagram/state/types';
+import { DiagramEvents } from '../custom';
+import { OverlaysActorRef, OverlaysActorLogic } from '../overlays/overlaysActor';
+import { SearchActorRef, SearchActorLogic } from '../search/searchActor';
+import { BaseEditorActorRef } from '../editor/actor/setup';
+import { NavigationPanelActorRef, NavigationPanelActorLogic } from '../navigationpanel/actor';
+import { HotkeyActorLogic } from '../likec4diagram/state/hotkeyActor';
+import { MediaPrintActorLogic } from '../likec4diagram/state/mediaPrintActor';
+import { EditorActorLogic } from '../editor';
 export declare const DiagramApiContextProvider: Provider<DiagramApi>;
-export declare function useDiagramActorRef(): DiagramActorRef;
 export declare function useDiagram(): DiagramApi;
+/**
+ * Tuple type for selector and compare function pair
+ */
+type SelectAndCompare<A, B> = [
+    selector: (snapshot: A) => B,
+    compare: (a: B, b: B) => boolean
+];
+type SafeContextForActor<A extends AnyActorRef, Snapshot, Context> = {
+    /**
+     * The React context provider for this actor
+     */
+    ContextProvider: Provider<A>;
+    /**
+     * Hook to get the actor ref from context
+     */
+    useActorRef: () => A;
+    /**
+     * @param select - Function to extract a value from the actor's snapshot
+     * @param compare - Optional comparison function. If not provided, shallow equality is used.
+     *                  The comparison function receives the selected value from the previous snapshot ()
+     *                  and the selected value from the current snapshot. If the comparison returns true,
+     *                  the component will not re-render.
+     */
+    selectSnapshot<T>(select: (state: Snapshot) => T, compare?: (old: NoInfer<T>, next: NoInfer<T>) => boolean): SelectAndCompare<Snapshot, T>;
+    /**
+     * @param select - Function to extract a value from the actor's context
+     * @param compare - Optional comparison function. If not provided, shallow equality is used.
+     */
+    selectContext<T>(select: (state: Context) => T, compare?: (old: NoInfer<T>, next: NoInfer<T>) => boolean): SelectAndCompare<Snapshot, T>;
+    useActorSelector<T>(select: (state: Snapshot) => T): T;
+    useActorSelector<T>(selectorCompare: SelectAndCompare<Snapshot, T>): T;
+    useActorSelector<T>(...selectorCompare: SelectAndCompare<Snapshot, T>): T;
+};
+/**
+ * Helper to create a safe context for an actor
+ * @example
+ * ```tsx
+ * const {
+ *   ContextProvider: MyActorContext,
+ *   useActorRef,
+ *   selectSnapshot,
+ *   useActorSelector
+ * } = createSafeContextForActor<MyActorRef>()
+ *
+ * const select = selectSnapshot(
+ *   s => ....,
+ *   (a, b) => a === b
+ * )
+ *
+ * // Later in component:
+ * const value = useActorSelector(select)
+ * ```
+ */
+export declare function createSafeContextForActor<A extends AnyActorRef, Snapshot = SnapshotFrom<A>, Context = Snapshot extends {
+    context: infer C;
+} ? C : never>(name: string): SafeContextForActor<A, Snapshot, Context>;
+export declare const DiagramActorContextProvider: Provider<DiagramActorRef>, selectDiagramSnapshot: <T>(select: (state: MachineSnapshot<DiagramContext, DiagramEvents, {
+    overlays: OverlaysActorRef | undefined;
+    search: SearchActorRef | undefined;
+    editor: BaseEditorActorRef | undefined;
+    navigationPanel: NavigationPanelActorRef | undefined;
+} & Omit<{
+    hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+    overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+    search: ActorRefFromLogic<SearchActorLogic> | undefined;
+    mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+    editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+    navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+}, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+    ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+}, never, never, never, never>) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => SelectAndCompare< MachineSnapshot<DiagramContext, DiagramEvents, {
+    overlays: OverlaysActorRef | undefined;
+    search: SearchActorRef | undefined;
+    editor: BaseEditorActorRef | undefined;
+    navigationPanel: NavigationPanelActorRef | undefined;
+} & Omit<{
+    hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+    overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+    search: ActorRefFromLogic<SearchActorLogic> | undefined;
+    mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+    editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+    navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+}, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+    ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+}, never, never, never, never>, T>, selectDiagramContext: <T>(select: (state: DiagramContext) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => SelectAndCompare< MachineSnapshot<DiagramContext, DiagramEvents, {
+    overlays: OverlaysActorRef | undefined;
+    search: SearchActorRef | undefined;
+    editor: BaseEditorActorRef | undefined;
+    navigationPanel: NavigationPanelActorRef | undefined;
+} & Omit<{
+    hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+    overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+    search: ActorRefFromLogic<SearchActorLogic> | undefined;
+    mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+    editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+    navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+}, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+    ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+}, never, never, never, never>, T>, useDiagramSelector: {
+    <T>(select: (state: MachineSnapshot<DiagramContext, DiagramEvents, {
+        overlays: OverlaysActorRef | undefined;
+        search: SearchActorRef | undefined;
+        editor: BaseEditorActorRef | undefined;
+        navigationPanel: NavigationPanelActorRef | undefined;
+    } & Omit<{
+        hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+        overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+        search: ActorRefFromLogic<SearchActorLogic> | undefined;
+        mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+        editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+        navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+    }, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+        ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+    }, never, never, never, never>) => T): T;
+    <T>(selectorCompare: SelectAndCompare< MachineSnapshot<DiagramContext, DiagramEvents, {
+        overlays: OverlaysActorRef | undefined;
+        search: SearchActorRef | undefined;
+        editor: BaseEditorActorRef | undefined;
+        navigationPanel: NavigationPanelActorRef | undefined;
+    } & Omit<{
+        hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+        overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+        search: ActorRefFromLogic<SearchActorLogic> | undefined;
+        mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+        editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+        navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+    }, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+        ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+    }, never, never, never, never>, T>): T;
+    <T>(selector: (snapshot: MachineSnapshot<DiagramContext, DiagramEvents, {
+        overlays: OverlaysActorRef | undefined;
+        search: SearchActorRef | undefined;
+        editor: BaseEditorActorRef | undefined;
+        navigationPanel: NavigationPanelActorRef | undefined;
+    } & Omit<{
+        hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+        overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+        search: ActorRefFromLogic<SearchActorLogic> | undefined;
+        mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+        editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+        navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+    }, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+        ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+    }, never, never, never, never>) => T, compare: (a: T, b: T) => boolean): T;
+}, useDiagramActorRef: () => DiagramActorRef;
+export {};