@pyreon/elements 0.13.1 → 0.15.0

package/lib/index.d.ts

@@ -1,8 +1,8 @@
 import { Provider } from "@pyreon/unistyle";
-import * as _pyreon_core0 from "@pyreon/core";
+import * as _$_pyreon_core0 from "@pyreon/core";
 import { ComponentFn, PyreonHTMLAttributes, VNodeChild } from "@pyreon/core";
 import { BreakpointKeys, HTMLTags, HTMLTextTags, config, render } from "@pyreon/ui-core";
-import * as _pyreon_reactivity0 from "@pyreon/reactivity";
+import * as _$_pyreon_reactivity0 from "@pyreon/reactivity";
 
 //#region src/types.d.ts
 type ExtractNullableKeys<T> = { [P in keyof T as T[P] extends null | undefined ? never : P]: T[P] };
@@ -256,7 +256,7 @@ interface OverlayContext {
 }
 declare const Component$3: (props: OverlayContext & {
   children: VNodeChild;
-}) => _pyreon_core0.VNode;
+}) => _$_pyreon_core0.VNode;
 //#endregion
 //#region src/Overlay/positioning.d.ts
 type Align$1 = 'bottom' | 'top' | 'left' | 'right';
@@ -304,10 +304,10 @@ declare const useOverlay: ({
 }?: Partial<UseOverlayProps>) => {
   triggerRef: (node: HTMLElement | null) => void;
   contentRef: (node: HTMLElement | null) => void;
-  active: _pyreon_reactivity0.Signal<boolean>;
+  active: _$_pyreon_reactivity0.Signal<boolean>;
   align: Align$1;
-  alignX: _pyreon_reactivity0.Signal<AlignX$2>;
-  alignY: _pyreon_reactivity0.Signal<AlignY$2>;
+  alignX: _$_pyreon_reactivity0.Signal<AlignX$2>;
+  alignY: _$_pyreon_reactivity0.Signal<AlignY$2>;
   showContent: () => void;
   hideContent: () => void;
   blocked: () => boolean;
@@ -315,8 +315,8 @@ declare const useOverlay: ({
   setUnblocked: () => void;
   setupListeners: () => () => void;
   Provider: (props: OverlayContext & {
-    children: _pyreon_core0.VNodeChild;
-  }) => _pyreon_core0.VNode;
+    children: _$_pyreon_core0.VNodeChild;
+  }) => _$_pyreon_core0.VNode;
 };
 //#endregion
 //#region src/Overlay/component.d.ts

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, 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
 /**
@@ -292,36 +355,47 @@ 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);
+	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
+		});
+		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
+	});
 	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 +405,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
 /**
@@ -416,6 +415,7 @@ const getShouldBeEmpty = (tag) => {
 * like void elements (input, img) and inline elements (span, a) by
 * skipping children or switching sub-tags accordingly.
 */
+const WRAPPER_DEV_PROPS = IS_DEVELOPMENT ? { "data-pyr-element": "Element" } : {};
 const equalize = (el, direction) => {
 	const beforeEl = el.firstElementChild;
 	const afterEl = el.lastElementChild;
@@ -515,6 +515,28 @@ const Component = (props) => {
 		...rest,
 		...WRAPPER_PROPS
 	});
+	const needsFix = !rest.dangerouslySetInnerHTML && isWebFixNeeded(own.tag);
+	if (isSimpleElement && !needsFix) return /* @__PURE__ */ jsx(styled_default$1, {
+		...rest,
+		...WRAPPER_DEV_PROPS,
+		ref: mergedRef,
+		as: own.tag,
+		$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, {
+		...rest,
+		...WRAPPER_PROPS,
+		isInline,
+		children: render(getChildren())
+	});
 	return /* @__PURE__ */ jsxs(Wrapper_default, {
 		...rest,
 		...WRAPPER_PROPS,
@@ -532,7 +554,7 @@ const Component = (props) => {
 				gap: own.gap,
 				children: own.beforeContent
 			}),
-			isSimpleElement ? render(getChildren()) : /* @__PURE__ */ jsx(Content_default, {
+			/* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
 				contentType: "content",
 				parentDirection: wrapperDirection,
@@ -753,6 +775,7 @@ const Component$3 = (props) => {
 	});
 	return /* @__PURE__ */ jsx(Fragment$1, { children: props.children });
 };
+nativeCompat(Component$3);
 
 //#endregion
 //#region src/Overlay/positioning.ts
@@ -1209,6 +1232,7 @@ 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

package/package.json

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

package/src/Element/component.tsx

@@ -11,9 +11,17 @@ 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'
 import type { PyreonElement } from './types'
 import { getShouldBeEmpty, isInlineElement } from './utils'
 
+const WRAPPER_DEV_PROPS: Record<string, string> = IS_DEVELOPMENT
+  ? { 'data-pyr-element': 'Element' }
+  : {}
+
 const equalize = (el: HTMLElement, direction: unknown) => {
   const beforeEl = el.firstElementChild as HTMLElement | null
   const afterEl = el.lastElementChild as HTMLElement | null
@@ -156,6 +164,45 @@ const Component: PyreonElement = (props) => {
     return <Wrapper {...rest} {...WRAPPER_PROPS} />
   }
 
+  // Simple-Element fast path: no beforeContent / afterContent slots, and no
+  // button/fieldset/legend two-layer flex fix needed. Inline the Wrapper
+  // helper directly into a single Styled invocation — saves one component
+  // hop, one splitProps call, and one mountChild per Element. The Wrapper
+  // helper still exists for the rare needsFix case below; tests that asserted
+  // Wrapper appears in the VNode tree are updated to the new shape.
+  const dangerouslySetInnerHTML = (rest as { dangerouslySetInnerHTML?: unknown })
+    .dangerouslySetInnerHTML
+  const needsFix = !dangerouslySetInnerHTML && isWebFixNeeded(own.tag)
+
+  if (isSimpleElement && !needsFix) {
+    return (
+      <WrapperStyled
+        {...rest}
+        {...WRAPPER_DEV_PROPS}
+        ref={mergedRef}
+        as={own.tag}
+        $element={internElementBundle({
+          block: own.block,
+          direction: wrapperDirection,
+          alignX: wrapperAlignX,
+          alignY: wrapperAlignY,
+          equalCols: own.equalCols,
+          extraStyles: own.css,
+        })}
+      >
+        {render(getChildren())}
+      </WrapperStyled>
+    )
+  }
+
+  if (isSimpleElement) {
+    return (
+      <Wrapper {...rest} {...WRAPPER_PROPS} isInline={isInline}>
+        {render(getChildren())}
+      </Wrapper>
+    )
+  }
+
   return (
     <Wrapper {...rest} {...WRAPPER_PROPS} isInline={isInline}>
       {own.beforeContent && (
@@ -174,22 +221,18 @@ const Component: PyreonElement = (props) => {
         </Content>
       )}
 
-      {isSimpleElement ? (
-        render(getChildren())
-      ) : (
-        <Content
-          tag={SUB_TAG}
-          contentType="content"
-          parentDirection={wrapperDirection}
-          extendCss={own.contentCss}
-          direction={contentDirection}
-          alignX={contentAlignX}
-          alignY={contentAlignY}
-          equalCols={own.equalCols}
-        >
-          {getChildren()}
-        </Content>
-      )}
+      <Content
+        tag={SUB_TAG}
+        contentType="content"
+        parentDirection={wrapperDirection}
+        extendCss={own.contentCss}
+        direction={contentDirection}
+        alignX={contentAlignX}
+        alignY={contentAlignY}
+        equalCols={own.equalCols}
+      >
+        {getChildren()}
+      </Content>
 
       {own.afterContent && (
         <Content

package/src/Overlay/component.tsx

@@ -7,7 +7,7 @@
  */
 
 import type { VNodeChild } from '@pyreon/core'
-import { onMount, Portal, splitProps } from '@pyreon/core'
+import { nativeCompat, onMount, Portal, splitProps } from '@pyreon/core'
 import { render } from '@pyreon/ui-core'
 import { PKG_NAME } from '../constants'
 import type { Content, PyreonComponent } from '../types'
@@ -132,4 +132,9 @@ Component.displayName = name
 Component.pkgName = PKG_NAME
 Component.PYREON__COMPONENT = name
 
+// Mark as native — compat-mode jsx() runtimes skip wrapCompatComponent so
+// Overlay's onMount + Portal + useOverlay hook setup run inside Pyreon's
+// setup frame.
+nativeCompat(Component)
+
 export default Component

package/src/Overlay/context.tsx

@@ -5,7 +5,7 @@
  */
 
 import type { VNodeChild } from '@pyreon/core'
-import { createContext, provide, useContext } from '@pyreon/core'
+import { createContext, nativeCompat, provide, useContext } from '@pyreon/core'
 
 export interface OverlayContext {
   blocked: boolean | (() => boolean)
@@ -29,4 +29,8 @@ const Component = (props: OverlayContext & { children: VNodeChild }) => {
   return <>{props.children}</>
 }
 
+// Mark as native — invoked by Overlay internally; needs Pyreon's setup
+// frame for provide(context, ...) to reach descendant overlays.
+nativeCompat(Component)
+
 export default Component