feat(dees-appui): Rename DeesAppuiBase to DeesAppui and migrate related API, exports, demos and docs

2026-01-02 21:40:49 +00:00
parent 3b137c43a8
commit 30ebc47eda
17 changed files with 64 additions and 55 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,14 @@
 # Changelog

+## 2026-01-02 - 3.28.0 - feat(dees-appui)
+Rename DeesAppuiBase to DeesAppui and migrate related API, exports, demos and docs
+
+- Renamed public component/tag and TypeScript types: DeesAppuiBase -> DeesAppui and TDeesAppuiBase -> TDeesAppui; updated IViewActivationContext.appui type accordingly
+- Moved/rewired view registry implementation from dees-appui-base to dees-appui and updated module exports
+- Updated README and demo files to reference DeesAppui and new readme paths (removed dees-appui-base docs/demo)
+- Replaced dependency/imports of '@webcontainer/api' with '@tempfix/webcontainer__api' (package.json and source imports)
+- Changed tsconfig.json: skipLibCheck set from true to false
+
 ## 2026-01-01 - 3.27.1 - fix(dees-actionbar)
 always render actionbar wrapper and delay adding visible class to ensure grid/opacity animations run reliably

--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
    "@tiptap/extension-underline": "^2.23.0",
    "@tiptap/starter-kit": "^2.23.0",
    "@tsclass/tsclass": "^9.3.0",
-    "@webcontainer/api": "1.6.1",
+    "@tempfix/webcontainer__api": "1.6.1",
    "apexcharts": "^5.3.6",
    "highlight.js": "11.11.1",
    "ibantools": "^4.5.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
      '@push.rocks/smartstring':
        specifier: ^4.1.0
        version: 4.1.0
+      '@tempfix/webcontainer__api':
+        specifier: 1.6.1
+        version: 1.6.1
      '@tiptap/core':
        specifier: ^2.23.0
        version: 2.27.1(@tiptap/pm@2.27.1)
@@ -56,9 +59,6 @@ importers:
      '@tsclass/tsclass':
        specifier: ^9.3.0
        version: 9.3.0
-      '@webcontainer/api':
-        specifier: 1.6.1
-        version: 1.6.1
      apexcharts:
        specifier: ^5.3.6
        version: 5.3.6
@@ -1450,6 +1450,9 @@ packages:
  '@tempfix/idb@8.0.3':
    resolution: {integrity: sha512-hPJQKO7+oAIY+pDNImrZ9QAINbz9KmwT+yO4iRVwdPanok2YKpaUxdJzIvCUwY0YgAawlvYdffbLvRLV5hbs2g==}

+  '@tempfix/webcontainer__api@1.6.1':
+    resolution: {integrity: sha512-Hgn3cwy0vPzjrVBqeVnY0jNZLaOCW7d+dxBe7Jv9YGHAjJ8udUMS+KbTywSv5paAfld3A/RN/iolmMzOwZxLTA==}
+
  '@tiptap/core@2.27.1':
    resolution: {integrity: sha512-nkerkl8syHj44ZzAB7oA2GPmmZINKBKCa79FuNvmGJrJ4qyZwlkDzszud23YteFZEytbc87kVd/fP76ROS6sLg==}
    peerDependencies:
@@ -1760,9 +1763,6 @@ packages:
  '@webcontainer/api@1.2.0':
    resolution: {integrity: sha512-tzoKBd4lLdhHy5GHFpUkl+ndoSba8JqmB7x0ZQFnWfjbcbQOvKQfxA8MEMUYhgqjWHnbrWdAfnBEHz5f5lYG5A==}

-  '@webcontainer/api@1.6.1':
-    resolution: {integrity: sha512-2RS2KiIw32BY1Icf6M1DvqSmcon9XICZCDgS29QJb2NmF12ZY2V5Ia+949hMKB3Wno+P/Y8W+sPP59PZeXSELg==}
-
  '@yr/monotone-cubic-spline@1.0.3':
    resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==}

@@ -6466,6 +6466,8 @@ snapshots:

  '@tempfix/idb@8.0.3': {}

+  '@tempfix/webcontainer__api@1.6.1': {}
+
  '@tiptap/core@2.27.1(@tiptap/pm@2.27.1)':
    dependencies:
      '@tiptap/pm': 2.27.1
@@ -6814,8 +6816,6 @@ snapshots:

  '@webcontainer/api@1.2.0': {}

-  '@webcontainer/api@1.6.1': {}
-
  '@yr/monotone-cubic-spline@1.0.3': {}

  accepts@1.3.8:
--- a/readme.hints.md
+++ b/readme.hints.md
@@ -684,7 +684,7 @@ According to Lit's documentation (https://lit.dev/docs/components/decorators/#de

 ## Enhanced AppUI API (2025-12-08)

-The `dees-appui-base` component has been enhanced with a unified configuration API for building real-world applications.
+The `dees-appui` component has been enhanced with a unified configuration API for building real-world applications.

 ### New Modules:

@@ -734,7 +734,7 @@ interface IRoutingConfig {
 }
 ```

-### New Public Methods on DeesAppuiBase:
+### New Public Methods on DeesAppui:

 ```typescript
 // Configure with unified config
@@ -774,7 +774,7 @@ const config: IAppConfig = {
  statePersistence: { enabled: true, storage: 'localStorage' },
 };

-html`<dees-appui-base .config=${config}></dees-appui-base>`;
+html`<dees-appui .config=${config}></dees-appui>`;
 ```

 ### Backward Compatibility:
@@ -783,13 +783,13 @@ The existing property-based API still works:

 ```typescript
 html`
-  <dees-appui-base
+  <dees-appui
    .mainmenuGroups=${groups}
    .secondarymenuGroups=${secondaryGroups}
    @mainmenu-tab-select=${handler}
  >
    <div slot="maincontent">...</div>
-  </dees-appui-base>
+  </dees-appui>
 `;
 ```

--- a/readme.md
+++ b/readme.md
@@ -54,7 +54,7 @@ For developers working on this library, please refer to the [UI Components Playb
 |----------|------------|
 | **Core UI** | [`DeesButton`](#deesbutton), [`DeesButtonExit`](#deesbuttonexit), [`DeesButtonGroup`](#deesbuttongroup), [`DeesBadge`](#deesbadge), [`DeesChips`](#deeschips), [`DeesHeading`](#deesheading), [`DeesHint`](#deeshint), [`DeesIcon`](#deesicon), [`DeesLabel`](#deeslabel), [`DeesPanel`](#deespanel), [`DeesSearchbar`](#deessearchbar), [`DeesSpinner`](#deesspinner), [`DeesToast`](#deestoast), [`DeesWindowcontrols`](#deeswindowcontrols) |
 | **Forms** | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesFormSubmit`](#deesformsubmit) |
-| **Layout** | [`DeesAppuiBase`](#deesappuibase), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
+| **Layout** | [`DeesAppui`](#deesappui), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
 | **Data Display** | [`DeesTable`](#deestable), [`DeesDataviewCodebox`](#deesdataviewcodebox), [`DeesDataviewStatusobject`](#deesdataviewstatusobject), [`DeesPdf`](#deespdf), [`DeesStatsGrid`](#deesstatsgrid), [`DeesPagination`](#deespagination) |
 | **Visualization** | [`DeesChartArea`](#deeschartarea), [`DeesChartLog`](#deeschartlog) |
 | **Dialogs & Overlays** | [`DeesModal`](#deesmodal), [`DeesContextmenu`](#deescontextmenu), [`DeesSpeechbubble`](#deesspeechbubble), [`DeesWindowlayer`](#deeswindowlayer) |
@@ -615,23 +615,23 @@ Submit button component specifically designed for `DeesForm`.

 ### Layout Components

-#### `DeesAppuiBase`
+#### `DeesAppui`
 A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, and view management.

-> **Full API Documentation**: See [ts_web/elements/00group-appui/dees-appui-base/readme.md](./ts_web/elements/00group-appui/dees-appui-base/readme.md) for complete documentation including all programmatic APIs, view lifecycle hooks, and TypeScript interfaces.
+> **Full API Documentation**: See [ts_web/elements/00group-appui/dees-appui/readme.md](./ts_web/elements/00group-appui/dees-appui/readme.md) for complete documentation including all programmatic APIs, view lifecycle hooks, and TypeScript interfaces.

 **Quick Start:**

 ```typescript
 import { html, DeesElement, customElement } from '@design.estate/dees-element';
-import { DeesAppuiBase } from '@design.estate/dees-catalog';
+import { DeesAppui } from '@design.estate/dees-catalog';

@customElement('my-app')
 class MyApp extends DeesElement {
-  private appui: DeesAppuiBase;
+  private appui: DeesAppui;

  async firstUpdated() {
-    this.appui = this.shadowRoot.querySelector('dees-appui-base');
+    this.appui = this.shadowRoot.querySelector('dees-appui');

    // Configure with views and menu
    this.appui.configure({
@@ -648,7 +648,7 @@ class MyApp extends DeesElement {
  }

  render() {
-    return html`<dees-appui-base></dees-appui-base>`;
+    return html`<dees-appui></dees-appui>`;
  }
 }
 ```
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-catalog',
-  version: '3.27.1',
+  version: '3.28.0',
  description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }
--- a/ts_web/elements/00group-appui/dees-appui-base/index.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/index.ts
@@ -1,2 +0,0 @@
-export * from './dees-appui-base.js';
-export * from './view.registry.js';
--- a/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.demo.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.demo.ts
@@ -1,5 +1,5 @@
 import { html, css, DeesElement, customElement, state } from '@design.estate/dees-element';
-import type { DeesAppuiBase } from './dees-appui-base.js';
+import type { DeesAppui } from './dees-appui.js';
 import type { IAppConfig, IViewActivationContext } from '../../interfaces/appconfig.js';
 import '@design.estate/dees-wcctools/demotools';

@@ -197,7 +197,7 @@ class DemoSettingsView extends DeesElement {
  @state()
  accessor hasChanges: boolean = false;

-  private appui: DeesAppuiBase;
+  private appui: DeesAppui;

  onActivate(context: IViewActivationContext) {
    this.appui = context.appui as any;
@@ -619,7 +619,7 @@ export const demoFunc = () => {
  containerElement.className = 'demo-container';
  containerElement.style.cssText = 'position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;';

-  const appuiElement = document.createElement('dees-appui-base') as DeesAppuiBase;
+  const appuiElement = document.createElement('dees-appui') as DeesAppui;
  containerElement.appendChild(appuiElement);

  // Initialize after element is connected
--- a/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts
@@ -15,7 +15,7 @@ import type { DeesAppuiMainmenu } from '../dees-appui-mainmenu/dees-appui-mainme
 import type { DeesAppuiSecondarymenu } from '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
 import type { DeesAppuiMaincontent } from '../dees-appui-maincontent/dees-appui-maincontent.js';
 import type { DeesAppuiActivitylog } from '../dees-appui-activitylog/dees-appui-activitylog.js';
-import { demoFunc } from './dees-appui-base.demo.js';
+import { demoFunc } from './dees-appui.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';

 // View registry for managing views
@@ -30,12 +30,12 @@ import '../dees-appui-activitylog/dees-appui-activitylog.js';

 declare global {
  interface HTMLElementTagNameMap {
-    'dees-appui-base': DeesAppuiBase;
+    'dees-appui': DeesAppui;
  }
 }

-@customElement('dees-appui-base')
-export class DeesAppuiBase extends DeesElement {
+@customElement('dees-appui')
+export class DeesAppui extends DeesElement {
  public static demo = demoFunc;

  // ==========================================
@@ -278,7 +278,7 @@ export class DeesAppuiBase extends DeesElement {
    this.activitylogElement = this.shadowRoot!.querySelector('dees-appui-activitylog') as DeesAppuiActivitylog;

    // Set appui reference in view registry for lifecycle context
-    this.viewRegistry.setAppuiRef(this as unknown as interfaces.TDeesAppuiBase);
+    this.viewRegistry.setAppuiRef(this as unknown as interfaces.TDeesAppui);
  }

  async disconnectedCallback() {
--- a/ts_web/elements/00group-appui/dees-appui/index.ts
+++ b/ts_web/elements/00group-appui/dees-appui/index.ts
@@ -0,0 +1,2 @@
+export * from './dees-appui.js';
+export * from './view.registry.js';
--- a/ts_web/elements/00group-appui/dees-appui-base/readme.md
+++ b/ts_web/elements/00group-appui/dees-appui-base/readme.md
@@ -1,4 +1,4 @@
-# DeesAppuiBase
+# DeesAppui

 A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, and view management.

@@ -6,14 +6,14 @@ A comprehensive application shell component providing a complete UI framework wi

 ```typescript
 import { html, DeesElement, customElement } from '@design.estate/dees-element';
-import { DeesAppuiBase } from '@design.estate/dees-catalog';
+import { DeesAppui } from '@design.estate/dees-catalog';

@customElement('my-app')
 class MyApp extends DeesElement {
-  private appui: DeesAppuiBase;
+  private appui: DeesAppui;

  async firstUpdated() {
-    this.appui = this.shadowRoot.querySelector('dees-appui-base');
+    this.appui = this.shadowRoot.querySelector('dees-appui');

    // Configure with views and menu
    this.appui.configure({
@@ -30,7 +30,7 @@ class MyApp extends DeesElement {
  }

  render() {
-    return html`<dees-appui-base></dees-appui-base>`;
+    return html`<dees-appui></dees-appui>`;
  }
 }
 ```
@@ -329,7 +329,7 @@ class MySettingsView extends DeesElement implements IViewLifecycle {

 ```typescript
 interface IViewActivationContext {
-  appui: DeesAppuiBase;           // Reference to the app shell
+  appui: DeesAppui;           // Reference to the app shell
  viewId: string;                  // The view ID being activated
  params?: Record<string, string>; // Route parameters
 }
@@ -421,14 +421,14 @@ appui.viewChanged$.subscribe((event) => {

 ```typescript
 import { html, DeesElement, customElement } from '@design.estate/dees-element';
-import { DeesAppuiBase, IViewActivationContext } from '@design.estate/dees-catalog';
+import { DeesAppui, IViewActivationContext } from '@design.estate/dees-catalog';

@customElement('my-app')
 class MyApp extends DeesElement {
-  private appui: DeesAppuiBase;
+  private appui: DeesAppui;

  async firstUpdated() {
-    this.appui = this.shadowRoot.querySelector('dees-appui-base');
+    this.appui = this.shadowRoot.querySelector('dees-appui');

    this.appui.configure({
      branding: {
@@ -494,14 +494,14 @@ class MyApp extends DeesElement {
  }

  render() {
-    return html`<dees-appui-base></dees-appui-base>`;
+    return html`<dees-appui></dees-appui>`;
  }
 }

 // View with lifecycle hooks
@customElement('crm-settings')
 class CrmSettings extends DeesElement {
-  private appui: DeesAppuiBase;
+  private appui: DeesAppui;

  onActivate(context: IViewActivationContext) {
    this.appui = context.appui;
--- a/ts_web/elements/00group-appui/dees-appui-base/view.registry.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/view.registry.ts
@@ -3,7 +3,7 @@ import type {
  IViewDefinition,
  IViewActivationContext,
  IViewLifecycle,
-  TDeesAppuiBase
+  TDeesAppui
 } from '../../interfaces/appconfig.js';

 /**
@@ -18,12 +18,12 @@ export class ViewRegistry {
  private views: Map<string, IViewDefinition> = new Map();
  private instances: Map<string, HTMLElement> = new Map();
  private currentViewId: string | null = null;
-  private appui: TDeesAppuiBase | null = null;
+  private appui: TDeesAppui | null = null;

  /**
   * Set the appui reference for view activation context
   */
-  public setAppuiRef(appui: TDeesAppuiBase): void {
+  public setAppuiRef(appui: TDeesAppui): void {
    this.appui = appui;
  }

--- a/ts_web/elements/00group-appui/index.ts
+++ b/ts_web/elements/00group-appui/index.ts
@@ -1,7 +1,7 @@
 // App UI Components
 export * from './dees-appui-activitylog/index.js';
 export * from './dees-appui-appbar/index.js';
-export * from './dees-appui-base/index.js';
+export * from './dees-appui/index.js';
 export * from './dees-appui-maincontent/index.js';
 export * from './dees-appui-mainmenu/index.js';
 export * from './dees-appui-secondarymenu/index.js';
--- a/ts_web/elements/00group-runtime/environments/WebContainerEnvironment.ts
+++ b/ts_web/elements/00group-runtime/environments/WebContainerEnvironment.ts
@@ -1,4 +1,4 @@
-import * as webcontainer from '@webcontainer/api';
+import * as webcontainer from '@tempfix/webcontainer__api';
 import type { IExecutionEnvironment, IFileEntry, IFileWatcher, IProcessHandle } from '../interfaces/IExecutionEnvironment.js';

 /**
--- a/ts_web/elements/00group-workspace/dees-workspace/dees-workspace.ts
+++ b/ts_web/elements/00group-workspace/dees-workspace/dees-workspace.ts
@@ -12,7 +12,7 @@ import * as domtools from '@design.estate/dees-domtools';
 import { themeDefaultStyles } from '../../00theme.js';
 import type { IExecutionEnvironment, IFileWatcher } from '../../00group-runtime/index.js';
 import { WebContainerEnvironment } from '../../00group-runtime/index.js';
-import type { FileSystemTree } from '@webcontainer/api';
+import type { FileSystemTree } from '@tempfix/webcontainer__api';
 import '../dees-workspace-monaco/dees-workspace-monaco.js';
 import '../dees-workspace-filetree/dees-workspace-filetree.js';
 import { DeesWorkspaceFiletree } from '../dees-workspace-filetree/dees-workspace-filetree.js';
@@ -182,7 +182,7 @@ testSmartPromise();
      await env.mount(fileTree);
    })();

-    // Create container element for proper 100% height like dees-appui-base
+    // Create container element for proper 100% height like dees-appui
    const containerElement = document.createElement('div');
    containerElement.style.cssText = 'position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;';

--- a/ts_web/elements/interfaces/appconfig.ts
+++ b/ts_web/elements/interfaces/appconfig.ts
@@ -4,7 +4,7 @@ import type { IMenuItem } from './tab.js';
 import type { IMenuGroup } from './menugroup.js';

 // Forward declaration for circular reference
-export type TDeesAppuiBase = HTMLElement & {
+export type TDeesAppui = HTMLElement & {
  setAppBarMenus: (menus: IAppBarMenuItem[]) => void;
  updateAppBarMenu: (name: string, update: Partial<IAppBarMenuItem>) => void;
  setBreadcrumbs: (breadcrumbs: string | string[]) => void;
@@ -92,8 +92,8 @@ export interface IActivityLogAPI {
 * View activation context passed to onActivate lifecycle hook
 */
 export interface IViewActivationContext {
-  /** Reference to the DeesAppuiBase instance */
-  appui: TDeesAppuiBase;
+  /** Reference to the DeesAppui instance */
+  appui: TDeesAppui;
  /** The view ID being activated */
  viewId: string;
  /** Route parameters if any */
@@ -208,7 +208,7 @@ export interface IActivityLogConfig {
 }

 /**
- * Main unified configuration interface for dees-appui-base
+ * Main unified configuration interface for dees-appui
 */
 export interface IAppConfig {
  /** Application branding */
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,7 @@
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "verbatimModuleSyntax": true,
-    "skipLibCheck": true
+    "skipLibCheck": false
  },
  "exclude": [
    "dist_*/**/*.d.ts"