@likec4/diagram 1.55.1 → 1.57.0

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

@@ -1,296 +1,213 @@
-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.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
-
-const statebtn = cva({
-  base: {
-    border: "none",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    justifySelf: "flex-end",
-    fontSize: "[8px]",
-    fontFamily: "mono",
-    fontWeight: "bold",
-    letterSpacing: "[0.5px]",
-    marginLeft: "2",
-    // marginRight: '[calc((var(--depth, 1) - 1) * {spacing.4.5} + {spacing.2})]',
-    py: "1",
-    px: "1.5",
-    lineHeight: "1",
-    rounded: "sm",
-    minWidth: 32,
-    transition: "normal",
-    _hover: {
-      color: "text.bright"
-    }
-  },
-  variants: {
-    state: {
-      // 'include-explicit' | 'include-implicit' | 'exclude' | 'disabled' | 'not-present'
-      ["include-explicit"]: {
-        backgroundColor: "grass.6",
-        color: "text"
-        // color: 'grass.0',
-      },
-      ["include-implicit"]: {
-        backgroundColor: "grass.6",
-        color: "text"
-        // color: 'grass.0',
-      },
-      exclude: {
-        backgroundColor: "red.6",
-        color: "text"
-      },
-      ["disabled"]: {
-        // backgroundColor: 'default.disabled',
-        color: "text.dimmed"
-      },
-      "not-present": {
-        color: "text.dimmed",
-        backgroundColor: "default.hover/50"
-      }
-    }
-  },
-  defaultVariants: {
-    state: "not-present"
-  }
+import "../../_virtual/_rolldown/runtime.js";
+import { IconOrShapeRenderer } from "../../context/IconRenderer.js";
+import { css, cva, cx, sva } from "@likec4/styles/css";
+import { IconChevronRight } from "@tabler/icons-react";
+import { jsx } from "react/jsx-runtime";
+import { createStyleContext } from "@likec4/styles/jsx";
+//#region src/adhoc-editor/components/Tree.tsx
+var statebtn = cva({
+	base: {
+		border: "none",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		justifySelf: "flex-end",
+		fontSize: "[8px]",
+		fontFamily: "mono",
+		fontWeight: "bold",
+		letterSpacing: "[0.5px]",
+		marginLeft: "2",
+		py: "1",
+		px: "1.5",
+		lineHeight: "1",
+		rounded: "sm",
+		minWidth: 32,
+		transition: "normal",
+		_hover: { color: "text.bright" }
+	},
+	variants: { state: {
+		["include-explicit"]: {
+			backgroundColor: "grass.6",
+			color: "text"
+		},
+		["include-implicit"]: {
+			backgroundColor: "grass.6",
+			color: "text"
+		},
+		exclude: {
+			backgroundColor: "red.6",
+			color: "text"
+		},
+		["disabled"]: { color: "text.dimmed" },
+		"not-present": {
+			color: "text.dimmed",
+			backgroundColor: "default.hover/50"
+		}
+	} },
+	defaultVariants: { state: "not-present" }
 });
-const icon = css.raw({
-  flex: 0,
-  display: "flex",
-  alignItems: "center",
-  color: "text.dimmed",
-  //   _groupFocus: 'inherit',
-  //   _groupHover: 'inherit',
-  // },
-  _groupHover: {
-    color: "text"
-  },
-  _groupFocusWithin: {
-    color: "mantine.colors.primary.lightColor!"
-  },
-  _groupFocusVisible: {
-    color: "mantine.colors.primary.lightColor!"
-  },
-  "& :where(.likec4-shape-icon, .likec4-element-icon)": {
-    display: "contents"
-  },
-  "& :where(svg, img)": {
-    width: "10px",
-    height: "10px"
-  },
-  "@/md": {
-    "& :where(svg, img)": {
-      width: "14px",
-      height: "14px"
-    }
-  },
-  "@/lg": {
-    "& :where(svg, img)": {
-      width: "16px",
-      height: "16px"
-    }
-  },
-  opacity: {
-    base: 0.8,
-    _groupFocusVisible: 1,
-    _groupHover: 1
-  }
+var icon = css.raw({
+	flex: 0,
+	display: "flex",
+	alignItems: "center",
+	color: "text.dimmed",
+	_groupHover: { color: "text" },
+	_groupFocusWithin: { color: "mantine.colors.primary.lightColor!" },
+	_groupFocusVisible: { color: "mantine.colors.primary.lightColor!" },
+	"& :where(.likec4-shape-icon, .likec4-element-icon)": { display: "contents" },
+	"& :where(svg, img)": {
+		width: "10px",
+		height: "10px"
+	},
+	"@/md": { "& :where(svg, img)": {
+		width: "14px",
+		height: "14px"
+	} },
+	"@/lg": { "& :where(svg, img)": {
+		width: "16px",
+		height: "16px"
+	} },
+	opacity: {
+		base: .8,
+		_groupFocusVisible: 1,
+		_groupHover: 1
+	}
 });
-const control = css.raw({
-  paddingLeft: "[calc((var(--depth, 1) - 1) * {spacing.2} + {spacing.1})]",
-  px: "1",
-  py: "1",
-  mb: "0",
-  columnGap: "1",
-  "@/md": {
-    paddingLeft: "[calc((var(--depth, 1) - 1) * {spacing.2} + {spacing.2})]",
-    px: "2",
-    py: "1.5",
-    mb: "0.5",
-    columnGap: "2"
-  },
-  "@/lg": {
-    paddingLeft: "[calc((var(--depth, 1) - 1) * {spacing.3} + {spacing.2.5})]",
-    py: "2.5"
-  },
-  cursor: "pointer",
-  border: "none",
-  appearance: "none",
-  width: "full",
-  alignItems: "center",
-  display: "grid",
-  gridTemplateColumns: "auto 1fr auto",
-  gridTemplateRows: "auto auto",
-  rounded: "sm",
-  backgroundColor: {
-    base: "transparent",
-    _hover: {
-      base: "mantine.colors.gray[1]",
-      _dark: "mantine.colors.dark[5]"
-    },
-    _focusWithin: "mantine.colors.primary.lightHover!",
-    _focusVisible: "mantine.colors.primary.lightHover!"
-  },
-  color: {
-    base: "text",
-    _hover: "text.bright",
-    _focusWithin: "mantine.colors.primary.lightColor!",
-    _focusVisible: "mantine.colors.primary.lightColor!"
-  },
-  // _hover: {
-  //   backgroundColor: {
-  //     base: 'mantine.colors.gray[1]',
-  //     _dark: 'mantine.colors.dark[5]',
-  //   },
-  // },
-  _focusVisible: {
-    outline: "none"
-    // backgroundColor: 'mantine.colors.primary.lightHover!',
-  }
+var control = css.raw({
+	paddingLeft: "[calc((var(--depth, 1) - 1) * {spacing.2} + {spacing.1})]",
+	px: "1",
+	py: "1",
+	mb: "0",
+	columnGap: "1",
+	"@/md": {
+		paddingLeft: "[calc((var(--depth, 1) - 1) * {spacing.2} + {spacing.2})]",
+		px: "2",
+		py: "1.5",
+		mb: "0.5",
+		columnGap: "2"
+	},
+	"@/lg": {
+		paddingLeft: "[calc((var(--depth, 1) - 1) * {spacing.3} + {spacing.2.5})]",
+		py: "2.5"
+	},
+	cursor: "pointer",
+	border: "none",
+	appearance: "none",
+	width: "full",
+	alignItems: "center",
+	display: "grid",
+	gridTemplateColumns: "auto 1fr auto",
+	gridTemplateRows: "auto auto",
+	rounded: "sm",
+	backgroundColor: {
+		base: "transparent",
+		_hover: {
+			base: "mantine.colors.gray[1]",
+			_dark: "mantine.colors.dark[5]"
+		},
+		_focusWithin: "mantine.colors.primary.lightHover!",
+		_focusVisible: "mantine.colors.primary.lightHover!"
+	},
+	color: {
+		base: "text",
+		_hover: "text.bright",
+		_focusWithin: "mantine.colors.primary.lightColor!",
+		_focusVisible: "mantine.colors.primary.lightColor!"
+	},
+	_focusVisible: { outline: "none" }
 });
-const tree = sva({
-  slots: [
-    "branch",
-    "item",
-    // leaf
-    "control",
-    // branch control
-    "state",
-    // chip
-    "icon",
-    "label",
-    "content",
-    // branch content
-    "indicator"
-    // branch indicator
-  ],
-  base: {
-    branch: {},
-    item: {
-      ...control
-    },
-    control: {
-      ...control
-    },
-    state: {
-      border: "none",
-      display: "inline-flex",
-      alignItems: "center",
-      justifySelf: "flex-end",
-      marginLeft: "2",
-      // marginRight: '[calc((var(--depth, 1) - 1) * {spacing.4.5} + {spacing.2})]',
-      "--chip-fz": "9px",
-      "--chip-checked-padding": "{spacing.1}",
-      "--chip-padding": "{spacing.1}",
-      "--chip-spacing": "0",
-      "--chip-size": "16px",
-      // '& label': {
-      //   color: 'text',
-      //   _groupFocusVisible: {
-      //     backgroundColor: 'mantine.colors.primary.lightHover!',
-      //   },
-      //   // backgroundColor: 'transparent',
-      // },
-      transition: "opacity 150ms ease-out"
-      // opacity: {
-      //   base: 0.4,
-      //   _checked: 1,
-      //   _groupFocusVisible: 1,
-      //   _groupHover: 1,
-      // },
-    },
-    icon: {
-      ...icon
-    },
-    label: {
-      cursor: "inherit",
-      color: "inherit",
-      userSelect: "none",
-      textStyle: "xxs",
-      truncate: "ellipsis",
-      "@/sm": {
-        textStyle: "xs"
-      },
-      "@/md": {
-        textStyle: "sm"
-      },
-      fontWeight: "[450]",
-      display: "inline-flex",
-      alignItems: "center",
-      gap: "2"
-    },
-    indicator: {
-      color: "inherit",
-      transition: "transform 150ms ease-out",
-      width: "12px",
-      opacity: 0.75,
-      "@/md": {
-        width: "14px"
-      },
-      _open: {
-        transform: "rotate(90deg)"
-      }
-    },
-    content: {}
-  },
-  variants: {},
-  defaultVariants: {}
+var { withRootProvider, withContext } = createStyleContext(sva({
+	slots: [
+		"branch",
+		"item",
+		"control",
+		"state",
+		"icon",
+		"label",
+		"content",
+		"indicator"
+	],
+	base: {
+		branch: {},
+		item: { ...control },
+		control: { ...control },
+		state: {
+			border: "none",
+			display: "inline-flex",
+			alignItems: "center",
+			justifySelf: "flex-end",
+			marginLeft: "2",
+			"--chip-fz": "9px",
+			"--chip-checked-padding": "{spacing.1}",
+			"--chip-padding": "{spacing.1}",
+			"--chip-spacing": "0",
+			"--chip-size": "16px",
+			transition: "opacity 150ms ease-out"
+		},
+		icon: { ...icon },
+		label: {
+			cursor: "inherit",
+			color: "inherit",
+			userSelect: "none",
+			textStyle: "xxs",
+			truncate: "ellipsis",
+			"@/sm": { textStyle: "xs" },
+			"@/md": { textStyle: "sm" },
+			fontWeight: "[450]",
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "2"
+		},
+		indicator: {
+			color: "inherit",
+			transition: "transform 150ms ease-out",
+			width: "12px",
+			opacity: .75,
+			"@/md": { width: "14px" },
+			_open: { transform: "rotate(90deg)" }
+		},
+		content: {}
+	},
+	variants: {},
+	defaultVariants: {}
+}));
+var Root = withRootProvider("div");
+var Branch = withContext("div", "branch");
+var Item = withContext("div", "item", {
+	forwardProps: [],
+	defaultProps: { className: "group" }
 });
-const { withRootProvider, withContext } = createStyleContext(tree);
-const Root = withRootProvider("div");
-const Branch = withContext("div", "branch");
-const Item = withContext("div", "item", {
-  forwardProps: [],
-  defaultProps: {
-    className: "group"
-  }
+var Control = withContext("div", "control", {
+	forwardProps: [],
+	defaultProps: { className: "group" }
 });
-const Control = withContext("div", "control", {
-  forwardProps: [],
-  defaultProps: {
-    className: "group"
-  }
-});
-const ElementState = ({ node, state, onClick, className, ...props }) => {
-  const cls = cx(
-    className,
-    "mantine-active",
-    statebtn({ state })
-  );
-  return /* @__PURE__ */ jsx("div", { ...props, onClick, className: cls, children: state });
+var ElementState = ({ node, state, onClick, className, ...props }) => {
+	const cls = cx(className, "mantine-active", statebtn({ state }));
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		onClick,
+		className: cls,
+		children: state
+	});
 };
-const State = withContext(ElementState, "state", {
-  forwardProps: ["node", "state", "onClick", "className"]
-});
-const Icon = withContext(IconOrShapeRenderer, "icon", {
-  forwardProps: ["element", "className"]
-});
-const Label = withContext("div", "label", {
-  forwardProps: []
-});
-const Content = withContext("div", "content", {
-  forwardProps: []
-});
-const Indicator = withContext(IconChevronRight, "indicator", {
-  forwardProps: [],
-  defaultProps: {
-    size: 14
-  }
-});
-const Tree = {
-  Root,
-  Branch,
-  Item,
-  Control,
-  State,
-  Icon,
-  Label,
-  Content,
-  Indicator
+var Tree = {
+	Root,
+	Branch,
+	Item,
+	Control,
+	State: withContext(ElementState, "state", { forwardProps: [
+		"node",
+		"state",
+		"onClick",
+		"className"
+	] }),
+	Icon: withContext(IconOrShapeRenderer, "icon", { forwardProps: ["element", "className"] }),
+	Label: withContext("div", "label", { forwardProps: [] }),
+	Content: withContext("div", "content", { forwardProps: [] }),
+	Indicator: withContext(IconChevronRight, "indicator", {
+		forwardProps: [],
+		defaultProps: { size: 14 }
+	})
 };
-
+//#endregion
 export { Tree };

package/dist/adhoc-editor/hooks.js

@@ -1,29 +1,34 @@
-import { nonNullable } from '@likec4/core';
-import { useSelector } from '@xstate/react';
-import 'fast-equals';
-import { createContext, useContext } from 'react';
-
-const AdhocEditorActorContext = createContext(null);
-const AdhocEditorActorContextProvider = AdhocEditorActorContext.Provider;
+import "../_virtual/_rolldown/runtime.js";
+import { createContext, useContext } from "react";
+import "fast-equals";
+import { nonNullable } from "@likec4/core";
+import { useSelector } from "@xstate/react";
+//#region src/adhoc-editor/hooks.ts
+var AdhocEditorActorContext = createContext(null);
+var AdhocEditorActorContextProvider = AdhocEditorActorContext.Provider;
 function useAdhocEditorActor() {
-  return nonNullable(useContext(AdhocEditorActorContext), "No AdhocEditorActorContext");
+	return nonNullable(useContext(AdhocEditorActorContext), "No AdhocEditorActorContext");
 }
-const EMPTY_VIEW = {
-  id: "adhoc",
-  ["_type"]: "element",
-  autoLayout: { direction: "LR" },
-  nodes: [],
-  edges: [],
-  bounds: { x: 0, y: 0, width: 0, height: 0 },
-  ["_stage"]: "layouted",
-  title: null,
-  description: null,
-  hash: ""
+var EMPTY_VIEW = {
+	id: "adhoc",
+	["_type"]: "element",
+	autoLayout: { direction: "LR" },
+	nodes: [],
+	edges: [],
+	bounds: {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	},
+	["_stage"]: "layouted",
+	title: null,
+	description: null,
+	hash: ""
 };
-const selectView = ({ context }) => context.view ?? EMPTY_VIEW;
+var selectView = ({ context }) => context.view ?? EMPTY_VIEW;
 function useAdhocView() {
-  const actorRef = useAdhocEditorActor();
-  return useSelector(actorRef, selectView);
+	return useSelector(useAdhocEditorActor(), selectView);
 }
-
+//#endregion
 export { AdhocEditorActorContextProvider, useAdhocEditorActor, useAdhocView };

package/dist/adhoc-editor/index.js

@@ -1 +1,2 @@
-export { LikeC4AdHocViewEditor } from './LikeC4AdHocViewEditor.js';
+import { LikeC4AdHocViewEditor } from "./LikeC4AdHocViewEditor.js";
+export { LikeC4AdHocViewEditor };

package/dist/adhoc-editor/state/ActorProvider.js

@@ -1,40 +1,37 @@
-import { jsx } from 'react/jsx-runtime';
-import { useActorRef } from '@xstate/react';
-import { useRef, useMemo, useEffect } from 'react';
-import { fromPromise } from 'xstate';
-import { AdhocEditorActorContextProvider } from '../hooks.js';
-import { adhocEditorLogic } from './actor.js';
-
-const State = {
-  read: () => JSON.parse(sessionStorage.getItem("adhoc-editor-state") || "null") ?? void 0,
-  write: (state) => sessionStorage.setItem("adhoc-editor-state", JSON.stringify(state))
+import "../../_virtual/_rolldown/runtime.js";
+import { AdhocEditorActorContextProvider } from "../hooks.js";
+import { adhocEditorLogic } from "./actor.js";
+import { useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useActorRef } from "@xstate/react";
+import { fromPromise } from "xstate";
+//#region src/adhoc-editor/state/ActorProvider.tsx
+var State = {
+	read: () => JSON.parse(sessionStorage.getItem("adhoc-editor-state") || "null") ?? void 0,
+	write: (state) => sessionStorage.setItem("adhoc-editor-state", JSON.stringify(state))
 };
 function AdhocEditorActorProvider({ children, service }) {
-  const serviceRef = useRef(service);
-  serviceRef.current = service;
-  const provided = useMemo(() => ({
-    actors: {
-      service: fromPromise(({ input }) => serviceRef.current.process(input))
-    }
-  }), []);
-  const actorRef = useActorRef(
-    adhocEditorLogic.provide(provided),
-    {
-      id: "adhoc-editor",
-      snapshot: State.read(),
-      systemId: "adhoc-editor",
-      inspect: (event) => {
-        console.log("[AdhocEditorActor]", event);
-      }
-    }
-  );
-  useEffect(() => {
-    const subscription = actorRef.subscribe((state) => {
-      State.write(state);
-    });
-    return () => subscription.unsubscribe();
-  }, [actorRef]);
-  return /* @__PURE__ */ jsx(AdhocEditorActorContextProvider, { value: actorRef, children });
+	const serviceRef = useRef(service);
+	serviceRef.current = service;
+	const provided = useMemo(() => ({ actors: { service: fromPromise(({ input }) => serviceRef.current.process(input)) } }), []);
+	const actorRef = useActorRef(adhocEditorLogic.provide(provided), {
+		id: "adhoc-editor",
+		snapshot: State.read(),
+		systemId: "adhoc-editor",
+		inspect: (event) => {
+			console.log("[AdhocEditorActor]", event);
+		}
+	});
+	useEffect(() => {
+		const subscription = actorRef.subscribe((state) => {
+			State.write(state);
+		});
+		return () => subscription.unsubscribe();
+	}, [actorRef]);
+	return /* @__PURE__ */ jsx(AdhocEditorActorContextProvider, {
+		value: actorRef,
+		children
+	});
 }
-
+//#endregion
 export { AdhocEditorActorProvider };