anentrypoint-design 0.0.156 → 0.0.158

package/app-shell.css

@@ -59,6 +59,12 @@ h2, .t-h2 { font-family: var(--ff-body); font-size: var(--fs-h2); line-height: v
 h3, .t-h3 { font-family: var(--ff-body); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em;          font-weight: 600; margin: 0; }
 h4, .t-h4 { font-family: var(--ff-body); font-size: var(--fs-h4); line-height: var(--lh-snug);                                  font-weight: 600; margin: 0; }
 
+/* App/chrome typescale opt-in: compact heading ceiling for application UIs. */
+[data-typescale="app"] h1, [data-typescale="app"] .t-h1 { font-size: var(--fs-h1-app); line-height: 1.15; }
+[data-typescale="app"] h2, [data-typescale="app"] .t-h2 { font-size: var(--fs-h2-app); }
+[data-typescale="app"] h3, [data-typescale="app"] .t-h3 { font-size: var(--fs-h3-app); }
+[data-typescale="app"] h4, [data-typescale="app"] .t-h4 { font-size: var(--fs-h4-app); }
+
 .t-hero    { font-family: var(--ff-body); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tr-tighter); font-weight: 600; margin: 0; }
 .t-mega    { font-family: var(--ff-body); font-size: var(--fs-mega); line-height: 0.95;            letter-spacing: var(--tr-tighter); font-weight: 600; margin: 0; }
 
@@ -149,6 +155,11 @@ pre .n { color: var(--green-2); }
 .app {
   display: flex; flex-direction: column;
   min-height: 100vh;
+  /* Definite height so the flex column resolves height:100% for descendants
+     (e.g. a full-height chat) at every breakpoint, not just where a desktop
+     media override happened to set explicit heights. dvh tracks mobile chrome. */
+  min-height: 100dvh;
+  height: 100dvh;
   background: var(--bg);
   color: var(--fg);
   /* Notched-device safe area padding (no-op on devices without notches) */
@@ -290,17 +301,22 @@ pre .n { color: var(--green-2); }
   align-self: stretch;
   height: 100%;
 }
-.app-main > * { min-height: 0; flex-shrink: 0; }
+.app-main > * { min-height: 0; }
+/* The main region scrolls its own overflow at every breakpoint (previously
+   only ≥901px), so a fixed-height .app never clips route content and inner
+   panels don't fight the page scroll. */
+.app-main { overflow-y: auto; }
 /* Reserve the scrollbar track so routes with/without overflow don't shift
    the layout horizontally when the bar appears. */
 .app-main { scrollbar-gutter: stable; }
 /* Jump-target anchors clear the inner-scroll top edge (no chrome overlap,
    but a little breathing room when deep-linked within .app-main). */
 .app-main [id] { scroll-margin-top: var(--space-4); }
+/* Full-height route children fill the region instead of scrolling the page. */
 .app-main > .chat,
 .app-main > .chat-area,
 .app-main > .ds-file-stage,
-.app-main > .grow { flex-shrink: 1; }
+.app-main > .grow { flex: 1 1 auto; min-height: 0; }
 .app-main.narrow { max-width: var(--measure-narrow); margin: 0 auto; }
 
 @media (min-width: 1400px) {
@@ -434,9 +450,11 @@ pre .n { color: var(--green-2); }
    Panel — soft tonal container, no border decoration
    ============================================================ */
 .panel {
-  background: var(--bg);
+  background: var(--panel-1, var(--bg-2));
   border-radius: var(--r-3);
   margin: 0 0 var(--space-5);
+  padding: var(--space-3);
+  box-shadow: var(--panel-shadow);
   position: relative;
 }
 .panel.panel-inline { background: var(--bg-2); padding: var(--space-3) var(--space-3); }
@@ -730,9 +748,8 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
    Mobile Portrait Breakpoint (480px and below)
    ────────────────────────────────────────────────────────────────────── */
 @media (max-width: 480px) {
-  /* App Layout — drawer handled in 900px block below */
-  .app-body { grid-template-columns: 1fr !important; }
-  .app-body.no-side { grid-template-columns: 1fr; }
+  /* App Layout: single-column + drawer is handled once in the ≤900px block;
+     no need to re-declare grid-template-columns here (was a redundant !important). */
 
   /* Topbar Navigation */
   .app-topbar {
@@ -743,9 +760,16 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
     padding: 12px 10px;
     min-height: 44px;
   }
+  /* Keep primary nav reachable on small screens (apps without a sidebar have
+     no other entry point). Compact it and let it scroll horizontally rather
+     than hiding it entirely. */
   .app-topbar nav {
-    display: none; /* Hide full nav on very small screens */
+    display: flex; gap: 2px;
+    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
+    max-width: 60vw;
   }
+  .app-topbar nav::-webkit-scrollbar { display: none; }
+  .app-topbar nav a { padding: 10px 8px; white-space: nowrap; }
   .brand { font-size: var(--fs-tiny); font-weight: 600; }
 
   /* Search */
@@ -1435,7 +1459,6 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .chat {
   display: flex; flex-direction: column;
   flex: 1; min-height: 0; gap: var(--space-3);
-  padding-bottom: calc(var(--app-status-h, 42px) + var(--space-2));
 }
 .chat-head {
   display: flex; align-items: baseline; gap: 8px;
@@ -1446,6 +1469,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   margin-bottom: var(--space-2);
 }
 .chat-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
+.chat-head .ds-chat-title,
 .chat-head > span:nth-child(2) {
   font-family: var(--ff-body); font-size: var(--fs-h4);
   font-weight: 600; color: var(--fg);
@@ -1459,21 +1483,21 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   flex: 1; min-height: 0; overflow-y: auto;
   padding: var(--space-2) 0;
   scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent;
-  scroll-behavior: smooth;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .chat-thread { scroll-behavior: smooth; }
 }
 .chat-thread::-webkit-scrollbar { width: 8px; }
 .chat-thread::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
-.chat-thread:empty::before {
-  content: 'no messages yet\astart the conversation';
-  white-space: pre;
+.chat-empty {
+  margin: auto;
+  text-align: center;
   color: var(--fg-3);
   font-family: var(--ff-mono);
-  font-size: var(--fs-sm);
-  text-align: center;
-  margin: auto;
-  opacity: 0.6;
   pointer-events: none;
 }
+.chat-empty-title { font-size: var(--fs-sm); margin: 0 0 var(--space-1); }
+.chat-empty-sub { font-size: var(--fs-tiny); margin: 0; opacity: .7; }
 
 .chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; position: relative; min-width: 0; }
 .chat-msg.you { flex-direction: row-reverse; }
@@ -1507,10 +1531,10 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 
 .chat-bubble {
   padding: 10px 14px; background: var(--bg-2); color: var(--fg);
-  border-radius: 14px; line-height: 1.55;
+  max-width: 100%;
+  border-radius: var(--r-2); line-height: 1.55;
   word-wrap: break-word; overflow-wrap: anywhere;
   font-size: var(--fs-sm);
-  max-width: clamp(220px, min(75vw, 28em), 480px);
   min-width: 0;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
 }
@@ -1794,27 +1818,34 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent);
   outline: none;
 }
-.chat-composer .send,
-.chat-composer button {
+.chat-composer .send {
   width: 44px; height: 44px; border-radius: 50%;
   background: var(--accent); color: var(--accent-fg);
-  border: 0; cursor: pointer; font-size: 18px; font-weight: 700;
+  border: 0; cursor: pointer;
   display: inline-flex; align-items: center; justify-content: center;
-  flex-shrink: 0; font-family: var(--ff-body);
+  flex-shrink: 0;
   transition: background var(--dur-snap, .15s) var(--ease, ease), transform .1s ease;
-  will-change: transform; contain: layout style paint;
 }
-.chat-composer .send:hover,
-.chat-composer button:hover { transform: scale(1.04); }
-.chat-composer .send:active,
-.chat-composer button:active { transform: scale(0.96); }
+.chat-composer .send:disabled { opacity: .5; cursor: not-allowed; }
+/* Ghost icon buttons in the toolbar (attach / emoji / more) — NOT the round
+   accent send button. */
+.composer-btn {
+  width: 40px; height: 40px; border-radius: 50%;
+  background: transparent; color: var(--fg-3);
+  border: 0; cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+  transition: background var(--dur-snap, .15s) var(--ease, ease), color var(--dur-snap, .15s) var(--ease, ease);
+}
+.composer-btn:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); color: var(--fg); }
+.chat-composer .send:hover { transform: scale(1.04); }
+.chat-composer .send:active { transform: scale(0.96); }
 .chat-composer .send:focus-visible,
-.chat-composer button:focus-visible {
+.composer-btn:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
-.chat-composer .send:disabled,
-.chat-composer button:disabled {
+.chat-composer .send:disabled {
   background: var(--bg-3); color: var(--fg-3); cursor: not-allowed; transform: none;
 }
 
@@ -1826,7 +1857,8 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   border-radius: 50%; flex-shrink: 0;
 }
 .aicat-meta { display: flex; flex-direction: column; font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
-.aicat-meta .name { color: var(--mascot); font-weight: 600; }
+.aicat-meta .name { color: var(--mascot-deep, var(--mascot)); font-weight: 600; }
+[data-theme="dark"] .aicat-meta .name, [data-theme="ink"] .aicat-meta .name { color: var(--mascot); }
 
 /* ============================================================
    Sidebar polish: hide zero-count badges; tonal active state;
@@ -1959,13 +1991,17 @@ button:active:not(:disabled) {
   transform: scale(0.98);
 }
 
-/* Enhanced hover transitions */
+/* Enhanced hover transitions — transition only the properties that actually
+   change (not `all`, which animates layout and is a perf trap), and drop the
+   blanket `will-change` (it forces a permanent compositor layer per element). */
 .btn, .btn-primary, .btn-ghost,
 button, a.row, .row,
 .chip, [role="button"],
 input[type="checkbox"], input[type="radio"] {
-  transition: all var(--dur-snap) var(--ease);
-  will-change: background-color, color, transform;
+  transition: background-color var(--dur-snap) var(--ease),
+              color var(--dur-snap) var(--ease),
+              box-shadow var(--dur-snap) var(--ease),
+              transform var(--dur-snap) var(--ease);
 }
 
 /* Prevent double-tap zoom on buttons (iOS) */
@@ -2106,6 +2142,9 @@ input[type="text"],
 input[type="email"],
 input[type="password"],
 input[type="number"],
+input[type="search"],
+input[type="url"],
+input[type="tel"],
 textarea,
 select {
   transition: background var(--dur-snap) var(--ease),
@@ -2117,10 +2156,74 @@ input[type="text"]::placeholder,
 input[type="email"]::placeholder,
 input[type="password"]::placeholder,
 input[type="number"]::placeholder,
+input[type="search"]::placeholder,
+input[type="url"]::placeholder,
 textarea::placeholder {
   color: var(--fg-3);
 }
 
+/* ── Field controls: themed base for TextField / Select / SearchInput ──
+   Root fix: previously only `transition` was set, so themed apps got
+   browser-default white boxes in dark mode and labels collided with inputs
+   because `.ds-field` had no layout. */
+.ds-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 6px);
+  align-items: stretch;
+  width: 100%;
+}
+.ds-field-label {
+  font-size: var(--fs-sm, 14px);
+  color: var(--fg-2);
+  line-height: 1.3;
+}
+.ds-field-hint {
+  font-size: var(--fs-tiny, 13px);
+  color: var(--fg-3);
+  line-height: 1.35;
+}
+.ds-field-count {
+  font-size: var(--fs-tiny, 13px);
+  color: var(--fg-3);
+  align-self: flex-end;
+}
+
+.ds-field input,
+.ds-field textarea,
+.ds-field .ds-select,
+.ds-search-input {
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+  color: var(--fg);
+  background: var(--bg-2);
+  border: 0;
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule);
+  border-radius: var(--r-2, 10px);
+  padding: 10px 14px;
+}
+.ds-field textarea { min-height: calc(4 * 1.5em); resize: vertical; }
+.ds-search-input::placeholder { color: var(--fg-3); }
+
+.ds-field input:focus-visible,
+.ds-field textarea:focus-visible,
+.ds-field .ds-select:focus-visible,
+.ds-search-input:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--accent);
+}
+.ds-field input:disabled,
+.ds-field textarea:disabled,
+.ds-field .ds-select:disabled {
+  opacity: .55;
+  cursor: not-allowed;
+}
+.ds-field input[aria-invalid="true"],
+.ds-field textarea[aria-invalid="true"] {
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--flame, #d64545);
+}
+
 /* Clear button for text inputs */
 input[type="text"]:not(:placeholder-shown) + .input-clear,
 input[type="email"]:not(:placeholder-shown) + .input-clear,
@@ -2169,9 +2272,10 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 }
 .skip-to-main:focus { top: 10px; }
 
-/* Reduced motion preferences */
+/* Reduced motion preferences — scoped to the DS surface so it doesn't reach
+   into and neutralize the host document's own motion. */
 @media (prefers-reduced-motion: reduce) {
-  * {
+  .ds-247420 *, .app * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
@@ -2179,19 +2283,14 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 }
 
 /* ────────────────────────────────────────────────────────────
-   Performance: GPU Acceleration & Paint Optimization
+   Performance
    ────────────────────────────────────────────────────────────── */
 
-/* Promote hover-interactive elements to compositing layer */
-.btn:hover, .btn-primary:hover, .btn-ghost:hover,
-a:hover, .row:hover,
-button:hover, [role="button"]:hover {
-  transform: translateZ(0);
-}
-
-/* Contain layout repaints on self-contained components */
-.panel, .row, .chip, .btn, button {
-  contain: layout style paint;
+/* Limit layout/style containment to self-contained components. `paint` is
+   intentionally omitted — it clips focus rings, tooltips and dropdowns that
+   emanate from a contained .row/.btn. */
+.panel, .row {
+  contain: layout style;
 }
 
 /* ────────────────────────────────────────────────────────────
@@ -2201,11 +2300,14 @@ button:hover, [role="button"]:hover {
 @media (hover: none) and (pointer: coarse) {
   /* Mobile devices: larger touch targets, faster responses */
   .btn, .btn-primary, .btn-ghost,
-  button, a.row, [role="button"] {
+  button, a.row, [role="button"],
+  .ds-icon-btn, .composer-btn {
     min-height: 48px;
     min-width: 48px;
     padding: 12px 20px;
   }
+  /* Icon buttons stay square — the padding bump above would distort them. */
+  .ds-icon-btn, .composer-btn { padding: 0; }
 
   /* Remove hover effects on touch devices (use active instead) */
   .btn:hover, .btn-primary:hover, .btn-ghost:hover {
@@ -2228,12 +2330,9 @@ button:hover, [role="button"]:hover {
    Theme Transition Smoothness
    ────────────────────────────────────────────────────────────── */
 
-html {
-  transition: background-color var(--dur-base) var(--ease),
-              color var(--dur-base) var(--ease);
-}
-
-body {
+/* Scoped to the DS wrapper so the design system never reaches out and
+   animates the host document's html/body. */
+.ds-247420, .app {
   transition: background-color var(--dur-base) var(--ease),
               color var(--dur-base) var(--ease);
 }
@@ -2469,7 +2568,12 @@ body {
     padding: 10px 12px;
   }
   .app-side .group { width: 100%; }
-  .app-crumb { display: none; }
+  /* Keep the crumb on mobile — apps mount contextual controls (model picker,
+     actions, live status) in crumb-right, so hiding it strands them. Collapse
+     the breadcrumb trail/leaf instead and let the right cluster wrap. */
+  .app-crumb { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 8px 12px; }
+  .app-crumb > .sep, .app-crumb > span:not(.crumb-right):not(.leaf) { display: none; }
+  .app-crumb .crumb-right { margin-left: 0; }
   .chat-head { padding: var(--space-2) var(--space-3) var(--space-2); margin-bottom: var(--space-2); }
   .app-main { padding-left: var(--space-3); padding-right: var(--space-3); }
 }

package/colors_and_type.css

@@ -4,7 +4,7 @@
    Source-of-truth tokens. Component sheet lives in app-shell.css.
    ============================================================ */
 
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap');
 
 :root {
   /* Tree view indentation tokens */
@@ -31,6 +31,7 @@
   --mascot:      #E84B8A;
   --mascot-2:    #FF3CA7;
   --mascot-tint: #F5D2DF;
+  --mascot-deep: #B81F63;
 
   /* Signals */
   --sun:         #F5C344;
@@ -51,7 +52,7 @@
 
   --accent:      var(--green);
   --accent-fg:   var(--paper);
-  --accent-tint: color-mix(in oklab, var(--accent) 18%, var(--bg));
+  --accent-tint: color-mix(in oklab, var(--accent) 26%, var(--bg));
 
   --panel-bg:     var(--bg);
   --panel-bg-2:   var(--bg-2);
@@ -66,12 +67,11 @@
   --panel-accent-2: var(--accent-bright, var(--accent));
   --panel-shadow: 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent), 0 4px 14px color-mix(in oklab, var(--fg) 8%, transparent);
 
-  /* Type — one family, used purposefully. Space Grotesk for everything
-     non-mono. The display/narrow aliases stay so consumers that reference
-     them keep working; they just resolve to the body font now. */
-  --ff-display:  'Space Grotesk', system-ui, sans-serif;
-  --ff-narrow:   'Space Grotesk', system-ui, sans-serif;
-  --ff-body:     'Space Grotesk', system-ui, sans-serif;
+  /* Type — Inter for everything non-mono. The display/narrow aliases stay so
+     consumers that reference them keep working; they resolve to the body font. */
+  --ff-display:  'Inter', system-ui, sans-serif;
+  --ff-narrow:   'Inter', system-ui, sans-serif;
+  --ff-body:     'Inter', system-ui, sans-serif;
   --ff-mono:     'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
 
   --fs-micro:    12px;
@@ -88,6 +88,15 @@
   --fs-hero:     clamp(42px, 7cqi, 96px);
   --fs-mega:     clamp(56px, 11cqi, 168px);
 
+  /* App/chrome typescale: the default heading scale above is tuned for
+     marketing/hero layouts (h1 up to 64px). Application chrome — page titles,
+     panel headers — needs a compact ceiling so a PageHeader title doesn't
+     dwarf the content. Opt in with `data-typescale="app"` on a container. */
+  --fs-h1-app:   clamp(22px, 2.4cqi, 30px);
+  --fs-h2-app:   clamp(19px, 2cqi, 24px);
+  --fs-h3-app:   clamp(17px, 1.8cqi, 20px);
+  --fs-h4-app:   clamp(15px, 1.6cqi, 17px);
+
   --lh-tight:    1.05;
   --lh-snug:     1.2;
   --lh-base:     1.55;
@@ -193,6 +202,7 @@ select:focus-visible {
 
 [data-theme="ink"],
 [data-theme="dark"] {
+  color-scheme: dark;
   --bg:        var(--ink);
   --bg-2:      var(--ink-2);
   --bg-3:      #464650;