@likec4/diagram 1.21.1 → 1.22.1

package/dist/LikeC4Diagram.js

@@ -4,7 +4,6 @@ import { useRef } from "react";
 import { isEmpty } from "remeda";
 import { LikeC4CustomColors } from "./LikeC4CustomColors.js";
 import { DiagramActor } from "./likec4diagram/DiagramActor.js";
-import { DiagramUI } from "./likec4diagram/DiagramUI.js";
 import { useViewToNodesEdges } from "./likec4diagram/useViewToNodesEdges.js";
 import { LikeC4DiagramXYFlow } from "./likec4diagram/XYFlow.js";
 import { useLikeC4Model } from "./likec4model/useLikeC4Model.js";
@@ -113,7 +112,7 @@ function LikeC4Diagram({
               {
                 fitView,
                 ...initialRef.current,
-                children: /* @__PURE__ */ jsxs(
+                children: /* @__PURE__ */ jsx(
                   DiagramActor,
                   {
                     input: {
@@ -123,17 +122,14 @@ function LikeC4Diagram({
                       fitViewPadding,
                       ...xyNodesEdges
                     },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        LikeC4DiagramXYFlow,
-                        {
-                          nodesDraggable,
-                          nodesSelectable,
-                          background
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(DiagramUI, {})
-                    ]
+                    children: /* @__PURE__ */ jsx(
+                      LikeC4DiagramXYFlow,
+                      {
+                        nodesDraggable,
+                        nodesSelectable,
+                        background
+                      }
+                    )
                   }
                 )
               }

package/dist/base/index.d.ts

@@ -1,3 +1,2 @@
 export { BaseXYFlow, type BaseXYFlowProps } from './BaseXYFlow';
 export { Base, type EdgeProps, type NodeProps, type NonOptional, type ReactFlowEdge, type ReactFlowNode, } from './types';
-export { Link } from './Link';

package/dist/base/primitives/element/styles.css.js

@@ -1,6 +1,6 @@
 /* empty css                                        */
 /* empty css                          */
-var iconSize = "var(--v7x5jk2)";
+var iconSize = "var(--likec4-icon-size)";
 export {
   iconSize
 };

package/dist/{base → components}/Link.css.js

@@ -1,7 +1,7 @@
 /* empty css                        */
-var elementLink = "_180738q0";
-var linkIcon = "_180738q1";
-var linkTitleBox = "_180738q2";
+var elementLink = "_1acgss10";
+var linkIcon = "_1acgss11";
+var linkTitleBox = "_1acgss12";
 export {
   elementLink,
   linkIcon,

package/dist/components/SearchControl.css.d.ts

@@ -0,0 +1,2 @@
+export declare const root: string;
+export declare const shortcut: string;

package/dist/components/SearchControl.css.js

@@ -0,0 +1,7 @@
+/* empty css                                 */
+var root = "xmhqho2";
+var shortcut = "xmhqho3";
+export {
+  root,
+  shortcut
+};

package/dist/components/SearchControl.d.ts

@@ -0,0 +1,5 @@
+import { ElementProps, UnstyledButtonProps } from '@mantine/core';
+interface SearchControlProps extends UnstyledButtonProps, ElementProps<'button'> {
+}
+export declare function SearchControl({ className, ...others }: SearchControlProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SearchControl.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { UnstyledButton, Group, rem, Text } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+import { isMacOs } from "@xyflow/system";
+import clsx from "clsx";
+import { shortcut, root } from "./SearchControl.css.js";
+function SearchControl({ className, ...others }) {
+  const isMac = isMacOs();
+  return /* @__PURE__ */ jsx(UnstyledButton, { ...others, className: clsx(root, className), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+    /* @__PURE__ */ jsx(IconSearch, { style: { width: rem(15), height: rem(15) }, stroke: 2 }),
+    /* @__PURE__ */ jsx(Text, { fz: "sm", fw: "500", pr: 50, children: "Search" }),
+    /* @__PURE__ */ jsx(Text, { fw: 700, className: shortcut, children: isMac ? "⌘ + K" : "Ctrl + K" })
+  ] }) });
+}
+export {
+  SearchControl
+};

package/dist/context/DiagramFeatures.d.ts

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

package/dist/context/IconRenderer.d.ts

@@ -1,3 +1,4 @@
+import { ElementShape } from '@likec4/core';
 import { ElementIconRenderer } from '../LikeC4Diagram.props';
 import { Provider } from 'react';
 export declare const IconRendererProvider: Provider<ElementIconRenderer | null>;
@@ -9,3 +10,12 @@ export declare function IconRenderer({ element, className, }: {
     };
     className: string;
 }): import("react/jsx-runtime").JSX.Element | null;
+export declare function IconOrShapeRenderer({ element, className, }: {
+    element: {
+        id: string;
+        title: string;
+        shape: ElementShape;
+        icon?: string | null | undefined;
+    };
+    className: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/context/IconRenderer.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { IconCylinder, IconRectangularPrism, IconReorder, IconUser, IconDeviceMobile, IconBrowser } from "@tabler/icons-react";
 import clsx from "clsx";
 import { createContext, useContext } from "react";
 const IconRendererContext = createContext(null);
@@ -32,7 +33,40 @@ function IconRenderer({
     }
   );
 }
+const ShapeIcons = {
+  browser: IconBrowser,
+  cylinder: IconCylinder,
+  mobile: IconDeviceMobile,
+  person: IconUser,
+  queue: IconReorder,
+  rectangle: IconRectangularPrism,
+  storage: IconCylinder
+};
+function IconOrShapeRenderer({
+  element,
+  className
+}) {
+  const icon = IconRenderer({
+    element,
+    className
+  });
+  if (icon) {
+    return icon;
+  }
+  const ShapeIcon = ShapeIcons[element.shape];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        className,
+        "likec4-shape-icon"
+      ),
+      children: /* @__PURE__ */ jsx(ShapeIcon, {})
+    }
+  );
+}
 export {
+  IconOrShapeRenderer,
   IconRenderer,
   IconRendererProvider
 };

package/dist/hooks/useCurrentViewId.js

@@ -0,0 +1,8 @@
+import { useDiagramContext } from "./useDiagramContext.js";
+const selectViewId = (state) => state.view.id;
+function useCurrentViewId() {
+  return useDiagramContext(selectViewId);
+}
+export {
+  useCurrentViewId
+};

package/dist/hooks/useDiagram.d.ts

@@ -1,5 +1,6 @@
 import { EdgeId, Fqn, NodeId, ViewId, DiagramView, ViewChange, RelationId, Color, RelationshipLineType, NonEmptyArray, Point, RelationshipArrowType, BBox, XYPoint, DiagramNode, DiagramEdge } from '@likec4/core';
 import { PartialDeep } from 'type-fest';
+import { FeatureName } from '../context/DiagramFeatures';
 import { OpenSourceParams } from '../LikeC4Diagram.props';
 import { AlignmentMode } from '../likec4diagram/state/aligners';
 import { DiagramContext, Events, Input, ActionArg } from '../likec4diagram/state/machine';
@@ -14,7 +15,6 @@ import { ReactNode, CSSProperties } from 'react';
 import { Input, XYStoreApi, Events } from '../overlays/relationships-browser/actor';
 import { LayoutRelationshipsViewResult } from '../overlays/relationships-browser/-useRelationshipsView';
 import { focusedBounds } from '../likec4diagram/state/utils';
-import { EnabledFeatures } from '../context';
 export declare function useDiagram(): {
     send: (event: Events) => void;
     navigateTo: (viewId: ViewId, fromNode?: NodeId) => void;
@@ -1028,6 +1028,9 @@ export declare function useDiagram(): {
                 enableLikeC4Model: boolean;
                 enableVscode: boolean;
             };
+            toggledFeatures: {
+                enableReadOnly: true;
+            };
             initialized: false;
             viewportChangedManually: false;
             lastOnNavigate: null;
@@ -1787,6 +1790,10 @@ export declare function useDiagram(): {
                                     toPosition: XYPoint;
                                 };
                             };
+                            updateFeatures: {
+                                type: "updateFeatures";
+                                params: NonReducibleUnknown;
+                            };
                         }>, Values<{
                             "enabled: FitView": {
                                 type: "enabled: FitView";
@@ -4487,6 +4494,10 @@ export declare function useDiagram(): {
                             toPosition: XYPoint;
                         };
                     };
+                    updateFeatures: {
+                        type: "updateFeatures";
+                        params: NonReducibleUnknown;
+                    };
                 }>, Values<{
                     "enabled: FitView": {
                         type: "enabled: FitView";
@@ -5731,6 +5742,10 @@ export declare function useDiagram(): {
                                     toPosition: XYPoint;
                                 };
                             };
+                            updateFeatures: {
+                                type: "updateFeatures";
+                                params: NonReducibleUnknown;
+                            };
                         }>, Values<{
                             "enabled: FitView": {
                                 type: "enabled: FitView";
@@ -6036,6 +6051,10 @@ export declare function useDiagram(): {
                                             toPosition: XYPoint;
                                         };
                                     };
+                                    updateFeatures: {
+                                        type: "updateFeatures";
+                                        params: NonReducibleUnknown;
+                                    };
                                 }>, Values<{
                                     "enabled: FitView": {
                                         type: "enabled: FitView";
@@ -7202,6 +7221,10 @@ export declare function useDiagram(): {
                                     toPosition: XYPoint;
                                 };
                             };
+                            updateFeatures: {
+                                type: "updateFeatures";
+                                params: NonReducibleUnknown;
+                            };
                         }>, Values<{
                             "enabled: FitView": {
                                 type: "enabled: FitView";
@@ -7515,6 +7538,10 @@ export declare function useDiagram(): {
                             toPosition: XYPoint;
                         };
                     };
+                    updateFeatures: {
+                        type: "updateFeatures";
+                        params: NonReducibleUnknown;
+                    };
                 }>, Values<{
                     "enabled: FitView": {
                         type: "enabled: FitView";
@@ -7556,9 +7583,9 @@ export declare function useDiagram(): {
             };
         };
         readonly on: {
-            readonly 'xyflow.applyNodeChages': {
+            readonly 'xyflow.applyNodeChanges': {
                 readonly actions: ActionFunction<DiagramContext, {
-                    type: "xyflow.applyNodeChages";
+                    type: "xyflow.applyNodeChanges";
                     changes: NodeChange<Types.Node>[];
                 }, Events, undefined, Values<{
                     hotkeyActor: {
@@ -7771,9 +7798,9 @@ export declare function useDiagram(): {
                     };
                 }>, never, never, never, never>;
             };
-            readonly 'xyflow.applyEdgeChages': {
+            readonly 'xyflow.applyEdgeChanges': {
                 readonly actions: ActionFunction<DiagramContext, {
-                    type: "xyflow.applyEdgeChages";
+                    type: "xyflow.applyEdgeChanges";
                     changes: EdgeChange<Types.Edge>[];
                 }, Events, undefined, Values<{
                     hotkeyActor: {
@@ -9341,6 +9368,10 @@ export declare function useDiagram(): {
                             toPosition: XYPoint;
                         };
                     };
+                    updateFeatures: {
+                        type: "updateFeatures";
+                        params: NonReducibleUnknown;
+                    };
                 }>, Values<{
                     "enabled: FitView": {
                         type: "enabled: FitView";
@@ -9596,10 +9627,10 @@ export declare function useDiagram(): {
                 }>, never, never, never, never>;
             };
             readonly 'update.features': {
-                readonly actions: ActionFunction<DiagramContext, {
-                    type: "update.features";
-                    features: EnabledFeatures;
-                }, Events, undefined, Values<{
+                readonly actions: "updateFeatures";
+            };
+            readonly 'update.nodeData': {
+                readonly actions: ActionFunction<DiagramContext, Events, Events, undefined, Values<{
                     hotkeyActor: {
                         src: "hotkeyActor";
                         logic: CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent>;
@@ -9810,7 +9841,7 @@ export declare function useDiagram(): {
                     };
                 }>, never, never, never, never>;
             };
-            readonly 'update.nodeData': {
+            readonly 'update.edgeData': {
                 readonly actions: ActionFunction<DiagramContext, Events, Events, undefined, Values<{
                     hotkeyActor: {
                         src: "hotkeyActor";
@@ -10022,8 +10053,27 @@ export declare function useDiagram(): {
                     };
                 }>, never, never, never, never>;
             };
-            readonly 'update.edgeData': {
-                readonly actions: ActionFunction<DiagramContext, Events, Events, undefined, Values<{
+            readonly 'layout.align': {
+                readonly guard: "not readonly";
+                readonly actions: readonly [{
+                    readonly type: "layout.align";
+                    readonly params: ({ event }: {
+                        context: DiagramContext;
+                        event: {
+                            type: "layout.align";
+                            mode: AlignmentMode;
+                        };
+                    }) => {
+                        mode: AlignmentMode;
+                    };
+                }, ActionFunction<DiagramContext, {
+                    type: "layout.align";
+                    mode: AlignmentMode;
+                }, Events, undefined, never, never, never, never, never>];
+            };
+            readonly 'layout.resetEdgeControlPoints': {
+                readonly guard: "not readonly";
+                readonly actions: readonly [ ActionFunction<DiagramContext, Events, Events, undefined, Values<{
                     hotkeyActor: {
                         src: "hotkeyActor";
                         logic: CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent>;
@@ -10232,29 +10282,26 @@ export declare function useDiagram(): {
                         }, "active", any, any, any>, Events, Input, any, any>;
                         id: "relationshipsBrowser";
                     };
-                }>, never, never, never, never>;
+                }>, never, never, never, never>, ActionFunction<DiagramContext, {
+                    type: "layout.resetEdgeControlPoints";
+                }, Events, undefined, never, never, never, never, never>];
             };
-            readonly 'layout.align': {
-                readonly guard: "not readonly";
-                readonly actions: readonly [{
-                    readonly type: "layout.align";
-                    readonly params: ({ event }: {
-                        context: DiagramContext;
-                        event: {
-                            type: "layout.align";
-                            mode: AlignmentMode;
-                        };
-                    }) => {
-                        mode: AlignmentMode;
-                    };
-                }, ActionFunction<DiagramContext, {
-                    type: "layout.align";
-                    mode: AlignmentMode;
+            readonly 'xyflow.resized': {
+                readonly guard: ({ context }: {
+                    context: DiagramContext;
+                }) => boolean;
+                readonly actions: readonly [ CancelAction<DiagramContext, {
+                    type: "xyflow.resized";
+                }, undefined, Events>, ActionFunction<DiagramContext, {
+                    type: "xyflow.resized";
                 }, Events, undefined, never, never, never, never, never>];
             };
-            readonly 'layout.resetEdgeControlPoints': {
-                readonly guard: "not readonly";
-                readonly actions: readonly [ ActionFunction<DiagramContext, Events, Events, undefined, Values<{
+            readonly 'open.elementDetails': {
+                readonly actions: ActionFunction<DiagramContext, {
+                    type: "open.elementDetails";
+                    fqn: Fqn;
+                    fromNode?: NodeId | undefined;
+                }, Events, undefined, Values<{
                     hotkeyActor: {
                         src: "hotkeyActor";
                         logic: CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent>;
@@ -10463,25 +10510,37 @@ export declare function useDiagram(): {
                         }, "active", any, any, any>, Events, Input, any, any>;
                         id: "relationshipsBrowser";
                     };
-                }>, never, never, never, never>, ActionFunction<DiagramContext, {
-                    type: "layout.resetEdgeControlPoints";
-                }, Events, undefined, never, never, never, never, never>];
+                }>, never, never, never, never>;
+                readonly target: ".overlay.elementDetails";
             };
-            readonly 'xyflow.resized': {
-                readonly guard: ({ context }: {
-                    context: DiagramContext;
-                }) => boolean;
-                readonly actions: readonly [ CancelAction<DiagramContext, {
-                    type: "xyflow.resized";
-                }, undefined, Events>, ActionFunction<DiagramContext, {
-                    type: "xyflow.resized";
-                }, Events, undefined, never, never, never, never, never>];
+            readonly 'open.relationshipDetails': {
+                readonly target: ".overlay.relationshipDetails";
             };
-            readonly 'open.elementDetails': {
+            readonly 'open.relationshipsBrowser': {
+                readonly target: ".overlay.relationshipsBrowser";
+            };
+            readonly 'open.source': {
+                readonly actions: {
+                    readonly type: "trigger:OpenSource";
+                    readonly params: (data: {
+                        context: DiagramContext;
+                        event: {
+                            type: "open.source";
+                        } & OpenSourceParams;
+                    }) => {
+                        type: "open.source";
+                    } & OpenSourceParams;
+                };
+            };
+            readonly 'walkthrough.start': {
+                readonly guard: "is dynamic view";
+                readonly target: ".walkthrough";
+            };
+            readonly 'toggle.feature': {
                 readonly actions: ActionFunction<DiagramContext, {
-                    type: "open.elementDetails";
-                    fqn: Fqn;
-                    fromNode?: NodeId | undefined;
+                    type: "toggle.feature";
+                    feature: FeatureName;
+                    forceValue?: boolean;
                 }, Events, undefined, Values<{
                     hotkeyActor: {
                         src: "hotkeyActor";
@@ -10692,30 +10751,6 @@ export declare function useDiagram(): {
                         id: "relationshipsBrowser";
                     };
                 }>, never, never, never, never>;
-                readonly target: ".overlay.elementDetails";
-            };
-            readonly 'open.relationshipDetails': {
-                readonly target: ".overlay.relationshipDetails";
-            };
-            readonly 'open.relationshipsBrowser': {
-                readonly target: ".overlay.relationshipsBrowser";
-            };
-            readonly 'open.source': {
-                readonly actions: {
-                    readonly type: "trigger:OpenSource";
-                    readonly params: (data: {
-                        context: DiagramContext;
-                        event: {
-                            type: "open.source";
-                        } & OpenSourceParams;
-                    }) => {
-                        type: "open.source";
-                    } & OpenSourceParams;
-                };
-            };
-            readonly 'walkthrough.start': {
-                readonly guard: "is dynamic view";
-                readonly target: ".walkthrough";
             };
         };
         readonly exit: readonly [ StopAction<DiagramContext, Events, undefined, Events>, StopAction<DiagramContext, Events, undefined, Events>, ActionFunction<DiagramContext, Events, Events, undefined, Values<{
@@ -10944,4 +10979,5 @@ export declare function useDiagram(): {
     startWalkthrough: () => void;
     walkthroughStep: (direction?: "next" | "previous") => void;
     stopWalkthrough: () => void;
+    toggleFeature: (feature: FeatureName, forceValue?: boolean) => void;
 };

package/dist/hooks/useDiagram.js

@@ -111,6 +111,9 @@ function useDiagram() {
     },
     stopWalkthrough: () => {
       actor.send({ type: "walkthrough.end" });
+    },
+    toggleFeature: (feature, forceValue) => {
+      actor.send({ type: "toggle.feature", feature, ...forceValue !== void 0 && { forceValue } });
     }
   }), [actor]);
 }

package/dist/likec4diagram/DiagramActor.js

@@ -5,10 +5,11 @@ import { useEffect } from "react";
 import { useDiagramActor } from "../hooks/useDiagramActor.js";
 import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
 import { LikeC4ViewMachineContextProvider } from "./state/actorContext.js";
+import { useDiagramContext } from "../hooks/useDiagramContext.js";
 import { diagramMachine } from "./state/machine.js";
 import { syncManualLayoutActor } from "./state/syncManualLayoutActor.js";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
-import { useEnabledFeatures } from "../context/DiagramFeatures.js";
+import { useEnabledFeatures, DiagramFeatures } from "../context/DiagramFeatures.js";
 function DiagramActor({ input, children }) {
   const { onNavigateTo, onOpenSource, onChange } = useDiagramEventHandlers();
   const xystore = useStoreApi();
@@ -47,7 +48,7 @@ function DiagramActor({ input, children }) {
       },
       children: [
         /* @__PURE__ */ jsx(SyncStore, { input }),
-        children
+        /* @__PURE__ */ jsx(DiagramActorToggledFeatures, { children })
       ]
     }
   );
@@ -66,6 +67,16 @@ const SyncStore = ({ input: { view, xyedges, xynodes, ...inputs } }) => {
   }, [send, view, xyedges, xynodes]);
   return null;
 };
+function DiagramActorToggledFeatures({ children }) {
+  const toggledFeatures = useDiagramContext((s) => s.toggledFeatures);
+  return /* @__PURE__ */ jsx(
+    DiagramFeatures,
+    {
+      overrides: toggledFeatures,
+      children
+    }
+  );
+}
 export {
   DiagramActor
 };

package/dist/likec4diagram/DiagramUI.js

@@ -1,5 +1,4 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { LikeC4Search } from "../LikeC4Search.js";
 import { Overlays } from "../overlays/Overlays.js";
 import { Controls } from "./ui/controls/Controls.js";
 import { IfEnabled } from "../context/DiagramFeatures.js";
@@ -10,7 +9,6 @@ function DiagramUI() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Controls, {}),
     /* @__PURE__ */ jsx(Overlays, {}),
-    /* @__PURE__ */ jsx(IfEnabled, { feature: "Search", children: /* @__PURE__ */ jsx(LikeC4Search, {}) }),
     /* @__PURE__ */ jsx(IfEnabled, { feature: "ViewTitle", children: /* @__PURE__ */ jsx(DiagramTitlePanel, {}) }),
     /* @__PURE__ */ jsx(IfEnabled, { feature: "Notations", children: /* @__PURE__ */ jsx(NotationPanel, {}) }),
     /* @__PURE__ */ jsx(IfEnabled, { feature: "DynamicViewWalkthrough", children: /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}) })

package/dist/likec4diagram/XYFlow.d.ts

@@ -1,6 +1,11 @@
 import { EnforceOptional } from 'type-fest/source/enforce-optional';
 import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
+import { NamedExoticComponent } from 'react';
 type Picked = EnforceOptional<Pick<LikeC4DiagramProperties, 'background' | 'nodesDraggable' | 'nodesSelectable'>>;
 export type LikeC4DiagramXYFlowProps = Required<Picked>;
-export declare const LikeC4DiagramXYFlow: ({ background, ...rest }: LikeC4DiagramXYFlowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LikeC4DiagramXYFlow: NamedExoticComponent<Required<{
+    background?: "solid" | "transparent" | "dots" | "lines" | "cross";
+    nodesDraggable?: boolean;
+    nodesSelectable?: boolean;
+}>>;
 export {};