From d790384b72e7c11019316adec2a734488a746da3 Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Thu, 8 Oct 2026 19:13:54 +0300
Subject: [PATCH] =?UTF-8?q?ui:=20the=20invert=20disc's=20half=20is=20actua?=
 =?UTF-8?q?lly=20filled=20=E2=80=94=20and=20the=20demos=20match?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lucide's Contrast leaves its half-moon unfilled (fill=none default) -
the owner's catch. Hand-rolled InvertDiscIcon: same geometry, the half
carries fill=currentColor, so the filled side is filled. The demo cards
get the identical disc + 'Invert colors' tooltip on their invert
toggles, matching the figures.
---
 components/artifacts/demo-card.tsx   |  9 ++++++++-
 components/artifacts/invert-disc.tsx | 23 +++++++++++++++++++++++
 components/artifacts/visual-card.tsx |  5 +++--
 tests/demos.test.tsx                 |  6 ++++++
 4 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 components/artifacts/invert-disc.tsx

diff --git a/components/artifacts/demo-card.tsx b/components/artifacts/demo-card.tsx
index 305ef4a..fd781e8 100644
--- a/components/artifacts/demo-card.tsx
+++ b/components/artifacts/demo-card.tsx
@@ -3,6 +3,7 @@
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { DownloadIcon } from "lucide-react";
 import { Toggle } from "@/components/settings/controls";
+import { InvertDiscIcon } from "@/components/artifacts/invert-disc";
 import { ChatActionsContext } from "@/components/chat";
 import { downloadFile, slugFilename } from "@/components/artifacts/download";
 import { DispatchCard } from "@/components/artifacts/dispatch-card";
@@ -181,7 +182,13 @@ function DemoFrame({
 					<span className="truncate text-xs font-medium tracking-wide text-foreground">{title}</span>
 				</div>
 				<div className="flex shrink-0 items-center gap-1.5">
-					<Toggle checked={inverted} onChange={toggleInverted} label="Invert demo brightness" />
+					<Toggle
+						checked={inverted}
+						onChange={toggleInverted}
+						label="Invert demo brightness"
+						title="Invert colors"
+						discIcon={<InvertDiscIcon className="size-3" />}
+					/>
 					<button
 						type="button"
 						aria-label="Download demo as HTML"
diff --git a/components/artifacts/invert-disc.tsx b/components/artifacts/invert-disc.tsx
new file mode 100644
index 0000000..5a78c10
--- /dev/null
+++ b/components/artifacts/invert-disc.tsx
@@ -0,0 +1,23 @@
+/** The invert disc (owner round, 2026-10-07): the half-filled circle that
+ *  IS the invert toggle's sliding disc. Hand-rolled because lucide's
+ *  Contrast leaves its half-moon unfilled (fill="none" by default) — the
+ *  owner's catch: the filled side must be ACTUALLY filled. Same geometry
+ *  as lucide's (circle r10 + left half-moon), the half carries
+ *  fill="currentColor". */
+export function InvertDiscIcon({ className }: { className?: string }) {
+	return (
+		<svg
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			className={className}
+			aria-hidden
+		>
+			<circle cx="12" cy="12" r="10" />
+			<path d="M12 18a6 6 0 0 0 0-12v12z" fill="currentColor" stroke="none" />
+		</svg>
+	);
+}
diff --git a/components/artifacts/visual-card.tsx b/components/artifacts/visual-card.tsx
index efe7ab8..2a36c2f 100644
--- a/components/artifacts/visual-card.tsx
+++ b/components/artifacts/visual-card.tsx
@@ -2,7 +2,8 @@
 
 import { useContext, useState } from "react";
 import { ChatActionsContext } from "@/components/chat";
-import { ContrastIcon, DownloadIcon, MaximizeIcon } from "lucide-react";
+import { DownloadIcon, MaximizeIcon } from "lucide-react";
+import { InvertDiscIcon } from "@/components/artifacts/invert-disc";
 import { Toggle } from "@/components/settings/controls";
 import { useSessionMermaid } from "@/components/session-overlay";
 import { downloadFile } from "@/components/artifacts/download";
@@ -138,7 +139,7 @@ export function VisualOutputCard({
 						onChange={toggleInverted}
 						label="Invert figure brightness"
 						title="Invert colors"
-						discIcon={<ContrastIcon className="size-3" />}
+						discIcon={<InvertDiscIcon className="size-3" />}
 					/>
 					<button
 						type="button"
diff --git a/tests/demos.test.tsx b/tests/demos.test.tsx
index 1f14c9e..e5ba295 100644
--- a/tests/demos.test.tsx
+++ b/tests/demos.test.tsx
@@ -520,6 +520,12 @@ describe("artifact chrome — scrollbar, invert toggles, downloads (release poli
 		// The invert affordance: the contrast-circle disc + the tooltip.
 		assert.ok(html.includes("size-3"), "the icon disc");
 		assert.ok(html.includes('title="Invert colors"'), "the tooltip names the toggle");
+		// The half-moon is ACTUALLY filled (owner catch: lucide's Contrast
+		// renders it hollow — fill="none" default; ours fills currentColor).
+		assert.ok(
+			html.includes('fill="currentColor" stroke="none"'),
+			"the filled half of the invert disc",
+		);
 	});
 
 	it("svgNaturalWidth: declared px sizes parse; %, auto, and absent fall back to null", () => {