glass-studio-ui-pro 1.1.4 → 1.1.6

package/README.md

@@ -1,14 +1,14 @@
-# 💎 Glass Studio UI Pro
+# 💎 Glass Studio UI Pro (Cg View Studio)
 
-**Premium Liquid Glass UI Library for Vue 3**
+**Premium Liquid Glass UI Library (Crystal Glass) for Vue 3**
 
 > [!IMPORTANT]
-> **UNDER ACTIVE DEVELOPMENT**: This library is currently in Beta and is not yet available for public use.
-> **Official Launch Date: May 1st, 2026**.
+> **HỆ THỐNG ĐANG TRONG GIAI ĐOẠN BETA**: Đã mở dùng thử miễn phí đến ngày **01/05/2026**.
+> Sau thời gian này, các tính năng Pro sẽ yêu cầu Giấy phép (License Key) chính thức.
 
 ![Glass Studio Preview](https://i.ibb.co/yc8QmHwZ/Screenshot-2026-03-27-154613.png)
 
-`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.
+`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 with the new **Cg (Crystal Glass)** design system.
 
 ---
 
@@ -54,17 +54,17 @@ app.mount("#app");
 
 ### 3. Global SVG Filters (`App.vue`)
 
-The liquid distortion engine requires the `CmFilters` component to be present at the root level (usually in `App.vue`):
+The liquid distortion engine requires the `CgFilters` component to be present at the root level (usually in `App.vue`):
 
 ```vue
 <script setup>
-import { CmFilters } from "glass-studio-ui-pro";
+import { CgFilters } from "glass-studio-ui-pro";
 </script>
 
 <template>
   <div id="app">
     <router-view />
-    <CmFilters />
+    <CgFilters />
     <!-- The core engine for glass distortion effects -->
   </div>
 </template>
@@ -79,53 +79,54 @@ To purchase a PRO license and unlock all premium glass effects, please visit [ht
 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`.
+4. **Renewal**: If your license expires, you can renew it directly on the dashboard to immediately restore all premium effects.
 
 ---
 
 ## 🎨 Component Usage
 
-### CmCard (Glass Surface)
+### CgCard (Glass Surface)
 A versatile container with backdrop blur and texture.
 
 ```vue
 <template>
-  <CmCard type="heavy-frost" shadow="mist" distortion="wavy">
+  <CgCard type="heavy-frost" shadow="mist" distortion="wavy">
     <h3>Liquid Glass Performance</h3>
     <p>Content rendered with premium glass optics.</p>
-  </CmCard>
+  </CgCard>
 </template>
 ```
 
-### CmButton (Glass Controls)
+### CgButton (Glass Controls)
 Interactive buttons with material presets and liquid glow.
 
 ```vue
 <template>
-  <CmButton variant="primary" glow :blur="20" distortion="frosted">
+  <CgButton variant="primary" glow :blur="20" distortion="frosted">
     Explore Pro
-  </CmButton>
+  </CgButton>
 </template>
 ```
 
-### CmCheckbox (Liquid Selection)
+### CgCheckbox (Liquid Selection)
 Neon-lit checkboxes with animated state transitions.
 
 ```vue
 <template>
-  <CmCheckbox v-model="isChecked" label="Enable Reflections" />
+  <CgCheckbox v-model="isChecked" label="Enable Reflections" />
 </template>
 ```
 
-### CmToolbar (Adaptive Navigation)
+### CgToolbar (Adaptive Navigation)
 Glass toolbars with multiple layout modes (Full, Floating, Fit).
 
 ```vue
 <template>
-  <CmToolbar width="floating" type="fine-frost" shadow="reflex">
+  <CgToolbar 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>
+    <CgButton variant="ghost">Home</CgButton>
+    <template #right><CgButton variant="primary">Login</CgButton></template>
+  </CgToolbar>
 </template>
 ```
 
@@ -133,7 +134,7 @@ Glass toolbars with multiple layout modes (Full, Floating, Fit).
 
 ## 📖 API Reference
 
-### CmCard Props
+### CgCard Props
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
@@ -143,7 +144,7 @@ Glass toolbars with multiple layout modes (Full, Floating, Fit).
 | `distortion`| `string` | `'none'` | Filter style: `wavy`, `frosted`, `grain`, `ripple`, `mist`. |
 | `shadow` | `string` | `'none'` | Shadow style: `mist`, `reflex`. |
 
-### CmButton Props
+### CgButton Props
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
@@ -153,7 +154,7 @@ Glass toolbars with multiple layout modes (Full, Floating, Fit).
 | `blur` | `number` | `12` | Backdrop blur intensity. |
 | `active` | `boolean` | `false` | Visual active state toggle. |
 
-### CmCheckbox Props
+### CgCheckbox Props
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
@@ -161,7 +162,7 @@ Glass toolbars with multiple layout modes (Full, Floating, Fit).
 | `label` | `string` | `''` | Optional label text. |
 | `disabled` | `boolean` | `false` | Prevents user interaction. |
 
-### CmModal Props
+### CgModal Props
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
@@ -170,7 +171,7 @@ Glass toolbars with multiple layout modes (Full, Floating, Fit).
 | `type` | `Preset` | `'heavy-frost'` | Modal material style. |
 | `shadow` | `string` | `'reflex'` | Surface reflection mode. |
 
-### CmToolbar Props
+### CgToolbar Props
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
@@ -186,7 +187,8 @@ Glass toolbars with multiple layout modes (Full, Floating, Fit).
 This is the **Pro** version of the library. If a valid License Key is not detected or has expired:
 
 - Components will enter **Secure Lock** state (Blackout/Restricted UI).
-- Console warnings will be triggered (e.g., **"LICENSE_REQUIRED"**).
+- Interactive elements will show a **"LICENSE_REQUIRED"** message.
+- Console warnings will be triggered (e.g., **"SECURITY_ALERT: Components Locked"**).
 - Advanced SVG Filters and material presets will be disabled to protect intellectual property.
 
 You can check the current license status programmatically:
@@ -204,4 +206,4 @@ if (!status.isValid) {
 
 ## 📄 License
 
-(C) 2026 Glass Studio & CM Team. All rights reserved. Intellectual Property under private commercial license.
+(C) 2026 Glass Studio & CG Team. All rights reserved. Intellectual Property under private commercial license.

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

@@ -0,0 +1,65 @@
+/**
+ * CgIcon - Liquid Glass 3D Icon Component
+ * Soap-bubble aesthetic with smooth directional light reflection,
+ * organic gooey physics, and animated iridescence.
+ */
+type LiquidMode = 'pulse' | 'splash' | 'bubble' | 'pop';
+interface Props {
+    /** The icon component to render */
+    icon?: any;
+    /** Base size of the liquid body (container) */
+    size?: number;
+    /** Size of the icon symbol itself */
+    symbolSize?: number;
+    /** Base color name or hex (e.g. 'brand', 'red', '#ff0000') */
+    color?: string;
+    /** Shade weight (100-900) */
+    weight?: number | string;
+    /** Symbol opacity */
+    iconOpacity?: number;
+    /** Enable liquid physics */
+    liquid?: boolean;
+    /** Animation mode */
+    liquidMode?: LiquidMode;
+    /** Separate color for liquid body */
+    liquidColor?: string;
+    /** Liquid body weight */
+    liquidWeight?: number | string;
+    /** Liquid body opacity */
+    liquidOpacity?: number;
+    /** Enable environment glow */
+    glow?: boolean;
+    /** Intensity of the glow */
+    glowIntensity?: number;
+    /** Force active animation state */
+    active?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: number;
+    active: boolean;
+    glow: boolean;
+    color: string;
+    symbolSize: number;
+    weight: number | string;
+    iconOpacity: number;
+    liquid: boolean;
+    liquidMode: LiquidMode;
+    liquidOpacity: number;
+    glowIntensity: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+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/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/components/CmIcon.vue.d.ts

@@ -0,0 +1,61 @@
+/**
+ * CmIcon - Liquid Bubble Icon Component
+ * Soap-bubble aesthetic with animated specular highlights,
+ * organic morphing shape, and burst animation sequence.
+ */
+type LiquidMode = 'idle' | 'pulse' | 'pop' | 'bubble';
+interface Props {
+    /** The icon component to render */
+    icon?: any;
+    /** Base size of the liquid body */
+    size?: number;
+    /** Size of the icon symbol */
+    symbolSize?: number;
+    /** Color theme */
+    color?: string;
+    /** Shade weight */
+    weight?: number | string;
+    /** Enable liquid physics */
+    liquid?: boolean;
+    /** Animation mode */
+    liquidMode?: LiquidMode;
+    /** Liquid color override */
+    liquidColor?: string;
+    /** Enable glow */
+    glow?: boolean;
+    /** Glow intensity px */
+    glowIntensity?: number;
+    /** Force active state */
+    active?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        containerRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: number;
+    active: boolean;
+    glow: boolean;
+    color: string;
+    symbolSize: number;
+    weight: number | string;
+    liquid: boolean;
+    liquidMode: LiquidMode;
+    glowIntensity: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    containerRef: HTMLDivElement;
+}, HTMLDivElement>;
+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,14 @@
-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 { default as CgIcon } from './components/CgIcon.vue';
+import { default as CmIcon } from './components/CmIcon.vue';
 import { getLicenseStatus } from './core/license';
-export { CmCard, CmButton, CmCheckbox, CmFilters, CmModal, CmToolbar, getLicenseStatus };
+export { CgCard, CgButton, CgCheckbox, CgFilters, CgModal, CgToolbar, CgNotification, CgIcon, CmIcon, getLicenseStatus };
 export interface GlassUIOptions {
     licenseKey?: string;
 }