@emkodev/emroute 1.10.0 → 1.12.0-beta.1

package/README.md

@@ -114,7 +114,7 @@ export default new ProjectPage();
 - **Configurable base paths** — `/html/` and `/md/` prefixes are configurable via `BasePath`
 - **SPA modes** — `'root'` (default), `'leaf'`, `'none'`, or `'only'` to control how the server handles non-file requests and SSR endpoints
 - **Sitemap generation** — opt-in `sitemap.xml` from the routes manifest with support for dynamic route enumerators
-- **Dev server** — zero-config: auto-generates `main.ts` and route/widget manifests. File watcher with hot reload and bundle serving
+- **On-the-fly transpilation** — `BunFsRuntime` serves `.ts` files as transpiled JavaScript with companion files inlined. No build step required for development. `buildClientBundles()` is an optional production optimization
 
 ## Runtimes
 

package/core/component/widget.component.ts

@@ -12,7 +12,7 @@
 
 import { Component } from './abstract.component.ts';
 import type { ComponentContext } from '../type/component.type.ts';
-import { escapeHtml, scopeWidgetCss } from '../util/html.util.ts';
+import { escapeHtml } from '../util/html.util.ts';
 
 export abstract class WidgetComponent<
   TParams = unknown,
@@ -23,18 +23,13 @@ export abstract class WidgetComponent<
     args: this['RenderArgs'],
   ): string {
     const files = args.context.files;
-    const style = files?.css ? `<style>${scopeWidgetCss(files.css, this.name)}</style>\n` : '';
 
     if (files?.html) {
-      return style + files.html;
+      return files.html;
     }
 
     if (files?.md) {
-      return `${style}<mark-down>${escapeHtml(files.md)}</mark-down>`;
-    }
-
-    if (style) {
-      return style + super.renderHTML(args);
+      return `<mark-down>${escapeHtml(files.md)}</mark-down>`;
     }
 
     return super.renderHTML(args);

package/core/util/html.util.ts

@@ -41,7 +41,7 @@ export function unescapeHtml(text: string): string {
 }
 
 export function scopeWidgetCss(css: string, widgetName: string): string {
-  return `@scope (widget-${widgetName}) {\n${css}\n}`;
+  return `@layer emroute {\n@scope (widget-${widgetName}) {\n${css}\n}\n}`;
 }
 
 /** Status code to message mapping. */

package/core/util/js.util.ts

@@ -0,0 +1,8 @@
+/**
+ * JavaScript codegen utilities.
+ */
+
+/** Escape backticks and ${} for safe embedding in a JS template literal. */
+export function escapeTemplateLiteral(s: string): string {
+  return s.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+}

package/core/util/widget-resolve.util.ts

@@ -9,7 +9,7 @@ import type { Component } from '../component/abstract.component.ts';
 import type { ComponentContext, ContextProvider, FileContents } from '../type/component.type.ts';
 import { type Logger, defaultLogger } from '../type/logger.type.ts';
 import type { RouteInfo } from '../type/route.type.ts';
-import { RESERVED_ATTRS, SSR_ATTR } from './html.util.ts';
+import { RESERVED_ATTRS, SSR_ATTR, scopeWidgetCss } from './html.util.ts';
 
 /** Maximum nesting depth for widgets to prevent infinite loops */
 export const MAX_WIDGET_DEPTH = 10;
@@ -92,7 +92,9 @@ export function resolveWidgetTags(
       const context: ComponentContext = contextProvider ? contextProvider(baseContext) : baseContext;
 
       const data = await widget.getData({ params, context });
-      const rendered = widget.renderHTML({ data, params, context });
+      const hostStyle = '<style>:host { container-type: inline-size; content-visibility: auto; }</style>';
+      const cssStyle = files?.css ? `<style>${scopeWidgetCss(files.css, widgetName)}</style>` : '';
+      const rendered = hostStyle + cssStyle + widget.renderHTML({ data, params, context });
 
       wrappers.set(match, {
         tagName: `widget-${widgetName}`,

package/dist/core/component/widget.component.js

@@ -10,19 +10,15 @@
  * - renderMarkdown: md file → ''
  */
 import { Component } from "./abstract.component.js";
-import { escapeHtml, scopeWidgetCss } from "../util/html.util.js";
+import { escapeHtml } from "../util/html.util.js";
 export class WidgetComponent extends Component {
     renderHTML(args) {
         const files = args.context.files;
-        const style = files?.css ? `<style>${scopeWidgetCss(files.css, this.name)}</style>\n` : '';
         if (files?.html) {
-            return style + files.html;
+            return files.html;
         }
         if (files?.md) {
-            return `${style}<mark-down>${escapeHtml(files.md)}</mark-down>`;
-        }
-        if (style) {
-            return style + super.renderHTML(args);
+            return `<mark-down>${escapeHtml(files.md)}</mark-down>`;
         }
         return super.renderHTML(args);
     }

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

@@ -1 +1 @@
-{"version":3,"file":"widget.component.js","sourceRoot":"","sources":["../../../core/component/widget.component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAElE,MAAM,OAAgB,eAIpB,SAAQ,SAAmC;IAClC,UAAU,CACjB,IAAwB;QAExB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QACjC,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;IAEQ,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"}
+{"version":3,"file":"widget.component.js","sourceRoot":"","sources":["../../../core/component/widget.component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,MAAM,OAAgB,eAIpB,SAAQ,SAAmC;IAClC,UAAU,CACjB,IAAwB;QAExB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QAEjC,IAAI,KAAK,EAAE,IAAI,EAAE,CAAC;YAChB,OAAO,KAAK,CAAC,IAAI,CAAC;QACpB,CAAC;QAED,IAAI,KAAK,EAAE,EAAE,EAAE,CAAC;YACd,OAAO,cAAc,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC;QAC1D,CAAC;QAED,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEQ,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/core/util/html.util.js

@@ -33,7 +33,7 @@ export function unescapeHtml(text) {
         .replaceAll('&', '&');
 }
 export function scopeWidgetCss(css, widgetName) {
-    return `@scope (widget-${widgetName}) {\n${css}\n}`;
+    return `@layer emroute {\n@scope (widget-${widgetName}) {\n${css}\n}\n}`;
 }
 /** Status code to message mapping. */
 export const STATUS_MESSAGES = {

package/dist/core/util/html.util.js.map

@@ -1 +1 @@
-{"version":3,"file":"html.util.js","sourceRoot":"","sources":["../../../core/util/html.util.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,+DAA+D;AAC/D,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC;AAE9B,oDAAoD;AACpD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC;AAEhC,mFAAmF;AACnF,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,GAAG,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAErG,MAAM,iBAAiB,GAAG,+BAA+B,CAAC;AAE1D,yDAAyD;AACzD,MAAM,UAAU,kBAAkB,CAAC,GAAW;IAC5C,IAAI,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC;QACvC,MAAM,IAAI,KAAK,CAAC,gCAAgC,GAAG,EAAE,CAAC,CAAC;IACzD,CAAC;AACH,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,IAAY;IACrC,OAAO,IAAI;SACR,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC;SACxB,UAAU,CAAC,GAAG,EAAE,MAAM,CAAC;SACvB,UAAU,CAAC,GAAG,EAAE,MAAM,CAAC;SACvB,UAAU,CAAC,GAAG,EAAE,QAAQ,CAAC;SACzB,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC;SACxB,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;AAC9B,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,IAAY;IACvC,OAAO,IAAI;SACR,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC;SACxB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC;SACxB,UAAU,CAAC,QAAQ,EAAE,GAAG,CAAC;SACzB,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC;SACvB,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC;SACvB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AAC9B,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,GAAW,EAAE,UAAkB;IAC5D,OAAO,kBAAkB,UAAU,QAAQ,GAAG,KAAK,CAAC;AACtD,CAAC;AAED,sCAAsC;AACtC,MAAM,CAAC,MAAM,eAAe,GAA2B;IACrD,GAAG,EAAE,cAAc;IACnB,GAAG,EAAE,WAAW;IAChB,GAAG,EAAE,WAAW;IAChB,GAAG,EAAE,uBAAuB;CAC7B,CAAC"}
+{"version":3,"file":"html.util.js","sourceRoot":"","sources":["../../../core/util/html.util.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,+DAA+D;AAC/D,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC;AAE9B,oDAAoD;AACpD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC;AAEhC,mFAAmF;AACnF,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,GAAG,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAErG,MAAM,iBAAiB,GAAG,+BAA+B,CAAC;AAE1D,yDAAyD;AACzD,MAAM,UAAU,kBAAkB,CAAC,GAAW;IAC5C,IAAI,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC;QACvC,MAAM,IAAI,KAAK,CAAC,gCAAgC,GAAG,EAAE,CAAC,CAAC;IACzD,CAAC;AACH,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,IAAY;IACrC,OAAO,IAAI;SACR,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC;SACxB,UAAU,CAAC,GAAG,EAAE,MAAM,CAAC;SACvB,UAAU,CAAC,GAAG,EAAE,MAAM,CAAC;SACvB,UAAU,CAAC,GAAG,EAAE,QAAQ,CAAC;SACzB,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC;SACxB,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;AAC9B,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,IAAY;IACvC,OAAO,IAAI;SACR,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC;SACxB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC;SACxB,UAAU,CAAC,QAAQ,EAAE,GAAG,CAAC;SACzB,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC;SACvB,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC;SACvB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AAC9B,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,GAAW,EAAE,UAAkB;IAC5D,OAAO,oCAAoC,UAAU,QAAQ,GAAG,QAAQ,CAAC;AAC3E,CAAC;AAED,sCAAsC;AACtC,MAAM,CAAC,MAAM,eAAe,GAA2B;IACrD,GAAG,EAAE,cAAc;IACnB,GAAG,EAAE,WAAW;IAChB,GAAG,EAAE,WAAW;IAChB,GAAG,EAAE,uBAAuB;CAC7B,CAAC"}

package/dist/core/util/js.util.d.ts

@@ -0,0 +1,5 @@
+/**
+ * JavaScript codegen utilities.
+ */
+/** Escape backticks and ${} for safe embedding in a JS template literal. */
+export declare function escapeTemplateLiteral(s: string): string;

package/dist/core/util/js.util.js

@@ -0,0 +1,8 @@
+/**
+ * JavaScript codegen utilities.
+ */
+/** Escape backticks and ${} for safe embedding in a JS template literal. */
+export function escapeTemplateLiteral(s) {
+    return s.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+}
+//# sourceMappingURL=js.util.js.map

package/dist/core/util/js.util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"js.util.js","sourceRoot":"","sources":["../../../core/util/js.util.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,4EAA4E;AAC5E,MAAM,UAAU,qBAAqB,CAAC,CAAS;IAC7C,OAAO,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAChF,CAAC"}

package/dist/core/util/widget-resolve.util.js

@@ -5,7 +5,7 @@
  * Calls getData() + renderHTML() on widgets and injects SSR hydration data.
  */
 import { defaultLogger } from "../type/logger.type.js";
-import { RESERVED_ATTRS, SSR_ATTR } from "./html.util.js";
+import { RESERVED_ATTRS, SSR_ATTR, scopeWidgetCss } from "./html.util.js";
 /** Maximum nesting depth for widgets to prevent infinite loops */
 export const MAX_WIDGET_DEPTH = 10;
 /**
@@ -59,7 +59,9 @@ export function resolveWidgetTags(html, getWidget, routeInfo, contextProvider, l
             };
             const context = contextProvider ? contextProvider(baseContext) : baseContext;
             const data = await widget.getData({ params, context });
-            const rendered = widget.renderHTML({ data, params, context });
+            const hostStyle = '<style>:host { container-type: inline-size; content-visibility: auto; }</style>';
+            const cssStyle = files?.css ? `<style>${scopeWidgetCss(files.css, widgetName)}</style>` : '';
+            const rendered = hostStyle + cssStyle + widget.renderHTML({ data, params, context });
             wrappers.set(match, {
                 tagName: `widget-${widgetName}`,
                 attrs: attrsString ? ` ${attrsString}` : '',

package/dist/core/util/widget-resolve.util.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget-resolve.util.js","sourceRoot":"","sources":["../../../core/util/widget-resolve.util.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"widget-resolve.util.js","sourceRoot":"","sources":["../../../core/util/widget-resolve.util.ts"],"names":[],"mappings":"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"}

package/dist/emroute.js

@@ -15,8 +15,10 @@ function unescapeHtml(text) {
   return text.replaceAll("&#96;", "`").replaceAll("&#39;", "'").replaceAll("&quot;", '"').replaceAll("&gt;", ">").replaceAll("&lt;", "<").replaceAll("&amp;", "&");
 }
 function scopeWidgetCss(css, widgetName) {
-  return `@scope (widget-${widgetName}) {
+  return `@layer emroute {
+@scope (widget-${widgetName}) {
 ${css}
+}
 }`;
 }
 var STATUS_MESSAGES = {
@@ -27,14 +29,34 @@ var STATUS_MESSAGES = {
 };
 
 // dist/src/util/html.util.js
+class SsrCSSStyleSheet {
+  cssText = "";
+  replaceSync(css) {
+    this.cssText = css;
+  }
+  replace(css) {
+    this.cssText = css;
+    return Promise.resolve(this);
+  }
+}
+var CSSStyleSheetBase = globalThis.CSSStyleSheet ?? SsrCSSStyleSheet;
+
 class SsrShadowRoot {
   host;
   _innerHTML = "";
+  _adoptedStyleSheets = [];
   constructor(host) {
     this.host = host;
   }
+  get adoptedStyleSheets() {
+    return this._adoptedStyleSheets;
+  }
+  set adoptedStyleSheets(sheets) {
+    this._adoptedStyleSheets = sheets;
+  }
   get innerHTML() {
-    return this._innerHTML;
+    const adopted = this._adoptedStyleSheets.filter((s) => s.cssText).map((s) => `<style>${s.cssText}</style>`).join("");
+    return adopted + this._innerHTML;
   }
   set innerHTML(value) {
     this._innerHTML = value;
@@ -57,6 +79,10 @@ class SsrShadowRoot {
   }
 }
 
+class SsrElementInternals {
+  states = new Set;
+}
+
 class SsrHTMLElement {
   _innerHTML = "";
   _shadowRoot = null;
@@ -97,6 +123,9 @@ class SsrHTMLElement {
     this._shadowRoot = new SsrShadowRoot(this);
     return this._shadowRoot;
   }
+  attachInternals() {
+    return new SsrElementInternals;
+  }
   getAttribute(name) {
     return this._attributes.get(name) ?? null;
   }
@@ -212,10 +241,12 @@ function filterUndefined(obj) {
 
 class ComponentElement extends HTMLElementBase {
   static lazyLoaders = new Map;
+  static sheetCache = new Map;
   static extendContext;
   static setContextProvider(provider) {
     ComponentElement.extendContext = provider;
   }
+  static CUSTOM_STATES = ["lazy", "loading", "hydrating", "ready", "error"];
   component;
   effectiveFiles;
   params = null;
@@ -226,15 +257,23 @@ class ComponentElement extends HTMLElementBase {
   deferred = null;
   abortController = null;
   intersectionObserver = null;
+  internals;
   dataPromise = null;
   constructor(component, files) {
     super();
     this.component = component;
     this.effectiveFiles = files;
+    this.internals = this.attachInternals();
     if (!this.shadowRoot) {
       this.attachShadow({ mode: "open" });
     }
   }
+  setCustomState(next) {
+    for (const s of ComponentElement.CUSTOM_STATES) {
+      this.internals.states.delete(s);
+    }
+    this.internals.states.add(next);
+  }
   static register(component, files) {
     const tagName = `widget-${component.name}`;
     if (!globalThis.customElements || customElements.get(tagName)) {
@@ -316,7 +355,6 @@ class ComponentElement extends HTMLElementBase {
       }
     }
     this.component.element = this;
-    this.style.contentVisibility = "auto";
     this.abortController = new AbortController;
     const signal = this.abortController.signal;
     const params = {};
@@ -351,8 +389,10 @@ class ComponentElement extends HTMLElementBase {
       ...filteredFiles ? { files: filteredFiles } : {}
     };
     this.context = ComponentElement.extendContext ? ComponentElement.extendContext(base) : base;
+    this.adoptCss();
     if (this.hasAttribute(SSR_ATTR)) {
       this.removeAttribute(SSR_ATTR);
+      this.setCustomState("hydrating");
       const lightText = this.textContent?.trim();
       if (lightText) {
         try {
@@ -365,12 +405,16 @@ class ComponentElement extends HTMLElementBase {
         const args = { data: this.data, params: this.params, context: this.context };
         queueMicrotask(() => {
           this.component.hydrate(args);
+          this.setCustomState("ready");
         });
+      } else {
+        this.setCustomState("ready");
       }
       this.signalReady();
       return;
     }
     if (this.hasAttribute(LAZY_ATTR)) {
+      this.setCustomState("lazy");
       this.intersectionObserver = new IntersectionObserver((entries) => {
         const entry = entries[0];
         if (entry.isIntersecting) {
@@ -392,6 +436,9 @@ class ComponentElement extends HTMLElementBase {
     this.abortController?.abort();
     this.abortController = null;
     this.state = "idle";
+    for (const s of ComponentElement.CUSTOM_STATES) {
+      this.internals.states.delete(s);
+    }
     this.data = null;
     this.context = undefined;
     this.dataPromise = null;
@@ -409,11 +456,36 @@ class ComponentElement extends HTMLElementBase {
   async loadFiles() {
     return this.effectiveFiles ?? {};
   }
+  static baseSheet = null;
+  static getBaseSheet() {
+    if (!ComponentElement.baseSheet) {
+      ComponentElement.baseSheet = new CSSStyleSheetBase;
+      ComponentElement.baseSheet.replaceSync(":host { container-type: inline-size; content-visibility: auto; }");
+    }
+    return ComponentElement.baseSheet;
+  }
+  adoptCss() {
+    const css = this.effectiveFiles?.css;
+    const base = ComponentElement.getBaseSheet();
+    if (!css) {
+      this.shadowRoot.adoptedStyleSheets = [base];
+      return;
+    }
+    const name = this.component.name;
+    let sheet = ComponentElement.sheetCache.get(name);
+    if (!sheet) {
+      sheet = new CSSStyleSheetBase;
+      sheet.replaceSync(scopeWidgetCss(css, name));
+      ComponentElement.sheetCache.set(name, sheet);
+    }
+    this.shadowRoot.adoptedStyleSheets = [base, sheet];
+  }
   async loadData() {
     if (this.params === null)
       return;
     const signal = this.abortController?.signal;
     this.state = "loading";
+    this.setCustomState("loading");
     this.render();
     try {
       const promise = this.component.getData({
@@ -426,6 +498,7 @@ class ComponentElement extends HTMLElementBase {
       if (signal?.aborted)
         return;
       this.state = "ready";
+      this.setCustomState("ready");
     } catch (e) {
       if (e instanceof DOMException && e.name === "AbortError")
         return;
@@ -439,6 +512,7 @@ class ComponentElement extends HTMLElementBase {
   }
   setError(message) {
     this.state = "error";
+    this.setCustomState("error");
     this.errorMessage = message;
     this.render();
     this.signalReady();
@@ -847,7 +921,9 @@ function resolveWidgetTags(html, getWidget, routeInfo, contextProvider, logger =
       };
       const context = contextProvider ? contextProvider(baseContext) : baseContext;
       const data = await widget.getData({ params, context });
-      const rendered = widget.renderHTML({ data, params, context });
+      const hostStyle = "<style>:host { container-type: inline-size; content-visibility: auto; }</style>";
+      const cssStyle = files?.css ? `<style>${scopeWidgetCss(files.css, widgetName)}</style>` : "";
+      const rendered = hostStyle + cssStyle + widget.renderHTML({ data, params, context });
       wrappers.set(match, {
         tagName: `widget-${widgetName}`,
         attrs: attrsString ? ` ${attrsString}` : "",
@@ -1605,6 +1681,11 @@ function resolveTargetNode(node, name, isRoot) {
   return node.children[name];
 }
 
+// dist/core/util/js.util.js
+function escapeTemplateLiteral(s) {
+  return s.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
+}
+
 // dist/runtime/abstract.runtime.js
 var CONTENT_TYPES = new Map([
   [".html", "text/html; charset=utf-8"],
@@ -1912,26 +1993,12 @@ class Runtime {
     } catch {
       return;
     }
-    const companionExts = kind === "element" ? [] : ["html", "md", "css"];
-    const files = {};
-    for (const ext of companionExts) {
-      const companionPath = tsPath.replace(/\.ts$/, `.${ext}`);
-      try {
-        files[ext] = await this.query(companionPath, { as: "text" });
-      } catch {}
-    }
     let jsCode;
     try {
-      jsCode = await this.transpile(tsSource);
+      jsCode = await this.transpileModule(tsPath, tsSource);
     } catch {
       return;
     }
-    if (Object.keys(files).length > 0) {
-      const entries = Object.entries(files).map(([k, v]) => `${k}: \`${v.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$")}\``).join(", ");
-      jsCode += `
-export const __files = { ${entries} };
-`;
-    }
     await this.handle(jsPath, { method: "PUT", body: jsCode });
   }
   loadModule(_path) {
@@ -1940,6 +2007,27 @@ export const __files = { ${entries} };
   transpile(_source) {
     throw new Error(`transpile not implemented for ${this.constructor.name}`);
   }
+  async transpileModule(path, source) {
+    let js = await this.transpile(source);
+    const basePath = path.replace(/\.ts$/, "");
+    const companions = ["html", "md", "css"];
+    const entries = [];
+    for (const ext of companions) {
+      try {
+        const content = await this.query(basePath + "." + ext, { as: "text" });
+        entries.push(`  ${ext}: \`${escapeTemplateLiteral(content)}\``);
+      } catch {}
+    }
+    if (entries.length > 0) {
+      js += `
+export const __files = {
+${entries.join(`,
+`)}
+};
+`;
+    }
+    return js;
+  }
   async mergeWidgetIntoManifest(filePath, widgetsDir) {
     const relativePath = filePath.slice(widgetsDir.length + 1);
     const parts = relativePath.split("/");
@@ -2448,16 +2536,11 @@ function buildLazyLoaders(tree, widgetEntries, elementEntries, runtime) {
 class WidgetComponent extends Component {
   renderHTML(args) {
     const files = args.context.files;
-    const style = files?.css ? `<style>${scopeWidgetCss(files.css, this.name)}</style>
-` : "";
     if (files?.html) {
-      return style + files.html;
+      return files.html;
     }
     if (files?.md) {
-      return `${style}<mark-down>${escapeHtml(files.md)}</mark-down>`;
-    }
-    if (style) {
-      return style + super.renderHTML(args);
+      return `<mark-down>${escapeHtml(files.md)}</mark-down>`;
     }
     return super.renderHTML(args);
   }
@@ -3467,5 +3550,5 @@ export {
   BreadcrumbWidget
 };
 
-//# debugId=422168580B2E75DD64756E2164756E21
+//# debugId=E46DD94A9938B68B64756E2164756E21
 //# sourceMappingURL=emroute.js.map