bitwrench 2.0.23 → 2.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/README.md +8 -6
  2. package/dist/bitwrench-bccl.cjs.js +1 -1
  3. package/dist/bitwrench-bccl.cjs.min.js +1 -1
  4. package/dist/bitwrench-bccl.cjs.min.js.gz +0 -0
  5. package/dist/bitwrench-bccl.esm.js +1 -1
  6. package/dist/bitwrench-bccl.esm.min.js +1 -1
  7. package/dist/bitwrench-bccl.esm.min.js.gz +0 -0
  8. package/dist/bitwrench-bccl.umd.js +1 -1
  9. package/dist/bitwrench-bccl.umd.min.js +1 -1
  10. package/dist/bitwrench-bccl.umd.min.js.gz +0 -0
  11. package/dist/bitwrench-code-edit.cjs.js +1 -1
  12. package/dist/bitwrench-code-edit.cjs.min.js +1 -1
  13. package/dist/bitwrench-code-edit.es5.js +1 -1
  14. package/dist/bitwrench-code-edit.es5.min.js +1 -1
  15. package/dist/bitwrench-code-edit.esm.js +1 -1
  16. package/dist/bitwrench-code-edit.esm.min.js +1 -1
  17. package/dist/bitwrench-code-edit.umd.js +1 -1
  18. package/dist/bitwrench-code-edit.umd.min.js +1 -1
  19. package/dist/bitwrench-code-edit.umd.min.js.gz +0 -0
  20. package/dist/bitwrench-debug.js +1 -1
  21. package/dist/bitwrench-debug.min.js +1 -1
  22. package/dist/bitwrench-lean.cjs.js +41 -22
  23. package/dist/bitwrench-lean.cjs.min.js +4 -4
  24. package/dist/bitwrench-lean.cjs.min.js.gz +0 -0
  25. package/dist/bitwrench-lean.es5.js +43 -24
  26. package/dist/bitwrench-lean.es5.min.js +4 -4
  27. package/dist/bitwrench-lean.es5.min.js.gz +0 -0
  28. package/dist/bitwrench-lean.esm.js +41 -22
  29. package/dist/bitwrench-lean.esm.min.js +4 -4
  30. package/dist/bitwrench-lean.esm.min.js.gz +0 -0
  31. package/dist/bitwrench-lean.umd.js +41 -22
  32. package/dist/bitwrench-lean.umd.min.js +4 -4
  33. package/dist/bitwrench-lean.umd.min.js.gz +0 -0
  34. package/dist/bitwrench-util-css.cjs.js +1 -1
  35. package/dist/bitwrench-util-css.cjs.min.js +1 -1
  36. package/dist/bitwrench-util-css.es5.js +1 -1
  37. package/dist/bitwrench-util-css.es5.min.js +1 -1
  38. package/dist/bitwrench-util-css.esm.js +1 -1
  39. package/dist/bitwrench-util-css.esm.min.js +1 -1
  40. package/dist/bitwrench-util-css.umd.js +1 -1
  41. package/dist/bitwrench-util-css.umd.min.js +1 -1
  42. package/dist/bitwrench-util-css.umd.min.js.gz +0 -0
  43. package/dist/bitwrench.cjs.js +41 -22
  44. package/dist/bitwrench.cjs.min.js +6 -6
  45. package/dist/bitwrench.cjs.min.js.gz +0 -0
  46. package/dist/bitwrench.css +6 -6
  47. package/dist/bitwrench.d.ts +659 -0
  48. package/dist/bitwrench.es5.js +43 -24
  49. package/dist/bitwrench.es5.min.js +4 -4
  50. package/dist/bitwrench.es5.min.js.gz +0 -0
  51. package/dist/bitwrench.esm.js +41 -22
  52. package/dist/bitwrench.esm.min.js +4 -4
  53. package/dist/bitwrench.esm.min.js.gz +0 -0
  54. package/dist/bitwrench.min.css +1 -1
  55. package/dist/bitwrench.umd.js +41 -22
  56. package/dist/bitwrench.umd.min.js +6 -6
  57. package/dist/bitwrench.umd.min.js.gz +0 -0
  58. package/dist/builds.json +88 -88
  59. package/dist/bwserve.cjs.js +2 -2
  60. package/dist/bwserve.esm.js +2 -2
  61. package/dist/sri.json +46 -46
  62. package/docs/README.md +5 -3
  63. package/docs/bitwrench-mcp.md +1 -1
  64. package/docs/bitwrench-taco-schema-discussion.md +694 -0
  65. package/docs/bitwrench_api.md +4 -4
  66. package/docs/bitwrench_typescript_usage.md +441 -0
  67. package/docs/component-cheatsheet.md +1 -1
  68. package/docs/framework-translation-table.md +1 -1
  69. package/docs/llm-bitwrench-guide.md +28 -1
  70. package/docs/routing.md +1 -1
  71. package/docs/thinking-in-bitwrench.md +3 -3
  72. package/docs/tutorial-bwserve.md +1 -1
  73. package/docs/tutorial-website.md +1 -1
  74. package/package.json +7 -3
  75. package/readme.html +14 -8
  76. package/src/bitwrench-styles.js +17 -17
  77. package/src/bitwrench.d.ts +659 -0
  78. package/src/bitwrench.js +21 -2
  79. package/src/cli/serve.js +1 -0
  80. package/src/mcp/live.js +3 -1
  81. package/src/mcp/server.js +7 -7
  82. package/src/version.js +3 -3
@@ -4,11 +4,11 @@
4
4
 
5
5
  | Field | Value |
6
6
  |-------|-------|
7
- | Version | 2.0.23 |
8
- | Generated | 2026-03-28 |
7
+ | Version | 2.0.25 |
8
+ | Generated | 2026-03-31 |
9
9
  | Total APIs | 100 |
10
10
  | Categories | 12 |
11
- | bitwrench.js | 3612 lines |
11
+ | bitwrench.js | 3631 lines |
12
12
  | bitwrench-bccl.js | 3793 lines |
13
13
 
14
14
  ## Table of Contents
@@ -672,7 +672,7 @@ Generate and apply styles in one call. Convenience wrapper. Equivalent to: `bw.a
672
672
  | `config` | `Object` | - Style configuration (same as `makeStyles`) |
673
673
  | `scope` | `string` | - Scope selector (same as `applyStyles`) |
674
674
 
675
- **Returns:** `Element|null` — `<style>` element, or null in Node.js
675
+ **Returns:** `Object` — styles object (same as `makeStyles` return value: `{css, alternateCss, palette, alternatePalette, rules, alternateRules, isLightPrimary}`)
676
676
 
677
677
  **Example:**
678
678
  ```javascript
@@ -0,0 +1,441 @@
1
+ # Using Bitwrench with TypeScript
2
+
3
+ Bitwrench ships TypeScript type definitions in `dist/bitwrench.d.ts`.
4
+ You get autocomplete, type checking, and documentation hover in VS Code,
5
+ WebStorm, and any TypeScript-aware editor -- no extra packages needed.
6
+
7
+ ## Quick Start
8
+
9
+ ### Install
10
+
11
+ ```bash
12
+ npm install bitwrench
13
+ ```
14
+
15
+ The `types` field in `package.json` points to `dist/bitwrench.d.ts`,
16
+ so TypeScript picks up the types automatically.
17
+
18
+ ### Import Styles
19
+
20
+ **Default import (full library):**
21
+
22
+ ```typescript
23
+ import bw from 'bitwrench';
24
+
25
+ const card = bw.makeCard({ title: 'Hello', content: 'World' });
26
+ bw.DOM('#app', card);
27
+ ```
28
+
29
+ **Named imports (tree-shakeable):**
30
+
31
+ ```typescript
32
+ import { makeCard, makeButton, makeNav } from 'bitwrench';
33
+
34
+ const card = makeCard({ title: 'Dashboard', content: 'Stats here' });
35
+ ```
36
+
37
+ **CommonJS (Node.js):**
38
+
39
+ ```typescript
40
+ const bw = require('bitwrench');
41
+
42
+ const html = bw.html({ t: 'h1', c: 'Server-rendered' });
43
+ ```
44
+
45
+ **UMD (script tag -- no import needed):**
46
+
47
+ ```html
48
+ <script src="https://unpkg.com/bitwrench/dist/bitwrench.umd.min.js"></script>
49
+ <script>
50
+ // bw is a global. For TS, add a reference comment or declare it:
51
+ bw.DOM('#app', { t: 'p', c: 'Hello from UMD' });
52
+ </script>
53
+ ```
54
+
55
+ For UMD in a TypeScript file, add a triple-slash reference:
56
+
57
+ ```typescript
58
+ /// <reference path="node_modules/bitwrench/dist/bitwrench.d.ts" />
59
+ declare var bw: import('bitwrench').Bitwrench;
60
+ ```
61
+
62
+ ## Core Types
63
+
64
+ ### Taco
65
+
66
+ The fundamental UI primitive. Every bitwrench component is a `Taco` object.
67
+
68
+ ```typescript
69
+ import type { Taco, TacoAttributes, TacoOptions, TacoContent } from 'bitwrench';
70
+
71
+ const myCard: Taco = {
72
+ t: 'div',
73
+ a: { class: 'bw_card', id: 'stats' },
74
+ c: [
75
+ { t: 'h3', c: 'Revenue' },
76
+ { t: 'p', c: '$1,234' }
77
+ ],
78
+ o: {
79
+ state: { value: 1234 },
80
+ render: (el, state) => {
81
+ el.querySelector('.value')!.textContent = '$' + state!.value;
82
+ }
83
+ }
84
+ };
85
+ ```
86
+
87
+ **Field summary:**
88
+
89
+ | Field | Type | Required | Description |
90
+ |-------|------|----------|-------------|
91
+ | `t` | `string` | Yes | HTML tag name |
92
+ | `a` | `TacoAttributes` | No | HTML attributes, event handlers, class, style |
93
+ | `c` | `TacoContent` | No | String, number, nested Taco, array, `bw.raw()`, or null |
94
+ | `o` | `TacoOptions` | No | Lifecycle hooks, state, handle methods, slots |
95
+
96
+ ### TacoContent
97
+
98
+ Content can be many types:
99
+
100
+ ```typescript
101
+ // String
102
+ const text: Taco = { t: 'p', c: 'Hello' };
103
+
104
+ // Number (auto-stringified)
105
+ const num: Taco = { t: 'span', c: 42 };
106
+
107
+ // Nested TACO
108
+ const nested: Taco = { t: 'div', c: { t: 'em', c: 'italic' } };
109
+
110
+ // Array of mixed content
111
+ const list: Taco = {
112
+ t: 'ul',
113
+ c: [
114
+ { t: 'li', c: 'one' },
115
+ { t: 'li', c: 'two' },
116
+ { t: 'li', c: 'three' }
117
+ ]
118
+ };
119
+
120
+ // Raw HTML (skips escaping)
121
+ const raw: Taco = { t: 'div', c: bw.raw('<strong>Pre-escaped</strong>') };
122
+ ```
123
+
124
+ ### TacoAttributes
125
+
126
+ ```typescript
127
+ const button: Taco = {
128
+ t: 'button',
129
+ a: {
130
+ class: ['bw_btn', 'bw_primary'], // string or string[]
131
+ style: { padding: '8px', color: '#fff' }, // string or object
132
+ disabled: false, // boolean attrs
133
+ onclick: (e: Event) => handleClick(e), // function or string
134
+ 'data-id': '123', // custom attributes
135
+ 'aria-label': 'Submit form' // ARIA attributes
136
+ },
137
+ c: 'Submit'
138
+ };
139
+ ```
140
+
141
+ ### TacoOptions (Component Handles)
142
+
143
+ ```typescript
144
+ const counter: Taco = {
145
+ t: 'div',
146
+ a: { class: 'counter' },
147
+ c: [
148
+ { t: 'span', a: { class: 'count' }, c: '0' },
149
+ { t: 'button', a: { onclick: () => el.bw.increment() }, c: '+' }
150
+ ],
151
+ o: {
152
+ state: { count: 0 },
153
+ handle: {
154
+ increment: (el: HTMLElement) => {
155
+ el._bw_state.count++;
156
+ bw.update(el);
157
+ },
158
+ reset: (el: HTMLElement) => {
159
+ el._bw_state.count = 0;
160
+ bw.update(el);
161
+ }
162
+ },
163
+ slots: {
164
+ count: '.count' // auto-generates el.bw.setCount() / el.bw.getCount()
165
+ },
166
+ render: (el: HTMLElement, state: any) => {
167
+ el.querySelector('.count')!.textContent = String(state.count);
168
+ },
169
+ mounted: (el: HTMLElement) => {
170
+ console.log('Counter mounted');
171
+ },
172
+ unmount: (el: HTMLElement) => {
173
+ console.log('Counter removed');
174
+ }
175
+ }
176
+ };
177
+
178
+ // Mount and interact through typed handle
179
+ const el = bw.mount('#app', counter);
180
+ (el as any).bw.increment();
181
+ (el as any).bw.setCount('99');
182
+ ```
183
+
184
+ ## BCCL Component Configs
185
+
186
+ The `make*()` factories have typed config objects for the most common
187
+ components. TypeScript will autocomplete property names and catch typos.
188
+
189
+ ```typescript
190
+ import bw from 'bitwrench';
191
+ import type { CardConfig, ButtonConfig, TabsConfig, AccordionConfig } from 'bitwrench';
192
+
193
+ // Card -- typed config catches typos
194
+ const card = bw.makeCard({
195
+ title: 'Dashboard',
196
+ content: 'Welcome back',
197
+ footer: 'Last updated: today',
198
+ variant: 'primary',
199
+ shadow: true
200
+ });
201
+ // bw.makeCard({ label: 'Oops' }) // TS error: 'label' not in CardConfig
202
+
203
+ // Button
204
+ const btn = bw.makeButton({
205
+ text: 'Save',
206
+ variant: 'success',
207
+ size: 'lg',
208
+ onclick: () => save()
209
+ });
210
+
211
+ // Tabs
212
+ const tabs = bw.makeTabs({
213
+ tabs: [
214
+ { text: 'Overview', content: 'Tab 1 content', active: true },
215
+ { text: 'Details', content: { t: 'div', c: 'Tab 2 TACO content' } }
216
+ ]
217
+ });
218
+
219
+ // Accordion -- note: uses title/content, NOT label/header/body
220
+ const acc = bw.makeAccordion({
221
+ items: [
222
+ { title: 'Section 1', content: 'Content 1' },
223
+ { title: 'Section 2', content: 'Content 2' }
224
+ ]
225
+ });
226
+ ```
227
+
228
+ ## Styles / Theming
229
+
230
+ ```typescript
231
+ import bw from 'bitwrench';
232
+ import type { StyleConfig, StylesResult, Palette, ColorShades } from 'bitwrench';
233
+
234
+ // Generate theme from seed colors
235
+ const config: StyleConfig = {
236
+ primary: '#2563eb',
237
+ secondary: '#7c3aed',
238
+ background: '#ffffff',
239
+ surface: '#f8fafc'
240
+ };
241
+
242
+ const styles: StylesResult = bw.makeStyles(config);
243
+ bw.applyStyles(styles);
244
+
245
+ // Access palette values
246
+ const p: Palette = styles.palette;
247
+ const primaryBase: string = p.primary.base; // '#2563eb'
248
+ const primaryHover: string = p.primary.hover; // derived shade
249
+ const bg: string = p.background; // plain string (NOT an object)
250
+
251
+ // Toggle dark/light
252
+ bw.toggleStyles();
253
+
254
+ // Shorthand: generate + apply in one call
255
+ bw.loadStyles({ primary: '#dc2626' });
256
+
257
+ // Structural CSS only (no colors)
258
+ bw.loadStyles();
259
+ ```
260
+
261
+ **Palette gotcha**: `palette.background`, `palette.surface`, and
262
+ `palette.surfaceAlt` are plain strings. All other keys (`primary`,
263
+ `secondary`, etc.) are `ColorShades` objects with `.base`, `.hover`,
264
+ `.active`, `.light`, `.darkText`, `.border`, `.focus`, `.textOn`.
265
+
266
+ ## Color Utilities
267
+
268
+ ```typescript
269
+ const hsl = bw.hexToHsl('#2563eb'); // [221, 83, 53]
270
+ const hex = bw.hslToHex([221, 83, 53]); // '#2563eb'
271
+
272
+ const lighter = bw.adjustLightness('#2563eb', 20); // lighten by 20
273
+ const mixed = bw.mixColor('#ff0000', '#0000ff', 0.5); // purple
274
+ const lum = bw.relativeLuminance('#2563eb'); // 0.0-1.0
275
+ const textColor = bw.textOnColor('#2563eb'); // '#fff' or '#000'
276
+
277
+ const shades: ColorShades = bw.deriveShades('#2563eb');
278
+ // { base, hover, active, light, darkText, border, focus, textOn }
279
+ ```
280
+
281
+ ## Routing
282
+
283
+ ```typescript
284
+ import bw from 'bitwrench';
285
+ import type { RouterConfig, RouterHandle } from 'bitwrench';
286
+
287
+ const config: RouterConfig = {
288
+ routes: {
289
+ '/': () => ({ t: 'h1', c: 'Home' }),
290
+ '/user/:id': (params) => ({
291
+ t: 'div',
292
+ c: 'User ' + params.id
293
+ }),
294
+ '*': () => ({ t: 'p', c: '404 Not Found' })
295
+ },
296
+ target: '#app',
297
+ mode: 'hash'
298
+ };
299
+
300
+ const router: RouterHandle = bw.router(config);
301
+ router.navigate('/user/42');
302
+ console.log(router.current()); // '/user/42'
303
+ router.destroy();
304
+ ```
305
+
306
+ ## Server-Side Rendering
307
+
308
+ bitwrench works in Node.js. `bw.html()` renders TACO to HTML strings
309
+ with no DOM dependency.
310
+
311
+ ```typescript
312
+ import bw from 'bitwrench';
313
+
314
+ // Render TACO to HTML string (Node.js or browser)
315
+ const html: string = bw.html({
316
+ t: 'div',
317
+ a: { class: 'card' },
318
+ c: [
319
+ { t: 'h2', c: 'Server Rendered' },
320
+ { t: 'p', c: 'No DOM needed' }
321
+ ]
322
+ });
323
+
324
+ // Generate complete HTML page
325
+ const page: string = bw.htmlPage({
326
+ title: 'My App',
327
+ content: { t: 'h1', c: 'Hello' }
328
+ });
329
+ ```
330
+
331
+ ## Extending Types
332
+
333
+ ### Custom component config
334
+
335
+ ```typescript
336
+ import type { Taco, ComponentConfig } from 'bitwrench';
337
+
338
+ interface MyWidgetConfig extends ComponentConfig {
339
+ label: string;
340
+ value: number;
341
+ onChange?: (newValue: number) => void;
342
+ }
343
+
344
+ function makeMyWidget(config: MyWidgetConfig): Taco {
345
+ return {
346
+ t: 'div',
347
+ a: { class: 'my-widget' },
348
+ c: [
349
+ { t: 'label', c: config.label },
350
+ {
351
+ t: 'input',
352
+ a: {
353
+ type: 'number',
354
+ value: String(config.value),
355
+ oninput: (e: Event) => {
356
+ const v = Number((e.target as HTMLInputElement).value);
357
+ if (config.onChange) config.onChange(v);
358
+ }
359
+ }
360
+ }
361
+ ]
362
+ };
363
+ }
364
+ ```
365
+
366
+ ### Adding el.bw types for specific components
367
+
368
+ The `el.bw` namespace is dynamically populated from `o.handle` and
369
+ `o.slots`. TypeScript doesn't know the specific methods at compile time.
370
+ You can augment with a cast:
371
+
372
+ ```typescript
373
+ interface CardHandle {
374
+ setTitle(v: string): void;
375
+ getTitle(): string;
376
+ setContent(v: string | Taco): void;
377
+ getContent(): string;
378
+ }
379
+
380
+ const el = bw.mount('#app', bw.makeCard({ title: 'Hello' }));
381
+ const handle = (el as any).bw as CardHandle;
382
+ handle.setTitle('Updated');
383
+ ```
384
+
385
+ ## tsconfig.json Tips
386
+
387
+ bitwrench works with any `moduleResolution` setting. Recommended:
388
+
389
+ ```json
390
+ {
391
+ "compilerOptions": {
392
+ "target": "ES2020",
393
+ "module": "ESNext",
394
+ "moduleResolution": "bundler",
395
+ "esModuleInterop": true,
396
+ "strict": true
397
+ }
398
+ }
399
+ ```
400
+
401
+ For Node.js (CommonJS):
402
+
403
+ ```json
404
+ {
405
+ "compilerOptions": {
406
+ "target": "ES2020",
407
+ "module": "commonjs",
408
+ "moduleResolution": "node",
409
+ "esModuleInterop": true
410
+ }
411
+ }
412
+ ```
413
+
414
+ ## What's Not Typed
415
+
416
+ bitwrench is a JavaScript-first library. Some patterns are inherently
417
+ dynamic and don't have specific types:
418
+
419
+ - **`el.bw.*` methods** -- populated at runtime from `o.handle`/`o.slots`.
420
+ Cast `el.bw` to a custom interface for your components.
421
+ - **`bw.apply()` wire protocol messages** -- typed as `Record<string, any>`.
422
+ The bwserve protocol is documented in `dev/bw-client-server.md`.
423
+ - **Less common `make*()` configs** -- typed as `ComponentConfig` (open
424
+ object). The most-used components (Card, Button, Tabs, Accordion, Modal,
425
+ Alert, Nav, Input, Carousel, Table) have specific config types.
426
+
427
+ ## FAQ
428
+
429
+ **Q: Do I need to install `@types/bitwrench`?**
430
+ No. Types ship with the package. There is no separate `@types` package.
431
+
432
+ **Q: Can I use bitwrench without TypeScript?**
433
+ Yes. bitwrench is a JavaScript library. TypeScript support is optional.
434
+ The `.d.ts` file provides editor autocomplete even in plain `.js` files
435
+ if your editor supports it (VS Code does by default).
436
+
437
+ **Q: Why not write bitwrench in TypeScript?**
438
+ bitwrench is designed for zero-toolchain development. You can load it via
439
+ `<script>` tag and start building UI -- no compiler, no bundler, no
440
+ `tsconfig.json`. TypeScript types are provided for developers who choose
441
+ to use TS, without imposing it on everyone.
@@ -1,7 +1,7 @@
1
1
  # Component Cheat Sheet
2
2
 
3
3
  > **Before you write custom TACO for a common UI pattern, check this list.**
4
- > Bitwrench ships 50+ ready-made `make*()` factories. Each returns a Level 0 TACO object.
4
+ > Bitwrench ships ready-made `make*()` factories. Each returns a Level 0 TACO object.
5
5
 
6
6
  ## Full Component Table
7
7
 
@@ -26,7 +26,7 @@ How common UI operations map across frameworks. Each cell shows the idiomatic on
26
26
  | **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` |
27
27
  | **Build step required** | Required toolchain | Yes (Babel/Vite/webpack) | Yes (Vite or Vue CLI) | No | Yes (Svelte compiler) | Yes (Vite/Babel) | **No** |
28
28
  | **Client-side routing** | Map URLs to views | React Router / TanStack Router | Vue Router | Manual `hashchange` | SvelteKit routes | @solidjs/router | `bw.router({ routes: { '/': fn } })` |
29
- | **Bundle size** | Shipped JS size | ~45KB (React + ReactDOM) | ~33KB (Vue 3) | 0KB | ~2KB (runtime) | ~7KB | **~40KB** (includes 50+ components + CSS gen + router) |
29
+ | **Bundle size** | Shipped JS size | ~45KB (React + ReactDOM) | ~33KB (Vue 3) | 0KB | ~2KB (runtime) | ~7KB | **~40KB** (includes components + CSS gen + router) |
30
30
 
31
31
  ---
32
32
 
@@ -329,7 +329,7 @@ bw.u.css('p4 shadow') // includes your custom token
329
329
 
330
330
  ## Step 6: BCCL Components
331
331
 
332
- **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)`.
332
+ **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)`.
333
333
 
334
334
  ### Most-Used Components
335
335
 
@@ -662,6 +662,33 @@ bwcli serve # dev server (port 7902)
662
662
 
663
663
  ---
664
664
 
665
+ ## TypeScript
666
+
667
+ Full type declarations ship with the package (`dist/bitwrench.d.ts`). No `@types`
668
+ package needed.
669
+
670
+ ```typescript
671
+ import bw from 'bitwrench';
672
+ import type { Taco, TacoOptions, StyleConfig, Palette } from 'bitwrench';
673
+
674
+ // TACO objects are fully typed
675
+ var card: Taco = bw.makeCard({ title: 'Hello', content: 'World' });
676
+
677
+ // Style configs get autocomplete
678
+ var styles = bw.makeStyles({ primary: '#336699' } as StyleConfig);
679
+
680
+ // Named BCCL imports for tree-shaking
681
+ import { makeCard, makeTable, makeButton } from 'bitwrench/bccl';
682
+ ```
683
+
684
+ Core types: `Taco`, `TacoContent`, `TacoAttributes`, `TacoOptions`, `StyleConfig`,
685
+ `Palette`, `ColorShades`, `Styles`, `RouterConfig`. All component configs are
686
+ typed (e.g. `CardConfig`, `ButtonConfig`, `TableConfig`).
687
+
688
+ See [TypeScript Usage Guide](bitwrench_typescript_usage.md) for full details.
689
+
690
+ ---
691
+
665
692
  ## Removed APIs (v2.0.19)
666
693
 
667
694
  `bw.component()`, `bw.compile()`, `bw.when()`, `bw.each()` -- all throw Error.
package/docs/routing.md CHANGED
@@ -558,5 +558,5 @@ After `destroy()`, `bw.navigate()` calls are no-ops and no more `bw:route` event
558
558
 
559
559
  - [App Patterns](app-patterns.md) -- Multi-Page SPA pattern with router + shared state
560
560
  - [State Management](state-management.md) -- Three-level component model, store pattern
561
- - [Component Cheat Sheet](component-cheatsheet.md) -- All 50+ components at a glance
561
+ - [Component Cheat Sheet](component-cheatsheet.md) -- All components at a glance
562
562
  - [examples/dashboard-spa/](../examples/dashboard-spa/) -- Working SPA with 4 routed views
@@ -588,7 +588,7 @@ No `v-for`, no `{#each}`, no special key rules. Just JavaScript.
588
588
 
589
589
  ### What BCCL is and why it exists
590
590
 
591
- 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.
591
+ 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.
592
592
 
593
593
  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.
594
594
 
@@ -1323,7 +1323,7 @@ Key things this example proves:
1323
1323
 
1324
1324
  | Feature | Why not | What to use instead |
1325
1325
  |---------|---------|-------------------|
1326
- | TypeScript types | Ships as UMD/ESM, works everywhere | Community .d.ts welcome, JSDoc in source |
1326
+ | TypeScript types | Ships `dist/bitwrench.d.ts` with full type declarations | See [TypeScript Usage Guide](bitwrench_typescript_usage.md) |
1327
1327
  | Virtual DOM | Targeted patches via UUID refs are sufficient | `bw.patch()`, `o.render` + `bw.update()` |
1328
1328
  | CSS purging | You generate only what you use via `bw.css()` | N/A |
1329
1329
  | SSR hydration | `bw.html()` for SSR, `bw.DOM()` for client | Full page render via `bw.html()` in Node |
@@ -1450,7 +1450,7 @@ How common UI operations map across frameworks. Each cell is the idiomatic one-l
1450
1450
  | **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})` |
1451
1451
  | **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` |
1452
1452
  | **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 |
1453
- | **Bundle size** | Shipped JS size | ~45KB (React + ReactDOM) | ~33KB (Vue 3) | 0KB | ~2KB (runtime) | ~7KB | **~40KB** (bitwrench UMD gzipped, includes 50+ components + CSS gen) |
1453
+ | **Bundle size** | Shipped JS size | ~45KB (React + ReactDOM) | ~33KB (Vue 3) | 0KB | ~2KB (runtime) | ~7KB | **~40KB** (bitwrench UMD gzipped, includes components + CSS gen) |
1454
1454
 
1455
1455
  ---
1456
1456
 
@@ -292,6 +292,6 @@ For production, put a reverse proxy (nginx, Caddy) in front for TLS and static a
292
292
  ## Next steps
293
293
 
294
294
  - [bwserve Reference](bwserve.md) — full API documentation
295
- - [Component Library](component-library.md) — all 50+ `make*()` components work in bwserve
295
+ - [Component Library](component-library.md) — all `make*()` components work in bwserve
296
296
  - [Tutorial: Embedded](tutorial-embedded.md) — same protocol on ESP32
297
297
  - [examples/client-server/](../examples/client-server/) — runnable example
@@ -248,7 +248,7 @@ This produces a self-contained HTML file with the ocean theme baked in — works
248
248
 
249
249
  ## Next steps
250
250
 
251
- - [Component Library](component-library.md) -- all 50+ `make*()` functions
251
+ - [Component Library](component-library.md) -- all `make*()` functions
252
252
  - [Theming](theming.md) -- customize colors, spacing, and radius
253
253
  - [State Management](state-management.md) -- add interactivity with `o.state` + `o.render`
254
254
  - [Routing](routing.md) -- turn this into a multi-page SPA with `bw.router()`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bitwrench",
3
- "version": "2.0.23",
3
+ "version": "2.0.25",
4
4
  "description": "A library for javascript UI functions.",
5
5
  "main": "./dist/bitwrench.umd.js",
6
6
  "repository": {
@@ -20,16 +20,19 @@
20
20
  "module": "./dist/bitwrench.esm.js",
21
21
  "exports": {
22
22
  ".": {
23
+ "types": "./dist/bitwrench.d.ts",
23
24
  "import": "./dist/bitwrench.esm.js",
24
25
  "require": "./dist/bitwrench.cjs.js",
25
26
  "default": "./dist/bitwrench.umd.js"
26
27
  },
27
28
  "./lean": {
29
+ "types": "./dist/bitwrench.d.ts",
28
30
  "import": "./dist/bitwrench-lean.esm.js",
29
31
  "require": "./dist/bitwrench-lean.cjs.js",
30
32
  "default": "./dist/bitwrench-lean.umd.js"
31
33
  },
32
34
  "./bccl": {
35
+ "types": "./dist/bitwrench.d.ts",
33
36
  "import": "./dist/bitwrench-bccl.esm.js",
34
37
  "require": "./dist/bitwrench-bccl.cjs.js",
35
38
  "default": "./dist/bitwrench-bccl.umd.js"
@@ -94,14 +97,15 @@
94
97
  "scripts": {
95
98
  "generate-version": "node tools/generate-version.cjs",
96
99
  "prebuild": "npm run generate-version && npm run lint",
97
- "build": "rollup --config && npm run build:css && npm run build:metrics && npm run build:builds",
100
+ "build": "rollup --config && npm run build:css && npm run build:types && npm run build:metrics && npm run build:builds",
101
+ "build:types": "cp src/bitwrench.d.ts dist/bitwrench.d.ts",
98
102
  "build:css": "node src/generate-css.js",
99
103
  "build:readme": "node tools/build-readme.js",
100
104
  "build:watch": "rollup --config --watch",
101
105
  "update_rm": "echo 'DEPRECATED: use build:index instead'",
102
106
  "cleanbuild": "npm run clean && npm run build && npm run build:generated",
103
107
  "oldtest": "./node_modules/mocha/bin/mocha test/bitwrench_test.js --reporter spec",
104
- "test": "c8 --reporter=text mocha ./test/bitwrench_ci.js ./test/bitwrench_test_coverage.js ./test/bitwrench_test_pubsub.js ./test/bitwrench_test_theme.js ./test/bitwrench_test_nodemap.js ./test/bitwrench_test_components.js ./test/bitwrench_test_coverage_gaps.js ./test/bitwrench_test_bwserve.js ./test/bitwrench_test_attach.js ./test/bitwrench_test_serve.js ./test/bitwrench_test_code_edit.js ./test/bitwrench_test_html_page.js ./test/bitwrench_test_util_css.js ./test/bitwrench_test_handle.js ./test/bitwrench_test_debug.js ./test/bitwrench_test_router.js ./test/bitwrench_test_mcp_transport.js ./test/bitwrench_test_mcp_server.js ./test/bitwrench_test_mcp_tools.js ./test/bitwrench_test_mcp_knowledge.js -r jsdom-global/register",
108
+ "test": "c8 --reporter=text --reporter=json-summary mocha ./test/bitwrench_ci.js ./test/bitwrench_test_coverage.js ./test/bitwrench_test_pubsub.js ./test/bitwrench_test_theme.js ./test/bitwrench_test_nodemap.js ./test/bitwrench_test_components.js ./test/bitwrench_test_coverage_gaps.js ./test/bitwrench_test_bwserve.js ./test/bitwrench_test_attach.js ./test/bitwrench_test_serve.js ./test/bitwrench_test_code_edit.js ./test/bitwrench_test_html_page.js ./test/bitwrench_test_util_css.js ./test/bitwrench_test_handle.js ./test/bitwrench_test_debug.js ./test/bitwrench_test_router.js ./test/bitwrench_test_mcp_transport.js ./test/bitwrench_test_mcp_server.js ./test/bitwrench_test_mcp_tools.js ./test/bitwrench_test_mcp_knowledge.js ./test/bitwrench_test_mcp_live.js -r jsdom-global/register --exit",
105
109
  "test:bwserve": "mocha ./test/bitwrench_test_bwserve.js -r jsdom-global/register",
106
110
  "test:attach": "mocha ./test/bitwrench_test_attach.js -r jsdom-global/register",
107
111
  "test:serve": "mocha ./test/bitwrench_test_serve.js -r jsdom-global/register --exit",