@likec4/diagram 1.39.5 → 1.41.0

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

@@ -0,0 +1,292 @@
+import { ButtonProps } from '@mantine/core';
+import { ForwardRefExoticComponent, Ref, Key, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, FormEventHandler, InputEventHandler, ReactEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, ToggleEventHandler, TransitionEventHandler, RefAttributes } from 'react';
+import { MotionProps } from 'motion/react';
+export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<ButtonProps & {
+    id?: string | undefined;
+    type?: "button" | "reset" | "submit" | undefined;
+    form?: string | undefined;
+    hidden?: boolean | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    className?: string | undefined;
+    color?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    ref?: Ref<HTMLButtonElement> | undefined;
+    key?: Key | null | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | 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;
+    dir?: string | undefined;
+    enterKeyHint?: "search" | "next" | "done" | "send" | "previous" | "enter" | "go" | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    radioGroup?: string | undefined;
+    role?: AriaRole | 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" | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+    popoverTarget?: string | undefined;
+    inert?: boolean | undefined;
+    inputMode?: "none" | "search" | "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" | "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-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: 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;
+    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?: FormEventHandler<HTMLButtonElement> | undefined;
+    onChangeCapture?: FormEventHandler<HTMLButtonElement> | undefined;
+    onBeforeInput?: InputEventHandler<HTMLButtonElement> | undefined;
+    onBeforeInputCapture?: FormEventHandler<HTMLButtonElement> | undefined;
+    onInput?: FormEventHandler<HTMLButtonElement> | undefined;
+    onInputCapture?: FormEventHandler<HTMLButtonElement> | undefined;
+    onReset?: FormEventHandler<HTMLButtonElement> | undefined;
+    onResetCapture?: FormEventHandler<HTMLButtonElement> | undefined;
+    onSubmit?: FormEventHandler<HTMLButtonElement> | undefined;
+    onSubmitCapture?: FormEventHandler<HTMLButtonElement> | undefined;
+    onInvalid?: FormEventHandler<HTMLButtonElement> | undefined;
+    onInvalidCapture?: FormEventHandler<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;
+    name?: string | undefined;
+    value?: string | number | readonly string[] | undefined;
+    disabled?: boolean | 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 DynamicViewControls(): import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/walkthrough/DynamicViewControls.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { invariant } from '@likec4/core';
+import { css } from '@likec4/styles/css';
+import { Button, SegmentedControl } from '@mantine/core';
+import * as m from 'motion/react-m';
+import { forwardRef } from 'react';
+import { useDiagramContext, useDiagram } from '../../hooks/useDiagram.js';
+import { Tooltip } from '../_common.js';
+import { useNavigationActor } from '../hooks.js';
+import IconPlayerPlayFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/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,
+    layoutId: "trigger-dynamic-walkthrough",
+    className: css({
+      flexShrink: 0
+    })
+  }
+));
+function StartWalkthroughButton({ onClick }) {
+  const diagram = useDiagram();
+  const actor = useNavigationActor();
+  return /* @__PURE__ */ jsx(Tooltip, { label: "Start Dynamic View Walkthrough", children: /* @__PURE__ */ jsx(
+    TriggerWalkthroughButton,
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        actor.closeDropdown();
+        diagram.startWalkthrough();
+      },
+      size: "compact-xs",
+      h: 26,
+      classNames: {
+        label: css({
+          display: {
+            base: "none",
+            "@/md": "[inherit]"
+          }
+        }),
+        section: css({
+          marginInlineStart: {
+            base: "0",
+            "@/md": "2"
+          }
+        })
+      },
+      rightSection: /* @__PURE__ */ jsx(IconPlayerPlayFilled, { size: 10 }),
+      children: "Start"
+    }
+  ) });
+}
+function DynamicViewModeSwitcher({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(m.div, { 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"
+        }
+      ]
+    }
+  ) });
+}
+function DynamicViewControls() {
+  const dynamicViewVariant = useDiagramContext((c) => c.dynamicViewVariant);
+  const diagram = useDiagram();
+  const actor = useNavigationActor();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      DynamicViewModeSwitcher,
+      {
+        value: dynamicViewVariant,
+        onChange: (mode) => {
+          diagram.switchDynamicViewVariant(mode);
+        }
+      },
+      "dynamic-view-mode-switcher"
+    ),
+    /* @__PURE__ */ jsx(
+      StartWalkthroughButton,
+      {
+        onClick: () => {
+          actor.closeDropdown();
+          diagram.startWalkthrough();
+        }
+      },
+      "trigger-dynamic-walkthrough"
+    )
+  ] });
+}
+
+export { DynamicViewControls, TriggerWalkthroughButton };

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

@@ -1 +1,2 @@
-export { ActiveWalkthroughControls, StartWalkthroughButton } from './ActiveWalkthroughControls';
+export { ActiveWalkthroughControls } from './ActiveWalkthroughControls';
+export { DynamicViewControls } from './DynamicViewControls';

package/dist/overlays/element-details/ElementDetailsCard.css.js

@@ -24,13 +24,19 @@ const dialog = css({
 const card = css({
   position: "absolute",
   pointerEvents: "all",
+  display: "flex",
+  flexDirection: "column",
+  padding: "4",
   gap: "lg",
   justifyContent: "stretch",
+  color: "mantine.colors.text",
   backgroundColor: {
     base: "mantine.colors.body",
     _dark: "mantine.colors.dark[6]"
   },
-  border: `none`,
+  boxShadow: "md",
+  overflow: "hidden",
+  border: "none",
   backgroundImage: `
     linear-gradient(180deg,
       color-mix(in srgb, var(--likec4-palette-fill) 60%, transparent),

package/dist/overlays/element-details/ElementDetailsCard.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { HStack } from '@likec4/styles/jsx';
-import { RemoveScroll, Card, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Box, Stack, Divider as Divider$1, ScrollAreaAutosize, UnstyledButton, ThemeIcon } from '@mantine/core';
+import { RemoveScroll, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Box, Stack, Divider as Divider$1, ScrollAreaAutosize, UnstyledButton, Group, ThemeIcon } from '@mantine/core';
 import { useViewportSize, useSessionStorage } from '@mantine/hooks';
 import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
 import { useDragControls, useMotionValue, m } from 'motion/react';
@@ -14,7 +14,7 @@ import { elementIcon, card, cardHeader, title, tabsPanel, tabsTab, tabsList, tab
 import { TabPanelDeployments } from './TabPanelDeployments.js';
 import { TabPanelRelationships } from './TabPanelRelationships.js';
 import { TabPanelStructure } from './TabPanelStructure.js';
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { useCurrentViewModel } from '../../likec4model/useCurrentViewModel.js';
 import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
 import { IconRenderer } from '../../context/IconRenderer.js';
 import { stopPropagation } from '../../utils/xyflow.js';
@@ -69,8 +69,7 @@ function ElementDetailsCard({
     defaultValue: "Properties"
   });
   const diagram = useDiagram();
-  const likec4model = useLikeC4Model();
-  const viewModel = likec4model.view(viewId);
+  const viewModel = useCurrentViewModel();
   const nodeModel = fromNode ? viewModel.findNode(fromNode) : viewModel.findNodeWithElement(fqn);
   const elementModel = viewModel.$model.element(fqn);
   const [viewsOf, otherViews] = pipe(
@@ -150,7 +149,7 @@ function ElementDetailsCard({
   }, 20);
   useTimeoutEffect(() => {
     setOpened(true);
-  }, 200);
+  }, 220);
   return /* @__PURE__ */ jsx(
     m.dialog,
     {
@@ -185,10 +184,8 @@ function ElementDetailsCard({
         close();
       },
       children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsxs(
-        Card,
+        m.div,
         {
-          shadow: "md",
-          component: m.div,
           layout: true,
           layoutRoot: true,
           drag: true,
@@ -221,14 +218,13 @@ function ElementDetailsCard({
             }
           },
           style: {
-            // `style` prop in Mantine doesn't accept motion values
             width,
             height
           },
           children: [
             /* @__PURE__ */ jsxs("div", { className: cardHeader, onPointerDown: (e) => controls.start(e), children: [
-              /* @__PURE__ */ jsxs(Group, { align: "start", justify: "space-between", gap: "sm", mb: "sm", wrap: "nowrap", children: [
-                /* @__PURE__ */ jsxs(Group, { align: "start", gap: "sm", style: { cursor: "default" }, wrap: "nowrap", children: [
+              /* @__PURE__ */ jsxs(HStack, { alignItems: "start", justify: "space-between", gap: "sm", mb: "sm", flexWrap: "nowrap", children: [
+                /* @__PURE__ */ jsxs(HStack, { alignItems: "start", gap: "sm", style: { cursor: "default" }, flexWrap: "nowrap", children: [
                   elementIcon$1,
                   /* @__PURE__ */ jsxs("div", { children: [
                     /* @__PURE__ */ jsx(
@@ -253,7 +249,7 @@ function ElementDetailsCard({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs(Group, { align: "baseline", gap: "sm", wrap: "nowrap", children: [
+              /* @__PURE__ */ jsxs(HStack, { alignItems: "baseline", gap: "sm", flexWrap: "nowrap", children: [
                 /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsx(SmallLabel, { children: "kind" }),
                   /* @__PURE__ */ jsx(
@@ -359,6 +355,10 @@ function ElementDetailsCard({
                 children: [
                   /* @__PURE__ */ jsx(TabsList, { children: TABS.map((tab) => /* @__PURE__ */ jsx(TabsTab, { value: tab, children: tab }, tab)) }),
                   /* @__PURE__ */ jsx(TabsPanel, { value: "Properties", children: /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "y", type: "scroll", offsetScrollbars: true, children: /* @__PURE__ */ jsxs(Box, { className: propertiesGrid, pt: "xs", children: [
+                    elementModel.hasSummary && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(PropertyLabel, { children: "summary" }),
+                      /* @__PURE__ */ jsx(MarkdownBlock, { value: elementModel.summary })
+                    ] }),
                     /* @__PURE__ */ jsxs(Fragment, { children: [
                       /* @__PURE__ */ jsx(PropertyLabel, { children: "description" }),
                       /* @__PURE__ */ jsx(
@@ -494,12 +494,10 @@ function ElementMetata({
         children: entries(metadata).map(([key, value]) => /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cx(
-              "group",
-              css({
-                display: "contents"
-              })
-            ),
+            style: {
+              display: "contents"
+            },
+            className: "group",
             children: [
               /* @__PURE__ */ jsxs(
                 "div",
@@ -548,7 +546,7 @@ function ElementMetata({
                             fontSize: "sm",
                             padding: "xxs",
                             whiteSpace: "pre",
-                            fontFamily: "[var(--mantine-font-family-monospace)]",
+                            fontFamily: "mono",
                             userSelect: "all"
                           }),
                           children: value

package/dist/overlays/relationship-details/RelationshipDetails.js

@@ -104,7 +104,10 @@ const RelationshipDetailsInner = memo(() => {
       id: browser.rootElementId,
       nodes,
       edges,
-      className: cx(initialized ? "initialized" : "not-initialized"),
+      className: cx(
+        initialized ? "initialized" : "not-initialized",
+        "likec4-relationship-details"
+      ),
       nodeTypes,
       edgeTypes,
       onNodesChange: useCallbackRef((changes) => {

package/dist/overlays/relationship-details/layout.d.ts

@@ -1,5 +1,6 @@
 import { DiagramEdge, DiagramNode, DiagramView, Fqn, RelationId, RichTextOrEmpty } from '@likec4/core/types';
 import { AnyAux, LikeC4ViewModel } from '@likec4/core/model';
+import { Except } from 'type-fest';
 import { RelationshipDetailsTypes } from './_types';
 import { RelationshipDetailsViewData } from './compute';
 export type LayoutResult = {
@@ -8,13 +9,13 @@ export type LayoutResult = {
     bounds: DiagramView['bounds'];
 };
 export declare namespace LayoutResult {
-    type Node = Omit<DiagramNode, 'modelRef' | 'description' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
+    type Node = Except<DiagramNode, 'modelRef' | 'description' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
         description: RichTextOrEmpty;
         modelRef: Fqn;
         column: RelationshipDetailsTypes.Column;
         ports: RelationshipDetailsTypes.Ports;
     };
-    type Edge = Omit<DiagramEdge, 'relations' | 'description'> & {
+    type Edge = Except<DiagramEdge, 'relations' | 'description'> & {
         relationId: RelationId;
         sourceHandle: string;
         targetHandle: string;

package/dist/overlays/relationship-details/layout.js

@@ -1,6 +1,5 @@
 import { treeFromElements } from '@likec4/core/compute-view/relationships';
 import dagre from '@dagrejs/dagre';
-import { RichText } from '@likec4/core';
 import { ifind, DefaultMap, invariant } from '@likec4/core/utils';
 import { pipe, filter, mapToObj, find, map, tap, reduce, sortBy, prop } from 'remeda';
 
@@ -240,7 +239,7 @@ function layoutRelationshipDetails(data, scope) {
       y: position.y,
       position: [position.x, position.y],
       title: element.title,
-      description: RichText.from(element.description),
+      description: element.summary,
       technology: element.technology,
       tags: [...element.tags],
       links: null,

package/dist/overlays/relationships-browser/RelationshipsBrowser.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { ActionIcon, Group } from '@mantine/core';
 import { useCallbackRef, useStateHistory } from '@mantine/hooks';
+import { useRafEffect } from '@react-hookz/web';
 import { ReactFlowProvider, useStoreApi, useReactFlow, Panel } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
 import { LayoutGroup, AnimatePresence, m } from 'motion/react';
@@ -137,7 +138,7 @@ const RelationshipsBrowserInner = memo(() => {
       browser.navigateTo(historySubjectId);
     }
   }, [historySubjectId, browser]);
-  useEffect(() => {
+  useRafEffect(() => {
     browser.updateView(layouted);
   }, [layouted, browser]);
   const hasStepBack = current > 0;

package/dist/overlays/relationships-browser/layout.js

@@ -374,7 +374,7 @@ function layoutRelationshipsView(data, scope) {
       y: position.y,
       position: [position.x, position.y],
       title: element.title,
-      description: RichText.from(element.description),
+      description: element.summary,
       technology: element.technology,
       tags: [...element.tags],
       links: null,

package/dist/search/components/ElementsColumn.js

@@ -224,7 +224,7 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: btn.description, lineClamp: 1, children: element.description.text || "No description" })
+            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: btn.description, lineClamp: 1, children: element.summary.text || "No description" })
           ] }),
           /* @__PURE__ */ jsx(Text, { component: "div", className: cx(elementViewsCount, btn.descriptionColor), fz: "xs", children: views.length === 0 ? "No views" : /* @__PURE__ */ jsxs(Fragment, { children: [
             views.length,