@likec4/diagram 1.59.2 → 1.59.4

package/dist/likec4diagram/ui/sequence-outline/StepRow.js

@@ -0,0 +1,190 @@
+import "../../../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../../../hooks/safeContext.js";
+import { Markdown } from "../../../base-primitives/Markdown.js";
+import { SEQ_CARD_LAYOUT_ID, SEQ_TRANSITION } from "./motion.js";
+import { recessed } from "./depth-of-field.js";
+import { NotesDot, StepBadge } from "./StepBadge.js";
+import { css } from "@likec4/styles/css";
+import { IconArrowRight } from "@tabler/icons-react";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RichText } from "@likec4/core";
+import { m } from "motion/react";
+import { styled } from "@likec4/styles/jsx";
+import { hstack } from "@likec4/styles/patterns";
+//#region src/likec4diagram/ui/sequence-outline/StepRow.tsx
+/** A step the walkthrough is not on: one line, clickable, recessed with its level. */
+function StepRow({ node, recession, active }) {
+	const diagram = useDiagram();
+	if (active) return /* @__PURE__ */ jsx(ActiveStepCard, { node });
+	const { stepnum, source, target, label, notes } = node.nodeProps;
+	return /* @__PURE__ */ jsxs(m.div, {
+		layout: true,
+		className: hstack(css.raw(recessed, {
+			alignItems: "baseline",
+			gap: "2",
+			width: "100%",
+			paddingInline: "1.5",
+			paddingBlock: "1.5",
+			rounded: "sm",
+			cursor: "pointer",
+			color: "text",
+			userSelect: "none",
+			_hover: { background: "[var(--colors-color-palette-hovered, {colors.surface.sunken})]" }
+		})),
+		style: { ["--seq-r"]: recession },
+		onClick: () => diagram.walkthroughStep({ step: node.value }),
+		children: [
+			/* @__PURE__ */ jsx(StepBadge, { children: stepnum }),
+			/* @__PURE__ */ jsx(styled.span, {
+				css: {
+					flex: "1",
+					minWidth: "0",
+					fontSize: "xs",
+					lineHeight: "[18px]",
+					whiteSpace: "pre-line",
+					overflowWrap: "anywhere"
+				},
+				children: label ?? `${source} → ${target}`
+			}),
+			notes && /* @__PURE__ */ jsx(NotesDot, {})
+		]
+	});
+}
+/** The step you are on: lifted onto its own surface, with room for its notes. */
+var ActiveStepCard = ({ node }) => {
+	const ref = useRef(null);
+	const { stepnum, source, target, label, notes } = node.nodeProps;
+	return /* @__PURE__ */ jsxs(m.div, {
+		ref,
+		layoutId: SEQ_CARD_LAYOUT_ID,
+		layout: "position",
+		layoutAnchor: false,
+		layoutCrossfade: false,
+		transition: {
+			...SEQ_TRANSITION,
+			when: "beforeChildren"
+		},
+		onLayoutAnimationComplete: () => {
+			ref.current?.scrollIntoView({ block: "nearest" });
+		},
+		className: css({
+			marginBlock: "2",
+			paddingInline: "3",
+			paddingBlock: "2.5",
+			rounded: "md",
+			background: "[var(--colors-color-palette-label, {colors.surface.sunken})]",
+			boxShadow: "md",
+			cursor: "default",
+			scrollMarginTop: "10",
+			scrollMarginBottom: "16"
+		}),
+		children: [
+			/* @__PURE__ */ jsxs(m.div, {
+				layout: "position",
+				className: hstack({
+					alignItems: "baseline",
+					gap: "2",
+					width: "100%"
+				}),
+				children: [/* @__PURE__ */ jsx(StepBadge, {
+					active: true,
+					children: stepnum
+				}), /* @__PURE__ */ jsx(styled.span, {
+					as: m.div,
+					css: {
+						flex: "1",
+						minWidth: "0",
+						fontSize: "md",
+						fontWeight: "medium",
+						lineHeight: "[20px]",
+						color: "text",
+						whiteSpace: "pre-line",
+						overflowWrap: "anywhere",
+						textWrap: "balance"
+					},
+					children: label ?? `${source} → ${target}`
+				})]
+			}),
+			label && /* @__PURE__ */ jsxs(m.div, {
+				layout: "y",
+				initial: {
+					visibility: "hidden",
+					overflow: "hidden",
+					height: 0
+				},
+				animate: {
+					visibility: "visible",
+					overflow: "visible",
+					height: "auto"
+				},
+				exit: {
+					visibility: "hidden",
+					overflow: "hidden",
+					height: 0
+				},
+				transition: SEQ_TRANSITION,
+				className: css({
+					marginTop: "1",
+					marginLeft: "[30px]",
+					textStyle: "dimmed.xxs",
+					fontSize: "[8px]",
+					color: "[color-mix(in srgb, {colors.text}, transparent 20%)]",
+					fontWeight: "medium",
+					letterSpacing: "caps.sm",
+					textTransform: "uppercase",
+					userSelect: "none"
+				}),
+				children: [
+					source,
+					/* @__PURE__ */ jsx(IconArrowRight, {
+						size: 10,
+						className: css({
+							display: "inline",
+							verticalAlign: "[-0.15em]",
+							marginInline: "1"
+						})
+					}),
+					target
+				]
+			}, "label"),
+			notes && /* @__PURE__ */ jsx(m.div, {
+				layout: true,
+				initial: {
+					visibility: "hidden",
+					overflow: "hidden",
+					height: 10
+				},
+				animate: {
+					visibility: "visible",
+					overflow: "visible",
+					height: "auto"
+				},
+				exit: {
+					visibility: "hidden",
+					overflow: "hidden",
+					height: 10
+				},
+				transition: SEQ_TRANSITION,
+				children: /* @__PURE__ */ jsx(Markdown, {
+					value: RichText.from(notes),
+					fontSize: "md",
+					textScale: .95,
+					className: css({
+						marginTop: "2.5",
+						paddingTop: "2.5",
+						paddingBottom: "2",
+						borderTop: "subtle",
+						color: "text"
+					}),
+					style: {
+						borderTopColor: "oklch(from var(--_border-color) l c h / 25%)",
+						["--_border-color"]: "var(--colors-color-palette-border, var(--colors-border-subtle))"
+					}
+				})
+			}, "Markdown")
+		]
+	});
+};
+//#endregion
+export { StepRow };

package/dist/likec4diagram/ui/sequence-outline/StoreProvider.d.ts

@@ -0,0 +1,238 @@
+import { SnapshotFromStore, StoreFromStoreLogicCreator } from '@xstate/store-react';
+import { PropsWithChildren } from 'react';
+import { StepPath, DynamicViewFlow, LayoutedDynamicView, Any, DynamicViewFlowData, MarkdownOrString } from '@likec4/core';
+import { MachineSnapshot, ActorRefFromLogic } from 'xstate';
+import { DiagramContext } from '../../..';
+import { Events } from '../../state/machine.setup';
+import { OverlaysActorRef, OverlaysActorLogic } from '../../../overlays/overlaysActor';
+import { SearchActorRef, SearchActorLogic } from '../../../search/searchActor';
+import { BaseEditorActorRef } from '../../../editor/actor/setup';
+import { NavigationPanelActorRef, NavigationPanelActorLogic } from '../../../navigationpanel/actor';
+import { HotkeyActorLogic } from '../../state/hotkeyActor';
+import { MediaPrintActorLogic } from '../../state/mediaPrintActor';
+import { EditorActorLogic } from '../../../editor';
+import { StoreLogicCreator, TriggerObject } from '@xstate/store';
+import { OutlineTreeNodes } from './types';
+declare const selectFlow: [selector: (snapshot: MachineSnapshot<DiagramContext, Events, {
+    overlays: OverlaysActorRef | undefined;
+    search: SearchActorRef | undefined;
+    editor: BaseEditorActorRef | undefined;
+    navigationPanel: NavigationPanelActorRef | undefined;
+} & Omit<{
+    hotkey: ActorRefFromLogic<HotkeyActorLogic> | undefined;
+    overlays: ActorRefFromLogic<OverlaysActorLogic> | undefined;
+    search: ActorRefFromLogic<SearchActorLogic> | undefined;
+    mediaPrint: ActorRefFromLogic<MediaPrintActorLogic> | undefined;
+    editor: ActorRefFromLogic<EditorActorLogic> | undefined;
+    navigationPanel: ActorRefFromLogic<NavigationPanelActorLogic> | undefined;
+}, "search" | "overlays" | "editor" | "navigationPanel">, "final" | "isReady" | "navigating" | "ready" | "initializing" | {
+    ready?: NonNullable<"idle" | "walkthrough" | "focused" | "printing">;
+}, never, never, never, never>) => {
+    flow: DynamicViewFlow< LayoutedDynamicView<Any> & {
+        flow: DynamicViewFlowData;
+    }>;
+    activeStep: StepPath;
+    stepNum: number;
+    title: string;
+    description: MarkdownOrString | null;
+    outlinePanelWidth: number;
+    collapsed: {
+        [flowId: StepPath]: boolean;
+    };
+    prev: StepPath | null;
+    next: StepPath | null;
+} | {
+    flow: null;
+    activeStep: null;
+    title: string;
+    description: MarkdownOrString | null;
+    stepNum?: never;
+    outlinePanelWidth?: never;
+    collapsed?: never;
+    prev?: never;
+    next?: never;
+}, compare: (a: {
+    flow: DynamicViewFlow< LayoutedDynamicView<Any> & {
+        flow: DynamicViewFlowData;
+    }>;
+    activeStep: StepPath;
+    stepNum: number;
+    title: string;
+    description: MarkdownOrString | null;
+    outlinePanelWidth: number;
+    collapsed: {
+        [flowId: StepPath]: boolean;
+    };
+    prev: StepPath | null;
+    next: StepPath | null;
+} | {
+    flow: null;
+    activeStep: null;
+    title: string;
+    description: MarkdownOrString | null;
+    stepNum?: never;
+    outlinePanelWidth?: never;
+    collapsed?: never;
+    prev?: never;
+    next?: never;
+}, b: {
+    flow: DynamicViewFlow< LayoutedDynamicView<Any> & {
+        flow: DynamicViewFlowData;
+    }>;
+    activeStep: StepPath;
+    stepNum: number;
+    title: string;
+    description: MarkdownOrString | null;
+    outlinePanelWidth: number;
+    collapsed: {
+        [flowId: StepPath]: boolean;
+    };
+    prev: StepPath | null;
+    next: StepPath | null;
+} | {
+    flow: null;
+    activeStep: null;
+    title: string;
+    description: MarkdownOrString | null;
+    stepNum?: never;
+    outlinePanelWidth?: never;
+    collapsed?: never;
+    prev?: never;
+    next?: never;
+}) => boolean] & {
+    Out: {
+        flow: DynamicViewFlow< LayoutedDynamicView<Any> & {
+            flow: DynamicViewFlowData;
+        }>;
+        activeStep: StepPath;
+        stepNum: number;
+        title: string;
+        description: MarkdownOrString | null;
+        outlinePanelWidth: number;
+        collapsed: {
+            [flowId: StepPath]: boolean;
+        };
+        prev: StepPath | null;
+        next: StepPath | null;
+    } | {
+        flow: null;
+        activeStep: null;
+        title: string;
+        description: MarkdownOrString | null;
+        stepNum?: never;
+        outlinePanelWidth?: never;
+        collapsed?: never;
+        prev?: never;
+        next?: never;
+    };
+};
+type SelectFlowResult = Extract<typeof selectFlow.Out, {
+    activeStep: string;
+}>;
+declare const logic: StoreLogicCreator<{
+    ancestors: StepPath[];
+    outlineTree: OutlineTreeNodes;
+    flow: DynamicViewFlow< LayoutedDynamicView<Any> & {
+        flow: DynamicViewFlowData;
+    }>;
+    activeStep: StepPath;
+    stepNum: number;
+    title: string;
+    description: MarkdownOrString | null;
+    outlinePanelWidth: number;
+    collapsed: {
+        [flowId: StepPath]: boolean;
+    };
+    prev: StepPath | null;
+    next: StepPath | null;
+}, {
+    updateInput: {
+        input: SelectFlowResult;
+    };
+}, never, {
+    input: SelectFlowResult;
+}, {
+    outlinePanelWidth: (context: {
+        ancestors: StepPath[];
+        outlineTree: OutlineTreeNodes;
+        flow: DynamicViewFlow< LayoutedDynamicView<Any> & {
+            flow: DynamicViewFlowData;
+        }>;
+        activeStep: StepPath;
+        stepNum: number;
+        title: string;
+        description: MarkdownOrString | null;
+        outlinePanelWidth: number;
+        collapsed: {
+            [flowId: StepPath]: boolean;
+        };
+        prev: StepPath | null;
+        next: StepPath | null;
+    }) => number;
+    activeDepth: (context: {
+        ancestors: StepPath[];
+        outlineTree: OutlineTreeNodes;
+        flow: DynamicViewFlow< LayoutedDynamicView<Any> & {
+            flow: DynamicViewFlowData;
+        }>;
+        activeStep: StepPath;
+        stepNum: number;
+        title: string;
+        description: MarkdownOrString | null;
+        outlinePanelWidth: number;
+        collapsed: {
+            [flowId: StepPath]: boolean;
+        };
+        prev: StepPath | null;
+        next: StepPath | null;
+    }) => number;
+    collapsed: (context: {
+        ancestors: StepPath[];
+        outlineTree: OutlineTreeNodes;
+        flow: DynamicViewFlow< LayoutedDynamicView<Any> & {
+            flow: DynamicViewFlowData;
+        }>;
+        activeStep: StepPath;
+        stepNum: number;
+        title: string;
+        description: MarkdownOrString | null;
+        outlinePanelWidth: number;
+        collapsed: {
+            [flowId: StepPath]: boolean;
+        };
+        prev: StepPath | null;
+        next: StepPath | null;
+    }) => {
+        [flowId: StepPath]: boolean;
+    };
+    outlineTree: (context: {
+        ancestors: StepPath[];
+        outlineTree: OutlineTreeNodes;
+        flow: DynamicViewFlow< LayoutedDynamicView<Any> & {
+            flow: DynamicViewFlowData;
+        }>;
+        activeStep: StepPath;
+        stepNum: number;
+        title: string;
+        description: MarkdownOrString | null;
+        outlinePanelWidth: number;
+        collapsed: {
+            [flowId: StepPath]: boolean;
+        };
+        prev: StepPath | null;
+        next: StepPath | null;
+    }) => OutlineTreeNodes;
+}>;
+type SequenceOutlineStore = StoreFromStoreLogicCreator<typeof logic>;
+type SequenceOutlineStoreContext = SnapshotFromStore<SequenceOutlineStore>['context'];
+export declare function StoreProvider({ children }: PropsWithChildren<{}>): import("react").JSX.Element | null;
+export declare function useSelectContext<T>(selector: (context: SequenceOutlineStoreContext) => T): T;
+export declare function useTrigger(): TriggerObject<{
+    updateInput: {
+        input: SelectFlowResult;
+    };
+}>;
+export declare function useIsCollapsed(step: StepPath): boolean;
+export declare function useOutlineTree(): OutlineTreeNodes;
+export declare function useOutlinePanelWidth(): number;
+export {};

package/dist/likec4diagram/ui/sequence-outline/StoreProvider.js

@@ -0,0 +1,94 @@
+import "../../../_virtual/_rolldown/runtime.js";
+import { roundDpr } from "../../../utils/roundDpr.js";
+import { selectDiagramContext, useDiagramSelector } from "../../../hooks/safeContext.js";
+import { buildTree } from "./tree.js";
+import { createContext, use, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { shallowEqual } from "fast-equals";
+import { dynamicViewFlow, flowAncestors, invariant, isDynamicViewWithFlow } from "@likec4/core";
+import { extractViewTitleFromPath } from "@likec4/core/model";
+import { createStoreLogic, useSelector, useStore } from "@xstate/store-react";
+//#region src/likec4diagram/ui/sequence-outline/StoreProvider.tsx
+var selectFlow = selectDiagramContext((s) => {
+	const title = extractViewTitleFromPath(s.view.title ?? "Untitled");
+	const description = s.view.description;
+	const activeStep = s.activeWalkthrough?.stepId ?? null;
+	if (activeStep) {
+		invariant(isDynamicViewWithFlow(s.view), "View is not a dynamic view with flow");
+		const flow = dynamicViewFlow(s.view);
+		const { prev, next } = flow.prevAndNext(activeStep, ({ id }) => s.collapsedSequenceFlows[id] ?? false);
+		return {
+			flow,
+			activeStep,
+			stepNum: s.xyedges.find((e) => e.data.id === activeStep)?.data.stepnum ?? 1,
+			title,
+			description,
+			outlinePanelWidth: s.activeWalkthrough?.outlinePanelWidth ?? 0,
+			collapsed: s.collapsedSequenceFlows,
+			prev,
+			next
+		};
+	}
+	return {
+		flow: null,
+		activeStep: null,
+		title,
+		description
+	};
+});
+var logic = createStoreLogic({
+	context: ({ input }) => ({
+		...input,
+		ancestors: flowAncestors(input.activeStep),
+		outlineTree: buildTree(input.flow)
+	}),
+	on: { updateInput: (context, { input }) => ({
+		...input,
+		ancestors: input.activeStep == context.activeStep ? context.ancestors : flowAncestors(input.activeStep),
+		outlineTree: input.flow === context.flow ? context.outlineTree : buildTree(input.flow)
+	}) },
+	selectors: {
+		outlinePanelWidth: (context) => roundDpr(context.outlinePanelWidth),
+		activeDepth: (context) => context.ancestors.length,
+		collapsed: (context) => context.collapsed,
+		outlineTree: (context) => context.outlineTree
+	}
+});
+function StoreProvider({ children }) {
+	const input = useDiagramSelector(selectFlow);
+	if (!input.flow) return null;
+	return /* @__PURE__ */ jsx(StoreGuard, {
+		input,
+		children
+	});
+}
+var Context = createContext({});
+function StoreGuard({ children, input }) {
+	const store = useStore(logic, { input });
+	useEffect(() => {
+		store.trigger.updateInput({ input });
+	}, [input]);
+	useEffect(() => {
+		return store.inspect((event) => {
+			console.log("event", event);
+		}).unsubscribe;
+	}, [store]);
+	return /* @__PURE__ */ jsx(Context, {
+		value: store,
+		children
+	});
+}
+function useSelectContext(selector) {
+	const store = use(Context);
+	return useSelector(store, (s) => selector(s.context), shallowEqual);
+}
+function useIsCollapsed(step) {
+	const store = use(Context);
+	return useSelector(store.selectors.collapsed, (collapsed) => collapsed[step] ?? false);
+}
+function useOutlinePanelWidth() {
+	const store = use(Context);
+	return useSelector(store.selectors.outlinePanelWidth);
+}
+//#endregion
+export { StoreProvider, useIsCollapsed, useOutlinePanelWidth, useSelectContext };

package/dist/likec4diagram/ui/sequence-outline/depth-of-field.d.ts

@@ -0,0 +1,21 @@
+import { SystemStyleObject } from '@likec4/styles/types';
+/** Distance, in nesting levels, between a level and the one the walkthrough stands on. */
+export declare const recessionOf: (depth: number, activeDepth: number) => number;
+/** Panel surface, shaded by the current `--seq-r`. */
+export declare const shadedPanelBg: SystemStyleObject;
+/** A row that has stepped back: lower contrast and saturation, restored on hover. */
+export declare const recessed: SystemStyleObject;
+/** A nesting level, as a full-bleed tonal band. Tone only — no border, no radius, no card. */
+export declare const levelBand: SystemStyleObject;
+/**
+ * A fragment nested *below* the level you are standing on: structure, not colour.
+ *
+ * Fills do not survive nesting — five levels of translucent fragment tint compound into mud,
+ * and a fragment you are not inside has no claim on the eye. Depth is carried by an indent and
+ * a hairline in the fragment's own colour; the tag pill and icon already say which kind it is.
+ */
+export declare const nestedBand: SystemStyleObject;
+/** The fragment you are standing inside, framed the way the canvas frames it. */
+export declare const activeFrame: SystemStyleObject;
+/** Hairline drawn around the fragment you are standing inside. */
+export declare const activeFrameBorder: string;

package/dist/likec4diagram/ui/sequence-outline/depth-of-field.js

@@ -0,0 +1,71 @@
+import "../../../_virtual/_rolldown/runtime.js";
+import { css } from "@likec4/styles/css";
+//#region src/likec4diagram/ui/sequence-outline/depth-of-field.ts
+/**
+* The outline reads as a stack of planes: the nesting level the walkthrough is standing on
+* renders at full strength, and every level *above* it steps back in contrast, saturation
+* and surface tone. `--seq-r` is that distance (0 = you are here, capped at {@link MAX_RECESSION}).
+*
+* The recession is relative, not absolute — it is recomputed as the walkthrough enters and
+* leaves a fragment, so stepping back out to the root flattens the panel again.
+*/
+var MAX_RECESSION = 3;
+/** Distance, in nesting levels, between a level and the one the walkthrough stands on. */
+var recessionOf = (depth, activeDepth) => Math.min(MAX_RECESSION, Math.max(0, activeDepth - depth));
+/** Per-level falloff, applied once per step of `--seq-r`. */
+var OPACITY_STEP = .26;
+var SATURATION_STEP = .286;
+/** Panel surface, shaded by the current `--seq-r`. */
+var shadedPanelBg = css.raw({ background: `[color-mix(in srgb, {colors.likec4.panel.bg}, #000 calc(var(--seq-r, 0) * 4.55%))]` });
+/** A row that has stepped back: lower contrast and saturation, restored on hover. */
+var recessed = css.raw({
+	opacity: `[calc(1 - var(--seq-r, 0) * ${OPACITY_STEP})]`,
+	filter: `[saturate(calc(1 - var(--seq-r, 0) * ${SATURATION_STEP}))]`,
+	_hover: {
+		opacity: "1",
+		filter: "[none]"
+	}
+});
+/** A nesting level, as a full-bleed tonal band. Tone only — no border, no radius, no card. */
+var levelBand = css.raw(shadedPanelBg, {
+	position: "relative",
+	marginInline: "-2",
+	paddingInline: "2",
+	marginBlock: "0.5",
+	transitionProperty: "background",
+	transition: "slow"
+});
+/**
+* A fragment nested *below* the level you are standing on: structure, not colour.
+*
+* Fills do not survive nesting — five levels of translucent fragment tint compound into mud,
+* and a fragment you are not inside has no claim on the eye. Depth is carried by an indent and
+* a hairline in the fragment's own colour; the tag pill and icon already say which kind it is.
+*/
+var nestedBand = css.raw({
+	background: "transparent",
+	marginInline: "0",
+	marginBlock: "0.5",
+	paddingInline: "0",
+	paddingLeft: "2",
+	borderLeft: "default",
+	borderLeftColor: "colorPalette.border",
+	rounded: "0"
+});
+/** The fragment you are standing inside, framed the way the canvas frames it. */
+var activeFrame = css.raw({
+	background: "[linear-gradient(var(--seq-frame-bg), var(--seq-frame-bg)), {colors.likec4.panel.bg}]",
+	paddingInline: "3",
+	paddingBlock: "1.5",
+	marginBlock: "0"
+});
+/** Hairline drawn around the fragment you are standing inside. */
+var activeFrameBorder = css({
+	position: "absolute",
+	inset: "[0 10px 0 4px]",
+	border: "[1px solid {colors.colorPalette.border}]",
+	rounded: "md",
+	pointerEvents: "none"
+});
+//#endregion
+export { activeFrame, activeFrameBorder, levelBand, nestedBand, recessed, recessionOf, shadedPanelBg };

package/dist/likec4diagram/ui/sequence-outline/index.d.ts

@@ -0,0 +1,2 @@
+export { SequenceOutlinePanel } from './SequenceOutlinePanel';
+export type { OutlineTreeNodeData, OutlineTreeNodeFlow, OutlineTreeNodes, OutlineTreeNodeStep } from './types';

package/dist/likec4diagram/ui/sequence-outline/motion.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Shared-layout transitions. The frame, the card and the badge each carry a `layoutId`, so
+ * walking a step moves one element rather than swapping two — the frame travels to the branch
+ * you entered and the card slides to the step you landed on. House easing, one exponential
+ * ease-out; `MotionConfig` already drops these under reduced motion and reduced graphics.
+ */
+export declare const SEQ_TRANSITION: {
+    readonly duration: 0.24;
+    readonly ease: readonly [0.2, 0.8, 0.2, 1];
+};
+export declare const SEQ_FRAME_LAYOUT_ID = "likec4-seq-active-frame";
+export declare const SEQ_CARD_LAYOUT_ID = "likec4-seq-active-card";
+export declare const SEQ_BADGE_LAYOUT_ID = "likec4-seq-active-badge";

package/dist/likec4diagram/ui/sequence-outline/motion.js

@@ -0,0 +1,21 @@
+//#region src/likec4diagram/ui/sequence-outline/motion.ts
+/**
+* Shared-layout transitions. The frame, the card and the badge each carry a `layoutId`, so
+* walking a step moves one element rather than swapping two — the frame travels to the branch
+* you entered and the card slides to the step you landed on. House easing, one exponential
+* ease-out; `MotionConfig` already drops these under reduced motion and reduced graphics.
+*/
+var SEQ_TRANSITION = {
+	duration: .24,
+	ease: [
+		.2,
+		.8,
+		.2,
+		1
+	]
+};
+var SEQ_FRAME_LAYOUT_ID = "likec4-seq-active-frame";
+var SEQ_CARD_LAYOUT_ID = "likec4-seq-active-card";
+var SEQ_BADGE_LAYOUT_ID = "likec4-seq-active-badge";
+//#endregion
+export { SEQ_BADGE_LAYOUT_ID, SEQ_CARD_LAYOUT_ID, SEQ_FRAME_LAYOUT_ID, SEQ_TRANSITION };

package/dist/likec4diagram/ui/sequence-outline/presentation.d.ts

@@ -0,0 +1,10 @@
+import { DynamicViewFlow } from '@likec4/core';
+import { IconRepeat } from '@tabler/icons-react';
+export type FlowType = DynamicViewFlow.SubFlowType;
+export type FlowPresentation = {
+    readonly paletteClass: string;
+    readonly tag: string;
+    readonly Icon: typeof IconRepeat;
+};
+/** How each sub-flow operator is labelled and coloured in the outline. */
+export declare const flowPresentation: Record<FlowType, FlowPresentation>;