@smallpen/local-package 0.1.0-alpha.11 → 0.1.0-alpha.12

package/src/index.mjs

@@ -18,6 +18,7 @@ export {
   renderProjection,
 } from "./render.mjs";
 export { renderAppProjection } from "./render-shared.mjs";
+export { inspectProjection } from "./layout-inspection.mjs";
 export {
   decodeFigmaClipboard,
   importDraft,

package/src/layout-inspection.mjs

@@ -0,0 +1,124 @@
+import { canonicalJSON, createSemanticTree } from "@smallpen/core";
+import { createHash } from "node:crypto";
+import { renderAppProjection } from "./render-shared.mjs";
+
+const hash = (value) =>
+  createHash("sha256").update(canonicalJSON(value)).digest("hex");
+const box = (value) =>
+  value &&
+  ["x", "y", "width", "height"].every((key) => Number.isFinite(value[key]))
+    ? Object.fromEntries(
+        ["x", "y", "width", "height"].map((key) => [key, value[key]]),
+      )
+    : null;
+
+// Specifications, diagnostics, wireframes and raster evidence consume this
+// result. Authored constraints stay in projection; only native results are
+// allowed to supply actual geometry. In particular, missing measurements
+// must never silently fall back to the projection's seed rectangles.
+export async function inspectProjection(product, projection, options = {}) {
+  const root = projection.nodes[projection.rootId];
+  let render, failure;
+  try {
+    render = await renderAppProjection(product, projection, {
+      ...options,
+      cropNodeId: options.crop
+        ? undefined
+        : (options.nodeId ?? projection.rootId),
+      measureOnly: !options.raster,
+    });
+  } catch (error) {
+    if (
+      options.raster ||
+      ![
+        "shared_renderer_unavailable",
+        "shared_render_failed",
+        "layout_not_settled",
+        "font_resource_unavailable",
+        "preview_fallback_not_renderable",
+      ].includes(error.code)
+    )
+      throw error;
+    failure = { code: error.code, message: error.message };
+  }
+  const origin = {
+    x: (root?.x ?? 0) + (options.crop?.x ?? 0),
+    y: (root?.y ?? 0) + (options.crop?.y ?? 0),
+  };
+  const translate = (value) => {
+    const actual = box(value);
+    return actual
+      ? { ...actual, x: actual.x + origin.x, y: actual.y + origin.y }
+      : null;
+  };
+  const tree = createSemanticTree(product, projection, {
+    selection: options.selection,
+  });
+  const ids = [];
+  const collect = (node) => {
+    ids.push(node.id);
+    node.children.forEach(collect);
+  };
+  collect(tree.root);
+  const nodes = Object.fromEntries(
+    ids.map((id) => {
+      const bounds = translate(render?.bounds[id]);
+      return [
+        id,
+        {
+          status: bounds ? "resolved" : "partial",
+          bounds,
+          layoutBox: translate(render?.layoutBoxes[id]),
+          ...(bounds
+            ? {}
+            : { reason: failure?.code ?? "native_bounds_unavailable" }),
+        },
+      ];
+    }),
+  );
+  const update = (node, parentVisible = true) => {
+    node.bounds = nodes[node.id]?.bounds ?? null;
+    node.visible = parentVisible && node.visible;
+    nodes[node.id].visible = node.visible;
+    for (const child of node.children) update(child, node.visible);
+  };
+  update(tree.root);
+  const diagnostics = failure
+    ? [failure]
+    : (render?.diagnostics ?? []).filter(
+        (item) => item.code !== "layout_projection_partial",
+      );
+  const snapshot = {
+    status: Object.values(nodes).every((node) => node.status === "resolved")
+      ? "resolved"
+      : "partial",
+    renderer: render?.renderer ?? "app-wasm",
+    kernelHash: render?.kernelHash ?? null,
+    runtimeHash: render?.runtimeHash ?? null,
+    resourcesHash: render?.resourcesHash ?? null,
+    revision: product.revision,
+    ...(options.foundation
+      ? { foundationRevision: options.foundation.revision }
+      : {}),
+    libraries: (options.libraries ?? []).map((library) => ({
+      packageId: library.manifest.packageId,
+      revision: library.revision,
+    })),
+    selection: options.selection ?? {},
+    coordinateSpace: "page",
+    viewport: options.crop
+      ? { ...origin, width: options.crop.width, height: options.crop.height }
+      : (nodes[options.nodeId ?? projection.rootId]?.bounds ?? null),
+    nodes,
+    diagnostics,
+  };
+  snapshot.id = hash({
+    ...snapshot,
+    // Two theme/viewport/context selections must not share an identity merely
+    // because they happen to paint the same pixels.
+    packageId: product.manifest.packageId,
+    projection,
+  });
+  snapshot.hash = snapshot.id;
+  return { snapshot, tree, render };
+}

package/src/render-shared.mjs

@@ -15,7 +15,7 @@ async function loadRenderer() {
     const manifest = JSON.parse(
       await readFile(join(runtime, "manifest.json"), "utf8"),
     );
-    const [renderer, factory, wasmBytes] = await Promise.all([
+    const [renderer, factory, wasmBytes, rendererBytes, wrapperBytes] = await Promise.all([
       import(
         pathToFileURL(join(runtime, "renderer.mjs")).href +
           "?version=" +
@@ -27,10 +27,14 @@ async function loadRenderer() {
           manifest.wrapperHash
       ),
       readFile(join(runtime, "render-wasm.wasm")),
+      readFile(join(runtime, "renderer.mjs")),
+      readFile(join(runtime, "render-wasm.js")),
     ]);
     if (
       createHash("sha256").update(wasmBytes).digest("hex") !==
-      manifest.kernelHash
+      manifest.kernelHash ||
+      createHash("sha256").update(rendererBytes).digest("hex") !== manifest.rendererHash ||
+      createHash("sha256").update(wrapperBytes).digest("hex") !== manifest.wrapperHash
     )
       throw new Error(
         "Rendering runtime changed during initialization; retry after the build finishes",
@@ -60,6 +64,7 @@ async function loadRenderer() {
       fonts,
       families,
       kernelHash: createHash("sha256").update(wasmBytes).digest("hex"),
+      runtimeHash: createHash("sha256").update(rendererBytes).update(wrapperBytes).digest("hex"),
     };
   } catch (cause) {
     throw new SmallPenError(
@@ -85,6 +90,7 @@ async function resources(engine, product, options) {
         const fontId = `custom-${snapshot.runtime.fonts[family.id]}`;
         fontFamilies.push({
           fontId,
+          names: [family.family],
           variants: family.variants.map((variant) => ({
             id: `${variant.style}-${variant.weight}`,
             weight: String(variant.weight),
@@ -151,9 +157,8 @@ export async function renderAppProjection(product, projection, options = {}) {
     !Number.isFinite(height) ||
     width < 1 ||
     height < 1 ||
-    width > 8192 ||
-    height > 8192 ||
-    width * height > 32 * 1024 * 1024
+    (!options.measureOnly && !options.cropNodeId &&
+      (width > 8192 || height > 8192 || width * height > 32 * 1024 * 1024))
   )
     throw new SmallPenError(
       "render_size_exceeded",
@@ -223,6 +228,7 @@ export async function renderAppProjection(product, projection, options = {}) {
         nodes,
         nodeIds,
         rootId,
+        cropNodeId: options.cropNodeId ? nodeIds[options.cropNodeId] : undefined,
         scale,
         measureOnly: options.measureOnly === true,
         forExport: options.forExport === true,
@@ -323,10 +329,27 @@ export async function renderAppProjection(product, projection, options = {}) {
         ],
         renderer: "app-wasm",
         kernelHash: engine.kernelHash,
+        runtimeHash: engine.runtimeHash,
+        resourcesHash: createHash("sha256").update(JSON.stringify({
+          fonts: fontResources.fonts.map(face => ({
+            id: face.fontId, weight: face.weight, style: face.style,
+            hash: createHash("sha256").update(face.bytes).digest("hex"),
+          })).sort((a, b) => JSON.stringify(a).localeCompare(JSON.stringify(b))),
+          images: request.images.map(image => ({
+            id: image.id,
+            hash: createHash("sha256").update(image.svg ?? image.bytes).digest("hex"),
+          })).sort((a, b) => a.id.localeCompare(b.id)),
+        })).digest("hex"),
         renderHash: createHash("sha256").update(bytes).digest("hex"),
         geometry: result.geometry,
+        layoutBoxes: Object.fromEntries(Object.entries(result.geometry).map(([uuid, value]) => [sourceIds[uuid], value])),
         bounds,
         textMetrics,
+        fontRequests: described.fonts.filter(face => sourceIds[face.nodeId]).map(face => {
+          const names = assets.fontFamilies.find(family => family.fontId === face.fontId)?.names;
+          return { nodeId: sourceIds[face.nodeId], family: names?.[1] ?? names?.[0] ?? face.fontId,
+            fontId: face.fontId, weight: face.weight, style: face.style };
+        }),
       };
     } catch (error) {
       if (error instanceof SmallPenError) throw error;

package/src/render.mjs

@@ -1,10 +1,10 @@
 import {
-  createSemanticTree,
   projectDesignView,
   resolveDesignView,
   sha256Hex,
 } from "@smallpen/core";
 import { renderAppProjection } from "./render-shared.mjs";
+import { inspectProjection } from "./layout-inspection.mjs";
 
 // Rendering and measurement both use the App projector and Skia/WASM runtime.
 export const renderProjection = renderAppProjection;
@@ -38,13 +38,6 @@ export async function measureProjectionText(product, projection, options = {}) {
   return { items: result.textMetrics, diagnostics: result.diagnostics };
 }
 
-function updateBounds(node, bounds, origin) {
-  const actual = bounds[node.id];
-  if (actual)
-    node.bounds = { ...actual, x: actual.x + origin.x, y: actual.y + origin.y };
-  for (const child of node.children) updateBounds(child, bounds, origin);
-}
-
 function flattenRegions(node, scale, width, height, origin, result = []) {
   const left = Math.max(0, Math.min(width, (node.bounds.x - origin.x) * scale));
   const top = Math.max(0, Math.min(height, (node.bounds.y - origin.y) * scale));
@@ -71,23 +64,19 @@ function flattenRegions(node, scale, width, height, origin, result = []) {
 export async function createEvidence(product, options = {}) {
   const resolved = resolveDesignView(product, options);
   const projection = projectDesignView(product, resolved, options);
-  const render = await renderProjection(product, projection, options);
-  const semanticTree = createSemanticTree(product, projection, {
-    foundationRevision: options.foundation?.revision,
-    scenarioId: resolved.scenarioId,
-    selection: resolved.selection,
+  const inspection = await inspectProjection(product, projection, {
+    ...options, raster: true, selection: resolved.selection,
   });
-  const root = projection.nodes[projection.rootId];
-  const origin = {
-    x: root.x + (options.crop?.x ?? 0),
-    y: root.y + (options.crop?.y ?? 0),
-  };
-  updateBounds(semanticTree.root, render.bounds, origin);
+  const render = { ...inspection.render, diagnostics: inspection.snapshot.diagnostics };
+  const semanticTree = inspection.tree;
+  const origin = inspection.snapshot.viewport;
   return {
     projection,
     render,
     evidence: {
       diagnostics: render.diagnostics,
+      layout: inspection.snapshot,
+      snapshotId: inspection.snapshot.id,
       nodeRegions: flattenRegions(
         semanticTree.root,
         options.scale ?? 1,