@base-framework/atoms 1.0.67 → 1.0.68

package/README.md

@@ -367,6 +367,121 @@ UseParent((parent) =>
 })
 ```
 
+### Responsive Breakpoint Atoms
+
+The responsive breakpoint atoms provide Tailwind CSS-like mobile-first responsive rendering. These atoms conditionally render content based on the current window size, following the mobile-first approach where each breakpoint renders when the screen size matches OR is larger.
+
+#### Available Breakpoint Atoms
+
+- `OnXs` - 0px+ (always renders, useful for mobile-only content)
+- `OnSm` - 640px+ (small devices and larger)
+- `OnMd` - 768px+ (medium devices and larger)
+- `OnLg` - 1024px+ (large devices and larger)
+- `OnXl` - 1280px+ (extra large devices and larger)
+- `On2Xl` - 1536px+ (2x extra large devices and larger)
+
+#### Usage Examples
+
+```javascript
+// Mobile-first navigation - show different nav styles for different screen sizes
+Div({ class: "navigation" }, [
+    // Mobile navigation (always shows on xs, hidden on sm+)
+    OnXs(() =>
+        Div({ class: "mobile-nav" }, [
+            Button({ class: "hamburger" }, '☰'),
+            Div({ class: "mobile-menu hidden" }, [
+                A({ href: "/home" }, 'Home'),
+                A({ href: "/about" }, 'About')
+            ])
+        ])
+    ),
+
+    // Tablet and desktop navigation (shows on md+)
+    OnMd(() =>
+        Nav({ class: "desktop-nav" }, [
+            Ul({ class: "flex space-x-4" }, [
+                Li(A({ href: "/home" }, 'Home')),
+                Li(A({ href: "/about" }, 'About')),
+                Li(A({ href: "/contact" }, 'Contact'))
+            ])
+        ])
+    )
+])
+
+// Responsive grid layouts
+Div({ class: "content-area" }, [
+    // Mobile layout (1 column)
+    OnSm(() =>
+        Div({ class: "grid grid-cols-1 gap-4" }, [
+            Card({ title: "Mobile Card 1" }),
+            Card({ title: "Mobile Card 2" })
+        ])
+    ),
+
+    // Desktop layout (3 columns)
+    OnLg(() =>
+        Div({ class: "grid grid-cols-3 gap-6" }, [
+            Card({ title: "Desktop Card 1" }),
+            Card({ title: "Desktop Card 2" }),
+            Card({ title: "Desktop Card 3" })
+        ])
+    )
+])
+
+// Access current window width in callback
+OnXl((width, element, parent) => {
+    return Div({ class: "analytics-panel" }, [
+        H2('Large Screen Analytics'),
+        P(`Screen width: ${width}px`),
+        Chart({ width: width - 100 })
+    ]);
+})
+
+// Conditional content based on screen size
+Div({ class: "hero-section" }, [
+    H1('Welcome'),
+
+    // Show detailed hero content only on larger screens
+    OnLg(() =>
+        Div({ class: "hero-details" }, [
+            P('Detailed description with more information...'),
+            Button({ class: "cta-large" }, 'Get Started Today')
+        ])
+    ),
+
+    // Show simplified content on smaller screens
+    OnSm(() =>
+        Button({ class: "cta-mobile" }, 'Start')
+    )
+])
+```
+
+#### How Responsive Atoms Work
+
+The responsive atoms use a global Data object that tracks the current window size and breakpoint. When the window is resized:
+
+1. The window width is measured
+2. The appropriate breakpoint name is determined (xs, sm, md, lg, xl, 2xl)
+3. The global `sizeData.size` property is updated
+4. All responsive atoms automatically re-evaluate and show/hide content accordingly
+
+This system provides:
+- **Efficient Performance**: Single global resize listener for all responsive atoms
+- **Mobile-First**: Each breakpoint shows on matching size AND larger (Tailwind approach)
+- **Automatic Cleanup**: No memory leaks, listeners are properly managed
+- **SSR Safe**: Works in server-side rendering environments
+
+#### Breakpoint Reference
+
+| Breakpoint | Min Width | CSS Equivalent | Use Case |
+|------------|-----------|----------------|----------|
+| OnXs       | 0px       | (always)       | Mobile phones |
+| OnSm       | 640px     | @media (min-width: 640px) | Large phones, small tablets |
+| OnMd       | 768px     | @media (min-width: 768px) | Tablets |
+| OnLg       | 1024px    | @media (min-width: 1024px) | Laptops, desktops |
+| OnXl       | 1280px    | @media (min-width: 1280px) | Large desktops |
+| On2Xl      | 1536px    | @media (min-width: 1536px) | Extra large screens |
+
 ## Contributing
 
 Contributions to Base Framework are welcome. Follow these steps to contribute:

package/copilot.md

@@ -36,9 +36,19 @@ const SecondaryButton = Atom((props, children) => Button({
 Located in `/src/on/` and `/src/use/` directories:
 
 - **On Atoms**: Conditional rendering based on data binding (`On`, `OnState`, `OnRoute`)
+- **Responsive Atoms**: Mobile-first breakpoint rendering (`OnXs`, `OnSm`, `OnMd`, `OnLg`, `OnXl`, `On2Xl`)
 - **UseParent**: Provides access to parent component context
 - Use **comment placeholders** to maintain DOM position during dynamic updates
 
+#### Responsive Breakpoint System
+The responsive atoms (`OnXs`, `OnSm`, `OnMd`, `OnLg`, `OnXl`, `On2Xl`) use a Data-based size tracking system:
+
+- Global `sizeData` object tracks current breakpoint and window width
+- Single resize listener updates all responsive atoms efficiently
+- Mobile-first approach: each breakpoint renders on matching size AND larger
+- Tailwind CSS compatible breakpoints (640px, 768px, 1024px, 1280px, 1536px)
+- Located in `/src/on/on-size.js` with re-exports in `/src/on/on.js`
+
 ## Development Workflows
 
 ### Build Process
@@ -50,6 +60,7 @@ npm run prepublishOnly  # Pre-publish build step
 ### File Structure
 - `src/atoms.js`: Main export file with all HTML element atoms
 - `src/on/on.js`: Dynamic conditional rendering atoms
+- `src/on/on-size.js`: Responsive breakpoint atoms and size tracking system
 - `src/use/use.js`: Parent component access utilities
 - `src/comment.js`: Comment placeholder utility
 
@@ -90,14 +101,22 @@ Atoms support multiple call patterns:
 - Handle previous element cleanup in `updateLayout` functions
 - Support data binding to component data, context, or state
 
+### Responsive Breakpoint Implementation
+- Responsive atoms use Data object for efficient size tracking
+- Single window resize listener manages all breakpoint updates
+- Mobile-first rendering: each breakpoint shows on current size AND larger
+- Automatic cleanup prevents memory leaks when components unmount
+- Server-side rendering safe with window existence checks
+
 ### Base Framework Integration
 - Always import `Atom` from `@base-framework/base`
 - Use `Builder.build()` and `Builder.removeNode()` for DOM manipulation
 - Leverage `dataBinder` for reactive data connections
+- Use `Data` class for global state management (e.g., responsive size tracking)
 
 ### TypeScript Support
 - Enable `allowJs: true` and `checkJs: true` in tsconfig.json
 - Generate declarations with `emitDeclarationOnly: true`
 - Map Base Framework types in `paths` configuration
 
-When working with this codebase, focus on maintaining the established patterns for atom creation, JSDoc documentation, and the flexible argument handling that allows atoms to work seamlessly within the Base Framework ecosystem.
+When working with this codebase, focus on maintaining the established patterns for atom creation, JSDoc documentation, and the flexible argument handling that allows atoms to work seamlessly within the Base Framework ecosystem. The responsive breakpoint atoms demonstrate how to integrate with the Base Framework's Data system for efficient global state management.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/atoms",
-	"version": "1.0.67",
+	"version": "1.0.68",
 	"description": "This will add default atoms to the base framework.",
 	"main": "./dist/atoms.js",
 	"scripts": {