stitch2 0.19.3 → 0.20.1

package/README.md

@@ -69,7 +69,9 @@ file that already exists. From there the agent spends its effort on the design.
   rules for scripts without capitals) and a Tailwind config, from DESIGN.md's front matter, plus Material 3
   colour roles from a seed colour. **Exports** write the same tokens for your app, so DESIGN.md drives the
   product as well as the screens: plain CSS variables, a Tailwind v4 theme (`@theme` plus `@utility type-*`), or
-  W3C Design Tokens JSON for Style Dictionary and native platforms. Aliases keep your app's own variable names:
+  W3C Design Tokens JSON for Style Dictionary and native platforms. The CSS and Tailwind exports also set the
+  cursor: the hand over every enabled control, not-allowed over a disabled one (Tailwind v4 gives buttons the
+  arrow). Aliases keep your app's own variable names:
 
   ```json
   "exports": [

package/dist/audit.js

@@ -218,6 +218,14 @@ export async function audit(opts) {
     window.scrollTo(0, 0);
     // 4. Tap targets: WCAG 2.2 asks for at least 24px; smaller than the config's comfortableTarget is a warning.
     const interactive = all.filter((el) => el.matches('button, a[href], input:not([type=hidden]), select, textarea, [role=button], [role=tab], [role=switch], [role=checkbox]'));
+    // Fixed and sticky layers float over the scrolling page (a running-workout panel over cards): content slides
+    // under them while scrolling, so they never crowd in-flow targets. Tap spacing (6d) already compares layers.
+    const layerOf = (el) => {
+        for (let e = el; e; e = e.parentElement)
+            if (['fixed', 'sticky'].includes(getComputedStyle(e).position))
+                return e;
+        return null;
+    };
     for (const el of interactive) {
         if (interactive.some((o) => o !== el && o.contains(el)))
             continue;
@@ -229,7 +237,7 @@ export async function audit(opts) {
         const cx = r.left + r.width / 2;
         const cy = r.top + r.height / 2;
         const crowded = interactive.some((o) => {
-            if (o === el || o.contains(el) || el.contains(o))
+            if (o === el || o.contains(el) || el.contains(o) || layerOf(o) !== layerOf(el))
                 return false;
             const q = o.getBoundingClientRect();
             const dx = Math.max(q.left - cx, 0, cx - q.right);
@@ -250,12 +258,8 @@ export async function audit(opts) {
     // 4b. Controls never overlap one another (a button squeezed over its neighbour). Controls inside one another
     // and invisible overlays (a native picker laid over a row) are fine; fixed and sticky layers (a docked timer,
     // a sticky Save bar floating over a list) are compared apart from the scrolling page.
-    const layer = (el) => {
-        for (let e = el; e; e = e.parentElement)
-            if (['fixed', 'sticky'].includes(getComputedStyle(e).position))
-                return e;
-        return null;
-    };
+    // layerOf is defined with the tap targets above; fixed and sticky layers are compared apart here too.
+    const layer = layerOf;
     // The part of a control its scrolling or clipping ancestors show: a link scrolled out of a nav strip is not drawn
     // where its box would be.
     const visibleBox = (el) => {

package/dist/exports.d.ts

@@ -21,5 +21,10 @@ export interface Tokens {
     root: Record<string, string>;
     header: string;
 }
+/**
+ * The cursor over controls, in @layer base so any utility (cursor-grab, cursor-text) or component rule wins.
+ * check reports a catalog control that still shows another cursor (state-cursor, states.ts).
+ */
+export declare const POINTER: string;
 /** Writes every export in the config; returns their paths. */
 export declare function writeExports(t: Tokens, list?: TokenExport[]): string[];

package/dist/exports.js

@@ -8,6 +8,8 @@
  *              Motion: ease-<name> classes, duration-<name> utilities, and Tailwind's default transition (the
  *              plain transition, transition-colors…) set to the first duration and ease-standard.
  *   dtcg       W3C Design Tokens JSON, for Style Dictionary and other platforms (iOS, Android)
+ * css and tailwind4 also carry the pointer rule (POINTER): every enabled control shows the hand cursor, a disabled
+ * one shows not-allowed. Tailwind v4's preflight gives buttons the arrow, so without it nothing looks clickable.
  * "aliases" maps the app's own variable names to DESIGN.md colours ({ "background": "floor" } writes
  * --background: var(--<prefix>-floor) in each theme), so an existing theme (shadcn's, say) keeps its names.
  */
@@ -15,6 +17,25 @@ import { mkdirSync, writeFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
 import { BASE, config } from './config.js';
 const p = () => config.prefix;
+/**
+ * The cursor over controls, in @layer base so any utility (cursor-grab, cursor-text) or component rule wins.
+ * check reports a catalog control that still shows another cursor (state-cursor, states.ts).
+ */
+export const POINTER = [
+    '/* Every enabled control shows the hand cursor, a disabled one not-allowed (Tailwind v4 gives buttons the arrow). */',
+    '@layer base {',
+    '  button:not(:disabled), [role="button"]:not([aria-disabled="true"]), [role="switch"]:not([aria-disabled="true"]),',
+    '  [role="tab"]:not([aria-disabled="true"]), [role="checkbox"]:not([aria-disabled="true"]),',
+    '  [role="radio"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"]),',
+    '  [role="menuitem"]:not([aria-disabled="true"]), summary, select:not(:disabled), label[for],',
+    '  input:is([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"]):not(:disabled) {',
+    '    cursor: pointer;',
+    '  }',
+    '  :disabled, [aria-disabled="true"] {',
+    '    cursor: not-allowed;',
+    '  }',
+    '}',
+].join('\n');
 function themeBlocks(t, e) {
     const dark = e.themes?.dark ?? ":root, [data-theme='dark']";
     const light = e.themes?.light ?? "[data-theme='light']";
@@ -35,7 +56,7 @@ function themeBlocks(t, e) {
 }
 function css(t, e) {
     const type = Object.entries(t.type).map(([n, d]) => `.type-${n} { ${d.join('; ')}; }`);
-    return [t.header, ...themeBlocks(t, e), ...type, ''].join('\n\n');
+    return [t.header, ...themeBlocks(t, e), ...type, POINTER, ''].join('\n\n');
 }
 function tailwind4(t, e) {
     const families = Object.values(t.design.typography).map((x) => x.fontFamily ?? '');
@@ -52,7 +73,7 @@ function tailwind4(t, e) {
     const durations = Object.keys(t.design.motion)
         .filter((k) => k.startsWith('duration-'))
         .map((k) => `@utility ${k} {\n  transition-duration: var(--${p()}-${k});\n  animation-duration: var(--${p()}-${k});\n}`);
-    return [t.header, ...themeBlocks(t, e), `@theme inline {\n${theme.join('\n')}\n}`, ...type, ...durations, ''].join('\n\n');
+    return [t.header, ...themeBlocks(t, e), `@theme inline {\n${theme.join('\n')}\n}`, ...type, ...durations, POINTER, ''].join('\n\n');
 }
 /** @theme entries for motion: --ease-<name> (Tailwind's ease-* classes) and the default transition. */
 function motionTheme(motion) {

package/dist/states.js

@@ -49,7 +49,8 @@ function findControls(opts) {
             h.setAttribute('data-s2-state', String(out.length));
             const field = h.matches('input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]), textarea, select, [contenteditable="true"]');
             const chosen = ['aria-pressed', 'aria-selected', 'aria-checked'].some((a) => h.getAttribute(a) === 'true') || (h.hasAttribute('aria-current') && h.getAttribute('aria-current') !== 'false');
-            out.push({ i: out.length, name, label, selector: path(h), field, chosen });
+            const clickable = h.matches('button, a[href], summary, select, [role="button"], [role="switch"], [role="tab"], [role="checkbox"], [role="radio"], [role="option"], [role="menuitem"], input:is([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"])');
+            out.push({ i: out.length, name, label, selector: path(h), field, chosen, clickable });
         }
     }
     return out;
@@ -89,7 +90,7 @@ function lookOf(i) {
         const large = parseFloat(cs.fontSize) >= 24 || (parseFloat(cs.fontSize) >= 18.66 && Number(cs.fontWeight) >= 700);
         worst = Math.min(worst, ratio / (large ? 3 : 4.5));
     }
-    return { look, contrast: worst };
+    return { look, contrast: worst, cursor: getComputedStyle(el).cursor };
 }
 /**
  * The states of every control in the catalog open in the page, in the current theme. With crop, saves a picture
@@ -147,6 +148,10 @@ export async function catalogStates(page, path, opts) {
             else if (noPress)
                 add('state-pressed', who + ': pressing adds nothing to hover, so a tap gives no feedback (DESIGN.md, pressed)');
         }
+        // The hand says "this does something" before the click; the arrow over a button reads as plain text.
+        const cursor = looks.hover?.cursor;
+        if (c.clickable && cursor && cursor !== 'pointer')
+            add('state-cursor', who + ': the pointer shows "' + cursor + '" over it, not the hand, so it doesn\'t look clickable (stitch2 tokens writes the rule; a component overrides it)');
         for (const state of ['hover', 'focus', 'pressed'])
             if ((looks[state]?.contrast ?? 21) < 1 && (looks.rest?.contrast ?? 21) >= 1) {
                 add('state-contrast', who + ': low text contrast when ' + (state === 'focus' ? 'focused' : state === 'hover' ? 'hovered' : 'pressed'));

package/dist/tokens.js

@@ -11,7 +11,7 @@ import { join } from 'node:path';
 import { argbFromHex, Hct, hexFromArgb, MaterialDynamicColors, SchemeContent, SchemeExpressive, SchemeFidelity, SchemeFruitSalad, SchemeMonochrome, SchemeNeutral, SchemeRainbow, SchemeTonalSpot, SchemeVibrant, } from '@material/material-color-utilities';
 import { config as lab } from './config.js';
 import { readDesign } from './design-md.js';
-import { writeExports } from './exports.js';
+import { POINTER, writeExports } from './exports.js';
 import { ROOT } from './screens.js';
 const SCHEMES = {
     fidelity: SchemeFidelity,
@@ -98,6 +98,7 @@ writeFileSync(join(ROOT, 'tokens.css'), [
         : []),
     '/* Typography levels: one class sets family, size, line height, weight, tracking and figures. */',
     typeCss.join('\n'),
+    POINTER,
     '',
 ].join('\n\n'));
 const colors = Object.fromEntries(Object.keys(dark).map((k) => [k, `var(--${lab.prefix}-${k})`]));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stitch2",
-  "version": "0.19.3",
+  "version": "0.20.1",
   "description": "A design canvas, layout and type checks, component consistency and screen versioning for agent-built UI, on Google's DESIGN.md format.",
   "license": "MIT",
   "author": "ifokeev",

package/skills/stitch2/references/components.md

@@ -35,14 +35,20 @@ Every interactive component has its states, defined once in the component and de
 | Focus (keyboard) | a ring, never removed without a replacement |
 | Selected / current | shown by the accent or a raised surface; hover and press may stay as they are |
 | Disabled | faint, no hover or press change, the reason nearby |
+| Cursor (pointer only) | the hand over everything that acts when clicked (buttons, links, chips, rows that open something, switches, selects); not-allowed over a disabled control; the text cursor only in fields |
+
+The cursor comes from one rule, not from each component: `stitch2 tokens` writes it into tokens.css and every
+`css` and `tailwind4` export, in `@layer base`, because Tailwind v4's preflight gives buttons the arrow. A
+clickable element that is not a button or a link gets `role="button"` (and a keyboard handler), which also gives
+it the hand. Override the cursor only with a reason (`cursor-grab` on a drag handle).
 
 The catalog shows each component in each of its **data states** (selected, done, active, disabled, error, with
 and without an icon). Hover, focus and pressed are not drawn by hand: `stitch2 check` on the catalog forces them on
 every control and writes the **States** sheet (canvas sidebar), each control at rest, hovered, focused and
 pressed side by side. It reports a control that gives no feedback (**state-feedback**, **state-hover**,
 **state-pressed**: pressing adds nothing to hover, so a tap shows nothing) and text that loses contrast in a state
-(**state-contrast**). Fix them in the component, once. Selected and current controls and text fields are exempt
-from the feedback checks.
+(**state-contrast**), and a clickable control the pointer doesn't show as clickable (**state-cursor**). Fix them
+in the component, once. Selected and current controls and text fields are exempt from the feedback checks.
 
 ## Components from the app