autumn-js 0.0.72 → 0.0.76

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "autumn-js",
   "description": "Autumn JS Library",
-  "version": "0.0.72",
+  "version": "0.0.76",
   "main": "./dist/index.js",
   "scripts": {
     "cli": "tsx src/cli/index.ts",
     "test": "echo \"Error: no test specified\" && exit 1",
     "publish-beta": "npm run build && npm publish --tag beta",
-    "build": "rm -rf dist && tsup",
-    "dev": "tsx scripts/sync-registry.ts sync && (tsx scripts/sync-registry.ts watch & nodemon --watch src --ext ts,tsx,css --exec \"tsup --config tsup.dev.config.ts\")",
+    "build": "rm -rf dist && tsup && node scripts/post-build.js",
+    "dev-old": "tsx scripts/sync-registry.ts sync && (tsx scripts/sync-registry.ts watch & nodemon --watch src --ext ts,tsx,css --exec \"tsup --config tsup.dev.config.ts\")",
+    "dev": "(tsx scripts/sync-registry.ts watch & nodemon --watch src --ext ts,tsx,css --exec \"tsup --config tsup.dev.config.ts && node scripts/post-build.js\")",
     "sync-registry": "tsx scripts/sync-registry.ts sync",
-    "reverse": "tsx scripts/sync-registry.ts reverse",
     "watch-registry": "tsx scripts/sync-registry.ts watch"
   },
   "module": "./dist/index.mjs",
@@ -70,18 +70,22 @@
   "author": "John Yeo",
   "license": "MIT",
   "devDependencies": {
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
     "@remix-run/node": "^2.16.6",
     "@supabase/ssr": "^0.6.1",
     "@tanstack/react-start": "^1.120.5",
     "@types/express": "^5.0.1",
-    "@types/node": "^22.14.1",
+    "@types/node": "^22.15.32",
     "@types/react": "^18.3.14",
     "autoprefixer": "^10.4.21",
-    "better-auth": "^1.2.7",
+    "better-auth": "^1.2.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "esbuild-plugin-alias": "^0.2.1",
     "esbuild-plugin-path-alias": "^1.0.7",
+    "esbuild-postcss": "^0.0.4",
     "express": "^5.1.0",
     "fastify": "^5.3.3",
     "hono": "^4.7.9",
@@ -90,13 +94,15 @@
     "next": "^15.2.3",
     "nodemon": "^3.1.10",
     "postcss": "^8.5.6",
+    "postcss-nested": "^7.0.2",
+    "postcss-prefix-selector": "^2.1.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7",
     "tailwindcss-scoped-preflight": "^3.4.12",
     "tsconfig-paths": "^4.2.0",
     "tsup": "^8.4.0",
     "tsx": "^4.19.3",
-    "tw-animate-css": "^1.3.4",
     "typescript": "^5.8.3"
   },
   "peerDependenciesMeta": {
@@ -105,14 +111,9 @@
     }
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.5",
     "chalk": "^5.4.1",
-    "postcss-nested": "^7.0.2",
     "rou3": "^0.6.1",
-    "swr": "^2.3.3",
-    "tailwindcss-animate": "1.0.7"
+    "swr": "^2.3.3"
   },
   "typesVersions": {
     "*": {

package/postcss.config.js

@@ -2,6 +2,24 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
-
+    "postcss-nested": {},
+    // 'postcss-prefix-selector': {
+    //   prefix: '.au-root',
+    //   transform: function (prefix, selector, prefixedSelector) {
+    //     if (selector.match(/^(html|body)/)) {
+    //       return selector.replace(/^([^\s]*)/, `$1 ${prefix}`);
+    //     }
+        
+    //     if (selector.match(/^(::?[\w-]+)/)) {
+    //       return `${prefix}${selector}`;
+    //     }
+        
+    //     if (selector.includes('*')) {
+    //       return prefixedSelector;
+    //     }
+        
+    //     return prefixedSelector;
+    //   },
+    // },
   }
 }

package/scripts/post-build.js

@@ -0,0 +1,25 @@
+const fs = require('fs');
+const path = require('path');
+
+// Post-build processing: replace CSS selectors with .au-root prefix
+function processCssFiles() {
+  const cssFilePath = path.join(__dirname, '../dist/styles/global.css');
+  
+  if (fs.existsSync(cssFilePath)) {
+    console.log('📄 Processing CSS file:', cssFilePath);
+    
+    const builtCss = fs.readFileSync(cssFilePath, 'utf8');
+    const updatedCss = builtCss.replace(
+      /(\*,\n::before,\n::after)/g,
+      '.au-root *,\n.au-root ::before,\n.au-root ::after'
+    );
+    
+    fs.writeFileSync(cssFilePath, updatedCss);
+    console.log('✅ CSS selectors updated with .au-root prefix');
+  } else {
+    console.log('⚠️ CSS file not found:', cssFilePath);
+  }
+}
+
+// Run the processing
+processCssFiles(); 

package/scripts/sync-registry.ts

@@ -4,268 +4,160 @@ import fs from "fs/promises";
 import path from "path";
 import { watch } from "fs";
 
-const REGISTRY_PATH = "../ui/registry";
-const OUTPUT_PATH = "./src/libraries/react/components";
+const UI_REGISTRY_PATH = "../ui/registry";
+const SYNCED_COMPONENTS_PATH = "./src/libraries/react/components";
 
 interface ComponentConfig {
+  syncedName: string;
   registryName: string;
-  outputName: string;
   dependencies?: string[];
 }
 
 const COMPONENTS: ComponentConfig[] = [
   {
+    syncedName: "attach-dialog",
     registryName: "attach-dialog",
-    outputName: "attach-dialog",
     dependencies: ["attach-content"],
   },
   {
+    syncedName: "check-dialog", 
     registryName: "check-dialog",
-    outputName: "check-dialog",
     dependencies: ["check-content"],
   },
   {
-    registryName: "pricing-table",
-    outputName: "pricing-table",
+    syncedName: "pricing-table",
+    registryName: "pricing-table", 
     dependencies: ["pricing-table-content"],
   },
 ];
 
 /**
- * Transform import paths from registry format to library format
+ * Remove 'au-' prefixes from Tailwind classes
  */
-function transformImports(content: string): string {
-  // Transform registry-specific lib imports (but NOT @/lib/utils)
-  content = content.replace(
-    /@\/registry\/([^\/]+)\/lib\/([^"']+)/g,
-    "./lib/$2"
-  );
-
-  // Transform registry component imports to use synced versions
-  content = content.replace(
-    /@\/registry\/([^\/]+)\/([^"']+)/g,
-    "../$1/$1-synced"
-  );
-
-  // Transform autumn-js imports to use our path aliases
-  content = content.replace(/from ["']autumn-js\/react["']/g, "from '@/index'");
-  content = content.replace(/from ["']autumn-js["']/g, "from '@sdk'");
-
-  // Keep @/components/ui and @/lib imports as-is since they work with our path aliases
-
-  return content;
+function removeAuPrefixes(content: string): string {
+  // Replace all occurrences of 'au-' with empty string in className attributes
+  return content.replace(/au-/g, "");
 }
 
 /**
- * Transform import paths from library format back to registry format
+ * Transform imports from synced format to registry format
  */
-function reverseTransformImports(content: string): string {
-  // Transform our path aliases back to autumn-js imports
+function transformImportsToRegistry(content: string): string {
+  // Transform path aliases back to autumn-js imports
   content = content.replace(/from ["']@\/index["']/g, 'from "autumn-js/react"');
   content = content.replace(/from ["']@sdk["']/g, 'from "autumn-js"');
 
-  // Transform synced component imports back to registry format
+  // Transform relative lib imports to registry format (but NOT utils)
   content = content.replace(
-    /from ["']..\/([^\/]+)\/\1-synced["']/g,
-    'from "@/registry/$1/$1"'
+    /from ["'].\/lib\/(?!utils)([^"']+)["']/g,
+    'from "@/registry/$COMPONENT_NAME/lib/$1"'
   );
 
-  // Transform component-specific lib imports back to registry format (excluding utils)
+  // Transform synced component imports back to registry format
   content = content.replace(
-    /from ["'].\/lib\/(?!utils)([^"']+)["']/g,
-    'from "@/registry/' + getCurrentComponentName() + '/lib/$1"'
+    /from ["']..\/([^\/]+)\/\1-synced["']/g,
+    'from "@/registry/$1/$1"'
   );
 
-  // Keep @/lib/utils and @/components/ui imports as-is (don't transform these)
-  // ./lib/utils should stay as @/lib/utils
+  // Keep @/lib/utils and @/components/ui imports as-is
 
   return content;
 }
 
-let currentComponentName = '';
-function getCurrentComponentName(): string {
-  return currentComponentName;
-}
-
 /**
- * Copy and transform a single component
+ * Sync a single component from synced version to registry
  */
-async function syncComponent(config: ComponentConfig): Promise<void> {
-  const registryDir = path.join(REGISTRY_PATH, config.registryName);
-  const outputDir = path.join(OUTPUT_PATH, config.outputName);
-
-  try {
-    // Create output directory
-    await fs.mkdir(outputDir, { recursive: true });
-
-    // Copy main component file
-    let mainFilePath = path.join(registryDir, `${config.registryName}.tsx`);
-    
-    // Check if file exists in subdirectory (for pricing-table structure)
-    try {
-      await fs.access(mainFilePath);
-    } catch {
-      mainFilePath = path.join(registryDir, config.registryName, `${config.registryName}.tsx`);
-    }
-    
-    const mainContent = await fs.readFile(mainFilePath, "utf-8");
-    const transformedMain = transformImports(mainContent);
-
-    await fs.writeFile(
-      path.join(outputDir, `${config.registryName}-synced.tsx`),
-      transformedMain
-    );
-
-    // Copy lib dependencies if they exist
-    if (config.dependencies) {
-      const libDir = path.join(registryDir, "lib");
-      const outputLibDir = path.join(outputDir, "lib");
-
-      try {
-        await fs.mkdir(outputLibDir, { recursive: true });
-
-        for (const dep of config.dependencies) {
-          const depPath = path.join(libDir, `${dep}.tsx`);
-          const depContent = await fs.readFile(depPath, "utf-8");
-          const transformedDep = transformImports(depContent);
-
-          await fs.writeFile(
-            path.join(outputLibDir, `${dep}.tsx`),
-            transformedDep
-          );
-        }
-      } catch (error) {
-        console.warn(`No lib directory found for ${config.registryName}`);
-      }
-    }
-
-    console.log(`✅ Synced ${config.registryName} -> ${config.outputName}`);
-  } catch (error) {
-    console.error(`❌ Failed to sync ${config.registryName}:`, error);
-  }
-}
-
-/**
- * Reverse sync a single component from library back to registry
- */
-async function reverseSyncComponent(config: ComponentConfig): Promise<void> {
-  const registryDir = path.join(REGISTRY_PATH, config.registryName);
-  const outputDir = path.join(OUTPUT_PATH, config.outputName);
-  
-  currentComponentName = config.registryName;
+async function syncComponentToRegistry(config: ComponentConfig): Promise<void> {
+  const syncedDir = path.join(SYNCED_COMPONENTS_PATH, config.syncedName);
+  const registryDir = path.join(UI_REGISTRY_PATH, config.registryName);
 
   try {
     // Read the synced component file
-    const syncedFilePath = path.join(outputDir, `${config.registryName}-synced.tsx`);
+    const syncedFilePath = path.join(syncedDir, `${config.syncedName}-synced.tsx`);
     const syncedContent = await fs.readFile(syncedFilePath, "utf-8");
-    const reverseTransformed = reverseTransformImports(syncedContent);
+    
+    // Transform content: remove au- prefixes and transform imports
+    let transformedContent = removeAuPrefixes(syncedContent);
+    transformedContent = transformImportsToRegistry(transformedContent);
+    
+    // Replace the placeholder with actual component name
+    transformedContent = transformedContent.replace(/\$COMPONENT_NAME/g, config.registryName);
 
-    // Determine the target path (handle subdirectory structure)
+    // Determine target path (handle subdirectory structure)
     let targetFilePath = path.join(registryDir, `${config.registryName}.tsx`);
     
     // Check if registry uses subdirectory structure
+    const subDirPath = path.join(registryDir, config.registryName, `${config.registryName}.tsx`);
     try {
-      await fs.access(path.join(registryDir, config.registryName, `${config.registryName}.tsx`));
-      targetFilePath = path.join(registryDir, config.registryName, `${config.registryName}.tsx`);
+      await fs.access(subDirPath);
+      targetFilePath = subDirPath;
     } catch {
-      // Use the direct path
+      // Use direct path
     }
 
-    await fs.writeFile(targetFilePath, reverseTransformed);
+    // Write the transformed content
+    await fs.writeFile(targetFilePath, transformedContent);
 
-    // Reverse sync lib dependencies if they exist
+    // Sync lib dependencies if they exist
     if (config.dependencies) {
-      const outputLibDir = path.join(outputDir, "lib");
-      const libDir = path.join(registryDir, "lib");
+      const syncedLibDir = path.join(syncedDir, "lib");
+      const registryLibDir = path.join(registryDir, "lib");
 
       try {
         for (const dep of config.dependencies) {
-          const syncedDepPath = path.join(outputLibDir, `${dep}.tsx`);
+          const syncedDepPath = path.join(syncedLibDir, `${dep}.tsx`);
           const syncedDepContent = await fs.readFile(syncedDepPath, "utf-8");
-          const reverseTransformedDep = reverseTransformImports(syncedDepContent);
+          
+          // Transform the dependency content
+          let transformedDepContent = removeAuPrefixes(syncedDepContent);
+          transformedDepContent = transformImportsToRegistry(transformedDepContent);
+          transformedDepContent = transformedDepContent.replace(/\$COMPONENT_NAME/g, config.registryName);
 
           await fs.writeFile(
-            path.join(libDir, `${dep}.tsx`),
-            reverseTransformedDep
+            path.join(registryLibDir, `${dep}.tsx`),
+            transformedDepContent
           );
         }
       } catch (error) {
-        console.warn(`No lib directory found for synced ${config.registryName}`);
+        console.warn(`No lib directory found for synced ${config.syncedName}`);
       }
     }
 
-    console.log(`🔄 Reverse synced ${config.outputName} -> ${config.registryName}`);
+    console.log(`✅ Synced ${config.syncedName} -> registry/${config.registryName}`);
   } catch (error) {
-    console.error(`❌ Failed to reverse sync ${config.registryName}:`, error);
+    console.error(`❌ Failed to sync ${config.syncedName}:`, error);
   }
 }
 
 /**
- * Update the library index to export synced components
+ * Sync all components to registry
  */
-async function updateLibraryIndex(): Promise<void> {
-  const indexPath = path.join(OUTPUT_PATH, "../index.ts");
-  let currentContent = await fs.readFile(indexPath, "utf-8");
-
-  // Remove existing auto-synced section
-  currentContent = currentContent.replace(
-    /\n\n\/\/ Auto-synced components\n[\s\S]*$/g,
-    ""
-  );
-
-  // Add exports for synced components
-  const newExports = COMPONENTS.map((config) => {
-    const exportName = config.outputName
-      .split("-")
-      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-      .join("");
-    return `export { default as ${exportName} } from "./components/${config.outputName}/${config.registryName}-synced";`;
-  }).join("\n");
-
-  const updatedContent =
-    currentContent + "\n\n// Auto-synced components\n" + newExports;
-  await fs.writeFile(indexPath, updatedContent);
-  console.log("✅ Updated library index exports");
-}
-
-/**
- * Sync all components
- */
-async function syncAll(): Promise<void> {
-  console.log("🔄 Syncing registry components...");
+async function syncAllToRegistry(): Promise<void> {
+  console.log("🔄 Syncing components to registry...");
 
   for (const component of COMPONENTS) {
-    await syncComponent(component);
+    await syncComponentToRegistry(component);
   }
 
-  await updateLibraryIndex();
-  console.log("🎉 Sync complete!");
+  console.log("🎉 Registry sync complete!");
 }
 
 /**
- * Reverse sync all components
+ * Watch synced components for changes
  */
-async function reverseSyncAll(): Promise<void> {
-  console.log("🔄 Reverse syncing components back to registry...");
-
-  for (const component of COMPONENTS) {
-    await reverseSyncComponent(component);
-  }
-
-  console.log("🎉 Reverse sync complete!");
-}
+function watchSyncedComponents(): void {
+  console.log("👀 Watching synced components for changes...");
 
-/**
- * Watch for changes and auto-sync
- */
-function watchRegistry(): void {
-  console.log("👀 Watching registry for changes...");
-
-  watch(REGISTRY_PATH, { recursive: true }, (_, filename) => {
-    if (filename && filename.endsWith(".tsx")) {
-      console.log(`📝 Detected change: ${filename}`);
-      syncAll().catch(console.error);
-    }
+  // Watch each component directory
+  COMPONENTS.forEach(config => {
+    const componentDir = path.join(SYNCED_COMPONENTS_PATH, config.syncedName);
+    
+    watch(componentDir, { recursive: true }, (_: any, filename: any) => {
+      if (filename && filename.endsWith(".tsx")) {
+        console.log(`📝 Detected change in ${config.syncedName}: ${filename}`);
+        syncComponentToRegistry(config).catch(console.error);
+      }
+    });
   });
 }
 
@@ -274,19 +166,15 @@ const command = process.argv[2];
 
 switch (command) {
   case "sync":
-    syncAll().catch(console.error);
-    break;
-  case "reverse":
-    reverseSyncAll().catch(console.error);
+    syncAllToRegistry().catch(console.error);
     break;
   case "watch":
-    syncAll()
-      .then(() => watchRegistry())
+    syncAllToRegistry()
+      .then(() => watchSyncedComponents())
       .catch(console.error);
     break;
   default:
-    console.log("Usage: tsx sync-registry.ts [sync|reverse|watch]");
-    console.log("  sync     - Sync from registry to library");
-    console.log("  reverse  - Sync from library back to registry");
-    console.log("  watch    - Sync and watch for changes");
-}
+    console.log("Usage: tsx sync-registry.ts [sync|watch]");
+    console.log("  sync     - Sync synced components to registry");
+    console.log("  watch    - Sync and watch synced components for changes");
+}

package/tailwind.config.ts

@@ -0,0 +1,96 @@
+import type { Config } from "tailwindcss";
+import tailwindAnimate from "tailwindcss-animate";
+import {
+  scopedPreflightStyles,
+  isolateInsideOfContainer,
+} from "tailwindcss-scoped-preflight";
+
+export default {
+  prefix: "au-",
+  corePlugins: {
+    preflight: false, // This removes @tailwind base completely
+  },
+  darkMode: ["class"],
+  content: ["./src/**/*.{html,js,ts,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--au-background))",
+        foreground: "hsl(var(--au-foreground))",
+        card: {
+          DEFAULT: "hsl(var(--au-card))",
+          foreground: "hsl(var(--au-card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--au-popover))",
+          foreground: "hsl(var(--au-popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--au-primary))",
+          foreground: "hsl(var(--au-primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--au-secondary))",
+          foreground: "hsl(var(--au-secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--au-muted))",
+          foreground: "hsl(var(--au-muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--au-accent))",
+          foreground: "hsl(var(--au-accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--au-destructive))",
+          foreground: "hsl(var(--au-destructive-foreground))",
+        },
+        border: "hsl(var(--au-border))",
+        input: "hsl(var(--au-input))",
+        ring: "hsl(var(--au-ring))",
+        chart: {
+          "1": "hsl(var(--au-chart-1))",
+          "2": "hsl(var(--au-chart-2))",
+          "3": "hsl(var(--au-chart-3))",
+          "4": "hsl(var(--au-chart-4))",
+          "5": "hsl(var(--au-chart-5))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--au-radius)",
+        md: "calc(var(--au-radius) - 2px)",
+        sm: "calc(var(--au-radius) - 4px)",
+      },
+      keyframes: {
+        shine: {
+          "0%": { backgroundPosition: "0% 50%" },
+          "100%": { backgroundPosition: "200% 50%" },
+        },
+        bounceFast: {
+          "0%, 100%": { transform: "translateY(0)" },
+          "20%": { transform: "translateY(-8px)" },
+          "40%": { transform: "translateY(-4px)" },
+          "60%": { transform: "translateY(-8px)" },
+          "80%": { transform: "translateY(-4px)" },
+        },
+        bounceClick: {
+          "0%": { transform: "scale(1)" },
+          "20%": { transform: "scale(0.96)" },
+          "50%": { transform: "scale(1.04)" },
+          "100%": { transform: "scale(1)" },
+        },
+      },
+      animation: {
+        shine: "shine 3s ease-in-out infinite",
+        "bounce-fast": "bounceFast 0.6s cubic-bezier(0.4,0,0.6,1) infinite",
+        "bounce-click": "bounceClick 0.3s cubic-bezier(0.4,0,0.6,1)",
+      },
+    },
+  },
+  plugins: [
+    tailwindAnimate,
+    scopedPreflightStyles({
+      isolationStrategy: isolateInsideOfContainer(".au-root"),
+    }),
+  ],
+} satisfies Config;

package/tsup.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, Options } from "tsup";
+// @ts-ignore
 import * as path from "path";
 import alias from "esbuild-plugin-alias";
 
@@ -35,8 +36,7 @@ const reactConfigs: Options[] = [
     external: ["react", "react/jsx-runtime", "react-dom"],
     bundle: true,
     banner: {
-      // js: '"use client";\nrequire("../../styles/global.css");',
-      js: '"use client";',
+      js: '"use client";\nrequire("../../styles/global.css");',
     },
     esbuildOptions(options) {
       options.plugins = options.plugins || [];
@@ -54,8 +54,7 @@ const reactConfigs: Options[] = [
     external: ["react", "react/jsx-runtime", "react-dom"],
     bundle: true,
     banner: {
-      js: '"use client";',
-      // js: '"use client";\nimport "../../styles/global.css";',
+      js: '"use client";\nimport "../../styles/global.css";',
     },
     esbuildOptions(options) {
       options.plugins = options.plugins || [];

package/tsup.dev.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig, Options } from "tsup";
 import * as path from "path";
 import alias from "esbuild-plugin-alias";
+import fs from "fs";
 
 // Path aliases that match tsconfig.json
 const pathAliases = {
@@ -35,8 +36,7 @@ const reactConfigs: Options[] = [
     external: ["react", "react/jsx-runtime", "react-dom"],
     bundle: true,
     banner: {
-      js: '"use client";',
-      // js: '"use client";\nrequire("../../styles/global.css");',
+      js: '"use client";\nrequire("../../styles/global.css");',
     },
     esbuildOptions(options) {
       options.plugins = options.plugins || [];
@@ -54,8 +54,7 @@ const reactConfigs: Options[] = [
     external: ["react", "react/jsx-runtime", "react-dom"],
     bundle: true,
     banner: {
-      js: '"use client";',
-      // js: '"use client";\nimport "../../styles/global.css";',
+      js: '"use client";\nimport "../../styles/global.css";',
     },
     esbuildOptions(options) {
       options.plugins = options.plugins || [];