ranui 0.2.0-alpha.7 → 0.2.1-alpha.1

package/dist/utils/builder/signal.d.ts

@@ -1,87 +1,116 @@
 /**
- * Reactive primitives — signal / createEffect / computed / batch
- *
- * Design reference: SwiftUI @Observable + Solid.js fine-grained reactivity
- *
- * SwiftUI's core model:  View = f(State)
- *   @State / @Observable — reactive source (≈ signal)
- *   body                 — pure function of state, auto-tracks reads (≈ createEffect)
- *   computed property    — derived, cached (≈ computed)
- *
- * Two improvements over a naive signal implementation, both borrowed from Solid.js:
- *
- *   1. Stale subscription cleanup
- *      Before each re-run, an effect removes itself from every signal it previously
- *      subscribed to, then re-subscribes only to signals read in this run.
- *      Without this, conditional reads leave permanent ghost subscriptions that
- *      trigger effects for signals they no longer care about.
- *
- *   2. Batching
- *      batch(fn) defers all effect executions until fn returns, then flushes once.
- *      Mirrors SwiftUI's automatic coalescing of mutations in the same event handler.
- *      Without this, setting two signals triggers each dependent effect twice.
+ * Reactive primitives — signal / computed / createEffect / batch, plus an
+ * ownership layer (createRoot / onCleanup / getOwner / runWithOwner) and untrack.
+ *
+ * Design reference: SwiftUI @Observable + Solid.js fine-grained reactivity.
+ *
+ *   View = f(State)
+ *   signal      — reactive source (@State)
+ *   computed    — derived, LAZY + memoized (SwiftUI computed property / Solid memo)
+ *   createEffect— side effect that re-runs when its reads change (≈ body)
+ *   ownership   — effects/memos form an owner tree; disposing a scope disposes
+ *                 everything created under it (critical for MPA: tear down a page
+ *                 and every effect it spawned is cleaned up in one call).
+ *
+ * Model (push-pull scheduling + lazy memos):
+ *   - Reading a source inside a computation links them both ways.
+ *   - Writing a signal marks direct observers DIRTY and their transitive memo
+ *     observers CHECK ("maybe dirty"), scheduling any dependent effects. Effects
+ *     flush once (deduped — diamond dependencies run an effect a single time).
+ *   - Memos recompute lazily on read, and only re-notify their observers when
+ *     their derived value actually changes (via `equals`). A CHECK computation
+ *     first pulls its sources up to date; if none changed value, it is skipped —
+ *     so a memo whose output is stable never wakes the effects behind it.
+ *   - Every computation is owned; re-running or disposing it first disposes its
+ *     owned children and runs its cleanups (no leaked nested effects).
  */
 export type Getter<T> = () => T;
 export type Setter<T> = (value: T | ((prev: T) => T)) => void;
 export interface SignalOptions<T> {
-    /** Custom equality check. Defaults to Object.is. Return true to skip update. */
+    /** Custom equality. Defaults to Object.is. Return true to skip the update. */
     equals?: (prev: T, next: T) => boolean;
 }
+/** Anything a computation can subscribe to (a signal, or a memo). */
+interface SourceLike {
+    observers: Set<Computation>;
+}
+/** Staleness of a computation. CLEAN → up to date; CHECK → a memo source may
+ *  have changed (verify before recomputing); DIRTY → definitely recompute. */
+declare const CLEAN = 0;
+declare const CHECK = 1;
+declare const DIRTY = 2;
+type State = typeof CLEAN | typeof CHECK | typeof DIRTY;
+/** An effect or a memo — a node that runs a function and tracks its reads. */
+interface Computation extends Owner {
+    fn: () => unknown;
+    /** Sources (signals / memos) read during the last run. */
+    sources: Set<SourceLike>;
+    isEffect: boolean;
+    running: boolean;
+    disposed: boolean;
+    state: State;
+    observers: Set<Computation>;
+    value: unknown;
+    equals: (a: unknown, b: unknown) => boolean;
+}
+/** A node that can own child computations + cleanups (effect, memo, or root). */
+export interface Owner {
+    owned: Computation[];
+    cleanups: Array<() => void>;
+    owner: Owner | null;
+}
 /**
- * Create a reactive value. Returns a [getter, setter] tuple.
+ * Create a reactive value. Returns a `[getter, setter]` tuple.
  *
  *   const [count, setCount] = signal(0);
- *   count()              // read — auto-tracks inside createEffect / computed
- *   setCount(1)          // write — notifies dependents; skips if value unchanged
- *   setCount(n => n + 1) // updater function form
+ *   count();               // read — auto-tracked inside computed / createEffect
+ *   setCount(1);           // write — notifies dependents; skipped if unchanged
+ *   setCount((n) => n + 1) // updater form
  */
 export declare function signal<T>(initial: T, options?: SignalOptions<T>): [Getter<T>, Setter<T>];
 /**
- * Run fn immediately and re-run it whenever any signal read inside it changes.
- * Returns a dispose function that stops the effect and cleans up subscriptions.
- *
- * Before each re-run, the effect removes itself from every signal it previously
- * subscribed to (stale-subscription cleanup), then re-subscribes only to signals
- * read in the new run.
- *
- * fn may return a cleanup function — called before each re-run and on dispose.
+ * Derived, read-only, LAZY + memoized value. Recomputes only when read after a
+ * dependency changed; unread memos never recompute. When a recompute produces an
+ * equal value (default `Object.is`, override via `options.equals`) the memo does
+ * NOT notify its observers — so effects behind a value-stable memo stay asleep.
+ * Owned by the current scope, so it is disposed when that scope is.
+ *
+ *   const fullName = computed(() => `${first()} ${last()}`);
+ *   fullName(); // computes on first read, caches until a dep's value changes
+ */
+export declare function computed<T>(fn: () => T, options?: SignalOptions<T>): Getter<T>;
+/**
+ * Run `fn` immediately, then re-run it whenever a signal/memo it read changes.
+ * Owned by the current scope. `fn` may return a cleanup, called before each
+ * re-run and on dispose. Returns a dispose function.
  *
  *   const dispose = createEffect(() => {
- *     document.title = `Count: ${count()}`;
- *     return () => { document.title = ''; }; // optional cleanup
+ *     el.textContent = `Count: ${count()}`;
+ *     return () => {}; // optional cleanup
  *   });
- *
- *   dispose(); // stop tracking, remove from all signals
  */
 export declare function createEffect(fn: () => void | (() => void)): () => void;
 /**
- * Derived read-only signal. Recomputes when its dependencies change.
- *
- *   const [firstName, setFirstName] = signal('Jane');
- *   const [lastName,  setLastName]  = signal('Doe');
- *   const fullName = computed(() => `${firstName()} ${lastName()}`);
- *
- *   fullName() // 'Jane Doe'
- *   setFirstName('John');
- *   fullName() // 'John Doe'
+ * Coalesce multiple writes into one flush. Effects run once after `fn` returns,
+ * deduplicated. Nested batches are absorbed by the outermost one.
  */
-export declare function computed<T>(fn: () => T): Getter<T>;
+export declare function batch(fn: () => void): void;
+/** Read signals without subscribing the current computation to them. */
+export declare function untrack<T>(fn: () => T): T;
 /**
- * Run multiple signal writes as a single atomic update.
- * All effects are deferred until fn returns, then flushed once (deduplicated).
+ * Create a disposable reactive scope. Effects/memos created inside are owned by
+ * it; calling the passed `dispose` tears them all down. Use one per page/route
+ * in an MPA/SPA so navigating away cleans up every effect that page spawned.
  *
- * Mirrors SwiftUI's automatic coalescing of mutations within the same event handler.
- *
- *   // Without batch: each setter triggers effects independently (2 runs)
- *   setFirstName('John');
- *   setLastName('Smith');
- *
- *   // With batch: one flush after both writes (1 run)
- *   batch(() => {
- *     setFirstName('John');
- *     setLastName('Smith');
- *   });
- *
- * Nested batch() calls are safe — inner calls are absorbed by the outer batch.
+ *   const dispose = createRoot((dispose) => { renderPage(); return dispose; });
+ *   // ...later, on navigation:
+ *   dispose();
  */
-export declare function batch(fn: () => void): void;
+export declare function createRoot<T>(fn: (dispose: () => void) => T): T;
+/** Register a cleanup on the current scope, run when it re-runs or is disposed. */
+export declare function onCleanup(fn: () => void): void;
+/** The current owner scope (for advanced integrations, e.g. a router). */
+export declare function getOwner(): Owner | null;
+/** Run `fn` under a specific owner scope (pairs with getOwner). */
+export declare function runWithOwner<T>(owner: Owner | null, fn: () => T): T;
+export {};

package/dist/utils/router/index.d.ts

@@ -55,10 +55,19 @@ export interface RouterComponentElement extends HTMLElement {
 export declare function getSSGPath(): string | null;
 export declare function setSSGPath(path: string): void;
 export declare function clearSSGPath(): void;
+/**
+ * Match a route pattern (with `:param` and `*` segments) against a path.
+ * Single source of truth shared by RouterCore and the `<r-route>` element.
+ */
+export declare function matchPath(routePath: string, exact: boolean, path: string): {
+    matched: boolean;
+    params: Record<string, string>;
+};
 export declare class RouterCore {
     private readonly _mode;
     private readonly _base;
     private readonly _routes;
+    private readonly _flatRoutes;
     private readonly _vtMode;
     private readonly _beforeGuards;
     private readonly _afterGuards;
@@ -73,10 +82,11 @@ export declare class RouterCore {
     get base(): string;
     get routes(): RouteConfig[];
     get currentRoute(): RouteLocation | null;
-    private _matchConfigPath;
-    /** Return the first RouteConfig whose path matches the given URL path, or null. */
+    /** Return the first matching route (absolute path, nested-aware), or null. */
     matchRoute(path: string): RouteConfig | null;
-    /** Return all route paths declared in the router config — used to enumerate SSG pages. */
+    /** Extract `:param` values for the first matching route ({} if none). */
+    matchParams(path: string): Record<string, string>;
+    /** All declared route paths (nested flattened) — used to enumerate SSG pages. */
     getStaticPaths(): string[];
     private _enableMpa;
     private _disableMpa;

package/dist/utils/router.js

@@ -1,41 +1,71 @@
-var o = null, r = null, u = null;
-function m() {
-  return u;
+var c = null, r = null, h = null;
+function P() {
+  return h;
 }
-function v(e) {
-  u = e;
+function x(e) {
+  h = e;
 }
-function b() {
-  u = null;
+function E() {
+  h = null;
 }
-function f(e) {
+function m(e) {
   const t = {};
-  return e && new URLSearchParams(e.startsWith("?") ? e.slice(1) : e).forEach((i, n) => {
-    t[n] = i;
+  return e && new URLSearchParams(e.startsWith("?") ? e.slice(1) : e).forEach((n, a) => {
+    t[a] = n;
   }), t;
 }
-function l() {
+function f(e, t, n) {
+  const a = [], s = e.split("/").map((i) => i.startsWith(":") ? (a.push(i.slice(1)), "([^/]+)") : i === "*" ? "(.*)" : i.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("/"), o = t ? new RegExp(`^${s}$`) : new RegExp(`^${s}(?:/.*)?$`), u = n.match(o);
+  if (!u) return {
+    matched: !1,
+    params: {}
+  };
+  const d = {};
+  return a.forEach((i, w) => {
+    d[i] = decodeURIComponent(u[w + 1] ?? "");
+  }), {
+    matched: !0,
+    params: d
+  };
+}
+function g(e, t) {
+  return e ? `${e.replace(/\/$/, "")}/${t.replace(/^\//, "")}` : t;
+}
+function l(e, t = "") {
+  const n = [];
+  for (const a of e) {
+    const s = g(t, a.path);
+    n.push({
+      path: s,
+      exact: a.exact ?? !1,
+      meta: a.meta
+    }), a.children?.length && n.push(...l(a.children, s));
+  }
+  return n;
+}
+function v() {
   return typeof document < "u" && "startViewTransition" in document;
 }
-function _(e) {
-  l() ? document.startViewTransition(e) : e();
+function b(e) {
+  v() ? document.startViewTransition(e) : e();
 }
-function h() {
+function p() {
   typeof document > "u" || r && document.head.contains(r) || (r = document.createElement("style"), r.textContent = "@view-transition { navigation: auto; }", document.head.appendChild(r));
 }
-function d() {
+function _() {
   r?.remove(), r = null;
 }
-function p(e) {
+function y(e) {
   return e === !0 || e === "spa" || e === "both";
 }
-function w(e) {
+function S(e) {
   return e === "mpa" || e === "both";
 }
-var g = class {
+var R = class {
   _mode;
   _base;
   _routes;
+  _flatRoutes;
   _vtMode;
   _beforeGuards = [];
   _afterGuards = [];
@@ -46,7 +76,7 @@ var g = class {
   _current = null;
   _mpaActive = !1;
   constructor(e = {}) {
-    this._mode = e.mode ?? "history", this._base = e.base ?? "", this._routes = e.routes ?? [], this._vtMode = e.viewTransition, w(this._vtMode) && this._enableMpa();
+    this._mode = e.mode ?? "history", this._base = e.base ?? "", this._routes = e.routes ?? [], this._flatRoutes = l(this._routes), this._vtMode = e.viewTransition, S(this._vtMode) && this._enableMpa();
   }
   get mode() {
     return this._mode;
@@ -60,21 +90,29 @@ var g = class {
   get currentRoute() {
     return this._current;
   }
-  _matchConfigPath(e, t) {
-    const i = [], n = t.path.split("/").map((s) => s.startsWith(":") ? (i.push(s.slice(1)), "([^/]+)") : s === "*" ? "(.*)" : s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("/");
-    return (t.exact ? new RegExp(`^${n}$`) : new RegExp(`^${n}(?:/.*)?$`)).test(e);
-  }
   matchRoute(e) {
-    return this._routes.find((t) => this._matchConfigPath(e, t)) ?? null;
+    const t = this._flatRoutes.find((n) => f(n.path, n.exact, e).matched);
+    return t ? {
+      path: t.path,
+      exact: t.exact,
+      meta: t.meta
+    } : null;
+  }
+  matchParams(e) {
+    for (const t of this._flatRoutes) {
+      const n = f(t.path, t.exact, e);
+      if (n.matched) return n.params;
+    }
+    return {};
   }
   getStaticPaths() {
-    return this._routes.map((e) => e.path);
+    return this._flatRoutes.map((e) => e.path);
   }
   _enableMpa() {
-    this._mpaActive || (this._mpaActive = !0, h(), typeof window < "u" && (window.addEventListener("pageswap", this._onPageSwap), window.addEventListener("pagereveal", this._onPageReveal)));
+    this._mpaActive || (this._mpaActive = !0, p(), typeof window < "u" && (window.addEventListener("pageswap", this._onPageSwap), window.addEventListener("pagereveal", this._onPageReveal)));
   }
   _disableMpa() {
-    this._mpaActive && (this._mpaActive = !1, d(), typeof window < "u" && (window.removeEventListener("pageswap", this._onPageSwap), window.removeEventListener("pagereveal", this._onPageReveal)));
+    this._mpaActive && (this._mpaActive = !1, _(), typeof window < "u" && (window.removeEventListener("pageswap", this._onPageSwap), window.removeEventListener("pagereveal", this._onPageReveal)));
   }
   _onPageSwap = (e) => {
     this._pageSwapHandlers.forEach((t) => t(e));
@@ -89,11 +127,11 @@ var g = class {
     this._components.delete(e);
   }
   _buildLocation(e) {
-    const t = e.indexOf("?"), i = t === -1 ? e : e.slice(0, t), n = t === -1 ? "" : e.slice(t + 1);
+    const t = e.indexOf("?"), n = t === -1 ? e : e.slice(0, t), a = t === -1 ? "" : e.slice(t + 1);
     return {
-      path: i || "/",
+      path: n || "/",
       params: {},
-      query: f(n),
+      query: m(a),
       fullPath: e || "/"
     };
   }
@@ -104,21 +142,23 @@ var g = class {
     return (t && e.startsWith(t) ? e.slice(t.length) || "/" : e) + (window.location.search || "");
   }
   _notify() {
-    const e = this._buildLocation(this._getCurrentPath()), t = this._current;
+    const e = this._buildLocation(this._getCurrentPath());
+    e.params = this.matchParams(e.path);
+    const t = this._current;
     this._current = e;
-    const i = () => {
-      this._components.forEach((n) => n._syncRoutes());
+    const n = () => {
+      this._components.forEach((a) => a._syncRoutes());
     };
-    p(this._vtMode) ? _(i) : i(), this._afterGuards.forEach((n) => n(e, t)), this._changeHandlers.forEach((n) => n(e, t));
+    y(this._vtMode) ? b(n) : n(), this._afterGuards.forEach((a) => a(e, t)), this._changeHandlers.forEach((a) => a(e, t));
   }
   async _navigate(e, t) {
-    const i = this._buildLocation(e), n = this._current;
+    const n = this._buildLocation(e), a = this._current;
     for (const s of this._beforeGuards) {
-      const a = await new Promise((c) => {
-        s(i, n, c);
+      const o = await new Promise((u) => {
+        s(n, a, u);
       });
-      if (a === !1) return;
-      if (typeof a == "string") return this._navigate(a, t);
+      if (o === !1) return;
+      if (typeof o == "string") return this._navigate(o, t);
     }
     if (typeof window < "u") {
       const s = this._mode === "hash" ? `#${e}` : this._base + e;
@@ -175,23 +215,24 @@ var g = class {
     };
   }
 };
-function y(e) {
-  o?.destroy();
-  const t = new g(e);
-  return o = t, t;
+function H(e) {
+  c?.destroy();
+  const t = new R(e);
+  return c = t, t;
 }
-function S() {
-  return o;
+function M() {
+  return c;
 }
-function P() {
-  return h(), () => d();
+function G() {
+  return p(), () => _();
 }
 export {
-  g as RouterCore,
-  b as clearSSGPath,
-  y as createRouter,
-  P as enableMpaViewTransitions,
-  m as getSSGPath,
-  v as setSSGPath,
-  S as useRouter
+  R as RouterCore,
+  E as clearSSGPath,
+  H as createRouter,
+  G as enableMpaViewTransitions,
+  P as getSSGPath,
+  f as matchPath,
+  x as setSSGPath,
+  M as useRouter
 };

package/dist/utils/theme.d.ts

@@ -2,7 +2,7 @@ export type RanThemeName = 'light' | 'dark' | 'system';
 export type ThemeTarget = HTMLElement | Document;
 export type ThemeTokenMap = Record<string, string | number | null | undefined>;
 export declare const setTheme: (name: RanThemeName, target?: ThemeTarget) => void;
-export declare const getTheme: (target?: ThemeTarget) => RanThemeName | "";
+export declare const getTheme: (target?: ThemeTarget) => RanThemeName | '';
 export declare const setThemeToken: (name: string, value: string | number, target?: HTMLElement) => void;
 export declare const clearThemeToken: (name: string, target?: HTMLElement) => void;
 export declare const setThemeTokens: (tokens: ThemeTokenMap, target?: HTMLElement) => void;

package/dist/warning-circle-fill-Cz0qu7AH.js

@@ -0,0 +1,23 @@
+var i = {
+  success: !0,
+  _identification: !0,
+  data: '<svg t="1667965185400" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8572" width="200" height="200"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m193.5 301.7l-210.6 292c-12.7 17.7-39 17.7-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" p-id="8573"></path></svg>'
+}, t = {
+  success: !0,
+  _identification: !0,
+  data: '<svg t="1667965220951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8711" width="200" height="200"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m165.4 618.2l-66-0.3L512 563.4l-99.3 118.4-66.1 0.3c-4.4 0-8-3.5-8-8 0-1.9 0.7-3.7 1.9-5.2l130.1-155L340.5 359c-1.2-1.5-1.9-3.3-1.9-5.2 0-4.4 3.6-8 8-8l66.1 0.3L512 464.6l99.3-118.4 66-0.3c4.4 0 8 3.5 8 8 0 1.9-0.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z" p-id="8712"></path></svg>'
+}, s = {
+  success: !0,
+  _identification: !0,
+  data: '<svg t="1667965239916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8850" width="200" height="200"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272z m-32-344c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z" p-id="8851"></path></svg>'
+}, c = {
+  success: !0,
+  _identification: !0,
+  data: '<svg t="1667965273540" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8989" width="200" height="200"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296z m32 440c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z" p-id="8990"></path></svg>'
+};
+export {
+  i,
+  s as n,
+  t as r,
+  c as t
+};