likec4 1.6.1-next.4 → 1.6.1

package/dist/__app__/react/components.mjs

@@ -20880,13 +20880,11 @@ function DiagramContextProvider({
   ), useUpdateEffect(
     () => {
       if (!store.current) return;
-      const state = store.current.getState();
-      state.view !== view && state.updateView(view);
-      const newProps = i$1(props, l$1);
-      o$1(state, newProps) || store.current.setState(newProps, !1, "update incoming props");
+      const state = store.current.getState(), newProps = i$1(props, l$1);
+      o$1(state, newProps) || store.current.setState(newProps, !1, "update incoming props"), state.view !== view && state.updateView(view);
     },
     [view, props],
-    shallowEqual
+    (prev, next) => shallowEqual(prev[0], next[0]) && shallowEqual(prev[1], next[1])
   ), /* @__PURE__ */ jsx(
     "div",
     {
@@ -23682,7 +23680,7 @@ const Text = Text$1.withProps({
   // tap: {
   //   scale: 0.9
   // }
-}, isEqualProps = (prev, next) => prev.id === next.id && deepEqual$1(prev.selected ?? !1, next.selected ?? !1) && deepEqual$1(prev.dragging ?? !1, next.dragging ?? !1) && deepEqual$1(prev.draggable ?? !1, next.draggable ?? !1) && deepEqual$1(prev.width ?? 0, next.width ?? 0) && deepEqual$1(prev.height ?? 0, next.height ?? 0) && deepEqual$1(prev.data.element, next.data.element), ElementNodeMemo = memo$1(function({
+}, isEqualProps = (prev, next) => prev.id === next.id && deepEqual$1(prev.selected ?? !1, next.selected ?? !1) && deepEqual$1(prev.dragging ?? !1, next.dragging ?? !1) && deepEqual$1(prev.width ?? 0, next.width ?? 0) && deepEqual$1(prev.height ?? 0, next.height ?? 0) && deepEqual$1(prev.data.element, next.data.element), ElementNodeMemo = memo$1(function({
   id: id2,
   data: {
     element
@@ -23693,7 +23691,7 @@ const Text = Text$1.withProps({
   width,
   height
 }) {
-  const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState((s2) => ({
+  const store = useDiagramStoreApi(), { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState((s2) => ({
     isHovered: s2.hoveredNodeId === id2,
     isDimmed: s2.dimmed.has(id2),
     isInteractive: s2.nodesDraggable || s2.nodesSelectable || !!s2.onNavigateTo,
@@ -23715,6 +23713,7 @@ const Text = Text$1.withProps({
       animate = "selected";
       break;
   }
+  const elementIcon2 = ElementIcon({ node: element, store });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Handle,
@@ -23778,11 +23777,11 @@ const Text = Text$1.withProps({
             {
               className: clsx(
                 elementDataContainer,
-                n$4(element.icon) && hasIcon,
+                n$4(elementIcon2) && hasIcon,
                 "likec4-element"
               ),
               children: [
-                n$4(element.icon) && /* @__PURE__ */ jsx(ElementIcon, { node: element }),
+                elementIcon2,
                 /* @__PURE__ */ jsxs("div", { className: clsx(elementTextData, "likec4-element-main-props"), children: [
                   /* @__PURE__ */ jsx(
                     Text,
@@ -23823,13 +23822,12 @@ const Text = Text$1.withProps({
       }
     )
   ] });
-}, isEqualProps), ElementIcon = ({ node }) => {
-  const RenderIcon = useDiagramState((s2) => s2.renderIcon);
+}, isEqualProps), ElementIcon = ({ node, store }) => {
   if (!node.icon)
     return null;
   if (node.icon.startsWith("http://") || node.icon.startsWith("https://"))
     return /* @__PURE__ */ jsx("div", { className: clsx(elementIcon, "likec4-element-icon"), children: /* @__PURE__ */ jsx("img", { src: node.icon, alt: node.title }) });
-  const icon = RenderIcon ? /* @__PURE__ */ jsx(RenderIcon, { node }) : null;
+  const RenderIcon = store.getState().renderIcon, icon = RenderIcon ? /* @__PURE__ */ jsx(RenderIcon, { node }) : null;
   return icon ? /* @__PURE__ */ jsx("div", { className: clsx(elementIcon, "likec4-element-icon"), children: icon }) : null;
 };
 function useXYFlowEvents() {
@@ -24693,6 +24691,7 @@ const XYFlowInner = memo$1(function({
     children2
   ] });
 }, shallowEqual);
+XYFlowInner.displayName = "XYFlowInner";
 function LikeC4Diagram({
   view,
   className,

package/dist/__app__/src/main.js

@@ -26958,13 +26958,11 @@ function DiagramContextProvider({
   ), useUpdateEffect(
     () => {
       if (!store.current) return;
-      const state = store.current.getState();
-      state.view !== view && state.updateView(view);
-      const newProps = i$2(props2, l$1);
-      o$2(state, newProps) || store.current.setState(newProps, !1, "update incoming props");
+      const state = store.current.getState(), newProps = i$2(props2, l$1);
+      o$2(state, newProps) || store.current.setState(newProps, !1, "update incoming props"), state.view !== view && state.updateView(view);
     },
     [view, props2],
-    shallowEqual
+    (prev, next) => shallowEqual(prev[0], next[0]) && shallowEqual(prev[1], next[1])
   ), /* @__PURE__ */ jsx(
     "div",
     {
@@ -30015,11 +30013,8 @@ const Text = Text$1.withProps({
   //   scale: 0.9
   // }
 }, isEqualProps = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? !1, next.selected ?? !1) && deepEqual(prev.dragging ?? !1, next.dragging ??
-!1) && deepEqual(prev.draggable ?? !1, next.draggable ?? !1) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ??
-0) && deepEqual(
-  prev.data.element,
-  next.data.element
-), ElementNodeMemo = memo$1(function({
+!1) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.data.element, next.data.element),
+ElementNodeMemo = memo$1(function({
   id: id2,
   data: {
     element
@@ -30030,7 +30025,7 @@ const Text = Text$1.withProps({
   width,
   height
 }) {
-  const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState((s2) => ({
+  const store = useDiagramStoreApi(), { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState((s2) => ({
     isHovered: s2.hoveredNodeId === id2,
     isDimmed: s2.dimmed.has(id2),
     isInteractive: s2.nodesDraggable || s2.nodesSelectable || !!s2.onNavigateTo,
@@ -30052,6 +30047,7 @@ const Text = Text$1.withProps({
       animate = "selected";
       break;
   }
+  const elementIcon2 = ElementIcon({ node: element, store });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Handle,
@@ -30115,11 +30111,11 @@ const Text = Text$1.withProps({
             {
               className: clsx(
                 elementDataContainer,
-                n$4(element.icon) && hasIcon,
+                n$4(elementIcon2) && hasIcon,
                 "likec4-element"
               ),
               children: [
-                n$4(element.icon) && /* @__PURE__ */ jsx(ElementIcon, { node: element }),
+                elementIcon2,
                 /* @__PURE__ */ jsxs("div", { className: clsx(elementTextData, "likec4-element-main-props"), children: [
                   /* @__PURE__ */ jsx(
                     Text,
@@ -30160,8 +30156,7 @@ const Text = Text$1.withProps({
       }
     )
   ] });
-}, isEqualProps), ElementIcon = ({ node }) => {
-  const RenderIcon2 = useDiagramState((s2) => s2.renderIcon);
+}, isEqualProps), ElementIcon = ({ node, store }) => {
   if (!node.icon)
     return null;
   if (node.icon.startsWith("http://") || node.icon.startsWith("https://"))
@@ -30169,7 +30164,7 @@ const Text = Text$1.withProps({
       src: node.icon,
       alt: node.title
     }) });
-  const icon = RenderIcon2 ? /* @__PURE__ */ jsx(RenderIcon2, { node }) : null;
+  const RenderIcon2 = store.getState().renderIcon, icon = RenderIcon2 ? /* @__PURE__ */ jsx(RenderIcon2, { node }) : null;
   return icon ? /* @__PURE__ */ jsx("div", { className: clsx(elementIcon, "likec4-element-icon"), children: icon }) : null;
 };
 function useXYFlowEvents() {
@@ -31042,6 +31037,7 @@ const XYFlowInner = memo$1(function({
     children2
   ] });
 }, shallowEqual);
+XYFlowInner.displayName = "XYFlowInner";
 function LikeC4Diagram({
   view,
   className,