@usableapp/cardds 0.7.98 → 0.7.100

package/docs/reference.md

@@ -575,6 +575,12 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
   them. Seen in timebank's help-ask prototype: a Composer, a Dropdown and a
   map on white cards inside the help sheet, the cards the colour of the
   ground.
+  `field-off-sheet` (error) flags the same controls when their nearest
+  container in the file is a `Page`, `Pages`, `Step` or `Screen`: a form is
+  never on the ground. A form over a screen is a `Sheet` in a
+  `SheetStage over dim` (gallery `Home/AskSheet`). A bar's control is not a
+  form on the ground: a `Slider` in an `ActionBarTier`, a `Dropdown` in a
+  `FilterRow` or a `TopBar`'s actions, a `Toggle` in an `AppBar`.
 - **Two sheet systems, one material.** *Sheet single* (`.sheet`, `sheet.css`)
   is ONE sheet the member acts in, whatever it holds: a short entry in front
   of a step's card, a place on a map, a payment on a dim page — in a `.step`

package/lint/rules.mjs

@@ -119,7 +119,8 @@ function* styleEntries(body, at, sep) {
 export function checkSource(source, file, { classes = carddsClasses() } = {}) {
   const findings = [];
   const lines = source.split('\n');
-  let text = source.replace(/\/\*[\s\S]*?\*\/|(?<![:'"`\\])\/\/[^\n]*/g, (c) => c.replace(/[^\n]/g, ' ')); // comments out, lines kept
+  // comments out, lines kept; a string is stepped over whole, so `accept="image/*"` opens no comment
+  let text = source.replace(/"[^"\n]*"|'[^'\n]*'|`[^`]*`|\/\*[\s\S]*?\*\/|(?<![:'"`\\])\/\/[^\n]*/g, (c) => /^["'`]/.test(c) ? c : c.replace(/[^\n]/g, ' '));
   const add = (rule, level, idx, message) => {
     const line = lineOf(text, idx);
     if (!/cardds-ignore-next-line/.test(lines[line - 2] ?? '')) findings.push({ rule, level, file, line, message }); // `// cardds-ignore-next-line` — a deliberate case (a story that shows the wrong way)
@@ -229,15 +230,40 @@ export function checkSource(source, file, { classes = carddsClasses() } = {}) {
 
   // 10 · the sheet is the paper the member fills in (Lh 2026-10-18): every control the member fills or picks stands on a Sheet's body, a SheetStep
   //      or a stack sheet; a card is for reading and pressing buttons. A Card that is a sheet of a SheetStack IS a sheet (the stack's material)
-  const span = (re) => [...text.matchAll(re)].map((m) => ({ at: m.index, body: m.index + tagAt(text, m.index).length, end: m.index + elementAt(text, m.index).length }));
+  // a `<` right after a name is a type argument (`Record<Step, string>`, `useState<Step>`), not a tag; an element that never closes holds nothing
+  const span = (re) => [...text.matchAll(re)].filter((m) => !/[\w$)\].]/.test(text[m.index - 1] ?? '')).map((m) => {
+    const open = tagAt(text, m.index), el = elementAt(text, m.index), closed = open.endsWith('/>') || el.endsWith(`</${m[0].slice(1).match(/^[\w.]+/)[0]}>`);
+    return { at: m.index, body: m.index + open.length, end: m.index + (closed ? el : open).length };
+  });
   const stacks = span(/<SheetStack\b(?![\w.])/g), cards = span(/<Card\b(?![\w.])/g);
   const within = (at, el) => at > el.at && at < el.end;
   const innermost = (at) => cards.filter((c) => within(at, c)).at(-1);
+  // a form is never on the ground (Lh 2026-10-18, timebank's ask steps on a bare Page): the control's nearest container written in this file decides.
+  // None in the file (a step component's fragment) is not judged here — the file that places it is
+  const places = [
+    ...span(/<(?:Sheet|SheetBody|SheetStep|StackSheet|SheetStack|CallSheet|Modal|ModalAsk)\b(?![\w.])/g).map((p) => ({ ...p, ground: false })), // a modal is a surface over the screen too
+    ...span(/<(?:ActionBarTier|FilterRow|TopBar|AppBar)\b(?![\w.])/g).map((p) => ({ ...p, ground: false })), // a bar's control: a Slider in a control tier, a Dropdown in a filter row or a top bar's actions, a Toggle in an app bar
+    ...span(/<(?:Page|Pages|Step|Screen)\b(?![\w.])/g).map((p) => ({ ...p, ground: true })),
+    ...cards.map((p) => ({ ...p, ground: false })), // a card round it is field-in-card's finding
+  ].sort((a, b) => a.at - b.at);
+  // true on a sheet, false on the ground, null when this file cannot tell. A component of this file is where it is placed: the ask steps' <Page>,
+  // in a function rendered inside a <SheetBody> further up the file, slides inside that sheet
+  const componentAt = (at) => [...text.slice(0, at).matchAll(/(?:function\s+|const\s+)([A-Z]\w*)/g)].at(-1)?.[1];
+  const onSheet = (at, depth = 0) => {
+    const place = places.filter((p) => within(at, p)).at(-1);
+    if (place && !place.ground) return true;
+    const name = depth < 5 && componentAt(at);
+    if (name) for (const u of text.matchAll(new RegExp(`(?<![\\w$)\\].])<${name}\\b(?![\\w.])`, 'g'))) if (onSheet(u.index, depth + 1)) return true;
+    return place ? false : null;
+  };
   for (const c of text.matchAll(/<(Field|Composer|ComposerArea|Pin|Dropdown|Slider|Toggle|Check|ChipPick|Calendar|DayStrip|Day|Picker|Mood|AvatarPick|FileBtn|AddRow|MapPick|Tile)\b(?![\w.])/g)) {
     const kind = c[1] === 'Tile' ? tagAt(text, c.index).match(/\s(pick|upload)\b(?!\s*=\s*\{\s*false)/)?.[1] : null;
     if (c[1] === 'Tile' && !kind) continue; // a plain or stat Tile is read, not filled
     const card = innermost(c.index);
-    if (!card) continue;
+    if (!card) {
+      if (onSheet(c.index) === false) add('field-off-sheet', 'error', c.index, `<${kind ? `Tile ${kind}` : c[1]}> on the ground: a form is never on the ground, it sits only on a sheet (Lh 2026-10-18). A Page, Pages, Step or Screen is the base, not a sheet. Put the control on a Sheet's <SheetBody>, in a <SheetStep>, or on a stack sheet — a form over a screen is a <Sheet> in a <SheetStage over dim> (Home/AskSheet).`);
+      continue;
+    }
     const stack = stacks.filter((s) => card.at >= s.body && card.at < s.end).at(-1);
     if (stack && !cards.some((o) => o !== card && within(card.at, o) && o.at >= stack.body)) continue;
     const name = kind ? `Tile ${kind}` : c[1];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.98",
+  "version": "0.7.100",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",