@likec4/diagram 1.55.1 → 1.56.0

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

@@ -1,139 +1,124 @@
-import { jsx } from 'react/jsx-runtime';
-import { createStore, shallowEqual } from '@xstate/store';
-import { useRef, useMemo, useEffect, createContext, useContext } from 'react';
-import { hasAtLeast } from 'remeda';
-import { useAdhocEditorActor } from '../hooks.js';
-import { createTreeCollection } from '../useElementsTree.js';
-import { deriveElementStates } from './utils.js';
-import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
-import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
-import { x as xstateStoreReact_cjsExports } from '../../_virtual/xstate-store-react.cjs.js';
-import { useCallbackRef } from '../../hooks/useCallbackRef.js';
-
-const createEditorPanelStore = ({
-  initial,
-  sideEffects
-}) => createStore({
-  context: {
-    searchInput: "",
-    expandedValue: [],
-    collection: initial
-  },
-  emits: {
-    inputKeyDown: (payload) => {
-    }
-  },
-  on: {
-    "inputChange": (context, event) => {
-      return {
-        ...context,
-        searchInput: event.value
-      };
-    },
-    "inputKeyDown": (context, event, enqueue) => {
-      enqueue.emit.inputKeyDown();
-    },
-    "modelUpdate": (context, event) => {
-      return {
-        ...context,
-        collection: event.collection
-      };
-    },
-    "elementClick": (context, event, enqueue) => {
-      const current = context.collection.findNode(event.id);
-      const path = context.collection.getIndexPath(event.id);
-      if (!current || !path) {
-        return context;
-      }
-      enqueue.effect(() => {
-        sideEffects.onElementStateClick({ id: event.id });
-      });
-      return context;
-    }
-  }
+import "../../_virtual/_rolldown/runtime.js";
+import { useCallbackRef } from "../../hooks/useCallbackRef.js";
+import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
+import { useAdhocEditorActor } from "../hooks.js";
+import { createTreeCollection } from "../useElementsTree.js";
+import { deriveElementStates } from "./utils.js";
+import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { hasAtLeast } from "remeda";
+import { createStore, shallowEqual } from "@xstate/store";
+import { useSelector } from "@xstate/store/react";
+//#region src/adhoc-editor/state/panel.tsx
+var createEditorPanelStore = ({ initial, sideEffects }) => createStore({
+	context: {
+		searchInput: "",
+		expandedValue: [],
+		collection: initial
+	},
+	emits: { inputKeyDown: (payload) => {} },
+	on: {
+		"inputChange": (context, event) => {
+			return {
+				...context,
+				searchInput: event.value
+			};
+		},
+		"inputKeyDown": (context, event, enqueue) => {
+			enqueue.emit.inputKeyDown();
+		},
+		"modelUpdate": (context, event) => {
+			return {
+				...context,
+				collection: event.collection
+			};
+		},
+		"elementClick": (context, event, enqueue) => {
+			const current = context.collection.findNode(event.id);
+			const path = context.collection.getIndexPath(event.id);
+			if (!current || !path) return context;
+			enqueue.effect(() => {
+				sideEffects.onElementStateClick({ id: event.id });
+			});
+			return context;
+		}
+	}
 });
-const EditorPanelStoreContext = createContext(null);
-const EditorPanelStoreProvider = (props) => {
-  const likec4model = useLikeC4Model();
-  const likec4modelRef = useRef(likec4model);
-  likec4modelRef.current = likec4model;
-  const actorRef = useAdhocEditorActor();
-  const store = useMemo(() => createEditorPanelStore({
-    initial: createTreeCollection(likec4model),
-    sideEffects: {
-      onElementStateClick({ id }) {
-        actorRef.send({ type: "toggle.element", id });
-      }
-    }
-  }), [actorRef]);
-  useUpdateEffect(() => {
-    store.trigger.modelUpdate({
-      collection: createTreeCollection(
-        likec4model,
-        deriveElementStates(actorRef.getSnapshot().context)
-      )
-    });
-  }, [likec4model]);
-  useEffect(() => {
-    const subscription = actorRef.on("view.update", () => {
-      store.trigger.modelUpdate({
-        collection: createTreeCollection(
-          likec4modelRef.current,
-          deriveElementStates(actorRef.getSnapshot().context)
-        )
-      });
-    });
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [actorRef]);
-  return /* @__PURE__ */ jsx(EditorPanelStoreContext.Provider, { value: store, children: props.children });
+var EditorPanelStoreContext = createContext(null);
+var EditorPanelStoreProvider = (props) => {
+	const likec4model = useLikeC4Model();
+	const likec4modelRef = useRef(likec4model);
+	likec4modelRef.current = likec4model;
+	const actorRef = useAdhocEditorActor();
+	const store = useMemo(() => createEditorPanelStore({
+		initial: createTreeCollection(likec4model),
+		sideEffects: { onElementStateClick({ id }) {
+			actorRef.send({
+				type: "toggle.element",
+				id
+			});
+		} }
+	}), [actorRef]);
+	useUpdateEffect(() => {
+		store.trigger.modelUpdate({ collection: createTreeCollection(likec4model, deriveElementStates(actorRef.getSnapshot().context)) });
+	}, [likec4model]);
+	useEffect(() => {
+		const subscription = actorRef.on("view.update", () => {
+			store.trigger.modelUpdate({ collection: createTreeCollection(likec4modelRef.current, deriveElementStates(actorRef.getSnapshot().context)) });
+		});
+		return () => {
+			subscription.unsubscribe();
+		};
+	}, [actorRef]);
+	return /* @__PURE__ */ jsx(EditorPanelStoreContext.Provider, {
+		value: store,
+		children: props.children
+	});
 };
 function selectEditorPanelState(selector, compare) {
-  return [
-    (snapshot) => selector(snapshot.context),
-    compare ?? shallowEqual
-  ];
+	return [(snapshot) => selector(snapshot.context), compare ?? shallowEqual];
 }
 function useEditorPanelStore() {
-  return useContext(EditorPanelStoreContext);
+	return useContext(EditorPanelStoreContext);
 }
 function useEditorPanelState(...args) {
-  const store = useEditorPanelStore();
-  let selector, compare;
-  if (args.length === 2) {
-    [selector, compare] = args;
-  } else if (args.length === 1 && Array.isArray(args[0]) && hasAtLeast(args[0], 2)) {
-    [selector, compare] = args[0];
-  } else if (args.length === 1 && Array.isArray(args[0]) && hasAtLeast(args[0], 1)) {
-    [selector, compare] = [args[0], shallowEqual];
-  } else if (args.length === 1 && typeof args[0] === "function") {
-    [selector, compare] = [args[0], shallowEqual];
-  } else {
-    throw new Error("Invalid arguments for useEditorPanelState");
-  }
-  return xstateStoreReact_cjsExports.useSelector(store, selector, compare);
+	const store = useEditorPanelStore();
+	let selector;
+	let compare;
+	if (args.length === 2) [selector, compare] = args;
+	else if (args.length === 1 && Array.isArray(args[0]) && hasAtLeast(args[0], 2)) [selector, compare] = args[0];
+	else if (args.length === 1 && Array.isArray(args[0]) && hasAtLeast(args[0], 1)) [selector, compare] = [args[0], shallowEqual];
+	else if (args.length === 1 && typeof args[0] === "function") [selector, compare] = [args[0], shallowEqual];
+	else throw new Error("Invalid arguments for useEditorPanelState");
+	return useSelector(store, selector, compare);
 }
+/**
+* Hook to subscribe to editor panel events
+* @param args - The event name and handler function
+* @example
+* useOnEditorPanelEvent('inputKeyDown', () => {
+*   console.log('Input key down event')
+* })
+*/
 function useOnEditorPanelEvent(...args) {
-  const store = useEditorPanelStore();
-  const event = args[0];
-  const handler = useCallbackRef(args[1]);
-  useEffect(() => {
-    const subscription = store.on(event, handler);
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [event, store]);
+	const store = useEditorPanelStore();
+	const event = args[0];
+	const handler = useCallbackRef(args[1]);
+	useEffect(() => {
+		const subscription = store.on(event, handler);
+		return () => {
+			subscription.unsubscribe();
+		};
+	}, [event, store]);
 }
 function useEditorPanelTrigger(...args) {
-  const store = useEditorPanelStore();
-  if (args.length === 0) {
-    return store.trigger;
-  }
-  const trigger = args[0];
-  return useCallbackRef((...args2) => {
-    trigger(...[store.trigger, ...args2]);
-  });
+	const store = useEditorPanelStore();
+	if (args.length === 0) return store.trigger;
+	const trigger = args[0];
+	return useCallbackRef((...args) => {
+		trigger(...[store.trigger, ...args]);
+	});
 }
-
-export { EditorPanelStoreProvider, selectEditorPanelState, useEditorPanelState, useEditorPanelStore, useEditorPanelTrigger, useOnEditorPanelEvent };
+//#endregion
+export { EditorPanelStoreProvider, selectEditorPanelState, useEditorPanelState, useEditorPanelTrigger, useOnEditorPanelEvent };

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

@@ -1,32 +1,25 @@
-import { toSet, difference } from '@likec4/core/utils';
-import { isNonNullish, pipe, filter, map } from 'remeda';
-
+import "../../_virtual/_rolldown/runtime.js";
+import { filter, isNonNullish, map, pipe } from "remeda";
+import { difference as difference$1, toSet } from "@likec4/core/utils";
+//#region src/adhoc-editor/state/utils.ts
+/**
+* Derives the state of elements in the view based on the active rules.
+*
+* Categorizes elements into:
+* - Explicitly included: Elements that are both in the view and have an enabled include rule
+* - Implicitly included: Elements in the view without an explicit include rule
+* - Excluded: Elements with an enabled exclude rule that are not in the view
+*/
 function deriveElementStates({ rules, view }) {
-  const includedInView = new Set(view ? view.nodes.map((node) => node.modelRef ?? null).filter(isNonNullish) : []);
-  const explicits = pipe(
-    rules,
-    filter((r) => r.type === "include" && r.enabled),
-    map((r) => r.expr.ref.model),
-    toSet()
-  );
-  const excluded = pipe(
-    rules,
-    filter((r) => r.type === "exclude" && r.enabled),
-    map((r) => r.expr.ref.model),
-    toSet()
-  );
-  const disabled = pipe(
-    rules,
-    filter((r) => !r.enabled),
-    map((r) => r.expr.ref.model),
-    toSet()
-  );
-  return {
-    disabled,
-    includedExplicit: explicits,
-    includedImplicit: difference(includedInView, explicits),
-    excluded: difference(excluded, includedInView)
-  };
+	const includedInView = new Set(view ? view.nodes.map((node) => node.modelRef ?? null).filter(isNonNullish) : []);
+	const explicits = pipe(rules, filter((r) => r.type === "include" && r.enabled), map((r) => r.expr.ref.model), toSet());
+	const excluded = pipe(rules, filter((r) => r.type === "exclude" && r.enabled), map((r) => r.expr.ref.model), toSet());
+	return {
+		disabled: pipe(rules, filter((r) => !r.enabled), map((r) => r.expr.ref.model), toSet()),
+		includedExplicit: explicits,
+		includedImplicit: difference$1(includedInView, explicits),
+		excluded: difference$1(excluded, includedInView)
+	};
 }
-
+//#endregion
 export { deriveElementStates };

package/dist/adhoc-editor/useElementsTree.js

@@ -1,130 +1,98 @@
-import { compareNaturalHierarchically, toArray } from '@likec4/core/utils';
-import { useMachine, normalizeProps } from '@zag-js/react';
-import * as tree from '@zag-js/tree-view';
-import { useDeferredValue, useMemo, useState, useEffect } from 'react';
-import { difference, hasAtLeast, sort } from 'remeda';
-import { useId } from '../hooks/useId.js';
-import { useEditorPanelState, useOnEditorPanelEvent, selectEditorPanelState } from './state/panel.js';
-
+import "../_virtual/_rolldown/runtime.js";
+import { useId } from "../hooks/useId.js";
+import { selectEditorPanelState, useEditorPanelState, useOnEditorPanelEvent } from "./state/panel.js";
+import { useDeferredValue, useEffect, useMemo, useState } from "react";
+import { difference, hasAtLeast, sort } from "remeda";
+import { compareNaturalHierarchically, toArray } from "@likec4/core/utils";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import * as tree from "@zag-js/tree-view";
+//#region src/adhoc-editor/useElementsTree.ts
 function getElementState(id, states) {
-  if (!states) {
-    return "not-present";
-  }
-  if (states.disabled.has(id)) {
-    return "disabled";
-  }
-  if (states.includedExplicit.has(id)) {
-    return "include-explicit";
-  }
-  if (states.includedImplicit.has(id)) {
-    return "include-implicit";
-  }
-  if (states.excluded.has(id)) {
-    return "exclude";
-  }
-  return "not-present";
+	if (!states) return "not-present";
+	if (states.disabled.has(id)) return "disabled";
+	if (states.includedExplicit.has(id)) return "include-explicit";
+	if (states.includedImplicit.has(id)) return "include-implicit";
+	if (states.excluded.has(id)) return "exclude";
+	return "not-present";
 }
 function mapToTreeNodes(elements, states) {
-  return toArray(elements).map((el) => ({
-    id: el.id,
-    title: el.title,
-    shape: el.shape,
-    icon: el.icon ?? void 0,
-    children: mapToTreeNodes(el.children(), states),
-    state: getElementState(el.id, states)
-  }));
+	return toArray(elements).map((el) => ({
+		id: el.id,
+		title: el.title,
+		shape: el.shape,
+		icon: el.icon ?? void 0,
+		children: mapToTreeNodes(el.children(), states),
+		state: getElementState(el.id, states)
+	}));
 }
 function createTreeCollection(model, states) {
-  return tree.collection({
-    rootNode: {
-      id: "@ROOT",
-      title: "",
-      shape: "rectangle",
-      icon: void 0,
-      children: mapToTreeNodes(model.roots(), states),
-      state: "not-present"
-    },
-    nodeToValue(node) {
-      return node.id;
-    },
-    nodeToString(node) {
-      return node.title;
-    },
-    nodeToChildren(node) {
-      return node.children;
-    },
-    isNodeDisabled() {
-      return false;
-    }
-  });
+	return tree.collection({
+		rootNode: {
+			id: "@ROOT",
+			title: "",
+			shape: "rectangle",
+			icon: void 0,
+			children: mapToTreeNodes(model.roots(), states),
+			state: "not-present"
+		},
+		nodeToValue(node) {
+			return node.id;
+		},
+		nodeToString(node) {
+			return node.title;
+		},
+		nodeToChildren(node) {
+			return node.children;
+		},
+		isNodeDisabled() {
+			return false;
+		}
+	});
 }
-const select = selectEditorPanelState(
-  (s) => ({
-    searchInput: s.searchInput.length > 2 ? s.searchInput.toLowerCase() : "",
-    collection: s.collection
-  }),
-  (a, b) => a?.searchInput === b.searchInput && a?.collection.isEqual(b.collection)
-);
+var select = selectEditorPanelState((s) => ({
+	searchInput: s.searchInput.length > 2 ? s.searchInput.toLowerCase() : "",
+	collection: s.collection
+}), (a, b) => a?.searchInput === b.searchInput && a?.collection.isEqual(b.collection));
 function useElementsTree() {
-  const { searchInput, collection } = useEditorPanelState(select);
-  const lowerCaseInput = useDeferredValue(searchInput);
-  const filteredCollection = useMemo(() => {
-    if (!lowerCaseInput) return collection;
-    return collection.filter((c) => c.title.toLowerCase().includes(lowerCaseInput));
-  }, [collection, lowerCaseInput]);
-  const [expandedValue, setExpandedValue] = useState([]);
-  useEffect(() => {
-    if (filteredCollection === collection) {
-      return;
-    }
-    setExpandedValue((current) => {
-      const newBranches = difference(filteredCollection.getBranchValues(), current);
-      if (hasAtLeast(newBranches, 1)) {
-        return sort([...current, ...newBranches], compareNaturalHierarchically());
-      }
-      return current;
-    });
-  }, [filteredCollection]);
-  const service = useMachine(tree.machine, {
-    id: useId(),
-    collection: filteredCollection,
-    defaultCheckedValue: [],
-    defaultSelectedValue: [],
-    expandedValue,
-    onExpandedChange({ expandedValue: expandedValue2 }) {
-      setExpandedValue(expandedValue2);
-    },
-    // checkedValue,
-    // defaultExpandedValue: [],
-    // defaultFocusedValue: null,
-    // onCheckedChange({ checkedValue }) {
-    //   console.log({ checkedValue })
-    // },
-    onFocusChange(details) {
-      console.log("Focus change", details);
-    },
-    onSelectionChange(details) {
-      console.log("Selection change", details);
-    }
-    // expandOnClick,
-    // onSelectionChange({ focusedValue, selectedNodes }) {
-    //   console.log({ focusedValue, selectedNodes })
-    //   if (selectedNodes.length === 0) {
-    //     return
-    //   }
-    //   api.deselect(selectedNodes.map(n => n.id))
-    // },
-  });
-  service.context.get("focusedValue")?.slice;
-  const api = tree.connect(service, normalizeProps);
-  api.select;
-  useOnEditorPanelEvent("inputKeyDown", () => {
-    const first = api.collection.getFirstNode()?.id;
-    if (first) {
-      api.focus(first);
-    }
-  });
-  return api;
+	const { searchInput, collection } = useEditorPanelState(select);
+	const lowerCaseInput = useDeferredValue(searchInput);
+	const filteredCollection = useMemo(() => {
+		if (!lowerCaseInput) return collection;
+		return collection.filter((c) => c.title.toLowerCase().includes(lowerCaseInput));
+	}, [collection, lowerCaseInput]);
+	const [expandedValue, setExpandedValue] = useState([]);
+	useEffect(() => {
+		if (filteredCollection === collection) return;
+		setExpandedValue((current) => {
+			const newBranches = difference(filteredCollection.getBranchValues(), current);
+			if (hasAtLeast(newBranches, 1)) return sort([...current, ...newBranches], compareNaturalHierarchically());
+			return current;
+		});
+	}, [filteredCollection]);
+	const service = useMachine(tree.machine, {
+		id: useId(),
+		collection: filteredCollection,
+		defaultCheckedValue: [],
+		defaultSelectedValue: [],
+		expandedValue,
+		onExpandedChange({ expandedValue }) {
+			setExpandedValue(expandedValue);
+		},
+		onFocusChange(details) {
+			console.log("Focus change", details);
+		},
+		onSelectionChange(details) {
+			console.log("Selection change", details);
+		}
+	});
+	service.context.get("focusedValue")?.slice;
+	const api = tree.connect(service, normalizeProps);
+	api.select;
+	useOnEditorPanelEvent("inputKeyDown", () => {
+		const first = api.collection.getFirstNode()?.id;
+		if (first) api.focus(first);
+	});
+	return api;
 }
-
+//#endregion
 export { createTreeCollection, useElementsTree };

package/dist/base/Background.js

@@ -1,33 +1,30 @@
-import { jsx } from 'react/jsx-runtime';
-import { nonexhaustive } from '@likec4/core';
-import { Background as Background$1, BackgroundVariant } from '@xyflow/react';
-import { deepEqual } from 'fast-equals';
-import { memo } from 'react';
-
+import "../_virtual/_rolldown/runtime.js";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Background, BackgroundVariant } from "@xyflow/react";
+import { deepEqual } from "fast-equals";
+import { nonexhaustive } from "@likec4/core";
+//#region src/base/Background.tsx
 function literalToEnum(value) {
-  switch (value) {
-    case "dots":
-      return BackgroundVariant.Dots;
-    case "lines":
-      return BackgroundVariant.Lines;
-    case "cross":
-      return BackgroundVariant.Cross;
-    default:
-      nonexhaustive(value);
-  }
+	switch (value) {
+		case "dots": return BackgroundVariant.Dots;
+		case "lines": return BackgroundVariant.Lines;
+		case "cross": return BackgroundVariant.Cross;
+		default: nonexhaustive(value);
+	}
 }
-const compareProps = (prev, next) => {
-  if (typeof prev.background === "string" && typeof next.background === "string") {
-    return prev.background === next.background;
-  }
-  return deepEqual(prev.background, next.background);
+var compareProps = (prev, next) => {
+	if (typeof prev.background === "string" && typeof next.background === "string") return prev.background === next.background;
+	return deepEqual(prev.background, next.background);
 };
-const Background = memo(({ background }) => {
-  if (typeof background === "string") {
-    return /* @__PURE__ */ jsx(Background$1, { variant: literalToEnum(background), size: 2, gap: 20 });
-  }
-  return /* @__PURE__ */ jsx(Background$1, { ...background });
+var Background$1 = memo(({ background }) => {
+	if (typeof background === "string") return /* @__PURE__ */ jsx(Background, {
+		variant: literalToEnum(background),
+		size: 2,
+		gap: 20
+	});
+	return /* @__PURE__ */ jsx(Background, { ...background });
 }, compareProps);
-Background.displayName = "Background";
-
-export { Background };
+Background$1.displayName = "Background";
+//#endregion
+export { Background$1 as Background };