@pyreon/zero 0.12.2 → 0.12.3

package/lib/link.js

@@ -76,9 +76,14 @@ function jsx(type, props, key) {
 
 //#endregion
 //#region src/link.tsx
+const MAX_PREFETCH_CACHE = 200;
 const prefetched = /* @__PURE__ */ new Set();
 function doPrefetch(href) {
 	if (prefetched.has(href)) return;
+	if (prefetched.size >= MAX_PREFETCH_CACHE) {
+		const first = prefetched.values().next().value;
+		if (first) prefetched.delete(first);
+	}
 	prefetched.add(href);
 	const docLink = document.createElement("link");
 	docLink.rel = "prefetch";

package/lib/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","names":[],"sources":["../src/utils/use-intersection-observer.ts","../../../core/core/lib/jsx-runtime.js","../src/link.tsx"],"sourcesContent":["import { onMount, onUnmount } from '@pyreon/core'\n\n/**\n * Observes an element and calls `onIntersect` once it enters the viewport.\n * Automatically disconnects after the first intersection.\n *\n * @param getElement - Getter for the target element (may be undefined before mount).\n * @param onIntersect - Callback fired when the element becomes visible.\n * @param rootMargin - IntersectionObserver rootMargin. Default: \"200px\".\n */\nexport function useIntersectionObserver(\n  getElement: () => HTMLElement | undefined,\n  onIntersect: () => void,\n  rootMargin = '200px',\n) {\n  onMount(() => {\n    const el = getElement()\n    if (!el) return undefined\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (entry.isIntersecting) {\n            onIntersect()\n            observer.disconnect()\n          }\n        }\n      },\n      { rootMargin },\n    )\n\n    observer.observe(el)\n    onUnmount(() => observer.disconnect())\n    return undefined\n  })\n}\n","//#region src/h.ts\n/** Marker for fragment nodes — renders children without a wrapper element */\nconst Fragment = Symbol(\"Pyreon.Fragment\");\n/**\n* Hyperscript function — the compiled output of JSX.\n* `<div class=\"x\">hello</div>` → `h(\"div\", { class: \"x\" }, \"hello\")`\n*\n* Generic on P so TypeScript validates props match the component's signature\n* at the call site, then stores the result in the loosely-typed VNode.\n*/\n/** Shared empty props sentinel — identity-checked in mountElement to skip applyProps. */\nconst EMPTY_PROPS = {};\nfunction h(type, props, ...children) {\n\treturn {\n\t\ttype,\n\t\tprops: props ?? EMPTY_PROPS,\n\t\tchildren: normalizeChildren(children),\n\t\tkey: props?.key ?? null\n\t};\n}\nfunction normalizeChildren(children) {\n\tfor (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);\n\treturn children;\n}\nfunction flattenChildren(children) {\n\tconst result = [];\n\tfor (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));\n\telse result.push(child);\n\treturn result;\n}\n\n//#endregion\n//#region src/jsx-runtime.ts\n/**\n* JSX automatic runtime.\n*\n* When tsconfig has `\"jsxImportSource\": \"@pyreon/core\"`, the TS/bundler compiler\n* rewrites JSX to imports from this file automatically:\n*   <div class=\"x\" />  →  jsx(\"div\", { class: \"x\" })\n*/\nfunction jsx(type, props, key) {\n\tconst { children, ...rest } = props;\n\tconst propsWithKey = key != null ? {\n\t\t...rest,\n\t\tkey\n\t} : rest;\n\tif (typeof type === \"function\") return h(type, children !== void 0 ? {\n\t\t...propsWithKey,\n\t\tchildren\n\t} : propsWithKey);\n\treturn h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);\n}\nconst jsxs = jsx;\n\n//#endregion\nexport { Fragment, jsx, jsxs };\n//# sourceMappingURL=jsx-runtime.js.map","import { createRef } from '@pyreon/core'\nimport { useRouter } from '@pyreon/router'\nimport { useIntersectionObserver } from './utils/use-intersection-observer'\n\n// ─── Link component with prefetching ────────────────────────────────────────\n//\n// Provides client-side navigation, prefetching, and active state tracking.\n// Three levels of API:\n//\n// 1. useLink(props)   — composable returning handlers, state, and ref callback\n// 2. createLink(Comp) — HOC wrapping any component with link behavior\n// 3. Link             — default <a>-based link (built on createLink)\n\nexport interface LinkProps {\n  /** Target URL path. */\n  href: string\n  /** Link content. */\n  children?: any\n  /** CSS class name. */\n  class?: string\n  /** Class applied when this link matches the current route. */\n  activeClass?: string\n  /** Class applied when this link exactly matches the current route. */\n  exactActiveClass?: string\n  /** Prefetch strategy. Default: \"hover\" */\n  prefetch?: 'hover' | 'viewport' | 'none'\n  /** Open in new tab. */\n  external?: boolean\n  /** Inline styles. */\n  style?: string\n  /** ARIA label. */\n  'aria-label'?: string\n  /** Additional click handler — called before navigation. Call e.preventDefault() to cancel. */\n  onClick?: ((e: MouseEvent) => void) | undefined\n}\n\n/** Props passed to a custom component via createLink. */\nexport interface LinkRenderProps {\n  href: string\n  ref: import('@pyreon/core').Ref<HTMLAnchorElement>\n  onClick: (e: MouseEvent) => void\n  onMouseEnter: () => void\n  onTouchStart: () => void\n  isActive: () => boolean\n  isExactActive: () => boolean\n  /** Reactive class string — pass directly to element for auto-updates on route change. */\n  class: (() => string) | string | undefined\n  style?: string\n  target?: string\n  rel?: string\n  'aria-label'?: string\n  children?: any\n}\n\n/** Return type of useLink. */\nexport interface UseLinkReturn {\n  /** Ref object — attach to the root element for viewport-based prefetch. */\n  ref: import('@pyreon/core').Ref<HTMLAnchorElement>\n  /** Click handler — performs client-side navigation. */\n  handleClick: (e: MouseEvent) => void\n  /** Mouse enter handler — triggers hover prefetch. */\n  handleMouseEnter: () => void\n  /** Touch start handler — triggers prefetch on mobile. */\n  handleTouchStart: () => void\n  /** Whether the link partially matches the current route. */\n  isActive: () => boolean\n  /** Whether the link exactly matches the current route. */\n  isExactActive: () => boolean\n  /** Resolved class string including active classes. */\n  classes: () => string\n}\n\nconst prefetched = new Set<string>()\n\nfunction doPrefetch(href: string) {\n  if (prefetched.has(href)) return\n  prefetched.add(href)\n\n  const docLink = document.createElement('link')\n  docLink.rel = 'prefetch'\n  docLink.href = href\n  docLink.as = 'document'\n  document.head.appendChild(docLink)\n\n  try {\n    const chunkHint = document.createElement('link')\n    chunkHint.rel = 'modulepreload'\n    chunkHint.href = href\n    document.head.appendChild(chunkHint)\n  } catch {\n    // modulepreload is a hint, not critical\n  }\n}\n\n/**\n * Prefetch a route's JS chunk by injecting `<link rel=\"prefetch\">` into the\n * document head. Deduplicates — calling with the same href twice is a no-op.\n *\n * @example\n * prefetchRoute('/about')\n * prefetchRoute('/dashboard')\n */\nexport function prefetchRoute(href: string): void {\n  doPrefetch(href)\n}\n\n/**\n * Composable that provides all link behavior — navigation, prefetching,\n * active state, and viewport observation.\n *\n * Use this for full control when `createLink` is too opinionated.\n *\n * @example\n * function MyLink(props: LinkProps) {\n *   const link = useLink(props)\n *   return (\n *     <button ref={link.ref} class={link.classes()} onClick={link.handleClick}>\n *       {props.children}\n *     </button>\n *   )\n * }\n */\nexport function useLink(props: LinkProps): UseLinkReturn {\n  const router = useRouter()\n  const elementRef = createRef<HTMLAnchorElement>()\n  const strategy = props.prefetch ?? 'hover'\n\n  function handleClick(e: MouseEvent) {\n    // Call user's onClick first — they may call e.preventDefault()\n    if (props.onClick) {\n      ;(props.onClick as (e: MouseEvent) => void)(e)\n    }\n\n    if (\n      e.defaultPrevented ||\n      e.button !== 0 ||\n      e.metaKey ||\n      e.ctrlKey ||\n      e.shiftKey ||\n      e.altKey ||\n      props.external\n    ) {\n      return\n    }\n    e.preventDefault()\n    router.push(props.href)\n  }\n\n  function handleMouseEnter() {\n    if (strategy === 'hover') {\n      doPrefetch(props.href)\n    }\n  }\n\n  function handleTouchStart() {\n    if (strategy === 'hover' || strategy === 'viewport') {\n      doPrefetch(props.href)\n    }\n  }\n\n  if (strategy === 'viewport') {\n    useIntersectionObserver(\n      () => elementRef.current ?? undefined,\n      () => doPrefetch(props.href),\n    )\n  }\n\n  const isActive = () => {\n    const currentPath = router.currentRoute()?.path\n    if (!currentPath || !props.href) return false\n    if (props.href === '/') return currentPath === '/'\n    return currentPath.startsWith(props.href)\n  }\n\n  const isExactActive = () => {\n    const currentPath = router.currentRoute()?.path\n    if (!currentPath) return false\n    return currentPath === props.href\n  }\n\n  const classes = () => {\n    const cls: string[] = []\n    if (props.class) cls.push(props.class)\n    if (props.activeClass && isActive()) cls.push(props.activeClass)\n    if (props.exactActiveClass && isExactActive()) cls.push(props.exactActiveClass)\n    return cls.join(' ')\n  }\n\n  return {\n    ref: elementRef,\n    handleClick,\n    handleMouseEnter,\n    handleTouchStart,\n    isActive,\n    isExactActive,\n    classes,\n  }\n}\n\n/**\n * Higher-order component that wraps any component with link behavior.\n *\n * The wrapped component receives {@link LinkRenderProps} with all handlers,\n * active state, and accessibility attributes pre-wired.\n *\n * @example\n * // Custom button link\n * const ButtonLink = createLink((props) => (\n *   <button\n *     ref={props.ref}\n *     class={props.class}\n *     onClick={props.onClick}\n *     onMouseEnter={props.onMouseEnter}\n *   >\n *     {props.children}\n *   </button>\n * ))\n *\n * // Custom styled component\n * const CardLink = createLink((props) => (\n *   <div\n *     ref={props.ref}\n *     class={`card ${props.isActive() ? \"card--active\" : \"\"}`}\n *     onClick={props.onClick}\n *     onMouseEnter={props.onMouseEnter}\n *   >\n *     {props.children}\n *   </div>\n * ))\n *\n * // Usage\n * <ButtonLink href=\"/about\">About</ButtonLink>\n * <CardLink href=\"/posts\" prefetch=\"viewport\">Posts</CardLink>\n */\nexport function createLink(Component: (props: LinkRenderProps) => any): (props: LinkProps) => any {\n  return function WrappedLink(props: LinkProps) {\n    const link = useLink(props)\n\n    return (\n      <Component\n        href={props.href}\n        ref={link.ref}\n        onClick={link.handleClick}\n        onMouseEnter={link.handleMouseEnter}\n        onTouchStart={link.handleTouchStart}\n        isActive={link.isActive}\n        isExactActive={link.isExactActive}\n        class={link.classes}\n        {...(props.style ? { style: props.style } : {})}\n        {...(props.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}\n        {...(props['aria-label'] ? { 'aria-label': props['aria-label'] } : {})}\n        children={props.children}\n      />\n    )\n  }\n}\n\n/**\n * Default navigation link built on an `<a>` tag.\n *\n * @example\n * <Link href=\"/about\" prefetch=\"viewport\">About</Link>\n * <Link href=\"/posts\" activeClass=\"nav-active\">Posts</Link>\n */\nexport const Link = createLink((props: LinkRenderProps) => (\n  <a\n    ref={props.ref}\n    href={props.href}\n    {...(props.class ? { class: props.class } : {})}\n    {...(props.style ? { style: props.style } : {})}\n    {...(props.target ? { target: props.target } : {})}\n    {...(props.rel ? { rel: props.rel } : {})}\n    {...(props['aria-label'] ? { 'aria-label': props['aria-label'] } : {})}\n    {...(props.isExactActive() ? { 'aria-current': 'page' as const } : {})}\n    onClick={props.onClick}\n    onMouseEnter={props.onMouseEnter}\n    onTouchStart={props.onTouchStart}\n  >\n    {props.children}\n  </a>\n))\n"],"mappings":"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"}
+{"version":3,"file":"link.js","names":[],"sources":["../src/utils/use-intersection-observer.ts","../../../core/core/lib/jsx-runtime.js","../src/link.tsx"],"sourcesContent":["import { onMount, onUnmount } from '@pyreon/core'\n\n/**\n * Observes an element and calls `onIntersect` once it enters the viewport.\n * Automatically disconnects after the first intersection.\n *\n * @param getElement - Getter for the target element (may be undefined before mount).\n * @param onIntersect - Callback fired when the element becomes visible.\n * @param rootMargin - IntersectionObserver rootMargin. Default: \"200px\".\n */\nexport function useIntersectionObserver(\n  getElement: () => HTMLElement | undefined,\n  onIntersect: () => void,\n  rootMargin = '200px',\n) {\n  onMount(() => {\n    const el = getElement()\n    if (!el) return undefined\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (entry.isIntersecting) {\n            onIntersect()\n            observer.disconnect()\n          }\n        }\n      },\n      { rootMargin },\n    )\n\n    observer.observe(el)\n    onUnmount(() => observer.disconnect())\n    return undefined\n  })\n}\n","//#region src/h.ts\n/** Marker for fragment nodes — renders children without a wrapper element */\nconst Fragment = Symbol(\"Pyreon.Fragment\");\n/**\n* Hyperscript function — the compiled output of JSX.\n* `<div class=\"x\">hello</div>` → `h(\"div\", { class: \"x\" }, \"hello\")`\n*\n* Generic on P so TypeScript validates props match the component's signature\n* at the call site, then stores the result in the loosely-typed VNode.\n*/\n/** Shared empty props sentinel — identity-checked in mountElement to skip applyProps. */\nconst EMPTY_PROPS = {};\nfunction h(type, props, ...children) {\n\treturn {\n\t\ttype,\n\t\tprops: props ?? EMPTY_PROPS,\n\t\tchildren: normalizeChildren(children),\n\t\tkey: props?.key ?? null\n\t};\n}\nfunction normalizeChildren(children) {\n\tfor (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);\n\treturn children;\n}\nfunction flattenChildren(children) {\n\tconst result = [];\n\tfor (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));\n\telse result.push(child);\n\treturn result;\n}\n\n//#endregion\n//#region src/jsx-runtime.ts\n/**\n* JSX automatic runtime.\n*\n* When tsconfig has `\"jsxImportSource\": \"@pyreon/core\"`, the TS/bundler compiler\n* rewrites JSX to imports from this file automatically:\n*   <div class=\"x\" />  →  jsx(\"div\", { class: \"x\" })\n*/\nfunction jsx(type, props, key) {\n\tconst { children, ...rest } = props;\n\tconst propsWithKey = key != null ? {\n\t\t...rest,\n\t\tkey\n\t} : rest;\n\tif (typeof type === \"function\") return h(type, children !== void 0 ? {\n\t\t...propsWithKey,\n\t\tchildren\n\t} : propsWithKey);\n\treturn h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);\n}\nconst jsxs = jsx;\n\n//#endregion\nexport { Fragment, jsx, jsxs };\n//# sourceMappingURL=jsx-runtime.js.map","import { createRef } from '@pyreon/core'\nimport { useRouter } from '@pyreon/router'\nimport { useIntersectionObserver } from './utils/use-intersection-observer'\n\n// ─── Link component with prefetching ────────────────────────────────────────\n//\n// Provides client-side navigation, prefetching, and active state tracking.\n// Three levels of API:\n//\n// 1. useLink(props)   — composable returning handlers, state, and ref callback\n// 2. createLink(Comp) — HOC wrapping any component with link behavior\n// 3. Link             — default <a>-based link (built on createLink)\n\nexport interface LinkProps {\n  /** Target URL path. */\n  href: string\n  /** Link content. */\n  children?: any\n  /** CSS class name. */\n  class?: string\n  /** Class applied when this link matches the current route. */\n  activeClass?: string\n  /** Class applied when this link exactly matches the current route. */\n  exactActiveClass?: string\n  /** Prefetch strategy. Default: \"hover\" */\n  prefetch?: 'hover' | 'viewport' | 'none'\n  /** Open in new tab. */\n  external?: boolean\n  /** Inline styles. */\n  style?: string\n  /** ARIA label. */\n  'aria-label'?: string\n  /** Additional click handler — called before navigation. Call e.preventDefault() to cancel. */\n  onClick?: ((e: MouseEvent) => void) | undefined\n}\n\n/** Props passed to a custom component via createLink. */\nexport interface LinkRenderProps {\n  href: string\n  ref: import('@pyreon/core').Ref<HTMLAnchorElement>\n  onClick: (e: MouseEvent) => void\n  onMouseEnter: () => void\n  onTouchStart: () => void\n  isActive: () => boolean\n  isExactActive: () => boolean\n  /** Reactive class string — pass directly to element for auto-updates on route change. */\n  class: (() => string) | string | undefined\n  style?: string\n  target?: string\n  rel?: string\n  'aria-label'?: string\n  children?: any\n}\n\n/** Return type of useLink. */\nexport interface UseLinkReturn {\n  /** Ref object — attach to the root element for viewport-based prefetch. */\n  ref: import('@pyreon/core').Ref<HTMLAnchorElement>\n  /** Click handler — performs client-side navigation. */\n  handleClick: (e: MouseEvent) => void\n  /** Mouse enter handler — triggers hover prefetch. */\n  handleMouseEnter: () => void\n  /** Touch start handler — triggers prefetch on mobile. */\n  handleTouchStart: () => void\n  /** Whether the link partially matches the current route. */\n  isActive: () => boolean\n  /** Whether the link exactly matches the current route. */\n  isExactActive: () => boolean\n  /** Resolved class string including active classes. */\n  classes: () => string\n}\n\nconst MAX_PREFETCH_CACHE = 200\nconst prefetched = new Set<string>()\n\nfunction doPrefetch(href: string) {\n  if (prefetched.has(href)) return\n  // Evict oldest entries when cache is full\n  if (prefetched.size >= MAX_PREFETCH_CACHE) {\n    const first = prefetched.values().next().value\n    if (first) prefetched.delete(first)\n  }\n  prefetched.add(href)\n\n  const docLink = document.createElement('link')\n  docLink.rel = 'prefetch'\n  docLink.href = href\n  docLink.as = 'document'\n  document.head.appendChild(docLink)\n\n  try {\n    const chunkHint = document.createElement('link')\n    chunkHint.rel = 'modulepreload'\n    chunkHint.href = href\n    document.head.appendChild(chunkHint)\n  } catch {\n    // modulepreload is a hint, not critical\n  }\n}\n\n/**\n * Prefetch a route's JS chunk by injecting `<link rel=\"prefetch\">` into the\n * document head. Deduplicates — calling with the same href twice is a no-op.\n *\n * @example\n * prefetchRoute('/about')\n * prefetchRoute('/dashboard')\n */\nexport function prefetchRoute(href: string): void {\n  doPrefetch(href)\n}\n\n/**\n * Composable that provides all link behavior — navigation, prefetching,\n * active state, and viewport observation.\n *\n * Use this for full control when `createLink` is too opinionated.\n *\n * @example\n * function MyLink(props: LinkProps) {\n *   const link = useLink(props)\n *   return (\n *     <button ref={link.ref} class={link.classes()} onClick={link.handleClick}>\n *       {props.children}\n *     </button>\n *   )\n * }\n */\nexport function useLink(props: LinkProps): UseLinkReturn {\n  const router = useRouter()\n  const elementRef = createRef<HTMLAnchorElement>()\n  const strategy = props.prefetch ?? 'hover'\n\n  function handleClick(e: MouseEvent) {\n    // Call user's onClick first — they may call e.preventDefault()\n    if (props.onClick) {\n      ;(props.onClick as (e: MouseEvent) => void)(e)\n    }\n\n    if (\n      e.defaultPrevented ||\n      e.button !== 0 ||\n      e.metaKey ||\n      e.ctrlKey ||\n      e.shiftKey ||\n      e.altKey ||\n      props.external\n    ) {\n      return\n    }\n    e.preventDefault()\n    router.push(props.href)\n  }\n\n  function handleMouseEnter() {\n    if (strategy === 'hover') {\n      doPrefetch(props.href)\n    }\n  }\n\n  function handleTouchStart() {\n    if (strategy === 'hover' || strategy === 'viewport') {\n      doPrefetch(props.href)\n    }\n  }\n\n  if (strategy === 'viewport') {\n    useIntersectionObserver(\n      () => elementRef.current ?? undefined,\n      () => doPrefetch(props.href),\n    )\n  }\n\n  const isActive = () => {\n    const currentPath = router.currentRoute()?.path\n    if (!currentPath || !props.href) return false\n    if (props.href === '/') return currentPath === '/'\n    return currentPath.startsWith(props.href)\n  }\n\n  const isExactActive = () => {\n    const currentPath = router.currentRoute()?.path\n    if (!currentPath) return false\n    return currentPath === props.href\n  }\n\n  const classes = () => {\n    const cls: string[] = []\n    if (props.class) cls.push(props.class)\n    if (props.activeClass && isActive()) cls.push(props.activeClass)\n    if (props.exactActiveClass && isExactActive()) cls.push(props.exactActiveClass)\n    return cls.join(' ')\n  }\n\n  return {\n    ref: elementRef,\n    handleClick,\n    handleMouseEnter,\n    handleTouchStart,\n    isActive,\n    isExactActive,\n    classes,\n  }\n}\n\n/**\n * Higher-order component that wraps any component with link behavior.\n *\n * The wrapped component receives {@link LinkRenderProps} with all handlers,\n * active state, and accessibility attributes pre-wired.\n *\n * @example\n * // Custom button link\n * const ButtonLink = createLink((props) => (\n *   <button\n *     ref={props.ref}\n *     class={props.class}\n *     onClick={props.onClick}\n *     onMouseEnter={props.onMouseEnter}\n *   >\n *     {props.children}\n *   </button>\n * ))\n *\n * // Custom styled component\n * const CardLink = createLink((props) => (\n *   <div\n *     ref={props.ref}\n *     class={`card ${props.isActive() ? \"card--active\" : \"\"}`}\n *     onClick={props.onClick}\n *     onMouseEnter={props.onMouseEnter}\n *   >\n *     {props.children}\n *   </div>\n * ))\n *\n * // Usage\n * <ButtonLink href=\"/about\">About</ButtonLink>\n * <CardLink href=\"/posts\" prefetch=\"viewport\">Posts</CardLink>\n */\nexport function createLink(Component: (props: LinkRenderProps) => any): (props: LinkProps) => any {\n  return function WrappedLink(props: LinkProps) {\n    const link = useLink(props)\n\n    return (\n      <Component\n        href={props.href}\n        ref={link.ref}\n        onClick={link.handleClick}\n        onMouseEnter={link.handleMouseEnter}\n        onTouchStart={link.handleTouchStart}\n        isActive={link.isActive}\n        isExactActive={link.isExactActive}\n        class={link.classes}\n        {...(props.style ? { style: props.style } : {})}\n        {...(props.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}\n        {...(props['aria-label'] ? { 'aria-label': props['aria-label'] } : {})}\n        children={props.children}\n      />\n    )\n  }\n}\n\n/**\n * Default navigation link built on an `<a>` tag.\n *\n * @example\n * <Link href=\"/about\" prefetch=\"viewport\">About</Link>\n * <Link href=\"/posts\" activeClass=\"nav-active\">Posts</Link>\n */\nexport const Link = createLink((props: LinkRenderProps) => (\n  <a\n    ref={props.ref}\n    href={props.href}\n    {...(props.class ? { class: props.class } : {})}\n    {...(props.style ? { style: props.style } : {})}\n    {...(props.target ? { target: props.target } : {})}\n    {...(props.rel ? { rel: props.rel } : {})}\n    {...(props['aria-label'] ? { 'aria-label': props['aria-label'] } : {})}\n    {...(props.isExactActive() ? { 'aria-current': 'page' as const } : {})}\n    onClick={props.onClick}\n    onMouseEnter={props.onMouseEnter}\n    onTouchStart={props.onTouchStart}\n  >\n    {props.children}\n  </a>\n))\n"],"mappings":"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"}

package/lib/logger.js

@@ -0,0 +1,78 @@
+//#region src/logger.ts
+const COLORS = {
+	reset: "\x1B[0m",
+	dim: "\x1B[2m",
+	green: "\x1B[32m",
+	yellow: "\x1B[33m",
+	red: "\x1B[31m",
+	cyan: "\x1B[36m",
+	magenta: "\x1B[35m"
+};
+function methodColor(method, colors) {
+	if (!colors) return method.padEnd(7);
+	const padded = method.padEnd(7);
+	switch (method) {
+		case "GET": return `${COLORS.green}${padded}${COLORS.reset}`;
+		case "POST": return `${COLORS.cyan}${padded}${COLORS.reset}`;
+		case "PUT": return `${COLORS.yellow}${padded}${COLORS.reset}`;
+		case "PATCH": return `${COLORS.yellow}${padded}${COLORS.reset}`;
+		case "DELETE": return `${COLORS.red}${padded}${COLORS.reset}`;
+		default: return `${COLORS.magenta}${padded}${COLORS.reset}`;
+	}
+}
+function defaultFormat(entry, colors) {
+	const dur = entry.duration < 1 ? "<1ms" : entry.duration < 1e3 ? `${Math.round(entry.duration)}ms` : `${(entry.duration / 1e3).toFixed(2)}s`;
+	const dim = colors ? COLORS.dim : "";
+	const reset = colors ? COLORS.reset : "";
+	return `  ${methodColor(entry.method, colors)} ${entry.path} ${dim}${dur}${reset}`;
+}
+/**
+* Request logging middleware.
+*
+* Logs incoming requests with method, path, and duration.
+* Runs in middleware phase — logs timing from middleware start to
+* microtask completion (approximate request duration).
+*
+* @example
+* ```ts
+* // Basic usage
+* loggerMiddleware()
+*
+* // Custom format
+* loggerMiddleware({
+*   format: (e) => `${e.method} ${e.path} (${e.duration}ms)`,
+* })
+* ```
+*/
+function loggerMiddleware(config) {
+	if ((config?.level ?? "all") === "none") return () => {};
+	const skip = config?.skip ?? [
+		"/__",
+		"/@",
+		"/node_modules"
+	];
+	const isDev = typeof process !== "undefined" && process.env.NODE_ENV !== "production";
+	const colors = config?.colors ?? isDev;
+	return (ctx) => {
+		if (skip.some((p) => ctx.path.startsWith(p))) return;
+		const start = performance.now();
+		const entry = {
+			method: ctx.req.method ?? "GET",
+			path: ctx.path,
+			duration: 0,
+			timestamp: /* @__PURE__ */ new Date(),
+			userAgent: ctx.req.headers.get("user-agent") ?? void 0
+		};
+		queueMicrotask(() => {
+			entry.duration = performance.now() - start;
+			if (config?.format) {
+				const line = config.format(entry);
+				if (line) console.log(line);
+			} else console.log(defaultFormat(entry, colors));
+		});
+	};
+}
+
+//#endregion
+export { loggerMiddleware };
+//# sourceMappingURL=logger.js.map

package/lib/logger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.js","names":[],"sources":["../src/logger.ts"],"sourcesContent":["/**\n * Request logging middleware.\n *\n * Logs HTTP requests with method, path, status, and duration.\n * Supports custom formatters and log levels.\n *\n * @example\n * ```ts\n * import { loggerMiddleware } from \"@pyreon/zero\"\n *\n * export default defineConfig({\n *   middleware: [loggerMiddleware()],\n * })\n * ```\n */\nimport type { Middleware, MiddlewareContext } from '@pyreon/server'\n\nexport interface LoggerConfig {\n  /**\n   * Log level — controls which requests are logged.\n   * - \"all\": log every request\n   * - \"none\": disable logging\n   * Default: \"all\"\n   */\n  level?: 'all' | 'none'\n  /**\n   * Custom log formatter. Receives request details and returns\n   * the string to log (or null to skip).\n   */\n  format?: (entry: LogEntry) => string | null\n  /**\n   * Skip logging for these path prefixes.\n   * Default: [\"/__\", \"/@\", \"/node_modules\"]\n   */\n  skip?: string[]\n  /**\n   * Enable colorized output (ANSI codes).\n   * Default: true in development, false in production.\n   */\n  colors?: boolean\n}\n\nexport interface LogEntry {\n  method: string\n  path: string\n  duration: number\n  timestamp: Date\n  userAgent?: string | undefined\n  ip?: string | undefined\n}\n\nconst COLORS = {\n  reset: '\\x1b[0m',\n  dim: '\\x1b[2m',\n  green: '\\x1b[32m',\n  yellow: '\\x1b[33m',\n  red: '\\x1b[31m',\n  cyan: '\\x1b[36m',\n  magenta: '\\x1b[35m',\n}\n\nfunction methodColor(method: string, colors: boolean): string {\n  if (!colors) return method.padEnd(7)\n  const padded = method.padEnd(7)\n  switch (method) {\n    case 'GET': return `${COLORS.green}${padded}${COLORS.reset}`\n    case 'POST': return `${COLORS.cyan}${padded}${COLORS.reset}`\n    case 'PUT': return `${COLORS.yellow}${padded}${COLORS.reset}`\n    case 'PATCH': return `${COLORS.yellow}${padded}${COLORS.reset}`\n    case 'DELETE': return `${COLORS.red}${padded}${COLORS.reset}`\n    default: return `${COLORS.magenta}${padded}${COLORS.reset}`\n  }\n}\n\nfunction defaultFormat(entry: LogEntry, colors: boolean): string {\n  const dur = entry.duration < 1\n    ? '<1ms'\n    : entry.duration < 1000\n      ? `${Math.round(entry.duration)}ms`\n      : `${(entry.duration / 1000).toFixed(2)}s`\n\n  const dim = colors ? COLORS.dim : ''\n  const reset = colors ? COLORS.reset : ''\n\n  return `  ${methodColor(entry.method, colors)} ${entry.path} ${dim}${dur}${reset}`\n}\n\n/**\n * Request logging middleware.\n *\n * Logs incoming requests with method, path, and duration.\n * Runs in middleware phase — logs timing from middleware start to\n * microtask completion (approximate request duration).\n *\n * @example\n * ```ts\n * // Basic usage\n * loggerMiddleware()\n *\n * // Custom format\n * loggerMiddleware({\n *   format: (e) => `${e.method} ${e.path} (${e.duration}ms)`,\n * })\n * ```\n */\nexport function loggerMiddleware(config?: LoggerConfig): Middleware {\n  const level = config?.level ?? 'all'\n  if (level === 'none') return () => {}\n\n  const skip = config?.skip ?? ['/__', '/@', '/node_modules']\n  const isDev = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'\n  const colors = config?.colors ?? isDev\n\n  return (ctx: MiddlewareContext) => {\n    // Skip internal paths\n    if (skip.some((p) => ctx.path.startsWith(p))) return\n\n    const start = performance.now()\n\n    const entry: LogEntry = {\n      method: ctx.req.method ?? 'GET',\n      path: ctx.path,\n      duration: 0,\n      timestamp: new Date(),\n      userAgent: ctx.req.headers.get('user-agent') ?? undefined,\n    }\n\n    // Use queueMicrotask to log after the middleware chain completes\n    queueMicrotask(() => {\n      entry.duration = performance.now() - start\n\n      if (config?.format) {\n        const line = config.format(entry)\n        if (line) {\n          // oxlint-disable-next-line no-console\n          console.log(line)\n        }\n      } else {\n        // oxlint-disable-next-line no-console\n        console.log(defaultFormat(entry, colors))\n      }\n    })\n  }\n}\n"],"mappings":";AAmDA,MAAM,SAAS;CACb,OAAO;CACP,KAAK;CACL,OAAO;CACP,QAAQ;CACR,KAAK;CACL,MAAM;CACN,SAAS;CACV;AAED,SAAS,YAAY,QAAgB,QAAyB;AAC5D,KAAI,CAAC,OAAQ,QAAO,OAAO,OAAO,EAAE;CACpC,MAAM,SAAS,OAAO,OAAO,EAAE;AAC/B,SAAQ,QAAR;EACE,KAAK,MAAO,QAAO,GAAG,OAAO,QAAQ,SAAS,OAAO;EACrD,KAAK,OAAQ,QAAO,GAAG,OAAO,OAAO,SAAS,OAAO;EACrD,KAAK,MAAO,QAAO,GAAG,OAAO,SAAS,SAAS,OAAO;EACtD,KAAK,QAAS,QAAO,GAAG,OAAO,SAAS,SAAS,OAAO;EACxD,KAAK,SAAU,QAAO,GAAG,OAAO,MAAM,SAAS,OAAO;EACtD,QAAS,QAAO,GAAG,OAAO,UAAU,SAAS,OAAO;;;AAIxD,SAAS,cAAc,OAAiB,QAAyB;CAC/D,MAAM,MAAM,MAAM,WAAW,IACzB,SACA,MAAM,WAAW,MACf,GAAG,KAAK,MAAM,MAAM,SAAS,CAAC,MAC9B,IAAI,MAAM,WAAW,KAAM,QAAQ,EAAE,CAAC;CAE5C,MAAM,MAAM,SAAS,OAAO,MAAM;CAClC,MAAM,QAAQ,SAAS,OAAO,QAAQ;AAEtC,QAAO,KAAK,YAAY,MAAM,QAAQ,OAAO,CAAC,GAAG,MAAM,KAAK,GAAG,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;AAqB7E,SAAgB,iBAAiB,QAAmC;AAElE,MADc,QAAQ,SAAS,WACjB,OAAQ,cAAa;CAEnC,MAAM,OAAO,QAAQ,QAAQ;EAAC;EAAO;EAAM;EAAgB;CAC3D,MAAM,QAAQ,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa;CACzE,MAAM,SAAS,QAAQ,UAAU;AAEjC,SAAQ,QAA2B;AAEjC,MAAI,KAAK,MAAM,MAAM,IAAI,KAAK,WAAW,EAAE,CAAC,CAAE;EAE9C,MAAM,QAAQ,YAAY,KAAK;EAE/B,MAAM,QAAkB;GACtB,QAAQ,IAAI,IAAI,UAAU;GAC1B,MAAM,IAAI;GACV,UAAU;GACV,2BAAW,IAAI,MAAM;GACrB,WAAW,IAAI,IAAI,QAAQ,IAAI,aAAa,IAAI;GACjD;AAGD,uBAAqB;AACnB,SAAM,WAAW,YAAY,KAAK,GAAG;AAErC,OAAI,QAAQ,QAAQ;IAClB,MAAM,OAAO,OAAO,OAAO,MAAM;AACjC,QAAI,KAEF,SAAQ,IAAI,KAAK;SAInB,SAAQ,IAAI,cAAc,OAAO,OAAO,CAAC;IAE3C"}

package/lib/meta.js

@@ -0,0 +1,336 @@
+import { useHead } from "@pyreon/head";
+import { createContext } from "@pyreon/core";
+import { signal } from "@pyreon/reactivity";
+
+//#region src/favicon.ts
+/**
+* Get favicon link tags for a specific locale.
+* Returns link objects suitable for `useHead()` or direct HTML injection.
+*
+* @example
+* ```ts
+* const links = faviconLinks("de", { source: "./icon.svg", locales: { de: { source: "./icon-de.svg" } } })
+* // → [{ rel: "icon", type: "image/svg+xml", href: "/de/favicon.svg" }, ...]
+* ```
+*/
+function faviconLinks(locale, config) {
+	const hasLocaleOverride = locale && config.locales?.[locale];
+	const prefix = hasLocaleOverride ? `/${locale}` : "";
+	const isSvg = (hasLocaleOverride ? config.locales[locale].source : config.source).endsWith(".svg");
+	const links = [];
+	if (isSvg) links.push({
+		rel: "icon",
+		type: "image/svg+xml",
+		href: `${prefix}/favicon.svg`
+	});
+	links.push({
+		rel: "icon",
+		type: "image/png",
+		sizes: "32x32",
+		href: `${prefix}/favicon-32x32.png`
+	}, {
+		rel: "icon",
+		type: "image/png",
+		sizes: "16x16",
+		href: `${prefix}/favicon-16x16.png`
+	}, {
+		rel: "apple-touch-icon",
+		sizes: "180x180",
+		href: `${prefix}/apple-touch-icon.png`
+	});
+	if (config.manifest !== false) links.push({
+		rel: "manifest",
+		href: `${prefix}/site.webmanifest`
+	});
+	return links;
+}
+
+//#endregion
+//#region src/i18n-routing.ts
+/**
+* Extract locale from a URL path.
+* Returns { locale, pathWithoutLocale }.
+*/
+function extractLocaleFromPath(path, locales, defaultLocale) {
+	const segments = path.split("/").filter(Boolean);
+	const firstSegment = segments[0]?.toLowerCase();
+	if (firstSegment && locales.includes(firstSegment)) return {
+		locale: firstSegment,
+		pathWithoutLocale: "/" + segments.slice(1).join("/") || "/"
+	};
+	return {
+		locale: defaultLocale,
+		pathWithoutLocale: path
+	};
+}
+/** @internal Context for the current locale. */
+const LocaleCtx = createContext("en");
+/** Current locale signal — set by the server middleware or client-side detection. */
+const localeSignal = signal("en");
+
+//#endregion
+//#region src/og-image.ts
+/**
+* Compute the OG image path for a template and locale.
+*
+* @example
+* ```ts
+* ogImagePath("default", "de")      // → "/og/default-de.png"
+* ogImagePath("default")            // → "/og/default.png"
+* ogImagePath("hero", "en", "images") // → "/images/hero-en.png"
+* ```
+*/
+function ogImagePath(templateName, locale, outDir = "og", format = "png") {
+	const ext = format === "jpeg" ? "jpg" : "png";
+	return `/${outDir}/${templateName}${locale ? `-${locale}` : ""}.${ext}`;
+}
+
+//#endregion
+//#region src/meta.tsx
+const resolveStr = (v) => typeof v === "function" ? v() : v;
+/**
+* Declarative meta component for SSR-compatible page metadata.
+*
+* Supports reactive title/description — when passed as `() => string` accessors,
+* they are forwarded to `useHead()` as a reactive getter so updates propagate
+* automatically via signal tracking.
+*
+* @example
+* ```tsx
+* <Meta title="My Page" description="..." image="/og.jpg" canonical="https://..." />
+* ```
+*
+* @example Reactive title
+* ```tsx
+* const count = signal(0)
+* <Meta title={() => `${count()} items`} />
+* ```
+*/
+function Meta(props) {
+	const hasReactiveTitle = typeof props.title === "function";
+	const hasReactiveDescription = typeof props.description === "function";
+	if (hasReactiveTitle || hasReactiveDescription) useHead(() => {
+		const title = resolveStr(props.title);
+		const description = resolveStr(props.description);
+		const tags = buildMetaTags({
+			...props,
+			title,
+			description
+		});
+		const input = {
+			meta: tags.meta,
+			link: tags.link,
+			script: tags.script
+		};
+		if (title) input.title = title;
+		return input;
+	});
+	else {
+		const title = resolveStr(props.title);
+		const description = resolveStr(props.description);
+		const tags = buildMetaTags({
+			...props,
+			title,
+			description
+		});
+		const input = {
+			meta: tags.meta,
+			link: tags.link,
+			script: tags.script
+		};
+		if (title) input.title = title;
+		useHead(input);
+	}
+	return props.children ?? null;
+}
+function buildMetaTags(props) {
+	const meta = [];
+	const link = [];
+	const script = [];
+	const { title, description, canonical, imageAlt, imageWidth, imageHeight, type = "website", siteName, twitterCard = "summary_large_image", twitterSite, twitterCreator, locale = "en_US", alternateLocales, publishedTime, modifiedTime, author, tags, jsonLd, extra, video, videoWidth, videoHeight, audio, favicon, ogTemplate, ogImageDir, ogImageFormat } = props;
+	const robots = props.noIndex ? "noindex, nofollow" : props.robots ?? "index, follow";
+	const image = props.image ?? (ogTemplate ? ogImagePath(ogTemplate, locale !== "en_US" ? locale : void 0, ogImageDir, ogImageFormat) : void 0);
+	const resolvedImageWidth = imageWidth ?? (ogTemplate && !props.image ? 1200 : void 0);
+	const resolvedImageHeight = imageHeight ?? (ogTemplate && !props.image ? 630 : void 0);
+	if (description) meta.push({
+		name: "description",
+		content: description
+	});
+	if (robots) meta.push({
+		name: "robots",
+		content: robots
+	});
+	if (author) meta.push({
+		name: "author",
+		content: author
+	});
+	if (title) meta.push({
+		property: "og:title",
+		content: title
+	});
+	if (description) meta.push({
+		property: "og:description",
+		content: description
+	});
+	if (canonical) meta.push({
+		property: "og:url",
+		content: canonical
+	});
+	if (image) meta.push({
+		property: "og:image",
+		content: image
+	});
+	if (imageAlt) meta.push({
+		property: "og:image:alt",
+		content: imageAlt
+	});
+	if (resolvedImageWidth) meta.push({
+		property: "og:image:width",
+		content: String(resolvedImageWidth)
+	});
+	if (resolvedImageHeight) meta.push({
+		property: "og:image:height",
+		content: String(resolvedImageHeight)
+	});
+	meta.push({
+		property: "og:type",
+		content: type
+	});
+	if (siteName) meta.push({
+		property: "og:site_name",
+		content: siteName
+	});
+	meta.push({
+		property: "og:locale",
+		content: locale
+	});
+	if (video) {
+		meta.push({
+			property: "og:video",
+			content: video
+		});
+		if (videoWidth) meta.push({
+			property: "og:video:width",
+			content: String(videoWidth)
+		});
+		if (videoHeight) meta.push({
+			property: "og:video:height",
+			content: String(videoHeight)
+		});
+		if (video.endsWith(".mp4")) meta.push({
+			property: "og:video:type",
+			content: "video/mp4"
+		});
+		else if (video.endsWith(".webm")) meta.push({
+			property: "og:video:type",
+			content: "video/webm"
+		});
+	}
+	if (audio) meta.push({
+		property: "og:audio",
+		content: audio
+	});
+	if (type === "article") {
+		if (publishedTime) meta.push({
+			property: "article:published_time",
+			content: publishedTime
+		});
+		if (modifiedTime) meta.push({
+			property: "article:modified_time",
+			content: modifiedTime
+		});
+		if (author) meta.push({
+			property: "article:author",
+			content: author
+		});
+		if (tags) for (const tag of tags) meta.push({
+			property: "article:tag",
+			content: tag
+		});
+	}
+	meta.push({
+		name: "twitter:card",
+		content: twitterCard
+	});
+	if (title) meta.push({
+		name: "twitter:title",
+		content: title
+	});
+	if (description) meta.push({
+		name: "twitter:description",
+		content: description
+	});
+	if (image) meta.push({
+		name: "twitter:image",
+		content: image
+	});
+	if (imageAlt) meta.push({
+		name: "twitter:image:alt",
+		content: imageAlt
+	});
+	if (twitterSite) meta.push({
+		name: "twitter:site",
+		content: twitterSite
+	});
+	if (twitterCreator) meta.push({
+		name: "twitter:creator",
+		content: twitterCreator
+	});
+	if (canonical) link.push({
+		rel: "canonical",
+		href: canonical
+	});
+	if (alternateLocales) for (const alt of alternateLocales) link.push({
+		rel: "alternate",
+		hreflang: alt.locale,
+		href: alt.url
+	});
+	if (jsonLd) script.push({
+		type: "application/ld+json",
+		children: JSON.stringify({
+			"@context": "https://schema.org",
+			...jsonLd
+		})
+	});
+	if (extra) for (const tag of extra) meta.push(tag);
+	if (props.i18n) {
+		const i18nConfig = props.i18n;
+		const origin = props.origin ?? "";
+		const { pathWithoutLocale } = extractLocaleFromPath(canonical?.replace(origin, "") ?? "/", i18nConfig.locales, i18nConfig.defaultLocale);
+		const strategy = i18nConfig.strategy ?? "prefix-except-default";
+		for (const loc of i18nConfig.locales) {
+			const localizedPath = strategy === "prefix-except-default" && loc === i18nConfig.defaultLocale ? pathWithoutLocale : `/${loc}${pathWithoutLocale === "/" ? "" : pathWithoutLocale}`;
+			link.push({
+				rel: "alternate",
+				hreflang: loc,
+				href: `${origin}${localizedPath}`
+			});
+			if (loc !== locale) meta.push({
+				property: "og:locale:alternate",
+				content: loc
+			});
+		}
+		link.push({
+			rel: "alternate",
+			hreflang: "x-default",
+			href: `${origin}${pathWithoutLocale}`
+		});
+	}
+	if (favicon) {
+		const faviconLocale = locale !== "en_US" ? locale : void 0;
+		for (const fl of faviconLinks(faviconLocale, favicon)) link.push(fl);
+		if (favicon.themeColor) meta.push({
+			name: "theme-color",
+			content: favicon.themeColor
+		});
+	}
+	return {
+		meta,
+		link,
+		script
+	};
+}
+
+//#endregion
+export { Meta, buildMetaTags };
+//# sourceMappingURL=meta.js.map