@pyreon/elements 0.24.4 → 0.24.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/elements",
-  "version": "0.24.4",
+  "version": "0.24.6",
   "description": "Foundational UI components for Pyreon",
   "license": "MIT",
   "repository": {
@@ -13,8 +13,7 @@
     "!lib/**/*.map",
     "!lib/analysis",
     "README.md",
-    "LICENSE",
-    "src"
+    "LICENSE"
   ],
   "type": "module",
   "sideEffects": false,
@@ -22,7 +21,6 @@
   "types": "./lib/index.d.ts",
   "exports": {
     ".": {
-      "bun": "./src/index.ts",
       "import": "./lib/index.js",
       "types": "./lib/index.d.ts"
     }
@@ -42,12 +40,12 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@pyreon/core": "^0.24.4",
+    "@pyreon/core": "^0.24.6",
     "@pyreon/manifest": "0.13.1",
-    "@pyreon/reactivity": "^0.24.4",
-    "@pyreon/runtime-dom": "^0.24.4",
+    "@pyreon/reactivity": "^0.24.6",
+    "@pyreon/runtime-dom": "^0.24.6",
     "@pyreon/test-utils": "^0.13.11",
-    "@pyreon/typescript": "^0.24.4",
+    "@pyreon/typescript": "^0.24.6",
     "@vitest/browser-playwright": "^4.1.4",
     "@vitus-labs/tools-rolldown": "^2.4.0"
   },
@@ -55,9 +53,9 @@
     "node": ">= 22"
   },
   "dependencies": {
-    "@pyreon/core": "^0.24.4",
-    "@pyreon/reactivity": "^0.24.4",
-    "@pyreon/ui-core": "^0.24.4",
-    "@pyreon/unistyle": "^0.24.4"
+    "@pyreon/core": "^0.24.6",
+    "@pyreon/reactivity": "^0.24.6",
+    "@pyreon/ui-core": "^0.24.6",
+    "@pyreon/unistyle": "^0.24.6"
   }
 }

package/src/Element/component.tsx

@@ -1,315 +0,0 @@
-/**
- * Core building block of the elements package. Renders a three-section layout
- * (beforeContent / content / afterContent) inside a flex Wrapper. When only
- * content is present, the Wrapper inherits content-level alignment directly
- * to avoid an unnecessary nesting layer. Handles HTML-specific edge cases
- * like void elements (input, img) and inline elements (span, a) by
- * skipping children or switching sub-tags accordingly.
- */
-
-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'
-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
-
-  if (beforeEl && afterEl && beforeEl !== afterEl) {
-    const type: 'height' | 'width' = direction === 'rows' ? 'height' : 'width'
-    const prop = type === 'height' ? 'offsetHeight' : 'offsetWidth'
-    const beforeSize = beforeEl[prop]
-    const afterSize = afterEl[prop]
-
-    if (Number.isInteger(beforeSize) && Number.isInteger(afterSize)) {
-      const maxSize = `${Math.max(beforeSize, afterSize)}px`
-      beforeEl.style[type] = maxSize
-      afterEl.style[type] = maxSize
-    }
-  }
-}
-
-const defaultDirection = 'inline'
-const defaultContentDirection = 'rows'
-const defaultAlignX = 'left'
-const defaultAlignY = 'center'
-
-const Component: PyreonElement = (props) => {
-  const [own, rest] = splitProps(props, [
-    'innerRef',
-    'tag',
-    'label',
-    'content',
-    'children',
-    'beforeContent',
-    'afterContent',
-    'equalBeforeAfter',
-    'block',
-    'equalCols',
-    'gap',
-    'direction',
-    'alignX',
-    'alignY',
-    'css',
-    'contentCss',
-    'beforeContentCss',
-    'afterContentCss',
-    'contentDirection',
-    'contentAlignX',
-    'contentAlignY',
-    'beforeContentDirection',
-    'beforeContentAlignX',
-    'beforeContentAlignY',
-    'afterContentDirection',
-    'afterContentAlignX',
-    'afterContentAlignY',
-    'ref',
-  ])
-
-  const alignX = own.alignX ?? defaultAlignX
-  const alignY = own.alignY ?? defaultAlignY
-  const contentDirection = own.contentDirection ?? defaultContentDirection
-  const contentAlignX = own.contentAlignX ?? defaultAlignX
-  const contentAlignY = own.contentAlignY ?? defaultAlignY
-  const beforeContentDirection = own.beforeContentDirection ?? defaultDirection
-  const beforeContentAlignX = own.beforeContentAlignX ?? defaultAlignX
-  const beforeContentAlignY = own.beforeContentAlignY ?? defaultAlignY
-  const afterContentDirection = own.afterContentDirection ?? defaultDirection
-  const afterContentAlignX = own.afterContentAlignX ?? defaultAlignX
-  const afterContentAlignY = own.afterContentAlignY ?? defaultAlignY
-
-  // --------------------------------------------------------
-  // check if should render only single element
-  // --------------------------------------------------------
-  const shouldBeEmpty = !!rest.dangerouslySetInnerHTML || getShouldBeEmpty(own.tag)
-
-  // --------------------------------------------------------
-  // if not single element, calculate values
-  // --------------------------------------------------------
-  const isSimpleElement = !own.beforeContent && !own.afterContent
-  // Getter — preserves reactivity of own.content (which may be _rp() wrapped).
-  // 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
-
-  // --------------------------------------------------------
-  // direction & alignX & alignY calculations
-  // --------------------------------------------------------
-  let wrapperDirection: typeof own.direction = own.direction
-  let wrapperAlignX: typeof alignX = alignX
-  let wrapperAlignY: typeof alignY = alignY
-
-  if (isSimpleElement) {
-    if (contentDirection) wrapperDirection = contentDirection
-    if (contentAlignX) wrapperAlignX = contentAlignX
-    if (contentAlignY) wrapperAlignY = contentAlignY
-  } else if (own.direction) {
-    wrapperDirection = own.direction
-  } else {
-    wrapperDirection = defaultDirection
-  }
-
-  // --------------------------------------------------------
-  // equalBeforeAfter: measure & equalize slot dimensions
-  // --------------------------------------------------------
-  let equalizeRef: HTMLElement | null = null
-  const externalRef = own.ref ?? own.innerRef
-
-  const mergedRef = (node: HTMLElement | null) => {
-    equalizeRef = node
-    if (typeof externalRef === 'function') (externalRef as (el: HTMLElement | null) => void)(node)
-    else if (externalRef != null) {
-      ;(externalRef as unknown as { current: HTMLElement | null }).current = node
-    }
-  }
-
-  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(() => {
-      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()
-    })
-  }
-
-  // --------------------------------------------------------
-  // common wrapper props
-  // --------------------------------------------------------
-  const WRAPPER_PROPS = {
-    ref: mergedRef,
-    extendCss: own.css,
-    tag: own.tag,
-    block: own.block,
-    direction: wrapperDirection,
-    alignX: wrapperAlignX,
-    alignY: wrapperAlignY,
-    as: undefined, // reset styled-components `as` prop
-  }
-
-  // --------------------------------------------------------
-  // return simple/empty element like input or image etc.
-  // --------------------------------------------------------
-  if (shouldBeEmpty) {
-    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,
-        })}
-      >
-        {() => resolveSlot(getChildren())}
-      </WrapperStyled>
-    )
-  }
-
-  if (isSimpleElement) {
-    return (
-      <Wrapper {...rest} {...WRAPPER_PROPS} isInline={isInline}>
-        {() => resolveSlot(getChildren())}
-      </Wrapper>
-    )
-  }
-
-  return (
-    <Wrapper {...rest} {...WRAPPER_PROPS} isInline={isInline}>
-      {own.beforeContent && (
-        <Content
-          tag={SUB_TAG}
-          contentType="before"
-          parentDirection={wrapperDirection}
-          extendCss={own.beforeContentCss}
-          direction={beforeContentDirection}
-          alignX={beforeContentAlignX}
-          alignY={beforeContentAlignY}
-          equalCols={own.equalCols}
-          gap={own.gap}
-        >
-          {() => resolveSlot(own.beforeContent)}
-        </Content>
-      )}
-
-      <Content
-        tag={SUB_TAG}
-        contentType="content"
-        parentDirection={wrapperDirection}
-        extendCss={own.contentCss}
-        direction={contentDirection}
-        alignX={contentAlignX}
-        alignY={contentAlignY}
-        equalCols={own.equalCols}
-      >
-        {() => resolveSlot(getChildren())}
-      </Content>
-
-      {own.afterContent && (
-        <Content
-          tag={SUB_TAG}
-          contentType="after"
-          parentDirection={wrapperDirection}
-          extendCss={own.afterContentCss}
-          direction={afterContentDirection}
-          alignX={afterContentAlignX}
-          alignY={afterContentAlignY}
-          equalCols={own.equalCols}
-          gap={own.gap}
-        >
-          {() => resolveSlot(own.afterContent)}
-        </Content>
-      )}
-    </Wrapper>
-  )
-}
-
-const name = `${PKG_NAME}/Element` as const
-
-Component.displayName = name
-Component.pkgName = PKG_NAME
-Component.PYREON__COMPONENT = name
-
-export default Component

package/src/Element/constants.ts

@@ -1,96 +0,0 @@
-/** Props consumed by Element that should not be forwarded to the underlying DOM node. */
-export const RESERVED_PROPS = [
-  'innerRef',
-  'tag',
-  'block',
-  'label',
-  'children',
-  'beforeContent',
-  'afterContent',
-
-  'equalCols',
-  'vertical',
-  'direction',
-  'alignX',
-  'alignY',
-
-  'css',
-  'contentCss',
-  'beforeContentCss',
-  'afterContentCss',
-
-  'contentDirection',
-  'contentAlignX',
-  'contentAlignY',
-
-  'beforeContentDirection',
-  'beforeContentAlignX',
-  'beforeContentAlignY',
-
-  'afterContentDirection',
-  'afterContentAlignX',
-  'afterContentAlignY',
-] as const
-
-/**
- * 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.
- */
-export 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.
- */
-export 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,
-  // 'meta': true,
-  // 'param': true,
-  source: true,
-  track: true,
-  wbr: true,
-}

package/src/Element/index.ts

@@ -1,6 +0,0 @@
-import component from './component'
-import type { Props, PyreonElement } from './types'
-
-export type { Props as ElementProps, PyreonElement }
-
-export { component as Element }

package/src/Element/types.ts

@@ -1,168 +0,0 @@
-import type { ComponentFn, PyreonHTMLAttributes } from '@pyreon/core'
-import type { HTMLTags } from '@pyreon/ui-core'
-import type {
-  AlignX,
-  AlignY,
-  Content,
-  Direction,
-  ExtendCss,
-  InnerRef,
-  PyreonStatic,
-  Responsive,
-  ResponsiveBoolType,
-} from '../types'
-
-export type Props = Partial<{
-  /**
-   * Valid HTML Tag
-   */
-  tag: HTMLTags
-
-  /**
-   * Ref prop, alternative to `ref`
-   */
-  innerRef: InnerRef
-
-  /**
-   * Valid `children`
-   */
-  children: Content
-
-  /**
-   * Alternative prop to `children`
-   * It is recommended to pass only one of `children`, `content` or `label` props
-   *
-   * The prioritization of rendering is following: `children` → `content` → `label`
-   */
-  content: Content
-
-  /**
-   * Alternative prop to `children`
-   * It is recommended to pass only one of `children`, `content` or `label` props
-   *
-   * The prioritization of rendering is following: `children` → `content` → `label`
-   */
-  label: Content
-
-  /**
-   * Valid `children` to be rendered inside _beforeContent_ wrapper
-   */
-  beforeContent: Content
-
-  /**
-   * Valid `children` to be rendered inside _afterContent_ wrapper
-   */
-  afterContent: Content
-
-  /**
-   * A boolean type to define whether **Element** should behave
-   * as an inline or block element (`flex` vs. `inline-flex`)
-   */
-  block: ResponsiveBoolType
-
-  /**
-   * A boolean type to define whether inner wrappers should be equal
-   * (have the same width or height)
-   */
-  equalCols: ResponsiveBoolType
-
-  /**
-   * When true, measures the `beforeContent` and `afterContent` slot wrappers
-   * after render and sets both to the larger dimension so they match.
-   */
-  equalBeforeAfter: boolean
-
-  /**
-   * Defines a `gap` spacing between inner wrappers
-   */
-  gap: Responsive
-
-  /**
-   * Defines direction of inner wrappers
-   */
-  direction: Direction
-
-  /**
-   * Defines flow of `children` elements within its inner wrapper.
-   */
-  contentDirection: Direction
-
-  /**
-   * Defines flow of `beforeContent` elements within its inner wrapper.
-   */
-  beforeContentDirection: Direction
-
-  /**
-   * Defines flow of `afterContent` elements within its inner wrapper.
-   */
-  afterContentDirection: Direction
-
-  /**
-   * Define alignment horizontally.
-   */
-  alignX: AlignX
-
-  /**
-   * Defines how `content` children are aligned horizontally.
-   */
-  contentAlignX: AlignX
-
-  /**
-   * Defines how `beforeContent` children are aligned horizontally.
-   */
-  beforeContentAlignX: AlignX
-
-  /**
-   * Defines how `afterContent` children are aligned horizontally.
-   */
-  afterContentAlignX: AlignX
-
-  /**
-   * Define alignment vertically.
-   */
-  alignY: AlignY
-
-  /**
-   * Defines how `content` children are aligned vertically.
-   */
-  contentAlignY: AlignY
-
-  /**
-   * Defines how `beforeContent` children are aligned vertically.
-   */
-  beforeContentAlignY: AlignY
-
-  /**
-   * Defines how `afterContent` children are aligned vertically.
-   */
-  afterContentAlignY: AlignY
-
-  /**
-   * `dangerouslySetInnerHTML` prop
-   */
-  dangerouslySetInnerHTML: { __html: string }
-
-  /**
-   * An additional prop for extending styling of the **root** wrapper element
-   */
-  css: ExtendCss
-
-  /**
-   * An additional prop for extending styling of the **content** wrapper element.
-   */
-  contentCss: ExtendCss
-
-  /**
-   * An additional prop for extending styling of the **beforeContent** wrapper element.
-   */
-  beforeContentCss: ExtendCss
-
-  /**
-   * An additional prop for extending styling of the **afterContent** wrapper element.
-   */
-  afterContentCss: ExtendCss
-}> &
-  PyreonHTMLAttributes
-
-export type PyreonElement<P extends Record<string, unknown> = {}> = ComponentFn<Props & P> &
-  PyreonStatic

package/src/Element/utils.ts

@@ -1,15 +0,0 @@
-import { EMPTY_ELEMENTS, INLINE_ELEMENTS } from './constants'
-
-type GetValue = (tag?: string) => boolean
-
-/** Checks whether the given HTML tag is an inline-level element, used to determine sub-tag nesting. */
-export const isInlineElement: GetValue = (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. */
-export const getShouldBeEmpty: GetValue = (tag) => {
-  if (tag && tag in EMPTY_ELEMENTS) return true
-  return false
-}