osi-cards-lib 1.5.32 → 1.5.33

package/README.md

@@ -159,43 +159,21 @@ 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. **RECOMMENDED: Use `<osi-cards-container>` component** (automatically handles theme and tilt):
+- ⚠️ **REQUIRED**: You must wrap your components in a container with the `osi-cards-container` class and `data-theme` attribute:
 
 ```html
-<!-- ✅ 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 -->
+<!-- Static theme -->
 <div class="osi-cards-container" data-theme="day">
   <app-ai-card-renderer [cardConfig]="card"></app-ai-card-renderer>
 </div>
 
-<!-- Dynamic theme with manual setup -->
+<!-- Dynamic theme (Angular) -->
 <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 component handles this automatically.
+**The `data-theme` attribute is REQUIRED** - without it, styles will not apply correctly. Use `"day"` for light theme or `"night"` for dark theme.
 
 #### Option B: Global Styles (For Standalone Apps)
 
@@ -258,36 +236,32 @@ export class StaticCardComponent {
 }
 ```
 
-**HTML (RECOMMENDED - using OsiCardsContainerComponent):**
+**HTML (with scoped styles):**
 
 ```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>
 ```
 
-**HTML (Alternative - manual div setup):**
+**HTML (with global styles or 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>
 ```
 
-**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
@@ -380,14 +354,14 @@ export class StreamingCardComponent {
 }
 ```
 
-**HTML (RECOMMENDED - using OsiCardsContainerComponent):**
+**HTML (with scoped styles):**
 
 ```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"
@@ -396,20 +370,19 @@ export class StreamingCardComponent {
     [showLoadingByDefault]="true"
     [loadingMessages]="loadingMessages"
     [loadingTitle]="'AI Analysis'"
-    [tiltEnabled]="true"
     (cardInteraction)="onCardAction($event)">
   </app-ai-card-renderer>
-</osi-cards-container>
+</div>
 ```
 
-**HTML (Alternative - manual div setup):**
+**HTML (with global styles or 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"
@@ -418,10 +391,9 @@ export class StreamingCardComponent {
     [showLoadingByDefault]="true"
     [loadingMessages]="loadingMessages"
     [loadingTitle]="'AI Analysis'"
-    [tiltEnabled]="true"
     (cardInteraction)="onCardAction($event)">
   </app-ai-card-renderer>
-</div>
+</osi-cards-container>
 ```
 
 **Key Settings:**
@@ -1123,23 +1095,14 @@ 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. **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):**
+3. **Wrap components in container** - You MUST wrap your components:
    ```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** - The component handles this automatically via `[theme]` input. For manual setup, add `data-theme="day"` or `data-theme="night"`:
+4. **Set theme attribute** - Add `data-theme="day"` or `data-theme="night"`:
    ```html
    <div class="osi-cards-container" data-theme="day">
    ```
@@ -1168,9 +1131,8 @@ 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` 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)
+- ❌ **Missing container**: Components not wrapped in `.osi-cards-container`
+- ❌ **Missing theme**: No `data-theme` attribute on container
 - ❌ **SCSS not compiled**: Check that your build process compiles SCSS files
 
 ### Icons not showing