alepha 0.22.0 → 0.24.0

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, has } = 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 = has(\"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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"}
+{"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, has } = 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 = has(\"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

@@ -1,4 +1,4 @@
-import { $atom, $hook, $inject, $module, $state, Alepha, AlephaError, KIND, OPTIONS, PipelineHandler, Primitive, createPrimitive, t } from "alepha";
+import { $atom, $hook, $inject, $module, $state, Alepha, AlephaError, KIND, OPTIONS, PipelineHandler, Primitive, SchemaValidator, coerceObject, createPrimitive, z } from "alepha";
 import { AlephaDateTime, DateTimeProvider } from "alepha/datetime";
 import { AlephaContext, AlephaReact, ClientOnly, ErrorBoundary, useAlepha, useEvents, useInject, useStore } from "alepha/react";
 import { AlephaReactHead, BrowserHeadProvider } from "alepha/react/head";
@@ -69,8 +69,8 @@ var ReactPageService = class {
 * const userProfile = $page({
 *   path: "/users/:id",
 *   schema: {
-*     params: t.object({ id: t.integer() }),
-*     query: t.object({ tab: t.optional(t.text()) })
+*     params: z.object({ id: z.integer() }),
+*     query: z.object({ tab: z.text().optional() })
 *   },
 *   loader: async ({ params }) => {
 *     const user = await userApi.getUser(params.id);
@@ -617,7 +617,7 @@ const NestedView = (props) => {
 	const onError = routerLayer?.onError;
 	const state = useRouterState();
 	const alepha = useAlepha();
-	const [boundaryKey, setBoundaryKey] = useState(0);
+	const boundaryResetKeys = [state.url.pathname];
 	const [view, setView] = useState(state.layers[index]?.element);
 	const [animation, setAnimation] = useState("");
 	const animationExitDuration = useRef(0);
@@ -677,8 +677,9 @@ const NestedView = (props) => {
 	if (props.errorBoundary === false) return /* @__PURE__ */ jsx(Fragment, { children: element });
 	if (props.errorBoundary) return /* @__PURE__ */ jsx(ErrorBoundary, {
 		fallback: props.errorBoundary,
+		resetKeys: boundaryResetKeys,
 		children: element
-	}, boundaryKey);
+	});
 	const fallback = (error) => {
 		const result = onError?.(error, state) ?? /* @__PURE__ */ jsx(ErrorViewer, {
 			error,
@@ -689,8 +690,9 @@ const NestedView = (props) => {
 	};
 	return /* @__PURE__ */ jsx(ErrorBoundary, {
 		fallback,
+		resetKeys: boundaryResetKeys,
 		children: element
-	}, boundaryKey);
+	});
 };
 var NestedView_default = memo(NestedView);
 function parseAnimation(animationLike, state, type = "enter") {
@@ -719,15 +721,126 @@ function parseAnimation(animationLike, state, type = "enter") {
 	}
 }
 //#endregion
+//#region ../../src/react/router/providers/RootComponentsProvider.ts
+/**
+* Extension point letting any module contribute root-level React nodes that
+* render on every page (siblings of the page view, inside AlephaContext).
+*
+* A module pushes into `rootComponents` from its `register` hook; the array
+* is rendered by `ReactPageProvider.root()`. SSR-safe (same element feeds
+* server render + client hydrate).
+*/
+var RootComponentsProvider = class {
+	rootComponents = [];
+};
+//#endregion
+//#region ../../src/react/router/providers/RouterLocaleProvider.ts
+/**
+* Generic locale path-prefix mechanism for the router.
+*
+* This provider knows nothing about i18n — it only deals with URL path
+* segments. It is configured by the i18n module (`I18nProvider`) when
+* `routing: "prefix"` is enabled, which keeps the dependency one-directional
+* (`i18n → router`) and avoids a module cycle.
+*
+* The default locale is served WITHOUT a prefix (`/about` = default,
+* `/fr/about` = French). The active locale is derived from the current
+* request/navigation and stored under `alepha.react.router.locale`, so every
+* URL the router builds (`pathname()`) automatically carries the right prefix.
+*/
+var RouterLocaleProvider = class {
+	alepha = $inject(Alepha);
+	/**
+	* Whether locale path-prefixing is active. Off by default — opt-in via the
+	* i18n module.
+	*/
+	enabled = false;
+	/**
+	* The default locale, served without a path prefix (e.g. `"en"` → `/about`).
+	*/
+	defaultLocale = "";
+	/**
+	* All known locales, including the default one.
+	*/
+	locales = [];
+	/**
+	* Configure the provider. Called by the i18n module before the SSR routes
+	* are registered.
+	*/
+	configure(options) {
+		if (options.enabled !== void 0) this.enabled = options.enabled;
+		if (options.defaultLocale !== void 0) this.defaultLocale = options.defaultLocale;
+		if (options.locales !== void 0) this.locales = options.locales;
+	}
+	/**
+	* Locales that carry a URL prefix — every known locale except the default.
+	*/
+	get prefixedLocales() {
+		return this.locales.filter((locale) => locale !== this.defaultLocale);
+	}
+	/**
+	* Splits a leading locale segment off a pathname.
+	*
+	* - `/fr/about` → `{ locale: "fr", pathname: "/about" }` when `fr` is a
+	*   prefixed locale.
+	* - `/about` → `{ locale: defaultLocale, pathname: "/about" }`.
+	*
+	* When prefixing is disabled the pathname is returned untouched.
+	*/
+	detect(pathname) {
+		if (this.enabled) {
+			const first = pathname.split("/")[1];
+			if (first && this.prefixedLocales.includes(first)) {
+				const rest = pathname.slice(first.length + 1);
+				return {
+					locale: first,
+					pathname: this.normalize(rest)
+				};
+			}
+		}
+		return {
+			locale: this.defaultLocale,
+			pathname
+		};
+	}
+	/**
+	* Prepends the locale prefix to a pathname when needed. The default locale
+	* (and any unknown/disabled case) returns the pathname unchanged.
+	*/
+	withPrefix(pathname, locale = this.current) {
+		if (!this.enabled || !locale || locale === this.defaultLocale || !this.prefixedLocales.includes(locale)) return pathname;
+		return `/${locale}${pathname === "/" ? "" : pathname}`;
+	}
+	/**
+	* The active locale, derived from the current request/navigation. Falls back
+	* to the default locale when nothing has been detected.
+	*/
+	get current() {
+		return this.alepha.store.get("alepha.react.router.locale") || this.defaultLocale;
+	}
+	set current(locale) {
+		this.alepha.store.set("alepha.react.router.locale", locale);
+	}
+	/**
+	* Normalizes a stripped pathname so it always starts with a single slash and
+	* carries no trailing slash (except the root `/`).
+	*/
+	normalize(pathname) {
+		if (!pathname || pathname === "/") return "/";
+		const withLeading = pathname.startsWith("/") ? pathname : `/${pathname}`;
+		return withLeading.length > 1 && withLeading.endsWith("/") ? withLeading.slice(0, -1) : withLeading;
+	}
+};
+//#endregion
 //#region ../../src/react/router/providers/ReactPageProvider.ts
 const reactPageOptions = $atom({
 	name: "alepha.react.page.options",
 	description: "Configuration options for the React page provider.",
-	schema: t.object({
+	schema: z.object({
 		/**
 		* Enable React StrictMode wrapper.
 		*/
-		strictMode: t.boolean({ default: true }),
+		strictMode: z.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,
@@ -737,7 +850,7 @@ const reactPageOptions = $atom({
 		*
 		* @default "\\.[a-zA-Z0-9]{1,10}$"
 		*/
-		staticFilePattern: t.string()
+		staticFilePattern: z.string()
 	}),
 	default: {
 		strictMode: true,
@@ -752,6 +865,8 @@ var ReactPageProvider = class {
 	log = $logger();
 	options = $state(reactPageOptions);
 	alepha = $inject(Alepha);
+	rootComponentsProvider = $inject(RootComponentsProvider);
+	localeProvider = $inject(RouterLocaleProvider);
 	pages = [];
 	nextIdCursor = 0;
 	configure = $hook({
@@ -834,24 +949,27 @@ var ReactPageProvider = class {
 			parent = parent.parent;
 		}
 		url = this.compile(url, options.params ?? {});
+		url = url.replace(/\/\/+/g, "/") || "/";
+		url = this.localeProvider.withPrefix(url);
 		if (options.query) {
 			const query = new URLSearchParams(options.query);
 			if (query.toString()) url += `?${query.toString()}`;
 		}
-		return url.replace(/\/\/+/g, "/") || "/";
+		return url;
 	}
 	url(name, options = {}) {
 		return new URL(this.pathname(name, options), options.host ?? `http://localhost`);
 	}
 	root(state) {
-		const root = createElement(AlephaContext.Provider, { value: this.alepha }, createElement(NestedView_default, {}, state.layers[0]?.element));
+		const root = createElement(AlephaContext.Provider, { value: this.alepha }, createElement(NestedView_default, {}, state.layers[0]?.element), ...this.rootComponentsProvider.rootComponents);
 		if (this.options.strictMode) return createElement(StrictMode, {}, root);
 		return root;
 	}
 	convertStringObjectToObject = (schema, value) => {
-		if (t.schema.isObject(schema) && typeof value === "object") {
-			for (const key in schema.properties) if (t.schema.isObject(schema.properties[key]) && typeof value[key] === "string") try {
-				value[key] = this.alepha.codec.decode(schema.properties[key], decodeURIComponent(value[key]));
+		if (z.schema.isObject(schema) && typeof value === "object") for (const key in schema.properties) {
+			const propSchema = z.schema.unwrap(schema.properties[key]);
+			if (z.schema.isObject(propSchema) && typeof value[key] === "string") try {
+				value[key] = this.alepha.codec.decode(propSchema, decodeURIComponent(value[key]));
 			} catch (e) {}
 		}
 		return value;
@@ -876,13 +994,13 @@ var ReactPageProvider = class {
 			const config = {};
 			try {
 				this.convertStringObjectToObject(route.schema?.query, state.query);
-				config.query = route.schema?.query ? this.alepha.codec.decode(route.schema.query, state.query) : {};
+				config.query = route.schema?.query ? this.alepha.codec.decode(route.schema.query, coerceObject(route.schema.query, state.query)) : {};
 			} catch (e) {
 				it.error = e instanceof Error ? e : new Error(String(e));
 				break;
 			}
 			try {
-				config.params = route.schema?.params ? this.alepha.codec.decode(route.schema.params, state.params) : {};
+				config.params = route.schema?.params ? this.alepha.codec.decode(route.schema.params, coerceObject(route.schema.params, state.params)) : {};
 			} catch (e) {
 				it.error = e instanceof Error ? e : new Error(String(e));
 				break;
@@ -1162,6 +1280,7 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 	alepha = $inject(Alepha);
 	pageApi = $inject(ReactPageProvider);
 	browserHeadProvider = $inject(BrowserHeadProvider);
+	localeProvider = $inject(RouterLocaleProvider);
 	add(entry) {
 		this.pageApi.add(entry);
 	}
@@ -1190,7 +1309,13 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 			state
 		});
 		try {
-			const { route, params } = this.match(pathname);
+			let matchPathname = pathname;
+			if (this.localeProvider.enabled) {
+				const detected = this.localeProvider.detect(pathname);
+				this.localeProvider.current = detected.locale;
+				matchPathname = detected.pathname;
+			}
+			const { route, params } = this.match(matchPathname);
 			const query = {};
 			if (search) for (const [key, value] of new URLSearchParams(search).entries()) query[key] = String(value);
 			state.name = route?.page.name;
@@ -1257,8 +1382,8 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 */
 const reactBrowserOptions = $atom({
 	name: "alepha.react.browser.options",
-	schema: t.object({
-		scrollRestoration: t.enum(["top", "manual"]),
+	schema: z.object({
+		scrollRestoration: z.enum(["top", "manual"]),
 		/**
 		* Intercept clicks on plain `<a href="/...">` anchors and route them
 		* through the SPA router, so authors don't need `<Link>` everywhere
@@ -1268,7 +1393,7 @@ const reactBrowserOptions = $atom({
 		* `_self`, `download`, `data-no-router`, non-http(s) schemes, hash-only
 		* hrefs, external origins, and clicks already `defaultPrevented`.
 		*/
-		interceptAnchorClicks: t.boolean({ default: true })
+		interceptAnchorClicks: z.boolean().default(true)
 	}),
 	default: {
 		scrollRestoration: "top",
@@ -1282,6 +1407,7 @@ var ReactBrowserProvider = class {
 	router = $inject(ReactBrowserRouterProvider);
 	dateTimeProvider = $inject(DateTimeProvider);
 	browserHeadProvider = $inject(BrowserHeadProvider);
+	validator = $inject(SchemaValidator);
 	options = $state(reactBrowserOptions);
 	get rootId() {
 		return "root";
@@ -1332,7 +1458,7 @@ var ReactBrowserProvider = class {
 		return base;
 	}
 	get url() {
-		const url = this.location.pathname + this.location.search;
+		const url = this.location.pathname + this.location.search + this.location.hash;
 		if (this.base) return url.replace(this.base, "");
 		return url;
 	}
@@ -1376,8 +1502,9 @@ var ReactBrowserProvider = class {
 			transitionId: myTransitionId
 		});
 		if (myTransitionId !== this.transitionId) return;
-		if (this.state.url.pathname + this.state.url.search !== url) {
-			this.pushState(this.state.url.pathname + this.state.url.search);
+		const committed = this.state.url.pathname + this.state.url.search + this.state.url.hash;
+		if (committed !== url) {
+			this.pushState(committed);
 			return;
 		}
 		this.pushState(url, options.replace);
@@ -1421,6 +1548,39 @@ var ReactBrowserProvider = class {
 			console.error(error);
 		}
 	}
+	/**
+	* Apply the SSR hydration payload (the `#__ssr` script tag) to the atom
+	* store.
+	*
+	* Every key except `alepha.react.router.layers` is treated as an atom
+	* value. A registered atom's value is explicitly schema-validated: an
+	* invalid value is dropped (warn + keep the atom's default) instead of
+	* being trusted, so a tampered payload can't smuggle bad data into a
+	* validated atom. Atoms not registered yet fall through to
+	* `Alepha.set()`, which lets `StateManager.register()` decode them
+	* against the schema the moment they first get used.
+	*
+	* `alepha.react.router.layers` is deliberately skipped by this loop: it
+	* carries render instructions (`part`, `name`, `config`, `props`,
+	* `error`), not atom values. Those are NOT hardened here and are trusted
+	* as-is from the SSR payload — a tampered payload can still influence
+	* rendering through this key. Validating router layers is separate,
+	* future work; this method only guarantees atom values.
+	*/
+	applyHydration(hydration) {
+		for (const [key, value] of Object.entries(hydration)) {
+			if (key === "alepha.react.router.layers") continue;
+			const atom = this.alepha.store.getAtom(key);
+			if (atom) {
+				const result = this.validator.safeValidate(atom.schema, value);
+				if (!result.success) {
+					this.log.warn(`Hydrated value for atom "${key}" failed schema validation, keeping default`);
+					continue;
+				}
+				this.alepha.store.set(key, result.data, { skipValidation: true });
+			} else this.alepha.set(key, value);
+		}
+	}
 	onTransitionEnd = $hook({
 		on: "react:transition:end",
 		handler: () => {
@@ -1435,9 +1595,7 @@ var ReactBrowserProvider = class {
 		handler: async () => {
 			const hydration = this.getHydrationState();
 			const previous = hydration?.["alepha.react.router.layers"] ?? [];
-			if (hydration) {
-				for (const [key, value] of Object.entries(hydration)) if (key !== "alepha.react.router.layers") this.alepha.set(key, value);
-			}
+			if (hydration) this.applyHydration(hydration);
 			await this.render({ previous });
 			const element = this.router.root(this.state);
 			await this.alepha.events.emit("react:browser:render", {
@@ -1745,7 +1903,7 @@ const useActive = (args) => {
 *
 * @example
 * const [params, setParams] = useQueryParams(
-*   t.object({ tab: t.optional(t.string()) }),
+*   z.object({ tab: z.string().optional() }),
 *   { format: "querystring" },
 * );
 * // params.tab reads from `?tab=…`; setParams({ tab: "security" }) writes it.
@@ -1822,11 +1980,12 @@ const AlephaReactRouter = $module({
 		ReactBrowserProvider,
 		ReactRouter,
 		ReactBrowserRendererProvider,
+		RouterLocaleProvider,
 		ReactPageService
 	],
-	register: (alepha) => alepha.with(AlephaReact).with(AlephaReactHead).with(AlephaDateTime).with(AlephaServer).with(AlephaServerLinks).with(ReactPageProvider).with(ReactBrowserProvider).with(ReactBrowserRouterProvider).with(ReactBrowserRendererProvider).with(ReactRouter)
+	register: (alepha) => alepha.with(AlephaReact).with(AlephaReactHead).with(AlephaDateTime).with(AlephaServer).with(AlephaServerLinks).with(ReactPageProvider).with(ReactBrowserProvider).with(ReactBrowserRouterProvider).with(ReactBrowserRendererProvider).with(RouterLocaleProvider).with(ReactRouter)
 });
 //#endregion
-export { $page, AlephaReactRouter, ErrorViewer, Link, NestedView_default as NestedView, NotFound, PAGE_PRELOAD_KEY, PagePrimitive, ReactBrowserProvider, ReactBrowserRendererProvider, ReactBrowserRouterProvider, ReactPageProvider, ReactPageService, ReactRouter, Redirection, RouterLayerContext, isPageRoute, reactBrowserOptions, reactPageOptions, useActive, useQueryParams, useRouter, useRouterState };
+export { $page, AlephaReactRouter, ErrorViewer, Link, NestedView_default as NestedView, NotFound, PAGE_PRELOAD_KEY, PagePrimitive, ReactBrowserProvider, ReactBrowserRendererProvider, ReactBrowserRouterProvider, ReactPageProvider, ReactPageService, ReactRouter, Redirection, RootComponentsProvider, RouterLayerContext, RouterLocaleProvider, isPageRoute, reactBrowserOptions, reactPageOptions, useActive, useQueryParams, useRouter, useRouterState };
 
 //# sourceMappingURL=index.browser.js.map