yoga-layout 3.2.1

Clean-room public code sample — generation instructions

Write a brand-new, minimal, self-contained code sample in this clean-room directory.
Do not copy, paraphrase, or reference any existing project source. Work only from this spec.

A csx.json manifest scaffold already exists. Do not recreate it from memory. Preserve its case.goal, packages and symbols; fill its empty case.contract with exact assertions and correct its environment, commands and verifierAdapter for the files you generate.

Goal: verify pkg:npm/yoga-layout@3.2.1
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/yoga-layout@3.2.1

Rules:
  - One focused purpose; the smallest project that proves the goal.
  - Include a contract test (test/contract.*) that runs OFFLINE and exits 0 exactly when the goal behavior works.
  - Pin every dependency with a lockfile so resolution is reproducible.
  - No secrets, credentials, or tokens. No real URLs (only example.com or localhost). No absolute paths.
  - No personal names, emails, company names, or project identifiers of any kind.
  - No binaries and no generated output (node_modules, dist, target, venv, .git, .env).
  - Keep it under 200 files and 256KB packed.

{"case":{"caseId":"case:sha256:f756da0bc140a815c587df26bbc43b28959f15ad8bce69a6fba2440d1d736ffb","contract":["setGap with Gutter.Column separates adjacent flex items horizontally in row layout","setFlexWrap with Wrap.Wrap breaks overflowing items onto a new line spaced by Gutter.Row","setJustifyContent with Justify.SpaceBetween distributes extra main-axis space between child nodes","setAlignItems and setAlignSelf position children along the cross-axis","setPositionType with PositionType.Absolute positions nodes independently without affecting sibling flex flow"],"goal":"verify pkg:npm/yoga-layout@3.2.1","kind":"HOW","packages":["pkg:npm/yoga-layout@3.2.1"],"schemaVersion":1},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","distro":"ubuntu","ecosystem":"npm","libc":"glibc","libcVersion":"2.39","os":"linux","osVersionBucket":"24","packageManager":"npm","schemaVersion":1},"license":"MIT-0","packages":["pkg:npm/yoga-layout@3.2.1"],"schemaVersion":1,"subject":"pkg:npm/yoga-layout@3.2.1","verifierAdapter":"node-typescript@1"}

{
  "name": "sample-yoga-layout-flexbox",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-yoga-layout-flexbox",
      "version": "1.0.0",
      "dependencies": {
        "yoga-layout": "3.2.1"
      }
    },
    "node_modules/yoga-layout": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/yoga-layout/-/yoga-layout-3.2.1.tgz",
      "integrity": "sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==",
      "license": "MIT"
    }
  }
}

{
  "name": "sample-yoga-layout-flexbox",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "description": "Clean-room verification of yoga-layout flexbox features",
  "main": "src/index.js",
  "dependencies": {
    "yoga-layout": "3.2.1"
  }
}

{
  "schemaVersion": 1,
  "goal": "verify pkg:npm/yoga-layout@3.2.1",
  "kind": "HOW",
  "packages": [
    "pkg:npm/yoga-layout@3.2.1"
  ]
}

import Yoga, {
  Align,
  Edge,
  FlexDirection,
  Gutter,
  Justify,
  PositionType,
  Wrap
} from 'yoga-layout';

/**
 * Creates a flex container Yoga node with specified styling options.
 * @param {Object} options - Configuration options for the container.
 * @returns {import('yoga-layout').Node} The configured Yoga node.
 */
export function createFlexContainer(options = {}) {
  const node = Yoga.Node.create();
  if (options.width !== undefined) node.setWidth(options.width);
  if (options.height !== undefined) node.setHeight(options.height);
  if (options.direction !== undefined) node.setFlexDirection(options.direction);
  if (options.wrap !== undefined) node.setFlexWrap(options.wrap);
  if (options.justify !== undefined) node.setJustifyContent(options.justify);
  if (options.alignItems !== undefined) node.setAlignItems(options.alignItems);
  if (options.gapCol !== undefined) node.setGap(Gutter.Column, options.gapCol);
  if (options.gapRow !== undefined) node.setGap(Gutter.Row, options.gapRow);
  if (options.gapAll !== undefined) node.setGap(Gutter.All, options.gapAll);
  return node;
}

/**
 * Creates a flex item Yoga node with specified styling and positioning options.
 * @param {Object} options - Configuration options for the item.
 * @returns {import('yoga-layout').Node} The configured Yoga node.
 */
export function createFlexItem(options = {}) {
  const node = Yoga.Node.create();
  if (options.width !== undefined) node.setWidth(options.width);
  if (options.height !== undefined) node.setHeight(options.height);
  if (options.alignSelf !== undefined) node.setAlignSelf(options.alignSelf);
  if (options.positionType !== undefined) node.setPositionType(options.positionType);
  if (options.top !== undefined) node.setPosition(Edge.Top, options.top);
  if (options.left !== undefined) node.setPosition(Edge.Left, options.left);
  if (options.right !== undefined) node.setPosition(Edge.Right, options.right);
  if (options.bottom !== undefined) node.setPosition(Edge.Bottom, options.bottom);
  if (options.flexGrow !== undefined) node.setFlexGrow(options.flexGrow);
  if (options.flexShrink !== undefined) node.setFlexShrink(options.flexShrink);
  return node;
}

/**
 * Computes layout for a Yoga node tree.
 * @param {import('yoga-layout').Node} root - Root Yoga node.
 * @param {number} [width] - Available container width.
 * @param {number} [height] - Available container height.
 */
export function computeLayout(root, width, height) {
  root.calculateLayout(width, height);
}

export {
  Yoga,
  Align,
  Edge,
  FlexDirection,
  Gutter,
  Justify,
  PositionType,
  Wrap
};

import assert from 'node:assert/strict';
import {
  FlexDirection,
  Gutter,
  Justify,
  Align,
  PositionType,
  Wrap,
  createFlexContainer,
  createFlexItem,
  computeLayout
} from '../src/index.js';

// 1. setGap with Gutter.Column separates adjacent flex items horizontally in row layout
{
  const container = createFlexContainer({
    width: 200,
    height: 100,
    direction: FlexDirection.Row,
    gapCol: 20
  });
  const item1 = createFlexItem({ width: 50, height: 50 });
  const item2 = createFlexItem({ width: 50, height: 50 });
  container.insertChild(item1, 0);
  container.insertChild(item2, 1);
  computeLayout(container, 200, 100);

  assert.equal(item1.getComputedLeft(), 0, 'First item should start at x=0');
  assert.equal(item1.getComputedWidth(), 50, 'First item width should be 50');
  assert.equal(item2.getComputedLeft(), 70, 'Second item should be placed after 50px item + 20px column gap');
  assert.equal(item2.getComputedWidth(), 50, 'Second item width should be 50');
  container.freeRecursive();
}

// 2. setFlexWrap with Wrap.Wrap breaks overflowing items onto a new line spaced by Gutter.Row
{
  const container = createFlexContainer({
    width: 100,
    height: 200,
    direction: FlexDirection.Row,
    wrap: Wrap.Wrap,
    gapCol: 10,
    gapRow: 15
  });
  const item1 = createFlexItem({ width: 60, height: 30 });
  const item2 = createFlexItem({ width: 60, height: 30 });
  container.insertChild(item1, 0);
  container.insertChild(item2, 1);
  computeLayout(container, 100, 200);

  assert.equal(item1.getComputedLeft(), 0, 'Item 1 should be at left 0');
  assert.equal(item1.getComputedTop(), 0, 'Item 1 should be at top 0');
  assert.equal(item2.getComputedLeft(), 0, 'Item 2 should wrap to new line at left 0');
  assert.equal(item2.getComputedTop(), 45, 'Item 2 top should be item 1 height (30) + row gap (15)');
  container.freeRecursive();
}

// 3. setJustifyContent with Justify.SpaceBetween distributes extra main-axis space between child nodes
{
  const container = createFlexContainer({
    width: 300,
    height: 100,
    direction: FlexDirection.Row,
    justify: Justify.SpaceBetween
  });
  const item1 = createFlexItem({ width: 60, height: 50 });
  const item2 = createFlexItem({ width: 60, height: 50 });
  const item3 = createFlexItem({ width: 60, height: 50 });
  container.insertChild(item1, 0);
  container.insertChild(item2, 1);
  container.insertChild(item3, 2);
  computeLayout(container, 300, 100);

  assert.equal(item1.getComputedLeft(), 0, 'Item 1 should be at left 0');
  assert.equal(item2.getComputedLeft(), 120, 'Item 2 should be at left 120 (60 + 60)');
  assert.equal(item3.getComputedLeft(), 240, 'Item 3 should be at left 240 (120 + 60 + 60)');
  container.freeRecursive();
}

// 4. setAlignItems and setAlignSelf position children along the cross-axis
{
  const container = createFlexContainer({
    width: 200,
    height: 100,
    direction: FlexDirection.Row,
    alignItems: Align.Center
  });
  const item1 = createFlexItem({ width: 50, height: 40 });
  const item2 = createFlexItem({ width: 50, height: 40, alignSelf: Align.FlexEnd });
  container.insertChild(item1, 0);
  container.insertChild(item2, 1);
  computeLayout(container, 200, 100);

  assert.equal(item1.getComputedTop(), 30, 'Item 1 should be centered vertically: (100 - 40) / 2 = 30');
  assert.equal(item2.getComputedTop(), 60, 'Item 2 should align to flex end: 100 - 40 = 60');
  container.freeRecursive();
}

// 5. setPositionType with PositionType.Absolute positions nodes independently without affecting sibling flex flow
{
  const container = createFlexContainer({
    width: 200,
    height: 100,
    direction: FlexDirection.Row
  });
  const item1 = createFlexItem({ width: 50, height: 50 });
  const absItem = createFlexItem({
    width: 30,
    height: 30,
    positionType: PositionType.Absolute,
    right: 10,
    bottom: 10
  });
  const item2 = createFlexItem({ width: 50, height: 50 });
  container.insertChild(item1, 0);
  container.insertChild(absItem, 1);
  container.insertChild(item2, 2);
  computeLayout(container, 200, 100);

  assert.equal(item1.getComputedLeft(), 0, 'In-flow item 1 at left 0');
  assert.equal(item2.getComputedLeft(), 50, 'In-flow item 2 directly follows item 1 at left 50');
  assert.equal(absItem.getComputedLeft(), 160, 'Absolute item right 10 means left = 200 - 10 - 30 = 160');
  assert.equal(absItem.getComputedTop(), 60, 'Absolute item bottom 10 means top = 100 - 10 - 30 = 60');
  container.freeRecursive();
}

console.log('All contract assertions for pkg:npm/yoga-layout@3.2.1 passed.');