@codesuma/baseline 1.0.1

package/lib/ldb.ts

@@ -0,0 +1,44 @@
+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
+    if (typeof value === 'object') value = JSON.stringify(value)
+
+    return {
+        as(key: string) {
+            localStorage.setItem(key, value)
+        }
+    }
+}
+
+function get(key: string) {
+    const raw = String(localStorage.getItem(key) || '')
+    try {
+        return JSON.parse(raw)
+    } catch (err) {
+        return raw
+    }
+}
+
+function remove(key: string) {
+    localStorage.removeItem(key)
+}
+
+function clear() {
+    localStorage.clear()
+}
+
+export default {
+    get,
+    set: save,
+    save,
+    remove,
+    clear
+}
+

package/lib/router.ts

@@ -0,0 +1,179 @@
+// Router - SPA navigation with page lifecycle (Hide/Show pattern)
+// All pages stay in DOM, only visibility toggles for smooth transitions
+
+import { createEmitter } from '../utils/emitter'
+import { IBaseComponent } from '../components/base'
+
+// Event payload for enter/exit events
+export interface IRouteEvent {
+    params: Record<string, string>
+    query: Record<string, string>
+    from: string
+    data?: any
+    isBack?: boolean  // True if navigating via back button
+}
+
+interface RouteConfig {
+    page: () => IBaseComponent<any>
+}
+
+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('/')
+    const pathParts = path.split('/')
+    if (patternParts.length !== pathParts.length) return null
+
+    const params: Record<string, string> = {}
+    for (let i = 0; i < patternParts.length; i++) {
+        if (patternParts[i].startsWith(':')) {
+            params[patternParts[i].slice(1)] = pathParts[i]
+        } else if (patternParts[i] !== pathParts[i]) {
+            return null
+        }
+    }
+    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 }
+    }
+    return null
+}
+
+// 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
+
+    if (path === currentPath) 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: {},
+            query: getQuery(),
+            from: currentPath,
+            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,
+        data,
+        isBack
+    })
+
+    emitter.emit('change', {
+        path,
+        params: match.params,
+        query: getQuery(),
+        from,
+        data,
+        isBack
+    })
+
+    // Reset back flag
+    isBackNavigation = false
+}
+
+// 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)
+        }
+    })
+
+    if (currentPath === '' && viewContainer) {
+        navigate(window.location.pathname + window.location.search)
+    }
+}
+
+// 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]
+    }
+}
+
+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),
+}

package/lib/state.ts

@@ -0,0 +1,35 @@
+// Global state with optional change notifications
+
+import { createEmitter } from '../utils/emitter'
+
+const data: Record<string, any> = {}
+const emitter = createEmitter()
+
+export const get = <T = any>(key: string): T | undefined => data[key]
+
+export const set = <T>(key: string, value: T): T => {
+    data[key] = value
+    emitter.emit(key, value)      // Emit specific key
+    emitter.emit('change', { key, value })  // Emit generic 'change'
+    return value
+}
+
+export const remove = (key: string) => {
+    delete data[key]
+    emitter.emit(key, undefined)
+    emitter.emit('change', { key, value: undefined })
+}
+
+export const clear = () => {
+    Object.keys(data).forEach(k => delete data[k])
+    emitter.emit('change', { key: '*', value: undefined })
+}
+
+export const all = () => ({ ...data })
+
+// Re-export emitter methods for subscriptions
+export const on = emitter.on.bind(emitter)
+export const off = emitter.off.bind(emitter)
+export const once = emitter.once.bind(emitter)
+
+export default { get, set, remove, clear, all, on, off, once }

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@codesuma/baseline",
+  "version": "1.0.1",
+  "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

@@ -0,0 +1,141 @@
+import { IBaseComponent, IBaseSVGComponent } from '../components/base'
+
+type AnyComponent = IBaseComponent<any> | IBaseSVGComponent<any>
+
+// Lightweight observer - only checks if element entered document.body
+let observer: MutationObserver | null = null
+const pendingRoots: Set<AnyComponent> = new Set()
+
+const initObserver = () => {
+    if (observer) return
+    observer = new MutationObserver(() => {
+        pendingRoots.forEach(component => {
+            if (document.body.contains(component.el)) {
+                pendingRoots.delete(component)
+                markMounted(component)
+            }
+        })
+        if (pendingRoots.size === 0 && observer) {
+            observer.disconnect()
+            observer = null
+        }
+    })
+    observer.observe(document.body, { childList: true, subtree: true })
+}
+
+const markMounted = (component: AnyComponent) => {
+    if (component.isMounted) return
+    component.isMounted = true
+    component.emit('mounted')
+    component.getChildren().forEach(markMounted)
+}
+
+export function createAppender(base: AnyComponent): IAppender {
+    let children: AnyComponent[] = []
+
+    // Register for root detection (will be cleaned up once mounted)
+    pendingRoots.add(base)
+    initObserver()
+
+    return {
+        children,
+
+        getChildren: () => children,
+
+        setChildren: (c: AnyComponent[]) => { children = c },
+
+        append(...args: (AnyComponent | false | null | undefined)[]) {
+            for (const c of args) {
+                if (!c) continue
+                if (c instanceof Promise) {
+                    c.then(resolved => {
+                        if (!resolved?.el) return
+                        base.el.appendChild(resolved.el)
+                        children.push(resolved)
+                        resolved.parent = base
+                        pendingRoots.delete(resolved) // No longer pending
+                        if (base.isMounted) markMounted(resolved)
+                    })
+                    continue
+                }
+                if (!c.el) continue
+                base.el.appendChild(c.el)
+                children.push(c)
+                c.parent = base
+                pendingRoots.delete(c) // No longer pending - has parent
+                if (base.isMounted) markMounted(c)
+            }
+            base.emit('append', args)
+            return base
+        },
+
+        prepend(...args: AnyComponent[]) {
+            for (const c of args) {
+                if (!c?.el) continue
+                base.el.insertBefore(c.el, base.el.firstChild)
+                children.unshift(c)
+                c.parent = base
+                pendingRoots.delete(c)
+                if (base.isMounted) markMounted(c)
+            }
+            base.emit('prepend', args)
+            return base
+        },
+
+        appendBefore(ref: AnyComponent, ...args: AnyComponent[]) {
+            for (const c of args) {
+                if (!c?.el) continue
+                base.el.insertBefore(c.el, ref.el)
+                const idx = children.indexOf(ref)
+                children.splice(idx, 0, c)
+                c.parent = base
+                pendingRoots.delete(c)
+                if (base.isMounted) markMounted(c)
+            }
+            return base
+        },
+
+        appendAfter(ref: AnyComponent, ...args: AnyComponent[]) {
+            for (const c of args) {
+                if (!c?.el) continue
+                base.el.insertBefore(c.el, ref.el.nextSibling)
+                const idx = children.indexOf(ref)
+                children.splice(idx + 1, 0, c)
+                c.parent = base
+                pendingRoots.delete(c)
+                if (base.isMounted) markMounted(c)
+            }
+            return base
+        },
+
+        empty() {
+            children.forEach(c => c.remove())
+            children = []
+        },
+
+        remove() {
+            children.forEach(c => c.remove())
+            if (base.parent) {
+                base.parent.setChildren(base.parent.getChildren().filter(c => c !== base))
+            }
+            base.removeAllListeners()
+            pendingRoots.delete(base)
+            base.el.remove()
+            base.emit('unmounted')
+        }
+    }
+}
+
+export interface IAppender {
+    children: AnyComponent[]
+    getChildren(): AnyComponent[]
+    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
+}
+
+export default createAppender

package/utils/emitter.ts

@@ -0,0 +1,63 @@
+export function createEmitter<T extends Record<string, any> = Record<string, any>>(): IEmitter<T> {
+    const listeners: Record<string, Function[]> = {}
+
+    return {
+        on(event, handler) {
+            const events = Array.isArray(event) ? event : [event]
+            for (const e of events) {
+                const key = e as string
+                listeners[key] = listeners[key] || []
+                listeners[key].push(handler)
+            }
+            return this
+        },
+
+        once(event, handler) {
+            const wrapper = (payload: any) => {
+                handler(payload)
+                this.off(event, wrapper as any)
+            }
+            return this.on(event, wrapper as any)
+        },
+
+        off(event, handler) {
+            const key = event as string
+            if (!handler) {
+                delete listeners[key]
+            } else if (listeners[key]) {
+                listeners[key] = listeners[key].filter(h => h !== handler)
+            }
+            return this
+        },
+
+        emit(event, payload) {
+            const key = event as string
+            if (listeners[key]) {
+                for (const handler of listeners[key]) {
+                    handler(payload)
+                }
+            }
+            return this
+        },
+
+        removeAllListeners() {
+            for (const key in listeners) delete listeners[key]
+        },
+
+        getListeners() {
+            return listeners
+        }
+    } as IEmitter<T>
+}
+
+// Global emitter for framework internals (mounter, theme, db-ready)
+export const emitter = createEmitter()
+
+export interface IEmitter<T extends Record<string, any> = Record<string, any>> {
+    on<K extends keyof T>(event: K | K[], handler: (payload: T[K]) => void): this
+    once<K extends keyof T>(event: K, handler: (payload: T[K]) => void): this
+    off<K extends keyof T>(event: K, handler?: (payload: T[K]) => void): this
+    emit<K extends keyof T>(event: K, payload?: T[K]): this
+    removeAllListeners(): void
+    getListeners(): Record<string, Function[]>
+}

package/utils/id.ts

@@ -0,0 +1,13 @@
+export const idGenerator = (id = 0) => () => (id++).toString()
+export const nextId = idGenerator()
+
+export const shortUUID = () => {
+    return (new Date().valueOf().toString(36).slice(2) + Math.random().toString(36).slice(2)).slice(-12)
+}
+
+// Credits: https://stackoverflow.com/users/109538/broofa
+export const uuidv4 = () => {
+    return (String(1e7) + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+        (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
+    )
+}

package/utils/mounter.ts

@@ -0,0 +1,8 @@
+// mounter.ts is now deprecated - mounted detection is handled by appender.ts
+// This file kept for backward compatibility only
+
+export function initMounter() {
+    // No-op - appender handles mounting now
+}
+
+export default { observe: initMounter }

package/utils/ripple.ts

@@ -0,0 +1,59 @@
+// Ripple effect - Material Design style touch feedback
+
+import { Base, IBaseComponent } from '../components/base'
+import { injectCSS } from '../utils/styler'
+
+const RIPPLE_CSS = `
+[data-ripple] .ripple {
+    position: absolute;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0.1;
+    transform: scale(0);
+    pointer-events: none;
+}
+[data-ripple] .ripple.animate {
+    animation: ripple 1s ease-out;
+}
+@keyframes ripple {
+    to { transform: scale(4); opacity: 0; }
+}
+`
+
+export const withRipple = <T extends IBaseComponent<any>>(component: T): T => {
+    injectCSS('base-ripple', RIPPLE_CSS)
+
+    component.el.setAttribute('data-ripple', '')
+
+    const createRipple = (x: number, y: number) => {
+        const ripple = Base('span')
+        ripple.el.className = 'ripple'
+
+        const rect = component.el.getBoundingClientRect()
+        const size = Math.max(rect.width, rect.height) * 2
+
+        ripple.style({
+            width: size + 'px',
+            height: size + 'px',
+            left: (x - rect.left - size / 2) + 'px',
+            top: (y - rect.top - size / 2) + 'px'
+        })
+
+        component.el.appendChild(ripple.el)
+        ripple.el.classList.add('animate')
+
+        setTimeout(() => ripple.el.remove(), 600)
+    }
+
+    component.el.addEventListener('touchstart', (e: TouchEvent) => {
+        createRipple(e.touches[0].clientX, e.touches[0].clientY)
+    }, { passive: true })
+
+    component.el.addEventListener('mousedown', (e: MouseEvent) => {
+        createRipple(e.clientX, e.clientY)
+    })
+
+    return component
+}
+
+export default withRipple

package/utils/styler.ts

@@ -0,0 +1,56 @@
+import { IBaseComponent, IBaseSVGComponent } from '../components/base'
+
+type Component = IBaseComponent<any> | IBaseSVGComponent<any>
+type StyleObj = Partial<CSSStyleDeclaration> & Record<string, any>
+
+export function createStyler(base: Component): IStyler {
+    return {
+        style(s: StyleObj, delay?: number) {
+            const apply = () => {
+                const keys = Object.keys(s)
+                for (let i = 0; i < keys.length; i++) {
+                    const k = keys[i]
+                    const v = s[k]
+                        ; (base.el.style as any)[k] = typeof v === 'function' ? v() : v
+                }
+            }
+            delay ? setTimeout(apply, delay) : apply()
+            return base
+        },
+
+        addClass(...classes: string[]) {
+            base.el.classList.add.apply(base.el.classList, classes)
+            return base
+        },
+
+        removeClass(...classes: string[]) {
+            base.el.classList.remove.apply(base.el.classList, classes)
+            return base
+        },
+
+        toggleClass(cls: string, force?: boolean) {
+            base.el.classList.toggle(cls, force)
+            return base
+        }
+    }
+}
+
+// Inject CSS once - for components that need self-contained styles
+const injected: Record<string, boolean> = {}
+export function injectCSS(id: string, css: string) {
+    if (injected[id]) return
+    injected[id] = true
+    const el = document.createElement('style')
+    el.id = id
+    el.textContent = css
+    document.head.appendChild(el)
+}
+
+export interface IStyler {
+    style(s: StyleObj, delay?: number): Component
+    addClass(...classes: string[]): Component
+    removeClass(...classes: string[]): Component
+    toggleClass(cls: string, force?: boolean): Component
+}
+
+export default createStyler

package/utils/wait.ts

@@ -0,0 +1,3 @@
+export const waitFor = (time: number) => {
+    return new Promise(resolve => setTimeout(resolve, time, true))
+}