@samirdamle/calipers 0.0.0-stage → 0.1.0

package/dist/rect.js

@@ -0,0 +1,147 @@
+// src/internal/dom.ts
+function isElement(v) {
+  return typeof Element !== "undefined" && v instanceof Element;
+}
+function px(value) {
+  const n = parseFloat(value);
+  return Number.isFinite(n) ? n : 0;
+}
+
+// src/rect/index.ts
+function rectOf(target, options = {}) {
+  const { box = "border", space = "viewport" } = options;
+  const t = classify(target);
+  switch (t.kind) {
+    case "rect":
+      return { ...t.rect };
+    case "viewport":
+      return moveSpace(
+        {
+          x: 0,
+          y: 0,
+          width: window.innerWidth,
+          height: window.innerHeight
+        },
+        "viewport",
+        space
+      );
+    case "element":
+      return elementRect(t.el, box, space);
+  }
+}
+function classify(target) {
+  if (target === "viewport" || target === window) return { kind: "viewport" };
+  if (typeof target === "string") {
+    const el = document.querySelector(target);
+    if (!el)
+      throw new Error(`calipers: no element matches selector "${target}"`);
+    return { kind: "element", el };
+  }
+  if (isElement(target)) return { kind: "element", el: target };
+  if (isRectLike(target)) return { kind: "rect", rect: target };
+  if (isPointLike(target))
+    return {
+      kind: "rect",
+      rect: { x: target.x, y: target.y, width: 0, height: 0 }
+    };
+  const first = target[0];
+  if (first == null)
+    throw new Error("calipers: empty list has no measurable to resolve");
+  return classify(first);
+}
+function isPointLike(v) {
+  return typeof v === "object" && v !== null && typeof v.x === "number" && typeof v.y === "number" && typeof v.width !== "number";
+}
+function isRectLike(v) {
+  return typeof v === "object" && v !== null && typeof v.x === "number" && typeof v.y === "number" && typeof v.width === "number" && typeof v.height === "number";
+}
+function isSVGGraphics(el) {
+  return typeof SVGGraphicsElement !== "undefined" && el instanceof SVGGraphicsElement;
+}
+function elementRect(el, box, space) {
+  return isSVGGraphics(el) ? svgRect(el, box, space) : htmlRect(el, box, space);
+}
+function htmlRect(el, box, space) {
+  if (box === "visual") {
+    const r = el.getBoundingClientRect();
+    return moveSpace(
+      { x: r.x, y: r.y, width: r.width, height: r.height },
+      "viewport",
+      space
+    );
+  }
+  const border = layoutBorderBox(el);
+  const cs = getComputedStyle(el);
+  let rect;
+  if (box === "content") {
+    const bl = px(cs.borderLeftWidth);
+    const br = px(cs.borderRightWidth);
+    const bt = px(cs.borderTopWidth);
+    const bb = px(cs.borderBottomWidth);
+    const pl = px(cs.paddingLeft);
+    const pr = px(cs.paddingRight);
+    const pt = px(cs.paddingTop);
+    const pb = px(cs.paddingBottom);
+    rect = {
+      x: border.x + bl + pl,
+      y: border.y + bt + pt,
+      width: Math.max(0, border.width - bl - br - pl - pr),
+      height: Math.max(0, border.height - bt - bb - pt - pb)
+    };
+  } else if (box === "margin") {
+    const ml = px(cs.marginLeft);
+    const mr = px(cs.marginRight);
+    const mt = px(cs.marginTop);
+    const mb = px(cs.marginBottom);
+    rect = {
+      x: border.x - ml,
+      y: border.y - mt,
+      width: border.width + ml + mr,
+      height: border.height + mt + mb
+    };
+  } else {
+    rect = border;
+  }
+  return moveSpace(rect, "document", space);
+}
+function svgRect(el, box, space) {
+  if (box === "bbox") {
+    const b = el.getBBox();
+    return { x: b.x, y: b.y, width: b.width, height: b.height };
+  }
+  const r = el.getBoundingClientRect();
+  return moveSpace(
+    { x: r.x, y: r.y, width: r.width, height: r.height },
+    "viewport",
+    space
+  );
+}
+function layoutBorderBox(el) {
+  let x = 0;
+  let y = 0;
+  let node = el;
+  const fixed = getComputedStyle(el).position === "fixed";
+  while (node) {
+    x += node.offsetLeft;
+    y += node.offsetTop;
+    node = node.offsetParent;
+  }
+  if (fixed) {
+    x += window.scrollX;
+    y += window.scrollY;
+  }
+  return { x, y, width: el.offsetWidth, height: el.offsetHeight };
+}
+function moveSpace(rect, from, to) {
+  if (from === to) return rect;
+  const dx = from === "viewport" ? window.scrollX : -window.scrollX;
+  const dy = from === "viewport" ? window.scrollY : -window.scrollY;
+  return {
+    x: rect.x + dx,
+    y: rect.y + dy,
+    width: rect.width,
+    height: rect.height
+  };
+}
+
+export { rectOf };

package/dist/types-PJD4F9tg.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Shared core types for calipers.
+ * See docs/plans/calipers-plan.md §4–§6.
+ */
+/**
+ * A 2D point. In `Anchor` position the coordinates are fractions (0–1) of the
+ * rect; everywhere else they are absolute coordinates in the active space.
+ */
+interface Point {
+    x: number;
+    y: number;
+}
+/** A normalized rectangle in a named coordinate space. */
+interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * Which box of an element is measured.
+ * - `visual` includes CSS transforms (what the user actually sees).
+ * - `bbox` is for SVG elements: `getBBox()` in local user units, untransformed.
+ */
+type Box = 'content' | 'border' | 'margin' | 'visual' | 'bbox';
+/** The coordinate space the numbers live in. */
+type Space = 'viewport' | 'document';
+/**
+ * A per-axis gap in px. A single number applies to both axes;
+ * `[x, y]` / `{ x, y }` set each axis separately. Negative values overlap.
+ */
+type Gap = number | readonly [number, number] | {
+    x: number;
+    y: number;
+};
+/** Anything the library can measure or place relative to. A `Point` resolves to a zero-size rect at that point. */
+type Measurable = string | Element | ArrayLike<Element | string | Rect> | Window | 'viewport' | Point | Rect;
+/**
+ * The 13 classic anchor codes — sugar over fractional points
+ * (e.g. `tl` ≡ `{ x: 0, y: 0 }`, `cc` ≡ `{ x: 0.5, y: 0.5 }`).
+ */
+type AnchorCode = 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br' | 't' | 'b' | 'l' | 'r';
+/**
+ * An anchor resolves to exactly one point of a rect.
+ * `{ x, y }` / `[x, y]` are fractions (0–1) of the rect's width/height.
+ */
+type Anchor = AnchorCode | {
+    x: number;
+    y: number;
+} | [number, number] | ((rect: Rect) => Point);
+
+export type { Anchor as A, Box as B, Gap as G, Measurable as M, Point as P, Rect as R, Space as S, AnchorCode as a };

package/package.json

@@ -1,6 +1,85 @@
 {
-  "name": "@samirdamle/calipers",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"author": {
+		"name": "Samir Damle",
+		"url": "https://github.com/samirdamle"
+	},
+	"description": "Tiny, dependency-free geometry toolkit for the web: measure, align, place, and design with HTML and SVG elements.",
+	"devDependencies": {
+		"@arethetypeswrong/cli": "^0.18.2",
+		"@biomejs/biome": "^2.2.0",
+		"esbuild": "^0.25.0",
+		"happy-dom": "^18.0.1",
+		"tsup": "^8.5.0",
+		"typescript": "~5.9.2",
+		"vitest": "^3.2.4"
+	},
+	"engines": {
+		"node": ">=20"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./align": {
+			"types": "./dist/align.d.ts",
+			"default": "./dist/align.js"
+		},
+		"./measure": {
+			"types": "./dist/measure.d.ts",
+			"default": "./dist/measure.js"
+		},
+		"./package.json": "./package.json",
+		"./place": {
+			"types": "./dist/place.d.ts",
+			"default": "./dist/place.js"
+		},
+		"./rect": {
+			"types": "./dist/rect.d.ts",
+			"default": "./dist/rect.js"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"keywords": [
+		"geometry",
+		"rect",
+		"position",
+		"align",
+		"measure",
+		"svg",
+		"html",
+		"util",
+		"layout",
+		"viewport",
+		"responsive"
+	],
+	"license": "MIT",
+	"main": "./dist/index.js",
+	"name": "@samirdamle/calipers",
+	"packageManager": "pnpm@12.8.1",
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/samirdamle/calipers.git"
+	},
+	"scripts": {
+		"attw": "attw --pack --profile esm-only",
+		"build": "tsup",
+		"ci": "pnpm lint && pnpm typecheck && pnpm build && pnpm test && pnpm size",
+		"demo": "pnpm build && node scripts/serve.mjs .",
+		"lint": "biome check .",
+		"lint:fix": "biome check --write .",
+		"prepublishOnly": "pnpm build",
+		"size": "node scripts/check-size.mjs",
+		"test": "vitest run",
+		"typecheck": "tsc --noEmit"
+	},
+	"sideEffects": false,
+	"type": "module",
+	"types": "./dist/index.d.ts",
+	"version": "0.1.0"
+}