// Everything you need, nothing you don't
✅ Components (atoms → molecules → organisms)
✅ Server-Side Rendering (SSR)
✅ Static Site Generation (SSG)
✅ State Management (built-in Store)
✅ State Machines (built-in FSM + SPA Router)
✅ Client-side Interactivity
✅ Zero npm dependencies

import { processSlotTrusted } from '../../utils/processSlot.js';
import { normalizeClasses } from '../../utils/normalizeClasses.js';

export const badge = ({ slot, variant = 'default', className = '', attrs = '' }) => {
    attrs = attrs ? ` ${attrs}` : '';
    const classes = normalizeClasses(['badge', `badge-${variant}`, className]);
    const slotContent = processSlotTrusted(slot);
    
    return `<span class="${classes}"${attrs}>${slotContent}</span>`;
};

export const components = [
    {
        type: 'organism',
        name: 'hero',
        props: {
            slot: [
                {
                    type: 'atom',
                    name: 'text',
                    props: { is: 'h1', slot: 'Welcome to b0nes' }
                },
                {
                    type: 'atom',
                    name: 'badge',
                    props: { slot: 'New!', variant: 'primary' }
                }
            ]
        }
    }
];

// Direct usage
import { button } from './components/atoms/button/button.js';

const html = button({ 
    type: 'submit', 
    slot: 'Click Me',
    className: 'primary large'
});

// In page composition
{
    type: 'organism',
    name: 'hero',
    props: {
        slot: [
            {
                type: 'atom',
                name: 'text',
                props: { is: 'h1', slot: 'Welcome' }
            },
            {
                type: 'atom',
                name: 'button',
                props: { slot: 'Get Started' }
            }
        ]
    }
}

{
    type: 'molecule',
    name: 'tabs',
    props: {
        tabs: [
            { label: 'Overview', content: 'Overview content...' },
            { label: 'Features', content: 'Feature 1' },
            { label: 'Docs', content: 'Documentation...' }
        ]
    }
}

// 1. Define the modal
{
    type: 'molecule',
    name: 'modal',
    props: {
        id: 'welcome-modal',
        title: 'Welcome!',
        slot: 'Thanks for visiting our site!'
    }
}

// 2. Add a trigger button
{
    type: 'atom',
    name: 'button',
    props: {
        attrs: 'data-modal-open="welcome-modal"',
        slot: 'Show Welcome Message'
    }
}

{
    type: 'molecule',
    name: 'dropdown',
    props: {
        trigger: 'Actions ▾',
        slot: [
            {
                type: 'atom',
                name: 'link',
                props: { url: '#edit', slot: 'Edit' }
            },
            {
                type: 'atom',
                name: 'link',
                props: { url: '#delete', slot: 'Delete' }
            }
        ]
    }
}

// In routes.js
meta: { 
    title: 'Static Page',
    interactive: false  // Don't load b0nes.js
}

import { createStore } from './framework/client/store.js';

const store = createStore({
    state: { 
        count: 0,
        todos: []
    },
    actions: {
        increment: (state) => ({ 
            count: state.count + 1 
        }),
        addTodo: (state, todo) => ({ 
            todos: [...state.todos, todo] 
        })
    },
    getters: {
        todoCount: (state) => state.todos.length
    }
});

// Usage
store.dispatch('increment');
store.dispatch('addTodo', { id: 1, text: 'Learn b0nes' });

console.log(store.getState());           // { count: 1, todos: [...] }
console.log(store.computed('todoCount')); // 1

// Subscribe to changes
const unsubscribe = store.subscribe((change) => {
    console.log('State changed:', change);
    console.log('New state:', change.state);
});

import { combineModules, createModule } from './framework/client/store.js';

const userModule = createModule({
    state: { name: '', email: '' },
    actions: {
        login: (state, userData) => ({ ...userData })
    }
});

const cartModule = createModule({
    state: { items: [] },
    actions: {
        addItem: (state, item) => ({ 
            items: [...state.items, item] 
        })
    }
});

const store = createStore(
    combineModules({ 
        user: userModule, 
        cart: cartModule 
    })
);

// Namespaced access
store.dispatch('user/login', { name: 'John', email: '[email protected]' });
store.dispatch('cart/addItem', { id: 1, name: 'Product' });

import { 
    loggerMiddleware, 
    persistenceMiddleware 
} from './framework/client/store.js';

const store = createStore({
    state: { cart: [] },
    actions: { /* ... */ },
    middleware: [
        loggerMiddleware,              // Logs all state changes
        persistenceMiddleware('cart')  // Auto-saves to localStorage
    ]
});

import { createFSM } from './framework/client/fsm.js';

const authFSM = createFSM({
    initial: 'logged-out',
    states: {
        'logged-out': {
            on: { LOGIN: 'logging-in' }
        },
        'logging-in': {
            actions: {
                onEntry: (context, data) => {
                    console.log('Starting login...');
                    // Return context updates if needed
                    return { loading: true };
                },
                onExit: (context, data) => {
                    console.log('Exiting login...');
                }
            },
            on: { 
                SUCCESS: 'logged-in',
                FAILURE: 'logged-out'
            }
        },
        'logged-in': {
            on: { LOGOUT: 'logged-out' }
        }
    },
    context: { user: null } // Initial context
});

// Usage
authFSM.send('LOGIN', { username: 'grok' }); // Transition with data
authFSM.getState();                          // 'logging-in'
authFSM.is('logged-in');                     // false
authFSM.can('LOGOUT');                       // false
authFSM.getContext();                        // { user: null, loading: true }
authFSM.getHistory();                        // Array of transitions
authFSM.updateContext({ user: 'grok' });     // Update without transition
authFSM.reset();                             // Back to initial

// Subscribe to changes
const unsubscribe = authFSM.subscribe((transition) => {
    console.log('Transition:', transition);  // { from, to, event, data, timestamp }
});

// Visualize
console.log(authFSM.toMermaid());            // Mermaid diagram string

const checkoutFSM = createFSM({
    initial: 'cart',
    states: {
        'cart': {
            on: { 
                CHECKOUT: (context, data) => context.items.length > 0 ? 'payment' : 'cart'
            }
        },
        'payment': {
            on: { SUCCESS: 'complete' }
        },
        'complete': {}
    },
    context: { items: [] }
});

import { composeFSM } from './framework/client/fsm.js';

const composed = composeFSM({
    auth: authFSM,
    checkout: checkoutFSM
});

composed.getAllStates();     // { auth: 'logged-out', checkout: 'cart' }
composed.getAllContexts();   // Combined contexts
composed.send('auth', 'LOGIN'); // Send to specific machine
composed.broadcast('RESET'); // Send to all that can handle it

// Subscribe to any transition
composed.subscribe((change) => {
    console.log(change);     // { machine: 'auth', from, to, ... }
});

import { createRouterFSM, connectFSMtoDOM } from './framework/client/fsm.js';

const routes = [
    {
        name: 'start',
        url: '/demo/fsm/start',
        template: "<h1>FSM Demo</h1><button data-fsm-event='GOTO_STEP2'>Next</button>",
        onEnter: (context, data) => console.log('Entered start')
    },
    {
        name: 'step2',
        url: '/demo/fsm/step2',
        template: "<h1>Step 2</h1><button data-fsm-event='GOTO_START'>Back</button>"
    },
    {
        name: 'success',
        url: '/demo/fsm/success',
        template: "<h1>Success!</h1>"
    }
];

const { fsm, routes: fsmRoutes } = createRouterFSM(routes); // Creates FSM with GOTO_ events

// Connect to DOM (handles render, clicks, popstate)
const rootEl = document.querySelector('[data-bones-fsm]');
const cleanup = connectFSMtoDOM(fsm, rootEl, routes);

// Navigate programmatically
fsm.send('GOTO_STEP2');

// Cleanup when done
cleanup();

const routes = [
    {
        name: 'start',
        url: '/form/start',
        template: "<h1>Start</h1><button data-fsm-event='GOTO_STEP2'>Next</button>"
    },
    {
        name: 'step2',
        url: '/form/step2',
        template: "<h1>Step 2</h1><button data-fsm-event='GOTO_START'>Back</button><button data-fsm-event='GOTO_SUCCESS'>Submit</button>"
    },
    {
        name: 'success',
        url: '/form/success',
        template: "<h1>Success!</h1><button data-fsm-event='GOTO_START'>Reset</button>"
    }
];

const { fsm } = createRouterFSM(routes);
connectFSMtoDOM(fsm, document.getElementById('app'), routes);

{
    name: 'Blog Post',
    pattern: new URLPattern({ pathname: '/blog/:slug' }),
    meta: { title: 'Blog Post' },
    components: (data) => [
        {
            type: 'organism',
            name: 'hero',
            props: {
                slot: [
                    {
                        type: 'atom',
                        name: 'text',
                        props: { is: 'h1', slot: data.title }
                    }
                ]
            }
        }
    ],
    externalData: async () => {
        // Fetch blog post data
        const response = await fetch('https://api.example.com/posts');
        return await response.json();
    }
}

// src/framework/pages/home.js
export const components = [
    {
        type: 'organism',
        name: 'header',
        props: {
            slot: [
                { type: 'atom', name: 'link', props: { url: '/examples/home', slot: 'Home' } },
                { type: 'atom', name: 'link', props: { url: '/about', slot: 'About' } }
            ]
        }
    },
    {
        type: 'organism',
        name: 'hero',
        props: {
            slot: [
                { type: 'atom', name: 'text', props: { is: 'h1', slot: 'Welcome' } },
                { type: 'atom', name: 'button', props: { slot: 'Get Started' } }
            ]
        }
    },
    {
        type: 'organism',
        name: 'footer',
        props: {
            slot: [
                { type: 'atom', name: 'text', props: { is: 'p', slot: '© 2025' } }
            ]
        }
    }
];

// src/components/atoms/button/button.test.js
import button from './index.js';

export const test = () => {
    const actual = button({ 
        type: 'submit', 
        slot: 'Click Me',
        className: 'primary'
    });
    
    const expected = '<button type="submit" class="btn primary">Click Me</button>';
    
    return actual === expected 
        ? true 
        : console.error({actual, expected}) || false;
};

// Use Tailwind classes in components
button({
    slot: 'Click Me',
    className: 'bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded'
})

import { stylesheetPresets } from './framework/renderPage.js';

// Tailwind CSS
meta: { stylesheets: stylesheetPresets.tailwind() }

// Water.css (classless)
meta: { stylesheets: stylesheetPresets.water('dark') }

// Pico CSS
meta: { stylesheets: stylesheetPresets.pico() }

// Open Props
meta: { stylesheets: stylesheetPresets.openProps() }

// Combine multiple
meta: { 
    stylesheets: stylesheetPresets.combine(
        stylesheetPresets.water('auto'),
        '/styles/custom.css'
    )
}

// src/framework/pages/landing.js
export const components = [
    {
        type: 'organism',
        name: 'header',
        props: {
            className: 'sticky-header',
            slot: [
                { type: 'atom', name: 'link', props: { url: '/examples/home', slot: 'Home' }},
                { type: 'atom', name: 'link', props: { url: '/pricing', slot: 'Pricing' }},
                { type: 'atom', name: 'link', props: { url: '/docs', slot: 'Docs' }}
            ]
        }
    },
    {
        type: 'organism',
        name: 'hero',
        props: {
            className: 'hero-gradient',
            slot: [
                { type: 'atom', name: 'text', props: { is: 'h1', slot: 'Ship Faster' }},
                { type: 'atom', name: 'text', props: { is: 'p', slot: 'Zero deps. Pure JS. Simple.' }},
                { type: 'atom', name: 'button', props: { slot: 'Get Started', className: 'cta-button' }}
            ]
        }
    },
    {
        type: 'atom',
        name: 'box',
        props: {
            is: 'section',
            className: 'features',
            slot: [
                {
                    type: 'molecule',
                    name: 'card',
                    props: {
                        headerSlot: 'Zero Dependencies',
                        contentSlot: 'Never breaks, always works'
                    }
                },
                {
                    type: 'molecule',
                    name: 'card',
                    props: {
                        headerSlot: 'Complete Toolkit',
                        contentSlot: 'Everything you need included'
                    }
                }
            ]
        }
    },
    {
        type: 'organism',
        name: 'cta',
        props: {
            slot: [
                { type: 'atom', name: 'text', props: { is: 'h2', slot: 'Ready to build?' }},
                { type: 'atom', name: 'button', props: { slot: 'Start Now' }}
            ]
        }
    },
    {
        type: 'organism',
        name: 'footer',
        props: {
            slot: { type: 'atom', name: 'text', props: { is: 'p', slot: '© 2025 Your Company' }}
        }
    }
];

import { compose } from './framework/compose.js';

const html = compose([
    { type: 'atom', name: 'text', props: { is: 'p', slot: 'Hello' } }
]);

import { renderPage } from './framework/renderPage.js';

const html = renderPage(content, { 
    title: 'My Page',
    interactive: true,  // Include b0nes.js (default: true)
    stylesheets: ['/styles/main.css']
});

import { router } from './framework/router.js';

const route = router(new URL('http://localhost/'), routes);
// Returns: { params, query, meta, components, ... }

const routes = [
    { name: 'home', url: '/examples/home', template: '<h1>Home</h1>' },
    { name: 'about', url: '/about', template: '<h1>About</h1>' }
];

const { fsm } = createRouterFSM(routes);
connectFSMtoDOM(fsm, document.getElementById('app'), routes);

// Multi-step form with FSM
const routes = [
    { name: 'step1', url: '/step1', template: '<input id="name" /><button data-fsm-event="GOTO_STEP2">Next</button>' }
];

const { fsm } = createRouterFSM(routes);
connectFSMtoDOM(fsm, app, routes);

// In route definition
{
    name: 'Blog Post',
    pattern: new URLPattern({ pathname: '/blog/:slug' }),
    components: blogPostComponents,
    externalData: async (params) => {
        const res = await fetch(`https://api.example.com/posts/${params.slug}`);
        return await res.json();
    }
}

import { stylesheetPresets } from './framework/renderPage.js';

meta: {
    stylesheets: stylesheetPresets.tailwind()
}