@emkodev/emroute 1.6.2 → 1.6.3

package/dist/src/component/page.component.js

@@ -0,0 +1,107 @@
+/**
+ * Page Component
+ *
+ * Page component — params come from URL, context carries file content.
+ *
+ * Default implementations follow the fallback table:
+ * - renderHTML: html file → md via <mark-down> → <router-slot /> (non-leaf only)
+ * - renderMarkdown: md file → ```router-slot\n``` (non-leaf only)
+ * - getData: no-op (returns null)
+ */
+import { Component } from "./abstract.component.js";
+import { escapeHtml } from "../util/html.util.js";
+export class PageComponent extends Component {
+    name = 'page';
+    /** Route pattern this page handles (optional — set by subclasses) */
+    pattern;
+    /**
+     * Fetch or compute page data. Override in subclasses.
+     * Default: returns null (no data needed).
+     *
+     * @example
+     * ```ts
+     * override getData({ params, context }: this['DataArgs']) {
+     *   return fetch(`/api/${params.id}`, { signal: context?.signal });
+     * }
+     * ```
+     */
+    getData(_args) {
+        return Promise.resolve(null);
+    }
+    /**
+     * Render page as HTML.
+     *
+     * Fallback chain:
+     * 1. html file content from context
+     * 2. md file content wrapped in `<mark-down>`
+     * 3. `<router-slot />` (bare slot for child routes)
+     *
+     * @example
+     * ```ts
+     * override renderHTML({ data, params, context }: this['RenderArgs']) {
+     *   return `<h1>${params.id}</h1><p>${context?.files?.html ?? ''}</p>`;
+     * }
+     * ```
+     */
+    renderHTML(args) {
+        const files = args.context.files;
+        const style = files?.css ? `<style>${files.css}</style>\n` : '';
+        if (files?.html) {
+            let html = style + files.html;
+            if (files.md && html.includes('<mark-down></mark-down>')) {
+                html = html.replace('<mark-down></mark-down>', `<mark-down>${escapeHtml(files.md)}</mark-down>`);
+            }
+            return html;
+        }
+        if (files?.md) {
+            // HOTFIX: skip external <router-slot> when markdown already defines one
+            // via ```router-slot fenced block. Without this, SPA mode produces two
+            // slots with the same pattern — one inside <mark-down> (from the fenced
+            // block) and one outside (from this suffix). SSR strips empty duplicates
+            // via stripSlots, but SPA has no equivalent cleanup.
+            // See: issues/pending/spa-duplicate-router-slot.issue.md
+            const hasSlot = files.md.includes('```router-slot');
+            const slot = args.context.isLeaf || hasSlot ? '' : '\n<router-slot></router-slot>';
+            return `${style}<mark-down>${escapeHtml(files.md)}</mark-down>${slot}`;
+        }
+        return args.context.isLeaf ? '' : '<router-slot></router-slot>';
+    }
+    /**
+     * Render page as Markdown.
+     *
+     * Fallback chain:
+     * 1. md file content from context
+     * 2. `` ```router-slot\n``` `` (slot placeholder in markdown — newline required)
+     *
+     * @example
+     * ```ts
+     * override renderMarkdown({ data, params, context }: this['RenderArgs']) {
+     *   return `# ${params.id}\n\n${context?.files?.md ?? ''}`;
+     * }
+     * ```
+     */
+    renderMarkdown(args) {
+        const files = args.context.files;
+        if (files?.md) {
+            return files.md;
+        }
+        return args.context.isLeaf ? '' : '```router-slot\n```';
+    }
+    /**
+     * Page title. Override in subclasses.
+     * Default: undefined (no title).
+     *
+     * @example
+     * ```ts
+     * override getTitle({ data, params }: this['RenderArgs']) {
+     *   return `Project ${params.id}`;
+     * }
+     * ```
+     */
+    getTitle(_args) {
+        return undefined;
+    }
+}
+/** Shared default instance used by renderers when no custom .page.ts exists. */
+export default new PageComponent();
+//# sourceMappingURL=page.component.js.map

package/dist/src/component/page.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.component.js","sourceRoot":"","sources":["../../../src/component/page.component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,SAAS,EAAyB,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,MAAM,OAAO,aAIX,SAAQ,SAAmC;IACzB,IAAI,GAAW,MAAM,CAAC;IAExC,qEAAqE;IAC5D,OAAO,CAAU;IAE1B;;;;;;;;;;OAUG;IACM,OAAO,CACd,KAAuB;QAEvB,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED;;;;;;;;;;;;;;OAcG;IACM,UAAU,CACjB,IAAwB;QAExB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QACjC,MAAM,KAAK,GAAG,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,UAAU,KAAK,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;QAEhE,IAAI,KAAK,EAAE,IAAI,EAAE,CAAC;YAChB,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC;YAC9B,IAAI,KAAK,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,yBAAyB,CAAC,EAAE,CAAC;gBACzD,IAAI,GAAG,IAAI,CAAC,OAAO,CACjB,yBAAyB,EACzB,cAAc,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,cAAc,CACjD,CAAC;YACJ,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAI,KAAK,EAAE,EAAE,EAAE,CAAC;YACd,wEAAwE;YACxE,uEAAuE;YACvE,wEAAwE;YACxE,yEAAyE;YACzE,qDAAqD;YACrD,yDAAyD;YACzD,MAAM,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC;YACpD,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,+BAA+B,CAAC;YACnF,OAAO,GAAG,KAAK,cAAc,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,eAAe,IAAI,EAAE,CAAC;QACzE,CAAC;QAED,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,6BAA6B,CAAC;IAClE,CAAC;IAED;;;;;;;;;;;;;OAaG;IACM,cAAc,CACrB,IAAwB;QAExB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QAEjC,IAAI,KAAK,EAAE,EAAE,EAAE,CAAC;YACd,OAAO,KAAK,CAAC,EAAE,CAAC;QAClB,CAAC;QAED,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC;IAC1D,CAAC;IAED;;;;;;;;;;OAUG;IACH,QAAQ,CACN,KAAyB;QAEzB,OAAO,SAAS,CAAC;IACnB,CAAC;CACF;AAED,gFAAgF;AAChF,eAAe,IAAI,aAAa,EAAE,CAAC"}

package/dist/src/component/widget.component.d.ts

@@ -0,0 +1,47 @@
+/**
+ * WidgetComponent — embeddable unit within page content.
+ *
+ * Everything reusable that is not a page is a Widget.
+ * Widgets render across all contexts (HTML, Markdown, SPA) and are
+ * resolved by name via WidgetRegistry.
+ *
+ * Pages live in the routes manifest. Widgets live in the registry.
+ *
+ * Default rendering fallback chains (parallel to PageComponent):
+ * - renderHTML:     html file → md file in <mark-down> → base Component default
+ * - renderMarkdown: md file → ''
+ */
+import { Component, type ComponentContext } from './abstract.component.ts';
+export declare abstract class WidgetComponent<TParams = unknown, TData = unknown, TContext extends ComponentContext = ComponentContext> extends Component<TParams, TData, TContext> {
+    /**
+     * Render widget as HTML.
+     *
+     * Fallback chain:
+     * 1. html file content from context
+     * 2. md file content wrapped in `<mark-down>`
+     * 3. base Component default (markdown→HTML conversion)
+     *
+     * @example
+     * ```ts
+     * override renderHTML({ data, params }: this['RenderArgs']) {
+     *   return `<span>${params.coin}: $${data?.price}</span>`;
+     * }
+     * ```
+     */
+    renderHTML(args: this['RenderArgs']): string;
+    /**
+     * Render widget as Markdown.
+     *
+     * Fallback chain:
+     * 1. md file content from context
+     * 2. empty string
+     *
+     * @example
+     * ```ts
+     * override renderMarkdown({ data, params }: this['RenderArgs']) {
+     *   return `**${params.coin}**: $${data?.price}`;
+     * }
+     * ```
+     */
+    renderMarkdown(args: this['RenderArgs']): string;
+}

package/dist/src/component/widget.component.js

@@ -0,0 +1,69 @@
+/**
+ * WidgetComponent — embeddable unit within page content.
+ *
+ * Everything reusable that is not a page is a Widget.
+ * Widgets render across all contexts (HTML, Markdown, SPA) and are
+ * resolved by name via WidgetRegistry.
+ *
+ * Pages live in the routes manifest. Widgets live in the registry.
+ *
+ * Default rendering fallback chains (parallel to PageComponent):
+ * - renderHTML:     html file → md file in <mark-down> → base Component default
+ * - renderMarkdown: md file → ''
+ */
+import { Component } from "./abstract.component.js";
+import { escapeHtml, scopeWidgetCss } from "../util/html.util.js";
+export class WidgetComponent extends Component {
+    /**
+     * Render widget as HTML.
+     *
+     * Fallback chain:
+     * 1. html file content from context
+     * 2. md file content wrapped in `<mark-down>`
+     * 3. base Component default (markdown→HTML conversion)
+     *
+     * @example
+     * ```ts
+     * override renderHTML({ data, params }: this['RenderArgs']) {
+     *   return `<span>${params.coin}: $${data?.price}</span>`;
+     * }
+     * ```
+     */
+    renderHTML(args) {
+        const files = args.context.files;
+        // @scope needed for SSR Light DOM output; redundant but harmless in SPA Shadow DOM
+        const style = files?.css ? `<style>${scopeWidgetCss(files.css, this.name)}</style>\n` : '';
+        if (files?.html) {
+            return style + files.html;
+        }
+        if (files?.md) {
+            return `${style}<mark-down>${escapeHtml(files.md)}</mark-down>`;
+        }
+        if (style) {
+            return style + super.renderHTML(args);
+        }
+        return super.renderHTML(args);
+    }
+    /**
+     * Render widget as Markdown.
+     *
+     * Fallback chain:
+     * 1. md file content from context
+     * 2. empty string
+     *
+     * @example
+     * ```ts
+     * override renderMarkdown({ data, params }: this['RenderArgs']) {
+     *   return `**${params.coin}**: $${data?.price}`;
+     * }
+     * ```
+     */
+    renderMarkdown(args) {
+        const files = args.context.files;
+        if (files?.md) {
+            return files.md;
+        }
+        return '';
+    }
+}
+//# sourceMappingURL=widget.component.js.map

package/dist/src/component/widget.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget.component.js","sourceRoot":"","sources":["../../../src/component/widget.component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,SAAS,EAAyB,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAElE,MAAM,OAAgB,eAIpB,SAAQ,SAAmC;IAC3C;;;;;;;;;;;;;;OAcG;IACM,UAAU,CACjB,IAAwB;QAExB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QACjC,mFAAmF;QACnF,MAAM,KAAK,GAAG,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,UAAU,cAAc,CAAC,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;QAE3F,IAAI,KAAK,EAAE,IAAI,EAAE,CAAC;YAChB,OAAO,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC;QAC5B,CAAC;QAED,IAAI,KAAK,EAAE,EAAE,EAAE,CAAC;YACd,OAAO,GAAG,KAAK,cAAc,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC;QAClE,CAAC;QAED,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACxC,CAAC;QAED,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAED;;;;;;;;;;;;;OAaG;IACM,cAAc,CACrB,IAAwB;QAExB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QAEjC,IAAI,KAAK,EAAE,EAAE,EAAE,CAAC;YACd,OAAO,KAAK,CAAC,EAAE,CAAC;QAClB,CAAC;QAED,OAAO,EAAE,CAAC;IACZ,CAAC;CACF"}

package/dist/src/element/component.element.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Widget Element - Browser Custom Element
+ *
+ * Renders Widget instances in the browser as `widget-{name}` elements.
+ * Handles:
+ * - SSR hydration (ssr attribute)
+ * - Client-side data fetching with AbortSignal
+ * - Companion file loading (html, md, css) with caching
+ * - Loading/error states
+ */
+import type { Component, ContextProvider } from '../component/abstract.component.ts';
+import { HTMLElementBase } from '../util/html.util.ts';
+type WidgetFiles = {
+    html?: string;
+    md?: string;
+    css?: string;
+};
+/**
+ * Custom element that renders a Component in the browser.
+ */
+export declare class ComponentElement<TParams, TData> extends HTMLElementBase {
+    /** Shared file content cache — deduplicates fetches across all widget instances. */
+    private static fileCache;
+    /** App-level context provider set once during router initialization. */
+    private static extendContext;
+    /** Register (or clear) the context provider that enriches every widget's ComponentContext. */
+    static setContextProvider(provider: ContextProvider | undefined): void;
+    private component;
+    private effectiveFiles?;
+    private params;
+    private data;
+    private context;
+    private state;
+    private errorMessage;
+    private deferred;
+    private abortController;
+    private intersectionObserver;
+    /** Promise that resolves with fetched data (available after loadData starts) */
+    dataPromise: Promise<TData | null> | null;
+    constructor(component: Component<TParams, TData>, files?: WidgetFiles);
+    /**
+     * Register a widget as a custom element: `widget-{name}`.
+     * Creates a fresh widget instance per DOM element (per-element state).
+     * Optional `files` parameter provides discovered file paths without mutating
+     * the component instance.
+     */
+    static register<TP, TD>(component: Component<TP, TD>, files?: WidgetFiles): void;
+    /**
+     * Register a widget class (not instance) as a custom element: `widget-{name}`.
+     * Used for manifest-based registration where classes are loaded dynamically.
+     */
+    static registerClass<TP, TD>(WidgetClass: new () => Component<TP, TD>, name: string, files?: WidgetFiles): void;
+    /**
+     * Promise that resolves when component is ready (data loaded and rendered).
+     * Used by router to wait for async components.
+     */
+    get ready(): Promise<void>;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    /**
+     * Reload component data. Aborts any in-flight request first.
+     */
+    reload(): Promise<void>;
+    /**
+     * Fetch a single file by path, with caching.
+     * Absolute URLs (http/https) pass through; relative paths get '/' prefix.
+     */
+    private static loadFile;
+    /**
+     * Load all companion files for this widget instance.
+     * Uses effectiveFiles (from registration) falling back to component.files.
+     */
+    private loadFiles;
+    private loadData;
+    private setError;
+    private signalReady;
+    private render;
+}
+export {};

package/dist/src/element/component.element.js

@@ -0,0 +1,293 @@
+/**
+ * Widget Element - Browser Custom Element
+ *
+ * Renders Widget instances in the browser as `widget-{name}` elements.
+ * Handles:
+ * - SSR hydration (ssr attribute)
+ * - Client-side data fetching with AbortSignal
+ * - Companion file loading (html, md, css) with caching
+ * - Loading/error states
+ */
+import { HTMLElementBase, LAZY_ATTR, SSR_ATTR } from "../util/html.util.js";
+/**
+ * Custom element that renders a Component in the browser.
+ */
+export class ComponentElement extends HTMLElementBase {
+    /** Shared file content cache — deduplicates fetches across all widget instances. */
+    static fileCache = new Map();
+    /** App-level context provider set once during router initialization. */
+    static extendContext;
+    /** Register (or clear) the context provider that enriches every widget's ComponentContext. */
+    static setContextProvider(provider) {
+        ComponentElement.extendContext = provider;
+    }
+    component;
+    effectiveFiles;
+    params = null;
+    data = null;
+    context;
+    state = 'idle';
+    errorMessage = '';
+    deferred = null;
+    abortController = null;
+    intersectionObserver = null;
+    /** Promise that resolves with fetched data (available after loadData starts) */
+    dataPromise = null;
+    constructor(component, files) {
+        super();
+        this.component = component;
+        this.effectiveFiles = files;
+        // Attach shadow root if not already present (Declarative Shadow DOM creates it from <template shadowrootmode="open">)
+        // This enables progressive enhancement: SSR with DSD works without JS, then hydrates when JS loads
+        if (!this.shadowRoot) {
+            this.attachShadow({ mode: 'open' });
+        }
+    }
+    /**
+     * Register a widget as a custom element: `widget-{name}`.
+     * Creates a fresh widget instance per DOM element (per-element state).
+     * Optional `files` parameter provides discovered file paths without mutating
+     * the component instance.
+     */
+    static register(component, files) {
+        const tagName = `widget-${component.name}`;
+        if (!globalThis.customElements || customElements.get(tagName)) {
+            return;
+        }
+        const WidgetClass = component.constructor;
+        const BoundElement = class extends ComponentElement {
+            constructor() {
+                super(new WidgetClass(), files);
+            }
+        };
+        customElements.define(tagName, BoundElement);
+    }
+    /**
+     * Register a widget class (not instance) as a custom element: `widget-{name}`.
+     * Used for manifest-based registration where classes are loaded dynamically.
+     */
+    static registerClass(WidgetClass, name, files) {
+        const tagName = `widget-${name}`;
+        if (!globalThis.customElements || customElements.get(tagName)) {
+            return;
+        }
+        const BoundElement = class extends ComponentElement {
+            constructor() {
+                super(new WidgetClass(), files);
+            }
+        };
+        customElements.define(tagName, BoundElement);
+    }
+    /**
+     * Promise that resolves when component is ready (data loaded and rendered).
+     * Used by router to wait for async components.
+     */
+    get ready() {
+        if (this.state === 'ready') {
+            return Promise.resolve();
+        }
+        this.deferred ??= Promise.withResolvers();
+        return this.deferred.promise;
+    }
+    async connectedCallback() {
+        this.component.element = this;
+        this.style.contentVisibility = 'auto';
+        this.abortController = new AbortController();
+        const signal = this.abortController.signal;
+        // Parse params from element attributes
+        const params = {};
+        for (const attr of this.attributes) {
+            if (attr.name === SSR_ATTR || attr.name === LAZY_ATTR)
+                continue;
+            const key = attr.name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+            try {
+                params[key] = JSON.parse(attr.value);
+            }
+            catch {
+                params[key] = attr.value;
+            }
+        }
+        this.params = params;
+        // Validate params
+        if (this.component.validateParams && this.params !== null) {
+            const error = this.component.validateParams(this.params);
+            if (error) {
+                this.setError(error);
+                return;
+            }
+        }
+        // Load companion files (html, md, css) if declared
+        const files = await this.loadFiles();
+        if (signal.aborted)
+            return;
+        const base = {
+            pathname: globalThis.location?.pathname ?? '/',
+            pattern: '',
+            params: {},
+            searchParams: new URLSearchParams(globalThis.location?.search ?? ''),
+            files: (files.html || files.md || files.css) ? files : undefined,
+        };
+        this.context = ComponentElement.extendContext ? ComponentElement.extendContext(base) : base;
+        // Hydrate from SSR: adopt content from Declarative Shadow DOM
+        if (this.hasAttribute(SSR_ATTR)) {
+            this.removeAttribute(SSR_ATTR);
+            // Read SSR data from light DOM (JSON text placed alongside shadow root)
+            const lightText = this.textContent?.trim();
+            if (lightText) {
+                try {
+                    this.data = JSON.parse(lightText);
+                }
+                catch {
+                    // Not valid JSON — proceed with data: null
+                }
+            }
+            // Clear light DOM content (JSON text)
+            this.textContent = '';
+            this.state = 'ready';
+            // Call hydrate() hook to attach event listeners
+            if (this.component.hydrate) {
+                const args = { data: this.data, params: this.params, context: this.context };
+                queueMicrotask(() => {
+                    this.component.hydrate(args);
+                });
+            }
+            this.signalReady();
+            return;
+        }
+        // Lazy: defer loadData until element is visible
+        if (this.hasAttribute(LAZY_ATTR)) {
+            this.intersectionObserver = new IntersectionObserver(([entry]) => {
+                if (entry.isIntersecting) {
+                    this.intersectionObserver?.disconnect();
+                    this.intersectionObserver = null;
+                    this.loadData();
+                }
+            });
+            this.intersectionObserver.observe(this);
+            return;
+        }
+        await this.loadData();
+    }
+    disconnectedCallback() {
+        this.component.destroy?.();
+        this.component.element = undefined;
+        this.intersectionObserver?.disconnect();
+        this.intersectionObserver = null;
+        this.abortController?.abort();
+        this.abortController = null;
+        this.state = 'idle';
+        this.data = null;
+        this.context = undefined;
+        this.dataPromise = null;
+        this.errorMessage = '';
+        this.signalReady();
+        this.deferred = null;
+    }
+    /**
+     * Reload component data. Aborts any in-flight request first.
+     */
+    async reload() {
+        if (this.params === null)
+            return;
+        // Abort previous and create fresh controller
+        this.abortController?.abort();
+        this.abortController = new AbortController();
+        await this.loadData();
+    }
+    /**
+     * Fetch a single file by path, with caching.
+     * Absolute URLs (http/https) pass through; relative paths get '/' prefix.
+     */
+    static loadFile(path) {
+        const cached = ComponentElement.fileCache.get(path);
+        if (cached)
+            return cached;
+        const url = path.startsWith('http://') || path.startsWith('https://')
+            ? path
+            : (path.startsWith('/') ? path : '/' + path);
+        const promise = fetch(url).then((res) => res.ok ? res.text() : undefined, () => undefined);
+        ComponentElement.fileCache.set(path, promise);
+        return promise;
+    }
+    /**
+     * Load all companion files for this widget instance.
+     * Uses effectiveFiles (from registration) falling back to component.files.
+     */
+    async loadFiles() {
+        const filePaths = this.effectiveFiles ?? this.component.files;
+        if (!filePaths)
+            return {};
+        const [html, md, css] = await Promise.all([
+            filePaths.html ? ComponentElement.loadFile(filePaths.html) : undefined,
+            filePaths.md ? ComponentElement.loadFile(filePaths.md) : undefined,
+            filePaths.css ? ComponentElement.loadFile(filePaths.css) : undefined,
+        ]);
+        return { html, md, css };
+    }
+    async loadData() {
+        if (this.params === null)
+            return;
+        const signal = this.abortController?.signal;
+        this.state = 'loading';
+        this.render();
+        try {
+            const promise = this.component.getData({
+                params: this.params,
+                signal,
+                context: this.context,
+            });
+            this.dataPromise = promise;
+            this.data = await promise;
+            // Check abort after await — don't touch DOM if disconnected
+            if (signal?.aborted)
+                return;
+            this.state = 'ready';
+        }
+        catch (e) {
+            if (e instanceof DOMException && e.name === 'AbortError')
+                return;
+            if (signal?.aborted)
+                return;
+            this.setError(e instanceof Error ? e.message : String(e));
+            return;
+        }
+        this.render();
+        this.signalReady();
+    }
+    setError(message) {
+        this.state = 'error';
+        this.errorMessage = message;
+        this.render();
+        this.signalReady(); // Ready even on error (completed loading)
+    }
+    signalReady() {
+        this.deferred?.resolve();
+        this.deferred = null;
+    }
+    render() {
+        if (this.params === null) {
+            this.shadowRoot.setHTMLUnsafe('');
+            return;
+        }
+        if (this.state === 'error') {
+            this.shadowRoot.setHTMLUnsafe(this.component.renderError({
+                error: new Error(this.errorMessage),
+                params: this.params,
+            }));
+            return;
+        }
+        this.shadowRoot.setHTMLUnsafe(this.component.renderHTML({
+            data: this.state === 'ready' ? this.data : null,
+            params: this.params,
+            context: this.context,
+        }));
+        // Call hydrate() after rendering to attach event listeners
+        if (this.state === 'ready' && this.component.hydrate) {
+            const args = { data: this.data, params: this.params, context: this.context };
+            queueMicrotask(() => {
+                this.component.hydrate(args);
+            });
+        }
+    }
+}
+//# sourceMappingURL=component.element.js.map

package/dist/src/element/component.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.element.js","sourceRoot":"","sources":["../../../src/element/component.element.ts"],"names":[],"mappings":"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"}

package/dist/src/element/markdown.element.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Markdown Element — <mark-down> custom element.
+ *
+ * Renders markdown content with pluggable renderer.
+ * Supports:
+ * - Inline content: <mark-down># Title</mark-down>
+ * - Source attribute: <mark-down src="/path/to.md"></mark-down>
+ */
+import { HTMLElementBase } from '../util/html.util.ts';
+import type { MarkdownRenderer } from '../type/markdown.type.ts';
+export declare class MarkdownElement extends HTMLElementBase {
+    private static renderer;
+    private static rendererInitPromise;
+    private abortController;
+    /**
+     * Set the markdown renderer.
+     * Must be called before any <mark-down> elements are connected.
+     *
+     * @example
+     * ```ts
+     * import { createEmkoRenderer } from './emko.renderer.ts';
+     * MarkdownElement.setRenderer(await createEmkoRenderer());
+     * ```
+     */
+    static setRenderer(renderer: MarkdownRenderer): void;
+    /**
+     * Get the current renderer, waiting for init if needed.
+     */
+    private static getRenderer;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    private loadContent;
+    private loadFromSrc;
+    private renderContent;
+    private showError;
+}