camox 0.53.1 → 0.54.0

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,17 @@ 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 color of a card's edges: the border's, solid. Dark mode's border is translucent, so it's
+* laid over the Canvas behind the sidebars, to look the same over the card as beside it.
 */
-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_EDGE_COLOR = "border-border dark:border-[color-mix(in_srgb,var(--color-muted),white_10%)]";
+/** The front card's sides and bottom, under its header. */
+const CARD_BODY_EDGES = `rounded-b-lg border border-t-0 ${CARD_EDGE_COLOR}`;
+/** The bottom card's top and sides, as it meets the top of a sidebar. */
+const BOTTOM_CARD_EDGES = `rounded-t-lg border border-b-0 ${CARD_EDGE_COLOR}`;
+/** The front card's top and sides, over the cards behind it. */
+const FRONT_CARD_EDGES = `border border-b-0 ${CARD_EDGE_COLOR}`;
 /**
 * 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 +49,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 +111,10 @@ const GOING = {
 		},
 		PULLED
 	],
-	back: [PLACED, BEHIND],
+	back: [PLACED, {
+		...BEHIND,
+		opacity: 0
+	}],
 	same: [{ opacity: 1 }, { opacity: 0 }]
 };
 const GOING_TIMING = {
@@ -338,7 +352,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 border border-t-0 border-border dark:border-[color-mix(in_srgb,var(--color-muted),white_10%)]";
 	let t2;
 	if ($[0] !== className || $[1] !== t1) {
 		t2 = cn("bg-background min-h-0 flex-1 origin-top", t1, className);
@@ -360,8 +374,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 +411,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 +434,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 +461,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 border border-b-0 border-border dark:border-[color-mix(in_srgb,var(--color-muted),white_10%)]";
+	const t14 = covered && !first && `border ${CARD_EDGE_COLOR} 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 && (inStack ? `${FRONT_CARD_EDGES} shadow-[0_-3px_8px_-4px_rgb(0_0_0/0.08)] dark:shadow-[0_-3px_8px_-4px_rgb(0_0_0/0.4)]` : `border-t ${CARD_EDGE_COLOR} 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 +478,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/runtime/runtime.d.ts

@@ -93,6 +93,11 @@ export interface RuntimeOptions {
   rendererClientEntryUrl?: string;
   getCamoxApp?: () => Promise<CamoxApp>;
   getDocument?: () => Promise<CamoxDocument>;
+  /**
+   * The app's stylesheet, compiled, which page images render with: a `toImage` styles its
+   * elements with the same classes as the site.
+   */
+  getImageStylesheet?: () => Promise<string>;
   projectUuid?: string;
   renderPage?: (input: PageRenderInput) => Promise<string>;
   renderStudio?: (input: StudioRenderInput) => Promise<string>;

package/dist/features/runtime/runtime.js

@@ -14,6 +14,7 @@ import { discoverLayoutPages, matchDerivedLayout } from "../../core/derivedRoute
 import { buildLayoutContext, curatedLayoutContext } from "../../core/layoutContext.js";
 import { buildCamoxPageHead, buildFaviconUrl, buildPageHead, buildPageMeta, createServerApiClient, createServerStudioCache, curatedMarkdownResponse, declarePage, isNotFoundError, loadCamoxPageForRequest, parseMarkdownPath, prefersMarkdown, readDraftOrLive, readPageMarkdown, readScopeLocales, renderedHref, resolveMemberProject, withFrontMatter } from "../routes/pageRuntime.js";
 import { assetPrefix } from "./assetPrefix.js";
+import { documentGoogleFonts } from "../og/documentFonts.js";
 import { alternatesByPage, findAlternates, hreflangLinks } from "./alternates.js";
 import { configuredProviders, renderAnalyticsScripts } from "./analytics.js";
 import { omitArtifactSources } from "./artifactSources.js";
@@ -294,16 +295,26 @@ async function createRoutesResponse(request, options) {
 }
 /**
 * The image of the page `/og?path=` names, by its path with its locale's prefix: its layout's
-* `toImage`, or Camox's default image, rendered with the page's context. Only real pages have
-* one, read as the page itself would be, in the draft the URL names for a member.
+* `toImage`, or Camox's default image, rendered with the page's context and the site's
+* stylesheet and fonts. Only real pages have one, read as the page itself would be, in the draft
+* the URL names for a member.
 */
 async function createOgResponse(request, options) {
 	const camoxApp = await options.getCamoxApp?.();
 	if (!camoxApp) return Response.json({ message: "Camox app registry is not available." }, { status: 500 });
 	const source = await readPageImageSource(request, options, camoxApp);
 	if (!source) return new Response("Not found", { status: 404 });
+	const [css, document] = await Promise.all([options.getImageStylesheet?.(), options.getDocument?.()]);
+	const style = {
+		css,
+		fonts: documentGoogleFonts(document ?? {})
+	};
 	const headers = {
-		ETag: await etagOf(JSON.stringify([source.layout?.id ?? null, source.context])),
+		ETag: await etagOf(JSON.stringify([
+			source.layout?.id ?? null,
+			source.context,
+			style
+		])),
 		"Cache-Control": isPrivateRender(request, options) ? "private, no-store" : "public, no-cache"
 	};
 	if (namesEtag(request, headers.ETag)) return new Response(null, {
@@ -311,7 +322,7 @@ async function createOgResponse(request, options) {
 		headers
 	});
 	const toImage = source.layout?.toImage ?? DefaultPageImage;
-	const image = await renderPageImage(toImage(source.context));
+	const image = await renderPageImage(toImage(source.context), style);
 	for (const [name, value] of Object.entries(headers)) image.headers.set(name, value);
 	return image;
 }

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

@@ -7,6 +7,7 @@ import { BOTTOM_CARD_EDGES, CARD_BODY_EDGES, SIDEBAR_GUTTER } from "../../previe
 import { draftLabel } from "../draftLabel.js";
 import { FollowAgentContext } from "../followAgentContext.js";
 import { useThread } from "../../../lib/use-thread.js";
+import { Squareling } from "./Squareling.js";
 import { ThreadComposer } from "./ThreadComposer.js";
 import { ThreadMessages } from "./ThreadMessages.js";
 import { c } from "react/compiler-runtime";
@@ -34,9 +35,12 @@ function ChatSidebar(t0) {
 		t3 = { width: 265 };
 		t4 = /* @__PURE__ */ jsxs("header", {
 			className: cn("bg-background flex h-11 min-w-0 shrink-0 items-center justify-center gap-2 px-3", BOTTOM_CARD_EDGES),
-			children: [/* @__PURE__ */ jsx(CamoxMark, {}), /* @__PURE__ */ jsx("h2", {
+			children: [/* @__PURE__ */ jsx(Squareling, {
+				status: "idle",
+				className: "size-5"
+			}), /* @__PURE__ */ jsx("h2", {
 				className: "truncate text-sm font-medium",
-				children: "Chat"
+				children: "Agent"
 			})]
 		});
 		t5 = /* @__PURE__ */ jsx("div", {
@@ -56,7 +60,7 @@ function ChatSidebar(t0) {
 	let t6;
 	if ($[4] !== hidden) {
 		t6 = /* @__PURE__ */ jsxs("aside", {
-			"aria-label": "Chat",
+			"aria-label": "Agent",
 			"data-chat-sidebar": true,
 			hidden,
 			className: t2,
@@ -68,25 +72,6 @@ function ChatSidebar(t0) {
 	} else t6 = $[5];
 	return t6;
 }
-/** Camox's logo, beside the heading: the agent is Camox. */
-function CamoxMark() {
-	const $ = c(1);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("svg", {
-			"aria-hidden": true,
-			viewBox: "0 0 191.03 132",
-			className: "size-5 shrink-0",
-			xmlns: "http://www.w3.org/2000/svg",
-			children: /* @__PURE__ */ jsx("path", {
-				d: "M0 22.55A22.55 22.55 0 0 1 22.55 0L90.19 0A5.32 5.32 0 0 1 95.52 5.32L95.52 36.48L36.48 36.48L36.48 95.52L5.32 95.52A5.32 5.32 0 0 1 0 90.19ZM95.52 36.48L181.48 36.48A5.32 5.32 0 0 1 186.01 44.61L138.61 121.31A22.55 22.55 0 0 1 119.43 132L41.81 132A5.32 5.32 0 0 1 36.48 126.68L36.48 95.52L95.52 95.52Z",
-				fill: "#00BC7D"
-			})
-		});
-		$[0] = t0;
-	} else t0 = $[0];
-	return t0;
-}
 function CurrentThread() {
 	const $ = c(15);
 	const { apiUrl, projectUuid } = React.useContext(AuthContext);
@@ -164,7 +149,7 @@ function CurrentThread() {
 	return t6;
 }
 function Thread(t0) {
-	const $ = c(31);
+	const $ = c(30);
 	const { apiUrl, projectId, draftId, carried, onEnterDraft } = t0;
 	let t1;
 	if ($[0] !== carried || $[1] !== onEnterDraft) {
@@ -212,68 +197,65 @@ function Thread(t0) {
 		$[12] = t5;
 	} else t5 = $[12];
 	const sendFollowing = t5;
-	const t6 = draftId !== null;
-	let t7;
-	if ($[13] !== sending || $[14] !== t6 || $[15] !== view) {
-		t7 = {
+	let t6;
+	if ($[13] !== sending || $[14] !== view) {
+		t6 = {
 			view,
-			sending,
-			showSenders: t6
+			sending
 		};
 		$[13] = sending;
-		$[14] = t6;
-		$[15] = view;
-		$[16] = t7;
-	} else t7 = $[16];
-	const messages = t7;
+		$[14] = view;
+		$[15] = t6;
+	} else t6 = $[15];
+	const messages = t6;
 	const continuedIn = draftId === null ? view.continuedIn?.draftId : void 0;
-	let t8;
-	if ($[17] !== continuedIn || $[18] !== messages || $[19] !== projectId) {
-		t8 = continuedIn ? /* @__PURE__ */ jsx(ContinuedInMessages, {
+	let t7;
+	if ($[16] !== continuedIn || $[17] !== messages || $[18] !== projectId) {
+		t7 = continuedIn ? /* @__PURE__ */ jsx(ContinuedInMessages, {
 			...messages,
 			projectId,
 			draftId: continuedIn
 		}) : /* @__PURE__ */ jsx(ThreadMessages, { ...messages });
-		$[17] = continuedIn;
-		$[18] = messages;
-		$[19] = projectId;
-		$[20] = t8;
-	} else t8 = $[20];
-	let t9;
-	if ($[21] !== error) {
-		t9 = error && /* @__PURE__ */ jsx("p", {
+		$[16] = continuedIn;
+		$[17] = messages;
+		$[18] = projectId;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== error) {
+		t8 = error && /* @__PURE__ */ jsx("p", {
 			role: "alert",
 			className: "text-destructive px-2 pt-2 text-sm",
 			children: error
 		});
-		$[21] = error;
-		$[22] = t9;
-	} else t9 = $[22];
-	let t10;
-	if ($[23] !== sendFollowing || $[24] !== stop || $[25] !== view.running) {
-		t10 = /* @__PURE__ */ jsx(ThreadComposer, {
+		$[20] = error;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== sendFollowing || $[23] !== stop || $[24] !== view.running) {
+		t9 = /* @__PURE__ */ jsx(ThreadComposer, {
 			onSend: sendFollowing,
 			onStop: stop,
 			running: view.running
 		});
-		$[23] = sendFollowing;
-		$[24] = stop;
-		$[25] = view.running;
-		$[26] = t10;
-	} else t10 = $[26];
-	let t11;
-	if ($[27] !== t10 || $[28] !== t8 || $[29] !== t9) {
-		t11 = /* @__PURE__ */ jsxs(Fragment, { children: [
+		$[22] = sendFollowing;
+		$[23] = stop;
+		$[24] = view.running;
+		$[25] = t9;
+	} else t9 = $[25];
+	let t10;
+	if ($[26] !== t7 || $[27] !== t8 || $[28] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t7,
 			t8,
-			t9,
-			t10
+			t9
 		] });
-		$[27] = t10;
-		$[28] = t8;
-		$[29] = t9;
-		$[30] = t11;
-	} else t11 = $[30];
-	return t11;
+		$[26] = t7;
+		$[27] = t8;
+		$[28] = t9;
+		$[29] = t10;
+	} else t10 = $[29];
+	return t10;
 }
 /**
 * A fresh Live thread's messages, linking to the draft the editor's previous one continued in,

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

@@ -0,0 +1,114 @@
+import { cn } from "../../../lib/utils.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/studio/components/Squareling.tsx
+/**
+* Camox's agent, drawn from the logo's shapes: its square, the soft corner, and the knockout as
+* eyes, looking right like the mark. Its face and motion say what the agent is doing. The
+* animations live in `studio.css`.
+*/
+function Squareling(t0) {
+	const $ = c(17);
+	const { status, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = cn("squareling shrink-0 overflow-visible", className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("path", {
+			d: "M20 12H80Q88 12 88 20V64Q88 88 64 88H20Q12 88 12 80V20Q12 12 20 12Z",
+			className: "fill-emerald-500"
+		});
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== status) {
+		t3 = (status === "idle" || status === "thinking") && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			className: "squareling-eye",
+			x: "50",
+			y: "36",
+			width: "11",
+			height: "17"
+		}), /* @__PURE__ */ jsx("rect", {
+			className: "squareling-eye",
+			x: "69",
+			y: "36",
+			width: "11",
+			height: "17"
+		})] });
+		$[3] = status;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== status) {
+		t4 = status === "acting" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			x: "50",
+			y: "44",
+			width: "11",
+			height: "6"
+		}), /* @__PURE__ */ jsx("rect", {
+			x: "69",
+			y: "44",
+			width: "11",
+			height: "6"
+		})] });
+		$[5] = status;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== status) {
+		t5 = status === "fixing" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			x: "50",
+			y: "36",
+			width: "11",
+			height: "17"
+		}), /* @__PURE__ */ jsx("rect", {
+			x: "69",
+			y: "44",
+			width: "11",
+			height: "6"
+		})] });
+		$[7] = status;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t3 || $[10] !== t4 || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("g", {
+			className: "squareling-body",
+			children: [t2, /* @__PURE__ */ jsxs("g", {
+				className: "squareling-eyes fill-neutral-950",
+				children: [
+					t3,
+					t4,
+					t5
+				]
+			})]
+		});
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== status || $[14] !== t1 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 100 100",
+			"aria-hidden": true,
+			"data-squareling": status,
+			className: t1,
+			children: t6
+		});
+		$[13] = status;
+		$[14] = t1;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	return t7;
+}
+
+//#endregion
+export { Squareling };