@likec4/diagram 1.59.2 → 1.59.4

package/dist/likec4diagram/state/machine.state.initializing.js

@@ -37,18 +37,21 @@ var initializing = machine.createStateConfig({ on: {
 */
 var isReady = machine.createStateConfig({ always: [{
 	guard: "isReady",
-	actions: [
-		fitDiagram({ duration: 0 }),
-		assign(({ context }) => ({ navigationHistory: {
+	actions: machine.enqueueActions(({ context, enqueue }) => {
+		enqueue(fitDiagram({
+			duration: 0,
+			zoom: context.initialZoom ?? (context.fitView ? void 0 : 1)
+		}));
+		enqueue(assign(({ context }) => ({ navigationHistory: {
 			currentIndex: 0,
 			history: [{
 				viewId: context.view.id,
 				viewport: { ...context.xyflow.getViewport() },
 				viewportChangedManually: false
 			}]
-		} })),
-		emitInitialized()
-	],
+		} })));
+		enqueue(emitInitialized());
+	}),
 	target: "ready"
 }, { target: "initializing" }] });
 //#endregion

package/dist/likec4diagram/state/machine.state.navigating.js

@@ -1,10 +1,10 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { roundDpr } from "../../utils/roundDpr.js";
 import { parsePaddings } from "../../utils/xyflow.js";
+import { convertToXYFlow } from "../convert-to-xyflow.js";
 import { calcViewportForBounds, findCorrespondingNode, findNodeByModelFqn, nodeRef, viewBounds } from "./utils.js";
 import { machine, targetState, to } from "./machine.setup.js";
 import { mergeXYNodesEdges } from "./assign.js";
-import { convertToXYFlow } from "../convert-to-xyflow.js";
 import { cancelFitDiagram, raiseSetViewport } from "./machine.actions.layout.js";
 import { disableCompareWithLatest } from "./machine.actions.js";
 import { isTruthy } from "remeda";

package/dist/likec4diagram/state/machine.state.ready.d.ts

@@ -1399,6 +1399,111 @@ export declare const ready: {
                 'key.arrow.down': {
                     actions: ActionFunction<Context, HotKeyEvent, Events, undefined, never, never, never, never, never>;
                 };
+                'sequence.flow.*': {
+                    actions: ActionFunction<Context, Events, Events, undefined, {
+                        src: "search";
+                        logic: SearchActorLogic;
+                        id: "search";
+                    } | {
+                        src: "hotkey";
+                        logic: HotkeyActorLogic;
+                        id: "hotkey";
+                    } | {
+                        src: "overlays";
+                        logic: OverlaysActorLogic;
+                        id: "overlays";
+                    } | {
+                        src: "mediaPrint";
+                        logic: MediaPrintActorLogic;
+                        id: "mediaPrint";
+                    } | {
+                        src: "editor";
+                        logic: EditorActorLogic;
+                        id: "editor";
+                    } | {
+                        src: "navigationPanel";
+                        logic: NavigationPanelActorLogic;
+                        id: "navigationPanel";
+                    }, never, {
+                        type: "isReady";
+                        params: unknown;
+                    } | {
+                        type: "enabled: Editor";
+                        params: unknown;
+                    } | {
+                        type: "enabled: FitView";
+                        params: unknown;
+                    } | {
+                        type: "enabled: FocusMode";
+                        params: unknown;
+                    } | {
+                        type: "enabled: Readonly";
+                        params: unknown;
+                    } | {
+                        type: "enabled: RelationshipDetails";
+                        params: unknown;
+                    } | {
+                        type: "enabled: Search";
+                        params: unknown;
+                    } | {
+                        type: "enabled: ElementDetails";
+                        params: unknown;
+                    } | {
+                        type: "enabled: OpenSource";
+                        params: unknown;
+                    } | {
+                        type: "enabled: DynamicViewWalkthrough";
+                        params: unknown;
+                    } | {
+                        type: "enabled: NavigationPanel";
+                        params: unknown;
+                    } | {
+                        type: "focus.node: autoUnfocus";
+                        params: unknown;
+                    } | {
+                        type: "enabled: Overlays";
+                        params: unknown;
+                    } | {
+                        type: "not readonly";
+                        params: unknown;
+                    } | {
+                        type: "is dynamic view";
+                        params: unknown;
+                    } | {
+                        type: "is dynamic view in sequence variant";
+                        params: unknown;
+                    } | {
+                        type: "is same view";
+                        params: unknown;
+                    } | {
+                        type: "is another view";
+                        params: unknown;
+                    } | {
+                        type: "click: node has modelFqn";
+                        params: unknown;
+                    } | {
+                        type: "click: selected node";
+                        params: unknown;
+                    } | {
+                        type: "click: same node";
+                        params: unknown;
+                    } | {
+                        type: "click: focused node";
+                        params: unknown;
+                    } | {
+                        type: "click: node.type = seq-subflow";
+                        params: unknown;
+                    } | {
+                        type: "click: node has connections";
+                        params: unknown;
+                    } | {
+                        type: "click: selected edge";
+                        params: unknown;
+                    } | {
+                        type: "click: active walkthrough step";
+                        params: unknown;
+                    }, never, EmittedEvents>[];
+                };
                 'walkthrough.step': {
                     actions: ActionFunction<Context, {
                         type: "walkthrough.step";
@@ -2460,8 +2565,8 @@ export declare const ready: {
             }, never, never, never, never>[];
         };
         'layout.resetManualLayout': {
-            guard: "not readonly";
-            actions: ActionFunction<Context, Events, Events, undefined, {
+            guard: "enabled: Editor";
+            actions: ( ActionFunction<Context, Events, Events, undefined, {
                 src: "search";
                 logic: SearchActorLogic;
                 id: "search";
@@ -2563,7 +2668,33 @@ export declare const ready: {
             } | {
                 type: "click: active walkthrough step";
                 params: unknown;
-            }, never, EmittedEvents>[];
+            }, never, EmittedEvents> | ActionFunction<Context, {
+                type: "layout.resetManualLayout";
+            }, Events, undefined, {
+                src: "search";
+                logic: SearchActorLogic;
+                id: "search";
+            } | {
+                src: "hotkey";
+                logic: HotkeyActorLogic;
+                id: "hotkey";
+            } | {
+                src: "overlays";
+                logic: OverlaysActorLogic;
+                id: "overlays";
+            } | {
+                src: "mediaPrint";
+                logic: MediaPrintActorLogic;
+                id: "mediaPrint";
+            } | {
+                src: "editor";
+                logic: EditorActorLogic;
+                id: "editor";
+            } | {
+                src: "navigationPanel";
+                logic: NavigationPanelActorLogic;
+                id: "navigationPanel";
+            }, never, never, never, never>)[];
         };
         'media.print.on': {
             target: string;

package/dist/likec4diagram/state/machine.state.ready.js

@@ -45,10 +45,11 @@ var ready = machine.createStateConfig({
 			]
 		},
 		"layout.resetManualLayout": {
-			guard: "not readonly",
+			guard: "enabled: Editor",
 			actions: [
 				cancelEditing(),
 				disableCompareWithLatest(),
+				assign({ viewportChangedManually: false }),
 				triggerChange({ op: "reset-manual-layout" })
 			]
 		},

package/dist/likec4diagram/state/machine.state.ready.walkthrough.d.ts

@@ -2,12 +2,12 @@ import { Types } from '../types';
 import { Context, Events, EmittedEvents } from './machine.setup';
 import { CancelAction, ActionFunction } from 'xstate';
 import { HotKeyEvent, HotkeyActorLogic } from './hotkeyActor';
-import { StepPath } from '@likec4/core';
 import { SearchActorLogic } from '../../search/searchActor';
 import { OverlaysActorLogic } from '../../overlays/overlaysActor';
 import { MediaPrintActorLogic } from './mediaPrintActor';
 import { EditorActorLogic } from '../../editor';
 import { NavigationPanelActorLogic } from '../../navigationpanel/actor';
+import { StepPath } from '@likec4/core';
 export declare const walkthrough: {
     id: string;
     entry: CancelAction<Context, Events, undefined, Events>[];
@@ -28,6 +28,111 @@ export declare const walkthrough: {
         'key.arrow.down': {
             actions: ActionFunction<Context, HotKeyEvent, Events, undefined, never, never, never, never, never>;
         };
+        'sequence.flow.*': {
+            actions: ActionFunction<Context, Events, Events, undefined, {
+                src: "search";
+                logic: SearchActorLogic;
+                id: "search";
+            } | {
+                src: "hotkey";
+                logic: HotkeyActorLogic;
+                id: "hotkey";
+            } | {
+                src: "overlays";
+                logic: OverlaysActorLogic;
+                id: "overlays";
+            } | {
+                src: "mediaPrint";
+                logic: MediaPrintActorLogic;
+                id: "mediaPrint";
+            } | {
+                src: "editor";
+                logic: EditorActorLogic;
+                id: "editor";
+            } | {
+                src: "navigationPanel";
+                logic: NavigationPanelActorLogic;
+                id: "navigationPanel";
+            }, never, {
+                type: "isReady";
+                params: unknown;
+            } | {
+                type: "enabled: Editor";
+                params: unknown;
+            } | {
+                type: "enabled: FitView";
+                params: unknown;
+            } | {
+                type: "enabled: FocusMode";
+                params: unknown;
+            } | {
+                type: "enabled: Readonly";
+                params: unknown;
+            } | {
+                type: "enabled: RelationshipDetails";
+                params: unknown;
+            } | {
+                type: "enabled: Search";
+                params: unknown;
+            } | {
+                type: "enabled: ElementDetails";
+                params: unknown;
+            } | {
+                type: "enabled: OpenSource";
+                params: unknown;
+            } | {
+                type: "enabled: DynamicViewWalkthrough";
+                params: unknown;
+            } | {
+                type: "enabled: NavigationPanel";
+                params: unknown;
+            } | {
+                type: "focus.node: autoUnfocus";
+                params: unknown;
+            } | {
+                type: "enabled: Overlays";
+                params: unknown;
+            } | {
+                type: "not readonly";
+                params: unknown;
+            } | {
+                type: "is dynamic view";
+                params: unknown;
+            } | {
+                type: "is dynamic view in sequence variant";
+                params: unknown;
+            } | {
+                type: "is same view";
+                params: unknown;
+            } | {
+                type: "is another view";
+                params: unknown;
+            } | {
+                type: "click: node has modelFqn";
+                params: unknown;
+            } | {
+                type: "click: selected node";
+                params: unknown;
+            } | {
+                type: "click: same node";
+                params: unknown;
+            } | {
+                type: "click: focused node";
+                params: unknown;
+            } | {
+                type: "click: node.type = seq-subflow";
+                params: unknown;
+            } | {
+                type: "click: node has connections";
+                params: unknown;
+            } | {
+                type: "click: selected edge";
+                params: unknown;
+            } | {
+                type: "click: active walkthrough step";
+                params: unknown;
+            }, never, EmittedEvents>[];
+        };
         'walkthrough.step': {
             actions: ActionFunction<Context, {
                 type: "walkthrough.step";

package/dist/likec4diagram/state/machine.state.ready.walkthrough.js

@@ -3,10 +3,10 @@ import { roundDpr } from "../../utils/roundDpr.js";
 import { Base } from "../../base/Base.js";
 import { machine, targetState, to } from "./machine.setup.js";
 import { assignViewportBefore, cancelFitDiagram, fitFocusedBounds, returnViewportBefore } from "./machine.actions.layout.js";
-import { assignLastClickedNode, cancelEditing, emitEdgeClick, emitPaneClick, resetLastClickedNode, resetSelection, startHotKeyActor, stopHotKeyActor, updateView } from "./machine.actions.js";
-import { clamp, firstBy, isNumber, map } from "remeda";
+import { assignLastClickedNode, cancelEditing, collapseOrExpandSequenceFlow, emitEdgeClick, emitPaneClick, resetLastClickedNode, resetSelection, startHotKeyActor, stopHotKeyActor, updateView } from "./machine.actions.js";
+import { clamp, find, firstBy, isNumber, map } from "remeda";
 import { invariant, nonNullable } from "@likec4/core";
-import { dynamicViewFlow as dynamicViewFlow$1, isDynamicView as isDynamicView$1, isStepPath as isStepPath$1, parentFlow } from "@likec4/core/types";
+import { dynamicViewFlow as dynamicViewFlow$1, flowAncestors as flowAncestors$1, flowHelpers, isDynamicView as isDynamicView$1, isDynamicViewWithFlow as isDynamicViewWithFlow$1, isStepPath as isStepPath$1, parentFlow } from "@likec4/core/types";
 import { assertEvent, enqueueActions } from "xstate";
 import { assign as assign$1, raise as raise$1 } from "xstate/actions";
 //#region src/likec4diagram/state/machine.state.ready.walkthrough.ts
@@ -15,10 +15,26 @@ var outlinePanelWidth = ({ activeWalkthrough, xystore }) => {
 	if (activeWalkthrough) return activeWalkthrough.outlinePanelWidth;
 	const { width } = xystore.getState();
 	return clamp(roundDpr(width * .3), {
-		min: 180,
-		max: 400
+		min: 240,
+		max: 500
 	});
 };
+var guardContext = (context) => {
+	const { activeWalkthrough, view } = context;
+	invariant(isDynamicViewWithFlow$1(view), "View must be a dynamic view with flows");
+	invariant(activeWalkthrough, "Active walkthrough must not be null");
+	return {
+		activeWalkthrough,
+		view
+	};
+};
+/**
+* Creates a predicate that checks if a step is collapsed based on the current state
+*/
+var isCollapsed = (context) => (step) => {
+	const path = flowHelpers.extractPath(step);
+	return context.collapsedSequenceFlows[path] ?? false;
+};
 var updateActiveWalkthroughState = () => machine.enqueueActions(({ context, enqueue }) => {
 	const { activeWalkthrough } = context;
 	if (!activeWalkthrough) {
@@ -86,6 +102,18 @@ var clearWalkthroughState = () => machine.assign(({ context }) => {
 		}))
 	};
 });
+var checkIfActiveStepCollapsed = () => machine.enqueueActions(({ context, enqueue }) => {
+	const { activeWalkthrough, view } = guardContext(context);
+	const checkIsCollapsed = isCollapsed(context);
+	if (!find(flowAncestors$1(activeWalkthrough.stepId), checkIsCollapsed)) return;
+	const { prev, next } = dynamicViewFlow$1(view).prevAndNext(activeWalkthrough.stepId, checkIsCollapsed);
+	const goToStep = prev ?? next;
+	if (!goToStep) return;
+	enqueue.raise({
+		type: "walkthrough.step",
+		stepId: goToStep
+	});
+});
 var emitWalkthroughStarted = () => machine.emit(({ context }) => {
 	return {
 		type: "walkthroughStarted",
@@ -147,13 +175,18 @@ var walkthrough = machine.createStateConfig({
 			type: "walkthrough.step",
 			direction: "next"
 		}) },
+		"sequence.flow.*": { actions: [
+			collapseOrExpandSequenceFlow(),
+			resetLastClickedNode(),
+			checkIfActiveStepCollapsed()
+		] },
 		"walkthrough.step": { actions: [enqueueActions(({ enqueue, context, event }) => {
 			let predicate;
 			const activeWalkthrough = nonNullable(context.activeWalkthrough, "walkthrough.step: activeWalkthrough is null");
 			if (event.direction) {
 				invariant(isDynamicView$1(context.view));
 				const { stepId } = activeWalkthrough;
-				const prevNext = dynamicViewFlow$1(context.view).prevAndNext(stepId, (flowId) => context.collapsedSequenceFlows[flowId] ?? false);
+				const prevNext = dynamicViewFlow$1(context.view).prevAndNext(stepId, isCollapsed(context));
 				predicate = (edge) => edge.data.id === prevNext[event.direction];
 			} else predicate = (edge) => edge.data.id === event.stepId;
 			const nextStepId = context.xyedges.find(predicate)?.data.id;
@@ -172,9 +205,9 @@ var walkthrough = machine.createStateConfig({
 			actions: [fitFocusedBounds(), emitEdgeClick()]
 		}, { actions: [
 			assign$1(({ event, context }) => {
-				invariant(event.edge.type === "seq-step", `Expected seq-step edge, but got "${event.edge.type}"`);
 				invariant(!!context.activeWalkthrough);
 				const stepId = event.edge.data.id;
+				invariant(isStepPath$1(stepId), `Expected step edge, but got "${stepId}"`);
 				return { activeWalkthrough: {
 					...context.activeWalkthrough,
 					stepId,

package/dist/likec4diagram/state/utils.d.ts

@@ -70,4 +70,4 @@ export declare function findCorrespondingNode(context: Pick<Context, 'lastOnNavi
     fromNode: Types.Node;
     toNode: Types.Node | null;
 };
-export declare function calcViewportForBounds(context: Pick<Context, 'xystore' | 'fitViewPadding'>, bounds: BBox): Viewport;
+export declare function calcViewportForBounds(context: Pick<Context, 'xystore' | 'fitViewPadding' | 'minZoom'>, bounds: BBox): Viewport;

package/dist/likec4diagram/state/utils.js

@@ -1,5 +1,4 @@
 import "../../_virtual/_rolldown/runtime.js";
-import { MinZoom } from "../../base/const.js";
 import { pickViewBounds } from "../../utils/view-bounds.js";
 import { BBox } from "@likec4/core/geometry";
 import { invariant, nonNullable, nonexhaustive } from "@likec4/core/utils";
@@ -56,7 +55,8 @@ function findDiagramEdge(ctx, xyedgeId) {
 * If {@link nextView} is provided, returns the bounds of the next view.
 */
 function viewBounds(ctx, nextView) {
-	return pickViewBounds(nextView ?? ctx.view, ctx.dynamicViewVariant);
+	const view = nextView ?? ctx.view;
+	return pickViewBounds(view, ctx.dynamicViewVariant);
 }
 function focusedBounds(params) {
 	const b = params.context.xynodes.reduce((acc, node) => {
@@ -107,7 +107,9 @@ function activeSequenceBounds(params) {
 			})
 		};
 	}
-	const actorsBounds = getNodesBounds([nonNullable(xystate.nodeLookup.get(stepEdge.source)), nonNullable(xystate.nodeLookup.get(stepEdge.target))], xystate);
+	const sourceNode = nonNullable(xystate.nodeLookup.get(stepEdge.source));
+	const targetNode = nonNullable(xystate.nodeLookup.get(stepEdge.target));
+	const actorsBounds = getNodesBounds([sourceNode, targetNode], xystate);
 	let stepBounds = edgeBounds ? BBox.merge(edgeBounds, actorsBounds) : actorsBounds;
 	return {
 		duration: 500,
@@ -157,7 +159,8 @@ function findCorrespondingNode(context, event) {
 }
 function calcViewportForBounds(context, bounds) {
 	let { width, height, transform } = context.xystore.getState();
-	return getViewportForBounds(bounds, width, height, MinZoom, Math.max(transform[2], 1), context.fitViewPadding);
+	const maxZoom = Math.max(transform[2], 1);
+	return getViewportForBounds(bounds, width, height, context.minZoom, maxZoom, context.fitViewPadding);
 }
 //#endregion
 export { activeSequenceBounds, calcViewportForBounds, findCorrespondingNode, findDiagramEdge, findDiagramNode, findNodeByModelFqn, focusedBounds, getEdgeBounds, nodeRef, typedSystem, viewBounds };

package/dist/likec4diagram/ui/FloatingSequenceActors.js

@@ -39,9 +39,10 @@ var selectActorNodes = selectXYStore((state) => {
 * Shows sequence actors at the top of the diagram, if current viewport does not fit them
 */
 function FloatingSequenceActors({ isActiveWalkthrough }) {
+	const ids = useXYStore(selectActorNodes);
 	return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, {
 		anchorY: "top",
-		children: useXYStore(selectActorNodes).map((id) => /* @__PURE__ */ jsx(SequenceActor, {
+		children: ids.map((id) => /* @__PURE__ */ jsx(SequenceActor, {
 			id,
 			top: isActiveWalkthrough ? 24 : 64
 		}, id))

package/dist/likec4diagram/ui/LayoutDriftFrame.js

@@ -1,17 +1,24 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.js";
-import { css } from "@likec4/styles/css";
+import { css, cx } from "@likec4/styles/css";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { UnstyledButton } from "@mantine/core";
 import { Box as Box$1 } from "@likec4/styles/jsx";
 import { hstack } from "@likec4/styles/patterns";
 //#region src/likec4diagram/ui/LayoutDriftFrame.tsx
+var borderColors = {
+	manual: css({ borderColor: "likec4.compare.manual" }),
+	auto: css({ borderColor: "likec4.compare.latest" })
+};
+var bgColors = {
+	manual: css({ backgroundColor: "likec4.compare.manual" }),
+	auto: css({ backgroundColor: "likec4.compare.latest" })
+};
 var LayoutDriftFrame = memo(() => {
-	const [{ layout, isActive }, { toggleCompare }] = useDiagramCompareLayout();
-	const bgColor = layout === "manual" ? "var(--mantine-color-orange-6)" : "var(--mantine-color-green-6)";
+	const [{ layout, state }, { toggleCompare }] = useDiagramCompareLayout();
 	return /* @__PURE__ */ jsx(Box$1, {
-		className: hstack({
+		className: cx(hstack({
 			position: "absolute",
 			top: "0",
 			left: "0",
@@ -22,14 +29,13 @@ var LayoutDriftFrame = memo(() => {
 			pointerEvents: "none",
 			alignItems: "flex-start",
 			justifyContent: "center"
-		}),
+		}), borderColors[layout]),
 		style: {
 			zIndex: "9999",
-			display: !isActive ? "none" : void 0,
-			borderColor: bgColor
+			display: state == "inactive" ? "none" : void 0
 		},
 		children: /* @__PURE__ */ jsx(Btn, {
-			style: { backgroundColor: bgColor },
+			className: bgColors[layout],
 			onClick: (e) => {
 				e.stopPropagation();
 				toggleCompare();
@@ -38,7 +44,7 @@ var LayoutDriftFrame = memo(() => {
 		})
 	});
 });
-var Btn = UnstyledButton.withProps({ className: css({
+var Btn = UnstyledButton.withProps({ classNames: { root: css({
 	fontSize: "xs",
 	fontWeight: "medium",
 	py: "1.5",
@@ -50,6 +56,6 @@ var Btn = UnstyledButton.withProps({ className: css({
 	color: "mantine.gray[9]",
 	pointerEvents: "all",
 	_active: { transform: "translateY(-3px)" }
-}) });
+}) } });
 //#endregion
 export { LayoutDriftFrame };

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

@@ -1,4 +1,4 @@
 export { FloatingSequenceActors } from './FloatingSequenceActors';
 export { LayoutDriftFrame } from './LayoutDriftFrame';
 export { NotationPanel } from './notation/NotationPanel';
-export { SequenceOutlinePanel } from './sequence-outline/SequenceOutlinePanel';
+export { SequenceOutlinePanel } from './sequence-outline';

package/dist/likec4diagram/ui/notation/NotationPanel.css.js

@@ -17,37 +17,35 @@ var icon = css({
 var card = css({
 	cursor: "default",
 	userSelect: "none",
-	minWidth: 200,
-	maxWidth: "calc(100vw - 20px)",
+	minWidth: "[200px]",
+	maxWidth: "[calc(100vw - 20px)]",
 	backgroundColor: `surface.default/80`,
 	sm: {
-		minWidth: 300,
-		maxWidth: `65vw`
+		minWidth: "[300px]",
+		maxWidth: `[65vw]`
 	},
-	md: { maxWidth: `40vw` },
-	_dark: { backgroundColor: `mantine.dark[6]/80` }
+	md: { maxWidth: `[40vw]` }
 });
 var tabPanel = css({ padding: "xxs" });
 var elementNotation = css({
 	backgroundColor: "transparent",
-	transition: "all 100ms ease-in",
+	transition: "[all 100ms ease-in]",
 	_hover: {
-		transition: "all 120ms ease-out",
-		backgroundColor: `mantine.primary[2]/50`
-	},
-	_dark: { _hover: { backgroundColor: `mantine.dark[3]/40` } }
+		transition: "[all 120ms ease-out]",
+		backgroundColor: `surface.hover`
+	}
 });
 css({
 	fill: "var(--likec4-palette-fill)",
 	stroke: "var(--likec4-palette-stroke)",
-	strokeWidth: 1,
+	strokeWidth: "[1px]",
 	overflow: "visible",
 	width: "100%",
 	height: "auto",
-	filter: `
+	filter: `[
     drop-shadow(0 2px 3px rgb(0 0 0 / 22%))
     drop-shadow(0 1px 8px rgb(0 0 0 / 10%))
-  `
+  ]`
 });
 var shapeBadge = css({
 	fontWeight: "medium",
@@ -55,7 +53,7 @@ var shapeBadge = css({
 	paddingTop: "0",
 	paddingBottom: "0",
 	textTransform: "lowercase",
-	transition: "all 150ms ease-in-out",
+	transition: "[all 150ms ease-in-out]",
 	cursor: "pointer",
 	["--badge-radius"]: "2px",
 	["--badge-fz"]: "9.5px",