camox 0.54.0 → 0.56.0

package/dist/features/studio/components/{ChatSidebar.js → ChatWidget.js}

@@ -1,13 +1,10 @@
 import { AuthContext } from "../../../lib/auth.js";
 import { useCurrentDraftId, useDraftScope } from "../../../lib/draft-scope.js";
-import { useNavigate } from "../../navigation/navigation.js";
 import { reads, useReadQuery } from "../../../lib/studio-reads.js";
 import { cn } from "../../../lib/utils.js";
-import { BOTTOM_CARD_EDGES, CARD_BODY_EDGES, SIDEBAR_GUTTER } from "../../preview/components/SidebarStack.js";
-import { draftLabel } from "../draftLabel.js";
+import { BOTTOM_CARD_EDGES, CARD_BODY_EDGES } from "../../preview/components/SidebarStack.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";
@@ -15,62 +12,54 @@ import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { EMPTY_THREAD_VIEW } from "@camox/api-contract/threads";
 
-//#region src/features/studio/components/ChatSidebar.tsx
+//#region src/features/studio/components/ChatWidget.tsx
 /**
-* Where an editor works with Camox's agent in a thread, beside the Canvas. Elsewhere in the
+* The Agent Sidebar's Chat widget, where an editor works with Camox's agent in a thread. Elsewhere in the
 * studio it is only hidden: the studio keeps following the editor's runs there. It follows
 * where the studio is: the editor's own Live thread on Live, and the draft's thread in a draft.
 * When the Live thread starts a draft, the studio enters it with the thread.
 */
-function ChatSidebar(t0) {
+function ChatWidget(t0) {
 	const $ = c(6);
-	const { hidden: t1 } = t0;
-	const hidden = t1 === void 0 ? false : t1;
+	const { className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = cn("flex flex-col", className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
 	let t2;
 	let t3;
-	let t4;
-	let t5;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = cn("absolute inset-y-0 right-0 z-10 flex flex-col py-2 max-md:hidden", SIDEBAR_GUTTER);
-		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(Squareling, {
-				status: "idle",
-				className: "size-5"
-			}), /* @__PURE__ */ jsx("h2", {
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("header", {
+			className: cn("bg-background flex h-11 min-w-0 shrink-0 items-center justify-center px-3", BOTTOM_CARD_EDGES),
+			children: /* @__PURE__ */ jsx("h2", {
 				className: "truncate text-sm font-medium",
 				children: "Agent"
-			})]
+			})
 		});
-		t5 = /* @__PURE__ */ jsx("div", {
+		t3 = /* @__PURE__ */ jsx("div", {
 			className: cn("bg-background flex min-h-0 flex-1 flex-col", CARD_BODY_EDGES),
 			children: /* @__PURE__ */ jsx(CurrentThread, {})
 		});
-		$[0] = t2;
-		$[1] = t3;
-		$[2] = t4;
-		$[3] = t5;
+		$[2] = t2;
+		$[3] = t3;
 	} else {
-		t2 = $[0];
-		t3 = $[1];
-		t4 = $[2];
-		t5 = $[3];
+		t2 = $[2];
+		t3 = $[3];
 	}
-	let t6;
-	if ($[4] !== hidden) {
-		t6 = /* @__PURE__ */ jsxs("aside", {
-			"aria-label": "Agent",
-			"data-chat-sidebar": true,
-			hidden,
-			className: t2,
-			style: t3,
-			children: [t4, t5]
+	let t4;
+	if ($[4] !== t1) {
+		t4 = /* @__PURE__ */ jsxs("section", {
+			"aria-label": "Chat",
+			"data-chat-widget": true,
+			className: t1,
+			children: [t2, t3]
 		});
-		$[4] = hidden;
-		$[5] = t6;
-	} else t6 = $[5];
-	return t6;
+		$[4] = t1;
+		$[5] = t4;
+	} else t4 = $[5];
+	return t4;
 }
 function CurrentThread() {
 	const $ = c(15);
@@ -149,7 +138,7 @@ function CurrentThread() {
 	return t6;
 }
 function Thread(t0) {
-	const $ = c(30);
+	const $ = c(26);
 	const { apiUrl, projectId, draftId, carried, onEnterDraft } = t0;
 	let t1;
 	if ($[0] !== carried || $[1] !== onEnterDraft) {
@@ -199,148 +188,50 @@ function Thread(t0) {
 	const sendFollowing = t5;
 	let t6;
 	if ($[13] !== sending || $[14] !== view) {
-		t6 = {
+		t6 = /* @__PURE__ */ jsx(ThreadMessages, {
 			view,
 			sending
-		};
+		});
 		$[13] = sending;
 		$[14] = view;
 		$[15] = t6;
 	} else t6 = $[15];
-	const messages = t6;
-	const continuedIn = draftId === null ? view.continuedIn?.draftId : void 0;
 	let t7;
-	if ($[16] !== continuedIn || $[17] !== messages || $[18] !== projectId) {
-		t7 = continuedIn ? /* @__PURE__ */ jsx(ContinuedInMessages, {
-			...messages,
-			projectId,
-			draftId: continuedIn
-		}) : /* @__PURE__ */ jsx(ThreadMessages, { ...messages });
-		$[16] = continuedIn;
-		$[17] = messages;
-		$[18] = projectId;
-		$[19] = t7;
-	} else t7 = $[19];
-	let t8;
-	if ($[20] !== error) {
-		t8 = error && /* @__PURE__ */ jsx("p", {
+	if ($[16] !== error) {
+		t7 = error && /* @__PURE__ */ jsx("p", {
 			role: "alert",
 			className: "text-destructive px-2 pt-2 text-sm",
 			children: error
 		});
-		$[20] = error;
-		$[21] = t8;
-	} else t8 = $[21];
-	let t9;
-	if ($[22] !== sendFollowing || $[23] !== stop || $[24] !== view.running) {
-		t9 = /* @__PURE__ */ jsx(ThreadComposer, {
+		$[16] = error;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== sendFollowing || $[19] !== stop || $[20] !== view.running) {
+		t8 = /* @__PURE__ */ jsx(ThreadComposer, {
 			onSend: sendFollowing,
 			onStop: stop,
 			running: view.running
 		});
-		$[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: [
+		$[18] = sendFollowing;
+		$[19] = stop;
+		$[20] = view.running;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== t6 || $[23] !== t7 || $[24] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t6,
 			t7,
-			t8,
-			t9
+			t8
 		] });
-		$[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,
-* named as the drafts control names it.
-*/
-function ContinuedInMessages(t0) {
-	const $ = c(22);
-	let draftId;
-	let messages;
-	let projectId;
-	if ($[0] !== t0) {
-		({projectId, draftId, ...messages} = t0);
-		$[0] = t0;
-		$[1] = draftId;
-		$[2] = messages;
-		$[3] = projectId;
-	} else {
-		draftId = $[1];
-		messages = $[2];
-		projectId = $[3];
-	}
-	const draftScope = useDraftScope();
-	const navigate = useNavigate();
-	let t1;
-	if ($[4] !== draftId || $[5] !== projectId) {
-		t1 = reads.draft({
-			projectId,
-			draftId
-		});
-		$[4] = draftId;
-		$[5] = projectId;
-		$[6] = t1;
-	} else t1 = $[6];
-	const { data: draft } = useReadQuery(t1);
-	let t2;
-	if ($[7] !== draft) {
-		t2 = draft ? draftLabel(draft) : "a draft";
-		$[7] = draft;
-		$[8] = t2;
-	} else t2 = $[8];
-	let t3;
-	if ($[9] !== draftId || $[10] !== draftScope) {
-		t3 = draftScope.hrefFor(window.location.href, { draft: draftId });
-		$[9] = draftId;
-		$[10] = draftScope;
-		$[11] = t3;
-	} else t3 = $[11];
-	let t4;
-	if ($[12] !== draftId || $[13] !== navigate) {
-		t4 = (event) => {
-			event.preventDefault();
-			navigate({
-				to: window.location.href,
-				draft: draftId
-			});
-		};
-		$[12] = draftId;
-		$[13] = navigate;
-		$[14] = t4;
-	} else t4 = $[14];
-	let t5;
-	if ($[15] !== t2 || $[16] !== t3 || $[17] !== t4) {
-		t5 = {
-			label: t2,
-			href: t3,
-			onOpen: t4
-		};
-		$[15] = t2;
-		$[16] = t3;
-		$[17] = t4;
-		$[18] = t5;
-	} else t5 = $[18];
-	const link = t5;
-	let t6;
-	if ($[19] !== link || $[20] !== messages) {
-		t6 = /* @__PURE__ */ jsx(ThreadMessages, {
-			...messages,
-			continuedIn: link
-		});
-		$[19] = link;
-		$[20] = messages;
-		$[21] = t6;
-	} else t6 = $[21];
-	return t6;
+		$[22] = t6;
+		$[23] = t7;
+		$[24] = t8;
+		$[25] = t9;
+	} else t9 = $[25];
+	return t9;
 }
 
 //#endregion
-export { ChatSidebar };
+export { ChatWidget };

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

@@ -7,7 +7,7 @@ import { cn } from "../../../lib/utils.js";
 import { studioStore } from "../studioStore.js";
 import { draftLabel, plural, timeAgo } from "../draftLabel.js";
 import { RenameDraftDialog } from "./RenameDraftDialog.js";
-import { DiscardDraftDialog, ReviewDraftSheet, useLeaveDraft } from "./ReviewDraftSheet.js";
+import { DeleteDraftDialog, ReviewDraftSheet, useLeaveDraft } from "./ReviewDraftSheet.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { useSelector } from "@xstate/store-react";
@@ -99,7 +99,7 @@ function useDrafts() {
 * Picks what the studio is viewing, Live or a draft (#203). Live is read-only; the first edit
 * starts a draft. The localhost studio works only in the development draft, so it shows that
 * draft alone, with nothing to switch to (ADR 0006). The command palette offers the same actions,
-* and the picker hosts the draft's review and discard confirmation they open. A `disabled` picker
+* and the picker hosts the draft's review and delete confirmation they open. A `disabled` picker
 * still names what the studio is viewing.
 */
 function DraftPicker(t0) {
@@ -110,7 +110,7 @@ function DraftPicker(t0) {
 	const navigate = useNavigate();
 	const leaveDraft = useLeaveDraft();
 	const review = useSelector(studioStore, _temp);
-	const discarding = useSelector(studioStore, _temp2);
+	const deleting = useSelector(studioStore, _temp2);
 	const [menuOpen, setMenuOpen] = React.useState(false);
 	const [renaming, setRenaming] = React.useState(null);
 	let t2;
@@ -316,20 +316,20 @@ function DraftPicker(t0) {
 		$[46] = t20;
 	} else t20 = $[46];
 	let t21;
-	if ($[47] !== discarding || $[48] !== draftId || $[49] !== leaveDraft || $[50] !== projectId || $[51] !== review) {
+	if ($[47] !== deleting || $[48] !== draftId || $[49] !== leaveDraft || $[50] !== projectId || $[51] !== review) {
 		t21 = draftId && projectId && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ReviewDraftSheet, {
 			projectId,
 			draftId,
 			open: review.open,
 			startRenaming: review.startRenaming,
 			onOpenChange: _temp7
-		}), /* @__PURE__ */ jsx(DiscardDraftDialog, {
+		}), /* @__PURE__ */ jsx(DeleteDraftDialog, {
 			projectId,
-			open: discarding,
+			open: deleting,
 			onOpenChange: _temp8,
-			onDiscarded: leaveDraft
+			onDeleted: leaveDraft
 		})] });
-		$[47] = discarding;
+		$[47] = deleting;
 		$[48] = draftId;
 		$[49] = leaveDraft;
 		$[50] = projectId;
@@ -351,7 +351,7 @@ function DraftPicker(t0) {
 	return t22;
 }
 function _temp8(open_1) {
-	if (!open_1) studioStore.send({ type: "closeDiscardDraftDialog" });
+	if (!open_1) studioStore.send({ type: "closeDeleteDraftDialog" });
 }
 function _temp7(open_0) {
 	if (!open_0) studioStore.send({ type: "closeReviewDraftSheet" });
@@ -364,20 +364,20 @@ function _temp5() {
 }
 function _temp4() {
 	studioStore.send({ type: "closeReviewDraftSheet" });
-	studioStore.send({ type: "closeDiscardDraftDialog" });
+	studioStore.send({ type: "closeDeleteDraftDialog" });
 }
 function _temp3(t0) {
 	const { move } = t0;
 	if (move === "started") toast.success("Started a new draft");
 }
 function _temp2(state_0) {
-	return state_0.context.isDiscardDraftDialogOpen;
+	return state_0.context.isDeleteDraftDialogOpen;
 }
 function _temp(state) {
 	return state.context.reviewDraftSheet;
 }
 /**
-* The current draft's pending changes, which open its review to publish or discard them. Live
+* The current draft's pending changes, which open its review to publish or delete them. Live
 * has none, so it shows nothing there.
 */
 function PendingChanges() {
@@ -418,8 +418,8 @@ function _temp9() {
 	return studioStore.send({ type: "openReviewDraftSheet" });
 }
 /**
-* The drafts controls' actions in the command palette, offered where the controls offer them. The palette only opens the review and the discard confirmation; it never publishes or
-* discards by itself.
+* The drafts controls' actions in the command palette, offered where the controls offer them. The palette only opens the review and the delete confirmation; it never publishes or
+* deletes by itself.
 */
 function useDraftsActions(t0) {
 	const $ = c(7);
@@ -446,8 +446,8 @@ function useDraftsActions(t0) {
 					execute: _temp10
 				},
 				{
-					id: "discard-draft",
-					label: "Discard draft…",
+					id: "delete-draft",
+					label: "Delete draft…",
 					aliases: [
 						"Delete draft",
 						"Throw away changes",
@@ -546,7 +546,7 @@ function _temp12() {
 	});
 }
 function _temp11() {
-	return studioStore.send({ type: "openDiscardDraftDialog" });
+	return studioStore.send({ type: "openDeleteDraftDialog" });
 }
 function _temp10() {
 	return studioStore.send({ type: "openReviewDraftSheet" });

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

@@ -965,7 +965,7 @@ function _temp7(error) {
 }
 /**
 * Switches the studio to Live once its draft ended here, replacing the draft's URL entry. A
-* development draft never ends: publishing or discarding empties it, and dev mode stays in it.
+* development draft never ends: publishing or deleting empties it, and dev mode stays in it.
 */
 function useLeaveDraft() {
 	const $ = c(2);
@@ -1077,7 +1077,7 @@ function DraftNameInput(t0) {
 	return t7;
 }
 /**
-* Reviews a draft before publishing it whole, or discards it (ADR 0009). Publishing sends back
+* Reviews a draft before publishing it whole, or deletes it (ADR 0009). Publishing sends back
 * the token of the preview shown; when Live changed since, nothing is published and the new
 * preview is shown. Once the draft ends, the studio switches to Live.
 */
@@ -1085,7 +1085,7 @@ function ReviewDraftSheet(t0) {
 	const $ = c(101);
 	const { projectId, draftId, open, startRenaming: t1, onOpenChange } = t0;
 	const startRenaming = t1 === void 0 ? false : t1;
-	const [confirmingDiscard, setConfirmingDiscard] = React.useState(false);
+	const [confirmingDelete, setConfirmingDelete] = React.useState(false);
 	let t2;
 	if ($[0] !== draftId || $[1] !== projectId) {
 		t2 = reads.publishPreview({
@@ -1391,7 +1391,7 @@ function ReviewDraftSheet(t0) {
 	let t23;
 	let t24;
 	if ($[61] === Symbol.for("react.memo_cache_sentinel")) {
-		t23 = () => setConfirmingDiscard(true);
+		t23 = () => setConfirmingDelete(true);
 		t24 = /* @__PURE__ */ jsx(Trash2, {});
 		$[61] = t23;
 		$[62] = t24;
@@ -1406,7 +1406,7 @@ function ReviewDraftSheet(t0) {
 			className: "text-destructive",
 			disabled: busy,
 			onClick: t23,
-			children: [t24, "Discard draft"]
+			children: [t24, "Delete draft"]
 		});
 		$[63] = busy;
 		$[64] = t25;
@@ -1506,14 +1506,14 @@ function ReviewDraftSheet(t0) {
 		$[93] = t34;
 	} else t34 = $[93];
 	let t35;
-	if ($[94] !== confirmingDiscard || $[95] !== leave || $[96] !== projectId) {
-		t35 = /* @__PURE__ */ jsx(DiscardDraftDialog, {
+	if ($[94] !== confirmingDelete || $[95] !== leave || $[96] !== projectId) {
+		t35 = /* @__PURE__ */ jsx(DeleteDraftDialog, {
 			projectId,
-			open: confirmingDiscard,
-			onOpenChange: setConfirmingDiscard,
-			onDiscarded: leave
+			open: confirmingDelete,
+			onOpenChange: setConfirmingDelete,
+			onDeleted: leave
 		});
-		$[94] = confirmingDiscard;
+		$[94] = confirmingDelete;
 		$[95] = leave;
 		$[96] = projectId;
 		$[97] = t35;
@@ -1527,78 +1527,78 @@ function ReviewDraftSheet(t0) {
 	} else t36 = $[100];
 	return t36;
 }
-/** Asks before discarding the draft the studio is in, then discards it. */
-function DiscardDraftDialog(t0) {
+/** Asks before deleting the draft the studio is in, then deletes it. */
+function DeleteDraftDialog(t0) {
 	const $ = c(26);
-	const { projectId, open, onOpenChange, onDiscarded } = t0;
+	const { projectId, open, onOpenChange, onDeleted } = t0;
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = draftMutations.discard();
+		t1 = draftMutations.delete();
 		$[0] = t1;
 	} else t1 = $[0];
 	let t2;
-	if ($[1] !== onDiscarded || $[2] !== onOpenChange) {
+	if ($[1] !== onDeleted || $[2] !== onOpenChange) {
 		t2 = {
 			...t1,
 			onSuccess: (t3) => {
 				const { ended } = t3;
 				onOpenChange(false);
-				onDiscarded(ended);
+				onDeleted(ended);
 			},
 			onError: _temp10
 		};
-		$[1] = onDiscarded;
+		$[1] = onDeleted;
 		$[2] = onOpenChange;
 		$[3] = t2;
 	} else t2 = $[3];
-	const discard = useMutation(t2);
+	const deleteDraft = useMutation(t2);
 	let t3;
-	if ($[4] !== discard.isPending || $[5] !== onOpenChange) {
+	if ($[4] !== deleteDraft.isPending || $[5] !== onOpenChange) {
 		t3 = (next) => {
-			if (!discard.isPending) onOpenChange(next);
+			if (!deleteDraft.isPending) onOpenChange(next);
 		};
-		$[4] = discard.isPending;
+		$[4] = deleteDraft.isPending;
 		$[5] = onOpenChange;
 		$[6] = t3;
 	} else t3 = $[6];
 	let t4;
 	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Discard this draft?" }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "Every change in this draft is deleted for everyone. Live stays as it is. This can't be undone." })] });
+		t4 = /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Delete this draft?" }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "Every change in this draft is deleted for everyone. Live stays as it is. This can't be undone." })] });
 		$[7] = t4;
 	} else t4 = $[7];
 	let t5;
-	if ($[8] !== discard.isPending) {
+	if ($[8] !== deleteDraft.isPending) {
 		t5 = /* @__PURE__ */ jsx(AlertDialogCancel, {
 			variant: "outline",
 			size: "default",
-			disabled: discard.isPending,
+			disabled: deleteDraft.isPending,
 			children: "Cancel"
 		});
-		$[8] = discard.isPending;
+		$[8] = deleteDraft.isPending;
 		$[9] = t5;
 	} else t5 = $[9];
 	let t6;
-	if ($[10] !== discard || $[11] !== projectId) {
-		t6 = () => discard.mutate({ projectId });
-		$[10] = discard;
+	if ($[10] !== deleteDraft || $[11] !== projectId) {
+		t6 = () => deleteDraft.mutate({ projectId });
+		$[10] = deleteDraft;
 		$[11] = projectId;
 		$[12] = t6;
 	} else t6 = $[12];
 	let t7;
-	if ($[13] !== discard.isPending) {
-		t7 = discard.isPending ? /* @__PURE__ */ jsx(Spinner, {}) : null;
-		$[13] = discard.isPending;
+	if ($[13] !== deleteDraft.isPending) {
+		t7 = deleteDraft.isPending ? /* @__PURE__ */ jsx(Spinner, {}) : null;
+		$[13] = deleteDraft.isPending;
 		$[14] = t7;
 	} else t7 = $[14];
 	let t8;
-	if ($[15] !== discard.isPending || $[16] !== t6 || $[17] !== t7) {
+	if ($[15] !== deleteDraft.isPending || $[16] !== t6 || $[17] !== t7) {
 		t8 = /* @__PURE__ */ jsxs(AlertDialogAction, {
 			variant: "destructive",
-			disabled: discard.isPending,
+			disabled: deleteDraft.isPending,
 			onClick: t6,
-			children: [t7, "Discard draft"]
+			children: [t7, "Delete draft"]
 		});
-		$[15] = discard.isPending;
+		$[15] = deleteDraft.isPending;
 		$[16] = t6;
 		$[17] = t7;
 		$[18] = t8;
@@ -1625,8 +1625,8 @@ function DiscardDraftDialog(t0) {
 	return t10;
 }
 function _temp10(error) {
-	return toast.error(error.message || "Could not discard the draft");
+	return toast.error(error.message || "Could not delete the draft");
 }
 
 //#endregion
-export { DiscardDraftDialog, ReviewDraftSheet, useLeaveDraft };
+export { DeleteDraftDialog, ReviewDraftSheet, useLeaveDraft };

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

@@ -9,8 +9,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * animations live in `studio.css`.
 */
 function Squareling(t0) {
-	const $ = c(17);
-	const { status, className } = t0;
+	const $ = c(18);
+	const { status, className, ref } = t0;
 	let t1;
 	if ($[0] !== className) {
 		t1 = cn("squareling shrink-0 overflow-visible", className);
@@ -94,19 +94,21 @@ function Squareling(t0) {
 		$[12] = t6;
 	} else t6 = $[12];
 	let t7;
-	if ($[13] !== status || $[14] !== t1 || $[15] !== t6) {
+	if ($[13] !== ref || $[14] !== status || $[15] !== t1 || $[16] !== t6) {
 		t7 = /* @__PURE__ */ jsx("svg", {
+			ref,
 			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];
+		$[13] = ref;
+		$[14] = status;
+		$[15] = t1;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
 	return t7;
 }