@satinhq/kit 0.0.0-stage → 0.1.0-beta.1

package/dist/safe-area/keyboardCarrier.js

@@ -0,0 +1,394 @@
+import { keyboardTranslationStops, sampleKeyboardTranslation } from '../keyboard/translation.js';
+import { KEYBOARD_CARRIER_MOTION, setKeyboardCarrierPose, setKeyboardCarrierContent, clearKeyboardCarrierContent, clearKeyboardCarrierPose, } from './keyboardCarrierGeometry.js';
+import { currentKeyboardHeight, onKeyboardMotion, } from '../keyboard/adapter.js';
+import { lagMark, lagTraceEnabled } from '../glass/webgpu/lagTrace.js';
+import { KEYBOARD_DURATION_MS, KEYBOARD_HOLD_MS, keyboardKeyframes } from '../keyboard/motion.js';
+/**
+ * Moves a root bottom inset with the software keyboard as one thing, as a native chat's composer
+ * and transcript ride the keyboard.
+ *
+ * Why not animate the inset's padding: that is layout, and layout needs the page to draw. On the
+ * installed iPad WebKit draws one page frame after it reports the keyboard and then none until the
+ * keyboard has arrived (~390 ms on the tested iPad). A padding animation stands still for
+ * that whole time and then jumps. Transform animations run on the compositor and keep moving.
+ *
+ * So each keyboard change is one run on the keyboard's own curve (keyboard/motion.ts):
+ * - the accessory (the composer) and the content of each scroll view that is pinned to its bottom
+ *   (`defaultScrollAnchor="bottom"`) move together on compositor transforms;
+ * - the inset's layout changes once per run, at the endpoint where nothing is clipped. A keyboard
+ *   that rises keeps the taller scrollport until the composer has arrived, then commits the shorter
+ *   one; a keyboard that falls commits the taller one first and the transforms lead back to it.
+ *   Committing a shorter scrollport first would clip the transcript above the composer.
+ * - a run that starts while another is moving starts from the pose on screen, never from rest.
+ *
+ * The editor stays live and keeps its text, selection and focus: nothing is snapshotted or scaled.
+ */
+export function installKeyboardCarrier(boundary, accessory, geometry, measuredRoom) {
+    // The keyboard height the boundary's layout is committed to, and the one last reported.
+    let committed = currentKeyboardHeight();
+    let keyboardHeight = committed;
+    let run;
+    let accessoryRestTop = accessory.getBoundingClientRect().top;
+    let accessoryHeight = measuredRoom().accessoryHeight;
+    // Growth changes the bottom-anchored resting top even while a carry is running. Keep its
+    // anchor current using SafeAreaInset's existing measurement, not another layout read.
+    const synchronizeAccessoryHeight = () => {
+        const nextHeight = measuredRoom().accessoryHeight;
+        accessoryRestTop -= nextHeight - accessoryHeight;
+        accessoryHeight = nextHeight;
+    };
+    const originTops = new Map([[accessory, accessoryRestTop]]);
+    const contentOrigins = new Map();
+    const backdropAdjustments = new Map();
+    const restTops = new Map([[accessory, accessoryRestTop]]);
+    const announce = () => window.dispatchEvent(new Event(KEYBOARD_CARRIER_MOTION));
+    const restPose = (element, top) => {
+        const origin = originTops.get(element) ?? top;
+        originTops.set(element, origin);
+        restTops.set(element, top);
+        const source = contentOrigins.get(element);
+        const backdropAdjustment = source
+            ? contentStart(element) + source.surface.scrollTop - source.top - (top - origin)
+            : 0;
+        backdropAdjustments.set(element, backdropAdjustment);
+        setKeyboardCarrierPose(element, () => ({
+            offsetY: top - origin,
+            moving: false,
+            backdropAdjustment,
+        }));
+    };
+    restPose(accessory, accessoryRestTop);
+    const geometryObserver = new ResizeObserver(() => {
+        synchronizeAccessoryHeight();
+        if (run)
+            return;
+        accessoryRestTop = accessory.getBoundingClientRect().top;
+        restPose(accessory, accessoryRestTop);
+        announce();
+    });
+    geometryObserver.observe(accessory);
+    geometryObserver.observe(boundary);
+    const commit = (height) => {
+        committed = height;
+        boundary.style.setProperty(COMMITTED_HEIGHT, `${height}px`);
+    };
+    commit(committed);
+    boundary.dataset.satinKeyboardCarrier = 'true';
+    const stopRun = () => {
+        const current = run;
+        run = undefined;
+        for (const animation of current?.animations.values() ?? [])
+            animation.cancel();
+    };
+    const carry = ({ height, leadMs }) => {
+        synchronizeAccessoryHeight();
+        // The same change reported again with an earlier stamp: the keyboard started sooner than the
+        // first report said. Keep the run and move it onto the keyboard's clock.
+        if (height === keyboardHeight) {
+            run?.retime(leadMs);
+            return;
+        }
+        const startHeight = keyboardHeight;
+        keyboardHeight = height;
+        const elements = [...geometry.attached()];
+        const surfaces = carriedScrollViews(elements);
+        let overlays = carriedOverlays(geometry.participants(), accessory);
+        const shownOverlays = overlays.map(({ content }) => content.getBoundingClientRect().top);
+        // Where everything is on screen now, including the pose of a run still moving.
+        const shownAccessory = run ? accessory.getBoundingClientRect().top : accessoryRestTop;
+        const runAccessoryOffset = run ? shownAccessory - accessoryRestTop : 0;
+        const shownContent = surfaces.map(contentTop);
+        // A first dismissal can commit taller layout before a content pose has ever
+        // been registered. Preserve its pre-commit origin as well as its native scroll.
+        surfaces.forEach(({ surface, content }, index) => {
+            if (originTops.has(content))
+                return;
+            originTops.set(content, shownContent[index]);
+            contentOrigins.set(content, { surface, top: contentStart(content) + surface.scrollTop });
+            setKeyboardCarrierContent(surface, content, () => contentStart(content) + surface.scrollTop - contentOrigins.get(content).top);
+        });
+        stopRun();
+        const pinned = surfaces.map(view => view.anchorsToBottom && isAtBottom(view.surface));
+        const measured = measuredRoom();
+        const room = (keyboard) => Math.max(measured.systemInset, keyboard - measured.coveredRows);
+        const layoutPadding = room(committed);
+        const travel = room(height) - layoutPadding;
+        const keyboardRises = travel > 0;
+        let scrollTravel;
+        if (keyboardRises) {
+            // Keep the taller scrollport while moving. A pinned transcript will scroll by the travel
+            // when the shorter one is committed; it rides up by that much on the way.
+            scrollTravel = surfaces.map(({ surface }, index) => pinned[index]
+                ? bottomOffset(surface, surface.clientHeight - travel) - surface.scrollTop
+                : 0);
+        }
+        else {
+            commit(height);
+            const offsets = surfaces.map(({ surface }) => surface.scrollTop);
+            surfaces.forEach(({ surface }, index) => {
+                if (pinned[index])
+                    scrollToBottom(surface);
+            });
+            scrollTravel = surfaces.map(({ surface }, index) => surface.scrollTop - offsets[index]);
+        }
+        accessoryRestTop += layoutPadding - room(committed);
+        // The accessory sits on the keyboard's room at every instant, as native's keyboard layout
+        // guide does: on the safe area until the keyboard's top passes it, then on the keyboard. A run
+        // that starts away from that pose (a reversal) blends its difference out on the same curve.
+        const committedPadding = room(committed);
+        const keyboardAt = (progress) => startHeight + (height - startHeight) * progress;
+        const accessoryLayoutAt = (progress) => committedPadding - room(keyboardAt(progress));
+        // The committed padding is the only layout displacement of the root accessory.
+        // Reversals still read the shown pose, but never force layout after a commit just to recover it.
+        const accessoryFrom = runAccessoryOffset + committedPadding - layoutPadding;
+        const reversal = accessoryFrom - accessoryLayoutAt(0);
+        const accessoryAt = (progress) => accessoryLayoutAt(progress) + reversal * (1 - progress);
+        const accessoryTo = accessoryAt(1);
+        // A carried transcript moves in lockstep with the accessory, by its own distance.
+        const contentFrom = surfaces.map((view, index) => {
+            const top = contentTop(view);
+            restPose(view.content, top);
+            return shownContent[index] - top;
+        });
+        const overlayFrom = overlays.map(({ content }, index) => {
+            const top = content.getBoundingClientRect().top;
+            restPose(content, top);
+            return shownOverlays[index] - top;
+        });
+        restPose(accessory, accessoryRestTop);
+        const contentTo = surfaces.map((_, index) => (keyboardRises ? -scrollTravel[index] : 0));
+        const accessoryShare = (progress) => Math.abs(accessoryTo - accessoryFrom) < 0.5
+            ? progress
+            : (accessoryAt(progress) - accessoryFrom) / (accessoryTo - accessoryFrom);
+        let finishTimer;
+        // Commit from the page's own frame once the curve has ended: the layout and the removed
+        // transforms then reach the screen together, while the compositor holds the end pose.
+        const scheduleFinish = (lead) => {
+            clearTimeout(finishTimer);
+            finishTimer = setTimeout(() => requestAnimationFrame(finish), Math.max(0, KEYBOARD_DURATION_MS - lead));
+        };
+        const current = {
+            animations: new Map(),
+            refreshOverlays: () => refreshOverlays(),
+            finish: () => finish(),
+            retime: lead => {
+                const start = performance.now() - lead;
+                for (const animation of current.animations.values())
+                    animation.startTime = start;
+                startTime = start;
+                trace('retime', { height, leadMs: Math.round(lead) });
+                scheduleFinish(lead);
+                announce();
+            },
+        };
+        const finish = () => {
+            if (run !== current)
+                return;
+            trace('commit', { height, rises: keyboardRises });
+            if (keyboardRises) {
+                const stillPinned = surfaces.map(view => view.anchorsToBottom && isAtBottom(view.surface));
+                commit(height);
+                surfaces.forEach(({ surface }, index) => {
+                    if (stillPinned[index])
+                        scrollToBottom(surface);
+                });
+            }
+            stopRun();
+            accessoryRestTop = accessory.getBoundingClientRect().top;
+            restPose(accessory, accessoryRestTop);
+            for (const view of surfaces)
+                restPose(view.content, contentTop(view));
+            for (const { content } of overlays)
+                restPose(content, content.getBoundingClientRect().top);
+            announce();
+        };
+        run = current;
+        let startTime = performance.now() - leadMs;
+        const totalMs = KEYBOARD_DURATION_MS + KEYBOARD_HOLD_MS;
+        const move = (element, translateAt) => {
+            if (Math.abs(translateAt(0)) < 0.5 && Math.abs(translateAt(1)) < 0.5)
+                return;
+            const frames = keyboardKeyframes(translateAt, totalMs);
+            const animation = element.animate(frames, {
+                duration: totalMs,
+                fill: 'both',
+            });
+            // Pin the curve to the keyboard's clock, not to the next frame this page happens to draw.
+            animation.startTime = startTime;
+            current.animations.set(element, animation);
+            const layoutOffset = (restTops.get(element) ?? 0) - (originTops.get(element) ?? 0);
+            const stops = keyboardTranslationStops(frames);
+            const backdropAdjustment = backdropAdjustments.get(element) ?? 0;
+            setKeyboardCarrierPose(element, () => {
+                const epoch = performance.timeOrigin + Number(animation.startTime);
+                const motion = {
+                    epoch,
+                    duration: totalMs,
+                    end: epoch + KEYBOARD_DURATION_MS,
+                    offset: layoutOffset,
+                    stops,
+                };
+                return {
+                    offsetY: sampleKeyboardTranslation(motion, performance.timeOrigin + performance.now()),
+                    moving: run === current,
+                    motion,
+                    backdropAdjustment,
+                };
+            });
+        };
+        // Registration can change after the keyboard report (conditional controls, nested insets,
+        // or alignment changes). Join the original curve at its current clock; never restart it.
+        const refreshOverlays = () => {
+            const next = carriedOverlays(geometry.participants(), accessory);
+            const retained = new Set(next.map(({ content }) => content));
+            for (const { content } of overlays) {
+                if (retained.has(content))
+                    continue;
+                current.animations.get(content)?.cancel();
+                current.animations.delete(content);
+                clearKeyboardCarrierPose(content);
+                restTops.delete(content);
+                originTops.delete(content);
+            }
+            const previous = new Set(overlays.map(({ content }) => content));
+            for (const { content, share } of next) {
+                if (previous.has(content))
+                    continue;
+                restPose(content, content.getBoundingClientRect().top);
+                move(content, progress => accessoryAt(progress) * share);
+            }
+            overlays = next;
+            announce();
+        };
+        if (leadMs < KEYBOARD_DURATION_MS) {
+            move(accessory, accessoryAt);
+            overlays.forEach(({ content, share }, index) => {
+                const from = overlayFrom[index];
+                const to = keyboardRises ? accessoryTo * share : 0;
+                move(content, progress => from + (to - from) * accessoryShare(progress));
+            });
+            surfaces.forEach(({ content }, index) => {
+                const from = contentFrom[index];
+                const to = contentTo[index];
+                move(content, progress => from + (to - from) * accessoryShare(progress));
+            });
+        }
+        announce();
+        trace('start', {
+            height,
+            startHeight,
+            leadMs: Math.round(leadMs),
+            travel,
+            accessoryFrom: Math.round(accessoryFrom),
+            accessoryTo: Math.round(accessoryTo),
+            carried: surfaces.length,
+            pinned: pinned.filter(Boolean).length,
+        });
+        if (!current.animations.size) {
+            finish();
+            return;
+        }
+        scheduleFinish(leadMs);
+    };
+    // A backgrounded app is snapshotted at rest.
+    const visibilityChanged = () => {
+        if (document.visibilityState === 'hidden')
+            run?.finish();
+    };
+    const unsubscribeParticipants = geometry.subscribeParticipants(() => {
+        if (run) {
+            run.refreshOverlays();
+            return;
+        }
+        const retained = new Set(carriedOverlays(geometry.participants(), accessory).map(({ content }) => content));
+        for (const element of originTops.keys()) {
+            if (!element.hasAttribute('data-satin-overlay-content') || retained.has(element))
+                continue;
+            clearKeyboardCarrierPose(element);
+            originTops.delete(element);
+            restTops.delete(element);
+        }
+    });
+    const unsubscribe = onKeyboardMotion(carry);
+    document.addEventListener('visibilitychange', visibilityChanged);
+    return () => {
+        unsubscribe();
+        unsubscribeParticipants();
+        geometryObserver.disconnect();
+        document.removeEventListener('visibilitychange', visibilityChanged);
+        stopRun();
+        for (const element of originTops.keys())
+            clearKeyboardCarrierPose(element);
+        for (const { surface } of contentOrigins.values())
+            clearKeyboardCarrierContent(surface);
+        announce();
+        delete boundary.dataset.satinKeyboardCarrier;
+        boundary.style.removeProperty(COMMITTED_HEIGHT);
+    };
+}
+function trace(stage, values) {
+    if (lagTraceEnabled())
+        lagMark({
+            stage: `keyboard-carrier-${stage}`,
+            at: performance.timeOrigin + performance.now(),
+            values,
+        });
+}
+/** The keyboard height the boundary's layout is committed to (styles.css, carrier mode). */
+const COMMITTED_HEIGHT = '--satin-keyboard-committed';
+/** Vertical scroll views with a positioned content box (ScrollSurface's `data-satin-scroll-content`). */
+function carriedScrollViews(elements) {
+    const views = [];
+    for (const surface of elements) {
+        if (!surface.isConnected || surface.dataset.satinScrollAxis !== 'vertical')
+            continue;
+        const content = surface.querySelector(':scope > [data-satin-scroll-content]');
+        if (!content)
+            continue;
+        views.push({
+            surface,
+            content,
+            anchorsToBottom: content.dataset.satinScrollAlignment === 'bottom',
+        });
+    }
+    return views;
+}
+/**
+ * Where a scroll view's content is on screen. A bottom-aligned transcript shorter than its
+ * scrollport sits at the end of its flex column, so its last row is measured, not the box.
+ */
+function contentTop({ content }) {
+    return (content.lastElementChild ?? content).getBoundingClientRect().top;
+}
+/** The captured rows start here. Appending a last row must not translate an older
+ * capture; native scroll already accounts for a long transcript following its end. */
+function contentStart(content) {
+    return (content.firstElementChild ?? content).getBoundingClientRect().top;
+}
+function isAtBottom(surface) {
+    return surface.scrollHeight - surface.clientHeight - surface.scrollTop <= 1;
+}
+/** The bottom-most scroll offset for a scrollport of the given height. */
+function bottomOffset(surface, clientHeight) {
+    return Math.max(0, surface.scrollHeight - clientHeight);
+}
+function scrollToBottom(surface) {
+    surface.scrollTop = bottomOffset(surface, surface.clientHeight);
+}
+/** Only the outermost content owns transport. Descendants inherit that same transform. */
+function carriedOverlays(elements, accessory) {
+    return [...elements].flatMap(layer => {
+        if (!layer.isConnected ||
+            !layer.hasAttribute('data-satin-overlay-layer') ||
+            accessory.contains(layer))
+            return [];
+        if (layer.closest('[data-satin-scroll-content], [data-satin-overlay-content]'))
+            return [];
+        const content = layer.querySelector(':scope > [data-satin-overlay-content]');
+        if (!content)
+            return [];
+        const alignment = layer.dataset.satinOverlayLayer ?? 'center';
+        const share = alignment.startsWith('bottom') ? 1 : alignment.startsWith('top') ? 0 : 0.5;
+        return [{ content, share }];
+    });
+}

package/dist/safe-area/keyboardCarrierGeometry.d.ts

@@ -0,0 +1,37 @@
+import { type KeyboardTranslation } from '../keyboard/translation.js';
+/** Geometry of transforms owned by the keyboard carrier, on the same clock as its WAAPI runs. */
+export declare const KEYBOARD_CARRIER_MOTION = "satin-keyboard-carrier-motion";
+type Pose = Readonly<{
+    offsetY: number;
+    moving: boolean;
+    motion?: KeyboardTranslation;
+    /** Converts the last-row carrier pose to the captured first-row origin, excluding scroll. */
+    backdropAdjustment?: number;
+}>;
+export declare function setKeyboardCarrierContent(surface: HTMLElement, content: HTMLElement, atRest: () => number): void;
+export declare function clearKeyboardCarrierContent(surface: HTMLElement): void;
+export declare function setKeyboardCarrierPose(element: HTMLElement, read: () => Pose): void;
+export declare function clearKeyboardCarrierPose(element: HTMLElement): void;
+export declare function keyboardCarrierPose(element: HTMLElement): {
+    offsetY: number;
+    moving: boolean;
+    motion?: KeyboardTranslation;
+    backdropAdjustment?: number;
+    owner: HTMLElement;
+} | undefined;
+/** Interpolate the actual rounded compositor keyframes, rather than fit a second curve. */
+export declare function keyboardFrameTranslation(frames: readonly Keyframe[], elapsed: number, duration: number): number;
+/** A capture's content origin follows the same carrier, excluding native scroll.
+ * Native scroll is transported separately, including real overscroll. */
+export declare function keyboardBackdropPose(host: HTMLElement): {
+    offsetY: number;
+    moving: boolean;
+    motion: {
+        epoch: number;
+        duration: number;
+        end: number;
+        stops: readonly (readonly [number, number])[];
+        offset: number;
+    } | undefined;
+} | undefined;
+export {};

package/dist/safe-area/keyboardCarrierGeometry.js

@@ -0,0 +1,49 @@
+import { keyboardTranslationStops, sampleKeyboardTranslation, } from '../keyboard/translation.js';
+/** Geometry of transforms owned by the keyboard carrier, on the same clock as its WAAPI runs. */
+export const KEYBOARD_CARRIER_MOTION = 'satin-keyboard-carrier-motion';
+const poses = new WeakMap();
+const contents = new WeakMap();
+export function setKeyboardCarrierContent(surface, content, atRest) {
+    contents.set(surface, { content, atRest });
+}
+export function clearKeyboardCarrierContent(surface) {
+    contents.delete(surface);
+}
+export function setKeyboardCarrierPose(element, read) {
+    poses.set(element, read);
+}
+export function clearKeyboardCarrierPose(element) {
+    poses.delete(element);
+}
+export function keyboardCarrierPose(element) {
+    for (let owner = element; owner; owner = owner.parentElement) {
+        const read = poses.get(owner);
+        if (read)
+            return { owner, ...read() };
+    }
+    return undefined;
+}
+/** Interpolate the actual rounded compositor keyframes, rather than fit a second curve. */
+export function keyboardFrameTranslation(frames, elapsed, duration) {
+    return sampleKeyboardTranslation({
+        epoch: 0,
+        duration,
+        end: duration,
+        offset: 0,
+        stops: keyboardTranslationStops(frames),
+    }, elapsed);
+}
+/** A capture's content origin follows the same carrier, excluding native scroll.
+ * Native scroll is transported separately, including real overscroll. */
+export function keyboardBackdropPose(host) {
+    const entry = contents.get(host);
+    const pose = entry && poses.get(entry.content)?.();
+    if (!pose)
+        return undefined;
+    const adjustment = pose.backdropAdjustment ?? 0;
+    return {
+        offsetY: pose.moving ? pose.offsetY + adjustment : entry.atRest(),
+        moving: pose.moving,
+        motion: pose.motion && { ...pose.motion, offset: pose.motion.offset + adjustment },
+    };
+}

package/dist/safe-area/modifiers.d.ts

@@ -0,0 +1,52 @@
+import { type SafeAreaInsetProps } from './SafeAreaInset.js';
+import { type Edge, type EdgeLengths } from './context.js';
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type { Edge, EdgeLengths } from './context.js';
+/** A logical edge, an axis pair or all edges. */
+export type EdgeSetMember = Edge | 'horizontal' | 'vertical' | 'all';
+/** `Edge.Set`: one member or several. */
+export type EdgeSet = EdgeSetMember | readonly EdgeSetMember[];
+/** The content and standard DOM attributes of a layout modifier wrapper. */
+export type LayoutModifierProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & Readonly<{
+    children?: ReactNode;
+}>;
+/** Which edges to pad, and by how much. */
+export type SafeAreaPaddingProps = LayoutModifierProps & Readonly<{
+    /** Edges to pad. Defaults to all edges, as `safeAreaPadding()`. */
+    edges?: EdgeSet;
+    /** Points. Defaults to the system padding, 16 pt. */
+    length?: number;
+    /** `safeAreaPadding(_ insets: EdgeInsets)`; overrides `edges` and `length`. */
+    insets?: EdgeLengths;
+}>;
+/** Adds to the content safe area. Scroll views keep their frame and inset content; other content is padded. Nested padding adds up. */
+export declare function SafeAreaPadding({ edges, length, insets, children, ...props }: SafeAreaPaddingProps): import("react").JSX.Element;
+/** Which edges get a margin, how much, and whether it applies to content or indicators. */
+export type ContentMarginsProps = LayoutModifierProps & Readonly<{
+    edges?: EdgeSet;
+    /** Points. */
+    length: number;
+    /**
+     * `ContentMarginPlacement`. `scrollContent` (and `automatic`) margins the content;
+     * `scrollIndicators` only moves the indicator, which Satin draws in the screen frame and does
+     * not inset, so it has no effect yet.
+     */
+    placement?: 'automatic' | 'scrollContent' | 'scrollIndicators';
+}>;
+/** Sets margins for descendant scroll views. Lists use horizontal layout margins; the innermost value for each edge wins. */
+export declare function ContentMargins({ edges, length, placement, children, ...props }: ContentMarginsProps): import("react").JSX.Element;
+/** A `SafeAreaInset` limited to the top or bottom edge, with no spacing. */
+export type SafeAreaBarProps = Omit<SafeAreaInsetProps, 'edge' | 'spacing'> & Readonly<{
+    edge: 'top' | 'bottom';
+}>;
+/** Places a top or bottom safe-area inset with no spacing and its own scroll-edge material. */
+export declare function SafeAreaBar({ edge, ...props }: SafeAreaBarProps): import("react").JSX.Element;
+/** Which safe-area regions and edges the content ignores. */
+export type IgnoresSafeAreaProps = LayoutModifierProps & Readonly<{
+    /** `SafeAreaRegions`. Defaults to `'all'`. */
+    regions?: 'all' | 'container' | 'keyboard';
+    /** Defaults to all edges. */
+    edges?: EdgeSet;
+}>;
+/** Extends content through selected safe-area edges. Container edges and keyboard avoidance can be controlled independently. */
+export declare function IgnoresSafeArea({ regions, edges, children, ...props }: IgnoresSafeAreaProps): import("react").JSX.Element;

package/dist/safe-area/modifiers.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { startsScreenContent } from '../scroll/screenGeometry.js';
+import { SafeAreaInset } from './SafeAreaInset.js';
+import { ContentMarginsContext, IgnoresSafeAreaContext, NO_LENGTHS, SafeAreaPaddingContext, } from './context.js';
+import { useContext, useLayoutEffect, useRef } from 'react';
+/** SwiftUI's default padding amount (`padding()` and `safeAreaPadding()` with no length). */
+const SYSTEM_PADDING_PX = 16;
+function edgesOf(set) {
+    const edges = new Set();
+    for (const member of typeof set === 'string' ? [set] : set) {
+        if (member === 'all' || member === 'vertical')
+            edges.add('top').add('bottom');
+        if (member === 'all' || member === 'horizontal')
+            edges.add('leading').add('trailing');
+        if (member !== 'all' && member !== 'vertical' && member !== 'horizontal')
+            edges.add(member);
+    }
+    return edges;
+}
+function lengthsOf(edges, length, insets) {
+    if (insets)
+        return { ...NO_LENGTHS, ...insets };
+    const set = edgesOf(edges ?? 'all');
+    const amount = length ?? SYSTEM_PADDING_PX;
+    return {
+        top: set.has('top') ? amount : 0,
+        bottom: set.has('bottom') ? amount : 0,
+        leading: set.has('leading') ? amount : 0,
+        trailing: set.has('trailing') ? amount : 0,
+    };
+}
+/** Adds to the content safe area. Scroll views keep their frame and inset content; other content is padded. Nested padding adds up. */
+export function SafeAreaPadding({ edges, length, insets, children, ...props }) {
+    const parent = useContext(SafeAreaPaddingContext);
+    const own = lengthsOf(edges, length, insets);
+    const total = {
+        top: parent.top + own.top,
+        bottom: parent.bottom + own.bottom,
+        leading: parent.leading + own.leading,
+        trailing: parent.trailing + own.trailing,
+    };
+    return (_jsx("div", { ...props, style: {
+            ...props.style,
+            ['--satin-padding-top']: `${own.top}px`,
+            ['--satin-padding-bottom']: `${own.bottom}px`,
+            ['--satin-padding-leading']: `${own.leading}px`,
+            ['--satin-padding-trailing']: `${own.trailing}px`,
+        }, "data-satin-safe-area-padding": "true", children: _jsx(SafeAreaPaddingContext, { value: total, children: children }) }));
+}
+/** Sets margins for descendant scroll views. Lists use horizontal layout margins; the innermost value for each edge wins. */
+export function ContentMargins({ edges = 'all', length, placement = 'automatic', children, ...props }) {
+    const parent = useContext(ContentMarginsContext);
+    const set = edgesOf(edges);
+    const margins = { ...parent };
+    if (placement !== 'scrollIndicators')
+        for (const edge of set)
+            margins[edge] = length;
+    return (_jsx("div", { ...props, "data-satin-content-margins": "true", children: _jsx(ContentMarginsContext, { value: margins, children: children }) }));
+}
+/** Places a top or bottom safe-area inset with no spacing and its own scroll-edge material. */
+export function SafeAreaBar({ edge, ...props }) {
+    return _jsx(SafeAreaInset, { ...props, edge: edge, spacing: 0, "data-satin-safe-area-bar": edge });
+}
+/** Extends content through selected safe-area edges. Container edges and keyboard avoidance can be controlled independently. */
+export function IgnoresSafeArea({ regions = 'all', edges = 'all', children, ...props }) {
+    const parent = useContext(IgnoresSafeAreaContext);
+    const set = edgesOf(edges);
+    const container = regions === 'keyboard' ? new Set() : set;
+    const keyboard = regions !== 'container' && set.has('bottom');
+    const element = useRef(null);
+    // Only a view that reaches the safe edge extends past it, as SwiftUI's does.
+    useLayoutEffect(() => {
+        const node = element.current;
+        if (!node)
+            return;
+        const position = getComputedStyle(node).position;
+        // An out-of-flow view (a full-screen background) has no slot to keep: it only grows upward.
+        const overlay = position === 'absolute' || position === 'fixed';
+        node.dataset.satinTouchesTop = String(container.has('top') && (overlay || startsScreenContent(node)));
+        node.dataset.satinIgnoresOverlay = String(overlay);
+    });
+    return (_jsx("div", { ...props, ref: element, "data-satin-safe-area-modifier": "ignores", "data-satin-ignores-safe-area-edges": [...container].join(' ') || undefined, children: _jsx(IgnoresSafeAreaContext, { value: {
+                container: new Set([...parent.container, ...container]),
+                keyboard: parent.keyboard || keyboard,
+            }, children: children }) }));
+}