@fairgarden/design 0.1.0-alpha.1 → 0.1.0-alpha.2

package/overlays/preview-card/preview-card.module.css

@@ -5,8 +5,8 @@
  *
  * The anchored overlay surface (§10.1): the `white` scope's --primary1 face,
  * a --border-size-2 --primary12 frame in both modes [D92, D156],
- * --ds-radius-8, 240–360 px wide, --size-px-3 padding. Motion is instant or
- * a clip reveal from the trigger side, never a fade [D91]. Shown only with
+ * --radius-2-25, 240–360 px wide, --size-px-3 padding. No motion: a hover
+ * preview appears and goes at once [D205]. Shown only with
  * hover and a fine pointer. Colors are role variables only; local custom
  * properties carry dimensions only.
  */
@@ -36,21 +36,20 @@
   }
 
   .base {
-    --preview-card-tail-inline: var(--ds-space-12);
-    --preview-card-tail-block: calc(var(--ds-space-12) / 2 + var(--border-size-2));
+    --preview-card-tail-inline: var(--size-px-2-5);
+    --preview-card-tail-block: calc(var(--size-px-2-5) / 2 + var(--border-size-2));
     --preview-card-bleed: calc(-1 * var(--preview-card-tail-block));
-    --preview-card-clip-from: inset(var(--preview-card-bleed));
 
     position: relative;
     display: grid;
     row-gap: var(--size-px-2);
     box-sizing: border-box;
     inline-size: max-content;
-    min-inline-size: min(var(--size-px-13), calc(100vw - 2 * var(--ds-space-margin)));
-    max-inline-size: min(var(--ds-size-overlay-max), calc(100vw - 2 * var(--ds-space-margin)));
+    min-inline-size: min(var(--size-px-13), calc(100vw - 2 * var(--fgd-space-margin)));
+    max-inline-size: min(var(--fgd-size-overlay-max), calc(100vw - 2 * var(--fgd-space-margin)));
     padding: var(--size-px-3);
     border: var(--border-size-2) solid var(--primary12);
-    border-radius: var(--ds-radius-8);
+    border-radius: var(--radius-2-25);
     background-color: var(--primary1);
     color: var(--primary12);
     clip-path: inset(var(--preview-card-bleed));
@@ -63,7 +62,7 @@
     block-size: auto;
     aspect-ratio: var(--ratio-widescreen);
     object-fit: cover;
-    border-radius: max(var(--radius-1), calc(var(--ds-radius-8) - var(--size-px-3)));
+    border-radius: max(var(--radius-1), calc(var(--radius-2-25) - var(--size-px-3)));
   }
 
   .title,
@@ -91,14 +90,6 @@
     stroke-width: var(--border-size-2);
   }
 
-  @media (prefers-reduced-motion: no-preference) {
-    .base {
-      transition-property: clip-path;
-      transition-duration: var(--ds-duration-disclosure);
-      transition-timing-function: var(--ease-out-3);
-    }
-  }
-
   /* Hover and a fine pointer only: on touch, stylus and coarse pointers the link simply navigates. */
   @media (hover: none) and (pointer: coarse),(hover: none) and (pointer: fine),(hover) and (pointer: coarse) {
     .positioner,
@@ -109,41 +100,6 @@
 }
 
 @layer states {
-  .base[data-side='bottom'] {
-    --preview-card-clip-from: inset(
-      var(--preview-card-bleed) var(--preview-card-bleed) 100% var(--preview-card-bleed)
-    );
-  }
-
-  .base[data-side='top'] {
-    --preview-card-clip-from: inset(
-      100% var(--preview-card-bleed) var(--preview-card-bleed) var(--preview-card-bleed)
-    );
-  }
-
-  .base[data-side='left'],
-  .base[data-side='inline-start'] {
-    --preview-card-clip-from: inset(
-      var(--preview-card-bleed) var(--preview-card-bleed) var(--preview-card-bleed) 100%
-    );
-  }
-
-  .base[data-side='right'],
-  .base[data-side='inline-end'] {
-    --preview-card-clip-from: inset(
-      var(--preview-card-bleed) 100% var(--preview-card-bleed) var(--preview-card-bleed)
-    );
-  }
-
-  .base[data-starting-style],
-  .base[data-ending-style] {
-    clip-path: var(--preview-card-clip-from);
-  }
-
-  .base[data-instant] {
-    transition: none;
-  }
-
   .arrow[data-side='bottom'] {
     inset-block-start: calc(-1 * var(--preview-card-tail-block));
   }
@@ -153,13 +109,22 @@
     rotate: 180deg;
   }
 
-  .arrow[data-side='left'],
+  /* The physical sides place the tail physically, so it faces the trigger on a right-to-left page too. */
+  .arrow[data-side='left'] {
+    right: calc(-1 * (var(--preview-card-tail-inline) + var(--preview-card-tail-block)) / 2);
+    rotate: 90deg;
+  }
+
+  .arrow[data-side='right'] {
+    left: calc(-1 * (var(--preview-card-tail-inline) + var(--preview-card-tail-block)) / 2);
+    rotate: -90deg;
+  }
+
   .arrow[data-side='inline-start'] {
     inset-inline-end: calc(-1 * (var(--preview-card-tail-inline) + var(--preview-card-tail-block)) / 2);
     rotate: 90deg;
   }
 
-  .arrow[data-side='right'],
   .arrow[data-side='inline-end'] {
     inset-inline-start: calc(-1 * (var(--preview-card-tail-inline) + var(--preview-card-tail-block)) / 2);
     rotate: -90deg;

package/overlays/search-dialog/SearchDialog.d.ts

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { useSearch } from '@fairgarden/docs/useSearch';
+import type { SearchResult, Sitemap, UseSearchOptions } from '@fairgarden/docs/useSearch/types';
+import type { SearchDialogVariants } from './variants';
+/** The engine's per-query options: the second argument of `useSearch().search`. */
+export type SearchDialogSearchBy = NonNullable<Parameters<ReturnType<typeof useSearch>['search']>[1]>;
+/** `useSearch`'s options (all but `sitemap`), plus the per-query options. */
+export type SearchDialogSearchOptions = Omit<UseSearchOptions, 'sitemap'> & {
+    /**
+     * Passed with every query, `search(value, searchBy)`. Replaces the
+     * default, `{ groupBy: { properties: ['group'], maxResult: 5 } }`.
+     */
+    searchBy?: SearchDialogSearchBy;
+};
+/** Props for SearchDialog. */
+export type SearchDialogProps = {
+    /**
+     * The sitemap loader `useSearch` indexes, e.g. `() => import('./sitemap')`.
+     * Read once, on mount, when the index builds; an inline arrow is fine.
+     */
+    sitemap: () => Promise<{
+        sitemap?: Sitemap;
+    }>;
+    /**
+     * `useSearch` options, merged over the source's defaults:
+     * `maxDefaultResults: 10`, `tolerance: 1`, `limit: 20`,
+     * `enableStemming: true`. Keep `flattenPage` and `generateSlug` stable:
+     * `useSearch` rebuilds its index when they change.
+     */
+    searchOptions?: SearchDialogSearchOptions;
+    /**
+     * A plain activation of a row (click, or Enter on the highlighted row)
+     * closes the dialog, `preventDefault()`s the row's link and calls this
+     * with the engine's `buildResultUrl(result)`; a Next.js site passes
+     * `(href) => router.push(href)`. Without it, the link navigates natively.
+     * A modifier click always follows the link natively and leaves the dialog
+     * open.
+     */
+    onNavigate?: (href: string, result: SearchResult) => void;
+    /**
+     * Controlled open. SearchDialog calls `onOpenChange` inside the morph's
+     * `flushSync`, so set `open` synchronously in it.
+     */
+    open?: boolean;
+    /** Default `false`. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** After the morph (or fallback) finishes. On close, the results are already reset to the engine's `defaultResults`. */
+    onOpenChangeComplete?: (open: boolean) => void;
+    /**
+     * ⌘K / Ctrl K: a `keydown` listener on `window` in the capture phase,
+     * `preventDefault` + `stopPropagation`, guarded while open, opening or
+     * closing. Also shows the platform-aware hint and, from `--lg-n-above`,
+     * the "esc" button in place of the "Close search" button. The hint renders
+     * nothing on the server, then "⌘K" on Apple platforms or "Ctrl K"
+     * elsewhere. One per page. Default `false`.
+     */
+    keyboardShortcut?: boolean;
+    /** Milliseconds before empty results replace the list. Default `400`. */
+    emptyDelay?: number;
+    /** Trigger text, input placeholder and the dialog's accessible name. Default `"Search"`. */
+    label?: string;
+    /** The score badge on each row. Default: outside production builds, as in the source. */
+    showScores?: boolean;
+    /**
+     * Primary Radix scale: frame, labels, highlighted row, focus ring. Never
+     * defaulted; omitted, the trigger inherits the scope and the popup takes
+     * the `white` overlay preset's default [D133, D139].
+     */
+    primary?: SearchDialogVariants['primary'];
+    /** Secondary Radix scale. Never defaulted. */
+    secondary?: SearchDialogVariants['secondary'];
+    /** On the trigger. */
+    className?: string;
+    /**
+     * The expanding box's morph between the trigger and the dialog [D194].
+     * Default `true`; `false` opens and closes the dialog at once. It also
+     * honours the shared switch, `--fgd-outline-morph: none` on the trigger
+     * or an ancestor, and a 0 duration token (§9.14, §9.17) [D204].
+     */
+    morph?: boolean;
+};
+/**
+ * The search dialog over a `@fairgarden/docs` sitemap: the trigger, and the
+ * dialog in a portal. It owns the engine (`useSearch`), open state, the
+ * shortcut listener, the delayed results copy and the transitions.
+ */
+export declare function SearchDialog(props: SearchDialogProps): React.JSX.Element;
+//# sourceMappingURL=SearchDialog.d.ts.map

package/overlays/search-dialog/SearchDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchDialog.d.ts","sourceRoot":"","sources":["../../src/overlays/search-dialog/SearchDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,KAAK,EACV,YAAY,EACZ,OAAO,EACP,gBAAgB,EAEjB,MAAM,kCAAkC,CAAA;AAKzC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAiDtD,mFAAmF;AACnF,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAC5C,UAAU,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CACtD,CAAA;AAED,6EAA6E;AAC7E,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,GAAG;IAC1E;;;OAGG;IACH,QAAQ,CAAC,EAAE,oBAAoB,CAAA;CAChC,CAAA;AAED,8BAA8B;AAC9B,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,OAAO,EAAE,MAAM,OAAO,CAAC;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;IAC7C;;;;;OAKG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAA;IACzC;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;IACzD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,uBAAuB;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,wHAAwH;IACxH,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,4FAA4F;IAC5F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yFAAyF;IACzF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAA;IACzC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAA;IAC7C,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAyBD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4QxE"}

package/overlays/search-dialog/SearchDialog.js

@@ -0,0 +1,220 @@
+'use client';
+import * as React from 'react';
+import { useSearch } from '@fairgarden/docs/useSearch';
+import { startExpandingTransition, useExpandingBoxName } from '../../foundations/expanding-box';
+import { SearchDialogPopup } from './SearchDialogPopup';
+import { SearchDialogTrigger } from './SearchDialogTrigger';
+/** The source's `useSearch` options. */
+const searchDefaults = {
+    maxDefaultResults: 10,
+    tolerance: 1,
+    limit: 20,
+    enableStemming: true,
+};
+/** The source's per-query options: at most five results per group. */
+const defaultSearchBy = {
+    groupBy: { properties: ['group'], maxResult: 5 },
+};
+const noOptions = {};
+/** How long a started open or close blocks the next one, as in the source. */
+const REENTRY_GUARD_MS = 100;
+/**
+ * The search dialog over a `@fairgarden/docs` sitemap: the trigger, and the
+ * dialog in a portal. It owns the engine (`useSearch`), open state, the
+ * shortcut listener, the delayed results copy and the transitions.
+ */
+export function SearchDialog(props) {
+    const { sitemap, searchOptions = noOptions, onNavigate, open: openProp, defaultOpen = false, onOpenChange, onOpenChangeComplete, keyboardShortcut = false, emptyDelay = 400, label = 'Search', showScores = process.env.NODE_ENV !== 'production', primary, secondary, className, morph = true, } = props;
+    const { searchBy = defaultSearchBy, ...engineOptions } = searchOptions;
+    // useSearch rebuilds its index whenever the loader's identity changes; an
+    // inline `() => import(…)` must not rebuild it on every render.
+    const sitemapRef = React.useRef(sitemap);
+    React.useLayoutEffect(() => {
+        sitemapRef.current = sitemap;
+    });
+    const loadSitemap = React.useCallback(() => sitemapRef.current(), []);
+    const { results, defaultResults, search, buildResultUrl, isReady } = useSearch({
+        ...searchDefaults,
+        ...engineOptions,
+        sitemap: loadSitemap,
+    });
+    const name = useExpandingBoxName();
+    const inputId = React.useId();
+    const triggerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
+    const controlled = openProp !== undefined;
+    const open = controlled ? openProp : innerOpen;
+    const [query, setQuery] = React.useState('');
+    // The source's delayed copy: non-empty results apply at once, empty ones
+    // after the delay, so "No results" never flashes while typing. A layout
+    // effect, so a new non-empty list replaces the old one before paint.
+    const [shown, setShown] = React.useState(results);
+    React.useLayoutEffect(() => {
+        if (results.results.length === 0) {
+            const timeout = window.setTimeout(() => setShown(results), emptyDelay);
+            return () => window.clearTimeout(timeout);
+        }
+        setShown(results);
+        return undefined;
+    }, [results, emptyDelay]);
+    // The latest values, for handlers that outlive a render.
+    const openRef = React.useRef(open);
+    const latest = React.useRef({
+        controlled,
+        onOpenChange,
+        onOpenChangeComplete,
+        defaultResults,
+        query,
+        search,
+        searchBy,
+        morph,
+    });
+    React.useLayoutEffect(() => {
+        openRef.current = open;
+        latest.current = {
+            controlled,
+            onOpenChange,
+            onOpenChangeComplete,
+            defaultResults,
+            query,
+            search,
+            searchBy,
+            morph,
+        };
+    });
+    // A query typed before the index was ready runs once it is.
+    React.useEffect(() => {
+        if (!isReady)
+            return;
+        const { query: pending, search: runSearch, searchBy: by } = latest.current;
+        if (pending.trim())
+            void runSearch(pending, by);
+    }, [isReady]);
+    const openingRef = React.useRef(false);
+    const closingRef = React.useRef(false);
+    const guardTimers = React.useRef([]);
+    React.useEffect(() => {
+        const timers = guardTimers.current;
+        return () => timers.forEach((timer) => window.clearTimeout(timer));
+    }, []);
+    const releaseLater = React.useCallback((guard) => {
+        const timer = window.setTimeout(() => {
+            guard.current = false;
+            guardTimers.current = guardTimers.current.filter((pending) => pending !== timer);
+        }, REENTRY_GUARD_MS);
+        guardTimers.current.push(timer);
+    }, []);
+    const setOpen = React.useCallback((next) => {
+        if (!latest.current.controlled)
+            setInnerOpen(next);
+        latest.current.onOpenChange?.(next);
+    }, []);
+    const completion = React.useRef(null);
+    const finish = React.useCallback((next) => {
+        if (!next) {
+            setShown(latest.current.defaultResults);
+            setQuery('');
+        }
+        latest.current.onOpenChangeComplete?.(next);
+    }, []);
+    // Both the morph and the Dialog's own transition report here; the later one completes.
+    const settle = React.useCallback((next, from) => {
+        const current = completion.current;
+        if (!current) {
+            // An open state changed from outside (controlled): the Dialog's report is the only one.
+            if (from === 'dialog')
+                finish(next);
+            return;
+        }
+        if (current.open !== next)
+            return;
+        current.pending -= 1;
+        if (current.pending > 0)
+            return;
+        completion.current = null;
+        finish(next);
+    }, [finish]);
+    const requestOpen = React.useCallback(() => {
+        if (openingRef.current || openRef.current)
+            return;
+        openingRef.current = true;
+        completion.current = { open: true, pending: 2 };
+        void startExpandingTransition(() => setOpen(true), {
+            direction: 'open',
+            enabled: latest.current.morph,
+            source: triggerRef.current,
+        }).then(() => settle(true, 'morph'));
+        releaseLater(openingRef);
+    }, [releaseLater, setOpen, settle]);
+    const requestClose = React.useCallback(() => {
+        if (closingRef.current || !openRef.current)
+            return;
+        closingRef.current = true;
+        completion.current = { open: false, pending: 2 };
+        void startExpandingTransition(() => setOpen(false), {
+            direction: 'close',
+            enabled: latest.current.morph,
+            source: triggerRef.current,
+        }).then(() => settle(false, 'morph'));
+        releaseLater(closingRef);
+    }, [releaseLater, setOpen, settle]);
+    const handleDialogOpenChange = React.useCallback((next) => (next ? requestOpen() : requestClose()), [requestOpen, requestClose]);
+    const handleDialogOpenChangeComplete = React.useCallback((next) => settle(next, 'dialog'), [settle]);
+    // Focus returns to the trigger inside the morph's flushSync, so the new
+    // snapshot holds its ring; the Dialog's finalFocus covers every other close.
+    const wasOpen = React.useRef(open);
+    React.useLayoutEffect(() => {
+        if (wasOpen.current && !open)
+            triggerRef.current?.focus({ preventScroll: true });
+        wasOpen.current = open;
+    }, [open]);
+    // ⌘K / Ctrl K, in the capture phase so the page's own handlers never see it.
+    React.useEffect(() => {
+        if (!keyboardShortcut)
+            return undefined;
+        const handleKeyDown = (event) => {
+            if (!(event.metaKey || event.ctrlKey) || event.shiftKey || event.altKey)
+                return;
+            if (event.key !== 'k' && event.key !== 'K')
+                return;
+            // Another search dialog on the page took this keystroke: one dialog opens, not two.
+            if (event.defaultPrevented)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            if (!openRef.current && !openingRef.current && !closingRef.current)
+                requestOpen();
+        };
+        window.addEventListener('keydown', handleKeyDown, { capture: true });
+        return () => window.removeEventListener('keydown', handleKeyDown, { capture: true });
+    }, [keyboardShortcut, requestOpen]);
+    const handleValueChange = React.useCallback((value) => {
+        setQuery(value);
+        if (!isReady)
+            return;
+        void search(value, searchBy);
+    }, [isReady, search, searchBy]);
+    const handleItemClick = React.useCallback((event, result) => {
+        if (event.defaultPrevented)
+            return;
+        // A modifier click opens the link its own way; the dialog stays open.
+        if (event.button !== 0 ||
+            event.metaKey ||
+            event.ctrlKey ||
+            event.shiftKey ||
+            event.altKey) {
+            return;
+        }
+        if (onNavigate)
+            event.preventDefault();
+        requestClose();
+        onNavigate?.(buildResultUrl(result), result);
+    }, [buildResultUrl, onNavigate, requestClose]);
+    // Blank input: the engine's default results, even if an empty result's delay is still pending.
+    const current = query.trim() === '' ? defaultResults : shown;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SearchDialogTrigger, { ref: triggerRef, name: name, open: open, label: label, keyboardShortcut: keyboardShortcut, onClick: requestOpen, primary: primary, secondary: secondary, className: className }),
+        React.createElement(SearchDialogPopup, { name: name, open: open, onOpenChange: handleDialogOpenChange, onOpenChangeComplete: handleDialogOpenChangeComplete, onClose: requestClose, triggerRef: triggerRef, inputRef: inputRef, inputId: inputId, label: label, keyboardShortcut: keyboardShortcut, results: current, query: query, onValueChange: handleValueChange, onItemClick: handleItemClick, buildResultUrl: buildResultUrl, showScores: showScores, primary: primary, secondary: secondary })));
+}
+//# sourceMappingURL=SearchDialog.js.map

package/overlays/search-dialog/SearchDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchDialog.js","sourceRoot":"","sources":["../../src/overlays/search-dialog/SearchDialog.tsx"],"names":[],"mappings":"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"}

package/overlays/search-dialog/SearchDialogPopup.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import type { SearchResult, UseSearchResult } from '@fairgarden/docs/useSearch/types';
+import { type SearchDialogVariants } from './variants';
+/** Props for SearchDialogPopup, all set by SearchDialog. */
+export type SearchDialogPopupProps = {
+    /** The expanding-box pair's name. */
+    name: string;
+    open: boolean;
+    /** The Dialog's own requests (outside press, Escape outside the input). */
+    onOpenChange: (open: boolean) => void;
+    onOpenChangeComplete: (open: boolean) => void;
+    /** Escape in the input, the esc key cap and the "Close search" button. */
+    onClose: () => void;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    inputId: string;
+    label: string;
+    keyboardShortcut: boolean;
+    /** The engine's results to show (the delayed copy): groups, count and elapsed time. */
+    results: UseSearchResult<unknown>['results'];
+    query: string;
+    onValueChange: (value: string) => void;
+    /** A row's activation; its link goes to `buildResultUrl(result)`. */
+    onItemClick: (event: React.MouseEvent<HTMLElement>, result: SearchResult) => void;
+    /** The engine's `buildResultUrl`. */
+    buildResultUrl: (result: SearchResult) => string;
+    showScores: boolean;
+    primary: SearchDialogVariants['primary'];
+    secondary: SearchDialogVariants['secondary'];
+};
+/**
+ * Base UI Dialog (Portal, colorless Backdrop, Viewport, Popup) holding the
+ * expanded `sheet` ExpandingBox with the Autocomplete: below --md-n-above
+ * the sheet, a panel inset by the page margin and the safe areas; from it,
+ * the centered panel. Modal: the page stays
+ * visible, inert and scroll-locked, never dimmed.
+ */
+export declare function SearchDialogPopup(props: SearchDialogPopupProps): React.JSX.Element;
+//# sourceMappingURL=SearchDialogPopup.d.ts.map

package/overlays/search-dialog/SearchDialogPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchDialogPopup.d.ts","sourceRoot":"","sources":["../../src/overlays/search-dialog/SearchDialogPopup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EACV,YAAY,EAEZ,eAAe,EAChB,MAAM,kCAAkC,CAAA;AAmBzC,OAAO,EAAuC,KAAK,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAS3F,4DAA4D;AAC5D,MAAM,MAAM,sBAAsB,GAAG;IACnC,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,OAAO,CAAA;IACb,2EAA2E;IAC3E,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,oBAAoB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAC7C,0EAA0E;IAC1E,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAClD,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,EAAE,OAAO,CAAA;IACzB,uFAAuF;IACvF,OAAO,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAA;IAC5C,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,qEAAqE;IACrE,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;IACjF,qCAAqC;IACrC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,MAAM,CAAA;IAChD,UAAU,EAAE,OAAO,CAAA;IACnB,OAAO,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAA;IACxC,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAA;CAC7C,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAgClF"}

package/overlays/search-dialog/SearchDialogPopup.js

@@ -0,0 +1,80 @@
+'use client';
+import * as React from 'react';
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { Button } from '../../actions/button';
+import { ScrollArea } from '../../data/scroll-area';
+import { ExpandingBox, ExpandingBoxExtra, ExpandingBoxMain, expandingBoxParts, } from '../../foundations/expanding-box';
+import { Icon } from '../../foundations/icon';
+import { cx } from '../../utils/className';
+import { highlightMatch } from '../../utils/highlightMatch';
+import { OverlayScope, overlayActionClassName, overlayAttributes, overlayScales, } from '../../utils/overlay';
+import { searchDialog, searchDialogTypeIcons } from './variants';
+import styles from './search-dialog.module.css';
+/**
+ * Base UI Dialog (Portal, colorless Backdrop, Viewport, Popup) holding the
+ * expanded `sheet` ExpandingBox with the Autocomplete: below --md-n-above
+ * the sheet, a panel inset by the page margin and the safe areas; from it,
+ * the centered panel. Modal: the page stays
+ * visible, inert and scroll-locked, never dimmed.
+ */
+export function SearchDialogPopup(props) {
+    const { open, onOpenChange, onOpenChangeComplete, triggerRef, inputRef, label } = props;
+    const scales = overlayScales(props.primary, props.secondary);
+    return (React.createElement(BaseDialog.Root, { open: open, onOpenChange: onOpenChange, onOpenChangeComplete: onOpenChangeComplete },
+        React.createElement(BaseDialog.Portal, null,
+            React.createElement(BaseDialog.Backdrop, { className: styles.backdrop }),
+            React.createElement(BaseDialog.Viewport, { className: styles.viewport },
+                React.createElement(BaseDialog.Popup, { ...overlayAttributes, "aria-label": label, initialFocus: inputRef, finalFocus: triggerRef, className: searchDialog({
+                        primary: scales.primary,
+                        secondary: scales.secondary,
+                        className: cx(expandingBoxParts.host, styles.popup, overlayActionClassName),
+                    }) },
+                    React.createElement(OverlayScope, null,
+                        React.createElement(SearchDialogPanel, { ...props })))))));
+}
+/** The expanded box: the input row, the results and the stats row. */
+function SearchDialogPanel(props) {
+    const { name, open, onClose, inputRef, inputId, label, keyboardShortcut, results, query, onValueChange, onItemClick, buildResultUrl, showScores, } = props;
+    const trimmed = query.trim();
+    // Focus lands on the input inside the morph's flushSync, so the new snapshot holds its ring.
+    React.useLayoutEffect(() => {
+        inputRef.current?.focus({ preventScroll: true });
+    }, [inputRef]);
+    return (React.createElement(ExpandingBox, { name: name, active: open, sheet: true, className: styles.box },
+        React.createElement(BaseAutocomplete.Root, { items: results.results, filter: null, open: true, inline: true, autoHighlight: true, value: query, onValueChange: onValueChange, onOpenChange: (next, details) => {
+                if (!next && details.reason === 'escape-key')
+                    onClose();
+            }, itemToStringValue: (result) => result.title || result.slug },
+            React.createElement(ExpandingBoxMain, { className: styles.inputRow },
+                React.createElement(Icon, { name: "search", className: styles.magnifier }),
+                React.createElement(BaseAutocomplete.Input, { ref: inputRef, id: inputId, className: styles.input, placeholder: label, "aria-label": label }),
+                keyboardShortcut ? (React.createElement("button", { type: "button", "aria-keyshortcuts": "Escape", className: cx(expandingBoxParts.end, styles.esc), onClick: onClose },
+                    React.createElement("kbd", { className: styles.escKey }, "esc"),
+                    React.createElement("span", { className: styles.visuallyHidden },
+                        ", close ",
+                        label.toLowerCase()))) : null,
+                React.createElement(Button, { iconOnly: true, icon: "close", size: "sm", className: cx(expandingBoxParts.end, styles.closeIcon), onClick: onClose }, `Close ${label.toLowerCase()}`)),
+            React.createElement(ExpandingBoxExtra, { className: styles.results },
+                React.createElement(ScrollArea, { kind: "panel", maxBlockSize: "none", className: styles.scroll },
+                    React.createElement(BaseAutocomplete.Empty, { className: styles.empty }, trimmed ? `No results for '${trimmed}'` : null),
+                    React.createElement(BaseAutocomplete.List, { className: styles.list }, (group) => (React.createElement(BaseAutocomplete.Group, { key: group.group, items: group.items, className: styles.group },
+                        group.group !== 'Default' ? (React.createElement(BaseAutocomplete.GroupLabel, { className: styles.groupLabel }, group.group)) : null,
+                        React.createElement(BaseAutocomplete.Collection, null, (result, index) => (React.createElement(SearchDialogItem, { key: result.id || index, result: result, href: buildResultUrl(result), query: query, showScores: showScores, onClick: onItemClick })))))))),
+            React.createElement(BaseAutocomplete.Status, { className: styles.stats },
+                React.createElement("span", { className: styles.statsText, "data-hidden": results.elapsed.raw > 0 ? undefined : '' }, `Found ${results.count} in ${results.elapsed.formatted}`)))));
+}
+/** One row: a link with the type icon, the title, and for pages the section and description. */
+function SearchDialogItem(props) {
+    const { result, href, query, showScores, onClick } = props;
+    const icon = searchDialogTypeIcons[result.type];
+    const page = result.type === 'page';
+    return (React.createElement(BaseAutocomplete.Item, { value: result, className: styles.item, render: React.createElement("a", { href: href }), onClick: (event) => onClick(event, result) },
+        React.createElement("span", { className: styles.itemHead },
+            icon ? React.createElement(Icon, { name: icon, className: styles.itemIcon }) : null,
+            React.createElement("span", { className: styles.itemTitle }, highlightMatch(result.title || result.slug, query, styles.match)),
+            page && result.sectionTitle ? (React.createElement("span", { className: styles.sectionTitle }, result.sectionTitle)) : null,
+            showScores && result.score != null ? (React.createElement("span", { className: styles.score }, result.score.toFixed(2))) : null),
+        page && result.description ? (React.createElement("span", { className: styles.description }, result.description)) : null));
+}
+//# sourceMappingURL=SearchDialogPopup.js.map

package/overlays/search-dialog/SearchDialogPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchDialogPopup.js","sourceRoot":"","sources":["../../src/overlays/search-dialog/SearchDialogPopup.tsx"],"names":[],"mappings":"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"}

package/overlays/search-dialog/SearchDialogTrigger.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type SearchDialogVariants } from './variants';
+/** Props for SearchDialogTrigger, all set by SearchDialog. */
+export type SearchDialogTriggerProps = {
+    ref: React.Ref<HTMLButtonElement>;
+    /** The expanding-box pair's name. */
+    name: string;
+    /** The dialog is open: the trigger's box hands its names to the dialog's and hides. */
+    open: boolean;
+    label: string;
+    keyboardShortcut: boolean;
+    onClick: () => void;
+    primary: SearchDialogVariants['primary'];
+    secondary: SearchDialogVariants['secondary'];
+    className: string | undefined;
+};
+/**
+ * The field-like trigger holding the collapsed, active-while-closed
+ * ExpandingBox: the magnifier, the label in --role-muted and, with
+ * `keyboardShortcut`, the ⌘K / Ctrl K hint from --lg-n-above. Mounted
+ * always, `visibility: hidden` while open.
+ */
+export declare function SearchDialogTrigger(props: SearchDialogTriggerProps): React.JSX.Element;
+//# sourceMappingURL=SearchDialogTrigger.d.ts.map

package/overlays/search-dialog/SearchDialogTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchDialogTrigger.d.ts","sourceRoot":"","sources":["../../src/overlays/search-dialog/SearchDialogTrigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,OAAO,EAAgB,KAAK,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAQpE,8DAA8D;AAC9D,MAAM,MAAM,wBAAwB,GAAG;IACrC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;IACjC,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,uFAAuF;IACvF,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,EAAE,OAAO,CAAA;IACzB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAA;IACxC,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAA;IAC5C,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;CAC9B,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAgDtF"}