fiboui 2.8.5 → 2.9.0

package/dist/index.d.ts

@@ -512,9 +512,151 @@ export declare const FIBO_BREAKPOINTS: {
 export type BreakpointKey = keyof typeof FIBO_BREAKPOINTS;
 /** Resolve `md` → `(min-width: 768px)`, or pass through a raw media query. */
 export declare function toMediaQuery(query: BreakpointKey | string): string;
-declare abstract class GestureBuilder {
+interface Offset {
+	x: number;
+	y: number;
+}
+interface GestureEvent {
+	translation: Offset;
+	delta: Offset;
+	velocity: Offset;
+	location: Offset;
+	/** SwiftUI-style projection: translation + velocity × dt (≈150ms). */
+	predictedEndTranslation?: Offset;
+	/** location + (predictedEndTranslation − translation). */
+	predictedEndLocation?: Offset;
+}
+/** Axis lock for {@link DragGesture}. */
+export type DragAxis = "free" | "horizontal" | "vertical";
+type PanCallback = (event: GestureEvent) => void;
+/** SwiftUI `GestureMask` — which gestures participate. */
+export type GestureMask = "all" | "gesture" | "subviews" | "none";
+export type TapLocation = {
+	x: number;
+	y: number;
+};
+export type MagnifyValue = {
+	magnification: number;
+	velocity?: number;
+};
+export type RotateValue = {
+	radians: number;
+	degrees: number;
+};
+export declare abstract class GestureBuilder {
+	protected _enabled: boolean;
+	protected _including: GestureMask;
+	/** When true, wrappers must not stopPropagation (simultaneous). */
+	protected _bubble: boolean;
+	/** @internal Fired when the gesture successfully recognizes (Sequence / Exclusive). */
+	protected _onRecognized?: () => void;
+	enabled(value?: boolean): this;
+	/** SwiftUI `gesture(_:including:)`. */
+	including(mask: GestureMask): this;
+	/** Internal — set by SimultaneousGesture / `.simultaneousGesture`. */
+	bubble(value?: boolean): this;
+	/** @internal Used by SequenceGesture / ExclusiveGesture. */
+	onRecognized(callback: () => void): this;
+	/** @internal */
+	protected notifyRecognized(): void;
 	abstract wrap(children: React$1.ReactNode): React$1.ReactNode;
 }
+declare class DragGestureBuilder extends GestureBuilder {
+	private _onStart?;
+	private _onUpdate?;
+	private _onEnd?;
+	private _minimumDistance;
+	private _axis;
+	/** SwiftUI `minimumDistance` — pixels before the drag begins (default 10). */
+	minimumDistance(px: number): this;
+	/** Lock drag to one axis (`free` | `horizontal` | `vertical`). */
+	axis(value: DragAxis): this;
+	onStart(callback: PanCallback): this;
+	onUpdate(callback: PanCallback): this;
+	onEnd(callback: PanCallback): this;
+	wrap(children: React$1.ReactNode): React$1.ReactNode;
+}
+declare class TapGestureBuilder extends GestureBuilder {
+	private _count;
+	private _reportLocation;
+	private _onStart?;
+	private _onEnd?;
+	/** SwiftUI `TapGesture(count:)` — 2 = double-tap. */
+	count(n: number): this;
+	/** SwiftUI `SpatialTapGesture` — `onEnd` receives `{ x, y }` in view coords. */
+	spatial(value?: boolean): this;
+	onStart(callback: () => void): this;
+	onEnd(callback: ((location?: TapLocation) => void) | (() => void)): this;
+	wrap(children: React$1.ReactNode): React$1.ReactNode;
+}
+/** SwiftUI `SpatialTapGesture` — tap that reports location. */
+export declare function SpatialTapGesture(): TapGestureBuilder;
+declare class LongPressGestureBuilder extends GestureBuilder {
+	private _duration;
+	private _maximumDistance;
+	private _onStart?;
+	private _onEnd?;
+	private _onPressingChanged?;
+	duration(ms: number): this;
+	/** Abort if finger moves farther than this (SwiftUI `maximumDistance`). */
+	maximumDistance(px: number): this;
+	onStart(callback: () => void): this;
+	onEnd(callback: () => void): this;
+	/** SwiftUI `onPressingChanged`. */
+	onPressingChanged(callback: (pressing: boolean) => void): this;
+	wrap(children: React$1.ReactNode): React$1.ReactNode;
+}
+declare class MagnifyGestureBuilder extends GestureBuilder {
+	private _onStart?;
+	private _onUpdate?;
+	private _onEnd?;
+	onStart(callback: (v: MagnifyValue) => void): this;
+	onUpdate(callback: (v: MagnifyValue) => void): this;
+	onEnd(callback: (v: MagnifyValue) => void): this;
+	wrap(children: React$1.ReactNode): React$1.ReactNode;
+}
+declare class RotateGestureBuilder extends GestureBuilder {
+	private _onStart?;
+	private _onUpdate?;
+	private _onEnd?;
+	onStart(callback: (v: RotateValue) => void): this;
+	onUpdate(callback: (v: RotateValue) => void): this;
+	onEnd(callback: (v: RotateValue) => void): this;
+	wrap(children: React$1.ReactNode): React$1.ReactNode;
+}
+declare class SimultaneousGestureBuilder extends GestureBuilder {
+	private readonly _gestures;
+	constructor(_gestures: GestureBuilder[]);
+	wrap(children: React$1.ReactNode): React$1.ReactNode;
+}
+declare class ExclusiveGestureBuilder extends GestureBuilder {
+	private readonly _gestures;
+	constructor(_gestures: GestureBuilder[]);
+	wrap(children: React$1.ReactNode): React$1.ReactNode;
+}
+declare class SequenceGestureBuilder extends GestureBuilder {
+	private readonly _first;
+	private readonly _second;
+	constructor(_first: GestureBuilder, _second: GestureBuilder);
+	wrap(children: React$1.ReactNode): React$1.ReactNode;
+}
+export declare function DragGesture(options?: {
+	minimumDistance?: number;
+	axis?: DragAxis;
+}): DragGestureBuilder;
+export declare function TapGesture(): TapGestureBuilder;
+export declare function LongPressGesture(options?: {
+	duration?: number;
+	maximumDistance?: number;
+}): LongPressGestureBuilder;
+export declare function MagnifyGesture(): MagnifyGestureBuilder;
+/** Alias of MagnifyGesture (older SwiftUI name). */
+export declare function MagnificationGesture(): MagnifyGestureBuilder;
+export declare function RotateGesture(): RotateGestureBuilder;
+export declare function SimultaneousGesture(...gestures: GestureBuilder[]): SimultaneousGestureBuilder;
+export declare function ExclusiveGesture(...gestures: GestureBuilder[]): ExclusiveGestureBuilder;
+/** SwiftUI `SequenceGesture(first, second)`. */
+export declare function SequenceGesture(first: GestureBuilder, second: GestureBuilder): SequenceGestureBuilder;
 /**
  * Full interaction-effect catalog (Hover.css–inspired names, fiboui-owned CSS).
  * NOT a vendor of Hover.css — reimplemented for commercial use inside fiboui.
@@ -797,1123 +939,192 @@ export declare const When: {
 export type When = (typeof When)[keyof typeof When];
 /** Fluent callback, a style object, or a raw CSS declaration string (list rows). */
 export type WhenStyle = React$1.CSSProperties | string | ((builder: any) => void);
-export interface SpringOptions {
-	stiffness?: number;
-	damping?: number;
-	mass?: number;
-}
+/** `.animate(Motion.fadeIn)`. Preset list lives in `motionCss`. */
+export declare const Motion: {
+	readonly pop: "pop";
+	readonly blur: "blur";
+	readonly fadeIn: "fadeIn";
+	readonly fadeOut: "fadeOut";
+	readonly fade: "fade";
+	readonly slideUp: "slideUp";
+	readonly slideDown: "slideDown";
+	readonly slideLeft: "slideLeft";
+	readonly slideRight: "slideRight";
+	readonly scaleIn: "scaleIn";
+	readonly scaleOut: "scaleOut";
+	readonly scale: "scale";
+	readonly blurIn: "blurIn";
+	readonly blurOut: "blurOut";
+	readonly bounce: "bounce";
+};
+export type Motion = (typeof Motion)[keyof typeof Motion];
+/** `.hover(h => h.effect(Effect.sweepToRight))`. */
+declare const Effect$1: {
+	readonly trim: "trim";
+	readonly pop: "pop";
+	readonly push: "push";
+	readonly fade: "fade";
+	readonly rotate: "rotate";
+	readonly grow: "grow";
+	readonly shrink: "shrink";
+	readonly pulse: "pulse";
+	readonly pulseGrow: "pulseGrow";
+	readonly pulseShrink: "pulseShrink";
+	readonly bounceIn: "bounceIn";
+	readonly bounceOut: "bounceOut";
+	readonly growRotate: "growRotate";
+	readonly float: "float";
+	readonly sink: "sink";
+	readonly bob: "bob";
+	readonly hang: "hang";
+	readonly skew: "skew";
+	readonly skewForward: "skewForward";
+	readonly skewBackward: "skewBackward";
+	readonly wobbleHorizontal: "wobbleHorizontal";
+	readonly wobbleVertical: "wobbleVertical";
+	readonly wobbleToBottomRight: "wobbleToBottomRight";
+	readonly wobbleToTopRight: "wobbleToTopRight";
+	readonly wobbleTop: "wobbleTop";
+	readonly wobbleBottom: "wobbleBottom";
+	readonly wobbleSkew: "wobbleSkew";
+	readonly buzz: "buzz";
+	readonly buzzOut: "buzzOut";
+	readonly forward: "forward";
+	readonly backward: "backward";
+	readonly nudge: "nudge";
+	readonly backPulse: "backPulse";
+	readonly sweepToRight: "sweepToRight";
+	readonly sweepToLeft: "sweepToLeft";
+	readonly sweepToBottom: "sweepToBottom";
+	readonly sweepToTop: "sweepToTop";
+	readonly bounceToRight: "bounceToRight";
+	readonly bounceToLeft: "bounceToLeft";
+	readonly bounceToBottom: "bounceToBottom";
+	readonly bounceToTop: "bounceToTop";
+	readonly radialOut: "radialOut";
+	readonly radialIn: "radialIn";
+	readonly rectangleIn: "rectangleIn";
+	readonly rectangleOut: "rectangleOut";
+	readonly shutterInHorizontal: "shutterInHorizontal";
+	readonly shutterOutHorizontal: "shutterOutHorizontal";
+	readonly shutterInVertical: "shutterInVertical";
+	readonly shutterOutVertical: "shutterOutVertical";
+	readonly iconBack: "iconBack";
+	readonly iconForward: "iconForward";
+	readonly iconDown: "iconDown";
+	readonly iconUp: "iconUp";
+	readonly iconSpin: "iconSpin";
+	readonly iconDrop: "iconDrop";
+	readonly iconFade: "iconFade";
+	readonly iconFloatAway: "iconFloatAway";
+	readonly iconSinkAway: "iconSinkAway";
+	readonly iconGrow: "iconGrow";
+	readonly iconShrink: "iconShrink";
+	readonly iconPulse: "iconPulse";
+	readonly iconPulseGrow: "iconPulseGrow";
+	readonly iconPulseShrink: "iconPulseShrink";
+	readonly iconPush: "iconPush";
+	readonly iconPop: "iconPop";
+	readonly iconBounce: "iconBounce";
+	readonly iconRotate: "iconRotate";
+	readonly iconGrowRotate: "iconGrowRotate";
+	readonly iconFloat: "iconFloat";
+	readonly iconSink: "iconSink";
+	readonly iconBob: "iconBob";
+	readonly iconHang: "iconHang";
+	readonly iconWobbleHorizontal: "iconWobbleHorizontal";
+	readonly iconWobbleVertical: "iconWobbleVertical";
+	readonly iconBuzz: "iconBuzz";
+	readonly iconBuzzOut: "iconBuzzOut";
+	readonly borderFade: "borderFade";
+	readonly hollow: "hollow";
+	readonly rippleOut: "rippleOut";
+	readonly rippleIn: "rippleIn";
+	readonly outlineOut: "outlineOut";
+	readonly outlineIn: "outlineIn";
+	readonly roundCorners: "roundCorners";
+	readonly underlineFromLeft: "underlineFromLeft";
+	readonly underlineFromCenter: "underlineFromCenter";
+	readonly underlineFromRight: "underlineFromRight";
+	readonly reveal: "reveal";
+	readonly underlineReveal: "underlineReveal";
+	readonly overlineFromLeft: "overlineFromLeft";
+	readonly overlineFromCenter: "overlineFromCenter";
+	readonly overlineFromRight: "overlineFromRight";
+	readonly overlineReveal: "overlineReveal";
+	readonly shadowGrow: "shadowGrow";
+	readonly shadowFloat: "shadowFloat";
+	readonly shadowGlow: "shadowGlow";
+	readonly shadowRadial: "shadowRadial";
+	readonly boxShadowOutset: "boxShadowOutset";
+	readonly boxShadowInset: "boxShadowInset";
+	readonly lift: "lift";
+	readonly glow: "glow";
+	readonly bubbleTop: "bubbleTop";
+	readonly bubbleRight: "bubbleRight";
+	readonly bubbleBottom: "bubbleBottom";
+	readonly bubbleLeft: "bubbleLeft";
+	readonly bubbleFloatTop: "bubbleFloatTop";
+	readonly bubbleFloatRight: "bubbleFloatRight";
+	readonly bubbleFloatBottom: "bubbleFloatBottom";
+	readonly bubbleFloatLeft: "bubbleFloatLeft";
+	readonly curlTopLeft: "curlTopLeft";
+	readonly curlTopRight: "curlTopRight";
+	readonly curlBottomRight: "curlBottomRight";
+	readonly curlBottomLeft: "curlBottomLeft";
+};
+type Effect$1 = (typeof Effect$1)[keyof typeof Effect$1];
+export declare const Align: {
+	readonly start: "start";
+	readonly center: "center";
+	readonly end: "end";
+	readonly stretch: "stretch";
+	readonly baseline: "baseline";
+	readonly between: "between";
+	readonly around: "around";
+	readonly evenly: "evenly";
+};
+export type Align = (typeof Align)[keyof typeof Align];
 /**
- * CSS `linear()` spring sampled once. stiffness/damping/mass change the curve.
- * The browser interpolates — no rAF on the CSS path.
+ * Words `.width()` / `.height()` / `.frame()` already accept.
+ * A number or `'320px'` skips this.
+ *
+ * `Size.infinity` ≡ SwiftUI `.infinity` — fill the parent's proposed size.
  */
-export declare function springEase(options?: SpringOptions): string;
-export declare function resolveCssEase(value: string, spring?: SpringOptions): string;
-export interface ThemeColors {
-	primary: string;
-	primaryVariant?: string;
-	primaryContainer?: string;
-	onPrimaryContainer?: string;
-	secondary: string;
-	secondaryVariant?: string;
-	secondaryContainer?: string;
-	onSecondaryContainer?: string;
-	tertiary?: string;
-	onTertiary?: string;
-	tertiaryContainer?: string;
-	onTertiaryContainer?: string;
-	background: string;
-	surface: string;
-	surfaceVariant?: string;
-	onSurfaceVariant?: string;
-	error: string;
-	errorContainer?: string;
-	onErrorContainer?: string;
-	success?: string;
-	warning?: string;
-	info?: string;
-	onPrimary: string;
-	onSecondary: string;
-	onBackground: string;
-	onSurface: string;
-	onError: string;
-	/** Borders / hairlines — maps to `--fibo-outline`. */
-	outline?: string;
-	outlineVariant?: string;
-	/** Maps to `--fibo-surface-container-low` (M3 card surfaces). */
-	surfaceContainerLow?: string;
-}
-export interface ThemeTypography {
-	h1: TextStyle;
-	h2: TextStyle;
-	h3: TextStyle;
-	h4: TextStyle;
-	h5: TextStyle;
-	h6: TextStyle;
-	body: TextStyle;
-	caption: TextStyle;
-	label: TextStyle;
-}
-interface ThemeSpacing {
-	xs: string;
-	sm: string;
-	md: string;
-	lg: string;
-	xl: string;
-}
-interface ThemeBorderRadius {
-	/** Maps to `--fibo-radius-xs` when set (CSS sheets already define it). */
-	xs?: string;
-	sm: string;
-	md: string;
-	lg: string;
-	/** Maps to `--fibo-radius-xl` when set (CSS sheets already define it). */
-	xl?: string;
-	full: string;
-}
-interface ThemeShadows {
-	sm: string;
-	md: string;
-	lg: string;
-}
-export interface FiboTheme {
-	name: FiboThemeName;
-	colors: ThemeColors;
-	typography: ThemeTypography;
-	spacing: ThemeSpacing;
-	borderRadius: ThemeBorderRadius;
-	shadows: ThemeShadows;
-	fontFamily: string;
-}
-/** Built-in presets. `noir` is the dark editorial theme (site / dense apps). */
-export declare const FIBO_THEMES: {
-	readonly material: FiboTheme;
-	readonly cupertino: FiboTheme;
-	readonly web: FiboTheme;
-	readonly noir: FiboTheme;
+export declare const Size: {
+	readonly full: "full";
+	readonly screen: "screen";
+	readonly fit: "fit";
+	readonly min: "min";
+	readonly max: "max";
+	/** SwiftUI `.infinity` — expand to the space the parent proposes (`100%`). */
+	readonly infinity: "infinity";
 };
-export type FiboThemePreset = keyof typeof FIBO_THEMES;
-export type ThemeInput = FiboTheme | FiboThemePreset;
-export declare function resolveTheme(input: ThemeInput): FiboTheme;
-export type FiboThemePatch = {
-	name?: string;
-	colors?: Partial<ThemeColors>;
-	typography?: Partial<Record<keyof ThemeTypography, Partial<TextStyle>>>;
-	spacing?: Partial<ThemeSpacing>;
-	borderRadius?: Partial<ThemeBorderRadius>;
-	shadows?: Partial<ThemeShadows>;
-	fontFamily?: string;
+export type Size = (typeof Size)[keyof typeof Size];
+/** @deprecated Prefer `Size.infinity` — same token. */
+export declare const infinity: "infinity";
+/** Theme spacing. `.padding(Space.md)`, `.gap(Space.sm)`, `.height(Space.xl)`. */
+export declare const Space: {
+	readonly xs: "var(--fibo-space-xs)";
+	readonly sm: "var(--fibo-space-sm)";
+	readonly md: "var(--fibo-space-md)";
+	readonly lg: "var(--fibo-space-lg)";
+	readonly xl: "var(--fibo-space-xl)";
 };
-/** Flutter-style copyWith / SwiftUI environment override. */
-export declare function copyWithTheme(base: FiboTheme, patch: FiboThemePatch): FiboTheme;
-/** Alias — SwiftUI/Flutter mental model. */
-export declare const extendTheme: typeof copyWithTheme;
-/** Flat CSS custom properties for a theme (inline style or :root block). */
-export declare function themeToCssVars(theme: FiboTheme): Record<string, string>;
-/** Inline style object safe for React (CSSProperties + custom props). */
-export declare function themeToInlineStyle(theme: FiboTheme): React$1.CSSProperties;
-/** CSS rule body for `.fibo-theme-{name}` — SSR-safe, no useEffect. */
-export declare function themeToCssRule(theme: FiboTheme): string;
-export declare function themeClassName(theme: FiboTheme): string;
-declare enum Colors {
-	Primary = "primary",
-	OnPrimary = "on-primary",
-	PrimaryContainer = "primary-container",
-	OnPrimaryContainer = "on-primary-container",
-	Secondary = "secondary",
-	OnSecondary = "on-secondary",
-	SecondaryContainer = "secondary-container",
-	OnSecondaryContainer = "on-secondary-container",
-	Tertiary = "tertiary",
-	OnTertiary = "on-tertiary",
-	TertiaryContainer = "tertiary-container",
-	OnTertiaryContainer = "on-tertiary-container",
-	Error = "error",
-	OnError = "on-error",
-	Success = "success",
-	Warning = "warning",
-	Info = "info",
-	Background = "background",
-	OnBackground = "on-background",
-	Surface = "surface",
-	OnSurface = "on-surface",
-	SurfaceVariant = "surface-variant",
-	OnSurfaceVariant = "on-surface-variant",
-	Outline = "outline",
-	Transparent = "transparent",
-	Black = "black",
-	White = "white"
-}
-declare enum ShadowSize {
-	Sm = "sm",
-	Md = "md",
-	Lg = "lg",
-	Xl = "xl",
-	Xl2 = "2xl"
-}
-declare enum ShadowPreset {
-	Card = "card",
-	Button = "button",
-	Modal = "modal",
-	Float = "float",
-	Inner = "inner"
-}
-declare enum ShadowDirection {
-	Top = "top",
-	Bottom = "bottom",
-	Left = "left",
-	Right = "right",
-	TopBottom = "top-bottom",
-	LeftRight = "left-right",
-	Vertical = "vertical",
-	Horizontal = "horizontal",
-	All = "all"
-}
-type ShadowConfig = ShadowSize | ShadowPreset | string | 0 | null | [
-	string,
-	number?
-] | [
-	ShadowDirection | string,
-	ShadowSize | string
-] | [
-	ShadowDirection | string,
-	string
-] | [
-	ShadowDirection | string,
-	string,
-	number?
-] | [
-	ShadowDirection | string,
-	ShadowSize | string,
-	string,
-	number?
-];
+export type Space = (typeof Space)[keyof typeof Space];
+/** Theme radii. `.borderRadius(Radius.md)`. */
+export declare const Radius: {
+	readonly xs: "var(--fibo-radius-xs)";
+	readonly sm: "var(--fibo-radius-sm)";
+	readonly md: "var(--fibo-radius-md)";
+	readonly lg: "var(--fibo-radius-lg)";
+	readonly xl: "var(--fibo-radius-xl)";
+	readonly full: "var(--fibo-radius-full)";
+};
+export type Radius = (typeof Radius)[keyof typeof Radius];
 /**
- * Callback form of `.hover()` / `.focus()` / … Contextual typing uses the *last*
- * overload, so this signature must stay last or `h` becomes implicit `any` inside `.map()`.
- */
-export type PseudoStateFn = (builder: PseudoStateBuilder) => void | PseudoStateBuilder;
-declare abstract class FiboBuilder {
-	/** @internal Extra DOM props forwarded to the host element. */
-	protected _props: Record<string, any>;
-	protected _style: React$1.CSSProperties;
-	protected _cssStyles: React$1.CSSProperties;
-	protected _classNames: string[];
-	protected _children: React$1.ReactNode[];
-	/** Resolved theme for this subtree (SwiftUI Environment / Flutter Theme). */
-	protected _theme?: FiboTheme;
-	protected _state: Map<string, any>;
-	protected _providers: Map<string, any>;
-	protected _observers: Set<Observable<any>>;
-	protected _signals: Set<BindableSignal<any>>;
-	/** Explicit `.bindSignal()` / `.observer()` owns nested reads. A direct wire does not. */
-	protected _ownsReads: boolean;
-	/** @internal Direct `method(signal.value)` calls replayed when that signal changes. */
-	protected _replays: Array<() => void>;
-	protected _isObserver: boolean;
-	protected _gesture?: GestureBuilder;
-	protected _animationConfig?: Partial<AnimationOptions>;
-	protected _animatedProps: Map<string, Signal<any>>;
-	protected _transforms: string[];
-	protected _transitionClass?: string;
-	/** True while transition class was auto-managed for hover/effect presets (expandable). */
-	protected _autoEffectTransition: boolean;
-	protected _effectTransitionProps: string[];
-	/**
-	 * When true, getStyle() promotes background/border shorthands to longhands and
-	 * (optionally) stamps a resting translate3d so pseudo transforms ease cleanly.
-	 */
-	protected _smoothSurface: boolean;
-	protected _smoothNeedsRestTransform: boolean;
-	protected _motionClass?: string;
-	protected _staggerMs?: number;
-	protected _reveal?: {
-		preset: string;
-		once?: boolean;
-		rootMargin?: string;
-		threshold?: number;
-	};
-	protected _scrollProgress: boolean;
-	protected _viewTransition?: string;
-	protected _reducedMotion: "reduce" | "never";
-	protected _usesCssMotion: boolean;
-	protected _explicitScrollMargin: boolean;
-	/** Shrink-wrap: skip the default `w-full` / `self-stretch` on Row and Column. */
-	protected _hug: boolean;
-	/**
-	 * Unset every CSS property on this component and what it renders inside.
-	 * Chain `.style()`, `.px()`, `.flex()` and the rest after this to put back only what you want.
-	 */
-	protected _resetStyle: boolean;
-	/** Kebab box longhands already stamped (`padding-left`, …) so later shorthand cannot clobber them. */
-	protected _boxLonghands: Set<string>;
-	resetStyle(): this;
-	protected isReset(): boolean;
-	hug(): this;
-	protected isHug(): boolean;
-	id(value: string): this;
-	/**
-	 * Scroll target. Same as `.id()`, plus `scroll-margin-top` so the section
-	 * is not hidden under a sticky header. Pair with `scrollTo('#name')`.
-	 */
-	anchor(value: string): this;
-	/**
-	 * Explicit `scroll-margin-top` on this node (overrides the sticky CSS variable
-	 * that `.anchor()` applies).
-	 */
-	scrollMargin(value: number | string): this;
-	/** Stamp a class onto the host. Used by PseudoStateBuilder (hashed `:hover` etc.). */
-	addClassName(name: string): this;
-	/**
-	 * React list key. After this is called, React reads the key as a string
-	 * on both the builder element and the inner host wrapper.
-	 * Builders are valid elements — you do not need `.build()`.
-	 */
-	key(value: string | number): this;
-	private setBoxLonghand;
-	private setBoxShorthand;
-	paddingHorizontal(value: string | number): this;
-	paddingVertical(value: string | number): this;
-	padding(value: string | number): this;
-	marginHorizontal(value: string | number): this;
-	marginVertical(value: string | number): this;
-	margin(value: string | number): this;
-	/** Inline layout wins over a host that hardcodes flex on the element (Form, Scaffold). */
-	protected layoutStyle(patch: React$1.CSSProperties): this;
-	/** Last write of a key lives in one bag so getStyle() does not let earlier `.css()` beat later `.style()`. */
-	private dropConflictingKeys;
-	private trackBoxLonghandsFrom;
-	flexDirection(direction: "row" | "column" | "row-reverse" | "column-reverse"): this;
-	/** Flutter `textDirection`. */
-	textDirection(direction: "ltr" | "rtl"): this;
-	/** Flutter `textBaseline`. Both modes align on the flex baseline. */
-	textBaseline(baseline: "alphabetic" | "ideographic"): this;
-	/** Flutter `clipBehavior`. `none` shows overflow; the other two clip. */
-	clip(behavior: "none" | "hardEdge" | "antiAlias"): this;
-	/**
-	 * Flutter `mainAxisSize`. `min` hugs the current flex direction.
-	 * `max` stretches along that same axis.
-	 */
-	mainAxisSize(size: "min" | "max"): this;
-	zIndex(value: number): this;
-	alignItems(alignment: "start" | "center" | "end" | "stretch" | "baseline"): this;
-	alignSelf(alignment: "start" | "center" | "end" | "stretch" | "baseline" | "auto"): this;
-	flexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): this;
-	/**
-	 * Main-axis distribution. Accepts Tailwind shortcuts (`between`) and CSS/Flutter
-	 * names (`space-between` / `spaceBetween`).
-	 */
-	justifyContent(justify: "start" | "center" | "end" | "between" | "around" | "evenly" | "space-between" | "space-around" | "space-evenly" | "spaceBetween" | "spaceAround" | "spaceEvenly"): this;
-	/** True when flexDirection is column / column-reverse (default is row). */
-	protected isVerticalFlex(): boolean;
-	/**
-	 * Both screen axes. `.align(Align.center)` and `.align('center')` do the same.
-	 * `between` packs the main axis and starts the cross axis.
-	 */
-	align(alignment: AlignAxis): this;
-	/**
-	 * Horizontal (screen X) alignment. Same meaning on Row and Column:
-	 * left / center / right of the container — not “main axis”.
-	 */
-	alignX(alignment: AlignAxis): this;
-	/**
-	 * Vertical (screen Y) alignment. Same meaning on Row and Column:
-	 * top / center / bottom of the container — not “cross axis”.
-	 */
-	alignY(alignment: AlignAxis): this;
-	protected applyMainAlign(alignment: AlignAxis | string): this;
-	protected applyCrossAlign(alignment: AlignAxis | string): this;
-	flex(value?: number | string): this;
-	grid(): this;
-	inlineFlex(): this;
-	inlineGrid(): this;
-	block(): this;
-	inlineBlock(): this;
-	hidden(): this;
-	center(): this;
-	/** Center on the horizontal screen axis (uses `.alignX('center')`). */
-	centerX(): this;
-	/** Center on the vertical screen axis (uses `.alignY('center')`). */
-	centerY(): this;
-	spaceBetween(): this;
-	spaceAround(): this;
-	spaceEvenly(): this;
-	fill(): this;
-	fillWidth(): this;
-	fillHeight(): this;
-	square(size: number | string): this;
-	circle(): this;
-	opacity(value: number): this;
-	p(value: number | string): this;
-	px(value: number | string): this;
-	py(value: number | string): this;
-	paddingX(value: number | string): this;
-	paddingY(value: number | string): this;
-	m(value: number | string): this;
-	mx(value: number | string): this;
-	my(value: number | string): this;
-	marginX(value: number | string): this;
-	marginY(value: number | string): this;
-	bg(color: string | Colors): this;
-	text(color: string | Colors): this;
-	color(value: string | Colors): this;
-	private resolveSemanticColor;
-	shadow(config?: ShadowConfig): this;
-	/**
-	 * Breakpoint styles compiled to CSS `@media` (same engine as `.md()`).
-	 * Tiers stay mutually exclusive: mobile `<768`, tablet `768–1023`, desktop `≥1024`.
-	 * No `window.innerWidth` — hydrate-safe.
-	 */
-	responsive(styles: ResponsiveStyles): this;
-	/**
-	 * CSS `@media` (min-width or a raw query). Compiles to a class — no resize JS.
-	 *
-	 * @example Box().padding(8).media('md', { padding: 16 }).media('(prefers-color-scheme: dark)', { backgroundColor: '#111' })
-	 */
-	media(query: BreakpointKey | string, styles: React$1.CSSProperties): this;
-	private registerMediaStyles;
-	sm(styles: React$1.CSSProperties): this;
-	md(styles: React$1.CSSProperties): this;
-	lg(styles: React$1.CSSProperties): this;
-	xl(styles: React$1.CSSProperties): this;
-	rounded(value: string | number): this;
-	borderRadius(value: string | number): this;
-	borderColor(value: string): this;
-	/**
-	 * A passed size is a lock: `min-*` plus `flex-shrink: 0`, so a flex parent
-	 * (the Scaffold body) cannot divide the viewport across these children.
-	 * `400`, `'320px'`, `Size.full`, and `Space.md` all count. `flex(1)` afterwards
-	 * opts back into sharing space.
-	 */
-	private lockAxis;
-	width(value: string | number): this;
-	paint(property: string, value: string): this;
-	height(value: string | number): this;
-	gap(value: string | number): this;
-	clean(): this;
-	borderInput(color?: string, focusColor?: string): this;
-	weight(value: string | number): this;
-	onClick(handler: (event: React$1.MouseEvent<any>) => void): this;
-	state<T>(key: string, initialValue: T): this;
-	getState<T>(key: string): T | undefined;
-	setState<T>(key: string, value: T): this;
-	provide<T>(key: string, value: T): this;
-	consume<T>(key: string): T | undefined;
-	observer(options?: string | number | {
-		key?: string | number;
-	}): this;
-	observe<T>(observable: Observable<T>): this;
-	bindSignal<T>(signal: BindableSignal<T>): this;
-	/**
-	 * @internal Wire a direct `method(signal.value)` to this node.
-	 * Does not claim reads that happen later in a children function.
-	 */
-	adoptWire(signals: Subscribable<unknown>[], replay: () => void): void;
-	/** @internal */
-	runReplays(): void;
-	translateX(value: Signal<number> | number): this;
-	translateY(value: Signal<number> | number): this;
-	scale(value: Signal<number> | number): this;
-	rotate(degrees: Signal<number> | number): this;
-	gesture(gesture: GestureBuilder): this;
-	animation(config: Partial<AnimationOptions>): this;
-	protected hasStateManagement(): boolean;
-	className(className: string): this;
-	classNames(classNames: string[]): this;
-	css(styles: React$1.CSSProperties): this;
-	style(style: React$1.CSSProperties): this;
-	props(props: Record<string, any>): this;
-	protected _transitionDuration: number;
-	protected _transitionEasing: string;
-	protected _transitionDelay: number;
-	protected _transitionProperties: string[];
-	/**
-	 * Apply CSS transition
-	 *
-	 * Overload 1: String syntax
-	 * Example: .transition('all 0.2s ease-in-out')
-	 *
-	 * Overload 2: Shorthand with parameters
-	 * Example: .transition('all', 200, 'ease-out')
-	 * Example: .transition('all', 200, 'ease-out', 50)
-	 */
-	transition(value: string): this;
-	transition(properties: string | string[], duration: number, easing?: string, delay?: number): this;
-	/**
-	 * Set transition duration in milliseconds
-	 * Example: .duration(200) → 200ms
-	 */
-	duration(ms: number): this;
-	/**
-	 * Set transition easing function
-	 * Example: .easing('ease-in-out')
-	 */
-	easing(value: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "spring" | string): this;
-	/** Alias of `.easing()`. `'spring'` becomes CSS `linear()`. */
-	ease(value: string): this;
-	/**
-	 * Set transition delay in milliseconds
-	 * Example: .delay(100) → 100ms delay
-	 */
-	delay(ms: number): this;
-	/**
-	 * Set which properties to transition
-	 * Example: .properties(['color', 'transform'])
-	 */
-	properties(props: string[]): this;
-	/**
-	 * Apply the built transition to the element
-	 */
-	protected _applyTransition(): void;
-	private replaceTransitionClass;
-	/**
-	 * CSS enter/exit preset. Compiles to `@keyframes` — no rAF.
-	 * @example Box().animate('fadeIn').duration(300).ease('spring')
-	 */
-	animate(preset: MotionPreset | string, options?: {
-		duration?: number;
-		ease?: string;
-		delay?: number;
-		from?: number | string;
-		stiffness?: number;
-		damping?: number;
-		mass?: number;
-	}): this;
-	animate(custom: CustomMotion): this;
-	/** CSS `linear()` spring. Works on `.animate()` and `.transition()` / `.hover()`. */
-	spring(options?: SpringOptions): this;
-	reducedMotion(mode?: "reduce" | "never"): this;
-	press(callback?: (builder: PseudoStateBuilder) => void | PseudoStateBuilder): this;
-	/**
-	 * Shortcut: `.hover(h => h.effect(name))`.
-	 * Named interaction effect on `:hover` (forward, float, grow, nudge, …).
-	 */
-	hoverEffect(name: string): this;
-	/**
-	 * Shortcut: `.press(p => p.effect(name))` (maps to `:active`).
-	 */
-	pressEffect(name: string): this;
-	/**
-	 * Shortcut: `.focus(f => f.effect(name))`.
-	 */
-	focusEffect(name: string): this;
-	/**
-	 * Shortcut: `.active(a => a.effect(name))`.
-	 */
-	activeEffect(name: string): this;
-	/**
-	 * Shortcut: `.groupHover(h => h.effect(name))`.
-	 */
-	groupHoverEffect(name: string): this;
-	focusVisible(): PseudoStateBuilder;
-	focusVisible(callback: PseudoStateFn): this;
-	stagger(ms: number): this;
-	/** Scroll-reveal: IntersectionObserver toggles `.fibo-inview`. */
-	reveal(preset?: string | {
-		preset?: string;
-		once?: boolean;
-		rootMargin?: string;
-		threshold?: number;
-	}, options?: {
-		once?: boolean;
-		rootMargin?: string;
-		threshold?: number;
-	}): this;
-	/** Alias of `.reveal()` for scroll-triggered presets. */
-	onScroll(preset?: string): this;
-	/** CSS `animation-timeline: view()` / `scroll()`; IntersectionObserver reveal is the fallback. */
-	scrollTimeline(kind?: "view" | "scroll"): this;
-	scrollProgress(): this;
-	smoothScroll(): this;
-	scrollSnap(axis?: "x" | "y" | "both"): this;
-	scrollSnapAlign(align?: "start" | "center" | "end"): this;
-	sticky(top?: number | string | boolean): this;
-	/**
-	 * Publish `--fibo-sticky-offset` on `:root` so `.anchor()` / `html` scroll-padding
-	 * clear this bar. Header uses the real bar height.
-	 */
-	protected publishStickyOffset(value: number | string): void;
-	viewTransition(name: string): this;
-	/** Default `:focus-visible` ring. Pass a callback to customize. */
-	focusRing(color?: string): this;
-	protected ensureInteractiveTransition(): void;
-	/**
-	 * Prepare resting styles + transition so pseudo-state longhands (bg/border/transform)
-	 * interpolate instead of snapping. Safe to call repeatedly from PseudoStateBuilder.
-	 * @internal
-	 */
-	prepareSmoothInteraction(properties: string[]): void;
-	/** @internal Convert inline background/border shorthands → longhands. */
-	promoteSurfaceLonghands(): void;
-	/** @internal Stamp translate3d(0,0,0) when no resting transform exists. */
-	ensureRestTransform(): void;
-	/**
-	 * Ensure the base element transitions the properties an interaction effect needs.
-	 * Expands an auto-managed transition; no-ops if the caller set `.transition(...)`
-	 * explicitly or a motion animation class is present.
-	 * @internal Used by PseudoStateBuilder.effect() and hover/press shortcuts.
-	 */
-	ensureEffectTransition(properties: string[]): void;
-	/**
-	 * Apply a theme to this node and descendants (CSS vars inherit).
-	 * Fluent: `.theme("noir")` | `.theme(noirTheme)` | `.theme(extendTheme(webTheme, {…}))`.
-	 * SSR-safe: class + inline vars on first paint (no useEffect).
-	 */
-	theme(input: ThemeInput): this;
-	/** Prefer dark/light system chrome for native controls under this subtree. */
-	colorScheme(scheme: "light" | "dark" | "light dark"): this;
-	hover(): PseudoStateBuilder;
-	hover(callback: PseudoStateFn): this;
-	/**
-	 * Paint for a `When` state. Hover / focus / active / visited / disabled
-	 * write a CSS pseudo on this node. `on` / `off` are for Checkbox and Switch.
-	 *
-	 * ```ts
-	 * Row().when(When.hover, (s) => s.bg('#c8ff00'))
-	 * ```
-	 */
-	when(state: When, style: WhenStyle): this;
-	focus(): PseudoStateBuilder;
-	focus(callback: PseudoStateFn): this;
-	active(): PseudoStateBuilder;
-	active(callback: PseudoStateFn): this;
-	visited(): PseudoStateBuilder;
-	visited(callback: PseudoStateFn): this;
-	disabledState(): PseudoStateBuilder;
-	disabledState(callback: PseudoStateFn): this;
-	focusWithin(): PseudoStateBuilder;
-	focusWithin(callback: PseudoStateFn): this;
-	firstChild(): PseudoStateBuilder;
-	firstChild(callback: PseudoStateFn): this;
-	lastChild(): PseudoStateBuilder;
-	lastChild(callback: PseudoStateFn): this;
-	groupHover(): PseudoStateBuilder;
-	groupHover(callback: PseudoStateFn): this;
-	groupFocus(): PseudoStateBuilder;
-	groupFocus(callback: PseudoStateFn): this;
-	groupActive(): PseudoStateBuilder;
-	groupActive(callback: PseudoStateFn): this;
-	groupFocusWithin(): PseudoStateBuilder;
-	groupFocusWithin(callback: PseudoStateFn): this;
-	group(): this;
-	protected _childFunction?: () => FiboChild | FiboChild[];
-	children(children: FiboChildren): this;
-	protected getClassName(): string;
-	protected getStyle(): React$1.CSSProperties;
-	protected processChildren(): React$1.ReactNode[];
-	protected getChildFunction(): (() => FiboChild | FiboChild[]) | undefined;
-	/**
-	 * @deprecated Builders are React elements. Returning or nesting the builder is enough.
-	 * `.build()` still assembles the host tree for older call sites.
-	 */
-	abstract build(): React$1.ReactElement;
-}
-type KnownKeys<T> = {
-	[K in keyof T]: string extends K ? never : number extends K ? never : K;
-} extends {
-	[_ in keyof T]: infer U;
-} ? U : never;
-type StyleBuilder<T> = T & LogicalAxes & {
-	[K in KnownKeys<React$1.CSSProperties>]-?: (value: React$1.CSSProperties[K]) => StyleBuilder<T>;
-} & React$1.ReactElement;
-interface SignalLike<T> {
-	value: T;
-	subscribe: (listener: (val: T) => void) => () => void;
-}
-declare class FluentValueBuilder<T> {
-	private _signal;
-	private _loading?;
-	private _error?;
-	private _builder?;
-	constructor(_signal: SignalLike<T>);
-	loading(component: React$1.ReactNode | (() => React$1.ReactNode)): this;
-	error(component: (error: Error | unknown) => React$1.ReactNode): this;
-	builder(fn: (value: T) => React$1.ReactNode): this;
-	children(fn: (value: T) => React$1.ReactNode): this;
-	build(): React$1.ReactElement;
-}
-export declare function ValueBuilder<T>(signal: SignalLike<T>): FluentValueBuilder<T>;
-type PresenceShow = boolean | BindableSignal<boolean>;
-export interface PresenceProps {
-	show: PresenceShow;
-	enter?: MotionPreset | string;
-	exit?: MotionPreset | string;
-	duration?: number;
-	reducedMotion?: "reduce" | "never";
-	children?: React$1.ReactNode;
-}
-declare class PresenceBuilder extends FiboBuilder {
-	private _show;
-	private _enter;
-	private _exit;
-	constructor(show?: PresenceShow);
-	show(value: PresenceShow): this;
-	enter(preset: MotionPreset | string): this;
-	exit(preset: MotionPreset | string): this;
-	duration(ms: number): this;
-	build(): React$1.ReactElement;
-}
-declare const presenceBuilder: (show?: PresenceShow | undefined) => StyleBuilder<PresenceBuilder>;
-export declare function Presence(show?: PresenceShow): ReturnType<typeof presenceBuilder>;
-export declare function Presence(props: PresenceProps): React$1.ReactElement;
-export declare namespace Presence {
-	var displayName: string;
-}
-export interface RevealProps {
-	preset?: string;
-	once?: boolean;
-	rootMargin?: string;
-	threshold?: number;
-	forceMotion?: boolean;
-	/** @deprecated Ignored — view-timeline never skips IO (was forcing fibo-inview on load). */
-	preferTimeline?: boolean;
-	/** CSS vars (`--fibo-dur`, `--fibo-ease`, `--fibo-delay`) for the reveal wrapper. */
-	style?: React$1.CSSProperties;
-	children?: React$1.ReactNode;
-}
-/** IntersectionObserver toggles `.fibo-inview`. Motion is CSS — no rAF. */
-export declare function Reveal({ preset, once, rootMargin, threshold, forceMotion, style, children, }: RevealProps): React$1.DetailedReactHTMLElement<{
-	ref: React$1.RefObject<HTMLDivElement>;
-	className: string;
-	style: React$1.CSSProperties | undefined;
-	"data-fibo-reveal": string;
-}, HTMLDivElement>;
-interface ScrollProgressProps {
-	children: React$1.ReactElement;
-}
-/** Binds `--fibo-progress` from scroll when `animation-timeline: scroll()` is missing. No rAF. */
-export declare function ScrollProgress({ children }: ScrollProgressProps): React$1.DetailedReactHTMLElement<{
-	ref: React$1.RefObject<HTMLDivElement>;
-	"data-fibo-scroll-progress": string;
-	style: {
-		display: "contents";
-	};
-}, HTMLDivElement>;
-type ScrollToOptions$1 = {
-	behavior?: ScrollBehavior;
-	block?: ScrollLogicalPosition;
-	/** Also set `location.hash` (in-page anchor navigation). */
-	hash?: boolean;
-};
-/**
- * Smooth-scroll to an element id / selector / Element.
- * Pass `hash: true` to update the URL hash (replaces the old site-only `goHash`).
- */
-declare function scrollTo$1(target: string | Element, options?: ScrollToOptions$1): void;
-export declare function startViewTransition(update: () => void): void;
-export declare function supportsViewTimeline(): boolean;
-export declare function supportsScrollTimeline(): boolean;
-/** Write text to the system clipboard. Returns false if unavailable. */
-export declare function writeClipboard(text: string): Promise<boolean>;
-/** Open a URL (default: new tab + noopener). Canonical name. */
-declare function open$1(url: string, options?: {
-	target?: "_blank" | "_self";
-	features?: string;
-}): void;
-/** Alias — name the fibogrid site already used. Do not remove (no break). */
-export declare const openExternal: typeof open$1;
-/**
- * In-page hash jump. Name the site already used.
- * Implementation = existing `scrollTo(id, { hash: true })` (no parallel logic).
- */
-export declare function goHash(id: string, options?: {
-	behavior?: ScrollBehavior;
-	block?: ScrollLogicalPosition;
-}): void;
-export type HotkeyChord = {
-	key: string;
-	meta?: boolean;
-	ctrl?: boolean;
-	alt?: boolean;
-	shift?: boolean;
-	/** Require meta OR ctrl (⌘K / Ctrl+K). */
-	metaOrCtrl?: boolean;
-	preventDefault?: boolean;
-	when?: () => boolean;
-	run: () => void;
-};
-/** Bind global keydown chords. Returns unsubscribe. SSR-safe. */
-export declare function bindHotkeys(chords: HotkeyChord[]): () => void;
-/**
- * AUTO-GENERATED by scripts/gen-interaction-fx.mjs — do not edit by hand.
- * Fiboui-owned interaction effects (Hover.css–inspired names, not a vendor dump).
- */
-export declare const FIBO_INTERACTION_FX_CSS: string;
-/**
- * Inject the full interaction-effect sheet once.
- * Idempotent via StyleManager cache — must NOT use a module flag, or
- * `endSsrRequest()` / `StyleManager.reset()` would skip re-injection on the
- * next SSR request and drop FX CSS from the snapshot.
- */
-export declare function ensureInteractionFxCss(): void;
-export declare function ensureMotionCss(): void;
-export declare function getMotionCss(): string;
-export declare function getCss(): string;
-/** `<style id="fibo-dynamic-styles">` HTML. Call **after** `renderToString` so rules are collected. */
-export declare function getStyleTag(): string;
-/**
- * Reset the StyleManager singleton between SSR requests (Next.js / custom servers).
- * Call after the response CSS has been captured when using `<FiboStyles />` mid-tree.
- */
-export declare function endSsrRequest(): void;
-/**
- * Inject collected CSS into a document. Place as a **later sibling** of the app
- * so registrations from children run first during SSR.
- */
-export declare function FiboStyles(): React$1.ReactElement;
-export declare function MotionStyles(): React$1.ReactElement;
-export type FiboPageBuild = () => FiboChild | React$1.ReactNode;
-type FiboPageMeta = {
-	title?: string;
-	description?: string;
-};
-export type FiboPageOptions = {
-	/** Append `<FiboStyles />` after the tree (SSR dynamic CSS). Default true. */
-	styles?: boolean;
-	/** SSR `<title>` / `<meta name="description">` (React 19 hoists into `<head>`). */
-	meta?: FiboPageMeta;
-};
-type FiboPageComponent = React$1.ComponentType & {
-	meta?: FiboPageMeta;
-};
-/**
- * Next/Vite page helper — **zero JSX** in app code, SSR-safe.
- *
- * Next App Router still SSRs Client Components: HTML is rendered on the server,
- * then hydrated. Import `fiboui/style.css` once from `app/layout.tsx` (or the
- * Vite entry) so the base sheet is in the document on first paint.
- *
- * ```ts
- * // app/page.tsx — Server Component (no 'use client')
- * import { page, Column, Text } from 'fiboui'
- *
- * export default page(() =>
- *   Column().gap(12).children([Text('Hello')])
- * )
- * ```
- *
- * App Router resolves `fiboui` via the `react-server` export (static builders).
- * `build()` runs during RSC render so StyleManager rules exist before `<FiboStyles />`.
- */
-export declare function page(build: FiboPageBuild, options?: FiboPageOptions): FiboPageComponent;
-/**
- * Alias of `page()`. Prefer `export default page(() => …)` from a Server Component.
- */
-export declare const createPage: typeof page;
-/**
- * Wrap any builder / node with `FiboStyles` without JSX.
- *
- * ```ts
- * export default function Home() {
- *   return withFiboStyles(Column().children([Text('Hi')]))
- * }
- * ```
- */
-export declare function withFiboStyles(child: FiboChild | React$1.ReactNode): React$1.ReactElement;
-/**
- * Current viewport width. Hydration uses 1024 (desktop) so the first client
- * render matches SSR; the real width arrives after mount.
- * Prefer `.md()` / `.responsive()` (CSS `@media`) over this hook.
- */
-export declare function useViewportWidth(): number;
-type Constructor<T = any> = new (...args: any[]) => T;
-type Factory<T = any> = () => T;
-type Provider<T = any> = Constructor<T> | Factory<T> | T;
-type Token<T = any> = string | symbol | Constructor<T>;
-export interface RouteDefinition {
-	path: string;
-	component: () => FiboBuilder;
-	meta?: Record<string, any>;
-}
-export interface SidebarConfig {
-	label: string;
-	icon?: any;
-	path: string;
-	order?: number;
-}
-export interface FiboContext {
-	registerService<T>(token: Token<T>, implementation: Provider<T>): void;
-	registerStore(store: unknown, name?: string): void;
-	getStore?<T = unknown>(name: string): T | undefined;
-	registerRoute(route: RouteDefinition): void;
-	registerSidebarItem(item: SidebarConfig): void;
-	registerTopbarAction(component: () => FiboBuilder): void;
-	registerOverlay(component: () => FiboBuilder): void;
-}
-type PluginSetup = (context: FiboContext) => void;
-export interface FiboPlugin {
-	name: string;
-	version?: string;
-	setup: PluginSetup;
-	teardown?: PluginSetup;
-}
-export declare class FiboAppBuilder {
-	private _rootComponent;
-	private _rootElement;
-	private _plugins;
-	private _reactRoot;
-	private _installed;
-	use(plugin: FiboPlugin): this;
-	plugins(pluginsList: FiboPlugin[]): this;
-	root(component: React$1.ComponentType): this;
-	mount(elementId: string, options?: {
-		strict?: boolean;
-	}): () => void;
-	unmount(): void;
-	private build;
-}
-export declare const FiboApp: () => FiboAppBuilder;
-/** Turn a builder (or already-built node) into a React node. */
-export declare function toElement(node: FiboChild): React$1.ReactNode;
-/**
- * Optional wrapper. Builders are already React elements:
- *
- * ```tsx
- * function App() {
- *   return Button('Save').onPress(save);
- * }
- * ```
- */
-export declare function Fibo({ children }: {
-	children: FiboChild;
-}): React$1.ReactElement;
-/**
- * Mount a page that returns a builder — no `.build()` on the root.
- *
- * ```ts
- * function App() {
- *   return Column().children([Text('Hi')]);
- * }
- * mount('#root', App);
- * ```
- */
-export declare function mount(target: string | Element, app: (() => FiboChild) | FiboChild, options?: {
-	strict?: boolean;
-}): Root;
-/**
- * Client: process singleton via `getInstance()`.
- * SSR: wrap a request in `run()` for an isolated instance, or call `reset()`
- * between requests. `endSsrRequest()` also resets this manager when `window`
- * is missing (Node). FiboApp is `'use client'` and uninstalls on unmount.
- */
-export declare class PluginManager implements FiboContext {
-	private static instance;
-	private static scopeStack;
-	/** Shared across `run()` scopes — the DI container is process-wide. */
-	private static serviceRefs;
-	private plugins;
-	/** `setup()` in flight — not yet in `plugins`, so Map order stays completion/LIFO. */
-	private installing;
-	private routes;
-	private sidebarItems;
-	private topbarActions;
-	private overlays;
-	private stores;
-	private storeSeq;
-	private constructor();
-	static getInstance(): PluginManager;
-	/** Isolated manager for one SSR request (or test). Client `getInstance()` is unchanged. */
-	static run<T>(fn: () => T): T;
-	/** Drop every plugin (runs teardown) and replace the process singleton. */
-	static reset(): void;
-	/** @see reset */
-	static resetForTests(): void;
-	has(name: string): boolean;
-	use(plugin: FiboPlugin): this;
-	uninstall(name: string): boolean;
-	private uninstallAllSafe;
-	private createOwned;
-	private dropOwned;
-	registerService<T>(token: Token<T>, implementation: Provider<T>): void;
-	registerStore(store: unknown, name?: string): void;
-	private registerStoreKeyed;
-	getStore<T = unknown>(name: string): T | undefined;
-	getStores(): Map<string, unknown>;
-	registerRoute(route: RouteDefinition): void;
-	registerSidebarItem(item: SidebarConfig): void;
-	registerTopbarAction(component: () => FiboBuilder): void;
-	registerOverlay(component: () => FiboBuilder): void;
-	getRoutes(): RouteDefinition[];
-	getSidebarItems(): SidebarConfig[];
-	getTopbarActions(): (() => FiboBuilder)[];
-	getOverlays(): (() => FiboBuilder)[];
-}
-/** `.animate(Motion.fadeIn)`. Preset list lives in `motionCss`. */
-export declare const Motion: {
-	readonly pop: "pop";
-	readonly blur: "blur";
-	readonly fadeIn: "fadeIn";
-	readonly fadeOut: "fadeOut";
-	readonly fade: "fade";
-	readonly slideUp: "slideUp";
-	readonly slideDown: "slideDown";
-	readonly slideLeft: "slideLeft";
-	readonly slideRight: "slideRight";
-	readonly scaleIn: "scaleIn";
-	readonly scaleOut: "scaleOut";
-	readonly scale: "scale";
-	readonly blurIn: "blurIn";
-	readonly blurOut: "blurOut";
-	readonly bounce: "bounce";
-};
-export type Motion = (typeof Motion)[keyof typeof Motion];
-/** `.hover(h => h.effect(Effect.sweepToRight))`. */
-declare const Effect$1: {
-	readonly trim: "trim";
-	readonly pop: "pop";
-	readonly push: "push";
-	readonly fade: "fade";
-	readonly rotate: "rotate";
-	readonly grow: "grow";
-	readonly shrink: "shrink";
-	readonly pulse: "pulse";
-	readonly pulseGrow: "pulseGrow";
-	readonly pulseShrink: "pulseShrink";
-	readonly bounceIn: "bounceIn";
-	readonly bounceOut: "bounceOut";
-	readonly growRotate: "growRotate";
-	readonly float: "float";
-	readonly sink: "sink";
-	readonly bob: "bob";
-	readonly hang: "hang";
-	readonly skew: "skew";
-	readonly skewForward: "skewForward";
-	readonly skewBackward: "skewBackward";
-	readonly wobbleHorizontal: "wobbleHorizontal";
-	readonly wobbleVertical: "wobbleVertical";
-	readonly wobbleToBottomRight: "wobbleToBottomRight";
-	readonly wobbleToTopRight: "wobbleToTopRight";
-	readonly wobbleTop: "wobbleTop";
-	readonly wobbleBottom: "wobbleBottom";
-	readonly wobbleSkew: "wobbleSkew";
-	readonly buzz: "buzz";
-	readonly buzzOut: "buzzOut";
-	readonly forward: "forward";
-	readonly backward: "backward";
-	readonly nudge: "nudge";
-	readonly backPulse: "backPulse";
-	readonly sweepToRight: "sweepToRight";
-	readonly sweepToLeft: "sweepToLeft";
-	readonly sweepToBottom: "sweepToBottom";
-	readonly sweepToTop: "sweepToTop";
-	readonly bounceToRight: "bounceToRight";
-	readonly bounceToLeft: "bounceToLeft";
-	readonly bounceToBottom: "bounceToBottom";
-	readonly bounceToTop: "bounceToTop";
-	readonly radialOut: "radialOut";
-	readonly radialIn: "radialIn";
-	readonly rectangleIn: "rectangleIn";
-	readonly rectangleOut: "rectangleOut";
-	readonly shutterInHorizontal: "shutterInHorizontal";
-	readonly shutterOutHorizontal: "shutterOutHorizontal";
-	readonly shutterInVertical: "shutterInVertical";
-	readonly shutterOutVertical: "shutterOutVertical";
-	readonly iconBack: "iconBack";
-	readonly iconForward: "iconForward";
-	readonly iconDown: "iconDown";
-	readonly iconUp: "iconUp";
-	readonly iconSpin: "iconSpin";
-	readonly iconDrop: "iconDrop";
-	readonly iconFade: "iconFade";
-	readonly iconFloatAway: "iconFloatAway";
-	readonly iconSinkAway: "iconSinkAway";
-	readonly iconGrow: "iconGrow";
-	readonly iconShrink: "iconShrink";
-	readonly iconPulse: "iconPulse";
-	readonly iconPulseGrow: "iconPulseGrow";
-	readonly iconPulseShrink: "iconPulseShrink";
-	readonly iconPush: "iconPush";
-	readonly iconPop: "iconPop";
-	readonly iconBounce: "iconBounce";
-	readonly iconRotate: "iconRotate";
-	readonly iconGrowRotate: "iconGrowRotate";
-	readonly iconFloat: "iconFloat";
-	readonly iconSink: "iconSink";
-	readonly iconBob: "iconBob";
-	readonly iconHang: "iconHang";
-	readonly iconWobbleHorizontal: "iconWobbleHorizontal";
-	readonly iconWobbleVertical: "iconWobbleVertical";
-	readonly iconBuzz: "iconBuzz";
-	readonly iconBuzzOut: "iconBuzzOut";
-	readonly borderFade: "borderFade";
-	readonly hollow: "hollow";
-	readonly rippleOut: "rippleOut";
-	readonly rippleIn: "rippleIn";
-	readonly outlineOut: "outlineOut";
-	readonly outlineIn: "outlineIn";
-	readonly roundCorners: "roundCorners";
-	readonly underlineFromLeft: "underlineFromLeft";
-	readonly underlineFromCenter: "underlineFromCenter";
-	readonly underlineFromRight: "underlineFromRight";
-	readonly reveal: "reveal";
-	readonly underlineReveal: "underlineReveal";
-	readonly overlineFromLeft: "overlineFromLeft";
-	readonly overlineFromCenter: "overlineFromCenter";
-	readonly overlineFromRight: "overlineFromRight";
-	readonly overlineReveal: "overlineReveal";
-	readonly shadowGrow: "shadowGrow";
-	readonly shadowFloat: "shadowFloat";
-	readonly shadowGlow: "shadowGlow";
-	readonly shadowRadial: "shadowRadial";
-	readonly boxShadowOutset: "boxShadowOutset";
-	readonly boxShadowInset: "boxShadowInset";
-	readonly lift: "lift";
-	readonly glow: "glow";
-	readonly bubbleTop: "bubbleTop";
-	readonly bubbleRight: "bubbleRight";
-	readonly bubbleBottom: "bubbleBottom";
-	readonly bubbleLeft: "bubbleLeft";
-	readonly bubbleFloatTop: "bubbleFloatTop";
-	readonly bubbleFloatRight: "bubbleFloatRight";
-	readonly bubbleFloatBottom: "bubbleFloatBottom";
-	readonly bubbleFloatLeft: "bubbleFloatLeft";
-	readonly curlTopLeft: "curlTopLeft";
-	readonly curlTopRight: "curlTopRight";
-	readonly curlBottomRight: "curlBottomRight";
-	readonly curlBottomLeft: "curlBottomLeft";
-};
-type Effect$1 = (typeof Effect$1)[keyof typeof Effect$1];
-export declare const Align: {
-	readonly start: "start";
-	readonly center: "center";
-	readonly end: "end";
-	readonly stretch: "stretch";
-	readonly baseline: "baseline";
-	readonly between: "between";
-	readonly around: "around";
-	readonly evenly: "evenly";
-};
-export type Align = (typeof Align)[keyof typeof Align];
-/** Words `.width()` / `.height()` already accept. A number or `'320px'` skips this. */
-export declare const Size: {
-	readonly full: "full";
-	readonly screen: "screen";
-	readonly fit: "fit";
-	readonly min: "min";
-	readonly max: "max";
-};
-export type Size = (typeof Size)[keyof typeof Size];
-/** Theme spacing. `.padding(Space.md)`, `.gap(Space.sm)`, `.height(Space.xl)`. */
-export declare const Space: {
-	readonly xs: "var(--fibo-space-xs)";
-	readonly sm: "var(--fibo-space-sm)";
-	readonly md: "var(--fibo-space-md)";
-	readonly lg: "var(--fibo-space-lg)";
-	readonly xl: "var(--fibo-space-xl)";
-};
-export type Space = (typeof Space)[keyof typeof Space];
-/** Theme radii. `.borderRadius(Radius.md)`. */
-export declare const Radius: {
-	readonly xs: "var(--fibo-radius-xs)";
-	readonly sm: "var(--fibo-radius-sm)";
-	readonly md: "var(--fibo-radius-md)";
-	readonly lg: "var(--fibo-radius-lg)";
-	readonly xl: "var(--fibo-radius-xl)";
-	readonly full: "var(--fibo-radius-full)";
-};
-export type Radius = (typeof Radius)[keyof typeof Radius];
-/**
- * Theme colors. `.bg(Color.primary)` and `.color(Color.onSurface)` resolve to
- * `--fibo-*`. A hex, `rgb()`, or any other string still paints as-is.
+ * Theme colors. `.bg(Color.primary)` and `.color(Color.onSurface)` resolve to
+ * `--fibo-*`. A hex, `rgb()`, or any other string still paints as-is.
  */
 export declare const Color: {
 	readonly primary: "var(--fibo-primary)";
@@ -1971,6 +1182,10 @@ export declare const Clip: {
 	readonly antiAlias: "antiAlias";
 };
 export type Clip = (typeof Clip)[keyof typeof Clip];
+/**
+ * Corner / edge alignment for `ZStack`, `.frame({ alignment })`, overlays.
+ * SwiftUI aliases (`topTrailing`, `leading`, …) resolve to the FiboUI names.
+ */
 export declare const StackAlign: {
 	readonly center: "center";
 	readonly top: "top";
@@ -1981,8 +1196,25 @@ export declare const StackAlign: {
 	readonly topRight: "topRight";
 	readonly bottomLeft: "bottomLeft";
 	readonly bottomRight: "bottomRight";
+	/** SwiftUI `leading` → `left` */
+	readonly leading: "left";
+	/** SwiftUI `trailing` → `right` */
+	readonly trailing: "right";
+	/** SwiftUI `topLeading` → `topLeft` */
+	readonly topLeading: "topLeft";
+	/** SwiftUI `topTrailing` → `topRight` */
+	readonly topTrailing: "topRight";
+	/** SwiftUI `bottomLeading` → `bottomLeft` */
+	readonly bottomLeading: "bottomLeft";
+	/** SwiftUI `bottomTrailing` → `bottomRight` */
+	readonly bottomTrailing: "bottomRight";
 };
 export type StackAlign = (typeof StackAlign)[keyof typeof StackAlign];
+/** Flex longhands for a {@link StackAlign} value (frame / ZStack overlay slot). */
+export declare function stackAlignFlex(align?: StackAlign | keyof typeof StackAlign): {
+	alignItems: string;
+	justifyContent: string;
+};
 export declare const Theme: {
 	readonly material: "material";
 	readonly cupertino: "cupertino";
@@ -2185,51 +1417,1485 @@ export declare const Side: {
 	readonly start: "start";
 	readonly end: "end";
 };
-export type Side = (typeof Side)[keyof typeof Side];
-export declare const Place: {
-	readonly leading: "leading";
-	readonly principal: "principal";
-	readonly trailing: "trailing";
+export type Side = (typeof Side)[keyof typeof Side];
+export declare const Place: {
+	readonly leading: "leading";
+	readonly principal: "principal";
+	readonly trailing: "trailing";
+};
+export type Place = (typeof Place)[keyof typeof Place];
+export declare const FormMethod: {
+	readonly get: "get";
+	readonly post: "post";
+};
+export type FormMethod = (typeof FormMethod)[keyof typeof FormMethod];
+export declare const Trend: {
+	readonly up: "up";
+	readonly down: "down";
+	readonly neutral: "neutral";
+};
+export type Trend = (typeof Trend)[keyof typeof Trend];
+export declare const Stroke: {
+	readonly butt: "butt";
+	readonly round: "round";
+	readonly square: "square";
+};
+export type Stroke = (typeof Stroke)[keyof typeof Stroke];
+export declare const Join: {
+	readonly miter: "miter";
+	readonly round: "round";
+	readonly bevel: "bevel";
+};
+export type Join = (typeof Join)[keyof typeof Join];
+export declare const Scale: {
+	readonly small: "small";
+	readonly medium: "medium";
+	readonly large: "large";
+};
+export type Scale = (typeof Scale)[keyof typeof Scale];
+export declare const Density: {
+	readonly small: "small";
+	readonly medium: "medium";
+	readonly large: "large";
+};
+export type Density = Scale;
+export declare function isSizeWord(value: string): value is Size;
+/** CSS length a size word locks to, so a flex parent cannot squash it. */
+export declare function sizeWordCss(word: string, axis: "width" | "height"): string | undefined;
+/** Fixed px, CSS length, `%`, or a {@link Size} word (`Size.infinity`, `Size.full`, …). */
+export type FrameSize = number | string | Size;
+/**
+ * SwiftUI `View.frame` — both overloads in one object.
+ *
+ * ```ts
+ * .frame({ width: 300, height: 400 })
+ * .frame({ maxWidth: Size.infinity, maxHeight: Size.infinity, alignment: StackAlign.topTrailing })
+ * ```
+ */
+export interface FrameSpec {
+	width?: FrameSize;
+	height?: FrameSize;
+	minWidth?: FrameSize;
+	idealWidth?: FrameSize;
+	maxWidth?: FrameSize;
+	minHeight?: FrameSize;
+	idealHeight?: FrameSize;
+	maxHeight?: FrameSize;
+	alignment?: StackAlign | keyof typeof StackAlign;
+}
+/** Resolve a frame size to a CSS length. `Size.infinity` → fill parent (`100%`). */
+export declare function resolveFrameSize(value: FrameSize | undefined, role: "min" | "ideal" | "max" | "fixed", axis?: "width" | "height"): string | undefined;
+export declare function isFixedNumericFrame(spec: FrameSpec): spec is FrameSpec & {
+	width: number;
+	height: number;
+};
+/** Invisible SwiftUI-style frame wrapper around a built host element. */
+export declare function wrapFrame(child: React$1.ReactElement, spec: FrameSpec): React$1.ReactElement;
+export type ClipShapeName = "circle" | "rounded" | "square";
+export interface OffsetSpec {
+	x?: number;
+	y?: number;
+}
+export interface FixedSizeSpec {
+	horizontal?: boolean;
+	vertical?: boolean;
+}
+export interface LayerSpec {
+	kind: "overlay" | "background";
+	child: FiboChild | (() => FiboChild);
+	alignment: StackAlign | keyof typeof StackAlign;
+}
+/** SwiftUI `.offset(x:y:)` — visual translate; layout size unchanged. */
+export declare function wrapOffset(child: React$1.ReactElement, offset: OffsetSpec): React$1.ReactElement;
+/** SwiftUI `.clipped()` — clip to bounds. */
+export declare function wrapClipped(child: React$1.ReactElement): React$1.ReactElement;
+/** SwiftUI `.clipShape` — circle / rounded / square / custom radius. */
+export declare function wrapClipShape(child: React$1.ReactElement, shape: ClipShapeName | string): React$1.ReactElement;
+/**
+ * Transparent click film — sits above visual content and owns the full box hit
+ * target (inset:0). Gestures listen via capture on ancestor hosts; the film is
+ * the actual event target so empty/transparent pixels still receive taps.
+ */
+export declare const HIT_FILM_STYLE: React$1.CSSProperties;
+export declare function HitFilm(): React$1.ReactElement;
+/**
+ * SwiftUI `.contentShape` — hit-testing region (independent of visual clip).
+ * Implemented as a transparent film above the view (full frame tappable).
+ *
+ * ```ts
+ * ZStack()…frame({ width: 300, height: 400 }).contentShape('rectangle').onTapGesture(…)
+ * Image()…frame({ width: 120, height: 120 }).clipShape('circle').contentShape('circle')
+ * ```
+ */
+export type ContentShapeName = "rectangle" | ClipShapeName;
+export declare function wrapContentShape(child: React$1.ReactElement, shape?: ContentShapeName | string): React$1.ReactElement;
+/**
+ * SwiftUI `.layoutPriority` — higher = resist compression first, then claim free space.
+ * Web mapping: flex-shrink 0 + flex-grow for priority>0; negative priority shrinks first.
+ * Not a full multi-axis SwiftUI proposal solver (DOM limitation).
+ */
+export declare function wrapLayoutPriority(child: React$1.ReactElement, priority: number): React$1.ReactElement;
+/** SwiftUI `.fixedSize(horizontal:vertical:)` — hug content on those axes. */
+export declare function wrapFixedSize(child: React$1.ReactElement, spec: FixedSizeSpec): React$1.ReactElement;
+/**
+ * SwiftUI `.overlay` / `.background` — layer above/below the view.
+ * Base keeps intrinsic size; layer is `position:absolute; inset:0` + flex align.
+ */
+export declare function wrapLayer(child: React$1.ReactElement, layer: LayerSpec): React$1.ReactElement;
+export type GeometryRect = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
+/** SwiftUI-ish `onGeometryChange` — ResizeObserver on a host around the view. */
+export declare function wrapOnGeometryChange(child: React$1.ReactElement, onChange: (rect: GeometryRect) => void): React$1.ReactElement;
+/** SwiftUI `.compositingGroup()` — flatten into one compositing layer. */
+export declare function wrapCompositingGroup(child: React$1.ReactElement): React$1.ReactElement;
+/**
+ * SwiftUI `.mask` — CSS mask from a shape name or custom CSS mask value.
+ * Shape names reuse clip radii / circle clip-path.
+ */
+export declare function wrapMask(child: React$1.ReactElement, mask: ClipShapeName | "rectangle" | string): React$1.ReactElement;
+export type ContainerRelativeFrameSpec = {
+	axis?: "horizontal" | "vertical" | "both";
+	/** Divisions of the container (SwiftUI `count`). Default 1. */
+	count?: number;
+	/** Spans claimed (SwiftUI `span`). Default 1. */
+	span?: number;
+};
+/** SwiftUI `containerRelativeFrame` — size vs nearest sized ancestor (px after measure). */
+export declare function wrapContainerRelativeFrame(child: React$1.ReactElement, spec?: ContainerRelativeFrameSpec): React$1.ReactElement;
+export type AlignmentGuideName = "leading" | "trailing" | "top" | "bottom" | "centerX" | "centerY" | string;
+export type AlignmentGuideDims = {
+	width: number;
+	height: number;
+};
+export type AlignmentGuideSpec = {
+	guide: AlignmentGuideName;
+	/** Absolute guide position, or compute from own size (SwiftUI `ViewDimensions`). */
+	compute: number | ((dims: AlignmentGuideDims) => number);
+};
+/**
+ * SwiftUI `alignmentGuide` — shifts the view so the named guide sits at `compute`.
+ * Also publishes `--fibo-align-{guide}` for CSS consumers.
+ */
+export declare function wrapAlignmentGuide(child: React$1.ReactElement, spec: AlignmentGuideSpec): React$1.ReactElement;
+export type MatchedGeometrySpec = {
+	id: string;
+	namespace?: string;
+	/** SwiftUI `isSource` — source owns the shared geometry. Default true. */
+	isSource?: boolean;
+};
+/**
+ * SwiftUI `matchedGeometryEffect` — shared `view-transition-name` + measured rect store.
+ * Pair with `startViewTransition` / browser VT for morph; `isSource` marks the owner.
+ */
+export declare function wrapMatchedGeometry(child: React$1.ReactElement, spec: MatchedGeometrySpec): React$1.ReactElement;
+export declare function matchedGeometryKeys(): string[];
+export declare function matchedGeometryRect(id: string, namespace?: string): DOMRect | undefined;
+/**
+ * SwiftUI `PreferenceKey` — typed key with default + reduce.
+ *
+ * ```ts
+ * const WidthKey = PreferenceKey({ defaultValue: 0, reduce: (a, b) => Math.max(a, b) })
+ * Column()
+ *   .onPreferenceChange(WidthKey, (w) => console.log(w))
+ *   .children(Box().preference(WidthKey, 120))
+ * ```
+ */
+export type PreferenceKeyDef<T> = {
+	readonly __preferenceKey: true;
+	readonly id: string | symbol;
+	readonly defaultValue: T;
+	reduce: (value: T, nextValue: T) => T;
+};
+export declare function PreferenceKey<T>(opts: {
+	id?: string;
+	defaultValue: T;
+	reduce?: (value: T, nextValue: T) => T;
+}): PreferenceKeyDef<T>;
+export type PreferenceWriteSpec = {
+	key: PreferenceKeyDef<any>;
+	value: unknown;
+};
+export type PreferenceReadSpec = {
+	key: PreferenceKeyDef<any>;
+	onChange: (value: any) => void;
+};
+/** Contribute a preference value to the nearest `.onPreferenceChange` ancestor. */
+export declare function wrapPreference(child: React$1.ReactElement, spec: PreferenceWriteSpec): React$1.ReactElement;
+/** Listen for reduced preference values from descendants. */
+export declare function wrapOnPreferenceChange(child: React$1.ReactElement, spec: PreferenceReadSpec): React$1.ReactElement;
+/** Test helper — reduce contributions manually. */
+export declare function reducePreferences<T>(key: PreferenceKeyDef<T>, values: T[]): T;
+/**
+ * SwiftUI-facing enums / const objects for FiboUI.
+ * Prefer these over raw strings in app code.
+ */
+/** SwiftUI `Edge` */
+export declare const Edge: {
+	readonly top: "top";
+	readonly bottom: "bottom";
+	readonly leading: "leading";
+	readonly trailing: "trailing";
+};
+export type Edge = (typeof Edge)[keyof typeof Edge];
+/**
+ * SwiftUI `Edge.Set` — which sides receive padding/margin.
+ * `leading`/`trailing` map to left/right in LTR (CSS).
+ */
+export declare const EdgeSet: {
+	readonly top: "top";
+	readonly bottom: "bottom";
+	readonly leading: "leading";
+	readonly trailing: "trailing";
+	readonly horizontal: "horizontal";
+	readonly vertical: "vertical";
+	readonly all: "all";
+};
+export type EdgeSet = (typeof EdgeSet)[keyof typeof EdgeSet];
+/** SwiftUI `ContentShape` / hit region names */
+export declare const ContentShape: {
+	readonly rectangle: "rectangle";
+	readonly circle: "circle";
+	readonly rounded: "rounded";
+	readonly square: "square";
+};
+export type ContentShape = (typeof ContentShape)[keyof typeof ContentShape];
+/** SwiftUI `ClipShape` names */
+export declare const ClipShape: {
+	readonly circle: "circle";
+	readonly rounded: "rounded";
+	readonly square: "square";
+	readonly rectangle: "rectangle";
+};
+export type ClipShape = (typeof ClipShape)[keyof typeof ClipShape];
+/** Named / built-in coordinate spaces for GeometryProxy */
+export declare const CoordinateSpace: {
+	readonly local: "local";
+	readonly global: "global";
+	readonly named: (name: string) => string;
+};
+/** Drag axis lock */
+declare const DragAxis$1: {
+	readonly free: "free";
+	readonly horizontal: "horizontal";
+	readonly vertical: "vertical";
+};
+/** GestureMask (also on GestureBuilders) */
+export declare const GestureMaskEnum: {
+	readonly all: "all";
+	readonly gesture: "gesture";
+	readonly subviews: "subviews";
+	readonly none: "none";
+};
+/** Scroll target / position anchors */
+export declare const ScrollAnchor: {
+	readonly start: "start";
+	readonly center: "center";
+	readonly end: "end";
+};
+export type ScrollAnchor = (typeof ScrollAnchor)[keyof typeof ScrollAnchor];
+/** Unit for containerRelativeFrame */
+export declare const ContainerRelativeAxis: {
+	readonly horizontal: "horizontal";
+	readonly vertical: "vertical";
+	readonly both: "both";
+};
+export type ContainerRelativeAxis = (typeof ContainerRelativeAxis)[keyof typeof ContainerRelativeAxis];
+export type EdgeInsetsValue = {
+	top?: number | string;
+	bottom?: number | string;
+	leading?: number | string;
+	trailing?: number | string;
+	/** CSS left — alias of leading in LTR */
+	left?: number | string;
+	/** CSS right — alias of trailing in LTR */
+	right?: number | string;
+};
+export declare function resolveEdgeInsets(insets: EdgeInsetsValue): {
+	top?: number | string;
+	right?: number | string;
+	bottom?: number | string;
+	left?: number | string;
+};
+export declare function applyEdgeSet(set: EdgeSet, value: number | string): {
+	top?: number | string;
+	right?: number | string;
+	bottom?: number | string;
+	left?: number | string;
+};
+export type SafeAreaInsetEdge = Edge | "top" | "bottom" | "leading" | "trailing" | "left" | "right";
+export type SafeAreaInsetSpec = {
+	edge: SafeAreaInsetEdge;
+	content: FiboChild | (() => FiboChild);
+	/** Gap between inset bar and content. Default 0. */
+	spacing?: number;
+};
+/**
+ * SwiftUI `.safeAreaInset(edge:)` — reserves a bar on one edge; content fills the rest.
+ * Does **not** replace `SafeArea` (pad for notch) or `GeometryProxy.safeAreaInsets` (read).
+ */
+export declare function wrapSafeAreaInset(child: React$1.ReactElement, spec: SafeAreaInsetSpec): React$1.ReactElement;
+export interface SpringOptions {
+	stiffness?: number;
+	damping?: number;
+	mass?: number;
+}
+/**
+ * CSS `linear()` spring sampled once. stiffness/damping/mass change the curve.
+ * The browser interpolates — no rAF on the CSS path.
+ */
+export declare function springEase(options?: SpringOptions): string;
+export declare function resolveCssEase(value: string, spring?: SpringOptions): string;
+export interface ThemeColors {
+	primary: string;
+	primaryVariant?: string;
+	primaryContainer?: string;
+	onPrimaryContainer?: string;
+	secondary: string;
+	secondaryVariant?: string;
+	secondaryContainer?: string;
+	onSecondaryContainer?: string;
+	tertiary?: string;
+	onTertiary?: string;
+	tertiaryContainer?: string;
+	onTertiaryContainer?: string;
+	background: string;
+	surface: string;
+	surfaceVariant?: string;
+	onSurfaceVariant?: string;
+	error: string;
+	errorContainer?: string;
+	onErrorContainer?: string;
+	success?: string;
+	warning?: string;
+	info?: string;
+	onPrimary: string;
+	onSecondary: string;
+	onBackground: string;
+	onSurface: string;
+	onError: string;
+	/** Borders / hairlines — maps to `--fibo-outline`. */
+	outline?: string;
+	outlineVariant?: string;
+	/** Maps to `--fibo-surface-container-low` (M3 card surfaces). */
+	surfaceContainerLow?: string;
+}
+export interface ThemeTypography {
+	h1: TextStyle;
+	h2: TextStyle;
+	h3: TextStyle;
+	h4: TextStyle;
+	h5: TextStyle;
+	h6: TextStyle;
+	body: TextStyle;
+	caption: TextStyle;
+	label: TextStyle;
+}
+interface ThemeSpacing {
+	xs: string;
+	sm: string;
+	md: string;
+	lg: string;
+	xl: string;
+}
+interface ThemeBorderRadius {
+	/** Maps to `--fibo-radius-xs` when set (CSS sheets already define it). */
+	xs?: string;
+	sm: string;
+	md: string;
+	lg: string;
+	/** Maps to `--fibo-radius-xl` when set (CSS sheets already define it). */
+	xl?: string;
+	full: string;
+}
+interface ThemeShadows {
+	sm: string;
+	md: string;
+	lg: string;
+}
+export interface FiboTheme {
+	name: FiboThemeName;
+	colors: ThemeColors;
+	typography: ThemeTypography;
+	spacing: ThemeSpacing;
+	borderRadius: ThemeBorderRadius;
+	shadows: ThemeShadows;
+	fontFamily: string;
+}
+/** Built-in presets. `noir` is the dark editorial theme (site / dense apps). */
+export declare const FIBO_THEMES: {
+	readonly material: FiboTheme;
+	readonly cupertino: FiboTheme;
+	readonly web: FiboTheme;
+	readonly noir: FiboTheme;
+};
+export type FiboThemePreset = keyof typeof FIBO_THEMES;
+export type ThemeInput = FiboTheme | FiboThemePreset;
+export declare function resolveTheme(input: ThemeInput): FiboTheme;
+export type FiboThemePatch = {
+	name?: string;
+	colors?: Partial<ThemeColors>;
+	typography?: Partial<Record<keyof ThemeTypography, Partial<TextStyle>>>;
+	spacing?: Partial<ThemeSpacing>;
+	borderRadius?: Partial<ThemeBorderRadius>;
+	shadows?: Partial<ThemeShadows>;
+	fontFamily?: string;
 };
-export type Place = (typeof Place)[keyof typeof Place];
-export declare const FormMethod: {
-	readonly get: "get";
-	readonly post: "post";
+/** Flutter-style copyWith / SwiftUI environment override. */
+export declare function copyWithTheme(base: FiboTheme, patch: FiboThemePatch): FiboTheme;
+/** Alias — SwiftUI/Flutter mental model. */
+export declare const extendTheme: typeof copyWithTheme;
+/** Flat CSS custom properties for a theme (inline style or :root block). */
+export declare function themeToCssVars(theme: FiboTheme): Record<string, string>;
+/** Inline style object safe for React (CSSProperties + custom props). */
+export declare function themeToInlineStyle(theme: FiboTheme): React$1.CSSProperties;
+/** CSS rule body for `.fibo-theme-{name}` — SSR-safe, no useEffect. */
+export declare function themeToCssRule(theme: FiboTheme): string;
+export declare function themeClassName(theme: FiboTheme): string;
+declare enum Colors {
+	Primary = "primary",
+	OnPrimary = "on-primary",
+	PrimaryContainer = "primary-container",
+	OnPrimaryContainer = "on-primary-container",
+	Secondary = "secondary",
+	OnSecondary = "on-secondary",
+	SecondaryContainer = "secondary-container",
+	OnSecondaryContainer = "on-secondary-container",
+	Tertiary = "tertiary",
+	OnTertiary = "on-tertiary",
+	TertiaryContainer = "tertiary-container",
+	OnTertiaryContainer = "on-tertiary-container",
+	Error = "error",
+	OnError = "on-error",
+	Success = "success",
+	Warning = "warning",
+	Info = "info",
+	Background = "background",
+	OnBackground = "on-background",
+	Surface = "surface",
+	OnSurface = "on-surface",
+	SurfaceVariant = "surface-variant",
+	OnSurfaceVariant = "on-surface-variant",
+	Outline = "outline",
+	Transparent = "transparent",
+	Black = "black",
+	White = "white"
+}
+declare enum ShadowSize {
+	Sm = "sm",
+	Md = "md",
+	Lg = "lg",
+	Xl = "xl",
+	Xl2 = "2xl"
+}
+declare enum ShadowPreset {
+	Card = "card",
+	Button = "button",
+	Modal = "modal",
+	Float = "float",
+	Inner = "inner"
+}
+declare enum ShadowDirection {
+	Top = "top",
+	Bottom = "bottom",
+	Left = "left",
+	Right = "right",
+	TopBottom = "top-bottom",
+	LeftRight = "left-right",
+	Vertical = "vertical",
+	Horizontal = "horizontal",
+	All = "all"
+}
+type ShadowConfig = ShadowSize | ShadowPreset | string | 0 | null | [
+	string,
+	number?
+] | [
+	ShadowDirection | string,
+	ShadowSize | string
+] | [
+	ShadowDirection | string,
+	string
+] | [
+	ShadowDirection | string,
+	string,
+	number?
+] | [
+	ShadowDirection | string,
+	ShadowSize | string,
+	string,
+	number?
+];
+/**
+ * Callback form of `.hover()` / `.focus()` / … Contextual typing uses the *last*
+ * overload, so this signature must stay last or `h` becomes implicit `any` inside `.map()`.
+ */
+export type PseudoStateFn = (builder: PseudoStateBuilder) => void | PseudoStateBuilder;
+declare abstract class FiboBuilder {
+	/** @internal Extra DOM props forwarded to the host element. */
+	protected _props: Record<string, any>;
+	protected _style: React$1.CSSProperties;
+	protected _cssStyles: React$1.CSSProperties;
+	protected _classNames: string[];
+	protected _children: React$1.ReactNode[];
+	/** Resolved theme for this subtree (SwiftUI Environment / Flutter Theme). */
+	protected _theme?: FiboTheme;
+	protected _state: Map<string, any>;
+	protected _providers: Map<string, any>;
+	protected _observers: Set<Observable<any>>;
+	protected _signals: Set<BindableSignal<any>>;
+	/** Explicit `.bindSignal()` / `.observer()` owns nested reads. A direct wire does not. */
+	protected _ownsReads: boolean;
+	/** @internal Direct `method(signal.value)` calls replayed when that signal changes. */
+	protected _replays: Array<() => void>;
+	protected _isObserver: boolean;
+	/** Normal-priority gestures (SwiftUI `.gesture`). Last = outermost. */
+	protected _gestures: GestureBuilder[];
+	/** SwiftUI `.simultaneousGesture` — bubble / no stopPropagation. */
+	protected _simultaneousGestures: GestureBuilder[];
+	/** SwiftUI `.highPriorityGesture` — wrapped last (outermost / capture wins). */
+	protected _highPriorityGestures: GestureBuilder[];
+	protected _offset?: OffsetSpec;
+	protected _clipped: boolean;
+	protected _clipShape?: ClipShapeName | string;
+	protected _contentShape?: ContentShapeName | string;
+	protected _fixedSize?: FixedSizeSpec;
+	protected _layoutPriority?: number;
+	protected _layers: LayerSpec[];
+	protected _onGeometryChange?: (rect: GeometryRect) => void;
+	protected _compositingGroup: boolean;
+	protected _viewMask?: string;
+	protected _containerRelativeFrame?: ContainerRelativeFrameSpec;
+	protected _alignmentGuide?: AlignmentGuideSpec;
+	protected _matchedGeometry?: MatchedGeometrySpec;
+	protected _preferences: PreferenceWriteSpec[];
+	protected _preferenceReaders: PreferenceReadSpec[];
+	protected _safeAreaInsets: SafeAreaInsetSpec[];
+	protected _navigationTitle?: string;
+	protected _animationConfig?: Partial<AnimationOptions>;
+	protected _animatedProps: Map<string, Signal<any>>;
+	protected _transforms: string[];
+	protected _transitionClass?: string;
+	/** True while transition class was auto-managed for hover/effect presets (expandable). */
+	protected _autoEffectTransition: boolean;
+	protected _effectTransitionProps: string[];
+	/**
+	 * When true, getStyle() promotes background/border shorthands to longhands and
+	 * (optionally) stamps a resting translate3d so pseudo transforms ease cleanly.
+	 */
+	protected _smoothSurface: boolean;
+	protected _smoothNeedsRestTransform: boolean;
+	protected _motionClass?: string;
+	protected _staggerMs?: number;
+	protected _reveal?: {
+		preset: string;
+		once?: boolean;
+		rootMargin?: string;
+		threshold?: number;
+	};
+	protected _scrollProgress: boolean;
+	protected _viewTransition?: string;
+	protected _reducedMotion: "reduce" | "never";
+	protected _usesCssMotion: boolean;
+	protected _explicitScrollMargin: boolean;
+	/** Shrink-wrap: skip the default `w-full` / `self-stretch` on Row and Column. */
+	protected _hug: boolean;
+	/**
+	 * SwiftUI `.frame(...)` wrappers (outer → inner order of application).
+	 * Applied in `assembleBuilder` so every widget gets the same DX.
+	 */
+	protected _frames: FrameSpec[];
+	/**
+	 * Unset every CSS property on this component and what it renders inside.
+	 * Chain `.style()`, `.px()`, `.flex()` and the rest after this to put back only what you want.
+	 */
+	protected _resetStyle: boolean;
+	/** Kebab box longhands already stamped (`padding-left`, …) so later shorthand cannot clobber them. */
+	protected _boxLonghands: Set<string>;
+	resetStyle(): this;
+	protected isReset(): boolean;
+	hug(): this;
+	protected isHug(): boolean;
+	/**
+	 * SwiftUI `View.frame` — invisible box around this view.
+	 *
+	 * ```ts
+	 * Image(url).frame({ width: 300, height: 400 })
+	 * Text('★★★★').frame({
+	 *   maxWidth: Size.infinity,
+	 *   maxHeight: Size.infinity,
+	 *   alignment: StackAlign.topTrailing,
+	 * })
+	 * ```
+	 *
+	 * Chainable: each `.frame()` wraps the previous (same as SwiftUI).
+	 */
+	frame(spec: FrameSpec): this;
+	/**
+	 * SwiftUI `.offset(x:y:)` — visual translate; layout size stays.
+	 * `.offset(8)` ≡ `{ x: 8, y: 8 }`; `.offset({ x: 4 })` only horizontal.
+	 */
+	offset(value: number | OffsetSpec): this;
+	/** SwiftUI `.clipped()` — overflow hidden to bounds. */
+	clipped(): this;
+	/**
+	 * SwiftUI `.clipShape` — `'circle' | 'rounded' | 'square'` or any CSS radius
+	 * (`'8px'`, `'50%'`). Clips drawing; hit-testing still follows layout unless
+	 * you also set {@link contentShape}.
+	 */
+	clipShape(shape: ClipShapeName | string): this;
+	/**
+	 * SwiftUI `.contentShape` — region used for hit-testing (tap / long-press).
+	 * Default `'rectangle'` = full frame box, even over transparent pixels.
+	 *
+	 * ```ts
+	 * ZStack()…frame({ width: 300, height: 400 })
+	 *   .clipShape('8px')
+	 *   .contentShape('rectangle')
+	 *   .onTapGesture(open)
+	 * ```
+	 */
+	contentShape(shape?: ContentShapeName | string): this;
+	/**
+	 * SwiftUI `.fixedSize(horizontal:vertical:)` — hug content on those axes.
+	 * Defaults both axes when called with no args.
+	 */
+	fixedSize(spec?: FixedSizeSpec | boolean): this;
+	/**
+	 * SwiftUI `.layoutPriority` — higher resists compression and claims free space.
+	 * Web: flex-grow / flex-shrink (not a full multi-axis proposal solver).
+	 */
+	layoutPriority(value: number): this;
+	/** SwiftUI `.compositingGroup()`. */
+	compositingGroup(): this;
+	/** SwiftUI `.mask` — shape name or CSS mask-image value. */
+	mask(shapeOrCss: ClipShapeName | "rectangle" | string): this;
+	/** SwiftUI `containerRelativeFrame`. */
+	containerRelativeFrame(axis?: ContainerRelativeFrameSpec["axis"] | ContainerRelativeFrameSpec, count?: number, span?: number): this;
+	/**
+	 * SwiftUI `alignmentGuide` — named guide + absolute value or compute from size.
+	 * ```ts
+	 * Text('Hi').alignmentGuide('leading', (d) => d.width / 2)
+	 * ```
+	 */
+	alignmentGuide(guide: AlignmentGuideName, compute: number | ((dims: {
+		width: number;
+		height: number;
+	}) => number)): this;
+	/**
+	 * SwiftUI `matchedGeometryEffect` — shared view-transition id + measured rect.
+	 * ```ts
+	 * Image(url).matchedGeometryEffect('hero', { namespace: 'gallery', isSource: true })
+	 * ```
+	 */
+	matchedGeometryEffect(id: string, namespaceOrOpts?: string | {
+		namespace?: string;
+		isSource?: boolean;
+	}): this;
+	/** SwiftUI `.preference(key:value:)` — contribute upward to `.onPreferenceChange`. */
+	preference<T>(key: PreferenceKeyDef<T>, value: T): this;
+	/** SwiftUI `.onPreferenceChange` — reduce descendant preferences. */
+	onPreferenceChange<T>(key: PreferenceKeyDef<T>, onChange: (value: T) => void): this;
+	/**
+	 * SwiftUI `.safeAreaInset(edge:)` — reserve a bar on one edge; content fills the rest.
+	 * Distinct from `SafeArea` (notch padding) and `proxy.safeAreaInsets` (read-only).
+	 */
+	safeAreaInset(edge: SafeAreaInsetEdge, content: SafeAreaInsetSpec["content"], spacing?: number): this;
+	/**
+	 * SwiftUI `.navigationTitle` — stores title for Scaffold (see `Scaffold.navigationTitle`).
+	 * On non-Scaffold builders, sets `aria-label` / data attribute only (no extra chrome bar).
+	 */
+	navigationTitle(title: string): this;
+	/**
+	 * SwiftUI `.overlay(alignment:) { }` — layer above this view.
+	 * ```ts
+	 * Image(url).overlay(Text('NEW'), StackAlign.topTrailing)
+	 * ```
+	 */
+	overlay(child: FiboChild | (() => FiboChild), alignment?: StackAlign | keyof typeof StackAlign): this;
+	/**
+	 * SwiftUI `.background(alignment:) { }` — layer behind this view.
+	 */
+	background(child: FiboChild | (() => FiboChild), alignment?: StackAlign | keyof typeof StackAlign): this;
+	/** SwiftUI `onGeometryChange` — fires on mount + resize. */
+	onGeometryChange(handler: (rect: GeometryRect) => void): this;
+	id(value: string): this;
+	/**
+	 * Scroll target. Same as `.id()`, plus `scroll-margin-top` so the section
+	 * is not hidden under a sticky header. Pair with `scrollTo('#name')`.
+	 */
+	anchor(value: string): this;
+	/**
+	 * Explicit `scroll-margin-top` on this node (overrides the sticky CSS variable
+	 * that `.anchor()` applies).
+	 */
+	scrollMargin(value: number | string): this;
+	/** Stamp a class onto the host. Used by PseudoStateBuilder (hashed `:hover` etc.). */
+	addClassName(name: string): this;
+	/**
+	 * React list key. After this is called, React reads the key as a string
+	 * on both the builder element and the inner host wrapper.
+	 * Builders are valid elements — you do not need `.build()`.
+	 */
+	key(value: string | number): this;
+	private setBoxLonghand;
+	private setBoxShorthand;
+	paddingHorizontal(value: string | number): this;
+	paddingVertical(value: string | number): this;
+	/**
+	 * SwiftUI `.padding`:
+	 * - `.padding(8)` — all sides
+	 * - `.padding(EdgeSet.horizontal, 12)` — Edge.Set + value
+	 * - `.padding({ top: 8, leading: 12 })` — EdgeInsets
+	 */
+	padding(value: string | number): this;
+	padding(edges: EdgeSet, value: string | number): this;
+	padding(insets: EdgeInsetsValue): this;
+	/** SwiftUI `.padding` with {@link EdgeSet} — alias clarity. */
+	/** @deprecated Prefer `.padding(EdgeSet, n)` — same implementation. */
+	paddingEdges(edges: EdgeSet, value: string | number): this;
+	marginHorizontal(value: string | number): this;
+	marginVertical(value: string | number): this;
+	margin(value: string | number): this;
+	/** Inline layout wins over a host that hardcodes flex on the element (Form, Scaffold). */
+	protected layoutStyle(patch: React$1.CSSProperties): this;
+	/** Last write of a key lives in one bag so getStyle() does not let earlier `.css()` beat later `.style()`. */
+	private dropConflictingKeys;
+	private trackBoxLonghandsFrom;
+	flexDirection(direction: "row" | "column" | "row-reverse" | "column-reverse"): this;
+	/** Flutter `textDirection`. */
+	textDirection(direction: "ltr" | "rtl"): this;
+	/** Flutter `textBaseline`. Both modes align on the flex baseline. */
+	textBaseline(baseline: "alphabetic" | "ideographic"): this;
+	/** Flutter `clipBehavior`. `none` shows overflow; the other two clip. */
+	clip(behavior: "none" | "hardEdge" | "antiAlias"): this;
+	/**
+	 * Flutter `mainAxisSize`. `min` hugs the current flex direction.
+	 * `max` stretches along that same axis.
+	 */
+	mainAxisSize(size: "min" | "max"): this;
+	zIndex(value: number): this;
+	alignItems(alignment: "start" | "center" | "end" | "stretch" | "baseline"): this;
+	alignSelf(alignment: "start" | "center" | "end" | "stretch" | "baseline" | "auto"): this;
+	flexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): this;
+	/**
+	 * Main-axis distribution. Accepts Tailwind shortcuts (`between`) and CSS/Flutter
+	 * names (`space-between` / `spaceBetween`).
+	 */
+	justifyContent(justify: "start" | "center" | "end" | "between" | "around" | "evenly" | "space-between" | "space-around" | "space-evenly" | "spaceBetween" | "spaceAround" | "spaceEvenly"): this;
+	/** True when flexDirection is column / column-reverse (default is row). */
+	protected isVerticalFlex(): boolean;
+	/**
+	 * Both screen axes. `.align(Align.center)` and `.align('center')` do the same.
+	 * `between` packs the main axis and starts the cross axis.
+	 */
+	align(alignment: AlignAxis): this;
+	/**
+	 * Horizontal (screen X) alignment. Same meaning on Row and Column:
+	 * left / center / right of the container — not “main axis”.
+	 */
+	alignX(alignment: AlignAxis): this;
+	/**
+	 * Vertical (screen Y) alignment. Same meaning on Row and Column:
+	 * top / center / bottom of the container — not “cross axis”.
+	 */
+	alignY(alignment: AlignAxis): this;
+	protected applyMainAlign(alignment: AlignAxis | string): this;
+	protected applyCrossAlign(alignment: AlignAxis | string): this;
+	flex(value?: number | string): this;
+	grid(): this;
+	inlineFlex(): this;
+	inlineGrid(): this;
+	block(): this;
+	inlineBlock(): this;
+	hidden(): this;
+	center(): this;
+	/** Center on the horizontal screen axis (uses `.alignX('center')`). */
+	centerX(): this;
+	/** Center on the vertical screen axis (uses `.alignY('center')`). */
+	centerY(): this;
+	spaceBetween(): this;
+	spaceAround(): this;
+	spaceEvenly(): this;
+	fill(): this;
+	fillWidth(): this;
+	fillHeight(): this;
+	square(size: number | string): this;
+	circle(): this;
+	opacity(value: number): this;
+	p(value: number | string): this;
+	px(value: number | string): this;
+	py(value: number | string): this;
+	paddingX(value: number | string): this;
+	paddingY(value: number | string): this;
+	m(value: number | string): this;
+	mx(value: number | string): this;
+	my(value: number | string): this;
+	marginX(value: number | string): this;
+	marginY(value: number | string): this;
+	bg(color: string | Colors): this;
+	text(color: string | Colors): this;
+	color(value: string | Colors): this;
+	private resolveSemanticColor;
+	shadow(config?: ShadowConfig): this;
+	/**
+	 * Breakpoint styles compiled to CSS `@media` (same engine as `.md()`).
+	 * Tiers stay mutually exclusive: mobile `<768`, tablet `768–1023`, desktop `≥1024`.
+	 * No `window.innerWidth` — hydrate-safe.
+	 */
+	responsive(styles: ResponsiveStyles): this;
+	/**
+	 * CSS `@media` (min-width or a raw query). Compiles to a class — no resize JS.
+	 *
+	 * @example Box().padding(8).media('md', { padding: 16 }).media('(prefers-color-scheme: dark)', { backgroundColor: '#111' })
+	 */
+	media(query: BreakpointKey | string, styles: React$1.CSSProperties): this;
+	private registerMediaStyles;
+	sm(styles: React$1.CSSProperties): this;
+	md(styles: React$1.CSSProperties): this;
+	lg(styles: React$1.CSSProperties): this;
+	xl(styles: React$1.CSSProperties): this;
+	rounded(value: string | number): this;
+	borderRadius(value: string | number): this;
+	borderColor(value: string): this;
+	/**
+	 * A passed size is a lock: `min-*` plus `flex-shrink: 0`, so a flex parent
+	 * (the Scaffold body) cannot divide the viewport across these children.
+	 * `400`, `'320px'`, `Size.full`, and `Space.md` all count. `flex(1)` afterwards
+	 * opts back into sharing space.
+	 *
+	 * Percentages / `auto` do not lock `min-*` — `minWidth: 100%` on a flex
+	 * child fights clamping and lets long text blow past the ZStack box.
+	 */
+	private lockAxis;
+	width(value: string | number): this;
+	paint(property: string, value: string): this;
+	height(value: string | number): this;
+	gap(value: string | number): this;
+	clean(): this;
+	borderInput(color?: string, focusColor?: string): this;
+	weight(value: string | number): this;
+	onClick(handler: (event: React$1.MouseEvent<any>) => void): this;
+	state<T>(key: string, initialValue: T): this;
+	getState<T>(key: string): T | undefined;
+	setState<T>(key: string, value: T): this;
+	provide<T>(key: string, value: T): this;
+	consume<T>(key: string): T | undefined;
+	observer(options?: string | number | {
+		key?: string | number;
+	}): this;
+	observe<T>(observable: Observable<T>): this;
+	bindSignal<T>(signal: BindableSignal<T>): this;
+	/**
+	 * @internal Wire a direct `method(signal.value)` to this node.
+	 * Does not claim reads that happen later in a children function.
+	 */
+	adoptWire(signals: Subscribable<unknown>[], replay: () => void): void;
+	/** @internal */
+	runReplays(): void;
+	translateX(value: Signal<number> | number): this;
+	translateY(value: Signal<number> | number): this;
+	scale(value: Signal<number> | number): this;
+	/** SwiftUI `scaleEffect` — alias of {@link scale}. */
+	scaleEffect(value: Signal<number> | number): this;
+	rotate(degrees: Signal<number> | number): this;
+	/** SwiftUI `rotationEffect` — alias of {@link rotate} (degrees). */
+	rotationEffect(degrees: Signal<number> | number): this;
+	/**
+	 * SwiftUI `.allowsHitTesting` — when `false`, this view and descendants
+	 * ignore pointer hits (`pointer-events: none`).
+	 */
+	allowsHitTesting(value?: boolean): this;
+	/**
+	 * SwiftUI scroll target id — used by {@link ScrollViewReader} `.scrollTo(id)`.
+	 * Sets `data-scroll-id` on the host.
+	 */
+	scrollTarget(id: string): this;
+	/**
+	 * SwiftUI: taps on *containers* (ZStack / Column / …) only hit drawn content
+	 * unless `.contentShape(Rectangle())` is set. We default that shape when the
+	 * first gesture is attached and the caller did not set one — same as the
+	 * usual SwiftUI fix, without forcing it on chrome-only views.
+	 */
+	protected ensureGestureContentShape(): void;
+	/**
+	 * SwiftUI `.gesture` — attach Tap / LongPress / Drag / Magnify / Rotate / …
+	 * Chainable: each call wraps the previous (outermost = last).
+	 */
+	gesture(gesture: GestureBuilder): this;
+	/** SwiftUI `.simultaneousGesture` — runs alongside other gestures (no steal). */
+	simultaneousGesture(gesture: GestureBuilder): this;
+	/** SwiftUI `.highPriorityGesture` — recognized before the view's own gestures. */
+	highPriorityGesture(gesture: GestureBuilder): this;
+	/**
+	 * Sugar for {@link TapGesture}`.onEnd(handler)`.
+	 * Note: `Button` / `List` / `ListTile` keep domain-specific `.onPress`.
+	 */
+	onPress(handler: () => void): this;
+	/** Flutter-style alias of {@link onPress}. */
+	onTap(handler: () => void): this;
+	/**
+	 * SwiftUI `onTapGesture(count:perform:)` — default count 1.
+	 * Pass a location callback for SpatialTap behavior.
+	 */
+	onTapGesture(countOrHandler: number | ((location?: TapLocation) => void) | (() => void), handler?: ((location?: TapLocation) => void) | (() => void)): this;
+	/**
+	 * SwiftUI `onLongPressGesture(minimumDuration:perform:onPressingChanged:)`.
+	 */
+	onLongPressGesture(handlerOrOpts: (() => void) | {
+		minimumDuration?: number;
+		maximumDistance?: number;
+		perform: () => void;
+		onPressingChanged?: (pressing: boolean) => void;
+	}, onPressingChanged?: (pressing: boolean) => void): this;
+	animation(config: Partial<AnimationOptions>): this;
+	protected hasStateManagement(): boolean;
+	className(className: string): this;
+	classNames(classNames: string[]): this;
+	css(styles: React$1.CSSProperties): this;
+	style(style: React$1.CSSProperties): this;
+	props(props: Record<string, any>): this;
+	protected _transitionDuration: number;
+	protected _transitionEasing: string;
+	protected _transitionDelay: number;
+	protected _transitionProperties: string[];
+	/**
+	 * Apply CSS transition
+	 *
+	 * Overload 1: String syntax
+	 * Example: .transition('all 0.2s ease-in-out')
+	 *
+	 * Overload 2: Shorthand with parameters
+	 * Example: .transition('all', 200, 'ease-out')
+	 * Example: .transition('all', 200, 'ease-out', 50)
+	 */
+	transition(value: string): this;
+	transition(properties: string | string[], duration: number, easing?: string, delay?: number): this;
+	/**
+	 * Set transition duration in milliseconds
+	 * Example: .duration(200) → 200ms
+	 */
+	duration(ms: number): this;
+	/**
+	 * Set transition easing function
+	 * Example: .easing('ease-in-out')
+	 */
+	easing(value: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "spring" | string): this;
+	/** Alias of `.easing()`. `'spring'` becomes CSS `linear()`. */
+	ease(value: string): this;
+	/**
+	 * Set transition delay in milliseconds
+	 * Example: .delay(100) → 100ms delay
+	 */
+	delay(ms: number): this;
+	/**
+	 * Set which properties to transition
+	 * Example: .properties(['color', 'transform'])
+	 */
+	properties(props: string[]): this;
+	/**
+	 * Apply the built transition to the element
+	 */
+	protected _applyTransition(): void;
+	private replaceTransitionClass;
+	/**
+	 * CSS enter/exit preset. Compiles to `@keyframes` — no rAF.
+	 * @example Box().animate('fadeIn').duration(300).ease('spring')
+	 */
+	animate(preset: MotionPreset | string, options?: {
+		duration?: number;
+		ease?: string;
+		delay?: number;
+		from?: number | string;
+		stiffness?: number;
+		damping?: number;
+		mass?: number;
+	}): this;
+	animate(custom: CustomMotion): this;
+	/** CSS `linear()` spring. Works on `.animate()` and `.transition()` / `.hover()`. */
+	spring(options?: SpringOptions): this;
+	reducedMotion(mode?: "reduce" | "never"): this;
+	press(callback?: (builder: PseudoStateBuilder) => void | PseudoStateBuilder): this;
+	/**
+	 * Shortcut: `.hover(h => h.effect(name))`.
+	 * Named interaction effect on `:hover` (forward, float, grow, nudge, …).
+	 */
+	hoverEffect(name: string): this;
+	/**
+	 * Shortcut: `.press(p => p.effect(name))` (maps to `:active`).
+	 */
+	pressEffect(name: string): this;
+	/**
+	 * Shortcut: `.focus(f => f.effect(name))`.
+	 */
+	focusEffect(name: string): this;
+	/**
+	 * Shortcut: `.active(a => a.effect(name))`.
+	 */
+	activeEffect(name: string): this;
+	/**
+	 * Shortcut: `.groupHover(h => h.effect(name))`.
+	 */
+	groupHoverEffect(name: string): this;
+	focusVisible(): PseudoStateBuilder;
+	focusVisible(callback: PseudoStateFn): this;
+	stagger(ms: number): this;
+	/** Scroll-reveal: IntersectionObserver toggles `.fibo-inview`. */
+	reveal(preset?: string | {
+		preset?: string;
+		once?: boolean;
+		rootMargin?: string;
+		threshold?: number;
+	}, options?: {
+		once?: boolean;
+		rootMargin?: string;
+		threshold?: number;
+	}): this;
+	/** Alias of `.reveal()` for scroll-triggered presets. */
+	onScroll(preset?: string): this;
+	/** CSS `animation-timeline: view()` / `scroll()`; IntersectionObserver reveal is the fallback. */
+	scrollTimeline(kind?: "view" | "scroll"): this;
+	scrollProgress(): this;
+	smoothScroll(): this;
+	scrollSnap(axis?: "x" | "y" | "both"): this;
+	scrollSnapAlign(align?: "start" | "center" | "end"): this;
+	sticky(top?: number | string | boolean): this;
+	/**
+	 * Publish `--fibo-sticky-offset` on `:root` so `.anchor()` / `html` scroll-padding
+	 * clear this bar. Header uses the real bar height.
+	 */
+	protected publishStickyOffset(value: number | string): void;
+	viewTransition(name: string): this;
+	/** Default `:focus-visible` ring. Pass a callback to customize. */
+	focusRing(color?: string): this;
+	protected ensureInteractiveTransition(): void;
+	/**
+	 * Prepare resting styles + transition so pseudo-state longhands (bg/border/transform)
+	 * interpolate instead of snapping. Safe to call repeatedly from PseudoStateBuilder.
+	 * @internal
+	 */
+	prepareSmoothInteraction(properties: string[]): void;
+	/** @internal Convert inline background/border shorthands → longhands. */
+	promoteSurfaceLonghands(): void;
+	/** @internal Stamp translate3d(0,0,0) when no resting transform exists. */
+	ensureRestTransform(): void;
+	/**
+	 * Ensure the base element transitions the properties an interaction effect needs.
+	 * Expands an auto-managed transition; no-ops if the caller set `.transition(...)`
+	 * explicitly or a motion animation class is present.
+	 * @internal Used by PseudoStateBuilder.effect() and hover/press shortcuts.
+	 */
+	ensureEffectTransition(properties: string[]): void;
+	/**
+	 * Apply a theme to this node and descendants (CSS vars inherit).
+	 * Fluent: `.theme("noir")` | `.theme(noirTheme)` | `.theme(extendTheme(webTheme, {…}))`.
+	 * SSR-safe: class + inline vars on first paint (no useEffect).
+	 */
+	theme(input: ThemeInput): this;
+	/** Prefer dark/light system chrome for native controls under this subtree. */
+	colorScheme(scheme: "light" | "dark" | "light dark"): this;
+	hover(): PseudoStateBuilder;
+	hover(callback: PseudoStateFn): this;
+	/**
+	 * Paint for a `When` state. Hover / focus / active / visited / disabled
+	 * write a CSS pseudo on this node. `on` / `off` are for Checkbox and Switch.
+	 *
+	 * ```ts
+	 * Row().when(When.hover, (s) => s.bg('#c8ff00'))
+	 * ```
+	 */
+	when(state: When, style: WhenStyle): this;
+	focus(): PseudoStateBuilder;
+	focus(callback: PseudoStateFn): this;
+	active(): PseudoStateBuilder;
+	active(callback: PseudoStateFn): this;
+	visited(): PseudoStateBuilder;
+	visited(callback: PseudoStateFn): this;
+	disabledState(): PseudoStateBuilder;
+	disabledState(callback: PseudoStateFn): this;
+	focusWithin(): PseudoStateBuilder;
+	focusWithin(callback: PseudoStateFn): this;
+	firstChild(): PseudoStateBuilder;
+	firstChild(callback: PseudoStateFn): this;
+	lastChild(): PseudoStateBuilder;
+	lastChild(callback: PseudoStateFn): this;
+	groupHover(): PseudoStateBuilder;
+	groupHover(callback: PseudoStateFn): this;
+	groupFocus(): PseudoStateBuilder;
+	groupFocus(callback: PseudoStateFn): this;
+	groupActive(): PseudoStateBuilder;
+	groupActive(callback: PseudoStateFn): this;
+	groupFocusWithin(): PseudoStateBuilder;
+	groupFocusWithin(callback: PseudoStateFn): this;
+	group(): this;
+	protected _childFunction?: () => FiboChild | FiboChild[];
+	children(children: FiboChildren): this;
+	protected getClassName(): string;
+	protected getStyle(): React$1.CSSProperties;
+	protected processChildren(): React$1.ReactNode[];
+	protected getChildFunction(): (() => FiboChild | FiboChild[]) | undefined;
+	/**
+	 * @deprecated Builders are React elements. Returning or nesting the builder is enough.
+	 * `.build()` still assembles the host tree for older call sites.
+	 */
+	abstract build(): React$1.ReactElement;
+}
+type KnownKeys<T> = {
+	[K in keyof T]: string extends K ? never : number extends K ? never : K;
+} extends {
+	[_ in keyof T]: infer U;
+} ? U : never;
+type StyleBuilder<T> = T & LogicalAxes & {
+	[K in KnownKeys<React$1.CSSProperties>]-?: (value: React$1.CSSProperties[K]) => StyleBuilder<T>;
+} & React$1.ReactElement;
+interface SignalLike<T> {
+	value: T;
+	subscribe: (listener: (val: T) => void) => () => void;
+}
+declare class FluentValueBuilder<T> {
+	private _signal;
+	private _loading?;
+	private _error?;
+	private _builder?;
+	constructor(_signal: SignalLike<T>);
+	loading(component: React$1.ReactNode | (() => React$1.ReactNode)): this;
+	error(component: (error: Error | unknown) => React$1.ReactNode): this;
+	builder(fn: (value: T) => React$1.ReactNode): this;
+	children(fn: (value: T) => React$1.ReactNode): this;
+	build(): React$1.ReactElement;
+}
+export declare function ValueBuilder<T>(signal: SignalLike<T>): FluentValueBuilder<T>;
+type PresenceShow = boolean | BindableSignal<boolean>;
+export interface PresenceProps {
+	show: PresenceShow;
+	enter?: MotionPreset | string;
+	exit?: MotionPreset | string;
+	duration?: number;
+	reducedMotion?: "reduce" | "never";
+	children?: React$1.ReactNode;
+}
+declare class PresenceBuilder extends FiboBuilder {
+	private _show;
+	private _enter;
+	private _exit;
+	constructor(show?: PresenceShow);
+	show(value: PresenceShow): this;
+	enter(preset: MotionPreset | string): this;
+	exit(preset: MotionPreset | string): this;
+	duration(ms: number): this;
+	build(): React$1.ReactElement;
+}
+declare const presenceBuilder: (show?: PresenceShow | undefined) => StyleBuilder<PresenceBuilder>;
+export declare function Presence(show?: PresenceShow): ReturnType<typeof presenceBuilder>;
+export declare function Presence(props: PresenceProps): React$1.ReactElement;
+export declare namespace Presence {
+	var displayName: string;
+}
+export interface RevealProps {
+	preset?: string;
+	once?: boolean;
+	rootMargin?: string;
+	threshold?: number;
+	forceMotion?: boolean;
+	/** @deprecated Ignored — view-timeline never skips IO (was forcing fibo-inview on load). */
+	preferTimeline?: boolean;
+	/** CSS vars (`--fibo-dur`, `--fibo-ease`, `--fibo-delay`) for the reveal wrapper. */
+	style?: React$1.CSSProperties;
+	children?: React$1.ReactNode;
+}
+/** IntersectionObserver toggles `.fibo-inview`. Motion is CSS — no rAF. */
+export declare function Reveal({ preset, once, rootMargin, threshold, forceMotion, style, children, }: RevealProps): React$1.DetailedReactHTMLElement<{
+	ref: React$1.RefObject<HTMLDivElement>;
+	className: string;
+	style: React$1.CSSProperties | undefined;
+	"data-fibo-reveal": string;
+}, HTMLDivElement>;
+interface ScrollProgressProps {
+	children: React$1.ReactElement;
+}
+/** Binds `--fibo-progress` from scroll when `animation-timeline: scroll()` is missing. No rAF. */
+export declare function ScrollProgress({ children }: ScrollProgressProps): React$1.DetailedReactHTMLElement<{
+	ref: React$1.RefObject<HTMLDivElement>;
+	"data-fibo-scroll-progress": string;
+	style: {
+		display: "contents";
+	};
+}, HTMLDivElement>;
+type ScrollToOptions$1 = {
+	behavior?: ScrollBehavior;
+	block?: ScrollLogicalPosition;
+	/** Also set `location.hash` (in-page anchor navigation). */
+	hash?: boolean;
 };
-export type FormMethod = (typeof FormMethod)[keyof typeof FormMethod];
-export declare const Trend: {
-	readonly up: "up";
-	readonly down: "down";
-	readonly neutral: "neutral";
+/**
+ * Smooth-scroll to an element id / selector / Element.
+ * Pass `hash: true` to update the URL hash (replaces the old site-only `goHash`).
+ */
+declare function scrollTo$1(target: string | Element, options?: ScrollToOptions$1): void;
+export declare function startViewTransition(update: () => void): void;
+export declare function supportsViewTimeline(): boolean;
+export declare function supportsScrollTimeline(): boolean;
+/** Write text to the system clipboard. Returns false if unavailable. */
+export declare function writeClipboard(text: string): Promise<boolean>;
+/** Open a URL (default: new tab + noopener). Canonical name. */
+declare function open$1(url: string, options?: {
+	target?: "_blank" | "_self";
+	features?: string;
+}): void;
+/** Alias — name the fibogrid site already used. Do not remove (no break). */
+export declare const openExternal: typeof open$1;
+/**
+ * In-page hash jump. Name the site already used.
+ * Implementation = existing `scrollTo(id, { hash: true })` (no parallel logic).
+ */
+export declare function goHash(id: string, options?: {
+	behavior?: ScrollBehavior;
+	block?: ScrollLogicalPosition;
+}): void;
+export type HotkeyChord = {
+	key: string;
+	meta?: boolean;
+	ctrl?: boolean;
+	alt?: boolean;
+	shift?: boolean;
+	/** Require meta OR ctrl (⌘K / Ctrl+K). */
+	metaOrCtrl?: boolean;
+	preventDefault?: boolean;
+	when?: () => boolean;
+	run: () => void;
 };
-export type Trend = (typeof Trend)[keyof typeof Trend];
-export declare const Stroke: {
-	readonly butt: "butt";
-	readonly round: "round";
-	readonly square: "square";
+/** Bind global keydown chords. Returns unsubscribe. SSR-safe. */
+export declare function bindHotkeys(chords: HotkeyChord[]): () => void;
+/**
+ * AUTO-GENERATED by scripts/gen-interaction-fx.mjs — do not edit by hand.
+ * Fiboui-owned interaction effects (Hover.css–inspired names, not a vendor dump).
+ */
+export declare const FIBO_INTERACTION_FX_CSS: string;
+/**
+ * Inject the full interaction-effect sheet once.
+ * Idempotent via StyleManager cache — must NOT use a module flag, or
+ * `endSsrRequest()` / `StyleManager.reset()` would skip re-injection on the
+ * next SSR request and drop FX CSS from the snapshot.
+ */
+export declare function ensureInteractionFxCss(): void;
+export declare function ensureMotionCss(): void;
+export declare function getMotionCss(): string;
+export declare function getCss(): string;
+/** `<style id="fibo-dynamic-styles">` HTML. Call **after** `renderToString` so rules are collected. */
+export declare function getStyleTag(): string;
+/**
+ * Reset the StyleManager singleton between SSR requests (Next.js / custom servers).
+ * Call after the response CSS has been captured when using `<FiboStyles />` mid-tree.
+ */
+export declare function endSsrRequest(): void;
+/**
+ * Inject collected CSS into a document. Place as a **later sibling** of the app
+ * so registrations from children run first during SSR.
+ */
+export declare function FiboStyles(): React$1.ReactElement;
+export declare function MotionStyles(): React$1.ReactElement;
+export type FiboPageBuild = () => FiboChild | React$1.ReactNode;
+type FiboPageMeta = {
+	title?: string;
+	description?: string;
 };
-export type Stroke = (typeof Stroke)[keyof typeof Stroke];
-export declare const Join: {
-	readonly miter: "miter";
-	readonly round: "round";
-	readonly bevel: "bevel";
+export type FiboPageOptions = {
+	/** Append `<FiboStyles />` after the tree (SSR dynamic CSS). Default true. */
+	styles?: boolean;
+	/** SSR `<title>` / `<meta name="description">` (React 19 hoists into `<head>`). */
+	meta?: FiboPageMeta;
 };
-export type Join = (typeof Join)[keyof typeof Join];
-export declare const Scale: {
-	readonly small: "small";
-	readonly medium: "medium";
-	readonly large: "large";
+type FiboPageComponent = React$1.ComponentType & {
+	meta?: FiboPageMeta;
 };
-export type Scale = (typeof Scale)[keyof typeof Scale];
-export declare const Density: {
-	readonly small: "small";
-	readonly medium: "medium";
-	readonly large: "large";
+/**
+ * Next/Vite page helper — **zero JSX** in app code, SSR-safe.
+ *
+ * Next App Router still SSRs Client Components: HTML is rendered on the server,
+ * then hydrated. Import `fiboui/style.css` once from `app/layout.tsx` (or the
+ * Vite entry) so the base sheet is in the document on first paint.
+ *
+ * ```ts
+ * // app/page.tsx — Server Component (no 'use client')
+ * import { page, Column, Text } from 'fiboui'
+ *
+ * export default page(() =>
+ *   Column().gap(12).children([Text('Hello')])
+ * )
+ * ```
+ *
+ * App Router resolves `fiboui` via the `react-server` export (static builders).
+ * `build()` runs during RSC render so StyleManager rules exist before `<FiboStyles />`.
+ */
+export declare function page(build: FiboPageBuild, options?: FiboPageOptions): FiboPageComponent;
+/**
+ * Alias of `page()`. Prefer `export default page(() => …)` from a Server Component.
+ */
+export declare const createPage: typeof page;
+/**
+ * Wrap any builder / node with `FiboStyles` without JSX.
+ *
+ * ```ts
+ * export default function Home() {
+ *   return withFiboStyles(Column().children([Text('Hi')]))
+ * }
+ * ```
+ */
+export declare function withFiboStyles(child: FiboChild | React$1.ReactNode): React$1.ReactElement;
+/**
+ * Current viewport width. Hydration uses 1024 (desktop) so the first client
+ * render matches SSR; the real width arrives after mount.
+ * Prefer `.md()` / `.responsive()` (CSS `@media`) over this hook.
+ */
+export declare function useViewportWidth(): number;
+type Constructor<T = any> = new (...args: any[]) => T;
+type Factory<T = any> = () => T;
+type Provider<T = any> = Constructor<T> | Factory<T> | T;
+type Token<T = any> = string | symbol | Constructor<T>;
+export interface RouteDefinition {
+	path: string;
+	component: () => FiboBuilder;
+	meta?: Record<string, any>;
+}
+export interface SidebarConfig {
+	label: string;
+	icon?: any;
+	path: string;
+	order?: number;
+}
+export interface FiboContext {
+	registerService<T>(token: Token<T>, implementation: Provider<T>): void;
+	registerStore(store: unknown, name?: string): void;
+	getStore?<T = unknown>(name: string): T | undefined;
+	registerRoute(route: RouteDefinition): void;
+	registerSidebarItem(item: SidebarConfig): void;
+	registerTopbarAction(component: () => FiboBuilder): void;
+	registerOverlay(component: () => FiboBuilder): void;
+}
+type PluginSetup = (context: FiboContext) => void;
+export interface FiboPlugin {
+	name: string;
+	version?: string;
+	setup: PluginSetup;
+	teardown?: PluginSetup;
+}
+export declare class FiboAppBuilder {
+	private _rootComponent;
+	private _rootElement;
+	private _plugins;
+	private _reactRoot;
+	private _installed;
+	use(plugin: FiboPlugin): this;
+	plugins(pluginsList: FiboPlugin[]): this;
+	root(component: React$1.ComponentType): this;
+	mount(elementId: string, options?: {
+		strict?: boolean;
+	}): () => void;
+	unmount(): void;
+	private build;
+}
+export declare const FiboApp: () => FiboAppBuilder;
+/** Turn a builder (or already-built node) into a React node. */
+export declare function toElement(node: FiboChild): React$1.ReactNode;
+/**
+ * Optional wrapper. Builders are already React elements:
+ *
+ * ```tsx
+ * function App() {
+ *   return Button('Save').onPress(save);
+ * }
+ * ```
+ */
+export declare function Fibo({ children }: {
+	children: FiboChild;
+}): React$1.ReactElement;
+/**
+ * Mount a page that returns a builder — no `.build()` on the root.
+ *
+ * ```ts
+ * function App() {
+ *   return Column().children([Text('Hi')]);
+ * }
+ * mount('#root', App);
+ * ```
+ */
+export declare function mount(target: string | Element, app: (() => FiboChild) | FiboChild, options?: {
+	strict?: boolean;
+}): Root;
+/**
+ * Client: process singleton via `getInstance()`.
+ * SSR: wrap a request in `run()` for an isolated instance, or call `reset()`
+ * between requests. `endSsrRequest()` also resets this manager when `window`
+ * is missing (Node). FiboApp is `'use client'` and uninstalls on unmount.
+ */
+export declare class PluginManager implements FiboContext {
+	private static instance;
+	private static scopeStack;
+	/** Shared across `run()` scopes — the DI container is process-wide. */
+	private static serviceRefs;
+	private plugins;
+	/** `setup()` in flight — not yet in `plugins`, so Map order stays completion/LIFO. */
+	private installing;
+	private routes;
+	private sidebarItems;
+	private topbarActions;
+	private overlays;
+	private stores;
+	private storeSeq;
+	private constructor();
+	static getInstance(): PluginManager;
+	/** Isolated manager for one SSR request (or test). Client `getInstance()` is unchanged. */
+	static run<T>(fn: () => T): T;
+	/** Drop every plugin (runs teardown) and replace the process singleton. */
+	static reset(): void;
+	/** @see reset */
+	static resetForTests(): void;
+	has(name: string): boolean;
+	use(plugin: FiboPlugin): this;
+	uninstall(name: string): boolean;
+	private uninstallAllSafe;
+	private createOwned;
+	private dropOwned;
+	registerService<T>(token: Token<T>, implementation: Provider<T>): void;
+	registerStore(store: unknown, name?: string): void;
+	private registerStoreKeyed;
+	getStore<T = unknown>(name: string): T | undefined;
+	getStores(): Map<string, unknown>;
+	registerRoute(route: RouteDefinition): void;
+	registerSidebarItem(item: SidebarConfig): void;
+	registerTopbarAction(component: () => FiboBuilder): void;
+	registerOverlay(component: () => FiboBuilder): void;
+	getRoutes(): RouteDefinition[];
+	getSidebarItems(): SidebarConfig[];
+	getTopbarActions(): (() => FiboBuilder)[];
+	getOverlays(): (() => FiboBuilder)[];
+}
+/**
+ * SwiftUI-ish `Transaction` — scoped animation flag for `withAnimation`.
+ * Not a full animation graph; pairs with view transitions + existing `.animate`.
+ */
+export type Transaction = {
+	/** `false` = disable; `true` = default VT; object = hint for callers. */
+	animation: boolean | Partial<AnimationOptions>;
 };
-export type Density = Scale;
-export declare function isSizeWord(value: string): value is Size;
-/** CSS length a size word locks to, so a flex parent cannot squash it. */
-export declare function sizeWordCss(word: string, axis: "width" | "height"): string | undefined;
+/** Active transaction inside `withAnimation` / `withTransaction`, else `null`. */
+export declare function transaction(): Transaction | null;
+export declare function withTransaction<T>(tx: Transaction, body: () => T): T;
+/**
+ * SwiftUI `withAnimation` — run `body` inside a view transition when available.
+ *
+ * ```ts
+ * withAnimation(() => count.value++)
+ * withAnimation({ duration: 0.3 }, () => open.value = true)
+ * withAnimation(false, () => open.value = true) // no VT
+ * ```
+ *
+ * Does **not** replace `.animate()` (CSS presets) or `Presence` (enter/exit).
+ */
+export declare function withAnimation<T>(body: () => T): T;
+export declare function withAnimation<T>(animation: boolean | Partial<AnimationOptions>, body: () => T): T;
 interface FiboThemeContextValue {
 	theme: FiboTheme;
 	themeName: string;
@@ -2397,6 +3063,8 @@ declare class ContainerBuilder extends FiboBuilder {
 	children(children: FiboChildren): this;
 	props(value: Record<string, any>): this;
 	padding(value: string | number): this;
+	padding(edges: EdgeSet, value: string | number): this;
+	padding(insets: EdgeInsetsValue): this;
 	paddingHorizontal(value: string | number): this;
 	paddingVertical(value: string | number): this;
 	paddingLeft(value: string | number): this;
@@ -2509,6 +3177,12 @@ declare class ScaffoldBuilder extends FiboBuilder {
 	headerBar(config: FiboChild | LayoutBarConfig): this;
 	/** Flutter `Scaffold.appBar`. Same slot as `.headerBar()`. */
 	appBar(config: FiboChild | LayoutBarConfig): this;
+	/**
+	 * SwiftUI `.navigationTitle` — fills the header bar via existing `Header` chrome.
+	 * Does **not** add a sixth title component; if `.headerBar()` / `.appBar()` is already
+	 * set, this is a no-op (explicit chrome wins).
+	 */
+	navigationTitle(title: string | FiboChild): this;
 	footerBar(config: FiboChild | LayoutBarConfig): this;
 	sideBarLeft(config: FiboChild | LayoutBarConfig): this;
 	sideBarRight(config: FiboChild | LayoutBarConfig): this;
@@ -2620,14 +3294,70 @@ declare class DashboardLayoutBuilder extends FiboBuilder {
 	build(): React$1.ReactElement;
 }
 export declare const DashboardLayout: () => StyleBuilder<DashboardLayoutBuilder>;
+/**
+ * ## ZStack — mental model (SwiftUI / Flutter)
+ *
+ * | FiboUI | SwiftUI | Flutter |
+ * |---|---|---|
+ * | `ZStack` | `ZStack` + `.overlay` | `Stack` |
+ * | child 0 (base) | primary / `.background` host | non-positioned child |
+ * | child 1…n | `.overlay(alignment:)` | `Positioned.fill` + `Align` |
+ * | `.fit('content')` | ideal-size (default) | `StackFit.loose` |
+ * | `.fit('expand')` | frame max / expand | `StackFit.expand` |
+ * | `.alignment(...)` | `Alignment` | `Alignment` |
+ *
+ * **Size (SwiftUI):** the stack’s layout size comes from its children — FiboUI
+ * uses the **base** (index 0) as the size driver (overlays are absolute and
+ * cannot grow the stack). If the base has a fixed `.frame({ width, height })`,
+ * that size is copied onto the ZStack host so chrome/gestures outside the
+ * stack always wrap a real box (no “sometimes empty” hit target).
+ *
+ * You do **not** have to repeat `.frame` on the ZStack when the base is already
+ * framed; an extra `.frame` on the stack still wins (wraps / clamps).
+ *
+ * **Hit-testing (SwiftUI):** taps on containers only hit drawn content unless
+ * `.contentShape(Rectangle())` is set (or a gesture auto-defaults it).
+ *
+ * ```ts
+ * ZStack()
+ *   .alignment(StackAlign.bottom)
+ *   .children([
+ *     Image(url).scaledToFill().frame({ width: 300, height: 400 }),
+ *     Text(title).width('100%').padding(12),
+ *   ])
+ *   .clipShape('8px')
+ *   .contentShape('rectangle') // or rely on gesture default
+ *   .onTapGesture(open)
+ * ```
+ */
+/** @deprecated Prefer {@link StackAlign} / `StackAlign.topTrailing` — same values. */
+export type ZStackAlignment = StackAlign | keyof typeof StackAlign;
+/** `content` = size to base (SwiftUI default / StackFit.loose).
+ *  `expand` = fill parent (StackFit.expand). */
+export type ZStackFit = "content" | "expand";
 declare class ZStackBuilder extends FiboBuilder {
 	private _alignment;
+	private _fit;
+	/** Copied from base child’s fixed frame, if any. */
+	private _baseFixedFrame?;
 	children(children: FiboChildren): this;
 	props(value: Record<string, any>): this;
-	alignment(align: "center" | "top" | "bottom" | "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight"): this;
+	alignment(align: ZStackAlignment): this;
+	/**
+	 * How the stack sizes itself.
+	 * - `content` (default): hug the base child — SwiftUI ideal size / `StackFit.loose`
+	 * - `expand`: fill the parent — `StackFit.expand`
+	 *
+	 * `.hug()` still forces content; explicit `.width('100%')` still fills.
+	 */
+	fit(value: ZStackFit): this;
 	build(): React$1.ReactElement;
 }
 export declare const ZStack: () => StyleBuilder<ZStackBuilder>;
+export interface ZStackProps extends ChildrenProps {
+	alignment?: ZStackAlignment;
+	fit?: ZStackFit;
+}
 declare class LineBuilder extends FiboBuilder {
 	private _sizeHeight?;
 	children(children: FiboChildren): this;
@@ -2658,15 +3388,44 @@ export declare class ScrollController {
 	scrollByChild(dir?: -1 | 1, gap?: number): void;
 	scrollToChild(index: number, gap?: number): void;
 }
+/** Proxy passed to `ScrollViewReader` builder — SwiftUI `ScrollViewProxy`. */
+export type ScrollViewProxy = {
+	/** Scroll the nearest ancestor scroller so `[data-scroll-id=id]` is visible. */
+	scrollTo: (id: string, options?: ScrollIntoViewOptions) => void;
+};
+declare class ScrollViewReaderBuilder extends FiboBuilder {
+	private _builder?;
+	builder(fn: (proxy: ScrollViewProxy) => unknown): this;
+	build(): React$1.ReactElement;
+}
+/**
+ * SwiftUI `ScrollViewReader` — wrap a ScrollView; call `proxy.scrollTo(id)`
+ * for children marked with `.scrollTarget(id)`.
+ *
+ * ```ts
+ * ScrollViewReader().builder((proxy) =>
+ *   Column().children(
+ *     Button('Go').onPress(() => proxy.scrollTo('row-3')),
+ *     ScrollView().children(
+ *       Text('A').scrollTarget('row-1'),
+ *       Text('C').scrollTarget('row-3'),
+ *     )
+ *   )
+ * )
+ * ```
+ */
+export declare const ScrollViewReader: () => StyleBuilder<ScrollViewReaderBuilder>;
 type ScrollDirection = "vertical" | "horizontal" | "both";
 type ScrollbarVisibility = "hidden" | "visible" | "auto";
-type ScrollAnchor = "start" | "center" | "end";
+type ScrollAnchor$1 = "start" | "center" | "end";
 declare class ScrollViewBuilder extends FiboBuilder {
 	private _direction;
 	private _scrollbar;
 	private _controller?;
 	private _anchor?;
 	private _refresh?;
+	private _scrollTargetLayout;
+	private _scrollPosition?;
 	children(children: FiboChildren): this;
 	props(value: Record<string, any>): this;
 	direction(direction: ScrollDirection): this;
@@ -2675,8 +3434,18 @@ declare class ScrollViewBuilder extends FiboBuilder {
 	scrollbar(visibility: ScrollbarVisibility): this;
 	/** Attach a ScrollController for programmatic scroll (carousel prev/next). */
 	controller(controller: ScrollController): this;
-	scrollAnchor(anchor: ScrollAnchor): this;
+	scrollAnchor(anchor: ScrollAnchor$1): this;
 	refreshable(handler: () => void): this;
+	/**
+	 * SwiftUI `scrollTargetLayout` — children participate as scroll targets
+	 * (snap + `data-scroll-target-layout`).
+	 */
+	scrollTargetLayout(enabled?: boolean): this;
+	/**
+	 * SwiftUI `scrollPosition(id:)` — initial / programmatic target id
+	 * (`data-scroll-position`). Pair with `.scrollTarget(id)` on children.
+	 */
+	scrollPosition(id: string): this;
 	/**
 	 * Native scroll listener on the overflow host.
 	 * String presets still alias `.reveal()` from FiboBuilder.
@@ -2700,6 +3469,20 @@ declare class VirtualColumnBuilder extends FiboBuilder {
 	build(): React$1.ReactElement;
 }
 export declare const VirtualColumn: () => StyleBuilder<VirtualColumnBuilder>;
+declare class VirtualRowBuilder extends FiboBuilder {
+	private _itemWidth?;
+	private _estimatedItemWidth?;
+	private _measureItems;
+	private _overscan;
+	private _containerWidth;
+	itemWidth(width: number): this;
+	estimatedItemWidth(width: number): this;
+	measureItems(measure?: boolean): this;
+	overscan(count: number): this;
+	containerWidth(width: number): this;
+	build(): React$1.ReactElement;
+}
+export declare const VirtualRow: () => StyleBuilder<VirtualRowBuilder>;
 type SafeEdge = "top" | "bottom" | "left" | "right";
 type SafeEdges = SafeEdge | "all" | Array<SafeEdge | "all">;
 declare class SafeAreaBuilder extends FiboBuilder {
@@ -2766,16 +3549,42 @@ declare class OrientationBuilderBuilder extends FiboBuilder {
 	build(): React$1.ReactElement;
 }
 export declare const OrientationBuilder: () => StyleBuilder<OrientationBuilderBuilder>;
-type LayoutSize = {
+export type LayoutSize = {
 	width: number;
 	height: number;
 };
+/** SwiftUI-ish safe-area insets (CSS env when available). */
+export type EdgeInsets = {
+	top: number;
+	bottom: number;
+	leading: number;
+	trailing: number;
+};
+/**
+ * SwiftUI `GeometryProxy` — size + safe-area + local / global / named frames.
+ */
+export type GeometryProxy = LayoutSize & {
+	size: LayoutSize;
+	safeAreaInsets: EdgeInsets;
+	/** Frame in `local` | `global` | `CoordinateSpace.named('foo')`. */
+	frame: (inSpace?: "local" | "global" | string) => {
+		x: number;
+		y: number;
+		width: number;
+		height: number;
+	};
+};
 declare class LayoutBuilderBuilder extends FiboBuilder {
 	private _builder?;
-	builder(fn: (size: LayoutSize) => unknown): this;
+	private _coordinateSpace?;
+	builder(fn: (proxy: GeometryProxy) => unknown): this;
+	/** Publish this reader as `CoordinateSpace.named(name)`. */
+	coordinateSpace(name: string): this;
 	build(): React$1.ReactElement;
 }
 export declare const LayoutBuilder: () => StyleBuilder<LayoutBuilderBuilder>;
+/** SwiftUI `GeometryReader` — same as {@link LayoutBuilder}, receives {@link GeometryProxy}. */
+export declare const GeometryReader: () => StyleBuilder<LayoutBuilderBuilder>;
 declare class KeyboardInsetBuilder extends FiboBuilder {
 	private _child?;
 	child(node: FiboChild): this;
@@ -2945,13 +3754,15 @@ declare class LabelBuilder extends FiboBuilder {
 	build(): React$1.ReactElement;
 }
 export declare const Label: (text?: string | undefined) => StyleBuilder<LabelBuilder>;
-type ClipShape = "circle" | "rounded" | "square";
+type ClipShape$1 = "circle" | "rounded" | "square";
 declare class ImageBuilder extends FiboBuilder {
 	private _src;
 	private _alt;
 	private _fit;
 	private _resizable;
-	private _clipShape?;
+	/** Image-native clip (Tailwind / borderRadius on `<img>`). Distinct from
+	 * {@link FiboBuilder.clipShape} chrome wrapper. */
+	private _imageClipShape?;
 	private _frameWidth?;
 	private _frameHeight?;
 	private _foregroundStyle?;
@@ -2961,11 +3772,14 @@ declare class ImageBuilder extends FiboBuilder {
 	resizable(): this;
 	scaledToFit(): this;
 	scaledToFill(): this;
-	frame(dimensions: {
-		width: number;
-		height: number;
-	}): this;
-	clipShape(shape: ClipShape): this;
+	/**
+	 * Fixed numeric `{ width, height }` still paints on the `<img>` (tests +
+	 * object-fit). Any flexible SwiftUI frame (`maxWidth: Size.infinity`, …)
+	 * goes through {@link FiboBuilder.frame} (wrapper).
+	 */
+	frame(dimensions: FrameSpec): this;
+	/** Named shapes paint on `<img>`; other radii use base chrome wrapper. */
+	clipShape(shape: ClipShape$1 | string): this;
 	foregroundStyle(style: string): this;
 	build(): React$1.ReactElement;
 }
@@ -5171,6 +5985,7 @@ export declare function clearPersistedState(key: string, storage?: StorageAdapte
 export declare function getPersistedState<T>(key: string, storage?: StorageAdapter): T | null;
 
 export {
+	DragAxis$1 as DragAxisEnum,
 	Effect$1 as Effect,
 	Image$1 as Image,
 	ScrollToOptions$1 as ScrollToOptions,