@likec4/diagram 1.31.0 → 1.32.1

package/dist/components/ErrorFallback.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box } from '@likec4/styles/jsx';
+import { Notification, ScrollAreaAutosize, Code, Group, Button } from '@mantine/core';
+import { IconX } from '@tabler/icons-react';
+
+function ErrorFallback({ error, resetErrorBoundary }) {
+  const errorString = error instanceof Error ? error.message : "Unknown error";
+  return /* @__PURE__ */ jsx(Box, { pos: "fixed", top: 0, left: 0, w: "100%", p: 0, style: { zIndex: 1e3 }, children: /* @__PURE__ */ jsxs(
+    Notification,
+    {
+      icon: /* @__PURE__ */ jsx(IconX, { style: { width: 16, height: 16 } }),
+      styles: {
+        icon: {
+          alignSelf: "flex-start"
+        }
+      },
+      color: "red",
+      title: "Oops, something went wrong",
+      p: "xl",
+      withCloseButton: false,
+      children: [
+        /* @__PURE__ */ jsx(ScrollAreaAutosize, { maw: "100%", mah: 400, children: /* @__PURE__ */ jsx(Code, { block: true, children: errorString }) }),
+        /* @__PURE__ */ jsx(Group, { gap: "xs", mt: "xl", children: /* @__PURE__ */ jsx(Button, { color: "gray", size: "xs", variant: "light", onClick: () => resetErrorBoundary(), children: "Reset" }) })
+      ]
+    }
+  ) });
+}
+
+export { ErrorFallback };

package/dist/context/DiagramEventHandlers.d.ts

@@ -1,14 +1,15 @@
+import { Any } from '@likec4/core/types';
 import { PropsWithChildren, RefObject } from 'react';
 import { LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
 type RequiredOrNull<T> = {
     [P in keyof T]-?: NonNullable<T[P]> | null;
 };
-type DiagramEventHandlersContextValue = RequiredOrNull<LikeC4DiagramEventHandlers> & {
-    handlersRef: RefObject<LikeC4DiagramEventHandlers>;
+type DiagramEventHandlersContextValue = RequiredOrNull<LikeC4DiagramEventHandlers<Any>> & {
+    handlersRef: RefObject<LikeC4DiagramEventHandlers<Any>>;
 };
-export declare function DiagramEventHandlers({ handlers, children, }: PropsWithChildren<{
-    handlers: LikeC4DiagramEventHandlers;
+export declare function DiagramEventHandlers<A extends Any>({ handlers, children, }: PropsWithChildren<{
+    handlers: LikeC4DiagramEventHandlers<A>;
 }>): import("react/jsx-runtime").JSX.Element;
 export declare function useDiagramEventHandlers(): DiagramEventHandlersContextValue;
-export declare function useDiagramEventHandlersRef(): RefObject<LikeC4DiagramEventHandlers>;
+export declare function useDiagramEventHandlersRef(): RefObject<LikeC4DiagramEventHandlers<Any>>;
 export {};

package/dist/context/DiagramFeatures.d.ts

@@ -1,6 +1,6 @@
-import { ExclusiveUnion } from '@likec4/core';
+import { ExclusiveUnion } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-declare const FeatureNames: readonly ["Controls", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "EdgeEditing", "ViewTitle", "FitView", "LikeC4Model", "Vscode"];
+declare const FeatureNames: readonly ["Controls", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "EdgeEditing", "ViewTitle", "FitView", "Vscode", "ElementTags"];
 export type FeatureName = typeof FeatureNames[number];
 export type EnabledFeatures = {
     [P in `enable${FeatureName}`]: boolean;

package/dist/context/DiagramFeatures.js

@@ -18,14 +18,11 @@ const FeatureNames = [
   "EdgeEditing",
   "ViewTitle",
   "FitView",
-  /**
-   * LikeC4Model is available in context
-   */
-  "LikeC4Model",
   /**
    * Running in VSCode
    */
-  "Vscode"
+  "Vscode",
+  "ElementTags"
 ];
 const AllDisabled = mapToObj(
   FeatureNames,
@@ -35,30 +32,14 @@ const DiagramFeaturesContext = createContext(AllDisabled);
 const validate = (features) => {
   let {
     enableReadOnly,
-    enableLikeC4Model,
-    enableElementDetails,
-    enableRelationshipDetails,
-    enableRelationshipBrowser,
-    enableSearch,
     enableEdgeEditing,
     ...rest
   } = features;
-  if (!enableLikeC4Model) {
-    enableElementDetails = false;
-    enableRelationshipDetails = false;
-    enableRelationshipBrowser = false;
-    enableSearch = false;
-  }
   if (enableReadOnly) {
     enableEdgeEditing = false;
   }
   return {
     enableReadOnly,
-    enableLikeC4Model,
-    enableElementDetails,
-    enableRelationshipDetails,
-    enableRelationshipBrowser,
-    enableSearch,
     enableEdgeEditing,
     ...rest
   };
@@ -109,14 +90,5 @@ function IfEnabled({
   const enabled = useEnabledFeatures()[`enable${feature}`] === true;
   return enabled && and ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
 }
-function IfNotReadOnly({
-  children
-}) {
-  const isReadOnly = useEnabledFeatures()[`enableReadOnly`] === true;
-  if (isReadOnly) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children });
-}
 
-export { AllDisabled, DiagramFeatures, IfEnabled, IfNotReadOnly, useEnabledFeatures };
+export { AllDisabled, DiagramFeatures, IfEnabled, useEnabledFeatures };

package/dist/context/EnsureMantine.js

@@ -10,7 +10,7 @@ function EnsureMantine({ children }) {
     }
   }, []);
   if (!mantineCtx) {
-    return /* @__PURE__ */ jsx(MantineProvider, { children });
+    return /* @__PURE__ */ jsx(MantineProvider, { defaultColorScheme: "auto", children });
   }
   return /* @__PURE__ */ jsx(Fragment, { children });
 }

package/dist/context/IconRenderer.js

@@ -56,10 +56,7 @@ function IconOrShapeRenderer({
   element,
   className
 }) {
-  const icon = IconRenderer({
-    element,
-    className
-  });
+  const icon = /* @__PURE__ */ jsx(IconRenderer, { element, className });
   if (icon) {
     return icon;
   }

package/dist/context/RootContainer.js

@@ -1,8 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
+import { useId } from '@mantine/hooks';
 import { useRef, useEffect, createContext, useContext, createRef } from 'react';
 import { usePanningAtom } from './ReduceGraphics.js';
+import { TagStylesProvider } from './TagStylesContext.js';
 
 const RootContainerContext = createContext(createRef());
 function RootContainer({
@@ -10,6 +12,7 @@ function RootContainer({
   reduceGraphics = false,
   children
 }) {
+  const id = useId();
   const ref = useRef(null);
   const $isPanning = usePanningAtom();
   useEffect(() => {
@@ -24,12 +27,13 @@ function RootContainer({
   return /* @__PURE__ */ jsx(
     Box,
     {
+      id,
       className: cx("likec4-root", className),
       ref,
       ...reduceGraphics && {
         ["data-likec4-reduced-graphics"]: true
       },
-      children: /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ref, children })
+      children: /* @__PURE__ */ jsx(TagStylesProvider, { rootSelector: `#${id}`, children: /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ref, children }) })
     }
   );
 }

package/dist/context/TagStylesContext.d.ts

@@ -0,0 +1,7 @@
+import { TagSpecification } from '@likec4/core';
+import { PropsWithChildren } from 'react';
+export declare function TagStylesProvider({ children, rootSelector }: PropsWithChildren<{
+    rootSelector: string;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare function useTagSpecifications(): Record<string, TagSpecification>;
+export declare function useTagSpecification(tag: string): TagSpecification;

package/dist/context/TagStylesContext.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isTagColorSpecified } from '@likec4/core';
+import { useMantineStyleNonce } from '@mantine/core';
+import { useDeepCompareMemo } from '@react-hookz/web';
+import { createContext, useContext } from 'react';
+import { pipe, entries, flatMap, join } from 'remeda';
+import { useLikeC4Specification } from '../likec4model/useLikeC4Model.js';
+
+const TagStylesContext = createContext({});
+const radixColors = [
+  "yellow",
+  "orange",
+  "amber",
+  "tomato",
+  "red",
+  "ruby",
+  "crimson",
+  "pink",
+  "pink",
+  "purple",
+  "violet",
+  "indigo",
+  "blue",
+  "teal",
+  "grass",
+  "lime"
+];
+const generateColorVars = (spec) => {
+  const color = spec.color;
+  if (isTagColorSpecified(spec)) {
+    return `
+      --colors-likec4-tag-bg: ${color};
+      --colors-likec4-tag-bg-hover: color-mix(in srgb, ${color}, var(--colors-likec4-mix-color) 20%);
+    `;
+  }
+  if (!radixColors.includes(color)) {
+    return "";
+  }
+  let textcolor = "12";
+  if (["mint", "grass", "lime", "yellow", "amber"].includes(color)) {
+    textcolor = "dark-2";
+  }
+  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});
+  `;
+};
+function TagStylesProvider({ children, rootSelector }) {
+  const tags = useLikeC4Specification().tags;
+  const { specs, stylesheet } = useDeepCompareMemo(() => {
+    if (!tags) {
+      return { specs: {}, stylesheet: "" };
+    }
+    return {
+      specs: tags,
+      stylesheet: pipe(
+        entries(tags),
+        flatMap(([tag, spec]) => [
+          `:is(${rootSelector} [data-likec4-tag="${tag}"]) {`,
+          generateColorVars(spec),
+          "}"
+        ]),
+        join("\n")
+      )
+    };
+  }, [tags, rootSelector]);
+  return /* @__PURE__ */ jsxs(TagStylesContext.Provider, { value: specs, children: [
+    stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, { stylesheet }),
+    children
+  ] });
+}
+function TagStylesheet({ stylesheet }) {
+  const nonce = useMantineStyleNonce()?.();
+  return /* @__PURE__ */ jsx("style", { "data-likec4-tag-stylesheet": true, type: "text/css", dangerouslySetInnerHTML: { __html: stylesheet }, nonce });
+}
+function useTagSpecification(tag) {
+  const specs = useContext(TagStylesContext);
+  return specs[tag] ?? {
+    color: "tomato"
+  };
+}
+
+export { TagStylesProvider, useTagSpecification };

package/dist/custom/components.d.ts

@@ -1,4 +1,4 @@
-export { CompoundActionButton, CompoundDetailsButton, CompoundNodeContainer, CompoundTitle, DefaultHandles, ElementActionButtons, ElementDetailsButton, ElementNodeContainer, ElementShape, ElementTitle, } from '../base/primitives';
+export { CompoundActionButton, CompoundDetailsButton, CompoundNodeContainer, CompoundTitle, DefaultHandles, ElementActionButtons, ElementDetailsButton, ElementNodeContainer, ElementShape, ElementTag, ElementTags, ElementTitle, } from '../base/primitives';
 export { IconOrShapeRenderer, IconRenderer, IconRendererProvider, } from '../context/IconRenderer';
 export { CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActions, ElementDetailsButtonWithHandler, ElementNode, ElementToolbar, Toolbar, ViewGroupNode, } from '../likec4diagram/custom/nodes';
 export { IfEnabled, IfNotEnabled, IfNotReadOnly, } from '../context/DiagramFeatures';

package/dist/custom/customNodes.d.ts

@@ -1,11 +1,11 @@
-import { AnyAux, NodeModel } from '@likec4/core/model';
-import { DiagramView } from '@likec4/core/types';
+import { NodeModel } from '@likec4/core/model';
+import { Any } from '@likec4/core/types';
 import { ReactNode } from 'react';
 import { NodeProps } from '../base/types';
 import { Types } from '../likec4diagram/types';
-export type CustomElementNodeProps<M extends AnyAux = AnyAux> = {
+export type CustomElementNodeProps<M extends Any = Any> = {
     nodeProps: NodeProps<Types.ElementNodeData, 'element'>;
-    nodeModel: NodeModel.WithElement<M, DiagramView>;
+    nodeModel: NodeModel.WithElement<M>;
 };
 /**
  * Node that will be used to render the element from the model.
@@ -15,6 +15,8 @@ export type CustomElementNodeProps<M extends AnyAux = AnyAux> = {
  * - `nodeProps`: props from XYFlow
  * - `nodeModel`: LikeC4 {@link NodeModel.WithElement}
  *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
  * @example
  * ```tsx
  * import {
@@ -24,15 +26,20 @@ export type CustomElementNodeProps<M extends AnyAux = AnyAux> = {
  *   ElementTitle,
  *   ElementActions,
  *   ElementDetailsButtonWithHandler,
+ *   IfEnabled,
  *   IfNotReadOnly,
  *   ElementToolbar,
  *   DefaultHandles,
+ *   ElementTags
  * } from '@likec4/diagram/custom'
  *
  * const CustomElementNode = elementNode(({ nodeProps, nodeModel }) => (
  *   <ElementNodeContainer nodeProps={nodeProps}>
  *     <ElementShape {...nodeProps} />
  *     <ElementTitle {...nodeProps} />
+ *     <IfEnabled feature="ElementTags">
+ *       <ElementTags {...nodeProps} />
+ *     </IfEnabled>
  *     <ElementActions
  *       {...nodeProps}
  *       extraButtons={[
@@ -53,10 +60,10 @@ export type CustomElementNodeProps<M extends AnyAux = AnyAux> = {
  * ))
  * ```
  */
-export declare const elementNode: (Node: (props: CustomElementNodeProps<AnyAux>) => ReactNode) => (props: NodeProps<Types.ElementNodeData, "element">) => ReactNode;
-export type CustomDeploymentNodeProps<M extends AnyAux = AnyAux> = {
+export declare const elementNode: (Node: (props: CustomElementNodeProps<Any>) => ReactNode) => (props: NodeProps<Types.ElementNodeData, "element">) => ReactNode;
+export type CustomDeploymentNodeProps<M extends Any = Any> = {
     nodeProps: NodeProps<Types.DeploymentElementNodeData, 'deployment'>;
-    nodeModel: NodeModel.WithDeploymentElement<M, DiagramView>;
+    nodeModel: NodeModel.WithDeploymentElement<M>;
 };
 /**
  * Node that will be used to render the element from deployment model.
@@ -67,6 +74,8 @@ export type CustomDeploymentNodeProps<M extends AnyAux = AnyAux> = {
  * - `nodeProps`: props from XYFlow
  * - `nodeModel`: {@link NodeModel.WithDeploymentElement}
  *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
  * @example
  * ```tsx
  * import {
@@ -104,10 +113,10 @@ export type CustomDeploymentNodeProps<M extends AnyAux = AnyAux> = {
  * ))
  * ```
  */
-export declare const deploymentNode: (Node: (props: CustomDeploymentNodeProps<AnyAux>) => ReactNode) => (props: NodeProps<Types.DeploymentElementNodeData, "deployment">) => ReactNode;
-export type CustomCompoundElementNodeProps<M extends AnyAux = AnyAux> = {
+export declare const deploymentNode: (Node: (props: CustomDeploymentNodeProps<Any>) => ReactNode) => (props: NodeProps<Types.DeploymentElementNodeData, "deployment">) => ReactNode;
+export type CustomCompoundElementNodeProps<M extends Any = Any> = {
     nodeProps: NodeProps<Types.CompoundElementNodeData, 'compound-element'>;
-    nodeModel: NodeModel.WithElement<M, DiagramView>;
+    nodeModel: NodeModel.WithElement<M>;
 };
 /**
  * Node that will be used to render the compound element from the model.
@@ -117,6 +126,8 @@ export type CustomCompoundElementNodeProps<M extends AnyAux = AnyAux> = {
  * - `nodeProps`: props from XYFlow
  * - `nodeModel`: LikeC4 {@link NodeModel.WithElement}
  *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
  * @example
  * ```tsx
  * import {
@@ -145,10 +156,10 @@ export type CustomCompoundElementNodeProps<M extends AnyAux = AnyAux> = {
  * ))
  * ```
  */
-export declare const compoundElementNode: (Node: (props: CustomCompoundElementNodeProps<AnyAux>) => ReactNode) => (props: NodeProps<Types.CompoundElementNodeData, "compound-element">) => ReactNode;
-export type CustomCompoundDeploymentNodeProps<M extends AnyAux = AnyAux> = {
+export declare const compoundElementNode: (Node: (props: CustomCompoundElementNodeProps<Any>) => ReactNode) => (props: NodeProps<Types.CompoundElementNodeData, "compound-element">) => ReactNode;
+export type CustomCompoundDeploymentNodeProps<M extends Any = Any> = {
     nodeProps: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>;
-    nodeModel: NodeModel.WithDeploymentElement<M, DiagramView>;
+    nodeModel: NodeModel.WithDeploymentElement<M>;
 };
 /**
  * Node that will be used to render the compound from the deployment model.
@@ -158,6 +169,8 @@ export type CustomCompoundDeploymentNodeProps<M extends AnyAux = AnyAux> = {
  * - `nodeProps`: props from XYFlow
  * - `nodeModel`: LikeC4 {@link NodeModel.WithDeploymentElement}
  *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
  * @example
  * ```tsx
  * import {
@@ -180,10 +193,10 @@ export type CustomCompoundDeploymentNodeProps<M extends AnyAux = AnyAux> = {
  *   </CompoundNodeContainer>
  * ```
  */
-export declare const compoundDeploymentNode: (Node: (props: CustomCompoundDeploymentNodeProps<AnyAux>) => ReactNode) => (props: NodeProps<Types.CompoundDeploymentNodeData, "compound-deployment">) => ReactNode;
-export type CustomViewGroupNodeProps<M extends AnyAux = AnyAux> = {
+export declare const compoundDeploymentNode: (Node: (props: CustomCompoundDeploymentNodeProps<Any>) => ReactNode) => (props: NodeProps<Types.CompoundDeploymentNodeData, "compound-deployment">) => ReactNode;
+export type CustomViewGroupNodeProps<M extends Any = Any> = {
     nodeProps: NodeProps<Types.ViewGroupNodeData, 'view-group'>;
-    nodeModel: NodeModel.IsGroup<M, DiagramView>;
+    nodeModel: NodeModel.IsGroup<M>;
 };
 /**
  * Node that will be used to render the view group from the model.
@@ -192,6 +205,8 @@ export type CustomViewGroupNodeProps<M extends AnyAux = AnyAux> = {
  * - `nodeProps`: props from XYFlow
  * - `nodeModel`: LikeC4 {@link NodeModel.IsGroup}
  *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
  * @example
  * ```tsx
  * import {
@@ -208,7 +223,7 @@ export type CustomViewGroupNodeProps<M extends AnyAux = AnyAux> = {
  *   </CompoundNodeContainer>
  * ```
  */
-export declare const viewGroupNode: (Node: (props: CustomViewGroupNodeProps<AnyAux>) => ReactNode) => (props: NodeProps<Types.ViewGroupNodeData, "view-group">) => ReactNode;
+export declare const viewGroupNode: (Node: (props: CustomViewGroupNodeProps<Any>) => ReactNode) => (props: NodeProps<Types.ViewGroupNodeData, "view-group">) => ReactNode;
 export interface CustomNodes {
     element?: undefined | ((props: NodeProps<Types.ElementNodeData, 'element'>) => ReactNode);
     deployment?: undefined | ((props: NodeProps<Types.DeploymentElementNodeData, 'deployment'>) => ReactNode);

package/dist/custom/hooks.d.ts

@@ -4,7 +4,7 @@ export { type EnabledFeatures, useEnabledFeatures, } from '../context/DiagramFea
 export { useCurrentViewId, } from '../hooks/useCurrentViewId';
 export { useDiagram, useDiagramContext, } from '../hooks/useDiagram';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi, } from '../hooks/useXYFlow';
-export { useLikeC4Model, } from '../likec4model/useLikeC4Model';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from '../likec4model/useLikeC4Model';
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps';
 export { useSetState } from '../hooks/useSetState';
 export { useUpdateEffect } from '../hooks/useUpdateEffect';

package/dist/hooks/index.d.ts

@@ -1,5 +1,5 @@
 export { useMantinePortalProps } from './useMantinePortalProps';
 export { useSetState } from './useSetState';
 export { useUpdateEffect } from './useUpdateEffect';
-export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow';
+export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow';
 export type { XYStoreApi } from './useXYFlow';

package/dist/hooks/useDiagram.d.ts

@@ -1,67 +1,102 @@
-import { DiagramEdge, DiagramNode, DiagramView, EdgeId, ElementNotation, Fqn, NodeId, ViewId } from '@likec4/core';
+import { aux, DiagramEdge, DiagramNode, DiagramView, NodeId, NodeNotation as ElementNotation, scalar } from '@likec4/core/types';
+import { DependencyList } from 'react';
 import { PartialDeep } from 'type-fest';
 import { FeatureName } from '../context/DiagramFeatures';
 import { OpenSourceParams } from '../LikeC4Diagram.props';
 import { Types } from '../likec4diagram/types';
 import { AlignmentMode } from '../state/aligners';
-import { DiagramActorEvent, DiagramActorSnapshot, DiagramContext, SyncLayoutActorSnapshot } from '../state/types';
+import { DiagramActorEvent, DiagramActorRef, DiagramActorSnapshot, DiagramContext, SyncLayoutActorSnapshot } from '../state/types';
 import { useDiagramActorRef } from './safeContext';
-import { DiagramActorRef } from '..';
 export { useDiagramActorRef };
-/**
- * Diagram API
- * Mostly for internal use
- */
-export declare function useDiagram(): {
-    actor: DiagramActorRef;
-    send: (event: DiagramActorEvent) => void;
-    navigateTo: (viewId: ViewId, fromNode?: NodeId) => void;
-    navigate: (direction: "back" | "forward") => void;
-    fitDiagram: (duration?: number) => void;
-    openRelationshipsBrowser: (fqn: Fqn) => void;
-    openSource: (params: OpenSourceParams) => void;
-    openElementDetails: (fqn: Fqn, fromNode?: NodeId) => void;
-    openRelationshipDetails: (...params: [edgeId: EdgeId] | [source: Fqn, target: Fqn]) => void;
-    updateNodeData: (nodeId: NodeId, data: PartialDeep<Types.NodeData>) => void;
-    updateEdgeData: (edgeId: EdgeId, data: PartialDeep<Types.EdgeData>) => void;
-    scheduleSaveManualLayout: () => void;
+export interface DiagramApi {
+    readonly actor: DiagramActorRef;
+    /**
+     * @warning Do not use in render phase
+     */
+    readonly currentView: DiagramView;
+    /**
+     * Send event to diagram actor
+     */
+    send(event: DiagramActorEvent): void;
+    /**
+     * Navigate to view
+     */
+    navigateTo(viewId: scalar.ViewId, fromNode?: scalar.NodeId): void;
+    /**
+     * Navigate back or forward in history
+     */
+    navigate(direction: 'back' | 'forward'): void;
+    /**
+     * Fit diagram to view
+     */
+    fitDiagram(duration?: number): void;
+    /**
+     * Open relationships browser
+     */
+    openRelationshipsBrowser(fqn: scalar.Fqn): void;
+    /**
+     * If running in editor, trigger opening source file
+     */
+    openSource(params: OpenSourceParams<aux.Unknown>): void;
+    /**
+     * Open element details card
+     */
+    openElementDetails(fqn: scalar.Fqn, fromNode?: scalar.NodeId): void;
+    openRelationshipDetails(...params: [edgeId: scalar.EdgeId] | [source: scalar.Fqn, target: scalar.Fqn]): void;
+    updateNodeData(nodeId: scalar.NodeId, data: PartialDeep<Types.NodeData>): void;
+    updateEdgeData(edgeId: scalar.EdgeId, data: PartialDeep<Types.EdgeData>): void;
+    /**
+     * Schedule save manual layout
+     */
+    scheduleSaveManualLayout(): void;
     /**
      * @returns true if there was pending request to save layout
      */
-    cancelSaveManualLayout: () => boolean;
-    align: (mode: AlignmentMode) => void;
-    resetEdgeControlPoints: () => void;
-    focusNode: (nodeId: NodeId) => void;
+    cancelSaveManualLayout(): boolean;
     /**
-     * @warning Do not use in render phase
+     * Align nodes
      */
-    readonly currentView: DiagramView;
+    align(mode: AlignmentMode): void;
+    /**
+     * Reset edge control points
+     */
+    resetEdgeControlPoints(): void;
+    /**
+     * Focus node
+     */
+    focusNode(nodeId: NodeId): void;
     /**
      * @warning Do not use in render phase
      */
-    getSnapshot: () => DiagramActorSnapshot;
+    getSnapshot(): DiagramActorSnapshot;
     /**
      * @warning Do not use in render phase
      */
-    getContext: () => DiagramContext;
+    getContext(): DiagramContext;
     /**
      * @warning Do not use in render phase
      */
-    findDiagramNode: (xynodeId: string) => DiagramNode | null;
+    findDiagramNode(xynodeId: string): DiagramNode | null;
     /**
      * @warning Do not use in render phase
      */
-    findDiagramEdge: (xyedgeId: string) => DiagramEdge | null;
-    startWalkthrough: () => void;
-    walkthroughStep: (direction?: "next" | "previous") => void;
-    stopWalkthrough: () => void;
-    toggleFeature: (feature: FeatureName, forceValue?: boolean) => void;
-    highlightNotation: (notation: ElementNotation, kind?: string) => void;
-    unhighlightNotation: () => void;
-};
+    findDiagramEdge(xyedgeId: string): DiagramEdge | null;
+    startWalkthrough(): void;
+    walkthroughStep(direction?: 'next' | 'previous'): void;
+    stopWalkthrough(): void;
+    toggleFeature(feature: FeatureName, forceValue?: boolean): void;
+    highlightNotation(notation: ElementNotation, kind?: string): void;
+    unhighlightNotation(): void;
+    openSearch(searchValue?: string): void;
+}
+/**
+ * Diagram API
+ * Mostly for internal use
+ */
+export declare function useDiagram(): DiagramApi;
 export declare function useDiagramActorSnapshot<T = unknown>(selector: (state: DiagramActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
 export declare function useDiagramSyncLayoutState<T = unknown>(selector: (state: SyncLayoutActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
 /**
  * Read diagram context
  */
-export declare function useDiagramContext<T = unknown>(selector: (context: DiagramContext) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
+export declare function useDiagramContext<T = unknown>(selector: (context: DiagramContext) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean, deps?: DependencyList): T;

package/dist/hooks/useDiagram.js

@@ -1,7 +1,7 @@
 import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 import { findDiagramEdge, findDiagramNode } from '../state/utils.js';
 import { useDiagramActorRef } from './safeContext.js';
 
@@ -112,6 +112,9 @@ function useDiagram() {
     },
     unhighlightNotation: () => {
       actor.send({ type: "notations.unhighlight" });
+    },
+    openSearch: (searchValue) => {
+      actor.send({ type: "open.search", ...searchValue && { search: searchValue } });
     }
   }), [actor]);
 }
@@ -123,9 +126,10 @@ function useDiagramSyncLayoutState(selector, compare = shallowEqual) {
   const syncLayoutActorRef = useDiagramActorSnapshot((s) => s.context.syncLayoutActorRef);
   return useSelector(syncLayoutActorRef, useCallbackRef(selector), compare);
 }
-function useDiagramContext(selector, compare = shallowEqual) {
+function useDiagramContext(selector, compare = shallowEqual, deps) {
   const actorRef = useDiagramActorRef();
-  return useSelector(actorRef, useCallbackRef((s) => selector(s.context)), compare);
+  const select = useCallback((s) => selector(s.context), deps ?? []);
+  return useSelector(actorRef, select, compare);
 }
 
 export { useDiagram, useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext, useDiagramSyncLayoutState };

package/dist/hooks/useMantinePortalProps.d.ts

@@ -2,8 +2,8 @@ export declare function useMantinePortalProps(): {
     portalProps: {
         target: HTMLDivElement;
     };
-    withinPortal: boolean;
+    withinPortal: true;
 } | {
-    withinPortal: boolean;
+    withinPortal: false;
     portalProps?: never;
 };

package/dist/hooks/useSearchActor.d.ts

@@ -0,0 +1,2 @@
+import { SearchActorRef } from '../search/searchActor';
+export declare function useSearchActorRef(): SearchActorRef | null;

package/dist/hooks/useSearchActor.js

@@ -0,0 +1,10 @@
+import { useDiagramActorSnapshot } from './useDiagram.js';
+
+const select = (s) => {
+  return s.children.search ?? null;
+};
+function useSearchActorRef() {
+  return useDiagramActorSnapshot(select, Object.is);
+}
+
+export { useSearchActorRef };