@c9up/nebula 0.1.0

package/dist/primitives/rovingFocus.js

@@ -0,0 +1,176 @@
+/// <reference lib="dom" />
+/**
+ * Roving focus — arrow-key navigation over a group of items.
+ *
+ * The WAI-ARIA composite-widget pattern: a menu, listbox, tab list or toolbar
+ * is *one* tab stop, and arrows move within it. Exactly one item carries
+ * `tabindex="0"` at a time; the rest are `-1`. That is what stops a 40-item
+ * menu from swallowing 40 presses of Tab.
+ *
+ * Used by DropdownMenu, ContextMenu, Menubar, Select, Combobox, Command, Tabs
+ * and ToggleGroup. The differences between them are configuration, not
+ * behaviour: orientation, whether the ends wrap, and whether moving focus also
+ * selects.
+ *
+ * Items are found by querying the container on each keypress rather than being
+ * registered up front. Menu contents are reactive — filtered by a Command
+ * input, grown by a loaded page — and a registry captured at mount goes stale
+ * the moment they change. The query costs a few microseconds per keypress,
+ * which is not a budget worth optimising against correctness.
+ */
+import { focusSilently, isVisible } from "./focusable.js";
+const DEFAULT_ITEM_SELECTOR = "[data-nebula-item]";
+export function rovingFocus(options) {
+    const selector = options.itemSelector ?? DEFAULT_ITEM_SELECTOR;
+    const orientation = options.orientation ?? "vertical";
+    const loop = options.loop !== false;
+    function items() {
+        const container = options.container();
+        if (container === null)
+            return [];
+        const found = [];
+        for (const node of container.querySelectorAll(selector)) {
+            if (!(node instanceof HTMLElement))
+                continue;
+            // Disabled items stay in the DOM for layout and screen-reader context
+            // but must not be landed on — matching how a disabled menu item behaves
+            // everywhere else.
+            if (node.hasAttribute("data-disabled"))
+                continue;
+            if (node.getAttribute("aria-disabled") === "true")
+                continue;
+            if (!isVisible(node))
+                continue;
+            found.push(node);
+        }
+        return found;
+    }
+    /**
+     * One item at `tabindex="0"`, everything else at `-1`.
+     *
+     * The active one is whichever currently holds focus, falling back to the
+     * first. The fallback is what makes the group re-enterable by Tab after
+     * focus has left it.
+     */
+    function sync() {
+        const list = items();
+        const focused = document.activeElement;
+        const activeIndex = focused instanceof HTMLElement ? list.indexOf(focused) : -1;
+        const active = activeIndex === -1 ? 0 : activeIndex;
+        list.forEach((item, index) => {
+            item.tabIndex = index === active ? 0 : -1;
+        });
+    }
+    function move(delta) {
+        const list = items();
+        if (list.length === 0)
+            return;
+        const focused = document.activeElement;
+        const current = focused instanceof HTMLElement ? list.indexOf(focused) : -1;
+        const next = step(current, delta, list.length, loop);
+        if (next === null)
+            return;
+        const target = list[next];
+        if (target === undefined)
+            return;
+        for (const item of list)
+            item.tabIndex = -1;
+        target.tabIndex = 0;
+        focusSilently(target);
+        options.onFocusChange?.(target);
+    }
+    function focusEdge(edge) {
+        const list = items();
+        const target = edge === "first" ? list[0] : list[list.length - 1];
+        if (target === undefined)
+            return;
+        for (const item of list)
+            item.tabIndex = -1;
+        target.tabIndex = 0;
+        focusSilently(target);
+        options.onFocusChange?.(target);
+    }
+    function onKeyDown(event) {
+        const container = options.container();
+        if (container === null)
+            return;
+        if (event.target instanceof Node && !container.contains(event.target))
+            return;
+        // A modifier means the user is talking to the browser, not the widget.
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const direction = directionFor(event.key, orientation);
+        if (direction !== 0) {
+            event.preventDefault();
+            move(direction);
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            focusEdge("first");
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            focusEdge("last");
+            return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+            const active = document.activeElement;
+            if (!(active instanceof HTMLElement))
+                return;
+            if (!items().includes(active))
+                return;
+            // Space would scroll the page and Enter would submit a surrounding form;
+            // inside a composite widget both mean "activate this item".
+            event.preventDefault();
+            options.onSelect?.(active, event);
+        }
+    }
+    document.addEventListener("keydown", onKeyDown, true);
+    let destroyed = false;
+    return {
+        focusFirst: () => focusEdge("first"),
+        focusLast: () => focusEdge("last"),
+        items,
+        sync,
+        destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
+            document.removeEventListener("keydown", onKeyDown, true);
+        },
+    };
+}
+/** `-1` for previous, `+1` for next, `0` when the key is not ours. */
+function directionFor(key, orientation) {
+    const vertical = orientation === "vertical" || orientation === "both";
+    const horizontal = orientation === "horizontal" || orientation === "both";
+    if (vertical && key === "ArrowDown")
+        return 1;
+    if (vertical && key === "ArrowUp")
+        return -1;
+    if (horizontal && key === "ArrowRight")
+        return 1;
+    if (horizontal && key === "ArrowLeft")
+        return -1;
+    return 0;
+}
+/**
+ * Next index, or `null` when the move is refused at an unlooped end.
+ *
+ * `current === -1` means focus is not on an item yet — the first arrow press
+ * after opening a menu. It enters at the first item going down and the last
+ * going up, which is what makes ArrowUp on a fresh menu land on its bottom
+ * entry the way every native menu does.
+ */
+function step(current, delta, length, loop) {
+    if (current === -1)
+        return delta > 0 ? 0 : length - 1;
+    const next = current + delta;
+    if (next >= 0 && next < length)
+        return next;
+    if (!loop)
+        return null;
+    return next < 0 ? length - 1 : 0;
+}

package/dist/primitives/scrollLock.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Body scroll lock — stop the page scrolling behind a modal surface.
+ *
+ * Two details separate a working lock from the naive `overflow: hidden`:
+ *
+ * 1. **Reference counting.** Two modals can be open at once (a confirm dialog
+ *    over a sheet). The second lock must not re-read the "original" overflow,
+ *    which is by then already `hidden`, and the first release must not unlock
+ *    while the second is still up.
+ * 2. **Scrollbar compensation.** Hiding overflow removes the scrollbar, the
+ *    viewport widens by its width, and the whole page jumps sideways as the
+ *    modal opens. Padding the body by exactly that width holds it still.
+ *
+ * The saved styles are the *inline* ones, not the computed ones. Restoring a
+ * computed value would write a hardcoded padding onto a body that had none,
+ * and the layout would stay shifted after the last modal closed.
+ */
+/** Lock page scrolling. Returns the matching unlock; safe to call twice. */
+export declare function lockScroll(): () => void;
+/** Is the page currently locked? Exposed for tests. */
+export declare function isScrollLocked(): boolean;

package/dist/primitives/scrollLock.js

@@ -0,0 +1,75 @@
+/// <reference lib="dom" />
+/**
+ * Body scroll lock — stop the page scrolling behind a modal surface.
+ *
+ * Two details separate a working lock from the naive `overflow: hidden`:
+ *
+ * 1. **Reference counting.** Two modals can be open at once (a confirm dialog
+ *    over a sheet). The second lock must not re-read the "original" overflow,
+ *    which is by then already `hidden`, and the first release must not unlock
+ *    while the second is still up.
+ * 2. **Scrollbar compensation.** Hiding overflow removes the scrollbar, the
+ *    viewport widens by its width, and the whole page jumps sideways as the
+ *    modal opens. Padding the body by exactly that width holds it still.
+ *
+ * The saved styles are the *inline* ones, not the computed ones. Restoring a
+ * computed value would write a hardcoded padding onto a body that had none,
+ * and the layout would stay shifted after the last modal closed.
+ */
+let depth = 0;
+let savedOverflow = "";
+let savedPaddingRight = "";
+/** Lock page scrolling. Returns the matching unlock; safe to call twice. */
+export function lockScroll() {
+    if (typeof document === "undefined")
+        return () => { };
+    depth += 1;
+    if (depth === 1)
+        applyLock();
+    let released = false;
+    return () => {
+        if (released)
+            return;
+        released = true;
+        depth -= 1;
+        if (depth === 0)
+            removeLock();
+    };
+}
+/** Is the page currently locked? Exposed for tests. */
+export function isScrollLocked() {
+    return depth > 0;
+}
+function applyLock() {
+    const body = document.body;
+    savedOverflow = body.style.overflow;
+    savedPaddingRight = body.style.paddingRight;
+    const gap = scrollbarWidth();
+    if (gap > 0) {
+        // Add to whatever padding the body already has rather than replacing it.
+        const existing = Number.parseFloat(getComputedStyle(body).paddingRight);
+        const base = Number.isNaN(existing) ? 0 : existing;
+        body.style.paddingRight = `${base + gap}px`;
+    }
+    body.style.overflow = "hidden";
+}
+function removeLock() {
+    const body = document.body;
+    body.style.overflow = savedOverflow;
+    body.style.paddingRight = savedPaddingRight;
+    savedOverflow = "";
+    savedPaddingRight = "";
+}
+/**
+ * Width of the vertical scrollbar, or 0 when it overlays the content.
+ *
+ * `innerWidth - documentElement.clientWidth` measures the real gutter, which
+ * is 0 on macOS overlay scrollbars and on touch devices. Measuring it beats
+ * assuming a value, because assuming produces a *reverse* jump on exactly the
+ * platforms where there is no scrollbar to compensate for.
+ */
+function scrollbarWidth() {
+    if (typeof window === "undefined")
+        return 0;
+    return Math.max(0, window.innerWidth - document.documentElement.clientWidth);
+}

package/dist/primitives/typeahead.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Type-ahead — jump to an item by typing its first letters.
+ *
+ * Native `<select>` does it, so a listbox or menu that does not feels broken.
+ * The WAI-ARIA practices call for it on listbox, menu, tree and combobox.
+ *
+ * Two rules carry the whole behaviour, and both come from the native control:
+ *
+ * - Keys typed within the timeout build one search string, so "st" reaches
+ *   "Stockholm" rather than stopping at anything beginning with "t".
+ * - Repeating a single letter cycles through the items starting with it, which
+ *   is how you reach the third "S" entry without knowing the rest of its name.
+ *
+ * Matching starts *after* the currently focused item and wraps, so a match
+ * always moves forward — otherwise every search would snap back to the first
+ * hit in the list and the cycling rule could never take effect.
+ */
+export interface TypeaheadOptions {
+    /** Current candidates, in display order. Re-read on every keypress. */
+    items: () => readonly HTMLElement[];
+    /** The item to search from. Defaults to whatever has focus. */
+    current?: () => HTMLElement | null;
+    /** A match was found. */
+    onMatch: (item: HTMLElement) => void;
+    /** Text to match against. Defaults to the item's trimmed text content. */
+    textOf?: (item: HTMLElement) => string;
+    /** How long keys keep accumulating. Default `1000`ms. */
+    resetAfter?: number;
+}
+export interface Typeahead {
+    /**
+     * Feed a keydown in. Returns `true` when the key was consumed as search
+     * input, so the caller can skip its own handling for that press.
+     */
+    handleKey(event: KeyboardEvent): boolean;
+    /** Drop the buffer — call when the surface closes. */
+    reset(): void;
+}
+export declare function typeahead(options: TypeaheadOptions): Typeahead;

package/dist/primitives/typeahead.js

@@ -0,0 +1,123 @@
+/// <reference lib="dom" />
+/**
+ * Type-ahead — jump to an item by typing its first letters.
+ *
+ * Native `<select>` does it, so a listbox or menu that does not feels broken.
+ * The WAI-ARIA practices call for it on listbox, menu, tree and combobox.
+ *
+ * Two rules carry the whole behaviour, and both come from the native control:
+ *
+ * - Keys typed within the timeout build one search string, so "st" reaches
+ *   "Stockholm" rather than stopping at anything beginning with "t".
+ * - Repeating a single letter cycles through the items starting with it, which
+ *   is how you reach the third "S" entry without knowing the rest of its name.
+ *
+ * Matching starts *after* the currently focused item and wraps, so a match
+ * always moves forward — otherwise every search would snap back to the first
+ * hit in the list and the cycling rule could never take effect.
+ */
+const RESET_AFTER_MS = 1000;
+export function typeahead(options) {
+    const resetAfter = options.resetAfter ?? RESET_AFTER_MS;
+    let buffer = "";
+    let timer;
+    function reset() {
+        buffer = "";
+        if (timer !== undefined)
+            clearTimeout(timer);
+        timer = undefined;
+    }
+    function restartTimer() {
+        if (timer !== undefined)
+            clearTimeout(timer);
+        timer = setTimeout(reset, resetAfter);
+    }
+    return {
+        reset,
+        handleKey(event) {
+            if (!isSearchKey(event, buffer.length > 0))
+                return false;
+            buffer += event.key.toLowerCase();
+            restartTimer();
+            const items = options.items();
+            if (items.length === 0)
+                return true;
+            // A buffer of one repeated character means "next item starting with it",
+            // not "item starting with that string repeated".
+            const query = allSameCharacter(buffer) ? (buffer[0] ?? "") : buffer;
+            const skipCurrent = allSameCharacter(buffer) && buffer.length > 1;
+            const from = startIndex(items, options.current?.() ?? focusedElement());
+            const match = findFrom(items, query, from, skipCurrent, options.textOf);
+            if (match !== null)
+                options.onMatch(match);
+            return true;
+        },
+    };
+}
+/**
+ * Is this keypress search input?
+ *
+ * Single printable characters only. `event.key` is `"a"` for a letter but
+ * `"ArrowDown"` or `"Enter"` for a control key, so a length check separates
+ * them without a keycode table. Modifiers are excluded because Ctrl+F belongs
+ * to the browser — but Shift is not, since it is how you type a capital.
+ *
+ * Space is the one character that depends on context. On an empty buffer it
+ * means "activate the focused item" and must reach the caller untouched; once
+ * a search is under way it is a word separator, and swallowing it is what lets
+ * "new y" reach "New York".
+ */
+function isSearchKey(event, hasBuffer) {
+    if (event.ctrlKey || event.metaKey || event.altKey)
+        return false;
+    if (event.key.length !== 1)
+        return false;
+    if (event.key === " ")
+        return hasBuffer;
+    return true;
+}
+function allSameCharacter(value) {
+    if (value.length < 2)
+        return true;
+    const first = value[0];
+    for (const character of value) {
+        if (character !== first)
+            return false;
+    }
+    return true;
+}
+function focusedElement() {
+    if (typeof document === "undefined")
+        return null;
+    const active = document.activeElement;
+    return active instanceof HTMLElement ? active : null;
+}
+function startIndex(items, current) {
+    if (current === null)
+        return 0;
+    const index = items.indexOf(current);
+    return index === -1 ? 0 : index;
+}
+/**
+ * First item matching `query`, searching forward from `from` and wrapping.
+ *
+ * `skipCurrent` is the cycling rule: repeating a letter must advance past the
+ * item already selected. A fresh search keeps the current item eligible, so
+ * typing the first letters of what is already highlighted does not jump away.
+ */
+function findFrom(items, query, from, skipCurrent, textOf) {
+    if (query === "")
+        return null;
+    const offset = skipCurrent ? 1 : 0;
+    for (let i = 0; i < items.length; i += 1) {
+        const item = items[(from + i + offset) % items.length];
+        if (item === undefined)
+            continue;
+        const text = (textOf?.(item) ?? item.textContent ?? "")
+            .trim()
+            .toLowerCase();
+        if (text.startsWith(query))
+            return item;
+    }
+    return null;
+}

package/dist/templates/AppShell.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 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 { type Slot } from "../lib/children.js";
+import { type Reactive } 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 declare const AppShell: (props?: AppShellProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/templates/AppShell.js

@@ -0,0 +1,42 @@
+/**
+ * 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 { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { read } from "../lib/props.js";
+export const AppShell = component((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/dist/templates/AuthLayout.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 type { Child } from "../lib/children.js";
+import { type Slot } from "../lib/children.js";
+import { type Reactive } 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 declare const AuthLayout: (props?: AuthLayoutProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/templates/AuthLayout.js

@@ -0,0 +1,42 @@
+/**
+ * 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 { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { read } from "../lib/props.js";
+export const AuthLayout = component((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/dist/templates/SettingsLayout.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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 type { Child } from "../lib/children.js";
+import { type Slot } from "../lib/children.js";
+import { type Reactive } 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 declare const SettingsLayout: (props?: SettingsLayoutProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/templates/SettingsLayout.js

@@ -0,0 +1,42 @@
+/**
+ * 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 { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { read } from "../lib/props.js";
+export const SettingsLayout = component((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/dist/templates/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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";