elements-kit 0.27.11 → 0.27.13

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

@@ -31,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>);
@@ -179,16 +200,18 @@ type PositionAreaValue = AreaKeyword | Unordered<BlockKeyword, InlineKeyword> |
  * 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.
  *
- * Parsed once, at construction; the pins read the anchor on every access, so
- * reading them in an `effect` tracks it.
+ * The area is assignable — reassigning re-aims the region in place, so a menu
+ * can flip side without a new one. Parsed on assignment; the pins read the
+ * anchor on every access, so an `effect` tracks both.
  *
  * 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 {
   #private;
-  readonly anchor: ReadonlyBox;
-  constructor(anchor: ReadonlyBox, area: PositionAreaValue);
+  area: PositionAreaValue;
+  anchor: ReadonlyBox & Partial<IDirection>;
+  constructor(anchor: ReadonlyBox & Partial<IDirection>, area: PositionAreaValue);
   /** The pin lines — the viewport point {@link origin} lands on. */
   get x(): number;
   get y(): number;
@@ -291,4 +314,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 IOrigin, type InlineSide, type Inset, 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 };
+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 { c as batch, l as computed, u as effect, x as signal } from "../../lib-Dw0g-vex.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";
@@ -104,11 +104,90 @@ var MutableRegion = class {
 };
 //#endregion
 //#region src/ui/overlay/anchor.ts
-/**
-* The reactive `anchor()` function: the viewport coordinate of an anchor line
-* on `box`, in the context of the inset property being computed. Reads the
-* box's reactive geometry, so calling it inside an `effect` tracks the anchor.
-*/
+var __create$2 = Object.create;
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$2 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$2 = (msg) => {
+	throw TypeError(msg);
+};
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, {
+	enumerable: true,
+	configurable: true,
+	writable: true,
+	value
+}) : obj[key] = value;
+var __name$2 = (target, value) => __defProp$2(target, "name", {
+	value,
+	configurable: true
+});
+var __decoratorStart$2 = (base) => [
+	,
+	,
+	,
+	__create$2(base?.[__knownSymbol$2("metadata")] ?? null)
+];
+var __decoratorStrings$2 = [
+	"class",
+	"method",
+	"getter",
+	"setter",
+	"accessor",
+	"field",
+	"value",
+	"get",
+	"set"
+];
+var __expectFn$2 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$2("Function expected") : fn;
+var __decoratorContext$2 = (kind, name, done, metadata, fns) => ({
+	kind: __decoratorStrings$2[kind],
+	name,
+	metadata,
+	addInitializer: (fn) => done._ ? __typeError$2("Already initialized") : fns.push(__expectFn$2(fn || null))
+});
+var __decoratorMetadata$2 = (array, target) => __defNormalProp$2(target, __knownSymbol$2("metadata"), array[3]);
+var __runInitializers$2 = (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$2 = (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$2[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$2(k < 4 ? target : {
+		get [name]() {
+			return __privateGet$2(this, extra);
+		},
+		set [name](x) {
+			return __privateSet$2(this, extra, x);
+		}
+	}, name));
+	k ? p && k < 4 && __name$2(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name$2(target, name);
+	for (var i = decorators.length - 1; i >= 0; i--) {
+		ctx = __decoratorContext$2(k, name, done = {}, array[3], extraInitializers);
+		if (k) {
+			ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn$2(target, x) : (x) => name in x };
+			if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet$2 : __privateMethod$2)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+			if (k > 2) access.set = p ? (x, y) => __privateSet$2(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$2(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+		else if (typeof it !== "object" || it === null) __typeError$2("Object expected");
+		else __expectFn$2(fn = it.get) && (desc.get = fn), __expectFn$2(fn = it.set) && (desc.set = fn), __expectFn$2(fn = it.init) && initializers.unshift(fn);
+	}
+	return k || __decoratorMetadata$2(array, target), desc && __defProp$2(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
+var __privateIn$2 = (member, obj) => Object(obj) !== obj ? __typeError$2("Cannot use the \"in\" operator on this value") : member.has(obj);
+var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$2 = (obj, member, method) => (__accessCheck$2(obj, member, "access private method"), method);
+var _anchor_dec, _area_dec, _init$2, _resolved, _PositionArea_instances, px_get, py_get;
 function anchor_length(box, inset, side) {
 	const physical = resolveInset(inset);
 	const block = physical === "top" || physical === "bottom";
@@ -116,7 +195,6 @@ function anchor_length(box, inset, side) {
 	const size = block ? box.h : box.w;
 	return lo + fraction(box, block, physical, side) * size;
 }
-/** A side, as a fraction of the axis measured from its top/left edge. */
 function fraction(box, block, inset, side) {
 	switch (side) {
 		case "top":
@@ -131,12 +209,9 @@ function fraction(box, block, inset, side) {
 	const rtl = side === "self-start" || side === "self-end" ? (box.direction ?? rootDirection()) === "rtl" : rootDirection() === "rtl";
 	return !block && rtl ? 1 - logical : logical;
 }
-/** The document root's direction — the fallback when a box has no own. */
 function rootDirection() {
 	return getComputedStyle(document.documentElement).direction === "rtl" ? "rtl" : "ltr";
 }
-/** A logical inset longhand → its physical side, through the containing
-* block's direction (horizontal writing modes — only inline flips). */
 function resolveInset(inset) {
 	switch (inset) {
 		case "inset-block-start": return "top";
@@ -164,8 +239,6 @@ const A = (region, self = false) => ({
 	physical: false,
 	self
 });
-/** The full `position-area` keyword grammar → axis + physical region. The
-* key type forces this table and {@link PositionAreaValue} to stay in step. */
 const KEYWORDS = {
 	top: B("start", true),
 	bottom: B("end", true),
@@ -216,18 +289,11 @@ const SPAN_ALL = KEYWORDS["span-all"];
 function flipRegion(r) {
 	return r === "start" ? "end" : r === "end" ? "start" : r === "span-start" ? "span-end" : r === "span-end" ? "span-start" : r;
 }
-/** Resolve a keyword to a physical region: block never flips; inline flips
-* in RTL unless the keyword is physical. */
 function toPhysical(kw, axis, dir, selfDir) {
 	const r = kw.region;
 	if (r === "center" || r === "span-all" || axis === "block" || kw.physical) return r;
 	return (kw.self ? selfDir : dir) === "rtl" ? flipRegion(r) : r;
 }
-/**
-* Parse a `position-area` value into a physical {@link Area}. One or two
-* keywords, order-independent; an axis-specific single keyword spans the
-* other axis, an ambiguous one applies to both. Unknown/empty → `block-end`.
-*/
 function resolveArea(area, dir = "ltr", selfDir = dir) {
 	const tokens = area.trim().toLowerCase().split(/\s+/).filter(Boolean);
 	const fallback = () => ({
@@ -263,59 +329,54 @@ function resolveArea(area, dir = "ltr", selfDir = dir) {
 		inline: inline ? toPhysical(inline, "inline", dir, selfDir) : "center"
 	};
 }
-/**
-* 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.
-*
-* Parsed once, at construction; the pins read the anchor on every access, so
-* reading them in an `effect` tracks it.
-*
-* No gap parameter, for the same reason CSS has none: the offset off the
-* anchor is the overlay's own `margin`.
-*/
+_area_dec = [reactive()], _anchor_dec = [reactive()];
 var PositionArea = class {
-	anchor;
-	#area;
 	constructor(anchor, area) {
+		__privateAdd(this, _PositionArea_instances);
+		__publicField$2(this, "area", __runInitializers$2(_init$2, 8, this)), __runInitializers$2(_init$2, 11, this);
+		__publicField$2(this, "anchor", __runInitializers$2(_init$2, 12, this)), __runInitializers$2(_init$2, 15, this);
+		__privateAdd(this, _resolved);
 		this.anchor = anchor;
-		this.#area = resolveArea(area, rootDirection());
-	}
-	get #px() {
-		const a = this.anchor;
-		return pinOf(this.#area.inline, a.x, a.x + a.w);
-	}
-	get #py() {
-		const a = this.anchor;
-		return pinOf(this.#area.block, a.y, a.y + a.h);
+		this.area = area;
+		__privateSet$2(this, _resolved, computed(() => resolveArea(this.area, this.anchor.direction ?? rootDirection())));
 	}
 	/** The pin lines — the viewport point {@link origin} lands on. */
 	get x() {
-		return this.#px.at;
+		return __privateGet$2(this, _PositionArea_instances, px_get).at;
 	}
 	get y() {
-		return this.#py.at;
+		return __privateGet$2(this, _PositionArea_instances, py_get).at;
 	}
 	/** 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)
+			x: originX(__privateGet$2(this, _PositionArea_instances, px_get)),
+			y: originY(__privateGet$2(this, _PositionArea_instances, py_get))
 		};
 	}
 	/** Every axis is pinned, so only the box's size is read. */
 	place(box) {
 		return {
-			x: placePinned(this.#px, box.w),
-			y: placePinned(this.#py, box.h)
+			x: placePinned(__privateGet$2(this, _PositionArea_instances, px_get), box.w),
+			y: placePinned(__privateGet$2(this, _PositionArea_instances, py_get), box.h)
 		};
 	}
 };
-/** A region's default self-alignment as a pin on the anchor's `[lo, hi]` —
-* outward regions hug the anchor's near edge, spans its far edge; `center`
-* and `span-all` are `anchor-center`, which may overflow the rect. */
+_init$2 = __decoratorStart$2(null);
+_resolved = /* @__PURE__ */ new WeakMap();
+_PositionArea_instances = /* @__PURE__ */ new WeakSet();
+px_get = function() {
+	const a = this.anchor;
+	return pinOf(__privateGet$2(this, _resolved).call(this).inline, a.x, a.x + a.w);
+};
+py_get = function() {
+	const a = this.anchor;
+	return pinOf(__privateGet$2(this, _resolved).call(this).block, a.y, a.y + a.h);
+};
+__decorateElement$2(_init$2, 5, "area", _area_dec, PositionArea);
+__decorateElement$2(_init$2, 5, "anchor", _anchor_dec, PositionArea);
+__decoratorMetadata$2(_init$2, PositionArea);
 function pinOf(region, lo, hi) {
 	switch (region) {
 		case "start": return {
@@ -342,6 +403,89 @@ 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;
@@ -360,6 +504,40 @@ var WindowBox = class {
 	}
 };
 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) {
@@ -726,4 +904,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.11",
+  "version": "0.27.13",
   "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",