@ponchia/ui 0.12.0 → 0.14.0

package/classes/classes.json

@@ -1,8 +1,8 @@
 {
   "$comment": "@ponchia/ui class vocabulary as language-neutral data — validate emitted markup without executing the ESM cls map or parsing the .d.ts. Generated from classes/index.js — do not edit by hand; run `npm run classes:json:build`. Drift-checked in CI. `groups[].base` is null for a parts-only namespace (no standalone base class — do NOT emit it). A modifier whose name contains `__` (e.g. `ui-spark__bar--pos`) attaches to THAT part, not the base host. `states` is the author-applied `is-*` hooks (runtime/behavior-managed hooks are excluded); `behaviorAttributes` are the `data-bronto-*` wiring hooks the optional behaviors delegate on; `requiredAria` is the role/aria a generator must emit per component. `states` + `customProperties` are documented in docs/reference.md and ship outside `cls` by design.",
   "counts": {
-    "classes": 695,
-    "groups": 187
+    "classes": 700,
+    "groups": 188
   },
   "groups": {
     "ui-accordion": {
@@ -23,6 +23,7 @@
       "base": "ui-alert",
       "modifiers": [
         "ui-alert--accent",
+        "ui-alert--band",
         "ui-alert--danger",
         "ui-alert--info",
         "ui-alert--success",
@@ -195,6 +196,14 @@
       ],
       "parts": []
     },
+    "ui-body-state": {
+      "base": "ui-body-state",
+      "modifiers": [
+        "ui-body-state--error",
+        "ui-body-state--stale"
+      ],
+      "parts": []
+    },
     "ui-bracket-note": {
       "base": "ui-bracket-note",
       "modifiers": [
@@ -993,6 +1002,7 @@
     "ui-prose": {
       "base": "ui-prose",
       "modifiers": [
+        "ui-prose--blocks",
         "ui-prose--compact"
       ],
       "parts": []
@@ -1603,6 +1613,7 @@
     "ui-activity",
     "ui-alert",
     "ui-alert--accent",
+    "ui-alert--band",
     "ui-alert--danger",
     "ui-alert--info",
     "ui-alert--success",
@@ -1684,6 +1695,9 @@
     "ui-badge--muted",
     "ui-badge--success",
     "ui-badge--warning",
+    "ui-body-state",
+    "ui-body-state--error",
+    "ui-body-state--stale",
     "ui-bracket-note",
     "ui-bracket-note--accent",
     "ui-bracket-note--danger",
@@ -2040,6 +2054,7 @@
     "ui-property__label",
     "ui-property__value",
     "ui-prose",
+    "ui-prose--blocks",
     "ui-prose--compact",
     "ui-provenance",
     "ui-provenance__item",

package/classes/index.d.ts

@@ -133,6 +133,10 @@ export declare const cls: {
   readonly alertWarning: 'ui-alert--warning';
   readonly alertDanger: 'ui-alert--danger';
   readonly alertInfo: 'ui-alert--info';
+  readonly alertBand: 'ui-alert--band';
+  readonly bodyState: 'ui-body-state';
+  readonly bodyStateError: 'ui-body-state--error';
+  readonly bodyStateStale: 'ui-body-state--stale';
   readonly toastStack: 'ui-toast-stack';
   readonly toastStackAssertive: 'ui-toast-stack--assertive';
   readonly toast: 'ui-toast';
@@ -241,6 +245,7 @@ export declare const cls: {
   readonly eyebrowSm: 'ui-eyebrow--sm';
   readonly prose: 'ui-prose';
   readonly proseCompact: 'ui-prose--compact';
+  readonly proseBlocks: 'ui-prose--blocks';
   readonly quote: 'ui-quote';
   readonly quoteCite: 'ui-quote__cite';
   readonly container: 'ui-container';
@@ -722,6 +727,10 @@ export interface ButtonOpts {
 export interface EmptyStateOpts {
   invite?: boolean;
 }
+export interface BodyStateOpts {
+  /** Omit for empty and loading (mark a loading region aria-busy). */
+  state?: 'error' | 'stale';
+}
 export interface ToolstripOpts {
   variant?: 'floating' | 'compact' | 'pane';
   anchor?: 'block-start' | 'block-end';
@@ -795,6 +804,7 @@ export interface StaggerOpts {
 export type Tone = 'accent' | 'success' | 'warning' | 'danger' | 'info';
 export interface AlertOpts {
   tone?: Tone;
+  band?: boolean;
 }
 export interface ToastOpts {
   tone?: Tone;
@@ -822,6 +832,7 @@ export interface AvatarOpts {
 }
 export interface ProseOpts {
   compact?: boolean;
+  blocks?: boolean;
 }
 export interface ContainerOpts {
   narrow?: boolean;
@@ -1013,6 +1024,7 @@ export interface Ui {
   job(opts?: JobOpts): string;
   originLabel(opts?: OriginLabelOpts): string;
   emptyState(opts?: EmptyStateOpts): string;
+  bodyState(opts?: BodyStateOpts): string;
   toolstrip(opts?: ToolstripOpts): string;
   selectionbar(opts?: SelectionbarOpts): string;
 }

package/classes/index.js

@@ -141,6 +141,10 @@ export const cls = Object.freeze({
   alertWarning: 'ui-alert--warning',
   alertDanger: 'ui-alert--danger',
   alertInfo: 'ui-alert--info',
+  alertBand: 'ui-alert--band',
+  bodyState: 'ui-body-state',
+  bodyStateError: 'ui-body-state--error',
+  bodyStateStale: 'ui-body-state--stale',
   toastStack: 'ui-toast-stack',
   toastStackAssertive: 'ui-toast-stack--assertive',
   toast: 'ui-toast',
@@ -255,6 +259,7 @@ export const cls = Object.freeze({
   eyebrowSm: 'ui-eyebrow--sm',
   prose: 'ui-prose',
   proseCompact: 'ui-prose--compact',
+  proseBlocks: 'ui-prose--blocks',
   quote: 'ui-quote',
   quoteCite: 'ui-quote__cite',
   // site shell
@@ -874,6 +879,11 @@ const dotTone = (tone) =>
     tone,
   );
 
+// A body state's tone. Empty and loading are the plain state (no option); a
+// loading region says so with aria-busy, not a class.
+const bodyStateTone = (state) =>
+  valueClass({ error: cls.bodyStateError, stale: cls.bodyStateStale }, state);
+
 const alertTone = (tone) =>
   toneClass(
     'alert',
@@ -1025,7 +1035,7 @@ export const ui = {
   hint: ({ error } = {}) => j(cls.hint, error && cls.hintError),
   cluster: ({ between } = {}) => j(cls.cluster, between && cls.clusterBetween),
   stagger: ({ auto } = {}) => j(cls.stagger, auto && cls.staggerAuto),
-  alert: ({ tone } = {}) => j(cls.alert, alertTone(tone)),
+  alert: ({ tone, band } = {}) => j(cls.alert, alertTone(tone), band && cls.alertBand),
   toast: ({ tone } = {}) => j(cls.toast, toastTone(tone)),
   progress: ({ indeterminate } = {}) => j(cls.progress, indeterminate && cls.progressIndeterminate),
   meter: ({ tone } = {}) => j(cls.meter, meterTone(tone)),
@@ -1036,7 +1046,8 @@ export const ui = {
   tab: ({ active } = {}) => j(cls.tab, active && 'is-active'),
   avatar: ({ size } = {}) =>
     j(cls.avatar, size === 'sm' && cls.avatarSm, size === 'lg' && cls.avatarLg),
-  prose: ({ compact } = {}) => j(cls.prose, compact && cls.proseCompact),
+  prose: ({ compact, blocks } = {}) =>
+    j(cls.prose, compact && cls.proseCompact, blocks && cls.proseBlocks),
   container: ({ narrow, wide } = {}) =>
     j(cls.container, narrow && cls.containerNarrow, wide && cls.containerWide),
   tag: ({ accent } = {}) => j(cls.tag, accent && cls.tagAccent),
@@ -1150,6 +1161,7 @@ export const ui = {
   job: ({ state, compact } = {}) => j(cls.job, jobTone(state), compact && cls.jobCompact),
   originLabel: ({ ai } = {}) => j(cls.originLabel, ai && cls.originLabelAi),
   emptyState: ({ invite } = {}) => j(cls.emptyState, invite && cls.emptyStateInvite),
+  bodyState: ({ state } = {}) => j(cls.bodyState, bodyStateTone(state)),
   toolstrip: ({ variant, anchor } = {}) =>
     j(
       cls.toolstrip,

package/classes/vscode.css-custom-data.json

@@ -201,6 +201,18 @@
       "name": "--focus-ring",
       "description": "Theme token. Light: `var(--accent)` · Dark: `var(--accent)`"
     },
+    {
+      "name": "--focus-ring-offset",
+      "description": "Global scale token. Value: `2px`"
+    },
+    {
+      "name": "--focus-ring-width",
+      "description": "Global scale token. Value: `2px`"
+    },
+    {
+      "name": "--hairline",
+      "description": "Global scale token. Value: `1px`"
+    },
     {
       "name": "--info",
       "description": "Theme token. Light: `#1f63c4` · Dark: `#6fb0e6`"
@@ -285,6 +297,22 @@
       "name": "--shadow-raised",
       "description": "Theme token. Light: `0 0 0 1px var(--line-strong)` · Dark: `0 0 0 1px var(--line-strong)`"
     },
+    {
+      "name": "--space-0-5",
+      "description": "Global scale token. Value: `0.125rem`"
+    },
+    {
+      "name": "--space-0-75",
+      "description": "Global scale token. Value: `0.1875rem`"
+    },
+    {
+      "name": "--space-1-5",
+      "description": "Global scale token. Value: `0.375rem`"
+    },
+    {
+      "name": "--space-2-5",
+      "description": "Global scale token. Value: `0.625rem`"
+    },
     {
       "name": "--space-2xl",
       "description": "Global scale token. Value: `2.5rem`"
@@ -409,6 +437,14 @@
       "name": "--tracking-wider",
       "description": "Global scale token. Value: `0.22em`"
     },
+    {
+      "name": "--ui-px",
+      "description": "Global scale token. Value: `1px`"
+    },
+    {
+      "name": "--ui-zoom",
+      "description": "Global scale token. Value: `1`"
+    },
     {
       "name": "--warning",
       "description": "Theme token. Light: `#806414` · Dark: `#d8bd72`"
@@ -421,10 +457,34 @@
       "name": "--z-base",
       "description": "Global scale token. Value: `0`"
     },
+    {
+      "name": "--z-canvas",
+      "description": "Global scale token. Value: `var(--z-base)`"
+    },
+    {
+      "name": "--z-chrome",
+      "description": "Global scale token. Value: `var(--z-sticky)`"
+    },
+    {
+      "name": "--z-menu",
+      "description": "Global scale token. Value: `var(--z-popover)`"
+    },
+    {
+      "name": "--z-modal",
+      "description": "Global scale token. Value: `var(--z-overlay)`"
+    },
+    {
+      "name": "--z-navigation",
+      "description": "Global scale token. Value: `80`"
+    },
     {
       "name": "--z-overlay",
       "description": "Global scale token. Value: `30`"
     },
+    {
+      "name": "--z-panel",
+      "description": "Global scale token. Value: `25`"
+    },
     {
       "name": "--z-popover",
       "description": "Global scale token. Value: `50`"
@@ -440,6 +500,10 @@
     {
       "name": "--z-toast",
       "description": "Global scale token. Value: `60`"
+    },
+    {
+      "name": "--z-tooltip",
+      "description": "Global scale token. Value: `70`"
     }
   ],
   "atDirectives": [

package/css/base.css

@@ -164,8 +164,8 @@ input:focus-visible,
 select:focus-visible,
 textarea:focus-visible,
 [tabindex]:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* Small global helpers reused across apps. */

package/css/blocknote.css

@@ -0,0 +1,61 @@
+/* ==========================================================================
+   blocknote — BlockNote's theme variables, mapped to bronto tokens.
+
+   INTEROP LEAF, opt-in. BlockNote (https://www.blocknotejs.org) themes its
+   editor, menus, side menu, toolbar and text highlights through `--bn-*`
+   custom properties on `.bn-root`, with its own light and dark values. Point
+   them at the bronto tokens and the editor follows the theme, skins, contrast
+   and the OLED surface like the rest of the page.
+
+   BlockNote's stylesheet is unlayered, and an unlayered rule outranks any
+   layered one, so import this leaf's UNLAYERED build, after BlockNote's:
+
+     @import '@blocknote/mantine/style.css';
+     @import '@ponchia/ui/css/unlayered/blocknote.css';
+
+   Text and background highlights are categorical identity (a colour a person
+   chose for a span), so they take `--cat-N-ink` and `--cat-N-tint` from
+   css/dataviz.css. Without that leaf they fall back to the status colours.
+   ========================================================================== */
+
+.bn-root,
+.bn-root[data-color-scheme] {
+  --bn-font-family: var(--sans);
+  --bn-border-radius: var(--radius-lg);
+  --bn-colors-editor-text: var(--text);
+  --bn-colors-editor-background: var(--panel);
+  --bn-colors-menu-text: var(--text);
+  --bn-colors-menu-background: var(--panel-strong);
+  --bn-colors-tooltip-text: var(--text);
+  --bn-colors-tooltip-background: var(--panel-soft);
+  --bn-colors-hovered-text: var(--text);
+  --bn-colors-hovered-background: var(--panel-soft);
+  --bn-colors-selected-text: var(--on-accent);
+  --bn-colors-selected-background: var(--accent);
+  --bn-colors-disabled-text: var(--text-dim);
+  --bn-colors-disabled-background: var(--panel-soft);
+  --bn-colors-shadow: var(--line);
+  --bn-colors-border: var(--line);
+  --bn-colors-side-menu: var(--text-dim);
+
+  /* Highlights: BlockNote's nine names onto the categorical hues. Gray is the
+     neutral ink; brown, which the palette has no hue for, is the orange ink. */
+  --bn-colors-highlights-gray-text: var(--text-dim);
+  --bn-colors-highlights-gray-background: var(--panel-soft);
+  --bn-colors-highlights-brown-text: var(--cat-2-ink, var(--warning));
+  --bn-colors-highlights-brown-background: var(--panel-soft);
+  --bn-colors-highlights-red-text: var(--cat-8-ink, var(--danger));
+  --bn-colors-highlights-red-background: var(--cat-8-tint, var(--panel-soft));
+  --bn-colors-highlights-orange-text: var(--cat-2-ink, var(--warning));
+  --bn-colors-highlights-orange-background: var(--cat-2-tint, var(--panel-soft));
+  --bn-colors-highlights-yellow-text: var(--cat-4-ink, var(--warning));
+  --bn-colors-highlights-yellow-background: var(--cat-4-tint, var(--panel-soft));
+  --bn-colors-highlights-green-text: var(--cat-6-ink, var(--success));
+  --bn-colors-highlights-green-background: var(--cat-6-tint, var(--panel-soft));
+  --bn-colors-highlights-blue-text: var(--cat-1-ink, var(--info));
+  --bn-colors-highlights-blue-background: var(--cat-1-tint, var(--panel-soft));
+  --bn-colors-highlights-purple-text: var(--cat-7-ink, var(--info));
+  --bn-colors-highlights-purple-background: var(--cat-7-tint, var(--panel-soft));
+  --bn-colors-highlights-pink-text: var(--cat-5-ink, var(--danger));
+  --bn-colors-highlights-pink-background: var(--cat-5-tint, var(--panel-soft));
+}

package/css/clamp.css

@@ -55,8 +55,8 @@
 }
 
 .ui-clamp__toggle:focus-visible + .ui-clamp__body + .ui-clamp__control {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 .ui-clamp__less {

package/css/content.css

@@ -5,9 +5,42 @@
    and the document is styled in the Nothing aesthetic while the markup
    stays semantic and machine-readable (no class-soup). Everything here
    is an element selector scoped under `.ui-prose`, so it never leaks
-   into app UI.
+   into app UI. The one exception is `.ui-meta`, the date · author line
+   that sits beside long-form text, a tool's remarks included (it lived in
+   site.css until 0.14, so css/tool.css can keep it without the site shell).
    ========================================================================== */
 
+/* --- Meta row — date · author · read-time, dot-separated --- */
+
+.ui-meta {
+  align-items: center;
+  color: var(--text-dim);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: 0.55rem;
+  letter-spacing: var(--tracking-wide);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+.ui-meta__item {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.55rem;
+}
+
+.ui-meta__item:not(:last-child)::after {
+  background: var(--line-strong);
+  border-radius: 50%;
+  block-size: 0.22rem;
+  content: '';
+  inline-size: 0.22rem;
+}
+
 .ui-prose {
   /* A prose block must shrink as a grid/flex item; its pre blocks scroll locally. */
   min-inline-size: 0;
@@ -308,6 +341,132 @@
   margin-block-start: var(--space-lg);
 }
 
+/* --- Blocks variant — the block editor's geometry ---
+   For a surface that is both read and edited, where the editor is a block
+   editor (BlockNote's model): the read view has to put every line where the
+   editor will draw it, or the text jumps when the surface switches mode.
+   Blocks carry a small padding instead of flow margins; headings a lead above
+   and a 1.6/1.3/1.15em scale at weight 600; lists a fixed marker column with
+   disc, circle and square; a task row the editor's checkbox geometry. The
+   measure is released: a block surface is as wide as its container. The
+   geometry is the editor's own px, exposed so a host can retune it. */
+
+.ui-prose--blocks {
+  --prose-measure: none;
+  --prose-block: 3px;
+  --prose-heading-lead: 18px;
+  --prose-list-column: 24px;
+
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.ui-prose--blocks > *,
+.ui-prose--blocks > * + *,
+.ui-prose--blocks > * + :is(h1, h2, h3, h4, h5, h6),
+.ui-prose--blocks li,
+.ui-prose--blocks li + li,
+.ui-prose--blocks li > *,
+.ui-prose--blocks :is(ul, ol) :is(ul, ol),
+.ui-prose--blocks blockquote > *,
+.ui-prose--blocks blockquote > * + * {
+  margin-block: 0;
+}
+
+.ui-prose--blocks > :not(ul, ol),
+.ui-prose--blocks li {
+  padding-block: var(--prose-block);
+}
+
+/* An item's own block ends before its nested list, as the editor nests it. */
+.ui-prose--blocks li:has(> :is(ul, ol)) {
+  padding-block-end: 0;
+}
+
+.ui-prose--blocks li > :is(ul, ol) {
+  padding-block-start: var(--prose-block);
+}
+
+.ui-prose--blocks :is(h1, h2, h3, h4, h5, h6) {
+  padding-block: var(--prose-heading-lead) var(--prose-block);
+  border: 0;
+  font-size: 1em;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.ui-prose--blocks h1 {
+  font-size: 1.6em;
+}
+
+.ui-prose--blocks h2 {
+  font-size: 1.3em;
+}
+
+.ui-prose--blocks h3 {
+  font-size: 1.15em;
+}
+
+.ui-prose--blocks :is(ul, ol) {
+  padding-inline-start: var(--prose-list-column);
+}
+
+.ui-prose--blocks ul {
+  list-style: disc;
+}
+
+.ui-prose--blocks ul ul {
+  list-style: circle;
+}
+
+.ui-prose--blocks ul ul ul {
+  list-style: square;
+}
+
+.ui-prose--blocks li::marker {
+  color: inherit;
+}
+
+/* A task row is the editor's: the checkbox centred in a hit area at the text
+   column, the text padded inside the block. A loose list may put the checkbox
+   in the item's paragraph rather than the item. */
+.ui-prose--blocks li:has(> input[type='checkbox'], > p > input[type='checkbox']) {
+  margin-inline-start: calc(-1 * var(--prose-list-column));
+  padding-block: 10px;
+  list-style: none;
+}
+
+.ui-prose--blocks :is(li, li > p):has(> input[type='checkbox']) {
+  display: flex;
+  align-items: flex-start;
+}
+
+.ui-prose--blocks :is(li, li > p) > input[type='checkbox'] {
+  flex: none;
+  inline-size: 20px;
+  block-size: 20px;
+  margin: 2px 6px 0;
+}
+
+@media (pointer: coarse) {
+  .ui-prose--blocks li:has(> input[type='checkbox'], > p > input[type='checkbox']) {
+    padding-block: 16px;
+  }
+
+  .ui-prose--blocks :is(li, li > p) > input[type='checkbox'] {
+    margin-inline: 12px;
+  }
+}
+
+/* A quote is one block: its text on the body's line, its rule at the column. */
+.ui-prose--blocks blockquote {
+  margin-inline: 0;
+}
+
+.ui-prose--blocks blockquote > * {
+  line-height: inherit;
+}
+
 /* ==========================================================================
    ui-quote — pull-quote with attribution. A long-form companion to
    .ui-prose (works inside it or standalone). Emphasis via scale + a

package/css/disclosure.css

@@ -75,8 +75,8 @@
      distinction — colour stays the solid accent used by every other
      control's ring (the --focus-ring token wiring is decided globally,
      not per-component). */
-  outline: 2px solid var(--focus-ring);
-  outline-offset: -3px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(-1.5 * var(--focus-ring-offset));
 }
 
 .ui-tabs__panel[hidden] {
@@ -216,8 +216,8 @@
 }
 
 .ui-segmented__option:has(input:focus-visible) {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: -2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
 }
 
 @media (hover: hover) {
@@ -439,8 +439,8 @@
 }
 
 .ui-carousel__viewport:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: -2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
 }
 
 .ui-carousel__slide {
@@ -519,8 +519,8 @@
 
 .ui-carousel__prev:focus-visible,
 .ui-carousel__next:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* Position counter ("3 / 12") — initCarousel fills the text; aria-live. */
@@ -584,8 +584,8 @@
 }
 
 .ui-carousel__thumb:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 @media (prefers-reduced-motion: reduce) {