anentrypoint-design 0.0.383 → 0.0.385

package/src/css/app-shell/chat-polish.css

@@ -55,7 +55,7 @@
   width: 36px; height: 36px; flex-shrink: 0;
   border-radius: 50%; background: var(--bg-3); color: var(--fg);
   display: inline-flex; align-items: center; justify-content: center;
-  font-family: var(--ff-mono); font-size: 12px; font-weight: 600;
+  font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 600;
   text-transform: lowercase; letter-spacing: 0.02em; user-select: none;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
   position: relative;
@@ -96,6 +96,9 @@
   border: 1px solid color-mix(in oklab, var(--mascot) 28%, transparent);
 }
 .chat-bubble code {
+  /* em-relative on purpose: inline code tracks the size of the prose it sits
+     inside (the mono face runs optically large next to the system stack, hence
+     0.92). An absolute --fs-* tier would decouple it from its own paragraph. */
   font-family: var(--ff-mono); font-size: 0.92em;
   background: color-mix(in oklab, var(--fg) 10%, transparent);
   /* 1px block is deliberately under --space-hair (2px): inline <code> must not
@@ -122,6 +125,11 @@
   font-family: var(--ff-body); font-weight: 600;
   margin: var(--space-2) 0 var(--space-1); line-height: var(--lh-snug);
 }
+/* em-relative on purpose, NOT --fs-h1..h3: markdown headings inside a chat
+   bubble are a hierarchy WITHIN the bubble's own type size, not page headings.
+   The --fs-h* tiers are fluid clamp()s tuned to page container queries and
+   would render a bubble heading at 34px+, dwarfing the message it labels.
+   These stay a tight ratio ladder off whatever size the bubble is set at. */
 .chat-bubble.chat-md h1 { font-size: 1.15em; }
 .chat-bubble.chat-md h2 { font-size: 1.08em; }
 .chat-bubble.chat-md h3 { font-size: 1.04em; }
@@ -158,7 +166,7 @@
 }
 /* Markdown tables + horizontal rules: agents routinely emit them, but they were
    unstyled (bare unspaced cells, vanished rules). */
-.chat-bubble.chat-md table { border-collapse: collapse; width: auto; max-width: 100%; margin: var(--space-2) 0; font-size: .95em; display: block; overflow-x: auto; }
+.chat-bubble.chat-md table { border-collapse: collapse; width: auto; max-width: 100%; margin: var(--space-2) 0; font-size: .95em; /* em-relative: a table inside a bubble reads one notch down from the bubble's own copy, not off an absolute tier */ display: block; overflow-x: auto; }
 .chat-bubble.chat-md th,
 .chat-bubble.chat-md td { border: var(--bw-hair) solid var(--rule); padding: var(--space-1) var(--space-2-5); text-align: left; }
 .chat-bubble.chat-md th { background: color-mix(in oklab, var(--fg) 5%, transparent); font-weight: 600; }
@@ -268,6 +276,9 @@
 }
 .chat-file:hover { background: var(--bg-3); }
 .chat-file .glyph {
+  /* 22px is the ICON size inside a 36px chip — matched to the chip box, not to
+     the type scale (--fs-xl is 21px, and above it every rung is a fluid
+     heading clamp). Snapping it visibly resizes the mark. */
   font-size: 22px; width: 36px; height: 36px;
   display: inline-flex; align-items: center; justify-content: center;
   background: var(--bg-3);
@@ -280,7 +291,7 @@
 }
 .chat-file .meta { display: flex; flex-direction: column; gap: var(--space-hair); min-width: 0; flex: 1; }
 .chat-file .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
-.chat-file .go { font-family: var(--ff-mono); font-size: 16px; color: var(--fg-3); flex-shrink: 0; }
+.chat-file .go { font-family: var(--ff-mono); font-size: var(--fs-body); color: var(--fg-3); flex-shrink: 0; }
 .chat-file:hover .go { color: var(--accent-ink); }
 
 .chat-msg.you .chat-pdf,
@@ -298,7 +309,7 @@
   background: color-mix(in oklab, var(--fg) 5%, var(--bg-2));
   border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
 }
-.chat-pdf-head .glyph { font-size: 18px; color: var(--mascot); flex-shrink: 0; }
+.chat-pdf-head .glyph { font-size: var(--fs-lg); color: var(--mascot); flex-shrink: 0; }
 .chat-pdf-head .name { flex: 1; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .chat-pdf-head .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
 .chat-pdf-head a { color: var(--accent-ink); font-family: var(--ff-mono); font-size: var(--fs-xs); text-decoration: none; }
@@ -357,8 +368,8 @@
   border-color: color-mix(in oklab, var(--accent) 55%, transparent);
   color: var(--accent-ink);
 }
-.chat-reactions .rxn .e { font-size: 14px; line-height: 1; }
-.chat-reactions .rxn .n { font-family: var(--ff-mono); font-weight: 600; font-size: 11px; color: var(--fg-2); }
+.chat-reactions .rxn .e { font-size: var(--fs-xs); line-height: 1; }
+.chat-reactions .rxn .n { font-family: var(--ff-mono); font-weight: 600; font-size: var(--fs-nano); color: var(--fg-2); }
 .chat-reactions .rxn.you .n { color: var(--accent-ink); }
 
 .chat-typing { display: inline-flex; gap: var(--space-1); align-items: center; }
@@ -485,6 +496,7 @@
 
 .aicat-portrait { display: inline-flex; align-items: center; gap: var(--space-2-5); padding: var(--space-1) 0; }
 .aicat-face {
+  /* 24px is the ICON size inside a 32px round chip — see .chat-file .glyph. */
   width: 32px; height: 32px; font-size: 24px;
   display: inline-flex; align-items: center; justify-content: center;
   background: color-mix(in oklab, var(--mascot) 22%, var(--bg-2));

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

@@ -128,7 +128,7 @@
 /* File icon — glyph chip, tinted per type. */
 .ds-file-icon {
   display: inline-flex; align-items: center; justify-content: center;
-  width: 26px; height: 26px; font-size: 15px; line-height: 1;
+  width: 26px; height: 26px; font-size: var(--fs-sm); line-height: 1;
   color: var(--fg-2);
 }
 .ds-file-row[data-file-type="dir"]      .ds-file-icon { color: var(--accent-ink); }
@@ -152,7 +152,7 @@
   display: inline-flex; align-items: center; justify-content: center;
   width: 28px; height: 28px; padding: 0;
   background: transparent; border: 0; border-radius: var(--r-1);
-  color: var(--fg-3); font-size: 14px; cursor: pointer;
+  color: var(--fg-3); font-size: var(--fs-xs); cursor: pointer;
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
 .ds-file-act:hover { background: var(--bg-3); color: var(--fg); }
@@ -251,7 +251,7 @@
 .ds-file-grid[data-density="compact"] .ds-file-row { padding: var(--space-1-5) var(--space-2-75); gap: var(--space-2-5); }
 .ds-file-grid[data-density="compact"] .ds-file-row .title { font-size: var(--fs-xs); }
 .ds-file-grid[data-density="compact"] .ds-file-row .ds-file-meta { font-size: var(--fs-micro); }
-.ds-file-grid[data-density="compact"] .ds-file-icon { width: 20px; height: 20px; font-size: 13px; }
+.ds-file-grid[data-density="compact"] .ds-file-icon { width: 20px; height: 20px; font-size: var(--fs-tiny); }
 
 /* Thumbnail density — tile grid; image entries carry a real lazy thumbnail. */
 .ds-file-grid-thumb {
@@ -291,6 +291,10 @@
   width: 100%; aspect-ratio: 4 / 3;
   background: var(--bg-2); border-radius: var(--r-1); overflow: hidden;
 }
+/* 24px is the ICON size inside a 34px chip, not a type tier — it is matched to
+   the chip box, not to the text scale (the --fs-* rungs jump 21px -> fluid
+   heading clamps, so neither substitutes without resizing the icon). Same
+   reasoning for the other four .ds-*-glyph rules in this sheet. */
 .ds-file-cell-media .ds-file-icon { width: 34px; height: 34px; font-size: 24px; }
 .ds-file-cell-thumb { width: 100%; height: 100%; object-fit: cover; }
 /* Per-type icon tints on thumb tiles so the grid keeps the colour-coding the
@@ -434,6 +438,7 @@
   gap: var(--space-2); flex-wrap: wrap;
   padding: var(--space-4) var(--space-3); text-align: center;
 }
+/* Icon size, not type — see .ds-file-cell-media .ds-file-icon above. */
 .ds-dropzone-glyph { font-size: 22px; color: var(--fg-3); }
 .ds-dropzone-label { font-size: var(--fs-sm); color: var(--fg-3); }
 .ds-dropzone.dragover {
@@ -542,6 +547,7 @@
   gap: var(--space-2); padding: var(--space-6) var(--space-3);
   color: var(--fg-3); text-align: center;
 }
+/* Icon size, not type — see .ds-file-cell-media .ds-file-icon above. */
 .ds-file-empty-glyph { font-size: 34px; opacity: 0.55; }
 .ds-file-empty-text { font-size: var(--fs-sm); }
 
@@ -597,7 +603,11 @@
   font-family: inherit; font-size: var(--fs-sm);
 }
 .ds-modal-input:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-/* iOS auto-zooms inputs under 16px on focus, breaking the modal layout. */
+/* iOS auto-zooms inputs under 16px on focus, breaking the modal layout.
+   Deliberately a literal, NOT var(--fs-body): --fs-body is re-declared to
+   15px under [data-typescale="sm"], which would silently drop this input back
+   under the zoom threshold on any density-reduced page. The 16px here is a
+   platform constant, not a point on the type scale. */
 @media (hover: none), (pointer: coarse) {
   .ds-modal-input { font-size: 16px; min-height: 44px; }
 }
@@ -694,6 +704,7 @@
   display: flex; flex-direction: column; align-items: center; justify-content: center;
   gap: var(--space-2); padding: var(--space-6); color: var(--fg-3);
 }
+/* Icon size, not type — see .ds-file-cell-media .ds-file-icon above. */
 .ds-preview-glyph { font-size: 34px; opacity: 0.6; }
 
 /* Thin scrollbars inside preview bodies. */

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

@@ -41,6 +41,11 @@
 .ds-hero-stat:last-child { border-bottom: 0; padding-bottom: 0; }
 .ds-hero-title {
   font-family: var(--ff-display); font-weight: 700;
+  /* Bespoke display clamp, deliberately off the --fs-* ladder: --fs-hero is
+     clamp(42px,7cqi,96px) and --fs-mega is clamp(56px,11cqi,168px). This lead
+     runs a steeper 9cqi slope with a LOWER 40px floor so a two-line 16ch title
+     still fits a narrow column, and a 116px ceiling between the two tiers.
+     Snapping to either changes the hero's whole optical weight. */
   font-size: clamp(40px, 9cqi, 116px);
   line-height: 0.96; letter-spacing: var(--tr-tighter);
   margin: 0; max-width: 16ch; text-wrap: balance;
@@ -84,6 +89,12 @@
 .ds-section-compact { margin-top: 0; margin-bottom: var(--space-4); }
 .ds-section > h3 {
   font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-h3);
+  /* Zero top margin looks like it inverts the more-space-above-than-below rule,
+     but it does not: this h3 is always the section's first child and .ds-section
+     itself carries the --space-8 (96px) lead, so the effective space above is
+     96px against 32px below. Adding a top margin here would double the lead.
+     Measured live on project_page: gapAboveInSection 0 with the section margin
+     supplying the separation, gapBelow 32. */
   margin: 0 0 var(--space-5);
   letter-spacing: -0.01em;
 }
@@ -175,7 +186,7 @@
 }
 .ds-cli-row {
   display: flex; gap: 10px;
-  font-family: var(--ff-mono); font-size: 13px; line-height: 1.6;
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1.6;
   padding: 3px 0;
 }
 .ds-cli-row .prompt { color: var(--green-2); flex: 0 0 auto; user-select: none; }
@@ -254,6 +265,16 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
    Changelog
    ============================================================ */
 .ds-changelog-row {
+  /* The !important is load-bearing and was empirically confirmed so -- do not
+     remove it on a specificity argument. A changelog row carries three tracks
+     (date, version, message) where a plain .row carries two, and the responsive
+     blocks in responsive.css legitimately rewrite .row's template at several
+     breakpoints. Those blocks are later in the cascade, so at tablet width the
+     two-track override wins on source order and collapses the version column:
+     measured live, removing this flag changes the computed template from
+     "120.75px 77.625px 70.125px" to "103.5px 0px 165px" -- a zero-width column
+     and the version silently gone. Scoping to .app does not help, because the
+     competing rules would need to be scoped in lockstep. */
   grid-template-columns: minmax(110px, 14ch) minmax(60px, 9ch) minmax(0, 1fr) !important;
 }
 .ds-changelog-ver {
@@ -309,6 +330,10 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 }
 .kpi-card .num {
   font-family: var(--ff-body); font-weight: 600;
+  /* Numeric display size, not a heading tier: --fs-h4 is clamp(19px,1.8cqi,
+     24px) — too small and too flat a slope for a KPI figure that must read as
+     the loudest thing in its card, and --fs-h3 (22/30) tops out short of 32.
+     Deliberate off-scale value tuned to the .kpi-card box. */
   font-size: clamp(22px, 3cqi, 32px); line-height: 1;
   letter-spacing: var(--tr-tight);
 }

package/src/css/app-shell/kits-appended.css

@@ -261,7 +261,7 @@
 }
 .ds-err-path {
   display: inline-flex; gap: var(--space-1-75); align-items: baseline; flex-wrap: wrap; max-width: 100%;
-  font-family: var(--ff-mono); font-size: 13px; color: var(--panel-text-2);
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--panel-text-2);
   background: var(--panel-1); padding: var(--space-1-75) var(--space-2-75); border-radius: var(--r-0);
   overflow-wrap: anywhere; word-break: break-all;
 }
@@ -319,6 +319,9 @@
   .ds-topbar-search { flex-basis: 100%; }
 }
 .ds-empty-state { padding: clamp(var(--space-3), 5vw, var(--space-4)); text-align: center; color: var(--panel-text-3); }
+/* Fluid ICON size (empty-state mark), not a type tier: it scales with the
+   viewport between 24 and 32px. Every fluid --fs-* tier is a heading clamp
+   tuned to cqi + heading weight, so none of them substitutes here. */
 .ds-empty-state-glyph { font-size: clamp(24px, 6vw, 32px); }
 .ds-empty-state-msg { margin: var(--space-1-75) 0; }
 .ds-empty-state-hint { margin: 0; font-size: var(--fs-sm); }
@@ -338,20 +341,20 @@
 .ds-swatch-col { display: flex; flex-direction: column; gap: var(--space-1-75); }
 .ds-swatch-chip { height: 48px; border-radius: var(--r-1); border: 1px solid var(--rule); background: var(--swatch, var(--panel-1)); }
 .ds-swatch-chip--big { height: 64px; }
-.ds-swatch-name { font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); }
+.ds-swatch-name { font-family: var(--ff-mono); font-size: var(--fs-nano); color: var(--fg-3); }
 .ds-type-panel { padding: clamp(10px, 2.5vw, 14px) clamp(10px, 3vw, 18px); display: flex; flex-direction: column; gap: 14px; }
 .ds-type-row {
   display: flex; align-items: baseline; gap: 14px;
   border-bottom: 1px solid var(--rule); padding-bottom: var(--space-2); flex-wrap: wrap;
 }
-.ds-type-row-label { flex: 0 0 64px; font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); }
+.ds-type-row-label { flex: 0 0 64px; font-family: var(--ff-mono); font-size: var(--fs-nano); color: var(--fg-3); }
 .ds-type-sample {
   min-width: 0; overflow-wrap: anywhere; line-height: var(--lh-tight); color: var(--fg);
   font-size: var(--sample-size, var(--fs-body));
 }
 .ds-prim-panel { padding: clamp(10px, 2.5vw, 14px) clamp(10px, 3vw, 18px); display: flex; flex-direction: column; gap: 18px; }
 .ds-prim-row { display: flex; gap: var(--space-2-5); flex-wrap: wrap; align-items: center; }
-.ds-prim-label { flex: 0 0 64px; font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); }
+.ds-prim-label { flex: 0 0 64px; font-family: var(--ff-mono); font-size: var(--fs-nano); color: var(--fg-3); }
 
 /* == appended: content-site == */
 /* Home landing wrappers (site/theme.mjs) — replace banned inline styles. */
@@ -483,6 +486,10 @@
 /* 18px ceiling: no tier between --space-3 (16) and --space-3-5 (20). */
 .ds-auth-form { padding: clamp(var(--space-2-75), 3vw, 18px); display: flex; flex-direction: column; gap: var(--space-2-5); }
 .ds-auth-sent { align-items: center; text-align: center; }
+/* 32px is an ICON size, not a type size: this is the confirmation mark above
+   the "check your mail" copy, sized to the 440px auth column, and the --fs-*
+   scale tops out at --fs-xl (21px) before jumping to fluid clamp() heading
+   tiers. Snapping it to either would visibly resize the mark. */
 .ds-auth-sent-glyph { font-size: 32px; color: var(--panel-accent); }
 .ds-auth-sent-title { margin: 0; font-weight: 600; }
 .ds-auth-sent-sub { margin: 0; color: var(--panel-text-2); overflow-wrap: anywhere; }
@@ -490,17 +497,17 @@
 /* .ds-auth-field-label joins the kit small-label voice above, no overrides. */
 .ds-auth-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
 .ds-auth-remember { display: flex; align-items: center; gap: var(--space-1-75); cursor: pointer; }
-.ds-auth-remember-text { color: var(--panel-text-2); font-size: 13px; }
-.ds-auth-forgot { font-size: 13px; }
-.ds-auth-error { padding: var(--space-2) var(--space-2-5); background: var(--panel-1); border-radius: var(--r-0); color: var(--danger); font-size: 13px; overflow-wrap: anywhere; }
+.ds-auth-remember-text { color: var(--panel-text-2); font-size: var(--fs-tiny); }
+.ds-auth-forgot { font-size: var(--fs-tiny); }
+.ds-auth-error { padding: var(--space-2) var(--space-2-5); background: var(--panel-1); border-radius: var(--r-0); color: var(--danger); font-size: var(--fs-tiny); overflow-wrap: anywhere; }
 .ds-auth-providers { display: flex; gap: var(--space-2); flex-wrap: wrap; }
 .ds-auth-provider-btn { flex: 1 1 100px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2-5); }
 .ds-auth-provider-btn--loading { opacity: 0.7; pointer-events: none; }
 .ds-auth-provider-glyph { font-family: var(--ff-mono); color: var(--panel-text-3); display: inline-flex; }
-.ds-auth-modes { display: flex; justify-content: center; gap: 14px; /* off-scale, matches the auth form inset */ margin-top: var(--space-2); font-size: 13px; flex-wrap: wrap; }
+.ds-auth-modes { display: flex; justify-content: center; gap: 14px; /* off-scale, matches the auth form inset */ margin-top: var(--space-2); font-size: var(--fs-tiny); flex-wrap: wrap; }
 .ds-auth-mode-link { color: var(--panel-text-3); text-decoration: none; }
 .ds-auth-mode-link--active { color: var(--panel-text); text-decoration: underline; }
-.ds-auth-fineprint { text-align: center; font-size: 12px; color: var(--panel-text-3); margin: var(--space-1-75) 0; }
+.ds-auth-fineprint { text-align: center; font-size: var(--fs-micro); color: var(--panel-text-3); margin: var(--space-1-75) 0; }
 
 /* == appended: gallery-misc kit cleanup == */
 /* --- shared helpers (converted from inline styles) --- */
@@ -510,12 +517,12 @@
 .ds-kit-head { display: flex; align-items: center; justify-content: space-between; gap: clamp(var(--space-2), 2vw, var(--space-3)); flex-wrap: wrap; }
 
 /* --- gallery kit --- */
-.ds-tile-cap { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--ff-mono); white-space: pre-line; color: var(--panel-text-2); font-size: 18px; min-width: 0; text-align: center; }
-.ds-tile-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1-75); font-size: 12px; flex-wrap: wrap; min-width: 0; }
+.ds-tile-cap { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--ff-mono); white-space: pre-line; color: var(--panel-text-2); font-size: var(--fs-lg); min-width: 0; text-align: center; }
+.ds-tile-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1-75); font-size: var(--fs-micro); flex-wrap: wrap; min-width: 0; }
 .ds-tile-glyph { font-family: var(--ff-mono); color: var(--panel-text-3); }
 .ds-tile-label { color: var(--panel-text); overflow-wrap: anywhere; }
 .ds-gal-swatch { height: 64px; border-radius: var(--r-0); background: var(--swatch, var(--panel-1)); }
-.ds-gal-swatch-meta { display: flex; justify-content: space-between; gap: var(--space-1-75); flex-wrap: wrap; font-family: var(--ff-mono); font-size: 11px; min-width: 0; }
+.ds-gal-swatch-meta { display: flex; justify-content: space-between; gap: var(--space-1-75); flex-wrap: wrap; font-family: var(--ff-mono); font-size: var(--fs-nano); min-width: 0; }
 .ds-gal-swatch-name { color: var(--panel-text); }
 .ds-gal-swatch-hint { color: var(--panel-text-3); overflow-wrap: anywhere; }
 .ds-lightbox-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
@@ -574,9 +581,9 @@
   font-family: var(--ff-mono); font-weight: 600; text-transform: lowercase;
   letter-spacing: 0.02em; user-select: none; flex-shrink: 0; object-fit: cover;
 }
-.ds-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
-.ds-avatar-md { width: 36px; height: 36px; font-size: 12px; }
-.ds-avatar-lg { width: 48px; height: 48px; font-size: 15px; }
+.ds-avatar-sm { width: 24px; height: 24px; font-size: var(--fs-pico); }
+.ds-avatar-md { width: 36px; height: 36px; font-size: var(--fs-micro); }
+.ds-avatar-lg { width: 48px; height: 48px; font-size: var(--fs-sm); }
 .ds-avatar-square { border-radius: var(--r-2, 6px); }
 
 /* SpreadsheetPreview — tabbed inline spreadsheet/CSV viewer (docstudio
@@ -765,6 +772,10 @@
    same tonal chip treatment .chat-bubble code uses. */
 .ds-pattern-notes code {
   font-family: var(--ff-mono);
+  /* em-relative on purpose: inline code must track whatever size the
+     surrounding prose is set at (the mono face runs optically large next to
+     the system stack, hence 0.92). An absolute --fs-* tier would decouple it
+     from its own paragraph and break at every containing type size. */
   font-size: 0.92em;
   background: color-mix(in oklab, var(--fg) 8%, transparent);
   padding: 0 var(--space-1);