alepha 0.20.1 → 0.20.3

package/dist/react/head/index.js

@@ -370,8 +370,9 @@ var BrowserHeadProvider = class {
 		if (head.script) for (const it of head.script) this.renderScriptTag(document, it);
 	}
 	renderScriptTag(document, script) {
-		const el = document.createElement("script");
 		if (typeof script === "string") {
+			if (this.findInlineScriptByContent(document, script)) return;
+			const el = document.createElement("script");
 			el.textContent = script;
 			document.head.appendChild(el);
 			return;
@@ -379,12 +380,26 @@ var BrowserHeadProvider = class {
 		const { content, ...attrs } = script;
 		if (attrs.src) {
 			if (document.querySelector(`script[src="${attrs.src}"]`)) return;
+		} else if (typeof attrs.id === "string") {
+			if (document.querySelector(`script#${CSS.escape(attrs.id)}`)) return;
+		} else if (content) {
+			if (this.findInlineScriptByContent(document, content)) return;
 		}
+		const el = document.createElement("script");
 		for (const [key, value] of Object.entries(attrs)) if (value === true) el.setAttribute(key, "");
 		else if (value !== void 0 && value !== false) el.setAttribute(key, String(value));
 		if (content) el.textContent = content;
 		document.head.appendChild(el);
 	}
+	/**
+	* Find an existing inline `<script>` tag (no `src`) with matching textContent.
+	* Used to make `renderScriptTag` idempotent across hydration + navigation,
+	* so SSR-emitted global scripts aren't re-appended client-side.
+	*/
+	findInlineScriptByContent(document, content) {
+		for (const existing of document.head.querySelectorAll("script:not([src])")) if (existing.textContent === content) return existing;
+		return null;
+	}
 	renderMetaTag(document, meta) {
 		const { content } = meta;
 		if (meta.property) {

package/dist/react/head/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/react/head/helpers/SeoExpander.ts","../../../src/react/head/providers/HeadProvider.ts","../../../src/react/head/primitives/$head.ts","../../../src/react/head/providers/BrowserHeadProvider.ts","../../../src/react/head/providers/ServerHeadProvider.ts","../../../src/react/head/hooks/useHead.ts","../../../src/react/head/index.ts"],"sourcesContent":["import type { Head, HeadMeta } from \"../interfaces/Head.ts\";\n\n/**\n * Expands Head configuration into SEO meta tags.\n *\n * Generates:\n * - `<meta name=\"description\">` from head.description\n * - `<meta property=\"og:*\">` OpenGraph tags\n * - `<meta name=\"twitter:*\">` Twitter Card tags\n *\n * @example\n * ```ts\n * const helper = new SeoExpander();\n * const { meta, link } = helper.expand({\n *   title: \"My App\",\n *   description: \"Build amazing apps\",\n *   image: \"https://example.com/og.png\",\n *   url: \"https://example.com/\",\n * });\n * ```\n */\nexport class SeoExpander {\n  public expand(head: Head): {\n    meta: HeadMeta[];\n    link: Array<{ rel: string; href: string }>;\n  } {\n    const meta: HeadMeta[] = [];\n    const link: Array<{ rel: string; href: string }> = [];\n\n    // Only expand SEO if there's meaningful content beyond just title\n    const hasSeoContent =\n      head.description ||\n      head.image ||\n      head.url ||\n      head.siteName ||\n      head.locale ||\n      head.type ||\n      head.og ||\n      head.twitter;\n\n    if (!hasSeoContent) {\n      return { meta, link };\n    }\n\n    // Base description\n    if (head.description) {\n      meta.push({ name: \"description\", content: head.description });\n    }\n\n    // Canonical URL\n    if (head.url) {\n      link.push({ rel: \"canonical\", href: head.url });\n    }\n\n    // OpenGraph tags\n    this.expandOpenGraph(head, meta);\n\n    // Twitter Card tags\n    this.expandTwitter(head, meta);\n\n    return { meta, link };\n  }\n\n  protected expandOpenGraph(head: Head, meta: HeadMeta[]): void {\n    const ogTitle = head.og?.title ?? head.title;\n    const ogDescription = head.og?.description ?? head.description;\n    const ogImage = head.og?.image ?? head.image;\n\n    if (head.type || ogTitle) {\n      meta.push({ property: \"og:type\", content: head.type ?? \"website\" });\n    }\n    if (head.url) {\n      meta.push({ property: \"og:url\", content: head.url });\n    }\n    if (ogTitle) {\n      meta.push({ property: \"og:title\", content: ogTitle });\n    }\n    if (ogDescription) {\n      meta.push({ property: \"og:description\", content: ogDescription });\n    }\n    if (ogImage) {\n      meta.push({ property: \"og:image\", content: ogImage });\n      if (head.imageWidth) {\n        meta.push({\n          property: \"og:image:width\",\n          content: String(head.imageWidth),\n        });\n      }\n      if (head.imageHeight) {\n        meta.push({\n          property: \"og:image:height\",\n          content: String(head.imageHeight),\n        });\n      }\n      if (head.imageAlt) {\n        meta.push({ property: \"og:image:alt\", content: head.imageAlt });\n      }\n    }\n    if (head.siteName) {\n      meta.push({ property: \"og:site_name\", content: head.siteName });\n    }\n    if (head.locale) {\n      meta.push({ property: \"og:locale\", content: head.locale });\n    }\n  }\n\n  protected expandTwitter(head: Head, meta: HeadMeta[]): void {\n    const twitterTitle = head.twitter?.title ?? head.title;\n    const twitterDescription = head.twitter?.description ?? head.description;\n    const twitterImage = head.twitter?.image ?? head.image;\n\n    if (head.twitter?.card || twitterTitle || twitterImage) {\n      meta.push({\n        name: \"twitter:card\",\n        content:\n          head.twitter?.card ??\n          (twitterImage ? \"summary_large_image\" : \"summary\"),\n      });\n    }\n    if (head.url) {\n      meta.push({ name: \"twitter:url\", content: head.url });\n    }\n    if (twitterTitle) {\n      meta.push({ name: \"twitter:title\", content: twitterTitle });\n    }\n    if (twitterDescription) {\n      meta.push({ name: \"twitter:description\", content: twitterDescription });\n    }\n    if (twitterImage) {\n      meta.push({ name: \"twitter:image\", content: twitterImage });\n      if (head.imageAlt) {\n        meta.push({ name: \"twitter:image:alt\", content: head.imageAlt });\n      }\n    }\n    if (head.twitter?.site) {\n      meta.push({ name: \"twitter:site\", content: head.twitter.site });\n    }\n    if (head.twitter?.creator) {\n      meta.push({ name: \"twitter:creator\", content: head.twitter.creator });\n    }\n  }\n}\n","import { $inject } from \"alepha\";\nimport { $logger } from \"alepha/logger\";\nimport { SeoExpander } from \"../helpers/SeoExpander.ts\";\nimport type { Head } from \"../interfaces/Head.ts\";\n\n/**\n * Provides methods to fill and merge head information into the application state.\n *\n * Used both on server and client side to manage document head.\n *\n * @see {@link SeoExpander}\n * @see {@link ServerHeadProvider}\n * @see {@link BrowserHeadProvider}\n */\nexport class HeadProvider {\n  protected readonly log = $logger();\n  protected readonly seoExpander = $inject(SeoExpander);\n\n  public global?: Array<Head | (() => Head)> = [];\n\n  /**\n   * Track if we've warned about page-level htmlAttributes to avoid spam.\n   */\n  protected warnedAboutHtmlAttributes = false;\n\n  /**\n   * Resolve global head configuration (from $head primitives only).\n   *\n   * This is used to get htmlAttributes early, before page loaders run.\n   * Only htmlAttributes from global $head are allowed; page-level htmlAttributes\n   * are ignored for early streaming optimization.\n   *\n   * @returns Merged global head with htmlAttributes\n   */\n  public resolveGlobalHead(): Head {\n    const head: Head = {\n      htmlAttributes: { lang: \"en\" },\n    };\n\n    for (const h of this.global ?? []) {\n      const resolved = typeof h === \"function\" ? h() : h;\n      if (resolved.htmlAttributes) {\n        head.htmlAttributes = {\n          ...head.htmlAttributes,\n          ...resolved.htmlAttributes,\n        };\n      }\n    }\n\n    return head;\n  }\n\n  /**\n   * Fully resolve all global $head entries (functions re-evaluated, objects kept as-is).\n   *\n   * Unlike resolveGlobalHead() which only extracts htmlAttributes for streaming,\n   * this resolves all head properties (meta, link, script, htmlAttributes, etc.).\n   *\n   * Used by BrowserHeadProvider.refreshGlobalHead() to re-apply global head to the DOM.\n   */\n  public resolveGlobal(): Head {\n    let head: Head = {};\n\n    for (const h of this.global ?? []) {\n      const resolved = typeof h === \"function\" ? h() : h;\n      const { meta, link } = this.seoExpander.expand(resolved);\n      head = {\n        ...head,\n        ...resolved,\n        meta: [...(head.meta ?? []), ...meta, ...(resolved.meta ?? [])],\n        link: [...(head.link ?? []), ...link, ...(resolved.link ?? [])],\n        script: [...(head.script ?? []), ...(resolved.script ?? [])],\n      };\n    }\n\n    return head;\n  }\n\n  public fillHead(state: HeadState) {\n    state.head = {\n      ...state.head,\n    };\n\n    for (const h of this.global ?? []) {\n      const head = typeof h === \"function\" ? h() : h;\n      this.mergeHead(state, head);\n    }\n\n    for (const layer of state.layers) {\n      if (layer.route?.head && !layer.error) {\n        this.fillHeadByPage(layer.route, state, layer.props ?? {});\n      }\n    }\n\n    // Defaults if none were set by global $head or page head\n    state.head.title ??= \"App\";\n    state.head.htmlAttributes = {\n      lang: \"en\",\n      ...state.head.htmlAttributes,\n    };\n  }\n\n  protected mergeHead(state: HeadState, head: Head): void {\n    // Expand SEO fields into meta tags\n    const { meta, link } = this.seoExpander.expand(head);\n    state.head = {\n      ...state.head,\n      ...head,\n      meta: [...(state.head.meta ?? []), ...meta, ...(head.meta ?? [])],\n      link: [...(state.head.link ?? []), ...link, ...(head.link ?? [])],\n      script: [...(state.head.script ?? []), ...(head.script ?? [])],\n    };\n  }\n\n  protected fillHeadByPage(\n    page: HeadRoute,\n    state: HeadState,\n    props: Record<string, any>,\n  ): void {\n    if (!page.head) {\n      return;\n    }\n\n    state.head ??= {};\n\n    const head =\n      typeof page.head === \"function\"\n        ? page.head(props, state.head)\n        : page.head;\n\n    // Expand SEO fields into meta tags\n    const { meta, link } = this.seoExpander.expand(head);\n    state.head.meta = [...(state.head.meta ?? []), ...meta];\n    state.head.link = [...(state.head.link ?? []), ...link];\n\n    if (head.title) {\n      state.head ??= {};\n\n      if (state.head.titleSeparator) {\n        state.head.title = `${head.title}${state.head.titleSeparator}${state.head.title}`;\n      } else {\n        state.head.title = head.title;\n      }\n\n      state.head.titleSeparator = head.titleSeparator;\n    }\n\n    // htmlAttributes from pages are ignored for early streaming optimization.\n    // Only global $head can set htmlAttributes.\n    if (head.htmlAttributes && !this.warnedAboutHtmlAttributes) {\n      this.warnedAboutHtmlAttributes = true;\n      this.log.warn(\n        \"Page-level htmlAttributes are ignored. Use global $head() for htmlAttributes instead, \" +\n          \"as they are sent before page loaders run for early streaming optimization.\",\n      );\n    }\n\n    if (head.bodyAttributes) {\n      state.head.bodyAttributes = {\n        ...state.head.bodyAttributes,\n        ...head.bodyAttributes,\n      };\n    }\n\n    if (head.meta) {\n      state.head.meta = [...(state.head.meta ?? []), ...(head.meta ?? [])];\n    }\n\n    if (head.link) {\n      state.head.link = [...(state.head.link ?? []), ...(head.link ?? [])];\n    }\n\n    if (head.script) {\n      state.head.script = [\n        ...(state.head.script ?? []),\n        ...(head.script ?? []),\n      ];\n    }\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n/**\n * Minimal route interface for head processing.\n * Avoids circular dependency with alepha/react/router.\n */\ninterface HeadRoute {\n  head?: Head | ((props: Record<string, any>, previous?: Head) => Head);\n}\n\n/**\n * Minimal state interface for head processing.\n * Avoids circular dependency with alepha/react/router.\n */\ninterface HeadState {\n  head: Head;\n  layers: Array<{\n    route?: HeadRoute;\n    props?: Record<string, any>;\n    error?: Error;\n  }>;\n}\n","import { $inject, createPrimitive, KIND, Primitive } from \"alepha\";\nimport type { Head } from \"../interfaces/Head.ts\";\nimport { HeadProvider } from \"../providers/HeadProvider.ts\";\n\n/**\n * Set global `<head>` options for the application.\n */\nexport const $head = (options: HeadPrimitiveOptions) => {\n  return createPrimitive(HeadPrimitive, options);\n};\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport type HeadPrimitiveOptions = Head | (() => Head);\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport class HeadPrimitive extends Primitive<HeadPrimitiveOptions> {\n  protected readonly provider = $inject(HeadProvider);\n  protected onInit() {\n    this.provider.global = [...(this.provider.global ?? []), this.options];\n  }\n}\n\n$head[KIND] = HeadPrimitive;\n","import { $inject, Alepha } from \"alepha\";\nimport type { Head, HeadMeta } from \"../interfaces/Head.ts\";\nimport { HeadProvider } from \"./HeadProvider.ts\";\n\n/**\n * Browser-side head provider that manages document head elements.\n *\n * Used by ReactBrowserProvider and ReactBrowserRouterProvider to update\n * document title, meta tags, and other head elements during client-side\n * navigation.\n */\nexport class BrowserHeadProvider {\n  protected readonly alepha = $inject(Alepha);\n  protected readonly headProvider = $inject(HeadProvider);\n\n  protected get document(): Document {\n    return window.document;\n  }\n\n  /**\n   * Fill head state from route configurations and render to document.\n   * Combines fillHead from HeadProvider with renderHead to the DOM.\n   *\n   * Only runs in browser environment - no-op on server.\n   */\n  public fillAndRenderHead(state: { head: Head; layers: Array<any> }): void {\n    // Skip on server-side\n    if (!this.alepha.isBrowser()) {\n      return;\n    }\n\n    this.headProvider.fillHead(state as any);\n    if (state.head) {\n      this.renderHead(this.document, state.head);\n    }\n  }\n\n  /**\n   * Re-evaluate all global $head entries and apply the result to the DOM.\n   *\n   * Call this when something that affects global $head output changes at runtime\n   * (e.g., theme switch). Page-level head (title, meta from routes) is not touched.\n   */\n  public refreshGlobalHead(): void {\n    const head = this.headProvider.resolveGlobal();\n    this.renderHead(this.document, head);\n  }\n\n  public getHead(document: Document): Head {\n    return {\n      get title() {\n        return document.title;\n      },\n      get htmlAttributes() {\n        const attrs: Record<string, string> = {};\n        for (const attr of document.documentElement.attributes) {\n          attrs[attr.name] = attr.value;\n        }\n        return attrs;\n      },\n      get bodyAttributes() {\n        const attrs: Record<string, string> = {};\n        for (const attr of document.body.attributes) {\n          attrs[attr.name] = attr.value;\n        }\n        return attrs;\n      },\n      get meta() {\n        const metas: HeadMeta[] = [];\n        // Get meta tags with name attribute\n        for (const meta of document.head.querySelectorAll(\"meta[name]\")) {\n          const name = meta.getAttribute(\"name\");\n          const content = meta.getAttribute(\"content\");\n          if (name && content) {\n            metas.push({ name, content });\n          }\n        }\n        // Get meta tags with property attribute (OpenGraph)\n        for (const meta of document.head.querySelectorAll(\"meta[property]\")) {\n          const property = meta.getAttribute(\"property\");\n          const content = meta.getAttribute(\"content\");\n          if (property && content) {\n            metas.push({ property, content });\n          }\n        }\n        return metas;\n      },\n    };\n  }\n\n  public renderHead(document: Document, head: Head): void {\n    if (head.title) {\n      document.title = head.title;\n    }\n\n    if (head.bodyAttributes) {\n      for (const [key, value] of Object.entries(head.bodyAttributes)) {\n        if (value) {\n          document.body.setAttribute(key, value);\n        } else {\n          document.body.removeAttribute(key);\n        }\n      }\n    }\n\n    if (head.htmlAttributes) {\n      for (const [key, value] of Object.entries(head.htmlAttributes)) {\n        if (value) {\n          document.documentElement.setAttribute(key, value);\n        } else {\n          document.documentElement.removeAttribute(key);\n        }\n      }\n    }\n\n    if (head.meta) {\n      for (const it of head.meta) {\n        this.renderMetaTag(document, it);\n      }\n    }\n\n    if (head.link) {\n      for (const it of head.link) {\n        const { rel, href } = it;\n        let link = document.querySelector(`link[rel=\"${rel}\"][href=\"${href}\"]`);\n        if (!link) {\n          link = document.createElement(\"link\");\n          link.setAttribute(\"rel\", rel);\n          link.setAttribute(\"href\", href);\n          if (it.type) {\n            link.setAttribute(\"type\", it.type);\n          }\n          if (it.as) {\n            link.setAttribute(\"as\", it.as);\n          }\n          if (it.crossorigin != null) {\n            link.setAttribute(\"crossorigin\", \"\");\n          }\n          document.head.appendChild(link);\n        }\n      }\n    }\n\n    if (head.script) {\n      for (const it of head.script) {\n        this.renderScriptTag(document, it);\n      }\n    }\n  }\n\n  protected renderScriptTag(\n    document: Document,\n    script:\n      | string\n      | (Record<string, string | boolean | undefined> & { content?: string }),\n  ): void {\n    const el = document.createElement(\"script\");\n\n    // Handle plain string as inline script\n    if (typeof script === \"string\") {\n      el.textContent = script;\n      document.head.appendChild(el);\n      return;\n    }\n\n    const { content, ...attrs } = script;\n\n    // For scripts with src, check if already exists\n    if (attrs.src) {\n      const existing = document.querySelector(`script[src=\"${attrs.src}\"]`);\n      if (existing) {\n        return;\n      }\n    }\n\n    for (const [key, value] of Object.entries(attrs)) {\n      if (value === true) {\n        el.setAttribute(key, \"\");\n      } else if (value !== undefined && value !== false) {\n        el.setAttribute(key, String(value));\n      }\n    }\n\n    if (content) {\n      el.textContent = content;\n    }\n\n    document.head.appendChild(el);\n  }\n\n  protected renderMetaTag(document: Document, meta: HeadMeta): void {\n    const { content } = meta;\n\n    // Handle OpenGraph tags (property attribute)\n    if (meta.property) {\n      const existing = document.querySelector(\n        `meta[property=\"${meta.property}\"]`,\n      );\n      if (existing) {\n        existing.setAttribute(\"content\", content);\n      } else {\n        const newMeta = document.createElement(\"meta\");\n        newMeta.setAttribute(\"property\", meta.property);\n        newMeta.setAttribute(\"content\", content);\n        document.head.appendChild(newMeta);\n      }\n      return;\n    }\n\n    // Handle standard meta tags (name attribute)\n    if (meta.name) {\n      const existing = document.querySelector(`meta[name=\"${meta.name}\"]`);\n      if (existing) {\n        existing.setAttribute(\"content\", content);\n      } else {\n        const newMeta = document.createElement(\"meta\");\n        newMeta.setAttribute(\"name\", meta.name);\n        newMeta.setAttribute(\"content\", content);\n        document.head.appendChild(newMeta);\n      }\n    }\n  }\n}\n","import { $inject } from \"alepha\";\nimport type { Head, SimpleHead } from \"../interfaces/Head.ts\";\nimport { HeadProvider } from \"./HeadProvider.ts\";\n\n/**\n * Server-side head provider that fills head content from route configurations.\n *\n * Used by ReactServerProvider to collect title, meta tags, and other head\n * elements which are then rendered by ReactServerTemplateProvider.\n */\nexport class ServerHeadProvider {\n  protected readonly headProvider = $inject(HeadProvider);\n\n  /**\n   * Resolve global head configuration (htmlAttributes only).\n   *\n   * Used for early streaming optimization - htmlAttributes can be sent\n   * before page loaders run since they come from global $head only.\n   */\n  public resolveGlobalHead(): Head {\n    return this.headProvider.resolveGlobalHead();\n  }\n\n  /**\n   * Fill head state from route configurations.\n   * Delegates to HeadProvider to merge head data from all route layers.\n   */\n  public fillHead(state: { head: SimpleHead; layers: Array<any> }): void {\n    this.headProvider.fillHead(state as any);\n  }\n}\n","import { Alepha } from \"alepha\";\nimport { useInject } from \"alepha/react\";\nimport { useCallback, useEffect, useMemo } from \"react\";\nimport type { Head } from \"../interfaces/Head.ts\";\nimport { BrowserHeadProvider } from \"../providers/BrowserHeadProvider.ts\";\n\n/**\n * ```tsx\n * const App = () => {\n *   const [head, setHead] = useHead({\n *     // will set the document title on the first render\n *     title: \"My App\",\n *   });\n *\n *   return (\n *     // This will update the document title when the button is clicked\n *     <button onClick={() => setHead({ title: \"Change Title\" })}>\n *       Change Title {head.title}\n *     </button>\n *   );\n * }\n * ```\n */\nexport const useHead = (options?: UseHeadOptions): UseHeadReturn => {\n  const alepha = useInject(Alepha);\n\n  const current = useMemo(() => {\n    if (!alepha.isBrowser()) {\n      return {};\n    }\n\n    return alepha.inject(BrowserHeadProvider).getHead(window.document);\n  }, []);\n\n  const setHead = useCallback((head?: Head | ((previous?: Head) => Head)) => {\n    if (!alepha.isBrowser()) {\n      return;\n    }\n\n    const headProvider = alepha.inject(BrowserHeadProvider);\n    const resolved =\n      typeof head === \"function\"\n        ? head(headProvider.getHead(window.document))\n        : head || {};\n    headProvider.renderHead(window.document, resolved);\n  }, []);\n\n  useEffect(() => {\n    if (options) {\n      setHead(options);\n    }\n  }, []);\n\n  return [current, setHead];\n};\n\nexport type UseHeadOptions = Head | ((previous?: Head) => Head);\n\nexport type UseHeadReturn = [\n  Head,\n  (head?: Head | ((previous?: Head) => Head)) => void,\n];\n","import { $module } from \"alepha\";\nimport { AlephaReact } from \"alepha/react\";\nimport { SeoExpander } from \"./helpers/SeoExpander.ts\";\nimport { $head } from \"./primitives/$head.ts\";\nimport { BrowserHeadProvider } from \"./providers/BrowserHeadProvider.ts\";\nimport { HeadProvider } from \"./providers/HeadProvider.ts\";\nimport { ServerHeadProvider } from \"./providers/ServerHeadProvider.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport * from \"./helpers/SeoExpander.ts\";\nexport * from \"./hooks/useHead.ts\";\nexport * from \"./interfaces/Head.ts\";\nexport * from \"./primitives/$head.ts\";\nexport * from \"./providers/BrowserHeadProvider.ts\";\nexport * from \"./providers/ServerHeadProvider.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n/**\n * HTML head element management.\n *\n * **Features:**\n * - Title, meta tags, and links\n * - SEO optimization\n * - Social media tags\n *\n * @module alepha.react.head\n */\nexport const AlephaReactHead = $module({\n  name: \"alepha.react.head\",\n  primitives: [$head],\n  services: [\n    AlephaReact,\n    BrowserHeadProvider,\n    HeadProvider,\n    SeoExpander,\n    ServerHeadProvider,\n  ],\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAa,cAAb,MAAyB;CACvB,OAAc,MAGZ;EACA,MAAM,OAAmB,EAAE;EAC3B,MAAM,OAA6C,EAAE;AAarD,MAAI,EATF,KAAK,eACL,KAAK,SACL,KAAK,OACL,KAAK,YACL,KAAK,UACL,KAAK,QACL,KAAK,MACL,KAAK,SAGL,QAAO;GAAE;GAAM;GAAM;AAIvB,MAAI,KAAK,YACP,MAAK,KAAK;GAAE,MAAM;GAAe,SAAS,KAAK;GAAa,CAAC;AAI/D,MAAI,KAAK,IACP,MAAK,KAAK;GAAE,KAAK;GAAa,MAAM,KAAK;GAAK,CAAC;AAIjD,OAAK,gBAAgB,MAAM,KAAK;AAGhC,OAAK,cAAc,MAAM,KAAK;AAE9B,SAAO;GAAE;GAAM;GAAM;;CAGvB,gBAA0B,MAAY,MAAwB;EAC5D,MAAM,UAAU,KAAK,IAAI,SAAS,KAAK;EACvC,MAAM,gBAAgB,KAAK,IAAI,eAAe,KAAK;EACnD,MAAM,UAAU,KAAK,IAAI,SAAS,KAAK;AAEvC,MAAI,KAAK,QAAQ,QACf,MAAK,KAAK;GAAE,UAAU;GAAW,SAAS,KAAK,QAAQ;GAAW,CAAC;AAErE,MAAI,KAAK,IACP,MAAK,KAAK;GAAE,UAAU;GAAU,SAAS,KAAK;GAAK,CAAC;AAEtD,MAAI,QACF,MAAK,KAAK;GAAE,UAAU;GAAY,SAAS;GAAS,CAAC;AAEvD,MAAI,cACF,MAAK,KAAK;GAAE,UAAU;GAAkB,SAAS;GAAe,CAAC;AAEnE,MAAI,SAAS;AACX,QAAK,KAAK;IAAE,UAAU;IAAY,SAAS;IAAS,CAAC;AACrD,OAAI,KAAK,WACP,MAAK,KAAK;IACR,UAAU;IACV,SAAS,OAAO,KAAK,WAAW;IACjC,CAAC;AAEJ,OAAI,KAAK,YACP,MAAK,KAAK;IACR,UAAU;IACV,SAAS,OAAO,KAAK,YAAY;IAClC,CAAC;AAEJ,OAAI,KAAK,SACP,MAAK,KAAK;IAAE,UAAU;IAAgB,SAAS,KAAK;IAAU,CAAC;;AAGnE,MAAI,KAAK,SACP,MAAK,KAAK;GAAE,UAAU;GAAgB,SAAS,KAAK;GAAU,CAAC;AAEjE,MAAI,KAAK,OACP,MAAK,KAAK;GAAE,UAAU;GAAa,SAAS,KAAK;GAAQ,CAAC;;CAI9D,cAAwB,MAAY,MAAwB;EAC1D,MAAM,eAAe,KAAK,SAAS,SAAS,KAAK;EACjD,MAAM,qBAAqB,KAAK,SAAS,eAAe,KAAK;EAC7D,MAAM,eAAe,KAAK,SAAS,SAAS,KAAK;AAEjD,MAAI,KAAK,SAAS,QAAQ,gBAAgB,aACxC,MAAK,KAAK;GACR,MAAM;GACN,SACE,KAAK,SAAS,SACb,eAAe,wBAAwB;GAC3C,CAAC;AAEJ,MAAI,KAAK,IACP,MAAK,KAAK;GAAE,MAAM;GAAe,SAAS,KAAK;GAAK,CAAC;AAEvD,MAAI,aACF,MAAK,KAAK;GAAE,MAAM;GAAiB,SAAS;GAAc,CAAC;AAE7D,MAAI,mBACF,MAAK,KAAK;GAAE,MAAM;GAAuB,SAAS;GAAoB,CAAC;AAEzE,MAAI,cAAc;AAChB,QAAK,KAAK;IAAE,MAAM;IAAiB,SAAS;IAAc,CAAC;AAC3D,OAAI,KAAK,SACP,MAAK,KAAK;IAAE,MAAM;IAAqB,SAAS,KAAK;IAAU,CAAC;;AAGpE,MAAI,KAAK,SAAS,KAChB,MAAK,KAAK;GAAE,MAAM;GAAgB,SAAS,KAAK,QAAQ;GAAM,CAAC;AAEjE,MAAI,KAAK,SAAS,QAChB,MAAK,KAAK;GAAE,MAAM;GAAmB,SAAS,KAAK,QAAQ;GAAS,CAAC;;;;;;;;;;;;;;AC5H3E,IAAa,eAAb,MAA0B;CACxB,MAAyB,SAAS;CAClC,cAAiC,QAAQ,YAAY;CAErD,SAA6C,EAAE;;;;CAK/C,4BAAsC;;;;;;;;;;CAWtC,oBAAiC;EAC/B,MAAM,OAAa,EACjB,gBAAgB,EAAE,MAAM,MAAM,EAC/B;AAED,OAAK,MAAM,KAAK,KAAK,UAAU,EAAE,EAAE;GACjC,MAAM,WAAW,OAAO,MAAM,aAAa,GAAG,GAAG;AACjD,OAAI,SAAS,eACX,MAAK,iBAAiB;IACpB,GAAG,KAAK;IACR,GAAG,SAAS;IACb;;AAIL,SAAO;;;;;;;;;;CAWT,gBAA6B;EAC3B,IAAI,OAAa,EAAE;AAEnB,OAAK,MAAM,KAAK,KAAK,UAAU,EAAE,EAAE;GACjC,MAAM,WAAW,OAAO,MAAM,aAAa,GAAG,GAAG;GACjD,MAAM,EAAE,MAAM,SAAS,KAAK,YAAY,OAAO,SAAS;AACxD,UAAO;IACL,GAAG;IACH,GAAG;IACH,MAAM;KAAC,GAAI,KAAK,QAAQ,EAAE;KAAG,GAAG;KAAM,GAAI,SAAS,QAAQ,EAAE;KAAE;IAC/D,MAAM;KAAC,GAAI,KAAK,QAAQ,EAAE;KAAG,GAAG;KAAM,GAAI,SAAS,QAAQ,EAAE;KAAE;IAC/D,QAAQ,CAAC,GAAI,KAAK,UAAU,EAAE,EAAG,GAAI,SAAS,UAAU,EAAE,CAAE;IAC7D;;AAGH,SAAO;;CAGT,SAAgB,OAAkB;AAChC,QAAM,OAAO,EACX,GAAG,MAAM,MACV;AAED,OAAK,MAAM,KAAK,KAAK,UAAU,EAAE,EAAE;GACjC,MAAM,OAAO,OAAO,MAAM,aAAa,GAAG,GAAG;AAC7C,QAAK,UAAU,OAAO,KAAK;;AAG7B,OAAK,MAAM,SAAS,MAAM,OACxB,KAAI,MAAM,OAAO,QAAQ,CAAC,MAAM,MAC9B,MAAK,eAAe,MAAM,OAAO,OAAO,MAAM,SAAS,EAAE,CAAC;AAK9D,QAAM,KAAK,UAAU;AACrB,QAAM,KAAK,iBAAiB;GAC1B,MAAM;GACN,GAAG,MAAM,KAAK;GACf;;CAGH,UAAoB,OAAkB,MAAkB;EAEtD,MAAM,EAAE,MAAM,SAAS,KAAK,YAAY,OAAO,KAAK;AACpD,QAAM,OAAO;GACX,GAAG,MAAM;GACT,GAAG;GACH,MAAM;IAAC,GAAI,MAAM,KAAK,QAAQ,EAAE;IAAG,GAAG;IAAM,GAAI,KAAK,QAAQ,EAAE;IAAE;GACjE,MAAM;IAAC,GAAI,MAAM,KAAK,QAAQ,EAAE;IAAG,GAAG;IAAM,GAAI,KAAK,QAAQ,EAAE;IAAE;GACjE,QAAQ,CAAC,GAAI,MAAM,KAAK,UAAU,EAAE,EAAG,GAAI,KAAK,UAAU,EAAE,CAAE;GAC/D;;CAGH,eACE,MACA,OACA,OACM;AACN,MAAI,CAAC,KAAK,KACR;AAGF,QAAM,SAAS,EAAE;EAEjB,MAAM,OACJ,OAAO,KAAK,SAAS,aACjB,KAAK,KAAK,OAAO,MAAM,KAAK,GAC5B,KAAK;EAGX,MAAM,EAAE,MAAM,SAAS,KAAK,YAAY,OAAO,KAAK;AACpD,QAAM,KAAK,OAAO,CAAC,GAAI,MAAM,KAAK,QAAQ,EAAE,EAAG,GAAG,KAAK;AACvD,QAAM,KAAK,OAAO,CAAC,GAAI,MAAM,KAAK,QAAQ,EAAE,EAAG,GAAG,KAAK;AAEvD,MAAI,KAAK,OAAO;AACd,SAAM,SAAS,EAAE;AAEjB,OAAI,MAAM,KAAK,eACb,OAAM,KAAK,QAAQ,GAAG,KAAK,QAAQ,MAAM,KAAK,iBAAiB,MAAM,KAAK;OAE1E,OAAM,KAAK,QAAQ,KAAK;AAG1B,SAAM,KAAK,iBAAiB,KAAK;;AAKnC,MAAI,KAAK,kBAAkB,CAAC,KAAK,2BAA2B;AAC1D,QAAK,4BAA4B;AACjC,QAAK,IAAI,KACP,mKAED;;AAGH,MAAI,KAAK,eACP,OAAM,KAAK,iBAAiB;GAC1B,GAAG,MAAM,KAAK;GACd,GAAG,KAAK;GACT;AAGH,MAAI,KAAK,KACP,OAAM,KAAK,OAAO,CAAC,GAAI,MAAM,KAAK,QAAQ,EAAE,EAAG,GAAI,KAAK,QAAQ,EAAE,CAAE;AAGtE,MAAI,KAAK,KACP,OAAM,KAAK,OAAO,CAAC,GAAI,MAAM,KAAK,QAAQ,EAAE,EAAG,GAAI,KAAK,QAAQ,EAAE,CAAE;AAGtE,MAAI,KAAK,OACP,OAAM,KAAK,SAAS,CAClB,GAAI,MAAM,KAAK,UAAU,EAAE,EAC3B,GAAI,KAAK,UAAU,EAAE,CACtB;;;;;;;;ACzKP,MAAa,SAAS,YAAkC;AACtD,QAAO,gBAAgB,eAAe,QAAQ;;AAShD,IAAa,gBAAb,cAAmC,UAAgC;CACjE,WAA8B,QAAQ,aAAa;CACnD,SAAmB;AACjB,OAAK,SAAS,SAAS,CAAC,GAAI,KAAK,SAAS,UAAU,EAAE,EAAG,KAAK,QAAQ;;;AAI1E,MAAM,QAAQ;;;;;;;;;;ACbd,IAAa,sBAAb,MAAiC;CAC/B,SAA4B,QAAQ,OAAO;CAC3C,eAAkC,QAAQ,aAAa;CAEvD,IAAc,WAAqB;AACjC,SAAO,OAAO;;;;;;;;CAShB,kBAAyB,OAAiD;AAExE,MAAI,CAAC,KAAK,OAAO,WAAW,CAC1B;AAGF,OAAK,aAAa,SAAS,MAAa;AACxC,MAAI,MAAM,KACR,MAAK,WAAW,KAAK,UAAU,MAAM,KAAK;;;;;;;;CAU9C,oBAAiC;EAC/B,MAAM,OAAO,KAAK,aAAa,eAAe;AAC9C,OAAK,WAAW,KAAK,UAAU,KAAK;;CAGtC,QAAe,UAA0B;AACvC,SAAO;GACL,IAAI,QAAQ;AACV,WAAO,SAAS;;GAElB,IAAI,iBAAiB;IACnB,MAAM,QAAgC,EAAE;AACxC,SAAK,MAAM,QAAQ,SAAS,gBAAgB,WAC1C,OAAM,KAAK,QAAQ,KAAK;AAE1B,WAAO;;GAET,IAAI,iBAAiB;IACnB,MAAM,QAAgC,EAAE;AACxC,SAAK,MAAM,QAAQ,SAAS,KAAK,WAC/B,OAAM,KAAK,QAAQ,KAAK;AAE1B,WAAO;;GAET,IAAI,OAAO;IACT,MAAM,QAAoB,EAAE;AAE5B,SAAK,MAAM,QAAQ,SAAS,KAAK,iBAAiB,aAAa,EAAE;KAC/D,MAAM,OAAO,KAAK,aAAa,OAAO;KACtC,MAAM,UAAU,KAAK,aAAa,UAAU;AAC5C,SAAI,QAAQ,QACV,OAAM,KAAK;MAAE;MAAM;MAAS,CAAC;;AAIjC,SAAK,MAAM,QAAQ,SAAS,KAAK,iBAAiB,iBAAiB,EAAE;KACnE,MAAM,WAAW,KAAK,aAAa,WAAW;KAC9C,MAAM,UAAU,KAAK,aAAa,UAAU;AAC5C,SAAI,YAAY,QACd,OAAM,KAAK;MAAE;MAAU;MAAS,CAAC;;AAGrC,WAAO;;GAEV;;CAGH,WAAkB,UAAoB,MAAkB;AACtD,MAAI,KAAK,MACP,UAAS,QAAQ,KAAK;AAGxB,MAAI,KAAK,eACP,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,eAAe,CAC5D,KAAI,MACF,UAAS,KAAK,aAAa,KAAK,MAAM;MAEtC,UAAS,KAAK,gBAAgB,IAAI;AAKxC,MAAI,KAAK,eACP,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,eAAe,CAC5D,KAAI,MACF,UAAS,gBAAgB,aAAa,KAAK,MAAM;MAEjD,UAAS,gBAAgB,gBAAgB,IAAI;AAKnD,MAAI,KAAK,KACP,MAAK,MAAM,MAAM,KAAK,KACpB,MAAK,cAAc,UAAU,GAAG;AAIpC,MAAI,KAAK,KACP,MAAK,MAAM,MAAM,KAAK,MAAM;GAC1B,MAAM,EAAE,KAAK,SAAS;GACtB,IAAI,OAAO,SAAS,cAAc,aAAa,IAAI,WAAW,KAAK,IAAI;AACvE,OAAI,CAAC,MAAM;AACT,WAAO,SAAS,cAAc,OAAO;AACrC,SAAK,aAAa,OAAO,IAAI;AAC7B,SAAK,aAAa,QAAQ,KAAK;AAC/B,QAAI,GAAG,KACL,MAAK,aAAa,QAAQ,GAAG,KAAK;AAEpC,QAAI,GAAG,GACL,MAAK,aAAa,MAAM,GAAG,GAAG;AAEhC,QAAI,GAAG,eAAe,KACpB,MAAK,aAAa,eAAe,GAAG;AAEtC,aAAS,KAAK,YAAY,KAAK;;;AAKrC,MAAI,KAAK,OACP,MAAK,MAAM,MAAM,KAAK,OACpB,MAAK,gBAAgB,UAAU,GAAG;;CAKxC,gBACE,UACA,QAGM;EACN,MAAM,KAAK,SAAS,cAAc,SAAS;AAG3C,MAAI,OAAO,WAAW,UAAU;AAC9B,MAAG,cAAc;AACjB,YAAS,KAAK,YAAY,GAAG;AAC7B;;EAGF,MAAM,EAAE,SAAS,GAAG,UAAU;AAG9B,MAAI,MAAM;OACS,SAAS,cAAc,eAAe,MAAM,IAAI,IAAI,CAEnE;;AAIJ,OAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,CAC9C,KAAI,UAAU,KACZ,IAAG,aAAa,KAAK,GAAG;WACf,UAAU,KAAA,KAAa,UAAU,MAC1C,IAAG,aAAa,KAAK,OAAO,MAAM,CAAC;AAIvC,MAAI,QACF,IAAG,cAAc;AAGnB,WAAS,KAAK,YAAY,GAAG;;CAG/B,cAAwB,UAAoB,MAAsB;EAChE,MAAM,EAAE,YAAY;AAGpB,MAAI,KAAK,UAAU;GACjB,MAAM,WAAW,SAAS,cACxB,kBAAkB,KAAK,SAAS,IACjC;AACD,OAAI,SACF,UAAS,aAAa,WAAW,QAAQ;QACpC;IACL,MAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,YAAQ,aAAa,YAAY,KAAK,SAAS;AAC/C,YAAQ,aAAa,WAAW,QAAQ;AACxC,aAAS,KAAK,YAAY,QAAQ;;AAEpC;;AAIF,MAAI,KAAK,MAAM;GACb,MAAM,WAAW,SAAS,cAAc,cAAc,KAAK,KAAK,IAAI;AACpE,OAAI,SACF,UAAS,aAAa,WAAW,QAAQ;QACpC;IACL,MAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,YAAQ,aAAa,QAAQ,KAAK,KAAK;AACvC,YAAQ,aAAa,WAAW,QAAQ;AACxC,aAAS,KAAK,YAAY,QAAQ;;;;;;;;;;;;;AChN1C,IAAa,qBAAb,MAAgC;CAC9B,eAAkC,QAAQ,aAAa;;;;;;;CAQvD,oBAAiC;AAC/B,SAAO,KAAK,aAAa,mBAAmB;;;;;;CAO9C,SAAgB,OAAuD;AACrE,OAAK,aAAa,SAAS,MAAa;;;;;;;;;;;;;;;;;;;;;;ACL5C,MAAa,WAAW,YAA4C;CAClE,MAAM,SAAS,UAAU,OAAO;CAEhC,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,OAAO,WAAW,CACrB,QAAO,EAAE;AAGX,SAAO,OAAO,OAAO,oBAAoB,CAAC,QAAQ,OAAO,SAAS;IACjE,EAAE,CAAC;CAEN,MAAM,UAAU,aAAa,SAA8C;AACzE,MAAI,CAAC,OAAO,WAAW,CACrB;EAGF,MAAM,eAAe,OAAO,OAAO,oBAAoB;EACvD,MAAM,WACJ,OAAO,SAAS,aACZ,KAAK,aAAa,QAAQ,OAAO,SAAS,CAAC,GAC3C,QAAQ,EAAE;AAChB,eAAa,WAAW,OAAO,UAAU,SAAS;IACjD,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,QACF,SAAQ,QAAQ;IAEjB,EAAE,CAAC;AAEN,QAAO,CAAC,SAAS,QAAQ;;;;;;;;;;;;;;ACxB3B,MAAa,kBAAkB,QAAQ;CACrC,MAAM;CACN,YAAY,CAAC,MAAM;CACnB,UAAU;EACR;EACA;EACA;EACA;EACA;EACD;CACF,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/react/head/helpers/SeoExpander.ts","../../../src/react/head/providers/HeadProvider.ts","../../../src/react/head/primitives/$head.ts","../../../src/react/head/providers/BrowserHeadProvider.ts","../../../src/react/head/providers/ServerHeadProvider.ts","../../../src/react/head/hooks/useHead.ts","../../../src/react/head/index.ts"],"sourcesContent":["import type { Head, HeadMeta } from \"../interfaces/Head.ts\";\n\n/**\n * Expands Head configuration into SEO meta tags.\n *\n * Generates:\n * - `<meta name=\"description\">` from head.description\n * - `<meta property=\"og:*\">` OpenGraph tags\n * - `<meta name=\"twitter:*\">` Twitter Card tags\n *\n * @example\n * ```ts\n * const helper = new SeoExpander();\n * const { meta, link } = helper.expand({\n *   title: \"My App\",\n *   description: \"Build amazing apps\",\n *   image: \"https://example.com/og.png\",\n *   url: \"https://example.com/\",\n * });\n * ```\n */\nexport class SeoExpander {\n  public expand(head: Head): {\n    meta: HeadMeta[];\n    link: Array<{ rel: string; href: string }>;\n  } {\n    const meta: HeadMeta[] = [];\n    const link: Array<{ rel: string; href: string }> = [];\n\n    // Only expand SEO if there's meaningful content beyond just title\n    const hasSeoContent =\n      head.description ||\n      head.image ||\n      head.url ||\n      head.siteName ||\n      head.locale ||\n      head.type ||\n      head.og ||\n      head.twitter;\n\n    if (!hasSeoContent) {\n      return { meta, link };\n    }\n\n    // Base description\n    if (head.description) {\n      meta.push({ name: \"description\", content: head.description });\n    }\n\n    // Canonical URL\n    if (head.url) {\n      link.push({ rel: \"canonical\", href: head.url });\n    }\n\n    // OpenGraph tags\n    this.expandOpenGraph(head, meta);\n\n    // Twitter Card tags\n    this.expandTwitter(head, meta);\n\n    return { meta, link };\n  }\n\n  protected expandOpenGraph(head: Head, meta: HeadMeta[]): void {\n    const ogTitle = head.og?.title ?? head.title;\n    const ogDescription = head.og?.description ?? head.description;\n    const ogImage = head.og?.image ?? head.image;\n\n    if (head.type || ogTitle) {\n      meta.push({ property: \"og:type\", content: head.type ?? \"website\" });\n    }\n    if (head.url) {\n      meta.push({ property: \"og:url\", content: head.url });\n    }\n    if (ogTitle) {\n      meta.push({ property: \"og:title\", content: ogTitle });\n    }\n    if (ogDescription) {\n      meta.push({ property: \"og:description\", content: ogDescription });\n    }\n    if (ogImage) {\n      meta.push({ property: \"og:image\", content: ogImage });\n      if (head.imageWidth) {\n        meta.push({\n          property: \"og:image:width\",\n          content: String(head.imageWidth),\n        });\n      }\n      if (head.imageHeight) {\n        meta.push({\n          property: \"og:image:height\",\n          content: String(head.imageHeight),\n        });\n      }\n      if (head.imageAlt) {\n        meta.push({ property: \"og:image:alt\", content: head.imageAlt });\n      }\n    }\n    if (head.siteName) {\n      meta.push({ property: \"og:site_name\", content: head.siteName });\n    }\n    if (head.locale) {\n      meta.push({ property: \"og:locale\", content: head.locale });\n    }\n  }\n\n  protected expandTwitter(head: Head, meta: HeadMeta[]): void {\n    const twitterTitle = head.twitter?.title ?? head.title;\n    const twitterDescription = head.twitter?.description ?? head.description;\n    const twitterImage = head.twitter?.image ?? head.image;\n\n    if (head.twitter?.card || twitterTitle || twitterImage) {\n      meta.push({\n        name: \"twitter:card\",\n        content:\n          head.twitter?.card ??\n          (twitterImage ? \"summary_large_image\" : \"summary\"),\n      });\n    }\n    if (head.url) {\n      meta.push({ name: \"twitter:url\", content: head.url });\n    }\n    if (twitterTitle) {\n      meta.push({ name: \"twitter:title\", content: twitterTitle });\n    }\n    if (twitterDescription) {\n      meta.push({ name: \"twitter:description\", content: twitterDescription });\n    }\n    if (twitterImage) {\n      meta.push({ name: \"twitter:image\", content: twitterImage });\n      if (head.imageAlt) {\n        meta.push({ name: \"twitter:image:alt\", content: head.imageAlt });\n      }\n    }\n    if (head.twitter?.site) {\n      meta.push({ name: \"twitter:site\", content: head.twitter.site });\n    }\n    if (head.twitter?.creator) {\n      meta.push({ name: \"twitter:creator\", content: head.twitter.creator });\n    }\n  }\n}\n","import { $inject } from \"alepha\";\nimport { $logger } from \"alepha/logger\";\nimport { SeoExpander } from \"../helpers/SeoExpander.ts\";\nimport type { Head } from \"../interfaces/Head.ts\";\n\n/**\n * Provides methods to fill and merge head information into the application state.\n *\n * Used both on server and client side to manage document head.\n *\n * @see {@link SeoExpander}\n * @see {@link ServerHeadProvider}\n * @see {@link BrowserHeadProvider}\n */\nexport class HeadProvider {\n  protected readonly log = $logger();\n  protected readonly seoExpander = $inject(SeoExpander);\n\n  public global?: Array<Head | (() => Head)> = [];\n\n  /**\n   * Track if we've warned about page-level htmlAttributes to avoid spam.\n   */\n  protected warnedAboutHtmlAttributes = false;\n\n  /**\n   * Resolve global head configuration (from $head primitives only).\n   *\n   * This is used to get htmlAttributes early, before page loaders run.\n   * Only htmlAttributes from global $head are allowed; page-level htmlAttributes\n   * are ignored for early streaming optimization.\n   *\n   * @returns Merged global head with htmlAttributes\n   */\n  public resolveGlobalHead(): Head {\n    const head: Head = {\n      htmlAttributes: { lang: \"en\" },\n    };\n\n    for (const h of this.global ?? []) {\n      const resolved = typeof h === \"function\" ? h() : h;\n      if (resolved.htmlAttributes) {\n        head.htmlAttributes = {\n          ...head.htmlAttributes,\n          ...resolved.htmlAttributes,\n        };\n      }\n    }\n\n    return head;\n  }\n\n  /**\n   * Fully resolve all global $head entries (functions re-evaluated, objects kept as-is).\n   *\n   * Unlike resolveGlobalHead() which only extracts htmlAttributes for streaming,\n   * this resolves all head properties (meta, link, script, htmlAttributes, etc.).\n   *\n   * Used by BrowserHeadProvider.refreshGlobalHead() to re-apply global head to the DOM.\n   */\n  public resolveGlobal(): Head {\n    let head: Head = {};\n\n    for (const h of this.global ?? []) {\n      const resolved = typeof h === \"function\" ? h() : h;\n      const { meta, link } = this.seoExpander.expand(resolved);\n      head = {\n        ...head,\n        ...resolved,\n        meta: [...(head.meta ?? []), ...meta, ...(resolved.meta ?? [])],\n        link: [...(head.link ?? []), ...link, ...(resolved.link ?? [])],\n        script: [...(head.script ?? []), ...(resolved.script ?? [])],\n      };\n    }\n\n    return head;\n  }\n\n  public fillHead(state: HeadState) {\n    state.head = {\n      ...state.head,\n    };\n\n    for (const h of this.global ?? []) {\n      const head = typeof h === \"function\" ? h() : h;\n      this.mergeHead(state, head);\n    }\n\n    for (const layer of state.layers) {\n      if (layer.route?.head && !layer.error) {\n        this.fillHeadByPage(layer.route, state, layer.props ?? {});\n      }\n    }\n\n    // Defaults if none were set by global $head or page head\n    state.head.title ??= \"App\";\n    state.head.htmlAttributes = {\n      lang: \"en\",\n      ...state.head.htmlAttributes,\n    };\n  }\n\n  protected mergeHead(state: HeadState, head: Head): void {\n    // Expand SEO fields into meta tags\n    const { meta, link } = this.seoExpander.expand(head);\n    state.head = {\n      ...state.head,\n      ...head,\n      meta: [...(state.head.meta ?? []), ...meta, ...(head.meta ?? [])],\n      link: [...(state.head.link ?? []), ...link, ...(head.link ?? [])],\n      script: [...(state.head.script ?? []), ...(head.script ?? [])],\n    };\n  }\n\n  protected fillHeadByPage(\n    page: HeadRoute,\n    state: HeadState,\n    props: Record<string, any>,\n  ): void {\n    if (!page.head) {\n      return;\n    }\n\n    state.head ??= {};\n\n    const head =\n      typeof page.head === \"function\"\n        ? page.head(props, state.head)\n        : page.head;\n\n    // Expand SEO fields into meta tags\n    const { meta, link } = this.seoExpander.expand(head);\n    state.head.meta = [...(state.head.meta ?? []), ...meta];\n    state.head.link = [...(state.head.link ?? []), ...link];\n\n    if (head.title) {\n      state.head ??= {};\n\n      if (state.head.titleSeparator) {\n        state.head.title = `${head.title}${state.head.titleSeparator}${state.head.title}`;\n      } else {\n        state.head.title = head.title;\n      }\n\n      state.head.titleSeparator = head.titleSeparator;\n    }\n\n    // htmlAttributes from pages are ignored for early streaming optimization.\n    // Only global $head can set htmlAttributes.\n    if (head.htmlAttributes && !this.warnedAboutHtmlAttributes) {\n      this.warnedAboutHtmlAttributes = true;\n      this.log.warn(\n        \"Page-level htmlAttributes are ignored. Use global $head() for htmlAttributes instead, \" +\n          \"as they are sent before page loaders run for early streaming optimization.\",\n      );\n    }\n\n    if (head.bodyAttributes) {\n      state.head.bodyAttributes = {\n        ...state.head.bodyAttributes,\n        ...head.bodyAttributes,\n      };\n    }\n\n    if (head.meta) {\n      state.head.meta = [...(state.head.meta ?? []), ...(head.meta ?? [])];\n    }\n\n    if (head.link) {\n      state.head.link = [...(state.head.link ?? []), ...(head.link ?? [])];\n    }\n\n    if (head.script) {\n      state.head.script = [\n        ...(state.head.script ?? []),\n        ...(head.script ?? []),\n      ];\n    }\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n/**\n * Minimal route interface for head processing.\n * Avoids circular dependency with alepha/react/router.\n */\ninterface HeadRoute {\n  head?: Head | ((props: Record<string, any>, previous?: Head) => Head);\n}\n\n/**\n * Minimal state interface for head processing.\n * Avoids circular dependency with alepha/react/router.\n */\ninterface HeadState {\n  head: Head;\n  layers: Array<{\n    route?: HeadRoute;\n    props?: Record<string, any>;\n    error?: Error;\n  }>;\n}\n","import { $inject, createPrimitive, KIND, Primitive } from \"alepha\";\nimport type { Head } from \"../interfaces/Head.ts\";\nimport { HeadProvider } from \"../providers/HeadProvider.ts\";\n\n/**\n * Set global `<head>` options for the application.\n */\nexport const $head = (options: HeadPrimitiveOptions) => {\n  return createPrimitive(HeadPrimitive, options);\n};\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport type HeadPrimitiveOptions = Head | (() => Head);\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport class HeadPrimitive extends Primitive<HeadPrimitiveOptions> {\n  protected readonly provider = $inject(HeadProvider);\n  protected onInit() {\n    this.provider.global = [...(this.provider.global ?? []), this.options];\n  }\n}\n\n$head[KIND] = HeadPrimitive;\n","import { $inject, Alepha } from \"alepha\";\nimport type { Head, HeadMeta } from \"../interfaces/Head.ts\";\nimport { HeadProvider } from \"./HeadProvider.ts\";\n\n/**\n * Browser-side head provider that manages document head elements.\n *\n * Used by ReactBrowserProvider and ReactBrowserRouterProvider to update\n * document title, meta tags, and other head elements during client-side\n * navigation.\n */\nexport class BrowserHeadProvider {\n  protected readonly alepha = $inject(Alepha);\n  protected readonly headProvider = $inject(HeadProvider);\n\n  protected get document(): Document {\n    return window.document;\n  }\n\n  /**\n   * Fill head state from route configurations and render to document.\n   * Combines fillHead from HeadProvider with renderHead to the DOM.\n   *\n   * Only runs in browser environment - no-op on server.\n   */\n  public fillAndRenderHead(state: { head: Head; layers: Array<any> }): void {\n    // Skip on server-side\n    if (!this.alepha.isBrowser()) {\n      return;\n    }\n\n    this.headProvider.fillHead(state as any);\n    if (state.head) {\n      this.renderHead(this.document, state.head);\n    }\n  }\n\n  /**\n   * Re-evaluate all global $head entries and apply the result to the DOM.\n   *\n   * Call this when something that affects global $head output changes at runtime\n   * (e.g., theme switch). Page-level head (title, meta from routes) is not touched.\n   */\n  public refreshGlobalHead(): void {\n    const head = this.headProvider.resolveGlobal();\n    this.renderHead(this.document, head);\n  }\n\n  public getHead(document: Document): Head {\n    return {\n      get title() {\n        return document.title;\n      },\n      get htmlAttributes() {\n        const attrs: Record<string, string> = {};\n        for (const attr of document.documentElement.attributes) {\n          attrs[attr.name] = attr.value;\n        }\n        return attrs;\n      },\n      get bodyAttributes() {\n        const attrs: Record<string, string> = {};\n        for (const attr of document.body.attributes) {\n          attrs[attr.name] = attr.value;\n        }\n        return attrs;\n      },\n      get meta() {\n        const metas: HeadMeta[] = [];\n        // Get meta tags with name attribute\n        for (const meta of document.head.querySelectorAll(\"meta[name]\")) {\n          const name = meta.getAttribute(\"name\");\n          const content = meta.getAttribute(\"content\");\n          if (name && content) {\n            metas.push({ name, content });\n          }\n        }\n        // Get meta tags with property attribute (OpenGraph)\n        for (const meta of document.head.querySelectorAll(\"meta[property]\")) {\n          const property = meta.getAttribute(\"property\");\n          const content = meta.getAttribute(\"content\");\n          if (property && content) {\n            metas.push({ property, content });\n          }\n        }\n        return metas;\n      },\n    };\n  }\n\n  public renderHead(document: Document, head: Head): void {\n    if (head.title) {\n      document.title = head.title;\n    }\n\n    if (head.bodyAttributes) {\n      for (const [key, value] of Object.entries(head.bodyAttributes)) {\n        if (value) {\n          document.body.setAttribute(key, value);\n        } else {\n          document.body.removeAttribute(key);\n        }\n      }\n    }\n\n    if (head.htmlAttributes) {\n      for (const [key, value] of Object.entries(head.htmlAttributes)) {\n        if (value) {\n          document.documentElement.setAttribute(key, value);\n        } else {\n          document.documentElement.removeAttribute(key);\n        }\n      }\n    }\n\n    if (head.meta) {\n      for (const it of head.meta) {\n        this.renderMetaTag(document, it);\n      }\n    }\n\n    if (head.link) {\n      for (const it of head.link) {\n        const { rel, href } = it;\n        let link = document.querySelector(`link[rel=\"${rel}\"][href=\"${href}\"]`);\n        if (!link) {\n          link = document.createElement(\"link\");\n          link.setAttribute(\"rel\", rel);\n          link.setAttribute(\"href\", href);\n          if (it.type) {\n            link.setAttribute(\"type\", it.type);\n          }\n          if (it.as) {\n            link.setAttribute(\"as\", it.as);\n          }\n          if (it.crossorigin != null) {\n            link.setAttribute(\"crossorigin\", \"\");\n          }\n          document.head.appendChild(link);\n        }\n      }\n    }\n\n    if (head.script) {\n      for (const it of head.script) {\n        this.renderScriptTag(document, it);\n      }\n    }\n  }\n\n  protected renderScriptTag(\n    document: Document,\n    script:\n      | string\n      | (Record<string, string | boolean | undefined> & { content?: string }),\n  ): void {\n    // Plain string → inline script. Dedupe by exact content match against\n    // any existing inline script (handles SSR-emitted globals that would\n    // otherwise be re-appended on hydration).\n    if (typeof script === \"string\") {\n      if (this.findInlineScriptByContent(document, script)) return;\n      const el = document.createElement(\"script\");\n      el.textContent = script;\n      document.head.appendChild(el);\n      return;\n    }\n\n    const { content, ...attrs } = script;\n\n    // src-based scripts: dedupe by src attribute (existing behaviour).\n    if (attrs.src) {\n      if (document.querySelector(`script[src=\"${attrs.src}\"]`)) return;\n    } else if (typeof attrs.id === \"string\") {\n      // id-based dedupe — single source of truth per id.\n      if (document.querySelector(`script#${CSS.escape(attrs.id)}`)) return;\n    } else if (content) {\n      // Inline scripts with `content` and no src/id: fall back to content match.\n      if (this.findInlineScriptByContent(document, content)) return;\n    }\n\n    const el = document.createElement(\"script\");\n    for (const [key, value] of Object.entries(attrs)) {\n      if (value === true) {\n        el.setAttribute(key, \"\");\n      } else if (value !== undefined && value !== false) {\n        el.setAttribute(key, String(value));\n      }\n    }\n    if (content) {\n      el.textContent = content;\n    }\n    document.head.appendChild(el);\n  }\n\n  /**\n   * Find an existing inline `<script>` tag (no `src`) with matching textContent.\n   * Used to make `renderScriptTag` idempotent across hydration + navigation,\n   * so SSR-emitted global scripts aren't re-appended client-side.\n   */\n  protected findInlineScriptByContent(\n    document: Document,\n    content: string,\n  ): Element | null {\n    for (const existing of document.head.querySelectorAll(\n      \"script:not([src])\",\n    )) {\n      if (existing.textContent === content) return existing;\n    }\n    return null;\n  }\n\n  protected renderMetaTag(document: Document, meta: HeadMeta): void {\n    const { content } = meta;\n\n    // Handle OpenGraph tags (property attribute)\n    if (meta.property) {\n      const existing = document.querySelector(\n        `meta[property=\"${meta.property}\"]`,\n      );\n      if (existing) {\n        existing.setAttribute(\"content\", content);\n      } else {\n        const newMeta = document.createElement(\"meta\");\n        newMeta.setAttribute(\"property\", meta.property);\n        newMeta.setAttribute(\"content\", content);\n        document.head.appendChild(newMeta);\n      }\n      return;\n    }\n\n    // Handle standard meta tags (name attribute)\n    if (meta.name) {\n      const existing = document.querySelector(`meta[name=\"${meta.name}\"]`);\n      if (existing) {\n        existing.setAttribute(\"content\", content);\n      } else {\n        const newMeta = document.createElement(\"meta\");\n        newMeta.setAttribute(\"name\", meta.name);\n        newMeta.setAttribute(\"content\", content);\n        document.head.appendChild(newMeta);\n      }\n    }\n  }\n}\n","import { $inject } from \"alepha\";\nimport type { Head, SimpleHead } from \"../interfaces/Head.ts\";\nimport { HeadProvider } from \"./HeadProvider.ts\";\n\n/**\n * Server-side head provider that fills head content from route configurations.\n *\n * Used by ReactServerProvider to collect title, meta tags, and other head\n * elements which are then rendered by ReactServerTemplateProvider.\n */\nexport class ServerHeadProvider {\n  protected readonly headProvider = $inject(HeadProvider);\n\n  /**\n   * Resolve global head configuration (htmlAttributes only).\n   *\n   * Used for early streaming optimization - htmlAttributes can be sent\n   * before page loaders run since they come from global $head only.\n   */\n  public resolveGlobalHead(): Head {\n    return this.headProvider.resolveGlobalHead();\n  }\n\n  /**\n   * Fill head state from route configurations.\n   * Delegates to HeadProvider to merge head data from all route layers.\n   */\n  public fillHead(state: { head: SimpleHead; layers: Array<any> }): void {\n    this.headProvider.fillHead(state as any);\n  }\n}\n","import { Alepha } from \"alepha\";\nimport { useInject } from \"alepha/react\";\nimport { useCallback, useEffect, useMemo } from \"react\";\nimport type { Head } from \"../interfaces/Head.ts\";\nimport { BrowserHeadProvider } from \"../providers/BrowserHeadProvider.ts\";\n\n/**\n * ```tsx\n * const App = () => {\n *   const [head, setHead] = useHead({\n *     // will set the document title on the first render\n *     title: \"My App\",\n *   });\n *\n *   return (\n *     // This will update the document title when the button is clicked\n *     <button onClick={() => setHead({ title: \"Change Title\" })}>\n *       Change Title {head.title}\n *     </button>\n *   );\n * }\n * ```\n */\nexport const useHead = (options?: UseHeadOptions): UseHeadReturn => {\n  const alepha = useInject(Alepha);\n\n  const current = useMemo(() => {\n    if (!alepha.isBrowser()) {\n      return {};\n    }\n\n    return alepha.inject(BrowserHeadProvider).getHead(window.document);\n  }, []);\n\n  const setHead = useCallback((head?: Head | ((previous?: Head) => Head)) => {\n    if (!alepha.isBrowser()) {\n      return;\n    }\n\n    const headProvider = alepha.inject(BrowserHeadProvider);\n    const resolved =\n      typeof head === \"function\"\n        ? head(headProvider.getHead(window.document))\n        : head || {};\n    headProvider.renderHead(window.document, resolved);\n  }, []);\n\n  useEffect(() => {\n    if (options) {\n      setHead(options);\n    }\n  }, []);\n\n  return [current, setHead];\n};\n\nexport type UseHeadOptions = Head | ((previous?: Head) => Head);\n\nexport type UseHeadReturn = [\n  Head,\n  (head?: Head | ((previous?: Head) => Head)) => void,\n];\n","import { $module } from \"alepha\";\nimport { AlephaReact } from \"alepha/react\";\nimport { SeoExpander } from \"./helpers/SeoExpander.ts\";\nimport { $head } from \"./primitives/$head.ts\";\nimport { BrowserHeadProvider } from \"./providers/BrowserHeadProvider.ts\";\nimport { HeadProvider } from \"./providers/HeadProvider.ts\";\nimport { ServerHeadProvider } from \"./providers/ServerHeadProvider.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport * from \"./helpers/SeoExpander.ts\";\nexport * from \"./hooks/useHead.ts\";\nexport * from \"./interfaces/Head.ts\";\nexport * from \"./primitives/$head.ts\";\nexport * from \"./providers/BrowserHeadProvider.ts\";\nexport * from \"./providers/ServerHeadProvider.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n/**\n * HTML head element management.\n *\n * **Features:**\n * - Title, meta tags, and links\n * - SEO optimization\n * - Social media tags\n *\n * @module alepha.react.head\n */\nexport const AlephaReactHead = $module({\n  name: \"alepha.react.head\",\n  primitives: [$head],\n  services: [\n    AlephaReact,\n    BrowserHeadProvider,\n    HeadProvider,\n    SeoExpander,\n    ServerHeadProvider,\n  ],\n});\n"],"mappings":"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"}

package/dist/react/i18n/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/react/i18n/providers/I18nProvider.ts","../../../src/react/i18n/primitives/$dictionary.ts","../../../src/react/i18n/hooks/useI18n.ts","../../../src/react/i18n/components/Localize.tsx","../../../src/react/i18n/index.ts"],"sourcesContent":["import { $hook, $inject, Alepha, TypeBoxError, TypeProvider, t } from \"alepha\";\nimport { type DateTime, DateTimeProvider } from \"alepha/datetime\";\nimport { $logger } from \"alepha/logger\";\nimport { $cookie } from \"alepha/server/cookies\";\nimport type { ServiceDictionary } from \"../hooks/useI18n.ts\";\n\nexport class I18nProvider<\n  S extends object,\n  K extends keyof ServiceDictionary<S>,\n> {\n  protected log = $logger();\n  protected alepha = $inject(Alepha);\n  protected dateTimeProvider = $inject(DateTimeProvider);\n\n  protected cookie = $cookie({\n    name: \"lang\",\n    schema: t.text(),\n    ttl: [1, \"year\"],\n  });\n\n  public readonly registry: Array<{\n    target: string;\n    name: string;\n    lang: string;\n    loader: () => Promise<Record<string, string>>;\n    translations: Record<string, string>;\n  }> = [];\n\n  options = {\n    fallbackLang: \"en\",\n  };\n\n  public dateFormat: { format: (value: Date) => string } =\n    new Intl.DateTimeFormat(this.lang);\n\n  public numberFormat: { format: (value: number) => string } =\n    new Intl.NumberFormat(this.lang);\n\n  public get languages() {\n    const languages = new Set<string>();\n\n    for (const item of this.registry) {\n      languages.add(item.lang);\n    }\n\n    return Array.from(languages);\n  }\n\n  constructor() {\n    this.refreshLocale();\n  }\n\n  protected readonly onRender = $hook({\n    on: \"server:onRequest\",\n    priority: \"last\",\n    handler: async ({ request }) => {\n      this.alepha.store.set(\"alepha.react.i18n.lang\", this.cookie.get(request));\n    },\n  });\n\n  protected readonly onStart = $hook({\n    on: \"start\",\n    handler: async () => {\n      if (this.alepha.isBrowser()) {\n        // get cookie lang\n        const cookieLang = this.cookie.get();\n        if (cookieLang) {\n          this.alepha.store.set(\"alepha.react.i18n.lang\", cookieLang);\n        }\n\n        for (const item of this.registry) {\n          if (item.lang === this.lang || item.lang === this.fallbackLang) {\n            this.log.trace(\"Loading language\", {\n              lang: item.lang,\n              name: item.name,\n              target: item.target,\n            });\n            item.translations = await item.loader();\n          }\n        }\n        return;\n      }\n\n      for (const item of this.registry) {\n        item.translations = await item.loader();\n      }\n    },\n  });\n\n  protected refreshLocale() {\n    this.numberFormat = new Intl.NumberFormat(this.lang);\n    this.dateFormat = new Intl.DateTimeFormat(this.lang);\n    this.dateTimeProvider.setLocale(this.lang);\n    TypeProvider.setLocale(this.lang);\n  }\n\n  public setLang = async (lang: string) => {\n    if (this.alepha.isBrowser()) {\n      for (const item of this.registry) {\n        if (lang === item.lang) {\n          if (Object.keys(item.translations).length > 0) {\n            continue; // already loaded\n          }\n          item.translations = await item.loader();\n        }\n      }\n      this.cookie.set(lang);\n    }\n\n    this.alepha.store.set(\"alepha.react.i18n.lang\", lang);\n    this.refreshLocale();\n  };\n\n  protected readonly mutate = $hook({\n    on: \"state:mutate\",\n    handler: async ({ key, value }) => {\n      if (key === \"alepha.react.i18n.lang\" && this.alepha.isBrowser()) {\n        let hasChanged = false;\n        for (const item of this.registry) {\n          if (value === item.lang) {\n            if (Object.keys(item.translations).length > 0) {\n              continue; // already loaded\n            }\n            item.translations = await item.loader();\n            hasChanged = true;\n          }\n        }\n\n        this.refreshLocale();\n\n        if (hasChanged) {\n          this.alepha.store.set(\"alepha.react.i18n.lang\", value);\n        }\n      }\n    },\n  });\n\n  public get fallbackLang(): string {\n    const configured = this.options.fallbackLang;\n    const hasDict = this.registry.some((item) => item.lang === configured);\n    if (hasDict) {\n      return configured;\n    }\n    return this.registry[0]?.lang ?? configured;\n  }\n\n  public get lang(): string {\n    return this.alepha.store.get(\"alepha.react.i18n.lang\") || this.fallbackLang;\n  }\n\n  public translate = (key: string, args: string[] = []) => {\n    for (const item of this.registry) {\n      if (item.lang === this.lang) {\n        if (item.translations[key]) {\n          return this.render(item.translations[key], args); // append lang for fallback\n        }\n      }\n    }\n\n    for (const item of this.registry) {\n      if (item.lang === this.fallbackLang) {\n        if (item.translations[key]) {\n          return this.render(item.translations[key], args); // append lang for fallback\n        }\n      }\n    }\n\n    return key; // fallback to the key itself if not found\n  };\n\n  public readonly l = (\n    value: I18nLocalizeType,\n    options: I18nLocalizeOptions = {},\n  ) => {\n    // Handle numbers\n    if (typeof value === \"number\" && !options.date) {\n      return new Intl.NumberFormat(this.lang, options.number).format(value);\n    }\n\n    // Handle dates\n    if (\n      value instanceof Date ||\n      this.dateTimeProvider.isDateTime(value) ||\n      (typeof value === \"string\" && options.date) ||\n      (typeof value === \"number\" && options.date)\n    ) {\n      // convert to DateTime with locale applied\n      let dt = this.dateTimeProvider.of(value);\n\n      // apply timezone if specified\n      if (options.timezone) {\n        dt = dt.tz(options.timezone);\n      }\n\n      // format using dayjs format string\n      if (typeof options.date === \"string\") {\n        if (options.date === \"fromNow\") {\n          return dt.locale(this.lang).fromNow();\n        }\n        return dt.locale(this.lang).format(options.date);\n      }\n\n      // format using Intl.DateTimeFormatOptions\n      if (options.date) {\n        return new Intl.DateTimeFormat(\n          this.lang,\n          options.timezone\n            ? { ...options.date, timeZone: options.timezone }\n            : options.date,\n        ).format(dt.toDate());\n      }\n\n      // default formatting with timezone\n      if (options.timezone) {\n        return new Intl.DateTimeFormat(this.lang, {\n          timeZone: options.timezone,\n        }).format(dt.toDate());\n      }\n\n      // default formatting\n      return new Intl.DateTimeFormat(this.lang).format(dt.toDate());\n    }\n\n    // handle TypeBox errors\n    if (value instanceof TypeBoxError) {\n      return TypeProvider.translateError(value, this.lang);\n    }\n\n    // return string values as-is\n    return value;\n  };\n\n  public readonly tr = (\n    key: keyof ServiceDictionary<S>[K],\n    options: {\n      args?: string[];\n      default?: string;\n    } = {},\n  ) => {\n    const translation = this.translate(key as string, options.args || []);\n    if (translation === key && options.default) {\n      return options.default;\n    }\n    return translation;\n  };\n\n  protected render(item: string, args: string[]): string {\n    let result = item;\n    for (let i = 0; i < args.length; i++) {\n      result = result.replace(`$${i + 1}`, args[i]);\n    }\n    return result;\n  }\n}\n\nexport type I18nLocalizeType = string | number | Date | DateTime | TypeBoxError;\n\nexport interface I18nLocalizeOptions {\n  /**\n   * Options for number formatting (when value is a number)\n   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat\n   */\n  number?: Intl.NumberFormatOptions;\n  /**\n   * Options for date formatting (when value is a Date or DateTime)\n   * Can be:\n   * - A dayjs format string (e.g., \"LLL\", \"YYYY-MM-DD\", \"dddd, MMMM D YYYY\")\n   * - \"fromNow\" for relative time (e.g., \"2 hours ago\")\n   * - Intl.DateTimeFormatOptions for native formatting\n   * @see https://day.js.org/docs/en/display/format\n   * @see https://day.js.org/docs/en/display/from-now\n   */\n  date?: string | \"fromNow\" | Intl.DateTimeFormatOptions;\n  /**\n   * Timezone to display dates in (when value is a Date or DateTime)\n   * Uses IANA timezone names (e.g., \"America/New_York\", \"Europe/Paris\", \"Asia/Tokyo\")\n   * @see https://day.js.org/docs/en/timezone/timezone\n   */\n  timezone?: string;\n}\n","import { $inject, type Async, createPrimitive, KIND, Primitive } from \"alepha\";\nimport { I18nProvider } from \"../providers/I18nProvider.ts\";\n\n/**\n * Register a dictionary entry for translations.\n *\n * It allows you to define a set of translations for a specific language.\n * Entry can be lazy-loaded, which is useful for large dictionaries or when translations are not needed immediately.\n *\n * @example\n * ```ts\n * import { $dictionary } from \"alepha/react/i18n\";\n *\n * const Example = () => {\n *   const { tr } = useI18n<App, \"en\">();\n *   return <div>{tr(\"hello\")}</div>; //\n * }\n *\n * class App {\n *\n *   en = $dictionary({\n *     // { default: { hello: \"Hey\" } }\n *     lazy: () => import(\"./translations/en.ts\"),\n *   });\n *\n *   home = $page({\n *     path: \"/\",\n *     component: Example,\n *   })\n * }\n *\n * run(App);\n * ```\n */\nexport const $dictionary = <T extends Record<string, string>>(\n  options: DictionaryPrimitiveOptions<T>,\n): DictionaryPrimitive<T> => {\n  return createPrimitive(DictionaryPrimitive<T>, options);\n};\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport interface DictionaryPrimitiveOptions<T extends Record<string, string>> {\n  lang?: string;\n  name?: string;\n  lazy: () => Async<{ default: T }>;\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport class DictionaryPrimitive<\n  T extends Record<string, string>,\n> extends Primitive<DictionaryPrimitiveOptions<T>> {\n  protected provider = $inject(I18nProvider);\n  protected onInit() {\n    this.provider.registry.push({\n      target: this.config.service.name,\n      name: this.options.name ?? this.config.propertyKey,\n      lang: this.options.lang ?? this.config.propertyKey,\n      loader: async () => {\n        const mod = await this.options.lazy();\n        return mod.default;\n      },\n      translations: {},\n    });\n  }\n}\n\n$dictionary[KIND] = DictionaryPrimitive;\n","import { useInject, useStore } from \"alepha/react\";\nimport type { DictionaryPrimitive } from \"../primitives/$dictionary.ts\";\nimport { I18nProvider } from \"../providers/I18nProvider.ts\";\n\n/**\n * Hook to access the i18n service.\n */\nexport const useI18n = <\n  S extends object,\n  K extends keyof ServiceDictionary<S>,\n>(): I18nProvider<S, K> => {\n  useStore(\"alepha.react.i18n.lang\");\n  return useInject(I18nProvider<S, K>);\n};\n\nexport type ServiceDictionary<T extends object> = {\n  [K in keyof T]: T[K] extends DictionaryPrimitive<infer U> ? U : never;\n};\n","import type { TypeBoxError } from \"alepha\";\nimport type { DateTime } from \"alepha/datetime\";\nimport { useI18n } from \"../hooks/useI18n.ts\";\n\nexport interface LocalizeProps {\n  value: string | number | Date | DateTime | TypeBoxError;\n  /**\n   * Options for number formatting (when value is a number)\n   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat\n   */\n  number?: Intl.NumberFormatOptions;\n  /**\n   * Options for date formatting (when value is a Date or DateTime)\n   * Can be:\n   * - A dayjs format string (e.g., \"LLL\", \"YYYY-MM-DD\", \"dddd, MMMM D YYYY\")\n   * - \"fromNow\" for relative time (e.g., \"2 hours ago\")\n   * - Intl.DateTimeFormatOptions for native formatting\n   * @see https://day.js.org/docs/en/display/format\n   * @see https://day.js.org/docs/en/display/from-now\n   */\n  date?: string | \"fromNow\" | Intl.DateTimeFormatOptions;\n  /**\n   * Timezone to display dates in (when value is a Date or DateTime)\n   * Uses IANA timezone names (e.g., \"America/New_York\", \"Europe/Paris\", \"Asia/Tokyo\")\n   * @see https://day.js.org/docs/en/timezone/timezone\n   */\n  timezone?: string;\n}\n\nconst Localize = (props: LocalizeProps) => {\n  const i18n = useI18n();\n  return i18n.l(props.value, props);\n};\n\nexport default Localize;\n","import { $module } from \"alepha\";\nimport { $dictionary } from \"./primitives/$dictionary.ts\";\nimport { I18nProvider } from \"./providers/I18nProvider.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport type { LocalizeProps } from \"./components/Localize.tsx\";\nexport { default as Localize } from \"./components/Localize.tsx\";\nexport * from \"./hooks/useI18n.ts\";\nexport * from \"./primitives/$dictionary.ts\";\nexport * from \"./providers/I18nProvider.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\ndeclare module \"alepha\" {\n  export interface State {\n    \"alepha.react.i18n.lang\"?: string;\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n/**\n * Multi-language support.\n *\n * **Features:**\n * - Translation loading\n * - Locale detection\n * - Pluralization\n *\n * @module alepha.react.i18n\n */\nexport const AlephaReactI18n = $module({\n  name: \"alepha.react.i18n\",\n  primitives: [$dictionary],\n  services: [I18nProvider],\n});\n"],"mappings":";;;;;;AAMA,IAAa,eAAb,MAGE;CACA,MAAgB,SAAS;CACzB,SAAmB,QAAQ,OAAO;CAClC,mBAA6B,QAAQ,iBAAiB;CAEtD,SAAmB,QAAQ;EACzB,MAAM;EACN,QAAQ,EAAE,MAAM;EAChB,KAAK,CAAC,GAAG,OAAO;EACjB,CAAC;CAEF,WAMK,EAAE;CAEP,UAAU,EACR,cAAc,MACf;CAED,aACE,IAAI,KAAK,eAAe,KAAK,KAAK;CAEpC,eACE,IAAI,KAAK,aAAa,KAAK,KAAK;CAElC,IAAW,YAAY;EACrB,MAAM,4BAAY,IAAI,KAAa;AAEnC,OAAK,MAAM,QAAQ,KAAK,SACtB,WAAU,IAAI,KAAK,KAAK;AAG1B,SAAO,MAAM,KAAK,UAAU;;CAG9B,cAAc;AACZ,OAAK,eAAe;;CAGtB,WAA8B,MAAM;EAClC,IAAI;EACJ,UAAU;EACV,SAAS,OAAO,EAAE,cAAc;AAC9B,QAAK,OAAO,MAAM,IAAI,0BAA0B,KAAK,OAAO,IAAI,QAAQ,CAAC;;EAE5E,CAAC;CAEF,UAA6B,MAAM;EACjC,IAAI;EACJ,SAAS,YAAY;AACnB,OAAI,KAAK,OAAO,WAAW,EAAE;IAE3B,MAAM,aAAa,KAAK,OAAO,KAAK;AACpC,QAAI,WACF,MAAK,OAAO,MAAM,IAAI,0BAA0B,WAAW;AAG7D,SAAK,MAAM,QAAQ,KAAK,SACtB,KAAI,KAAK,SAAS,KAAK,QAAQ,KAAK,SAAS,KAAK,cAAc;AAC9D,UAAK,IAAI,MAAM,oBAAoB;MACjC,MAAM,KAAK;MACX,MAAM,KAAK;MACX,QAAQ,KAAK;MACd,CAAC;AACF,UAAK,eAAe,MAAM,KAAK,QAAQ;;AAG3C;;AAGF,QAAK,MAAM,QAAQ,KAAK,SACtB,MAAK,eAAe,MAAM,KAAK,QAAQ;;EAG5C,CAAC;CAEF,gBAA0B;AACxB,OAAK,eAAe,IAAI,KAAK,aAAa,KAAK,KAAK;AACpD,OAAK,aAAa,IAAI,KAAK,eAAe,KAAK,KAAK;AACpD,OAAK,iBAAiB,UAAU,KAAK,KAAK;AAC1C,eAAa,UAAU,KAAK,KAAK;;CAGnC,UAAiB,OAAO,SAAiB;AACvC,MAAI,KAAK,OAAO,WAAW,EAAE;AAC3B,QAAK,MAAM,QAAQ,KAAK,SACtB,KAAI,SAAS,KAAK,MAAM;AACtB,QAAI,OAAO,KAAK,KAAK,aAAa,CAAC,SAAS,EAC1C;AAEF,SAAK,eAAe,MAAM,KAAK,QAAQ;;AAG3C,QAAK,OAAO,IAAI,KAAK;;AAGvB,OAAK,OAAO,MAAM,IAAI,0BAA0B,KAAK;AACrD,OAAK,eAAe;;CAGtB,SAA4B,MAAM;EAChC,IAAI;EACJ,SAAS,OAAO,EAAE,KAAK,YAAY;AACjC,OAAI,QAAQ,4BAA4B,KAAK,OAAO,WAAW,EAAE;IAC/D,IAAI,aAAa;AACjB,SAAK,MAAM,QAAQ,KAAK,SACtB,KAAI,UAAU,KAAK,MAAM;AACvB,SAAI,OAAO,KAAK,KAAK,aAAa,CAAC,SAAS,EAC1C;AAEF,UAAK,eAAe,MAAM,KAAK,QAAQ;AACvC,kBAAa;;AAIjB,SAAK,eAAe;AAEpB,QAAI,WACF,MAAK,OAAO,MAAM,IAAI,0BAA0B,MAAM;;;EAI7D,CAAC;CAEF,IAAW,eAAuB;EAChC,MAAM,aAAa,KAAK,QAAQ;AAEhC,MADgB,KAAK,SAAS,MAAM,SAAS,KAAK,SAAS,WAAW,CAEpE,QAAO;AAET,SAAO,KAAK,SAAS,IAAI,QAAQ;;CAGnC,IAAW,OAAe;AACxB,SAAO,KAAK,OAAO,MAAM,IAAI,yBAAyB,IAAI,KAAK;;CAGjE,aAAoB,KAAa,OAAiB,EAAE,KAAK;AACvD,OAAK,MAAM,QAAQ,KAAK,SACtB,KAAI,KAAK,SAAS,KAAK;OACjB,KAAK,aAAa,KACpB,QAAO,KAAK,OAAO,KAAK,aAAa,MAAM,KAAK;;AAKtD,OAAK,MAAM,QAAQ,KAAK,SACtB,KAAI,KAAK,SAAS,KAAK;OACjB,KAAK,aAAa,KACpB,QAAO,KAAK,OAAO,KAAK,aAAa,MAAM,KAAK;;AAKtD,SAAO;;CAGT,KACE,OACA,UAA+B,EAAE,KAC9B;AAEH,MAAI,OAAO,UAAU,YAAY,CAAC,QAAQ,KACxC,QAAO,IAAI,KAAK,aAAa,KAAK,MAAM,QAAQ,OAAO,CAAC,OAAO,MAAM;AAIvE,MACE,iBAAiB,QACjB,KAAK,iBAAiB,WAAW,MAAM,IACtC,OAAO,UAAU,YAAY,QAAQ,QACrC,OAAO,UAAU,YAAY,QAAQ,MACtC;GAEA,IAAI,KAAK,KAAK,iBAAiB,GAAG,MAAM;AAGxC,OAAI,QAAQ,SACV,MAAK,GAAG,GAAG,QAAQ,SAAS;AAI9B,OAAI,OAAO,QAAQ,SAAS,UAAU;AACpC,QAAI,QAAQ,SAAS,UACnB,QAAO,GAAG,OAAO,KAAK,KAAK,CAAC,SAAS;AAEvC,WAAO,GAAG,OAAO,KAAK,KAAK,CAAC,OAAO,QAAQ,KAAK;;AAIlD,OAAI,QAAQ,KACV,QAAO,IAAI,KAAK,eACd,KAAK,MACL,QAAQ,WACJ;IAAE,GAAG,QAAQ;IAAM,UAAU,QAAQ;IAAU,GAC/C,QAAQ,KACb,CAAC,OAAO,GAAG,QAAQ,CAAC;AAIvB,OAAI,QAAQ,SACV,QAAO,IAAI,KAAK,eAAe,KAAK,MAAM,EACxC,UAAU,QAAQ,UACnB,CAAC,CAAC,OAAO,GAAG,QAAQ,CAAC;AAIxB,UAAO,IAAI,KAAK,eAAe,KAAK,KAAK,CAAC,OAAO,GAAG,QAAQ,CAAC;;AAI/D,MAAI,iBAAiB,aACnB,QAAO,aAAa,eAAe,OAAO,KAAK,KAAK;AAItD,SAAO;;CAGT,MACE,KACA,UAGI,EAAE,KACH;EACH,MAAM,cAAc,KAAK,UAAU,KAAe,QAAQ,QAAQ,EAAE,CAAC;AACrE,MAAI,gBAAgB,OAAO,QAAQ,QACjC,QAAO,QAAQ;AAEjB,SAAO;;CAGT,OAAiB,MAAc,MAAwB;EACrD,IAAI,SAAS;AACb,OAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,IAC/B,UAAS,OAAO,QAAQ,IAAI,IAAI,KAAK,KAAK,GAAG;AAE/C,SAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACzNX,MAAa,eACX,YAC2B;AAC3B,QAAO,gBAAgB,qBAAwB,QAAQ;;AAazD,IAAa,sBAAb,cAEU,UAAyC;CACjD,WAAqB,QAAQ,aAAa;CAC1C,SAAmB;AACjB,OAAK,SAAS,SAAS,KAAK;GAC1B,QAAQ,KAAK,OAAO,QAAQ;GAC5B,MAAM,KAAK,QAAQ,QAAQ,KAAK,OAAO;GACvC,MAAM,KAAK,QAAQ,QAAQ,KAAK,OAAO;GACvC,QAAQ,YAAY;AAElB,YADY,MAAM,KAAK,QAAQ,MAAM,EAC1B;;GAEb,cAAc,EAAE;GACjB,CAAC;;;AAIN,YAAY,QAAQ;;;;;;AC7DpB,MAAa,gBAGc;AACzB,UAAS,yBAAyB;AAClC,QAAO,UAAU,aAAmB;;;;ACiBtC,MAAM,YAAY,UAAyB;AAEzC,QADa,SAAS,CACV,EAAE,MAAM,OAAO,MAAM;;;;;;;;;;;;;;ACCnC,MAAa,kBAAkB,QAAQ;CACrC,MAAM;CACN,YAAY,CAAC,YAAY;CACzB,UAAU,CAAC,aAAa;CACzB,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/react/i18n/providers/I18nProvider.ts","../../../src/react/i18n/primitives/$dictionary.ts","../../../src/react/i18n/hooks/useI18n.ts","../../../src/react/i18n/components/Localize.tsx","../../../src/react/i18n/index.ts"],"sourcesContent":["import { $hook, $inject, Alepha, TypeBoxError, TypeProvider, t } from \"alepha\";\nimport { type DateTime, DateTimeProvider } from \"alepha/datetime\";\nimport { $logger } from \"alepha/logger\";\nimport { $cookie } from \"alepha/server/cookies\";\nimport type { ServiceDictionary } from \"../hooks/useI18n.ts\";\n\nexport class I18nProvider<\n  S extends object,\n  K extends keyof ServiceDictionary<S>,\n> {\n  protected log = $logger();\n  protected alepha = $inject(Alepha);\n  protected dateTimeProvider = $inject(DateTimeProvider);\n\n  protected cookie = $cookie({\n    name: \"lang\",\n    schema: t.text(),\n    ttl: [1, \"year\"],\n  });\n\n  public readonly registry: Array<{\n    target: string;\n    name: string;\n    lang: string;\n    loader: () => Promise<Record<string, string>>;\n    translations: Record<string, string>;\n  }> = [];\n\n  options = {\n    fallbackLang: \"en\",\n  };\n\n  public dateFormat: { format: (value: Date) => string } =\n    new Intl.DateTimeFormat(this.lang);\n\n  public numberFormat: { format: (value: number) => string } =\n    new Intl.NumberFormat(this.lang);\n\n  public get languages() {\n    const languages = new Set<string>();\n\n    for (const item of this.registry) {\n      languages.add(item.lang);\n    }\n\n    return Array.from(languages);\n  }\n\n  constructor() {\n    this.refreshLocale();\n  }\n\n  protected readonly onRender = $hook({\n    on: \"server:onRequest\",\n    priority: \"last\",\n    handler: async ({ request }) => {\n      this.alepha.store.set(\"alepha.react.i18n.lang\", this.cookie.get(request));\n    },\n  });\n\n  protected readonly onStart = $hook({\n    on: \"start\",\n    handler: async () => {\n      if (this.alepha.isBrowser()) {\n        // get cookie lang\n        const cookieLang = this.cookie.get();\n        if (cookieLang) {\n          this.alepha.store.set(\"alepha.react.i18n.lang\", cookieLang);\n        }\n\n        for (const item of this.registry) {\n          if (item.lang === this.lang || item.lang === this.fallbackLang) {\n            this.log.trace(\"Loading language\", {\n              lang: item.lang,\n              name: item.name,\n              target: item.target,\n            });\n            item.translations = await item.loader();\n          }\n        }\n        return;\n      }\n\n      for (const item of this.registry) {\n        item.translations = await item.loader();\n      }\n    },\n  });\n\n  protected refreshLocale() {\n    this.numberFormat = new Intl.NumberFormat(this.lang);\n    this.dateFormat = new Intl.DateTimeFormat(this.lang);\n    this.dateTimeProvider.setLocale(this.lang);\n    TypeProvider.setLocale(this.lang);\n  }\n\n  public setLang = async (lang: string) => {\n    if (this.alepha.isBrowser()) {\n      for (const item of this.registry) {\n        if (lang === item.lang) {\n          if (Object.keys(item.translations).length > 0) {\n            continue; // already loaded\n          }\n          item.translations = await item.loader();\n        }\n      }\n      this.cookie.set(lang);\n    }\n\n    this.alepha.store.set(\"alepha.react.i18n.lang\", lang);\n    this.refreshLocale();\n  };\n\n  protected readonly mutate = $hook({\n    on: \"state:mutate\",\n    handler: async ({ key, value }) => {\n      if (key === \"alepha.react.i18n.lang\" && this.alepha.isBrowser()) {\n        let hasChanged = false;\n        for (const item of this.registry) {\n          if (value === item.lang) {\n            if (Object.keys(item.translations).length > 0) {\n              continue; // already loaded\n            }\n            item.translations = await item.loader();\n            hasChanged = true;\n          }\n        }\n\n        this.refreshLocale();\n\n        if (hasChanged) {\n          this.alepha.store.set(\"alepha.react.i18n.lang\", value);\n        }\n      }\n    },\n  });\n\n  public get fallbackLang(): string {\n    const configured = this.options.fallbackLang;\n    const hasDict = this.registry.some((item) => item.lang === configured);\n    if (hasDict) {\n      return configured;\n    }\n    return this.registry[0]?.lang ?? configured;\n  }\n\n  public get lang(): string {\n    return this.alepha.store.get(\"alepha.react.i18n.lang\") || this.fallbackLang;\n  }\n\n  public translate = (key: string, args: string[] = []) => {\n    for (const item of this.registry) {\n      if (item.lang === this.lang) {\n        if (item.translations[key]) {\n          return this.render(item.translations[key], args); // append lang for fallback\n        }\n      }\n    }\n\n    for (const item of this.registry) {\n      if (item.lang === this.fallbackLang) {\n        if (item.translations[key]) {\n          return this.render(item.translations[key], args); // append lang for fallback\n        }\n      }\n    }\n\n    return key; // fallback to the key itself if not found\n  };\n\n  public readonly l = (\n    value: I18nLocalizeType,\n    options: I18nLocalizeOptions = {},\n  ) => {\n    // Handle numbers\n    if (typeof value === \"number\" && !options.date) {\n      return new Intl.NumberFormat(this.lang, options.number).format(value);\n    }\n\n    // Handle dates\n    if (\n      value instanceof Date ||\n      this.dateTimeProvider.isDateTime(value) ||\n      (typeof value === \"string\" && options.date) ||\n      (typeof value === \"number\" && options.date)\n    ) {\n      // convert to DateTime with locale applied\n      let dt = this.dateTimeProvider.of(value);\n\n      // apply timezone if specified\n      if (options.timezone) {\n        dt = dt.tz(options.timezone);\n      }\n\n      // format using dayjs format string\n      if (typeof options.date === \"string\") {\n        if (options.date === \"fromNow\") {\n          return dt.locale(this.lang).fromNow();\n        }\n        return dt.locale(this.lang).format(options.date);\n      }\n\n      // format using Intl.DateTimeFormatOptions\n      if (options.date) {\n        return new Intl.DateTimeFormat(\n          this.lang,\n          options.timezone\n            ? { ...options.date, timeZone: options.timezone }\n            : options.date,\n        ).format(dt.toDate());\n      }\n\n      // default formatting with timezone\n      if (options.timezone) {\n        return new Intl.DateTimeFormat(this.lang, {\n          timeZone: options.timezone,\n        }).format(dt.toDate());\n      }\n\n      // default formatting\n      return new Intl.DateTimeFormat(this.lang).format(dt.toDate());\n    }\n\n    // handle TypeBox errors\n    if (value instanceof TypeBoxError) {\n      return TypeProvider.translateError(value, this.lang);\n    }\n\n    // return string values as-is\n    return value;\n  };\n\n  public readonly tr = (\n    key: keyof ServiceDictionary<S>[K],\n    options: {\n      args?: string[];\n      default?: string;\n    } = {},\n  ) => {\n    const translation = this.translate(key as string, options.args || []);\n    if (translation === key && options.default) {\n      return options.default;\n    }\n    return translation;\n  };\n\n  protected render(item: string, args: string[]): string {\n    let result = item;\n    for (let i = 0; i < args.length; i++) {\n      result = result.replace(`$${i + 1}`, args[i]);\n    }\n    return result;\n  }\n}\n\nexport type I18nLocalizeType = string | number | Date | DateTime | TypeBoxError;\n\nexport interface I18nLocalizeOptions {\n  /**\n   * Options for number formatting (when value is a number)\n   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat\n   */\n  number?: Intl.NumberFormatOptions;\n  /**\n   * Options for date formatting (when value is a Date or DateTime)\n   * Can be:\n   * - A dayjs format string (e.g., \"LLL\", \"YYYY-MM-DD\", \"dddd, MMMM D YYYY\")\n   * - \"fromNow\" for relative time (e.g., \"2 hours ago\")\n   * - Intl.DateTimeFormatOptions for native formatting\n   * @see https://day.js.org/docs/en/display/format\n   * @see https://day.js.org/docs/en/display/from-now\n   */\n  date?: string | \"fromNow\" | Intl.DateTimeFormatOptions;\n  /**\n   * Timezone to display dates in (when value is a Date or DateTime)\n   * Uses IANA timezone names (e.g., \"America/New_York\", \"Europe/Paris\", \"Asia/Tokyo\")\n   * @see https://day.js.org/docs/en/timezone/timezone\n   */\n  timezone?: string;\n}\n","import { $inject, type Async, createPrimitive, KIND, Primitive } from \"alepha\";\nimport { I18nProvider } from \"../providers/I18nProvider.ts\";\n\n/**\n * Register a dictionary entry for translations.\n *\n * It allows you to define a set of translations for a specific language.\n * Entry can be lazy-loaded, which is useful for large dictionaries or when translations are not needed immediately.\n *\n * @example\n * ```ts\n * import { $dictionary } from \"alepha/react/i18n\";\n *\n * const Example = () => {\n *   const { tr } = useI18n<App, \"en\">();\n *   return <div>{tr(\"hello\")}</div>; //\n * }\n *\n * class App {\n *\n *   en = $dictionary({\n *     // { default: { hello: \"Hey\" } }\n *     lazy: () => import(\"./translations/en.ts\"),\n *   });\n *\n *   home = $page({\n *     path: \"/\",\n *     component: Example,\n *   })\n * }\n *\n * run(App);\n * ```\n */\nexport const $dictionary = <T extends Record<string, string>>(\n  options: DictionaryPrimitiveOptions<T>,\n): DictionaryPrimitive<T> => {\n  return createPrimitive(DictionaryPrimitive<T>, options);\n};\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport interface DictionaryPrimitiveOptions<T extends Record<string, string>> {\n  lang?: string;\n  name?: string;\n  lazy: () => Async<{ default: T }>;\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport class DictionaryPrimitive<\n  T extends Record<string, string>,\n> extends Primitive<DictionaryPrimitiveOptions<T>> {\n  protected provider = $inject(I18nProvider);\n  protected onInit() {\n    this.provider.registry.push({\n      target: this.config.service.name,\n      name: this.options.name ?? this.config.propertyKey,\n      lang: this.options.lang ?? this.config.propertyKey,\n      loader: async () => {\n        const mod = await this.options.lazy();\n        return mod.default;\n      },\n      translations: {},\n    });\n  }\n}\n\n$dictionary[KIND] = DictionaryPrimitive;\n","import { useInject, useStore } from \"alepha/react\";\nimport type { DictionaryPrimitive } from \"../primitives/$dictionary.ts\";\nimport { I18nProvider } from \"../providers/I18nProvider.ts\";\n\n/**\n * Hook to access the i18n service.\n */\nexport const useI18n = <\n  S extends object,\n  K extends keyof ServiceDictionary<S>,\n>(): I18nProvider<S, K> => {\n  useStore(\"alepha.react.i18n.lang\");\n  return useInject(I18nProvider<S, K>);\n};\n\nexport type ServiceDictionary<T extends object> = {\n  [K in keyof T]: T[K] extends DictionaryPrimitive<infer U> ? U : never;\n};\n","import type { TypeBoxError } from \"alepha\";\nimport type { DateTime } from \"alepha/datetime\";\nimport { useI18n } from \"../hooks/useI18n.ts\";\n\nexport interface LocalizeProps {\n  value: string | number | Date | DateTime | TypeBoxError;\n  /**\n   * Options for number formatting (when value is a number)\n   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat\n   */\n  number?: Intl.NumberFormatOptions;\n  /**\n   * Options for date formatting (when value is a Date or DateTime)\n   * Can be:\n   * - A dayjs format string (e.g., \"LLL\", \"YYYY-MM-DD\", \"dddd, MMMM D YYYY\")\n   * - \"fromNow\" for relative time (e.g., \"2 hours ago\")\n   * - Intl.DateTimeFormatOptions for native formatting\n   * @see https://day.js.org/docs/en/display/format\n   * @see https://day.js.org/docs/en/display/from-now\n   */\n  date?: string | \"fromNow\" | Intl.DateTimeFormatOptions;\n  /**\n   * Timezone to display dates in (when value is a Date or DateTime)\n   * Uses IANA timezone names (e.g., \"America/New_York\", \"Europe/Paris\", \"Asia/Tokyo\")\n   * @see https://day.js.org/docs/en/timezone/timezone\n   */\n  timezone?: string;\n}\n\nconst Localize = (props: LocalizeProps) => {\n  const i18n = useI18n();\n  return i18n.l(props.value, props);\n};\n\nexport default Localize;\n","import { $module } from \"alepha\";\nimport { $dictionary } from \"./primitives/$dictionary.ts\";\nimport { I18nProvider } from \"./providers/I18nProvider.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport type { LocalizeProps } from \"./components/Localize.tsx\";\nexport { default as Localize } from \"./components/Localize.tsx\";\nexport * from \"./hooks/useI18n.ts\";\nexport * from \"./primitives/$dictionary.ts\";\nexport * from \"./providers/I18nProvider.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\ndeclare module \"alepha\" {\n  export interface State {\n    \"alepha.react.i18n.lang\"?: string;\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n/**\n * Multi-language support.\n *\n * **Features:**\n * - Translation loading\n * - Locale detection\n * - Pluralization\n *\n * @module alepha.react.i18n\n */\nexport const AlephaReactI18n = $module({\n  name: \"alepha.react.i18n\",\n  primitives: [$dictionary],\n  services: [I18nProvider],\n});\n"],"mappings":";;;;;;AAMA,IAAa,eAAb,MAGE;CACA,MAAgB,SAAS;CACzB,SAAmB,QAAQ,OAAO;CAClC,mBAA6B,QAAQ,iBAAiB;CAEtD,SAAmB,QAAQ;EACzB,MAAM;EACN,QAAQ,EAAE,MAAM;EAChB,KAAK,CAAC,GAAG,OAAO;EACjB,CAAC;CAEF,WAMK,EAAE;CAEP,UAAU,EACR,cAAc,MACf;CAED,aACE,IAAI,KAAK,eAAe,KAAK,KAAK;CAEpC,eACE,IAAI,KAAK,aAAa,KAAK,KAAK;CAElC,IAAW,YAAY;EACrB,MAAM,4BAAY,IAAI,KAAa;AAEnC,OAAK,MAAM,QAAQ,KAAK,SACtB,WAAU,IAAI,KAAK,KAAK;AAG1B,SAAO,MAAM,KAAK,UAAU;;CAG9B,cAAc;AACZ,OAAK,eAAe;;CAGtB,WAA8B,MAAM;EAClC,IAAI;EACJ,UAAU;EACV,SAAS,OAAO,EAAE,cAAc;AAC9B,QAAK,OAAO,MAAM,IAAI,0BAA0B,KAAK,OAAO,IAAI,QAAQ,CAAC;;EAE5E,CAAC;CAEF,UAA6B,MAAM;EACjC,IAAI;EACJ,SAAS,YAAY;AACnB,OAAI,KAAK,OAAO,WAAW,EAAE;IAE3B,MAAM,aAAa,KAAK,OAAO,KAAK;AACpC,QAAI,WACF,MAAK,OAAO,MAAM,IAAI,0BAA0B,WAAW;AAG7D,SAAK,MAAM,QAAQ,KAAK,SACtB,KAAI,KAAK,SAAS,KAAK,QAAQ,KAAK,SAAS,KAAK,cAAc;AAC9D,UAAK,IAAI,MAAM,oBAAoB;MACjC,MAAM,KAAK;MACX,MAAM,KAAK;MACX,QAAQ,KAAK;MACd,CAAC;AACF,UAAK,eAAe,MAAM,KAAK,QAAQ;;AAG3C;;AAGF,QAAK,MAAM,QAAQ,KAAK,SACtB,MAAK,eAAe,MAAM,KAAK,QAAQ;;EAG5C,CAAC;CAEF,gBAA0B;AACxB,OAAK,eAAe,IAAI,KAAK,aAAa,KAAK,KAAK;AACpD,OAAK,aAAa,IAAI,KAAK,eAAe,KAAK,KAAK;AACpD,OAAK,iBAAiB,UAAU,KAAK,KAAK;AAC1C,eAAa,UAAU,KAAK,KAAK;;CAGnC,UAAiB,OAAO,SAAiB;AACvC,MAAI,KAAK,OAAO,WAAW,EAAE;AAC3B,QAAK,MAAM,QAAQ,KAAK,SACtB,KAAI,SAAS,KAAK,MAAM;AACtB,QAAI,OAAO,KAAK,KAAK,aAAa,CAAC,SAAS,EAC1C;AAEF,SAAK,eAAe,MAAM,KAAK,QAAQ;;AAG3C,QAAK,OAAO,IAAI,KAAK;;AAGvB,OAAK,OAAO,MAAM,IAAI,0BAA0B,KAAK;AACrD,OAAK,eAAe;;CAGtB,SAA4B,MAAM;EAChC,IAAI;EACJ,SAAS,OAAO,EAAE,KAAK,YAAY;AACjC,OAAI,QAAQ,4BAA4B,KAAK,OAAO,WAAW,EAAE;IAC/D,IAAI,aAAa;AACjB,SAAK,MAAM,QAAQ,KAAK,SACtB,KAAI,UAAU,KAAK,MAAM;AACvB,SAAI,OAAO,KAAK,KAAK,aAAa,CAAC,SAAS,EAC1C;AAEF,UAAK,eAAe,MAAM,KAAK,QAAQ;AACvC,kBAAa;;AAIjB,SAAK,eAAe;AAEpB,QAAI,WACF,MAAK,OAAO,MAAM,IAAI,0BAA0B,MAAM;;;EAI7D,CAAC;CAEF,IAAW,eAAuB;EAChC,MAAM,aAAa,KAAK,QAAQ;AAEhC,MADgB,KAAK,SAAS,MAAM,SAAS,KAAK,SAAS,WAChD,CACT,QAAO;AAET,SAAO,KAAK,SAAS,IAAI,QAAQ;;CAGnC,IAAW,OAAe;AACxB,SAAO,KAAK,OAAO,MAAM,IAAI,yBAAyB,IAAI,KAAK;;CAGjE,aAAoB,KAAa,OAAiB,EAAE,KAAK;AACvD,OAAK,MAAM,QAAQ,KAAK,SACtB,KAAI,KAAK,SAAS,KAAK;OACjB,KAAK,aAAa,KACpB,QAAO,KAAK,OAAO,KAAK,aAAa,MAAM,KAAK;;AAKtD,OAAK,MAAM,QAAQ,KAAK,SACtB,KAAI,KAAK,SAAS,KAAK;OACjB,KAAK,aAAa,KACpB,QAAO,KAAK,OAAO,KAAK,aAAa,MAAM,KAAK;;AAKtD,SAAO;;CAGT,KACE,OACA,UAA+B,EAAE,KAC9B;AAEH,MAAI,OAAO,UAAU,YAAY,CAAC,QAAQ,KACxC,QAAO,IAAI,KAAK,aAAa,KAAK,MAAM,QAAQ,OAAO,CAAC,OAAO,MAAM;AAIvE,MACE,iBAAiB,QACjB,KAAK,iBAAiB,WAAW,MAAM,IACtC,OAAO,UAAU,YAAY,QAAQ,QACrC,OAAO,UAAU,YAAY,QAAQ,MACtC;GAEA,IAAI,KAAK,KAAK,iBAAiB,GAAG,MAAM;AAGxC,OAAI,QAAQ,SACV,MAAK,GAAG,GAAG,QAAQ,SAAS;AAI9B,OAAI,OAAO,QAAQ,SAAS,UAAU;AACpC,QAAI,QAAQ,SAAS,UACnB,QAAO,GAAG,OAAO,KAAK,KAAK,CAAC,SAAS;AAEvC,WAAO,GAAG,OAAO,KAAK,KAAK,CAAC,OAAO,QAAQ,KAAK;;AAIlD,OAAI,QAAQ,KACV,QAAO,IAAI,KAAK,eACd,KAAK,MACL,QAAQ,WACJ;IAAE,GAAG,QAAQ;IAAM,UAAU,QAAQ;IAAU,GAC/C,QAAQ,KACb,CAAC,OAAO,GAAG,QAAQ,CAAC;AAIvB,OAAI,QAAQ,SACV,QAAO,IAAI,KAAK,eAAe,KAAK,MAAM,EACxC,UAAU,QAAQ,UACnB,CAAC,CAAC,OAAO,GAAG,QAAQ,CAAC;AAIxB,UAAO,IAAI,KAAK,eAAe,KAAK,KAAK,CAAC,OAAO,GAAG,QAAQ,CAAC;;AAI/D,MAAI,iBAAiB,aACnB,QAAO,aAAa,eAAe,OAAO,KAAK,KAAK;AAItD,SAAO;;CAGT,MACE,KACA,UAGI,EAAE,KACH;EACH,MAAM,cAAc,KAAK,UAAU,KAAe,QAAQ,QAAQ,EAAE,CAAC;AACrE,MAAI,gBAAgB,OAAO,QAAQ,QACjC,QAAO,QAAQ;AAEjB,SAAO;;CAGT,OAAiB,MAAc,MAAwB;EACrD,IAAI,SAAS;AACb,OAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,IAC/B,UAAS,OAAO,QAAQ,IAAI,IAAI,KAAK,KAAK,GAAG;AAE/C,SAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACzNX,MAAa,eACX,YAC2B;AAC3B,QAAO,gBAAgB,qBAAwB,QAAQ;;AAazD,IAAa,sBAAb,cAEU,UAAyC;CACjD,WAAqB,QAAQ,aAAa;CAC1C,SAAmB;AACjB,OAAK,SAAS,SAAS,KAAK;GAC1B,QAAQ,KAAK,OAAO,QAAQ;GAC5B,MAAM,KAAK,QAAQ,QAAQ,KAAK,OAAO;GACvC,MAAM,KAAK,QAAQ,QAAQ,KAAK,OAAO;GACvC,QAAQ,YAAY;AAElB,YAAO,MADW,KAAK,QAAQ,MAAM,EAC1B;;GAEb,cAAc,EAAE;GACjB,CAAC;;;AAIN,YAAY,QAAQ;;;;;;AC7DpB,MAAa,gBAGc;AACzB,UAAS,yBAAyB;AAClC,QAAO,UAAU,aAAmB;;;;ACiBtC,MAAM,YAAY,UAAyB;AAEzC,QADa,SACF,CAAC,EAAE,MAAM,OAAO,MAAM;;;;;;;;;;;;;;ACCnC,MAAa,kBAAkB,QAAQ;CACrC,MAAM;CACN,YAAY,CAAC,YAAY;CACzB,UAAU,CAAC,aAAa;CACzB,CAAC"}

package/dist/react/intro/index.js

@@ -87,26 +87,31 @@ const useAdminSlide = () => {
 * Returns undefined if auth routes are not configured.
 */
 const useAuthSlide = () => {
-	const { user } = useAuth();
+	const { user, logout } = useAuth();
 	const router = useRouter();
 	if (!router.pages.find((it) => it.name === "authLayout")) return;
-	if (user) {
-		const logoutAnchorProps = router.anchor(router.path("logout"));
-		return {
-			text: "Welcome back!",
-			sub: `You're signed in as ${user.email || user.username || "user"}.`,
-			steps: [{
-				num: "✓",
-				text: "Authentication is working correctly"
-			}, {
-				num: "→",
-				text: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("a", {
-					...logoutAnchorProps,
+	if (user) return {
+		text: "Welcome back!",
+		sub: `You're signed in as ${user.email || user.username || "user"}.`,
+		steps: [{
+			num: "✓",
+			text: "Authentication is working correctly"
+		}, {
+			num: "→",
+			text: /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("a", {
+					href: "#",
+					onClick: (e) => {
+						e.preventDefault();
+						logout();
+					},
 					children: "Sign out"
-				}), " to test the login flow"] })
-			}]
-		};
-	}
+				}),
+				" ",
+				"to test the login flow"
+			] })
+		}]
+	};
 	return {
 		text: "Who are you?",
 		sub: "Create your first account.",

package/dist/react/intro/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/react/intro/components/GettingStartedAdminSlide.tsx","../../../src/react/intro/components/GettingStartedAuthSlide.tsx","../../../src/react/intro/components/GettingStartedDevtoolsSlide.tsx","../../../src/react/intro/components/GettingStarted.tsx"],"sourcesContent":["import { useAuth } from \"alepha/react/auth\";\nimport { useRouter } from \"alepha/react/router\";\nimport type { GettingStartedSlide } from \"./GettingStarted.tsx\";\n\n/**\n * Hook that provides the admin slide content.\n * Content changes based on user status and admin permissions.\n * Returns undefined if admin routes are not configured.\n */\nexport const useAdminSlide = (): GettingStartedSlide | undefined => {\n  const { user, can } = useAuth();\n  const router = useRouter();\n\n  // Check if admin routes exist\n  const hasAdmin = router.pages.find((it) => it.name === \"adminLayout\");\n  if (!hasAdmin) {\n    return undefined;\n  }\n\n  const adminAnchorProps = router.anchor(router.path(\"adminLayout\"));\n  const canAccessAdmin = can(\"admin:*\");\n\n  // User is admin - show success message\n  if (canAccessAdmin) {\n    return {\n      text: \"You're in control.\",\n      sub: \"Admin access granted.\",\n      steps: [\n        {\n          num: \"✓\",\n          text: \"You have admin privileges\",\n        },\n        {\n          num: \"→\",\n          text: (\n            <>\n              Go to <a {...adminAnchorProps}>/admin</a> to manage your\n              application\n            </>\n          ),\n        },\n      ],\n    };\n  }\n\n  // User is logged in but not admin - show how to become admin\n  if (user) {\n    return {\n      text: \"Take the wheel.\",\n      sub: \"Become admin in two steps.\",\n      steps: [\n        {\n          num: \"1\",\n          text: (\n            <>\n              Add your email to <code>adminEmails</code> in{\" \"}\n              <code>AppSecurity.ts</code>\n            </>\n          ),\n        },\n        {\n          num: \"2\",\n          text: (\n            <>\n              Go to <a {...adminAnchorProps}>/admin</a>\n            </>\n          ),\n        },\n      ],\n    };\n  }\n\n  // User is not logged in - show full instructions\n  return {\n    text: \"Take the wheel.\",\n    sub: \"Become admin in three steps.\",\n    steps: [\n      {\n        num: \"1\",\n        text: (\n          <>\n            Add your email to <code>adminEmails</code> in{\" \"}\n            <code>AppSecurity.ts</code>\n          </>\n        ),\n      },\n      { num: \"2\", text: \"Create a user account with that email\" },\n      {\n        num: \"3\",\n        text: (\n          <>\n            Go to <a {...adminAnchorProps}>/admin</a>\n          </>\n        ),\n      },\n    ],\n  };\n};\n","import { useAuth } from \"alepha/react/auth\";\nimport { useRouter } from \"alepha/react/router\";\nimport type { GettingStartedSlide } from \"./GettingStarted.tsx\";\n\n/**\n * Hook that provides the auth slide content.\n * Content changes based on whether user is logged in.\n * Returns undefined if auth routes are not configured.\n */\nexport const useAuthSlide = (): GettingStartedSlide | undefined => {\n  const { user } = useAuth();\n  const router = useRouter();\n\n  // Check if auth routes exist\n  const hasAuth = router.pages.find((it) => it.name === \"authLayout\");\n  if (!hasAuth) {\n    return undefined;\n  }\n\n  // User is logged in - show user info and logout option\n  if (user) {\n    const logoutAnchorProps = router.anchor(router.path(\"logout\"));\n\n    return {\n      text: \"Welcome back!\",\n      sub: `You're signed in as ${user.email || user.username || \"user\"}.`,\n      steps: [\n        {\n          num: \"✓\",\n          text: \"Authentication is working correctly\",\n        },\n        {\n          num: \"→\",\n          text: (\n            <>\n              <a {...logoutAnchorProps}>Sign out</a> to test the login flow\n            </>\n          ),\n        },\n      ],\n    };\n  }\n\n  // User is not logged in - show signup instructions\n  const authAnchorProps = router.anchor(router.path(\"login\"));\n\n  return {\n    text: \"Who are you?\",\n    sub: \"Create your first account.\",\n    steps: [\n      {\n        num: \"1\",\n        text: (\n          <>\n            Sign up at <a {...authAnchorProps}>/auth/login</a>\n          </>\n        ),\n      },\n      {\n        num: \"2\",\n        text: (\n          <>\n            Customize in <code>src/api/AppSecurity.ts</code>\n          </>\n        ),\n      },\n    ],\n  };\n};\n","import type { GettingStartedSlide } from \"./GettingStarted.tsx\";\n\n/**\n * Hook that provides the devtools slide content.\n * Only shown when @alepha/devtools is installed and enabled.\n * Returns undefined if devtools are not available.\n */\nexport const useDevtoolsSlide = (): GettingStartedSlide | undefined => {\n  if (!import.meta.env?.VITE_ALEPHA_DEVTOOLS) {\n    return undefined;\n  }\n\n  return {\n    text: \"Inspect everything.\",\n    sub: \"DevTools are built in.\",\n    steps: [\n      {\n        num: \"→\",\n        text: (\n          <>\n            Open{\" \"}\n            <a href=\"/__devtools/\" target=\"_blank\" rel=\"noopener noreferrer\">\n              /__devtools\n            </a>{\" \"}\n            to explore your app\n          </>\n        ),\n      },\n      {\n        num: \"✓\",\n        text: \"Browse entities, logs, configuration and dependencies\",\n      },\n    ],\n  };\n};\n","import type { ReactNode } from \"react\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useAdminSlide } from \"./GettingStartedAdminSlide.tsx\";\nimport { useAuthSlide } from \"./GettingStartedAuthSlide.tsx\";\nimport { useDevtoolsSlide } from \"./GettingStartedDevtoolsSlide.tsx\";\n\nexport type GettingStartedStep = {\n  num: string;\n  text: ReactNode;\n};\n\nexport type GettingStartedSlide = {\n  text: string;\n  sub: string;\n  detail?: string;\n  steps?: GettingStartedStep[];\n  links?: { label: string; href: string }[];\n};\n\nexport type GettingStartedWelcome = {\n  appName: string;\n  serverTime: string;\n};\n\nexport type GettingStartedProps = {\n  /**\n   * Welcome data loaded from the server via SSR.\n   *\n   * When provided, displays app name and server timestamp on the first slide,\n   * demonstrating the full SSR → hydration data flow.\n   */\n  welcome?: GettingStartedWelcome;\n};\n\nconst defaultFirstSlide: GettingStartedSlide = {\n  text: \"Let's begin.\",\n  sub: \"Every story starts with a blank page.\",\n  detail: \"This one is yours.\",\n};\n\nconst helpSlide: GettingStartedSlide = {\n  text: \"Need help?\",\n  sub: \"We've got you covered.\",\n  detail: \"Even our AI friends can read the docs.\",\n  links: [\n    { label: \"alepha.dev\", href: \"https://alepha.dev\" },\n    { label: \"llms.txt\", href: \"https://alepha.dev/llms.txt\" },\n  ],\n};\n\nconst formatServerTime = (isoString: string): string => {\n  try {\n    const date = new Date(isoString);\n    return date.toLocaleTimeString(undefined, {\n      hour: \"2-digit\",\n      minute: \"2-digit\",\n      second: \"2-digit\",\n    });\n  } catch {\n    return isoString;\n  }\n};\n\n/**\n * A welcome component displayed when creating a new Alepha application.\n */\nconst GettingStarted = ({ welcome }: GettingStartedProps) => {\n  const [index, setIndex] = useState(0);\n  const [direction, setDirection] = useState<\"next\" | \"prev\">(\"next\");\n\n  // Get auth-aware slide content (hooks return undefined if routes don't exist)\n  const authSlide = useAuthSlide();\n  const adminSlide = useAdminSlide();\n  const devtoolsSlide = useDevtoolsSlide();\n\n  const filteredMessages = useMemo(() => {\n    const result: GettingStartedSlide[] = [];\n\n    // First slide: use welcome data if provided, otherwise default\n    if (welcome) {\n      result.push({\n        ...defaultFirstSlide,\n        detail: `Server time: ${formatServerTime(welcome.serverTime)} - App: ${welcome.appName}`,\n      });\n    } else {\n      result.push(defaultFirstSlide);\n    }\n\n    // Add auth slide if auth routes exist\n    if (authSlide) {\n      result.push(authSlide);\n    }\n\n    // Add admin slide if admin routes exist\n    if (adminSlide) {\n      result.push(adminSlide);\n    }\n\n    // Add devtools slide in non-production environments\n    if (devtoolsSlide) {\n      result.push(devtoolsSlide);\n    }\n\n    // Add \"Need help?\" message\n    result.push(helpSlide);\n\n    return result;\n  }, [welcome, authSlide, adminSlide, devtoolsSlide]);\n\n  const current = filteredMessages[index];\n\n  const prev = useCallback(() => {\n    setDirection(\"prev\");\n    setIndex(\n      (i) => (i - 1 + filteredMessages.length) % filteredMessages.length,\n    );\n  }, [filteredMessages.length]);\n\n  const next = useCallback(() => {\n    setDirection(\"next\");\n    setIndex((i) => (i + 1) % filteredMessages.length);\n  }, [filteredMessages.length]);\n\n  const goTo = useCallback(\n    (i: number) => {\n      setDirection(i > index ? \"next\" : \"prev\");\n      setIndex(i);\n    },\n    [index],\n  );\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"ArrowLeft\") {\n        prev();\n      } else if (e.key === \"ArrowRight\") {\n        next();\n      }\n    };\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [prev, next]);\n\n  return (\n    <>\n      <style>{styles}</style>\n      <main className=\"alepha-blank\">\n        <div className=\"alepha-blank-content\">\n          <div className=\"alepha-blank-text-block\">\n            <h1\n              className={`alepha-blank-message alepha-blank-slide-${direction}`}\n              key={index}\n            >\n              {current.text}\n            </h1>\n            <p\n              className={`alepha-blank-sub alepha-blank-slide-${direction}`}\n              key={`sub-${index}`}\n            >\n              {current.sub}\n            </p>\n            {current.detail && (\n              <p\n                className={`alepha-blank-detail alepha-blank-slide-${direction}`}\n                key={`detail-${index}`}\n              >\n                {current.detail}\n              </p>\n            )}\n            {current.steps && (\n              <div\n                className={`alepha-blank-steps alepha-blank-slide-${direction}`}\n                key={`steps-${index}`}\n              >\n                {current.steps.map((step, i) => (\n                  <div\n                    key={i}\n                    className=\"alepha-blank-step\"\n                    style={{ animationDelay: `${0.15 + i * 0.08}s` }}\n                  >\n                    <span className=\"alepha-blank-step-num\">{step.num}</span>\n                    <span className=\"alepha-blank-step-text\">{step.text}</span>\n                  </div>\n                ))}\n              </div>\n            )}\n            {current.links && (\n              <div\n                className={`alepha-blank-links alepha-blank-slide-${direction}`}\n                key={`links-${index}`}\n              >\n                {current.links.map((link, i) => (\n                  <a\n                    key={link.href}\n                    href={link.href}\n                    target={link.href.startsWith(\"http\") ? \"_blank\" : undefined}\n                    rel={\n                      link.href.startsWith(\"http\")\n                        ? \"noopener noreferrer\"\n                        : undefined\n                    }\n                    style={{ animationDelay: `${0.1 + i * 0.05}s` }}\n                  >\n                    {link.label}\n                  </a>\n                ))}\n              </div>\n            )}\n          </div>\n\n          <div className=\"alepha-blank-slider\">\n            <button\n              className=\"alepha-blank-nav-btn\"\n              onClick={prev}\n              aria-label=\"Previous\"\n            >\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                <path\n                  d=\"M9 3L5 7L9 11\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"1.5\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              </svg>\n            </button>\n            <div className=\"alepha-blank-dots\">\n              {filteredMessages.map((_, i) => (\n                <button\n                  key={i}\n                  className={`alepha-blank-dot ${i === index ? \"active\" : \"\"}`}\n                  onClick={() => goTo(i)}\n                  aria-label={`Go to message ${i + 1}`}\n                />\n              ))}\n            </div>\n            <button\n              className=\"alepha-blank-nav-btn\"\n              onClick={next}\n              aria-label=\"Next\"\n            >\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                <path\n                  d=\"M5 3L9 7L5 11\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"1.5\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              </svg>\n            </button>\n          </div>\n\n          <div className=\"alepha-blank-hint\">\n            <kbd>←</kbd> <kbd>→</kbd> to navigate\n          </div>\n        </div>\n      </main>\n    </>\n  );\n};\n\nexport default GettingStarted;\n\nconst styles = `\n.alepha-blank {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100svh;\n  background: #fafafa;\n  font-family: system-ui, -apple-system, sans-serif;\n  color: #171717;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  width: 100%;\n}\n\n.alepha-blank-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: 640px;\n}\n\n.alepha-blank-text-block {\n  min-height: 320px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.alepha-blank-message {\n  font-size: clamp(2rem, 8vw, 3rem);\n  font-weight: 600;\n  letter-spacing: -0.02em;\n  margin: 0;\n  line-height: 1.1;\n}\n\n.alepha-blank-sub {\n  font-size: 1.0625rem;\n  color: #525252;\n  margin: 1rem 0 0;\n  font-weight: 400;\n  line-height: 1.5;\n}\n\n.alepha-blank-detail {\n  font-size: 0.875rem;\n  color: #a3a3a3;\n  margin: 0.5rem 0 0;\n  font-weight: 400;\n  line-height: 1.5;\n}\n\n.alepha-blank-slide-next {\n  animation: alepha-blank-slideNext 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n\n.alepha-blank-slide-prev {\n  animation: alepha-blank-slidePrev 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n\n@keyframes alepha-blank-slideNext {\n  from {\n    opacity: 0;\n    transform: translateX(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes alepha-blank-slidePrev {\n  from {\n    opacity: 0;\n    transform: translateX(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n.alepha-blank-steps {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  margin-top: 1.25rem;\n  text-align: left;\n}\n\n.alepha-blank-step {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  padding: 0.25rem 0;\n  opacity: 0;\n  animation: alepha-blank-stepIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n}\n\n.alepha-blank-step-num {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #171717;\n  color: #fff;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  flex-shrink: 0;\n}\n\n.alepha-blank-step-text {\n  font-size: 0.8125rem;\n  color: #525252;\n  line-height: 1.5;\n}\n\n.alepha-blank-step-text code {\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 0.75rem;\n  background: #f5f5f5;\n  color: #171717;\n  padding: 0.0625rem 0.375rem;\n  border-radius: 3px;\n  border: 1px solid #e5e5e5;\n}\n\n.alepha-blank-step-text a {\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  color: #525252;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  transition: color 0.15s ease;\n}\n\n.alepha-blank-step-text a:hover {\n  color: #171717;\n}\n\n@keyframes alepha-blank-stepIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.alepha-blank-links {\n  display: flex;\n  gap: 1.5rem;\n  margin-top: 1.25rem;\n}\n\n.alepha-blank-links a {\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 0.875rem;\n  color: #525252;\n  text-decoration: none;\n  position: relative;\n  opacity: 0;\n  animation: alepha-blank-fadeIn 0.3s ease-out forwards;\n  transition: color 0.2s ease;\n}\n\n.alepha-blank-links a::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: -2px;\n  height: 1px;\n  background: #a3a3a3;\n  transform: scaleX(1);\n  transform-origin: left;\n  transition:\n    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),\n    background 0.2s ease;\n}\n\n.alepha-blank-links a:hover {\n  color: #171717;\n}\n\n.alepha-blank-links a:hover::after {\n  background: #171717;\n  transform: scaleX(1.05);\n}\n\n.alepha-blank-slider {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  margin-top: 2.5rem;\n}\n\n.alepha-blank-dots {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.alepha-blank-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: transparent;\n  border: 1.5px solid #d4d4d4;\n  padding: 0;\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.alepha-blank-dot:hover {\n  border-color: #a3a3a3;\n  transform: scale(1.2);\n}\n\n.alepha-blank-dot:focus-visible {\n  outline: 2px solid #737373;\n  outline-offset: 2px;\n}\n\n.alepha-blank-dot.active {\n  background: #737373;\n  border-color: #737373;\n  transform: scale(1.1);\n}\n\n.alepha-blank-nav-btn {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  font-family: inherit;\n  background: transparent;\n  color: #a3a3a3;\n  border: 1.5px solid transparent;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.alepha-blank-nav-btn:hover {\n  color: #525252;\n  background: #f0f0f0;\n}\n\n.alepha-blank-nav-btn:focus-visible {\n  outline: none;\n  border-color: #737373;\n  color: #525252;\n}\n\n.alepha-blank-nav-btn:active {\n  transform: scale(0.92);\n  background: #e5e5e5;\n}\n\n.alepha-blank-hint {\n  margin-top: 2rem;\n  font-size: 0.75rem;\n  color: #a3a3a3;\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  opacity: 0;\n  animation: alepha-blank-fadeIn 0.5s ease-out 0.5s forwards;\n}\n\n.alepha-blank-hint kbd {\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 0.6875rem;\n  background: #f0f0f0;\n  border: 1px solid #e5e5e5;\n  border-radius: 4px;\n  padding: 0.125rem 0.375rem;\n  box-shadow: 0 1px 0 #d4d4d4;\n}\n\n@keyframes alepha-blank-fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .alepha-blank-slide-next,\n  .alepha-blank-slide-prev,\n  .alepha-blank-links a,\n  .alepha-blank-hint,\n  .alepha-blank-step {\n    animation: none;\n    opacity: 1;\n  }\n\n  .alepha-blank-dot,\n  .alepha-blank-nav-btn,\n  .alepha-blank-links a,\n  .alepha-blank-links a::after {\n    transition: none;\n  }\n}\n`;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/react/intro/components/GettingStartedAdminSlide.tsx","../../../src/react/intro/components/GettingStartedAuthSlide.tsx","../../../src/react/intro/components/GettingStartedDevtoolsSlide.tsx","../../../src/react/intro/components/GettingStarted.tsx"],"sourcesContent":["import { useAuth } from \"alepha/react/auth\";\nimport { useRouter } from \"alepha/react/router\";\nimport type { GettingStartedSlide } from \"./GettingStarted.tsx\";\n\n/**\n * Hook that provides the admin slide content.\n * Content changes based on user status and admin permissions.\n * Returns undefined if admin routes are not configured.\n */\nexport const useAdminSlide = (): GettingStartedSlide | undefined => {\n  const { user, can } = useAuth();\n  const router = useRouter();\n\n  // Check if admin routes exist\n  const hasAdmin = router.pages.find((it) => it.name === \"adminLayout\");\n  if (!hasAdmin) {\n    return undefined;\n  }\n\n  const adminAnchorProps = router.anchor(router.path(\"adminLayout\"));\n  const canAccessAdmin = can(\"admin:*\");\n\n  // User is admin - show success message\n  if (canAccessAdmin) {\n    return {\n      text: \"You're in control.\",\n      sub: \"Admin access granted.\",\n      steps: [\n        {\n          num: \"✓\",\n          text: \"You have admin privileges\",\n        },\n        {\n          num: \"→\",\n          text: (\n            <>\n              Go to <a {...adminAnchorProps}>/admin</a> to manage your\n              application\n            </>\n          ),\n        },\n      ],\n    };\n  }\n\n  // User is logged in but not admin - show how to become admin\n  if (user) {\n    return {\n      text: \"Take the wheel.\",\n      sub: \"Become admin in two steps.\",\n      steps: [\n        {\n          num: \"1\",\n          text: (\n            <>\n              Add your email to <code>adminEmails</code> in{\" \"}\n              <code>AppSecurity.ts</code>\n            </>\n          ),\n        },\n        {\n          num: \"2\",\n          text: (\n            <>\n              Go to <a {...adminAnchorProps}>/admin</a>\n            </>\n          ),\n        },\n      ],\n    };\n  }\n\n  // User is not logged in - show full instructions\n  return {\n    text: \"Take the wheel.\",\n    sub: \"Become admin in three steps.\",\n    steps: [\n      {\n        num: \"1\",\n        text: (\n          <>\n            Add your email to <code>adminEmails</code> in{\" \"}\n            <code>AppSecurity.ts</code>\n          </>\n        ),\n      },\n      { num: \"2\", text: \"Create a user account with that email\" },\n      {\n        num: \"3\",\n        text: (\n          <>\n            Go to <a {...adminAnchorProps}>/admin</a>\n          </>\n        ),\n      },\n    ],\n  };\n};\n","import { useAuth } from \"alepha/react/auth\";\nimport { useRouter } from \"alepha/react/router\";\nimport type { GettingStartedSlide } from \"./GettingStarted.tsx\";\n\n/**\n * Hook that provides the auth slide content.\n * Content changes based on whether user is logged in.\n * Returns undefined if auth routes are not configured.\n */\nexport const useAuthSlide = (): GettingStartedSlide | undefined => {\n  const { user, logout } = useAuth();\n  const router = useRouter();\n\n  // Check if auth routes exist\n  const hasAuth = router.pages.find((it) => it.name === \"authLayout\");\n  if (!hasAuth) {\n    return undefined;\n  }\n\n  // User is logged in - show user info and logout option\n  if (user) {\n    return {\n      text: \"Welcome back!\",\n      sub: `You're signed in as ${user.email || user.username || \"user\"}.`,\n      steps: [\n        {\n          num: \"✓\",\n          text: \"Authentication is working correctly\",\n        },\n        {\n          num: \"→\",\n          text: (\n            <>\n              <a\n                href=\"#\"\n                onClick={(e) => {\n                  e.preventDefault();\n                  logout();\n                }}\n              >\n                Sign out\n              </a>{\" \"}\n              to test the login flow\n            </>\n          ),\n        },\n      ],\n    };\n  }\n\n  // User is not logged in - show signup instructions\n  const authAnchorProps = router.anchor(router.path(\"login\"));\n\n  return {\n    text: \"Who are you?\",\n    sub: \"Create your first account.\",\n    steps: [\n      {\n        num: \"1\",\n        text: (\n          <>\n            Sign up at <a {...authAnchorProps}>/auth/login</a>\n          </>\n        ),\n      },\n      {\n        num: \"2\",\n        text: (\n          <>\n            Customize in <code>src/api/AppSecurity.ts</code>\n          </>\n        ),\n      },\n    ],\n  };\n};\n","import type { GettingStartedSlide } from \"./GettingStarted.tsx\";\n\n/**\n * Hook that provides the devtools slide content.\n * Only shown when @alepha/devtools is installed and enabled.\n * Returns undefined if devtools are not available.\n */\nexport const useDevtoolsSlide = (): GettingStartedSlide | undefined => {\n  if (!import.meta.env?.VITE_ALEPHA_DEVTOOLS) {\n    return undefined;\n  }\n\n  return {\n    text: \"Inspect everything.\",\n    sub: \"DevTools are built in.\",\n    steps: [\n      {\n        num: \"→\",\n        text: (\n          <>\n            Open{\" \"}\n            <a href=\"/__devtools/\" target=\"_blank\" rel=\"noopener noreferrer\">\n              /__devtools\n            </a>{\" \"}\n            to explore your app\n          </>\n        ),\n      },\n      {\n        num: \"✓\",\n        text: \"Browse entities, logs, configuration and dependencies\",\n      },\n    ],\n  };\n};\n","import type { ReactNode } from \"react\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useAdminSlide } from \"./GettingStartedAdminSlide.tsx\";\nimport { useAuthSlide } from \"./GettingStartedAuthSlide.tsx\";\nimport { useDevtoolsSlide } from \"./GettingStartedDevtoolsSlide.tsx\";\n\nexport type GettingStartedStep = {\n  num: string;\n  text: ReactNode;\n};\n\nexport type GettingStartedSlide = {\n  text: string;\n  sub: string;\n  detail?: string;\n  steps?: GettingStartedStep[];\n  links?: { label: string; href: string }[];\n};\n\nexport type GettingStartedWelcome = {\n  appName: string;\n  serverTime: string;\n};\n\nexport type GettingStartedProps = {\n  /**\n   * Welcome data loaded from the server via SSR.\n   *\n   * When provided, displays app name and server timestamp on the first slide,\n   * demonstrating the full SSR → hydration data flow.\n   */\n  welcome?: GettingStartedWelcome;\n};\n\nconst defaultFirstSlide: GettingStartedSlide = {\n  text: \"Let's begin.\",\n  sub: \"Every story starts with a blank page.\",\n  detail: \"This one is yours.\",\n};\n\nconst helpSlide: GettingStartedSlide = {\n  text: \"Need help?\",\n  sub: \"We've got you covered.\",\n  detail: \"Even our AI friends can read the docs.\",\n  links: [\n    { label: \"alepha.dev\", href: \"https://alepha.dev\" },\n    { label: \"llms.txt\", href: \"https://alepha.dev/llms.txt\" },\n  ],\n};\n\nconst formatServerTime = (isoString: string): string => {\n  try {\n    const date = new Date(isoString);\n    return date.toLocaleTimeString(undefined, {\n      hour: \"2-digit\",\n      minute: \"2-digit\",\n      second: \"2-digit\",\n    });\n  } catch {\n    return isoString;\n  }\n};\n\n/**\n * A welcome component displayed when creating a new Alepha application.\n */\nconst GettingStarted = ({ welcome }: GettingStartedProps) => {\n  const [index, setIndex] = useState(0);\n  const [direction, setDirection] = useState<\"next\" | \"prev\">(\"next\");\n\n  // Get auth-aware slide content (hooks return undefined if routes don't exist)\n  const authSlide = useAuthSlide();\n  const adminSlide = useAdminSlide();\n  const devtoolsSlide = useDevtoolsSlide();\n\n  const filteredMessages = useMemo(() => {\n    const result: GettingStartedSlide[] = [];\n\n    // First slide: use welcome data if provided, otherwise default\n    if (welcome) {\n      result.push({\n        ...defaultFirstSlide,\n        detail: `Server time: ${formatServerTime(welcome.serverTime)} - App: ${welcome.appName}`,\n      });\n    } else {\n      result.push(defaultFirstSlide);\n    }\n\n    // Add auth slide if auth routes exist\n    if (authSlide) {\n      result.push(authSlide);\n    }\n\n    // Add admin slide if admin routes exist\n    if (adminSlide) {\n      result.push(adminSlide);\n    }\n\n    // Add devtools slide in non-production environments\n    if (devtoolsSlide) {\n      result.push(devtoolsSlide);\n    }\n\n    // Add \"Need help?\" message\n    result.push(helpSlide);\n\n    return result;\n  }, [welcome, authSlide, adminSlide, devtoolsSlide]);\n\n  const current = filteredMessages[index];\n\n  const prev = useCallback(() => {\n    setDirection(\"prev\");\n    setIndex(\n      (i) => (i - 1 + filteredMessages.length) % filteredMessages.length,\n    );\n  }, [filteredMessages.length]);\n\n  const next = useCallback(() => {\n    setDirection(\"next\");\n    setIndex((i) => (i + 1) % filteredMessages.length);\n  }, [filteredMessages.length]);\n\n  const goTo = useCallback(\n    (i: number) => {\n      setDirection(i > index ? \"next\" : \"prev\");\n      setIndex(i);\n    },\n    [index],\n  );\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"ArrowLeft\") {\n        prev();\n      } else if (e.key === \"ArrowRight\") {\n        next();\n      }\n    };\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [prev, next]);\n\n  return (\n    <>\n      <style>{styles}</style>\n      <main className=\"alepha-blank\">\n        <div className=\"alepha-blank-content\">\n          <div className=\"alepha-blank-text-block\">\n            <h1\n              className={`alepha-blank-message alepha-blank-slide-${direction}`}\n              key={index}\n            >\n              {current.text}\n            </h1>\n            <p\n              className={`alepha-blank-sub alepha-blank-slide-${direction}`}\n              key={`sub-${index}`}\n            >\n              {current.sub}\n            </p>\n            {current.detail && (\n              <p\n                className={`alepha-blank-detail alepha-blank-slide-${direction}`}\n                key={`detail-${index}`}\n              >\n                {current.detail}\n              </p>\n            )}\n            {current.steps && (\n              <div\n                className={`alepha-blank-steps alepha-blank-slide-${direction}`}\n                key={`steps-${index}`}\n              >\n                {current.steps.map((step, i) => (\n                  <div\n                    key={i}\n                    className=\"alepha-blank-step\"\n                    style={{ animationDelay: `${0.15 + i * 0.08}s` }}\n                  >\n                    <span className=\"alepha-blank-step-num\">{step.num}</span>\n                    <span className=\"alepha-blank-step-text\">{step.text}</span>\n                  </div>\n                ))}\n              </div>\n            )}\n            {current.links && (\n              <div\n                className={`alepha-blank-links alepha-blank-slide-${direction}`}\n                key={`links-${index}`}\n              >\n                {current.links.map((link, i) => (\n                  <a\n                    key={link.href}\n                    href={link.href}\n                    target={link.href.startsWith(\"http\") ? \"_blank\" : undefined}\n                    rel={\n                      link.href.startsWith(\"http\")\n                        ? \"noopener noreferrer\"\n                        : undefined\n                    }\n                    style={{ animationDelay: `${0.1 + i * 0.05}s` }}\n                  >\n                    {link.label}\n                  </a>\n                ))}\n              </div>\n            )}\n          </div>\n\n          <div className=\"alepha-blank-slider\">\n            <button\n              className=\"alepha-blank-nav-btn\"\n              onClick={prev}\n              aria-label=\"Previous\"\n            >\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                <path\n                  d=\"M9 3L5 7L9 11\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"1.5\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              </svg>\n            </button>\n            <div className=\"alepha-blank-dots\">\n              {filteredMessages.map((_, i) => (\n                <button\n                  key={i}\n                  className={`alepha-blank-dot ${i === index ? \"active\" : \"\"}`}\n                  onClick={() => goTo(i)}\n                  aria-label={`Go to message ${i + 1}`}\n                />\n              ))}\n            </div>\n            <button\n              className=\"alepha-blank-nav-btn\"\n              onClick={next}\n              aria-label=\"Next\"\n            >\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                <path\n                  d=\"M5 3L9 7L5 11\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"1.5\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              </svg>\n            </button>\n          </div>\n\n          <div className=\"alepha-blank-hint\">\n            <kbd>←</kbd> <kbd>→</kbd> to navigate\n          </div>\n        </div>\n      </main>\n    </>\n  );\n};\n\nexport default GettingStarted;\n\nconst styles = `\n.alepha-blank {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100svh;\n  background: #fafafa;\n  font-family: system-ui, -apple-system, sans-serif;\n  color: #171717;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  width: 100%;\n}\n\n.alepha-blank-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: 640px;\n}\n\n.alepha-blank-text-block {\n  min-height: 320px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.alepha-blank-message {\n  font-size: clamp(2rem, 8vw, 3rem);\n  font-weight: 600;\n  letter-spacing: -0.02em;\n  margin: 0;\n  line-height: 1.1;\n}\n\n.alepha-blank-sub {\n  font-size: 1.0625rem;\n  color: #525252;\n  margin: 1rem 0 0;\n  font-weight: 400;\n  line-height: 1.5;\n}\n\n.alepha-blank-detail {\n  font-size: 0.875rem;\n  color: #a3a3a3;\n  margin: 0.5rem 0 0;\n  font-weight: 400;\n  line-height: 1.5;\n}\n\n.alepha-blank-slide-next {\n  animation: alepha-blank-slideNext 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n\n.alepha-blank-slide-prev {\n  animation: alepha-blank-slidePrev 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n\n@keyframes alepha-blank-slideNext {\n  from {\n    opacity: 0;\n    transform: translateX(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes alepha-blank-slidePrev {\n  from {\n    opacity: 0;\n    transform: translateX(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n.alepha-blank-steps {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  margin-top: 1.25rem;\n  text-align: left;\n}\n\n.alepha-blank-step {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  padding: 0.25rem 0;\n  opacity: 0;\n  animation: alepha-blank-stepIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n}\n\n.alepha-blank-step-num {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #171717;\n  color: #fff;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  flex-shrink: 0;\n}\n\n.alepha-blank-step-text {\n  font-size: 0.8125rem;\n  color: #525252;\n  line-height: 1.5;\n}\n\n.alepha-blank-step-text code {\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 0.75rem;\n  background: #f5f5f5;\n  color: #171717;\n  padding: 0.0625rem 0.375rem;\n  border-radius: 3px;\n  border: 1px solid #e5e5e5;\n}\n\n.alepha-blank-step-text a {\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  color: #525252;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  transition: color 0.15s ease;\n}\n\n.alepha-blank-step-text a:hover {\n  color: #171717;\n}\n\n@keyframes alepha-blank-stepIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.alepha-blank-links {\n  display: flex;\n  gap: 1.5rem;\n  margin-top: 1.25rem;\n}\n\n.alepha-blank-links a {\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 0.875rem;\n  color: #525252;\n  text-decoration: none;\n  position: relative;\n  opacity: 0;\n  animation: alepha-blank-fadeIn 0.3s ease-out forwards;\n  transition: color 0.2s ease;\n}\n\n.alepha-blank-links a::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: -2px;\n  height: 1px;\n  background: #a3a3a3;\n  transform: scaleX(1);\n  transform-origin: left;\n  transition:\n    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),\n    background 0.2s ease;\n}\n\n.alepha-blank-links a:hover {\n  color: #171717;\n}\n\n.alepha-blank-links a:hover::after {\n  background: #171717;\n  transform: scaleX(1.05);\n}\n\n.alepha-blank-slider {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  margin-top: 2.5rem;\n}\n\n.alepha-blank-dots {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.alepha-blank-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: transparent;\n  border: 1.5px solid #d4d4d4;\n  padding: 0;\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.alepha-blank-dot:hover {\n  border-color: #a3a3a3;\n  transform: scale(1.2);\n}\n\n.alepha-blank-dot:focus-visible {\n  outline: 2px solid #737373;\n  outline-offset: 2px;\n}\n\n.alepha-blank-dot.active {\n  background: #737373;\n  border-color: #737373;\n  transform: scale(1.1);\n}\n\n.alepha-blank-nav-btn {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  font-family: inherit;\n  background: transparent;\n  color: #a3a3a3;\n  border: 1.5px solid transparent;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.alepha-blank-nav-btn:hover {\n  color: #525252;\n  background: #f0f0f0;\n}\n\n.alepha-blank-nav-btn:focus-visible {\n  outline: none;\n  border-color: #737373;\n  color: #525252;\n}\n\n.alepha-blank-nav-btn:active {\n  transform: scale(0.92);\n  background: #e5e5e5;\n}\n\n.alepha-blank-hint {\n  margin-top: 2rem;\n  font-size: 0.75rem;\n  color: #a3a3a3;\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  opacity: 0;\n  animation: alepha-blank-fadeIn 0.5s ease-out 0.5s forwards;\n}\n\n.alepha-blank-hint kbd {\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 0.6875rem;\n  background: #f0f0f0;\n  border: 1px solid #e5e5e5;\n  border-radius: 4px;\n  padding: 0.125rem 0.375rem;\n  box-shadow: 0 1px 0 #d4d4d4;\n}\n\n@keyframes alepha-blank-fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .alepha-blank-slide-next,\n  .alepha-blank-slide-prev,\n  .alepha-blank-links a,\n  .alepha-blank-hint,\n  .alepha-blank-step {\n    animation: none;\n    opacity: 1;\n  }\n\n  .alepha-blank-dot,\n  .alepha-blank-nav-btn,\n  .alepha-blank-links a,\n  .alepha-blank-links a::after {\n    transition: none;\n  }\n}\n`;\n"],"mappings":"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"}

package/dist/react/router/index.browser.js

@@ -63,16 +63,6 @@ var ReactPageService = class {
 * - Hierarchical error handling (child → parent)
 * - HTTP status code handling (404, 401, etc.)
 *
-* **Page Animations**
-* - CSS-based enter/exit animations
-* - Dynamic animations based on page state
-* - Custom timing and easing functions
-*
-* **Lifecycle Management**
-* - Server response hooks for headers and status codes
-* - Page leave handlers for cleanup (browser only)
-* - Permission-based access control
-*
 * @example Simple page with data fetching
 * ```typescript
 * const userProfile = $page({
@@ -721,7 +711,19 @@ const reactPageOptions = $atom({
 	name: "alepha.react.page.options",
 	description: "Configuration options for the React page provider.",
 	schema: t.object({
+		/**
+		* Enable React StrictMode wrapper.
+		*/
 		strictMode: t.boolean({ default: true }),
+		/**
+		* RegExp pattern (as string) to detect file-like URLs (e.g. /hello.txt, /wp-login.php).
+		* When a request hits the catch-all wildcard route and matches this pattern,
+		* SSR is skipped and a plain 404 response is returned instead.
+		*
+		* Set to empty string to disable this behavior.
+		*
+		* @default "\\.[a-zA-Z0-9]{1,10}$"
+		*/
 		staticFilePattern: t.string()
 	}),
 	default: {
@@ -1195,8 +1197,23 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 */
 const reactBrowserOptions = $atom({
 	name: "alepha.react.browser.options",
-	schema: t.object({ scrollRestoration: t.enum(["top", "manual"]) }),
-	default: { scrollRestoration: "top" }
+	schema: t.object({
+		scrollRestoration: t.enum(["top", "manual"]),
+		/**
+		* Intercept clicks on plain `<a href="/...">` anchors and route them
+		* through the SPA router, so authors don't need `<Link>` everywhere
+		* (notably for SSR/Markdown HTML rendered as raw markup).
+		*
+		* Skips: modifier keys, non-primary mouse buttons, `target` other than
+		* `_self`, `download`, `data-no-router`, non-http(s) schemes, hash-only
+		* hrefs, external origins, and clicks already `defaultPrevented`.
+		*/
+		interceptAnchorClicks: t.boolean({ default: true })
+	}),
+	default: {
+		scrollRestoration: "top",
+		interceptAnchorClicks: true
+	}
 });
 var ReactBrowserProvider = class {
 	log = $logger();
@@ -1371,8 +1388,57 @@ var ReactBrowserProvider = class {
 				this.log.debug("Popstate event triggered - rendering new state", { url: this.location.pathname + this.location.search });
 				this.render();
 			});
+			this.attachAnchorInterceptor();
 		}
 	});
+	/**
+	* Attach a delegated click listener that routes plain `<a href="/...">`
+	* clicks through the SPA router. Returns a detach function (used in tests).
+	*
+	* Bails out on modifier keys, non-primary mouse buttons, `target`, `download`,
+	* `data-no-router`, hash-only/external/non-http hrefs, and already-prevented
+	* events. Honors the runtime `interceptAnchorClicks` flag.
+	*/
+	attachAnchorInterceptor() {
+		const onClick = (ev) => {
+			if (!this.options.interceptAnchorClicks) return;
+			if (ev.defaultPrevented) return;
+			if (ev.button !== 0) return;
+			if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey) return;
+			const a = ev.target?.closest?.("a");
+			if (!a) return;
+			if (a.hasAttribute("download")) return;
+			if (a.hasAttribute("data-no-router")) return;
+			const target = a.getAttribute("target");
+			if (target && target !== "_self") return;
+			const href = a.getAttribute("href");
+			if (!href) return;
+			if (href.startsWith("#")) return;
+			if (/^[a-z][a-z0-9+.-]*:/i.test(href)) {
+				let url;
+				try {
+					url = new URL(href);
+				} catch {
+					return;
+				}
+				if (url.origin !== this.location.origin) return;
+				ev.preventDefault();
+				const path = url.pathname + url.search + url.hash;
+				this.push(this.stripBase(path)).catch((e) => this.log.error(e));
+				return;
+			}
+			ev.preventDefault();
+			const url = new URL(href, this.location.href);
+			const path = url.pathname + url.search + url.hash;
+			this.push(this.stripBase(path)).catch((e) => this.log.error(e));
+		};
+		this.document.addEventListener("click", onClick);
+		return () => this.document.removeEventListener("click", onClick);
+	}
+	stripBase(path) {
+		if (this.base && path.startsWith(this.base)) return path.slice(this.base.length) || "/";
+		return path;
+	}
 };
 //#endregion
 //#region ../../src/react/router/providers/ReactBrowserRendererProvider.ts