@estiva-app/ui 0.42.0 → 0.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,9 +4,9 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.42.0",
-    "exports": 90,
-    "typeExports": 101,
+    "packageVersion": "0.44.0",
+    "exports": 91,
+    "typeExports": 102,
     "files": null
   },
   "storybook": {
@@ -1280,6 +1280,44 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "CommandPaletteProposal",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui",
+      "sourceFile": "src/CommandPalette.tsx",
+      "purpose": "Something the palette offers to make, before anything is made: a card with where it would be made on top, then what it would be.",
+      "purposeFrom": "comment",
+      "props": [
+        {
+          "name": "source",
+          "takes": "text",
+          "required": true,
+          "note": "Where it would be made: the app and the action — \"App › New item\"."
+        },
+        {
+          "name": "mark",
+          "takes": "anything",
+          "required": false,
+          "note": "The app's mark before the source, as small as the line (about 10px)."
+        },
+        {
+          "name": "children",
+          "takes": "text",
+          "required": true,
+          "note": "What would be made, in a sentence."
+        }
+      ],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "overlays-commandpalette--docs",
+      "storyId": "overlays-commandpalette--first-level",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "CommandPaletteQuote",
       "repo": "estiva-ui",

package/src/CommandPalette.mdx

@@ -23,6 +23,12 @@ form — and the app keeps the levels.
   above the rows, for a result that is written rather than listed: a line while
   it is on its way, an answer with marks pointing at the rows it came from, and
   text written to be used somewhere else.
+- **`CommandPaletteProposal`** — above the rows, for something the palette
+  offers to make before anything is made: a card with where it would be made
+  (`source`, with the app's `mark`), then what it would be. The rows under it
+  say what happens next.
+
+<Canvas of={CommandPaletteStories.Proposal} />
 
 <Canvas of={CommandPaletteStories.Answer} />
 

package/src/CommandPalette.stories.tsx

@@ -7,6 +7,7 @@ import {
   CommandPalette,
   CommandPaletteAnswer,
   CommandPaletteForm,
+  CommandPaletteProposal,
   CommandPaletteQuote,
   CommandPaletteSearch,
   CommandPaletteWorking,
@@ -54,6 +55,7 @@ type Level =
   | { kind: 'place'; name: string }
   | { kind: 'ask' }
   | { kind: 'draft' }
+  | { kind: 'make' }
   | { kind: 'form' }
   | { kind: 'one-list' }
 
@@ -62,7 +64,7 @@ interface Frame {
   query: string
 }
 
-type Start = 'first' | 'arriving' | 'nothing' | 'place' | 'working' | 'answer' | 'draft' | 'form' | 'refused' | 'one-list'
+type Start = 'first' | 'arriving' | 'nothing' | 'place' | 'working' | 'answer' | 'draft' | 'make' | 'form' | 'refused' | 'one-list'
 
 const PLACES = ['Place one', 'Place two']
 const ACTIONS = [
@@ -81,6 +83,7 @@ const GROUPS = [
 ]
 const ANSWER = 'Item one moved on Monday [1], and item two is waiting on a reply [2].\n\nNothing else changed this week.'
 const DRAFT = 'Thanks, both. I will look at item one today\nand reply on item two tomorrow.'
+const PROPOSAL = 'An item for the reply on item two, due tomorrow.'
 
 function startStack(start: Start): Frame[] {
   const first: Frame = { level: { kind: 'first' }, query: '' }
@@ -96,6 +99,8 @@ function startStack(start: Start): Frame[] {
       return [first, { level: { kind: 'ask' }, query: 'What changed this week?' }]
     case 'draft':
       return [first, { level: { kind: 'draft' }, query: 'Say I will look today' }]
+    case 'make':
+      return [first, { level: { kind: 'make' }, query: '' }]
     case 'form':
     case 'refused':
       return [first, { level: { kind: 'place', name: 'Place one' }, query: '' }, { level: { kind: 'form' }, query: '' }]
@@ -180,6 +185,17 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
         },
       ]
     }
+    if (level.kind === 'make') {
+      return [
+        {
+          label: 'Next',
+          rows: [
+            { id: 'make-open', label: 'Open the form', description: 'Place one › Action one · nothing is made until you submit', icon, onSelect: () => push({ kind: 'form' }) },
+            { id: 'make-again', label: 'Suggest something else', icon, onSelect: () => close('Suggest something else') },
+          ],
+        },
+      ]
+    }
     if (level.kind === 'ask' || level.kind === 'draft') {
       if (!asked?.done) return []
       const changed = frame.query.trim() !== asked.question.trim()
@@ -236,6 +252,7 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
           rows: [
             { id: 'ask', label: 'Ask about this page', icon, onSelect: () => push({ kind: 'ask' }) },
             { id: 'draft', label: 'Write a draft', icon, onSelect: () => push({ kind: 'draft' }) },
+            { id: 'make', label: 'Make something from this page', icon, onSelect: () => push({ kind: 'make' }) },
             { id: 'one-list', label: 'Change kind', description: 'Item one', icon, onSelect: () => push({ kind: 'one-list' }) },
           ],
         },
@@ -289,6 +306,7 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
   }
 
   const body = (() => {
+    if (level.kind === 'make') return <CommandPaletteProposal source="Place one › Action one" mark={<IconSquareRounded size={10} stroke={1.5} />}>{PROPOSAL}</CommandPaletteProposal>
     if (level.kind !== 'ask' && level.kind !== 'draft') return undefined
     if (!asked || !asked.done) return <CommandPaletteWorking>Reading 12 notes…</CommandPaletteWorking>
     const changed = frame.query.trim() !== asked.question.trim()
@@ -355,6 +373,8 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
                   ? 'Ask anything about this page'
                   : level.kind === 'draft'
                     ? 'What should it say?'
+                    : level.kind === 'make'
+                    ? 'Looking at this page'
                     : 'Search, or choose a place'
             }
             groups={groups}
@@ -365,6 +385,8 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
                   ? { label: 'Ask', onBack: back }
                   : level.kind === 'draft'
                     ? { label: 'Draft', onBack: back }
+                    : level.kind === 'make'
+                    ? { label: 'Make', onBack: back }
                     : undefined
             }
             pending={level.kind === 'first' && searching ? 'Searching…' : undefined}
@@ -412,6 +434,9 @@ export const Answer: Story = story('answer')
 export const Quote: Story = story('draft')
 
 /** A form. Ctrl+Enter creates; a missing field says so and takes focus; Backspace in an empty field goes back and keeps what was typed. */
+/** Something it offers to make: where, then what. Nothing is made until the form is sent. */
+export const Proposal: Story = story('make')
+
 export const Form: Story = story('form')
 
 /** Creating is refused: the fields unlock, the reason sits beside the button, and focus is back where it was. */

package/src/CommandPalette.test.tsx

@@ -17,6 +17,7 @@ import {
   CommandPalette,
   CommandPaletteAnswer,
   CommandPaletteForm,
+  CommandPaletteProposal,
   CommandPaletteQuote,
   CommandPaletteSearch,
   CommandPaletteWorking,
@@ -421,6 +422,19 @@ describe('what sits above the rows', () => {
     expect(screen.getByText(/Line one/).textContent).toBe('Line one\nLine two')
   })
 
+  it('draws a proposal as a card: where it would be made, with its mark, then what', () => {
+    const { container } = render(
+      <CommandPaletteProposal source="Place one › Action one" mark={<svg data-testid="mark" />}>
+        An item for tomorrow.
+      </CommandPaletteProposal>,
+    )
+    const lines = container.firstElementChild?.children
+    expect(lines).toHaveLength(2)
+    expect(lines?.[0].textContent).toBe('Place one › Action one')
+    expect(lines?.[0].contains(screen.getByTestId('mark'))).toBe(true)
+    expect(lines?.[1].textContent).toBe('An item for tomorrow.')
+  })
+
   it('announces what is being worked on, with its grey bars', () => {
     const { container } = render(<CommandPaletteWorking bars={3}>Reading…</CommandPaletteWorking>)
     expect(screen.getByRole('status').textContent).toContain('Reading…')

package/src/CommandPalette.tsx

@@ -16,6 +16,7 @@ import type { BaseUIEvent } from '@base-ui/react/types'
 import { IconLoader2, IconSearch } from '@tabler/icons-react'
 import { cn } from './cn'
 import { Button } from './Button'
+import { Card } from './Card'
 import { InputChip } from './ChipInput'
 import { EmptyState } from './EmptyState'
 import { FieldLine } from './Field'
@@ -661,3 +662,31 @@ export interface CommandPaletteQuoteProps {
 export function CommandPaletteQuote({ children }: CommandPaletteQuoteProps) {
   return <p className="whitespace-pre-wrap border-l-2 border-border-default pl-3 text-body-2 text-text-primary">{children}</p>
 }
+
+export interface CommandPaletteProposalProps {
+  /** Where it would be made: the app and the action — "App › New item". */
+  source: string
+  /** The app's mark before the source, as small as the line (about 10px). */
+  mark?: ReactNode
+  /** What would be made, in a sentence. */
+  children: string
+}
+
+/**
+ * Something the palette offers to make, before anything is made: a card with
+ * where it would be made on top, then what it would be. A card because it is a
+ * thing about to exist, not text to read or use; the source first because two
+ * apps may offer something alike (UIG-40, Katerina 28 September: the look Peek's
+ * launcher already had, now drawn by the palette, ruling P4).
+ */
+export function CommandPaletteProposal({ source, mark, children }: CommandPaletteProposalProps) {
+  return (
+    <Card fill="surface" className="flex flex-col gap-1 p-3">
+      <span className="flex items-center gap-2 text-caption text-text-secondary">
+        {mark}
+        {source}
+      </span>
+      <span className="text-body-2 text-text-primary">{children}</span>
+    </Card>
+  )
+}

package/src/EmptyState.mdx

@@ -94,7 +94,7 @@ It does these by itself. Write none of them around it.
 
 | It does | So you never write | Refused when written by hand |
 |---|---|---|
-| As a `page`, fills the room it is given and centres itself in it | centring, or padding around it | a `page` inside a `ScrollArea`, where it cannot centre (`estiva/no-handmade-empty-state`) |
+| As a `page`, fills the room it is given and centres itself in it | centring, or padding around it | a box of its own that centres or pads a `page`, and a `page` inside a `ScrollArea`, where it cannot centre (`estiva/no-handmade-empty-state`) |
 | Says a list is empty, in place of its rows | a paragraph or span of your own saying so | `estiva/no-handmade-empty-state` |
 | Draws its one action, an outlined Button, under the line when you pass `action` | a button of your own under the line |  |
 

package/src/eslint/no-handmade-empty-state.test.ts

@@ -52,6 +52,8 @@ const jsx = (body: string) => component(`  return (\n${body}\n  )`)
 const scrolled = (imports: string, body: string) =>
   `import { ScrollArea, EmptyState } from '@estiva-app/ui'\n${imports}\nexport function Probe({ rows }: { rows: string[] }) {\n  return (\n${body}\n  )\n}\n`
 const handmade = [{ messageId: 'handmade' }]
+/** A component that draws `body`, with the app's own EmptyState imported. */
+const pageIn = (body: string) => `import { EmptyState } from '@/components/ui/EmptyState'\nexport function Probe() {\n  return (\n${body}\n  )\n}\n`
 
 tester.run('no-handmade-empty-state', noHandmadeEmptyState, {
   valid: [
@@ -100,6 +102,17 @@ tester.run('no-handmade-empty-state', noHandmadeEmptyState, {
     { name: 'a page state inside a ScrollArea whose content fills it', filename: app, code: scrolled('', '<ScrollArea className="flex-1" contentClassName="flex min-h-full flex-col">{rows.length === 0 && <EmptyState message="Nothing here yet." />}</ScrollArea>') },
     { name: 'a scope that is decided at run time is not judged', filename: app, code: scrolled('', '<ScrollArea className="flex-1"><EmptyState scope={rows.length ? "section" : "page"} message="Nothing here yet." /></ScrollArea>') },
     { name: "a component that hands its className to a section state (Ship's Activity), followed and fine", filename: app, code: scrolled("import { Activity } from '@/components/Activity'", '<ScrollArea className="flex-1" contentClassName="px-6"><section><Activity items={rows} /></section></ScrollArea>') },
+
+    // UIG-42: a box around a page state. The column it asks for, and a section's inset, pass.
+    { name: 'a page state in the flex column it asks for (Peek FilePage.tsx:315)', filename: app, code: pageIn('<div className="flex min-h-screen flex-col"><EmptyState message="Nothing here." /></div>') },
+    { name: "a section state in a box that gives it the rows' inset (Katerina, 14 September)", filename: app, code: pageIn('<div className="px-2 py-1"><EmptyState scope="section" message="Nothing starred." /></div>') },
+    { name: 'a page state that is not alone in its padded box (Ship ProjectsView.tsx:30)', filename: app, code: pageIn('<div className="flex flex-1 flex-col gap-4 px-6 py-5"><h2>Projects</h2><EmptyState message="No projects yet." /></div>') },
+    { name: "props spread in may carry the scope, so it is not judged (the package's EmptyState story)", filename: app, code: pageIn('<div className="p-4"><EmptyState {...({ scope: "section" } as const)} /></div>') },
+    {
+      name: 'a box kept with a reason',
+      filename: app,
+      code: pageIn('<>\n{/* @estiva-escape(no-handmade-empty-state): a probe that keeps its box */}\n<div className="p-4"><EmptyState /></div>\n</>'),
+    },
   ],
   invalid: [
     // the hand-made line, each way it stands in for a list
@@ -122,10 +135,19 @@ tester.run('no-handmade-empty-state', noHandmadeEmptyState, {
       errors: [{ messageId: 'escapeWithoutReason' }, ...handmade],
     },
 
+    // UIG-42: a box that places a page state. Peek's direct-message view, and the starter's home page before UIG-10's fix.
+    { name: 'a box that centres a page state', filename: app, code: pageIn('<div className="flex-1 flex items-center justify-center h-full"><EmptyState /></div>'), errors: [{ messageId: 'boxedPage', data: { what: 'centres' } }] },
+    {
+      name: 'a box that centres and pads it, from the package',
+      filename: app,
+      code: "import { EmptyState } from '@estiva-app/ui'\nexport function Probe() {\n  return (\n    <main className=\"flex justify-center px-6 py-16\">\n      <EmptyState message=\"Nothing here yet.\" />\n    </main>\n  )\n}\n",
+      errors: [{ messageId: 'boxedPage', data: { what: 'centres and pads' } }],
+    },
+
     // the wrong scope
     { name: 'a page state straight inside a ScrollArea', filename: app, code: scrolled('', '<ScrollArea className="min-h-0 flex-1">{rows.length === 0 && <EmptyState message="Nothing here yet." />}</ScrollArea>'), errors: [{ messageId: 'wrongScope' }] },
     { name: 'scope="page" said out loud', filename: app, code: scrolled('', '<ScrollArea className="flex-1" contentClassName="flex flex-col gap-3 p-4"><EmptyState scope="page" message="Nothing here yet." /></ScrollArea>'), errors: [{ messageId: 'wrongScope' }] },
-    { name: "through the app's wrapper, one box down", filename: app, code: "import { ScrollArea } from '@estiva-app/ui'\nimport { EmptyState } from '@/components/ui/EmptyState'\nexport function Probe() {\n  return <ScrollArea className=\"flex-1\"><div className=\"p-4\"><EmptyState message=\"Nothing said about this yet.\" /></div></ScrollArea>\n}\n", errors: [{ messageId: 'wrongScope' }] },
+    { name: "through the app's wrapper, one box down", filename: app, code: "import { ScrollArea } from '@estiva-app/ui'\nimport { EmptyState } from '@/components/ui/EmptyState'\nexport function Probe() {\n  return <ScrollArea className=\"flex-1\"><div className=\"p-4\"><EmptyState message=\"Nothing said about this yet.\" /></div></ScrollArea>\n}\n", errors: [{ messageId: 'boxedPage', data: { what: 'pads' } }, { messageId: 'wrongScope' }] },
     {
       name: 'the file conversation at 7f22e5e~1: a view drawn in another file, scrolled here — both its states',
       filename: app,

package/src/eslint/no-handmade-empty-state.ts

@@ -165,6 +165,16 @@ function standsInForAList(element: Node): boolean {
 /** A content box that fills its viewport: `min-h-full` or `h-full` on `contentClassName`. */
 const FILLS = /^(?:min-h-full|h-full)$/
 
+/** What a box does that a page-scope EmptyState already does itself: centre, or leave room round it. */
+const CENTRES = /^(?:justify-center|items-center|content-center|place-(?:items|content)-center)$/
+const PADS = /^p[xytrblse]?-/
+
+/** The only element a box holds, when it holds one and nothing else but blank space. */
+function onlyElement(box: Node): Node | undefined {
+  const kids = children(box, 'children').filter((kid) => !(kid.type === 'JSXText' && !String(kid.value).trim()))
+  return kids.length === 1 && kids[0].type === 'JSXElement' ? kids[0] : undefined
+}
+
 function isPageScope(opening: Node): boolean {
   const scope = attributeOf(opening, 'scope')
   if (!scope) return true
@@ -265,6 +275,13 @@ const fileName = (file: string) => file.replace(/\\/g, '/').split('/').pop()
  * file and scrolled in another. A `contentClassName` with `min-h-full` or
  * `h-full` gives the state its room, and passes.
  *
+ * **A box that places it** (UIG-42). A plain box holding only a page-scope
+ * `EmptyState` and centring or padding it does the part's own job, and a box
+ * like that pinned the starter's home page 64px from the top (UIG-10). A box
+ * that is only the flex column the state asks for passes, and so does any box
+ * round a `section` state, which takes its inset from the box (Katerina, 14
+ * September).
+ *
  * Not judged: the package's `EmptyState` and a part's own lines (a
  * `FieldLine`, a palette's empty row) — a part is already a part.
  */
@@ -278,6 +295,8 @@ export const noHandmadeEmptyState: Rule.RuleModule = {
         'A line saying there is nothing is an EmptyState. Use `EmptyState` from @estiva-app/ui: `scope="section"` inside a section, `scope="page"` for a whole page.',
       wrongScope:
         'A page-scope EmptyState inside a ScrollArea sits at the top of its pane, not the middle: the ScrollArea\'s content is only as tall as what is in it. Use `scope="section"` when the pane has anything else on it; when the whole pane is empty, draw the page EmptyState in place of the ScrollArea, not inside it.',
+      boxedPage:
+        'This box {{what}} a page-scope EmptyState, which centres itself in the room a flex column gives it and takes no padding. A box that places it can push it out of the middle, as the starter\'s home page did (UIG-10). Draw the EmptyState straight into the column, with `className="h-full"` outside a flex column.',
       wrongScopeVia:
         '`{{component}}` draws a page-scope EmptyState ({{where}}) inside this ScrollArea, where it sits at the top of its pane, not the middle: the ScrollArea\'s content is only as tall as what is in it. Use `scope="section"` there when the pane has anything else on it; when the whole pane is empty, draw the page EmptyState in place of the ScrollArea, not inside it.',
       ...ESCAPE_MESSAGES,
@@ -300,8 +319,25 @@ export const noHandmadeEmptyState: Rule.RuleModule = {
         const opening = child(element, 'openingElement') as Node
         const tag = tagName(element)
 
-        // Shape 1: a plain box holding only a "nothing" line, where a list would be.
         if (tag && /^[a-z]/.test(tag)) {
+          // Shape 3 (UIG-42): a plain box around a page-scope EmptyState that centres or pads it.
+          const only = facts && onlyElement(element)
+          const inner = only && (child(only, 'openingElement') as Node)
+          // Props spread in (`{...args}`) may carry the scope, so it is not judged.
+          const spread = inner && children(inner, 'attributes').some((a) => a.type === 'JSXSpreadAttribute')
+          if (inner && !spread && isPart(bindingOfTag(child(inner, 'name'), facts!.locals), 'EmptyState') && isPageScope(inner)) {
+            const className = attributeOf(opening, 'className')
+            const own = className ? classesOf(child(className, 'value'), scopeOf).map((c) => c.replace(/^(?:[^:\s[\]]+:)+/, '')) : []
+            const centres = own.some((c) => CENTRES.test(c))
+            const pads = own.some((c) => PADS.test(c))
+            if ((centres || pads) && !isEscaped(context, opening)) {
+              const what = centres && pads ? 'centres and pads' : centres ? 'centres' : 'pads'
+              context.report({ loc: opening.loc as NonNullable<Rule.Node['loc']>, messageId: 'boxedPage', data: { what } })
+            }
+            return
+          }
+
+          // Shape 1: a plain box holding only a "nothing" line, where a list would be.
           const words = onlyWords(element)
           if (!words || words.length > SHORT) return
           if (!standsInForAList(element)) return

package/src/gates/app-checks.ts

@@ -57,6 +57,7 @@ export const APP_TICKET_TITLES: Record<string, string> = {
   'UIG-30': 'RichText — one component that draws a message\'s text, for both apps',
   'UIG-32': 'Peek and Ship take their gate pieces from the package',
   'UIG-37': 'The gates refuse a TypeScript eslint-disable comment — know the rule names, rules off',
+  'UIG-42': "What the gate can't see yet — a box around a part, a screen drawn by hand, two blind spots in the token check",
 }
 
 /** Run several checks as one: the first that does not pass is the answer. */
@@ -254,6 +255,12 @@ export function appChecks(h: GateHelpers, { app = '.', page, chain = { ref: 'UIG
         return probe(code, 'none', undefined, 'src/components/__gates_probe__.test.tsx', config)()
       }), 'a test file is not checked for hand-written values, while source is') },
     ]),
+    // Built 28 September: the token check's two blind spots, and a box that places a page EmptyState.
+    ticket('UIG-42', [
+      { what: 'a class behind an arbitrary variant is an error', run: tokenProbe(component('<div className="group-hover/row:bg-gray-100">x</div>'), 'error') },
+      { what: 'a class list joined by hand is read', run: tokenProbe(component("<div className={['text-sm', 'p-2'].join(' ')}>x</div>"), 'error') },
+      { what: 'a box that centres a page EmptyState is an error naming it', run: probe(`import { EmptyState } from '@estiva-app/ui'\n${component('<div className="flex items-center justify-center"><EmptyState message="Nothing here" /></div>')}`, 'error', 'page-scope EmptyState') },
+    ]),
     // Built 28 September: both apps drew the protocol's text tree by hand, and drifted apart.
     // A file that reads the protocol and draws a quote or a numbered list itself is a third copy.
     ticket('UIG-30', [

package/src/gates/gate-config.ts

@@ -21,6 +21,7 @@ import betterTailwindcss from 'eslint-plugin-better-tailwindcss'
 import { parser as typescriptParser } from 'typescript-eslint'
 import estiva from '../eslint/index'
 import { KNOWN_PLUGINS, TOKEN_LINT_IGNORES } from './token-lint'
+import { tokenJoinedPlugin } from './token-joined'
 import { tokenStylePlugin } from './token-style'
 
 export interface GateConfigOptions {
@@ -72,6 +73,7 @@ export function gateConfig({ audience = 'app', quiet = {}, ignores = [] }: GateC
         'token-values': betterTailwindcss,
         'token-spacing': betterTailwindcss,
         'token-style': tokenStylePlugin,
+        'token-joined': tokenJoinedPlugin,
       },
       // Every other config's directives are unused here, because their rules are
       // off here. Reporting them would be this config complaining about the

package/src/gates/gates.test.ts

@@ -91,6 +91,32 @@ describe('tokenLint and tokenValues', () => {
     expect(await lintWith(gateConfig(), `// eslint-disable-next-line token-style/no-token-style -- @estiva-escape: a colour the probe keeps\n${kept}`, 'src/Probe.tsx')).toEqual([])
   })
 
+  it('read a class behind an arbitrary variant or a `!` (UIG-42)', async () => {
+    for (const name of ['[&_pre]:text-sm', 'group-hover/row:bg-gray-100', 'data-[state=open]:bg-[#fff]', 'group-hover/row:bg-bg-surface/50', '!text-sm']) {
+      const messages = await lintWith([tokenLint(), tokenValues()], component(`<div className="${name}">x</div>`), 'src/Probe.tsx')
+      expect(messages.filter((m) => m.ruleId === 'better-tailwindcss/no-restricted-classes'), name).toEqual([expect.objectContaining({ severity: 2 })])
+    }
+  })
+
+  it('read a class list joined by hand, with the same messages and levels (UIG-42)', async () => {
+    const code = `import { cn } from '@estiva-app/ui'\nconst look = ['text-sm', open ? 'rounded-[3px]' : '', \`h-[240px] \${size}\`].filter(Boolean).join(' ')\n${component("<div className={cn(look, ['bg-gray-100'].join(' '))}>x</div>")}`
+    const messages = (await lintWith([tokenLint(), tokenValues()], code, 'src/Probe.tsx')).filter((m) => m.ruleId?.startsWith('token-joined/'))
+    expect(messages.map((m) => [m.ruleId, m.severity, m.line])).toEqual([
+      ['token-joined/classes', 2, 2],
+      ['token-joined/values', 2, 2],
+      ['token-joined/spacing', 1, 2],
+      ['token-joined/classes', 2, 4],
+    ])
+    expect(messages[0].message).toContain("Tailwind's type ramp")
+    expect(messages[1].message).toContain('rounded-[3px] is a corner written by hand')
+  })
+
+  it('leave a sentence joined with spaces, and a list joined with anything else', async () => {
+    // Peek's prompt hint (src/lib/promptApi.ts) is built this way.
+    const code = "export const hint = ['Reply with only a JSON object, no prose and no code fence.', `It must have exactly these keys: ${keys}.`].join(' ')\nexport const keys = ['text-sm', 'bg-gray-100'].join(', ')\n"
+    expect(await lintWith([tokenLint(), tokenValues()], code, 'src/lib/probe.ts')).toEqual([])
+  })
+
   it('leave a test file to its test', async () => {
     const messages = await lintWith([tokenLint(), tokenValues()], component('<div style={{ color: "red" }}>x</div>'), 'src/Probe.test.tsx')
     expect(messages.filter((m) => m.severity === 2)).toEqual([])

package/src/gates/token-joined.ts

@@ -0,0 +1,94 @@
+/**
+ * The token contract, read inside a class list joined by hand (UIG-42):
+ *
+ *   <div className={['text-sm', open && 'bg-gray-100'].join(' ')} />
+ *
+ * The Tailwind plugin stops at a function call, so it never reads the list in
+ * front of `.join(' ')`, and no setting can make it: a call it is told about is
+ * read at its arguments, which here is the `' '`. This rule reads the list and
+ * tests each class against the same patterns, with the same messages, as the
+ * rule it stands in for. It registers once per rule it mirrors, so an error
+ * stays an error and a warning a warning (`token-joined/classes`, `/values`,
+ * `/spacing`).
+ *
+ * A list joined with anything but one space is not a class list, and a
+ * sentence built this way passes unless one of its words is itself such a
+ * class, as in `'set text-sm here'`. Only strings written in the list are
+ * read, directly or behind `cond && …`, `a ? … : …` and a template's fixed
+ * parts; a list worked out while it runs cannot be read.
+ */
+import type { ESLint, Rule } from 'eslint'
+
+/** One pattern and its message, the shape `no-restricted-classes` takes. `$0` is the class. */
+export interface Restriction {
+  pattern: string
+  message: string
+}
+
+interface Node {
+  type: string
+  [key: string]: unknown
+}
+
+const isOneSpace = (node: Node | undefined) => node?.type === 'Literal' && node.value === ' '
+
+/** `.join` on a list, through any `.filter(…)` between them. */
+function joinedList(call: Node): Node | undefined {
+  const callee = call.callee as Node
+  if (callee.type !== 'MemberExpression' || callee.computed || (callee.property as Node).name !== 'join') return undefined
+  if ((call.arguments as Node[]).length !== 1 || !isOneSpace((call.arguments as Node[])[0])) return undefined
+  let list = callee.object as Node
+  while (list.type === 'CallExpression' && (list.callee as Node).type === 'MemberExpression' && ((list.callee as Node).property as Node).name === 'filter') {
+    list = (list.callee as Node).object as Node
+  }
+  return list.type === 'ArrayExpression' ? list : undefined
+}
+
+/** The strings written in one item of the list, each with the node an escape sits above. */
+function stringsIn(node: Node | null, out: { node: Node; text: string }[] = []) {
+  if (!node) return out
+  if (node.type === 'Literal' && typeof node.value === 'string') out.push({ node, text: node.value })
+  else if (node.type === 'TemplateLiteral') for (const quasi of node.quasis as Node[]) out.push({ node: quasi, text: String((quasi.value as { cooked: string }).cooked ?? '') })
+  else if (node.type === 'ConditionalExpression') stringsIn(node.consequent as Node, out), stringsIn(node.alternate as Node, out)
+  else if (node.type === 'LogicalExpression') {
+    if (node.operator !== '&&') stringsIn(node.left as Node, out)
+    stringsIn(node.right as Node, out)
+  } else if (node.type === 'TSAsExpression' || node.type === 'TSSatisfiesExpression') stringsIn(node.expression as Node, out)
+  return out
+}
+
+const joinedListRule: Rule.RuleModule = {
+  meta: {
+    type: 'problem',
+    docs: { description: 'The token contract, inside a class list joined with .join(" ")' },
+    schema: [
+      {
+        type: 'object',
+        properties: { restrict: { type: 'array', items: { type: 'object', properties: { pattern: { type: 'string' }, message: { type: 'string' } }, required: ['pattern', 'message'] } } },
+        required: ['restrict'],
+        additionalProperties: false,
+      },
+    ],
+  },
+  create(context) {
+    const { restrict } = context.options[0] as { restrict: Restriction[] }
+    const rules = restrict.map(({ pattern, message }) => ({ pattern: new RegExp(pattern), message }))
+    return {
+      CallExpression(ruleNode: Rule.Node) {
+        const list = joinedList(ruleNode as unknown as Node)
+        if (!list) return
+        for (const item of list.elements as (Node | null)[]) {
+          for (const { node, text } of stringsIn(item)) {
+            for (const name of text.split(/\s+/)) {
+              const rule = name && rules.find(({ pattern }) => pattern.test(name))
+              if (rule) context.report({ node: node as unknown as Rule.Node, message: rule.message.replaceAll('$0', name) })
+            }
+          }
+        }
+      },
+    }
+  },
+}
+
+/** The plugin, as the token lint registers it: one rule, under three names. */
+export const tokenJoinedPlugin: ESLint.Plugin = { rules: { classes: joinedListRule, values: joinedListRule, spacing: joinedListRule } }