camox 0.53.1 → 0.56.0

package/dist/features/preview/components/SelectionEditor.js

@@ -27,13 +27,33 @@ import { useMutation } from "@tanstack/react-query";
 import { Button } from "@camox/ui/button";
 import { Label } from "@camox/ui/label";
 import { Switch } from "@camox/ui/switch";
-import { CirclePlus, Trash2 } from "lucide-react";
+import { CirclePlus, Ellipsis, Trash2 } from "lucide-react";
 import { ButtonGroup } from "@camox/ui/button-group";
 import { Spinner } from "@camox/ui/spinner";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
 
 //#region src/features/preview/components/SelectionEditor.tsx
 const EMPTY_CONTENT = {};
+/**
+* The path's headers. The `kept` first steps and the selection always show; two or
+* more steps between them collapse into one header, which lists them.
+*/
+function stackRows(items, kept) {
+	const rows = items.map((item, index) => ({
+		index,
+		item
+	}));
+	const between = items.slice(kept, -1);
+	if (between.length < 2) return rows;
+	return [
+		...rows.slice(0, kept),
+		{
+			index: kept,
+			collapsed: between
+		},
+		...rows.slice(kept + between.length)
+	];
+}
 const getSettingsFields = (schema) => {
 	const properties = schema?.properties;
 	if (!properties) return [];
@@ -119,7 +139,7 @@ const SelectionEditor = (t0) => {
 	return t2;
 };
 const SelectionEditorContent = (t0) => {
-	const $ = c(145);
+	const $ = c(131);
 	const { owner, pageCrumb } = t0;
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -611,30 +631,15 @@ const SelectionEditorContent = (t0) => {
 		$[90] = t33;
 	} else t33 = $[90];
 	const blockCrumbs = t33;
-	const t34 = owner.kind === "page" ? "Page" : "Layout";
-	let t35;
-	if ($[91] !== t34) {
-		t35 = {
+	const navigationItems = [
+		{
 			key: "page",
 			hoverTarget: null,
-			label: t34,
+			label: owner.kind === "page" ? "Page" : "Layout",
 			isCurrent: false,
 			onClick: _temp5
-		};
-		$[91] = t34;
-		$[92] = t35;
-	} else t35 = $[92];
-	let t36;
-	if ($[93] !== block || $[94] !== blockCrumbs || $[95] !== blockDef) {
-		t36 = block && blockDef ? blockCrumbs(block, blockDef) : [];
-		$[93] = block;
-		$[94] = blockCrumbs;
-		$[95] = blockDef;
-		$[96] = t36;
-	} else t36 = $[96];
-	const navigationItems = [
-		t35,
-		...t36,
+		},
+		...block && blockDef ? blockCrumbs(block, blockDef) : [],
 		...recordCrumbs(fieldHasOwnView),
 		...fieldHasOwnView && fieldInfo ? [{
 			key: `field-${fieldInfo.fieldName}`,
@@ -647,48 +652,66 @@ const SelectionEditorContent = (t0) => {
 	const stackedItems = pageCrumb ? navigationItems : navigationItems.slice(1);
 	const firstDepth = pageCrumb ? 1 : 2;
 	const front = stackedItems[stackedItems.length - 1];
-	let t37;
-	if ($[97] !== stackedItems.length) {
-		t37 = /* @__PURE__ */ jsx(SelectionViewCount, { count: stackedItems.length });
-		$[97] = stackedItems.length;
-		$[98] = t37;
-	} else t37 = $[98];
+	const rows = stackRows(stackedItems, pageCrumb ? 1 : 0);
+	const t34 = "Selection path";
+	const t35 = "shrink-0";
+	const t36 = "flex flex-col";
+	const t37 = rows.map((row, index) => {
+		const distance = rows.length - 1 - index;
+		const covered = distance > 0;
+		const depth = firstDepth + row.index;
+		if (row.collapsed) return /* @__PURE__ */ jsx("li", {
+			className: "relative flex flex-col",
+			children: /* @__PURE__ */ jsx(SidebarStackHeader, {
+				depth,
+				distance,
+				popover: /* @__PURE__ */ jsx("ol", {
+					"aria-label": "Collapsed parents",
+					className: "flex flex-col",
+					children: row.collapsed.map(_temp6)
+				}),
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx(Ellipsis, { className: "size-3.5 shrink-0" }), /* @__PURE__ */ jsxs("span", {
+						className: "truncate",
+						children: [row.collapsed.length, " parents"]
+					})]
+				})
+			})
+		}, "collapsed-parents");
+		const { item: item_0 } = row;
+		return /* @__PURE__ */ jsx("li", {
+			className: "relative flex flex-col",
+			children: /* @__PURE__ */ jsx(SidebarStackHeader, {
+				depth,
+				distance,
+				first: pageCrumb && row.index === 0,
+				onSelect: item_0.onClick,
+				hoverTarget: item_0.hoverTarget,
+				children: covered ? item_0.label : /* @__PURE__ */ jsx("span", {
+					className: "truncate font-medium",
+					children: item_0.label
+				})
+			})
+		}, item_0.key);
+	});
 	let t38;
-	if ($[99] !== firstDepth || $[100] !== pageCrumb || $[101] !== stackedItems) {
+	if ($[91] !== t37) {
 		t38 = /* @__PURE__ */ jsx("nav", {
-			"aria-label": "Selection path",
-			className: "shrink-0",
+			"aria-label": t34,
+			className: t35,
 			children: /* @__PURE__ */ jsx("ol", {
-				className: "flex flex-col",
-				children: stackedItems.map((item, index) => {
-					const distance = stackedItems.length - 1 - index;
-					const covered = distance > 0;
-					return /* @__PURE__ */ jsx("li", {
-						className: "relative flex flex-col",
-						children: /* @__PURE__ */ jsx(SidebarStackHeader, {
-							depth: firstDepth + index,
-							distance,
-							first: pageCrumb && index === 0,
-							onSelect: item.onClick,
-							hoverTarget: item.hoverTarget,
-							children: covered ? item.label : /* @__PURE__ */ jsx("span", {
-								className: "truncate font-medium",
-								children: item.label
-							})
-						})
-					}, item.key);
-				})
+				className: t36,
+				children: t37
 			})
 		});
-		$[99] = firstDepth;
-		$[100] = pageCrumb;
-		$[101] = stackedItems;
-		$[102] = t38;
-	} else t38 = $[102];
+		$[91] = t37;
+		$[92] = t38;
+	} else t38 = $[92];
 	const t39 = `${block?.id ?? "layout"}:${front?.key}`;
 	const t40 = firstDepth + stackedItems.length - 1;
 	let t41;
-	if ($[103] !== addSibling || $[104] !== assetAccept || $[105] !== assetFieldName || $[106] !== assetType || $[107] !== block || $[108] !== blockDef || $[109] !== canAddSibling || $[110] !== canRemoveCurrent || $[111] !== currentData || $[112] !== currentItem || $[113] !== currentItemId || $[114] !== currentSchema || $[115] !== fieldHasOwnView || $[116] !== fieldIdPrefix || $[117] !== fieldInfo?.fieldName || $[118] !== filesMap || $[119] !== isItemLoading || $[120] !== isMultipleAsset || $[121] !== isViewingAsset || $[122] !== isViewingLink || $[123] !== itemArraySchema || $[124] !== itemSettingsFields || $[125] !== itemsMap || $[126] !== linkFieldName || $[127] !== owner || $[128] !== recordInList || $[129] !== recordView || $[130] !== removeCurrent || $[131] !== send || $[132] !== settingsFields || $[133] !== updateRepeatableSettings || $[134] !== updateSettings || $[135] !== writeField) {
+	if ($[93] !== addSibling || $[94] !== assetAccept || $[95] !== assetFieldName || $[96] !== assetType || $[97] !== block || $[98] !== blockDef || $[99] !== canAddSibling || $[100] !== canRemoveCurrent || $[101] !== currentData || $[102] !== currentItem || $[103] !== currentItemId || $[104] !== currentSchema || $[105] !== fieldHasOwnView || $[106] !== fieldIdPrefix || $[107] !== fieldInfo?.fieldName || $[108] !== filesMap || $[109] !== isItemLoading || $[110] !== isMultipleAsset || $[111] !== isViewingAsset || $[112] !== isViewingLink || $[113] !== itemArraySchema || $[114] !== itemSettingsFields || $[115] !== itemsMap || $[116] !== linkFieldName || $[117] !== owner || $[118] !== recordInList || $[119] !== recordView || $[120] !== removeCurrent || $[121] !== send || $[122] !== settingsFields || $[123] !== updateRepeatableSettings || $[124] !== updateSettings || $[125] !== writeField) {
 		t41 = /* @__PURE__ */ jsx("div", { children: isItemLoading ? /* @__PURE__ */ jsx("div", {
 			className: "flex h-full items-center justify-center py-12",
 			children: /* @__PURE__ */ jsx(Spinner, {})
@@ -895,66 +918,58 @@ const SelectionEditorContent = (t0) => {
 				fieldIdPrefix
 			}, `${block?.id ?? "layout"}-${recordView ? `record-${recordView.record.id}` : currentItemId ?? "block"}-${fieldInfo?.fieldName ?? "fields"}`)
 		] }) });
-		$[103] = addSibling;
-		$[104] = assetAccept;
-		$[105] = assetFieldName;
-		$[106] = assetType;
-		$[107] = block;
-		$[108] = blockDef;
-		$[109] = canAddSibling;
-		$[110] = canRemoveCurrent;
-		$[111] = currentData;
-		$[112] = currentItem;
-		$[113] = currentItemId;
-		$[114] = currentSchema;
-		$[115] = fieldHasOwnView;
-		$[116] = fieldIdPrefix;
-		$[117] = fieldInfo?.fieldName;
-		$[118] = filesMap;
-		$[119] = isItemLoading;
-		$[120] = isMultipleAsset;
-		$[121] = isViewingAsset;
-		$[122] = isViewingLink;
-		$[123] = itemArraySchema;
-		$[124] = itemSettingsFields;
-		$[125] = itemsMap;
-		$[126] = linkFieldName;
-		$[127] = owner;
-		$[128] = recordInList;
-		$[129] = recordView;
-		$[130] = removeCurrent;
-		$[131] = send;
-		$[132] = settingsFields;
-		$[133] = updateRepeatableSettings;
-		$[134] = updateSettings;
-		$[135] = writeField;
-		$[136] = t41;
-	} else t41 = $[136];
+		$[93] = addSibling;
+		$[94] = assetAccept;
+		$[95] = assetFieldName;
+		$[96] = assetType;
+		$[97] = block;
+		$[98] = blockDef;
+		$[99] = canAddSibling;
+		$[100] = canRemoveCurrent;
+		$[101] = currentData;
+		$[102] = currentItem;
+		$[103] = currentItemId;
+		$[104] = currentSchema;
+		$[105] = fieldHasOwnView;
+		$[106] = fieldIdPrefix;
+		$[107] = fieldInfo?.fieldName;
+		$[108] = filesMap;
+		$[109] = isItemLoading;
+		$[110] = isMultipleAsset;
+		$[111] = isViewingAsset;
+		$[112] = isViewingLink;
+		$[113] = itemArraySchema;
+		$[114] = itemSettingsFields;
+		$[115] = itemsMap;
+		$[116] = linkFieldName;
+		$[117] = owner;
+		$[118] = recordInList;
+		$[119] = recordView;
+		$[120] = removeCurrent;
+		$[121] = send;
+		$[122] = settingsFields;
+		$[123] = updateRepeatableSettings;
+		$[124] = updateSettings;
+		$[125] = writeField;
+		$[126] = t41;
+	} else t41 = $[126];
 	let t42;
-	if ($[137] !== t39 || $[138] !== t40 || $[139] !== t41) {
+	if ($[127] !== t39 || $[128] !== t40 || $[129] !== t41) {
 		t42 = /* @__PURE__ */ jsx(SidebarStackView, {
 			depth: t40,
 			className: "relative min-w-0 overflow-x-hidden overflow-y-auto",
 			children: t41
 		}, t39);
-		$[137] = t39;
-		$[138] = t40;
-		$[139] = t41;
-		$[140] = t42;
-	} else t42 = $[140];
-	let t43;
-	if ($[141] !== t37 || $[142] !== t38 || $[143] !== t42) {
-		t43 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t37,
-			t38,
-			t42
-		] });
-		$[141] = t37;
-		$[142] = t38;
-		$[143] = t42;
-		$[144] = t43;
-	} else t43 = $[144];
-	return t43;
+		$[127] = t39;
+		$[128] = t40;
+		$[129] = t41;
+		$[130] = t42;
+	} else t42 = $[130];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(SelectionViewCount, { count: rows.length }),
+		t38,
+		t42
+	] });
 };
 function _temp(i) {
 	return [i.id, i];
@@ -971,6 +986,17 @@ function _temp4(f_0) {
 function _temp5() {
 	return previewStore.send({ type: "clearSelection" });
 }
+function _temp6(item) {
+	return /* @__PURE__ */ jsx("li", {
+		className: "flex",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "hover:bg-accent hover:text-accent-foreground min-w-0 flex-1 cursor-pointer truncate rounded-sm px-2 py-1.5 text-left text-sm",
+			onClick: item.onClick,
+			children: item.label
+		})
+	}, item.key);
+}
 
 //#endregion
 export { SelectionEditor };

package/dist/features/preview/components/SidebarStack.js

@@ -5,12 +5,20 @@ import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Tooltip$1 from "@camox/ui/tooltip";
+import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 
 //#region src/features/preview/components/SidebarStack.tsx
 /** How much narrower, on each side, the header right behind the front is than the front's. */
 const FIRST_STEP_INSET = 9;
+/**
+* How much each step back shades a card, relative to the step in front of it. The selection
+* path collapses its middle, so the stack stays short and its steps can stay even.
+*/
+const STEP_FALLOFF = .85;
 /** How much each step back narrows a header, relative to the step in front of it. */
-const STEP_FALLOFF = .65;
+const INSET_FALLOFF = .75;
+/** How much each step back tilts a header, relative to the step in front of it. */
+const TILT_FALLOFF = .65;
 /** How far the header right behind the front leans back, in degrees. */
 const FIRST_STEP_TILT = 4;
 /**
@@ -22,14 +30,15 @@ const FIRST_STEP_SHADE = 1.2;
 const DARK_SHADE_STRENGTH = 2.5;
 /** Keeps a sidebar's cards off its sides, so their edges show. */
 const SIDEBAR_GUTTER = "px-2";
-/** The front card's sides and bottom, drawn just outside it, above the bottom of the sidebar. */
-const CARD_BODY_EDGES = "rounded-b-lg shadow-[-1px_0_0_var(--color-border),1px_0_0_var(--color-border),0_1px_0_var(--color-border)]";
 /**
-* The bottom card's edges, as it meets the top of a sidebar, which crops anything above it: it
-* draws its top edge inside, and nothing lies behind it to cast a shadow on. One border, a pixel
-* past each side to meet the sides below, keeps the edge even around the rounded corners.
+* The front card's bottom, under its header, with a soft shadow down its sides that stops short
+* of its top, so it doesn't fall on its header.
 */
-const BOTTOM_CARD_EDGES = "relative rounded-t-lg before:pointer-events-none before:absolute before:-inset-x-px before:inset-y-0 before:rounded-t-[inherit] before:border before:border-b-0 before:border-border";
+const CARD_BODY_EDGES = "rounded-b-lg inset-shadow-raised-bottom shadow-[0_12px_24px_-12px_rgb(0_0_0/0.14)] dark:shadow-[0_12px_24px_-12px_rgb(0_0_0/0.6)]";
+/** The bottom card's top, as it meets the top of a sidebar. */
+const BOTTOM_CARD_EDGES = "rounded-t-lg inset-shadow-raised-top";
+/** A card's top, over the cards behind it. */
+const CARD_TOP_EDGE = "inset-shadow-raised-top";
 /**
 * How much the second card behind the front fades its name, which shows depth on dark
 * backgrounds too. The card right behind the front doesn't fade.
@@ -38,12 +47,12 @@ const FIRST_STEP_FADE = .05;
 /** How far away the eye is from the stack, in px: the less, the stronger the depth. */
 const PERSPECTIVE = 900;
 /** Sums the steps of a falloff series, `distance` views behind the front. */
-function stepSeries(first, distance) {
-	return first * (1 - STEP_FALLOFF ** distance) / .35;
+function stepSeries(first, distance, falloff = STEP_FALLOFF) {
+	return first * (1 - falloff ** distance) / (1 - falloff);
 }
 /** A header's inset on each side, `distance` views behind the front. */
 function stackInset(distance) {
-	return stepSeries(FIRST_STEP_INSET, distance);
+	return stepSeries(FIRST_STEP_INSET, distance, INSET_FALLOFF);
 }
 /** Cards settle into place, without bouncing. */
 const EASE = "cubic-bezier(0.2, 0, 0, 1)";
@@ -100,7 +109,10 @@ const GOING = {
 		},
 		PULLED
 	],
-	back: [PLACED, BEHIND],
+	back: [PLACED, {
+		...BEHIND,
+		opacity: 0
+	}],
 	same: [{ opacity: 1 }, { opacity: 0 }]
 };
 const GOING_TIMING = {
@@ -338,7 +350,7 @@ function SidebarStackView(t0) {
 	const { depth, className, children } = t0;
 	const ref = React.useRef(null);
 	useStackCard(ref, depth, true);
-	const t1 = React.useContext(StackMotionContext) != null && "rounded-b-lg shadow-[-1px_0_0_var(--color-border),1px_0_0_var(--color-border),0_1px_0_var(--color-border)]";
+	const t1 = React.useContext(StackMotionContext) != null && "rounded-b-lg inset-shadow-raised-bottom shadow-[0_12px_24px_-12px_rgb(0_0_0/0.14)] dark:shadow-[0_12px_24px_-12px_rgb(0_0_0/0.6)]";
 	let t2;
 	if ($[0] !== className || $[1] !== t1) {
 		t2 = cn("bg-background min-h-0 flex-1 origin-top", t1, className);
@@ -360,8 +372,8 @@ function SidebarStackView(t0) {
 	return t3;
 }
 function SidebarStackHeader(t0) {
-	const $ = c(52);
-	const { depth, distance: t1, first: t2, onSelect, hoverTarget, tooltip, children } = t0;
+	const $ = c(55);
+	const { depth, distance: t1, first: t2, onSelect, hoverTarget, tooltip, popover, children } = t0;
 	const distance = t1 === void 0 ? 0 : t1;
 	const first = t2 === void 0 ? false : t2;
 	const covered = distance > 0;
@@ -397,12 +409,13 @@ function SidebarStackHeader(t0) {
 	React.useEffect(t4, t5);
 	const ref = React.useRef(null);
 	useStackCard(ref, depth, false);
-	const liftable = covered && onSelect != null;
+	const [popoverOpen, setPopoverOpen] = React.useState(false);
+	const liftable = covered && (onSelect != null || popover != null);
 	const inStack = React.useContext(StackMotionContext) != null;
 	const flat = first && !covered && !inStack;
 	let t6;
 	if ($[8] !== covered || $[9] !== distance) {
-		t6 = covered ? stepSeries(FIRST_STEP_TILT, distance) : 0;
+		t6 = covered ? stepSeries(FIRST_STEP_TILT, distance, TILT_FALLOFF) : 0;
 		$[8] = covered;
 		$[9] = distance;
 		$[10] = t6;
@@ -419,12 +432,12 @@ function SidebarStackHeader(t0) {
 	if ($[13] !== children || $[14] !== liftable || $[15] !== onSelect) {
 		t8 = liftable ? /* @__PURE__ */ jsx("button", {
 			type: "button",
-			className: "hover:text-foreground flex h-full w-full min-w-0 cursor-pointer items-center justify-center rounded-[inherit] px-3 text-center text-(--ancestor-foreground) transition-colors focus-visible:outline-none",
+			className: "hover:text-foreground data-popup-open:text-foreground flex h-full w-full min-w-0 cursor-pointer items-center justify-center rounded-[inherit] px-3 text-center text-(--ancestor-foreground) transition-colors focus-visible:outline-none",
 			onMouseEnter: () => setHovered(true),
 			onMouseLeave: () => setHovered(false),
 			onClick: () => {
 				setHovered(false);
-				onSelect();
+				onSelect?.();
 			},
 			children: /* @__PURE__ */ jsx("span", {
 				className: "truncate opacity-(--fade) transition-opacity",
@@ -446,14 +459,15 @@ function SidebarStackHeader(t0) {
 	} else t10 = $[18];
 	const t11 = !flat && !first && "rounded-t-sm";
 	const t12 = covered ? "h-[38px] pb-1" : "h-11 px-3";
-	const t13 = first && !flat && "relative rounded-t-lg before:pointer-events-none before:absolute before:-inset-x-px before:inset-y-0 before:rounded-t-[inherit] before:border before:border-b-0 before:border-border";
-	const t14 = covered && !first && "shadow-[0_0_0_1px_var(--color-border),0_-2px_5px_-3px_rgb(0_0_0/0.08),inset_0_1px_0_rgb(255_255_255/0.5)] dark:shadow-[0_0_0_1px_var(--color-border),0_-2px_5px_-3px_rgb(0_0_0/0.4),inset_0_1px_0_rgb(255_255_255/0.05)]";
-	const t15 = !covered && !first && (inStack ? "shadow-[-1px_0_0_var(--color-border),1px_0_0_var(--color-border),0_-1px_0_var(--color-border),0_-3px_8px_-4px_rgb(0_0_0/0.08)] dark:shadow-[-1px_0_0_var(--color-border),1px_0_0_var(--color-border),0_-1px_0_var(--color-border),0_-3px_8px_-4px_rgb(0_0_0/0.4)]" : "shadow-[0_-1px_0_var(--color-border),0_-3px_8px_-4px_rgb(0_0_0/0.08)] dark:shadow-[0_-1px_0_var(--color-border),0_-3px_8px_-4px_rgb(0_0_0/0.4)]");
+	const t13 = first && !flat && "rounded-t-lg inset-shadow-raised-top";
+	const t14 = covered && !first && `${CARD_TOP_EDGE} shadow-[0_-2px_5px_-3px_rgb(0_0_0/0.08)] dark:shadow-[0_-2px_5px_-3px_rgb(0_0_0/0.4)]`;
+	const t15 = !covered && !first && `${CARD_TOP_EDGE} shadow-[0_-3px_8px_-4px_rgb(0_0_0/0.08)] dark:shadow-[0_-3px_8px_-4px_rgb(0_0_0/0.4)]`;
 	const t16 = liftable && "hover:[--fade:1] hover:[--lift:var(--hover-lift)] hover:[--shade:var(--hover-shade)] hover:[--tilt:var(--hover-tilt)]";
 	const t17 = liftable && "has-focus-visible:[--fade:1] has-focus-visible:[--lift:var(--hover-lift)] has-focus-visible:[--shade:var(--hover-shade)] has-focus-visible:[--tilt:var(--hover-tilt)]";
-	let t18;
-	if ($[19] !== t11 || $[20] !== t12 || $[21] !== t13 || $[22] !== t14 || $[23] !== t15 || $[24] !== t16 || $[25] !== t17) {
-		t18 = cn("relative flex min-w-0 items-center justify-center text-center text-sm", t11, "[--ancestor-foreground:color-mix(in_oklab,var(--color-muted-foreground),var(--color-foreground)_40%)]", "[--fade:var(--rest-fade)] [--lift:0px] [--shade:var(--rest-shade)] [--tilt:var(--rest-tilt)]", "[--shade-color:black] [--shade-strength:1] dark:[--shade-color:white] dark:[--shade-strength:var(--dark-shade-strength)]", "origin-bottom [backface-visibility:hidden] motion-reduce:transition-none!", t12, t13, t14, t15, t16, t17);
+	const t18 = liftable && "has-data-popup-open:[--fade:1] has-data-popup-open:[--lift:var(--hover-lift)] has-data-popup-open:[--shade:var(--hover-shade)] has-data-popup-open:[--tilt:var(--hover-tilt)]";
+	let t19;
+	if ($[19] !== t11 || $[20] !== t12 || $[21] !== t13 || $[22] !== t14 || $[23] !== t15 || $[24] !== t16 || $[25] !== t17 || $[26] !== t18) {
+		t19 = cn("relative flex min-w-0 items-center justify-center text-center text-sm", t11, "[--ancestor-foreground:color-mix(in_oklab,var(--color-muted-foreground),var(--color-foreground)_40%)]", "[--fade:var(--rest-fade)] [--lift:0px] [--shade:var(--rest-shade)] [--tilt:var(--rest-tilt)]", "[--shade-color:black] [--shade-strength:1] dark:[--shade-color:white] dark:[--shade-strength:var(--dark-shade-strength)]", "origin-bottom [backface-visibility:hidden] motion-reduce:transition-none!", t12, t13, t14, t15, t16, t17, t18);
 		$[19] = t11;
 		$[20] = t12;
 		$[21] = t13;
@@ -462,91 +476,104 @@ function SidebarStackHeader(t0) {
 		$[24] = t16;
 		$[25] = t17;
 		$[26] = t18;
-	} else t18 = $[26];
-	const t19 = `${tilt}deg`;
-	const t20 = `${tilt / 2}deg`;
-	const t21 = `${shade}%`;
-	const t22 = Math.max(0, distance - 1);
-	let t23;
-	if ($[27] !== t22) {
-		t23 = stepSeries(FIRST_STEP_SHADE, t22);
-		$[27] = t22;
+		$[27] = t19;
+	} else t19 = $[27];
+	const t20 = `${tilt}deg`;
+	const t21 = `${tilt / 2}deg`;
+	const t22 = `${shade}%`;
+	const t23 = Math.max(0, distance - 1);
+	let t24;
+	if ($[28] !== t23) {
+		t24 = stepSeries(FIRST_STEP_SHADE, t23);
 		$[28] = t23;
-	} else t23 = $[28];
-	const t24 = `${t23}%`;
-	const t25 = `${first ? 0 : -1.5}px`;
-	const t26 = covered ? 1 - stepSeries(FIRST_STEP_FADE, distance - 1) : 1;
-	let t27;
-	if ($[29] !== covered || $[30] !== distance) {
-		t27 = covered ? stackInset(distance) : void 0;
-		$[29] = covered;
-		$[30] = distance;
-		$[31] = t27;
-	} else t27 = $[31];
+		$[29] = t24;
+	} else t24 = $[29];
+	const t25 = `${t24}%`;
+	const t26 = `${first ? 0 : -1.5}px`;
+	const t27 = covered ? 1 - stepSeries(FIRST_STEP_FADE, distance - 1) : 1;
 	let t28;
-	if ($[32] !== t19 || $[33] !== t20 || $[34] !== t21 || $[35] !== t24 || $[36] !== t25 || $[37] !== t26 || $[38] !== t27) {
-		t28 = {
-			"--rest-tilt": t19,
-			"--hover-tilt": t20,
-			"--rest-shade": t21,
+	if ($[30] !== covered || $[31] !== distance) {
+		t28 = covered ? stackInset(distance) : void 0;
+		$[30] = covered;
+		$[31] = distance;
+		$[32] = t28;
+	} else t28 = $[32];
+	let t29;
+	if ($[33] !== t20 || $[34] !== t21 || $[35] !== t22 || $[36] !== t25 || $[37] !== t26 || $[38] !== t27 || $[39] !== t28) {
+		t29 = {
+			"--rest-tilt": t20,
+			"--hover-tilt": t21,
+			"--rest-shade": t22,
 			"--dark-shade-strength": DARK_SHADE_STRENGTH,
-			"--hover-shade": t24,
-			"--hover-lift": t25,
-			"--rest-fade": t26,
-			marginInline: t27,
+			"--hover-shade": t25,
+			"--hover-lift": t26,
+			"--rest-fade": t27,
+			marginInline: t28,
 			transform: `perspective(${PERSPECTIVE}px) translateY(var(--lift)) rotateX(var(--tilt))`,
 			backgroundColor: "color-mix(in oklab, var(--color-background), var(--shade-color) calc(var(--shade) * var(--shade-strength)))",
 			transition: HEADER_TRANSITION
 		};
-		$[32] = t19;
 		$[33] = t20;
 		$[34] = t21;
-		$[35] = t24;
+		$[35] = t22;
 		$[36] = t25;
 		$[37] = t26;
 		$[38] = t27;
 		$[39] = t28;
-	} else t28 = $[39];
-	const t29 = t28;
-	let t30;
-	if ($[40] !== button || $[41] !== children || $[42] !== covered || $[43] !== tooltip) {
-		t30 = button && tooltip ? /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [/* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(Tooltip$1.TooltipContent, {
+		$[40] = t29;
+	} else t29 = $[40];
+	const t30 = t29;
+	let t31;
+	if ($[41] !== button || $[42] !== children || $[43] !== covered || $[44] !== popover || $[45] !== popoverOpen || $[46] !== tooltip) {
+		t31 = button && popover ? /* @__PURE__ */ jsxs(Popover, {
+			open: popoverOpen,
+			onOpenChange: setPopoverOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: button }), /* @__PURE__ */ jsx(PopoverContent, {
+				side: "bottom",
+				sideOffset: 8,
+				className: "w-48 gap-0 p-1",
+				onClick: () => setPopoverOpen(false),
+				children: popover
+			})]
+		}) : button && tooltip ? /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [/* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(Tooltip$1.TooltipContent, {
 			side: "bottom",
 			children: tooltip
 		})] }) : button ?? (covered ? /* @__PURE__ */ jsx("span", {
 			className: "truncate px-3 text-(--ancestor-foreground) opacity-(--fade)",
 			children
 		}) : children);
-		$[40] = button;
-		$[41] = children;
-		$[42] = covered;
-		$[43] = tooltip;
-		$[44] = t30;
-	} else t30 = $[44];
-	let t31;
-	if ($[45] !== t18 || $[46] !== t29 || $[47] !== t30) {
-		t31 = /* @__PURE__ */ jsx("div", {
-			className: t18,
-			style: t29,
-			children: t30
-		});
-		$[45] = t18;
-		$[46] = t29;
-		$[47] = t30;
-		$[48] = t31;
-	} else t31 = $[48];
+		$[41] = button;
+		$[42] = children;
+		$[43] = covered;
+		$[44] = popover;
+		$[45] = popoverOpen;
+		$[46] = tooltip;
+		$[47] = t31;
+	} else t31 = $[47];
 	let t32;
-	if ($[49] !== t10 || $[50] !== t31) {
+	if ($[48] !== t19 || $[49] !== t30 || $[50] !== t31) {
 		t32 = /* @__PURE__ */ jsx("div", {
-			ref,
-			className: t10,
+			className: t19,
+			style: t30,
 			children: t31
 		});
-		$[49] = t10;
+		$[48] = t19;
+		$[49] = t30;
 		$[50] = t31;
 		$[51] = t32;
 	} else t32 = $[51];
-	return t32;
+	let t33;
+	if ($[52] !== t10 || $[53] !== t32) {
+		t33 = /* @__PURE__ */ jsx("div", {
+			ref,
+			className: t10,
+			children: t32
+		});
+		$[52] = t10;
+		$[53] = t32;
+		$[54] = t33;
+	} else t33 = $[54];
+	return t33;
 }
 
 //#endregion

package/dist/features/preview/components/StudioEditingFallback.js

@@ -1,6 +1,6 @@
 import { CanvasLoadingScreen } from "../../canvas/CanvasLoadingScreen.js";
 import { previewStore, selectIsCanvasShown } from "../previewStore.js";
-import { CanvasSidebarSkeleton } from "../../canvas/sidebar/CanvasSidebarSkeleton.js";
+import { ContentSidebarSkeleton } from "../../canvas/sidebar/ContentSidebarSkeleton.js";
 import { c } from "react/compiler-runtime";
 import { useSelector } from "@xstate/store-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * What holds the page's place while the editor loads. The studio never renders the site's code:
 * a loading screen shows where the page will, in the Canvas's background, until the renderer
-* frame shows it. Showing the Canvas before the editor is ready also shows the Canvas sidebar's
+* frame shows it. Showing the Canvas before the editor is ready also shows the Content Sidebar's
 * placeholder, as the editor does while the Canvas prepares.
 */
 function StudioEditingFallback(t0) {
@@ -18,7 +18,7 @@ function StudioEditingFallback(t0) {
 	const isCanvasShown = useSelector(previewStore, selectIsCanvasShown);
 	let t1;
 	if ($[0] !== isCanvasShown || $[1] !== layoutPage) {
-		t1 = isCanvasShown && /* @__PURE__ */ jsx(CanvasSidebarSkeleton, { layoutPage });
+		t1 = isCanvasShown && /* @__PURE__ */ jsx(ContentSidebarSkeleton, { layoutPage });
 		$[0] = isCanvasShown;
 		$[1] = layoutPage;
 		$[2] = t1;

package/dist/features/routes/pageRuntime.d.ts

@@ -23,7 +23,7 @@ export type PageStructure = {
 };
 /**
  * Why a member can't see the draft a URL names: it doesn't exist, it's someone else's
- * development draft, or it was published or discarded (ADR 0011). In dev mode, the caller's
+ * development draft, or it was published or deleted (ADR 0011). In dev mode, the caller's
  * own development draft doesn't exist until the dev server's first sync creates it.
  */
 export type DraftNotice = {