dsh-claude-style 0.15.0-dev.22 → 0.16.0-dev.27

package/docs/STYLE.md

@@ -18,7 +18,11 @@ Design tokens for `dsh-claude-style`, recreating the Claude Code Desktop aesthet
 
 Rules:
 
-- Never pure white, never pure black, never cool grays.
+- Never pure white, never pure black, never cool grays. The reader's own message
+  plate is the one fill that is not a step of the warm surface ladder and not the
+  canvas either (`--dsw-specific-bubble`: the neutral the table header wears in
+  light, a 6% white lift in dark) — the product's own light tint is a cool
+  blue-grey, which reads blue beside this canvas.
 - Accent usage stays under ~10% of visible elements.
 
 **The DeepSeek brand's palettes.** The DeepSeek brand turns both palettes
@@ -46,9 +50,9 @@ keeps where it states none of its own; `—` is a token that theme leaves unset.
 | `--dsw-alias-bg-layer-2` | `#fbfbf9` | `#f7f9ff` | `#242320` | `#212631` | host's own |  |
 | `--dsw-alias-bg-layer-3` | `#f9f9f6` | `#f4f7fe` | `#2e2c29` | `#2a303c` | host's own |  |
 | `--dsw-alias-bg-overlay` | `#ffffff` | `#ffffff` | `#242320` | `#212631` | host's own |  |
-| `--dsw-alias-border-l1` | `#e8e6dc` | `#e7ecf7` | `#242320` | `#212631` | host's own |  |
-| `--dsw-alias-border-l2` | `#dedcd2` | `#dde4f1` | `#2e2c29` | `#2a303c` | host's own |  |
-| `--dsw-alias-border-l3` | `#d0cdc1` | `#cfd8ea` | `#3a3833` | `#363d4b` | host's own |  |
+| `--dsw-alias-border-l1` | `#e8e6dc` | `#e7ecf7` | `rgba(255, 255, 255, 0.09)` | `#212631` | host's own | the standard edge: card and panel outlines, dividers, field outlines |
+| `--dsw-alias-border-l2` | `#dedcd2` | `#dde4f1` | `rgba(255, 255, 255, 0.18)` | `#2a303c` | host's own |  |
+| `--dsw-alias-border-l3` | `#d0cdc1` | `#cfd8ea` | `rgba(255, 255, 255, 0.30)` | `#363d4b` | host's own |  |
 | `--dsw-alias-brand-primary` | `#d97757` | `#4d6bfe` | `#d97757` | `#4d6bfe` | host's own | the single accent: checks, focus rings, selected marks |
 | `--dsw-alias-brand-text` | `#faf9f5` | `#fafbff` | `#faf9f5` | `#eef1f8` | host's own |  |
 | `--dsw-alias-button-primary-fill` | `#d97757` | `#4d6bfe` | `#d97757` | `#4d6bfe` | host's own |  |
@@ -73,6 +77,8 @@ keeps where it states none of its own; `—` is a token that theme leaves unset.
 | `--dsw-alias-label-secondary` | `#6e6a60` | `#61666b` | `#b0aea5` | `#aeb5c4` | host's own |  |
 | `--dsw-alias-label-tertiary` | `#8f8a7e` | `#81858c` | `#8f8d84` | `#8a92a3` | host's own |  |
 | `--dsw-alias-label-caption` | `#a6a094` | `#adb2b8` | `#6b6a65` | `#666e7e` | host's own |  |
+| `--dsw-alias-label-shimmer` | `color-mix(in srgb, #141413 30%, transparent)` | `color-mix(in srgb, #141413 30%, transparent)` | `color-mix(in srgb, #faf9f5 45%, transparent)` | `color-mix(in srgb, #faf9f5 45%, transparent)` | host's own | the highlight band's tint over running words: the host's own rows and the skin's band (shared/sweep-band.ts) alike |
+| `--dsw-alias-label-deep-diving-shimmer` | `color-mix(in srgb, #141413 30%, transparent)` | `color-mix(in srgb, #141413 30%, transparent)` | `color-mix(in srgb, #faf9f5 45%, transparent)` | `color-mix(in srgb, #faf9f5 45%, transparent)` | host's own | the band's tint inside the running row, which the host points --dsw-alias-label-shimmer at; under Claude it is the same warm band as everywhere else |
 | `--dsw-alias-state-business-primary` | `#d97757` | `#4d6bfe` | `#d97757` | `#6a84ff` | host's own |  |
 | `--dsw-alias-state-business-tertiary` | `#e9dfd2` | `#e9eeff` | `#3a2a22` | `#253056` | host's own |  |
 | `--dsw-alias-link` | `#c6613f` | `#3b56d9` | `#e08a6d` | `#8fa4ff` | host's own | text link at rest |
@@ -95,7 +101,7 @@ keeps where it states none of its own; `—` is a token that theme leaves unset.
 | `--dsh-claude-link-hover` | `#a94f2f` | `#2c43b8` | `#f0a488` | `#b0c0ff` | `var(--dsw-alias-link)` | text link under the pointer |
 | `--dsh-claude-logo-ink` | `#141413` | `#4d6bfe` | `#faf9f5` | `#4d6bfe` | `var(--dsw-alias-label-primary)` | sidebar brand art: the whale and the wordmark |
 | `--dsw-specific-menu` | `#ffffff` | `#ffffff` | — | — | host's own |  |
-| `--dsw-specific-bubble` | `var(--dsh-claude-hover-bg)` | `#eaf0fe` | — | `#232a3a` | host's own | user message bubble |
+| `--dsw-specific-bubble` | `#f0f0ef` | `#eaf0fe` | `rgba(255, 255, 255, 0.06)` | `#232a3a` | host's own | user message bubble |
 | `--dsh-claude-chip` | `#f6f6f4` | `#f2f6fd` | — | — | `var(--dsw-specific-selector)` | segmented control and switch at rest |
 | `--dsh-claude-meter-peak` | `#a4621d` | `#9a5a1a` | `#e2a45f` | `#e5ae67` | `var(--dsw-alias-state-warn-label)` | the peak rate badge: the expensive end of a provider's own billing clock |
 | `--dsh-claude-meter-valley` | `#3d7550` | `#2e7554` | `#8cbf96` | `#7cc2a0` | `var(--dsw-alias-state-success-primary)` | the off-peak rate badge, and the dated promotions priced below it |
@@ -149,7 +155,7 @@ text, a border or an accent reads a token.
 On the Windows desktop the 40px caption row has no colour of its own: the
 sidebar and the conversation run to the window's top edge, each in its own
 fill (`--dsh-claude-sidebar-canvas`, `--dsh-claude-canvas`), and the sidebar's
-1px `--dsw-alias-border-l1` hairline runs with them from the top edge to the
+0.5px `--dsw-alias-border-l1` hairline runs with them from the top edge to the
 bottom. The conversation column and the fullscreen file panel lose the host's
 16px top-left corner, so the hairline meets them straight. The three window
 buttons sit on the page itself: no block of their own behind them, and they dim
@@ -203,8 +209,18 @@ and scrolls to its end.
   composer card's 18px (the host's 22px less 4), the inline composer's 14px and
   11px, the permission and workspace segments' 7px, the view tabs' 5px, the
   peak-rate and file pills' 999px.
-- Borders: 1px warm hairline. The same host copies keep their own stroke: the
-  inline composer's 1.6px stop square.
+- Borders: 1px, and in dark not a colour but a highlight. The three border
+  tokens are one translucent white at `.09` / `.18` / `.30`, so a card, a panel,
+  a code block or a keycap reads as a chamfer catching the top light over
+  whatever fill it sits on rather than as a contour whose colour has to be
+  re-picked per surface. The light rungs stay the warm opaque ladder. A copy of a
+  host control keeps that control's own stroke: the inline composer's 1.6px stop
+  square.
+- Hairline: 0.5px, for the split between the sidebar and the conversation
+  (`theme/chrome.css`, one device pixel on a retina display and the width the
+  product itself states), the Markdown table frame and the trajectory chip
+  (`theme/typography.css`, `features/chat-files`). Every other single-direction
+  rule stays 1px.
 - Spacing: 4 px rhythm.
 - Bottom edge: the transcript never fades behind the composer by shadow. The
   composer seat paints an opaque `var(--dsw-alias-bg-base)` bar across its own
@@ -227,7 +243,7 @@ and scrolls to its end.
 
 Every duration, curve, distance, blur and scale the skin uses is a token here,
 and a stylesheet or a Web Animations call reads the token rather than writing the
-value (D65). One value per role, so a faster feedback or a calmer swap is one
+value (D9). One value per role, so a faster feedback or a calmer swap is one
 edit; the build refuses a time or a curve written anywhere else.
 
 - Feedback: a control answering hover, press or focus.
@@ -267,7 +283,7 @@ edit the JSON, not the table.
 | `--dsh-claude-duration-swap-gap` | `50ms` | the offset the words arriving start after the words leaving, so the two halves of a wording swap travel together |
 | `--dsh-claude-duration-roll` | `160ms` | a figure's characters rolling over to new digits |
 | `--dsh-claude-duration-move` | `200ms` | something travelling along its own track: a fold's door, the reasoning slider's knob and fill |
-| `--dsh-claude-duration-slide` | `240ms` | the segmented controls' sliding highlight (D20), a sidebar icon's quarter turn, and the wording box taking the width of the words arriving |
+| `--dsh-claude-duration-slide` | `240ms` | the segmented controls' sliding highlight, a sidebar icon's quarter turn, the wording box taking the width of the words arriving, and streamed content sliding up from the bottom edge |
 | `--dsh-claude-duration-fade` | `300ms` | a slow cross-fade: the theme flip, the titlebar tabs' hover reveal, the reasoning knob's glow, a placeholder handing its place to what it stood for |
 | `--dsh-claude-duration-bounce` | `350ms` | a switch's knob travelling across with its double bounce |
 | `--dsh-claude-duration-flight` | `400ms` | the sent message flying from the composer to its row |
@@ -277,8 +293,9 @@ edit the JSON, not the table.
 | `--dsh-claude-duration-stagger` | `70ms` | how far behind the piece before it a staggered piece starts: the last two popping digits, the greeting's second line |
 | `--dsh-claude-period-dot-orbit` | `2400ms` | one turn of the waiting line's loader dots that swap corners: four quarter-turns of the two pairs, which leaves every dot where it started |
 | `--dsh-claude-period-dot-rotate` | `10s` | how long one of the waiting line's loader motions stands before another takes its place, the next one picked so a motion never follows itself |
-| `--dsh-claude-duration-reduced` | `0.01ms` | every skin animation and transition under the Reduced animation choice (D26) |
+| `--dsh-claude-duration-reduced` | `0.01ms` | every skin animation and transition under the Reduced animation choice (D40) |
 | `--dsh-claude-period-host-sweep` | `1500ms` | one pass of the highlight band across the waiting line's words and a running process group's header |
+| `--dsh-claude-duration-host-sweep-delay` | `300ms` | how long the highlight band waits after its words appear before its first pass |
 | `--dsh-claude-period-preview-swap` | `4000ms` | one turn of the settings page's waiting-line preview: one wording standing, leaving, and standing again |
 | `--dsh-claude-period-preview-reveal` | `4000ms` | one turn of the settings page's new-text fade preview: the sample arriving character by character, then standing before the next wipe |
 | `--dsh-claude-period-preview-caret` | `4000ms` | one turn of the settings page's caret preview: the sample line typed out, then standing whole before the next turn |
@@ -297,7 +314,7 @@ edit the JSON, not the table.
 | `--dsh-claude-ease-out` | `ease-out` | something arriving and settling: a fold's door, content entering the chat area, the landing mark |
 | `--dsh-claude-ease-enter` | `cubic-bezier(0.34, 1.3, 0.64, 1)` | a message the reader sends growing into its row: the slight overshoot as it takes its full size |
 | `--dsh-claude-ease-in-out` | `ease-in-out` | something that leaves and returns, or swaps in place: wording swaps, pulses, flashes |
-| `--dsh-claude-ease-glide` | `cubic-bezier(0.22, 0.61, 0.36, 1)` | travel along a track: the sliding highlight, the reasoning slider, the search dialog's entrance, the reasoning window's step, the wording box's width |
+| `--dsh-claude-ease-glide` | `cubic-bezier(0.22, 0.61, 0.36, 1)` | travel along a track: the sliding highlight, the reasoning slider, the search dialog's entrance, the reasoning window's step, the wording box's width, the stream's slide |
 | `--dsh-claude-ease-roll` | `cubic-bezier(0.4, 0, 0.2, 1)` | digits rolling over: the file rows' tail and the process group header's counts |
 | `--dsh-claude-ease-spring` | `cubic-bezier(0.34, 1.45, 0.64, 1)` | a small overshoot as something lands: the session numbers' digits and the overtime badge popping in, a switch's knob bouncing past its end |
 | `--dsh-claude-ease-settle` | `cubic-bezier(0.22, 1, 0.36, 1)` | a surface or a page settling into place out of its anchor: menus and dialogs opening and closing, a settings page sliding, the overtime badge sliding onto its line, the greeting's lines rising |
@@ -320,7 +337,7 @@ edit the JSON, not the table.
 
 ## Layers
 
-A z-index the skin writes is one of two kinds (D67). Inside one box, siblings
+A z-index the skin writes is one of two kinds (D9). Inside one box, siblings
 are ordered with a literal from -1 to 9: a fill painted under its own content,
 a label over its sliding pill, the composer's rows over one another. Anything
 that has to clear what the host draws around it — the composer's own controls,
@@ -415,9 +432,9 @@ the shell itself. What it carries is described under "Context popover" below.
 | Property | Value |
 |---|---|
 | background | `var(--dsw-alias-bg-overlay)`; dark `#1e1e1d` |
-| border | `1px solid var(--dsw-alias-border-l1)`; dark `#2e2c29` |
+| border | `1px solid var(--dsw-alias-border-l1)`; dark the same stroke, which the dark ladder makes a highlight. The edge stays the card's own border: the box the placement reads and the opening animation scales keeps the paint path it has always had, and no stroke is drawn inside it |
 | radius | 12px |
-| shadow | `0 8px 30px rgba(20,20,19,.12), 0 2px 8px rgba(20,20,19,.06)`; dark `rgba(0,0,0,.5)` / `rgba(0,0,0,.3)` |
+| shadow | `0 8px 24px rgba(20,20,19,.12), 0 2px 6px rgba(20,20,19,.08)`; dark a 3px `rgba(0,0,0,.35)` falloff outside the border first — it separates the lit edge from the near-black canvas — then `0 8px 28px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.45)` |
 | padding | 6px |
 | layout | flex column, `gap: 6px`; a list body stacks its rows 3px apart |
 | z-index | 99999, above the host's own menus (1100) |
@@ -440,8 +457,13 @@ the shell itself. What it carries is described under "Context popover" below.
 **Heading, separator, footer**
 
 - heading row: 11px / 16px at 600, `letter-spacing: .04em`, uppercase, `label-tertiary`, `padding: 6px 7px 2px`
-- separator: 1px `var(--dsw-alias-border-l1)`, `margin: 2px 4px`
-- pinned footer: `margin-top` / `padding-top` 4px, `1px solid var(--dsw-alias-border-l1)` above
+- separator: `0.5px` `var(--dsw-alias-border-l2)` — the host's own line on a menu
+  surface (`Menu.module.css`) — `margin: 2px 4px`, drawn as a top border on a
+  zero-height box. One rule in the shared shell covers every separator in a card,
+  the host's own menu separators included, so the line is one thickness wherever
+  it appears and does not follow the card's opening scale
+- pinned footer: `margin-top` / `padding-top` 4px, and the same `0.5px`
+  `var(--dsw-alias-border-l2)` line above it
 
 **Host surfaces**
 
@@ -632,14 +654,18 @@ shimmering words step aside for the skin's line beside it: the wording in the
 secondary label at 14px on a 24px line,
 the turn's clock 8px later in the caption at 13px with tabular figures, and the
 "No response yet" badge 8px after that (11px on a 16px line, 0 6px padding, a 5px
-radius, the warning label over 16% of itself). The wording wears one of two
-paints, whichever the Motion tab's Waiting-line animation holds: a highlight band
-swept across it the way the host's own rows sweep — 1.5s a pass with the band
-resting the last third of it, in the host's shimmer tint — or a colour wash, the
-seven radial washes of `packages/client/src/shared/motion.css` over a grey ramp,
-orbiting the glyph box (5s an orbit while the hue turns a full circle over 4s),
-which is the effect transitions.dev ships as its Pro gradient text. A wording that
-changes runs both halves of the swap at once and is over in 0.2s: the old one
+radius, the warning label over 16% of itself). The line takes the row's own
+width and gives way inside it: the words are carried whole, so a clause the row
+has no room for is clipped where the room ends and the copy draws an ellipsis,
+with the loader, the clock and the badge keeping their places. The wording wears
+one of two paints, whichever the Motion tab's Waiting-line animation holds: a
+highlight band swept across it the way the host's own rows sweep — 1.5s a pass
+with the band resting the last third of it, in the host's shimmer tint — or a
+colour wash, the seven radial washes of `packages/client/src/shared/motion.css`
+over a grey ramp, orbiting the glyph box (5s an orbit while the hue turns a full
+circle over 4s), which is the effect transitions.dev ships as its Pro gradient
+text. A wording that changes runs both halves of the swap at once and is over in
+0.2s: the old one
 leaves upward with a 2px blur while the new one, parked one gap, enters from 4px
 below; under Reduced motion the band is left out, the wash holds its still frame,
 and the wording is written at once. The Motion tab's preview cards
@@ -847,5 +873,5 @@ plays its reaction.
   the look no single feature owns is in `packages/client/src/theme/`, and the parts several
   features share (the popover card and rows, the sliding highlight) are in
   `packages/client/src/shared/`. The host selector discipline and the style checks the build
-  runs are in `docs/decisions/` (D3, D4, D9, D19, D30, D51).
+  runs are in `docs/adr/` (D3, D9, D30).
 

package/lib/assets/manifest.json

@@ -91,75 +91,75 @@
       "encoding": "br",
       "bytes": 143044
     },
-    "18b7187b47b9.js": {
+    "dab5fb383802.js": {
       "type": "text/javascript; charset=utf-8",
       "encoding": "br",
       "bytes": 15684
     },
-    "2f741302b16a.js.map": {
+    "43a07ef82dc2.js.map": {
       "type": "application/json; charset=utf-8",
       "encoding": "br",
-      "bytes": 78196
+      "bytes": 76827
     },
-    "1a999a7d3c24.js": {
+    "b7ec75cf39a7.js": {
       "type": "text/javascript; charset=utf-8",
       "encoding": "br",
       "bytes": 18812
     },
-    "00094f1ce790.js.map": {
+    "7d0cb6862824.js.map": {
       "type": "application/json; charset=utf-8",
       "encoding": "br",
-      "bytes": 99722
+      "bytes": 99291
     },
-    "d8df7a57fbe3.js": {
+    "1cefeb3d67c7.js": {
       "type": "text/javascript; charset=utf-8",
       "encoding": "br",
       "bytes": 9972
     },
-    "1c63ba6a0ae4.js.map": {
+    "12fb21991efd.js.map": {
       "type": "application/json; charset=utf-8",
       "encoding": "br",
-      "bytes": 27515
+      "bytes": 28060
     },
-    "550eb2fb99aa.js": {
+    "34d559377558.js": {
       "type": "text/javascript; charset=utf-8",
       "encoding": "br",
-      "bytes": 20524
+      "bytes": 20492
     },
-    "18e688cfe04a.js.map": {
+    "fdf2c93f29ed.js.map": {
       "type": "application/json; charset=utf-8",
       "encoding": "br",
-      "bytes": 75166
+      "bytes": 74893
     },
-    "7323c8c86470.js": {
+    "2c3bd0b6c22c.js": {
       "type": "text/javascript; charset=utf-8",
       "encoding": "br",
       "bytes": 8044
     },
-    "725219568623.js.map": {
+    "3052f111c0f6.js.map": {
       "type": "application/json; charset=utf-8",
       "encoding": "br",
-      "bytes": 32476
+      "bytes": 33023
     },
-    "840442766089.js": {
+    "1da1959a3cb1.js": {
       "type": "text/javascript; charset=utf-8",
       "encoding": "br",
       "bytes": 20650
     },
-    "bdd4f5b8366f.js.map": {
+    "3632e8c0d941.js.map": {
       "type": "application/json; charset=utf-8",
       "encoding": "br",
       "bytes": 132860
     },
-    "6947faba7fb6.js": {
+    "acf9cf79c43e.js": {
       "type": "text/javascript; charset=utf-8",
       "encoding": "br",
-      "bytes": 36353
+      "bytes": 36632
     },
-    "80695e8ab866.js.map": {
+    "98ff063feb64.js.map": {
       "type": "application/json; charset=utf-8",
       "encoding": "br",
-      "bytes": 129136
+      "bytes": 130226
     }
   }
 }