@ponchia/ui 0.12.0 → 0.14.0

package/docs/theming.md

@@ -129,7 +129,10 @@ you change CSS `--accent` later.
 
 - **Spacing** — override the `--space-2xs … --space-2xl` scale, or use a
   preset: `data-density="compact"` / `data-density="comfortable"` on any
-  element (defaults to the middle scale).
+  element (defaults to the middle scale). Dense tool chrome also gets four half
+  steps on the 0.25rem unit that the t-shirt scale skips: `--space-0-5`,
+  `--space-0-75`, `--space-1-5` and `--space-2-5` (2, 3, 6 and 10px at a 16px
+  root). The density presets scale them with the rest.
 
   **Read this before relying on the preset.** It re-points the `--space-*`
   scale, and only components whose padding is *expressed in that scale* move
@@ -176,7 +179,14 @@ you change CSS `--accent` later.
   convention: `inset-block-end: max(<your offset>, var(--safe-area-bottom))`.
 - **Type** — `--display` (dot-matrix face), `--mono`, `--sans`. Override
   to drop Doto or swap the body face; the token layer keeps working even
-  if you self-host fonts (see the `fonts.css` note in the README).
+  if you self-host fonts (see the `fonts.css` note in the README). The
+  default bundle ships Doto only. `--sans` names Inter first and `--mono`
+  JetBrains Mono, so without those faces each OS draws its own fallback.
+  Import `@ponchia/ui/css/fonts-inter.css` and
+  `@ponchia/ui/css/fonts-jetbrains-mono.css` to ship both (Inter 4.1 as
+  one variable face per style; JetBrains Mono 2.304 in regular, bold and
+  their italics; SIL OFL 1.1, licenses in `fonts/`). A browser downloads a
+  face only when text needs it.
 - **Surfaces / lines / text** — the `--bg*`, `--panel*`, `--line*`,
   `--text*` tokens are overridable for a bespoke palette, but you then
   own their contrast. Prefer just `--accent` unless you need a full
@@ -189,6 +199,50 @@ you change CSS `--accent` later.
   set `accent-color` yourself on them — this is the one accent surface
   the framework can't tune for you.
 
+## A tool over a canvas: layers and zoom
+
+**Layers.** A page needs six stacking layers (`--z-base`, `--z-raised`,
+`--z-sticky`, `--z-overlay`, `--z-popover`, `--z-toast`). A tool drawn over a
+canvas needs named ones, lowest first:
+
+| Token | Value | For |
+| --- | --- | --- |
+| `--z-canvas` | `--z-base` | the canvas plane; its nodes stack locally inside it |
+| `--z-chrome` | `--z-sticky` | toolbars, headers and rails over the canvas |
+| `--z-panel` | 25 | docked and floating panels |
+| `--z-modal` | `--z-overlay` | dialogs and their scrim |
+| `--z-menu` | `--z-popover` | menus and popovers, including those a dialog opens |
+| `--z-toast` | 60 | toasts |
+| `--z-tooltip` | 70 | tooltips |
+| `--z-navigation` | 80 | presentation and tour chrome that drives the whole surface |
+
+Where a workspace layer means the same as a page layer it is an alias, so the
+two scales cannot disagree.
+
+**Zoom.** A host that draws bronto UI inside a scaled surface, such as a
+zoomable canvas, marks the scaled element with `data-ui-zoom` and sets
+`--ui-zoom` to its scale there:
+
+```css
+.canvas-viewport {
+  --ui-zoom: var(--my-canvas-zoom);
+}
+```
+
+```html
+<div class="canvas-viewport" data-ui-zoom>…</div>
+```
+
+Inside it `--ui-px` is one screen pixel (1px divided by the zoom, with the zoom
+floored at 0.15), and `--hairline`, `--focus-ring-width` and
+`--focus-ring-offset` are re-declared in it. Every bronto focus ring uses those
+tokens, so a control inside a zoomed-out canvas keeps a 2px ring on screen.
+Size your own canvas overlays the same way: `width: calc(1.5 * var(--ui-px))`.
+
+The scope is an attribute rather than an inherited value on purpose. A custom
+property that reads `--ui-zoom` resolves where it is declared, so a value set on
+`:root` could not follow a zoomed subtree.
+
 ## Beyond accent: full re-skins
 
 The "Nothing" look is the **default skin, not the architecture**. It is

package/docs/usage.md

@@ -165,6 +165,17 @@ data-viz palette tokens. Always wrap it in a `ui-report__figure` with a caption,
 a `.ui-legend` key, and fallback data. Full LLM/static report cookbook:
 [reporting.md](reporting.md).
 
+## A tool: `@ponchia/ui/css/tool.css` instead of the default bundle
+
+An application that draws on its own surface (a canvas, an editor, a
+workbench) renders none of the site and app chrome: the theme toggle, the
+content-site shell, data tables and the admin service shell. Import
+`@ponchia/ui/css/tool.css` **instead of** `@ponchia/ui`. It is the default
+bundle in the same cascade order without the `navigation`, `site`, `table` and
+`app` leaves. Everything else, including the dot-matrix glyphs, motion and the
+feedback, overlay and disclosure primitives, is unchanged. Add one of the four
+back as its own leaf (`@ponchia/ui/css/table.css`) if a screen needs it.
+
 ## Buttons: variant and size
 
 - **primary is the bare `ui-button`.** There is no `--primary` and no
@@ -253,6 +264,50 @@ Without the slots, every empty surface in an app re-invents these three parts
 under a different name and they drift — one has a glyph, the next has two
 sentences at the same weight, a third is a bare `<p>`.
 
+## Small bodies: body state and band
+
+A node, panel or card body of 200–400px has four things to say besides its
+content: nothing is here, it is loading, it failed, it is out of date. A
+page-level empty state or a boxed alert spends a third of such a body on its
+frame, so a small body uses two compact shapes:
+
+- **`ui-body-state`** *replaces the content*. It fills the body and centres
+  one short sentence, with an optional `ui-empty-state__hint` or an action. Use
+  `ui.bodyState()` for empty and loading, the plain state (put
+  `aria-busy="true"` on a loading region, and a `ui-dotspinner` or `ui-skeleton`
+  inside if you like); `ui.bodyState({ state: 'error' | 'stale' })` leads with a
+  tone dot.
+- **`ui-alert--band`** *sits above content the body still shows*: a full-bleed
+  line of small type, the tone as a tint. Use `ui.alert({ tone, band: true })`
+  as the body's first child.
+
+| State | Content gone | Content still shown |
+| --- | --- | --- |
+| empty | `ui.bodyState()` | — |
+| loading | `ui.bodyState()` + `aria-busy` | `ui-skeleton` rows in place |
+| error | `ui.bodyState({ state: 'error' })` | `ui.alert({ tone: 'danger', band: true })` |
+| stale | `ui.bodyState({ state: 'stale' })` | `ui.alert({ tone: 'warning', band: true })` |
+
+```html
+<div class="node-body ui-cq">
+  <p class="ui-alert ui-alert--warning ui-alert--band" role="status">
+    Last synced 2 h ago
+  </p>
+  …the content, still readable…
+</div>
+
+<div class="node-body ui-cq">
+  <div class="ui-body-state ui-body-state--error" role="alert">
+    <p>Could not load the run</p>
+    <button class="ui-button ui-button--subtle ui-button--dense" type="button">Retry</button>
+  </div>
+</div>
+```
+
+Make the body a `ui-cq` container: below 15rem the body state tightens to the
+smallest type and padding. The body itself should be a flex column or have a
+height, so the state can fill it.
+
 ## Link vs link--cta
 
 Plain `ui-link` for in-flow links. `ui-link--cta` is the accent

package/fonts/OFL-Inter.txt

@@ -0,0 +1,92 @@
+Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/fonts/OFL-JetBrainsMono.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/llms.txt

@@ -45,7 +45,7 @@ the path changes from source `css/` to built `dist/css/`:
 <!-- installed locally -->
 <link rel="stylesheet" href="./node_modules/@ponchia/ui/dist/css/<leaf>.css" />
 <!-- or from a CDN; pin the version (pre-1.0, breaking changes ship in the minor) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.12.0/dist/css/<leaf>.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.14.0/dist/css/<leaf>.css" />
 ```
 
 The flattened default bundle is `dist/bronto.css` (bundler shorthand

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponchia/ui",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "type": "module",
   "description": "CSS-first identity and UI layer for services, tools, sites, and reports — works in HTML, every framework, and PDF, no component runtime. Shared app shell, forms, tables, workflow chrome, plus opt-in analytical/report primitives. Monochrome with one rationed accent. Zero runtime dependencies.",
   "keywords": [
@@ -106,6 +106,7 @@
     "docs/command.md",
     "docs/interop/tailwind.md",
     "docs/interop/react-flow.md",
+    "docs/interop/blocknote.md",
     "docs/migrations/0.2-to-0.3.md",
     "docs/migrations/0.3-to-0.4.md",
     "docs/migrations/0.4-to-0.5.md",
@@ -164,7 +165,6 @@
     "check:recipe-types": "node scripts/check-recipe-types.mjs",
     "check:dead": "knip --treat-config-hints-as-errors",
     "check:complexity": "node scripts/check-complexity.mjs",
-    "check:chain": "node scripts/check-chain.mjs",
     "check:dts-emit": "node scripts/check-dts-emit.mjs",
     "check:glyphs": "node scripts/check-glyphs.mjs",
     "check:color-policy": "node scripts/check-color-policy.mjs",
@@ -203,7 +203,7 @@
     "check:publint": "publint --strict",
     "check:attw": "attw --pack --ignore-rules no-resolution cjs-resolves-to-esm",
     "check:workflows": "github-actionlint .github/workflows/*.yml",
-    "check": "npm run lint && npm run check:format && npm run check:exports && npm run check:fresh && npm run check:classes && npm run check:recipe-types && npm run check:dead && npm run check:complexity && npm run check:types && npm run check:unit && npm run check:shiki && npm run check:dist && npm run check:pack && npm run check:consumer-surface && npm run check:consumer-types && npm run check:component-matrix && npm run check:behavior-matrix && npm run check:helper-matrix && npm run check:examples && npm run check:visual-baselines && npm run check:playwright-container && npm run check:schemas && npm run check:publint && npm run check:attw && npm run check:workflows && npm run check:release && npm run check:versions && npm run check:migrations && npm run check:public-metadata && npm run check:public-hygiene && npm run check:doc-links && npm run check:doc-recipes && npm run check:contract && npm run check:variables && npm run check:contrast && npm run check:dtcg && npm run check:dts-emit && npm run check:glyphs && npm run check:color-policy && npm run check:skins && npm run check:charts && npm run check:mermaid && npm run check:d2 && npm run check:vega && npm run check:report && npm run check:legend && npm run check:chain",
+    "check": "node scripts/run-checks.mjs",
     "test": "node --test \"test/*.test.mjs\"",
     "test:e2e": "playwright test",
     "test:e2e:chromium": "playwright test --project=chromium",
@@ -222,16 +222,16 @@
     "@axe-core/playwright": "^4.11.3",
     "@playwright/test": "1.60.0",
     "github-actionlint": "^1.7.12",
-    "jsdom": "^30.0.1",
-    "knip": "^6.32.1",
-    "pdfjs-dist": "^6.2.108",
-    "prettier": "^3.9.6",
-    "publint": "^0.3.23",
-    "stylelint": "^17.14.1",
+    "jsdom": "^30.1.1",
+    "knip": "^6.39.0",
+    "pdfjs-dist": "^6.3.289",
+    "prettier": "^3.9.9",
+    "publint": "^0.3.24",
+    "stylelint": "^17.16.0",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-use-logical": "^2.1.3",
     "typescript": "^6.0.3",
-    "vega": "^6.3.1",
+    "vega": "^6.4.0",
     "vega-lite": "^6.4.3"
   },
   "exports": {
@@ -262,6 +262,9 @@
     "./css/app.css": "./dist/css/app.css",
     "./css/skins.css": "./dist/css/skins.css",
     "./css/dataviz.css": "./dist/css/dataviz.css",
+    "./css/blocknote.css": "./dist/css/blocknote.css",
+    "./css/fonts-inter.css": "./dist/css/fonts-inter.css",
+    "./css/fonts-jetbrains-mono.css": "./dist/css/fonts-jetbrains-mono.css",
     "./css/report.css": "./dist/css/report.css",
     "./css/row.css": "./dist/css/row.css",
     "./css/figure.css": "./dist/css/figure.css",
@@ -291,6 +294,7 @@
     "./css/command.css": "./dist/css/command.css",
     "./css/analytical.css": "./dist/css/analytical.css",
     "./css/report-kit.css": "./dist/css/report-kit.css",
+    "./css/tool.css": "./dist/css/tool.css",
     "./css/unlayered/tokens.css": "./css/tokens.css",
     "./css/unlayered/fonts.css": "./css/fonts.css",
     "./css/unlayered/base.css": "./css/base.css",
@@ -308,6 +312,9 @@
     "./css/unlayered/app.css": "./css/app.css",
     "./css/unlayered/skins.css": "./css/skins.css",
     "./css/unlayered/dataviz.css": "./css/dataviz.css",
+    "./css/unlayered/blocknote.css": "./css/blocknote.css",
+    "./css/unlayered/fonts-inter.css": "./css/fonts-inter.css",
+    "./css/unlayered/fonts-jetbrains-mono.css": "./css/fonts-jetbrains-mono.css",
     "./css/unlayered/report.css": "./css/report.css",
     "./css/unlayered/row.css": "./css/row.css",
     "./css/unlayered/figure.css": "./css/figure.css",
@@ -390,6 +397,7 @@
     "./docs/command.md": "./docs/command.md",
     "./docs/interop/tailwind.md": "./docs/interop/tailwind.md",
     "./docs/interop/react-flow.md": "./docs/interop/react-flow.md",
+    "./docs/interop/blocknote.md": "./docs/interop/blocknote.md",
     "./docs/migrations/0.2-to-0.3.md": "./docs/migrations/0.2-to-0.3.md",
     "./docs/migrations/0.3-to-0.4.md": "./docs/migrations/0.3-to-0.4.md",
     "./docs/migrations/0.4-to-0.5.md": "./docs/migrations/0.4-to-0.5.md",