@pyreon/styler 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present Vit Bokisch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,283 @@
+# @pyreon/styler
+
+Lightweight CSS-in-JS engine for Pyreon.
+
+**3.81 KB** gzipped | **SSR & static export ready** | **TypeScript strict**
+
+## Installation
+
+```bash
+bun add @pyreon/styler
+```
+
+## Quick Start
+
+```ts
+import { styled, css, ThemeContext } from '@pyreon/styler'
+import { useContext, pushContext, popContext, onUnmount } from '@pyreon/core'
+
+const Button = styled('button')`
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 16px;
+  border-radius: 4px;
+  background: ${({ theme }) => theme.colors.primary};
+  color: white;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.9;
+  }
+`
+```
+
+## API
+
+### `styled(tag)`
+
+Creates a styled Pyreon component from an HTML tag or another component.
+
+```ts
+// HTML tag
+const Box = styled('div')`
+  display: flex;
+`
+
+// Shorthand (via Proxy)
+const Box = styled.div`
+  display: flex;
+`
+
+// Wrapping a component
+const StyledLink = styled(Link)`
+  color: blue;
+  text-decoration: none;
+`
+```
+
+#### Dynamic interpolations
+
+Function interpolations receive all props plus the current `theme`:
+
+```ts
+const Text = styled('p')`
+  color: ${({ theme }) => theme.colors.text};
+  font-size: ${(props) => props.$size || '16px'};
+`
+```
+
+#### Polymorphic `as` prop
+
+Render as a different element at runtime:
+
+```ts
+const Box = styled('div')`padding: 16px;`
+
+// Renders as a <section>
+Box({ as: 'section', children: 'Content' })
+```
+
+#### Transient props
+
+Props prefixed with `$` are not forwarded to the DOM:
+
+```ts
+const Box = styled('div')`
+  color: ${(p) => p.$active ? 'blue' : 'gray'};
+`
+
+// $active is used for styling but won't appear on the <div>
+Box({ $active: true })
+```
+
+#### Custom prop filtering
+
+```ts
+const Box = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'size',
+})`
+  font-size: ${(p) => p.size}px;
+`
+```
+
+### `css`
+
+Tagged template for composable CSS fragments:
+
+```ts
+const flexCenter = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const Card = styled('div')`
+  ${flexCenter};
+  padding: 16px;
+`
+```
+
+Supports conditional patterns:
+
+```ts
+const Box = styled('div')`
+  display: flex;
+  ${(props) => props.$bordered && css`
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+  `};
+`
+```
+
+### `keyframes`
+
+Creates `@keyframes` animations:
+
+```ts
+const fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`
+
+const FadeBox = styled('div')`
+  animation: ${fadeIn} 300ms ease-in;
+`
+```
+
+### `createGlobalStyle`
+
+Injects global CSS rules (not scoped to a class):
+
+```ts
+const GlobalStyle = createGlobalStyle`
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0;
+    font-family: ${({ theme }) => theme.font};
+  }
+`
+```
+
+### `ThemeContext` & `useTheme`
+
+Provides a theme object to all nested styled components via Pyreon's context system:
+
+```ts
+import { ThemeContext, useTheme } from '@pyreon/styler'
+import { pushContext, onUnmount, popContext } from '@pyreon/core'
+
+// Provide theme
+pushContext(new Map([[ThemeContext.id, myTheme]]))
+onUnmount(() => popContext())
+```
+
+Access the theme from any component:
+
+```ts
+const MyComponent = () => {
+  const theme = useTheme()
+  // use theme values
+}
+```
+
+#### TypeScript theme augmentation
+
+Extend `DefaultTheme` for strict typing across your app:
+
+```ts
+declare module '@pyreon/styler' {
+  interface DefaultTheme {
+    colors: { primary: string; text: string }
+    spacing: (n: number) => string
+  }
+}
+```
+
+### `sheet` & `createSheet`
+
+The singleton `sheet` manages CSS rule injection. For SSR, use `createSheet` for per-request isolation:
+
+```ts
+import { createSheet } from '@pyreon/styler'
+
+const sheet = createSheet()
+const html = renderToString(App({}))
+const styleTags = sheet.getStyleTag()
+sheet.reset()
+```
+
+#### `@layer` support
+
+Wrap all scoped rules in a CSS Cascade Layer:
+
+```ts
+const sheet = createSheet({ layer: 'components' })
+```
+
+## How It Works
+
+### Static path (zero runtime cost)
+
+Templates with no function interpolations are resolved **once at component creation time**. The CSS class, rules, and `<style>` element are pre-computed and cached.
+
+### Dynamic path
+
+Templates with function interpolations resolve on every render. A cache skips `sheet.prepare()` and `<style>` element creation when the resolved CSS text hasn't changed.
+
+### CSS Nesting
+
+Native CSS nesting is supported out of the box. The engine passes CSS through without transformation, so `&:hover`, `&::before`, nested selectors, and `@media` queries work as-is in all modern browsers.
+
+```ts
+const Card = styled('div')`
+  padding: 16px;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  & > h2 {
+    margin: 0 0 8px;
+  }
+
+  @media (min-width: 768px) {
+    padding: 24px;
+  }
+`
+```
+
+## Benchmarks
+
+### Bundle Size
+
+| Library | Minified | Gzipped |
+|---------|--------:|--------:|
+| goober | 2.32 KB | 1.31 KB |
+| **@pyreon/styler** | **10.13 KB** | **3.81 KB** |
+| styled-components | 44.93 KB | 17.89 KB |
+| @emotion/react + styled | 48.26 KB | 16.59 KB |
+
+### Performance (ops/sec, higher is better)
+
+| Benchmark | styler | styled-components | @emotion | goober |
+|-----------|-------:|-------------------:|---------:|-------:|
+| css() creation | **25.2M** | 9.0M | 2.2M | 26K |
+| css() with interpolations | **24.9M** | 5.6M | 2.3M | 28K |
+| Template resolution | **21.4M** | 3.9M | — | — |
+| Nested composition | **8.3M** | 2.2M | 1.4M | 8K |
+| SSR renderToString | **307K** | 69K | 192K | 18K |
+| styled() factory | **17.3M** | 109K | 933K | 18.2M |
+
+## Peer Dependencies
+
+| Package | Version |
+| ------- | ------- |
+| @pyreon/core | >= 0.0.1 |
+| @pyreon/reactivity | >= 0.0.1 |
+
+## License
+
+MIT

package/lib/index.d.ts

@@ -0,0 +1,212 @@
+import * as _pyreon_core0 from "@pyreon/core";
+import { ComponentFn, VNode, VNodeChild } from "@pyreon/core";
+
+//#region src/ThemeProvider.d.ts
+interface DefaultTheme {}
+type Theme = DefaultTheme & Record<string, unknown>;
+declare const ThemeContext: _pyreon_core0.Context<Theme>;
+/** Hook to read the current theme from the nearest ThemeProvider. */
+declare const useTheme: <T extends object = Theme>() => T;
+/** Provides a theme object to all nested styled components via Pyreon context. */
+declare function ThemeProvider({
+  theme,
+  children
+}: {
+  theme: Theme;
+  children?: VNodeChild;
+}): VNode | null;
+//#endregion
+//#region src/resolve.d.ts
+type Interpolation = string | number | boolean | null | undefined | CSSResult | Interpolation[] | ((props: {
+  theme?: DefaultTheme & Record<string, any>;
+  [key: string]: any;
+}) => Interpolation);
+/**
+ * Lazy representation of a `css` tagged template. Stores the raw template
+ * strings and interpolation values without resolving them. Resolution is
+ * deferred until a styled component renders (or until explicitly resolved).
+ */
+declare class CSSResult {
+  readonly strings: TemplateStringsArray;
+  readonly values: Interpolation[];
+  constructor(strings: TemplateStringsArray, values: Interpolation[]);
+  /** Resolve with empty props — useful for static templates, testing, and debugging. */
+  toString(): string;
+}
+/** Resolve a tagged template's strings + values into a final CSS string. */
+declare const resolve: (strings: TemplateStringsArray, values: Interpolation[], props: Record<string, any>) => string;
+/** Clear the normalizeCSS cache (called during HMR cleanup). */
+declare const clearNormCache: () => void;
+declare const normalizeCSS: (css: string) => string;
+declare const resolveValue: (value: Interpolation, props: Record<string, any>) => string;
+//#endregion
+//#region src/css.d.ts
+/**
+ * Tagged template function for CSS. Captures the template strings and
+ * interpolation values as a lazy CSSResult — resolution is deferred
+ * until a styled component renders.
+ *
+ * Works as both a tagged template (`css\`...\``) and a regular function
+ * call (`css(...args)`) since tagged templates are syntactic sugar for
+ * function calls with (TemplateStringsArray, ...values).
+ */
+declare const css: (strings: TemplateStringsArray, ...values: Interpolation[]) => CSSResult;
+//#endregion
+//#region src/forward.d.ts
+/**
+ * HTML prop filtering. Prevents unknown props from being forwarded to DOM
+ * elements (which causes warnings). Props starting with `$` are
+ * transient (styling-only) and are always filtered out.
+ */
+/**
+ * Filters props for HTML elements. Keeps valid HTML attrs, data-*, aria-*.
+ * Rejects unknown props and $-prefixed transient props.
+ */
+declare const filterProps: (props: Record<string, unknown>) => Record<string, unknown>;
+/**
+ * Build final props for a styled component in a single pass.
+ * Combines className merging, ref injection, and prop filtering into one
+ * allocation and one iteration.
+ */
+declare const buildProps: (rawProps: Record<string, any>, generatedCls: string, isDOM: boolean, customFilter?: (prop: string) => boolean) => Record<string, any>;
+//#endregion
+//#region src/globalStyle.d.ts
+declare const createGlobalStyle: (strings: TemplateStringsArray, ...values: Interpolation[]) => ComponentFn;
+//#endregion
+//#region src/hash.d.ts
+/**
+ * Fast FNV-1a non-cryptographic hash. Returns base-36 string for compact class names.
+ *
+ * 32-bit hash space → ~4.3 billion unique values. Collision probability is
+ * negligible for typical applications (< 10,000 unique CSS rules).
+ */
+/** FNV-1a offset basis — starting state for streaming hash. */
+declare const HASH_INIT = 2166136261;
+/**
+ * Feed a string segment into the running hash state.
+ * Streaming: hashUpdate(hashUpdate(HASH_INIT, 'ab'), 'cd') === hash('abcd').
+ */
+declare const hashUpdate: (init: number, str: string) => number;
+/** Finalize a hash state into a base-36 class name suffix. */
+declare const hashFinalize: (h: number) => string;
+/** Hash a complete string in one shot. Returns base-36 string. */
+declare const hash: (str: string) => string;
+//#endregion
+//#region src/keyframes.d.ts
+declare class KeyframesResult {
+  readonly name: string;
+  constructor(strings: TemplateStringsArray, values: Interpolation[]);
+  /** Returns the animation name when used in string context. */
+  toString(): string;
+}
+declare const keyframes: (strings: TemplateStringsArray, ...values: Interpolation[]) => KeyframesResult;
+//#endregion
+//#region src/shared.d.ts
+/** Check if an interpolation value is dynamic (contains functions or nested dynamic CSSResults). */
+declare const isDynamic: (v: Interpolation) => boolean;
+//#endregion
+//#region src/sheet.d.ts
+interface StyleSheetOptions {
+  /** Maximum number of cached rules before eviction (default: 10000). */
+  maxCacheSize?: number;
+  /** CSS @layer name to wrap scoped rules in. */
+  layer?: string;
+}
+declare class StyleSheet {
+  private cache;
+  private insertCache;
+  private sheet;
+  private ssrBuffer;
+  private isSSR;
+  private maxCacheSize;
+  private layer;
+  constructor(options?: StyleSheetOptions);
+  private mount;
+  /** Extract className from a selector like ".pyr-abc" or ".pyr-abc.pyr-abc" → "pyr-abc" */
+  private extractClassName;
+  /** Parse existing rules from SSR-rendered <style> tag into cache. */
+  private hydrateFromTag;
+  /** Evict oldest entries when cache exceeds max size. */
+  private evictIfNeeded;
+  /**
+   * Extract nested at-rules (@media, @supports, @container) from CSS text
+   * and wrap their content in the given selector as separate top-level rules.
+   */
+  private splitAtRules;
+  /**
+   * Compute a className from CSS text without injecting (pure function).
+   */
+  getClassName(cssText: string): string;
+  /**
+   * Insert CSS rules for a component. Returns the class name (deterministic, hash-based).
+   * Deduplicates: same CSS text always produces the same class name and
+   * the rules are only injected once.
+   *
+   * When `boost` is true, the selector is doubled (`.pyr-abc.pyr-abc`)
+   * to raise specificity from (0,1,0) to (0,2,0).
+   */
+  insert(cssText: string, boost?: boolean): string;
+  /** Insert a @keyframes rule. Deduplicates by animation name. */
+  insertKeyframes(name: string, body: string): void;
+  /**
+   * Split CSS text into individual top-level rules.
+   * CSSStyleSheet.insertRule() only accepts one rule at a time.
+   */
+  private splitRules;
+  /** Insert global CSS rules (no wrapper selector). Deduplicates by hash. */
+  insertGlobal(cssText: string): void;
+  /** Returns collected CSS for SSR as a complete `<style>` tag string. */
+  getStyleTag(): string;
+  /** Returns collected CSS rules as a raw string (useful for streaming SSR). */
+  getStyles(): string;
+  /** Reset SSR buffer and cache (call between server requests). */
+  reset(): void;
+  /** Clear the dedup cache. Useful for HMR / dev-time reloads. */
+  clearCache(): void;
+  /**
+   * Full cleanup: clear cache and remove all CSS rules from the DOM.
+   * Intended for HMR / dev-time reloads where stale styles must be purged.
+   */
+  clearAll(): void;
+  /**
+   * Compute className and full CSS rule text without injecting.
+   */
+  prepare(cssText: string, boost?: boolean): {
+    className: string;
+    rules: string;
+  };
+  /** Check if a className is already in the cache. O(1) Map lookup. */
+  has(className: string): boolean;
+  /** Current number of cached rules. */
+  get cacheSize(): number;
+}
+/** Default singleton sheet for client-side use. */
+declare const sheet: StyleSheet;
+/**
+ * Factory for creating isolated StyleSheet instances.
+ * Use in SSR to get per-request isolation.
+ */
+declare const createSheet: (options?: StyleSheetOptions) => StyleSheet;
+//#endregion
+//#region src/styled.d.ts
+type Tag = string | ComponentFn<any>;
+interface StyledOptions {
+  /** Custom prop filter. Return true to forward the prop to the DOM element. */
+  shouldForwardProp?: (prop: string) => boolean;
+  /**
+   * Double the class selector to raise specificity from (0,1,0) to (0,2,0).
+   * Ensures this component's styles override inner library components
+   * regardless of CSS source order.
+   */
+  boost?: boolean;
+}
+type TagTemplateFn = (strings: TemplateStringsArray, ...values: Interpolation[]) => ComponentFn;
+type HtmlTags = "a" | "abbr" | "address" | "article" | "aside" | "audio" | "b" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "code" | "col" | "colgroup" | "dd" | "details" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "nav" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "svg" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "u" | "ul" | "video";
+type StyledFunction = ((tag: Tag, options?: StyledOptions) => TagTemplateFn) & { [K in HtmlTags]: TagTemplateFn };
+declare const styled: StyledFunction;
+//#endregion
+//#region src/useCSS.d.ts
+declare function useCSS(template: CSSResult, props?: Record<string, any>, boost?: boolean): string;
+//#endregion
+export { type CSSResult, type DefaultTheme, HASH_INIT, type Interpolation, StyleSheet, type StyleSheetOptions, type StyledFunction, type StyledOptions, ThemeContext, ThemeProvider, buildProps, clearNormCache, createGlobalStyle, createSheet, css, filterProps, hash, hashFinalize, hashUpdate, isDynamic, keyframes, normalizeCSS, resolve, resolveValue, sheet, styled, useCSS, useTheme };
+//# sourceMappingURL=index2.d.ts.map

package/lib/index.js

@@ -0,0 +1,850 @@
+import { createContext, h, onUnmount, popContext, pushContext, useContext } from "@pyreon/core";
+
+//#region src/resolve.ts
+/**
+* Lazy representation of a `css` tagged template. Stores the raw template
+* strings and interpolation values without resolving them. Resolution is
+* deferred until a styled component renders (or until explicitly resolved).
+*/
+var CSSResult = class {
+	constructor(strings, values) {
+		this.strings = strings;
+		this.values = values;
+	}
+	/** Resolve with empty props — useful for static templates, testing, and debugging. */
+	toString() {
+		return resolve(this.strings, this.values, {});
+	}
+};
+/** Resolve a tagged template's strings + values into a final CSS string. */
+const resolve = (strings, values, props) => {
+	let result = strings[0];
+	for (let i = 0; i < values.length; i++) {
+		const v = values[i];
+		const s = strings[i + 1];
+		if (typeof v === "function") {
+			const r = v(props);
+			result += (typeof r === "string" ? r : r == null || r === false || r === true ? "" : resolveValue(r, props)) + s;
+		} else if (v == null || v === false || v === true) result += s;
+		else if (typeof v === "string") result += v + s;
+		else if (typeof v === "number") result += v + s;
+		else result += resolveValue(v, props) + s;
+	}
+	return result;
+};
+/**
+* Normalize resolved CSS text for strict `insertRule` compatibility.
+*
+* Single-pass scanner that handles all cleanup in one traversal:
+* - Strips block comments and line comments (preserves :// in URLs)
+* - Collapses whitespace to single spaces
+* - Removes redundant semicolons
+* - Trims leading/trailing whitespace
+*/
+const normCache = /* @__PURE__ */ new Map();
+/** Clear the normalizeCSS cache (called during HMR cleanup). */
+const clearNormCache = () => normCache.clear();
+const normalizeCSS = (css) => {
+	const cached = normCache.get(css);
+	if (cached !== void 0) return cached;
+	const len = css.length;
+	let out = "";
+	let space = false;
+	let last = 0;
+	for (let i = 0; i < len; i++) {
+		const c = css.charCodeAt(i);
+		if (c === 47 && css.charCodeAt(i + 1) === 42) {
+			const end = css.indexOf("*/", i + 2);
+			i = end === -1 ? len : end + 1;
+			space = true;
+			continue;
+		}
+		if (c === 47 && css.charCodeAt(i + 1) === 47 && last !== 58) {
+			const nl = css.indexOf("\n", i + 2);
+			i = nl === -1 ? len : nl;
+			space = true;
+			continue;
+		}
+		if (c === 32 || c === 9 || c === 10 || c === 13 || c === 12) {
+			space = true;
+			continue;
+		}
+		if (c === 59) {
+			if (last === 0 || last === 123 || last === 125 || last === 59) continue;
+			space = false;
+			out += ";";
+			last = 59;
+			continue;
+		}
+		if (space && last !== 0) out += " ";
+		space = false;
+		out += css[i];
+		last = c;
+	}
+	if (normCache.size > 2e3) {
+		let count = 0;
+		for (const key of normCache.keys()) {
+			if (count >= 200) break;
+			normCache.delete(key);
+			count++;
+		}
+	}
+	normCache.set(css, out);
+	return out;
+};
+const resolveValue = (value, props) => {
+	if (value == null || value === false || value === true) return "";
+	if (typeof value === "function") return resolveValue(value(props), props);
+	if (value instanceof CSSResult) return resolve(value.strings, value.values, props);
+	if (Array.isArray(value)) {
+		let arrayResult = "";
+		for (let i = 0; i < value.length; i++) arrayResult += resolveValue(value[i], props);
+		return arrayResult;
+	}
+	return String(value);
+};
+
+//#endregion
+//#region src/css.ts
+/**
+* Tagged template function for CSS. Captures the template strings and
+* interpolation values as a lazy CSSResult — resolution is deferred
+* until a styled component renders.
+*
+* Works as both a tagged template (`css\`...\``) and a regular function
+* call (`css(...args)`) since tagged templates are syntactic sugar for
+* function calls with (TemplateStringsArray, ...values).
+*/
+const css = (strings, ...values) => new CSSResult(strings, values);
+
+//#endregion
+//#region src/forward.ts
+/**
+* HTML prop filtering. Prevents unknown props from being forwarded to DOM
+* elements (which causes warnings). Props starting with `$` are
+* transient (styling-only) and are always filtered out.
+*/
+const HTML_PROPS = new Set([
+	"children",
+	"className",
+	"class",
+	"dangerouslySetInnerHTML",
+	"htmlFor",
+	"id",
+	"key",
+	"ref",
+	"style",
+	"tabIndex",
+	"role",
+	"onAbort",
+	"onAnimationEnd",
+	"onAnimationIteration",
+	"onAnimationStart",
+	"onBlur",
+	"onChange",
+	"onClick",
+	"onCompositionEnd",
+	"onCompositionStart",
+	"onCompositionUpdate",
+	"onContextMenu",
+	"onCopy",
+	"onCut",
+	"onDoubleClick",
+	"onDrag",
+	"onDragEnd",
+	"onDragEnter",
+	"onDragLeave",
+	"onDragOver",
+	"onDragStart",
+	"onDrop",
+	"onError",
+	"onFocus",
+	"onInput",
+	"onKeyDown",
+	"onKeyPress",
+	"onKeyUp",
+	"onLoad",
+	"onMouseDown",
+	"onMouseEnter",
+	"onMouseLeave",
+	"onMouseMove",
+	"onMouseOut",
+	"onMouseOver",
+	"onMouseUp",
+	"onPaste",
+	"onPointerCancel",
+	"onPointerDown",
+	"onPointerEnter",
+	"onPointerLeave",
+	"onPointerMove",
+	"onPointerOut",
+	"onPointerOver",
+	"onPointerUp",
+	"onScroll",
+	"onSelect",
+	"onSubmit",
+	"onTouchCancel",
+	"onTouchEnd",
+	"onTouchMove",
+	"onTouchStart",
+	"onTransitionEnd",
+	"onWheel",
+	"accept",
+	"acceptCharset",
+	"accessKey",
+	"action",
+	"allow",
+	"allowFullScreen",
+	"alt",
+	"as",
+	"async",
+	"autoCapitalize",
+	"autoComplete",
+	"autoCorrect",
+	"autoFocus",
+	"autoPlay",
+	"capture",
+	"cellPadding",
+	"cellSpacing",
+	"charSet",
+	"checked",
+	"cite",
+	"cols",
+	"colSpan",
+	"content",
+	"contentEditable",
+	"controls",
+	"controlsList",
+	"coords",
+	"crossOrigin",
+	"dateTime",
+	"decoding",
+	"default",
+	"defaultChecked",
+	"defaultValue",
+	"defer",
+	"dir",
+	"disabled",
+	"disablePictureInPicture",
+	"disableRemotePlayback",
+	"download",
+	"draggable",
+	"encType",
+	"enterKeyHint",
+	"fetchPriority",
+	"form",
+	"formAction",
+	"formEncType",
+	"formMethod",
+	"formNoValidate",
+	"formTarget",
+	"frameBorder",
+	"headers",
+	"height",
+	"hidden",
+	"high",
+	"href",
+	"hrefLang",
+	"httpEquiv",
+	"inputMode",
+	"integrity",
+	"is",
+	"label",
+	"lang",
+	"list",
+	"loading",
+	"loop",
+	"low",
+	"max",
+	"maxLength",
+	"media",
+	"method",
+	"min",
+	"minLength",
+	"multiple",
+	"muted",
+	"name",
+	"noModule",
+	"noValidate",
+	"nonce",
+	"open",
+	"optimum",
+	"pattern",
+	"placeholder",
+	"playsInline",
+	"poster",
+	"preload",
+	"readOnly",
+	"referrerPolicy",
+	"rel",
+	"required",
+	"reversed",
+	"rows",
+	"rowSpan",
+	"sandbox",
+	"scope",
+	"scoped",
+	"scrolling",
+	"selected",
+	"shape",
+	"size",
+	"sizes",
+	"slot",
+	"span",
+	"spellCheck",
+	"src",
+	"srcDoc",
+	"srcLang",
+	"srcSet",
+	"start",
+	"step",
+	"summary",
+	"target",
+	"title",
+	"translate",
+	"type",
+	"useMap",
+	"value",
+	"width",
+	"wrap"
+]);
+/**
+* Filters props for HTML elements. Keeps valid HTML attrs, data-*, aria-*.
+* Rejects unknown props and $-prefixed transient props.
+*/
+const filterProps = (props) => {
+	const filtered = {};
+	for (const key in props) {
+		if (key.charCodeAt(0) === 36) continue;
+		if (key === "as") continue;
+		if (key.startsWith("data-") || key.startsWith("aria-")) {
+			filtered[key] = props[key];
+			continue;
+		}
+		if (HTML_PROPS.has(key)) filtered[key] = props[key];
+	}
+	return filtered;
+};
+/**
+* Build final props for a styled component in a single pass.
+* Combines className merging, ref injection, and prop filtering into one
+* allocation and one iteration.
+*/
+const buildProps = (rawProps, generatedCls, isDOM, customFilter) => {
+	const result = {};
+	const userCls = rawProps.class || rawProps.className;
+	if (generatedCls) result.class = userCls ? `${generatedCls} ${userCls}` : generatedCls;
+	else if (userCls) result.class = userCls;
+	if (!isDOM) {
+		for (const key in rawProps) {
+			if (key === "as" || key === "className" || key === "class") continue;
+			if (key.charCodeAt(0) === 36) continue;
+			result[key] = rawProps[key];
+		}
+		return result;
+	}
+	if (customFilter) {
+		for (const key in rawProps) {
+			if (key === "as" || key === "className" || key === "class") continue;
+			if (customFilter(key)) result[key] = rawProps[key];
+		}
+		return result;
+	}
+	for (const key in rawProps) {
+		if (key === "as" || key === "className" || key === "class") continue;
+		if (key.charCodeAt(0) === 36) continue;
+		if (key.startsWith("data-") || key.startsWith("aria-")) {
+			result[key] = rawProps[key];
+			continue;
+		}
+		if (HTML_PROPS.has(key)) result[key] = rawProps[key];
+	}
+	return result;
+};
+
+//#endregion
+//#region src/shared.ts
+/**
+* Shared utilities used across multiple modules.
+*/
+/** Check if an interpolation value is dynamic (contains functions or nested dynamic CSSResults). */
+const isDynamic = (v) => {
+	if (typeof v === "function") return true;
+	if (Array.isArray(v)) return v.some(isDynamic);
+	if (v instanceof CSSResult) return v.values.some(isDynamic);
+	return false;
+};
+
+//#endregion
+//#region src/hash.ts
+/**
+* Fast FNV-1a non-cryptographic hash. Returns base-36 string for compact class names.
+*
+* 32-bit hash space → ~4.3 billion unique values. Collision probability is
+* negligible for typical applications (< 10,000 unique CSS rules).
+*/
+/** FNV-1a offset basis — starting state for streaming hash. */
+const HASH_INIT = 2166136261;
+const FNV_PRIME = 16777619;
+/**
+* Feed a string segment into the running hash state.
+* Streaming: hashUpdate(hashUpdate(HASH_INIT, 'ab'), 'cd') === hash('abcd').
+*/
+const hashUpdate = (init, str) => {
+	let h = init;
+	for (let i = 0; i < str.length; i++) {
+		h ^= str.charCodeAt(i);
+		h = Math.imul(h, FNV_PRIME);
+	}
+	return h;
+};
+/** Finalize a hash state into a base-36 class name suffix. */
+const hashFinalize = (h) => (h >>> 0).toString(36);
+/** Hash a complete string in one shot. Returns base-36 string. */
+const hash = (str) => hashFinalize(hashUpdate(HASH_INIT, str));
+
+//#endregion
+//#region src/sheet.ts
+/**
+* StyleSheet manager. Handles CSS rule injection, hash-based deduplication,
+* SSR buffering, client-side hydration, bounded cache, and @layer support.
+*
+* Media queries (@media), @supports, and @container blocks nested inside
+* component CSS are automatically extracted into separate top-level rules.
+*/
+const PREFIX = "pyr";
+const ATTR = "data-pyreon-styler";
+const DEFAULT_MAX_CACHE_SIZE = 1e4;
+var StyleSheet = class {
+	cache = /* @__PURE__ */ new Map();
+	insertCache = /* @__PURE__ */ new Map();
+	sheet = null;
+	ssrBuffer = [];
+	isSSR;
+	maxCacheSize;
+	layer;
+	constructor(options = {}) {
+		this.maxCacheSize = options.maxCacheSize ?? DEFAULT_MAX_CACHE_SIZE;
+		this.layer = options.layer;
+		this.isSSR = typeof document === "undefined";
+		if (!this.isSSR) this.mount();
+	}
+	mount() {
+		const existing = document.querySelector(`style[${ATTR}]`);
+		if (existing) {
+			this.sheet = existing.sheet ?? null;
+			this.hydrateFromTag(existing);
+		} else {
+			const el = document.createElement("style");
+			el.setAttribute(ATTR, "");
+			document.head.appendChild(el);
+			this.sheet = el.sheet ?? null;
+		}
+		if (this.layer && this.sheet) try {
+			this.sheet.insertRule(`@layer ${this.layer};`, 0);
+		} catch {}
+	}
+	/** Extract className from a selector like ".pyr-abc" or ".pyr-abc.pyr-abc" → "pyr-abc" */
+	extractClassName(selectorText) {
+		if (selectorText[0] !== ".") return null;
+		const dotIdx = selectorText.indexOf(".", 1);
+		return dotIdx > 0 ? selectorText.slice(1, dotIdx) : selectorText.slice(1);
+	}
+	/** Parse existing rules from SSR-rendered <style> tag into cache. */
+	hydrateFromTag(el) {
+		const sheet = el.sheet;
+		if (!sheet) return;
+		for (let i = 0; i < sheet.cssRules.length; i++) {
+			const rule = sheet.cssRules[i];
+			if (rule instanceof CSSStyleRule) {
+				const className = this.extractClassName(rule.selectorText);
+				if (className) this.cache.set(className, className);
+			}
+			if (typeof CSSMediaRule !== "undefined" && rule instanceof CSSMediaRule) for (let j = 0; j < rule.cssRules.length; j++) {
+				const inner = rule.cssRules[j];
+				if (inner instanceof CSSStyleRule) {
+					const className = this.extractClassName(inner.selectorText);
+					if (className) this.cache.set(className, className);
+				}
+			}
+		}
+	}
+	/** Evict oldest entries when cache exceeds max size. */
+	evictIfNeeded() {
+		if (this.cache.size <= this.maxCacheSize) return;
+		const toDelete = Math.floor(this.maxCacheSize * .1);
+		let count = 0;
+		for (const key of this.cache.keys()) {
+			if (count >= toDelete) break;
+			this.cache.delete(key);
+			count++;
+		}
+	}
+	/**
+	* Extract nested at-rules (@media, @supports, @container) from CSS text
+	* and wrap their content in the given selector as separate top-level rules.
+	*/
+	splitAtRules(cssText, selector) {
+		if (cssText.indexOf("@") === -1) return {
+			base: cssText,
+			atRules: []
+		};
+		const atRules = [];
+		const baseParts = [];
+		let depth = 0;
+		let atStart = -1;
+		let lastBase = 0;
+		for (let i = 0; i < cssText.length; i++) {
+			const ch = cssText[i];
+			if (ch === "{") depth++;
+			else if (ch === "}") {
+				depth--;
+				if (depth === 0 && atStart >= 0) {
+					const openBrace = cssText.indexOf("{", atStart);
+					const atPrefix = cssText.slice(atStart, openBrace).trim();
+					const innerCSS = cssText.slice(openBrace + 1, i).trim();
+					if (innerCSS) atRules.push(`${atPrefix}{${selector}{${innerCSS}}}`);
+					atStart = -1;
+					lastBase = i + 1;
+				}
+			} else if (depth === 0 && ch === "@" && atStart < 0) {
+				const remaining = cssText.slice(i, i + 20);
+				if (/^@(?:media|supports|container)\b/.test(remaining)) {
+					const baseBefore = cssText.slice(lastBase, i).trim();
+					if (baseBefore) baseParts.push(baseBefore);
+					atStart = i;
+				}
+			}
+		}
+		if (lastBase < cssText.length && atStart < 0) {
+			const remaining = cssText.slice(lastBase).trim();
+			if (remaining) baseParts.push(remaining);
+		}
+		if (atRules.length === 0) return {
+			base: cssText,
+			atRules: []
+		};
+		return {
+			base: baseParts.join(" "),
+			atRules
+		};
+	}
+	/**
+	* Compute a className from CSS text without injecting (pure function).
+	*/
+	getClassName(cssText) {
+		const cached = this.insertCache.get(cssText);
+		if (cached) return cached;
+		return `${PREFIX}-${hash(cssText)}`;
+	}
+	/**
+	* Insert CSS rules for a component. Returns the class name (deterministic, hash-based).
+	* Deduplicates: same CSS text always produces the same class name and
+	* the rules are only injected once.
+	*
+	* When `boost` is true, the selector is doubled (`.pyr-abc.pyr-abc`)
+	* to raise specificity from (0,1,0) to (0,2,0).
+	*/
+	insert(cssText, boost = false) {
+		const icKey = boost ? `${cssText}\0` : cssText;
+		const icHit = this.insertCache.get(icKey);
+		if (icHit) return icHit;
+		const className = `${PREFIX}-${hash(cssText)}`;
+		if (this.cache.has(className)) {
+			this.insertCache.set(icKey, className);
+			return className;
+		}
+		this.evictIfNeeded();
+		this.cache.set(className, className);
+		const selector = boost ? `.${className}.${className}` : `.${className}`;
+		const { base, atRules } = this.splitAtRules(cssText, selector);
+		const rules = [];
+		if (base) rules.push(`${selector}{${base}}`);
+		rules.push(...atRules);
+		const finalRules = this.layer ? rules.map((r) => `@layer ${this.layer}{${r}}`) : rules;
+		if (this.isSSR) for (const rule of finalRules) this.ssrBuffer.push(rule);
+		else if (this.sheet) for (const rule of finalRules) try {
+			this.sheet.insertRule(rule, this.sheet.cssRules.length);
+		} catch (_e) {
+			if (process.env.NODE_ENV !== "production") console.warn("[styler] Failed to insert CSS rule:", rule, _e);
+		}
+		this.insertCache.set(icKey, className);
+		return className;
+	}
+	/** Insert a @keyframes rule. Deduplicates by animation name. */
+	insertKeyframes(name, body) {
+		if (this.cache.has(name)) return;
+		this.evictIfNeeded();
+		this.cache.set(name, name);
+		const rule = `@keyframes ${name}{${body}}`;
+		if (this.isSSR) this.ssrBuffer.push(rule);
+		else if (this.sheet) try {
+			this.sheet.insertRule(rule, this.sheet.cssRules.length);
+		} catch (_e) {
+			if (process.env.NODE_ENV !== "production") {}
+		}
+	}
+	/**
+	* Split CSS text into individual top-level rules.
+	* CSSStyleSheet.insertRule() only accepts one rule at a time.
+	*/
+	splitRules(cssText) {
+		const rules = [];
+		let depth = 0;
+		let start = 0;
+		for (let i = 0; i < cssText.length; i++) {
+			const ch = cssText[i];
+			if (ch === "{") depth++;
+			else if (ch === "}") {
+				depth--;
+				if (depth === 0) {
+					const rule = cssText.slice(start, i + 1).trim();
+					if (rule) rules.push(rule);
+					start = i + 1;
+				}
+			}
+		}
+		return rules;
+	}
+	/** Insert global CSS rules (no wrapper selector). Deduplicates by hash. */
+	insertGlobal(cssText) {
+		const key = `global-${hash(cssText)}`;
+		if (this.cache.has(key)) return;
+		this.evictIfNeeded();
+		this.cache.set(key, key);
+		if (this.isSSR) this.ssrBuffer.push(cssText);
+		else if (this.sheet) {
+			const rules = this.splitRules(cssText);
+			for (const rule of rules) try {
+				this.sheet.insertRule(rule, this.sheet.cssRules.length);
+			} catch (_e) {
+				if (process.env.NODE_ENV !== "production") console.warn("[styler] Failed to insert global CSS rule:", rule, _e);
+			}
+		}
+	}
+	/** Returns collected CSS for SSR as a complete `<style>` tag string. */
+	getStyleTag() {
+		return `<style ${ATTR}="">${this.ssrBuffer.join("").replace(/<\/style/gi, "<\\/style")}</style>`;
+	}
+	/** Returns collected CSS rules as a raw string (useful for streaming SSR). */
+	getStyles() {
+		return this.ssrBuffer.join("");
+	}
+	/** Reset SSR buffer and cache (call between server requests). */
+	reset() {
+		this.ssrBuffer = [];
+		this.cache.clear();
+		this.insertCache.clear();
+	}
+	/** Clear the dedup cache. Useful for HMR / dev-time reloads. */
+	clearCache() {
+		this.cache.clear();
+		this.insertCache.clear();
+		clearNormCache();
+	}
+	/**
+	* Full cleanup: clear cache and remove all CSS rules from the DOM.
+	* Intended for HMR / dev-time reloads where stale styles must be purged.
+	*/
+	clearAll() {
+		this.cache.clear();
+		this.insertCache.clear();
+		clearNormCache();
+		this.ssrBuffer = [];
+		if (this.sheet) while (this.sheet.cssRules.length > 0) this.sheet.deleteRule(0);
+	}
+	/**
+	* Compute className and full CSS rule text without injecting.
+	*/
+	prepare(cssText, boost = false) {
+		const className = `${PREFIX}-${hash(cssText)}`;
+		const selector = boost ? `.${className}.${className}` : `.${className}`;
+		const { base, atRules } = this.splitAtRules(cssText, selector);
+		const allRules = [];
+		if (base) allRules.push(`${selector}{${base}}`);
+		allRules.push(...atRules);
+		return {
+			className,
+			rules: (this.layer ? allRules.map((r) => `@layer ${this.layer}{${r}}`) : allRules).join("")
+		};
+	}
+	/** Check if a className is already in the cache. O(1) Map lookup. */
+	has(className) {
+		return this.cache.has(className);
+	}
+	/** Current number of cached rules. */
+	get cacheSize() {
+		return this.cache.size;
+	}
+};
+/** Default singleton sheet for client-side use. */
+const sheet = new StyleSheet();
+/**
+* Factory for creating isolated StyleSheet instances.
+* Use in SSR to get per-request isolation.
+*/
+const createSheet = (options) => new StyleSheet(options);
+
+//#endregion
+//#region src/ThemeProvider.ts
+const ThemeContext = createContext({});
+/** Hook to read the current theme from the nearest ThemeProvider. */
+const useTheme = () => useContext(ThemeContext);
+/** Provides a theme object to all nested styled components via Pyreon context. */
+function ThemeProvider({ theme, children }) {
+	pushContext(new Map([[ThemeContext.id, theme]]));
+	onUnmount(() => popContext());
+	return children ?? null;
+}
+
+//#endregion
+//#region src/globalStyle.ts
+const createGlobalStyle = (strings, ...values) => {
+	if (!values.some(isDynamic)) {
+		const cssText = normalizeCSS(resolve(strings, values, {}));
+		if (cssText.trim()) sheet.insertGlobal(cssText);
+		const StaticGlobal = () => null;
+		return StaticGlobal;
+	}
+	const DynamicGlobal = (props) => {
+		const theme = useTheme();
+		const cssText = normalizeCSS(resolve(strings, values, {
+			...props,
+			theme
+		}));
+		if (cssText.trim()) sheet.insertGlobal(cssText);
+		return null;
+	};
+	return DynamicGlobal;
+};
+
+//#endregion
+//#region src/keyframes.ts
+/**
+* keyframes() tagged template function. Creates a CSS @keyframes rule,
+* injects it into the stylesheet, and returns the generated animation name.
+*
+* Usage:
+*   const fadeIn = keyframes`
+*     from { opacity: 0; }
+*     to { opacity: 1; }
+*   `
+*   // fadeIn === "pyr-kf-abc123" (deterministic, hash-based)
+*/
+var KeyframesResult = class {
+	name;
+	constructor(strings, values) {
+		const body = normalizeCSS(resolve(strings, values, {}));
+		this.name = `pyr-kf-${hash(body)}`;
+		sheet.insertKeyframes(this.name, body);
+	}
+	/** Returns the animation name when used in string context. */
+	toString() {
+		return this.name;
+	}
+};
+const keyframes = (strings, ...values) => new KeyframesResult(strings, values);
+
+//#endregion
+//#region src/styled.tsx
+const getDisplayName = (tag) => typeof tag === "string" ? tag : tag.displayName || tag.name || "Component";
+const staticComponentCache = /* @__PURE__ */ new WeakMap();
+let _hotStrings = null;
+let _hotTag = null;
+let _hotComponent = null;
+const createStyledComponent = (tag, strings, values, options) => {
+	if (values.length === 0 && !options) {
+		if (strings === _hotStrings && tag === _hotTag) return _hotComponent;
+		const tagMap = staticComponentCache.get(strings);
+		if (tagMap) {
+			const cached = tagMap.get(tag);
+			if (cached) {
+				_hotStrings = strings;
+				_hotTag = tag;
+				_hotComponent = cached;
+				return cached;
+			}
+		}
+	}
+	const hasDynamicValues = values.length > 0 && values.some(isDynamic);
+	const customFilter = options ? options.shouldForwardProp : void 0;
+	const boost = options ? options.boost ?? false : false;
+	if (!hasDynamicValues) {
+		const cssText = normalizeCSS(values.length === 0 ? strings[0] : resolve(strings, values, {}));
+		const staticClassName = cssText.length > 0 ? sheet.insert(cssText, boost) : "";
+		const StaticStyled = (rawProps) => {
+			const finalTag = rawProps.as || tag;
+			return h(finalTag, buildProps(rawProps, staticClassName, typeof finalTag === "string", customFilter), ...Array.isArray(rawProps.children) ? rawProps.children : rawProps.children != null ? [rawProps.children] : []);
+		};
+		StaticStyled.displayName = `styled(${getDisplayName(tag)})`;
+		if (!options && values.length === 0) {
+			let tagMap = staticComponentCache.get(strings);
+			if (!tagMap) {
+				tagMap = /* @__PURE__ */ new Map();
+				staticComponentCache.set(strings, tagMap);
+			}
+			tagMap.set(tag, StaticStyled);
+			_hotStrings = strings;
+			_hotTag = tag;
+			_hotComponent = StaticStyled;
+		}
+		return StaticStyled;
+	}
+	const DynamicStyled = (rawProps) => {
+		const theme = useTheme();
+		const cssText = normalizeCSS(resolve(strings, values, {
+			...rawProps,
+			theme
+		}));
+		const className = cssText.length > 0 ? sheet.insert(cssText, boost) : "";
+		const finalTag = rawProps.as || tag;
+		return h(finalTag, buildProps(rawProps, className, typeof finalTag === "string", customFilter), ...Array.isArray(rawProps.children) ? rawProps.children : rawProps.children != null ? [rawProps.children] : []);
+	};
+	DynamicStyled.displayName = `styled(${getDisplayName(tag)})`;
+	return DynamicStyled;
+};
+/** Factory function: styled(tag) returns a tagged template function. */
+const styledFactory = (tag, options) => {
+	const templateFn = (strings, ...values) => createStyledComponent(tag, strings, values, options);
+	return templateFn;
+};
+/**
+* Main styled export. Supports both calling conventions:
+* - `styled('div')` or `styled(Component)` → returns tagged template function
+* - `styled('div', { shouldForwardProp })` → with custom prop filtering
+* - `styled.div` → shorthand via Proxy (no options)
+*/
+const proxyCache = /* @__PURE__ */ new Map();
+const styled = new Proxy(styledFactory, { get(_target, prop) {
+	if (prop === "prototype" || prop === "$$typeof") return void 0;
+	let fn = proxyCache.get(prop);
+	if (!fn) {
+		fn = (strings, ...values) => createStyledComponent(prop, strings, values);
+		proxyCache.set(prop, fn);
+	}
+	return fn;
+} });
+
+//#endregion
+//#region src/useCSS.ts
+/**
+* Hook that resolves a CSSResult template with props, injects CSS
+* into the shared stylesheet, and returns the className.
+*
+* Use this when you need computed CSS class names on plain elements
+* without the overhead of a styled component layer.
+*/
+function useCSS(template, props, boost) {
+	const theme = useTheme();
+	const allProps = theme ? {
+		...props,
+		theme
+	} : props ?? {};
+	const cssText = normalizeCSS(resolve(template.strings, template.values, allProps));
+	if (!cssText.trim()) return "";
+	return sheet.insert(cssText, boost);
+}
+
+//#endregion
+export { HASH_INIT, StyleSheet, ThemeContext, ThemeProvider, buildProps, clearNormCache, createGlobalStyle, createSheet, css, filterProps, hash, hashFinalize, hashUpdate, isDynamic, keyframes, normalizeCSS, resolve, resolveValue, sheet, styled, useCSS, useTheme };
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@pyreon/styler",
+  "version": "0.0.2",
+  "description": "Lightweight CSS-in-JS engine for Pyreon",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    "source": "./src/index.ts",
+    "import": "./lib/index.js",
+    "types": "./lib/index.d.ts"
+  },
+  "types": "./lib/index.d.ts",
+  "main": "./lib/index.js",
+  "files": [
+    "lib",
+    "!lib/**/*.map",
+    "!lib/analysis",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">= 18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepublish": "bun run build",
+    "build": "bun run vl_rolldown_build",
+    "build:watch": "bun run vl_rolldown_build-watch",
+    "lint": "biome check src/",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@pyreon/core": ">=0.3.0",
+    "@pyreon/reactivity": ">=0.3.0"
+  },
+  "devDependencies": {
+    "@vitus-labs/tools-rolldown": "^1.15.0",
+    "@vitus-labs/tools-typescript": "^1.15.0"
+  }
+}