@stridge/noctis 1.0.0-beta.0

package/dist/components/search-dialog/parts/input.js

@@ -0,0 +1,53 @@
+"use client";
+import { Icon } from "../../../icons/icon.js";
+import { SearchIcon, SpinnerIcon } from "../../../icons/glyphs.js";
+import { dialog_exports } from "../../../primitives/dialog.js";
+import { useSearchDialogContext } from "../search-dialog.context.js";
+import { SEARCH_DIALOG_SLOTS } from "../search-dialog.slots.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/search-dialog/parts/input.tsx
+/**
+* The header row: the search glyph, the query field, an in-flight spinner, and the `Esc` close chip.
+* Reads the query, the in-flight state, and the key handler from context; the field auto-focuses when
+* the dialog opens (`SearchDialog.Root` points Base UI's `initialFocus` at it). The `Esc` chip's label
+* stays decorative — the dialog's own Escape handling closes it.
+*
+* Slot: `search-dialog-header` on the row, `search-dialog-input` on the field.
+*
+* @see {@link SearchDialog.Input.Props}
+*/
+function SearchDialogInput({ placeholder, ...props }) {
+	const { state, actions, meta } = useSearchDialogContext("Input");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": SEARCH_DIALOG_SLOTS.header,
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				icon: SearchIcon,
+				size: "sm"
+			}),
+			/* @__PURE__ */ jsx("input", {
+				...props,
+				ref: meta.inputRef,
+				"data-slot": SEARCH_DIALOG_SLOTS.input,
+				type: "search",
+				value: state.query,
+				onChange: (event) => actions.setQuery(event.target.value),
+				onKeyDown: actions.onKeyDown,
+				placeholder,
+				"aria-label": meta.title,
+				autoComplete: "off",
+				spellCheck: false
+			}),
+			state.searching ? /* @__PURE__ */ jsx(Icon, {
+				icon: SpinnerIcon,
+				size: "sm"
+			}) : null,
+			/* @__PURE__ */ jsx(dialog_exports.Dialog.Close, {
+				"data-allow-literal": true,
+				children: "Esc"
+			})
+		]
+	});
+}
+//#endregion
+export { SearchDialogInput };

package/dist/components/search-dialog/parts/messages.d.ts

@@ -0,0 +1,80 @@
+import { ReactElement, ReactNode } from "react";
+
+//#region src/components/search-dialog/parts/messages.d.ts
+/**
+ * The loading message, shown while the search index is still loading — before any query can run.
+ * Renders nothing once the index is ready.
+ *
+ * Slot: none — rendered inside the result pane; the loading state, not an element, marks it.
+ *
+ * @see {@link SearchDialog.Loading.Props}
+ */
+declare function SearchDialogLoading({
+  children
+}: SearchDialogLoading.Props): ReactElement | null;
+declare namespace SearchDialogLoading {
+  type Props = {
+    /** The loading copy. */children?: ReactNode;
+  };
+}
+/**
+ * The non-result messages: the empty-query prompt, the in-flight `searching` line, and the
+ * `noResults` line (which receives the trimmed query so it can quote the term). The root gates which
+ * one shows; the part only supplies the copy, so it renders nothing while results are present.
+ *
+ * Slot: none — rendered inside the result pane; the gated state, not an element, marks it.
+ *
+ * @see {@link SearchDialog.Empty.Props}
+ */
+declare function SearchDialogEmpty({
+  children,
+  searching,
+  noResults
+}: SearchDialogEmpty.Props): ReactElement | null;
+declare namespace SearchDialogEmpty {
+  type Props = {
+    /** The empty-query prompt, shown before anything is typed. */children?: ReactNode; /** The in-flight line, shown while a query is searching with nothing settled yet. */
+    searching?: ReactNode; /** The leading no-results copy; the quoted query is appended after it. */
+    noResults?: ReactNode;
+  };
+}
+/**
+ * The footer row holding the keyboard hints.
+ *
+ * Slot: `search-dialog-footer`.
+ *
+ * @see {@link SearchDialog.Footer.Props}
+ */
+declare function SearchDialogFooter({
+  children,
+  className,
+  ...props
+}: SearchDialogFooter.Props): ReactElement;
+declare namespace SearchDialogFooter {
+  type Props = {
+    /** The `SearchDialog.Hint`s. */children?: ReactNode; /** Classes merged onto the footer. */
+    className?: string;
+  };
+}
+/**
+ * One footer hint: a keys cluster (compose `Kbd`s) beside its label.
+ *
+ * Slot: none — rendered inside the footer.
+ *
+ * @see {@link SearchDialog.Hint.Props}
+ */
+declare function SearchDialogHint({
+  label,
+  children,
+  className,
+  ...props
+}: SearchDialogHint.Props): ReactElement;
+declare namespace SearchDialogHint {
+  type Props = {
+    /** What the keys do. */label?: ReactNode; /** The keys — typically one or more `Kbd`s. */
+    children?: ReactNode; /** Classes merged onto the hint. */
+    className?: string;
+  };
+}
+//#endregion
+export { SearchDialogEmpty, SearchDialogFooter, SearchDialogHint, SearchDialogLoading };

package/dist/components/search-dialog/parts/messages.js

@@ -0,0 +1,75 @@
+"use client";
+import { searchDialogPhase, useSearchDialogContext } from "../search-dialog.context.js";
+import { SEARCH_DIALOG_SLOTS } from "../search-dialog.slots.js";
+import clsx$1 from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/search-dialog/parts/messages.tsx
+/** The centred message shell shared by the loading and empty states, filling the result pane. */
+function Centered({ children }) {
+	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { children }) }) });
+}
+/**
+* The loading message, shown while the search index is still loading — before any query can run.
+* Renders nothing once the index is ready.
+*
+* Slot: none — rendered inside the result pane; the loading state, not an element, marks it.
+*
+* @see {@link SearchDialog.Loading.Props}
+*/
+function SearchDialogLoading({ children }) {
+	const { state } = useSearchDialogContext("Loading");
+	if (searchDialogPhase(state) !== "loading") return null;
+	return /* @__PURE__ */ jsx(Centered, { children });
+}
+/**
+* The non-result messages: the empty-query prompt, the in-flight `searching` line, and the
+* `noResults` line (which receives the trimmed query so it can quote the term). The root gates which
+* one shows; the part only supplies the copy, so it renders nothing while results are present.
+*
+* Slot: none — rendered inside the result pane; the gated state, not an element, marks it.
+*
+* @see {@link SearchDialog.Empty.Props}
+*/
+function SearchDialogEmpty({ children, searching, noResults }) {
+	const { state } = useSearchDialogContext("Empty");
+	const phase = searchDialogPhase(state);
+	if (phase === "empty") return /* @__PURE__ */ jsx(Centered, { children });
+	if (phase === "searching") return /* @__PURE__ */ jsx(Centered, { children: searching });
+	if (phase === "no-results") return /* @__PURE__ */ jsxs(Centered, { children: [
+		noResults,
+		" ",
+		/* @__PURE__ */ jsx("span", { children: `“${state.query.trim()}”` })
+	] });
+	return null;
+}
+/**
+* The footer row holding the keyboard hints.
+*
+* Slot: `search-dialog-footer`.
+*
+* @see {@link SearchDialog.Footer.Props}
+*/
+function SearchDialogFooter({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": SEARCH_DIALOG_SLOTS.footer,
+		className: clsx$1(className),
+		...props,
+		children
+	});
+}
+/**
+* One footer hint: a keys cluster (compose `Kbd`s) beside its label.
+*
+* Slot: none — rendered inside the footer.
+*
+* @see {@link SearchDialog.Hint.Props}
+*/
+function SearchDialogHint({ label, children, className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: clsx$1(className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", { children }), /* @__PURE__ */ jsx("span", { children: label })]
+	});
+}
+//#endregion
+export { SearchDialogEmpty, SearchDialogFooter, SearchDialogHint, SearchDialogLoading };

package/dist/components/search-dialog/parts/results.d.ts

@@ -0,0 +1,43 @@
+import { SearchResult } from "../search-dialog.context.js";
+import { ReactElement, ReactNode } from "react";
+
+//#region src/components/search-dialog/parts/results.d.ts
+/**
+ * The listbox container holding the result rows. Reads the listbox ref from context so the root can
+ * scroll the active row into view, and renders nothing unless there are results to show — the empty,
+ * loading, and searching states are owned by `SearchDialog.Empty` / `SearchDialog.Loading`.
+ *
+ * Slot: `search-dialog-results`.
+ *
+ * @see {@link SearchDialog.Results.Props}
+ */
+declare function SearchDialogResults({
+  children
+}: SearchDialogResults.Props): ReactElement | null;
+declare namespace SearchDialogResults {
+  type Props = {
+    /** One `SearchDialog.Item` per result. */children?: ReactNode;
+  };
+}
+/**
+ * One result row — its title opposite a crumb or method+path, over an optional `<mark>`-highlighted
+ * excerpt. Reads its active state and the select action from context off its `index`; pointer hover
+ * makes it active, click chooses it. The excerpt is trusted HTML (Pagefind escapes it and wraps only
+ * matched terms in `<mark>`).
+ *
+ * Slot: `search-dialog-result`.
+ *
+ * @see {@link SearchDialog.Item.Props}
+ */
+declare function SearchDialogItem({
+  result,
+  index
+}: SearchDialogItem.Props): ReactElement;
+declare namespace SearchDialogItem {
+  type Props = {
+    /** The hit this row renders. */result: SearchResult; /** This row's zero-based position, matched against the active row. */
+    index: number;
+  };
+}
+//#endregion
+export { SearchDialogItem, SearchDialogResults };

package/dist/components/search-dialog/parts/results.js

@@ -0,0 +1,63 @@
+"use client";
+import { Icon } from "../../../icons/icon.js";
+import { FileIcon } from "../../../icons/glyphs.js";
+import { searchDialogPhase, useSearchDialogContext } from "../search-dialog.context.js";
+import { SEARCH_DIALOG_SLOTS } from "../search-dialog.slots.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/search-dialog/parts/results.tsx
+/**
+* The listbox container holding the result rows. Reads the listbox ref from context so the root can
+* scroll the active row into view, and renders nothing unless there are results to show — the empty,
+* loading, and searching states are owned by `SearchDialog.Empty` / `SearchDialog.Loading`.
+*
+* Slot: `search-dialog-results`.
+*
+* @see {@link SearchDialog.Results.Props}
+*/
+function SearchDialogResults({ children }) {
+	const { state, meta } = useSearchDialogContext("Results");
+	if (searchDialogPhase(state) !== "results") return null;
+	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", {
+		ref: meta.listRef,
+		"data-slot": SEARCH_DIALOG_SLOTS.results,
+		role: "listbox",
+		"aria-label": meta.title,
+		"data-custom-scrollbar": true,
+		children
+	}) });
+}
+/**
+* One result row — its title opposite a crumb or method+path, over an optional `<mark>`-highlighted
+* excerpt. Reads its active state and the select action from context off its `index`; pointer hover
+* makes it active, click chooses it. The excerpt is trusted HTML (Pagefind escapes it and wraps only
+* matched terms in `<mark>`).
+*
+* Slot: `search-dialog-result`.
+*
+* @see {@link SearchDialog.Item.Props}
+*/
+function SearchDialogItem({ result, index }) {
+	const { state, actions } = useSearchDialogContext("Item");
+	const active = index === state.active;
+	return /* @__PURE__ */ jsxs("button", {
+		"data-slot": SEARCH_DIALOG_SLOTS.result,
+		type: "button",
+		role: "option",
+		"aria-selected": active,
+		"data-index": index,
+		onMouseMove: () => actions.setActive(index),
+		onClick: () => actions.select(index),
+		children: [/* @__PURE__ */ jsx(Icon, {
+			icon: FileIcon,
+			size: "sm"
+		}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", { children: result.title }), result.method && result.path ? /* @__PURE__ */ jsxs("span", {
+			"data-allow-literal": true,
+			children: [/* @__PURE__ */ jsx("span", { children: result.method }), /* @__PURE__ */ jsx("span", { children: result.path })]
+		}) : result.crumb && /* @__PURE__ */ jsx("span", {
+			"data-allow-literal": true,
+			children: result.crumb
+		})] }), result.excerpt && /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: result.excerpt } })] })]
+	});
+}
+//#endregion
+export { SearchDialogItem, SearchDialogResults };

package/dist/components/search-dialog/parts/root.d.ts

@@ -0,0 +1,54 @@
+import { SearchResult } from "../search-dialog.context.js";
+import { ReactElement, ReactNode } from "react";
+
+//#region src/components/search-dialog/parts/root.d.ts
+/**
+ * Owns the dialog chassis and the keyboard contract, and shares the query, results, and active row
+ * with every part through context. Built on Base UI's `Dialog` (focus trap, dismissal) with a `Surface`
+ * popup for the elevated chrome; ↑/↓ move the active row, Enter opens it, Esc closes. The caller runs
+ * the search and feeds `results`, so the dialog is index-agnostic. Compose `SearchDialog.Input`, the
+ * `SearchDialog.Loading` / `SearchDialog.Empty` messages, a `SearchDialog.Results` of
+ * `SearchDialog.Item`s, and a `SearchDialog.Footer` of `SearchDialog.Hint`s as children.
+ *
+ * @see {@link SearchDialog.Root.Props}
+ */
+declare function SearchDialogRoot({
+  open,
+  onOpenChange,
+  query,
+  onQueryChange,
+  results,
+  loading,
+  searching,
+  onSelect,
+  title,
+  children
+}: SearchDialogRoot.Props): ReactElement;
+declare namespace SearchDialogRoot {
+  type Props = {
+    /** Whether the dialog is open. */open: boolean; /** Called when the open state should change (backdrop, Esc, dismissal). */
+    onOpenChange: (open: boolean) => void; /** The current query (controlled). */
+    query: string; /** Called as the query field changes. */
+    onQueryChange: (query: string) => void; /** The results to render — the caller runs the search and feeds settled results. */
+    results: readonly SearchResult[];
+    /**
+     * The search index is still loading, before any query can run.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * A query is in flight (debounced search not yet settled).
+     * @default false
+     */
+    searching?: boolean; /** Called when a result is chosen (click or Enter). */
+    onSelect: (result: SearchResult, index: number) => void;
+    /**
+     * Accessible dialog title and input label.
+     * @default "Search"
+     */
+    title?: string; /** The dialog parts — `Input`, the `Loading` / `Empty` messages, `Results`, and `Footer`. */
+    children?: ReactNode;
+  };
+}
+//#endregion
+export { SearchDialogRoot };

package/dist/components/search-dialog/parts/root.js

@@ -0,0 +1,99 @@
+"use client";
+import { VisuallyHidden } from "../../../core/visually-hidden/visually-hidden.js";
+import { SearchDialogProvider } from "../search-dialog.context.js";
+import { SEARCH_DIALOG_SLOTS } from "../search-dialog.slots.js";
+import { Dialog } from "../../dialog/dialog.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/search-dialog/parts/root.tsx
+/**
+* Owns the dialog chassis and the keyboard contract, and shares the query, results, and active row
+* with every part through context. Built on Base UI's `Dialog` (focus trap, dismissal) with a `Surface`
+* popup for the elevated chrome; ↑/↓ move the active row, Enter opens it, Esc closes. The caller runs
+* the search and feeds `results`, so the dialog is index-agnostic. Compose `SearchDialog.Input`, the
+* `SearchDialog.Loading` / `SearchDialog.Empty` messages, a `SearchDialog.Results` of
+* `SearchDialog.Item`s, and a `SearchDialog.Footer` of `SearchDialog.Hint`s as children.
+*
+* @see {@link SearchDialog.Root.Props}
+*/
+function SearchDialogRoot({ open, onOpenChange, query, onQueryChange, results, loading = false, searching = false, onSelect, title = "Search", children }) {
+	const inputRef = useRef(null);
+	const listRef = useRef(null);
+	const [active, setActive] = useState(0);
+	useEffect(() => setActive(0), [results]);
+	useEffect(() => {
+		const row = listRef.current?.querySelector(`[data-index="${active}"]`);
+		if (typeof row?.scrollIntoView !== "function") return;
+		try {
+			row.scrollIntoView({ block: "nearest" });
+		} catch {}
+	}, [active]);
+	const value = useMemo(() => {
+		const select = (index) => {
+			const result = results[index];
+			if (result) onSelect(result, index);
+		};
+		const onKeyDown = (event) => {
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				setActive((i) => Math.min(i + 1, Math.max(results.length - 1, 0)));
+			} else if (event.key === "ArrowUp") {
+				event.preventDefault();
+				setActive((i) => Math.max(i - 1, 0));
+			} else if (event.key === "Enter") {
+				if (results[active]) {
+					event.preventDefault();
+					select(active);
+				}
+			}
+		};
+		return {
+			state: {
+				query,
+				active,
+				results,
+				loading,
+				searching
+			},
+			actions: {
+				setQuery: onQueryChange,
+				select,
+				setActive,
+				onKeyDown
+			},
+			meta: {
+				title,
+				inputRef,
+				listRef
+			}
+		};
+	}, [
+		query,
+		active,
+		results,
+		loading,
+		searching,
+		onQueryChange,
+		onSelect,
+		title
+	]);
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { "data-slot": SEARCH_DIALOG_SLOTS.backdrop }), /* @__PURE__ */ jsxs(Dialog.Popup, {
+			elevation: "menu",
+			"data-slot": SEARCH_DIALOG_SLOTS.root,
+			initialFocus: inputRef,
+			children: [/* @__PURE__ */ jsx(Dialog.Title, {
+				"data-slot": "noctis-visually-hidden",
+				render: /* @__PURE__ */ jsx(VisuallyHidden, {}),
+				children: title
+			}), /* @__PURE__ */ jsx(SearchDialogProvider, {
+				value,
+				children
+			})]
+		})] })
+	});
+}
+//#endregion
+export { SearchDialogRoot };

package/dist/components/search-dialog/search-dialog.context.d.ts

@@ -0,0 +1,15 @@
+//#region src/components/search-dialog/search-dialog.context.d.ts
+/** A single search hit rendered as a row. `excerpt` is trusted HTML (Pagefind wraps matches in `<mark>`). */
+interface SearchResult {
+  id: string;
+  title: string;
+  /** A breadcrumb / path shown opposite the title. */
+  crumb?: string;
+  /** Excerpt HTML with `<mark>` around matched terms. */
+  excerpt?: string;
+  /** For endpoint-style rows: an HTTP method + path shown instead of the crumb. */
+  method?: string;
+  path?: string;
+}
+//#endregion
+export { SearchResult };

package/dist/components/search-dialog/search-dialog.context.js

@@ -0,0 +1,20 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/search-dialog/search-dialog.context.ts
+/** Resolve the active pane from the dialog state, in the gate's priority order. */
+function searchDialogPhase(state) {
+	if (state.loading) return "loading";
+	if (state.query.trim().length === 0) return "empty";
+	if (state.results.length === 0) return state.searching ? "searching" : "no-results";
+	return "results";
+}
+const SearchDialogContext = createContext(null);
+const SearchDialogProvider = SearchDialogContext.Provider;
+/** Read the dialog context, throwing a named error when a part renders outside `SearchDialog.Root`. */
+function useSearchDialogContext(part) {
+	const context = use(SearchDialogContext);
+	if (context === null) throw new Error(`SearchDialog.${part} must be rendered inside <SearchDialog.Root>.`);
+	return context;
+}
+//#endregion
+export { SearchDialogProvider, searchDialogPhase, useSearchDialogContext };

package/dist/components/search-dialog/search-dialog.d.ts

@@ -0,0 +1,84 @@
+import { SearchDialogInput } from "./parts/input.js";
+import { SearchDialogEmpty, SearchDialogFooter, SearchDialogHint, SearchDialogLoading } from "./parts/messages.js";
+import { SearchResult } from "./search-dialog.context.js";
+import { SearchDialogItem, SearchDialogResults } from "./parts/results.js";
+import { SearchDialogRoot } from "./parts/root.js";
+import { SearchDialogItemPropsArgs, SearchDialogPartProps, footerProps, inputProps, itemProps, resultsProps, rootProps } from "./search-dialog.props.js";
+
+//#region src/components/search-dialog/search-dialog.d.ts
+/**
+ * The documentation search dialog — a centred, focus-trapped command palette built on Base UI's
+ * `Dialog`. The shell (backdrop blur, scale-fade enter/exit, a fixed height so the panel never jumps
+ * as results stream in), the keyboard contract (↑/↓ move the active row, Enter opens it, Esc closes),
+ * and the result rows (title, crumb or method+path, `<mark>`-highlighted excerpt) all live here; the
+ * caller owns the data — it runs the search and feeds `results`, so the dialog is index-agnostic.
+ *
+ * Compose from parts: `SearchDialog.Root` owns the open state, the query, and the keyboard-driven
+ * active row; `SearchDialog.Input` is the query field; `SearchDialog.Loading` and `SearchDialog.Empty`
+ * supply the loading, empty-query, searching, and no-results copy (the root gates which one shows);
+ * `SearchDialog.Results` lists one `SearchDialog.Item` per hit; and `SearchDialog.Footer` holds the
+ * `SearchDialog.Hint` keyboard hints. All copy arrives as part children, so a consuming app routes it
+ * through its own i18n.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop types are exposed through
+ * the matching `SearchDialog` namespace — e.g. `SearchDialog.Item.Props`.
+ */
+declare const SearchDialog: {
+  /** Owns the open state, query, and active row. `SearchDialog.Root.props()` → its spreadable popup prop bag. */Root: typeof SearchDialogRoot & {
+    props: typeof rootProps;
+  }; /** The query field. `SearchDialog.Input.props()` → its spreadable prop bag. */
+  Input: typeof SearchDialogInput & {
+    props: typeof inputProps;
+  }; /** The listbox of hits. `SearchDialog.Results.props()` → its spreadable prop bag. */
+  Results: typeof SearchDialogResults & {
+    props: typeof resultsProps;
+  }; /** One result row. `SearchDialog.Item.props({ active, index })` → its spreadable prop bag for a foreign element. */
+  Item: typeof SearchDialogItem & {
+    props: typeof itemProps;
+  }; /** The empty / searching / no-results copy. */
+  Empty: typeof SearchDialogEmpty; /** The index-loading copy. */
+  Loading: typeof SearchDialogLoading; /** The keyboard-hints row. `SearchDialog.Footer.props()` → its spreadable prop bag. */
+  Footer: typeof SearchDialogFooter & {
+    props: typeof footerProps;
+  }; /** One footer hint. */
+  Hint: typeof SearchDialogHint;
+};
+/**
+ * Per-part prop types, mirroring Base UI's `Component.Part.Props` convention. Types-only — it emits no
+ * runtime code and merges with the `SearchDialog` object above, so `SearchDialog.Item` is the component
+ * value while `SearchDialog.Item.Props` is its prop type.
+ */
+declare namespace SearchDialog {
+  /** The spreadable data-attribute prop bag every `SearchDialog.*.props()` returns (D12). */
+  type PartProps = SearchDialogPartProps;
+  namespace Root {
+    type Props = SearchDialogRoot.Props;
+  }
+  namespace Input {
+    type Props = SearchDialogInput.Props;
+  }
+  namespace Results {
+    type Props = SearchDialogResults.Props;
+  }
+  namespace Item {
+    type Props = SearchDialogItem.Props;
+    /** A single search hit — the data shape a caller builds its `results` array from. */
+    type Result = SearchResult;
+    /** Argument to the `SearchDialog.Item.props(...)` escape-hatch helper. */
+    type PropsArgs = SearchDialogItemPropsArgs;
+  }
+  namespace Empty {
+    type Props = SearchDialogEmpty.Props;
+  }
+  namespace Loading {
+    type Props = SearchDialogLoading.Props;
+  }
+  namespace Footer {
+    type Props = SearchDialogFooter.Props;
+  }
+  namespace Hint {
+    type Props = SearchDialogHint.Props;
+  }
+}
+//#endregion
+export { SearchDialog };

package/dist/components/search-dialog/search-dialog.js

@@ -0,0 +1,43 @@
+import { SearchDialogInput } from "./parts/input.js";
+import { SearchDialogEmpty, SearchDialogFooter, SearchDialogHint, SearchDialogLoading } from "./parts/messages.js";
+import { SearchDialogItem, SearchDialogResults } from "./parts/results.js";
+import { SearchDialogRoot } from "./parts/root.js";
+import { footerProps, inputProps, itemProps, resultsProps, rootProps } from "./search-dialog.props.js";
+//#region src/components/search-dialog/search-dialog.tsx
+/**
+* The documentation search dialog — a centred, focus-trapped command palette built on Base UI's
+* `Dialog`. The shell (backdrop blur, scale-fade enter/exit, a fixed height so the panel never jumps
+* as results stream in), the keyboard contract (↑/↓ move the active row, Enter opens it, Esc closes),
+* and the result rows (title, crumb or method+path, `<mark>`-highlighted excerpt) all live here; the
+* caller owns the data — it runs the search and feeds `results`, so the dialog is index-agnostic.
+*
+* Compose from parts: `SearchDialog.Root` owns the open state, the query, and the keyboard-driven
+* active row; `SearchDialog.Input` is the query field; `SearchDialog.Loading` and `SearchDialog.Empty`
+* supply the loading, empty-query, searching, and no-results copy (the root gates which one shows);
+* `SearchDialog.Results` lists one `SearchDialog.Item` per hit; and `SearchDialog.Footer` holds the
+* `SearchDialog.Hint` keyboard hints. All copy arrives as part children, so a consuming app routes it
+* through its own i18n.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop types are exposed through
+* the matching `SearchDialog` namespace — e.g. `SearchDialog.Item.Props`.
+*/
+const SearchDialog = {
+	/** Owns the open state, query, and active row. `SearchDialog.Root.props()` → its spreadable popup prop bag. */
+	Root: Object.assign(SearchDialogRoot, { props: rootProps }),
+	/** The query field. `SearchDialog.Input.props()` → its spreadable prop bag. */
+	Input: Object.assign(SearchDialogInput, { props: inputProps }),
+	/** The listbox of hits. `SearchDialog.Results.props()` → its spreadable prop bag. */
+	Results: Object.assign(SearchDialogResults, { props: resultsProps }),
+	/** One result row. `SearchDialog.Item.props({ active, index })` → its spreadable prop bag for a foreign element. */
+	Item: Object.assign(SearchDialogItem, { props: itemProps }),
+	/** The empty / searching / no-results copy. */
+	Empty: SearchDialogEmpty,
+	/** The index-loading copy. */
+	Loading: SearchDialogLoading,
+	/** The keyboard-hints row. `SearchDialog.Footer.props()` → its spreadable prop bag. */
+	Footer: Object.assign(SearchDialogFooter, { props: footerProps }),
+	/** One footer hint. */
+	Hint: SearchDialogHint
+};
+//#endregion
+export { SearchDialog };