import { signal, computed, effect, batch } from 'tina4js';

// Create a reactive value
const count = signal(0);
count.value;       // read: 0
count.value = 5;   // write: triggers subscribers

// Derived value (auto-tracks dependencies)
const doubled = computed(() => count.value * 2);
doubled.value;     // 10 (read-only)

// Side effect (auto-tracks dependencies)
const dispose = effect(() => {
  console.log(`Count is ${count.value}`);
});
// Runs immediately, then re-runs when count changes.
// Call dispose() to stop.

// Batch multiple updates (one notification)
batch(() => {
  a.value = 1;
  b.value = 2;
}); // subscribers notified once

import { html, signal } from 'tina4js';

const name = signal('World');

// Creates real DOM nodes (not strings)
const el = html`<h1>Hello ${name}!</h1>`;
document.body.append(el);

name.value = 'Tina4'; // DOM updates surgically — no diffing

// Event handlers
html`<button @click=${() => alert('clicked')}>Go</button>`;

// Conditional rendering
const show = signal(true);
html`<div>${() => show.value ? html`<p>Visible</p>` : null}</div>`;

// List rendering
const items = signal(['a', 'b', 'c']);
html`<ul>${() => items.value.map(i => html`<li>${i}</li>`)}</ul>`;

// Reactive attributes
const cls = signal('active');
html`<div class=${cls}>Styled</div>`;

// Boolean attributes
const disabled = signal(false);
html`<button ?disabled=${disabled}>Submit</button>`;

import { Tina4Element, html, signal } from 'tina4js';

class MyCounter extends Tina4Element {
  static props = { label: String };
  static styles = `:host { display: block; }`;

  count = signal(0);

  render() {
    return html`
      <span>${this.prop('label')}: ${this.count}</span>
      <button @click=${() => this.count.value++}>+</button>
    `;
  }
}

customElements.define('my-counter', MyCounter);

import { route, router, navigate, html } from 'tina4js';

route('/', () => html`<h1>Home</h1>`);
route('/user/{id}', ({ id }) => html`<h1>User ${id}</h1>`);
route('/admin', {
  guard: () => isLoggedIn() || '/login',
  handler: () => html`<h1>Admin</h1>`,
});
route('*', () => html`<h1>404</h1>`);

router.start({ target: '#root', mode: 'history' });

// Programmatic navigation
navigate('/user/42');

import { api } from 'tina4js';

api.configure({
  baseUrl: '/api',
  auth: true,  // auto Bearer + formToken (tina4-php/python compatible)
});

const users = await api.get('/users');
const user  = await api.get('/users/{id}', { id: 42 });
const result = await api.post('/users', { name: 'Andre' });

// Interceptors
api.intercept('request', (config) => {
  config.headers['X-Custom'] = 'value';
  return config;
});

api.intercept('response', (res) => {
  if (res.status === 401) navigate('/login');
  return res;
});

import { pwa } from 'tina4js';

pwa.register({
  name: 'My App',
  shortName: 'App',
  themeColor: '#1a1a2e',
  cacheStrategy: 'network-first',
  precache: ['/', '/css/default.css'],
  offlineRoute: '/offline',
});

// Always-on (remove for production)
import 'tina4js/debug';

// Dev-only (recommended) — tree-shaken out of production builds
if (import.meta.env.DEV) import('tina4js/debug');