@likec4/diagram 1.57.0 → 1.58.0

package/dist/adhoc-editor/EditorPanel.d.ts

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

package/dist/adhoc-editor/ElementsTree.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const ElementsTree: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const ElementsTree: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/adhoc-editor/LikeC4AdHocViewEditor.d.ts

@@ -1,4 +1,4 @@
 import { AdhocViewService } from './state/actor.types';
 export declare function LikeC4AdHocViewEditor({ service }: {
     service: AdhocViewService;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/adhoc-editor/components/Tree.d.ts

@@ -1,10 +1,10 @@
-import { RecipeVariantProps } from '@likec4/styles/css';
+import { RecipeVariantProps } from '../../../styled-system/css';
 import { MouseEventHandler, PropsWithChildren, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { IconOrShapeRenderer } from '../../context/IconRenderer';
 import { TreeNodeData } from '../useElementsTree';
-import { RecipeRuntimeFn, SlotRecipeRuntimeFn } from '@likec4/styles';
-import { StyleContextRootProvider, StyleContextConsumer } from '@likec4/styles/jsx';
-import { IconProps } from '../../../@tabler/icons-react/dist/esm/icons/index.mjs';
+import { RecipeRuntimeFn, SlotRecipeRuntimeFn } from '../../../styled-system';
+import { StyleContextRootProvider, StyleContextConsumer } from '../../../styled-system/jsx';
+import { IconProps } from '@tabler/icons-react';
 declare const statebtn: RecipeRuntimeFn<{
     state: {
         "include-explicit": {
@@ -39,7 +39,7 @@ export declare const Tree: {
         node: TreeNodeData;
         className?: string;
         onClick?: MouseEventHandler<HTMLElement>;
-    }>) => import("react/jsx-runtime").JSX.Element;
+    }>) => import("react").JSX.Element;
     Icon: typeof IconOrShapeRenderer;
     Label: StyleContextConsumer<"div">;
     Content: StyleContextConsumer<"div">;

package/dist/adhoc-editor/state/ActorProvider.d.ts

@@ -2,4 +2,4 @@ import { PropsWithChildren } from 'react';
 import { AdhocViewService } from './actor.types';
 export declare function AdhocEditorActorProvider({ children, service }: PropsWithChildren<{
     service: AdhocViewService;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

package/dist/adhoc-editor/state/panel.d.ts

@@ -30,7 +30,7 @@ declare const createEditorPanelStore: ({ initial, sideEffects, }: {
     type: "inputKeyDown";
 }>;
 export type EditorPanelStore = ReturnType<typeof createEditorPanelStore>;
-export declare const EditorPanelStoreProvider: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const EditorPanelStoreProvider: (props: PropsWithChildren) => import("react").JSX.Element;
 export declare function selectEditorPanelState<T>(selector: (state: EditorPanelState) => T): [
     selector: (snapshot: StoreSnapshot<EditorPanelState>) => T,
     compare: (a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean

package/dist/adhoc-editor/viewrules/ViewRulesPanel.d.ts

@@ -3,4 +3,4 @@ export declare function ViewRulesPanel({ rules, onToggle, onDelete, }: {
     rules: AdhocRule[];
     onToggle: (rule: AdhocRule) => void;
     onDelete: (rule: AdhocRule) => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/base/BaseXYFlow.d.ts

@@ -12,4 +12,4 @@ export type BaseXYFlowProps<NodeType extends BaseNode, EdgeType extends BaseEdge
     fitViewPadding?: ViewPadding | undefined;
     onViewportResize?: undefined | (() => void);
 } & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'fitViewOptions' | 'nodesSelectable' | 'nodesDraggable'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
-export declare function BaseXYFlow<NodeType extends BaseNode, EdgeType extends BaseEdge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, ...props }: BaseXYFlowProps<NodeType, EdgeType>): import("react/jsx-runtime").JSX.Element;
+export declare function BaseXYFlow<NodeType extends BaseNode, EdgeType extends BaseEdge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, ...props }: BaseXYFlowProps<NodeType, EdgeType>): import("react").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { RichTextOrEmpty as RichTextType } from '@likec4/core/types';
-import { JsxStyleProps } from '@likec4/styles/types';
+import { JsxStyleProps } from '../../styled-system/types';
 import { ComponentPropsWithoutRef, ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
 export type MarkdownProps = Omit<ComponentPropsWithoutRef<'div'>, 'dangerouslySetInnerHTML' | 'children' | 'color'> & {
     value: RichTextType;

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

@@ -4,4 +4,4 @@ import { AutoLayoutDirection } from '@likec4/core/types';
  */
 export declare function DefaultHandles({ direction }: {
     direction?: AutoLayoutDirection | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/base-primitives/compound/CompoundActionButton.d.ts

@@ -5,5 +5,5 @@ type CompoundActionButtonProps = Simplify<BaseNodeProps & {
     icon?: ReactNode;
     onClick: (e: ReactMouseEvent) => void;
 }>;
-export declare function CompoundActionButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundActionButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundActionButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundActionButtonProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/compound/CompoundDetailsButton.d.ts

@@ -5,5 +5,5 @@ type CompoundDetailsButtonProps = Simplify<BaseNodeProps & {
     icon?: ReactNode;
     onClick: (e: ReactMouseEvent) => void;
 }>;
-export declare function CompoundDetailsButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundDetailsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundDetailsButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundDetailsButtonProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/compound/CompoundNodeContainer.d.ts

@@ -11,5 +11,5 @@ type CompoundNodeContainerProps = PropsWithChildren<HTMLAttributes<HTMLDivElemen
     layoutId?: string | undefined;
     nodeProps: BaseNodeProps<BaseNode<RequiredData>>;
 }>;
-export declare function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered, dimmed: isDimmed, ...data }, }, className, children, style, ...rest }: CompoundNodeContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundNodeContainer({ nodeProps: { data: { hovered: isHovered, dimmed: isDimmed, ...data }, }, className, children, style, ...rest }: CompoundNodeContainerProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/compound/CompoundTitle.d.ts

@@ -9,5 +9,5 @@ type RequiredData = {
 type CompoundTitleProps = {
     data: RequiredData;
 };
-export declare function CompoundTitle({ data }: CompoundTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundTitle({ data }: CompoundTitleProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/compound/actionbtns.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeRuntimeFn } from '@likec4/styles';
+import { RecipeRuntimeFn } from '../../../styled-system';
 export declare const compoundActionBtn: RecipeRuntimeFn<{
     delay: {
         true: {

package/dist/base-primitives/edge/EdgeActionButton.d.ts

@@ -3,5 +3,5 @@ type EdgeActionBtnProps = {
     icon?: ReactNode;
     onClick: (e: ReactMouseEvent) => void;
 };
-export declare function EdgeActionButton({ icon, onClick }: EdgeActionBtnProps): import("react/jsx-runtime").JSX.Element;
+export declare function EdgeActionButton({ icon, onClick }: EdgeActionBtnProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/edge/EdgeContainer.d.ts

@@ -7,5 +7,5 @@ type EdgeContainerProps = PropsWithChildren<BaseEdgePropsWithData<Data> & {
     component?: 'g' | 'svg' | undefined;
     className?: string | undefined;
 }>;
-export declare function EdgeContainer({ className, component, selectable, selected, data: { color, hovered: isHovered, active: isActive, dimmed: isDimmed, ...data }, animated, children, style, }: EdgeContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function EdgeContainer({ className, component, selectable, selected, data: { color, hovered: isHovered, active: isActive, dimmed: isDimmed, ...data }, animated, children, style, }: EdgeContainerProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/edge/EdgeLabelContainer.d.ts

@@ -15,5 +15,5 @@ type EdgeLabelContainerProps = HTMLAttributes<HTMLDivElement> & {
     edgeProps: BaseEdgePropsWithData<Data>;
 };
 export declare function EdgeLabelContainer({ edgeProps: { id, selected, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, labelBBox, color, }, animated, }, labelPosition: labelXY, className, style: contentStyle, // applied to inner content div, not the positioned container
-children, ...rest }: EdgeLabelContainerProps): import("react/jsx-runtime").JSX.Element | null;
+children, ...rest }: EdgeLabelContainerProps): import("react").JSX.Element | null;
 export {};

package/dist/base-primitives/edge/EdgeMarkers.d.ts

@@ -1,14 +1,14 @@
 import { RelationshipArrowType } from '@likec4/core/types';
 import { SVGProps } from 'react';
 export declare const EdgeMarkers: {
-    Arrow: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
-    Crow: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
-    OArrow: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
-    Open: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
-    Diamond: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
-    ODiamond: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
-    Dot: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
-    ODot: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+    Arrow: (props: SVGProps<SVGMarkerElement>) => import("react").JSX.Element;
+    Crow: (props: SVGProps<SVGMarkerElement>) => import("react").JSX.Element;
+    OArrow: (props: SVGProps<SVGMarkerElement>) => import("react").JSX.Element;
+    Open: (props: SVGProps<SVGMarkerElement>) => import("react").JSX.Element;
+    Diamond: (props: SVGProps<SVGMarkerElement>) => import("react").JSX.Element;
+    ODiamond: (props: SVGProps<SVGMarkerElement>) => import("react").JSX.Element;
+    Dot: (props: SVGProps<SVGMarkerElement>) => import("react").JSX.Element;
+    ODot: (props: SVGProps<SVGMarkerElement>) => import("react").JSX.Element;
 };
 export type EdgeMarkerType = keyof typeof EdgeMarkers;
 export declare function arrowTypeToMarker(arrowType?: RelationshipArrowType): EdgeMarkerType | undefined;

package/dist/base-primitives/element/ElementActionButtons.d.ts

@@ -31,7 +31,7 @@ type ElementActionButtonsProps = {
  * />
  * ```
  */
-export declare function ElementActionButtons({ selected, data: { hovered: isHovered, }, buttons, }: ElementActionButtonsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ElementActionButtons({ selected, data: { hovered: isHovered, }, buttons, }: ElementActionButtonsProps): import("react").JSX.Element | null;
 export declare namespace ElementActionButtons {
     type Item = {
         key?: string;

package/dist/base-primitives/element/ElementData.d.ts

@@ -47,10 +47,10 @@ type SlotProps = {
  * </ElementData.Root>
  * ```
  */
-export declare function ElementData({ data }: ElementDataProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementData({ data }: ElementDataProps): import("react").JSX.Element;
 export declare namespace ElementData {
     var Root: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & ElementDataProps & import("react").RefAttributes<HTMLDivElement>>;
-    var Icon: ({ data, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    var Icon: ({ data, ...props }: IconProps) => import("react").JSX.Element;
     var Content: import("react").ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     var Title: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<HTMLDivElement>>;
     var Technology: import("react").ForwardRefExoticComponent<((import("type-fest/source/merge-exclusive").Without<SlotProps, {

package/dist/base-primitives/element/ElementDetailsButton.d.ts

@@ -6,5 +6,5 @@ type ElementDetailsButtonProps = {
     icon?: ReactNode;
     onClick: (e: ReactMouseEvent) => void;
 };
-export declare function ElementDetailsButton({ selected, data: { hovered: isHovered, }, icon, onClick, }: ElementDetailsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementDetailsButton({ selected, data: { hovered: isHovered, }, icon, onClick, }: ElementDetailsButtonProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/element/ElementShape.d.ts

@@ -14,5 +14,5 @@ type ElementShapeProps = {
      */
     showSelectionOutline?: boolean | undefined;
 };
-export declare function ElementShape({ data, width, height, showSelectionOutline }: ElementShapeProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementShape({ data, width, height, showSelectionOutline }: ElementShapeProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/element/ElementTags.d.ts

@@ -17,5 +17,5 @@ export type ElementTagsProps = BaseNodePropsWithData<Data> & {
     onTagMouseEnter?: (tag: `#${string}`) => void;
     onTagMouseLeave?: (tag: `#${string}`) => void;
 };
-export declare const ElementTags: MemoExoticComponent<({ id, data: { tags, width, hovered }, onTagClick, onTagMouseEnter, onTagMouseLeave }: ElementTagsProps) => import("react/jsx-runtime").JSX.Element | null>;
+export declare const ElementTags: MemoExoticComponent<({ id, data: { tags, width, hovered }, onTagClick, onTagMouseEnter, onTagMouseLeave }: ElementTagsProps) => import("react").JSX.Element | null>;
 export {};

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

@@ -1,14 +1,12 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { useCurrentZoomAtLeast } from "../../hooks/useXYFlow.js";
 import { stopPropagation } from "../../utils/xyflow.js";
-import { useTagSpecification } from "../../context/TagStylesContext.js";
 import { css, cx } from "@likec4/styles/css";
 import { forwardRef, memo, useCallback, useEffect } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { NodeToolbar, Position, useStore } from "@xyflow/react";
 import { deepEqual } from "fast-equals";
 import { hasAtLeast } from "remeda";
-import { isTagColorSpecified } from "@likec4/core";
 import { useDebouncedState, useHover } from "@mantine/hooks";
 import { Box, HStack } from "@likec4/styles/jsx";
 import { hstack } from "@likec4/styles/patterns";
@@ -18,7 +16,7 @@ var ElementTag = forwardRef(({ tag, cursor, className, style, ...props }, ref) =
 	return /* @__PURE__ */ jsxs(Box, {
 		ref,
 		"data-likec4-tag": tag,
-		className: cx(likec4tag({ autoTextColor: isTagColorSpecified(useTagSpecification(tag)) }), className),
+		className: cx(likec4tag(), className),
 		...props,
 		style: {
 			cursor,

package/dist/components/ErrorFallback.d.ts

@@ -1,3 +1,3 @@
 import { ErrorBoundaryProps, FallbackProps } from 'react-error-boundary';
-export declare function ErrorFallback({ error, resetErrorBoundary }: FallbackProps): import("react/jsx-runtime").JSX.Element;
-export declare function ErrorBoundary(props: Pick<ErrorBoundaryProps, 'onReset' | 'onError' | 'children'>): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorFallback({ error, resetErrorBoundary }: FallbackProps): import("react").JSX.Element;
+export declare function ErrorBoundary(props: Pick<ErrorBoundaryProps, 'onReset' | 'onError' | 'children'>): import("react").JSX.Element;

package/dist/components/NavigationPanel.d.ts

@@ -1,7 +1,7 @@
 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';
+import { StyleContextProvider, StyleContextConsumer } from '../../styled-system/jsx';
+import { NavigationPanelRecipe } from '../../styled-system/recipes';
 export declare const NavigationPanel: {
     Root: StyleContextProvider<ForwardRefComponent<"div", HTMLMotionProps<"div">>, NavigationPanelRecipe>;
     Body: StyleContextConsumer<ForwardRefComponent<"div", HTMLMotionProps<"div">>>;

package/dist/components/PortalToContainer.d.ts

@@ -3,4 +3,4 @@ import { PropsWithChildren } from 'react';
  * PortalToContainer is used to render elements outside the LikeC4DiagramXYFlow, but inside the container.
  * It is used internally by the library.
  */
-export declare function PortalToContainer({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function PortalToContainer({ children }: PropsWithChildren): import("react").JSX.Element;

package/dist/components/RootContainer.d.ts

@@ -3,4 +3,4 @@ export declare function RootContainer({ id, className, reduceGraphics, children,
     id: string;
     className?: string | undefined;
     reduceGraphics?: boolean;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

package/dist/components/SearchControl.d.ts

@@ -1,5 +1,5 @@
 import { ElementProps, UnstyledButtonProps } from '@mantine/core';
-interface SearchControlProps extends UnstyledButtonProps, ElementProps<'button'> {
+interface SearchControlProps extends Omit<UnstyledButtonProps, 'className'>, ElementProps<'button'> {
 }
-export declare function SearchControl({ className, ...others }: SearchControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchControl({ className, ...others }: SearchControlProps): import("react").JSX.Element;
 export {};

package/dist/components/ViewNotFound.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-export declare function ErrorMessage({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorMessage({ children }: PropsWithChildren): import("react").JSX.Element;
 export declare function ViewNotFound({ viewId }: {
     viewId: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/context/CurrentViewModelProvider.d.ts

@@ -1,2 +1,2 @@
 import { PropsWithChildren } from 'react';
-export declare function CurrentViewModelProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function CurrentViewModelProvider({ children }: PropsWithChildren): import("react").JSX.Element;

package/dist/context/DefaultMantineProvider.d.ts

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

package/dist/context/DiagramEventHandlers.d.ts

@@ -9,7 +9,7 @@ export type DiagramEventHandlersContext = RequiredOrNull<LikeC4DiagramEventHandl
 };
 export declare function DiagramEventHandlers({ handlers, children, }: PropsWithChildren<{
     handlers: Required<LikeC4DiagramEventHandlers>;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;
 export declare function useDiagramEventHandlers(): DiagramEventHandlersContext;
 export declare function useDiagramEventHandlersRef(): DiagramEventHandlersRef;
 export {};

package/dist/context/EnsureMantine.d.ts

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

package/dist/context/FramerMotionConfig.d.ts

@@ -1,8 +1,8 @@
 import { PropsWithChildren } from 'react';
-export declare const FramerMotionConfig: ({ reducedMotion, children, }: PropsWithChildren<{
+export declare function FramerMotionConfig({ reducedMotion, children, }: PropsWithChildren<{
     /**
      * If true, will respect the device prefersReducedMotion setting by switching
      * transform animations off.
      */
-    reducedMotion?: "always" | "never" | "user" | undefined;
-}>) => import("react/jsx-runtime").JSX.Element;
+    reducedMotion?: 'always' | 'never' | 'user' | undefined;
+}>): import("react").JSX.Element;

package/dist/context/FramerMotionConfig.js

@@ -3,7 +3,7 @@ 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 }) => {
+function FramerMotionConfig({ reducedMotion = "user", children }) {
 	const nonce = useMantineStyleNonce()?.();
 	return /* @__PURE__ */ jsx(LazyMotion, {
 		features: domMax,
@@ -14,6 +14,6 @@ var FramerMotionConfig = ({ reducedMotion = "user", children }) => {
 			children
 		})
 	});
-};
+}
 //#endregion
 export { FramerMotionConfig };

package/dist/context/IconRenderer.d.ts

@@ -17,7 +17,7 @@ import { ElementIconRenderer } from '../LikeC4Diagram.props';
  */
 export declare function IconRendererProvider({ value, children, }: PropsWithChildren<{
     value: ElementIconRenderer | null;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;
 export declare function IconRenderer({ element, className, style, }: {
     element?: {
         id: string;
@@ -36,4 +36,4 @@ export declare function IconOrShapeRenderer({ element, className, style, }: {
     };
     className?: string;
     style?: CSSProperties | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/context/IconRenderer.js

@@ -1,7 +1,7 @@
 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 { createContext, useContext, useMemo } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region src/context/IconRenderer.tsx
 var IconRendererContext = createContext(null);
@@ -47,17 +47,28 @@ 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 });
+	switch (true) {
+		case element.icon.startsWith("data:image/svg+xml"):
+			icon = /* @__PURE__ */ jsx(SvgDataUrlIcon, {
+				dataUrl: element.icon,
+				alt: element.title
+			});
+			break;
+		case element.icon.startsWith("http://"):
+		case element.icon.startsWith("https://"):
+		case element.icon.startsWith("data:image"):
+			icon = /* @__PURE__ */ jsx("img", {
+				src: element.icon,
+				alt: element.title
+			});
+			break;
+		case !!RenderIcon:
+			icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });
+			break;
+		default:
+			icon = null;
+			break;
+	}
 	if (!icon) return null;
 	return /* @__PURE__ */ jsx("div", {
 		className: cx(className, "likec4-element-icon"),
@@ -93,5 +104,14 @@ function IconOrShapeRenderer({ element, className, style }) {
 		style
 	});
 }
+function SvgDataUrlIcon({ dataUrl, ...props }) {
+	const svgContent = useMemo(() => decodeSvgDataUrl(dataUrl), [dataUrl]);
+	if (!svgContent) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		style: { display: "contents" },
+		dangerouslySetInnerHTML: { __html: svgContent }
+	});
+}
 //#endregion
 export { IconOrShapeRenderer, IconRenderer, IconRendererProvider };

package/dist/context/LikeC4ModelContext.d.ts

@@ -6,7 +6,7 @@ type UnknownLayouted = t.aux.UnknownLayouted;
 export declare const LikeC4ModelContextProvider: Provider<LikeC4Model<any> | null>;
 export type CurrentViewModel = LikeC4ViewModel<UnknownLayouted, LayoutedView<UnknownLayouted>>;
 export declare const CurrentViewModelContext: Provider<CurrentViewModel | null>;
-export declare function EnsureCurrentViewModel({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
+export declare function EnsureCurrentViewModel({ children }: PropsWithChildren): import("react").JSX.Element | null;
 /**
  * @returns The LikeC4Model from context, or null if no LikeC4ModelProvider is found.
  */

package/dist/context/ShadowRootContext.d.ts

@@ -0,0 +1,3 @@
+import { Context } from 'react';
+export declare const ShadowRootContext: Context<ShadowRoot | null>;
+export declare function useShadowRoot(): ShadowRoot;

package/dist/context/ShadowRootContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+//#region src/context/ShadowRootContext.tsx
+var ShadowRootContext = createContext(null);
+//#endregion
+export { ShadowRootContext };

package/dist/context/TagStylesContext.d.ts

@@ -1,7 +1,8 @@
 import { TagSpecification } from '@likec4/core';
 import { PropsWithChildren } from 'react';
+export declare const generateColorVars: (spec: TagSpecification) => string;
 export declare function TagStylesProvider({ children, rootSelector }: PropsWithChildren<{
     rootSelector: string;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;
 export declare function useTagSpecifications(): Record<string, TagSpecification>;
 export declare function useTagSpecification(tag: string): TagSpecification;

package/dist/context/TagStylesContext.js

@@ -1,19 +1,20 @@
 import "../_virtual/_rolldown/runtime.js";
 import { useLikeC4Specification } from "../hooks/useLikeC4Model.js";
-import { createContext, memo, useContext } from "react";
+import { createContext, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { entries, flatMap, isEmpty, join, pipe } from "remeda";
 import { isTagColorSpecified } from "@likec4/core";
 import { useMantineStyleNonce } from "@mantine/core";
-import { DefaultTagColors } from "@likec4/core/styles";
+import { DefaultTagColors, getContrastedColorsAPCA, isValidColor } from "@likec4/core/styles";
 //#region src/context/TagStylesContext.tsx
 var TagStylesContext = createContext({});
 var radixColors = DefaultTagColors;
 var generateColorVars = (spec) => {
 	const color = spec.color;
-	if (isTagColorSpecified(spec)) return `
+	if (isTagColorSpecified(spec) && isValidColor(color)) return `
       --colors-likec4-tag-bg: ${color};
       --colors-likec4-tag-bg-hover: color-mix(in oklab, ${color}, var(--colors-likec4-mix-color) 20%);
+      --colors-likec4-tag-text: ${getContrastedColorsAPCA(color).hiContrast};
     `;
 	if (!radixColors.includes(color)) return "";
 	let textcolor = "12";
@@ -59,8 +60,5 @@ var TagStylesheet = memo(({ stylesheet, nonce }) => {
 		nonce
 	});
 });
-function useTagSpecification(tag) {
-	return useContext(TagStylesContext)[tag] ?? { color: "tomato" };
-}
 //#endregion
-export { TagStylesProvider, useTagSpecification };
+export { TagStylesProvider };

package/dist/editor/LikeC4EditorProvider.d.ts

@@ -24,11 +24,11 @@ export type LikeC4EditorProviderProps = PropsWithChildren<{
  * </LikeC4EditorProvider>
  * ```
  */
-export declare function LikeC4EditorProvider({ children, editor }: LikeC4EditorProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4EditorProvider({ children, editor }: LikeC4EditorProviderProps): import("react").JSX.Element;
 /**
  * Component that ensures the editor context is available.
  *
  * @param children - The children to render.
  */
-export declare function EnsureEditorContext({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
+export declare function EnsureEditorContext({ children }: PropsWithChildren): import("react").JSX.Element | null;
 export declare function useOptionalLikeC4Editor(): LikeC4EditorCallbacks | null;