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

package/dist/theme-switch-B09egc6h.js

@@ -0,0 +1,104 @@
+import { a as i, i as o, n as h, r as c, t as l } from "./utils-DBfrRFoE.js";
+import { t as d } from "./events-C59wGdni.js";
+import { a as u, n as m } from "./ssr-DSGwPtEd.js";
+import { i as b, n as v } from "./theme-kOWZbKCq.js";
+var g = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{display:var(--ran-theme-switch-display, inline-flex);box-sizing:border-box}.ran-theme-switch{display:inline-flex;align-items:center;gap:var(--ran-theme-switch-gap, 2px);padding:var(--ran-theme-switch-padding, 2px);border-width:var(--ran-skin-border-width, 1px);border-style:var(--ran-skin-border-style, solid);border-color:var(--ran-theme-switch-border-color, var(--ran-color-border, #eaeaea));border-radius:var(--ran-theme-switch-radius, var(--ran-radius-full, 9999px));background:var(--ran-theme-switch-background, transparent);box-sizing:border-box}.ran-theme-switch button{width:var(--ran-theme-switch-button-size, 28px);height:var(--ran-theme-switch-button-size, 28px);display:grid;place-items:center;border:none;border-radius:var(--ran-theme-switch-radius, var(--ran-radius-full, 9999px));background:transparent;color:var(--ran-theme-switch-color, var(--ran-color-text-secondary, #4d4d4d));cursor:pointer;padding:0}.ran-theme-switch button:hover{color:var(--ran-theme-switch-hover-color, var(--ran-color-text, #171717))}.ran-theme-switch button[aria-pressed=true]{background:var(--ran-theme-switch-active-background, var(--ran-color-bg-hover, #ebebeb));color:var(--ran-theme-switch-active-color, var(--ran-color-text, #171717))}.ran-theme-switch button:focus-visible{outline:var(--ran-theme-switch-focus-outline, 2px solid var(--ran-color-primary, #006bff));outline-offset:2px}.ran-theme-switch svg{width:var(--ran-theme-switch-icon-size, 16px);height:var(--ran-theme-switch-icon-size, 16px)}", a = [
+  "system",
+  "light",
+  "dark"
+], p = {
+  system: '<svg viewBox="0 0 16 16" aria-hidden="true"><rect x="1.5" y="2.5" width="13" height="9" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M5.5 14h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',
+  light: '<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M8 1v1.8M8 13.2V15M15 8h-1.8M2.8 8H1m11.4-4.4-1.3 1.3M4.9 11.1l-1.3 1.3m9.8 0-1.3-1.3M4.9 4.9 3.6 3.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',
+  dark: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M13.5 9.5A6 6 0 0 1 6.5 2.5a6 6 0 1 0 7 7z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>'
+}, s = "ran-theme-switch-sync", w = class extends m {
+  static get observedAttributes() {
+    return [
+      "label-system",
+      "label-light",
+      "label-dark",
+      "sheet"
+    ];
+  }
+  _events = new d();
+  _shadowDom;
+  _group;
+  constructor() {
+    super(), this._shadowDom = h(this, g), this._group = l(this._shadowDom, ".ran-theme-switch", () => {
+      const e = document.createElement("div");
+      e.className = "ran-theme-switch", e.setAttribute("part", "switch"), e.setAttribute("role", "group");
+      for (const t of a) {
+        const r = document.createElement("button");
+        r.type = "button", r.dataset.choice = t, r.setAttribute("part", `button ${t}`), r.setAttribute("aria-pressed", "false"), r.innerHTML = p[t], e.appendChild(r);
+      }
+      return e;
+    });
+  }
+  get sheet() {
+    return c(this, "sheet");
+  }
+  set sheet(e) {
+    o(this, "sheet", e);
+  }
+  get value() {
+    return v() || "system";
+  }
+  set value(e) {
+    a.includes(e) && this._select(e);
+  }
+  _label(e) {
+    const t = {
+      system: "System theme",
+      light: "Light theme",
+      dark: "Dark theme"
+    }[e];
+    return this.getAttribute(`label-${e}`) || t;
+  }
+  _syncLabels() {
+    this._group.setAttribute("aria-label", this.getAttribute("label") || "Theme");
+    for (const e of this._group.querySelectorAll("button")) e.setAttribute("aria-label", this._label(e.dataset.choice));
+  }
+  _reflect() {
+    const e = this.value;
+    for (const t of this._group.querySelectorAll("button")) t.setAttribute("aria-pressed", t.dataset.choice === e ? "true" : "false");
+  }
+  _select(e) {
+    b(e), this._reflect(), this._syncMeta(e), document.dispatchEvent(new CustomEvent(s)), this.dispatchEvent(new CustomEvent("change", {
+      detail: { theme: e },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _syncMeta(e) {
+    if (typeof requestAnimationFrame > "u") return;
+    const t = document.querySelectorAll('meta[name="theme-color"]');
+    t.length && requestAnimationFrame(() => {
+      for (const r of t)
+        if (r.dataset.ranOriginalContent === void 0 && (r.dataset.ranOriginalContent = r.getAttribute("content") || ""), e === "system") r.setAttribute("content", r.dataset.ranOriginalContent);
+        else {
+          const n = getComputedStyle(document.documentElement).getPropertyValue("--ran-color-bg").trim() || getComputedStyle(document.body).backgroundColor;
+          r.setAttribute("content", n);
+        }
+    });
+  }
+  _handleClick = (e) => {
+    const t = e.target.closest?.("button")?.dataset.choice;
+    t && a.includes(t) && this._select(t);
+  };
+  _handleSync = () => this._reflect();
+  handlerExternalCss = () => {
+    i(this, this._shadowDom, "sheet", null, this.sheet);
+  };
+  connectedCallback() {
+    this.handlerExternalCss(), this._syncLabels(), this._reflect(), this._events.on(this._group, "click", this._handleClick), document.addEventListener(s, this._handleSync), typeof window < "u" && window.addEventListener("storage", this._handleSync);
+  }
+  disconnectedCallback() {
+    this._events.abort(), document.removeEventListener(s, this._handleSync), typeof window < "u" && window.removeEventListener("storage", this._handleSync);
+  }
+  attributeChangedCallback(e, t, r) {
+    t !== r && (e === "sheet" && this.handlerExternalCss(), e.startsWith("label") && this._syncLabels());
+  }
+};
+u("r-theme-switch", w);
+export {
+  w as t
+};

package/dist/theme-switch.js

@@ -1,4 +1,4 @@
-import { t as e } from "./theme-switch-B_FZvqBN.js";
+import { t as e } from "./theme-switch-B09egc6h.js";
 export {
   e as ThemeSwitch,
   e as default

package/dist/theme.d.ts

@@ -0,0 +1,2 @@
+export { setTheme, getTheme, setThemeToken, clearThemeToken, setThemeTokens, initTheme } from '@/utils/theme';
+export type { RanThemeName, ThemeTarget, ThemeTokenMap } from '@/utils/theme';

package/dist/theme.js

@@ -0,0 +1,9 @@
+import { a as s, i as T, n as a, o as m, r as t, t as o } from "./theme-kOWZbKCq.js";
+export {
+  o as clearThemeToken,
+  a as getTheme,
+  t as initTheme,
+  T as setTheme,
+  s as setThemeToken,
+  m as setThemeTokens
+};

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

@@ -1,4 +1,5 @@
 import type { EventManager } from './events';
+import { type Getter } from './signal';
 export interface Ref<T extends HTMLElement = HTMLElement> {
     current: T | null;
 }
@@ -7,22 +8,28 @@ export declare class ElementBuilder<T extends HTMLElement = HTMLElement> {
     private el;
     constructor(tag: string);
     id(value: string): this;
-    class(name: string): this;
+    /**
+     * Apply a value now, or bind it reactively when a getter is passed.
+     * A getter creates an effect owned by the current reactive scope (createRoot),
+     * so the binding is disposed automatically when that scope is torn down.
+     */
+    private bind;
+    class(name: string | Getter<string>): this;
     addClass(...names: string[]): this;
     removeClass(...names: string[]): this;
-    attr(name: string, value: string): this;
+    attr(name: string, value: string | Getter<string>): this;
     attrs(values: Record<string, string | number | boolean | null | undefined>): this;
-    boolAttr(name: string, value: boolean, enabledValue?: string): this;
-    part(value: string): this;
-    data(key: string, value: string): this;
-    style(keyOrMap: string | Record<string, string>, value?: string): this;
-    cssVar(name: string, value: string): this;
-    aria(key: string, value: string): this;
-    role(value: string): this;
+    boolAttr(name: string, value: boolean | Getter<boolean>, enabledValue?: string): this;
+    part(value: string | Getter<string>): this;
+    data(key: string, value: string | Getter<string>): this;
+    style(keyOrMap: string | Record<string, string>, value?: string | Getter<string>): this;
+    cssVar(name: string, value: string | Getter<string>): this;
+    aria(key: string, value: string | Getter<string>): this;
+    role(value: string | Getter<string>): this;
     tabIndex(value: number): this;
-    label(value: string): this;
-    labelledBy(id: string): this;
-    describedBy(id: string): this;
+    label(value: string | Getter<string>): this;
+    labelledBy(id: string | Getter<string>): this;
+    describedBy(id: string | Getter<string>): this;
     ariaHidden(hidden?: boolean): this;
     /**
      * Permanent build-time listener — tied to the element's lifetime.
@@ -48,7 +55,7 @@ export declare class ElementBuilder<T extends HTMLElement = HTMLElement> {
     delegate<K extends keyof HTMLElementEventMap>(manager: EventManager, selector: string, type: K, handler: (ev: HTMLElementEventMap[K], target: Element) => void, options?: Omit<AddEventListenerOptions, 'signal'>): this;
     children(...items: (HTMLElement | string | ElementBuilder<any> | undefined | null | (HTMLElement | string | ElementBuilder<any> | undefined | null)[])[]): this;
     replaceChildren(...items: (HTMLElement | string | ElementBuilder<any> | undefined | null | (HTMLElement | string | ElementBuilder<any> | undefined | null)[])[]): this;
-    text(value: string): this;
+    text(value: string | Getter<string>): this;
     ref(holder: Ref<T>): this;
     shadow(options?: ShadowRootInit): ShadowBuilder<T>;
     build(): T;

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

@@ -15,4 +15,4 @@ export declare const Nav: () => ElementBuilder<HTMLElement>;
 export declare const Header: () => ElementBuilder<HTMLElement>;
 export declare const Footer: () => ElementBuilder<HTMLElement>;
 export declare const Main: () => ElementBuilder<HTMLElement>;
-export declare const DeclarativeShadow: (mode?: "open" | "closed", delegatesFocus?: boolean) => ElementBuilder<HTMLTemplateElement>;
+export declare const DeclarativeShadow: (mode?: 'open' | 'closed', delegatesFocus?: boolean) => ElementBuilder<HTMLTemplateElement>;

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

@@ -1,7 +1,7 @@
 export { isSSR } from './env';
 export { EventManager } from './events';
-export { signal, createEffect, computed, batch } from './signal';
-export type { Getter, Setter, SignalOptions } from './signal';
+export { signal, createEffect, computed, batch, untrack, createRoot, onCleanup, getOwner, runWithOwner, } from './signal';
+export type { Getter, Setter, SignalOptions, Owner } from './signal';
 export { escapeHtml, escapeHtmlAttribute } from './escape';
 export { type MockNode, matchSelector, collectMatches } from './selectors';
 export { DocumentFragmentMock, HTMLElementMock, ShadowRootMock } from './mocks';

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/i18n/index.d.ts

@@ -37,9 +37,25 @@ export declare class I18nCore {
     get availableLocales(): string[];
     /**
      * Translate a key against the active locale, falling back to the fallback
-     * locale and finally the key itself. `{param}` placeholders are interpolated.
+     * locale and finally the key itself. `{param}` placeholders are interpolated;
+     * `{{` / `}}` are escapes for literal `{` / `}` (see {@link I18nCore._interpolate}).
      */
     t(key: string, params?: TranslateParams): string;
+    /**
+     * Substitute `{param}` placeholders and unescape literal braces.
+     *
+     * Grammar (a single left-to-right pass, so escapes and placeholders never
+     * fight each other), matching the format-string convention used by Rust
+     * `format!`, Python `str.format`, and .NET `String.Format`:
+     * - `{{` → literal `{`
+     * - `}}` → literal `}`
+     * - `{name}` → `params.name` (stringified), or left untouched when the param
+     *   is absent, so a stray placeholder is visible rather than silently blank.
+     *
+     * A lone `{`/`}` or a `{ spaced }` group is not a placeholder and is emitted
+     * verbatim, so CSS/JSON/code fragments in a message pass through unharmed.
+     * To wrap a value in literal braces, double the outer pair: `{{{name}}}`.
+     */
     private _interpolate;
     /** Subscribe to locale changes. Returns an unsubscribe function. */
     onChange(handler: LocaleChangeHandler): () => void;

package/dist/utils/i18n.js

@@ -1,21 +1,21 @@
-var l = "ran-locale", n = (e) => {
+var n = "ran-locale", i = Object.freeze({}), o = (e) => {
   if (typeof localStorage > "u") return null;
   try {
     return localStorage.getItem(e);
   } catch {
     return null;
   }
-}, i = (e, t) => {
+}, _ = (e, t) => {
   if (!(typeof localStorage > "u"))
     try {
       localStorage.setItem(e, t);
     } catch {
     }
-}, o = (e) => {
+}, c = (e) => {
   if (typeof navigator > "u" || !navigator.language) return null;
   const t = navigator.language.toLowerCase();
   return e.find((s) => s.toLowerCase() === t) ?? e.find((s) => t.startsWith(s.toLowerCase())) ?? e.find((s) => t.startsWith(`${s.toLowerCase()}-`)) ?? null;
-}, _ = class {
+}, h = class {
   _locale;
   _fallback;
   _messages;
@@ -23,14 +23,14 @@ var l = "ran-locale", n = (e) => {
   _storageKey;
   _handlers = /* @__PURE__ */ new Set();
   constructor(e = {}) {
-    this._messages = { ...e.messages }, this._fallback = e.fallbackLocale ?? "en", this._persist = e.persist ?? !1, this._storageKey = e.storageKey ?? l, this._locale = this._resolveInitialLocale(e);
+    this._messages = { ...e.messages }, this._fallback = e.fallbackLocale ?? "en", this._persist = e.persist ?? !1, this._storageKey = e.storageKey ?? n, this._locale = this._resolveInitialLocale(e);
   }
   _resolveInitialLocale(e) {
-    const t = Object.keys(this._messages), s = this._persist ? n(this._storageKey) : null;
+    const t = Object.keys(this._messages), s = this._persist ? o(this._storageKey) : null;
     if (s && (this._messages[s] || t.length === 0)) return s;
     if (e.locale) return e.locale;
     if (e.detectNavigator) {
-      const r = o(t);
+      const r = c(t);
       if (r) return r;
     }
     return this._fallback;
@@ -42,7 +42,7 @@ var l = "ran-locale", n = (e) => {
     return this._locale;
   }
   setLocale(e) {
-    e !== this._locale && (this._locale = e, this._persist && i(this._storageKey, e), this._notify());
+    e !== this._locale && (this._locale = e, this._persist && _(this._storageKey, e), this._notify());
   }
   addMessages(e, t) {
     this._messages[e] = {
@@ -61,7 +61,8 @@ var l = "ran-locale", n = (e) => {
     return this._interpolate(s, t);
   }
   _interpolate(e, t) {
-    return t ? e.replace(/\{(\w+)\}/g, (s, r) => t[r] != null ? String(t[r]) : s) : e;
+    const s = t ?? i;
+    return e.replace(/\{\{|\}\}|\{(\w+)\}/g, (r, l) => r === "{{" ? "{" : r === "}}" ? "}" : s[l] != null ? String(s[l]) : r);
   }
   onChange(e) {
     return this._handlers.add(e), () => {
@@ -75,14 +76,14 @@ var l = "ran-locale", n = (e) => {
     this._handlers.clear();
   }
 }, a = null;
-function h(e = {}) {
-  return a = new _(e), a;
+function u(e = {}) {
+  return a = new h(e), a;
 }
-function c() {
+function g() {
   return a;
 }
 export {
-  _ as I18nCore,
-  h as createI18n,
-  c as useI18n
+  h as I18nCore,
+  u as createI18n,
+  g as useI18n
 };

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;