@vertz/ui 0.2.0

package/dist/internals.js

@@ -0,0 +1,268 @@
+import {
+  deserializeProps,
+  resolveComponent
+} from "./shared/chunk-d8h2eh8d.js";
+import {
+  executeLoaders,
+  matchPath,
+  matchRoute
+} from "./shared/chunk-j8vzvne3.js";
+import {
+  MemoryCache,
+  deriveKey
+} from "./shared/chunk-zbbvx05f.js";
+import {
+  _tryOnCleanup,
+  effect,
+  popScope,
+  pushScope,
+  runCleanups
+} from "./shared/chunk-pgymxpn1.js";
+import {
+  ALIGNMENT_MAP,
+  COLOR_NAMESPACES,
+  CONTENT_MAP,
+  CSS_COLOR_KEYWORDS,
+  DISPLAY_MAP,
+  FONT_SIZE_SCALE,
+  FONT_WEIGHT_SCALE,
+  HEIGHT_AXIS_PROPERTIES,
+  KEYWORD_MAP,
+  LINE_HEIGHT_SCALE,
+  PROPERTY_MAP,
+  PSEUDO_MAP,
+  PSEUDO_PREFIXES,
+  RADIUS_SCALE,
+  SHADOW_SCALE,
+  SIZE_KEYWORDS,
+  SPACING_SCALE,
+  compileTheme
+} from "./shared/chunk-f1ynwam4.js";
+// src/dom/attributes.ts
+function __attr(el, name, fn) {
+  return effect(() => {
+    const value = fn();
+    if (value == null) {
+      el.removeAttribute(name);
+    } else {
+      el.setAttribute(name, value);
+    }
+  });
+}
+function __show(el, fn) {
+  const originalDisplay = el.style.display;
+  return effect(() => {
+    el.style.display = fn() ? originalDisplay : "none";
+  });
+}
+function __classList(el, classMap) {
+  const disposers = [];
+  for (const [className, fn] of Object.entries(classMap)) {
+    disposers.push(effect(() => {
+      if (fn()) {
+        el.classList.add(className);
+      } else {
+        el.classList.remove(className);
+      }
+    }));
+  }
+  return () => {
+    for (const dispose of disposers) {
+      dispose();
+    }
+  };
+}
+// src/dom/conditional.ts
+function __conditional(condFn, trueFn, falseFn) {
+  const anchor = document.createComment("conditional");
+  let currentNode = null;
+  let branchCleanups = [];
+  const outerScope = pushScope();
+  effect(() => {
+    const show = condFn();
+    runCleanups(branchCleanups);
+    const scope = pushScope();
+    const branchResult = show ? trueFn() : falseFn();
+    popScope();
+    branchCleanups = scope;
+    const newNode = branchResult ?? document.createComment("empty");
+    if (currentNode?.parentNode) {
+      currentNode.parentNode.replaceChild(newNode, currentNode);
+    } else if (anchor.parentNode) {
+      anchor.parentNode.insertBefore(newNode, anchor.nextSibling);
+    }
+    currentNode = newNode;
+  });
+  popScope();
+  const wrapper = () => {
+    runCleanups(branchCleanups);
+    runCleanups(outerScope);
+  };
+  _tryOnCleanup(wrapper);
+  const fragment = document.createDocumentFragment();
+  fragment.appendChild(anchor);
+  if (currentNode) {
+    fragment.appendChild(currentNode);
+  }
+  const result = Object.assign(fragment, { dispose: wrapper });
+  return result;
+}
+// src/dom/element.ts
+function __text(fn) {
+  const node = document.createTextNode("");
+  node.dispose = effect(() => {
+    node.data = fn();
+  });
+  return node;
+}
+function __child(fn) {
+  const wrapper = document.createElement("span");
+  wrapper.style.display = "contents";
+  wrapper.dispose = effect(() => {
+    const value = fn();
+    while (wrapper.firstChild) {
+      wrapper.removeChild(wrapper.firstChild);
+    }
+    if (value == null || typeof value === "boolean") {
+      return;
+    }
+    if (value instanceof Node) {
+      wrapper.appendChild(value);
+      return;
+    }
+    const textValue = typeof value === "string" ? value : String(value);
+    wrapper.appendChild(document.createTextNode(textValue));
+  });
+  return wrapper;
+}
+function __insert(parent, value) {
+  if (value == null || typeof value === "boolean") {
+    return;
+  }
+  if (value instanceof Node) {
+    parent.appendChild(value);
+    return;
+  }
+  const textValue = typeof value === "string" ? value : String(value);
+  parent.appendChild(document.createTextNode(textValue));
+}
+function __element(tag, props) {
+  const el = document.createElement(tag);
+  if (props) {
+    for (const [key, value] of Object.entries(props)) {
+      el.setAttribute(key, value);
+    }
+  }
+  return el;
+}
+// src/dom/events.ts
+function __on(el, event, handler) {
+  el.addEventListener(event, handler);
+  return () => el.removeEventListener(event, handler);
+}
+// src/dom/insert.ts
+function insertBefore(container, node, reference) {
+  container.insertBefore(node, reference);
+}
+function removeNode(node) {
+  node.parentNode?.removeChild(node);
+}
+function clearChildren(container) {
+  while (container.firstChild) {
+    container.removeChild(container.firstChild);
+  }
+}
+// src/dom/list.ts
+function __list(container, items, keyFn, renderFn) {
+  const getItems = typeof items === "function" ? items : () => items.value;
+  const nodeMap = new Map;
+  const scopeMap = new Map;
+  const outerScope = pushScope();
+  effect(() => {
+    const newItems = getItems();
+    const newKeySet = new Set(newItems.map(keyFn));
+    for (const [key, node] of nodeMap) {
+      if (!newKeySet.has(key)) {
+        const scope = scopeMap.get(key);
+        if (scope) {
+          runCleanups(scope);
+          scopeMap.delete(key);
+        }
+        node.parentNode?.removeChild(node);
+        nodeMap.delete(key);
+      }
+    }
+    const desiredNodes = [];
+    for (const item of newItems) {
+      const key = keyFn(item);
+      let node = nodeMap.get(key);
+      if (!node) {
+        const scope = pushScope();
+        node = renderFn(item);
+        popScope();
+        nodeMap.set(key, node);
+        scopeMap.set(key, scope);
+      }
+      desiredNodes.push(node);
+    }
+    for (const [i, desiredNode] of desiredNodes.entries()) {
+      const currentChild = container.childNodes[i];
+      if (currentChild !== desiredNode) {
+        container.insertBefore(desiredNode, currentChild ?? null);
+      }
+    }
+  });
+  popScope();
+  const wrapper = () => {
+    for (const scope of scopeMap.values()) {
+      runCleanups(scope);
+    }
+    scopeMap.clear();
+    runCleanups(outerScope);
+  };
+  _tryOnCleanup(wrapper);
+  return wrapper;
+}
+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,
+  PSEUDO_PREFIXES,
+  PSEUDO_MAP,
+  PROPERTY_MAP,
+  MemoryCache,
+  LINE_HEIGHT_SCALE,
+  KEYWORD_MAP,
+  HEIGHT_AXIS_PROPERTIES,
+  FONT_WEIGHT_SCALE,
+  FONT_SIZE_SCALE,
+  DISPLAY_MAP,
+  CSS_COLOR_KEYWORDS,
+  CONTENT_MAP,
+  COLOR_NAMESPACES,
+  ALIGNMENT_MAP
+};

package/dist/jsx-runtime/index.d.ts

@@ -0,0 +1,40 @@
+/**
+* JSX runtime for @vertz/ui — used by Bun at test/dev time.
+*
+* At build time, the @vertz/ui-compiler transforms JSX into optimized
+* __element() / __on() / __text() / __attr() calls with compile-time
+* reactivity analysis. This runtime provides a simpler DOM-based
+* implementation for tests and development.
+*
+* Implements the "react-jsx" automatic runtime interface:
+* - jsx(type, props)  — single child
+* - jsxs(type, props) — multiple children
+* - Fragment          — document fragment
+*/
+type JSXComponent = (props: Record<string, unknown>) => Node | Node[] | null;
+type Tag = string | JSXComponent;
+/**
+* JSX factory function for client-side rendering.
+*
+* When tag is a function (component), calls it with props.
+* When tag is a string (HTML element), creates a DOM element.
+*/
+declare function jsx(tag: Tag, props: Record<string, unknown>): Node | Node[] | null;
+/**
+* JSX factory for elements with multiple children.
+* In the automatic runtime, this is used when there are multiple children.
+* For our implementation, it's the same as jsx().
+*/
+declare const jsxs: typeof jsx;
+/**
+* Fragment component — a DocumentFragment container for multiple children.
+*/
+declare function Fragment(props: {
+	children?: unknown;
+}): DocumentFragment;
+/**
+* JSX development mode factory (used with @jsxImportSource in tsconfig).
+* Same as jsx() for our implementation.
+*/
+declare const jsxDEV: typeof jsx;
+export { jsxs, jsxDEV, jsx, Fragment };

package/dist/jsx-runtime/index.js

@@ -0,0 +1,50 @@
+// src/jsx-runtime/index.ts
+function applyChildren(parent, children) {
+  if (children == null || children === false || children === true)
+    return;
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      applyChildren(parent, child);
+    }
+  } else if (children instanceof Node) {
+    parent.appendChild(children);
+  } else {
+    parent.appendChild(document.createTextNode(String(children)));
+  }
+}
+function jsx(tag, props) {
+  if (typeof tag === "function") {
+    return tag(props);
+  }
+  const { children, ...attrs } = props || {};
+  const element = document.createElement(tag);
+  for (const [key, value] of Object.entries(attrs)) {
+    if (key.startsWith("on") && typeof value === "function") {
+      const eventName = key.slice(2).toLowerCase();
+      element.addEventListener(eventName, value);
+    } else if (key === "class" && value != null) {
+      element.className = String(value);
+    } else if (key === "style" && value != null) {
+      element.setAttribute("style", String(value));
+    } else if (value === true) {
+      element.setAttribute(key, "");
+    } else if (value != null && value !== false) {
+      element.setAttribute(key, String(value));
+    }
+  }
+  applyChildren(element, children);
+  return element;
+}
+var jsxs = jsx;
+function Fragment(props) {
+  const frag = document.createDocumentFragment();
+  applyChildren(frag, props?.children);
+  return frag;
+}
+var jsxDEV = jsx;
+export {
+  jsxs,
+  jsxDEV,
+  jsx,
+  Fragment
+};

package/dist/query/public.d.ts

@@ -0,0 +1,58 @@
+/**
+* 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;
+}
+/**
+* A read-only reactive value derived from other signals.
+*/
+interface ReadonlySignal<T> {
+	/** Get the current value and subscribe to changes. */
+	readonly value: T;
+	/** Read the current value without subscribing. */
+	peek(): T;
+}
+/** Options for query(). */
+interface QueryOptions<T> {
+	/** Pre-populated data — skips the initial fetch when provided. */
+	initialData?: T;
+	/** Debounce re-fetches triggered by reactive dependency changes (ms). */
+	debounce?: number;
+	/** When false, the query will not fetch. Defaults to true. */
+	enabled?: boolean;
+	/** Explicit cache key. When omitted, derived from the thunk. */
+	key?: string;
+	/** Custom cache store. Defaults to a shared in-memory Map. */
+	cache?: CacheStore<T>;
+}
+/** The reactive object returned by query(). */
+interface QueryResult<T> {
+	/** The fetched data, or undefined while loading. */
+	readonly data: ReadonlySignal<T | undefined>;
+	/** True while a fetch is in progress. */
+	readonly loading: ReadonlySignal<boolean>;
+	/** The error from the latest failed fetch, or undefined. */
+	readonly error: ReadonlySignal<unknown>;
+	/** Manually trigger a refetch (clears cache for this key). */
+	refetch: () => void;
+	/** Alias for refetch — revalidate the cached data. */
+	revalidate: () => void;
+	/** Dispose the query — stops the reactive effect and cleans up inflight state. */
+	dispose: () => void;
+}
+/**
+* Create a reactive data-fetching query.
+*
+* The thunk is wrapped in an effect so that when reactive dependencies
+* used *before* the async call change, the query automatically re-fetches.
+*
+* @param thunk - An async function that returns the data.
+* @param options - Optional configuration.
+* @returns A QueryResult with reactive signals for data, loading, and error.
+*/
+declare function query<T>(thunk: () => Promise<T>, options?: QueryOptions<T>): QueryResult<T>;
+export { query, QueryResult, QueryOptions, CacheStore };

package/dist/query/public.js

@@ -0,0 +1,7 @@
+import {
+  query
+} from "../shared/chunk-zbbvx05f.js";
+import"../shared/chunk-pgymxpn1.js";
+export {
+  query
+};

package/dist/router/public.d.ts

@@ -0,0 +1,214 @@
+/**
+* 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>;
+}
+/**
+* Type utility to extract loader return type from a route config.
+*/
+type LoaderData<T> = T extends {
+	loader: (...args: never[]) => Promise<infer R>;
+} ? R : T extends {
+	loader: (...args: never[]) => infer R;
+} ? R : never;
+/**
+* Define routes from a configuration map.
+* Returns an array of compiled routes preserving definition order.
+*/
+declare function defineRoutes(map: RouteDefinitionMap): CompiledRoute[];
+/**
+* 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;
+}
+/**
+* A read-only reactive value derived from other signals.
+*/
+interface ReadonlySignal<T> {
+	/** Get the current value and subscribe to changes. */
+	readonly value: T;
+	/** Read the current value without subscribing. */
+	peek(): T;
+}
+/** Props for the Link component. */
+interface LinkProps {
+	/** The target URL path. */
+	href: string;
+	/** Text or content for the link. */
+	children: string;
+	/** Class applied when the link's href matches the current path. */
+	activeClass?: string;
+	/** Static class name for the anchor element. */
+	className?: string;
+}
+/**
+* Create a Link component factory bound to the router's state.
+*
+* @param currentPath - Reactive signal of the current URL path
+* @param navigate - Navigation function from the router
+* @returns A Link component function
+*/
+declare function createLink(currentPath: ReadonlySignal<string>, navigate: (url: string) => void): (props: LinkProps) => HTMLAnchorElement;
+/** Options for router.navigate(). */
+interface NavigateOptions {
+	/** Use history.replaceState instead of pushState. */
+	replace?: boolean;
+}
+/** The router instance returned by createRouter. */
+interface Router {
+	/** Current matched route (reactive signal). */
+	current: Signal<RouteMatch | null>;
+	/** Loader data from the current route's loaders (reactive signal). */
+	loaderData: Signal<unknown[]>;
+	/** Loader error if any loader threw (reactive signal). */
+	loaderError: Signal<Error | null>;
+	/** Parsed search params from the current route (reactive signal). */
+	searchParams: Signal<Record<string, unknown>>;
+	/** Navigate to a new URL path. */
+	navigate: (url: string, options?: NavigateOptions) => Promise<void>;
+	/** Re-run all loaders for the current route. */
+	revalidate: () => Promise<void>;
+	/** Remove popstate listener and clean up the router. */
+	dispose: () => void;
+}
+/**
+* Create a router instance.
+*
+* @param routes - Compiled route list from defineRoutes()
+* @param initialUrl - The initial URL to match (optional; auto-detects from window.location or __SSR_URL__)
+* @returns Router instance with reactive state and navigation methods
+*/
+declare function createRouter(routes: CompiledRoute[], initialUrl?: string): Router;
+/** A context object created by `createContext`. */
+interface Context<T> {
+	/** Provide a value to all `useContext` calls within the scope. */
+	Provider: (value: T, fn: () => void) => void;
+	/** @internal — current value stack */
+	_stack: T[];
+	/** @internal — default value */
+	_default: T | undefined;
+}
+/** Context value for the Outlet. */
+interface OutletContext {
+	/** The child component factory to render, or undefined if no child. */
+	childComponent: (() => Node) | undefined;
+	/** The nesting depth (for debugging/tracking). */
+	depth: number;
+}
+/**
+* Create an Outlet component bound to a specific outlet context.
+*
+* @param outletCtx - The context that holds the child component
+* @returns An Outlet component function
+*/
+declare function createOutlet(outletCtx: Context<OutletContext>): () => Node;
+/**
+* Parse URLSearchParams into a typed object, optionally through a schema.
+*
+* @param urlParams - The raw URLSearchParams
+* @param schema - Optional schema with a `parse` method for validation/coercion
+* @returns Parsed search params object
+*/
+declare function parseSearchParams<T = Record<string, string>>(urlParams: URLSearchParams, schema?: SearchParamSchema<T>): T;
+/**
+* Read the current search params from a reactive signal.
+* Intended to be called inside a reactive context (effect/computed).
+*
+* @param searchSignal - Signal holding the current parsed search params
+* @returns The current search params value
+*/
+declare function useSearchParams<T>(searchSignal: ReadonlySignal<T>): T;
+export { useSearchParams, parseSearchParams, defineRoutes, createRouter, createOutlet, createLink, SearchParamSchema, Router, RouteMatch, RouteDefinitionMap, RouteConfig, OutletContext, NavigateOptions, MatchedRoute, LoaderData, LinkProps, ExtractParams, CompiledRoute };

package/dist/router/public.js

@@ -0,0 +1,21 @@
+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"../shared/chunk-pgymxpn1.js";
+export {
+  useSearchParams,
+  parseSearchParams,
+  defineRoutes,
+  createRouter,
+  createOutlet,
+  createLink
+};