@likec4/diagram 1.34.2 → 1.36.0

package/dist/navigationpanel/actor.d.ts

@@ -0,0 +1,296 @@
+import { ViewId } from '@likec4/core/types';
+import { ActorLogicFrom, ActorRefFrom, SnapshotFrom, StateMachine, Values, NonReducibleUnknown, MetaObject, ActorRefFromLogic, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction } from 'xstate';
+import { CurrentViewModel } from '../likec4model/LikeC4ModelContext';
+export interface NavigationPanelActorInput {
+    viewModel: CurrentViewModel;
+}
+export type NavigationPanelActorEvent = {
+    type: 'update.inputs';
+    inputs: NavigationPanelActorInput;
+} | {
+    type: 'searchQuery.change';
+    value: string;
+} | {
+    type: 'searchQuery.changed';
+} | {
+    type: 'select.folder';
+    folderPath: string;
+} | {
+    type: 'select.view';
+    viewId: ViewId;
+} | {
+    type: 'breadcrumbs.mouseLeave';
+} | {
+    type: 'breadcrumbs.mouseEnter.root';
+} | {
+    type: 'breadcrumbs.mouseLeave.root';
+} | {
+    type: 'breadcrumbs.mouseEnter.folder';
+    folderPath: string;
+} | {
+    type: 'breadcrumbs.mouseLeave.folder';
+    folderPath: string;
+} | {
+    type: 'breadcrumbs.mouseEnter.viewtitle';
+} | {
+    type: 'breadcrumbs.mouseLeave.viewtitle';
+} | {
+    type: 'breadcrumbs.click.root';
+} | {
+    type: 'breadcrumbs.click.folder';
+    folderPath: string;
+} | {
+    type: 'breadcrumbs.click.viewtitle';
+} | {
+    type: 'dropdown.mouseEnter';
+} | {
+    type: 'dropdown.mouseLeave';
+} | {
+    type: 'dropdown.dismiss';
+};
+export type NavigationPanelActorEmitted = {
+    type: 'navigateTo';
+    viewId: ViewId;
+};
+export type BreadcrumbItem = {
+    type: 'folder';
+    folderPath: string;
+    title: string;
+} | {
+    type: 'viewtitle';
+    title: string;
+};
+export type DropdownColumnItem = {
+    type: 'folder';
+    folderPath: string;
+    title: string;
+    selected: boolean;
+} | {
+    type: 'view';
+    viewType: 'element' | 'deployment' | 'dynamic' | 'index';
+    viewId: string;
+    title: string;
+    description: string | null;
+    selected: boolean;
+};
+export interface NavigationPanelActorContext {
+    viewModel: CurrentViewModel;
+    /**
+     * Who activated the dropdown
+     * (if `click` then the dropdown is always open until dismissed)
+     * @default 'hover'
+     */
+    activatedBy: 'hover' | 'click';
+    /**
+     * The folder that is currently selected in the dropdown
+     * By default it is the root
+     */
+    selectedFolder: string;
+    searchQuery: string;
+}
+declare const _actorLogic: StateMachine<NavigationPanelActorContext, NavigationPanelActorEvent, {}, never, Values<{
+    "update activatedBy": {
+        type: "update activatedBy";
+        params: NonReducibleUnknown;
+    };
+    "keep dropdown open": {
+        type: "keep dropdown open";
+        params: NonReducibleUnknown;
+    };
+    "update selected folder": {
+        type: "update selected folder";
+        params: NonReducibleUnknown;
+    };
+    "reset selected folder": {
+        type: "reset selected folder";
+        params: NonReducibleUnknown;
+    };
+    "update inputs": {
+        type: "update inputs";
+        params: NonReducibleUnknown;
+    };
+    "reset search query": {
+        type: "reset search query";
+        params: NonReducibleUnknown;
+    };
+    "update search query": {
+        type: "update search query";
+        params: NonReducibleUnknown;
+    };
+    "emit navigateTo": {
+        type: "emit navigateTo";
+        params: NonReducibleUnknown;
+    };
+}>, Values<{
+    "was opened on hover": {
+        type: "was opened on hover";
+        params: unknown;
+    };
+    "has search query": {
+        type: "has search query";
+        params: unknown;
+    };
+    "search query is empty": {
+        type: "search query is empty";
+        params: unknown;
+    };
+}>, "open timeout" | "close timeout", "pending" | "idle" | {
+    active: "search" | "opened" | "closing" | "decide";
+}, "active", NavigationPanelActorInput, NonReducibleUnknown, NavigationPanelActorEmitted, MetaObject, {
+    readonly id: "breadcrumbs";
+    readonly context: ({ input }: {
+        spawn: {
+            <TSrc extends never>(logic: TSrc, ...[options]: never): ActorRefFromLogic<never>;
+            <TLogic extends AnyActorLogic>(src: TLogic, ...[options]: ConditionalRequired<[options?: {
+                id?: never;
+                systemId?: string;
+                input?: InputFrom<TLogic>;
+                syncSnapshot?: boolean;
+            } & { [K in RequiredLogicInput<TLogic>]: unknown; }], IsNotNever<RequiredLogicInput<TLogic>>>): ActorRefFromLogic<TLogic>;
+        };
+        input: NavigationPanelActorInput;
+        self: ActorRef<MachineSnapshot<NavigationPanelActorContext, NavigationPanelActorEvent, Record<string, AnyActorRef | undefined>, StateValue, string, unknown, any, any>, NavigationPanelActorEvent, AnyEventObject>;
+    }) => {
+        breadcrumbs: never[];
+        activatedBy: "hover";
+        selectedFolder: string;
+        searchQuery: string;
+        folderColumns: never[];
+        viewModel: CurrentViewModel;
+    };
+    readonly initial: "idle";
+    readonly entry: readonly ["update activatedBy", "reset selected folder"];
+    readonly on: {
+        readonly 'update.inputs': {
+            readonly actions: "update inputs";
+        };
+        readonly 'searchQuery.change': {
+            readonly actions: readonly ["update search query", ActionFunction<NavigationPanelActorContext, {
+                type: "searchQuery.change";
+                value: string;
+            }, NavigationPanelActorEvent, undefined, never, never, never, "open timeout" | "close timeout", never>];
+        };
+    };
+    readonly states: {
+        readonly idle: {
+            readonly id: "idle";
+            readonly on: {
+                readonly 'breadcrumbs.mouseEnter.*': {
+                    readonly target: "pending";
+                    readonly actions: "update activatedBy";
+                };
+                readonly 'breadcrumbs.click.*': {
+                    readonly target: "active";
+                    readonly actions: "update activatedBy";
+                };
+            };
+        };
+        readonly pending: {
+            readonly on: {
+                readonly 'breadcrumbs.mouseEnter.*': {
+                    readonly actions: "update activatedBy";
+                };
+                readonly 'breadcrumbs.mouseLeave.*': {
+                    readonly target: "idle";
+                };
+                readonly 'breadcrumbs.click.*': {
+                    readonly target: "active";
+                    readonly actions: "update activatedBy";
+                };
+            };
+            readonly after: {
+                readonly 'open timeout': {
+                    readonly target: "active";
+                };
+            };
+        };
+        readonly active: {
+            readonly tags: readonly ["active"];
+            readonly initial: "decide";
+            readonly on: {
+                readonly 'dropdown.dismiss': {
+                    readonly target: "#idle";
+                };
+                readonly 'breadcrumbs.mouseLeave': {
+                    readonly guard: "was opened on hover";
+                    readonly target: ".closing";
+                };
+                readonly 'dropdown.mouseLeave': {
+                    readonly guard: "was opened on hover";
+                    readonly target: ".closing";
+                };
+                readonly 'searchQuery.changed': {
+                    readonly target: ".decide";
+                };
+            };
+            readonly states: {
+                readonly decide: {
+                    readonly always: readonly [{
+                        readonly guard: "has search query";
+                        readonly target: "search";
+                    }, {
+                        readonly target: "opened";
+                    }];
+                };
+                readonly opened: {
+                    readonly on: {
+                        readonly 'searchQuery.changed': {
+                            readonly guard: "has search query";
+                            readonly actions: "keep dropdown open";
+                            readonly target: "search";
+                        };
+                        readonly 'breadcrumbs.click.viewtitle': {
+                            readonly actions: "reset selected folder";
+                        };
+                        readonly 'breadcrumbs.click.*': {
+                            readonly actions: "update selected folder";
+                        };
+                        readonly 'select.folder': {
+                            readonly actions: readonly ["keep dropdown open", "update selected folder"];
+                        };
+                        readonly 'select.view': {
+                            readonly actions: readonly ["emit navigateTo"];
+                        };
+                    };
+                };
+                readonly search: {
+                    readonly on: {
+                        readonly 'breadcrumbs.click.viewtitle': {
+                            readonly actions: readonly ["reset search query", "reset selected folder"];
+                            readonly target: "opened";
+                        };
+                        readonly 'breadcrumbs.click.*': {
+                            readonly actions: readonly ["reset search query", "update selected folder"];
+                            readonly target: "opened";
+                        };
+                        readonly 'select.view': {
+                            readonly actions: readonly ["emit navigateTo"];
+                        };
+                    };
+                };
+                readonly closing: {
+                    readonly on: {
+                        readonly 'breadcrumbs.mouseEnter.*': {
+                            readonly target: "decide";
+                        };
+                        readonly 'dropdown.mouseEnter': {
+                            readonly target: "decide";
+                        };
+                    };
+                    readonly after: {
+                        readonly 'close timeout': {
+                            readonly target: "#idle";
+                        };
+                    };
+                };
+            };
+        };
+    };
+}>;
+export interface NavigationPanelActorLogic extends ActorLogicFrom<typeof _actorLogic> {
+}
+export declare const navigationPanelActorLogic: NavigationPanelActorLogic;
+export type NavigationPanelActorSnapshot = SnapshotFrom<NavigationPanelActorLogic>;
+export interface NavigationPanelActorRef extends ActorRefFrom<NavigationPanelActorLogic> {
+}
+export {};

package/dist/navigationpanel/actor.js

@@ -0,0 +1,239 @@
+import { ViewId } from '@likec4/core/types';
+import { isEmpty } from 'remeda';
+import { setup, emit, assign, assertEvent, raise } from 'xstate';
+
+const _actorLogic = setup({
+  types: {
+    context: {},
+    events: {},
+    tags: "active",
+    input: {},
+    emitted: {}
+  },
+  delays: {
+    "open timeout": 500,
+    "close timeout": 350
+  },
+  actions: {
+    "update activatedBy": assign({
+      activatedBy: ({ context, event }) => {
+        switch (true) {
+          case event.type.includes("click"):
+            return "click";
+          case event.type.includes("mouseEnter"):
+            return "hover";
+          default:
+            return context.activatedBy;
+        }
+      }
+    }),
+    "keep dropdown open": assign({
+      activatedBy: "click"
+    }),
+    "update selected folder": assign(({ event }) => {
+      if (event.type === "breadcrumbs.click.root") {
+        return { selectedFolder: "" };
+      }
+      assertEvent(event, ["breadcrumbs.click.folder", "select.folder"]);
+      return { selectedFolder: event.folderPath };
+    }),
+    "reset selected folder": assign({
+      selectedFolder: ({ context }) => context.viewModel.folder.path
+    }),
+    "update inputs": assign(({ context, event }) => {
+      assertEvent(event, "update.inputs");
+      const viewChanged = event.inputs.viewModel.id !== context.viewModel.id;
+      let selectedFolder = context.selectedFolder;
+      if (!event.inputs.viewModel.folder.path.startsWith(selectedFolder)) {
+        selectedFolder = event.inputs.viewModel.folder.path;
+      }
+      return {
+        viewModel: event.inputs.viewModel,
+        selectedFolder,
+        // allow dropdown to close on mouse leave if view changed
+        activatedBy: viewChanged ? "hover" : context.activatedBy
+      };
+    }),
+    "reset search query": assign({
+      searchQuery: ""
+    }),
+    "update search query": assign(({ event }) => {
+      assertEvent(event, "searchQuery.change");
+      return { searchQuery: event.value ?? "" };
+    }),
+    "emit navigateTo": emit(({ event }) => {
+      assertEvent(event, "select.view");
+      return {
+        type: "navigateTo",
+        viewId: ViewId(event.viewId)
+      };
+    })
+  },
+  guards: {
+    "was opened on hover": ({ context }) => context.activatedBy === "hover",
+    "has search query": ({ context }) => !isEmpty(context.searchQuery),
+    "search query is empty": ({ context }) => isEmpty(context.searchQuery)
+  }
+}).createMachine({
+  id: "breadcrumbs",
+  context: ({ input }) => ({
+    ...input,
+    breadcrumbs: [],
+    activatedBy: "hover",
+    selectedFolder: "",
+    searchQuery: "",
+    folderColumns: []
+  }),
+  initial: "idle",
+  entry: [
+    "update activatedBy",
+    "reset selected folder"
+  ],
+  on: {
+    "update.inputs": {
+      actions: "update inputs"
+    },
+    "searchQuery.change": {
+      actions: [
+        "update search query",
+        raise({ type: "searchQuery.changed" })
+      ]
+    }
+  },
+  states: {
+    idle: {
+      id: "idle",
+      on: {
+        "breadcrumbs.mouseEnter.*": {
+          target: "pending",
+          actions: "update activatedBy"
+        },
+        "breadcrumbs.click.*": {
+          target: "active",
+          actions: "update activatedBy"
+        }
+      }
+    },
+    // Breadcrumbs are hovered, but dropdown is not opened yet
+    pending: {
+      on: {
+        "breadcrumbs.mouseEnter.*": {
+          actions: "update activatedBy"
+        },
+        "breadcrumbs.mouseLeave.*": {
+          target: "idle"
+        },
+        "breadcrumbs.click.*": {
+          target: "active",
+          actions: "update activatedBy"
+        }
+      },
+      after: {
+        "open timeout": {
+          target: "active"
+        }
+      }
+    },
+    active: {
+      tags: ["active"],
+      initial: "decide",
+      on: {
+        "dropdown.dismiss": {
+          target: "#idle"
+        },
+        "breadcrumbs.mouseLeave": {
+          guard: "was opened on hover",
+          target: ".closing"
+        },
+        "dropdown.mouseLeave": {
+          guard: "was opened on hover",
+          target: ".closing"
+        },
+        "searchQuery.changed": {
+          target: ".decide"
+        }
+      },
+      states: {
+        // Decide next state based on the search query
+        decide: {
+          always: [
+            {
+              guard: "has search query",
+              target: "search"
+            },
+            {
+              target: "opened"
+            }
+          ]
+        },
+        opened: {
+          on: {
+            "searchQuery.changed": {
+              guard: "has search query",
+              actions: "keep dropdown open",
+              target: "search"
+            },
+            "breadcrumbs.click.viewtitle": {
+              actions: "reset selected folder"
+            },
+            "breadcrumbs.click.*": {
+              actions: "update selected folder"
+            },
+            "select.folder": {
+              actions: [
+                "keep dropdown open",
+                "update selected folder"
+              ]
+            },
+            "select.view": {
+              actions: [
+                "emit navigateTo"
+              ]
+            }
+          }
+        },
+        search: {
+          on: {
+            "breadcrumbs.click.viewtitle": {
+              actions: [
+                "reset search query",
+                "reset selected folder"
+              ],
+              target: "opened"
+            },
+            "breadcrumbs.click.*": {
+              actions: [
+                "reset search query",
+                "update selected folder"
+              ],
+              target: "opened"
+            },
+            "select.view": {
+              actions: [
+                "emit navigateTo"
+              ]
+            }
+          }
+        },
+        closing: {
+          on: {
+            "breadcrumbs.mouseEnter.*": {
+              target: "decide"
+            },
+            "dropdown.mouseEnter": {
+              target: "decide"
+            }
+          },
+          after: {
+            "close timeout": {
+              target: "#idle"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+const navigationPanelActorLogic = _actorLogic;
+
+export { navigationPanelActorLogic };

package/dist/navigationpanel/controls/BurgerButton.d.ts

@@ -0,0 +1 @@
+export declare const BurgerButton: () => import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/controls/BurgerButton.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
+import { PanelActionIcon } from '../_common.js';
+import { useNavigationActor } from '../hooks.js';
+import IconMenu2 from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu2.js';
+
+const BurgerButton = () => {
+  const actor = useNavigationActor();
+  const { onBurgerMenuClick } = useDiagramEventHandlers();
+  return /* @__PURE__ */ jsx(
+    PanelActionIcon,
+    {
+      layout: "position",
+      onMouseEnter: () => {
+        actor.send({ type: "breadcrumbs.mouseEnter.root" });
+      },
+      onMouseLeave: () => {
+        actor.send({ type: "breadcrumbs.mouseLeave.root" });
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+        if (onBurgerMenuClick && actor.isOpened()) {
+          setTimeout(() => {
+            onBurgerMenuClick();
+          }, 100);
+        }
+        actor.send({ type: "breadcrumbs.click.root" });
+      },
+      children: /* @__PURE__ */ jsx(IconMenu2, { style: { width: "80%", height: "80%" } })
+    }
+  );
+};
+
+export { BurgerButton };

package/dist/navigationpanel/controls/NavigationButtons.d.ts

@@ -0,0 +1 @@
+export declare const NavigationButtons: () => import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/controls/NavigationButtons.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { hstack } from '@likec4/styles/patterns';
+import * as m from 'motion/react-m';
+import { useDiagram, useDiagramContext } from '../../hooks/useDiagram.js';
+import { PanelActionIcon } from '../_common.js';
+import IconArrowLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+
+const NavigationButtons = () => {
+  const diagram = useDiagram();
+  const {
+    hasStepBack,
+    hasStepForward
+  } = useDiagramContext((s) => ({
+    hasStepBack: s.navigationHistory.currentIndex > 0,
+    hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1
+  }));
+  return /* @__PURE__ */ jsxs(
+    m.div,
+    {
+      layout: "position",
+      className: hstack({
+        gap: "[1px]",
+        display: {
+          base: "none",
+          "@likec4-root/sm": "flex"
+        }
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          PanelActionIcon,
+          {
+            disabled: !hasStepBack,
+            onClick: (e) => {
+              e.stopPropagation();
+              diagram.navigate("back");
+            },
+            children: /* @__PURE__ */ jsx(IconArrowLeft, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PanelActionIcon,
+          {
+            disabled: !hasStepForward,
+            onClick: (e) => {
+              e.stopPropagation();
+              diagram.navigate("forward");
+            },
+            children: /* @__PURE__ */ jsx(IconArrowRight, { size: 14 })
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { NavigationButtons };

package/dist/navigationpanel/controls/OpenSource.d.ts

@@ -0,0 +1 @@
+export declare const OpenSource: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/navigationpanel/controls/OpenSource.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
+import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
+import { useCurrentViewId } from '../../hooks/useCurrentViewId.js';
+import { Tooltip, PanelActionIcon } from '../_common.js';
+import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+
+const OpenSource = () => {
+  const viewId = useCurrentViewId();
+  const { enableVscode } = useEnabledFeatures();
+  const { onOpenSource } = useDiagramEventHandlers();
+  if (!enableVscode) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { label: "Open View Source", children: /* @__PURE__ */ jsx(
+    PanelActionIcon,
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        onOpenSource?.({ view: viewId });
+      },
+      children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5, style: { width: "65%" } })
+    }
+  ) });
+};
+
+export { OpenSource };

package/dist/navigationpanel/controls/SearchControl.d.ts

@@ -0,0 +1 @@
+export declare function SearchControl(): import("react/jsx-runtime").JSX.Element;