zugzbot 1.0.21 → 1.0.22

package/.opencode/docs/shadcn/rules/base-vs-radix.md

@@ -1,306 +0,0 @@
-# Base vs Radix
-
-API differences between `base` and `radix`. Check the `base` field from `npx shadcn@latest info`.
-
-## Contents
-
-- Composition: asChild vs render
-- Button / trigger as non-button element
-- Select (items prop, placeholder, positioning, multiple, object values)
-- ToggleGroup (type vs multiple)
-- Slider (scalar vs array)
-- Accordion (type and defaultValue)
-
----
-
-## Composition: asChild (radix) vs render (base)
-
-Radix uses `asChild` to replace the default element. Base uses `render`. Don't wrap triggers in extra elements.
-
-**Incorrect:**
-
-```tsx
-<DialogTrigger>
-  <div>
-    <Button>Open</Button>
-  </div>
-</DialogTrigger>
-```
-
-**Correct (radix):**
-
-```tsx
-<DialogTrigger asChild>
-  <Button>Open</Button>
-</DialogTrigger>
-```
-
-**Correct (base):**
-
-```tsx
-<DialogTrigger render={<Button />}>Open</DialogTrigger>
-```
-
-This applies to all trigger and close components: `DialogTrigger`, `SheetTrigger`, `AlertDialogTrigger`, `DropdownMenuTrigger`, `PopoverTrigger`, `TooltipTrigger`, `CollapsibleTrigger`, `DialogClose`, `SheetClose`, `NavigationMenuLink`, `BreadcrumbLink`, `SidebarMenuButton`, `Badge`, `Item`.
-
----
-
-## Button / trigger as non-button element (base only)
-
-When `render` changes an element to a non-button (`<a>`, `<span>`), add `nativeButton={false}`.
-
-**Incorrect (base):** missing `nativeButton={false}`.
-
-```tsx
-<Button render={<a href="/docs" />}>Read the docs</Button>
-```
-
-**Correct (base):**
-
-```tsx
-<Button render={<a href="/docs" />} nativeButton={false}>
-  Read the docs
-</Button>
-```
-
-**Correct (radix):**
-
-```tsx
-<Button asChild>
-  <a href="/docs">Read the docs</a>
-</Button>
-```
-
-Same for triggers whose `render` is not a `Button`:
-
-```tsx
-// base.
-<PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>
-  Pick date
-</PopoverTrigger>
-```
-
----
-
-## Select
-
-**items prop (base only).** Base requires an `items` prop on the root. Radix uses inline JSX only.
-
-**Incorrect (base):**
-
-```tsx
-<Select>
-  <SelectTrigger><SelectValue placeholder="Select a fruit" /></SelectTrigger>
-</Select>
-```
-
-**Correct (base):**
-
-```tsx
-const items = [
-  { label: "Select a fruit", value: null },
-  { label: "Apple", value: "apple" },
-  { label: "Banana", value: "banana" },
-]
-
-<Select items={items}>
-  <SelectTrigger>
-    <SelectValue />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectGroup>
-      {items.map((item) => (
-        <SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>
-      ))}
-    </SelectGroup>
-  </SelectContent>
-</Select>
-```
-
-**Correct (radix):**
-
-```tsx
-<Select>
-  <SelectTrigger>
-    <SelectValue placeholder="Select a fruit" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectGroup>
-      <SelectItem value="apple">Apple</SelectItem>
-      <SelectItem value="banana">Banana</SelectItem>
-    </SelectGroup>
-  </SelectContent>
-</Select>
-```
-
-**Placeholder.** Base uses a `{ value: null }` item in the items array. Radix uses `<SelectValue placeholder="...">`.
-
-**Content positioning.** Base uses `alignItemWithTrigger`. Radix uses `position`.
-
-```tsx
-// base.
-<SelectContent alignItemWithTrigger={false} side="bottom">
-
-// radix.
-<SelectContent position="popper">
-```
-
----
-
-## Select — multiple selection and object values (base only)
-
-Base supports `multiple`, render-function children on `SelectValue`, and object values with `itemToStringValue`. Radix is single-select with string values only.
-
-**Correct (base — multiple selection):**
-
-```tsx
-<Select items={items} multiple defaultValue={[]}>
-  <SelectTrigger>
-    <SelectValue>
-      {(value: string[]) => value.length === 0 ? "Select fruits" : `${value.length} selected`}
-    </SelectValue>
-  </SelectTrigger>
-  ...
-</Select>
-```
-
-**Correct (base — object values):**
-
-```tsx
-<Select defaultValue={plans[0]} itemToStringValue={(plan) => plan.name}>
-  <SelectTrigger>
-    <SelectValue>{(value) => value.name}</SelectValue>
-  </SelectTrigger>
-  ...
-</Select>
-```
-
----
-
-## ToggleGroup
-
-Base uses a `multiple` boolean prop. Radix uses `type="single"` or `type="multiple"`.
-
-**Incorrect (base):**
-
-```tsx
-<ToggleGroup type="single" defaultValue="daily">
-  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
-</ToggleGroup>
-```
-
-**Correct (base):**
-
-```tsx
-// Single (no prop needed), defaultValue is always an array.
-<ToggleGroup defaultValue={["daily"]} spacing={2}>
-  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
-  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
-</ToggleGroup>
-
-// Multi-selection.
-<ToggleGroup multiple>
-  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
-  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
-</ToggleGroup>
-```
-
-**Correct (radix):**
-
-```tsx
-// Single, defaultValue is a string.
-<ToggleGroup type="single" defaultValue="daily" spacing={2}>
-  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
-  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
-</ToggleGroup>
-
-// Multi-selection.
-<ToggleGroup type="multiple">
-  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
-  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
-</ToggleGroup>
-```
-
-**Controlled single value:**
-
-```tsx
-// base — wrap/unwrap arrays.
-const [value, setValue] = React.useState("normal")
-<ToggleGroup value={[value]} onValueChange={(v) => setValue(v[0])}>
-
-// radix — plain string.
-const [value, setValue] = React.useState("normal")
-<ToggleGroup type="single" value={value} onValueChange={setValue}>
-```
-
----
-
-## Slider
-
-Base accepts a plain number for a single thumb. Radix always requires an array.
-
-**Incorrect (base):**
-
-```tsx
-<Slider defaultValue={[50]} max={100} step={1} />
-```
-
-**Correct (base):**
-
-```tsx
-<Slider defaultValue={50} max={100} step={1} />
-```
-
-**Correct (radix):**
-
-```tsx
-<Slider defaultValue={[50]} max={100} step={1} />
-```
-
-Both use arrays for range sliders. Controlled `onValueChange` in base may need a cast:
-
-```tsx
-// base.
-const [value, setValue] = React.useState([0.3, 0.7])
-<Slider value={value} onValueChange={(v) => setValue(v as number[])} />
-
-// radix.
-const [value, setValue] = React.useState([0.3, 0.7])
-<Slider value={value} onValueChange={setValue} />
-```
-
----
-
-## Accordion
-
-Radix requires `type="single"` or `type="multiple"` and supports `collapsible`. `defaultValue` is a string. Base uses no `type` prop, uses `multiple` boolean, and `defaultValue` is always an array.
-
-**Incorrect (base):**
-
-```tsx
-<Accordion type="single" collapsible defaultValue="item-1">
-  <AccordionItem value="item-1">...</AccordionItem>
-</Accordion>
-```
-
-**Correct (base):**
-
-```tsx
-<Accordion defaultValue={["item-1"]}>
-  <AccordionItem value="item-1">...</AccordionItem>
-</Accordion>
-
-// Multi-select.
-<Accordion multiple defaultValue={["item-1", "item-2"]}>
-  <AccordionItem value="item-1">...</AccordionItem>
-  <AccordionItem value="item-2">...</AccordionItem>
-</Accordion>
-```
-
-**Correct (radix):**
-
-```tsx
-<Accordion type="single" collapsible defaultValue="item-1">
-  <AccordionItem value="item-1">...</AccordionItem>
-</Accordion>
-```

package/.opencode/docs/shadcn/rules/composition.md

@@ -1,195 +0,0 @@
-# Component Composition
-
-## Contents
-
-- Items always inside their Group component
-- Callouts use Alert
-- Empty states use Empty component
-- Toast notifications use sonner
-- Choosing between overlay components
-- Dialog, Sheet, and Drawer always need a Title
-- Card structure
-- Button has no isPending or isLoading prop
-- TabsTrigger must be inside TabsList
-- Avatar always needs AvatarFallback
-- Use Separator instead of raw hr or border divs
-- Use Skeleton for loading placeholders
-- Use Badge instead of custom styled spans
-
----
-
-## Items always inside their Group component
-
-Never render items directly inside the content container.
-
-**Incorrect:**
-
-```tsx
-<SelectContent>
-  <SelectItem value="apple">Apple</SelectItem>
-  <SelectItem value="banana">Banana</SelectItem>
-</SelectContent>
-```
-
-**Correct:**
-
-```tsx
-<SelectContent>
-  <SelectGroup>
-    <SelectItem value="apple">Apple</SelectItem>
-    <SelectItem value="banana">Banana</SelectItem>
-  </SelectGroup>
-</SelectContent>
-```
-
-This applies to all group-based components:
-
-| Item | Group |
-|------|-------|
-| `SelectItem`, `SelectLabel` | `SelectGroup` |
-| `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSub` | `DropdownMenuGroup` |
-| `MenubarItem` | `MenubarGroup` |
-| `ContextMenuItem` | `ContextMenuGroup` |
-| `CommandItem` | `CommandGroup` |
-
----
-
-## Callouts use Alert
-
-```tsx
-<Alert>
-  <AlertTitle>Warning</AlertTitle>
-  <AlertDescription>Something needs attention.</AlertDescription>
-</Alert>
-```
-
----
-
-## Empty states use Empty component
-
-```tsx
-<Empty>
-  <EmptyHeader>
-    <EmptyMedia variant="icon"><FolderIcon /></EmptyMedia>
-    <EmptyTitle>No projects yet</EmptyTitle>
-    <EmptyDescription>Get started by creating a new project.</EmptyDescription>
-  </EmptyHeader>
-  <EmptyContent>
-    <Button>Create Project</Button>
-  </EmptyContent>
-</Empty>
-```
-
----
-
-## Toast notifications use sonner
-
-```tsx
-import { toast } from "sonner"
-
-toast.success("Changes saved.")
-toast.error("Something went wrong.")
-toast("File deleted.", {
-  action: { label: "Undo", onClick: () => undoDelete() },
-})
-```
-
----
-
-## Choosing between overlay components
-
-| Use case | Component |
-|----------|-----------|
-| Focused task that requires input | `Dialog` |
-| Destructive action confirmation | `AlertDialog` |
-| Side panel with details or filters | `Sheet` |
-| Mobile-first bottom panel | `Drawer` |
-| Quick info on hover | `HoverCard` |
-| Small contextual content on click | `Popover` |
-
----
-
-## Dialog, Sheet, and Drawer always need a Title
-
-`DialogTitle`, `SheetTitle`, `DrawerTitle` are required for accessibility. Use `className="sr-only"` if visually hidden.
-
-```tsx
-<DialogContent>
-  <DialogHeader>
-    <DialogTitle>Edit Profile</DialogTitle>
-    <DialogDescription>Update your profile.</DialogDescription>
-  </DialogHeader>
-  ...
-</DialogContent>
-```
-
----
-
-## Card structure
-
-Use full composition — don't dump everything into `CardContent`:
-
-```tsx
-<Card>
-  <CardHeader>
-    <CardTitle>Team Members</CardTitle>
-    <CardDescription>Manage your team.</CardDescription>
-  </CardHeader>
-  <CardContent>...</CardContent>
-  <CardFooter>
-    <Button>Invite</Button>
-  </CardFooter>
-</Card>
-```
-
----
-
-## Button has no isPending or isLoading prop
-
-Compose with `Spinner` + `data-icon` + `disabled`:
-
-```tsx
-<Button disabled>
-  <Spinner data-icon="inline-start" />
-  Saving...
-</Button>
-```
-
----
-
-## TabsTrigger must be inside TabsList
-
-Never render `TabsTrigger` directly inside `Tabs` — always wrap in `TabsList`:
-
-```tsx
-<Tabs defaultValue="account">
-  <TabsList>
-    <TabsTrigger value="account">Account</TabsTrigger>
-    <TabsTrigger value="password">Password</TabsTrigger>
-  </TabsList>
-  <TabsContent value="account">...</TabsContent>
-</Tabs>
-```
-
----
-
-## Avatar always needs AvatarFallback
-
-Always include `AvatarFallback` for when the image fails to load:
-
-```tsx
-<Avatar>
-  <AvatarImage src="/avatar.png" alt="User" />
-  <AvatarFallback>JD</AvatarFallback>
-</Avatar>
-```
-
----
-
-## Use existing components instead of custom markup
-
-| Instead of | Use |
-|---|---|
-| `<hr>` or `<div className="border-t">` | `<Separator />` |
-| `<div className="animate-pulse">` with styled divs | `<Skeleton className="h-4 w-3/4" />` |
-| `<span className="rounded-full bg-green-100 ...">` | `<Badge variant="secondary">` |

package/.opencode/docs/shadcn/rules/forms.md

@@ -1,192 +0,0 @@
-# Forms & Inputs
-
-## Contents
-
-- Forms use FieldGroup + Field
-- InputGroup requires InputGroupInput/InputGroupTextarea
-- Buttons inside inputs use InputGroup + InputGroupAddon
-- Option sets (2–7 choices) use ToggleGroup
-- FieldSet + FieldLegend for grouping related fields
-- Field validation and disabled states
-
----
-
-## Forms use FieldGroup + Field
-
-Always use `FieldGroup` + `Field` — never raw `div` with `space-y-*`:
-
-```tsx
-<FieldGroup>
-  <Field>
-    <FieldLabel htmlFor="email">Email</FieldLabel>
-    <Input id="email" type="email" />
-  </Field>
-  <Field>
-    <FieldLabel htmlFor="password">Password</FieldLabel>
-    <Input id="password" type="password" />
-  </Field>
-</FieldGroup>
-```
-
-Use `Field orientation="horizontal"` for settings pages. Use `FieldLabel className="sr-only"` for visually hidden labels.
-
-**Choosing form controls:**
-
-- Simple text input → `Input`
-- Dropdown with predefined options → `Select`
-- Searchable dropdown → `Combobox`
-- Native HTML select (no JS) → `native-select`
-- Boolean toggle → `Switch` (for settings) or `Checkbox` (for forms)
-- Single choice from few options → `RadioGroup`
-- Toggle between 2–5 options → `ToggleGroup` + `ToggleGroupItem`
-- OTP/verification code → `InputOTP`
-- Multi-line text → `Textarea`
-
----
-
-## InputGroup requires InputGroupInput/InputGroupTextarea
-
-Never use raw `Input` or `Textarea` inside an `InputGroup`.
-
-**Incorrect:**
-
-```tsx
-<InputGroup>
-  <Input placeholder="Search..." />
-</InputGroup>
-```
-
-**Correct:**
-
-```tsx
-import { InputGroup, InputGroupInput } from "@/components/ui/input-group"
-
-<InputGroup>
-  <InputGroupInput placeholder="Search..." />
-</InputGroup>
-```
-
----
-
-## Buttons inside inputs use InputGroup + InputGroupAddon
-
-Never place a `Button` directly inside or adjacent to an `Input` with custom positioning.
-
-**Incorrect:**
-
-```tsx
-<div className="relative">
-  <Input placeholder="Search..." className="pr-10" />
-  <Button className="absolute right-0 top-0" size="icon">
-    <SearchIcon />
-  </Button>
-</div>
-```
-
-**Correct:**
-
-```tsx
-import { InputGroup, InputGroupInput, InputGroupAddon } from "@/components/ui/input-group"
-
-<InputGroup>
-  <InputGroupInput placeholder="Search..." />
-  <InputGroupAddon>
-    <Button size="icon">
-      <SearchIcon data-icon="inline-start" />
-    </Button>
-  </InputGroupAddon>
-</InputGroup>
-```
-
----
-
-## Option sets (2–7 choices) use ToggleGroup
-
-Don't manually loop `Button` components with active state.
-
-**Incorrect:**
-
-```tsx
-const [selected, setSelected] = useState("daily")
-
-<div className="flex gap-2">
-  {["daily", "weekly", "monthly"].map((option) => (
-    <Button
-      key={option}
-      variant={selected === option ? "default" : "outline"}
-      onClick={() => setSelected(option)}
-    >
-      {option}
-    </Button>
-  ))}
-</div>
-```
-
-**Correct:**
-
-```tsx
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
-
-<ToggleGroup spacing={2}>
-  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
-  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
-  <ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
-</ToggleGroup>
-```
-
-Combine with `Field` for labelled toggle groups:
-
-```tsx
-<Field orientation="horizontal">
-  <FieldTitle id="theme-label">Theme</FieldTitle>
-  <ToggleGroup aria-labelledby="theme-label" spacing={2}>
-    <ToggleGroupItem value="light">Light</ToggleGroupItem>
-    <ToggleGroupItem value="dark">Dark</ToggleGroupItem>
-    <ToggleGroupItem value="system">System</ToggleGroupItem>
-  </ToggleGroup>
-</Field>
-```
-
-> **Note:** `defaultValue` and `type`/`multiple` props differ between base and radix. See [base-vs-radix.md](./base-vs-radix.md#togglegroup).
-
----
-
-## FieldSet + FieldLegend for grouping related fields
-
-Use `FieldSet` + `FieldLegend` for related checkboxes, radios, or switches — not `div` with a heading:
-
-```tsx
-<FieldSet>
-  <FieldLegend variant="label">Preferences</FieldLegend>
-  <FieldDescription>Select all that apply.</FieldDescription>
-  <FieldGroup className="gap-3">
-    <Field orientation="horizontal">
-      <Checkbox id="dark" />
-      <FieldLabel htmlFor="dark" className="font-normal">Dark mode</FieldLabel>
-    </Field>
-  </FieldGroup>
-</FieldSet>
-```
-
----
-
-## Field validation and disabled states
-
-Both attributes are needed — `data-invalid`/`data-disabled` styles the field (label, description), while `aria-invalid`/`disabled` styles the control.
-
-```tsx
-// Invalid.
-<Field data-invalid>
-  <FieldLabel htmlFor="email">Email</FieldLabel>
-  <Input id="email" aria-invalid />
-  <FieldDescription>Invalid email address.</FieldDescription>
-</Field>
-
-// Disabled.
-<Field data-disabled>
-  <FieldLabel htmlFor="email">Email</FieldLabel>
-  <Input id="email" disabled />
-</Field>
-```
-
-Works for all controls: `Input`, `Textarea`, `Select`, `Checkbox`, `RadioGroupItem`, `Switch`, `Slider`, `NativeSelect`, `InputOTP`.