@lovrozagar/flare 0.1.0

package/src/client/index.ts

@@ -0,0 +1,75 @@
+import type { RouterArg } from "../hydrate/index.tsx";
+import type { FlareProviderContext } from "../outlet/types.ts";
+
+/* ── Types ─────────────────────────────────────────────────────────────── */
+
+export interface ClientBuilder {
+	onHydrated(fn: () => void): ClientBuilder;
+	onIdle(fn: () => void): ClientBuilder;
+	onInteraction(fn: () => void): ClientBuilder;
+	onReady(fn: (ctx: FlareProviderContext) => void): ClientBuilder;
+}
+
+/* ── Builder ───────────────────────────────────────────────────────────── */
+
+export function createClient(router: RouterArg): ClientBuilder {
+	const onHydratedFns: Array<() => void> = [];
+	const onIdleFns: Array<() => void> = [];
+	const onInteractionFns: Array<() => void> = [];
+	const onReadyFns: Array<(ctx: FlareProviderContext) => void> = [];
+
+	const builder: ClientBuilder = {
+		onHydrated(fn) {
+			onHydratedFns.push(fn);
+			return builder;
+		},
+		onIdle(fn) {
+			onIdleFns.push(fn);
+			return builder;
+		},
+		onInteraction(fn) {
+			onInteractionFns.push(fn);
+			return builder;
+		},
+		onReady(fn) {
+			onReadyFns.push(fn);
+			return builder;
+		},
+	};
+
+	/*
+	 * Defer hydration to next microtask so builder methods are registered
+	 * before hydrate() reads them.
+	 */
+	queueMicrotask(async () => {
+		const { hydrate } = await import("../hydrate");
+		await hydrate(router, {
+			onContextReady:
+				onReadyFns.length > 0
+					? (ctx) => {
+							for (const fn of onReadyFns) fn(ctx);
+						}
+					: undefined,
+			onHydrated:
+				onHydratedFns.length > 0
+					? () => {
+							for (const fn of onHydratedFns) fn();
+						}
+					: undefined,
+			onIdle:
+				onIdleFns.length > 0
+					? () => {
+							for (const fn of onIdleFns) fn();
+						}
+					: undefined,
+			onInteraction:
+				onInteractionFns.length > 0
+					? () => {
+							for (const fn of onInteractionFns) fn();
+						}
+					: undefined,
+		});
+	});
+
+	return builder;
+}

package/src/client.tsx

@@ -0,0 +1,2 @@
+/* test stub */
+export {};

package/src/codegen/index.ts

@@ -0,0 +1,41 @@
+/**
+ * Codegen barrel — merges internal + register exports.
+ * Used by generated routes.gen.ts files only.
+ */
+export {
+	applyResponseHeaders,
+	concatArrays,
+	isChunkLoadError,
+	isRenderFn,
+	mergeHeadConfigs,
+	mergeResponseHeaders,
+	retryImport,
+} from "../internal/index.ts";
+export { preload } from "../preload/index.ts";
+export type { InferParams, InferSearchParams } from "../route-builder/index.ts";
+export type {
+	ExtractPathParams,
+	FlareRegister,
+	InferAuthMode,
+	InferLoaderData,
+	InferPreloaderContext,
+	ParentAuthResolution,
+	ParentPreloaderContext,
+	PreloaderChain,
+	ResolvedAuth,
+	ResolvedEnv,
+	ResolvedQueryClient,
+	ResolvedServerContext,
+	RouteAuthMode,
+	RouteLoaderData,
+	RouteModule,
+	RouteParams,
+	RouteParamsProps,
+	RoutePathParams,
+	RoutePaths,
+	RouteSearchParams,
+	RouteSearchProps,
+	RouteSearchType,
+	RouteVirtualPaths,
+} from "../route-builder/register.ts";
+export type { RouteData, TreeNode } from "../router-primitives/index.ts";

package/src/components/await.tsx

@@ -0,0 +1,140 @@
+import { batch, createEffect, createSignal, type JSX } from "solid-js";
+
+export interface Deferred<T> {
+	__deferred: true;
+	__error?: { message: string };
+	__key?: string;
+	__resolved?: T;
+	promise: Promise<T>;
+}
+
+export type AwaitStatus = "error" | "pending" | "success";
+
+export interface AwaitProps<T> {
+	children: (data: T) => JSX.Element;
+	error?: ((err: Error, reset: () => void) => JSX.Element) | null;
+	pending?: JSX.Element;
+	promise: Deferred<T> | Promise<T>;
+}
+
+export function isDeferred<T>(value: unknown): value is Deferred<T> {
+	return (
+		value !== null &&
+		value !== undefined &&
+		typeof value === "object" &&
+		(value as Record<string, unknown>).__deferred === true
+	);
+}
+
+export function getPromise<T>(value: Deferred<T> | Promise<T> | null | undefined): Promise<T> | undefined {
+	if (isDeferred<T>(value)) {
+		return value.promise instanceof Promise ? value.promise : undefined;
+	}
+	if (value != null && typeof (value as Promise<T>).then === "function") {
+		return value as Promise<T>;
+	}
+	return undefined;
+}
+
+export function getResolvedValue<T>(value: Deferred<T> | Promise<T>): T | undefined {
+	return isDeferred<T>(value) ? value.__resolved : undefined;
+}
+
+export function getResolvedError(value: unknown): Error | undefined {
+	if (!isDeferred(value)) return undefined;
+	if (value.__error) return new Error(value.__error.message);
+	return undefined;
+}
+
+export function Await<T>(props: AwaitProps<T>): JSX.Element {
+	const initialResolved = getResolvedValue(props.promise);
+	const initialError = getResolvedError(props.promise);
+
+	function computeInitialStatus(): AwaitStatus {
+		if (initialResolved !== undefined) return "success";
+		if (initialError) return "error";
+		return "pending";
+	}
+
+	const [status, setStatus] = createSignal<AwaitStatus>(computeInitialStatus());
+	const [data, setData] = createSignal<T | undefined>(initialResolved);
+	const [error, setError] = createSignal<Error | undefined>(initialError);
+
+	let currentPromise = getPromise(props.promise);
+
+	if (initialResolved === undefined && !initialError && currentPromise) {
+		trackPromise(currentPromise);
+	}
+
+	function trackPromise(p: Promise<T>): void {
+		p.then(
+			(result) => {
+				if (currentPromise === p) {
+					batch(() => {
+						setData(() => result);
+						setStatus("success");
+					});
+				}
+			},
+			(err: unknown) => {
+				if (currentPromise === p) {
+					batch(() => {
+						setError(() => (err instanceof Error ? err : new Error(String(err))));
+						setStatus("error");
+					});
+				}
+			},
+		);
+	}
+
+	function reset(): void {
+		const p = getPromise(props.promise);
+		currentPromise = p;
+		batch(() => {
+			setStatus("pending");
+			setData(undefined);
+			setError(undefined);
+		});
+		if (p) trackPromise(p);
+	}
+
+	/* Watch for promise prop changes */
+	createEffect(() => {
+		const newPromise = getPromise(props.promise);
+		if (newPromise === currentPromise) return;
+		currentPromise = newPromise;
+
+		const resolved = getResolvedValue(props.promise);
+		const resolvedError = getResolvedError(props.promise);
+
+		if (resolved !== undefined) {
+			batch(() => {
+				setData(() => resolved);
+				setStatus("success");
+			});
+			return;
+		}
+		if (resolvedError) {
+			batch(() => {
+				setError(() => resolvedError);
+				setStatus("error");
+			});
+			return;
+		}
+
+		setStatus("pending");
+		if (newPromise) trackPromise(newPromise);
+	});
+
+	return (() => {
+		const s = status();
+		if (s === "success") {
+			return props.children(data() as T);
+		}
+		if (s === "error") {
+			if (props.error) return props.error(error() as Error, reset);
+			return null;
+		}
+		return props.pending ?? null;
+	}) as unknown as JSX.Element;
+}

package/src/components/dev-error-overlay.tsx

@@ -0,0 +1,154 @@
+import { createSignal, For, type JSX, onCleanup, onMount, Show } from "solid-js";
+import { Portal } from "solid-js/web";
+import { createDevErrorStore, type DevErrorStore } from "./index.ts";
+
+let globalStore: DevErrorStore | undefined;
+
+export function getDevErrorStore(): DevErrorStore {
+	if (!globalStore) {
+		globalStore = createDevErrorStore();
+	}
+	return globalStore;
+}
+
+export function resetDevErrorStore(): void {
+	globalStore = undefined;
+}
+
+export function DevErrorOverlay(): JSX.Element {
+	const store = getDevErrorStore();
+	const [errors, setErrors] = createSignal(store.errors().filter((e) => !e.dismissed));
+
+	function refresh(): void {
+		setErrors(store.errors().filter((e) => !e.dismissed));
+	}
+
+	function handleWindowError(event: ErrorEvent): void {
+		store.register(event.error instanceof Error ? event.error : new Error(event.message), "window.onerror");
+		refresh();
+	}
+
+	function handleUnhandledRejection(event: PromiseRejectionEvent): void {
+		const err = event.reason instanceof Error ? event.reason : new Error(String(event.reason));
+		store.register(err, "unhandledrejection");
+		refresh();
+	}
+
+	onMount(() => {
+		if (typeof window === "undefined") return;
+		window.addEventListener("error", handleWindowError);
+		window.addEventListener("unhandledrejection", handleUnhandledRejection);
+	});
+
+	onCleanup(() => {
+		if (typeof window === "undefined") return;
+		window.removeEventListener("error", handleWindowError);
+		window.removeEventListener("unhandledrejection", handleUnhandledRejection);
+	});
+
+	function dismiss(id: string): void {
+		store.dismiss(id);
+		refresh();
+	}
+
+	function clearAll(): void {
+		store.clear();
+		refresh();
+	}
+
+	return (
+		<Show when={errors().length > 0}>
+			<Portal>
+				<div
+					data-flare-dev-overlay
+					style={{
+						background: "rgba(0,0,0,0.85)",
+						bottom: "0",
+						color: "#fff",
+						"font-family": "monospace",
+						"font-size": "14px",
+						left: "0",
+						overflow: "auto",
+						padding: "24px",
+						position: "fixed",
+						right: "0",
+						top: "0",
+						"z-index": "99999",
+					}}
+				>
+					<div
+						style={{
+							display: "flex",
+							"justify-content": "space-between",
+							"margin-bottom": "16px",
+						}}
+					>
+						<h2 style={{ "font-size": "18px", margin: "0" }}>
+							{`${errors().length} error${errors().length === 1 ? "" : "s"}`}
+						</h2>
+						<button
+							onClick={clearAll}
+							style={{
+								background: "#333",
+								border: "1px solid #555",
+								"border-radius": "4px",
+								color: "#fff",
+								cursor: "pointer",
+								padding: "4px 12px",
+							}}
+							type="button"
+						>
+							Clear all
+						</button>
+					</div>
+					<For each={errors()}>
+						{(entry) => (
+							<div
+								style={{
+									background: "#1a1a2e",
+									border: "1px solid #e74c3c",
+									"border-radius": "8px",
+									"margin-bottom": "12px",
+									padding: "16px",
+								}}
+							>
+								<div style={{ display: "flex", "justify-content": "space-between" }}>
+									<strong style={{ color: "#e74c3c" }}>
+										{entry.error.name}: {entry.error.message}
+									</strong>
+									<button
+										onClick={() => dismiss(entry.id)}
+										style={{
+											background: "none",
+											border: "none",
+											color: "#888",
+											cursor: "pointer",
+											"font-size": "16px",
+										}}
+										type="button"
+									>
+										x
+									</button>
+								</div>
+								<div style={{ color: "#888", "font-size": "12px", "margin-top": "4px" }}>{entry.source}</div>
+								<Show when={entry.error.stack}>
+									<pre
+										style={{
+											color: "#ccc",
+											"font-size": "12px",
+											"margin-top": "8px",
+											"overflow-x": "auto",
+											"white-space": "pre-wrap",
+										}}
+									>
+										{entry.error.stack}
+									</pre>
+								</Show>
+							</div>
+						)}
+					</For>
+				</div>
+			</Portal>
+		</Show>
+	) as unknown as JSX.Element;
+}

package/src/components/direction-script.tsx

@@ -0,0 +1,22 @@
+import type { JSX } from "solid-js";
+import { NoHydration } from "solid-js/web";
+import type { DirectionConfig } from "../direction.ts";
+import { getDirectionScript } from "../direction.ts";
+import { useSSRContext } from "./ssr-context.tsx";
+
+export interface DirectionScriptProps {
+	config?: DirectionConfig;
+}
+
+export function DirectionScript(props: DirectionScriptProps): JSX.Element {
+	const ctx = useSSRContext();
+	const nonce = ctx?.nonce ?? "";
+	const config = props.config ?? ctx?.direction;
+	const script = getDirectionScript(config);
+
+	return (
+		<NoHydration>
+			<script innerHTML={script} nonce={nonce} />
+		</NoHydration>
+	) as unknown as JSX.Element;
+}

package/src/components/index.ts

@@ -0,0 +1,150 @@
+export { NavigationProgress, type NavigationProgressProps } from "../navigation-progress/index.tsx";
+export {
+	Await,
+	type AwaitProps,
+	type AwaitStatus,
+	type Deferred,
+	getPromise,
+	getResolvedError,
+	getResolvedValue,
+	isDeferred,
+} from "./await.tsx";
+export { DirectionScript, type DirectionScriptProps } from "./direction-script.tsx";
+export { ResetCSS } from "./reset-css.tsx";
+export { SSRContextProvider, type SSRContextValue, setSSRContext, useSSRContext } from "./ssr-context.tsx";
+export { ThemeScript, type ThemeScriptProps } from "./theme-script.tsx";
+export { ViewTransitionCSS, type ViewTransitionCSSProps } from "./view-transition-css.tsx";
+
+export interface SerializedError {
+	message: string;
+	name: string;
+	source: string;
+	stack?: string;
+}
+
+export interface CapturedError {
+	dismissed: boolean;
+	error: Error;
+	id: string;
+	source: string;
+	timestamp: number;
+}
+
+export interface DevErrorStore {
+	clear: () => void;
+	dismiss: (id: string) => void;
+	errors: () => CapturedError[];
+	hasErrors: () => boolean;
+	register: (error: Error | SerializedError, source?: string) => void;
+}
+
+function hashError(name: string, message: string, source: string, stack?: string): string {
+	/* Use first 100 chars of stack to avoid huge keys while still differentiating call sites */
+	const stackPrefix = stack ? stack.slice(0, 100) : "";
+	const raw = `${name}|${message}|${source}|${stackPrefix}`;
+	let hash = 0;
+	for (let i = 0; i < raw.length; i++) {
+		const ch = raw.charCodeAt(i);
+		hash = ((hash << 5) - hash + ch) | 0;
+	}
+	return hash.toString(36);
+}
+
+function isSerializedError(value: unknown): value is SerializedError {
+	return (
+		value !== null &&
+		typeof value === "object" &&
+		"message" in (value as Record<string, unknown>) &&
+		"name" in (value as Record<string, unknown>) &&
+		"source" in (value as Record<string, unknown>)
+	);
+}
+
+const MAX_DEV_ERRORS = 100;
+
+/* Benign dev-mode errors that should not surface in the overlay */
+const DEV_IGNORE_PATTERNS = [/ServiceWorker.*SSL certificate error/i];
+
+/**
+ * Error names benign during navigation — WebKit surfaces AbortError as
+ * unhandledrejection for both fetch cancellation (NDJSON stream aborted
+ * when navigating away) and view transition overlap (new startViewTransition
+ * aborts previous). Chromium suppresses these internally.
+ */
+const DEV_IGNORE_NAMES = new Set(["AbortError"]);
+
+export function createDevErrorStore(): DevErrorStore {
+	let store: CapturedError[] = [];
+
+	function errors(): CapturedError[] {
+		return store;
+	}
+
+	function hasErrors(): boolean {
+		return store.some((e) => !e.dismissed);
+	}
+
+	function register(error: Error | SerializedError, source?: string): void {
+		const src = source ?? (isSerializedError(error) ? error.source : "unknown");
+		let err: Error;
+		if (error instanceof Error) {
+			err = error;
+		} else {
+			err = new Error(error.message);
+			err.name = error.name;
+			if (error.stack) {
+				err.stack = error.stack;
+			}
+		}
+
+		/* Skip benign dev-mode errors (e.g. SW cert during local HTTPS, fetch abort during nav) */
+		if (DEV_IGNORE_PATTERNS.some((p) => p.test(err.message))) return;
+		if (DEV_IGNORE_NAMES.has(err.name)) return;
+
+		const id = hashError(err.name, err.message, src, err.stack);
+
+		/* Dedup: skip if already tracked (even if dismissed) */
+		if (store.some((e) => e.id === id)) return;
+
+		/* Cap: evict dismissed first, then oldest */
+		if (store.length >= MAX_DEV_ERRORS) {
+			const dismissedIdx = store.findIndex((e) => e.dismissed);
+			store.splice(dismissedIdx >= 0 ? dismissedIdx : 0, 1);
+		}
+
+		store.push({
+			dismissed: false,
+			error: err,
+			id,
+			source: src,
+			timestamp: Date.now(),
+		});
+	}
+
+	function dismiss(id: string): void {
+		const entry = store.find((e) => e.id === id);
+		if (entry) {
+			entry.dismissed = true;
+		}
+	}
+
+	function clear(): void {
+		store = [];
+	}
+
+	return { clear, dismiss, errors, hasErrors, register };
+}
+
+/* Tailwind CSS v4 preflight — --theme() calls resolved to fallback values */
+export const resetCss =
+	"@layer reset {*,::after,::before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type='button'],[type='reset'],[type='submit']),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden='until-found'])){display:none!important}}";
+
+function buildViewTransitionCss(duration: number): string {
+	return `@view-transition{navigation:auto}::view-transition-old(*),::view-transition-new(*){animation-duration:${duration}ms}`;
+}
+
+export const viewTransitionCss: string = buildViewTransitionCss(175);
+
+export function getViewTransitionCss(duration: number): string {
+	return buildViewTransitionCss(duration);
+}

package/src/components/locale-script.tsx

@@ -0,0 +1,26 @@
+import type { JSX } from "solid-js";
+import { NoHydration } from "solid-js/web";
+import type { LocaleConfig } from "../locale/index.tsx";
+import { getLocaleScript } from "../locale/index.tsx";
+import { useSSRContext } from "./ssr-context.tsx";
+
+export interface LocaleScriptProps {
+	config?: LocaleConfig;
+}
+
+export function LocaleScript(props: LocaleScriptProps): JSX.Element {
+	const ctx = useSSRContext();
+	const nonce = ctx?.nonce ?? "";
+	const config = props.config ?? ctx?.locale;
+	if (!config)
+		throw new Error(
+			"LocaleScript requires a config prop or locale in SSRContext. Pass <LocaleScript config={...} /> or set locale via router.locale().",
+		);
+	const script = getLocaleScript(config);
+
+	return (
+		<NoHydration>
+			<script innerHTML={script} nonce={nonce} />
+		</NoHydration>
+	) as unknown as JSX.Element;
+}

package/src/components/reset-css.tsx

@@ -0,0 +1,14 @@
+import type { JSX } from "solid-js";
+import { useSSRContext } from "./ssr-context.tsx";
+
+/* Duplicated from index.ts to avoid circular import (index re-exports this component) */
+export const RESET =
+	"@layer reset {*,::after,::before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type='button'],[type='reset'],[type='submit']),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden='until-found'])){display:none!important}}";
+
+export function ResetCSS(): JSX.Element {
+	const ctx = useSSRContext();
+	const nonce = ctx?.nonce ?? "";
+
+	/* oxlint-disable-next-line solid/no-innerhtml -- RESET is a hardcoded static string, not user input */
+	return (<style innerHTML={RESET} nonce={nonce} />) as unknown as JSX.Element;
+}

package/src/components/ssr-context.tsx

@@ -0,0 +1,37 @@
+import { createContext, type JSX, sharedConfig, useContext } from "solid-js";
+import type { DirectionConfig } from "../direction.ts";
+import type { LocaleConfig } from "../locale/index.tsx";
+import type { HeadConfig } from "../route-builder/types.ts";
+import type { ThemeConfig } from "../theme.ts";
+
+export interface SSRContextValue {
+	direction?: DirectionConfig;
+	entryScript?: string;
+	flareStateScript: string;
+	isServer: boolean;
+	locale?: LocaleConfig;
+	nonce: string;
+	resolvedHead?: HeadConfig;
+	theme?: ThemeConfig;
+}
+
+const SSRCtx = createContext<SSRContextValue>();
+
+export function setSSRContext(value: SSRContextValue): void {
+	if (sharedConfig.context) {
+		(sharedConfig.context as Record<string, unknown>).flare = value;
+	}
+}
+
+export function useSSRContext(): SSRContextValue | undefined {
+	/* SSR path: read from sharedConfig.context */
+	if (sharedConfig.context) {
+		return (sharedConfig.context as Record<string, unknown>).flare as SSRContextValue | undefined;
+	}
+	/* Testing fallback: read from Solid context provider */
+	return useContext(SSRCtx);
+}
+
+export function SSRContextProvider(props: { children: JSX.Element; value: SSRContextValue }): JSX.Element {
+	return <SSRCtx.Provider value={props.value}>{props.children}</SSRCtx.Provider>;
+}