@empty-sekai/sekai-custom-profile-sdk 0.3.0

package/src/glyph_plan.rs

@@ -0,0 +1,226 @@
+use freetype::{face::LoadFlag, Library};
+use serde::Serialize;
+use serde_json::json;
+use sha2::{Digest, Sha256};
+use std::rc::Rc;
+
+use super::{atlas::AtlasConfig, FONT_ENGINE_FINGERPRINT, TMP_POINT_SIZE, TMP_SPREAD};
+
+const CACHE_SCHEMA: &str = "allium.glyph-raster-cache.v1";
+const THRESHOLD: u32 = 128;
+const DOWNSAMPLE_VERSION: &str = "box-v1";
+
+#[derive(Clone, Copy, Debug, PartialEq, Eq, Serialize)]
+#[serde(rename_all = "lowercase")]
+pub enum RasterBackend {
+    Edt,
+    Analytic,
+}
+
+impl RasterBackend {
+    pub fn parse(value: &str) -> Result<Self, String> {
+        match value {
+            "edt" => Ok(Self::Edt),
+            "analytic" => Ok(Self::Analytic),
+            _ => Err(format!("unsupported SDF backend {value}")),
+        }
+    }
+
+    fn load_flags(self) -> &'static str {
+        match self {
+            Self::Edt => "NO_HINTING",
+            Self::Analytic => "NO_BITMAP|NO_HINTING",
+        }
+    }
+
+    fn render_mode(self) -> &'static str {
+        match self {
+            Self::Edt => "normal-mask",
+            Self::Analytic => "outline",
+        }
+    }
+
+    fn normalized_supersample(self, requested: usize) -> usize {
+        match self {
+            Self::Edt => requested.clamp(1, 4),
+            Self::Analytic => 0,
+        }
+    }
+
+    fn load_flag(self) -> LoadFlag {
+        match self {
+            Self::Edt => LoadFlag::NO_HINTING,
+            Self::Analytic => LoadFlag::NO_BITMAP | LoadFlag::NO_HINTING,
+        }
+    }
+
+    fn name(self) -> &'static str {
+        match self {
+            Self::Edt => "edt",
+            Self::Analytic => "analytic",
+        }
+    }
+}
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct GlyphRasterPlan {
+    region: String,
+    family: String,
+    font_source_hash: String,
+    schema_namespace: &'static str,
+    font_engine_fingerprint: &'static str,
+    raster_contract_id: String,
+    contract_id: String,
+    backend: RasterBackend,
+    supersample: usize,
+    base_size: f32,
+    spread: f32,
+    atlas_width: usize,
+    atlas_height: usize,
+    glyphs: Vec<PlannedGlyph>,
+    missing: Vec<String>,
+}
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+struct PlannedGlyph {
+    ch: String,
+    glyph_index: u32,
+    identity: GlyphRasterIdentity,
+}
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+struct GlyphRasterIdentity {
+    opaque_key: String,
+    schema_namespace: &'static str,
+    font_engine_fingerprint: &'static str,
+    raster_contract_id: String,
+}
+
+pub fn plan(
+    font_bytes: Vec<u8>,
+    codepoints: &[u32],
+    region: String,
+    family: String,
+    font_source_hash: String,
+    backend: RasterBackend,
+    requested_supersample: usize,
+) -> Result<GlyphRasterPlan, String> {
+    let supersample = backend.normalized_supersample(requested_supersample);
+    let raster_contract_id = format!(
+        "allium-r8-{}-ss{supersample}-spread{}-threshold{THRESHOLD}-{DOWNSAMPLE_VERSION}",
+        backend.name(),
+        TMP_SPREAD as usize,
+    );
+    let contract_id = format!("{FONT_ENGINE_FINGERPRINT}:{raster_contract_id}");
+    let library = Library::init().map_err(|error| format!("FreeType init failed: {error:?}"))?;
+    let face = library
+        .new_memory_face(Rc::new(font_bytes), 0)
+        .map_err(|error| format!("load memory face failed: {error:?}"))?;
+    face.set_char_size((TMP_POINT_SIZE as isize) * 64, 0, 72, 72)
+        .map_err(|error| format!("set char size failed: {error:?}"))?;
+    let mut glyphs = Vec::with_capacity(codepoints.len());
+    let mut missing = Vec::new();
+    for codepoint in codepoints {
+        let Some(ch) = char::from_u32(*codepoint) else {
+            missing.push(format!("U+{codepoint:04X}"));
+            continue;
+        };
+        let Some(glyph_index) = face.get_char_index(ch as usize) else {
+            missing.push(ch.to_string());
+            continue;
+        };
+        face.load_glyph(glyph_index, backend.load_flag())
+            .map_err(|error| format!("load glyph plan failed: {error:?}"))?;
+        glyphs.push(PlannedGlyph {
+            ch: ch.to_string(),
+            glyph_index,
+            identity: identity(
+                &region,
+                &font_source_hash,
+                glyph_index,
+                backend,
+                supersample,
+                &raster_contract_id,
+            )?,
+        });
+    }
+    let atlas = AtlasConfig::default();
+    Ok(GlyphRasterPlan {
+        region,
+        family,
+        font_source_hash,
+        schema_namespace: CACHE_SCHEMA,
+        font_engine_fingerprint: FONT_ENGINE_FINGERPRINT,
+        raster_contract_id,
+        contract_id,
+        backend,
+        supersample,
+        base_size: TMP_POINT_SIZE,
+        spread: TMP_SPREAD,
+        atlas_width: atlas.page_width,
+        atlas_height: atlas.page_height,
+        glyphs,
+        missing,
+    })
+}
+
+fn identity(
+    region: &str,
+    font_source_hash: &str,
+    glyph_index: u32,
+    backend: RasterBackend,
+    supersample: usize,
+    raster_contract_id: &str,
+) -> Result<GlyphRasterIdentity, String> {
+    let canonical = json!([
+        ["schema", CACHE_SCHEMA],
+        ["region", region],
+        ["font_sha256", font_source_hash.to_ascii_lowercase()],
+        ["face_index", 0],
+        ["variation_axes", json!([])],
+        ["glyph_id", glyph_index],
+        ["point_size_26d6", (TMP_POINT_SIZE as u32) * 64],
+        ["dpi_x", 72],
+        ["dpi_y", 72],
+        ["load_flags", backend.load_flags()],
+        ["render_mode", backend.render_mode()],
+        ["spread_26d6", (TMP_SPREAD as u32) * 64],
+        ["sdf_algorithm", backend.name()],
+        ["supersample", supersample],
+        ["threshold", THRESHOLD],
+        ["downsample_version", DOWNSAMPLE_VERSION],
+        ["font_engine", FONT_ENGINE_FINGERPRINT],
+        ["raster_contract", raster_contract_id],
+    ]);
+    let bytes = serde_json::to_vec(&canonical).map_err(|error| error.to_string())?;
+    Ok(GlyphRasterIdentity {
+        opaque_key: format!("{:x}", Sha256::digest(bytes)),
+        schema_namespace: CACHE_SCHEMA,
+        font_engine_fingerprint: FONT_ENGINE_FINGERPRINT,
+        raster_contract_id: raster_contract_id.to_string(),
+    })
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn raster_contract_normalizes_supersample_before_identity() {
+        assert_eq!(RasterBackend::Edt.normalized_supersample(99), 4);
+        assert_eq!(RasterBackend::Analytic.normalized_supersample(99), 0);
+    }
+
+    #[test]
+    fn identity_matches_the_existing_browser_cache_namespace() {
+        let contract = "allium-r8-edt-ss2-spread6-threshold128-box-v1";
+        let planned = identity("cn", &"a".repeat(64), 42, RasterBackend::Edt, 2, contract).unwrap();
+        assert_eq!(
+            planned.opaque_key,
+            "fbd1658fe3bd464c0a54ee42284e7c15f64b68dd60d270c81e818de61bac9894"
+        );
+    }
+}

package/src/gpu/browserSemanticResources.ts

@@ -0,0 +1,294 @@
+import { SessionImageResourceCache, type ImageResourceLease } from "../cache/sessionImageResourceCache.js";
+import type {
+  ProvidedResource,
+  ResourceDescriptor,
+  ResourceProvider,
+} from "../resourceProvider.js";
+
+export type BrowserImageSource = {
+  source: TexImageSource;
+  width: number;
+  height: number;
+};
+
+export type BrowserSemanticResourceOptions = {
+  provider: ResourceProvider;
+  concurrency?: number;
+  decode?: (blob: Blob) => Promise<TexImageSource>;
+  softBytes?: number;
+  hardBytes?: number;
+};
+
+export type BrowserSemanticResourceSet = {
+  sources: Map<string, BrowserImageSource>;
+  availability: Map<string, boolean>;
+  release(): void;
+};
+
+export type ResourceProviderRuntimeStats = {
+  requested: number;
+  loaded: number;
+  failures: number;
+  cancellations: number;
+  encodedBytes: number;
+  resolveMs: number;
+  active: number;
+  queued: number;
+  limit: number;
+  peak: number;
+};
+
+type LoadedBrowserResource = {
+  image: BrowserImageSource;
+  available: boolean;
+};
+
+/** The provider owns acquisition and persistent caching. This manager only
+ * schedules provider calls and retains bounded decoded session resources. */
+export class BrowserSemanticResourceManager {
+  private readonly provider: ResourceProvider;
+  private readonly decode: (blob: Blob) => Promise<TexImageSource>;
+  private readonly scheduler: BoundedScheduler;
+  private readonly cache: SessionImageResourceCache<LoadedBrowserResource>;
+  private readonly providerCounters = {
+    requested: 0,
+    loaded: 0,
+    failures: 0,
+    cancellations: 0,
+    encodedBytes: 0,
+    resolveMs: 0,
+  };
+
+  constructor(options: BrowserSemanticResourceOptions) {
+    if (!options.provider || typeof options.provider.provide !== "function") {
+      throw new Error("semantic resource provider is required");
+    }
+    this.provider = options.provider;
+    this.decode = options.decode ?? ((blob: Blob) => createImageBitmap(blob, {
+      premultiplyAlpha: "none",
+      colorSpaceConversion: "none",
+    }) as Promise<TexImageSource>);
+    this.scheduler = new BoundedScheduler(options.concurrency ?? 8);
+    this.cache = new SessionImageResourceCache<LoadedBrowserResource>({
+      softBytes: options.softBytes ?? 64 * 1024 * 1024,
+      hardBytes: options.hardBytes ?? 96 * 1024 * 1024,
+      dispose: (value) => closeImageSource(value.image.source),
+    });
+  }
+
+  async acquire(
+    resources: ResourceDescriptor[],
+    signal: AbortSignal = new AbortController().signal,
+  ): Promise<BrowserSemanticResourceSet> {
+    const unique = new Map(resources.map((resource) => [resourceIdentity(resource), resource] as const));
+    const leases: Array<{
+      identity: string;
+      lease: ImageResourceLease<LoadedBrowserResource>;
+    }> = [];
+    try {
+      await Promise.all([...unique].map(async ([identity, resource]) => {
+        const cacheIdentity = this.provider.cacheIdentity?.(resource) ?? identity;
+        const lease = await this.cache.acquire(cacheIdentity, async (sharedSignal) => {
+          const value = await this.load(resource, sharedSignal);
+          return { value, bytes: decodedBytes(value.image) };
+        }, signal);
+        leases.push({ identity, lease });
+      }));
+    } catch (error) {
+      for (const { lease } of leases) lease.release();
+      throw error;
+    }
+    const sources = new Map(
+      leases.map(({ identity, lease }) => [identity, lease.value.image] as const),
+    );
+    const availability = new Map(
+      leases.map(({ identity, lease }) => [identity, lease.value.available] as const),
+    );
+    let released = false;
+    return {
+      sources,
+      availability,
+      release: () => {
+        if (released) return;
+        released = true;
+        for (const { lease } of leases) lease.release();
+      },
+    };
+  }
+
+  stats() {
+    return {
+      ...this.cache.stats(),
+      provider: {
+        ...this.providerCounters,
+        ...this.scheduler.stats(),
+      } satisfies ResourceProviderRuntimeStats,
+    };
+  }
+
+  private async load(
+    resource: ResourceDescriptor,
+    signal: AbortSignal,
+  ): Promise<LoadedBrowserResource> {
+    this.providerCounters.requested += 1;
+    const started = performance.now();
+    try {
+      const provided = await this.scheduler.run(
+        () => this.provider.provide(resource, { signal }),
+        signal,
+      );
+      if (signal.aborted) throw abortReason(signal);
+      if (!provided) throw new Error("provider returned no resource");
+      const image = await this.resolveSource(provided);
+      this.providerCounters.loaded += 1;
+      this.providerCounters.encodedBytes += providedByteLength(provided);
+      return { image, available: true };
+    } catch (error) {
+      if (signal.aborted || isAbortError(error)) {
+        this.providerCounters.cancellations += 1;
+        throw error;
+      }
+      this.providerCounters.failures += 1;
+      warnMissingResource(resource, error);
+      return {
+        image: normalizeSource(await this.decode(transparentPngBlob())),
+        available: false,
+      };
+    } finally {
+      this.providerCounters.resolveMs += Math.max(0, performance.now() - started);
+    }
+  }
+
+  private async resolveSource(provided: ProvidedResource): Promise<BrowserImageSource> {
+    const source = provided.source;
+    if (source instanceof Blob) return normalizeSource(await this.decode(source));
+    if (source instanceof ArrayBuffer) return normalizeSource(await this.decode(new Blob([source])));
+    if (ArrayBuffer.isView(source)) {
+      const view = new Uint8Array(source.buffer, source.byteOffset, source.byteLength);
+      const bytes = new Uint8Array(view.byteLength);
+      bytes.set(view);
+      return normalizeSource(await this.decode(new Blob([bytes])));
+    }
+    const dimensions = sourceDimensions(source);
+    if (!dimensions) throw new Error("direct image source has no finite dimensions");
+    return { source, ...dimensions };
+  }
+}
+
+export function resourceIdentity(resource: Pick<ResourceDescriptor, "id">): string {
+  if (!resource.id) throw new Error("semantic resource stable id is required");
+  return resource.id;
+}
+
+class BoundedScheduler {
+  private readonly limit: number;
+  private active = 0;
+  private peak = 0;
+  private readonly queue: Array<() => void> = [];
+
+  constructor(limit: number) {
+    if (!Number.isInteger(limit) || limit <= 0) throw new Error("semantic resource concurrency must be a positive integer");
+    this.limit = limit;
+  }
+
+  run<T>(task: () => Promise<T>, signal: AbortSignal): Promise<T> {
+    return new Promise<T>((resolve, reject) => {
+      const start = () => {
+        if (signal.aborted) {
+          reject(abortReason(signal));
+          this.drain();
+          return;
+        }
+        this.active += 1;
+        this.peak = Math.max(this.peak, this.active);
+        void task().then(resolve, reject).finally(() => {
+          this.active -= 1;
+          this.drain();
+        });
+      };
+      this.queue.push(start);
+      this.drain();
+    });
+  }
+
+  stats(): { active: number; queued: number; limit: number; peak: number } {
+    return { active: this.active, queued: this.queue.length, limit: this.limit, peak: this.peak };
+  }
+
+  private drain(): void {
+    while (this.active < this.limit) {
+      const start = this.queue.shift();
+      if (!start) return;
+      start();
+    }
+  }
+}
+
+function sourceDimensions(source: TexImageSource): { width: number; height: number } | null {
+  const value = source as unknown as Record<string, unknown>;
+  const width = firstPositiveDimension(value.videoWidth, value.naturalWidth, value.displayWidth, value.width);
+  const height = firstPositiveDimension(value.videoHeight, value.naturalHeight, value.displayHeight, value.height);
+  return width != null && height != null
+    ? { width, height }
+    : null;
+}
+
+function decodedBytes(source: BrowserImageSource): number {
+  return Math.max(0, Math.floor(source.width * source.height * 4));
+}
+
+function providedByteLength(provided: ProvidedResource): number {
+  const source = provided.source;
+  if (source instanceof Blob) return source.size;
+  if (source instanceof ArrayBuffer) return source.byteLength;
+  if (ArrayBuffer.isView(source)) return source.byteLength;
+  return 0;
+}
+
+function normalizeSource<T extends TexImageSource>(source: T): BrowserImageSource & { source: T } {
+  const dimensions = sourceDimensions(source);
+  if (!dimensions) throw new Error("decoded image source has no finite dimensions");
+  return { source, ...dimensions };
+}
+
+function firstPositiveDimension(...values: unknown[]): number | null {
+  for (const value of values) {
+    const dimension = numericDimension(value);
+    if (Number.isFinite(dimension) && dimension > 0) return dimension;
+  }
+  return null;
+}
+
+function numericDimension(value: unknown): number {
+  if (value && typeof value === "object") {
+    const animated = value as { baseVal?: { value?: unknown }; animVal?: { value?: unknown } };
+    const resolved = animated.animVal?.value ?? animated.baseVal?.value;
+    if (resolved != null) return Number(resolved);
+  }
+  return Number(value);
+}
+
+function closeImageSource(source: TexImageSource): void {
+  const close = (source as { close?: unknown }).close;
+  if (typeof close === "function") close.call(source);
+}
+
+function isAbortError(error: unknown): boolean {
+  return error instanceof DOMException && error.name === "AbortError";
+}
+
+function abortReason(signal: AbortSignal): unknown {
+  return signal.reason ?? new DOMException("The operation was aborted", "AbortError");
+}
+
+const TRANSPARENT_PNG_BASE64 = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGNgYGBgAAAABQABpfZFQAAAAABJRU5ErkJggg==";
+
+function transparentPngBlob(): Blob {
+  const bytes = Uint8Array.from(atob(TRANSPARENT_PNG_BASE64), (value) => value.charCodeAt(0));
+  return new Blob([bytes], { type: "image/png" });
+}
+
+function warnMissingResource(resource: ResourceDescriptor, error: unknown): void {
+  const reason = error instanceof Error ? error.message : String(error);
+  console.warn(`[sekai-custom-profile-sdk] semantic resource unavailable ${resource.namespace}/${resource.key} role=${resource.role}: ${reason}; using transparent placeholder`);
+}

package/src/gpu/generalTextRenderPlacement.ts

@@ -0,0 +1,175 @@
+import type { GlyphInstance } from "../types/glyph.js";
+import type { SemanticDrawOperation } from "./semanticCommandPlanner.js";
+
+const TEXT_SCALE = 2;
+
+type RenderPlacement = {
+  anchor_x: number;
+  baseline: number | null;
+};
+
+/**
+ * Applies General's measured draw anchors after the Rust TMP layout has
+ * finished. The returned instances retain the exact layout metrics and glyph
+ * relationships; only final local/device draw coordinates are translated.
+ */
+export function placeGeneralTextInstances(
+  instances: readonly GlyphInstance[],
+  operations: readonly SemanticDrawOperation[],
+): GlyphInstance[] {
+  const operationByCommand = new Map(
+    operations
+      .filter((operation) => operation.command.payload.kind === "text")
+      .map((operation) => [operation.command.id, operation] as const),
+  );
+  const translationByCommand = new Map<string, Translation>();
+
+  return instances.map((instance) => {
+    const operation = operationByCommand.get(instance.layerId);
+    if (!operation) return cloneInstance(instance);
+    const placement = renderPlacement(operation.command.render_placement);
+    if (!placement) return cloneInstance(instance);
+    let translation = translationByCommand.get(instance.layerId);
+    if (!translation) {
+      translation = placementTranslation(instance, operation, placement);
+      translationByCommand.set(instance.layerId, translation);
+    }
+    return translateInstance(instance, translation);
+  });
+}
+
+type Translation = {
+  localX: number;
+  localY: number;
+  deviceX: number;
+  deviceY: number;
+};
+
+function placementTranslation(
+  instance: GlyphInstance,
+  operation: SemanticDrawOperation,
+  placement: RenderPlacement,
+): Translation {
+  const alignment = numericAlignment(operation.command.payload.alignment);
+  const autoAnchor = alignment === 2
+    ? 0
+    : alignment === 4
+      ? instance.layoutMetrics.boxW / 2
+      : -instance.layoutMetrics.boxW / 2;
+  const localX = placement.anchor_x - autoAnchor;
+  const localY = placement.baseline == null
+    ? 0
+    : placement.baseline - instance.layoutMetrics.anchorBase;
+  const commandMatrix = matrix(operation.command.matrix);
+  const combined = multiply(operation.baseMatrix, commandMatrix);
+  const scaledX = localX * TEXT_SCALE;
+  const scaledY = localY * TEXT_SCALE;
+  return {
+    localX,
+    localY,
+    deviceX: combined[0] * scaledX + combined[2] * scaledY,
+    deviceY: combined[1] * scaledX + combined[3] * scaledY,
+  };
+}
+
+function translateInstance(instance: GlyphInstance, value: Translation): GlyphInstance {
+  const localDeviceX = value.localX * TEXT_SCALE;
+  const localDeviceY = value.localY * TEXT_SCALE;
+  const output = cloneInstance(instance);
+  output.charOp[1] += value.localX;
+  output.charOp[2] += value.localY;
+  output.charPosition[1] += localDeviceX;
+  output.charPosition[2] -= localDeviceY;
+  output.charQuad[1] = shiftPoints(output.charQuad[1], localDeviceX, -localDeviceY);
+  output.quad = output.quad.map(([x, y, u, v, spread]) => [
+    x + value.deviceX,
+    y + value.deviceY,
+    u,
+    v,
+    spread,
+  ]);
+  output.deviceCharPosition[1] += value.deviceX;
+  output.deviceCharPosition[2] += value.deviceY;
+  output.deviceCharQuad[1] = shiftPoints(
+    output.deviceCharQuad[1],
+    value.deviceX,
+    value.deviceY,
+  );
+  output.deviceGlyphQuad[1] = shiftPoints(
+    output.deviceGlyphQuad[1],
+    value.deviceX,
+    value.deviceY,
+  );
+  return output;
+}
+
+function cloneInstance(instance: GlyphInstance): GlyphInstance {
+  return {
+    ...instance,
+    quad: instance.quad.map((value) => [...value]),
+    charPosition: [...instance.charPosition],
+    charOp: [...instance.charOp],
+    charQuad: [instance.charQuad[0], instance.charQuad[1].map((value) => [...value])],
+    deviceCharPosition: [...instance.deviceCharPosition],
+    deviceCharQuad: [
+      instance.deviceCharQuad[0],
+      instance.deviceCharQuad[1].map((value) => [...value]),
+    ],
+    deviceGlyphQuad: [
+      instance.deviceGlyphQuad[0],
+      instance.deviceGlyphQuad[1].map((value) => [...value]),
+    ],
+    layoutMetrics: {
+      ...instance.layoutMetrics,
+      lineWidths: [...instance.layoutMetrics.lineWidths],
+      rectWidths: [...instance.layoutMetrics.rectWidths],
+      lineOffsets: [...instance.layoutMetrics.lineOffsets],
+    },
+    fill: [...instance.fill],
+    outline: [...instance.outline],
+  };
+}
+
+function shiftPoints(
+  points: Array<[number, number]>,
+  dx: number,
+  dy: number,
+): Array<[number, number]> {
+  return points.map(([x, y]) => [x + dx, y + dy]);
+}
+
+function renderPlacement(value: unknown): RenderPlacement | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const record = value as Record<string, unknown>;
+  if (!Number.isFinite(record.anchor_x)) return null;
+  if (record.baseline != null && !Number.isFinite(record.baseline)) return null;
+  return {
+    anchor_x: Number(record.anchor_x),
+    baseline: record.baseline == null ? null : Number(record.baseline),
+  };
+}
+
+function numericAlignment(value: unknown): number {
+  return Number.isInteger(value) ? Number(value) & 0x07 : 1;
+}
+
+function matrix(value: unknown): [number, number, number, number, number, number] {
+  if (!Array.isArray(value) || value.length !== 6 || value.some((part) => !Number.isFinite(part))) {
+    return [1, 0, 0, 1, 0, 0];
+  }
+  return value.map(Number) as [number, number, number, number, number, number];
+}
+
+function multiply(
+  parent: [number, number, number, number, number, number],
+  child: [number, number, number, number, number, number],
+): [number, number, number, number, number, number] {
+  return [
+    parent[0] * child[0] + parent[2] * child[1],
+    parent[1] * child[0] + parent[3] * child[1],
+    parent[0] * child[2] + parent[2] * child[3],
+    parent[1] * child[2] + parent[3] * child[3],
+    parent[0] * child[4] + parent[2] * child[5] + parent[4],
+    parent[1] * child[4] + parent[3] * child[5] + parent[5],
+  ];
+}

package/src/gpu/previewTransformTextureLayout.ts

@@ -0,0 +1,12 @@
+export function packPreviewTransformsForTexture(transforms: Float32Array, width: number): Float32Array {
+  if (!Number.isInteger(width) || width < 1 || transforms.length !== width * 8) {
+    throw new Error(`invalid preview transform buffer ${transforms.length} for width ${width}`);
+  }
+  const packed = new Float32Array(transforms.length);
+  for (let slot = 0; slot < width; slot += 1) {
+    const source = slot * 8;
+    packed.set(transforms.subarray(source, source + 4), slot * 4);
+    packed.set(transforms.subarray(source + 4, source + 8), (width + slot) * 4);
+  }
+  return packed;
+}