@likec4/diagram 1.46.4 → 1.48.0

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

@@ -5,13 +5,12 @@ import { Box, HStack } from '@likec4/styles/jsx';
 import { hstack } from '@likec4/styles/patterns';
 import { likec4tag } from '@likec4/styles/recipes';
 import { useHover, useDebouncedState } from '@mantine/hooks';
-import { NodeToolbar, Position } from '@xyflow/react';
+import { useStore, NodeToolbar, Position } from '@xyflow/react';
 import { deepEqual } from 'fast-equals';
 import { forwardRef, memo, useEffect, useCallback } from 'react';
+import { hasAtLeast } from 'remeda';
 import { useTagSpecification } from '../../context/TagStylesContext.js';
-import '@xstate/react';
-import { useDiagram } from '../../hooks/safeContext.js';
-import { useCurrentZoom } from '../../hooks/useXYFlow.js';
+import { useCurrentZoomAtLeast } from '../../hooks/useXYFlow.js';
 import { stopPropagation } from '../../utils/xyflow.js';
 
 const ElementTag = forwardRef(
@@ -42,9 +41,38 @@ const ElementTag = forwardRef(
   }
 );
 const propsAreEqual = (prev, next) => {
-  return prev.data.width === next.data.width && deepEqual(prev.data.tags, next.data.tags) && (prev.data.hovered ?? false) === (next.data.hovered ?? false);
+  return prev.id === next.id && prev.data.width === next.data.width && (prev.data.hovered ?? false) === (next.data.hovered ?? false) && deepEqual(prev.data.tags, next.data.tags);
 };
-const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
+const ElementTags = memo(
+  ({ id, data: { tags, width, hovered = false }, onTagClick, onTagMouseEnter, onTagMouseLeave }) => {
+    if (!tags || !hasAtLeast(tags, 1)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      WithElementTags,
+      {
+        id,
+        tags,
+        width,
+        hovered,
+        onTagClick,
+        onTagMouseEnter,
+        onTagMouseLeave
+      }
+    );
+  },
+  propsAreEqual
+);
+ElementTags.displayName = "ElementTags";
+function WithElementTags({
+  id,
+  tags,
+  width,
+  hovered,
+  onTagClick,
+  onTagMouseEnter,
+  onTagMouseLeave
+}) {
   const {
     hovered: isTagsBarHovered,
     ref: tagsBarRef
@@ -62,19 +90,13 @@ const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
       return hovered || isTagsBarHovered || isTagsToolbarHovered;
     });
   }, [isTagsBarHovered, isTagsToolbarHovered, hovered]);
-  const zoom = useCurrentZoom();
-  const zoomIsLargeEnough = zoom > 1.2;
-  const diagram = useDiagram();
-  const onHover = (tag) => {
-    diagram.send({ type: "tag.highlight", tag });
-  };
-  const onLeave = useCallback(() => {
-    diagram.send({ type: "tag.unhighlight" });
-  }, []);
-  if (!tags || tags.length === 0) {
-    return null;
-  }
-  const maxWidth = Math.max(Math.round(width * zoom) - 10, 200);
+  const zoomIsLargeEnough = useCurrentZoomAtLeast(1.2);
+  const maxWidth = useStore(
+    useCallback(
+      (state) => Math.max(Math.round(width * state.transform[2]) - 10, 200),
+      [Math.round(width)]
+    )
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -115,11 +137,11 @@ const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              maxWidth: 50,
-              height: 5,
+              maxWidth: "50px",
+              height: "5px",
               _whenHovered: {
-                height: 12,
-                borderRadius: 4,
+                height: "12px",
+                borderRadius: "sm",
                 transitionDelay: ".08s"
               },
               transition: "fast"
@@ -139,7 +161,9 @@ const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
           flexWrap: "wrap",
           pb: "sm",
           translate: "auto",
-          x: "[-8px]",
+          x: "[-8px]"
+        },
+        style: {
           maxWidth
         },
         children: tags.map((tag) => /* @__PURE__ */ jsx(
@@ -151,24 +175,23 @@ const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
               userSelect: "none",
               ...zoomIsLargeEnough && {
                 fontSize: "lg",
-                borderRadius: "[4px]",
+                borderRadius: "sm",
                 px: "1.5"
                 // 6px
               }
             }),
-            onClick: (e) => {
+            onClick: onTagClick ? ((e) => {
               e.stopPropagation();
-              diagram.openSearch(`#${tag}`);
-            },
-            onMouseEnter: () => onHover(tag),
-            onMouseLeave: onLeave
+              onTagClick(`#${tag}`);
+            }) : void 0,
+            onMouseEnter: onTagMouseEnter ? () => onTagMouseEnter(`#${tag}`) : void 0,
+            onMouseLeave: onTagMouseLeave ? () => onTagMouseLeave(`#${tag}`) : void 0
           },
           tag
         ))
       }
     ) })
   ] });
-}, propsAreEqual);
-ElementTags.displayName = "ElementTags";
+}
 
 export { ElementTag, ElementTags };

package/dist/base-primitives/index.d.ts

@@ -13,7 +13,7 @@ export { ElementData } from './element/ElementData';
 export { ElementDetailsButton } from './element/ElementDetailsButton';
 export { ElementNodeContainer } from './element/ElementNodeContainer';
 export { ElementShape } from './element/ElementShape';
-export { ElementTag, ElementTags } from './element/ElementTags';
+export { ElementTag, type ElementTagProps, ElementTags, type ElementTagsProps } from './element/ElementTags';
 export { Markdown } from './Markdown';
 export { memoEdge } from './memoEdge';
 export { memoNode } from './memoNode';

package/dist/base-primitives/memoEdge.js

@@ -4,7 +4,7 @@ import { memo } from 'react';
 const isSame = (a, b) => {
   return Math.abs(a - b) < 2.5;
 };
-const edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.animated ?? false, next.animated ?? false) && deepEqual(prev.source, next.source) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.target, next.target) && isSame(prev.targetY, next.targetY) && isSame(prev.targetX, next.targetX) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.targetPosition, next.targetPosition) && deepEqual(prev.data, next.data);
+const edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.animated ?? false, next.animated ?? false) && deepEqual(prev.source, next.source) && deepEqual(prev.target, next.target) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.targetPosition, next.targetPosition) && deepEqual(prev.data, next.data);
 function memoEdge(Edge) {
   const Memo = memo(Edge, edgePropsEqual);
   Memo.displayName = `MemoEdge(${Edge.displayName || Edge.name})`;

package/dist/base-primitives/memoNode.js

@@ -2,7 +2,7 @@ import { deepEqual } from 'fast-equals';
 import { memo } from 'react';
 
 function nodePropsEqual(prev, next) {
-  return prev.id === next.id && deepEqual(prev.type, next.type) && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.dragging ?? false, next.dragging ?? false) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(prev.data, next.data);
+  return prev.id === next.id && deepEqual(prev.type, next.type) && deepEqual(prev.parentId ?? "", next.parentId ?? "") && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.dragging ?? false, next.dragging ?? false) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(prev.data, next.data);
 }
 const isMemoized = /* @__PURE__ */ Symbol.for("isMemoized");
 function memoNode(Node, displayName = "Node") {

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.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.36.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.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
-import IconCopy from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js';
+import IconCheck from '../node_modules/.pnpm/@tabler_icons-react@3.36.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.36.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/Logo.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { css } from '@likec4/styles/css';
 import { forwardRef } from 'react';
 

package/dist/components/NavigationPanel.d.ts

@@ -0,0 +1,11 @@
+import { ForwardRefComponent, HTMLMotionProps } from 'motion/react';
+import { HTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { StyleContextProvider, StyleContextConsumer } from '@likec4/styles/jsx';
+import { NavigationPanelRecipe } from '@likec4/styles/recipes';
+export declare const NavigationPanel: {
+    Root: StyleContextProvider<ForwardRefComponent<"div", HTMLMotionProps<"div">>, NavigationPanelRecipe>;
+    Body: StyleContextConsumer<ForwardRefComponent<"div", HTMLMotionProps<"div">>>;
+    Logo: StyleContextConsumer<ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & RefAttributes<HTMLButtonElement>>>;
+    Label: StyleContextConsumer<ForwardRefComponent<"div", HTMLMotionProps<"div">>>;
+    Dropdown: StyleContextConsumer<ForwardRefComponent<"div", HTMLMotionProps<"div">>>;
+};

package/dist/components/NavigationPanel.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { createStyleContext, isCssProperty } from '@likec4/styles/jsx';
+import { navigationPanel } from '@likec4/styles/recipes';
+import { isValidMotionProp } from 'motion/react';
+import * as m from 'motion/react-m';
+import { forwardRef } from 'react';
+import { LogoIcon, Logo as Logo$1 } from './Logo.js';
+
+const { withProvider, withContext } = createStyleContext(navigationPanel);
+const shouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && (isValidMotionProp(prop) || !isCssProperty(prop));
+const LogoButton = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...props,
+      ref,
+      className: cx(
+        "mantine-active",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(LogoIcon, { "data-logo-icon": true }),
+        /* @__PURE__ */ jsx(Logo$1, { "data-logo-full": true })
+      ]
+    }
+  );
+});
+const Root = withProvider(m.div, "root", {
+  shouldForwardProp
+});
+const Body = withContext(m.div, "body", {
+  shouldForwardProp
+});
+const Logo = withContext(LogoButton, "logo");
+const Label = withContext(m.div, "label", {
+  shouldForwardProp
+});
+const Dropdown = withContext(m.div, "dropdown", {
+  shouldForwardProp
+});
+const NavigationPanel = {
+  Root,
+  Body,
+  Logo,
+  Label,
+  Dropdown
+};
+
+export { NavigationPanel };

package/dist/components/RootContainer.js

@@ -13,20 +13,17 @@ function RootContainer({
 }) {
   const [mounted, setMounted] = useState(false);
   const ref = useRef(null);
-  const $isPanningRef = useRef(null);
-  if (!$isPanningRef.current) {
-    $isPanningRef.current = atom(false);
-  }
+  const $isPanning = useRef(atom(false)).current;
   useIsomorphicLayoutEffect(() => {
     setMounted(true);
   }, []);
   useEffect(() => {
-    return $isPanningRef.current?.subscribe((isPanning) => {
+    return $isPanning.listen((isPanning) => {
       ref.current?.setAttribute("data-likec4-diagram-panning", isPanning ? "true" : "false");
     });
-  }, []);
+  }, [$isPanning]);
   const ctx = useMemo(() => ({ id, ref }), [id, ref]);
-  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanning, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children: /* @__PURE__ */ jsx(
     "div",
     {
       id,
@@ -35,7 +32,7 @@ function RootContainer({
       ...reduceGraphics && {
         ["data-likec4-reduced-graphics"]: true
       },
-      children: mounted && !!ctx.ref.current && /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ctx, children })
+      children: mounted && /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ctx, children })
     }
   ) }) });
 }

package/dist/context/DefaultMantineProvider.d.ts

@@ -0,0 +1,2 @@
+import { MantineProviderProps } from '@mantine/core';
+export declare function DefaultMantineProvider({ children, ...props }: MantineProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/context/DefaultMantineProvider.js

@@ -0,0 +1,66 @@
+import { jsx } from 'react/jsx-runtime';
+import { MantineProvider, createTheme, Tooltip, Portal, SegmentedControl } from '@mantine/core';
+
+const DefaultTheme = createTheme({
+  autoContrast: true,
+  primaryColor: "indigo",
+  cursorType: "pointer",
+  defaultRadius: "sm",
+  fontFamily: "var(--likec4-app-font, var(--likec4-app-font-default))",
+  headings: {
+    fontWeight: "medium",
+    sizes: {
+      h1: {
+        // fontSize: '2rem',
+        fontWeight: "bold"
+      },
+      h2: {
+        fontWeight: "medium"
+        // fontSize: '1.85rem',
+      }
+    }
+  },
+  fontSizes: {
+    xxs: "var(--font-sizes-xxs)",
+    xs: "var(--font-sizes-xs)",
+    sm: "var(--font-sizes-sm)",
+    md: "var(--font-sizes-md)",
+    lg: "var(--font-sizes-lg)",
+    xl: "var(--font-sizes-xl)"
+  },
+  spacing: {
+    xs: "var(--spacing-xs)",
+    sm: "var(--spacing-sm)",
+    md: "var(--spacing-md)",
+    lg: "var(--spacing-lg)",
+    xl: "var(--spacing-xl)"
+  },
+  components: {
+    SegmentedControl: SegmentedControl.extend({
+      vars: (theme, props) => ({
+        root: {
+          // @ts-expect-error
+          "--sc-font-size": theme.fontSizes[props.fz ?? props.size]
+        }
+      })
+    }),
+    Portal: Portal.extend({
+      defaultProps: {
+        reuseTargetNode: true
+      }
+    }),
+    Tooltip: Tooltip.extend({
+      defaultProps: {
+        color: "dark"
+      }
+    })
+  }
+});
+function DefaultMantineProvider({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(MantineProvider, { defaultColorScheme: "auto", theme: DefaultTheme, ...props, children });
+}
+
+export { DefaultMantineProvider };

package/dist/context/DiagramEventHandlers.js

@@ -12,7 +12,7 @@ const defaultHandlers = {
   onEdgeContextMenu: null,
   onCanvasClick: null,
   onCanvasDblClick: null,
-  onBurgerMenuClick: null,
+  onLogoClick: null,
   onOpenSource: null,
   onInitialized: null,
   onLayoutTypeChange: null

package/dist/context/DiagramFeatures.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { shallowEqual } from 'fast-equals';
-import { useContext, createContext, useState, useEffect } from 'react';
+import { useContext, createContext, useEffect } from 'react';
+import { useSetState } from '../hooks/useSetState.js';
 
 const DefaultFeatures = {
   enableEditor: false,
@@ -27,19 +27,20 @@ function DiagramFeatures({
   overrides
 }) {
   const outerScope = useContext(DiagramFeaturesContext);
-  const [scope, setScope] = useState(outerScope);
+  const [scope, setScope] = useSetState(() => ({
+    ...outerScope,
+    ...features,
+    ...overrides
+  }));
   useEffect(
     () => {
-      setScope((current) => {
-        const next = {
-          ...outerScope,
-          ...features,
-          ...overrides
-        };
-        return shallowEqual(current, next) ? current : next;
+      setScope({
+        ...outerScope,
+        ...features,
+        ...overrides
       });
     },
-    [outerScope, features, overrides]
+    [outerScope, features, overrides, setScope]
   );
   return /* @__PURE__ */ jsx(DiagramFeaturesContext.Provider, { value: scope, children });
 }

package/dist/context/EnsureMantine.d.ts

@@ -1,7 +1,4 @@
 import { PropsWithChildren } from 'react';
 type EnsureMantineProps = PropsWithChildren<{}>;
 export declare function EnsureMantine({ children }: EnsureMantineProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace EnsureMantine {
-    var displayName: string;
-}
 export {};

package/dist/context/EnsureMantine.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { MantineContext, MantineProvider } from '@mantine/core';
+import { MantineContext } from '@mantine/core';
 import { useContext, useEffect } from 'react';
-import { DefaultTheme } from '../shadowroot/styles.css.js';
+import { DefaultMantineProvider } from './DefaultMantineProvider.js';
 
 function EnsureMantine({ children }) {
   const mantineCtx = useContext(MantineContext);
@@ -11,10 +11,9 @@ function EnsureMantine({ children }) {
     }
   }, []);
   if (!mantineCtx) {
-    return /* @__PURE__ */ jsx(MantineProvider, { defaultColorScheme: "auto", theme: DefaultTheme, children });
+    return /* @__PURE__ */ jsx(DefaultMantineProvider, { children });
   }
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
-EnsureMantine.displayName = "EnsureMantine";
 
 export { EnsureMantine };

package/dist/context/IconRenderer.d.ts

@@ -1,6 +1,20 @@
 import { ElementShape } from '@likec4/core';
 import { CSSProperties, PropsWithChildren } from 'react';
 import { ElementIconRenderer } from '../LikeC4Diagram.props';
+/**
+ * Provider for custom element icon renderers
+ *
+ * @example
+ * ```tsx
+ * const MyIconRenderer: ElementIconRenderer = ({ node }) => {
+ *   return <div>{node.title}</div>
+ * }
+ *
+ * <IconRendererProvider value={MyIconRenderer}>
+ *   <LikeC4Diagram />
+ * </IconRendererProvider>
+ * ```
+ */
 export declare function IconRendererProvider({ value, children, }: PropsWithChildren<{
     value: ElementIconRenderer | null;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/context/IconRenderer.js

@@ -1,12 +1,13 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { createContext, useContext } from 'react';
-import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
-import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
-import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
-import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
-import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
-import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
+import IconFileText from '../node_modules/.pnpm/@tabler_icons-react@3.36.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.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
+import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
+import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.36.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.36.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.36.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.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
 
 const IconRendererContext = createContext(null);
 function IconRendererProvider({
@@ -29,7 +30,7 @@ function IconRenderer({
     return null;
   }
   let icon;
-  if (element.icon.startsWith("http://") || element.icon.startsWith("https://")) {
+  if (element.icon.startsWith("http://") || element.icon.startsWith("https://") || element.icon.startsWith("data:image")) {
     icon = /* @__PURE__ */ jsx("img", { src: element.icon, alt: element.title });
   } else if (RenderIcon) {
     icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });
@@ -57,7 +58,9 @@ const ShapeIcons = {
   person: IconUser,
   queue: IconReorder,
   rectangle: IconRectangularPrism,
-  storage: IconCylinder
+  storage: IconCylinder,
+  bucket: IconCylinder,
+  document: IconFileText
 };
 function IconOrShapeRenderer({
   element,

package/dist/context/TagStylesContext.js

@@ -46,15 +46,23 @@ function generateStylesheet(tags, rootSelector) {
 }
 function TagStylesProvider({ children, rootSelector }) {
   const tags = useLikeC4Specification().tags;
+  const nonce = useMantineStyleNonce()?.();
   const stylesheet = generateStylesheet(tags, rootSelector);
   return /* @__PURE__ */ jsxs(TagStylesContext.Provider, { value: tags, children: [
-    stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, { stylesheet }),
+    stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, { nonce, stylesheet }),
     children
   ] });
 }
-const TagStylesheet = memo(({ stylesheet }) => {
-  const nonce = useMantineStyleNonce()?.();
-  return /* @__PURE__ */ jsx("style", { "data-likec4-tags": true, type: "text/css", dangerouslySetInnerHTML: { __html: stylesheet }, nonce });
+const TagStylesheet = memo(({ stylesheet, nonce }) => {
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      "data-likec4-tags": true,
+      type: "text/css",
+      dangerouslySetInnerHTML: { __html: stylesheet },
+      nonce
+    }
+  );
 });
 function useTagSpecification(tag) {
   const specs = useContext(TagStylesContext);

package/dist/custom/hooks.d.ts

@@ -3,8 +3,8 @@ export { useDiagramEventHandlers, } from '../context/DiagramEventHandlers';
 export { type EnabledFeatures, type FeatureName, useEnabledFeatures, } from '../context/DiagramFeatures';
 export { useCurrentView, useCurrentViewId, } from '../hooks/useCurrentView';
 export { type DiagramApi, useDiagram, useDiagramActorRef, useDiagramContext, useOnDiagramEvent, } from '../hooks/useDiagram';
-export { useCurrentViewModel, } from '../hooks/useCurrentViewModel';
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from '../hooks/useLikeC4Model';
+export { type CurrentViewModel, useCurrentViewModel, useOptionalCurrentViewModel, } from '../hooks/useCurrentViewModel';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, useOptionalLikeC4Model, } from '../hooks/useLikeC4Model';
 export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from '../hooks/useLikeC4Project';
 export { useLikeC4Styles, } from '../hooks/useLikeC4Styles';
 export { useSetState } from '../hooks/useSetState';

package/dist/custom/index.d.ts

@@ -3,7 +3,7 @@ export * from './customNodes';
 export * from './hooks';
 export * from './primitives';
 export type { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseEdgePropsWithData, BaseNode, BaseNodeData, BaseNodeProps, BaseNodePropsWithData, } from '../base/types';
-export type { ChangeEvent, DiagramNodeWithNavigate, ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, NodeRenderers, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, ViewPadding, WhereOperator, } from '../LikeC4Diagram.props';
+export type { DiagramNodeWithNavigate, ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, NodeRenderers, OnCanvasClick, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, ViewPadding, WhereOperator, } from '../LikeC4Diagram.props';
 export { Base } from '../base/Base';
 export type { Types } from '../likec4diagram/types';
 export { type EnabledFeatures, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures, } from '../context/DiagramFeatures';

package/dist/custom/index.js

@@ -16,8 +16,8 @@ export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
 export { useCurrentView, useCurrentViewId } from '../hooks/useCurrentView.js';
 export { useDiagram, useDiagramActorRef } from '../hooks/safeContext.js';
 export { useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
-export { useCurrentViewModel } from '../hooks/useCurrentViewModel.js';
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../hooks/useLikeC4Model.js';
+export { useCurrentViewModel, useOptionalCurrentViewModel } from '../hooks/useCurrentViewModel.js';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, useOptionalLikeC4Model } from '../hooks/useLikeC4Model.js';
 export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../hooks/useLikeC4Project.js';
 export { useLikeC4Styles } from '../hooks/useLikeC4Styles.js';
 export { useSetState } from '../hooks/useSetState.js';

package/dist/editor/LikeC4EditorCallbacks.d.ts

@@ -0,0 +1,18 @@
+import type * as t from '@likec4/core/types';
+/**
+ * Callbacks from LikeC4 Editor.
+ */
+export interface LikeC4EditorCallbacks {
+    /**
+     * Fetch a view by its ID and layout type.
+     *
+     * @param viewId - The ID of the view to fetch.
+     * @param layout - The layout type to use when fetching the view.
+     */
+    fetchView(viewId: t.ViewId, layout?: t.LayoutType): t.LayoutedView | Promise<t.LayoutedView>;
+    /**
+     * Callback invoked when the view changes.
+     */
+    handleChange(viewId: t.ViewId, change: t.ViewChange): void | Promise<void>;
+}
+export declare function createLikeC4Editor(callbacks: LikeC4EditorCallbacks): LikeC4EditorCallbacks;

package/dist/editor/LikeC4EditorCallbacks.js

@@ -0,0 +1,5 @@
+function createLikeC4Editor(callbacks) {
+  return callbacks;
+}
+
+export { createLikeC4Editor };