anentrypoint-design 1.0.33 → 1.0.34

package/colors_and_type.css

@@ -795,7 +795,7 @@ select:focus-visible {
 }
 
 [data-theme="github-dark"] ::selection {
-  background: #0d2847;
+  background: color-mix(in oklab, var(--accent) 24%, var(--bg-2));
   color: var(--fg);
 }
 

package/dist/247420.css

@@ -797,7 +797,7 @@
 }
 
 .ds-247420[data-theme="github-dark"] ::selection {
-  background: #0d2847;
+  background: color-mix(in oklab, var(--accent) 24%, var(--bg-2));
   color: var(--fg);
 }
 
@@ -1050,6 +1050,14 @@
   margin-top: var(--space-2);
 }
 
+/* .app-main.narrow widens well past prose measure on wide no-sidebar
+   viewports on purpose (topbar.css) so full-width siblings like .post-meta/
+   h1/.post-index use the room. .lede/.ds-prose keep their reading-measure
+   caps (38ch/--measure) but stayed left edge-anchored inside that wider
+   column, turning the freed width into one-sided dead whitespace on the
+   right of the article body instead of being absorbed as margin. */
+.ds-247420 .app-main.narrow > .lede, .ds-247420 .app-main.narrow > .t-lede, .ds-247420 .app-main.narrow > .ds-prose { margin-left: auto; margin-right: auto; }
+
 .ds-247420 .lede + .post-body, .ds-247420 .t-lede + .post-body, .ds-247420 .lede + .ds-prose, .ds-247420 .t-lede + .ds-prose {
   margin-top: var(--space-4);
 }
@@ -1226,8 +1234,19 @@
   -webkit-backdrop-filter: none; padding: 0; min-height: 0;
   flex: 1 1 auto;
 }
-.ds-247420 .app-chrome > .app-crumb { order: 1; flex: 1 1 auto; }
-.ds-247420 .app-chrome > .app-topbar { order: 2; flex: 0 0 auto; }
+.ds-247420 .app-chrome > .app-crumb { order: 1; flex: 1 1 auto; min-width: 0; }
+/* flex:1 1 auto + min-width:0 (not the previous 0 0 auto): a merged
+ * chrome's topbar carries the search input, which has its own shrink
+ * basis (.ds-topbar-search, kits-appended.css) meant to yield space before
+ * the row wraps -- but a `0 0 auto` topbar box never shrinks itself, so the
+ * search input's flexibility was inert and the whole topbar instead
+ * dropped to a second line as one unit once combined crumb+topbar content
+ * exceeded the row (witnessed live on the search kit at 1280px: crumb
+ * 564px + topbar 596px overflowed a 1184px content box, wrapping the
+ * topbar under the crumb and reading as a broken sticky header). Letting
+ * the topbar itself shrink means the search input actually compresses
+ * first, keeping both bars on one line at realistic content widths. */
+.ds-247420 .app-chrome > .app-topbar { order: 2; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
 .ds-247420 .app-chrome > .app-topbar > .brand { display: none; }
 .ds-247420 .app-chrome > .app-topbar > nav { margin-left: 0; }
 .ds-247420 .app-chrome > .app-crumb > .crumb-right { margin-left: auto; }
@@ -1523,6 +1542,7 @@
 /* Full-height route children fill the region instead of scrolling the page. */
 .ds-247420 .app-main > .chat,
 .ds-247420 .app-main > .chat-area,
+.ds-247420 .app-main > .chat-kit-page,
 .ds-247420 .app-main > .ds-file-stage,
 .ds-247420 .app-main > .ds-files-stack,
 .ds-247420 .app-main > .grow { flex: 1 1 auto; min-height: 0; }
@@ -1864,7 +1884,11 @@
   border-radius: 50%;
   background: var(--sky);
   transform: translateY(-50%);
-  animation: chip-live-pulse 1.6s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .chip.tone-live::before {
+    animation: chip-live-pulse 1.6s ease-in-out infinite;
+  }
 }
 @keyframes chip-live-pulse {
   0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in oklab, var(--sky) 50%, transparent); }
@@ -1993,6 +2017,34 @@
   .ds-247420 .ds-tooltip { transition: none; }
 }
 
+/* -- Menubar -------------------------------------------------------------
+   Row of closed triggers (mirrors .ds-dp-trigger's affordance); without
+   this the wrapper and its item divs fall back to block-level UA defaults,
+   stacking the triggers vertically and rendering them as filled buttons
+   abutting any adjacent status text. */
+.ds-247420 .ds-menubar { display: inline-flex; align-items: center; gap: var(--space-1); }
+.ds-247420 .ds-menubar-item { display: inline-flex; }
+.ds-247420 .ds-menubar-trigger {
+  display: inline-flex;
+  align-items: center;
+  min-height: 32px;
+  padding: var(--space-1-5) var(--space-2-5);
+  border: 0;
+  border-radius: var(--r-2);
+  background: var(--bg-2);
+  color: var(--fg);
+  font-family: inherit;
+  font-size: var(--fs-sm);
+  cursor: pointer;
+  transition: background-color var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.ds-247420 .ds-menubar-trigger:hover { background: var(--bg-3); }
+.ds-247420 .ds-menubar-trigger:focus-visible { box-shadow: var(--focus-ring-inset); outline: none; }
+.ds-247420 .ds-menubar-trigger.is-open { background: var(--bg-3); }
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .ds-menubar-trigger { transition: none; }
+}
+
 /* ============================================================
    Panel — soft tonal container, no border decoration
    ============================================================ */
@@ -2437,6 +2489,16 @@
 @container (max-width: 900px) {
   .ds-247420 .ds-hero { padding: var(--space-7) 0 var(--space-6); }
 }
+/* .ds-hero already supplies its own --space-8 (96px) trailing padding, same
+   "gap owned by one side only" pattern as * + .ds-section below. A .panel
+   right after it still added its own --space-6-scaled top margin PLUS its
+   panel-head top padding on top of that -- measured live, the stat block sat
+   ~138px from "currently shipping" (96 hero pad + panel's own lead) versus
+   the ~42px any other block gets ahead of a .panel, and well past the 96px
+   .ds-section itself uses for its "more space above than below" lead. Zero
+   the panel's own top margin here so the hero's trailing padding is the only
+   contributor, matching every other panel/section transition on the page. */
+.ds-247420 .ds-hero + .panel { margin-top: 0; }
 .ds-247420 .ds-chat-title { margin: 0; font-size: inherit; }
 
 /* ============================================================
@@ -2509,14 +2571,16 @@
 .ds-247420 .ds-marquee-track {
   display: inline-flex; gap: var(--space-5);
   white-space: nowrap; will-change: transform;
-  animation: ds-marquee-run 28s linear infinite;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .ds-marquee-track { animation: ds-marquee-run 28s linear infinite; }
+  .ds-247420 .ds-marquee:hover .ds-marquee-track,
+  .ds-247420 .ds-marquee:focus-within .ds-marquee-track,
+  .ds-247420 .ds-marquee:active .ds-marquee-track { animation-play-state: paused; }
 }
 .ds-247420 .ds-marquee-run { display: inline-flex; align-items: center; gap: var(--space-5); }
 .ds-247420 .ds-marquee-item { display: inline-flex; align-items: center; gap: var(--space-5); }
 .ds-247420 .ds-marquee-sep { color: var(--accent-ink); }
-.ds-247420 .ds-marquee:hover .ds-marquee-track,
-.ds-247420 .ds-marquee:focus-within .ds-marquee-track,
-.ds-247420 .ds-marquee:active .ds-marquee-track { animation-play-state: paused; }
 @keyframes ds-marquee-run {
   from { transform: translateX(0); }
   to   { transform: translateX(-50%); }
@@ -3319,7 +3383,10 @@
 .ds-247420 .ds-skel::after {
   content: ''; position: absolute; inset: 0;
   background: linear-gradient(90deg, transparent, var(--bg-3), transparent);
-  transform: translateX(-100%); animation: ds-skel-shimmer 1.2s infinite;
+  transform: translateX(-100%);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .ds-skel::after { animation: ds-skel-shimmer 1.2s infinite; }
 }
 .ds-247420 .ds-skel-icon { width: 22px; height: 22px; }
 .ds-247420 .ds-skel-title { height: 12px; width: 60%; }
@@ -3643,6 +3710,7 @@
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .ds-247420 .ds-crumb-seg:hover { background: var(--bg-2); color: var(--fg); }
+.ds-247420 .ds-crumb-seg:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
 .ds-247420 .ds-crumb-seg.leaf { color: var(--fg); font-weight: 600; }
 .ds-247420 .ds-crumb-sep { color: var(--fg-3); opacity: 0.6; user-select: none; }
 
@@ -3814,7 +3882,11 @@
    progress) — a sliding marquee bar reads as "working", not stuck at 0%. */
 .ds-247420 .ds-upload-bar.indeterminate .ds-upload-fill {
   width: 40%; transition: none;
-  animation: ds-upload-marquee 1.1s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .ds-upload-bar.indeterminate .ds-upload-fill {
+    animation: ds-upload-marquee 1.1s ease-in-out infinite;
+  }
 }
 @keyframes ds-upload-marquee {
   0% { transform: translateX(-100%); }
@@ -4281,7 +4353,7 @@
 .ds-247420 .chat-empty-title { font-size: var(--fs-sm); margin: 0 0 var(--space-1); }
 .ds-247420 .chat-empty-sub { font-size: var(--fs-tiny); margin: 0; opacity: .82; } /* WCAG-verified 2026 restyle: .7 blended --fg-3 to 3.72:1 on dark --bg (#1a1a1a); .82 clears 4.53:1 */
 
-.ds-247420 .chat-msg { display: flex; gap: var(--space-2-75); align-items: flex-start; padding: var(--space-1-75) 0; position: relative; min-width: 0; }
+.ds-247420 .chat-msg { display: flex; flex-shrink: 0; gap: var(--space-2-75); align-items: flex-start; padding: var(--space-1-75) 0; position: relative; min-width: 0; }
 .ds-247420 .chat-msg.you { flex-direction: row-reverse; }
 .ds-247420 .chat-msg.you .chat-stack { align-items: flex-end; }
 .ds-247420 .chat-msg:hover { background: color-mix(in oklab, var(--fg) 4%, transparent); padding: var(--space-1-75) 0; margin: 0; border-radius: var(--r-0); transition: background var(--dur-base) var(--ease); }
@@ -5237,6 +5309,9 @@
   border-radius: 50%;
   animation: spinner-rotate 0.8s linear infinite;
 }
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .loading::after { animation: none; }
+}
 
 /* Error state.
    No !important: the only rule in the kit that also resets a matching element's
@@ -5362,6 +5437,16 @@
   .ds-247420 .list-item.drag-after::after { animation: pulse-line 0.6s ease-in-out infinite; }
 }
 
+/* ------------------------------------------------------------
+   Focus-visible for controls with no other component sheet
+   -------------------------------------------------------------- */
+
+.ds-247420 .ds-session-new:focus-visible,
+.ds-247420 .agentchat-cwd-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-inset);
+}
+
 /* ------------------------------------------------------------
    Context Menu Styles
    -------------------------------------------------------------- */
@@ -5926,6 +6011,9 @@
   animation: skeleton-load 1.5s infinite;
   border-radius: var(--r-2);
 }
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .skeleton { animation: none; }
+}
 
 @keyframes skeleton-load {
   0% { background-position: 200% 0; }
@@ -7404,7 +7492,18 @@
 }
 .ds-247420 .ds-prim-panel { padding: clamp(10px, 2.5vw, 14px) clamp(10px, 3vw, 18px); display: flex; flex-direction: column; gap: 18px; }
 .ds-247420 .ds-prim-row { display: flex; gap: var(--space-2-5); flex-wrap: wrap; align-items: center; }
+/* collab overlay specimens (LiveCursorOverlay/RemoteSelectionRings/
+   RecentEditHighlightFlash) are `position:absolute; inset:0`, meant to
+   overlay their own demo row -- without a positioned ancestor closer than
+   the ancestor `.panel` (panel-row.css), they escape to cover the whole
+   panel including its title. Scope them to this row. */
+.ds-247420 .ds-prim-row-collab { position: relative; min-height: 64px; }
 .ds-247420 .ds-prim-label { flex: 0 0 64px; font-family: var(--ff-mono); font-size: var(--fs-nano); color: var(--fg-3); }
+/* Trailing status readouts (e.g. "none pressed yet") share .ds-prim-label's
+   type/color but are free-length prose, not the fixed-width leading row
+   label -- the shared 64px flex-basis wrapped them into a cramped 3-line
+   stack. Give status text room to sit on one line instead. */
+.ds-247420 .ds-prim-label-status { flex: 0 1 auto; white-space: nowrap; }
 
 /* == appended: content-site == */
 /* Home landing wrappers (site/theme.mjs) — replace banned inline styles. */
@@ -7491,8 +7590,8 @@
    need a clearly larger interval between them than within them, or the whole
    form reads as one undifferentiated column. Margin-collapse-free (flow root
    siblings) — first/last are zeroed so the panel body sets the outer edge. */
-.ds-247420 .ds-field-block { display: flex; flex-direction: column; gap: var(--space-1-75); margin: calc(var(--space-4) * var(--density)) 0 0; }
-.ds-247420 .ds-settings-body > .ds-field-block:first-child { margin-top: 0; }
+.ds-247420 .ds-field-block, .ds-247420 .ds-field-wrap { display: flex; flex-direction: column; gap: var(--space-1-75); margin: calc(var(--space-4) * var(--density)) 0 0; }
+.ds-247420 .ds-settings-body > .ds-field-block:first-child, .ds-247420 .ds-settings-body > .ds-field-wrap:first-child { margin-top: 0; }
 /* Field width is a hint about expected input length. A name or handle stretched
    across a 1000px desktop column tells the user to type a paragraph and leaves
    the eye no left-to-right anchor; capping the control (not the row) keeps the
@@ -7571,7 +7670,7 @@
    then has to scroll. `auto` collapses when the pane is short, centres when tall. */
 .ds-247420 .ds-auth-col { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: var(--space-2); margin: auto 0; min-width: 0; }
 /* 18px ceiling: no tier between --space-3 (16) and --space-3-5 (20). */
-.ds-247420 .ds-auth-form { padding: clamp(var(--space-2-75), 3vw, 18px); display: flex; flex-direction: column; gap: var(--space-2-5); }
+.ds-247420 .ds-auth-form { display: flex; flex-direction: column; gap: var(--space-2-5); }
 .ds-247420 .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-*
@@ -7778,18 +7877,19 @@
 /* min-height is a floor, not the intended size — .chat-kit-page's flex-column
    splits leftover height between this (flex:1 1 0%, "leftover") and the
    pattern-notes panel below it (flex:0 1 auto, i.e. sized to its own content
-   first). On a short viewport the panel's natural content height can consume
-   the entire column budget, squeezing this flex-basis:0% sibling to a real,
-   rendered, fully-populated-with-messages 0px — the thread is never empty,
-   it is invisible. Inside .chat itself, .chat-head and .chat-composer are
-   also flex:0-ish naturally-sized siblings of .chat-thread (flex:1 1 0%,
-   chat-polish.css), so the floor has to clear their combined natural height
-   (~55px head + ~78px composer, chrome + gap) with real room left for the
-   thread to still show at least a couple of message bubbles rather than
-   collapsing to a sliver between them — 30vh was not enough on a short
-   viewport. It still grows past this floor via flex:1 whenever the column
-   has room. */
-.ds-247420 .ds-chat-layout { display: flex; flex-direction: column; flex: 1; min-height: max(30vh, 420px); gap: var(--space-3); }
+   first). A hard px floor here (this used to read max(30vh, 420px)) can
+   exceed .chat-kit-page's own available height on a short/laptop viewport —
+   420px plus the panel's natural content height overflows the column
+   instead of yielding to it, so .chat-thread's internal overflow-y:auto
+   never engages and the last couple of messages are stranded below the
+   fold with no reachable scroll region (the thread is never empty, it is
+   invisible). min-height:0 here — same as .chat/.chat-thread already use —
+   lets flex:1 actually shrink this to whatever .chat-kit-page has left,
+   so .chat-thread (flex:1, min-height:0, overflow-y:auto) is the thing that
+   scrolls, not the page. It still grows past 0 via flex:1 whenever the
+   column has room, and 30vh remains the width->grid breakpoint's intent via
+   plain flex growth, not a floor that can outgrow its container. */
+.ds-247420 .ds-chat-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: var(--space-3); }
 .ds-247420 .ds-chat-layout > .chat { min-width: 0; }
 .ds-247420 .ds-chat-detail { display: none; }
 @media (min-width: 1100px) {
@@ -7978,9 +8078,14 @@
   color: var(--fg-3);
   line-height: 1.3;
 }
-/* Message body claims the full second line of the wrapping body row. */
+/* Message body claims the full second line of the wrapping body row. Capped
+   to a readable measure -- unlike .chat-bubble this is a flat list row, not
+   a two-sided bubble, but an uncapped prose line stretches the full pane
+   width (~970px), which reads as dead paper beside every short message
+   rather than an intentionally spacious flat list. */
 .ds-247420 .ds-community-msg-text {
   flex: 1 0 100%;
+  max-width: 70ch;
   margin: 0;
   min-width: 0;
   color: var(--fg-2);