@likec4/diagram 1.59.3 → 1.59.4

package/dist/navigationpanel/windows/ViewDetailsWindow.js

@@ -0,0 +1,379 @@
+import "../../_virtual/_rolldown/runtime.js";
+import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.js";
+import { useUpdateEffect as useUpdateEffect$1 } from "../../hooks/useUpdateEffect.js";
+import { stopPropagation } from "../../utils/xyflow.js";
+import { IfEnabled, useEnabledFeatures } from "../../context/DiagramFeatures.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { useCurrentViewModel } from "../../hooks/useCurrentViewModel.js";
+import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.js";
+import { PanelActionIcon } from "../_common.js";
+import { Markdown } from "../../base-primitives/Markdown.js";
+import { EmptyBox } from "../../components/EmptyBox.js";
+import { Link } from "../../components/Link.js";
+import { ViewIcon } from "../../components/ViewIcon.js";
+import { css, cx } from "@likec4/styles/css";
+import { IconChevronDown, IconFileSymlink, IconInfoCircle } from "@tabler/icons-react";
+import { useEffect, useEffectEvent, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useIsMounted } from "@react-hookz/web";
+import { Button, DataList, Divider, Loader, Menu, Pill, ScrollArea, TagsInput, Textarea, Tooltip } from "@mantine/core";
+import { useToggle, useUncontrolled } from "@mantine/hooks";
+import "@likec4/core/types";
+import { Box as Box$1, HStack, Txt, VStack, styled } from "@likec4/styles/jsx";
+//#region src/navigationpanel/windows/ViewDetailsWindow.tsx
+var SectionHeader = styled("div", { base: {
+	fontSize: "xs",
+	color: "text.non-essential",
+	fontWeight: "medium",
+	userSelect: "none",
+	lineHeight: "snug"
+} });
+function ViewDetailsWindow() {
+	const viewModel = useCurrentViewModel();
+	const diagram = useDiagram();
+	const { enableReadOnly } = useEnabledFeatures();
+	const title = viewModel.titleOrUntitled;
+	const description = viewModel.description;
+	const tags = viewModel.tags;
+	const alltags = viewModel.$model.tagsFromSpecification;
+	const links = viewModel.links;
+	const changeTitle = (title) => {
+		if (viewModel.folder && !viewModel.folder.isRoot) title = viewModel.folder.path + " / " + title;
+		diagram.triggerChange({
+			op: "change-property",
+			title
+		});
+	};
+	const changeTags = (nextTags) => {
+		if (nextTags.length === tags.length && nextTags.every((t) => tags.includes(t))) return;
+		diagram.triggerChange({
+			op: "change-property",
+			tags: nextTags
+		});
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs(VStack, {
+			style: { flex: "0" },
+			p: "1",
+			gap: "sm",
+			className: "drag-handle",
+			children: [
+				/* @__PURE__ */ jsxs(HStack, {
+					gap: "2",
+					alignItems: "baseline",
+					children: [
+						/* @__PURE__ */ jsx(Box$1, {
+							style: {
+								flex: "0",
+								fontSize: 24,
+								lineHeight: 1
+							},
+							children: /* @__PURE__ */ jsx(ViewIcon, {
+								type: viewModel._type,
+								size: 22
+							})
+						}),
+						/* @__PURE__ */ jsx(Box$1, {
+							style: { flex: "1" },
+							children: /* @__PURE__ */ jsx(EditableTitle, {
+								viewTitle: title,
+								readOnly: enableReadOnly,
+								onChange: changeTitle
+							})
+						}),
+						/* @__PURE__ */ jsx(HStack, {
+							gap: "1",
+							flexWrap: "nowrap",
+							style: {
+								fontSize: 24,
+								lineHeight: 1
+							},
+							alignItems: "baseline",
+							children: /* @__PURE__ */ jsx(IfEnabled, {
+								feature: "Vscode",
+								children: /* @__PURE__ */ jsx(PanelActionIcon, {
+									variant: "filled",
+									size: "sm",
+									onClick: (e) => {
+										e.stopPropagation();
+										const viewId = diagram.currentView.id;
+										diagram.openSource({ view: viewId });
+									},
+									children: /* @__PURE__ */ jsx(IconFileSymlink, { style: {
+										width: "70%",
+										height: "70%"
+									} })
+								})
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs(DataList, {
+					size: "xs",
+					gap: "sm",
+					orientation: "horizontal",
+					labelWidth: 50,
+					children: [
+						viewModel.hasManualLayout && /* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: "Layout" }), /* @__PURE__ */ jsx(DataList.ItemValue, { children: /* @__PURE__ */ jsx(ManualLayoutState, {}) })] }),
+						alltags.length > 0 && /* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: "Tags" }), /* @__PURE__ */ jsxs(DataList.ItemValue, { children: [(tags.length > 0 || !enableReadOnly) && /* @__PURE__ */ jsx(EditableTags, {
+							alltags,
+							tags,
+							readOnly: enableReadOnly,
+							onChange: changeTags
+						}), tags.length === 0 && enableReadOnly && /* @__PURE__ */ jsx(Txt, {
+							size: "xs",
+							color: "text.non-essential",
+							children: "No tags"
+						})] })] }),
+						/* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: "Links" }), /* @__PURE__ */ jsx(DataList.ItemValue, {
+							className: "nodrag",
+							children: /* @__PURE__ */ jsxs(HStack, {
+								gap: "xxs",
+								flexWrap: "wrap",
+								children: [links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, `${i}-${link.url}`)), links.length === 0 && /* @__PURE__ */ jsx(Txt, {
+									size: "xs",
+									color: "text.non-essential",
+									children: "No links"
+								})]
+							})
+						})] })
+					]
+				}),
+				/* @__PURE__ */ jsx(Divider, {
+					label: /* @__PURE__ */ jsx(SectionHeader, { children: "Description" }),
+					labelPosition: "left",
+					mt: "xxs",
+					mb: "xs"
+				})
+			]
+		}),
+		description.isEmpty && /* @__PURE__ */ jsx(EmptyBox, {
+			flex: "1",
+			m: "1",
+			children: "No description"
+		}),
+		description.nonEmpty && /* @__PURE__ */ jsx(ScrollArea, {
+			style: { flex: 1 },
+			scrollbars: "y",
+			overscrollBehavior: "contain",
+			children: /* @__PURE__ */ jsx(Box$1, {
+				px: "1",
+				children: /* @__PURE__ */ jsx(Markdown, { value: description })
+			})
+		})
+	] });
+}
+function EditableTitle({ viewTitle, readOnly, onChange }) {
+	const [isEditing, toggle] = useToggle();
+	const initialValue = useRef(viewTitle);
+	const [_value, handleChange] = useUncontrolled({ defaultValue: viewTitle });
+	useEffect(() => {
+		initialValue.current = viewTitle;
+		handleChange(viewTitle);
+	}, [viewTitle]);
+	return /* @__PURE__ */ jsx(Textarea, {
+		size: "xs",
+		radius: "xs",
+		autosize: true,
+		minRows: 1,
+		wrap: "soft",
+		maxRows: 5,
+		variant: "unstyled",
+		value: _value,
+		onChange: (e) => handleChange(e.target.value),
+		readOnly,
+		tabIndex: readOnly ? -1 : void 0,
+		onFocus: (e) => {
+			toggle(true);
+			const length = _value.length;
+			e.currentTarget.setSelectionRange(length, null);
+		},
+		onBlur: () => {
+			toggle(false);
+			handleChange(initialValue.current);
+		},
+		onKeyDownCapture: (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				e.currentTarget.blur();
+				return;
+			}
+			if (e.key === "Enter" && !(e.getModifierState("Shift") || e.getModifierState("Meta") || e.getModifierState("Control"))) {
+				e.preventDefault();
+				initialValue.current = _value;
+				onChange(_value);
+				e.currentTarget.blur();
+				return;
+			}
+		},
+		className: !readOnly ? "nodrag" : void 0,
+		classNames: { input: cx(css({
+			textStyle: "h5",
+			color: "text.bright",
+			padding: "1",
+			border: "default",
+			borderColor: "transparent"
+		}), readOnly && css({ cursor: "inherit" }), !readOnly && !isEditing && css({ cursor: "pointer" }), !readOnly && css({
+			_hover: { backgroundColor: "surface.field.hover" },
+			_focus: {
+				outline: "outline",
+				backgroundColor: "surface.field"
+			}
+		})) }
+	});
+}
+function EditableTags({ alltags, tags, readOnly, onChange }) {
+	const [isApplying, toggleApplying] = useToggle();
+	const [value, handleChange] = useUncontrolled({ defaultValue: [...tags] });
+	const hasChanges = value.length !== tags.length || value.some((v) => !tags.includes(v));
+	const revert = useEffectEvent(() => {
+		handleChange([...tags]);
+		toggleApplying(false);
+	});
+	useUpdateEffect$1(() => {
+		revert();
+	}, [tags]);
+	useUpdateEffect$1(() => {
+		if (isApplying && !hasChanges) toggleApplying(false);
+	}, [hasChanges, isApplying]);
+	useEffect(() => {
+		if (readOnly) revert();
+	}, [readOnly]);
+	const commitChanges = useEffectEvent(() => {
+		toggleApplying(true);
+		onChange(value);
+	});
+	const canAdd = !readOnly && value.length < alltags.length;
+	const notCommitted = !readOnly && hasChanges;
+	return /* @__PURE__ */ jsxs(VStack, {
+		gap: "2",
+		children: [/* @__PURE__ */ jsx(TagsInput, {
+			variant: "unstyled",
+			size: "xs",
+			acceptValueOnBlur: false,
+			readOnly,
+			data: alltags,
+			value,
+			onChange: (value) => {
+				handleChange(value.filter((v) => alltags.includes(v)));
+			},
+			classNames: {
+				wrapper: "nodrag",
+				input: cx(!readOnly && css({
+					py: "1",
+					_hover: { backgroundColor: "surface.field.hover" },
+					_focus: {
+						outline: "outline",
+						backgroundColor: "surface.field"
+					}
+				})),
+				inputField: css({
+					py: "1",
+					minWidth: "[40px]"
+				})
+			},
+			comboboxProps: {
+				withinPortal: false,
+				offset: 2
+			},
+			placeholder: canAdd ? "Add tag..." : "",
+			renderPill: ({ value, onRemove }) => /* @__PURE__ */ jsx(Pill, {
+				size: "xs",
+				withRemoveButton: !readOnly,
+				onRemove,
+				radius: "xs",
+				"data-likec4-tag": value,
+				classNames: {
+					root: css({ layerStyle: "likec4.tag" }),
+					label: css({ fontWeight: "semibold" })
+				},
+				children: value
+			})
+		}), notCommitted && /* @__PURE__ */ jsxs(HStack, {
+			gap: "2",
+			children: [/* @__PURE__ */ jsx(Button, {
+				loading: isApplying,
+				miw: "min-content",
+				variant: "default",
+				size: "compact-xs",
+				onClick: commitChanges,
+				children: "Apply"
+			}), /* @__PURE__ */ jsx(Button, {
+				disabled: isApplying,
+				miw: "min-content",
+				variant: "default",
+				size: "compact-xs",
+				onClick: revert,
+				children: "Revert"
+			})]
+		})]
+	});
+}
+function ManualLayoutState() {
+	const isMounted = useIsMounted();
+	const [ctx, ops] = useDiagramCompareLayout();
+	const [isProcessing, setIsProcessing] = useToggle();
+	const resetProcessing = () => {
+		setTimeout(() => {
+			if (isMounted()) setIsProcessing(false);
+		}, 500);
+	};
+	const onResetManualLayout = useCallbackRef$1((e) => {
+		e.stopPropagation();
+		if (isProcessing) return;
+		setIsProcessing(true);
+		setTimeout(() => {
+			ops.resetManualLayout();
+			resetProcessing();
+		}, 100);
+	});
+	return /* @__PURE__ */ jsxs(Menu, {
+		withinPortal: false,
+		floatingStrategy: "absolute",
+		position: "bottom-start",
+		classNames: { item: css({
+			fontSize: "sm",
+			py: "1"
+		}) },
+		closeOnItemClick: false,
+		disabled: !ctx.hasEditor,
+		offset: { mainAxis: 4 },
+		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Button, {
+			size: "compact-xs",
+			className: css({
+				layerStyle: ctx.isEnabled ? "surface.warning" : "likec4.panel.action.filled",
+				fontSize: "xxs",
+				gap: "4"
+			}),
+			styles: { section: { marginInlineStart: 4 } },
+			disabled: !ctx.hasEditor,
+			rightSection: ctx.hasEditor ? /* @__PURE__ */ jsx(IconChevronDown, {
+				size: 12,
+				stroke: 3,
+				opacity: .7
+			}) : void 0,
+			children: ctx.isEnabled ? "out of sync" : "manual"
+		}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: /* @__PURE__ */ jsx(Menu.Item, {
+			leftSection: isProcessing ? /* @__PURE__ */ jsx(Loader, { size: 14 }) : void 0,
+			disabled: isProcessing,
+			onClick: onResetManualLayout,
+			rightSection: !isProcessing && /* @__PURE__ */ jsx(Tooltip, {
+				onClick: stopPropagation,
+				position: "right-start",
+				label: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					"Reset manual layout adjustments and delete snapshot.",
+					/* @__PURE__ */ jsx("br", {}),
+					"You can undo this action."
+				] }),
+				children: /* @__PURE__ */ jsx(IconInfoCircle, {
+					size: 14,
+					stroke: 1.7,
+					opacity: .5
+				})
+			}),
+			children: "Reset layout"
+		}) })]
+	});
+}
+//#endregion
+export { ViewDetailsWindow };

package/dist/overlays/Overlays.js

@@ -2,10 +2,10 @@ import "../_virtual/_rolldown/runtime.js";
 import { DiagramFeatures } from "../context/DiagramFeatures.js";
 import { useDiagram } from "../hooks/safeContext.js";
 import { ErrorBoundary } from "../components/ErrorFallback.js";
+import { Overlay } from "./overlay/Overlay.js";
 import { RelationshipsBrowser } from "./relationships-browser/RelationshipsBrowser.js";
 import { ElementDetails } from "./element-details/ElementDetails.js";
 import { OverlaysActorContext, selectOverlaysSnapshot, useSelectOverlaysActor } from "./hooks.js";
-import { Overlay } from "./overlay/Overlay.js";
 import { RelationshipDetails } from "./relationship-details/RelationshipDetails.js";
 import { useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -69,30 +69,42 @@ function OverlaysSurface({ overlaysActorRef }) {
 	};
 	const overlaysReact = overlays.map((overlay, index) => {
 		switch (overlay.type) {
-			case "relationshipsBrowser": return /* @__PURE__ */ jsx(Overlay, {
-				overlayLevel: index,
-				onClose: () => close(overlay.actorRef),
-				children: /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: overlay.actorRef })
+			case "relationshipsBrowser": return /* @__PURE__ */ jsx(ErrorBoundary, {
+				onReset: () => close(overlay.actorRef),
+				children: /* @__PURE__ */ jsx(Overlay, {
+					overlayLevel: index,
+					onClose: () => close(overlay.actorRef),
+					children: /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: overlay.actorRef })
+				})
 			}, overlay.actorRef.sessionId);
-			case "relationshipDetails": return /* @__PURE__ */ jsx(Overlay, {
-				overlayLevel: index,
-				onClose: () => close(overlay.actorRef),
-				children: /* @__PURE__ */ jsx(RelationshipDetails, { actorRef: overlay.actorRef })
+			case "relationshipDetails": return /* @__PURE__ */ jsx(ErrorBoundary, {
+				onReset: () => close(overlay.actorRef),
+				children: /* @__PURE__ */ jsx(Overlay, {
+					overlayLevel: index,
+					onClose: () => close(overlay.actorRef),
+					children: /* @__PURE__ */ jsx(RelationshipDetails, { actorRef: overlay.actorRef })
+				})
 			}, overlay.actorRef.sessionId);
-			case "elementDetails": return /* @__PURE__ */ jsx(ElementDetails, {
-				actorRef: overlay.actorRef,
-				onClose: () => close(overlay.actorRef)
+			case "elementDetails": return /* @__PURE__ */ jsx(ErrorBoundary, {
+				onReset: () => close(overlay.actorRef),
+				children: /* @__PURE__ */ jsx(ElementDetails, {
+					actorRef: overlay.actorRef,
+					onClose: () => close(overlay.actorRef)
+				})
 			}, overlay.actorRef.sessionId);
 			default: nonexhaustive(overlay);
 		}
 	});
-	return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, {
-		onReset: () => overlaysActorRef.send({ type: "close.all" }),
-		children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, {
+	return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(LayoutGroup, {
+		id: overlaysActorRef.sessionId,
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
 			propagate: true,
 			mode: "popLayout",
-			children: overlaysReact
-		}) })
+			children: /* @__PURE__ */ jsx(ErrorBoundary, {
+				onReset: () => overlaysActorRef.send({ type: "close.all" }),
+				children: overlaysReact
+			})
+		})
 	}) });
 }
 //#endregion

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

@@ -1,4 +1,5 @@
 import { css } from "@likec4/styles/css";
+import { flex } from "@likec4/styles/patterns";
 //#region src/overlays/element-details/ElementDetailsCard.css.ts
 var backdropBlur = "--_blur";
 var backdropOpacity = "--_opacity";
@@ -45,7 +46,7 @@ var card = css({
 	"& .react-flow__attribution": { display: "none" }
 });
 var cardHeader = css({
-	flex: 0,
+	flex: "[0]",
 	cursor: "move"
 });
 var title = css({
@@ -54,7 +55,7 @@ var title = css({
 	fontOpticalSizing: "auto",
 	fontStyle: "normal",
 	fontWeight: "bold",
-	fontSize: "24px",
+	fontSize: "[24px]",
 	lineHeight: "xs",
 	overflow: "hidden",
 	textOverflow: "ellipsis",
@@ -63,9 +64,8 @@ var title = css({
 });
 var iconSize = "40px";
 var elementIcon = css({
-	flex: `0 0 ${iconSize}`,
-	height: iconSize,
-	width: iconSize,
+	flex: `[0 0 ${iconSize}]`,
+	boxSize: `[${iconSize}]`,
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "center",
@@ -77,11 +77,11 @@ var elementIcon = css({
 		height: "auto",
 		maxHeight: "100%",
 		pointerEvents: "none",
-		filter: `
+		filter: `[
     drop-shadow(0 0 3px rgb(0 0 0 / 10%))
     drop-shadow(0 1px 8px rgb(0 0 0 / 5%))
     drop-shadow(1px 1px 16px rgb(0 0 0 / 2%))
-  `
+  ]`
 	},
 	"& img": { objectFit: "contain" }
 });
@@ -89,19 +89,18 @@ var viewTitleColor = "--view-title-color";
 var iconColor = "--icon-color";
 var viewButton = css({
 	width: "100%",
-	background: "body",
+	background: "surface.default",
 	borderRadius: "sm",
 	padding: `[10px 8px]`,
 	transition: "fast",
-	border: `1px dashed`,
-	borderColor: "default.border",
+	border: `default`,
+	borderStyle: "dashed",
 	[viewTitleColor]: "{colors.mantine.dark[1]}",
 	_hover: {
-		background: "default.hover",
+		background: "surface.hover",
 		[iconColor]: "{colors.mantine.dark[1]}",
-		[viewTitleColor]: "{colors.default.color}"
+		[viewTitleColor]: "{colors.text}"
 	},
-	_dark: { background: "mantine.dark[6]" },
 	_light: {
 		[iconColor]: "{colors.mantine.gray[6]}",
 		[viewTitleColor]: "{colors.mantine.gray[7]}",
@@ -111,24 +110,19 @@ var viewButton = css({
 		transition: "fast",
 		color: `[var(${iconColor}, {colors.mantine.dark[2]})]`,
 		"--ti-size": "22px",
-		_hover: { color: "default.color" }
+		_hover: { color: "text" }
 	},
-	"& > *": { transition: `all 130ms {easings.inOut}` },
-	"&:hover > *": {
-		transitionTimingFunction: "out",
-		transform: "translateX(1.6px)"
-	}
+	"& > *": { transition: `[all 130ms {easings.inOut}]` }
 });
 var viewButtonTitle = css({
 	transition: "fast",
 	color: `[var(${viewTitleColor}, {colors.mantine.gray[7]})]`,
-	fontSize: "15px",
+	fontSize: "[15px]",
 	fontWeight: "medium",
-	lineHeight: "1.4"
+	lineHeight: "[1.4]"
 });
-var tabsRoot = css({
-	flex: 1,
-	display: "flex",
+var tabsRoot = flex({
+	flex: "1",
 	flexDirection: "column",
 	justifyContent: "stretch",
 	overflow: "hidden",
@@ -152,14 +146,14 @@ var tabsTab = css({
 	color: "mantine.gray[7]",
 	_hover: {
 		transitionTimingFunction: "out",
-		color: "default.color",
+		color: "text",
 		background: "mantine.gray[3]"
 	},
 	["&[data-active]"]: {
 		transition: "none",
 		background: "white",
 		shadow: "xs",
-		color: "default.color"
+		color: "text"
 	},
 	_dark: {
 		color: "mantine.dark[1]",
@@ -174,7 +168,7 @@ var tabsTab = css({
 	}
 });
 var tabsPanel = css({
-	flex: 1,
+	flex: "1",
 	overflow: "hidden",
 	position: "relative",
 	"&:not(:has(.mantine-ScrollArea-root))": {
@@ -191,10 +185,10 @@ var tabsPanel = css({
 	}
 });
 var propertiesGrid = css({
-	flex: 1,
+	flex: "1",
 	display: "grid",
-	gridTemplateColumns: "min-content 1fr",
-	gridAutoRows: "min-content max-content",
+	gridTemplateColumns: "[min-content 1fr]",
+	gridAutoRows: "[min-content max-content]",
 	gap: `[24px 20px]`,
 	alignItems: "baseline",
 	justifyItems: "stretch"
@@ -206,19 +200,17 @@ var propertyLabel = css({
 });
 var resizeHandle = css({
 	position: "absolute",
-	width: "14px",
-	height: "14px",
-	border: `3.5px solid`,
-	borderColor: "mantine.dark[3]",
+	boxSize: "[14px]",
+	border: `[3.5px solid {colors.mantine.dark[3]}]`,
 	borderTop: "none",
 	borderLeft: "none",
 	borderRadius: "xs",
 	bottom: "0.5",
 	right: "0.5",
 	transition: "fast",
-	cursor: "se-resize",
+	cursor: "[se-resize]",
 	_hover: {
-		borderWidth: "4px",
+		borderWidth: "[4px]",
 		borderColor: "mantine.dark[1]"
 	}
 });

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

@@ -491,7 +491,7 @@ function ElementMetata({ value: metadata }) {
 		className: css({
 			display: "grid",
 			gridTemplateColumns: "min-content 1fr",
-			gridAutoRows: "min-content",
+			gridAutoRows: "[min-content]",
 			gap: `[12px 16px]`,
 			alignItems: "baseline",
 			justifyItems: "stretch"