@pyreon/elements 0.14.0 → 0.16.0

package/lib/index.js

@@ -1,6 +1,7 @@
 import { Provider, alignContent, extendCss, makeItResponsive, value } from "@pyreon/unistyle";
-import { Fragment, Portal, createContext, onMount, provide, splitProps, useContext } from "@pyreon/core";
+import { Fragment, Portal, createContext, nativeCompat, onMount, onUnmount, provide, splitProps, useContext } from "@pyreon/core";
 import { config, isEmpty, omit, pick, render, throttle } from "@pyreon/ui-core";
+import { Fragment as Fragment$1, jsx, jsxs } from "@pyreon/core/jsx-runtime";
 import { signal } from "@pyreon/reactivity";
 
 //#region src/constants.ts
@@ -8,7 +9,7 @@ const PKG_NAME = "@pyreon/elements";
 
 //#endregion
 //#region src/utils.ts
-const IS_DEVELOPMENT = import.meta.env?.DEV === true;
+const IS_DEVELOPMENT = process.env.NODE_ENV !== "production";
 
 //#endregion
 //#region src/helpers/Content/styled.ts
@@ -82,58 +83,6 @@ const StyledComponent = styled$2(component$1, { layer: "elements" })`
 })};
 `;
 
-//#endregion
-//#region ../../core/core/lib/jsx-runtime.js
-/** Marker for fragment nodes — renders children without a wrapper element */
-const Fragment$1 = Symbol("Pyreon.Fragment");
-/**
-* Hyperscript function — the compiled output of JSX.
-* `<div class="x">hello</div>` → `h("div", { class: "x" }, "hello")`
-*
-* Generic on P so TypeScript validates props match the component's signature
-* at the call site, then stores the result in the loosely-typed VNode.
-*/
-/** Shared empty props sentinel — identity-checked in mountElement to skip applyProps. */
-const EMPTY_PROPS = {};
-function h(type, props, ...children) {
-	return {
-		type,
-		props: props ?? EMPTY_PROPS,
-		children: normalizeChildren(children),
-		key: props?.key ?? null
-	};
-}
-function normalizeChildren(children) {
-	for (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);
-	return children;
-}
-function flattenChildren(children) {
-	const result = [];
-	for (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));
-	else result.push(child);
-	return result;
-}
-/**
-* JSX automatic runtime.
-*
-* When tsconfig has `"jsxImportSource": "@pyreon/core"`, the TS/bundler compiler
-* rewrites JSX to imports from this file automatically:
-*   <div class="x" />  →  jsx("div", { class: "x" })
-*/
-function jsx(type, props, key) {
-	const { children, ...rest } = props;
-	const propsWithKey = key != null ? {
-		...rest,
-		key
-	} : rest;
-	if (typeof type === "function") return h(type, children !== void 0 ? {
-		...propsWithKey,
-		children
-	} : propsWithKey);
-	return h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);
-}
-const jsxs = jsx;
-
 //#endregion
 //#region src/helpers/Content/component.tsx
 /**
@@ -182,6 +131,120 @@ const Component$9 = (props) => {
 //#region src/helpers/Content/index.ts
 var Content_default = Component$9;
 
+//#endregion
+//#region src/Element/constants.ts
+/**
+* HTML tags that are inline-level by default. When Element renders one of
+* these tags, child Content wrappers use `span` instead of `div` to
+* preserve valid HTML nesting.
+*/
+const INLINE_ELEMENTS = {
+	span: true,
+	a: true,
+	button: true,
+	input: true,
+	label: true,
+	select: true,
+	textarea: true,
+	br: true,
+	img: true,
+	strong: true,
+	small: true,
+	code: true,
+	b: true,
+	big: true,
+	i: true,
+	tt: true,
+	abbr: true,
+	acronym: true,
+	cite: true,
+	dfn: true,
+	em: true,
+	kbd: true,
+	samp: true,
+	var: true,
+	bdo: true,
+	map: true,
+	object: true,
+	q: true,
+	script: true,
+	sub: true,
+	sup: true
+};
+/**
+* HTML void/self-closing elements that cannot have children. When Element
+* detects one of these tags, it skips rendering beforeContent/content/afterContent
+* and returns the Wrapper alone.
+*/
+const EMPTY_ELEMENTS = {
+	area: true,
+	base: true,
+	br: true,
+	col: true,
+	embed: true,
+	hr: true,
+	img: true,
+	input: true,
+	keygen: true,
+	link: true,
+	textarea: true,
+	source: true,
+	track: true,
+	wbr: true
+};
+
+//#endregion
+//#region src/Element/utils.ts
+/** Checks whether the given HTML tag is an inline-level element, used to determine sub-tag nesting. */
+const isInlineElement = (tag) => {
+	if (tag && tag in INLINE_ELEMENTS) return true;
+	return false;
+};
+/** Checks whether the given HTML tag is a void element that cannot have children. */
+const getShouldBeEmpty = (tag) => {
+	if (tag && tag in EMPTY_ELEMENTS) return true;
+	return false;
+};
+
+//#endregion
+//#region src/helpers/internElementBundle.ts
+/**
+* Module-scope intern cache for `$element` bundles passed to Wrapper's styled
+* component. Same primitive prop tuple → same object identity, so the styler's
+* `elClassCache` (added 2026-Q2 alongside this) hits and skips the resolve
+* pipeline. Analogous to `@pyreon/rocketstyle`'s dimension-prop memo (PR #344)
+* but at the layer below — covers non-rocketstyle Element / Wrapper / Text usage
+* AND the residual styled wrappers under any rocketstyle component.
+*
+* Cache key is a JSON-stringified shallow snapshot of the bundle. LRU-bound at
+* 256 entries; oldest-first eviction. Bail (return the input as-is, no cache)
+* when any value is a function (signal accessor) or a non-string object (CSS
+* callback / CSSResult / nested object) — those cannot be safely round-tripped
+* through JSON without losing identity guarantees.
+*/
+const _bundleCache = /* @__PURE__ */ new Map();
+const BUNDLE_CAP = 256;
+const internElementBundle = (bundle) => {
+	for (const k in bundle) {
+		const v = bundle[k];
+		if (typeof v === "function") return bundle;
+		if (v != null && typeof v === "object") return bundle;
+	}
+	const key = JSON.stringify(bundle);
+	const existing = _bundleCache.get(key);
+	if (existing) {
+		_bundleCache.delete(key);
+		_bundleCache.set(key, existing);
+		return existing;
+	}
+	if (_bundleCache.size >= BUNDLE_CAP) {
+		const oldest = _bundleCache.keys().next().value;
+		if (oldest !== void 0) _bundleCache.delete(oldest);
+	}
+	_bundleCache.set(key, bundle);
+	return bundle;
+};
+
 //#endregion
 //#region src/helpers/Wrapper/styled.ts
 /**
@@ -201,28 +264,25 @@ const childFixCSS = `
 const parentFixCSS = `
   flex-direction: column;
 `;
-const fullHeightCSS = `
-  height: 100%;
-`;
-const blockCSS = `
-  align-self: stretch;
-  flex: 1;
-  min-width: 0;
-`;
-const childFixPosition = (isBlock) => `display: ${isBlock ? "flex" : "inline-flex"};`;
 const styles$1 = ({ theme: t, css: cssFn }) => cssFn`
-  ${t.alignY === "block" && fullHeightCSS};
-
   ${alignContent({
 	direction: t.direction,
 	alignX: t.alignX,
 	alignY: t.alignY
 })};
 
-  ${t.block && blockCSS};
-  ${t.alignY === "block" && t.block && fullHeightCSS};
+  /*
+   * Always emit a value for the block-related properties so a responsive
+   * theme that flips from \`block: true\` at one breakpoint to \`block: false\`
+   * at another resets cleanly. Previously \`align-self\` / \`width\` / \`height\`
+   * were only set when the truthy branch matched, which left the prior
+   * breakpoint's values cascading through.
+   */
+  ${`align-self: ${t.block ? "stretch" : "auto"};
+     width: ${t.block ? "100%" : "auto"};
+     height: ${t.alignY === "block" ? "100%" : "auto"};`};
 
-  ${!t.childFix && childFixPosition(t.block)};
+  ${!t.childFix && `display: ${t.block ? "flex" : "inline-flex"};`};
   ${t.parentFix && parentFixCSS};
 
   ${t.extraStyles && extendCss(t.extraStyles)};
@@ -292,36 +352,63 @@ const Component$8 = (props) => {
 		ref: own.ref,
 		as: own.tag
 	};
-	if (!(!own.dangerouslySetInnerHTML && isWebFixNeeded(own.tag))) return /* @__PURE__ */ jsx(styled_default$1, {
-		...commonProps,
-		$element: {
+	const needsFix = !own.dangerouslySetInnerHTML && isWebFixNeeded(own.tag);
+	const isVoidTag = !own.dangerouslySetInnerHTML && getShouldBeEmpty(own.tag);
+	const innerHTML = own.dangerouslySetInnerHTML;
+	if (!needsFix) {
+		const bundle = internElementBundle({
 			block: own.block,
 			direction: own.direction,
 			alignX: own.alignX,
 			alignY: own.alignY,
 			equalCols: own.equalCols,
 			extraStyles: own.extendCss
-		},
-		children: own.children
-	});
+		});
+		if (isVoidTag) return /* @__PURE__ */ jsx(styled_default$1, {
+			...commonProps,
+			$element: bundle
+		});
+		if (innerHTML) return /* @__PURE__ */ jsx(styled_default$1, {
+			...commonProps,
+			$element: bundle,
+			dangerouslySetInnerHTML: innerHTML
+		});
+		return /* @__PURE__ */ jsx(styled_default$1, {
+			...commonProps,
+			$element: bundle,
+			children: own.children
+		});
+	}
 	const asTag = own.isInline ? "span" : "div";
+	const parentBundle = internElementBundle({
+		parentFix: true,
+		block: own.block,
+		extraStyles: own.extendCss
+	});
+	const childBundle = internElementBundle({
+		childFix: true,
+		direction: own.direction,
+		alignX: own.alignX,
+		alignY: own.alignY,
+		equalCols: own.equalCols
+	});
+	if (innerHTML) return /* @__PURE__ */ jsx(styled_default$1, {
+		...commonProps,
+		$element: parentBundle,
+		children: /* @__PURE__ */ jsx(styled_default$1, {
+			as: asTag,
+			$childFix: true,
+			$element: childBundle,
+			dangerouslySetInnerHTML: innerHTML
+		})
+	});
 	return /* @__PURE__ */ jsx(styled_default$1, {
 		...commonProps,
-		$element: {
-			parentFix: true,
-			block: own.block,
-			extraStyles: own.extendCss
-		},
+		$element: parentBundle,
 		children: /* @__PURE__ */ jsx(styled_default$1, {
 			as: asTag,
 			$childFix: true,
-			$element: {
-				childFix: true,
-				direction: own.direction,
-				alignX: own.alignX,
-				alignY: own.alignY,
-				equalCols: own.equalCols
-			},
+			$element: childBundle,
 			children: own.children
 		})
 	});
@@ -331,81 +418,6 @@ const Component$8 = (props) => {
 //#region src/helpers/Wrapper/index.ts
 var Wrapper_default = Component$8;
 
-//#endregion
-//#region src/Element/constants.ts
-/**
-* HTML tags that are inline-level by default. When Element renders one of
-* these tags, child Content wrappers use `span` instead of `div` to
-* preserve valid HTML nesting.
-*/
-const INLINE_ELEMENTS = {
-	span: true,
-	a: true,
-	button: true,
-	input: true,
-	label: true,
-	select: true,
-	textarea: true,
-	br: true,
-	img: true,
-	strong: true,
-	small: true,
-	code: true,
-	b: true,
-	big: true,
-	i: true,
-	tt: true,
-	abbr: true,
-	acronym: true,
-	cite: true,
-	dfn: true,
-	em: true,
-	kbd: true,
-	samp: true,
-	var: true,
-	bdo: true,
-	map: true,
-	object: true,
-	q: true,
-	script: true,
-	sub: true,
-	sup: true
-};
-/**
-* HTML void/self-closing elements that cannot have children. When Element
-* detects one of these tags, it skips rendering beforeContent/content/afterContent
-* and returns the Wrapper alone.
-*/
-const EMPTY_ELEMENTS = {
-	area: true,
-	base: true,
-	br: true,
-	col: true,
-	embed: true,
-	hr: true,
-	img: true,
-	input: true,
-	keygen: true,
-	link: true,
-	textarea: true,
-	source: true,
-	track: true,
-	wbr: true
-};
-
-//#endregion
-//#region src/Element/utils.ts
-/** Checks whether the given HTML tag is an inline-level element, used to determine sub-tag nesting. */
-const isInlineElement = (tag) => {
-	if (tag && tag in INLINE_ELEMENTS) return true;
-	return false;
-};
-/** Checks whether the given HTML tag is a void element that cannot have children. */
-const getShouldBeEmpty = (tag) => {
-	if (tag && tag in EMPTY_ELEMENTS) return true;
-	return false;
-};
-
 //#endregion
 //#region src/Element/component.tsx
 /**
@@ -500,7 +512,13 @@ const Component = (props) => {
 		else if (externalRef != null) externalRef.current = node;
 	};
 	if (own.equalBeforeAfter && own.beforeContent && own.afterContent) onMount(() => {
-		if (equalizeRef) equalize(equalizeRef, own.direction);
+		const node = equalizeRef;
+		if (!node) return void 0;
+		equalize(node, own.direction);
+		if (typeof ResizeObserver === "undefined") return void 0;
+		const observer = new ResizeObserver(() => equalize(node, own.direction));
+		observer.observe(node);
+		return () => observer.disconnect();
 	});
 	const WRAPPER_PROPS = {
 		ref: mergedRef,
@@ -522,14 +540,14 @@ const Component = (props) => {
 		...WRAPPER_DEV_PROPS,
 		ref: mergedRef,
 		as: own.tag,
-		$element: {
+		$element: internElementBundle({
 			block: own.block,
 			direction: wrapperDirection,
 			alignX: wrapperAlignX,
 			alignY: wrapperAlignY,
 			equalCols: own.equalCols,
 			extraStyles: own.css
-		},
+		}),
 		children: render(getChildren())
 	});
 	if (isSimpleElement) return /* @__PURE__ */ jsx(Wrapper_default, {
@@ -731,34 +749,28 @@ const Component$7 = (props) => {
 	};
 	return renderItems();
 };
-var component_default = Object.assign(Component$7, {
+const Iterator = Object.assign(Component$7, {
 	isIterator: true,
 	RESERVED_PROPS
 });
 
 //#endregion
 //#region src/helpers/Iterator/index.ts
-var Iterator_default = component_default;
+var Iterator_default = Iterator;
 
 //#endregion
 //#region src/List/component.tsx
-/**
-* List component that combines Iterator (data-driven rendering) with an
-* optional Element root wrapper. When `rootElement` is false (default),
-* it renders a bare Iterator as a fragment. When true, the Iterator output
-* is wrapped in an Element that receives all non-iterator props (e.g.,
-* layout, alignment, css), allowing the list to be styled as a single block.
-*/
-const Component$1 = ((allProps) => {
+const LooseIterator = Iterator_default;
+const Component$1 = (allProps) => {
 	const [own, props] = splitProps(allProps, ["rootElement", "ref"]);
-	const renderedList = /* @__PURE__ */ jsx(Iterator_default, { ...pick(props, Iterator_default.RESERVED_PROPS) });
+	const renderedList = /* @__PURE__ */ jsx(LooseIterator, { ...pick(props, Iterator_default.RESERVED_PROPS) });
 	if (!own.rootElement) return renderedList;
 	return /* @__PURE__ */ jsx(Component, {
-		...own.ref ? { ref: own.ref } : {},
+		ref: own.ref,
 		...omit(props, Iterator_default.RESERVED_PROPS),
 		children: renderedList
 	});
-});
+};
 const name$4 = `${PKG_NAME}/List`;
 Component$1.displayName = name$4;
 Component$1.pkgName = PKG_NAME;
@@ -776,6 +788,7 @@ const Component$3 = (props) => {
 	});
 	return /* @__PURE__ */ jsx(Fragment$1, { children: props.children });
 };
+nativeCompat(Component$3);
 
 //#endregion
 //#region src/Overlay/positioning.ts
@@ -1232,14 +1245,21 @@ const name$3 = `${PKG_NAME}/Overlay`;
 Component$2.displayName = name$3;
 Component$2.pkgName = PKG_NAME;
 Component$2.PYREON__COMPONENT = name$3;
+nativeCompat(Component$2);
 
 //#endregion
 //#region src/Portal/component.tsx
 const Component$4 = (props) => {
-	const target = props.DOMLocation ?? (typeof document !== "undefined" ? document.body : void 0);
-	if (!target) return null;
+	if (typeof document === "undefined") return null;
+	const tag = props.tag ?? "div";
+	const target = props.DOMLocation ?? document.body;
+	const wrapper = document.createElement(tag);
+	target.appendChild(wrapper);
+	onUnmount(() => {
+		wrapper.remove();
+	});
 	return /* @__PURE__ */ jsx(Portal, {
-		target,
+		target: wrapper,
 		children: props.children
 	});
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/elements",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "Foundational UI components for Pyreon",
   "license": "MIT",
   "repository": {
@@ -10,6 +10,7 @@
   },
   "files": [
     "lib",
+    "!lib/**/*.map",
     "!lib/analysis",
     "README.md",
     "LICENSE",
@@ -41,21 +42,21 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@pyreon/core": "^0.14.0",
-    "@pyreon/reactivity": "^0.14.0",
-    "@pyreon/runtime-dom": "^0.14.0",
-    "@pyreon/test-utils": "^0.13.2",
-    "@pyreon/typescript": "^0.14.0",
+    "@pyreon/core": "^0.16.0",
+    "@pyreon/reactivity": "^0.16.0",
+    "@pyreon/runtime-dom": "^0.16.0",
+    "@pyreon/test-utils": "^0.13.3",
+    "@pyreon/typescript": "^0.16.0",
     "@vitest/browser-playwright": "^4.1.4",
-    "@vitus-labs/tools-rolldown": "^1.15.3"
-  },
-  "peerDependencies": {
-    "@pyreon/core": "^0.14.0",
-    "@pyreon/reactivity": "^0.14.0",
-    "@pyreon/ui-core": "^0.14.0",
-    "@pyreon/unistyle": "^0.14.0"
+    "@vitus-labs/tools-rolldown": "^2.3.0"
   },
   "engines": {
     "node": ">= 22"
+  },
+  "dependencies": {
+    "@pyreon/core": "^0.16.0",
+    "@pyreon/reactivity": "^0.16.0",
+    "@pyreon/ui-core": "^0.16.0",
+    "@pyreon/unistyle": "^0.16.0"
   }
 }

package/src/Element/component.tsx

@@ -11,6 +11,7 @@ import { onMount, splitProps } from '@pyreon/core'
 import { render } from '@pyreon/ui-core'
 import { PKG_NAME } from '../constants'
 import { Content, Wrapper } from '../helpers'
+import { internElementBundle } from '../helpers/internElementBundle'
 import WrapperStyled from '../helpers/Wrapper/styled'
 import { isWebFixNeeded } from '../helpers/Wrapper/utils'
 import { IS_DEVELOPMENT } from '../utils'
@@ -136,9 +137,20 @@ const Component: PyreonElement = (props) => {
   }
 
   if (own.equalBeforeAfter && own.beforeContent && own.afterContent) {
+    // Run once on mount AND continue equalizing as the element resizes —
+    // catches async slot content (font swaps, lazy text, viewport resize)
+    // that a one-shot measurement would miss. Mirrors vitus-labs's Element
+    // useLayoutEffect + ResizeObserver pattern.
     onMount(() => {
-      if (equalizeRef) equalize(equalizeRef, own.direction)
-      return undefined
+      const node = equalizeRef
+      if (!node) return undefined
+
+      equalize(node, own.direction)
+
+      if (typeof ResizeObserver === 'undefined') return undefined
+      const observer = new ResizeObserver(() => equalize(node, own.direction))
+      observer.observe(node)
+      return () => observer.disconnect()
     })
   }
 
@@ -180,14 +192,14 @@ const Component: PyreonElement = (props) => {
         {...WRAPPER_DEV_PROPS}
         ref={mergedRef}
         as={own.tag}
-        $element={{
+        $element={internElementBundle({
           block: own.block,
           direction: wrapperDirection,
           alignX: wrapperAlignX,
           alignY: wrapperAlignY,
           equalCols: own.equalCols,
           extraStyles: own.css,
-        }}
+        })}
       >
         {render(getChildren())}
       </WrapperStyled>