@silvery/examples 0.17.3 → 0.17.5

package/dist/apps/gallery.mjs

@@ -0,0 +1,765 @@
+import { t as _usingCtx } from "../usingCtx-CsEf0xO3.mjs";
+import { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
+import { useMemo, useState } from "react";
+import { Box, H2, Image, Kbd, Muted, Tab, TabList, TabPanel, Tabs, Text, createTerm, render, useApp, useBoxRect, useInput } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { deflateSync } from "node:zlib";
+//#region apps/gallery.tsx
+const meta = {
+	name: "Gallery",
+	description: "Kitty images, pixel art, and truecolor rendering",
+	demo: true,
+	features: [
+		"Image",
+		"Kitty graphics",
+		"half-block",
+		"truecolor",
+		"mouse input"
+	]
+};
+/** HSV to RGB (h: 0-360, s/v: 0-1) */
+function hsvToRgb(h, s, v) {
+	const c = v * s;
+	const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+	const m = v - c;
+	let r = 0, g = 0, b = 0;
+	if (h < 60) {
+		r = c;
+		g = x;
+	} else if (h < 120) {
+		r = x;
+		g = c;
+	} else if (h < 180) {
+		g = c;
+		b = x;
+	} else if (h < 240) {
+		g = x;
+		b = c;
+	} else if (h < 300) {
+		r = x;
+		b = c;
+	} else {
+		r = c;
+		b = x;
+	}
+	return [
+		Math.round((r + m) * 255),
+		Math.round((g + m) * 255),
+		Math.round((b + m) * 255)
+	];
+}
+/** HSL to RGB (h: 0-360, s/l: 0-1) */
+function hslToRgb(h, s, l) {
+	const c = (1 - Math.abs(2 * l - 1)) * s;
+	const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+	const m = l - c / 2;
+	let r1, g1, b1;
+	if (h < 60) [r1, g1, b1] = [
+		c,
+		x,
+		0
+	];
+	else if (h < 120) [r1, g1, b1] = [
+		x,
+		c,
+		0
+	];
+	else if (h < 180) [r1, g1, b1] = [
+		0,
+		c,
+		x
+	];
+	else if (h < 240) [r1, g1, b1] = [
+		0,
+		x,
+		c
+	];
+	else if (h < 300) [r1, g1, b1] = [
+		x,
+		0,
+		c
+	];
+	else [r1, g1, b1] = [
+		c,
+		0,
+		x
+	];
+	return [
+		Math.round((r1 + m) * 255),
+		Math.round((g1 + m) * 255),
+		Math.round((b1 + m) * 255)
+	];
+}
+function crc32(data) {
+	let crc = 4294967295;
+	for (let i = 0; i < data.length; i++) {
+		crc ^= data[i];
+		for (let j = 0; j < 8; j++) crc = crc & 1 ? crc >>> 1 ^ 3988292384 : crc >>> 1;
+	}
+	return (crc ^ 4294967295) >>> 0;
+}
+function makeChunk(type, data) {
+	const len = Buffer.alloc(4);
+	len.writeUInt32BE(data.length);
+	const typeBytes = Buffer.from(type, "ascii");
+	const payload = Buffer.concat([typeBytes, data]);
+	const crc = crc32(payload);
+	const crcBuf = Buffer.alloc(4);
+	crcBuf.writeUInt32BE(crc >>> 0);
+	return Buffer.concat([
+		len,
+		payload,
+		crcBuf
+	]);
+}
+function encodePng(width, height, pixelFn) {
+	const rawData = Buffer.alloc(height * (1 + width * 4));
+	for (let y = 0; y < height; y++) {
+		const rowOffset = y * (1 + width * 4);
+		rawData[rowOffset] = 0;
+		for (let x = 0; x < width; x++) {
+			const [r, g, b] = pixelFn(x, y);
+			const off = rowOffset + 1 + x * 4;
+			rawData[off] = r;
+			rawData[off + 1] = g;
+			rawData[off + 2] = b;
+			rawData[off + 3] = 255;
+		}
+	}
+	const compressed = deflateSync(rawData);
+	const signature = Buffer.from([
+		137,
+		80,
+		78,
+		71,
+		13,
+		10,
+		26,
+		10
+	]);
+	const ihdr = Buffer.alloc(13);
+	ihdr.writeUInt32BE(width, 0);
+	ihdr.writeUInt32BE(height, 4);
+	ihdr[8] = 8;
+	ihdr[9] = 6;
+	return Buffer.concat([
+		signature,
+		makeChunk("IHDR", ihdr),
+		makeChunk("IDAT", compressed),
+		makeChunk("IEND", Buffer.alloc(0))
+	]);
+}
+function generateRainbow(w, h) {
+	return encodePng(w, h, (x, y) => {
+		return hsvToRgb(x / w * 360, .7 + .3 * Math.sin(y / h * Math.PI), .5 + .5 * Math.cos(y / h * Math.PI * 2));
+	});
+}
+function generatePlasma(w, h) {
+	return encodePng(w, h, (x, y) => {
+		const nx = x / w;
+		const ny = y / h;
+		const v1 = Math.sin(nx * 10 + ny * 3);
+		const v2 = Math.sin(nx * 5 - ny * 8 + 2);
+		const v3 = Math.sin(Math.sqrt((nx - .5) ** 2 + (ny - .5) ** 2) * 15);
+		return hslToRgb(((v1 + v2 + v3) / 3 + 1) / 2 * 360, .9, .55);
+	});
+}
+function generateMandelbrot(w, h) {
+	return encodePng(w, h, (x, y) => {
+		const cx = x / w * 3.5 - 2.5;
+		const cy = y / h * 2 - 1;
+		let zx = 0, zy = 0;
+		let i = 0;
+		const maxIter = 80;
+		while (zx * zx + zy * zy < 4 && i < maxIter) {
+			const tmp = zx * zx - zy * zy + cx;
+			zy = 2 * zx * zy + cy;
+			zx = tmp;
+			i++;
+		}
+		if (i === maxIter) return [
+			0,
+			0,
+			0
+		];
+		return hslToRgb(i / maxIter * 360, 1, .5);
+	});
+}
+function generateGradientGrid(w, h) {
+	return encodePng(w, h, (x, y) => {
+		return [
+			Math.round(x / w * 255),
+			Math.round(y / h * 255),
+			Math.round(255 - (x + y) / (w + h) * 255)
+		];
+	});
+}
+function generateCheckerPattern(w, h) {
+	const size = 16;
+	return encodePng(w, h, (x, y) => {
+		const cx = Math.floor(x / size);
+		const cy = Math.floor(y / size);
+		return hslToRgb((cx + cy) * 30 % 360, .8, (cx + cy) % 2 === 0 ? .6 : .35);
+	});
+}
+function ImagesTab() {
+	const rect = useBoxRect();
+	const w = Math.max(20, rect.width - 4);
+	const imgH = Math.max(5, rect.height - 6);
+	const images = useMemo(() => {
+		const pw = 256;
+		const ph = 192;
+		return [
+			{
+				name: "Rainbow",
+				description: "HSV color wheel gradient",
+				png: generateRainbow(pw, ph)
+			},
+			{
+				name: "Plasma",
+				description: "Sine-wave plasma interference",
+				png: generatePlasma(pw, ph)
+			},
+			{
+				name: "Mandelbrot",
+				description: "Fractal escape-time coloring",
+				png: generateMandelbrot(pw, ph)
+			},
+			{
+				name: "RGB Cube",
+				description: "Red-Green-Blue gradient grid",
+				png: generateGradientGrid(pw, ph)
+			},
+			{
+				name: "Checker",
+				description: "Hue-shifted checkerboard",
+				png: generateCheckerPattern(pw, ph)
+			}
+		];
+	}, []);
+	const [index, setIndex] = useState(0);
+	const img = images[index];
+	useInput((input, key) => {
+		if (input === "j" || key.downArrow || input === "n") setIndex((i) => (i + 1) % images.length);
+		if (input === "k" || key.upArrow || input === "p") setIndex((i) => (i - 1 + images.length) % images.length);
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		gap: 1,
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				paddingX: 1,
+				gap: 2,
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						bold: true,
+						color: "$primary",
+						children: img.name
+					}),
+					/* @__PURE__ */ jsx(Muted, { children: img.description }),
+					/* @__PURE__ */ jsxs(Muted, { children: [
+						"(",
+						index + 1,
+						"/",
+						images.length,
+						")"
+					] })
+				]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				flexGrow: 1,
+				justifyContent: "center",
+				paddingX: 1,
+				children: /* @__PURE__ */ jsx(Image, {
+					src: img.png,
+					width: w,
+					height: imgH,
+					fallback: `[${img.name} — graphics protocol not available. Run in Kitty/WezTerm/Ghostty for images.]`
+				})
+			}),
+			/* @__PURE__ */ jsxs(Muted, { children: [
+				" ",
+				/* @__PURE__ */ jsx(Kbd, { children: "j/k" }),
+				" navigate images"
+			] })
+		]
+	});
+}
+const UPPER_HALF = "▀";
+const LOWER_HALF = "▄";
+const FULL_BLOCK = "█";
+const PAINT_PRESETS = [
+	{
+		name: "white",
+		color: [
+			255,
+			255,
+			255
+		]
+	},
+	{
+		name: "red",
+		color: [
+			255,
+			0,
+			0
+		]
+	},
+	{
+		name: "orange",
+		color: [
+			255,
+			165,
+			0
+		]
+	},
+	{
+		name: "yellow",
+		color: [
+			255,
+			255,
+			0
+		]
+	},
+	{
+		name: "green",
+		color: [
+			0,
+			200,
+			0
+		]
+	},
+	{
+		name: "cyan",
+		color: [
+			0,
+			255,
+			255
+		]
+	},
+	{
+		name: "blue",
+		color: [
+			0,
+			100,
+			255
+		]
+	},
+	{
+		name: "magenta",
+		color: [
+			200,
+			0,
+			200
+		]
+	},
+	{
+		name: "pink",
+		color: [
+			255,
+			128,
+			200
+		]
+	},
+	{
+		name: "black",
+		color: [
+			30,
+			30,
+			30
+		]
+	}
+];
+function PaintTab() {
+	const rect = useBoxRect();
+	const canvasW = Math.max(10, rect.width - 2);
+	const canvasTermH = Math.max(4, rect.height - 7);
+	const canvasPixH = canvasTermH * 2;
+	const [pixels, setPixels] = useState(() => {
+		const rows = [];
+		for (let y = 0; y < canvasPixH; y++) rows.push(new Array(canvasW).fill(null));
+		const cx = Math.floor(canvasW / 2);
+		const cy = Math.floor(canvasPixH / 2);
+		const radius = Math.min(cx, cy) - 2;
+		for (let angle = 0; angle < 720; angle += 2) {
+			const r = angle / 720 * radius;
+			const rad = angle * Math.PI / 180;
+			const px = Math.round(cx + r * Math.cos(rad));
+			const py = Math.round(cy + r * Math.sin(rad));
+			const color = hslToRgb(angle % 360, .9, .55);
+			for (let dy = -1; dy <= 1; dy++) for (let dx = -1; dx <= 1; dx++) {
+				const x = px + dx;
+				const y = py + dy;
+				if (x >= 0 && x < canvasW && y >= 0 && y < canvasPixH) rows[y][x] = color;
+			}
+		}
+		return rows;
+	});
+	const [colorIndex, setColorIndex] = useState(1);
+	const [tool, setTool] = useState("pen");
+	const currentColor = PAINT_PRESETS[colorIndex].color;
+	useInput((input) => {
+		if (input >= "1" && input <= "9") {
+			setColorIndex(Number(input) - 1);
+			setTool("pen");
+		} else if (input === "0") {
+			setColorIndex(9);
+			setTool("pen");
+		} else if (input === "e") setTool((t) => t === "eraser" ? "pen" : "eraser");
+		else if (input === "c") setPixels((prev) => prev.map((row) => row.map(() => null)));
+	});
+	const canvasLines = [];
+	for (let row = 0; row < canvasTermH; row++) {
+		const cells = [];
+		for (let col = 0; col < canvasW; col++) {
+			const top = row * 2 < pixels.length ? pixels[row * 2]?.[col] ?? null : null;
+			const bot = row * 2 + 1 < pixels.length ? pixels[row * 2 + 1]?.[col] ?? null : null;
+			if (top === null && bot === null) cells.push(/* @__PURE__ */ jsx(Text, { children: " " }, col));
+			else if (top !== null && bot === null) cells.push(/* @__PURE__ */ jsx(Text, {
+				color: `rgb(${top[0]},${top[1]},${top[2]})`,
+				children: UPPER_HALF
+			}, col));
+			else if (top === null && bot !== null) cells.push(/* @__PURE__ */ jsx(Text, {
+				color: `rgb(${bot[0]},${bot[1]},${bot[2]})`,
+				children: LOWER_HALF
+			}, col));
+			else if (top !== null && top[0] === bot?.[0] && top[1] === bot[1] && top[2] === bot[2]) cells.push(/* @__PURE__ */ jsx(Text, {
+				color: `rgb(${top[0]},${top[1]},${top[2]})`,
+				children: FULL_BLOCK
+			}, col));
+			else cells.push(/* @__PURE__ */ jsx(Text, {
+				color: `rgb(${top[0]},${top[1]},${top[2]})`,
+				backgroundColor: `rgb(${bot[0]},${bot[1]},${bot[2]})`,
+				children: UPPER_HALF
+			}, col));
+		}
+		canvasLines.push(/* @__PURE__ */ jsx(Box, { children: cells }, row));
+	}
+	const paletteItems = PAINT_PRESETS.map((p, i) => {
+		const selected = i === colorIndex;
+		return /* @__PURE__ */ jsx(Text, {
+			backgroundColor: `rgb(${p.color[0]},${p.color[1]},${p.color[2]})`,
+			color: p.color[0] + p.color[1] + p.color[2] > 384 ? "black" : "white",
+			bold: selected,
+			children: selected ? `[${(i + 1) % 10}]` : ` ${(i + 1) % 10} `
+		}, i);
+	});
+	const toolLabel = tool === "pen" ? "Pen" : "Eraser";
+	const [cr, cg, cb] = currentColor;
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				paddingX: 1,
+				gap: 2,
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						bold: true,
+						color: `rgb(${cr},${cg},${cb})`,
+						children: toolLabel
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						backgroundColor: `rgb(${cr},${cg},${cb})`,
+						children: "    "
+					}),
+					/* @__PURE__ */ jsxs(Muted, { children: [
+						"rgb(",
+						cr,
+						",",
+						cg,
+						",",
+						cb,
+						")"
+					] })
+				]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				flexDirection: "column",
+				flexGrow: 1,
+				borderStyle: "round",
+				marginX: 1,
+				children: /* @__PURE__ */ jsx(Box, {
+					flexDirection: "column",
+					children: canvasLines
+				})
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				paddingX: 1,
+				gap: 0,
+				children: paletteItems
+			}),
+			/* @__PURE__ */ jsxs(Muted, { children: [
+				" ",
+				/* @__PURE__ */ jsx(Kbd, { children: "1-0" }),
+				" color ",
+				/* @__PURE__ */ jsx(Kbd, { children: "e" }),
+				" eraser ",
+				/* @__PURE__ */ jsx(Kbd, { children: "c" }),
+				" clear (click canvas in Kitty/Ghostty for mouse paint)"
+			] })
+		]
+	});
+}
+function TruecolorTab() {
+	const rect = useBoxRect();
+	const w = Math.max(20, rect.width - 4);
+	const availH = Math.max(10, rect.height - 3);
+	const hueBarH = Math.min(3, Math.max(1, Math.floor(availH * .15)));
+	const gradientH = Math.min(8, Math.max(2, Math.floor(availH * .35)));
+	const paletteH = Math.min(4, Math.max(2, Math.floor(availH * .2)));
+	const hueBar = [];
+	for (let row = 0; row < hueBarH; row++) {
+		const cells = [];
+		for (let col = 0; col < w; col++) {
+			const [r, g, b] = hslToRgb(col / w * 360, 1, .35 + row / Math.max(1, hueBarH - 1) * .3);
+			cells.push(/* @__PURE__ */ jsx(Text, {
+				backgroundColor: `rgb(${r},${g},${b})`,
+				children: " "
+			}, col));
+		}
+		hueBar.push(/* @__PURE__ */ jsx(Box, { children: cells }, row));
+	}
+	const gradient = [];
+	for (let row = 0; row < gradientH; row++) {
+		const cells = [];
+		const sat = 1 - row / Math.max(1, gradientH - 1) * .8;
+		for (let col = 0; col < w; col++) {
+			const [r, g, b] = hsvToRgb(col / w * 360, sat, .95);
+			cells.push(/* @__PURE__ */ jsx(Text, {
+				backgroundColor: `rgb(${r},${g},${b})`,
+				children: " "
+			}, col));
+		}
+		gradient.push(/* @__PURE__ */ jsx(Box, { children: cells }, row));
+	}
+	const paletteCols = 16;
+	const paletteRows = Math.min(paletteH, Math.ceil(256 / paletteCols));
+	const palette = [];
+	for (let row = 0; row < paletteRows; row++) {
+		const cells = [];
+		const cellW = Math.max(1, Math.floor(w / paletteCols));
+		for (let col = 0; col < paletteCols; col++) {
+			const idx = row * paletteCols + col;
+			if (idx >= 256) break;
+			const [r, g, b] = ansi256toRgb(idx);
+			const label = idx.toString().padStart(3);
+			const textColor = r + g + b > 384 ? "black" : "white";
+			cells.push(/* @__PURE__ */ jsx(Box, {
+				width: cellW,
+				children: /* @__PURE__ */ jsx(Text, {
+					backgroundColor: `rgb(${r},${g},${b})`,
+					color: textColor,
+					children: label.slice(0, cellW)
+				})
+			}, col));
+		}
+		palette.push(/* @__PURE__ */ jsx(Box, { children: cells }, row));
+	}
+	const grayCells = [];
+	for (let col = 0; col < w; col++) {
+		const v = Math.round(col / Math.max(1, w - 1) * 255);
+		grayCells.push(/* @__PURE__ */ jsx(Text, {
+			backgroundColor: `rgb(${v},${v},${v})`,
+			children: " "
+		}, col));
+	}
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		gap: 1,
+		paddingX: 1,
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				children: [/* @__PURE__ */ jsx(H2, { children: "HSL Rainbow" }), /* @__PURE__ */ jsx(Box, {
+					flexDirection: "column",
+					children: hueBar
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				children: [/* @__PURE__ */ jsx(H2, { children: "Saturation Gradient" }), /* @__PURE__ */ jsx(Box, {
+					flexDirection: "column",
+					children: gradient
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				children: [/* @__PURE__ */ jsx(H2, { children: "256-Color Palette" }), /* @__PURE__ */ jsx(Box, {
+					flexDirection: "column",
+					children: palette
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				children: [/* @__PURE__ */ jsx(H2, { children: "Grayscale Ramp" }), /* @__PURE__ */ jsx(Box, { children: grayCells })]
+			})
+		]
+	});
+}
+/** Convert ANSI 256-color index to RGB */
+function ansi256toRgb(idx) {
+	if (idx < 16) return [
+		[
+			0,
+			0,
+			0
+		],
+		[
+			128,
+			0,
+			0
+		],
+		[
+			0,
+			128,
+			0
+		],
+		[
+			128,
+			128,
+			0
+		],
+		[
+			0,
+			0,
+			128
+		],
+		[
+			128,
+			0,
+			128
+		],
+		[
+			0,
+			128,
+			128
+		],
+		[
+			192,
+			192,
+			192
+		],
+		[
+			128,
+			128,
+			128
+		],
+		[
+			255,
+			0,
+			0
+		],
+		[
+			0,
+			255,
+			0
+		],
+		[
+			255,
+			255,
+			0
+		],
+		[
+			0,
+			0,
+			255
+		],
+		[
+			255,
+			0,
+			255
+		],
+		[
+			0,
+			255,
+			255
+		],
+		[
+			255,
+			255,
+			255
+		]
+	][idx];
+	if (idx < 232) {
+		const i = idx - 16;
+		const r = Math.floor(i / 36);
+		const g = Math.floor(i % 36 / 6);
+		const b = i % 6;
+		return [
+			r ? r * 40 + 55 : 0,
+			g ? g * 40 + 55 : 0,
+			b ? b * 40 + 55 : 0
+		];
+	}
+	const v = (idx - 232) * 10 + 8;
+	return [
+		v,
+		v,
+		v
+	];
+}
+function Gallery() {
+	const { exit } = useApp();
+	const [activeTab, setActiveTab] = useState("images");
+	useInput((input, key) => {
+		if (input === "q" || key.escape) exit();
+	});
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: /* @__PURE__ */ jsxs(Tabs, {
+			value: activeTab,
+			onChange: setActiveTab,
+			children: [
+				/* @__PURE__ */ jsxs(TabList, { children: [
+					/* @__PURE__ */ jsx(Tab, {
+						value: "images",
+						children: "Images"
+					}),
+					/* @__PURE__ */ jsx(Tab, {
+						value: "paint",
+						children: "Paint"
+					}),
+					/* @__PURE__ */ jsx(Tab, {
+						value: "truecolor",
+						children: "Truecolor"
+					})
+				] }),
+				/* @__PURE__ */ jsx(TabPanel, {
+					value: "images",
+					children: /* @__PURE__ */ jsx(ImagesTab, {})
+				}),
+				/* @__PURE__ */ jsx(TabPanel, {
+					value: "paint",
+					children: /* @__PURE__ */ jsx(PaintTab, {})
+				}),
+				/* @__PURE__ */ jsx(TabPanel, {
+					value: "truecolor",
+					children: /* @__PURE__ */ jsx(TruecolorTab, {})
+				})
+			]
+		})
+	});
+}
+async function main() {
+	try {
+		var _usingCtx$1 = _usingCtx();
+		const term = _usingCtx$1.u(createTerm());
+		const { waitUntilExit } = await render(/* @__PURE__ */ jsx(ExampleBanner, {
+			meta,
+			controls: "h/l tab  j/k navigate  Esc/q quit",
+			children: /* @__PURE__ */ jsx(Gallery, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { Gallery, main, meta };