@vertz/ui 0.2.0

package/dist/index.js

@@ -0,0 +1,261 @@
+import {
+  eagerStrategy,
+  hydrate,
+  idleStrategy,
+  interactionStrategy,
+  lazyStrategy,
+  mediaStrategy,
+  visibleStrategy
+} from "./shared/chunk-d8h2eh8d.js";
+import {
+  createLink,
+  createOutlet,
+  parseSearchParams,
+  useSearchParams
+} from "./shared/chunk-bp3v6s9j.js";
+import {
+  createRouter
+} from "./shared/chunk-xd9d7q5p.js";
+import {
+  defineRoutes
+} from "./shared/chunk-j8vzvne3.js";
+import {
+  form,
+  formDataToObject,
+  validate
+} from "./shared/chunk-tsdpgmks.js";
+import {
+  query
+} from "./shared/chunk-zbbvx05f.js";
+import {
+  DisposalScopeError,
+  _tryOnCleanup,
+  batch,
+  computed,
+  createContext,
+  effect,
+  onCleanup,
+  popScope,
+  pushScope,
+  runCleanups,
+  signal,
+  untrack,
+  useContext
+} from "./shared/chunk-pgymxpn1.js";
+import {
+  ThemeProvider,
+  compileTheme,
+  css,
+  defineTheme,
+  globalCss,
+  s,
+  variants
+} from "./shared/chunk-f1ynwam4.js";
+
+// src/component/children.ts
+function resolveChildren(value) {
+  if (value == null) {
+    return [];
+  }
+  if (typeof value === "string") {
+    return [document.createTextNode(value)];
+  }
+  if (typeof value === "number") {
+    return [document.createTextNode(String(value))];
+  }
+  if (Array.isArray(value)) {
+    const result = [];
+    for (const child of value) {
+      const resolved = resolveChildren(child);
+      for (const node of resolved) {
+        result.push(node);
+      }
+    }
+    return result;
+  }
+  return [value];
+}
+function children(accessor) {
+  return () => resolveChildren(accessor());
+}
+// src/component/error-boundary-context.ts
+var handlerStack = [];
+function pushErrorHandler(handler) {
+  handlerStack.push(handler);
+}
+function popErrorHandler() {
+  handlerStack.pop();
+}
+function getCurrentErrorHandler() {
+  if (handlerStack.length === 0) {
+    return;
+  }
+  return handlerStack[handlerStack.length - 1];
+}
+
+// src/component/error-boundary.ts
+function toError(value) {
+  if (value instanceof Error) {
+    return value;
+  }
+  return new Error(String(value));
+}
+function ErrorBoundary(props) {
+  function handleAsyncError(error, placeholder) {
+    const fallbackNode = props.fallback(error, retry);
+    function retry() {
+      try {
+        const retryResult = props.children();
+        if (fallbackNode.parentNode) {
+          fallbackNode.parentNode.replaceChild(retryResult, fallbackNode);
+        }
+      } catch (_retryThrown) {}
+    }
+    if (placeholder.parentNode) {
+      placeholder.parentNode.replaceChild(fallbackNode, placeholder);
+    }
+  }
+  try {
+    pushErrorHandler(handleAsyncError);
+    const result = props.children();
+    popErrorHandler();
+    return result;
+  } catch (thrown) {
+    let retry = function() {
+      try {
+        const retryResult = props.children();
+        if (fallbackNode.parentNode) {
+          fallbackNode.parentNode.replaceChild(retryResult, fallbackNode);
+        }
+      } catch (_retryThrown) {}
+    };
+    popErrorHandler();
+    const error = toError(thrown);
+    const fallbackNode = props.fallback(error, retry);
+    return fallbackNode;
+  }
+}
+// src/component/lifecycle.ts
+function onMount(callback) {
+  const scope = pushScope();
+  try {
+    untrack(callback);
+  } finally {
+    popScope();
+    if (scope.length > 0) {
+      _tryOnCleanup(() => runCleanups(scope));
+    }
+  }
+}
+function watch(dep, callback) {
+  let innerCleanups = null;
+  const dispose = effect(() => {
+    if (innerCleanups) {
+      runCleanups(innerCleanups);
+    }
+    const value = dep();
+    innerCleanups = pushScope();
+    try {
+      untrack(() => callback(value));
+    } finally {
+      popScope();
+    }
+  });
+  _tryOnCleanup(() => {
+    if (innerCleanups) {
+      runCleanups(innerCleanups);
+    }
+    dispose();
+  });
+}
+// src/component/refs.ts
+function ref() {
+  return { current: undefined };
+}
+// src/component/suspense.ts
+function isPromise(value) {
+  return value != null && typeof value === "object" && typeof value.then === "function";
+}
+function toError2(value) {
+  if (value instanceof Error) {
+    return value;
+  }
+  return new Error(String(value));
+}
+function propagateError(error, placeholder, errorHandler) {
+  if (errorHandler) {
+    errorHandler(error, placeholder);
+  } else {
+    queueMicrotask(() => {
+      throw error;
+    });
+  }
+}
+function Suspense(props) {
+  const errorHandler = getCurrentErrorHandler();
+  try {
+    return props.children();
+  } catch (thrown) {
+    if (!isPromise(thrown)) {
+      throw thrown;
+    }
+    const placeholder = props.fallback();
+    thrown.then(() => {
+      try {
+        const resolved = props.children();
+        if (placeholder.parentNode) {
+          placeholder.parentNode.replaceChild(resolved, placeholder);
+        }
+      } catch (retryError) {
+        if (!isPromise(retryError)) {
+          propagateError(toError2(retryError), placeholder, errorHandler);
+        }
+      }
+    }).catch((error) => {
+      propagateError(toError2(error), placeholder, errorHandler);
+    });
+    return placeholder;
+  }
+}
+export {
+  watch,
+  visibleStrategy,
+  variants,
+  validate,
+  useSearchParams,
+  useContext,
+  untrack,
+  signal,
+  s,
+  resolveChildren,
+  ref,
+  query,
+  parseSearchParams,
+  onMount,
+  onCleanup,
+  mediaStrategy,
+  lazyStrategy,
+  interactionStrategy,
+  idleStrategy,
+  hydrate,
+  globalCss,
+  formDataToObject,
+  form,
+  effect,
+  eagerStrategy,
+  defineTheme,
+  defineRoutes,
+  css,
+  createRouter,
+  createOutlet,
+  createLink,
+  createContext,
+  computed,
+  compileTheme,
+  children,
+  batch,
+  ThemeProvider,
+  Suspense,
+  ErrorBoundary,
+  DisposalScopeError
+};

package/dist/internals.d.ts

@@ -0,0 +1,414 @@
+/** Color tokens: a map of color names to their raw/contextual values. */
+type ColorTokens = Record<string, Record<string, string>>;
+/** Spacing tokens: a flat map of names to CSS values. */
+type SpacingTokens = Record<string, string>;
+/** The structured theme object returned by defineTheme(). */
+interface Theme {
+	/** Color design tokens. */
+	colors: ColorTokens;
+	/** Spacing scale tokens. */
+	spacing?: SpacingTokens;
+}
+/** Output of compileTheme(). */
+interface CompiledTheme {
+	/** The generated CSS string with :root and [data-theme] blocks. */
+	css: string;
+	/** Flat list of token dot-paths (e.g., 'primary.500', 'background'). */
+	tokens: string[];
+}
+/**
+* Compile a theme into CSS custom properties.
+*
+* Generates:
+* - `:root { ... }` block with default/raw token values
+* - `[data-theme="dark"] { ... }` block with dark overrides (if any)
+*
+* @param theme - A theme object from defineTheme().
+* @returns Compiled CSS and token list.
+*/
+declare function compileTheme(theme: Theme): CompiledTheme;
+/**
+* Shared CSS token lookup tables.
+*
+* This is the single source of truth for all CSS token resolution data.
+* These tables are consumed by:
+*   1. packages/ui/src/css/token-resolver.ts (runtime)
+*   2. packages/ui-compiler/src/transformers/css-transformer.ts (compiler)
+*   3. packages/ui-compiler/src/css-extraction/extractor.ts (extraction)
+*
+* DO NOT duplicate these tables elsewhere. If you need a new token,
+* add it here and all consumers will pick it up automatically.
+*/
+interface PropertyMapping {
+	/** CSS property name(s). If multiple, all get the same value. */
+	properties: string[];
+	/** Value resolver type. */
+	valueType: "spacing" | "color" | "radius" | "shadow" | "size" | "display" | "alignment" | "font-size" | "font-weight" | "line-height" | "ring" | "content" | "raw";
+}
+declare const PROPERTY_MAP: Record<string, PropertyMapping>;
+/** A single CSS property-value pair. */
+interface CSSDeclarationEntry {
+	property: string;
+	value: string;
+}
+/** Keyword map -- single keywords that resolve to one or more declarations. */
+declare const KEYWORD_MAP: Record<string, CSSDeclarationEntry[]>;
+/**
+* Display-only keyword map. Used by the compiler for quick display keyword
+* lookup without processing the full KEYWORD_MAP.
+*/
+declare const DISPLAY_MAP: Record<string, string>;
+/** Spacing scale: number -> rem. 1=0.25rem, 2=0.5rem, 4=1rem, 8=2rem, etc. */
+declare const SPACING_SCALE: Record<string, string>;
+/** Border radius scale. */
+declare const RADIUS_SCALE: Record<string, string>;
+/** Shadow scale. */
+declare const SHADOW_SCALE: Record<string, string>;
+/** Font size scale. */
+declare const FONT_SIZE_SCALE: Record<string, string>;
+/** Font weight scale. */
+declare const FONT_WEIGHT_SCALE: Record<string, string>;
+/** Line height scale. */
+declare const LINE_HEIGHT_SCALE: Record<string, string>;
+/** Alignment value map. */
+declare const ALIGNMENT_MAP: Record<string, string>;
+/** Size keywords for width/height. */
+declare const SIZE_KEYWORDS: Record<string, string>;
+/** Height-axis property shorthands that should use vh units. */
+declare const HEIGHT_AXIS_PROPERTIES: ReadonlySet<string>;
+/** Known color token namespaces -- values that resolve to CSS custom properties. */
+declare const COLOR_NAMESPACES: ReadonlySet<string>;
+/** CSS color keywords that pass through without token resolution. */
+declare const CSS_COLOR_KEYWORDS: ReadonlySet<string>;
+/** Content keywords. */
+declare const CONTENT_MAP: Record<string, string>;
+/** Supported pseudo-state prefixes. */
+declare const PSEUDO_PREFIXES: ReadonlySet<string>;
+/** Map pseudo shorthand names to CSS pseudo-selectors. */
+declare const PSEUDO_MAP: Record<string, string>;
+/**
+* A reactive signal that holds a value and notifies subscribers on change.
+*/
+interface Signal<T> {
+	/** Get the current value and subscribe to changes (when inside a tracking context). */
+	get value(): T;
+	/** Set the current value and notify subscribers if changed. */
+	set value(newValue: T);
+	/** Read the current value without subscribing (no tracking). */
+	peek(): T;
+	/** Manually notify all subscribers (useful after mutating the value in place). */
+	notify(): void;
+}
+/** Dispose function returned by effect(). */
+type DisposeFn = () => void;
+/**
+* Create a reactive attribute binding.
+* When the value returned by `fn` changes, the attribute is updated.
+* If fn returns null or undefined, the attribute is removed.
+*
+* Compiler output target for reactive attribute expressions.
+* Returns a dispose function to stop the reactive binding.
+*/
+declare function __attr(el: HTMLElement, name: string, fn: () => string | null | undefined): DisposeFn;
+/**
+* Reactive display toggle.
+* When fn() returns false, the element is hidden (display: none).
+* When fn() returns true, the element is shown (display restored).
+*
+* Compiler output target for v-show / conditional display directives.
+* Returns a dispose function to stop the reactive binding.
+*/
+declare function __show(el: HTMLElement, fn: () => boolean): DisposeFn;
+/**
+* Reactive class binding.
+* Each key in the classMap is a class name; the value function determines
+* whether that class is present.
+*
+* Compiler output target for reactive class expressions.
+* Returns a dispose function to stop all reactive bindings.
+*/
+declare function __classList(el: HTMLElement, classMap: Record<string, () => boolean>): DisposeFn;
+/** A Node that also carries a dispose function for cleanup. */
+interface DisposableNode extends Node {
+	dispose: DisposeFn;
+}
+/**
+* Reactive conditional rendering.
+* When condFn() is true, renders trueFn(); otherwise renders falseFn().
+* Manages DOM insertion and cleanup automatically.
+*
+* Compiler output target for ternary expressions and if/else in JSX.
+*
+* Returns a Node (DocumentFragment) with a `dispose` property attached.
+*/
+declare function __conditional(condFn: () => boolean, trueFn: () => Node | null, falseFn: () => Node | null): DisposableNode;
+/** A Text node that also carries a dispose function for cleanup. */
+interface DisposableText extends Text {
+	dispose: DisposeFn;
+}
+/**
+* Create a reactive text node whose content updates automatically
+* when the reactive dependencies of `fn` change.
+*
+* This is a compiler output target — the compiler generates calls
+* to __text when it encounters reactive text interpolation in JSX.
+*
+* Returns a Text node with a `dispose` property for cleanup.
+*/
+declare function __text(fn: () => string): DisposableText;
+/**
+* Create a reactive child node that updates when dependencies change.
+* Unlike __text(), this handles both Node values (appended directly)
+* and primitives (converted to text nodes).
+*
+* This prevents HTMLElements from being stringified to "[object HTMLElement]"
+* when used as JSX expression children like {someElement}.
+*
+* Returns a wrapper element with `display: contents` and a `dispose` property.
+*/
+declare function __child(fn: () => Node | string | number | boolean | null | undefined): HTMLElement & {
+	dispose: DisposeFn;
+};
+/**
+* Insert a static (non-reactive) child value into a parent node.
+* This is used for static JSX expression children to avoid the performance
+* overhead of effect() when reactivity isn't needed.
+*
+* Handles Node values (appended directly), primitives (converted to text),
+* and nullish/boolean values (skipped).
+*/
+declare function __insert(parent: Node, value: Node | string | number | boolean | null | undefined): void;
+/**
+* Create a DOM element with optional static properties.
+*
+* This is a compiler output target — the compiler generates calls
+* to __element for each JSX element.
+*/
+declare function __element(tag: string, props?: Record<string, string>): HTMLElement;
+/**
+* Bind an event handler to an element.
+* Returns a cleanup function to remove the listener.
+*
+* Compiler output target for event bindings (onClick, onInput, etc.).
+*/
+declare function __on(el: HTMLElement, event: string, handler: EventListener): () => void;
+/**
+* Insert a node into a container before a reference node.
+* If reference is null, appends to the end.
+*/
+declare function insertBefore(container: Node, node: Node, reference: Node | null): void;
+/**
+* Remove a node from its parent.
+*/
+declare function removeNode(node: Node): void;
+/**
+* Clear all children from a container.
+*/
+declare function clearChildren(container: Node): void;
+/**
+* Keyed list reconciliation.
+* Efficiently updates a container's children when the items signal changes.
+* Reuses existing DOM nodes based on key identity — no virtual DOM.
+*
+* Compiler output target for .map() / for-each expressions in JSX.
+*
+* @param container - The parent DOM element
+* @param items - A signal or getter function containing the array of items.
+*   The compiler generates `() => signal.value` as a getter; the runtime
+*   also accepts a raw Signal for direct use in tests.
+* @param keyFn - Extracts a unique key from each item
+* @param renderFn - Creates a DOM node for an item (called once per key)
+* @returns A dispose function to stop the reactive list reconciliation
+*/
+declare function __list<T>(container: HTMLElement, items: Signal<T[]> | (() => T[]), keyFn: (item: T) => string | number, renderFn: (item: T) => Node): DisposeFn;
+/** A function returning a dynamic import of a component module. */
+type ComponentLoader = () => Promise<{
+	default: ComponentFunction;
+}>;
+/** A component function that takes props and an element to mount into. */
+type ComponentFunction = (props: Record<string, unknown>, el: Element) => void;
+/** Maps component IDs to their dynamic import loaders. */
+type ComponentRegistry = Record<string, ComponentLoader>;
+/**
+* Resolves a component ID to its module's default export.
+*
+* Throws if the component ID is not found in the registry.
+*/
+declare function resolveComponent(registry: ComponentRegistry, componentId: string): Promise<ComponentFunction>;
+/**
+* Reads serialized props from a `<script type="application/json">` tag
+* within the hydration boundary element.
+*/
+declare function deserializeProps(container: Element): Record<string, unknown>;
+/**
+* Interface for cache stores used by query().
+* Consumers can provide custom implementations (e.g. LRU, persistent storage).
+*/
+interface CacheStore<T = unknown> {
+	get(key: string): T | undefined;
+	set(key: string, value: T): void;
+	delete(key: string): void;
+}
+/**
+* Default in-memory cache backed by a Map.
+*/
+declare class MemoryCache<T = unknown> implements CacheStore<T> {
+	private _store;
+	get(key: string): T | undefined;
+	set(key: string, value: T): void;
+	delete(key: string): void;
+}
+/**
+* Derive a cache key from a thunk function.
+*
+* Uses the string representation of the function as a simple fingerprint.
+* For deterministic keys in production, prefer passing an explicit `key` option.
+*/
+declare function deriveKey(thunk: () => unknown): string;
+/**
+* Template literal type utility that extracts route parameter names from a path pattern.
+*
+* Examples:
+* - `'/users/:id'` -> `{ id: string }`
+* - `'/users/:id/posts/:postId'` -> `{ id: string; postId: string }`
+* - `'/files/*'` -> `{ '*': string }`
+* - `'/users'` -> `Record<string, never>`
+*/
+/** Extract param names from a single segment. */
+type ExtractSegmentParam<S extends string> = S extends `:${infer Param}` ? Param : never;
+/** Recursively extract params from path segments separated by '/'. */
+type ExtractParamsFromSegments<T extends string> = T extends `${infer Segment}/${infer Rest}` ? ExtractSegmentParam<Segment> | ExtractParamsFromSegments<Rest> : ExtractSegmentParam<T>;
+/** Check if a path contains a wildcard '*' at the end. */
+type HasWildcard<T extends string> = T extends `${string}*` ? true : false;
+/** Remove trailing wildcard for param extraction. */
+type WithoutWildcard<T extends string> = T extends `${infer Before}*` ? Before : T;
+/**
+* Extract typed params from a route path pattern.
+* `:param` segments become `{ param: string }`.
+* A trailing `*` becomes `{ '*': string }`.
+*/
+type ExtractParams<T extends string> = [ExtractParamsFromSegments<WithoutWildcard<T>>] extends [never] ? HasWildcard<T> extends true ? {
+	"*": string;
+} : Record<string, never> : HasWildcard<T> extends true ? { [K in ExtractParamsFromSegments<WithoutWildcard<T>>] : string } & {
+	"*": string;
+} : { [K in ExtractParamsFromSegments<WithoutWildcard<T>>] : string };
+/** Simple schema interface for search param parsing. */
+interface SearchParamSchema<T> {
+	parse(data: unknown): T;
+}
+/** A route configuration for a single path. */
+interface RouteConfig<
+	TPath extends string = string,
+	TLoaderData = unknown,
+	TSearch = unknown
+> {
+	/** Component factory (lazy for code splitting). */
+	component: () => Node | Promise<{
+		default: () => Node;
+	}>;
+	/** Optional loader that runs before render. */
+	loader?: (ctx: {
+		params: ExtractParams<TPath>;
+		signal: AbortSignal;
+	}) => Promise<TLoaderData> | TLoaderData;
+	/** Optional error component rendered when loader throws. */
+	errorComponent?: (error: Error) => Node;
+	/** Optional search params schema for validation/coercion. */
+	searchParams?: SearchParamSchema<TSearch>;
+	/** Nested child routes. */
+	children?: RouteDefinitionMap;
+}
+/** A map of path patterns to route configs (user input format). */
+interface RouteDefinitionMap {
+	[pattern: string]: RouteConfig;
+}
+/** Internal compiled route. */
+interface CompiledRoute {
+	/** The original path pattern. */
+	pattern: string;
+	/** The route config. */
+	component: RouteConfig["component"];
+	loader?: (ctx: {
+		params: Record<string, string>;
+		signal: AbortSignal;
+	}) => Promise<unknown> | unknown;
+	errorComponent?: RouteConfig["errorComponent"];
+	searchParams?: RouteConfig["searchParams"];
+	/** Compiled children. */
+	children?: CompiledRoute[];
+}
+/** A single matched route entry in the matched chain. */
+interface MatchedRoute {
+	route: CompiledRoute;
+	params: Record<string, string>;
+}
+/** Result of matching a URL against the route tree. */
+interface RouteMatch {
+	/** All params extracted from the full URL path. */
+	params: Record<string, string>;
+	/** The leaf route config that matched. */
+	route: CompiledRoute;
+	/** The chain of matched routes from root to leaf (for nested layouts). */
+	matched: MatchedRoute[];
+	/** URLSearchParams from the URL. */
+	searchParams: URLSearchParams;
+	/** Parsed/coerced search params if schema is defined. */
+	search: Record<string, unknown>;
+}
+/**
+* Match a URL path against a list of compiled routes.
+* Supports nested route matching for layouts.
+*
+* @param routes - Compiled route list
+* @param url - URL path (may include query string)
+* @returns RouteMatch or null if no route matches
+*/
+declare function matchRoute(routes: CompiledRoute[], url: string): RouteMatch | null;
+/**
+* Execute all loaders for matched routes in parallel.
+*
+* Each loader receives `{ params, signal }` with the full merged params
+* from all matched routes and an AbortSignal for cancellation.
+* Routes without loaders produce `undefined` in the results array.
+*
+* @param matched - The chain of matched routes (parent to leaf)
+* @param params - Merged params from all matched routes
+* @param signal - AbortSignal to pass to loaders for cancellation
+* @returns Array of loader results (one per matched route)
+*/
+declare function executeLoaders(matched: MatchedRoute[], params: Record<string, string>, signal?: AbortSignal): Promise<unknown[]>;
+/**
+* Route path matching with `:param` and `*` wildcard support.
+*/
+/** Result of a successful route match. */
+interface MatchResult {
+	/** Extracted parameters from the path. */
+	params: Record<string, string>;
+	/** The matched portion of the URL path. */
+	path: string;
+}
+/**
+* Match a URL path against a route pattern.
+*
+* - Static segments must match exactly.
+* - `:param` segments capture a single non-empty path segment.
+* - `*` at the end captures all remaining segments (including empty).
+*
+* Returns a MatchResult on success, or null if the path does not match.
+*/
+declare function matchPath(pattern: string, path: string): MatchResult | null;
+/**
+* Push a new cleanup scope. All onCleanup calls within this scope
+* will be collected and returned when the scope is popped.
+*/
+declare function pushScope(): DisposeFn[];
+/**
+* Pop the current cleanup scope.
+*/
+declare function popScope(): void;
+/**
+* Run all collected cleanup functions in LIFO (reverse) order and clear the list.
+* Reverse order matches try/finally semantics — last registered, first cleaned up.
+*/
+declare function runCleanups(cleanups: DisposeFn[]): void;
+export { runCleanups, resolveComponent, removeNode, pushScope, popScope, matchRoute, matchPath, insertBefore, executeLoaders, deserializeProps, deriveKey, compileTheme, clearChildren, __text, __show, __on, __list, __insert, __element, __conditional, __classList, __child, __attr, SPACING_SCALE, SIZE_KEYWORDS, SHADOW_SCALE, RADIUS_SCALE, PropertyMapping, PSEUDO_PREFIXES, PSEUDO_MAP, PROPERTY_MAP, MemoryCache, MatchResult, LINE_HEIGHT_SCALE, KEYWORD_MAP, HEIGHT_AXIS_PROPERTIES, FONT_WEIGHT_SCALE, FONT_SIZE_SCALE, DISPLAY_MAP, CSS_COLOR_KEYWORDS, CSSDeclarationEntry, CONTENT_MAP, COLOR_NAMESPACES, ALIGNMENT_MAP };