quiver-cli 1.3.1 → 2.0.0

package/template/.agents/skills/design/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/template/.agents/skills/design/shadcn/rules/chat.md

@@ -1,250 +0,0 @@
-# Chat & Messaging
-
-Components for conversation and chat UI. Compose these instead of hand-rolling
-bubbles, scroll containers, dividers, or attachment cards.
-
-Install: `npx shadcn@latest add message-scroller message bubble attachment marker`
-
-The same component names and props ship for both `base` and `radix`; only
-composition differs (`render` vs `asChild`). See [base-vs-radix.md](./base-vs-radix.md).
-
-## Contents
-
-- Scrollable threads use MessageScroller
-- Message rows use Message
-- Message surfaces use Bubble
-- Attachments use Attachment
-- System notes and dividers use Marker
-- Streaming, anchoring, and jump-to-latest are built in
-- Escape hatch: the scroller hooks
-
----
-
-## Scrollable threads use MessageScroller
-
-A conversation that scrolls, follows new messages, restores position, or jumps
-to a message uses `MessageScroller`. Don't build a raw overflow container with
-manual scroll wiring, and don't reach for `ScrollArea`.
-
-The parts nest in a fixed order. Every direct child of the content is wrapped in
-a `MessageScrollerItem` so the scroller can measure, anchor, preserve position,
-track visibility, and jump to it. `MessageScrollerButton` sits inside
-`MessageScroller`, after the viewport.
-
-**Incorrect:**
-
-```tsx
-// Hand-rolled scroll container with manual stick-to-bottom logic.
-<div ref={scrollRef} onScroll={handleScroll} className="flex-1 overflow-y-auto">
-  <div className="flex flex-col gap-6 p-4">
-    {messages.map((m) => (
-      <ChatMessage key={m.id} message={m} />
-    ))}
-  </div>
-</div>
-```
-
-**Correct:**
-
-```tsx
-<MessageScrollerProvider autoScroll>
-  <MessageScroller>
-    <MessageScrollerViewport>
-      <MessageScrollerContent>
-        {messages.map((message) => (
-          <MessageScrollerItem
-            key={message.id}
-            messageId={message.id}
-            scrollAnchor={message.role === "user"}
-          >
-            <Message align={message.role === "user" ? "end" : "start"}>
-              {/* ...message content... */}
-            </Message>
-          </MessageScrollerItem>
-        ))}
-      </MessageScrollerContent>
-    </MessageScrollerViewport>
-    <MessageScrollerButton />
-  </MessageScroller>
-</MessageScrollerProvider>
-```
-
----
-
-## Message rows use Message
-
-`Message` lays out a single row: avatar, header, content, footer, with
-alignment. Group consecutive rows from one sender with `MessageGroup`. Don't
-rebuild the row from flex divs.
-
-`align="end"` is the current user's side; `align="start"` is everyone else.
-
-```tsx
-<Message align="start">
-  <MessageAvatar>
-    <Avatar>
-      <AvatarImage src={sender.avatar} alt={sender.name} />
-      <AvatarFallback>{initials}</AvatarFallback>
-    </Avatar>
-  </MessageAvatar>
-  <MessageContent>
-    <MessageHeader>{sender.name}</MessageHeader>
-    <Bubble>
-      <BubbleContent>{text}</BubbleContent>
-    </Bubble>
-    <MessageFooter>{time}</MessageFooter>
-  </MessageContent>
-</Message>
-```
-
----
-
-## Message surfaces use Bubble
-
-The colored message surface is `Bubble` + `BubbleContent`, never a styled `div`
-with `bg-muted` / `bg-primary` and hand-managed corners.
-
-- `variant`: `default`, `secondary`, `muted`, `tinted`, `outline`, `ghost`, `destructive`.
-- `align`: `start` or `end` (matches the `Message` side).
-
-`BubbleReactions` renders the reaction cluster. `side` (`top` | `bottom`) and
-`align` (`start` | `end`) position it against the bubble. Don't lay reactions out
-with absolutely-positioned `Badge`s.
-
-**Incorrect:**
-
-```tsx
-<div className="w-fit rounded-2xl bg-primary px-3 py-2 text-primary-foreground">
-  {text}
-</div>
-```
-
-**Correct:**
-
-```tsx
-<Bubble variant="default" align="end">
-  <BubbleContent>{text}</BubbleContent>
-  <BubbleReactions side="bottom" align="end">
-    <Badge variant="secondary">👍 2</Badge>
-  </BubbleReactions>
-</Bubble>
-```
-
----
-
-## Attachments use Attachment
-
-File and image attachments use `Attachment`, not `Item` or a custom card. It
-carries upload state, so wire `state` to the real status rather than rendering a
-separate spinner.
-
-- `state`: `idle`, `uploading`, `processing`, `error`, `done`. `uploading` and
-  `processing` apply the `shimmer` animation to the title automatically.
-- `size`: `default`, `sm`, `xs`. `orientation`: `horizontal`, `vertical`.
-- Use `AttachmentGroup` to lay out several attachments in a scrolling row.
-
-```tsx
-<Attachment state="done">
-  <AttachmentMedia variant="icon">
-    <FileTextIcon />
-  </AttachmentMedia>
-  <AttachmentContent>
-    <AttachmentTitle>homepage-feedback.pdf</AttachmentTitle>
-    <AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
-  </AttachmentContent>
-  <AttachmentActions>
-    <AttachmentAction>
-      <DownloadIcon />
-    </AttachmentAction>
-  </AttachmentActions>
-</Attachment>
-```
-
-For an image, use `<AttachmentMedia variant="image">` with an `img` child.
-
----
-
-## System notes and dividers use Marker
-
-Status lines ("Sarah joined the conversation"), date dividers ("Today"), and
-labeled separators are `Marker`, not a `Separator` plus a centered span.
-
-- `variant`: `default` (plain row), `separator` (centered label with rules on
-  each side), `border` (bottom-bordered row).
-- `MarkerIcon` holds a leading icon; `MarkerContent` holds the label.
-
-**Incorrect:**
-
-```tsx
-<div className="flex items-center gap-3 py-2">
-  <Separator className="flex-1" />
-  <span className="text-xs text-muted-foreground">Today</span>
-  <Separator className="flex-1" />
-</div>
-```
-
-**Correct:**
-
-```tsx
-<Marker variant="separator">
-  <MarkerContent>Today</MarkerContent>
-</Marker>
-```
-
----
-
-## Streaming, anchoring, and jump-to-latest are built in
-
-`MessageScroller` handles the behavior that chat UIs usually reinvent. Don't
-write a `useStickToBottom` hook, a `ResizeObserver`, or manual `scrollTop` math.
-
-- **Follow the live edge while streaming.** `MessageScrollerProvider` with
-  `autoScroll` keeps the view pinned to new content and yields the moment the
-  user scrolls up. Streaming token updates that grow the last message are
-  followed automatically.
-- **Anchor a turn.** `scrollAnchor` on a `MessageScrollerItem` marks the row to
-  hold in view (typically the user's message that started the turn).
-- **Jump to latest.** `MessageScrollerButton` appears when the user scrolls away
-  and scrolls back on click. `direction="end"` (default) or `direction="start"`.
-  It is a self-managing control, so don't gate it behind your own scroll-position
-  state.
-- **Open a saved transcript without a flash.** `defaultScrollPosition` applies
-  after mount. When it is `"end"` or `"last-anchor"`, the viewport has
-  `data-pending-scroll` until that position is applied. The styled viewport
-  hides. For `"end"` on first paint when messages are in the server HTML, copy
-  this script into the page, not into the primitive. Skip it for `"last-anchor"`
-  and for client-fetched messages. Keep `suppressHydrationWarning` on the
-  viewport. Pass a `nonce` if you use a Content Security Policy.
-
-```tsx
-const scrollToEndScript = `(function () {
-  var viewport = document.getElementById("messages")
-  if (!viewport) {
-    return
-  }
-  viewport.scrollTop = viewport.scrollHeight
-  viewport.removeAttribute("data-pending-scroll")
-})()`
-
-<MessageScroller>
-  <MessageScrollerViewport id="messages" suppressHydrationWarning>
-    <MessageScrollerContent>{/* transcript */}</MessageScrollerContent>
-  </MessageScrollerViewport>
-  <script dangerouslySetInnerHTML={{ __html: scrollToEndScript }} />
-  <MessageScrollerButton />
-</MessageScroller>
-```
-
-For a "thinking…" indicator while the model generates, apply the `shimmer`
-utility to text. Don't author a custom keyframe animation. See
-[styling.md](./styling.md).
-
----
-
-## Escape hatch: the scroller hooks
-
-For behavior the parts don't expose, read state from the hooks rather than
-re-implementing the scroller: `useMessageScroller`,
-`useMessageScrollerVisibility`, and `useMessageScrollerScrollable`. They come
-from the auto-installed `@shadcn/react` dependency, so there's nothing extra to
-install. Reach for them only when composition can't express what you need.