@shohojdhara/atomix 0.3.1 → 0.3.2

package/src/lib/theme/studio/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Theme Studio Module
+ * 
+ * Visual theme editor and generator
+ */
+
+export { ThemeStudio } from './ThemeStudio';
+export type { ThemeStudioProps } from './ThemeStudio';

package/src/lib/theme/types.ts

@@ -4,7 +4,7 @@
  * TypeScript types and interfaces for the Atomix Design System theme management system.
  */
 
-import type { ThemeManager as ThemeManagerType } from './ThemeManager';
+import type { ThemeManager as ThemeManagerType } from './runtime/ThemeManager';
 
 /**
  * Theme metadata interface matching themes.config.js structure
@@ -71,6 +71,8 @@ export interface ThemeManagerConfig {
     onThemeChange?: (theme: string | Theme) => void;
     /** Callback when theme load fails */
     onError?: (error: Error, themeName: string) => void;
+    /** RTL configuration */
+    rtl?: import('./i18n/rtl').RTLConfig;
 }
 
 /**

package/src/lib/theme/utils.ts

@@ -6,6 +6,7 @@
  */
 
 import type { ThemeMetadata, ThemeValidationResult } from './types';
+import { THEME_LINK_ID_PREFIX } from './constants';
 
 /**
  * Check if code is running in a browser environment
@@ -25,7 +26,7 @@ export const isServer = (): boolean => {
  * Generate a unique ID for theme link elements
  */
 export const getThemeLinkId = (themeName: string): string => {
-    return `atomix-theme-${themeName}`;
+    return `${THEME_LINK_ID_PREFIX}${themeName}`;
 };
 
 /**
@@ -65,28 +66,24 @@ export const buildThemePath = (
     return `${cleanBasePath}/${cleanFileName}`;
 };
 
+
+
 /**
- * Load theme CSS file dynamically
+ * Load theme CSS from a full path
  * 
- * @param themeName - Name of the theme to load
- * @param basePath - Base path for theme files
- * @param useMinified - Whether to use minified CSS
- * @param cdnPath - Optional CDN path
+ * @param fullPath - Full path to the CSS file
+ * @param linkId - ID for the link element
  * @returns Promise that resolves when CSS is loaded
  */
 export const loadThemeCSS = (
-    themeName: string,
-    basePath: string = '/themes',
-    useMinified: boolean = false,
-    cdnPath: string | null = null
+    fullPath: string,
+    linkId: string
 ): Promise<void> => {
     if (isServer()) {
         return Promise.resolve();
     }
 
     return new Promise((resolve, reject) => {
-        const linkId = getThemeLinkId(themeName);
-
         // Check if theme is already loaded
         const existingLink = document.getElementById(linkId);
         if (existingLink) {
@@ -99,10 +96,10 @@ export const loadThemeCSS = (
         link.id = linkId;
         link.rel = 'stylesheet';
         link.type = 'text/css';
-        link.href = buildThemePath(themeName, basePath, useMinified, cdnPath);
+        link.href = fullPath;
 
         // Add data attribute for tracking
-        link.setAttribute('data-atomix-theme', themeName);
+        link.setAttribute('data-atomix-theme', 'true');
 
         // Handle load success
         link.onload = () => {
@@ -113,7 +110,7 @@ export const loadThemeCSS = (
         link.onerror = () => {
             // Remove failed link element
             link.remove();
-            reject(new Error(`Failed to load theme: ${themeName}`));
+            reject(new Error(`Failed to load theme CSS: ${fullPath}`));
         };
 
         // Append to head
@@ -124,15 +121,19 @@ export const loadThemeCSS = (
 /**
  * Remove theme CSS from the DOM
  * 
- * @param themeName - Name of the theme to remove
+ * @param themeNameOrLinkId - Name of the theme or link ID to remove
  */
-export const removeThemeCSS = (themeName: string): void => {
+export const removeThemeCSS = (themeNameOrLinkId: string): void => {
     if (isServer()) {
         return;
     }
 
-    const linkId = getThemeLinkId(themeName);
-    const link = document.getElementById(linkId);
+    // Try as link ID first, then as theme name
+    let link = document.getElementById(themeNameOrLinkId);
+    if (!link) {
+        const linkId = getThemeLinkId(themeNameOrLinkId);
+        link = document.getElementById(linkId);
+    }
 
     if (link) {
         link.remove();
@@ -154,12 +155,12 @@ export const removeAllThemeCSS = (): void => {
 /**
  * Apply theme data attributes to the document
  * 
- * @param themeName - Name of the theme
  * @param dataAttribute - Data attribute name (default: 'data-theme')
+ * @param themeName - Name of the theme
  */
 export const applyThemeAttributes = (
-    themeName: string,
-    dataAttribute: string = 'data-theme'
+    dataAttribute: string,
+    themeName: string
 ): void => {
     if (isServer()) {
         return;

package/src/lib/theme/whitelabel/WhiteLabelManager.ts

@@ -0,0 +1,364 @@
+/**
+ * White Label Manager
+ * 
+ * Provides white labeling capabilities for themes
+ */
+
+import type { Theme, ThemeOptions } from '../types';
+import { createTheme } from '../createTheme';
+import { extendTheme } from '../composeTheme';
+
+/**
+ * Brand configuration
+ */
+export interface BrandConfig {
+  /** Brand name */
+  name: string;
+  /** Brand logo URL */
+  logo?: string;
+  /** Primary brand color */
+  primaryColor?: string;
+  /** Secondary brand color */
+  secondaryColor?: string;
+  /** Brand fonts */
+  fonts?: {
+    primary?: string;
+    secondary?: string;
+  };
+  /** Brand favicon */
+  favicon?: string;
+  /** Custom CSS */
+  customCSS?: string;
+  /** Custom meta tags */
+  metaTags?: Record<string, string>;
+}
+
+/**
+ * White label configuration
+ */
+export interface WhiteLabelConfig {
+  /** Brand configuration */
+  brand: BrandConfig;
+  /** Theme overrides */
+  themeOverrides?: Partial<ThemeOptions>;
+  /** Component overrides */
+  componentOverrides?: Record<string, any>;
+  /** CSS variable overrides */
+  cssVariableOverrides?: Record<string, string>;
+  /** Enable DOM mutations (default: false for headless/server safety) */
+  enableDOMOperations?: boolean;
+}
+
+/**
+ * White Label Manager
+ * 
+ * Manages white labeling for themes
+ */
+export class WhiteLabelManager {
+  private config: WhiteLabelConfig | null = null;
+  private baseTheme: Theme | null = null;
+
+  constructor(baseTheme?: Theme) {
+    if (baseTheme) {
+      this.baseTheme = baseTheme;
+    }
+  }
+
+  /**
+   * Set base theme
+   */
+  setBaseTheme(theme: Theme): void {
+    this.baseTheme = theme;
+  }
+
+  /**
+   * Configure white label
+   */
+  configure(config: WhiteLabelConfig): void {
+    this.config = config;
+    this.applyWhiteLabel();
+  }
+
+  /**
+   * Get white labeled theme
+   */
+  getWhiteLabeledTheme(): Theme | null {
+    if (!this.baseTheme || !this.config) {
+      return this.baseTheme;
+    }
+
+    // Create theme with white label overrides
+    const themeOptions: ThemeOptions = {
+      ...this.baseTheme,
+      name: this.config.brand.name,
+      ...this.config.themeOverrides,
+      palette: {
+        ...this.baseTheme.palette,
+        ...(this.config.brand.primaryColor && {
+          primary: {
+            ...this.baseTheme.palette.primary,
+            main: this.config.brand.primaryColor,
+          },
+        }),
+        ...(this.config.brand.secondaryColor && {
+          secondary: {
+            ...this.baseTheme.palette.secondary,
+            main: this.config.brand.secondaryColor,
+          },
+        }),
+        ...this.config.themeOverrides?.palette,
+      },
+      typography: {
+        ...this.baseTheme.typography,
+        ...(this.config.brand.fonts?.primary && {
+          fontFamily: this.config.brand.fonts.primary,
+        }),
+        ...this.config.themeOverrides?.typography,
+      },
+      custom: {
+        ...this.baseTheme.custom,
+        whiteLabel: {
+          brand: this.config.brand,
+          componentOverrides: this.config.componentOverrides,
+          cssVariableOverrides: this.config.cssVariableOverrides,
+        },
+      },
+    };
+
+    return createTheme(themeOptions);
+  }
+
+  /**
+   * Apply white label to DOM
+   */
+  private applyWhiteLabel(): void {
+    if (!this.config?.enableDOMOperations || typeof document === 'undefined') {
+      return;
+    }
+
+    const { brand } = this.config;
+
+    // Apply logo
+    if (brand.logo) {
+      this.applyLogo(brand.logo);
+    }
+
+    // Apply favicon
+    if (brand.favicon) {
+      this.applyFavicon(brand.favicon);
+    }
+
+    // Apply meta tags
+    if (brand.metaTags) {
+      this.applyMetaTags(brand.metaTags);
+    }
+
+    // Apply custom CSS
+    if (brand.customCSS) {
+      this.applyCustomCSS(brand.customCSS);
+    }
+
+    // Apply CSS variable overrides
+    if (this.config.cssVariableOverrides) {
+      this.applyCSSVariables(this.config.cssVariableOverrides);
+    }
+  }
+
+  /**
+   * Apply logo
+   */
+  applyLogo(logoUrl: string, selector?: string, element?: HTMLElement): void {
+    if (!this.config?.enableDOMOperations || typeof document === 'undefined') {
+      return;
+    }
+
+    // Find or create logo element
+    let logoElement = element || (selector ? document.querySelector(selector) : null) as HTMLImageElement | null;
+    
+    if (!logoElement) {
+      logoElement = document.querySelector('[data-whitelabel-logo]') as HTMLImageElement;
+    }
+    
+    if (!logoElement) {
+      logoElement = document.createElement('img');
+      logoElement.setAttribute('data-whitelabel-logo', 'true');
+      logoElement.style.maxHeight = '40px';
+      logoElement.style.maxWidth = '200px';
+      
+      // Try to find a container (e.g., header, navbar)
+      const container = selector 
+        ? document.querySelector(selector)
+        : document.querySelector('header, [role="banner"], .navbar, .header');
+      
+      if (container) {
+        container.insertBefore(logoElement, container.firstChild);
+      } else {
+        document.body.insertBefore(logoElement, document.body.firstChild);
+      }
+    }
+
+    (logoElement as HTMLImageElement).src = logoUrl;
+    (logoElement as HTMLImageElement).alt = this.config?.brand.name || 'Logo';
+  }
+
+  /**
+   * Apply favicon
+   */
+  applyFavicon(faviconUrl: string, selector?: string): void {
+    if (!this.config?.enableDOMOperations || typeof document === 'undefined') {
+      return;
+    }
+
+    // Remove existing favicons
+    const existingFavicons = document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"]');
+    existingFavicons.forEach(favicon => favicon.remove());
+
+    // Create new favicon link
+    const link = document.createElement('link');
+    link.rel = 'icon';
+    link.type = 'image/x-icon';
+    link.href = faviconUrl;
+    
+    const target = selector ? document.querySelector(selector) : document.head;
+    if (target) {
+      target.appendChild(link);
+    }
+  }
+
+  /**
+   * Apply meta tags
+   */
+  applyMetaTags(metaTags: Record<string, string>, selector?: string): void {
+    if (!this.config?.enableDOMOperations || typeof document === 'undefined') {
+      return;
+    }
+
+    const target = selector ? document.querySelector(selector) : document.head;
+    if (!target) {
+      return;
+    }
+
+    for (const [name, content] of Object.entries(metaTags)) {
+      // Check if meta tag exists
+      let metaElement = document.querySelector(`meta[name="${name}"]`) as HTMLMetaElement;
+      
+      if (!metaElement) {
+        metaElement = document.createElement('meta');
+        metaElement.name = name;
+        target.appendChild(metaElement);
+      }
+
+      metaElement.content = content;
+    }
+  }
+
+  /**
+   * Apply custom CSS
+   */
+  applyCustomCSS(css: string, styleId?: string): void {
+    if (!this.config?.enableDOMOperations || typeof document === 'undefined') {
+      return;
+    }
+
+    const id = styleId || 'whitelabel-custom-css';
+    
+    // Remove existing white label CSS
+    const existingStyle = document.getElementById(id);
+    if (existingStyle) {
+      existingStyle.remove();
+    }
+
+    // Create new style element
+    const style = document.createElement('style');
+    style.id = id;
+    style.textContent = css;
+    document.head.appendChild(style);
+  }
+
+  /**
+   * Apply CSS variables
+   */
+  applyCSSVariables(variables: Record<string, string>, root?: HTMLElement | string): void {
+    if (!this.config?.enableDOMOperations || typeof document === 'undefined') {
+      return;
+    }
+
+    let targetElement: HTMLElement;
+    
+    if (typeof root === 'string') {
+      const element = document.querySelector(root);
+      if (!element || !(element instanceof HTMLElement)) {
+        return;
+      }
+      targetElement = element;
+    } else if (root instanceof HTMLElement) {
+      targetElement = root;
+    } else {
+      targetElement = document.documentElement;
+    }
+
+    for (const [key, value] of Object.entries(variables)) {
+      targetElement.style.setProperty(key.startsWith('--') ? key : `--${key}`, value);
+    }
+  }
+
+  /**
+   * Remove white label
+   */
+  removeWhiteLabel(): void {
+    // Remove logo
+    const logo = document.querySelector('[data-whitelabel-logo]');
+    logo?.remove();
+
+    // Remove custom CSS
+    const customCSS = document.getElementById('whitelabel-custom-css');
+    customCSS?.remove();
+
+    // Remove CSS variables (would need to track original values)
+    if (this.config?.cssVariableOverrides) {
+      const root = document.documentElement;
+      for (const key of Object.keys(this.config.cssVariableOverrides)) {
+        root.style.removeProperty(key.startsWith('--') ? key : `--${key}`);
+      }
+    }
+
+    this.config = null;
+  }
+
+  /**
+   * Get current configuration
+   */
+  getConfig(): WhiteLabelConfig | null {
+    return this.config;
+  }
+
+  /**
+   * Export configuration
+   */
+  exportConfig(): string {
+    if (!this.config) {
+      throw new Error('No white label configuration to export');
+    }
+
+    return JSON.stringify(this.config, null, 2);
+  }
+
+  /**
+   * Import configuration
+   */
+  importConfig(json: string): void {
+    try {
+      const config = JSON.parse(json) as WhiteLabelConfig;
+      this.configure(config);
+    } catch (error) {
+      throw new Error(`Failed to import white label configuration: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  }
+}
+
+/**
+ * Create white label manager
+ */
+export function createWhiteLabelManager(baseTheme?: Theme): WhiteLabelManager {
+  return new WhiteLabelManager(baseTheme);
+}

package/src/lib/theme/whitelabel/index.ts

@@ -0,0 +1,13 @@
+/**
+ * White Label Module
+ */
+
+export * from './WhiteLabelManager';
+export {
+  WhiteLabelManager,
+  createWhiteLabelManager,
+} from './WhiteLabelManager';
+export type {
+  BrandConfig,
+  WhiteLabelConfig,
+} from './WhiteLabelManager';

package/src/styles/01-settings/_settings.badge.scss

@@ -15,4 +15,4 @@ $badge-border-radius: radius.$border-radius-pill !default;
 
 $badge-icon-size: map.get($spacing-sizes, 4) !default; //16px
 
-$badge-inner-items-gap: map.get($spacing-sizes, 1.5) !default; //6px
+$badge-inner-items-gap: map.get($spacing-sizes, 'px-6') !default; //6px

package/src/styles/01-settings/_settings.callout.scss

@@ -29,7 +29,7 @@ $callout-title-font-size: map.get($spacing-sizes, 4) !default; //16px
 $callout-title-font-weight: 600 !default;
 $callout-title-color: var(--#{config.$prefix}body-color) !default;
 
-$callout-text-font-size: map.get($spacing-sizes, 3.5) !default; //14px
+$callout-text-font-size: map.get($spacing-sizes, 'px-14') !default; //14px
 $callout-text-font-weight: 400 !default;
 $callout-text-color: var(--#{config.$prefix}body-color) !default;
 

package/src/styles/01-settings/_settings.card.scss

@@ -30,7 +30,7 @@ $card-bg: var(--#{config.$prefix}primary-bg-subtle) !default;
 $card-bg-hover: var(--#{config.$prefix}secondary-bg-subtle) !default;
 
 $card-icon-size: map.get($spacing-sizes, 5) !default; //20px
-$card-icon-padding: map.get($spacing-sizes, 1.5) !default; //10px
+$card-icon-padding: map.get($spacing-sizes, 'px-10') !default; //10px
 $card-icon-bg: var(--#{config.$prefix}brand-bg-subtle) !default;
 $card-icon-color: var(--#{config.$prefix}brand-text-emphasis) !default;
 

package/src/styles/01-settings/_settings.input.scss

@@ -16,7 +16,7 @@ $input-line-height-sm: 20px !default;
 $input-line-height-lg: 24px !default;
 
 $input-padding-x: map.get($spacing-sizes, 3) !default; //12px
-$input-padding-y: map.get($spacing-sizes, 2.5) !default; //10px
+$input-padding-y: map.get($spacing-sizes, 'px-10') !default; //10px
 $input-padding-x-sm: map.get($spacing-sizes, 3) !default; //12px
 $input-padding-y-sm: map.get($spacing-sizes, 1.5) !default; //6px
 $input-padding-x-lg: map.get($spacing-sizes, 3) !default; //12px

package/src/styles/01-settings/_settings.navbar.scss

@@ -18,7 +18,7 @@ $navbar-border-color: var(--#{$prefix}primary-border-subtle) !default;
 $navbar-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !default;
 
 // Brand/logo
-$navbar-brand-margin-end: map.get($spacing-sizes, 7.5) !default; //30px
+$navbar-brand-margin-end: map.get($spacing-sizes, 'px-30') !default; //30px
 $navbar-brand-font-size: $font-size-lg !default;
 $navbar-brand-font-weight: $font-weight-bold !default;
 $navbar-brand-color: var(--#{$prefix}body-color) !default;

package/src/styles/01-settings/_settings.upload.scss

@@ -64,7 +64,7 @@ $upload-loader-text-color: var(--#{config.$prefix}tertiary-text-emphasis) !defau
 $upload-loader-text-font-size: typography.$font-size-sm !default;
 $upload-loader-text-margin-top: 5px !default;
 $upload-loader-bar-height: 10px !default;
-$upload-loader-bar-margin-top: map.get($spacing-sizes, 2.5) !default; //10px
+$upload-loader-bar-margin-top: map.get($spacing-sizes, 'px-10') !default; //10px
 $upload-loader-control-icon-size: map.get($spacing-sizes, 5) !default; //20px
 $upload-loader-contorl-color: var(--#{config.$prefix}body-color) !default;
 

package/src/styles/06-components/_components.chart.scss

@@ -313,7 +313,7 @@
     transition: all $chart-transition-duration $chart-transition-timing;
     position: relative;
     overflow: hidden;
-    font-size: map.get($spacing-sizes, 3.5);
+    font-size: map.get($spacing-sizes, 'px-14');
 
     &::before {
       content: '';
@@ -492,7 +492,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: map.get($spacing-sizes, 1.5) 0;
+      padding: map.get($spacing-sizes, 'px-6') 0;
       gap: map.get($spacing-sizes, 3);
 
       &--info {