Function formatReferenceFrame

package/src/components/design-mode/output.ts:33–55

* Generate a reference frame section with viewport, content area, and * pixel-to-CSS translation formulas. Included in all non-compact output.

(layout: PageLayout)

 * pixel-to-CSS translation formulas. Included in all non-compact output.
 */
function formatReferenceFrame(layout: PageLayout): string {
  const { viewport, contentArea } = layout;
  let out = "### Reference Frame\n";
  out += `- Viewport: \`${viewport.width}×${viewport.height}px\`\n`;

  if (contentArea) {
    const ca = contentArea;
    out += `- Content area: \`${ca.width}px\` wide, left edge at \`x=${ca.left}\`, right at \`x=${ca.right}\` (\`${ca.selector}\`)\n`;
    out += `- Pixel → CSS translation:\n`;
    out += `  - **Horizontal position in container**: \`element.x - ${ca.left}\` → use as \`margin-left\` or \`left\`\n`;
    out += `  - **Width as % of container**: \`element.width / ${ca.width} × 100\` → use as \`width: X%\`\n`;
    out += `  - **Vertical gap between elements**: \`nextElement.y - (prevElement.y + prevElement.height)\` → use as \`margin-top\` or \`gap\`\n`;
    out += `  - **Centered**: if \`|element.centerX - ${ca.centerX}| < 20px\` → use \`margin-inline: auto\`\n`;
  } else {
    out += `- No distinct content container — elements positioned relative to full viewport\n`;
    out += `- Pixel → CSS translation:\n`;
    out += `  - **Width as % of viewport**: \`element.width / ${viewport.width} × 100\` → use as \`width: X%\`\n`;
    out += `  - **Centered**: if \`|(element.x + element.width/2) - ${Math.round(viewport.width / 2)}| < 20px\` → use \`margin-inline: auto\`\n`;
  }

  out += "\n";
  return out;
}

/**
 * Format parent layout context for an element.