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

package/dist/tabs/accessoryContact.js

@@ -0,0 +1,42 @@
+import { armPointerClickSuppression } from '../press/activation.js';
+import { cancelPointerPressForOwnedGesture } from '../press/gestureArbitration.js';
+/** The accessory owns contacts that start on its chrome, including the gaps between controls. */
+export function installAccessoryContactOwnership(element) {
+    const contacts = new Set();
+    const down = (event) => {
+        if (event.isPrimary && event.button === 0)
+            contacts.add(event.pointerId);
+    };
+    const finish = (event) => {
+        if (!contacts.delete(event.pointerId))
+            return;
+        const bounds = element.getBoundingClientRect();
+        const inside = element.isConnected &&
+            event.target instanceof Node &&
+            element.contains(event.target) &&
+            event.clientX >= bounds.left &&
+            event.clientX <= bounds.right &&
+            event.clientY >= bounds.top &&
+            event.clientY <= bounds.bottom;
+        if (event.type === 'pointercancel' || !inside) {
+            cancelPointerPressForOwnedGesture(event.pointerId);
+            // This receipt follows the contact if WebKit retargets its compatibility click
+            // to a row after the accessory moved, or the finger left its bounds.
+            armPointerClickSuppression(performance.now(), event.pointerId);
+        }
+    };
+    const document = element.ownerDocument;
+    element.addEventListener('pointerdown', down, true);
+    document.addEventListener('pointerup', finish, true);
+    document.addEventListener('pointercancel', finish, true);
+    return () => {
+        element.removeEventListener('pointerdown', down, true);
+        document.removeEventListener('pointerup', finish, true);
+        document.removeEventListener('pointercancel', finish, true);
+        for (const pointerId of contacts) {
+            cancelPointerPressForOwnedGesture(pointerId);
+            armPointerClickSuppression(performance.now(), pointerId);
+        }
+        contacts.clear();
+    };
+}

package/dist/tabs/compactBar.d.ts

@@ -0,0 +1,4 @@
+export declare function registerCompactTabBar(chrome: Element, restore: () => void): () => void;
+export declare function restoreCompactTabBar(chrome: Element | null): void;
+/** Rendered glass chrome can live outside TabView. Its tab panels identify the owner. */
+export declare function tabBottomChrome(dock: Element): HTMLElement | undefined;

package/dist/tabs/compactBar.js

@@ -0,0 +1,28 @@
+/** The rendered tab bar owns restoration; TabView owns selection and retained destinations. */
+const restorers = new WeakMap();
+export function registerCompactTabBar(chrome, restore) {
+    restorers.set(chrome, restore);
+    return () => {
+        if (restorers.get(chrome) === restore)
+            restorers.delete(chrome);
+    };
+}
+export function restoreCompactTabBar(chrome) {
+    if (chrome)
+        restorers.get(chrome)?.();
+}
+/** Rendered glass chrome can live outside TabView. Its tab panels identify the owner. */
+export function tabBottomChrome(dock) {
+    for (const tab of dock.querySelectorAll('[role="tab"][aria-controls]')) {
+        const panel = dock.ownerDocument.getElementById(tab.getAttribute('aria-controls'));
+        const owner = panel?.closest('[data-satin-tab-view]');
+        const chrome = owner?.querySelector('[data-satin-tab-bottom-chrome="phone"]');
+        if (chrome)
+            return chrome;
+    }
+    // Standalone internal specimens do not register panels. Never choose an arbitrary owner.
+    const candidates = dock
+        .closest('[data-satin-root]')
+        ?.querySelectorAll('[data-satin-tab-bottom-chrome="phone"]');
+    return candidates?.length === 1 ? candidates[0] : undefined;
+}

package/dist/tabs/context.d.ts

@@ -0,0 +1,8 @@
+/** Tab visibility pauses framework work without destroying app effects or DOM. */
+export declare const TabActivityContext: import("react").Context<boolean>;
+export declare const TabRegistrationContext: import("react").Context<((retap: () => void) => () => void) | null>;
+/** Public app runtime persists the native tab-sidebar preference with the scene. */
+export declare const TabSidebarContext: import("react").Context<{
+    expanded: boolean | undefined;
+    setExpanded: (expanded: boolean) => void;
+} | null>;

package/dist/tabs/context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+/** Tab visibility pauses framework work without destroying app effects or DOM. */
+export const TabActivityContext = createContext(true);
+export const TabRegistrationContext = createContext(null);
+/** Public app runtime persists the native tab-sidebar preference with the scene. */
+export const TabSidebarContext = createContext(null);

package/dist/tabs/keyboard.d.ts

@@ -0,0 +1,3 @@
+import type { KeyboardEvent } from 'react';
+/** Shared roving focus for the floating tab bar and its sidebar representation. */
+export declare function handleTabKeyDown(event: KeyboardEvent<HTMLElement>): void;

package/dist/tabs/keyboard.js

@@ -0,0 +1,23 @@
+/** Shared roving focus for the floating tab bar and its sidebar representation. */
+export function handleTabKeyDown(event) {
+    const enabled = [
+        ...event.currentTarget.querySelectorAll('[role="tab"]:not(:disabled)'),
+    ].filter(button => !button.closest('[hidden], [inert]'));
+    const current = enabled.indexOf(event.target);
+    if (current < 0)
+        return;
+    const next = event.key === 'ArrowRight' || event.key === 'ArrowDown'
+        ? (current + 1) % enabled.length
+        : event.key === 'ArrowLeft' || event.key === 'ArrowUp'
+            ? (current + enabled.length - 1) % enabled.length
+            : event.key === 'Home'
+                ? 0
+                : event.key === 'End'
+                    ? enabled.length - 1
+                    : undefined;
+    if (next === undefined)
+        return;
+    event.preventDefault();
+    enabled[next].focus();
+    enabled[next].click();
+}

package/dist/tabs/model.d.ts

@@ -0,0 +1,6 @@
+export type TabIdentity<Id extends string = string> = Readonly<{
+    id: Id;
+    disabled?: boolean;
+}>;
+export declare function resolveTabSelection<Id extends string>(tabs: readonly TabIdentity<Id>[], requested?: Id): Id | undefined;
+export declare function retainTabs<Id extends string>(visited: readonly Id[], tabs: readonly TabIdentity<Id>[], selection?: Id): readonly Id[];

package/dist/tabs/model.js

@@ -0,0 +1,16 @@
+export function resolveTabSelection(tabs, requested) {
+    const ids = new Set();
+    for (const tab of tabs) {
+        if (!tab.id.trim() || ids.has(tab.id))
+            throw new Error('Tab ids must be non-empty and unique within TabView.');
+        ids.add(tab.id);
+    }
+    return (tabs.find(tab => tab.id === requested && !tab.disabled)?.id ??
+        tabs.find(tab => !tab.disabled)?.id);
+}
+export function retainTabs(visited, tabs, selection) {
+    const next = visited.filter(id => tabs.some(tab => tab.id === id));
+    if (selection !== undefined && !next.includes(selection))
+        next.push(selection);
+    return next.length === visited.length && next.every((id, i) => id === visited[i]) ? visited : next;
+}

package/dist/tabs/presentation.d.ts

@@ -0,0 +1,7 @@
+import type { TabBarItem } from '../glass/TabBar.js';
+/** Search is a destination with a reserved position, independent of declaration order. */
+export declare function orderedTabItems<T extends Pick<TabBarItem, 'role'>>(items: readonly T[], placement: 'top' | 'sidebar'): readonly T[];
+/** Sizing and painted ink must use the same content, including the role's default symbol. */
+export declare function TopTabLabel({ item }: {
+    item: Pick<TabBarItem, 'role' | 'label'>;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;

package/dist/tabs/presentation.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SymbolImage } from '../symbols/Symbol.js';
+/** Search is a destination with a reserved position, independent of declaration order. */
+export function orderedTabItems(items, placement) {
+    const search = items.filter(item => item.role === 'search');
+    if (!search.length)
+        return items;
+    const destinations = items.filter(item => item.role !== 'search');
+    return placement === 'top' ? [...destinations, ...search] : [...search, ...destinations];
+}
+/** Sizing and painted ink must use the same content, including the role's default symbol. */
+export function TopTabLabel({ item }) {
+    return item.role === 'search' ? _jsx(SymbolImage, { name: "magnifyingglass" }) : item.label;
+}

package/dist/tabs/sourceRevision.d.ts

@@ -0,0 +1,3 @@
+/** One app-scene observer, shared with source discovery; no observer per hidden tab. */
+export declare function observeTabSources(root: Element): () => void;
+export declare function tabSourceRevision(source: Element): number | undefined;

package/dist/tabs/sourceRevision.js

@@ -0,0 +1,36 @@
+import { changesMirrorSource } from '../glass/lens/mirrorInvalidation.js';
+const revisions = new WeakMap();
+const observers = new Set();
+function invalidate(records) {
+    for (const record of records) {
+        if (!changesMirrorSource(record))
+            continue;
+        const element = record.target instanceof Element ? record.target : record.target.parentElement;
+        const panel = element?.closest('[data-satin-tab-panel]');
+        if (!panel)
+            continue;
+        // Visibility is a compositor policy, not a change to the prepared source.
+        if (element === panel &&
+            record.type === 'attributes' &&
+            ['data-satin-tab-active', 'data-satin-tab-presented', 'aria-hidden', 'inert'].includes(record.attributeName ?? ''))
+            continue;
+        revisions.set(panel, (revisions.get(panel) ?? 0) + 1);
+    }
+}
+/** One app-scene observer, shared with source discovery; no observer per hidden tab. */
+export function observeTabSources(root) {
+    const observer = new MutationObserver(invalidate);
+    observer.observe(root, { attributes: true, childList: true, characterData: true, subtree: true });
+    observers.add(observer);
+    return () => {
+        observer.disconnect();
+        observers.delete(observer);
+    };
+}
+export function tabSourceRevision(source) {
+    // A tab activation can occur in React's layout commit before observer delivery.
+    for (const observer of observers)
+        invalidate(observer.takeRecords());
+    const panel = source.closest('[data-satin-tab-panel]');
+    return panel ? (revisions.get(panel) ?? 0) : undefined;
+}

package/dist/tabs/tabSidebarGlyph.d.ts

@@ -0,0 +1,2 @@
+import type { SymbolGlyph } from '../symbols/types.js';
+export declare const tabSidebarCollapseGlyph: SymbolGlyph;

package/dist/tabs/tabSidebarGlyph.js

@@ -0,0 +1,11 @@
+// The expanded outer sidebar returns to a top tab row, not an inner split pane.
+// Its native control depicts a window with a short top inset (iPad reference).
+export const tabSidebarCollapseGlyph = {
+    paths: [
+        {
+            d: 'M 7.7148 49.5742 L 48.2852 49.5742 C 53.1836 49.5742 55.6446 47.1367 55.6446 42.3086 L 55.6446 13.6914 C 55.6446 8.8633 53.1836 6.4258 48.2852 6.4258 L 7.7148 6.4258 C 2.8398 6.4258 .3554 8.8398 .3554 13.6914 L .3554 42.3086 C .3554 47.1602 2.8398 49.5742 7.7148 49.5742 Z M 7.7851 45.8008 C 5.4413 45.8008 4.1288 44.5586 4.1288 42.1211 L 4.1288 13.8789 C 4.1288 11.4414 5.4413 10.1992 7.7851 10.1992 L 48.2147 10.1992 C 50.5350 10.1992 51.8708 11.4414 51.8708 13.8789 L 51.8708 42.1211 C 51.8708 44.5586 50.5350 45.8008 48.2147 45.8008 Z',
+        },
+        { d: 'M 18 13 H 38 A 1.8 1.8 0 0 1 38 16.6 H 18 A 1.8 1.8 0 0 1 18 13 Z' },
+    ],
+    provenance: 'Framework7 Icons 5.0.5 (MIT): rectangle.svg; original top inset from reference native silhouette measurements',
+};

package/dist/tasks/useTask.d.ts

@@ -0,0 +1,16 @@
+/** Publish synchronous state updates only while this invocation is current. */
+export type TaskCommit = (update: () => void) => boolean;
+/** The work `useTask` runs: pass `signal` to fetches and publish state through `commit`. */
+export type TaskAction = (signal: AbortSignal, commit: TaskCommit) => void | Promise<void>;
+/** `task(id:)`: a change of `id` cancels the current run and starts a new one. */
+export type TaskOptions = Readonly<{
+    id?: unknown;
+}>;
+/** Cancels the current run and starts the task again; resolves when that run ends. */
+export type TaskRunner = () => Promise<void>;
+/**
+ * A task tied to this view’s lifetime. Pass signal to fetch and publish results through
+ * commit. Cancellation is cooperative; arbitrary setters outside commit cannot
+ * be intercepted. The returned runner cancels and replaces the current run.
+ */
+export declare function useTask(action: TaskAction, { id }?: TaskOptions): TaskRunner;

package/dist/tasks/useTask.js

@@ -0,0 +1,67 @@
+import { useCallback, useContext, useLayoutEffect, useRef, useState } from 'react';
+import { ScreenContext } from '../navigation/navigationContext.js';
+import { TabActivityContext } from '../tabs/context.js';
+/**
+ * A task tied to this view’s lifetime. Pass signal to fetch and publish results through
+ * commit. Cancellation is cooperative; arbitrary setters outside commit cannot
+ * be intercepted. The returned runner cancels and replaces the current run.
+ */
+export function useTask(action, { id } = {}) {
+    const screen = useContext(ScreenContext);
+    const tabActive = useContext(TabActivityContext);
+    const active = tabActive && !screen?.lifecycle.isCovered;
+    const actionRef = useRef(action);
+    const enabled = useRef(false);
+    const current = useRef(null);
+    const [failure, setFailure] = useState(null);
+    useLayoutEffect(() => {
+        actionRef.current = action;
+    });
+    const run = useCallback(async () => {
+        if (!enabled.current)
+            return;
+        const previous = current.current;
+        const controller = new AbortController();
+        current.current = controller;
+        previous?.abort();
+        if (current.current !== controller || controller.signal.aborted || !enabled.current)
+            return;
+        const commit = update => {
+            if (controller.signal.aborted || current.current !== controller)
+                return false;
+            update();
+            return true;
+        };
+        try {
+            await actionRef.current(controller.signal, commit);
+        }
+        catch (error) {
+            if (!controller.signal.aborted)
+                throw error;
+        }
+    }, []);
+    useLayoutEffect(() => {
+        enabled.current = active;
+        if (active) {
+            const pending = run();
+            const controller = current.current;
+            void pending.catch(error => {
+                if (current.current === controller && !controller.signal.aborted)
+                    setFailure({ error, id, key: screen?.key, controller });
+            });
+        }
+        return () => {
+            enabled.current = false;
+            current.current?.abort();
+            current.current = null;
+        };
+    }, [active, id, screen?.key, run]);
+    if (failure &&
+        active &&
+        Object.is(failure.id, id) &&
+        failure.key === screen?.key &&
+        failure.controller === current.current &&
+        !failure.controller.signal.aborted)
+        throw failure.error;
+    return run;
+}

package/dist/testing.d.ts

@@ -0,0 +1,9 @@
+/** App-test assertion without exposing navigation engine objects. */
+export declare function assertNavigation(container: ParentNode, screen: string): void;
+/** Explicit diagnostic action. The token is requested at call time and never persisted. */
+export declare function sendTestNotification(relay: {
+    url: string;
+    token: () => string | Promise<string>;
+}): Promise<{
+    accepted: number;
+}>;

package/dist/testing.js

@@ -0,0 +1,11 @@
+import { createPushRelayAdapter } from './push/notifications.js';
+/** App-test assertion without exposing navigation engine objects. */
+export function assertNavigation(container, screen) {
+    const active = container.querySelector('[data-satin-screen-container][data-satin-covered="false"]');
+    if (active?.getAttribute('data-satin-screen') !== screen)
+        throw new Error(`Expected active route ${screen}`);
+}
+/** Explicit diagnostic action. The token is requested at call time and never persisted. */
+export function sendTestNotification(relay) {
+    return createPushRelayAdapter(relay).sendTest();
+}

package/dist/text-input/TextEditor.d.ts

@@ -0,0 +1,25 @@
+import { type TextareaHTMLAttributes } from 'react';
+export type TextEditorProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange' | 'rows'> & {
+    value: string;
+    onChange(value: string): void;
+    label?: string;
+    /** Bound content growth independently of the parent, for composers and compact editors. */
+    maxLines?: number;
+    minLines?: number;
+    variant?: 'standalone' | 'row' | 'plain';
+    labelVisibility?: 'visible' | 'hidden';
+    /** Internal semantic marker for the shared vertical TextField editor. */
+    field?: boolean;
+};
+export declare const TextEditor: import("react").ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "defaultValue" | "onChange" | "rows" | "value"> & {
+    value: string;
+    onChange(value: string): void;
+    label?: string;
+    /** Bound content growth independently of the parent, for composers and compact editors. */
+    maxLines?: number;
+    minLines?: number;
+    variant?: 'standalone' | 'row' | 'plain';
+    labelVisibility?: 'visible' | 'hidden';
+    /** Internal semantic marker for the shared vertical TextField editor. */
+    field?: boolean;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/text-input/TextEditor.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useKeyboardMetrics } from '../keyboard/adapter.js';
+import { focusFromFramework } from '../focus/programmaticFocus.js';
+import { editorHeight } from './editorGeometry.js';
+import { measureEditorContentHeight } from './measureEditor.js';
+import { forwardRef, useId, useImperativeHandle, useLayoutEffect, useRef, } from 'react';
+export const TextEditor = forwardRef(function TextEditor({ value, onChange, label, autoFocus, minLines = 3, maxLines, variant = 'standalone', labelVisibility = 'visible', field = false, id, ...props }, forwardedRef) {
+    const keyboard = useKeyboardMetrics();
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current, []);
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const surface = element.closest('[data-satin-scroll-axis="vertical"]');
+        function resize() {
+            if (!element)
+                return;
+            const css = getComputedStyle(element);
+            const lineHeight = parseFloat(css.lineHeight) || 22;
+            const padding = (parseFloat(css.paddingTop) || 0) + (parseFloat(css.paddingBottom) || 0);
+            // Only a scroll surface bounds growth. A content-sized parent is the editor's own height,
+            // so reading it as a limit would stop the editor from ever growing.
+            const containerHeight = surface?.clientHeight ?? Infinity;
+            const visibleHeight = keyboard.viewportHeight > 0
+                ? keyboard.viewportHeight -
+                    Math.max(0, (surface?.getBoundingClientRect().top ?? 0) - keyboard.offsetTop)
+                : containerHeight;
+            // WebKit owns the focused editor's caret and editing UI. Never collapse that control
+            // to measure it: use an isolated, non-focusable copy with the same text layout instead.
+            const available = maxLines === undefined
+                ? Math.min(containerHeight, visibleHeight) - 24
+                : Math.min(Math.max(minLines, maxLines) * lineHeight + padding, keyboard.viewportHeight > 0 ? visibleHeight - 24 : Infinity);
+            const height = editorHeight(measureEditorContentHeight(element), minLines, lineHeight, padding, available);
+            if (element.style.height === `${height}px`)
+                return;
+            // The editable viewport must fit the newly wrapped line before WebKit reveals
+            // its caret. Interpolating this height creates an internally scrolling textarea
+            // on every frame and lets caret reveal fight the animation. The bottom-anchored
+            // transcript owns the resulting inset displacement instead.
+            element.style.height = `${height}px`;
+        }
+        resize();
+        // Wrapping changes with the editor's width, so a narrower layout must re-measure.
+        let width = element.getBoundingClientRect().width;
+        let viewport = surface?.clientHeight;
+        const observer = new ResizeObserver(() => {
+            const nextWidth = element.getBoundingClientRect().width;
+            const nextViewport = surface?.clientHeight;
+            // Animated height deliveries do not change wrapping. Do not create a measuring
+            // textarea or force layout again on every animation frame.
+            if (nextWidth === width && nextViewport === viewport)
+                return;
+            width = nextWidth;
+            viewport = nextViewport;
+            resize();
+        });
+        observer.observe(element);
+        if (surface)
+            observer.observe(surface);
+        element.addEventListener('input', resize);
+        return () => {
+            observer.disconnect();
+            element.removeEventListener('input', resize);
+        };
+    }, [value, minLines, maxLines, keyboard.viewportHeight, keyboard.offsetTop]);
+    useLayoutEffect(() => {
+        if (autoFocus && ref.current)
+            focusFromFramework(ref.current, { preventScroll: true });
+    }, [autoFocus]);
+    return (_jsxs("div", { className: "satin-text-editor", "data-satin-field-style": variant, "data-satin-label-visibility": labelVisibility, children: [label && _jsx("label", { htmlFor: inputId, children: label }), _jsx("textarea", { autoCapitalize: "sentences", autoCorrect: "on", spellCheck: true, ...props, id: inputId, ref: ref, "aria-label": props['aria-label'] ?? (label ? undefined : (props.placeholder ?? 'Text')), "data-satin-role": "text-input", "data-satin-text-editor": field ? undefined : 'true', "data-satin-text-field": field ? 'true' : undefined, "data-satin-field-axis": field ? 'vertical' : undefined, rows: Math.max(1, minLines), value: value, onChange: event => onChange(event.currentTarget.value) })] }));
+});

package/dist/text-input/TextField.d.ts

@@ -0,0 +1,32 @@
+import { type InputHTMLAttributes } from 'react';
+import { type SubmitLabel, type TextFieldKind } from './kinds.js';
+export type TextFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'onSubmit' | 'size'> & {
+    label: string;
+    value: string;
+    onChange(value: string): void;
+    kind?: TextFieldKind;
+    submitLabel?: SubmitLabel;
+    onSubmit?(): void;
+    /** Shared row contract: no List dependency, no wrapper Pressable. */
+    variant?: 'standalone' | 'row' | 'plain';
+    labelVisibility?: 'visible' | 'hidden';
+    labelPlacement?: 'leading' | 'above';
+};
+export declare const TextField: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "onChange" | "onSubmit" | "size" | "value"> & {
+    label: string;
+    value: string;
+    onChange(value: string): void;
+    kind?: TextFieldKind;
+    submitLabel?: SubmitLabel;
+    onSubmit?(): void;
+    /** Shared row contract: no List dependency, no wrapper Pressable. */
+    variant?: 'standalone' | 'row' | 'plain';
+    labelVisibility?: 'visible' | 'hidden';
+    labelPlacement?: 'leading' | 'above';
+} & import("react").RefAttributes<HTMLInputElement>>;
+export type SecureFieldProps = Omit<TextFieldProps, 'kind' | 'type'> & {
+    kind?: 'new-password' | 'current-password';
+};
+export declare const SecureField: import("react").ForwardRefExoticComponent<Omit<TextFieldProps, "kind" | "type"> & {
+    kind?: 'new-password' | 'current-password';
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/text-input/TextField.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { shouldSubmitField } from './submit.js';
+import { forwardRef, useId, useRef, useImperativeHandle, useLayoutEffect, } from 'react';
+import { focusFromFramework } from '../focus/programmaticFocus.js';
+import { textFieldAttributes } from './kinds.js';
+export const TextField = forwardRef(function TextField({ label, autoFocus, value, onChange, kind = 'text', submitLabel, onSubmit, variant = 'standalone', labelPlacement = 'leading', labelVisibility = 'visible', id, className, onKeyDown, style, ...props }, forwardedRef) {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current, []);
+    useLayoutEffect(() => {
+        if (autoFocus && ref.current)
+            focusFromFramework(ref.current, { preventScroll: true });
+    }, [autoFocus]);
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    return (_jsxs("div", { className: "satin-text-field", "data-satin-field-style": variant, "data-satin-label-placement": labelPlacement, "data-satin-label-visibility": labelVisibility, children: [_jsx("label", { htmlFor: inputId, children: label }), _jsx("input", { ...textFieldAttributes(kind, submitLabel), ...props, ref: ref, id: inputId, className: className, style: style, "data-satin-role": "text-input", "data-satin-text-field": "true", placeholder: props.placeholder ??
+                    (variant === 'row' && labelPlacement === 'leading' ? label : undefined), value: value, onChange: event => onChange(event.currentTarget.value), onKeyDown: event => {
+                    onKeyDown?.(event);
+                    if (!shouldSubmitField(event))
+                        return;
+                    event.preventDefault();
+                    if (onSubmit)
+                        onSubmit();
+                    else if ((props.enterKeyHint ?? submitLabel ?? textFieldAttributes(kind).enterKeyHint) !== 'next')
+                        event.currentTarget.blur();
+                } })] }));
+});
+export const SecureField = forwardRef(function SecureField({ kind = 'current-password', ...props }, ref) {
+    return _jsx(TextField, { ...props, kind: kind, type: "password", ref: ref });
+});

package/dist/text-input/editorGeometry.d.ts

@@ -0,0 +1,2 @@
+/** A minimum line request never overrides the available editing viewport. */
+export declare function editorHeight(contentHeight: number, minLines: number, lineHeight: number, padding: number, availableHeight: number): number;

package/dist/text-input/editorGeometry.js

@@ -0,0 +1,6 @@
+/** A minimum line request never overrides the available editing viewport. */
+export function editorHeight(contentHeight, minLines, lineHeight, padding, availableHeight) {
+    const limit = Math.max(lineHeight + padding, availableHeight);
+    const minimum = Math.min(limit, Math.max(1, minLines) * lineHeight + padding);
+    return Math.min(limit, Math.max(minimum, contentHeight));
+}

package/dist/text-input/editorTextLayout.d.ts

@@ -0,0 +1,2 @@
+/** Everything that decides where a glyph of the editor's text is drawn. */
+export declare const EDITOR_TEXT_LAYOUT_PROPERTIES: string[];

package/dist/text-input/editorTextLayout.js

@@ -0,0 +1,31 @@
+/** Everything that decides where a glyph of the editor's text is drawn. */
+export const EDITOR_TEXT_LAYOUT_PROPERTIES = [
+    'font',
+    'font-kerning',
+    'font-feature-settings',
+    'font-variation-settings',
+    'font-variant-ligatures',
+    'font-variant-numeric',
+    'letter-spacing',
+    'word-spacing',
+    'line-height',
+    'text-align',
+    'text-indent',
+    'text-transform',
+    'text-rendering',
+    'tab-size',
+    'writing-mode',
+    'direction',
+    'unicode-bidi',
+    'overflow-wrap',
+    'word-break',
+    'hyphens',
+    'padding-top',
+    'padding-right',
+    'padding-bottom',
+    'padding-left',
+    'border-top-width',
+    'border-right-width',
+    'border-bottom-width',
+    'border-left-width',
+];

package/dist/text-input/focusChain.d.ts

@@ -0,0 +1,27 @@
+/** The focusable field capabilities accepted by a declared editing order. */
+export type FocusChainField = Pick<HTMLInputElement, 'focus' | 'blur' | 'disabled' | 'readOnly' | 'isConnected' | 'closest'>;
+/** Explicit order survives conditional rendering; disabled/unmounted fields are skipped. */
+export declare function createFocusChain<Key extends string>(order: readonly Key[]): {
+    field(key: Key): {
+        ref: (element: FocusChainField | null) => void;
+        onSubmit: () => void;
+    };
+    focus(key: Key): void;
+    dismiss(): void;
+};
+/**
+ * `@FocusState` for a form: the return key moves to the next field in `order` and the
+ * last one dismisses the keyboard. Spread `field(key)` onto each field.
+ *
+ * @example
+ * const focus = useFocusChain(['name', 'email'])
+ * <TextField label="Name" {...focus.field('name')} value={name} onChange={setName} />
+ */
+export declare function useFocusChain<Key extends string>(order: readonly Key[]): {
+    field(key: Key): {
+        ref: (element: FocusChainField | null) => void;
+        onSubmit: () => void;
+    };
+    focus(key: Key): void;
+    dismiss(): void;
+};