osi-cards-lib 1.5.31 → 1.5.32

package/README.md

@@ -159,21 +159,43 @@ This is the **most reliable method**, especially for SASS files. The styles are
 
 **Important**:
 - ⚠️ **Case sensitive**: Use `osi-cards-lib` (lowercase), NOT `osi-cards-Lib`
-- ⚠️ **REQUIRED**: You must wrap your components in a container with the `osi-cards-container` class and `data-theme` attribute:
+- ⚠️ **REQUIRED**: You must wrap your components in a container. **RECOMMENDED: Use `<osi-cards-container>` component** (automatically handles theme and tilt):
 
 ```html
-<!-- Static theme -->
+<!-- ✅ RECOMMENDED: Use osi-cards-container component -->
+<osi-cards-container [theme]="'day'">
+  <app-ai-card-renderer [cardConfig]="card"></app-ai-card-renderer>
+</osi-cards-container>
+
+<!-- ✅ Also works with dynamic theme -->
+<osi-cards-container [theme]="cardTheme" *ngIf="cardConfig">
+  <app-ai-card-renderer [cardConfig]="cardConfig"></app-ai-card-renderer>
+</osi-cards-container>
+```
+
+**Why use the component?**
+- ✅ Automatically sets `data-theme` attribute correctly
+- ✅ Automatically adds `perspective: 1200px` for 3D tilt effects
+- ✅ Preserves 3D transform context (`transform-style: preserve-3d`)
+- ✅ Handles all container styling automatically
+- ✅ More reliable than manual div setup
+
+**Alternative (Manual Setup):**
+If you prefer a plain div, you must manually set both the class and `data-theme` attribute:
+
+```html
+<!-- ⚠️ Manual setup - requires both class and data-theme -->
 <div class="osi-cards-container" data-theme="day">
   <app-ai-card-renderer [cardConfig]="card"></app-ai-card-renderer>
 </div>
 
-<!-- Dynamic theme (Angular) -->
+<!-- Dynamic theme with manual setup -->
 <div class="osi-cards-container" [attr.data-theme]="theme" *ngIf="cardConfig">
   <app-ai-card-renderer [cardConfig]="cardConfig"></app-ai-card-renderer>
 </div>
 ```
 
-**The `data-theme` attribute is REQUIRED** - without it, styles will not apply correctly. Use `"day"` for light theme or `"night"` for dark theme.
+**The `data-theme` attribute is REQUIRED** - without it, styles will not apply correctly. Use `"day"` for light theme or `"night"` for dark theme. The component handles this automatically.
 
 #### Option B: Global Styles (For Standalone Apps)
 
@@ -236,32 +258,36 @@ export class StaticCardComponent {
 }
 ```
 
-**HTML (with scoped styles):**
+**HTML (RECOMMENDED - using OsiCardsContainerComponent):**
 
 ```html
-<div class="osi-cards-container" [attr.data-theme]="cardTheme">
+<osi-cards-container [theme]="cardTheme">
   <app-ai-card-renderer
     [cardConfig]="card"
     [streamingStage]="'complete'"
     [showLoadingByDefault]="false"
+    [tiltEnabled]="true"
     (cardInteraction)="onCardAction($event)">
   </app-ai-card-renderer>
-</div>
+</osi-cards-container>
 ```
 
-**HTML (with global styles or using OsiCardsContainerComponent):**
+**HTML (Alternative - manual div setup):**
 
 ```html
-<osi-cards-container [theme]="cardTheme">
+<div class="osi-cards-container" [attr.data-theme]="cardTheme">
   <app-ai-card-renderer
     [cardConfig]="card"
     [streamingStage]="'complete'"
     [showLoadingByDefault]="false"
+    [tiltEnabled]="true"
     (cardInteraction)="onCardAction($event)">
   </app-ai-card-renderer>
-</osi-cards-container>
+</div>
 ```
 
+**Note**: The component approach is recommended because it automatically handles theme, perspective for tilt, and 3D transform context.
+
 **Key Settings:**
 - `[streamingStage]="'complete'"` → Card is fully loaded
 - `[showLoadingByDefault]="false"` → No loading spinner
@@ -354,14 +380,14 @@ export class StreamingCardComponent {
 }
 ```
 
-**HTML (with scoped styles):**
+**HTML (RECOMMENDED - using OsiCardsContainerComponent):**
 
 ```html
 <button (click)="generateCard()" [disabled]="isStreaming">
   {{ isStreaming ? 'Generating...' : 'Generate Card' }}
 </button>
 
-<div class="osi-cards-container" [attr.data-theme]="cardTheme">
+<osi-cards-container [theme]="cardTheme">
   <app-ai-card-renderer
     [cardConfig]="card"
     [isStreaming]="isStreaming"
@@ -370,19 +396,20 @@ export class StreamingCardComponent {
     [showLoadingByDefault]="true"
     [loadingMessages]="loadingMessages"
     [loadingTitle]="'AI Analysis'"
+    [tiltEnabled]="true"
     (cardInteraction)="onCardAction($event)">
   </app-ai-card-renderer>
-</div>
+</osi-cards-container>
 ```
 
-**HTML (with global styles or using OsiCardsContainerComponent):**
+**HTML (Alternative - manual div setup):**
 
 ```html
 <button (click)="generateCard()" [disabled]="isStreaming">
   {{ isStreaming ? 'Generating...' : 'Generate Card' }}
 </button>
 
-<osi-cards-container [theme]="cardTheme">
+<div class="osi-cards-container" [attr.data-theme]="cardTheme">
   <app-ai-card-renderer
     [cardConfig]="card"
     [isStreaming]="isStreaming"
@@ -391,9 +418,10 @@ export class StreamingCardComponent {
     [showLoadingByDefault]="true"
     [loadingMessages]="loadingMessages"
     [loadingTitle]="'AI Analysis'"
+    [tiltEnabled]="true"
     (cardInteraction)="onCardAction($event)">
   </app-ai-card-renderer>
-</osi-cards-container>
+</div>
 ```
 
 **Key Settings:**
@@ -1095,14 +1123,23 @@ If you want to keep the import in your styles file:
    ```
    Then remove the `@import` from your `styles.scss`.
 
-3. **Wrap components in container** - You MUST wrap your components:
+3. **Wrap components in container** - You MUST wrap your components. **RECOMMENDED: Use `<osi-cards-container>` component** (automatically handles theme and tilt):
+   ```html
+   <!-- ✅ RECOMMENDED: Component automatically handles theme and tilt -->
+   <osi-cards-container [theme]="'day'">
+     <app-ai-card-renderer [cardConfig]="card"></app-ai-card-renderer>
+   </osi-cards-container>
+   ```
+
+   **Alternative (Manual Setup):**
    ```html
+   <!-- ⚠️ Manual setup - requires both class and data-theme -->
    <div class="osi-cards-container" data-theme="day">
      <app-ai-card-renderer [cardConfig]="card"></app-ai-card-renderer>
    </div>
    ```
 
-4. **Set theme attribute** - Add `data-theme="day"` or `data-theme="night"`:
+4. **Set theme attribute** - The component handles this automatically via `[theme]` input. For manual setup, add `data-theme="day"` or `data-theme="night"`:
    ```html
    <div class="osi-cards-container" data-theme="day">
    ```
@@ -1131,8 +1168,9 @@ Import styles in your `styles.scss`:
 
 **Common Issues:**
 - ❌ **Wrong import path**: `@import 'osi-cards-Lib/styles/_styles-scoped'` (wrong casing)
-- ❌ **Missing container**: Components not wrapped in `.osi-cards-container`
-- ❌ **Missing theme**: No `data-theme` attribute on container
+- ❌ **Missing container**: Components not wrapped in `.osi-cards-container` or `<osi-cards-container>` component
+- ❌ **Missing theme**: No `data-theme` attribute on container (use `<osi-cards-container [theme]="'day'">` to fix automatically)
+- ❌ **Tilt not working**: Missing `perspective` on container (use `<osi-cards-container>` component which adds it automatically)
 - ❌ **SCSS not compiled**: Check that your build process compiles SCSS files
 
 ### Icons not showing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "osi-cards-lib",
-  "version": "1.5.31",
+  "version": "1.5.32",
   "description": "Standalone OSI Cards library for Angular applications with CSS Layer support for easy style overrides",
   "keywords": [
     "angular",
@@ -12,35 +12,26 @@
   ],
   "author": "",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Inutilepat83/OSI-Cards.git"
-  },
-  "bugs": {
-    "url": "https://github.com/Inutilepat83/OSI-Cards/issues"
-  },
-  "homepage": "https://github.com/Inutilepat83/OSI-Cards#readme",
   "peerDependencies": {
-    "@angular/core": "^18.0.0 || ^20.0.0",
     "@angular/common": "^18.0.0 || ^20.0.0",
-    "@angular/forms": "^18.0.0 || ^20.0.0",
-    "@angular/router": "^18.0.0 || ^20.0.0",
+    "@angular/core": "^18.0.0 || ^20.0.0",
+    "@angular/animations": "^18.0.0 || ^20.0.0",
     "@angular/platform-browser": "^18.0.0 || ^20.0.0",
-    "@ngrx/store": "^17.0.0 || ^18.0.0",
-    "@ngrx/effects": "^17.0.0 || ^18.0.0",
-    "@ngrx/entity": "^17.0.0 || ^18.0.0",
-    "rxjs": "~7.8.0",
-    "zone.js": "~0.14.0 || ~0.15.0"
-  },
-  "dependencies": {
     "lucide-angular": "^0.548.0",
-    "lucide": "^0.548.0",
-    "tslib": "^2.3.0"
+    "rxjs": "~7.8.0"
   },
   "optionalDependencies": {
     "chart.js": "^4.4.0",
     "leaflet": "^1.9.4"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Inutilepat83/OSI-Cards.git"
+  },
+  "homepage": "https://github.com/Inutilepat83/OSI-Cards#readme",
+  "bugs": {
+    "url": "https://github.com/Inutilepat83/OSI-Cards/issues"
+  },
   "exports": {
     "./package.json": {
       "default": "./package.json"
@@ -88,11 +79,8 @@
       "default": "./styles/osi-cards-standalone.css"
     }
   },
-  "main": "./fesm2022/osi-cards-lib.mjs",
-  "module": "./fesm2022/osi-cards-lib.mjs",
-  "typings": "./index.d.ts",
   "sideEffects": [
     "*.css",
     "*.scss"
   ]
-}
+}

package/postcss.config.js

@@ -0,0 +1,81 @@
+/**
+ * PostCSS Configuration for OSI Cards Library
+ * 
+ * Processes CSS for:
+ * - Autoprefixer: Cross-browser compatibility
+ * - cssnano: Production minification
+ * - postcss-custom-properties: CSS variable fallbacks
+ */
+
+module.exports = {
+  plugins: [
+    // Autoprefixer for cross-browser support
+    require('autoprefixer')({
+      // Support last 2 versions of major browsers
+      overrideBrowserslist: [
+        'last 2 Chrome versions',
+        'last 2 Firefox versions',
+        'last 2 Safari versions',
+        'last 2 Edge versions',
+        'last 2 iOS versions',
+        'last 2 Android versions'
+      ],
+      // Enable grid prefixes for IE11 support if needed
+      grid: 'autoplace'
+    }),
+
+    // CSS variable fallbacks for older browsers
+    require('postcss-custom-properties')({
+      preserve: true, // Keep CSS variables in output
+      warnings: false
+    }),
+
+    // Minification for production (only in production mode)
+    ...(process.env.NODE_ENV === 'production' ? [
+      require('cssnano')({
+        preset: ['default', {
+          // Don't remove CSS comments starting with /*! (license headers)
+          discardComments: {
+            removeAll: false,
+            remove: (comment) => !comment.startsWith('!')
+          },
+          // Keep @keyframes names intact (they might be referenced in JS)
+          reduceIdents: false,
+          // Keep z-index values intact
+          zindex: false,
+          // Preserve CSS custom properties
+          colormin: false,
+          // Don't merge rules aggressively (can break specificity)
+          mergeRules: false
+        }]
+      })
+    ] : []),
+
+    // Add CSS layer fallback for older browsers
+    {
+      postcssPlugin: 'postcss-layer-fallback',
+      Once(root) {
+        // Add a comment indicating layer support
+        root.prepend({
+          text: ' CSS Layers are used. If your browser doesn\'t support @layer, styles may not cascade correctly. '
+        });
+      }
+    }
+  ]
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+