@12ui/design 0.2.77 → 0.2.79

package/runtime/codex-conversion/src/images/native-frame.mjs

@@ -0,0 +1,103 @@
+import sharp from 'sharp';
+
+// How a native image that came back in another shape than its frame meets the frame without distortion (one module
+// for the policy, CLAUDE.md item 9). The Design workspace's options use it (`aspect-preserving-lanczos3`); conversion
+// keeps the exact stretch, whose geometry must map onto its source frame.
+//
+// Never stretch: the image is scaled by one factor on both axes. Cutting it to the frame's shape (cover) loses what
+// the cut strips hold, so it is chosen only with proof that they hold nothing: every pixel of every strip within
+// `BLANK_DELTA` of its strip's median colour on every channel. One ink pixel is no proof (CLAUDE.md item 8): a share of
+// stray pixels let a 69 px strip holding 12 pixels of a heart button's faint outline count as blank (0.2.78 gate,
+// 1606x979 into 1536x1024). Without that proof the whole image is kept (contain) and the frame's spare side is filled
+// with the colour of the image's own edge there, so nothing drawn is lost.
+
+/** A channel difference from a strip's median colour beyond which a pixel is ink. */
+export const BLANK_DELTA = 24;
+/** How many pixels deep an edge is sampled for the colour of the spare side. */
+const EDGE_DEPTH = 2;
+
+const rgbOf = async (image, region) => {
+  const {data, info} = await sharp(image).extract(region).removeAlpha().raw().toBuffer({resolveWithObject: true});
+  return {data, channels: info.channels, count: info.width * info.height};
+};
+
+/** The per-channel median colour of the pixels in `region`. */
+const medianColour = ({data, channels, count}) => {
+  const colour = [];
+  for (let channel = 0; channel < 3; channel += 1) {
+    const histogram = new Uint32Array(256);
+    for (let index = 0; index < count; index += 1) histogram[data[index * channels + Math.min(channel, channels - 1)]] += 1;
+    let seen = 0, value = 0;
+    while (value < 255 && seen + histogram[value] <= count / 2) { seen += histogram[value]; value += 1; }
+    colour.push(value);
+  }
+  return colour;
+};
+
+/** Whether a strip holds nothing: every pixel within `BLANK_DELTA` of its median colour. Any ink pixel vetoes the cut. */
+export const stripIsBlank = async (image, region) => {
+  if (region.width <= 0 || region.height <= 0) return true;
+  const pixels = await rgbOf(image, region);
+  const [r, g, b] = medianColour(pixels);
+  for (let index = 0; index < pixels.count; index += 1) {
+    const at = index * pixels.channels;
+    const c = (offset) => pixels.data[at + Math.min(offset, pixels.channels - 1)];
+    if (Math.abs(c(0) - r) > BLANK_DELTA || Math.abs(c(1) - g) > BLANK_DELTA || Math.abs(c(2) - b) > BLANK_DELTA) return false;
+  }
+  return true;
+};
+
+const hex = (colour) => `#${colour.map((value) => value.toString(16).padStart(2, '0')).join('')}`;
+
+/**
+ * The cover window: the largest part of the image in the frame's shape, centred, and the strips outside it (in the
+ * image's own pixels). An image already in the frame's shape to within a pixel has no strips.
+ */
+export const coverWindow = (actual, expected) => {
+  const {width: aw, height: ah} = actual, {width: fw, height: fh} = expected;
+  if (aw * fh > ah * fw) {
+    const kw = Math.min(aw, Math.round(ah * fw / fh)), left = Math.floor((aw - kw) / 2);
+    return {window: {left, top: 0, width: kw, height: ah}, strips: [{left: 0, top: 0, width: left, height: ah}, {left: left + kw, top: 0, width: aw - left - kw, height: ah}], axis: 'x'};
+  }
+  const kh = Math.min(ah, Math.round(aw * fh / fw)), top = Math.floor((ah - kh) / 2);
+  return {window: {left: 0, top, width: aw, height: kh}, strips: [{left: 0, top: 0, width: aw, height: top}, {left: 0, top: top + kh, width: aw, height: ah - top - kh}], axis: 'y'};
+};
+
+/**
+ * Fit `original` (PNG bytes) to `expected` without distortion: the uniform scale when its shape is the frame's (to
+ * within a pixel), the cover crop when every cut strip is blank, else the contain fit padded with the edge colours.
+ * Returns the PNG and the record of what was done.
+ */
+export async function fitToFrame(original, expected) {
+  const meta = await sharp(original).metadata();
+  const actual = {width: meta.width, height: meta.height};
+  const {window, strips, axis} = coverWindow(actual, expected);
+  /** @type {import('sharp').ResizeOptions} */
+  const resize = {fit: 'fill', kernel: 'lanczos3'};
+  if (strips.every((strip) => strip.width <= 0 || strip.height <= 0)) {
+    const png = await sharp(original).resize(expected.width, expected.height, resize).png().toBuffer();
+    return {png, normalization: {name: 'uniform-scale', kernel: 'lanczos3', output: expected, scale: expected.width / actual.width}};
+  }
+  const blank = [];
+  for (const strip of strips) blank.push(await stripIsBlank(original, strip));
+  if (blank.every(Boolean)) {
+    const png = await sharp(original).extract(window).resize(expected.width, expected.height, resize).png().toBuffer();
+    return {png, normalization: {name: 'cover-crop', kernel: 'lanczos3', output: expected, scale: expected.width / window.width, crop: window}};
+  }
+  // Contain: the whole image at one scale, the spare side filled with the colour of the image's own edge beside it.
+  const scale = Math.min(expected.width / actual.width, expected.height / actual.height);
+  const width = Math.min(expected.width, Math.max(1, Math.round(actual.width * scale)));
+  const height = Math.min(expected.height, Math.max(1, Math.round(actual.height * scale)));
+  const spare = axis === 'y' ? expected.width - width : expected.height - height;
+  const before = Math.floor(spare / 2), after = spare - before;
+  const edges = axis === 'y'
+    ? [{left: 0, top: 0, width: Math.min(EDGE_DEPTH, actual.width), height: actual.height}, {left: Math.max(0, actual.width - EDGE_DEPTH), top: 0, width: Math.min(EDGE_DEPTH, actual.width), height: actual.height}]
+    : [{left: 0, top: 0, width: actual.width, height: Math.min(EDGE_DEPTH, actual.height)}, {left: 0, top: Math.max(0, actual.height - EDGE_DEPTH), width: actual.width, height: Math.min(EDGE_DEPTH, actual.height)}];
+  const [first, second] = await Promise.all(edges.map(async (edge) => medianColour(await rgbOf(original, edge))));
+  const fill = (colour) => ({r: colour[0], g: colour[1], b: colour[2], alpha: 1});
+  const pad = axis === 'y' ? {left: before, right: after, top: 0, bottom: 0} : {left: 0, right: 0, top: before, bottom: after};
+  let png = await sharp(original).resize(width, height, resize).png().toBuffer();
+  if (before > 0) png = await sharp(png).extend(axis === 'y' ? {left: before, background: fill(first)} : {top: before, background: fill(first)}).png().toBuffer();
+  if (after > 0) png = await sharp(png).extend(axis === 'y' ? {right: after, background: fill(second)} : {bottom: after, background: fill(second)}).png().toBuffer();
+  return {png, normalization: {name: 'contain-pad', kernel: 'lanczos3', output: expected, scale, pad, colours: [hex(first), hex(second)]}};
+}

package/runtime/codex-conversion/src/images/native.mjs

@@ -7,16 +7,24 @@ import {invokeNative} from './native-invoke.mjs';
 import {collectNative,packNativeReceipt} from './native-collect.mjs';
 import {filesUnder,inputFileNames} from './native-files.mjs';
 import {sha256,pngDimensions,parseNativeRecords} from './native-records.mjs';
+import {fitToFrame} from './native-frame.mjs';
 
-export async function decodeNativeResponse(bytes) {
+/** How a native image meets its frame: conversion's exact stretch (the default), or the aspect-preserving fit (native-frame.mjs). */
+export const NATIVE_NORMALIZATIONS=Object.freeze({stretch:'exact-stretch-lanczos3',preserveAspect:'aspect-preserving-lanczos3'});
+/** @typedef {typeof NATIVE_NORMALIZATIONS[keyof typeof NATIVE_NORMALIZATIONS]} NativeNormalization */
+/** @param {Buffer} bytes @param {{normalization?: NativeNormalization}} [options] */
+export async function decodeNativeResponse(bytes,{normalization=NATIVE_NORMALIZATIONS.stretch}={}) {
+  if(!Object.values(NATIVE_NORMALIZATIONS).includes(normalization)) throw Error('Unknown native normalization: '+normalization);
   const receipt=JSON.parse(bytes.toString('utf8'));
   if(!['exact-size-pass','size-mismatch'].includes(receipt.state)||receipt.outputs.length!==1) throw Error('Native image call requires inspection: '+receipt.state);
   if(receipt.model!=='gpt-6-astra'||receipt.effort!=='medium')throw Error('Native coordinator model/effort does not match requested execution');
   const original=Buffer.from(receipt.outputs[0].base64,'base64');
   if(sha256(original)!==receipt.outputs[0].sha256) throw Error('Native original custody mismatch');
   const actual=pngDimensions(original), expected=receipt.geometry.raw.expected;
-  const png=await sharp(original).resize(expected.width,expected.height,{fit:'fill',kernel:'lanczos3'}).png().toBuffer();
-  return {png,usage:{codexTokens:receipt.tokenUsage??[],imageUsage:null},revisedPrompt:receipt.generations[0].revisedPrompt??null,native:{originalPath:receipt.outputs[0].path,originalSha256:sha256(original),originalDimensions:actual,normalization:{name:'exact-stretch',kernel:'lanczos3',output:expected,scaleX:expected.width/actual.width,scaleY:expected.height/actual.height},model:receipt.model,effort:receipt.effort,imageModel:null,invocationCount:receipt.invocationCount}};
+  const fitted=normalization===NATIVE_NORMALIZATIONS.preserveAspect
+    ?await fitToFrame(original,expected)
+    :{png:await sharp(original).resize(expected.width,expected.height,{fit:'fill',kernel:'lanczos3'}).png().toBuffer(),normalization:{name:'exact-stretch',kernel:'lanczos3',output:expected,scaleX:expected.width/actual.width,scaleY:expected.height/actual.height}};
+  return {png:fitted.png,usage:{codexTokens:receipt.tokenUsage??[],imageUsage:null},revisedPrompt:receipt.generations[0].revisedPrompt??null,native:{originalPath:receipt.outputs[0].path,originalSha256:sha256(original),originalDimensions:actual,normalization:fitted.normalization,model:receipt.model,effort:receipt.effort,imageModel:null,invocationCount:receipt.invocationCount}};
 }
 /** `processOptions` reaches the call's `codex exec` child: `interruptOnSignal`, `onSpawn`, `onExit` (native-invoke.mjs). */
 export async function executeNativeCall({request,input,callId,store,codexBinary='codex',codexHome,timeoutMs=1800000,processOptions={}}) {

package/runtime/codex-conversion/src/run-store.mjs

@@ -3,7 +3,7 @@ import { hostname } from 'node:os';
 import { join, dirname } from 'node:path';
 import { randomUUID } from 'node:crypto';
 import { canonical, hash, readJson, writeJson, writeBytes, syncDirectory } from './run-store-io.mjs';
-export { hash, readJson, writeJson } from './run-store-io.mjs';
+export { canonical, hash, readJson, writeJson } from './run-store-io.mjs';
 /** @typedef {{bytes: Buffer, metadata?: any}} Response */
 /** @param {string} message @param {string} code */
 function failure(message, code) { return Object.assign(new Error(message), { code }); }
@@ -77,6 +77,26 @@ export function createStore(runDir) {
     },
   };
 }
+/**
+ * The response a call id already received, read back with the request it was received for, when its custody is
+ * intact (the checks `runCall` makes before it reuses one); null when the id received nothing. It only reads: a caller
+ * whose own request differs (`REQUEST_CHANGED`) decides whether that paid response serves it, and `runCall` keeps the
+ * id's identity as it is.
+ * @param {string} runDir @param {string} id
+ * @returns {Promise<{callDir: string, request: any, requestHash: string, bytes: Buffer, metadata: any} | null>}
+ */
+export async function readReceived(runDir, id) {
+  const callDir = join(runDir, 'calls', hash(id));
+  const state = await readJson(join(callDir, 'state.json'));
+  if (!state || state.id !== id || state.status === 'prepared') return null;
+  const [request, custody] = await Promise.all([readJson(join(callDir, 'request.json')), readJson(join(callDir, 'custody.json'))]);
+  let bytes = null;
+  try { bytes = await readFile(join(callDir, 'response.bin')); }
+  catch (error) { if (/** @type {NodeJS.ErrnoException} */ (error).code !== 'ENOENT') throw error; }
+  if (!bytes || !request || hash(canonical(request)) !== state.requestHash) return null;
+  if (custody?.requestHash !== state.requestHash || custody.length !== bytes.length || custody.responseHash !== hash(bytes)) return null;
+  return { callDir, request, requestHash: state.requestHash, bytes, metadata: custody.metadata };
+}
 /** @template T @param {string} runDir @param {() => Promise<T>} callback @returns {Promise<T>} */
 export async function withRunLock(runDir, callback) {
   await mkdir(runDir, { recursive: true });