fix(imports): Normalize and fix relative import paths for web components to ensure correct module resolution

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2025-12-06 - 2.0.4 - fix(imports)
+Normalize and fix relative import paths for web components to ensure correct module resolution
+
+- Replaced numerous './<component>.js' imports with explicit '../<component>/<component>.js' paths across many elements and demos to fix module resolution.
+- Updated imports for core shared components such as dees-icon, dees-panel, dees-contextmenu, dees-windowlayer, dees-windowcontrols and several app-ui components (appbar, maincontent, mainselector, activitylog, mobilenavigation, modal, pdf, profilepicture, statsgrid, etc.).
+- No runtime behavior changes — this is a refactor to import paths to address build/bundling and resolution issues.
+
 ## 2025-12-03 - 2.0.3 - fix(dependencies)
 Bump dependencies and developer tooling versions
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '2.0.3',
+  version: '2.0.4',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/dees-appui-activitylog/dees-appui-activitylog.ts

@@ -11,7 +11,7 @@ import {
 
 import * as domtools from '@design.estate/dees-domtools';
 import { DeesContextmenu } from '../dees-contextmenu/dees-contextmenu.js';
-import './dees-icon.js';
+import '../dees-icon/dees-icon.js';
 
 @customElement('dees-appui-activitylog')
 export class DeesAppuiActivitylog extends DeesElement {

ts_web/elements/dees-appui-appbar/component.ts

@@ -15,9 +15,9 @@ import { appuiAppbarStyles } from './styles.js';
 import { renderAppuiAppbar } from './template.js';
 
 // Import required components
-import '../dees-icon.js';
-import '../dees-windowcontrols.js';
-import '../dees-appui-profiledropdown.js';
+import '../dees-icon/dees-icon.js';
+import '../dees-windowcontrols/dees-windowcontrols.js';
+import '../dees-appui-profiledropdown/dees-appui-profiledropdown.js';
 
 declare global {
   interface HTMLElementTagNameMap {

ts_web/elements/dees-appui-base/dees-appui-base.ts

@@ -18,11 +18,11 @@ import type { DeesAppuiActivitylog } from '../dees-appui-activitylog/dees-appui-
 import { demoFunc } from './dees-appui-base.demo.js';
 
 // Import child components
-import './dees-appui-appbar/index.js';
-import './dees-appui-mainmenu.js';
-import './dees-appui-mainselector.js';
-import './dees-appui-maincontent.js';
-import './dees-appui-activitylog.js';
+import '../dees-appui-appbar/index.js';
+import '../dees-appui-mainmenu/dees-appui-mainmenu.js';
+import '../dees-appui-mainselector/dees-appui-mainselector.js';
+import '../dees-appui-maincontent/dees-appui-maincontent.js';
+import '../dees-appui-activitylog/dees-appui-activitylog.js';
 
 @customElement('dees-appui-base')
 export class DeesAppuiBase extends DeesElement {

ts_web/elements/dees-appui-maincontent/dees-appui-maincontent.ts

@@ -11,7 +11,7 @@ import {
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
-import './dees-appui-tabs.js';
+import '../dees-appui-tabs/dees-appui-tabs.js';
 import type { DeesAppuiTabs } from '../dees-appui-tabs/dees-appui-tabs.js';
 
 @customElement('dees-appui-maincontent')

ts_web/elements/dees-appui-mainselector/dees-appui-mainselector.ts

@@ -2,7 +2,7 @@ import * as plugins from '../00plugins.js';
 import * as interfaces from '../interfaces/index.js';
 
 import { DeesContextmenu } from '../dees-contextmenu/dees-contextmenu.js';
-import './dees-icon.js';
+import '../dees-icon/dees-icon.js';
 
 import {
   DeesElement,

ts_web/elements/dees-appui-view/dees-appui-view.ts

@@ -11,7 +11,7 @@ import {
   state,
 } from '@design.estate/dees-element';
 
-import './dees-appui-tabs.js';
+import '../dees-appui-tabs/dees-appui-tabs.js';
 import type { DeesAppuiTabs } from '../dees-appui-tabs/dees-appui-tabs.js';
 
 export interface IAppViewTab extends interfaces.ITab {

ts_web/elements/dees-button/dees-button.demo.ts

@@ -1,10 +1,10 @@
 import { html, css, cssManager, domtools } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import './dees-panel.js';
-import './dees-form.js';
-import './dees-form-submit.js';
-import './dees-input-text.js';
-import './dees-icon.js';
+import '../dees-panel/dees-panel.js';
+import '../dees-form/dees-form.js';
+import '../dees-form-submit/dees-form-submit.js';
+import '../dees-input-text/dees-input-text.js';
+import '../dees-icon/dees-icon.js';
 import type { DeesButton } from '../dees-button/dees-button.js';
 
 export const demoFunc = () => html`

ts_web/elements/dees-contextmenu/dees-contextmenu.ts

@@ -15,7 +15,7 @@ import {
 import * as domtools from '@design.estate/dees-domtools';
 import { DeesWindowLayer } from '../dees-windowlayer/dees-windowlayer.js';
 import { zIndexLayers } from '../00zindex.js';
-import './dees-icon.js';
+import '../dees-icon/dees-icon.js';
 
 declare global {
   interface HTMLElementTagNameMap {

ts_web/elements/dees-dashboardgrid/dees-dashboardgrid.ts

@@ -7,8 +7,8 @@ import {
   type TemplateResult,
 } from '@design.estate/dees-element';
 
-import '../dees-icon.js';
-import '../dees-contextmenu.js';
+import '../dees-icon/dees-icon.js';
+import '../dees-contextmenu/dees-contextmenu.js';
 import { demoFunc } from './dees-dashboardgrid.demo.js';
 import { dashboardGridStyles } from './styles.js';
 import {

ts_web/elements/dees-input-checkbox/dees-input-checkbox.demo.ts

@@ -1,8 +1,8 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import './dees-panel.js';
+import '../dees-panel/dees-panel.js';
 import type { DeesInputCheckbox } from '../dees-input-checkbox/dees-input-checkbox.js';
-import './dees-button.js';
+import '../dees-button/dees-button.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {

ts_web/elements/dees-input-datepicker/component.ts

@@ -9,8 +9,8 @@ import { demoFunc } from './demo.js';
 import { datepickerStyles } from './styles.js';
 import { renderDatepicker } from './template.js';
 import type { IDateEvent } from './types.js';
-import '../dees-icon.js';
-import '../dees-label.js';
+import '../dees-icon/dees-icon.js';
+import '../dees-label/dees-label.js';
 
 
 declare global {

ts_web/elements/dees-input-datepicker/demo.ts

@@ -1,6 +1,6 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../dees-panel.js';
+import '../dees-panel/dees-panel.js';
 import './component.js';
 import type { DeesInputDatepicker } from './component.js';
 

ts_web/elements/dees-input-dropdown/dees-input-dropdown.demo.ts

@@ -1,8 +1,8 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import './dees-panel.js';
-import './dees-form.js';
-import './dees-form-submit.js';
+import '../dees-panel/dees-panel.js';
+import '../dees-form/dees-form.js';
+import '../dees-form-submit/dees-form-submit.js';
 
 export const demoFunc = () => html`
   <style>

ts_web/elements/dees-input-fileupload/component.ts

@@ -1,8 +1,8 @@
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
 import { demoFunc } from './demo.js';
 import { fileuploadStyles } from './styles.js';
-import '../dees-icon.js';
-import '../dees-label.js';
+import '../dees-icon/dees-icon.js';
+import '../dees-label/dees-label.js';
 
 import {
   customElement,

ts_web/elements/dees-input-fileupload/demo.ts

@@ -1,6 +1,6 @@
 import { css, cssManager, html } from '@design.estate/dees-element';
 import './component.js';
-import '../dees-panel.js';
+import '../dees-panel/dees-panel.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper>

ts_web/elements/dees-input-list/dees-input-list.demo.ts

@@ -1,9 +1,9 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import './dees-panel.js';
-import './dees-form.js';
-import './dees-input-text.js';
-import './dees-form-submit.js';
+import '../dees-panel/dees-panel.js';
+import '../dees-form/dees-form.js';
+import '../dees-input-text/dees-input-text.js';
+import '../dees-form-submit/dees-form-submit.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper>

ts_web/elements/dees-input-list/dees-input-list.ts

@@ -8,8 +8,8 @@ import {
   type TemplateResult,
 } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
-import './dees-icon.js';
-import './dees-button.js';
+import '../dees-icon/dees-icon.js';
+import '../dees-button/dees-button.js';
 import { demoFunc } from './dees-input-list.demo.js';
 
 declare global {

ts_web/elements/dees-input-quantityselector/dees-input-quantityselector.demo.ts

@@ -1,5 +1,5 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
-import './dees-shopping-productcard.js';
+import '../dees-shopping-productcard/dees-shopping-productcard.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper>

ts_web/elements/dees-input-radiogroup/dees-input-radiogroup.demo.ts

@@ -1,6 +1,6 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import './dees-panel.js';
+import '../dees-panel/dees-panel.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper>

ts_web/elements/dees-input-richtext/component.ts

@@ -3,7 +3,7 @@ import { demoFunc } from './demo.js';
 import { richtextStyles } from './styles.js';
 import { renderRichtext } from './template.js';
 import type { IToolbarButton } from './types.js';
-import '../dees-icon.js';
+import '../dees-icon/dees-icon.js';
 
 import {
   customElement,

ts_web/elements/dees-input-richtext/demo.ts

@@ -1,7 +1,7 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
 import './component.js';
-import '../dees-panel.js';
+import '../dees-panel/dees-panel.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper>

ts_web/elements/dees-input-tags/dees-input-tags.demo.ts

@@ -1,6 +1,6 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import './dees-panel.js';
+import '../dees-panel/dees-panel.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper>

ts_web/elements/dees-input-tags/dees-input-tags.ts

@@ -8,7 +8,7 @@ import {
   type TemplateResult,
 } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
-import './dees-icon.js';
+import '../dees-icon/dees-icon.js';
 import { demoFunc } from './dees-input-tags.demo.js';
 
 declare global {

ts_web/elements/dees-input-text/dees-input-text.demo.ts

@@ -1,6 +1,6 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import './dees-panel.js';
+import '../dees-panel/dees-panel.js';
 import type { DeesInputText } from '../dees-input-text/dees-input-text.js';
 
 export const demoFunc = () => html`

ts_web/elements/dees-input-wysiwyg.demo.ts

@@ -1,6 +1,6 @@
 import { html, css, type TemplateResult } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import './dees-panel.js';
+import './dees-panel/dees-panel.js';
 import type { DeesInputWysiwyg } from './dees-input-wysiwyg/dees-input-wysiwyg.js';
 import type { IBlock } from './dees-input-wysiwyg/wysiwyg.types.js';
 

ts_web/elements/dees-input-wysiwyg/dees-slash-menu.ts

@@ -8,7 +8,7 @@ import {
   state,
 } from '@design.estate/dees-element';
 import { zIndexRegistry } from '../00zindex.js';
-import '../dees-icon.js';
+import '../dees-icon/dees-icon.js';
 
 import { type ISlashMenuItem } from './wysiwyg.types.js';
 import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';

ts_web/elements/dees-input-wysiwyg/dees-wysiwyg-block.ts

@@ -14,7 +14,7 @@ import { WysiwygSelection } from './wysiwyg.selection.js';
 import { BlockRegistry, type IBlockEventHandlers } from './blocks/index.js';
 import './wysiwyg.blockregistration.js';
 import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
-import '../dees-contextmenu.js';
+import '../dees-contextmenu/dees-contextmenu.js';
 
 declare global {
   interface HTMLElementTagNameMap {

ts_web/elements/dees-mobilenavigation/dees-mobilenavigation.demo.ts

@@ -1,6 +1,6 @@
 import { html, css } from '@design.estate/dees-element';
-import './dees-button.js';
-import './dees-panel.js';
+import '../dees-button/dees-button.js';
+import '../dees-panel/dees-panel.js';
 import '@design.estate/dees-wcctools/demotools';
 
 export const demoFunc = () => html`

ts_web/elements/dees-mobilenavigation/dees-mobilenavigation.ts

@@ -13,7 +13,7 @@ import {
   state,
 } from '@design.estate/dees-element';
 import { DeesWindowLayer } from '../dees-windowlayer/dees-windowlayer.js';
-import './dees-icon.js';
+import '../dees-icon/dees-icon.js';
 
 @customElement('dees-mobilenavigation')
 export class DeesMobilenavigation extends DeesElement {

ts_web/elements/dees-modal/dees-modal.ts

@@ -20,7 +20,7 @@ import {
 
 import * as domtools from '@design.estate/dees-domtools';
 import { DeesWindowLayer } from '../dees-windowlayer/dees-windowlayer.js';
-import './dees-icon.js';
+import '../dees-icon/dees-icon.js';
 
 declare global {
   interface HTMLElementTagNameMap {

ts_web/elements/dees-pdf-preview/component.ts

@@ -4,7 +4,7 @@ import { CanvasPool, type PooledCanvas } from '../dees-pdf-shared/CanvasPool.js'
 import { PerformanceMonitor, throttle } from '../dees-pdf-shared/utils.js';
 import { previewStyles } from './styles.js';
 import { demo as demoFunc } from './demo.js';
-import '../dees-icon.js';
+import '../dees-icon/dees-icon.js';
 
 declare global {
   interface HTMLElementTagNameMap {

ts_web/elements/dees-pdf-viewer/component.ts

@@ -4,7 +4,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
 import { viewerStyles } from './styles.js';
 import { demo as demoFunc } from './demo.js';
-import '../dees-icon.js';
+import '../dees-icon/dees-icon.js';
 
 declare global {
   interface HTMLElementTagNameMap {

ts_web/elements/dees-pdf/component.ts

@@ -2,7 +2,7 @@ import { DeesElement, property, html, customElement, domtools, type TemplateResu
 
 import { Deferred } from '@push.rocks/smartpromise';
 import { DeesContextmenu } from '../dees-contextmenu/dees-contextmenu.js';
-import '../dees-icon.js';
+import '../dees-icon/dees-icon.js';
 
 // import type pdfjsTypes from 'pdfjs-dist';
 

ts_web/elements/dees-shopping-productcard/dees-shopping-productcard.demo.ts

@@ -1,6 +1,6 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import './dees-panel.js';
+import '../dees-panel/dees-panel.js';
 import type { DeesShoppingProductcard } from '../dees-shopping-productcard/dees-shopping-productcard.js';
 
 export const demoFunc = () => html`

ts_web/elements/dees-simple-appdash/dees-simple-appdash.demo.ts

@@ -1,12 +1,12 @@
 import { html, DeesElement, customElement, css, cssManager } from '@design.estate/dees-element';
 import type { IView } from '../dees-simple-appdash/dees-simple-appdash.js';
-import './dees-form.js';
-import './dees-input-text.js';
-import './dees-input-checkbox.js';
-import './dees-input-dropdown.js';
-import './dees-input-radiogroup.js';
-import './dees-form-submit.js';
-import './dees-statsgrid.js';
+import '../dees-form/dees-form.js';
+import '../dees-input-text/dees-input-text.js';
+import '../dees-input-checkbox/dees-input-checkbox.js';
+import '../dees-input-dropdown/dees-input-dropdown.js';
+import '../dees-input-radiogroup/dees-input-radiogroup.js';
+import '../dees-form-submit/dees-form-submit.js';
+import '../dees-statsgrid/dees-statsgrid.js';
 import type { IStatsTile } from '../dees-statsgrid/dees-statsgrid.js';
 
 // Create demo view components

ts_web/elements/dees-simple-appdash/dees-simple-appdash.ts

@@ -13,7 +13,7 @@ import {
   state,
   domtools,
 } from '@design.estate/dees-element';
-import './dees-icon.js';
+import '../dees-icon/dees-icon.js';
 import type { DeesTerminal } from '../dees-terminal/dees-terminal.js';
 
 declare global {

ts_web/elements/dees-statsgrid/dees-statsgrid.demo.ts

@@ -1,6 +1,6 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import './dees-panel.js';
+import '../dees-panel/dees-panel.js';
 import type { IStatsTile } from '../dees-statsgrid/dees-statsgrid.js';
 
 export const demoFunc = () => {

ts_web/elements/dees-statsgrid/dees-statsgrid.ts

@@ -13,9 +13,9 @@ import {
 } from '@design.estate/dees-element';
 import type { TemplateResult } from '@design.estate/dees-element';
 
-import './dees-icon.js';
-import './dees-contextmenu.js';
-import './dees-button.js';
+import '../dees-icon/dees-icon.js';
+import '../dees-contextmenu/dees-contextmenu.js';
+import '../dees-button/dees-button.js';
 
 declare global {
   interface HTMLElementTagNameMap {

ts_web/elements/dees-toast/dees-toast.demo.ts

@@ -1,6 +1,6 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import { DeesToast } from '../dees-toast/dees-toast.js';
-import './dees-button.js';
+import '../dees-button/dees-button.js';
 
 export const demoFunc = () => html`
     <style>

ts_web/elements/dees-updater/dees-updater.ts

@@ -9,7 +9,7 @@ import {
 } from '@design.estate/dees-element';
 import { demoFunc } from './dees-updater.demo.js';
 
-import './dees-windowlayer';
+import '../dees-windowlayer/dees-windowlayer.js';
 import { css, cssManager } from '@design.estate/dees-element';
 
 declare global {

ts_web/elements/profilepicture/dees-input-profilepicture.demo.ts

@@ -1,6 +1,6 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../dees-panel.js';
+import '../dees-panel/dees-panel.js';
 import './dees-input-profilepicture.js';
 import type { DeesInputProfilePicture } from './dees-input-profilepicture.js';
 

ts_web/elements/profilepicture/dees-input-profilepicture.ts

@@ -8,8 +8,8 @@ import {
   type TemplateResult,
 } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
-import '../dees-icon.js';
-import '../dees-label.js';
+import '../dees-icon/dees-icon.js';
+import '../dees-label/dees-label.js';
 import { ProfilePictureModal } from './profilepicture.modal.js';
 import { demoFunc } from './dees-input-profilepicture.demo.js';
 

ts_web/elements/profilepicture/profilepicture.modal.ts

@@ -11,9 +11,9 @@ import {
 import * as colors from '../00colors.js';
 import { cssGeistFontFamily } from '../00fonts.js';
 import { zIndexRegistry } from '../00zindex.js';
-import '../dees-icon.js';
-import '../dees-button.js';
-import '../dees-windowlayer.js';
+import '../dees-icon/dees-icon.js';
+import '../dees-button/dees-button.js';
+import '../dees-windowlayer/dees-windowlayer.js';
 import { DeesWindowLayer } from '../dees-windowlayer/dees-windowlayer.js';
 import { ImageCropper } from './profilepicture.cropper.js';
 import type { ProfileShape } from './dees-input-profilepicture.js';