CSS Box Model

import { getBox, createBox, withScroll, calculateBox, offset, getRect, expand, shrink } from "css-box-model";

const { getBox, createBox, withScroll, calculateBox, offset, getRect, expand, shrink } = require("css-box-model");

import type { BoxModel, Rect, Position, Spacing, AnyRectType, CreateBoxArgs } from "css-box-model";

import { getBox, withScroll } from "css-box-model";

// Get box model for a DOM element
const element = document.getElementById("my-element");
const boxModel = getBox(element);

// Access different box types
console.log(boxModel.contentBox);   // Content area
console.log(boxModel.paddingBox);   // Content + padding
console.log(boxModel.borderBox);    // Content + padding + border
console.log(boxModel.marginBox);    // Content + padding + border + margin

// Get page-relative positioning (with scroll offset)
const pageRelativeBox = withScroll(boxModel);

/**
 * Get complete box model for a DOM element
 * @param el - DOM element to analyze
 * @returns Complete box model with all box types and spacing
 */
function getBox(el: Element): BoxModel;

/**
 * Calculate box model from borderBox and styles without DOM queries
 * @param borderBox - Border box dimensions (from getBoundingClientRect)
 * @param styles - Computed styles (from getComputedStyle)
 * @returns Complete box model
 */
function calculateBox(
  borderBox: AnyRectType,
  styles: CSSStyleDeclaration
): BoxModel;

/**
 * Create box model from provided dimensions and spacing
 * @param boxArgs - Box dimensions and optional spacing values
 * @returns Complete box model
 */
function createBox(boxArgs: CreateBoxArgs): BoxModel;

interface CreateBoxArgs {
  borderBox: AnyRectType;
  margin?: Spacing;
  border?: Spacing;
  padding?: Spacing;
}

/**
 * Apply scroll offset to box model for page-relative positioning
 * @param original - Original box model
 * @param scroll - Scroll offset (defaults to window scroll)
 * @returns Box model adjusted for scroll position
 */
function withScroll(
  original: BoxModel,
  scroll?: Position
): BoxModel;

/**
 * Apply position offset to box model
 * @param original - Original box model
 * @param change - Position change to apply
 * @returns Box model with applied offset
 */
function offset(original: BoxModel, change: Position): BoxModel;

/**
 * Convert any rect-like object to full Rect with calculated dimensions
 * @param spacing - Object with top, right, bottom, left properties
 * @returns Complete Rect with width, height, center, and position
 */
function getRect({ top, right, bottom, left }: Spacing): Rect;

/**
 * Expand spacing dimensions by adding to each side
 * @param target - Original spacing
 * @param expandBy - Amount to expand by on each side
 * @returns Expanded spacing
 */
function expand(target: Spacing, expandBy: Spacing): Spacing;

/**
 * Shrink spacing dimensions by subtracting from each side
 * @param target - Original spacing
 * @param shrinkBy - Amount to shrink by on each side
 * @returns Shrunk spacing
 */
function shrink(target: Spacing, shrinkBy: Spacing): Spacing;

interface Position {
  x: number;
  y: number;
}

interface Rect {
  // ClientRect compatibility
  top: number;
  right: number;
  bottom: number;
  left: number;
  width: number;
  height: number;
  // DOMRect compatibility
  x: number;
  y: number;
  // Enhanced features
  center: Position;
}

interface Spacing {
  top: number;
  right: number;
  bottom: number;
  left: number;
}

interface BoxModel {
  // Box model layers
  marginBox: Rect;   // content + padding + border + margin
  borderBox: Rect;   // content + padding + border
  paddingBox: Rect;  // content + padding
  contentBox: Rect;  // content only
  // Spacing values
  border: Spacing;
  padding: Spacing;
  margin: Spacing;
}

type AnyRectType = ClientRect | DOMRect | Rect | Spacing;

interface CreateBoxArgs {
  borderBox: AnyRectType;
  margin?: Spacing;
  border?: Spacing;
  padding?: Spacing;
}

import { getBox } from "css-box-model";

const element = document.querySelector(".my-element");
const box = getBox(element);

// Access different box areas
console.log("Content dimensions:", box.contentBox.width, box.contentBox.height);
console.log("Total element size:", box.marginBox.width, box.marginBox.height);
console.log("Element position:", box.borderBox.x, box.borderBox.y);
console.log("Element center:", box.borderBox.center.x, box.borderBox.center.y);

// Access spacing values
console.log("Padding:", box.padding);
console.log("Margin:", box.margin);
console.log("Border:", box.border);

import { getBox, withScroll } from "css-box-model";

const element = document.querySelector(".floating-element");
const viewportBox = getBox(element);
const pageBox = withScroll(viewportBox);

console.log("Position relative to viewport:", viewportBox.borderBox.x, viewportBox.borderBox.y);
console.log("Position relative to page:", pageBox.borderBox.x, pageBox.borderBox.y);

// Custom scroll offset
const customScrollBox = withScroll(viewportBox, { x: 100, y: 200 });

import { createBox, getRect } from "css-box-model";

// Create a box model from dimensions
const borderBox = { top: 10, left: 20, bottom: 60, right: 120 };
const padding = { top: 5, right: 10, bottom: 5, left: 10 };
const margin = { top: 10, right: 15, bottom: 10, left: 15 };

const box = createBox({
  borderBox,
  padding,
  margin
});

console.log("Created box:", box);

// Convert spacing to full rect
const rect = getRect(borderBox);
console.log("Full rect:", rect);
// Output includes width: 100, height: 50, center: { x: 70, y: 35 }

import { calculateBox } from "css-box-model";

// If you already have getBoundingClientRect and getComputedStyle results
const element = document.querySelector(".performance-critical");
const borderBox = element.getBoundingClientRect();
const styles = window.getComputedStyle(element);

// Skip redundant DOM queries
const box = calculateBox(borderBox, styles);

import { expand, shrink } from "css-box-model";

const originalSpacing = { top: 10, right: 20, bottom: 10, left: 20 };

// Expand the spacing
const expanded = expand(originalSpacing, { top: 5, right: 5, bottom: 5, left: 5 });
console.log(expanded); // { top: 5, right: 25, bottom: 15, left: 15 }

// Shrink the spacing
const shrunk = shrink(originalSpacing, { top: 2, right: 2, bottom: 2, left: 2 });
console.log(shrunk); // { top: 12, right: 18, bottom: 8, left: 22 }