camox 0.59.0 → 0.61.0

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

@@ -1,22 +1,30 @@
 import { cn } from "../../../lib/utils.js";
 import { c } from "react/compiler-runtime";
+import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/features/studio/components/Squareling.tsx
 /**
 * A squareling, drawn from the logo's shapes, with the knockout as eyes, looking right like the
-* mark. Its face and motion say what it is doing. The animations live in `studio.css`.
+* mark, or at the editor while idle. Its face and motion say what it is doing. The animations
+* live in `studio.css`.
 *
 * The agent's (the default) is the logo's square with its soft corner, in emerald. Each patroller
 * has its own, one family: the Translator is the logo's wide wedge, in violet, glancing across
 * while it works; the SEO manager is a tall block with the small shape's soft corner, in amber,
 * scanning down while it works.
+*
+* One face flows into the next: its eyes glide to where the next face holds them, opening or
+* narrowing, and a looping motion settles before the next one starts (`useFaceChange`).
 */
 function Squareling(props) {
-	const $ = c(18);
+	const $ = c(24);
 	const { status, className, ref } = props;
 	const variant = props.variant ?? "agent";
 	const look = LOOKS[variant];
+	const body = React.useRef(null);
+	const [firstFace] = React.useState(status);
+	useFaceChange(body, status);
 	const t0 = variant === "agent" ? void 0 : variant;
 	let t1;
 	if ($[0] !== className) {
@@ -25,65 +33,133 @@ function Squareling(props) {
 		$[1] = t1;
 	} else t1 = $[1];
 	let t2;
-	if ($[2] !== look.body || $[3] !== look.fill) {
-		t2 = /* @__PURE__ */ jsx("path", {
+	if ($[2] !== look) {
+		t2 = towardsUs(look);
+		$[2] = look;
+		$[3] = t2;
+	} else t2 = $[3];
+	const t3 = `${t2}px`;
+	let t4;
+	if ($[4] !== t3) {
+		t4 = { "--squareling-towards-us": t3 };
+		$[4] = t3;
+		$[5] = t4;
+	} else t4 = $[5];
+	const t5 = t4;
+	let t6;
+	if ($[6] !== look.body || $[7] !== look.fill) {
+		t6 = /* @__PURE__ */ jsx("path", {
 			d: look.body,
 			className: look.fill
 		});
-		$[2] = look.body;
-		$[3] = look.fill;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== look.eyes || $[6] !== props.status || $[7] !== props.variant) {
-		t3 = /* @__PURE__ */ jsx("g", {
-			className: "squareling-eyes fill-neutral-950",
-			children: props.variant === void 0 || props.variant === "agent" ? /* @__PURE__ */ jsx(AgentEyes, {
-				eyes: look.eyes,
-				status: props.status
-			}) : /* @__PURE__ */ jsx(PatrollerEyes, {
-				eyes: look.eyes,
-				working: props.status === "working"
+		$[6] = look.body;
+		$[7] = look.fill;
+		$[8] = t6;
+	} else t6 = $[8];
+	let t7;
+	if ($[9] !== look.eyes || $[10] !== props.status || $[11] !== props.variant) {
+		t7 = /* @__PURE__ */ jsx("g", {
+			className: "squareling-gaze",
+			children: /* @__PURE__ */ jsx("g", {
+				className: "squareling-eyes fill-neutral-950",
+				children: props.variant === void 0 || props.variant === "agent" ? /* @__PURE__ */ jsx(AgentEyes, {
+					eyes: look.eyes,
+					status: props.status
+				}) : /* @__PURE__ */ jsx(PatrollerEyes, {
+					eyes: look.eyes,
+					working: props.status === "working"
+				})
 			})
 		});
-		$[5] = look.eyes;
-		$[6] = props.status;
-		$[7] = props.variant;
-		$[8] = t3;
-	} else t3 = $[8];
-	let t4;
-	if ($[9] !== t2 || $[10] !== t3) {
-		t4 = /* @__PURE__ */ jsxs("g", {
+		$[9] = look.eyes;
+		$[10] = props.status;
+		$[11] = props.variant;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t6 || $[14] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("g", {
+			ref: body,
 			className: "squareling-body",
-			children: [t2, t3]
+			children: [t6, t7]
 		});
-		$[9] = t2;
-		$[10] = t3;
-		$[11] = t4;
-	} else t4 = $[11];
-	let t5;
-	if ($[12] !== ref || $[13] !== status || $[14] !== t0 || $[15] !== t1 || $[16] !== t4) {
-		t5 = /* @__PURE__ */ jsx("svg", {
+		$[13] = t6;
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== firstFace || $[17] !== ref || $[18] !== status || $[19] !== t0 || $[20] !== t1 || $[21] !== t5 || $[22] !== t8) {
+		t9 = /* @__PURE__ */ jsx("svg", {
 			ref,
 			viewBox: "0 0 100 100",
 			"aria-hidden": true,
 			"data-squareling": status,
+			"data-face": firstFace,
 			"data-squareling-variant": t0,
 			className: t1,
-			children: t4
+			style: t5,
+			children: t8
 		});
-		$[12] = ref;
-		$[13] = status;
-		$[14] = t0;
-		$[15] = t1;
-		$[16] = t4;
-		$[17] = t5;
-	} else t5 = $[17];
-	return t5;
+		$[16] = firstFace;
+		$[17] = ref;
+		$[18] = status;
+		$[19] = t0;
+		$[20] = t1;
+		$[21] = t5;
+		$[22] = t8;
+		$[23] = t9;
+	} else t9 = $[23];
+	return t9;
+}
+/**
+* How long a looping motion takes to settle when the face changes, in ms. `studio.css` delays
+* each face's loop by as much, so it starts from rest.
+*/
+const SETTLE_DURATION = 300;
+/**
+* Changes the face `studio.css` animates to `status`, settling the one before: the body and the
+* eyes ease from wherever their loop had them back to rest, where the next loop starts. Without
+* motion for editors who reduce it.
+*/
+function useFaceChange(body, status) {
+	const $ = c(4);
+	let t0;
+	let t1;
+	if ($[0] !== body || $[1] !== status) {
+		t0 = () => {
+			const svg = body.current?.ownerSVGElement;
+			if (!body.current || !svg || svg.getAttribute("data-face") === status) return;
+			const moving = [body.current, ...body.current.querySelectorAll(".squareling-eyes")];
+			const where = moving.map(_temp);
+			svg.setAttribute("data-face", status);
+			if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+			for (const [index, part_0] of moving.entries()) {
+				const from = where[index];
+				if (!from || from === "none") continue;
+				part_0.animate([{ transform: from }, { transform: "none" }], {
+					duration: SETTLE_DURATION,
+					easing: "cubic-bezier(0.23, 1, 0.32, 1)"
+				});
+			}
+		};
+		t1 = [body, status];
+		$[0] = body;
+		$[1] = status;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	React.useLayoutEffect(t0, t1);
+}
+function _temp(part) {
+	return getComputedStyle(part).transform;
 }
 const LOOKS = {
 	agent: {
 		body: "M20 12H80Q88 12 88 20V64Q88 88 64 88H20Q12 88 12 80V20Q12 12 20 12Z",
+		middle: 50,
 		fill: "fill-emerald-500",
 		eyes: {
 			x: [50, 69],
@@ -92,6 +168,7 @@ const LOOKS = {
 	},
 	translator: {
 		body: "M14 14H86Q92 14 89.6 19.5L67.3 69.6Q60 86 42 86H14Q8 86 8 80V20Q8 14 14 14Z",
+		middle: 45,
 		fill: "fill-violet-500",
 		eyes: {
 			x: [40, 59],
@@ -100,6 +177,7 @@ const LOOKS = {
 	},
 	seoManager: {
 		body: "M20 32Q20 8 44 8H74Q80 8 80 14V86Q80 92 74 92H26Q20 92 20 86Z",
+		middle: 50,
 		fill: "fill-amber-500",
 		eyes: {
 			x: [44, 63],
@@ -108,47 +186,67 @@ const LOOKS = {
 	}
 };
 const EYE_WIDTH = 11;
+/** How far the eyes move across for the squareling to look at the editor: to its face's middle. */
+const towardsUs = ({ middle, eyes: { x } }) => middle - (x[0] + x[1] + EYE_WIDTH) / 2;
 const OPEN = 17;
 const NARROWED = 6;
-/** How far down a narrowed eye sits, from the top of the open one. */
-const NARROWED_OFFSET = 8;
+/** How far down a narrowed eye's middle sits, from the open one's. */
+const NARROWED_SHIFT = 2.5;
 /**
-* One eye, its left edge at `x` and its top at `y` while open: open, or narrowed on the work.
-* Only an eye that blinks carries the class `studio.css` blinks.
+* One eye, its left edge at `x` and its top at `y`: open, or narrowed on the work, lower down.
+* It narrows by scaling, which `studio.css` eases. Only an eye that blinks carries the class
+* `studio.css` blinks.
 */
 function Eye(t0) {
-	const $ = c(5);
+	const $ = c(9);
 	const { x, y, narrowed, blinks } = t0;
-	const t1 = blinks ? "squareling-eye" : void 0;
-	const t2 = narrowed ? y + NARROWED_OFFSET : y;
-	const t3 = narrowed ? NARROWED : OPEN;
+	const t1 = blinks && "squareling-blinks";
+	let t2;
+	if ($[0] !== t1) {
+		t2 = cn("squareling-eye", t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== narrowed) {
+		t3 = narrowed ? {
+			scale: `1 ${NARROWED / OPEN}`,
+			translate: `0 ${NARROWED_SHIFT}px`
+		} : {
+			scale: "1",
+			translate: "0"
+		};
+		$[2] = narrowed;
+		$[3] = t3;
+	} else t3 = $[3];
 	let t4;
-	if ($[0] !== t1 || $[1] !== t2 || $[2] !== t3 || $[3] !== x) {
+	if ($[4] !== t2 || $[5] !== t3 || $[6] !== x || $[7] !== y) {
 		t4 = /* @__PURE__ */ jsx("rect", {
-			className: t1,
+			className: t2,
 			x,
-			y: t2,
+			y,
 			width: EYE_WIDTH,
-			height: t3
+			height: OPEN,
+			style: t3
 		});
-		$[0] = t1;
-		$[1] = t2;
-		$[2] = t3;
-		$[3] = x;
-		$[4] = t4;
-	} else t4 = $[4];
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = x;
+		$[7] = y;
+		$[8] = t4;
+	} else t4 = $[8];
 	return t4;
 }
 /**
-* The agent's eyes: open, blinking, while idle or thinking; both narrowed while acting; the
-* right one narrowed while fixing.
+* The agent's eyes: both narrowed on the work while making changes, the right one while fixing,
+* open otherwise, blinking unless it looks around.
 */
 function AgentEyes(t0) {
 	const $ = c(13);
 	const { eyes, status } = t0;
 	const [left, right] = eyes.x;
-	const blinks = status === "idle" || status === "thinking";
-	const t1 = status === "acting";
+	const blinks = status !== "exploring" && status !== "changing";
+	const t1 = status === "changing";
 	let t2;
 	if ($[0] !== blinks || $[1] !== eyes.y || $[2] !== left || $[3] !== t1) {
 		t2 = /* @__PURE__ */ jsx(Eye, {
@@ -163,7 +261,7 @@ function AgentEyes(t0) {
 		$[3] = t1;
 		$[4] = t2;
 	} else t2 = $[4];
-	const t3 = status === "acting" || status === "fixing";
+	const t3 = status === "changing" || status === "fixing";
 	let t4;
 	if ($[5] !== blinks || $[6] !== eyes.y || $[7] !== right || $[8] !== t3) {
 		t4 = /* @__PURE__ */ jsx(Eye, {

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

@@ -1,17 +1,18 @@
 import { c } from "react/compiler-runtime";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowUp, Square } from "lucide-react";
+import { ArrowUp, Square, SquareDashedMousePointer, X } from "lucide-react";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } from "@camox/ui/input-group";
 
 //#region src/features/studio/components/ThreadComposer.tsx
 /**
 * Where an editor writes to the agent: Enter sends, Shift+Enter adds a line. While a run is
-* going, sending steers it, and a Stop button sits beside Send.
+* going, sending steers it, and a Stop button sits beside Send. Over the message, what the
+* editor has selected, which their messages carry to the agent until they clear it.
 */
 function ThreadComposer(t0) {
-	const $ = c(32);
-	const { onSend, onStop, running: t1, disabled: t2 } = t0;
+	const $ = c(36);
+	const { onSend, onStop, selection, onClearSelection, running: t1, disabled: t2 } = t0;
 	const running = t1 === void 0 ? false : t1;
 	const disabled = t2 === void 0 ? false : t2;
 	const [text, setText] = useState("");
@@ -46,39 +47,53 @@ function ThreadComposer(t0) {
 		$[7] = t5;
 	} else t5 = $[7];
 	let t6;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = (event_0) => setText(event_0.target.value);
-		$[8] = t6;
-	} else t6 = $[8];
+	if ($[8] !== onClearSelection || $[9] !== selection) {
+		t6 = selection && /* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "block-start",
+			className: "border-input border-b",
+			children: /* @__PURE__ */ jsx(SelectionChip, {
+				name: selection,
+				onClear: onClearSelection
+			})
+		});
+		$[8] = onClearSelection;
+		$[9] = selection;
+		$[10] = t6;
+	} else t6 = $[10];
 	let t7;
-	if ($[9] !== submit) {
-		t7 = (event_1) => {
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = (event_0) => setText(event_0.target.value);
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== submit) {
+		t8 = (event_1) => {
 			if (event_1.key !== "Enter" || event_1.shiftKey || event_1.nativeEvent.isComposing) return;
 			event_1.preventDefault();
 			submit();
 		};
-		$[9] = submit;
-		$[10] = t7;
-	} else t7 = $[10];
-	let t8;
-	if ($[11] !== disabled || $[12] !== t7 || $[13] !== text) {
-		t8 = /* @__PURE__ */ jsx(InputGroupTextarea, {
+		$[12] = submit;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== disabled || $[15] !== t8 || $[16] !== text) {
+		t9 = /* @__PURE__ */ jsx(InputGroupTextarea, {
 			"aria-label": "Message",
 			placeholder: "Message Camox…",
 			value: text,
 			disabled,
-			onChange: t6,
-			onKeyDown: t7,
+			onChange: t7,
+			onKeyDown: t8,
 			className: "max-h-48 min-h-14"
 		});
-		$[11] = disabled;
-		$[12] = t7;
-		$[13] = text;
-		$[14] = t8;
-	} else t8 = $[14];
-	let t9;
-	if ($[15] !== disabled || $[16] !== onStop || $[17] !== running) {
-		t9 = running && onStop && /* @__PURE__ */ jsxs(InputGroupButton, {
+		$[14] = disabled;
+		$[15] = t8;
+		$[16] = text;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== disabled || $[19] !== onStop || $[20] !== running) {
+		t10 = running && onStop && /* @__PURE__ */ jsxs(InputGroupButton, {
 			type: "button",
 			variant: "outline",
 			size: "icon-sm",
@@ -89,68 +104,123 @@ function ThreadComposer(t0) {
 				children: "Stop"
 			})]
 		});
-		$[15] = disabled;
-		$[16] = onStop;
-		$[17] = running;
-		$[18] = t9;
-	} else t9 = $[18];
-	const t10 = !canSend;
-	let t11;
+		$[18] = disabled;
+		$[19] = onStop;
+		$[20] = running;
+		$[21] = t10;
+	} else t10 = $[21];
+	const t11 = !canSend;
 	let t12;
-	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = /* @__PURE__ */ jsx(ArrowUp, {});
-		t12 = /* @__PURE__ */ jsx("span", {
+	let t13;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(ArrowUp, {});
+		t13 = /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Send"
 		});
-		$[19] = t11;
-		$[20] = t12;
+		$[22] = t12;
+		$[23] = t13;
 	} else {
-		t11 = $[19];
-		t12 = $[20];
+		t12 = $[22];
+		t13 = $[23];
 	}
-	let t13;
-	if ($[21] !== t10) {
-		t13 = /* @__PURE__ */ jsxs(InputGroupButton, {
+	let t14;
+	if ($[24] !== t11) {
+		t14 = /* @__PURE__ */ jsxs(InputGroupButton, {
 			type: "submit",
 			variant: "default",
 			size: "icon-sm",
-			disabled: t10,
-			children: [t11, t12]
-		});
-		$[21] = t10;
-		$[22] = t13;
-	} else t13 = $[22];
-	let t14;
-	if ($[23] !== t13 || $[24] !== t9) {
-		t14 = /* @__PURE__ */ jsxs(InputGroupAddon, {
-			align: "block-end",
-			className: "justify-end",
-			children: [t9, t13]
+			disabled: t11,
+			children: [t12, t13]
 		});
-		$[23] = t13;
-		$[24] = t9;
+		$[24] = t11;
 		$[25] = t14;
 	} else t14 = $[25];
 	let t15;
-	if ($[26] !== t14 || $[27] !== t8) {
-		t15 = /* @__PURE__ */ jsxs(InputGroup, { children: [t8, t14] });
-		$[26] = t14;
-		$[27] = t8;
+	if ($[26] !== t10 || $[27] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(InputGroupAddon, {
+			align: "block-end",
+			className: "justify-end",
+			children: [t10, t14]
+		});
+		$[26] = t10;
+		$[27] = t14;
 		$[28] = t15;
 	} else t15 = $[28];
 	let t16;
-	if ($[29] !== t15 || $[30] !== t5) {
-		t16 = /* @__PURE__ */ jsx("form", {
+	if ($[29] !== t15 || $[30] !== t6 || $[31] !== t9) {
+		t16 = /* @__PURE__ */ jsxs(InputGroup, { children: [
+			t6,
+			t9,
+			t15
+		] });
+		$[29] = t15;
+		$[30] = t6;
+		$[31] = t9;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== t16 || $[34] !== t5) {
+		t17 = /* @__PURE__ */ jsx("form", {
 			className: "p-2",
 			onSubmit: t5,
-			children: t15
+			children: t16
 		});
-		$[29] = t15;
-		$[30] = t5;
-		$[31] = t16;
-	} else t16 = $[31];
-	return t16;
+		$[33] = t16;
+		$[34] = t5;
+		$[35] = t17;
+	} else t17 = $[35];
+	return t17;
+}
+/** The selection the editor's messages carry, by its name. */
+function SelectionChip(t0) {
+	const $ = c(8);
+	const { name, onClear } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(SquareDashedMousePointer, { className: "text-muted-foreground size-3.5 shrink-0" });
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== name) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate font-medium",
+			children: name
+		});
+		$[1] = name;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== onClear) {
+		t3 = onClear && /* @__PURE__ */ jsxs(InputGroupButton, {
+			type: "button",
+			size: "icon-xs",
+			className: "text-muted-foreground hover:text-foreground size-5 shrink-0",
+			onClick: onClear,
+			children: [/* @__PURE__ */ jsx(X, { className: "size-3" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Clear selection"
+			})]
+		});
+		$[3] = onClear;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t2 || $[6] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("div", {
+			"aria-label": "Selection",
+			className: "bg-muted text-foreground flex h-6 max-w-full min-w-0 cursor-default items-center gap-1 rounded-sm pr-0.5 pl-1.5 text-xs",
+			children: [
+				t1,
+				t2,
+				t3
+			]
+		});
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
 }
 
 //#endregion