@satinhq/kit 0.1.0-beta.2 → 0.1.0-beta.4

package/dist/search/SearchDrawer.d.ts

@@ -10,7 +10,7 @@ import { type Searchable } from './searchable.js';
  * visual state of each part (FLIP), on the native springs (searchMotion.ts). A retarget mid-way
  * starts from where everything is on screen, keeping the field's velocity.
  */
-export declare function SearchDrawer({ configuration, scroller, }: {
+export declare function SearchDrawer(props: {
     configuration: Searchable;
     scroller: RefObject<HTMLDivElement | null>;
 }): import("react").JSX.Element;

package/dist/search/SearchDrawer.js

@@ -1,4 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { readDeviceIdiom } from '../layout/deviceIdiom.js';
+import { PadSearchDrawer } from './PadSearchDrawer.js';
 import { NavigationSearchRow, navigationSearchRowOf } from '../navigation/NavigationSearchRow.js';
 import { animateElement } from '../motion/animate.js';
 import { beginSearchBackdrop, endSearchBackdrop, refreshSearchBackdrop } from './searchBackdrop.js';
@@ -28,7 +30,10 @@ const TITLE_SELECTOR = ':scope > :is([data-satin-list-title], [data-satin-scroll
  * visual state of each part (FLIP), on the native springs (searchMotion.ts). A retarget mid-way
  * starts from where everything is on screen, keeping the field's velocity.
  */
-export function SearchDrawer({ configuration, scroller, }) {
+export function SearchDrawer(props) {
+    return readDeviceIdiom() === 'pad' ? (_jsx(PadSearchDrawer, { ...props })) : (_jsx(PhoneSearchDrawer, { ...props }));
+}
+function PhoneSearchDrawer({ configuration, scroller, }) {
     validateSearchPresentation(configuration);
     const liquid = useContext(MaterialEffectContext);
     const navigator = useContext(NavigatorContext);
@@ -258,7 +263,7 @@ function pinProgress(drawer) {
 }
 /* How far the resting field has turned from its grey fill to glass. The field is glass from
  * scroll 0 only when the drawer is fixed in the bar: an explicit `navigationBarDrawer` placement
- * (SwiftUI's `displayMode: .always`) under an inline or inlineLarge title (native reference reference and reference
+ * with persistent visibility under an inline or inlineLarge title (native reference reference and reference
  * B/H, iOS 27.0: light 251 with a darker rim, dark 32 with a light rim). Under a large title the
  * field belongs to the content header, and an automatic placement's drawer scrolls away with the
  * content; both are a grey fill until content scrolls under the field (reference A/C/D/G: light 228-239,

package/dist/search/SearchSuggestionsPopover.d.ts

@@ -0,0 +1,6 @@
+import { type RefObject, type ReactNode } from 'react';
+/** Suggestions belong to their field, including when it lives in a split column. */
+export declare function SearchSuggestionsPopover({ anchor, children, }: {
+    anchor: RefObject<HTMLElement | null>;
+    children: ReactNode;
+}): import("react").ReactPortal | null;

package/dist/search/SearchSuggestionsPopover.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GlassBackground } from '../glass/GlassEffect.js';
+import { useSafeAreaMetrics } from '../safe-area/useSafeAreaMetrics.js';
+import { useLayoutEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+/** Suggestions belong to their field, including when it lives in a split column. */
+export function SearchSuggestionsPopover({ anchor, children, }) {
+    const metrics = useSafeAreaMetrics();
+    const [frame, setFrame] = useState();
+    useLayoutEffect(() => {
+        const element = anchor.current;
+        if (!element)
+            return;
+        const update = () => {
+            const rect = element.getBoundingClientRect();
+            const next = { left: Math.max(8, rect.left - 10), top: rect.bottom + 6, width: rect.width };
+            setFrame(previous => previous &&
+                previous.left === next.left &&
+                previous.top === next.top &&
+                previous.width === next.width
+                ? previous
+                : next);
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(element);
+        window.addEventListener('resize', update);
+        document.addEventListener('scroll', update, true);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', update);
+            document.removeEventListener('scroll', update, true);
+        };
+    }, [anchor]);
+    if (!frame)
+        return null;
+    return createPortal(_jsxs("div", { "data-satin-search-popover": "", style: {
+            ...frame,
+            maxHeight: Math.max(0, metrics.visualViewport.offsetTop + metrics.visualViewport.height - frame.top - 8),
+            overflowY: 'auto',
+        }, role: "list", "aria-label": "Suggestions", onPointerDown: event => event.preventDefault(), children: [_jsx(GlassBackground, { shape: { kind: 'roundedRectangle', cornerRadius: 28 } }), children] }), document.body);
+}

package/dist/search/SearchToolbarField.d.ts

@@ -1,8 +1,9 @@
 import { type RefObject } from 'react';
 import type { Searchable } from './searchable.js';
-export declare function SearchToolbarField({ configuration, scroller, host, navigation, }: {
+export declare function SearchToolbarField({ configuration, scroller, host, navigation, drawer, }: {
     configuration: Searchable;
     scroller: RefObject<HTMLDivElement | null>;
     host: HTMLElement;
     navigation?: boolean;
+    drawer?: boolean;
 }): import("react").JSX.Element;

package/dist/search/SearchToolbarField.js

@@ -1,5 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePadSearchFieldMotion } from './usePadSearchFieldMotion.js';
+import { PadSearchPresentationContext, PadSearchTabContext, } from './PadSearchPresentationContext.js';
 import { useContext, useLayoutEffect, useRef, useSyncExternalStore } from 'react';
+import { readDeviceIdiom } from '../layout/deviceIdiom.js';
 import { createPortal } from 'react-dom';
 import { GlassBackground } from '../glass/GlassEffect.js';
 import { MaterialEffectContext } from '../glass/liquidContext.js';
@@ -9,6 +12,7 @@ import { contactTarget, MENU_CONTACT_CLICK_WINDOW_MS, ownPhysicalContact, } from
 import { focusFromFramework } from '../focus/programmaticFocus.js';
 import { SymbolImage } from '../symbols/Symbol.js';
 import { TextField } from '../text-input/TextField.js';
+import { SearchSuggestionsPopover } from './SearchSuggestionsPopover.js';
 import { SearchScopesBar } from './SearchScopesBar.js';
 import { navigationChromeOf, ownBarParts, stackedOver, subscribeNever } from './searchChrome.js';
 import { useSearchPresentation } from './useSearchPresentation.js';
@@ -24,20 +28,31 @@ import { useSearchPresentation } from './useSearchPresentation.js';
  * placed among the bottom items. Suggestions stand in for the scroll view's content, as in the
  * drawer. Presentation is not animated yet: native's motion is not measured (spec notes, reference).
  */
-export function SearchToolbarField({ configuration, scroller, host, navigation = false, }) {
+export function SearchToolbarField({ configuration, scroller, host, navigation = false, drawer = false, }) {
+    const tabSearch = useContext(PadSearchPresentationContext);
+    const searchTab = useContext(PadSearchTabContext);
+    const setSearchOwner = tabSearch?.setOwner;
     const liquid = useContext(MaterialEffectContext);
     const navigator = useContext(NavigatorContext);
     const screenKey = useContext(ScreenContext)?.key;
     const stacked = useSyncExternalStore(navigator?.subscribe ?? subscribeNever, () => stackedOver(navigator, screenKey, scroller.current));
     const inputRef = useRef(null);
     const rowRef = useRef(null);
-    const search = useSearchPresentation(configuration, inputRef);
+    const pad = navigation && readDeviceIdiom() === 'pad';
+    const search = useSearchPresentation(configuration, inputRef, pad);
     const { presented } = search;
+    usePadSearchFieldMotion(rowRef, pad && !drawer, presented, searchTab !== null, liquid?.regions);
+    useLayoutEffect(() => {
+        if (!pad || !searchTab || !setSearchOwner || !presented || stacked)
+            return;
+        setSearchOwner(searchTab);
+        return () => setSearchOwner(null);
+    }, [pad, searchTab, setSearchOwner, presented, stacked]);
     // The bar's title and items give way while search is presented; its back control too, unless a
     // screen is stacked over this one (as the drawer, SearchDrawer.tsx).
     useLayoutEffect(() => {
         const element = scroller.current;
-        if (!element || navigation)
+        if (!element || (navigation && !drawer))
             return;
         element.toggleAttribute('data-satin-search-presented', presented);
         const { header } = navigationChromeOf(element);
@@ -57,7 +72,7 @@ export function SearchToolbarField({ configuration, scroller, host, navigation =
                 part.removeAttribute('data-satin-search-presented');
             header?.removeAttribute('data-satin-search-presented');
         };
-    }, [presented, scroller, screenKey, stacked, navigation]);
+    }, [presented, scroller, screenKey, stacked, navigation, drawer]);
     // The field moves with the keyboard on the keyboard's own curve (styles.css). Glass regions
     // follow a moving element only when told: refresh them while it moves.
     useLayoutEffect(() => {
@@ -93,16 +108,20 @@ export function SearchToolbarField({ configuration, scroller, host, navigation =
     }, [liquid?.regions, presented]);
     const prompt = configuration.prompt ?? 'Search';
     const ownsItem = !host.hasAttribute('data-satin-search-toolbar-host');
-    const row = (_jsxs("div", { ref: rowRef, role: "search", "data-satin-search-toolbar": "", "data-satin-search-navigation": navigation || undefined, "data-satin-search-toolbar-presented": presented || undefined, children: [_jsxs("div", { "data-satin-search-toolbar-field": "", children: [_jsx(GlassBackground, { shape: "capsule" }), _jsx(SymbolImage, { name: "magnifyingglass", weight: "medium", "data-satin-search-toolbar-magnifier": "" }), _jsx(TextField, { ref: inputRef, label: prompt, labelVisibility: "hidden", variant: "plain", placeholder: prompt, kind: "search", submitLabel: "search", value: configuration.text, onChange: search.change, onFocus: search.present, onSubmit: search.submit, onKeyDown: event => {
+    const row = (_jsxs("div", { ref: rowRef, role: "search", "data-satin-search-toolbar": "", "data-satin-search-navigation": navigation || undefined, "data-satin-search-pad": pad || undefined, "data-satin-search-toolbar-presented": presented || undefined, children: [_jsxs("div", { "data-satin-search-toolbar-field": "", children: [_jsx(GlassBackground, { shape: "capsule" }), _jsx(SymbolImage, { name: "magnifyingglass", weight: "medium", "data-satin-search-toolbar-magnifier": "" }), _jsx(TextField, { ref: inputRef, label: prompt, labelVisibility: "hidden", variant: "plain", placeholder: prompt, kind: "search", submitLabel: "search", value: configuration.text, onChange: search.change, onFocus: search.present, onBlur: pad ? search.resign : undefined, onSubmit: search.submit, onKeyDown: event => {
                             if (event.key !== 'Escape' || event.nativeEvent.isComposing)
                                 return;
                             event.preventDefault();
                             search.dismiss();
                         } }), configuration.text && (_jsx(Pressable, { iconOnly: true, "aria-label": "Clear text", "data-satin-search-toolbar-clear": "", onPress: () => {
+                            if (pad && searchTab) {
+                                search.dismiss();
+                                return;
+                            }
                             search.change('');
                             if (inputRef.current)
                                 focusFromFramework(inputRef.current);
-                        }, children: _jsx(SymbolImage, { name: "xmark.circle.fill" }) }))] }), presented && (_jsxs(Pressable, { iconOnly: true, "aria-label": "Close", "data-satin-search-toolbar-close": "", "data-satin-glass-press": "true", onPress: () => {
+                        }, children: _jsx(SymbolImage, { name: "xmark.circle.fill" }) }))] }), presented && !pad && (_jsxs(Pressable, { iconOnly: true, "aria-label": "Close", "data-satin-search-toolbar-close": "", "data-satin-glass-press": "true", onPress: () => {
                     // The touch ends here: WebKit's synthesized mouse events must not refocus the field
                     // that moves under the finger (as the drawer's close button).
                     ownPhysicalContact(contactTarget(), closeContactOwner, MENU_CONTACT_CLICK_WINDOW_MS, {
@@ -110,6 +129,8 @@ export function SearchToolbarField({ configuration, scroller, host, navigation =
                     });
                     search.dismiss();
                 }, children: [_jsx(GlassBackground, { shape: "circle", interactive: true }), _jsx(SymbolImage, { name: "xmark", weight: "medium" })] }))] }));
-    return (_jsxs(_Fragment, { children: [createPortal(ownsItem ? _jsx("div", { "data-satin-toolbar-item": "search", children: row }) : row, host), navigation && configuration.scopes && presented && (_jsx("div", { "data-satin-search-navigation-scopes": "", "data-satin-search-presented": "", children: _jsx(SearchScopesBar, { scopes: configuration.scopes, presented: presented }) })), search.suggestions.length > 0 && (_jsx("div", { "data-satin-search-suggestions": "", role: "list", "aria-label": "Suggestions", children: search.suggestions.map(suggestion => (_jsx(Pressable, { role: "listitem", feedback: "row", "data-satin-search-suggestion": "", onPress: () => search.complete(suggestion), children: suggestion.label ?? suggestion.text }, suggestion.id))) }))] }));
+    const suggestions = search.suggestions.map(suggestion => (_jsx(Pressable, { role: "listitem", feedback: "row", "data-satin-search-suggestion": "", onPress: () => search.complete(suggestion), children: suggestion.label ?? suggestion.text }, suggestion.id)));
+    return (_jsxs(_Fragment, { children: [createPortal(ownsItem ? (_jsx("div", { "data-satin-toolbar-item": "search", "data-satin-search-pad-item": pad || undefined, "data-satin-search-expanded": (pad && presented) || undefined, children: row })) : (row), host), navigation && (!pad || drawer) && configuration.scopes && presented && (_jsx("div", { "data-satin-search-navigation-scopes": "", "data-satin-search-presented": "", children: _jsx(SearchScopesBar, { scopes: configuration.scopes, presented: presented }) })), search.suggestions.length > 0 &&
+                (pad ? (_jsx(SearchSuggestionsPopover, { anchor: rowRef, children: suggestions })) : (_jsx("div", { "data-satin-search-suggestions": "", role: "list", "aria-label": "Suggestions", children: suggestions })))] }));
 }
 const closeContactOwner = {};

package/dist/search/padSearchBarMotion.d.ts

@@ -0,0 +1,69 @@
+import type { SurfaceRenderSpec } from '../glass/renderSpecs.js';
+/** iPad, iPadOS 27.0 (24A437), reference. Activation fit from original video
+ * F742–751: omega 17.8734, critical damping, RMS 0.104 pt. Dismissal
+ * presentation-layer fit: omega 17.9118, zeta .9982, RMS .038 pt.
+ * Translation and effective opacity are one group track; scale remains 1. */
+export declare const PAD_SEARCH_BAR_OMEGA = 17.9;
+export declare const PAD_SEARCH_BAR_TRAVEL = 64;
+export declare class PadSearchBarMotion {
+    private run?;
+    private animation?;
+    get active(): boolean;
+    sample(at: number): {
+        value: number;
+        velocity: number;
+    };
+    retarget(target: number, at: number): void;
+    start(element: HTMLElement, target: number, finalSpec: SurfaceRenderSpec | undefined, at?: number): {
+        at: number;
+        duration: number;
+        specs: {
+            touchLight?: import("../internal.js").GlassTouchLight;
+            excludeRegionIds?: readonly string[];
+            restHidden?: boolean;
+            occluder?: import("../internal.js").CapsuleShape;
+            prewarmTransparent?: boolean;
+            recipeMix?: number;
+            sheetOpaqueMix?: number;
+            popoverArrow?: import("../glass/regions.js").PopoverArrow;
+            variant?: import("../glass/lens/referenceProfiles.js").ReferenceVariant;
+            treatment?: 'sheet' | 'expandedSheet' | 'alert' | 'confirmation' | 'contextBackdrop' | 'contextPreview' | 'contextMenu';
+            tint?: import("../index.js").GlassTint;
+            memberHighlight?: Readonly<{
+                member: number;
+                amount: number;
+                light?: import("../internal.js").GlassTouchLight;
+            }>;
+            backdropExclusions?: readonly string[];
+            backdropMenuOverlay?: boolean;
+            blurSigmaCssPx?: number;
+            frameHeight: number;
+            frameWidth: number;
+            frameX: number;
+            id: import("../internal.js").SurfaceId;
+            materialMix: number;
+            materialProfile: 'chrome' | 'searchField' | 'menu';
+            menuTintMix?: number;
+            returningTrigger?: import("../internal.js").ReturningMenuTrigger;
+            radius: number;
+            sampleHeight: number;
+            sampleInsetX: number;
+            sampleInsetY: number;
+            sampleWidth: number;
+            shaderAperture: boolean;
+            shape: import("../internal.js").SurfaceShape;
+            tabSelection?: import("../internal.js").TabSelectionShape;
+            ink?: Readonly<{
+                atlas: Readonly<{
+                    width: number;
+                    height: number;
+                }>;
+                layers: readonly import("../glass/lens/menuField.js").MenuInkLayer[];
+            }>;
+            frameY: number;
+            opacity: number;
+        }[];
+        finished: Promise<void | Animation>;
+    };
+    dispose(): void;
+}

package/dist/search/padSearchBarMotion.js

@@ -0,0 +1,73 @@
+import { animateElement, timelineStart } from '../motion/animate.js';
+/** iPad, iPadOS 27.0 (24A437), reference. Activation fit from original video
+ * F742–751: omega 17.8734, critical damping, RMS 0.104 pt. Dismissal
+ * presentation-layer fit: omega 17.9118, zeta .9982, RMS .038 pt.
+ * Translation and effective opacity are one group track; scale remains 1. */
+export const PAD_SEARCH_BAR_OMEGA = 17.9;
+export const PAD_SEARCH_BAR_TRAVEL = 64;
+export class PadSearchBarMotion {
+    run;
+    animation;
+    get active() {
+        return this.animation?.playState === 'running';
+    }
+    sample(at) {
+        const run = this.run;
+        if (!run)
+            return { value: 0, velocity: 0 };
+        const t = Math.max(0, at - run.at) / 1000;
+        const displacement = run.from - run.target;
+        const slope = run.velocity + PAD_SEARCH_BAR_OMEGA * displacement;
+        const decay = Math.exp(-PAD_SEARCH_BAR_OMEGA * t);
+        return {
+            value: run.target + (displacement + slope * t) * decay,
+            velocity: (slope - PAD_SEARCH_BAR_OMEGA * (displacement + slope * t)) * decay,
+        };
+    }
+    retarget(target, at) {
+        const current = this.sample(at);
+        this.run = { at, from: current.value, target, velocity: current.velocity };
+    }
+    start(element, target, finalSpec, at = performance.now()) {
+        this.retarget(target, at);
+        this.animation?.cancel();
+        this.animation = undefined;
+        const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
+        let duration = 0;
+        if (!reduced) {
+            do {
+                duration += 1000 / 60;
+            } while (duration < 2000 &&
+                (Math.abs(this.sample(at + duration).value - target) > 0.0015 ||
+                    Math.abs(this.sample(at + duration).velocity) > 0.02));
+        }
+        const count = Math.max(1, Math.round(duration / (1000 / 60)));
+        const values = Array.from({ length: count + 1 }, (_, index) => reduced || index === count ? target : this.sample(at + (duration * index) / count).value);
+        const specs = finalSpec
+            ? values.map(value => ({
+                ...finalSpec,
+                frameY: finalSpec.frameY - PAD_SEARCH_BAR_TRAVEL * (value - target),
+                opacity: Math.max(0, Math.min(1, 1 - value)),
+            }))
+            : [];
+        const frames = values.map(value => ({
+            transform: `translateY(${-PAD_SEARCH_BAR_TRAVEL * (value - target)}px)`,
+            opacity: Math.max(0, Math.min(1, 1 - value)),
+        }));
+        if (duration) {
+            this.animation = animateElement(element, frames, { duration, easing: 'linear' });
+            this.animation.startTime = timelineStart(at);
+        }
+        else
+            this.run = { at, from: target, target, velocity: 0 };
+        return {
+            at,
+            duration,
+            specs,
+            finished: this.animation?.finished.catch(() => { }) ?? Promise.resolve(),
+        };
+    }
+    dispose() {
+        this.animation?.cancel();
+    }
+}