@c9up/nebula 0.1.0

package/src/templates/AppShell.ts

@@ -0,0 +1,56 @@
+/**
+ * AppShell — sidebar, header, content.
+ *
+ * The layout behind almost every signed-in page. Shipping it is what makes
+ * nebula an atomic-design library rather than a component bag: shadcn stops at
+ * organisms and leaves the page skeleton to be rebuilt per app, which is why
+ * two pages in the same product end up with different header heights.
+ *
+ * `h-svh` on the shell and `overflow-auto` on the content column, not on the
+ * body. That is what keeps the header and the sidebar fixed while only the
+ * content scrolls — pinning them with `position: fixed` instead means
+ * hand-maintaining a top padding that matches the header, and it breaks the
+ * moment the header wraps to two lines.
+ *
+ * `svh` rather than `vh` because mobile browsers shrink the viewport as their
+ * address bar retracts; `vh` leaves the last hundred pixels of a full-height
+ * layout under the browser chrome.
+ */
+
+import { component, html } from "@c9up/aurora";
+import { type Slot, slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { type Reactive, read } from "../lib/props.js";
+
+export interface AppShellProps {
+	/** The navigation column — usually a `Sidebar`. */
+	sidebar?: Slot;
+	/** The top bar, spanning the content column. */
+	header?: Slot;
+	children?: Slot;
+	class?: Reactive<string>;
+	contentClass?: Reactive<string>;
+}
+
+export const AppShell = component<AppShellProps>((props) => {
+	return html`<div
+		data-slot="app-shell"
+		class="${() => cn("bg-background flex h-svh w-full overflow-hidden", read(props.class))}"
+	>
+		${slot(props.sidebar)}
+		<div data-slot="app-shell-main" class="flex min-w-0 flex-1 flex-col">
+			${
+				props.header === undefined
+					? null
+					: html`<header
+						data-slot="app-shell-header"
+						class="bg-background flex h-14 shrink-0 items-center gap-2 border-b px-4"
+					>${slot(props.header)}</header>`
+			}
+			<main
+				data-slot="app-shell-content"
+				class="${() => cn("min-h-0 flex-1 overflow-auto p-4 md:p-6", read(props.contentClass))}"
+			>${slot(props.children)}</main>
+		</div>
+	</div>`;
+});

package/src/templates/AuthLayout.ts

@@ -0,0 +1,66 @@
+/**
+ * AuthLayout — a centred card for sign-in, sign-up and password reset.
+ *
+ * `min-h-svh` with the card centred by flex, rather than absolute positioning
+ * and a translate. Centring by transform breaks as soon as the card grows
+ * taller than the viewport — a sign-up form with four fields and a validation
+ * error on each — because the top half goes above the fold with nothing to
+ * scroll to.
+ */
+
+import { component, html } from "@c9up/aurora";
+import type { Child } from "../lib/children.js";
+import { type Slot, slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { type Reactive, read } from "../lib/props.js";
+
+export interface AuthLayoutProps {
+	/** Product name or logo, above the card. */
+	brand?: Slot;
+	title: Child;
+	description?: Child;
+	children?: Slot;
+	/** Under the card — "Already have an account?" and the like. */
+	footer?: Slot;
+	class?: Reactive<string>;
+}
+
+export const AuthLayout = component<AuthLayoutProps>((props) => {
+	return html`<div
+		data-slot="auth-layout"
+		class="${() =>
+			cn(
+				"bg-muted/40 flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10",
+				read(props.class),
+			)}"
+	>
+		<div class="flex w-full max-w-sm flex-col gap-6">
+			${
+				props.brand === undefined
+					? null
+					: html`<div class="flex justify-center">${slot(props.brand)}</div>`
+			}
+			<div
+				data-slot="auth-card"
+				class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border p-6 shadow-sm"
+			>
+				<div class="flex flex-col gap-1.5 text-center">
+					<h1 class="text-xl leading-none font-semibold">${props.title}</h1>
+					${
+						props.description === undefined
+							? null
+							: html`<p class="text-muted-foreground text-sm">${props.description}</p>`
+					}
+				</div>
+				${slot(props.children)}
+			</div>
+			${
+				props.footer === undefined
+					? null
+					: html`<div class="text-muted-foreground text-center text-sm">
+						${slot(props.footer)}
+					</div>`
+			}
+		</div>
+	</div>`;
+});

package/src/templates/SettingsLayout.ts

@@ -0,0 +1,63 @@
+/**
+ * SettingsLayout — a section list beside a settings panel.
+ *
+ * The list is a real `<nav>` of links, not a Tabs component. Settings sections
+ * are pages: they need their own URL so a link to "Billing" works, and so the
+ * back button returns to the previous section rather than leaving the page
+ * entirely. Tabs would give the same look and none of that.
+ *
+ * The list sits above the panel on narrow screens and beside it from `md` up,
+ * which is the one responsive decision this layout has to make.
+ */
+
+import { component, html } from "@c9up/aurora";
+import type { Child } from "../lib/children.js";
+import { type Slot, slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { type Reactive, read } from "../lib/props.js";
+
+export interface SettingsSection {
+	label: Child;
+	href: string;
+	active?: boolean;
+}
+
+export interface SettingsLayoutProps {
+	title: Child;
+	description?: Child;
+	sections: readonly SettingsSection[];
+	children?: Slot;
+	class?: Reactive<string>;
+}
+
+export const SettingsLayout = component<SettingsLayoutProps>((props) => {
+	return html`<div
+		data-slot="settings-layout"
+		class="${() => cn("flex flex-col gap-6 p-4 md:p-10", read(props.class))}"
+	>
+		<div class="flex flex-col gap-1.5">
+			<h1 class="text-2xl font-semibold tracking-tight">${props.title}</h1>
+			${
+				props.description === undefined
+					? null
+					: html`<p class="text-muted-foreground text-sm">${props.description}</p>`
+			}
+		</div>
+		<div class="flex flex-col gap-8 md:flex-row md:gap-12">
+			<nav
+				data-slot="settings-nav"
+				aria-label="Settings sections"
+				class="flex gap-2 overflow-x-auto md:w-48 md:shrink-0 md:flex-col md:overflow-visible"
+			>
+				${props.sections.map(
+					(section) => html`<a
+						href="${section.href}"
+						aria-current="${section.active === true ? "page" : undefined}"
+						class="hover:bg-accent hover:text-accent-foreground aria-[current=page]:bg-accent aria-[current=page]:font-medium rounded-md px-3 py-2 text-sm whitespace-nowrap transition-colors"
+					>${section.label}</a>`,
+				)}
+			</nav>
+			<div data-slot="settings-panel" class="min-w-0 flex-1">${slot(props.children)}</div>
+		</div>
+	</div>`;
+});

package/src/templates/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Templates — page skeletons.
+ *
+ * Atomic design's fourth level, and the one shadcn does not have: it stops at
+ * organisms and ships "blocks" as copy-paste examples instead. The gap shows
+ * up as drift — two pages in the same product with different header heights
+ * and different content padding, because each was assembled from organisms by
+ * hand.
+ *
+ * A template is layout only. It positions slots and owns no state, no data and
+ * no behaviour, which is what keeps it usable for pages it was not written
+ * with in mind.
+ */
+
+export { AppShell, type AppShellProps } from "./AppShell.js";
+export { AuthLayout, type AuthLayoutProps } from "./AuthLayout.js";
+export {
+	SettingsLayout,
+	type SettingsLayoutProps,
+	type SettingsSection,
+} from "./SettingsLayout.js";

package/theme.css

@@ -0,0 +1,151 @@
+/*
+ * nebula design tokens.
+ *
+ * Plain CSS custom properties, deliberately: this file has to be readable by
+ * all three adapters. Tailwind maps it through `@theme inline`, UnoCSS through
+ * its `theme` object, and the `css` adapter emits utilities straight against
+ * it. Anything engine-specific here would force a fork per adapter.
+ *
+ * The palette is shadcn's neutral base in oklch. oklch rather than hex because
+ * the whole point of the scale is that `--muted-foreground` sits a predictable
+ * perceptual distance from `--foreground`; in sRGB hex that relationship is
+ * eyeballed and breaks the moment someone retunes one end of it.
+ *
+ * Dark mode is applied by `.dark` on an ancestor, matching what the aurora
+ * apps in this workspace already do (`@custom-variant dark (&:is(.dark *))`).
+ * `prefers-color-scheme` is deliberately NOT wired here — a theme toggle needs
+ * to be able to override the system, and a media query cannot be overridden by
+ * a class.
+ */
+
+:root {
+	--radius: 0.625rem;
+
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+
+	--destructive: oklch(0.577 0.245 27.325);
+	--destructive-foreground: oklch(0.985 0 0);
+
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+
+	--popover: oklch(0.269 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+
+	--accent: oklch(0.371 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+
+	--destructive: oklch(0.704 0.191 22.216);
+	--destructive-foreground: oklch(0.985 0 0);
+
+	/*
+	 * Borders and inputs are translucent white in dark mode rather than a
+	 * lighter grey. A solid border reads as a seam against `--card`, which sits
+	 * above `--background`; alpha lets one value hold up over both surfaces.
+	 */
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+}
+
+/*
+ * Keyframes for the enter/exit animations the overlay components reference
+ * through `data-[state=open]:animate-in` and friends.
+ *
+ * These live in nebula rather than in the adapter because `presence()` will
+ * hold a node in the DOM waiting for an animation that the stylesheet has to
+ * actually define. Ship the behaviour without the keyframes and every overlay
+ * unmounts a frame after it is told to close, silently losing the exit.
+ */
+@keyframes nebula-fade-in {
+	from {
+		opacity: 0;
+	}
+}
+
+@keyframes nebula-fade-out {
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes nebula-zoom-in {
+	from {
+		opacity: 0;
+		transform: scale(0.95);
+	}
+}
+
+@keyframes nebula-zoom-out {
+	to {
+		opacity: 0;
+		transform: scale(0.95);
+	}
+}