@kupcad/ui 0.1.11 → 0.1.13

package/README.md

@@ -168,8 +168,9 @@ webview and the desktop app to the language server.
   `actions` snippet (a host's own buttons, the Export menu), the Panel button, and a `toggles`
   snippet after it (a host's toggles of its own panes beside the pane, the Parameters button;
   `.kc-control` with `aria-expanded` gives one the Panel button's look). Below, a status
-  line from `status` (`runStatusOf(header)` makes it of a frame's header: Running…, then Ready or
-  Failed, with the run's time and its warnings) over the run's problems from `problems`
+  line from `status` (`runStatusOf(header)` makes it of a frame's header: Running…, by a turning
+  ring (`.kc-spinner`, controls.css's), still where the system asks for less motion, then Ready or Failed, with the run's time and
+  its warnings) over the run's problems from `problems`
   (`problemsOf(header)`: why it failed, then its warnings), a few lines high; one with a line,
   clicked, goes to `onproblem`, for the host to show the script there.
   By the pointer a tooltip says what is under it: the part, its copies, volume and size (the
@@ -285,6 +286,8 @@ webview and the desktop app to the language server.
   A range input is a `.kc-range` and a checkbox a `.kc-check`, drawn the same in each browser
   and webview: a range's track is filled to its thumb by its `--kc-range-fill`, which a host
   sets from its value with `fillOf(value, min, max)` (WebKit and Blink fill none themselves).
+  Work under way beside a status line's words is a `.kc-spinner`, a small ring that turns (still
+  where the system asks for less motion): the pane's Running…, the desktop app's build.
 
 ## Tests
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupcad/ui",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "KupCAD's UI: a three.js viewer of a model the core made, for any host (@kupcad/ui/viewer), and the Svelte panels around it (the viewer's pane, parameters, console, a language server's preview), styled by --kc-* tokens.",
   "license": "AGPL-3.0-only",
   "repository": {
@@ -36,21 +36,21 @@
     "access": "public"
   },
   "dependencies": {
-    "@kupcad/protocol": "0.1.11",
+    "@kupcad/protocol": "0.1.13",
     "three": "^0.187.0",
-    "three-mesh-bvh": "^0.9.17"
+    "three-mesh-bvh": "^0.9.18"
   },
   "devDependencies": {
-    "@kupcad/wasm": "0.1.11",
-    "@playwright/test": "^1.64.1",
+    "@kupcad/wasm": "0.1.13",
+    "@playwright/test": "^1.65.0",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@testing-library/svelte": "^5.4.2",
     "@types/node": "^26.6.6",
     "@types/three": "~0.187.0",
-    "jsdom": "^30.1.3",
+    "jsdom": "^31.0.0",
     "svelte": "^5.57.3",
     "svelte-check": "^4.7.8",
-    "vite": "^8.3.5",
+    "vite": "^8.3.6",
     "vitest": "^5.1.0"
   },
   "peerDependencies": {

package/src/ViewerPane.svelte

@@ -466,7 +466,11 @@
     <div class="line">
       {#if status}
         <div class="status" role="status">
-          <span class="dot {status.state}"></span>
+          {#if status.state === 'running'}
+            <span class="kc-spinner"></span>
+          {:else}
+            <span class="dot {status.state}"></span>
+          {/if}
           {statusText}
         </div>
       {/if}

package/src/controls.css

@@ -181,3 +181,29 @@ button.kc-control.kc-primary:hover:not(:disabled) {
 .kc-check:checked::before {
   visibility: visible;
 }
+
+/*
+  Work under way (a run, a build): a small ring that turns, by a status line's words; a still
+  one where the person asks for less motion.
+*/
+.kc-spinner {
+  display: inline-block;
+  flex: none;
+  box-sizing: border-box;
+  width: 8px;
+  height: 8px;
+  border: 1.5px solid var(--kc-muted);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: kc-turn 0.8s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kc-spinner {
+    animation: none;
+  }
+}
+@keyframes kc-turn {
+  to {
+    transform: rotate(1turn);
+  }
+}