@base-framework/atoms 1.0.97 → 1.0.98

package/copilot.md

@@ -7,6 +7,52 @@ This is an npm package that provides atomic HTML components for the Base Framewo
 - `@base-framework/base`: Core framework providing `Atom`, `Builder`, and `dataBinder`
 - Built as ESM module with TypeScript declarations generated from JSDoc
 
+## CRITICAL: What Atoms Return
+**Atoms return OBJECTS, NOT DOM elements.** This is fundamental to understanding Base Atoms:
+
+```javascript
+// ✅ CORRECT - Atoms return objects
+const element = Div({ class: 'container' }); // Returns { class: 'container', tag: 'div' }
+
+// ❌ WRONG - Do NOT treat atoms as DOM elements
+const element = Div({ class: 'container' });
+element.appendChild(child); // ERROR: Objects don't have appendChild
+
+// ✅ CORRECT - Children go in the atom definition
+const element = Div({ class: 'container' }, [
+    Span('child text')
+]);
+```
+
+**The Base Framework's Builder converts these objects into DOM elements during rendering.**
+
+## Import Patterns
+
+### Available Imports
+```javascript
+// Core framework imports (from @base-framework/base package)
+import { Atom, Builder, dataBinder, Data, Component } from '@base-framework/base';
+
+// HTML element atoms (from this package)
+import { Div, Span, Button, Input, Form, Section, Article } from '@base-framework/atoms';
+
+// Conditional rendering atoms (from this package)
+import { On, OnState, OnRoute, If, IfState, OnLoad, OnStateLoad, OnOpen, OnStateOpen } from '@base-framework/atoms';
+
+// Responsive atoms (from this package)
+import { OnXs, OnSm, OnMd, OnLg, OnXl, On2Xl } from '@base-framework/atoms';
+import { OnXsOnly, OnSmOnly, OnMdOnly, OnLgOnly, OnXlOnly, On2XlOnly } from '@base-framework/atoms';
+import { OnPhone, OnTablet, OnDesktop } from '@base-framework/atoms';
+
+// Utility atoms (from this package)
+import { UseParent } from '@base-framework/atoms';
+```
+
+### Import Rules
+- **NEVER** import `Div`, `Span`, `Button` etc. from `@base-framework/base` - they come from `@base-framework/atoms`
+- **ALWAYS** import `Atom`, `Builder`, `dataBinder`, `Data`, `Component` from `@base-framework/base`
+- When creating new atom files, import `Atom` from `@base-framework/base`, not from atoms package
+
 ## Core Patterns
 
 ### Atom Creation Patterns
@@ -94,6 +140,173 @@ Atoms support multiple call patterns:
 - Children only: `Div('text')` or `Div([childrenArray])`
 - Both: `Div({class: 'text'}, children)`
 
+## Common Mistakes to Avoid
+
+### ❌ MISTAKE 1: Treating Atoms as DOM Elements
+```javascript
+// ❌ WRONG - Atoms return objects, not DOM elements
+const div = Div();
+div.appendChild(child); // ERROR
+div.innerHTML = 'text'; // ERROR
+document.body.appendChild(div); // ERROR
+
+// ✅ CORRECT - Let the framework handle DOM operations
+const div = Div({ class: 'container' }, [
+    Span('child')
+]);
+// Framework's Builder will create actual DOM elements
+```
+
+### ❌ MISTAKE 2: Forgetting Children Arrays
+```javascript
+// ❌ WRONG - Multiple children without array
+Div({ class: 'container' },
+    Span('one'),
+    Span('two')
+);
+
+// ✅ CORRECT - Wrap multiple children in array
+Div({ class: 'container' }, [
+    Span('one'),
+    Span('two')
+]);
+```
+
+### ❌ MISTAKE 3: Wrong Event Handler Signature
+```javascript
+// ❌ WRONG - Missing parent parameter
+Button({
+    click(event) {
+        // Can't access parent component
+    }
+});
+
+// ✅ CORRECT - Include both event and parent parameters
+Button({
+    click(event, parent) {
+        // Now you can access parent.data, parent.state, etc.
+        parent.data.count++;
+    }
+});
+```
+
+### ❌ MISTAKE 4: Wrong Conditional Atom Returns
+```javascript
+// ❌ WRONG - Returning undefined or not returning atom objects
+On('loaded', (loaded) => {
+    if (loaded) {
+        Content(); // Missing return statement
+    }
+});
+
+// ❌ WRONG - Returning plain objects without tag
+On('loaded', (loaded) => {
+    return { text: 'loaded' }; // Missing tag property
+});
+
+// ✅ CORRECT - Always return atom objects or null
+On('loaded', (loaded) => {
+    if (loaded) {
+        return Content(); // Return the atom
+    }
+    return null; // Or return null when condition not met
+});
+
+// ✅ CORRECT - Using ternary for cleaner code
+On('loaded', (loaded) => loaded ? Content() : Loader());
+```
+
+### ❌ MISTAKE 5: Not Spreading Props
+```javascript
+// ❌ WRONG - Losing all props passed to atom
+const CustomButton = Atom((props, children) => ({
+    tag: 'button',
+    class: 'custom-btn',
+    children
+}));
+
+// ✅ CORRECT - Spread props to preserve all properties
+const CustomButton = Atom((props, children) => ({
+    tag: 'button',
+    ...props, // Spread props to preserve everything
+    class: `custom-btn ${props.class || ''}`, // Merge classes if needed
+    children
+}));
+
+// ✅ ALSO CORRECT - Use Button atom and spread props
+const CustomButton = Atom((props, children) => Button({
+    ...props,
+    class: `custom-btn ${props.class || ''}`,
+    children
+}));
+```
+
+### ❌ MISTAKE 6: Missing Tag Property
+```javascript
+// ❌ WRONG - Creating element without tag
+const MyElement = (props) => ({
+    ...props,
+    class: 'my-element'
+});
+
+// ✅ CORRECT - Include tag property for custom elements
+const MyElement = (props) => ({
+    tag: 'div', // Must specify the HTML tag
+    ...props,
+    class: 'my-element'
+});
+
+// ✅ BETTER - Use existing atom as base
+const MyElement = Atom((props, children) => Div({
+    ...props,
+    class: 'my-element',
+    children
+}));
+```
+
+### ❌ MISTAKE 7: Wrong Responsive Atom Usage
+```javascript
+// ❌ WRONG - Not returning anything from callback
+OnMd(() => {
+    Div('content'); // Missing return
+});
+
+// ❌ WRONG - Trying to use like a wrapper component
+OnMd({
+    Div('content') // Not a function callback
+});
+
+// ✅ CORRECT - Pass callback that returns atoms
+OnMd((size, parent) => {
+    return Div({ class: 'desktop-content' }, [
+        H1('Desktop View'),
+        P('This appears on medium screens and larger')
+    ]);
+});
+
+// ✅ CORRECT - Shorter syntax
+OnMd(() => Div('Desktop content'));
+```
+
+### ❌ MISTAKE 8: Incorrect Data Binding in On Atoms
+```javascript
+// ❌ WRONG - Passing undefined data source
+On(undefined, 'loaded', (loaded) => Content());
+
+// ❌ WRONG - Wrong property name
+On('isLoaded', (loaded) => Content()); // Property might be 'loaded' not 'isLoaded'
+
+// ✅ CORRECT - Let On atom find data source automatically
+On('loaded', (loaded) => loaded ? Content() : Loader());
+
+// ✅ CORRECT - Explicitly specify data source
+On(parent.data, 'loaded', (loaded) => loaded ? Content() : Loader());
+
+// ✅ CORRECT - Use specific atom types
+OnState('loaded', (loaded) => loaded ? Content() : Loader());
+OnRoute('path', (path) => path === '/home' ? Home() : null);
+```
+
 ## Critical Implementation Details
 
 ### Dynamic Rendering (On Atoms)
@@ -119,4 +332,98 @@ Atoms support multiple call patterns:
 - 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. The responsive breakpoint atoms demonstrate how to integrate with the Base Framework's Data system for efficient global state management.
+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.
+
+## Quick Reference Guide
+
+### Golden Rules
+1. **Atoms return objects, not DOM elements**
+2. **Always wrap multiple children in arrays**
+3. **Event handlers need `(event, parent)` signature**
+4. **Conditional atom callbacks must return atom objects or null**
+5. **Always spread `...props` to preserve properties**
+6. **Custom elements need a `tag` property**
+7. **Import HTML atoms from `@base-framework/atoms`**
+8. **Import `Atom`, `Builder`, `Data` from `@base-framework/base`**
+
+### Most Common Patterns
+
+#### Creating a Basic Atom
+```javascript
+import { Atom } from '@base-framework/base';
+
+const MyAtom = Atom((props, children) => ({
+    tag: 'div',
+    ...props,
+    children
+}));
+```
+
+#### Using Atoms with Children
+```javascript
+// Single child (string or atom)
+Div('text')
+Div(Span('text'))
+
+// Multiple children (array)
+Div([
+    Span('one'),
+    Span('two')
+])
+
+// With props and children
+Div({ class: 'container' }, [
+    Span('child')
+])
+```
+
+#### Event Handlers
+```javascript
+Button({
+    click(event, parent) {
+        parent.data.count++;
+    }
+})
+```
+
+#### Conditional Rendering
+```javascript
+// Auto-detect data source
+On('loaded', (loaded) => loaded ? Content() : Loader())
+
+// Specific data source
+OnState('loaded', (loaded) => loaded ? Content() : null)
+OnRoute('path', (path) => path === '/home' ? Home() : null)
+
+// With boolean check
+OnLoad((loaded) => Dashboard())
+OnOpen(() => Modal())
+
+// With exact value match
+If('status', 'active', () => ActiveContent())
+IfState('mode', 'edit', () => Editor())
+```
+
+#### Responsive Design
+```javascript
+// Mobile-first (shows on breakpoint AND larger)
+OnMd(() => Div('Desktop navigation'))
+
+// Semantic devices
+OnPhone(() => Div('Mobile layout'))
+OnTablet(() => Div('Tablet layout'))
+OnDesktop(() => Div('Desktop layout'))
+
+// Exact breakpoint only
+OnMdOnly(() => Div('Only on medium screens'))
+```
+
+### Debugging Checklist
+When atoms don't work as expected, check:
+- [ ] Are you returning objects from atom functions?
+- [ ] Are multiple children wrapped in an array?
+- [ ] Does your custom element have a `tag` property?
+- [ ] Are you spreading `...props` to preserve properties?
+- [ ] Do event handlers have `(event, parent)` signature?
+- [ ] Are conditional callbacks returning atoms or null?
+- [ ] Are imports coming from the correct packages?

package/dist/atoms.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/atoms.js", "../src/on/on.js", "../src/comment.js", "../src/on/on-size.js", "../src/use/use.js"],
-  "sourcesContent": ["import { Atom } from '@base-framework/base';\r\nimport { If, IfState, On, On2Xl, On2XlOnly, OnDesktop, OnLg, OnLgOnly, OnLoad, OnMd, OnMdOnly, OnOpen, OnPhone, OnRoute, OnSm, OnSmOnly, OnState, OnStateLoad, OnStateOpen, OnTablet, OnXl, OnXlOnly, OnXs, OnXsOnly } from './on/on.js';\r\nimport { UseParent } from './use/use.js';\r\nexport { If, IfState, On, On2Xl, On2XlOnly, OnDesktop, OnLg, OnLgOnly, OnLoad, OnMd, OnMdOnly, OnOpen, OnPhone, OnRoute, OnSm, OnSmOnly, OnState, OnStateLoad, OnStateOpen, OnTablet, OnXl, OnXlOnly, OnXs, OnXsOnly, UseParent };\r\n\r\n/**\r\n * Creates a generic HTML tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @param {array} children - Children elements of the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nconst Tag = (props, children) => {\r\n    return { ...props, children };\r\n};\r\n\r\n/**\r\n * Creates a Doctype tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nexport const Doctype = (props) => ({ ...props, tag: 'DOCTYPE' });\r\n\r\n/**\r\n * Creates an HTML tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @param {array} children - Children elements of the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nexport const Html = Atom((props, children) => Tag({ ...props, tag: 'html' }, children));\r\n\r\n/**\r\n * Creates a script tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @param {array} children - Children elements of the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nexport const Script = Atom((props, children) => Tag({ ...props, tag: 'script' }, children));\r\n\r\n/**\r\n * Creates a style tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @param {array} children - Children elements of the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nexport const Style = Atom((props, children) => Tag({ ...props, tag: 'style' }, children));\r\n\r\n/**\r\n * Creates a head tag.\r\n *\r\n * @param {object} props - Properties for the head element.\r\n * @param {array} children - Children elements of the head.\r\n * @returns {object} - Returns an object representing the head element.\r\n */\r\nexport const Head = Atom((props, children) => Tag({ ...props, tag: 'head' }, children));\r\n\r\n/**\r\n * Creates a title tag.\r\n *\r\n * @param {object} props - Properties for the title element.\r\n */\r\nexport const Title = (props) =>\r\n{\r\n    return { ...props };\r\n};\r\n\r\n/**\r\n * Creates a meta tag.\r\n *\r\n * @param {object} props - Properties for the meta element.\r\n * @returns {object} - Returns an object representing the meta element.\r\n */\r\nexport const Meta = (props) => ({ ...props, tag: 'meta' });\r\n\r\n/**\r\n * Creates a link tag.\r\n *\r\n * @param {object} props - Properties for the link element.\r\n * @returns {object} - Returns an object representing the link element.\r\n */\r\nexport const Link = (props) => ({ ...props, tag: 'link' });\r\n\r\n/**\r\n * Creates a body tag.\r\n *\r\n * @param {object} props - Properties for the body element.\r\n * @param {array} children - Children elements of the body.\r\n * @returns {object} - Returns an object representing the body element.\r\n */\r\nexport const Body = Atom((props, children) => Tag({ ...props, tag: 'body' }, children));\r\n\r\n/**\r\n * Creates a div element.\r\n *\r\n * @param {object} props - Properties for the div element.\r\n * @param {array} children - Children elements of the div.\r\n * @returns {object} - Returns an object representing the div element.\r\n */\r\nexport const Div = Atom((props, children) => Tag(props, children));\r\n\r\n/**\r\n * Creates a dialog element.\r\n *\r\n * @param {object} props - Properties for the div element.\r\n * @param {array} children - Children elements of the div.\r\n * @returns {object} - Returns an object representing the dialog element.\r\n */\r\nexport const Dialog = Atom((props, children) => Tag({ ...props, tag: 'dialog' }, children));\r\n\r\n/**\r\n * Creates a span element.\r\n *\r\n * @param {object} props - Properties for the span element.\r\n * @param {array} children - Children elements of the span.\r\n * @returns {object} - Returns an object representing the span element.\r\n */\r\nexport const Span = Atom((props, children) => Tag({ ...props, tag: 'span' }, children));\r\n\r\n/**\r\n * Creates a paragraph (p) element.\r\n *\r\n * @param {object} props - Properties for the paragraph element.\r\n * @param {array} children - Children elements of the paragraph.\r\n * @returns {object} - Returns an object representing the paragraph element.\r\n */\r\nexport const P = Atom((props, children) => Tag({ ...props, tag: 'p' }, children));\r\n\r\n/**\r\n * Creates an anchor (a) element.\r\n *\r\n * @param {object} props - Properties for the anchor element.\r\n * @param {array} children - Children elements of the anchor.\r\n * @return {object} - Returns an object representing the anchor element.\r\n */\r\nexport const A = Atom((props, children) => Tag({ ...props, tag: 'a' }, children));\r\n\r\n/**\r\n * Creates a button element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Button = Atom((props, children) => Tag({ ...props, tag: 'button' }, children));\r\n\r\n/**\r\n * Creates a submit button element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const SubmitButton = Atom((props, children) => Button({ ...props, type: 'submit' }, children));\r\n\r\n/**\r\n * Creates an unordered list (ul) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Ul = Atom((props, children) => Tag({ ...props, tag: 'ul' }, children));\r\n\r\n/**\r\n * Creates a list item (li) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Li = Atom((props, children) => Tag({ ...props, tag: 'li' }, children));\r\n\r\n/**\r\n * Creates an image (img) element.\r\n */\r\nexport const Img = Atom((props) => Tag({ ...props, tag: 'img' }, null));\r\n\r\n/**\r\n * Create a br element.\r\n *\r\n * @param {object} props - Properties for the br element.\r\n * @returns {object} - Returns an object representing the br element.\r\n */\r\nexport const Br = Atom((props) => Tag({ ...props, tag: 'br' }, null));\r\n\r\n/**\r\n * Creates a horizontal rule (hr) element.\r\n *\r\n * @param {object} props - Properties for the hr element.\r\n * @returns {object} - Returns an object representing the hr element.\r\n */\r\nexport const Hr = Atom((props) => Tag({ ...props, tag: 'hr' }, null));\r\n\r\n/**\r\n * Creates a text (text) element.\r\n *\r\n * @param {object} props - Properties for the text element.\r\n * @param {array} children - Children elements of the text element.\r\n * @returns {object} - Returns an object representing the text element.\r\n */\r\nexport const Text = Atom((props, children) => Tag({ ...props, tag: 'text' }, children));\r\n\r\n/**\r\n * Creates a header 1 (h1) element.\r\n *\r\n * @param {object} props - Properties for the h1 element.\r\n * @param {array} children - Children elements of the h1 element.\r\n * @returns {object} - Returns an object representing the h1 element.\r\n */\r\nexport const H1 = Atom((props, children) => Tag({ ...props, tag: 'h1' }, children));\r\n\r\n/**\r\n * Creates a header 2 (h2) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H2 = Atom((props, children) => Tag({ ...props, tag: 'h2' }, children));\r\n\r\n/**\r\n * Creates a header 3 (h3) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H3 = Atom((props, children) => Tag({ ...props, tag: 'h3' }, children));\r\n\r\n/**\r\n * Creates a header 4 (h4) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H4 = Atom((props, children) => Tag({ ...props, tag: 'h4' }, children));\r\n\r\n/**\r\n * Creates a header 5 (h5) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H5 = Atom((props, children) => Tag({ ...props, tag: 'h5' }, children));\r\n\r\n/**\r\n * Creates a header 6 (h6) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H6 = Atom((props, children) => Tag({ ...props, tag: 'h6' }, children));\r\n\r\n/**\r\n * Creates an input element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Input = Atom((props) => Tag({ ...props, tag: 'input' }, null));\r\n\r\n/**\r\n * Creates a label element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Label = Atom((props, children) => Tag({ ...props, tag: 'label' }, children));\r\n\r\n/**\r\n * Creates a checkbox input element.\r\n *\r\n * @param {object} props - Properties for the checkbox input element.\r\n * @returns {object} - Returns an object representing the checkbox input element.\r\n */\r\nexport const Checkbox = Atom((props) => Input({ ...props, type: 'checkbox' }));\r\n\r\n/**\r\n * Creates a section element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Section = Atom((props, children) => Tag({ ...props, tag: 'section' }, children));\r\n\r\n/**\r\n * Creates an article element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Article = Atom((props, children) => Tag({ ...props, tag: 'article' }, children));\r\n\r\n/**\r\n * Creates a header (header) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Header = Atom((props, children) => Tag({ ...props, tag: 'header' }, children));\r\n\r\n/**\r\n * Creates a footer element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Footer = Atom((props, children) => Tag({ ...props, tag: 'footer' }, children));\r\n\r\n/**\r\n * Creates a nav element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Nav = Atom((props, children) => Tag({ ...props, tag: 'nav' }, children));\r\n\r\n/**\r\n * Creates an aside element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Aside = Atom((props, children) => Tag({ ...props, tag: 'aside' }, children));\r\n\r\n/**\r\n * Creates a figure element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Figure = Atom((props, children) => Tag({ ...props, tag: 'figure' }, children));\r\n\r\n/**\r\n * Creates a figcaption element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Figcaption = Atom((props, children) => Tag({ ...props, tag: 'figcaption' }, children));\r\n\r\n/**\r\n * Creates a main element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Main = Atom((props, children) => Tag({ ...props, tag: 'main' }, children));\r\n\r\n/**\r\n * Creates a video element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Video = Atom((props, children) => Tag({ ...props, tag: 'video' }, children));\r\n\r\n/**\r\n * Creates an audio element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Audio = Atom((props, children) => Tag({ ...props, tag: 'audio' }, children));\r\n\r\n/**\r\n * Creates a table element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Table = Atom((props, children) => Tag({ ...props, tag: 'table' }, children));\r\n\r\n/**\r\n * Creates a table row (tr) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Tr = Atom((props, children) => Tag({ ...props, tag: 'tr' }, children));\r\n\r\n/**\r\n * Creates a table header (th) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Th = Atom((props, children) => Tag({ ...props, tag: 'th' }, children));\r\n\r\n/**\r\n * Creates a table data (td) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Td = Atom((props, children) => Tag({ ...props, tag: 'td' }, children));\r\n\r\n/**\r\n * Creates a table header group (thead) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Thead = Atom((props, children) => Tag({ ...props, tag: 'thead' }, children));\r\n\r\n/**\r\n * Creates a table body (tbody) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Tbody = Atom((props, children) => Tag({ ...props, tag: 'tbody' }, children));\r\n\r\n/**\r\n * Creates a table footer (tfoot) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Tfoot = Atom((props, children) => Tag({ ...props, tag: 'tfoot' }, children));\r\n\r\n/**\r\n * Creates a form element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Form = Atom((props, children) => Tag({ ...props, tag: 'form' }, children));\r\n\r\n/**\r\n * Creates a select element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Select = Atom((props, children) => Tag({ ...props, tag: 'select' }, children));\r\n\r\n/**\r\n * Creates an option element for a select tag.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Option = Atom((props, children) => Tag({ ...props, tag: 'option' }, children));\r\n\r\n/**\r\n * Creates a textarea element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Textarea = Atom((props, children) => Tag({ ...props, tag: 'textarea' }, children));\r\n\r\n/**\r\n * Creates a canvas element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Canvas = Atom((props, children) => Tag({ ...props, tag: 'canvas' }, children));\r\n\r\n/**\r\n * Creates a progress element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Progress = Atom((props, children) => Tag({ ...props, tag: 'progress' }, children));\r\n\r\n/**\r\n * Creates a blockquote element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Blockquote = Atom((props, children) => Tag({ ...props, tag: 'blockquote' }, children));\r\n\r\n/**\r\n * Creates a preformatted text (pre) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Pre = Atom((props, children) => Tag({ ...props, tag: 'pre' }, children));\r\n\r\n/**\r\n * Creates a code element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Code = Atom((props, children) => Tag({ ...props, tag: 'code' }, children));\r\n\r\n/**\r\n * Creates an ordered list (ol) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Ol = Atom((props, children) => Tag({ ...props, tag: 'ol' }, children));\r\n\r\n/**\r\n * Creates a definition list (dl) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Dl = Atom((props, children) => Tag({ ...props, tag: 'dl' }, children));\r\n\r\n/**\r\n * Creates a definition term (dt) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Dt = Atom((props, children) => Tag({ ...props, tag: 'dt' }, children));\r\n\r\n/**\r\n * Creates a definition description (dd) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Dd = Atom((props, children) => Tag({ ...props, tag: 'dd' }, children));\r\n\r\n/**\r\n * Creates a fieldset element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Fieldset = Atom((props, children) => Tag({ ...props, tag: 'fieldset' }, children));\r\n\r\n/**\r\n * Creates a legend element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Legend = Atom((props, children) => Tag({ ...props, tag: 'legend' }, children));\r\n\r\n/**\r\n * Creates a meter element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Meter = Atom((props, children) => Tag({ ...props, tag: 'meter' }, children));\r\n\r\n/**\r\n * Creates an iframe element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Iframe = Atom((props, children) => Tag({ ...props, tag: 'iframe' }, children));\r\n\r\n/**\r\n * Creates a details element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Details = Atom((props, children) => Tag({ ...props, tag: 'details' }, children));\r\n\r\n/**\r\n * Creates a summary element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Summary = Atom((props, children) => Tag({ ...props, tag: 'summary' }, children));\r\n\r\n/**\r\n * Creates an em element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Em = Atom((props, children) => Tag({ ...props, tag: 'em' }, children));\r\n\r\n/**\r\n * Creates a strong element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Strong = Atom((props, children) => Tag({ ...props, tag: 'strong' }, children));\r\n\r\n/**\r\n * Creates a small element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Small = Atom((props, children) => Tag({ ...props, tag: 'small' }, children));\r\n\r\n/**\r\n * Creates a s element (strikethrough).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const S = Atom((props, children) => Tag({ ...props, tag: 's' }, children));\r\n\r\n/**\r\n * Creates a cite element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Cite = Atom((props, children) => Tag({ ...props, tag: 'cite' }, children));\r\n\r\n/**\r\n * Creates a q element (inline quotation).\r\n */\r\nexport const Q = Atom((props, children) => Tag({ ...props, tag: 'q' }, children));\r\n\r\n/**\r\n * Creates a dfn element (definition element).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Dfn = Atom((props, children) => Tag({ ...props, tag: 'dfn' }, children));\r\n\r\n/**\r\n * Creates an abbr element (abbreviation).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Abbr = Atom((props, children) => Tag({ ...props, tag: 'abbr' }, children));\r\n\r\n/**\r\n * Creates a data element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Data = Atom((props, children) => Tag({ ...props, tag: 'data' }, children));\r\n\r\n/**\r\n * Creates a time element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Time = Atom((props, children) => Tag({ ...props, tag: 'time' }, children));\r\n\r\n/**\r\n * Creates a var element (variable).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Var = Atom((props, children) => Tag({ ...props, tag: 'var' }, children));\r\n\r\n/**\r\n * Creates a samp element (sample output).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Samp = Atom((props, children) => Tag({ ...props, tag: 'samp' }, children));\r\n\r\n/**\r\n * Creates a kbd element (keyboard input).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Kbd = Atom((props, children) => Tag({ ...props, tag: 'kbd' }, children));\r\n\r\n/**\r\n * Creates a sub element (subscript).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Sub = Atom((props, children) => Tag({ ...props, tag: 'sub' }, children));\r\n\r\n/**\r\n * Creates a sup element (superscript).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Sup = Atom((props, children) => Tag({ ...props, tag: 'sup' }, children));\r\n\r\n/**\r\n * Creates an i element (italic).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const I = Atom((props, children) => Tag({ ...props, tag: 'i' }, children));\r\n\r\n/**\r\n * Creates a b element (bold).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const B = Atom((props, children) => Tag({ ...props, tag: 'b' }, children));\r\n\r\n/**\r\n * Creates a u element (underline).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const U = Atom((props, children) => Tag({ ...props, tag: 'u' }, children));\r\n\r\n/**\r\n * Creates a mark element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Mark = Atom((props, children) => Tag({ ...props, tag: 'mark' }, children));\r\n\r\n/**\r\n * Creates a ruby element (for East Asian typography).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Ruby = Atom((props, children) => Tag({ ...props, tag: 'ruby' }, children));\r\n\r\n/**\r\n * Creates an rt element (explanation/pronunciation of characters in East Asian typography).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Rt = Atom((props, children) => Tag({ ...props, tag: 'rt' }, children));\r\n\r\n/**\r\n * Creates an rp element (for East Asian fallback parenthesis).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Rp = Atom((props, children) => Tag({ ...props, tag: 'rp' }, children));\r\n\r\n/**\r\n * Creates a bdi element (Bi-Directional Isolation).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Bdi = Atom((props, children) => Tag({ ...props, tag: 'bdi' }, children));\r\n\r\n/**\r\n * Creates a bdo element (Bi-Directional Override).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Bdo = Atom((props, children) => Tag({ ...props, tag: 'bdo' }, children));\r\n\r\n/**\r\n * Creates a wbr element (Word Break Opportunity).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Wbr = Atom((props) => Tag({ ...props, tag: 'wbr' }, null));\r\n\r\n/**\r\n * This will create a comment.\r\n *\r\n * @param {object} props\r\n * @returns {object}\r\n */\r\nexport const Comment = Atom((props) => Tag({ ...props, tag: 'comment' }, null));", "import { Builder, dataBinder } from \"@base-framework/base\";\r\nimport { Comment as BaseComment } from \"src/comment.js\";\r\n\r\n/**\r\n * Data source types for conditional rendering atoms.\r\n */\r\nconst DATA_SOURCES =\r\n{\r\n\tPARENT: 'parent',\r\n\tSTATE: 'state',\r\n\tROUTE: 'route'\r\n};\r\n\r\n/**\r\n * Gets the appropriate data source based on the type.\r\n *\r\n * @param {object} parent - The parent component\r\n * @param {string} sourceType - The data source type\r\n * @returns {object|null} The data source\r\n */\r\nconst getDataSource = (parent, sourceType) =>\r\n{\r\n\tswitch (sourceType)\r\n\t{\r\n\t\tcase DATA_SOURCES.PARENT:\r\n\t\t\treturn getParentData(parent);\r\n\t\tcase DATA_SOURCES.STATE:\r\n\t\t\treturn parent.state;\r\n\t\tcase DATA_SOURCES.ROUTE:\r\n\t\t\treturn parent.route;\r\n\t\tdefault:\r\n\t\t\treturn null;\r\n\t}\r\n};\r\n\r\n/**\r\n * Creates a conditional callback that only executes when the value equals the expected value.\r\n *\r\n * @param {function} callback - The callback to execute\r\n * @param {*} expectedValue - The value to compare against\r\n * @param {*} [fallback=null] - The fallback value when condition is not met\r\n * @returns {function} The conditional callback\r\n */\r\nconst createEqualityCallback = (callback, expectedValue, fallback = null) =>\r\n{\r\n\treturn (value, ele, parent) =>\r\n\t{\r\n\t\treturn (value === expectedValue) ? callback(value, ele, parent) : fallback;\r\n\t};\r\n};\r\n\r\n/**\r\n * Creates a conditional callback that only executes when the value is truthy.\r\n *\r\n * @param {function} callback - The callback to execute\r\n * @param {*} [fallback=null] - The fallback value when condition is not met\r\n * @returns {function} The conditional callback\r\n */\r\nconst createBooleanCallback = (callback, fallback = null) =>\r\n{\r\n\treturn createEqualityCallback(callback, true, fallback);\r\n};\r\n\r\n/**\r\n * Generic factory for creating conditional rendering atoms.\r\n *\r\n * @param {string} dataSourceType - The type of data source to use\r\n * @param {string|null} [defaultProp=null] - Default property name for this atom type\r\n * @param {function|null} [callbackTransformer=null] - Function to transform the callback\r\n * @returns {function} The atom factory function\r\n */\r\nconst createConditionalAtom = (dataSourceType, defaultProp = null, callbackTransformer = null) =>\r\n{\r\n\treturn (...args) =>\r\n\t{\r\n\t\tconst settings = [...args];\r\n\t\tconst callback = settings.pop();\r\n\t\tif (typeof callback !== 'function')\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\treturn Comment(\r\n\t\t{\r\n\t\t\tonCreated: (ele, parent) =>\r\n\t\t\t{\r\n\t\t\t\t// Auto-inject data source if not provided\r\n\t\t\t\tif (settings.length < (defaultProp ? 1 : 2))\r\n\t\t\t\t{\r\n\t\t\t\t\tconst data = getDataSource(parent, dataSourceType);\r\n\t\t\t\t\tsettings.unshift(data);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// Use default property if provided and not specified\r\n\t\t\t\tconst prop = defaultProp || settings[1];\r\n\t\t\t\tconst finalCallback = callbackTransformer ? callbackTransformer(callback, settings) : callback;\r\n\r\n\t\t\t\tconst update = updateLayout(finalCallback, ele, prop, parent);\r\n\t\t\t\tdataBinder.watch(ele, settings[0], prop, update);\r\n\t\t\t}\r\n\t\t});\r\n\t};\r\n};\r\n\r\n/**\r\n * Special factory for OnLoad-style functions that have different argument patterns.\r\n *\r\n * @param {string} dataSourceType - The type of data source to use\r\n * @param {string} prop - The property name to watch\r\n * @param {function} callbackTransformer - Function to transform the callback\r\n * @returns {function} The atom factory function\r\n */\r\nconst createLoadStyleAtom = (dataSourceType, prop, callbackTransformer) =>\r\n{\r\n\treturn (...args) =>\r\n\t{\r\n\t\tconst settings = [...args];\r\n\t\tconst callback = (typeof settings[0] === 'function') ? settings[0] : settings[1];\r\n\t\tif (typeof callback !== 'function')\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\treturn Comment(\r\n\t\t{\r\n\t\t\tonCreated: (ele, parent) =>\r\n\t\t\t{\r\n\t\t\t\tif (settings.length < 2 || typeof settings[0] === 'function')\r\n\t\t\t\t{\r\n\t\t\t\t\tconst data = getDataSource(parent, dataSourceType);\r\n\t\t\t\t\tsettings.unshift(data);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tconst finalCallback = callbackTransformer(callback, settings);\r\n\t\t\t\tconst update = updateLayout(finalCallback, ele, prop, parent);\r\n\t\t\t\tdataBinder.watch(ele, settings[0], prop, update);\r\n\t\t\t}\r\n\t\t});\r\n\t};\r\n};\r\n\r\n/**\r\n * This will set up the update layout function.\r\n *\r\n * @param {function} callBack\r\n * @param {object} ele\r\n * @param {string} prop\r\n * @param {object} parent\r\n * @returns {function}\r\n */\r\nconst updateLayout = (callBack, ele, prop, parent) =>\r\n{\r\n\t/**\r\n\t * This will update the layout.\r\n\t *\r\n\t * @param {object} value\r\n\t * @returns {void}\r\n\t */\r\n\treturn (value) =>\r\n\t{\r\n\t\t/**\r\n\t\t * This will remove the previous element if it exists.\r\n\t\t */\r\n\t\tif (ele._prevEle)\r\n\t\t{\r\n\t\t\tBuilder.removeNode(ele._prevEle);\r\n\t\t\tele._prevEle = null;\r\n\t\t}\r\n\r\n\t\tlet layout = callBack(value, ele, parent);\r\n\t\tif (layout === undefined)\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t/**\r\n\t\t * This will build the layout and insert it after the\r\n\t\t * comment element.\r\n\t\t */\r\n\t\tconst frag = Builder.build(layout, null, parent);\r\n\t\tele._prevEle = frag.childNodes[0];\r\n\r\n\t\tele.parentNode.insertBefore(frag, ele.nextSibling);\r\n\t};\r\n};\r\n\r\n/**\r\n * This will create a comment.\r\n *\r\n * @param {object} props\r\n * @returns {object}\r\n */\r\nconst Comment = (props) => BaseComment({\r\n\ttype: 'on',\r\n\tonCreated: props.onCreated,\r\n\tonDestroyed: (ele) =>\r\n\t{\r\n\t\tif (ele._prevEle)\r\n\t\t{\r\n\t\t\tBuilder.removeNode(ele._prevEle);\r\n\t\t\tele._prevEle = null;\r\n\t\t}\r\n\t}\r\n});\r\n\r\n/**\r\n * This will get the parent set data.\r\n *\r\n * @param {object} parent\r\n * @returns {object|null}\r\n */\r\nexport const getParentData = (parent) =>\r\n{\r\n\tif (parent.data)\r\n\t{\r\n\t\treturn parent.data;\r\n\t}\r\n\r\n\tif (parent.context && parent.context.data)\r\n\t{\r\n\t\treturn parent.context.data;\r\n\t}\r\n\r\n\tif (parent.state)\r\n\t{\r\n\t\treturn parent.state;\r\n\t}\r\n\r\n\treturn null;\r\n};\r\n\r\n/**\r\n * This will create an on data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const On = createConditionalAtom(DATA_SOURCES.PARENT);\r\n\r\n/**\r\n * This will create an on state tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnState = createConditionalAtom(DATA_SOURCES.STATE);\r\n\r\n/**\r\n * This will create an on route tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnRoute = createConditionalAtom(DATA_SOURCES.ROUTE);\r\n\r\n/**\r\n * This will create an if data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {*} value\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {*} value\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const If = createConditionalAtom(\r\n\tDATA_SOURCES.PARENT,\r\n\tnull,\r\n\t(callback, settings) => createEqualityCallback(callback, settings[2])\r\n);\r\n\r\n/**\r\n * This will create an if state tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {*} value\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {*} value\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const IfState = createConditionalAtom(\r\n\tDATA_SOURCES.STATE,\r\n\tnull,\r\n\t(callback, settings) => createEqualityCallback(callback, settings[2])\r\n);\r\n\r\n/**\r\n * This will create an on load data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @overload\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnLoad = createLoadStyleAtom(\r\n\tDATA_SOURCES.PARENT,\r\n\t'loaded',\r\n\t(callback, settings) =>\r\n\t{\r\n\t\tconst notLoaded = (settings.length === 3) ? settings[2] : null;\r\n\t\treturn createBooleanCallback(callback, notLoaded);\r\n\t}\r\n);\r\n\r\n/**\r\n * This will create an on state load tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @overload\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnStateLoad = createLoadStyleAtom(\r\n\tDATA_SOURCES.STATE,\r\n\t'loaded',\r\n\t(callback, settings) =>\r\n\t{\r\n\t\tconst notLoaded = (settings.length === 3) ? settings[2] : null;\r\n\t\treturn createBooleanCallback(callback, notLoaded);\r\n\t}\r\n);\r\n\r\n/**\r\n * This will create an on open data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnOpen = createLoadStyleAtom(\r\n\tDATA_SOURCES.PARENT,\r\n\t'open',\r\n\t(callback) => createBooleanCallback(callback)\r\n);\r\n\r\n/**\r\n * This will create an on state open tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnStateOpen = createLoadStyleAtom(\r\n\tDATA_SOURCES.STATE,\r\n\t'open',\r\n\t(callback) => createBooleanCallback(callback)\r\n);\r\n\r\n// Re-export responsive atoms from on-size.js for backward compatibility\r\nexport { On2Xl, On2XlOnly, OnDesktop, OnLg, OnLgOnly, OnMd, OnMdOnly, OnPhone, OnSm, OnSmOnly, OnTablet, OnXl, OnXlOnly, OnXs, OnXsOnly } from './on-size.js';\r\n\r\n", "/**\r\n * This will create a comment.\r\n *\r\n * @param {object} props\r\n * @returns {object}\r\n */\r\nexport const Comment = (props) => ({\r\n    tag: 'comment',\r\n    textContent: `${props.type} placeholder`,\r\n    onCreated: props.onCreated,\r\n    onDestroyed: props.onDestroyed\r\n});", "import { Data } from \"@base-framework/base\";\r\nimport { On } from \"./on.js\";\r\n\r\n/**\r\n * Tailwind CSS breakpoint sizes (mobile-first).\r\n */\r\nconst BREAKPOINTS =\r\n{\r\n\txs: 0,     // Extra small devices\r\n\tsm: 640,   // Small devices\r\n\tmd: 768,   // Medium devices\r\n\tlg: 1024,  // Large devices\r\n\txl: 1280,  // Extra large devices\r\n\t'2xl': 1536 // 2x extra large devices\r\n};\r\n\r\n/**\r\n * Gets the current breakpoint name based on window width.\r\n *\r\n * @param {number} width - The window width\r\n * @returns {string} The breakpoint name\r\n */\r\nconst getBreakpointName = (width) =>\r\n{\r\n\tif (width >= BREAKPOINTS['2xl']) return '2xl';\r\n\tif (width >= BREAKPOINTS.xl) return 'xl';\r\n\tif (width >= BREAKPOINTS.lg) return 'lg';\r\n\tif (width >= BREAKPOINTS.md) return 'md';\r\n\tif (width >= BREAKPOINTS.sm) return 'sm';\r\n\treturn 'xs';\r\n};\r\n\r\n/**\r\n * Checks if current window width meets the breakpoint requirement.\r\n *\r\n * @param {string} currentBreakpoint - Current breakpoint name\r\n * @param {string} targetBreakpoint - Target breakpoint to check\r\n * @returns {boolean} True if current breakpoint is >= target breakpoint\r\n */\r\nconst matchesBreakpoint = (currentBreakpoint, targetBreakpoint) =>\r\n{\r\n\tconst current = BREAKPOINTS[currentBreakpoint] || 0;\r\n\tconst target = BREAKPOINTS[targetBreakpoint] || 0;\r\n\treturn current >= target;\r\n};\r\n\r\n/**\r\n * Global data object for window size tracking.\r\n */\r\nconst sizeData = new Data({\r\n\tsize: null,\r\n\twidth: 0\r\n});\r\n\r\n/**\r\n * Initialize the size tracking system.\r\n */\r\nconst initializeSizeTracker = () =>\r\n{\r\n\tif (typeof window === 'undefined')\r\n\t{\r\n\t\treturn;\r\n\t}\r\n\r\n\t// Set initial values\r\n\tconst currentWidth = window.innerWidth;\r\n\tconst currentBreakpoint = getBreakpointName(currentWidth);\r\n\r\n\t// @ts-ignore\r\n\tsizeData.size = currentBreakpoint;\r\n\t// @ts-ignore\r\n\tsizeData.width = currentWidth;\r\n\r\n\t/**\r\n\t * Handle window resize events.\r\n\t */\r\n\tconst handleResize = () =>\r\n\t{\r\n\t\tconst newWidth = window.innerWidth;\r\n\t\tconst newBreakpoint = getBreakpointName(newWidth);\r\n\r\n\t\t// Only update if the breakpoint or width actually changed\r\n\t\t// @ts-ignore\r\n\t\tif (newWidth !== sizeData.width || newBreakpoint !== sizeData.size)\r\n\t\t{\r\n\t\t\t// @ts-ignore\r\n\t\t\tsizeData.width = newWidth;\r\n\t\t\t// @ts-ignore\r\n\t\t\tsizeData.size = newBreakpoint;\r\n\t\t}\r\n\t};\r\n\r\n\t// Add resize listener\r\n\twindow.addEventListener('resize', handleResize);\r\n\r\n\t// Return cleanup function\r\n\treturn () =>\r\n\t{\r\n\t\twindow.removeEventListener('resize', handleResize);\r\n\t};\r\n};\r\n\r\n// Initialize the tracker immediately\r\nlet cleanup = null;\r\nif (typeof window !== 'undefined')\r\n{\r\n\tcleanup = initializeSizeTracker();\r\n}\r\n\r\n/**\r\n * Factory for creating responsive breakpoint atoms.\r\n *\r\n * @param {string} targetBreakpoint - The breakpoint name (xs, sm, md, lg, xl, 2xl)\r\n * @returns {function} The responsive atom factory function\r\n */\r\nconst createResponsiveAtom = (targetBreakpoint) =>\r\n{\r\n\treturn (callback) =>\r\n\t{\r\n\t\tif (typeof callback !== 'function')\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// Use the On atom to watch the sizeData.size property\r\n\t\treturn On(sizeData, 'size', (currentBreakpoint, ele, parent) =>\r\n\t\t{\r\n\t\t\t// Check if current breakpoint meets the target requirement\r\n\t\t\tif (matchesBreakpoint(currentBreakpoint, targetBreakpoint))\r\n\t\t\t{\r\n\t\t\t\t// Pass the current size to the callback for additional context\r\n\t\t\t\t// @ts-ignore\r\n\t\t\t\treturn callback(sizeData.size, parent);\r\n\t\t\t}\r\n\r\n\t\t\t// Return null to prevent rendering when breakpoint doesn't match\r\n\t\t\treturn null;\r\n\t\t});\r\n\t};\r\n};\r\n\r\n/**\r\n * This will create a responsive xs breakpoint atom (0px+).\r\n * Renders when window width is 0px or larger (always renders).\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnXs = createResponsiveAtom('xs');\r\n\r\n/**\r\n * This will create a responsive sm breakpoint atom (640px+).\r\n * Renders when window width is 640px or larger.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnSm = createResponsiveAtom('sm');\r\n\r\n/**\r\n * This will create a responsive md breakpoint atom (768px+).\r\n * Renders when window width is 768px or larger.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnMd = createResponsiveAtom('md');\r\n\r\n/**\r\n * This will create a responsive lg breakpoint atom (1024px+).\r\n * Renders when window width is 1024px or larger.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnLg = createResponsiveAtom('lg');\r\n\r\n/**\r\n * This will create a responsive xl breakpoint atom (1280px+).\r\n * Renders when window width is 1280px or larger.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnXl = createResponsiveAtom('xl');\r\n\r\n/**\r\n * This will create a responsive 2xl breakpoint atom (1536px+).\r\n * Renders when window width is 1536px or larger.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const On2Xl = createResponsiveAtom('2xl');\r\n\r\n/**\r\n * Export the size data for external access if needed.\r\n */\r\nexport { sizeData };\r\n\r\n/**\r\n * Factory for creating exact breakpoint atoms (only renders on specific size).\r\n *\r\n * @param {string} targetBreakpoint - The exact breakpoint name\r\n * @returns {function} The exact responsive atom factory function\r\n */\r\nconst createExactBreakpointAtom = (targetBreakpoint) =>\r\n{\r\n\treturn (callback) =>\r\n\t{\r\n\t\tif (typeof callback !== 'function')\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// Use the On atom to watch the sizeData.size property\r\n\t\treturn On(sizeData, 'size', (currentBreakpoint, ele, parent) =>\r\n\t\t{\r\n\t\t\t// Only render if current breakpoint exactly matches target\r\n\t\t\tif (currentBreakpoint === targetBreakpoint)\r\n\t\t\t{\r\n\t\t\t\treturn callback(currentBreakpoint, parent);\r\n\t\t\t}\r\n\r\n\t\t\t// Return null to prevent rendering when breakpoint doesn't match\r\n\t\t\treturn null;\r\n\t\t});\r\n\t};\r\n};\r\n\r\n/**\r\n * Renders only on xs breakpoint (0-639px).\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnXsOnly = createExactBreakpointAtom('xs');\r\n\r\n/**\r\n * Renders only on sm breakpoint (640-767px).\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnSmOnly = createExactBreakpointAtom('sm');\r\n\r\n/**\r\n * Renders only on md breakpoint (768-1023px).\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnMdOnly = createExactBreakpointAtom('md');\r\n\r\n/**\r\n * Renders only on lg breakpoint (1024-1279px).\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnLgOnly = createExactBreakpointAtom('lg');\r\n\r\n/**\r\n * Renders only on xl breakpoint (1280-1535px).\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnXlOnly = createExactBreakpointAtom('xl');\r\n\r\n/**\r\n * Renders only on 2xl breakpoint (1536px+).\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const On2XlOnly = createExactBreakpointAtom('2xl');\r\n\r\n/**\r\n * Factory for creating semantic device breakpoint atoms.\r\n *\r\n * @param {string[]} targetBreakpoints - Array of breakpoint names that match this device\r\n * @returns {function} The semantic responsive atom factory function\r\n */\r\nconst createSemanticBreakpointAtom = (targetBreakpoints) =>\r\n{\r\n\treturn (callback) =>\r\n\t{\r\n\t\tif (typeof callback !== 'function')\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// Use the On atom to watch the sizeData.size property\r\n\t\treturn On(sizeData, 'size', (currentBreakpoint, ele, parent) =>\r\n\t\t{\r\n\t\t\t// Check if current breakpoint is in the target breakpoints array\r\n\t\t\tif (targetBreakpoints.includes(currentBreakpoint))\r\n\t\t\t{\r\n\t\t\t\t// @ts-ignore - Data class supports proxy access\r\n\t\t\t\treturn callback(sizeData.size, parent);\r\n\t\t\t}\r\n\r\n\t\t\t// Return null to prevent rendering when breakpoint doesn't match\r\n\t\t\treturn null;\r\n\t\t});\r\n\t};\r\n};\r\n\r\n/**\r\n * Renders on phone-sized devices (xs and sm breakpoints: 0-767px).\r\n * Includes extra small and small devices.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnPhone = createSemanticBreakpointAtom(['xs', 'sm']);\r\n\r\n/**\r\n * Renders on tablet-sized devices (md breakpoint: 768-1023px).\r\n * Includes medium devices.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnTablet = createSemanticBreakpointAtom(['md']);\r\n\r\n/**\r\n * Renders on desktop-sized devices (lg, xl, 2xl breakpoints: 1024px+).\r\n * Includes large, extra large, and 2x extra large devices.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnDesktop = createSemanticBreakpointAtom(['lg', 'xl', '2xl']);\r\n\r\n/**\r\n * Export cleanup function for testing or manual cleanup.\r\n */\r\nexport { cleanup as cleanupSizeTracker };\r\n\r\n\r\n", "import { Builder } from \"@base-framework/base\";\r\nimport { Comment as BaseComment } from \"src/comment.js\";\r\n\r\n/**\r\n * This will set up the update layout function.\r\n *\r\n * @param {function} callBack\r\n * @param {object} ele\r\n * @param {object} parent\r\n * @returns {function}\r\n */\r\nconst updateLayout = (callBack, ele, parent) =>\r\n{\r\n\t/**\r\n\t * This will remove the previous element if it exists.\r\n\t */\r\n\tif (ele._prevEle)\r\n\t{\r\n\t\tBuilder.removeNode(ele._prevEle);\r\n\t\tele._prevEle = null;\r\n\t}\r\n\r\n\tconst layout = callBack(parent);\r\n\tif (layout === undefined)\r\n\t{\r\n\t\treturn;\r\n\t}\r\n\r\n\t/**\r\n\t * This will build the layout and insert it after the\r\n\t * comment element.\r\n\t */\r\n\tconst frag = Builder.build(layout, null, parent);\r\n\tele._prevEle = frag.childNodes[0];\r\n\r\n\tele.parentNode.insertBefore(frag, ele.nextSibling);\r\n};\r\n\r\n/**\r\n * This will create a comment.\r\n *\r\n * @param {object} props\r\n * @returns {object}\r\n */\r\nconst Comment = (props) => BaseComment({\r\n\ttype: 'use',\r\n\tonCreated: props.onCreated,\r\n\tonDestroyed: (ele) =>\r\n\t{\r\n\t\tif (ele._prevEle)\r\n\t\t{\r\n\t\t\tBuilder.removeNode(ele._prevEle);\r\n\t\t\tele._prevEle = null;\r\n\t\t}\r\n\t}\r\n});\r\n\r\n/**\r\n * This will create a use parent tag.\r\n *\r\n * @param {function} callBack\r\n * @returns {object}\r\n */\r\nexport const UseParent = (callBack) =>\r\n{\r\n\t/**\r\n\t * This will create a comment to use as a placeholder\r\n\t * to keep the layout in place.\r\n\t */\r\n\treturn Comment({\r\n\t\tonCreated: (ele, parent) =>\r\n\t\t{\r\n\t\t\tupdateLayout(callBack, ele, parent);\r\n\t\t}\r\n\t});\r\n};"],
+  "sourcesContent": ["import { Atom } from '@base-framework/base';\r\nimport { If, IfState, On, On2Xl, On2XlOnly, OnDesktop, OnLg, OnLgOnly, OnLoad, OnMd, OnMdOnly, OnOpen, OnPhone, OnRoute, OnSm, OnSmOnly, OnState, OnStateLoad, OnStateOpen, OnTablet, OnXl, OnXlOnly, OnXs, OnXsOnly } from './on/on.js';\r\nimport { UseParent } from './use/use.js';\r\nexport { If, IfState, On, On2Xl, On2XlOnly, OnDesktop, OnLg, OnLgOnly, OnLoad, OnMd, OnMdOnly, OnOpen, OnPhone, OnRoute, OnSm, OnSmOnly, OnState, OnStateLoad, OnStateOpen, OnTablet, OnXl, OnXlOnly, OnXs, OnXsOnly, UseParent };\r\n\r\n/**\r\n * Creates a generic HTML tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @param {array} children - Children elements of the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nconst Tag = (props, children) => {\r\n    return { ...props, children };\r\n};\r\n\r\n/**\r\n * Creates a Doctype tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nexport const Doctype = (props) => ({ ...props, tag: 'DOCTYPE' });\r\n\r\n/**\r\n * Creates an HTML tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @param {array} children - Children elements of the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nexport const Html = Atom((props, children) => Tag({ ...props, tag: 'html' }, children));\r\n\r\n/**\r\n * Creates a script tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @param {array} children - Children elements of the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nexport const Script = Atom((props, children) => Tag({ ...props, tag: 'script' }, children));\r\n\r\n/**\r\n * Creates a style tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @param {array} children - Children elements of the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nexport const Style = Atom((props, children) => Tag({ ...props, tag: 'style' }, children));\r\n\r\n/**\r\n * Creates a head tag.\r\n *\r\n * @param {object} props - Properties for the head element.\r\n * @param {array} children - Children elements of the head.\r\n * @returns {object} - Returns an object representing the head element.\r\n */\r\nexport const Head = Atom((props, children) => Tag({ ...props, tag: 'head' }, children));\r\n\r\n/**\r\n * Creates a title tag.\r\n *\r\n * @param {object} props - Properties for the title element.\r\n */\r\nexport const Title = (props) =>\r\n{\r\n    return { ...props };\r\n};\r\n\r\n/**\r\n * Creates a meta tag.\r\n *\r\n * @param {object} props - Properties for the meta element.\r\n * @returns {object} - Returns an object representing the meta element.\r\n */\r\nexport const Meta = (props) => ({ ...props, tag: 'meta' });\r\n\r\n/**\r\n * Creates a link tag.\r\n *\r\n * @param {object} props - Properties for the link element.\r\n * @returns {object} - Returns an object representing the link element.\r\n */\r\nexport const Link = (props) => ({ ...props, tag: 'link' });\r\n\r\n/**\r\n * Creates a body tag.\r\n *\r\n * @param {object} props - Properties for the body element.\r\n * @param {array} children - Children elements of the body.\r\n * @returns {object} - Returns an object representing the body element.\r\n */\r\nexport const Body = Atom((props, children) => Tag({ ...props, tag: 'body' }, children));\r\n\r\n/**\r\n * Creates a div element.\r\n *\r\n * @param {object} props - Properties for the div element.\r\n * @param {array} children - Children elements of the div.\r\n * @returns {object} - Returns an object representing the div element.\r\n */\r\nexport const Div = Atom((props, children) => Tag(props, children));\r\n\r\n/**\r\n * Creates a dialog element.\r\n *\r\n * @param {object} props - Properties for the div element.\r\n * @param {array} children - Children elements of the div.\r\n * @returns {object} - Returns an object representing the dialog element.\r\n */\r\nexport const Dialog = Atom((props, children) => Tag({ ...props, tag: 'dialog' }, children));\r\n\r\n/**\r\n * Creates a span element.\r\n *\r\n * @param {object} props - Properties for the span element.\r\n * @param {array} children - Children elements of the span.\r\n * @returns {object} - Returns an object representing the span element.\r\n */\r\nexport const Span = Atom((props, children) => Tag({ ...props, tag: 'span' }, children));\r\n\r\n/**\r\n * Creates a paragraph (p) element.\r\n *\r\n * @param {object} props - Properties for the paragraph element.\r\n * @param {array} children - Children elements of the paragraph.\r\n * @returns {object} - Returns an object representing the paragraph element.\r\n */\r\nexport const P = Atom((props, children) => Tag({ ...props, tag: 'p' }, children));\r\n\r\n/**\r\n * Creates an anchor (a) element.\r\n *\r\n * @param {object} props - Properties for the anchor element.\r\n * @param {array} children - Children elements of the anchor.\r\n * @return {object} - Returns an object representing the anchor element.\r\n */\r\nexport const A = Atom((props, children) => Tag({ ...props, tag: 'a' }, children));\r\n\r\n/**\r\n * Creates a button element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Button = Atom((props, children) => Tag({ ...props, tag: 'button' }, children));\r\n\r\n/**\r\n * Creates a submit button element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const SubmitButton = Atom((props, children) => Button({ ...props, type: 'submit' }, children));\r\n\r\n/**\r\n * Creates an unordered list (ul) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Ul = Atom((props, children) => Tag({ ...props, tag: 'ul' }, children));\r\n\r\n/**\r\n * Creates a list item (li) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Li = Atom((props, children) => Tag({ ...props, tag: 'li' }, children));\r\n\r\n/**\r\n * Creates an image (img) element.\r\n */\r\nexport const Img = Atom((props) => Tag({ ...props, tag: 'img' }, null));\r\n\r\n/**\r\n * Create a br element.\r\n *\r\n * @param {object} props - Properties for the br element.\r\n * @returns {object} - Returns an object representing the br element.\r\n */\r\nexport const Br = Atom((props) => Tag({ ...props, tag: 'br' }, null));\r\n\r\n/**\r\n * Creates a horizontal rule (hr) element.\r\n *\r\n * @param {object} props - Properties for the hr element.\r\n * @returns {object} - Returns an object representing the hr element.\r\n */\r\nexport const Hr = Atom((props) => Tag({ ...props, tag: 'hr' }, null));\r\n\r\n/**\r\n * Creates a text (text) element.\r\n *\r\n * @param {object} props - Properties for the text element.\r\n * @param {array} children - Children elements of the text element.\r\n * @returns {object} - Returns an object representing the text element.\r\n */\r\nexport const Text = Atom((props, children) => Tag({ ...props, tag: 'text' }, children));\r\n\r\n/**\r\n * Creates a header 1 (h1) element.\r\n *\r\n * @param {object} props - Properties for the h1 element.\r\n * @param {array} children - Children elements of the h1 element.\r\n * @returns {object} - Returns an object representing the h1 element.\r\n */\r\nexport const H1 = Atom((props, children) => Tag({ ...props, tag: 'h1' }, children));\r\n\r\n/**\r\n * Creates a header 2 (h2) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H2 = Atom((props, children) => Tag({ ...props, tag: 'h2' }, children));\r\n\r\n/**\r\n * Creates a header 3 (h3) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H3 = Atom((props, children) => Tag({ ...props, tag: 'h3' }, children));\r\n\r\n/**\r\n * Creates a header 4 (h4) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H4 = Atom((props, children) => Tag({ ...props, tag: 'h4' }, children));\r\n\r\n/**\r\n * Creates a header 5 (h5) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H5 = Atom((props, children) => Tag({ ...props, tag: 'h5' }, children));\r\n\r\n/**\r\n * Creates a header 6 (h6) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H6 = Atom((props, children) => Tag({ ...props, tag: 'h6' }, children));\r\n\r\n/**\r\n * Creates an input element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Input = Atom((props) => Tag({ ...props, tag: 'input' }, null));\r\n\r\n/**\r\n * Creates a label element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Label = Atom((props, children) => Tag({ ...props, tag: 'label' }, children));\r\n\r\n/**\r\n * Creates a checkbox input element.\r\n *\r\n * @param {object} props - Properties for the checkbox input element.\r\n * @returns {object} - Returns an object representing the checkbox input element.\r\n */\r\nexport const Checkbox = Atom((props) => Input({ ...props, type: 'checkbox' }));\r\n\r\n/**\r\n * Creates a section element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Section = Atom((props, children) => Tag({ ...props, tag: 'section' }, children));\r\n\r\n/**\r\n * Creates an article element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Article = Atom((props, children) => Tag({ ...props, tag: 'article' }, children));\r\n\r\n/**\r\n * Creates a header (header) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Header = Atom((props, children) => Tag({ ...props, tag: 'header' }, children));\r\n\r\n/**\r\n * Creates a footer element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Footer = Atom((props, children) => Tag({ ...props, tag: 'footer' }, children));\r\n\r\n/**\r\n * Creates a nav element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Nav = Atom((props, children) => Tag({ ...props, tag: 'nav' }, children));\r\n\r\n/**\r\n * Creates an aside element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Aside = Atom((props, children) => Tag({ ...props, tag: 'aside' }, children));\r\n\r\n/**\r\n * Creates a figure element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Figure = Atom((props, children) => Tag({ ...props, tag: 'figure' }, children));\r\n\r\n/**\r\n * Creates a figcaption element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Figcaption = Atom((props, children) => Tag({ ...props, tag: 'figcaption' }, children));\r\n\r\n/**\r\n * Creates a main element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Main = Atom((props, children) => Tag({ ...props, tag: 'main' }, children));\r\n\r\n/**\r\n * Creates a video element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Video = Atom((props, children) => Tag({ ...props, tag: 'video' }, children));\r\n\r\n/**\r\n * Creates an audio element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Audio = Atom((props, children) => Tag({ ...props, tag: 'audio' }, children));\r\n\r\n/**\r\n * Creates a table element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Table = Atom((props, children) => Tag({ ...props, tag: 'table' }, children));\r\n\r\n/**\r\n * Creates a table row (tr) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Tr = Atom((props, children) => Tag({ ...props, tag: 'tr' }, children));\r\n\r\n/**\r\n * Creates a table header (th) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Th = Atom((props, children) => Tag({ ...props, tag: 'th' }, children));\r\n\r\n/**\r\n * Creates a table data (td) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Td = Atom((props, children) => Tag({ ...props, tag: 'td' }, children));\r\n\r\n/**\r\n * Creates a table header group (thead) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Thead = Atom((props, children) => Tag({ ...props, tag: 'thead' }, children));\r\n\r\n/**\r\n * Creates a table body (tbody) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Tbody = Atom((props, children) => Tag({ ...props, tag: 'tbody' }, children));\r\n\r\n/**\r\n * Creates a table footer (tfoot) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Tfoot = Atom((props, children) => Tag({ ...props, tag: 'tfoot' }, children));\r\n\r\n/**\r\n * Creates a form element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Form = Atom((props, children) => Tag({ ...props, tag: 'form' }, children));\r\n\r\n/**\r\n * Creates a select element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Select = Atom((props, children) => Tag({ ...props, tag: 'select' }, children));\r\n\r\n/**\r\n * Creates an option element for a select tag.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Option = Atom((props, children) => Tag({ ...props, tag: 'option' }, children));\r\n\r\n/**\r\n * Creates a textarea element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Textarea = Atom((props, children) => Tag({ ...props, tag: 'textarea' }, children));\r\n\r\n/**\r\n * Creates a canvas element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Canvas = Atom((props, children) => Tag({ ...props, tag: 'canvas' }, children));\r\n\r\n/**\r\n * Creates a progress element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Progress = Atom((props, children) => Tag({ ...props, tag: 'progress' }, children));\r\n\r\n/**\r\n * Creates a blockquote element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Blockquote = Atom((props, children) => Tag({ ...props, tag: 'blockquote' }, children));\r\n\r\n/**\r\n * Creates a preformatted text (pre) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Pre = Atom((props, children) => Tag({ ...props, tag: 'pre' }, children));\r\n\r\n/**\r\n * Creates a code element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Code = Atom((props, children) => Tag({ ...props, tag: 'code' }, children));\r\n\r\n/**\r\n * Creates an ordered list (ol) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Ol = Atom((props, children) => Tag({ ...props, tag: 'ol' }, children));\r\n\r\n/**\r\n * Creates a definition list (dl) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Dl = Atom((props, children) => Tag({ ...props, tag: 'dl' }, children));\r\n\r\n/**\r\n * Creates a definition term (dt) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Dt = Atom((props, children) => Tag({ ...props, tag: 'dt' }, children));\r\n\r\n/**\r\n * Creates a definition description (dd) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Dd = Atom((props, children) => Tag({ ...props, tag: 'dd' }, children));\r\n\r\n/**\r\n * Creates a fieldset element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Fieldset = Atom((props, children) => Tag({ ...props, tag: 'fieldset' }, children));\r\n\r\n/**\r\n * Creates a legend element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Legend = Atom((props, children) => Tag({ ...props, tag: 'legend' }, children));\r\n\r\n/**\r\n * Creates a meter element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Meter = Atom((props, children) => Tag({ ...props, tag: 'meter' }, children));\r\n\r\n/**\r\n * Creates an iframe element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Iframe = Atom((props, children) => Tag({ ...props, tag: 'iframe' }, children));\r\n\r\n/**\r\n * Creates a details element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Details = Atom((props, children) => Tag({ ...props, tag: 'details' }, children));\r\n\r\n/**\r\n * Creates a summary element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Summary = Atom((props, children) => Tag({ ...props, tag: 'summary' }, children));\r\n\r\n/**\r\n * Creates an em element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Em = Atom((props, children) => Tag({ ...props, tag: 'em' }, children));\r\n\r\n/**\r\n * Creates a strong element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Strong = Atom((props, children) => Tag({ ...props, tag: 'strong' }, children));\r\n\r\n/**\r\n * Creates a small element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Small = Atom((props, children) => Tag({ ...props, tag: 'small' }, children));\r\n\r\n/**\r\n * Creates a s element (strikethrough).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const S = Atom((props, children) => Tag({ ...props, tag: 's' }, children));\r\n\r\n/**\r\n * Creates a cite element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Cite = Atom((props, children) => Tag({ ...props, tag: 'cite' }, children));\r\n\r\n/**\r\n * Creates a q element (inline quotation).\r\n */\r\nexport const Q = Atom((props, children) => Tag({ ...props, tag: 'q' }, children));\r\n\r\n/**\r\n * Creates a dfn element (definition element).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Dfn = Atom((props, children) => Tag({ ...props, tag: 'dfn' }, children));\r\n\r\n/**\r\n * Creates an abbr element (abbreviation).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Abbr = Atom((props, children) => Tag({ ...props, tag: 'abbr' }, children));\r\n\r\n/**\r\n * Creates a data element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Data = Atom((props, children) => Tag({ ...props, tag: 'data' }, children));\r\n\r\n/**\r\n * Creates a time element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Time = Atom((props, children) => Tag({ ...props, tag: 'time' }, children));\r\n\r\n/**\r\n * Creates a var element (variable).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Var = Atom((props, children) => Tag({ ...props, tag: 'var' }, children));\r\n\r\n/**\r\n * Creates a samp element (sample output).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Samp = Atom((props, children) => Tag({ ...props, tag: 'samp' }, children));\r\n\r\n/**\r\n * Creates a kbd element (keyboard input).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Kbd = Atom((props, children) => Tag({ ...props, tag: 'kbd' }, children));\r\n\r\n/**\r\n * Creates a sub element (subscript).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Sub = Atom((props, children) => Tag({ ...props, tag: 'sub' }, children));\r\n\r\n/**\r\n * Creates a sup element (superscript).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Sup = Atom((props, children) => Tag({ ...props, tag: 'sup' }, children));\r\n\r\n/**\r\n * Creates an i element (italic).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const I = Atom((props, children) => Tag({ ...props, tag: 'i' }, children));\r\n\r\n/**\r\n * Creates a b element (bold).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const B = Atom((props, children) => Tag({ ...props, tag: 'b' }, children));\r\n\r\n/**\r\n * Creates a u element (underline).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const U = Atom((props, children) => Tag({ ...props, tag: 'u' }, children));\r\n\r\n/**\r\n * Creates a mark element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Mark = Atom((props, children) => Tag({ ...props, tag: 'mark' }, children));\r\n\r\n/**\r\n * Creates a ruby element (for East Asian typography).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Ruby = Atom((props, children) => Tag({ ...props, tag: 'ruby' }, children));\r\n\r\n/**\r\n * Creates an rt element (explanation/pronunciation of characters in East Asian typography).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Rt = Atom((props, children) => Tag({ ...props, tag: 'rt' }, children));\r\n\r\n/**\r\n * Creates an rp element (for East Asian fallback parenthesis).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Rp = Atom((props, children) => Tag({ ...props, tag: 'rp' }, children));\r\n\r\n/**\r\n * Creates a bdi element (Bi-Directional Isolation).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Bdi = Atom((props, children) => Tag({ ...props, tag: 'bdi' }, children));\r\n\r\n/**\r\n * Creates a bdo element (Bi-Directional Override).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Bdo = Atom((props, children) => Tag({ ...props, tag: 'bdo' }, children));\r\n\r\n/**\r\n * Creates a wbr element (Word Break Opportunity).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Wbr = Atom((props) => Tag({ ...props, tag: 'wbr' }, null));\r\n\r\n/**\r\n * This will create a comment.\r\n *\r\n * @param {object} props\r\n * @returns {object}\r\n */\r\nexport const Comment = Atom((props) => Tag({ ...props, tag: 'comment' }, null));", "import { Builder, dataBinder } from \"@base-framework/base\";\r\nimport { Comment as BaseComment } from \"../comment.js\";\r\n\r\n/**\r\n * Data source types for conditional rendering atoms.\r\n */\r\nconst DATA_SOURCES =\r\n{\r\n\tPARENT: 'parent',\r\n\tSTATE: 'state',\r\n\tROUTE: 'route'\r\n};\r\n\r\n/**\r\n * Gets the appropriate data source based on the type.\r\n *\r\n * @param {object} parent - The parent component\r\n * @param {string} sourceType - The data source type\r\n * @returns {object|null} The data source\r\n */\r\nconst getDataSource = (parent, sourceType) =>\r\n{\r\n\tswitch (sourceType)\r\n\t{\r\n\t\tcase DATA_SOURCES.PARENT:\r\n\t\t\treturn getParentData(parent);\r\n\t\tcase DATA_SOURCES.STATE:\r\n\t\t\treturn parent.state;\r\n\t\tcase DATA_SOURCES.ROUTE:\r\n\t\t\treturn parent.route;\r\n\t\tdefault:\r\n\t\t\treturn null;\r\n\t}\r\n};\r\n\r\n/**\r\n * Creates a conditional callback that only executes when the value equals the expected value.\r\n *\r\n * @param {function} callback - The callback to execute\r\n * @param {*} expectedValue - The value to compare against\r\n * @param {*} [fallback=null] - The fallback value when condition is not met\r\n * @returns {function} The conditional callback\r\n */\r\nconst createEqualityCallback = (callback, expectedValue, fallback = null) =>\r\n{\r\n\treturn (value, ele, parent) =>\r\n\t{\r\n\t\treturn (value === expectedValue) ? callback(value, ele, parent) : fallback;\r\n\t};\r\n};\r\n\r\n/**\r\n * Creates a conditional callback that only executes when the value is truthy.\r\n *\r\n * @param {function} callback - The callback to execute\r\n * @param {*} [fallback=null] - The fallback value when condition is not met\r\n * @returns {function} The conditional callback\r\n */\r\nconst createBooleanCallback = (callback, fallback = null) =>\r\n{\r\n\treturn createEqualityCallback(callback, true, fallback);\r\n};\r\n\r\n/**\r\n * Generic factory for creating conditional rendering atoms.\r\n *\r\n * @param {string} dataSourceType - The type of data source to use\r\n * @param {string|null} [defaultProp=null] - Default property name for this atom type\r\n * @param {function|null} [callbackTransformer=null] - Function to transform the callback\r\n * @returns {function} The atom factory function\r\n */\r\nconst createConditionalAtom = (dataSourceType, defaultProp = null, callbackTransformer = null) =>\r\n{\r\n\treturn (...args) =>\r\n\t{\r\n\t\tconst settings = [...args];\r\n\t\tconst callback = settings.pop();\r\n\t\tif (typeof callback !== 'function')\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\treturn Comment(\r\n\t\t{\r\n\t\t\tonCreated: (ele, parent) =>\r\n\t\t\t{\r\n\t\t\t\t// Auto-inject data source if not provided\r\n\t\t\t\tif (settings.length < (defaultProp ? 1 : 2))\r\n\t\t\t\t{\r\n\t\t\t\t\tconst data = getDataSource(parent, dataSourceType);\r\n\t\t\t\t\tsettings.unshift(data);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// Use default property if provided and not specified\r\n\t\t\t\tconst prop = defaultProp || settings[1];\r\n\t\t\t\tconst finalCallback = callbackTransformer ? callbackTransformer(callback, settings) : callback;\r\n\r\n\t\t\t\tconst update = updateLayout(finalCallback, ele, prop, parent);\r\n\t\t\t\tdataBinder.watch(ele, settings[0], prop, update);\r\n\t\t\t}\r\n\t\t});\r\n\t};\r\n};\r\n\r\n/**\r\n * Special factory for OnLoad-style functions that have different argument patterns.\r\n *\r\n * @param {string} dataSourceType - The type of data source to use\r\n * @param {string} prop - The property name to watch\r\n * @param {function} callbackTransformer - Function to transform the callback\r\n * @returns {function} The atom factory function\r\n */\r\nconst createLoadStyleAtom = (dataSourceType, prop, callbackTransformer) =>\r\n{\r\n\treturn (...args) =>\r\n\t{\r\n\t\tconst settings = [...args];\r\n\t\tconst callback = (typeof settings[0] === 'function') ? settings[0] : settings[1];\r\n\t\tif (typeof callback !== 'function')\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\treturn Comment(\r\n\t\t{\r\n\t\t\tonCreated: (ele, parent) =>\r\n\t\t\t{\r\n\t\t\t\tif (settings.length < 2 || typeof settings[0] === 'function')\r\n\t\t\t\t{\r\n\t\t\t\t\tconst data = getDataSource(parent, dataSourceType);\r\n\t\t\t\t\tsettings.unshift(data);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tconst finalCallback = callbackTransformer(callback, settings);\r\n\t\t\t\tconst update = updateLayout(finalCallback, ele, prop, parent);\r\n\t\t\t\tdataBinder.watch(ele, settings[0], prop, update);\r\n\t\t\t}\r\n\t\t});\r\n\t};\r\n};\r\n\r\n/**\r\n * This will set up the update layout function.\r\n *\r\n * @param {function} callBack\r\n * @param {object} ele\r\n * @param {string} prop\r\n * @param {object} parent\r\n * @returns {function}\r\n */\r\nconst updateLayout = (callBack, ele, prop, parent) =>\r\n{\r\n\t/**\r\n\t * This will update the layout.\r\n\t *\r\n\t * @param {object} value\r\n\t * @returns {void}\r\n\t */\r\n\treturn (value) =>\r\n\t{\r\n\t\t/**\r\n\t\t * This will remove the previous element if it exists.\r\n\t\t */\r\n\t\tif (ele._prevEle)\r\n\t\t{\r\n\t\t\tBuilder.removeNode(ele._prevEle);\r\n\t\t\tele._prevEle = null;\r\n\t\t}\r\n\r\n\t\tlet layout = callBack(value, ele, parent);\r\n\t\tif (layout === undefined)\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t/**\r\n\t\t * This will build the layout and insert it after the\r\n\t\t * comment element.\r\n\t\t */\r\n\t\tconst frag = Builder.build(layout, null, parent);\r\n\t\tele._prevEle = frag.childNodes[0];\r\n\r\n\t\tele.parentNode.insertBefore(frag, ele.nextSibling);\r\n\t};\r\n};\r\n\r\n/**\r\n * This will create a comment.\r\n *\r\n * @param {object} props\r\n * @returns {object}\r\n */\r\nconst Comment = (props) => BaseComment({\r\n\ttype: 'on',\r\n\tonCreated: props.onCreated,\r\n\tonDestroyed: (ele) =>\r\n\t{\r\n\t\tif (ele._prevEle)\r\n\t\t{\r\n\t\t\tBuilder.removeNode(ele._prevEle);\r\n\t\t\tele._prevEle = null;\r\n\t\t}\r\n\t}\r\n});\r\n\r\n/**\r\n * This will get the parent set data.\r\n *\r\n * @param {object} parent\r\n * @returns {object|null}\r\n */\r\nexport const getParentData = (parent) =>\r\n{\r\n\tif (parent.data)\r\n\t{\r\n\t\treturn parent.data;\r\n\t}\r\n\r\n\tif (parent.context && parent.context.data)\r\n\t{\r\n\t\treturn parent.context.data;\r\n\t}\r\n\r\n\tif (parent.state)\r\n\t{\r\n\t\treturn parent.state;\r\n\t}\r\n\r\n\treturn null;\r\n};\r\n\r\n/**\r\n * This will create an on data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const On = createConditionalAtom(DATA_SOURCES.PARENT);\r\n\r\n/**\r\n * This will create an on state tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnState = createConditionalAtom(DATA_SOURCES.STATE);\r\n\r\n/**\r\n * This will create an on route tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnRoute = createConditionalAtom(DATA_SOURCES.ROUTE);\r\n\r\n/**\r\n * This will create an if data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {*} value\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {*} value\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const If = createConditionalAtom(\r\n\tDATA_SOURCES.PARENT,\r\n\tnull,\r\n\t(callback, settings) => createEqualityCallback(callback, settings[2])\r\n);\r\n\r\n/**\r\n * This will create an if state tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {*} value\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {*} value\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const IfState = createConditionalAtom(\r\n\tDATA_SOURCES.STATE,\r\n\tnull,\r\n\t(callback, settings) => createEqualityCallback(callback, settings[2])\r\n);\r\n\r\n/**\r\n * This will create an on load data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @overload\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnLoad = createLoadStyleAtom(\r\n\tDATA_SOURCES.PARENT,\r\n\t'loaded',\r\n\t(callback, settings) =>\r\n\t{\r\n\t\tconst notLoaded = (settings.length === 3) ? settings[2] : null;\r\n\t\treturn createBooleanCallback(callback, notLoaded);\r\n\t}\r\n);\r\n\r\n/**\r\n * This will create an on state load tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @overload\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnStateLoad = createLoadStyleAtom(\r\n\tDATA_SOURCES.STATE,\r\n\t'loaded',\r\n\t(callback, settings) =>\r\n\t{\r\n\t\tconst notLoaded = (settings.length === 3) ? settings[2] : null;\r\n\t\treturn createBooleanCallback(callback, notLoaded);\r\n\t}\r\n);\r\n\r\n/**\r\n * This will create an on open data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnOpen = createLoadStyleAtom(\r\n\tDATA_SOURCES.PARENT,\r\n\t'open',\r\n\t(callback) => createBooleanCallback(callback)\r\n);\r\n\r\n/**\r\n * This will create an on state open tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnStateOpen = createLoadStyleAtom(\r\n\tDATA_SOURCES.STATE,\r\n\t'open',\r\n\t(callback) => createBooleanCallback(callback)\r\n);\r\n\r\n// Re-export responsive atoms from on-size.js for backward compatibility\r\nexport { On2Xl, On2XlOnly, OnDesktop, OnLg, OnLgOnly, OnMd, OnMdOnly, OnPhone, OnSm, OnSmOnly, OnTablet, OnXl, OnXlOnly, OnXs, OnXsOnly } from './on-size.js';\r\n\r\n", "/**\r\n * This will create a comment.\r\n *\r\n * @param {object} props\r\n * @returns {object}\r\n */\r\nexport const Comment = (props) => ({\r\n    tag: 'comment',\r\n    textContent: `${props.type} placeholder`,\r\n    onCreated: props.onCreated,\r\n    onDestroyed: props.onDestroyed\r\n});", "import { Data } from \"@base-framework/base\";\r\nimport { On } from \"./on.js\";\r\n\r\n/**\r\n * Tailwind CSS breakpoint sizes (mobile-first).\r\n */\r\nconst BREAKPOINTS =\r\n{\r\n\txs: 0,     // Extra small devices\r\n\tsm: 640,   // Small devices\r\n\tmd: 768,   // Medium devices\r\n\tlg: 1024,  // Large devices\r\n\txl: 1280,  // Extra large devices\r\n\t'2xl': 1536 // 2x extra large devices\r\n};\r\n\r\n/**\r\n * Gets the current breakpoint name based on window width.\r\n *\r\n * @param {number} width - The window width\r\n * @returns {string} The breakpoint name\r\n */\r\nconst getBreakpointName = (width) =>\r\n{\r\n\tif (width >= BREAKPOINTS['2xl']) return '2xl';\r\n\tif (width >= BREAKPOINTS.xl) return 'xl';\r\n\tif (width >= BREAKPOINTS.lg) return 'lg';\r\n\tif (width >= BREAKPOINTS.md) return 'md';\r\n\tif (width >= BREAKPOINTS.sm) return 'sm';\r\n\treturn 'xs';\r\n};\r\n\r\n/**\r\n * Checks if current window width meets the breakpoint requirement.\r\n *\r\n * @param {string} currentBreakpoint - Current breakpoint name\r\n * @param {string} targetBreakpoint - Target breakpoint to check\r\n * @returns {boolean} True if current breakpoint is >= target breakpoint\r\n */\r\nconst matchesBreakpoint = (currentBreakpoint, targetBreakpoint) =>\r\n{\r\n\tconst current = BREAKPOINTS[currentBreakpoint] || 0;\r\n\tconst target = BREAKPOINTS[targetBreakpoint] || 0;\r\n\treturn current >= target;\r\n};\r\n\r\n/**\r\n * Global data object for window size tracking.\r\n */\r\nconst sizeData = new Data({\r\n\tsize: null,\r\n\twidth: 0\r\n});\r\n\r\n/**\r\n * Initialize the size tracking system.\r\n */\r\nconst initializeSizeTracker = () =>\r\n{\r\n\tif (typeof window === 'undefined')\r\n\t{\r\n\t\treturn;\r\n\t}\r\n\r\n\t// Set initial values\r\n\tconst currentWidth = window.innerWidth;\r\n\tconst currentBreakpoint = getBreakpointName(currentWidth);\r\n\r\n\t// @ts-ignore\r\n\tsizeData.size = currentBreakpoint;\r\n\t// @ts-ignore\r\n\tsizeData.width = currentWidth;\r\n\r\n\t/**\r\n\t * Handle window resize events.\r\n\t */\r\n\tconst handleResize = () =>\r\n\t{\r\n\t\tconst newWidth = window.innerWidth;\r\n\t\tconst newBreakpoint = getBreakpointName(newWidth);\r\n\r\n\t\t// Only update if the breakpoint or width actually changed\r\n\t\t// @ts-ignore\r\n\t\tif (newWidth !== sizeData.width || newBreakpoint !== sizeData.size)\r\n\t\t{\r\n\t\t\t// @ts-ignore\r\n\t\t\tsizeData.width = newWidth;\r\n\t\t\t// @ts-ignore\r\n\t\t\tsizeData.size = newBreakpoint;\r\n\t\t}\r\n\t};\r\n\r\n\t// Add resize listener\r\n\twindow.addEventListener('resize', handleResize);\r\n\r\n\t// Return cleanup function\r\n\treturn () =>\r\n\t{\r\n\t\twindow.removeEventListener('resize', handleResize);\r\n\t};\r\n};\r\n\r\n// Initialize the tracker immediately\r\nlet cleanup = null;\r\nif (typeof window !== 'undefined')\r\n{\r\n\tcleanup = initializeSizeTracker();\r\n}\r\n\r\n/**\r\n * Factory for creating responsive breakpoint atoms.\r\n *\r\n * @param {string} targetBreakpoint - The breakpoint name (xs, sm, md, lg, xl, 2xl)\r\n * @returns {function} The responsive atom factory function\r\n */\r\nconst createResponsiveAtom = (targetBreakpoint) =>\r\n{\r\n\treturn (callback) =>\r\n\t{\r\n\t\tif (typeof callback !== 'function')\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// Use the On atom to watch the sizeData.size property\r\n\t\treturn On(sizeData, 'size', (currentBreakpoint, ele, parent) =>\r\n\t\t{\r\n\t\t\t// Check if current breakpoint meets the target requirement\r\n\t\t\tif (matchesBreakpoint(currentBreakpoint, targetBreakpoint))\r\n\t\t\t{\r\n\t\t\t\t// Pass the current size to the callback for additional context\r\n\t\t\t\t// @ts-ignore\r\n\t\t\t\treturn callback(sizeData.size, parent);\r\n\t\t\t}\r\n\r\n\t\t\t// Return null to prevent rendering when breakpoint doesn't match\r\n\t\t\treturn null;\r\n\t\t});\r\n\t};\r\n};\r\n\r\n/**\r\n * This will create a responsive xs breakpoint atom (0px+).\r\n * Renders when window width is 0px or larger (always renders).\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnXs = createResponsiveAtom('xs');\r\n\r\n/**\r\n * This will create a responsive sm breakpoint atom (640px+).\r\n * Renders when window width is 640px or larger.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnSm = createResponsiveAtom('sm');\r\n\r\n/**\r\n * This will create a responsive md breakpoint atom (768px+).\r\n * Renders when window width is 768px or larger.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnMd = createResponsiveAtom('md');\r\n\r\n/**\r\n * This will create a responsive lg breakpoint atom (1024px+).\r\n * Renders when window width is 1024px or larger.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnLg = createResponsiveAtom('lg');\r\n\r\n/**\r\n * This will create a responsive xl breakpoint atom (1280px+).\r\n * Renders when window width is 1280px or larger.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnXl = createResponsiveAtom('xl');\r\n\r\n/**\r\n * This will create a responsive 2xl breakpoint atom (1536px+).\r\n * Renders when window width is 1536px or larger.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const On2Xl = createResponsiveAtom('2xl');\r\n\r\n/**\r\n * Export the size data for external access if needed.\r\n */\r\nexport { sizeData };\r\n\r\n/**\r\n * Factory for creating exact breakpoint atoms (only renders on specific size).\r\n *\r\n * @param {string} targetBreakpoint - The exact breakpoint name\r\n * @returns {function} The exact responsive atom factory function\r\n */\r\nconst createExactBreakpointAtom = (targetBreakpoint) =>\r\n{\r\n\treturn (callback) =>\r\n\t{\r\n\t\tif (typeof callback !== 'function')\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// Use the On atom to watch the sizeData.size property\r\n\t\treturn On(sizeData, 'size', (currentBreakpoint, ele, parent) =>\r\n\t\t{\r\n\t\t\t// Only render if current breakpoint exactly matches target\r\n\t\t\tif (currentBreakpoint === targetBreakpoint)\r\n\t\t\t{\r\n\t\t\t\treturn callback(currentBreakpoint, parent);\r\n\t\t\t}\r\n\r\n\t\t\t// Return null to prevent rendering when breakpoint doesn't match\r\n\t\t\treturn null;\r\n\t\t});\r\n\t};\r\n};\r\n\r\n/**\r\n * Renders only on xs breakpoint (0-639px).\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnXsOnly = createExactBreakpointAtom('xs');\r\n\r\n/**\r\n * Renders only on sm breakpoint (640-767px).\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnSmOnly = createExactBreakpointAtom('sm');\r\n\r\n/**\r\n * Renders only on md breakpoint (768-1023px).\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnMdOnly = createExactBreakpointAtom('md');\r\n\r\n/**\r\n * Renders only on lg breakpoint (1024-1279px).\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnLgOnly = createExactBreakpointAtom('lg');\r\n\r\n/**\r\n * Renders only on xl breakpoint (1280-1535px).\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnXlOnly = createExactBreakpointAtom('xl');\r\n\r\n/**\r\n * Renders only on 2xl breakpoint (1536px+).\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const On2XlOnly = createExactBreakpointAtom('2xl');\r\n\r\n/**\r\n * Factory for creating semantic device breakpoint atoms.\r\n *\r\n * @param {string[]} targetBreakpoints - Array of breakpoint names that match this device\r\n * @returns {function} The semantic responsive atom factory function\r\n */\r\nconst createSemanticBreakpointAtom = (targetBreakpoints) =>\r\n{\r\n\treturn (callback) =>\r\n\t{\r\n\t\tif (typeof callback !== 'function')\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// Use the On atom to watch the sizeData.size property\r\n\t\treturn On(sizeData, 'size', (currentBreakpoint, ele, parent) =>\r\n\t\t{\r\n\t\t\t// Check if current breakpoint is in the target breakpoints array\r\n\t\t\tif (targetBreakpoints.includes(currentBreakpoint))\r\n\t\t\t{\r\n\t\t\t\t// @ts-ignore - Data class supports proxy access\r\n\t\t\t\treturn callback(sizeData.size, parent);\r\n\t\t\t}\r\n\r\n\t\t\t// Return null to prevent rendering when breakpoint doesn't match\r\n\t\t\treturn null;\r\n\t\t});\r\n\t};\r\n};\r\n\r\n/**\r\n * Renders on phone-sized devices (xs and sm breakpoints: 0-767px).\r\n * Includes extra small and small devices.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnPhone = createSemanticBreakpointAtom(['xs', 'sm']);\r\n\r\n/**\r\n * Renders on tablet-sized devices (md breakpoint: 768-1023px).\r\n * Includes medium devices.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnTablet = createSemanticBreakpointAtom(['md']);\r\n\r\n/**\r\n * Renders on desktop-sized devices (lg, xl, 2xl breakpoints: 1024px+).\r\n * Includes large, extra large, and 2x extra large devices.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnDesktop = createSemanticBreakpointAtom(['lg', 'xl', '2xl']);\r\n\r\n/**\r\n * Export cleanup function for testing or manual cleanup.\r\n */\r\nexport { cleanup as cleanupSizeTracker };\r\n\r\n\r\n", "import { Builder } from \"@base-framework/base\";\r\nimport { Comment as BaseComment } from \"../comment.js\";\r\n\r\n/**\r\n * This will set up the update layout function.\r\n *\r\n * @param {function} callBack\r\n * @param {object} ele\r\n * @param {object} parent\r\n * @returns {function}\r\n */\r\nconst updateLayout = (callBack, ele, parent) =>\r\n{\r\n\t/**\r\n\t * This will remove the previous element if it exists.\r\n\t */\r\n\tif (ele._prevEle)\r\n\t{\r\n\t\tBuilder.removeNode(ele._prevEle);\r\n\t\tele._prevEle = null;\r\n\t}\r\n\r\n\tconst layout = callBack(parent);\r\n\tif (layout === undefined)\r\n\t{\r\n\t\treturn;\r\n\t}\r\n\r\n\t/**\r\n\t * This will build the layout and insert it after the\r\n\t * comment element.\r\n\t */\r\n\tconst frag = Builder.build(layout, null, parent);\r\n\tele._prevEle = frag.childNodes[0];\r\n\r\n\tele.parentNode.insertBefore(frag, ele.nextSibling);\r\n};\r\n\r\n/**\r\n * This will create a comment.\r\n *\r\n * @param {object} props\r\n * @returns {object}\r\n */\r\nconst Comment = (props) => BaseComment({\r\n\ttype: 'use',\r\n\tonCreated: props.onCreated,\r\n\tonDestroyed: (ele) =>\r\n\t{\r\n\t\tif (ele._prevEle)\r\n\t\t{\r\n\t\t\tBuilder.removeNode(ele._prevEle);\r\n\t\t\tele._prevEle = null;\r\n\t\t}\r\n\t}\r\n});\r\n\r\n/**\r\n * This will create a use parent tag.\r\n *\r\n * @param {function} callBack\r\n * @returns {object}\r\n */\r\nexport const UseParent = (callBack) =>\r\n{\r\n\t/**\r\n\t * This will create a comment to use as a placeholder\r\n\t * to keep the layout in place.\r\n\t */\r\n\treturn Comment({\r\n\t\tonCreated: (ele, parent) =>\r\n\t\t{\r\n\t\t\tupdateLayout(callBack, ele, parent);\r\n\t\t}\r\n\t});\r\n};"],
   "mappings": "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",
   "names": ["Atom", "Builder", "dataBinder", "Comment", "props", "Data", "BREAKPOINTS", "getBreakpointName", "width", "matchesBreakpoint", "currentBreakpoint", "targetBreakpoint", "current", "target", "sizeData", "Data", "initializeSizeTracker", "currentWidth", "handleResize", "newWidth", "newBreakpoint", "cleanup", "createResponsiveAtom", "callback", "On", "ele", "parent", "OnXs", "OnSm", "OnMd", "OnLg", "OnXl", "On2Xl", "createExactBreakpointAtom", "targetBreakpoint", "callback", "On", "sizeData", "currentBreakpoint", "ele", "parent", "OnXsOnly", "OnSmOnly", "OnMdOnly", "OnLgOnly", "OnXlOnly", "On2XlOnly", "createSemanticBreakpointAtom", "targetBreakpoints", "OnPhone", "OnTablet", "OnDesktop", "DATA_SOURCES", "getDataSource", "parent", "sourceType", "getParentData", "createEqualityCallback", "callback", "expectedValue", "fallback", "value", "ele", "createBooleanCallback", "createConditionalAtom", "dataSourceType", "defaultProp", "callbackTransformer", "args", "settings", "Comment", "data", "prop", "finalCallback", "update", "updateLayout", "dataBinder", "createLoadStyleAtom", "callBack", "Builder", "layout", "frag", "props", "On", "OnState", "OnRoute", "If", "IfState", "OnLoad", "notLoaded", "OnStateLoad", "OnOpen", "OnStateOpen", "Builder", "updateLayout", "callBack", "ele", "parent", "Builder", "layout", "frag", "Comment", "props", "UseParent", "Tag", "props", "children", "Doctype", "Html", "Atom", "Script", "Style", "Head", "Title", "Meta", "Link", "Body", "Div", "Dialog", "Span", "P", "A", "Button", "SubmitButton", "Ul", "Li", "Img", "Br", "Hr", "Text", "H1", "H2", "H3", "H4", "H5", "H6", "Input", "Label", "Checkbox", "Section", "Article", "Header", "Footer", "Nav", "Aside", "Figure", "Figcaption", "Main", "Video", "Audio", "Table", "Tr", "Th", "Td", "Thead", "Tbody", "Tfoot", "Form", "Select", "Option", "Textarea", "Canvas", "Progress", "Blockquote", "Pre", "Code", "Ol", "Dl", "Dt", "Dd", "Fieldset", "Legend", "Meter", "Iframe", "Details", "Summary", "Em", "Strong", "Small", "S", "Cite", "Q", "Dfn", "Abbr", "Data", "Time", "Var", "Samp", "Kbd", "Sub", "Sup", "I", "B", "U", "Mark", "Ruby", "Rt", "Rp", "Bdi", "Bdo", "Wbr", "Comment"]
 }

package/package.json

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