dsh-claude-style 0.13.2 → 0.14.0-dev.12

package/docs/STYLE.md

@@ -223,6 +223,111 @@ and scrolls to its end.
   follows the same hairline so the two tiers stay one outline. Accent is never
   used for focus strokes.
 
+## Motion
+
+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
+edit; the build refuses a time or a curve written anywhere else.
+
+- Feedback: a control answering hover, press or focus.
+- Reveal: content entering the chat area at the host's own 120 ms.
+- Surface: an entrance — a menu, a popover, a panel, a dialog, a toast.
+- Exit: a dismissal, deliberately quicker than the entrance.
+- Travel: something moving along its own track (a fold's door, the reasoning
+  slider).
+- The swap, its gap and the roll of a figure's digits come from the transitions
+  this skin ports; `THIRD_PARTY_NOTICES.md` names each one.
+- Loop periods are separate from durations: a sweep, a pulse, a blink, a spin.
+- Open: a menu growing out of its trigger, a dialog out of the centre, a
+  settings page sliding in — the transitions.dev surfaces, settling on their own
+  curve and closing on the exit duration.
+- The presets these tokens feed live in `packages/client/src/shared/motion.css`:
+  a surface arriving or leaving, a menu growing out of its trigger, a plain
+  fade, one half of a wording swap, the placeholder pulse, and the two paints
+  the waiting line's words can wear (a highlight band and a colour wash). A
+  feature that needs its own effect reads the tokens and keeps its own
+  keyframes.
+
+The table below is generated from `packages/client/src/theme/tokens.json` by `npm run build`;
+edit the JSON, not the table.
+
+<!-- generated:motion (packages/client/src/theme/tokens.json) -->
+| Token | Value | Use |
+|---|---|---|
+| `--dsh-claude-duration-instant` | `80ms` | the composer caret following the insertion point |
+| `--dsh-claude-duration-feedback` | `120ms` | a control answering hover, press or focus: its colour, background, border, shadow, or a small turn or slide of its own parts |
+| `--dsh-claude-duration-reveal` | `120ms` | content entering the chat area: an opened row's body, and each streamed piece of the answer |
+| `--dsh-claude-duration-surface` | `150ms` | a floating surface or a group of controls appearing: popover cards, menus, panels, the search dialog, a toast, a strip fading in |
+| `--dsh-claude-duration-exit` | `120ms` | a surface leaving on the reader's dismissal: a menu or a dialog closing, the overtime badge leaving |
+| `--dsh-claude-duration-open` | `250ms` | a surface growing out of its anchor: a menu out of its trigger, a full-window dialog out of the centre, a settings page sliding in, the overtime badge sliding onto its line |
+| `--dsh-claude-duration-swap` | `150ms` | each half of a wording swap: the old words leaving, the new ones arriving |
+| `--dsh-claude-duration-swap-gap` | `50ms` | the pause between the two halves of a wording swap |
+| `--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-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 |
+| `--dsh-claude-duration-step` | `500ms` | one step of the reasoning window's text rising two lines |
+| `--dsh-claude-duration-pop` | `500ms` | something popping into place: a changed digit of the session numbers, the overtime badge's own pill |
+| `--dsh-claude-duration-rise` | `500ms` | a line of the home greeting rising into place |
+| `--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-duration-reduced` | `0.01ms` | every skin animation and transition under the Reduced animation choice (D26) |
+| `--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-period-preview-swap` | `4000ms` | one turn of the settings page's waiting-line preview: one wording standing, leaving, and standing again |
+| `--dsh-claude-period-wash-hue` | `4000ms` | one turn of the hue rotation the waiting line's colour wash runs through |
+| `--dsh-claude-period-wash-drift` | `5000ms` | one orbit of the colour washes around the waiting line's glyph box |
+| `--dsh-claude-period-pulse` | `1600ms` | a placeholder breathing while its numbers are computed |
+| `--dsh-claude-period-flash` | `1450ms` | one flash of the reasoning slider's top-rung matrix |
+| `--dsh-claude-period-blink` | `1000ms` | one blink of the composer caret |
+| `--dsh-claude-period-spin` | `850ms` | one turn of the background-work ring in the sidebar |
+| `--dsh-claude-period-landed` | `1400ms` | the mark on the turn the conversation navigator landed on |
+| `--dsh-claude-period-hold` | `840ms` | how long the reasoning window's text stands between two steps |
+| `--dsh-claude-period-dot-bounce` | `500ms` | one bounce of the waiting line's loader dots under the Claude brand, and the period each dot's own start is measured against |
+| `--dsh-claude-ease-standard` | `ease` | feedback and surfaces: the default curve |
+| `--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-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-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 |
+| `--dsh-claude-ease-host-sweep` | `steps(48, end)` | the band across the waiting line's words and a running process group's header |
+| `--dsh-claude-distance-nudge` | `4px` | the short offset a surface rises from, and a small row's wording swap travels |
+| `--dsh-claude-distance-travel` | `8px` | the waiting line's wording swap, the distance a popping digit comes from, a settings page's slide, the overtime badge's sideways slide |
+| `--dsh-claude-distance-rise` | `12px` | how far below its place a line of the home greeting starts, and the overtime badge's upward slide |
+| `--dsh-claude-blur-soft` | `2px` | the blur words, digits and badges pass through while they swap or pop in, and a placeholder passes through as it hands its place over |
+| `--dsh-claude-blur-enter` | `3px` | the blur a settings page or a line of the home greeting passes through as it slides or rises in |
+| `--dsh-claude-scale-surface` | `0.98` | the scale a surface grows from as it rises |
+| `--dsh-claude-scale-dropdown` | `0.97` | the scale a menu grows from out of its trigger |
+| `--dsh-claude-scale-dropdown-exit` | `0.99` | the scale a menu shrinks to while it fades on closing |
+| `--dsh-claude-scale-dialog` | `0.96` | the scale a full-window dialog grows from and returns to |
+| `--dsh-claude-timing-feedback` | `var(--dsh-claude-duration-feedback) var(--dsh-claude-ease-standard)` | shorthand: a control's state change, written after the property in a transition |
+| `--dsh-claude-timing-surface` | `var(--dsh-claude-duration-surface) var(--dsh-claude-ease-standard)` | shorthand: a surface appearing, written after the property or the keyframes' name |
+<!-- /generated:motion -->
+
+## Layers
+
+A z-index the skin writes is one of two kinds (D67). 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,
+the window's title row, a floating card, a surface over the whole window —
+stands on a layer token, and the build refuses any other number.
+
+The table below is generated from `packages/client/src/theme/tokens.json` by `npm run build`;
+edit the JSON, not the table.
+
+<!-- generated:layers (packages/client/src/theme/tokens.json) -->
+| Token | Value | Use |
+|---|---|---|
+| `--dsh-claude-layer-control` | `10` | a control kept over the composer card's own stacked rows: the send and stop buttons, the reasoning picker's trigger |
+| `--dsh-claude-layer-picker` | `20` | a picker that hangs its card from inside the composer: the permission picker, whose card has to stand over the controls beside it |
+| `--dsh-claude-layer-chrome` | `30` | the window's title row the skin draws into: the header band's title and actions, the titlebar's view tabs, over the host's own header |
+| `--dsh-claude-layer-float` | `99999` | a floating card or menu over everything the host draws: the popover cards, the hero menu |
+| `--dsh-claude-layer-takeover` | `2147483000` | a surface that covers the whole window: the account-hold page, the sent message's stand-in in flight |
+<!-- /generated:layers -->
+
 ## Text selection
 
 Selection is the one surface that leaves the palette on purpose — it is a
@@ -238,7 +343,7 @@ Both are solid (never translucent) and `!important`, so they override whatever
 colour the text underneath carries — links, inline code, syntax tokens. CSS
 cannot read window focus: Chromium reaches the inactive paint through its own
 internal `-internal-inactive-selection-*` properties, which a stylesheet cannot
-address. `packages/client/src/features/selection/selection.ts` therefore mirrors `document.hasFocus()`
+address. `packages/client/src/features/composer/selection-mirror.ts` therefore mirrors `document.hasFocus()`
 onto `data-dsh-window-blur` and the stylesheet switches on that attribute; the
 selection itself survives the blur.
 
@@ -453,7 +558,8 @@ padding, so the box's hairline stands on the two edges of the column's own
 inset and is exactly as wide as the New session plate below it. In the desktop
 titlebar mode the brand row rises 6px, since the sidebar column starts under
 the 40px titlebar — as far as it goes with the box still wholly below that
-edge, which clips the column.
+edge, which clips the column. A box narrower than 200px keeps its glyph and
+label and leaves the keycaps out.
 
 **Palette.** A modal card set 8vh from the top, 760px wide at most, 16px radius,
 on the same ivory fill (dark `#1E1E1D`) under the host's mask. From the top: a
@@ -471,18 +577,50 @@ and shows the Enter glyph; the others hide it. The card fades in and settles
 from 6px above at 98.5% scale over 0.18s; on close card and mask fade out
 together over 0.14s before the modal unmounts.
 
+## Chat / Code switch · 聊天 / 代码切换
+
+With ds-bot installed, the switch is two 28×22 options on a 2px-padded plate
+with a 7px radius, each option 5px: chat bubbles and `</>`, 16px glyphs in the
+1.3px stroke the sidebar's glyphs use. It is painted on both sides of the switch
+by whoever paints the host's tokens — the theme on the Code side, ds-bot on the
+Chat side — so the plate is a translucent tint (`rgba(20, 20, 19, 0.06)`, dark
+`rgba(255, 255, 255, 0.08)`), the options take the tertiary label at rest and
+the primary on hover, and the checked one is cut from the conversation canvas
+(`--dsw-alias-bg-base`) with a 1px `rgba(20, 20, 19, 0.10)` drop (dark: a
+`rgba(255, 255, 255, 0.14)` fill and no drop). On the desktop it stands in the
+caption row, its right edge 12px inside the sidebar column's, centred in the
+row, and leaves the screen while the column is too narrow to keep 8px clear of
+the controls at the row's left end; on the web it is a cell of the sidebar's
+first row, before the collapse toggle. It moves nothing: there is no
+transition, since the press hands the whole page to the other side.
+
 ## The waiting line · 模型正在做什么的那一行
 
-The host's running row — its whale tail, its divider and its live region — stays
-as the host draws it; the host's own shimmering words step aside for the skin's
-line beside the whale: the wording in the secondary label at 14px on a 24px line,
+The host's running row, its divider and its live region stay as the host draws
+them. Its whale tail is DeepSeek's own character, so under the Claude brand the
+skin hides it and leads the line with its own loader: three 4px dots of the
+accent in force in an 18 × 14 box, resting on the floor, each rising the skin's
+8px and flattening against the floor as it leaves, half a second a bounce with
+the second dot starting two fifths of the period behind the first and the third
+three fifths; under the other brands the host's whale stands. The host's own
+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 carries a highlight
-band swept across it over 2s, and a wording that changes runs the three-phase
+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 the three-phase
 swap over 0.15s: the old one leaves upward with a 2px blur, the new one enters
-from 4px below; under Reduced motion the band is left out and the wording is
-written at once.
+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
+wear these same two paints (`packages/client/src/features/settings/settings.css`)
+and take turns between a state word and the host's own word for a wait, so a card
+shows the wording swap as well as the paint.
 
 While the conversation follows its tail the row is pinned at the place the
 follow's glide comes to rest — the composer's own height, the fade band above it
@@ -504,6 +642,7 @@ inside `…_composerStack …_composerHero` — so only the arrangement differs.
 | greeting | centred, 44.2px serif, brand mark on its line | top left, one fixed line naming the user ("What's up next, …?") in the 20px sans UI face, a 21px brand mark on its line |
 | composer card | vertically centred in the scroll body | the conversation's single-line inline form, resting on the window's bottom edge (16px foot) |
 | between them | — | the usage panel |
+| permission control | the segment group | the conversation's trigger and its card |
 | workspace / preset row | the card's footer tray | hairline chips directly above the card |
 | column width | the hero's centred box | a 720px composer column; the greeting and the panel form a 480px block against its left edge |
 
@@ -531,7 +670,7 @@ The cold start card waits for a workspace: the host marks it with a dashed ring
 and makes every control on it inert, so a press anywhere opens the workspace
 picker. In the studio form the ring sits on the single-line input box itself
 (the host's dashed stroke and colours, flat, no drop shadow), and the permission
-segments fill the card's empty mode strip on the preset a new session starts in
+trigger fills the card's empty mode strip on the preset a new session starts in
 — disabled, like the rest of the card's controls.
 
 The panel is Claude Code's dashboard shape: a flat warm-gray wash (a
@@ -559,8 +698,8 @@ hero, and a range that has not reached it steps down to the longest book it has
 passed, so the range pills keep the same book whenever the totals allow. The heat
 grid takes one
 equal column per week (twenty-six weeks), square cells from a 3px gutter, in
-Claude Code's blue data ramp (`#3b6ecf` at 20/40/65/100 over the neutral empty
-cell); because the columns are fractions of the panel's own width, the newest
+Claude Code's blue data ramp (`#3b6ecf` mixed in at the shares `HOME_HEAT_RAMP`
+in `packages/client/src/constants.ts` lists, over the neutral empty cell); because the columns are fractions of the panel's own width, the newest
 week can never fall past the edge. Hovering a cell shows Claude Code's day tip at
 once: a solid pill in the label ink with the canvas tone for text (so it inverts
 with the theme), 13px medium, reading the day in the shell's language and the

package/lib/assets/manifest.json

@@ -91,75 +91,75 @@
       "encoding": "br",
       "bytes": 143044
     },
-    "968fcbfc3e22.js": {
+    "4ec527e58330.js": {
       "type": "text/javascript; charset=utf-8",
       "encoding": "br",
-      "bytes": 15785
+      "bytes": 15736
     },
-    "930546669455.js.map": {
+    "939b90bfe109.js.map": {
       "type": "application/json; charset=utf-8",
       "encoding": "br",
-      "bytes": 77698
+      "bytes": 78267
     },
-    "e1291f79b7c9.js": {
+    "3b91bf51db72.js": {
       "type": "text/javascript; charset=utf-8",
       "encoding": "br",
-      "bytes": 17851
+      "bytes": 18772
     },
-    "2c01384360ac.js.map": {
+    "a5f822455872.js.map": {
       "type": "application/json; charset=utf-8",
       "encoding": "br",
-      "bytes": 93216
+      "bytes": 99310
     },
-    "5e05b29d5005.js": {
+    "d8df7a57fbe3.js": {
       "type": "text/javascript; charset=utf-8",
       "encoding": "br",
-      "bytes": 9569
+      "bytes": 9972
     },
-    "c52e41b4842b.js.map": {
+    "1c63ba6a0ae4.js.map": {
       "type": "application/json; charset=utf-8",
       "encoding": "br",
-      "bytes": 24912
+      "bytes": 27515
     },
-    "5063c46824b6.js": {
+    "755d09170f37.js": {
       "type": "text/javascript; charset=utf-8",
       "encoding": "br",
-      "bytes": 20390
+      "bytes": 20445
     },
-    "668d06ca781b.js.map": {
+    "89a834267a8e.js.map": {
       "type": "application/json; charset=utf-8",
       "encoding": "br",
-      "bytes": 74023
+      "bytes": 74139
     },
-    "ad2905345a69.js": {
+    "7323c8c86470.js": {
       "type": "text/javascript; charset=utf-8",
       "encoding": "br",
-      "bytes": 7934
+      "bytes": 8044
     },
-    "55a6154f87b5.js.map": {
+    "725219568623.js.map": {
       "type": "application/json; charset=utf-8",
       "encoding": "br",
-      "bytes": 32246
+      "bytes": 32476
     },
-    "31253ed42440.js": {
+    "1952ecd55916.js": {
       "type": "text/javascript; charset=utf-8",
       "encoding": "br",
-      "bytes": 17503
+      "bytes": 19214
     },
-    "ac9b0e625837.js.map": {
+    "aa84f6ab0740.js.map": {
       "type": "application/json; charset=utf-8",
       "encoding": "br",
-      "bytes": 109821
+      "bytes": 125109
     },
-    "abf0547f08a4.js": {
+    "c02a70a798bc.js": {
       "type": "text/javascript; charset=utf-8",
       "encoding": "br",
-      "bytes": 20128
+      "bytes": 30435
     },
-    "ba68f60ecc71.js.map": {
+    "8dd600f2d49b.js.map": {
       "type": "application/json; charset=utf-8",
       "encoding": "br",
-      "bytes": 65734
+      "bytes": 104310
     }
   }
 }