@likec4/diagram 1.55.1 → 1.56.0

package/dist/navigationpanel/_common.d.ts

@@ -1,15 +1,9 @@
 import { NavigationPanelActionIconVariant } from '@likec4/styles/recipes';
-import { ActionIconProps, TooltipProps, BreadcrumbsProps } from '@mantine/core';
+import { ActionIconProps, TooltipProps, PlaceholderPolymorphicProps, BreadcrumbsProps } from '@mantine/core';
 import { HTMLMotionProps } from 'motion/react';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & {
-    component?: any;
-    renderRoot?: (props: Record<string, any>) => React.ReactNode;
-}>;
+import { NamedExoticComponent, RefAttributes, ForwardRefExoticComponent } from 'react';
+export declare const Tooltip: NamedExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & PlaceholderPolymorphicProps>;
 export declare const BreadcrumbsSeparator: () => import("react/jsx-runtime").JSX.Element;
-export declare const Breadcrumbs: ForwardRefExoticComponent< BreadcrumbsProps & RefAttributes<HTMLDivElement> & {
-    component?: any;
-    renderRoot?: (props: Record<string, any>) => React.ReactNode;
-}>;
+export declare const Breadcrumbs: NamedExoticComponent< BreadcrumbsProps & RefAttributes<HTMLDivElement> & PlaceholderPolymorphicProps>;
 export type PanelActionIconProps = Partial<NavigationPanelActionIconVariant> & Omit<ActionIconProps, keyof NavigationPanelActionIconVariant> & Omit<HTMLMotionProps<'button'>, keyof NavigationPanelActionIconVariant>;
 export declare const PanelActionIcon: ForwardRefExoticComponent<Omit<PanelActionIconProps, "ref"> & RefAttributes<HTMLButtonElement>>;

package/dist/navigationpanel/_common.js

@@ -1,73 +1,60 @@
-import { jsx } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
-import { navigationPanelActionIcon } from '@likec4/styles/recipes';
-import { Tooltip as Tooltip$1, ActionIcon, ThemeIcon, Breadcrumbs } from '@mantine/core';
-import * as m from 'motion/react-m';
-import { forwardRef } from 'react';
-import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
-
-const Tooltip = Tooltip$1.withProps({
-  color: "dark",
-  fz: "xs",
-  openDelay: 600,
-  closeDelay: 120,
-  label: "",
-  children: null,
-  offset: 8,
-  withinPortal: false
+import "../_virtual/_rolldown/runtime.js";
+import { css, cx } from "@likec4/styles/css";
+import { IconChevronRight } from "@tabler/icons-react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon, Breadcrumbs, ThemeIcon, Tooltip } from "@mantine/core";
+import * as m from "motion/react-m";
+import { navigationPanelActionIcon } from "@likec4/styles/recipes";
+//#region src/navigationpanel/_common.tsx
+var Tooltip$1 = Tooltip.withProps({
+	color: "dark",
+	fz: "xs",
+	openDelay: 600,
+	closeDelay: 120,
+	label: "",
+	children: null,
+	offset: 8,
+	withinPortal: false
+});
+var BreadcrumbsSeparator = () => /* @__PURE__ */ jsx(ThemeIcon, {
+	variant: "transparent",
+	size: 16,
+	className: css({
+		display: {
+			base: "none",
+			"@/md": "flex"
+		},
+		color: {
+			base: "mantine.colors.gray[5]",
+			_dark: "mantine.colors.dark[3]"
+		}
+	}),
+	children: /* @__PURE__ */ jsx(IconChevronRight, {})
 });
-const BreadcrumbsSeparator = () => /* @__PURE__ */ jsx(
-  ThemeIcon,
-  {
-    variant: "transparent",
-    size: 16,
-    className: css({
-      display: {
-        base: "none",
-        "@/md": "flex"
-      },
-      color: {
-        base: "mantine.colors.gray[5]",
-        _dark: "mantine.colors.dark[3]"
-      }
-    }),
-    children: /* @__PURE__ */ jsx(IconChevronRight, {})
-  }
-);
 Breadcrumbs.withProps({
-  separator: /* @__PURE__ */ jsx(BreadcrumbsSeparator, {}),
-  separatorMargin: 4
+	separator: /* @__PURE__ */ jsx(BreadcrumbsSeparator, {}),
+	separatorMargin: 4
 });
-const PanelActionIcon = forwardRef(({
-  variant = "default",
-  className,
-  disabled = false,
-  type,
-  ...others
-}, ref) => /* @__PURE__ */ jsx(
-  ActionIcon,
-  {
-    size: "md",
-    variant: "transparent",
-    radius: "sm",
-    component: m.button,
-    ...!disabled && {
-      whileHover: {
-        scale: 1.085
-      },
-      whileTap: {
-        scale: 1,
-        translateY: 1
-      }
-    },
-    disabled,
-    ...others,
-    className: cx(
-      className,
-      navigationPanelActionIcon({ variant, type })
-    ),
-    ref
-  }
-));
-
-export { BreadcrumbsSeparator, PanelActionIcon, Tooltip };
+var PanelActionIcon = forwardRef(({ variant = "default", className, disabled = false, type, ...others }, ref) => /* @__PURE__ */ jsx(ActionIcon, {
+	size: "md",
+	variant: "transparent",
+	radius: "sm",
+	component: m.button,
+	...!disabled && {
+		whileHover: { scale: 1.085 },
+		whileTap: {
+			scale: 1,
+			translateY: 1
+		}
+	},
+	disabled,
+	...others,
+	className: cx(className, navigationPanelActionIcon({
+		variant,
+		type
+	})),
+	ref
+}));
+//#endregion
+export { BreadcrumbsSeparator, PanelActionIcon, Tooltip$1 as Tooltip };

package/dist/navigationpanel/actor.js

@@ -1,239 +1,156 @@
-import { isEmpty } from 'remeda';
-import { setup, emit, assertEvent, assign, raise } from 'xstate';
-
-const _actorLogic = setup({
-  types: {
-    context: {},
-    events: {},
-    tags: "",
-    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 {
-        view: event.inputs.view,
-        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: 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)
-  }
+import "../_virtual/_rolldown/runtime.js";
+import { isEmpty } from "remeda";
+import { assertEvent, assign, emit, raise, setup } from "xstate";
+var navigationPanelActorLogic = setup({
+	types: {
+		context: {},
+		events: {},
+		tags: "",
+		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 {
+				view: event.inputs.view,
+				viewModel: event.inputs.viewModel,
+				selectedFolder,
+				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: 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"
-            }
-          }
-        }
-      }
-    }
-  }
+	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"
+				}
+			}
+		},
+		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: { 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;
-
+//#endregion
 export { navigationPanelActorLogic };