cssints 0.5.0 → 0.5.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/README.md +13 -11
- package/docs/API.md +7 -7
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -148,7 +148,7 @@ export const Row = ({ wide, on }: { wide?: boolean; on?: boolean }) => (
|
|
|
148
148
|
|
|
149
149
|
### In a terminal
|
|
150
150
|
|
|
151
|
-
`import * as css from "cssints/tui" with { type: "cssints" }` gives the members a terminal has (cells, colours, borders, flex, states, `cursor`), and the plugin compiles them to prop objects for [OpenTUI](https://opentui.com) renderables instead of classes; `@cssints/tui` applies their states and themes: [packages/tui](packages/tui/README.md), docs/API.md "TUI". The package to apply them, `@cssints/tui`, is **deprecated** in favour of [
|
|
151
|
+
`import * as css from "cssints/tui" with { type: "cssints" }` gives the members a terminal has (cells, colours, borders, flex, states, `cursor`), and the plugin compiles them to prop objects for [OpenTUI](https://opentui.com) renderables instead of classes; `@cssints/tui` applies their states and themes: [packages/tui](packages/tui/README.md), docs/API.md "TUI". The package to apply them, `@cssints/tui`, is **deprecated** in favour of the terminal target in [`native/terminal`](native/terminal) (Clay in cells, termbox2); its README says what carries over and how to run the replacement.
|
|
152
152
|
|
|
153
153
|
More in [docs/API.md](docs/API.md): property names and short names, `flex()` and `grid()` chains, conditions and layers, tokens and themes, `cn` and `cv`, and the errors you can get.
|
|
154
154
|
|
|
@@ -175,16 +175,18 @@ and Cursor. The skills use it when it is configured and work without it.
|
|
|
175
175
|
|
|
176
176
|
## Layout
|
|
177
177
|
|
|
178
|
-
| Path | What
|
|
179
|
-
| ------------------------------- |
|
|
180
|
-
| `packages/cssints` | Vite plugin (`cssints/vite`) on the Vite Module Runner, and the `cssints` library
|
|
181
|
-
| `packages/css-grammar` | Type-level recognizer and its runtime twin over mdn-data grammars, Typed OM values, browser support and prose rules
|
|
182
|
-
| `packages/icons` | `@cssints/icons`: icons from iconify JSON collections or SVG folders, a mask style with no runtime
|
|
183
|
-
| `packages/mise-en-mode` | `@cssints/mise-en-mode`: looks as themes in the layers app < author < viewer, on `data-mode` scopes, checked against the tokens and by `check.contrast`
|
|
184
|
-
| `packages/
|
|
185
|
-
| `
|
|
186
|
-
| `
|
|
187
|
-
| `
|
|
178
|
+
| Path | What |
|
|
179
|
+
| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
180
|
+
| `packages/cssints` | Vite plugin (`cssints/vite`) on the Vite Module Runner, and the `cssints` library |
|
|
181
|
+
| `packages/css-grammar` | Type-level recognizer and its runtime twin over mdn-data grammars, Typed OM values, browser support and prose rules |
|
|
182
|
+
| `packages/icons` | `@cssints/icons`: icons from iconify JSON collections or SVG folders, a mask style with no runtime |
|
|
183
|
+
| `packages/mise-en-mode` | `@cssints/mise-en-mode`: looks as themes in the layers app < author < viewer, on `data-mode` scopes, checked against the tokens and by `check.contrast` |
|
|
184
|
+
| `packages/headless` | `@cssints/headless`: headless APG widgets on Solid 2 (state and DOM attribute objects, no styling), conformance-checked against Quint specs; not published yet |
|
|
185
|
+
| `packages/apg-specs` | `@cssints/apg-specs` (private): the APG and canvas Quint specs, generated models, scenario bridges and ported scenarios the widgets are tested against |
|
|
186
|
+
| `packages/tui` | `@cssints/tui` (**deprecated**): the runtime of `cssints/tui` styles on OpenTUI and @bomb.sh/tty; `native/terminal` replaces it |
|
|
187
|
+
| `apps/demo` | React demo of every 0.1 feature |
|
|
188
|
+
| `apps/docs` | The documentation site: this file and `docs/API.md` as pages, with search and type hovers (`cd apps/docs && bun run dev`) |
|
|
189
|
+
| `docs/research`, `docs/archive` | Comparisons with other libraries; outdated plans |
|
|
188
190
|
|
|
189
191
|
## Development
|
|
190
192
|
|
package/docs/API.md
CHANGED
|
@@ -1273,11 +1273,11 @@ const { ratio, text } = await Effect.runPromise(contrast("#777", "white"));
|
|
|
1273
1273
|
|
|
1274
1274
|
> **Deprecated.** The members below still compile, and `@cssints/tui` still applies them, but importing it now prints
|
|
1275
1275
|
> one warning, and the package will not get new members. A terminal app builds on
|
|
1276
|
-
> [
|
|
1276
|
+
> [`native/`](../native/README.md) in this repository instead: `native/terminal` takes `cssints/clay` styles
|
|
1277
1277
|
> (`generator/clay-header.ts` → a C header), lays them out with [Clay](https://github.com/nicbarker/clay) and draws them
|
|
1278
1278
|
> into character cells on [termbox2](https://github.com/termbox/termbox2), with the keyboard focus layer in C
|
|
1279
1279
|
> (`terminal/focus.c`). What carries over and what does not, and the commands that run it, are in
|
|
1280
|
-
> [packages/tui/README.md](../packages/tui/README.md); `docs/map.md` step 6
|
|
1280
|
+
> [packages/tui/README.md](../packages/tui/README.md); `native/docs/map.md` step 6 is the full account.
|
|
1281
1281
|
|
|
1282
1282
|
A terminal app writes its styles with `cssints/tui`, and the same Vite plugin compiles them to **prop objects** for terminal renderables, not to classes: there is no sheet and no cascade. `@cssints/tui` applies them (states, the mouse pointer, the caret, themes); its adapters are [OpenTUI](https://opentui.com) and [@bomb.sh/tty](https://bomb.sh/docs/tty/api/). The design, the full property table and what is out of scope are in [research/tui.md](research/tui.md).
|
|
1283
1283
|
|
|
@@ -1481,11 +1481,11 @@ static const Clay_ElementDeclaration menu = { .layout = { ... }, .backgroundColo
|
|
|
1481
1481
|
|
|
1482
1482
|
- **Images**: `image(src, { width, height, fit })` fills Clay's `image`: the element that draws a picture, its children none. Clay 1.0's `Clay_ImageElementConfig` is one field, `void *imageData`, which Clay passes to the renderer untouched, so the path of the image travels in it (the desktop renderer loads it with ThorVG; the firmware's own renderer is still the app's to write). Older Clay also kept the image's `sourceDimensions` there; 1.0 has no such field, so the image's own size becomes the element's box, and `fit` is Clay's `aspectRatio`:
|
|
1483
1483
|
|
|
1484
|
-
| Option | Clay field
|
|
1485
|
-
| -------------------------- |
|
|
1486
|
-
| `"glyph.png"` (argument 1) | `image.imageData`: the path, printed as a C string, `(void *)"glyph.png"`
|
|
1487
|
-
| `width`, `height` | `layout.sizing`: the image's size, `CLAY_SIZING_FIXED`, whole pixels (a later `width` of a `cn()` wins)
|
|
1488
|
-
| `fit: "contain"` | `aspectRatio`: width / height, which Clay uses where it has one side to derive the other's (`"fill"` stretches)
|
|
1484
|
+
| Option | Clay field | Default |
|
|
1485
|
+
| -------------------------- | --------------------------------------------------------------------------------------------------------------- | -------- |
|
|
1486
|
+
| `"glyph.png"` (argument 1) | `image.imageData`: the path, printed as a C string, `(void *)"glyph.png"` | — |
|
|
1487
|
+
| `width`, `height` | `layout.sizing`: the image's size, `CLAY_SIZING_FIXED`, whole pixels (a later `width` of a `cn()` wins) | — |
|
|
1488
|
+
| `fit: "contain"` | `aspectRatio`: width / height, which Clay uses where it has one side to derive the other's (`"fill"` stretches) | `"fill"` |
|
|
1489
1489
|
|
|
1490
1490
|
A path that is not a non-empty string, a size that is not a positive whole number, an option that does not exist are build errors. `fit` is how the picture meets a box another style gives it: `fill` (CSS's `object-fit` default) stretches it, `contain` keeps the image's proportions.
|
|
1491
1491
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cssints",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "CSS in TypeScript: typed css.* calls compiled to atomic CSS at build time (a Vite plugin)",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
}
|
|
69
69
|
},
|
|
70
70
|
"dependencies": {
|
|
71
|
-
"@cssints/css-grammar": "^0.5.
|
|
71
|
+
"@cssints/css-grammar": "^0.5.1",
|
|
72
72
|
"culori": "^4.0.2",
|
|
73
73
|
"effect": "4.0.0",
|
|
74
74
|
"happy-dom": "^20.14.5",
|