@sparkelf/dsh-patch-state-dot-brand-blue 0.2.0-rc.26

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 DeepSeek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,39 @@
+{
+  "description": "Exact source patch restoring the pixel-matrix loading animation in the brand blue",
+  "dshPatch": {
+    "formatVersion": 1,
+    "variants": [
+      {
+        "dsh": ">=0.1.7-rc.2",
+        "file": "./patches/state-dot-brand-blue.patch",
+        "id": "state-dot-brand-blue",
+        "target": {
+          "baseRevision": "477b4f420553e8a52c2fbccc464d7561b239c443",
+          "kind": "dsh-source",
+          "paths": [
+            "packages/client/ui-primitives/src/"
+          ]
+        }
+      }
+    ]
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    "./patches/state-dot-brand-blue.patch": "./patches/state-dot-brand-blue.patch"
+  },
+  "files": [
+    "patches/*.patch"
+  ],
+  "license": "MIT",
+  "name": "@sparkelf/dsh-patch-state-dot-brand-blue",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "directory": "patches/npm/state-dot-brand-blue",
+    "type": "git",
+    "url": "git+https://github.com/SparkElf/deepseek-harness-plus.git"
+  },
+  "type": "module",
+  "version": "0.2.0-rc.26"
+}

package/patches/state-dot-brand-blue.patch

@@ -0,0 +1,174 @@
+diff --git a/packages/client/ui-primitives/src/StateDot.module.css b/packages/client/ui-primitives/src/StateDot.module.css
+index 1a692c6892..3aa3186b94 100644
+--- a/packages/client/ui-primitives/src/StateDot.module.css
++++ b/packages/client/ui-primitives/src/StateDot.module.css
+@@ -1,4 +1,12 @@
+-/* Solid states keep the 10px layout slot but paint one 6px currentColor core. */
++/* Ongoing blue has no alias token (state-business-primary is the 500 step,
++ * not this 450) — component-level var pinned to the static scale instead. */
++.dot,
++.matrix {
++  --dsh-state-ongoing: var(--dsw-static-deepseek-450);
++}
++
++/* Solid states: same-color halo via a 0.10-opacity outer layer (::before)
++ * with a 6/10-scale solid core. Layer color rides currentColor set per state. */
+ .dot {
+   position: relative;
+   display: inline-block;
+@@ -31,70 +39,29 @@
+   color: var(--dsw-alias-state-idle-primary);
+ }
+ 
+-/* Ongoing is the sole non-dot state: a quiet full ring sits behind a centered
+- * breathing arc while the complete glyph rotates continuously. Both animations
+- * share one 1.5s period so pinning their start times aligns them together. */
+-.spinner {
++/* Pixel chase: each outer cell holds a discrete brightness step (flat keyframe
++ * holds, no tweening — the retro feel), peaking when the chase hits it and
++ * decaying over the next three cells. Phase offsets come from per-rect
++ * animation-delay (index * -125ms) set inline by the component. */
++.matrix {
+   flex: none;
+-  color: var(--dsw-alias-label-tertiary);
+-}
+-
+-.spinnerMotion {
+-  transform-origin: center;
+-  animation: dsh-state-dot-spin 1.5s linear infinite;
+-}
+-
+-.spinnerTrack,
+-.spinnerArc {
+-  fill: none;
+-  stroke: currentColor;
+-  stroke-width: 2;
+-  stroke-linecap: round;
+-}
+-
+-.spinnerTrack {
+-  opacity: 0.25;
++  color: var(--dsh-state-ongoing);
+ }
+ 
+-.spinnerArc {
+-  stroke-dasharray: 12 150;
+-  animation: dsh-state-dot-dash 1.5s ease-in-out infinite;
++.cell {
++  fill: currentColor;
++  opacity: 0.15;
++  animation: dsh-state-dot-chase 1s infinite;
+ }
+ 
+-@keyframes dsh-state-dot-spin {
+-  to { transform: rotate(360deg); }
+-}
+-
+-@keyframes dsh-state-dot-dash {
+-  0% {
+-    stroke-dasharray: 12 150;
+-    stroke-dashoffset: 0;
+-  }
+-
+-  50% {
+-    stroke-dasharray: 24 150;
+-    stroke-dashoffset: -6;
+-  }
+-
+-  100% {
+-    stroke-dasharray: 12 150;
+-    stroke-dashoffset: 0;
+-  }
+-}
+-
+-@media (prefers-reduced-motion: reduce) {
+-  .spinnerMotion,
+-  .spinnerArc {
+-    animation: none;
+-  }
+-
+-  .spinnerArc {
+-    stroke-dasharray: 18 150;
+-    stroke-dashoffset: -3;
+-  }
++@keyframes dsh-state-dot-chase {
++  0%, 12.4% { opacity: 1; }
++  12.5%, 24.9% { opacity: 0.6; }
++  25%, 37.4% { opacity: 0.35; }
++  37.5%, 100% { opacity: 0.15; }
+ }
+ 
+ .step { display: inline-flex; flex: none; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 50%; corner-shape: round; border: 1.5px solid var(--dsw-alias-label-tertiary); color: var(--dsw-alias-label-primary-foreground); }
+ .step[data-state='done'] { border-color: var(--dsw-alias-state-success-primary); background: var(--dsw-alias-state-success-primary); }
+ .step[data-state='error'] { border-color: var(--dsw-alias-state-error-primary); background: var(--dsw-alias-state-error-primary); }
+-.step[data-state='warning'] { border-color: var(--dsw-alias-state-warn-primary); }
++.step[data-state='warning'] { border-color: var(--dsw-alias-state-warn-primary); }
+
+diff --git a/packages/client/ui-primitives/src/StateDot.tsx b/packages/client/ui-primitives/src/StateDot.tsx
+index ede3c6b98c..f54ebddf44 100644
+--- a/packages/client/ui-primitives/src/StateDot.tsx
++++ b/packages/client/ui-primitives/src/StateDot.tsx
+@@ -3,24 +3,15 @@ import css from './StateDot.module.css'
+ import { IconCheckOutlineRegular } from './icons/index.tsx'
+ 
+ /**
+- * State semantic: green done / amber user-attention / tertiary-grey loading /
++ * State semantic: green done / amber user-attention / blue running ring /
+  * red error / neutral-grey idle for a tracked subject with nothing in progress.
+  */
+ export type StateDotState = 'done' | 'warning' | 'ongoing' | 'error' | 'idle'
+ 
+-/**
+- * Pin the loader's CSS animations to document time zero. A CSS animation starts
+- * when its element is inserted, so loaders mounted at different moments rotate
+- * out of phase; one shared start time keeps every visible loader in step.
+- * @param element - the mounted loader, or null on unmount.
+- */
+-function syncSpinner(element: SVGSVGElement | null): void {
+-  if (element === null) return
+-  // jsdom (the unit lane) implements no Web Animations despite lib.dom's
+-  // non-optional typing; the optional call leaves that lane unsynced.
+-  const spinner = element as { getAnimations?: SVGSVGElement['getAnimations'] }
+-  for (const animation of spinner.getAnimations?.({ subtree: true }) ?? []) animation.startTime = 0
+-}
++/** Outer 3x3 matrix cells (2px pixels on a 10px grid), clockwise from top-left. */
++const MATRIX_CELLS: readonly (readonly [number, number])[] = [
++  [0, 0], [4, 0], [8, 0], [8, 4], [8, 8], [4, 8], [0, 8], [0, 4],
++]
+ 
+ /**
+  * Render a state dot.
+@@ -40,18 +31,26 @@ export function StateDot({ state, size, className, appearance = 'dot' }: {
+   if (state === 'ongoing') {
+     return (
+       <svg
+-        ref={syncSpinner}
+-        className={clsx(css.spinner, className)}
++        className={clsx(css.matrix, className)}
+         data-state="ongoing"
+         width={edge}
+         height={edge}
+-        viewBox="0 0 24 24"
++        viewBox="0 0 10 10"
++        shapeRendering="crispEdges"
+         aria-hidden="true"
+       >
+-        <g className={css.spinnerMotion}>
+-          <circle className={css.spinnerTrack} cx="12" cy="12" r="9.5" />
+-          <circle className={css.spinnerArc} cx="12" cy="12" r="9.5" />
+-        </g>
++        {MATRIX_CELLS.map(([x, y], index) => (
++          <rect
++            key={`${x}-${y}`}
++            className={css.cell}
++            x={x}
++            y={y}
++            width="2"
++            height="2"
++            /* Negative delay phases the chase so every cell animates from mount. */
++            style={{ animationDelay: `${(index - MATRIX_CELLS.length) * 125}ms` }}
++          />
++        ))}
+       </svg>
+     )
+   }