@likec4/diagram 1.55.1 → 1.56.0

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js

@@ -1,139 +1,112 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { css } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { Badge, Button, Portal } from '@mantine/core';
-import { AnimatePresence } from 'motion/react';
-import * as m from 'motion/react-m';
-import { isTruthy } from 'remeda';
-import { useDiagramContext } from '../../hooks/useDiagram.js';
-import { TriggerWalkthroughButton } from './DynamicViewControls.js';
-import { useDiagram } from '../../hooks/safeContext.js';
-import IconPlayerStopFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js';
-import IconPlayerSkipBackFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js';
-import IconPlayerSkipForwardFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
-import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
-
-const PrevNextButton = Button.withProps({
-  // Button is polymorphic, but we dont want it to inherit the motion props
-  component: m.button,
-  layout: "position",
-  whileTap: {
-    scale: 0.95
-  },
-  variant: "light",
-  size: "xs",
-  fw: "500"
+import "../../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { useDiagramContext } from "../../hooks/useDiagram.js";
+import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
+import { TriggerWalkthroughButton } from "./DynamicViewControls.js";
+import { css } from "@likec4/styles/css";
+import { IconPlayerSkipBackFilled, IconPlayerSkipForwardFilled, IconPlayerStopFilled } from "@tabler/icons-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isTruthy } from "remeda";
+import { Badge, Button, Portal } from "@mantine/core";
+import { AnimatePresence } from "motion/react";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import * as m$1 from "motion/react-m";
+//#region src/navigationpanel/walkthrough/ActiveWalkthroughControls.tsx
+var PrevNextButton = Button.withProps({
+	component: m$1.button,
+	layout: "position",
+	whileTap: { scale: .95 },
+	variant: "light",
+	size: "xs",
+	fw: "500"
 });
-const ParallelFrame = () => {
-  const { portalProps } = useMantinePortalProps();
-  return /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
-    Box,
-    {
-      css: {
-        position: "absolute",
-        margin: "0",
-        padding: "0",
-        top: "0",
-        left: "0",
-        width: "100%",
-        height: "100%",
-        border: `2px solid`,
-        borderColor: "likec4.walkthrough.parallelFrame",
-        pointerEvents: "none",
-        md: {
-          borderWidth: "4"
-        }
-      }
-    }
-  ) });
+var ParallelFrame = () => {
+	const { portalProps } = useMantinePortalProps();
+	return /* @__PURE__ */ jsx(Portal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(Box$1, { css: {
+			position: "absolute",
+			margin: "0",
+			padding: "0",
+			top: "0",
+			left: "0",
+			width: "100%",
+			height: "100%",
+			border: `2px solid`,
+			borderColor: "likec4.walkthrough.parallelFrame",
+			pointerEvents: "none",
+			md: { borderWidth: "4" }
+		} })
+	});
 };
 function ActiveWalkthroughControls() {
-  const diagram = useDiagram();
-  const {
-    isParallel,
-    hasNext,
-    hasPrevious,
-    currentStep,
-    totalSteps
-  } = useDiagramContext((s) => {
-    const currentStepIndex = s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId);
-    return {
-      isParallel: isTruthy(s.activeWalkthrough?.parallelPrefix),
-      hasNext: currentStepIndex < s.xyedges.length - 1,
-      hasPrevious: currentStepIndex > 0,
-      currentStep: currentStepIndex + 1,
-      totalSteps: s.xyedges.length
-    };
-  });
-  return /* @__PURE__ */ jsxs(AnimatePresence, { propagate: true, mode: "popLayout", children: [
-    /* @__PURE__ */ jsx(
-      TriggerWalkthroughButton,
-      {
-        variant: "light",
-        size: "xs",
-        color: "orange",
-        mr: "sm",
-        onClick: (e) => {
-          e.stopPropagation();
-          diagram.stopWalkthrough();
-        },
-        rightSection: /* @__PURE__ */ jsx(IconPlayerStopFilled, { size: 10 }),
-        children: "Stop"
-      },
-      "stop-walkthrough"
-    ),
-    /* @__PURE__ */ jsx(
-      PrevNextButton,
-      {
-        disabled: !hasPrevious,
-        onClick: () => diagram.walkthroughStep("previous"),
-        leftSection: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, { size: 10 }),
-        children: "Previous"
-      },
-      "prev"
-    ),
-    /* @__PURE__ */ jsxs(
-      Badge,
-      {
-        component: m.div,
-        layout: "position",
-        size: "md",
-        radius: "sm",
-        variant: isParallel ? "gradient" : "transparent",
-        gradient: { from: "red", to: "orange", deg: 90 },
-        rightSection: /* @__PURE__ */ jsx(
-          m.div,
-          {
-            className: css({
-              fontSize: "xxs",
-              display: isParallel ? "block" : "none"
-            }),
-            children: "parallel"
-          }
-        ),
-        className: css({
-          alignItems: "baseline"
-        }),
-        children: [
-          currentStep,
-          " / ",
-          totalSteps
-        ]
-      },
-      "step-badge"
-    ),
-    /* @__PURE__ */ jsx(
-      PrevNextButton,
-      {
-        disabled: !hasNext,
-        onClick: () => diagram.walkthroughStep("next"),
-        rightSection: /* @__PURE__ */ jsx(IconPlayerSkipForwardFilled, { size: 10 }),
-        children: "Next"
-      },
-      "next"
-    ),
-    isParallel && /* @__PURE__ */ jsx(ParallelFrame, {}, "parallel-frame")
-  ] });
+	const diagram = useDiagram();
+	const { isParallel, hasNext, hasPrevious, currentStep, totalSteps } = useDiagramContext((s) => {
+		const currentStepIndex = s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId);
+		return {
+			isParallel: isTruthy(s.activeWalkthrough?.parallelPrefix),
+			hasNext: currentStepIndex < s.xyedges.length - 1,
+			hasPrevious: currentStepIndex > 0,
+			currentStep: currentStepIndex + 1,
+			totalSteps: s.xyedges.length
+		};
+	});
+	return /* @__PURE__ */ jsxs(AnimatePresence, {
+		propagate: true,
+		mode: "popLayout",
+		children: [
+			/* @__PURE__ */ jsx(TriggerWalkthroughButton, {
+				variant: "light",
+				size: "xs",
+				color: "orange",
+				mr: "sm",
+				onClick: (e) => {
+					e.stopPropagation();
+					diagram.stopWalkthrough();
+				},
+				rightSection: /* @__PURE__ */ jsx(IconPlayerStopFilled, { size: 10 }),
+				children: "Stop"
+			}, "stop-walkthrough"),
+			/* @__PURE__ */ jsx(PrevNextButton, {
+				disabled: !hasPrevious,
+				onClick: () => diagram.walkthroughStep("previous"),
+				leftSection: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, { size: 10 }),
+				children: "Previous"
+			}, "prev"),
+			/* @__PURE__ */ jsxs(Badge, {
+				component: m$1.div,
+				layout: "position",
+				size: "md",
+				radius: "sm",
+				variant: isParallel ? "gradient" : "transparent",
+				gradient: {
+					from: "red",
+					to: "orange",
+					deg: 90
+				},
+				rightSection: /* @__PURE__ */ jsx(m$1.div, {
+					className: css({
+						fontSize: "xxs",
+						display: isParallel ? "block" : "none"
+					}),
+					children: "parallel"
+				}),
+				className: css({ alignItems: "baseline" }),
+				children: [
+					currentStep,
+					" / ",
+					totalSteps
+				]
+			}, "step-badge"),
+			/* @__PURE__ */ jsx(PrevNextButton, {
+				disabled: !hasNext,
+				onClick: () => diagram.walkthroughStep("next"),
+				rightSection: /* @__PURE__ */ jsx(IconPlayerSkipForwardFilled, { size: 10 }),
+				children: "Next"
+			}, "next"),
+			isParallel && /* @__PURE__ */ jsx(ParallelFrame, {}, "parallel-frame")
+		]
+	});
 }
-
+//#endregion
 export { ActiveWalkthroughControls };

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

@@ -2,6 +2,9 @@ import { ButtonProps } from '@mantine/core';
 import { ForwardRefExoticComponent, Key, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, ChangeEventHandler, InputEventHandler, ReactEventHandler, SubmitEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, ToggleEventHandler, TransitionEventHandler, Ref, RefAttributes } from 'react';
 import { MotionProps } from 'motion/react';
 export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<ButtonProps & {
+    color?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
     id?: string | undefined;
     type?: "button" | "reset" | "submit" | undefined;
     form?: string | undefined;
@@ -9,7 +12,6 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     draggable?: (boolean | "true" | "false") | undefined;
     className?: string | undefined;
     title?: string | undefined;
-    color?: string | undefined;
     key?: Key | null | undefined;
     dir?: string | undefined;
     property?: string | undefined;
@@ -37,17 +39,17 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "step" | "time" | "page" | "location" | "date" | "true" | "false" | undefined;
+    "aria-current"?: boolean | "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | "true" | "false" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "true" | "dialog" | "listbox" | "menu" | "tree" | "false" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -72,7 +74,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     "aria-rowspan"?: number | undefined;
     "aria-selected"?: (boolean | "true" | "false") | undefined;
     "aria-setsize"?: number | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-sort"?: "ascending" | "descending" | "none" | "other" | undefined;
     "aria-valuemax"?: number | undefined;
     "aria-valuemin"?: number | undefined;
     "aria-valuenow"?: number | undefined;
@@ -245,16 +247,14 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     defaultChecked?: boolean | undefined;
     suppressContentEditableWarning?: boolean | undefined;
     accessKey?: string | undefined;
-    autoCapitalize?: "none" | (string & {}) | "on" | "off" | "sentences" | "words" | "characters" | undefined;
+    autoCapitalize?: (string & {}) | "none" | "on" | "off" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
     contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     enterKeyHint?: "search" | "next" | "previous" | "done" | "send" | "enter" | "go" | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;

package/dist/navigationpanel/walkthrough/DynamicViewControls.js

@@ -1,126 +1,111 @@
-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 { useEnabledFeatures } from '../../context/DiagramFeatures.js';
-import { useDiagramContext } from '../../hooks/useDiagram.js';
-import { Tooltip } from '../_common.js';
-import { useNavigationActor } from '../hooks.js';
-import { useDiagram } from '../../hooks/safeContext.js';
-import IconPlayerPlayFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
-
-const TriggerWalkthroughButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(
-  Button,
-  {
-    variant: "filled",
-    size: "xs",
-    fw: "500",
-    ...props,
-    ref,
-    component: m.button,
-    whileTap: {
-      scale: 0.95
-    },
-    layout: "position",
-    layoutId: "trigger-dynamic-walkthrough",
-    className: css({
-      flexShrink: 0
-    })
-  }
-));
+import "../../_virtual/_rolldown/runtime.js";
+import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { useDiagramContext } from "../../hooks/useDiagram.js";
+import { Tooltip as Tooltip$1 } from "../_common.js";
+import { useNavigationActor } from "../hooks.js";
+import { css } from "@likec4/styles/css";
+import { IconPlayerPlayFilled } from "@tabler/icons-react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { invariant } from "@likec4/core";
+import { Button, SegmentedControl } from "@mantine/core";
+import { AnimatePresence } from "motion/react";
+import * as m$1 from "motion/react-m";
+//#region src/navigationpanel/walkthrough/DynamicViewControls.tsx
+var TriggerWalkthroughButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(Button, {
+	variant: "filled",
+	size: "xs",
+	fw: "500",
+	...props,
+	ref,
+	component: m$1.button,
+	whileTap: { scale: .95 },
+	layout: "position",
+	layoutId: "trigger-dynamic-walkthrough",
+	className: css({ flexShrink: 0 })
+}));
 function StartWalkthroughButton() {
-  const { enableCompareWithLatest } = useEnabledFeatures();
-  const diagram = useDiagram();
-  const actor = useNavigationActor();
-  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) => {
-        e.stopPropagation();
-        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: enableCompareWithLatest,
-      classNames: {
-        label: css({
-          display: {
-            base: "none",
-            "@/md": "inherit"
-          }
-        }),
-        section: css({
-          marginInlineStart: {
-            base: "0",
-            "@/md": "2"
-          }
-        })
-      },
-      rightSection: /* @__PURE__ */ jsx(IconPlayerPlayFilled, { size: 10 }),
-      children: "Start"
-    }
-  ) });
+	const { enableCompareWithLatest } = useEnabledFeatures();
+	const diagram = useDiagram();
+	const actor = useNavigationActor();
+	let tooltipLabel = "Start Dynamic View Walkthrough";
+	switch (true) {
+		case enableCompareWithLatest:
+			tooltipLabel = "Walkthrough not available when Compare is active";
+			break;
+	}
+	return /* @__PURE__ */ jsx(Tooltip$1, {
+		label: tooltipLabel,
+		children: /* @__PURE__ */ jsx(TriggerWalkthroughButton, {
+			onClick: (e) => {
+				e.stopPropagation();
+				actor.closeDropdown();
+				diagram.startWalkthrough();
+			},
+			initial: {
+				opacity: 0,
+				scale: .6,
+				translateX: -10
+			},
+			animate: {
+				opacity: 1,
+				scale: 1,
+				translateX: 0
+			},
+			exit: {
+				opacity: 0,
+				translateX: -20
+			},
+			size: "compact-xs",
+			h: 26,
+			disabled: enableCompareWithLatest,
+			classNames: {
+				label: css({ display: {
+					base: "none",
+					"@/md": "inherit"
+				} }),
+				section: css({ marginInlineStart: {
+					base: "0",
+					"@/md": "2"
+				} })
+			},
+			rightSection: /* @__PURE__ */ jsx(IconPlayerPlayFilled, { size: 10 }),
+			children: "Start"
+		})
+	});
 }
-const DynamicViewModeSwitcher = forwardRef(({ value, onChange }, ref) => {
-  return /* @__PURE__ */ jsx(m.div, { ref, layout: "position", children: /* @__PURE__ */ jsx(
-    SegmentedControl,
-    {
-      size: "xs",
-      value,
-      component: m.div,
-      onChange: (variant) => {
-        invariant(variant === "diagram" || variant === "sequence", "Invalid dynamic view variant");
-        onChange(variant);
-      },
-      classNames: {
-        label: css({
-          fontSize: "xxs"
-        })
-      },
-      data: [
-        {
-          value: "diagram",
-          label: "Diagram"
-        },
-        {
-          value: "sequence",
-          label: "Sequence"
-        }
-      ]
-    }
-  ) });
+var DynamicViewModeSwitcher = forwardRef(({ value, onChange }, ref) => {
+	return /* @__PURE__ */ jsx(m$1.div, {
+		ref,
+		layout: "position",
+		children: /* @__PURE__ */ jsx(SegmentedControl, {
+			size: "xs",
+			value,
+			onChange: (variant) => {
+				invariant(variant === "diagram" || variant === "sequence", "Invalid dynamic view variant");
+				onChange(variant);
+			},
+			classNames: { label: css({ fontSize: "xxs" }) },
+			data: [{
+				value: "diagram",
+				label: "Diagram"
+			}, {
+				value: "sequence",
+				label: "Sequence"
+			}]
+		})
+	});
 });
 function DynamicViewControls() {
-  const dynamicViewVariant = useDiagramContext((c) => c.dynamicViewVariant);
-  const diagram = useDiagram();
-  return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    /* @__PURE__ */ jsx(
-      DynamicViewModeSwitcher,
-      {
-        value: dynamicViewVariant,
-        onChange: (mode) => {
-          diagram.switchDynamicViewVariant(mode);
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(StartWalkthroughButton, {}, "trigger-dynamic-walkthrough")
-  ] });
+	const dynamicViewVariant = useDiagramContext((c) => c.dynamicViewVariant);
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsxs(AnimatePresence, { children: [/* @__PURE__ */ jsx(DynamicViewModeSwitcher, {
+		value: dynamicViewVariant,
+		onChange: (mode) => {
+			diagram.switchDynamicViewVariant(mode);
+		}
+	}), /* @__PURE__ */ jsx(StartWalkthroughButton, {}, "trigger-dynamic-walkthrough")] });
 }
-
+//#endregion
 export { DynamicViewControls, TriggerWalkthroughButton };