watch-tail 0.9.0 → 0.10.1

package/build/server/chunks/entries/pages/_layout.svelte.js-C3CVxu2T.js

@@ -0,0 +1,621 @@
+import { ab as head$1, ac as attr, ad as attr_class, a6 as ensure_array_like, ae as escape_html, af as attr_style, ag as stringify, ah as spread_props, P as derived, ai as props_id } from '../../chunks/index-server.js-DOq0LmqS.js';
+import { p as puppy, a as parseTextSize, I as Icon, t as textSize, T as TEXT_SIZES, s as slotPosition } from '../../chunks/text-size.svelte.js-D09gVgvI.js';
+import '../../chunks/uneval.js-DaakSYFQ.js';
+
+//#region src/lib/puppy-geometry.ts
+/**
+* SVG geometry for the Labrador puppy companion, ported one-to-one from the p5.js
+* sketch it was designed in. Everything is in that sketch's 800-unit space; the
+* component only lays these shapes out in layers.
+*/
+var INK = "#3d2a1e";
+var GOLD = "#ecb667";
+var SHADE = "#cf8d45";
+var CREAM = "#fce7c0";
+var TAIL_PIVOT = {
+	x: 596,
+	y: 450
+};
+var HEAD_SCALE = 1.25;
+var HEAD_TRANSFORM = `translate(316 300) rotate(${ -0.14 * 180 / Math.PI}) scale(${HEAD_SCALE})`;
+var f = (n) => +n.toFixed(2);
+function path(start, steps, close = true) {
+	let d = `M${f(start[0])} ${f(start[1])}`;
+	for (const s of steps) d += s.length === 2 ? ` L${s.map(f).join(" ")}` : ` C${s.map(f).join(" ")}`;
+	return close ? `${d} Z` : d;
+}
+function leg(x, topL = 540, topR = 540) {
+	return {
+		d: path([x, topL], [
+			[x, 598],
+			[
+				x - 28,
+				602,
+				x - 34,
+				640,
+				x + 2,
+				642
+			],
+			[
+				x + 26,
+				644,
+				x + 50,
+				644,
+				x + 54,
+				628
+			],
+			[
+				x + 58,
+				614,
+				x + 52,
+				604,
+				x + 52,
+				598
+			],
+			[x + 52, topR]
+		], false),
+		patch: `M${x + 4.5} ${topL - 9} L${x + 47.5} ${topR - 9} L${x + 47.5} ${topR + 4} L${x + 4.5} ${topL + 4} Z`,
+		toes: `M${x + 4} 628 L${x + 4} 641 M${x + 24} 628 L${x + 24} 642`
+	};
+}
+var farLegs = [leg(340), leg(542)].map((l) => l.d);
+var nearLegs = [leg(280, 552, 563.5), leg(488, 568.4, 560)];
+var body = path([262, 430], [
+	[
+		320,
+		380,
+		470,
+		378,
+		540,
+		390
+	],
+	[
+		598,
+		402,
+		622,
+		470,
+		592,
+		525
+	],
+	[
+		566,
+		566,
+		500,
+		572,
+		430,
+		568
+	],
+	[
+		340,
+		566,
+		262,
+		566,
+		244,
+		520
+	],
+	[
+		230,
+		485,
+		236,
+		450,
+		262,
+		430
+	]
+]);
+var haunch = "M486 440 C534 420 582 456 574 520";
+/** A point on a cubic Bézier, one axis at a time (p5's `bezierPoint`). */
+function bezierPoint(a, b, c, d, t) {
+	return (1 - t) ** 3 * a + 3 * (1 - t) ** 2 * t * b + 3 * (1 - t) * t ** 2 * c + t ** 3 * d;
+}
+/** The tangent of a cubic Bézier, one axis at a time (p5's `bezierTangent`). */
+function bezierTangent(a, b, c, d, t) {
+	return 3 * (1 - t) ** 2 * (b - a) + 6 * (1 - t) * t * (c - b) + 3 * t ** 2 * (d - c);
+}
+function tailPath() {
+	const [x0, y0, x1, y1, x2, y2, x3, y3] = [
+		596,
+		450,
+		662,
+		440,
+		704,
+		386,
+		700,
+		300
+	];
+	const n = 40;
+	const left = [];
+	const right = [];
+	let tip = {
+		x: 0,
+		y: 0,
+		w: 0,
+		a: 0
+	};
+	for (let i = 0; i <= n; i++) {
+		const t = i / n;
+		const w = 30 + -16 * t;
+		const x = bezierPoint(x0, x1, x2, x3, t);
+		const y = bezierPoint(y0, y1, y2, y3, t);
+		const tx = bezierTangent(x0, x1, x2, x3, t);
+		const ty = bezierTangent(y0, y1, y2, y3, t);
+		const m = Math.hypot(tx, ty) || 1;
+		left.push([x - ty / m * w, y + tx / m * w]);
+		right.push([x + ty / m * w, y - tx / m * w]);
+		tip = {
+			x,
+			y,
+			w,
+			a: Math.atan2(tx, -ty)
+		};
+	}
+	const cap = [];
+	for (let k = 1; k < 12; k++) {
+		const a = tip.a - Math.PI * k / 12;
+		cap.push([tip.x + Math.cos(a) * tip.w, tip.y + Math.sin(a) * tip.w]);
+	}
+	return [
+		...left,
+		...cap,
+		...right.toReversed()
+	].map(([x, y], i) => `${i ? "L" : "M"}${f(x)} ${f(y)}`).join(" ");
+}
+var tail = tailPath();
+function arc(cx, cy, r, from, to) {
+	const p = (deg) => [cx + r * Math.cos(deg * Math.PI / 180), cy + r * Math.sin(deg * Math.PI / 180)].map(f);
+	const [sx, sy] = p(from);
+	const [ex, ey] = p(to);
+	return `M${sx} ${sy} A${r} ${r} 0 0 1 ${ex} ${ey}`;
+}
+var wagMarks = [
+	arc(700, 314, 56, 196, 246),
+	arc(700, 314, 80, 202, 240),
+	arc(700, 314, 56, -66, -16),
+	arc(700, 314, 80, -60, -22)
+];
+var head = path([-112, 10], [
+	[
+		-120,
+		-72,
+		-62,
+		-112,
+		0,
+		-112
+	],
+	[
+		62,
+		-112,
+		120,
+		-72,
+		112,
+		10
+	],
+	[
+		106,
+		72,
+		60,
+		104,
+		0,
+		104
+	],
+	[
+		-60,
+		104,
+		-106,
+		72,
+		-112,
+		10
+	]
+]);
+var ears = [-1, 1].map((s) => path([s * 72, -88], [
+	[
+		s * 120,
+		-96,
+		s * 154,
+		-40,
+		s * 150,
+		22
+	],
+	[
+		s * 147,
+		66,
+		s * 120,
+		86,
+		s * 102,
+		66
+	],
+	[
+		s * 82,
+		44,
+		s * 64,
+		-20,
+		s * 72,
+		-88
+	]
+]));
+var muzzle = path([-58, 52], [
+	[
+		-60,
+		18,
+		-26,
+		10,
+		0,
+		14
+	],
+	[
+		26,
+		10,
+		60,
+		18,
+		58,
+		52
+	],
+	[
+		56,
+		84,
+		26,
+		96,
+		0,
+		96
+	],
+	[
+		-26,
+		96,
+		-56,
+		84,
+		-58,
+		52
+	]
+]);
+var nose = path([0, 44], [
+	[
+		-20,
+		44,
+		-26,
+		30,
+		-19,
+		22
+	],
+	[
+		-11,
+		15,
+		11,
+		15,
+		19,
+		22
+	],
+	[
+		26,
+		30,
+		20,
+		44,
+		0,
+		44
+	]
+]);
+var eyes = [-1, 1].map((s) => ({
+	x: s * 44,
+	y: -10
+}));
+var brows = ["M-68 -44 C-60 -56 -40 -64 -26 -62", "M68 -44 C60 -56 40 -64 26 -62"];
+var mouth = "M0 44 L0 58 M0 58 C-4 70 -20 72 -27 62 M0 58 C4 70 20 72 27 62";
+var legBridge = "M380 548 L500 548 L500 650 C470 636 410 636 380 650 Z";
+var VIEWBOX = "76 90 784 630";
+//#endregion
+//#region src/lib/components/PuppyLogo.svelte
+function PuppyLogo($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		const uid = props_id($$renderer);
+		let { speed = 520, amplitude = 14, marks = true, sticker = true, size = 64, title = "A Labrador puppy wagging its tail" } = $$props;
+		const EXCITED_SPEEDUP = .5;
+		const EXCITED_EXTRA_SWING = 10;
+		let active = false;
+		let excited = false;
+		const headLine = (w) => w / HEAD_SCALE;
+		/** Wag timing and swing for the keyframes, plus the point the tail rotates around. */
+		const animationVars = derived(() => `--wag-speed: ${speed}ms; --wag-amp: ${amplitude}deg; --excited-speed: ${speed * EXCITED_SPEEDUP}ms; --excited-amp: ${amplitude + EXCITED_EXTRA_SWING}deg; --tail-pivot: ${TAIL_PIVOT.x}px ${TAIL_PIVOT.y}px`);
+		const shadowId = `puppy-shadow-${uid}`;
+		$$renderer.push(`<svg${attr("viewBox", VIEWBOX)}${attr("width", size)} role="img"${attr("aria-label", title)}${attr_style(animationVars())}${attr_class("svelte-17zj3z9", void 0, {
+			"active": active,
+			"excited": excited
+		})}><title class="svelte-17zj3z9">${escape_html(title)}</title>`);
+		if (sticker) {
+			$$renderer.push(`<!--[0--><defs class="svelte-17zj3z9"><filter${attr("id", shadowId)} x="-10%" y="-10%" width="120%" height="130%" class="svelte-17zj3z9"><feDropShadow dx="0" dy="7" stdDeviation="7"${attr("flood-color", INK)} flood-opacity="0.3" class="svelte-17zj3z9"></feDropShadow></filter></defs><g${attr("filter", `url(#${shadowId})`)} fill="#fff" stroke="#fff"${attr("stroke-width", 63)} class="svelte-17zj3z9"><!--[-->`);
+			const each_array = ensure_array_like(farLegs);
+			for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+				let d = each_array[$$index];
+				$$renderer.push(`<path${attr("d", d)} class="svelte-17zj3z9"></path>`);
+			}
+			$$renderer.push(`<!--]--><path${attr("d", body)} class="svelte-17zj3z9"></path><!--[-->`);
+			const each_array_1 = ensure_array_like(nearLegs);
+			for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
+				let l = each_array_1[$$index_1];
+				$$renderer.push(`<path${attr("d", l.d)} class="svelte-17zj3z9"></path>`);
+			}
+			$$renderer.push(`<!--]--><path${attr("d", legBridge)} stroke="none" class="svelte-17zj3z9"></path><g${attr("transform", HEAD_TRANSFORM)}${attr("stroke-width", headLine(63))} class="svelte-17zj3z9"><path${attr("d", head)} class="svelte-17zj3z9"></path><!--[-->`);
+			const each_array_2 = ensure_array_like(ears);
+			for (let $$index_2 = 0, $$length = each_array_2.length; $$index_2 < $$length; $$index_2++) {
+				let d = each_array_2[$$index_2];
+				$$renderer.push(`<path${attr("d", d)} class="svelte-17zj3z9"></path>`);
+			}
+			$$renderer.push(`<!--]--><path${attr("d", muzzle)} class="svelte-17zj3z9"></path></g><g class="tail svelte-17zj3z9"><path${attr("d", tail)} class="svelte-17zj3z9"></path></g></g>`);
+		} else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--><g${attr("fill", INK)}${attr("stroke", INK)}${attr("stroke-width", 27)} class="svelte-17zj3z9"><!--[-->`);
+		const each_array_3 = ensure_array_like(farLegs);
+		for (let $$index_3 = 0, $$length = each_array_3.length; $$index_3 < $$length; $$index_3++) {
+			let d = each_array_3[$$index_3];
+			$$renderer.push(`<path${attr("d", d)} class="svelte-17zj3z9"></path>`);
+		}
+		$$renderer.push(`<!--]--><path${attr("d", body)} class="svelte-17zj3z9"></path><!--[-->`);
+		const each_array_4 = ensure_array_like(nearLegs);
+		for (let $$index_4 = 0, $$length = each_array_4.length; $$index_4 < $$length; $$index_4++) {
+			let l = each_array_4[$$index_4];
+			$$renderer.push(`<path${attr("d", l.d)} class="svelte-17zj3z9"></path>`);
+		}
+		$$renderer.push(`<!--]--><g${attr("transform", HEAD_TRANSFORM)}${attr("stroke-width", headLine(27))} class="svelte-17zj3z9"><path${attr("d", head)} class="svelte-17zj3z9"></path><!--[-->`);
+		const each_array_5 = ensure_array_like(ears);
+		for (let $$index_5 = 0, $$length = each_array_5.length; $$index_5 < $$length; $$index_5++) {
+			let d = each_array_5[$$index_5];
+			$$renderer.push(`<path${attr("d", d)} class="svelte-17zj3z9"></path>`);
+		}
+		$$renderer.push(`<!--]--><path${attr("d", muzzle)} class="svelte-17zj3z9"></path></g></g><g class="tail svelte-17zj3z9"><path${attr("d", tail)}${attr("fill", INK)}${attr("stroke", INK)}${attr("stroke-width", 27)} class="svelte-17zj3z9"></path></g><g${attr("stroke", INK)}${attr("stroke-width", 9)} class="svelte-17zj3z9"><!--[-->`);
+		const each_array_6 = ensure_array_like(farLegs);
+		for (let $$index_6 = 0, $$length = each_array_6.length; $$index_6 < $$length; $$index_6++) {
+			let d = each_array_6[$$index_6];
+			$$renderer.push(`<path${attr("d", d)}${attr("fill", SHADE)} class="svelte-17zj3z9"></path>`);
+		}
+		$$renderer.push(`<!--]--></g><g class="tail svelte-17zj3z9"><path${attr("d", tail)}${attr("fill", GOLD)}${attr("stroke", INK)}${attr("stroke-width", 9)} class="svelte-17zj3z9"></path></g><g${attr("stroke", INK)}${attr("stroke-width", 9)} class="svelte-17zj3z9"><path${attr("d", body)}${attr("fill", GOLD)} class="svelte-17zj3z9"></path><path${attr("d", haunch)} fill="none" stroke-width="6" class="svelte-17zj3z9"></path><!--[-->`);
+		const each_array_7 = ensure_array_like(nearLegs);
+		for (let $$index_7 = 0, $$length = each_array_7.length; $$index_7 < $$length; $$index_7++) {
+			let l = each_array_7[$$index_7];
+			$$renderer.push(`<path${attr("d", l.d)}${attr("fill", GOLD)} class="svelte-17zj3z9"></path><path${attr("d", l.patch)}${attr("fill", GOLD)} stroke="none" class="svelte-17zj3z9"></path><path${attr("d", l.toes)} fill="none" stroke-width="6" class="svelte-17zj3z9"></path>`);
+		}
+		$$renderer.push(`<!--]--></g><g${attr("transform", HEAD_TRANSFORM)}${attr("stroke", INK)}${attr("stroke-width", headLine(9))} class="svelte-17zj3z9"><path${attr("d", head)}${attr("fill", GOLD)} class="svelte-17zj3z9"></path><!--[-->`);
+		const each_array_8 = ensure_array_like(ears);
+		for (let $$index_8 = 0, $$length = each_array_8.length; $$index_8 < $$length; $$index_8++) {
+			let d = each_array_8[$$index_8];
+			$$renderer.push(`<path${attr("d", d)}${attr("fill", SHADE)} class="svelte-17zj3z9"></path>`);
+		}
+		$$renderer.push(`<!--]--><path${attr("d", muzzle)}${attr("fill", CREAM)} class="svelte-17zj3z9"></path><path${attr("d", nose)}${attr("fill", INK)} class="svelte-17zj3z9"></path><ellipse cx="-7" cy="25" rx="5" ry="3"${attr("fill", CREAM)} stroke="none" class="svelte-17zj3z9"></ellipse><!--[-->`);
+		const each_array_9 = ensure_array_like(eyes);
+		for (let $$index_9 = 0, $$length = each_array_9.length; $$index_9 < $$length; $$index_9++) {
+			let e = each_array_9[$$index_9];
+			$$renderer.push(`<ellipse${attr("cx", e.x)}${attr("cy", e.y)} rx="18" ry="21"${attr("fill", INK)} stroke="none" class="svelte-17zj3z9"></ellipse><ellipse${attr("cx", e.x + 7)}${attr("cy", e.y - 10)} rx="7.5" ry="8" fill="#fff" stroke="none" class="svelte-17zj3z9"></ellipse><circle${attr("cx", e.x - 8)}${attr("cy", e.y + 12)} r="3" fill="#fff" stroke="none" class="svelte-17zj3z9"></circle>`);
+		}
+		$$renderer.push(`<!--]--><g fill="none"${attr("stroke-width", headLine(6))} class="svelte-17zj3z9"><!--[-->`);
+		const each_array_10 = ensure_array_like(brows);
+		for (let $$index_10 = 0, $$length = each_array_10.length; $$index_10 < $$length; $$index_10++) {
+			let d = each_array_10[$$index_10];
+			$$renderer.push(`<path${attr("d", d)} class="svelte-17zj3z9"></path>`);
+		}
+		$$renderer.push(`<!--]--><path${attr("d", mouth)} class="svelte-17zj3z9"></path></g></g>`);
+		if (marks && !sticker) {
+			$$renderer.push(`<!--[0--><g class="marks svelte-17zj3z9" fill="none"${attr("stroke", INK)} stroke-width="8"><!--[-->`);
+			const each_array_11 = ensure_array_like(wagMarks);
+			for (let $$index_11 = 0, $$length = each_array_11.length; $$index_11 < $$length; $$index_11++) {
+				let d = each_array_11[$$index_11];
+				$$renderer.push(`<path${attr("d", d)} class="svelte-17zj3z9"></path>`);
+			}
+			$$renderer.push(`<!--]--></g>`);
+		} else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--></svg>`);
+	});
+}
+//#endregion
+//#region src/lib/components/PuppyCompanion.svelte
+function PuppyCompanion($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		/** Space kept clear above the top slots, so the puppy never covers the header. */
+		let { topInset = 0 } = $$props;
+		/** The puppy's size on screen; the height follows the artwork's aspect ratio. */
+		const WIDTH = 128;
+		const [, , viewBoxWidth = 1, viewBoxHeight = 1] = VIEWBOX.split(" ").map(Number);
+		const HEIGHT = WIDTH * viewBoxHeight / viewBoxWidth;
+		const MARGIN = 16;
+		let viewportWidth = 0;
+		let viewportHeight = 0;
+		/** True once a press has moved far enough to be a drag. */
+		let dragging = false;
+		const viewport = derived(() => ({
+			width: viewportWidth,
+			height: viewportHeight
+		}));
+		function slotAt(slot) {
+			return slotPosition(slot, viewport(), {
+				width: WIDTH,
+				height: HEIGHT
+			}, {
+				margin: MARGIN,
+				top: topInset
+			});
+		}
+		const home = derived(() => slotAt(puppy.slot));
+		const position = derived(() => home());
+		if (puppy.shown) {
+			$$renderer.push("<!--[0-->");
+			$$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--> <div role="button" tabindex="0" aria-label="The watch-tail puppy. Click to make it wag; drag it, or use the arrow keys, to move it to another corner."${attr_class("companion rounded-2xl outline-offset-2 focus-visible:outline-2 focus-visible:outline-sky-500 svelte-gewjew", void 0, { "dragging": dragging })}${attr_style(`transform: translate(${stringify(position().x)}px, ${stringify(position().y)}px)`)} data-testid="puppy-companion"${attr("data-slot", puppy.slot)}>`);
+			PuppyLogo($$renderer, {
+				pulse: puppy.pulse,
+				excite: puppy.excitement,
+				marks: false,
+				size: WIDTH,
+				title: "The watch-tail puppy"
+			});
+			$$renderer.push(`<!----></div>`);
+		} else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]-->`);
+	});
+}
+//#endregion
+//#region node_modules/.pnpm/@lucide+svelte@1.47.0_svelte@5.57.0/node_modules/@lucide/svelte/dist/icons/dog.svelte
+function Dog($$renderer, $$props) {
+	let { $$slots, $$events, ...props } = $$props;
+	Icon($$renderer, spread_props([props, { icon: {
+		"name": "dog",
+		"size": 24,
+		"node": [
+			["path", { "d": "M11.25 16.25h1.5L12 17z" }],
+			["path", { "d": "M16 14v.5" }],
+			["path", { "d": "M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444a11.702 11.702 0 0 0-.493-3.309" }],
+			["path", { "d": "M8 14v.5" }],
+			["path", { "d": "M8.5 8.5c-.384 1.05-1.083 2.028-2.344 2.5-1.931.722-3.576-.297-3.656-1-.113-.994 1.177-6.53 4-7 1.923-.321 3.651.845 3.651 2.235A7.497 7.497 0 0 1 14 5.277c0-1.39 1.844-2.598 3.767-2.277 2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.239-2.5" }]
+		]
+	} }]));
+}
+//#endregion
+//#region src/lib/components/PuppyToggle.svelte
+function PuppyToggle($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		$$renderer.push(`<button type="button"${attr("aria-pressed", puppy.shown)}${attr("title", puppy.shown ? "Send the puppy away" : "Bring out the puppy")} data-testid="puppy-toggle"${attr_class(`flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs transition-colors ${puppy.shown ? "border-sky-700 bg-sky-950/60 text-sky-200" : "border-neutral-800 bg-neutral-900 text-neutral-400 hover:border-neutral-700 hover:text-neutral-200"}`)}>`);
+		Dog($$renderer, { class: "size-3.5" });
+		$$renderer.push(`<!----> Puppy</button>`);
+	});
+}
+//#endregion
+//#region src/lib/components/TextSizeSelect.svelte
+function TextSizeSelect($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		let selected = parseTextSize(null);
+		function apply(value, persist = true) {
+			selected = parseTextSize(value);
+			textSize.apply(selected, persist);
+		}
+		$$renderer.push(`<label class="flex items-center gap-2 text-xs text-neutral-400"><span>Text size</span> `);
+		$$renderer.select({
+			"aria-label": "Text size",
+			"data-testid": "text-size-select",
+			value: selected,
+			onchange: (event) => apply(event.currentTarget.value),
+			class: "rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs text-neutral-200 outline-none focus:border-sky-600"
+		}, ($$renderer) => {
+			$$renderer.push(`<!--[-->`);
+			const each_array = ensure_array_like(TEXT_SIZES);
+			for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+				let size = each_array[$$index];
+				$$renderer.option({ value: size.id }, ($$renderer) => {
+					$$renderer.push(`${escape_html(size.name)}`);
+				});
+			}
+			$$renderer.push(`<!--]-->`);
+		});
+		$$renderer.push(`</label>`);
+	});
+}
+//#endregion
+//#region src/lib/themes.ts
+/** Built-in palettes. Their tokens live in themes.css. */
+var THEMES = [
+	{
+		id: "midnight",
+		name: "Midnight",
+		mode: "dark"
+	},
+	{
+		id: "ocean",
+		name: "Ocean",
+		mode: "dark"
+	},
+	{
+		id: "forest",
+		name: "Forest",
+		mode: "dark"
+	},
+	{
+		id: "plum",
+		name: "Plum",
+		mode: "dark"
+	},
+	{
+		id: "daylight",
+		name: "Daylight",
+		mode: "light"
+	},
+	{
+		id: "sand",
+		name: "Sand",
+		mode: "light"
+	},
+	{
+		id: "mint",
+		name: "Mint",
+		mode: "light"
+	},
+	{
+		id: "lavender",
+		name: "Lavender",
+		mode: "light"
+	}
+];
+var THEME_STORAGE_KEY = "watch-tail:theme";
+/** Unknown or obsolete preferences fall back to Midnight. */
+function parseTheme(value) {
+	return THEMES.find((theme) => theme.id === value)?.id ?? "midnight";
+}
+//#endregion
+//#region src/lib/components/ThemeSelect.svelte
+function ThemeSelect($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		let selected = "midnight";
+		function apply(value, persist = true) {
+			selected = parseTheme(value);
+			document.documentElement.dataset.theme = selected;
+			if (persist) try {
+				localStorage.setItem(THEME_STORAGE_KEY, selected);
+			} catch {}
+		}
+		$$renderer.push(`<label class="flex items-center gap-2 text-xs text-neutral-400"><span>Theme</span> `);
+		$$renderer.select({
+			"aria-label": "Colour theme",
+			"data-testid": "theme-select",
+			value: selected,
+			onchange: (event) => apply(event.currentTarget.value),
+			class: "rounded-md border border-neutral-800 bg-neutral-900 px-2 py-1 text-xs text-neutral-200 outline-none focus:border-sky-600"
+		}, ($$renderer) => {
+			$$renderer.push(`<!--[-->`);
+			const each_array = ensure_array_like(["dark", "light"]);
+			for (let $$index_1 = 0, $$length = each_array.length; $$index_1 < $$length; $$index_1++) {
+				let mode = each_array[$$index_1];
+				$$renderer.push(`<optgroup${attr("label", mode === "dark" ? "Dark themes" : "Light themes")}><!--[-->`);
+				const each_array_1 = ensure_array_like(THEMES.filter((theme) => theme.mode === mode));
+				for (let $$index = 0, $$length = each_array_1.length; $$index < $$length; $$index++) {
+					let theme = each_array_1[$$index];
+					$$renderer.option({ value: theme.id }, ($$renderer) => {
+						$$renderer.push(`${escape_html(theme.name)}`);
+					});
+				}
+				$$renderer.push(`<!--]--></optgroup>`);
+			}
+			$$renderer.push(`<!--]-->`);
+		});
+		$$renderer.push(`</label>`);
+	});
+}
+//#endregion
+//#region src/lib/assets/favicon.svg
+var favicon_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%20role='img'%20aria-label='watch-tail'%3e%3ctitle%3ewatch-tail%3c/title%3e%3c!--%20A%20log%20window:%20three%20lines,%20the%20newest%20highlighted,%20with%20the%20tail%20still%20running.%20--%3e%3crect%20width='32'%20height='32'%20rx='7'%20fill='%230a0a0a'%20/%3e%3crect%20x='5'%20y='6.6'%20width='14'%20height='4'%20rx='2'%20fill='%2338bdf8'%20/%3e%3crect%20x='5'%20y='14'%20width='22'%20height='4'%20rx='2'%20fill='%23525252'%20/%3e%3crect%20x='5'%20y='21.4'%20width='17'%20height='4'%20rx='2'%20fill='%23404040'%20/%3e%3ccircle%20cx='25.6'%20cy='8.6'%20r='2.8'%20fill='%2338bdf8'%20/%3e%3c/svg%3e";
+//#endregion
+//#region src/routes/+layout.svelte
+function _layout($$renderer, $$props) {
+	let { children } = $$props;
+	/** The header's height, so the puppy's top corners sit below it. */
+	let headerHeight = 0;
+	head$1("12qhfyh", $$renderer, ($$renderer) => {
+		$$renderer.title(($$renderer) => {
+			$$renderer.push(`<title>watch-tail</title>`);
+		});
+		$$renderer.push(`<link rel="icon"${attr("href", favicon_default)}/>`);
+	});
+	$$renderer.push(`<div class="flex h-dvh min-h-[30rem] flex-col overflow-hidden bg-neutral-950 font-sans text-neutral-100 antialiased selection:bg-sky-900/60"><header class="flex-none border-b border-neutral-900 bg-neutral-950/90"><div class="flex w-full items-baseline gap-3 px-3 py-2 sm:px-4"><span class="text-sm font-semibold tracking-tight">watch<span class="text-sky-400">-tail</span></span> <span class="hidden text-xs text-neutral-500 sm:inline">Tail CloudWatch Logs in the browser</span> <div class="ml-auto flex flex-wrap items-center gap-x-3 gap-y-1">`);
+	PuppyToggle($$renderer);
+	$$renderer.push(`<!----> `);
+	TextSizeSelect($$renderer);
+	$$renderer.push(`<!----> `);
+	ThemeSelect($$renderer);
+	$$renderer.push(`<!----></div></div></header> <main class="flex min-h-0 w-full flex-1 flex-col gap-3 px-3 py-3 sm:px-4">`);
+	children($$renderer);
+	$$renderer.push(`<!----></main> `);
+	PuppyCompanion($$renderer, { topInset: headerHeight });
+	$$renderer.push(`<!----></div>`);
+}
+
+export { _layout as default };