elements-kit 0.27.11 → 0.27.12

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>);
@@ -291,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 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 { 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";
@@ -342,6 +342,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 +443,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 +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.11",
+  "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",