3_000_000 ||
+ sceneData.renderer.merge !== false) {
+ throw new Error(`Prepared cssFlower snapshot sanitization failed (${html.length} bytes, ${dataUrlCount} atlas data URLs, ${preparedAtlasReferenceCount} atlas references)`);
+ }
+}
+
+function prepareExportedSnapshot(html) {
+ const parsed = new DOMParser().parseFromString(html, "text/html");
+ for (const element of parsed.querySelectorAll("*")) {
+ for (const name of element.getAttributeNames()) {
+ if (name.startsWith("data-")) element.removeAttribute(name);
+ }
+ }
+ const stylesheet = parsed.querySelector("style");
+ const camera = parsed.body.firstElementChild;
+ const scene = camera?.firstElementChild;
+ const root = scene?.firstElementChild;
+ const mesh = root?.firstElementChild;
+ const leaves = mesh ? [...mesh.children] : [];
+ if (!(stylesheet instanceof HTMLStyleElement) || !(camera instanceof HTMLElement) ||
+ !(scene instanceof HTMLElement) || !(root instanceof HTMLElement) ||
+ !(mesh instanceof HTMLElement) || leaves.length !== 1200) {
+ throw new Error("Exported cssFlower direct hierarchy is missing before stylesheet preparation");
+ }
+ const rules = [];
+ moveStylesToRule(camera, ".polycss-camera", rules);
+ moveStylesToRule(scene, ".polycss-scene", rules);
+ moveStylesToRule(root, ".polycss-scene>div", rules, new Set([
+ "transform",
+ "--cssflower-space-texels",
+ ]));
+ for (const leaf of leaves) leaf.style.removeProperty("transform");
+ moveSharedStylesToRule(leaves, ".polycss-mesh>u", rules, [
+ "background-image",
+ "background-color",
+ "background-repeat",
+ "background-size",
+ "--polycss-atlas-leaf-sizing",
+ "image-rendering",
+ ]);
+ for (let index = 0; index < leaves.length; index += 1) {
+ const className = retainedLeafClassName(index);
+ leaves[index].className = className;
+ moveStylesToRule(leaves[index], `.polycss-mesh>u.${className}`, rules);
+ }
+ stylesheet.textContent += `\n${rules.join("\n")}\n`;
+ return `${parsed.documentElement.outerHTML}`;
+}
+
+function moveSharedStylesToRule(elements, selector, rules, propertyNames) {
+ const declarations = [];
+ for (const name of propertyNames) {
+ const value = elements[0].style.getPropertyValue(name);
+ const priority = elements[0].style.getPropertyPriority(name);
+ if (!value || elements.some((element) =>
+ element.style.getPropertyValue(name) !== value || element.style.getPropertyPriority(name) !== priority)) {
+ throw new Error(`Exported cssFlower shared leaf style ${name} drifted`);
+ }
+ declarations.push(`${name}: ${value}${priority ? ` !${priority}` : ""};`);
+ for (const element of elements) element.style.removeProperty(name);
+ }
+ rules.push(`${selector} { ${declarations.join(" ")} }`);
+}
+
+function retainedLeafClassName(index) {
+ const alphabet = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+ if (!Number.isSafeInteger(index) || index < 0) throw new RangeError("cssFlower leaf class index is invalid");
+ let value = index;
+ let className = "";
+ do {
+ className = alphabet[value % alphabet.length] + className;
+ value = Math.floor(value / alphabet.length) - 1;
+ } while (value >= 0);
+ return className;
+}
+
+function moveStylesToRule(element, selector, rules, retainedProperties = new Set()) {
+ const names = [...element.style].filter((name) => !retainedProperties.has(name));
+ if (names.length === 0) return;
+ const declarations = names.map((name) => {
+ const priority = element.style.getPropertyPriority(name);
+ return `${name}: ${element.style.getPropertyValue(name)}${priority ? ` !${priority}` : ""};`;
+ });
+ rules.push(`${selector} { ${declarations.join(" ")} }`);
+ for (const name of names) element.style.removeProperty(name);
+ if (element.style.length === 0) element.removeAttribute("style");
+}
+
+function restorePreparedLightingReference(html, assetUrl) {
+ const matches = html.match(/data:image\/(?:avif|png);base64,[a-zA-Z0-9+/=]+/gu) ?? [];
+ if (matches.length !== 1) {
+ throw new Error(`Expected one exported prepared-lighting data URL, found ${matches.length}`);
+ }
+ return html.replace(matches[0], assetUrl);
+}
+
+function integerAttribute(element, name) {
+ const value = Number(element.getAttribute(name));
+ if (!Number.isInteger(value)) throw new Error(`${name} must be an integer`);
+ return value;
+}
+
+async function fetchJson(url) {
+ const response = await fetch(url, { cache: "no-store" });
+ if (!response.ok) throw new Error(`Failed to load ${url}: ${response.status}`);
+ return response.json();
+}
+
+async function fetchVerifiedBytes(url, expectedSha256) {
+ const response = await fetch(url, { cache: "no-store" });
+ if (!response.ok) throw new Error(`Prepared cssFlower asset request failed for ${url}: ${response.status}`);
+ const bytes = await response.arrayBuffer();
+ const actualSha256 = await sha256(bytes);
+ if (actualSha256 !== expectedSha256) {
+ throw new Error(`Prepared cssFlower asset identity mismatch for ${url}: ${actualSha256}`);
+ }
+ return bytes;
+}
+
+async function loadInitialPreparedTransforms(sceneData) {
+ const block = sceneData.playback.transformAsset?.blocks?.[0];
+ if (block?.startGeometryStateIndex !== 0 || block.geometryStateCount < 1 ||
+ block.triangleCount !== 1_200 || block.transformCount < 1_200) {
+ throw new Error("Prepared cssFlower initial transform block is missing");
+ }
+ const encoded = await fetchVerifiedBytes(block.assetUrl, block.sha256);
+ if (encoded.byteLength !== block.byteLength) {
+ throw new Error("Prepared cssFlower initial transform block length drifted");
+ }
+ const stream = new Blob([encoded]).stream().pipeThrough(new DecompressionStream("gzip"));
+ const decoded = new Uint8Array(await new Response(stream).arrayBuffer());
+ if (decoded.byteLength !== block.decodedByteLength || await sha256(decoded) !== block.decodedSha256) {
+ throw new Error("Prepared cssFlower decoded initial transform block identity drifted");
+ }
+ const text = new TextDecoder().decode(decoded);
+ const transforms = text.endsWith("\n") ? text.slice(0, -1).split("\n") : [];
+ if (transforms.length !== block.transformCount ||
+ transforms.slice(0, 1_200).some((transform) => !/^matrix3d\([^)]+\)$/u.test(transform))) {
+ throw new Error("Prepared cssFlower initial transform rows are invalid");
+ }
+ return Object.freeze(transforms.slice(0, 1_200));
+}
+
+async function sha256(bytes) {
+ const digest = await crypto.subtle.digest("SHA-256", bytes);
+ return [...new Uint8Array(digest)].map((value) => value.toString(16).padStart(2, "0")).join("");
+}
+
+async function loadImage(url) {
+ const image = new Image();
+ image.decoding = "async";
+ image.src = url;
+ await image.decode();
+}
+
+function createSceneCamera(sceneData) {
+ const camera = sceneData.camera;
+ return createPolyPerspectiveCamera({
+ perspective: camera.perspective,
+ zoom: camera.zoom,
+ rotX: camera.rotX,
+ rotY: camera.rotY,
+ target: camera.target,
+ distance: camera.distance,
+ });
+}
diff --git a/src/adapters/flowerbox/tools/prepare-cssflower.mjs b/src/adapters/flowerbox/tools/prepare-cssflower.mjs
new file mode 100644
index 0000000..ebd967a
--- /dev/null
+++ b/src/adapters/flowerbox/tools/prepare-cssflower.mjs
@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+import { prepareCssflower } from "../src/prepare/cssflower/prepare.mjs";
+
+const options = parseArgs(process.argv.slice(2));
+let lastProjectedProgress = 0;
+
+prepareCssflower({
+ ...options,
+ onProjectedProgress(progress) {
+ if (progress.completedCount !== progress.totalCount && progress.completedCount - lastProjectedProgress < 25) return;
+ lastProjectedProgress = progress.completedCount;
+ console.log(`shared frame pages ${progress.completedCount}/${progress.totalCount} (${progress.source})`);
+ },
+}).then((result) => {
+ console.log(JSON.stringify({
+ manifest: result.manifestPath,
+ scenes: result.manifest.scenes,
+ }, null, 2));
+}).catch((error) => {
+ console.error(error.stack || error.message || String(error));
+ process.exitCode = 1;
+});
+
+function parseArgs(argv) {
+ const out = {};
+ for (let i = 0; i < argv.length; i += 1) {
+ const arg = argv[i];
+ if (!arg.startsWith("--")) continue;
+ const key = arg.slice(2);
+ const next = argv[i + 1];
+ if (!next || next.startsWith("--")) {
+ out[key] = true;
+ } else {
+ out[key] = next;
+ i += 1;
+ }
+ }
+ return {
+ scene: out.scene,
+ nativeRoot: out["native-root"],
+ concurrency: out.concurrency === undefined ? undefined : Number(out.concurrency),
+ };
+}
diff --git a/src/adapters/flowerbox/tools/prepare-polycss-snapshot.mjs b/src/adapters/flowerbox/tools/prepare-polycss-snapshot.mjs
new file mode 100644
index 0000000..dcf8363
--- /dev/null
+++ b/src/adapters/flowerbox/tools/prepare-polycss-snapshot.mjs
@@ -0,0 +1,131 @@
+#!/usr/bin/env node
+import { createHash } from "node:crypto";
+import { spawn } from "node:child_process";
+import { mkdir, readFile, rename, unlink, writeFile } from "node:fs/promises";
+import { createServer } from "node:net";
+import { dirname, join } from "node:path";
+import { chromium } from "playwright";
+
+const args = parseArgs(process.argv.slice(2));
+const sceneId = args.scene ?? "default-cube";
+const sceneUrl = "/cssflower/scenes/" + sceneId + ".json";
+const generatedRoot = join("build", "generated", "public", "cssflower");
+const manifestPath = join(generatedRoot, "manifest.json");
+const snapshotPath = join(generatedRoot, "scenes", sceneId + ".polycss.html");
+const snapshotUrl = "/cssflower/scenes/" + sceneId + ".polycss.html";
+const temporaryLightingSeedPath = join(generatedRoot, "assets", "flower-box-space-texels.png");
+const port = await freePort();
+let output = "";
+const server = spawn("pnpm", [
+ "exec", "vite", "--config", "src/adapters/flowerbox/vite.config.mjs",
+ "--host", "127.0.0.1", "--port", String(port), "--strictPort",
+], {
+ stdio: ["ignore", "pipe", "pipe"],
+});
+server.stdout.on("data", (chunk) => { output += chunk.toString(); });
+server.stderr.on("data", (chunk) => { output += chunk.toString(); });
+
+try {
+ await waitFor(() => output.includes("Local:") || output.includes("http://127.0.0.1:" + port), 20_000, () => {
+ if (server.exitCode !== null) throw new Error("Vite exited early:\n" + output);
+ });
+ const browser = await chromium.launch({ headless: true });
+ try {
+ const page = await browser.newPage({ viewport: { width: 960, height: 720 }, deviceScaleFactor: 1 });
+ await page.goto("http://127.0.0.1:" + port + "/tools/polycss-snapshot-page.html?sceneUrl=" + encodeURIComponent(sceneUrl), { waitUntil: "networkidle" });
+ await page.waitForFunction(() => {
+ const status = window.__cssFlowerDebugSnapshot?.status;
+ return status === "ready" || status === "error";
+ }, null, { timeout: 60_000 });
+ const snapshot = await page.evaluate(() => window.__cssFlowerDebugSnapshot);
+ if (snapshot?.status === "error") {
+ throw new Error("Snapshot page failed:\n" + snapshot.error);
+ }
+ if (typeof snapshot.html !== "string" || !snapshot.html.includes("polycss-scene") || snapshot.html.includes(" entry.id === sceneId);
+ if (!manifestScene) throw new Error(`Manifest scene ${sceneId} is missing`);
+ const snapshotContract = {
+ schema: "cssflower-retained-snapshot-contract@1",
+ url: snapshotUrl,
+ sha256: snapshotSha256,
+ byteLength: snapshotBytes.length,
+ retainedTriangleLeafCount: snapshot.retainedLeafCount,
+ retainedRotationRootCount: snapshot.retainedRotationRootCount,
+ triangleIdCount: snapshot.triangleIdCount,
+ seamBleed: snapshot.seamBleed,
+ boundarySeamBleed: snapshot.boundarySeamBleed,
+ boundaryAdjacentTriangleCount: snapshot.boundaryAdjacentTriangleCount,
+ mergedCellCount: snapshot.mergedCellCount,
+ lightingAtlasStateCount: snapshot.lightingAtlasStateCount,
+ lightingAtlasDataUrlCount: snapshot.lightingAtlasDataUrlCount,
+ preparedAtlasReferenceCount: snapshot.preparedAtlasReferenceCount,
+ lightingAtlasSelfContained: false,
+ scriptCount: snapshot.scriptCount,
+ canvasCount: snapshot.canvasCount,
+ svgCount: snapshot.svgCount,
+ surfaceLeafCounts: snapshot.stats.surfaceLeafCounts,
+ };
+ manifestScene.snapshot = snapshotContract;
+ manifest.assets = { ...manifest.assets, snapshot: snapshotContract };
+ await writeAtomic(manifestPath, Buffer.from(JSON.stringify(manifest, null, 2) + "\n"));
+ await unlink(temporaryLightingSeedPath).catch((error) => {
+ if (error?.code !== "ENOENT") throw error;
+ });
+ console.log(JSON.stringify({ snapshotPath, snapshotUrl, ...snapshotContract }, null, 2));
+ } finally {
+ await browser.close();
+ }
+} finally {
+ server.kill("SIGTERM");
+}
+
+function parseArgs(argv) {
+ const out = {};
+ for (let i = 0; i < argv.length; i += 1) {
+ const arg = argv[i];
+ if (!arg.startsWith("--")) continue;
+ const key = arg.slice(2);
+ const next = argv[i + 1];
+ if (!next || next.startsWith("--")) out[key] = true;
+ else {
+ out[key] = next;
+ i += 1;
+ }
+ }
+ return out;
+}
+
+async function writeAtomic(path, bytes) {
+ await mkdir(dirname(path), { recursive: true });
+ const temporary = `${path}.tmp-${process.pid}`;
+ await writeFile(temporary, bytes);
+ await rename(temporary, path);
+}
+
+async function freePort() {
+ return new Promise((resolvePort, reject) => {
+ const srv = createServer();
+ srv.listen(0, "127.0.0.1", () => {
+ const address = srv.address();
+ const port = typeof address === "object" && address ? address.port : 0;
+ srv.close(() => resolvePort(port));
+ });
+ srv.on("error", reject);
+ });
+}
+
+async function waitFor(predicate, timeoutMs, onPoll = () => undefined) {
+ const start = Date.now();
+ while (Date.now() - start < timeoutMs) {
+ onPoll();
+ if (predicate()) return;
+ await new Promise((resolve) => setTimeout(resolve, 100));
+ }
+ throw new Error("Timed out waiting for Vite.\n" + output);
+}
diff --git a/src/adapters/flowerbox/tools/productBank.mjs b/src/adapters/flowerbox/tools/productBank.mjs
new file mode 100644
index 0000000..89093b2
--- /dev/null
+++ b/src/adapters/flowerbox/tools/productBank.mjs
@@ -0,0 +1,211 @@
+import { createHash } from "node:crypto";
+import { readFile, readdir, writeFile } from "node:fs/promises";
+import { join, relative, sep } from "node:path";
+import { gunzipSync } from "node:zlib";
+
+export const FLOWERBOX_PRODUCT_BANK_SCHEMA = "cssflower-product-bank@3";
+
+export async function inspectFlowerboxProductBank(root, { verifyDescriptor = true } = {}) {
+ const manifestBytes = await readFile(join(root, "manifest.json"));
+ const manifest = JSON.parse(manifestBytes.toString("utf8"));
+ const entry = manifest.scenes?.find((candidate) => candidate.id === "default-cube");
+ assert(manifest.schema === "cssflower-manifest@1" && manifest.status === "ready", "manifest contract");
+ assert(entry?.sceneUrl === "/cssflower/scenes/default-cube.json.gz", "scene URL");
+ assert(entry?.snapshotUrl === "/cssflower/scenes/default-cube.polycss.html.gz", "snapshot URL");
+
+ const sceneEncoded = await readFile(join(root, "scenes", "default-cube.json.gz"));
+ const snapshotEncoded = await readFile(join(root, "scenes", "default-cube.polycss.html.gz"));
+ const sceneDecoded = gunzipSync(sceneEncoded);
+ const snapshotDecoded = gunzipSync(snapshotEncoded);
+ const scene = JSON.parse(sceneDecoded.toString("utf8"));
+ const playback = scene.playback;
+ const transforms = playback?.transformAsset;
+ const lighting = scene.lighting;
+
+ assert(scene.schema === "cssflower-prepared-scene@1", "scene schema");
+ assert(scene.metrics?.preparedLeafCount === 1_200 && scene.metrics?.preparedRootCount === 1,
+ "retained counts");
+ assert(scene.metrics?.preparedTimelineStateCount === 360 &&
+ scene.metrics?.preparedGeometryStateCount === 46 &&
+ scene.metrics?.retainedSourceOracleTimelineStateCount === 9_331,
+ "prepared cycle counts");
+ assert(scene.renderer?.morphTarget === "createPolyMorphPreparedDomTarget" &&
+ scene.renderer?.stableDom === true && scene.renderer?.merge === false,
+ "retained Morph target");
+ assert(scene.metrics?.mergedCellCount === 0 && scene.metrics?.mergeEligibleCellCount === 0,
+ "triangle topology");
+ assert(scene.metrics?.runtimePolygonConstructionCount === 0 &&
+ scene.metrics?.runtimeRadialProjectionCount === 0 &&
+ scene.metrics?.runtimeNormalCalculationCount === 0 &&
+ scene.metrics?.runtimeLightingCalculationCount === 0 &&
+ scene.metrics?.runtimeDomGrowth === false,
+ "zero runtime construction");
+ assert(playback?.schema === "cssflower-prepared-playback@1" &&
+ playback.scope === "rounded-product-cycle-spike-phase-omitted" &&
+ playback.cycle?.schema === "cssflower-prepared-rounded-product-cycle@1" &&
+ playback.cycle?.stateCount === 360 && playback.cycle?.geometryStateCount === 46 &&
+ playback.cycle?.states?.length === 360 && playback.cycle?.rootTransforms?.length === 360,
+ "rounded prepared cycle");
+ assert(!Object.hasOwn(playback, "projectedPixels"), "projected product removed");
+ assert(playback.frontFacingSchedule?.schema === "cssflower-prepared-front-face-transform-schedule@1" &&
+ playback.frontFacingSchedule.minimumOwnedPixels === 8 &&
+ playback.frontFacingSchedule.stateCount === 360 &&
+ playback.frontFacingSchedule.faceCount === 1_200,
+ "prepared visibility schedule");
+ assert(transforms?.schema === "cssflower-prepared-matrix3d-blocks@1" &&
+ transforms.blockCount === 3 && transforms.blocks?.length === 3 &&
+ transforms.geometryStateCount === 46 && transforms.triangleCount === 1_200,
+ "prepared transform blocks");
+ assert(lighting?.schema === "cssflower-prepared-space-texel-lighting@4" &&
+ lighting.timelineRowCount === 360 && lighting.faceCount === 1_200 &&
+ lighting.grid?.schema === "cssflower-prepared-leaf-lighting-grid@1" &&
+ lighting.grid?.quality === 60 && lighting.grid?.columns === 12 && lighting.grid?.rows === 1 &&
+ lighting.assetCount === 1 && lighting.faces?.length === 1_200,
+ "prepared q60 lighting grid");
+ assert(!scene.meshes && !scene.oracle && !playback.stateEvidenceUrl && !transforms.sourceFloat32,
+ "product-only scene");
+ assert(!manifest.assets?.stateEvidence && !manifest.productionTransport?.assets?.some((asset) =>
+ asset.id === "state-evidence"), "state evidence excluded");
+
+ const publicText = `${manifestBytes}\n${sceneDecoded}`;
+ assert(!/(?:\/Users\/|\\Users\\|file:\/\/|\.local\/|\/opt\/homebrew\/|nativeQualification|executableSha256|compilerSha256|stateEvidenceUrl)/u.test(publicText),
+ "private oracle metadata excluded");
+
+ const snapshot = snapshotDecoded.toString("utf8");
+ assert(count(snapshot, /\sdata-[a-z0-9-]+=/giu) === 0, "snapshot data attributes");
+ assert(count(snapshot, /<\/u>/gu) === 1_200, "snapshot leaves");
+ assert(count(snapshot, /\.polycss-mesh>u\.[a-zA-Z]{1,2} \{/gu) === 1_200,
+ "snapshot leaf rules");
+ assert(count(snapshot, /class="polycss-camera"/gu) === 1 &&
+ count(snapshot, /class="polycss-scene"/gu) === 1 &&
+ count(snapshot, /class="polycss-mesh"/gu) === 1,
+ "snapshot retained hierarchy");
+ assert(count(snapshot, /<(?:script|canvas|svg)\b/giu) === 0, "snapshot forbidden elements");
+ assert(sha256(snapshotDecoded) === entry.snapshot.sha256, "snapshot decoded identity");
+ assert(snapshotDecoded.length === entry.snapshot.byteLength, "snapshot decoded length");
+
+ const expectedAssetPaths = new Set([
+ "manifest.json",
+ "scenes/default-cube.json.gz",
+ "scenes/default-cube.polycss.html.gz",
+ ]);
+ let transformBytes = 0;
+ for (const block of transforms.blocks) {
+ const path = productPath(block.assetUrl);
+ const bytes = await readFile(join(root, path));
+ assert(bytes.length === block.byteLength && sha256(bytes) === block.sha256,
+ `transform block ${block.index} identity`);
+ const decoded = gunzipSync(bytes);
+ assert(decoded.length === block.decodedByteLength && sha256(decoded) === block.decodedSha256,
+ `transform block ${block.index} decoded identity`);
+ expectedAssetPaths.add(path);
+ transformBytes += bytes.length;
+ }
+ assert(transformBytes === transforms.byteLength, "transform aggregate bytes");
+
+ const lightingPath = productPath(lighting.grid.assetUrl);
+ const lightingBytes = await readFile(join(root, lightingPath));
+ assert(lightingBytes.length === lighting.grid.byteLength &&
+ sha256(lightingBytes) === lighting.grid.sha256 &&
+ lighting.grid.sha256 === lighting.assetSha256,
+ "lighting grid identity");
+ assert(lightingBytes.subarray(4, 12).toString("ascii").startsWith("ftypavi"), "lighting AVIF signature");
+ expectedAssetPaths.add(lightingPath);
+
+ const files = (await walk(root))
+ .map((path) => relative(root, path).split(sep).join("/"))
+ .filter((path) => path !== "product-bank.json")
+ .sort();
+ assert(files.length === expectedAssetPaths.size && files.every((path) => expectedAssetPaths.has(path)),
+ "exact product file closure");
+ const closure = createHash("sha256");
+ let closureBytes = 0;
+ for (const path of files) {
+ const bytes = await readFile(join(root, path));
+ closure.update(path).update("\0").update(bytes).update("\0");
+ closureBytes += bytes.length;
+ }
+
+ const summary = Object.freeze({
+ schema: FLOWERBOX_PRODUCT_BANK_SCHEMA,
+ closureSha256: closure.digest("hex"),
+ closureBytes,
+ fileCount: files.length,
+ retainedTriangleLeafCount: 1_200,
+ retainedRotationRootCount: 1,
+ timelineStateCount: 360,
+ geometryStateCount: 46,
+ retainedSourceOracleTimelineStateCount: 9_331,
+ transformBlockCount: transforms.blockCount,
+ transformAssetBytes: transformBytes,
+ lightingAssetCount: 1,
+ lightingAssetBytes: lightingBytes.length,
+ lightingQuality: lighting.grid.quality,
+ visibilityMinimumOwnedPixels: playback.frontFacingSchedule.minimumOwnedPixels,
+ sceneEncodedSha256: sha256(sceneEncoded),
+ sceneDecodedSha256: sha256(sceneDecoded),
+ snapshotEncodedSha256: sha256(snapshotEncoded),
+ snapshotDecodedSha256: sha256(snapshotDecoded),
+ });
+ if (verifyDescriptor) {
+ const descriptor = JSON.parse(await readFile(join(root, "product-bank.json"), "utf8"));
+ for (const [key, value] of Object.entries(summary)) {
+ assert(descriptor[key] === value, `product descriptor ${key}`);
+ }
+ assert(descriptor.publicBoundary?.microsoftSourceIncluded === false &&
+ descriptor.publicBoundary?.microsoftBinaryIncluded === false &&
+ descriptor.publicBoundary?.nativeCaptureIncluded === false &&
+ descriptor.publicBoundary?.oraclePacketIncluded === false,
+ "product public boundary");
+ }
+ return summary;
+}
+
+export async function writeFlowerboxProductBankDescriptor(root, summary, source) {
+ const descriptor = {
+ ...summary,
+ source,
+ transport: {
+ archiveFormat: "tar+gzip",
+ runtimeDownloadsArchive: false,
+ deployUnpacksStaticFiles: true,
+ },
+ publicBoundary: {
+ microsoftSourceIncluded: false,
+ microsoftBinaryIncluded: false,
+ nativeCaptureIncluded: false,
+ oraclePacketIncluded: false,
+ },
+ };
+ await writeFile(join(root, "product-bank.json"), `${JSON.stringify(descriptor, null, 2)}\n`);
+ return descriptor;
+}
+
+function productPath(url) {
+ assert(typeof url === "string" && url.startsWith("/cssflower/") && !url.includes(".."),
+ "safe product asset URL");
+ return url.slice("/cssflower/".length);
+}
+
+async function walk(root) {
+ const paths = [];
+ for (const entry of await readdir(root, { withFileTypes: true })) {
+ const path = join(root, entry.name);
+ if (entry.isDirectory()) paths.push(...await walk(path));
+ else if (entry.isFile()) paths.push(path);
+ else throw new Error(`Unsupported product-bank entry ${path}`);
+ }
+ return paths;
+}
+
+function sha256(bytes) {
+ return createHash("sha256").update(bytes).digest("hex");
+}
+
+function count(text, expression) {
+ return (text.match(expression) ?? []).length;
+}
+
+function assert(condition, label) {
+ if (!condition) throw new Error(`Flower Box product bank failed ${label}`);
+}
diff --git a/src/adapters/flowerbox/tools/smoke-browser.mjs b/src/adapters/flowerbox/tools/smoke-browser.mjs
new file mode 100644
index 0000000..7989aeb
--- /dev/null
+++ b/src/adapters/flowerbox/tools/smoke-browser.mjs
@@ -0,0 +1,441 @@
+#!/usr/bin/env node
+import { spawn } from "node:child_process";
+import { mkdir, writeFile } from "node:fs/promises";
+import { createServer } from "node:net";
+import { join, resolve } from "node:path";
+import { chromium } from "playwright";
+import { PNG } from "pngjs";
+
+const repositoryRoot = resolve(import.meta.dirname, "..", "..", "..", "..");
+const deploy = process.argv.includes("--deploy");
+const smokeDir = join(repositoryRoot, ".local", "evidence", deploy
+ ? "flowerbox-deploy-smoke"
+ : "flowerbox-public-smoke");
+const screenshotPath = join(smokeDir, "default-route.png");
+const statePath = join(smokeDir, "state.json");
+const port = await freePort();
+let output = "";
+const server = spawn("pnpm", deploy ? [
+ "exec", "vite", "preview", "--host", "127.0.0.1", "--port", String(port), "--strictPort",
+ "--outDir", resolve(repositoryRoot, "dist/site"),
+] : [
+ "exec", "vite", "--config", "src/adapters/flowerbox/vite.config.mjs",
+ "--host", "127.0.0.1", "--port", String(port), "--strictPort",
+], {
+ cwd: repositoryRoot,
+ stdio: ["ignore", "pipe", "pipe"],
+});
+server.stdout.on("data", (chunk) => { output += chunk.toString(); });
+server.stderr.on("data", (chunk) => { output += chunk.toString(); });
+
+try {
+ await mkdir(smokeDir, { recursive: true });
+ await waitFor(() => output.includes("Local:") || output.includes(`http://127.0.0.1:${port}`), 20_000, () => {
+ if (server.exitCode !== null) throw new Error(`Vite exited early:\n${output}`);
+ });
+ const browser = await chromium.launch({ headless: true });
+ try {
+ const page = await browser.newPage({ viewport: { width: 960, height: 900 }, deviceScaleFactor: 1 });
+ const pageErrors = [];
+ const lightingGridRequests = [];
+ page.on("pageerror", (error) => pageErrors.push(error.stack || error.message));
+ page.on("request", (request) => {
+ if (/\/cssflower\/assets\/lighting\/grid-[a-f0-9]{64}\.avif$/u.test(new URL(request.url()).pathname)) {
+ lightingGridRequests.push(request.url());
+ }
+ });
+ page.on("console", (message) => {
+ if (message.type() === "error") pageErrors.push(message.text());
+ });
+ let releaseManifest;
+ let observeManifestRequest;
+ const manifestRelease = new Promise((resolve) => { releaseManifest = resolve; });
+ const manifestRequested = new Promise((resolve) => { observeManifestRequest = resolve; });
+ await page.route("**/cssflower/manifest.json", async (route) => {
+ observeManifestRequest();
+ await manifestRelease;
+ await route.continue();
+ });
+ const navigation = page.goto(`http://127.0.0.1:${port}/${deploy ? "flower/" : ""}`, {
+ waitUntil: "domcontentloaded",
+ });
+ await Promise.race([
+ manifestRequested,
+ new Promise((_, reject) => setTimeout(() => reject(new Error("cssFlower manifest was not requested")), 5_000)),
+ ]);
+ await navigation;
+ const loading = await page.evaluate(() => {
+ const style = getComputedStyle(document.body, "::after");
+ return {
+ bodyChildCount: document.body.childElementCount,
+ bodyAttributeNames: document.body.getAttributeNames(),
+ content: style.content,
+ position: style.position,
+ width: style.width,
+ height: style.height,
+ animationName: style.animationName,
+ animationDuration: style.animationDuration,
+ };
+ });
+ releaseManifest();
+ await page.waitForFunction(() => ["ready", "error"].includes(globalThis.__cssFlowerDebug?.status), null, {
+ timeout: 30_000,
+ });
+ const startup = await page.evaluate(() => ({
+ status: globalThis.__cssFlowerDebug?.status ?? "missing",
+ errors: globalThis.__cssFlowerDebug?.errors?.() ?? ["debug-api-missing"],
+ }));
+ if (startup.status !== "ready") {
+ throw new Error(`cssFlower failed before browser proof: ${JSON.stringify(startup)}`);
+ }
+ const loadingAfterReady = await page.evaluate(() => {
+ const style = getComputedStyle(document.body, "::after");
+ return {
+ bodyAttributeNames: document.body.getAttributeNames(),
+ bodyClassName: document.body.className,
+ content: style.content,
+ animationName: style.animationName,
+ };
+ });
+
+ const proof = await page.evaluate(async () => {
+ const debug = globalThis.__cssFlowerDebug;
+ if (!debug?.ready) throw new Error(`cssFlower debug API is not ready: ${JSON.stringify(debug?.errors?.())}`);
+ debug.pause();
+ const retained = debug.nodes();
+ const root = retained.rotationRoot;
+ const mesh = retained.mesh;
+ const leaves = [...retained.leaves];
+ const camera = document.body.firstElementChild;
+ const scene = camera?.firstElementChild;
+ const triangleIds = debug.scene.lighting.faces.map((face) => face.triangleId);
+ const initialLeafTransforms = leaves.map((leaf) => leaf.style.transform);
+ const rootInitialTransform = root.style.transform;
+ const rows = [];
+ for (const tick of [0, 31, 32, 44, 45, 46, 89, 90, 179, 359, 360, 361]) {
+ await debug.setTick(tick);
+ await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+ const current = debug.nodes();
+ const sameLeaves = current.leaves.length === leaves.length &&
+ current.leaves.every((leaf, index) => leaf === leaves[index]);
+ rows.push({ tick, sameRoot: current.rotationRoot === root, sameLeaves, stats: debug.stats() });
+ debug.assertStableDomIdentity();
+ }
+ await debug.setTick(40);
+ await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+ const bodyRect = document.body.getBoundingClientRect();
+ const cameraRect = camera.getBoundingClientRect();
+ const allClasses = [...document.body.querySelectorAll("[class]")]
+ .flatMap((element) => [...element.classList]);
+ const permittedClasses = new Set(["polycss-camera", "polycss-scene", "polycss-mesh"]);
+ const customClasses = [...new Set(allClasses.filter((name) => !permittedClasses.has(name)))];
+ const stylesheetText = document.head.querySelector("style")?.textContent ?? "";
+ const preparedLeafRuleCount = (stylesheetText.match(/\.polycss-mesh>u\.[a-zA-Z]{1,2} \{/gu) ?? []).length;
+ const preparedAddressProperties = new Set([
+ "background-position",
+ "background-position-x",
+ "background-position-y",
+ ]);
+ return {
+ status: debug.status,
+ errors: debug.errors(),
+ meshCount: debug.meshes().length,
+ retainedRootCount: Number(root.parentElement === scene),
+ retainedLeafCount: leaves.length,
+ triangleIdCount: new Set(triangleIds).size,
+ polycssStableTriangleCount: document.querySelectorAll(".polycss-mesh > u").length,
+ rasterAtlasLeafCount: preparedLeafRuleCount,
+ rasterLeafWidths: [...new Set(debug.scene.lighting.faces.map((face) => face.leafWidth))].sort((a, b) => a - b),
+ rasterLeafHeights: [...new Set(debug.scene.lighting.faces.map((face) => face.leafHeight))].sort((a, b) => a - b),
+ retainedLeafTags: [...new Set(leaves.map((leaf) => leaf.tagName))],
+ bodyRect: { x: bodyRect.x, y: bodyRect.y, width: bodyRect.width, height: bodyRect.height },
+ cameraRect: { x: cameraRect.x, y: cameraRect.y, width: cameraRect.width, height: cameraRect.height },
+ bodyChildCount: document.body.children.length,
+ bodyAttributeNames: document.body.getAttributeNames(),
+ bodyClassName: document.body.className,
+ dataAttributeCount: [...document.body.querySelectorAll("*")].reduce((count, element) =>
+ count + element.getAttributeNames().filter((name) => name.startsWith("data-")).length, 0),
+ bodyElementCount: document.body.querySelectorAll("*").length,
+ customClassCount: customClasses.length,
+ customClassUniqueCount: new Set(customClasses).size,
+ customClassMaxLength: Math.max(...customClasses.map((name) => name.length)),
+ customClassesValid: customClasses.every((name) => /^[a-zA-Z]{1,2}$/u.test(name)),
+ comparisonElementCount: document.body.querySelectorAll("main,header,section,article,form,button,input,output,img,video,canvas,svg,script").length,
+ snapshotStyleCount: document.head.querySelectorAll("style").length,
+ preparedLeafRuleCount,
+ leafInlineTransformCount: leaves.filter((leaf) => leaf.style.transform.startsWith("matrix3d(")).length,
+ leafInlinePreparedAddressPropertyCount: leaves.reduce((count, leaf) =>
+ count + [...leaf.style].filter((name) => preparedAddressProperties.has(name)).length, 0),
+ leafInlineVisibilityCount: leaves.filter((leaf) => leaf.style.visibility.length > 0).length,
+ leafInlineUnexpectedPropertyCount: leaves.reduce((count, leaf) =>
+ count + [...leaf.style].filter((name) =>
+ name !== "transform" && name !== "visibility" && !preparedAddressProperties.has(name)).length, 0),
+ rootInlinePropertyNames: [...root.style].sort(),
+ cameraInlinePropertyCount: camera.style.length,
+ cameraInlinePropertyNames: [...camera.style].sort(),
+ sceneInlinePropertyCount: scene.style.length,
+ meshInlinePropertyCount: mesh.style.length,
+ directStructure: camera?.classList.contains("polycss-camera") === true &&
+ camera.parentElement === document.body &&
+ scene?.classList.contains("polycss-scene") === true &&
+ scene.parentElement === camera &&
+ root.parentElement === scene &&
+ mesh.classList.contains("polycss-mesh") &&
+ mesh.parentElement === root &&
+ leaves.every((leaf) => leaf.parentElement === mesh),
+ canvasCount: document.querySelectorAll("canvas").length,
+ svgCount: document.querySelectorAll("svg").length,
+ leafTransformChangeCount: leaves.reduce((count, leaf, index) => (
+ count + Number(leaf.style.transform !== initialLeafTransforms[index])
+ ), 0),
+ rootTransformChanged: root.style.transform !== rootInitialTransform,
+ identityRows: rows.map((row) => ({
+ tick: row.tick,
+ sameRoot: row.sameRoot,
+ sameLeaves: row.sameLeaves,
+ timelineStateIndex: row.stats.timelineStateIndex,
+ geometryStateIndex: row.stats.geometryStateIndex,
+ rootStateIndex: row.stats.rootStateIndex,
+ transformBlockIndex: row.stats.transformBlockIndex,
+ lightingPageIndex: row.stats.lightingPageIndex,
+ lightingPageRowIndex: row.stats.lightingPageRowIndex,
+ preparedAssetMappingMatches: (() => {
+ const expected = debug.scene.playback.cycle.states[row.stats.timelineStateIndex];
+ return row.stats.transformBlockIndex === expected.transformBlockIndex &&
+ row.stats.lightingPageIndex === expected.lightingPageIndex &&
+ row.stats.lightingPageRowIndex === expected.lightingPageRowIndex;
+ })(),
+ sfHex: row.stats.sourceSfHex,
+ sfiHex: row.stats.sourceSfiHex,
+ rotation: row.stats.sourceRotationDegrees,
+ })),
+ stats: debug.stats(),
+ };
+ });
+
+ const responsiveFits = [];
+ for (const expected of [
+ { width: 390, height: 844, scale: 0.54166667 },
+ { width: 1280, height: 720, scale: 1 },
+ { width: 720, height: 720, scale: 1 },
+ { width: 960, height: 900, scale: 1.25 },
+ ]) {
+ await page.setViewportSize({ width: expected.width, height: expected.height });
+ await page.waitForFunction((expectedScale) =>
+ Math.abs(globalThis.__cssFlowerDebug.stats().presentationScale - expectedScale) < 1e-7,
+ expected.scale, { timeout: 5_000 });
+ responsiveFits.push(await page.evaluate((target) => {
+ const debug = globalThis.__cssFlowerDebug;
+ debug.assertStableDomIdentity();
+ const bodyRect = document.body.getBoundingClientRect();
+ const camera = document.body.firstElementChild;
+ const cameraRect = camera.getBoundingClientRect();
+ return {
+ ...target,
+ bodyRect: { x: bodyRect.x, y: bodyRect.y, width: bodyRect.width, height: bodyRect.height },
+ cameraRect: { x: cameraRect.x, y: cameraRect.y, width: cameraRect.width, height: cameraRect.height },
+ retainedLeafCount: debug.nodes().leaves.length,
+ runtimeDomMutationCount: debug.stats().runtimeDomMutationCount,
+ presentationScale: debug.stats().presentationScale,
+ };
+ }, expected));
+ }
+
+ const expansionFits = [];
+ for (const tick of [0, 45]) {
+ await page.evaluate((value) => globalThis.__cssFlowerDebug.setTick(value), tick);
+ await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))));
+ const path = join(smokeDir, `expansion-tick-${tick}.png`);
+ const bytes = await page.locator("body").screenshot({ path });
+ expansionFits.push({ tick, path, visibility: imageVisibility(bytes) });
+ }
+ await page.evaluate(() => globalThis.__cssFlowerDebug.setTick(40));
+ await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))));
+ const screenshotBytes = await page.locator("body").screenshot({ path: screenshotPath });
+ const state = {
+ schema: "cssgraphics-flowerbox-browser-smoke@2",
+ deploy,
+ ...proof,
+ loading,
+ loadingAfterReady,
+ pageErrors,
+ visibility: imageVisibility(screenshotBytes),
+ expansionFits,
+ responsiveFits,
+ lightingGridRequestCount: lightingGridRequests.length,
+ lightingGridRequestUrlCount: new Set(lightingGridRequests).size,
+ screenshotPath,
+ };
+ await writeFile(statePath, `${JSON.stringify(state, null, 2)}\n`);
+ assertProof(state);
+ console.log(JSON.stringify({ ...state, smokeDir, statePath }, null, 2));
+ } finally {
+ await browser.close();
+ }
+} finally {
+ server.kill("SIGTERM");
+}
+
+function assertProof(state) {
+ const stats = state.stats;
+ if (state.loading.bodyChildCount !== 0 || state.loading.bodyAttributeNames.length !== 0 ||
+ state.loading.content !== '\"\"' || state.loading.position !== "fixed" ||
+ state.loading.width !== "18px" || state.loading.height !== "18px" ||
+ state.loading.animationName !== "l" || state.loading.animationDuration !== "0.8s" ||
+ state.loadingAfterReady.bodyAttributeNames.join(",") !== "class" ||
+ state.loadingAfterReady.bodyClassName !== "r" || state.loadingAfterReady.content !== "none" ||
+ state.loadingAfterReady.animationName !== "none" ||
+ state.status !== "ready" || state.errors.length !== 0 || state.pageErrors.length !== 0 ||
+ state.meshCount !== 1 || state.retainedRootCount !== 1 || state.retainedLeafCount !== 1200 ||
+ state.triangleIdCount !== 1200 || state.polycssStableTriangleCount !== 1200 || state.rasterAtlasLeafCount !== 1200 ||
+ state.rasterLeafWidths.length < 2 || state.rasterLeafHeights.length < 2 ||
+ state.retainedLeafTags.length !== 1 || state.retainedLeafTags[0] !== "U" ||
+ state.bodyChildCount !== 1 || state.bodyElementCount !== 1204 ||
+ state.bodyAttributeNames.join(",") !== "class" || state.bodyClassName !== "r" ||
+ state.dataAttributeCount !== 0 ||
+ state.customClassCount !== 1200 || state.customClassUniqueCount !== 1200 ||
+ state.customClassMaxLength !== 2 || state.customClassesValid !== true ||
+ state.comparisonElementCount !== 0 || state.snapshotStyleCount !== 1 || state.preparedLeafRuleCount !== 1200 ||
+ state.leafInlineTransformCount <= 0 || state.leafInlineTransformCount > 1200 ||
+ state.leafInlinePreparedAddressPropertyCount <= 0 ||
+ state.leafInlineVisibilityCount !== 1200 ||
+ state.leafInlineUnexpectedPropertyCount !== 0 ||
+ state.rootInlinePropertyNames.join(",") !== "--cssflower-space-texels,transform" ||
+ state.cameraInlinePropertyCount !== 1 || state.cameraInlinePropertyNames.join(",") !== "scale" ||
+ state.sceneInlinePropertyCount !== 0 ||
+ state.meshInlinePropertyCount !== 0 || state.directStructure !== true ||
+ state.canvasCount !== 0 || state.svgCount !== 0 ||
+ state.leafTransformChangeCount < 1 || !state.rootTransformChanged ||
+ !state.identityRows.every((row) => row.sameRoot && row.sameLeaves) ||
+ stats.morphTarget !== "@layoutit/polycss-morph#createPolyMorphPreparedDomTarget" ||
+ stats.morphAdopted !== true || stats.morphStableDomIdentity !== true ||
+ stats.retainedTriangleLeafCount !== 1200 || stats.retainedRotationRootCount !== 1 ||
+ stats.runtimeDomMutationCount !== 0 || stats.runtimeDomGrowth !== false ||
+ stats.runtimePolygonConstructionCount !== 0 || stats.runtimeGeometryConstructionCount !== 0 ||
+ stats.runtimeRadialProjectionCount !== 0 || stats.runtimeNormalCalculationCount !== 0 ||
+ stats.runtimeLightingCalculationCount !== 0 || stats.runtimeAtlasConstructionCount !== 0 ||
+ stats.runtimeProjectionCalculationCount !== 0 || stats.runtimeRasterizationCount !== 0 ||
+ stats.runtimeLeafTransformWrites <= 0 || stats.runtimePreparedGeometryStatePublishes <= 0 ||
+ stats.runtimeSelectedLeafTransformAttempts + stats.runtimeVisibilityCatchupTransformAttempts <
+ stats.runtimeLeafTransformWrites ||
+ stats.runtimeVisibilityCatchupTransformAttempts < 1 ||
+ stats.runtimeVisibilityCatchupTransformWrites < 1 ||
+ stats.runtimeVisibilityCatchupTransformWrites > stats.runtimeVisibilityCatchupTransformAttempts ||
+ stats.runtimeLeafTransformSelectionTests <= stats.runtimeLeafTransformWrites ||
+ stats.runtimeLeafTransformSelectionTests !==
+ stats.runtimeSelectedLeafTransformAttempts + stats.runtimeSuppressedLeafTransformWrites ||
+ stats.runtimeSuppressedLeafTransformWrites <= 0 || stats.runtimeLeafVisibilityWrites <= 0 ||
+ stats.runtimePreparedFrontFacingStateSelections <= 0 || stats.preparedFrontFacingDilationTicks !== 1 ||
+ stats.preparedFrontFacingSelectedFaceCount !== 165466 ||
+ stats.preparedFrontFacingVisibilityChangeCount !== 8804 ||
+ stats.preparedVisibilitySelectionDomain !== "prepared-source-camera-depth16-owned-pixel-occlusion" ||
+ stats.preparedVisibilityMinimumOwnedPixels !== 8 ||
+ stats.preparedVisibilitySampleGrid !== 1 || stats.preparedVisibilityAdjacencyRings !== 0 ||
+ stats.currentFrontFacingLeafCount < 1 || stats.currentFrontFacingLeafCount > 1200 ||
+ stats.runtimeLightingAtlasWrites !== 0 || stats.runtimeLightingColumnWrites !== 0 || stats.runtimeLightingRowWrites !== 0 ||
+ stats.runtimePreparedLightingAddressWrites <= 0 || stats.runtimePreparedLightingStateSelections <= 0 ||
+ stats.runtimeDirectLeafCssTextWrites !== 0 || stats.runtimeProjectedAtlasWrites !== 0 ||
+ stats.runtimeProjectedFrameWrites !== 0 || stats.runtimePreparedPageLayoutAdoptions !== 0 ||
+ stats.runtimePreparedPageBoundaryLeafStyleWrites !== 0 ||
+ stats.transformBlockLoader?.residentBlockCount > 2 || stats.transformBlockLoader?.errors?.length !== 0 ||
+ stats.lightingPageLoader?.schema !== "cssflower-prepared-lighting-grid-loader@1" ||
+ stats.lightingPageLoader?.residentGridCount !== 1 || stats.lightingPageLoader?.loadCount !== 1 ||
+ stats.lightingPageLoader?.errors?.length !== 0 ||
+ state.lightingGridRequestCount !== 1 || state.lightingGridRequestUrlCount !== 1 ||
+ stats.stagePresentation !== "responsive" || stats.preparedStageEdgePixels !== 720 ||
+ stats.runtimeModelGeometryCalculations !== 0 || Math.abs(stats.presentationScale - 1.25) > 1e-8 ||
+ stats.responsivePresentationFit !== "contain" || stats.responsivePresentationStageFraction !== 1 ||
+ stats.runtimePresentationScaleWrites < 1 ||
+ state.bodyRect.width !== 960 || state.bodyRect.height !== 900 ||
+ Math.abs(state.cameraRect.width - 900) > 0.01 || Math.abs(state.cameraRect.height - 900) > 0.01 ||
+ Math.abs(state.cameraRect.x - 30) > 0.01 || Math.abs(state.cameraRect.y) > 0.01 ||
+ state.responsiveFits.length !== 4 || !state.responsiveFits.every(responsiveFitMatches) ||
+ state.expansionFits.length !== 2 || !state.expansionFits.every((entry) =>
+ entry.visibility.nonBlackPixelCount > 1000 && Math.min(...entry.visibility.margins) >= 64) ||
+ stats.runtimeShapeTransformWrites !== 0 || stats.polycss?.surfaceLeafCounts?.stableTriangle !== 1200 ||
+ state.visibility.nonBlackPixelCount < 1000 || state.visibility.chromaticPixelCount < 1000) {
+ throw new Error(`cssFlower browser proof failed:\n${JSON.stringify(state, null, 2)}`);
+ }
+ const row = (tick) => state.identityRows.find((entry) => entry.tick === tick);
+ if (row(44).sfiHex !== "3d4ccccd" || row(45).sfiHex !== "bd4ccccd" ||
+ row(89).sfiHex !== "bd4ccccd" || row(90).sfiHex !== "3d4ccccd" ||
+ row(44).geometryStateIndex !== 44 || row(45).geometryStateIndex !== 45 ||
+ row(46).geometryStateIndex !== 44 || row(89).geometryStateIndex !== 1 ||
+ !state.identityRows.every((entry) => entry.preparedAssetMappingMatches) ||
+ row(359).timelineStateIndex !== 359 || row(360).timelineStateIndex !== 0 ||
+ row(361).timelineStateIndex !== 1 || row(45).rotation[0] - row(44).rotation[0] !== 3 ||
+ row(45).rotation[1] - row(44).rotation[1] !== 2) {
+ throw new Error(`cssFlower rounded product update/reversal proof failed:\n${JSON.stringify(state.identityRows, null, 2)}`);
+ }
+}
+
+function responsiveFitMatches(entry) {
+ const fittedEdge = Math.min(entry.width, entry.height);
+ return Math.abs(entry.bodyRect.width - entry.width) < 0.01 &&
+ Math.abs(entry.bodyRect.height - entry.height) < 0.01 &&
+ Math.abs(entry.cameraRect.width - fittedEdge) < 0.02 &&
+ Math.abs(entry.cameraRect.height - fittedEdge) < 0.02 &&
+ Math.abs(entry.cameraRect.x - (entry.width - fittedEdge) / 2) < 0.02 &&
+ Math.abs(entry.cameraRect.y - (entry.height - fittedEdge) / 2) < 0.02 &&
+ Math.abs(entry.presentationScale - entry.scale) < 1e-7 &&
+ entry.retainedLeafCount === 1200 && entry.runtimeDomMutationCount === 0;
+}
+
+function imageVisibility(bytes) {
+ const png = PNG.sync.read(bytes);
+ let nonBlackPixelCount = 0;
+ let chromaticPixelCount = 0;
+ let minimumX = png.width;
+ let minimumY = png.height;
+ let maximumX = -1;
+ let maximumY = -1;
+ for (let y = 0; y < png.height; y += 1) {
+ for (let x = 0; x < png.width; x += 1) {
+ const offset = (y * png.width + x) * 4;
+ const r = png.data[offset];
+ const g = png.data[offset + 1];
+ const b = png.data[offset + 2];
+ const a = png.data[offset + 3];
+ if (a > 0 && Math.max(r, g, b) > 16) {
+ nonBlackPixelCount += 1;
+ minimumX = Math.min(minimumX, x);
+ minimumY = Math.min(minimumY, y);
+ maximumX = Math.max(maximumX, x);
+ maximumY = Math.max(maximumY, y);
+ }
+ if (a > 0 && Math.max(r, g, b) - Math.min(r, g, b) > 18 && Math.max(r, g, b) > 30) {
+ chromaticPixelCount += 1;
+ }
+ }
+ }
+ return {
+ width: png.width,
+ height: png.height,
+ nonBlackPixelCount,
+ chromaticPixelCount,
+ bounds: [minimumX, minimumY, maximumX, maximumY],
+ margins: [minimumX, minimumY, png.width - 1 - maximumX, png.height - 1 - maximumY],
+ };
+}
+
+async function freePort() {
+ return new Promise((resolvePort, reject) => {
+ const server = createServer();
+ server.listen(0, "127.0.0.1", () => {
+ const address = server.address();
+ const port = typeof address === "object" && address ? address.port : 0;
+ server.close(() => resolvePort(port));
+ });
+ server.on("error", reject);
+ });
+}
+
+async function waitFor(predicate, timeoutMs, onPoll = () => undefined) {
+ const start = Date.now();
+ while (Date.now() - start < timeoutMs) {
+ onPoll();
+ if (predicate()) return;
+ await new Promise((resolve) => setTimeout(resolve, 100));
+ }
+ throw new Error(`Timed out waiting for Vite.\n${output}`);
+}
diff --git a/src/adapters/flowerbox/tools/verify-product-bank.mjs b/src/adapters/flowerbox/tools/verify-product-bank.mjs
new file mode 100644
index 0000000..f82aa44
--- /dev/null
+++ b/src/adapters/flowerbox/tools/verify-product-bank.mjs
@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+import { resolve } from "node:path";
+import { inspectFlowerboxProductBank } from "./productBank.mjs";
+
+const root = resolve(process.argv[2] ?? "build/generated/public/cssflower");
+const summary = await inspectFlowerboxProductBank(root);
+process.stdout.write(`${JSON.stringify({ status: "pass", root, ...summary }, null, 2)}\n`);
diff --git a/src/adapters/flowerbox/vite.config.mjs b/src/adapters/flowerbox/vite.config.mjs
new file mode 100644
index 0000000..37d6b0f
--- /dev/null
+++ b/src/adapters/flowerbox/vite.config.mjs
@@ -0,0 +1,36 @@
+import { cp, mkdir } from "node:fs/promises";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+
+const adapterRoot = dirname(fileURLToPath(import.meta.url));
+const repositoryRoot = resolve(adapterRoot, "..", "..", "..");
+const generatedPublicDir = resolve(
+ process.env.CSSFLOWER_GENERATED_PUBLIC_DIR ??
+ resolve(repositoryRoot, "build/generated/public"),
+);
+const deployBuild = process.env.CSSFLOWER_DEPLOY_BUILD === "1";
+
+export default defineConfig({
+ base: deployBuild ? "/flower/" : "/",
+ root: adapterRoot,
+ publicDir: deployBuild ? resolve(adapterRoot, "public") : generatedPublicDir,
+ plugins: deployBuild ? [{
+ name: "flowerbox-netlify-assets",
+ async closeBundle() {
+ await mkdir(resolve(repositoryRoot, "dist/site"), { recursive: true });
+ await cp(
+ resolve(generatedPublicDir, "cssflower"),
+ resolve(repositoryRoot, "dist/site/cssflower"),
+ { recursive: true, force: true },
+ );
+ },
+ }] : [],
+ server: { host: "127.0.0.1" },
+ preview: { host: "127.0.0.1" },
+ build: {
+ target: "es2022",
+ outDir: resolve(repositoryRoot, deployBuild ? "dist/site/flower" : "dist/flowerbox"),
+ emptyOutDir: true,
+ },
+});