anentrypoint-design 0.0.237 → 0.0.239

package/chat.css

@@ -869,6 +869,9 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
    neutral pill and from the accent-toned running pill (--success = green-2). */
 .chat-msg .chat-tool.tool-done .chat-tool-status { color: var(--success); background: color-mix(in oklab, var(--success) 12%, transparent); }
 .chat-tool-body { border-top: var(--bw-hair) solid var(--rule); padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
+/* details' intrinsic min-content sizing: an unbroken token in the pre must not
+   widen the tool card past the bubble column. */
+.chat-msg .chat-tool, .chat-tool-body, .chat-tool-section { min-width: 0; max-width: 100%; }
 .chat-tool-section { display: flex; flex-direction: column; gap: var(--space-1); }
 .chat-tool-section-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-3); }
 .chat-tool-copy { position: static; opacity: 0; }

package/colors_and_type.css

@@ -5,17 +5,18 @@
    Source-of-truth tokens. Component sheet lives in app-shell.css.
    ============================================================ */
 
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&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');
+@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap');
 
-/* Metric-matched fallback for the display face. While Space Grotesk loads,
-   text falls back to Arial with size-adjust tuned to its cap-height so the
-   oversized hero does not reflow on swap. Referenced first in --ff-display via
-   the 'Space Grotesk' family; this only kicks in for the fallback glyphs. */
+/* Metric-matched fallback for the display face. While Bricolage Grotesque
+   loads, text falls back to Arial with size-adjust tuned to its cap-height so
+   the oversized hero does not reflow on swap. Referenced first in --ff-display
+   via the 'Bricolage Grotesque' family; this only kicks in for the fallback
+   glyphs. */
 @font-face {
-  font-family: 'Space Grotesk Fallback';
+  font-family: 'Bricolage Grotesque Fallback';
   src: local('Arial');
-  size-adjust: 96%;
-  ascent-override: 95%;
+  size-adjust: 99%;
+  ascent-override: 94%;
   descent-override: 24%;
 }
 
@@ -129,13 +130,14 @@
   --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 — Space Grotesk carries display/headings (editorial grotesk with real
-     character), Inter carries body and UI, JetBrains carries code. The narrow
-     alias tracks the display face. size-adjust on the fallback keeps the
-     oversized hero from shifting while Space Grotesk loads. */
-  --ff-display:  'Space Grotesk', 'Space Grotesk Fallback', 'Inter', system-ui, sans-serif;
-  --ff-narrow:   'Space Grotesk', 'Space Grotesk Fallback', 'Inter', system-ui, sans-serif;
-  --ff-body:     'Inter', system-ui, sans-serif;
+  /* Type — Bricolage Grotesque carries display/headings (variable editorial
+     grotesque with real character), Hanken Grotesk carries body and UI,
+     JetBrains carries code. The narrow alias tracks the display face.
+     size-adjust on the fallback keeps the oversized hero from shifting while
+     Bricolage Grotesque loads. */
+  --ff-display:  'Bricolage Grotesque', 'Bricolage Grotesque Fallback', 'Hanken Grotesk', system-ui, sans-serif;
+  --ff-narrow:   'Bricolage Grotesque', 'Bricolage Grotesque Fallback', 'Hanken Grotesk', system-ui, sans-serif;
+  --ff-body:     'Hanken Grotesk', system-ui, sans-serif;
   --ff-mono:     'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
 
   --fs-micro:    12px;

package/community.css

@@ -10,8 +10,13 @@
 .cm-shell {
   display: flex;
   height: 100vh;
+  height: 100dvh;
   width: 100%;
   overflow: hidden;
+  /* Notched devices: keep the rail and bottom chrome out of the unsafe zones. */
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
   background: var(--bg);
   color: var(--fg);
   font-family: var(--ff-body);
@@ -798,7 +803,7 @@
   scrollbar-width: thin;
   scrollbar-color: color-mix(in oklab, var(--fg) 18%, transparent) transparent;
   transition: width var(--dur-base) var(--ease), flex-basis var(--dur-base) var(--ease);
-  will-change: width, flex-basis, opacity, transform; contain: layout style;
+  contain: layout style;
 }
 .cm-member-list:not(.open) {
   width: 0;
@@ -943,7 +948,7 @@
 /* ============================================================
    Responsive — collapse sidebars on narrow viewports
    ============================================================ */
-@media (max-width: 768px) {
+@media (max-width: 900px) {
   .cm-channel-sidebar {
     position: absolute;
     z-index: 20;
@@ -970,6 +975,21 @@
   .cm-chat-header-topic { display: none; }
 }
 
+/* Drawer scrim — dims the chat while a drawer overlays it on narrow screens.
+   Visual affordance only (pointer-events: none): tap-to-close needs a real
+   element + handler in CommunityShell, which lives outside this stylesheet. */
+@media (max-width: 900px) {
+  .cm-shell:has(.cm-channel-sidebar.open) .cm-main::before,
+  .cm-shell:has(.cm-member-list.open) .cm-main::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 15;
+    background: color-mix(in oklab, var(--ink) 40%, transparent);
+    pointer-events: none;
+  }
+}
+
 @media (max-width: 480px) {
   .cm-server-rail {
     flex: 0 0 56px;
@@ -982,22 +1002,12 @@
     height: 44px;
     padding: 4px;
   }
-  .cm-channel-sidebar {
-    left: 56px;
-    width: 80vw;
-    max-width: 200px;
-  }
+  .cm-channel-sidebar,
   .cm-channel-sidebar.open {
+    left: 56px;
     width: 80vw;
-    max-width: 200px;
-  }
-
-  /* Mobile touch target fixes for icon buttons */
-  .cm-cat-add,
-  .cm-ch-action-btn {
-    width: 44px;
-    height: 44px;
-    padding: 8px;
+    /* Use the width beside the 56px rail, not a 200px sliver. */
+    max-width: min(320px, calc(100vw - 56px));
   }
   .cm-ch-icon {
     flex: 0 0 24px;
@@ -1006,6 +1016,44 @@
   }
 }
 
+/* Touch target floors — applies on any coarse-pointer device (phones AND
+   touch tablets/laptops), not just narrow viewports. */
+@media (pointer: coarse) {
+  .cm-channel-item,
+  .cm-member-item { min-height: 44px; }
+  .cm-cat-add,
+  .cm-ch-action-btn,
+  .cm-user-btn,
+  .cm-vs-btn,
+  .cm-tp-new,
+  .cm-tp-close,
+  .cm-rb-cancel,
+  .cm-mh-btn {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  .cm-forum-search,
+  .cm-forum-sort,
+  .cm-forum-new { min-height: 44px; }
+}
+
+/* Ultrawide: clamp the message/forum/page column to a readable measure. */
+@media (min-width: 1600px) {
+  .cm-main > .chat,
+  .cm-forum-list,
+  .cm-page-body {
+    max-width: 110ch;
+    margin-inline: auto;
+    width: 100%;
+  }
+}
+
+/* No hover on touch: hover-revealed channel actions must stay reachable. */
+@media (hover: none) {
+  .cm-channel-item .cm-ch-actions { opacity: 0.6; }
+  .cm-category-header .cm-cat-add { opacity: 0.6; }
+}
+
 /* ---------- a11y polish: focus-visible coverage on community interactive elements ---------- */
 /* Every interactive surface with a :hover state must also have a :focus-visible state so
    keyboard users get equivalent feedback. The selectors here mirror the existing :hover rules. */
@@ -1058,8 +1106,8 @@
   display: flex;
   align-items: center;
   gap: var(--space-2);
-  height: 48px;
-  padding: 0 var(--space-2);
+  height: calc(48px + env(safe-area-inset-top));
+  padding: env(safe-area-inset-top) max(var(--space-2), env(safe-area-inset-right)) 0 max(var(--space-2), env(safe-area-inset-left));
   background: var(--bg-2);
   border-bottom: 1px solid var(--panel-3);
 }
@@ -1334,6 +1382,7 @@
 .vx-modal {
   width: 100%; max-width: 440px;
   max-height: 90vh;
+  max-height: 90dvh;
   display: flex; flex-direction: column;
   border-radius: var(--r-3);
   background: var(--bg);
@@ -1459,10 +1508,21 @@
 /* ThreadPanel — cm-thread-panel / cm-tp-* */
 .cm-thread-panel {
   display: flex; flex-direction: column;
+  flex: 0 0 300px; width: 300px; min-width: 0;
   height: 100%; min-height: 0;
   background: var(--bg-2); color: var(--fg);
   border-left: var(--bw-hair) solid var(--rule);
 }
+@media (max-width: 900px) {
+  .cm-thread-panel {
+    position: absolute;
+    z-index: 20;
+    top: 0; right: 0; bottom: 0;
+    height: auto;
+    width: min(320px, 90vw);
+    box-shadow: -2px 0 16px color-mix(in oklab, var(--ink) 30%, transparent);
+  }
+}
 .cm-tp-head {
   display: flex; align-items: center; justify-content: space-between;
   padding: var(--space-2); border-bottom: var(--bw-hair) solid var(--rule);
@@ -1476,6 +1536,7 @@
 .cm-tp-new:hover, .cm-tp-close:hover { background: var(--bg-3); color: var(--fg); }
 .cm-tp-list { flex: 1; min-height: 0; overflow-y: auto; }
 .cm-tp-item {
+  position: relative; /* anchors .cm-tp-dot to the row, not the panel */
   display: flex; flex-direction: column; gap: 2px;
   width: 100%; text-align: left; cursor: pointer;
   padding: var(--space-2); border: none; background: transparent;
@@ -1485,7 +1546,7 @@
 .cm-tp-item:hover { background: var(--bg-3); }
 .cm-tp-item.is-active { background: var(--bg-3); box-shadow: inset 3px 0 0 var(--accent); }
 .cm-tp-item.is-unread .cm-tp-item-title { font-weight: 700; }
-.cm-tp-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
+.cm-tp-dot { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
 .cm-tp-item-title { font-size: var(--fs-1, 14px); }
 .cm-tp-item-snippet { font-size: var(--fs-0, 12px); color: var(--fg-2, var(--fg)); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .cm-tp-item-meta { display: flex; gap: var(--space-2); font-size: var(--fs-micro, 11px); color: var(--fg-2, var(--fg)); opacity: .7; }
@@ -1493,7 +1554,7 @@
 
 /* ForumView — cm-forum / cm-forum-* */
 .cm-forum { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg-1, var(--bg-2)); color: var(--fg); }
-.cm-forum-toolbar { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2); border-bottom: var(--bw-hair) solid var(--rule); }
+.cm-forum-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2); border-bottom: var(--bw-hair) solid var(--rule); }
 .cm-forum-search { flex: 1; padding: var(--space-1) var(--space-2); border: var(--bw-hair) solid var(--rule-strong); border-radius: var(--r-1); background: var(--bg-3); color: var(--fg); }
 .cm-forum-sort { padding: var(--space-1); border: var(--bw-hair) solid var(--rule-strong); border-radius: var(--r-1); background: var(--bg-3); color: var(--fg); }
 .cm-forum-new { padding: var(--space-1) var(--space-2); border: none; border-radius: var(--r-1); background: var(--accent); color: var(--accent-fg); cursor: pointer; }