@likec4/diagram 1.59.4 → 1.61.0

package/dist/likec4diagram/ui/notation/index.d.ts

@@ -1 +0,0 @@
-export { NotationPanel as default } from './NotationPanel';

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

@@ -1,9 +0,0 @@
-import { OutlineTreeNodes } from './types';
-/**
- * Sticky "you are here" trail: the fragments the active step is nested inside.
- * Each segment jumps the walkthrough to the first step of that fragment.
- */
-export declare const ActiveTrail: ({ ancestors, tree }: {
-    ancestors: readonly string[];
-    tree: OutlineTreeNodes;
-}) => import("react").JSX.Element | null;

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

@@ -1,81 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../../../hooks/safeContext.js";
-import { flowPresentation } from "./presentation.js";
-import { collectTrail, firstStepOf } from "./tree.js";
-import { IconChevronRight } from "@tabler/icons-react";
-import { Fragment } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { HStack, styled } from "@likec4/styles/jsx";
-//#region src/likec4diagram/ui/sequence-outline/ActiveTrail.tsx
-/**
-* Sticky "you are here" trail: the fragments the active step is nested inside.
-* Each segment jumps the walkthrough to the first step of that fragment.
-*/
-var ActiveTrail = ({ ancestors, tree }) => {
-	const diagram = useDiagram();
-	const trail = collectTrail(tree, ancestors);
-	if (trail.length === 0) return null;
-	return /* @__PURE__ */ jsx(HStack, {
-		css: {
-			gap: "1",
-			flexWrap: "wrap",
-			marginBottom: "1.5",
-			paddingInline: "2.5",
-			paddingBlock: "1.5",
-			bg: "likec4.panel.bg",
-			borderBottom: "panel",
-			textStyle: "dimmed.xxs",
-			fontWeight: "semibold",
-			letterSpacing: "caps.sm",
-			textTransform: "uppercase",
-			userSelect: "none",
-			"& svg": {
-				flex: "none",
-				opacity: "[0.5]"
-			}
-		},
-		children: trail.map((node, i) => {
-			const { paletteClass, tag } = flowPresentation[node.nodeProps.type];
-			const label = node.nodeProps.title ? `${tag} ${node.nodeProps.title}` : tag;
-			const last = i === trail.length - 1;
-			const firstStep = firstStepOf(node.children);
-			return /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx(IconChevronRight, { size: 10 }), /* @__PURE__ */ jsx(styled.button, {
-				type: "button",
-				className: last ? paletteClass : void 0,
-				title: `Jump to the first step of ${label}`,
-				disabled: !firstStep,
-				onClick: () => firstStep && diagram.walkthroughStep({ step: firstStep }),
-				css: {
-					appearance: "none",
-					border: "none",
-					background: "transparent",
-					padding: "0",
-					font: "inherit",
-					letterSpacing: "[inherit]",
-					textTransform: "inherit",
-					cursor: "pointer",
-					rounded: "sm",
-					transitionProperty: "colors",
-					transition: "fast",
-					maxWidth: "[200px]",
-					truncate: true,
-					...last ? {
-						fontWeight: "extrabold",
-						color: "colorPalette.text"
-					} : {
-						color: "inherit",
-						_hover: { color: "text" }
-					},
-					_disabled: { cursor: "default" },
-					_focusVisible: {
-						outline: "[2px solid {colors.primary.border}]",
-						outlineOffset: "[2px]"
-					}
-				},
-				children: label
-			})] }, node.value);
-		})
-	});
-};
-//#endregion
-export { ActiveTrail };

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

@@ -1,11 +0,0 @@
-import { OutlineTreeNodeFlow } from './types';
-import { StyledComponent } from '@likec4/styles/types';
-export declare const FlowTag: StyledComponent<"div", {
-    dimmed?: boolean | undefined;
-}>;
-/** The header line of a sub-flow: its icon, title and operator tag. */
-export declare const FlowRow: ({ node, recession, isCollapsed }: {
-    node: OutlineTreeNodeFlow;
-    recession: number;
-    isCollapsed?: boolean;
-}) => import("react").JSX.Element;

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

@@ -1,70 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { flowPresentation } from "./presentation.js";
-import { recessed } from "./depth-of-field.js";
-import { css, cva } from "@likec4/styles/css";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { m } from "motion/react";
-import { styled } from "@likec4/styles/jsx";
-import { hstack } from "@likec4/styles/patterns";
-//#region src/likec4diagram/ui/sequence-outline/FlowRow.tsx
-/** Small pill tag for the sub-flow operator (`loop`, `par`, `try`, …). */
-var flowTagBase = cva({
-	base: {
-		flex: "none",
-		paddingInline: "1.5",
-		paddingBlock: "0.5",
-		rounded: "sm",
-		bg: "colorPalette.label",
-		color: "colorPalette.text",
-		fontSize: "[9px]",
-		fontWeight: "bold",
-		lineHeight: "xs",
-		letterSpacing: "tight",
-		textTransform: "uppercase",
-		userSelect: "none"
-	},
-	variants: { dimmed: { true: { opacity: "0.7" } } }
-});
-var FlowTag = styled("div", flowTagBase);
-/** The header line of a sub-flow: its icon, title and operator tag. */
-var FlowRow = ({ node, recession, isCollapsed }) => {
-	const { tag, Icon } = flowPresentation[node.nodeProps.type];
-	return /* @__PURE__ */ jsxs(m.div, {
-		layout: true,
-		className: hstack(css.raw(recessed, {
-			alignItems: "center",
-			gap: "1.5",
-			marginTop: "2",
-			marginBottom: "0.5",
-			paddingInline: "1.5",
-			paddingBlock: "0.5",
-			color: "text",
-			userSelect: "none"
-		}, isCollapsed ? { bg: "colorPalette.label" } : void 0)),
-		style: { ["--seq-r"]: recession },
-		children: [
-			/* @__PURE__ */ jsx(Icon, {
-				size: 13,
-				className: css({
-					flex: "none",
-					color: "colorPalette.text"
-				})
-			}),
-			/* @__PURE__ */ jsx(styled.span, {
-				css: {
-					flex: "1",
-					minWidth: "0",
-					fontSize: "xs",
-					fontWeight: "medium",
-					whiteSpace: "nowrap",
-					overflow: "hidden",
-					textOverflow: "ellipsis"
-				},
-				children: node.nodeProps.title ?? tag
-			}),
-			/* @__PURE__ */ jsx(FlowTag, { children: tag })
-		]
-	});
-};
-//#endregion
-export { FlowRow, FlowTag };

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

@@ -1,2 +0,0 @@
-/** Prev/next controls, the "you are here" trail, and the scrollable outline itself. */
-export declare const OutlineBody: () => import("react").JSX.Element;

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

@@ -1,106 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../../../hooks/safeContext.js";
-import { ActiveTrail } from "./ActiveTrail.js";
-import { recessionOf, shadedPanelBg } from "./depth-of-field.js";
-import { useSelectContext } from "./StoreProvider.js";
-import { OutlineNodes } from "./OutlineNodes.js";
-import { css } from "@likec4/styles/css";
-import { IconPlayerSkipBackFilled, IconPlayerSkipForwardFilled } from "@tabler/icons-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import "remeda";
-import "@likec4/core";
-import { Button, ScrollArea } from "@mantine/core";
-import "motion/react";
-import { HStack, styled } from "@likec4/styles/jsx";
-//#region src/likec4diagram/ui/sequence-outline/OutlineBody.tsx
-/** Prev/next controls, the "you are here" trail, and the scrollable outline itself. */
-var OutlineBody = () => {
-	const { activeStep, next, prev, tree, ancestors } = useSelectContext((s) => ({
-		activeStep: s.activeStep,
-		prev: s.prev,
-		next: s.next,
-		tree: s.outlineTree,
-		ancestors: s.ancestors
-	}));
-	const diagram = useDiagram();
-	const activeDepth = ancestors.length;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsxs(HStack, {
-			css: {
-				justifyContent: "space-between",
-				alignItems: "center",
-				width: "100%",
-				paddingInline: "2.5",
-				paddingTop: "2",
-				paddingBottom: "1"
-			},
-			children: [
-				/* @__PURE__ */ jsx(styled.div, {
-					css: {
-						flex: "1",
-						textStyle: "dimmed.xs",
-						fontWeight: "semibold",
-						letterSpacing: "caps.sm",
-						textTransform: "uppercase",
-						userSelect: "none"
-					},
-					children: "Outline"
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					tabIndex: -1,
-					size: "compact-xs",
-					variant: "light",
-					className: css({ fontSize: "xxs" }),
-					leftSection: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, { size: 10 }),
-					onClick: () => prev && diagram.walkthroughStep({ step: prev }),
-					disabled: !prev,
-					children: "Back"
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					tabIndex: -1,
-					size: "compact-xs",
-					variant: "light",
-					className: css({ fontSize: "xxs" }),
-					rightSection: /* @__PURE__ */ jsx(IconPlayerSkipForwardFilled, { size: 10 }),
-					onClick: () => next && diagram.walkthroughStep({ step: next }),
-					disabled: !next,
-					children: "Next"
-				})
-			]
-		}),
-		/* @__PURE__ */ jsx(ActiveTrail, {
-			ancestors,
-			tree
-		}),
-		/* @__PURE__ */ jsx(ScrollArea, {
-			type: "auto",
-			overscrollBehavior: "contain",
-			scrollbars: "y",
-			offsetScrollbars: "present",
-			className: css({
-				flex: "1",
-				width: "100%",
-				minHeight: "0"
-			}),
-			classNames: { viewport: css(shadedPanelBg, {
-				paddingInline: "2",
-				paddingBottom: "4",
-				transitionProperty: "background",
-				transition: "slow"
-			}) },
-			style: {
-				["--seq-r"]: recessionOf(0, activeDepth),
-				["--seq-badge-bg"]: "var(--colors-primary-body)",
-				["--seq-badge-fg"]: "var(--colors-primary-text)"
-			},
-			children: /* @__PURE__ */ jsx(OutlineNodes, {
-				nodes: tree,
-				depth: 0,
-				activeStep,
-				activeDepth
-			})
-		})
-	] });
-};
-//#endregion
-export { OutlineBody };

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

@@ -1,2 +0,0 @@
-/** View title, walkthrough progress and the (optional) view description. */
-export declare const OutlineHeader: () => import("react").JSX.Element;

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

@@ -1,140 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../../../hooks/safeContext.js";
-import { Markdown } from "../../../base-primitives/Markdown.js";
-import { useSelectContext } from "./StoreProvider.js";
-import { css } from "@likec4/styles/css";
-import { IconDirectionSignFilled } from "@tabler/icons-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { RichText } from "@likec4/core";
-import { CloseButton, Spoiler } from "@mantine/core";
-import { Box as Box$1, HStack, Txt, VStack, styled } from "@likec4/styles/jsx";
-//#region src/likec4diagram/ui/sequence-outline/OutlineHeader.tsx
-/** View title, walkthrough progress and the (optional) view description. */
-var OutlineHeader = () => {
-	const diagram = useDiagram();
-	const { title, description, stepnum, stepCount } = useSelectContext((s) => ({
-		title: s.title,
-		description: s.description,
-		stepnum: s.stepNum,
-		stepCount: s.flow.steps.length
-	}));
-	const pad = String(stepCount).length;
-	return /* @__PURE__ */ jsxs(VStack, {
-		css: {
-			gap: "2.5",
-			width: "100%",
-			paddingInline: "2.5",
-			paddingBlock: "2",
-			borderBottom: "panel"
-		},
-		children: [/* @__PURE__ */ jsxs(HStack, {
-			css: {
-				gap: "2.5",
-				alignItems: "flex-start",
-				width: "100%",
-				padding: "0"
-			},
-			children: [
-				/* @__PURE__ */ jsx(Box$1, {
-					css: {
-						flex: "none",
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "center",
-						boxSize: "[20px]",
-						rounded: "sm",
-						colorPalette: "subflow.loop",
-						bg: "colorPalette.label",
-						color: "colorPalette.text"
-					},
-					children: /* @__PURE__ */ jsx(IconDirectionSignFilled, { size: 14 })
-				}),
-				/* @__PURE__ */ jsxs(VStack, {
-					css: {
-						gap: "0",
-						alignItems: "stretch",
-						flex: "1",
-						minWidth: "0"
-					},
-					children: [
-						/* @__PURE__ */ jsx(styled.div, {
-							css: {
-								fontSize: "sm",
-								fontWeight: "semibold",
-								color: "text",
-								whiteSpace: "nowrap",
-								overflow: "hidden",
-								textOverflow: "ellipsis"
-							},
-							children: title ?? "Sequence"
-						}),
-						/* @__PURE__ */ jsxs(styled.div, {
-							css: {
-								marginTop: "0.5",
-								textStyle: "dimmed.xxs",
-								fontWeight: "medium",
-								letterSpacing: "caps.sm",
-								textTransform: "uppercase",
-								fontVariantNumeric: "tabular-nums",
-								userSelect: "none"
-							},
-							children: [
-								"Step ",
-								String(stepnum).padStart(pad, "0"),
-								" / ",
-								stepCount
-							]
-						}),
-						/* @__PURE__ */ jsx(Box$1, {
-							css: {
-								height: "[2px]",
-								marginTop: "1.5",
-								rounded: "xs",
-								bg: "border.subtle",
-								overflow: "hidden"
-							},
-							children: /* @__PURE__ */ jsx(styled.div, {
-								css: {
-									height: "100%",
-									rounded: "xs",
-									bg: "primary.body",
-									transitionProperty: "[width]",
-									transition: "slow"
-								},
-								style: { width: `${stepnum / stepCount * 100}%` }
-							})
-						})
-					]
-				}),
-				/* @__PURE__ */ jsx(Box$1, {
-					css: {
-						flex: "none",
-						alignItems: "center",
-						justifyContent: "center"
-					},
-					children: /* @__PURE__ */ jsx(CloseButton, {
-						size: "sm",
-						onClick: () => diagram.stopWalkthrough()
-					})
-				})
-			]
-		}), description && /* @__PURE__ */ jsx(Spoiler, {
-			showLabel: /* @__PURE__ */ jsx(Txt, {
-				size: "xxs",
-				children: "show description"
-			}),
-			hideLabel: /* @__PURE__ */ jsx(Txt, {
-				size: "xxs",
-				children: "hide"
-			}),
-			maxHeight: 16,
-			children: /* @__PURE__ */ jsx(Markdown, {
-				value: RichText.from(description),
-				className: css({ color: "text.dimmed" }),
-				fontSize: "xxs"
-			})
-		})]
-	});
-};
-//#endregion
-export { OutlineHeader };

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

@@ -1,17 +0,0 @@
-import { StepPath } from '@likec4/core';
-import { OutlineTreeNodes } from './types';
-export type OutlineNodesProps = {
-    nodes: OutlineTreeNodes;
-    /** Nesting level of `nodes`, 0 at the root of the outline. */
-    depth: number;
-    activeStep: StepPath;
-    /** Nesting level the walkthrough currently stands on. */
-    activeDepth: number;
-};
-/**
- * Renders one nesting level of the outline, recursing into sub-flows.
- *
- * A fragment on the path to the active step is framed and tinted; every other level is
- * pushed back by {@link recessionOf}.
- */
-export declare function OutlineNodes(props: OutlineNodesProps): import("react").JSX.Element;

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

@@ -1,83 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { SEQ_TRANSITION } from "./motion.js";
-import { flowPresentation } from "./presentation.js";
-import { isOutlineFlowNode } from "./types.js";
-import { activeFrame, activeFrameBorder, levelBand, nestedBand, recessionOf } from "./depth-of-field.js";
-import { FlowRow } from "./FlowRow.js";
-import { StepRow } from "./StepRow.js";
-import { useIsCollapsed, useSelectContext } from "./StoreProvider.js";
-import { css, cx } from "@likec4/styles/css";
-import { Activity } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { m } from "motion/react";
-import "@likec4/styles/jsx";
-//#region src/likec4diagram/ui/sequence-outline/OutlineNodes.tsx
-function renderNodes({ nodes, depth, activeStep, activeDepth }) {
-	const recession = recessionOf(depth, activeDepth);
-	return nodes.map((node) => {
-		if (!isOutlineFlowNode(node)) return /* @__PURE__ */ jsx(StepRow, {
-			node,
-			recession,
-			active: node.value === activeStep
-		}, node.value);
-		return /* @__PURE__ */ jsx(OutlineFlowNode, {
-			node,
-			depth,
-			activeStep,
-			activeDepth
-		}, node.value);
-	});
-}
-/**
-* Renders one nesting level of the outline, recursing into sub-flows.
-*
-* A fragment on the path to the active step is framed and tinted; every other level is
-* pushed back by {@link recessionOf}.
-*/
-function OutlineNodes(props) {
-	return /* @__PURE__ */ jsx(Fragment$1, { children: renderNodes(props) });
-}
-function OutlineFlowNode({ node, depth, activeStep, activeDepth }) {
-	const recession = recessionOf(depth, activeDepth);
-	const isCollapsed = useIsCollapsed(node.value);
-	const ancestorIndex = useSelectContext((s) => s.ancestors.indexOf(node.value));
-	const onPath = ancestorIndex >= 0;
-	const myDepth = onPath ? ancestorIndex + 1 : depth;
-	const isCurrentLevel = activeDepth === myDepth;
-	const { paletteClass } = flowPresentation[node.nodeProps.type];
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx(paletteClass, css(levelBand, isCurrentLevel && !onPath && nestedBand, isCurrentLevel && onPath && activeFrame)),
-		style: {
-			["--seq-r"]: recessionOf(myDepth, activeDepth),
-			["--seq-frame-bg"]: "var(--colors-color-palette)",
-			["--seq-badge-bg"]: "var(--colors-color-palette-text)",
-			["--seq-badge-fg"]: "var(--colors-likec4-panel-bg)"
-		},
-		children: [
-			isCurrentLevel && onPath && /* @__PURE__ */ jsx(m.div, {
-				layoutId: "likec4-seq-active-frame",
-				layout: "position",
-				layoutAnchor: false,
-				layoutCrossfade: false,
-				className: activeFrameBorder,
-				transition: SEQ_TRANSITION
-			}),
-			/* @__PURE__ */ jsx(FlowRow, {
-				node,
-				isCollapsed,
-				recession
-			}),
-			/* @__PURE__ */ jsx(Activity, {
-				mode: isCollapsed ? "hidden" : "visible",
-				children: /* @__PURE__ */ jsx(OutlineNodes, {
-					nodes: node.children,
-					depth: myDepth,
-					activeStep,
-					activeDepth
-				})
-			})
-		]
-	});
-}
-//#endregion
-export { OutlineNodes };

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

@@ -1,6 +0,0 @@
-import { MemoExoticComponent } from 'react';
-/**
- * Side panel shown while a dynamic view walkthrough is running: the view title and progress,
- * the trail of fragments the current step sits in, and the outline of every step.
- */
-export declare const SequenceOutlinePanel: MemoExoticComponent<() => import("react").JSX.Element>;

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

@@ -1,64 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { PortalToContainer } from "../../../components/PortalToContainer.js";
-import { SEQ_TRANSITION } from "./motion.js";
-import { StoreProvider, useOutlinePanelWidth } from "./StoreProvider.js";
-import { OutlineBody } from "./OutlineBody.js";
-import { OutlineHeader } from "./OutlineHeader.js";
-import { memo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence, LayoutGroup, MotionConfig, m } from "motion/react";
-import { vstack } from "@likec4/styles/patterns";
-//#region src/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.tsx
-/**
-* Side panel shown while a dynamic view walkthrough is running: the view title and progress,
-* the trail of fragments the current step sits in, and the outline of every step.
-*/
-var SequenceOutlinePanel = memo(() => {
-	return /* @__PURE__ */ jsx(StoreProvider, { children: /* @__PURE__ */ jsx(PortalToContainer, { children: /* @__PURE__ */ jsx(MotionConfig, {
-		transition: SEQ_TRANSITION,
-		children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, {
-			propagate: true,
-			mode: "popLayout",
-			anchorY: "top",
-			children: /* @__PURE__ */ jsxs(SequenceOutlinePanelShell, { children: [/* @__PURE__ */ jsx(OutlineHeader, {}), /* @__PURE__ */ jsx(OutlineBody, {})] })
-		}) })
-	}) }) });
-});
-SequenceOutlinePanel.displayName = "SequenceOutlinePanel";
-var SequenceOutlinePanelShell = ({ children }) => {
-	const outlinePanelWidth = useOutlinePanelWidth();
-	return /* @__PURE__ */ jsx(m.div, {
-		layout: "position",
-		className: vstack({
-			position: "absolute",
-			top: "0",
-			left: "0",
-			layerStyle: "likec4.panel",
-			rounded: "0",
-			gap: "0",
-			padding: "0",
-			pointerEvents: "all",
-			maxWidth: "[85cqw]",
-			height: "100cqh",
-			maxHeight: "100cqh",
-			cursor: "default",
-			overflow: "hidden"
-		}),
-		style: { width: outlinePanelWidth },
-		initial: {
-			opacity: .5,
-			translateX: -40
-		},
-		animate: {
-			opacity: 1,
-			translateX: 0
-		},
-		exit: {
-			opacity: 0,
-			translateX: -40
-		},
-		children
-	});
-};
-//#endregion
-export { SequenceOutlinePanel };

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

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-/** The step number pill. The active one carries the shared `layoutId`, so it travels between steps. */
-export declare const StepBadge: ({ children, active }: {
-    children: ReactNode;
-    active?: boolean;
-}) => import("react").JSX.Element;
-/** Marks a step that carries notes, without letting the note reflow the list. */
-export declare const NotesDot: () => import("react").JSX.Element;

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

@@ -1,52 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { SEQ_BADGE_LAYOUT_ID, SEQ_TRANSITION } from "./motion.js";
-import { css } from "@likec4/styles/css";
-import { jsx } from "react/jsx-runtime";
-import { m } from "motion/react";
-import { Box } from "@likec4/styles/jsx";
-//#region src/likec4diagram/ui/sequence-outline/StepBadge.tsx
-var stepBadgeBase = css.raw({
-	flex: "none",
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "center",
-	minWidth: "[20px]",
-	height: "[18px]",
-	paddingInline: "1",
-	rounded: "sm",
-	bg: "surface.sunken",
-	color: "text.dimmed",
-	fontSize: "[10px]",
-	fontWeight: "bold",
-	fontVariantNumeric: "tabular-nums",
-	userSelect: "none"
-});
-var stepBadgeActive = css.raw(stepBadgeBase, {
-	minWidth: "[22px]",
-	height: "[20px]",
-	background: "[linear-gradient(var(--seq-badge-bg), var(--seq-badge-bg)), {colors.likec4.panel.bg}]",
-	color: "[var(--seq-badge-fg)]",
-	fontSize: "[11px]"
-});
-/** The step number pill. The active one carries the shared `layoutId`, so it travels between steps. */
-var StepBadge = ({ children, active }) => active ? /* @__PURE__ */ jsx(m.div, {
-	layoutId: SEQ_BADGE_LAYOUT_ID,
-	layout: "position",
-	transition: SEQ_TRANSITION,
-	className: css(stepBadgeActive),
-	children
-}) : /* @__PURE__ */ jsx("div", {
-	className: css(stepBadgeBase),
-	children
-});
-/** Marks a step that carries notes, without letting the note reflow the list. */
-var NotesDot = () => /* @__PURE__ */ jsx(Box, { css: {
-	flex: "none",
-	alignSelf: "flex-start",
-	boxSize: "[5px]",
-	marginTop: "[7px]",
-	rounded: "pill",
-	bg: "text.dimmed"
-} });
-//#endregion
-export { NotesDot, StepBadge };

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

@@ -1,7 +0,0 @@
-import { OutlineTreeNodeStep } from './types';
-/** A step the walkthrough is not on: one line, clickable, recessed with its level. */
-export declare function StepRow({ node, recession, active }: {
-    active: boolean;
-    node: OutlineTreeNodeStep;
-    recession: number;
-}): import("react").JSX.Element;