@fest-lib/dom 0.1.23 → 0.1.24
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/README.md +39 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,21 +1,39 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<strong>@fest-lib/dom</strong><br>
|
|
3
|
+
Level 1 — Agate measure, decor, mixins, and inline stylesheets for LUR.E / FL.UI.
|
|
4
|
+
</p>
|
|
5
|
+
|
|
6
|
+
<p align="center">
|
|
7
|
+
<a href="https://www.npmjs.com/package/@fest-lib/dom"><img src="https://img.shields.io/npm/v/@fest-lib/dom?style=flat-square" alt="npm"></a>
|
|
8
|
+
<a href="LICENSE"><img src="https://img.shields.io/npm/l/@fest-lib/dom?style=flat-square" alt="MIT"></a>
|
|
9
|
+
<a href="https://github.com/fest-live/dom.ts"><img src="https://img.shields.io/github/stars/fest-live/dom.ts?style=flat-square" alt="stars"></a>
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
Browser DOM helpers: viewport / zoom / launcher grid (Agate), appear / shape / animation decor, style and behavior mixins, observers, and loaders that inject CSS without a bundler plugin.
|
|
13
|
+
|
|
14
|
+
```text
|
|
15
|
+
core
|
|
16
|
+
└── fest/dom ← you are here
|
|
17
|
+
└── lure · veela · icon · image · fl-ui
|
|
18
|
+
```
|
|
6
19
|
|
|
7
20
|
## Install
|
|
8
21
|
|
|
9
22
|
```bash
|
|
10
|
-
npm install @fest-lib/dom
|
|
23
|
+
npm install @fest-lib/core @fest-lib/dom
|
|
11
24
|
```
|
|
12
25
|
|
|
26
|
+
Peer: `@fest-lib/core` `>=0.1.0`. ESM, Node **20+**, `sideEffects: true`.
|
|
27
|
+
|
|
13
28
|
```ts
|
|
14
|
-
import { loadInlineStyle } from "@fest-lib/dom";
|
|
29
|
+
import { loadInlineStyle, loadStyleSheet } from "@fest-lib/dom";
|
|
15
30
|
|
|
16
|
-
await loadInlineStyle(
|
|
31
|
+
await loadInlineStyle(".panel { padding: 1rem; }");
|
|
32
|
+
loadStyleSheet(cssTextOrBlob); // <link> or adopted sheet
|
|
17
33
|
```
|
|
18
34
|
|
|
35
|
+
`loadInlineStyle(css, root?, layer?)` prepends a `<style>` (default: `document.head`). Optional `layer` wraps the text in `@layer`.
|
|
36
|
+
|
|
19
37
|
## Layout
|
|
20
38
|
|
|
21
39
|
| Path | Role |
|
|
@@ -23,6 +41,17 @@ await loadInlineStyle(cssText);
|
|
|
23
41
|
| `src/agate/*` | viewport, zoom, measure, launcher grid |
|
|
24
42
|
| `src/decor/*` | animation, appear, shape |
|
|
25
43
|
| `src/mixin/*` | observer, style, behavior, store, handler |
|
|
26
|
-
| `src/mixin/junction/*` | pointer/junction
|
|
44
|
+
| `src/mixin/junction/*` | pointer / junction (moving toward LUR.E) |
|
|
45
|
+
|
|
46
|
+
Agate numbers are the same coordinate story as Veela’s oriented-space tokens: client vs oriented vs algorithm space. Measure here; paint tokens in `@fest-lib/veela`.
|
|
47
|
+
|
|
48
|
+
## Workspace
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
cd modules/projects/dom.ts
|
|
52
|
+
npm run dev
|
|
53
|
+
npm run build
|
|
54
|
+
npm run publish
|
|
55
|
+
```
|
|
27
56
|
|
|
28
|
-
|
|
57
|
+
License: [MIT](LICENSE).
|
package/package.json
CHANGED