elements-kit 0.27.12 → 0.27.14

package/dist/{chunk-CfYAbeIz.mjs → chunk-BpYLSNr0.mjs}

@@ -1,3 +1,4 @@
+import "node:module";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {

package/dist/integrations/astro.d.mts

@@ -7,6 +7,7 @@ interface AstroRendererConfig {
 interface AstroConfigSetupApi {
   addRenderer(renderer: AstroRendererConfig): void;
   updateConfig(config: Record<string, unknown>): unknown;
+  config?: unknown;
 }
 interface ElementsKitAstroIntegration {
   name: string;

package/dist/integrations/astro.mjs

@@ -1,6 +1,32 @@
 import elementsKitHmr from "./vite.mjs";
+import { createRequire } from "node:module";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 //#region src/integrations/astro.ts
 /**
+* The JSX transform config, under the key the installed Vite actually reads.
+*
+* Vite 8 (and rolldown-vite) transform with Oxc: `esbuild` options are ignored
+* there, and setting both keys warns. Older Vite only understands `esbuild`.
+* Vite is resolved from the project root — under isolated installs it is not
+* reachable from this package's own directory.
+*/
+function jsxTransformConfig(root) {
+	const from = root instanceof URL ? fileURLToPath(root) : typeof root === "string" ? root : process.cwd();
+	let oxc = false;
+	try {
+		const vite = createRequire(path.join(from, "noop.js"))("vite/package.json");
+		oxc = vite.name === "rolldown-vite" || Number.parseInt(vite.version ?? "", 10) >= 8;
+	} catch {}
+	return oxc ? { oxc: { jsx: {
+		runtime: "automatic",
+		importSource: "elements-kit"
+	} } } : { esbuild: {
+		jsx: "automatic",
+		jsxImportSource: "elements-kit"
+	} };
+}
+/**
 * Astro integration: use elements-kit components as Astro islands.
 *
 * Registers the elements-kit renderer pair — server rendering via
@@ -35,17 +61,14 @@ import elementsKitHmr from "./vite.mjs";
 function elementsKit() {
 	return {
 		name: "elements-kit",
-		hooks: { "astro:config:setup": ({ addRenderer, updateConfig }) => {
+		hooks: { "astro:config:setup": ({ addRenderer, updateConfig, config }) => {
 			addRenderer({
 				name: "elements-kit",
 				clientEntrypoint: "elements-kit/integrations/astro-client",
 				serverEntrypoint: "elements-kit/integrations/astro-server"
 			});
 			updateConfig({ vite: {
-				esbuild: {
-					jsx: "automatic",
-					jsxImportSource: "elements-kit"
-				},
+				...jsxTransformConfig(config?.root),
 				optimizeDeps: { include: [
 					"elements-kit",
 					"elements-kit/jsx-runtime",

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

@@ -200,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;

package/dist/ui/overlay/index.mjs

@@ -1,5 +1,5 @@
-import { t as __exportAll } from "../../chunk-CfYAbeIz.mjs";
-import { c as batch, u as effect, x as signal } from "../../lib-Dw0g-vex.mjs";
+import { t as __exportAll } from "../../chunk-BpYLSNr0.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";
@@ -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 {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.27.12",
+  "version": "0.27.14",
   "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",