anentrypoint-design 0.0.130 → 0.0.134

package/app-shell.css

@@ -157,11 +157,18 @@ pre .n { color: var(--green-2); }
   padding-right: env(safe-area-inset-right);
 }
 
+:root {
+  --app-status-h: 42px;
+  --app-topbar-h: 56px;
+  --app-crumb-h: 32px;
+}
+
 .app-topbar {
   position: sticky; top: 0; z-index: var(--z-header);
   display: grid; grid-template-columns: auto 1fr auto;
   align-items: center; gap: var(--space-4);
-  padding: 18px var(--pad-x);
+  min-height: var(--app-topbar-h);
+  padding: 10px var(--pad-x);
   background: color-mix(in oklab, var(--bg) 88%, transparent);
   backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
 }
@@ -212,7 +219,8 @@ pre .n { color: var(--green-2); }
 }
 
 .app-crumb {
-  padding: 0 var(--pad-x) 14px;
+  min-height: var(--app-crumb-h);
+  padding: 6px var(--pad-x);
   display: flex; align-items: center; gap: 8px;
   font-size: var(--fs-sm); color: var(--fg-3);
 }
@@ -256,14 +264,23 @@ pre .n { color: var(--green-2); }
 }
 
 .app-main {
-  padding: var(--space-7) var(--pad-x);
+  padding: var(--space-5) var(--pad-x) 0;
   min-width: 0;
 }
 .app-main.narrow { max-width: 760px; margin: 0 auto; }
 
+@media (min-width: 1400px) {
+  .app { max-width: 1400px; margin-left: auto; margin-right: auto; }
+  .app-main .chat,
+  .app-main > .chat-area,
+  .app-main > .main-content { max-width: none; margin: 0; width: 100%; }
+  .app-status { max-width: 1400px; margin-left: auto; margin-right: auto; left: 0; right: 0; }
+}
+
 .app-status {
   display: flex; align-items: center; gap: var(--space-3);
-  padding: 14px var(--pad-x);
+  min-height: var(--app-status-h);
+  padding: 10px var(--pad-x);
   font-family: var(--ff-mono); font-size: var(--fs-xs);
   color: var(--fg-3);
 }
@@ -569,24 +586,9 @@ table tr.clickable:hover td { background: var(--bg-2); }
    Mobile Portrait Breakpoint (480px and below)
    ────────────────────────────────────────────────────────────────────── */
 @media (max-width: 480px) {
-  /* App Layout */
+  /* App Layout — drawer handled in 900px block below */
   .app-body { grid-template-columns: 1fr !important; }
   .app-body.no-side { grid-template-columns: 1fr; }
-  .app-side-shell { border-right: 0; border-bottom: 1px solid var(--rule); }
-  .app-side {
-    padding: var(--space-3) var(--space-2);
-    font-size: var(--fs-xs);
-    flex-direction: row; flex-wrap: wrap; gap: var(--space-2);
-  }
-  .app-side .group {
-    width: 100%; font-size: var(--fs-micro); margin-bottom: 4px;
-  }
-  .app-side a {
-    flex: 1; min-width: 100px; padding: 12px 10px; gap: 6px;
-    grid-template-columns: 14px 1fr;
-    min-height: 44px;
-  }
-  .app-side a .glyph { font-size: 12px; }
 
   /* Topbar Navigation */
   .app-topbar {
@@ -714,13 +716,7 @@ table tr.clickable:hover td { background: var(--bg-2); }
    Tablet Landscape Breakpoint (768px to 1024px)
    ────────────────────────────────────────────────────────────────────── */
 @media (min-width: 481px) and (max-width: 1024px) {
-  /* App Layout */
-  .app-body { grid-template-columns: 200px minmax(0, 1fr); }
-  .app-side {
-    padding: var(--space-4) var(--space-2);
-    font-size: var(--fs-xs);
-    flex-direction: column; gap: var(--space-3);
-  }
+  /* App Layout — side handled by 900px drawer block; restore for 901-1024 */
   .app-side a {
     padding: 12px 12px; gap: 8px;
     grid-template-columns: 16px 1fr auto;
@@ -914,14 +910,15 @@ table tr.clickable:hover 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;
-  padding: 0 0 var(--space-3);
+  padding: var(--space-3) 0 var(--space-2);
   font-family: var(--ff-mono); font-size: var(--fs-xs);
   color: var(--fg-3); text-transform: lowercase; letter-spacing: 0.02em;
   border-bottom: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
-  margin-bottom: var(--space-3);
+  margin-bottom: var(--space-2);
 }
 .chat-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
 .chat-head > span:nth-child(2) {
@@ -953,7 +950,7 @@ table tr.clickable:hover td { background: var(--bg-2); }
   pointer-events: none;
 }
 
-.chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; position: relative; }
+.chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; position: relative; min-width: 0; }
 .chat-msg.you { flex-direction: row-reverse; }
 .chat-msg.you .chat-stack { align-items: flex-end; }
 .chat-msg:hover { background: color-mix(in oklab, var(--fg) 1%, transparent); padding: 2px 0; margin: 0; border-radius: 8px; transition: background var(--dur-base) var(--ease); }
@@ -980,6 +977,7 @@ table tr.clickable:hover td { background: var(--bg-2); }
 .chat-stack {
   display: flex; flex-direction: column; gap: 4px;
   max-width: min(70%, 56ch); min-width: 0;
+  flex: 0 1 auto; overflow: hidden;
 }
 
 .chat-bubble {
@@ -987,7 +985,8 @@ table tr.clickable:hover td { background: var(--bg-2); }
   border-radius: 14px; line-height: 1.55;
   word-wrap: break-word; overflow-wrap: anywhere;
   font-size: var(--fs-sm);
-  max-width: clamp(200px, 80vw, 480px);
+  max-width: 100%;
+  min-width: 0;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
 }
 .chat-msg:hover .chat-bubble { transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 6%, transparent); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
@@ -1045,7 +1044,21 @@ table tr.clickable:hover td { background: var(--bg-2); }
   padding: 0; background: var(--bg);
   color: var(--fg);
   border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
-  overflow: hidden; max-width: min(90%, 72ch);
+  overflow: hidden; max-width: 100%; min-width: 0;
+}
+.chat-bubble.chat-code pre,
+.chat-bubble pre,
+.chat-msg pre {
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--bg-3) transparent;
+}
+.chat-bubble pre code,
+.chat-msg pre code {
+  display: block;
+  white-space: pre;
+  min-width: 0;
 }
 .chat-code-head {
   display: flex; align-items: center; gap: 10px;
@@ -1881,3 +1894,78 @@ body {
   transition: color var(--dur-snap) var(--ease);
 }
 .ds-alert-dismiss:hover { color: var(--fg); }
+
+/* ============================================================
+   Responsive Perfection — Drawer rail, ultrawide cap, mobile compact
+   ============================================================ */
+
+/* Tablet + Mobile: side rail becomes off-canvas drawer (≤900px) */
+@media (max-width: 900px) {
+  .app-body,
+  .app-body.no-side { grid-template-columns: 1fr !important; }
+  .app-side-shell {
+    position: fixed;
+    left: 0; top: var(--app-topbar-h);
+    height: calc(100vh - var(--app-topbar-h) - var(--app-status-h));
+    width: 280px; max-width: 80vw;
+    transform: translateX(-100%);
+    transition: transform var(--dur-base, 240ms) var(--ease, ease);
+    z-index: 50;
+    background: var(--bg);
+    border-right: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
+    overflow-y: auto;
+  }
+  .app-side-shell.open,
+  .app-side.open,
+  .app-body.side-open .app-side-shell { transform: translateX(0); }
+  .app-side {
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+    gap: var(--space-2);
+    padding: var(--space-3);
+    font-size: var(--fs-sm);
+  }
+  .app-side a {
+    flex: 0 0 auto; min-width: 0;
+    grid-template-columns: 18px 1fr auto;
+    padding: 10px 12px;
+  }
+  .app-side .group { width: 100%; }
+  .app-crumb { display: none; }
+  .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); }
+}
+
+/* Drawer scrim */
+.app-side-scrim {
+  display: none;
+  position: fixed; inset: 0;
+  background: color-mix(in oklab, var(--bg) 60%, transparent);
+  z-index: 49;
+}
+@media (max-width: 900px) {
+  .app-body.side-open ~ .app-side-scrim,
+  .app-side-shell.open ~ .app-side-scrim { display: block; }
+}
+
+/* Mobile (≤480) status bar compact; hide tail item */
+@media (max-width: 480px) {
+  .app-status {
+    font-size: var(--fs-micro);
+    padding: 4px var(--space-2);
+    gap: var(--space-2);
+  }
+  .app-status > :last-child:not(:only-child) { display: none; }
+}
+
+/* Tiny phone (≤360) topbar compact */
+@media (max-width: 360px) {
+  .app-topbar {
+    padding: 8px var(--space-2);
+    font-size: var(--fs-xs);
+    gap: var(--space-2);
+  }
+  .app-topbar nav,
+  .app-topbar > :last-child { display: none; }
+  .brand { font-size: var(--fs-tiny); }
+}

package/colors_and_type.css

@@ -13,7 +13,7 @@
   --paper-3:     #DFDED9;
   --ink:         #131318;
   --ink-2:       #25252C;
-  --ink-3:       #6A6A70;
+  --ink-3:       #54545A; /* WCAG AAA on --paper (~7.1:1); was #6A6A70 (AA only) */
 
   /* Lore palette */
   --green:       #247420;
@@ -33,6 +33,8 @@
   --flame:       #FF5A1F;
   --sky:         #3A6EFF;
   --warn:        #E0241A;
+  --danger:      oklch(0.55 0.18 25);
+  --success:     var(--green-2);
   --live:        var(--green);
 
   /* Semantic surfaces */
@@ -192,6 +194,7 @@ select:focus-visible {
   --accent:    var(--accent-bright, var(--green-2));
   --accent-fg: var(--ink);
   --accent-bright: var(--green-2);
+  --danger:    oklch(0.68 0.19 25);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -263,3 +266,32 @@ select:focus-visible {
     linear-gradient(to bottom, rgba(232,75,138,0.15) 1px, transparent 1px);
   background-size: 8px 8px;
 }
+
+/* Reduced-motion guard — neutralizes every transition/animation/transform
+   inside the design-system scope when the user requests reduced motion.
+   Components remain free to opt back in with
+   `@media (prefers-reduced-motion: no-preference) { ... }`. */
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 *,
+  .ds-247420 *::before,
+  .ds-247420 *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Elevation tokens consumed by overlays (Tooltip, Popover, Dropdown, Dialog). */
+:root {
+  --shadow-1: 0 1px 2px color-mix(in oklab, var(--fg) 8%, transparent);
+  --shadow-2: 0 4px 12px color-mix(in oklab, var(--fg) 10%, transparent),
+              0 2px 4px  color-mix(in oklab, var(--fg) 6%,  transparent);
+  --shadow-3: 0 12px 32px color-mix(in oklab, var(--fg) 14%, transparent),
+              0 4px 8px   color-mix(in oklab, var(--fg) 8%,  transparent);
+  --z-dropdown:  600;
+  --z-popover:   700;
+  --z-modal:     800;
+  --z-toast:     900;
+  --z-tooltip:  1000;
+}