camox 0.65.1 → 0.67.0

package/dist/features/runtime/RuntimeChrome.js

@@ -5,6 +5,7 @@ import { Navbar } from "../studio/components/Navbar.js";
 import { EditingFallbackContext } from "./editingFallback.js";
 import { PreviewToolbar } from "../preview/components/PreviewToolbar.js";
 import { AgentSidebar } from "../studio/components/AgentSidebar.js";
+import { UnnamedDraftBar } from "../studio/components/UnnamedDraftBar.js";
 import { FollowAgentProvider } from "../studio/FollowAgentProvider.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -14,7 +15,7 @@ import studioCssUrl from "virtual:camox-studio-css";
 //#region src/features/runtime/RuntimeChrome.tsx
 const renderEditingFallback = ({ layoutPage }) => /* @__PURE__ */ jsx(StudioEditingFallback, { layoutPage });
 function RuntimeChrome(t0) {
-	const $ = c(32);
+	const $ = c(39);
 	const { input, children } = t0;
 	const website = !input.routeKind;
 	const hidden = useSelector(previewStore, _temp);
@@ -92,56 +93,81 @@ function RuntimeChrome(t0) {
 		$[15] = t11;
 		$[16] = t13;
 	} else t13 = $[16];
-	let t14;
-	if ($[17] !== t13 || $[18] !== t9) {
-		t14 = /* @__PURE__ */ jsxs("div", {
-			className: "relative flex min-h-0 min-w-0 flex-1 flex-col",
-			children: [t9, t13]
+	const t14 = website && hidden;
+	const t15 = website ? "max-md:hidden" : void 0;
+	let t16;
+	if ($[17] !== website) {
+		t16 = /* @__PURE__ */ jsx(UnnamedDraftBar, { stacked: website });
+		$[17] = website;
+		$[18] = t16;
+	} else t16 = $[18];
+	let t17;
+	if ($[19] !== t14 || $[20] !== t15 || $[21] !== t16) {
+		t17 = /* @__PURE__ */ jsx("div", {
+			hidden: t14,
+			className: t15,
+			children: t16
 		});
-		$[17] = t13;
-		$[18] = t9;
 		$[19] = t14;
-	} else t14 = $[19];
-	const t15 = !showAgentSidebar;
-	let t16;
-	if ($[20] !== t15) {
-		t16 = /* @__PURE__ */ jsx(AgentSidebar, { hidden: t15 });
 		$[20] = t15;
 		$[21] = t16;
-	} else t16 = $[21];
-	let t17;
-	if ($[22] !== t14 || $[23] !== t16) {
-		t17 = /* @__PURE__ */ jsxs("div", {
-			className: "relative flex min-h-0 flex-1",
-			children: [t14, t16]
-		});
-		$[22] = t14;
-		$[23] = t16;
-		$[24] = t17;
-	} else t17 = $[24];
+		$[22] = t17;
+	} else t17 = $[22];
 	let t18;
-	if ($[25] !== t17 || $[26] !== t7) {
+	if ($[23] !== t13 || $[24] !== t17 || $[25] !== t9) {
 		t18 = /* @__PURE__ */ jsxs("div", {
+			className: "relative flex min-h-0 min-w-0 flex-1 flex-col",
+			children: [
+				t9,
+				t13,
+				t17
+			]
+		});
+		$[23] = t13;
+		$[24] = t17;
+		$[25] = t9;
+		$[26] = t18;
+	} else t18 = $[26];
+	const t19 = !showAgentSidebar;
+	let t20;
+	if ($[27] !== t19) {
+		t20 = /* @__PURE__ */ jsx(AgentSidebar, { hidden: t19 });
+		$[27] = t19;
+		$[28] = t20;
+	} else t20 = $[28];
+	let t21;
+	if ($[29] !== t18 || $[30] !== t20) {
+		t21 = /* @__PURE__ */ jsxs("div", {
+			className: "relative flex min-h-0 flex-1",
+			children: [t18, t20]
+		});
+		$[29] = t18;
+		$[30] = t20;
+		$[31] = t21;
+	} else t21 = $[31];
+	let t22;
+	if ($[32] !== t21 || $[33] !== t7) {
+		t22 = /* @__PURE__ */ jsxs("div", {
 			className: "bg-background flex h-screen flex-col overflow-hidden",
-			children: [t7, t17]
+			children: [t7, t21]
 		});
-		$[25] = t17;
-		$[26] = t7;
-		$[27] = t18;
-	} else t18 = $[27];
-	let t19;
-	if ($[28] !== input.runtimeBasePath || $[29] !== t18 || $[30] !== website) {
-		t19 = /* @__PURE__ */ jsxs(FollowAgentProvider, {
+		$[32] = t21;
+		$[33] = t7;
+		$[34] = t22;
+	} else t22 = $[34];
+	let t23;
+	if ($[35] !== input.runtimeBasePath || $[36] !== t22 || $[37] !== website) {
+		t23 = /* @__PURE__ */ jsxs(FollowAgentProvider, {
 			runtimeBasePath: t1,
 			website,
-			children: [t2, t18]
+			children: [t2, t22]
 		});
-		$[28] = input.runtimeBasePath;
-		$[29] = t18;
-		$[30] = website;
-		$[31] = t19;
-	} else t19 = $[31];
-	return t19;
+		$[35] = input.runtimeBasePath;
+		$[36] = t22;
+		$[37] = website;
+		$[38] = t23;
+	} else t23 = $[38];
+	return t23;
 }
 function _temp(state) {
 	return state.context.isToolbarHidden;

package/dist/features/runtime/pageApp.js

@@ -9,6 +9,7 @@ import { CoreCamoxProvider } from "../provider/CoreCamoxProvider.js";
 import { CuratedPageContent } from "../page/CuratedPageContent.js";
 import { DerivedPageContent } from "../page/DerivedPageContent.js";
 import { UnplacedBlockContent } from "../page/UnplacedBlockContent.js";
+import { UnplacedLayoutContent } from "../page/UnplacedLayoutContent.js";
 import { EditingFallbackSlot } from "./editingFallback.js";
 import { PageNavigationProvider } from "./pageNavigation.js";
 import { RuntimeChromeSlot } from "./runtimeChromeLoader.js";
@@ -252,9 +253,9 @@ function _temp2() {
 function _temp() {
 	return true;
 }
-/** The page's blocks, read-only, or the look document's one unplaced block. */
+/** The page's blocks, read-only, or the look document's unplaced block or Layout. */
 function PageContent(t0) {
-	const $ = c(6);
+	const $ = c(9);
 	const { camoxApp, input } = t0;
 	if (input.lookBlock) {
 		let t1;
@@ -265,24 +266,37 @@ function PageContent(t0) {
 		} else t1 = $[1];
 		return t1;
 	}
-	if (input.derived) {
+	if (input.lookLayout) {
 		let t1;
-		if ($[2] !== camoxApp || $[3] !== input.derived) {
-			t1 = /* @__PURE__ */ jsx(DerivedPageContent, {
+		if ($[2] !== camoxApp || $[3] !== input.lookLayout) {
+			t1 = /* @__PURE__ */ jsx(UnplacedLayoutContent, {
 				camoxApp,
-				derived: input.derived
+				lookLayout: input.lookLayout
 			});
 			$[2] = camoxApp;
-			$[3] = input.derived;
+			$[3] = input.lookLayout;
 			$[4] = t1;
 		} else t1 = $[4];
 		return t1;
 	}
+	if (input.derived) {
+		let t1;
+		if ($[5] !== camoxApp || $[6] !== input.derived) {
+			t1 = /* @__PURE__ */ jsx(DerivedPageContent, {
+				camoxApp,
+				derived: input.derived
+			});
+			$[5] = camoxApp;
+			$[6] = input.derived;
+			$[7] = t1;
+		} else t1 = $[7];
+		return t1;
+	}
 	let t1;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = /* @__PURE__ */ jsx(CuratedPageContent, {});
-		$[5] = t1;
-	} else t1 = $[5];
+		$[8] = t1;
+	} else t1 = $[8];
 	return t1;
 }
 function StudioLoadError() {

package/dist/features/runtime/runtime.d.ts

@@ -6,6 +6,7 @@ import { AnalyticsProviders } from "./analytics.js";
 import { RuntimeOwnedRouteKind } from "./runtimeRoutes.js";
 import { StudioRenderInput } from "./studioApp.js";
 import { DraftRead, MemberProject, PageHead, createServerApiClient } from "../routes/pageRuntime.js";
+import { LookPlaceholderHeight } from "@camox/api-contract/drafts";
 import { UseHeadInput } from "unhead/types";
 //#region src/features/runtime/runtime.d.ts
 /** The studio's own routes, rather than a page or the Canvas. */
@@ -39,6 +40,18 @@ export interface PageRenderInput extends DraftRead {
    * instead of a page. Its block bundle is in the dehydrated state.
    */
   lookBlock?: string;
+  /**
+   * The look document's Layout Definition mode: the curated Layout it shows around no page, its
+   * blocks' bundles in the dehydrated state, with a placeholder `placeholder` tall where a page's
+   * content goes.
+   */
+  lookLayout?: {
+    layoutId: string;
+    layout: Awaited<ReturnType<ReturnType<typeof createServerApiClient>["layouts"]["getUnplaced"]>>["layout"];
+    placeholder: LookPlaceholderHeight;
+    path: string;
+    projectName: string;
+  };
   /**
    * Whether this is the look document (ADR 0032), whose client only shows the draft: it asks
    * nothing about a session and offers no sign-in, which would add requests to its captures.

package/dist/features/runtime/runtime.js

@@ -27,7 +27,7 @@ import { getPageBlockTypes } from "./pageBlockTypes.js";
 import { withPageUrls } from "./structuredData.js";
 import { curatedPageDescription, pageRecords, placedBlockNodes, withStructuredData } from "./pageGraph.js";
 import { createProjectLogoResponse, projectLogo } from "./projectLogo.js";
-import { DRAFT_SEARCH_PARAM, LOCALE_HEADER, LOOK_BLOCK_DEFINITION_PARAM, LOOK_CONTENT_PARAM, LOOK_LOCALE_PARAM, LOOK_PATH_PARAM, LOOK_SETTINGS_PARAM, UNPLACED_BLOCK_ID } from "@camox/api-contract/drafts";
+import { DRAFT_SEARCH_PARAM, LOCALE_HEADER, LOOK_BLOCKS_PARAM, LOOK_BLOCK_DEFINITION_PARAM, LOOK_CONTENT_PARAM, LOOK_LAYOUT_DEFINITION_PARAM, LOOK_LOCALE_PARAM, LOOK_PATH_PARAM, LOOK_PLACEHOLDER_HEIGHTS, LOOK_PLACEHOLDER_PARAM, LOOK_SETTINGS_PARAM, UNPLACED_BLOCK_ID } from "@camox/api-contract/drafts";
 import { QueryClient, dehydrate } from "@tanstack/react-query";
 import { createHead, renderSSRHead } from "@unhead/react/server";
 
@@ -571,6 +571,7 @@ async function createLookDocumentResponse(request, options) {
 	if (!lookToken || !draftId || !apiUrl || !authenticationUrl || !projectUuid || !renderPage) return lookNotFound();
 	const tag = searchParams.get(LOOK_LOCALE_PARAM)?.toLowerCase();
 	const blockDefinition = searchParams.get(LOOK_BLOCK_DEFINITION_PARAM);
+	const layoutDefinition = searchParams.get(LOOK_LAYOUT_DEFINITION_PARAM);
 	const queryClient = new QueryClient();
 	let locales;
 	let locale;
@@ -590,7 +591,7 @@ async function createLookDocumentResponse(request, options) {
 			projectUuid,
 			queryClient
 		};
-		shown = blockDefinition ? await lookAtBlockDefinition(request, options, reading, blockDefinition) : await lookAtPage(request, options, reading);
+		shown = layoutDefinition ? await lookAtLayoutDefinition(request, options, reading, layoutDefinition) : blockDefinition ? await lookAtBlockDefinition(request, options, reading, blockDefinition) : await lookAtPage(request, options, reading);
 	} catch (error) {
 		if (isAuthSessionError(error) || isNotFoundError(error)) return lookNotFound();
 		throw error;
@@ -806,6 +807,61 @@ async function lookAtBlockDefinition(request, options, reading, type) {
 		lookBlock: UNPLACED_BLOCK_ID
 	};
 }
+/**
+* The look document's Layout Definition mode: the curated Layout `layoutId` around no page, its
+* blocks with their default content and Block Settings and the overrides the URL gives merged on,
+* by the API, which checks them against their schemas and refuses a Singleton or Derived Layout,
+* answering its message. Where a page's content goes, a labelled placeholder as tall as the URL
+* says. Its path is the Locale's home, which links resolve against.
+*/
+async function lookAtLayoutDefinition(request, options, reading, layoutId) {
+	const { apiUrl, lookToken, draftId, locale, projectUuid, queryClient } = reading;
+	const { searchParams } = new URL(request.url);
+	const blocks = overrideParam(searchParams, LOOK_BLOCKS_PARAM);
+	if (!blocks.ok) return lookRefused(blocks.error);
+	const placeholder = searchParams.get(LOOK_PLACEHOLDER_PARAM) ?? LOOK_PLACEHOLDER_HEIGHTS[0];
+	if (!LOOK_PLACEHOLDER_HEIGHTS.includes(placeholder)) return lookRefused(`The placeholder is ${LOOK_PLACEHOLDER_HEIGHTS.join(" or ")}.`);
+	const studioCache = createServerStudioCache(queryClient, {
+		apiUrl,
+		lookToken,
+		locale
+	});
+	const inDraft = { in: draftId };
+	let shared;
+	try {
+		[shared] = await Promise.all([createServerApiClient(apiUrl, {
+			lookToken,
+			draftId,
+			locale
+		}).layouts.getUnplaced({
+			projectUuid,
+			layoutId,
+			blocks: blocks.value
+		}), studioCache.ensure(reads.pageList({ projectUuid }), inDraft).catch(() => null)]);
+	} catch (error) {
+		if (isBadRequestError(error)) return lookRefused(error.message);
+		throw error;
+	}
+	studioCache.land(reads.layoutStructure({
+		projectUuid,
+		layoutId
+	}), shared, inDraft);
+	const pathname = localizedPath("/", locale);
+	return {
+		head: {},
+		href: lookHref(request, options, pathname, draftId).href,
+		layoutIdentity: null,
+		loaderData: null,
+		pathname,
+		lookLayout: {
+			layoutId,
+			layout: shared.layout,
+			placeholder,
+			path: pathname,
+			projectName: shared.projectName
+		}
+	};
+}
 /** Whether an API error refused the request's input, such as an override its schema refuses. */
 function isBadRequestError(error) {
 	const { code, status } = error ?? {};

package/dist/features/studio/components/AgentSidebar.js

@@ -7,8 +7,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/features/studio/components/AgentSidebar.tsx
 /**
-* The sidebar on the Canvas's right side, where editors work with Camox's agent: the Patrol
-* over the Chat widget, which gets the larger share of the height. Laid over the Canvas,
+* The sidebar on the Canvas's right side, where editors work with Camox's agent: the Patrol, as
+* tall as its patrollers, over the Chat widget, which gets the rest of the height. Laid over the Canvas,
 * as the Content Sidebar is over its left: only the cards have a background, and the Canvas shows
 * around them. Elsewhere in the studio it is only hidden, so the chat keeps its thread and the
 * Preview and Studio pages follow the editor's runs too.
@@ -24,7 +24,7 @@ function AgentSidebar(t0) {
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = cn("absolute inset-y-0 right-0 z-10 flex flex-col gap-2 py-2 max-md:hidden", SIDEBAR_GUTTER);
 		t3 = { width: 265 };
-		t4 = /* @__PURE__ */ jsx(Patrol, { className: "min-h-0 flex-[3_1_0]" });
+		t4 = /* @__PURE__ */ jsx(Patrol, { className: "min-h-0 flex-[0_1_auto]" });
 		t5 = /* @__PURE__ */ jsx(ChatWidget, { className: "min-h-0 flex-[7_1_0]" });
 		$[0] = t2;
 		$[1] = t3;

package/dist/features/studio/components/ChatWidget.js

@@ -10,7 +10,7 @@ import { useThread } from "../../../lib/use-thread.js";
 import { EditorWhereContext } from "../editorWhereContext.js";
 import { useEditorSelection } from "../useEditorSelection.js";
 import { ConnectAgent } from "./ConnectAgent.js";
-import { ThreadComposer } from "./ThreadComposer.js";
+import { ThreadComposer, useComposerCarrier } from "./ThreadComposer.js";
 import { ThreadMessages } from "./ThreadMessages.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
@@ -72,7 +72,7 @@ function ChatWidget(t0) {
 	return t4;
 }
 function CurrentThread() {
-	const $ = c(14);
+	const $ = c(15);
 	const { apiUrl, projectUuid } = React.useContext(AuthContext);
 	let t0;
 	if ($[0] !== projectUuid) {
@@ -84,6 +84,7 @@ function CurrentThread() {
 	const draftId = useCurrentDraftId();
 	const draftScope = useDraftScope();
 	const navigate = useNavigate();
+	const composerCarry = useComposerCarrier();
 	let t1;
 	if ($[2] !== draftScope) {
 		t1 = (started) => draftScope.enterStarted(started);
@@ -111,27 +112,29 @@ function CurrentThread() {
 	}
 	const t3 = `${project.id}:${draftId ?? "live"}`;
 	let t4;
-	if ($[7] !== apiUrl || $[8] !== draftId || $[9] !== enterDraft || $[10] !== openDraft || $[11] !== project.id || $[12] !== t3) {
+	if ($[7] !== apiUrl || $[8] !== composerCarry || $[9] !== draftId || $[10] !== enterDraft || $[11] !== openDraft || $[12] !== project.id || $[13] !== t3) {
 		t4 = /* @__PURE__ */ jsx(Thread, {
 			apiUrl,
 			projectId: project.id,
 			draftId,
 			onEnterDraft: enterDraft,
-			onOpenDraft: openDraft
+			onOpenDraft: openDraft,
+			composerCarry
 		}, t3);
 		$[7] = apiUrl;
-		$[8] = draftId;
-		$[9] = enterDraft;
-		$[10] = openDraft;
-		$[11] = project.id;
-		$[12] = t3;
-		$[13] = t4;
-	} else t4 = $[13];
+		$[8] = composerCarry;
+		$[9] = draftId;
+		$[10] = enterDraft;
+		$[11] = openDraft;
+		$[12] = project.id;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
 	return t4;
 }
 function Thread(t0) {
-	const $ = c(40);
-	const { apiUrl, projectId, draftId, onEnterDraft, onOpenDraft } = t0;
+	const $ = c(41);
+	const { apiUrl, projectId, draftId, onEnterDraft, onOpenDraft, composerCarry } = t0;
 	let t1;
 	if ($[0] !== onEnterDraft) {
 		t1 = { onEnterDraft };
@@ -248,35 +251,37 @@ function Thread(t0) {
 	} else t12 = $[28];
 	const t13 = asked ?? void 0;
 	let t14;
-	if ($[29] !== sendFollowing || $[30] !== stop || $[31] !== t11 || $[32] !== t12 || $[33] !== t13 || $[34] !== view.running) {
+	if ($[29] !== composerCarry || $[30] !== sendFollowing || $[31] !== stop || $[32] !== t11 || $[33] !== t12 || $[34] !== t13 || $[35] !== view.running) {
 		t14 = /* @__PURE__ */ jsx(ThreadComposer, {
 			onSend: sendFollowing,
 			onStop: stop,
 			selection: t11,
 			onClearSelection: t12,
 			running: view.running,
-			filled: t13
+			filled: t13,
+			carry: composerCarry
 		});
-		$[29] = sendFollowing;
-		$[30] = stop;
-		$[31] = t11;
-		$[32] = t12;
-		$[33] = t13;
-		$[34] = view.running;
-		$[35] = t14;
-	} else t14 = $[35];
+		$[29] = composerCarry;
+		$[30] = sendFollowing;
+		$[31] = stop;
+		$[32] = t11;
+		$[33] = t12;
+		$[34] = t13;
+		$[35] = view.running;
+		$[36] = t14;
+	} else t14 = $[36];
 	let t15;
-	if ($[36] !== t10 || $[37] !== t14 || $[38] !== t9) {
+	if ($[37] !== t10 || $[38] !== t14 || $[39] !== t9) {
 		t15 = /* @__PURE__ */ jsxs(Fragment, { children: [
 			t9,
 			t10,
 			t14
 		] });
-		$[36] = t10;
-		$[37] = t14;
-		$[38] = t9;
-		$[39] = t15;
-	} else t15 = $[39];
+		$[37] = t10;
+		$[38] = t14;
+		$[39] = t9;
+		$[40] = t15;
+	} else t15 = $[40];
 	return t15;
 }
 function _temp(state) {