@strands.gg/accui 0.0.7 → 0.0.8

package/README.md

@@ -13,14 +13,17 @@ Modern authentication UI components for Vue 3 with magic link support and OAuth
 - **Responsive Design** - Mobile-first approach
 - **Route Protection** - Built-in middleware for authentication
 
-## 🆕 What's New in v0.0.6
+## 🆕 What's New in v0.0.7
 
+- ✅ **Auto-Import Styles** - Styles automatically imported with components (no manual CSS import needed)
+- ✅ **Custom Styling Control** - `autoImportStyles: false` option for developers who want full styling control
+- ✅ **Enhanced Nuxt Integration** - CSS automatically included in Nuxt builds
+- ✅ **Simplified Setup** - Just install and use, styles are handled automatically
 - ✅ **Fixed Nuxt Module** - Complete rewrite with proper configuration
 - ✅ **Magic Link Signup** - Passwordless authentication flow
 - ✅ **Auto-imports** - Components and composables automatically available
 - ✅ **Route Middleware** - Built-in `auth` and `guest` middleware
 - ✅ **Updated Dependencies** - Vue 3.5.18, Vite 6.3.5, Node.js 22 support
-- ✅ **Enhanced Documentation** - Complete setup guides and examples
 
 ## 📦 Installation
 
@@ -28,13 +31,25 @@ Modern authentication UI components for Vue 3 with magic link support and OAuth
 npm install @strands.gg/accui
 ```
 
-### Import Styles
+### Styles Auto-Import
+
+**Styles are automatically imported!** No manual CSS import needed.
+
+- **Vue 3**: Styles load automatically when you import any component
+- **Nuxt 3**: Styles are automatically included when you add the module
+
+<details>
+<summary>Manual CSS Import (if needed)</summary>
+
+If you need to manually import styles for any reason:
 
 ```javascript
 // Import the CSS in your main.js or app.vue
 import '@strands.gg/accui/style.css'
 ```
 
+</details>
+
 ## 🎯 Quick Start
 
 ### Basic Vue 3 Usage
@@ -62,6 +77,7 @@ import {
   StrandsSignUp,
   useStrandsAuth 
 } from "@strands.gg/accui"
+// Styles are automatically imported! ✨
 
 // Access auth state globally
 const { user, isAuthenticated, signOut } = useStrandsAuth()
@@ -86,7 +102,7 @@ Add the module to your `nuxt.config.ts`:
 
 ```typescript
 export default defineNuxtConfig({
-  modules: ['@strands.gg/accui/nuxt'],
+  modules: ['@strands.gg/accui/nuxt'], // Styles auto-imported! ✨
   
   // Public runtime configuration
   runtimeConfig: {
@@ -118,6 +134,7 @@ interface StrandsAuthConfig {
   
   // Styling
   accentColor?: string      // Default: '#EA00A8'
+  autoImportStyles?: boolean // Default: true (disable for custom styling)
   
   // Security & Performance
   autoRefresh?: boolean     // Default: true
@@ -152,6 +169,7 @@ export default defineNuxtConfig({
         
         // Styling
         accentColor: '#8b5cf6',
+        autoImportStyles: true, // Set to false for custom styling
         
         // Route Protection
         protectedRoutes: [
@@ -307,6 +325,41 @@ The Nuxt module provides a complete authentication solution with:
 - **Composables**: Authentication state management available globally
 - **Middleware**: Route protection built-in (`auth`, `guest`, global middleware)
 - **Types**: Full TypeScript support with auto-completion
+- **Styles**: CSS automatically included in your Nuxt build
+
+### 🎨 **Auto-Import Styles**
+The Nuxt module automatically includes all necessary CSS:
+```typescript
+// Automatically added to your project:
+// - Main component styles (@strands.gg/accui/style.css)
+// - Custom accent color variables
+// - Responsive design classes
+// - Dark/light mode support
+```
+
+**Custom Styling (Disable Auto-Import):**
+```typescript
+export default defineNuxtConfig({
+  modules: ['@strands.gg/accui/nuxt'],
+  runtimeConfig: {
+    public: {
+      strandsAuth: {
+        apiBaseUrl: 'https://accounts.strands.dev',
+        clientId: 'your-client-id',
+        autoImportStyles: false, // Disable auto-import
+        // ... other options
+      }
+    }
+  },
+  // Manually control CSS imports
+  css: [
+    // Import only base styles
+    '@strands.gg/accui/style.css',
+    // Or use your own custom styles
+    '~/assets/css/custom-auth.css'
+  ]
+})
+```
 
 ### 🔒 **Route Protection**
 ```typescript
@@ -479,6 +532,32 @@ declare module '@nuxt/schema' {
 modules: ['@strands.gg/accui/nuxt']
 ```
 
+**Styles not loading:**
+```typescript
+// Check if auto-import is enabled (default: true)
+runtimeConfig: {
+  public: {
+    strandsAuth: {
+      autoImportStyles: true // Enable auto-import
+    }
+  }
+}
+
+// Or manually import styles:
+export default defineNuxtConfig({
+  css: ['@strands.gg/accui/style.css'] // Manual import
+})
+
+// For completely custom styling:
+runtimeConfig: {
+  public: {
+    strandsAuth: {
+      autoImportStyles: false // Disable auto-import
+    }
+  }
+}
+```
+
 **Middleware not working:**
 ```vue
 <!-- Ensure pages are in pages/ directory -->

package/dist/auto-import-styles.d.ts

@@ -0,0 +1,6 @@
+import { App } from 'vue';
+export declare function autoImportStyles(): void;
+export declare const StrandsStylesPlugin: {
+    install(app: App): void;
+};
+//# sourceMappingURL=auto-import-styles.d.ts.map

package/dist/auto-import-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-import-styles.d.ts","sourceRoot":"","sources":["../../../apps/accounts-ui/src/auto-import-styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAKzB,wBAAgB,gBAAgB,SAU/B;AAGD,eAAO,MAAM,mBAAmB;iBACjB,GAAG;CAIjB,CAAA"}

package/dist/nuxt/module.d.ts

@@ -53,6 +53,12 @@ export interface StrandsAuthConfig {
      * @default false
      */
     devMode?: boolean;
+    /**
+     * Automatically import CSS styles
+     * Set to false if you want to manually import styles or use custom styling
+     * @default true
+     */
+    styles?: boolean;
 }
 declare const _default: import('@nuxt/schema').NuxtModule<StrandsAuthConfig, StrandsAuthConfig, false>;
 export default _default;

package/dist/nuxt/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../../apps/accounts-ui/src/nuxt/module.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAE1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;;AAED,wBAyHE"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../../apps/accounts-ui/src/nuxt/module.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAE1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;;AAED,wBAoIE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strands.gg/accui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Strands Authentication UI Components",
   "type": "module",
   "main": "./dist/strands-auth-ui.umd.js",
@@ -12,7 +12,7 @@
       "import": "./dist/strands-auth-ui.es.js",
       "require": "./dist/strands-auth-ui.umd.js"
     },
-    "./style.css": "./dist/style.css",
+    "./style.css": "./dist/accui.css",
     "./nuxt": {
       "types": "./dist/nuxt.d.ts",
       "import": "./dist/nuxt.d.ts"