codebay 0.10.0 → 0.11.0

package/src/components/SettingsView.svelte

@@ -23,6 +23,7 @@
 	import Boxes from '@lucide/svelte/icons/boxes';
 	import Puzzle from '@lucide/svelte/icons/puzzle';
 	import { Toaster } from 'svelte-french-toast';
+	import { TOAST_OPTIONS } from '../toast.ts';
 	import { flushSync } from 'svelte';
 	import { enhance } from 'mochi-framework';
 	import type { MochiEnhanceOptions } from 'mochi-framework';
@@ -2189,12 +2190,7 @@
 </div>
 
 <!-- Settings renders outside AppShell, which hosts the app-wide Toaster. -->
-<Toaster
-	toastOptions={{
-		style:
-			'border:1px solid var(--ink); background:var(--bg-card); color:var(--ink); box-shadow:4px 4px 0 var(--ink); font-family:var(--font-mono); font-size:13px;'
-	}}
-/>
+<Toaster toastOptions={TOAST_OPTIONS} />
 
 <style>
 	.page {
@@ -2437,7 +2433,7 @@
 	.mode-toggle {
 		display: flex;
 		flex: none;
-		border: 1px solid var(--ink);
+		border: 1px solid var(--edge);
 	}
 	.mode-btn {
 		display: inline-flex;
@@ -2455,11 +2451,11 @@
 		cursor: pointer;
 	}
 	.mode-btn + .mode-btn {
-		border-left: 1px solid var(--ink);
+		border-left: 1px solid var(--edge);
 	}
 	.mode-btn.active {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		color: var(--fill-ink);
 	}
 	.mode-btn:disabled {
 		cursor: not-allowed;
@@ -2589,7 +2585,7 @@
 		border-color: var(--danger);
 	}
 	.var-remove:disabled {
-		opacity: 0.4;
+		opacity: var(--dim);
 		cursor: not-allowed;
 	}
 	.var-empty {

package/src/components/StatusBadge.svelte

@@ -22,12 +22,13 @@
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
 		padding: 3px 7px;
-		border: 1px solid var(--ink);
+		border: 1px solid var(--edge);
 		white-space: nowrap;
 	}
 	.status.running {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		color: var(--fill-ink);
+		border-color: var(--fill);
 	}
 	.status.stopped {
 		background: transparent;
@@ -35,8 +36,9 @@
 		border-color: var(--ink-faint);
 	}
 	.status.creating {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		color: var(--fill-ink);
+		border-color: var(--fill);
 		animation: lcd-blink 1.1s steps(1) infinite;
 	}
 	.status.error {
@@ -48,7 +50,7 @@
 	@keyframes lcd-blink {
 		50% {
 			background: transparent;
-			color: var(--ink);
+			color: var(--fill);
 		}
 	}
 </style>

package/src/components/TerminalPane.svelte

@@ -129,16 +129,24 @@
 		}
 	}
 
+	/* Reads the *resolved* background/color off `.term` rather than the tokens behind
+	   them: getPropertyValue('--screen-bg') hands back the literal "light-dark(…)"
+	   token stream, which xterm can't parse and silently drops on the floor. */
 	function applyTheme() {
-		if (!term) return;
-		const cs = getComputedStyle(document.documentElement);
-		const bg = cs.getPropertyValue('--bg').trim() || '#1a1a1a';
-		const fg = cs.getPropertyValue('--ink').trim() || '#e6e6e6';
+		if (!term || !el) return;
+		const cs = getComputedStyle(el);
+		const bg = cs.backgroundColor || '#0d0e0a';
+		const fg = cs.color || '#d8d9cf';
 		term.options.theme = { background: bg, foreground: fg, cursor: fg, cursorAccent: bg };
 	}
 
 	onMount(() => {
 		let themeObs: MutationObserver | undefined;
+		// In "auto" there is no data-theme attribute to mutate, so the OS preference
+		// flipping is the only signal the mutation observer below would never see.
+		const scheme = window.matchMedia('(prefers-color-scheme: dark)');
+		const onScheme = () => applyTheme();
+		scheme.addEventListener('change', onScheme);
 		(async () => {
 			const [{ Terminal }, { FitAddon }] = await Promise.all([
 				import('@xterm/xterm'),
@@ -178,6 +186,7 @@
 			disposed = true;
 			sizeObs.disconnect();
 			themeObs?.disconnect();
+			scheme.removeEventListener('change', onScheme);
 			if (retry) clearTimeout(retry);
 			try {
 				ws?.close();
@@ -212,10 +221,13 @@
 </div>
 
 <style>
+	/* Also the source `applyTheme` reads xterm's colors back out of — resolved
+	   standard properties, since a custom property's own value is unresolved. */
 	.term {
 		width: 100%;
 		height: 100%;
-		background: var(--bg);
+		background: var(--screen-bg);
+		color: var(--screen-ink);
 		padding: 6px 8px;
 		box-sizing: border-box;
 	}
@@ -263,8 +275,8 @@
 	.overlay :global(button:focus-visible),
 	.overlay :global(button[aria-pressed='true']) {
 		opacity: 1;
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		color: var(--fill-ink);
 	}
 	@media (prefers-reduced-motion: reduce) {
 		.overlay :global(button) {

package/src/components/ThemePicker.svelte

@@ -3,8 +3,15 @@
 	import Moon from '@lucide/svelte/icons/moon';
 	import Monitor from '@lucide/svelte/icons/monitor';
 	import { getTheme, setTheme, applyTheme, type Theme } from '../theme.ts';
+	import { apiPost } from '../api.ts';
 
 	let theme: Theme = $state(getTheme());
+	/** Which half of the CRT power-cycle is playing; null when idle. */
+	let phase = $state<'collapse' | 'restore' | null>(null);
+
+	// Must match the CSS below: the theme swap has to land while the tube is dark.
+	const COLLAPSE_MS = 320;
+	const RESTORE_MS = 380;
 
 	const options: { value: Theme; label: string; icon: typeof Sun }[] = [
 		{ value: 'auto', label: 'Auto', icon: Monitor },
@@ -12,10 +19,29 @@
 		{ value: 'dark', label: 'Dark', icon: Moon }
 	];
 
-	function select(value: Theme) {
-		theme = value;
+	const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+	async function select(value: Theme) {
+		if (value === theme || phase) return;
+		// Persist first: an interrupted transition still lands the choice.
 		setTheme(value);
+		// Settings is a popup, so the tabs behind it only repaint if the stream tells them to.
+		void apiPost('/api/settings/theme', { value }).catch(() => {});
+
+		if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+			theme = value;
+			applyTheme(value);
+			return;
+		}
+
+		phase = 'collapse';
+		await wait(COLLAPSE_MS);
+		// Swapped behind the black, so the repaint itself is never on screen.
+		theme = value;
 		applyTheme(value);
+		phase = 'restore';
+		await wait(RESTORE_MS);
+		phase = null;
 	}
 </script>
 
@@ -35,11 +61,19 @@
 	{/each}
 </div>
 
+{#if phase}
+	<div class="crt" class:collapse={phase === 'collapse'} class:restore={phase === 'restore'}>
+		<span class="bar top"></span>
+		<span class="bar bottom"></span>
+		<span class="line"></span>
+	</div>
+{/if}
+
 <style>
 	.picker {
 		display: inline-flex;
 		flex: none;
-		border: 1px solid var(--ink);
+		border: 1px solid var(--edge);
 		background: var(--bg-card);
 	}
 	.segment {
@@ -58,20 +92,128 @@
 		cursor: pointer;
 	}
 	.segment + .segment {
-		border-left: 1px solid var(--ink);
+		border-left: 1px solid var(--edge);
 	}
 	.segment:hover:not(.active) {
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		color: var(--fill-ink);
 	}
 	.segment.active {
 		font-weight: 700;
-		background: var(--ink);
-		color: var(--bg);
+		background: var(--fill);
+		color: var(--fill-ink);
 		cursor: default;
 	}
 	.segment:focus-visible {
 		outline: 2px solid var(--ink);
 		outline-offset: -2px;
 	}
+
+	/* Switching themes power-cycles the monitor. `position: fixed` is viewport-relative
+	   only while no ancestor is transformed/filtered — giving one of Settings' wrappers
+	   a transform would re-root this to that ancestor instead. */
+	.crt {
+		position: fixed;
+		inset: 0;
+		z-index: 9999;
+		pointer-events: none;
+	}
+	/* Black closing in from both edges, squeezing the picture toward the centre —
+	   the deflection yoke losing the vertical sweep. */
+	.bar {
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 50%;
+		background: #000;
+	}
+	.bar.top {
+		top: 0;
+		transform-origin: top center;
+	}
+	.bar.bottom {
+		bottom: 0;
+		transform-origin: bottom center;
+	}
+	/* Tracks --screen-ink, so the tube warms back up in the phosphor colour of
+	   whichever theme it is coming back as. */
+	.line {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		right: 0;
+		height: 2px;
+		margin-top: -1px;
+		background: var(--screen-ink);
+		box-shadow: 0 0 14px 3px var(--screen-ink);
+		opacity: 0;
+	}
+
+	.crt.collapse .bar {
+		animation: crt-collapse 200ms cubic-bezier(0.7, 0, 0.84, 0) forwards;
+	}
+	.crt.collapse .line {
+		animation: crt-line-out 320ms linear forwards;
+	}
+	/* Held closed through the delay so the line can bloom before the picture opens. */
+	.crt.restore .bar {
+		animation: crt-open 260ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
+	}
+	.crt.restore .line {
+		animation: crt-line-in 380ms linear both;
+	}
+
+	@keyframes crt-collapse {
+		from {
+			transform: scaleY(0);
+		}
+		to {
+			transform: scaleY(1);
+		}
+	}
+	@keyframes crt-open {
+		from {
+			transform: scaleY(1);
+		}
+		to {
+			transform: scaleY(0);
+		}
+	}
+	/* Picture gone: the residual charge flares as a line, pinches to a dot, dies. */
+	@keyframes crt-line-out {
+		0%,
+		55% {
+			opacity: 0;
+			transform: scaleX(1);
+		}
+		62%,
+		75% {
+			opacity: 1;
+			transform: scaleX(1);
+		}
+		100% {
+			opacity: 0;
+			transform: scaleX(0.015);
+		}
+	}
+	/* Dot blooms back into a line, then the picture opens around it. */
+	@keyframes crt-line-in {
+		0% {
+			opacity: 0;
+			transform: scaleX(0.015);
+		}
+		12% {
+			opacity: 1;
+			transform: scaleX(0.015);
+		}
+		32%,
+		55% {
+			opacity: 1;
+			transform: scaleX(1);
+		}
+		100% {
+			opacity: 0;
+			transform: scaleX(1);
+		}
+	}
 </style>

package/src/components/TopBar.svelte

@@ -66,7 +66,7 @@
 				{creating ? 'Creating…' : 'New instance'}
 			</Button>
 			<Button
-				variant="primary"
+				variant="default"
 				size="sm"
 				square
 				icon={altMode === 'terminal' ? Terminal : LayoutTemplate}