@likec4/diagram 1.55.1 → 1.57.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,81 +2,25 @@ 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;
+    type?: "button" | "submit" | "reset" | undefined;
     id?: string | undefined;
-    type?: "button" | "reset" | "submit" | undefined;
     form?: string | undefined;
     hidden?: boolean | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     className?: string | undefined;
     title?: string | undefined;
-    color?: string | undefined;
     key?: Key | null | undefined;
     dir?: string | undefined;
     property?: string | undefined;
     role?: AriaRole | undefined;
     "aria-label"?: string | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;
-    suppressHydrationWarning?: boolean | undefined;
-    lang?: string | undefined;
-    name?: string | undefined;
-    nonce?: string | undefined;
-    part?: string | undefined;
-    slot?: string | undefined;
-    tabIndex?: number | undefined;
-    "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
-    "aria-braillelabel"?: string | undefined;
-    "aria-brailleroledescription"?: string | undefined;
-    "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colindextext"?: string | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "step" | "time" | "page" | "location" | "date" | "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-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-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-labelledby"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined;
-    "aria-modal"?: (boolean | "true" | "false") | undefined;
-    "aria-multiline"?: (boolean | "true" | "false") | undefined;
-    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
-    "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowindextext"?: string | undefined;
-    "aria-rowspan"?: number | undefined;
-    "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
     onCopy?: ClipboardEventHandler<HTMLButtonElement> | undefined;
     onCopyCapture?: ClipboardEventHandler<HTMLButtonElement> | undefined;
     onCut?: ClipboardEventHandler<HTMLButtonElement> | undefined;
@@ -241,20 +185,22 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     onTransitionRunCapture?: TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStart?: TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStartCapture?: TransitionEventHandler<HTMLButtonElement> | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     defaultChecked?: boolean | undefined;
     suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: 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;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    translate?: "yes" | "no" | undefined;
+    tabIndex?: number | undefined;
     radioGroup?: string | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -280,6 +226,60 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | 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" | "move" | "copy" | "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 | "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;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "ascending" | "descending" | "none" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    name?: string | undefined;
     value?: string | number | readonly string[] | undefined;
     ref?: Ref<HTMLButtonElement> | undefined;
     disabled?: boolean | undefined;