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

package/dist/web/authentication.js

@@ -0,0 +1,488 @@
+import { secureWebURL } from './urlPolicy.js';
+import { consumeWebAuthenticationURL } from '../push/urlProjection.js';
+const terminal = (status) => ['succeeded', 'cancelled', 'expired', 'failed'].includes(status);
+function randomSecret() {
+    const bytes = crypto.getRandomValues(new Uint8Array(32));
+    return base64URL(bytes);
+}
+function base64URL(bytes) {
+    return btoa(String.fromCharCode(...bytes))
+        .replaceAll('+', '-')
+        .replaceAll('/', '_')
+        .replace(/=+$/, '');
+}
+function callbackValue(value, state) {
+    if (!value || typeof value !== 'object')
+        return null;
+    const response = value;
+    if (response.state !== state)
+        return null;
+    if (typeof response.code === 'string' &&
+        response.code.length > 0 &&
+        response.code.length <= 8192 &&
+        response.error === undefined)
+        return { state, code: response.code };
+    if (typeof response.error === 'string' &&
+        response.error.length > 0 &&
+        response.error.length <= 256 &&
+        response.code === undefined)
+        return { state, error: response.error };
+    return null;
+}
+/** Durable authorization-code + PKCE handoff. This does not implement a native authentication session. */
+export function defineWebAuthentication(configuration) {
+    const app = secureWebURL(configuration.appURL, configuration.appURL);
+    const callback = secureWebURL(configuration.callbackURL, app.href);
+    const authorization = secureWebURL(configuration.authorizationURL, app.href);
+    const bridge = configuration.bridgeURL ? secureWebURL(configuration.bridgeURL, app.href) : null;
+    if (!/^[a-zA-Z0-9_-]{1,80}$/.test(configuration.id) || !configuration.clientID)
+        throw new Error('Web authentication needs a stable id and clientID');
+    if (!app.pathname.endsWith('/') ||
+        app.search ||
+        app.hash ||
+        callback.search ||
+        callback.hash ||
+        callback.origin !== app.origin ||
+        callback.pathname.startsWith(app.pathname) ||
+        (bridge &&
+            (bridge.origin !== app.origin ||
+                bridge.search ||
+                bridge.hash ||
+                bridge.pathname.startsWith(app.pathname))))
+        throw new Error('Callback and bridge must be same-origin, outside the app scope, without query or fragment');
+    const timeoutMs = configuration.timeoutMs ?? 600_000;
+    if (!Number.isFinite(timeoutMs) || timeoutMs < 10_000 || timeoutMs > 3_600_000)
+        throw new Error('Authentication timeoutMs must be between 10000 and 3600000');
+    if (configuration.scopes?.includes('openid') && !configuration.issuer)
+        throw new Error('OpenID Connect requires an expected issuer and server token validation');
+    const binding = JSON.stringify([
+        app.href,
+        callback.href,
+        authorization.href,
+        configuration.clientID,
+        configuration.issuer,
+    ]);
+    const key = `satin:web-auth:${configuration.id}`;
+    const listeners = new Set();
+    let snapshot = { status: 'idle' };
+    let popup = null;
+    let activeExchange = null;
+    let resumeJob = null;
+    let preparing = false;
+    let generation = 0;
+    const publish = (state) => {
+        if (JSON.stringify(state) !== JSON.stringify(snapshot)) {
+            snapshot = state;
+            listeners.forEach(listener => listener());
+        }
+        return snapshot;
+    };
+    const read = () => {
+        const raw = localStorage.getItem(key);
+        if (!raw)
+            return null;
+        const transaction = JSON.parse(raw);
+        if (!transaction ||
+            transaction.binding !== binding ||
+            typeof transaction.state !== 'string' ||
+            !/^[A-Za-z0-9_-]{43}$/.test(transaction.state) ||
+            !Number.isFinite(transaction.expiresAt) ||
+            ![
+                'prepared',
+                'pending',
+                'completing',
+                'succeeded',
+                'cancelled',
+                'expired',
+                'failed',
+            ].includes(transaction.status))
+            throw new Error('Invalid authentication storage');
+        return transaction;
+    };
+    const save = (transaction) => {
+        localStorage.setItem(key, JSON.stringify(transaction));
+    };
+    const describe = (transaction) => {
+        if (transaction.status === 'failed')
+            return { status: 'failed', reason: transaction.reason ?? 'exchange-failed' };
+        if (terminal(transaction.status))
+            return { status: transaction.status };
+        let needsReturn = false;
+        try {
+            needsReturn = Boolean(popup?.closed);
+        }
+        catch {
+            needsReturn = true;
+        }
+        return {
+            status: transaction.status,
+            expiresAt: transaction.expiresAt,
+            needsReturn,
+        };
+    };
+    const bridgeRequest = async (operation, state, response, proof, proofHash) => {
+        if (!bridge)
+            return null;
+        const controller = new AbortController();
+        const timer = setTimeout(() => controller.abort(), 10_000);
+        try {
+            const result = await fetch(bridge.href, {
+                method: 'POST',
+                credentials: 'same-origin',
+                cache: 'no-store',
+                redirect: 'error',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    operation,
+                    id: configuration.id,
+                    state,
+                    response,
+                    proof,
+                    proofHash,
+                    timeoutMs,
+                }),
+                signal: controller.signal,
+            });
+            if (!result.ok)
+                throw new Error('Authentication bridge unavailable');
+            const body = await result.json();
+            if (operation !== 'read' &&
+                (!body || typeof body !== 'object' || body.accepted !== true))
+                throw new Error('Authentication bridge did not accept the operation');
+            return body;
+        }
+        finally {
+            clearTimeout(timer);
+        }
+    };
+    const finish = (transaction, status, reason) => {
+        const result = {
+            state: transaction.state,
+            binding,
+            expiresAt: transaction.expiresAt,
+            status,
+            reason,
+        };
+        save(result);
+        if (bridge)
+            void bridgeRequest('clear', transaction.state, undefined, transaction.proof).catch(() => { });
+        return publish(describe(result));
+    };
+    const reconcile = async () => {
+        let transaction = read();
+        if (!transaction)
+            return publish({ status: 'idle' });
+        if (terminal(transaction.status))
+            return publish(describe(transaction));
+        if (transaction.expiresAt <= Date.now())
+            return finish(transaction, 'expired');
+        let response = callbackValue(transaction.response, transaction.state);
+        if (!response && bridge) {
+            const delivered = await bridgeRequest('read', transaction.state, undefined, transaction.proof);
+            response = callbackValue(delivered, transaction.state);
+        }
+        // Storage or a bridge response is the completion signal. Closing a popup is not proof.
+        const current = read();
+        if (!current || current.state !== transaction.state || terminal(current.status))
+            return current ? publish(describe(current)) : publish({ status: 'idle' });
+        transaction = current;
+        if (transaction.expiresAt <= Date.now())
+            return finish(transaction, 'expired');
+        response ??= callbackValue(transaction.response, transaction.state);
+        if (!response)
+            return publish(describe(transaction));
+        if (response.error)
+            return finish(transaction, response.error === 'access_denied' ? 'cancelled' : 'failed', 'authorization-rejected');
+        if (!transaction.nonce ||
+            !transaction.verifier ||
+            !/^[A-Za-z0-9_-]{43}$/.test(transaction.verifier))
+            return finish(transaction, 'failed', 'missing-verifier');
+        transaction.status = 'completing';
+        save(transaction);
+        publish(describe(transaction));
+        const controller = new AbortController();
+        activeExchange = controller;
+        const timer = setTimeout(() => controller.abort(), Math.max(0, transaction.expiresAt - Date.now()));
+        try {
+            await configuration.exchange({
+                code: response.code,
+                codeVerifier: transaction.verifier,
+                callbackURL: callback.href,
+                transactionID: transaction.state,
+                nonce: transaction.nonce,
+                expectedIssuer: configuration.issuer,
+                signal: controller.signal,
+            });
+            const latest = read();
+            if (!latest || latest.state !== transaction.state || terminal(latest.status))
+                return latest ? publish(describe(latest)) : publish({ status: 'idle' });
+            if (controller.signal.aborted)
+                return finish(latest, 'expired');
+            return finish(latest, 'succeeded');
+        }
+        catch {
+            const latest = read();
+            if (latest?.state === transaction.state && terminal(latest.status))
+                return publish(describe(latest));
+            return finish(transaction, controller.signal.aborted ? 'expired' : 'failed', 'exchange-failed');
+        }
+        finally {
+            clearTimeout(timer);
+            if (activeExchange === controller)
+                activeExchange = null;
+        }
+    };
+    const resume = () => {
+        if (resumeJob)
+            return resumeJob;
+        if (location.origin !== app.origin)
+            return Promise.resolve(publish({ status: 'unavailable', reason: 'wrong-origin' }));
+        if (!navigator.locks)
+            return Promise.resolve(publish({ status: 'unavailable', reason: 'locks-unavailable' }));
+        resumeJob = navigator.locks
+            .request(key, reconcile)
+            .catch(() => publish({ status: 'unavailable', reason: 'storage-or-bridge-unavailable' }))
+            .finally(() => {
+            resumeJob = null;
+        });
+        return resumeJob;
+    };
+    const start = (state, transport) => {
+        let transaction = null;
+        try {
+            transaction = read();
+            if (!transaction ||
+                transaction.state !== state ||
+                terminal(transaction.status) ||
+                !transaction.authorizationURL)
+                return { status: 'unavailable', reason: 'request-consumed' };
+            if (transaction.expiresAt <= Date.now()) {
+                finish(transaction, 'expired');
+                return { status: 'unavailable', reason: 'request-expired' };
+            }
+            if (transport !== 'popup' && transport !== 'redirect')
+                return { status: 'unavailable', reason: 'invalid-transport' };
+            if (transaction.status !== 'prepared')
+                return { status: 'unavailable', reason: 'already-started' };
+            transaction.status = 'pending';
+            save(transaction);
+            if (transport === 'popup') {
+                popup = window.open(transaction.authorizationURL, '_blank', 'popup');
+                if (!popup) {
+                    transaction.status = 'prepared';
+                    save(transaction);
+                    publish(describe(transaction));
+                    return { status: 'unavailable', reason: 'popup-blocked' };
+                }
+            }
+            else
+                window.location.assign(transaction.authorizationURL);
+            publish(describe(transaction));
+            return { status: 'dispatched', transport };
+        }
+        catch {
+            if (transaction && transaction.state === state && transaction.status === 'pending') {
+                try {
+                    transaction.status = 'prepared';
+                    save(transaction);
+                    publish(describe(transaction));
+                }
+                catch {
+                    /* Storage failure is explicit in the action result. */
+                }
+            }
+            return { status: 'unavailable', reason: 'storage-or-navigation-unavailable' };
+        }
+    };
+    return {
+        async prepare() {
+            if (preparing)
+                throw new Error('Authentication preparation is already running');
+            if (location.origin !== app.origin || !navigator.locks)
+                throw new Error('Authentication origin or locking is unavailable');
+            preparing = true;
+            const version = ++generation;
+            try {
+                return await navigator.locks.request(key, async () => {
+                    const prior = read();
+                    if (prior && !terminal(prior.status) && prior.expiresAt > Date.now())
+                        throw new Error('Cancel the pending authentication before preparing another');
+                    const state = randomSecret();
+                    const verifier = randomSecret();
+                    const nonce = randomSecret();
+                    const proof = randomSecret();
+                    const proofHash = base64URL(new Uint8Array(await crypto.subtle.digest('SHA-256', new TextEncoder().encode(proof))));
+                    const challenge = base64URL(new Uint8Array(await crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier))));
+                    const url = new URL(authorization);
+                    url.searchParams.set('response_type', 'code');
+                    url.searchParams.set('client_id', configuration.clientID);
+                    url.searchParams.set('redirect_uri', callback.href);
+                    url.searchParams.set('state', state);
+                    if (configuration.scopes?.includes('openid'))
+                        url.searchParams.set('nonce', nonce);
+                    url.searchParams.set('code_challenge', challenge);
+                    url.searchParams.set('code_challenge_method', 'S256');
+                    if (configuration.scopes?.length)
+                        url.searchParams.set('scope', configuration.scopes.join(' '));
+                    await bridgeRequest('register', state, undefined, undefined, proofHash);
+                    if (version !== generation) {
+                        if (bridge)
+                            void bridgeRequest('clear', state, undefined, proof).catch(() => { });
+                        throw new Error('Authentication preparation was cancelled');
+                    }
+                    const transaction = {
+                        state,
+                        verifier,
+                        nonce,
+                        proof,
+                        binding,
+                        authorizationURL: url.href,
+                        expiresAt: Date.now() + timeoutMs,
+                        status: 'prepared',
+                    };
+                    save(transaction);
+                    publish(describe(transaction));
+                    return { start: (options = {}) => start(state, options.transport ?? 'popup') };
+                });
+            }
+            finally {
+                preparing = false;
+            }
+        },
+        async complete() {
+            try {
+                const url = new URL(location.href);
+                if (url.origin !== callback.origin || url.pathname !== callback.pathname || url.hash)
+                    return { status: 'rejected', reason: 'wrong-callback-url' };
+                const state = url.searchParams.get('state') ?? '';
+                if (!/^[A-Za-z0-9_-]{43}$/.test(state) ||
+                    url.searchParams.getAll('state').length !== 1 ||
+                    url.searchParams.getAll('code').length > 1 ||
+                    url.searchParams.getAll('error').length > 1)
+                    return { status: 'rejected', reason: 'invalid-response' };
+                const response = callbackValue({
+                    state,
+                    ...(url.searchParams.has('code') ? { code: url.searchParams.get('code') } : {}),
+                    ...(url.searchParams.has('error') ? { error: url.searchParams.get('error') } : {}),
+                }, state);
+                if (!response)
+                    return { status: 'rejected', reason: 'invalid-response' };
+                if (url.searchParams.getAll('iss').length > 1 ||
+                    (url.searchParams.has('iss') && url.searchParams.get('iss') !== configuration.issuer))
+                    return { status: 'rejected', reason: 'issuer-mismatch' };
+                if (!navigator.locks)
+                    return { status: 'unavailable', reason: 'locks-unavailable' };
+                let stored = false;
+                let rejected = false;
+                try {
+                    await navigator.locks.request(key, () => {
+                        const transaction = read();
+                        if (transaction?.state === state &&
+                            transaction.status === 'pending' &&
+                            transaction.expiresAt > Date.now() &&
+                            !transaction.response) {
+                            transaction.response = response;
+                            save(transaction);
+                            stored = true;
+                        }
+                        else if (transaction?.state === state)
+                            rejected = true;
+                    });
+                }
+                catch {
+                    /* Partitioned or unavailable storage needs the server bridge. */
+                }
+                if (rejected)
+                    return { status: 'rejected', reason: 'request-consumed-or-expired' };
+                if (bridge) {
+                    try {
+                        await bridgeRequest('complete', state, response);
+                        stored = true;
+                    }
+                    catch {
+                        if (!stored)
+                            return { status: 'unavailable', reason: 'bridge-unavailable' };
+                    }
+                }
+                if (!stored)
+                    return { status: 'rejected', reason: 'unknown-state' };
+                consumeWebAuthenticationURL(url.href);
+                try {
+                    window.opener?.postMessage({ type: 'SATIN_AUTH_READY', id: configuration.id }, app.origin);
+                }
+                catch {
+                    /* Completion is durable; the app can reconcile after manual return. */
+                }
+                return { status: 'completed', returnURL: app.href };
+            }
+            catch {
+                return { status: 'unavailable', reason: 'callback-storage-unavailable' };
+            }
+        },
+        resume,
+        cancel() {
+            generation++;
+            activeExchange?.abort();
+            try {
+                const transaction = read();
+                if (transaction && !terminal(transaction.status))
+                    finish(transaction, 'cancelled');
+                else
+                    publish(transaction ? describe(transaction) : { status: 'cancelled' });
+            }
+            catch {
+                publish({ status: 'unavailable', reason: 'storage-unavailable' });
+            }
+            try {
+                popup?.close();
+            }
+            catch {
+                /* A severed opener cannot close its auxiliary page. */
+            }
+            popup = null;
+        },
+        getSnapshot: () => snapshot,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        connect() {
+            const reconcileOnReturn = () => {
+                if (document.visibilityState !== 'hidden')
+                    void resume();
+            };
+            const storage = (event) => {
+                if (event.key === key || event.key === null)
+                    reconcileOnReturn();
+            };
+            const message = (event) => {
+                if (popup &&
+                    event.source === popup &&
+                    event.origin === app.origin &&
+                    event.data?.type === 'SATIN_AUTH_READY' &&
+                    event.data.id === configuration.id)
+                    reconcileOnReturn();
+            };
+            window.addEventListener('pageshow', reconcileOnReturn);
+            window.addEventListener('focus', reconcileOnReturn);
+            window.addEventListener('storage', storage);
+            window.addEventListener('message', message);
+            document.addEventListener('visibilitychange', reconcileOnReturn);
+            const timer = setInterval(() => {
+                if (['pending', 'completing'].includes(snapshot.status))
+                    reconcileOnReturn();
+            }, 1000);
+            reconcileOnReturn();
+            return () => {
+                clearInterval(timer);
+                window.removeEventListener('pageshow', reconcileOnReturn);
+                window.removeEventListener('focus', reconcileOnReturn);
+                window.removeEventListener('storage', storage);
+                window.removeEventListener('message', message);
+                document.removeEventListener('visibilitychange', reconcileOnReturn);
+            };
+        },
+    };
+}

package/dist/web/openURL.d.ts

@@ -0,0 +1,37 @@
+import { type CSSProperties, type ReactNode } from 'react';
+/** A preference for the browser-owned presentation, not a Safari launch guarantee. */
+export interface OpenURLOptions {
+    /** Defaults to true. A strict external-browser request is unavailable on this runtime. */
+    prefersInApp?: boolean;
+}
+/** Dispatched means WebKit accepted the action; it does not mean the page loaded. */
+export type OpenURLResult = {
+    status: 'handled';
+    destination: 'app';
+} | {
+    status: 'dispatched';
+    destination: 'web';
+} | {
+    status: 'unavailable';
+    reason: 'invalid-url' | 'external-browser' | 'unregistered-app-url' | 'navigation-failed' | 'popup-blocked';
+};
+export type OpenURLAction = (url: string, options?: OpenURLOptions) => OpenURLResult;
+/** Internal factory keeps the same policy in component and imperative actions. */
+export declare function createOpenURLAction(options: {
+    scope: string;
+    openInternal: (url: string) => boolean;
+    dispatch: (url: string) => boolean;
+}): OpenURLAction;
+/** Open a web URL from an action. Registered app URLs stay in the current document. */
+export declare function useOpenURL(): OpenURLAction;
+export interface LinkProps extends OpenURLOptions {
+    destination: string;
+    children: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    /** Receives dispatch or rejection immediately, never inferred page completion. */
+    onResult?: (result: OpenURLResult) => void;
+}
+/** An accessible URL action with the framework's press and scroll-cancellation policy. */
+export declare function Link({ destination, prefersInApp, onResult, children, ...props }: LinkProps): import("react").JSX.Element;

package/dist/web/openURL.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useAppContext } from '../public/context.js';
+import { Pressable } from '../press/Pressable.js';
+import { createRouteCodec } from '../navigation/routeCodec.js';
+import { resolveRoutes } from '../public/routeRegistry.js';
+import { webURL } from './urlPolicy.js';
+/** Internal factory keeps the same policy in component and imperative actions. */
+export function createOpenURLAction(options) {
+    return (input, preference = {}) => {
+        const url = webURL(input, options.scope);
+        if (!url)
+            return { status: 'unavailable', reason: 'invalid-url' };
+        const scope = new URL(options.scope);
+        if (url.origin === scope.origin && url.pathname.startsWith(scope.pathname)) {
+            if (options.openInternal(url.href))
+                return { status: 'handled', destination: 'app' };
+            // Never turn a typo or an invalid typed route into a document replacement.
+            return { status: 'unavailable', reason: 'unregistered-app-url' };
+        }
+        if (preference.prefersInApp === false)
+            return { status: 'unavailable', reason: 'external-browser' };
+        try {
+            if (!options.dispatch(url.href))
+                return { status: 'unavailable', reason: 'popup-blocked' };
+            return { status: 'dispatched', destination: 'web' };
+        }
+        catch {
+            return { status: 'unavailable', reason: 'navigation-failed' };
+        }
+    };
+}
+/** Open a web URL from an action. Registered app URLs stay in the current document. */
+export function useOpenURL() {
+    const runtime = useAppContext();
+    return useMemo(() => createOpenURLAction({
+        scope: new URL(runtime.app.scope, location.origin).href,
+        openInternal: input => {
+            const url = new URL(input);
+            const scope = new URL(runtime.app.scope, location.origin);
+            if (url.pathname !== scope.pathname || url.hash)
+                return false;
+            const encoded = url.searchParams.get('satin-route');
+            if (encoded !== null) {
+                try {
+                    const path = JSON.parse(encoded);
+                    const codec = createRouteCodec(resolveRoutes(runtime.routes));
+                    if (!Array.isArray(path) || path.some(entry => !codec.decode(entry)))
+                        return false;
+                    const tab = url.searchParams.get('satin-tab');
+                    if (tab && !runtime.stacks.has(tab))
+                        return false;
+                }
+                catch {
+                    return false;
+                }
+            }
+            else if (!url.search)
+                url.searchParams.set('satin-route', '[]');
+            else
+                return false;
+            return runtime.sceneRoutes?.openURL(url.href) ?? false;
+        },
+        dispatch: url => {
+            // Create synchronously in the gesture, then sever the opener before loading untrusted content.
+            // Opening with noopener directly returns null even on success, hiding popup blocking.
+            const page = window.open('about:blank', '_blank');
+            if (!page)
+                return false;
+            try {
+                page.opener = null;
+                page.location.replace(url);
+                return true;
+            }
+            catch {
+                page.close();
+                throw new Error('Web handoff failed');
+            }
+        },
+    }), [runtime]);
+}
+/** An accessible URL action with the framework's press and scroll-cancellation policy. */
+export function Link({ destination, prefersInApp, onResult, children, ...props }) {
+    const openURL = useOpenURL();
+    return (_jsx(Pressable, { ...props, role: "link", onPress: () => {
+            const result = openURL(destination, { prefersInApp });
+            onResult?.(result);
+        }, children: children }));
+}

package/dist/web/urlPolicy.d.ts

@@ -0,0 +1,3 @@
+/** URL policy shared by framework web handoffs. Unknown schemes fail closed. */
+export declare function webURL(input: string, base: string): URL | null;
+export declare function secureWebURL(input: string, base: string): URL;

package/dist/web/urlPolicy.js

@@ -0,0 +1,19 @@
+/** URL policy shared by framework web handoffs. Unknown schemes fail closed. */
+export function webURL(input, base) {
+    try {
+        const url = new URL(input, base);
+        if (!['https:', 'http:'].includes(url.protocol) || url.username || url.password)
+            return null;
+        return url;
+    }
+    catch {
+        return null;
+    }
+}
+export function secureWebURL(input, base) {
+    const url = webURL(input, base);
+    const loopback = url && ['localhost', '127.0.0.1', '[::1]'].includes(url.hostname);
+    if (!url || (url.protocol !== 'https:' && !loopback))
+        throw new Error('Web authentication requires HTTPS or a loopback origin');
+    return url;
+}

package/dist/web/useWebAuthentication.d.ts

@@ -0,0 +1,3 @@
+import type { WebAuthentication, WebAuthenticationState } from './authentication.js';
+/** Subscribe to durable authentication state and reconcile on launch and resume. */
+export declare function useWebAuthentication(authentication: WebAuthentication): WebAuthenticationState;

package/dist/web/useWebAuthentication.js

@@ -0,0 +1,6 @@
+import { useEffect, useSyncExternalStore } from 'react';
+/** Subscribe to durable authentication state and reconcile on launch and resume. */
+export function useWebAuthentication(authentication) {
+    useEffect(() => authentication.connect(), [authentication]);
+    return useSyncExternalStore(authentication.subscribe, authentication.getSnapshot, authentication.getSnapshot);
+}

package/dist/zoom/Zoomable.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes } from 'react';
+/** Zoomable's maximum scale and scale callback; Satin owns its pointer handlers. */
+export interface ZoomableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onPointerDown' | 'onPointerMove' | 'onPointerUp' | 'onPointerCancel' | 'onLostPointerCapture'> {
+    /** Maximum content magnification. Page scale always remains one. */
+    maxScale?: number;
+    onScaleChange?: (scale: number) => void;
+}
+/** A bounded image/map viewport. Pinch and pan belong only to this content role.
+ * Keyboard + / - zoom about the center; 0 resets. Supply an accessible label. */
+export declare function Zoomable({ children, maxScale, onScaleChange, style, onKeyDown, ...props }: ZoomableProps): import("react").JSX.Element;