reviewzy 0.3.0 → 0.4.0

package/src/dashboard/static/cursor-rules.js

@@ -2,9 +2,11 @@
 const UNUSABLE = /::|&/;   // a pseudo-element is a box closest() can never return
 const STATE_PSEUDO = /:(?:hover|active|focus|focus-visible|focus-within|visited|link|target)\b/g;
 
-// clickable with no cursor declaration anywhere: the browser draws the pointer itself
+// clickable with no cursor declaration anywhere: the browser draws the pointer itself.
+// No `label`: a field label is not a target, and a label that WRAPS its control takes its
+// pointer from the stylesheet sweep instead, which is where the difference belongs.
 export const SEMANTIC_POINTER = [
-  'a[href]', 'area[href]', 'button', 'summary', 'select', 'label[for]',
+  'a[href]', 'area[href]', 'button', 'summary', 'select',
   'input[type="checkbox"]', 'input[type="radio"]', 'input[type="range"]',
   'input[type="color"]', 'input[type="file"]', 'input[type="submit"]',
   'input[type="reset"]', 'input[type="button"]',
@@ -29,30 +31,36 @@ export function splitSelectorList(text) {
   return parts.map(s => s.trim()).filter(Boolean);
 }
 
-/* Every selector any rule gives one of `values` for `prop`, de-duplicated. It NARROWS a
-   walk, never decides one: the computed style still has the last word, so a selector
-   whose rule lives under a media query the viewport does not match costs one match and
-   nothing else. A state pseudo is stripped so `.x:hover { position: sticky }` still names
-   `.x`. The alternative, reading `getComputedStyle` for every element in the document,
-   forces rendering inside any `content-visibility` subtree it crosses, which Chrome
-   reports and this system's collapsed rows all carry. */
-export function collectPropSelectors(sheets, prop, values) {
-  const found = new Set();
+/* One walk for both collectors: every rule of every sheet, in document order. `classify`
+   reads a rule and returns its verdict, or a falsy value to skip it; `take` gets each
+   usable selector that rule names, with that verdict. A state pseudo is stripped before
+   `take` sees it, so `.x:hover` names `.x` and folds onto whatever `.x` already said. */
+const sweep = (sheets, classify, take) => {
   const visit = rules => {
     for (const rule of rules || []) {
-      if (rule.selectorText && rule.style && values.includes(rule.style[prop])) {
-        for (const part of splitSelectorList(rule.selectorText)) {
-          if (UNUSABLE.test(part)) continue;
-          const clean = part.replace(STATE_PSEUDO, '').trim();
-          if (clean) found.add(clean);
-        }
+      const verdict = rule.selectorText && rule.style ? classify(rule) : null;
+      if (verdict) for (const part of splitSelectorList(rule.selectorText)) {
+        if (UNUSABLE.test(part)) continue;
+        const clean = part.replace(STATE_PSEUDO, '').trim();
+        if (clean) take(clean, verdict);
       }
       if (rule.cssRules) visit(rule.cssRules);                 // @media, @supports, nesting
     }
   };
   for (const sheet of sheets || []) {
-    try { visit(sheet.cssRules); } catch { /* cross-origin sheet */ }
+    try { visit(sheet.cssRules); } catch { /* cross-origin sheet, nothing worth a broken boot */ }
   }
+};
+
+/* Every selector any rule gives one of `values` for `prop`, de-duplicated. It NARROWS a
+   walk, never decides one: the computed style still has the last word, so a selector
+   whose rule lives under a media query the viewport does not match costs one match and
+   nothing else. The alternative, reading `getComputedStyle` for every element in the
+   document, forces rendering inside any `content-visibility` subtree it crosses, which
+   Chrome reports and this system's collapsed rows all carry. */
+export function collectPropSelectors(sheets, prop, values) {
+  const found = new Set();
+  sweep(sheets, rule => values.includes(rule.style[prop]), clean => found.add(clean));
   return [...found];
 }
 
@@ -63,21 +71,9 @@ export function collectCursorSelectors(sheets) {
   const bucketFor = c => c === 'pointer' ? buckets.pointer
     : c === 'default' ? buckets.inert
     : c === 'not-allowed' ? buckets.blocked : null;
-  const visit = rules => {
-    for (const rule of rules || []) {
-      const bucket = rule.selectorText && rule.style ? bucketFor(rule.style.cursor) : null;
-      if (bucket) for (const part of splitSelectorList(rule.selectorText)) {
-        if (UNUSABLE.test(part)) continue;
-        const clean = part.replace(STATE_PSEUDO, '').trim();   // folds `.x{default} .x:hover{pointer}`
-        if (!clean) continue;
-        for (const b of Object.values(buckets)) b.delete(clean); // document order stands in for the cascade
-        bucket.add(clean);
-      }
-      if (rule.cssRules) visit(rule.cssRules);                 // @media, @supports, CSS nesting
-    }
-  };
-  for (const sheet of sheets || []) {
-    try { visit(sheet.cssRules); } catch { /* cross-origin sheet, nothing worth a broken boot */ }
-  }
+  sweep(sheets, rule => bucketFor(rule.style.cursor), (clean, bucket) => {
+    for (const b of Object.values(buckets)) b.delete(clean);   // document order stands in for the cascade
+    bucket.add(clean);
+  });
   return { pointer: [...buckets.pointer], inert: [...buckets.inert], blocked: [...buckets.blocked] };
 }

package/src/dashboard/static/cursor.css

@@ -1,105 +1,134 @@
 /* ============================================================
-   the ambient layer
-   The dot grid and the pointer ring. Load after components.css;
-   cursor.js boots both.
+   the ambient layer, cursor v3
+   The jelly ring with its aim dot, lit up with speed; its tube
+   trail in the comet blue, leaving the mark 4px narrower than it is across the
+   motion and stopping 2px short of its keyline; the parting dot grid, its droplets at
+   speed and its click ripple plus splash. Everything the cursor
+   draws lives on one canvas inside #cursor, so every stroke keeps its
+   declared width whatever the ring's shape does. Load after components.css;
+   cursor.js boots it. Rules and mechanisms: cursor.md.
+   Contrast, from the repo root, `node tools/contrast.mjs "<fg>" "<bg>"`, on
+   --bg / --surface-1 / --surface-2 / --surface-3 / --well / --sky-peak:
+     dark  ink        oklch(0.76 0.110 238)  7.49 / 6.48 / 5.48 / 4.48 / 8.31 / 6.33
+     dark  lit ink    oklch(0.90 0.080 238)  11.73 / 10.15 / 8.59 / 7.01 / 13.02 / 9.92
+     dark  ripple     oklch(0.82 0.115 238)  the trail core's row
+     dark  keyline    --bg on the --accent fill 7.49, on --accent-press 6.02
+     dark  refuse     oklch(0.72 0.140 15)   5.98 --bg, 5.18 --surface-1
+     dark  trail core oklch(0.82 0.115 238)  9.15 / 7.91 / 6.70 / 5.47 / 10.15 / 7.73
+     dark  trail edge --accent, the ink's row
+     dark  spray      oklch(0.88 0.070 238)  11.13 / 9.62 / 8.14 / 6.65 / 12.34 / 9.40
+     dark  spray hot  oklch(0.80 0.130 39)   7.93 / 6.86 / 5.81 / 4.74 / 8.80 / 6.71
+     light ink        oklch(0.50 0.130 238)  5.06 / 5.69 / 4.76 / 4.34 / 4.62 / 5.68
+     light lit ink    oklch(0.55 0.160 238)  4.01 / 4.51 / 3.78 / 3.44 / 3.66 / 4.50
+     light ripple     the ink's row
+     light keyline    --bg on the --accent fill 4.09, on --accent-press 6.50
+     light refuse     oklch(0.52 0.190 15)   5.36 --bg, 6.02 --surface-1
+     light trail core oklch(0.42 0.120 238)  7.10 / 7.98 / 6.68 / 6.10 / 6.48 / 7.97
+     light trail edge --accent               4.09 / 4.60 / 3.85 / 3.52 / 3.74 / 4.60
+     light spray      oklch(0.45 0.130 238)  6.21 / 6.98 / 5.85 / 5.33 / 5.67 / 6.98
+     light spray hot  oklch(0.50 0.140 39)   5.61 / 6.30 / 5.28 / 4.81 / 5.12 / 6.30
+   The tube paints at 0.9 alpha, 0.6 over text; composited on --surface-3, its
+   worst surface, `node tools/contrast.mjs "<fg> / 0.9" "<surface-3>"`: dark
+   core 4.76, edge 3.95; light core 5.01, edge 3.10. Over the accent fill the trail core
+   reads 1.22 dark and 1.73 light, as v2's comet reads 1.00 / 1.24:
+   the mark and the droplets carry the page keyline there, the tube does not.
+   The bloom is the glow ink at 0.105 at full speed on its own node, blended
+   `screen` in dark and `darken` in light, the halo's two directions, so it
+   lightens what it covers and never shades it. Its peak is the halo's bound:
+   the highest opacity at which no text pair reads lower than under the ring's
+   12% hover fill, the bloom and the fill each blended over the glyph and its
+   ground alike, from the tool's exports. Dark holds to 0.105, where --accent
+   on --surface-3 reads 3.687 against its floor of 3.667 and --text-4 on
+   --surface-1 3.987 against 3.878 (plain 4.729). Light, where the ring fills with
+   --cursor-ink, holds to 0.480, where --on-accent on --accent reads 3.966
+   against 3.967; at 0.105 --text-4 on --surface-1 reads 5.380 against 4.772
+   (plain 5.555).
    ============================================================ */
 
-/* ---- Cursor-reactive dot-grid background (sanctioned ambient; desktop only) ----
-   Canvas created and painted on demand by cursor.js; sits behind all content via
-   background propagation. Solid cards keep it to negative space. */
 #bg-dots { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
 
-/* ---- Trailing pointer ring (desktop fine-pointer only) ----
-   ONE node is the whole cursor. It TIGHTENS over a target rather than growing, which keeps it
-   off the small ones, and over text it morphs into the caret bar itself. No dot in the middle
-   and no second node for the caret: another mark under the pointer competes with the thing
-   being pointed at, and a fade between two nodes throws away the morph.
-   Five states: idle, `.hover`, `.press`, `.blocked` over anything refusing the click, and
-   `.text` over a glyph run or a text field. `.text` is gated by a hit test against the glyphs,
-   never by tag name (see the JS).
-   EVERY STATE IS A WIDTH/HEIGHT CHANGE, never `transform: scale()`: a scaled 1px border
-   renders sub-pixel, so a ring that tightens by scale fades as it tightens. The ring is fixed
-   and childless, so nothing here touches page layout. */
+/* `--cursor-v3` is the module's proof that this sheet applies: no colour token a page may
+   reset, and declared by no v1 or v2 file */
+:root {
+  --cursor-v3: 1;
+  --cursor-ink: var(--accent);
+  --cursor-lit: oklch(0.90 0.080 238);
+  --cursor-glow: oklch(0.90 0.080 238);
+  --cursor-glow-blend: screen;
+  --cursor-keyline: var(--bg);
+  --cursor-refuse: var(--danger);
+  --cursor-ripple: oklch(0.82 0.115 238);
+  --cursor-trail-core: oklch(0.82 0.115 238);
+  --cursor-trail-edge: var(--accent);
+  --cursor-spray: oklch(0.88 0.070 238);
+  --cursor-spray-hot: oklch(0.80 0.130 39);
+  --cursor-size-idle: 18px;
+  --cursor-size-hover: 24px;
+  --cursor-size-press: 19px;
+  --cursor-size-press-idle: 14px;
+  --cursor-size-blocked: 24px;
+}
+[data-theme="light"] {
+  --cursor-ink: oklch(0.50 0.130 238);
+  --cursor-lit: oklch(0.55 0.160 238);
+  --cursor-glow: oklch(0.89 0.070 238);
+  --cursor-glow-blend: darken;
+  --cursor-keyline: var(--bg);
+  --cursor-refuse: var(--danger);
+  --cursor-ripple: oklch(0.50 0.130 238);
+  --cursor-trail-core: oklch(0.42 0.120 238);
+  --cursor-trail-edge: var(--accent);
+  --cursor-spray: oklch(0.45 0.130 238);
+  --cursor-spray-hot: oklch(0.50 0.140 39);
+}
+
+/* The host is its own view-transition group: the theme swap would otherwise
+   freeze the cursor inside the root's old snapshot while the live one fades in,
+   so for the crossfade there would be two cursors and a ghost. It never fades
+   as a whole: the mark fades on the canvas, so a droplet still flying when the
+   pointer leaves the window plays out. */
 #cursor {
   position: fixed;
-  top: 0; left: 0;
+  inset: 0;
   z-index: 10000;
   pointer-events: none;
-  opacity: 0;
-  transition: opacity var(--dur-near) var(--ease);
-  --caret-h: 20px;
+  view-transition-name: cursor;
 }
-#cursor.visible { opacity: 1; }
+#cursor-paint { position: absolute; top: 0; left: 0; }
+::view-transition-old(cursor) { display: none; }
+::view-transition-new(cursor) { animation: none; }
 
-#cursor-ring {
+/* The light-up's bloom, under the mark: a 68px box scaled to the speed, its
+   blend the one direction per theme that cannot darken what it covers, as the
+   legacy halo blends. cursor.js places and fades it every frame. */
+#cursor-glow {
   position: fixed;
-  top: 0; left: 0;
-  width: 26px; height: 26px;
-  border: 1px solid var(--accent);
-  border-radius: 50%;
-  will-change: transform;
-  /* AN ACCENT HAIRLINE IS INVISIBLE OVER THE ACCENT FILLS - buttons, active chips, the sidebar
-     cursor, bar fills - and those are exactly the things worth pointing at, so a keyline in the
-     PAGE BACKGROUND rides just outside it. Whatever is underneath, exactly one of the two reads:
-     on the page the keyline is the background and only the hairline shows, on an accent fill the
-     hairline is the fill and only the keyline shows. It follows the shape through the caret
-     morph, and it is the surface colour rather than a dark one for the light theme's sake, where
-     a dark edge reads as a smudge and swallows the 1px line it was meant to protect. */
-  box-shadow: 0 0 0 1px var(--bg);
-  transition: width var(--dur-near) var(--ease), height var(--dur-near) var(--ease),
-              border-radius var(--dur-near) var(--ease), border-color var(--dur-tint) var(--ease),
-              background var(--dur-tint) var(--ease);
-}
-
-/* 4px per state: the tighten only has to be legible next to the state before it, and a deep one
-   reads as the ring flinching away from the target. The fill jumps as well, because size alone
-   stops separating press from hover once the steps are this small. */
-#cursor.hover #cursor-ring { width: 22px; height: 22px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
-#cursor.hover.press #cursor-ring { width: 18px; height: 18px; background: color-mix(in srgb, var(--accent) 26%, transparent); }
-
-/* refuses the click: holds idle size on purpose. Not doing the tighten is the signal */
-#cursor.blocked #cursor-ring { border-color: var(--danger); }
-
-/* the ring IS the caret over text: the circle squeezes into the bar, and the transparent border
-   lets the fill through the full 2px. The JS drops the trail here, so it stands under the
-   pointer, where the click will put the real caret. */
-#cursor.text #cursor-ring {
-  width: 2px; height: var(--caret-h);
-  border-radius: 1px;
-  border-color: transparent;
-  background: var(--accent);
+  top: 0;
+  left: 0;
+  z-index: 9989;
+  width: 68px;
+  height: 68px;
+  pointer-events: none;
+  opacity: 0;
+  mix-blend-mode: var(--cursor-glow-blend);
+  background: radial-gradient(circle closest-side, var(--cursor-glow), transparent);
 }
 
-/* one-shot on release over a target, removed on animationend. Placed by left/top so the keyframe
-   owns the transform outright. Carries the ring's keyline: it fires over targets, and those are
-   the fills it would vanish into */
-.cursor-pulse {
-  position: fixed;
-  width: 26px; height: 26px;
-  margin: -13px 0 0 -13px;
-  border: 1px solid var(--accent);
-  border-radius: 50%;
-  box-shadow: 0 0 0 1px var(--bg);
-  will-change: transform;
-  animation: cursor-pulse var(--dur-far) var(--ease-out) forwards;
-}
-/* Starts at 6.2px across, near enough to a point that the ripple reads as leaving the click
-   rather than as the pressed ring let go. The transform scales the stroke with it, so a 1px
-   border would draw a quarter-pixel line at that size and the small start would not paint at
-   all; the border-width runs the other way so the start still draws. Sampled every 2ms across
-   the run, the drawn stroke spans 0.96 to 2.6px, against 0.24px at the start without it. The
-   spread is Chrome flooring the animated border-width to whole pixels. */
-@keyframes cursor-pulse {
-  from { transform: scale(0.24); border-width: 4px; opacity: 0.85; }
-  to   { transform: scale(2.1); border-width: 0.5px; opacity: 0; }
+/* A cache can serve another version's cursor.js beside this file. A v1 or v2 module arms
+   `custom-cursor` for a mark this sheet does not style, so the native cursor hides only for
+   a v3 mark: under `cursor-v3`, which only this sheet's own module sets, or beside
+   `#cursor-paint`, which an older v3 module builds without setting the class. The `:has()`
+   guard is a rule of its own: an engine without `:has()` drops the whole selector list. Both
+   hide only inside the module's own gate query, where the mark can show, and the rule below
+   hides #cursor outside it: whatever a module does with `custom-cursor` when the gate changes,
+   the native cursor and the mark never hide together. */
+@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
+  html.custom-cursor.cursor-v3, html.custom-cursor.cursor-v3 * { cursor: none !important; -webkit-user-drag: none; }
+  html.custom-cursor:has(#cursor-paint), html.custom-cursor:has(#cursor-paint) * { cursor: none !important; -webkit-user-drag: none; }
 }
-
-/* `-webkit-user-drag`: a native drag puts the OS cursor and a ghost image back on screen, and
-   neither obeys `cursor: none`. The JS cancels dragstart too, for the engines ignoring this,
-   and refuses the pointerdown on a link, which is earlier than either.
-   Selection survives - it stops elements being dragged, not text being picked. */
-html.custom-cursor, html.custom-cursor * { cursor: none !important; -webkit-user-drag: none; }
-/* Unscoped: a native drag ghost carries its own OS cursor and defeats the ring
-   the moment it starts, class or no class. Selection survives. */
+/* a v1 or v2 module's ring, comet and halo stay out of the page flow beside this sheet:
+   unstyled, the comet's viewport-sized canvas and the halo would push the page taller */
+#cursor-ring, #cursor-comet, #cursor-halo { display: none !important; }
+/* a native drag ghost carries its own OS cursor, class or no class */
 a, img { -webkit-user-drag: none; }
-@media (hover: none), (pointer: coarse) { #cursor { display: none; } }
+@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { #cursor, #cursor-glow { display: none; } }