@codesuma/baseline 1.0.18 → 1.1.0

package/README.md

@@ -548,18 +548,28 @@ await db.createStore('users', 1, { keyPath: 'id', indices: ['email'] })
 
 // CRUD
 await db.save('users', { id: '1', name: 'John', email: 'john@example.com' })
+await db.save('users', [item1, item2, item3])  // Batch save
 const user = await db.get('users', '1')
 const allUsers = await db.all('users')
-await db.update('users', { id: '1', name: 'Jane' })
 await db.delete('users', '1')
+await db.clear('users')
+await db.count('users')
 
-// Query
+// Query with options
 const results = await db.find('users', { 
     index: 'email', 
-    value: 'john@example.com',
+    value: 'john@example.com',  // Exact match
     limit: 10,
     reverse: true
 })
+
+// Range queries
+await db.find('products', { index: 'price', gt: 10, lt: 100 })
+await db.find('products', { index: 'price', between: [10, 100] })
+await db.find('products', { index: 'price', gte: 50 })
+
+// Close connection when done (auto-closes after 2s idle)
+db.close()
 ```
 
 ### Global State
@@ -630,25 +640,111 @@ if (isEmail(input.value())) { /* valid */ }
 
 ## Project Structure
 
+This repository uses a mono-repo layout with npm workspaces:
+
+```
+baseline/
+├── packages/
+│   └── baseline/              # The npm package (@codesuma/baseline)
+│       ├── components/
+│       │   ├── base.ts         # Core factory
+│       │   ├── native/         # Div, Button, Input, etc.
+│       │   └── advanced/       # Page (with transitions)
+│       ├── lib/                # Router, HTTP, State, Storage
+│       ├── utils/              # Emitter, Appender, Styler
+│       ├── helpers/            # Date, Device, Format, Regex
+│       ├── index.ts            # Public API
+│       ├── package.json
+│       └── README.md
+├── examples/
+│   └── demo-app/              # Example app (not published)
+│       ├── components/
+│       ├── pages/
+│       ├── services/
+│       ├── app.ts
+│       ├── index.ts
+│       ├── build/              # Example app build output
+│       ├── rollup.config.js
+│       └── tsconfig.json
+├── package.json               # Root workspace config
+└── .gitignore
+```
+
+For your own app, install the package and follow this structure:
+
 ```
 my-app/
-├── base/                 # The framework (copy or npm install)
 ├── components/           # Your reusable components
 │   └── card/
-│   └── index.module.css  # CSS module
-│   └── index.ts          # Component
+│       ├── index.module.css
+│       └── index.ts
 ├── pages/                # Page components
 │   ├── home/
 │   │   └── index.ts
 │   └── about/
 │       └── index.ts
 ├── services/             # API, state management
-├── styles/               # CSS files
 ├── app.ts                # App setup with router
 ├── index.ts              # Entry point
 └── index.html
 ```
 
+## Development
+
+### Setup
+
+```bash
+# Clone the repo
+git clone https://github.com/ardeshirvalipoor/base-ui.git
+cd base-ui
+
+# Install all workspace dependencies
+npm install
+
+# Build the example app (watches for changes)
+npm run build:example
+
+# Serve locally
+npm run start:example
+# Visit http://localhost:9876
+```
+
+### Workspace Structure
+
+This project uses [npm workspaces](https://docs.npmjs.com/cli/using-npm/workspaces):
+
+- **`packages/baseline`** — The library (published to npm)
+- **`examples/demo-app`** — Example app (not published, uses `workspace:*` dependency)
+
+The example app imports `@codesuma/baseline` like any consumer would, but npm workspaces resolve it to the local `packages/baseline/` directory.
+
+## Publishing to npm
+
+This project uses [Changesets](https://github.com/changesets/changesets) across the monorepo for automated versioning and publishing.
+
+```bash
+# From the root directory:
+
+# 1. Document your changes
+npm run changeset
+
+# 2. Bump version and generate CHANGELOG.md
+npm run version-packages
+
+# 3. Publish to npm
+npm run release
+```
+
+Only the files listed in `package.json` → `files` are published:
+- `components/**/*`
+- `helpers/**/*`
+- `lib/**/*`
+- `utils/**/*`
+- `index.ts`
+- `README.md`
+
+The `examples/` directory and build output are **never** included in the npm package.
+
 ## Philosophy
 
 1. **Imperative over declarative** - You control the DOM directly

package/components/base.ts

@@ -2,9 +2,6 @@ import { nextId } from '../utils/id'
 import { createAppender, IAppender } from '../utils/appender'
 import { createStyler, IStyler } from '../utils/styler'
 import { createEmitter, IEmitter } from '../utils/emitter'
-import { initMounter } from '../utils/mounter'
-
-initMounter()
 
 export function Base<K extends keyof HTMLElementTagNameMap>(name: K = 'div' as K): IBaseComponent<K> {
     const id = nextId()

package/index.ts

@@ -22,10 +22,10 @@ export { SVG } from './components/native/svg'
 export { Page } from './components/advanced/page'
 
 // Libraries
-export { default as router, IRouteEvent } from './lib/router'
+export { default as router, IRouteEvent, createRouter } from './lib/router'
 export { default as http } from './lib/http'
 export { default as ldb } from './lib/ldb'
-export { default as idb } from './lib/idb'
+export { default as idb, IDatabase } from './lib/idb'
 export { default as state } from './lib/state'
 
 // Utilities

package/lib/idb.ts

@@ -1,168 +1,223 @@
-// Simplified IndexedDB wrapper
-
-type StoreOptions = { keyPath?: string; autoIncrement?: boolean; indices?: string[] }
-
-const openDB = (name: string, version?: number): Promise<IDBDatabase> =>
-    new Promise((resolve, reject) => {
-        const req = indexedDB.open(name, version)
-        req.onsuccess = () => resolve(req.result)
-        req.onerror = () => reject(req.error)
-    })
-
-const withStore = async <T>(
-    dbName: string,
-    storeName: string,
-    mode: IDBTransactionMode,
-    fn: (store: IDBObjectStore, db: IDBDatabase) => IDBRequest | void
-): Promise<T> => {
-    const db = await openDB(dbName)
-    return new Promise((resolve, reject) => {
-        if (!db.objectStoreNames.contains(storeName)) {
-            db.close()
-            return resolve([] as any)
-        }
-        const tx = db.transaction(storeName, mode)
-        const store = tx.objectStore(storeName)
-        const req = fn(store, db)
-
-        tx.oncomplete = () => {
-            db.close()
-            resolve(req ? (req.result as T) : (undefined as any))
-        }
-        tx.onerror = () => {
-            db.close()
-            reject(tx.error)
-        }
-    })
-}
-
-// Get database info
-async function info(dbName: string): Promise<{ version: number; objectStoreNames: DOMStringList }> {
-    const db = await openDB(dbName)
-    const result = { version: db.version, objectStoreNames: db.objectStoreNames }
-    db.close()
-    return result
-}
-
-// Create or upgrade store
-async function createStore(dbName: string, name: string, version: number, options: StoreOptions = {}) {
-    const opts = { keyPath: 'id', autoIncrement: true, indices: [], ...options }
-    return new Promise<void>((resolve, reject) => {
-        const req = indexedDB.open(dbName, version)
-        req.onupgradeneeded = (e) => {
-            const db = (e.target as IDBOpenDBRequest).result
-            if (!db.objectStoreNames.contains(name)) {
-                const store = db.createObjectStore(name, { keyPath: opts.keyPath, autoIncrement: opts.autoIncrement })
-                opts.indices!.forEach(idx => store.createIndex(idx, idx))
-            }
-        }
-        req.onsuccess = () => { req.result.close(); resolve() }
-        req.onerror = () => reject(req.error)
-    })
-}
-
-// CRUD operations
-async function save<T>(dbName: string, store: string, data: T | T[]): Promise<T | T[]> {
-    const items = Array.isArray(data) ? data : [data]
-    await withStore(dbName, store, 'readwrite', (s) => {
-        items.forEach(item => s.add(item))
-    })
-    return data
-}
-
-async function get<T>(dbName: string, store: string, id: any): Promise<T | undefined> {
-    return withStore(dbName, store, 'readonly', s => s.get(id))
-}
-
-async function all<T>(dbName: string, store: string): Promise<T[]> {
-    return withStore(dbName, store, 'readonly', s => s.getAll())
-}
-
-async function update<T>(dbName: string, store: string, data: T): Promise<T> {
-    await withStore(dbName, store, 'readwrite', s => s.put(data))
-    return data
-}
-
-async function del(dbName: string, store: string, id: any): Promise<void> {
-    await withStore(dbName, store, 'readwrite', s => s.delete(id))
-}
-
-async function clear(dbName: string, store: string): Promise<void> {
-    await withStore(dbName, store, 'readwrite', s => s.clear())
-}
-
-async function count(dbName: string, store: string): Promise<number> {
-    return withStore(dbName, store, 'readonly', s => s.count())
-}
-
-// Query with options
-async function find<T>(dbName: string, store: string, options: {
-    index?: string
-    value?: any
-    limit?: number
-    reverse?: boolean
-} = {}): Promise<T[]> {
-    const { index, value, limit = 1000, reverse = false } = options
-    const db = await openDB(dbName)
-
-    return new Promise((resolve, reject) => {
-        if (!db.objectStoreNames.contains(store)) {
-            db.close()
-            return resolve([])
-        }
-
-        const tx = db.transaction(store, 'readonly')
-        const s = tx.objectStore(store)
-        const source = index ? s.index(index) : s
-        const range = value !== undefined ? IDBKeyRange.only(value) : undefined
-        const req = source.openCursor(range, reverse ? 'prev' : 'next')
-
-        const results: T[] = []
-        req.onsuccess = () => {
-            const cursor = req.result
-            if (cursor && results.length < limit) {
-                results.push(cursor.value)
-                cursor.continue()
-            } else {
-                db.close()
-                resolve(results)
-            }
-        }
-        tx.onerror = () => { db.close(); reject(tx.error) }
-    })
-}
-
-// Add this factory function at the end, before export default
-
-function createDatabase(dbName: string) {
-    return {
-        info: () => info(dbName),
-        createStore: (name: string, version: number, options?: StoreOptions) =>
-            createStore(dbName, name, version, options),
-        save: <T>(store: string, data: T | T[]) => save<T>(dbName, store, data),
-        get: <T>(store: string, id: any) => get<T>(dbName, store, id),
-        all: <T>(store: string) => all<T>(dbName, store),
-        update: <T>(store: string, data: T) => update<T>(dbName, store, data),
-        delete: (store: string, id: any) => del(dbName, store, id),
-        clear: (store: string) => clear(dbName, store),
-        count: (store: string) => count(dbName, store),
-        find: <T>(store: string, options?: Parameters<typeof find>[2]) =>
-            find<T>(dbName, store, options),
-    }
-}
-
-// Make the export callable AND have the raw methods
-const idb = Object.assign(createDatabase, {
-    info,
-    createStore,
-    save,
-    get,
-    all,
-    update,
-    delete: del,
-    clear,
-    count,
-    find
-})
-
-export default idb
+// Simplified IndexedDB wrapper with connection caching
+
+type StoreOptions = { keyPath?: string; autoIncrement?: boolean; indices?: string[] }
+
+interface FindOptions {
+    index?: string
+    value?: any
+    gt?: any
+    gte?: any
+    lt?: any
+    lte?: any
+    between?: [any, any]
+    limit?: number
+    reverse?: boolean
+}
+
+// --- Connection cache ---
+// Reuses open connections per dbName, auto-closes after idle timeout
+
+const connections: Record<string, IDBDatabase> = {}
+const closeTimers: Record<string, ReturnType<typeof setTimeout>> = {}
+const IDLE_TIMEOUT = 2000
+
+const getConnection = (name: string, version?: number): Promise<IDBDatabase> => {
+    // Version upgrade always needs a fresh connection
+    if (version !== undefined) {
+        return new Promise((resolve, reject) => {
+            const req = indexedDB.open(name, version)
+            req.onsuccess = () => resolve(req.result)
+            req.onerror = () => reject(req.error)
+            req.onupgradeneeded = (e) => {
+                // Return the db via the stored handler (set by createStore)
+                const handler = (req as any).__onupgrade
+                if (handler) handler(e)
+            }
+        })
+    }
+
+    // Reuse cached connection
+    if (connections[name] && connections[name].version) {
+        resetIdleTimer(name)
+        return Promise.resolve(connections[name])
+    }
+
+    return new Promise((resolve, reject) => {
+        const req = indexedDB.open(name)
+        req.onsuccess = () => {
+            connections[name] = req.result
+
+            // Clean up cache if browser closes the connection
+            req.result.onclose = () => { delete connections[name] }
+
+            resetIdleTimer(name)
+            resolve(req.result)
+        }
+        req.onerror = () => reject(req.error)
+    })
+}
+
+const resetIdleTimer = (name: string) => {
+    if (closeTimers[name]) clearTimeout(closeTimers[name])
+    closeTimers[name] = setTimeout(() => {
+        if (connections[name]) {
+            connections[name].close()
+            delete connections[name]
+        }
+        delete closeTimers[name]
+    }, IDLE_TIMEOUT)
+}
+
+const closeConnection = (name: string) => {
+    if (closeTimers[name]) clearTimeout(closeTimers[name])
+    if (connections[name]) {
+        connections[name].close()
+        delete connections[name]
+    }
+    delete closeTimers[name]
+}
+
+// --- Core transaction helper ---
+
+const withStore = async <T>(
+    dbName: string,
+    storeName: string,
+    mode: IDBTransactionMode,
+    fn: (store: IDBObjectStore) => IDBRequest | void
+): Promise<T> => {
+    const db = await getConnection(dbName)
+
+    if (!db.objectStoreNames.contains(storeName)) {
+        throw new Error(`Store "${storeName}" does not exist in database "${dbName}"`)
+    }
+
+    return new Promise((resolve, reject) => {
+        const tx = db.transaction(storeName, mode)
+        const store = tx.objectStore(storeName)
+        const req = fn(store)
+
+        tx.oncomplete = () => {
+            resolve(req ? (req.result as T) : (undefined as T))
+        }
+        tx.onerror = () => reject(tx.error)
+    })
+}
+
+// --- Cursor-based query helper ---
+
+const withCursor = async <T>(
+    dbName: string,
+    storeName: string,
+    options: FindOptions = {}
+): Promise<T[]> => {
+    const { index, value, gt, gte, lt, lte, between, limit = 1000, reverse = false } = options
+    const db = await getConnection(dbName)
+
+    if (!db.objectStoreNames.contains(storeName)) {
+        throw new Error(`Store "${storeName}" does not exist in database "${dbName}"`)
+    }
+
+    return new Promise((resolve, reject) => {
+        const tx = db.transaction(storeName, 'readonly')
+        const store = tx.objectStore(storeName)
+        const source = index ? store.index(index) : store
+
+        // Build key range
+        let range: IDBKeyRange | undefined
+        if (value !== undefined) range = IDBKeyRange.only(value)
+        else if (between) range = IDBKeyRange.bound(between[0], between[1])
+        else if (gte !== undefined && lte !== undefined) range = IDBKeyRange.bound(gte, lte)
+        else if (gte !== undefined && lt !== undefined) range = IDBKeyRange.bound(gte, lt, false, true)
+        else if (gt !== undefined && lte !== undefined) range = IDBKeyRange.bound(gt, lte, true, false)
+        else if (gt !== undefined && lt !== undefined) range = IDBKeyRange.bound(gt, lt, true, true)
+        else if (gte !== undefined) range = IDBKeyRange.lowerBound(gte)
+        else if (gt !== undefined) range = IDBKeyRange.lowerBound(gt, true)
+        else if (lte !== undefined) range = IDBKeyRange.upperBound(lte)
+        else if (lt !== undefined) range = IDBKeyRange.upperBound(lt, true)
+
+        const req = source.openCursor(range, reverse ? 'prev' : 'next')
+        const results: T[] = []
+
+        req.onsuccess = () => {
+            const cursor = req.result
+            if (cursor && results.length < limit) {
+                results.push(cursor.value)
+                cursor.continue()
+            } else {
+                resolve(results)
+            }
+        }
+        tx.onerror = () => reject(tx.error)
+    })
+}
+
+// --- Database factory ---
+
+function createDatabase(dbName: string) {
+    return {
+        info: async () => {
+            const db = await getConnection(dbName)
+            return { version: db.version, stores: Array.from(db.objectStoreNames) }
+        },
+
+        createStore: (name: string, version: number, options: StoreOptions = {}) => {
+            const opts = { keyPath: 'id', autoIncrement: true, indices: [] as string[], ...options }
+
+            // Close any cached connection (version upgrade requires a fresh open)
+            closeConnection(dbName)
+
+            return new Promise<void>((resolve, reject) => {
+                const req = indexedDB.open(dbName, version)
+                req.onupgradeneeded = (e) => {
+                    const db = (e.target as IDBOpenDBRequest).result
+                    if (!db.objectStoreNames.contains(name)) {
+                        const store = db.createObjectStore(name, {
+                            keyPath: opts.keyPath,
+                            autoIncrement: opts.autoIncrement
+                        })
+                        opts.indices.forEach(idx => store.createIndex(idx, idx))
+                    }
+                }
+                req.onsuccess = () => {
+                    // Cache the new connection
+                    connections[dbName] = req.result
+                    req.result.onclose = () => { delete connections[dbName] }
+                    resetIdleTimer(dbName)
+                    resolve()
+                }
+                req.onerror = () => reject(req.error)
+            })
+        },
+
+        save: <T>(store: string, data: T | T[]): Promise<T | T[]> => {
+            const items = Array.isArray(data) ? data : [data]
+            return withStore<T | T[]>(dbName, store, 'readwrite', (s) => {
+                for (const item of items) s.put(item)
+            }).then(() => data)
+        },
+
+        get: <T>(store: string, id: any): Promise<T | undefined> =>
+            withStore<T | undefined>(dbName, store, 'readonly', s => s.get(id)),
+
+        all: <T>(store: string): Promise<T[]> =>
+            withStore<T[]>(dbName, store, 'readonly', s => s.getAll()),
+
+        delete: (store: string, id: any): Promise<void> =>
+            withStore<void>(dbName, store, 'readwrite', s => s.delete(id)),
+
+        clear: (store: string): Promise<void> =>
+            withStore<void>(dbName, store, 'readwrite', s => s.clear()),
+
+        count: (store: string): Promise<number> =>
+            withStore<number>(dbName, store, 'readonly', s => s.count()),
+
+        find: <T>(store: string, options?: FindOptions): Promise<T[]> =>
+            withCursor<T>(dbName, store, options),
+
+        close: () => closeConnection(dbName),
+    }
+}
+
+export type IDatabase = ReturnType<typeof createDatabase>
+
+export default createDatabase

package/lib/ldb.ts

@@ -1,20 +1,6 @@
-function save(value: any): { as: (key: any) => void }
-function save(...args: any[]): void
-function save(...args: any[]) {
-    if (args.length > 1) {
-        let [key, value] = args
-        if (typeof value === 'object') value = JSON.stringify(value)
-        localStorage.setItem(key, value)
-        return
-    }
-    let [value] = args
+function set(key: string, value: any) {
     if (typeof value === 'object') value = JSON.stringify(value)
-
-    return {
-        as(key: string) {
-            localStorage.setItem(key, value)
-        }
-    }
+    localStorage.setItem(key, value)
 }
 
 function get(key: string) {
@@ -36,9 +22,7 @@ function clear() {
 
 export default {
     get,
-    set: save,
-    save,
+    set,
     remove,
     clear
 }
-

package/lib/router.ts

@@ -20,15 +20,6 @@ interface RouteConfig {
 
 type Routes = Record<string, RouteConfig | (() => IBaseComponent<any>)>
 
-const emitter = createEmitter()
-let currentPath = ''
-let currentPage: IBaseComponent<any> | null = null
-let viewContainer: IBaseComponent<any> | null = null
-const pageCache: Record<string, IBaseComponent<any>> = {}
-let routeConfigs: Routes = {}
-let initialized = false
-let isBackNavigation = false
-
 // Extract params from path like /users/:id
 const extractParams = (pattern: string, path: string): Record<string, string> | null => {
     const patternParts = pattern.split('/')
@@ -46,138 +37,155 @@ const extractParams = (pattern: string, path: string): Record<string, string> |
     return params
 }
 
-// Find matching route
-const matchRoute = (path: string): { pattern: string; params: Record<string, string> } | null => {
-    if (routeConfigs[path]) return { pattern: path, params: {} }
-    for (const pattern of Object.keys(routeConfigs)) {
-        const params = extractParams(pattern, path)
-        if (params) return { pattern, params }
+export function createRouter() {
+    const emitter = createEmitter()
+    let currentPath = ''
+    let currentPage: IBaseComponent<any> | null = null
+    let viewContainer: IBaseComponent<any> | null = null
+    const pageCache: Record<string, IBaseComponent<any>> = {}
+    let routeConfigs: Routes = {}
+    let initialized = false
+    let isBackNavigation = false
+
+    // Find matching route
+    const matchRoute = (path: string): { pattern: string; params: Record<string, string> } | null => {
+        if (routeConfigs[path]) return { pattern: path, params: {} }
+        for (const pattern of Object.keys(routeConfigs)) {
+            if (pattern === '*') continue // Skip fallback during normal matching
+            const params = extractParams(pattern, path)
+            if (params) return { pattern, params }
+        }
+        // Fallback to wildcard route
+        if (routeConfigs['*']) return { pattern: '*', params: {} }
+        return null
     }
-    return null
-}
 
-// Get query params
-const getQuery = (key?: string) => {
-    const params = new URLSearchParams(window.location.search)
-    return key ? params.get(key) : Object.fromEntries(params)
-}
+    // Get query params
+    const getQuery = (key?: string) => {
+        const params = new URLSearchParams(window.location.search)
+        return key ? params.get(key) : Object.fromEntries(params)
+    }
 
-// Handle navigation
-const navigate = async (to: string, data?: any) => {
-    const url = new URL(to, window.location.origin)
-    const path = url.pathname
-    const from = currentPath
-    const isBack = isBackNavigation
+    // Handle navigation
+    const navigate = async (to: string, data?: any) => {
+        const url = new URL(to, window.location.origin)
+        const path = url.pathname
+        const from = currentPath
+        const isBack = isBackNavigation
 
-    if (path === currentPath) return
+        if (path === currentPath) return
 
-    const match = matchRoute(path)
-    if (!match) {
-        console.warn(`No route found for: ${path}`)
-        return
-    }
+        const match = matchRoute(path)
+        if (!match) {
+            console.warn(`No route found for: ${path}`)
+            return
+        }
 
-    // Exit current page with direction
-    if (currentPage) {
-        currentPage.emit('exit', {
-            params: {},
+        // Exit current page with direction — await async handlers
+        if (currentPage) {
+            await currentPage.emit('exit', {
+                params: {},
+                query: getQuery(),
+                from: currentPath,
+                to: path,
+                data,
+                isBack
+            })
+        }
+
+        // Update state
+        currentPath = path
+        if (!isBack) {
+            history.pushState(data, '', to)
+        }
+
+        // Get or create page
+        let page = pageCache[path]
+        if (!page) {
+            const config = routeConfigs[match.pattern]
+            const pageFactory = typeof config === 'function' ? config : config.page
+            page = pageFactory()
+            pageCache[path] = page
+            if (viewContainer) {
+                viewContainer.append(page)
+            }
+        }
+
+        currentPage = page
+
+        // Enter the new page with direction
+        page.emit('enter', {
+            params: match.params,
             query: getQuery(),
-            from: currentPath,
+            from,
             to: path,
             data,
             isBack
         })
-    }
 
-    // Update state
-    currentPath = path
-    if (!isBack) {
-        history.pushState(data, '', to)
-    }
+        emitter.emit('change', {
+            path,
+            params: match.params,
+            query: getQuery(),
+            from,
+            to: path,
+            data,
+            isBack
+        })
 
-    // Get or create page
-    let page = pageCache[path]
-    if (!page) {
-        const config = routeConfigs[match.pattern]
-        const pageFactory = typeof config === 'function' ? config : config.page
-        page = pageFactory()
-        pageCache[path] = page
-        if (viewContainer) {
-            viewContainer.append(page)
-        }
+        // Reset back flag
+        isBackNavigation = false
     }
 
-    currentPage = page
-
-    // Enter the new page with direction
-    page.emit('enter', {
-        params: match.params,
-        query: getQuery(),
-        from,
-        to: path,
-        data,
-        isBack
-    })
-
-    emitter.emit('change', {
-        path,
-        params: match.params,
-        query: getQuery(),
-        from,
-        to: path,
-        data,
-        isBack
-    })
-
-    // Reset back flag
-    isBackNavigation = false
-}
-
-// Initialize router
-const init = () => {
-    if (initialized) return
-    initialized = true
+    // Initialize router
+    const init = () => {
+        if (initialized) return
+        initialized = true
+
+        window.addEventListener('popstate', (e) => {
+            isBackNavigation = true  // Mark as back navigation
+            const path = window.location.pathname
+            if (path !== currentPath) {
+                navigate(path, e.state)
+            }
+        })
 
-    window.addEventListener('popstate', (e) => {
-        isBackNavigation = true  // Mark as back navigation
-        const path = window.location.pathname
-        if (path !== currentPath) {
-            navigate(path, e.state)
+        if (currentPath === '' && viewContainer) {
+            navigate(window.location.pathname + window.location.search)
         }
-    })
+    }
 
-    if (currentPath === '' && viewContainer) {
-        navigate(window.location.pathname + window.location.search)
+    // Configure routes
+    const routes = (config: Routes, view: IBaseComponent<any>) => {
+        routeConfigs = config
+        viewContainer = view
+        init()
     }
-}
 
-// Configure routes
-const routes = (config: Routes, view: IBaseComponent<any>) => {
-    routeConfigs = config
-    viewContainer = view
-    init()
-}
+    // Manually destroy a cached page
+    const destroyPage = (path: string) => {
+        const page = pageCache[path]
+        if (page) {
+            page.remove()
+            delete pageCache[path]
+        }
+    }
 
-// Manually destroy a cached page
-const destroyPage = (path: string) => {
-    const page = pageCache[path]
-    if (page) {
-        page.remove()
-        delete pageCache[path]
+    return {
+        routes,
+        init,
+        goto: (path: string, data?: any) => navigate(path, data),
+        back: () => history.back(),
+        forward: () => history.forward(),
+        getPath: () => currentPath,
+        getQuery,
+        getParams: () => matchRoute(currentPath)?.params || {},
+        destroyPage,
+        on: emitter.on.bind(emitter),
+        off: emitter.off.bind(emitter),
+        once: emitter.once.bind(emitter),
     }
 }
 
-export default {
-    routes,
-    init,
-    goto: (path: string, data?: any) => navigate(path, data),
-    back: () => history.back(),
-    forward: () => history.forward(),
-    getPath: () => currentPath,
-    getQuery,
-    getParams: () => matchRoute(currentPath)?.params || {},
-    destroyPage,
-    on: emitter.on.bind(emitter),
-    off: emitter.off.bind(emitter),
-    once: emitter.once.bind(emitter),
-}
+// Default singleton for backward compatibility
+export default createRouter()

package/package.json

@@ -1,35 +1,35 @@
-{
-  "name": "@codesuma/baseline",
-  "version": "1.0.18",
-  "description": "A minimal, imperative UI framework for building fast web apps. No virtual DOM, no magic, no dependencies.",
-  "main": "index.ts",
-  "types": "index.ts",
-  "files": [
-    "components/**/*",
-    "helpers/**/*",
-    "lib/**/*",
-    "utils/**/*",
-    "index.ts",
-    "README.md"
-  ],
-  "keywords": [
-    "ui",
-    "framework",
-    "spa",
-    "router",
-    "imperative",
-    "minimal",
-    "typescript"
-  ],
-  "author": "ardeshirvalipoor",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://gith  ub.com/ardeshirvalipoor/base-ui.git"
-  },
-  "peerDependencies": {},
-  "publishConfig": {
-    "access": "public"
-  },
-  "devDependencies": {}
+{
+  "name": "@codesuma/baseline",
+  "version": "1.1.0",
+  "description": "A minimal, imperative UI framework for building fast web apps. No virtual DOM, no magic, no dependencies.",
+  "main": "index.ts",
+  "types": "index.ts",
+  "files": [
+    "components/**/*",
+    "helpers/**/*",
+    "lib/**/*",
+    "utils/**/*",
+    "index.ts",
+    "README.md"
+  ],
+  "keywords": [
+    "ui",
+    "framework",
+    "spa",
+    "router",
+    "imperative",
+    "minimal",
+    "typescript"
+  ],
+  "author": "ardeshirvalipoor",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ardeshirvalipoor/base-ui.git"
+  },
+  "peerDependencies": {},
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {}
 }

package/utils/appender.ts

@@ -33,16 +33,17 @@ const markMounted = (component: AnyComponent) => {
 export function createAppender(base: AnyComponent): IAppender {
     let children: AnyComponent[] = []
 
+    // Internal setter — used by child.remove() to update parent's children list
+    const setChildren = (c: AnyComponent[]) => { children = c }
+
     // Register for root detection (will be cleaned up once mounted)
     pendingRoots.add(base)
     initObserver()
 
     return {
-        children,
-
         getChildren: () => children,
 
-        setChildren: (c: AnyComponent[]) => { children = c },
+        _setChildren: setChildren,
 
         append(...args: (AnyComponent | false | null | undefined)[]) {
             for (const c of args) {
@@ -116,8 +117,25 @@ export function createAppender(base: AnyComponent): IAppender {
         remove() {
             children.forEach(c => c.remove())
             if (base.parent) {
-                base.parent.setChildren(base.parent.getChildren().filter(c => c !== base))
+                const parentChildren = base.parent.getChildren().filter(c => c !== base)
+                base.parent._setChildren(parentChildren)
+            }
+            base.isMounted = false
+            base.emit('unmounted')
+            pendingRoots.delete(base)
+            base.el.remove()
+        },
+
+        destroy() {
+            children.forEach(c => {
+                if (typeof (c as any).destroy === 'function') (c as any).destroy()
+                else c.remove()
+            })
+            if (base.parent) {
+                const parentChildren = base.parent.getChildren().filter(c => c !== base)
+                base.parent._setChildren(parentChildren)
             }
+            base.isMounted = false
             base.emit('unmounted')
             base.removeAllListeners()
             pendingRoots.delete(base)
@@ -127,15 +145,16 @@ export function createAppender(base: AnyComponent): IAppender {
 }
 
 export interface IAppender {
-    children: AnyComponent[]
     getChildren(): AnyComponent[]
-    setChildren(c: AnyComponent[]): void
+    /** @internal */
+    _setChildren(c: AnyComponent[]): void
     append(...args: (AnyComponent | false | null | undefined)[]): AnyComponent
     prepend(...args: AnyComponent[]): AnyComponent
     appendBefore(ref: AnyComponent, ...args: AnyComponent[]): AnyComponent
     appendAfter(ref: AnyComponent, ...args: AnyComponent[]): AnyComponent
     empty(): void
     remove(): void
+    destroy(): void
 }
 
 export default createAppender

package/utils/styler.ts

@@ -18,6 +18,22 @@ export function createStyler(base: Component): IStyler {
             return base
         },
 
+        attr(key: string, value?: string) {
+            if (value === undefined) return base.el.getAttribute(key)
+            base.el.setAttribute(key, value)
+            return base
+        },
+
+        text(content: string) {
+            base.el.textContent = content
+            return base
+        },
+
+        html(content: string) {
+            base.el.innerHTML = content
+            return base
+        },
+
         addClass(...classes: string[]) {
             base.el.classList.add.apply(base.el.classList, classes)
             return base
@@ -48,6 +64,9 @@ export function injectCSS(id: string, css: string) {
 
 export interface IStyler {
     style(s: CS, delay?: number): Component
+    attr(key: string, value?: string): string | null | Component
+    text(content: string): Component
+    html(content: string): Component
     addClass(...classes: string[]): Component
     removeClass(...classes: string[]): Component
     toggleClass(cls: string, force?: boolean): Component