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

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();
+    }
+}