@likec4/diagram 1.42.1 → 1.44.0

package/dist/navigationpanel/walkthrough/DynamicViewControls.d.ts

@@ -1,18 +1,19 @@
 import { ButtonProps } from '@mantine/core';
-import { ForwardRefExoticComponent, ReactEventHandler, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, FormEventHandler, InputEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, ToggleEventHandler, TransitionEventHandler, Key, Ref, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, ReactEventHandler, FormEventHandler, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, InputEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, ToggleEventHandler, TransitionEventHandler, Key, Ref, RefAttributes } from 'react';
 import { MotionProps } from 'motion/react';
 export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<ButtonProps & {
-    id?: string | undefined;
     type?: "button" | "submit" | "reset" | undefined;
+    id?: string | undefined;
+    onError?: ReactEventHandler<HTMLButtonElement> | undefined;
+    value?: string | number | readonly string[] | undefined;
     form?: string | undefined;
     hidden?: boolean | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     className?: string | undefined;
-    onError?: ReactEventHandler<HTMLButtonElement> | undefined;
-    value?: string | number | readonly string[] | undefined;
-    name?: string | undefined;
     title?: string | undefined;
     color?: string | undefined;
+    dir?: string | undefined;
+    onChange?: FormEventHandler<HTMLButtonElement> | undefined;
     role?: AriaRole | undefined;
     "aria-label"?: string | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -35,7 +36,6 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     onFocusCapture?: FocusEventHandler<HTMLButtonElement> | undefined;
     onBlur?: FocusEventHandler<HTMLButtonElement> | undefined;
     onBlurCapture?: FocusEventHandler<HTMLButtonElement> | undefined;
-    onChange?: FormEventHandler<HTMLButtonElement> | undefined;
     onChangeCapture?: FormEventHandler<HTMLButtonElement> | undefined;
     onBeforeInput?: InputEventHandler<HTMLButtonElement> | undefined;
     onBeforeInputCapture?: FormEventHandler<HTMLButtonElement> | undefined;
@@ -186,12 +186,11 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
-    autoCapitalize?: "none" | (string & {}) | "on" | "off" | "sentences" | "words" | "characters" | undefined;
+    autoCapitalize?: "on" | "none" | (string & {}) | "off" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
     contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
-    dir?: string | undefined;
-    enterKeyHint?: "next" | "search" | "done" | "send" | "previous" | "enter" | "go" | undefined;
+    enterKeyHint?: "search" | "done" | "send" | "next" | "previous" | "enter" | "go" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     slot?: string | undefined;
@@ -224,7 +223,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
     popoverTarget?: string | undefined;
     inert?: boolean | undefined;
-    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -280,6 +279,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     "aria-valuemin"?: number | undefined;
     "aria-valuenow"?: number | undefined;
     "aria-valuetext"?: string | undefined;
+    name?: string | undefined;
     key?: Key | null | undefined;
     ref?: Ref<HTMLButtonElement> | undefined;
     disabled?: boolean | undefined;

package/dist/navigationpanel/walkthrough/DynamicViewControls.js

@@ -1,13 +1,16 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { invariant } from '@likec4/core';
 import { css } from '@likec4/styles/css';
 import { Button, SegmentedControl } from '@mantine/core';
+import { AnimatePresence } from 'motion/react';
 import * as m from 'motion/react-m';
 import { forwardRef } from 'react';
-import { useDiagramContext, useDiagram } from '../../hooks/useDiagram.js';
+import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
+import { useDiagramContext } from '../../hooks/useDiagram.js';
 import { Tooltip } from '../_common.js';
 import { useNavigationActor } from '../hooks.js';
-import IconPlayerPlayFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
+import { useDiagram } from '../../hooks/safeContext.js';
+import IconPlayerPlayFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
 
 const TriggerWalkthroughButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Button,
@@ -18,6 +21,10 @@ const TriggerWalkthroughButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(
     ...props,
     ref,
     component: m.button,
+    whileTap: {
+      scale: 0.95
+    },
+    layout: "position",
     layoutId: "trigger-dynamic-walkthrough",
     className: css({
       flexShrink: 0
@@ -25,9 +32,19 @@ const TriggerWalkthroughButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(
   }
 ));
 function StartWalkthroughButton() {
+  const { enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
   const diagram = useDiagram();
   const actor = useNavigationActor();
-  return /* @__PURE__ */ jsx(Tooltip, { label: "Start Dynamic View Walkthrough", children: /* @__PURE__ */ jsx(
+  let tooltipLabel = "Start Dynamic View Walkthrough";
+  switch (true) {
+    case !enableReadOnly:
+      tooltipLabel = "Walkthrough not available in Edit mode";
+      break;
+    case enableCompareWithLatest:
+      tooltipLabel = "Walkthrough not available when Compare is active";
+      break;
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { label: tooltipLabel, children: /* @__PURE__ */ jsx(
     TriggerWalkthroughButton,
     {
       onClick: (e) => {
@@ -35,13 +52,17 @@ function StartWalkthroughButton() {
         actor.closeDropdown();
         diagram.startWalkthrough();
       },
+      initial: { opacity: 0, scale: 0.6, translateX: -10 },
+      animate: { opacity: 1, scale: 1, translateX: 0 },
+      exit: { opacity: 0, translateX: -20 },
       size: "compact-xs",
       h: 26,
+      disabled: !enableReadOnly || enableCompareWithLatest,
       classNames: {
         label: css({
           display: {
             base: "none",
-            "@/md": "[inherit]"
+            "@/md": "inherit"
           }
         }),
         section: css({
@@ -56,11 +77,8 @@ function StartWalkthroughButton() {
     }
   ) });
 }
-function DynamicViewModeSwitcher({
-  value,
-  onChange
-}) {
-  return /* @__PURE__ */ jsx(m.div, { layout: "position", children: /* @__PURE__ */ jsx(
+const DynamicViewModeSwitcher = forwardRef(({ value, onChange }, ref) => {
+  return /* @__PURE__ */ jsx(m.div, { ref, layout: "position", children: /* @__PURE__ */ jsx(
     SegmentedControl,
     {
       size: "xs",
@@ -87,11 +105,11 @@ function DynamicViewModeSwitcher({
       ]
     }
   ) });
-}
+});
 function DynamicViewControls() {
   const dynamicViewVariant = useDiagramContext((c) => c.dynamicViewVariant);
   const diagram = useDiagram();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
     /* @__PURE__ */ jsx(
       DynamicViewModeSwitcher,
       {
@@ -99,8 +117,7 @@ function DynamicViewControls() {
         onChange: (mode) => {
           diagram.switchDynamicViewVariant(mode);
         }
-      },
-      "dynamic-view-mode-switcher"
+      }
     ),
     /* @__PURE__ */ jsx(StartWalkthroughButton, {}, "trigger-dynamic-walkthrough")
   ] });

package/dist/navigationpanel/walkthrough/WalkthroughPanel.d.ts

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

package/dist/navigationpanel/walkthrough/WalkthroughPanel.js

@@ -1,9 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { RichText } from '@likec4/core';
-import { cx, css } from '@likec4/styles/css';
+import { css } from '@likec4/styles/css';
 import { styled } from '@likec4/styles/jsx';
 import { vstack } from '@likec4/styles/patterns';
 import { ScrollAreaAutosize } from '@mantine/core';
+import { AnimatePresence, m } from 'motion/react';
+import { memo } from 'react';
 import { isNonNull, isTruthy } from 'remeda';
 import { useDiagramContext } from '../../hooks/useDiagram.js';
 import { Markdown } from '../../base-primitives/Markdown.js';
@@ -28,56 +30,71 @@ function selectWalkthroughNotes(s) {
     notes: isActive ? s.xyedges[activeStepIndex]?.data?.notes ?? RichText.EMPTY : null
   };
 }
-const WalkthroughPanel = () => {
-  const { notes } = useDiagramContext(selectWalkthroughNotes);
-  if (!notes || notes.isEmpty) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(styled.div, { position: "relative", children: /* @__PURE__ */ jsxs(
-    ScrollAreaAutosize,
+const WalkthroughPanel = memo(() => {
+  const { isActive, notes } = useDiagramContext(selectWalkthroughNotes);
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isActive && notes && !notes.isEmpty && /* @__PURE__ */ jsx(
+    m.div,
     {
-      className: cx(
-        "nowheel nopan nodrag",
-        vstack({
-          position: "absolute",
-          layerStyle: "likec4.dropdown",
-          gap: "sm",
-          padding: "md",
-          paddingTop: "xxs",
-          pointerEvents: "all",
-          maxWidth: "calc(100cqw - 32px)",
-          minWidth: "calc(100cqw - 50px)",
-          maxHeight: "calc(100cqh - 100px)",
-          width: "max-content",
-          cursor: "default",
-          overflow: "auto",
-          overscrollBehavior: "contain",
-          "@/sm": {
-            minWidth: 400,
-            maxWidth: 550
-          },
-          "@/lg": {
-            maxWidth: 700
-          }
-        })
-      ),
-      type: "scroll",
-      children: [
-        /* @__PURE__ */ jsx(SectionHeader, { children: "Notes" }),
-        /* @__PURE__ */ jsx(
-          Markdown,
-          {
-            value: notes,
-            fontSize: "sm",
-            emptyText: "No description",
-            className: css({
-              userSelect: "all"
-            })
-          }
-        )
-      ]
+      layout: "position",
+      className: css({
+        position: "relative"
+      }),
+      initial: {
+        opacity: 0,
+        translateX: -20
+      },
+      animate: {
+        opacity: 1,
+        translateX: 0
+      },
+      exit: {
+        opacity: 0,
+        translateX: -20
+      },
+      children: /* @__PURE__ */ jsxs(
+        ScrollAreaAutosize,
+        {
+          className: vstack({
+            position: "absolute",
+            layerStyle: "likec4.dropdown",
+            gap: "sm",
+            padding: "md",
+            paddingTop: "xxs",
+            pointerEvents: "all",
+            maxWidth: "calc(100cqw - 32px)",
+            minWidth: "calc(100cqw - 50px)",
+            maxHeight: "calc(100cqh - 100px)",
+            width: "max-content",
+            cursor: "default",
+            overflow: "auto",
+            overscrollBehavior: "contain",
+            "@/sm": {
+              minWidth: 400,
+              maxWidth: 550
+            },
+            "@/lg": {
+              maxWidth: 700
+            }
+          }),
+          type: "scroll",
+          children: [
+            /* @__PURE__ */ jsx(SectionHeader, { children: "Notes" }),
+            /* @__PURE__ */ jsx(
+              Markdown,
+              {
+                value: notes,
+                fontSize: "sm",
+                emptyText: "No description",
+                className: css({
+                  userSelect: "all"
+                })
+              }
+            )
+          ]
+        }
+      )
     }
   ) });
-};
+});
 
 export { WalkthroughPanel };

package/dist/node_modules/.pnpm/xstate@5.24.0_patch_hash_3a1bd6d012ec67bf6e38a00c3226d1be77089442f83aeb6e424b00ca2a11d21c/node_modules/xstate/actions/dist/xstate-actions.cjs.js

@@ -0,0 +1,37 @@
+import { __exports as xstateActions_cjs } from '../../../../../../../_virtual/xstate-actions.cjs2.js';
+import { __require as requireAssignDea9f7c8_cjs } from '../../dist/assign-dea9f7c8.cjs.js';
+import { __require as requireRaiseDa5b247f_cjs } from '../../dist/raise-da5b247f.cjs.js';
+import { __require as requireLogEc8d4df4_cjs } from '../../dist/log-ec8d4df4.cjs.js';
+import { __require as requireXstateDev_cjs } from '../../dev/dist/xstate-dev.cjs.js';
+
+var hasRequiredXstateActions_cjs;
+
+function requireXstateActions_cjs () {
+	if (hasRequiredXstateActions_cjs) return xstateActions_cjs;
+	hasRequiredXstateActions_cjs = 1;
+
+	Object.defineProperty(xstateActions_cjs, '__esModule', { value: true });
+
+	var assign = /*@__PURE__*/ requireAssignDea9f7c8_cjs();
+	var guards_dist_xstateGuards = /*@__PURE__*/ requireRaiseDa5b247f_cjs();
+	var log = /*@__PURE__*/ requireLogEc8d4df4_cjs();
+	requireXstateDev_cjs();
+
+
+
+	xstateActions_cjs.assign = assign.assign;
+	xstateActions_cjs.cancel = guards_dist_xstateGuards.cancel;
+	xstateActions_cjs.raise = guards_dist_xstateGuards.raise;
+	xstateActions_cjs.spawnChild = guards_dist_xstateGuards.spawnChild;
+	xstateActions_cjs.stop = guards_dist_xstateGuards.stop;
+	xstateActions_cjs.stopChild = guards_dist_xstateGuards.stopChild;
+	xstateActions_cjs.emit = log.emit;
+	xstateActions_cjs.enqueueActions = log.enqueueActions;
+	xstateActions_cjs.forwardTo = log.forwardTo;
+	xstateActions_cjs.log = log.log;
+	xstateActions_cjs.sendParent = log.sendParent;
+	xstateActions_cjs.sendTo = log.sendTo;
+	return xstateActions_cjs;
+}
+
+export { requireXstateActions_cjs as __require };

package/dist/node_modules/.pnpm/xstate@5.24.0_patch_hash_3a1bd6d012ec67bf6e38a00c3226d1be77089442f83aeb6e424b00ca2a11d21c/node_modules/xstate/dev/dist/xstate-dev.cjs.js

@@ -0,0 +1,59 @@
+import { commonjsGlobal } from '../../../../../../../_virtual/_commonjsHelpers.js';
+import { __exports as xstateDev_cjs } from '../../../../../../../_virtual/xstate-dev.cjs.js';
+
+var hasRequiredXstateDev_cjs;
+
+function requireXstateDev_cjs () {
+	if (hasRequiredXstateDev_cjs) return xstateDev_cjs;
+	hasRequiredXstateDev_cjs = 1;
+
+	Object.defineProperty(xstateDev_cjs, '__esModule', { value: true });
+
+	// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis
+	function getGlobal() {
+	  if (typeof globalThis !== 'undefined') {
+	    return globalThis;
+	  }
+	  if (typeof self !== 'undefined') {
+	    return self;
+	  }
+	  if (typeof window !== 'undefined') {
+	    return window;
+	  }
+	  if (typeof commonjsGlobal !== 'undefined') {
+	    return commonjsGlobal;
+	  }
+	}
+	function getDevTools() {
+	  const w = getGlobal();
+	  if (w.__xstate__) {
+	    return w.__xstate__;
+	  }
+	  return undefined;
+	}
+	function registerService(service) {
+	  if (typeof window === 'undefined') {
+	    return;
+	  }
+	  const devTools = getDevTools();
+	  if (devTools) {
+	    devTools.register(service);
+	  }
+	}
+	const devToolsAdapter = service => {
+	  if (typeof window === 'undefined') {
+	    return;
+	  }
+	  const devTools = getDevTools();
+	  if (devTools) {
+	    devTools.register(service);
+	  }
+	};
+
+	xstateDev_cjs.devToolsAdapter = devToolsAdapter;
+	xstateDev_cjs.getGlobal = getGlobal;
+	xstateDev_cjs.registerService = registerService;
+	return xstateDev_cjs;
+}
+
+export { requireXstateDev_cjs as __require };

package/dist/node_modules/.pnpm/xstate@5.24.0_patch_hash_3a1bd6d012ec67bf6e38a00c3226d1be77089442f83aeb6e424b00ca2a11d21c/node_modules/xstate/dist/assign-dea9f7c8.cjs.js

@@ -0,0 +1,140 @@
+import { __exports as assignDea9f7c8_cjs } from '../../../../../../_virtual/assign-dea9f7c8.cjs.js';
+import { __require as requireRaiseDa5b247f_cjs } from './raise-da5b247f.cjs.js';
+
+var hasRequiredAssignDea9f7c8_cjs;
+
+function requireAssignDea9f7c8_cjs () {
+	if (hasRequiredAssignDea9f7c8_cjs) return assignDea9f7c8_cjs;
+	hasRequiredAssignDea9f7c8_cjs = 1;
+
+	var guards_dist_xstateGuards = /*@__PURE__*/ requireRaiseDa5b247f_cjs();
+
+	function createSpawner(actorScope, {
+	  machine,
+	  context
+	}, event, spawnedChildren) {
+	  const spawn = (src, options) => {
+	    if (typeof src === 'string') {
+	      const logic = guards_dist_xstateGuards.resolveReferencedActor(machine, src);
+	      if (!logic) {
+	        throw new Error(`Actor logic '${src}' not implemented in machine '${machine.id}'`);
+	      }
+	      const actorRef = guards_dist_xstateGuards.createActor(logic, {
+	        id: options?.id,
+	        parent: actorScope.self,
+	        syncSnapshot: options?.syncSnapshot,
+	        input: typeof options?.input === 'function' ? options.input({
+	          context,
+	          event,
+	          self: actorScope.self
+	        }) : options?.input,
+	        src,
+	        systemId: options?.systemId
+	      });
+	      spawnedChildren[actorRef.id] = actorRef;
+	      return actorRef;
+	    } else {
+	      const actorRef = guards_dist_xstateGuards.createActor(src, {
+	        id: options?.id,
+	        parent: actorScope.self,
+	        syncSnapshot: options?.syncSnapshot,
+	        input: options?.input,
+	        src,
+	        systemId: options?.systemId
+	      });
+	      return actorRef;
+	    }
+	  };
+	  return (src, options) => {
+	    const actorRef = spawn(src, options); // TODO: fix types
+	    spawnedChildren[actorRef.id] = actorRef;
+	    actorScope.defer(() => {
+	      if (actorRef._processingStatus === guards_dist_xstateGuards.ProcessingStatus.Stopped) {
+	        return;
+	      }
+	      actorRef.start();
+	    });
+	    return actorRef;
+	  };
+	}
+
+	function resolveAssign(actorScope, snapshot, actionArgs, actionParams, {
+	  assignment
+	}) {
+	  if (!snapshot.context) {
+	    throw new Error('Cannot assign to undefined `context`. Ensure that `context` is defined in the machine config.');
+	  }
+	  const spawnedChildren = {};
+	  const assignArgs = {
+	    context: snapshot.context,
+	    event: actionArgs.event,
+	    spawn: createSpawner(actorScope, snapshot, actionArgs.event, spawnedChildren),
+	    self: actorScope.self,
+	    system: actorScope.system
+	  };
+	  let partialUpdate = {};
+	  if (typeof assignment === 'function') {
+	    partialUpdate = assignment(assignArgs, actionParams);
+	  } else {
+	    for (const key of Object.keys(assignment)) {
+	      const propAssignment = assignment[key];
+	      partialUpdate[key] = typeof propAssignment === 'function' ? propAssignment(assignArgs, actionParams) : propAssignment;
+	    }
+	  }
+	  const updatedContext = Object.assign({}, snapshot.context, partialUpdate);
+	  return [guards_dist_xstateGuards.cloneMachineSnapshot(snapshot, {
+	    context: updatedContext,
+	    children: Object.keys(spawnedChildren).length ? {
+	      ...snapshot.children,
+	      ...spawnedChildren
+	    } : snapshot.children
+	  }), undefined, undefined];
+	}
+	/**
+	 * Updates the current context of the machine.
+	 *
+	 * @example
+	 *
+	 * ```ts
+	 * import { createMachine, assign } from 'xstate';
+	 *
+	 * const countMachine = createMachine({
+	 *   context: {
+	 *     count: 0,
+	 *     message: ''
+	 *   },
+	 *   on: {
+	 *     inc: {
+	 *       actions: assign({
+	 *         count: ({ context }) => context.count + 1
+	 *       })
+	 *     },
+	 *     updateMessage: {
+	 *       actions: assign(({ context, event }) => {
+	 *         return {
+	 *           message: event.message.trim()
+	 *         };
+	 *       })
+	 *     }
+	 *   }
+	 * });
+	 * ```
+	 *
+	 * @param assignment An object that represents the partial context to update, or
+	 *   a function that returns an object that represents the partial context to
+	 *   update.
+	 */
+	function assign(assignment) {
+	  function assign(_args, _params) {
+	  }
+	  assign.type = 'xstate.assign';
+	  assign.assignment = assignment;
+	  assign.resolve = resolveAssign;
+	  return assign;
+	}
+
+	assignDea9f7c8_cjs.assign = assign;
+	return assignDea9f7c8_cjs;
+}
+
+export { requireAssignDea9f7c8_cjs as __require };