@shohojdhara/atomix 0.5.0 → 0.5.2

package/src/lib/utils/displacement-generator.ts

@@ -1,92 +0,0 @@
-export interface Vec2 {
-  x: number;
-  y: number;
-}
-
-export interface ShaderOptions {
-  width: number;
-  height: number;
-  fragment: (uv: Vec2) => Vec2;
-}
-
-function smoothStep(a: number, b: number, t: number): number {
-  t = Math.max(0, Math.min(1, (t - a) / (b - a));
-  return t * t * (3 - 2 * t);
-}
-
-function length(x: number, y: number): number {
-  return Math.sqrt(x * x + y * y);
-}
-
-function roundedRectSDF(
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  radius: number
-): number {
-  const qx = Math.abs(x) - width + radius;
-  const qy = Math.abs(y) - height + radius;
-  return Math.min(Math.max(qx, qy), 0) + length(Math.max(qx, 0), Math.max(qy, 0)) - radius;
-}
-
-export const fragmentShaders = {
-  liquidGlass: (uv: Vec2): Vec2 => {
-    const ix = uv.x - 0.5;
-    const iy = uv.y - 0.5;
-    const distanceToEdge = roundedRectSDF(ix, iy, 0.3, 0.2, 0.6);
-    const displacement = smoothStep(0.8, 0, distanceToEdge - 0.15);
-    const scaled = smoothStep(0, 1, displacement);
-    return { x: ix * scaled + 0.5, y: iy * scaled + 0.5 };
-  },
-};
-
-export class ShaderDisplacementGenerator {
-  private canvas: HTMLCanvasElement;
-  private context: CanvasRenderingContext2D;
-
-  constructor(private options: ShaderOptions) {
-    this.canvas = document.createElement('canvas');
-    this.canvas.width = options.width;
-    this.canvas.height = options.height;
-    this.canvas.style.display = 'none';
-
-    const context = this.canvas.getContext('2d');
-    if (!context) {
-      throw new Error('Could not get 2D context');
-    }
-    this.context = context;
-  }
-
-  updateShader(): string {
-    const { width, height } = this.options;
-    const imageData = this.context.createImageData(width, height);
-    const data = imageData.data;
-
-    for (let y = 0; y < height; y++) {
-      for (let x = 0; x < width; x++) {
-        const uv: Vec2 = { x: x / width, y: y / height };
-        const pos = this.options.fragment(uv);
-
-        const dx = pos.x * width - x;
-        const dy = pos.y * height - y;
-
-        const r = dx / 10 + 0.5;
-        const g = dy / 10 + 0.5;
-
-        const pixelIndex = (y * width + x) * 4;
-        data[pixelIndex] = Math.max(0, Math.min(255, r * 255));
-        data[pixelIndex + 1] = Math.max(0, Math.min(255, g * 255));
-        data[pixelIndex + 2] = Math.max(0, Math.min(255, g * 255));
-        data[pixelIndex + 3] = 255;
-      }
-    }
-
-    this.context.putImageData(imageData, 0, 0);
-    return this.canvas.toDataURL();
-  }
-
-  destroy(): void {
-    this.canvas.remove();
-  }
-}

package/src/lib/utils/memoryMonitor.ts

@@ -1,191 +0,0 @@
-/**
- * Memory Monitoring Utilities
- *
- * Detects memory leaks and tracks component lifecycle memory usage
- * Only available in development mode
- */
-
-/**
- * Memory snapshot for comparison
- */
-export interface MemorySnapshot {
-  /**
-   * Used JavaScript heap size in bytes
-   */
-  usedJSHeapSize: number;
-  /**
-   * Total JavaScript heap size in bytes
-   */
-  totalJSHeapSize: number;
-  /**
-   * JavaScript heap size limit in bytes
-   */
-  jsHeapSizeLimit: number;
-  /**
-   * Timestamp of the snapshot
-   */
-  timestamp: number;
-}
-
-/**
- * Check if memory monitoring is available
- */
-export function isMemoryMonitoringAvailable(): boolean {
-  return (
-    typeof performance !== 'undefined' &&
-    'memory' in performance &&
-    (typeof process === 'undefined' || process.env?.NODE_ENV === 'development')
-  );
-}
-
-/**
- * Get current memory usage snapshot
- *
- * @returns Memory snapshot or null if not available
- */
-export function getMemorySnapshot(): MemorySnapshot | null {
-  if (!isMemoryMonitoringAvailable()) {
-    return null;
-  }
-
-  const memory = (performance as any).memory;
-
-  return {
-    usedJSHeapSize: memory.usedJSHeapSize,
-    totalJSHeapSize: memory.totalJSHeapSize,
-    jsHeapSizeLimit: memory.jsHeapSizeLimit,
-    timestamp: performance.now(),
-  };
-}
-
-/**
- * Format bytes to human-readable string
- *
- * @param bytes - Number of bytes
- * @returns Formatted string (e.g., "1.5 MB")
- */
-export function formatBytes(bytes: number): string {
-  if (bytes === 0) return '0 Bytes';
-
-  const k = 1024;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
-}
-
-/**
- * Compare two memory snapshots and detect potential leaks
- *
- * @param before - Snapshot before operation
- * @param after - Snapshot after operation
- * @param threshold - Threshold in bytes to consider a leak (default: 5MB)
- * @returns Object with leak detection results
- */
-export function detectMemoryLeak(
-  before: MemorySnapshot | null,
-  after: MemorySnapshot | null,
-  threshold: number = 5 * 1024 * 1024 // 5MB
-): {
-  hasLeak: boolean;
-  memoryIncrease: number;
-  formattedIncrease: string;
-  percentageIncrease: number;
-} {
-  if (!before || !after) {
-    return {
-      hasLeak: false,
-      memoryIncrease: 0,
-      formattedIncrease: '0 Bytes',
-      percentageIncrease: 0,
-    };
-  }
-
-  const memoryIncrease = after.usedJSHeapSize - before.usedJSHeapSize;
-  const percentageIncrease = (memoryIncrease / before.usedJSHeapSize) * 100;
-
-  return {
-    hasLeak: memoryIncrease > threshold,
-    memoryIncrease,
-    formattedIncrease: formatBytes(memoryIncrease),
-    percentageIncrease,
-  };
-}
-
-/**
- * Monitor memory usage over time
- *
- * @param interval - Interval in milliseconds to check memory
- * @param callback - Callback function called with each snapshot
- * @returns Function to stop monitoring
- */
-export function monitorMemoryUsage(
-  interval: number = 5000,
-  callback?: (snapshot: MemorySnapshot) => void
-): () => void {
-  if (!isMemoryMonitoringAvailable()) {
-    console.warn('[Memory Monitor] Memory monitoring is not available');
-    return () => {};
-  }
-
-  const checkMemory = () => {
-    const snapshot = getMemorySnapshot();
-    if (snapshot) {
-      if (callback) {
-        callback(snapshot);
-      } else if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
-        console.log('[Memory Monitor]', {
-          used: formatBytes(snapshot.usedJSHeapSize),
-          total: formatBytes(snapshot.totalJSHeapSize),
-          limit: formatBytes(snapshot.jsHeapSizeLimit),
-        });
-      }
-    }
-  };
-
-  const intervalId = setInterval(checkMemory, interval);
-
-  // Initial check
-  checkMemory();
-
-  // Return cleanup function
-  return () => {
-    clearInterval(intervalId);
-  };
-}
-
-/**
- * Track component lifecycle memory usage
- *
- * @param componentName - Name of the component
- * @returns Object with start and end tracking functions
- */
-export function trackComponentMemory(componentName: string) {
-  const before = getMemorySnapshot();
-
-  return {
-    /**
-     * Get memory snapshot at component mount
-     */
-    getBeforeSnapshot: () => before,
-    /**
-     * Get memory snapshot at component unmount and detect leaks
-     */
-    getAfterSnapshot: () => {
-      const after = getMemorySnapshot();
-      if (before && after) {
-        const leakInfo = detectMemoryLeak(before, after);
-        if (
-          leakInfo.hasLeak &&
-          (typeof process === 'undefined' || process.env?.NODE_ENV === 'development')
-        ) {
-          console.warn(
-            `[Memory Monitor] Potential memory leak detected in ${componentName}:`,
-            leakInfo
-          );
-        }
-      }
-      return after;
-    },
-  };
-}

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

@@ -1,53 +0,0 @@
-// TestTypeCheck Component Settings
-// Generated by Atomix CLI
-// =============================================================================
-
-@use 'sass:color';
-@use '../../lib/functions' as *;
-@use '../../lib/mixins' as *;
-
-// Component-specific CSS Custom Properties
-// These override or extend global design tokens
-
-:root {
-  // Brand Colors
-  --testtypecheck-primary: var(--atomix-color-primary);
-  --testtypecheck-primary-hover: color.adjust(var(--atomix-color-primary), $lightness: -10%);
-  --testtypecheck-primary-active: color.adjust(var(--atomix-color-primary), $lightness: -20%);
-  
-  // Spacing
-  --testtypecheck-padding-x: var(--atomix-spacing-4);
-  --testtypecheck-padding-y: calc(var(--atomix-spacing-4) * 0.5);
-  --testtypecheck-gap: var(--atomix-spacing-4);
-  
-  // Border Radius
-  --testtypecheck-radius: var(--atomix-radius-md);
-  
-  // Typography
-  --testtypecheck-font-size: var(--atomix-font-size-base);
-  --testtypecheck-font-weight: var(--atomix-font-weight-medium);
-  --testtypecheck-line-height: var(--atomix-line-height-tight);
-  
-  // States
-  --testtypecheck-disabled-opacity: 0.5;
-  --testtypecheck-focus-ring: 0 0 0 2px var(--atomix-color-primary-200);
-}
-
-// Dark mode overrides
-.dark {
-  :root {
-    --testtypecheck-focus-ring: 0 0 0 2px var(--atomix-color-primary-800);
-  }
-}
-
-// Component configuration map
-$testtypecheck-config: (
-  'primary': var(--testtypecheck-primary),
-  'padding-x': var(--testtypecheck-padding-x),
-  'padding-y': var(--testtypecheck-padding-y),
-  'gap': var(--testtypecheck-gap),
-  'radius': var(--testtypecheck-radius),
-  'font-size': var(--testtypecheck-font-size),
-  'font-weight': var(--testtypecheck-font-weight),
-  'line-height': var(--testtypecheck-line-height),
-) !default;

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

@@ -1,53 +0,0 @@
-// TypedButton Component Settings
-// Generated by Atomix CLI
-// =============================================================================
-
-@use 'sass:color';
-@use '../../lib/functions' as *;
-@use '../../lib/mixins' as *;
-
-// Component-specific CSS Custom Properties
-// These override or extend global design tokens
-
-:root {
-  // Brand Colors
-  --typedbutton-primary: var(--atomix-color-primary);
-  --typedbutton-primary-hover: color.adjust(var(--atomix-color-primary), $lightness: -10%);
-  --typedbutton-primary-active: color.adjust(var(--atomix-color-primary), $lightness: -20%);
-  
-  // Spacing
-  --typedbutton-padding-x: var(--atomix-spacing-4);
-  --typedbutton-padding-y: calc(var(--atomix-spacing-4) * 0.5);
-  --typedbutton-gap: var(--atomix-spacing-4);
-  
-  // Border Radius
-  --typedbutton-radius: var(--atomix-radius-md);
-  
-  // Typography
-  --typedbutton-font-size: var(--atomix-font-size-base);
-  --typedbutton-font-weight: var(--atomix-font-weight-medium);
-  --typedbutton-line-height: var(--atomix-line-height-tight);
-  
-  // States
-  --typedbutton-disabled-opacity: 0.5;
-  --typedbutton-focus-ring: 0 0 0 2px var(--atomix-color-primary-200);
-}
-
-// Dark mode overrides
-.dark {
-  :root {
-    --typedbutton-focus-ring: 0 0 0 2px var(--atomix-color-primary-800);
-  }
-}
-
-// Component configuration map
-$typedbutton-config: (
-  'primary': var(--typedbutton-primary),
-  'padding-x': var(--typedbutton-padding-x),
-  'padding-y': var(--typedbutton-padding-y),
-  'gap': var(--typedbutton-gap),
-  'radius': var(--typedbutton-radius),
-  'font-size': var(--typedbutton-font-size),
-  'font-weight': var(--typedbutton-font-weight),
-  'line-height': var(--typedbutton-line-height),
-) !default;

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

@@ -1,212 +0,0 @@
-// TestButton Component Styles
-// Generated by Atomix CLI
-// ITCSS Layer: Components
-// =============================================================================
-
-@use 'sass:map';
-@use '../../01-settings/settings.testbutton' as *;
-@use '../../02-tools/mixins' as *;
-@use '../../02-tools/functions' as *;
-
-// Base Component Class
-// =============================================================================
-
-.c-testbutton {
-  // Layout
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--testbutton-gap);
-  
-  // Spacing
-  padding: var(--testbutton-padding-y) var(--testbutton-padding-x);
-  
-  // Typography
-  font-size: var(--testbutton-font-size);
-  font-weight: var(--testbutton-font-weight);
-  line-height: var(--testbutton-line-height);
-  
-  // Appearance
-  border-radius: var(--testbutton-radius);
-  border: none;
-  cursor: pointer;
-  
-  // Transition
-  transition: all var(--atomix-duration-fast) var(--atomix-easing-smooth);
-  
-  // Focus
-  &:focus-visible {
-    outline: none;
-    box-shadow: var(--testbutton-focus-ring);
-  }
-  
-  // Disabled state
-  &:disabled {
-    opacity: var(--testbutton-disabled-opacity);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-}
-
-// Variants
-// =============================================================================
-
-@if true {
-  .c-testbutton--variant-primary {
-    background-color: var(--testbutton-primary);
-    color: var(--atomix-color-white);
-    
-    &:hover:not(:disabled) {
-      background-color: var(--testbutton-primary-hover);
-    }
-    
-    &:active:not(:disabled) {
-      background-color: var(--testbutton-primary-active);
-    }
-  }
-  
-  .c-testbutton--variant-secondary {
-    background-color: var(--atomix-color-neutral-100);
-    color: var(--atomix-color-neutral-900);
-    
-    &:hover:not(:disabled) {
-      background-color: var(--atomix-color-neutral-200);
-    }
-  }
-  
-  .c-testbutton--variant-outline {
-    background-color: transparent;
-    border: 1px solid var(--atomix-color-neutral-300);
-    color: var(--atomix-color-neutral-700);
-    
-    &:hover:not(:disabled) {
-      border-color: var(--atomix-color-neutral-400);
-      background-color: var(--atomix-color-neutral-50);
-    }
-  }
-}
-
-// Glassmorphism Variant
-// =============================================================================
-
-.c-testbutton--glass {
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px) saturate(200%);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  
-  @media (prefers-reduced-transparency: reduce) {
-    background: rgba(255, 255, 255, 0.8);
-    backdrop-filter: none;
-  }
-  
-  &:hover:not(:disabled) {
-    background: rgba(255, 255, 255, 0.15);
-  }
-}
-
-// Animation Variants
-// =============================================================================
-
-@if true {
-  // Fade In Animation
-  .c-testbutton--animate-fade-in {
-    animation: atomix-fade-in var(--atomix-duration-base) var(--atomix-easing-smooth);
-  }
-  
-  // Slide In Up Animation
-  .c-testbutton--animate-slide-in-up {
-    animation: atomix-slide-in-up var(--atomix-duration-slow) var(--atomix-easing-smooth);
-  }
-  
-  // Scale In Animation
-  .c-testbutton--animate-scale-in {
-    animation: atomix-scale-in var(--atomix-duration-base) var(--atomix-easing-smooth);
-  }
-  
-  // Pulse Animation (for loading states)
-  .c-testbutton--animate-pulse {
-    animation: atomix-pulse 2s var(--atomix-easing-smooth) infinite;
-  }
-  
-  // Shimmer Animation (for skeleton loaders)
-  .c-testbutton--animate-shimmer {
-    animation: atomix-shimmer 2s linear infinite;
-    background: linear-gradient(
-      90deg,
-      var(--atomix-color-neutral-100) 0%,
-      var(--atomix-color-neutral-200) 50%,
-      var(--atomix-color-neutral-100) 100%
-    );
-    background-size: 200% 100%;
-  }
-}
-
-// Motion Preferences
-// =============================================================================
-
-@media (prefers-reduced-motion: reduce) {
-  .c-testbutton,
-  .c-testbutton * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-// Sizes
-// =============================================================================
-
-@if true {
-  .c-testbutton--size-sm {
-    padding: calc(var(--testbutton-padding-y) * 0.75) calc(var(--testbutton-padding-x) * 0.75);
-    font-size: var(--atomix-font-size-sm);
-  }
-  
-  .c-testbutton--size-md {
-    // Default size - no overrides needed
-  }
-  
-  .c-testbutton--size-lg {
-    padding: calc(var(--testbutton-padding-y) * 1.25) calc(var(--testbutton-padding-x) * 1.25);
-    font-size: var(--atomix-font-size-lg);
-  }
-}
-
-// States
-// =============================================================================
-
-@if true {
-  .c-testbutton--state-loading {
-    position: relative;
-    pointer-events: none;
-    
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: rgba(255, 255, 255, 0.3);
-      backdrop-filter: blur(2px);
-    }
-  }
-  
-  .c-testbutton--state-glass {
-    background-color: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-  }
-}
-
-// Responsive Overrides
-// =============================================================================
-
-@include atomix-media-breakpoint-up(md) {
-  .c-testbutton {
-    // Tablet-specific adjustments if needed
-  }
-}
-
-@include atomix-media-breakpoint-up(lg) {
-  .c-testbutton {
-    // Desktop-specific adjustments if needed
-  }
-}