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

package/dist/search/padSearchFieldSamples.json

@@ -0,0 +1,491 @@
+{
+    "activate": [
+        [
+            0,
+            0,
+            1
+        ],
+        [
+            57.4967,
+            0.0,
+            1.0
+        ],
+        [
+            74.1729,
+            0.0652467,
+            1.0138658
+        ],
+        [
+            90.849,
+            0.2004327,
+            1.0439458
+        ],
+        [
+            107.5252,
+            0.3763662,
+            1.0818851
+        ],
+        [
+            124.2014,
+            0.5673563,
+            1.1210582
+        ],
+        [
+            140.8775,
+            0.7382877,
+            1.1567626
+        ],
+        [
+            157.5537,
+            0.9098744,
+            1.1861394
+        ],
+        [
+            174.2299,
+            1.0536432,
+            1.2064163
+        ],
+        [
+            190.906,
+            1.1562577,
+            1.2093241
+        ],
+        [
+            207.5822,
+            1.2430089,
+            1.197464
+        ],
+        [
+            224.2584,
+            1.2866309,
+            1.1753846
+        ],
+        [
+            240.9345,
+            1.2933475,
+            1.1473579
+        ],
+        [
+            257.6107,
+            1.2721306,
+            1.1170045
+        ],
+        [
+            274.2869,
+            1.2308359,
+            1.087125
+        ],
+        [
+            290.963,
+            1.1887407,
+            1.0596843
+        ],
+        [
+            307.6392,
+            1.1376266,
+            1.0358958
+        ],
+        [
+            324.3154,
+            1.0935446,
+            1.0163525
+        ],
+        [
+            340.9915,
+            1.0583051,
+            1.0011722
+        ],
+        [
+            357.6677,
+            1.0201898,
+            0.9901336
+        ],
+        [
+            374.3439,
+            0.9668736,
+            0.9827955
+        ],
+        [
+            391.02,
+            0.9475126,
+            0.9785925
+        ],
+        [
+            407.6962,
+            0.9360613,
+            0.9769109
+        ],
+        [
+            424.3724,
+            0.931238,
+            0.977144
+        ],
+        [
+            441.0485,
+            0.9316799,
+            0.9787317
+        ],
+        [
+            457.7247,
+            0.9360493,
+            0.9811846
+        ],
+        [
+            474.4009,
+            0.9431103,
+            0.9840978
+        ],
+        [
+            491.077,
+            0.9523869,
+            0.9874203
+        ],
+        [
+            507.7532,
+            0.9607718,
+            0.9899524
+        ],
+        [
+            524.4294,
+            0.9694654,
+            0.9923857
+        ],
+        [
+            541.1055,
+            0.9827386,
+            0.995813
+        ],
+        [
+            557.7817,
+            0.989996,
+            0.997571
+        ],
+        [
+            574.4579,
+            0.9961717,
+            0.9990055
+        ],
+        [
+            591.134,
+            0.9983121,
+            0.9994891
+        ],
+        [
+            607.8102,
+            1.0028168,
+            1.0004818
+        ],
+        [
+            624.4864,
+            1.0061356,
+            1.001188
+        ],
+        [
+            641.1625,
+            1.0083492,
+            1.001643
+        ],
+        [
+            657.8387,
+            1.0099158,
+            1.0
+        ],
+        [
+            674.5149,
+            1.0099896,
+            1.0
+        ],
+        [
+            691.191,
+            1.0097343,
+            1.0
+        ],
+        [
+            707.8672,
+            1.0089822,
+            1.0
+        ],
+        [
+            724.5434,
+            0.97795,
+            0.9946097
+        ],
+        [
+            741.2195,
+            1.0071289,
+            1.0
+        ],
+        [
+            757.8957,
+            1.0057733,
+            1.0
+        ],
+        [
+            774.5719,
+            1.0038603,
+            1.0
+        ],
+        [
+            791.248,
+            1.00259,
+            1.0
+        ],
+        [
+            807.9242,
+            1.0014612,
+            1.0
+        ],
+        [
+            824.6004,
+            1.0,
+            1.0
+        ],
+        [
+            841.2765,
+            1,
+            1
+        ]
+    ],
+    "dismiss": [
+        [
+            0,
+            1,
+            1
+        ],
+        [
+            13.4173,
+            1.0,
+            1.0
+        ],
+        [
+            30.0935,
+            0.9902184,
+            1.0138658
+        ],
+        [
+            46.7696,
+            0.9753552,
+            1.0439458
+        ],
+        [
+            63.4458,
+            0.9511823,
+            1.0818851
+        ],
+        [
+            80.122,
+            0.9298425,
+            1.1210582
+        ],
+        [
+            96.7981,
+            0.8887576,
+            1.1567626
+        ],
+        [
+            113.4743,
+            0.8346821,
+            1.1861394
+        ],
+        [
+            130.1505,
+            0.7780072,
+            1.2064163
+        ],
+        [
+            146.8266,
+            0.7319768,
+            1.2093241
+        ],
+        [
+            163.5028,
+            0.6684435,
+            1.197464
+        ],
+        [
+            180.179,
+            0.5867632,
+            1.1753846
+        ],
+        [
+            196.8551,
+            0.4932982,
+            1.1473579
+        ],
+        [
+            213.5313,
+            0.3971412,
+            1.1170045
+        ],
+        [
+            230.2075,
+            0.3061625,
+            1.087125
+        ],
+        [
+            246.8836,
+            0.2137481,
+            1.0596843
+        ],
+        [
+            263.5598,
+            0.1377417,
+            1.0358958
+        ],
+        [
+            280.236,
+            0.0685651,
+            1.0163525
+        ],
+        [
+            296.9121,
+            0.0082783,
+            1.0011722
+        ],
+        [
+            313.5883,
+            -0.0297469,
+            0.9901336
+        ],
+        [
+            330.2645,
+            -0.0332873,
+            0.9827955
+        ],
+        [
+            346.9406,
+            -0.0527703,
+            0.9785925
+        ],
+        [
+            363.6168,
+            -0.0642726,
+            0.9769109
+        ],
+        [
+            380.293,
+            -0.0690909,
+            0.977144
+        ],
+        [
+            396.9691,
+            -0.0686091,
+            0.9787317
+        ],
+        [
+            413.6453,
+            -0.0641841,
+            0.9811846
+        ],
+        [
+            430.3215,
+            -0.0570659,
+            0.9840978
+        ],
+        [
+            446.9976,
+            -0.0477432,
+            0.9874203
+        ],
+        [
+            463.6738,
+            -0.0393105,
+            0.9899524
+        ],
+        [
+            480.35,
+            -0.0305346,
+            0.9923857
+        ],
+        [
+            497.0261,
+            -0.02205,
+            0.9946097
+        ],
+        [
+            513.7023,
+            -0.0142398,
+            0.9965544
+        ],
+        [
+            530.3785,
+            -0.0073957,
+            0.9981838
+        ],
+        [
+            547.0546,
+            -0.0016879,
+            0.9994891
+        ],
+        [
+            563.7308,
+            0.0028168,
+            1.0004818
+        ],
+        [
+            580.407,
+            0.0075891,
+            1.0014886
+        ],
+        [
+            597.0831,
+            0.0075891,
+            1.0014886
+        ],
+        [
+            613.7593,
+            0.0099158,
+            1.0
+        ],
+        [
+            630.4355,
+            0.0099052,
+            1.0
+        ],
+        [
+            647.1116,
+            0.0093324,
+            1.0
+        ],
+        [
+            663.7878,
+            0.008358,
+            1.0
+        ],
+        [
+            680.464,
+            0.0091977,
+            1.001812
+        ],
+        [
+            697.1401,
+            0.0057733,
+            1.0
+        ],
+        [
+            713.8163,
+            0.0043971,
+            1.0
+        ],
+        [
+            730.4925,
+            0.0030836,
+            1.0
+        ],
+        [
+            747.1686,
+            0.0018932,
+            1.0
+        ],
+        [
+            763.8448,
+            0.0014612,
+            1.0
+        ],
+        [
+            780.521,
+            0,
+            1
+        ]
+    ]
+}

package/dist/search/searchPlacement.d.ts

@@ -1,8 +1,11 @@
+import type { DeviceIdiom } from '../layout/deviceIdiom.js';
 import type { SearchFieldPlacement } from './searchable.js';
 /** Stock iOS 27.0 reference List + searchable defaults: a tab owns the bottom dock, so
  * iPhone automatic search uses the drawer there; iPad uses the trailing navigation
  * toolbar. Explicit drawer/default-toolbar-item requests keep their existing paths. */
 export declare function resolveSearchPlacement(placement: SearchFieldPlacement | undefined, screen: Readonly<{
+    idiom?: DeviceIdiom;
+    pane?: 'stack' | 'sidebar' | 'detail';
     compact: boolean;
     bottomBarItems: boolean;
     searchToolbarItem: boolean;

package/dist/search/searchPlacement.js

@@ -4,6 +4,13 @@
 export function resolveSearchPlacement(placement, screen) {
     if (placement === 'navigationBarDrawer')
         return 'navigationBarDrawer';
+    // iPad remains iPad in a narrow window. Sidebar search belongs below its own
+    // toolbar; an explicit toolbar request always stays in the trailing slot.
+    if (screen.idiom === 'pad') {
+        if (placement === 'toolbar')
+            return 'navigationBarToolbar';
+        return screen.pane === 'sidebar' ? 'navigationBarDrawer' : 'navigationBarToolbar';
+    }
     if (placement === 'toolbar' || screen.searchToolbarItem) {
         return screen.compact && !screen.scoped ? 'toolbar' : 'navigationBarDrawer';
     }

package/dist/search/searchable.d.ts

@@ -1,6 +1,5 @@
 import type { ReactNode } from 'react';
-/** `searchScopes(_:activation: .onSearchPresentation)`: a controlled scope bar shown
- * under the field while search is presented. */
+/** A controlled scope bar, shown under the search field while search is presented. */
 export type SearchScopes = Readonly<{
     selection: string;
     onSelectionChange(selection: string): void;
@@ -9,23 +8,26 @@ export type SearchScopes = Readonly<{
         label: string;
     }>[];
 }>;
-/** `searchSuggestions` with `searchCompletion`: choosing one replaces the text. It does
- * not submit. */
+/** A suggestion shown under the search field. Choosing one replaces the search text; it does not
+ * submit. */
 export type SearchSuggestion = Readonly<{
     id: string;
     text: string;
     label?: ReactNode;
 }>;
-/** `SearchFieldPlacement`. `'automatic'` uses platform placement on iPhone: the bottom toolbar
- * outside a TabView when the screen has no other bottom bar items or scopes, else a drawer that
- * scrolls away with content. Regular-width automatic search uses the trailing navigation toolbar. */
+/** Where the search field goes. On iPhone, `'automatic'` uses the bottom toolbar outside a
+ * `TabView` when the screen has no other bottom bar items or scopes; otherwise it uses a drawer
+ * that scrolls away with the content. On iPad, automatic search belongs to the trailing
+ * navigation toolbar, or below the sidebar toolbar in a split view. Explicit toolbar
+ * placement stays trailing on iPad, including narrow windows. */
 export type SearchFieldPlacement = 'automatic' | 'navigationBarDrawer' | 'toolbar';
 /**
- * `searchable(text:isPresented:placement:prompt:)`. The bar owns the field: its capsule,
- * magnifier, clear button, close button, scope bar and collapse on scroll. In the bottom toolbar,
- * the presented field rides above the keyboard with a close button, and the bar and title give
- * way. Place `<DefaultToolbarItem kind="search" placement="bottomBar" />` to put it beside other
- * bottom bar items (Messages).
+ * A search field for a screen or list: its controlled text, prompt, placement, scopes and
+ * suggestions. The bar owns the field: its capsule, magnifier, clear button, close button, scope
+ * bar and collapse on scroll. In the bottom toolbar, the presented field rides above the
+ * keyboard with a close button, and the bar and title give way. Place
+ * `<DefaultToolbarItem kind="search" placement="bottomBar" />` to put it beside other bottom bar
+ * items.
  */
 export type Searchable = Readonly<{
     text: string;

package/dist/search/usePadSearchFieldMotion.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from 'react';
+import type { GlassRegionRegistry } from '../glass/regionRegistry.js';
+/** One field-owned layout track also moves the adjacent toolbar items. */
+export declare function usePadSearchFieldMotion(row: RefObject<HTMLDivElement | null>, enabled: boolean, presented: boolean, searchTab: boolean, regions?: GlassRegionRegistry): void;

package/dist/search/usePadSearchFieldMotion.js

@@ -0,0 +1,100 @@
+import { useLayoutEffect, useRef } from 'react';
+import { animateElement, animateLayout } from '../motion/animate.js';
+import { menuSpring, menuSpringSettle } from '../glass/lens/menuSpring.js';
+import samples from './padSearchFieldSamples.json';
+function observed(rows, ms, column = 1) {
+    if (ms <= rows[0][0])
+        return rows[0][column];
+    for (let i = 1; i < rows.length; i++) {
+        const left = rows[i - 1], right = rows[i];
+        if (ms <= right[0])
+            return (left[column] +
+                ((right[column] - left[column]) * (ms - left[0])) / (right[0] - left[0]));
+    }
+    return rows.at(-1)[column];
+}
+/** One field-owned layout track also moves the adjacent toolbar items. */
+export function usePadSearchFieldMotion(row, enabled, presented, searchTab, regions) {
+    const previous = useRef(presented);
+    const heightAnimation = useRef(null);
+    const running = useRef(null);
+    useLayoutEffect(() => {
+        if (!enabled || previous.current === presented)
+            return;
+        const oldPresented = previous.current;
+        previous.current = presented;
+        const item = row.current?.closest('[data-satin-search-pad-item]');
+        if (!item)
+            return;
+        const now = performance.now();
+        const old = running.current;
+        const elapsed = old ? now - old.start : 0;
+        const interrupted = old !== null && elapsed < old.duration;
+        const from = interrupted ? old.sample(elapsed) : oldPresented ? 280 : 240;
+        const velocity = interrupted
+            ? (old.sample(elapsed + 0.5) - old.sample(elapsed - 0.5)) * 1000
+            : 0;
+        old?.animation.cancel();
+        heightAnimation.current?.cancel();
+        const target = presented ? 280 : 240;
+        if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            running.current = null;
+            return;
+        }
+        let duration;
+        let sample;
+        if (searchTab && !interrupted) {
+            const rows = presented ? samples.activate : samples.dismiss;
+            duration = rows.at(-1)[0];
+            sample = ms => 240 + 40 * observed(rows, ms);
+        }
+        else {
+            // reference ordinary field: independent activate/dismiss fits, RMS .303/.277 pt.
+            // An interrupted tab track carries its measured velocity into its fitted spring.
+            const omega = searchTab
+                ? presented
+                    ? 17.805645
+                    : 11.419662
+                : presented
+                    ? 16.212655
+                    : 16.137595;
+            const zeta = searchTab ? (presented ? 0.374592 : 0.64327) : presented ? 0.799286 : 0.797249;
+            const spring = {
+                omega,
+                zeta,
+                delay: 0,
+                velocity: Math.abs(from - target) > 0.001 ? velocity / (from - target) : 0,
+            };
+            duration = menuSpringSettle(spring);
+            sample = ms => target + (from - target) * menuSpring(spring, ms).value;
+        }
+        const count = Math.max(1, Math.ceil(duration / (1000 / 60)));
+        const frames = Array.from({ length: count + 1 }, (_, index) => {
+            const width = index === count ? target : sample((duration * index) / count);
+            return { width: `${width}px`, flexBasis: `${width}px`, offset: index / count };
+        });
+        const animation = animateLayout(item, frames, { duration, easing: 'linear' });
+        if (searchTab && !interrupted && row.current) {
+            const rows = presented ? samples.activate : samples.dismiss;
+            heightAnimation.current = animateElement(row.current, Array.from({ length: count + 1 }, (_, index) => ({
+                transform: `scaleY(${index === count ? 1 : observed(rows, (duration * index) / count, 2)})`,
+                offset: index / count,
+            })), { duration, easing: 'linear' });
+        }
+        running.current = { start: now, duration, sample, animation };
+        let frame = 0;
+        const update = () => {
+            regions?.invalidate();
+            if (animation.playState === 'running')
+                frame = requestAnimationFrame(update);
+        };
+        update();
+        return () => {
+            cancelAnimationFrame(frame);
+        };
+    }, [enabled, presented, searchTab, regions, row]);
+    useLayoutEffect(() => () => {
+        running.current?.animation.cancel();
+        heightAnimation.current?.cancel();
+    }, []);
+}

package/dist/search/useSearchPresentation.d.ts

@@ -1,6 +1,6 @@
 import { type RefObject } from 'react';
 import { type Searchable, type SearchSuggestion } from './searchable.js';
-export declare function useSearchPresentation(configuration: Searchable, input: RefObject<HTMLInputElement | null>): {
+export declare function useSearchPresentation(configuration: Searchable, input: RefObject<HTMLInputElement | null>, pad?: boolean): {
     presented: boolean;
     present: () => void;
     dismiss: () => void;
@@ -12,4 +12,5 @@ export declare function useSearchPresentation(configuration: Searchable, input:
         text: string;
         label?: import("react").ReactNode;
     }>[];
+    resign: () => void;
 };