@ponchia/ui 0.6.3 → 0.6.5

package/dist/css/report.css

@@ -1 +1 @@
-@layer bronto{.ui-report{--report-width: 72rem;--report-padding-block: var(--space-2xl);--report-gap: var(--space-lg);--report-measure: 74ch;--report-page-margin: 18mm;color: var(--text-soft);display: grid;gap: var(--report-gap);inline-size: min(100%,var(--report-width));margin-inline: auto;padding: var(--report-padding-block) var(--space-md)}.ui-report--compact{--report-gap: var(--space-md);--report-padding-block: var(--space-xl)}.ui-report--numbered{counter-reset: report-section}.ui-report__cover{align-content: end;border-block-end: 1px solid var(--line);display: grid;gap: var(--space-md);min-block-size: min(62vh,34rem);padding-block-end: var(--space-xl)}.ui-report__cover--compact{min-block-size: auto;padding-block: var(--space-xl) var(--space-lg)}.ui-report__head{align-items: end;border-block-end: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-md);justify-content: space-between;padding-block-end: var(--space-md)}.ui-report__title{color: var(--text);font-family: var(--display);font-size: calc(var(--text-xl) * 1.35);font-weight: var(--display-weight-strong);letter-spacing: 0;line-height: 1.05;margin: 0;max-inline-size: var(--report-measure);text-transform: uppercase;text-wrap: balance}.ui-report__subtitle{color: var(--text-dim);font-size: var(--text-lg);line-height: 1.5;margin: 0;max-inline-size: var(--report-measure)}.ui-report__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: 0;list-style: none;margin: 0;padding: 0;text-transform: uppercase}.ui-report__meta > *{align-items: center;display: inline-flex;gap: 0.55rem}.ui-report__meta > :not(:last-child)::after{background: var(--line-strong);border-radius: 50%;block-size: 0.22rem;content: '';inline-size: 0.22rem}.ui-report__toc{border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: var(--space-xs);padding: var(--space-md)}.ui-report__toc ol,.ui-report__toc ul{display: grid;gap: 0.35rem;margin: 0;padding-inline-start: var(--space-md)}.ui-report__toc a{color: var(--text);text-decoration: underline;text-decoration-color: color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset: 0.2rem}.ui-report__summary,.ui-report__finding,.ui-report__evidence{background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: var(--space-sm);padding: var(--space-md)}.ui-report__summary{border-inline-start: 2px solid var(--accent)}.ui-report__finding{border-inline-start: 2px solid var(--line-strong)}.ui-report__evidence{background: var(--panel-soft)}.ui-report__evidence:has(> .ui-table-wrap:only-child){padding: 0}.ui-report__evidence:has(> .ui-table-wrap:only-child) > .ui-table-wrap{border: 0;border-radius: var(--radius-md)}.ui-report__section{display: grid;gap: var(--space-md);scroll-margin-block-start: 6rem}.ui-report__section + .ui-report__section{border-block-start: 1px solid var(--line);padding-block-start: var(--space-xl)}.ui-report__section-head{color: var(--text);font-family: var(--display);font-size: var(--text-xl);font-weight: var(--display-weight);letter-spacing: 0;line-height: 1.1;margin: 0;text-transform: uppercase;text-wrap: balance}.ui-report--numbered .ui-report__section-head::before{color: var(--accent-text);content: counter(report-section,decimal-leading-zero) ' / ';counter-increment: report-section}.ui-report--numbered .ui-report__section--unnumbered > .ui-report__section-head::before{content: none;counter-increment: none}.ui-report__figure{display: grid;gap: var(--space-sm);margin: 0}.ui-report__caption{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: 0;line-height: 1.5;text-transform: uppercase}.ui-report__sources,.ui-report__appendix,.ui-report__footnotes{border-block-start: 1px solid var(--line);color: var(--text-dim);display: grid;font-size: var(--text-sm);gap: var(--space-sm);padding-block-start: var(--space-md)}.ui-compare{display: grid;gap: var(--space-md);grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr))}.ui-compare--2up{grid-template-columns: repeat(2,minmax(0,1fr))}@media (max-width: 33rem){.ui-compare--2up{grid-template-columns: 1fr}}.ui-compare__col{align-content: start;display: grid;gap: var(--space-sm)}.ui-compare__head{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-meter__row{align-items: center;display: grid;gap: var(--space-2xs) var(--space-md);grid-template-columns: minmax(9rem,14rem) 1fr auto;margin-block: var(--space-2xs)}.ui-meter__row .ui-meter{min-inline-size: 8rem}.ui-meter__label{color: var(--text-soft)}.ui-meter__value{color: var(--text);font-family: var(--mono);font-variant-numeric: tabular-nums;text-align: end}@media (max-width: 32rem){.ui-meter__row{grid-template-columns: 1fr}.ui-meter__value{text-align: start}}.ui-print-only{display: none !important}.ui-print-exact{-webkit-print-color-adjust: exact;print-color-adjust: exact}@media print{@page{margin: var(--report-page-margin)}.ui-report{--report-padding-block: 0;color-scheme: light;--text: #111;--text-soft: #2a2a2a;--text-dim: #555;--panel: #fff;--panel-soft: #f7f7f7;--line: #d9d9d9;--line-strong: #b3b3b3;inline-size: auto;padding: 0}.ui-report__cover{min-block-size: auto}.ui-report__cover,.ui-report__head,.ui-report__section,.ui-report__summary,.ui-report__finding,.ui-report__evidence,.ui-report__figure{break-inside: avoid}.ui-report__section-head{break-after: avoid}.ui-print-only{display: var(--print-display,block) !important}.ui-screen-only{display: none !important}.ui-break-before{break-before: page}.ui-break-after{break-after: page}.ui-keep{break-inside: avoid}}}
+@layer bronto{.ui-report{--report-width: 72rem;--report-padding-block: var(--space-2xl);--report-gap: var(--space-lg);--report-measure: 74ch;color: var(--text-soft);display: grid;gap: var(--report-gap);inline-size: min(100%,var(--report-width));margin-inline: auto;padding: var(--report-padding-block) var(--space-md)}.ui-report--compact{--report-gap: var(--space-md);--report-padding-block: var(--space-xl)}.ui-report--numbered{counter-reset: report-section}.ui-report > *,.ui-report__cover > *,.ui-report__head > *,.ui-report__toc > *,.ui-report__summary > *,.ui-report__decision > *,.ui-report__finding > *,.ui-report__evidence > *,.ui-report__section > *,.ui-report__figure > *,.ui-claim > *,.ui-evidence-grid > *,.ui-evidence-ledger > *,.ui-compare > *,.ui-compare__col > *{min-inline-size: 0}.ui-report__cover{align-content: end;border-block-end: 1px solid var(--line);display: grid;gap: var(--space-md);min-block-size: min(62vh,34rem);padding-block-end: var(--space-xl)}.ui-report__cover--compact{min-block-size: auto;padding-block: var(--space-xl) var(--space-lg)}.ui-report__head{align-items: end;border-block-end: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-md);justify-content: space-between;padding-block-end: var(--space-md)}.ui-report__title{color: var(--text);font-family: var(--display);font-size: calc(var(--text-xl) * 1.35);font-weight: var(--display-weight-strong);letter-spacing: 0;line-height: 1.05;margin: 0;max-inline-size: var(--report-measure);text-transform: uppercase;text-wrap: balance}.ui-report__subtitle{color: var(--text-dim);font-size: var(--text-lg);line-height: 1.5;margin: 0;max-inline-size: var(--report-measure)}.ui-report__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: 0;list-style: none;margin: 0;padding: 0;text-transform: uppercase}.ui-report__meta > *{align-items: center;display: inline-flex;gap: 0.55rem}.ui-report__meta > :not(:last-child)::after{background: var(--line-strong);border-radius: 50%;block-size: 0.22rem;content: '';inline-size: 0.22rem}.ui-report__toc{border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: var(--space-xs);padding: var(--space-md)}.ui-report__toc ol,.ui-report__toc ul{display: grid;gap: 0.35rem;margin: 0;padding-inline-start: var(--space-md)}.ui-report__toc a{color: var(--text);text-decoration: underline;text-decoration-color: color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset: 0.2rem}.ui-report__summary,.ui-report__finding,.ui-report__evidence{background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: var(--space-sm);padding: var(--space-md)}.ui-report__summary{border-inline-start: 2px solid var(--accent)}.ui-report__decision{background: var(--panel);border: 1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-inline-start: 3px solid var(--accent);border-radius: var(--radius-md);display: grid;gap: var(--space-sm);padding: var(--space-md)}.ui-report__decision-kicker{color: var(--accent-text);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);margin: 0;text-transform: uppercase}.ui-report__decision-title{color: var(--text);font-family: var(--display);font-size: var(--text-lg);font-weight: var(--display-weight);letter-spacing: 0;line-height: 1.18;margin: 0;text-transform: uppercase;text-wrap: balance}.ui-report__decision-body{color: var(--text-soft);line-height: 1.6;margin: 0;max-inline-size: var(--report-measure)}.ui-report__decision-meta{color: var(--text-dim);display: flex;flex-wrap: wrap;font-family: var(--mono);font-size: var(--text-2xs);gap: 0.45rem 0.75rem;letter-spacing: 0}.ui-report__decision-grid{border-block-start: 1px solid var(--line);display: grid;gap: 0}.ui-report__decision-item{align-items: start;border-block-end: 1px solid var(--line);display: grid;gap: var(--space-xs);grid-template-columns: minmax(8rem,14rem) minmax(0,1fr);padding-block: var(--space-xs)}.ui-report__decision-label,.ui-report__decision-value{margin: 0}.ui-report__decision-label{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-report__decision-value{color: var(--text-soft);line-height: 1.5}.ui-report__finding{--report-finding-tone: var(--line-strong);border-inline-start: 2px solid var(--report-finding-tone)}.ui-report__finding--critical{--report-finding-tone: var(--danger)}.ui-report__finding--major{--report-finding-tone: var(--warning)}.ui-report__finding--minor{--report-finding-tone: var(--info)}.ui-report__finding--resolved{--report-finding-tone: var(--success)}.ui-report__finding-title,.ui-report__finding-claim,.ui-report__finding-impact,.ui-report__finding-remediation,.ui-report__finding-evidence,.ui-report__finding-caveat{margin: 0}.ui-report__finding-title{color: var(--text);font-size: var(--text-md);font-weight: 650;line-height: 1.25}.ui-report__finding-claim{color: var(--text);line-height: 1.6}.ui-report__finding-impact,.ui-report__finding-remediation,.ui-report__finding-evidence{color: var(--text-soft);line-height: 1.55}.ui-report__finding-caveat{color: var(--text-dim);font-size: var(--text-sm);line-height: 1.55}.ui-claim{--claim-tone: var(--accent);background: var(--panel-soft);border: 1px solid var(--line);border-inline-start: 2px solid var(--claim-tone);border-radius: var(--radius-md);display: grid;gap: var(--space-xs);padding: var(--space-sm)}.ui-claim--supported{--claim-tone: var(--success)}.ui-claim--partial{--claim-tone: var(--warning)}.ui-claim--disputed,.ui-claim--unsupported{--claim-tone: var(--danger)}.ui-claim--unknown{--claim-tone: var(--info)}.ui-claim__statement,.ui-claim__status,.ui-claim__scope,.ui-claim__basis,.ui-claim__limits,.ui-claim__refs,.ui-claim__caveat{margin: 0}.ui-claim__statement{color: var(--text);font-weight: 650;line-height: 1.45}.ui-claim__status,.ui-claim__scope,.ui-claim__refs{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: 0;text-transform: uppercase}.ui-claim__basis,.ui-claim__limits,.ui-claim__caveat{color: var(--text-soft);font-size: var(--text-sm);line-height: 1.55}.ui-report__evidence{background: var(--panel-soft)}.ui-report__evidence:has(> .ui-table-wrap:only-child){padding: 0}.ui-report__evidence:has(> .ui-table-wrap:only-child) > .ui-table-wrap{border: 0;border-radius: var(--radius-md)}.ui-report__section{display: grid;gap: var(--space-md);scroll-margin-block-start: 6rem}.ui-report__section + .ui-report__section{border-block-start: 1px solid var(--line);padding-block-start: var(--space-xl)}.ui-report__section-head{color: var(--text);font-family: var(--display);font-size: var(--text-xl);font-weight: var(--display-weight);letter-spacing: 0;line-height: 1.1;margin: 0;text-transform: uppercase;text-wrap: balance}.ui-report--numbered .ui-report__section-head::before{color: var(--accent-text);content: counter(report-section,decimal-leading-zero) ' / ';counter-increment: report-section}.ui-report--numbered .ui-report__section--unnumbered > .ui-report__section-head::before{content: none;counter-increment: none}.ui-report__figure{display: grid;gap: var(--space-sm);margin: 0}.ui-report__caption{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: 0;line-height: 1.5;text-transform: uppercase}.ui-evidence-grid{display: grid;gap: var(--space-sm);grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr))}.ui-evidence-item{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: 0.35rem;padding: var(--space-sm)}.ui-evidence-item__title{color: var(--text);font-size: var(--text-sm);font-weight: 600;margin: 0}.ui-evidence-item__meta{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: 0}.ui-evidence-item__body{color: var(--text-soft);font-size: var(--text-sm);line-height: 1.55;margin: 0}.ui-evidence-item__kind,.ui-evidence-item__method,.ui-evidence-item__window,.ui-evidence-item__value,.ui-evidence-item__source,.ui-evidence-item__caveat{margin: 0}.ui-evidence-item__kind,.ui-evidence-item__method,.ui-evidence-item__window,.ui-evidence-item__source{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: 0;text-transform: uppercase}.ui-evidence-item__value{color: var(--text);font-size: var(--text-md);font-weight: 650}.ui-evidence-item__caveat{color: var(--text-dim);font-size: var(--text-sm);line-height: 1.5}.ui-evidence-ledger{display: grid;gap: var(--space-sm)}.ui-report__actions{border-block-start: 1px solid var(--line);display: grid;gap: 0}.ui-report__action{align-items: start;border-block-end: 1px solid var(--line);display: grid;gap: var(--space-xs);grid-template-columns: minmax(0,1fr) auto;padding-block: var(--space-sm)}.ui-report__action-status{align-self: start;color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-report__action-title,.ui-report__action-owner,.ui-report__action-due,.ui-report__action-priority,.ui-report__action-criteria,.ui-report__action-source{margin: 0}.ui-report__action-title{color: var(--text);font-weight: 650;line-height: 1.45}.ui-report__action-owner,.ui-report__action-due,.ui-report__action-priority,.ui-report__action-source{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: 0;text-transform: uppercase}.ui-report__action-criteria{color: var(--text-soft);font-size: var(--text-sm);line-height: 1.5}@media (max-width: 32rem){.ui-report__decision-item,.ui-report__action{grid-template-columns: 1fr}}.ui-report__sources,.ui-report__appendix,.ui-report__footnotes{border-block-start: 1px solid var(--line);color: var(--text-dim);display: grid;font-size: var(--text-sm);gap: var(--space-sm);padding-block-start: var(--space-md)}.ui-compare{display: grid;gap: var(--space-md);grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr))}.ui-compare--2up{grid-template-columns: repeat(2,minmax(0,1fr))}@media (max-width: 33rem){.ui-compare--2up{grid-template-columns: 1fr}}.ui-compare__col{align-content: start;display: grid;gap: var(--space-sm)}.ui-compare__head{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-meter__row{align-items: center;display: grid;gap: var(--space-2xs) var(--space-md);grid-template-columns: minmax(9rem,14rem) 1fr auto;margin-block: var(--space-2xs)}.ui-meter__row .ui-meter{min-inline-size: 8rem}.ui-meter__label{color: var(--text-soft)}.ui-meter__value{color: var(--text);font-family: var(--mono);font-variant-numeric: tabular-nums;text-align: end}@media (max-width: 32rem){.ui-meter__row{grid-template-columns: 1fr}.ui-meter__value{text-align: start}}.ui-print-only{display: none !important}.ui-print-exact{-webkit-print-color-adjust: exact;print-color-adjust: exact}@media print{@page{margin: 18mm}.ui-report{--report-padding-block: 0;color-scheme: light;--text: #111;--text-soft: #2a2a2a;--text-dim: #555;--panel: #fff;--panel-soft: #f7f7f7;--line: #d9d9d9;--line-strong: #b3b3b3;inline-size: auto;padding: 0}.ui-report__cover{min-block-size: auto}.ui-report__cover,.ui-report__head,.ui-report__decision,.ui-report__summary,.ui-report__finding,.ui-report__evidence,.ui-report__figure,.ui-claim,.ui-evidence-item,.ui-report__action{break-inside: avoid}.ui-report__section-head{break-after: avoid}.ui-print-only{display: var(--print-display,block) !important}.ui-screen-only{display: none !important}.ui-break-before{break-before: page}.ui-break-after{break-after: page}.ui-keep{break-inside: avoid}}}

package/dist/css/skins.css

@@ -1 +1 @@
-@layer bronto{:root[data-bronto-skin='amber-crt']{--accent: oklch(52% 0.11 67deg)}:root[data-theme='dark'][data-bronto-skin='amber-crt']{--accent: oklch(82% 0.15 82deg);--dotmatrix-glow: 0.4em}:root[data-bronto-skin='e-ink']{--accent: oklch(34% 0.012 250deg)}:root[data-theme='dark'][data-bronto-skin='e-ink']{--accent: oklch(84% 0.008 250deg)}:root[data-bronto-skin='phosphor-green']{--accent: oklch(52% 0.13 150deg)}:root[data-theme='dark'][data-bronto-skin='phosphor-green']{--accent: oklch(84% 0.19 150deg);--dotmatrix-glow: 0.4em}@media (prefers-color-scheme: dark){:root:not([data-theme='light'])[data-bronto-skin='amber-crt']{--accent: oklch(82% 0.15 82deg);--dotmatrix-glow: 0.4em}:root:not([data-theme='light'])[data-bronto-skin='e-ink']{--accent: oklch(84% 0.008 250deg)}:root:not([data-theme='light'])[data-bronto-skin='phosphor-green']{--accent: oklch(84% 0.19 150deg);--dotmatrix-glow: 0.4em}}}
+@layer bronto{:root[data-bronto-skin='amber-crt']{--accent: oklch(52% 0.11 67deg);--dotmatrix-pulse-min: 0.35}:root[data-theme='dark'][data-bronto-skin='amber-crt']{--accent: oklch(82% 0.15 82deg);--dotmatrix-glow: 0.4em;--dotmatrix-pulse-min: 0.3}:root[data-bronto-skin='e-ink']{--accent: oklch(34% 0.012 250deg);--dotmatrix-reveal-step: 0ms}:root[data-theme='dark'][data-bronto-skin='e-ink']{--accent: oklch(84% 0.008 250deg);--dotmatrix-reveal-step: 0ms}:root[data-bronto-skin='phosphor-green']{--accent: oklch(52% 0.13 150deg);--dotmatrix-pulse-min: 0.35}:root[data-theme='dark'][data-bronto-skin='phosphor-green']{--accent: oklch(84% 0.19 150deg);--dotmatrix-glow: 0.4em;--dotmatrix-pulse-min: 0.3}@media (prefers-color-scheme: dark){:root:not([data-theme='light'])[data-bronto-skin='amber-crt']{--accent: oklch(82% 0.15 82deg);--dotmatrix-glow: 0.4em;--dotmatrix-pulse-min: 0.3}:root:not([data-theme='light'])[data-bronto-skin='e-ink']{--accent: oklch(84% 0.008 250deg);--dotmatrix-reveal-step: 0ms}:root:not([data-theme='light'])[data-bronto-skin='phosphor-green']{--accent: oklch(84% 0.19 150deg);--dotmatrix-glow: 0.4em;--dotmatrix-pulse-min: 0.3}}}

package/dist/css/sources.css

@@ -1 +1 @@
-@layer bronto{.ui-citation,.ui-source-card,.ui-provenance{--src-tone: var(--text-dim)}.ui-src{--src-tone: var(--text-dim);align-items: center;background: var(--panel-soft);border: 1px solid color-mix(in srgb,var(--src-tone) 45%,var(--line));border-radius: var(--radius-pill);color: var(--text-soft);display: inline-flex;font-size: var(--text-2xs);gap: 0.35rem;padding: 0.08rem 0.55rem;vertical-align: baseline}.ui-src::before{background: var(--src-tone);border-radius: 50%;block-size: 0.45rem;content: '';flex: none;inline-size: 0.45rem;print-color-adjust: exact}.ui-src--verified{--src-tone: var(--success)}.ui-src--reviewed{--src-tone: var(--accent)}.ui-src--generated{--src-tone: var(--info)}.ui-src--unverified{--src-tone: var(--text-dim)}.ui-src--stale{--src-tone: var(--warning)}.ui-src--conflict{--src-tone: var(--danger)}.ui-citation{color: var(--accent-text);font-family: var(--mono);font-size: 0.72em;font-weight: 600;text-decoration: none;vertical-align: super}.ui-citation:hover{text-decoration: underline}.ui-citation--chip{align-items: center;background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-pill);color: var(--text-soft);display: inline-flex;font-size: var(--text-2xs);gap: 0.35rem;padding: 0.08rem 0.55rem;vertical-align: baseline}.ui-citation--chip::before{background: var(--src-tone);border-radius: 50%;block-size: 0.45rem;content: '';inline-size: 0.45rem;print-color-adjust: exact}.ui-source-list{display: grid;gap: var(--space-sm);list-style: none;margin: 0;padding: 0}.ui-source-list__item{margin: 0}.ui-source-card{background: var(--panel-soft);border: 1px solid var(--line);border-inline-start: 2px solid var(--src-tone);border-radius: var(--radius-md);display: grid;gap: 0.3rem;padding: 0.75rem 0.9rem;print-color-adjust: exact}.ui-source-card__title{color: var(--text);font-size: var(--text-sm);font-weight: 600;margin: 0}.ui-source-card__origin{color: var(--text-soft);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide)}.ui-source-card__time{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs)}.ui-source-card__excerpt{color: var(--text-soft);margin: 0}.ui-source-card__actions{display: flex;flex-wrap: wrap;gap: 0.5rem;margin-block-start: 0.2rem}.ui-provenance{align-items: center;color: var(--text-dim);display: inline-flex;flex-wrap: wrap;font-family: var(--mono);font-size: var(--text-2xs);gap: 0.3rem 0.75rem;letter-spacing: var(--tracking-wide)}.ui-provenance__item{align-items: center;display: inline-flex;gap: 0.35rem}.ui-provenance__item::before{background: var(--src-tone);border-radius: 50%;block-size: 0.45rem;content: '';inline-size: 0.45rem;print-color-adjust: exact}@media (forced-colors: active){.ui-citation--chip::before,.ui-provenance__item::before,.ui-src::before{background: CanvasText}.ui-source-card{border-inline-start-color: CanvasText}}@media print{.ui-citation[href]::after{content: none !important}}}
+@layer bronto{.ui-citation,.ui-source-card,.ui-provenance{--src-tone: var(--text-dim)}.ui-src{--src-tone: var(--text-dim);align-items: center;background: var(--panel-soft);border: 1px solid color-mix(in srgb,var(--src-tone) 45%,var(--line));border-radius: var(--radius-pill);color: var(--text-soft);display: inline-flex;font-size: var(--text-2xs);gap: 0.35rem;padding: 0.08rem 0.55rem;vertical-align: baseline}.ui-src::before{background: var(--src-tone);border-radius: 50%;block-size: 0.45rem;content: '';flex: none;inline-size: 0.45rem;print-color-adjust: exact}.ui-src--verified{--src-tone: var(--success)}.ui-src--reviewed{--src-tone: var(--accent)}.ui-src--generated{--src-tone: var(--info)}.ui-src--unverified{--src-tone: var(--text-dim)}.ui-src--stale{--src-tone: var(--warning)}.ui-src--conflict{--src-tone: var(--danger)}.ui-citation{color: var(--accent-text);font-family: var(--mono);font-size: 0.72em;font-weight: 600;text-decoration: none;vertical-align: super}.ui-citation:hover{text-decoration: underline}.ui-citation--chip{align-items: center;background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-pill);color: var(--text-soft);display: inline-flex;font-size: var(--text-2xs);gap: 0.35rem;padding: 0.08rem 0.55rem;vertical-align: baseline}.ui-citation--chip::before{background: var(--src-tone);border-radius: 50%;block-size: 0.45rem;content: '';inline-size: 0.45rem;print-color-adjust: exact}.ui-source-list{display: grid;gap: var(--space-sm);list-style: none;margin: 0;min-inline-size: 0;padding: 0}.ui-source-list__item{margin: 0;min-inline-size: 0}.ui-source-card{background: var(--panel-soft);border: 1px solid var(--line);border-inline-start: 2px solid var(--src-tone);border-radius: var(--radius-md);display: grid;gap: 0.3rem;min-inline-size: 0;padding: 0.75rem 0.9rem;print-color-adjust: exact}.ui-source-card:target,.ui-source-card.is-source-active{box-shadow: 0 0 0 3px color-mix(in srgb,var(--src-tone) 22%,transparent);outline: 2px solid var(--src-tone);outline-offset: 2px}.ui-source-card > *{min-inline-size: 0}.ui-source-card__title{color: var(--text);font-size: var(--text-sm);font-weight: 600;margin: 0;overflow-wrap: break-word}.ui-source-card__origin{color: var(--text-soft);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);overflow-wrap: anywhere}.ui-source-card__time{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);overflow-wrap: anywhere}.ui-source-card__excerpt{color: var(--text-soft);margin: 0;overflow-wrap: anywhere}.ui-source-card__actions{display: flex;flex-wrap: wrap;gap: 0.5rem;margin-block-start: 0.2rem}.ui-provenance{align-items: center;color: var(--text-dim);display: inline-flex;flex-wrap: wrap;font-family: var(--mono);font-size: var(--text-2xs);gap: 0.3rem 0.75rem;letter-spacing: var(--tracking-wide)}.ui-provenance__item{align-items: center;display: inline-flex;gap: 0.35rem}.ui-provenance__item::before{background: var(--src-tone);border-radius: 50%;block-size: 0.45rem;content: '';inline-size: 0.45rem;print-color-adjust: exact}@media (forced-colors: active){.ui-citation--chip::before,.ui-provenance__item::before,.ui-src::before{background: CanvasText}.ui-source-card{border-inline-start-color: CanvasText}}@media print{.ui-citation[href]::after{content: none !important}}}

package/dist/css/spark.css

@@ -1 +1 @@
-@layer bronto{.ui-spark{align-items: flex-end;block-size: 1em;display: inline-flex;gap: 1px;inline-size: max-content;vertical-align: -0.15em}.ui-spark__bar{background: currentColor;block-size: max(1px,calc(var(--v,0) * 100%));border-radius: 0.5px;flex: 0 0 0.25em;min-inline-size: 2px}.ui-spark__bar--accent{background: var(--accent)}.ui-spark__bar--pos{background: var(--success)}.ui-spark__bar--neg{background: var(--danger)}@media (forced-colors: active){.ui-spark__bar{background: CanvasText}}@media print{.ui-spark__bar{-webkit-print-color-adjust: exact;print-color-adjust: exact}}}
+@layer bronto{.ui-spark{align-items: flex-end;block-size: 1em;display: inline-flex;gap: 1px;inline-size: max-content;vertical-align: -0.15em}.ui-spark__bar{background: currentColor;block-size: max(1px,calc(var(--v,0) * 100%));border-radius: 0.5px;flex: 0 0 0.25em;min-inline-size: 2px}.ui-spark__bar--accent{background: var(--accent)}.ui-spark__bar--pos{background: var(--success)}.ui-spark__bar--neg{background: var(--danger)}.ui-spark--dots .ui-spark__bar{--_dot: var(--spark-dot,0.16em);--_step: calc(var(--_dot) + var(--spark-dot-gap,0.06em));border-radius: 0;-webkit-mask: repeating-linear-gradient(to top,#000 0 var(--_dot),transparent var(--_dot) var(--_step));mask: repeating-linear-gradient(to top,#000 0 var(--_dot),transparent var(--_dot) var(--_step))}@media (forced-colors: active){.ui-spark__bar{background: CanvasText}}@media print{.ui-spark__bar{-webkit-print-color-adjust: exact;print-color-adjust: exact}}}

package/dist/css/table.css

@@ -1 +1 @@
-@layer bronto{.ui-table-wrap{border: 1px solid var(--line);border-radius: var(--radius-md);overflow: auto}.ui-table{border-collapse: collapse;font-family: var(--mono);font-size: var(--text-sm);min-inline-size: 100%;inline-size: 100%}.ui-table th,.ui-table td{border-block-end: 1px solid var(--line);overflow-wrap: anywhere;padding: 0.7rem 0.85rem;text-align: start;vertical-align: top}.ui-table th{background: var(--panel);color: var(--text-dim);font-size: var(--text-2xs);font-weight: 700;letter-spacing: var(--tracking-wide);position: sticky;text-transform: uppercase;inset-block-start: 0;z-index: 1}.ui-table td{color: var(--text-soft)}.ui-table tbody tr:last-child td{border-block-end: 0}.ui-table tbody tr{transition: background-color var(--duration-fast) var(--ease-standard)}@media (hover: hover){.ui-table tbody tr:hover td{background: var(--bg-accent)}}.ui-table--dense th,.ui-table--dense td{font-size: var(--text-xs);padding: 0.42rem 0.6rem}.ui-table--comfortable th,.ui-table--comfortable td{padding: 0.95rem 1.1rem}.ui-table--lined td{border-inline-end: 1px solid var(--line)}.ui-table--lined td:last-child{border-inline-end: 0}.ui-table .is-num,.ui-table th.is-num{font-variant-numeric: tabular-nums;text-align: end}.ui-table .is-pos{color: var(--success)}.ui-table .is-neg{color: var(--danger)}.ui-table .is-key{color: var(--text);font-weight: 600}.ui-table__empty td{color: var(--text-dim);padding: 2rem;text-align: center}.ui-table__sort{align-items: center;background: none;border: 0;color: inherit;cursor: pointer;display: flex;font: inherit;gap: 0.4rem;letter-spacing: inherit;padding: 0;text-transform: inherit;inline-size: 100%}.ui-table__sort::after{content: '↕';opacity: 0.4}.ui-table th[aria-sort='ascending'] .ui-table__sort::after{content: '↑';opacity: 1}.ui-table th[aria-sort='descending'] .ui-table__sort::after{content: '↓';opacity: 1}.ui-table__select{inline-size: 1px;white-space: nowrap}.ui-table--selectable tbody tr[aria-selected='true'] td{background: var(--bg-accent)}.ui-table__toolbar{align-items: center;border: 1px solid var(--line);border-block-end: 0;border-start-start-radius: var(--radius-md);border-start-end-radius: var(--radius-md);display: flex;gap: var(--space-sm);padding: var(--space-sm) var(--space-md)}.ui-table-wrap--loading{opacity: 0.6;pointer-events: none}}
+@layer bronto{.ui-table-wrap{border: 1px solid var(--line);border-radius: var(--radius-md);overflow: auto}.ui-table{border-collapse: collapse;font-family: var(--mono);font-size: var(--text-sm);min-inline-size: 100%;inline-size: 100%}.ui-table th,.ui-table td{border-block-end: 1px solid var(--line);overflow-wrap: break-word;padding: 0.7rem 0.85rem;text-align: start;vertical-align: top;word-break: normal}.ui-table th{background: var(--panel);color: var(--text-dim);font-size: var(--text-2xs);font-weight: 700;letter-spacing: var(--tracking-wide);position: sticky;text-transform: uppercase;inset-block-start: 0;z-index: 1}.ui-table td{color: var(--text-soft)}.ui-table tbody tr:last-child td{border-block-end: 0}.ui-table tbody tr{transition: background-color var(--duration-fast) var(--ease-standard)}@media (hover: hover){.ui-table tbody tr:hover td{background: var(--bg-accent)}}.ui-table--dense th,.ui-table--dense td{font-size: var(--text-xs);padding: 0.42rem 0.6rem}.ui-table--comfortable th,.ui-table--comfortable td{padding: 0.95rem 1.1rem}.ui-table--lined td{border-inline-end: 1px solid var(--line)}.ui-table--lined td:last-child{border-inline-end: 0}.ui-table--break-anywhere th,.ui-table--break-anywhere td{overflow-wrap: anywhere}.ui-table .is-num,.ui-table th.is-num{font-variant-numeric: tabular-nums;text-align: end}.ui-table .is-pos{color: var(--success)}.ui-table .is-neg{color: var(--danger)}.ui-table .is-key{color: var(--text);font-weight: 600}.ui-table__empty td{color: var(--text-dim);padding: 2rem;text-align: center}.ui-table__sort{align-items: center;background: none;border: 0;color: inherit;cursor: pointer;display: flex;font: inherit;gap: 0.4rem;letter-spacing: inherit;padding: 0;text-transform: inherit;inline-size: 100%}.ui-table__sort::after{content: '↕';opacity: 0.4}.ui-table th[aria-sort='ascending'] .ui-table__sort::after{content: '↑';opacity: 1}.ui-table th[aria-sort='descending'] .ui-table__sort::after{content: '↓';opacity: 1}.ui-table__select{inline-size: 1px;white-space: nowrap}.ui-table--selectable tbody tr[aria-selected='true'] td{background: var(--bg-accent)}.ui-table__toolbar{align-items: center;border: 1px solid var(--line);border-block-end: 0;border-start-start-radius: var(--radius-md);border-start-end-radius: var(--radius-md);display: flex;gap: var(--space-sm);padding: var(--space-sm) var(--space-md)}.ui-table-wrap--loading{opacity: 0.6;pointer-events: none}}

package/dist/css/tokens.css

@@ -1 +1 @@
-@layer bronto{:root{--radius-xl: 4px;--radius-lg: 3px;--radius-md: 2px;--radius-sm: 1px;--radius-pill: 999px;--space-2xs: 0.25rem;--space-xs: 0.5rem;--space-sm: 0.75rem;--space-md: 1rem;--space-lg: 1.35rem;--space-xl: 1.75rem;--space-2xl: 2.5rem;--mono: 'JetBrains Mono','Fira Code','Cascadia Code','SF Mono',ui-monospace,monospace;--sans: 'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--dot-font: 'Doto',var(--mono);--display: var(--dot-font);--display-weight: 700;--display-weight-strong: 800;--text-2xs: 0.68rem;--text-xs: 0.76rem;--text-sm: 0.86rem;--text-base: 0.95rem;--text-lg: 1.15rem;--text-xl: 1.45rem;--tracking-wide: 0.14em;--tracking-wider: 0.22em;--ease-standard: cubic-bezier(0.2,0.8,0.2,1);--ease-spring: cubic-bezier(0.16,1,0.3,1);--ease-out: cubic-bezier(0.33,1,0.68,1);--duration-fast: 130ms;--duration-base: 200ms;--duration-slow: 360ms;--dot-size: 2px;--dot-gap: 14px;--z-base: 0;--z-raised: 10;--z-sticky: 20;--z-overlay: 30;--z-popover: 50;--z-toast: 60;--accent-1: color-mix(in oklch,var(--accent) 8%,var(--accent-ramp-end));--accent-2: color-mix(in oklch,var(--accent) 16%,var(--accent-ramp-end));--accent-3: color-mix(in oklch,var(--accent) 32%,var(--accent-ramp-end));--accent-4: color-mix(in oklch,var(--accent) 60%,var(--accent-ramp-end));--accent-5: var(--accent);--accent-6: var(--accent-strong);--surface-1: var(--bg);--surface-2: var(--bg-elevated);--surface-3: var(--panel);--surface-4: var(--panel-soft);--surface-5: var(--line);--surface-6: var(--line-strong);--bronto-color-bg: var(--bg);--bronto-color-surface: var(--panel);--bronto-color-surface-raised: var(--panel-strong);--bronto-color-border: var(--line);--bronto-color-border-strong: var(--line-strong);--bronto-color-text: var(--text);--bronto-color-text-muted: var(--text-dim);--bronto-color-action: var(--accent);--bronto-color-on-action: var(--button-text);--bronto-color-focus: var(--focus-ring);--bronto-color-success: var(--success);--bronto-color-warning: var(--warning);--bronto-color-danger: var(--danger);--bronto-color-info: var(--info);--surface: var(--panel);--surface-raised: var(--panel-strong);--surface-muted: var(--panel-soft);--border: var(--line);--border-strong: var(--line-strong)}:root,:root[data-theme='light']{color-scheme: light;--bg: #f4f4f2;--bg-elevated: #fbfbfa;--bg-accent: color-mix(in srgb,var(--accent) 6%,transparent);--panel: #ffffff;--panel-strong: #ffffff;--panel-soft: #ececea;--line: #d8d8d4;--line-strong: #a8a8a2;--text: #0a0a0a;--text-soft: #353533;--text-dim: #686863;--accent: #d71921;--accent-ramp-end: #ffffff;--accent-strong: color-mix(in srgb,var(--accent) 83%,#000);--accent-text: var(--accent-strong);--on-accent: var(--button-text);--accent-soft: color-mix(in srgb,var(--accent) 10%,transparent);--success: #2f7d4f;--success-soft: rgb(47,125,79,0.12);--warning: #806414;--warning-soft: rgb(128,100,20,0.13);--danger: #c01622;--danger-soft: rgb(192,22,34,0.1);--info: #1f63c4;--info-soft: rgb(31,99,196,0.12);--code-bg: rgb(10,10,10,0.05);--button-text: #ffffff;--field-dot: rgb(10,10,10,0.16);--field-dot-hot: rgb(10,10,10,0.4);--field-dot-accent: color-mix(in srgb,var(--accent) 78%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}@media (prefers-color-scheme: dark){:root:not([data-theme='light']){color-scheme: dark;--bg: #121212;--bg-elevated: #181818;--bg-accent: color-mix(in srgb,var(--accent) 8%,transparent);--panel: #1c1c1c;--panel-strong: #222222;--panel-soft: #242424;--line: #383838;--line-strong: #555555;--text: #e6e6e6;--text-soft: #c8c8c8;--text-dim: #a0a0a0;--accent: #ff3b41;--accent-ramp-end: #000000;--accent-strong: color-mix(in srgb,var(--accent) 84%,#fff);--accent-text: var(--accent-strong);--on-accent: var(--button-text);--accent-soft: color-mix(in srgb,var(--accent) 14%,transparent);--success: #4ec27e;--success-soft: rgb(78,194,126,0.14);--warning: #d8bd72;--warning-soft: rgb(216,189,114,0.14);--danger: #ff4d54;--danger-soft: rgb(255,77,84,0.15);--info: #6fb0e6;--info-soft: rgb(111,176,230,0.14);--code-bg: rgb(255,255,255,0.05);--button-text: #000000;--field-dot: rgb(242,242,242,0.14);--field-dot-hot: rgb(242,242,242,0.36);--field-dot-accent: color-mix(in srgb,var(--accent) 82%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}}:root[data-theme='dark']{color-scheme: dark;--bg: #121212;--bg-elevated: #181818;--bg-accent: color-mix(in srgb,var(--accent) 8%,transparent);--panel: #1c1c1c;--panel-strong: #222222;--panel-soft: #242424;--line: #383838;--line-strong: #555555;--text: #e6e6e6;--text-soft: #c8c8c8;--text-dim: #a0a0a0;--accent: #ff3b41;--accent-ramp-end: #000000;--accent-strong: color-mix(in srgb,var(--accent) 84%,#fff);--accent-text: var(--accent-strong);--on-accent: var(--button-text);--accent-soft: color-mix(in srgb,var(--accent) 14%,transparent);--success: #4ec27e;--success-soft: rgb(78,194,126,0.14);--warning: #d8bd72;--warning-soft: rgb(216,189,114,0.14);--danger: #ff4d54;--danger-soft: rgb(255,77,84,0.15);--info: #6fb0e6;--info-soft: rgb(111,176,230,0.14);--code-bg: rgb(255,255,255,0.05);--button-text: #000000;--field-dot: rgb(242,242,242,0.14);--field-dot-hot: rgb(242,242,242,0.36);--field-dot-accent: color-mix(in srgb,var(--accent) 82%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}[data-density='compact']{--space-2xs: 0.2rem;--space-xs: 0.4rem;--space-sm: 0.6rem;--space-md: 0.8rem;--space-lg: 1.05rem;--space-xl: 1.35rem;--space-2xl: 1.9rem}[data-density='comfortable']{--space-2xs: 0.3rem;--space-xs: 0.6rem;--space-sm: 0.95rem;--space-md: 1.25rem;--space-lg: 1.7rem;--space-xl: 2.2rem;--space-2xl: 3.1rem}[data-contrast='high']{--line: var(--line-strong);--text-dim: var(--text-soft);--focus-ring: var(--accent);--shadow-raised: 0 0 0 1px var(--text)}@media (prefers-contrast: more){:root{--line: var(--line-strong);--text-dim: var(--text-soft);--focus-ring: var(--accent);--shadow-raised: 0 0 0 1px var(--text)}}:root[data-theme='dark'][data-surface='oled']{--bg: #000000;--bg-elevated: #0a0a0a;--panel: #101010;--panel-strong: #161616;--panel-soft: #1a1a1a}@media (prefers-color-scheme: dark){:root:not([data-theme='light'])[data-surface='oled']{--bg: #000000;--bg-elevated: #0a0a0a;--panel: #101010;--panel-strong: #161616;--panel-soft: #1a1a1a}}@media print{:root:root:root{color-scheme: light;--text: #111;--text-soft: #2a2a2a;--text-dim: #555;--bg: #fff;--bg-elevated: #fff;--panel: #fff;--panel-strong: #fff;--panel-soft: #f7f7f7;--line: #d9d9d9;--line-strong: #b3b3b3;--success: #2f7d4f;--danger: #c01622;--warning: #806414;--info: #1f63c4;--accent: #d71921}}}
+@layer bronto{:root{--radius-xl: 4px;--radius-lg: 3px;--radius-md: 2px;--radius-sm: 1px;--radius-pill: 999px;--space-2xs: 0.25rem;--space-xs: 0.5rem;--space-sm: 0.75rem;--space-md: 1rem;--space-lg: 1.35rem;--space-xl: 1.75rem;--space-2xl: 2.5rem;--mono: 'JetBrains Mono','Fira Code','Cascadia Code','SF Mono',ui-monospace,monospace;--sans: 'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--dot-font: 'Doto',var(--mono);--display: var(--dot-font);--display-weight: 700;--display-weight-strong: 800;--text-2xs: 0.68rem;--text-xs: 0.76rem;--text-sm: 0.86rem;--text-base: 0.95rem;--text-lg: 1.15rem;--text-xl: 1.45rem;--tracking-wide: 0.14em;--tracking-wider: 0.22em;--ease-standard: cubic-bezier(0.2,0.8,0.2,1);--ease-spring: cubic-bezier(0.16,1,0.3,1);--ease-out: cubic-bezier(0.33,1,0.68,1);--duration-fast: 130ms;--duration-base: 200ms;--duration-slow: 360ms;--dot-size: 2px;--dot-gap: 14px;--z-base: 0;--z-raised: 10;--z-sticky: 20;--z-overlay: 30;--z-popover: 50;--z-toast: 60;--accent-1: color-mix(in oklch,var(--accent) 8%,var(--accent-ramp-end));--accent-2: color-mix(in oklch,var(--accent) 16%,var(--accent-ramp-end));--accent-3: color-mix(in oklch,var(--accent) 32%,var(--accent-ramp-end));--accent-4: color-mix(in oklch,var(--accent) 60%,var(--accent-ramp-end));--accent-5: var(--accent);--accent-6: var(--accent-strong);--surface-1: var(--bg);--surface-2: var(--bg-elevated);--surface-3: var(--panel);--surface-4: var(--panel-soft);--surface-5: var(--line);--surface-6: var(--line-strong);--bronto-color-bg: var(--bg);--bronto-color-surface: var(--panel);--bronto-color-surface-raised: var(--panel-strong);--bronto-color-border: var(--line);--bronto-color-border-strong: var(--line-strong);--bronto-color-text: var(--text);--bronto-color-text-muted: var(--text-dim);--bronto-color-action: var(--accent);--bronto-color-on-action: var(--button-text);--bronto-color-focus: var(--focus-ring);--bronto-color-success: var(--success);--bronto-color-warning: var(--warning);--bronto-color-danger: var(--danger);--bronto-color-info: var(--info);--surface: var(--panel);--surface-raised: var(--panel-strong);--surface-muted: var(--panel-soft);--border: var(--line);--border-strong: var(--line-strong)}:root,:root[data-theme='light']{color-scheme: light;--bg: #f4f4f2;--bg-elevated: #fbfbfa;--bg-accent: color-mix(in srgb,var(--accent) 6%,transparent);--panel: #ffffff;--panel-strong: #ffffff;--panel-soft: #ececea;--line: #d8d8d4;--line-strong: #a8a8a2;--text: #0a0a0a;--text-soft: #353533;--text-dim: #686863;--accent: #d71921;--accent-ramp-end: #ffffff;--accent-strong: color-mix(in srgb,var(--accent) 83%,#000);--accent-text: var(--accent-strong);--on-accent: var(--button-text);--accent-soft: color-mix(in srgb,var(--accent) 10%,transparent);--success: #2f7d4f;--success-soft: rgb(47,125,79,0.12);--warning: #806414;--warning-soft: rgb(128,100,20,0.13);--danger: #c01622;--danger-soft: rgb(192,22,34,0.1);--info: #1f63c4;--info-soft: rgb(31,99,196,0.12);--code-bg: rgb(10,10,10,0.05);--button-text: #ffffff;--field-dot: rgb(10,10,10,0.16);--field-dot-hot: rgb(10,10,10,0.4);--field-dot-accent: color-mix(in srgb,var(--accent) 78%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}@media (prefers-color-scheme: dark){:root:not([data-theme='light']){color-scheme: dark;--bg: #121212;--bg-elevated: #181818;--bg-accent: color-mix(in srgb,var(--accent) 8%,transparent);--panel: #1c1c1c;--panel-strong: #222222;--panel-soft: #242424;--line: #383838;--line-strong: #555555;--text: #e6e6e6;--text-soft: #c8c8c8;--text-dim: #a0a0a0;--accent: #ff3b41;--accent-ramp-end: #000000;--accent-strong: color-mix(in srgb,var(--accent) 84%,#fff);--accent-text: var(--accent-strong);--on-accent: var(--button-text);--accent-soft: color-mix(in srgb,var(--accent) 14%,transparent);--success: #4ec27e;--success-soft: rgb(78,194,126,0.14);--warning: #d8bd72;--warning-soft: rgb(216,189,114,0.14);--danger: #ff4d54;--danger-soft: rgb(255,77,84,0.15);--info: #6fb0e6;--info-soft: rgb(111,176,230,0.14);--code-bg: rgb(255,255,255,0.05);--button-text: #000000;--field-dot: rgb(242,242,242,0.14);--field-dot-hot: rgb(242,242,242,0.36);--field-dot-accent: color-mix(in srgb,var(--accent) 82%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}}:root[data-theme='dark']{color-scheme: dark;--bg: #121212;--bg-elevated: #181818;--bg-accent: color-mix(in srgb,var(--accent) 8%,transparent);--panel: #1c1c1c;--panel-strong: #222222;--panel-soft: #242424;--line: #383838;--line-strong: #555555;--text: #e6e6e6;--text-soft: #c8c8c8;--text-dim: #a0a0a0;--accent: #ff3b41;--accent-ramp-end: #000000;--accent-strong: color-mix(in srgb,var(--accent) 84%,#fff);--accent-text: var(--accent-strong);--on-accent: var(--button-text);--accent-soft: color-mix(in srgb,var(--accent) 14%,transparent);--success: #4ec27e;--success-soft: rgb(78,194,126,0.14);--warning: #d8bd72;--warning-soft: rgb(216,189,114,0.14);--danger: #ff4d54;--danger-soft: rgb(255,77,84,0.15);--info: #6fb0e6;--info-soft: rgb(111,176,230,0.14);--code-bg: rgb(255,255,255,0.05);--button-text: #000000;--field-dot: rgb(242,242,242,0.14);--field-dot-hot: rgb(242,242,242,0.36);--field-dot-accent: color-mix(in srgb,var(--accent) 82%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}[data-density='compact']{--space-2xs: 0.2rem;--space-xs: 0.4rem;--space-sm: 0.6rem;--space-md: 0.8rem;--space-lg: 1.05rem;--space-xl: 1.35rem;--space-2xl: 1.9rem}[data-density='comfortable']{--space-2xs: 0.3rem;--space-xs: 0.6rem;--space-sm: 0.95rem;--space-md: 1.25rem;--space-lg: 1.7rem;--space-xl: 2.2rem;--space-2xl: 3.1rem}[data-contrast='high']{--line: var(--line-strong);--text-dim: var(--text-soft);--focus-ring: var(--accent);--shadow-raised: 0 0 0 1px var(--text)}:root[data-contrast='high']{--line: var(--line-strong);--text-dim: var(--text-soft);--focus-ring: var(--accent);--shadow-raised: 0 0 0 1px var(--text)}@media (prefers-contrast: more){:root:root{--line: var(--line-strong);--text-dim: var(--text-soft);--focus-ring: var(--accent);--shadow-raised: 0 0 0 1px var(--text)}}:root[data-theme='dark'][data-surface='oled']{--bg: #000000;--bg-elevated: #0a0a0a;--panel: #101010;--panel-strong: #161616;--panel-soft: #1a1a1a}@media (prefers-color-scheme: dark){:root:not([data-theme='light'])[data-surface='oled']{--bg: #000000;--bg-elevated: #0a0a0a;--panel: #101010;--panel-strong: #161616;--panel-soft: #1a1a1a}}@media print{:root:root:root{color-scheme: light;--text: #111;--text-soft: #2a2a2a;--text-dim: #555;--bg: #fff;--bg-elevated: #fff;--panel: #fff;--panel-strong: #fff;--panel-soft: #f7f7f7;--line: #d9d9d9;--line-strong: #b3b3b3;--success: #2f7d4f;--danger: #c01622;--warning: #806414;--info: #1f63c4;--accent: #d71921}}}

package/docs/dots.md

@@ -0,0 +1,146 @@
+# Dot surfaces
+
+The dot-matrix is the library's signature: one lit/dim/accent dot vocabulary
+expressed across backgrounds, dividers, indicators, loaders, and a family of
+data-bound reporting surfaces. Everything here lives in the core stylesheet
+(`@ponchia/ui` / `@ponchia/ui/css`); the glyph icon set built on the same
+primitive is documented in `docs/glyphs.md`.
+
+All classes are in the typed registry (`@ponchia/ui/classes`) and the
+language-neutral `classes.json`; those are authoritative.
+
+## Tokens
+
+Density and expression are token-driven, so a surface re-skins without new CSS:
+
+| Token | Role |
+| --- | --- |
+| `--field-dot` | the dim (unlit) dot |
+| `--field-dot-hot` | a lit cell |
+| `--field-dot-accent` | the accented lit cell |
+| `--dot-gap` / `--dot-size` | `.ui-dotgrid` background density |
+| `--dotmatrix-cols` / `--dotmatrix-gap` / `--dotmatrix-dot` | matrix density |
+| `--dotmatrix-dot-radius` | `0` fuses dots into crisp pixels |
+
+The Tier-3 **display-expression** knobs speak in brightness + time rather than
+hue (a dot-matrix display has no decorative colour). They default to a no-op, so
+the base render is unchanged; the opt-in colorways (`@ponchia/ui/css/skins.css`)
+set them:
+
+| Knob | Default | Effect |
+| --- | --- | --- |
+| `--dotmatrix-glow` | `0` (off) | phosphor bloom around lit cells |
+| `--dotmatrix-pulse-min` | `0.55` | the floor the `--pulse` animation dips to |
+| `--dotmatrix-reveal-step` | `3ms` | per-cell cadence of the `--reveal` scan |
+
+## Decorative surfaces
+
+- `.ui-dotgrid` — a tiled dot-grid background (`--accent`, `--dense` modifiers).
+- `.ui-dotfield` — a fixed full-bleed dot backdrop.
+- `.ui-dotrule` — a dotted divider in place of a plain rule.
+- `.ui-halftone` — render host content (an `<img>` or a box with its own
+  background) through a dot lattice, so a thumbnail takes on the dot look. A
+  **style filter**, not a data viz — the dots are a fixed lattice, not
+  value-modulated. Tune with `--halftone-dot` / `--halftone-gap`.
+
+## Indicators & loaders
+
+- `.ui-dot` — a status dot with tones (`--accent/--success/--warning/--danger/--info`)
+  and a `--live` pulse ring; `.ui-status` is the dot + label row.
+- `.ui-dotloader` — three blinking dots.
+- `.ui-dotspinner` — the signature comet loader (`--sm` / `--lg`).
+- `.ui-dotbar` — a segmented LED progress bar; light a segment with `is-on`,
+  or `--indeterminate` for the sweep.
+
+## Data-bound reporting surfaces
+
+These map data onto the dot vocabulary. The boundary is the same as `ui-spark`
+and `ui-meter`: **the host normalises the data** (lights `is-on`, sets
+`data-level`, or writes `--v` 0..1) and the leaf only lays out + tones. None
+compute a scale, bin, or threshold. Each is opaque to assistive tech, so the
+container MUST carry a host-written `role="img"` + `aria-label` with the exact
+value — rounding to whole cells is presentation-only, so keep the figure in the
+label (WCAG 1.4.1).
+
+### `.ui-matrix` cell grid
+
+`.ui-dotmatrix` is the raw data-bound grid (the one the glyphs render on): a grid
+of `.ui-dotmatrix__cell` (with `--hot` / `--accent` tones) plus the `--reveal` /
+`--pulse` animations. You map data → cell class.
+
+### `.ui-waffle` — unit / part-to-whole
+
+An N×N field of dots ("73 of 100"). The host marks the lit cells with `is-on`.
+
+```html
+<div class="ui-waffle" role="img" aria-label="73 of 100 quota met" style="--waffle-cols: 10">
+  <i class="is-on"></i><i class="is-on"></i><!-- … 73 lit, 27 dim … --><i></i>
+</div>
+```
+
+Knobs: `--waffle-cols` (default 10), `--waffle-gap`, `--waffle-size`.
+
+### `.ui-activity` — contribution / calendar heatmap
+
+A GitHub-style density-over-time grid. Day cells flow down each weekday column
+(`grid-auto-flow: column`); intensity is `data-level="0..4"`, a 5-step ramp the
+host bins the data into.
+
+```html
+<div class="ui-activity" role="img" aria-label="commits, last 12 weeks">
+  <i data-level="0"></i><i data-level="3"></i><i data-level="4"></i><!-- … -->
+</div>
+```
+
+Knobs: `--activity-rows` (default 7), `--activity-cell`, `--activity-gap`.
+
+### `.ui-level` — LED level / VU meter
+
+A vertical column of discrete segments lit to a threshold (signal, load, VU). It
+fills from the bottom; the host lights segments with `is-on`. `--warn` /
+`--danger` re-point the lit colour for the whole meter when the host crosses a
+threshold (the host owns the threshold).
+
+```html
+<div class="ui-level ui-level--warn" role="img" aria-label="CPU 82%, high">
+  <i class="is-on"></i><i class="is-on"></i><i></i><!-- … --></div>
+```
+
+Knobs: `--level-segments` count is up to your markup; `--level-height`,
+`--level-size`, `--level-gap`.
+
+### `.ui-dotgauge` — radial dot gauge
+
+A 0..1 reading (`--v`) drawn as a ring of dots filling along an arc.
+
+```html
+<div class="ui-dotgauge" role="img" aria-label="Health 64%" style="--v: .64"></div>
+```
+
+Knobs: `--v`, `--gauge-size`, `--gauge-sweep` (default 270deg), `--gauge-from`,
+`--gauge-dot`.
+
+### `.ui-readout` — big dot-matrix numeric
+
+The row wrapper produced by `renderReadout` (see `docs/glyphs.md`) — a Nothing-style
+hero numeric composed from digit glyphs. Tune character spacing with
+`--readout-gap`; spaces render as a `.ui-readout__spacer` of width `--readout-space`.
+
+### `.ui-spark--dots`
+
+A modifier on the inline `ui-spark` dataword (`@ponchia/ui/css/spark.css`) that
+renders each bar as a stack of dots instead of a solid bar — same `--v` contract.
+
+## Responsive density — `.ui-dotfit`
+
+Wrap a dot surface in `.ui-dotfit` to make it respond to its **container** (the
+card) rather than the viewport, via a container query — so the same component
+reads well in a wide hero and a narrow tile without per-instance overrides.
+
+## Accessibility, forced colors & print
+
+Lit/dim/accent encode meaning via background-color, which Windows High Contrast
+Mode flattens — the dot surfaces opt out of forced-color remapping and pin lit
+states to distinct system colours (the activity ramp collapses to present vs
+absent). The data surfaces also set `print-color-adjust: exact` so their fills
+survive printing. Animations honour `prefers-reduced-motion`.

package/docs/frontier-primitives.md

@@ -0,0 +1,262 @@
+# Frontier primitives
+
+This is the strategic memory for Bronto's design-system differentiation. The
+goal is not to out-catalog Radix, Carbon, Atlassian, Fluent, Spectrum, or
+shadcn. Those systems already cover the standard component center: buttons,
+forms, dialogs, tabs, menus, cards, tables, tooltips, badges, navigation,
+loaders, and date inputs.
+
+Bronto should instead own the interface layer that makes complex work legible:
+explanation, provenance, relationships, command access, workbench ergonomics,
+generated reports, and durable system state. In short: interfaces that explain
+themselves.
+
+## Boundary
+
+The pattern that worked for annotations should stay the rule:
+
+- Bronto owns visual grammar, class vocabulary, token use, accessibility
+  guidance, pure geometry helpers, and small idempotent behavior kernels.
+- The host owns domain state, data mapping, chart scales, tour step order,
+  command execution, persistence, AI/tool orchestration, and announcements that
+  need product-specific wording.
+- New surfaces stay opt-in. They should not enter `dist/bronto.css` by default
+  unless they are clearly universal chrome.
+- Prefer CSS and markup first. Add JS only when the browser cannot express the
+  behavior without measuring, filtering, keyboard state, or pointer tracking.
+
+This keeps Bronto useful across Astro, SvelteKit, React, Solid, Qwik, plain
+HTML, and generated static reports without becoming a framework component kit.
+
+## Already aligned in 0.5.0
+
+The analytical/generated-report suite is already the first concrete expression
+of this strategy:
+
+- `annotations`: subject / connector / note grammar for SVG figures.
+- `legends`: data keys that prevent chart meaning drifting from palette tokens.
+- `marks`: semantic prose evidence and passage brackets.
+- `connectors`: DOMRect leader lines between related UI regions.
+- `spotlight`: the visual language of guided focus without a tour engine.
+- `crosshair`: pointer/ruler/readout surface without chart-domain mapping.
+- `selection`: shared selected/excluded/candidate states without hit-testing.
+- `sources`: citation / source-card / source-list / provenance with a
+  trust-state grammar (candidate #1 below — now shipped in 0.5.0).
+
+These are intentionally not a chart framework. They are communication
+primitives.
+
+## 2026 scout batch — report & evidence grammar
+
+A multi-source scout pass (2026-06-03) surfaced the next concrete batch. All
+four are novel, Baseline-clean on the 2026 floor, and squarely on the
+"explains itself" north star — the report / review / evidence lane. They ship
+as opt-in surfaces (never default `dist/bronto.css`), CSS-and-markup first,
+each with the same host-owns-state boundary that kept the chart renderer out in
+0.6.0. **All four shipped** — `ui-diff` in PR #97, then `ui-code` / `ui-spark` /
+`ui-sidenote` in PR #100 — opt-in leaves, unreleased on the 0.6.0 package line.
+
+### `ui-diff` — line/row change grammar  ✅ shipped
+
+A CSS-grid gutter grammar (`ui-diff`, `__row --add/--remove/--context`,
+`__hunk`, `--unified/--split`). The host supplies pre-classified rows; Bronto
+only paints — redundant `::before` +/- sign glyphs (never colour-only), tone
+tints, and optional subgrid alignment that degrades to plain grid. Composes
+with the shipped `ui-compare--2up`. Boundary: all tokenizing, row alignment,
+and hunk computation stay in the host — the moment Bronto parses or aligns rows
+it crosses the line that deleted the bar renderer in 0.6.0. Diff is the most
+explanation-dense surface Bronto does not yet own.
+
+### `ui-code` — fenced-code evidence chrome
+
+A static code surface that paints already-tokenized markup (head bar,
+line-number gutter via CSS counters, `.is-add` / `.is-del` / `.is-hl` line
+states) and **never parses**. The host — or Shiki, via the shipped
+`shiki/nothing.json` token-colour theme — supplies the token spans; Bronto owns
+chrome only. Code-as-evidence for changelogs, version history, and generated
+reports; pairs with the `.ui-src` provenance pill and marks. Degrades to a
+plain scrollable `<pre>`.
+
+### `ui-spark` — inline datawords
+
+Word-sized inline microcharts (line / bar / tristate / win-loss) for
+trend-in-a-sentence inside reports and dense tables — the inline-series gap the
+scalar `ui-delta` / `ui-num` / `ui-stat` leave open, and one block-level Vega
+will not fill. The host normalises each point to `0..1` (`--v`); Bronto paints
+geometry via inline SVG + custom properties + `currentColor`. No JS,
+SSR-static, print-survivable. Boundary: Bronto refuses raw values and
+min/max/scale computation, and every spark carries a host-supplied text / aria
+equivalent (a bare sparkline is opaque to AT).
+
+### `ui-sidenote` / `ui-marginnote` — marginal explanation
+
+Numbered margin sidenotes plus unnumbered marginnotes with CSS-counter
+numbering and zero-JS responsive collapse (the Tufte `:checked` pattern);
+degrades to an inline aside on narrow viewports and a footnote under
+`@media print`. The channel for evidence, caveats, and provenance asides that
+do not belong in the main column. Scope it as typographic margin notes,
+reconciled with the existing `report.css` `__footnotes` numbering — not a
+second backref engine.
+
+## 2026 scout batch #2 — explanation & provenance cluster  ✅ shipped
+
+A second scout pass (2026-06-04) ranked the next five and they all shipped as
+opt-in leaves (unreleased on the 0.6.0 line). All clear web-native + fit +
+leverage, and sit dead-centre on the explanation / provenance / orientation
+lanes — not component parity.
+
+### `ui-textref` — deep-link to the cited sentence  ✅ shipped
+
+`@ponchia/ui/css/textref.css`. A citation whose `href` is a URL Text Fragment
+(`#…:~:text=`): the browser scrolls to + highlights the exact quoted text, and
+Bronto owns the on-brand `::target-text` paint (`--textref-highlight`). The
+cheapest high-leverage item in the scout — extends the `sources.css` trust layer
+from "label a source" to "point inside it". The host builds the fragment URL (a
+three-line pure encoder, documented); no kernel. Degrades cleanly where Text
+Fragments are unsupported.
+
+### `ui-bullet` — Stephen-Few bullet graph  ✅ shipped
+
+`@ponchia/ui/css/bullet.css`. Measure bar + target tick + 2–3 grayscale
+qualitative bands — the canonical SLO / error-budget figure `ui-meter` cannot
+encode. Same host-normalises-to-0..1 contract as `ui-spark` (`--v` measure,
+`--t` target, `--band-lo`/`--band-hi` boundaries; `ui.bulletMeasure({ tone })`).
+Few designed it grayscale, which is exactly the Nothing palette. Requires a
+host-written `role="img"` + `aria-label`.
+
+### `ui-term` / `ui-glossary` — inline glossary  ✅ shipped
+
+`@ponchia/ui/css/term.css`. The accessible upgrade of the touch/keyboard-broken
+`abbr[title]`: a `ui-term` `<button popovertarget>` whose `ui-def` definition is
+a native `[popover]`, plus an end-of-document `ui-glossary` `<dl>`. The native
+popover pairing gives open/Esc/light-dismiss for free — no kernel. Popovers don't
+print, so the printed doc leans on the glossary block.
+
+### `ui-toc` — scrollspy table of contents  ✅ shipped
+
+`@ponchia/ui/css/toc.css`. A sticky contents rail (`--toc-top`) whose active
+entry keys on `aria-current="true"`. CSS can't know the in-view section, so the
+host mirrors it — statically, or with a small copy-paste IntersectionObserver
+(no kernel ships). Degrades to a plain anchored list.
+
+### `ui-tree` — hierarchy outline  ✅ shipped
+
+`@ponchia/ui/css/tree.css`. A depth-indented outline on nested native
+`<details>` (`ui-tree__branch`/`__leaf`/`__summary`/`__label`; add `name` for an
+exclusive-accordion group). Composes the disclosure grammar `ui-accordion` owns —
+it does not reinvent it. A11y honesty: a `<details>` group is a disclosure group,
+NOT an ARIA `tree`; the roving-focus kernel is deferred behind a real consumer
+(e.g. a workbench file pane).
+
+## Next strong candidates
+
+### 1. Source, citation, and provenance UI — ✅ shipped in 0.5.0
+
+Shipped as `@ponchia/ui/css/sources.css` (`ui-citation`/`ui-source-card`/
+`ui-source-list`/`ui-provenance` + the cross-cutting `ui-src--*` trust states),
+matching the surface below. The optional `initSources` behavior now adds
+source-card focus, a temporary `.is-source-active` cue, and lightweight preview
+metadata over existing citation/source IDs.
+
+Why it matters: AI output, generated reports, audit views, docs, and operational
+tools all need to answer "where did this come from?" Normal UI kits have tags
+and footnotes, but not a trust grammar. The shipped surface and its trust-state
+vocabulary are documented with the component; richer preview popovers remain
+host-owned.
+
+### 2. Lifecycle and system-state UI — 🟡 `ui-state` family shipped in 0.5.0
+
+Shipped as `@ponchia/ui/css/state.css` (`ui-state` + the canonical state matrix
++ `ui-syncbar`), matching the "good first build" below. `ui-job` (background
+progress) and `ui-conflict` (resolution affordances) remain deferred until a
+consumer needs them; `ui-review-state` is covered by the reviewed/needs-review
+state modifiers.
+
+Why it matters: serious apps spend a lot of time in states like saving, saved,
+queued, offline, stale, retrying, conflicted, locked, reviewed, and background
+job running. These states are usually improvised per product, so even good apps
+feel inconsistent. Still deferred: `ui-job` (background progress) and
+`ui-conflict` (resolution affordances), each until a consumer needs it.
+
+### 3. Command-first UI — ✅ shipped in 0.5.0
+
+The keyboard-hint primitive (`.ui-shortcut` + `.ui-shortcut__sep` over `.ui-kbd`,
+core chrome) landed first, then the `ui-command` palette: the
+`@ponchia/ui/css/command.css` shell + the `initCommand` `data-bronto-command`
+behavior (filter, roving focus, `bronto:command:select`/`close`) + `useCommand`
+bindings. The host still owns the action registry and execution — Bronto only
+filters and navigates.
+
+Why it matters: command palettes turn a product from a page collection into a
+tool. Existing libraries such as cmdk and kbar are good, but Bronto can own the
+design-system contract: shortcuts, actions, groups, disabled reasons, context,
+and command result feedback. The host still owns the action registry and
+execution; global Cmd/Ctrl+K stays opt-in by design.
+
+### 4. Workbench UI — 🟡 inspector / property / selectionbar shipped in 0.5.0
+
+Shipped as `@ponchia/ui/css/workbench.css` (`ui-inspector`, `ui-property`,
+`ui-selectionbar`) — the low-risk CSS core below. Resizable split panes
+(`ui-splitter`, an ARIA window-splitter behavior) and drag handles remain
+deferred until a consumer needs them.
+
+Why it matters: real tools need inspectors, object action bars, split panes,
+resize handles, property rows, dense trees, and selected-object affordances.
+Generic UI kits tend to stop at cards/tables/forms, leaving every app to build
+its own half-consistent workbench. Still open: a `ui-splitter` ARIA
+window-splitter behavior (focusable separator, `aria-valuemin/max/now`,
+arrow-key resize) and drag/drop affordances — both deferred, and Bronto should
+style drag handles, not become a drag-and-drop framework.
+
+### 5. Generated-content and AI trust primitives — 🟡 shipped in 0.5.0
+
+Shipped as `@ponchia/ui/css/generated.css` (`ui-generated`, `ui-origin-label`,
+`ui-reasoning`, `ui-tool-log` / `ui-tool-call`) — the origin/provenance labels,
+generated-content wrapper, and tool-call log of the "good first build" below.
+Chat-thread components and a `ui-confidence` widget are intentionally not shipped.
+
+Why it matters: AI interfaces are becoming common, but most UI systems either
+ship chat bubbles or nothing. Bronto should not become a chat framework. It
+should own the trust surfaces around generated content. The host still owns model
+metadata, tool execution, traces, redaction, and safety; chat-thread components
+and a `ui-confidence` widget are intentionally not shipped (never fabricate a
+precision signal the product does not have).
+
+## Priority
+
+The CSS cores of candidates 1–5 shipped in 0.5.0, the 2026 scout batch shipped
+in PRs #97/#100, and scout batch #2 (textref / bullet / term / toc / tree)
+shipped 2026-06-04. The remaining active work, in order:
+
+1. `ui-job` / `ui-conflict` lifecycle surfaces (candidate 2).
+2. The `ui-splitter` ARIA window-splitter behavior + drag affordances
+   (candidate 4) — also the gating consumer for `ui-tree`'s deferred roving-focus
+   tree kernel.
+
+Deferred items stay gated on a real consumer needing them. This order keeps
+Bronto differentiated while staying inside its core philosophy: small,
+framework-agnostic primitives that make complex interfaces clearer.
+
+## Inspiration watchlist
+
+These are examples of the kind of older or under-supported work worth mining for
+ideas. They are not dependency recommendations; the useful part is the shape of
+the primitive, not the implementation stack.
+
+| Project | Useful idea | Bronto-shaped lesson |
+| --- | --- | --- |
+| Susie Lu `d3-annotation` | Subject / connector / note grammar for explaining SVG figures. | Keep annotation as a grammar, not a chart engine or editor. |
+| Susie Lu `d3-legend` | Colour, size, and symbol legends as reusable figure keys. | Legends belong in the design system because they explain visual encodings. |
+| Twitter `labella.js` | One-dimensional label collision avoidance for timelines and dense axes. | A tiny `declutterLabels` helper can be more valuable than another component. |
+| `D3-Labeler` / `d3fc-label-layout` | Greedy/simulated-annealing label placement. | Direct labels need layout helpers; host still owns chart scales and data. |
+| `d3-lasso` | Possible / not-possible / selected / not-selected states while drawing a region. | Bronto should own selection vocabulary and maybe region visuals, not hit-testing. |
+| `leader-line` / `react-xarrows` | Lines and arrows between DOM elements. | DOMRect connectors are broadly useful, but should be styleable and token-bound. |
+| LinkedIn `hopscotch` / `chardin.js` | Guided tours as target + note + step metadata. | Bronto should own spotlight visuals, not the tour state machine. |
+| `Waypoints` / `gumshoe` | Scroll-triggered section awareness and scrollspy navigation. | Long documents and reports may need section-progress/navigation affordances. |
+| `mark.js`, `Rangy`, `TextHighlighter` | Search hits, user text selections, persistent text highlights. | Evidence/source marks need careful semantics around ranges and generated content. |
+| `Mousetrap` / `Keypress` | Keyboard shortcut grammar and key sequences. | Command-first UI needs shortcut display and action dispatch boundaries. |
+| `Split.js` | Small, unopinionated resizable split views. | Workbench panes are worth styling; behavior must follow accessible splitter rules. |
+| jQuery Steps / old wizard plugins | Multi-step flows with progress, validation, and branching. | If Bronto adds stepper/wizard UI, it should be state vocabulary first. |
+| `progressbar.js` | Lightweight progress shapes and determinate/indeterminate motion. | Lifecycle/job UI should make long-running work persistent and legible. |
+| `react-json-view` / old JSON viewers | Inspectable structured data with collapse/copy/path affordances. | Generated/tool output needs compact inspector primitives without a React lock-in. |
+| old diff viewers / `jsdifflib` | Side-by-side and inline change explanation. | Becoming `ui-diff` (2026 batch): Bronto paints the row/gutter grammar, the host pre-classifies rows — parsing and alignment stay outside Bronto. |

package/docs/glyphs.md

@@ -0,0 +1,114 @@
+# Display glyphs
+
+`@ponchia/ui/glyphs` is a small, frozen bitmap icon set rendered on the same
+`.ui-dotmatrix` dot primitive as every other dot surface (see `docs/dots.md`).
+CSS-first to the core: a glyph is just a grid of dot cells — `.` off, `#` hot,
+`*` accent — so it re-skins with the same `--field-dot*` tokens and the Tier-3
+display knobs as the rest of the dot family. No icon font, no SVG sprite, no
+runtime dependency. The module is side-effect-free and SSR-safe (`renderGlyph`
+returns a string; nothing touches the DOM).
+
+```js
+import { renderGlyph } from '@ponchia/ui/glyphs';
+el.innerHTML = renderGlyph('check', { label: 'Done' });
+```
+
+The authoritative API is the generated, CI-drift-checked `glyphs/glyphs.d.ts`.
+Read it before guessing a name — `GlyphName` is a literal union, so a typo is a
+type error.
+
+## Three render paths
+
+A glyph can be drawn three ways; pick by size regime.
+
+| Path | Call | DOM | When |
+| --- | --- | --- | --- |
+| Dot display | `renderGlyph(name)` | `GLYPH_SIZE²` cells (256) | the signature dot-matrix look at display sizes |
+| Solid pixel | `renderGlyph(name, { solid: true })` | 256 cells, fused | legible crisp icon at small/inline sizes (~16–24px) |
+| Mask icon | `renderGlyph(name, { render: 'mask' })` | **one** `.ui-icon` node | icon-at-scale (e.g. one per table row): inherits `currentColor`, scales with the text |
+
+The mask path is the lightest — one node instead of 256 — and the right default
+for an icon repeated many times. It is single-tone: an accent `*` cell renders
+the same as a hot `#` cell (both become opaque mask regions).
+
+> Pixel-crisp sizes: the bitmap is a 16-unit grid, so the dot/solid paths look
+> sharpest at integer multiples (16/32/48/64px). The mask path scales smoothly
+> with the text; arbitrary `em` sizes soften the edges slightly, which is fine
+> for inline use.
+
+### `renderGlyph(name, options)`
+
+| Option | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `grid` | boolean | `true` | show the unlit panel dots; `false` → glyph-only |
+| `solid` | boolean | `false` | square, gapless pixels (implies glyph-only) |
+| `anim` | `'reveal' \| 'pulse'` | — | decorative animation (reduced-motion-safe) |
+| `label` | string | — | expose as `role="img"` with this name; omit → decorative (`aria-hidden`) |
+| `dot` | CSS length | `0.08em` | one dot size (`--dotmatrix-dot`; sanitized) |
+| `gap` | CSS length | — | gap between dots (`--dotmatrix-gap`; sanitized) |
+| `render` | `'mask'` | — | the one-node `.ui-icon` path |
+| `size` | CSS length | `1em` | with `render: 'mask'`, the icon size (`--icon-size`) |
+
+## Big numeric readout — `renderReadout`
+
+Compose digits and punctuation into a row of dot-matrix glyphs — the
+Nothing-style hero numeric for a KPI, clock, countdown, or percentage.
+
+```js
+import { renderReadout } from '@ponchia/ui/glyphs';
+el.innerHTML = renderReadout('12:48', { label: '12:48 remaining' });
+el.innerHTML = renderReadout('73%', { label: '73 percent of quota', render: 'mask' });
+```
+
+Recognised characters: `0-9`, `:`, `,`, `.`, `%`, `-`, `+`, and space (a blank
+advance). Anything else is skipped. Every per-glyph option (`solid`, `render`,
+`dot`, `gap`, `anim`) passes through to each character; `gap` sets the spacing
+between characters. The digits are decorative — the readout's **value** is its
+accessible name, so pass a `label` (it defaults to the raw text). Output wraps
+in `.ui-readout` (see `docs/dots.md`).
+
+## Finding a glyph — `findGlyphs` / `GLYPH_TAGS`
+
+Names follow the "depict, don't name the purpose" convention (`trash`, not
+`delete`). `findGlyphs(query)` resolves an intent word to real names by matching
+the name OR a curated search alias (`GLYPH_TAGS`), case-insensitively:
+
+```js
+import { findGlyphs } from '@ponchia/ui/glyphs';
+findGlyphs('delete'); // → ['trash']
+findGlyphs('chart'); // → ['bar-chart']
+findGlyphs(''); // → every name
+```
+
+## DOM placeholders — `initDotGlyph`
+
+When you would rather drop a placeholder than inline markup, the optional
+`initDotGlyph` behavior (`@ponchia/ui/behaviors`) expands
+`[data-bronto-glyph="name"]` in place. It is idempotent and returns a cleanup.
+
+| Attribute | Value | Effect |
+| --- | --- | --- |
+| `data-bronto-glyph` | glyph name | expand into a `.ui-dotmatrix` grid |
+| `data-bronto-glyph-label` | text | expose as `role="img"`; omit → decorative |
+| `data-bronto-glyph-solid` | — | square, gapless pixel glyph |
+| `data-bronto-glyph-anim` | `reveal \| pulse` | decorative animation |
+| `data-bronto-glyph-render` | `mask` | the one-node `.ui-icon` path (not 256 cells) |
+| `data-bronto-glyph-size` | CSS length | with `render="mask"`, sets `--icon-size` |
+
+An unknown name is left untouched.
+
+## Accessibility
+
+- A glyph next to a text label is redundant → keep it decorative (`aria-hidden`,
+  the default).
+- An icon-only control labels the **control** (`aria-label` on the `<button>`),
+  not the glyph.
+- A standalone meaningful glyph passes `label` → `role="img"` + `aria-label`.
+- A cell-mode glyph is a sea of 256 nodes; the wrapper carries the single
+  `role="img"`/`aria-hidden`, so assistive tech never walks the cells.
+
+## Two-tone glyphs
+
+The accent (`*`) tone lifts one feature of a glyph onto `--field-dot-accent`.
+The curated two-tone set is `spark`, `warning`, and `info`; every other glyph is
+monotone. Two-tone only shows in the cell render — the mask path is single-tone.