# Box resolution
Resolve padding, percentages, and a constrained box with typed diagnostics.

## APIs demonstrated

- [LayoutDiagnostic](/reference/functions/layout-diagnostic/) from `@pibbl/core`
- [layoutDiagnostic](/reference/functions/layout-diagnostic/) from `@pibbl/core`
- [normalizeEdges](/reference/functions/normalize-edges/) from `@pibbl/core`
- [resolveBox](/reference/functions/resolve-box/) from `@pibbl/core`
- [resolveLength](/reference/functions/resolve-length/) from `@pibbl/core`
- [BoxStyle](/reference/types/layout/) from `@pibbl/core`
- [Constraints](/reference/types/layout/) from `@pibbl/core`
- [EdgeValues](/reference/types/layout/) from `@pibbl/core`
- [Edges](/reference/types/layout/) from `@pibbl/core`
- [LayoutBox](/reference/types/layout/) from `@pibbl/core`
- [LayoutDiagnosticContext](/reference/types/layout/) from `@pibbl/core`
- [LayoutDiagnosticInput](/reference/types/layout/) from `@pibbl/core`
- [Length](/reference/types/layout/) from `@pibbl/core`
- [Percentage](/reference/types/layout/) from `@pibbl/core`
- [ResolvedBoxStyle](/reference/types/layout/) from `@pibbl/core`
- [Size](/reference/types/layout/) from `@pibbl/core`

## Complete example

[Plain source](/minimal/layout/box-helpers.ts). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```ts
import {
  LayoutDiagnostic,
  layoutDiagnostic,
  normalizeEdges,
  resolveBox,
  resolveLength,
  type BoxStyle,
  type Constraints,
  type EdgeValues,
  type Edges,
  type LayoutBox,
  type LayoutDiagnosticContext,
  type LayoutDiagnosticInput,
  type Length,
  type Percentage,
  type ResolvedBoxStyle,
  type Size,
} from "@pibbl/core";

const percentage: Percentage = "50%";
const width: Length = percentage;
const edgeInput: EdgeValues = { top: 8, right: 12, bottom: 8, left: 12 };
const edges: Edges = normalizeEdges(edgeInput, "padding");
const constraints: Constraints = {
  minWidth: 0,
  maxWidth: 320,
  minHeight: 0,
  maxHeight: 220,
};
const style: BoxStyle = { width, height: 80, padding: edgeInput };
const context: LayoutDiagnosticContext = { component: "Badge", constraints };
const box: ResolvedBoxStyle = resolveBox(style, constraints, context);
const outer: LayoutBox = box.borderBox;
const inner: Size = box.contentBox;
const half = resolveLength(width, constraints.maxWidth, "width", context);
const input: LayoutDiagnosticInput = {
  ...context,
  property: "width",
  value: width,
  reason: "requires a definite containing width",
};
const diagnostic: LayoutDiagnostic = layoutDiagnostic(input);
const output = document.createElement("pre");
output.textContent = JSON.stringify(
  { edges, outer, inner, half, diagnostic: diagnostic.message },
  null,
  2,
);
document.body.append(output);

```

## Usage notes

- Displays resolved edges and box geometry in the document.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.