@likec4/diagram 1.51.0 → 1.53.0

package/dist/LikeC4View.js

@@ -15,7 +15,7 @@ import { Overlay } from './overlays/overlay/Overlay.js';
 import { ShadowRoot } from './shadowroot/ShadowRoot.js';
 import { pickViewBounds } from './utils/view-bounds.js';
 import { stopPropagation } from './utils/xyflow.js';
-import IconX from './node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from './node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 const cssInteractive = css({
   cursor: "pointer",

package/dist/_virtual/assign-6b5249c3.cjs.js

@@ -0,0 +1,3 @@
+var assign6b5249c3_cjs = {};
+
+export { assign6b5249c3_cjs as __exports };

package/dist/_virtual/log-b8ad8428.cjs.js

@@ -0,0 +1,3 @@
+var logB8ad8428_cjs = {};
+
+export { logB8ad8428_cjs as __exports };

package/dist/_virtual/raise-f23ccfcb.cjs.js

@@ -0,0 +1,3 @@
+var raiseF23ccfcb_cjs = {};
+
+export { raiseF23ccfcb_cjs as __exports };

package/dist/_virtual/store-803b8f7d.cjs.js

@@ -0,0 +1,3 @@
+var store803b8f7d_cjs = {};
+
+export { store803b8f7d_cjs as __exports };

package/dist/_virtual/xstate-actions.cjs.js

@@ -1,4 +1,4 @@
-import { __require as requireXstateActions_cjs } from '../node_modules/.pnpm/xstate@5.24.0_patch_hash_3a1bd6d012ec67bf6e38a00c3226d1be77089442f83aeb6e424b00ca2a11d21c/node_modules/xstate/actions/dist/xstate-actions.cjs.js';
+import { __require as requireXstateActions_cjs } from '../node_modules/.pnpm/xstate@5.28.0/node_modules/xstate/actions/dist/xstate-actions.cjs.js';
 
 var xstateActions_cjsExports = requireXstateActions_cjs();
 

package/dist/_virtual/xstate-guards.cjs.js

@@ -1,4 +1,4 @@
-import { __require as requireXstateGuards_cjs } from '../node_modules/.pnpm/xstate@5.24.0_patch_hash_3a1bd6d012ec67bf6e38a00c3226d1be77089442f83aeb6e424b00ca2a11d21c/node_modules/xstate/guards/dist/xstate-guards.cjs.js';
+import { __require as requireXstateGuards_cjs } from '../node_modules/.pnpm/xstate@5.28.0/node_modules/xstate/guards/dist/xstate-guards.cjs.js';
 
 var xstateGuards_cjsExports = requireXstateGuards_cjs();
 

package/dist/_virtual/xstate-store-react.cjs.js

@@ -1,4 +1,4 @@
-import { __require as requireXstateStoreReact_cjs } from '../node_modules/.pnpm/@xstate_store@3.14.0_react@19.2.4/node_modules/@xstate/store/react/dist/xstate-store-react.cjs.js';
+import { __require as requireXstateStoreReact_cjs } from '../node_modules/.pnpm/@xstate_store@3.17.0_react@19.2.4/node_modules/@xstate/store/react/dist/xstate-store-react.cjs.js';
 
 var xstateStoreReact_cjsExports = requireXstateStoreReact_cjs();
 

package/dist/adhoc-editor/EditorPanel.js

@@ -7,7 +7,7 @@ import { prop } from 'remeda';
 import { Logo } from '../components/Logo.js';
 import { ElementsTree } from './ElementsTree.js';
 import { EditorPanelStoreProvider, useEditorPanelState, useEditorPanelTrigger, selectEditorPanelState } from './state/panel.js';
-import IconTrash from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTrash.js';
+import IconTrash from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTrash.js';
 
 const EditorPanel = () => {
   return /* @__PURE__ */ jsx(EditorPanelStoreProvider, { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsxs(

package/dist/adhoc-editor/components/Tree.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { sva, cx, css, cva } from '@likec4/styles/css';
 import { createStyleContext } from '@likec4/styles/jsx';
 import { IconOrShapeRenderer } from '../../context/IconRenderer.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+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 statebtn = cva({
   base: {

package/dist/base-primitives/compound/CompoundActionButton.js

@@ -6,7 +6,7 @@ import { useDebouncedValue } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 const variants = {
   normal: {

package/dist/base-primitives/compound/CompoundDetailsButton.js

@@ -6,7 +6,7 @@ import { useDebouncedValue } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
-import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 const variants = {
   normal: {

package/dist/base-primitives/edge/EdgeActionButton.js

@@ -3,7 +3,7 @@ import { cx } from '@likec4/styles/css';
 import { edgeActionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 function EdgeActionButton({ icon, onClick }) {
   return /* @__PURE__ */ jsx(

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

@@ -5,7 +5,7 @@ import { ActionIcon } from '@mantine/core';
 import { useId } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconBolt from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.js';
+import IconBolt from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.js';
 
 const variants = {
   normal: {

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

@@ -5,7 +5,7 @@ import { actionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 const variants = {
   normal: {

package/dist/components/ErrorFallback.js

@@ -4,7 +4,7 @@ import { HStack, VStack } from '@likec4/styles/jsx';
 import { ThemeIcon, Text, ScrollAreaAutosize, Button } from '@mantine/core';
 import { useRef, useEffect } from 'react';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
-import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function ErrorFallback({ error, resetErrorBoundary }) {
   const errorString = error instanceof Error ? error.message : "Unknown error";

package/dist/components/Link.js

@@ -4,8 +4,8 @@ import { styled } from '@likec4/styles/jsx';
 import { Badge, CopyButton, ActionIcon } from '@mantine/core';
 import { forwardRef } from 'react';
 import { GithubIcon } from './GithubIcon.js';
-import IconCheck from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
-import IconCopy from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js';
+import IconCheck from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconCopy from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js';
 
 const GITHUB_PREFIX = "https://github.com/";
 const Link = forwardRef(

package/dist/components/NavigationPanel.js

@@ -36,13 +36,15 @@ const Logo = withContext(LogoButton, "logo");
 const Label = withContext(m.div, "label", {
   shouldForwardProp
 });
-withContext(m.div, "dropdown", {
+const Dropdown = withContext(m.div, "dropdown", {
   shouldForwardProp
 });
 const NavigationPanel = {
   Root,
   Body,
   Logo,
-  Label};
+  Label,
+  Dropdown
+};
 
 export { NavigationPanel };

package/dist/components/SearchControl.css.js

@@ -0,0 +1,79 @@
+import { css } from '@likec4/styles/css';
+
+const root = css({
+  height: "30px",
+  paddingLeft: "sm",
+  paddingRight: "1",
+  borderRadius: "sm",
+  // TODO
+  // color: fallbackVar('var(--search-color)', 'mantine.colors.placeholder)',
+  border: "1px solid",
+  borderColor: {
+    base: "default.border",
+    _light: "mantine.colors.gray[4]",
+    _dark: "mantine.colors.dark[4]",
+    _hover: "default.border"
+  },
+  cursor: "pointer",
+  background: {
+    base: "default",
+    _light: "white",
+    _dark: "mantine.colors.dark[6]",
+    _hover: "default.hover"
+  },
+  width: "100%",
+  "& .tabler-icon": {
+    color: "text"
+  },
+  transition: {
+    base: "fast",
+    _whenPanning: "none !important"
+  },
+  boxShadow: {
+    base: "xs",
+    _hover: "sm",
+    _whenPanning: "none !important"
+  }
+});
+const placeholder = css({
+  fontSize: "sm",
+  // mantine.fontSizes.sm,
+  fontWeight: "medium",
+  paddingRight: "2.5",
+  // 10px
+  color: "text.placeholder",
+  flex: "1",
+  sm: {
+    paddingRight: "[30px]"
+  },
+  md: {
+    paddingRight: "[50px]"
+  }
+});
+const shortcut = css({
+  fontSize: "11px",
+  fontWeight: "bold",
+  lineHeight: 1,
+  padding: "[4px 7px]",
+  borderRadius: "sm",
+  border: "1px solid",
+  transition: "fast",
+  _light: {
+    color: "mantine.colors.gray[7]",
+    borderColor: "mantine.colors.gray[2]"
+  },
+  _dark: {
+    color: "mantine.colors.dark[0]",
+    borderColor: "mantine.colors.dark[7]"
+  },
+  backgroundColor: {
+    _light: "mantine.colors.gray[2]/70",
+    _dark: "mantine.colors.dark[8]/70",
+    _groupHover: {
+      _light: "mantine.colors.gray[2]",
+      _dark: "mantine.colors.dark[8]"
+    }
+  }
+});
+
+export { placeholder, root, shortcut };

package/dist/components/SearchControl.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { UnstyledButton, Group, Text } from '@mantine/core';
+import { isMacOs } from '@xyflow/system';
+import { placeholder, shortcut, root } from './SearchControl.css.js';
+import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+
+function SearchControl({ className, ...others }) {
+  const isMac = isMacOs();
+  return /* @__PURE__ */ jsx(UnstyledButton, { ...others, className: cx("group", root, className), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+    /* @__PURE__ */ jsx(IconSearch, { style: { width: "15px", height: "15px" }, stroke: 2 }),
+    /* @__PURE__ */ jsx(Text, { component: "div", className: placeholder, children: "Search" }),
+    /* @__PURE__ */ jsx(Text, { component: "div", className: shortcut, children: isMac ? "⌘ + K" : "Ctrl + K" })
+  ] }) });
+}
+
+export { SearchControl };

package/dist/context/IconRenderer.js

@@ -1,13 +1,13 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { createContext, useContext } from 'react';
-import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
-import IconFileText from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileText.js';
-import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
-import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
-import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
-import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
-import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
+import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
+import IconFileText from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileText.js';
+import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
+import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
+import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
+import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
+import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
 
 const IconRendererContext = createContext(null);
 function IconRendererProvider({

package/dist/custom/index.d.ts

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

package/dist/custom/index.js

@@ -5,6 +5,7 @@ export { Overlay } from '../overlays/overlay/Overlay.js';
 export { PortalToContainer } from '../components/PortalToContainer.js';
 export { ShadowRoot } from '../shadowroot/ShadowRoot.js';
 export { FramerMotionConfig } from '../context/FramerMotionConfig.js';
+export { NavigationPanel } from '../components/NavigationPanel.js';
 export { CompoundActionButton } from '../base-primitives/compound/CompoundActionButton.js';
 export { CompoundActions } from '../likec4diagram/custom/nodes/CompoundActions.js';
 export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from '../likec4diagram/custom/nodes/nodes.js';