camox 0.54.0 → 0.57.0

package/dist/features/canvas/CamoxCanvas.js

@@ -29,7 +29,7 @@ import { CanvasPageHeader } from "./CanvasPageHeader.js";
 import { CanvasPreviewPageSlot } from "./CanvasPreviewPageSlot.js";
 import { CANVAS_WORLD_TRANSFORM, canvasScreenAbove, canvasScreenLength, canvasScreenX } from "./canvasScreenSpace.js";
 import { selectedCanvasPage } from "./canvasSelection.js";
-import { CanvasSidebar } from "./sidebar/CanvasSidebar.js";
+import { ContentSidebar } from "./sidebar/ContentSidebar.js";
 import { useCanvasCamera } from "./useCanvasCamera.js";
 import { useCanvasNearness } from "./useCanvasNearness.js";
 import { useDiscoveredPreviewPaths } from "./useDiscoveredPreviewPaths.js";
@@ -42,7 +42,7 @@ import { createStore as createStore$1 } from "@xstate/store";
 
 //#region src/features/canvas/CamoxCanvas.tsx
 /**
-* The Canvas spans the studio under its sidebars, the Canvas sidebar on its left and the chat on
+* The Canvas spans the studio under its sidebars, the Content Sidebar on its left and the Agent Sidebar on
 * its right: the camera frames and snaps Pages between them, and above the studio's bottom edge.
 */
 const CANVAS_INSETS = {
@@ -459,10 +459,10 @@ function CanvasPageFrameLoader(t0) {
 	return t2;
 }
 /**
-* How far a sidebar's scrim fades, in px: from this far inside the sidebar, to the edge of a
-* snapped Page, past it by the page fit's padding.
+* Where a sidebar's scrim starts fading, in px from the studio's edge: past the sidebar's outer
+* gutter (`SIDEBAR_GUTTER`), so it fades across the whole of the sidebar's contents.
 */
-const SCRIM_FADE_INSIDE = 48;
+const SCRIM_FADE_START = 8;
 /** How opaque the scrim gets at most: what's under it always shows through, faintly. */
 const SCRIM_MAX_OPACITY = .8;
 /** Opacity along the fade, relative to the most, eased so it leaves no visible edge where it ends. */
@@ -477,11 +477,14 @@ const SCRIM_EASING = [
 	.05,
 	0
 ];
-/** Fades what the Canvas shows around a sidebar into the Canvas's background, toward the sidebar. */
+/**
+* Fades what the Canvas shows around a sidebar into the Canvas's background, toward the sidebar:
+* from nothing past a snapped Page's edge, to the most only at the sidebar's outer gutter.
+*/
 function scrimGradient(towards, inset) {
-	const from = inset - SCRIM_FADE_INSIDE;
-	const length = SCRIM_FADE_INSIDE + 16;
-	const stops = SCRIM_EASING.map((alpha, index) => `color-mix(in oklab, var(--color-muted) ${alpha * SCRIM_MAX_OPACITY * 100}%, transparent) ${from + length * index / (SCRIM_EASING.length - 1)}px`);
+	const from = SCRIM_FADE_START;
+	const length = inset + 16 - SCRIM_FADE_START;
+	const stops = SCRIM_EASING.map((alpha, index) => `color-mix(in oklab, var(--color-canvas) ${alpha * SCRIM_MAX_OPACITY * 100}%, transparent) ${from + length * index / (SCRIM_EASING.length - 1)}px`);
 	return `linear-gradient(to ${towards === "left" ? "right" : "left"}, ${stops.join(", ")})`;
 }
 /** A frame header above an item's slot, at a constant on-screen height. */
@@ -1049,7 +1052,7 @@ function CanvasWorkspace(t0) {
 		"aria-describedby": instructionsId,
 		tabIndex: 0,
 		"data-camox-canvas": true,
-		className: "bg-muted relative min-h-0 min-w-0 flex-1 touch-none overflow-clip outline-none *:*:[--canvas-x:initial] *:*:[--canvas-y:initial] data-[canvas-pan]:cursor-grab data-[canvas-pan]:**:cursor-[inherit]! data-[canvas-pan=dragging]:cursor-grabbing data-[canvas-pan]:[&_iframe]:pointer-events-none",
+		className: "bg-canvas relative min-h-0 min-w-0 flex-1 touch-none overflow-clip outline-none *:*:[--canvas-x:initial] *:*:[--canvas-y:initial] data-[canvas-pan]:cursor-grab data-[canvas-pan]:**:cursor-[inherit]! data-[canvas-pan=dragging]:cursor-grabbing data-[canvas-pan]:[&_iframe]:pointer-events-none",
 		style: t13,
 		children: [
 			/* @__PURE__ */ jsx(CanvasWorkspaceContext, {
@@ -1305,7 +1308,7 @@ function CamoxCanvas(t0) {
 	} else t17 = $[37];
 	let t18;
 	if ($[38] !== editingOwner || $[39] !== intendedPage || $[40] !== pageRecord || $[41] !== runtimeBasePath || $[42] !== t16) {
-		t18 = /* @__PURE__ */ jsx(CanvasSidebar, {
+		t18 = /* @__PURE__ */ jsx(ContentSidebar, {
 			page: intendedPage,
 			navigator: t16,
 			onShowWholeCanvas: t17,

package/dist/features/canvas/CanvasLoadingScreen.js

@@ -26,7 +26,7 @@ function CanvasLoadingScreen(t0) {
 	if ($[3] !== t2) {
 		t3 = /* @__PURE__ */ jsx("div", {
 			"data-canvas-loading": true,
-			className: "bg-muted absolute inset-0 grid place-items-center",
+			className: "bg-canvas absolute inset-0 grid place-items-center",
 			children: t2
 		});
 		$[3] = t2;

package/dist/features/canvas/CanvasPageHeader.js

@@ -39,7 +39,7 @@ function CanvasPageHeader({ page, pathname, selected, onSelect, onHoverChange, o
 		}
 	};
 	const path = pathname ?? (page.kind === "derived" ? page.pattern : void 0);
-	const pathClassName = "text-muted-foreground w-full min-w-0 truncate text-left text-xs font-normal";
+	const pathClassName = "text-muted-foreground max-w-full min-w-0 truncate text-left text-xs font-normal";
 	const focusClassName = "focus-visible:ring-ring outline-none focus-visible:ring-2";
 	const name = draft !== null ? /* @__PURE__ */ jsx("input", {
 		"aria-label": "Page nickname",

package/dist/features/canvas/canvasFrameDocument.js

@@ -4,6 +4,16 @@ import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle } from "../preview/components/previ
 //#region src/features/canvas/canvasFrameDocument.ts
 /** Freezes CSS animations, including ones that start while the frame is paused. */
 const PAUSED_ANIMATIONS_STYLE = `html[${PREVIEW_PAUSED_ATTRIBUTE}] *, html[${PREVIEW_PAUSED_ATTRIBUTE}] *::before, html[${PREVIEW_PAUSED_ATTRIBUTE}] *::after { animation-play-state: paused !important; }`;
+/**
+* A style of the studio's own for a frame's document, marked so that giving the frame a site
+* document's stylesheets (`restyle`) leaves it.
+*/
+function studioStyle(doc, css) {
+	const style = doc.createElement("style");
+	style.setAttribute("data-camox-studio", "");
+	style.textContent = css;
+	return style;
+}
 /** Set by the camera on elements that hold Canvas frames: see `canvasBlockOverlap`. */
 const BLOCK_OVERLAP_ATTRIBUTE = "data-canvas-block-overlap";
 const BLOCK = "[data-camox-viewport-block]";
@@ -93,8 +103,7 @@ function createCanvasDocument(previewDocument, href) {
 	doc.querySelector("[data-camox-preview-root]")?.replaceChildren();
 	doc.documentElement.style.setProperty("overscroll-behavior", "none");
 	doc.body.style.setProperty("overscroll-behavior", "none");
-	const paused = doc.createElement("style");
-	paused.textContent = PAUSED_ANIMATIONS_STYLE;
+	const paused = studioStyle(doc, PAUSED_ANIMATIONS_STYLE);
 	doc.head.appendChild(paused);
 	return `<!doctype html>${doc.documentElement.outerHTML}`;
 }
@@ -106,8 +115,7 @@ function createCanvasDocument(previewDocument, href) {
 */
 function adoptCanvasDocument(iframe, root, viewportHeight) {
 	const doc = root.ownerDocument;
-	const paused = doc.createElement("style");
-	paused.textContent = PAUSED_ANIMATIONS_STYLE;
+	const paused = studioStyle(doc, PAUSED_ANIMATIONS_STYLE);
 	doc.head.appendChild(paused);
 	const restored = [doc.documentElement, doc.body].map((element) => ({
 		element,
@@ -199,8 +207,7 @@ function observeCanvasDocument(iframe, root, viewportHeight, suspended = () => f
 	doc.documentElement.style.setProperty("--camox-viewport-height", `${baseline}px`);
 	doc.documentElement.style.setProperty("overflow", "hidden", "important");
 	doc.body.style.setProperty("overflow", "hidden", "important");
-	const overlapStyle = doc.createElement("style");
-	overlapStyle.textContent = BLOCK_OVERLAP_STYLE;
+	const overlapStyle = studioStyle(doc, BLOCK_OVERLAP_STYLE);
 	doc.head.appendChild(overlapStyle);
 	const followOverlap = () => {
 		const overlap = iframe.closest(`[${BLOCK_OVERLAP_ATTRIBUTE}]`);

package/dist/features/canvas/sidebar/CanvasViewHeader.js

@@ -1,6 +1,6 @@
 import { SidebarStackHeader, useSelectionViewCount } from "../../preview/components/SidebarStack.js";
-import { SHOW_WHOLE_CANVAS_SHORTCUT } from "../../preview/previewConstants.js";
 import { formatShortcut } from "../../../lib/shortcuts.js";
+import { SHOW_WHOLE_CANVAS_SHORTCUT } from "../../preview/previewConstants.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 

package/dist/features/canvas/sidebar/{CanvasSidebar.js → ContentSidebar.js}

@@ -1,18 +1,18 @@
 import { SidebarStack, SidebarStackView } from "../../preview/components/SidebarStack.js";
-import { CanvasSidebarFrame } from "./CanvasSidebarFrame.js";
 import { CanvasViewHeader } from "./CanvasViewHeader.js";
+import { ContentSidebarFrame } from "./ContentSidebarFrame.js";
 import { CreatePageModal } from "../../preview/components/CreatePageModal.js";
 import { CanvasNavigator } from "./CanvasNavigator.js";
 import { PageInspector } from "./PageInspector.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/features/canvas/sidebar/CanvasSidebar.tsx
+//#region src/features/canvas/sidebar/ContentSidebar.tsx
 /**
 * The sidebar beside the Canvas, a stack of views: the Canvas's own, which shows the Canvas
 * Navigator, then the Canvas Inspector of the selected Page laid over it, if any.
 */
-function CanvasSidebar(t0) {
+function ContentSidebar(t0) {
 	const $ = c(16);
 	const { page, navigator, onShowWholeCanvas, owner: t1, pageRecord, runtimeBasePath } = t0;
 	const owner = t1 === void 0 ? null : t1;
@@ -61,7 +61,7 @@ function CanvasSidebar(t0) {
 	} else t7 = $[12];
 	let t8;
 	if ($[13] !== t2 || $[14] !== t6) {
-		t8 = /* @__PURE__ */ jsxs(CanvasSidebarFrame, {
+		t8 = /* @__PURE__ */ jsxs(ContentSidebarFrame, {
 			label: t2,
 			children: [t6, t7]
 		});
@@ -73,4 +73,4 @@ function CanvasSidebar(t0) {
 }
 
 //#endregion
-export { CanvasSidebar };
+export { ContentSidebar };

package/dist/features/canvas/sidebar/{CanvasSidebarFrame.js → ContentSidebarFrame.js}

@@ -1,13 +1,13 @@
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/features/canvas/sidebar/CanvasSidebarFrame.tsx
+//#region src/features/canvas/sidebar/ContentSidebarFrame.tsx
 /**
-* The Canvas sidebar's own box, laid over the Canvas's left side: the Canvas Navigator or the
+* The Content Sidebar's own box, laid over the Canvas's left side: the Canvas Navigator or the
 * Canvas Inspector, or a stand-in for either, goes in it. Only its cards have a background:
 * around them, the Canvas shows through.
 */
-function CanvasSidebarFrame(t0) {
+function ContentSidebarFrame(t0) {
 	const $ = c(9);
 	let children;
 	let label;
@@ -46,4 +46,4 @@ function CanvasSidebarFrame(t0) {
 }
 
 //#endregion
-export { CanvasSidebarFrame };
+export { ContentSidebarFrame };

package/dist/features/canvas/sidebar/{CanvasSidebarSkeleton.js → ContentSidebarSkeleton.js}

@@ -1,17 +1,17 @@
 import { SidebarStack, SidebarStackView } from "../../preview/components/SidebarStack.js";
 import { CanvasInspectorBody, CanvasInspectorHeaderSkeleton } from "./CanvasInspector.js";
-import { CanvasSidebarFrame } from "./CanvasSidebarFrame.js";
 import { CanvasViewHeader } from "./CanvasViewHeader.js";
+import { ContentSidebarFrame } from "./ContentSidebarFrame.js";
 import { CuratedPageSkeleton, LayoutPageSkeleton } from "./PageInspectorSkeleton.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/features/canvas/sidebar/CanvasSidebarSkeleton.tsx
+//#region src/features/canvas/sidebar/ContentSidebarSkeleton.tsx
 /**
-* Stands in for the Canvas sidebar while the Canvas loads, where the sidebar will show. For a
+* Stands in for the Content Sidebar while the Canvas loads, where the sidebar will show. For a
 * selected Page, it takes the Canvas Inspector's layout. Without one, it is empty.
 */
-function CanvasSidebarSkeleton(t0) {
+function ContentSidebarSkeleton(t0) {
 	const $ = c(5);
 	const { page: t1, layoutPage: t2 } = t0;
 	const page = t1 === void 0 ? true : t1;
@@ -33,8 +33,8 @@ function CanvasSidebarSkeleton(t0) {
 	} else t3 = $[2];
 	let t4;
 	if ($[3] !== t3) {
-		t4 = /* @__PURE__ */ jsx(CanvasSidebarFrame, {
-			"data-canvas-sidebar-skeleton": true,
+		t4 = /* @__PURE__ */ jsx(ContentSidebarFrame, {
+			"data-content-sidebar-skeleton": true,
 			children: t3
 		});
 		$[3] = t3;
@@ -44,4 +44,4 @@ function CanvasSidebarSkeleton(t0) {
 }
 
 //#endregion
-export { CanvasSidebarSkeleton };
+export { ContentSidebarSkeleton };

package/dist/features/preview/CamoxPreview.js

@@ -14,7 +14,7 @@ import { CanvasLoadingScreen } from "../canvas/CanvasLoadingScreen.js";
 import { canvasStore } from "../canvas/canvasStore.js";
 import { previewStore, selectIsCanvasShown } from "./previewStore.js";
 import { SHOW_WHOLE_CANVAS_SHORTCUT, TOGGLE_CANVAS_SHORTCUT } from "./previewConstants.js";
-import { CanvasSidebarSkeleton } from "../canvas/sidebar/CanvasSidebarSkeleton.js";
+import { ContentSidebarSkeleton } from "../canvas/sidebar/ContentSidebarSkeleton.js";
 import { takeShowCanvasRequest } from "../provider/signInShortcut.js";
 import { PreviewEditingOwnerContext } from "./previewSelection.js";
 import { RendererFramesProvider, RendererSlot, useRendererHost, useRendererStatus } from "../renderer/RendererFrames.js";
@@ -577,7 +577,7 @@ const PreviewShell = (t0) => {
 	const t14 = !!derivedLayout;
 	let t15;
 	if ($[20] !== t13 || $[21] !== t14) {
-		t15 = /* @__PURE__ */ jsx(CanvasSidebarSkeleton, {
+		t15 = /* @__PURE__ */ jsx(ContentSidebarSkeleton, {
 			page: t13,
 			layoutPage: t14
 		});

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

@@ -5,7 +5,7 @@ import { PageViewportContext } from "../../runtime/pageViewport.js";
 import { PreviewDocumentContext } from "../../runtime/PreviewDocumentContext.js";
 import { ViewportContinuityContext, capturePreviewAnchor, restorePreviewAnchor } from "../viewportContinuity.js";
 import { PreviewActivationContext } from "./PreviewActivation.js";
-import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle } from "./previewStyles.js";
+import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle, restyle } from "./previewStyles.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -21,23 +21,6 @@ function useFrame() {
 	if (!context) throw new Error("useFrame must be used within a Frame");
 	return context;
 }
-/** The stylesheets of a document's head that are the site's: not the studio's. */
-const SITE_STYLESHEETS = "link[rel~=\"stylesheet\"], style";
-const siteStylesheetsOf = (head) => Array.from(head.querySelectorAll(SITE_STYLESHEETS)).filter((element) => element.parentElement === head && isSiteStyle(element));
-/**
-* Gives the frame's document the site stylesheets of `html`, a site document: the ones it no
-* longer has go, and its new ones are added, the rest of the frame left as it is.
-*/
-function restyle(frame, html) {
-	const doc = frame.document;
-	const { DOMParser } = frame;
-	const wanted = siteStylesheetsOf(new DOMParser().parseFromString(html, "text/html").head);
-	const held = siteStylesheetsOf(doc.head);
-	const wantedMarkup = new Set(wanted.map((element) => element.outerHTML));
-	const heldMarkup = new Set(held.map((element) => element.outerHTML));
-	for (const element of held) if (!wantedMarkup.has(element.outerHTML)) element.remove();
-	for (const element of wanted) if (!heldMarkup.has(element.outerHTML)) doc.head.appendChild(doc.importNode(element, true));
-}
 function ClearServerMarkup(t0) {
 	const $ = c(4);
 	const { nodes } = t0;

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

@@ -1,6 +1,6 @@
 import { previewStore, selectIsCanvasShown } from "../previewStore.js";
-import { TOGGLE_CANVAS_SHORTCUT } from "../previewConstants.js";
 import { formatShortcut } from "../../../lib/shortcuts.js";
+import { TOGGLE_CANVAS_SHORTCUT } from "../previewConstants.js";
 import { prefetchCanvas } from "./CanvasPreview.js";
 import { DeviceSelector } from "../../../components/DeviceSelector.js";
 import { c } from "react/compiler-runtime";

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

@@ -35,7 +35,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 //#region src/features/preview/components/SelectionEditor.tsx
 const EMPTY_CONTENT = {};
 /**
-* The path's headers. The `kept` first steps, the selection and its parent always show; two or
+* 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) {
@@ -43,7 +43,7 @@ function stackRows(items, kept) {
 		index,
 		item
 	}));
-	const between = items.slice(kept, -2);
+	const between = items.slice(kept, -1);
 	if (between.length < 2) return rows;
 	return [
 		...rows.slice(0, kept),