Concept approval

import { ConceptApproval } from "@/components/blocks/concept-approval";

import { ConceptApproval } from "@/components/blocks/concept-approval";
import { AnnotatedCanvas } from "@/components/custom/annotated-canvas";

// Your own stage: pass children instead of files. The block keeps the rail,
// the round/option tabs, compare, full screen and the footer.
export function ReviewPage() {
  return (
    <ConceptApproval
      items={deliverables}
      rounds={rounds}
      options={[{ id: "c1", label: "Concept 1", badge: { label: "Chosen", tone: "open" } }]}
      statuses={[{ label: "2 unresolved", tone: "changes" }]}
      meta="Sent Mar 4"
    >
      <AnnotatedCanvas src={src} pins={pins} onPlace={place} />
    </ConceptApproval>
  );
}

ConceptApproval                  — review workspace for a project's concepts
├── rail (items, 1+)             — Item list: thumbnail, name, status dot + line
└── card                         — card-surface
    ├── toolbar
    │   ├── rounds               — Tabs (segment), a status dot per round
    │   ├── toolbar slot
    │   ├── Compare rounds       — Button, pressed while comparing
    │   └── Full screen          — icon Button → Dialog with the stage
    ├── stage
    │   ├── options (2+)         — Tabs (segment) above the artwork, optional xxs Badge
    │   └── children, or the active option's file
    └── footer
        ├── statuses + meta + note — left; badge first
        └── comments link + actions[] — right

While comparing, pass the shared <CompareSlider> (components/ui/compare-slider)
as the stage: before/after split by a draggable line, arrow keys step it.