@likec4/diagram 1.59.4 → 1.60.0

package/dist/navigationpanel/editorpanel/ToggleReadonly.js

@@ -1,22 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { PanelActionIcon } from "../_common.js";
-import { Tooltip } from "./_common.js";
-import { IconLockOpen2 } from "@tabler/icons-react";
-import { jsx } from "react/jsx-runtime";
-//#region src/navigationpanel/editorpanel/ToggleReadonly.tsx
-var ToggleReadonly = () => {
-	const diagram = useDiagram();
-	return /* @__PURE__ */ jsx(Tooltip, {
-		label: "Switch to Read-only",
-		children: /* @__PURE__ */ jsx(PanelActionIcon, {
-			onClick: () => diagram.toggleFeature("ReadOnly"),
-			children: /* @__PURE__ */ jsx(IconLockOpen2, {
-				size: 14,
-				stroke: 2
-			})
-		})
-	});
-};
-//#endregion
-export { ToggleReadonly };

package/dist/navigationpanel/editorpanel/_common.d.ts

@@ -1,3 +0,0 @@
-import { NamedExoticComponent, RefAttributes } from 'react';
-import { TooltipProps, PlaceholderPolymorphicProps } from '@mantine/core';
-export declare const Tooltip: NamedExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & PlaceholderPolymorphicProps>;

package/dist/navigationpanel/editorpanel/_common.js

@@ -1,14 +0,0 @@
-import { Tooltip } from "@mantine/core";
-//#region src/navigationpanel/editorpanel/_common.tsx
-var Tooltip$1 = Tooltip.withProps({
-	color: "dark",
-	fz: "xs",
-	openDelay: 600,
-	closeDelay: 120,
-	label: "",
-	children: null,
-	offset: 8,
-	position: "right"
-});
-//#endregion
-export { Tooltip$1 as Tooltip };

package/dist/navigationpanel/editorpanel/index.d.ts

@@ -1 +0,0 @@
-export { EditorPanel } from './EditorPanel';

package/dist/navigationpanel/editorpanel/styles.d.ts

@@ -1,8 +0,0 @@
-export declare const navigationButtons: string;
-export declare const panel: string;
-export declare const actionIconGroup: string;
-export declare const autolayoutIcon: string;
-export declare const autolayoutButton: string;
-export declare const autolayoutIndicator: string;
-export declare const spacingSliderBody: string;
-export declare const spacingSliderThumb: string;

package/dist/navigationpanel/editorpanel/styles.js

@@ -1,55 +0,0 @@
-import { css } from "@likec4/styles/css";
-css({
-	gap: "xxs",
-	_empty: { display: "none" }
-});
-css({
-	top: "md",
-	left: "md",
-	margin: "0",
-	pointerEvents: "none",
-	"& :where(button, .action-icon, [role='dialog'])": { pointerEvents: "all" },
-	["& .action-icon"]: { ["--ai-size"]: "2rem" },
-	["& .tabler-icon"]: { boxSize: "[65%]" },
-	_reduceGraphics: { "& .action-icon": { "--ai-radius": "0px" } }
-});
-css({ shadow: {
-	base: "md",
-	_whenPanning: "none"
-} });
-css({ ["& .tabler-icon"]: { boxSize: "[65%]" } });
-var autolayoutButton = css({
-	flex: "[1 1 40%]",
-	textAlign: "center",
-	fontWeight: "medium",
-	padding: "[4px 6px]",
-	fontSize: "[11px]",
-	zIndex: "base"
-});
-var autolayoutIndicator = css({
-	background: "mantine.gray[2]",
-	borderRadius: "sm",
-	border: `default`,
-	borderColor: "mantine.gray[4]",
-	_dark: {
-		background: "mantine.dark[5]",
-		borderColor: "mantine.dark[4]"
-	}
-});
-var spacingSliderBody = css({
-	position: "relative",
-	borderRadius: "sm",
-	background: "mantine.gray[3]",
-	boxShadow: "[inset 1px 1px 3px 0px #00000024]",
-	_dark: { background: "mantine.dark[7]" }
-});
-var spacingSliderThumb = css({
-	position: "absolute",
-	boxSize: "[8px]",
-	border: `strong`,
-	borderColor: "mantine.gray[5]",
-	borderRadius: "sm",
-	transform: "translate(-50%, -50%)"
-});
-//#endregion
-export { autolayoutButton, autolayoutIndicator, spacingSliderBody, spacingSliderThumb };

package/dist/navigationpanel/hooks.d.ts

@@ -1,39 +0,0 @@
-import { ViewId } from '@likec4/core';
-import { NavigationPanelActorEvent, NavigationPanelActorRef } from './actor';
-import { Provider } from 'react';
-import { Context } from './actor.setup';
-import { MachineSnapshot } from 'xstate';
-export declare const NavigationPanelActorContextProvider: Provider<NavigationPanelActorRef>, selectNavigationContext: <T>(select: (state: Context) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => [selector: (snapshot: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
-    active?: NonNullable<"search" | "opened" | "decide" | "closing">;
-}, "active", any, any, any>) => T, compare: (a: T, b: T) => boolean] & {
-    Out: T;
-}, selectNavigationSnapshot: <T>(select: (state: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
-    active?: NonNullable<"search" | "opened" | "decide" | "closing">;
-}, "active", any, any, any>) => T, compare?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => [selector: (snapshot: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
-    active?: NonNullable<"search" | "opened" | "decide" | "closing">;
-}, "active", any, any, any>) => T, compare: (a: T, b: T) => boolean] & {
-    Out: T;
-}, useNavigationActorRef: () => NavigationPanelActorRef, useNavigationActorSelector: {
-    <T>(select: (state: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
-        active?: NonNullable<"search" | "opened" | "decide" | "closing">;
-    }, "active", any, any, any>) => T): T;
-    <T>(selectorCompare: [selector: (snapshot: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
-        active?: NonNullable<"search" | "opened" | "decide" | "closing">;
-    }, "active", any, any, any>) => T, compare: (a: T, b: T) => boolean]): T;
-    <T>(selector: (snapshot: MachineSnapshot<Context, NavigationPanelActorEvent, any, "pending" | "idle" | "active" | {
-        active?: NonNullable<"search" | "opened" | "decide" | "closing">;
-    }, "active", any, any, any>) => T, compare: (a: T, b: T) => boolean): T;
-};
-export interface NavigationActor {
-    readonly actorRef: NavigationPanelActorRef;
-    send: (event: NavigationPanelActorEvent) => void;
-    selectFolder: (folderPath: string) => void;
-    selectView: (viewId: ViewId) => void;
-    /**
-     * If the navigation dropdown is opened
-     */
-    isOpened: () => boolean;
-    clearSearch: () => void;
-    closeDropdown: () => void;
-}
-export declare function useNavigationActor(): NavigationActor;

package/dist/navigationpanel/hooks.js

@@ -1,30 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { createSafeContextForActor } from "../hooks/safeContext.js";
-import { useMemo } from "react";
-//#region src/navigationpanel/hooks.tsx
-var { ContextProvider: NavigationPanelActorContextProvider, selectContext: selectNavigationContext, selectSnapshot: selectNavigationSnapshot, useActorRef: useNavigationActorRef, useActorSelector: useNavigationActorSelector } = createSafeContextForActor("NavigationPanel");
-function useNavigationActor() {
-	const actorRef = useNavigationActorRef();
-	return useMemo(() => ({
-		actorRef,
-		send: (event) => actorRef.send(event),
-		selectFolder: (folderPath) => actorRef.send({
-			type: "select.folder",
-			folderPath
-		}),
-		selectView: (viewId) => actorRef.send({
-			type: "select.view",
-			viewId
-		}),
-		isOpened: () => {
-			return actorRef.getSnapshot().hasTag("active");
-		},
-		clearSearch: () => actorRef.send({
-			type: "searchQuery.change",
-			value: ""
-		}),
-		closeDropdown: () => actorRef.send({ type: "dropdown.dismiss" })
-	}), [actorRef]);
-}
-//#endregion
-export { NavigationPanelActorContextProvider, selectNavigationContext, useNavigationActor, useNavigationActorRef, useNavigationActorSelector };

package/dist/navigationpanel/index.d.ts

@@ -1 +0,0 @@
-export { NavigationPanel } from './NavigationPanel';

package/dist/navigationpanel/styles.css.d.ts

@@ -1,16 +0,0 @@
-import { RecipeRuntimeFn } from '@likec4/styles/types';
-export declare const breadcrumbTitle: RecipeRuntimeFn<{
-    truncate: {
-        true: {
-            truncate: true;
-        };
-    };
-    dimmed: {
-        true: {
-            color: {
-                base: "likec4.panel.text.dimmed";
-                _hover: "likec4.panel.action";
-            };
-        };
-    };
-}>;

package/dist/navigationpanel/styles.css.js

@@ -1,21 +0,0 @@
-import { cva } from "@likec4/styles/css";
-//#region src/navigationpanel/styles.css.ts
-var breadcrumbTitle = cva({
-	base: {
-		fontSize: "sm",
-		fontWeight: "medium",
-		color: {
-			base: "likec4.panel.action",
-			_hover: "likec4.panel.action.hover"
-		}
-	},
-	variants: {
-		truncate: { "true": { truncate: true } },
-		dimmed: { "true": { color: {
-			base: "likec4.panel.text.dimmed",
-			_hover: "likec4.panel.action"
-		} } }
-	}
-});
-//#endregion
-export { breadcrumbTitle };

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

@@ -1 +0,0 @@
-export declare function ActiveWalkthroughControls(): import("react").JSX.Element;

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js

@@ -1,113 +0,0 @@
-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"
-});
-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%",
-			borderWidth: "strong",
-			borderStyle: "solid",
-			borderColor: "likec4.walkthrough.parallelFrame",
-			pointerEvents: "none",
-			md: { borderWidth: "extra" }
-		} })
-	});
-};
-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?.activeFlow),
-			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("prev"),
-				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

@@ -1,293 +0,0 @@
-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 & {
-    key?: Key | null | undefined;
-    disabled?: boolean | undefined;
-    color?: string | undefined;
-    content?: string | undefined;
-    translate?: "yes" | "no" | undefined;
-    type?: "button" | "submit" | "reset" | undefined;
-    id?: string | undefined;
-    form?: string | undefined;
-    hidden?: boolean | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    className?: string | undefined;
-    title?: string | undefined;
-    dir?: string | undefined;
-    role?: AriaRole | undefined;
-    "aria-label"?: string | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    } | undefined;
-    onCopy?: ClipboardEventHandler<HTMLButtonElement> | undefined;
-    onCopyCapture?: ClipboardEventHandler<HTMLButtonElement> | undefined;
-    onCut?: ClipboardEventHandler<HTMLButtonElement> | undefined;
-    onCutCapture?: ClipboardEventHandler<HTMLButtonElement> | undefined;
-    onPaste?: ClipboardEventHandler<HTMLButtonElement> | undefined;
-    onPasteCapture?: ClipboardEventHandler<HTMLButtonElement> | undefined;
-    onCompositionEnd?: CompositionEventHandler<HTMLButtonElement> | undefined;
-    onCompositionEndCapture?: CompositionEventHandler<HTMLButtonElement> | undefined;
-    onCompositionStart?: CompositionEventHandler<HTMLButtonElement> | undefined;
-    onCompositionStartCapture?: CompositionEventHandler<HTMLButtonElement> | undefined;
-    onCompositionUpdate?: CompositionEventHandler<HTMLButtonElement> | undefined;
-    onCompositionUpdateCapture?: CompositionEventHandler<HTMLButtonElement> | undefined;
-    onFocus?: FocusEventHandler<HTMLButtonElement> | undefined;
-    onFocusCapture?: FocusEventHandler<HTMLButtonElement> | undefined;
-    onBlur?: FocusEventHandler<HTMLButtonElement> | undefined;
-    onBlurCapture?: FocusEventHandler<HTMLButtonElement> | undefined;
-    onChange?: ChangeEventHandler<HTMLButtonElement, Element> | undefined;
-    onChangeCapture?: ChangeEventHandler<HTMLButtonElement, Element> | undefined;
-    onBeforeInput?: InputEventHandler<HTMLButtonElement> | undefined;
-    onBeforeInputCapture?: InputEventHandler<HTMLButtonElement> | undefined;
-    onInput?: InputEventHandler<HTMLButtonElement> | undefined;
-    onInputCapture?: InputEventHandler<HTMLButtonElement> | undefined;
-    onReset?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onResetCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onSubmit?: SubmitEventHandler<HTMLButtonElement> | undefined;
-    onSubmitCapture?: SubmitEventHandler<HTMLButtonElement> | undefined;
-    onInvalid?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onInvalidCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onLoad?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onLoadCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onError?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onErrorCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onKeyDown?: KeyboardEventHandler<HTMLButtonElement> | undefined;
-    onKeyDownCapture?: KeyboardEventHandler<HTMLButtonElement> | undefined;
-    onKeyPress?: KeyboardEventHandler<HTMLButtonElement> | undefined;
-    onKeyPressCapture?: KeyboardEventHandler<HTMLButtonElement> | undefined;
-    onKeyUp?: KeyboardEventHandler<HTMLButtonElement> | undefined;
-    onKeyUpCapture?: KeyboardEventHandler<HTMLButtonElement> | undefined;
-    onAbort?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onAbortCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onCanPlay?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onCanPlayCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onCanPlayThrough?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onCanPlayThroughCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onDurationChange?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onDurationChangeCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onEmptied?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onEmptiedCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onEncrypted?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onEncryptedCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onEnded?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onEndedCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onLoadedData?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onLoadedDataCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onLoadedMetadata?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onLoadedMetadataCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onLoadStart?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onLoadStartCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onPause?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onPauseCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onPlay?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onPlayCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onPlaying?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onPlayingCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onProgress?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onProgressCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onRateChange?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onRateChangeCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onSeeked?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onSeekedCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onSeeking?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onSeekingCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onStalled?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onStalledCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onSuspend?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onSuspendCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onTimeUpdate?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onTimeUpdateCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onVolumeChange?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onVolumeChangeCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onWaiting?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onWaitingCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onAuxClick?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onAuxClickCapture?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onClickCapture?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onContextMenu?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onContextMenuCapture?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onDoubleClick?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onDoubleClickCapture?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onDragCapture?: DragEventHandler<HTMLButtonElement> | undefined;
-    onDragEndCapture?: DragEventHandler<HTMLButtonElement> | undefined;
-    onDragEnter?: DragEventHandler<HTMLButtonElement> | undefined;
-    onDragEnterCapture?: DragEventHandler<HTMLButtonElement> | undefined;
-    onDragExit?: DragEventHandler<HTMLButtonElement> | undefined;
-    onDragExitCapture?: DragEventHandler<HTMLButtonElement> | undefined;
-    onDragLeave?: DragEventHandler<HTMLButtonElement> | undefined;
-    onDragLeaveCapture?: DragEventHandler<HTMLButtonElement> | undefined;
-    onDragOver?: DragEventHandler<HTMLButtonElement> | undefined;
-    onDragOverCapture?: DragEventHandler<HTMLButtonElement> | undefined;
-    onDragStartCapture?: DragEventHandler<HTMLButtonElement> | undefined;
-    onDrop?: DragEventHandler<HTMLButtonElement> | undefined;
-    onDropCapture?: DragEventHandler<HTMLButtonElement> | undefined;
-    onMouseDown?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onMouseDownCapture?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onMouseEnter?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onMouseLeave?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onMouseMove?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onMouseMoveCapture?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onMouseOut?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onMouseOutCapture?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onMouseOver?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onMouseOverCapture?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onMouseUp?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onMouseUpCapture?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onSelect?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onSelectCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
-    onTouchCancel?: TouchEventHandler<HTMLButtonElement> | undefined;
-    onTouchCancelCapture?: TouchEventHandler<HTMLButtonElement> | undefined;
-    onTouchEnd?: TouchEventHandler<HTMLButtonElement> | undefined;
-    onTouchEndCapture?: TouchEventHandler<HTMLButtonElement> | undefined;
-    onTouchMove?: TouchEventHandler<HTMLButtonElement> | undefined;
-    onTouchMoveCapture?: TouchEventHandler<HTMLButtonElement> | undefined;
-    onTouchStart?: TouchEventHandler<HTMLButtonElement> | undefined;
-    onTouchStartCapture?: TouchEventHandler<HTMLButtonElement> | undefined;
-    onPointerDown?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onPointerDownCapture?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onPointerMove?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onPointerMoveCapture?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onPointerUp?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onPointerUpCapture?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onPointerCancel?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onPointerCancelCapture?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onPointerEnter?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onPointerLeave?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onPointerOver?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onPointerOverCapture?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onPointerOut?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onPointerOutCapture?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onGotPointerCapture?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onGotPointerCaptureCapture?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onLostPointerCapture?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onLostPointerCaptureCapture?: PointerEventHandler<HTMLButtonElement> | undefined;
-    onScroll?: UIEventHandler<HTMLButtonElement> | undefined;
-    onScrollCapture?: UIEventHandler<HTMLButtonElement> | undefined;
-    onScrollEnd?: UIEventHandler<HTMLButtonElement> | undefined;
-    onScrollEndCapture?: UIEventHandler<HTMLButtonElement> | undefined;
-    onWheel?: WheelEventHandler<HTMLButtonElement> | undefined;
-    onWheelCapture?: WheelEventHandler<HTMLButtonElement> | undefined;
-    onAnimationStartCapture?: AnimationEventHandler<HTMLButtonElement> | undefined;
-    onAnimationEnd?: AnimationEventHandler<HTMLButtonElement> | undefined;
-    onAnimationEndCapture?: AnimationEventHandler<HTMLButtonElement> | undefined;
-    onAnimationIteration?: AnimationEventHandler<HTMLButtonElement> | undefined;
-    onAnimationIterationCapture?: AnimationEventHandler<HTMLButtonElement> | undefined;
-    onToggle?: ToggleEventHandler<HTMLButtonElement> | undefined;
-    onBeforeToggle?: ToggleEventHandler<HTMLButtonElement> | undefined;
-    onTransitionCancel?: TransitionEventHandler<HTMLButtonElement> | undefined;
-    onTransitionCancelCapture?: TransitionEventHandler<HTMLButtonElement> | undefined;
-    onTransitionEnd?: TransitionEventHandler<HTMLButtonElement> | undefined;
-    onTransitionEndCapture?: TransitionEventHandler<HTMLButtonElement> | undefined;
-    onTransitionRun?: TransitionEventHandler<HTMLButtonElement> | undefined;
-    onTransitionRunCapture?: TransitionEventHandler<HTMLButtonElement> | undefined;
-    onTransitionStart?: TransitionEventHandler<HTMLButtonElement> | undefined;
-    onTransitionStartCapture?: TransitionEventHandler<HTMLButtonElement> | undefined;
-    defaultChecked?: boolean | undefined;
-    suppressContentEditableWarning?: boolean | undefined;
-    suppressHydrationWarning?: boolean | undefined;
-    accessKey?: string | undefined;
-    autoCapitalize?: "none" | (string & {}) | "on" | "off" | "sentences" | "words" | "characters" | undefined;
-    autoFocus?: boolean | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
-    contextMenu?: string | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
-    lang?: string | undefined;
-    nonce?: string | undefined;
-    slot?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined;
-    radioGroup?: string | undefined;
-    about?: string | undefined;
-    datatype?: string | undefined;
-    inlist?: any;
-    prefix?: string | undefined;
-    property?: string | undefined;
-    rel?: string | undefined;
-    resource?: string | undefined;
-    rev?: string | undefined;
-    typeof?: string | undefined;
-    vocab?: string | undefined;
-    autoCorrect?: string | undefined;
-    autoSave?: string | undefined;
-    itemProp?: string | undefined;
-    itemScope?: boolean | undefined;
-    itemType?: string | undefined;
-    itemID?: string | undefined;
-    itemRef?: string | undefined;
-    results?: number | undefined;
-    security?: string | undefined;
-    unselectable?: "on" | "off" | undefined;
-    popover?: "" | "auto" | "manual" | "hint" | undefined;
-    popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
-    popoverTarget?: string | undefined;
-    inert?: boolean | undefined;
-    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"?: "none" | "list" | "inline" | "both" | 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"?: "text" | "all" | "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;
-    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
-    formEncType?: string | undefined;
-    formMethod?: string | undefined;
-    formNoValidate?: boolean | undefined;
-    formTarget?: string | undefined;
-} & MotionProps, "ref"> & RefAttributes<HTMLButtonElement>>;
-export declare function StartWalkthroughButton(): import("react").JSX.Element;
-export declare function DynamicViewControls(): import("react").JSX.Element;