@codesuma/baseline 1.0.1

package/components/advanced/page.ts

@@ -0,0 +1,53 @@
+// Page component with directional enter/exit transitions
+
+import { Div } from '../native/div'
+import { IRouteEvent } from '../../lib/router'
+import { waitFor } from '../../utils/wait'
+import styles from './page.module.css'
+
+const TRANSITION_DURATION = 160
+
+export const Page = () => {
+    const base = Div()
+    base.addClass(styles.page)  // Initial state is hidden below (in CSS)
+
+    // Enter: direction based on isBack flag
+    base.on('enter', async ({ isBack }: IRouteEvent) => {
+        await waitFor(10)
+        // Clear all state classes
+        base.removeClass(
+            styles.exitUp,
+            styles.exitDown,
+            styles.hiddenBelow,
+            styles.hiddenAbove
+        )
+        // Add enter class (same visual result, but positioned correctly before)
+        base.addClass(isBack ? styles.enterDown : styles.enterUp)
+    })
+
+    // Exit: direction based on isBack flag
+    base.on('exit', async ({ isBack }: IRouteEvent) => {
+        base.removeClass(styles.enterUp, styles.enterDown)
+        if (isBack) {
+            // Back: current page goes DOWN
+            base.addClass(styles.exitDown)
+        } else {
+            // Forward: current page goes UP
+            base.addClass(styles.exitUp)
+        }
+        await waitFor(TRANSITION_DURATION)
+
+        // Position for next enter
+        if (isBack) {
+            // After exiting down, position below for next forward enter
+            base.addClass(styles.hiddenBelow)
+        } else {
+            // After exiting up, position above for next back enter
+            base.addClass(styles.hiddenAbove)
+        }
+    })
+
+    return base
+}
+
+export default Page

package/components/base.ts

@@ -0,0 +1,45 @@
+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()
+    const el = document.createElement(name)
+    el.setAttribute('data-base-id', id)
+
+    const component: any = { id, el, isMounted: false, parent: undefined }
+
+    Object.assign(component, createEmitter(), createAppender(component), createStyler(component))
+
+    return component
+}
+
+export function BaseSVG<K extends keyof SVGElementTagNameMap>(name: K = 'svg' as K): IBaseSVGComponent<K> {
+    const id = nextId()
+    const el = document.createElementNS('http://www.w3.org/2000/svg', name)
+    el.setAttribute('data-base-id', id)
+
+    const component: any = { id, el, isMounted: false, parent: undefined }
+
+    Object.assign(component, createEmitter(), createAppender(component), createStyler(component))
+
+    return component
+}
+
+export interface IBaseComponent<K extends keyof HTMLElementTagNameMap = 'div'> extends IEmitter, IAppender, IStyler {
+    id: string
+    el: HTMLElementTagNameMap[K]
+    parent?: IBaseComponent<any>
+    isMounted: boolean
+}
+
+export interface IBaseSVGComponent<K extends keyof SVGElementTagNameMap = 'svg'> extends IEmitter, IAppender, IStyler {
+    id: string
+    el: SVGElementTagNameMap[K]
+    parent?: IBaseComponent<any> | IBaseSVGComponent<any>
+    isMounted: boolean
+}

package/components/native/a.ts

@@ -0,0 +1,15 @@
+import { Base } from '../base'
+
+export const A = (href = '#', text = '', target = '_self') => {
+    const base = Base('a')
+    base.el.href = href
+    base.el.target = target
+    if (text) base.el.textContent = text
+
+    return Object.assign(base, {
+        text(t: string) { base.el.textContent = t },
+        href(h: string) { base.el.href = h },
+        target(t: string) { base.el.target = t },
+        download(filename: string) { base.el.download = filename }
+    })
+}

package/components/native/button.ts

@@ -0,0 +1,17 @@
+import { Base } from '../base'
+
+export const Button = (text = '') => {
+    const base = Base('button')
+
+    base.style({ cursor: 'pointer' })
+    base.el.textContent = text
+    base.el.onclick = () => base.emit('click')
+
+    return Object.assign(base, {
+        focus() { base.el.focus() },
+        blur() { base.el.blur() },
+        disable() { base.el.disabled = true },
+        enable() { base.el.disabled = false },
+        text(t: string) { base.el.textContent = t }
+    })
+}

package/components/native/canvas.ts

@@ -0,0 +1,15 @@
+import { Base } from '../base'
+
+export const Canvas = (width: number, height: number) => {
+    const base = Base('canvas')
+    base.el.width = width
+    base.el.height = height
+
+    return Object.assign(base, {
+        ctx: base.el.getContext('2d')!,
+        resize(w: number, h: number) {
+            base.el.width = w
+            base.el.height = h
+        }
+    })
+}

package/components/native/div.ts

@@ -0,0 +1,11 @@
+import { Base } from '../base'
+
+export const Div = (content = '') => {
+    const base = Base('div')
+    if (content) base.el.innerHTML = content
+
+    return Object.assign(base, {
+        text(t: string) { base.el.textContent = t },
+        html(h: string) { base.el.innerHTML = h }
+    })
+}

package/components/native/h.ts

@@ -0,0 +1,17 @@
+import { Base } from '../base'
+
+const createHeading = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', content = '') => {
+    const base = Base(tag)
+    if (content) base.el.textContent = content
+
+    return Object.assign(base, {
+        text(t: string) { base.el.textContent = t }
+    })
+}
+
+export const H1 = (content = '') => createHeading('h1', content)
+export const H2 = (content = '') => createHeading('h2', content)
+export const H3 = (content = '') => createHeading('h3', content)
+export const H4 = (content = '') => createHeading('h4', content)
+export const H5 = (content = '') => createHeading('h5', content)
+export const H6 = (content = '') => createHeading('h6', content)

package/components/native/img.ts

@@ -0,0 +1,17 @@
+import { Base } from '../base'
+
+const PLACEHOLDER = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+
+export const Img = (src = '', options: { width?: number; height?: number; alt?: string } = {}) => {
+    const base = Base('img')
+
+    base.el.src = src || PLACEHOLDER
+    if (options.alt) base.el.alt = options.alt
+    if (options.width) base.style({ width: options.width + 'px' })
+    if (options.height) base.style({ height: options.height + 'px' })
+
+    return Object.assign(base, {
+        src(s: string) { base.el.src = s },
+        alt(a: string) { base.el.alt = a }
+    })
+}

package/components/native/input.ts

@@ -0,0 +1,29 @@
+import { Base } from '../base'
+
+export const Input = (placeholder = '', type = 'text', options: { value?: string; accept?: string } = {}) => {
+    const base = type === 'textarea' ? Base('textarea') : Base('input')
+
+    base.el.setAttribute('type', type)
+    base.el.setAttribute('placeholder', placeholder)
+    if (options.accept) base.el.setAttribute('accept', options.accept)
+    if (options.value) base.el.value = options.value
+
+    // Events
+    base.el.onblur = () => base.emit('blur')
+    base.el.onfocus = () => base.emit('focus')
+    base.el.oninput = () => base.emit('input', base.el.value)
+    base.el.onkeydown = (e: KeyboardEvent) => {
+        if (e.key === 'Enter') base.emit('enter', base.el.value)
+        if (e.key === 'Escape') base.emit('escape')
+        base.emit('keydown', { key: e.key, value: base.el.value })
+    }
+
+    return Object.assign(base, {
+        focus() { base.el.focus() },
+        blur() { base.el.blur() },
+        select() { base.el.select() },
+        value() { return base.el.value },
+        setValue(v: string) { base.el.value = v },
+        clear() { base.el.value = '' }
+    })
+}

package/components/native/option.ts

@@ -0,0 +1,8 @@
+import { Base } from '../base'
+
+export const Option = (value: string, text: string) => {
+    const base = Base('option')
+    base.el.value = value
+    base.el.textContent = text
+    return base
+}

package/components/native/p.ts

@@ -0,0 +1,11 @@
+import { Base } from '../base'
+
+export const P = (content = '') => {
+    const base = Base('p')
+    if (content) base.el.textContent = content
+
+    return Object.assign(base, {
+        text(t: string) { base.el.textContent = t },
+        html(h: string) { base.el.innerHTML = h }
+    })
+}

package/components/native/select.ts

@@ -0,0 +1,15 @@
+import { Base } from '../base'
+import { Option } from './option'
+
+export const Select = (options: { value: string; text: string }[] = []) => {
+    const base = Base('select')
+
+    options.forEach(({ value, text }) => base.append(Option(value, text)))
+    base.el.onchange = () => base.emit('change', base.el.value)
+
+    return Object.assign(base, {
+        add(value: string, text: string) { base.append(Option(value, text)) },
+        value() { return base.el.value },
+        setValue(v: string) { base.el.value = v }
+    })
+}

package/components/native/span.ts

@@ -0,0 +1,11 @@
+import { Base } from '../base'
+
+export const Span = (content = '') => {
+    const base = Base('span')
+    if (content) base.el.textContent = content
+
+    return Object.assign(base, {
+        text(t: string) { base.el.textContent = t },
+        html(h: string) { base.el.innerHTML = h }
+    })
+}

package/components/native/svg.ts

@@ -0,0 +1,18 @@
+import { BaseSVG } from '../base'
+
+export const SVG = (viewBox: string | number, height?: number) => {
+    const base = BaseSVG('svg')
+
+    if (typeof viewBox === 'string') {
+        base.el.setAttribute('viewBox', viewBox)
+    } else {
+        const h = height || viewBox
+        base.el.setAttribute('viewBox', `0 0 ${viewBox} ${h}`)
+        base.el.setAttribute('width', String(viewBox))
+        base.el.setAttribute('height', String(h))
+    }
+
+    return Object.assign(base, {
+        html(content: string) { base.el.innerHTML = content }
+    })
+}

package/helpers/date.ts

@@ -0,0 +1,17 @@
+// Date formatting helpers
+
+export const dateFormatter = (locale = 'en-US', options: Intl.DateTimeFormatOptions = {}) =>
+    new Intl.DateTimeFormat(locale, {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        ...options
+    })
+
+// Persian/Jalali date formatter
+export const jDateFormatter = dateFormatter('fa-IR', { weekday: 'long' })
+
+// Common formatters
+export const formatDate = (date: Date, locale = 'en-US') => dateFormatter(locale).format(date)
+export const formatTime = (date: Date, locale = 'en-US') =>
+    new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit' }).format(date)

package/helpers/device.ts

@@ -0,0 +1,13 @@
+// Device detection helpers
+
+export const isMobile = () =>
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+
+export const isTouch = () =>
+    'ontouchstart' in window || navigator.maxTouchPoints > 0
+
+export const isIOS = () =>
+    /iPad|iPhone|iPod/.test(navigator.userAgent)
+
+export const isAndroid = () =>
+    /Android/.test(navigator.userAgent)

package/helpers/format.ts

@@ -0,0 +1,13 @@
+// Number formatting helpers
+
+export const formatNumber = (n: number, decimals?: number) => {
+    if (typeof n !== 'number') return String(n)
+    const fixed = decimals !== undefined ? n.toFixed(decimals) : n.toString()
+    return fixed.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
+
+export const formatCurrency = (n: number, currency = 'USD', locale = 'en-US') =>
+    new Intl.NumberFormat(locale, { style: 'currency', currency }).format(n)
+
+export const formatPercent = (n: number, decimals = 0) =>
+    (n * 100).toFixed(decimals) + '%'

package/helpers/locales.ts

@@ -0,0 +1,15 @@
+// Locale and text direction helpers
+
+const RTL_CHARS = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/
+
+export const isRTL = (text: string) => RTL_CHARS.test(text)
+
+// Persian/Arabic digits to Latin
+export const toLatinDigits = (str: string) =>
+    str.replace(/[\u06F0-\u06F9\u0660-\u0669]/g, d =>
+        String(d.charCodeAt(0) - (d >= '۰' ? 0x06F0 : 0x0660))
+    )
+
+// Latin digits to Persian
+export const toPersianDigits = (str: string) =>
+    str.replace(/[0-9]/g, d => String.fromCharCode(0x06F0 + parseInt(d)))

package/helpers/regex.ts

@@ -0,0 +1,12 @@
+// Validation regex patterns
+
+export const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+export const URL = /^https?:\/\/[^\s/$.?#].[^\s]*$/i
+export const PHONE = /^\+?[\d\s-()]+$/
+export const PASSWORD_STRONG = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/
+
+// Validators (return boolean)
+export const isEmail = (s: string) => EMAIL.test(s)
+export const isUrl = (s: string) => URL.test(s)
+export const isPhone = (s: string) => PHONE.test(s)
+export const isStrongPassword = (s: string) => PASSWORD_STRONG.test(s)

package/index.ts

@@ -0,0 +1,35 @@
+// Base - A minimal, imperative UI framework
+// Main entry point
+
+// Core component factory
+export { Base, IBaseComponent } from './components/base'
+
+// Native components
+export { Div } from './components/native/div'
+export { Span } from './components/native/span'
+export { P } from './components/native/p'
+export { H1, H2, H3, H4, H5, H6 } from './components/native/h'
+export { Button } from './components/native/button'
+export { Input } from './components/native/input'
+export { A } from './components/native/a'
+export { Img } from './components/native/img'
+export { Select } from './components/native/select'
+export { Option } from './components/native/option'
+export { Canvas } from './components/native/canvas'
+export { SVG } from './components/native/svg'
+
+// Advanced components
+export { Page } from './components/advanced/page'
+
+// Libraries
+export { default as router, IRouteEvent } from './lib/router'
+export { default as http } from './lib/http'
+export { default as ldb } from './lib/ldb'
+export { default as createDB } from './lib/idb'
+export { default as state } from './lib/state'
+
+// Utilities
+export { createEmitter, emitter, IEmitter } from './utils/emitter'
+export { createStyler, injectCSS, IStyler } from './utils/styler'
+export { waitFor } from './utils/wait'
+export { withRipple } from './utils/ripple'

package/lib/http.ts

@@ -0,0 +1,96 @@
+// HTTP client with request deduplication and progress support
+
+type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'
+
+interface RequestOptions {
+    headers?: Record<string, string>
+    auth?: string
+    onProgress?: (loaded: number, total: number) => void
+}
+
+// Request queue for deduplication
+const pending: Record<string, Promise<any>> = {}
+
+const request = async <T = any>(
+    method: Method,
+    url: string,
+    body?: any,
+    options: RequestOptions = {}
+): Promise<{ status: number; data: T }> => {
+    const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+        ...options.headers
+    }
+    if (options.auth) headers['Authorization'] = `Bearer ${options.auth}`
+
+    const res = await fetch(url, {
+        method,
+        headers,
+        credentials: 'include',
+        body: body ? JSON.stringify(body) : undefined
+    })
+
+    let data: T
+    const contentType = res.headers.get('content-type')
+    if (contentType?.includes('application/json')) {
+        data = await res.json()
+    } else {
+        data = await res.text() as any
+    }
+
+    return { status: res.status, data }
+}
+
+// Deduplicated request - same URL returns same promise
+const dedupe = <T>(key: string, fn: () => Promise<T>): Promise<T> => {
+    if (!pending[key]) {
+        pending[key] = fn().finally(() => delete pending[key])
+    }
+    return pending[key]
+}
+
+// Public API
+export const http = {
+    get: <T = any>(url: string, options?: RequestOptions) =>
+        dedupe(url, () => request<T>('GET', url, undefined, options)),
+
+    post: <T = any>(url: string, body?: any, options?: RequestOptions) =>
+        request<T>('POST', url, body, options),
+
+    put: <T = any>(url: string, body?: any, options?: RequestOptions) =>
+        request<T>('PUT', url, body, options),
+
+    patch: <T = any>(url: string, body?: any, options?: RequestOptions) =>
+        request<T>('PATCH', url, body, options),
+
+    delete: <T = any>(url: string, options?: RequestOptions) =>
+        request<T>('DELETE', url, undefined, options),
+
+    // Upload with progress (uses XHR for progress events)
+    upload: (url: string, file: File, options: RequestOptions = {}) => {
+        return new Promise<{ status: number; data: any }>((resolve, reject) => {
+            const xhr = new XMLHttpRequest()
+            xhr.open('POST', url)
+            if (options.auth) xhr.setRequestHeader('Authorization', `Bearer ${options.auth}`)
+            xhr.setRequestHeader('Content-Type', file.type)
+
+            if (options.onProgress) {
+                xhr.upload.onprogress = (e) => {
+                    if (e.lengthComputable) options.onProgress!(e.loaded, e.total)
+                }
+            }
+
+            xhr.onload = () => {
+                try {
+                    resolve({ status: xhr.status, data: JSON.parse(xhr.response) })
+                } catch {
+                    resolve({ status: xhr.status, data: xhr.response })
+                }
+            }
+            xhr.onerror = () => reject(new Error('Upload failed'))
+            xhr.send(file)
+        })
+    }
+}
+
+export default http

package/lib/idb.ts

@@ -0,0 +1,135 @@
+// 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)
+        }
+    })
+}
+
+export default (dbName: string) => ({
+    // Get database info
+    async info(): 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 createStore(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 save<T>(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 get<T>(store: string, id: any): Promise<T | undefined> {
+        return withStore(dbName, store, 'readonly', s => s.get(id))
+    },
+
+    async all<T>(store: string): Promise<T[]> {
+        return withStore(dbName, store, 'readonly', s => s.getAll())
+    },
+
+    async update<T>(store: string, data: T): Promise<T> {
+        await withStore(dbName, store, 'readwrite', s => s.put(data))
+        return data
+    },
+
+    async delete(store: string, id: any): Promise<void> {
+        await withStore(dbName, store, 'readwrite', s => s.delete(id))
+    },
+
+    async clear(store: string): Promise<void> {
+        await withStore(dbName, store, 'readwrite', s => s.clear())
+    },
+
+    async count(store: string): Promise<number> {
+        return withStore(dbName, store, 'readonly', s => s.count())
+    },
+
+    // Query with options
+    async find<T>(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) }
+        })
+    }
+})