aztomiq 1.0.0

package/scripts/analyze-screenshots.js

@@ -0,0 +1,217 @@
+#!/usr/bin/env node
+
+/**
+ * Screenshot Layout Analyzer
+ * Analyzes all screenshots to verify layout consistency
+ */
+
+const fs = require('fs').promises;
+const path = require('path');
+
+const SCREENSHOTS_DIR = './ui-test-results/screenshots';
+const OUTPUT_FILE = './ui-test-results/layout-analysis.md';
+
+async function analyzeScreenshots() {
+  console.log('🔍 Analyzing screenshots for layout consistency...\n');
+
+  const files = await fs.readdir(SCREENSHOTS_DIR);
+  const desktopScreenshots = files.filter(f => f.includes('_desktop.png'));
+  const mobileScreenshots = files.filter(f => f.includes('_mobile.png'));
+
+  console.log(`📊 Found ${desktopScreenshots.length} desktop screenshots`);
+  console.log(`📱 Found ${mobileScreenshots.length} mobile screenshots\n`);
+
+  // Group by page type
+  const pages = {
+    home: [],
+    tools: [],
+    master: [],
+    static: []
+  };
+
+  desktopScreenshots.forEach(file => {
+    const name = file.replace('_desktop.png', '');
+
+    // Remove leading underscores and parse
+    const cleanName = name.replace(/^_+/, '');
+
+    if (cleanName === 'vi_' || cleanName === 'en_' || cleanName === 'vi' || cleanName === 'en') {
+      // Homepage
+      pages.home.push(name);
+    } else if (cleanName.includes('master')) {
+      // Master tools
+      pages.master.push(name);
+    } else if (cleanName.includes('about') || cleanName.includes('privacy') || cleanName.includes('terms') || cleanName.includes('categories')) {
+      // Static pages
+      pages.static.push(name);
+    } else {
+      // Regular tools
+      pages.tools.push(name);
+    }
+  });
+
+  // Generate report
+  let report = `# 📸 Layout Analysis Report
+
+**Generated**: ${new Date().toLocaleString()}  
+**Total Screenshots**: ${desktopScreenshots.length * 2} (desktop + mobile)
+
+---
+
+## 📊 SCREENSHOT BREAKDOWN
+
+| Category | Count | Files |
+|----------|-------|-------|
+| **Homepage** | ${pages.home.length} | ${pages.home.slice(0, 3).join(', ')}... |
+| **Tools** | ${pages.tools.length} | ${pages.tools.slice(0, 3).join(', ')}... |
+| **Master Tools** | ${pages.master.length} | ${pages.master.join(', ')} |
+| **Static Pages** | ${pages.static.length} | ${pages.static.join(', ')} |
+
+---
+
+## 🎯 LAYOUT CONSISTENCY CHECKLIST
+
+### Expected Layout (1400px max-width)
+
+All pages should show:
+- ✅ Header aligned at 1400px
+- ✅ Content container at 1400px
+- ✅ Clear borders on containers
+- ✅ Consistent spacing (2rem)
+- ✅ No horizontal overflow
+
+### Manual Review Required
+
+Please review screenshots for:
+
+#### 1. **Container Alignment**
+Check that header and content align perfectly:
+\`\`\`
+┌─────────────────────────────────────────────┐
+│  Header (1400px) ← Should align             │
+├─────────────────────────────────────────────┤
+│  Content (1400px) ← Should align            │
+└─────────────────────────────────────────────┘
+\`\`\`
+
+#### 2. **Border Visibility**
+All containers should have:
+- Clear 1px border
+- Border radius (12px)
+- Box shadow
+
+#### 3. **Spacing Consistency**
+- 2rem padding inside containers
+- 2rem gap between elements
+- 2rem margin top/bottom
+
+#### 4. **Master Tools Layout**
+Should show sidebar + content:
+\`\`\`
+┌────────┐  ┌──────────────┐
+│Sidebar │  │   Content    │
+│(250px) │  │   (flex)     │
+└────────┘  └──────────────┘
+\`\`\`
+
+---
+
+## 📁 SCREENSHOTS TO REVIEW
+
+### Homepage (${pages.home.length} screenshots)
+${pages.home.map(name => `- [ ] \`${name}\``).join('\n')}
+
+### Tools (${pages.tools.length} screenshots)
+${pages.tools.map(name => `- [ ] \`${name}\``).join('\n')}
+
+### Master Tools (${pages.master.length} screenshots)
+${pages.master.map(name => `- [ ] \`${name}\``).join('\n')}
+
+### Static Pages (${pages.static.length} screenshots)
+${pages.static.map(name => `- [ ] \`${name}\``).join('\n')}
+
+---
+
+## 🔍 REVIEW PROCESS
+
+1. **Open screenshots folder**:
+   \`\`\`bash
+   open ui-test-results/screenshots/
+   \`\`\`
+
+2. **Compare desktop vs mobile**:
+   - Desktop should show full layout
+   - Mobile should stack vertically
+   - Both should maintain borders
+
+3. **Check alignment**:
+   - Use ruler/guides in image viewer
+   - Verify 1400px max-width
+   - Check header/content alignment
+
+4. **Look for issues**:
+   - Horizontal overflow
+   - Missing borders
+   - Inconsistent spacing
+   - Broken layouts
+
+---
+
+## ✅ EXPECTED RESULTS
+
+After layout unification, all pages should:
+
+1. **Perfect Alignment** ✅
+   - Header at 1400px
+   - Content at 1400px
+   - Footer at 1400px
+
+2. **Clear Borders** ✅
+   - All containers bordered
+   - Consistent border color
+   - Rounded corners
+
+3. **Consistent Spacing** ✅
+   - 2rem padding standard
+   - 2rem gaps
+   - No cramped layouts
+
+4. **Responsive** ✅
+   - Desktop: Full layout
+   - Mobile: Stacked layout
+   - Borders maintained
+
+---
+
+## 📝 NOTES
+
+- Screenshots are at 1400x900 (desktop) and 375x667 (mobile)
+- All screenshots taken with latest CSS changes
+- Review both light and dark mode if applicable
+- Check for any visual regressions
+
+---
+
+**Status**: Ready for manual review  
+**Action**: Open screenshots and verify layout consistency  
+**Report**: Mark checkboxes as you review each screenshot
+`;
+
+  await fs.writeFile(OUTPUT_FILE, report);
+  console.log(`✅ Analysis report generated: ${OUTPUT_FILE}\n`);
+
+  // Print summary
+  console.log('📊 SUMMARY');
+  console.log('─'.repeat(50));
+  console.log(`Total Pages: ${desktopScreenshots.length}`);
+  console.log(`  - Homepage: ${pages.home.length}`);
+  console.log(`  - Tools: ${pages.tools.length}`);
+  console.log(`  - Master Tools: ${pages.master.length}`);
+  console.log(`  - Static: ${pages.static.length}`);
+  console.log('─'.repeat(50));
+  console.log(`\n💡 Next: Review screenshots in ${SCREENSHOTS_DIR}`);
+  console.log(`📄 Full report: ${OUTPUT_FILE}\n`);
+}
+
+// Run
+analyzeScreenshots().catch(console.error);

package/scripts/build.js

@@ -0,0 +1,39 @@
+const fs = require('fs-extra');
+const { paths, isSecure, forceRebuild } = require('./builds/config');
+const { saveCache } = require('./builds/cache');
+const { buildAssets } = require('./builds/assets');
+const { buildPages } = require('./builds/pages');
+const { buildTemplates, createRootRedirect, copyRootFiles } = require('./builds/templates');
+// const { buildAdmin } = require('./builds/admin');
+
+(async () => {
+  console.time('🚀 Build Duration');
+  console.log(`🚀 Starting build (Secure Mode: ${isSecure ? 'ON' : 'OFF'})...`);
+
+  if (forceRebuild) {
+    try {
+      console.time("🧹 Cleaned dist folder");
+      await fs.emptyDir(paths.DIST);
+      console.timeEnd("🧹 Cleaned dist folder");
+    } catch (e) { }
+  } else {
+    await fs.ensureDir(paths.DIST);
+  }
+
+  try {
+    await buildAssets();
+    await buildPages();
+    // await buildAdmin(); 
+    await createRootRedirect();
+    await buildTemplates();
+    await copyRootFiles();
+
+    saveCache();
+    console.log('✅ Build complete!');
+  } catch (err) {
+    console.error('❌ Build Failed:', err);
+    process.exit(1);
+  }
+
+  console.timeEnd('🚀 Build Duration');
+})();

package/scripts/builds/admin.js

@@ -0,0 +1,17 @@
+const fs = require('fs-extra');
+const path = require('path');
+const { paths } = require('./config');
+
+async function buildAdmin() {
+  const adminSrc = path.join(paths.SRC, 'admin');
+  const adminDist = path.join(paths.DIST, 'admin');
+
+  if (fs.existsSync(adminSrc)) {
+    console.log('🛡️  Building Admin Panel...');
+    await fs.ensureDir(adminDist);
+    await fs.copy(adminSrc, adminDist);
+    console.log('✅ Admin Panel copied.');
+  }
+}
+
+module.exports = { buildAdmin };

package/scripts/builds/assets.js

@@ -0,0 +1,167 @@
+const fs = require('fs-extra');
+const path = require('path');
+const { execSync } = require('child_process');
+const { paths, isSecure } = require('./config');
+const { hasChanged } = require('./cache');
+const { getHash } = require('./utils');
+
+const ASSET_HASHES = {};
+function getAssetHash(relPath) {
+  if (ASSET_HASHES[relPath]) return ASSET_HASHES[relPath];
+  const fullPath = path.join(paths.DIST, relPath);
+  if (fs.existsSync(fullPath)) {
+    const content = fs.readFileSync(fullPath);
+    const hash = getHash(content).substring(0, 8);
+    ASSET_HASHES[relPath] = hash;
+    return hash;
+  }
+  return '';
+}
+
+function minifyJs(src, dest) {
+  try {
+    execSync(`npx terser "${src}" --compress --mangle --output "${dest}"`);
+  } catch (e) {
+    console.error(`Minify failed ${src}, copy raw`);
+    fs.copySync(src, dest);
+  }
+}
+
+function processJs(srcPath, destPath, fileName) {
+  if (hasChanged(srcPath) || !fs.existsSync(destPath)) {
+    if (isSecure) {
+      console.time(`📦 Obfuscating JS: ${fileName}`);
+      try {
+        const cmd = `npx javascript-obfuscator "${srcPath}" --output "${destPath}" \
+            --compact true --control-flow-flattening true --control-flow-flattening-threshold 0.5 \
+            --dead-code-injection true --identifier-names-generator hexadecimal \
+            --rename-globals true --string-array true --string-array-threshold 0.5 \
+            --transform-object-keys true`;
+        execSync(cmd);
+      } catch (e) {
+        console.error(`Obfuscation failed for ${fileName}, fallback to minify.`);
+        minifyJs(srcPath, destPath);
+      }
+      console.timeEnd(`📦 Obfuscating JS: ${fileName}`);
+    } else {
+      console.time(`📄 Copying JS: ${fileName}`);
+      fs.copySync(srcPath, destPath);
+      console.timeEnd(`📄 Copying JS: ${fileName}`);
+    }
+  }
+}
+
+async function buildAssets() {
+  const cssSrc = path.join(paths.SRC, 'assets', 'css');
+  const jsSrc = path.join(paths.SRC, 'assets', 'js');
+  const featuresDir = path.join(paths.SRC, 'features');
+  const cssDist = path.join(paths.ASSETS_DIST, 'css');
+  const jsDist = path.join(paths.ASSETS_DIST, 'js');
+  const featuresDist = path.join(paths.ASSETS_DIST, 'features');
+
+  await fs.ensureDir(paths.ASSETS_DIST);
+  await fs.ensureDir(cssDist);
+  await fs.ensureDir(jsDist);
+  await fs.ensureDir(featuresDist);
+
+  console.time('🎨 Assets Build');
+
+  // 0. Copy all raw assets (images, fonts, vendor, etc)
+  const assetsSrc = path.join(paths.SRC, 'assets');
+  if (fs.existsSync(assetsSrc)) {
+    const items = fs.readdirSync(assetsSrc);
+    for (const item of items) {
+      if (['css', 'js'].includes(item)) continue;
+      const srcPath = path.join(assetsSrc, item);
+      const destPath = path.join(paths.ASSETS_DIST, item);
+      if (hasChanged(srcPath, 'assets-copy/', false)) {
+        await fs.copy(srcPath, destPath);
+        hasChanged(srcPath, 'assets-copy/', true);
+      }
+    }
+  }
+
+  // 1. Global CSS
+  if (await fs.pathExists(cssSrc)) {
+    const files = await fs.readdir(cssSrc);
+    for (const file of files) {
+      if (!file.endsWith('.css')) continue;
+      const srcPath = path.join(cssSrc, file);
+      const destPath = path.join(cssDist, file);
+      if (hasChanged(srcPath) || !fs.existsSync(destPath)) {
+        if (isSecure) {
+          console.time(`🎨 Minifying Global CSS: ${file}`);
+          try { execSync(`npx clean-css-cli -o "${destPath}" "${srcPath}"`); }
+          catch (e) { await fs.copy(srcPath, destPath); }
+          console.timeEnd(`🎨 Minifying Global CSS: ${file}`);
+        } else {
+          console.time(`🎨 Copying Global CSS: ${file}`);
+          await fs.copy(srcPath, destPath);
+          console.timeEnd(`🎨 Copying Global CSS: ${file}`);
+        }
+      }
+    }
+  }
+
+  // 2. Global JS
+  if (await fs.pathExists(jsSrc)) {
+    const files = await fs.readdir(jsSrc);
+    for (const file of files) {
+      if (!file.endsWith('.js')) continue;
+      const srcPath = path.join(jsSrc, file);
+      const destPath = path.join(jsDist, file);
+      processJs(srcPath, destPath, file);
+    }
+  }
+
+  // 3. Feature Assets
+  if (await fs.pathExists(featuresDir)) {
+    const features = await fs.readdir(featuresDir);
+    for (const feature of features) {
+      const featDir = path.join(featuresDir, feature);
+      if (!(await fs.stat(featDir)).isDirectory()) continue;
+
+      const featDistDir = path.join(featuresDist, feature);
+      await fs.ensureDir(featDistDir);
+
+      // Feature CSS
+      const cssPath = path.join(featDir, 'style.css');
+      if (fs.existsSync(cssPath)) {
+        const destPath = path.join(featDistDir, 'style.css');
+        if (hasChanged(cssPath) || !fs.existsSync(destPath)) {
+          if (isSecure) {
+            console.time(`🎨 Minifying Feature CSS: ${feature}/style.css`);
+            try { execSync(`npx clean-css-cli -o "${destPath}" "${cssPath}"`); }
+            catch (e) { await fs.copy(cssPath, destPath); }
+            console.timeEnd(`🎨 Minifying Feature CSS: ${feature}/style.css`);
+          } else {
+            console.time(`🎨 Copying Feature CSS: ${feature}/style.css`);
+            await fs.copy(cssPath, destPath);
+            console.timeEnd(`🎨 Copying Feature CSS: ${feature}/style.css`);
+          }
+        }
+      }
+
+      // Feature JS
+      const files = fs.readdirSync(featDir);
+      for (const file of files) {
+        if (file.endsWith('.js') && file !== 'toolConfig.js') {
+          const jsSrcPath = path.join(featDir, file);
+          const jsDestPath = path.join(featDistDir, file);
+          processJs(jsSrcPath, jsDestPath, `${feature}/${file}`);
+        }
+      }
+    }
+  }
+
+  // 4. Special: Building Playground Examples from folders
+  const { buildPlaygroundExamples } = require('./playground-examples');
+  await buildPlaygroundExamples();
+
+  console.timeEnd('🎨 Assets Build');
+}
+
+module.exports = {
+  getAssetHash,
+  buildAssets
+};

package/scripts/builds/cache.js

@@ -0,0 +1,48 @@
+const fs = require('fs-extra');
+const yaml = require('js-yaml');
+const path = require('path');
+const { paths, isSecure, forceRebuild } = require('./config');
+const { getHash } = require('./utils');
+
+let buildCache = {};
+
+if (fs.existsSync(paths.CACHE_FILE)) {
+  try {
+    buildCache = yaml.load(fs.readFileSync(paths.CACHE_FILE, 'utf8')) || {};
+  } catch (e) {
+    console.warn("⚠️ Failed to load build cache, starting fresh.");
+  }
+}
+
+function hasChanged(filePath, keyPrefix = '', update = true) {
+  if (forceRebuild) return true;
+  if (!fs.existsSync(filePath)) return true;
+  if (fs.statSync(filePath).isDirectory()) return true;
+
+  const content = fs.readFileSync(filePath);
+  const currentHash = getHash(content);
+
+  // Separate cache for dev and prod
+  const modePrefix = isSecure ? 'prod/' : 'dev/';
+  const relPath = path.relative(paths.SRC, filePath);
+  const cacheKey = modePrefix + keyPrefix + relPath;
+
+  if (buildCache[cacheKey] !== currentHash) {
+    if (update) buildCache[cacheKey] = currentHash;
+    return true;
+  }
+  return false;
+}
+
+function saveCache() {
+  try {
+    fs.writeFileSync(paths.CACHE_FILE, yaml.dump(buildCache));
+  } catch (e) {
+    console.error("⚠️ Failed to save build cache:", e);
+  }
+}
+
+module.exports = {
+  hasChanged,
+  saveCache
+};

package/scripts/builds/config.js

@@ -0,0 +1,31 @@
+const path = require('path');
+
+// CLI Args
+const isSecure = process.argv.includes('--obfuscate');
+const isDev = process.argv.includes('--dev');
+let forceRebuild = process.argv.includes('--force');
+
+// Paths
+const ROOT_DIR = process.cwd();
+const SRC_DIR = path.join(ROOT_DIR, 'src');
+const DIST_DIR = path.join(ROOT_DIR, isDev ? 'dist-dev' : 'dist');
+const ASSETS_DIST = path.join(DIST_DIR, 'assets');
+const CACHE_FILE = path.join(ROOT_DIR, '.build-cache.yaml');
+
+// Internal paths for the framework itself (when running from node_modules)
+const CORE_DIR = path.resolve(__dirname, '../../');
+
+module.exports = {
+  isSecure,
+  isDev,
+  forceRebuild,
+  paths: {
+    ROOT: ROOT_DIR,
+    CORE_ROOT: CORE_DIR,
+    SRC: SRC_DIR,
+    DIST: DIST_DIR,
+    ASSETS_DIST: ASSETS_DIST,
+    CACHE_FILE: CACHE_FILE
+  },
+  setForceRebuild: (val) => { forceRebuild = val; }
+};