docs: name only the auto-imports and packages that exist

Two bits of documentation that told readers to write code which cannot run.

**AGENTS.md listed 13 auto-imports that are not auto-imported.** Of the 24
names it gave as available in a template with no import - `ref`, `computed`,
`reactive`, `watch`, `watchEffect`, `useColorMode`, `useLocalStorage`,
`useCounter`, `useIntersectionObserver`, `useScroll`, `useMouse`, `useParallax`
and `usePreferredReducedMotion` - none are in `browser-auto-imports.json` or in
the generated `browser-auto-imports.d.ts`. Both agree on 83 names and neither
contains them.

This is the first file an agent reads here, and `ref` is the one it reaches for
by habit. The file already carries a scar from this exact failure: it notes the
count said "200+ composables" for a long time, "which was not a stale count but
a wrong one". The count was then fixed and the names were not.

It now lists all 27 `use*` composables in full - a half-remembered name is the
whole problem - and says plainly which reactivity names are NOT available and
that stx's `state` / `derived` / `effect` are what a template actually uses.

**Eight component docs told readers to install a package that 404s.**
`npm install @stacksjs/popover` and seven like it; only `@stacksjs/stepper` of
the nine resolves. Those components ship in `@stacksjs/components`, which is
published and whose tarball carries `Dialog`, `Combobox`, `Dropdown` and the
rest. Checked every one against the registry rather than assuming.

`agents-md-auto-imports.test.ts` checks every name the file claims against the
manifest. It splits claims from the correction by POSITION, not by an exclusion
list: the first version excluded the not-auto-imported names by name, which made
it blind to exactly those - putting `useScroll` back in the positive list passed.
Verified the second version fails on that.

Author: chrisbbreuer

AGENTS.md

@@ -168,11 +168,20 @@ count: `storage/framework/browser-auto-imports.json` and the generated
 `storage/framework/types/browser-auto-imports.d.ts` agree on 83, and a name
 that is not in them needs an import however familiar it looks.
 
-- STX reactivity and the composables among them: `ref`, `computed`, `watch`, `reactive`,
-  `watchEffect`, `useFetch`, `useDark` / `useColorMode`, `useStorage`, `useLocalStorage`, `useToggle`,
-  `useCounter`, `useIntersectionObserver`, `useScroll`, `useMouse`, `useParallax`,
-  `usePreferredReducedMotion`, plus utilities (`debounce`, `throttle`, `sleep`, `clamp`), `useAuth`,
-  and the Stripe helpers (`loadCardElement`, `confirmPayment`, ...).
+- The 27 `use*` composables, in full, because a half-remembered name is the whole
+  problem: `useAbs`, `useAuth`, `useAverage`, `useCeil`, `useClamp`, `useDark`,
+  `useDateFormat`, `useFetch`, `useFloor`, `useForm`, `useGitStore`, `useMax`, `useMin`,
+  `useNow`, `useOnline`, `usePaymentStore`, `usePrecision`, `usePreferredDark`,
+  `useQueueStore`, `useRound`, `useScrollLock`, `useStorage`, `useSum`, `useTimeoutFn`,
+  `useToggle`, `useTrunc`, `useUserStore`.
+- Utilities (`debounce`, `throttle`, `clamp`, `delay`, `dateFormat`, `format`, ...) and the
+  Stripe helpers (`loadCardElement`, `confirmPayment`, `confirmCardPayment`, ...).
+- **NOT** `ref`, `computed`, `reactive`, `watch` or `watchEffect`. This list named all five
+  for a long time, along with `useColorMode`, `useLocalStorage`, `useCounter`,
+  `useIntersectionObserver`, `useScroll`, `useMouse`, `useParallax` and
+  `usePreferredReducedMotion` - 13 of the 24 names it gave. None of them are in either
+  manifest. Reactivity in a template comes from stx's own `state` / `derived` / `effect`
+  (see `stacks-stx`), and everything else here needs an import.
 - Your components under `resources/components/` (write `<Card />` directly, resolved by the stx
   plugin) and your functions under `resources/functions/` (e.g. `increment`, `toggleDark`).
 

docs/guide/components/combobox.md

@@ -24,23 +24,23 @@ A modern, accessible combobox component for STX applications.
 ::: code-group
 
 ```sh [npm]
-npm install @stacksjs/combobox
+npm install @stacksjs/components
 ```
 
 ```sh [bun]
-bun install @stacksjs/combobox
-# bun add @stacksjs/combobox
-# bun i @stacksjs/combobox
+bun install @stacksjs/components
+# bun add @stacksjs/components
+# bun i @stacksjs/components
 ```
 
 ```sh [pnpm]
-pnpm add @stacksjs/combobox
-# pnpm i @stacksjs/combobox
+pnpm add @stacksjs/components
+# pnpm i @stacksjs/components
 ```
 
 ```sh [yarn]
-yarn add @stacksjs/combobox
-# yarn i -d @stacksjs/combobox
+yarn add @stacksjs/components
+# yarn i -d @stacksjs/components
 ```
 
 :::
@@ -59,7 +59,7 @@ import {
   ComboboxButton,
   ComboboxOptions,
   ComboboxOption
-} from '@stacksjs/combobox'
+} from '@stacksjs/components'
 
 const selected = ref(null)
 const query = ref('')

docs/guide/components/dialog.md

@@ -24,23 +24,23 @@ A modern, accessible dialog component for STX applications.
 ::: code-group
 
 ```sh [npm]
-npm install @stacksjs/dialog
+npm install @stacksjs/components
 ```
 
 ```sh [bun]
-bun install @stacksjs/dialog
-# bun add @stacksjs/dialog
-# bun i @stacksjs/dialog
+bun install @stacksjs/components
+# bun add @stacksjs/components
+# bun i @stacksjs/components
 ```
 
 ```sh [pnpm]
-pnpm add @stacksjs/dialog
-# pnpm i @stacksjs/dialog
+pnpm add @stacksjs/components
+# pnpm i @stacksjs/components
 ```
 
 ```sh [yarn]
-yarn add @stacksjs/dialog
-# yarn i -d @stacksjs/dialog
+yarn add @stacksjs/components
+# yarn i -d @stacksjs/components
 ```
 
 :::
@@ -53,7 +53,7 @@ The dialog component is composed of two main components that work together to cr
 ```html
 <script>
 import { ref } from '@stacksjs/stx'
-import { Dialog, DialogPanel } from '@stacksjs/dialog'
+import { Dialog, DialogPanel } from '@stacksjs/components'
 
 const visible = ref(false)
 
@@ -161,7 +161,7 @@ The dialog component follows WAI-ARIA guidelines and includes the following feat
 The dialog component includes full TypeScript support:
 
 ```ts
-import type { DialogProps } from '@stacksjs/dialog'
+import type { DialogProps } from '@stacksjs/components'
 import { ref } from '@stacksjs/stx'
 
 const visible = ref<boolean>(false)

docs/guide/components/dropdown.md

@@ -25,23 +25,23 @@ A modern, accessible dropdown component for STX applications.
 ::: code-group
 
 ```sh [npm]
-npm install @stacksjs/dropdown
+npm install @stacksjs/components
 ```
 
 ```sh [bun]
-bun install @stacksjs/dropdown
-# bun add @stacksjs/dropdown
-# bun i @stacksjs/dropdown
+bun install @stacksjs/components
+# bun add @stacksjs/components
+# bun i @stacksjs/components
 ```
 
 ```sh [pnpm]
-pnpm add @stacksjs/dropdown
-# pnpm i @stacksjs/dropdown
+pnpm add @stacksjs/components
+# pnpm i @stacksjs/components
 ```
 
 ```sh [yarn]
-yarn add @stacksjs/dropdown
-# yarn i -d @stacksjs/dropdown
+yarn add @stacksjs/components
+# yarn i -d @stacksjs/components
 ```
 
 :::
@@ -59,7 +59,7 @@ import {
   DropdownButton,
   DropdownItems,
   DropdownItem,
-} from '@stacksjs/dropdown'
+} from '@stacksjs/components'
 </script>
 
 <template>
@@ -187,7 +187,7 @@ The dropdown component follows WAI-ARIA guidelines and includes the following fe
 The dropdown component includes full TypeScript support:
 
 ```ts
-import type { DropdownItemProps } from '@stacksjs/dropdown'
+import type { DropdownItemProps } from '@stacksjs/components'
 import { ref } from '@stacksjs/stx'
 
 interface MenuItem {

docs/guide/components/listbox.md

@@ -23,23 +23,23 @@ A modern, accessible listbox component for STX applications.
 ::: code-group
 
 ```sh [npm]
-npm install @stacksjs/listbox
+npm install @stacksjs/components
 ```
 
 ```sh [bun]
-bun install @stacksjs/listbox
-# bun add @stacksjs/listbox
-# bun i @stacksjs/listbox
+bun install @stacksjs/components
+# bun add @stacksjs/components
+# bun i @stacksjs/components
 ```
 
 ```sh [pnpm]
-pnpm add @stacksjs/listbox
-# pnpm i @stacksjs/listbox
+pnpm add @stacksjs/components
+# pnpm i @stacksjs/components
 ```
 
 ```sh [yarn]
-yarn add @stacksjs/listbox
-# yarn i -d @stacksjs/listbox
+yarn add @stacksjs/components
+# yarn i -d @stacksjs/components
 ```
 
 :::
@@ -57,7 +57,7 @@ import {
   ListboxButton,
   ListboxOptions,
   ListboxOption,
-} from '@stacksjs/listbox'
+} from '@stacksjs/components'
 
 const people = [
   { id: 1, name: 'Durward Reynolds', unavailable: false },

docs/guide/components/notification.md

@@ -24,23 +24,23 @@ A modern, accessible notification component for STX applications.
 ::: code-group
 
 ```sh [npm]
-npm install @stacksjs/notification
+npm install @stacksjs/components
 ```
 
 ```sh [bun]
-bun install @stacksjs/notification
-# bun add @stacksjs/notification
-# bun i @stacksjs/notification
+bun install @stacksjs/components
+# bun add @stacksjs/components
+# bun i @stacksjs/components
 ```
 
 ```sh [pnpm]
-pnpm add @stacksjs/notification
-# pnpm i @stacksjs/notification
+pnpm add @stacksjs/components
+# pnpm i @stacksjs/components
 ```
 
 ```sh [yarn]
-yarn add @stacksjs/notification
-# yarn i -d @stacksjs/notification
+yarn add @stacksjs/components
+# yarn i -d @stacksjs/components
 ```
 
 :::
@@ -53,7 +53,7 @@ The notification component can be easily integrated into your STX application:
 ```html
 <script>
 import { ref } from '@stacksjs/stx'
-import { Notification } from '@stacksjs/notification'
+import { Notification } from '@stacksjs/components'
 
 const position = ref('top-right')
 const expand = ref(false)
@@ -142,7 +142,7 @@ The notification component follows WAI-ARIA guidelines and includes:
 The notification component includes full TypeScript support:
 
 ```ts
-import type { Position, Theme } from '@stacksjs/notification'
+import type { Position, Theme } from '@stacksjs/components'
 
 const position = ref<Position>('top-right')
 const theme = ref<Theme>('light')

docs/guide/components/popover.md

@@ -25,23 +25,23 @@ A modern, accessible popover component for STX applications.
 ::: code-group
 
 ```sh [npm]
-npm install @stacksjs/popover
+npm install @stacksjs/components
 ```
 
 ```sh [bun]
-bun install @stacksjs/popover
-# bun add @stacksjs/popover
-# bun i @stacksjs/popover
+bun install @stacksjs/components
+# bun add @stacksjs/components
+# bun i @stacksjs/components
 ```
 
 ```sh [pnpm]
-pnpm add @stacksjs/popover
-# pnpm i @stacksjs/popover
+pnpm add @stacksjs/components
+# pnpm i @stacksjs/components
 ```
 
 ```sh [yarn]
-yarn add @stacksjs/popover
-# yarn i -d @stacksjs/popover
+yarn add @stacksjs/components
+# yarn i -d @stacksjs/components
 ```
 
 :::
@@ -58,7 +58,7 @@ import {
   Popover,
   PopoverButton,
   PopoverPanel,
-} from '@stacksjs/popover'
+} from '@stacksjs/components'
 </script>
 
 <template>
@@ -167,7 +167,7 @@ The popover component follows WAI-ARIA guidelines and includes the following fea
 The popover component includes full TypeScript support:
 
 ```ts
-import type { PopoverSlotProps } from '@stacksjs/popover'
+import type { PopoverSlotProps } from '@stacksjs/components'
 import { ref } from '@stacksjs/stx'
 
 const panelOpen = ref<boolean>(false)

docs/guide/components/radio-group.md

@@ -23,23 +23,23 @@ A modern, accessible radio group component for STX applications.
 ::: code-group
 
 ```sh [npm]
-npm install @stacksjs/radio-group
+npm install @stacksjs/components
 ```
 
 ```sh [bun]
-bun install @stacksjs/radio-group
-# bun add @stacksjs/radio-group
-# bun i @stacksjs/radio-group
+bun install @stacksjs/components
+# bun add @stacksjs/components
+# bun i @stacksjs/components
 ```
 
 ```sh [pnpm]
-pnpm add @stacksjs/radio-group
-# pnpm i @stacksjs/radio-group
+pnpm add @stacksjs/components
+# pnpm i @stacksjs/components
 ```
 
 ```sh [yarn]
-yarn add @stacksjs/radio-group
-# yarn i -d @stacksjs/radio-group
+yarn add @stacksjs/components
+# yarn i -d @stacksjs/components
 ```
 
 :::
@@ -56,7 +56,7 @@ import {
   RadioGroup,
   RadioGroupLabel,
   RadioGroupOption,
-} from '@stacksjs/radio-group'
+} from '@stacksjs/components'
 
 const plans = [
   { id: 1, name: 'Startup', price: '$29' },

docs/guide/components/switch.md

@@ -23,23 +23,23 @@ A modern, accessible toggle switch component for STX applications.
 ::: code-group
 
 ```sh [npm]
-npm install @stacksjs/switch
+npm install @stacksjs/components
 ```
 
 ```sh [bun]
-bun install @stacksjs/switch
-# bun add @stacksjs/switch
-# bun i @stacksjs/switch
+bun install @stacksjs/components
+# bun add @stacksjs/components
+# bun i @stacksjs/components
 ```
 
 ```sh [pnpm]
-pnpm add @stacksjs/switch
-# pnpm i @stacksjs/switch
+pnpm add @stacksjs/components
+# pnpm i @stacksjs/components
 ```
 
 ```sh [yarn]
-yarn add @stacksjs/switch
-# yarn i -d @stacksjs/switch
+yarn add @stacksjs/components
+# yarn i -d @stacksjs/components
 ```
 
 :::
@@ -52,7 +52,7 @@ The switch component is simple to use and highly customizable:
 ```html
 <script>
 import { ref } from '@stacksjs/stx'
-import { Switch, SwitchLabel, SwitchGroup } from '@stacksjs/switch'
+import { Switch, SwitchLabel, SwitchGroup } from '@stacksjs/components'
 
 const enabled = ref(false)
 </script>