[spike] Give the tutorial REPL its dark theme

netlify.toml

@@ -1,5 +1,5 @@
 [build]
-  publish = "dist/"
+  publish = "dist/client/"
 
 # "SolidStart" is one word as a brand, so this slug gets guessed/typed often.
 [[redirects]]

osmium/package.json

@@ -30,20 +30,20 @@
 	"dependencies": {
 		"@fontsource-variable/geist": "^5.3.0",
 		"@fontsource-variable/geist-mono": "^5.3.0",
-		"@kobalte/core": "^0.13.12",
-		"@kobalte/solidbase": "catalog:",
+		"@kobalte/core": "2.0.0-alpha.4",
+		"@kobalte/solidbase": "2.0.0",
 		"@kobalte/tailwindcss": "^0.9.0",
 		"@orama/core": "^1.2.19",
-		"@solid-primitives/context": "^0.3.2",
-		"@solid-primitives/event-listener": "^2.4.6",
-		"@solid-primitives/marker": "^0.2.2",
-		"@solid-primitives/platform": "^0.2.1",
-		"@solid-primitives/storage": "^4.4.0",
-		"@solidjs/router": "1.0.0",
+		"@solid-primitives/context": "2.0.0-next.4",
+		"@solid-primitives/event-listener": "3.0.0-next.9",
+		"@solid-primitives/marker": "2.0.0-next.4",
+		"@solid-primitives/platform": "1.0.0-next.4",
+		"@solid-primitives/storage": "5.0.0-next.7",
+		"@solidjs/router": "2.0.0-next.42",
 		"@tailwindcss/typography": "^0.5.19",
-		"solid-heroicons": "^3.2.4",
-		"solid-js": "^1.9.14",
-		"tailwindcss": "^4.3.3"
+		"solid-js": "2.0.0-rc.18",
+		"tailwindcss": "^4.3.3",
+		"@solidjs/web": "2.0.0-rc.18"
 	},
 	"peerDependencies": {
 		"tailwindcss": "^4.3.3"

osmium/src/Layout.tsx

@@ -1,4 +1,4 @@
-import { ErrorBoundary } from "solid-js";
+import { Errored } from "solid-js";
 
 import { Layout } from "./ui/layout";
 import { NotFound } from "./ui/not-found";
@@ -16,9 +16,9 @@ export default function (props: ParentProps) {
 	return (
 		<OsmiumThemeStateProvider>
 			<SidebarProvider config={config().themeConfig?.sidebar}>
-				<ErrorBoundary fallback={() => <NotFound />}>
+				<Errored fallback={() => <NotFound />}>
 					<Layout>{props.children}</Layout>
-				</ErrorBoundary>
+				</Errored>
 			</SidebarProvider>
 		</OsmiumThemeStateProvider>
 	);

osmium/src/mdx-components.tsx

@@ -1,23 +1,24 @@
 import {
 	For,
-	type JSX,
 	Match,
 	type ParentProps,
 	type Signal,
 	Switch,
 	children,
 	createMemo,
 	createSignal,
-	splitProps,
+	omit,
+	onCleanup,
+	untrack,
 } from "solid-js";
-import { isServer } from "solid-js/web";
+import type { JSX } from "@solidjs/web";
+import { clientOnly, isServer } from "@solidjs/web";
 import {
 	cookieStorage,
 	makePersisted,
 	messageSync,
 } from "@solid-primitives/storage";
 
-import { clientOnly } from "@solidjs/start";
 import { Callout } from "./ui/callout";
 import { DeepDive } from "./ui/deep-dive";
 import { Tabs, TabList, TabPanel, Tab } from "./ui/tabs";
@@ -40,7 +41,7 @@ export const DirectiveContainer = (
 		tabNames?: string;
 	} & ParentProps
 ) => {
-	const _children = children(() => props.children).toArray();
+	const resolved = children(() => props.children);
 	const tabNames = createMemo(() => props.tabNames?.split("\0") ?? []);
 
 	return (
@@ -49,23 +50,23 @@ export const DirectiveContainer = (
 				<Callout
 					type={props.type as CalloutType}
 					title={props.title}
-					children={_children}
+					children={resolved()}
 				/>
 			}
 		>
-			<Match when={props.type === "tab"}>{_children}</Match>
+			<Match when={props.type === "tab"}>{resolved()}</Match>
 			<Match when={props.type === "deep-dive" || props.type === "solution"}>
 				<DeepDive
 					kind={props.type as "deep-dive" | "solution"}
 					title={props.title}
-					children={_children}
+					children={resolved()}
 				/>
 			</Match>
 			<Match when={props.type === "tab-group"}>
 				<TabGroup
 					syncKey={props.title}
 					tabNames={tabNames()}
-					panels={_children}
+					panels={resolved.toArray()}
 				/>
 			</Match>
 		</Switch>
@@ -101,11 +102,14 @@ const TabGroup = (props: {
 
 	// Groups sharing a sync key select together across the page and tabs,
 	// and the choice persists between visits.
+	// The channel is client-only.
+	const channel = isServer ? undefined : new BroadcastChannel("tab-group");
+	onCleanup(() => channel?.close());
 	const [openTab, setOpenTab] = makePersisted<string, Signal<string>>(
-		createSignal(props.tabNames[0]),
+		createSignal(untrack(() => props.tabNames[0])),
 		{
 			name: `tab-group:${props.syncKey}`,
-			sync: messageSync(new BroadcastChannel("tab-group")),
+			sync: channel && messageSync(channel),
 			storage: cookieStorage.withOptions({
 				expires: new Date(Date.now() + 3e10),
 			}),
@@ -120,15 +124,15 @@ export const strong = (props: ParentProps) => (
 export const EraserLink = (
 	props: ParentProps<{ href: string; preview: string }>
 ) => {
-	const [, rest] = splitProps(props, ["children"]);
+	const rest = omit(props, "children");
 
 	if (!isServer) {
 		return <EraserLinkImpl {...rest} />;
 	} else {
 		return (
 			<a
-				aria-hidden={true}
-				tabIndex="-1"
+				aria-hidden="true"
+				tabindex="-1"
 				href={props.href}
 				class="font-semibold text-blue-700 no-underline shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#38bdf8),inset_0_calc(-1*(var(--tw-prose-underline-size,2px)+2px))_0_0_var(--tw-prose-underline,var(--color-blue-400))] hover:[--tw-prose-underline-size:4px] dark:text-blue-400 dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,var(--color-blue-800))] dark:[--tw-prose-background:var(--color-slate-900)] dark:hover:[--tw-prose-underline-size:6px]"
 				rel="noopener noreferrer"
@@ -200,44 +204,14 @@ export const h6 = (props: ParentProps) => (
 		{props.children}
 	</h6>
 );
-export const a = (props: ParentProps & { href: string }) => {
-	const [, rest] = splitProps(props, ["children"]);
-	const resolved = children(() => props.children);
-	const resolvedArray = resolved.toArray();
-
-	// Check if the link is a code block
-	if (
-		// Server side
-		(isServer &&
-			resolvedArray[0] &&
-			typeof resolvedArray[0] === "object" &&
-			"t" in resolvedArray[0] &&
-			typeof resolvedArray[0].t === "string" &&
-			resolvedArray[0].t.substring(0, 5) === "<code") ||
-		// Client side
-		(!isServer &&
-			resolvedArray[0] instanceof Element &&
-			resolvedArray[0].nodeName === "CODE")
-	) {
-		return (
-			<a
-				class="[&>code]:shadow-[0_0_0_1.5px_#2563eb] hover:[&>code]:shadow-[0_0_0_2px_#1e3a8a] dark:[&>code]:shadow-[0_0_0_1.5px_#38bdf8] dark:hover:[&>code]:shadow-[0_0_0_2px_#7dd3fc]"
-				{...rest}
-			>
-				{resolved()}
-			</a>
-		);
-	} else {
-		return (
-			<a
-				class="font-semibold text-blue-800 no-underline shadow-[inset_0_calc(-1*(var(--tw-prose-underline-size,0.5px)+2px))_0_0_var(--tw-prose-underline,var(--color-blue-400))] [--tw-prose-background:var(--color-slate-50)] hover:[--tw-prose-underline-size:4px] dark:text-blue-300 dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,var(--color-blue-500))] dark:[--tw-prose-background:var(--color-slate-900)] dark:hover:[--tw-prose-underline-size:6px]"
-				{...rest}
-			>
-				{resolved()}
-			</a>
-		);
-	}
-};
+// A link wrapping inline code is outlined around the code; any other link gets
+// the underline style. `:has()` decides, so SSR and hydration agree.
+export const a = (props: ParentProps & { href: string }) => (
+	<a
+		class="not-has-[>code]:font-semibold not-has-[>code]:text-blue-800 not-has-[>code]:no-underline not-has-[>code]:shadow-[inset_0_calc(-1*(var(--tw-prose-underline-size,0.5px)+2px))_0_0_var(--tw-prose-underline,var(--color-blue-400))] not-has-[>code]:[--tw-prose-background:var(--color-slate-50)] not-has-[>code]:hover:[--tw-prose-underline-size:4px] not-has-[>code]:dark:text-blue-300 not-has-[>code]:dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,var(--color-blue-500))] not-has-[>code]:dark:[--tw-prose-background:var(--color-slate-900)] not-has-[>code]:dark:hover:[--tw-prose-underline-size:6px] [&>code]:shadow-[0_0_0_1.5px_#2563eb] hover:[&>code]:shadow-[0_0_0_2px_#1e3a8a] dark:[&>code]:shadow-[0_0_0_1.5px_#38bdf8] dark:hover:[&>code]:shadow-[0_0_0_2px_#7dd3fc]"
+		{...props}
+	/>
+);
 export const p = (props: ParentProps) => (
 	<p {...props} class="my-4">
 		{props.children}

osmium/src/ui/button-link.tsx

@@ -1,19 +1,20 @@
-import { ComponentProps, splitProps } from "solid-js";
+import { omit } from "solid-js";
+import type { ComponentProps } from "@solidjs/web";
 
 type ButtonLinkProps = ComponentProps<"a"> & {
 	variant: "primary" | "secondary";
 };
 
 export const ButtonLink = (props: ButtonLinkProps) => {
-	const [localProps, otherProps] = splitProps(props, ["variant"]);
+	const otherProps = omit(props, "variant");
 
 	return (
 		<a
-			classList={{
-				"rounded-full bg-blue-300 py-2 px-4 text-sm font-semibold text-slate-900 hover:bg-blue-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-300/50 active:bg-blue-500":
-					localProps.variant === "primary",
-				"rounded-full bg-slate-800 py-2 px-4 text-sm font-semibold text-white hover:bg-slate-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-300":
-					localProps.variant === "secondary",
+			class={{
+				"rounded-full bg-blue-300 px-4 py-2 text-sm font-semibold text-slate-900 hover:bg-blue-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-300/50 active:bg-blue-500":
+					props.variant === "primary",
+				"rounded-full bg-slate-800 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-300":
+					props.variant === "secondary",
 			}}
 			{...otherProps}
 		/>

osmium/src/ui/callout.tsx

@@ -1,13 +1,12 @@
-import { Icon } from "solid-heroicons";
-import { mergeProps, type JSX, Show, untrack } from "solid-js";
-import {
-	lightBulb,
-	exclamationTriangle,
-	xCircle,
-	puzzlePiece,
-	bookOpen,
-	noSymbol,
-} from "solid-heroicons/solid";
+import { Icon } from "./icon";
+import { merge, Show, untrack } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import lightBulb from "~icons/heroicons/light-bulb-solid";
+import exclamationTriangle from "~icons/heroicons/exclamation-triangle-solid";
+import xCircle from "~icons/heroicons/x-circle-solid";
+import puzzlePiece from "~icons/heroicons/puzzle-piece-solid";
+import bookOpen from "~icons/heroicons/book-open-solid";
+import noSymbol from "~icons/heroicons/no-symbol-solid";
 
 const styles = {
 	note: {
@@ -98,7 +97,7 @@ export type CalloutProps = {
 };
 
 export function Callout(props: CalloutProps) {
-	const mergedProps = mergeProps({ type: "note" as CalloutType }, props);
+	const mergedProps = merge({ type: "note" as CalloutType }, props);
 
 	const iconType = untrack(() => mergedProps.type);
 

osmium/src/ui/deep-dive.tsx

@@ -1,10 +1,8 @@
-import { Icon } from "solid-heroicons";
-import {
-	chevronRight,
-	lightBulb,
-	magnifyingGlassCircle,
-} from "solid-heroicons/solid";
-import type { JSX } from "solid-js";
+import { Icon } from "./icon";
+import chevronRight from "~icons/heroicons/chevron-right-solid";
+import lightBulb from "~icons/heroicons/light-bulb-solid";
+import magnifyingGlassCircle from "~icons/heroicons/magnifying-glass-circle-solid";
+import type { JSX } from "@solidjs/web";
 
 export type DeepDiveProps = {
 	title?: string;

osmium/src/ui/docs-layout.tsx

@@ -1,4 +1,5 @@
-import { Show, JSX, createMemo } from "solid-js";
+import { Show, createMemo } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { Pagination } from "./pagination";
 import { EditPageLink } from "./edit-page-link";
 import { PageIssueLink } from "./page-issue-link";

osmium/src/ui/edit-page-link.tsx

@@ -1,6 +1,6 @@
 import { Component, Show } from "solid-js";
-import { Icon } from "solid-heroicons";
-import { pencilSquare } from "solid-heroicons/outline";
+import { Icon } from "./icon";
+import pencilSquare from "~icons/heroicons/pencil-square";
 import { useCurrentPageData } from "@kobalte/solidbase/client";
 
 export const EditPageLink: Component = () => {

osmium/src/ui/icon.tsx

@@ -0,0 +1,11 @@
+import { type Component, omit } from "solid-js";
+import type { ComponentProps } from "@solidjs/web";
+import { dynamic } from "@solidjs/web";
+
+export type IconComponent = Component<ComponentProps<"svg">>;
+
+/** Renders a heroicon imported from `~icons/heroicons/*`. */
+export function Icon(props: ComponentProps<"svg"> & { path: IconComponent }) {
+	const Svg = dynamic(() => props.path);
+	return <Svg {...omit(props, "path")} />;
+}