@likec4/diagram 1.55.0 → 1.56.0

package/dist/context/DiagramFeatures.js

@@ -1,84 +1,88 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useContext, createContext } from 'react';
-import { useSetState } from '../hooks/useSetState.js';
-import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
-
-const DefaultFeatures = {
-  enableEditor: false,
-  enableReadOnly: true,
-  enableCompareWithLatest: false,
-  enableControls: false,
-  enableDynamicViewWalkthrough: false,
-  enableElementDetails: false,
-  enableFocusMode: false,
-  enableNavigateTo: false,
-  enableNotations: false,
-  enableRelationshipBrowser: false,
-  enableRelationshipDetails: false,
-  enableSearch: false,
-  enableNavigationButtons: false,
-  enableFitView: false,
-  enableVscode: false,
-  enableElementTags: false,
-  enableNotes: false
+import "../_virtual/_rolldown/runtime.js";
+import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
+import { useSetState } from "../hooks/useSetState.js";
+import { createContext, useContext } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/context/DiagramFeatures.tsx
+var DefaultFeatures = {
+	enableEditor: false,
+	enableReadOnly: true,
+	enableCompareWithLatest: false,
+	enableControls: false,
+	enableDynamicViewWalkthrough: false,
+	enableElementDetails: false,
+	enableFocusMode: false,
+	enableNavigateTo: false,
+	enableNotations: false,
+	enableRelationshipBrowser: false,
+	enableRelationshipDetails: false,
+	enableSearch: false,
+	enableNavigationButtons: false,
+	enableFitView: false,
+	enableVscode: false,
+	enableElementTags: false,
+	enableNotes: false
 };
-const DiagramFeaturesContext = createContext(DefaultFeatures);
-function DiagramFeatures({
-  children,
-  features,
-  overrides
-}) {
-  const outerScope = useContext(DiagramFeaturesContext);
-  const [scope, setScope] = useSetState(() => ({
-    ...outerScope,
-    ...features,
-    ...overrides
-  }));
-  useUpdateEffect(
-    () => {
-      setScope({
-        ...outerScope,
-        ...features,
-        ...overrides
-      });
-    },
-    [outerScope, features, overrides, setScope]
-  );
-  return /* @__PURE__ */ jsx(DiagramFeaturesContext.Provider, { value: scope, children });
+var DiagramFeaturesContext = createContext(DefaultFeatures);
+function DiagramFeatures({ children, features, overrides }) {
+	const outerScope = useContext(DiagramFeaturesContext);
+	const [scope, setScope] = useSetState(() => ({
+		...outerScope,
+		...features,
+		...overrides
+	}));
+	useUpdateEffect(() => {
+		setScope({
+			...outerScope,
+			...features,
+			...overrides
+		});
+	}, [
+		outerScope,
+		features,
+		overrides,
+		setScope
+	]);
+	return /* @__PURE__ */ jsx(DiagramFeaturesContext.Provider, {
+		value: scope,
+		children
+	});
 }
-const overridesForOverlays = {
-  enableControls: false,
-  enableReadOnly: true,
-  enableCompareWithLatest: false
+var overridesForOverlays = {
+	enableControls: false,
+	enableReadOnly: true,
+	enableCompareWithLatest: false
 };
 DiagramFeatures.Overlays = ({ children }) => {
-  return /* @__PURE__ */ jsx(DiagramFeatures, { overrides: overridesForOverlays, children });
+	return /* @__PURE__ */ jsx(DiagramFeatures, {
+		overrides: overridesForOverlays,
+		children
+	});
 };
 function useEnabledFeatures() {
-  return useContext(DiagramFeaturesContext);
+	return useContext(DiagramFeaturesContext);
 }
-function IfEnabled({
-  feature,
-  children,
-  and = true
-}) {
-  const enabled = useEnabledFeatures()[`enable${feature}`] === true;
-  return enabled && and ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+/**
+* Renders children only if the specified feature is enabled
+* @param feature Feature name
+* @param and Additional AND condition
+* @example
+* <IfEnabled feature="ReadOnly" and={isSomething}>
+*   ...
+* </IfEnabled>
+*/
+function IfEnabled({ feature, children, and = true }) {
+	return useEnabledFeatures()[`enable${feature}`] === true && and ? /* @__PURE__ */ jsx(Fragment$1, { children }) : null;
 }
 function IfNotEnabled({ feature, children }) {
-  const notEnabled = useEnabledFeatures()[`enable${feature}`] !== true;
-  return notEnabled ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+	return useEnabledFeatures()[`enable${feature}`] !== true ? /* @__PURE__ */ jsx(Fragment$1, { children }) : null;
 }
 function IfReadOnly({ children }) {
-  const isReadOnly = useEnabledFeatures().enableReadOnly === true;
-  return isReadOnly ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+	return useEnabledFeatures().enableReadOnly === true ? /* @__PURE__ */ jsx(Fragment$1, { children }) : null;
 }
 function IfNotReadOnly({ children }) {
-  const isReadOnly = useEnabledFeatures().enableReadOnly === true;
-  if (isReadOnly) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children });
+	if (useEnabledFeatures().enableReadOnly === true) return null;
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
 }
-
+//#endregion
 export { DefaultFeatures, DiagramFeatures, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures };

package/dist/context/EnsureMantine.js

@@ -1,19 +1,16 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { MantineContext } from '@mantine/core';
-import { useContext, useEffect } from 'react';
-import { DefaultMantineProvider } from './DefaultMantineProvider.js';
-
+import "../_virtual/_rolldown/runtime.js";
+import { DefaultMantineProvider } from "./DefaultMantineProvider.js";
+import { useContext, useEffect } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { MantineContext } from "@mantine/core";
+//#region src/context/EnsureMantine.tsx
 function EnsureMantine({ children }) {
-  const mantineCtx = useContext(MantineContext);
-  useEffect(() => {
-    if (!mantineCtx) {
-      console.warn("LikeC4Diagram must be a child of MantineProvider");
-    }
-  }, []);
-  if (!mantineCtx) {
-    return /* @__PURE__ */ jsx(DefaultMantineProvider, { children });
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children });
+	const mantineCtx = useContext(MantineContext);
+	useEffect(() => {
+		if (!mantineCtx) console.warn("LikeC4Diagram must be a child of MantineProvider");
+	}, []);
+	if (!mantineCtx) return /* @__PURE__ */ jsx(DefaultMantineProvider, { children });
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
 }
-
+//#endregion
 export { EnsureMantine };

package/dist/context/FramerMotionConfig.js

@@ -1,13 +1,19 @@
-import { jsx } from 'react/jsx-runtime';
-import { useMantineStyleNonce } from '@mantine/core';
-import { LazyMotion, domMax, MotionConfig } from 'motion/react';
-
-const FramerMotionConfig = ({
-  reducedMotion = "user",
-  children
-}) => {
-  const nonce = useMantineStyleNonce()?.();
-  return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(MotionConfig, { reducedMotion, ...nonce && { nonce }, children }) });
+import "../_virtual/_rolldown/runtime.js";
+import { jsx } from "react/jsx-runtime";
+import { useMantineStyleNonce } from "@mantine/core";
+import { LazyMotion, MotionConfig, domMax } from "motion/react";
+//#region src/context/FramerMotionConfig.tsx
+var FramerMotionConfig = ({ reducedMotion = "user", children }) => {
+	const nonce = useMantineStyleNonce()?.();
+	return /* @__PURE__ */ jsx(LazyMotion, {
+		features: domMax,
+		strict: true,
+		children: /* @__PURE__ */ jsx(MotionConfig, {
+			reducedMotion,
+			...nonce && { nonce },
+			children
+		})
+	});
 };
-
+//#endregion
 export { FramerMotionConfig };

package/dist/context/IconRenderer.js

@@ -1,113 +1,97 @@
-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.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({
-  value,
-  children
-}) {
-  const outerScope = useContext(IconRendererContext);
-  if (outerScope) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(IconRendererContext.Provider, { value, children });
+import "../_virtual/_rolldown/runtime.js";
+import { cx } from "@likec4/styles/css";
+import { IconBrowser, IconCylinder, IconDeviceMobile, IconFileText, IconRectangularPrism, IconReorder, IconUser } from "@tabler/icons-react";
+import { createContext, useContext } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/context/IconRenderer.tsx
+var IconRendererContext = createContext(null);
+/**
+* Provider for custom element icon renderers
+*
+* @example
+* ```tsx
+* const MyIconRenderer: ElementIconRenderer = ({ node }) => {
+*   return <div>{node.title}</div>
+* }
+*
+* <IconRendererProvider value={MyIconRenderer}>
+*   <LikeC4Diagram />
+* </IconRendererProvider>
+* ```
+*/
+function IconRendererProvider({ value, children }) {
+	if (useContext(IconRendererContext)) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsx(IconRendererContext.Provider, {
+		value,
+		children
+	});
 }
+/**
+* Attempts to extract and decode SVG content from a data URL.
+* Returns the decoded SVG string if successful, or null if not an SVG data URL.
+*/
 function decodeSvgDataUrl(dataUrl) {
-  if (!dataUrl.startsWith("data:image/svg+xml")) {
-    return null;
-  }
-  try {
-    if (dataUrl.includes(";base64,")) {
-      const base64Content = dataUrl.split(";base64,")[1];
-      if (base64Content) {
-        return atob(base64Content);
-      }
-    } else {
-      const encodedContent = dataUrl.split(",")[1];
-      if (encodedContent) {
-        return decodeURIComponent(encodedContent);
-      }
-    }
-  } catch {
-  }
-  return null;
+	if (!dataUrl.startsWith("data:image/svg+xml")) return null;
+	try {
+		if (dataUrl.includes(";base64,")) {
+			const base64Content = dataUrl.split(";base64,")[1];
+			if (base64Content) return atob(base64Content);
+		} else {
+			const encodedContent = dataUrl.split(",")[1];
+			if (encodedContent) return decodeURIComponent(encodedContent);
+		}
+	} catch {}
+	return null;
 }
-function IconRenderer({
-  element,
-  className,
-  style
-}) {
-  const RenderIcon = useContext(IconRendererContext);
-  if (!element || !element.icon || element.icon === "none") {
-    return null;
-  }
-  let icon;
-  if (element.icon.startsWith("http://") || element.icon.startsWith("https://") || element.icon.startsWith("data:image")) {
-    const svgContent = element.icon.startsWith("data:image/svg+xml") ? decodeSvgDataUrl(element.icon) : null;
-    if (svgContent) {
-      icon = /* @__PURE__ */ jsx("span", { style: { display: "contents" }, dangerouslySetInnerHTML: { __html: svgContent } });
-    } else {
-      icon = /* @__PURE__ */ jsx("img", { src: element.icon, alt: element.title });
-    }
-  } else if (RenderIcon) {
-    icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });
-  }
-  if (!icon) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(
-        className,
-        "likec4-element-icon"
-      ),
-      "data-likec4-icon": element.icon,
-      style,
-      children: icon
-    }
-  );
+function IconRenderer({ element, className, style }) {
+	const RenderIcon = useContext(IconRendererContext);
+	if (!element || !element.icon || element.icon === "none") return null;
+	let icon;
+	if (element.icon.startsWith("http://") || element.icon.startsWith("https://") || element.icon.startsWith("data:image")) {
+		const svgContent = element.icon.startsWith("data:image/svg+xml") ? decodeSvgDataUrl(element.icon) : null;
+		if (svgContent) icon = /* @__PURE__ */ jsx("span", {
+			style: { display: "contents" },
+			dangerouslySetInnerHTML: { __html: svgContent }
+		});
+		else icon = /* @__PURE__ */ jsx("img", {
+			src: element.icon,
+			alt: element.title
+		});
+	} else if (RenderIcon) icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });
+	if (!icon) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(className, "likec4-element-icon"),
+		"data-likec4-icon": element.icon,
+		style,
+		children: icon
+	});
 }
-const ShapeIcons = {
-  browser: IconBrowser,
-  cylinder: IconCylinder,
-  mobile: IconDeviceMobile,
-  person: IconUser,
-  queue: IconReorder,
-  rectangle: IconRectangularPrism,
-  storage: IconCylinder,
-  bucket: IconCylinder,
-  document: IconFileText,
-  component: IconRectangularPrism
+var ShapeIcons = {
+	browser: IconBrowser,
+	cylinder: IconCylinder,
+	mobile: IconDeviceMobile,
+	person: IconUser,
+	queue: IconReorder,
+	rectangle: IconRectangularPrism,
+	storage: IconCylinder,
+	bucket: IconCylinder,
+	document: IconFileText,
+	component: IconRectangularPrism
 };
-function IconOrShapeRenderer({
-  element,
-  className,
-  style
-}) {
-  if (!element.icon || element.icon === "none") {
-    const ShapeIcon = ShapeIcons[element.shape];
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cx(
-          className,
-          "likec4-shape-icon"
-        ),
-        style,
-        children: /* @__PURE__ */ jsx(ShapeIcon, {})
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(IconRenderer, { element, className, style });
+function IconOrShapeRenderer({ element, className, style }) {
+	if (!element.icon || element.icon === "none") {
+		const ShapeIcon = ShapeIcons[element.shape];
+		return /* @__PURE__ */ jsx("div", {
+			className: cx(className, "likec4-shape-icon"),
+			style,
+			children: /* @__PURE__ */ jsx(ShapeIcon, {})
+		});
+	}
+	return /* @__PURE__ */ jsx(IconRenderer, {
+		element,
+		className,
+		style
+	});
 }
-
+//#endregion
 export { IconOrShapeRenderer, IconRenderer, IconRendererProvider };

package/dist/context/LikeC4ModelContext.js

@@ -1,15 +1,19 @@
-import 'react/jsx-runtime';
-import { useContext, createContext } from 'react';
-
-const LikeC4ModelContext = createContext(null);
-const LikeC4ModelContextProvider = LikeC4ModelContext.Provider;
-const CurrentViewModelCtx = createContext(null);
-const CurrentViewModelContext = CurrentViewModelCtx.Provider;
+import "../_virtual/_rolldown/runtime.js";
+import { createContext, useContext } from "react";
+import "react/jsx-runtime";
+//#region src/context/LikeC4ModelContext.tsx
+var LikeC4ModelContext = createContext(null);
+var LikeC4ModelContextProvider = LikeC4ModelContext.Provider;
+var CurrentViewModelCtx = createContext(null);
+var CurrentViewModelContext = CurrentViewModelCtx.Provider;
+/**
+* @returns The LikeC4Model from context, or null if no LikeC4ModelProvider is found.
+*/
 function useOptionalLikeC4Model() {
-  return useContext(LikeC4ModelContext);
+	return useContext(LikeC4ModelContext);
 }
 function useOptionalCurrentViewModel() {
-  return useContext(CurrentViewModelCtx);
+	return useContext(CurrentViewModelCtx);
 }
-
+//#endregion
 export { CurrentViewModelContext, LikeC4ModelContextProvider, useOptionalCurrentViewModel, useOptionalLikeC4Model };

package/dist/context/LikeC4ProjectsContext.js

@@ -1,9 +1,10 @@
-import { useContext, createContext } from 'react';
-
-const LikeC4ProjectsContext = createContext(null);
-const LikeC4ProjectsContextProvider = LikeC4ProjectsContext.Provider;
+import "../_virtual/_rolldown/runtime.js";
+import { createContext, useContext } from "react";
+//#region src/context/LikeC4ProjectsContext.ts
+var LikeC4ProjectsContext = createContext(null);
+var LikeC4ProjectsContextProvider = LikeC4ProjectsContext.Provider;
 function useOptionalProjectsContext() {
-  return useContext(LikeC4ProjectsContext);
+	return useContext(LikeC4ProjectsContext);
 }
-
+//#endregion
 export { LikeC4ProjectsContextProvider, useOptionalProjectsContext };

package/dist/context/RootContainerContext.d.ts

@@ -1,5 +1,5 @@
 import { WritableAtom } from 'nanostores';
-import { RefObject, Provider } from 'react';
+import { RefObject, Provider, Context } from 'react';
 export declare const RootContainerContextProvider: Provider<{
     id: string;
     selector: string;
@@ -22,8 +22,5 @@ export declare const ReduceGraphicsModeProvider: Provider<boolean | null>;
  * Hook to determine if reduced graphics mode is enabled.
  */
 export declare function useIsReducedGraphics(): boolean;
-export declare const PanningAtomSafeCtx: ({ children, value }: {
-    value: WritableAtom<boolean>;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, usePanningAtom: () => WritableAtom<boolean>;
+export declare const PanningAtomSafeCtx: Context<WritableAtom<boolean> | null>, usePanningAtom: () => WritableAtom<boolean>;
 export declare function useIsPanning(): boolean;

package/dist/context/RootContainerContext.js

@@ -1,36 +1,34 @@
-import { createSafeContext } from '@mantine/core';
-import '@nanostores/react';
-import { useContext, createContext } from 'react';
-
-const RootContainerContext = createContext(null);
-const RootContainerContextProvider = RootContainerContext.Provider;
+import "../_virtual/_rolldown/runtime.js";
+import { createContext, useContext } from "react";
+import { createSafeContext } from "@mantine/core";
+import "@nanostores/react";
+//#region src/context/RootContainerContext.tsx
+var RootContainerContext = createContext(null);
+var RootContainerContextProvider = RootContainerContext.Provider;
 function useRootContainerContext() {
-  return useContext(RootContainerContext);
+	return useContext(RootContainerContext);
 }
 function useRootContainer() {
-  const ctx = useRootContainerContext();
-  if (!ctx) {
-    throw new Error("useRootContainer must be used within a RootContainer");
-  }
-  return ctx;
+	const ctx = useRootContainerContext();
+	if (!ctx) throw new Error("useRootContainer must be used within a RootContainer");
+	return ctx;
 }
 function useRootContainerRef() {
-  return useRootContainer().ref;
+	return useRootContainer().ref;
 }
 function useRootContainerElement() {
-  return useRootContainer().ref.current;
+	return useRootContainer().ref.current;
 }
-const ReduceGraphicsModeCtx = createContext(null);
-const ReduceGraphicsModeProvider = ReduceGraphicsModeCtx.Provider;
+var ReduceGraphicsModeCtx = createContext(null);
+var ReduceGraphicsModeProvider = ReduceGraphicsModeCtx.Provider;
+/**
+* Hook to determine if reduced graphics mode is enabled.
+*/
 function useIsReducedGraphics() {
-  const isReduced = useContext(ReduceGraphicsModeCtx);
-  if (isReduced === null) {
-    console.warn("ReduceGraphicsMode is not provided");
-  }
-  return isReduced ?? false;
+	const isReduced = useContext(ReduceGraphicsModeCtx);
+	if (isReduced === null) console.warn("ReduceGraphicsMode is not provided");
+	return isReduced ?? false;
 }
-const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext(
-  "PanningAtomSafeCtx is not provided"
-);
-
-export { PanningAtomSafeCtx, ReduceGraphicsModeProvider, RootContainerContextProvider, useIsReducedGraphics, usePanningAtom, useRootContainer, useRootContainerContext, useRootContainerElement, useRootContainerRef };
+var [PanningAtomSafeCtx, usePanningAtom] = createSafeContext("PanningAtomSafeCtx is not provided");
+//#endregion
+export { PanningAtomSafeCtx, ReduceGraphicsModeProvider, RootContainerContextProvider, useIsReducedGraphics, usePanningAtom, useRootContainerContext, useRootContainerElement, useRootContainerRef };