@tenorlab/vue-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,38 +1,37 @@
 # @tenorlab/vue-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: Vue](https://img.shields.io/badge/Framework-Vue-42b883.svg)](https://vuejs.org/)
 
-Foundation components for creating user-configurable, high-performance dashboards in Vue. Built on top of **@tenorlab/dashboard-core**.
+Foundation components for creating user-configurable, high-performance dashboards in Vue.
 
-## 🏗 Relationship to Core
+## Relationship to Core
 
 This package extends **@tenorlab/dashboard-core**. It provides the Vue implementation of the core logic, including specialized hooks, state management, 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
-
-```
+```bash
 # with npm
 npm i @tenorlab/vue-dashboard
 
@@ -56,42 +55,35 @@ import '@tenorlab/vue-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`
 
 Directory name `widget-total-orders`, files:
-- WidgetTotalOrders.vue
-- meta.ts
-- index.ts
+  - WidgetTotalOrders.vue
+  - meta.ts
+  - index.ts
 
-```Vue
-// file: src/bundled-widgets/widget-total-orders/WidgetTotalOrders.vue
+File: src/bundled-widgets/widget-total-orders/WidgetTotalOrders.vue:
+```vue
 <script setup lang="ts">
-import type {
-  IDashboardWidgetProps,
-  TDashboardWidgetKey,
-  TWidgetEmits,
-} from '@tenorlab/vue-dashboard'
+import type { IDashboardWidgetProps, TWidgetEmits } from '@tenorlab/vue-dashboard'
 import { DashboardWidgetBase, WrapperColumnContent, useWidgetEmits } from '@tenorlab/vue-dashboard'
 
-defineProps<IDashboardWidgetProps>()
+const props = defineProps<IDashboardWidgetProps>()
 const emits = defineEmits<TWidgetEmits>()
-const { removeClick: onRemoveClick, moveClick: onMoveClick } = useWidgetEmits(emits)
+const emitHandlers = useWidgetEmits(emits)
 </script>
 
 <template>
-  <DashboardWidgetBase
-    v-bind="props"
-    widgetKey="WidgetTotalOrders"
-    title="Total Orders"
-    @removeClick="onRemoveClick"
-    @moveClick="onMoveClick"
-  >
-    <WrapperColumnContent>
+  <DashboardWidgetBase v-bind="props" v-on="emitHandlers">
+    <WrapperColumnContent><!-- WrapperColumnContent is optional, you are free to use a div or other html elements here -->
       <div class="dashboard-number number-xl text-primary">1,250</div>
       <div class="text-sm">Orders this month</div>
     </WrapperColumnContent>
@@ -99,11 +91,11 @@ const { removeClick: onRemoveClick, moveClick: onMoveClick } = useWidgetEmits(em
 </template>
 ```
 
+File: src/bundled-widgets/widget-total-orders/meta.ts:
 ```typescript
-// file: src/bundled-widgets/widget-total-orders/meta.ts
 import type { TWidgetMetaInfo } from '@tenorlab/vue-dashboard'
-import { MonitorIcon as ComponentIcon } from '@tenorlab/vue-dashboard'
 import { markRaw } from 'vue'
+import { ReceiptIcon as ComponentIcon } from 'lucide-vue-next'
 
 // Define the metadata object for the plugin
 export const WidgetTotalOrdersMeta: TWidgetMetaInfo = {
@@ -116,8 +108,8 @@ export const WidgetTotalOrdersMeta: TWidgetMetaInfo = {
 }
 ```
 
+File: src/bundled-widgets/widget-total-orders/index.ts:
 ```typescript
-// file: src/bundled-widgets/widget-total-orders/index.ts
 import WidgetTotalOrders from './WidgetTotalOrders.vue'
 export default WidgetTotalOrders
 ```
@@ -128,25 +120,26 @@ export default WidgetTotalOrders
 Create `src/widgets-catalog.ts` in your project root. This file manages how widgets are discovered (locally via Vite's `import.meta.glob` or remotely via CDN).
 
 
+File: src/widgets-catalog.ts:
 ```typescript
-// file: src/widgets-catalog.ts
+import { WidgetContainerColumn, WidgetContainerLarge, WidgetContainerRow } from '@tenorlab/vue-dashboard'
+import { createStaticEntry, localWidgetDiscovery, remoteWidgetDiscovery } from '@tenorlab/vue-dashboard/core'
+import { getWidgetsManifestUrl } from '@/utils/'
+
+// optional: other static widgets to add manually
 import {
+  WidgetSmallCardSample,
+} from './other-widgets/other-widgets'
+// meta data map for other static widgets:
+import { otherWidgetsMetaMap } from './other-widgets/other-widgets-meta'
+import type {
   IDynamicWidgetCatalogEntry,
   TDashboardWidgetCatalog,
   TWidgetMetaInfoBase,
-  WidgetContainerColumn,
-  WidgetContainerLarge,
-  WidgetContainerRow,
   TWidgetFactory,
+  TDashboardWidgetKey,
+  TWidgetMetaInfo,
 } from '@tenorlab/vue-dashboard'
-import {
-  createStaticEntry,
-  localWidgetDiscovery,
-  remoteWidgetDiscovery,
-} from '@tenorlab/vue-dashboard/core'
-
-import WidgetRecentPaymentInfo from './other-widgets/WidgetRecentPaymentInfo.vue'
-//import { getWidgetsManifestUrl } from '@/utils'
 
 const bundledWidgetsSrcPath = '/src/bundled-widgets'
 const asyncWidgetsSrcPath = '/src/async-widgets'
@@ -169,7 +162,7 @@ const allMetaModules = import.meta.glob('/src/**/widget-*/meta.ts', {
   eager: true,
 }) as Record<string, Record<string, TWidgetMetaInfoBase>>
 
-const hasPermission = (_user: any, _permission: string) => true
+const hasPermission = (_user_: any, _permission: string) => true
 
 /**
  * @name getWidgetCatalog
@@ -178,34 +171,51 @@ 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),
+    createStaticEntry('WidgetContainer', WidgetContainerColumn, otherWidgetsMetaMap['WidgetContainer']),
+    createStaticEntry('WidgetContainerRow', WidgetContainerRow, otherWidgetsMetaMap['WidgetContainerRow']),
+    createStaticEntry(
+      'WidgetContainerLarge',
+      WidgetContainerLarge,
+      otherWidgetsMetaMap['WidgetContainerLarge'],
+    ),
   ]
 
-  // B. Register Business Static Widgets
-  // we could filter further by permissions and user type if needed
+  // B. Optional: Register Business Static Widgets manually:
+  // Example: you 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'],
+    //   ),
+    // )
   }
 
-  // add bundled-widgets
-  catalogMapEntries.push(...localWidgetDiscovery(
-    bundledWidgetsSrcPath,
-    bundledWidgetModules,
-    allMetaModules,
-    false, // lazy: false
-  ))
-
-  // Async widgets (dynamically loaded, like plugins)
-  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)
@@ -222,22 +232,23 @@ export const getWidgetCatalog = async (user: any | null): Promise<TDashboardWidg
 
 Use a `dashboard-defaults.ts` file to define initial layouts based on user roles.
 
+File: src/dashboard-defaults.ts:
 ```typescript
-// file: src/dashboard-defaults.ts
-import {
+import { blankDashboardConfig, cssSettingsCatalog } from '@tenorlab/vue-dashboard/core'
+import { getWidgetCatalog } from './widgets-catalog'
+import type {
   TDashboardWidgetKey,
   IChildWidgetConfigEntry,
   IDashboardConfig,
   TDashboardWidgetCatalog,
 } from '@tenorlab/vue-dashboard'
-import { blankDashboardConfig, cssSettingsCatalog } from '@tenorlab/vue-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[]
@@ -249,10 +260,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]
   }
@@ -267,10 +289,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
   }
 }
@@ -280,15 +308,11 @@ export const getDashboardDefaults = async (
 
 Use this for a simplified, non-editable view of the dashboard.
 
-TypeScript
-
+File: src/views/DashboardReadonly.vue:
 ```vue
 <script setup lang="ts">
-// file: src/views/DashboardReadonly.vue
-import { reactive, watch, onMounted } from 'vue'
+import { reactive, shallowRef, watch, onMounted } from 'vue'
 import {
-  IDashboardConfig,
-  TDashboardWidgetCatalog,
   useDashboardStore,
 } from '@tenorlab/vue-dashboard'
 import {
@@ -298,6 +322,10 @@ import {
 } from '@tenorlab/vue-dashboard/core'
 import { DynamicWidgetLoader, DashboardGrid } from '@tenorlab/vue-dashboard'
 import { getDashboardDefaults } from '../dashboard-defaults'
+import type {
+  IDashboardConfig,
+  TDashboardWidgetCatalog,
+} from '@tenorlab/vue-dashboard'
 
 const clientAppKey = 'myclientapp'
 const user = { id: 1234 }
@@ -312,15 +340,13 @@ const {
   targetContainerKey,
 } = dashboardStore.computed
 
-type TState = {
-  defaultDashboardConfig: IDashboardConfig
-  widgetsCatalog: TDashboardWidgetCatalog
-}
-
+// 1. Standard reactive state for primitive data
 const localState = reactive<TState>({
   defaultDashboardConfig: blankDashboardConfig,
-  widgetsCatalog: new Map(),
 })
+// 2. Shallow ref for the Catalog (Zero deep-proxying)
+const widgetsCatalog = shallowRef<TDashboardWidgetCatalog>(new Map())
+const getWidgetCatalog = () => widgetsCatalog.value
 
 const getDefaultDashboardConfig = (): IDashboardConfig => {
   return localState.defaultDashboardConfig
@@ -331,11 +357,11 @@ async function _fetchDashboardConfig() {
   const savedConfigs = await dashboardStorageService.getSavedDashboards(
     userId,
     clientAppKey,
-    localState.widgetsCatalog,
+    getWidgetCatalog(),
     defaultConfig,
   )
   dashboardStore.setAllDashboardConfigs(savedConfigs)
-  // show default or first dashboard
+  // show default dashboard or first dashboard
   const dashboardConfig =
     savedConfigs.find((x) => x.dashboardId === 'default') || savedConfigs[0] || defaultConfig
   dashboardStore.setCurrentDashboardConfig(dashboardConfig)
@@ -346,7 +372,7 @@ async function _fetchDashboardConfig() {
 onMounted(async () => {
   const defaults = await getDashboardDefaults(user, clientAppKey)
   localState.defaultDashboardConfig = defaults.dashboardConfig
-  localState.widgetsCatalog = defaults.widgetsCatalog
+  widgetsCatalog.value = defaults.widgetsCatalog
   await _fetchDashboardConfig()
 })
 </script>
@@ -367,7 +393,7 @@ onMounted(async () => {
         :index="index"
         :maxIndex="currentDashboardConfig.widgets.length - 1"
         :childWidgetsConfig="currentDashboardConfig.childWidgetsConfig"
-        :widgetCatalog="localState.widgetsCatalog"
+        :widgetCatalog="widgetsCatalog"
         :isEditing="isEditing"
         :extraProps="dashboardContext"
         @removeClick="() => {}"
@@ -382,8 +408,7 @@ onMounted(async () => {
 
 #### 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/vue-dashboard-sample/blob/main/views/DashboardFullExample.vue).
-
+For editable dashboard examples, including **Undo/Redo**, **Zooming**, **Catalog Flyouts**, and **Multiple Dashboards**, please refer to the [Pro Template](https://www.tenorlab.com).
 
 
 ------
@@ -392,28 +417,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 reactive store to manage widget state, layout, and configuration.
-- **`useDashboardUndoService`**: Provides `undo` and `redo` functionality for user layout changes.
+- **`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)
 
 
 ------
@@ -421,21 +453,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/vue-dashboard.es.js

@@ -1,4 +1,4 @@
-import { reactive as de, computed as h, readonly as we, defineComponent as y, createElementBlock as g, openBlock as i, normalizeClass as p, createElementVNode as o, createStaticVNode as G, withModifiers as H, normalizeStyle as ne, renderSlot as R, mergeProps as Z, createBlock as E, withCtx as B, unref as m, toDisplayString as M, ref as j, onMounted as ye, onUnmounted as be, createVNode as I, Fragment as U, renderList as P, shallowRef as re, watchEffect as _e, markRaw as J, defineAsyncComponent as ke, resolveComponent as $e, Suspense as Ie, resolveDynamicComponent as ce, createSlots as De, createTextVNode as ue, withKeys as ae, watch as Be, createCommentVNode as ee } from "vue";
+import { reactive as de, computed as h, readonly as we, defineComponent as y, openBlock as i, createElementBlock as g, normalizeClass as p, createElementVNode as o, createStaticVNode as G, withModifiers as H, normalizeStyle as ne, renderSlot as R, mergeProps as Z, createBlock as E, withCtx as B, unref as m, toDisplayString as M, ref as j, onMounted as ye, onUnmounted as be, createVNode as I, Fragment as U, renderList as P, shallowRef as re, watchEffect as _e, markRaw as J, defineAsyncComponent as ke, resolveComponent as $e, Suspense as Ie, resolveDynamicComponent as ce, createSlots as De, createTextVNode as ue, withKeys as ae, watch as Be, createCommentVNode as ee } from "vue";
 import { blankDashboardConfig as oe, dashboardStoreUtils as q, getDistinctCssClasses as N, ensureZoomScaleIsWithinRange as Ke, parseContainerTitle as ge, dashboardSettingsUtils as We, getWidgetMetaFromCatalog as Me } from "./core.es.js";
 const Ee = () => ({
   isLoading: !1,

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@tenorlab/vue-dashboard",
-  "version": "1.5.45",
+  "version": "1.6.1",
   "description": "Foundation components for creating user-configurable dashboards in Vue",
   "author": "Damiano Fusco",
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "MIT",
   "type": "module",
   "repository": {
     "type": "git",
@@ -50,7 +50,7 @@
   "main": "./dist/vue-dashboard.es.js",
   "module": "./dist/vue-dashboard.es.js",
   "devDependencies": {
-    "@tenorlab/dashboard-core": "^1.5.5",
+    "@tenorlab/dashboard-core": "^1.6.0",
     "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^6.0.3",
     "prettier": "^3.7.4",