@tenorlab/react-dashboard 1.5.45 → 1.6.1

package/LICENSE

@@ -1,43 +1,21 @@
-TENORLAB DASHBOARD FRAMEWORK LICENSE
-Version 1.0.0
-
-Copyright (c) 2026 Tenorlab. All rights reserved.
-
-1. DUAL-LICENSE MODEL
-This Software is licensed under a dual-license model. By accessing or using the 
-source code, you agree to be bound by one of the following licenses:
-
-(a) NON-COMMERCIAL USE: If your use is Non-Commercial (as defined by the 
-Polyform Non-Commercial License 1.0.0), your use is governed by that license. 
-A copy can be found at: https://polyformproject.org/licenses/non-commercial/1.0.0/
-
-(b) COMMERCIAL USE: If your use is Commercial, you must obtain a valid 
-Tenorlab Commercial License. Commercial use includes, but is not limited to: 
-building for a client, use within a for-profit entity (internal or external), 
-or use in any revenue-generating product. Licenses are available at:
-https://www.tenorlab.com
-
-2. REDISTRIBUTION RESTRICTIONS
-Notwithstanding the terms of any sub-license mentioned above, the 
-redistribution of the Software's source code—whether in its original form 
-or as a modified derivative work—is STRICTLY PROHIBITED. 
-
-You may not include this Software, or any portion thereof, in any:
-- Software Development Kit (SDK)
-- UI Component Library or Framework
-- Website/Dashboard Starter Template or Boilerplate
-- "Dashboard Builder" or similar tool intended for use by other developers.
-
-3. DERIVATIVE WORKS & MODIFICATIONS
-You are permitted to modify and extend the Software for the sole purpose of 
-building a specific "End Product" application. Modifying the code does not 
-transfer ownership of the underlying logic, nor does it grant permission 
-to bypass the Commercial License requirement or the Redistribution Restrictions.
-
-4. TERMINATION
-Failure to comply with these terms automatically terminates your right to 
-use the Software. Tenorlab reserves all rights not expressly granted herein.
-
-5. CONTACT & INQUIRIES
-For licensing questions or professional inquiries, please visit:
-https://www.tenorlab.com
+MIT License
+
+Copyright (c) 2026 tenorlab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,39 +1,39 @@
 # @tenorlab/react-dashboard
 
-[![License: Polyform-NC-1.0.0](https://img.shields.io/badge/License-Polyform--NC--1.0.0-blue.svg)](https://polyformproject.org/licenses/non-commercial/1.0.0/)
-[![License: Tenorlab-Commercial](https://img.shields.io/badge/License-Tenorlab--Commercial-gold.svg)](https://payhip.com/b/gPBpo)
-[![Redistribution: Prohibited](https://img.shields.io/badge/Redistribution-Prohibited-red.svg)](#-distribution-restrictions)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
+[![Template: Pro](https://img.shields.io/badge/Template-Pro--Available-gold.svg)](https://www.tenorlab.com)
+[![Framework: React](https://img.shields.io/badge/Framework-React-blue.svg)](https://react.dev/)
 
-Foundation components for creating user-configurable, high-performance dashboards in React. Built on top of **@tenorlab/dashboard-core**.
+Foundation components for creating user-configurable, high-performance dashboards in React.
 
-## 🏗 Relationship to Core
+## Relationship to Core
 
 This package extends **@tenorlab/dashboard-core**. It provides the React implementation of the core logic, including specialized hooks, state management via **Zustand**, and a suite of UI components.
 
 > **Note**: This package re-exports all types and utilities from `@tenorlab/dashboard-core`. You do not need to install the core package separately.
 
 
-## Demos
--- [React Demo](https://react.tenorlab.com) (built with @tenorlab/react-dashboard)
--- [Vue Demo](https://vue.tenorlab.com) (built with @tenorlab/vue-dashboard)
+## Pro Template Demos
+  - [React Demo](https://react.tenorlab.com) (built with @tenorlab/react-dashboard)
+  - [Vue Demo](https://vue.tenorlab.com) (built with @tenorlab/vue-dashboard)
+  - [Nuxt Demo](https://nuxt.tenorlab.com) (built with @tenorlab/vue-dashboard)
 
 
 ## ✨ Features
 
-- **Type-Safe:** Deep integration with TypeScript 5.8+ for full IDE support.
-- **State Management:** Built-in `useDashboardStore` and `useDashboardUndoService`.
-- **User Configurable:** Ready-to-use components for adding, removing, and dragging widgets.
-- **Themeable:** Native support for CSS Variables and Tailwind CSS.
-- **Vite Optimized:** Full ESM support and tree-shakeable.
+  - **Type-Safe:** Deep integration with TypeScript 5.8+ for full IDE support.
+  - **State Management:** Built-in `useDashboardStore` and `useDashboardUndoService`.
+  - **User Configurable:** Ready-to-use components for adding, removing, and dragging widgets.
+  - **Themeable:** Native support for CSS Variables and Tailwind CSS.
+  - **Vite Optimized:** Full ESM support and tree-shakeable.
 
 ## 🚀 Quick Start
 
 ### Installation
 
-Bash
+### Installation
 
-```
-# with npm
+```bash
 npm i @tenorlab/react-dashboard
 
 # with pnpm
@@ -44,9 +44,7 @@ pnpm add @tenorlab/react-dashboard
 
 Import the base styles in your entry file (e.g., `main.tsx`):
 
-TypeScript
-
-```
+```TypeScript
 import '@tenorlab/react-dashboard/styles.css'
 ```
 
@@ -58,62 +56,57 @@ import '@tenorlab/react-dashboard/styles.css'
 
 Widgets should be organized by their loading strategy.
 
-- **Bundled Widgets**: Place in `src/bundled-widgets/` (loaded immediately).
-- **Async Widgets**: Place in `src/async-widgets/` (lazy-loaded).
+  - **Bundled Widgets**: Place in `src/bundled-widgets/` (loaded immediately).
+  - **Async Widgets**: Place in `src/async-widgets/` (lazy-loaded).
+
+*(NOTE: These directory names are suggestions; you can use different names, or put the widgets under src/components if you prefer)*
+
 
 Each widget requires a sub-directory using the `widget-name-here` convention.
 
 #### Example: `WidgetTotalOrders`
 
-TypeScript
+Directory name `widget-total-orders`, files:
+  - WidgetTotalOrders.tsx
+  - meta.ts
+  - index.ts
 
-```
-// file: src/bundled-widgets/widget-total-orders/WidgetTotalOrders.tsx
-import {
-  IDashboardWidget,
-  IDashboardWidgetProps,
-  TDashboardWidgetKey,
-  DashboardWidgetBase, 
-  WrapperColumnContent
-} from '@tenorlab/react-dashboard'
 
-export function WidgetTotalOrders(props: IDashboardWidgetProps): IDashboardWidget {
+File: src/bundled-widgets/widget-total-orders/WidgetTotalOrders.tsx:
+```react
+import { IDashboardWidgetProps } from '@tenorlab/react-dashboard'
+import { DashboardWidgetBase } from '@tenorlab/react-dashboard'
+
+export function WidgetTotalOrders(props: IDashboardWidgetProps) {
   return (
-    <DashboardWidgetBase
-      widgetKey="WidgetTotalOrders"
-      title="Total Orders"
-      {...props}
-    >
-      <WrapperColumnContent>
+    <DashboardWidgetBase {...props}>
+      <div className="w-full flex flex-col gap-2 items-end">
         <div className="dashboard-number number-xl text-primary">1,250</div>
         <div className="text-sm">Orders this month</div>
-      </WrapperColumnContent>
+      </div>
     </DashboardWidgetBase>
   )
 }
 ```
 
-TypeScript
-
-```
-// file: src/bundled-widgets/widget-total-orders/meta.ts
+File: src/bundled-widgets/widget-total-orders/meta.ts:
+```typescript
 import type { TWidgetMetaInfo } from '@tenorlab/react-dashboard'
-import { MonitorIcon as ComponentIcon } from '@tenorlab/react-dashboard'
+import { ReceiptIcon as ComponentIcon } from 'lucide-react'
 
+// Define the metadata object for the plugin
 export const WidgetTotalOrdersMeta: TWidgetMetaInfo = {
   name: 'Total Orders',
   categories: ['Widget'],
   icon: ComponentIcon,
   noDuplicatedWidgets: true,
   description: 'Displays information about your total orders.',
-  externalDependencies: []
+  externalDependencies: [],
 }
 ```
 
-TypeScript
-
-```
-// file: src/bundled-widgets/widget-total-orders/index.ts
+File: src/bundled-widgets/widget-total-orders/index.ts:
+```typescript
 import { WidgetTotalOrders } from './WidgetTotalOrders'
 export default WidgetTotalOrders
 ```
@@ -122,39 +115,44 @@ export default WidgetTotalOrders
 
 Create `src/widgets-catalog.tsx` in your project root. This file manages how widgets are discovered (locally via Vite's `import.meta.glob` or remotely via CDN).
 
-TypeScript
+File: src/widgets-catalog.ts:
+```typescript
+import { WidgetContainerColumn, WidgetContainerLarge, WidgetContainerRow } from '@tenorlab/react-dashboard'
+import {
+  createStaticEntry,
+  localWidgetDiscovery,
+  remoteWidgetDiscovery,
+} from '@tenorlab/react-dashboard/core'
 
-```
-// file: src/widgets-catalog.tsx
+// other static widgets
 import {
+  WidgetSmallCardSample,
+} from './other-widgets/other-widgets'
+import { otherWidgetsMetaMap } from './other-widgets/other-widgets-meta'
+import type {
   IDynamicWidgetCatalogEntry,
   TDashboardWidgetCatalog,
   TWidgetMetaInfoBase,
-  WidgetContainerColumn,
-  WidgetContainerLarge,
-  WidgetContainerRow,
   TWidgetFactory,
 } from '@tenorlab/react-dashboard'
-import {
-  createStaticEntry,
-  localWidgetDiscovery,
-  remoteWidgetDiscovery,
-} from '@tenorlab/react-dashboard/core'
-
-import { WidgetRecentPaymentInfo } from './other-widgets/WidgetRecentPaymentInfo'
-//import { getWidgetsManifestUrl } from '@/utils'
 
 const bundledWidgetsSrcPath = '/src/bundled-widgets'
 const asyncWidgetsSrcPath = '/src/async-widgets'
 
+// Use Vite's Glob Import
+// This creates an object where the keys are file paths, and the values are the TWidgetFactory functions.
+// We target the 'index.ts' files within the widgets subdirectories.
 type TGlobModuleMap = Record<string, TWidgetFactory>
 
+// Eagerly loaded (Non-lazy / Bundled):
 const bundledWidgetModules = import.meta.glob('/src/bundled-widgets/*/index.ts', {
-  eager: true
+  eager: true /* we load this immediately */,
 }) as TGlobModuleMap
 
+// Lazy loaded (Code-split / Plugins):
 const asyncWidgetModules = import.meta.glob('/src/async-widgets/*/index.ts') as TGlobModuleMap
 
+// Meta modules (Always eager so titles/icons are available immediately)
 const allMetaModules = import.meta.glob('/src/**/widget-*/meta.ts', {
   eager: true,
 }) as Record<string, Record<string, TWidgetMetaInfoBase>>
@@ -162,33 +160,61 @@ const allMetaModules = import.meta.glob('/src/**/widget-*/meta.ts', {
 const hasPermission = (_user_: any, _permission: string) => true
 
 export const getWidgetCatalog = async (user: any | null): Promise<TDashboardWidgetCatalog> => {
+  // A. Register Static Core Components
   const catalogMapEntries: [string, IDynamicWidgetCatalogEntry][] = [
-    createStaticEntry('WidgetContainer', WidgetContainerColumn),
-    createStaticEntry('WidgetContainerRow', WidgetContainerRow),
-    createStaticEntry('WidgetContainerLarge', WidgetContainerLarge),
+    // everyone has access to the containers:
+    createStaticEntry('WidgetContainer', WidgetContainerColumn, otherWidgetsMetaMap['WidgetContainer']),
+    createStaticEntry('WidgetContainerRow', WidgetContainerRow, otherWidgetsMetaMap['WidgetContainerRow']),
+    createStaticEntry(
+      'WidgetContainerLarge',
+      WidgetContainerLarge,
+      otherWidgetsMetaMap['WidgetContainerLarge'],
+    ),
   ]
 
+  // B. Optional: Register Business Static Widgets manually:
+  // we could filter further by permissions and user type if needed
   if (hasPermission(user, 'some-permission')) {
-    catalogMapEntries.push(createStaticEntry('WidgetRecentPaymentInfo', WidgetRecentPaymentInfo))
+    // i.e.:
+    // catalogMapEntries.push(
+    //   createStaticEntry(
+    //     'WidgetThatRequiresPermissions',
+    //     WidgetThatRequiresPermissions,
+    //     otherWidgetsMetaMap['WidgetThatRequiresPermissions'],
+    //   ),
+    // )
+    catalogMapEntries.push(
+      createStaticEntry(
+        'WidgetSmallCardSample',
+        WidgetSmallCardSample,
+        otherWidgetsMetaMap['WidgetSmallCardSample'],
+      ),
+    )
   }
 
-  // add bundled widgets (non-lazy)
-  catalogMapEntries.push(...localWidgetDiscovery(
-    bundledWidgetsSrcPath,
-    bundledWidgetModules,
-    allMetaModules,
-    false, // lazy: false
-  ))
-
-  // add async-widgets (lazy)
-  catalogMapEntries.push(...localWidgetDiscovery(
-    asyncWidgetsSrcPath,
-    asyncWidgetModules,
-    allMetaModules,
-    true, // lazy: true
-  ))
-
-  // Optional: Remote discovery of -pre-built widgets hosted on a CDN
+  // C. Register widgets automatically with the localWidgetDiscovery helper:
+  // (bundled widgets are included always, non-lazy)
+  catalogMapEntries.push(
+    ...localWidgetDiscovery(
+      bundledWidgetsSrcPath,
+      bundledWidgetModules,
+      allMetaModules,
+      false, // lazy: false
+    )
+  )
+
+  // D. Register "lazy" widgets automatically with the localWidgetDiscovery helper:
+  // (async widgets are not incuded, they are lazy loaded at run time)
+  catalogMapEntries.push(
+    ...localWidgetDiscovery(
+      asyncWidgetsSrcPath,
+      asyncWidgetModules,
+      allMetaModules,
+      true, // lazy: true
+    )
+  )
+
+  // E. Optional: Remote discovery of -pre-built widgets hosted on a CDN (requires advance importMaps setup and other configuration)
   /*const manifestUrl = getWidgetsManifestUrl()
   if (manifestUrl.length > 0) {
     const remoteResponse = await remoteWidgetDiscovery(manifestUrl)
@@ -205,26 +231,26 @@ export const getWidgetCatalog = async (user: any | null): Promise<TDashboardWidg
 
 Use a `dashboard-defaults.ts` file to define initial layouts based on user roles.
 
-TypeScript
-
-```
-// file: src/dashboard-defaults.ts
-import {
+File: src/dashboard-defaults.ts:
+```typescript
+import { blankDashboardConfig, cssSettingsCatalog } from '@tenorlab/react-dashboard/core'
+import { getWidgetCatalog } from './widgets-catalog'
+import type {
   TDashboardWidgetKey,
   IChildWidgetConfigEntry,
   IDashboardConfig,
   TDashboardWidgetCatalog,
 } from '@tenorlab/react-dashboard'
-import { blankDashboardConfig, cssSettingsCatalog } from '@tenorlab/react-dashboard/core'
-import { getWidgetCatalog } from './widgets-catalog'
 
+// reserved identifier to be used only for the default dashboard
 const DEFAULT_DASHBOARD_ID = 'default' as const
 const DEFAULT_DASHBOARD_NAME = 'Default' as const
 
-const getDefaultDashboardForCustomerUser = (
+// default dashboard config for Regular user type
+const getDefaultDashboardForRegularUser = (
   user: any,
   clientAppKey: string,
-  availableWidgetKeys: TDashboardWidgetKey[]
+  availableWidgetKeys: TDashboardWidgetKey[],
 ): IDashboardConfig => {
   const userID = user.userID || 0
   return {
@@ -233,10 +259,21 @@ const getDefaultDashboardForCustomerUser = (
     dashboardId: DEFAULT_DASHBOARD_ID,
     dashboardName: DEFAULT_DASHBOARD_NAME,
     zoomScale: 1,
-    responsiveGrid: false,
-    widgets: ['WidgetContainer_container1'],
+    responsiveGrid: true,
+    widgets: [
+      'WidgetContainer_container1', // will contain other widgets specified in the childWidgetsConfig secitno below
+      'WidgetBarGradients',
+      ],
     childWidgetsConfig: [
-      { parentWidgetKey: 'WidgetContainer_container1', widgetKey: 'WidgetRecentPaymentInfo' }
+      // two widgets go into container1:
+      { 
+        parentWidgetKey: 'WidgetContainer_container1', 
+        widgetKey: 'WidgetTotalOrders' 
+      },
+      { 
+        parentWidgetKey: 'WidgetContainer_container1', 
+        widgetKey: 'WidgetTotalOrders' 
+      }
     ],
     cssSettings: [...cssSettingsCatalog]
   }
@@ -251,10 +288,16 @@ export const getDashboardDefaults = async (
 }> => {
   const widgetsCatalog = await getWidgetCatalog(user)
 
-  if (!user) return { dashboardConfig: blankDashboardConfig, widgetsCatalog }
+  if (!user) {
+    return {
+      dashboardConfig: blankDashboardConfig,
+      widgetsCatalog,
+    }
+  }
 
   return {
-    dashboardConfig: getDefaultDashboardForCustomerUser(user, clientAppKey, [...widgetsCatalog.keys()]),
+    // Optional, you could use different routines depending on user role:
+    dashboardConfig: getDefaultDashboardForRegularUser(user, clientAppKey, [...widgetsCatalog.keys()]),
     widgetsCatalog
   }
 }
@@ -264,32 +307,33 @@ export const getDashboardDefaults = async (
 
 Use this for a simplified, non-editable view of the dashboard.
 
-TypeScript
-
-```
-// file: src/views/DashboardReadonly.tsx
+File: src/views/DashboardReadonly.tsx:
+```react
 import { useEffect, useState } from 'react'
-import {
-  IDashboardConfig,
-  TDashboardWidgetCatalog,
-  useDashboardStore,
-  DynamicWidgetLoader, 
-  DashboardGrid
-} from '@tenorlab/react-dashboard'
+import { useDashboardStore } from '@tenorlab/react-dashboard'
 import {
   blankDashboardConfig,
   cssVarsUtils,
   useDashboardStorageService,
 } from '@tenorlab/react-dashboard/core'
+import { DynamicWidgetLoader, DashboardGrid } from '@tenorlab/react-dashboard'
 import { getDashboardDefaults } from '../dashboard-defaults'
+import type { IDashboardConfig, TDashboardWidgetCatalog } from '@tenorlab/react-dashboard'
+
 
 export function DashboardReadonly() {
   const clientAppKey = 'myclientapp'
   const user = { id: 1234 }
+  const userId = user.id
   const dashboardStore = useDashboardStore()
   const dashboardStorageService = useDashboardStorageService()
+
   const { isLoading, currentDashboardConfig } = dashboardStore
+  const getTargetContainerKey = () => dashboardStore.targetContainerKey
 
+  // default dashboard config
+  const [_defaultDashboardConfig, setDefaultDashboardConfig] =
+    useState<IDashboardConfig>(blankDashboardConfig)
   const [widgetsCatalog, setWidgetsCatalog] = useState<TDashboardWidgetCatalog>(new Map())
 
   useEffect(() => {
@@ -305,9 +349,11 @@ export function DashboardReadonly() {
         )
 
         dashboardStore.setAllDashboardConfigs(savedConfigs)
+        // show default dashboard or first dashboard
         const activeConfig = savedConfigs[0] || defaults.dashboardConfig
         dashboardStore.setCurrentDashboardConfig(activeConfig)
         setWidgetsCatalog(defaults.widgetsCatalog)
+        setDefaultDashboardConfig(defaults.dashboardConfig)
         cssVarsUtils.restoreCssVarsFromSettings(activeConfig.cssSettings || [])
       } finally {
         dashboardStore.setIsLoading(false)
@@ -318,7 +364,8 @@ export function DashboardReadonly() {
 
   return (
     <div className="relative flex flex-col h-full">
-      {isLoading ? <div>Loading</div> : (
+      {isLoading && <div>Loading</div>}
+      {!isLoading && (
         <DashboardGrid
           isEditing={false}
           zoomScale={Number(currentDashboardConfig.zoomScale)}
@@ -328,11 +375,16 @@ export function DashboardReadonly() {
             <DynamicWidgetLoader
               key={`${widgetKey}_${index}`}
               widgetKey={widgetKey}
+              parentWidgetKey={undefined}
+              targetContainerKey={getTargetContainerKey()}
               index={index}
               maxIndex={currentDashboardConfig.widgets.length - 1}
               childWidgetsConfig={currentDashboardConfig.childWidgetsConfig}
               widgetCatalog={widgetsCatalog as any}
               isEditing={false}
+              onRemoveClick={() => {}}
+              onMoveClick={() => {}}
+              selectContainer={() => {}}
             />
           ))}
         </DashboardGrid>
@@ -343,11 +395,9 @@ export function DashboardReadonly() {
 ```
 
 
-
 #### 5. Full Editable Dashboard
 
-For a complete example including **Undo/Redo**, **Zooming**, **Catalog Flyouts**, and **Multiple Dashboards**, please refer to the [Full Implementation Example](https://github.com/tenorlab/react-dashboard-sample/blob/main/views/DashboardFullExample.tsx).
-
+For editable dashboard examples, including **Undo/Redo**, **Zooming**, **Catalog Flyouts**, and **Multiple Dashboards**, please refer to the [Pro Template](https://www.tenorlab.com).
 
 
 ------
@@ -356,28 +406,35 @@ For a complete example including **Undo/Redo**, **Zooming**, **Catalog Flyouts**
 
 ### UI Components
 
-- **`DashboardGrid`**: The main layout engine for positioning widgets.
-- **`WidgetContainer`**: Wrapper providing common widget UI (headers, actions, loading states).
-- **`WidgetsCatalogFlyout`**: A slide-out panel for users to browse and add new widgets.
-- **`DynamicWidgetLoader`**: Lazy-loading utility for high-performance dashboards.
+- **`DashboardGrid`**: The main dashboard layout that position widgets within a responsive grid.
+- **`WidgetContainer`**: A special "widget" that is a container for other widgets.
+- **`WidgetsCatalogFlyout`**: A slide-out panel for users to browse and add new widgets on editable dashboards.
+- **`DynamicWidgetLoader`**: The core lazy-loading widget loader that renders the widgets within the grid.
 
 ### Hooks & State
 
-- **`useDashboardStore`**: Access the underlying Zustand store to manage widget state, layout, and configuration.
-- **`useDashboardUndoService`**: Provides `undo` and `redo` functionality for user layout changes.
+- **`useDashboardStore`**: Access the underlying reactive store to manage widget state, layout, and configuration.
+- **`useDashboardUndoService`**: Provides `undo` and `redo` functionality for user layout changes in editable dashboard (optional).
 
 
 ------
 
 
 ## Links
+
+### Open source core packages
  - [@tenorlab/react-dashboard](https://www.npmjs.com/package/@tenorlab/react-dashboard): React-specific components
  - [@tenorlab/vue-dashboard](https://www.npmjs.com/package/@tenorlab/vue-dashboard): Vue-specific components
- - [Official Website](https://www.tenorlab.com)
+
+### Pro Template Demos
  - [React Demo](https://react.tenorlab.com) (built with @tenorlab/react-dashboard)
  - [Vue Demo](https://vue.tenorlab.com) (built with @tenorlab/vue-dashboard)
+ - [Nuxt Demo](https://nuxt.tenorlab.com) (built with @tenorlab/vue-dashboard)
+
+### Others
  - [Buy a License](https://payhip.com/b/gPBpo)
  - [Follow on BlueSky](https://bsky.app/profile/tenorlab.bsky.social)
+ - [Official Website](https://www.tenorlab.com)
 
 
 ------
@@ -385,21 +442,15 @@ For a complete example including **Undo/Redo**, **Zooming**, **Catalog Flyouts**
 
 ## ⚖️ Licensing & Usage
 
-This project is **Source-Available**. You are free to view, learn from, and experiment with the source code. However, use in professional or revenue-generating settings requires a license.
+**@tenorlab/vue-dashboard** is [MIT licensed](https://opensource.org/licenses/MIT). 
 
-### 🏠 Non-Commercial Use (Free)
-If you are a student, hobbyist, or working on a non-profit open-source project, you may use this library for free under the terms of the **Polyform Non-Commercial 1.0.0** license.
+It provides the foundational components and logic for building dashboards. You are free to use it in any project, personal or commercial.
 
-### 💼 Commercial Use (Requires License)
-A **Tenorlab Commercial License** is required if you are:
-* Building a dashboard for company internal or external use, including all company websites and applications.
-* Building a dashboard for a paying client.
-* Using the library within a for-profit company or startup.
-* Including the library in a product that is sold or requires a subscription.
+## ⚡️ Go Pro and Save Time: Tenorlab App Template
 
-**Purchase a Commercial License here:** [https://www.tenorlab.com](https://www.tenorlab.com)
+A commercial license for a full-blown professional app template is available for purchase [**here**](https://www.tenorlab.com) and comes with:
 
-### 🚫 Distribution Restrictions
-To protect the integrity of this framework, **redistribution of the source code is strictly prohibited**. 
-* You **may** use and modify the code to build an "End Product" (e.g., a dashboard for a specific app).
-* You **may NOT** redistribute the source code (original or modified) as a standalone library, UI kit, starter template, or "dashboard builder" for other developers to use.
+* **Full Application Shell:** A clean, optimized Vite + TypeScript project structure (with either React, Vue or Nuxt).
+* **Dashboard Management:** Production-ready logic for creating, listing, renaming, and deleting multiple user-defined dashboards.
+* **Implementation Examples:** Best patterns for both "Read-Only" (Analyst view) and "User-Editable" (Admin view) dashboard modes, a dynamic dashboard menu, etc.
+* **Tenorlab Theme Engine:** A sophisticated Tailwind-based system supporting multiple custom themes (not just Light/Dark mode).

package/dist/react-dashboard.es.js

@@ -1,5 +1,5 @@
 import { create as mt } from "zustand";
-import { dashboardStoreUtils as he, blankDashboardConfig as Ce, getDistinctCssClasses as G, ensureZoomScaleIsWithinRange as pt, parseContainerTitle as nt, getWidgetMetaFromCatalog as yt, dashboardSettingsUtils as bt } from "./core.es.js";
+import { blankDashboardConfig as Ce, dashboardStoreUtils as he, getDistinctCssClasses as G, ensureZoomScaleIsWithinRange as pt, parseContainerTitle as nt, getWidgetMetaFromCatalog as yt, dashboardSettingsUtils as bt } from "./core.es.js";
 import ve, { useState as ie, useCallback as ce, useMemo as ot, forwardRef as se, useRef as vt, Suspense as xt, useEffect as Ct } from "react";
 import { jsxs as I, jsx as t } from "react/jsx-runtime";
 import at from "react-dom";

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@tenorlab/react-dashboard",
-  "version": "1.5.45",
+  "version": "1.6.1",
   "description": "Foundation components for creating user-configurable dashboards in React",
   "author": "Damiano Fusco",
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "MIT",
   "type": "module",
   "repository": {
     "type": "git",
@@ -19,8 +19,6 @@
   "scripts": {
     "dev": "vite",
     "clean": "rm -rf dist node_modules package-lock.json",
-    "OLD-build-types": "tsc src/ind8ex.ts --jsx react-jsx --downlevelIteration --esModuleInterop --declaration --emitDeclarationOnly --outDir dist",
-    "OLD-build": "npm run pretty; tsc --jsx react-jsx --esModuleInterop && vite build; npm run build-types",
     "build": "npm run pretty; vite build",
     "pub": "npm run build; npm publish --access public --otp=",
     "test": "TESTING=true vitest run",
@@ -39,12 +37,12 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/react-dashboard.d.ts", 
+      "types": "./dist/react-dashboard.d.ts",
       "import": "./dist/react-dashboard.es.js"
     },
     "./core": {
       "types": "./dist/core.d.ts",
-      "import": "./dist/core.es.js" 
+      "import": "./dist/core.es.js"
     },
     "./styles.css": "./dist/styles.css"
   },
@@ -57,7 +55,7 @@
     "zustand": "^5.0.0 || ^5.0.9"
   },
   "devDependencies": {
-    "@tenorlab/dashboard-core": "^1.5.5",
+    "@tenorlab/dashboard-core": "^1.6.0",
     "@types/node": "^24.10.1",
     "@types/react": "19.2.3",
     "@types/react-dom": "19.2.3",