alepha 0.15.4 → 0.15.5

package/dist/react/intro/index.css

@@ -0,0 +1,337 @@
+.alepha-blank {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100svh;
+  background: #fafafa;
+  font-family: system-ui, -apple-system, sans-serif;
+  color: #171717;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+}
+
+.alepha-blank-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  max-width: 640px;
+}
+
+.alepha-blank-text-block {
+  min-height: 320px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Message */
+
+.alepha-blank-message {
+  font-size: clamp(2rem, 8vw, 3rem);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  margin: 0;
+  line-height: 1.1;
+}
+
+.alepha-blank-sub {
+  font-size: 1.0625rem;
+  color: #525252;
+  margin: 1rem 0 0;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.alepha-blank-detail {
+  font-size: 0.875rem;
+  color: #a3a3a3;
+  margin: 0.5rem 0 0;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+/* Slide Animations */
+
+.alepha-blank-slide-next {
+  animation: alepha-blank-slideNext 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.alepha-blank-slide-prev {
+  animation: alepha-blank-slidePrev 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes alepha-blank-slideNext {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes alepha-blank-slidePrev {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Steps */
+
+.alepha-blank-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 1.25rem;
+  text-align: left;
+}
+
+.alepha-blank-step {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.25rem 0;
+  opacity: 0;
+  animation: alepha-blank-stepIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+.alepha-blank-step-num {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #171717;
+  color: #fff;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.alepha-blank-step-text {
+  font-size: 0.8125rem;
+  color: #525252;
+  line-height: 1.5;
+}
+
+.alepha-blank-step-text code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.75rem;
+  background: #f5f5f5;
+  color: #171717;
+  padding: 0.0625rem 0.375rem;
+  border-radius: 3px;
+  border: 1px solid #e5e5e5;
+}
+
+.alepha-blank-step-text a {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: #525252;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: color 0.15s ease;
+}
+
+.alepha-blank-step-text a:hover {
+  color: #171717;
+}
+
+@keyframes alepha-blank-stepIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Links */
+
+.alepha-blank-links {
+  display: flex;
+  gap: 1.5rem;
+  margin-top: 1.25rem;
+}
+
+.alepha-blank-links a {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.875rem;
+  color: #525252;
+  text-decoration: none;
+  position: relative;
+  opacity: 0;
+  animation: alepha-blank-fadeIn 0.3s ease-out forwards;
+  transition: color 0.2s ease;
+}
+
+.alepha-blank-links a::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -2px;
+  height: 1px;
+  background: #a3a3a3;
+  transform: scaleX(1);
+  transform-origin: left;
+  transition:
+    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
+    background 0.2s ease;
+}
+
+.alepha-blank-links a:hover {
+  color: #171717;
+}
+
+.alepha-blank-links a:hover::after {
+  background: #171717;
+  transform: scaleX(1.05);
+}
+
+/* Slider */
+
+.alepha-blank-slider {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 2.5rem;
+}
+
+.alepha-blank-dots {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.alepha-blank-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: transparent;
+  border: 1.5px solid #d4d4d4;
+  padding: 0;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.alepha-blank-dot:hover {
+  border-color: #a3a3a3;
+  transform: scale(1.2);
+}
+
+.alepha-blank-dot:focus-visible {
+  outline: 2px solid #737373;
+  outline-offset: 2px;
+}
+
+.alepha-blank-dot.active {
+  background: #737373;
+  border-color: #737373;
+  transform: scale(1.1);
+}
+
+/* Nav Buttons */
+
+.alepha-blank-nav-btn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-family: inherit;
+  background: transparent;
+  color: #a3a3a3;
+  border: 1.5px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.alepha-blank-nav-btn:hover {
+  color: #525252;
+  background: #f0f0f0;
+}
+
+.alepha-blank-nav-btn:focus-visible {
+  outline: none;
+  border-color: #737373;
+  color: #525252;
+}
+
+.alepha-blank-nav-btn:active {
+  transform: scale(0.92);
+  background: #e5e5e5;
+}
+
+/* Hint */
+
+.alepha-blank-hint {
+  margin-top: 2rem;
+  font-size: 0.75rem;
+  color: #a3a3a3;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  opacity: 0;
+  animation: alepha-blank-fadeIn 0.5s ease-out 0.5s forwards;
+}
+
+.alepha-blank-hint kbd {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.6875rem;
+  background: #f0f0f0;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  padding: 0.125rem 0.375rem;
+  box-shadow: 0 1px 0 #d4d4d4;
+}
+
+/* Fade In Animation */
+
+@keyframes alepha-blank-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Respect reduced motion */
+
+@media (prefers-reduced-motion: reduce) {
+  .alepha-blank-slide-next,
+  .alepha-blank-slide-prev,
+  .alepha-blank-links a,
+  .alepha-blank-hint,
+  .alepha-blank-step {
+    animation: none;
+    opacity: 1;
+  }
+
+  .alepha-blank-dot,
+  .alepha-blank-nav-btn,
+  .alepha-blank-links a,
+  .alepha-blank-links a::after {
+    transition: none;
+  }
+}
+
+
+/*# sourceMappingURL=index.css.map*/

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.css","names":[],"sources":["../../../../../src/react/intro/components/GettingStarted.css"],"sourcesContent":[".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/* Message */\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/* Slide Animations */\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/* Steps */\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/* Links */\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/* Slider */\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/* Nav Buttons */\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/* Hint */\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/* Fade In Animation */\n\n@keyframes alepha-blank-fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Respect reduced motion */\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"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/react/intro/index.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region ../../src/react/intro/components/GettingStarted.d.ts
+/**
+ * A welcome component displayed when creating a new Alepha application.
+ */
+declare const GettingStarted: () => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { GettingStarted };
+//# sourceMappingURL=index.d.ts.map

package/dist/react/intro/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/react/intro/components/GettingStarted.tsx"],"mappings":";;;;;AAC8B;cAqCxB,cAAA,QAAc,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/react/intro/index.js

@@ -0,0 +1,222 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useRouter } from "alepha/react/router";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../../src/react/intro/components/GettingStarted.tsx
+const messages = [{
+	text: "Let's begin.",
+	sub: "Every story starts with a blank page.",
+	detail: "This one is yours."
+}, {
+	text: "Need help?",
+	sub: "We've got you covered.",
+	detail: "Even our AI friends can read the docs.",
+	links: [{
+		label: "alepha.dev",
+		href: "https://alepha.dev"
+	}, {
+		label: "llms.txt",
+		href: "https://alepha.dev/llms.txt"
+	}]
+}];
+/**
+* A welcome component displayed when creating a new Alepha application.
+*/
+const GettingStarted = () => {
+	const [index, setIndex] = useState(0);
+	const [direction, setDirection] = useState("next");
+	const router = useRouter();
+	const hasAdmin = router.pages.find((it) => it.name === "adminLayout");
+	const hasAuth = router.pages.find((it) => it.name === "authLayout");
+	const adminAnchorProps = hasAdmin ? router.anchor(router.path("adminLayout")) : void 0;
+	const authAnchorProps = hasAuth ? router.anchor(router.path("login")) : void 0;
+	const filteredMessages = useMemo(() => {
+		const result = [];
+		for (const msg of messages) {
+			if (msg.text === "Need help?") break;
+			result.push(msg);
+		}
+		if (hasAuth && authAnchorProps) result.push({
+			text: "Who are you?",
+			sub: "Create your first account.",
+			steps: [{
+				num: "1",
+				text: /* @__PURE__ */ jsxs(Fragment, { children: ["Sign up at ", /* @__PURE__ */ jsx("a", {
+					...authAnchorProps,
+					children: "/auth/login"
+				})] })
+			}, {
+				num: "2",
+				text: /* @__PURE__ */ jsxs(Fragment, { children: ["Customize in ", /* @__PURE__ */ jsx("code", { children: "src/api/AppSecurity.ts" })] })
+			}]
+		});
+		if (hasAdmin && adminAnchorProps) result.push({
+			text: "Take the wheel.",
+			sub: "Become admin in three steps.",
+			steps: [
+				{
+					num: "1",
+					text: /* @__PURE__ */ jsxs(Fragment, { children: [
+						"Add your email to ",
+						/* @__PURE__ */ jsx("code", { children: "adminEmails" }),
+						" in",
+						" ",
+						/* @__PURE__ */ jsx("code", { children: "AppSecurity.ts" })
+					] })
+				},
+				{
+					num: "2",
+					text: "Create a user account with that email"
+				},
+				{
+					num: "3",
+					text: /* @__PURE__ */ jsxs(Fragment, { children: ["Go to ", /* @__PURE__ */ jsx("a", {
+						...adminAnchorProps,
+						children: "/admin"
+					})] })
+				}
+			]
+		});
+		const helpMsg = messages.find((msg) => msg.text === "Need help?");
+		if (helpMsg) result.push(helpMsg);
+		return result;
+	}, [
+		hasAuth,
+		hasAdmin,
+		authAnchorProps,
+		adminAnchorProps
+	]);
+	const current = filteredMessages[index];
+	const prev = useCallback(() => {
+		setDirection("prev");
+		setIndex((i) => (i - 1 + filteredMessages.length) % filteredMessages.length);
+	}, [filteredMessages.length]);
+	const next = useCallback(() => {
+		setDirection("next");
+		setIndex((i) => (i + 1) % filteredMessages.length);
+	}, [filteredMessages.length]);
+	const goTo = useCallback((i) => {
+		setDirection(i > index ? "next" : "prev");
+		setIndex(i);
+	}, [index]);
+	useEffect(() => {
+		const handleKeyDown = (e) => {
+			if (e.key === "ArrowLeft") prev();
+			else if (e.key === "ArrowRight") next();
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [prev, next]);
+	return /* @__PURE__ */ jsx("main", {
+		className: "alepha-blank",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "alepha-blank-content",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "alepha-blank-text-block",
+					children: [
+						/* @__PURE__ */ jsx("h1", {
+							className: `alepha-blank-message alepha-blank-slide-${direction}`,
+							children: current.text
+						}, index),
+						/* @__PURE__ */ jsx("p", {
+							className: `alepha-blank-sub alepha-blank-slide-${direction}`,
+							children: current.sub
+						}, `sub-${index}`),
+						current.detail && /* @__PURE__ */ jsx("p", {
+							className: `alepha-blank-detail alepha-blank-slide-${direction}`,
+							children: current.detail
+						}, `detail-${index}`),
+						current.steps && /* @__PURE__ */ jsx("div", {
+							className: `alepha-blank-steps alepha-blank-slide-${direction}`,
+							children: current.steps.map((step, i) => /* @__PURE__ */ jsxs("div", {
+								className: "alepha-blank-step",
+								style: { animationDelay: `${.15 + i * .08}s` },
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "alepha-blank-step-num",
+									children: step.num
+								}), /* @__PURE__ */ jsx("span", {
+									className: "alepha-blank-step-text",
+									children: step.text
+								})]
+							}, i))
+						}, `steps-${index}`),
+						current.links && /* @__PURE__ */ jsx("div", {
+							className: `alepha-blank-links alepha-blank-slide-${direction}`,
+							children: current.links.map((link, i) => /* @__PURE__ */ jsx("a", {
+								href: link.href,
+								target: link.href.startsWith("http") ? "_blank" : void 0,
+								rel: link.href.startsWith("http") ? "noopener noreferrer" : void 0,
+								style: { animationDelay: `${.1 + i * .05}s` },
+								children: link.label
+							}, link.href))
+						}, `links-${index}`)
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "alepha-blank-slider",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							className: "alepha-blank-nav-btn",
+							onClick: prev,
+							"aria-label": "Previous",
+							children: /* @__PURE__ */ jsx("svg", {
+								width: "14",
+								height: "14",
+								viewBox: "0 0 14 14",
+								fill: "none",
+								children: /* @__PURE__ */ jsx("path", {
+									d: "M9 3L5 7L9 11",
+									stroke: "currentColor",
+									strokeWidth: "1.5",
+									strokeLinecap: "round",
+									strokeLinejoin: "round"
+								})
+							})
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "alepha-blank-dots",
+							children: filteredMessages.map((_, i) => /* @__PURE__ */ jsx("button", {
+								className: `alepha-blank-dot ${i === index ? "active" : ""}`,
+								onClick: () => goTo(i),
+								"aria-label": `Go to message ${i + 1}`
+							}, i))
+						}),
+						/* @__PURE__ */ jsx("button", {
+							className: "alepha-blank-nav-btn",
+							onClick: next,
+							"aria-label": "Next",
+							children: /* @__PURE__ */ jsx("svg", {
+								width: "14",
+								height: "14",
+								viewBox: "0 0 14 14",
+								fill: "none",
+								children: /* @__PURE__ */ jsx("path", {
+									d: "M5 3L9 7L5 11",
+									stroke: "currentColor",
+									strokeWidth: "1.5",
+									strokeLinecap: "round",
+									strokeLinejoin: "round"
+								})
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "alepha-blank-hint",
+					children: [
+						/* @__PURE__ */ jsx("kbd", { children: "←" }),
+						" ",
+						/* @__PURE__ */ jsx("kbd", { children: "→" }),
+						" to navigate"
+					]
+				})
+			]
+		})
+	});
+};
+var GettingStarted_default = GettingStarted;
+
+//#endregion
+export { GettingStarted_default as GettingStarted };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/react/intro/components/GettingStarted.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\nimport \"./GettingStarted.css\";\nimport { useRouter } from \"alepha/react/router\";\nimport type { ReactNode } from \"react\";\n\ntype Step = {\n  num: string;\n  text: ReactNode;\n};\n\ntype Message = {\n  text: string;\n  sub: string;\n  detail?: string;\n  steps?: Step[];\n  links?: { label: string; href: string }[];\n};\n\nconst messages: Message[] = [\n  {\n    text: \"Let's begin.\",\n    sub: \"Every story starts with a blank page.\",\n    detail: \"This one is yours.\",\n  },\n  {\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];\n\n/**\n * A welcome component displayed when creating a new Alepha application.\n */\nconst GettingStarted = () => {\n  const [index, setIndex] = useState(0);\n  const [direction, setDirection] = useState<\"next\" | \"prev\">(\"next\");\n\n  const router = useRouter();\n  const hasAdmin = router.pages.find((it) => it.name === \"adminLayout\");\n  const hasAuth = router.pages.find((it) => it.name === \"authLayout\");\n\n  const adminAnchorProps = hasAdmin\n    ? router.anchor(router.path(\"adminLayout\"))\n    : undefined;\n  const authAnchorProps = hasAuth\n    ? router.anchor(router.path(\"login\"))\n    : undefined;\n\n  const filteredMessages = useMemo(() => {\n    const result: Message[] = [];\n\n    // Add static messages up to \"What's next?\"\n    for (const msg of messages) {\n      if (msg.text === \"Need help?\") break;\n      result.push(msg);\n    }\n\n    // Add auth message if available\n    if (hasAuth && authAnchorProps) {\n      result.push({\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\n    // Add admin message if available\n    if (hasAdmin && adminAnchorProps) {\n      result.push({\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\n    // Add \"Need help?\" message\n    const helpMsg = messages.find((msg) => msg.text === \"Need help?\");\n    if (helpMsg) {\n      result.push(helpMsg);\n    }\n\n    return result;\n  }, [hasAuth, hasAdmin, authAnchorProps, adminAnchorProps]);\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    <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\nexport default GettingStarted;\n"],"mappings":"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"}

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

@@ -1,10 +1,10 @@
 import { $atom, $env, $hook, $inject, $module, $use, Alepha, AlephaError, KIND, Primitive, createPrimitive, t } 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";
 import { AlephaServer } from "alepha/server";
 import { AlephaServerLinks, LinkProvider } from "alepha/server/links";
 import { $logger } from "alepha/logger";
-import { BrowserHeadProvider } from "alepha/react/head";
 import { RouterProvider } from "alepha/router";
 import { StrictMode, createContext, createElement, memo, use, useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -1966,7 +1966,7 @@ const AlephaReactRouter = $module({
 		ReactBrowserRendererProvider,
 		ReactPageService
 	],
-	register: (alepha) => alepha.with(AlephaReact).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(ReactRouter)
 });
 
 //#endregion