makersclaw 0.2.0 → 0.3.0

package/registry/blocks/task-model/toolbar.jsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { useId } from "react";
+import { Button, Checkbox, Icon, IconButton, InputGroup, Menu, Popover, Switch, cx } from "../../ui";
+import { DEFAULT_VIEW, NONE, activeFilterCount, createTaskContext, groupOptions, optionsOf, sortOptions, valuesOf } from "./model";
+
+// ViewToolbar — the one row above every task view: search, filter,
+// group by, sort, show fields, and your own button at the end. It edits a
+// view object ({ search, filters, groupBy, sort, fields, hideDone }) and
+// hands the next one to `onViewChange`; the view applies it with
+// applyView(). Active filters show as chips under the row, each with its
+// own ×, and "Clear" takes them all off.
+//
+// On a phone the search takes the first line and the controls become
+// icons on the second; nothing scrolls sideways.
+
+const ctxOf = (ctx) => (ctx && ctx.statusById ? ctx : createTaskContext(ctx ?? {}));
+
+const FILTER_KINDS = new Set(["status", "people", "priority", "project", "tags", "date", "select", "checkbox"]);
+const SHOWABLE = ["status", "assignees", "due", "start", "priority", "project", "tags", "estimate", "progress"];
+
+export function ViewToolbar({
+  view: viewProp,
+  onViewChange,
+  ctx,
+  tasks = [],
+  controls = ["search", "filter", "group", "sort", "fields"],
+  filterFields,
+  groupFields,
+  showableFields,
+  searchPlaceholder = "Search tasks",
+  count,
+  extra,
+  className,
+}) {
+  const c = ctxOf(ctx);
+  const uid = useId();
+  const view = { ...DEFAULT_VIEW, ...viewProp };
+  const set = (patch) => onViewChange?.({ ...view, ...patch });
+  const has = (k) => controls.includes(k);
+
+  const filterable = c.fields.filter(
+    (f) =>
+      FILTER_KINDS.has(f.kind) &&
+      (filterFields ? filterFields.includes(f.key) : f.key !== "start") &&
+      optionsOf(f.key, c, tasks).some((o) => !o.none),
+  );
+  const groups = groupOptions(c).filter((g) => !groupFields || g.key === "none" || groupFields.includes(g.key));
+  const sorts = sortOptions(c);
+  const showable = c.fields.filter((f) => (showableFields ?? [...SHOWABLE, ...c.fields.filter((x) => x.custom).map((x) => x.key)]).includes(f.key));
+  const active = activeFilterCount(view);
+  const groupLabel = groups.find((g) => g.key === (view.groupBy ?? "none"))?.label ?? "None";
+  const sort = view.sort?.[0];
+  const sortLabel = sort ? sorts.find((s) => s.key === sort.key)?.label ?? sort.key : "Manual";
+
+  const toggleFilter = (key, value, on) => {
+    const now = new Set(view.filters?.[key] ?? []);
+    if (on) now.add(value);
+    else now.delete(value);
+    const filters = { ...view.filters, [key]: [...now] };
+    if (!filters[key].length) delete filters[key];
+    set({ filters });
+  };
+
+  // How many tasks each filter choice holds, among all tasks.
+  const counts = (key) => {
+    const m = new Map();
+    for (const t of tasks) for (const v of valuesOf(t, key, c)) m.set(v, (m.get(v) ?? 0) + 1);
+    return m;
+  };
+
+  const chips = [];
+  for (const [key, values] of Object.entries(view.filters ?? {})) {
+    if (!values?.length) continue;
+    const field = c.fields.find((f) => f.key === key);
+    const opts = optionsOf(key, c, tasks);
+    const words = values.map((v) => opts.find((o) => o.id === v)?.label ?? (v === NONE ? "None" : v));
+    chips.push({ key, label: `${field?.label ?? key}: ${words.join(", ")}` });
+  }
+  if (view.hideDone) chips.push({ key: "__done", label: "Done hidden" });
+
+  return (
+    <div className={cx("grid min-w-0 grid-cols-1 gap-2", className)}>
+      <div className="flex flex-wrap items-center gap-2">
+        {has("search") ? (
+          <div className="min-w-0 basis-full sm:max-w-72 sm:flex-1 sm:basis-auto">
+            <label htmlFor={`${uid}-q`} className="sr-only">
+              {searchPlaceholder}
+            </label>
+            <InputGroup
+              id={`${uid}-q`}
+              icon="search"
+              type="search"
+              value={view.search ?? ""}
+              placeholder={searchPlaceholder}
+              onChange={(e) => set({ search: e.target.value })}
+              onKeyDown={(e) => {
+                if (e.key === "Escape" && view.search) {
+                  e.preventDefault();
+                  set({ search: "" });
+                }
+              }}
+              action={view.search ? { label: "Clear search", icon: "x", onClick: () => set({ search: "" }) } : undefined}
+            />
+          </div>
+        ) : null}
+        <div className="flex min-w-0 flex-1 items-center gap-1">
+          {has("filter") ? (
+            <Popover
+              label="Filter tasks"
+              width="md"
+              align="start"
+              variant={active ? "secondary" : "quiet"}
+              size="sm"
+              className="max-h-[min(70vh,32rem)] overflow-y-auto p-0"
+              trigger={
+                <span className="inline-flex items-center gap-1.5">
+                  <Icon name="filter" size={16} />
+                  <span className="sr-only sm:not-sr-only">Filter</span>
+                  {active ? (
+                    <span data-nums className="rounded-full bg-primary px-1.5 text-2xs font-semibold text-primary-foreground">
+                      <span className="sr-only">, </span>
+                      {active}
+                      <span className="sr-only"> on</span>
+                    </span>
+                  ) : null}
+                </span>
+              }
+            >
+              <div className="grid divide-y divide-border">
+                {filterable.map((f) => {
+                  const opts = optionsOf(f.key, c, tasks).filter((o) => o.id !== "past");
+                  const n = counts(f.key);
+                  const chosen = new Set(view.filters?.[f.key] ?? []);
+                  return (
+                    <fieldset key={f.key} className="grid gap-0.5 px-3 py-2">
+                      <legend className="float-left mb-1 w-full pt-1 text-xs font-medium text-muted-foreground">{f.label}</legend>
+                      {opts.map((o) => (
+                        <div key={o.id} className="flex items-center justify-between gap-3">
+                          <Checkbox
+                            id={`${uid}-${f.key}-${o.id}`}
+                            label={o.label}
+                            checked={chosen.has(o.id)}
+                            onChange={(e) => toggleFilter(f.key, o.id, e.target.checked)}
+                            className="min-w-0 flex-1"
+                          />
+                          <span data-nums className="text-xs text-muted-foreground">
+                            {n.get(o.id) ?? 0}
+                          </span>
+                        </div>
+                      ))}
+                    </fieldset>
+                  );
+                })}
+                <div className="px-3 py-1">
+                  <Switch id={`${uid}-done`} label="Hide done tasks" checked={Boolean(view.hideDone)} onChange={(e) => set({ hideDone: e.target.checked })} />
+                </div>
+              </div>
+            </Popover>
+          ) : null}
+          {has("group") ? (
+            <Menu
+              label={`Group by ${groupLabel}`}
+              align="start"
+              trigger={
+                <span className="inline-flex items-center gap-1.5">
+                  <Icon name="layers" size={16} />
+                  <span className="hidden sm:inline">
+                    Group<span className="text-muted-foreground">: {groupLabel}</span>
+                  </span>
+                </span>
+              }
+              items={[
+                { type: "label", label: "Group by" },
+                { type: "radio", value: view.groupBy ?? "none", onValueChange: (v) => set({ groupBy: v }), options: groups.map((g) => ({ value: g.key, label: g.label })) },
+              ]}
+            />
+          ) : null}
+          {has("sort") ? (
+            <Menu
+              label={`Sort by ${sortLabel}`}
+              align="start"
+              trigger={
+                <span className="inline-flex items-center gap-1.5">
+                  <Icon name="chevrons-up-down" size={16} />
+                  <span className="hidden sm:inline">
+                    Sort<span className="text-muted-foreground">: {sortLabel}</span>
+                  </span>
+                </span>
+              }
+              items={[
+                { type: "label", label: "Sort by" },
+                {
+                  type: "radio",
+                  value: sort?.key ?? "manual",
+                  onValueChange: (v) => set({ sort: v === "manual" ? [] : [{ key: v, dir: sort?.dir ?? "asc" }] }),
+                  options: sorts.map((s) => ({ value: s.key, label: s.label })),
+                },
+                sort && { type: "separator" },
+                sort && {
+                  type: "radio",
+                  value: sort.dir,
+                  onValueChange: (dir) => set({ sort: [{ key: sort.key, dir }] }),
+                  options: [
+                    { value: "asc", label: "Ascending" },
+                    { value: "desc", label: "Descending" },
+                  ],
+                },
+              ]}
+            />
+          ) : null}
+          {has("fields") ? (
+            <Menu
+              label="Show fields"
+              align="start"
+              trigger={
+                <span className="inline-flex items-center gap-1.5">
+                  <Icon name="eye" size={16} />
+                  <span className="hidden sm:inline">Fields</span>
+                </span>
+              }
+              items={[
+                { type: "label", label: "Show on each task" },
+                ...showable.map((f) => ({
+                  type: "checkbox",
+                  label: f.label,
+                  checked: (view.fields ?? []).includes(f.key),
+                  onCheckedChange: (on) => set({ fields: on ? [...(view.fields ?? []), f.key] : (view.fields ?? []).filter((k) => k !== f.key) }),
+                })),
+              ]}
+            />
+          ) : null}
+          {typeof count === "number" ? (
+            <span data-nums className="ms-1 hidden text-xs text-muted-foreground md:inline">
+              {count} {count === 1 ? "task" : "tasks"}
+            </span>
+          ) : null}
+          {extra ? <div className="ms-auto flex shrink-0 items-center gap-2">{extra}</div> : null}
+        </div>
+      </div>
+      {chips.length ? (
+        <ul className="flex flex-wrap items-center gap-1.5" aria-label="Filters on">
+          {chips.map((chip) => (
+            <li key={chip.key} className="inline-flex max-w-full items-center rounded-full border border-border bg-card ps-3 text-xs text-foreground">
+              <span className="truncate">{chip.label}</span>
+              <IconButton
+                icon="x"
+                size="sm"
+                label={`Remove filter ${chip.label}`}
+                className="-my-1 rounded-full"
+                onClick={() => {
+                  if (chip.key === "__done") set({ hideDone: false });
+                  else {
+                    const filters = { ...view.filters };
+                    delete filters[chip.key];
+                    set({ filters });
+                  }
+                }}
+              />
+            </li>
+          ))}
+          <li>
+            <Button variant="link" size="sm" tone="muted" onClick={() => set({ filters: {}, hideDone: false })}>
+              Clear filters
+            </Button>
+          </li>
+        </ul>
+      ) : null}
+    </div>
+  );
+}

package/registry/blocks/testimonials/README.md

@@ -0,0 +1,139 @@
+# Testimonials
+
+A marketing section of customer quotes. Each quote carries who said it
+(name, role, company, a face or a logo), an optional star rating drawn
+with the kit's `Rating`, an optional verified mark and "View on X"
+source, and an optional link to the full story. Headline numbers
+(`stats`) sit above the cards, or beside a single quote. Five layouts
+over the same rows: a **grid** of cards, a **single** large quote, a
+**switcher** (press a face to swap the quote), and a **carousel** (swipe,
+arrow keys, buttons, dots), optionally in a panel or over a picture. It
+is a full-width section: it pads itself and centres its content.
+
+```jsx
+import { Testimonials } from "../components/blocks/testimonials";   // a Makersclaw app ("./blocks/testimonials" from components/)
+import { Testimonials } from "@/components/makersclaw/blocks/testimonials";   // a shadcn project
+```
+
+It is a client component: render it from a `"use client"` component.
+
+## The data
+
+`items` is the quotes, in order:
+
+```js
+{
+  quote: "We closed the books four days faster…",   // required; a row without one is skipped
+  name: "Maya Okafor",                              // required
+  id?: "maya",                                      // a stable key
+  role?: "Head of Operations", company?: "Greenhaus",   // shown as "role, company"
+  avatar?: "/faces/maya.jpg",                       // initials while it loads, and when it fails
+  logo?: <GreenhausLogo />,                         // a node: the company's mark, above the quote
+  rating?: 4.5,                                     // 0–5, halves drawn; no rating, no stars
+  date?: "12 Aug 2026",                             // already formatted
+  verified?: true,                                  // a check after the name
+  source?: { network: "x", href: "https://x.com/…", label? },   // "View on X" + the brand glyph
+  href?: "/customers/greenhaus", hrefLabel?: "Read the story",  // a link under the quote
+  title?: "From a week of month-end to an afternoon",           // single: the heading
+  image?: "/stories/greenhaus.jpg", imageAlt?: "",  // single and switcher: a photo beside the quote
+  highlight?: true,                                 // grid: a primary ring round this card
+  wide?: true,                                      // grid: this card spans the row
+}
+```
+
+`source.network` is one of `x`, `linkedin`, `instagram`, `youtube`,
+`facebook`, `github`, `google`; anything else shows `label` and a link
+glyph.
+
+## Props
+
+- `items` — the quotes, as above. Required.
+- `layout` — `grid` (default) · `single` (the first quote, or the one at
+  `defaultIndex`) · `switcher` · `carousel`.
+- `kicker`, `title`, `description` — the header. In `single` and
+  `switcher` the title sits beside the quote (an item's own `title` wins
+  in `single`).
+- `align` — the header: `center` (default for grid and carousel) ·
+  `start` (default for single and switcher).
+- `stats` — `[{ label, value, unit?, caption? }]`, values already
+  formatted ("4,200+", "4.8" with unit "/ 5"). A strip of kit `Stat`s
+  under the header; in `single` they take the picture's place, beside the
+  quote.
+- `columns` — the grid from `lg` up: `1` · `2` · `3` (default) · `4`. One
+  column on a phone, two from `sm`.
+- `look` — each card: `card` (default: border and card fill) · `raised`
+  (plus a shadow) · `plain` (no box; quiet text). In `single` and
+  `carousel`, `plain` drops the panel round it.
+- `cardAlign` — `start` (default) · `center`.
+- `byline` — `bottom` (default: stars, quote, then the person) · `top`
+  (the person first, stars last).
+- `quoteMark` — `true` draws a quote glyph above each quote. Default
+  `false`.
+- `focusOnHover` — `true`: the card under the pointer stays lit and the
+  rest dim. Decoration only; nothing is selected. Default `false`.
+- `action` — `{ label, onClick?, href?, icon? }`: "Write a review". A
+  dashed tile after the cards in `grid`, a button in `single` and
+  `carousel`, and the way forward in the empty state.
+- `background`, `backgroundAlt` — `carousel` only: a picture behind the
+  slides, under a veil of the background colour so the text reads in
+  every theme.
+- `defaultIndex` — the quote `single` and `switcher` open on. Default `0`.
+- `onIndexChange(index)` — the switcher's pick, or the carousel's
+  settled slide.
+- `loading` — `true` draws three skeleton cards (the region is
+  `aria-busy`).
+- `empty` — `{ title?, body? }` for the empty state (no `items`). Default
+  "No reviews yet".
+- `label` — what a screen reader calls the section. Default the title.
+- `className` — the section's spacing and width. Never colour.
+
+## Example
+
+```jsx
+// components/Proof.jsx
+"use client";
+import { Testimonials } from "./blocks/testimonials";
+
+const QUOTES = [
+  { id: "maya", name: "Maya Okafor", role: "Head of Operations", company: "Greenhaus", rating: 5,
+    quote: "We closed the books four days faster in the first month." },
+  { id: "tomas", name: "Tomás Berg", role: "Founder", company: "Northwind Freight", rating: 4.5,
+    quote: "Every quote we send now carries its own margin." },
+  { id: "priya", name: "Priya Raman", role: "Customer Lead", company: "Loop Studio", rating: 5,
+    quote: "Support replies went from a day to under an hour." },
+];
+
+export default function Proof() {
+  return (
+    <Testimonials
+      kicker="Customers"
+      title="Loved by small teams"
+      description="Operators, founders and support leads on what changed."
+      items={QUOTES}
+      stats={[
+        { label: "Teams onboarded", value: "4,200+" },
+        { label: "Average rating", value: "4.8", unit: "/ 5" },
+        { label: "Hours saved a month", value: "31" },
+      ]}
+    />
+  );
+}
+```
+
+## What it will not do
+
+- Fetch reviews or take one in: `action` hands off, and the form is
+  yours (a `Sheet` with a `Rating` input, saved through your own action).
+- Colour a card by brand: a `highlight` is the theme's primary ring.
+- Autoplay: the carousel moves when the reader moves it.
+- Draw a company's logo from a URL: pass the logo as a node.
+
+A section it cannot be is your own component in `components/`, built
+from the kit — not an edit to this block. Its files are fixed: `npm run
+check` refuses a change, and `makersclaw add testimonials` restores them.
+
+## Credits
+
+Layouts ported from Creative Tim UI's testimonials blocks
+(https://github.com/creativetimofficial/ui, MIT), rewritten on the
+Makersclaw kit.

package/registry/blocks/testimonials/block.json

@@ -0,0 +1,11 @@
+{
+  "name": "testimonials",
+  "title": "Testimonials",
+  "description": "A marketing section of customer quotes: name, role, company, face or logo, the quote, an optional star rating, a verified mark and a \"view on X\" source, and optional headline numbers (stats). Layouts: a grid of cards (plain, card or raised; hover can light one and dim the rest; a \"write a review\" tile), one large quote, a switcher of faces, and a carousel, optionally over a picture.",
+  "useWhen": "Social proof on a public page: a landing page, a pricing page, a product page, a case-study teaser. Not for reviews a signed-in user writes and manages (a record list or form), or an app's own activity feed.",
+  "tags": ["testimonials", "reviews", "quotes", "social proof", "customers", "rating", "stars", "stats", "carousel", "marketing", "landing page", "case study"],
+  "exports": ["Testimonials"],
+  "files": ["index.js", "testimonials.jsx"],
+  "requires": [],
+  "frame": "bleed"
+}

package/registry/blocks/testimonials/demo.jsx

@@ -0,0 +1,137 @@
+"use client";
+
+// Testimonials in every variant — the gallery's and the smoke test's
+// surface. Not installed into apps: `makersclaw add testimonials` lays
+// index.js and testimonials.jsx only. Pick a variant and a state; the
+// "write a review" tile only counts its presses here.
+import { useState } from "react";
+import { Field, Icon, Select, ToggleGroup } from "../components/ui";
+import { Testimonials } from "../components/blocks/testimonials";
+
+function Wordmark({ icon, name }) {
+  return (
+    <span className="inline-flex items-center gap-2 text-lg font-semibold tracking-tight text-muted-foreground">
+      <Icon name={icon} size={22} />
+      {name}
+    </span>
+  );
+}
+
+const PEOPLE = [
+  {
+    id: "maya",
+    name: "Maya Okafor",
+    role: "Head of Operations",
+    company: "Greenhaus",
+    logo: <Wordmark icon="leaf" name="Greenhaus" />,
+    quote: "We closed the books four days faster in the first month. The team stopped chasing receipts and started reading the numbers.",
+    rating: 5,
+    date: "12 Aug 2026",
+    title: "From a week of month-end to an afternoon",
+  },
+  {
+    id: "tomas",
+    name: "Tomás Berg",
+    role: "Founder",
+    company: "Northwind Freight",
+    logo: <Wordmark icon="truck" name="Northwind" />,
+    quote: "Every quote we send now carries its own margin. I can see which lanes pay before we say yes, not three weeks after.",
+    rating: 4.5,
+    date: "3 Aug 2026",
+  },
+  {
+    id: "priya",
+    name: "Priya Raman",
+    role: "Customer Lead",
+    company: "Loop Studio",
+    logo: <Wordmark icon="layers" name="Loop Studio" />,
+    quote: "Support replies went from a day to under an hour. Customers noticed before we announced anything.",
+    rating: 5,
+    date: "28 Jul 2026",
+  },
+  {
+    id: "daniel",
+    name: "Daniel Cho",
+    role: "CTO",
+    company: "Brightpath",
+    logo: <Wordmark icon="zap" name="Brightpath" />,
+    quote: "Setup took an afternoon and nothing has broken since. That is the whole review.",
+    rating: 4,
+    date: "19 Jul 2026",
+  },
+];
+
+const HANDLES = { maya: "@mayaops", tomas: "@tomasberg", priya: "@priyaraman", daniel: "@dcho" };
+
+const withSource = PEOPLE.slice(0, 3).map((p) => ({
+  ...p,
+  role: HANDLES[p.id],
+  company: undefined,
+  verified: true,
+  source: { network: "x", href: "https://x.com" },
+}));
+const noRating = PEOPLE.map(({ rating, ...p }) => p);
+const noLogo = PEOPLE.map(({ logo, ...p }) => p);
+const STATS = [
+  { label: "Teams onboarded", value: "4,200+" },
+  { label: "Average rating", value: "4.8", unit: "/ 5" },
+  { label: "Hours saved a month", value: "31" },
+];
+
+const COMMON = { kicker: "Customers", title: "Loved by small teams", description: "Operators, founders and support leads on what changed after the switch." };
+
+const VARIANTS = [
+  { id: "01", label: "01 · Grid, avatars", props: { ...COMMON, items: noLogo.map(({ rating, ...p }) => p).slice(0, 3) } },
+  { id: "02", label: "02 · Grid, verified and on X", props: { ...COMMON, align: "start", items: withSource.map(({ logo, rating, ...p }) => p) } },
+  { id: "03", label: "03 · Grid, numbers and stars", props: { ...COMMON, items: noLogo.slice(0, 3), stats: STATS, quoteMark: true } },
+  { id: "04", label: "04 · Three columns, stars", props: { ...COMMON, kicker: undefined, items: noLogo.slice(0, 3) } },
+  { id: "05", label: "05 · Stars, byline first", props: { ...COMMON, items: noLogo.slice(0, 3), byline: "top" } },
+  { id: "06", label: "06 · One quote, logo", props: { kicker: "Customer story", items: [{ ...PEOPLE[1], title: "Every lane priced before we say yes", rating: undefined }], look: "plain" } },
+  { id: "07", label: "07 · Switcher", props: { layout: "switcher", title: "What operators say", items: noLogo } },
+  { id: "08", label: "08 · Plain, stars", props: { ...COMMON, items: noLogo.slice(0, 3), look: "plain" } },
+  { id: "09", label: "09 · Customer story", props: { layout: "single", kicker: "Customer story", items: [PEOPLE[0]] } },
+  { id: "10", label: "10 · Logos, centred", props: { ...COMMON, items: noRating.slice(0, 3).map((p) => ({ ...p, href: "/customers" })), look: "plain", cardAlign: "center" } },
+  { id: "11", label: "11 · Hover lights one", props: { ...COMMON, items: noLogo.slice(0, 3).map((p, i) => ({ ...p, highlight: i === 1 })), byline: "top", focusOnHover: true } },
+  { id: "12", label: "12 · Logos, two columns", props: { ...COMMON, columns: 2, items: noRating.slice(0, 3).map((p, i) => ({ ...p, wide: i === 2 })) } },
+  { id: "13", label: "13 · One card", props: { items: [{ ...noLogo[2] }] } },
+  { id: "14", label: "14 · Raised cards", props: { ...COMMON, items: noLogo.slice(0, 3).map(({ rating, ...p }) => p), look: "raised" } },
+  { id: "15", label: "15 · Write a review", props: { ...COMMON, columns: 4, items: noLogo.slice(0, 3), cardAlign: "center", byline: "top", action: { label: "Write a review" } } },
+  { id: "16", label: "16 · Carousel", props: { ...COMMON, layout: "carousel", look: "plain", items: noRating } },
+  // 17 sits over a photo in an app (`background`); the gallery has no photos, so it shows the panel.
+  { id: "17", label: "17 · Carousel in a panel", props: { layout: "carousel", items: noLogo } },
+];
+
+const STATES = [
+  { value: "filled", label: "Filled" },
+  { value: "loading", label: "Loading" },
+  { value: "empty", label: "Empty" },
+];
+
+export default function TestimonialsDemo() {
+  const [variant, setVariant] = useState("03");
+  const [state, setState] = useState("filled");
+  const [asks, setAsks] = useState(0);
+  const v = VARIANTS.find((x) => x.id === variant) ?? VARIANTS[0];
+  const props = { ...v.props };
+  // 06 and 13 are one quote: the "single" layout.
+  if (v.id === "06" || v.id === "13") props.layout = "single";
+  if (v.id === "13") props.look = "card";
+  if (state === "empty") props.items = [];
+  // An action on every variant's empty state, so there is a way forward.
+  const onReview = () => setAsks((n) => n + 1);
+  if (props.action) props.action = { ...props.action, onClick: onReview };
+  else if (state === "empty") props.action = { label: "Ask a customer", icon: "send", onClick: onReview };
+
+  return (
+    <div className="grid gap-2">
+      <div className="flex flex-wrap items-end gap-3 px-4 pt-4 sm:px-6">
+        <Field id="t-variant" label="Variant" className="w-full sm:w-72">
+          <Select id="t-variant" value={variant} onChange={(e) => setVariant(e.target.value)} options={VARIANTS.map((x) => ({ value: x.id, label: x.label }))} />
+        </Field>
+        <ToggleGroup aria-label="State" items={STATES} value={state} onChange={setState} />
+        {asks ? <p className="pb-3 text-sm text-muted-foreground">Review asked for {asks}×</p> : null}
+      </div>
+      <Testimonials key={`${variant}-${state}`} {...props} loading={state === "loading"} />
+    </div>
+  );
+}

package/registry/blocks/testimonials/index.js

@@ -0,0 +1,4 @@
+// The Testimonials block — `makersclaw add testimonials`. Fixed: compose
+// it through its props (README.md beside this file); a section it cannot
+// be is your own component in components/.
+export { Testimonials } from "./testimonials";