@pyreon/elements 0.24.2 → 0.24.4

package/lib/index.js

@@ -11,6 +11,49 @@ const PKG_NAME = "@pyreon/elements";
 //#region src/utils.ts
 const IS_DEVELOPMENT = process.env.NODE_ENV !== "production";
 
+//#endregion
+//#region src/helpers/isPyreonComponent.ts
+/**
+* Detect whether a function value is a framework component (created via
+* `rocketstyle()` or one of `@pyreon/elements`' component factories), as
+* opposed to a plain reactive-accessor function.
+*
+* Used by `Element` / `Content` `resolveSlot` to discriminate between
+*   `beforeContent={Header}` — component-reference shorthand, MUST mount
+*     as `h(Component, null)` so the framework HOC's
+*     `removeUndefinedProps(props)` / `splitProps(props)` get the
+*     default-filled props object, not bare `undefined`.
+*   `beforeContent={() => <Header />}` — reactive accessor, MUST be called
+*     so its body's signal reads land inside the enclosing
+*     `mountReactive` effect.
+*
+* Both are `typeof === 'function'`. The discriminator is the marker
+* attached by each factory:
+*   - `IS_ROCKETSTYLE` — set by `@pyreon/rocketstyle` (`rocketstyle.ts:527`,
+*     `542`) on every `rocketstyle(...).config(...)` chain end-point.
+*   - `PYREON__COMPONENT` — set by every `@pyreon/elements` component
+*     factory (Element, Text, List, Portal, Overlay, Util, Content,
+*     Wrapper, …).
+*   - `pkgName` — same components also carry this; checked as a fallback
+*     in case a third-party package mirrors the elements convention.
+*
+* Plain bare-function components without any marker (e.g.
+* `const MyComp = () => <div />`) intentionally take the accessor path
+* — they don't access props, so calling them with no args is safe AND
+* returns the VNode the renderer expects. The marker check ONLY rescues
+* components whose HOC pipelines REQUIRE props to be defined.
+*
+* Reference: regression report on 0.24.3 / PR #839 — `resolveSlot` called
+* any function-valued slot bare, crashing real consumers (bokisch.com
+* SSG build: `Prerendered 0 page(s) + 404.html`) that used the
+* `beforeContent={Component}` shorthand documented since the original
+* Element API.
+*/
+function isPyreonComponent(value) {
+	if (typeof value !== "function") return false;
+	return Object.hasOwn(value, "IS_ROCKETSTYLE") || Object.hasOwn(value, "PYREON__COMPONENT") || Object.hasOwn(value, "pkgName");
+}
+
 //#endregion
 //#region src/helpers/Content/styled.ts
 /**
@@ -91,8 +134,18 @@ const StyledComponent = styled$2(component$1, { layer: "elements" })`
 * gap, and equalCols styling props to the underlying styled component.
 * Adds a `data-pyr-element` attribute in development for debugging.
 *
-* Children are rendered via core `render()`.
+* Children are rendered via core `render()`, with function-valued
+* children unwrapped inside a reactive accessor so the compound-layout
+* paths in `Element` keep `content={() => <X />}` reactivity intact
+* (mirrors the `resolveSlot` helper in `Element/component.tsx`).
 */
+const resolveSlot = (value) => {
+	if (typeof value === "function") {
+		if (isPyreonComponent(value)) return h(value, null);
+		return value();
+	}
+	return render(value);
+};
 const Component$9 = (props) => {
 	const [own, rest] = splitProps(props, [
 		"contentType",
@@ -123,7 +176,7 @@ const Component$9 = (props) => {
 		$element: stylingProps,
 		...debugProps,
 		...rest,
-		children: render(own.children)
+		children: () => resolveSlot(own.children)
 	});
 };
 
@@ -508,6 +561,13 @@ const Component = (props) => {
 	const shouldBeEmpty = !!rest.dangerouslySetInnerHTML || getShouldBeEmpty(own.tag);
 	const isSimpleElement = !own.beforeContent && !own.afterContent;
 	const getChildren = () => own.children ?? own.content ?? own.label;
+	const resolveSlot = (value) => {
+		if (typeof value === "function") {
+			if (isPyreonComponent(value)) return h(value, null);
+			return value();
+		}
+		return render(value);
+	};
 	const isInline = isInlineElement(own.tag);
 	const SUB_TAG = isInline ? "span" : void 0;
 	let wrapperDirection = own.direction;
@@ -563,13 +623,13 @@ const Component = (props) => {
 			equalCols: own.equalCols,
 			extraStyles: own.css
 		}),
-		children: render(getChildren())
+		children: () => resolveSlot(getChildren())
 	});
 	if (isSimpleElement) return /* @__PURE__ */ jsx(Wrapper_default, {
 		...rest,
 		...WRAPPER_PROPS,
 		isInline,
-		children: render(getChildren())
+		children: () => resolveSlot(getChildren())
 	});
 	return /* @__PURE__ */ jsxs(Wrapper_default, {
 		...rest,
@@ -586,7 +646,7 @@ const Component = (props) => {
 				alignY: beforeContentAlignY,
 				equalCols: own.equalCols,
 				gap: own.gap,
-				children: own.beforeContent
+				children: () => resolveSlot(own.beforeContent)
 			}),
 			/* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
@@ -597,7 +657,7 @@ const Component = (props) => {
 				alignX: contentAlignX,
 				alignY: contentAlignY,
 				equalCols: own.equalCols,
-				children: getChildren()
+				children: () => resolveSlot(getChildren())
 			}),
 			own.afterContent && /* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
@@ -609,7 +669,7 @@ const Component = (props) => {
 				alignY: afterContentAlignY,
 				equalCols: own.equalCols,
 				gap: own.gap,
-				children: own.afterContent
+				children: () => resolveSlot(own.afterContent)
 			})
 		]
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/elements",
-  "version": "0.24.2",
+  "version": "0.24.4",
   "description": "Foundational UI components for Pyreon",
   "license": "MIT",
   "repository": {
@@ -42,12 +42,12 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@pyreon/core": "^0.24.2",
+    "@pyreon/core": "^0.24.4",
     "@pyreon/manifest": "0.13.1",
-    "@pyreon/reactivity": "^0.24.2",
-    "@pyreon/runtime-dom": "^0.24.2",
+    "@pyreon/reactivity": "^0.24.4",
+    "@pyreon/runtime-dom": "^0.24.4",
     "@pyreon/test-utils": "^0.13.11",
-    "@pyreon/typescript": "^0.24.2",
+    "@pyreon/typescript": "^0.24.4",
     "@vitest/browser-playwright": "^4.1.4",
     "@vitus-labs/tools-rolldown": "^2.4.0"
   },
@@ -55,9 +55,9 @@
     "node": ">= 22"
   },
   "dependencies": {
-    "@pyreon/core": "^0.24.2",
-    "@pyreon/reactivity": "^0.24.2",
-    "@pyreon/ui-core": "^0.24.2",
-    "@pyreon/unistyle": "^0.24.2"
+    "@pyreon/core": "^0.24.4",
+    "@pyreon/reactivity": "^0.24.4",
+    "@pyreon/ui-core": "^0.24.4",
+    "@pyreon/unistyle": "^0.24.4"
   }
 }

package/src/Element/component.tsx

@@ -7,11 +7,13 @@
  * skipping children or switching sub-tags accordingly.
  */
 
-import { onMount, splitProps } from '@pyreon/core'
+import { h, onMount, splitProps } from '@pyreon/core'
+import type { ComponentFn, VNodeChildAtom } 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 { isPyreonComponent } from '../helpers/isPyreonComponent'
 import WrapperStyled from '../helpers/Wrapper/styled'
 import { isWebFixNeeded } from '../helpers/Wrapper/utils'
 import { IS_DEVELOPMENT } from '../utils'
@@ -102,6 +104,46 @@ const Component: PyreonElement = (props) => {
   // Reading own.content via ?? at setup would capture the value once.
   const getChildren = () => own.children ?? own.content ?? own.label
 
+  // Resolve a slot value INSIDE a reactive accessor. If the consumer passed a
+  // function-returning-VNode (e.g. `content={() => <Icon name={signal()} />}`),
+  // unwrap it by calling — its body's signal reads are then tracked by the
+  // enclosing mountReactive effect, and the slot re-renders on signal change.
+  // Static VNodes / strings / null pass through unchanged to `render()`.
+  //
+  // **Component vs accessor discriminator** (regression fix for the
+  // 0.24.3 → 0.24.4 follow-up — see #839 for the original reactive-slot fix):
+  // `beforeContent={Header}` (component-reference shorthand) and
+  // `content={() => <X />}` (reactive accessor) are BOTH `typeof === 'function'`.
+  // PR #839 called both bare, which crashed component shorthands the moment a
+  // rocketstyle / attrs HOC ran `removeUndefinedProps(undefined)` on the
+  // un-supplied props (`TypeError: Cannot convert undefined or null to object`).
+  //
+  // Discriminator: framework components carry one of two markers attached by
+  // their factory:
+  //   - `IS_ROCKETSTYLE` — anything `rocketstyle()` produces
+  //   - `PYREON__COMPONENT` / `pkgName` — `@pyreon/elements` components
+  //     (Element, Text, List, Portal, Overlay, Util)
+  // Marked function → mount as `h(Component, null)` (no props, defaults
+  // fill in via the HOC pipeline). Unmarked function → reactive accessor,
+  // called bare so its return value (a VNode) renders. Bare-function
+  // components without HOC wrapping (e.g. `const MyComp = () => <div />`)
+  // also work via the accessor path — they're called with no args and
+  // their VNode return goes through `render()` correctly. The marker
+  // check ONLY rescues components that REQUIRE props to be defined.
+  //
+  // Return type is the RESOLVED atom (VNodeChildAtom | VNodeChildAtom[]) —
+  // never a nested accessor — so the enclosing `() => resolveSlot(...)` IS
+  // a valid VNodeChildAccessor in the JSX child position.
+  const resolveSlot = (value: unknown): VNodeChildAtom | VNodeChildAtom[] => {
+    if (typeof value === 'function') {
+      if (isPyreonComponent(value)) {
+        return h(value as ComponentFn, null) as VNodeChildAtom
+      }
+      return (value as () => VNodeChildAtom | VNodeChildAtom[])()
+    }
+    return render(value as Parameters<typeof render>[0]) as VNodeChildAtom | VNodeChildAtom[]
+  }
+
   const isInline = isInlineElement(own.tag)
   const SUB_TAG = isInline ? 'span' : undefined
 
@@ -201,7 +243,7 @@ const Component: PyreonElement = (props) => {
           extraStyles: own.css,
         })}
       >
-        {render(getChildren())}
+        {() => resolveSlot(getChildren())}
       </WrapperStyled>
     )
   }
@@ -209,7 +251,7 @@ const Component: PyreonElement = (props) => {
   if (isSimpleElement) {
     return (
       <Wrapper {...rest} {...WRAPPER_PROPS} isInline={isInline}>
-        {render(getChildren())}
+        {() => resolveSlot(getChildren())}
       </Wrapper>
     )
   }
@@ -228,7 +270,7 @@ const Component: PyreonElement = (props) => {
           equalCols={own.equalCols}
           gap={own.gap}
         >
-          {own.beforeContent}
+          {() => resolveSlot(own.beforeContent)}
         </Content>
       )}
 
@@ -242,7 +284,7 @@ const Component: PyreonElement = (props) => {
         alignY={contentAlignY}
         equalCols={own.equalCols}
       >
-        {getChildren()}
+        {() => resolveSlot(getChildren())}
       </Content>
 
       {own.afterContent && (
@@ -257,7 +299,7 @@ const Component: PyreonElement = (props) => {
           equalCols={own.equalCols}
           gap={own.gap}
         >
-          {own.afterContent}
+          {() => resolveSlot(own.afterContent)}
         </Content>
       )}
     </Wrapper>

package/src/__tests__/Content.test.tsx

@@ -76,9 +76,17 @@ describe('Content component', () => {
     expect(result.props['data-pyr-element']).toBe('after')
   })
 
-  it('passes children through render()', () => {
+  it('passes children through render() when the slot accessor is invoked', () => {
+    // Content wraps its children in a reactive accessor `() => resolveSlot(...)`
+    // — render() is no longer called synchronously at component setup. The
+    // accessor is invoked by the runtime when the JSX child position mounts;
+    // here we invoke it directly to assert the wiring. The
+    // function-unwrap-then-render shape is what keeps `content={() => <X/>}`
+    // slot reactivity working (see Element-slot-reactivity.browser.test.tsx).
     const children = 'Some text'
-    Content({ children })
+    const result = asVNode(Content({ children }))
+    expect(typeof result.props.children).toBe('function')
+    ;(result.props.children as () => unknown)()
     expect(mocks.render).toHaveBeenCalledWith(children)
   })
 

package/src/__tests__/Element-slot-reactivity.browser.test.tsx

@@ -0,0 +1,152 @@
+/** @jsxImportSource @pyreon/core */
+/**
+ * Regression specs for the Element slot reactivity bug.
+ *
+ * Pre-fix: `<Element content={() => <Icon name={signal()} />}>` evaluated the
+ * function once at mount and baked in the result. Signal changes inside the
+ * function body did NOT cause the slot to re-render — even though the
+ * `getChildren` helper in Element/component.tsx had a getter shape intended
+ * to preserve reactivity.
+ *
+ * Root cause: the JSX child position read the resolved slot value at
+ * component-setup time. The runtime's `mountChild` reactive-function-child
+ * handling (`mountReactive`) was never reached because the function was
+ * passed to `render()` which treated it as a component (one-shot mount),
+ * not as a reactive accessor.
+ *
+ * Fix: wrap the JSX child position in `{() => ...}` so it becomes a
+ * reactive accessor that mountChild routes through mountReactive.
+ * Slot values that are themselves functions get unwrapped (called) inside
+ * the accessor so their body's signal reads are tracked by the effect.
+ *
+ * Bisect-verify-with-restore: revert the wrap → these tests fail with
+ * stuck slot content; restore → tests pass.
+ */
+import { describe, expect, it } from 'vitest'
+import { signal } from '@pyreon/reactivity'
+import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
+import { Element } from '../Element'
+
+describe('Element slot reactivity — function-valued slot props', () => {
+  it('content={() => <X />} re-renders when a signal inside the function body changes', async () => {
+    const dark = signal(false)
+    const { container, unmount } = mountInBrowser(
+      <Element
+        tag="div"
+        data-id="root"
+        content={() => <span data-id="icon">{dark() ? 'moon' : 'sun'}</span>}
+      />,
+    )
+
+    expect(container.querySelector('[data-id="icon"]')?.textContent).toBe('sun')
+    dark.set(true)
+    await flush()
+    expect(container.querySelector('[data-id="icon"]')?.textContent).toBe('moon')
+    dark.set(false)
+    await flush()
+    expect(container.querySelector('[data-id="icon"]')?.textContent).toBe('sun')
+    unmount()
+  })
+
+  it('beforeContent={() => <X />} re-renders when a signal inside changes', async () => {
+    const count = signal(0)
+    const { container, unmount } = mountInBrowser(
+      <Element
+        tag="div"
+        data-id="root"
+        beforeContent={() => <span data-id="badge">{`#${count()}`}</span>}
+        content={<span data-id="main">main</span>}
+      />,
+    )
+
+    expect(container.querySelector('[data-id="badge"]')?.textContent).toBe('#0')
+    count.set(5)
+    await flush()
+    expect(container.querySelector('[data-id="badge"]')?.textContent).toBe('#5')
+    unmount()
+  })
+
+  it('afterContent={() => <X />} re-renders when a signal inside changes', async () => {
+    const tag = signal('draft')
+    const { container, unmount } = mountInBrowser(
+      <Element
+        tag="div"
+        data-id="root"
+        content={<span data-id="main">main</span>}
+        afterContent={() => <span data-id="status">{tag()}</span>}
+      />,
+    )
+
+    expect(container.querySelector('[data-id="status"]')?.textContent).toBe('draft')
+    tag.set('published')
+    await flush()
+    expect(container.querySelector('[data-id="status"]')?.textContent).toBe('published')
+    unmount()
+  })
+
+  it('static VNode content (non-function) still works unchanged', () => {
+    // Regression guard for the static path — no function unwrap should
+    // happen here.
+    const { container, unmount } = mountInBrowser(
+      <Element tag="div" content={<span data-id="static">hello</span>} />,
+    )
+    expect(container.querySelector('[data-id="static"]')?.textContent).toBe('hello')
+    unmount()
+  })
+
+  it('static beforeContent + afterContent still render (compound path)', () => {
+    const { container, unmount } = mountInBrowser(
+      <Element
+        tag="div"
+        beforeContent={<span data-id="b">before</span>}
+        content={<span data-id="c">main</span>}
+        afterContent={<span data-id="a">after</span>}
+      />,
+    )
+    expect(container.querySelector('[data-id="b"]')?.textContent).toBe('before')
+    expect(container.querySelector('[data-id="c"]')?.textContent).toBe('main')
+    expect(container.querySelector('[data-id="a"]')?.textContent).toBe('after')
+    unmount()
+  })
+
+  it('null slot stays unrendered; flipping a signal can introduce it', async () => {
+    const show = signal(false)
+    const { container, unmount } = mountInBrowser(
+      <Element
+        tag="div"
+        data-id="root"
+        content={() => (show() ? <span data-id="present">shown</span> : null)}
+      />,
+    )
+    expect(container.querySelector('[data-id="present"]')).toBeNull()
+    show.set(true)
+    await flush()
+    expect(container.querySelector('[data-id="present"]')?.textContent).toBe('shown')
+    show.set(false)
+    await flush()
+    expect(container.querySelector('[data-id="present"]')).toBeNull()
+    unmount()
+  })
+
+  it('children prop (priority over content) — function form is reactive in compound layout', async () => {
+    // children takes priority over content per getChildren's `??` chain.
+    // Compound layout (when beforeContent OR afterContent exists) routes
+    // through a different render path than the simple-element fast path —
+    // both must handle function children reactively.
+    const text = signal('first')
+    const { container, unmount } = mountInBrowser(
+      <Element
+        tag="div"
+        beforeContent={<span data-id="b">b</span>}
+        afterContent={<span data-id="a">a</span>}
+      >
+        {() => <span data-id="kid">{text()}</span>}
+      </Element>,
+    )
+    expect(container.querySelector('[data-id="kid"]')?.textContent).toBe('first')
+    text.set('second')
+    await flush()
+    expect(container.querySelector('[data-id="kid"]')?.textContent).toBe('second')
+    unmount()
+  })
+})

package/src/__tests__/Element.test.ts

@@ -137,7 +137,13 @@ describe('Element', () => {
       // Simple element fast path — passes children as a single value, not a
       // 3-slot array wrapping falsy beforeContent/afterContent. This avoids
       // 2 extra mountChild calls per Element in the common case.
-      expect(result.props.children).toBe('hello')
+      //
+      // Children are wrapped in a reactive accessor (`() => resolveSlot(...)`)
+      // so function-valued slot props (e.g. `content={() => <X />}`) stay
+      // reactive — see `Element-slot-reactivity.browser.test.tsx`. The
+      // accessor's RESOLVED value is the string `'hello'`.
+      expect(typeof result.props.children).toBe('function')
+      expect((result.props.children as () => unknown)()).toBe('hello')
     })
 
     it('passes block prop to Wrapper', () => {
@@ -606,8 +612,11 @@ describe('Element', () => {
     it('prefers children over content', () => {
       const result = asVNode(Element({ children: 'child', content: 'alt' }))
       // Simple-element fast path returns children directly. The fallback
-      // chain (children → content → label) is exercised inside getChildren().
-      expect(result.props.children).toBe('child')
+      // chain (children → content → label) is exercised inside getChildren(),
+      // which runs INSIDE the reactive accessor wrap — so invoking the
+      // accessor reveals the resolved value.
+      expect(typeof result.props.children).toBe('function')
+      expect((result.props.children as () => unknown)()).toBe('child')
     })
 
     it('falls back to content when no children', () => {

package/src/__tests__/slot-component-reference.test.tsx

@@ -0,0 +1,157 @@
+// Regression: 0.24.3 (PR #839) added `resolveSlot` to make function-valued
+// slot props reactive — `content={() => <X name={signal()} />}`. The
+// implementation calls ANY function-typed slot value with no args, which
+// crashes when the consumer passes a COMPONENT reference using the
+// shorthand `beforeContent={Header}` (Header is `typeof === 'function'`
+// too — `resolveSlot` calls it with no props, downstream
+// `removeUndefinedProps(undefined)` throws
+// `TypeError: Cannot convert undefined or null to object`).
+//
+// Reported by a real consumer (bokisch.com 0.24.3 → SSG build fails on
+// every route that uses `beforeContent={Component}` shorthand —
+// `Prerendered 0 page(s) + 404.html`).
+//
+// The discriminator: framework component functions carry a marker
+// (`IS_ROCKETSTYLE` for rocketstyle wrappers, `PYREON__COMPONENT` for
+// `@pyreon/elements` components). `resolveSlot` must mount marked
+// components via `h(Component, null)` instead of calling bare.
+import type { VNode, VNodeChild } from '@pyreon/core'
+import { h } from '@pyreon/core'
+import { describe, expect, it } from 'vitest'
+import Element from '../Element/component'
+
+// Match the bokisch.com bug shape: a rocketstyle-marked component used
+// as a slot reference (NOT wrapped in `() => <Logo />`). The body
+// requires non-undefined props — calling it with no args throws,
+// exactly mirroring the real `removeUndefinedProps(undefined)` crash.
+function makeRocketstyleStub(name: string, content: string) {
+  const Component: any = (props: { className?: string } | undefined) => {
+    Object.getOwnPropertyDescriptors(props as object)
+    return h('div', { 'data-component': name, class: props?.className }, content)
+  }
+  Component.IS_ROCKETSTYLE = true
+  Component.displayName = name
+  return Component
+}
+
+// Match the @pyreon/elements framework-component shape.
+function makeElementStub(name: string, content: string) {
+  const Component: any = (props: { className?: string } | undefined) => {
+    Object.getOwnPropertyDescriptors(props as object)
+    return h('div', { 'data-component': name, class: props?.className }, content)
+  }
+  Component.PYREON__COMPONENT = `@pyreon/elements/${name}`
+  Component.pkgName = '@pyreon/elements'
+  return Component
+}
+
+/**
+ * Walk Element's VNode tree to find ALL accessor-function children and
+ * invoke them. Element wraps slot rendering as `{() => resolveSlot(value)}`
+ * in the JSX child position — those closures are what mount the slot, and
+ * are what crashes in the broken state when `value` is a component
+ * reference. Calling the closures mirrors how runtime-dom and
+ * runtime-server invoke them during render.
+ *
+ * Returns the array of accessor results in tree order.
+ */
+function invokeAllSlotAccessors(root: VNode): unknown[] {
+  const results: unknown[] = []
+  const visit = (node: VNodeChild | unknown): void => {
+    if (typeof node === 'function') {
+      // Reactive-accessor child position
+      results.push((node as () => unknown)())
+      return
+    }
+    if (!node || typeof node !== 'object' || Array.isArray(node)) {
+      if (Array.isArray(node)) node.forEach(visit)
+      return
+    }
+    const vnode = node as VNode & { props?: { children?: unknown } }
+    // Pyreon `h()` stores JSX children in BOTH `vnode.children` (array)
+    // AND `props.children` (single value). The slot-accessor closure
+    // typically lands in `props.children` when passed explicitly.
+    if (vnode.props && 'children' in vnode.props) {
+      visit(vnode.props.children)
+    }
+    if (Array.isArray(vnode.children)) vnode.children.forEach(visit)
+    else if (vnode.children) visit(vnode.children as VNodeChild)
+  }
+  visit(root)
+  return results
+}
+
+describe('Element slot — component-reference shorthand (regression #839 follow-up)', () => {
+  it('beforeContent={RocketstyleComponent} mounts via h(Component) — does NOT crash', () => {
+    const Logo = makeRocketstyleStub('Logo', 'logo')
+    const result = Element({
+      tag: 'header',
+      beforeContent: Logo,
+      content: 'title',
+    }) as VNode
+    expect(() => invokeAllSlotAccessors(result)).not.toThrow()
+  })
+
+  it('afterContent={RocketstyleComponent} does not crash', () => {
+    const Badge = makeRocketstyleStub('Badge', 'NEW')
+    const result = Element({
+      tag: 'header',
+      content: 'title',
+      afterContent: Badge,
+    }) as VNode
+    expect(() => invokeAllSlotAccessors(result)).not.toThrow()
+  })
+
+  it('content={RocketstyleComponent} (simple-element fast path) yields h(Component) VNode', () => {
+    const Header = makeRocketstyleStub('Header', 'page header')
+    const result = Element({ tag: 'header', content: Header }) as VNode
+    const results = invokeAllSlotAccessors(result)
+    expect(results.length).toBeGreaterThan(0)
+    // First accessor result is the slot content. It must be the VNode
+    // `h(Header, null)` — NOT the result of calling Header bare (which
+    // would crash in the broken state, OR succeed in pre-PR-839 state
+    // by accident if Header doesn't access props).
+    const first = results[0] as VNode
+    expect(first.type).toBe(Header)
+  })
+
+  it('content={ElementComponent} (PYREON__COMPONENT marker) yields h(Component) VNode', () => {
+    const Inner = makeElementStub('Inner', 'inner')
+    const result = Element({ tag: 'section', content: Inner }) as VNode
+    const results = invokeAllSlotAccessors(result)
+    expect(results.length).toBeGreaterThan(0)
+    const first = results[0] as VNode
+    expect(first.type).toBe(Inner)
+  })
+
+  // Counter-cases — the discriminator must NOT break the reactive-accessor
+  // shape PR #839 fixed.
+  it('content={() => <X />} (plain accessor) still calls function bare — reactive intact', () => {
+    let called = 0
+    const accessor = () => {
+      called++
+      return h('div', { 'data-accessor': 'called' }, 'accessor-output')
+    }
+    const result = Element({ tag: 'div', content: accessor }) as VNode
+    const results = invokeAllSlotAccessors(result)
+    expect(called).toBeGreaterThan(0)
+    // Returns the VNode the accessor produced (NOT an `h(accessor, null)` wrap).
+    const first = results[0] as VNode
+    expect(first.type).toBe('div')
+  })
+
+  it('beforeContent={() => h(Component)} (accessor returning a VNode) still works', () => {
+    const Logo = makeRocketstyleStub('Logo', 'logo')
+    let called = 0
+    const result = Element({
+      tag: 'header',
+      beforeContent: () => {
+        called++
+        return h(Logo, null)
+      },
+      content: 'title',
+    }) as VNode
+    expect(() => invokeAllSlotAccessors(result)).not.toThrow()
+    expect(called).toBeGreaterThan(0)
+  })
+})

package/src/helpers/Content/component.tsx

@@ -4,14 +4,36 @@
  * gap, and equalCols styling props to the underlying styled component.
  * Adds a `data-pyr-element` attribute in development for debugging.
  *
- * Children are rendered via core `render()`.
+ * Children are rendered via core `render()`, with function-valued
+ * children unwrapped inside a reactive accessor so the compound-layout
+ * paths in `Element` keep `content={() => <X />}` reactivity intact
+ * (mirrors the `resolveSlot` helper in `Element/component.tsx`).
  */
-import { splitProps } from '@pyreon/core'
+import { h, splitProps } from '@pyreon/core'
+import type { ComponentFn, VNodeChildAtom } from '@pyreon/core'
 import { render } from '@pyreon/ui-core'
 import { IS_DEVELOPMENT } from '../../utils'
+import { isPyreonComponent } from '../isPyreonComponent'
 import Styled from './styled'
 import type { Props } from './types'
 
+// Return type is the RESOLVED atom — see the matching helper in
+// Element/component.tsx for the rationale (keeps `() => resolveSlot(...)`
+// a valid VNodeChildAccessor at the JSX child position).
+//
+// Component vs accessor discriminator — see `isPyreonComponent` JSDoc.
+// Without this, `beforeContent={Component}` shorthand crashes downstream
+// in rocketstyle's `removeUndefinedProps(undefined)`.
+const resolveSlot = (value: unknown): VNodeChildAtom | VNodeChildAtom[] => {
+  if (typeof value === 'function') {
+    if (isPyreonComponent(value)) {
+      return h(value as ComponentFn, null) as VNodeChildAtom
+    }
+    return (value as () => VNodeChildAtom | VNodeChildAtom[])()
+  }
+  return render(value as Parameters<typeof render>[0]) as VNodeChildAtom | VNodeChildAtom[]
+}
+
 const Component = (props: Partial<Props>) => {
   const [own, rest] = splitProps(props, [
     'contentType',
@@ -45,7 +67,7 @@ const Component = (props: Partial<Props>) => {
 
   return (
     <Styled as={own.tag} $contentType={own.contentType} $element={stylingProps} {...debugProps} {...rest}>
-      {render(own.children)}
+      {() => resolveSlot(own.children)}
     </Styled>
   )
 }

package/src/helpers/isPyreonComponent.ts

@@ -0,0 +1,46 @@
+/**
+ * Detect whether a function value is a framework component (created via
+ * `rocketstyle()` or one of `@pyreon/elements`' component factories), as
+ * opposed to a plain reactive-accessor function.
+ *
+ * Used by `Element` / `Content` `resolveSlot` to discriminate between
+ *   `beforeContent={Header}` — component-reference shorthand, MUST mount
+ *     as `h(Component, null)` so the framework HOC's
+ *     `removeUndefinedProps(props)` / `splitProps(props)` get the
+ *     default-filled props object, not bare `undefined`.
+ *   `beforeContent={() => <Header />}` — reactive accessor, MUST be called
+ *     so its body's signal reads land inside the enclosing
+ *     `mountReactive` effect.
+ *
+ * Both are `typeof === 'function'`. The discriminator is the marker
+ * attached by each factory:
+ *   - `IS_ROCKETSTYLE` — set by `@pyreon/rocketstyle` (`rocketstyle.ts:527`,
+ *     `542`) on every `rocketstyle(...).config(...)` chain end-point.
+ *   - `PYREON__COMPONENT` — set by every `@pyreon/elements` component
+ *     factory (Element, Text, List, Portal, Overlay, Util, Content,
+ *     Wrapper, …).
+ *   - `pkgName` — same components also carry this; checked as a fallback
+ *     in case a third-party package mirrors the elements convention.
+ *
+ * Plain bare-function components without any marker (e.g.
+ * `const MyComp = () => <div />`) intentionally take the accessor path
+ * — they don't access props, so calling them with no args is safe AND
+ * returns the VNode the renderer expects. The marker check ONLY rescues
+ * components whose HOC pipelines REQUIRE props to be defined.
+ *
+ * Reference: regression report on 0.24.3 / PR #839 — `resolveSlot` called
+ * any function-valued slot bare, crashing real consumers (bokisch.com
+ * SSG build: `Prerendered 0 page(s) + 404.html`) that used the
+ * `beforeContent={Component}` shorthand documented since the original
+ * Element API.
+ */
+export function isPyreonComponent(value: unknown): boolean {
+  if (typeof value !== 'function') return false
+  // `Object.hasOwn` (not `in`) so a marker on a parent prototype doesn't
+  // count — the marker is always an own-property in the factories.
+  return (
+    Object.hasOwn(value, 'IS_ROCKETSTYLE') ||
+    Object.hasOwn(value, 'PYREON__COMPONENT') ||
+    Object.hasOwn(value, 'pkgName')
+  )
+}