dalila 1.9.3 → 1.9.5

package/README.md

@@ -1,4 +1,4 @@
-# Dalila
+# 🐰✂️ Dalila
 
 **DOM-first reactivity without the re-renders.**
 
@@ -58,7 +58,8 @@ bind(document.getElementById('app')!, ctx);
 
 ### Runtime
 
-- [Template Binding](./docs/runtime/bind.md) — `bind()`, text interpolation, events
+- [Template Binding](./docs/runtime/bind.md) — `bind()`, `mount()`, `configure()`, text interpolation, events
+- [Components](./docs/runtime/component.md) — `defineComponent`, typed props/emits/refs, slots
 - [FOUC Prevention](./docs/runtime/fouc-prevention.md) — Automatic token hiding
 
 ### Routing
@@ -107,7 +108,7 @@ Firefox extension workflows:
 
 ```
 dalila           → signal, computed, effect, batch, ...
-dalila/runtime   → bind() for HTML templates
+dalila/runtime   → bind(), mount(), configure(), defineComponent()
 dalila/context   → createContext, provide, inject
 dalila/http      → createHttpClient with XSRF protection
 ```
@@ -130,10 +131,13 @@ count.set(5); // logs: Count is 5
 ### Template Binding
 
 ```ts
-import { bind } from 'dalila/runtime';
+import { configure, mount } from 'dalila/runtime';
+
+// Global component registry and options
+configure({ components: [MyComponent] });
 
-// Binds {tokens}, d-on-*, d-when, d-match to the DOM
-const dispose = bind(rootElement, ctx);
+// Bind a selector to a reactive view-model
+const dispose = mount('.app', { count: signal(0) });
 
 // Cleanup when done
 dispose();
@@ -279,39 +283,46 @@ async function handleSubmit(data, { signal }) {
 
 ```ts
 // page.ts
-import { signal } from 'dalila';
+import { computed, signal } from 'dalila';
 import { createDialog, mountUI } from 'dalila/components/ui';
 
-const dialog = createDialog();
+class HomePageVM {
+  count = signal(0);
+  status = computed(() => `Count: ${this.count()}`);
+  dialog = createDialog({ closeOnBackdrop: true, closeOnEscape: true });
+  increment = () => this.count.update(n => n + 1);
+  openModal = () => this.dialog.show();
+  closeModal = () => this.dialog.close();
+}
 
 export function loader() {
-  const count = signal(0);
-
-  return {
-    count,
-    increment: () => count.update(n => n + 1),
-    openDialog: () => dialog.show(),
-  };
+  return new HomePageVM();
 }
 
 // Called after view is mounted
-export function onMount(root: HTMLElement) {
-  mountUI(root, {
-    dialogs: { dialog }
+export function onMount(root: HTMLElement, data: HomePageVM) {
+  return mountUI(root, {
+    dialogs: { dialog: data.dialog },
+    events: []
   });
 }
+
+// Optional extra hook on route leave
+export function onUnmount(_root: HTMLElement) {}
 ```
 
 ```html
 <!-- page.html -->
-<d-button d-on-click="openDialog">Open Dialog</d-button>
+<d-button d-on-click="increment">Increment</d-button>
+<d-button d-on-click="openModal">Open Dialog</d-button>
 
 <d-dialog d-ui="dialog">
   <d-dialog-header>
-    <d-dialog-title>Count: {count}</d-dialog-title>
+    <d-dialog-title>{status}</d-dialog-title>
+    <d-dialog-close d-on-click="closeModal">&times;</d-dialog-close>
   </d-dialog-header>
   <d-dialog-body>
-    <d-button d-on-click="increment">Increment</d-button>
+    <p>Modal controlled by the official route + UI pattern.</p>
   </d-dialog-body>
 </d-dialog>
 ```

package/dist/cli/check.js

@@ -520,7 +520,7 @@ function extractTemplateIdentifiers(html) {
         i++;
     }
     // --- 2. Directive scanning (supports single and double quotes) ---
-    const DIRECTIVE_RE = /\b(d-each|d-virtual-each|d-virtual-height|d-virtual-item-height|d-virtual-overscan|d-if|d-when|d-match|d-html|d-attr-[a-zA-Z][\w-]*|d-on-[a-zA-Z][\w-]*|d-form-error|d-form|d-array)\s*=\s*(['"])([\s\S]*?)\2/g;
+    const DIRECTIVE_RE = /\b(d-each|d-virtual-each|d-virtual-height|d-virtual-item-height|d-virtual-overscan|d-if|d-when|d-match|d-html|d-attr-[a-zA-Z][\w-]*|d-bind-[a-zA-Z][\w-]*|d-on-[a-zA-Z][\w-]*|d-form-error|d-form|d-array)\s*=\s*(['"])([\s\S]*?)\2/g;
     DIRECTIVE_RE.lastIndex = 0;
     let match;
     while ((match = DIRECTIVE_RE.exec(html))) {

package/dist/cli/index.js

@@ -9,7 +9,7 @@ const routeArgs = args.slice(2);
 const WATCH_DEBOUNCE_MS = 120;
 function showHelp() {
     console.log(`
-Dalila CLI
+🐰✂️  Dalila CLI
 
 Usage:
   dalila routes generate [options]    Generate routes + manifest from app file structure
@@ -32,7 +32,7 @@ Examples:
 }
 function showRoutesHelp() {
     console.log(`
-Dalila CLI - Routes
+🐰✂️  Dalila CLI - Routes
 
 Usage:
   dalila routes generate [options]    Generate routes + manifest from app file structure
@@ -52,7 +52,7 @@ Examples:
 }
 function showCheckHelp() {
     console.log(`
-Dalila CLI - Check
+🐰✂️  Dalila CLI - Check
 
 Usage:
   dalila check [path] [options]     Static analysis of HTML templates
@@ -182,7 +182,7 @@ function resolveGenerateConfig(cliArgs, cwd = process.cwd()) {
 async function generateRoutes(cliArgs) {
     const { appDir, outputPath } = resolveGenerateConfig(cliArgs);
     console.log('');
-    console.log('🚀 Dalila Routes Generator');
+    console.log('🐰✂️  Dalila Routes Generator');
     console.log('');
     try {
         await generateRoutesFile(appDir, outputPath);
@@ -243,7 +243,7 @@ function watchRoutes(cliArgs) {
         process.exit(1);
     }
     console.log('');
-    console.log('👀 Dalila Routes Watch');
+    console.log('🐰✂️  Dalila Routes Watch');
     console.log(`   app: ${appDir}`);
     console.log(`   output: ${outputPath}`);
     console.log('');

package/dist/cli/routes-generator.js

@@ -467,16 +467,31 @@ function pageProps(pageHtml, pageTs) {
             if (hasNamedExport(pageTs, 'onMount')) {
                 if (pageTs.lazy) {
                     const lazyLoader = `${pageTs.importName}_lazy`;
-                    props.push(`onMount: (root: HTMLElement) => ${lazyLoader}().then(mod => {
+                    props.push(`onMount: (root: HTMLElement, data: unknown, ctx: unknown) => ${lazyLoader}().then(mod => {
       if (typeof (mod as any).onMount === 'function') {
-        (mod as any).onMount(root);
+        return (mod as any).onMount(root, data, ctx);
       }
+      return undefined;
     })`);
                 }
                 else {
                     props.push(`onMount: ${moduleExport(pageTs, 'onMount')}`);
                 }
             }
+            if (hasNamedExport(pageTs, 'onUnmount')) {
+                if (pageTs.lazy) {
+                    const lazyLoader = `${pageTs.importName}_lazy`;
+                    props.push(`onUnmount: (root: HTMLElement, data: unknown, ctx: unknown) => ${lazyLoader}().then(mod => {
+      if (typeof (mod as any).onUnmount === 'function') {
+        return (mod as any).onUnmount(root, data, ctx);
+      }
+      return undefined;
+    })`);
+                }
+                else {
+                    props.push(`onUnmount: ${moduleExport(pageTs, 'onUnmount')}`);
+                }
+            }
         }
         else {
             props.push(`view: (ctx) => fromHtml(${viewConst}, { data: ${routeDataExpr()}, scope: ctx.scope })`);
@@ -501,6 +516,12 @@ function pageProps(pageHtml, pageTs) {
     if (hasNamedExport(pageTs, 'validation')) {
         props.push(`validation: ${moduleExport(pageTs, 'validation', { allowValue: true })}`);
     }
+    if (hasNamedExport(pageTs, 'onMount')) {
+        props.push(`onMount: ${moduleExport(pageTs, 'onMount')}`);
+    }
+    if (hasNamedExport(pageTs, 'onUnmount')) {
+        props.push(`onUnmount: ${moduleExport(pageTs, 'onUnmount')}`);
+    }
     return props;
 }
 function layoutProps(indent, layoutHtml, layoutTs) {

package/dist/router/route-tables.d.ts

@@ -33,6 +33,9 @@ export type RouteRedirectResult = string | null | undefined | Promise<string | n
 export type RouteMiddlewareResult = RouteGuardResult;
 export type RouteMiddleware = (ctx: RouteCtx) => RouteMiddlewareResult;
 export type RouteMiddlewareResolver = RouteMiddleware[] | ((ctx: RouteCtx) => RouteMiddleware[] | null | undefined | Promise<RouteMiddleware[] | null | undefined>);
+export type RouteMountCleanup = () => void;
+export type RouteMountResult = void | RouteMountCleanup | Promise<void | RouteMountCleanup>;
+export type RouteUnmountResult = void | Promise<void>;
 /**
  * Route definition.
  *
@@ -50,7 +53,8 @@ export interface RouteTable<T = any> {
     layout?: (ctx: RouteCtx, child: Node | DocumentFragment | Node[], data: T) => Node | DocumentFragment | Node[];
     loader?: (ctx: RouteCtx) => Promise<T>;
     preload?: (ctx: RouteCtx) => Promise<T>;
-    onMount?: (root: HTMLElement) => void;
+    onMount?: (root: HTMLElement, data: T, ctx: RouteCtx) => RouteMountResult;
+    onUnmount?: (root: HTMLElement, data: T, ctx: RouteCtx) => RouteUnmountResult;
     pending?: (ctx: RouteCtx) => Node | DocumentFragment | Node[];
     error?: (ctx: RouteCtx, error: unknown, data?: T) => Node | DocumentFragment | Node[];
     notFound?: (ctx: RouteCtx) => Node | DocumentFragment | Node[];

package/dist/router/router.js

@@ -109,6 +109,11 @@ export function createRouter(config) {
     let currentLoaderController = null;
     let started = false;
     let navigationToken = 0;
+    let activeLeafRoute = null;
+    let activeRouteMountCleanup = null;
+    let activeRouteUnmountHook = null;
+    let activeLeafData = undefined;
+    let activeLeafCtx = null;
     const transitionCoalescing = new Map();
     const scrollPositions = new LRUCache(config.scrollPositionsCacheSize ?? 100);
     const preloadTagsByKey = new Map();
@@ -582,10 +587,43 @@ export function createRouter(config) {
             replace: true
         };
     }
+    function runRouteUnmountLifecycle() {
+        const cleanup = activeRouteMountCleanup;
+        const onUnmount = activeRouteUnmountHook;
+        const data = activeLeafData;
+        const ctx = activeLeafCtx;
+        activeRouteMountCleanup = null;
+        activeRouteUnmountHook = null;
+        activeLeafRoute = null;
+        activeLeafData = undefined;
+        activeLeafCtx = null;
+        if (cleanup) {
+            try {
+                cleanup();
+            }
+            catch (error) {
+                console.error('[Dalila] Error in onMount cleanup lifecycle hook:', error);
+            }
+        }
+        if (onUnmount) {
+            try {
+                const result = onUnmount(outletElement, data, ctx);
+                if (result && typeof result.then === 'function') {
+                    void result.catch((error) => {
+                        console.error('[Dalila] Error in onUnmount lifecycle hook:', error);
+                    });
+                }
+            }
+            catch (error) {
+                console.error('[Dalila] Error in onUnmount lifecycle hook:', error);
+            }
+        }
+    }
     /**
      * Mount nodes into outlet and remove loading state
      */
     function mountToOutlet(...nodes) {
+        runRouteUnmountLifecycle();
         outletElement.replaceChildren(...nodes);
         queueMicrotask(() => {
             outletElement.removeAttribute('d-loading');
@@ -950,7 +988,7 @@ export function createRouter(config) {
         }
         commitRouteState();
         try {
-            mountViewStack(matchStack, ctx, dataStack);
+            mountViewStack(matchStack, ctx, dataStack, token);
             await finishSuccessfulTransition();
         }
         catch (error) {
@@ -986,16 +1024,18 @@ export function createRouter(config) {
         return promise;
     }
     /** Compose and mount the view stack (leaf view wrapped by parent layouts). */
-    function mountViewStack(matchStack, ctx, dataStack) {
+    function mountViewStack(matchStack, ctx, dataStack, navToken) {
         try {
             let content = null;
             let leafRoute = null;
+            let leafData = undefined;
             for (let i = matchStack.length - 1; i >= 0; i--) {
                 const match = matchStack[i];
                 const data = dataStack[i];
                 const route = match.route;
                 if (i === matchStack.length - 1) {
                     leafRoute = route;
+                    leafData = data;
                     if (!route.view) {
                         console.warn(`[Dalila] Leaf route ${match.path} has no view function`);
                         return;
@@ -1027,11 +1067,54 @@ export function createRouter(config) {
             if (content) {
                 const nodes = Array.isArray(content) ? content : [content];
                 mountToOutlet(...nodes);
+                activeLeafRoute = leafRoute ?? null;
+                activeRouteUnmountHook = leafRoute?.onUnmount ?? null;
+                activeLeafData = leafData;
+                activeLeafCtx = ctx;
                 // Call onMount lifecycle hook if present
                 if (leafRoute?.onMount) {
                     queueMicrotask(() => {
+                        if (navigationToken !== navToken)
+                            return;
+                        if (activeLeafRoute !== leafRoute)
+                            return;
                         try {
-                            leafRoute.onMount(outletElement);
+                            const result = leafRoute.onMount(outletElement, leafData, ctx);
+                            if (typeof result === 'function') {
+                                if (navigationToken === navToken && activeLeafRoute === leafRoute) {
+                                    activeRouteMountCleanup = result;
+                                }
+                                else {
+                                    try {
+                                        result();
+                                    }
+                                    catch (cleanupError) {
+                                        console.error('[Dalila] Error in stale onMount cleanup lifecycle hook:', cleanupError);
+                                    }
+                                }
+                                return;
+                            }
+                            if (result && typeof result.then === 'function') {
+                                void result
+                                    .then((resolved) => {
+                                    if (typeof resolved !== 'function')
+                                        return;
+                                    if (navigationToken === navToken && activeLeafRoute === leafRoute) {
+                                        activeRouteMountCleanup = resolved;
+                                    }
+                                    else {
+                                        try {
+                                            resolved();
+                                        }
+                                        catch (cleanupError) {
+                                            console.error('[Dalila] Error in stale async onMount cleanup lifecycle hook:', cleanupError);
+                                        }
+                                    }
+                                })
+                                    .catch((error) => {
+                                    console.error('[Dalila] Error in onMount lifecycle hook:', error);
+                                });
+                            }
                         }
                         catch (error) {
                             console.error('[Dalila] Error in onMount lifecycle hook:', error);
@@ -1413,6 +1496,7 @@ export function createRouter(config) {
         document.removeEventListener('click', handleLink);
         document.removeEventListener('pointerover', handleLinkIntent);
         document.removeEventListener('focusin', handleLinkIntent);
+        runRouteUnmountLifecycle();
         if (currentLoaderController) {
             currentLoaderController.abort();
             currentLoaderController = null;

package/dist/routes.generated.d.ts

@@ -0,0 +1,2 @@
+import type { RouteTable } from 'dalila/router';
+export declare const routes: RouteTable[];

package/dist/routes.generated.js

@@ -0,0 +1,76 @@
+// This file is auto-generated by 'dalila routes generate'
+// Do not edit manually - your changes will be overwritten
+import { fromHtml } from 'dalila';
+const layout_html = `<div class="app-shell">
+  <h1>Router + PageVM + Componente</h1>
+  <nav>
+    <a href="/examples/router-simple/" d-link>Home</a>
+    <a href="/examples/router-simple/about" d-link>Sobre</a>
+  </nav>
+  <main id="outlet-slot" data-slot="children"></main>
+</div>
+`;
+const page_html = `<section>
+  <h2>Home</h2>
+  <p>PageVM da rota: <strong>HomePageVM</strong></p>
+  <status-badge d-props-text="status"></status-badge>
+  <div style="display:flex; gap:.5rem; margin-top:.75rem;">
+    <button d-on-click="increment">Incrementar</button>
+    <button d-on-click="openModal">Abrir modal</button>
+  </div>
+
+  <d-dialog d-ui="infoDialog" class="d-dialog">
+    <d-dialog-header>
+      <d-dialog-title>Modal Dalila</d-dialog-title>
+      <d-dialog-close d-on-click="closeModal">&times;</d-dialog-close>
+    </d-dialog-header>
+    <d-dialog-body>
+      <p>This modal is mounted with <code>mountUI()</code> in the route <code>onMount</code>.</p>
+      <p>Status atual: <strong d-text="status"></strong></p>
+    </d-dialog-body>
+    <d-dialog-footer>
+      <button d-on-click="closeModal">Fechar</button>
+    </d-dialog-footer>
+  </d-dialog>
+</section>
+`;
+const about_page_html = `<section>
+  <h2>Sobre</h2>
+  <p>PageVM da rota: <strong>AboutPageVM</strong></p>
+  <p>Nome atual: <strong d-text="nomeUpper"></strong></p>
+  <input d-bind-value="nome" placeholder="Digite um nome" />
+</section>
+`;
+const page_lazy = () => import('./app/page.js');
+const about_page_lazy = () => import('./app/about/page.js');
+export const routes = [
+    {
+        path: '/',
+        layout: (ctx, children) => fromHtml(layout_html, { data: { ...ctx.params, params: ctx.params, query: ctx.query.toString(), path: ctx.path, fullPath: ctx.fullPath }, children, scope: ctx.scope }),
+        children: [
+            { path: '', view: (ctx, data) => fromHtml(page_html, { data: { ...ctx.params, ...(data ?? {}), params: ctx.params, query: ctx.query.toString(), path: ctx.path, fullPath: ctx.fullPath }, scope: ctx.scope }), loader: (...args) => page_lazy().then(mod => {
+                    const exported = mod.loader;
+                    if (typeof exported === 'function') {
+                        return exported(...args);
+                    }
+                    return undefined;
+                }), onMount: (root, data, ctx) => page_lazy().then(mod => {
+                    if (typeof mod.onMount === 'function') {
+                        return mod.onMount(root, data, ctx);
+                    }
+                    return undefined;
+                }) },
+            {
+                path: 'about',
+                view: (ctx, data) => fromHtml(about_page_html, { data: { ...ctx.params, ...(data ?? {}), params: ctx.params, query: ctx.query.toString(), path: ctx.path, fullPath: ctx.fullPath }, scope: ctx.scope }),
+                loader: (...args) => about_page_lazy().then(mod => {
+                    const exported = mod.loader;
+                    if (typeof exported === 'function') {
+                        return exported(...args);
+                    }
+                    return undefined;
+                }),
+            }
+        ]
+    }
+];

package/dist/routes.generated.manifest.d.ts

@@ -0,0 +1,4 @@
+import type { RouteManifestEntry } from 'dalila/router';
+export declare const routeManifest: RouteManifestEntry[];
+export declare function getRouteManifestEntry(id: string): RouteManifestEntry | undefined;
+export declare function prefetchRouteById(id: string): Promise<void>;

package/dist/routes.generated.manifest.js

@@ -0,0 +1,32 @@
+// This file is auto-generated by 'dalila routes generate'
+// Do not edit manually - your changes will be overwritten
+export const routeManifest = [
+    {
+        id: 'root',
+        pattern: '/',
+        score: 1000,
+        paramKeys: [],
+        tags: [],
+        modules: ["./app/page.js"],
+        load: () => import('./app/page.js').then(() => undefined)
+    },
+    {
+        id: 'about',
+        pattern: '/about',
+        score: 301,
+        paramKeys: [],
+        tags: [],
+        modules: ["./app/page.js", "./app/about/page.js"],
+        load: () => Promise.all([import('./app/page.js'), import('./app/about/page.js')]).then(() => undefined)
+    },
+];
+const manifestById = new Map(routeManifest.map(route => [route.id, route]));
+export function getRouteManifestEntry(id) {
+    return manifestById.get(id);
+}
+export async function prefetchRouteById(id) {
+    const entry = manifestById.get(id);
+    if (!entry)
+        return;
+    await entry.load();
+}

package/dist/routes.generated.types.d.ts

@@ -0,0 +1,11 @@
+export type RoutePattern = '/' | '/about';
+export type RouteParamsByPattern = {
+    '/': {};
+    '/about': {};
+};
+export type RouteSearchByPattern = {
+    [P in RoutePattern]: Record<string, string | string[]>;
+};
+export type RouteParams<P extends RoutePattern> = RouteParamsByPattern[P];
+export type RouteSearch<P extends RoutePattern> = RouteSearchByPattern[P];
+export declare function buildRoutePath<P extends RoutePattern>(pattern: P, params: RouteParams<P>): string;

package/dist/routes.generated.types.js

@@ -0,0 +1,37 @@
+// This file is auto-generated by 'dalila routes generate'
+// Do not edit manually - your changes will be overwritten
+export function buildRoutePath(pattern, params) {
+    const out = [];
+    for (const segment of pattern.split('/').filter(Boolean)) {
+        if (!segment.startsWith(':')) {
+            out.push(segment);
+            continue;
+        }
+        const isOptionalCatchAll = segment.endsWith('*?');
+        const isCatchAll = isOptionalCatchAll || segment.endsWith('*');
+        const key = segment.slice(1, isCatchAll ? (isOptionalCatchAll ? -2 : -1) : undefined);
+        const value = params[key];
+        if (isCatchAll) {
+            if (value === undefined || value === null) {
+                if (isOptionalCatchAll)
+                    continue;
+                throw new Error(`Missing route param: ${key}`);
+            }
+            if (!Array.isArray(value)) {
+                throw new Error(`Route param "${key}" must be an array`);
+            }
+            if (value.length === 0) {
+                if (isOptionalCatchAll)
+                    continue;
+                throw new Error(`Route param "${key}" cannot be empty`);
+            }
+            out.push(...value.map(v => encodeURIComponent(String(v))));
+            continue;
+        }
+        if (value === undefined || value === null) {
+            throw new Error(`Missing route param: ${key}`);
+        }
+        out.push(encodeURIComponent(String(value)));
+    }
+    return out.length === 0 ? '/' : `/${out.join('/')}`;
+}

package/dist/runtime/bind.d.ts

@@ -6,6 +6,7 @@
  *
  * @module dalila/runtime
  */
+import type { Component } from './component.js';
 export interface BindOptions {
     /**
      * Event types to bind (default: click, input, change, submit, keydown, keyup)
@@ -25,6 +26,10 @@ export interface BindOptions {
         /** Time-to-live (ms) per plan, refreshed on hit (0 disables cache). */
         ttlMs?: number;
     };
+    /** Component registry — accepts map `{ tag: component }` or array `[component]` */
+    components?: Record<string, Component> | Component[];
+    /** Error policy for component `ctx.onMount()` callbacks. Default: 'log'. */
+    onMountError?: 'log' | 'throw';
     /**
      * Internal flag — set by fromHtml for router/template rendering.
      * Skips HMR context registration but KEEPS d-ready/d-loading lifecycle.
@@ -54,6 +59,23 @@ export interface BindHandle {
     getRef(name: string): Element | null;
     getRefs(): Readonly<Record<string, Element>>;
 }
+/**
+ * Set global defaults for all `bind()` / `mount()` calls.
+ *
+ * Options set here are merged with per-call options (per-call wins).
+ * Call with an empty object to reset.
+ *
+ * @example
+ * ```ts
+ * import { configure } from 'dalila/runtime';
+ *
+ * configure({
+ *   components: [FruitPicker],
+ *   onMountError: 'log',
+ * });
+ * ```
+ */
+export declare function configure(config: BindOptions): void;
 /**
  * Bind a DOM tree to a reactive context.
  *
@@ -77,7 +99,7 @@ export interface BindHandle {
  * dispose();
  * ```
  */
-export declare function bind<T extends Record<string, unknown> = BindContext>(root: Element, ctx: T, options?: BindOptions): BindHandle;
+export declare function bind<T extends Record<string, unknown> = BindContext>(root: Element | string, ctx: T, options?: BindOptions): BindHandle;
 /**
  * Automatically bind when DOM is ready.
  * Useful for simple pages without a build step.
@@ -91,3 +113,14 @@ export declare function bind<T extends Record<string, unknown> = BindContext>(ro
  * ```
  */
 export declare function autoBind<T extends Record<string, unknown> = BindContext>(selector: string, ctx: T, options?: BindOptions): Promise<BindHandle>;
+/**
+ * Mount a component imperatively, or bind a selector to a view-model.
+ *
+ * Overload 1 — `mount(selector, vm, options?)`:
+ *   Shorthand for `bind(selector, vm, options)`.
+ *
+ * Overload 2 — `mount(component, target, props?)`:
+ *   Mount a component created with defineComponent() into a target element.
+ */
+export declare function mount<T extends object>(selector: string, vm: T, options?: BindOptions): BindHandle;
+export declare function mount(component: Component, target: Element, props?: Record<string, unknown>): BindHandle;