@emkodev/emroute 1.7.2 → 1.8.0-beta.1

package/src/element/component.element.ts

@@ -5,34 +5,37 @@
  * Handles:
  * - SSR hydration (ssr attribute)
  * - Client-side data fetching with AbortSignal
- * - Companion file loading (html, md, css) with caching
+ * - Companion file loading (html, md, css)
  * - Loading/error states
  */
 
-import type {
-  Component,
-  ComponentContext,
-  ContextProvider,
-} from '../component/abstract.component.ts';
-import { HTMLElementBase, LAZY_ATTR, SSR_ATTR } from '../util/html.util.ts';
+import type { Component } from '../../core/component/abstract.component.ts';
+import type { ComponentContext, ContextProvider } from '../../core/type/component.type.ts';
+import { HTMLElementBase } from '../util/html.util.ts';
+import { LAZY_ATTR, SSR_ATTR } from '../../core/util/html.util.ts';
 
 type ComponentState = 'idle' | 'loading' | 'ready' | 'error';
 
+/** Strip keys with undefined values — returns the filtered object, or undefined if all values are undefined. */
+function filterUndefined<T extends Record<string, unknown>>(obj: T): { [K in keyof T as T[K] extends undefined ? never : K]: NonNullable<T[K]> } | undefined {
+  const result: Record<string, unknown> = {};
+  let hasValue = false;
+  for (const [k, v] of Object.entries(obj)) {
+    if (v !== undefined) { result[k] = v; hasValue = true; }
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return hasValue ? result as any : undefined;
+}
+
 type WidgetFiles = { html?: string; md?: string; css?: string };
 
 /**
  * Custom element that renders a Component in the browser.
  */
 export class ComponentElement<TParams, TData> extends HTMLElementBase {
-  /** Shared file content cache — deduplicates fetches across all widget instances. */
-  private static fileCache = new Map<string, Promise<string | undefined>>();
-
   /** Lazy module loaders keyed by tag name — set by registerLazy(). */
   private static lazyLoaders = new Map<string, () => Promise<unknown>>();
 
-  /** Cached module promises for lazy-loaded widgets — avoids re-fetching. */
-  private static lazyModules = new Map<string, Promise<unknown>>();
-
   /** App-level context provider set once during router initialization. */
   private static extendContext: ContextProvider | undefined;
 
@@ -42,7 +45,7 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
   }
 
   private component: Component<TParams, TData>;
-  private effectiveFiles?: WidgetFiles;
+  private effectiveFiles?: WidgetFiles | undefined;
   private params: TParams | null = null;
   private data: TData | null = null;
   private context!: ComponentContext;
@@ -171,12 +174,7 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
     const lazyLoader = ComponentElement.lazyLoaders.get(tagName);
     if (lazyLoader) {
       try {
-        let modulePromise = ComponentElement.lazyModules.get(tagName);
-        if (!modulePromise) {
-          modulePromise = lazyLoader();
-          ComponentElement.lazyModules.set(tagName, modulePromise);
-        }
-        const mod = await modulePromise as Record<string, unknown>;
+        const mod = await lazyLoader() as Record<string, unknown>;
         for (const exp of Object.values(mod)) {
           if (exp && typeof exp === 'object' && 'getData' in exp) {
             const WidgetClass = exp.constructor as new () => Component<TParams, TData>;
@@ -231,12 +229,13 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
     if (signal.aborted) return;
 
     const currentUrl = globalThis.location ? new URL(location.href) : new URL('http://localhost/');
+    const filteredFiles = filterUndefined(files);
     const base: ComponentContext = {
       url: currentUrl,
       pathname: currentUrl.pathname,
       searchParams: currentUrl.searchParams,
       params: this.params ?? {},
-      files: (files.html || files.md || files.css) ? files : undefined,
+      ...(filteredFiles ? { files: filteredFiles } : {}),
     };
     this.context = ComponentElement.extendContext ? ComponentElement.extendContext(base) : base;
 
@@ -316,24 +315,18 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
   }
 
   /**
-   * Fetch a single file by path, with caching.
+   * Fetch a single file by path.
    * Absolute URLs (http/https) pass through; relative paths get '/' prefix.
    */
   private static loadFile(path: string): Promise<string | undefined> {
-    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(
+    return fetch(url).then(
       (res) => res.ok ? res.text() : undefined,
       () => undefined,
     );
-
-    ComponentElement.fileCache.set(path, promise);
-    return promise;
   }
 
   /**
@@ -350,7 +343,7 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
       filePaths.css ? ComponentElement.loadFile(filePaths.css) : undefined,
     ]);
 
-    return { html, md, css };
+    return filterUndefined({ html, md, css }) ?? {};
   }
 
   private async loadData(): Promise<void> {
@@ -364,7 +357,7 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
     try {
       const promise = this.component.getData({
         params: this.params,
-        signal,
+        ...(signal ? { signal } : {}),
         context: this.context,
       });
       this.dataPromise = promise;

package/src/element/markdown.element.ts

@@ -7,8 +7,9 @@
  * - Source attribute: <mark-down src="/path/to.md"></mark-down>
  */
 
-import { escapeHtml, HTMLElementBase } from '../util/html.util.ts';
-import type { MarkdownRenderer } from '../type/markdown.type.ts';
+import { HTMLElementBase } from '../util/html.util.ts';
+import { escapeHtml } from '../../core/util/html.util.ts';
+import type { MarkdownRenderer } from '../../core/type/markdown.type.ts';
 
 export class MarkdownElement extends HTMLElementBase {
   private static renderer: MarkdownRenderer | null = null;
@@ -30,7 +31,7 @@ export class MarkdownElement extends HTMLElementBase {
     MarkdownElement.rendererInitPromise = renderer.init ? renderer.init() : null;
   }
 
-  /** Get the current renderer (if set). Used by bootEmrouteApp to pass through to createEmrouteServer. */
+  /** Get the current renderer (if set). Used by bootEmrouteApp to pass through to Emroute.create(). */
   static getConfiguredRenderer(): MarkdownRenderer | null {
     return MarkdownElement.renderer;
   }
@@ -80,7 +81,7 @@ export class MarkdownElement extends HTMLElementBase {
     const signal = this.abortController?.signal;
 
     try {
-      const response = await fetch(src, { signal });
+      const response = await fetch(src, signal ? { signal } : {});
 
       if (!response.ok) {
         throw new Error(`Failed to fetch ${src}: ${response.status}`);

package/src/index.ts

@@ -27,38 +27,42 @@ export type {
   RouterEventListener,
   RouterEventType,
   RouterState,
-} from './type/route.type.ts';
+} from '../core/type/route.type.ts';
 
-export type { RouteNode } from './type/route-tree.type.ts';
-export type { RouteResolver, ResolvedRoute } from './route/route.resolver.ts';
-export { RouteTrie } from './route/route.trie.ts';
+export type { RouteNode } from '../core/type/route-tree.type.ts';
+export type { RouteResolver, ResolvedRoute } from '../core/router/route.resolver.ts';
+export { RouteTrie } from '../core/router/route.trie.ts';
 
 export type {
   ParsedWidgetBlock,
   SpaMode,
   WidgetManifestEntry,
   WidgetsManifest,
-} from './type/widget.type.ts';
+} from '../core/type/widget.type.ts';
 
-export type { MarkdownRenderer } from './type/markdown.type.ts';
-export { type Logger, setLogger } from './type/logger.type.ts';
+export type { ElementManifestEntry } from '../core/type/element.type.ts';
+export type { MarkdownRenderer } from '../core/type/markdown.type.ts';
+export { setLogger, type Logger } from '../core/type/logger.type.ts';
 
 // Components
 export {
   Component,
-  type ComponentContext,
-  type ComponentManifestEntry,
-  type ContextProvider,
-  type FileContents,
-  type RenderContext,
-} from './component/abstract.component.ts';
+} from '../core/component/abstract.component.ts';
 
-export { PageComponent } from './component/page.component.ts';
-export { WidgetComponent } from './component/widget.component.ts';
-export { WidgetRegistry } from './widget/widget.registry.ts';
+export type {
+  ComponentContext,
+  ComponentManifestEntry,
+  ContextProvider,
+  FileContents,
+  RenderContext,
+} from '../core/type/component.type.ts';
+
+export { PageComponent } from '../core/component/page.component.ts';
+export { WidgetComponent } from '../core/component/widget.component.ts';
+export { WidgetRegistry } from '../core/widget/widget.registry.ts';
 
 // Route config
-export { type BasePath, DEFAULT_BASE_PATH } from './route/route.core.ts';
+export { type BasePath, DEFAULT_BASE_PATH } from '../core/server/emroute.server.ts';
 
 // Utils
-export { escapeHtml, scopeWidgetCss } from './util/html.util.ts';
+export { escapeHtml, scopeWidgetCss } from '../core/util/html.util.ts';

package/src/renderer/spa/{thin-client.ts → emroute.app.ts}

@@ -3,37 +3,37 @@
 /**
  * Emroute App
  *
- * Browser entry point for `/app/` routes. Wraps an EmrouteServer instance
+ * Browser entry point for `/app/` routes. Wraps an Emroute instance
  * (same server, same pipeline) with Navigation API glue that intercepts
  * link clicks, calls `htmlRouter.render()`, and injects the result.
  */
 
-import type { EmrouteServer } from '../../../server/server-api.type.ts';
-import { createEmrouteServer } from '../../../server/emroute.server.ts';
+import { Emroute } from '../../../core/server/emroute.server.ts';
 import { FetchRuntime } from '../../../runtime/fetch.runtime.ts';
-import { ROUTES_MANIFEST_PATH, WIDGETS_MANIFEST_PATH } from '../../../runtime/abstract.runtime.ts';
-import type { RouteNode } from '../../type/route-tree.type.ts';
-import type { NavigateOptions } from '../../type/route.type.ts';
-import type { WidgetManifestEntry } from '../../type/widget.type.ts';
-import { assertSafeRedirect, type BasePath, DEFAULT_BASE_PATH } from '../../route/route.core.ts';
-import { escapeHtml } from '../../util/html.util.ts';
+import { ROUTES_MANIFEST_PATH, WIDGETS_MANIFEST_PATH, ELEMENTS_MANIFEST_PATH } from '../../../core/runtime/abstract.runtime.ts';
+import type { RouteNode } from '../../../core/type/route-tree.type.ts';
+import type { NavigateOptions } from '../../../core/type/route.type.ts';
+import type { WidgetManifestEntry } from '../../../core/type/widget.type.ts';
+import type { ElementManifestEntry } from '../../../core/type/element.type.ts';
+import { type BasePath, DEFAULT_BASE_PATH } from '../../../core/server/emroute.server.ts';
+import { assertSafeRedirect, escapeHtml } from '../../../core/util/html.util.ts';
 import { ComponentElement } from '../../element/component.element.ts';
 import { MarkdownElement } from '../../element/markdown.element.ts';
-import { WidgetRegistry } from '../../widget/widget.registry.ts';
+import { WidgetRegistry } from '../../../core/widget/widget.registry.ts';
 
 /** Options for `createEmrouteApp`. */
 export interface EmrouteAppOptions {
   basePath?: BasePath;
 }
 
-/** Browser app — Navigation API wired to an EmrouteServer. */
+/** Browser app — Navigation API wired to an Emroute. */
 export class EmrouteApp {
-  private readonly server: EmrouteServer;
+  private readonly server: Emroute;
   private readonly appBase: string;
   private slot: Element | null = null;
   private abortController: AbortController | null = null;
 
-  constructor(server: EmrouteServer, options?: EmrouteAppOptions) {
+  constructor(server: Emroute, options?: EmrouteAppOptions) {
     const bp = options?.basePath ?? DEFAULT_BASE_PATH;
     this.server = server;
     this.appBase = bp.app;
@@ -113,13 +113,13 @@ export class EmrouteApp {
   }
 
   private async handleNavigation(url: URL, signal: AbortSignal): Promise<void> {
-    if (!this.slot || !this.server.htmlRouter) return;
+    if (!this.slot || !this.server.htmlRenderer) return;
 
     const routePath = this.stripAppBase(url.pathname);
     const routeUrl = new URL(routePath + url.search, url.origin);
 
     try {
-      const { content, title, redirect } = await this.server.htmlRouter.render(routeUrl, signal);
+      const { content, title, redirect } = await this.server.htmlRenderer.render(routeUrl, signal);
 
       if (signal.aborted) return;
 
@@ -158,7 +158,7 @@ export class EmrouteApp {
  * Stored on `globalThis.__emroute_app` for programmatic access.
  */
 export async function createEmrouteApp(
-  server: EmrouteServer,
+  server: Emroute,
   options?: EmrouteAppOptions,
 ): Promise<EmrouteApp> {
   const g = globalThis as Record<string, unknown>;
@@ -207,8 +207,14 @@ export async function bootEmrouteApp(options?: BootOptions): Promise<EmrouteApp>
     ? await widgetsResponse.json()
     : [];
 
-  // Build lazy module loaders for all route + widget modules
-  const moduleLoaders = buildLazyLoaders(routeTree, widgetEntries, runtime);
+  // Fetch element manifest (optional — app may have no custom elements)
+  const elementsResponse = await runtime.handle(ELEMENTS_MANIFEST_PATH);
+  const elementEntries: ElementManifestEntry[] = elementsResponse.ok
+    ? await elementsResponse.json()
+    : [];
+
+  // Build lazy module loaders for all route + widget + element modules
+  const moduleLoaders = buildLazyLoaders(routeTree, widgetEntries, elementEntries, runtime);
 
   // Register widgets eagerly (tag defined immediately, module loads on connectedCallback)
   const widgets = new WidgetRegistry();
@@ -216,24 +222,41 @@ export async function bootEmrouteApp(options?: BootOptions): Promise<EmrouteApp>
     ComponentElement.registerLazy(entry.name, entry.files, moduleLoaders[entry.modulePath]);
   }
 
-  // Create the server (reuses the same createEmrouteServer as SSR)
-  const server = await createEmrouteServer({
+  // Register custom elements — import all modules, define when loaded
+  for (const entry of elementEntries) {
+    const loader = moduleLoaders[entry.modulePath];
+    if (loader) {
+      loader().then((mod) => {
+        const cls = (mod as Record<string, unknown>).default;
+        if (typeof cls === 'function' && !customElements.get(entry.tagName)) {
+          customElements.define(entry.tagName, cls as CustomElementConstructor);
+        }
+      }).catch((e) => {
+        console.error(`[emroute] Failed to load element ${entry.tagName}:`, e);
+      });
+    }
+  }
+
+  // Create Emroute instance (same class as SSR)
+  const mdRenderer = MarkdownElement.getConfiguredRenderer();
+  const server = await Emroute.create({
     routeTree,
     widgets,
     moduleLoaders,
-    markdownRenderer: MarkdownElement.getConfiguredRenderer() ?? undefined,
+    ...(mdRenderer ? { markdownRenderer: mdRenderer } : {}),
   }, runtime);
 
   return createEmrouteApp(server, options);
 }
 
 /**
- * Walk the route tree and widget entries to build a map of
+ * Walk the route tree, widget entries, and element entries to build a map of
  * `path → () => runtime.loadModule(path)` lazy loaders.
  */
 function buildLazyLoaders(
   tree: RouteNode,
   widgetEntries: WidgetManifestEntry[],
+  elementEntries: ElementManifestEntry[],
   runtime: FetchRuntime,
 ): Record<string, () => Promise<unknown>> {
   const paths = new Set<string>();
@@ -252,6 +275,7 @@ function buildLazyLoaders(
 
   walk(tree);
   for (const entry of widgetEntries) paths.add(entry.modulePath);
+  for (const entry of elementEntries) paths.add(entry.modulePath);
 
   const loaders: Record<string, () => Promise<unknown>> = {};
   for (const path of paths) {

package/src/renderer/spa/mod.ts

@@ -10,22 +10,22 @@
 import { RouterSlot } from '../../element/slot.element.ts';
 import { MarkdownElement } from '../../element/markdown.element.ts';
 import { ComponentElement } from '../../element/component.element.ts';
-import { WidgetRegistry } from '../../widget/widget.registry.ts';
+import { WidgetRegistry } from '../../../core/widget/widget.registry.ts';
 
-export { bootEmrouteApp, createEmrouteApp, EmrouteApp, type BootOptions, type EmrouteAppOptions } from './thin-client.ts';
+export { bootEmrouteApp, createEmrouteApp, EmrouteApp, type BootOptions, type EmrouteAppOptions } from './emroute.app.ts';
 export { ComponentElement, MarkdownElement, RouterSlot, WidgetRegistry };
-export type { SpaMode, WidgetsManifest } from '../../type/widget.type.ts';
+export type { SpaMode, WidgetsManifest } from '../../../core/type/widget.type.ts';
 
 // Re-export base classes and types for consumer code (pages, widgets)
-export { PageComponent } from '../../component/page.component.ts';
-export { WidgetComponent } from '../../component/widget.component.ts';
-export {
-  Component,
-  type ComponentContext,
-  type ComponentManifestEntry,
-  type ContextProvider,
-  type RenderContext,
-} from '../../component/abstract.component.ts';
+export { PageComponent } from '../../../core/component/page.component.ts';
+export { WidgetComponent } from '../../../core/component/widget.component.ts';
+export { Component } from '../../../core/component/abstract.component.ts';
+export type {
+  ComponentContext,
+  ComponentManifestEntry,
+  ContextProvider,
+  RenderContext,
+} from '../../../core/type/component.type.ts';
 export type {
   MatchedRoute,
   NavigateOptions,
@@ -33,13 +33,13 @@ export type {
   RouterEvent,
   RouterEventListener,
   RouterEventType,
-} from '../../type/route.type.ts';
-export type { RouteNode } from '../../type/route-tree.type.ts';
-export type { RouteResolver, ResolvedRoute } from '../../route/route.resolver.ts';
-export { RouteTrie } from '../../route/route.trie.ts';
-export type { MarkdownRenderer } from '../../type/markdown.type.ts';
-export { type BasePath, DEFAULT_BASE_PATH } from '../../route/route.core.ts';
-export { escapeHtml, scopeWidgetCss } from '../../util/html.util.ts';
+} from '../../../core/type/route.type.ts';
+export type { RouteNode } from '../../../core/type/route-tree.type.ts';
+export type { RouteResolver, ResolvedRoute } from '../../../core/router/route.resolver.ts';
+export { RouteTrie } from '../../../core/router/route.trie.ts';
+export type { MarkdownRenderer } from '../../../core/type/markdown.type.ts';
+export { type BasePath, DEFAULT_BASE_PATH } from '../../../core/server/emroute.server.ts';
+export { escapeHtml, scopeWidgetCss } from '../../../core/util/html.util.ts';
 export type {
   ErrorBoundary,
   RedirectConfig,
@@ -48,9 +48,9 @@ export type {
   RouteFileType,
   RouteInfo,
   RouterState,
-} from '../../type/route.type.ts';
-export type { ParsedWidgetBlock, WidgetManifestEntry } from '../../type/widget.type.ts';
-export { type Logger, setLogger } from '../../type/logger.type.ts';
+} from '../../../core/type/route.type.ts';
+export type { ParsedWidgetBlock, WidgetManifestEntry } from '../../../core/type/widget.type.ts';
+export { setLogger, type Logger } from '../../../core/type/logger.type.ts';
 
 // Register core custom elements in the browser
 if (globalThis.customElements) {

package/src/util/html.util.ts

@@ -1,16 +1,23 @@
 /**
- * Core HTML utilities for emroute
+ * HTML Utilities (Browser Layer)
+ *
+ * Re-exports pure functions from core/ and provides browser-specific
+ * SSR-compatible HTMLElement mock.
  */
 
-/** HTML attribute name marking a widget as server-rendered (skip client getData + render). */
-export const SSR_ATTR = 'ssr';
-
-/** HTML attribute name for lazy-loading widgets via IntersectionObserver. */
-export const LAZY_ATTR = 'lazy';
+// Re-export everything from core
+export {
+  SSR_ATTR,
+  LAZY_ATTR,
+  assertSafeRedirect,
+  escapeHtml,
+  unescapeHtml,
+  scopeWidgetCss,
+  STATUS_MESSAGES,
+} from '../../core/util/html.util.ts';
 
 /**
  * SSR-compatible ShadowRoot mock.
- * Provides a 1-to-1 subset of the browser ShadowRoot API for server-side rendering.
  */
 class SsrShadowRoot {
   private _innerHTML = '';
@@ -29,9 +36,7 @@ class SsrShadowRoot {
     this._innerHTML = html;
   }
 
-  append(..._nodes: (Node | string)[]): void {
-    // On the server, append is a no-op — SSR content is already serialized via innerHTML.
-  }
+  append(..._nodes: (Node | string)[]): void {}
 
   querySelector(_selector: string): Element | null {
     return null;
@@ -52,15 +57,11 @@ class SsrShadowRoot {
 
 /**
  * SSR-compatible HTMLElement mock.
- * Provides a 1-to-1 subset of the browser HTMLElement API for server-side rendering.
- * Methods that require DOM parsing (querySelector, childNodes) return empty results —
- * SSR code should use innerHTML for content, not DOM traversal.
  */
 class SsrHTMLElement {
   private _innerHTML = '';
   private _shadowRoot: SsrShadowRoot | null = null;
   private _attributes = new Map<string, string>();
-  // Accept any CSS property assignment without error
   readonly style = new Proxy({} as CSSStyleDeclaration, {
     set(_target, _prop, _value) {
       return true;
@@ -128,9 +129,7 @@ class SsrHTMLElement {
     return [];
   }
 
-  append(..._nodes: (Node | string)[]): void {
-    // No-op on server — use innerHTML for content
-  }
+  append(..._nodes: (Node | string)[]): void {}
 
   appendChild(node: Node): Node {
     return node;
@@ -140,47 +139,3 @@ class SsrHTMLElement {
 /** Server-safe base class: HTMLElement in browser, SSR mock on server. */
 export const HTMLElementBase = globalThis.HTMLElement ??
   (SsrHTMLElement as unknown as typeof HTMLElement);
-
-/**
- * Escape HTML entities for safe display.
- */
-export function escapeHtml(text: string): string {
-  return text
-    .replaceAll('&', '&amp;')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll("'", '&#39;')
-    .replaceAll('`', '&#96;');
-}
-
-/**
- * Unescape HTML entities back to plain text (server-side, no DOM).
- */
-export function unescapeHtml(text: string): string {
-  return text
-    .replaceAll('&#96;', '`')
-    .replaceAll('&#39;', "'")
-    .replaceAll('&quot;', '"')
-    .replaceAll('&gt;', '>')
-    .replaceAll('&lt;', '<')
-    .replaceAll('&amp;', '&');
-}
-
-/**
- * Wrap CSS in a `@scope` rule scoped to the widget's custom element tag.
- * Used by `WidgetComponent.renderHTML()` for companion CSS files.
- */
-export function scopeWidgetCss(css: string, widgetName: string): string {
-  return `@scope (widget-${widgetName}) {\n${css}\n}`;
-}
-
-/**
- * Status code to message mapping.
- */
-export const STATUS_MESSAGES: Record<number, string> = {
-  401: 'Unauthorized',
-  403: 'Forbidden',
-  404: 'Not Found',
-  500: 'Internal Server Error',
-};

package/src/widget/breadcrumb.widget.ts

@@ -14,9 +14,9 @@
  *   ```
  */
 
-import { WidgetComponent } from '../component/widget.component.ts';
-import { escapeHtml } from '../util/html.util.ts';
-import type { ComponentContext } from '../component/abstract.component.ts';
+import { WidgetComponent } from '../../core/component/widget.component.ts';
+import { escapeHtml } from '../../core/util/html.util.ts';
+import type { ComponentContext } from '../../core/type/component.type.ts';
 
 const DEFAULT_HTML_SEPARATOR = ' \u203A ';
 const DEFAULT_MD_SEPARATOR = ' > ';

package/src/widget/page-title.widget.ts

@@ -8,7 +8,7 @@
  *   <widget-page-title title="About Us"></widget-page-title>
  */
 
-import { WidgetComponent } from '../component/widget.component.ts';
+import { WidgetComponent } from '../../core/component/widget.component.ts';
 
 interface PageTitleParams {
   title: string;