@fastsprout/reacd-shadcn 0.0.0-stage → 0.3.0

package/dist/shared/temporal/range-reset-focus.d.ts

@@ -0,0 +1 @@
+export declare function captureRangeFocus(root: HTMLElement): () => void;

package/dist/shared/temporal/range-reset-focus.js

@@ -0,0 +1,16 @@
+const SEGMENTS = '[role="spinbutton"],[role="textbox"]';
+export function captureRangeFocus(root) {
+    const document = root.ownerDocument;
+    const active = document.activeElement;
+    const index = [...root.querySelectorAll(SEGMENTS)].findIndex((segment) => segment === active);
+    return () => {
+        const current = document.activeElement;
+        if (index < 0 ||
+            !root.isConnected ||
+            (current !== document.body && current !== active))
+            return;
+        root.querySelectorAll(SEGMENTS).item(index)?.focus({
+            preventScroll: true,
+        });
+    };
+}

package/dist/shared/temporal/temporal-recovery.d.ts

@@ -0,0 +1,6 @@
+import type { TemporalLimits, TemporalRange } from '@fastsprout/reacd/adapter-runtime/core/date-time.js';
+export interface TemporalRecovery<Value> {
+    readonly key: string;
+    readonly value: Value;
+}
+export declare function temporalRecovery<Value extends string | null | TemporalRange>(value: Value, limits: TemporalLimits): TemporalRecovery<Value>;

package/dist/shared/temporal/temporal-recovery.js

@@ -0,0 +1,4 @@
+export function temporalRecovery(value, limits) {
+    const endpoints = typeof value === 'object' && value !== null ? [value.start, value.end] : value;
+    return { key: JSON.stringify([endpoints, limits.min, limits.max]), value };
+}

package/dist/shared/temporal/use-range-reset.d.ts

@@ -0,0 +1,6 @@
+import type { TemporalRange } from '@fastsprout/reacd/adapter-runtime/core/date-time.js';
+export declare function useRangeReset(value: TemporalRange, request: (value: TemporalRange) => void): {
+    ref: import("react").Dispatch<import("react").SetStateAction<HTMLFieldSetElement | null>>;
+    revision: number;
+    change: (next: TemporalRange) => void;
+};

package/dist/shared/temporal/use-range-reset.js

@@ -0,0 +1,55 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { captureRangeFocus } from './range-reset-focus.js';
+export function useRangeReset(value, request) {
+    const initial = useRef(Object.freeze({ start: value.start, end: value.end }));
+    const latest = useRef(request);
+    const [fieldset, setFieldset] = useState(null);
+    const pending = useRef(null);
+    const restoreFocus = useRef(undefined);
+    const [revision, setRevision] = useState(0);
+    useLayoutEffect(() => {
+        latest.current = request;
+    }, [request]);
+    useLayoutEffect(() => {
+        const restore = restoreFocus.current;
+        if (restore !== undefined) {
+            restoreFocus.current = undefined;
+            queueMicrotask(restore);
+        }
+    }, [revision]);
+    useEffect(() => {
+        if (fieldset === null)
+            return;
+        const root = fieldset;
+        const form = root.form;
+        if (form === null)
+            return;
+        let active = true;
+        function capture(event) {
+            const restore = captureRangeFocus(root);
+            pending.current = event;
+            queueMicrotask(() => {
+                if (!active)
+                    return;
+                pending.current = null;
+                if (!event.defaultPrevented) {
+                    // Reconcile SDK drafts to host authority even when reset is declined.
+                    restoreFocus.current = restore;
+                    setRevision((current) => current + 1);
+                    latest.current(initial.current);
+                }
+            });
+        }
+        form.addEventListener('reset', capture, true);
+        return () => {
+            active = false;
+            pending.current = null;
+            form.removeEventListener('reset', capture, true);
+        };
+    }, [fieldset]);
+    function change(next) {
+        if (pending.current === null)
+            request(next);
+    }
+    return { ref: setFieldset, revision, change };
+}

package/dist/shared/temporal/use-temporal-change.d.ts

@@ -0,0 +1,10 @@
+import type { TemporalRecovery } from './temporal-recovery.js';
+interface TemporalProtection {
+    readonly disabled?: boolean | undefined;
+    readonly readOnly?: boolean | undefined;
+}
+export declare function useTemporalChange<Value>(validate: (value: Value) => boolean, onValueChange: (value: Value) => void, message: string, protection: TemporalProtection, recovery?: TemporalRecovery<Value>): {
+    error: string | undefined;
+    change: (value: Value) => void;
+};
+export {};

package/dist/shared/temporal/use-temporal-change.js

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+export function useTemporalChange(validate, onValueChange, message, protection, recovery) {
+    const [failure, setFailure] = useState();
+    const recovered = failure !== undefined &&
+        recovery !== undefined &&
+        failure.basis !== recovery.key &&
+        validate(recovery.value);
+    if (recovered)
+        setFailure(undefined);
+    function change(value) {
+        if (protection.disabled || protection.readOnly)
+            return;
+        if (!validate(value)) {
+            setFailure({ message, basis: recovery?.key });
+            return;
+        }
+        setFailure(undefined);
+        onValueChange(value);
+    }
+    return { error: recovered ? undefined : failure?.message, change };
+}

package/dist/shared/text/text.adapter.d.ts

@@ -0,0 +1 @@
+export { TextSurface as SharedText } from '@fastsprout/reacd/adapter-runtime/renderer/text/text.renderer.js';

package/dist/shared/text/text.adapter.js

@@ -0,0 +1 @@
+export { TextSurface as SharedText } from '@fastsprout/reacd/adapter-runtime/renderer/text/text.renderer.js';

package/dist/shared/text-area/text-area.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { TextAreaProps } from '@fastsprout/reacd/adapter-runtime/components/text-area/text-area.js';
+export declare function SharedTextArea({ label, value, onValueChange, rows, ...properties }: TextAreaProps): import("react").JSX.Element;

package/dist/shared/text-area/text-area.adapter.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { CONTENT_POLICY } from '@fastsprout/reacd/adapter-runtime/core/policy.js';
+import { Textarea } from '../primitives/textarea.js';
+import { Label } from '../primitives/label.js';
+export function SharedTextArea({ label, value, onValueChange, rows, ...properties }) {
+    const id = useId();
+    return (_jsxs("div", { className: "reacd-node reacd-field", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Textarea, { ...properties, id: id, value: value, rows: rows ?? CONTENT_POLICY.defaultTextAreaRows, maxLength: CONTENT_POLICY.maxTextLength, onChange: (event) => onValueChange(event.target.value) })] }));
+}

package/dist/shared/textarea/textarea.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { TextareaProps } from '@fastsprout/reacd/adapter-runtime/components/textarea/textarea.props.js';
+export declare function SharedTextarea({ label, value, onValueChange, description, name, required, disabled, readOnly, minLength, maxLength, rows, autoResize, maxRows, placeholder, }: TextareaProps): import("react").JSX.Element;

package/dist/shared/textarea/textarea.adapter.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { TEXTAREA_POLICY } from '@fastsprout/reacd/adapter-runtime/core/textarea-policy.js';
+import { useFieldMetadata } from '@fastsprout/reacd/adapter-runtime/renderer/form-field/field-metadata.js';
+import { Textarea } from '../primitives/textarea.js';
+import { Label } from '../primitives/label.js';
+import { useAutoRows } from './use-auto-rows.js';
+export function SharedTextarea({ label, value, onValueChange, description, name, required, disabled, readOnly, minLength, maxLength, rows, autoResize, maxRows, placeholder, }) {
+    const id = useId();
+    const control = useRef(null);
+    const [attempted, setAttempted] = useState(false);
+    const metadata = useFieldMetadata({ name, required, disabled }, description ? [`${id}-description`] : []);
+    const minimum = minLength ?? TEXTAREA_POLICY.minimumLength;
+    const maximum = maxLength ?? TEXTAREA_POLICY.maximumLength;
+    const baseRows = rows ?? TEXTAREA_POLICY.defaultRows;
+    useAutoRows(control, autoResize, value, baseRows, maxRows ?? TEXTAREA_POLICY.defaultMaxRows);
+    const localError = metadata.required && value.length === 0
+        ? TEXTAREA_POLICY.requiredMessage
+        : value.length > 0 && value.length < minimum
+            ? `${TEXTAREA_POLICY.minimumMessagePrefix} ${minimum} ` +
+                TEXTAREA_POLICY.minimumMessageSuffix
+            : '';
+    const visibleError = attempted ? localError : '';
+    const feedback = metadata.error || visibleError;
+    const descriptions = [
+        ...metadata.descriptionIds,
+        ...(visibleError && !metadata.error ? [`${id}-error`] : []),
+    ];
+    function invalid(event) {
+        event.preventDefault();
+        setAttempted(true);
+        control.current?.focus();
+    }
+    return (_jsxs("div", { className: "reacd-node reacd-field reacd-textarea", "data-auto-resize": autoResize || undefined, children: [_jsx(Label, { htmlFor: id, children: label }), description && _jsx("p", { id: `${id}-description`, children: description }), _jsx(Textarea, { ref: control, id: id, value: value, name: metadata.name, placeholder: placeholder, required: metadata.required, disabled: metadata.disabled, readOnly: readOnly, minLength: minimum, maxLength: maximum, rows: baseRows, "aria-invalid": Boolean(feedback) || undefined, "aria-describedby": descriptions.join(' ') || undefined, onInvalid: invalid, onChange: (event) => {
+                    const next = event.target.value;
+                    if (!metadata.disabled && !readOnly && next.length <= maximum) {
+                        onValueChange(next);
+                    }
+                } }), visibleError && !metadata.error && (_jsx("p", { id: `${id}-error`, role: "alert", className: "reacd-field-error", children: visibleError })), _jsx("input", { type: "text", hidden: true, defaultValue: "", required: Boolean(localError), disabled: metadata.disabled, onInvalid: invalid })] }));
+}

package/dist/shared/textarea/use-auto-rows.d.ts

@@ -0,0 +1,2 @@
+import type { RefObject } from 'react';
+export declare function useAutoRows(ref: RefObject<HTMLTextAreaElement | null>, enabled: boolean | undefined, value: string, rows: number, maxRows: number): void;

package/dist/shared/textarea/use-auto-rows.js

@@ -0,0 +1,33 @@
+import { useLayoutEffect } from 'react';
+import { TEXTAREA_POLICY } from '@fastsprout/reacd/adapter-runtime/core/textarea-policy.js';
+function positive(value, fallback) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
+export function useAutoRows(ref, enabled, value, rows, maxRows) {
+    useLayoutEffect(() => {
+        const control = ref.current;
+        if (!enabled || control === null)
+            return;
+        const measure = () => {
+            control.rows = rows;
+            const style = window.getComputedStyle(control);
+            const fontSize = positive(style.fontSize, TEXTAREA_POLICY.fallbackFontSizePx);
+            const lineHeight = positive(style.lineHeight, fontSize * TEXTAREA_POLICY.fallbackLineHeightRatio);
+            const padding = positive(style.paddingTop, 0) + positive(style.paddingBottom, 0);
+            // scrollHeight rounds to integer pixels; plain textarea lines are discrete.
+            const measured = Math.round((control.scrollHeight - padding) / lineHeight);
+            control.rows = Math.max(rows, Math.min(maxRows, measured));
+        };
+        measure();
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);
+        observer?.observe(control);
+        window.addEventListener('resize', measure);
+        document.fonts?.addEventListener('loadingdone', measure);
+        return () => {
+            observer?.disconnect();
+            window.removeEventListener('resize', measure);
+            document.fonts?.removeEventListener('loadingdone', measure);
+        };
+    }, [ref, enabled, value, rows, maxRows]);
+}

package/dist/shared/theme/theme.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeProps } from '@fastsprout/reacd/adapter-runtime/components/theme/theme.js';
+export declare function SharedTheme({ children, template, defaults }: ThemeProps): import("react").JSX.Element;

package/dist/shared/theme/theme.adapter.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from 'react';
+import { RenderContext } from '@fastsprout/reacd/adapter-runtime/components/shared/port.js';
+import { ThemeVariablesContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/theme-context.js';
+import { templateVariables } from '@fastsprout/reacd/adapter-runtime/renderer/theme/template-variables.js';
+import { defaultProperties } from '@fastsprout/reacd/adapter-runtime/renderer/theme/default-properties.js';
+export function SharedTheme({ children, template, defaults }) {
+    const inheritedVariables = useContext(ThemeVariablesContext);
+    const inheritedPort = useContext(RenderContext);
+    const variables = template === undefined ? inheritedVariables : templateVariables(template);
+    const port = useMemo(() => {
+        if (inheritedPort === null)
+            return null;
+        return {
+            render(name, properties) {
+                const fallback = Object.entries(defaults ?? {}).find(([component]) => component === name)?.[1];
+                return inheritedPort.render(name, defaultProperties(properties, fallback));
+            },
+            report: (issues) => inheritedPort.report(issues),
+        };
+    }, [inheritedPort, defaults]);
+    return (_jsx(ThemeVariablesContext.Provider, { value: variables, children: _jsx(RenderContext.Provider, { value: port, children: _jsx("div", { className: "reacd-node reacd-theme", style: variables, children: children }) }) }));
+}

package/dist/shared/timeline/timeline.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { TimelineProps } from '@fastsprout/reacd/adapter-runtime/components/timeline/timeline.js';
+export declare function SharedTimeline({ label, items, value, onValueChange, orientation, reverse, intent, }: TimelineProps): import("react").JSX.Element;

package/dist/shared/timeline/timeline.adapter.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TIMELINE_DEFAULTS, TIMELINE_POLICY, } from '@fastsprout/reacd/adapter-runtime/core/timeline-policy.js';
+import { Button } from '../primitives/button.js';
+export function SharedTimeline({ label, items, value, onValueChange, orientation = TIMELINE_DEFAULTS.orientation, reverse = TIMELINE_DEFAULTS.reverse, intent = TIMELINE_DEFAULTS.intent, }) {
+    const current = value === undefined ? 0 : items.findIndex((item) => item.id === value);
+    const events = items.map((item, index) => ({
+        ...item,
+        status: index < current ? 'completed' : index === current ? 'current' : 'upcoming',
+    }));
+    if (reverse)
+        events.reverse();
+    return (_jsx("ol", { className: "reacd-node reacd-timeline", "aria-label": label, "data-slot": "timeline", "data-orientation": orientation, "data-intent": intent, children: events.map((item) => (_jsxs("li", { "data-state": item.status, "aria-current": item.status === 'current' ? 'step' : undefined, children: [_jsx("span", { className: "reacd-timeline-state", children: TIMELINE_POLICY.statuses[item.status] }), item.date !== undefined && (_jsx("span", { className: "reacd-timeline-date", children: item.date })), onValueChange === undefined ? (_jsx("p", { className: "reacd-timeline-title", children: item.title })) : (_jsx(Button, { className: "reacd-button reacd-timeline-title", type: "button", variant: "ghost", disabled: item.disabled, onClick: () => onValueChange(item.id), children: item.title })), item.description !== undefined && (_jsx("p", { className: "reacd-timeline-description", children: item.description }))] }, item.id))) }));
+}

package/dist/shared/toast/toast-data.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+import type { ToastProps } from '@fastsprout/reacd/adapter-runtime/components/toast/index.js';
+export type ToastFeedback = 'rejected' | 'invalid' | 'actionError';
+export interface ToastData {
+    variables: CSSProperties;
+    host: HTMLElement | null;
+    direction: 'ltr' | 'rtl';
+    intent: NonNullable<ToastProps['intent']>;
+    description?: string | undefined;
+    closeLabel: string;
+    requestClose: () => void;
+    feedback: ToastFeedback | null;
+    action?: {
+        label: string;
+        execute: () => void;
+    } | undefined;
+}

package/dist/shared/toast/toast-data.js

@@ -0,0 +1 @@
+export {};

package/dist/shared/toast/toast-focus.d.ts

@@ -0,0 +1,12 @@
+export interface FocusableToast {
+    id: string;
+    ref?: {
+        current: HTMLElement | null;
+    } | undefined;
+    limited?: boolean | undefined;
+    transitionStatus?: 'starting' | 'ending' | undefined;
+}
+export declare function createToastFocus(): {
+    remember(viewport: HTMLElement, origin: EventTarget | null): void;
+    close(id: string, records: readonly FocusableToast[], dismiss: () => void): void;
+};

package/dist/shared/toast/toast-focus.js

@@ -0,0 +1,38 @@
+export function createToastFocus() {
+    let previous = null;
+    return {
+        remember(viewport, origin) {
+            if (origin instanceof HTMLElement &&
+                !viewport.contains(origin) &&
+                !origin.hasAttribute('data-base-ui-focus-guard'))
+                previous = origin;
+        },
+        close(id, records, dismiss) {
+            const index = records.findIndex((record) => record.id === id);
+            const root = records[index]?.ref?.current;
+            if (root == null || !root.contains(root.ownerDocument.activeElement)) {
+                dismiss();
+                return;
+            }
+            const ordered = [
+                ...records.slice(index + 1),
+                ...records.slice(0, index).reverse(),
+            ];
+            const next = ordered.find((record) => !record.limited &&
+                record.transitionStatus !== 'ending' &&
+                record.ref?.current?.isConnected);
+            const destination = next?.ref?.current;
+            dismiss();
+            queueMicrotask(() => {
+                const document = root.ownerDocument;
+                const active = document.activeElement;
+                if (active !== document.body && !root.contains(active))
+                    return;
+                if (destination?.isConnected)
+                    destination.focus();
+                else if (previous?.isConnected)
+                    previous.focus();
+            });
+        },
+    };
+}

package/dist/shared/toast/toast-provider.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export declare function SharedToastProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/shared/toast/toast-provider.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Toast } from '@base-ui/react/toast';
+import { TOAST_POLICY } from '@fastsprout/reacd/adapter-runtime/core/toast-policy.js';
+import { createToastQueue } from './toast-queue.js';
+import { ToastQueueContext } from './toast-queue-context.js';
+import { SharedToastViewport } from './toast-viewport.js';
+export function SharedToastProvider({ children }) {
+    const [queue] = useState(createToastQueue);
+    return (_jsx(ToastQueueContext.Provider, { value: queue, children: _jsxs(Toast.Provider, { limit: TOAST_POLICY.maximumVisible, children: [children, _jsx(SharedToastViewport, {})] }) }));
+}

package/dist/shared/toast/toast-queue-context.d.ts

@@ -0,0 +1,24 @@
+export declare const ToastQueueContext: import("react").Context<{
+    focus: {
+        remember(viewport: HTMLElement, origin: EventTarget | null): void;
+        close(id: string, records: readonly import("./toast-focus.js").FocusableToast[], dismiss: () => void): void;
+    };
+    keys: import("jotai").PrimitiveAtom<ReadonlySet<string>> & {
+        init: ReadonlySet<string>;
+    };
+    store: import("jotai").Store;
+    reserve(id: string): boolean;
+    release(id: string): void;
+} | null>;
+export declare function useToastQueue(): {
+    focus: {
+        remember(viewport: HTMLElement, origin: EventTarget | null): void;
+        close(id: string, records: readonly import("./toast-focus.js").FocusableToast[], dismiss: () => void): void;
+    };
+    keys: import("jotai").PrimitiveAtom<ReadonlySet<string>> & {
+        init: ReadonlySet<string>;
+    };
+    store: import("jotai").Store;
+    reserve(id: string): boolean;
+    release(id: string): void;
+};

package/dist/shared/toast/toast-queue-context.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+export const ToastQueueContext = createContext(null);
+export function useToastQueue() {
+    const queue = useContext(ToastQueueContext);
+    if (queue === null)
+        throw new Error('Toast requires a Surface notification provider.');
+    return queue;
+}

package/dist/shared/toast/toast-queue.d.ts

@@ -0,0 +1,12 @@
+export declare function createToastQueue(): {
+    focus: {
+        remember(viewport: HTMLElement, origin: EventTarget | null): void;
+        close(id: string, records: readonly import("./toast-focus.js").FocusableToast[], dismiss: () => void): void;
+    };
+    keys: import("jotai/vanilla").PrimitiveAtom<ReadonlySet<string>> & {
+        init: ReadonlySet<string>;
+    };
+    store: import("jotai/vanilla").Store;
+    reserve(id: string): boolean;
+    release(id: string): void;
+};

package/dist/shared/toast/toast-queue.js

@@ -0,0 +1,29 @@
+import { createToastFocus } from './toast-focus.js';
+import { atom, createStore } from 'jotai/vanilla';
+import { TOAST_POLICY } from '@fastsprout/reacd/adapter-runtime/core/toast-policy.js';
+export function createToastQueue() {
+    const keys = atom(new Set());
+    const store = createStore();
+    return {
+        focus: createToastFocus(),
+        keys,
+        store,
+        reserve(id) {
+            const active = store.get(keys);
+            if (active.has(id))
+                return true;
+            if (active.size >= TOAST_POLICY.maximumQueued)
+                return false;
+            store.set(keys, new Set([...active, id]));
+            return true;
+        },
+        release(id) {
+            const active = store.get(keys);
+            if (!active.has(id))
+                return;
+            const next = new Set(active);
+            next.delete(id);
+            store.set(keys, next);
+        },
+    };
+}

package/dist/shared/toast/toast-registration.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from 'react';
+import type { ToastProps } from '@fastsprout/reacd/adapter-runtime/components/toast/index.js';
+export declare function ToastRegistration({ id, properties, variables, direction, host, }: {
+    id: string;
+    properties: ToastProps;
+    variables: CSSProperties;
+    direction: 'ltr' | 'rtl';
+    host: HTMLElement | null;
+}): import("react").JSX.Element | null;

package/dist/shared/toast/toast-registration.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAtomValue } from 'jotai';
+import { useToastQueue } from './toast-queue-context.js';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Toast } from '@base-ui/react/toast';
+import { TOAST_DEFAULTS, TOAST_POLICY, TOAST_DURATIONS, toastDecision, toastTimeout, } from '@fastsprout/reacd/adapter-runtime/core/toast-policy.js';
+export function ToastRegistration({ id, properties, variables, direction, host, }) {
+    const { toasts, add, update, close } = Toast.useToastManager();
+    const queue = useToastQueue();
+    const slots = useAtomValue(queue.keys, { store: queue.store });
+    const current = toasts.find((toast) => toast.id === id);
+    const full = !slots.has(id) && slots.size >= TOAST_POLICY.maximumQueued;
+    const [feedback, setFeedback] = useState(null);
+    const [held, setHeld] = useState(false);
+    const alive = useRef(false);
+    const forwarding = useRef(false);
+    const snapshot = useRef(toasts);
+    useLayoutEffect(() => {
+        snapshot.current = toasts;
+    }, [toasts]);
+    const latest = useRef(properties.onOpenChange);
+    useLayoutEffect(() => {
+        latest.current = properties.onOpenChange;
+    }, [properties.onOpenChange]);
+    const requestClose = useCallback(() => {
+        if (!alive.current)
+            return;
+        setHeld(true);
+        let result;
+        try {
+            result = latest.current(false);
+        }
+        catch {
+            setFeedback('actionError');
+            return;
+        }
+        const decision = toastDecision(result);
+        if (decision === 'invalid')
+            setFeedback('invalid');
+        else if (decision === 'veto')
+            setFeedback('rejected');
+        else {
+            forwarding.current = true;
+            try {
+                close(id);
+            }
+            finally {
+                forwarding.current = false;
+            }
+        }
+    }, [close, id]);
+    const nativeClose = useCallback(() => {
+        if (!forwarding.current)
+            requestClose();
+    }, [requestClose]);
+    const action = useMemo(() => {
+        const declared = properties.action;
+        if (declared === undefined)
+            return undefined;
+        return {
+            label: declared.label,
+            execute: () => {
+                let result;
+                try {
+                    result = declared.onPress();
+                }
+                catch {
+                    setFeedback('actionError');
+                    return;
+                }
+                const decision = toastDecision(result);
+                if (decision === 'invalid')
+                    setFeedback('invalid');
+                else if (decision === 'veto')
+                    setFeedback('rejected');
+                else {
+                    setFeedback(null);
+                    if (properties.closeOnAction ?? TOAST_DEFAULTS.closeOnAction)
+                        requestClose();
+                }
+            },
+        };
+    }, [properties.action, properties.closeOnAction, requestClose]);
+    const options = useMemo(() => ({
+        id,
+        title: properties.title,
+        description: properties.description,
+        type: properties.intent ?? TOAST_DEFAULTS.intent,
+        priority: (properties.priority ?? TOAST_DEFAULTS.priority) === 'urgent'
+            ? 'high'
+            : 'low',
+        timeout: held || feedback !== null
+            ? TOAST_DURATIONS.persistent
+            : toastTimeout(properties.duration, properties.action !== undefined),
+        onClose: nativeClose,
+        data: {
+            variables,
+            direction,
+            feedback,
+            host,
+            intent: properties.intent ?? TOAST_DEFAULTS.intent,
+            description: properties.description,
+            closeLabel: properties.closeLabel ?? TOAST_DEFAULTS.closeLabel,
+            requestClose,
+            action,
+        },
+    }), [
+        id,
+        properties.title,
+        properties.description,
+        properties.intent,
+        properties.priority,
+        properties.duration,
+        action,
+        properties.action,
+        properties.closeLabel,
+        held,
+        feedback,
+        variables,
+        direction,
+        host,
+        requestClose,
+        nativeClose,
+    ]);
+    useLayoutEffect(() => {
+        alive.current = true;
+        return () => {
+            alive.current = false;
+            queue.focus.close(id, snapshot.current, () => close(id));
+            queue.release(id);
+        };
+    }, [close, id, queue]);
+    const present = current !== undefined;
+    const phase = current?.transitionStatus;
+    const currentTimeout = current?.timeout;
+    useLayoutEffect(() => {
+        if (full || !queue.reserve(id))
+            return;
+        if (!present || phase === 'ending')
+            add(options);
+        else if (currentTimeout !== options.timeout)
+            update(id, options);
+        else {
+            const { timeout: _timeout, ...metadata } = options;
+            update(id, metadata);
+        }
+    }, [queue, full, phase, present, currentTimeout, add, update, id, options]);
+    return full ? _jsx("p", { role: "alert", children: TOAST_DEFAULTS.limit }) : null;
+}

package/dist/shared/toast/toast-viewport.d.ts

@@ -0,0 +1 @@
+export declare function SharedToastViewport(): import("react").JSX.Element | null;