@kbach/browser 0.0.0-stage → 1.0.0-beta.1
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.
- package/AGENTS.md +131 -0
- package/README.md +71 -2
- package/dist/kbach.js +3 -0
- package/dist/kbach_core_engine_bg.wasm +0 -0
- package/package.json +44 -4
package/AGENTS.md
ADDED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
# `@kbach/browser` — reference for AI assistants
|
|
2
|
+
|
|
3
|
+
Kbach from a CDN: one classic `<script>` for a plain HTML page, with no
|
|
4
|
+
bundler, no npm install and no React. This file covers `@kbach/browser`
|
|
5
|
+
only. For the cross-package overview, see the repo root's
|
|
6
|
+
[AGENTS.md](https://github.com/semsakadanupol/kbach/blob/main/AGENTS.md).
|
|
7
|
+
|
|
8
|
+
```html
|
|
9
|
+
<script>window.kbachConfig = { darkMode: 'class', extend: { colors: { brand: '#ff6b35' } } };</script>
|
|
10
|
+
<script src="https://cdn.jsdelivr.net/npm/@kbach/browser"></script>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
`https://cdn.jsdelivr.net/npm/@kbach/browser` and
|
|
14
|
+
`https://unpkg.com/@kbach/browser` serve `dist/kbach.js` via package.json's
|
|
15
|
+
`jsdelivr`/`unpkg` fields.
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## 1. What it does
|
|
20
|
+
|
|
21
|
+
`src/index.ts` (entry) → `startKbachCdn` (`src/runtime.ts`):
|
|
22
|
+
|
|
23
|
+
1. Reads `window.kbachConfig` once (same shape as `kbach.config.js`),
|
|
24
|
+
resolves it with `@kbach/react`'s `resolveKbachConfig`, and applies it
|
|
25
|
+
before the engine loads, so dark-mode state and color variables are on
|
|
26
|
+
`<html>` from the start.
|
|
27
|
+
2. Fetches `kbach_core_engine_bg.wasm` from the URL that
|
|
28
|
+
`src/wasmUrl.ts`'s `resolveWasmUrl` derives from its own
|
|
29
|
+
`<script>` (`document.currentScript`): the `data-wasm` attribute if
|
|
30
|
+
set. Otherwise, for a CDN package-root src
|
|
31
|
+
(`…/npm/@kbach/browser`, `…@beta`, `https://unpkg.com/@kbach/browser`),
|
|
32
|
+
`@kbach/browser@<this build's exact version>/dist/`. Otherwise, the
|
|
33
|
+
file next to the script. Plain relative resolution of the short URL
|
|
34
|
+
lands one level too high (`…/npm/@kbach/kbach_core_engine_bg.wasm`, a
|
|
35
|
+
404). The version is baked in at build time (tsup `define`
|
|
36
|
+
`__KBACH_BROWSER_VERSION__` from package.json), so the `.wasm` always
|
|
37
|
+
matches the running glue even after a tag moves.
|
|
38
|
+
3. Styles every `class` token on the page through `@kbach/react`'s `kb()`,
|
|
39
|
+
which injects rules into `<style data-kbach>` plus the base reset. Each
|
|
40
|
+
token is resolved at most once per config (`seen` set, one batched
|
|
41
|
+
`kb()` call per scan). Non-Kbach classes produce no rules.
|
|
42
|
+
4. Watches `<html>` with a `MutationObserver` (added nodes plus `class`
|
|
43
|
+
attribute changes), started after the first full scan.
|
|
44
|
+
5. Exposes `window.Kbach`: `ready`, `config(cfg)` (re-resolve plus a full
|
|
45
|
+
re-scan), `refresh()`, `setMode()`, `toggle()` (the last two are
|
|
46
|
+
`@kbach/react`'s dark-mode store).
|
|
47
|
+
|
|
48
|
+
**Mode-aware colors are mapped to CSS variables, not expanded**
|
|
49
|
+
(`src/cdnTheme.ts`, `toCdnTheme`). For a `{ light, dark }` pair, the
|
|
50
|
+
engine rewrites `bg-surface` to `bg-[#…] dark:bg-[#…]` and generates rules
|
|
51
|
+
only for that text, which `kb()` callers handle by using the returned
|
|
52
|
+
className. A CDN script can't rewrite the page's own `class` attributes, so
|
|
53
|
+
each hex pair becomes `rgb(var(--kb-color-<name>))`, and
|
|
54
|
+
`ensureColorVariablesInjected` supplies the light/dark values for the
|
|
55
|
+
configured strategy. Known limit: `bg-surface/50` (opacity on a mode-aware
|
|
56
|
+
color) renders at full opacity.
|
|
57
|
+
|
|
58
|
+
## 2. How it's built — it bundles `@kbach/react`'s SOURCE
|
|
59
|
+
|
|
60
|
+
There is no second copy of any runtime logic here. `src/*.ts` imports
|
|
61
|
+
`../../react/src/{kb,theme,config,colorVariables,darkModeStore,wasmLoader}`
|
|
62
|
+
directly. None of those import React. They aren't public exports of
|
|
63
|
+
`@kbach/react`, and importing its built entry would pull in React
|
|
64
|
+
components. Consequences:
|
|
65
|
+
|
|
66
|
+
- `@kbach/react` is a `devDependency` (`"*"`, the workspace copy) only so
|
|
67
|
+
Turbo orders and cache-keys this build after react's. It is NOT a runtime
|
|
68
|
+
dependency: everything is bundled into `dist/kbach.js`.
|
|
69
|
+
- `wasmLoader.ts`'s `initKbachFrom(url)` is internal to `@kbach/react`
|
|
70
|
+
(not exported from its index) and exists for this package. Renaming or
|
|
71
|
+
removing it breaks this build, and the tests here catch that.
|
|
72
|
+
- **The `.wasm` and the bundled glue come from the `@kbach/core-engine`
|
|
73
|
+
that `react/src/wasmLoader.ts` resolves** (react's `dependencies`
|
|
74
|
+
version), never from this package. `scripts/copy-wasm.mjs` resolves the
|
|
75
|
+
`.wasm` from that same file on purpose, since a mismatched glue/binary
|
|
76
|
+
pair fails at load time.
|
|
77
|
+
|
|
78
|
+
`npm run build` = `tsup` (`tsup.config.ts`: IIFE, browser, minified,
|
|
79
|
+
`noExternal: [/.*/]`, no source map) → `scripts/copy-wasm.mjs` →
|
|
80
|
+
`scripts/verify-bundle.mjs`. The last step loads the BUILT
|
|
81
|
+
`dist/kbach.js` into jsdom **through a real `<script src>`** (served by a
|
|
82
|
+
jsdom `requestInterceptor`), with the real `.wasm`, twice: from the short
|
|
83
|
+
CDN URL and self-hosted. Its fake `fetch` serves the `.wasm` only at the
|
|
84
|
+
exact URL each case must request. The build fails unless that URL is
|
|
85
|
+
right, existing, added and changed classes are styled, mode-aware colors
|
|
86
|
+
use their variable, the page's `class` is never rewritten, and `toggle()`
|
|
87
|
+
flips `<html>`. Don't "simplify" it back to `window.eval(bundle)`: with no
|
|
88
|
+
`currentScript`, the `.wasm` lookup never runs, which is exactly how the
|
|
89
|
+
1.0.0-beta.0 bug shipped.
|
|
90
|
+
|
|
91
|
+
Tests (`npm run test`): `src/cdnTheme.test.ts` and `src/runtime.test.ts`,
|
|
92
|
+
which runs the real Node-target engine in place of the browser loader,
|
|
93
|
+
under jsdom with `@kbach/react`'s `test-setup.ts`.
|
|
94
|
+
|
|
95
|
+
Sizes (2026-11-07, gzipped): `kbach.js` ~7 KB, `.wasm` ~158 KB.
|
|
96
|
+
|
|
97
|
+
**Sandbox:** `apps/web-cdn` (`npm run dev -w web-cdn`, port 5174) is one
|
|
98
|
+
plain `index.html` and a dependency-free `serve.mjs`. `/` is the page as-is,
|
|
99
|
+
using the LIVE `cdn.jsdelivr.net/npm/@kbach/browser@beta`. It also works
|
|
100
|
+
opened straight from disk, since jsDelivr serves the `.wasm` with CORS.
|
|
101
|
+
`/local` swaps in the LOCAL `dist/` (rebuild with
|
|
102
|
+
`npm run build -w @kbach/browser`, then reload) and needs the server,
|
|
103
|
+
because a `file://` page can't fetch a local `.wasm`. The page covers
|
|
104
|
+
utility classes, a config color, mode-aware colors with a toggle, added
|
|
105
|
+
elements and class changes. Note that jsDelivr caches `@beta` for a while
|
|
106
|
+
after a publish, so use a pinned `@1.0.0-beta.N` URL to see a new release
|
|
107
|
+
immediately.
|
|
108
|
+
|
|
109
|
+
## 3. Common failure modes
|
|
110
|
+
|
|
111
|
+
- **Nothing is styled, and the network tab shows a 404 for
|
|
112
|
+
`…/npm/@kbach/kbach_core_engine_bg.wasm`**: you're on `1.0.0-beta.0`,
|
|
113
|
+
whose `.wasm` lookup was broken for the short CDN URL (only the full
|
|
114
|
+
`…/dist/kbach.js` URL worked). Fixed in `1.0.0-beta.1`. Use `@beta` or
|
|
115
|
+
`@1.0.0-beta.1` or later. jsDelivr may keep serving beta.0 for a bare
|
|
116
|
+
or `@beta` URL for a while after the release, so pin the version (or
|
|
117
|
+
purge `https://purge.jsdelivr.net/npm/@kbach/browser@beta`).
|
|
118
|
+
- **Nothing is styled (any other case).** Check the network tab for the `.wasm` request. A
|
|
119
|
+
404 means `kbach_core_engine_bg.wasm` isn't next to `kbach.js` (when
|
|
120
|
+
self-hosting, copy both files, or set `data-wasm`). Opening the HTML as
|
|
121
|
+
`file://` fails too: browsers won't `fetch()` a local file, so serve the
|
|
122
|
+
folder (`npx serve`).
|
|
123
|
+
- **A custom color isn't applied.** `window.kbachConfig` was set AFTER
|
|
124
|
+
the `<script src>` tag. It's read once at load. Set it before, or call
|
|
125
|
+
`Kbach.config({...})` later.
|
|
126
|
+
- **`Kbach.toggle()` does nothing visible.** The default
|
|
127
|
+
`darkMode: 'media'` follows the OS only. Set `darkMode: 'class'` or
|
|
128
|
+
`'attribute'` in `window.kbachConfig`.
|
|
129
|
+
- **A brief unstyled flash on load.** Expected: classes resolve in the
|
|
130
|
+
browser after the WASM loads, like Tailwind's Play CDN. Use
|
|
131
|
+
`@kbach/react`'s build plugin for production.
|
package/README.md
CHANGED
|
@@ -1,3 +1,72 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @kbach/browser
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Kbach from a CDN: one `<script>` tag styles a plain HTML page with Kbach's
|
|
4
|
+
utility classes, the same vocabulary as [`@kbach/react`](https://www.npmjs.com/package/@kbach/react).
|
|
5
|
+
No build step, no bundler, no React.
|
|
6
|
+
|
|
7
|
+
> Beta — API may still change before 1.0.0.
|
|
8
|
+
|
|
9
|
+
## Quick start
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<!doctype html>
|
|
13
|
+
<html>
|
|
14
|
+
<head>
|
|
15
|
+
<script src="https://cdn.jsdelivr.net/npm/@kbach/browser"></script>
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<div class="flex items-center gap-4 bg-blue-6 text-white p-4 rounded-lg">
|
|
19
|
+
Hello Kbach
|
|
20
|
+
</div>
|
|
21
|
+
</body>
|
|
22
|
+
</html>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
The script loads the Rust/WASM engine (about 7 KB of JS plus 158 KB of
|
|
26
|
+
WASM, gzipped), styles every `class` already on the page, and keeps
|
|
27
|
+
watching: elements added later and `class` changes are styled
|
|
28
|
+
automatically. Pin a version in production
|
|
29
|
+
(`https://cdn.jsdelivr.net/npm/@kbach/browser@1.0.0-beta.1`).
|
|
30
|
+
`https://unpkg.com/@kbach/browser` works too.
|
|
31
|
+
|
|
32
|
+
## Config
|
|
33
|
+
|
|
34
|
+
Same shape as `kbach.config.js`. Set it before the
|
|
35
|
+
script tag:
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<script>
|
|
39
|
+
window.kbachConfig = {
|
|
40
|
+
darkMode: 'class',
|
|
41
|
+
extend: { colors: { brand: '#ff6b35', surface: { light: '#f9fafb', dark: '#111827' } } },
|
|
42
|
+
};
|
|
43
|
+
</script>
|
|
44
|
+
<script src="https://cdn.jsdelivr.net/npm/@kbach/browser"></script>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Runtime API
|
|
48
|
+
|
|
49
|
+
`window.Kbach` has:
|
|
50
|
+
- `Kbach.ready`: a promise that resolves once the page is styled
|
|
51
|
+
- `Kbach.toggle()` / `Kbach.setMode('light' | 'dark' | 'system')`: dark
|
|
52
|
+
mode, persisted (needs `darkMode: 'class'` or `'attribute'`; under the
|
|
53
|
+
default `'media'` the OS decides)
|
|
54
|
+
- `Kbach.config({...})`: replace the config and re-style the page
|
|
55
|
+
- `Kbach.refresh()`: re-scan the page (rarely needed)
|
|
56
|
+
|
|
57
|
+
## Self-hosting
|
|
58
|
+
|
|
59
|
+
Serve `dist/kbach.js` and
|
|
60
|
+
`dist/kbach_core_engine_bg.wasm` from the same folder, or point at the
|
|
61
|
+
`.wasm` explicitly with `<script src="/kbach.js" data-wasm="/assets/kbach_core_engine_bg.wasm">`.
|
|
62
|
+
|
|
63
|
+
## Prototypes vs production
|
|
64
|
+
|
|
65
|
+
`@kbach/browser` resolves classes in the browser, like Tailwind's Play CDN.
|
|
66
|
+
That makes it great for prototypes, but the page is unstyled for a moment
|
|
67
|
+
while the engine loads. For production apps, use [`@kbach/react`](https://www.npmjs.com/package/@kbach/react)'s
|
|
68
|
+
build plugin instead: zero runtime cost and no flash.
|
|
69
|
+
|
|
70
|
+
## License
|
|
71
|
+
|
|
72
|
+
MIT
|
package/dist/kbach.js
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use strict";(()=>{var xe={};function z(e,t){let n,r;try{let o=$(e,f.__wbindgen_malloc,f.__wbindgen_realloc),a=E,i=$(t,f.__wbindgen_malloc,f.__wbindgen_realloc),s=E,c=f.generate_css(o,a,i,s);return n=c[0],r=c[1],pe(c[0],c[1])}finally{f.__wbindgen_free(n,r,1)}}function be(){return{__proto__:null,"./kbach_core_engine_bg.js":{__proto__:null,__wbindgen_init_externref_table:function(){let t=f.__wbindgen_externrefs,n=t.grow(4);t.set(0,void 0),t.set(n+0,void 0),t.set(n+1,null),t.set(n+2,!0),t.set(n+3,!1)}}}}function pe(e,t){return ye(e>>>0,t)}var _=null;function C(){return(_===null||_.byteLength===0)&&(_=new Uint8Array(f.memory.buffer)),_}function $(e,t,n){if(n===void 0){let s=w.encode(e),c=t(s.length,1)>>>0;return C().subarray(c,c+s.length).set(s),E=s.length,c}let r=e.length,o=t(r,1)>>>0,a=C(),i=0;for(;i<r;i++){let s=e.charCodeAt(i);if(s>127)break;a[o+i]=s}if(i!==r){i!==0&&(e=e.slice(i)),o=n(o,r,r=i+e.length*3,1)>>>0;let s=C().subarray(o+i,o+r),c=w.encodeInto(e,s);i+=c.written,o=n(o,r,i,1)>>>0}return E=i,o}var x=new TextDecoder("utf-8",{ignoreBOM:!0,fatal:!0});x.decode();var he=2146435072,S=0;function ye(e,t){return S+=t,S>=he&&(x=new TextDecoder("utf-8",{ignoreBOM:!0,fatal:!0}),x.decode(),S=t),x.decode(C().subarray(e,e+t))}var w=new TextEncoder;"encodeInto"in w||(w.encodeInto=function(e,t){let n=w.encode(e);return t.set(n),{read:e.length,written:n.length}});var E=0,_e,we,f;function ke(e,t){return we=e,f=e.exports,_e=t,_=null,f.__wbindgen_start(),f}async function Ce(e,t){if(typeof Response=="function"&&e instanceof Response){if(!e.ok)throw new Error(`failed to fetch Wasm: ${e.status} ${e.statusText} fetching '${e.url}'`);if(typeof WebAssembly.instantiateStreaming=="function")try{return await WebAssembly.instantiateStreaming(e,t)}catch(o){if(n(e.type)&&e.headers.get("Content-Type")!=="application/wasm")console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n",o);else throw o}let r=await e.arrayBuffer();return await WebAssembly.instantiate(r,t)}else{let r=await WebAssembly.instantiate(e,t);return r instanceof WebAssembly.Instance?{instance:r,module:e}:r}function n(r){switch(r){case"basic":case"cors":case"default":return!0}return!1}}async function A(e){if(f!==void 0)return f;e!==void 0&&(Object.getPrototypeOf(e)===Object.prototype?{module_or_path:e}=e:console.warn("using deprecated parameters for the initialization function; pass a single object instead")),e===void 0&&(e=new URL("kbach_core_engine_bg.wasm",xe.url));let t=be();(typeof e=="string"||typeof Request=="function"&&e instanceof Request||typeof URL=="function"&&e instanceof URL)&&(e=fetch(e));let{instance:n,module:r}=await Ce(await e,t);return ke(n,r)}var D=null,U=!1;function N(e){return D||(D=(e===void 0?A():A({module_or_path:e})).then(()=>{U=!0})),D}function P(e,t){if(!U)throw new Error("[Kbach] generateCss() was called before initKbach() resolved. Call `await initKbach()` once at startup (e.g. before rendering your app) before using kb().");return z(e,t)}var G={"amber-1":"#fffbeb","amber-10":"#78350f","amber-11":"#451a03","amber-12":"#291002","amber-2":"#fef3c7","amber-3":"#fde68a","amber-4":"#fcd34d","amber-5":"#fbbf24","amber-6":"#f59e0b","amber-7":"#d97706","amber-8":"#b45309","amber-9":"#92400e",black:"#000000","blue-1":"#eff6ff","blue-10":"#1e3a8a","blue-11":"#172554","blue-12":"#0d1633","blue-2":"#dbeafe","blue-3":"#bfdbfe","blue-4":"#93c5fd","blue-5":"#60a5fa","blue-6":"#3b82f6","blue-7":"#2563eb","blue-8":"#1d4ed8","blue-9":"#1e40af",bronze:"#cd7f32",coal:"#1c1c1c",copper:"#b87333",current:"currentColor","cyan-1":"#ecfeff","cyan-10":"#164e63","cyan-11":"#083344","cyan-12":"#041e28","cyan-2":"#cffafe","cyan-3":"#a5f3fc","cyan-4":"#67e8f9","cyan-5":"#22d3ee","cyan-6":"#06b6d4","cyan-7":"#0891b2","cyan-8":"#0e7490","cyan-9":"#155e75","emerald-1":"#ecfdf5","emerald-10":"#064e3b","emerald-11":"#022c22","emerald-12":"#011a14","emerald-2":"#d1fae5","emerald-3":"#a7f3d0","emerald-4":"#6ee7b7","emerald-5":"#34d399","emerald-6":"#10b981","emerald-7":"#059669","emerald-8":"#047857","emerald-9":"#065f46","fuchsia-1":"#fdf4ff","fuchsia-10":"#701a75","fuchsia-11":"#4a044e","fuchsia-12":"#2d022f","fuchsia-2":"#fae8ff","fuchsia-3":"#f5d0fe","fuchsia-4":"#f0abfc","fuchsia-5":"#e879f9","fuchsia-6":"#d946ef","fuchsia-7":"#c026d3","fuchsia-8":"#a21caf","fuchsia-9":"#86198f",gold:"#d4af37","gray-1":"#f9fafb","gray-10":"#111827","gray-11":"#030712","gray-12":"#020409","gray-2":"#f3f4f6","gray-3":"#e5e7eb","gray-4":"#d1d5db","gray-5":"#9ca3af","gray-6":"#6b7280","gray-7":"#4b5563","gray-8":"#374151","gray-9":"#1f2937","green-1":"#f0fdf4","green-10":"#14532d","green-11":"#052e16","green-12":"#031b0d","green-2":"#dcfce7","green-3":"#bbf7d0","green-4":"#86efac","green-5":"#4ade80","green-6":"#22c55e","green-7":"#16a34a","green-8":"#15803d","green-9":"#166534","indigo-1":"#eef2ff","indigo-10":"#312e81","indigo-11":"#1e1b4b","indigo-12":"#12102d","indigo-2":"#e0e7ff","indigo-3":"#c7d2fe","indigo-4":"#a5b4fc","indigo-5":"#818cf8","indigo-6":"#6366f1","indigo-7":"#4f46e5","indigo-8":"#4338ca","indigo-9":"#3730a3","lime-1":"#f7fee7","lime-10":"#365314","lime-11":"#1a2e05","lime-12":"#0f1b03","lime-2":"#ecfccb","lime-3":"#d9f99d","lime-4":"#bef264","lime-5":"#a3e635","lime-6":"#84cc16","lime-7":"#65a30d","lime-8":"#4d7c0f","lime-9":"#3f6212","neutral-1":"#fafafa","neutral-10":"#171717","neutral-11":"#0a0a0a","neutral-12":"#050505","neutral-2":"#f5f5f5","neutral-3":"#e5e5e5","neutral-4":"#d4d4d4","neutral-5":"#a3a3a3","neutral-6":"#737373","neutral-7":"#525252","neutral-8":"#404040","neutral-9":"#262626","orange-1":"#fff7ed","orange-10":"#7c2d12","orange-11":"#431407","orange-12":"#270c04","orange-2":"#ffedd5","orange-3":"#fed7aa","orange-4":"#fdba74","orange-5":"#fb923c","orange-6":"#f97316","orange-7":"#ea580c","orange-8":"#c2410c","orange-9":"#9a3412","pink-1":"#fdf2f8","pink-10":"#831843","pink-11":"#500724","pink-12":"#300415","pink-2":"#fce7f3","pink-3":"#fbcfe8","pink-4":"#f9a8d4","pink-5":"#f472b6","pink-6":"#ec4899","pink-7":"#db2777","pink-8":"#be185d","pink-9":"#9d174d","purple-1":"#faf5ff","purple-10":"#581c87","purple-11":"#3b0764","purple-12":"#23043c","purple-2":"#f3e8ff","purple-3":"#e9d5ff","purple-4":"#d8b4fe","purple-5":"#c084fc","purple-6":"#a855f7","purple-7":"#9333ea","purple-8":"#7e22ce","purple-9":"#6b21a8","red-1":"#fef2f2","red-10":"#7f1d1d","red-11":"#450a0a","red-12":"#280606","red-2":"#fee2e2","red-3":"#fecaca","red-4":"#fca5a5","red-5":"#f87171","red-6":"#ef4444","red-7":"#dc2626","red-8":"#b91c1c","red-9":"#991b1b","rose-1":"#fff1f2","rose-10":"#881337","rose-11":"#4c0519","rose-12":"#2d030e","rose-2":"#ffe4e6","rose-3":"#fecdd3","rose-4":"#fda4af","rose-5":"#fb7185","rose-6":"#f43f5e","rose-7":"#e11d48","rose-8":"#be123c","rose-9":"#9f1239",silver:"#c0c0c0","sky-1":"#f0f9ff","sky-10":"#0c4a6e","sky-11":"#082f49","sky-12":"#041b2b","sky-2":"#e0f2fe","sky-3":"#bae6fd","sky-4":"#7dd3fc","sky-5":"#38bdf8","sky-6":"#0ea5e9","sky-7":"#0284c7","sky-8":"#0369a1","sky-9":"#075985","slate-1":"#f8fafc","slate-10":"#0f172a","slate-11":"#020617","slate-12":"#01020a","slate-2":"#f1f5f9","slate-3":"#e2e8f0","slate-4":"#cbd5e1","slate-5":"#94a3b8","slate-6":"#64748b","slate-7":"#475569","slate-8":"#334155","slate-9":"#1e293b","stone-1":"#fafaf9","stone-10":"#1c1917","stone-11":"#0c0a09","stone-12":"#070605","stone-2":"#f5f5f4","stone-3":"#e7e5e4","stone-4":"#d6d3d1","stone-5":"#a8a29e","stone-6":"#78716c","stone-7":"#57534e","stone-8":"#44403c","stone-9":"#292524","teal-1":"#f0fdfa","teal-10":"#134e4a","teal-11":"#042f2e","teal-12":"#021c1b","teal-2":"#ccfbf1","teal-3":"#99f6e4","teal-4":"#5eead4","teal-5":"#2dd4bf","teal-6":"#14b8a6","teal-7":"#0d9488","teal-8":"#0f766e","teal-9":"#115e59",transparent:"transparent","violet-1":"#f5f3ff","violet-10":"#4c1d95","violet-11":"#2e1065","violet-12":"#1c0a3d","violet-2":"#ede9fe","violet-3":"#ddd6fe","violet-4":"#c4b5fd","violet-5":"#a78bfa","violet-6":"#8b5cf6","violet-7":"#7c3aed","violet-8":"#6d28d9","violet-9":"#5b21b6",white:"#ffffff","yellow-1":"#fefce8","yellow-10":"#713f12","yellow-11":"#422006","yellow-12":"#271304","yellow-2":"#fef9c3","yellow-3":"#fef08a","yellow-4":"#fde047","yellow-5":"#facc15","yellow-6":"#eab308","yellow-7":"#ca8a04","yellow-8":"#a16207","yellow-9":"#854d0e","zinc-1":"#fafafa","zinc-10":"#18181b","zinc-11":"#09090b","zinc-12":"#050506","zinc-2":"#f4f4f5","zinc-3":"#e4e4e7","zinc-4":"#d4d4d8","zinc-5":"#a1a1aa","zinc-6":"#71717a","zinc-7":"#52525b","zinc-8":"#3f3f46","zinc-9":"#27272a"};var v={colors:{...G,surface:{light:"#f9fafb",dark:"#111827"}},spacing:{0:0,px:1,"0.5":2,1:4,"1.5":6,2:8,"2.5":10,3:12,"3.5":14,4:16,5:20,6:24,7:28,8:32,9:36,10:40,11:44,12:48,14:56,16:64,20:80,24:96,28:112,32:128,36:144,40:160,44:176,48:192,52:208,56:224,60:240,64:256,72:288,80:320,96:384},screens:{sm:640,md:768,lg:1024,xl:1280,"2xl":1536},fontFamily:{sans:'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',serif:'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',mono:'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'},darkMode:"media",container:{}},T=v,H=JSON.stringify(v);function R(e){T=e,H=JSON.stringify(e)}function J(){return T}function V(){return H}var Ee=new Set(["attribute","class","media"]);function Y(){if(typeof document>"u")return;let e=getComputedStyle(document.documentElement).getPropertyValue("--kb-dark-mode").trim();!Ee.has(e)||e===T.darkMode||R({...T,darkMode:e})}var K="kbach-reset",Te=[{css:"*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }"},{css:"body { margin: 0; padding: 0; }"},{css:"h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }",tags:["h1","h2","h3","h4","h5","h6"]},{css:"p { margin: 0; }",tags:["p"]},{css:"a { color: inherit; text-decoration: none; }",tags:["a"]},{css:"ul, ol { margin: 0; padding: 0; list-style: none; }",tags:["ul","ol"]},{css:"img, video, svg { display: block; max-width: 100%; }",tags:["img","video","svg"]},{css:"input:where(:not([type='checkbox']):not([type='radio'])), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",tags:["input","textarea"]},{css:":where(input[type='checkbox'], input[type='radio'], input[type='range']) { margin: 0; font: inherit; accent-color: currentColor; }",tags:["input"]},{css:"select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",tags:["select"]},{css:"button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",tags:["button"]},{css:"button, [role='button'] { cursor: pointer; }",tags:["button"]},{css:":disabled { cursor: default; }",tags:["button","input","select","textarea"]},{css:"textarea { resize: vertical; }",tags:["textarea"]},{css:"::placeholder { opacity: 1; }",tags:["input","textarea"]},{css:"input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",tags:["input"]},{css:"input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",tags:["input"]},{css:"fieldset { padding: 0; margin: 0; }",tags:["fieldset"]},{css:"table { border-collapse: collapse; border-spacing: 0; }",tags:["table"]}],q=Te.map(e=>e.css).join(`
|
|
2
|
+
`);var ve=!1;var h=null,j=[],O=new Map;function Re(){return h||(h=document.createElement("style"),h.setAttribute("data-kbach",""),document.head.appendChild(h),h)}function Me(e){let t=0,n=j.length;for(;t<n;){let r=t+n>>>1;O.get(j[r])>e?n=r:t=r+1}return t}function Se(e,t){if(O.has(e))return;let n=Re().sheet;if(!n)return;let r=Me(t);try{n.insertRule(e,r)}catch{return}j.splice(r,0,e),O.set(e,t)}var X=!1;function Ae(){if(X||(X=!0,document.getElementById(K)))return;let e=document.createElement("style");e.id=K,e.textContent=q,document.head.insertBefore(e,document.head.firstChild)}var De=500,k=new Map,Q=null;function Z(e){let t=V();t!==Q&&(k.clear(),Q=t);let n=k.get(e);if(n===void 0){let a=P(e,t);n=JSON.parse(a),k.size>=De&&k.clear(),k.set(e,n)}let{className:r,rules:o}=n;if(!ve){Ae();for(let{rule:a,order:i}of o)Se(a,i)}return r}function m(e){let t=/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());if(!t)return null;let n=t[1];n.length===3&&(n=n.split("").map(o=>o+o).join(""));let r=parseInt(n,16);return[r>>16&255,r>>8&255,r&255]}function Ke(e,t){switch(e){case"class":return`.dark { ${t} }`;case"media":return`@media (prefers-color-scheme: dark) { :root { ${t} } }`;default:return`[data-theme="dark"] { ${t} }`}}var ee="kbach-colors",te=null;function ne(e){if(typeof document>"u"||te===e)return;te=e;let t=[],n=[];for(let[o,a]of Object.entries(e.colors)){if(typeof a=="string")continue;let i=m(a.light),s=m(a.dark);!i||!s||(t.push(`--kb-color-${o}: ${i.join(",")};`),n.push(`--kb-color-${o}: ${s.join(",")};`))}let r=document.getElementById(ee);if(t.length===0){r?.remove();return}r||(r=document.createElement("style"),r.id=ee,document.head.insertBefore(r,document.head.firstChild)),r.textContent=`:root { ${t.join(" ")} }
|
|
3
|
+
${Ke(e.darkMode,n.join(" "))}`}var re="kbach-theme",je=new Set;function Oe(){return typeof window>"u"||!window.matchMedia?!1:window.matchMedia("(prefers-color-scheme: dark)").matches}function oe(){return typeof window>"u"?null:window.localStorage}function Ie(){let e=oe();if(!e)return null;try{let t=e.getItem(re);return t==="light"||t==="dark"||t==="system"?t:null}catch{return null}}function ie(e){return e==="system"?Oe():e==="dark"}function M(e){if(typeof document>"u")return;let t=document.documentElement,n=J().darkMode;t.classList.toggle("dark",n==="class"&&e),t.classList.toggle("light",n==="class"&&!e),n==="attribute"?t.setAttribute("data-theme",e?"dark":"light"):t.removeAttribute("data-theme")}Y();var Le=Ie();var I=Le??"system",b=ie(I);M(b);if(typeof window<"u"&&window.matchMedia){let e=window.matchMedia("(prefers-color-scheme: dark)"),t=n=>{I==="system"&&(b=n.matches,M(b),se())};e.addEventListener?e.addEventListener("change",t):e.addListener(t)}function se(){for(let e of je)e()}function L(){M(b)}function F(e){I=e,b=ie(e),M(b);let t=oe();if(t)try{t.setItem(re,e)}catch{}se()}function ae(){F(b?"light":"dark")}function W(e,t){let n=m(e);if(!n)return e;let r=Number(t)/100,o=Number.isFinite(r)?Math.min(1,Math.max(0,r)):1;return`rgba(${n.join(",")},${o})`}function ce(e,t){if(typeof e!="string")return e;let n=e.indexOf("/"),r=n===-1?e:e.slice(0,n),o=n===-1?void 0:e.slice(n+1),a=t(r);return a===void 0?e:o===void 0?a:typeof a=="string"?W(a,o):{light:W(a.light,o),dark:W(a.dark,o)}}function Fe(e,t){let{dark:n,...r}=e,o={},a=i=>o[i]??t[i];for(let[i,s]of Object.entries(r))typeof s=="object"&&s!==null&&!("light"in s)&&!("dark"in s)||(o[i]=ce(s,a));if(n){let i={},s=c=>{let u=i[c]??t[c];return typeof u=="string"?u:void 0};for(let[c,u]of Object.entries(n)){let g=ce(u,s);i[c]=typeof g=="string"?g:g.dark}for(let[c,u]of Object.entries(i)){let g=o[c];g===void 0||typeof g!="string"||(o[c]={light:g,dark:u})}}return o}function fe(e){let t={...v,...e.theme};return e.extend?.colors&&(t={...t,colors:{...t.colors,...Fe(e.extend.colors,t.colors)}}),e.extend?.spacing&&(t={...t,spacing:{...t.spacing,...e.extend.spacing}}),e.extend?.screens&&(t={...t,screens:{...t.screens,...e.extend.screens}}),e.extend?.fontFamily&&(t={...t,fontFamily:{...t.fontFamily,...e.extend.fontFamily}}),e.extend?.container&&(t={...t,container:{...t.container,...e.extend.container}}),e.darkMode&&(t={...t,darkMode:e.darkMode}),t}function le(e){let t=!1,n={};for(let[r,o]of Object.entries(e.colors))typeof o!="string"&&m(o.light)&&m(o.dark)?(n[r]=`rgb(var(--kb-color-${r}))`,t=!0):n[r]=o;return t?{...e,colors:n}:e}function We(e){let t=e.getAttribute("class");return t?t.split(/\s+/).filter(Boolean):[]}function de({document:e,wasmUrl:t,config:n}){let r=new Set,o=!1,a=l=>{if(!o)return;let d=[];for(let y of l)for(let p of We(y))r.has(p)||(r.add(p),d.push(p));d.length>0&&Z(d.join(" "))},i=l=>[l,...Array.from(l.querySelectorAll("[class]"))],s=()=>a(i(e.documentElement)),c=l=>{let d=fe(l??{});R(le(d)),ne(d),L()};c(n);let u=new e.defaultView.MutationObserver(l=>{let d=[];for(let y of l)if(y.type==="attributes")d.push(y.target);else for(let p of Array.from(y.addedNodes))p.nodeType===1&&d.push(...i(p));a(d)});return{ready:N(t).then(()=>{o=!0,s(),u.observe(e.documentElement,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["class"]})}),config(l){c(l),r.clear(),s()},refresh:s,setMode:F,toggle:ae}}var B="kbach_core_engine_bg.wasm",ue=/(\/@kbach\/browser)(@[^/]*)?\/?$/;function ge(e,t,n,r){if(t)return new URL(t,n).href;if(!e)return new URL(B,n).href;let o=new URL(e,n);return ue.test(o.pathname)?(o.pathname=o.pathname.replace(ue,`$1@${r}/dist/${B}`),o.search="",o.hash="",o.href):new URL(B,o).href}var me=document.currentScript,Be=ge(me?.src||void 0,me?.dataset.wasm,document.baseURI,"1.0.0-beta.1");window.Kbach=de({document,wasmUrl:Be,config:window.kbachConfig});})();
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,46 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kbach/browser",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
3
|
+
"version": "1.0.0-beta.1",
|
|
4
|
+
"description": "Kbach from a CDN: one <script> tag styles a plain HTML page with Kbach's utility classes. No build step, no bundler, no React.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"css",
|
|
7
|
+
"cdn",
|
|
8
|
+
"wasm",
|
|
9
|
+
"tailwind",
|
|
10
|
+
"utility-first",
|
|
11
|
+
"styling"
|
|
12
|
+
],
|
|
13
|
+
"license": "MIT",
|
|
14
|
+
"author": "semsakadanupol",
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "git+https://github.com/semsakadanupol/kbach.git",
|
|
18
|
+
"directory": "packages/browser"
|
|
19
|
+
},
|
|
20
|
+
"homepage": "https://github.com/semsakadanupol/kbach#readme",
|
|
21
|
+
"bugs": {
|
|
22
|
+
"url": "https://github.com/semsakadanupol/kbach/issues"
|
|
23
|
+
},
|
|
24
|
+
"publishConfig": {
|
|
25
|
+
"access": "public"
|
|
26
|
+
},
|
|
27
|
+
"files": [
|
|
28
|
+
"dist",
|
|
29
|
+
"AGENTS.md"
|
|
30
|
+
],
|
|
31
|
+
"main": "./dist/kbach.js",
|
|
32
|
+
"unpkg": "./dist/kbach.js",
|
|
33
|
+
"jsdelivr": "./dist/kbach.js",
|
|
34
|
+
"scripts": {
|
|
35
|
+
"build": "tsup && node scripts/copy-wasm.mjs && node scripts/verify-bundle.mjs",
|
|
36
|
+
"test": "vitest run",
|
|
37
|
+
"lint": "tsc --noEmit"
|
|
38
|
+
},
|
|
39
|
+
"devDependencies": {
|
|
40
|
+
"@kbach/react": "*",
|
|
41
|
+
"jsdom": "^30.0.1",
|
|
42
|
+
"tsup": "^8.0.0",
|
|
43
|
+
"typescript": "^6.0.0",
|
|
44
|
+
"vitest": "^1.0.0"
|
|
45
|
+
}
|
|
46
|
+
}
|