craft-library 0.3.0 → 0.4.0

package/README.md

@@ -1,6 +1,6 @@
 # Craft Library
 
-Interface pieces by [Sara Lobo](https://www.saralobodesign.com/), designed, tested and polished one detail at a time: a liquid glass nav bar, a bursting heart, a magnetic icon, an iridescent 3D card and a glass piggy bank. Each one is the exact piece from the library, with its own CSS and motion, for React 18+ or plain HTML. The only dependency is three.js, for the two 3D pieces, and it loads only when one of them is on the page.
+Interface pieces by [Sara Lobo](https://www.saralobodesign.com/), designed, tested and polished one detail at a time: a liquid glass nav bar, a bursting heart, a magnetic icon, an iridescent 3D card, a glass piggy bank, and two "thinking" indicators, the Magic sphere and the Sweep. Each one is the exact piece from the library, with its own CSS and motion, for React 18+ or plain HTML. The only dependency is three.js, for the two 3D pieces, and it loads only when one of them is on the page.
 
 ```bash
 npm install craft-library
@@ -101,9 +101,27 @@ import { PiggyBank } from 'craft-library';
 
 It is WebGL (three.js 0.169, which comes with the package and loads the first time it mounts), so one per screen is best. It is made for a dark background; black is best.
 
+## Magic sphere and Sweep
+
+Two "thinking" indicators for the wait while an answer is being written: a ball of dots, drawn on a canvas, with the word beside it. The **Magic sphere** is a Rubik's cube on a ball, one grey tone per face: its slices turn and scramble the pieces, retrace their steps until every piece is home, and the ball lights up for a moment while a light passes through the word. In the **Sweep**, a wave crosses a dotted globe from left to right, lifting the dots it passes, runs on through the word at the same speed, and rests.
+
+```jsx
+import { MagicSphere, SweepSphere } from 'craft-library';
+
+{isThinking && <MagicSphere />}
+{isThinking && <SweepSphere label="Searching" />}
+```
+
+| Prop | | |
+|---|---|---|
+| `label` | `string` | The word beside the ball. Default `"Thinking"`; `""` shows the ball alone (still announced as "Thinking"). |
+| `size` | `number \| string` | The ball, px or any CSS length. Default `32`. Under 64px it draws more, finer dots, made to sit beside text; larger, it shows the full detail. |
+
+Both are made for a dark background: the dots and the word are light. On a light one, set `--thinking-ink` (the dots and the light in the word) and `--thinking-dim` (the word at rest) on it or a parent. The element is a `role="status"`.
+
 ## Plain HTML
 
-One script registers five tags. Same pieces, same props as attributes.
+One script registers seven tags. Same pieces, same props as attributes.
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/craft-library@0/dist/craft.js"></script>
@@ -113,12 +131,14 @@ One script registers five tags. Same pieces, same props as attributes.
 <magnetic-icon size="40"></magnetic-icon>
 <iridescent-card></iridescent-card>       <!-- "cardturn" event: e.detail.face; 100% wide, 480px tall unless you size it -->
 <piggy-bank></piggy-bank>                 <!-- "piggydone" event after each play; el.play() replays; 100% wide, 560px tall unless you size it -->
+<magic-sphere></magic-sphere>             <!-- label="Thinking" (default; label="" for the ball alone), size="32" -->
+<sweep-sphere></sweep-sphere>
 ```
 
 With a bundler and no React: `import 'craft-library/elements'`.
 
 ## Motion and access
 
-Every item is a real `<button>` with an accessible name; the nav marks the chosen one with `aria-current` and moves with the arrow keys. The card is a `role="button"` that Enter, Space and the arrow keys turn over; the piggy bank is a labelled image. With `prefers-reduced-motion`, the heart only changes colour, the nav only slides, the magnet stays still the card swaps faces with a fade, with no entrance and no breathing, and the piggy bank stays in place while the coins appear inside it and its eyes close.
+Every item is a real `<button>` with an accessible name; the nav marks the chosen one with `aria-current` and moves with the arrow keys. The card is a `role="button"` that Enter, Space and the arrow keys turn over; the piggy bank is a labelled image. With `prefers-reduced-motion`, the heart only changes colour, the nav only slides, the magnet stays still, the card swaps faces with a fade, with no entrance and no breathing, the piggy bank stays in place while the coins appear inside it and its eyes close, and the thinking balls hold still and only breathe.
 
 MIT · [Craft Library](https://claude.ai/artifact/LBBWCfEHJGvfBSynV3wDuR)

package/dist/cdn.js

@@ -1,4 +1,4 @@
-// the one-file build for a <script> tag: registers the five tags and exposes the mount functions (the 3D pieces' scenes
+// the one-file build for a <script> tag: registers the seven tags and exposes the mount functions (the 3D pieces' scenes
 // are fetched from next to this file the first time one is mounted)
-import { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank } from './elements.js';
-window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank };
+import { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking } from './elements.js';
+window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking };

package/dist/craft.js

@@ -1,4 +1,4 @@
-/* Craft Library, by Sara Lobo · liquid glass nav bar, bursting heart, magnetic icon, iridescent card, glass piggy bank · <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank> */
+/* Craft Library, by Sara Lobo · liquid glass nav bar, bursting heart, magnetic icon, iridescent card, glass piggy bank, magic sphere, sweep · <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank>, <magic-sphere>, <sweep-sphere> */
 (() => {
   // dist/style.js
   var done = /* @__PURE__ */ new Set();
@@ -1392,6 +1392,389 @@
     };
   }
 
+  // dist/thinking.js
+  var CSS4 = `/* Thinking orbs \xB7 Craft Library, by Sara Lobo
+   A ball of dots and the word beside it, for the wait while an answer is being written. thinking.js draws the ball
+   and, for the Sweep, carries the ball's wave on through the word. Made for dark backgrounds: on a light one, set
+   --thinking-ink (the dots and the light in the word) and --thinking-dim (the word at rest). */
+
+.thinking {
+  --thinking-size: 32px;
+  --thinking-ink: #EDEDED;
+  --thinking-dim: #8A8A8A;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  vertical-align: middle;
+}
+/* the ball: drawn by thinking.js at this size. Under 64px it uses more, finer dots, made to sit beside text */
+.thinking-orb {
+  display: block;
+  flex: none;
+  width: var(--thinking-size);
+  height: var(--thinking-size);
+}
+/* the word: a light passes through it, left to right, on a loop */
+.thinking-label {
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
+  font-size: 14px;
+  line-height: normal;
+  letter-spacing: -.005em;
+  white-space: nowrap;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: transparent;
+  -webkit-background-clip: text;
+  background-clip: text;
+  background-image: linear-gradient(90deg, var(--thinking-dim) 0 35%, var(--thinking-ink) 50%, var(--thinking-dim) 65% 100%);
+  background-size: 250% 100%;
+  animation: thinking-shine 2.6s linear infinite;
+}
+@keyframes thinking-shine {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+/* the Sweep's word is lit by the ball's own wave: thinking.js moves --thinking-x across it */
+.thinking[data-kind="sweep"] .thinking-label {
+  --thinking-x: -999px;
+  background-image: linear-gradient(90deg, var(--thinking-dim) calc(var(--thinking-x) - 26px), var(--thinking-ink) var(--thinking-x), var(--thinking-dim) calc(var(--thinking-x) + 26px));
+  background-size: auto;
+  animation: none;
+}
+
+/* less motion: the ball holds still and only breathes; the word stays plain */
+@media (prefers-reduced-motion: reduce) {
+  .thinking-label {
+    animation: none;
+    background: none;
+    color: var(--thinking-dim);
+  }
+}
+`;
+  var api4;
+  function engine4() {
+    if (api4) return api4;
+    const window2 = {};
+    (function() {
+      var TAU = Math.PI * 2, SMALL = 64;
+      var SPEED = 85, REST = 0.55, HALO = 26;
+      var reduce = matchMedia("(prefers-reduced-motion: reduce)");
+      var all = [], running = false, last = 0;
+      function clamp01(x) {
+        return x < 0 ? 0 : x > 1 ? 1 : x;
+      }
+      function smooth(a, b, x) {
+        var t = clamp01((x - a) / (b - a));
+        return t * t * (3 - 2 * t);
+      }
+      function ease(t) {
+        return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+      }
+      function painter() {
+        var LEVELS = 16, d = [], n = [];
+        for (var i = 0; i < LEVELS; i++) {
+          d.push([]);
+          n.push(0);
+        }
+        return {
+          gain: 1,
+          dot: function(x, y, r, a) {
+            a *= this.gain;
+            if (a <= 0.02) return;
+            var b = Math.min(LEVELS - 1, a * LEVELS | 0), arr = d[b], k = n[b];
+            arr[k] = x;
+            arr[k + 1] = y;
+            arr[k + 2] = r;
+            n[b] = k + 3;
+          },
+          flush: function(c, ink) {
+            c.fillStyle = ink;
+            for (var b = 0; b < LEVELS; b++) {
+              if (!n[b]) continue;
+              var arr = d[b];
+              c.globalAlpha = (b + 1) / LEVELS;
+              c.beginPath();
+              for (var i2 = 0; i2 < n[b]; i2 += 3) {
+                c.moveTo(arr[i2] + arr[i2 + 2], arr[i2 + 1]);
+                c.arc(arr[i2], arr[i2 + 1], arr[i2 + 2], 0, TAU);
+              }
+              c.fill();
+              n[b] = 0;
+            }
+            c.globalAlpha = 1;
+          }
+        };
+      }
+      var CAM = 3.2, LX = -0.42, LY = -0.62, LZ = -0.66;
+      function view(yaw, pitch) {
+        return { cy: Math.cos(yaw), sy: Math.sin(yaw), cp: Math.cos(pitch), sp: Math.sin(pitch) };
+      }
+      function turn(V, x, y, z, o) {
+        var x1 = x * V.cy - z * V.sy, z1 = x * V.sy + z * V.cy;
+        o[0] = x1;
+        o[1] = y * V.cp - z1 * V.sp;
+        o[2] = y * V.sp + z1 * V.cp;
+      }
+      function persp(x, y, z, o) {
+        var f = CAM / (CAM + z);
+        o[3] = x * f;
+        o[4] = y * f;
+        o[5] = f;
+      }
+      function lit(nx, ny, nz) {
+        return (0.32 + 0.68 * Math.max(0, nx * LX + ny * LY + nz * LZ)) * (0.07 + 0.93 * smooth(0.28, -0.3, nz));
+      }
+      var TONES = [1, 0.5, 0.78, 0.3, 0.62, 0.18];
+      function spin(q, axis, cs, sn) {
+        var b = (axis + 1) % 3, c = (axis + 2) % 3, qb = q[b], qc = q[c];
+        q[b] = qb * cs - qc * sn;
+        q[c] = qb * sn + qc * cs;
+      }
+      function sphere(small) {
+        var per = small ? 2 : 4, COUNT = 5, SLOT = 0.5, DUR = 0.42, HOLD = 1.1, R0 = 0.8, D = [], v = [0, 0, 0], o = [0, 0, 0, 0, 0, 0];
+        for (var a = 0; a < 3; a++) for (var sg = 1; sg >= -1; sg -= 2) {
+          var s = TONES[a * 2 + (sg > 0 ? 0 : 1)], b = (a + 1) % 3, c = (a + 2) % 3;
+          for (var su = -1; su <= 1; su++) for (var sv = -1; sv <= 1; sv++) for (var j = 0; j < per; j++) for (var k = 0; k < per; k++) {
+            var pos = [0, 0, 0], cub = [0, 0, 0];
+            pos[a] = sg;
+            cub[a] = sg;
+            cub[b] = su;
+            cub[c] = sv;
+            pos[b] = su * 2 / 3 + ((j + 0.5) / per * 2 - 1) * 0.26;
+            pos[c] = sv * 2 / 3 + ((k + 0.5) / per * 2 - 1) * 0.26;
+            D.push({ pos, cub, s });
+          }
+        }
+        var t = 0, seq = [], mi = 0, mt = 0;
+        function plan() {
+          var sc = [], prev = -1;
+          while (sc.length < COUNT) {
+            var axis = Math.random() * 3 | 0, layer = (Math.random() * 3 | 0) - 1, key = axis * 3 + layer + 1;
+            if (key === prev) continue;
+            prev = key;
+            sc.push({ axis, layer, dir: Math.random() < 0.5 ? -1 : 1 });
+          }
+          seq = sc.concat(sc.slice().reverse().map(function(m) {
+            return { axis: m.axis, layer: m.layer, dir: -m.dir };
+          }));
+        }
+        plan();
+        return {
+          time: function() {
+            return t;
+          },
+          step: function(dt) {
+            t += dt;
+            mt += dt;
+            if (mi < seq.length) {
+              if (mt >= SLOT) {
+                var m = seq[mi];
+                D.forEach(function(d) {
+                  if (d.cub[m.axis] === m.layer) {
+                    spin(d.pos, m.axis, 0, m.dir);
+                    spin(d.cub, m.axis, 0, m.dir);
+                  }
+                });
+                mi++;
+                mt -= SLOT;
+              }
+            } else if (mt >= HOLD) {
+              plan();
+              mi = 0;
+              mt -= HOLD;
+            }
+          },
+          draw: function(p, u) {
+            var V = view(0.72 + 0.2 * Math.sin(t * TAU / 15), 0.5 + 0.07 * Math.sin(t * TAU / 21));
+            var m = mi < seq.length ? seq[mi] : null;
+            var th = m ? m.dir * Math.PI / 2 * ease(clamp01(mt / DUR)) : 0, cs = Math.cos(th), sn = Math.sin(th);
+            var glow = m ? 0 : Math.sin(Math.PI * clamp01(mt / HOLD)), rb = R0 * (1 + 0.03 * glow);
+            for (var i = 0; i < D.length; i++) {
+              var d = D[i];
+              v[0] = d.pos[0];
+              v[1] = d.pos[1];
+              v[2] = d.pos[2];
+              if (m && d.cub[m.axis] === m.layer) spin(v, m.axis, cs, sn);
+              var k2 = rb / Math.hypot(v[0], v[1], v[2]);
+              turn(V, v[0] * k2, v[1] * k2, v[2] * k2, o);
+              var shade = lit(o[0] / rb, o[1] / rb, o[2] / rb);
+              persp(o[0], o[1], o[2], o);
+              p.dot(u.cx + o[3] * u.R, u.cy + o[4] * u.R, u.rad((small ? 0.5 : 1.05) * o[5]), shade * (0.25 + 0.75 * (d.s + (1 - d.s) * 0.6 * glow)));
+            }
+          }
+        };
+      }
+      function sweep(small, front) {
+        var LAT = small ? 11 : 15, dens = small ? 26 : 40, R0 = 0.74, W = small ? 0.28 : 0.24, D = [], o = [0, 0, 0, 0, 0, 0];
+        for (var a = 1; a < LAT; a++) {
+          var lat = Math.PI * a / LAT, y = -Math.cos(lat), r = Math.sin(lat), n = Math.max(5, Math.round(r * dens));
+          for (var b = 0; b < n; b++) {
+            var th = TAU * b / n + a * 0.37;
+            D.push([Math.cos(th) * r, y, Math.sin(th) * r]);
+          }
+        }
+        front = front || function(t2) {
+          return -1.3 + 2.6 * (t2 % 1.75) / 1.2;
+        };
+        var t = 0;
+        return {
+          time: function() {
+            return t;
+          },
+          step: function(dt) {
+            t += dt;
+          },
+          draw: function(p, u) {
+            var V = view(0.35 * Math.sin(t * TAU / 17), 0.3 + 0.07 * Math.sin(t * TAU / 23)), f = front(t);
+            for (var i = 0; i < D.length; i++) {
+              turn(V, D[i][0], D[i][1], D[i][2], o);
+              var nx = o[0], ny = o[1], nz = o[2], q = (nx * R0 - f) / W, w = Math.exp(-q * q), rho = R0 * (1 + 0.17 * w);
+              persp(nx * rho, ny * rho, nz * rho, o);
+              p.dot(u.cx + o[3] * u.R, u.cy + o[4] * u.R, u.rad((small ? 0.45 + 0.25 * w : 0.95 + 0.6 * w) * o[5]), lit(nx, ny, nz) * (0.75 + 0.25 * w) + 0.55 * w * smooth(0.3, -0.3, nz));
+            }
+          }
+        };
+      }
+      function rowX(r, t) {
+        return r.x0 + SPEED * (t % ((r.x1 - r.x0) / SPEED + REST));
+      }
+      function size(I) {
+        var cw = I.cv.clientWidth, ch = I.cv.clientHeight;
+        if (!cw || !ch) return;
+        var small = Math.min(cw, ch) < SMALL, dpr = Math.min(devicePixelRatio || 1, small ? 3 : 2);
+        var w = Math.round(cw * dpr), h = Math.round(ch * dpr);
+        if (I.cv.width !== w || I.cv.height !== h) {
+          I.cv.width = w;
+          I.cv.height = h;
+        }
+        var R = Math.min(w, h) * 0.44, k = small ? dpr : R / 80, minR = (small ? 0.4 : 0.5) * dpr;
+        I.w = w;
+        I.h = h;
+        I.u = { cx: w / 2, cy: h / 2, R, rad: function(d) {
+          return Math.max(minR, d * k);
+        } };
+        I.ink = getComputedStyle(I.el).getPropertyValue("--thinking-ink").trim() || "#EDEDED";
+        if (I.small !== small) {
+          I.small = small;
+          I.sim = I.kind === "sweep" ? sweep(small, I.row && function(t) {
+            return (rowX(I.row, t) - I.row.cx) / I.row.R;
+          }) : sphere(small);
+          if (reduce.matches) for (var i = 0; i < 150; i++) I.sim.step(1 / 60);
+        }
+        if (I.row) {
+          var L = I.label;
+          I.row.cx = I.cv.offsetLeft + I.cv.offsetWidth / 2 - L.offsetLeft;
+          I.row.R = R / dpr;
+          I.row.x0 = I.row.cx - 1.3 * I.row.R;
+          I.row.x1 = L.offsetWidth + HALO + 4;
+        }
+      }
+      function frame(now) {
+        if (!all.length) {
+          running = false;
+          return;
+        }
+        requestAnimationFrame(frame);
+        var dt = Math.min(1 / 30, Math.max(0, (now - last) / 1e3));
+        last = now;
+        if (document.hidden) return;
+        for (var i = 0; i < all.length; i++) {
+          var I = all[i];
+          if (!I.seen || !I.u) continue;
+          if (reduce.matches) I.calm += dt;
+          else I.sim.step(dt);
+          I.ctx.clearRect(0, 0, I.w, I.h);
+          I.p.gain = (I.small ? 1.35 : 1) * (reduce.matches ? 0.72 + 0.28 * Math.sin(I.calm * TAU / 3.2) : 1);
+          I.sim.draw(I.p, I.u);
+          I.p.flush(I.ctx, I.ink);
+          if (I.row && !reduce.matches) I.label.style.setProperty("--thinking-x", rowX(I.row, I.sim.time()).toFixed(1) + "px");
+        }
+      }
+      function thinking(el) {
+        if (el.__thinking) return el.__thinking;
+        var cv = el.querySelector(".thinking-orb");
+        if (!cv) {
+          cv = document.createElement("canvas");
+          cv.className = "thinking-orb";
+          cv.setAttribute("aria-hidden", "true");
+          el.insertBefore(cv, el.firstChild);
+        }
+        var label = el.querySelector(".thinking-label"), kind = el.getAttribute("data-kind") === "sweep" ? "sweep" : "sphere";
+        var I = {
+          el,
+          cv,
+          ctx: cv.getContext("2d"),
+          label,
+          kind,
+          row: kind === "sweep" && label ? { cx: 0, R: 1, x0: 0, x1: 1 } : null,
+          sim: null,
+          small: null,
+          u: null,
+          w: 0,
+          h: 0,
+          ink: "",
+          seen: true,
+          calm: 0,
+          p: painter()
+        };
+        I.ro = new ResizeObserver(function() {
+          size(I);
+        });
+        I.ro.observe(cv);
+        if (label) I.ro.observe(label);
+        I.io = new IntersectionObserver(function(es) {
+          I.seen = es[es.length - 1].isIntersecting;
+        });
+        I.io.observe(el);
+        size(I);
+        all.push(I);
+        if (!running) {
+          running = true;
+          last = performance.now();
+          requestAnimationFrame(frame);
+        }
+        return el.__thinking = {
+          destroy: function() {
+            I.ro.disconnect();
+            I.io.disconnect();
+            all.splice(all.indexOf(I), 1);
+            I.ctx.clearRect(0, 0, I.w, I.h);
+            if (label) label.style.removeProperty("--thinking-x");
+            el.__thinking = null;
+          }
+        };
+      }
+      function scan() {
+        Array.prototype.forEach.call(document.querySelectorAll(".thinking"), thinking);
+      }
+      if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", scan);
+      else scan();
+      window2.thinking = thinking;
+    })();
+    return api4 = window2;
+  }
+  function mountThinking(host, o = {}) {
+    css("craft-thinking", CSS4);
+    const T = engine4();
+    const kind = o.kind === "sweep" ? "sweep" : "sphere";
+    const label = o.label == null || o.label === true ? "Thinking" : o.label === false ? "" : String(o.label);
+    host.innerHTML = '<span class="thinking" data-kind="' + kind + '" role="status"><canvas class="thinking-orb" aria-hidden="true"></canvas>' + (label ? '<span class="thinking-label"></span>' : "") + "</span>";
+    const el = host.firstChild;
+    if (label) el.lastChild.textContent = label;
+    else el.setAttribute("aria-label", "Thinking");
+    if (o.size) el.style.setProperty("--thinking-size", typeof o.size === "number" ? o.size + "px" : String(o.size));
+    const m = T.thinking(el);
+    return { element: el, destroy() {
+      m.destroy();
+      host.innerHTML = "";
+    } };
+  }
+
   // dist/elements.js
   function define(name, mount, options) {
     if (typeof customElements === "undefined" || customElements.get(name)) return;
@@ -1448,7 +1831,17 @@
     interactive: el.getAttribute("interactive") === "false" ? false : void 0,
     label: el.getAttribute("label") || void 0
   }));
+  var thinkingTag = (kind) => (el, o) => {
+    css("craft-thinking-host", "magic-sphere,sweep-sphere{display:inline-block;vertical-align:middle}");
+    return mountThinking(el, { ...o, kind });
+  };
+  var thinkingOptions = (el) => ({
+    size: el.getAttribute("size") ? isNaN(el.getAttribute("size")) ? el.getAttribute("size") : +el.getAttribute("size") : void 0,
+    label: el.hasAttribute("label") ? el.getAttribute("label") : void 0
+  });
+  define("magic-sphere", thinkingTag("sphere"), thinkingOptions);
+  define("sweep-sphere", thinkingTag("sweep"), thinkingOptions);
 
   // dist/cdn.js
-  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank };
+  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking };
 })();

package/dist/elements.js

@@ -1,10 +1,12 @@
-// <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card> and <piggy-bank>: the pieces as HTML tags, for pages without React.
-// They render into the page itself (no shadow root), so the glass can blend with what is behind it.
+// <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank>, <magic-sphere> and <sweep-sphere>: the
+// pieces as HTML tags, for pages without React. They render into the page itself (no shadow root), so the glass can
+// blend with what is behind it.
 import { mountLike } from './like.js';
 import { mountMagnet } from './magnet.js';
 import { mountGlassNav } from './glassnav.js';
 import { mountIridescentCard } from './card-mount.js';
 import { mountPiggyBank } from './piggy-mount.js';
+import { mountThinking } from './thinking.js';
 import { css } from './style.js';
 
 function define(name, mount, options) {
@@ -65,4 +67,17 @@ define('piggy-bank', (el, o) => {
   label: el.getAttribute('label') || undefined
 }));
 
-export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank };
+// the thinking indicators: inline, beside text. size="32" (px) or any CSS length; label="Thinking" by default,
+// label="" for the ball alone
+const thinkingTag = (kind) => (el, o) => {
+  css('craft-thinking-host', 'magic-sphere,sweep-sphere{display:inline-block;vertical-align:middle}');
+  return mountThinking(el, { ...o, kind });
+};
+const thinkingOptions = (el) => ({
+  size: el.getAttribute('size') ? (isNaN(el.getAttribute('size')) ? el.getAttribute('size') : +el.getAttribute('size')) : undefined,
+  label: el.hasAttribute('label') ? el.getAttribute('label') : undefined
+});
+define('magic-sphere', thinkingTag('sphere'), thinkingOptions);
+define('sweep-sphere', thinkingTag('sweep'), thinkingOptions);
+
+export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking };

package/dist/index.js

@@ -6,6 +6,7 @@ import { mountMagnet } from './magnet.js';
 import { mountGlassNav } from './glassnav.js';
 import { mountIridescentCard } from './card-mount.js';
 import { mountPiggyBank } from './piggy-mount.js';
+import { mountThinking } from './thinking.js';
 
 const HOST = { display: 'inline-block', lineHeight: 0, verticalAlign: 'middle' };
 
@@ -68,4 +69,22 @@ export function PiggyBank({ height = 560, autoplay, interactive, replay, label,
   return createElement('div', { ref: host, className, style: { position: 'relative', width: '100%', minWidth: 280, height, ...style } });
 }
 
-export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank };
+// The Magic sphere and the Sweep: a "thinking" indicator, a ball of dots with the word beside it. size: the ball, px or
+// any CSS length (32 by default; under 64px it draws finer, denser dots made to sit beside text). label: the word
+// ("Thinking" by default; '' for the ball alone). The host keeps its line height, so the word is never clipped.
+function thinkingComponent(kind, name) {
+  function Thinking({ size, label, className, style }) {
+    const host = useRef(null);
+    useEffect(() => {
+      const m = mountThinking(host.current, { kind, size, label });
+      return () => m.destroy();
+    }, [size, label]);
+    return createElement('span', { ref: host, className, style: { display: 'inline-block', verticalAlign: 'middle', ...style } });
+  }
+  Thinking.displayName = name;
+  return Thinking;
+}
+export const MagicSphere = thinkingComponent('sphere', 'MagicSphere');
+export const SweepSphere = thinkingComponent('sweep', 'SweepSphere');
+
+export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking };

package/dist/thinking.js

@@ -0,0 +1,243 @@
+// Magic sphere and Sweep · Craft Library, by Sara Lobo. thinking.css and thinking.js from the library, unchanged,
+// around a mount.
+import { css } from './style.js';
+const CSS = "/* Thinking orbs · Craft Library, by Sara Lobo\n   A ball of dots and the word beside it, for the wait while an answer is being written. thinking.js draws the ball\n   and, for the Sweep, carries the ball's wave on through the word. Made for dark backgrounds: on a light one, set\n   --thinking-ink (the dots and the light in the word) and --thinking-dim (the word at rest). */\n\n.thinking {\n  --thinking-size: 32px;\n  --thinking-ink: #EDEDED;\n  --thinking-dim: #8A8A8A;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  vertical-align: middle;\n}\n/* the ball: drawn by thinking.js at this size. Under 64px it uses more, finer dots, made to sit beside text */\n.thinking-orb {\n  display: block;\n  flex: none;\n  width: var(--thinking-size);\n  height: var(--thinking-size);\n}\n/* the word: a light passes through it, left to right, on a loop */\n.thinking-label {\n  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;\n  font-size: 14px;\n  line-height: normal;\n  letter-spacing: -.005em;\n  white-space: nowrap;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  color: transparent;\n  -webkit-background-clip: text;\n  background-clip: text;\n  background-image: linear-gradient(90deg, var(--thinking-dim) 0 35%, var(--thinking-ink) 50%, var(--thinking-dim) 65% 100%);\n  background-size: 250% 100%;\n  animation: thinking-shine 2.6s linear infinite;\n}\n@keyframes thinking-shine {\n  from {\n    background-position: 100% 0;\n  }\n  to {\n    background-position: 0 0;\n  }\n}\n/* the Sweep's word is lit by the ball's own wave: thinking.js moves --thinking-x across it */\n.thinking[data-kind=\"sweep\"] .thinking-label {\n  --thinking-x: -999px;\n  background-image: linear-gradient(90deg, var(--thinking-dim) calc(var(--thinking-x) - 26px), var(--thinking-ink) var(--thinking-x), var(--thinking-dim) calc(var(--thinking-x) + 26px));\n  background-size: auto;\n  animation: none;\n}\n\n/* less motion: the ball holds still and only breathes; the word stays plain */\n@media (prefers-reduced-motion: reduce) {\n  .thinking-label {\n    animation: none;\n    background: none;\n    color: var(--thinking-dim);\n  }\n}\n";
+let api;
+function engine() {
+  if (api) return api;
+  const window = {};
+// Thinking orbs · Craft Library, by Sara Lobo
+// Two "thinking" indicators made of dots on a canvas, for the wait while an answer is being written:
+//   sphere · Magic sphere: a Rubik's cube on a ball, one grey tone per face. Its slices turn to scramble the pieces,
+//            then retrace their steps until every piece is home, and the ball lights up for a moment.
+//   sweep  · Sweep: a dotted globe. A wave crosses it from left to right, lifting the dots it passes, then rests.
+//            Beside a label, the same wave runs on through the word at the same speed.
+// Markup (styled by thinking.css):
+//   <span class="thinking" data-kind="sphere" role="status">
+//     <canvas class="thinking-orb" aria-hidden="true"></canvas><span class="thinking-label">Thinking</span>
+//   </span>
+// Every .thinking on the page is set up as the page loads; for one added later, call thinking(el), which returns
+// { destroy }. The ball takes the canvas's CSS size (--thinking-size). Under 64px it draws more, finer dots, made
+// for sitting beside text; larger, it shows the full detail. Every motion runs on the frame's real time.
+(function () {
+  var TAU = Math.PI * 2, SMALL = 64;
+  var SPEED = 85, REST = 0.55, HALO = 26;              // the Sweep's wave beside a word: px per second, the pause, the light's reach
+  var reduce = matchMedia('(prefers-reduced-motion: reduce)');
+  var all = [], running = false, last = 0;
+
+  function clamp01(x) { return x < 0 ? 0 : x > 1 ? 1 : x; }
+  function smooth(a, b, x) { var t = clamp01((x - a) / (b - a)); return t * t * (3 - 2 * t); }
+  function ease(t) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; }
+
+  // dots grouped by opacity, so a frame is a few fills instead of hundreds
+  function painter() {
+    var LEVELS = 16, d = [], n = [];
+    for (var i = 0; i < LEVELS; i++) { d.push([]); n.push(0); }
+    return {
+      gain: 1,
+      dot: function (x, y, r, a) {
+        a *= this.gain; if (a <= 0.02) return;
+        var b = Math.min(LEVELS - 1, (a * LEVELS) | 0), arr = d[b], k = n[b];
+        arr[k] = x; arr[k + 1] = y; arr[k + 2] = r; n[b] = k + 3;
+      },
+      flush: function (c, ink) {
+        c.fillStyle = ink;
+        for (var b = 0; b < LEVELS; b++) {
+          if (!n[b]) continue;
+          var arr = d[b];
+          c.globalAlpha = (b + 1) / LEVELS; c.beginPath();
+          for (var i = 0; i < n[b]; i += 3) { c.moveTo(arr[i] + arr[i + 2], arr[i + 1]); c.arc(arr[i], arr[i + 1], arr[i + 2], 0, TAU); }
+          c.fill(); n[b] = 0;
+        }
+        c.globalAlpha = 1;
+      }
+    };
+  }
+
+  // 3D: turn() rotates by the view into o[0..2] (y down, z away from the camera); persp() writes screen x, y and scale into o[3..5]
+  var CAM = 3.2, LX = -0.42, LY = -0.62, LZ = -0.66;   // the light comes from the upper left, in front
+  function view(yaw, pitch) { return { cy: Math.cos(yaw), sy: Math.sin(yaw), cp: Math.cos(pitch), sp: Math.sin(pitch) }; }
+  function turn(V, x, y, z, o) {
+    var x1 = x * V.cy - z * V.sy, z1 = x * V.sy + z * V.cy;
+    o[0] = x1; o[1] = y * V.cp - z1 * V.sp; o[2] = y * V.sp + z1 * V.cp;
+  }
+  function persp(x, y, z, o) { var f = CAM / (CAM + z); o[3] = x * f; o[4] = y * f; o[5] = f; }
+  // lit from the upper left; the far side of the ball fades out, so it reads solid
+  function lit(nx, ny, nz) { return (0.32 + 0.68 * Math.max(0, nx * LX + ny * LY + nz * LZ)) * (0.07 + 0.93 * smooth(0.28, -0.3, nz)); }
+
+  // ── Magic sphere: 3×3 stickers per face, projected from a cube onto the ball. Each dot knows its cubie (-1…1 per axis).
+  // Five random slice turns of 90°, then the same five undone; when every piece is home the ball lights up, and again.
+  var TONES = [1, 0.5, 0.78, 0.3, 0.62, 0.18];
+  function spin(q, axis, cs, sn) { var b = (axis + 1) % 3, c = (axis + 2) % 3, qb = q[b], qc = q[c]; q[b] = qb * cs - qc * sn; q[c] = qb * sn + qc * cs; }
+  function sphere(small) {
+    var per = small ? 2 : 4, COUNT = 5, SLOT = 0.5, DUR = 0.42, HOLD = 1.1, R0 = 0.8, D = [], v = [0, 0, 0], o = [0, 0, 0, 0, 0, 0];
+    for (var a = 0; a < 3; a++) for (var sg = 1; sg >= -1; sg -= 2) {
+      var s = TONES[a * 2 + (sg > 0 ? 0 : 1)], b = (a + 1) % 3, c = (a + 2) % 3;
+      for (var su = -1; su <= 1; su++) for (var sv = -1; sv <= 1; sv++) for (var j = 0; j < per; j++) for (var k = 0; k < per; k++) {
+        var pos = [0, 0, 0], cub = [0, 0, 0];
+        pos[a] = sg; cub[a] = sg; cub[b] = su; cub[c] = sv;
+        pos[b] = su * 2 / 3 + ((j + 0.5) / per * 2 - 1) * 0.26;
+        pos[c] = sv * 2 / 3 + ((k + 0.5) / per * 2 - 1) * 0.26;
+        D.push({ pos: pos, cub: cub, s: s });
+      }
+    }
+    var t = 0, seq = [], mi = 0, mt = 0;
+    function plan() {
+      var sc = [], prev = -1;
+      while (sc.length < COUNT) {
+        var axis = (Math.random() * 3) | 0, layer = ((Math.random() * 3) | 0) - 1, key = axis * 3 + layer + 1;
+        if (key === prev) continue;
+        prev = key; sc.push({ axis: axis, layer: layer, dir: Math.random() < 0.5 ? -1 : 1 });
+      }
+      seq = sc.concat(sc.slice().reverse().map(function (m) { return { axis: m.axis, layer: m.layer, dir: -m.dir }; }));
+    }
+    plan();
+    return {
+      time: function () { return t; },
+      step: function (dt) {
+        t += dt; mt += dt;
+        if (mi < seq.length) {
+          if (mt >= SLOT) {                                // the turn is done: write it into the dots, exactly 90°
+            var m = seq[mi];
+            D.forEach(function (d) { if (d.cub[m.axis] === m.layer) { spin(d.pos, m.axis, 0, m.dir); spin(d.cub, m.axis, 0, m.dir); } });
+            mi++; mt -= SLOT;
+          }
+        } else if (mt >= HOLD) { plan(); mi = 0; mt -= HOLD; }
+      },
+      draw: function (p, u) {
+        var V = view(0.72 + 0.2 * Math.sin(t * TAU / 15), 0.5 + 0.07 * Math.sin(t * TAU / 21));
+        var m = mi < seq.length ? seq[mi] : null;
+        var th = m ? m.dir * Math.PI / 2 * ease(clamp01(mt / DUR)) : 0, cs = Math.cos(th), sn = Math.sin(th);
+        var glow = m ? 0 : Math.sin(Math.PI * clamp01(mt / HOLD)), rb = R0 * (1 + 0.03 * glow);
+        for (var i = 0; i < D.length; i++) {
+          var d = D[i];
+          v[0] = d.pos[0]; v[1] = d.pos[1]; v[2] = d.pos[2];
+          if (m && d.cub[m.axis] === m.layer) spin(v, m.axis, cs, sn);
+          var k = rb / Math.hypot(v[0], v[1], v[2]);
+          turn(V, v[0] * k, v[1] * k, v[2] * k, o);
+          var shade = lit(o[0] / rb, o[1] / rb, o[2] / rb);
+          persp(o[0], o[1], o[2], o);
+          p.dot(u.cx + o[3] * u.R, u.cy + o[4] * u.R, u.rad((small ? 0.5 : 1.05) * o[5]), shade * (0.25 + 0.75 * (d.s + (1 - d.s) * 0.6 * glow)));
+        }
+      }
+    };
+  }
+
+  // ── Sweep: rings of latitude. front(t) places the wave in ball radii; on its own it crosses in 1.2 s and rests 0.55 s.
+  function sweep(small, front) {
+    var LAT = small ? 11 : 15, dens = small ? 26 : 40, R0 = 0.74, W = small ? 0.28 : 0.24, D = [], o = [0, 0, 0, 0, 0, 0];
+    for (var a = 1; a < LAT; a++) {
+      var lat = Math.PI * a / LAT, y = -Math.cos(lat), r = Math.sin(lat), n = Math.max(5, Math.round(r * dens));
+      for (var b = 0; b < n; b++) { var th = TAU * b / n + a * 0.37; D.push([Math.cos(th) * r, y, Math.sin(th) * r]); }
+    }
+    front = front || function (t) { return -1.3 + 2.6 * (t % 1.75) / 1.2; };
+    var t = 0;
+    return {
+      time: function () { return t; },
+      step: function (dt) { t += dt; },
+      draw: function (p, u) {
+        var V = view(0.35 * Math.sin(t * TAU / 17), 0.3 + 0.07 * Math.sin(t * TAU / 23)), f = front(t);
+        for (var i = 0; i < D.length; i++) {
+          turn(V, D[i][0], D[i][1], D[i][2], o);
+          var nx = o[0], ny = o[1], nz = o[2], q = (nx * R0 - f) / W, w = Math.exp(-q * q), rho = R0 * (1 + 0.17 * w);
+          persp(nx * rho, ny * rho, nz * rho, o);
+          p.dot(u.cx + o[3] * u.R, u.cy + o[4] * u.R, u.rad((small ? 0.45 + 0.25 * w : 0.95 + 0.6 * w) * o[5]), lit(nx, ny, nz) * (0.75 + 0.25 * w) + 0.55 * w * smooth(0.3, -0.3, nz));
+        }
+      }
+    };
+  }
+
+  // beside a word, the Sweep's wave is one run in px along the row: it starts left of the ball, crosses it, goes on
+  // through the word and rests (positions are relative to the word's left edge)
+  function rowX(r, t) { return r.x0 + SPEED * (t % ((r.x1 - r.x0) / SPEED + REST)); }
+
+  function size(I) {
+    var cw = I.cv.clientWidth, ch = I.cv.clientHeight;
+    if (!cw || !ch) return;
+    var small = Math.min(cw, ch) < SMALL, dpr = Math.min(devicePixelRatio || 1, small ? 3 : 2);
+    var w = Math.round(cw * dpr), h = Math.round(ch * dpr);
+    if (I.cv.width !== w || I.cv.height !== h) { I.cv.width = w; I.cv.height = h; }
+    var R = Math.min(w, h) * 0.44, k = small ? dpr : R / 80, minR = (small ? 0.4 : 0.5) * dpr;
+    I.w = w; I.h = h;
+    I.u = { cx: w / 2, cy: h / 2, R: R, rad: function (d) { return Math.max(minR, d * k); } };
+    I.ink = getComputedStyle(I.el).getPropertyValue('--thinking-ink').trim() || '#EDEDED';
+    if (I.small !== small) {
+      I.small = small;
+      I.sim = I.kind === 'sweep' ? sweep(small, I.row && function (t) { return (rowX(I.row, t) - I.row.cx) / I.row.R; }) : sphere(small);
+      if (reduce.matches) for (var i = 0; i < 150; i++) I.sim.step(1 / 60);   // a still pose, mid-thought
+    }
+    if (I.row) {
+      var L = I.label;
+      I.row.cx = I.cv.offsetLeft + I.cv.offsetWidth / 2 - L.offsetLeft; I.row.R = R / dpr;
+      I.row.x0 = I.row.cx - 1.3 * I.row.R; I.row.x1 = L.offsetWidth + HALO + 4;
+    }
+  }
+
+  function frame(now) {
+    if (!all.length) { running = false; return; }
+    requestAnimationFrame(frame);
+    var dt = Math.min(1 / 30, Math.max(0, (now - last) / 1000)); last = now;
+    if (document.hidden) return;
+    for (var i = 0; i < all.length; i++) {
+      var I = all[i];
+      if (!I.seen || !I.u) continue;
+      if (reduce.matches) I.calm += dt; else I.sim.step(dt);
+      I.ctx.clearRect(0, 0, I.w, I.h);
+      I.p.gain = (I.small ? 1.35 : 1) * (reduce.matches ? 0.72 + 0.28 * Math.sin(I.calm * TAU / 3.2) : 1);
+      I.sim.draw(I.p, I.u);
+      I.p.flush(I.ctx, I.ink);
+      if (I.row && !reduce.matches) I.label.style.setProperty('--thinking-x', (rowX(I.row, I.sim.time())).toFixed(1) + 'px');
+    }
+  }
+
+  function thinking(el) {
+    if (el.__thinking) return el.__thinking;
+    var cv = el.querySelector('.thinking-orb');
+    if (!cv) {
+      cv = document.createElement('canvas'); cv.className = 'thinking-orb'; cv.setAttribute('aria-hidden', 'true');
+      el.insertBefore(cv, el.firstChild);
+    }
+    var label = el.querySelector('.thinking-label'), kind = el.getAttribute('data-kind') === 'sweep' ? 'sweep' : 'sphere';
+    var I = { el: el, cv: cv, ctx: cv.getContext('2d'), label: label, kind: kind, row: kind === 'sweep' && label ? { cx: 0, R: 1, x0: 0, x1: 1 } : null,
+      sim: null, small: null, u: null, w: 0, h: 0, ink: '', seen: true, calm: 0, p: painter() };
+    I.ro = new ResizeObserver(function () { size(I); });
+    I.ro.observe(cv);
+    if (label) I.ro.observe(label);                      // the word's width moves with its font and language
+    I.io = new IntersectionObserver(function (es) { I.seen = es[es.length - 1].isIntersecting; });
+    I.io.observe(el);
+    size(I);
+    all.push(I);
+    if (!running) { running = true; last = performance.now(); requestAnimationFrame(frame); }
+    return (el.__thinking = {
+      destroy: function () {
+        I.ro.disconnect(); I.io.disconnect();
+        all.splice(all.indexOf(I), 1);
+        I.ctx.clearRect(0, 0, I.w, I.h);
+        if (label) label.style.removeProperty('--thinking-x');
+        el.__thinking = null;
+      }
+    });
+  }
+
+  function scan() { Array.prototype.forEach.call(document.querySelectorAll('.thinking'), thinking); }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', scan); else scan();
+  window.thinking = thinking;
+})();
+
+  return (api = window);
+}
+
+// host: the element it goes in. o: { kind: 'sphere' | 'sweep', size (px or any CSS length, default 32),
+// label (the word beside the ball, default "Thinking"; '' or false for the ball alone) }
+export function mountThinking(host, o = {}) {
+  css('craft-thinking', CSS);
+  const T = engine();
+  const kind = o.kind === 'sweep' ? 'sweep' : 'sphere';
+  const label = o.label == null || o.label === true ? 'Thinking' : o.label === false ? '' : String(o.label);
+  host.innerHTML = '<span class="thinking" data-kind="' + kind + '" role="status"><canvas class="thinking-orb" aria-hidden="true"></canvas>' + (label ? '<span class="thinking-label"></span>' : '') + '</span>';
+  const el = host.firstChild;
+  if (label) el.lastChild.textContent = label; else el.setAttribute('aria-label', 'Thinking');
+  if (o.size) el.style.setProperty('--thinking-size', typeof o.size === 'number' ? o.size + 'px' : String(o.size));
+  const m = T.thinking(el);
+  return { element: el, destroy() { m.destroy(); host.innerHTML = ''; } };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "craft-library",
-  "version": "0.3.0",
-  "description": "Craft Library by Sara Lobo: a liquid glass nav bar, a bursting heart, a magnetic icon, an iridescent 3D card and a glass piggy bank, for React or plain HTML",
+  "version": "0.4.0",
+  "description": "Craft Library by Sara Lobo: a liquid glass nav bar, a bursting heart, a magnetic icon, an iridescent 3D card, a glass piggy bank and two thinking indicators (Magic sphere, Sweep), for React or plain HTML",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -47,7 +47,11 @@
     "credit-card",
     "piggy-bank",
     "congratulations",
-    "glass"
+    "glass",
+    "thinking-indicator",
+    "loader",
+    "ai",
+    "particles"
   ],
   "author": "Sara Lobo",
   "license": "MIT",