@kromatv/sdk 0.1.39-canary.3579809

package/types/ui/src/components/atoms/focusable/focusable-paint.d.ts

@@ -0,0 +1,49 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import { type AnySv, type StyleDecl, type SvStateName } from '#ui/core';
+import { type StyleScope } from '#ui/core/style-scope';
+import type { RingToken } from '#ui/core/theme';
+import type { Resolve } from './focusable-types';
+interface PaintInput {
+    recipe: AnySv | undefined;
+    vars: unknown;
+    states: Partial<Record<SvStateName, StyleDecl>> | undefined;
+    style: StyleProp<ViewStyle>;
+    hovered: boolean;
+    focusVisible: boolean;
+    disabled: boolean;
+    inert: boolean;
+    canPress: boolean;
+    actionable: boolean;
+}
+/** Resolves the recipe and the one-off state coats into the styles a form
+ *  paints with: `dressed` for the rest state, the rest per interaction. */
+declare function useFocusablePaint({ recipe: definition, vars, states, style, hovered, focusVisible, disabled, inert, canPress, actionable, }: PaintInput): {
+    dressed: StyleProp<ViewStyle>;
+    focusedStyle: ViewStyle | undefined;
+    hoveredStyle: ViewStyle | undefined;
+    layers: {
+        box?: ViewStyle;
+        face: StyleProp<ViewStyle>;
+    } | null;
+    paintedPressed: ViewStyle | undefined;
+    resolve: Resolve;
+    rest: import("../../../core/types").HasRoot & Record<string, object>;
+};
+declare const focusRing: (token: RingToken, scope?: StyleScope) => ViewStyle & import("react-native").TextStyle & import("react-native").ImageStyle & Record<string, unknown>;
+declare function useFocusRing(token: RingToken): ViewStyle & import("react-native").TextStyle & import("react-native").ImageStyle & Record<string, unknown>;
+interface CoatStack {
+    base: StyleProp<ViewStyle>;
+    hovered: boolean;
+    hoveredStyle: ViewStyle | undefined;
+    pressed: boolean;
+    pressedStyle: StyleProp<ViewStyle>;
+    focusVisible: boolean;
+    focusedStyle: ViewStyle | undefined;
+    lifted: boolean;
+    showRing: boolean;
+    ringToken: RingToken;
+    animated: StyleProp<ViewStyle>;
+}
+declare function coatStack(at: CoatStack, scope?: StyleScope): StyleProp<ViewStyle>[];
+declare function useCoatStack(at: CoatStack): StyleProp<ViewStyle>[];
+export { coatStack, focusRing, useCoatStack, useFocusablePaint, useFocusRing };

package/types/ui/src/components/atoms/focusable/focusable-types.d.ts

@@ -0,0 +1,171 @@
+import type { ComponentRef, ReactElement, ReactNode, Ref } from 'react';
+import type { AccessibilityRole, AccessibilityValue, Insets, LayoutChangeEvent, StyleProp, View, ViewStyle } from 'react-native';
+import type { AnySv, StyleDecl, SvStateName } from '#ui/core';
+import type { RingToken } from '#ui/core/theme';
+import type { A11yProps } from '#ui/lib/a11y';
+import type { KeyProps } from '#ui/lib/key-press';
+type FocusRole = AccessibilityRole | 'option';
+/** What the control claims about itself, in whichever shape the platform reads
+ *  (`#ui/lib/a11y`). */
+type A11yState = A11yProps | undefined;
+/** Moves the spatial navigator's focus onto one control, from code. */
+interface FocusHandle {
+    focus: () => void;
+}
+/** What `aria-current` a control claims; see `current` on FocusableProps. */
+type FocusCurrent = 'page' | 'step';
+/** The element a control renders in place of its own, named by `asChild`. */
+type HostElement = ReactElement<{
+    children?: ReactNode;
+}>;
+/**
+ * What a child render function is handed. `slots` is the recipe resolved
+ * against the live interaction state, so a child spends finished values rather
+ * than re-deriving them from `focused` / `pressed` / `hovered`.
+ */
+interface FocusState<R extends AnySv = AnySv> {
+    focused: boolean;
+    pressed: boolean;
+    hovered: boolean;
+    /** The recipe resolved against the live state. Empty when no `sv` was given. */
+    slots: ReturnType<R>;
+}
+interface FocusableProps<R extends AnySv = AnySv> {
+    /**
+     * Render onto the one element the children resolve to instead of onto a
+     * pressable of the caller's own: a router's link, so the control is a real
+     * `<a href>` whose click the router owns. That element's own children are the
+     * control's content.
+     *
+     * Ignored where there is no document, and by a control the spatial navigator
+     * drives. Both fall back to the pressable, whose activation is `onPress`, so a
+     * control that has to work on either passes both.
+     */
+    asChild?: boolean;
+    /**
+     * The component's recipe. <Focusable> owns the interaction state, so it is the
+     * only place that can resolve one: it paints the `root` slot on itself and
+     * hands the rest to `children`.
+     */
+    sv?: R;
+    /** The variant picks to resolve `sv` with, typed to the recipe's own groups. */
+    vars?: Parameters<R>[0];
+    onPress?: () => void;
+    /** A finger or OK held down; given, OK acts on its release, not its press. */
+    onLongPress?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onHoverIn?: () => void;
+    /** The control's own measured box. Forwarded from the host element, so a
+     *  component that positions something against the control (a thumb, a lens)
+     *  measures the control itself rather than paying a wrapper per item. */
+    onLayout?: (event: LayoutChangeEvent) => void;
+    autoFocus?: boolean;
+    /** Filled with a handle that moves the remote's focus onto this control. */
+    focusHandle?: Ref<FocusHandle>;
+    disabled?: boolean;
+    /** Controlled focus: the control leaves the navigator entirely and paints its
+     *  focus states from this prop. */
+    focused?: boolean;
+    hitSlop?: number | Insets;
+    /** A destination outside the app: the control renders as an `<a href>` on the
+     *  browser targets, so it is a real link to open in a tab, copy or download.
+     *  Ignored on the native platforms, which have no document. A route INSIDE the
+     *  app is `asChild` instead, so the router owns the click. */
+    href?: string;
+    /** Reachable by the remote, but painting no interaction state: a control that
+     *  is busy rather than unavailable. A spinner already says what is happening,
+     *  and a hover highlight would promise a press that is not being taken. */
+    inert?: boolean;
+    /** Whether Tab stops here, defaulting to true. False for one of a roving set
+     *  whose group is a single Tab stop and whose arrows move the focus inside it
+     *  (a radio group). */
+    tabbable?: boolean;
+    focusScale?: number;
+    /** Which focus ring, or none. `true` and the default take the ring an
+     *  enclosing `RingScope` names, falling back to `focusLift`; a token names one
+     *  outright, which is how a control flush with what clips it asks for
+     *  `focusInset`. `false` paints no ring, and suppresses the browser's. */
+    ring?: boolean | RingToken;
+    style?: StyleProp<ViewStyle>;
+    /**
+     * One-off state layers, in the recipe vocabulary, merged over whatever `sv`
+     * resolves. What `style` is to the rest state, this is to the others.
+     */
+    states?: Partial<Record<SvStateName, StyleDecl>>;
+    /** The control's content, or a function of its live state. Under `asChild` it
+     *  is instead the one element the control renders as, whose own children are
+     *  the content. */
+    children?: ReactNode | ((state: FocusState<R>) => ReactNode);
+    label?: string;
+    /** What the control IS to assistive tech. Defaults to `button`; a control
+     *  with its own semantics (`switch`, `radio`, `tab`, ...) says so here and
+     *  pairs it with `checked`/`selected`/`expanded` below. `option` is not in
+     *  React Native's union but passes through react-native-web to the ARIA
+     *  role a listbox row needs; native platforms ignore it harmlessly. */
+    role?: FocusRole;
+    /** Which one of a set is the one being shown: the page a pagination row is on,
+     *  the step a wizard is at. Browser targets only, where it is `aria-current`;
+     *  React Native has no equivalent, and no screen reader on those platforms
+     *  reads one. Saying it here rather than on a wrapper is what keeps a paged row
+     *  from being one element per page deeper than it needs to be. */
+    current?: FocusCurrent;
+    /** `role="switch" | "checkbox" | "radio"` state, announced as `aria-checked`. */
+    checked?: boolean | 'mixed';
+    /** `role="tab"`/listbox-option state, announced as `aria-selected`. */
+    selected?: boolean;
+    /** A disclosure trigger's open state, announced as `aria-expanded`. */
+    expanded?: boolean;
+    /** A toggle button's on state (a filter chip, "Ma liste"), announced as
+     *  `aria-pressed`. Not `selected`: that is a choice among options, this is a
+     *  control that is switched on. */
+    pressed?: boolean;
+    /** Working on what it was last asked to do, announced as `aria-busy`. Pair it
+     *  with `inert`, which is the same fact said to the eye. */
+    busy?: boolean;
+    /** Where a `role="adjustable"` control sits in its range: a resize seam, a
+     *  volume rail. Without it the control announces as a slider with no value. */
+    value?: AccessibilityValue;
+    ref?: Ref<ComponentRef<typeof View>>;
+}
+/** Resolves the recipe for one value of `pressed`, which is the only part of the
+ *  state the outer render cannot see - a Pressable reports it from inside. */
+type Resolve = (pressed: boolean) => ReturnType<AnySv>;
+interface HostAt {
+    setBox: (view: View | null) => void;
+    label: string | undefined;
+    onLayout: FocusableProps['onLayout'];
+    role: FocusRole;
+    a11yState: A11yState;
+    style: StyleProp<ViewStyle>;
+    focusedStyle: ViewStyle | undefined;
+    hoveredStyle: ViewStyle | undefined;
+    pressedStyle: StyleProp<ViewStyle>;
+    animated: StyleProp<ViewStyle>;
+    showRing: boolean;
+    ringToken: RingToken;
+    focused: boolean;
+    focusVisible: boolean;
+    hovered: boolean;
+    pressed: boolean;
+    onFocus: () => void;
+    onBlur: () => void;
+    onHoverIn: () => void;
+    onHoverOut: () => void;
+    onPointerDown: () => void;
+    onPointerUp: () => void;
+    resolve: Resolve;
+    children: FocusableProps['children'];
+}
+interface TouchAt extends HostAt {
+    webKeys: WebKeys;
+    href: string | undefined;
+    controlled: boolean;
+    hitSlop: FocusableProps['hitSlop'];
+    onPress: () => void;
+    onLongPress: FocusableProps['onLongPress'];
+}
+/** Tab reachability, plus whichever activation keys the form underneath does
+ *  not already answer, on the web; null elsewhere. */
+type WebKeys = KeyProps;
+export type { A11yState, FocusableProps, FocusCurrent, FocusHandle, FocusRole, FocusState, HostAt, HostElement, Resolve, TouchAt, WebKeys, };

package/types/ui/src/components/atoms/focusable/focusable.d.ts

@@ -0,0 +1,7 @@
+import type { AnySv } from '#ui/core';
+import type { FocusableProps } from './focusable-types';
+declare function Focusable<R extends AnySv = AnySv>({ asChild, sv: recipe, vars, onPress, onLongPress, onFocus, onBlur, onHoverIn, onLayout, autoFocus, focusHandle, disabled, focused: controlledFocus, hitSlop, href, inert, tabbable, focusScale, ring, style, states, children, label, role, checked, selected, expanded, pressed, busy, current, value, ref, }: Readonly<FocusableProps<R>>): 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;
+export type { Delegate } from './focusable-delegate';
+export { delegateOf } from './focusable-delegate';
+export type { FocusableProps, FocusCurrent, FocusHandle, FocusState, HostElement, } from './focusable-types';
+export { Focusable };

package/types/ui/src/components/atoms/focusable/index.d.ts

@@ -0,0 +1 @@
+export * from './focusable';

package/types/ui/src/components/atoms/focusable/touch-pressable.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode, Ref } from 'react';
+import { type Insets, type LayoutChangeEvent, type StyleProp, type View, type ViewStyle } from 'react-native';
+import type { A11yState, FocusRole, WebKeys } from './focusable-types';
+declare function Painted({ painted, pressedStyle, onPress, onLongPress, hitSlop, role, a11yState, render, }: Readonly<{
+    painted: StyleProp<ViewStyle>[];
+    pressedStyle?: StyleProp<ViewStyle>;
+    onPress: () => void;
+    onLongPress?: () => void;
+    hitSlop?: number | Insets;
+    role: FocusRole;
+    a11yState: A11yState;
+    render: (pressed: boolean) => ReactNode;
+}>): import("react").JSX.Element;
+declare function TouchPressable({ base, pressedStyle, onPress, onLongPress, onHoverIn, onHoverOut, onFocus, onBlur, onLayout, hitSlop, unfocusable, label, role, a11yState, webKeys, href, boxRef, children, }: Readonly<{
+    base: StyleProp<ViewStyle>[];
+    pressedStyle?: StyleProp<ViewStyle>;
+    onPress: () => void;
+    onLongPress?: () => void;
+    onHoverIn?: () => void;
+    onHoverOut?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onLayout?: (event: LayoutChangeEvent) => void;
+    hitSlop?: number | Insets;
+    unfocusable?: boolean;
+    label?: string;
+    role?: FocusRole;
+    a11yState: A11yState;
+    webKeys?: WebKeys;
+    href?: string;
+    boxRef?: Ref<View>;
+    children: (pressed: boolean) => ReactNode;
+}>): import("react").JSX.Element;
+export { Painted, TouchPressable };

package/types/ui/src/components/atoms/focusable/use-entry-focus.d.ts

@@ -0,0 +1,9 @@
+import type { NodeHandle } from '@kromatv/spatial-nav/react';
+/** The screen-entry half of a focusable: whether this control is the one the
+ *  screen opens on, and the press that moves the ring before it acts. */
+declare function useEntryFocus(autoFocus: boolean | undefined, press: () => void): {
+    entry: import("react").RefObject<NodeHandle | null>;
+    isEntry: boolean;
+    pointerPress: () => void;
+};
+export { useEntryFocus };

package/types/ui/src/components/atoms/focusable/use-mirrored-focus.d.ts

@@ -0,0 +1,8 @@
+import type { View } from 'react-native';
+import type { FocusServices } from '#ui/lib/focus-services';
+/** A navigator control's host ref and focus callback, wired so the document's
+ *  focus follows the ring onto its element (see lib/focus-mirror). */
+export declare function useMirroredFocus(setBox: (view: View | null) => void, onFocus: () => void, mirror: FocusServices['mirror']): {
+    ref: (view: View | null) => void;
+    focus: () => void;
+};

package/types/ui/src/components/atoms/frost/frost.d.ts

@@ -0,0 +1,49 @@
+import { type ReactElement } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type FrostCoat } from '#ui/lib/frost-coat-types';
+/** What a registered platform blur must accept - expo-blur's <BlurView> as it
+ * stands, so a shell registers the component itself, unconfigured. */
+interface FrostBackdropProps {
+    /** Platform blur strength, 0-100 (expo-blur's scale). */
+    intensity?: number;
+    /** Open string union: expo-blur's tint set is wider than the three the kit
+     *  asks for, and the registered component must remain assignable. */
+    tint?: 'light' | 'dark' | 'default' | (string & {});
+    style?: StyleProp<ViewStyle>;
+}
+interface FrostOptions {
+    /** False renders the surface untouched, so a caller that is only sometimes
+     *  glass states the condition rather than branching around the coat.
+     *  Defaults to true. */
+    on?: boolean;
+    /** Blur strength in CSS px; the platform intensity is derived from it. */
+    amount?: number;
+    /** Defaults to the ground the app is on. Pass it only for a surface that holds
+     *  one ground whatever the app chose, the way the player's chrome stays dark.
+     *  Native only: a browser coat has no tint of its own. */
+    tint?: 'light' | 'dark' | 'default';
+}
+/**
+ * The frost a glass surface wears, for a control that places the layer itself.
+ * `surface` is the surface's own resolved style: the native layer takes its
+ * corner from that rather than being told one twice.
+ *
+ * A hook, so root configuration reaches a surface that is already
+ * drawn: call it at the top of the control, like any other.
+ */
+declare function useFrostCoat(surface: StyleProp<ViewStyle>, options?: FrostOptions): FrostCoat;
+interface FrostProps extends FrostOptions {
+    /** Exactly one element: the surface that wears the frost. */
+    children: ReactElement;
+}
+/**
+ * The frost a glass surface wears, as a wrapper that renders NO element of its
+ * own: it puts the coat on its one child, the way `<Slot>` does (see
+ * lib/slot.tsx).
+ *
+ * A control whose child is a render function cannot take a layer this way:
+ * those call `useFrostCoat` and place `layer` themselves.
+ */
+declare function Frost({ children, ...options }: Readonly<FrostProps>): ReactElement<Record<string, unknown>, string | import("react").JSXElementConstructor<any>>;
+export type { FrostBackdropProps, FrostCoat, FrostOptions, FrostProps };
+export { Frost, useFrostCoat };

package/types/ui/src/components/atoms/frost/index.d.ts

@@ -0,0 +1 @@
+export * from './frost';

package/types/ui/src/components/atoms/grid/grid.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+interface GridProps {
+    /** The narrowest a cell may be. The grid measures itself and fits as many
+     *  cells as the room allows, the way `auto-fill` does in CSS. */
+    min?: number;
+    /** A fixed count, for a design that demands one whatever the width. Wins
+     *  over `min`. */
+    columns?: number;
+    /** The width to divide until the grid has measured its own box: the design
+     *  width, or a room the caller already knows. Omit and the first frame has no
+     *  columns to draw; a measurement, once it arrives, always wins. */
+    width?: number;
+    /** Horizontal gap, which is also what the column maths removes. */
+    gap?: number;
+    /** Vertical gap. Defaults to `gap`; the browse grids run looser vertically so
+     *  the rows read as rows rather than as one field of tiles. */
+    rowGap?: number;
+    children: ReactNode;
+}
+/** The width of one cell in a `columns`-wide grid of `width`, with `gap`
+ * between cells. Exported so a caller can size its own art requests to match. */
+declare function cellWidth(width: number, columns: number, gap: number): number;
+/** How many `min`-wide cells fit in `width`. At least one, so a container
+ * narrower than a single cell still renders it rather than nothing. */
+declare function columnsFor(width: number, min: number, gap: number): number;
+declare function Grid({ min, columns, width, gap, rowGap, children }: Readonly<GridProps>): import("react").JSX.Element;
+export type { GridProps };
+export { cellWidth, columnsFor, Grid };

package/types/ui/src/components/atoms/grid/index.d.ts

@@ -0,0 +1 @@
+export * from './grid';

package/types/ui/src/components/atoms/ground/ground.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface GroundProps {
+    /** The ground this subtree paints on, whatever the page around it chose. */
+    tone: 'dark' | 'light';
+    flex?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+}
+/**
+ * Pins a subtree to one ground, for chrome painting over artwork: the player is
+ * dark on a page that is light.
+ *
+ * On a browser it is a true scope, one attribute redefining the properties for
+ * everything inside it. ON NATIVE IT DOES NOTHING: there is no cascade, and the
+ * theme store is one switch for the whole app. A native surface that must hold
+ * one ground spells its own inks instead.
+ */
+export declare function Ground({ tone, flex, style, children }: Readonly<GroundProps>): import("react").JSX.Element;

package/types/ui/src/components/atoms/ground/index.d.ts

@@ -0,0 +1 @@
+export * from './ground';

package/types/ui/src/components/atoms/icon/icon.d.ts

@@ -0,0 +1,4 @@
+import { type IconProps } from '#ui/lib/glyph';
+export type { IconName, IconProps } from '#ui/lib/glyph';
+declare function Icon(props: Readonly<IconProps>): import("react").JSX.Element;
+export { Icon };

package/types/ui/src/components/atoms/icon/index.d.ts

@@ -0,0 +1 @@
+export * from './icon';

package/types/ui/src/components/atoms/icon-button/icon-button.d.ts

@@ -0,0 +1,165 @@
+import { type CornerValue, type StyleDecl, type Variant } from '#ui/core';
+import { type ReactNode } from 'react';
+import { type FocusableProps } from '#ui/components/atoms/focusable';
+import { type IconName, type IconProps } from '#ui/components/atoms/icon';
+import { type ControlSize } from '#ui/lib/field-shell';
+/** How the button is filled. */
+export type IconButtonVariant = Variant<typeof iconButtonVariants, 'variant'>;
+/**
+ * The whole design, including every state it can be in.
+ *
+ * The hover fill is one step short of the press fill throughout, so hover ->
+ * press reads as a single escalation; on a page with no focus scope, hover is
+ * the only feedback a cursor gets. Because both live in the option they belong
+ * to, a variant cannot be given a rest fill and forgotten in the state tables -
+ * which is exactly what used to happen.
+ */
+declare const iconButtonVariants: import("../../../core/types").SvFn<{
+    root: StyleDecl;
+    icon: Pick<IconProps, 'color'>;
+}, {
+    readonly variant: {
+        /** Translucent fill with a hairline border: the default over artwork. */
+        readonly glass: {
+            readonly root: {
+                readonly bg: "tint/12";
+                readonly border: "tint/20";
+                readonly _hover: {
+                    readonly bg: "tint/18";
+                };
+                readonly _press: {
+                    readonly bg: "tint/22";
+                };
+            };
+        };
+        readonly ghost: {
+            readonly root: {
+                readonly bg: "transparent";
+                readonly _hover: {
+                    readonly bg: "tint/6";
+                };
+                readonly _focus: {
+                    readonly bg: "tint/6";
+                };
+                readonly _press: {
+                    readonly bg: "tint/8";
+                };
+            };
+        };
+        readonly primary: {
+            readonly root: {
+                readonly bg: "accent";
+                readonly _hover: {
+                    readonly bg: "accentHover";
+                };
+                readonly _press: {
+                    readonly bg: "accentHover";
+                };
+            };
+            readonly icon: {
+                readonly color: "accentInk";
+            };
+        };
+        /** The destructive control (a row's delete): a red-tinted wash that
+         *  deepens as it is pressed. */
+        readonly danger: {
+            readonly root: {
+                readonly bg: "danger/10";
+                readonly border: "danger/25";
+                readonly _hover: {
+                    readonly bg: "danger/20";
+                };
+                readonly _press: {
+                    readonly bg: "danger/26";
+                };
+            };
+            readonly icon: {
+                readonly color: "danger";
+            };
+        };
+        /** A dark wash instead of a light one: the control that floats OVER
+         *  artwork it must not brighten (a back button on a detail hero, the
+         *  skip-intro corner of the player). */
+        readonly scrim: {
+            readonly root: {
+                readonly bg: "bg/55";
+                readonly border: "tint/12";
+                readonly _hover: {
+                    readonly bg: "surface3/60";
+                };
+                readonly _press: {
+                    readonly bg: "playerRaised/65";
+                };
+            };
+        };
+    };
+    /** The pressed state of a toggle: the same recipe as
+     *  <Button variant="outline" active>. */
+    readonly active: {
+        readonly true: {
+            readonly root: {
+                readonly bg: "accentSoft";
+                readonly borderColor: "accentWash/45";
+                readonly _hover: {
+                    readonly bg: "accentSoftHover";
+                };
+            };
+            readonly icon: {
+                readonly color: "accentText";
+            };
+        };
+    };
+    /** The 10-foot treatment for a bare corner control (a back button) whose
+     *  focus has to read from three metres: fills solid accent and flips the
+     *  glyph to ink. */
+    readonly focusFill: {
+        readonly true: {
+            readonly root: {
+                readonly _focus: {
+                    readonly bg: "accent";
+                    readonly border: "accent";
+                };
+            };
+            readonly icon: {
+                readonly _focus: {
+                    readonly color: "accentInk";
+                };
+            };
+        };
+    };
+}>;
+interface IconButtonProps extends Omit<FocusableProps, 'children' | 'focusScale'> {
+    /** The glyph. Omit it and pass `children` instead for richer content (a
+     *  spinner while loading, a stateful glyph). */
+    icon?: IconName;
+    /** Diameter in px. Defaults to the control shell's height, so an icon button
+     *  beside a <Button> is the same box; pass one only for an outlier. */
+    diameter?: number;
+    /** Sit on a control row: square at the shell's height, with the shell's
+     *  corner rather than the pill, so an icon button beside a field or a
+     *  button is the same box. A `diameter`/`radius` still wins, and a
+     *  <ButtonGroup> supplies it when the caller does not. */
+    control?: ControlSize;
+    /** Glyph size. Defaults to 40% of the diameter. */
+    glyph?: number;
+    variant?: IconButtonVariant;
+    /** The accent's soft fill and accent glyph. It is paint and nothing else: a
+     *  button that toggles something says so with `pressed`, which is what
+     *  assistive tech hears. */
+    active?: boolean;
+    /** Fill solid accent while focused and flip the glyph to ink. */
+    focusFill?: boolean;
+    /** Corner override, by token name or in px. The default is the pill; a
+     *  workbench tool or a square tile passes its own. */
+    radius?: CornerValue;
+    /** Focus scale. Defaults to the design's 1.04, and to 1 inside a
+     *  <ButtonGroup>, where a member that grows tears the line it shares with
+     *  its neighbours. */
+    focusScale?: number;
+    /** Richer content in place of `icon`. Under `asChild` it is instead the one
+     *  element the button renders as, whose own children take this place. */
+    children?: ReactNode;
+}
+declare function IconButton({ icon, diameter, control, glyph, variant, active, focusFill, radius: cornerRadius, style, states, focusScale, asChild, children, onFocus, onBlur, ...focusProps }: Readonly<IconButtonProps>): import("react").JSX.Element;
+export type { IconButtonProps };
+export { IconButton, iconButtonVariants };

package/types/ui/src/components/atoms/icon-button/index.d.ts

@@ -0,0 +1 @@
+export * from './icon-button';

package/types/ui/src/components/atoms/icon-well/icon-well.d.ts

@@ -0,0 +1,46 @@
+import { type Variant } from '#ui/core';
+import { type IconName } from '#ui/components/atoms/icon';
+type IconWellSize = Variant<typeof iconWellVariants, 'size'>;
+type IconWellTone = Variant<typeof iconWellVariants, 'tone'>;
+declare const iconWellVariants: import("../../../core/types").SvFn<import("../../../core/types").StyleSlots<{
+    root: {
+        center: true;
+        shrink: number;
+        radius: "xl";
+    };
+}>, {
+    readonly size: {
+        readonly sm: {
+            readonly root: {
+                readonly w: 34;
+                readonly h: 34;
+            };
+        };
+        readonly tv: {
+            readonly root: {
+                readonly w: 42;
+                readonly h: 42;
+            };
+        };
+    };
+    readonly tone: {
+        readonly neutral: {
+            readonly root: {
+                readonly bg: "tint/6";
+            };
+        };
+        readonly accent: {
+            readonly root: {
+                readonly bg: "accentSoft";
+            };
+        };
+    };
+}>;
+interface IconWellProps {
+    name: IconName;
+    size?: IconWellSize;
+    tone?: IconWellTone;
+}
+declare function IconWell({ name, size, tone }: Readonly<IconWellProps>): import("react").JSX.Element;
+export type { IconWellProps, IconWellSize, IconWellTone };
+export { IconWell, iconWellVariants };

package/types/ui/src/components/atoms/icon-well/index.d.ts

@@ -0,0 +1 @@
+export * from './icon-well';