anentrypoint-design 0.0.445 → 0.0.448

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.445",
+  "version": "0.0.448",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/content/charts.js

@@ -6,23 +6,33 @@ import * as webjsx from '../../../vendor/webjsx/index.js';
 import { Icon } from '../shell.js';
 const h = webjsx.createElement;
 
-// items: [n, label] or [n, label, {delta, tone: 'up'|'down', spark: number[]}]
+// items: [n, label] or [n, label, {delta, tone: 'up'|'down', spark: number[], invert}]
 // meta is optional and additive — every existing 2-tuple call site is untouched.
+// `tone` always drives the arrow glyph (it mirrors the delta's own arithmetic
+// sign, so the arrow never contradicts the figure beside it). `invert` is a
+// separate, optional per-metric flag for "lower is better" metrics (error
+// rate, latency, p95, etc.): when set, the good/bad COLOR polarity flips
+// relative to tone while the arrow direction is left alone — a rising error
+// rate still shows an up-arrow (the number went up) but in the bad/danger
+// color, not the good/success color the raw arithmetic sign would imply.
 export function Kpi({ items = [], emptyText = 'no metrics yet' }) {
     if (!items.length) return h('div', { class: 'empty' }, emptyText);
-    return h('div', { class: 'kpi' }, ...items.map(([n, l, meta], i) =>
-        h('div', { key: i, class: 'kpi-card' },
+    return h('div', { class: 'kpi' }, ...items.map(([n, l, meta], i) => {
+        const isUp = meta && meta.tone !== 'down';
+        const good = meta && meta.invert ? !isUp : isUp;
+        return h('div', { key: i, class: 'kpi-card' },
             h('div', { class: 'num' }, String(n)),
             h('div', { class: 'lbl' }, l),
             meta && (meta.delta != null || meta.spark)
                 ? h('div', { class: 'kpi-foot' },
                     meta.delta != null
-                        ? h('span', { class: 'kpi-delta kpi-delta-' + (meta.tone === 'down' ? 'down' : 'up') },
-                            Icon(meta.tone === 'down' ? 'arrow-down' : 'arrow-up', { size: 12 }),
+                        ? h('span', { class: 'kpi-delta kpi-delta-' + (good ? 'up' : 'down') },
+                            Icon(isUp ? 'arrow-up' : 'arrow-down', { size: 12 }),
                             String(meta.delta))
                         : null,
-                    meta.spark ? Sparkline({ values: meta.spark, tone: meta.tone }) : null)
-                : null)));
+                    meta.spark ? Sparkline({ values: meta.spark, tone: good ? 'up' : 'down' }) : null)
+                : null);
+    }));
 }
 
 // Minimal inline SVG trend line — token-stroke only, no raw color literals.

package/src/css/app-shell/base.css

@@ -166,6 +166,20 @@ h4, .t-h4 { font-family: var(--ff-display); font-size: var(--fs-h4); line-height
   margin: 0;
 }
 
+/* h1/h2/h3/h4 and .lede/.t-lede are both margin:0 primitives by design (a
+   heading used standalone must not force space its context doesn't want).
+   But a heading immediately followed by a lede is a named pairing, not two
+   independent primitives that happen to be adjacent -- it needs its own gap
+   regardless of whether the surrounding shell opts into .ds-app-surface
+   (which only adds this spacing on landing/marketing surfaces, leaving every
+   Operate-mode kit that skips that class with a zero-gap heading+subtitle). */
+h1 + .lede, h1 + .t-lede,
+h2 + .lede, h2 + .t-lede,
+h3 + .lede, h3 + .t-lede,
+.t-h1 + .lede, .t-h1 + .t-lede {
+  margin-top: var(--space-2);
+}
+
 .eyebrow {
   font-family: var(--ff-mono);
   font-size: var(--fs-tiny);

package/src/css/app-shell/hero-content.css

@@ -207,6 +207,15 @@ table.kv td:first-child {
   font-size: var(--fs-xs);
   text-transform: uppercase; letter-spacing: var(--tr-caps);
   width: 14ch;
+  /* The 14ch column width is a target, not a guarantee — a label whose
+     uppercase-transformed width fills the column exactly (e.g. "environment")
+     leaves zero slack before the value cell, so label and value render with
+     no visible gap between them ("ENVIRONMENTproduction") while shorter
+     labels (region, build, by) are saved only by leftover column slack.
+     An explicit right-side padding guarantees a gap regardless of label
+     length, instead of relying on slack that a long label can consume
+     entirely. */
+  padding-right: var(--space-3);
 }
 table.kv td:last-child {
   font-weight: 600;
@@ -276,6 +285,18 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .ds-changelog-ver {
   font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-sm);
 }
+/* Belt-and-suspenders for the message column: `.row .title` (panel-row.css)
+   is already `white-space: normal` (no nowrap/ellipsis), so long entries wrap
+   by word as expected whenever the message track has any real width. This
+   only matters in the narrow zone between "row still on 3 columns" and the
+   panel's own `@container` breakpoint kicking in (see .panel-wide's new
+   container-type in panel-row.css) — overflow-wrap:anywhere is the fallback
+   so a single long unbroken token still wraps instead of overflowing the
+   track, rather than depending solely on the breakpoint transition. */
+.ds-changelog-row .title {
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
 
 /* ============================================================
    Works

package/src/css/app-shell/panel-row.css

@@ -27,6 +27,18 @@
 }
 .panel.panel-inline { background: var(--bg-2); padding: var(--space-3) var(--space-3); }
 .panel.panel-wide   { background: transparent; box-shadow: none; border: none; }
+/* Changelog (and any other panel-wide content) needs its OWN container-query
+   context: the existing `@container (max-width: 760px) .ds-changelog-row`
+   rule in hero-content.css measures the nearest CQ ancestor, which without
+   this is `.app`/`.ds-stage` (base.css) — the whole shell width, not this
+   panel's actual rendered width. A changelog panel sitting inside
+   .ds-panel-trio (three equal siblings) can be far narrower than 760px
+   while the shell itself stays well over that, so the row-collapse rule
+   never engages and the message column's `minmax(0, 1fr)` track collapses
+   to 0 — the text then renders past the panel's right edge, clipped
+   mid-word instead of wrapping. Scoping the container here (not on
+   .panel generally) keeps the blast radius to panel-wide content only. */
+.panel.panel-wide   { container-type: inline-size; }
 /* Dense panel — a compact container for app surfaces (inspector sections,
    sidebars) that want the .panel look without the roomy 16px pad + 24px stack
    gap. Tighter corner + padding + head, so it sits between .panel and the
@@ -168,6 +180,46 @@ a.row:hover .meta, .row[role="button"]:hover .meta { color: var(--accent-ink); t
 /* A row with no leading code/index drops the empty first column so the title
    takes the full width instead of wrapping in the narrow code gutter. */
 .row.row-nocode { grid-template-columns: minmax(0, 1fr) auto; }
+/* Template-rendered index/example rows (site/theme.mjs "why design" +
+   "live examples" panels, via panelNode()/examplesNode() in
+   src/page-html/client-script.js) never emit a leading ".code" span for
+   these entries (no `code` field on the "features" items), so their actual
+   children are title + an inline ".meta.dim" description + a trailing
+   ".ds-row-arrow" — three items, but with no ".code" as the first child the
+   base 3-track .row grid (minmax(80px,12ch) / minmax(0,1fr) / auto) still
+   places the FIRST item (the title) into the narrow 12ch leading track
+   meant for a code index, not the 1fr track. ".ds-row-arrow" also had no
+   rule at all, and ".meta" is nowrap by default, so on longer descriptions
+   ("…never borders", "…--fs-* tokens") the un-wrapped text overflows its
+   cramped column straight into the arrow's box. Rows carrying both a dim
+   meta description and an arrow get their own two-row template instead:
+   title + arrow share row 1, the description drops to its own full-width
+   row 2 and wraps normally — matching how every other multi-line row
+   pattern in this file (.ds-row-detail) already gets a dedicated line. */
+.row:has(.meta.dim):has(.ds-row-arrow) {
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto auto;
+  row-gap: var(--space-1);
+}
+.row:has(.meta.dim):has(.ds-row-arrow) .title { grid-column: 1; grid-row: 1; }
+.row:has(.meta.dim):has(.ds-row-arrow) .ds-row-arrow { grid-column: 2; grid-row: 1; }
+.row:has(.meta.dim):has(.ds-row-arrow) .meta.dim { grid-column: 1 / -1; grid-row: 2; }
+.row .meta.dim {
+  white-space: normal;
+  min-width: 0;
+  text-align: left;
+}
+.ds-row-arrow {
+  font-family: var(--ff-mono);
+  font-size: var(--fs-xs);
+  color: var(--fg-3);
+  white-space: nowrap;
+  align-self: center;
+  justify-self: end;
+}
+a.row:hover .ds-row-arrow, .row[role="button"]:hover .ds-row-arrow {
+  color: var(--accent-ink);
+}
 
 /* `.row-code` / `.row-title` / `.row-meta` are the BEM-ish spelling of the same
    three cells as `.code` / `.title` / `.meta`. Both spellings are live in the

package/src/css/app-shell/states-interactions.css

@@ -381,7 +381,7 @@ hr.rule, hr.rule-double, hr.rule-dotted {
   width: 100%; height: 0; border: 0;
 }
 hr.rule { border-top: 1px solid var(--rule); }
-hr.rule-double { border-top: 3px double var(--rule-strong); }
+hr.rule-double { border-top: 4px double var(--rule-strong); }
 hr.rule-dotted { border-top: 1px dotted var(--rule-strong); }
 
 /* Hairline-only text input — no box, no fill. A single bottom rule that