basalt-ui 1.30.2 → 1.32.0

package/configs/oxlint-plugin.test.ts

@@ -19,15 +19,18 @@ import basaltPlugin, {
   KNOWN_RULE_IDS,
   PLUGIN_RULE_ADVISORY,
   PLUGIN_RULE_GRACE,
+  RAW_BREAKPOINT_RECIPE,
   RETIRED_RULE_IDS,
 } from './oxlint-plugin.js'
 import { CTL_THEME } from '../src/theme/ctl-theme'
 import {
+  GRACE_PERIOD_KINDS,
   GUARD_RULES,
   PLUGIN_RULE_IDS,
   WAIVER_ID_ALIASES as GUARD_WAIVER_ID_ALIASES,
 } from '../src/guard/index.ts'
 import { PLUGIN_RULE_ID_LIST, SURFACES } from '../src/surfaces.ts'
+import { CONTAINER_CLASSES } from '../src/tokens/size-classes.ts'
 
 const PLUGIN_PATH = resolve(import.meta.dirname, 'oxlint-plugin.js')
 const OXLINT_BIN = resolve(import.meta.dirname, '..', '..', '..', 'node_modules', '.bin', 'oxlint')
@@ -70,6 +73,7 @@ beforeEach(() => {
         'basalt/agent-resume-guard': 'error',
         'basalt/agent-no-raw-usechat': 'error',
         'basalt/ai-sdk-major': 'error',
+        'basalt/raw-breakpoint': 'error',
       },
     }),
   )
@@ -1331,6 +1335,42 @@ describe('assertGraceLedger', () => {
   })
 })
 
+// ── twin lanes: one law, two lanes, one promotion ─────────────────────────────
+// A guard kind and a plugin rule that enforce ONE law in two lanes (CSS/text vs. JSX AST) must
+// promote together — a consumer failing one spelling and warned on the other is the confusion the
+// pairing exists to prevent. `raw-media-query` split from `basalt/raw-breakpoint` exactly that way
+// (1.32.0 vs 1.33.0). Twins are DERIVED, not hand-listed, from the two places they are declared: a
+// `WAIVER_ID_ALIASES` pair, and a guard entry whose `why` calls itself the twin of `basalt/<id>`.
+
+const pluginGrace = PLUGIN_RULE_GRACE as Record<string, GraceEntry>
+const guardGrace = GRACE_PERIOD_KINDS as Record<string, GraceEntry>
+
+function twinLanes(): Array<[kind: string, rule: string]> {
+  const pairs = new Map<string, string>()
+  for (const [kind, aliases] of Object.entries(WAIVER_ID_ALIASES)) {
+    for (const rule of aliases) if (kind in guardGrace || rule in pluginGrace) pairs.set(kind, rule)
+  }
+  for (const [kind, entry] of Object.entries(guardGrace)) {
+    const match = /twin of the oxlint plugin's `basalt\/([a-z-]+)`/.exec(entry.why)
+    if (match?.[1] !== undefined) pairs.set(kind, match[1])
+  }
+  return [...pairs].filter(([kind]) => kind in guardGrace)
+}
+
+describe('twin lanes share one promotion', () => {
+  it('derives the raw-media-query ↔ raw-breakpoint pair (the derivation is not silently empty)', () => {
+    expect(twinLanes()).toContainEqual(['raw-media-query', 'raw-breakpoint'])
+  })
+
+  it.each(twinLanes())('%s and basalt/%s are both in grace with the same promote', (kind, rule) => {
+    expect([kind, rule, guardGrace[kind]?.promote]).toEqual([
+      kind,
+      rule,
+      pluginGrace[rule]?.promote,
+    ])
+  })
+})
+
 describe('PLUGIN_RULE_GRACE', () => {
   const shipped = JSON.parse(readFileSync(resolve(import.meta.dirname, 'oxlint.json'), 'utf8')) as {
     rules: Record<string, unknown>
@@ -2735,10 +2775,11 @@ describe('basalt/responsive-twin', () => {
   })
 
   it('does NOT flag two halves on DIFFERENT breakpoints', () => {
-    const { code, rules } = run(
+    // `code` is not asserted here: raw visibleFrom/hiddenFrom outside a shell home is its own,
+    // unrelated finding (basalt/raw-breakpoint) — this test is only about responsive-twin's silence.
+    const { rules } = run(
       `export const C = () => (\n  <div>\n    <SegmentedControl visibleFrom="sm" data={[]} />\n    <SegmentedControl hiddenFrom="md" data={[]} />\n  </div>\n)\n`,
     )
-    expect(code).toBe(0)
     expect(rules).not.toContain('responsive-twin')
   })
 
@@ -3400,6 +3441,290 @@ describe('basalt/forms-field-key', () => {
   })
 })
 
+// ── raw-breakpoint ────────────────────────────────────────────────────────────
+
+describe('basalt/raw-breakpoint', () => {
+  it('flags a responsive-object prop on an imported Mantine component', () => {
+    const { rules } = run(
+      `import { SimpleGrid } from '@mantine/core'\n` +
+        `export const C = () => <SimpleGrid cols={{ base: 1, sm: 2 }} />\n`,
+    )
+    expect(rules).toContain('raw-breakpoint')
+  })
+
+  it('flags a responsive object nested one level down (Mantine AppShell idiom)', () => {
+    const { rules } = run(
+      `import { AppShell } from '@mantine/core'\n` +
+        `export const C = () => <AppShell footer={{ height: { base: 60, sm: 0 } }}>hi</AppShell>\n`,
+    )
+    expect(rules).toContain('raw-breakpoint')
+  })
+
+  it('flags a responsive object behind a same-file const binding', () => {
+    const { rules } = run(
+      `import { SimpleGrid } from '@mantine/core'\n` +
+        `const responsiveCols = { base: 1, sm: 2 }\n` +
+        `export const C = () => <SimpleGrid cols={responsiveCols} />\n`,
+    )
+    expect(rules).toContain('raw-breakpoint')
+  })
+
+  // The nested-property half: a property VALUE that is itself an Identifier must resolve through
+  // the same-file const map, exactly as the attribute's own top-level value already does.
+  it('flags a responsive object behind a const used as a nested property value', () => {
+    const { rules } = run(
+      `import { AppShell } from '@mantine/core'\n` +
+        `const h = { base: 60, sm: 0 }\n` +
+        `export const C = () => <AppShell footer={{ height: h }}>hi</AppShell>\n`,
+    )
+    expect(rules).toContain('raw-breakpoint')
+  })
+
+  // A name declared twice in the file has no single binding without a scope manager, so it is
+  // dropped rather than resolved last-declaration-wins — the outer (non-responsive) `cols` the JSX
+  // actually references must not be flagged via the inner function's responsive one.
+  it('does NOT flag a name redeclared in the file — an ambiguous binding is skipped, not guessed', () => {
+    const { rules } = run(
+      `import { SimpleGrid } from '@mantine/core'\n` +
+        `const cols = { fixed: 2 }\n` +
+        `function Other() {\n  const cols = { base: 1, sm: 2 }\n  return null\n}\n` +
+        `export const C = () => <SimpleGrid cols={cols} />\n`,
+    )
+    expect(rules).not.toContain('raw-breakpoint')
+  })
+
+  it('does NOT flag a fixed cols on the same component', () => {
+    const { rules } = run(
+      `import { SimpleGrid } from '@mantine/core'\n` +
+        `export const C = () => <SimpleGrid cols={2} />\n`,
+    )
+    expect(rules).not.toContain('raw-breakpoint')
+  })
+
+  it('does NOT flag an object prop on a component never imported from @mantine/*', () => {
+    const { rules } = run(`export const C = () => <WidgetGrid cols={{ base: 1, sm: 2 }} />\n`)
+    expect(rules).not.toContain('raw-breakpoint')
+  })
+
+  // The recipe's px keys are CONTAINER_CLASSES written out by hand in two places — the plugin
+  // (plain JS, cannot import TS source) and MIGRATING's rule entry. Retuning a class must fail here.
+  describe('recipe px literals ↔ CONTAINER_CLASSES', () => {
+    const boundaries = new Set<number>(Object.values(CONTAINER_CLASSES).filter((px) => px > 0))
+    const pxLiterals = (text: string) => [...text.matchAll(/(\d+)px/g)].map((m) => Number(m[1]))
+
+    it('every px key in the rule messages is a CONTAINER_CLASSES boundary', () => {
+      const found = pxLiterals(RAW_BREAKPOINT_RECIPE as string)
+      expect(found.length).toBeGreaterThan(0)
+      for (const px of found) expect([px, boundaries.has(px)]).toEqual([px, true])
+    })
+
+    it("every px value and the class table in MIGRATING's raw-breakpoint entry match", () => {
+      const migrating = readFileSync(resolve(import.meta.dir, '../MIGRATING.md'), 'utf8')
+      const start = migrating.indexOf('### `basalt/raw-breakpoint`')
+      expect(start).toBeGreaterThan(-1)
+      const end = migrating.indexOf('\n### ', start + 1)
+      const section = migrating.slice(start, end === -1 ? undefined : end)
+      for (const px of pxLiterals(section)) expect([px, boundaries.has(px)]).toEqual([px, true])
+      const { compact, regular, wide } = CONTAINER_CLASSES
+      expect(section).toContain(`compact ${compact} · regular ${regular} · wide ${wide}`)
+    })
+  })
+
+  // The sanctioned answer, read from @mantine/core 9.3 source: SimpleGrid type="container" writes
+  // each key verbatim as `@container simple-grid (min-width: <key>)`, Grid type="container" only
+  // goes container WITH a `breakpoints` map. Exempt exactly where Mantine resolves the object.
+  describe('Mantine type="container" grids', () => {
+    const grid = (jsx: string) =>
+      run(`import { Grid, SimpleGrid } from '@mantine/core'\nexport const C = () => ${jsx}\n`)
+    const CONTAINER_MESSAGE = /Theme breakpoint name under type="container"/
+
+    it('does NOT flag a px-keyed container SimpleGrid (the recipe)', () => {
+      expect(
+        grid(`<SimpleGrid type="container" cols={{ base: 1, '480px': 2, '800px': 3 }} />`).rules,
+      ).not.toContain('raw-breakpoint')
+    })
+
+    it('does NOT flag a lone `base` under type="container"', () => {
+      expect(grid(`<SimpleGrid type="container" cols={{ base: 2 }} />`).rules).not.toContain(
+        'raw-breakpoint',
+      )
+    })
+
+    it('flags a theme-named key on a container SimpleGrid — Mantine emits a dead (min-width: sm)', () => {
+      const { rules, output } = grid(`<SimpleGrid type="container" cols={{ base: 1, sm: 2 }} />`)
+      expect(rules).toContain('raw-breakpoint')
+      expect(CONTAINER_MESSAGE.test(output)).toBe(true)
+    })
+
+    it('still flags type="media" (and a dynamic type) with the viewport message', () => {
+      for (const type of [`"media"`, `{kind}`]) {
+        const { rules, output } = grid(`<SimpleGrid type=${type} cols={{ base: 1, sm: 2 }} />`)
+        expect(rules).toContain('raw-breakpoint')
+        expect(CONTAINER_MESSAGE.test(output)).toBe(false)
+      }
+    })
+
+    it('does NOT flag Grid.Col spans under a container Grid with a breakpoints map', () => {
+      const src =
+        `<Grid type="container" breakpoints={{ xs: '240px', sm: '480px' }}>\n` +
+        `  {items.map((i) => <Grid.Col key={i} span={{ base: 12, sm: 6 }}>x</Grid.Col>)}\n` +
+        `</Grid>`
+      expect(grid(src).rules).not.toContain('raw-breakpoint')
+    })
+
+    it('flags Grid.Col spans under a container Grid with NO breakpoints — Mantine falls back to media', () => {
+      const { rules, output } = grid(
+        `<Grid type="container"><Grid.Col span={{ base: 12, sm: 6 }}>x</Grid.Col></Grid>`,
+      )
+      expect(rules).toContain('raw-breakpoint')
+      expect(CONTAINER_MESSAGE.test(output)).toBe(true)
+    })
+
+    it('reports a const-extracted theme-keyed object on a container SimpleGrid — still a dead query', () => {
+      const { rules, output } = run(
+        `import { SimpleGrid } from '@mantine/core'\n` +
+          `const cols = { base: 1, sm: 2 }\n` +
+          `export const C = () => <SimpleGrid type="container" cols={cols} />\n`,
+      )
+      expect(rules).toContain('raw-breakpoint')
+      expect(CONTAINER_MESSAGE.test(output)).toBe(true)
+    })
+
+    // Grid goes container only on a truthy map, and an empty one emits no query — so the exemption
+    // needs a map that statically resolves to a non-empty object, not the attribute's presence.
+    it.each([
+      ['undefined', `breakpoints={undefined}`, ''],
+      ['an empty object', `breakpoints={{}}`, ''],
+      ['an unresolvable identifier', `breakpoints={imported}`, `import { imported } from './bp'\n`],
+    ])('flags Grid.Col spans under a container Grid whose breakpoints is %s', (_, bp, extra) => {
+      const { rules, output } = run(
+        `import { Grid } from '@mantine/core'\n${extra}` +
+          `export const C = () => <Grid type="container" ${bp}><Grid.Col span={{ base: 12, sm: 6 }}>x</Grid.Col></Grid>\n`,
+      )
+      expect(rules).toContain('raw-breakpoint')
+      expect(CONTAINER_MESSAGE.test(output)).toBe(true)
+    })
+
+    it('does NOT flag Grid.Col spans under a container Grid whose breakpoints is a same-file const', () => {
+      const { rules } = run(
+        `import { Grid } from '@mantine/core'\n` +
+          `const bp = { xs: '240px', sm: '480px', md: '800px', lg: '800px', xl: '800px' }\n` +
+          `export const C = () => <Grid type="container" breakpoints={bp}><Grid.Col span={{ base: 12, sm: 6 }}>x</Grid.Col></Grid>\n`,
+      )
+      expect(rules).not.toContain('raw-breakpoint')
+    })
+
+    // Only the grid-keyed props route through the container queries; Box style props on the same
+    // element still compile to viewport @media, so they keep the ordinary viewport message.
+    it.each([
+      [
+        'SimpleGrid p',
+        `<SimpleGrid type="container" cols={{ base: 1, '480px': 2 }} p={{ base: 'xs', lg: 'md' }} />`,
+      ],
+      [
+        'Grid mt',
+        `<Grid type="container" breakpoints={{ xs: '240px', sm: '480px', md: '800px', lg: '800px', xl: '800px' }} mt={{ base: 0, sm: 'md' }}>x</Grid>`,
+      ],
+      [
+        'Grid.Col mih',
+        `<Grid type="container" breakpoints={{ xs: '240px', sm: '480px', md: '800px', lg: '800px', xl: '800px' }}><Grid.Col span={6} mih={{ base: 80, lg: 120 }}>x</Grid.Col></Grid>`,
+      ],
+    ])('flags a Box style prop on a container grid as viewport (%s)', (_, jsx) => {
+      const { rules, output } = grid(jsx)
+      expect(rules).toContain('raw-breakpoint')
+      expect(CONTAINER_MESSAGE.test(output)).toBe(false)
+    })
+
+    it('does NOT flag container-routed spacing props on a container grid', () => {
+      const src =
+        `<Grid type="container" breakpoints={{ xs: '240px', sm: '480px', md: '800px', lg: '800px', xl: '800px' }} gap={{ base: 'xs', sm: 'md' }}>` +
+        `<Grid.Col span={{ base: 12, sm: 6 }} order={{ base: 2, sm: 1 }}>x</Grid.Col></Grid>`
+      expect(grid(src).rules).not.toContain('raw-breakpoint')
+    })
+
+    it('still flags Grid.Col spans under an ordinary Grid', () => {
+      expect(
+        grid(`<Grid><Grid.Col span={{ base: 12, sm: 6 }}>x</Grid.Col></Grid>`).rules,
+      ).toContain('raw-breakpoint')
+    })
+  })
+
+  it('flags visibleFrom/hiddenFrom outside a shell home', () => {
+    const { rules } = run(
+      `import { Box } from '@mantine/core'\n` +
+        `export const C = () => <Box visibleFrom="sm">desktop only</Box>\n`,
+    )
+    expect(rules).toContain('raw-breakpoint')
+  })
+
+  it('does NOT flag visibleFrom/hiddenFrom inside a file that DEFINES BasaltShell', () => {
+    const { rules } = run(
+      `import { Box } from '@mantine/core'\n` +
+        `export function BasaltShell() {\n  return <Box visibleFrom="sm">desktop only</Box>\n}\n`,
+    )
+    expect(rules).not.toContain('raw-breakpoint')
+  })
+
+  // The exemption is uniform across all four shapes: a file that IS the shell may also carry a
+  // responsive-object prop, not only visibleFrom/hiddenFrom.
+  it('does NOT flag a responsive-object prop inside a file that DEFINES BasaltShell', () => {
+    const { rules } = run(
+      `import { SimpleGrid } from '@mantine/core'\n` +
+        `export function BasaltShell() {\n  return null\n}\n` +
+        `export const C = () => <SimpleGrid cols={{ base: 1, sm: 2 }} />\n`,
+    )
+    expect(rules).not.toContain('raw-breakpoint')
+  })
+
+  it('does NOT flag visibleFrom/hiddenFrom inside a file that DEFINES a C9 control (ViewTabs) and imports no basalt-ui', () => {
+    const { rules } = run(
+      `import { Box } from '@mantine/core'\n` +
+        `export function ViewTabs() {\n  return <Box visibleFrom="sm">desktop only</Box>\n}\n`,
+    )
+    expect(rules).not.toContain('raw-breakpoint')
+  })
+
+  it('flags an import of useMediaQuery/useMatches/useViewportSize from @mantine/*', () => {
+    expect(run(`import { useMediaQuery } from '@mantine/hooks'\n`).rules).toContain(
+      'raw-breakpoint',
+    )
+    expect(run(`import { useMatches } from '@mantine/core'\n`).rules).toContain('raw-breakpoint')
+    expect(run(`import { useViewportSize } from '@mantine/hooks'\n`).rules).toContain(
+      'raw-breakpoint',
+    )
+  })
+
+  it('does NOT flag useMatches imported from a non-Mantine router (name collision)', () => {
+    // @tanstack/react-router (and react-router) export their own unrelated `useMatches` —
+    // basalt's own `src/router-tanstack/index.ts` imports it; scoped to `@mantine/*` sources only.
+    expect(run(`import { useMatches } from '@tanstack/react-router'\n`).rules).not.toContain(
+      'raw-breakpoint',
+    )
+    expect(run(`import { useViewportSize } from 'some-lib'\n`).rules).not.toContain(
+      'raw-breakpoint',
+    )
+  })
+
+  it('flags window.matchMedia and window.innerWidth', () => {
+    expect(run(`const mq = window.matchMedia('(max-width: 600px)')\n`).rules).toContain(
+      'raw-breakpoint',
+    )
+    expect(run(`const w = window.innerWidth\n`).rules).toContain('raw-breakpoint')
+  })
+
+  it('flags a bare matchMedia() call', () => {
+    expect(run(`const mq = matchMedia('(max-width: 600px)')\n`).rules).toContain('raw-breakpoint')
+  })
+
+  it('honors a scoped theme-allow on the responsive-object prop', () => {
+    const { rules } = run(
+      `import { SimpleGrid } from '@mantine/core'\n` +
+        `export const C = () => (\n  // theme-allow raw-breakpoint — migrating in a follow-up\n  <SimpleGrid cols={{ base: 1, sm: 2 }} />\n)\n`,
+    )
+    expect(rules).not.toContain('raw-breakpoint')
+  })
+})
+
 // ── the deprecation ledger (B4) ──────────────────────────────────────────────
 
 describe('DEPRECATED_EXPORTS', () => {

package/configs/oxlint.json

@@ -49,7 +49,8 @@
     "basalt/visx-tooltip": "error",
     "basalt/agent-resume-guard": "error",
     "basalt/agent-no-raw-usechat": "error",
-    "basalt/ai-sdk-major": "error"
+    "basalt/ai-sdk-major": "error",
+    "basalt/raw-breakpoint": "warn"
   },
   "overrides": [
     {

package/dist/agent-chat/composer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composer.d.ts","sourceRoot":"","sources":["../../src/agent-chat/composer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"composer.d.ts","sourceRoot":"","sources":["../../src/agent-chat/composer.tsx"],"names":[],"mappings":"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"}

package/dist/agent-chat/composer.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ActionIcon, Group, Kbd, Stack, Text, Textarea } from "@mantine/core";
+import { ActionIcon, Box, Group, Kbd, Stack, Text, Textarea } from "@mantine/core";
 import { useImperativeHandle, useLayoutEffect, useRef, useSyncExternalStore } from "react";
 import { cx } from "../common/props.js";
 import { readPersistedValue } from "../state.js";
 import { VX } from "../tokens/index.js";
+import { useKeyboardInsetRef } from "./use-keyboard-inset.js";
 function SendGlyph() {
   return /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx(
     "path",
@@ -90,6 +91,7 @@ const noopSubscribe = (_cb) => () => {
 };
 const emptyDraft = () => "";
 const NO_ATTACHMENTS = [];
+const ROOT_GAP = 6;
 function liveSelection(el) {
   if (document.activeElement !== el) return null;
   const { selectionStart, selectionEnd } = el;
@@ -170,6 +172,7 @@ function Composer({
     textareaRef.current?.focus();
   };
   useImperativeHandle(ref, () => ({ insertText, setValue, focus: focusTextarea }));
+  const keyboardInsetRef = useKeyboardInsetRef();
   const submit = () => {
     if (inputDisabled || !hasPayload) return;
     const submittedText = trimmed;
@@ -221,48 +224,43 @@ function Composer({
   if (onPaste !== void 0) textareaProps.onPaste = onPaste;
   if (classNames?.input !== void 0) textareaProps.className = cx(classNames.input);
   const showActions = showStop || showSend;
-  return /* @__PURE__ */ jsxs(
-    Stack,
-    {
-      gap: 6,
-      className: cx(classNames?.root, className),
-      ...style !== void 0 && { style },
-      children: [
-        /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "flex-end", wrap: "nowrap", children: [
-          leftSection,
-          /* @__PURE__ */ jsx(Textarea, { ...textareaProps, ref: textareaRef }),
-          rightSection,
-          showActions && /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", className: cx(classNames?.actions), children: [
-            showStop ? /* @__PURE__ */ jsx(
-              ActionIcon,
-              {
-                size: 42,
-                radius: "md",
-                variant: "filled",
-                color: "red",
-                onClick: onStop,
-                "aria-label": "Stop generating",
-                children: /* @__PURE__ */ jsx(StopGlyph, {})
-              }
-            ) : null,
-            showSend ? /* @__PURE__ */ jsx(
-              ActionIcon,
-              {
-                size: 42,
-                radius: "md",
-                variant: "filled",
-                onClick: submit,
-                disabled: inputDisabled || !hasPayload,
-                "aria-label": "Send message",
-                children: /* @__PURE__ */ jsx(SendGlyph, {})
-              }
-            ) : null
-          ] })
-        ] }),
-        hint === void 0 ? /* @__PURE__ */ jsx(DefaultHint, {}) : hint
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Box, { ref: keyboardInsetRef, className: cx(classNames?.root, className), style, children: [
+    /* @__PURE__ */ jsxs(Stack, { gap: ROOT_GAP, children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "flex-end", wrap: "nowrap", children: [
+        leftSection,
+        /* @__PURE__ */ jsx(Textarea, { ...textareaProps, ref: textareaRef }),
+        rightSection,
+        showActions && /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", className: cx(classNames?.actions), children: [
+          showStop ? /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              size: 42,
+              radius: "md",
+              variant: "filled",
+              color: "red",
+              onClick: onStop,
+              "aria-label": "Stop generating",
+              children: /* @__PURE__ */ jsx(StopGlyph, {})
+            }
+          ) : null,
+          showSend ? /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              size: 42,
+              radius: "md",
+              variant: "filled",
+              onClick: submit,
+              disabled: inputDisabled || !hasPayload,
+              "aria-label": "Send message",
+              children: /* @__PURE__ */ jsx(SendGlyph, {})
+            }
+          ) : null
+        ] })
+      ] }),
+      hint === void 0 ? /* @__PURE__ */ jsx(DefaultHint, {}) : hint
+    ] }),
+    /* @__PURE__ */ jsx(Box, { "aria-hidden": true, style: { height: "var(--vx-keyboard-inset, 0px)" } })
+  ] });
 }
 export {
   Composer

package/dist/agent-chat/thread-workspace.d.ts

@@ -3,7 +3,7 @@ import type { AgentPart, AgentTransport, OutcomeResolver, ThreadsStore } from '.
 import type { BasaltProps, SlotStylesProps } from '../common/props.js';
 /** The four boxes `ThreadWorkspace` paints: `root` is the outermost pane split, `feed` is the
  * thread-list pane, `composer` is the new-thread composer pinned under the feed, `detail` is the
- * right-hand (or, below 768px, full-screen) open-thread pane. */
+ * right-hand (or, in the `compact` size class, full-screen) open-thread pane. */
 export type ThreadWorkspaceSlot = 'root' | 'feed' | 'composer' | 'detail';
 export type ThreadWorkspaceProps = BasaltProps & SlotStylesProps<ThreadWorkspaceSlot> & {
     /**
@@ -35,7 +35,7 @@ export type ThreadWorkspaceProps = BasaltProps & SlotStylesProps<ThreadWorkspace
 /**
  * A two-pane master-detail thread workspace: a scrollable feed of threads with an anchored
  * new-thread composer, and a detail panel for the open thread's live transcript. Collapses to a
- * single pane below 768px.
+ * single pane in the `compact` size class (< 840px).
  *
  * @example
  * <ThreadWorkspace useThreads={useThreads} transport={transport} resolveOutcome={heuristicOutcome} />

package/dist/agent-chat/thread-workspace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thread-workspace.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-workspace.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAanE;;iEAEiE;AACjE,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAA;AAEzE,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAC5C,eAAe,CAAC,mBAAmB,CAAC,GAAG;IACrC;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,MAAM,YAAY,CAAA;IACvC,mEAAmE;IACnE,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;IACrD,mEAAmE;IACnE,QAAQ,CAAC,cAAc,EAAE,eAAe,CAAC,SAAS,CAAC,CAAA;IACnD,qEAAqE;IACrE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAA;IACtC;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;IAC/B;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;CAChC,CAAA;AA4DH;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,UAAU,GACX,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAsHpC"}
+{"version":3,"file":"thread-workspace.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-workspace.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAcnE;;iFAEiF;AACjF,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAA;AAEzE,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAC5C,eAAe,CAAC,mBAAmB,CAAC,GAAG;IACrC;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,MAAM,YAAY,CAAA;IACvC,mEAAmE;IACnE,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;IACrD,mEAAmE;IACnE,QAAQ,CAAC,cAAc,EAAE,eAAe,CAAC,SAAS,CAAC,CAAA;IACnD,qEAAqE;IACrE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAA;IACtC;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;IAC/B;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;CAChC,CAAA;AA4DH;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,UAAU,GACX,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAmHpC"}

package/dist/agent-chat/thread-workspace.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Divider, Flex, Skeleton, Stack, Text, useMantineTheme } from "@mantine/core";
-import { useMediaQuery } from "@mantine/hooks";
+import { Box, Divider, Flex, Skeleton, Stack, Text } from "@mantine/core";
 import { useAgentThreadRuns } from "../agent/index.js";
 import { cx } from "../common/props.js";
 import { assertRequiredProps } from "../common/validate.js";
+import { useSizeClass } from "../shell/use-size-class.js";
 import { VX } from "../tokens/index.js";
 import { Composer } from "./composer.js";
 import { ThreadDetailPanel } from "./thread-detail-panel.js";
@@ -54,8 +54,7 @@ function ThreadWorkspace({
   assertRequiredProps("ThreadWorkspace", { useThreads }, ["useThreads"]);
   const store = useThreads();
   const runs = useAgentThreadRuns({ transport, store, resolveOutcome });
-  const theme = useMantineTheme();
-  const narrow = useMediaQuery(`(max-width: calc(${theme.breakpoints.sm} - 0.00625em))`);
+  const narrow = useSizeClass() === "compact";
   const threads = store.threads;
   const activeThread = threads.find((thread) => thread.id === store.activeId) ?? null;
   const activeRun = store.activeId !== null ? runs.runs.get(store.activeId) : void 0;

package/dist/agent-chat/use-keyboard-inset.d.ts

@@ -0,0 +1,2 @@
+export declare function useKeyboardInsetRef(): (el: HTMLElement | null) => void;
+//# sourceMappingURL=use-keyboard-inset.d.ts.map

package/dist/agent-chat/use-keyboard-inset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-keyboard-inset.d.ts","sourceRoot":"","sources":["../../src/agent-chat/use-keyboard-inset.ts"],"names":[],"mappings":"AAiCA,wBAAgB,mBAAmB,IAAI,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAkCtE"}

package/dist/agent-chat/use-keyboard-inset.js

@@ -0,0 +1,34 @@
+import { useCallback, useState } from "react";
+import { useIsomorphicLayoutEffect } from "../common/isomorphic-layout-effect.js";
+const KEYBOARD_INSET_VAR = "--vx-keyboard-inset";
+function useKeyboardInsetRef() {
+  const [node, setNode] = useState(null);
+  const attach = useCallback((el) => {
+    setNode(el);
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (node === null) return;
+    if (typeof window === "undefined") return;
+    const viewport = window.visualViewport;
+    if (viewport === null || viewport === void 0) return;
+    const publish = () => {
+      const inset = Math.max(
+        0,
+        document.documentElement.clientHeight - viewport.height - viewport.offsetTop
+      );
+      node.style.setProperty(KEYBOARD_INSET_VAR, `${inset}px`);
+    };
+    publish();
+    viewport.addEventListener("resize", publish);
+    viewport.addEventListener("scroll", publish);
+    return () => {
+      viewport.removeEventListener("resize", publish);
+      viewport.removeEventListener("scroll", publish);
+      node.style.removeProperty(KEYBOARD_INSET_VAR);
+    };
+  }, [node]);
+  return attach;
+}
+export {
+  useKeyboardInsetRef
+};

package/dist/charts/cursor/touch-pin.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Outside-tap / Escape / scroll (optionally resize) dismissal for a pinned/open floating element.
+ * Capture-phase `pointerdown` so a descendant that stops propagation on its own handler can't leave
+ * the dismissal stuck.
+ */
+export declare function useDismissOnOutside({ enabled, isInside, onDismiss, dismissOnResize, scrollExemptInside, }: {
+    enabled: boolean;
+    /** A tap (or, with `scrollExemptInside`, a scroll) landing where this returns true doesn't
+     * dismiss. Omit to treat every tap as outside. */
+    isInside?: (target: Node) => boolean;
+    onDismiss: () => void;
+    /** Also dismiss on a window `resize` — `ChartLegend`'s disclosure needs this, the touch-pinned
+     * cursors don't (their host doesn't reflow independently of the chart it's pinned to). */
+    dismissOnResize?: boolean;
+    /** Exempts a scroll whose target is `isInside` — `ChartLegend`'s own scrollable panel needs this
+     * (`overflowY: auto`), the cursor hooks don't (a chart has no internal scroller to protect). */
+    scrollExemptInside?: boolean;
+}): void;
+export type TouchPin = {
+    /** `onPointerDown` for a coarse press: snapshots whatever is currently committed (via
+     * `getCommitted`) so a later `cancel` can restore exactly that, then tracks `pointerId`. */
+    begin: (pointerId: number) => void;
+    /** `onPointerUp` for the tracked pointer: the press is now committed — nothing left to revert. */
+    commit: (pointerId: number) => boolean;
+    /** `onPointerCancel`/`onPointerLeave` for the tracked pointer: the browser took the gesture (a
+     * scroll) before the press committed — restores the pre-press value via `setCommitted`, or
+     * leaves it clear when nothing was committed before. Returns whether this pointer was tracked. */
+    cancel: (pointerId: number) => boolean;
+    /** Hard reset — no restore, just drop any in-flight press bookkeeping (an explicit `clear()`, e.g.
+     * Escape or an outside tap, is about to overwrite the value directly anyway). */
+    reset: () => void;
+};
+/**
+ * Provisional-press state machine shared by `useChartCursor`/`useDiscreteCursor`: a coarse press
+ * shows a value immediately (PROVISIONAL, not yet committed) — `commit` on `pointerup` leaves it in
+ * place, `cancel` on `pointercancel`/`pointerleave` (a scroll winning the gesture) restores whatever
+ * was committed before this press started, rather than dropping it. This is what keeps a previously
+ * COMMITTED pin alive through a second tap that gets cancelled instead of completed.
+ */
+export declare function useTouchPin<V>({ getCommitted, setCommitted, }: {
+    /** Reads the value currently committed — snapshotted on `begin`, restored on `cancel`. */
+    getCommitted: () => V;
+    setCommitted: (value: V) => void;
+}): TouchPin;
+//# sourceMappingURL=touch-pin.d.ts.map