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

package/dist/search/searchChrome.js

@@ -0,0 +1,31 @@
+/* The shared navigation bar and its edge host over a screen's scroll view. Same lookup as the
+ * drawer's (SearchDrawer.tsx), which keeps a private copy until reference adopts this module. */
+export function navigationChromeOf(element) {
+    for (let node = element.parentElement; node; node = node.parentElement) {
+        const header = node.querySelector(':scope > [data-satin-navigation-chrome]');
+        if (header) {
+            const edge = node.querySelector(':scope > [data-satin-navigation-edge-host]');
+            return { header, edge };
+        }
+    }
+    return { header: null, edge: null };
+}
+export const subscribeNever = () => () => { };
+/** A screen entering, settled or leaving over this one in its pane (a split sidebar has none). */
+export function stackedOver(navigator, key, scroller) {
+    if (!navigator || !key)
+        return false;
+    const pane = scroller?.closest('[data-satin-screen-container]')?.dataset.satinPane;
+    if (pane === 'sidebar')
+        return false;
+    const entries = navigator.getState().entries;
+    const index = entries.findIndex(entry => entry.key === key);
+    return index >= 0 && index < entries.length - 1;
+}
+/** This screen's own title layer and toolbar in the shared bar. */
+export function ownBarParts(header, key) {
+    if (!header || !key)
+        return [];
+    const parts = header.querySelectorAll('[data-satin-navigation-title-key], [data-satin-entry-toolbar]');
+    return [...parts].filter(part => (part.dataset.satinNavigationTitleKey ?? part.dataset.satinEntryToolbar) === key);
+}

package/dist/search/searchMotion.d.ts

@@ -0,0 +1,30 @@
+import { type MenuSpring } from '../glass/lens/menuSpring.js';
+import { sampledKeyframes, springTrack, type SpringParameters, type SpringTrack } from '../motion/springTrack.js';
+export { sampledKeyframes, springTrack, type SpringTrack };
+/**
+ * Native `.searchable` presentation and dismissal, measured from the presentation layer of a
+ * stock SwiftUI drawer (iOS 27.0, 15 focus/close trials in light and dark,
+ * every frame).
+ *
+ * - The field's position and width, the list content, the close button and the field's grey fill
+ *   to glass crossfade all ride one spring: mass 1, stiffness 353.23, damping 30.357
+ *   (damping ratio 0.808, RMS at most 0.44 pt per trial).
+ * - On presentation the large title fades as exp(-travel / 20 pt) of the field's travel so far.
+ *   The bar's own title and items fade faster, exp(-travel / 9.5 pt) (standard header, two Simulator takes, RMS 0.012).
+ * - The scope bar fades in 131 ms after the field starts, on its own spring; on dismissal it is
+ *   gone on the first frame.
+ * - On dismissal the title and bar items fade back in 99 ms after the field starts.
+ */
+export declare const SEARCH_FIELD_SPRING: SpringParameters;
+export declare const SEARCH_SCOPES_IN_SPRING: SpringParameters;
+export declare const SEARCH_TITLE_IN_SPRING: SpringParameters;
+/** Points of field travel over which the large title's opacity falls by a factor of e. */
+export declare const SEARCH_TITLE_FADE_PT = 20;
+/** The same for the bar's inline title and toolbar items. */
+export declare const SEARCH_BAR_ITEMS_FADE_PT = 9.5;
+/** The search field's spring, carrying the release velocity of a drag. */
+export declare function searchSpring(parameters: SpringParameters, velocity?: number): MenuSpring;
+/** Normalised velocity of a running track at `elapsed` ms, for a retarget that keeps momentum. */
+export declare function springVelocity(spring: MenuSpring, elapsed: number): number;
+export declare function titleFadeOpacity(travel: number): number;
+export declare function barItemsFadeOpacity(travel: number): number;

package/dist/search/searchMotion.js

@@ -0,0 +1,46 @@
+import { menuSpring } from '../glass/lens/menuSpring.js';
+import { sampledKeyframes, springMotion, springTrack, } from '../motion/springTrack.js';
+export { sampledKeyframes, springTrack };
+/**
+ * Native `.searchable` presentation and dismissal, measured from the presentation layer of a
+ * stock SwiftUI drawer (iOS 27.0, 15 focus/close trials in light and dark,
+ * every frame).
+ *
+ * - The field's position and width, the list content, the close button and the field's grey fill
+ *   to glass crossfade all ride one spring: mass 1, stiffness 353.23, damping 30.357
+ *   (damping ratio 0.808, RMS at most 0.44 pt per trial).
+ * - On presentation the large title fades as exp(-travel / 20 pt) of the field's travel so far.
+ *   The bar's own title and items fade faster, exp(-travel / 9.5 pt) (standard header, two Simulator takes, RMS 0.012).
+ * - The scope bar fades in 131 ms after the field starts, on its own spring; on dismissal it is
+ *   gone on the first frame.
+ * - On dismissal the title and bar items fade back in 99 ms after the field starts.
+ */
+export const SEARCH_FIELD_SPRING = { stiffness: 353.23, damping: 30.357 };
+export const SEARCH_SCOPES_IN_SPRING = {
+    stiffness: 606.73,
+    damping: 48.677,
+    delay: 131,
+};
+export const SEARCH_TITLE_IN_SPRING = {
+    stiffness: 636.45,
+    damping: 50.462,
+    delay: 99,
+};
+/** Points of field travel over which the large title's opacity falls by a factor of e. */
+export const SEARCH_TITLE_FADE_PT = 20;
+/** The same for the bar's inline title and toolbar items. */
+export const SEARCH_BAR_ITEMS_FADE_PT = 9.5;
+/** The search field's spring, carrying the release velocity of a drag. */
+export function searchSpring(parameters, velocity = 0) {
+    return springMotion(parameters, velocity);
+}
+/** Normalised velocity of a running track at `elapsed` ms, for a retarget that keeps momentum. */
+export function springVelocity(spring, elapsed) {
+    return menuSpring(spring, elapsed).velocity;
+}
+export function titleFadeOpacity(travel) {
+    return Math.exp(-Math.abs(travel) / SEARCH_TITLE_FADE_PT);
+}
+export function barItemsFadeOpacity(travel) {
+    return Math.exp(-Math.abs(travel) / SEARCH_BAR_ITEMS_FADE_PT);
+}

package/dist/search/searchPlacement.d.ts

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

package/dist/search/searchPlacement.js

@@ -0,0 +1,15 @@
+/** Stock iOS 27.0 reference List + searchable defaults: a tab owns the bottom dock, so
+ * iPhone automatic search uses the drawer there; iPad uses the trailing navigation
+ * toolbar. Explicit drawer/default-toolbar-item requests keep their existing paths. */
+export function resolveSearchPlacement(placement, screen) {
+    if (placement === 'navigationBarDrawer')
+        return 'navigationBarDrawer';
+    if (placement === 'toolbar' || screen.searchToolbarItem) {
+        return screen.compact && !screen.scoped ? 'toolbar' : 'navigationBarDrawer';
+    }
+    if (!screen.compact)
+        return 'navigationBarToolbar';
+    if (screen.scoped || screen.tabbed || screen.bottomBarItems)
+        return 'navigationBarDrawer';
+    return 'toolbar';
+}

package/dist/search/searchable.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+/** `searchScopes(_:activation: .onSearchPresentation)`: a controlled scope bar shown
+ * under the field while search is presented. */
+export type SearchScopes = Readonly<{
+    selection: string;
+    onSelectionChange(selection: string): void;
+    options: readonly Readonly<{
+        id: string;
+        label: string;
+    }>[];
+}>;
+/** `searchSuggestions` with `searchCompletion`: choosing one replaces the text. It does
+ * not submit. */
+export type SearchSuggestion = Readonly<{
+    id: string;
+    text: string;
+    label?: ReactNode;
+}>;
+/** `SearchFieldPlacement`. `'automatic'` uses platform placement on iPhone: the bottom toolbar
+ * outside a TabView when the screen has no other bottom bar items or scopes, else a drawer that
+ * scrolls away with content. Regular-width automatic search uses the trailing navigation toolbar. */
+export type SearchFieldPlacement = 'automatic' | 'navigationBarDrawer' | 'toolbar';
+/**
+ * `searchable(text:isPresented:placement:prompt:)`. The bar owns the field: its capsule,
+ * magnifier, clear button, close button, scope bar and collapse on scroll. In the bottom toolbar,
+ * the presented field rides above the keyboard with a close button, and the bar and title give
+ * way. Place `<DefaultToolbarItem kind="search" placement="bottomBar" />` to put it beside other
+ * bottom bar items (Messages).
+ */
+export type Searchable = Readonly<{
+    text: string;
+    onTextChange(text: string): void;
+    prompt?: string;
+    /** Default `'automatic'`. On iPhone a field with `scopes` uses the drawer. */
+    placement?: SearchFieldPlacement;
+    scopes?: SearchScopes;
+    suggestions?: readonly SearchSuggestion[];
+    onSubmit?(): void;
+} & ({
+    isPresented?: never;
+    onPresentedChange?(presented: boolean): void;
+} | {
+    isPresented: boolean;
+    onPresentedChange(presented: boolean): void;
+})>;
+export declare function validateSearchPresentation(configuration: Searchable): void;

package/dist/search/searchable.js

@@ -0,0 +1,5 @@
+export function validateSearchPresentation(configuration) {
+    if (configuration.isPresented !== undefined &&
+        typeof configuration.onPresentedChange !== 'function')
+        throw new TypeError('Controlled search presentation requires onPresentedChange.');
+}

package/dist/search/useSearchPresentation.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+import { type Searchable, type SearchSuggestion } from './searchable.js';
+export declare function useSearchPresentation(configuration: Searchable, input: RefObject<HTMLInputElement | null>): {
+    presented: boolean;
+    present: () => void;
+    dismiss: () => void;
+    change: (text: string) => void;
+    submit: () => void;
+    complete: (suggestion: SearchSuggestion) => void;
+    suggestions: readonly Readonly<{
+        id: string;
+        text: string;
+        label?: import("react").ReactNode;
+    }>[];
+};

package/dist/search/useSearchPresentation.js

@@ -0,0 +1,61 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { focusFromFramework } from '../focus/programmaticFocus.js';
+import { validateSearchPresentation } from './searchable.js';
+/*
+ * The state of one `searchable` field, whatever draws it: presentation (owned or controlled by
+ * `isPresented:`), text changes, submission and suggestion completion, as SwiftUI's search
+ * controller. The bottom toolbar field uses it (SearchToolbarField.tsx); the navigation bar drawer
+ * keeps its own copy until reference adopts this hook (spec notes, reference construction update).
+ */
+export function useSearchPresentation(configuration, input) {
+    validateSearchPresentation(configuration);
+    const [ownPresented, setOwnPresented] = useState(false);
+    const presented = configuration.isPresented ?? ownPresented;
+    const [submittedText, setSubmittedText] = useState(null);
+    const configurationRef = useRef(configuration);
+    useLayoutEffect(() => {
+        configurationRef.current = configuration;
+    });
+    const mounted = useRef(false);
+    const setPresented = useCallback((next) => {
+        const current = configurationRef.current;
+        if (current.isPresented === undefined)
+            setOwnPresented(next);
+        current.onPresentedChange?.(next);
+    }, []);
+    const present = () => {
+        if (!presented)
+            setPresented(true);
+    };
+    const dismiss = () => {
+        input.current?.blur();
+        setSubmittedText(null);
+        if (configurationRef.current.text)
+            configurationRef.current.onTextChange('');
+        setPresented(false);
+    };
+    const change = (text) => {
+        setSubmittedText(null);
+        configuration.onTextChange(text);
+    };
+    const submit = () => {
+        setSubmittedText(configuration.text);
+        input.current?.blur();
+        configuration.onSubmit?.();
+    };
+    const complete = (suggestion) => {
+        change(suggestion.text);
+        if (input.current)
+            focusFromFramework(input.current, { preventScroll: true });
+    };
+    // Native presents the field focused, including a programmatic `isPresented`.
+    useEffect(() => {
+        const element = input.current;
+        if (presented && element && document.activeElement !== element && mounted.current) {
+            focusFromFramework(element, { preventScroll: true });
+        }
+        mounted.current = true;
+    }, [presented, input]);
+    const suggestions = presented && submittedText !== configuration.text ? (configuration.suggestions ?? []) : [];
+    return { presented, present, dismiss, change, submit, complete, suggestions };
+}

package/dist/server.d.ts

@@ -0,0 +1,7 @@
+import type { IncomingMessage, ServerResponse } from 'node:http';
+/** Node static adapter. Stream GET/HEAD with single byte ranges, no cache or
+ * compression. A fallback is used only for missing extensionless routes.
+ * Other methods are left to the caller. Root and every file must resolve
+ * inside the same real directory, including symlink targets.
+ */
+export declare function serveStaticFile(request: IncomingMessage, response: ServerResponse, root: string, fallback?: string): Promise<void>;

package/dist/server.js

@@ -0,0 +1,144 @@
+import { constants } from 'node:fs';
+import { open, realpath, stat } from 'node:fs/promises';
+import { extname, resolve, sep } from 'node:path';
+import { pipeline } from 'node:stream/promises';
+import { mediaTypes } from './app/mediaTypes.js';
+const mime = {
+    ...mediaTypes,
+    '.html': 'text/html; charset=utf-8',
+    '.js': 'text/javascript; charset=utf-8',
+    '.mjs': 'text/javascript; charset=utf-8',
+    '.css': 'text/css; charset=utf-8',
+    '.json': 'application/json',
+    '.webmanifest': 'application/manifest+json',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.webp': 'image/webp',
+    '.avif': 'image/avif',
+    '.gif': 'image/gif',
+    '.ico': 'image/x-icon',
+    '.svg': 'image/svg+xml',
+    '.woff2': 'font/woff2',
+};
+// RFC 9110 §14: ignore unsupported/malformed/multiple ranges; 416 only for
+// a valid unsatisfiable single range. BigInt prevents decimal overflow.
+function singleRange(header, size) {
+    const match = /^bytes=(\d*)-(\d*)$/i.exec(header?.trim() ?? '');
+    if (!match || (!match[1] && !match[2]) || !size)
+        return undefined;
+    const length = BigInt(size);
+    const first = match[1] ? BigInt(match[1]) : undefined;
+    const last = match[2] ? BigInt(match[2]) : undefined;
+    if (first !== undefined && last !== undefined && last < first)
+        return undefined;
+    if (first === undefined) {
+        if (last === 0n)
+            return null;
+        return { start: Number(last >= length ? 0n : length - last), end: size - 1 };
+    }
+    if (first >= length)
+        return null;
+    return {
+        start: Number(first),
+        end: Number(last === undefined || last >= length ? length - 1n : last),
+    };
+}
+/** Node static adapter. Stream GET/HEAD with single byte ranges, no cache or
+ * compression. A fallback is used only for missing extensionless routes.
+ * Other methods are left to the caller. Root and every file must resolve
+ * inside the same real directory, including symlink targets.
+ */
+export async function serveStaticFile(request, response, root, fallback) {
+    const end = (status) => {
+        response.writeHead(status, { 'content-length': '0' }).end();
+    };
+    if (request.method !== 'GET' && request.method !== 'HEAD') {
+        response.setHeader('Allow', 'GET, HEAD');
+        end(405);
+        return;
+    }
+    let handle;
+    try {
+        const directory = await realpath(root);
+        const inside = (path) => path === directory || path.startsWith(directory + sep);
+        let pathname;
+        try {
+            pathname = decodeURIComponent(new URL(request.url ?? '/', 'http://localhost').pathname);
+        }
+        catch {
+            end(400);
+            return;
+        }
+        if (pathname.includes('\0') || pathname.includes('\\')) {
+            end(400);
+            return;
+        }
+        let file = resolve(directory, '.' + pathname);
+        if (!inside(file)) {
+            end(403);
+            return;
+        }
+        try {
+            if ((await stat(file)).isDirectory())
+                file = resolve(file, 'index.html');
+        }
+        catch (error) {
+            if (error.code !== 'ENOENT')
+                throw error;
+            if (!fallback || extname(file)) {
+                end(404);
+                return;
+            }
+            file = resolve(directory, fallback);
+        }
+        file = await realpath(file);
+        if (!inside(file)) {
+            end(403);
+            return;
+        }
+        // Do not block opening a FIFO, or follow a last-moment leaf symlink.
+        handle = await open(file, constants.O_RDONLY | constants.O_NONBLOCK | constants.O_NOFOLLOW);
+        const info = await handle.stat();
+        if (!info.isFile()) {
+            end(404);
+            return;
+        }
+        if (!Number.isSafeInteger(info.size)) {
+            end(500);
+            return;
+        }
+        // No validators are emitted; If-Range therefore cannot match strongly.
+        // HEAD must ignore Range entirely (RFC 9110 §14.2).
+        const range = request.method === 'GET' && !request.headers['if-range']
+            ? singleRange(request.headers.range, info.size)
+            : undefined;
+        response.setHeader('Content-Type', mime[extname(file).toLowerCase()] ?? 'application/octet-stream');
+        response.setHeader('Cache-Control', 'no-store');
+        response.setHeader('Accept-Ranges', 'bytes');
+        if (range === null) {
+            response.setHeader('Content-Range', `bytes */${info.size}`);
+            end(416);
+            return;
+        }
+        const length = range ? range.end - range.start + 1 : info.size;
+        response.setHeader('Content-Length', length);
+        if (range)
+            response.setHeader('Content-Range', `bytes ${range.start}-${range.end}/${info.size}`);
+        response.writeHead(range ? 206 : 200);
+        if (request.method === 'HEAD' || !length) {
+            response.end();
+            return;
+        }
+        await pipeline(handle.createReadStream({ ...range, autoClose: false }), response);
+    }
+    catch (error) {
+        if (response.headersSent)
+            response.destroy(error instanceof Error ? error : undefined);
+        else
+            end(['ENOENT', 'ENOTDIR'].includes(error.code ?? '') ? 404 : 500);
+    }
+    finally {
+        await handle?.close();
+    }
+}

package/dist/settings/DisclosureIndicator.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export type DisclosureIndicatorProps = SVGProps<SVGSVGElement>;
+/** Framework7 disclosure artwork; framework layout still owns the row aperture. */
+export declare function DisclosureIndicator({ scale: _scale, ...props }: DisclosureIndicatorProps): import("react").JSX.Element;

package/dist/settings/DisclosureIndicator.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SymbolImage } from '../symbols/Symbol.js';
+/** Framework7 disclosure artwork; framework layout still owns the row aperture. */
+export function DisclosureIndicator({ scale: _scale, ...props }) {
+    return (_jsx(SymbolImage, { ...props, name: "chevron.right", weight: "semibold", "data-satin-settings-disclosure": "true" }));
+}

package/dist/settings/tokens.d.ts

@@ -0,0 +1,129 @@
+export declare const SETTINGS_ROOT_INLINE_INSET_PX = 16;
+export declare const SETTINGS_ROOT_PRO_MAX_INLINE_INSET_PX = 20;
+export declare function settingsRootInlineInset(viewportWidth: number, screen: {
+    width: number;
+    height: number;
+}): number;
+export declare const SETTINGS_DETAIL_INLINE_INSET_PX = 20;
+export declare const SETTINGS_ROOT_LARGE_TITLE_TOP_OFFSET_PX: number;
+export declare const SETTINGS_LARGE_TITLE_FONT_SIZE_PX: 34;
+export declare const SETTINGS_LARGE_TITLE_LINE_HEIGHT_PX: 41;
+export declare const SETTINGS_NAVIGATION_BAR_HEIGHT_PX = 44;
+export declare const SETTINGS_BACK_BUTTON_INLINE_INSET_PX = 16;
+export declare const SETTINGS_BACK_BUTTON_SIZE_PX = 44;
+export declare const SETTINGS_DETAIL_CONTENT_TOP_OFFSET_PX = 72;
+export declare const SETTINGS_ROOT_ROW_HEIGHT_PX = 52;
+export declare const SETTINGS_DETAIL_ROW_HEIGHT_PX = 52;
+export declare const SETTINGS_GROUP_CORNER_RADIUS_PX = 25;
+export declare const SETTINGS_ROW_ICON_SIZE_PX = 30;
+export declare const SETTINGS_ROW_ICON_CORNER_RADIUS_PX = 7;
+export declare const SETTINGS_SEPARATOR_LEADING_INSET_PX = 58;
+export declare const SETTINGS_SEPARATOR_HAIRLINE_PX = 1;
+export declare const SETTINGS_SEPARATOR_OFFSET_Y_PX: number;
+export declare const SETTINGS_SEPARATOR_TRAILING_INSET_PX = 20;
+export declare const SETTINGS_ROW_TRAILING_INSET_PX = 20;
+export declare const SETTINGS_DISCLOSURE_WIDTH_PX = 15;
+export declare const SETTINGS_DISCLOSURE_HEIGHT_PX = 18;
+export declare const SETTINGS_DISCLOSURE_OFFSET_X_PX: number;
+export declare const SETTINGS_DISCLOSURE_OFFSET_Y_PX: number;
+export declare const SETTINGS_DISCLOSURE_LIGHT_COLOR = "#c5c5c7";
+export declare const SETTINGS_DISCLOSURE_DARK_COLOR = "#5a5a5e";
+export declare const SETTINGS_GROUP_SPACING_PX = 35;
+export declare const settingsChromeTokens: Readonly<{
+    menuToolbarWidthPx: 44;
+    menuToolbarPanelOffsetYPx: 7;
+    menuToolbarHeightPx: 44;
+    menuToolbarTrailingInsetPx: 20;
+    backButtonInlineInsetPx: 16;
+    backButtonSizePx: 44;
+    detailContentTopOffsetPx: 72;
+    detailInlineInsetPx: 20;
+    detailRowHeightPx: 52;
+    groupCornerRadiusPx: 25;
+    groupSpacingPx: 35;
+    disclosureDarkColor: "#5a5a5e";
+    disclosureHeightPx: 18;
+    disclosureLightColor: "#c5c5c7";
+    disclosureOffsetXPx: number;
+    disclosureOffsetYPx: number;
+    disclosureWidthPx: 15;
+    largeTitleFontSizePx: 34;
+    largeTitleLineHeightPx: 41;
+    navigationBarHeightPx: 44;
+    rootInlineInsetPx: 16;
+    rootLargeTitleTopOffsetPx: number;
+    rootRowHeightPx: 52;
+    rowIconCornerRadiusPx: 7;
+    rowIconSizePx: 30;
+    separatorHairlinePx: 1;
+    separatorLeadingInsetPx: 58;
+    separatorOffsetYPx: number;
+    separatorTrailingInsetPx: 20;
+    rowTrailingInsetPx: 20;
+}>;
+export declare const sidebarTokens: Readonly<{
+    width: 320;
+    inset: 0;
+    radius: 0;
+    rowInset: 16;
+    rowHeight: 52;
+    rowRadius: 26;
+    rowPadding: 16;
+    iconSize: 28;
+    iconGap: 8;
+    sectionHeight: 54;
+    tabHeight: 44;
+    tabFontWeight: 500;
+    tabSelectedFontWeight: 600;
+    tabLineHeight: 20.5;
+    tabReserve: 54;
+    titleOffset: 0;
+    contentTop: 54;
+    toggleSize: 44;
+    toggleTrailing: 10;
+    fontSize: 17;
+    lineHeight: 20.5;
+    tracking: 0;
+    detailTop: 89;
+    detailInset: 20;
+    detailLeading: 10;
+    detailRadius: 25;
+    sectionTop: 20;
+    sectionBottom: 13;
+    sectionInline: 16;
+    toggleWidth: 54.5;
+    toggleInset: 4;
+    toggleHeight: 36;
+    tabPadding: 4;
+    tabInline: 16;
+    tabRadius: 22;
+    tabSelectionRadius: 18;
+    shadowY: 8;
+    shadowBlur: 32;
+    light: Readonly<{
+        material: "#e2e6f0";
+        selection: "#ced2dc";
+        tint: "#000000";
+        background: "#f2f2f7";
+        label: "#000000";
+        secondary: "#8a8a8e";
+        tab: "#fbfbfd";
+        tabTint: "#0081f5";
+        tabSelection: "#e5e4ea";
+    }>;
+    dark: Readonly<{
+        material: "#181d20";
+        selection: "#2d3235";
+        tint: "#ffffff";
+        background: "#000000";
+        label: "#ffffff";
+        secondary: "#8e8e93";
+        tab: "#1b1b1b";
+        tabTint: "#0697ff";
+        tabSelection: "#0a0a0a";
+    }>;
+}>;
+/** CSS projection shared by the host and portalled tabs, including retained compact sidebars. */
+export declare const sidebarCssTokens: Readonly<{
+    [k: string]: string;
+}>;