bitwrench 2.0.24 → 2.0.30

package/docs/bitwrench_typescript_usage.md

@@ -0,0 +1,441 @@
+# Using Bitwrench with TypeScript
+
+Bitwrench ships TypeScript type definitions in `dist/bitwrench.d.ts`.
+You get autocomplete, type checking, and documentation hover in VS Code,
+WebStorm, and any TypeScript-aware editor -- no extra packages needed.
+
+## Quick Start
+
+### Install
+
+```bash
+npm install bitwrench
+```
+
+The `types` field in `package.json` points to `dist/bitwrench.d.ts`,
+so TypeScript picks up the types automatically.
+
+### Import Styles
+
+**Default import (full library):**
+
+```typescript
+import bw from 'bitwrench';
+
+const card = bw.makeCard({ title: 'Hello', content: 'World' });
+bw.DOM('#app', card);
+```
+
+**Named imports (tree-shakeable):**
+
+```typescript
+import { makeCard, makeButton, makeNav } from 'bitwrench';
+
+const card = makeCard({ title: 'Dashboard', content: 'Stats here' });
+```
+
+**CommonJS (Node.js):**
+
+```typescript
+const bw = require('bitwrench');
+
+const html = bw.html({ t: 'h1', c: 'Server-rendered' });
+```
+
+**UMD (script tag -- no import needed):**
+
+```html
+<script src="https://unpkg.com/bitwrench/dist/bitwrench.umd.min.js"></script>
+<script>
+  // bw is a global. For TS, add a reference comment or declare it:
+  bw.DOM('#app', { t: 'p', c: 'Hello from UMD' });
+</script>
+```
+
+For UMD in a TypeScript file, add a triple-slash reference:
+
+```typescript
+/// <reference path="node_modules/bitwrench/dist/bitwrench.d.ts" />
+declare var bw: import('bitwrench').Bitwrench;
+```
+
+## Core Types
+
+### Taco
+
+The fundamental UI primitive. Every bitwrench component is a `Taco` object.
+
+```typescript
+import type { Taco, TacoAttributes, TacoOptions, TacoContent } from 'bitwrench';
+
+const myCard: Taco = {
+  t: 'div',
+  a: { class: 'bw_card', id: 'stats' },
+  c: [
+    { t: 'h3', c: 'Revenue' },
+    { t: 'p', c: '$1,234' }
+  ],
+  o: {
+    state: { value: 1234 },
+    render: (el, state) => {
+      el.querySelector('.value')!.textContent = '$' + state!.value;
+    }
+  }
+};
+```
+
+**Field summary:**
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `t`   | `string` | Yes | HTML tag name |
+| `a`   | `TacoAttributes` | No | HTML attributes, event handlers, class, style |
+| `c`   | `TacoContent` | No | String, number, nested Taco, array, `bw.raw()`, or null |
+| `o`   | `TacoOptions` | No | Lifecycle hooks, state, handle methods, slots |
+
+### TacoContent
+
+Content can be many types:
+
+```typescript
+// String
+const text: Taco = { t: 'p', c: 'Hello' };
+
+// Number (auto-stringified)
+const num: Taco = { t: 'span', c: 42 };
+
+// Nested TACO
+const nested: Taco = { t: 'div', c: { t: 'em', c: 'italic' } };
+
+// Array of mixed content
+const list: Taco = {
+  t: 'ul',
+  c: [
+    { t: 'li', c: 'one' },
+    { t: 'li', c: 'two' },
+    { t: 'li', c: 'three' }
+  ]
+};
+
+// Raw HTML (skips escaping)
+const raw: Taco = { t: 'div', c: bw.raw('<strong>Pre-escaped</strong>') };
+```
+
+### TacoAttributes
+
+```typescript
+const button: Taco = {
+  t: 'button',
+  a: {
+    class: ['bw_btn', 'bw_primary'],     // string or string[]
+    style: { padding: '8px', color: '#fff' }, // string or object
+    disabled: false,                        // boolean attrs
+    onclick: (e: Event) => handleClick(e),  // function or string
+    'data-id': '123',                       // custom attributes
+    'aria-label': 'Submit form'             // ARIA attributes
+  },
+  c: 'Submit'
+};
+```
+
+### TacoOptions (Component Handles)
+
+```typescript
+const counter: Taco = {
+  t: 'div',
+  a: { class: 'counter' },
+  c: [
+    { t: 'span', a: { class: 'count' }, c: '0' },
+    { t: 'button', a: { onclick: () => el.bw.increment() }, c: '+' }
+  ],
+  o: {
+    state: { count: 0 },
+    handle: {
+      increment: (el: HTMLElement) => {
+        el._bw_state.count++;
+        bw.update(el);
+      },
+      reset: (el: HTMLElement) => {
+        el._bw_state.count = 0;
+        bw.update(el);
+      }
+    },
+    slots: {
+      count: '.count'   // auto-generates el.bw.setCount() / el.bw.getCount()
+    },
+    render: (el: HTMLElement, state: any) => {
+      el.querySelector('.count')!.textContent = String(state.count);
+    },
+    mounted: (el: HTMLElement) => {
+      console.log('Counter mounted');
+    },
+    unmount: (el: HTMLElement) => {
+      console.log('Counter removed');
+    }
+  }
+};
+
+// Mount and interact through typed handle
+const el = bw.mount('#app', counter);
+(el as any).bw.increment();
+(el as any).bw.setCount('99');
+```
+
+## BCCL Component Configs
+
+The `make*()` factories have typed config objects for the most common
+components. TypeScript will autocomplete property names and catch typos.
+
+```typescript
+import bw from 'bitwrench';
+import type { CardConfig, ButtonConfig, TabsConfig, AccordionConfig } from 'bitwrench';
+
+// Card -- typed config catches typos
+const card = bw.makeCard({
+  title: 'Dashboard',
+  content: 'Welcome back',
+  footer: 'Last updated: today',
+  variant: 'primary',
+  shadow: true
+});
+// bw.makeCard({ label: 'Oops' })  // TS error: 'label' not in CardConfig
+
+// Button
+const btn = bw.makeButton({
+  text: 'Save',
+  variant: 'success',
+  size: 'lg',
+  onclick: () => save()
+});
+
+// Tabs
+const tabs = bw.makeTabs({
+  tabs: [
+    { text: 'Overview', content: 'Tab 1 content', active: true },
+    { text: 'Details', content: { t: 'div', c: 'Tab 2 TACO content' } }
+  ]
+});
+
+// Accordion -- note: uses title/content, NOT label/header/body
+const acc = bw.makeAccordion({
+  items: [
+    { title: 'Section 1', content: 'Content 1' },
+    { title: 'Section 2', content: 'Content 2' }
+  ]
+});
+```
+
+## Styles / Theming
+
+```typescript
+import bw from 'bitwrench';
+import type { StyleConfig, StylesResult, Palette, ColorShades } from 'bitwrench';
+
+// Generate theme from seed colors
+const config: StyleConfig = {
+  primary: '#2563eb',
+  secondary: '#7c3aed',
+  background: '#ffffff',
+  surface: '#f8fafc'
+};
+
+const styles: StylesResult = bw.makeStyles(config);
+bw.applyStyles(styles);
+
+// Access palette values
+const p: Palette = styles.palette;
+const primaryBase: string = p.primary.base;       // '#2563eb'
+const primaryHover: string = p.primary.hover;     // derived shade
+const bg: string = p.background;                  // plain string (NOT an object)
+
+// Toggle dark/light
+bw.toggleStyles();
+
+// Shorthand: generate + apply in one call
+bw.loadStyles({ primary: '#dc2626' });
+
+// Structural CSS only (no colors)
+bw.loadStyles();
+```
+
+**Palette gotcha**: `palette.background`, `palette.surface`, and
+`palette.surfaceAlt` are plain strings. All other keys (`primary`,
+`secondary`, etc.) are `ColorShades` objects with `.base`, `.hover`,
+`.active`, `.light`, `.darkText`, `.border`, `.focus`, `.textOn`.
+
+## Color Utilities
+
+```typescript
+const hsl = bw.hexToHsl('#2563eb');       // [221, 83, 53]
+const hex = bw.hslToHex([221, 83, 53]);   // '#2563eb'
+
+const lighter = bw.adjustLightness('#2563eb', 20);  // lighten by 20
+const mixed = bw.mixColor('#ff0000', '#0000ff', 0.5); // purple
+const lum = bw.relativeLuminance('#2563eb');  // 0.0-1.0
+const textColor = bw.textOnColor('#2563eb');  // '#fff' or '#000'
+
+const shades: ColorShades = bw.deriveShades('#2563eb');
+// { base, hover, active, light, darkText, border, focus, textOn }
+```
+
+## Routing
+
+```typescript
+import bw from 'bitwrench';
+import type { RouterConfig, RouterHandle } from 'bitwrench';
+
+const config: RouterConfig = {
+  routes: {
+    '/': () => ({ t: 'h1', c: 'Home' }),
+    '/user/:id': (params) => ({
+      t: 'div',
+      c: 'User ' + params.id
+    }),
+    '*': () => ({ t: 'p', c: '404 Not Found' })
+  },
+  target: '#app',
+  mode: 'hash'
+};
+
+const router: RouterHandle = bw.router(config);
+router.navigate('/user/42');
+console.log(router.current());  // '/user/42'
+router.destroy();
+```
+
+## Server-Side Rendering
+
+bitwrench works in Node.js. `bw.html()` renders TACO to HTML strings
+with no DOM dependency.
+
+```typescript
+import bw from 'bitwrench';
+
+// Render TACO to HTML string (Node.js or browser)
+const html: string = bw.html({
+  t: 'div',
+  a: { class: 'card' },
+  c: [
+    { t: 'h2', c: 'Server Rendered' },
+    { t: 'p', c: 'No DOM needed' }
+  ]
+});
+
+// Generate complete HTML page
+const page: string = bw.htmlPage({
+  title: 'My App',
+  content: { t: 'h1', c: 'Hello' }
+});
+```
+
+## Extending Types
+
+### Custom component config
+
+```typescript
+import type { Taco, ComponentConfig } from 'bitwrench';
+
+interface MyWidgetConfig extends ComponentConfig {
+  label: string;
+  value: number;
+  onChange?: (newValue: number) => void;
+}
+
+function makeMyWidget(config: MyWidgetConfig): Taco {
+  return {
+    t: 'div',
+    a: { class: 'my-widget' },
+    c: [
+      { t: 'label', c: config.label },
+      {
+        t: 'input',
+        a: {
+          type: 'number',
+          value: String(config.value),
+          oninput: (e: Event) => {
+            const v = Number((e.target as HTMLInputElement).value);
+            if (config.onChange) config.onChange(v);
+          }
+        }
+      }
+    ]
+  };
+}
+```
+
+### Adding el.bw types for specific components
+
+The `el.bw` namespace is dynamically populated from `o.handle` and
+`o.slots`. TypeScript doesn't know the specific methods at compile time.
+You can augment with a cast:
+
+```typescript
+interface CardHandle {
+  setTitle(v: string): void;
+  getTitle(): string;
+  setContent(v: string | Taco): void;
+  getContent(): string;
+}
+
+const el = bw.mount('#app', bw.makeCard({ title: 'Hello' }));
+const handle = (el as any).bw as CardHandle;
+handle.setTitle('Updated');
+```
+
+## tsconfig.json Tips
+
+bitwrench works with any `moduleResolution` setting. Recommended:
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "strict": true
+  }
+}
+```
+
+For Node.js (CommonJS):
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "esModuleInterop": true
+  }
+}
+```
+
+## What's Not Typed
+
+bitwrench is a JavaScript-first library. Some patterns are inherently
+dynamic and don't have specific types:
+
+- **`el.bw.*` methods** -- populated at runtime from `o.handle`/`o.slots`.
+  Cast `el.bw` to a custom interface for your components.
+- **`bw.apply()` wire protocol messages** -- typed as `Record<string, any>`.
+  The bwserve protocol is documented in `dev/bw-client-server.md`.
+- **Less common `make*()` configs** -- typed as `ComponentConfig` (open
+  object). The most-used components (Card, Button, Tabs, Accordion, Modal,
+  Alert, Nav, Input, Carousel, Table) have specific config types.
+
+## FAQ
+
+**Q: Do I need to install `@types/bitwrench`?**
+No. Types ship with the package. There is no separate `@types` package.
+
+**Q: Can I use bitwrench without TypeScript?**
+Yes. bitwrench is a JavaScript library. TypeScript support is optional.
+The `.d.ts` file provides editor autocomplete even in plain `.js` files
+if your editor supports it (VS Code does by default).
+
+**Q: Why not write bitwrench in TypeScript?**
+bitwrench is designed for zero-toolchain development. You can load it via
+`<script>` tag and start building UI -- no compiler, no bundler, no
+`tsconfig.json`. TypeScript types are provided for developers who choose
+to use TS, without imposing it on everyone.

package/docs/component-cheatsheet.md

@@ -1,7 +1,7 @@
 # Component Cheat Sheet
 
 > **Before you write custom TACO for a common UI pattern, check this list.**
-> Bitwrench ships 50+ ready-made `make*()` factories. Each returns a Level 0 TACO object.
+> Bitwrench ships ready-made `make*()` factories. Each returns a Level 0 TACO object.
 
 ## Full Component Table
 

package/docs/framework-translation-table.md

@@ -26,7 +26,7 @@ How common UI operations map across frameworks. Each cell shows the idiomatic on
 | **Theme / design tokens** | Apply consistent theming | ThemeProvider / CSS vars | CSS vars / provide | CSS custom properties | CSS vars | CSS vars / createContext | `bw.loadStyles({ primary: '#hex' })` or `bw.makeStyles(cfg)` => `styles.palette` |
 | **Build step required** | Required toolchain | Yes (Babel/Vite/webpack) | Yes (Vite or Vue CLI) | No | Yes (Svelte compiler) | Yes (Vite/Babel) | **No** |
 | **Client-side routing** | Map URLs to views | React Router / TanStack Router | Vue Router | Manual `hashchange` | SvelteKit routes | @solidjs/router | `bw.router({ routes: { '/': fn } })` |
-| **Bundle size** | Shipped JS size | ~45KB (React + ReactDOM) | ~33KB (Vue 3) | 0KB | ~2KB (runtime) | ~7KB | **~40KB** (includes 50+ components + CSS gen + router) |
+| **Bundle size** | Shipped JS size | ~45KB (React + ReactDOM) | ~33KB (Vue 3) | 0KB | ~2KB (runtime) | ~7KB | **~40KB** (includes components + CSS gen + router) |
 
 ---
 

package/docs/llm-bitwrench-guide.md

@@ -329,7 +329,7 @@ bw.u.css('p4 shadow')  // includes your custom token
 
 ## Step 6: BCCL Components
 
-**Bitwrench ships 50+ ready-made components. Check the table below BEFORE writing custom TACO for common UI patterns.** All `bw.make*()` return Level 0 TACO objects. Factory dispatcher: `bw.make('card', props)`.
+**Bitwrench ships ready-made components. Check the table below BEFORE writing custom TACO for common UI patterns.** All `bw.make*()` return Level 0 TACO objects. Factory dispatcher: `bw.make('card', props)`.
 
 ### Most-Used Components
 
@@ -406,7 +406,7 @@ card.bw.setContent({ t: 'b', c: '$42k' });
 var el = bw.$('#app')[0];
 el._bw_state;         // current state
 el._bw_render;        // render function
-bw.inspect(el);       // formatted debug output (el.bw methods, state, classes)
+bw.inspect(el, 0);       // introspect element (state, handles, type, classes)
 ```
 
 ### bwcli attach -- remote debugging REPL
@@ -612,13 +612,14 @@ bwcli serve                                   # dev server (port 7902)
 | `bw.mount(sel, taco)` | Mount + return root element |
 | `bw.cleanup(el)` | Run unmount hooks, clear subscriptions |
 | `bw.patch(id, content)` | Update element by id or UUID |
-| `bw.inspect(el)` | Debug: log el.bw methods, state, classes |
+| `bw.inspect(el, depth)` | Introspect DOM subtree with bitwrench metadata |
 
 ### Communication
 | Function | Description |
 |----------|-------------|
-| `bw.pub(topic, data)` | App-wide publish |
-| `bw.sub(topic, fn, el?)` | Subscribe (optional lifecycle tie to element) |
+| `bw.pub(topic, data)` | App-wide publish (fires exact + wildcard matches) |
+| `bw.sub(topic, fn, el?)` | Subscribe (supports wildcard `'ns:*'`; optional lifecycle tie) |
+| `bw.once(topic, fn, el?)` | One-shot subscribe (auto-unsub after first fire) |
 | `bw.message(target, action, data)` | Dispatch to `el.bw[action](data)` |
 | `bw.emit(el, event, detail)` | DOM-scoped CustomEvent |
 
@@ -658,7 +659,34 @@ bwcli serve                                   # dev server (port 7902)
 9. **CSS classes use `bw-` prefix**: `bw-card`, `bw-btn`, `bw-container`.
 10. **Routing is built in** -- `bw.router()` for SPAs. Hash mode by default, history mode optional.
 11. **Use `bw.mount()` + `el.bw`** for targeted updates. `o.handle` for methods, `o.slots` for content areas. Avoids re-render side effects (lost focus, scroll reset).
-12. **Debug**: `bw.inspect(el)`, `el._bw_state`, `bwcli attach` for remote REPL.
+12. **Debug**: `bw.inspect(el, 0)`, `el._bw_state`, `bwcli attach` for remote REPL.
+
+---
+
+## TypeScript
+
+Full type declarations ship with the package (`dist/bitwrench.d.ts`). No `@types`
+package needed.
+
+```typescript
+import bw from 'bitwrench';
+import type { Taco, TacoOptions, StyleConfig, Palette } from 'bitwrench';
+
+// TACO objects are fully typed
+var card: Taco = bw.makeCard({ title: 'Hello', content: 'World' });
+
+// Style configs get autocomplete
+var styles = bw.makeStyles({ primary: '#336699' } as StyleConfig);
+
+// Named BCCL imports for tree-shaking
+import { makeCard, makeTable, makeButton } from 'bitwrench/bccl';
+```
+
+Core types: `Taco`, `TacoContent`, `TacoAttributes`, `TacoOptions`, `StyleConfig`,
+`Palette`, `ColorShades`, `Styles`, `RouterConfig`. All component configs are
+typed (e.g. `CardConfig`, `ButtonConfig`, `TableConfig`).
+
+See [TypeScript Usage Guide](bitwrench_typescript_usage.md) for full details.
 
 ---
 

package/docs/routing.md

@@ -558,5 +558,5 @@ After `destroy()`, `bw.navigate()` calls are no-ops and no more `bw:route` event
 
 - [App Patterns](app-patterns.md) -- Multi-Page SPA pattern with router + shared state
 - [State Management](state-management.md) -- Three-level component model, store pattern
-- [Component Cheat Sheet](component-cheatsheet.md) -- All 50+ components at a glance
+- [Component Cheat Sheet](component-cheatsheet.md) -- All components at a glance
 - [examples/dashboard-spa/](../examples/dashboard-spa/) -- Working SPA with 4 routed views

package/docs/state-management.md

@@ -567,6 +567,20 @@ var results = {
 
 Pub/sub is app-scoped -- publishers and subscribers do not need to know about each other. Pass the element as the third argument to `bw.sub()` to tie the subscription's lifetime to the element (auto-cleaned on `bw.cleanup()`).
 
+Wildcard subscriptions let you listen to a group of related topics at once:
+
+```javascript
+// Listen to ALL search-related topics
+bw.sub('search:*', function(detail, topic) {
+  console.log('Search event:', topic, detail);
+}, el);
+
+// These all fire the wildcard handler above:
+bw.pub('search:changed', { query: 'foo' });
+bw.pub('search:cleared');
+bw.pub('search:submitted', { query: 'foo' });
+```
+
 ### Updating child widgets within a parent component
 
 When a parent component contains child sub-components (like a progress bar inside a dashboard card), use pub/sub to update the child:
@@ -622,8 +636,9 @@ These primitives are the building blocks of the stateful TACO model. They are al
 | `bw.uuid(prefix)` | Generate a UUID class for addressing |
 | `bw.emit(el, event, detail)` | Dispatch a CustomEvent on a DOM element |
 | `bw.on(el, event, handler)` | Listen for a CustomEvent on a DOM element |
-| `bw.pub(topic, detail)` | Publish to app-wide topic |
-| `bw.sub(topic, handler, el?)` | Subscribe to app-wide topic |
+| `bw.pub(topic, detail)` | Publish to app-wide topic (fires exact + wildcard matches) |
+| `bw.sub(topic, handler, el?)` | Subscribe to topic (supports wildcard `'ns:*'` patterns) |
+| `bw.once(topic, handler, el?)` | One-shot subscribe (auto-unsub after first fire) |
 | `bw.unsub(topic, handler)` | Unsubscribe from topic |
 | `bw.cleanup(el)` | Run unmount hooks and clear subscriptions |
 
@@ -725,6 +740,15 @@ bw.sub('store:todos', renderTodos, todosEl);
 bw.sub('store:projects', renderProjects, projectsEl);
 ```
 
+If you need a global listener (e.g. for logging or debug), use a wildcard:
+
+```javascript
+// OK for debug/logging -- not for rendering
+bw.sub('store:*', function(data, topic) {
+  console.log('[store]', topic, data);
+});
+```
+
 ### When to use
 
 - Multi-view SPAs where views share data
@@ -758,7 +782,7 @@ bw.router({
 | Server pushes UI updates | Level 1 -- `bw.patch()` / `bw.DOM()` |
 | Components need to talk to each other | `bw.pub()`/`bw.sub()` |
 | URL-driven views (SPA) | `bw.router()` -- see [Routing](routing.md) |
-| Debugging component state | `el._bw_state` in the console, or `bw.inspect(selector)` |
+| Debugging component state | `el._bw_state` in the console, or `bw.inspect(selector, 0)` |
 
 ---
 

package/docs/thinking-in-bitwrench.md

@@ -588,7 +588,7 @@ No `v-for`, no `{#each}`, no special key rules. Just JavaScript.
 
 ### What BCCL is and why it exists
 
-BCCL (Bitwrench Common Component Library) is a set of 50+ factory functions that return TACO objects for common UI patterns — cards, buttons, navbars, tables, forms, modals, alerts, and more. Think of it as Bootstrap or shadcn/ui, but instead of HTML templates you get plain JavaScript objects.
+BCCL (Bitwrench Common Component Library) is a set of factory functions that return TACO objects for common UI patterns — cards, buttons, navbars, tables, forms, modals, alerts, and more. Think of it as Bootstrap or shadcn/ui, but instead of HTML templates you get plain JavaScript objects.
 
 The point: you can build a complete, styled page without writing a single line of CSS or HTML. Load the default styles, call the factories, render. Great for quick UIs, prototyping, embedded device interfaces, and internal tools.
 
@@ -1323,7 +1323,7 @@ Key things this example proves:
 
 | Feature | Why not | What to use instead |
 |---------|---------|-------------------|
-| TypeScript types | Ships as UMD/ESM, works everywhere | Community .d.ts welcome, JSDoc in source |
+| TypeScript types | Ships `dist/bitwrench.d.ts` with full type declarations | See [TypeScript Usage Guide](bitwrench_typescript_usage.md) |
 | Virtual DOM | Targeted patches via UUID refs are sufficient | `bw.patch()`, `o.render` + `bw.update()` |
 | CSS purging | You generate only what you use via `bw.css()` | N/A |
 | SSR hydration | `bw.html()` for SSR, `bw.DOM()` for client | Full page render via `bw.html()` in Node |
@@ -1381,9 +1381,10 @@ Key things this example proves:
 
 | Function | What it does |
 |----------|-------------|
-| `bw.pub(topic, data)` | Publish to all subscribers |
-| `bw.sub(topic, fn)` | Subscribe (returns unsub function) |
+| `bw.pub(topic, data)` | Publish to all subscribers (exact + wildcard) |
+| `bw.sub(topic, fn)` | Subscribe (returns unsub function; supports wildcard `'ns:*'`) |
 | `bw.sub(topic, fn, owner)` | Subscribe with auto-cleanup when owner is removed |
+| `bw.once(topic, fn, el?)` | One-shot subscribe (auto-unsub after first fire) |
 
 ### Routing
 
@@ -1450,7 +1451,7 @@ How common UI operations map across frameworks. Each cell is the idiomatic one-l
 | **Form input binding** | Read form values | `value={x} onChange={...}` | `v-model="x"` | `input.value` | `bind:value={x}` | `value={x()} onInput={...}` | `bw.$('#id')[0].value` or `bw.makeInput({oninput:fn})` |
 | **Theme / design tokens** | Apply consistent theming | ThemeProvider / CSS vars | CSS vars / provide | CSS custom properties | CSS vars | CSS vars / createContext | `bw.loadStyles({ primary: '#hex' })` or `bw.makeStyles(cfg)` => `theme.palette` |
 | **Build step required** | Required toolchain | Yes (Babel/Vite/webpack) | Yes (Vite or Vue CLI) | No | Yes (Svelte compiler) | Yes (Vite/Babel) | **No** — open the HTML file |
-| **Bundle size** | Shipped JS size | ~45KB (React + ReactDOM) | ~33KB (Vue 3) | 0KB | ~2KB (runtime) | ~7KB | **~40KB** (bitwrench UMD gzipped, includes 50+ components + CSS gen) |
+| **Bundle size** | Shipped JS size | ~45KB (React + ReactDOM) | ~33KB (Vue 3) | 0KB | ~2KB (runtime) | ~7KB | **~40KB** (bitwrench UMD gzipped, includes components + CSS gen) |
 
 ---
 

package/docs/tutorial-bwserve.md

@@ -292,6 +292,6 @@ For production, put a reverse proxy (nginx, Caddy) in front for TLS and static a
 ## Next steps
 
 - [bwserve Reference](bwserve.md) — full API documentation
-- [Component Library](component-library.md) — all 50+ `make*()` components work in bwserve
+- [Component Library](component-library.md) — all `make*()` components work in bwserve
 - [Tutorial: Embedded](tutorial-embedded.md) — same protocol on ESP32
 - [examples/client-server/](../examples/client-server/) — runnable example

package/docs/tutorial-website.md

@@ -248,7 +248,7 @@ This produces a self-contained HTML file with the ocean theme baked in — works
 
 ## Next steps
 
-- [Component Library](component-library.md) -- all 50+ `make*()` functions
+- [Component Library](component-library.md) -- all `make*()` functions
 - [Theming](theming.md) -- customize colors, spacing, and radius
 - [State Management](state-management.md) -- add interactivity with `o.state` + `o.render`
 - [Routing](routing.md) -- turn this into a multi-page SPA with `bw.router()`