File upload

npm install filepond@^4 react-filepond@^7 \
  filepond-plugin-file-validate-type \
  filepond-plugin-file-validate-size \
  filepond-plugin-image-validate-size \
  filepond-plugin-image-preview

import { FileUpload } from "@/components/blocks/file-upload-beta";

"use client";

import { FileUpload } from "@/components/blocks/file-upload-beta";

// Single component, every "variant" driven by props:
//   label / caption / error / restrictionText / showUploadedUrls
//   acceptedFileTypes / maxFileSize / maxFiles / maxTotalFileSize / allowMultiple
//   imageValidateSizeMin/MaxWidth/Height
export function Example() {
  return (
    <FileUpload
      label="Files"
      allowMultiple
      maxFiles={2}
      maxFileSize="10MB"
      acceptedFileTypes={["image/*"]}
      restrictionText="Images only"
      showUploadedUrls
    />
  );
}

What `shadcn add file-upload-beta.json` drops in for you:
- src/components/blocks/file-upload-beta.tsx          (the component)
- src/components/ui/{alert,label,field-hint}.tsx      (registry deps)
- src/app/filepond.css                                (light + dark FilePond overrides)
- src/app/api/s3-presign/route.ts                     (proxy to api.thesqd.com /v1/s3/get-presigned-upload-url)
- .env.example                                        (the env vars the route reads)
- npm: filepond, react-filepond,
       filepond-plugin-{file-validate-type,file-validate-size,image-validate-size,image-preview},
       lucide-react

Auto-injected into globals.css by the install:
- `@import "./filepond.css"` (so the FilePond style overrides kick in
  immediately — no manual CSS editing required).

What you still have to wire up by hand:
1. Copy `.env.example` → `.env.local` and set `SQUAD_API_KEY`. Without
   it the presign route 500s on every upload (browser PUTs land at the
   Squad gateway, not directly on Wasabi).

2. If this is a brand-new project and you haven't installed the theme
   yet, run that first — it provides the tokens, `cn` helper, and the
   shared dependencies every Squad component needs:
     npx shadcn@latest add https://sdk-components.thesqd.com/r/theme.json

/* FilePond — light + dark overrides (https://pqina.nl/filepond/docs/api/style/) */

/* Strip filepond's per-slice panel bg so the root can carry the unified surface */
.filepond--panel > .filepond--panel-root {
  background-color: transparent !important;
}

/* Light mode — match Tabs track (bg-[#fbfafc] / border-neutral-200).
   Use the literal hex, not var(--color-neutral-200): Tailwind v4 only emits
   that variable when something in the project actually uses the neutral-200
   utility, so referencing it by name silently breaks in lean apps. */
.filepond--root {
  background-color: #fbfafc !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
}
.filepond--drop-label,
.filepond--drop-label label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}
.filepond--drop-label .filepond--label-sub,
.filepond--drop-label label .filepond--label-sub {
  display: inline-block;
  margin-top: -2px;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: oklch(0.55 0 0) !important;
}
.dark .filepond--label-sub {
  color: oklch(0.7 0 0);
}

/* Dark mode — match dark Tabs track (white/5 surface, white/12 border) */
.dark .filepond--root {
  background-color: oklch(1 0 0 / 3.6%) !important;
  border: 1px solid oklch(1 0 0 / 12%) !important;
}
.dark .filepond--drop-label,
.dark .filepond--drop-label label {
  color: #e5e5e5 !important;
}
.dark .filepond--label-action {
  text-decoration-color: #71717a !important;
}
.dark .filepond--item-panel {
  background-color: #242428 !important;
}
.dark .filepond--item[data-filepond-item-state*="processing-complete"] .filepond--item-panel {
  background-color: #166534 !important;
}
.dark .filepond--item[data-filepond-item-state*="error"] .filepond--item-panel,
.dark .filepond--item[data-filepond-item-state*="invalid"] .filepond--item-panel {
  background-color: #7f1d1d !important;
}
.dark .filepond--file {
  color: #e5e5e5 !important;
}
.dark .filepond--credits {
  color: #71717a !important;
}

/* All @import rules MUST sit above any @plugin / @theme / non-import rule.
   Standard CSS forbids @import after other declarations, and Tailwind v4 +
   Turbopack will silently drop the file when the order is wrong — leaving
   FilePond rendering with its default light-gray panel. */
@import "tailwindcss";
@import "tw-animate-css";        /* if you use it */
@import "./filepond.css";        /* must come BEFORE any @plugin directive */
@plugin "@tailwindcss/typography";

FilePond                          (the upload widget — registers plugins via registerPlugin)
├── server.process               (your own XHR/fetch — call load(serverId) on success)
├── acceptedFileTypes            (filepond-plugin-file-validate-type)
├── maxFileSize / maxTotalFileSize (filepond-plugin-file-validate-size)
├── maxFiles                     (built into core)
└── imageValidateSize{Min,Max}{Width,Height}  (filepond-plugin-image-validate-size)

Pair with a server route handler (e.g. src/app/api/s3-presign/route.ts)
that proxies to the Squad presign API. The browser then PUTs each file
body straight to Wasabi using the returned upload_url + required_headers,
and FilePond stores public_url as each file's serverId.