anentrypoint-design 0.0.447 → 0.0.449

package/dist/247420.css

@@ -805,9 +805,9 @@
 /* app-shell.css */
 /* ============================================================
    247420 design system — component sheet
-   "Acid Editorial": system-font display + body + mono, no custom web fonts.
-   Confident hierarchy, asymmetric grid tension, print texture over glow,
-   one electric lead accent. Indicator rails over hairlines.
+   shadcn-neutral: system-font display + body + mono, no custom web fonts.
+   Confident hierarchy, centered editorial stack, neutral grayscale accent.
+   Indicator rails over hairlines.
    ============================================================ */
 
 /* ============================================================
@@ -971,6 +971,17 @@
   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). */
+.ds-247420 h1 + .lede, .ds-247420 h1 + .t-lede, .ds-247420 h2 + .lede, .ds-247420 h2 + .t-lede, .ds-247420 h3 + .lede, .ds-247420 h3 + .t-lede, .ds-247420 .t-h1 + .lede, .ds-247420 .t-h1 + .t-lede {
+  margin-top: var(--space-2);
+}
+
 .ds-247420 .eyebrow {
   font-family: var(--ff-mono);
   font-size: var(--fs-tiny);
@@ -1707,6 +1718,18 @@
 }
 .ds-247420 .panel.panel-inline { background: var(--bg-2); padding: var(--space-3) var(--space-3); }
 .ds-247420 .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. */
+.ds-247420 .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
@@ -1848,6 +1871,46 @@
 /* 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. */
 .ds-247420 .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. */
+.ds-247420 .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);
+}
+.ds-247420 .row:has(.meta.dim):has(.ds-row-arrow) .title { grid-column: 1; grid-row: 1; }
+.ds-247420 .row:has(.meta.dim):has(.ds-row-arrow) .ds-row-arrow { grid-column: 2; grid-row: 1; }
+.ds-247420 .row:has(.meta.dim):has(.ds-row-arrow) .meta.dim { grid-column: 1 / -1; grid-row: 2; }
+.ds-247420 .row .meta.dim {
+  white-space: normal;
+  min-width: 0;
+  text-align: left;
+}
+.ds-247420 .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;
+}
+.ds-247420 a.row:hover .ds-row-arrow, .ds-247420 .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
@@ -2105,6 +2168,15 @@
   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);
 }
 .ds-247420 table.kv td:last-child {
   font-weight: 600;
@@ -2174,6 +2246,18 @@
 .ds-247420 .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-247420 .ds-changelog-row .title {
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
 
 /* ============================================================
    Works
@@ -4506,7 +4590,7 @@
   width: 100%; height: 0; border: 0;
 }
 .ds-247420 hr.rule { border-top: 1px solid var(--rule); }
-.ds-247420 hr.rule-double { border-top: 3px double var(--rule-strong); }
+.ds-247420 hr.rule-double { border-top: 4px double var(--rule-strong); }
 .ds-247420 hr.rule-dotted { border-top: 1px dotted var(--rule-strong); }
 
 /* Hairline-only text input — no box, no fill. A single bottom rule that