elements-kit 0.27.10 → 0.27.12

package/dist/ui/overlay/index.d.mts

@@ -7,6 +7,10 @@ type Axis = keyof ReadonlyBox;
 interface IDirection {
   readonly direction: "ltr" | "rtl";
 }
+interface Point {
+  x: number;
+  y: number;
+}
 interface ReadonlyBox {
   readonly x: number;
   readonly y: number;
@@ -27,6 +31,27 @@ declare class WindowBox implements ReadonlyBox, IDirection {
   get direction(): Direction;
 }
 declare const WINDOW_BOX: WindowBox;
+/**
+ * A box grown by a margin per side — the offset off an anchor, as CSS spells
+ * it. The sides default like the `margin` shorthand: one value is every side,
+ * two is block then inline, three is top/inline/bottom.
+ *
+ * Every field is assignable and reactive, and each also takes a signal — so
+ * the box or a side can be swapped, or driven. Reads through, so it tracks
+ * whatever the wrapped box tracks.
+ */
+declare class MarginBox implements ReadonlyBox {
+  box: MaybeReactive<ReadonlyBox>;
+  top: MaybeReactive<number>;
+  right: MaybeReactive<number>;
+  bottom: MaybeReactive<number>;
+  left: MaybeReactive<number>;
+  constructor(box: MaybeReactive<ReadonlyBox>, top?: MaybeReactive<number>, right?: MaybeReactive<number>, bottom?: MaybeReactive<number>, left?: MaybeReactive<number>);
+  get x(): number;
+  get y(): number;
+  get w(): number;
+  get h(): number;
+}
 declare class ElementBox implements ReadonlyBox {
   #private;
   constructor(el: MaybeReactive<Element>);
@@ -78,28 +103,31 @@ type NoInline = {
  * both edges of one axis.
  */
 type Boundary = (BlockEdge & InlineEdge) | (BlockEdge & NoInline) | (NoBlock & InlineEdge);
-/** Where {@link Region.place} puts a box's top-left corner. */
-interface Placement {
-  readonly x: number;
-  readonly y: number;
+/** Horizontal origin keyword, as CSS spells it. */
+type OriginX = "left" | "center" | "right";
+/** The vertical one. */
+type OriginY = "top" | "center" | "bottom";
+/** Which point of a box lands on its position. A `transform-origin`. */
+interface Origin {
+  readonly x: OriginX;
+  readonly y: OriginY;
+}
+/** Has an origin. */
+interface IOrigin {
+  readonly origin: Origin;
 }
 /**
- * Somewhere a box may go: a semi-bounded plane, each axis pinned or free.
- * `place` is the only operation: it never writes, so the caller picks which
- * channels to take — `box.x = region.place(box).x` moves one axis and leaves
- * the rest. Size is never returned: the box is placed as given, so one larger
- * than its room overflows rather than shrinks, as CSS does.
+ * Somewhere a box may go: each axis pinned or free. `place` never writes, so
+ * the caller takes the channels it wants, and never returns a size, so a box
+ * larger than its room overflows rather than shrinks, as CSS does.
  *
- * The four insets read back as CSS would want them: the pinned edge's
- * coordinate, `null` for the other three (`auto`). A centred axis is not an
- * inset — both its edges are `null`.
+ * `x`/`y` are the pin lines, `origin` the box point landing on them — the
+ * pair places a box without measuring it. A free axis has no pin (`null`).
  */
-interface Region {
-  readonly left: number | null;
-  readonly right: number | null;
-  readonly top: number | null;
-  readonly bottom: number | null;
-  place(box: ReadonlyBox): Placement;
+interface Region extends IOrigin {
+  readonly x: number | null;
+  readonly y: number | null;
+  place(box: ReadonlyBox): Point;
 }
 /**
  * A {@link Region} driven by writes — for gestures, where the box grows away
@@ -109,6 +137,11 @@ interface Region {
 declare class MutableRegion implements Region {
   #private;
   constructor(boundary: Boundary);
+  /** The pin line on each axis — `null` where the axis is free. */
+  get x(): number | null;
+  get y(): number | null;
+  /** The box point that lands on ({@link x}, {@link y}). */
+  get origin(): Origin;
   get left(): number | null;
   get right(): number | null;
   get top(): number | null;
@@ -117,7 +150,7 @@ declare class MutableRegion implements Region {
   set right(v: number | null);
   set top(v: number | null);
   set bottom(v: number | null);
-  place(box: ReadonlyBox): Placement;
+  place(box: ReadonlyBox): Point;
 }
 //#endregion
 //#region src/ui/overlay/anchor.d.ts
@@ -162,39 +195,29 @@ type Unordered<A extends string, B extends string> = `${A} ${B}` | `${B} ${A}`;
  */
 type PositionAreaValue = AreaKeyword | Unordered<BlockKeyword, InlineKeyword> | Unordered<BlockKeyword, AmbiguousKeyword> | Unordered<InlineKeyword, AmbiguousKeyword> | `${AmbiguousKeyword} ${AmbiguousKeyword}`;
 /**
- * The reactive `position-area` property: the region of the viewport an
- * overlay anchored to `anchor` may occupy, with the region's default
- * self-alignment as {@link Region.place} — outward regions hug the anchor,
- * spans go flush against its far edge, center is `anchor-center`. Nothing is
- * written; the caller takes what it wants from `place`:
+ * The reactive `position-area` property: which of the anchor's edges a box
+ * pins to, and the self-alignment that follows — outward regions hug the
+ * anchor's near edge, spans its far edge, center is `anchor-center`. Not a
+ * box: a pin per axis, with no geometry of its own.
  *
- *   const area = new PositionArea(a, "top span-left");
- *   effect(() => { overlay.x = area.place(overlay).x; });
+ * Parsed once, at construction; the pins read the anchor on every access, so
+ * reading them in an `effect` tracks it.
  *
- * The value is parsed once, at construction; the geometry reads the anchor
- * and window on every access, so reading it inside an `effect` tracks both.
- *
- * Bounded by the window. A tighter bound (a `Constraint`, a scroll container)
- * is an intersection with the region, so it composes afterwards rather than
- * being a parameter here.
- *
- * There is no gap parameter, for the same reason CSS has none: the offset off
- * the anchor is the overlay's own `margin`.
+ * No gap parameter, for the same reason CSS has none: the offset off the
+ * anchor is the overlay's own `margin`.
  */
-declare class PositionArea implements Region, ReadonlyBox {
+declare class PositionArea implements Region {
   #private;
   readonly anchor: ReadonlyBox;
   constructor(anchor: ReadonlyBox, area: PositionAreaValue);
+  /** The pin lines — the viewport point {@link origin} lands on. */
   get x(): number;
   get y(): number;
-  get w(): number;
-  get h(): number;
-  get left(): number | null;
-  get right(): number | null;
-  get top(): number | null;
-  get bottom(): number | null;
+  /** The box point landing on ({@link x}, {@link y}). Two axes, not one
+   * side: a corner area pins a corner. */
+  get origin(): Origin;
   /** Every axis is pinned, so only the box's size is read. */
-  place(box: Pick<ReadonlyBox, "w" | "h">): Placement;
+  place(box: Pick<ReadonlyBox, "w" | "h">): Point;
 }
 //#endregion
 //#region src/ui/overlay/overlay.d.ts
@@ -224,10 +247,16 @@ declare class Displacement extends PartialBox {
   apply(): void;
   clear(): void;
 }
-declare class OverlayBox extends TransformableBox implements IDirection {
+declare class OverlayBox extends TransformableBox implements IDirection, IOrigin {
   #private;
   readonly element: HTMLElement;
   constructor(element: HTMLElement);
+  /** The box point that lands on (x, y), and the scale's origin. */
+  get origin(): Origin;
+  set origin({
+    x,
+    y
+  }: Origin);
   get w(): number;
   set w(value: number);
   get h(): number;
@@ -283,4 +312,4 @@ declare class Motion implements IMotion {
   abort(initial?: number): void;
 }
 //#endregion
-export { type Align, type Axis, type BlockSide, type Boundary, ElementBox, gestures_d_exports as Gestures, type IDirection, type IMotion, type InlineSide, type Inset, Motion, MutableRegion, OverlayBox, type PhysicalInset, type Pin, type Placement, PositionArea, type PositionAreaValue, type ReadonlyBox, type Region, WINDOW_BOX, WindowBox, anchor_length };
+export { type Align, type Axis, type BlockSide, type Boundary, ElementBox, gestures_d_exports as Gestures, type IDirection, type IMotion, type IOrigin, type InlineSide, type Inset, MarginBox, Motion, MutableRegion, type Origin, type OriginX, type OriginY, OverlayBox, type PhysicalInset, type Pin, PositionArea, type PositionAreaValue, type ReadonlyBox, type Region, WINDOW_BOX, WindowBox, anchor_length };

package/dist/ui/overlay/index.mjs

@@ -1,6 +1,6 @@
 import { t as __exportAll } from "../../chunk-CfYAbeIz.mjs";
 import { c as batch, u as effect, x as signal } from "../../lib-Dw0g-vex.mjs";
-import { reactive } from "../../signals/index.mjs";
+import { reactive, resolve } from "../../signals/index.mjs";
 import { t as scope } from "../../scope-B1kDu4YX.mjs";
 import { direction } from "../../utilities/direction.mjs";
 import { createElementRect } from "../../utilities/element-rect.mjs";
@@ -12,10 +12,20 @@ function placePinned(pin, n) {
 	if (pin.align === "end") return pin.at - n;
 	return pin.at - n / 2;
 }
-/** One axis of a {@link Region.place}: pinned, or `own` if the axis is free. */
+/** One axis of {@link Region.place}: pinned, or `own` if free. */
 function placeAxis(pin, own, n) {
 	return pin ? placePinned(pin, n) : own;
 }
+/** The box point a pin lands. Physical: direction is resolved before a pin
+* exists, so `left` is left in RTL. A free axis lands the near edge. */
+function originX(pin) {
+	if (!pin) return "left";
+	return pin.align === "start" ? "left" : pin.align === "end" ? "right" : "center";
+}
+function originY(pin) {
+	if (!pin) return "top";
+	return pin.align === "start" ? "top" : pin.align === "end" ? "bottom" : "center";
+}
 /** The inset a pin yields on one edge: its coordinate if it pins that edge. */
 function inset(pin, edge) {
 	return pin?.align === edge ? pin.at : null;
@@ -35,6 +45,20 @@ var MutableRegion = class {
 		if (top !== void 0) this.top = top;
 		if (bottom !== void 0) this.bottom = bottom;
 	}
+	/** The pin line on each axis — `null` where the axis is free. */
+	get x() {
+		return this.#x()?.at ?? null;
+	}
+	get y() {
+		return this.#y()?.at ?? null;
+	}
+	/** The box point that lands on ({@link x}, {@link y}). */
+	get origin() {
+		return {
+			x: originX(this.#x()),
+			y: originY(this.#y())
+		};
+	}
 	get left() {
 		return inset(this.#x(), "start");
 	}
@@ -79,47 +103,6 @@ var MutableRegion = class {
 	}
 };
 //#endregion
-//#region src/ui/overlay/box.ts
-var WindowBox = class {
-	get x() {
-		return 0;
-	}
-	get y() {
-		return 0;
-	}
-	get w() {
-		return windowSize.width();
-	}
-	get h() {
-		return windowSize.height();
-	}
-	get direction() {
-		return direction();
-	}
-};
-const WINDOW_BOX = new WindowBox();
-var ElementBox = class {
-	#rect;
-	constructor(el) {
-		this.#rect = createElementRect(el);
-	}
-	[Symbol.dispose]() {
-		this.#rect[Symbol.dispose]();
-	}
-	get x() {
-		return this.#rect().left;
-	}
-	get y() {
-		return this.#rect().top;
-	}
-	get w() {
-		return this.#rect().width;
-	}
-	get h() {
-		return this.#rect().height;
-	}
-};
-//#endregion
 //#region src/ui/overlay/anchor.ts
 /**
 * The reactive `anchor()` function: the viewport coordinate of an anchor line
@@ -280,37 +263,17 @@ function resolveArea(area, dir = "ltr", selfDir = dir) {
 		inline: inline ? toPhysical(inline, "inline", dir, selfDir) : "center"
 	};
 }
-/** One axis of the position-area containing block, as `[lo, hi]` viewport
-* coordinates. The anchor's two edges cut `[bLo, bHi]` into before/over/after. */
-function axisSpan(lo, hi, bLo, bHi, region) {
-	switch (region) {
-		case "start": return [bLo, lo];
-		case "end": return [hi, bHi];
-		case "center": return [lo, hi];
-		case "span-start": return [bLo, hi];
-		case "span-end": return [lo, bHi];
-		default: return [bLo, bHi];
-	}
-}
 /**
-* The reactive `position-area` property: the region of the viewport an
-* overlay anchored to `anchor` may occupy, with the region's default
-* self-alignment as {@link Region.place} — outward regions hug the anchor,
-* spans go flush against its far edge, center is `anchor-center`. Nothing is
-* written; the caller takes what it wants from `place`:
-*
-*   const area = new PositionArea(a, "top span-left");
-*   effect(() => { overlay.x = area.place(overlay).x; });
-*
-* The value is parsed once, at construction; the geometry reads the anchor
-* and window on every access, so reading it inside an `effect` tracks both.
+* The reactive `position-area` property: which of the anchor's edges a box
+* pins to, and the self-alignment that follows — outward regions hug the
+* anchor's near edge, spans its far edge, center is `anchor-center`. Not a
+* box: a pin per axis, with no geometry of its own.
 *
-* Bounded by the window. A tighter bound (a `Constraint`, a scroll container)
-* is an intersection with the region, so it composes afterwards rather than
-* being a parameter here.
+* Parsed once, at construction; the pins read the anchor on every access, so
+* reading them in an `effect` tracks it.
 *
-* There is no gap parameter, for the same reason CSS has none: the offset off
-* the anchor is the overlay's own `margin`.
+* No gap parameter, for the same reason CSS has none: the offset off the
+* anchor is the overlay's own `margin`.
 */
 var PositionArea = class {
 	anchor;
@@ -319,18 +282,6 @@ var PositionArea = class {
 		this.anchor = anchor;
 		this.#area = resolveArea(area, rootDirection());
 	}
-	/** The inline axis as `[lo, hi]`, re-read from the anchor and window. */
-	get #ix() {
-		const a = this.anchor;
-		const w = WINDOW_BOX;
-		return axisSpan(a.x, a.x + a.w, w.x, w.x + w.w, this.#area.inline);
-	}
-	/** The block axis as `[lo, hi]`. */
-	get #iy() {
-		const a = this.anchor;
-		const w = WINDOW_BOX;
-		return axisSpan(a.y, a.y + a.h, w.y, w.y + w.h, this.#area.block);
-	}
 	get #px() {
 		const a = this.anchor;
 		return pinOf(this.#area.inline, a.x, a.x + a.w);
@@ -339,31 +290,20 @@ var PositionArea = class {
 		const a = this.anchor;
 		return pinOf(this.#area.block, a.y, a.y + a.h);
 	}
+	/** The pin lines — the viewport point {@link origin} lands on. */
 	get x() {
-		return this.#ix[0];
+		return this.#px.at;
 	}
 	get y() {
-		return this.#iy[0];
-	}
-	get w() {
-		const [lo, hi] = this.#ix;
-		return hi - lo;
-	}
-	get h() {
-		const [lo, hi] = this.#iy;
-		return hi - lo;
-	}
-	get left() {
-		return inset(this.#px, "start");
-	}
-	get right() {
-		return inset(this.#px, "end");
-	}
-	get top() {
-		return inset(this.#py, "start");
+		return this.#py.at;
 	}
-	get bottom() {
-		return inset(this.#py, "end");
+	/** The box point landing on ({@link x}, {@link y}). Two axes, not one
+	* side: a corner area pins a corner. */
+	get origin() {
+		return {
+			x: originX(this.#px),
+			y: originY(this.#py)
+		};
 	}
 	/** Every axis is pinned, so only the box's size is read. */
 	place(box) {
@@ -401,6 +341,164 @@ function pinOf(region, lo, hi) {
 	}
 }
 //#endregion
+//#region src/ui/overlay/box.ts
+var __create$1 = Object.create;
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$1 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$1 = (msg) => {
+	throw TypeError(msg);
+};
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, {
+	enumerable: true,
+	configurable: true,
+	writable: true,
+	value
+}) : obj[key] = value;
+var __name$1 = (target, value) => __defProp$1(target, "name", {
+	value,
+	configurable: true
+});
+var __decoratorStart$1 = (base) => [
+	,
+	,
+	,
+	__create$1(base?.[__knownSymbol$1("metadata")] ?? null)
+];
+var __decoratorStrings$1 = [
+	"class",
+	"method",
+	"getter",
+	"setter",
+	"accessor",
+	"field",
+	"value",
+	"get",
+	"set"
+];
+var __expectFn$1 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$1("Function expected") : fn;
+var __decoratorContext$1 = (kind, name, done, metadata, fns) => ({
+	kind: __decoratorStrings$1[kind],
+	name,
+	metadata,
+	addInitializer: (fn) => done._ ? __typeError$1("Already initialized") : fns.push(__expectFn$1(fn || null))
+});
+var __decoratorMetadata$1 = (array, target) => __defNormalProp$1(target, __knownSymbol$1("metadata"), array[3]);
+var __runInitializers$1 = (array, flags, self, value) => {
+	for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+	return value;
+};
+var __decorateElement$1 = (array, flags, name, decorators, target, extra) => {
+	var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+	var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings$1[k + 5];
+	var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+	var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc$1(k < 4 ? target : {
+		get [name]() {
+			return __privateGet$1(this, extra);
+		},
+		set [name](x) {
+			return __privateSet$1(this, extra, x);
+		}
+	}, name));
+	k ? p && k < 4 && __name$1(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name$1(target, name);
+	for (var i = decorators.length - 1; i >= 0; i--) {
+		ctx = __decoratorContext$1(k, name, done = {}, array[3], extraInitializers);
+		if (k) {
+			ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn$1(target, x) : (x) => name in x };
+			if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet$1 : __privateMethod$1)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+			if (k > 2) access.set = p ? (x, y) => __privateSet$1(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+		}
+		it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : {
+			get: desc.get,
+			set: desc.set
+		} : target, ctx), done._ = 1;
+		if (k ^ 4 || it === void 0) __expectFn$1(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+		else if (typeof it !== "object" || it === null) __typeError$1("Object expected");
+		else __expectFn$1(fn = it.get) && (desc.get = fn), __expectFn$1(fn = it.set) && (desc.set = fn), __expectFn$1(fn = it.init) && initializers.unshift(fn);
+	}
+	return k || __decoratorMetadata$1(array, target), desc && __defProp$1(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
+var __privateIn$1 = (member, obj) => Object(obj) !== obj ? __typeError$1("Cannot use the \"in\" operator on this value") : member.has(obj);
+var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$1 = (obj, member, method) => (__accessCheck$1(obj, member, "access private method"), method);
+var _left_dec, _bottom_dec, _right_dec, _top_dec, _box_dec, _init$1;
+var WindowBox = class {
+	get x() {
+		return 0;
+	}
+	get y() {
+		return 0;
+	}
+	get w() {
+		return windowSize.width();
+	}
+	get h() {
+		return windowSize.height();
+	}
+	get direction() {
+		return direction();
+	}
+};
+const WINDOW_BOX = new WindowBox();
+_box_dec = [reactive()], _top_dec = [reactive()], _right_dec = [reactive()], _bottom_dec = [reactive()], _left_dec = [reactive()];
+var MarginBox = class {
+	constructor(box, top = 0, right = top, bottom = top, left = right) {
+		__publicField$1(this, "box", __runInitializers$1(_init$1, 8, this)), __runInitializers$1(_init$1, 11, this);
+		__publicField$1(this, "top", __runInitializers$1(_init$1, 12, this)), __runInitializers$1(_init$1, 15, this);
+		__publicField$1(this, "right", __runInitializers$1(_init$1, 16, this)), __runInitializers$1(_init$1, 19, this);
+		__publicField$1(this, "bottom", __runInitializers$1(_init$1, 20, this)), __runInitializers$1(_init$1, 23, this);
+		__publicField$1(this, "left", __runInitializers$1(_init$1, 24, this)), __runInitializers$1(_init$1, 27, this);
+		this.box = box;
+		this.top = top;
+		this.right = right;
+		this.bottom = bottom;
+		this.left = left;
+	}
+	get x() {
+		return resolve(this.box).x - resolve(this.left);
+	}
+	get y() {
+		return resolve(this.box).y - resolve(this.top);
+	}
+	get w() {
+		return resolve(this.box).w + resolve(this.left) + resolve(this.right);
+	}
+	get h() {
+		return resolve(this.box).h + resolve(this.top) + resolve(this.bottom);
+	}
+};
+_init$1 = __decoratorStart$1(null);
+__decorateElement$1(_init$1, 5, "box", _box_dec, MarginBox);
+__decorateElement$1(_init$1, 5, "top", _top_dec, MarginBox);
+__decorateElement$1(_init$1, 5, "right", _right_dec, MarginBox);
+__decorateElement$1(_init$1, 5, "bottom", _bottom_dec, MarginBox);
+__decorateElement$1(_init$1, 5, "left", _left_dec, MarginBox);
+__decoratorMetadata$1(_init$1, MarginBox);
+var ElementBox = class {
+	#rect;
+	constructor(el) {
+		this.#rect = createElementRect(el);
+	}
+	[Symbol.dispose]() {
+		this.#rect[Symbol.dispose]();
+	}
+	get x() {
+		return this.#rect().left;
+	}
+	get y() {
+		return this.#rect().top;
+	}
+	get w() {
+		return this.#rect().width;
+	}
+	get h() {
+		return this.#rect().height;
+	}
+};
+//#endregion
 //#region src/ui/overlay/overlay.ts
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -560,16 +658,27 @@ var Displacement = class extends PartialBox {
 		});
 	}
 };
+const OFFSET = {
+	left: "0%",
+	top: "0%",
+	center: "50%",
+	right: "100%",
+	bottom: "100%"
+};
 var OverlayBox = class extends TransformableBox {
 	element;
 	#rect;
+	#origin = {
+		x: "left",
+		y: "top"
+	};
 	constructor(element) {
 		super();
 		this.element = element;
 		this.#rect = createElementRect(element);
 		element.style.setProperty("top", "0");
 		element.style.setProperty("left", "0");
-		element.style.setProperty("translate", "calc(var(--x, 0px) + var(--dx, 0px) + var(--_ex, 0px)) calc(var(--y, 0px) + var(--dy, 0px) + var(--_ey, 0px))");
+		element.style.setProperty("translate", "calc(var(--x, 0px) + var(--dx, 0px) + var(--_ex, 0px) - var(--_ox, 0%)) calc(var(--y, 0px) + var(--dy, 0px) + var(--_ey, 0px) - var(--_oy, 0%))");
 		const [, stop] = scope(() => {
 			effect(() => {
 				this.#project("--x", this.transform.x);
@@ -595,6 +704,19 @@ var OverlayBox = class extends TransformableBox {
 			this.#rect[Symbol.dispose]();
 		};
 	}
+	/** The box point that lands on (x, y), and the scale's origin. */
+	get origin() {
+		return this.#origin;
+	}
+	set origin({ x, y }) {
+		this.#origin = {
+			x,
+			y
+		};
+		this.element.style.setProperty("--_ox", OFFSET[x]);
+		this.element.style.setProperty("--_oy", OFFSET[y]);
+		this.element.style.transformOrigin = `${x} ${y}`;
+	}
 	/** Write a size channel, or unset it when the axis is AUTO (NaN) so the
 	* element falls back to content sizing (`var(--w, auto)`). */
 	#project(name, ...value) {
@@ -721,4 +843,4 @@ var Motion = class {
 	}
 };
 //#endregion
-export { ElementBox, gestures_exports as Gestures, Motion, MutableRegion, OverlayBox, PositionArea, WINDOW_BOX, WindowBox, anchor_length };
+export { ElementBox, gestures_exports as Gestures, MarginBox, Motion, MutableRegion, OverlayBox, PositionArea, WINDOW_BOX, WindowBox, anchor_length };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.27.10",
+  "version": "0.27.12",
   "description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
   "keywords": [
     "webcomponents",