@pyreon/ui-core 0.24.5 → 0.25.0

package/src/config.ts

@@ -1,57 +0,0 @@
-import type { StyledFunction } from '@pyreon/styler'
-import { css, keyframes, styled } from '@pyreon/styler'
-import type { HTMLTags } from './html'
-
-/**
- * Describes the shape of the CSS-in-JS engine.
- * Pyreon uses @pyreon/styler directly — no connector abstraction needed.
- * This type is kept for API compatibility with downstream packages.
- */
-export interface CSSEngineConnector {
-  css: typeof css
-  styled: typeof styled
-  keyframes: typeof keyframes
-}
-
-interface PlatformConfig {
-  component: string | HTMLTags
-  textComponent: string | HTMLTags
-  createMediaQueries?: (props: {
-    breakpoints: Record<string, number>
-    rootSize: number
-    css: CSSEngineConnector['css']
-  }) => Record<string, (...args: any[]) => any>
-}
-
-type InitConfig = Partial<CSSEngineConnector & PlatformConfig>
-
-/**
- * Configuration singleton that bridges the UI system with the CSS engine.
- * All packages reference config.css, config.styled, etc.
- *
- * In Pyreon, the engine is @pyreon/styler and is available immediately —
- * no lazy initialization or connector pattern needed.
- */
-class Configuration {
-  css = css
-  styled: StyledFunction = styled
-  keyframes = keyframes
-  component: string | HTMLTags = 'div'
-  textComponent: string | HTMLTags = 'span'
-  createMediaQueries: PlatformConfig['createMediaQueries'] = undefined
-
-  init = (props: InitConfig) => {
-    if (props.css) this.css = props.css
-    if (props.styled) this.styled = props.styled
-    if (props.keyframes) this.keyframes = props.keyframes
-    if (props.component) this.component = props.component
-    if (props.textComponent) this.textComponent = props.textComponent
-    if (props.createMediaQueries) this.createMediaQueries = props.createMediaQueries
-  }
-}
-
-const config = new Configuration()
-const { init } = config
-
-export default config
-export { init }

package/src/context.tsx

@@ -1,80 +0,0 @@
-import type { VNodeChild } from '@pyreon/core'
-import { createReactiveContext, nativeCompat, provide } from '@pyreon/core'
-import isEmpty from './isEmpty'
-import type { Breakpoints } from './types'
-
-/**
- * Core context value shared across all @pyreon UI packages.
- */
-export interface CoreContextValue {
-  theme: Record<string, unknown>
-  mode: 'light' | 'dark'
-  isDark: boolean
-  isLight: boolean
-}
-
-/**
- * Internal reactive context shared across all @pyreon packages.
- * Carries the theme object, mode, and derived dark/light flags.
- *
- * ReactiveContext means useContext() returns `() => CoreContextValue`.
- */
-const context = createReactiveContext<CoreContextValue>({
-  theme: {},
-  mode: 'light',
-  isDark: false,
-  isLight: true,
-})
-
-type Theme = Partial<
-  {
-    rootSize: number
-    breakpoints: Breakpoints
-  } & Record<string, any>
->
-
-type ProviderType = Partial<
-  {
-    theme: Theme
-    children: VNodeChild
-  } & Record<string, any>
->
-
-/**
- * @internal Low-level provider — use `PyreonUI` from `@pyreon/ui-core` instead.
- *
- * Provider that feeds the internal Pyreon context with the theme.
- * When no theme is supplied, renders children directly.
- *
- * @deprecated Prefer `<PyreonUI theme={theme}>` which handles all context layers.
- */
-function Provider({ theme, children, ...props }: ProviderType): VNodeChild {
-  if (process.env.NODE_ENV !== 'production') {
-    // oxlint-disable-next-line no-console
-    console.warn(
-      '[Pyreon] CoreProvider is internal. Use <PyreonUI theme={theme}> instead — it handles all context layers (styler, core, mode) in one component.',
-    )
-  }
-  if (isEmpty(theme) || !theme) return children ?? null
-
-  provide(context, () => ({
-    theme: theme as Record<string, unknown>,
-    mode: (props.mode as 'light' | 'dark') ?? 'light',
-    isDark: props.isDark as boolean ?? false,
-    isLight: props.isLight as boolean ?? true,
-    ...props,
-  }))
-
-  return children ?? null
-}
-
-// Mark as native — even though @internal, PyreonUI invokes this internally
-// AND the JSX inside PyreonUI's body still routes through the active jsx()
-// runtime (which is the compat one in compat-mode apps). Without the marker,
-// CoreProvider's body runs inside the compat wrapper's runUntracked and its
-// provide() call is swallowed.
-nativeCompat(Provider)
-
-export { context }
-
-export default Provider

package/src/hoistNonReactStatics.ts

@@ -1,59 +0,0 @@
-const KNOWN_STATICS: Record<string, true> = {
-  name: true,
-  length: true,
-  prototype: true,
-  caller: true,
-  callee: true,
-  arguments: true,
-  arity: true,
-}
-
-const COMPONENT_STATICS: Record<string, true> = {
-  displayName: true,
-  defaultProps: true,
-}
-
-/**
- * Copies non-framework static properties from a source component to a target.
- *
- * Pyreon equivalent of hoistNonReactStatics — simplified since Pyreon
- * components are plain functions without React-specific statics like
- * contextType, propTypes, getDerivedStateFromProps, etc.
- */
-const hoistNonReactStatics = <T, S>(
-  target: T,
-  source: S,
-  excludeList?: Record<string, true>,
-): T => {
-  if (typeof source === 'string') return target
-
-  const proto = Object.getPrototypeOf(source)
-  if (proto && proto !== Object.prototype) {
-    hoistNonReactStatics(target, proto, excludeList)
-  }
-
-  const keys: (string | symbol)[] = [
-    ...Object.getOwnPropertyNames(source),
-    ...Object.getOwnPropertySymbols(source),
-  ]
-
-  for (const key of keys) {
-    const k = key as string
-    if (KNOWN_STATICS[k] || excludeList?.[k] || COMPONENT_STATICS[k]) {
-      continue
-    }
-
-    const descriptor = Object.getOwnPropertyDescriptor(source, key)
-    if (descriptor) {
-      try {
-        Object.defineProperty(target, key, descriptor)
-      } catch {
-        // Silently skip non-configurable properties
-      }
-    }
-  }
-
-  return target
-}
-
-export default hoistNonReactStatics

package/src/html/htmlElementAttrs.ts

@@ -1,106 +0,0 @@
-type Base = HTMLElement
-
-export interface HTMLElementAttrs {
-  a: HTMLAnchorElement
-  abbr: Base
-  address: Base
-  area: HTMLAreaElement
-  article: Base
-  aside: Base
-  audio: HTMLAudioElement
-  b: Base
-  bdi: Base
-  bdo: Base
-  big: Base
-  blockquote: HTMLQuoteElement
-  body: HTMLBodyElement
-  br: HTMLBRElement
-  button: HTMLButtonElement
-  canvas: HTMLCanvasElement
-  caption: Base
-  cite: HTMLQuoteElement
-  code: Base
-  col: HTMLTableColElement
-  colgroup: HTMLTableColElement
-  data: HTMLDataElement
-  datalist: HTMLDataListElement
-  dd: Base
-  del: HTMLModElement
-  details: HTMLDetailsElement
-  dfn: Base
-  dialog: HTMLDialogElement
-  div: HTMLDivElement
-  dl: HTMLDListElement
-  dt: Base
-  em: Base
-  embed: HTMLEmbedElement
-  fieldset: HTMLFieldSetElement
-  figcaption: Base
-  figure: Base
-  footer: Base
-  form: HTMLFormElement
-  h1: HTMLHeadingElement
-  h2: HTMLHeadingElement
-  h3: HTMLHeadingElement
-  h4: HTMLHeadingElement
-  h5: HTMLHeadingElement
-  h6: HTMLHeadingElement
-  header: Base
-  hr: HTMLHRElement
-  html: HTMLHtmlElement
-  i: Base
-  iframe: HTMLIFrameElement
-  img: HTMLImageElement
-  input: HTMLInputElement
-  ins: HTMLModElement
-  kbd: Base
-  label: HTMLLabelElement
-  legend: HTMLLegendElement
-  li: HTMLLIElement
-  main: Base
-  map: HTMLMapElement
-  mark: Base
-  meter: HTMLMeterElement
-  nav: Base
-  object: HTMLObjectElement
-  ol: HTMLOListElement
-  optgroup: HTMLOptGroupElement
-  option: HTMLOptionElement
-  output: HTMLOutputElement
-  p: HTMLParagraphElement
-  picture: Base
-  pre: HTMLPreElement
-  progress: HTMLProgressElement
-  q: HTMLQuoteElement
-  rp: Base
-  rt: Base
-  ruby: Base
-  s: Base
-  samp: Base
-  section: Base
-  select: HTMLSelectElement
-  small: Base
-  source: HTMLSourceElement
-  span: HTMLSpanElement
-  strong: Base
-  sub: Base
-  summary: Base
-  sup: Base
-  svg: SVGSVGElement
-  table: HTMLTableElement
-  tbody: HTMLTableSectionElement
-  td: HTMLTableCellElement
-  template: HTMLTemplateElement
-  textarea: HTMLTextAreaElement
-  tfoot: HTMLTableSectionElement
-  th: HTMLTableCellElement
-  thead: HTMLTableSectionElement
-  time: HTMLTimeElement
-  tr: HTMLTableRowElement
-  track: HTMLTrackElement
-  u: Base
-  ul: HTMLUListElement
-  var: Base
-  video: HTMLVideoElement
-  wbr: Base
-}

package/src/html/htmlTags.ts

@@ -1,151 +0,0 @@
-const HTML_TAGS = [
-  'a',
-  'abbr',
-  'address',
-  'area',
-  'article',
-  'aside',
-  'audio',
-  'b',
-  'bdi',
-  'bdo',
-  'big',
-  'blockquote',
-  'body',
-  'br',
-  'button',
-  'canvas',
-  'caption',
-  'cite',
-  'code',
-  'col',
-  'colgroup',
-  'data',
-  'datalist',
-  'dd',
-  'del',
-  'details',
-  'dfn',
-  'dialog',
-  'div',
-  'dl',
-  'dt',
-  'em',
-  'embed',
-  'fieldset',
-  'figcaption',
-  'figure',
-  'footer',
-  'form',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'header',
-  'hr',
-  'html',
-  'i',
-  'iframe',
-  'img',
-  'input',
-  'ins',
-  'kbd',
-  'label',
-  'legend',
-  'li',
-  'main',
-  'map',
-  'mark',
-  'meter',
-  'nav',
-  'object',
-  'ol',
-  'optgroup',
-  'option',
-  'output',
-  'p',
-  'picture',
-  'pre',
-  'progress',
-  'q',
-  'rp',
-  'rt',
-  'ruby',
-  's',
-  'samp',
-  'section',
-  'select',
-  'small',
-  'source',
-  'span',
-  'strong',
-  'sub',
-  'summary',
-  'sup',
-  'svg',
-  'table',
-  'tbody',
-  'td',
-  'template',
-  'textarea',
-  'tfoot',
-  'th',
-  'thead',
-  'time',
-  'tr',
-  'track',
-  'u',
-  'ul',
-  'var',
-  'video',
-  'wbr',
-] as const
-
-const HTML_TEXT_TAGS = [
-  'abbr',
-  'b',
-  'bdi',
-  'bdo',
-  'big',
-  'blockquote',
-  'cite',
-  'code',
-  'del',
-  'div',
-  'dl',
-  'dt',
-  'em',
-  'figcaption',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'i',
-  'ins',
-  'kbd',
-  'label',
-  'legend',
-  'li',
-  'p',
-  'pre',
-  'q',
-  'rp',
-  'rt',
-  's',
-  'small',
-  'span',
-  'strong',
-  'sub',
-  'summary',
-  'sup',
-  'time',
-  'u',
-] as const
-
-export type HTMLTags = (typeof HTML_TAGS)[number]
-export type HTMLTextTags = (typeof HTML_TEXT_TAGS)[number]
-export { HTML_TAGS, HTML_TEXT_TAGS }

package/src/html/index.ts

@@ -1,11 +0,0 @@
-import type { HTMLElementAttrs } from './htmlElementAttrs'
-import type { HTMLTags, HTMLTextTags } from './htmlTags'
-import { HTML_TAGS, HTML_TEXT_TAGS } from './htmlTags'
-
-type HTMLTagAttrsByTag<T extends HTMLTags> = T extends HTMLTags
-  ? HTMLElementAttrs[T]
-  : Record<string, never>
-
-export type { HTMLElementAttrs, HTMLTagAttrsByTag, HTMLTags, HTMLTextTags }
-
-export { HTML_TAGS, HTML_TEXT_TAGS }

package/src/index.ts

@@ -1,57 +0,0 @@
-import compose from './compose'
-import config, { init } from './config'
-import type { CoreContextValue } from './context'
-import Provider, { context } from './context'
-import hoistNonReactStatics from './hoistNonReactStatics'
-import type { HTMLElementAttrs, HTMLTagAttrsByTag, HTMLTags, HTMLTextTags } from './html'
-import { HTML_TAGS, HTML_TEXT_TAGS } from './html'
-import type { IsEmpty } from './isEmpty'
-import isEmpty from './isEmpty'
-import isEqual from './isEqual'
-import type { PyreonUIProps, ThemeMode, ThemeModeInput } from './PyreonUI'
-import { PyreonUI, useMode } from './PyreonUI'
-import type { Render } from './render'
-import render from './render'
-import type { BreakpointKeys, Breakpoints } from './types'
-import useStableValue from './useStableValue'
-import { get, merge, omit, pick, set, throttle } from './utils'
-
-export type { CSSEngineConnector } from './config'
-
-export type {
-  BreakpointKeys,
-  Breakpoints,
-  CoreContextValue,
-  HTMLElementAttrs,
-  HTMLTagAttrsByTag,
-  HTMLTags,
-  HTMLTextTags,
-  IsEmpty,
-  PyreonUIProps,
-  Render,
-  ThemeMode,
-  ThemeModeInput,
-}
-
-export {
-  compose,
-  config,
-  context,
-  get,
-  HTML_TAGS,
-  HTML_TEXT_TAGS,
-  hoistNonReactStatics,
-  init,
-  isEmpty,
-  isEqual,
-  merge,
-  omit,
-  Provider,
-  PyreonUI,
-  pick,
-  render,
-  set,
-  throttle,
-  useMode,
-  useStableValue,
-}

package/src/isEmpty.ts

@@ -1,20 +0,0 @@
-export type IsEmpty = <T extends Record<number | string, any> | any[] | null | undefined>(
-  param: T,
-) => T extends null | undefined
-  ? true
-  : keyof T extends never
-    ? true
-    : T extends T[]
-      ? T[number] extends never
-        ? true
-        : false
-      : false
-
-const isEmpty = (<T extends Record<number | string, any> | any[] | null | undefined>(param: T) => {
-  if (!param) return true
-  if (typeof param !== 'object') return true
-  if (Array.isArray(param)) return param.length === 0
-  return Object.keys(param).length === 0
-}) as IsEmpty
-
-export default isEmpty

package/src/isEqual.ts

@@ -1,27 +0,0 @@
-const isArrayEqual = (a: unknown[], b: unknown[]): boolean => {
-  if (a.length !== b.length) return false
-  for (let i = 0; i < a.length; i++) {
-    if (!isEqual(a[i], b[i])) return false
-  }
-  return true
-}
-
-const isObjectEqual = (a: Record<string, unknown>, b: Record<string, unknown>): boolean => {
-  const aKeys = Object.keys(a)
-  if (aKeys.length !== Object.keys(b).length) return false
-  for (const key of aKeys) {
-    if (!Object.hasOwn(b, key)) return false
-    if (!isEqual(a[key], b[key])) return false
-  }
-  return true
-}
-
-const isEqual = (a: unknown, b: unknown): boolean => {
-  if (Object.is(a, b)) return true
-  if (typeof a !== typeof b || a == null || b == null || typeof a !== 'object') return false
-  if (Array.isArray(a)) return Array.isArray(b) && isArrayEqual(a, b)
-  if (Array.isArray(b)) return false
-  return isObjectEqual(a as Record<string, unknown>, b as Record<string, unknown>)
-}
-
-export default isEqual

package/src/manifest.ts

@@ -1,104 +0,0 @@
-import { defineManifest } from '@pyreon/manifest'
-
-export default defineManifest({
-  name: '@pyreon/ui-core',
-  title: 'UI Provider + Config',
-  tagline:
-    'Unified `PyreonUI` provider (theme + mode + config), `useMode()` hook, init() escape hatch',
-  description:
-    'Foundation layer for the Pyreon UI system. `PyreonUI` is the single provider replacing the previous theme / mode / config split — it accepts a theme, a `mode` of `"light" | "dark" | "system"`, and an optional `inversed` flip, then auto-detects OS preference via `prefers-color-scheme` when `mode="system"`. `useMode()` returns the resolved mode as a reactive signal. The package also exposes the `init()` escape hatch (called internally by `PyreonUI` but available for SSR / test setups), the static `HTML_TAGS` / `HTML_TEXT_TAGS` lists used by the bases, and zero-dep utilities (`get`, `set`, `merge`, `pick`, `omit`, `throttle`, `isEmpty`, `isEqual`).',
-  category: 'browser',
-  features: [
-    'PyreonUI({ theme, mode, inversed }) — single provider replaces 3 separate providers',
-    'mode="system" auto-detects OS preference via matchMedia and updates reactively',
-    'useMode() returns Signal<"light" | "dark"> resolved against system preference + inversed',
-    'init() callable directly for custom environments (tests, SSR without PyreonUI)',
-    'enrichTheme() (re-exported from @pyreon/unistyle) merges user theme with defaults',
-    'Zero-dep utilities: get, set, merge, pick, omit, throttle, isEmpty, isEqual',
-    'HTML_TAGS / HTML_TEXT_TAGS constants drive Element / Text base tag dispatching',
-  ],
-  longExample: `import { PyreonUI, useMode } from '@pyreon/ui-core'
-import { enrichTheme } from '@pyreon/unistyle'
-
-// Single provider — wraps theme, mode, and config in one tree
-const theme = enrichTheme({
-  colors: { primary: '#3b82f6', secondary: '#6366f1' },
-  fonts: { body: 'Inter, sans-serif' },
-})
-
-const App = () => (
-  <PyreonUI theme={theme} mode="system">
-    <MyApp />
-  </PyreonUI>
-)
-
-// useMode() reads the resolved mode reactively
-function ThemeBadge() {
-  const mode = useMode()
-  return <div class={mode() === 'dark' ? 'badge-dark' : 'badge-light'}>{mode()}</div>
-}
-
-// inversed flips the resolved mode (light → dark and vice versa)
-const InvertedSection = () => (
-  <PyreonUI inversed>
-    <Sidebar />
-  </PyreonUI>
-)`,
-  api: [
-    {
-      name: 'PyreonUI',
-      kind: 'component',
-      signature:
-        "(props: { theme?: Theme; mode?: 'light' | 'dark' | 'system'; inversed?: boolean; children: VNodeChild }) => VNodeChild",
-      summary:
-        "Unified provider replacing the previous theme / mode / config split (3 nested providers became 1). Accepts an enriched `theme` object (merge with defaults via `enrichTheme()`), a `mode` of `'light' | 'dark' | 'system'`, and an optional `inversed` flip. When `mode='system'`, the provider subscribes to `matchMedia('(prefers-color-scheme: dark)')` and re-resolves the mode reactively. Calls `init()` internally so consumers don\\\'t need to wire it up themselves. Whole-theme swaps (user-preference themes) propagate through the styler resolver and re-resolve CSS without remounting the VNode.",
-      example: `import { PyreonUI } from "@pyreon/ui-core"
-import { enrichTheme } from "@pyreon/unistyle"
-
-const theme = enrichTheme({ colors: { primary: "#3b82f6" } })
-
-<PyreonUI theme={theme} mode="system">
-  <App />
-</PyreonUI>
-
-// mode="system" auto-detects OS dark mode via prefers-color-scheme
-// inversed flips the resolved mode (light↔dark)`,
-      mistakes: [
-        'Using `ThemeProvider` + `ModeProvider` + `ConfigProvider` separately — `PyreonUI` is the single replacement covering all three',
-        'Forgetting `enrichTheme()` — raw theme objects miss default breakpoints / spacing / unit utilities',
-        'Destructuring `props` inside the provider — components run once; destructuring captures values at setup. Read `props.mode` lazily inside reactive scopes',
-        'Re-augmenting the `ThemeDefault` / `StylesDefault` interfaces in your app — `@pyreon/ui-theme` already augments them; double-augmentation throws TS2320',
-      ],
-      seeAlso: ['useMode', 'enrichTheme', 'init'],
-    },
-    {
-      name: 'useMode',
-      kind: 'hook',
-      signature: "useMode(): Signal<'light' | 'dark'>",
-      summary:
-        "Returns the currently resolved mode as a reactive signal — `'light'` or `'dark'`. When the nearest `PyreonUI` ancestor uses `mode='system'`, the signal reflects the OS preference and updates when the user changes their system setting. When `inversed` is true on any ancestor, the mode is flipped before resolution. Component-scoped subscription — readers re-run only when the resolved mode actually changes.",
-      example: `import { useMode } from "@pyreon/ui-core"
-
-const mode = useMode()
-// mode() returns "light" or "dark" (resolved, reactive)
-// Reflects OS preference when PyreonUI mode="system"`,
-      mistakes: [
-        'Reading `useMode()` without calling it — the value is a `Signal`; use `mode()` to read',
-        'Using `useMode()` outside any `PyreonUI` ancestor — falls back to a default but loses the reactive system / inversed handling',
-      ],
-      seeAlso: ['PyreonUI'],
-    },
-  ],
-  gotchas: [
-    {
-      label: 'Provider replacement',
-      note:
-        'The legacy split (separate theme / mode / config providers) is removed. `PyreonUI` is the only correct mount; calling `init()` directly is the escape hatch for SSR or test environments where the provider tree is unavailable.',
-    },
-    {
-      label: 'System-mode subscription',
-      note:
-        '`mode="system"` lazily creates a `matchMedia(\'(prefers-color-scheme: dark)\')` subscription on first read; the listener stays alive for the document lifetime, so a single subscription handles every `useMode()` consumer.',
-    },
-  ],
-})