stitch2 0.19.2 → 0.20.0

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/canvas.html

@@ -139,7 +139,7 @@
     <input id="search" placeholder="Search screens… ( / )" />
     <div class="seg" id="statusFilter"><button type="button" data-v="active" class="on" title="Everything except archived versions">Active</button><button type="button" data-v="approved" title="The reference versions agents build on">Approved</button><button type="button" data-v="review" title="Finished by an agent, waiting for your decision">Needs review</button><button type="button" data-v="all" title="Including archived versions">All</button></div>
     <details id="versionFilter" class="multi" hidden title="Show only the versions you pick (several at once), or all of them"><summary>All versions</summary><div class="menu"></div></details>
-    <details id="variantFilter" class="multi" hidden title="Show only the variants you pick: mobile, desktop (several at once), or all of them"><summary>All variants</summary><div class="menu"></div></details>
+    <details id="variantFilter" class="multi" hidden title="Show only the variants you pick: mobile, tablet, desktop (several at once), or all of them"><summary>All variants</summary><div class="menu"></div></details>
     <select id="themeFilter" class="pick" hidden title="Show every screen in this theme (T)" aria-label="Theme"></select>
     <select id="widthFilter" class="pick" title="Show every screen at the narrowest or widest window its variant covers, or at one breakpoint (W)" aria-label="Width"></select>
     <select id="langFilter" class="pick" title="Show every screen in this language (L)" aria-label="Language"></select>

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/list.js

@@ -1,5 +1,5 @@
 /**
- * Lists every screen version, variant by variant (mobile, desktop), with its status and the reviewer's note, for agents (and anyone without the
+ * Lists every screen version, variant by variant (mobile, tablet, desktop), with its status and the reviewer's note, for agents (and anyone without the
  * canvas open). Approved versions are the reference; review versions wait for the user; notes are feedback.
  * Ends with what makes the current version unclear (versionProblems); --strict fails on it.
  * Usage: stitch2 screens [screen name] [--status approved|review|draft|archived] [--json] [--strict]

package/dist/sandbox.js

@@ -3,7 +3,7 @@
  * versions, so their work is not anchored to what exists ("fresh eyes"), and where changes to the skills can
  * be tested on output that only the rules produced.
  *
- *   stitch2 sandbox create <dir> <brief.md>… [--device mobile|desktop] [--context <screen>…]
+ *   stitch2 sandbox create <dir> <brief.md>… [--device mobile|tablet|desktop] [--context <screen>…]
  *     The project's config, its design folder without screens (DESIGN.md, tokens, components, the catalog and
  *     templates), the skills from the config, a copy of stitch2 and the briefs (one screen each, named after the
  *     file). --context adds the approved versions of other screens, to stay consistent with them.
@@ -34,7 +34,7 @@ if (sub === 'create') {
     const context = flag('context') ?? [];
     const [dir, ...briefs] = argv;
     if (!dir || !briefs.length) {
-        console.error('usage: stitch2 sandbox create <dir> <brief.md>… [--device mobile|desktop] [--context <screen>…]');
+        console.error('usage: stitch2 sandbox create <dir> <brief.md>… [--device mobile|tablet|desktop] [--context <screen>…]');
         process.exit(1);
     }
     const out = resolve(dir);

package/dist/screens.d.ts

@@ -25,7 +25,7 @@ export interface Screen {
      * decides it for all of its versions; without one a screen is its own page.
      */
     page: string;
-    device: 'mobile' | 'desktop';
+    device: 'mobile' | 'tablet' | 'desktop';
     /** Where the version came from: stitch, lab or trial. */
     source: 'stitch' | 'lab' | 'trial';
     /** Short version label: "v3", "Stitch", "Trial 2". */

package/dist/screens.js

@@ -41,7 +41,7 @@ export function listScreens() {
             const source = (meta(html, tag('source')) ??
                 (under(path, config.stitchDir) ? 'stitch' : archive ? 'trial' : 'lab'));
             // design/screens/<screen>/<device>-v<N>.html, or older files named after the screen.
-            const versioned = /^(mobile|desktop)-v(\d+)$/.exec(name);
+            const versioned = /^(mobile|tablet|desktop)-v(\d+)$/.exec(name);
             out.push({
                 path,
                 group,
@@ -53,7 +53,7 @@ export function listScreens() {
                 screen: meta(html, tag('screen')) ?? (versioned ? group.split('/').pop() : name),
                 page: meta(html, tag('page')) ?? '',
                 device: (meta(html, tag('device')) ??
-                    (versioned?.[1] || (width >= 768 ? 'desktop' : 'mobile'))),
+                    (versioned?.[1] || (width >= 1000 ? 'desktop' : width >= 600 ? 'tablet' : 'mobile'))),
                 source,
                 version: meta(html, tag('version')) ??
                     (versioned

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.2",
+  "version": "0.20.0",
   "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