glass-studio-ui-pro 1.1.3 → 1.1.5

package/README.md

@@ -3,38 +3,39 @@
 **Premium Liquid Glass UI Library for Vue 3**
 
 > [!IMPORTANT]
-> **DỰ ÁN ĐANG PHÁT TRIỂN**: Thư viện hiện tại đang trong giai đoạn Beta và chưa mở công khai cho mọi người sử dụng.
-> **Ngày ra mắt chính thức: 01/05/2026**.
+> **UNDER ACTIVE DEVELOPMENT**: This library is currently in Beta and is not yet available for public use.
+> **Official Launch Date: May 1st, 2026**.
 
 ![Glass Studio Preview](https://i.ibb.co/yc8QmHwZ/Screenshot-2026-03-27-154613.png)
 
-`glass-studio-ui-pro` là thư viện UI chuyên về hiệu ứng kính mờ (Glassmorphism) hiệu năng cao cho Vue 3. Thư viện cung cấp các bộ lọc biến dạng lỏng (Liquid Distortion), hệ thống đổ bóng đa tầng và các preset chuyên nghiệp giúp tạo ra giao diện sang trọng, đẳng cấp.
+`glass-studio-ui-pro` is a high-performance Vue 3 UI library specialized in advanced Glassmorphism effects. It features real-time Liquid Distortion filters, multi-layered reflection systems, and professional-grade presets for crafting state-of-the-art premium interfaces.
 
 ---
 
-## ✨ Tính năng nổi bật
+## ✨ Key Features
 
-- **Liquid Glass Distortion**: Tích hợp các bộ lọc biến dạng kính chân thực (Mist, Grain, Frosted, Ripple).
-- **Pro Presets**: Hơn 10 mã thiết kế kính được tinh chỉnh sẵn (Heavy-frost, Crystal, Deep-velvet...).
-- **Advanced Shadow Engine**: Hệ thống đổ bóng phản xạ (Reflex) và bóng mờ (Mist) tạo độ sâu vật lý.
-- **License Guard**: Hệ thống bảo mật và quản lý bản quyền thời gian thực.
-- **TypeScript First**: Hỗ trợ đầy đủ kiểu dữ liệu, tối ưu cho DX (Developer Experience).
+- **Liquid Glass Distortion**: Physically accurate glass distortion filters (Mist, Grain, Frosted, Ripple, Wavy).
+- **Professional Presets**: 6 specialized material presets (Glass Frost, Grain Frost, Soft Mist, Light Frost, Fine Frost, Heavy Frost).
+- **Advanced Shadow Engine**: Realistic elevation-based reflections (Reflex) and ambient glints (Mist).
+- **Neon Glow System**: Integrated liquid glow effects for buttons and interactive states.
+- **License Guard**: Real-time security and license verification system for enterprise use.
+- **TypeScript Native**: Full type safety and optimized Developer Experience (DX).
 
 ---
 
-## 🚀 Bắt đầu sử dụng
+## 🚀 Getting Started
 
-### 1. Cài đặt
+### 1. Installation
 
 ```bash
 npm install glass-studio-ui-pro
-# hoặc
+# or
 yarn add glass-studio-ui-pro
 ```
 
-### 2. Cấu hình Plugin (main.ts)
+### 2. Plugin Configuration (`main.ts`)
 
-Để kích hoạt đầy đủ tính năng Pro, bạn cần đăng ký plugin và truyền vào **License Key**:
+To unlock all Pro features, register the plugin and provide your **License Key**:
 
 ```typescript
 import { createApp } from "vue";
@@ -43,7 +44,7 @@ import "glass-studio-ui-pro/style.css";
 
 const app = createApp(App);
 
-// Khởi tạo GlassUI với License Key của bạn
+// Initialize GlassUI with your Pro License Key
 app.use(GlassUI, {
   licenseKey: "YOUR-PRO-LICENSE-KEY",
 });
@@ -51,9 +52,9 @@ app.use(GlassUI, {
 app.mount("#app");
 ```
 
-### 3. Cài đặt SVG Filters (Root App)
+### 3. Global SVG Filters (`App.vue`)
 
-Để các hiệu ứng biến dạng (Distortion) hoạt động, bạn **bắt buộc** phải đặt `CmFilters` tại file root (thường là `App.vue`):
+The liquid distortion engine requires the `CmFilters` component to be present at the root level (usually in `App.vue`):
 
 ```vue
 <script setup>
@@ -64,93 +65,143 @@ import { CmFilters } from "glass-studio-ui-pro";
   <div id="app">
     <router-view />
     <CmFilters />
-    <!-- Engine xử lý hiệu ứng kính -->
+    <!-- The core engine for glass distortion effects -->
   </div>
 </template>
 ```
 
 ---
 
-## 🎨 Sử dụng linh kiện
+## 🔑 PRO License Registration
 
-### CmCard (Thẻ kính)
+To purchase a PRO license and unlock all premium glass effects, please visit [https://finzo.duckdns.org/](https://finzo.duckdns.org/) and follow these steps:
+
+1. **Register an account**: Create your developer account on the platform.
+2. **Purchase**: Navigate to the **NPM Libraries** section, select **Glass Studio UI Pro**, and complete the payment process.
+3. **Get your Key**: After successful payment, you will receive a unique `licenseKey`.
+
+---
+
+## 🎨 Component Usage
+
+### CmCard (Glass Surface)
+A versatile container with backdrop blur and texture.
 
 ```vue
 <template>
   <CmCard type="heavy-frost" shadow="mist" distortion="wavy">
     <h3>Liquid Glass Performance</h3>
-    <p>Nội dung hiển thị với hiệu ứng kính cao cấp.</p>
+    <p>Content rendered with premium glass optics.</p>
   </CmCard>
 </template>
 ```
 
-### CmButton (Nút bấm thủy tinh)
+### CmButton (Glass Controls)
+Interactive buttons with material presets and liquid glow.
 
 ```vue
 <template>
   <CmButton variant="primary" glow :blur="20" distortion="frosted">
-    Bắt đầu ngay
+    Explore Pro
   </CmButton>
 </template>
 ```
 
+### CmCheckbox (Liquid Selection)
+Neon-lit checkboxes with animated state transitions.
+
+```vue
+<template>
+  <CmCheckbox v-model="isChecked" label="Enable Reflections" />
+</template>
+```
+
+### CmToolbar (Adaptive Navigation)
+Glass toolbars with multiple layout modes (Full, Floating, Fit).
+
+```vue
+<template>
+  <CmToolbar width="floating" type="fine-frost" shadow="reflex">
+    <template #left><span>Logo</span></template>
+    <CmButton variant="ghost">Home</CmButton>
+    <template #right><CmButton variant="primary">Login</CmButton></template>
+  </CmToolbar>
+</template>
+```
+
 ---
 
-## 📖 Bảng thông số (API Reference)
+## 📖 API Reference
 
 ### CmCard Props
 
 | Prop | Type | Default | Description |
-| :----------- | :----------- | :------- | :------------------------------------------------------------- |
-| `type` | `CardPreset` | `'none'` | Các preset sẵn có: `glass-frost`, `heavy-frost`, `crystal`... |
-| `blur` | `number` | `12` | Độ mờ của lớp kính (px). |
-| `opacity` | `number` | `0.12` | Độ trong suốt của nền (0-1). |
-| `distortion` | `string` | `'none'` | Kiểu biến dạng: `wavy`, `frosted`, `grain`, `ripple`, `mist`. |
-| `shadow` | `string` \| `boolean` | `false` | Kiểu đổ bóng: `mist`, `reflex`. |
+| :--- | :--- | :--- | :--- |
+| `type` | `Preset` | `'glass-frost'` | Material type: `glass-frost`, `grain-frost`, `soft-mist`, `light-frost`, `fine-frost`, `heavy-frost`. |
+| `blur` | `number` | `12` | Backdrop blur radius (px). |
+| `opacity` | `number` | `0.12` | Background surface opacity (0-1). |
+| `distortion`| `string` | `'none'` | Filter style: `wavy`, `frosted`, `grain`, `ripple`, `mist`. |
+| `shadow` | `string` | `'none'` | Shadow style: `mist`, `reflex`. |
+
+### CmButton Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `variant` | `string` | `'default'` | Visual style: `default`, `primary`, `ghost`, `solid`. |
+| `glow` | `boolean` | `false` | Enables the liquid neon glow effect. |
+| `type` | `Preset` | `'glass-frost'` | Material surface preset. |
+| `blur` | `number` | `12` | Backdrop blur intensity. |
+| `active` | `boolean` | `false` | Visual active state toggle. |
+
+### CmCheckbox Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `v-model` | `boolean` | `false` | Two-way binding state. |
+| `label` | `string` | `''` | Optional label text. |
+| `disabled` | `boolean` | `false` | Prevents user interaction. |
 
 ### CmModal Props
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
-| `v-model` | `boolean` | `false` | Trạng thái hiển thị (Bắt buộc). |
-| `title` | `string` | `''` | Tiêu đề của Modal. |
-| `width` | `string` | `'500px'` | Chiều rộng tối đa của Modal. |
-| `distortion`| `string` | `'frosted'`| Kiểu biến dạng bề mặt kính. |
-| `showClose` | `boolean` | `true` | Hiển thị nút đóng (X). |
+| `v-model` | `boolean` | `false` | Controls visibility (Required). |
+| `title` | `string` | `''` | Header title text. |
+| `type` | `Preset` | `'heavy-frost'` | Modal material style. |
+| `shadow` | `string` | `'reflex'` | Surface reflection mode. |
 
 ### CmToolbar Props
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
-| `position` | `string` | `'static'`| Vị trí: `top`, `bottom`, `static`. |
-| `floating` | `boolean` | `false` | Hiển thị dạng trôi nổi (có margin). |
-| `narrow` | `boolean` | `false` | Giảm kích thước padding dọc. |
-| `distortion`| `string` | `'mist'` | Kiểu biến dạng bề mặt kính. |
-| `shadow` | `string` | `'reflex'`| Hiệu ứng đổ bóng đặc thù. |
+| `width` | `string` | `'full'` | Width mode: `full`, `floating`, `fit`. |
+| `type` | `Preset` | `'glass-frost'` | Material surface preset. |
+| `shadow` | `string` | `'reflex'` | Surface glint intensity. |
+| `position` | `string` | `'static'` | CSS Position: `static`, `top`, `bottom`. |
 
 ---
 
-## 🔐 Bảo mật & Bản quyền
+## 🔐 Security & License Guard
 
-Đây là phiên bản **Pro**. Nếu không có License Key hợp lệ hoặc bản quyền hết hạn:
+This is the **Pro** version of the library. If a valid License Key is not detected or has expired:
 
-- Linh kiện sẽ chuyển sang trạng thái **Secure Lock** (Giao diện tối giản).
-- Hiển thị thông báo lỗi trực tiếp từ hệ thống (Vd: **"LICENSE HAS EXPIRED"**).
-- Các bộ lọc cao cấp sẽ bị vô hiệu hóa để bảo vệ tài sản trí tuệ.
+- Components will enter **Secure Lock** state (Blackout/Restricted UI).
+- Console warnings will be triggered (e.g., **"LICENSE_REQUIRED"**).
+- Advanced SVG Filters and material presets will be disabled to protect intellectual property.
 
-Bạn có thể kiểm tra trạng thái bản quyền:
+You can check the current license status programmatically:
 
 ```typescript
 import { getLicenseStatus } from "glass-studio-ui-pro";
 
 const status = getLicenseStatus();
 if (!status.isValid) {
-  console.error("Lỗi bản quyền:", status.message);
+  console.warn("License Issue:", status.message);
 }
 ```
 
 ---
 
-## 📄 Bản quyền
+## 📄 License
 
-(C) 2026 Glass Studio & CM Team. Mọi quyền được bảo lưu.
+(C) 2026 Glass Studio & CM Team. All rights reserved. Intellectual Property under private commercial license.

package/dist/components/CgNotification.vue.d.ts

@@ -0,0 +1,32 @@
+interface Props {
+    type?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+    message?: string;
+    duration?: number;
+    closable?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {
+    close: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    type: "info" | "success" | "warning" | "error";
+    title: string;
+    duration: number;
+    message: string;
+    closable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/core/license.d.ts

@@ -4,6 +4,7 @@ export interface LicenseStatus {
     tier: "free" | "pro";
     remainingDays?: number;
     message?: string;
+    renewalUrl?: string;
 }
 /**
  * Internal hardware/software lock validation.

package/dist/index.d.ts

@@ -1,11 +1,12 @@
-import { default as CmCard } from './components/CmCard.vue';
-import { default as CmButton } from './components/CmButton.vue';
-import { default as CmCheckbox } from './components/CmCheckbox.vue';
-import { default as CmFilters } from './components/CmFilters.vue';
-import { default as CmModal } from './components/CmModal.vue';
-import { default as CmToolbar } from './components/CmToolbar.vue';
+import { default as CgCard } from './components/CgCard.vue';
+import { default as CgButton } from './components/CgButton.vue';
+import { default as CgCheckbox } from './components/CgCheckbox.vue';
+import { default as CgFilters } from './components/CgFilters.vue';
+import { default as CgModal } from './components/CgModal.vue';
+import { default as CgToolbar } from './components/CgToolbar.vue';
+import { default as CgNotification } from './components/CgNotification.vue';
 import { getLicenseStatus } from './core/license';
-export { CmCard, CmButton, CmCheckbox, CmFilters, CmModal, CmToolbar, getLicenseStatus };
+export { CgCard, CgButton, CgCheckbox, CgFilters, CgModal, CgToolbar, CgNotification, getLicenseStatus };
 export interface GlassUIOptions {
     licenseKey?: string;
 }