astryx-dracula 0.4.0 → 0.5.1

package/shared/auth-chrome.tsx

@@ -1,25 +1,174 @@
 // Shared login chrome: page wash + 400px column + Moon brand row + the
 // autocomplete widen-record TextInput needs (prop type omits input attrs).
-import type {CSSProperties} from 'react';
-import {Moon} from 'lucide-react';
-import {VStack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
-import {Icon} from '@astryxdesign/core/Icon';
-import {AUTH_BRAND_NAME} from 'astryx-dracula/shared/auth-copy';
-import {
-  authContentStyle,
-  authPageStyle,
-  inputAutoComplete,
-} from 'astryx-dracula/shared/auth-chrome-config';
 
+import { Button } from "@astryxdesign/core/Button";
+import { Card } from "@astryxdesign/core/Card";
+import { Icon } from "@astryxdesign/core/Icon";
+import { VStack } from "@astryxdesign/core/Layout";
+import { Link } from "@astryxdesign/core/Link";
+import { Heading, Text } from "@astryxdesign/core/Text";
+import { TextInput } from "@astryxdesign/core/TextInput";
+import { inputAutoComplete } from "astryx-dracula/shared/auth-chrome-config";
+import {
+	AUTH_BRAND_NAME,
+	AUTH_EMAIL_PLACEHOLDER,
+	AUTH_FORGOT_PASSWORD,
+	AUTH_HEADING,
+	AUTH_PASSWORD_PLACEHOLDER,
+	AUTH_PRIMARY_CTA,
+	AUTH_SIGNUP_LINK,
+	AUTH_SIGNUP_PROMPT,
+	AUTH_SUBTITLE,
+	AUTH_TERMS_PREFIX,
+	AUTH_TERMS_PRIVACY,
+	AUTH_TERMS_SERVICE,
+} from "astryx-dracula/shared/auth-copy";
+import { Moon } from "lucide-react";
+import type { ReactNode } from "react";
 
 export function LoginBrand() {
-  return (
-    <VStack gap={2} hAlign="center">
-      <Icon icon={Moon} size="lg" color="secondary" />
-      <Text type="body" weight="semibold" size="lg">
-        {AUTH_BRAND_NAME}
-      </Text>
-    </VStack>
-  );
+	return (
+		<VStack gap={2} hAlign="center">
+			<Icon icon={Moon} size="lg" color="secondary" />
+			<Text type="body" weight="semibold" size="lg">
+				{AUTH_BRAND_NAME}
+			</Text>
+		</VStack>
+	);
+}
+
+// Shared password-login core: the centered header, credential fields, primary
+// CTA, signup line and terms line every password page in the family carries.
+// The three pages differed only in what sits between the CTA and the signup
+// line (nothing, or the SSO divider + provider buttons) and in their outer
+// shell — login-split's two-column grid and login-sso's step machine keep
+// their own markup and take the pieces below instead of this whole card.
+export function AuthCard({
+	selfHash,
+	signupLink = AUTH_SIGNUP_LINK,
+	children,
+}: {
+	selfHash: string;
+	signupLink?: string;
+	children: ReactNode;
+}) {
+	return (
+		<>
+			<Card padding={4} width="100%">
+				<VStack gap={4} hAlign="stretch">
+					<VStack gap={1} hAlign="center">
+						<Heading level={1} type="display-2" justify="center">
+							{AUTH_HEADING}
+						</Heading>
+						<Text type="body" color="secondary">
+							{AUTH_SUBTITLE}
+						</Text>
+					</VStack>
+					{children}
+					{/* Prose link: colour alone is not a cue inside a sentence
+              (WCAG 1.4.1 / F73), so it asks for the underline the kit
+              only gives on hover. */}
+					<VStack hAlign="center">
+						<Text type="supporting" color="secondary">
+							{AUTH_SIGNUP_PROMPT}{" "}
+							<Link href={selfHash} type="supporting" hasUnderline>
+								{signupLink}
+							</Link>
+						</Text>
+					</VStack>
+				</VStack>
+			</Card>
+			<AuthTerms selfHash={selfHash} />
+		</>
+	);
+}
+
+// Email + password fields with the shared error/forgot-password rhythm, plus
+// the primary CTA that always follows them. The field gap is 8px (gap={2}),
+// not the outer 16px: without the group the two inputs sat twice as far
+// apart as the fields below them.
+export function AuthLoginFields({
+	email,
+	password,
+	error,
+	selfHash,
+	isLoading,
+	onEmailChange,
+	onPasswordChange,
+	onSubmit,
+}: {
+	email: string;
+	password: string;
+	error: string | null;
+	selfHash: string;
+	isLoading: boolean;
+	onEmailChange: (value: string) => void;
+	onPasswordChange: (value: string) => void;
+	onSubmit: () => void;
+}) {
+	return (
+		<>
+			<VStack gap={2}>
+				<TextInput
+					label="Email"
+					isLabelHidden
+					value={email}
+					onChange={onEmailChange}
+					placeholder={AUTH_EMAIL_PLACEHOLDER}
+					type="email"
+					{...inputAutoComplete("email")}
+					size="lg"
+					onEnter={onSubmit}
+					status={error ? { type: "error", message: error } : undefined}
+				/>
+				<VStack gap={1}>
+					<TextInput
+						label="Password"
+						isLabelHidden
+						value={password}
+						onChange={onPasswordChange}
+						placeholder={AUTH_PASSWORD_PLACEHOLDER}
+						type="password"
+						{...inputAutoComplete("current-password")}
+						size="lg"
+						onEnter={onSubmit}
+						status={error ? { type: "error", message: error } : undefined}
+					/>
+					{error && (
+						<VStack hAlign="end">
+							<Link href={selfHash} color="secondary" isStandalone>
+								{AUTH_FORGOT_PASSWORD}
+							</Link>
+						</VStack>
+					)}
+				</VStack>
+			</VStack>
+			<Button
+				label={AUTH_PRIMARY_CTA}
+				variant="primary"
+				size="lg"
+				isLoading={isLoading}
+				onClick={onSubmit}
+			/>
+		</>
+	);
+}
+
+// The family terms line, rendered below the card in the page column.
+export function AuthTerms({ selfHash }: { selfHash: string }) {
+	return (
+		<VStack hAlign="center" width="100%">
+			<Text type="supporting" color="secondary" justify="center">
+				{AUTH_TERMS_PREFIX}{" "}
+				<Link href={selfHash} type="supporting" hasUnderline>
+					{AUTH_TERMS_SERVICE}
+				</Link>{" "}
+				and{" "}
+				<Link href={selfHash} type="supporting" hasUnderline>
+					{AUTH_TERMS_PRIVACY}
+				</Link>
+				.
+			</Text>
+		</VStack>
+	);
 }

package/shared/auth-copy.ts

@@ -1,22 +1,22 @@
 // Auth copy shared by the four login templates. Single-sourced so the family
 // line cannot drift again. SSO-specific strings (Work email, Whisper your
 // details, Continue with SSO, provider names) stay per-template in login-sso.
-export const AUTH_HEADING = 'Welcome back to the night';
-export const AUTH_SUBTITLE = 'Sign in to your crypt';
-export const AUTH_PRIMARY_CTA = 'Sign in';
-export const AUTH_SIGNUP_PROMPT = 'New to the castle?';
-export const AUTH_SIGNUP_LINK = 'Sign up';
-export const AUTH_SSO_DIVIDER = 'Or continue with';
-export const AUTH_FORGOT_PASSWORD = 'Forgot password?';
+export const AUTH_HEADING = "Welcome back to the night";
+export const AUTH_SUBTITLE = "Sign in to your crypt";
+export const AUTH_PRIMARY_CTA = "Sign in";
+export const AUTH_SIGNUP_PROMPT = "New to the castle?";
+export const AUTH_SIGNUP_LINK = "Sign up";
+export const AUTH_SSO_DIVIDER = "Or continue with";
+export const AUTH_FORGOT_PASSWORD = "Forgot password?";
 // Names the problem without apologising, and does not blame one field: a
 // mistyped email used to be reported as a wrong password, because this string
 // was attached to the password input only.
-export const AUTH_ERROR_MESSAGE = 'Email or password is wrong. Try again.';
-export const AUTH_EMAIL_PLACEHOLDER = 'you@castle.dracula';
+export const AUTH_ERROR_MESSAGE = "Email or password is wrong. Try again.";
+export const AUTH_EMAIL_PLACEHOLDER = "you@castle.dracula";
 // The placeholder is the only visible name on the credential inputs, so it has
 // to actually name the field. "Whisper your password" named nothing.
-export const AUTH_PASSWORD_PLACEHOLDER = 'Your password';
-export const AUTH_BRAND_NAME = 'Castle Dracula';
-export const AUTH_TERMS_PREFIX = 'By clicking continue, you agree to our';
-export const AUTH_TERMS_SERVICE = 'Terms of service';
-export const AUTH_TERMS_PRIVACY = 'Privacy policy';
+export const AUTH_PASSWORD_PLACEHOLDER = "Your password";
+export const AUTH_BRAND_NAME = "Castle Dracula";
+export const AUTH_TERMS_PREFIX = "By clicking continue, you agree to our";
+export const AUTH_TERMS_SERVICE = "Terms of service";
+export const AUTH_TERMS_PRIVACY = "Privacy policy";

package/shared/chaptered-doc-config.ts

@@ -9,84 +9,81 @@
 // documentation-technical, product-tour, tech-report) share lives here; the
 // outline-building and scroll helpers that only chaptered-doc itself calls stay
 // unexported in that file.
-import type {CSSProperties} from 'react';
-import type {IconType} from '@astryxdesign/core/Icon';
-import type {OutlineItem} from '@astryxdesign/core/Outline';
+
+import type { IconType } from "@astryxdesign/core/Icon";
+import type { OutlineItem } from "@astryxdesign/core/Outline";
+import type { CSSProperties } from "react";
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
 export interface DocSection {
-  // Unique within the chapter; the DOM id is derived from it so the outline
-  // links and the headings can never drift apart.
-  key: string;
-  heading: string;
-  body: string;
-  bullets?: string[];
-  code?: {language: string; title: string; source: string};
+	// Unique within the chapter; the DOM id is derived from it so the outline
+	// links and the headings can never drift apart.
+	key: string;
+	heading: string;
+	body: string;
+	bullets?: string[];
+	code?: { language: string; title: string; source: string };
 }
 
 export interface DocChapter {
-  id: string;
-  title: string;
-  icon: IconType;
-  intro: string;
-  hasArt?: boolean;
-  sections: DocSection[];
+	id: string;
+	title: string;
+	icon: IconType;
+	intro: string;
+	hasArt?: boolean;
+	sections: DocSection[];
 }
 
-export type ChapterGroup = {title: string; chapters: DocChapter[]};
+export type ChapterGroup = { title: string; chapters: DocChapter[] };
 
-export const sectionId = (chapterId: string, key: string) =>
-  `${chapterId}--${key}`;
+export const sectionId = (chapterId: string, key: string) => `${chapterId}--${key}`;
 
 // Astryx has no image primitive: AspectRatio exposes no objectFit or radius
 // props, so the scene fill and the corner clip live in these two styles.
 export const sceneFill: CSSProperties = {
-  width: '100%',
-  height: '100%',
-  display: 'block',
+	width: "100%",
+	height: "100%",
+	display: "block",
 };
 export const sceneClip: CSSProperties = {
-  borderRadius: 'var(--radius-container)',
-  overflow: 'clip',
+	borderRadius: "var(--radius-container)",
+	overflow: "clip",
 };
 
 // The outline is sticky so it tracks the chapter as the document scrolls.
 export const outlinePanel: CSSProperties = {
-  position: 'sticky',
-  top: 'var(--spacing-6)',
-  alignSelf: 'start',
-  // No paddingBlockStart. This object is applied via `style=` to the outline
-  // LayoutPanels (chaptered-doc.tsx:316, documentation-design.tsx:592,
-  // documentation-technical.tsx:82), and an inline style prop BEATS the stylex
-  // class -- so this 8px silently overrode the panel's own 16px block padding
-  // at the top edge only, leaving every "On this page" rail in the kit
-  // asymmetric by 8px. The panel already owns its block padding.
+	position: "sticky",
+	top: "var(--spacing-6)",
+	alignSelf: "start",
+	// No paddingBlockStart. This object is applied via `style=` to the outline
+	// LayoutPanels (chaptered-doc.tsx:316, documentation-design.tsx:592,
+	// documentation-technical.tsx:82), and an inline style prop BEATS the stylex
+	// class -- so this 8px silently overrode the panel's own 16px block padding
+	// at the top edge only, leaving every "On this page" rail in the kit
+	// asymmetric by 8px. The panel already owns its block padding.
 };
 
 // Derived once per page so the Outline receives a stable array identity
 // and does not re-register its scroll spy on every render.
-export function buildOutlineByChapter(
-  chapters: DocChapter[],
-): Record<string, OutlineItem[]> {
-  return Object.fromEntries(
-    chapters.map(chapter => [
-      chapter.id,
-      chapter.sections.map(section => ({
-        id: sectionId(chapter.id, section.key),
-        label: section.heading,
-        level: 2,
-      })),
-    ]),
-  );
+export function buildOutlineByChapter(chapters: DocChapter[]): Record<string, OutlineItem[]> {
+	return Object.fromEntries(
+		chapters.map((chapter) => [
+			chapter.id,
+			chapter.sections.map((section) => ({
+				id: sectionId(chapter.id, section.key),
+				label: section.heading,
+				level: 2,
+			})),
+		]),
+	);
 }
 
 export function scrollToSection(id: string) {
-  const target = document.getElementById(id);
-  if (target != null) {
-    target.scrollIntoView({behavior: 'smooth', block: 'start'});
-  }
+	const target = document.getElementById(id);
+	if (target != null) {
+		target.scrollIntoView({ behavior: "smooth", block: "start" });
+	}
 }
 
 // ─── Rail ────────────────────────────────────────────────────────────────────
-