@vertz/ui 0.2.22 → 0.2.23

package/dist/shared/{chunk-pq8khh47.js → chunk-xhc7arn9.js}

@@ -3,10 +3,10 @@ import {
   __element,
   __enterChildren,
   __exitChildren
-} from "./chunk-vwz86vg9.js";
+} from "./chunk-13tvh4wq.js";
 import {
   getSSRContext
-} from "./chunk-2qe6aqhb.js";
+} from "./chunk-656n0x6y.js";
 
 // src/component/children.ts
 var MAX_RESOLVE_DEPTH = 100;
@@ -84,6 +84,9 @@ var PROPERTY_MAP = {
   decoration: { properties: ["text-decoration"], valueType: "raw" },
   list: { properties: ["list-style"], valueType: "raw" },
   ring: { properties: ["outline"], valueType: "ring" },
+  overflow: { properties: ["overflow"], valueType: "raw" },
+  "overflow-x": { properties: ["overflow-x"], valueType: "raw" },
+  "overflow-y": { properties: ["overflow-y"], valueType: "raw" },
   cursor: { properties: ["cursor"], valueType: "raw" },
   transition: { properties: ["transition"], valueType: "raw" },
   resize: { properties: ["resize"], valueType: "raw" },
@@ -120,7 +123,16 @@ var KEYWORD_MAP = {
   "whitespace-nowrap": [{ property: "white-space", value: "nowrap" }],
   "shrink-0": [{ property: "flex-shrink", value: "0" }],
   italic: [{ property: "font-style", value: "italic" }],
-  "not-italic": [{ property: "font-style", value: "normal" }]
+  "not-italic": [{ property: "font-style", value: "normal" }],
+  "scale-0": [{ property: "transform", value: "scale(0)" }],
+  "scale-75": [{ property: "transform", value: "scale(0.75)" }],
+  "scale-90": [{ property: "transform", value: "scale(0.9)" }],
+  "scale-95": [{ property: "transform", value: "scale(0.95)" }],
+  "scale-100": [{ property: "transform", value: "scale(1)" }],
+  "scale-105": [{ property: "transform", value: "scale(1.05)" }],
+  "scale-110": [{ property: "transform", value: "scale(1.1)" }],
+  "scale-125": [{ property: "transform", value: "scale(1.25)" }],
+  "scale-150": [{ property: "transform", value: "scale(1.5)" }]
 };
 var DISPLAY_MAP = {
   flex: "flex",
@@ -450,23 +462,38 @@ function resolveSpacing(value, property) {
     return scaled;
   throw new TokenResolveError(`Invalid spacing value '${value}' for '${property}'. Use a spacing scale number (0, 1, 2, 4, 8, etc.) or 'auto'.`, `${property}:${value}`);
 }
+var OPACITY_PATTERN = /^(.+)\/(\d+)$/;
 function resolveColor(value, property) {
-  const dotIndex = value.indexOf(".");
+  const opacityMatch = OPACITY_PATTERN.exec(value);
+  if (opacityMatch && opacityMatch[1] && opacityMatch[2]) {
+    const colorPart = opacityMatch[1];
+    const opacityStr = opacityMatch[2];
+    const opacity = Number(opacityStr);
+    if (opacity < 0 || opacity > 100) {
+      throw new TokenResolveError(`Invalid opacity '${opacityStr}' in '${value}'. Opacity must be an integer between 0 and 100.`, `${property}:${value}`);
+    }
+    const resolvedColor = resolveColorToken(colorPart, property, value);
+    return `color-mix(in oklch, ${resolvedColor} ${opacity}%, transparent)`;
+  }
+  return resolveColorToken(value, property, value);
+}
+function resolveColorToken(token, property, fullValue) {
+  const dotIndex = token.indexOf(".");
   if (dotIndex !== -1) {
-    const namespace = value.substring(0, dotIndex);
-    const shade = value.substring(dotIndex + 1);
+    const namespace = token.substring(0, dotIndex);
+    const shade = token.substring(dotIndex + 1);
     if (COLOR_NAMESPACES.has(namespace)) {
       return `var(--color-${namespace}-${shade})`;
     }
-    throw new TokenResolveError(`Unknown color token '${value}'. Known namespaces: ${[...COLOR_NAMESPACES].join(", ")}`, `${property}:${value}`);
+    throw new TokenResolveError(`Unknown color token '${fullValue}'. Known namespaces: ${[...COLOR_NAMESPACES].join(", ")}`, `${property}:${fullValue}`);
   }
-  if (COLOR_NAMESPACES.has(value)) {
-    return `var(--color-${value})`;
+  if (COLOR_NAMESPACES.has(token)) {
+    return `var(--color-${token})`;
   }
-  if (CSS_COLOR_KEYWORDS.has(value)) {
-    return value;
+  if (CSS_COLOR_KEYWORDS.has(token)) {
+    return token;
   }
-  throw new TokenResolveError(`Unknown color token '${value}'. Use a design token name (e.g. 'primary', 'background') or 'primary.700' for shades.`, `${property}:${value}`);
+  throw new TokenResolveError(`Unknown color token '${fullValue}'. Use a design token name (e.g. 'primary', 'background') or 'primary.700' for shades.`, `${property}:${fullValue}`);
 }
 function resolveRadius(value, property) {
   const scaled = RADIUS_SCALE[value];
@@ -480,6 +507,7 @@ function resolveShadow(value, property) {
     return scaled;
   throw new TokenResolveError(`Invalid shadow value '${value}' for '${property}'. Use: ${Object.keys(SHADOW_SCALE).join(", ")}`, `${property}:${value}`);
 }
+var FRACTION_PATTERN = /^(\d+)\/(\d+)$/;
 function resolveSize(value, property) {
   const spaced = SPACING_SCALE[value];
   if (spaced !== undefined)
@@ -490,7 +518,18 @@ function resolveSize(value, property) {
   const keyword = SIZE_KEYWORDS[value];
   if (keyword !== undefined)
     return keyword;
-  throw new TokenResolveError(`Invalid size value '${value}' for '${property}'. Use a spacing scale number or keyword (full, screen, min, max, fit, auto).`, `${property}:${value}`);
+  const fractionMatch = FRACTION_PATTERN.exec(value);
+  if (fractionMatch) {
+    const numerator = Number(fractionMatch[1]);
+    const denominator = Number(fractionMatch[2]);
+    if (denominator === 0) {
+      throw new TokenResolveError(`Invalid fraction '${value}' for '${property}'. Denominator cannot be zero.`, `${property}:${value}`);
+    }
+    const percent = numerator / denominator * 100;
+    const formatted = percent % 1 === 0 ? `${percent}` : percent.toFixed(6);
+    return `${formatted}%`;
+  }
+  throw new TokenResolveError(`Invalid size value '${value}' for '${property}'. Use a spacing scale number, keyword (full, screen, min, max, fit, auto), or fraction (1/2, 2/3, etc.).`, `${property}:${value}`);
 }
 function resolveAlignment(value, property) {
   const mapped = ALIGNMENT_MAP[value];

package/dist/src/auth/public.js

@@ -1,9 +1,9 @@
 import {
   RouterContext
-} from "../../shared/chunk-4cmt1ve8.js";
+} from "../../shared/chunk-f4d5nphq.js";
 import {
   isBrowser
-} from "../../shared/chunk-bybgyjye.js";
+} from "../../shared/chunk-da2w7j7w.js";
 import {
   _tryOnCleanup,
   computed,
@@ -11,7 +11,7 @@ import {
   getSSRContext,
   signal,
   useContext
-} from "../../shared/chunk-2qe6aqhb.js";
+} from "../../shared/chunk-656n0x6y.js";
 
 // src/auth/access-context.ts
 var AccessContext = createContext(undefined, "@vertz/ui::AccessContext");

package/dist/src/css/public.d.ts

@@ -1,6 +1,6 @@
 /** All keyword names. */
-type Keyword = "flex" | "grid" | "block" | "inline" | "hidden" | "inline-flex" | "flex-1" | "flex-col" | "flex-row" | "flex-wrap" | "flex-nowrap" | "fixed" | "absolute" | "relative" | "sticky" | "uppercase" | "lowercase" | "capitalize" | "outline-none" | "overflow-hidden" | "select-none" | "pointer-events-none" | "whitespace-nowrap" | "shrink-0" | "italic" | "not-italic";
-type BaseUtility = Keyword | `${SpacingProperty}:${SpacingValue}` | `${BgColorProperty}:${ColorToken}` | `${SizeProperty}:${SizeKeyword | SpacingValue | "screen"}` | `${RadiusProperty}:${RadiusValue}` | `${ShadowProperty}:${ShadowValue}` | `${AlignmentProperty}:${AlignmentValue}` | `${FontWeightProperty}:${FontWeightValue}` | `${LineHeightProperty}:${LineHeightValue}` | `${ContentProperty}:${ContentValue}` | `${RawProperty}:${string}` | `ring:${`${number}` | ColorToken}` | `text:${FontSizeValue | TextAlignKeyword | ColorToken}` | `font:${FontSizeValue | FontWeightValue}` | `border:${`${number}` | ColorToken}` | `list:${ListKeyword}`;
+type Keyword = "flex" | "grid" | "block" | "inline" | "hidden" | "inline-flex" | "flex-1" | "flex-col" | "flex-row" | "flex-wrap" | "flex-nowrap" | "fixed" | "absolute" | "relative" | "sticky" | "uppercase" | "lowercase" | "capitalize" | "outline-none" | "overflow-hidden" | "select-none" | "pointer-events-none" | "whitespace-nowrap" | "shrink-0" | "italic" | "not-italic" | "scale-0" | "scale-75" | "scale-90" | "scale-95" | "scale-100" | "scale-105" | "scale-110" | "scale-125" | "scale-150";
+type BaseUtility = Keyword | `${SpacingProperty}:${SpacingValue}` | `${BgColorProperty}:${ColorToken}` | `${SizeProperty}:${SizeKeyword | SpacingValue | "screen" | `${number}/${number}`}` | `${RadiusProperty}:${RadiusValue}` | `${ShadowProperty}:${ShadowValue}` | `${AlignmentProperty}:${AlignmentValue}` | `${FontWeightProperty}:${FontWeightValue}` | `${LineHeightProperty}:${LineHeightValue}` | `${ContentProperty}:${ContentValue}` | `${RawProperty}:${string}` | `ring:${`${number}` | ColorToken}` | `text:${FontSizeValue | TextAlignKeyword | ColorToken}` | `font:${FontSizeValue | FontWeightValue}` | `border:${`${number}` | ColorToken}` | `list:${ListKeyword}`;
 type PseudoUtility = `${PseudoPrefix}:${Keyword}` | `${PseudoPrefix}:${PropertyName}:${string}`;
 /**
 * Union of all valid CSS utility class strings.

package/dist/src/css/public.js

@@ -8,11 +8,11 @@ import {
   globalCss,
   s,
   variants
-} from "../../shared/chunk-pq8khh47.js";
-import"../../shared/chunk-vwz86vg9.js";
+} from "../../shared/chunk-xhc7arn9.js";
+import"../../shared/chunk-13tvh4wq.js";
 import"../../shared/chunk-prj7nm08.js";
-import"../../shared/chunk-c61572xp.js";
-import"../../shared/chunk-2qe6aqhb.js";
+import"../../shared/chunk-2y9f9j62.js";
+import"../../shared/chunk-656n0x6y.js";
 export {
   variants,
   s,

package/dist/src/form/public.js

@@ -3,8 +3,8 @@ import {
   form,
   formDataToObject,
   validate
-} from "../../shared/chunk-yb4a0smw.js";
-import"../../shared/chunk-2qe6aqhb.js";
+} from "../../shared/chunk-4gmtsf6v.js";
+import"../../shared/chunk-656n0x6y.js";
 export {
   validate,
   formDataToObject,

package/dist/src/index.d.ts

@@ -139,6 +139,51 @@ interface ErrorBoundaryProps {
 */
 declare function ErrorBoundary(props: ErrorBoundaryProps): JsxElement;
 /**
+* Props for the Foreign component.
+*
+* `<Foreign>` renders a container element whose children are owned by
+* external (non-Vertz) code. During hydration, the container is claimed
+* but its children are not walked — external content is preserved.
+*/
+interface ForeignProps {
+	/**
+	* HTML tag for the container element.
+	* @default 'div'
+	*/
+	tag?: keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap;
+	/**
+	* Called when the container is ready for external DOM manipulation.
+	* Runs after hydration is complete (post-hydration onMount timing).
+	* Return a cleanup function for unmount.
+	*
+	* This is the sole way to access the container element.
+	* For SVG tags, cast to the appropriate SVG element type.
+	*/
+	onReady?: (container: HTMLElement | SVGElement) => (() => void) | void;
+	/** Element id */
+	id?: string;
+	/** CSS class name */
+	className?: string;
+	/** Inline styles (camelCase object) */
+	style?: Partial<CSSStyleDeclaration>;
+	/**
+	* Children are not supported. Foreign renders an empty container
+	* whose children are managed by external code via onReady.
+	*/
+	children?: never;
+}
+/**
+* Foreign component — renders an unmanaged subtree container.
+*
+* Claims the container element during hydration without entering its children.
+* External code owns the container's children via the `onReady` callback,
+* which fires in post-hydration `onMount` timing.
+*
+* Implemented as a hand-written `.ts` component (no JSX, no compiler transforms)
+* because it's a framework primitive that uses `__element()` directly.
+*/
+declare function Foreign({ tag, onReady, id, className, style }: ForeignProps): Element;
+/**
 * Runs callback once on mount. Never re-executes.
 * Return a function to register cleanup that runs on unmount.
 *
@@ -224,8 +269,8 @@ declare const slideOutToRight: string;
 declare const accordionDown: string;
 declare const accordionUp: string;
 /** All keyword names. */
-type Keyword = "flex" | "grid" | "block" | "inline" | "hidden" | "inline-flex" | "flex-1" | "flex-col" | "flex-row" | "flex-wrap" | "flex-nowrap" | "fixed" | "absolute" | "relative" | "sticky" | "uppercase" | "lowercase" | "capitalize" | "outline-none" | "overflow-hidden" | "select-none" | "pointer-events-none" | "whitespace-nowrap" | "shrink-0" | "italic" | "not-italic";
-type BaseUtility = Keyword | `${SpacingProperty}:${SpacingValue}` | `${BgColorProperty}:${ColorToken}` | `${SizeProperty}:${SizeKeyword | SpacingValue | "screen"}` | `${RadiusProperty}:${RadiusValue}` | `${ShadowProperty}:${ShadowValue}` | `${AlignmentProperty}:${AlignmentValue}` | `${FontWeightProperty}:${FontWeightValue}` | `${LineHeightProperty}:${LineHeightValue}` | `${ContentProperty}:${ContentValue}` | `${RawProperty}:${string}` | `ring:${`${number}` | ColorToken}` | `text:${FontSizeValue | TextAlignKeyword | ColorToken}` | `font:${FontSizeValue | FontWeightValue}` | `border:${`${number}` | ColorToken}` | `list:${ListKeyword}`;
+type Keyword = "flex" | "grid" | "block" | "inline" | "hidden" | "inline-flex" | "flex-1" | "flex-col" | "flex-row" | "flex-wrap" | "flex-nowrap" | "fixed" | "absolute" | "relative" | "sticky" | "uppercase" | "lowercase" | "capitalize" | "outline-none" | "overflow-hidden" | "select-none" | "pointer-events-none" | "whitespace-nowrap" | "shrink-0" | "italic" | "not-italic" | "scale-0" | "scale-75" | "scale-90" | "scale-95" | "scale-100" | "scale-105" | "scale-110" | "scale-125" | "scale-150";
+type BaseUtility = Keyword | `${SpacingProperty}:${SpacingValue}` | `${BgColorProperty}:${ColorToken}` | `${SizeProperty}:${SizeKeyword | SpacingValue | "screen" | `${number}/${number}`}` | `${RadiusProperty}:${RadiusValue}` | `${ShadowProperty}:${ShadowValue}` | `${AlignmentProperty}:${AlignmentValue}` | `${FontWeightProperty}:${FontWeightValue}` | `${LineHeightProperty}:${LineHeightValue}` | `${ContentProperty}:${ContentValue}` | `${RawProperty}:${string}` | `ring:${`${number}` | ColorToken}` | `text:${FontSizeValue | TextAlignKeyword | ColorToken}` | `font:${FontSizeValue | FontWeightValue}` | `border:${`${number}` | ColorToken}` | `list:${ListKeyword}`;
 type PseudoUtility = `${PseudoPrefix}:${Keyword}` | `${PseudoPrefix}:${PropertyName}:${string}`;
 /**
 * Union of all valid CSS utility class strings.
@@ -661,18 +706,18 @@ declare function getAdapter(): RenderAdapter;
 */
 declare function setAdapter(adapter: RenderAdapter | null): void;
 /**
-* Create a DOM adapter that delegates to real browser DOM APIs.
-* Zero overhead — no branding, no wrapping.
-* Browser `Node` instances pass `isRenderNode()` via the `instanceof Node` fallback.
-*/
-declare function createDOMAdapter(): RenderAdapter;
-/**
 * Wait for all CSS animations on an element to complete, then call back.
 * If no animations are running, calls back immediately.
 * Respects prefers-reduced-motion by skipping the wait.
 */
 declare function onAnimationsComplete(el: Element, callback: () => void): void;
 /**
+* Create a DOM adapter that delegates to real browser DOM APIs.
+* Zero overhead — no branding, no wrapping.
+* Browser `Node` instances pass `isRenderNode()` via the `instanceof Node` fallback.
+*/
+declare function createDOMAdapter(): RenderAdapter;
+/**
 * Create a DOM element with optional static properties.
 *
 * This is a compiler output target — the compiler generates calls
@@ -1537,26 +1582,6 @@ declare function parseSearchParams<T = Record<string, string>>(urlParams: URLSea
 * @returns The current search params value
 */
 declare function useSearchParams<T>(searchSignal: ReadonlySignal<T>): T;
-/** Input type for registerTheme(). Compatible with configureTheme() output. */
-interface RegisterThemeInput {
-	components: {
-		primitives?: object;
-	};
-}
-/**
-* Register a theme for use with `@vertz/ui/components`.
-*
-* Call once at app startup, before any component from `@vertz/ui/components` is used.
-* Calling again replaces the previously registered theme.
-*
-* @example
-* ```ts
-* import { registerTheme } from '@vertz/ui';
-* import { configureTheme } from '@vertz/theme-shadcn';
-* registerTheme(configureTheme({ palette: 'zinc', radius: 'md' }));
-* ```
-*/
-declare function registerTheme(resolved: RegisterThemeInput): void;
 /**
 * Error thrown when `onCleanup()` is called outside a disposal scope.
 * Similar to React's invalid hook call error — fail-fast so developers
@@ -1909,4 +1934,24 @@ declare function resetRelationSchemas_TEST_ONLY(): void;
 * ```
 */
 declare function createTestStore(data: Record<string, Record<string, unknown>>): EntityStore;
-export { zoomOut, zoomIn, variants, validate, useSearchParams, useRouter, useParams, useDialogStack, useContext, untrack, slideOutToTop, slideOutToRight, slideOutToLeft, slideOutToBottom, slideInFromTop, slideInFromRight, slideInFromLeft, slideInFromBottom, signal, setAdapter, s, resolveChildren, resetRelationSchemas_TEST_ONLY, resetInjectedStyles, registerTheme, registerRelationSchema, ref, queryMatch, query, parseSearchParams, palettes, onMount2 as onMount, onAnimationsComplete, mount, keyframes, isRenderNode, isQueryDescriptor, isBrowser, invalidate, injectCSS, hydrateIslands, hydrate, globalCss, getRelationSchema, getQueryEnvelopeStore, getInjectedCSS, getEntityStore, getAdapter, formDataToObject, form, font, fadeOut, fadeIn, defineTheme, defineRoutes, css, createTestStore, createRouter, createOptimisticHandler, createLink, createFieldState, createDialogStack, createDOMAdapter, createContext, configureImageOptimizer, computed, compileTheme, compileFonts, children, buildOptimizedUrl, batch, accordionUp, accordionDown, __staticText, __exitChildren, __enterChildren, __element, __append, VariantsConfig, VariantProps, VariantFunction, ValidationResult, UnwrapSignals, TypedRoutes, TypedRouter, ThemeProviderProps, ThemeProvider, ThemeInput, Theme, SuspenseProps, Suspense, StyleValue, StyleEntry, Signal, SerializedStore, SearchParamSchema, SdkMethodWithMeta, SdkMethod, RouterViewProps, RouterView, RouterOptions, RouterContext, Router, RoutePattern, RoutePaths, RouteMatch, RouteDefinitionMap, RouteConfig, RenderText, RenderNode, RenderElement, RenderAdapter, RelationSchema, RelationFieldDef, RegisterThemeInput, Ref, ReadonlySignal, RENDER_NODE_BRAND, QueryResult, QueryOptions, QueryMatchHandlers, QueryEnvelopeStore, QueryEnvelope, QueryDescriptor3 as QueryDescriptor, PresenceProps, Presence, PreloadItem, PathWithParams, ParamSchema, OutletContextValue, OutletContext, Outlet, NavigateOptions, NavigateInput, MountOptions, MountHandle, MergeSelectOptions, MatchedRoute, LoaderData, ListTransitionProps, ListTransition, LinkProps, LinkFactoryOptions, Link, IslandRegistry, IslandProps, Island, InferRouteMap, ImageProps, Image, GlobalCSSOutput, GlobalCSSInput, FormSchema, FormOptions, FormInstance, FormDataOptions, FontSrc, FontOptions, FontFallbackMetrics, FontDescriptor, FieldState, FieldSelectionTracker, FallbackFontName, ExtractParams, ErrorBoundaryProps, ErrorBoundary, EntityStoreOptions, EntityStore, DisposeFn, DisposalScopeError, DialogStackContext, DialogStack, DialogResult, DialogHandle, DialogComponent, Context, Computed, ComponentRegistry, ComponentLoader, ComponentFunction, CompiledTheme, CompiledRoute, CompiledFonts, CompileThemeOptions, CompileFontsOptions, ColorPalette, ChildrenAccessor, ChildValue, CacheStore, CSSOutput, CSSInput, ANIMATION_EASING, ANIMATION_DURATION };
+/** Input type for registerTheme(). Compatible with configureTheme() output. */
+interface RegisterThemeInput {
+	components: {
+		primitives?: object;
+	};
+}
+/**
+* Register a theme for use with `@vertz/ui/components`.
+*
+* Call once at app startup, before any component from `@vertz/ui/components` is used.
+* Calling again replaces the previously registered theme.
+*
+* @example
+* ```ts
+* import { registerTheme } from '@vertz/ui';
+* import { configureTheme } from '@vertz/theme-shadcn';
+* registerTheme(configureTheme({ palette: 'zinc', radius: 'md' }));
+* ```
+*/
+declare function registerTheme(resolved: RegisterThemeInput): void;
+export { zoomOut, zoomIn, variants, validate, useSearchParams, useRouter, useParams, useDialogStack, useContext, untrack, slideOutToTop, slideOutToRight, slideOutToLeft, slideOutToBottom, slideInFromTop, slideInFromRight, slideInFromLeft, slideInFromBottom, signal, setAdapter, s, resolveChildren, resetRelationSchemas_TEST_ONLY, resetInjectedStyles, registerTheme, registerRelationSchema, ref, queryMatch, query, parseSearchParams, palettes, onMount2 as onMount, onAnimationsComplete, mount, keyframes, isRenderNode, isQueryDescriptor, isBrowser, invalidate, injectCSS, hydrateIslands, hydrate, globalCss, getRelationSchema, getQueryEnvelopeStore, getInjectedCSS, getEntityStore, getAdapter, formDataToObject, form, font, fadeOut, fadeIn, defineTheme, defineRoutes, css, createTestStore, createRouter, createOptimisticHandler, createLink, createFieldState, createDialogStack, createDOMAdapter, createContext, configureImageOptimizer, computed, compileTheme, compileFonts, children, buildOptimizedUrl, batch, accordionUp, accordionDown, __staticText, __exitChildren, __enterChildren, __element, __append, VariantsConfig, VariantProps, VariantFunction, ValidationResult, UnwrapSignals, TypedRoutes, TypedRouter, ThemeProviderProps, ThemeProvider, ThemeInput, Theme, SuspenseProps, Suspense, StyleValue, StyleEntry, Signal, SerializedStore, SearchParamSchema, SdkMethodWithMeta, SdkMethod, RouterViewProps, RouterView, RouterOptions, RouterContext, Router, RoutePattern, RoutePaths, RouteMatch, RouteDefinitionMap, RouteConfig, RenderText, RenderNode, RenderElement, RenderAdapter, RelationSchema, RelationFieldDef, RegisterThemeInput, Ref, ReadonlySignal, RENDER_NODE_BRAND, QueryResult, QueryOptions, QueryMatchHandlers, QueryEnvelopeStore, QueryEnvelope, QueryDescriptor3 as QueryDescriptor, PresenceProps, Presence, PreloadItem, PathWithParams, ParamSchema, OutletContextValue, OutletContext, Outlet, NavigateOptions, NavigateInput, MountOptions, MountHandle, MergeSelectOptions, MatchedRoute, LoaderData, ListTransitionProps, ListTransition, LinkProps, LinkFactoryOptions, Link, IslandRegistry, IslandProps, Island, InferRouteMap, ImageProps, Image, GlobalCSSOutput, GlobalCSSInput, FormSchema, FormOptions, FormInstance, FormDataOptions, ForeignProps, Foreign, FontSrc, FontOptions, FontFallbackMetrics, FontDescriptor, FieldState, FieldSelectionTracker, FallbackFontName, ExtractParams, ErrorBoundaryProps, ErrorBoundary, EntityStoreOptions, EntityStore, DisposeFn, DisposalScopeError, DialogStackContext, DialogStack, DialogResult, DialogHandle, DialogComponent, Context, Computed, ComponentRegistry, ComponentLoader, ComponentFunction, CompiledTheme, CompiledRoute, CompiledFonts, CompileThemeOptions, CompileFontsOptions, ColorPalette, ChildrenAccessor, ChildValue, CacheStore, CSSOutput, CSSInput, ANIMATION_EASING, ANIMATION_DURATION };

package/dist/src/index.js

@@ -24,7 +24,7 @@ import {
   slideOutToTop,
   zoomIn,
   zoomOut
-} from "../shared/chunk-pdqr78k9.js";
+} from "../shared/chunk-p3fz6qqp.js";
 import {
   Link,
   Outlet,
@@ -33,12 +33,17 @@ import {
   createLink,
   parseSearchParams,
   useSearchParams
-} from "../shared/chunk-67z8b0q8.js";
-import"../shared/chunk-kjwp5q5s.js";
+} from "../shared/chunk-016m1fq0.js";
+import {
+  beginDeferringMounts,
+  discardDeferredMounts,
+  flushDeferredMounts,
+  onMount
+} from "../shared/chunk-2kyhn86t.js";
 import"../shared/chunk-4xkw6h1s.js";
 import {
   createRouter
-} from "../shared/chunk-7g722pdh.js";
+} from "../shared/chunk-jtma4sh4.js";
 import {
   defineRoutes
 } from "../shared/chunk-am9zaw4h.js";
@@ -47,7 +52,7 @@ import {
   form,
   formDataToObject,
   validate
-} from "../shared/chunk-yb4a0smw.js";
+} from "../shared/chunk-4gmtsf6v.js";
 import {
   EntityStore,
   FieldSelectionTracker,
@@ -61,7 +66,7 @@ import {
   queryMatch,
   registerRelationSchema,
   resetRelationSchemas_TEST_ONLY
-} from "../shared/chunk-szk0hyjg.js";
+} from "../shared/chunk-g6fb5yc2.js";
 import"../shared/chunk-jrtrk5z4.js";
 import {
   ThemeProvider,
@@ -78,14 +83,14 @@ import {
   resolveChildren,
   s,
   variants
-} from "../shared/chunk-pq8khh47.js";
+} from "../shared/chunk-xhc7arn9.js";
 import {
   __append,
   __element,
   __enterChildren,
   __exitChildren,
   __staticText
-} from "../shared/chunk-vwz86vg9.js";
+} from "../shared/chunk-13tvh4wq.js";
 import"../shared/chunk-prj7nm08.js";
 import {
   RENDER_NODE_BRAND,
@@ -93,15 +98,15 @@ import {
   getAdapter,
   isRenderNode,
   setAdapter
-} from "../shared/chunk-c61572xp.js";
+} from "../shared/chunk-2y9f9j62.js";
 import {
   RouterContext,
   useParams,
   useRouter
-} from "../shared/chunk-4cmt1ve8.js";
+} from "../shared/chunk-f4d5nphq.js";
 import {
   isBrowser
-} from "../shared/chunk-bybgyjye.js";
+} from "../shared/chunk-da2w7j7w.js";
 import {
   DisposalScopeError,
   _tryOnCleanup,
@@ -125,7 +130,7 @@ import {
   startHydration,
   untrack,
   useContext
-} from "../shared/chunk-2qe6aqhb.js";
+} from "../shared/chunk-656n0x6y.js";
 // src/component/error-boundary-context.ts
 var handlerStack = [];
 function pushErrorHandler(handler) {
@@ -183,22 +188,19 @@ function ErrorBoundary(props) {
     return fallbackNode;
   }
 }
-// src/component/lifecycle.ts
-function onMount(callback) {
-  if (getSSRContext())
-    return;
-  const scope = pushScope();
-  try {
-    const cleanup = untrack(callback);
-    if (typeof cleanup === "function") {
-      _tryOnCleanup(cleanup);
-    }
-  } finally {
-    popScope();
-    if (scope.length > 0) {
-      _tryOnCleanup(() => runCleanups(scope));
-    }
+// src/component/foreign.ts
+function Foreign({ tag = "div", onReady, id, className, style }) {
+  const el = __element(tag);
+  if (id)
+    el.id = id;
+  if (className)
+    el.setAttribute("class", className);
+  if (style)
+    Object.assign(el.style, style);
+  if (onReady && !getSSRContext()) {
+    onMount(() => onReady(el));
   }
+  return el;
 }
 // src/dom/list-transition.ts
 function createItemProxy(itemSignal) {
@@ -788,11 +790,29 @@ function mount(app, options) {
   }
   if (root.firstChild) {
     const scope2 = pushScope();
+    let hydrationOk = false;
     try {
+      beginDeferringMounts();
       startHydration(root);
       app();
       endHydration();
+      hydrationOk = true;
+    } catch (e) {
+      discardDeferredMounts();
+      discardDeferredEffects();
+      endHydration();
       popScope();
+      runCleanups(scope2);
+      if (typeof process !== "undefined" && true) {
+        console.warn("[mount] Hydration failed — re-rendering from scratch (no data loss):", e);
+      }
+    }
+    if (hydrationOk) {
+      try {
+        flushDeferredMounts();
+      } finally {
+        popScope();
+      }
       options?.onMount?.(root);
       const handle2 = {
         unmount: () => {
@@ -804,14 +824,6 @@ function mount(app, options) {
       };
       mountedRoots.set(root, handle2);
       return handle2;
-    } catch (e) {
-      discardDeferredEffects();
-      endHydration();
-      popScope();
-      runCleanups(scope2);
-      if (typeof process !== "undefined" && true) {
-        console.warn("[mount] Hydration failed — re-rendering from scratch (no data loss):", e);
-      }
     }
   }
   const scope = pushScope();
@@ -966,6 +978,7 @@ export {
   Link,
   Island,
   Image,
+  Foreign,
   FieldSelectionTracker,
   ErrorBoundary,
   EntityStore,

package/dist/src/internals.d.ts

@@ -81,6 +81,31 @@ declare function getContextScope(): ContextScope | null;
 */
 declare function setContextScope(scope: ContextScope | null): ContextScope | null;
 /**
+* Compiler-injected: push a new mount frame at component body start.
+* Returns the stack depth AFTER pushing — used by __discardMountFrame
+* to avoid popping a parent frame if __flushMountFrame already popped ours.
+*/
+declare function __pushMountFrame(): number;
+/**
+* Compiler-injected: flush the current mount frame after JSX evaluation.
+* Pops the frame first (so the stack is clean even if a callback throws),
+* then executes all deferred callbacks. All callbacks run even if one throws —
+* the first error is rethrown after all have executed.
+*
+* During hydration (postHydrationQueue is non-null), callbacks are pushed
+* to the queue instead of executing — they run after endHydration() via
+* flushDeferredMounts(). This prevents onMount DOM manipulation from
+* corrupting the hydration cursor.
+*/
+declare function __flushMountFrame(): void;
+/**
+* Compiler-injected: discard the current mount frame in error paths.
+* Only pops if the stack depth still matches `expectedDepth` (the value
+* returned by __pushMountFrame). This prevents popping a parent frame
+* when __flushMountFrame already popped ours (e.g., a callback threw).
+*/
+declare function __discardMountFrame(expectedDepth: number): void;
+/**
 * Shared CSS token lookup tables.
 *
 * This is the single source of truth for all CSS token resolution data.
@@ -295,6 +320,16 @@ declare function onAnimationsComplete(el: Element, callback: () => void): void;
 */
 declare function __attr(el: HTMLElement, name: string, fn: () => string | boolean | Record<string, string | number> | null | undefined): DisposeFn;
 /**
+* Create a reactive DOM property binding.
+* Unlike __attr (which uses setAttribute), this directly assigns to the
+* element's IDL property (e.g., el.value, el.checked). This is required
+* for form-related properties where setAttribute doesn't control the
+* displayed state (e.g., <select>.value, <input>.checked).
+*
+* Uses deferredDomEffect so the first run is skipped during hydration.
+*/
+declare function __prop(el: HTMLElement, name: string, fn: () => unknown): DisposeFn;
+/**
 * Reactive display toggle.
 * When fn() returns false, the element is hidden (display: none).
 * When fn() returns true, the element is shown (display restored).
@@ -1058,4 +1093,4 @@ declare function getSSRContext(): SSRRenderContext | undefined;
 * clears during HMR module re-evaluation.
 */
 declare function hasSSRResolver(): boolean;
-export { stopSignalCollection, startSignalCollection, setContextScope, setAdapter, runCleanups, resolveComponent, removeNode, registerSSRResolver, pushScope, popScope, onCleanup, onAnimationsComplete, matchRoute, matchPath, lifecycleEffect, isRenderNode, isBrowser, insertBefore, hasSSRResolver, getSSRContext, getContextScope, getAdapter, executeLoaders, domEffect, deserializeProps, deriveKey, createDOMAdapter, compileTheme, clearChildren, _tryOnCleanup, __text, styleObjectToString as __styleStr, __staticText, __show, __on, __list, __insert, __exitChildren, __enterChildren, __element, __conditional, __classList, __child, __attr, __append, SSRRenderContext, SSRQueryEntry, SSRAuth, SPACING_SCALE, SIZE_KEYWORDS, SHADOW_SCALE, RenderText, RenderNode, RenderElement, RenderAdapter, RENDER_NODE_BRAND, RADIUS_SCALE, QueryEnvelopeStore, PropertyMapping, PSEUDO_PREFIXES, PSEUDO_MAP, PROPERTY_MAP, MemoryCache, MatchResult, LINE_HEIGHT_SCALE, KEYWORD_MAP, HEIGHT_AXIS_PROPERTIES, FONT_WEIGHT_SCALE, FONT_SIZE_SCALE, EntityStore, DISPLAY_MAP, CSS_COLOR_KEYWORDS, CSSDeclarationEntry, CONTENT_MAP, COLOR_NAMESPACES, ALIGNMENT_MAP };
+export { stopSignalCollection, startSignalCollection, setContextScope, setAdapter, runCleanups, resolveComponent, removeNode, registerSSRResolver, pushScope, popScope, onCleanup, onAnimationsComplete, matchRoute, matchPath, lifecycleEffect, isRenderNode, isBrowser, insertBefore, hasSSRResolver, getSSRContext, getContextScope, getAdapter, executeLoaders, domEffect, deserializeProps, deriveKey, createDOMAdapter, compileTheme, clearChildren, _tryOnCleanup, __text, styleObjectToString as __styleStr, __staticText, __show, __pushMountFrame, __prop, __on, __list, __insert, __flushMountFrame, __exitChildren, __enterChildren, __element, __discardMountFrame, __conditional, __classList, __child, __attr, __append, SSRRenderContext, SSRQueryEntry, SSRAuth, SPACING_SCALE, SIZE_KEYWORDS, SHADOW_SCALE, RenderText, RenderNode, RenderElement, RenderAdapter, RENDER_NODE_BRAND, RADIUS_SCALE, QueryEnvelopeStore, PropertyMapping, PSEUDO_PREFIXES, PSEUDO_MAP, PROPERTY_MAP, MemoryCache, MatchResult, LINE_HEIGHT_SCALE, KEYWORD_MAP, HEIGHT_AXIS_PROPERTIES, FONT_WEIGHT_SCALE, FONT_SIZE_SCALE, EntityStore, DISPLAY_MAP, CSS_COLOR_KEYWORDS, CSSDeclarationEntry, CONTENT_MAP, COLOR_NAMESPACES, ALIGNMENT_MAP };