makersclaw 0.2.0 → 0.3.1

package/registry/blocks/faq/demo.jsx

@@ -0,0 +1,89 @@
+"use client";
+
+// The Faq in every variant — the gallery's and the smoke test's surface.
+// Not installed into apps: `makersclaw add faq` lays index.js and
+// faq.jsx only. Pick a variant and a state; the call to action only
+// counts its presses here.
+import { useState } from "react";
+import { Field, Select, ToggleGroup } from "../components/ui";
+import { Faq } from "../components/blocks/faq";
+
+const QUESTIONS = [
+  {
+    id: "trial",
+    icon: "clock",
+    question: "How long is the free trial?",
+    answer: "Fourteen days, with every feature on. We ask for a card only when you choose a plan, and nothing is charged before day fifteen.",
+  },
+  {
+    id: "switch",
+    icon: "repeat",
+    question: "Can I move my data from another tool?",
+    answer: "Yes. Import a CSV from any spreadsheet, or connect your old CRM and we copy contacts, deals and notes across in one pass.",
+  },
+  {
+    id: "seats",
+    icon: "users",
+    question: "Do I pay per person?",
+    answer: "Plans include five seats. Each extra seat is $8 a month, billed only for the days it was in use.",
+  },
+  {
+    id: "cancel",
+    icon: "log-out",
+    question: "What happens if I cancel?",
+    answer: "Your workspace stays readable for 90 days, and you can export everything as CSV at any time. After that it is deleted for good.",
+  },
+  {
+    id: "security",
+    icon: "shield-check",
+    question: "Where is my data stored?",
+    answer: "In the EU (Frankfurt) by default, or the US on request. Everything is encrypted at rest and in transit, and backed up daily.",
+  },
+  {
+    id: "support",
+    icon: "life-buoy",
+    question: "How do I reach a person?",
+    answer: "Write to the chat in the corner or email support. A person replies within an hour on weekdays, 9 to 6 CET.",
+  },
+];
+
+const CTA = { title: "Still have a question?", body: "Tell us what you are trying to do and we will reply within the hour.", label: "Send us a note", icon: "mail" };
+
+const VARIANTS = [
+  { id: "list-01", label: "Accordion · one open at a time", props: { layout: "accordion", description: "The things people ask before they sign up.", defaultOpen: "trial" } },
+  { id: "grid-01", label: "Grid · two columns with icons", props: { layout: "grid", columns: 2, description: "Short answers to the usual questions." } },
+  { id: "cards-icons-01", label: "Grid · icon cards and a request", props: { layout: "grid", description: "Short answers to the usual questions.", cta: CTA } },
+  { id: "grid-cta-01", label: "Grid · plain cards and a CTA", props: { layout: "grid", description: "Short answers to the usual questions.", cta: CTA, plainIcons: true } },
+  { id: "left-title-01", label: "Grid · title on the left", props: { layout: "grid", titlePosition: "start", look: "plain", description: "Short answers to the usual questions.", plainIcons: true } },
+  { id: "simple-01", label: "List · every answer shown", props: { layout: "list", description: "The things people ask before they sign up.", plainIcons: true } },
+  { id: "multi", label: "Accordion · several open, title on the left", props: { layout: "accordion", type: "multiple", titlePosition: "start", kicker: "Support", cta: CTA, plainIcons: true } },
+];
+
+const STATES = [
+  { value: "filled", label: "Filled" },
+  { value: "loading", label: "Loading" },
+  { value: "empty", label: "Empty" },
+];
+
+export default function FaqDemo() {
+  const [variant, setVariant] = useState("list-01");
+  const [state, setState] = useState("filled");
+  const [asks, setAsks] = useState(0);
+  const v = VARIANTS.find((x) => x.id === variant) ?? VARIANTS[0];
+  const { plainIcons, ...props } = v.props;
+  const items = state === "empty" ? [] : plainIcons ? QUESTIONS.map(({ icon, ...q }) => q) : QUESTIONS;
+  const cta = props.cta ? { ...props.cta, onClick: () => setAsks((n) => n + 1) } : undefined;
+
+  return (
+    <div className="grid gap-2">
+      <div className="flex flex-wrap items-end gap-3 px-4 pt-4 sm:px-6">
+        <Field id="faq-variant" label="Variant" className="w-full sm:w-80">
+          <Select id="faq-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">Note asked for {asks}×</p> : null}
+      </div>
+      <Faq key={`${variant}-${state}`} {...props} cta={cta} items={items} loading={state === "loading"} />
+    </div>
+  );
+}

package/registry/blocks/faq/faq.jsx

@@ -0,0 +1,220 @@
+"use client";
+
+import { Accordion, Button, Empty, Icon, Kicker, Skeleton, cx } from "../../ui";
+
+// Faq — a marketing section of questions and answers. Three layouts over
+// the same rows: an accordion (one open at a time, or several), a grid
+// of cards (optionally with an icon each), and a plain list with every
+// answer shown. The title sits above or beside them, and an optional
+// "need more help?" call to action closes the section.
+//
+//   <Faq title="Questions, answered" items={faqs}
+//        cta={{ title: "Still stuck?", label: "Email support", href: "/contact" }} />
+//
+// README.md beside this file lists every prop.
+
+const COLUMNS = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+};
+
+const keyOf = (item, i) => String(item.id ?? i);
+
+function Header({ kicker, title, description, center }) {
+  if (!kicker && !title && !description) return null;
+  return (
+    <div className={cx("grid content-start gap-3", center ? "mx-auto max-w-2xl justify-items-center text-center" : "max-w-xl")}>
+      {kicker ? <Kicker>{kicker}</Kicker> : null}
+      {title ? <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">{title}</h2> : null}
+      {description ? <p className="text-pretty text-base text-muted-foreground sm:text-lg">{description}</p> : null}
+    </div>
+  );
+}
+
+function Answer({ children }) {
+  return <div className="text-pretty text-base leading-relaxed text-muted-foreground [&_a]:text-primary [&_a]:underline [&_p+p]:mt-3">{children}</div>;
+}
+
+function IconBadge({ name }) {
+  if (!name) return null;
+  return (
+    <span className="grid size-12 shrink-0 place-items-center rounded-lg bg-primary text-primary-foreground">
+      <Icon name={name} size={22} />
+    </span>
+  );
+}
+
+function Cta({ cta, center }) {
+  if (!cta) return null;
+  return (
+    <div className={cx("grid gap-3", center ? "justify-items-center text-center" : "justify-items-start")}>
+      {cta.title ? <h3 className="text-2xl font-semibold tracking-tight">{cta.title}</h3> : null}
+      {cta.body ? <p className="max-w-xl text-pretty text-base text-muted-foreground sm:text-lg">{cta.body}</p> : null}
+      {cta.label ? (
+        <Button variant="primary" href={cta.href} onClick={cta.onClick} icon={cta.icon} className="mt-2">
+          {cta.label}
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
+function Loading({ layout, columns }) {
+  if (layout === "grid")
+    return (
+      <div aria-busy="true" aria-label="Loading questions" className={cx("grid gap-6", COLUMNS[columns] ?? COLUMNS[3])}>
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="grid gap-3 rounded-lg border border-border bg-card p-6">
+            <Skeleton className="w-3/4" />
+            <Skeleton className="w-full" />
+            <Skeleton className="w-5/6" />
+          </div>
+        ))}
+      </div>
+    );
+  return (
+    <div aria-busy="true" aria-label="Loading questions" className="grid gap-5">
+      {[0, 1, 2, 3].map((i) => (
+        <div key={i} className="grid gap-3 border-b border-border pb-5">
+          <Skeleton className={i % 2 ? "w-1/2" : "w-2/3"} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Grid({ items, columns, look }) {
+  return (
+    <div className={cx("grid gap-6", COLUMNS[columns] ?? COLUMNS[3])}>
+      {items.map((item, i) => (
+        <article
+          key={keyOf(item, i)}
+          id={item.anchor}
+          className={cx("grid min-w-0 content-start", look === "plain" ? "" : "rounded-lg border border-border bg-card text-card-foreground")}
+        >
+          <div className={cx("grid gap-5 border-b border-border pb-4", look === "plain" ? "" : "px-6 pt-6")}>
+            <IconBadge name={item.icon} />
+            <h3 className="text-pretty text-lg font-semibold leading-snug">{item.question}</h3>
+          </div>
+          <div className={cx("pt-4", look === "plain" ? "" : "px-6 pb-6")}>
+            <Answer>{item.answer}</Answer>
+          </div>
+        </article>
+      ))}
+    </div>
+  );
+}
+
+function List({ items }) {
+  return (
+    <dl className="grid gap-2">
+      {items.map((item, i) => (
+        <div key={keyOf(item, i)} id={item.anchor} className="grid min-w-0">
+          <dt className="flex items-center gap-3 border-b border-border py-5 text-lg font-semibold">
+            {item.icon ? <Icon name={item.icon} className="shrink-0 text-muted-foreground" /> : null}
+            <span className="min-w-0 text-pretty">{item.question}</span>
+          </dt>
+          <dd className="py-5">
+            <Answer>{item.answer}</Answer>
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+function Folding({ items, type, defaultOpen, value, onOpenChange, label }) {
+  const multiple = type === "multiple";
+  return (
+    <Accordion
+      aria-label={label}
+      type={multiple ? "multiple" : "single"}
+      defaultValue={defaultOpen ?? (multiple ? [] : null)}
+      value={value}
+      onChange={onOpenChange}
+      items={items.map((item, i) => ({
+        key: keyOf(item, i),
+        title: (
+          <span className="flex items-center gap-3 py-2 text-base font-semibold sm:text-lg">
+            {item.icon ? <Icon name={item.icon} className="shrink-0 text-muted-foreground" /> : null}
+            <span className="min-w-0 text-pretty">{item.question}</span>
+          </span>
+        ),
+        content: <Answer>{item.answer}</Answer>,
+      }))}
+    />
+  );
+}
+
+export function Faq({
+  items,
+  layout = "accordion",
+  kicker,
+  title = "Frequently asked questions",
+  description,
+  titlePosition = "top",
+  columns,
+  look = "card",
+  type = "single",
+  defaultOpen,
+  open,
+  onOpenChange,
+  cta,
+  loading = false,
+  empty,
+  label,
+  className,
+}) {
+  const list = (items ?? []).filter((it) => it && it.question);
+  const side = titlePosition === "start";
+  const cols = columns ?? (side ? 2 : 3);
+  const narrow = !side && layout !== "grid";
+
+  let body;
+  if (loading) body = <Loading layout={layout} columns={cols} />;
+  else if (list.length === 0)
+    body = (
+      <Empty
+        icon="message-circle"
+        title={empty?.title ?? "No questions yet"}
+        body={empty?.body ?? "Answers to what people ask most will show here."}
+      />
+    );
+  else if (layout === "grid") body = <Grid items={list} columns={cols} look={look} />;
+  else if (layout === "list") body = <List items={list} />;
+  else
+    body = (
+      <Folding
+        items={list}
+        type={type}
+        defaultOpen={defaultOpen}
+        value={open}
+        onOpenChange={onOpenChange}
+        label={typeof title === "string" ? title : "Questions"}
+      />
+    );
+
+  const header = <Header kicker={kicker} title={title} description={description} center={!side} />;
+  return (
+    <section aria-label={label ?? (typeof title === "string" ? title : "Frequently asked questions")} className={cx("px-4 py-16 sm:px-6 sm:py-20", className)}>
+      <div className={cx("mx-auto grid w-full gap-12 sm:gap-16", narrow ? "max-w-3xl" : "max-w-6xl")}>
+        {side ? (
+          <div className="grid gap-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] lg:gap-12">
+            <div className="grid content-start gap-8">
+              {header}
+              <Cta cta={cta} />
+            </div>
+            <div className="min-w-0">{body}</div>
+          </div>
+        ) : (
+          <>
+            {header}
+            <div className="min-w-0">{body}</div>
+            <Cta cta={cta} center />
+          </>
+        )}
+      </div>
+    </section>
+  );
+}

package/registry/blocks/faq/index.js

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

package/registry/blocks/file-upload/README.md

@@ -0,0 +1,138 @@
+# FileUpload
+
+Files chosen or dropped, each one uploaded through your `onUpload` as
+soon as it lands. Every file shows its bar while it runs (with Cancel),
+the reason and a Retry when it fails, and a Remove once it is up. Files
+the picker refuses (wrong type, too big, too many) are named in a notice.
+The upload itself is yours: the block never fetches.
+
+```jsx
+import { FileUpload } from "../components/blocks/file-upload";   // a Makersclaw app ("./blocks/file-upload" from components/)
+import { FileUpload } from "@/components/makersclaw/blocks/file-upload";   // a shadcn project
+```
+
+A client component. The picker is the kit's `FileDrop` (or `FileInput`
+with `picker="button"`), so the browser's own file dialog opens and the
+keyboard works: Tab to the zone, Enter or Space.
+
+## The data
+
+What the block tells you about a file (in `onChange` and `onRemove`):
+`{ id, name, size, type, url?, ...whatever your onUpload returned }`.
+Never the `File` and never the block's own state.
+
+## Props
+
+- `onUpload(file, { onProgress, signal })` — upload one `File`. Call
+  `onProgress(percent)` (0–100) as it goes; without it the bar sweeps.
+  Watch `signal` (an AbortSignal): it aborts when the person cancels or
+  replaces the file, and pass it to `fetch`. Return `{ ok: true, url?,
+  ...anything }` or `{ ok: false, error }`; a throw counts as failed and
+  its message is shown. Without `onUpload` the block is a picker only:
+  files count as added at once.
+- `variant` — how the files show, default `"list"`:
+  - `list` — the drop zone, then a card per file (name, size, state).
+  - `single` — one file at a time in a filled panel; a new pick replaces
+    it (and aborts its upload). An import, a contract.
+  - `sections` — a one-row drop zone, then the files grouped under
+    "Ready", "Uploading" (failed ones stay here with Retry) and
+    "Finished".
+  - `preview` — cards with the picture itself for images. `columns={2}`
+    lays them two across from 640px.
+  - `avatar` — one picture of a person or a company: the current one (or
+    the initials), Upload picture, Remove. Takes `value` (the current
+    URL) and `name`; `onChange(url | null)`.
+- `onRemove(file)` — delete an uploaded file from storage; return
+  `{ ok }` like `onUpload`. The row shows a spinner, and on failure stays
+  with the reason. Without it Remove only drops the row. Removing a file
+  that is still queued, uploading or failed never calls it.
+- `onChange(files)` — the uploaded files, every time that list changes.
+  Save their ids or URLs with the record here.
+- `defaultFiles` — what shows at first: files already uploaded
+  (`[{ id, name, size, type, url? }]`). An entry that is `{ id?, file }`
+  (a `File` you got from a paste or a drop elsewhere on the page) starts
+  uploading on mount.
+- `accept` — as the input's: `"image/*"`, `".csv,.xlsx"`. The picker
+  greys out the rest; a drop of the rest is refused and named.
+- `multiple` — default `true` (`false` for `single` and `avatar`).
+- `maxSize` — bytes, per file. Bigger files are refused and named.
+- `maxFiles` — how many in all; the zone says so when it is full.
+- `autoUpload` — default `true`. `false` holds new files as "Ready to
+  upload" with Clear and an "Upload N files" button, for a form that
+  sends its attachments on submit.
+- `picker` — `"drop"` (default: the drop zone) · `"button"` (a
+  `FileInput` button and the hint beside it, for a tight form row).
+- `label` — the zone's line (default "Drop files here or browse"); in
+  `avatar`, the name beside the picture ("Profile picture").
+- `hint` — the muted line: default built from `accept` and `maxSize`
+  ("Images · up to 4 MB").
+- `buttonLabel` — `picker="button"`'s text, default "Add files".
+- `uploadLabel` — the queue's submit text, or `avatar`'s button text.
+- `columns` — `1` (default) or `2`, for `list` and `preview`.
+- `disabled` — no picking, no retry, no remove.
+- `aria-label` — the drop zone's name when `label` is not enough.
+- `className` — layout around it. Never colour.
+
+`formatSize(bytes)` ("3.1 MB") and `fileIcon(type, name)` (the kit icon
+for a file) are exported too, for your own file rows.
+
+## Example
+
+```jsx
+// components/DealFiles.jsx — client
+"use client";
+import { FileUpload } from "./blocks/file-upload";
+
+// Your storage route answers a PUT with { id, url }. XMLHttpRequest, not
+// fetch, because only it reports upload progress.
+function put(file, { onProgress, signal }) {
+  return new Promise((resolve) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("PUT", `/api/files?name=${encodeURIComponent(file.name)}`);
+    xhr.upload.onprogress = (e) => e.lengthComputable && onProgress((e.loaded / e.total) * 100);
+    xhr.onload = () =>
+      xhr.status < 300 ? resolve({ ok: true, ...JSON.parse(xhr.responseText) }) : resolve({ ok: false, error: `Upload failed (${xhr.status}).` });
+    xhr.onerror = () => resolve({ ok: false, error: "The connection dropped. Try again." });
+    signal.addEventListener("abort", () => xhr.abort());
+    xhr.send(file);
+  });
+}
+
+export default function DealFiles({ deal, onSaveFiles }) {
+  return (
+    <FileUpload
+      defaultFiles={deal.files}
+      onUpload={put}
+      onRemove={(f) => fetch(`/api/files/${f.id}`, { method: "DELETE" }).then((r) => ({ ok: r.ok }))}
+      onChange={(files) => onSaveFiles(files.map((f) => ({ id: f.id, name: f.name, size: f.size, url: f.url })))}
+      maxSize={50 * 1024 * 1024}
+    />
+  );
+}
+```
+
+One spreadsheet to import, and a profile picture:
+
+```jsx
+<FileUpload variant="single" accept=".csv,.xlsx" maxSize={10 * 1024 * 1024} onUpload={put} onChange={([f]) => setImport(f ?? null)} />
+
+<FileUpload variant="avatar" name={me.name} value={me.avatarUrl} onUpload={put} onChange={(url) => saveProfile({ avatar_url: url })} />
+```
+
+## What it will not do
+
+- Store anything: `onUpload` is yours (a storage bucket, a signed URL).
+- Crop or resize a picture, or read a spreadsheet's rows: do that in
+  `onUpload` or after `onChange`.
+- Reorder files, or keep a list you control from outside: `defaultFiles`
+  is where it starts; remount it (a `key`) to start again.
+- Show a chat message's attachments: that is the chat block's composer.
+
+A file picker it cannot be is your own component in `components/`,
+built on the kit's `FileInput` or `FileDrop` — not an edit to this
+block. Its files are fixed: `npm run check` refuses a change, and
+`makersclaw add file-upload` restores them.
+
+## Credits
+
+Ported from blocks.so (https://blocks.so, file-upload 01, 03–06, MIT) and Creative Tim UI (https://github.com/creativetimofficial/ui, modals-05 and account-avatar-upload-01, MIT), rewritten on the Makersclaw kit.

package/registry/blocks/file-upload/block.json

@@ -0,0 +1,10 @@
+{
+  "name": "file-upload",
+  "title": "FileUpload",
+  "description": "Files chosen or dropped, each uploaded through your async onUpload(file, { onProgress, signal }) with a progress bar, cancel while it runs, a retry when it fails and a remove once done. Variants: a list of file cards, one file at a time, Uploading/Finished sections, image thumbnails (one or two columns), and a profile picture.",
+  "useWhen": "A form or page takes files the app stores: attachments on a record, a CSV to import, product photos, a logo, a profile picture. Not for showing files already stored with no way to add (a table or list), and not for a chat message's attachments (the chat block's composer has those).",
+  "tags": ["file", "upload", "dropzone", "drag", "drop", "attachment", "progress", "image", "photo", "avatar", "profile picture", "csv", "import", "retry"],
+  "exports": ["FileUpload", "formatSize", "fileIcon"],
+  "files": ["index.js", "file-upload.jsx"],
+  "requires": []
+}

package/registry/blocks/file-upload/demo.jsx

@@ -0,0 +1,204 @@
+"use client";
+
+// FileUpload with a pretend uploader in memory — the gallery's and the
+// smoke test's surface. Not installed into apps: `makersclaw add
+// file-upload` lays index.js and file-upload.jsx only.
+import { useEffect, useRef, useState } from "react";
+import { Button, Card, Field, Input, Notice, Select, Switch } from "../components/ui";
+import { FileUpload } from "../components/blocks/file-upload";
+
+const MB = 1024 * 1024;
+
+const VARIANTS = [
+  { value: "list", label: "List — file cards" },
+  { value: "single", label: "Single — one file" },
+  { value: "sections", label: "Sections — uploading / finished" },
+  { value: "preview", label: "Preview — thumbnails" },
+  { value: "grid", label: "Preview — two columns" },
+  { value: "queue", label: "Button picker — upload on submit" },
+  { value: "avatar", label: "Avatar — profile picture" },
+];
+
+// A grey placeholder picture, so the thumbnails have something to show: a
+// real PNG (a landscape, or a round portrait), not SVG markup, which an
+// app's check refuses in its code.
+const LANDSCAPE_PNG = "iVBORw0KGgoAAAANSUhEUgAAAKAAAAB4CAAAAABQyaazAAABnElEQVR42u3Y223EMAxE0em/j1uJ+0gteSKbYB3bkofryYL8H/EIkABKegkvNbCBDWxgAxvYwAY2sIENbGADs4DLrRKBy++KAy7LmFBX+/aEuty3I9T1vm2hAnybwgYe8W0JG9jABjawgQ38P8AeFp5/HsyfqPPfJPmvuvx3cf7PQn8e/SjCgUA0EB4h1DlfvVAnfeVCnfVVCw1AEoHwKKEMvlKhHL5KoSy+QqE8vjqhTL4yoQ9ICBAeK5TPNyncicnomxLuxeT0TQixAsEt3E/J6xsUcgGQqfUsQPAKMQPBKzyYkd93TIgZCF7h4YgqfLvCgYRKfDvCkUQVkPHVTgDBKcQOBKdwMKAy33rD4R2pzrfWcXxHKvTdd8QPBKNw5lAUAxlbaxwINuHkqVWx77snFUCwCacvvsp9H03nL77qfW9NqQByUT0NEDKEivMdA0KKUHm+A0DIESrQlw9kGwhJQkX6toCQJVSm708gpAkV6ssHsgYkHAiBQsX67oAQKVSu71OoYF8+kBuQcCDEChXt+wISXO9AwoFk1ytk7oEIFbJZugAAAABJRU5ErkJggg== iVBORw0KGgoAAAANSUhEUgAAAKAAAAB4CAAAAABQyaazAAAA5ElEQVR42u3awRGDMBBD0e2/HtXjWnJnEsLYoNWYrwI87wgr1QhPAQQIECBAgAABAgQIECBAgAAB9gN1TBRQ35MC1O8kAHWebqD+pxOoa2kDSs8Ly+FbEZaDt0Isk29aWC7frHBXoOQSls83Jyyjb0q4JVAyCncESk7hhkDJKtwPKHmFAN1AySwECBAgQIAAAQIECJBPfoD8uHM8ygJywOSI3g+M70nymybKxHVgfF+c37iP+M3CyF995O9mRvzy6AJx9fkXrN9OiHc8/ZIF5oMBCBAgQIAAAQIECBAgQIAAAQbnA5oGvOFZY0eXAAAAAElFTkSuQmCC";
+const PORTRAIT_PNG = "";
+function picture(name, shape) {
+  const bytes = Uint8Array.from(atob(shape === "circle" ? PORTRAIT_PNG : LANDSCAPE_PNG), (c) => c.charCodeAt(0));
+  return new File([bytes], name, { type: "image/png" });
+}
+
+function blob(name, bytes, type) {
+  return new File([new Uint8Array(bytes)], name, { type });
+}
+
+// Files "handed over" on mount so every state shows without a drop: one
+// of them fails once, so Retry has something to do.
+const HANDED = {
+  list: () => [
+    blob("q3-pipeline.csv", 184_000, "text/csv"),
+    blob("vendor-contracts.zip", 6.2 * MB, "application/zip"),
+    blob("kickoff-notes.docx", 42_000, "application/vnd.openxmlformats-officedocument.wordprocessingml.document"),
+  ],
+  single: () => [blob("customers-import.csv", 3.1 * MB, "text/csv")],
+  sections: () => [picture("storefront-hero.png"), picture("team-offsite.png", "circle"), picture("vendor-contracts.png")],
+  preview: () => [picture("storefront-hero.png"), picture("vendor-contracts.png", "circle")],
+  grid: () => [picture("shelf-oak-front.png"), picture("shelf-oak-side.png", "circle"), picture("vendor-contracts.png")],
+  queue: () => [],
+};
+
+const DONE = {
+  list: [{ id: "d1", name: "brand-guidelines.pdf", size: 2.4 * MB, type: "application/pdf" }],
+  single: [],
+  sections: [{ id: "d2", name: "logo-v3-final.png", size: 88_000, type: "image/png" }],
+  preview: [],
+  grid: [],
+  queue: [],
+};
+
+export default function FileUploadDemo() {
+  const [variant, setVariant] = useState("list");
+  const [seed, setSeed] = useState(0);
+  const [failNext, setFailNext] = useState(false);
+  const [saved, setSaved] = useState(null);
+  const failOnce = useRef(new Set());
+  const failRef = useRef(failNext);
+  failRef.current = failNext;
+
+  // Hand the samples over once the page is in the browser (File is not
+  // on the server).
+  function rerun() {
+    failOnce.current = new Set(["vendor-contracts.zip", "vendor-contracts.png"]);
+    setSeed((s) => s + 1);
+  }
+  useEffect(rerun, [variant]);
+
+  function upload(file, { onProgress, signal }) {
+    const slow = file.size > MB ? 7 : 16;
+    return new Promise((resolve) => {
+      let p = 0;
+      const t = setInterval(() => {
+        if (signal.aborted) {
+          clearInterval(t);
+          resolve({ ok: false, error: "Cancelled." });
+          return;
+        }
+        p += slow + Math.random() * 8;
+        // Decided here, not at the start, so an upload that was aborted
+        // (a cancel, React's dev double mount) does not use the failure up.
+        if (p > 58 && (failOnce.current.has(file.name) || failRef.current)) {
+          clearInterval(t);
+          if (!failOnce.current.delete(file.name)) {
+            failRef.current = false;
+            setFailNext(false);
+          }
+          resolve({ ok: false, error: "The connection dropped at 60%. Try again." });
+        } else if (p >= 100) {
+          clearInterval(t);
+          onProgress(100);
+          resolve({ ok: true, id: `f_${Math.random().toString(36).slice(2, 8)}` });
+        } else onProgress(p);
+      }, 260);
+    });
+  }
+
+  async function remove(file) {
+    await new Promise((r) => setTimeout(r, 500));
+    return { ok: true, file };
+  }
+
+  const handed = seed > 0 ? (HANDED[variant]?.() ?? []).map((file, i) => ({ id: `s${seed}-${i}`, file })) : [];
+  const defaults = [...(DONE[variant] ?? []), ...handed];
+  const common = {
+    onUpload: upload,
+    onRemove: remove,
+    onChange: (files) => setSaved(files.length),
+    defaultFiles: defaults,
+  };
+
+  let body;
+  if (variant === "list") {
+    body = (
+      <Card title="Share files with Northwind" description="Everything here goes to the client's folder." titleSize="lg">
+        <div className="grid gap-4">
+          <Field id="fu-folder" label="Folder name">
+            <Input id="fu-folder" defaultValue="Q3 planning" />
+          </Field>
+          <FileUpload {...common} maxSize={50 * MB} hint="Any file type · up to 50 MB each" />
+        </div>
+      </Card>
+    );
+  } else if (variant === "single") {
+    body = (
+      <Card title="Import customers" description="One spreadsheet, a row per customer." titleSize="lg">
+        <FileUpload {...common} variant="single" accept=".csv,.xlsx,.xls" maxSize={10 * MB} />
+      </Card>
+    );
+  } else if (variant === "sections") {
+    body = (
+      <div className="mx-auto w-full max-w-sm">
+        <FileUpload {...common} variant="sections" accept="image/png,image/jpeg,image/gif,image/svg+xml" maxSize={10 * MB} label="Drop images here or browse" />
+      </div>
+    );
+  } else if (variant === "preview" || variant === "grid") {
+    body = (
+      <Card
+        title={variant === "grid" ? "Product photos" : "Cover images"}
+        description={variant === "grid" ? "The first photo is the one buyers see." : "Shown on the project's page and in search."}
+        titleSize="lg"
+      >
+        <FileUpload {...common} variant="preview" columns={variant === "grid" ? 2 : 1} accept="image/*" maxSize={4 * MB} maxFiles={6} />
+      </Card>
+    );
+  } else if (variant === "queue") {
+    body = (
+      <Card title="Expense report" description="Attach the receipts, then send them in one go." titleSize="lg">
+        <div className="grid gap-4">
+          <Field id="fu-trip" label="Trip">
+            <Input id="fu-trip" defaultValue="Lisbon customer visits" />
+          </Field>
+          <FileUpload {...common} picker="button" buttonLabel="Attach receipts" autoUpload={false} accept="image/*,.pdf" maxSize={8 * MB} />
+        </div>
+      </Card>
+    );
+  } else {
+    body = (
+      <Card title="Your profile" titleSize="lg">
+        <div className="grid gap-4">
+          <FileUpload
+            variant="avatar"
+            name="Maya Okafor"
+            onUpload={upload}
+            onRemove={() => remove(null)}
+            maxSize={2 * MB}
+            hint="Square PNG or JPG, at least 400 × 400, up to 2 MB"
+          />
+          <Notice title="A good picture">A clear, recent photo of your face, on a plain background, helps teammates find you.</Notice>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="grid gap-4">
+      <div className="flex flex-wrap items-end gap-x-4 gap-y-2">
+        <Field id="fu-variant" label="Variant" className="w-full sm:w-72">
+          <Select id="fu-variant" value={variant} onChange={(e) => setVariant(e.target.value)} options={VARIANTS} />
+        </Field>
+        <Switch id="fu-fail" checked={failNext} onChange={(e) => setFailNext(e.target.checked)} label="Fail the next upload" />
+        <Button variant="quiet" size="sm" icon="refresh" onClick={rerun}>
+          Run the samples again
+        </Button>
+      </div>
+      <div key={`${variant}-${seed}`} className="mx-auto w-full max-w-xl">
+        {body}
+      </div>
+      {saved !== null && variant !== "avatar" ? (
+        <p className="text-center text-xs text-muted-foreground" aria-live="polite">
+          onChange: {saved} {saved === 1 ? "file" : "files"} uploaded
+        </p>
+      ) : null}
+    </div>
+  );
+}