feat: add limit size to download flow

web/src/lib/components/schema/SchemaActions.svelte

@@ -14,11 +14,13 @@
 		running: boolean;
 		format?: OutputMime;
 		quality?: number;
+		limitKb?: number;
 		alphaLoss?: boolean;
 		onupload: (file: File) => void;
 		ondownload: () => void;
 		onformat?: (mime: OutputMime) => void;
 		onquality?: (value: number) => void;
+		onlimit?: (kb: number | undefined) => void;
 	}
 	let {
 		inputMode,
@@ -27,11 +29,13 @@
 		running,
 		format = "image/png",
 		quality = undefined,
+		limitKb = undefined,
 		alphaLoss = false,
 		onupload,
 		ondownload,
 		onformat,
 		onquality,
+		onlimit,
 	}: Props = $props();
 </script>
 
@@ -43,10 +47,12 @@
 		<SchemaDownload
 			{format}
 			{quality}
+			{limitKb}
 			{running}
 			{ondownload}
 			onformat={(v) => onformat?.(v)}
 			onquality={(v) => onquality?.(v)}
+			onlimit={(v) => onlimit?.(v)}
 		/>
 	{:else if canDownload && resultKind === "files"}
 		<DownloadButton

web/src/lib/components/schema/SchemaDownload.svelte

@@ -13,13 +13,23 @@
 	interface Props {
 		format: OutputMime;
 		quality?: number;
+		limitKb?: number;
 		running: boolean;
 		ondownload: () => void;
 		onformat: (mime: OutputMime) => void;
 		onquality: (value: number) => void;
+		onlimit: (kb: number | undefined) => void;
 	}
-	let { format, quality, running, ondownload, onformat, onquality }: Props =
-		$props();
+	let {
+		format,
+		quality,
+		limitKb,
+		running,
+		ondownload,
+		onformat,
+		onquality,
+		onlimit,
+	}: Props = $props();
 
 	const current = $derived(outputFormatByMime(format));
 	const qualitySetting = $derived(current.settings?.quality);
@@ -44,6 +54,11 @@
 		onformat(mime);
 	}
 
+	function handleLimit(e: Event) {
+		const raw = (e.target as HTMLInputElement).valueAsNumber;
+		onlimit(Number.isFinite(raw) && raw >= 1 ? Math.round(raw) : undefined);
+	}
+
 	$effect(() => {
 		if (!open) return;
 		function onPointerDown(e: PointerEvent) {
@@ -110,6 +125,24 @@
 					/>
 				</div>
 			{/if}
+			<div class="limit">
+				<label class="limit-field">
+					<span>{t("actions.sizeLimitKb")}</span>
+					<input
+						type="number"
+						min="1"
+						step="1"
+						placeholder="∞"
+						value={limitKb ?? ""}
+						oninput={handleLimit}
+					/>
+				</label>
+				{#if limitKb !== undefined && format === "image/bmp"}
+					<p class="limit-warn" role="status">
+						{t("actions.sizeLimitBmp")}
+					</p>
+				{/if}
+			</div>
 		</div>
 	{/if}
 </div>
@@ -183,4 +216,37 @@
 		padding-top: var(--space-m);
 		border-top: var(--size-border) solid var(--color-border);
 	}
+	.limit {
+		padding-top: var(--space-m);
+		border-top: var(--size-border) solid var(--color-border);
+	}
+	.limit-field {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-m);
+		color: var(--color-text-muted);
+		font: var(--font-size-s) var(--font-mono);
+	}
+	.limit-field input {
+		width: calc(var(--space-xxxl) * 3);
+		padding: var(--space-m) var(--space-l);
+		background: var(--color-background);
+		border: var(--size-border) solid var(--color-border);
+		border-radius: var(--radius-s);
+		color: var(--color-text);
+		font: var(--font-size-m) var(--font-mono);
+		text-align: center;
+		appearance: textfield;
+	}
+	.limit-field input::-webkit-outer-spin-button,
+	.limit-field input::-webkit-inner-spin-button {
+		appearance: none;
+		margin: 0;
+	}
+	.limit-warn {
+		margin: var(--space-m) 0 0;
+		color: var(--color-warning);
+		font: var(--font-size-s) var(--font-mono);
+	}
 </style>

web/src/lib/components/schema/SchemaPreview.svelte

@@ -34,6 +34,7 @@
 		ontogglealign?: () => void;
 		format?: OutputMime;
 		quality?: number;
+		limitKb?: number;
 		alphaLoss?: boolean;
 		onupload: (file: File) => void;
 		ontextsource?: (text: string) => void;
@@ -43,6 +44,7 @@
 		ondownload: () => void;
 		onformat?: (mime: OutputMime) => void;
 		onquality?: (value: number) => void;
+		onlimit?: (kb: number | undefined) => void;
 	}
 	let {
 		inputMode,
@@ -62,6 +64,7 @@
 		ontogglealign,
 		format = "image/png",
 		quality = undefined,
+		limitKb = undefined,
 		alphaLoss = false,
 		onupload,
 		ontextsource,
@@ -71,6 +74,7 @@
 		ondownload,
 		onformat,
 		onquality,
+		onlimit,
 	}: Props = $props();
 
 	const hasResult = $derived(
@@ -97,11 +101,13 @@
 		{running}
 		{format}
 		{quality}
+		{limitKb}
 		{alphaLoss}
 		{onupload}
 		{ondownload}
 		{onformat}
 		{onquality}
+		{onlimit}
 	/>
 </div>
 

web/src/lib/components/schema/SchemaToolView.svelte

@@ -10,6 +10,7 @@
 		decodeFile,
 		downloadBlob,
 		encode,
+		fitWithinBytes,
 		outputFormatByMime,
 		toDataUrl,
 		type OutputMime,
@@ -98,6 +99,8 @@
 	let format = $state<OutputMime>("image/png");
 	// Lossy-format quality for tools without a quality param in the schema.
 	let formatQuality = $state<Record<string, number>>({});
+	// Optional download size limit (KB); undefined = no limit.
+	let limitKb = $state<number | undefined>(undefined);
 	let dragFrom = $state<number | null>(null);
 
 	const lastTool = $derived(
@@ -174,6 +177,7 @@
 		initedFor = page.slug;
 		steps = loadChain(page.slug) ?? createChain(page);
 		format = lastTool.output?.mime ?? "image/png";
+		limitKb = undefined;
 		source = null;
 		result = null;
 		fileResult = null;
@@ -397,7 +401,9 @@
 			const out = outputFormatByMime(format);
 			const quality =
 				currentQuality !== undefined ? currentQuality / 100 : undefined;
-			const blob = await encode(result, out.mime, quality);
+			const blob = limitKb
+				? await fitWithinBytes(result, out.mime, limitKb * 1024, quality)
+				: await encode(result, out.mime, quality);
 			downloadBlob(blob, `${page.slug}.${out.ext}`);
 		} catch (e) {
 			displayError = toDisplayError(e);
@@ -569,12 +575,14 @@
 						error={errorText}
 						{format}
 						quality={currentQuality}
+						{limitKb}
 						{alphaLoss}
 						{stepResults}
 						{aligned}
 						ontogglealign={() => (aligned = !aligned)}
 						onformat={(v) => (format = v)}
 						onquality={setFormatQuality}
+						onlimit={(v) => (limitKb = v)}
 						onupload={handleFile}
 						ontextsource={(textValue) => {
 							textSource = textValue;
@@ -603,11 +611,13 @@
 							{running}
 							{format}
 							quality={currentQuality}
+							{limitKb}
 							{alphaLoss}
 							onupload={handleFile}
 							ondownload={download}
 							onformat={(v) => (format = v)}
 							onquality={setFormatQuality}
+							onlimit={(v) => (limitKb = v)}
 						/>
 					</div>
 				</div>

web/src/lib/core/compress.test.ts

@@ -1,5 +1,9 @@
 import { describe, expect, it } from "vitest";
-import { COMPRESSION_LEVELS, findMaxColorsWithin } from "./compress";
+import {
+	COMPRESSION_LEVELS,
+	findMaxColorsWithin,
+	findQualityWithin,
+} from "./compress";
 
 describe("COMPRESSION_LEVELS", () => {
 	it("presets ordered by descending colors", () => {
@@ -38,3 +42,38 @@ describe("findMaxColorsWithin", () => {
 		expect(calls).toBeLessThanOrEqual(12); // log2(254)+probe(2)
 	});
 });
+
+describe("findQualityWithin", () => {
+	const sizeOf = (q: number) => 500 + q * 50; // size grows with quality
+
+	it("picks max quality fitting the target", async () => {
+		// target 5000 -> q<=90 fits
+		const q = await findQualityWithin(5000, async (qq) => sizeOf(qq));
+		expect(q).toBe(90);
+		expect(sizeOf(q)).toBeLessThanOrEqual(5000);
+	});
+
+	it("everything fits - returns max quality", async () => {
+		const q = await findQualityWithin(999999, async (qq) => sizeOf(qq));
+		expect(q).toBe(100);
+	});
+
+	it("target unreachable even at minimum - returns min", async () => {
+		const q = await findQualityWithin(10, async (qq) => sizeOf(qq));
+		expect(q).toBe(1);
+	});
+
+	it("encodeSize null treated as failure", async () => {
+		const q = await findQualityWithin(999999, async () => null);
+		expect(q).toBe(1);
+	});
+
+	it("binary search converges faster than full scan", async () => {
+		let calls = 0;
+		await findQualityWithin(3000, async (qq) => {
+			calls++;
+			return sizeOf(qq);
+		});
+		expect(calls).toBeLessThanOrEqual(10); // log2(99)+2 probes
+	});
+});

web/src/lib/core/compress.ts

@@ -44,3 +44,39 @@ export async function findMaxColorsWithin(
 	void fitsAtTwo;
 	return ok;
 }
+
+/**
+ * Binary search for the highest quality percent in [min..max] whose encoded
+ * size fits targetBytes. If even min does not fit, returns min (best effort).
+ * encodeSize may return null (encode error), treated as "does not fit".
+ */
+export async function findQualityWithin(
+	targetBytes: number,
+	encodeSize: (quality: number) => Promise<number | null>,
+	min = 1,
+	max = 100,
+): Promise<number> {
+	const lo = Math.max(1, Math.round(min));
+	const hi = Math.max(lo, Math.round(max));
+	let ok = lo;
+	const probe = async (q: number): Promise<boolean> => {
+		const size = await encodeSize(Math.max(lo, Math.min(hi, q)));
+		if (size === null) return false;
+		if (size <= targetBytes) {
+			ok = q;
+			return true;
+		}
+		return false;
+	};
+
+	if (!(await probe(lo))) return lo;
+	if (await probe(hi)) return hi;
+	let a = lo;
+	let b = hi;
+	while (b - a > 1) {
+		const mid = Math.floor((a + b) / 2);
+		if (await probe(mid)) a = mid;
+		else b = mid;
+	}
+	return ok;
+}

web/src/lib/core/io.ts

@@ -1,5 +1,7 @@
 import { encodeBmpBytes } from "./bmp";
+import { findMaxColorsWithin, findQualityWithin } from "./compress";
 import { ToolError } from "./errors";
+import { quantizeImage } from "./quantize";
 import { type PixelImage } from "./types";
 
 export type OutputMime =
@@ -181,6 +183,32 @@ function canvasToBlob(
 	});
 }
 
+/**
+ * Encodes img to fit targetBytes: binary search over quality for lossy
+ * formats, over quantization colors for PNG. BMP has no compression knobs --
+ * returned as-is (the caller warns the user the limit does not apply).
+ */
+export async function fitWithinBytes(
+	img: PixelImage,
+	mime: OutputMime,
+	targetBytes: number,
+	quality?: number,
+): Promise<Blob> {
+	if (mime === "image/bmp") return encode(img, mime);
+	const initial = await encode(img, mime, quality);
+	if (initial.size <= targetBytes) return initial;
+	if (mime === "image/png") {
+		const encodeSize = async (k: number) =>
+			(await encode(quantizeImage(img, k).image, mime)).size;
+		const k = await findMaxColorsWithin(targetBytes, 256, encodeSize);
+		return encode(quantizeImage(img, k).image, mime);
+	}
+	const encodeSize = async (q: number) =>
+		(await encode(img, mime, q / 100)).size;
+	const q = await findQualityWithin(targetBytes, encodeSize);
+	return encode(img, mime, q / 100);
+}
+
 export function downloadBlob(blob: Blob, filename: string): void {
 	const url = URL.createObjectURL(blob);
 	const a = document.createElement("a");

web/src/lib/i18n/en.ts

@@ -111,6 +111,9 @@ export const en: Dict = {
 		downloadFormat: "Download {format}",
 		formatAria: "Choose download format",
 		alphaLoss: "Result has transparency — {format} will flatten it",
+		sizeLimitKb: "Max size, KB",
+		sizeLimitBmp:
+			"Size limit does not apply to BMP — it is always uncompressed",
 	},
 	textSource: {
 		placeholder: "Paste base64 / hex / bytes…",

web/src/lib/i18n/ru.ts

@@ -112,6 +112,8 @@ export const ru: Dict = {
 		downloadFormat: "Скачать {format}",
 		formatAria: "Выбор формата скачивания",
 		alphaLoss: "В результате есть прозрачность — {format} её уберёт",
+		sizeLimitKb: "Лимит, КБ",
+		sizeLimitBmp: "Лимит размера не действует на BMP — он всегда несжатый",
 	},
 	textSource: {
 		placeholder: "Вставьте base64 / hex / байты…",