@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/blocks/footer/site-footer.tsx

@@ -0,0 +1,212 @@
+import { useState } from 'react'
+import { ArrowRightIcon, CheckIcon, MailIcon, ShieldCheckIcon } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { Button } from '../../components/button'
+import type { SiteFooterProps } from './footer-types'
+
+const defaultColumns = [
+  {
+    title: 'Storefront',
+    links: [
+      { href: '#products', label: 'All Products' },
+      { href: '#deals', label: 'Flash Deals', badge: 'Hot' },
+      { href: '#bestsellers', label: 'Best Sellers' },
+      { href: '#new', label: 'New Arrivals' },
+      { href: '#compare', label: 'Product Compare' },
+    ],
+  },
+  {
+    title: 'Customer Care',
+    links: [
+      { href: '#tracking', label: 'Delivery Tracker' },
+      { href: '#returns', label: 'Returns & Refunds' },
+      { href: '#faq', label: 'Help & FAQ' },
+      { href: '#shipping', label: 'Shipping Information' },
+      { href: '#contact', label: 'Contact Support' },
+    ],
+  },
+  {
+    title: 'Editorial & Story',
+    links: [
+      { href: '#blog', label: 'Journal & Stories' },
+      { href: '#guides', label: 'Buying Guides' },
+      { href: '#authors', label: 'Design Team' },
+      { href: '#community', label: 'Community Forum' },
+    ],
+  },
+  {
+    title: 'Legal & Security',
+    links: [
+      { href: '#privacy', label: 'Privacy Policy' },
+      { href: '#terms', label: 'Terms of Service' },
+      { href: '#security', label: 'Security & Trust' },
+      { href: '#compliance', label: 'Compliance' },
+    ],
+  },
+]
+
+export function SiteFooter({
+  brand,
+  className,
+  columns = defaultColumns,
+  copyright = `© ${new Date().getFullYear()} ${brand.title}. All rights reserved.`,
+  newsletter = {
+    description: 'Get weekly design insights, product drops, and exclusive flash sale access.',
+    placeholder: 'Enter your email address...',
+    title: 'Subscribe to our newsletter',
+  },
+  paymentBadges = ['Visa', 'Mastercard', 'Amex', 'PayPal', 'Apple Pay', 'Stripe'],
+  socialLinks = [],
+}: SiteFooterProps) {
+  const [email, setEmail] = useState('')
+  const [isSubscribed, setIsSubscribed] = useState(false)
+
+  const handleSubscribe = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!email.includes('@')) return
+    newsletter.onSubscribe?.(email)
+    setIsSubscribed(true)
+  }
+
+  return (
+    <footer
+      className={cn('w-full border-t border-border/80 bg-background text-foreground', className)}
+    >
+      {/* 1. Newsletter Strip */}
+      {newsletter && (
+        <div className="border-b border-border/60 bg-muted/20 px-6 py-10">
+          <div className="mx-auto flex max-w-7xl flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
+            <div className="space-y-1">
+              <h3 className="text-base font-bold tracking-tight text-foreground flex items-center gap-2">
+                <MailIcon className="size-4 text-primary" />
+                <span>{newsletter.title}</span>
+              </h3>
+              {newsletter.description && (
+                <p className="text-xs text-muted-foreground">{newsletter.description}</p>
+              )}
+            </div>
+
+            <form onSubmit={handleSubscribe} className="flex max-w-md w-full gap-2">
+              <input
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder={newsletter.placeholder ?? 'Enter your email...'}
+                className="flex-1 rounded-xl border border-input bg-background px-3.5 py-2 text-xs placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+              />
+              <Button
+                size="sm"
+                type="submit"
+                className="gap-1.5 text-xs px-4"
+                disabled={isSubscribed}
+              >
+                {isSubscribed ? (
+                  <>
+                    <CheckIcon className="size-3.5" />
+                    <span>Subscribed</span>
+                  </>
+                ) : (
+                  <>
+                    <span>Join</span>
+                    <ArrowRightIcon className="size-3.5" />
+                  </>
+                )}
+              </Button>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* 2. Main Columns Navigation */}
+      <div className="mx-auto max-w-7xl px-6 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-10">
+          {/* Brand Column */}
+          <div className="md:col-span-4 space-y-4">
+            <div className="flex items-center gap-2.5">
+              {brand.logo}
+              <span className="text-lg font-bold tracking-tight text-foreground">
+                {brand.title}
+              </span>
+            </div>
+
+            {brand.description && (
+              <p className="text-xs text-muted-foreground leading-relaxed max-w-sm">
+                {brand.description}
+              </p>
+            )}
+
+            <div className="flex items-center gap-2 text-xs text-muted-foreground pt-1">
+              <ShieldCheckIcon className="size-4 text-emerald-600" />
+              <span>Certified secure checkout & buyer protection</span>
+            </div>
+
+            {socialLinks.length > 0 && (
+              <div className="flex items-center gap-2 pt-2">
+                {socialLinks.map((s) => (
+                  <a
+                    key={s.label}
+                    href={s.href}
+                    aria-label={s.label}
+                    className="flex size-8 items-center justify-center rounded-lg border border-border/80 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+                  >
+                    {s.icon}
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Links Columns */}
+          <div className="md:col-span-8 grid grid-cols-2 sm:grid-cols-4 gap-8">
+            {columns.map((col) => (
+              <div key={col.title} className="space-y-3">
+                <h4 className="text-xs font-bold uppercase tracking-wider text-foreground">
+                  {col.title}
+                </h4>
+                <ul className="space-y-2 text-xs">
+                  {col.links.map((link) => (
+                    <li key={link.label}>
+                      <a
+                        href={link.href}
+                        className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-colors"
+                      >
+                        <span>{link.label}</span>
+                        {link.badge && (
+                          <span className="rounded bg-primary/10 px-1 py-0.2 text-[9px] font-bold text-primary">
+                            {link.badge}
+                          </span>
+                        )}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* 3. Bottom Legal & Payment Badges Strip */}
+      <div className="border-t border-border/60 bg-muted/10 px-6 py-6">
+        <div className="mx-auto flex max-w-7xl flex-col sm:flex-row items-center justify-between gap-4 text-xs text-muted-foreground">
+          <p>{copyright}</p>
+
+          {/* Payment Badges */}
+          {paymentBadges.length > 0 && (
+            <div className="flex flex-wrap items-center gap-1.5">
+              {paymentBadges.map((badge) => (
+                <span
+                  key={badge}
+                  className="rounded-md border border-border/60 bg-background px-2 py-0.5 font-mono text-[10px] font-bold text-muted-foreground"
+                >
+                  {badge}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </footer>
+  )
+}

package/src/blocks/form/form-block.tsx

@@ -0,0 +1,113 @@
+import type { ReactNode } from 'react'
+import { ArrowLeft, Save, X } from 'lucide-react'
+import { Button } from '../../components/button'
+import { Switch } from '../../components/switch'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/tabs'
+
+export type FormBlockTab = {
+  content: ReactNode
+  id: string
+  label: string
+}
+
+export type FormBlockProps = {
+  active: boolean
+  activeLabel?: string
+  defaultTab?: string
+  description: string
+  onActiveChange: (active: boolean) => void
+  onBack: () => void
+  onCancel: () => void
+  onSubmit: () => void
+  submitLabel?: string
+  tabs: readonly FormBlockTab[]
+  title: string
+}
+
+const actionMotion =
+  'transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md motion-reduce:transform-none motion-reduce:transition-none'
+
+export function FormBlock({
+  active,
+  activeLabel = 'Active',
+  defaultTab,
+  description,
+  onActiveChange,
+  onBack,
+  onCancel,
+  onSubmit,
+  submitLabel = 'Save',
+  tabs,
+  title,
+}: FormBlockProps) {
+  const firstTab = defaultTab ?? tabs[0]?.id
+
+  return (
+    <section className="w-full">
+      <form
+        className="grid gap-3"
+        onSubmit={(event) => {
+          event.preventDefault()
+          onSubmit()
+        }}
+      >
+        <header className="flex min-h-12 flex-wrap items-center justify-between gap-2 rounded-md border bg-card px-4 py-2 shadow-sm">
+          <div className="flex min-w-0 items-center gap-3">
+            <Button
+              className={actionMotion}
+              onClick={onBack}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              <ArrowLeft /> Back
+            </Button>
+            <h1 className="truncate text-sm font-semibold">{title}</h1>
+            <p className="sr-only">{description}</p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              className={actionMotion}
+              onClick={onCancel}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              <X /> Cancel
+            </Button>
+            <Button className={actionMotion} size="sm" type="submit">
+              <Save /> {submitLabel}
+            </Button>
+          </div>
+        </header>
+
+        <div className="overflow-hidden rounded-md border bg-card shadow-sm">
+          <Tabs className="gap-0" defaultValue={firstTab}>
+            <TabsList
+              className="h-auto w-full justify-start overflow-x-auto rounded-none border-b bg-transparent px-4 pt-2"
+              variant="line"
+            >
+              {tabs.map((tab) => (
+                <TabsTrigger className="min-h-10 flex-none px-3" key={tab.id} value={tab.id}>
+                  {tab.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+            {tabs.map((tab) => (
+              <TabsContent className="p-4" key={tab.id} value={tab.id}>
+                {tab.content}
+              </TabsContent>
+            ))}
+          </Tabs>
+
+          <div className="px-4 pb-4">
+            <label className="flex min-h-12 items-center justify-between gap-4 rounded-md border border-success/35 bg-success/10 px-4 py-2.5 transition-colors hover:bg-success/15">
+              <span className="font-medium">{activeLabel}</span>
+              <Switch aria-label={activeLabel} checked={active} onCheckedChange={onActiveChange} />
+            </label>
+          </div>
+        </div>
+      </form>
+    </section>
+  )
+}

package/src/blocks/form/form-lookup-field.tsx

@@ -0,0 +1,60 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from '../../components/combobox'
+import { Field, FieldLabel } from '../../components/field'
+
+export type FormLookupOption = {
+  label: string
+  value: string
+}
+
+export function FormLookupField({
+  label,
+  onValueChange,
+  options,
+  placeholder,
+  required = false,
+  value,
+}: {
+  label: string
+  onValueChange: (value: string) => void
+  options: readonly FormLookupOption[]
+  placeholder: string
+  required?: boolean
+  value: string
+}) {
+  return (
+    <Field>
+      <FieldLabel>
+        {label}
+        {required ? <span className="text-destructive">*</span> : null}
+      </FieldLabel>
+      <Combobox
+        items={options.map((option) => option.value)}
+        onValueChange={(nextValue) => onValueChange(nextValue ?? '')}
+        value={value}
+      >
+        <ComboboxInput className="h-10" placeholder={placeholder} showClear />
+        <ComboboxContent>
+          <ComboboxEmpty>No matching option.</ComboboxEmpty>
+          <ComboboxList>
+            {options.map((option) => (
+              <ComboboxItem
+                className="min-h-10 cursor-pointer px-3"
+                key={option.value}
+                value={option.value}
+              >
+                {option.label}
+              </ComboboxItem>
+            ))}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+    </Field>
+  )
+}

package/src/blocks/form/index.ts

@@ -0,0 +1,4 @@
+export { FormBlock } from './form-block'
+export type { FormBlockProps, FormBlockTab } from './form-block'
+export { FormLookupField } from './form-lookup-field'
+export type { FormLookupOption } from './form-lookup-field'

package/src/blocks/handover-stack/handover-stack.tsx

@@ -0,0 +1,41 @@
+import { ClipboardCheckIcon, Layers3Icon, XIcon } from "lucide-react";
+
+import { Badge } from "@devxcrew/react-ui/components/badge";
+import { Button } from "@devxcrew/react-ui/components/button";
+import { ScrollArea } from "@devxcrew/react-ui/components/scroll-area";
+import { Separator } from "@devxcrew/react-ui/components/separator";
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@devxcrew/react-ui/components/sheet";
+
+export type HandoverStackItem = {
+  content: string;
+  id: string;
+};
+
+export type HandoverStackProps = {
+  items: readonly HandoverStackItem[];
+  onConsolidate: () => void;
+  onOpenChange: (open: boolean) => void;
+  onRemove: (id: string) => void;
+  open: boolean;
+  working?: boolean;
+};
+
+export function HandoverStack({ items, onConsolidate, onOpenChange, onRemove, open, working }: HandoverStackProps) {
+  return <Sheet open={open} onOpenChange={onOpenChange}>
+    <SheetContent className="gap-0 p-0 sm:max-w-md" side="right">
+      <SheetHeader className="border-b pr-12">
+        <div className="flex items-center gap-2"><SheetTitle>Handover stack</SheetTitle><Badge variant="secondary">{items.length}</Badge></div>
+        <SheetDescription>Selected Zetro responses, ready to consolidate into one revised idea.</SheetDescription>
+      </SheetHeader>
+      <ScrollArea className="min-h-0 flex-1"><div className="flex flex-col p-4">
+        {items.length ? items.map((item, index) => <section key={item.id} className="flex flex-col gap-2 py-3 first:pt-0 last:pb-0">
+          <div className="flex items-center gap-2"><Layers3Icon className="size-3.5 text-muted-foreground" /><p className="flex-1 text-sm font-medium">Response {index + 1}</p><Button aria-label={`Remove response ${index + 1}`} size="icon-xs" variant="ghost" onClick={() => onRemove(item.id)}><XIcon /></Button></div>
+          <p className="line-clamp-5 text-sm leading-6 text-muted-foreground">{item.content}</p>
+          <code className="text-xs text-muted-foreground">{item.id}</code>
+          {index < items.length - 1 ? <Separator className="mt-1" /> : null}
+        </section>) : <div className="flex min-h-40 flex-col items-center justify-center gap-2 text-center"><Layers3Icon className="size-5 text-muted-foreground" /><p className="text-sm font-medium">No responses collected</p><p className="max-w-56 text-sm text-muted-foreground">Use the stack icon below any Zetro response to collect it here.</p></div>}
+      </div></ScrollArea>
+      <SheetFooter className="border-t"><Button className="w-full" disabled={!items.length || working} onClick={onConsolidate}><ClipboardCheckIcon /> {working ? "Consolidating…" : "Consolidate revised idea"}</Button></SheetFooter>
+    </SheetContent>
+  </Sheet>;
+}

package/src/blocks/handover-stack/index.ts

@@ -0,0 +1 @@
+export { HandoverStack, type HandoverStackItem, type HandoverStackProps } from "./handover-stack";

package/src/blocks/idea-handover/idea-handover-readiness.ts

@@ -0,0 +1,41 @@
+import type { IdeaBriefDraft } from "./idea-handover-workspace";
+
+export type BriefReadinessItem = {
+  complete: boolean;
+  id: string;
+  label: string;
+};
+
+export function getBriefReadiness(brief: IdeaBriefDraft): BriefReadinessItem[] {
+  return [
+    readinessItem("title", "A clear title", brief.title),
+    readinessItem("outcome", "A defined outcome", brief.outcome),
+    readinessItem("audience", "A named audience", brief.audience),
+    readinessItem("scope", "Scope boundaries", brief.scope),
+    readinessItem("exclusions", "Explicit exclusions", brief.exclusions),
+    readinessItem("constraints", "Known constraints", brief.constraints),
+    readinessItem("risks", "Risks to consider", brief.risks),
+    readinessItem("success-signals", "Measurable success signals", brief.successSignals),
+    { complete: brief.sourceMessageIds.length > 0, id: "sources", label: "At least one source response" },
+    { complete: brief.projectScope === "all-projects" || Boolean(brief.projectReference?.trim()), id: "project", label: "A project reference when scoped" },
+  ];
+}
+
+export function isBriefReady(brief: IdeaBriefDraft): boolean {
+  return getBriefReadiness(brief).every((item) => item.complete);
+}
+
+export function parseAcceptanceCriteria(value: string): string[] {
+  return value
+    .split(/\r?\n/)
+    .map((item) => item.replace(/^\s*(?:[-*]|\d+[.)])\s*/, "").trim())
+    .filter(Boolean);
+}
+
+export function serializeAcceptanceCriteria(items: readonly string[]): string {
+  return items.map((item) => item.trim()).filter(Boolean).join("\n");
+}
+
+function readinessItem(id: string, label: string, value: string): BriefReadinessItem {
+  return { complete: Boolean(value.trim()), id, label };
+}

package/src/blocks/idea-handover/idea-handover-workspace.tsx

@@ -0,0 +1,150 @@
+import { useState, type ReactNode } from "react";
+import { ArchiveIcon, CheckCircle2Icon, CheckIcon, ChevronLeftIcon, CircleIcon, ClipboardIcon, EyeIcon, FileCheck2Icon, ListTodoIcon, NetworkIcon, PlusIcon, RefreshCwIcon, SendIcon, Trash2Icon, WandSparklesIcon } from "lucide-react";
+import { Button } from "@devxcrew/react-ui/components/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@devxcrew/react-ui/components/card";
+import { Input } from "@devxcrew/react-ui/components/input";
+import { Label } from "@devxcrew/react-ui/components/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@devxcrew/react-ui/components/select";
+import { Textarea } from "@devxcrew/react-ui/components/textarea";
+import { getBriefReadiness, isBriefReady, parseAcceptanceCriteria, serializeAcceptanceCriteria } from "./idea-handover-readiness";
+
+export type IdeaStage = "explore" | "compare" | "revise" | "final";
+
+export type IdeaBriefDraft = {
+  audience: string;
+  constraints: string;
+  exclusions: string;
+  outcome: string;
+  projectReference: string | null;
+  projectScope: "project" | "all-projects";
+  risks: string;
+  scope: string;
+  sourceMessageIds: string[];
+  status: "draft" | "final";
+  successSignals: string;
+  title: string;
+};
+
+export type IdeaHandoverTask = {
+  acceptanceCriteria?: string;
+  deliveredAt?: string | null;
+  deliveryError?: string | null;
+  id: string;
+  projectReference: string | null;
+  projectScope: "project" | "all-projects";
+  summary?: string;
+  status: string;
+  title: string;
+  zunoHandoffId?: string | null;
+};
+
+export type IdeaTaskDraft = {
+  acceptanceCriteria: string;
+  priority: "low" | "medium" | "high";
+  summary: string;
+  title: string;
+};
+
+export type IdeaHandoverSource = {
+  content: string;
+  id: string;
+};
+
+export type IdeaHandoverWorkspaceProps = {
+  brief: IdeaBriefDraft;
+  currentStage: IdeaStage;
+  handoffPackagePreview: string;
+  onAutoFillBrief: () => void;
+  onBack: () => void;
+  onArchiveConversation?: () => void;
+  onBriefChange: (brief: IdeaBriefDraft) => void;
+  onCopyHandoffPackage: () => void;
+  onCreateTask: () => void;
+  onDeliverTask: () => void;
+  onSaveBrief: (status: "draft" | "final") => void;
+  onStageChange: (stage: IdeaStage) => void;
+  saving?: boolean;
+  sources: readonly IdeaHandoverSource[];
+  task?: IdeaHandoverTask;
+  taskDraft: IdeaTaskDraft;
+  onTaskDraftChange: (taskDraft: IdeaTaskDraft) => void;
+};
+
+const stages: readonly { id: IdeaStage; label: string }[] = [
+  { id: "explore", label: "Explore" },
+  { id: "compare", label: "Compare" },
+  { id: "revise", label: "Revise" },
+  { id: "final", label: "Final brief" },
+];
+
+export function IdeaHandoverWorkspace({ brief, currentStage, handoffPackagePreview, onArchiveConversation, onAutoFillBrief, onBack, onBriefChange, onCopyHandoffPackage, onCreateTask, onDeliverTask, onSaveBrief, onStageChange, onTaskDraftChange, saving, sources, task, taskDraft }: IdeaHandoverWorkspaceProps) {
+  const update = <K extends Exclude<keyof IdeaBriefDraft, "status">>(key: K, value: IdeaBriefDraft[K]) => onBriefChange({ ...brief, [key]: value, status: "draft" });
+  const updateTask = <K extends keyof IdeaTaskDraft>(key: K, value: IdeaTaskDraft[K]) => onTaskDraftChange({ ...taskDraft, [key]: value });
+  const isProjectScope = brief.projectScope === "project";
+  const readiness = getBriefReadiness(brief);
+  const canPrepareTask = brief.status === "final" && isBriefReady(brief) && taskDraft.title.trim() && taskDraft.summary.trim() && parseAcceptanceCriteria(taskDraft.acceptanceCriteria).length > 0;
+
+  return <section className="flex size-full min-h-0 flex-col bg-background">
+    <header className="flex shrink-0 items-center gap-3 border-b px-4 py-3 sm:px-6">
+      <Button size="sm" variant="ghost" onClick={onBack}><ChevronLeftIcon /> Conversation</Button>
+      <div className="min-w-0 flex-1"><h1 className="truncate text-sm font-semibold">Final brief and task handover</h1><p className="text-xs text-muted-foreground">Keep sources and project scope with the idea.</p></div>
+    </header>
+    <main className="min-h-0 flex-1 overflow-y-auto px-4 py-6 sm:px-6">
+      <div className="mx-auto flex w-full max-w-4xl flex-col gap-5">
+        <nav aria-label="Idea stages" className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+          {stages.map((stage) => <Button key={stage.id} className="justify-start" size="sm" variant={stage.id === currentStage ? "secondary" : "ghost"} onClick={() => onStageChange(stage.id)}>
+            {stage.id === "final" ? <FileCheck2Icon /> : <NetworkIcon />} {stage.label}
+          </Button>)}
+        </nav>
+        <Card size="sm"><CardHeader><CardTitle>Final brief</CardTitle><CardDescription>Save the idea with its source responses. Finalize it before creating an agent task.</CardDescription></CardHeader><CardContent className="grid gap-4">
+          <Field label="Brief title"><Input value={brief.title} onChange={(event) => update("title", event.target.value)} /></Field>
+          <Field label="Outcome"><Textarea value={brief.outcome} onChange={(event) => update("outcome", event.target.value)} /></Field>
+          <div className="grid gap-4 sm:grid-cols-2"><Field label="Audience"><Textarea value={brief.audience} onChange={(event) => update("audience", event.target.value)} /></Field><Field label="Scope"><Textarea value={brief.scope} onChange={(event) => update("scope", event.target.value)} /></Field></div>
+          <div className="grid gap-4 sm:grid-cols-2"><Field label="Exclusions"><Textarea value={brief.exclusions} onChange={(event) => update("exclusions", event.target.value)} /></Field><Field label="Constraints"><Textarea value={brief.constraints} onChange={(event) => update("constraints", event.target.value)} /></Field></div>
+          <div className="grid gap-4 sm:grid-cols-2"><Field label="Risks"><Textarea value={brief.risks} onChange={(event) => update("risks", event.target.value)} /></Field><Field label="Success signals"><Textarea value={brief.successSignals} onChange={(event) => update("successSignals", event.target.value)} /></Field></div>
+          <div className="grid gap-4 sm:grid-cols-2"><Field label="Project scope"><Select value={brief.projectScope} onValueChange={(value) => update("projectScope", value as IdeaBriefDraft["projectScope"])}><SelectTrigger className="w-full"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="project">A referred project</SelectItem><SelectItem value="all-projects">Common to all projects</SelectItem></SelectContent></Select></Field>{isProjectScope ? <Field label="Referred project"><Input placeholder="Project name or reference" value={brief.projectReference ?? ""} onChange={(event) => update("projectReference", event.target.value || null)} /></Field> : <p className="self-end text-sm text-muted-foreground">This idea is common to all projects.</p>}</div>
+          <SourcePicker selected={brief.sourceMessageIds} sources={sources} onChange={(sourceMessageIds) => update("sourceMessageIds", sourceMessageIds)} />
+          <BriefReadiness items={readiness} />
+          <div className="flex flex-wrap items-center justify-between gap-2"><Button disabled={saving || !brief.sourceMessageIds.length} variant="ghost" onClick={onAutoFillBrief}><WandSparklesIcon /> Fill empty fields</Button><div className="flex flex-wrap gap-2"><Button disabled={saving} variant="outline" onClick={() => onSaveBrief("draft")}>Save draft</Button><Button disabled={saving || !isBriefReady(brief)} onClick={() => onSaveBrief("final")}><CheckCircle2Icon /> Finalize brief</Button></div></div>
+        </CardContent></Card>
+        <Card size="sm"><CardHeader><CardTitle>Prepared task</CardTitle><CardDescription>Prepare the handoff for Zuno. This keeps the scope and acceptance criteria but does not start a runner.</CardDescription></CardHeader><CardContent className="grid gap-4">
+          {task ? <div className="grid gap-3 rounded-md border bg-muted/40 p-3"><div className="flex flex-wrap items-center gap-3"><ListTodoIcon className="size-4 text-muted-foreground" /><div className="min-w-0 flex-1"><p className="font-medium">{task.title}</p><p className="text-xs text-muted-foreground">{task.status} · {task.projectScope === "all-projects" ? "All projects" : task.projectReference}</p></div>{task.status === "delivered" ? onArchiveConversation ? <Button size="sm" variant="outline" onClick={onArchiveConversation}><ArchiveIcon /> Archive conversation</Button> : null : <Button disabled={saving || task.status === "delivering"} size="sm" onClick={onDeliverTask}>{task.status === "failed" ? <RefreshCwIcon /> : <SendIcon />}{task.status === "failed" ? "Retry delivery" : task.status === "delivering" ? "Delivering..." : "Deliver to Zuno"}</Button>}</div>{task.deliveryError ? <p className="text-sm text-destructive" role="alert">{task.deliveryError}</p> : null}{task.status === "delivered" ? <p className="text-sm text-muted-foreground">Accepted by Zuno{task.deliveredAt ? ` on ${new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(new Date(task.deliveredAt))}` : ""}. Receipt: <code>{task.zunoHandoffId}</code></p> : null}</div> : <>
+            <div className="grid gap-4 sm:grid-cols-[minmax(0,1fr)_10rem]"><Field label="Task title"><Input value={taskDraft.title} onChange={(event) => updateTask("title", event.target.value)} /></Field><Field label="Priority"><Select value={taskDraft.priority} onValueChange={(value) => updateTask("priority", value as IdeaTaskDraft["priority"])}><SelectTrigger className="w-full"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="low">Low</SelectItem><SelectItem value="medium">Medium</SelectItem><SelectItem value="high">High</SelectItem></SelectContent></Select></Field></div>
+            <Field label="Task summary"><Textarea value={taskDraft.summary} onChange={(event) => updateTask("summary", event.target.value)} /></Field>
+            <AcceptanceCriteriaEditor value={taskDraft.acceptanceCriteria} onChange={(value) => updateTask("acceptanceCriteria", value)} />
+            <details className="overflow-hidden rounded-md border"><summary className="flex cursor-pointer list-none items-center gap-2 px-3 py-2 text-sm font-medium hover:bg-muted"><EyeIcon className="size-4 text-muted-foreground" /> Review Zuno package</summary><pre className="max-h-72 overflow-auto border-t bg-muted/30 p-3 text-xs leading-relaxed">{handoffPackagePreview}</pre></details>
+            <div className="flex flex-wrap justify-end gap-2"><Button disabled={saving || brief.status !== "final" || !isBriefReady(brief)} variant="outline" onClick={onCopyHandoffPackage}><ClipboardIcon /> Copy Zuno package</Button><Button disabled={saving || !canPrepareTask} onClick={onCreateTask}><SendIcon /> Prepare task</Button></div>
+          </>}
+        </CardContent></Card>
+      </div>
+    </main>
+  </section>;
+}
+
+function Field({ children, label }: { children: ReactNode; label: string }) {
+  return <div className="grid gap-2"><Label>{label}</Label>{children}</div>;
+}
+
+function BriefReadiness({ items }: { items: ReturnType<typeof getBriefReadiness> }) {
+  const completeCount = items.filter((item) => item.complete).length;
+  return <section aria-label="Brief readiness" className="grid gap-2 border-y py-3"><div className="flex items-center justify-between gap-3"><p className="text-sm font-medium">Brief readiness</p><p className="text-sm text-muted-foreground">{completeCount} of {items.length} complete</p></div><div className="grid gap-x-4 gap-y-2 sm:grid-cols-2">{items.map((item) => <div key={item.id} className="flex min-w-0 items-center gap-2 text-sm">{item.complete ? <CheckIcon className="size-4 shrink-0 text-emerald-600" /> : <CircleIcon className="size-4 shrink-0 text-muted-foreground" />}<span className={item.complete ? undefined : "text-muted-foreground"}>{item.label}</span></div>)}</div></section>;
+}
+
+function AcceptanceCriteriaEditor({ onChange, value }: { onChange: (value: string) => void; value: string }) {
+  const items = parseAcceptanceCriteria(value);
+  const [draft, setDraft] = useState("");
+  const updateItem = (index: number, nextValue: string) => onChange(serializeAcceptanceCriteria(items.map((item, itemIndex) => itemIndex === index ? nextValue : item)));
+  const removeItem = (index: number) => onChange(serializeAcceptanceCriteria(items.filter((_, itemIndex) => itemIndex !== index)));
+  const addItem = () => {
+    if (!draft.trim()) return;
+    onChange(serializeAcceptanceCriteria([...items, draft]));
+    setDraft("");
+  };
+
+  return <div className="grid gap-2"><Label>Acceptance criteria</Label>{items.length ? <div className="grid gap-2">{items.map((item, index) => <div key={`${index}-${items.length}`} className="flex items-center gap-2"><span className="w-6 shrink-0 text-center text-sm text-muted-foreground">{index + 1}.</span><Input aria-label={`Acceptance criterion ${index + 1}`} value={item} onChange={(event) => updateItem(index, event.target.value)} /><Button aria-label={`Remove acceptance criterion ${index + 1}`} size="icon-xs" title="Remove criterion" variant="ghost" onClick={() => removeItem(index)}><Trash2Icon /></Button></div>)}</div> : <p className="text-sm text-muted-foreground">Add observable conditions that Zuno can validate after execution.</p>}<div className="flex items-center gap-2"><span className="w-6 shrink-0 text-center text-sm text-muted-foreground">{items.length + 1}.</span><Input aria-label="New acceptance criterion" placeholder="Add a verifiable result" value={draft} onChange={(event) => setDraft(event.target.value)} onKeyDown={(event) => { if (event.key === "Enter") { event.preventDefault(); addItem(); } }} /><Button aria-label="Add acceptance criterion" disabled={!draft.trim()} size="icon-sm" title="Add criterion" variant="outline" onClick={addItem}><PlusIcon /></Button></div></div>;
+}
+
+function SourcePicker({ onChange, selected, sources }: { onChange: (ids: string[]) => void; selected: string[]; sources: readonly IdeaHandoverSource[] }) {
+  const toggle = (id: string) => onChange(selected.includes(id) ? selected.filter((item) => item !== id) : [...selected, id]);
+  return <div className="grid gap-2"><Label>Source responses</Label><div className="max-h-48 overflow-y-auto rounded-md border p-2">{sources.length ? sources.map((source) => <label key={source.id} className="flex cursor-pointer gap-2 rounded-sm p-2 text-sm hover:bg-muted"><input checked={selected.includes(source.id)} type="checkbox" onChange={() => toggle(source.id)} /><span className="min-w-0"><span className="line-clamp-2">{source.content}</span><code className="text-xs text-muted-foreground">{source.id}</code></span></label>) : <p className="p-2 text-sm text-muted-foreground">Collect or create assistant responses before finalizing the brief.</p>}</div></div>;
+}

package/src/blocks/idea-handover/index.ts

@@ -0,0 +1,4 @@
+export { IdeaHandoverWorkspace } from "./idea-handover-workspace";
+export type { IdeaBriefDraft, IdeaHandoverSource, IdeaHandoverTask, IdeaHandoverWorkspaceProps, IdeaStage, IdeaTaskDraft } from "./idea-handover-workspace";
+export { getBriefReadiness, isBriefReady, parseAcceptanceCriteria, serializeAcceptanceCriteria } from "./idea-handover-readiness";
+export type { BriefReadinessItem } from "./idea-handover-readiness";

package/src/blocks/kanban/index.ts

@@ -0,0 +1,11 @@
+export { KanbanBoard } from './kanban-board'
+export { KanbanColumn } from './kanban-column'
+export { KanbanCard } from './kanban-card'
+export type {
+  KanbanBoardProps,
+  KanbanCardItem,
+  KanbanColumnItem,
+  KanbanPriority,
+} from './kanban-types'
+export type { KanbanCardProps } from './kanban-card'
+export type { KanbanColumnProps } from './kanban-column'