@ghia/native 0.0.0-stage → 0.11.0

package/dist/host.d.ts

@@ -0,0 +1,2403 @@
+import type { AriaProps } from "./aria.js";
+import type { DebugFrameOverlayStats, EdgeInsets, ElementBounds, EventPayload, GpuixRenderer, HighlightMatch, PathPromptOptions, WindowInsets as NativeWindowInsets } from "../index.js";
+import type { DomEvent, RootEvent } from "./events/dispatch.js";
+import type { AnimationEventProps, CompositionEventProps, ContentVisibilityEventProps, HostInputEvent, PointerEventProps } from "./events/types.js";
+import type { ScrollEvent } from "./scroll.js";
+import type { MotionValue } from "./motion-value.js";
+import type { MotionGestureName } from "./motion-variants.js";
+export type { DebugFrameOverlayStats, EdgeInsets, ElementBounds, HighlightMatch, NativeWindowInsets, PathPromptOptions, };
+export * from "./events/listeners.js";
+export * from "./events/types.js";
+export type { AriaProps };
+export * from "./clipboard.js";
+export { document, GpuixDocument, forgetElementSource, GpuixEventTarget, installElementSource, syncWindowEventListeners, window, type AddEventListenerOptions, type WindowEventListener, } from "./events/window-target.js";
+export { preventEventDefault, type DomEvent, type RootEvent } from "./events/dispatch.js";
+export * from "./focus.js";
+export * from "./forms.js";
+export * from "./bounds.js";
+export * from "./host-runtime.js";
+export * from "./keyframes.js";
+export * from "./layout-animation.js";
+export * from "./match-media.js";
+export * from "./motion-bindings.js";
+export * from "./motion-config.js";
+export * from "./motion-span.js";
+export * from "./motion-variants.js";
+export * from "./motion-value.js";
+export * from "./mutations.js";
+export * from "./observers.js";
+export * from "./presence.js";
+export * from "./renderer-state.js";
+export * from "./text-selection.js";
+export * from "./nativeview.js";
+export * from "./webview.js";
+export * from "./scroll.js";
+export * from "./reorder.js";
+export * from "./svg.js";
+export * from "./universal-style.js";
+export * from "./web-animations.js";
+/**
+ * A number is px. A string is a CSS length: `px`, `in`, `cm`, `mm`, `q`, `pt`, `pc`, `%`,
+ * `em` (this element's font size), `rem` (the root's), `vw`, `vh`, `vmin`, `vmax`, or a
+ * `calc()` of them with `+`, `-` and `*` or `/` by numbers (`"calc(100% - 20px)"`), plus
+ * `"auto"`, `"anchor-size(...)"` and the size keywords (`"min-content"`, `"max-content"`,
+ * `"fit-content"`) where the property accepts them. Resolved natively on
+ * every layout, so `vw` follows a resize and `em` follows `fontSize`. Motion animates every
+ * length: see `MotionStyle`.
+ */
+export type DimensionValue = number | string;
+/** A CSS `<line-style>`, the value of `borderStyle` and its per-side longhands. */
+export type LineStyle = "none" | "hidden" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset";
+/** A CSS `<outline-style>`, the value of `outlineStyle`: a `LineStyle` but `hidden`, or `auto`,
+ *  which is painted as `solid`. */
+export type OutlineStyle = Exclude<LineStyle, "hidden"> | "auto";
+/**
+ * Every `StyleDesc` longhand whose value is a number, a length, a colour or a
+ * shadow list can be animated, plus the `padding`, `margin`, `borderWidth`,
+ * `borderRadius`, `borderColor`, `gap`, `inset` and `flex` shorthands, which expand to their longhands.
+ * `flex` is `flexGrow`, `flexShrink` and `flexBasis`, as CSS animates it: `"1 1 0px"` to
+ * `"3 1 100px"` is `"2 1 50px"` halfway, and a lone number is `n 1 0%`.
+ * A shorthand written with several values (`padding: "0.5em 0.75em"`, `gap: "4px 8px"`,
+ * `borderRadius: "10px 20px / 5px"`) gives each side, axis or corner its own value, and
+ * each animates on its own; keyframes of such strings split frame by frame.
+ * Discrete properties (`display`, `position`, ...) are an error.
+ *
+ * A length is its px and its percentage, whatever it is written as, and two lengths
+ * blend part by part, as Chrome blends them: `calc(100% - 20px)` to `calc(50% + 10px)`
+ * is `calc(75% - 5px)` halfway, and `20px` to `50%` is `calc(10px + 25%)`. `em`, `rem`
+ * and the viewport units are px by then, from the element's font size and the window.
+ * (A motion value keeps its `em` and `rem` until it is applied, so one value bound to two
+ * elements is two sizes.)
+ * The percentage stays a share of its basis (the containing block, or the border box for
+ * a corner radius), so a parent that resizes mid-animation is followed exactly, and a
+ * spring or a retarget keeps its speed on each part. This holds for the sizes, the
+ * insets, the margins, `padding`, `flexBasis`, the gaps, the border widths, `outlineWidth`,
+ * `outlineOffset`, the corner radii and `fontSize`. Where CSS takes no percentage (the
+ * border widths and the outline) a percentage is an error; a `fontSize` percentage is of
+ * the parent's font size, so it is px. A target that is negative whatever the basis is an
+ * error, and one that only comes out negative is clamped. A corner moves
+ * both its radii (`"50%"` is an ellipse on a wide box, as in CSS), so `"10px / 20px"`
+ * to `"30px / 40px"` is `"20px / 30px"` halfway. The margins, the insets and `flexBasis` also take
+ * `"auto"`, which CSS cannot interpolate with a length: the pair is discrete, so it flips
+ * at the halfway point of the eased progress, and a CSS transition runs it only under
+ * `transition-behavior: allow-discrete`. An unset margin is `0` and an unset inset is `auto`.
+ * `width` and `height` also take `"auto"`, the size the content
+ * wants (the min and max sizes do not). The width is measured by an extra layout of the
+ * tree while the element animates it, one frame late like the height. The size keywords
+ * (`min-content` and the like) are an error, and a CSS transition or animation to or from
+ * `auto` needs `interpolateSize: "allow-keywords"`.
+ *
+ * Each property takes a target or keyframes (`opacity: [0, 1, 0.5]`); see
+ * `MotionKeyframes`.
+ */
+export type MotionStyle = {
+    [Property in keyof MotionStyleTargets]?: MotionKeyframes<NonNullable<MotionStyleTargets[Property]>>;
+};
+/**
+ * One target, or keyframes: a list the property animates through, over one
+ * `duration` (spread by `times`). A `null` stands for the keyframe before it, or
+ * for the value the property starts from when it comes first. A list is
+ * keyframes unless it is itself one value of the property (`BoxShadow[]`, a
+ * `strokeDasharray` list of numbers), in which case keyframes are a list of
+ * those. Springs animate between two keyframes.
+ */
+export type MotionKeyframes<Value> = Value | Array<Value | null>;
+export type MotionStyleTargets = Pick<StyleDesc, "inset" | "top" | "right" | "bottom" | "left" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "gap" | "rowGap" | "columnGap" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "opacity" | "backgroundColor" | "color" | "borderWidth" | "borderTopWidth" | "borderRightWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderColor" | "borderTopColor" | "borderRightColor" | "borderBottomColor" | "borderLeftColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "boxShadow" | "filter" | "aspectRatio" | "outlineWidth" | "outlineColor" | "outlineOffset" | "textDecorationColor" | "textUnderlineOffset" | "textDecorationThickness" | "fontSize" | "fontWeight" | "fontVariationSettings" | "lineHeight" | "scrollbarColor" | "scrollbarWidth" | "selectionColor"> & MotionTransformKeys & {
+    width?: MotionLength | "auto";
+    height?: MotionLength | "auto";
+    minWidth?: MotionLength;
+    minHeight?: MotionLength;
+    maxWidth?: MotionLength;
+    maxHeight?: MotionLength;
+};
+/** Pixels, or a CSS length such as `"50%"`, `"1.5em"` or `"calc(100% - 20px)"`. */
+export type MotionLength = DimensionValue;
+/**
+ * Motion's transform keys, composed in Motion's order (`transformPerspective`, `x`, `y`, `z`, `translateX`,
+ * `translateY`, `translateZ`, `scale`, `scaleX`, `scaleY`, `scaleZ`, `rotate`, `rotateX`, `rotateY`, `rotateZ`,
+ * `skew`, `skewX`, `skewY`) around the origin. They replace
+ * `transform`, as Motion's do, and the element is a stacking context and the containing block of its
+ * absolute and fixed descendants whenever one is set. On a `motion.*` component `scale` and `rotate`
+ * are these and not the CSS properties of the same names. They animate with tweens, springs and
+ * keyframes, and a motion value can drive each. Layout is not affected.
+ *
+ * `transform` is not one of the keys: as a target (`animate`, `initial`, variants, keyframes, `exit`,
+ * the gestures) it is the list the element is drawn with, and the keys beside it are ignored, as in
+ * Motion. A static `style.transform` is replaced by the keys instead.
+ */
+export interface MotionTransformKeys {
+    /** A number is px; a string is a CSS length, and `%` is of the element's own border box. */
+    x?: MotionLength;
+    y?: MotionLength;
+    translateX?: MotionLength;
+    translateY?: MotionLength;
+    scale?: number;
+    scaleX?: number;
+    scaleY?: number;
+    /** Along z, so only seen where the element is in a 3D rendering context or under a perspective. */
+    scaleZ?: number;
+    /** A number is degrees; a string is a CSS angle (`"0.25turn"`). */
+    rotate?: number | string;
+    rotateZ?: number | string;
+    skew?: number | string;
+    skewX?: number | string;
+    skewY?: number | string;
+    /** A number is a fraction of the border box (`0.5` is the middle, the default); a string is a CSS length. */
+    originX?: number | string;
+    originY?: number | string;
+    /** Along z: a number is px; a string a CSS length without `%`. */
+    originZ?: number | string;
+    /** Along z, toward the viewer: a number is px; a string is a CSS length without `%`. Seen with a
+     *  `perspective` on the parent, or `transformPerspective` here. */
+    z?: MotionLength;
+    translateZ?: MotionLength;
+    /** A number is degrees; a string is a CSS angle. */
+    rotateX?: number | string;
+    rotateY?: number | string;
+    /** `perspective(<n>px)` first in the list, so this element's own transform is seen from `n` px. A
+     *  number is px. Not the CSS `perspective` property, which is the style `perspective`. */
+    transformPerspective?: number;
+    /**
+     * A CSS transform list or `none`. Animating it blends the two lists as a CSS transition does
+     * (function by function while they pair up, as matrices from the first that does not), and a
+     * list that is not `none` is a stacking context and a containing block even if it moves nothing.
+     */
+    transform?: string;
+}
+/**
+ * `StyleDesc` where each animatable property may hold a motion value instead.
+ * The adapter binds it to the element rather than sending it as style.
+ */
+export type MotionValueStyle = Omit<StyleDesc, Exclude<keyof MotionStyle, "flex">> & {
+    [Property in Exclude<keyof MotionStyle, "flex" | keyof MotionTransformKeys>]?: StyleDesc[Property] | MotionValue;
+} & {
+    [Property in keyof MotionTransformKeys]?: (Property extends keyof StyleDesc ? StyleDesc[Property] : MotionTransformKeys[Property]) | MotionValue;
+};
+export type MotionEase = "linear" | "ease" | "easeIn" | "easeOut" | "easeInOut" | [number, number, number, number]
+/** A CSS `<easing-function>`, as `transitionTimingFunction` takes. */
+ | "ease-in" | "ease-out" | "ease-in-out" | "step-start" | "step-end" | `cubic-bezier(${string})` | `steps(${string})` | `linear(${string})`;
+/** How a transition plays again once it reaches its last keyframe. */
+export interface MotionRepeatOptions {
+    /**
+     * Extra iterations after the first. `Infinity` loops for ever, and the
+     * animation never completes.
+     */
+    repeat?: number;
+    /**
+     * `"loop"` plays every iteration from the first keyframe; `"reverse"` plays
+     * odd iterations backwards in time, so their easing runs backwards too;
+     * `"mirror"` plays them through the keyframes in reverse order, with the same
+     * timing and easing as the first.
+     */
+    repeatType?: "loop" | "reverse" | "mirror";
+    /** Seconds held at the end of each iteration before the next. */
+    repeatDelay?: number;
+}
+export interface MotionTweenTransition extends MotionRepeatOptions {
+    type?: "tween";
+    /** Duration in seconds, of one iteration. */
+    duration?: number;
+    /** Delay in seconds. */
+    delay?: number;
+    /** One easing, or one per keyframe segment. */
+    ease?: MotionEase | MotionEase[];
+    /**
+     * Where each keyframe sits in an iteration, from 0 to 1 and ascending: one
+     * per keyframe. Evenly spaced when omitted.
+     */
+    times?: number[];
+    stiffness?: never;
+    damping?: never;
+    mass?: never;
+    bounce?: never;
+    restSpeed?: never;
+    restDelta?: never;
+}
+interface MotionSpringBase extends MotionRepeatOptions {
+    type: "spring";
+    /** Delay in seconds. The spring holds its start until the delay passes. */
+    delay?: number;
+    ease?: never;
+    /** A spring only animates between two keyframes. */
+    times?: never;
+    /** Speed, in units per second, below which the spring may settle. */
+    restSpeed?: number;
+    /** Distance from the target, in units, within which the spring may settle. */
+    restDelta?: number;
+}
+/** A spring described by its physics. Defaults to stiffness 100, damping 10, mass 1. */
+export interface MotionSpringPhysicsTransition extends MotionSpringBase {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+    duration?: never;
+    bounce?: never;
+}
+/** A spring described by how long it takes to settle and how much it overshoots. */
+export interface MotionSpringDurationTransition extends MotionSpringBase {
+    /** Seconds to settle, 0.01 to 10. Defaults to 0.8. */
+    duration?: number;
+    /** 0 is critically damped; toward 1 it oscillates longer. Defaults to 0.3. */
+    bounce?: number;
+    stiffness?: never;
+    damping?: never;
+    mass?: never;
+}
+export type MotionSpringTransition = MotionSpringPhysicsTransition | MotionSpringDurationTransition;
+export type MotionCurve = MotionTweenTransition | MotionSpringTransition;
+/**
+ * One curve for every property, or a curve per property as in Framer Motion.
+ * A property resolves to `transition[property]`, then `transition.default`,
+ * then the curve fields at the top level. Each level replaces the next as a
+ * whole. A shorthand key (`padding`) sets all its longhands, and a longhand
+ * beside it wins.
+ *
+ * A level that holds only `delay` and the repeat fields describes no curve, and
+ * Motion's default for the key runs: a spring for a transform key (`x`, `y`,
+ * `rotate`, `skew`, ... and `scale`, which is critically damped towards 0),
+ * `easeOut` over 0.8 s for more than two keyframes, otherwise
+ * `cubic-bezier(0.25, 0.1, 0.35, 1)` over 0.3 s. An entry for another key makes
+ * the rest of the transition describe the curve, so a key without an entry runs
+ * a 0.3 s `easeOut` tween.
+ */
+export type MotionTransition = MotionCurve & {
+    default?: MotionCurve;
+    /** The glide of the `layout` and `layoutId` props. Falls back to the rest of this transition, then to a 0.45 s tween. */
+    layout?: MotionCurve;
+} & {
+    [Property in keyof MotionStyle]?: MotionCurve;
+};
+export interface MotionProps {
+    initial?: MotionStyle | false;
+    /** Left out by an element that only has `layout`. */
+    animate?: MotionStyle;
+    /** Target applied while this node is leaving `AnimatePresence`. */
+    exit?: MotionStyle;
+    /**
+     * The transition of that exit: `exit`'s own, else the component's. Native does not read it; the
+     * Solid `AnimatePresence` plays the exit with it.
+     */
+    exitTransition?: MotionTransition;
+    transition?: MotionTransition;
+    /**
+     * What the element animates to while the pointer is over it, a press that began on it goes on,
+     * it has `:focus-visible` focus, or `inView` is true. Each takes the `transition` of its own
+     * animation. Several at once apply in this order of priority: in view, hover, tap, focus.
+     */
+    whileHover?: MotionStyle & {
+        transition?: MotionTransition;
+    };
+    whileTap?: MotionStyle & {
+        transition?: MotionTransition;
+    };
+    whileFocus?: MotionStyle & {
+        transition?: MotionTransition;
+    };
+    whileInView?: MotionStyle & {
+        transition?: MotionTransition;
+    };
+    /** Whether the element is in view, which `whileInView` waits for. */
+    inView?: boolean;
+    /**
+     * The gestures (`"whileHover"`, ...) whose target above answers to the nearest ancestor with
+     * `controls` instead of this element: the variant names that ancestor's `while*` gave it.
+     */
+    inherit?: MotionGestureName[];
+    /** The gestures this element hands down as variant names. Its presence makes it a controller. */
+    controls?: MotionGestureName[];
+}
+/**
+ * The attributes of an SVG shape (`motion.path`, `motion.circle`, ...) that can
+ * animate. They go through the same engine as `MotionStyle`: tweens, springs,
+ * per-key transitions, and Oklab colours.
+ *
+ * `pathLength`, `pathOffset` and `pathSpacing` are Framer's normalised draw
+ * keys, each a fraction of the shape's length: `pathLength` is how much is
+ * stroked, `pathOffset` shifts where the stroke starts, `pathSpacing` is the
+ * gap after it (default 1, so one dash). They set the dash for you, so use them
+ * instead of `strokeDasharray` and `strokeDashoffset`. A bare `pathLength`
+ * *prop* is the DOM attribute instead: it declares a length that dash values
+ * are measured in.
+ *
+ * `d` morphs when both paths use the same commands, after relative commands are
+ * made absolute; otherwise it switches halfway. `strokeDasharray` lists of
+ * different lengths are repeated to a common length.
+ */
+export type SvgMotionStyle = {
+    [Attribute in keyof SvgMotionTargets]?: MotionKeyframes<NonNullable<SvgMotionTargets[Attribute]>>;
+};
+interface SvgMotionTargets {
+    pathLength?: number;
+    pathOffset?: number;
+    pathSpacing?: number;
+    strokeDasharray?: number | string | number[];
+    strokeDashoffset?: number;
+    strokeWidth?: number;
+    fill?: string;
+    stroke?: string;
+    opacity?: number;
+    fillOpacity?: number;
+    strokeOpacity?: number;
+    cx?: number;
+    cy?: number;
+    r?: number;
+    rx?: number;
+    ry?: number;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+    d?: string;
+    /** `<feGaussianBlur>` and `<feDropShadow>`; a single number. */
+    stdDeviation?: number;
+    /** `<feOffset>`, `<feDropShadow>`, `<text>` and `<tspan>`; a single number. */
+    dx?: number;
+    dy?: number;
+    floodColor?: string;
+    floodOpacity?: number;
+    stopColor?: string;
+    stopOpacity?: number;
+    strokeMiterlimit?: number;
+    refX?: number;
+    refY?: number;
+    fontSize?: number;
+    letterSpacing?: number;
+}
+/** Same resolution as `MotionTransition`, keyed by `SvgMotionStyle`. */
+export type SvgMotionTransition = MotionCurve & {
+    default?: MotionCurve;
+} & {
+    [Attribute in keyof SvgMotionStyle]?: MotionCurve;
+};
+export interface SvgMotionProps {
+    initial?: SvgMotionStyle | false;
+    animate: SvgMotionStyle;
+    /** Target applied while this node is leaving `AnimatePresence`. */
+    exit?: SvgMotionStyle;
+    /** The transition of that exit; see `MotionProps.exitTransition`. */
+    exitTransition?: SvgMotionTransition;
+    transition?: SvgMotionTransition;
+    whileHover?: SvgMotionStyle & {
+        transition?: SvgMotionTransition;
+    };
+    whileTap?: SvgMotionStyle & {
+        transition?: SvgMotionTransition;
+    };
+    whileFocus?: SvgMotionStyle & {
+        transition?: SvgMotionTransition;
+    };
+    whileInView?: SvgMotionStyle & {
+        transition?: SvgMotionTransition;
+    };
+    inView?: boolean;
+    inherit?: MotionGestureName[];
+    controls?: MotionGestureName[];
+}
+/**
+ * CSS `cursor` keywords GPUI can paint. An unlisted keyword is ignored, like
+ * every other invalid style value.
+ */
+export type CursorValue = "default" | "auto" | "pointer" | "text" | "vertical-text" | "crosshair" | "grab" | "grabbing" | "move" | "all-scroll" | "col-resize" | "row-resize" | "ew-resize" | "ns-resize" | "nwse-resize" | "nesw-resize" | "n-resize" | "e-resize" | "s-resize" | "w-resize" | "ne-resize" | "nw-resize" | "se-resize" | "sw-resize" | "not-allowed" | "no-drop" | "alias" | "copy" | "context-menu" | "none";
+export interface BoxShadow {
+    offsetX: number;
+    offsetY: number;
+    blurRadius: number;
+    spreadRadius: number;
+    color: string;
+    /** Draw inside the border box, like CSS `inset`. */
+    inset?: boolean;
+}
+export interface LinearGradientStop {
+    color: string;
+    /** Position along the gradient from 0 to 1. */
+    position: number;
+}
+export interface LinearGradientBackground {
+    type: "linear-gradient";
+    /** CSS angle in degrees. 0 points up and values increase clockwise. */
+    angle: number;
+    stops: [LinearGradientStop, LinearGradientStop];
+    colorSpace?: "srgb" | "oklab";
+}
+export interface StyleDesc {
+    /** `"flex"`, `"grid"`, `"block"` (the default), `"none"`, which builds no box at all, or
+     *  `"contents"`, which builds no box either and lays its children out as the parent's own.
+     *  `"inline-block"`, `"inline-flex"`, `"inline-grid"` and `"inline-table"` put the box on a line of
+     *  text as one unit, as CSS does (an atomic inline); where the parent lays out items, or the box is
+     *  `position: absolute` or `fixed`, they are `"block"`, `"flex"`, `"grid"` and `"table"`.
+     *  The table values: `"table"`, `"table-row-group"`, `"table-header-group"`,
+     *  `"table-footer-group"`, `"table-row"`, `"table-cell"`, `"table-caption"`, `"table-column"`
+     *  and `"table-column-group"` (see docs/reference.md's Tables section; `colSpan`, `rowSpan` and
+     *  `span` are props of the element). */
+    display?: string;
+    visibility?: string;
+    /** CSS `flex`. A number `n` is `n 1 0%` (React DOM sends a numeric `flex` unitless, so
+     *  `flex: 1` is `"1"`); `"none"` is `0 0 auto`, `"auto"` is `1 1 auto`, `"initial"` is
+     *  `0 1 auto`. Otherwise `<grow> <shrink>? || <basis>`: `"2 3"` (over a `0%` basis),
+     *  `"2 100px"`, `"100px 2"`, `"1 1 0"`, and a lone basis (`"100px"`, `"50%"`,
+     *  `"fit-content"`) is `1 1 <basis>`. The basis takes what `flexBasis` does, so not
+     *  `content`. A unitless `0` is a factor unless two factors come before it. `flexGrow`,
+     *  `flexShrink` and `flexBasis` win over it. As an `animate`, `initial`, `exit` or keyframes
+     *  target it animates those three, and `transition: flex` covers them; a motion value cannot
+     *  be bound to it (bind the three). */
+    flex?: number | string;
+    /** CSS `flex-flow`: `"<direction> || <wrap>"` in either order (`"column wrap"`,
+     *  `"wrap-reverse"`); a missing part is `row` or `nowrap`. `flexDirection` and `flexWrap`
+     *  win over it. */
+    flexFlow?: string;
+    /** `"row"`, `"row-reverse"`, `"column"` or `"column-reverse"`. */
+    flexDirection?: string;
+    /** `"nowrap"`, `"wrap"` or `"wrap-reverse"`. */
+    flexWrap?: string;
+    flexGrow?: number;
+    flexShrink?: number;
+    /** A length (see `DimensionValue`; a percentage is of the container's main size) or `"auto"`,
+     *  which uses the item's `width` (or `height` in a column). Also `"min-content"`,
+     *  `"max-content"`, `"fit-content"` and `"fit-content(<length>)"` as for `width`, measured
+     *  the same way and winning over `width`, but only in a `row` or `row-reverse` flex container;
+     *  in a column they are `"auto"`, as in CSS. `"fit-content"` is `"max-content"` here, which
+     *  the item's `flexShrink` narrows to the container, so with `flexShrink: 0` it overflows. */
+    flexBasis?: DimensionValue;
+    alignItems?: string;
+    alignSelf?: string;
+    alignContent?: string;
+    justifyContent?: string;
+    /** CSS `place-items`, `place-content` and `place-self`: `"<align> <justify>"`, and one value
+     *  is both (`"center"`, `"center end"`, `"space-between center"`). Each value is one the
+     *  longhand takes, including `safe` and `unsafe` before a position and `first` or `last`
+     *  before `baseline`, so `placeItems: "left"` or `placeContent: "auto"` throws as in CSS
+     *  (`left` and `right` are for the justify value only). The `align*` and `justify*`
+     *  longhands win over them. */
+    placeItems?: string;
+    placeContent?: string;
+    placeSelf?: string;
+    /** A length for both gaps, or `"<row> <column>"`: `"4px 8px"` is a 4px gap between rows and an
+     *  8px gap between columns (see `DimensionValue`; a percentage is of the container's content
+     *  box). Not `"auto"`. `rowGap` and `columnGap` win over `gap`. */
+    gap?: DimensionValue;
+    rowGap?: DimensionValue;
+    columnGap?: DimensionValue;
+    /** Reorders the children of a flex or grid container, lowest first. Ties keep document
+     *  order. Layout and paint follow it; focus order stays in the document order. */
+    order?: number;
+    justifyItems?: string;
+    justifySelf?: string;
+    /** A CSS track list (`"1fr 200px"`, `"repeat(auto-fill, minmax(120px, 1fr))"`,
+     *  `"[sidebar] 240px [main] 1fr"`, `"none"`) or a column count `n`, which means
+     *  `repeat(n, minmax(0, 1fr))`. Units are px, `%`, `fr`; `auto`, `min-content`,
+     *  `max-content`, `minmax()`, `fit-content()` and `repeat()` are supported. */
+    gridTemplateColumns?: number | string;
+    gridTemplateRows?: number | string;
+    gridColumnMin?: "zero" | "min-content" | "max-content";
+    gridRowMin?: "zero" | "min-content" | "max-content";
+    /** Size of implicitly created columns / rows: a CSS track size list or a pixel count. */
+    gridAutoColumns?: number | string;
+    gridAutoRows?: number | string;
+    /** `"row"`, `"column"`, optionally followed by `"dense"`. */
+    gridAutoFlow?: string;
+    /** Quoted rows of area names: `'"header header" "side main"'`. Use `.` for an empty cell. */
+    gridTemplateAreas?: string;
+    /** Item placement: a line number (negative counts from the end), `"span 2"`, a line or
+     *  area name, or a pair such as `"1 / 3"`. */
+    gridColumn?: number | string;
+    gridRow?: number | string;
+    gridColumnStart?: number | string;
+    gridColumnEnd?: number | string;
+    gridRowStart?: number | string;
+    gridRowEnd?: number | string;
+    /** An area name, or `"row-start / column-start / row-end / column-end"`. */
+    gridArea?: number | string;
+    /** A length (see `DimensionValue`; a percentage is of the containing block), `"auto"`, or on a
+     *  direct child of `<anchored>` the trigger's border box:
+     *  `"anchor-size(width)"` / `"anchor-size(height)"`. Margins and `top` / `right` / `bottom` /
+     *  `left` take it too. Resolved natively on every layout.
+     *
+     *  `width`, `minWidth` and `maxWidth` also take `"min-content"` (the widest word of the text, with
+     *  the space after it), `"max-content"` (the content on one line), `"fit-content"`
+     *  (`min(max-content, max(min-content, available width))`) and `"fit-content(<length>)"` (a
+     *  length or percentage in place of the available width, never negative). As `minWidth`,
+     *  `fit-content` is `min-content`; as `maxWidth` it is `max-content`. Each keyword node costs an
+     *  extra layout of its subtree every frame, so put it on the few boxes that need it. A later
+     *  style (`hover`, `focusVisible`) replaces the keyword with a length or `auto` and the other
+     *  way round. The same keywords on `height`, `minHeight` and `maxHeight` are `auto`, as in
+     *  CSS. Margins and insets reject them. */
+    width?: DimensionValue;
+    height?: DimensionValue;
+    minWidth?: DimensionValue;
+    minHeight?: DimensionValue;
+    maxWidth?: DimensionValue;
+    maxHeight?: DimensionValue;
+    /** One to four lengths in CSS order (see `DimensionValue`; a percentage is of the containing
+     *  block's width, on all four sides): `"8px"`, `"8px 12px"` (top and bottom, then left and
+     *  right), `"1px 2px 3px"` (top, left and right, bottom), `"1px 2px 3px 4px"` (top, right,
+     *  bottom, left). A `calc()` is one value however many spaces it holds. Not `"auto"`. The
+     *  sides win over `padding`. */
+    padding?: DimensionValue;
+    /** `paddingBlock` is the top and the bottom, `paddingInline` the left and the right (gpuix lays
+     *  out left to right and horizontally): one value for both ends or `"<start> <end>"`.
+     *  They win over `padding` and the side longhands win over them. The same holds for
+     *  `marginBlock`, `marginInline`, `insetBlock` and `insetInline`. */
+    paddingBlock?: DimensionValue;
+    paddingInline?: DimensionValue;
+    paddingTop?: DimensionValue;
+    paddingRight?: DimensionValue;
+    paddingBottom?: DimensionValue;
+    paddingLeft?: DimensionValue;
+    /** One to four lengths in CSS order, as for `padding`, each of which may be `"auto"` (which
+     *  absorbs free space in flex layouts): `"0 auto"` centres a box with a width. A percentage
+     *  is of the containing block's width. The sides win over `margin`. */
+    margin?: DimensionValue;
+    /** One or two lengths or `"auto"`, as for `paddingBlock`. */
+    marginBlock?: DimensionValue;
+    marginInline?: DimensionValue;
+    marginTop?: DimensionValue;
+    marginRight?: DimensionValue;
+    marginBottom?: DimensionValue;
+    marginLeft?: DimensionValue;
+    /** `"static"` (the default), `"relative"`, `"absolute"`, `"fixed"` or `"sticky"`. An absolute box
+     *  resolves `top`/`right`/`bottom`/`left` and percentage sizes against the padding box
+     *  of its nearest non-static ancestor (a sticky one counts), a fixed one against the window.
+     *  `"sticky"` lays out like `"relative"` with the insets ignored and then stays inside the
+     *  scrollport of its nearest scroll container (or the window) less that container's padding,
+     *  inset by `top`, `right`, `bottom` and `left`, without leaving its parent's content box. */
+    position?: string;
+    /** Paint and hit-test order among positioned siblings (`position` other than static).
+     *  Negative paints below in-flow siblings, positive above. Only reorders siblings of the same
+     *  parent, never against cousins. */
+    zIndex?: number;
+    /** One to four lengths or `"auto"` in CSS order, as for `margin`, for `top`, `right`, `bottom`
+     *  and `left`: `"10px 20px"` is 10px from the top and bottom and 20px from the left and right.
+     *  A percentage is of the containing block. `top`, `right`, `bottom` and `left` win over
+     *  `inset`. */
+    inset?: DimensionValue;
+    /** `insetBlock` is `top` and `bottom`, `insetInline` is `left` and `right`: one or two lengths
+     *  or `"auto"`, as for `paddingBlock`. */
+    insetBlock?: DimensionValue;
+    insetInline?: DimensionValue;
+    /** A length (see `DimensionValue`; a percentage is of the containing block) or `"auto"`. */
+    top?: DimensionValue;
+    right?: DimensionValue;
+    bottom?: DimensionValue;
+    left?: DimensionValue;
+    /** The CSS shorthand (`"linear-gradient(...) center / cover no-repeat, #fff"`: layers
+     *  then a final colour), a plain colour, or the two-stop object form. The
+     *  `background*` longhands below override parts of the shorthand. */
+    background?: string | LinearGradientBackground;
+    backgroundColor?: string;
+    /** Comma list of `linear-`, `radial-`, `conic-gradient()` and `repeating-` forms
+     *  (any number of stops and colour hints, `in srgb | oklab`), `none`, or `url()`
+     *  (valid but not drawn). The first layer is on top. */
+    backgroundImage?: string;
+    /** CSS lists, one entry per layer, repeating to cover the layers. */
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    backgroundRepeat?: string;
+    backgroundOrigin?: "border-box" | "padding-box" | "content-box" | string;
+    /** `text` paints the layer through the glyphs of the element and its
+     *  descendants. The box values clip the gradient layers only; `backgroundColor`
+     *  is clipped to the glyphs when the last layer's clip is `text`. */
+    backgroundClip?: "border-box" | "padding-box" | "content-box" | "text" | string;
+    /** Text colour, inherited. Every colour prop accepts CSS colours: hex, named,
+     *  `rgb()`, `hsl()`, `hwb()`, `lab()`, `lch()`, `oklab()`, `oklch()`, relative
+     *  colours, and the context-aware forms below, which nest freely:
+     *  - `currentColor`: this element's computed `color`, so `borderColor:
+     *    "currentColor"` follows the text.
+     *  - `light-dark(a, b)`: `a` under a light `colorScheme`, `b` under a dark one.
+     *  - `color-mix(in oklab, a 30%, b)`: any of srgb, srgb-linear, display-p3,
+     *    a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, xyz-d65, lab, lch, oklab,
+     *    oklch, hsl, hwb, with `shorter|longer|increasing|decreasing hue` for the
+     *    polar ones.
+     *  - `color(display-p3 1 0 0)`: the same spaces, clipped to sRGB.
+     *  An invalid colour is ignored. */
+    color?: string;
+    /** CSS `color-scheme`, inherited: `"normal"` (light), `"light"`, `"dark"`,
+     *  `"light dark"` (follows the window appearance), `"only light"`, `"only dark"`.
+     *  It picks the side of `light-dark()` and sets the default text colour (CSS
+     *  `CanvasText`): black under a light scheme, white under a dark one, until some
+     *  element declares a `color`. */
+    colorScheme?: string;
+    opacity?: number;
+    /** One to four lengths in CSS order, as for `padding`, each a length (see `DimensionValue`)
+     *  with no percentage, or `"thin"` (1px), `"medium"` (3px) or `"thick"` (5px):
+     *  `"1px 2px 3px 4px"`, `"thin thick"`. A negative width is 0. The sides win over
+     *  `borderWidth`. A side only has a width when its line style is visible: with no
+     *  `borderStyle` (or `border*` shorthand or side style) it is `none` and the width is 0, as
+     *  in CSS. */
+    borderWidth?: DimensionValue;
+    borderTopWidth?: DimensionValue;
+    borderRightWidth?: DimensionValue;
+    borderBottomWidth?: DimensionValue;
+    borderLeftWidth?: DimensionValue;
+    /** One to four colours, like CSS: `"red"`, `"red blue"` (top-bottom, left-right),
+     *  `"red blue green"`, `"red blue green white"` (top, right, bottom, left). One
+     *  invalid colour ignores the whole value. */
+    borderColor?: string;
+    borderTopColor?: string;
+    borderRightColor?: string;
+    borderBottomColor?: string;
+    borderLeftColor?: string;
+    /** CSS shorthands: `"1px solid red"`, `"2px dashed"`, `"none"`. Width, style
+     *  (any `LineStyle`) and colour in any order; no style means `none`, which has no
+     *  width, a missing colour is `currentColor`, a missing width is `medium` (3px).
+     *  `border` sets all sides, then `borderTop` ... `borderLeft` override one, then
+     *  `borderStyle`, then the longhands (`borderWidth`, `borderColor`,
+     *  `borderTopStyle`, ...) override those. */
+    border?: string;
+    /** `borderBlock` sets the top and the bottom, `borderInline` the left and the right, written
+     *  like `border`. They win over `border`, and `borderTop` ... `borderLeft` win over them. */
+    borderBlock?: string;
+    borderInline?: string;
+    borderTop?: string;
+    borderRight?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+    /** A number (px) or the CSS string: one to four lengths or percentages in the
+     *  order top-left, top-right, bottom-right, bottom-left (`"8px"`, `"50%"`,
+     *  `"10px 20px"`), then optionally `/` and one to four vertical radii
+     *  (`"10px 20px / 5px"`, `"50% / 10px 20px"`). A percentage is of the border
+     *  box, the width for the horizontal radius and the height for the vertical
+     *  one, so `"50%"` on a wide box is an ellipse. Lengths take any unit (`px`,
+     *  `em`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `in`, ...) or a `calc()`; `em` is
+     *  the element's font size. A negative or invalid value throws. Radii that add up to more than a side are scaled down
+     *  together, as in CSS. The corner longhands win over it. */
+    borderRadius?: number | string;
+    /** A number (px), or `"<horizontal> [<vertical>]"`: `"20px"`, `"20px 10px"`,
+     *  `"50%"`, `"50% 20px"`. A zero in either radius makes the corner square. */
+    borderTopLeftRadius?: number | string;
+    borderTopRightRadius?: number | string;
+    borderBottomLeftRadius?: number | string;
+    borderBottomRightRadius?: number | string;
+    /** One shadow, a list painted in the order given, or the CSS string
+     *  (`"0 1px 2px rgba(0,0,0,.2), inset 0 0 0 1px red"`). In the string, lengths
+     *  are `px` (or a bare `0`), `inset` and the colour may lead or trail the
+     *  lengths, and a layer without a colour is `currentColor`, as in CSS. An
+     *  invalid string paints no shadow. */
+    boxShadow?: BoxShadow | BoxShadow[] | string;
+    /** CSS `filter`: a space-separated list of `blur()`, `brightness()`,
+     *  `contrast()`, `grayscale()`, `hue-rotate()`, `invert()`, `opacity()`,
+     *  `saturate()`, `sepia()` and `drop-shadow()`, applied in order to the element
+     *  and everything in it, or `"none"`. Amounts are numbers or percentages;
+     *  lengths are `px` (or a bare `0`); angles are `deg`, `rad`, `turn` or `grad`.
+     *  A `drop-shadow()` colour defaults to `currentColor`. An invalid string is
+     *  ignored, as in CSS. `url()` references are not supported. */
+    filter?: string;
+    /** CSS `backdrop-filter`: the same functions as `filter`, applied to what is
+     *  painted behind the element, within its border box. The element's own
+     *  background should be translucent for the effect to show. */
+    backdropFilter?: string;
+    /** CSS `mask-image`: a comma list of `linear-`, `radial-`, `conic-gradient()` and
+     *  `repeating-` forms, `none`, or `url()` (an image, loaded as `backgroundImage`
+     *  loads it). The element and everything in it is multiplied by the layers, the
+     *  first on top, each read by its `maskMode` and combined with the ones below by
+     *  its `maskComposite`. A `url()` image that has not loaded, or failed to, is a
+     *  transparent layer, so the element is hidden until it does. `image-set()` is
+     *  not supported. */
+    maskImage?: string;
+    /** CSS lists, one entry per layer, repeating to cover the layers. Unlike
+     *  `backgroundOrigin`, `maskOrigin` starts at `border-box`. `fill-box` is
+     *  `content-box` and `stroke-box` and `view-box` are `border-box`. `no-clip`
+     *  and `margin-box` are not supported, so a list using them is ignored. */
+    maskSize?: string;
+    maskPosition?: string;
+    maskRepeat?: string;
+    maskOrigin?: "border-box" | "padding-box" | "content-box" | string;
+    maskClip?: "border-box" | "padding-box" | "content-box" | string;
+    /** CSS `mask-mode`, one entry per layer, repeating to cover the layers: `alpha`
+     *  reads a layer's alpha, `luminance` its luminance scaled by its alpha, and
+     *  `match-source` (the default) is alpha for a gradient and an image alike. */
+    maskMode?: "match-source" | "alpha" | "luminance" | string;
+    /** CSS `mask-composite`, one entry per layer, repeating to cover the layers: how
+     *  a layer combines with the ones below it. The bottom layer's is ignored. The
+     *  legacy `-webkit-mask-composite` keywords are not supported. */
+    maskComposite?: "add" | "subtract" | "intersect" | "exclude" | string;
+    /** CSS `mask` shorthand: layers, `position / size`, repeat, origin / clip boxes,
+     *  and a mode and a composite keyword, in any order. The longhands win over it.
+     *  An invalid string is ignored. It does not touch `maskBorder`. */
+    mask?: string;
+    /** CSS `mask-border-source`: one `linear-`, `radial-`, `conic-gradient()` (or `repeating-`
+     *  form) or `url()` image, or `none`. The element is multiplied by a nine-slice of the image
+     *  drawn around its border box (and `maskBorderOutset`), as another layer added to the
+     *  `maskImage` ones; see `maskBorder`. A gradient is as large as the border image area. A
+     *  `url()` that has not loaded, or failed to, masks the element out like a `maskImage` one.
+     *  Chrome only knows the prefixed `-webkit-mask-box-image-*` forms of these. */
+    maskBorderSource?: string;
+    /** CSS `mask-border-slice`: one to four numbers (pixels of the image) or percentages, clockwise
+     *  from the top like `margin`, and `fill` before or after them to draw the middle slice too.
+     *  Starts at `0`, and unlike `-webkit-mask-box-image` does not imply `fill`. */
+    maskBorderSlice?: string;
+    /** CSS `mask-border-width`: one to four lengths, percentages of the border image area, numbers
+     *  (times the element's border width) or `auto` (the size of the slice, the default). */
+    maskBorderWidth?: string;
+    /** CSS `mask-border-outset`: one to four lengths or numbers (times the border width) that grow
+     *  the border image area past the border box. */
+    maskBorderOutset?: string;
+    /** CSS `mask-border-repeat`: one or two of `stretch` (the default), `repeat` (whole slices,
+     *  centred and cut off at the ends), `round` (rescaled to a whole number) and `space` (whole
+     *  slices with equal gaps around and between them), for the horizontal and the vertical edges. */
+    maskBorderRepeat?: "stretch" | "repeat" | "round" | "space" | string;
+    /** CSS `mask-border-mode`: `alpha` (the default) reads the alpha of the image, `luminance` its
+     *  luminance scaled by its alpha. */
+    maskBorderMode?: "alpha" | "luminance";
+    /** CSS `mask-border` shorthand: `<source> || <slice> [ / <width>? [ / <outset> ]? ]? ||
+     *  <repeat> || <mode>`, with what it leaves out at its initial value. The longhands win over
+     *  it. An invalid string is ignored. */
+    maskBorder?: string;
+    /** CSS `clip-path`: `inset()`, `rect()`, `xywh()`, `circle()`, `ellipse()`, `polygon()` or
+     *  `path()`, or `none`, with an optional `border-box` (default), `padding-box` or
+     *  `content-box` before or after the shape. The element and everything in it is
+     *  clipped to the shape, and so is hit testing. `margin-box`, `stroke-box` and
+     *  `view-box` are `border-box` and `fill-box` is `content-box`. `url()` and a box
+     *  with no shape are invalid, so the value is ignored. */
+    clipPath?: string;
+    /** CSS `transform`: a space-separated list of `translate()`, `translateX()`, `translateY()`,
+     *  `scale()`, `scaleX()`, `scaleY()`, `rotate()`, `skew()`, `skewX()`, `skewY()` and
+     *  `matrix()`, or `"none"`. Moves, scales, rotates and skews the element and everything in it,
+     *  hit testing and `getBoundingClientRect()` included, around `transformOrigin`; layout is
+     *  not affected. Translations take lengths (`px`, `em`, `rem`, `vw`, `vh`, `calc()`) and
+     *  percentages of the element's own border box; angles are `deg`, `rad`, `grad` or `turn`
+     *  (or a bare `0`). The 3D forms are CSS Transforms 2's: `translate3d()`, `translateZ()`,
+     *  `scale3d()`, `scaleZ()`, `rotateX()`, `rotateY()`, `rotate3d()`, `perspective()` and
+     *  `matrix3d()` (`rotateZ()` is `rotate()`); see `perspective`. An invalid string is ignored, as
+     *  in CSS.
+     *
+     *  A transform other than `none` (and a `perspective`, and `transformStyle: "preserve-3d"`) makes
+     *  the element a stacking context and the containing block of its absolute and fixed descendants. It does nothing to a non-atomic inline
+     *  element (a `<span>` in a line of text). A pure translation keeps text sharp; rotated and
+     *  scaled text is resampled and may look softer. */
+    transform?: string;
+    /** CSS `translate`, `rotate` and `scale`: the individual transform properties, applied
+     *  around `transformOrigin` as translate, then rotate, then scale, then `transform`.
+     *  `translate` is one or two lengths or percentages; `rotate` an angle (a number is
+     *  degrees, or `x`, `y`, `z` or three numbers for an axis, then the angle); `scale` one to
+     *  three numbers or percentages (a number is the factor). `translate` takes a length along z
+     *  as a third value. */
+    translate?: string;
+    rotate?: number | string;
+    scale?: number | string;
+    /** CSS `transform-origin`: one or two of `left`, `center`, `right`, `top`, `bottom`, lengths
+     *  and percentages, `50% 50%` by default, and a length along z. */
+    transformOrigin?: string;
+    /** CSS `perspective`: `"none"` or a length from 0 up (a number is px). The children are seen from
+     *  that far in front of this element's plane, so a `rotateX()`, `rotateY()` or `translateZ()` of
+     *  theirs shows in depth. Not inherited: it reaches the children, not their descendants, unless
+     *  `transformStyle` is `preserve-3d`. A perspective makes the element a stacking context and the
+     *  containing block of its absolute and fixed descendants. */
+    perspective?: number | string;
+    /** CSS `perspective-origin`: where the viewer looks at the box, like `transformOrigin` without z.
+     *  `50% 50%` by default. */
+    perspectiveOrigin?: string;
+    /** CSS `transform-style`: `"preserve-3d"` makes the children planes of the same 3D rendering
+     *  context as this element, so their depth accumulates through it; `"flat"` (the default)
+     *  flattens them onto the element. A grouping property makes the used value `flat`: `overflow` other
+     *  than `visible`, `opacity` below 1, `filter`, `backdropFilter`, `clipPath` and a mask. Planes
+     *  are painted in tree order, not sorted by depth, and are not cut where they intersect.
+     *  `preserve-3d` makes a stacking context and a containing block even where it is overridden. */
+    transformStyle?: "flat" | "preserve-3d";
+    /** CSS `backface-visibility`: `"hidden"` draws and hits nothing of the element, and what is in
+     *  it, while its back faces the viewer. */
+    backfaceVisibility?: "visible" | "hidden";
+    /** One to four line styles, like `borderColor`: `"dotted"`, `"dotted dashed"` (top-bottom,
+     *  left-right), ... A `none` or `hidden` side has no width. One invalid keyword ignores the
+     *  whole value. A side that no `border*` value gives a style is `none`, as in CSS:
+     *  no width, nothing painted. A visible style with no width is `medium` (3px). */
+    borderStyle?: LineStyle | (string & {});
+    borderTopStyle?: LineStyle;
+    borderRightStyle?: LineStyle;
+    borderBottomStyle?: LineStyle;
+    borderLeftStyle?: LineStyle;
+    /** Width divided by height, as a number or a CSS ratio (`"16 / 9"`, `"1"`). Fills in
+     *  whichever axis has no definite size. An `<img>` uses its intrinsic ratio unless this is set. */
+    aspectRatio?: number | string;
+    /** CSS `outline`: a line outside the border box. Takes no layout space, so it
+     *  can appear on focus without moving anything. As in CSS the style is `none` unless
+     *  `outline` or `outlineStyle` gives one, so a ring needs `outlineStyle: "solid"` (or
+     *  `outline: "2px solid red"`); the width is then `medium` (3px) and the colour
+     *  `currentColor` unless given. Width, style and colour of the shorthand come in any
+     *  order, `hidden` is an error, and `outlineWidth`, `outlineStyle` and `outlineColor`
+     *  win over it. `auto` is painted as `solid`. `outlineOffset` is not part of it. */
+    outline?: string;
+    outlineWidth?: DimensionValue;
+    outlineStyle?: OutlineStyle | (string & {});
+    outlineColor?: string;
+    /** Gap between the border box and the outline: a length (see `DimensionValue`) with no
+     *  percentage. Negative draws it inside. `outlineWidth` takes what `borderWidth` does. */
+    outlineOffset?: DimensionValue;
+    fontSize?: number | string;
+    fontFamily?: string;
+    fontWeight?: string | number;
+    /** CSS `font-style`, inherited. Applies to the element and to inline runs. */
+    fontStyle?: "normal" | "italic" | "oblique";
+    /** CSS `text-align`, inherited: `start` (the default) and `end` are the left or the right of the
+     *  element's own `direction`, `left`, `right`, `center`. */
+    textAlign?: string;
+    /** CSS `direction`, inherited. `"rtl"` mirrors what runs along the inline axis: the columns of a
+     *  table and of a grid, a row flex container's main axis, the side `textAlign: "start"` is,
+     *  where a block narrower than its parent sits, and the side of a vertical scrollbar. Physical
+     *  properties (`left`, `borderLeft`, `marginLeft`) do not swap. Not animatable. */
+    direction?: "ltr" | "rtl";
+    /** CSS `line-height`, inherited. A number multiplies the element's font size, as in CSS and React DOM:
+     *  `1.5` is one and a half times the font size, and a child with another `fontSize` gets its own multiple.
+     *  `"normal"` is the font's default leading. A string with a unit is a length (see `DimensionValue`),
+     *  where `%` and `em` are of this element's font size: `"24px"`, `"150%"`, `"1.5em"`. A length is
+     *  resolved here and inherited as px. Negative is an error. Motion animates only a number. */
+    lineHeight?: number | string;
+    /** CSS `white-space`, inherited. `normal` and `nowrap` collapse spaces and turn
+     *  a newline into a space, `pre-line` collapses spaces and keeps newlines,
+     *  `pre-wrap`, `break-spaces` and `pre` keep both. `nowrap` and `pre` do not
+     *  wrap. `break-spaces` breaks after every space, and its spaces never hang. */
+    whiteSpace?: "normal" | "nowrap" | "pre" | "pre-wrap" | "pre-line" | "break-spaces";
+    /** CSS `tab-size`, inherited, 8 by default. A number is that many spaces and a
+     *  string is a CSS length such as `"40px"`. A tab that `whiteSpace` keeps
+     *  advances to the next multiple of it, counted from the start of each line of
+     *  text, so a wrapped line counts again from its own start. Only a container
+     *  sets it: a `<span>` inside a paragraph uses the paragraph's. Negative
+     *  values and percentages throw. */
+    tabSize?: number | string;
+    /** CSS `word-break`, inherited, `"normal"` by default. `"break-all"` also
+     *  breaks between any two letters, so a line is filled to its edge;
+     *  `"keep-all"` does not break between CJK characters; `"break-word"` is
+     *  `"normal"` with `overflowWrap: "anywhere"`. Only a container sets it: a
+     *  `<span>` inside a paragraph uses the paragraph's. */
+    wordBreak?: "normal" | "break-all" | "keep-all" | "break-word";
+    /** CSS `overflow-wrap`, inherited, `"normal"` by default: a word longer than
+     *  its line overflows it. `"break-word"` and `"anywhere"` break such a word
+     *  where it overflows, when no earlier place on the line will do. Only a
+     *  container sets it. */
+    overflowWrap?: "normal" | "break-word" | "anywhere";
+    /** CSS `table-layout` of a `display: "table"` element, not inherited. `"fixed"` sizes the columns
+     *  from the first row and the `table-column`s alone, and needs a `width` on the table (else it
+     *  is `"auto"`). */
+    tableLayout?: "auto" | "fixed";
+    /** CSS `border-spacing`, inherited: the gap between the cells of a `display: "table"` element
+     *  and between the cells and its border. One length is both axes; two, as in `"4px 8px"`, are the
+     *  horizontal then the vertical one. A number is px; any length unit works, no percentage and
+     *  nothing negative. It is 0 with `borderCollapse: "collapse"`. Anything else throws. */
+    borderSpacing?: number | (string & {});
+    /** CSS `border-collapse`, inherited. `"collapse"` shares each edge of a table's grid between
+     *  the borders that meet there (the wider wins, `hidden` removes it) and has the table paint
+     *  it once, centred on the grid line; the table's `borderSpacing`, `padding` and
+     *  `borderRadius` and `emptyCells` then do nothing. */
+    borderCollapse?: "separate" | "collapse";
+    /** CSS `caption-side`, inherited from the table to its `table-caption` children. */
+    captionSide?: "top" | "bottom";
+    /** CSS `empty-cells`, inherited. `"hide"` leaves a `table-cell` with nothing in it unpainted
+     *  (no background, border or shadow), unless the table collapses its borders. */
+    emptyCells?: "show" | "hide";
+    /** CSS `vertical-align`, not inherited: where an inline box sits on its line (CSS 2.1 §10.8.1).
+     *  `"baseline"`, `"sub"`, `"super"`, `"text-top"`, `"text-bottom"` and `"middle"` are relative to the
+     *  parent's text; `"top"` and `"bottom"` align the box with the line box. A number is px and a string
+     *  with a unit is a length that raises the box's baseline (negative lowers it); a `%` is of the
+     *  element's own `lineHeight`. Anything else throws. On a `display: "table-cell"` it places the
+     *  content in the row: `"top"`, `"middle"`, `"bottom"` or `"baseline"` (the default); every other
+     *  value is `"baseline"` there. */
+    verticalAlign?: "baseline" | "sub" | "super" | "text-top" | "text-bottom" | "middle" | "top" | "bottom" | number | (string & {});
+    /** CSS `text-box`: `"normal"` (no trim, `auto` edge) or a `textBoxTrim` and a `textBoxEdge`
+     *  in either order, e.g. `"trim-both cap alphabetic"`. A trim left out is `trim-both`, not
+     *  `none`, and an edge left out is `auto`. `textBoxTrim` and `textBoxEdge` laid over it win.
+     *  An invalid value is ignored. */
+    textBox?: string;
+    /** CSS `text-box-trim`, `"none"` by default and not inherited. On a block container,
+     *  `"trim-start"` cuts the space above the first line of text down to the `textBoxEdge`
+     *  over edge, `"trim-end"` the space below the last line down to the under edge, and
+     *  `"trim-both"` does both. The container gets shorter by what was cut and what follows
+     *  moves up; its padding and border stay, the trim is inside them, and ink the edge
+     *  leaves out (a tall letter above `cap`) overflows. Only those two lines are trimmed. The
+     *  trim goes through block children down to their first or last line, but stops at one
+     *  with padding or a border on that side or with no line of text to start with, and
+     *  an absolutely positioned child is not a first or last child. A flex or grid
+     *  container trims nothing and passes nothing down. `"none"` on a descendant does not
+     *  take off a trim from above. */
+    textBoxTrim?: "none" | "trim-start" | "trim-end" | "trim-both";
+    /** CSS `text-box-edge`, inherited, `"auto"` by default, which is `"text"`. The metric a
+     *  `textBoxTrim` cuts to: `<over> <under>`, where over is `"text"` (the font's ascent: only
+     *  the half-leading above is cut), `"cap"` (cap height) or `"ex"` (x-height), and under
+     *  is `"text"` (the descent: only the half-leading below is cut) or `"alphabetic"` (the
+     *  baseline). One value is both where it can be (`"text"` is `"text text"`), otherwise
+     *  the under edge is `"text"` (`"cap"` is `"cap text"`). The metrics are those of the font
+     *  of the block that holds the line. */
+    textBoxEdge?: string;
+    /** CSS `text-wrap`, inherited, the shorthand of `textWrapMode` and
+     *  `textWrapStyle`: a mode, a style, or both in either order (`"nowrap"`,
+     *  `"balance"`, `"nowrap pretty"`). What it leaves out is the longhand's initial
+     *  value, so `"balance"` also turns wrapping back on. A longhand declared on the
+     *  same element wins over it; so does it over `whiteSpace`. Only a container sets
+     *  it: a `<span>` inside a paragraph uses the paragraph's. */
+    textWrap?: "wrap" | "nowrap" | "balance" | "pretty" | "stable" | `${"wrap" | "nowrap"} ${"auto" | "balance" | "pretty" | "stable"}` | `${"auto" | "balance" | "pretty" | "stable"} ${"wrap" | "nowrap"}`;
+    /** CSS `text-wrap-mode`, inherited, `"wrap"` by default. `"nowrap"` keeps the text
+     *  on one line, as the wrapping part of `whiteSpace` does, and wins over it when
+     *  both are declared on the same element; it leaves what `whiteSpace` does to
+     *  spaces and newlines alone, so `whiteSpace: "pre"` with `textWrapMode: "wrap"`
+     *  is `pre-wrap`. */
+    textWrapMode?: "wrap" | "nowrap";
+    /** CSS `text-wrap-style`, inherited, `"auto"` by default. `"balance"` evens out
+     *  the lines of a paragraph of at most 6 lines (each run of text between `\n`
+     *  lines counts as one), and `"pretty"` keeps the last line from being a single
+     *  short word, both without making more lines than `"auto"` does. The text is
+     *  as wide as it is with `"auto"`: only the breaks move, so `textAlign` still
+     *  aligns within the full width. `"stable"` is `"auto"`. Not applied to text with
+     *  a tab, `whiteSpace: "break-spaces"` or `lineClamp`, or where a word is wider
+     *  than its line. */
+    textWrapStyle?: "auto" | "balance" | "pretty" | "stable";
+    textOverflow?: "ellipsis" | "ellipsis-start";
+    lineClamp?: number;
+    /** CSS `text-decoration`: lines, a style, a colour and a thickness in any order,
+     *  e.g. `"underline line-through"` or `"underline wavy red 2px"`. Lines are
+     *  `underline`, `line-through`, `overline` and `none`; the style, colour and
+     *  thickness apply to every line the declaration names. Styles are `solid`,
+     *  `double`, `dotted`, `dashed` and `wavy`. A thickness is `auto`, `from-font`
+     *  or a length (`"2px"`, `"0.1em"`, a percentage of `1em`). A descendant
+     *  cannot take a line off. */
+    textDecoration?: string;
+    /** CSS `text-decoration-line`, laid over `textDecoration`. */
+    textDecorationLine?: string;
+    /** CSS `text-decoration-style` (see `textDecoration`). */
+    textDecorationStyle?: "solid" | "double" | "dotted" | "dashed" | "wavy";
+    /** CSS `text-decoration-color`; `currentColor` is the element's own colour. */
+    textDecorationColor?: string;
+    /** CSS `text-decoration-thickness`: `auto` (a tenth of the font size, as Chrome
+     *  computes it), `from-font` (the font's underline thickness, `auto` when it has
+     *  none) or a length such as `"2px"` or `"0.1em"`; a percentage is of `1em`.
+     *  Resolved at the declaring element, and the same for every line it draws. `auto`
+     *  and `from-font` stay fractional, a solid or double line floors them to a device
+     *  pixel (at least one) when it paints and a dotted or dashed one rounds them. */
+    textDecorationThickness?: string;
+    /** CSS `text-underline-offset`, inherited: how far below the alphabetic baseline
+     *  the top edge of an underline sits. `auto` (the default) leaves a gap of half
+     *  the thickness, rounded up, and at least a pixel, as Chrome does; a length
+     *  (a number is px, `"0.25em"`, `calc()`) replaces that gap, so `0` puts the line
+     *  on the baseline and a negative one above it. A percentage is of `1em`. The box
+     *  that declares the underline decides: its own value or the one it inherits, and a
+     *  descendant's offset does not move the line of an ancestor. `em` resolves where
+     *  the value is set and descendants inherit the px, a percentage is of the font size
+     *  of the box that draws the line. Underlines only; not animatable. */
+    textUnderlineOffset?: "auto" | number | (string & {});
+    /** CSS `font-variant-numeric`, inherited: `tabular-nums`, `proportional-nums`,
+     *  `lining-nums`, `oldstyle-nums`, `slashed-zero`, `diagonal-fractions`,
+     *  `stacked-fractions`, `ordinal`, or `normal`. One keyword per group (figure,
+     *  spacing, fraction), combined with spaces. Needs a font with the feature.
+     *  Not available inside a state style. */
+    fontVariantNumeric?: string;
+    /** CSS `font-feature-settings`, inherited: `'"tnum" 1, "liga" 0'`. A tag is four
+     *  characters; the value is an integer, `on`, `off`, or omitted (1). Wins over
+     *  `fontVariantNumeric` on a tag both name. Not available inside a state style. */
+    fontFeatureSettings?: string;
+    /** CSS `font-variation-settings`, inherited: `'"wght" 650, "wdth" 90'`, or `normal`. A
+     *  tag is four characters and the value a number, clamped to the font's range for that
+     *  axis; an axis the font does not have is ignored, and a tag named twice takes its last
+     *  value. On a variable font `fontWeight` already sets `wght` (to any weight, not only the
+     *  named ones), and a `wght` here wins over it. A value CSS does not have throws, as
+     *  `textWrap` does. Animates per axis between two values that name the same axes
+     *  (in any order); otherwise, and against `normal`, it flips halfway, and a CSS
+     *  transition runs that only with `transitionBehavior: "allow-discrete"`. Not
+     *  available inside a state style. */
+    fontVariationSettings?: string;
+    /** CSS `-webkit-font-smoothing`, inherited, as Chrome has it on macOS. `"antialiased"` draws glyphs
+     *  as plain coverage, the same ink for dark and light text; `"auto"` (default) keeps the platform's
+     *  CoreGraphics smoothing, which thickens strokes (light text most). `"subpixel-antialiased"` is
+     *  `"auto"`: current macOS has no subpixel text. A value CSS does not have is ignored. Does not
+     *  animate. */
+    WebkitFontSmoothing?: "auto" | "antialiased" | "subpixel-antialiased";
+    /** `"visible"` (default); `"clip"` clips; `"hidden"` clips and is a scroll container that
+     *  only code scrolls (`scrollTo`, `scrollTop`, `scrollIntoView`), not the wheel or the keys;
+     *  `"scroll"` and `"auto"` scroll for the user too (scrollbars are overlays, so they differ
+     *  in nothing). Overflow never changes `display` or the element's children. */
+    overflow?: string;
+    overflowX?: string;
+    overflowY?: string;
+    /** `"auto"` follows the system appearance (a 50% black thumb on light, 50% white on dark), or
+     *  `"<thumb> <track>"` sets both colours, each any CSS colour. The track is the faint
+     *  strip that shows while the pointer is over the bar. Anything else is ignored, as in CSS. */
+    scrollbarColor?: string;
+    /** `"auto"` (the default) or `"thin"` for a narrower bar. `"none"` draws no bar and leaves
+     *  the container scrollable. The bar is a macOS-style overlay: hidden at rest, shown while
+     *  the offset moves, faded out after about a second, and thicker under the pointer. */
+    scrollbarWidth?: "auto" | "thin" | "none";
+    /** What a scroller at its limit does with the wheel it cannot use, like CSS. `"auto"`
+     *  (default) passes it to the scroller around it, `"contain"` and `"none"` keep it. */
+    overscrollBehavior?: "auto" | "contain" | "none";
+    overscrollBehaviorX?: "auto" | "contain" | "none";
+    overscrollBehaviorY?: "auto" | "contain" | "none";
+    /** `"smooth"` animates `scrollTo` and `scrollIntoView` calls that name no `behavior`
+     *  (about 300 to 450 ms, firing `onScroll` each frame). An explicit `behavior` wins. */
+    scrollBehavior?: "auto" | "smooth";
+    /** Like CSS `overflow-anchor`, scroll anchoring. A scroller that is scrolled away from its start
+     *  keeps what it shows where it is when the layout moves it (content inserted or resized above):
+     *  the scroller picks the first box in view as its anchor, and when the layout moves the anchor
+     *  along the block axis it scrolls by the same distance, as Chrome does. `"none"` on a box keeps
+     *  it and what is in it from being the anchor (the next box in view anchors instead), and on a
+     *  scroller turns its anchoring off. Not inherited, so it is set on each box that opts out. Not
+     *  animatable. Not modelled: a nested scroller is anchored whole, and a focused editable has no
+     *  priority. */
+    overflowAnchor?: "auto" | "none";
+    cursor?: CursorValue;
+    /** `"none"` makes the element never the target of a pointer event, so the
+     *  pointer reaches what is under it. It inherits, and a descendant's `"auto"`
+     *  restores it, like CSS. Every other element is a target where it paints,
+     *  whatever its fill or position. */
+    pointerEvents?: "auto" | "none";
+    /**
+     * Window drag regions of a frameless window (`titlebarTransparent`), as Electron's
+     * `-webkit-app-region`. `"drag"` makes the element's box drag the window; `"no-drag"` cuts a hole in
+     * it, for the buttons on a draggable bar. It inherits, so `"no-drag"` inside a `"drag"` box and
+     * `"drag"` inside that again work.
+     *
+     * Regions are layout rectangles, not hit testing: the last box in tree order that holds the
+     * point wins, whatever overlaps it, its `pointerEvents`, `overflow` or `borderRadius`. A press in
+     * a drag region starts the window move and reaches the page not at all: no `pointerdown`,
+     * `mousedown` or `click`, and a double click does what the titlebar does (zoom, minimise). A
+     * pointer over one with no button held is outside the window to the page: hover leaves, no moves
+     * fire, and wheel is untouched. The cursor is the arrow. A right click and, on macOS, a ctrl
+     * click reach the page; on Linux a right click opens the window menu. On Windows the OS owns the
+     * whole region, double click and right click included. Ignored without `titlebarTransparent`.
+     */
+    appRegion?: "drag" | "no-drag";
+    /** "none" opts this element and its subtree out of text selection.
+     *  Inherited like the CSS property, so a toolbar can disable it once. */
+    userSelect?: "text" | "none" | "auto";
+    /** Selection wash colour for this subtree. Defaults to the theme accent at 35%. */
+    selectionColor?: string;
+    /**
+     * CSS transitions, in CSS syntax with kebab-case property names, as in a DOM
+     * inline style: `"background-color 150ms ease-out, opacity .2s 50ms"`, `"all
+     * 1s"`, `"none"`. When the value of an animatable property changes (a style
+     * prop, or a `hover` / `active` / `focusVisible` / `has*` state style applying or
+     * ending) the element animates from the value it showed to the new one. An
+     * interrupted transition continues from the visible value. The element's
+     * first style never transitions. `animate` on a `motion` element beats a
+     * transition on the same property. Events: `onTransitionRun`,
+     * `onTransitionStart`, `onTransitionEnd`, `onTransitionCancel`.
+     * An invalid value is an error. Discrete properties (`display`, `visibility`,
+     * `flexDirection`, ...) transition only with `allow-discrete`, in the
+     * shorthand or `transitionBehavior`.
+     * A change between a length and `auto` (a `height` that is `auto` or unset,
+     * and an unset `minHeight` / `maxHeight`, whose value is `auto` / `none`)
+     * applies at once, as in a browser, unless `interpolateSize` allows it.
+     */
+    transition?: string;
+    /** `none`, `all`, or a list of CSS property names. Wins over `transition`. */
+    transitionProperty?: string;
+    /** A list of `<time>`s (`150ms`, `.2s`). Wins over `transition`. */
+    transitionDuration?: string;
+    /** A list of `ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`,
+     *  `cubic-bezier()`, `steps()`, `step-start`, `step-end` or `linear()`. */
+    transitionTimingFunction?: string;
+    /** A list of `<time>`s. Negative starts the transition part-way through. */
+    transitionDelay?: string;
+    /**
+     * A list of `normal` or `allow-discrete`. `allow-discrete` lets a discrete
+     * property transition: it flips at the halfway point of the eased progress,
+     * except `display`, where the side that is not `none` shows for the whole
+     * duration, and `visibility`, which is `visible` for the whole duration when
+     * either end is. `normal` (the default) applies a discrete change at once.
+     */
+    transitionBehavior?: string;
+    /**
+     * `"allow-keywords"` lets a CSS transition run between a length and a sizing
+     * keyword: `height` to or from `auto`, and from an unset `minHeight` /
+     * `maxHeight`. `"numeric-only"` (the default) makes those changes discrete.
+     * Inherited like the CSS property, so set it once on a container. `width` to
+     * or from `auto` stays discrete either way. `motion` animates to `height:
+     * "auto"` whatever this is set to.
+     */
+    interpolateSize?: "numeric-only" | "allow-keywords";
+    /**
+     * CSS animations, in CSS syntax as in a DOM inline style: `"fade-in 300ms
+     * ease-out 100ms 2 alternate both"`, `"spin 1s linear infinite"`, `"none"`.
+     * `name` is a set of keyframes made with `defineKeyframes`. The parts come in
+     * any order; the first time is the duration and the second the delay. A comma
+     * list runs several animations. An invalid value is an error. A name with no
+     * keyframes animates nothing, as in a browser. The longhands below win over
+     * this shorthand. `animation-composition`, `animation-timeline` and
+     * `animation-range` are not supported.
+     */
+    animation?: string;
+    /** `none` or a list of names given to `defineKeyframes`. */
+    animationName?: string;
+    /** A list of `<time>`s, or `auto` (`0s`). */
+    animationDuration?: string;
+    /** A list of the same easing functions as `transitionTimingFunction`. */
+    animationTimingFunction?: string;
+    /** A list of `<time>`s. Negative starts the animation part-way through. */
+    animationDelay?: string;
+    /** A list of `infinite` or non-negative numbers. */
+    animationIterationCount?: string;
+    /** A list of `normal`, `reverse`, `alternate` or `alternate-reverse`. */
+    animationDirection?: string;
+    /** A list of `none`, `forwards`, `backwards` or `both`. */
+    animationFillMode?: string;
+    /** A list of `running` or `paused`. */
+    animationPlayState?: string;
+    hover?: StateStyleDesc;
+    /** Makes this element a group for `groupHover`, `groupActive` and
+     *  `groupFocusWithin` on its descendants, like a Tailwind `group`. `true` is the default group; a string
+     *  names it, so groups can nest. */
+    group?: string | true;
+    /** Applied while the nearest ancestor `group` is hovered (the pointer is over
+     *  it or anything inside it). `{ group: "card", ... }` follows the nearest
+     *  ancestor named `card` instead of the default group. */
+    groupHover?: GroupStateStyleDesc;
+    /** Applied while the mouse is down inside the nearest ancestor `group`. Same
+     *  `group` field as `groupHover`. */
+    groupActive?: GroupStateStyleDesc;
+    /** Applied while the nearest ancestor `group` or anything inside it has focus
+     *  (`:focus-within` of the group). Same `group` field as `groupHover`. Beats
+     *  the element's own `hover` and `active` and loses to its `focusWithin`
+     *  and `focusVisible`. */
+    groupFocusWithin?: GroupStateStyleDesc;
+    active?: StateStyleDesc;
+    /** While a strict descendant is hovered, like CSS `:has(:hover)`. The pointer
+     *  over the element itself does not count, and a portal child counts as a
+     *  descendant (the logical tree, as for `hover`). Below `hover`: the element's
+     *  own state beats what its descendants cause, and this beats `groupHover`. */
+    hasHover?: StateStyleDesc;
+    /** While the mouse is down on a strict descendant, like CSS `:has(:active)`.
+     *  Below `active`, above `groupActive`. */
+    hasActive?: StateStyleDesc;
+    /** While a strict descendant has focus, like CSS `:has(:focus)`. Below
+     *  `focusWithin`, above `groupFocusWithin`. Unlike `focusWithin` it does not
+     *  apply while the element itself is the focused one. */
+    hasFocus?: StateStyleDesc;
+    /** While a strict descendant matches `:focus-visible`, like CSS
+     *  `:has(:focus-visible)`. Above `focusWithin`, below `focusVisible`. */
+    hasFocusVisible?: StateStyleDesc;
+    /** While the element is a disabled form control, like CSS `:disabled`: an `<input>` or
+     *  `<textarea>` with `disabled`, or a `Button` or `Select` trigger that is. A `div` with a
+     *  `disabled` prop does not match, as in a DOM. Hover and press still apply to a disabled
+     *  control, as `:hover` does; this sits above them, so it wins a field they both set. Unlike
+     *  `hover`, it also applies inside an `inert` subtree. */
+    disabled?: StateStyleDesc;
+    /** While the element is an enabled form control, like CSS `:enabled`. Same elements as
+     *  `disabled`. */
+    enabled?: StateStyleDesc;
+    /** While a strict descendant is a disabled form control, like CSS `:has(:disabled)`. Above
+     *  `active`, below `enabled` and `disabled`. */
+    hasDisabled?: StateStyleDesc;
+    /** While a strict descendant is an enabled form control, like CSS `:has(:enabled)`. Above
+     *  `active`, below `hasDisabled`. */
+    hasEnabled?: StateStyleDesc;
+    /** While the element matches `:focus-visible`: focused by the keyboard (Tab),
+     *  or a text control, or focus moved there by script from an element that
+     *  matched. A mouse press on a button never shows it. Needs a focusable
+     *  element. */
+    focusVisible?: StateStyleDesc;
+    /** While the element or any descendant is focused, like CSS `:focus-within`.
+     *  Works on any element, focusable or not. */
+    focusWithin?: StateStyleDesc;
+    /** `false` keeps this focusable element at full opacity while another
+     *  control has keyboard focus. Default dims it. Not inherited. */
+    keyboardFocusDim?: boolean;
+    /**
+     * Makes the element a query container, like CSS `container-type`: the
+     * `"@container"` blocks and container units (`cqw`, `cqh`, ...) of its
+     * descendants are about its content box. `"inline-size"` contains the width:
+     * the element's width no longer depends on its content, so with no `width`
+     * it is only its padding and border (a flex item or an absolutely positioned
+     * box with an `inline-size` container inside shrinks to nothing, as in a
+     * browser). `"size"` contains the height too. `"normal"` (the default) makes
+     * no container. Applies to `div`, `text`, an atomic `span`, `label`, `form`,
+     * `<virtual-list>` (its rows are queried against it), `<img>` and `<svg>`
+     * (which only lose their natural size on the contained axes) as in CSS. A
+     * `span` that is not atomic, a `display: contents` element and a table or
+     * one of its internal boxes are still the container a query finds, but they
+     * cannot be size contained: a size feature asked of them is unknown (false,
+     * and the lookup does not go on to a container above), and a container unit
+     * looks past them. An `<input>` ignores it, as it does in a browser.
+     */
+    containerType?: "normal" | "inline-size" | "size";
+    /**
+     * Names the container so a query can pick it: `"@container sidebar
+     * (min-width: 400px)"` asks the nearest ancestor container called `sidebar`
+     * instead of the nearest one. Several names are separated by spaces;
+     * `"none"` is no name. Like CSS `container-name`. A name alone, with no
+     * `containerType`, makes the element something only a name-only query
+     * (`"@container sidebar"`) and a `style()` query naming it can find.
+     */
+    containerName?: string;
+    /**
+     * `"<name> [ / <type> ]"`, both properties in one, like CSS `container`:
+     * `"sidebar / inline-size"`. A type left out is `"normal"`. `containerType`
+     * and `containerName` win over it.
+     */
+    container?: string;
+    /**
+     * Like CSS `content-visibility`. `"hidden"` skips the element's content: its children
+     * are not built, laid out or painted, but their DOM, animation and transition state is kept,
+     * and they are there again, as they were, when the value goes back to `"visible"` (the
+     * default). The element itself is built and painted: its background, border and hit area.
+     * `"auto"` is not yet skipped, and for now only has the containment below.
+     *
+     * Anything but `"visible"` contains the element's style, layout and paint: its content is
+     * clipped at the padding box as with `overflow: "clip"` (an `overflow` that already clips
+     * wins), it is a stacking context and the containing block of its `position: "absolute"`
+     * descendants. A skipped element also has size containment on both axes, sized by
+     * `containIntrinsicSize` (none, so zero, by default) plus its padding and border. Applies to
+     * `div`, `text`, `label`, `form` and block `span`; another element has the containment and
+     * is never skipped. Not modelled: the element is not an independent formatting context (a
+     * margin of its first or last child can collapse through it), and a `position: "fixed"`
+     * descendant is placed against the viewport. An observer on an element inside a skipped
+     * element may report it gone.
+     */
+    contentVisibility?: "visible" | "auto" | "hidden";
+    /**
+     * Like CSS `contain-intrinsic-size`: the size of the content box of an element with size
+     * containment that has no content to size it, for now a skipped one. `"<width> <height>"`
+     * or one value for both; each is `"none"`, a length (a number is px), or `"auto <length>"`.
+     * `containIntrinsicWidth` and `containIntrinsicHeight` win over it.
+     */
+    containIntrinsicSize?: number | string;
+    containIntrinsicWidth?: number | string;
+    containIntrinsicHeight?: number | string;
+    /** `containIntrinsicWidth` in a horizontal writing mode, which is the only one. */
+    containIntrinsicInlineSize?: number | string;
+    /** `containIntrinsicHeight` in a horizontal writing mode. */
+    containIntrinsicBlockSize?: number | string;
+    /**
+     * Styles that apply while a container query is true, like CSS `@container`.
+     * Keys are queries in the CSS Containment 3 grammar, written the way they
+     * follow `@container`: an optional container name, then a condition.
+     *
+     * ```ts
+     * style={{
+     *   padding: 16,
+     *   "@container": {
+     *     "(min-width: 400px)": { padding: 32 },
+     *     "sidebar (400px <= width < 800px) and (orientation: landscape)": { flexDirection: "row" },
+     *     "not (min-height: 300px)": { display: "none" },
+     *   },
+     * }}
+     * ```
+     *
+     * Features: `width`, `height`, `inline-size`, `block-size`, `aspect-ratio`
+     * and `orientation`, with `min-` / `max-` prefixes, `(feature: value)`, the
+     * range syntax `(400px <= width < 800px)`, and `and` / `or` / `not` (mixing
+     * `and` with `or` needs parentheses). Lengths take px, em (the container's
+     * font size), rem, vw, vh, vmin, vmax, the container units and `calc()`.
+     *
+     * `style(--name: value)` asks the container's computed custom property
+     * (a `"--name"` key of a style, which inherits), `style(--name)` whether it
+     * has a value, `style(--name: initial)` whether it has none, and
+     * `style(--n > 5px)` / `style(0 < --n <= 1)` orders a number, a length or a
+     * percentage. They combine as `style((--a: 1) and (--b: 2))`, `not style(...)`.
+     * A normal property in `style()` (`style(color: red)`) is unknown, as it is
+     * in a browser. A feature, or a `scroll-state()` query, that is not
+     * supported is unknown, and an unknown query is false. A text that is not a
+     * query at all makes the whole style invalid.
+     *
+     * One container answers the whole query: the nearest ancestor container
+     * (with that name, if the query has one) that contains the axes its size
+     * features read: `width` needs `"inline-size"` or `"size"`, `height`,
+     * `aspect-ratio` and `orientation` need `"size"`. A query of `style()` alone
+     * and no name asks the parent element. It never matches the element itself,
+     * and it measures the container's content box (without padding, border and a
+     * scrollbar gutter). With no such container, or before the container has
+     * been laid out, it is false.
+     *
+     * Blocks apply in the order they are written, a later one winning over an
+     * earlier one that sets the same property. They fold into the style before
+     * `hover`, `active` and the other state styles, which therefore win over
+     * them, and a block may carry its own state keys (`hover`, `focusVisible`,
+     * ...) that merge into the style's. A block cannot hold another
+     * `"@container"`.
+     *
+     * The style is right in the frame that lays the container out: when a
+     * container's size changes what a query or a container unit resolves to,
+     * the frame is built again before it is presented (up to four times for
+     * nested containers).
+     */
+    "@container"?: Record<string, ContainerBlockStyleDesc>;
+    /**
+     * CSS custom properties: any `"--name"` key. A number is written as its
+     * decimal text, a string is trimmed (a trailing `!important` and `/* *\/`
+     * comments go), and an empty string or `undefined` declares nothing.
+     * They inherit, `"initial"` clears one and `"inherit"` keeps the parent's,
+     * and a state style or an `"@container"` block may set them.
+     *
+     * Only `style()` container queries read them. `var()` is not substituted into
+     * other properties.
+     */
+    [customProperty: `--${string}`]: string | number | undefined;
+}
+/** A style inside `"@container"`: any style, state styles included, except another `"@container"`. */
+export type ContainerBlockStyleDesc = Omit<StyleDesc, "@container">;
+export type StateStyleDesc = Omit<StyleDesc, "@container" | "hover" | "active" | "focusVisible" | "focusWithin" | "keyboardFocusDim" | "group" | "groupHover" | "groupActive" | "groupFocusWithin" | "hasHover" | "hasActive" | "hasFocus" | "hasFocusVisible" | "disabled" | "enabled" | "hasDisabled" | "hasEnabled" | "fontVariantNumeric" | "fontFeatureSettings" | "fontVariationSettings">;
+/** A `groupHover`/`groupActive`/`groupFocusWithin` style. Its `group` picks which ancestor group to
+ *  follow (default group when omitted). */
+export type GroupStateStyleDesc = StateStyleDesc & {
+    group?: string | true;
+};
+export type ElementType = "div" | "text" | "span" | "img" | "svg" | "canvas" | "input" | "textarea" | "label" | "form" | "anchored" | "code" | "diff" | "markdown" | "webview" | "nativeview" | "virtual-list" | SvgChildType;
+/** Colours for one syntax capture class each. Every field is a CSS colour. */
+export interface SyntaxTheme {
+    comment?: string;
+    keyword?: string;
+    string?: string;
+    stringSpecial?: string;
+    escape?: string;
+    number?: string;
+    boolean?: string;
+    typeName?: string;
+    typeBuiltin?: string;
+    constructor?: string;
+    function?: string;
+    functionBuiltin?: string;
+    macroName?: string;
+    property?: string;
+    constant?: string;
+    variable?: string;
+    variableSpecial?: string;
+    parameter?: string;
+    operator?: string;
+    punctuation?: string;
+    tag?: string;
+    attribute?: string;
+    label?: string;
+    invalid?: string;
+}
+/**
+ * Every number that decides layout in the native text components.
+ *
+ * These live in the theme, not in Rust constants, so tuning a row height or a
+ * heading scale is a framework render and needs no native rebuild.
+ */
+export interface GpuixMetrics {
+    codeTextSize?: number;
+    codeLineHeight?: number;
+    codeGutterDigitWidth?: number;
+    codeGutterPaddingRight?: number;
+    codeGutterMinWidth?: number;
+    diffTextSize?: number;
+    diffLineHeight?: number;
+    diffFileHeaderHeight?: number;
+    diffHunkHeaderHeight?: number;
+    diffNoticeHeight?: number;
+    diffBodyBottomPad?: number;
+    diffGutterWidth?: number;
+    diffMarkerWidth?: number;
+    diffAccentBarWidth?: number;
+    diffRowPaddingX?: number;
+    mdTextSize?: number;
+    mdLineHeight?: number;
+    mdBlockGap?: number;
+    /** `[h1, h2, h3, h4to6]`. A shorter array leaves the rest at their defaults. */
+    mdHeadingSizes?: number[];
+    mdHeadingLineHeights?: number[];
+    mdTableCellPadding?: number;
+    mdTableMinColumnWidth?: number;
+    mdTableMinColumnContent?: number;
+    mdInlineCodeRadius?: number;
+    /**
+     * The fenced-block card. `<code>` paints no card, so these are
+     * markdown-only: style a `<code>` block with its own `style` prop instead.
+     */
+    mdCodePaddingX?: number;
+    mdCodePaddingY?: number;
+    mdCodeRadius?: number;
+    mdCodeHeaderPaddingY?: number;
+    mdCodeHeaderTextSize?: number;
+}
+/**
+ * Theme tokens for the native text components. Every field is optional and
+ * layers on top of the built-in dark theme (or light, via `appearance`).
+ */
+export interface GpuixTheme {
+    appearance?: "dark" | "light";
+    bg?: string;
+    border?: string;
+    text?: string;
+    textMuted?: string;
+    textFaint?: string;
+    textDim?: string;
+    accent?: string;
+    caret?: string;
+    codeText?: string;
+    codeWash?: string;
+    diffAdd?: string;
+    diffDel?: string;
+    diffHunkBg?: string;
+    fontSans?: string;
+    fontMono?: string;
+    syntax?: SyntaxTheme;
+    metrics?: GpuixMetrics;
+}
+/** One `highlight` entry. See `HostProps.highlight`. */
+export interface HighlightSpec {
+    /**
+     * Substring to match. Case-insensitive unless `caseSensitive` is set.
+     *
+     * A match never crosses a line, exactly like browser find. It DOES cross the
+     * several host nodes a JSX renderer makes for one interpolated line, so
+     * `<text>Hello {name}!</text>` matches `Hello Tommy`.
+     */
+    query?: string;
+    caseSensitive?: boolean;
+    /** Only match when neither neighbour is alphanumeric or `_`. */
+    wholeWord?: boolean;
+    /**
+     * Explicit `[start, end)` pairs in UTF-16 code units, the units `indexOf` and
+     * `RegExp.exec` return. They index the declaring subtree's text, with a
+     * newline between lines.
+     *
+     * A pair that splits a surrogate pair is rejected, not snapped. Native text
+     * (`<code>`, `<markdown>`, `<diff>`) is not part of that text; use `query`.
+     */
+    ranges?: Array<[number, number]>;
+    /** Any CSS colour. Defaults to the theme accent at 30% alpha. */
+    color?: string;
+    /** Colour for the match at `activeIndex`. Defaults to accent at 65%. */
+    activeColor?: string;
+    /** Index of the match to highlight differently, for a find-bar cursor. */
+    activeIndex?: number;
+    /**
+     * How many MATCHES come before this subtree in your document, so `activeIndex`
+     * is compared against `matchIndexOffset + n` for the nth match here.
+     *
+     * It is a match count, not a row index. Rows hold different numbers of
+     * matches, so a row index cannot stand in for it.
+     *
+     * Only needed for virtualized content: a `<virtual-list>` mounts a window of
+     * its rows, so native can only number what that window contains. Sum
+     * `findRanges` over the rows before `windowStart`. Defaults to 0.
+     *
+     * A negative or fractional value is refused and the whole spec is dropped,
+     * because a bad offset silently marks the wrong match.
+     */
+    matchIndexOffset?: number;
+    /** Corner radius of the wash. Defaults to 2. */
+    radius?: number;
+}
+export interface HostProps extends AriaProps, PointerEventProps, AnimationEventProps, ContentVisibilityEventProps, CompositionEventProps {
+    style?: StyleDesc;
+    /**
+     * A button went down on an element outside this one's logical subtree, for any
+     * button. Anchored descendants are inside; an overlay that merely paints above is
+     * outside. Runs at this element only, after `pointerdown` and `mousedown`, with
+     * `event.target` set to the pressed element (the one a ref gives) and
+     * `event.currentTarget` to this one. Use for "click outside to close".
+     */
+    onMouseDownOutside?: (event: DomEvent) => void;
+    /** Fires on the focused element, then on ancestors that declare it. A key
+     *  listener does not make an element focusable: give it a `tabIndex`. */
+    onKeyDown?: (event: KeyEvent) => void;
+    onKeyUp?: (event: KeyEvent) => void;
+    /** `focus`. Does not bubble. */
+    onFocus?: (event: DomEvent) => void;
+    /** `blur`. Does not bubble. */
+    onBlur?: (event: DomEvent) => void;
+    /** `focusin`. Bubbles to ancestors. Solid only. */
+    onFocusIn?: (event: DomEvent) => void;
+    /** `focusout`. Bubbles to ancestors. Solid only. */
+    onFocusOut?: (event: DomEvent) => void;
+    /**
+     * The scroll offset of an `overflow: "scroll"` or `"auto"` element changed, however it
+     * moved: wheel, scrollbar drag, keys, `scrollTo`, `scrollIntoView`, a smooth animation,
+     * or content shrinking under it. `scrollTop` and `scrollLeft` are read from the target,
+     * as on the DOM element. Does not bubble. The position at the first paint is not
+     * reported, only movement after it. Not for `<virtual-list>`; use `onVisibleRange`.
+     */
+    onScroll?: (event: ScrollEvent) => void;
+    /**
+     * The element's border box, reported after the first paint and each time its
+     * size changes: `width` and `height`, plus `x` and `y` in window coordinates.
+     * Moving without resizing reports nothing. Supported on `div` and `text`.
+     */
+    onLayout?: (event: DomEvent) => void;
+    /** The `src` decoded. Fires once per `src` change, with `naturalWidth` and
+     *  `naturalHeight` in pixels. An empty `src` fires nothing. */
+    onLoad?: (event: DomEvent) => void;
+    /** The `src` could not be read or decoded. Fires once per `src` change, with
+     *  the reason in `value`. */
+    onError?: (event: DomEvent) => void;
+    /** One edit of the text, the DOM `input`: see `HostInputEvent`. */
+    onChange?: (event: HostInputEvent) => void;
+    /** The DOM `submit` event of a descendant `<form>`, bubbling: see
+     *  `FormProps.onSubmit`. Not available on `<input>` or `<textarea>`: handle
+     *  Enter in `onKeyDown` and call `preventDefault()` to keep it from submitting
+     *  the form (`<input>`) or inserting a newline (`<textarea>`). */
+    onSubmit?: (event: DomEvent) => void;
+    /** A `required` control is empty when its form is submitted. Does not bubble. */
+    onInvalid?: (event: DomEvent) => void;
+    onToggleFile?: (event: DomEvent) => void;
+    onShowMore?: (event: DomEvent) => void;
+    onLineClick?: (event: DomEvent) => void;
+    onLinkClick?: (event: DomEvent) => void;
+    onVisibleRange?: (event: DomEvent) => void;
+    /** Match count changed for this element's `highlight`. See `matchCount`. */
+    onHighlight?: (event: DomEvent) => void;
+    /** A native `motion` track reached its current target. */
+    onMotionComplete?: (event: DomEvent) => void;
+    /** A `layout` glide began: the box moved, or took over a `layoutId`. */
+    onLayoutAnimationStart?: (event: DomEvent) => void;
+    /** A `layout` glide reached the box's layout position. Not fired for one a
+     *  newer glide replaced. */
+    onLayoutAnimationComplete?: (event: DomEvent) => void;
+    /**
+     * Paint a background wash behind matched or explicitly given text ranges.
+     *
+     * Scoped by position: on the root it searches the window, on a container it
+     * searches that container. The nearest declaration wins, so a nested
+     * `highlight` replaces an ancestor's for its own subtree.
+     */
+    highlight?: HighlightSpec | HighlightSpec[] | null;
+    /** Take keyboard focus when the element first mounts. Required for `<input>`:
+     *  without it, or a click, the field never receives key events. */
+    autoFocus?: boolean;
+    /**
+     * Makes the element focusable, like the DOM. `-1` is focusable by click or
+     * `focus()` but not by Tab. `0` joins the tab order in document order.
+     * Positive values come first, in ascending order, then the 0s. An enabled
+     * `<input>`/`<textarea>` is focusable without it. Key and focus listeners do
+     * not make an element focusable.
+     */
+    tabIndex?: number;
+    /**
+     * Makes the element a drag source, like the DOM attribute. A primary press on
+     * it or inside it that moves more than 4px starts a drag: `onDragStart` fires
+     * on the element, `onDrag` follows the pointer, `onDragEnter`/`onDragOver`/
+     * `onDragLeave`/`onDrop` fire on what is under it, and `onDragEnd` on the
+     * element when the drag ends. No pointer or mouse event fires meanwhile.
+     * `preventDefault()` in `onDragStart` cancels the drag. There is no drag image.
+     */
+    draggable?: boolean;
+    /**
+     * Like the DOM `inert`: the element and everything below it cannot be
+     * focused (no tab stop, `focus()` is a no-op, a focused descendant is
+     * blurred), is left out of the accessibility tree, cannot be selected, and
+     * takes no pointer input: no click, hover or wheel listener fires and
+     * clicks reach whatever lies behind it. A descendant cannot opt back in
+     * with `pointerEvents: "auto"`, `userSelect: "text"` or `tabIndex`.
+     * Inside an inert subtree `<input>` and `<textarea>` behave as `disabled`.
+     */
+    inert?: boolean;
+    /** The columns a `display: "table-cell"` element covers, like the DOM `colSpan`. At least 1,
+     *  at most 1000. */
+    colSpan?: number;
+    /** The rows a `display: "table-cell"` element covers, like the DOM `rowSpan`. 0 reaches the
+     *  last row of its row group. At most 65534. */
+    rowSpan?: number;
+    /** The columns a `display: "table-column"` or `"table-column-group"` element stands for, like
+     *  the DOM `span`. A column group with `table-column` children takes its columns from them. */
+    span?: number;
+    /**
+     * AccessKit role, as an ARIA token (`"button"`, `"heading"`).
+     * A node is in the accessibility tree only with both an id (always set)
+     * and a role. `"none"` / `"presentation"` produce no node.
+     */
+    role?: string;
+    /**
+     * DOM `id`. Exposed as `AXIdentifier` / UIA AutomationId, and what
+     * `htmlFor` and the `aria-*` id references (`aria-labelledby`,
+     * `aria-describedby`, ...) resolve against. An element without a `role`
+     * that one of those props names gets a group node, named by its text.
+     */
+    id?: string;
+    /** Stable locator id for automation. */
+    testId?: string;
+    /**
+     * Internal: set by `Button`, `Select` and the other components that stand in for a `<button>`
+     * or `<select>`, so their element matches the `disabled` and `enabled` state styles (and its
+     * ancestors `hasDisabled` and `hasEnabled`). `disabled` itself reaches native only on
+     * `<input>` and `<textarea>`, so a `<div disabled>` is not a form control, as in a DOM.
+     */
+    formControl?: "enabled" | "disabled";
+    /** Internal native animation description used by motion components. */
+    motion?: MotionProps;
+}
+export interface TextControlProps extends Omit<HostProps, "onSubmit"> {
+    /** External editor value. Native edits apply immediately and report through onChange. */
+    value?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    /**
+     * Like the DOM: not focusable, not a tab stop, no caret, no editing, no
+     * mouse, click or key events, the text in the theme's muted colour, and
+     * reported as disabled to assistive technology. Focus leaves the control
+     * when it becomes disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The most UTF-16 code units the user can type or paste. Longer input is
+     * cut to fit. A `value` set from code is kept whole, even when it is longer.
+     */
+    maxLength?: number;
+    /** The key this control's value is submitted under. A control without a
+     *  name is not part of its form's `FormData`. */
+    name?: string;
+    /** An empty control blocks its form's submission and gets `onInvalid`.
+     *  Not enforced while `disabled` or `readOnly`. */
+    required?: boolean;
+    theme?: GpuixTheme;
+}
+/** Values of `<input type>`. */
+export type InputType = "text" | "password" | "number" | "email" | "search" | "tel" | "url";
+export interface InputProps extends TextControlProps {
+    /**
+     * Defaults to `"text"`; an unknown value is `"text"` too.
+     *
+     * - `"password"` paints one bullet per character and disables copy and cut.
+     * - `"number"` makes ArrowUp and ArrowDown step the value by `step`, within
+     *   `min` and `max`, and report it through `onChange`. Typing is not
+     *   restricted: `onChange` reports exactly the text, even when it is not a
+     *   number. There is no spinner.
+     * - `"search"` is exposed to assistive technology as a search field.
+     * - `"email"`, `"tel"` and `"url"` behave as `"text"`.
+     */
+    type?: InputType;
+    /** `type="number"` only. A number or numeric string. */
+    min?: number | string;
+    /** `type="number"` only. A number or numeric string. */
+    max?: number | string;
+    /** `type="number"` only: the ArrowUp and ArrowDown step. Defaults to 1. */
+    step?: number | string;
+}
+export interface TextareaProps extends TextControlProps {
+    minRows?: number;
+    maxRows?: number;
+}
+/** The `submit` event of a `<form>`. */
+export type SubmitEvent = DomEvent & {
+    /** The `name` and `value` of every named, enabled `<input>` and `<textarea>`
+     *  in the form, in document order. */
+    formData: FormData;
+    /** The button that submitted the form. Always null: there is no submit button. */
+    submitter: null;
+};
+/** `<form>`: groups `<input>` and `<textarea>` controls and submits them together. */
+export interface FormProps extends Omit<HostProps, "onSubmit"> {
+    /**
+     * Enter in an `<input>` of this form, or `requestSubmit()`, once every
+     * `required` control has a value. Cancelable and bubbling, like the DOM; there
+     * is no navigation, so there is nothing to cancel. Enter in a `<textarea>`
+     * inserts a newline and never submits.
+     */
+    onSubmit?: (event: SubmitEvent) => void;
+}
+/** What a ref to a `<form>` carries. */
+export interface FormMethods {
+    /**
+     * Validate the form's controls, then submit it. Each empty `required` control
+     * gets `invalid`, and the first whose handlers did not call `preventDefault()`
+     * takes focus; the form is not submitted. Otherwise `submit` fires. The events
+     * are delivered before this returns.
+     */
+    requestSubmit(): void;
+}
+/** `<label>`: names a control and forwards a click to it. */
+export interface LabelProps extends HostProps {
+    /** The `id` of the control to label. Without it, the first `<input>` or
+     *  `<textarea>` inside the label is the control. */
+    htmlFor?: string;
+}
+export type VirtualListShared = AriaProps & {
+    /** No `hover` or `active`: gpui's `List` has no pressed or hovered style
+     *  state. Put those on a wrapping `<div>` instead. */
+    style?: Omit<StyleDesc, "hover" | "active">;
+    alignment?: "top" | "bottom";
+    followTail?: boolean;
+    overdraw?: number;
+    onVisibleRange?: (event: DomEvent) => void;
+    role?: string;
+    id?: string;
+    testId?: string;
+};
+/** A variable-height list that builds only rows near its viewport. */
+export type VirtualListProps = (VirtualListShared & {
+    estimatedItemHeight?: number;
+    itemCount?: never;
+    windowStart?: never;
+}) | (VirtualListShared & {
+    itemCount: number;
+    estimatedItemHeight: number;
+    windowStart?: number;
+});
+export interface ImgProps extends HostProps {
+    /** Filesystem path, `file://` URL, data URL, `blob:` URL (from
+     *  `URL.createObjectURL` in this process) or http(s) URL. */
+    src?: string;
+    /** CSS `object-fit`. Default `"contain"`. */
+    objectFit?: "fill" | "contain" | "cover" | "scaleDown" | "none";
+    alt?: string;
+}
+/** A web page in a native view of the window, after Electron's `<webview>` tag. 300 x 150 px
+ *  unless sized. It is a Tab stop, like a text control. */
+export interface WebviewProps extends HostProps {
+    /** The URL to show. Setting it to another value navigates; removing it leaves the page. */
+    src?: string;
+    /** Navigation began. */
+    onDidStartLoading?: (event: DomEvent) => void;
+    /** The page and its frames finished loading, or the load failed. */
+    onDidStopLoading?: (event: DomEvent) => void;
+    /** A navigation committed. `event.url` is the page's URL. */
+    onDidNavigate?: (event: DomEvent) => void;
+    /** The title changed: `event.title`, and `event.explicitSet` when the page set it. */
+    onPageTitleUpdated?: (event: DomEvent) => void;
+    /** A load failed: `event.errorCode` (an `NSURLError` code, not a Chromium net error),
+     *  `event.errorDescription` and `event.validatedUrl`. */
+    onDidFailLoad?: (event: DomEvent) => void;
+}
+/**
+ * A native view of a separate library, put between GPUI layers of the window. It is a `div`
+ * otherwise: `style`, children and events apply. The element's own background and border are
+ * drawn below the view and its children above it.
+ *
+ * `onAttach` hands the library the content `NSView` of the element's native surface, and the
+ * library adds its view as a subview that fills it. The surface fills the padding box of the
+ * element. It is cut to that box, and to the inner border radius, only where the element's
+ * `overflow` clips; an element that does not clip lets the view show as far as the clip of its
+ * ancestors reaches.
+ *
+ * Lifetime: the view is valid from `onAttach` until `onDetach` returns. `onDetach` is called
+ * synchronously, before the surface is taken down, when the element unmounts and when the window
+ * closes, and once for every `onAttach`. In `onDetach` the library MUST remove its view and
+ * release it and every reference to the pointer. Using the pointer after `onDetach` returns is
+ * undefined behaviour and can crash the process. `display: none` hides the surface and does not
+ * detach, and a keyed reorder does not detach. Keep `onDetach` set for as long as the element
+ * can be attached: removing it while attached means the library is never told.
+ *
+ * Only macOS has native surfaces. Elsewhere the element lays out and paints nothing, a warning
+ * is logged once, and `onAttach` is never called.
+ */
+export interface NativeviewProps extends HostProps {
+    /**
+     * Take pointer events into the library's view. Off by default: the surface takes none, and
+     * clicks and hover on the element and its children work as on a `div`. On, a point where GPUI
+     * has nothing above the surface goes to the library view's `hitTest:`, and a `nil` falls back
+     * to GPUI.
+     */
+    nativeEvents?: boolean;
+    /**
+     * The native surface exists. `view` is the pointer of its content `NSView`, as a `bigint`.
+     * Called once, asynchronously: it arrives after the first frame that has the surface, not
+     * during that frame. If the element is gone by then, it is not called at all. See the
+     * lifetime rule above. A throw is reported like any handler's and does not unpair
+     * `onDetach`.
+     */
+    onAttach?: (view: bigint) => void;
+    /**
+     * The surface is about to be taken down: remove and release the view added in `onAttach`.
+     * Runs synchronously, before the unmount or the window close continues. Called only when
+     * `onAttach` ran, or on every detach when there is no `onAttach`.
+     */
+    onDetach?: () => void;
+}
+/** Byte order of a `setImagePixels` buffer. Alpha is straight in both. */
+export type ImagePixelFormat = "rgba" | "bgra";
+export interface ImagePixelsOptions {
+    /** Default `"rgba"`. `"bgra"` is GPUI's native order and skips a per-pixel pass. */
+    format?: ImagePixelFormat;
+}
+/** The tags that are valid only inside an `<svg>`. */
+export type SvgChildType = "path" | "circle" | "ellipse" | "rect" | "line" | "polyline" | "polygon" | "g" | "defs" | "linearGradient" | "radialGradient" | "stop" | "clipPath" | "mask" | "use" | "symbol" | "pattern" | "marker" | "image" | "tspan" | "textPath" | "filter" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feFuncR" | "feFuncG" | "feFuncB" | "feFuncA" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence";
+/**
+ * SVG presentation attributes, camelCase as in React DOM: `strokeWidth`
+ * becomes `stroke-width`. Lengths are user units; a string passes through.
+ */
+export interface SvgPresentationProps {
+    fill?: string;
+    fillOpacity?: number | string;
+    fillRule?: "nonzero" | "evenodd";
+    clipRule?: "nonzero" | "evenodd";
+    stroke?: string;
+    strokeWidth?: number | string;
+    strokeOpacity?: number | string;
+    strokeLinecap?: "butt" | "round" | "square";
+    strokeLinejoin?: "miter" | "round" | "bevel";
+    strokeMiterlimit?: number | string;
+    /** A number, a list, or `"4 2"`. Measured in `pathLength` units when set. */
+    strokeDasharray?: number | string | number[];
+    strokeDashoffset?: number | string;
+    opacity?: number | string;
+    /** An SVG transform list, passed through: `"rotate(45 12 12)"`. */
+    transform?: string;
+    display?: string;
+    visibility?: string;
+    shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
+    /** `url(#id)` of a `<clipPath>` in the same `<svg>`. */
+    clipPath?: string;
+    /** `url(#id)` of a `<mask>` in the same `<svg>`. */
+    mask?: string;
+    /**
+     * `url(#id)` of a `<filter>` in the same `<svg>`. This is the SVG attribute,
+     * not the CSS `filter` style: a filter function such as `blur(2px)` is read
+     * by the rasteriser but only `url(#id)` is portable.
+     */
+    filter?: string;
+    /** `url(#id)` of a `<marker>`, drawn at the first vertex of a `path`, `line`, `polyline` or `polygon`. */
+    markerStart?: string;
+    /** `url(#id)` of a `<marker>`, drawn at every vertex but the first and last. */
+    markerMid?: string;
+    /** `url(#id)` of a `<marker>`, drawn at the last vertex. */
+    markerEnd?: string;
+    /** The CSS shorthand: sets `markerStart`, `markerMid` and `markerEnd` that are not set themselves. */
+    marker?: string;
+    /** `"stroke"` paints the stroke under the fill, as in CSS `paint-order`. */
+    paintOrder?: string;
+    imageRendering?: "auto" | "optimizeQuality" | "optimizeSpeed" | "smooth" | "high-quality" | "crisp-edges" | "pixelated";
+    fontFamily?: string;
+    fontSize?: number | string;
+    fontWeight?: number | string;
+    fontStyle?: "normal" | "italic" | "oblique";
+    fontVariant?: string;
+    fontStretch?: string;
+    textAnchor?: "start" | "middle" | "end";
+    dominantBaseline?: string;
+    alignmentBaseline?: string;
+    baselineShift?: number | string;
+    letterSpacing?: number | string;
+    wordSpacing?: number | string;
+    textDecoration?: string;
+    writingMode?: string;
+    direction?: "ltr" | "rtl";
+    unicodeBidi?: string;
+    textRendering?: "auto" | "optimizeSpeed" | "optimizeLegibility" | "geometricPrecision";
+    /** `"preserve"` keeps the white space of a text's string, otherwise it collapses as in a browser. */
+    xmlSpace?: "default" | "preserve";
+}
+/**
+ * What a shape's `style` takes: CSS animations. A shape is painted by its
+ * `<svg>`, so no layout or paint style applies to it; its `animation` runs
+ * keyframes made with `defineKeyframes` over the SVG properties CSS animates
+ * (see `SvgKeyframeStyle`).
+ */
+export type SvgShapeStyle = Pick<StyleDesc, "animation" | "animationName" | "animationDuration" | "animationTimingFunction" | "animationDelay" | "animationIterationCount" | "animationDirection" | "animationFillMode" | "animationPlayState">;
+/**
+ * Props shared by the shapes inside an `<svg>`. A shape is part of its svg's
+ * one image, so it has no layout box, paint style or pointer events: size and
+ * place the `<svg>`, and draw inside its `viewBox`. Its `style` takes CSS
+ * animations only, and the animation events fire from the shape.
+ */
+export interface SvgShapeProps extends SvgPresentationProps, AnimationEventProps {
+    style?: SvgShapeStyle;
+    testId?: string;
+    /** What `fill="url(#id)"`, `clipPath`, `mask` and `<use href="#id">` refer to. */
+    id?: string;
+    /** Internal native animation description used by `motion.*` shapes. */
+    motion?: SvgMotionProps;
+    /**
+     * The DOM attribute: the length the shape's dash values are measured in, so
+     * `pathLength={1}` with `strokeDasharray="0.5 1"` strokes half the outline.
+     * (Animate Framer's normalised `pathLength` through `motion`.)
+     */
+    pathLength?: number;
+}
+export interface SvgPathProps extends SvgShapeProps {
+    /** Path data. Relative commands are fine. */
+    d?: string;
+}
+export interface SvgCircleProps extends SvgShapeProps {
+    cx?: number | string;
+    cy?: number | string;
+    r?: number | string;
+}
+export interface SvgEllipseProps extends SvgShapeProps {
+    cx?: number | string;
+    cy?: number | string;
+    rx?: number | string;
+    ry?: number | string;
+}
+export interface SvgRectProps extends SvgShapeProps {
+    x?: number | string;
+    y?: number | string;
+    width?: number | string;
+    height?: number | string;
+    rx?: number | string;
+    ry?: number | string;
+}
+export interface SvgLineProps extends SvgShapeProps {
+    x1?: number | string;
+    y1?: number | string;
+    x2?: number | string;
+    y2?: number | string;
+}
+export interface SvgPolyProps extends SvgShapeProps {
+    /** `"x,y x,y ..."` */
+    points?: string;
+}
+export type SvgGroupProps = SvgShapeProps;
+/** `<defs>`: what its children define is drawn only where something refers to it. */
+export type SvgDefsProps = SvgShapeProps;
+/** `<linearGradient>` and `<radialGradient>`: `<stop>` children, referred to by `fill="url(#id)"`. */
+export interface SvgGradientProps extends SvgShapeProps {
+    x1?: number | string;
+    y1?: number | string;
+    x2?: number | string;
+    y2?: number | string;
+    cx?: number | string;
+    cy?: number | string;
+    r?: number | string;
+    fx?: number | string;
+    fy?: number | string;
+    gradientUnits?: "userSpaceOnUse" | "objectBoundingBox";
+    gradientTransform?: string;
+    spreadMethod?: "pad" | "reflect" | "repeat";
+    /** Another gradient whose stops and attributes this one inherits: `"#id"`. */
+    href?: string;
+}
+export interface SvgStopProps extends SvgShapeProps {
+    /** A number from 0 to 1, or a percentage. */
+    offset?: number | string;
+    stopColor?: string;
+    stopOpacity?: number | string;
+}
+export interface SvgClipPathProps extends SvgShapeProps {
+    clipPathUnits?: "userSpaceOnUse" | "objectBoundingBox";
+}
+export interface SvgMaskProps extends SvgShapeProps {
+    x?: number | string;
+    y?: number | string;
+    width?: number | string;
+    height?: number | string;
+    maskUnits?: "userSpaceOnUse" | "objectBoundingBox";
+    maskContentUnits?: "userSpaceOnUse" | "objectBoundingBox";
+}
+/** `<use>`: draws the element `href` names, here. */
+export interface SvgUseProps extends SvgShapeProps {
+    /** `"#id"` of an element in the same `<svg>`. */
+    href?: string;
+    x?: number | string;
+    y?: number | string;
+    width?: number | string;
+    height?: number | string;
+}
+/** `<symbol>`: a drawing that is shown only through a `<use>`. */
+export interface SvgSymbolProps extends SvgShapeProps {
+    viewBox?: string;
+    preserveAspectRatio?: string;
+}
+type SvgLength = number | string;
+/** `<pattern>`: tiles its children over a shape that has `fill="url(#id)"`. */
+export interface SvgPatternProps extends SvgShapeProps {
+    x?: SvgLength;
+    y?: SvgLength;
+    width?: SvgLength;
+    height?: SvgLength;
+    patternUnits?: "userSpaceOnUse" | "objectBoundingBox";
+    patternContentUnits?: "userSpaceOnUse" | "objectBoundingBox";
+    patternTransform?: string;
+    viewBox?: string;
+    preserveAspectRatio?: string;
+    /** Another pattern whose children and attributes this one inherits: `"#id"`. */
+    href?: string;
+}
+/** `<marker>`: a drawing placed at the vertices of a shape with `markerStart`, `markerMid` or `markerEnd`. */
+export interface SvgMarkerProps extends SvgShapeProps {
+    markerWidth?: SvgLength;
+    markerHeight?: SvgLength;
+    markerUnits?: "strokeWidth" | "userSpaceOnUse";
+    refX?: SvgLength;
+    refY?: SvgLength;
+    orient?: "auto" | "auto-start-reverse" | SvgLength;
+    viewBox?: string;
+    preserveAspectRatio?: string;
+}
+/**
+ * `<image>`: a raster or SVG picture. `href` is a `data:` URL, a `file://` URL
+ * or a file path. A `blob:` or `http(s):` URL is not loaded here, unlike
+ * `<img src>`: it is dropped with a warning.
+ */
+export interface SvgImageProps extends SvgShapeProps {
+    href?: string;
+    x?: SvgLength;
+    y?: SvgLength;
+    width?: SvgLength;
+    height?: SvgLength;
+    preserveAspectRatio?: string;
+}
+/**
+ * `<text>` inside an `<svg>`. Its string children are the text. Outside an
+ * `<svg>`, `<text>` is the host text element and takes none of these.
+ */
+export interface SvgTextProps extends SvgShapeProps {
+    x?: SvgLength | SvgLength[];
+    y?: SvgLength | SvgLength[];
+    dx?: SvgLength | SvgLength[];
+    dy?: SvgLength | SvgLength[];
+    /** One angle per character, in degrees. */
+    rotate?: number | string | number[];
+    textLength?: SvgLength;
+    lengthAdjust?: "spacing" | "spacingAndGlyphs";
+}
+/** `<tspan>`: a run of a `<text>` with its own position or text properties. */
+export type SvgTspanProps = SvgTextProps;
+/** `<textPath>`: text laid along the `<path>` that `href` names. */
+export interface SvgTextPathProps extends SvgShapeProps {
+    /** `"#id"` of a `<path>` in the same `<svg>`. */
+    href?: string;
+    startOffset?: SvgLength;
+    method?: "align" | "stretch";
+    spacing?: "auto" | "exact";
+}
+/**
+ * `<filter>`: `fe*` primitive children, referred to by `filter="url(#id)"`.
+ * The region is `x`, `y`, `width` and `height`, in `filterUnits`.
+ */
+export interface SvgFilterProps extends SvgShapeProps {
+    x?: SvgLength;
+    y?: SvgLength;
+    width?: SvgLength;
+    height?: SvgLength;
+    filterUnits?: "userSpaceOnUse" | "objectBoundingBox";
+    primitiveUnits?: "userSpaceOnUse" | "objectBoundingBox";
+    /** Another filter whose primitives and attributes this one inherits: `"#id"`. */
+    href?: string;
+}
+/** What every filter primitive takes: its subregion, the colour space it works in and a name. */
+export interface SvgFilterPrimitiveProps extends SvgShapeProps {
+    x?: SvgLength;
+    y?: SvgLength;
+    width?: SvgLength;
+    height?: SvgLength;
+    /** The name of an earlier `result`, or `SourceGraphic`, `SourceAlpha`. Default: the previous primitive's result. */
+    in?: string;
+    /** Names this primitive's output for a later `in` or `in2`. */
+    result?: string;
+    colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB";
+}
+export interface SvgFeBlendProps extends SvgFilterPrimitiveProps {
+    in2?: string;
+    mode?: "normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity";
+}
+export interface SvgFeColorMatrixProps extends SvgFilterPrimitiveProps {
+    type?: "matrix" | "saturate" | "hueRotate" | "luminanceToAlpha";
+    /** 20 numbers for `matrix`, one for `saturate` and `hueRotate`. */
+    values?: string | number | number[];
+}
+export type SvgFeComponentTransferProps = SvgFilterPrimitiveProps;
+/** `<feFuncR>`, `<feFuncG>`, `<feFuncB>` and `<feFuncA>`: one channel of an `<feComponentTransfer>`. */
+export interface SvgFeFuncProps extends SvgShapeProps {
+    type?: "identity" | "table" | "discrete" | "linear" | "gamma";
+    tableValues?: string | number[];
+    slope?: number | string;
+    intercept?: number | string;
+    amplitude?: number | string;
+    exponent?: number | string;
+    offset?: number | string;
+}
+export interface SvgFeCompositeProps extends SvgFilterPrimitiveProps {
+    in2?: string;
+    operator?: "over" | "in" | "out" | "atop" | "xor" | "arithmetic";
+    k1?: number | string;
+    k2?: number | string;
+    k3?: number | string;
+    k4?: number | string;
+}
+export interface SvgFeConvolveMatrixProps extends SvgFilterPrimitiveProps {
+    order?: number | string;
+    kernelMatrix?: string | number[];
+    divisor?: number | string;
+    bias?: number | string;
+    targetX?: number | string;
+    targetY?: number | string;
+    edgeMode?: "duplicate" | "wrap" | "none";
+    preserveAlpha?: boolean | "true" | "false";
+}
+export interface SvgFeDiffuseLightingProps extends SvgFilterPrimitiveProps {
+    surfaceScale?: number | string;
+    diffuseConstant?: number | string;
+    lightingColor?: string;
+}
+export interface SvgFeSpecularLightingProps extends SvgFilterPrimitiveProps {
+    surfaceScale?: number | string;
+    specularConstant?: number | string;
+    specularExponent?: number | string;
+    lightingColor?: string;
+}
+export interface SvgFeDisplacementMapProps extends SvgFilterPrimitiveProps {
+    in2?: string;
+    scale?: number | string;
+    xChannelSelector?: "R" | "G" | "B" | "A";
+    yChannelSelector?: "R" | "G" | "B" | "A";
+}
+/** A light source, the child of an `<feDiffuseLighting>` or `<feSpecularLighting>`. */
+export interface SvgFeDistantLightProps extends SvgShapeProps {
+    azimuth?: number | string;
+    elevation?: number | string;
+}
+export interface SvgFePointLightProps extends SvgShapeProps {
+    x?: number | string;
+    y?: number | string;
+    z?: number | string;
+}
+export interface SvgFeSpotLightProps extends SvgFePointLightProps {
+    pointsAtX?: number | string;
+    pointsAtY?: number | string;
+    pointsAtZ?: number | string;
+    specularExponent?: number | string;
+    limitingConeAngle?: number | string;
+}
+export interface SvgFeDropShadowProps extends SvgFilterPrimitiveProps {
+    dx?: number | string;
+    dy?: number | string;
+    /** One number, or `"x y"`. */
+    stdDeviation?: number | string | number[];
+    floodColor?: string;
+    floodOpacity?: number | string;
+}
+export interface SvgFeFloodProps extends SvgFilterPrimitiveProps {
+    floodColor?: string;
+    floodOpacity?: number | string;
+}
+export interface SvgFeGaussianBlurProps extends SvgFilterPrimitiveProps {
+    /** One number, or `"x y"`. */
+    stdDeviation?: number | string | number[];
+    edgeMode?: "duplicate" | "wrap" | "none";
+}
+export interface SvgFeImageProps extends SvgFilterPrimitiveProps {
+    /** Same sources as `<image href>`. */
+    href?: string;
+    preserveAspectRatio?: string;
+}
+export type SvgFeMergeProps = SvgFilterPrimitiveProps;
+/** `<feMergeNode in="...">`: one layer of an `<feMerge>`. */
+export interface SvgFeMergeNodeProps extends SvgShapeProps {
+    in?: string;
+}
+export interface SvgFeMorphologyProps extends SvgFilterPrimitiveProps {
+    operator?: "erode" | "dilate";
+    radius?: number | string | number[];
+}
+export interface SvgFeOffsetProps extends SvgFilterPrimitiveProps {
+    dx?: number | string;
+    dy?: number | string;
+}
+export type SvgFeTileProps = SvgFilterPrimitiveProps;
+export interface SvgFeTurbulenceProps extends SvgFilterPrimitiveProps {
+    type?: "fractalNoise" | "turbulence";
+    baseFrequency?: number | string | number[];
+    numOctaves?: number | string;
+    seed?: number | string;
+    stitchTiles?: "stitch" | "noStitch";
+}
+/**
+ * Props for `<svg>`, a vector graphic rasterised in full colour at device
+ * resolution as one image. `currentColor` is the element's computed `color`.
+ *
+ * Give it DOM-style children (`path circle ellipse rect line polyline polygon
+ * g image text tspan textPath`, and `defs linearGradient radialGradient stop
+ * clipPath mask use symbol pattern marker filter` with its `fe*` primitives for
+ * what shapes refer to by `id`) and a `viewBox`, or raw markup through `source` / `src`. Children win
+ * when both are given. `width` and `height` size the element unless `style`
+ * does; without either it has no size to paint into.
+ */
+export interface SvgProps extends HostProps, SvgPresentationProps {
+    /** Desktop local path. Use source for portable browser rendering. */
+    src?: string;
+    /** Raw SVG markup, rasterised in full colour at device resolution. */
+    source?: string;
+    /** `"minX minY width height"`: the coordinate system the children draw in. */
+    viewBox?: string;
+    preserveAspectRatio?: string;
+    width?: number | string;
+    height?: number | string;
+}
+/**
+ * Props for the <code> custom element — a syntax-highlighted code block.
+ *
+ * It paints **no surface of its own**: no fill, border, radius, padding or
+ * language header. `style` is the surface, and `fontFamily`, `fontSize`,
+ * `fontWeight`, `lineHeight` and `color` there beat the theme. Wrap it, or
+ * style it, to get a card.
+ *
+ * Rows are a fixed height, so `fontSize` alone scales that height by the
+ * theme's ratio. Lines never wrap and the block is its own horizontal
+ * scroller, so `whiteSpace` and `overflowX` do nothing.
+ */
+export interface CodeProps extends HostProps {
+    /** The source to display. Rendered one div per line at an exact line height. */
+    code?: string;
+    /** Language alias such as "ts", "rust", "bash". Beats `path` for detection. */
+    language?: string;
+    /** File path, used for extension-based language detection. */
+    path?: string;
+    showLineNumbers?: boolean;
+    theme?: GpuixTheme;
+}
+export interface DiffProps extends HostProps {
+    /** A unified git patch (the output of `git diff`). */
+    patch?: string;
+    /** Highlight the words that changed inside paired +/- lines. */
+    wordDiff?: boolean;
+    /** File paths rendered as a header only. Collapsed bodies cost one row. */
+    collapsedPaths?: string[];
+    /**
+      * Use the virtualized `list()` scroller. Off by default so a parent
+      * list can be the only scroll container. Requires a bounded height.
+     */
+    scroll?: boolean;
+    /** Paint this many line rows, then a Show more row. */
+    maxLines?: number;
+    theme?: GpuixTheme;
+    /** Fires when a file header is clicked. `event.value` is the file path. */
+    onToggleFile?: (event: DomEvent) => void;
+    /** Fires when Show more is clicked. `event.value` is the hidden line count. */
+    onShowMore?: (event: DomEvent) => void;
+    /** Fires when a diff line is clicked. `event.value` is the line text,
+     *  `event.oldLine` / `event.newLine` are its line numbers. */
+    onLineClick?: (event: DomEvent) => void;
+}
+export interface MarkdownProps extends HostProps {
+    /** GitHub-flavoured markdown. Tables, strikethrough and task lists are on. */
+    source?: string;
+    theme?: GpuixTheme;
+    /** Fires when a block containing links is clicked. `event.value` is the URL. */
+    onLinkClick?: (event: DomEvent) => void;
+}
+/** Payload of `<anchored onPlacement>`. */
+export interface AnchoredPlacementEvent extends DomEvent {
+    side: "top" | "right" | "bottom" | "left";
+    align: "start" | "center" | "end";
+    /** Width the layer can take without leaving the window, minus `snapMargin`. */
+    availableWidth: number;
+    /** Height the layer can take on its side of the trigger, minus `snapMargin` and `gap`. */
+    availableHeight: number;
+    /** Border-box size of the trigger. 0 when placed at a `position` point. */
+    anchorWidth: number;
+    anchorHeight: number;
+}
+export interface AnchoredProps extends HostProps {
+    position?: {
+        x: number;
+        y: number;
+    };
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
+    gap?: number;
+    anchor?: "topLeft" | "topCenter" | "topRight" | "rightCenter" | "bottomRight" | "bottomCenter" | "bottomLeft" | "leftCenter";
+    offset?: {
+        x: number;
+        y: number;
+    };
+    /** `"flip"` (default, `"switch"` is the same) opens on the opposite side of the trigger,
+     *  with the same `gap`, when the preferred side runs out of room, or on the side with more
+     *  room when neither fits, then shifts along the other axis to stay inside the window.
+     *  `"snap"` only shifts. Applies when `anchor` is not set. */
+    fit?: "flip" | "switch" | "snap";
+    /** Distance kept to the window edges, also taken off `available*`. */
+    snapMargin?: number;
+    /** Cap the layer's `maxWidth`/`maxHeight` to the room left in the window, natively on every
+     *  layout. Like floating-ui's `size` middleware. */
+    constrainToAvailable?: boolean;
+    /** Fires when side, alignment or the available room change (whole pixels). */
+    onPlacement?: (event: AnchoredPlacementEvent) => void;
+    deferred?: boolean;
+    priority?: number;
+    /** `"window"` covers the whole viewport and tracks resizes natively. Ignores
+     *  position, side, align, anchor, offset and fit. */
+    fill?: "window";
+}
+export type MutationHost = Pick<GpuixRenderer, "applyBatch">;
+export type WindowSizeHost = Pick<GpuixRenderer, "getWindowSize">;
+export type WindowInsetsHost = Pick<GpuixRenderer, "getWindowInsets">;
+export type SelectionHost = Pick<GpuixRenderer, "getSelectedText">;
+export type AppearanceHost = Pick<GpuixRenderer, "getAppearance">;
+/** The effective window appearance. `setAppearance` also takes `"system"`. */
+export type Appearance = "light" | "dark";
+/** The native motion value graph. Ids are chosen by the caller. */
+export type MotionValueHost = Pick<GpuixRenderer, "createMotionValue" | "createMotionTransform" | "createMotionFollower" | "createMotionSpring" | "disposeMotionValue" | "getMotionValue" | "getMotionValueVelocity" | "isMotionValueAnimating" | "setMotionValue" | "jumpMotionValue" | "animateMotionValue" | "stopMotionValue" | "pauseMotionValue" | "playMotionValue" | "seekMotionValue" | "setMotionValueSpeed" | "completeMotionValue" | "detachMotionValueClock" | "getMotionValuePlayback" | "setMotionValueListener">;
+/** `applyBatch` plus the live renderer methods a host may also expose. */
+export type NativeRenderer = MutationHost & Partial<MotionValueHost> & Partial<Pick<GpuixRenderer, "focusElement" | "blurElement" | "matchesFocus" | "focusNext" | "focusPrevious" | "getFocusedElementId" | "focusNextWithin" | "focusPreviousWithin" | "blur" | "setWindowKeyEvents" | "setWindowEventListeners" | "setSyncEventHandler" | "setWindowSelectionChange" | "setWindowAppearanceChange" | "setWindowMediaChange" | "getMediaFeatures" | "getElementBounds" | "probeElementBounds" | "getElementsAt" | "scrollTo" | "scrollToItem" | "scrollIntoView" | "setPointerCapture" | "releasePointerCapture" | "hasPointerCapture" | "clickElement" | "getAnimations" | "getSubtreeAnimations" | "getDocumentAnimations" | "getAnimation" | "pauseAnimation" | "playAnimation" | "cancelAnimation" | "finishAnimation" | "reverseAnimation" | "setAnimationCurrentTime" | "setAnimationPlaybackRate" | "updateAnimationPlaybackRate" | "setAnimationStartTime" | "getAnimationTimelineTime" | "releaseAnimation" | "forgetAnimation" | "getAnimationEffect" | "getAnimationKeyframes" | "updateAnimationTiming" | "cancelDrag" | "requestPointerLock" | "exitPointerLock" | "pointerLockElement" | "getScrollMetrics" | "scrollByKey" | "setImage" | "setStyleImage" | "failStyleImage" | "setImagePixels" | "selectText" | "setSelectionRange" | "getTextSelection" | "webviewCommand" | "webviewState" | "webviewExecuteJavascript" | "requestSubmit" | "getScrollOffset" | "getListScrollTop" | "getSelectedText" | "clearSelection" | "getPaintedHighlights" | "getWindowSize" | "getWindowInsets" | "setWindowTitle" | "registerFont" | "setAppearance" | "getAppearance" | "promptForPaths" | "writeClipboardText" | "readClipboardText" | "supportsEyeDropper" | "openEyeDropper" | "activateWindow" | "minimizeWindow" | "zoomWindow" | "toggleFullscreen" | "setDebugFrameOverlay" | "getDebugFrameOverlay" | "cycleDebugFrameOverlay" | "resetDebugFrameOverlayStats" | "getDebugFrameOverlayStats">>;
+/** Commit-phase mutation facade shared by framework adapters. */
+export interface MutationRenderer {
+    createElement(id: number, elementType: string): void;
+    destroyElement(id: number): Array<number>;
+    appendChild(parentId: number, childId: number): void;
+    insertBefore(parentId: number, childId: number, beforeId: number): void;
+    setStyle(id: number, style: object): void;
+    setText(id: number, content: string): void;
+    setEventListener(id: number, eventType: string, hasHandler: boolean): void;
+    setRoot(id: number): void;
+    setKeyboardFocusDim(enabled: boolean): void;
+    /**
+     * The style layer under every element's own style, a CSS `* { ... }` rule, or
+     * `null` for none. Use `pushUniversalStyle` rather than this, which lets
+     * several components share the one layer.
+     */
+    setUniversalStyle(style: StyleDesc | null): void;
+    setCustomProp(id: number, key: string, value: object | string | number | boolean | null): void;
+    /**
+     * Schedule the flush a queued mutation would have scheduled. An adapter that
+     * defers work to the flush (Solid destroys a removed node there) calls it when
+     * it has something to finish but nothing to enqueue yet. A queue with no
+     * scheduler leaves the flush to the caller.
+     */
+    requestFlush(): void;
+    flushMutations(): void;
+}
+export type DebugFrameOverlayMode = "hidden" | "minimal" | "full";
+/** Method syntax makes the parameter bivariant, so an `onKeyDown` typed with
+ *  `KeyEvent` can share the map. Dispatch builds the `KeyEvent` for key types. */
+export type HostEventHandler = {
+    handle(event: DomEvent): void;
+}["handle"];
+export type EventHandlerMap = Map<number, Map<string, HostEventHandler>>;
+/**
+ * A `keydown` / `keyup` event, the same object every handler of one keystroke
+ * sees, like one DOM event travelling from the focused element to `window`.
+ *
+ * `key`, `code`, `repeat`, `isComposing` and the `*Key` booleans follow DOM
+ * `KeyboardEvent`: `key` is `"Enter"`, `"ArrowDown"`, `" "`, `"F1"`, or the
+ * character produced (`"A"` for shift-a); `code` is the physical key (`"KeyA"`,
+ * `"Digit1"`), assuming a US QWERTY layout for printable keys. The mapping from
+ * GPUI key names lives in `events/key_names.rs`.
+ *
+ * `keyCode` and `which` are the legacy Windows virtual-key codes Chrome on
+ * macOS reports (65 for `a`, 13 for Enter, 229 for `"Process"`); `charCode`
+ * does not exist because there is no `keypress` event.
+ *
+ * On macOS a key the input method takes first has `key` `"Process"` and cannot
+ * be cancelled: `preventDefault()` does not stop the input method. `isComposing`
+ * is true while it has text marked.
+ */
+export interface KeyEvent extends DomEvent {
+    /** True after any handler of this keystroke called `preventDefault()`. */
+    readonly defaultPrevented: boolean;
+    /**
+     * Cancel the default action. On `keydown` that is native: no editor action
+     * (caret movement, deletion, Enter, Cmd+C), no text typed, and in JS, Tab
+     * moving focus and Escape closing the top overlay. Handlers run before native
+     * acts, except on Windows and Linux, where the key is delivered after the
+     * fact and only the JS defaults can be cancelled.
+     */
+    preventDefault(): void;
+    /** Skip the handlers further along the path, up to and including `window`.
+     *  The default action still runs, like the DOM. */
+    stopPropagation(): void;
+}
+export type WindowKeyEventHandler = (event: KeyEvent, renderer: NativeRenderer) => void;
+export type WindowEventHandler = (event: RootEvent, renderer: NativeRenderer) => void;
+export interface WindowKeyEventHandlers {
+    /** A `window` bubble listener for `keydown`, for this root only. Runs after
+     *  every element handler on the focused element's path. */
+    onKeyDown?: WindowKeyEventHandler;
+    /** A `window` bubble listener for `keyup`, for this root only. */
+    onKeyUp?: WindowKeyEventHandler;
+    /** Window-level text selection. Fires when the selected ranges change. */
+    onSelectionChange?: WindowEventHandler;
+    /** Window-level appearance. Fires when the effective appearance flips
+     *  between light and dark. `event.value` is `"light"` or `"dark"`. */
+    onAppearanceChange?: WindowEventHandler;
+    /**
+     * Tab and Shift+Tab move focus through `tabIndex` elements. Defaults to
+     * true. Call `event.preventDefault()` in any `onKeyDown` to keep one Tab.
+     */
+    tabNavigation?: boolean;
+    /**
+     * While a control has keyboard focus, every other focusable element dims.
+     * Defaults to true. Set false to draw your own focus look with
+     * `focusVisible`. Per element, use `style.keyboardFocusDim: false`.
+     */
+    keyboardFocusDim?: boolean;
+}
+export interface RootEventHandlers extends WindowKeyEventHandlers {
+    onEvent?: (event: EventPayload) => void;
+    onUncaughtError?: (error: Error, errorInfo: {
+        componentStack?: string;
+    }) => void;
+}
+export interface ElementIdAllocator {
+    nextElementId: number;
+}
+//# sourceMappingURL=host.d.ts.map