@actuate-media/cms-admin 0.9.0 → 0.11.0

package/src/components/SEOPanel.tsx

@@ -438,10 +438,10 @@ function Section({
   badge?: React.ReactNode
 }) {
   return (
-    <div className="border border-[var(--border)] rounded-lg overflow-hidden">
+    <div className="overflow-hidden rounded-lg border border-[var(--border)]">
       <button
         onClick={() => onToggle(id)}
-        className="flex items-center justify-between w-full px-4 py-2.5 text-left text-sm font-medium text-[var(--foreground)] hover:bg-[var(--muted)] transition-colors"
+        className="flex w-full items-center justify-between px-4 py-2.5 text-left text-sm font-medium text-[var(--foreground)] transition-colors hover:bg-[var(--muted)]"
       >
         <span className="flex items-center gap-2">
           {icon}
@@ -454,7 +454,7 @@ function Section({
           <ChevronDown className="h-4 w-4 text-[var(--muted-foreground)]" />
         )}
       </button>
-      {expanded && <div className="px-4 pb-4 pt-1">{children}</div>}
+      {expanded && <div className="px-4 pt-1 pb-4">{children}</div>}
     </div>
   )
 }
@@ -472,9 +472,9 @@ function ToggleSwitch({
 }) {
   return (
     <div className="flex items-center justify-between gap-3">
-      <div className="flex-1 min-w-0">
+      <div className="min-w-0 flex-1">
         <label className="text-sm font-medium text-[var(--foreground)]">{label}</label>
-        <p className="text-xs text-[var(--muted-foreground)] mt-0.5">{description}</p>
+        <p className="mt-0.5 text-xs text-[var(--muted-foreground)]">{description}</p>
       </div>
       <button
         type="button"
@@ -484,7 +484,7 @@ function ToggleSwitch({
         className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full transition-colors ${checked ? 'bg-[var(--primary)]' : 'bg-[var(--muted)]'}`}
       >
         <span
-          className={`pointer-events-none block h-5 w-5 rounded-full bg-white shadow-sm transition-transform mt-0.5 ${checked ? 'translate-x-[22px]' : 'translate-x-0.5'}`}
+          className={`pointer-events-none mt-0.5 block h-5 w-5 rounded-full bg-white shadow-sm transition-transform ${checked ? 'translate-x-[22px]' : 'translate-x-0.5'}`}
         />
       </button>
     </div>
@@ -510,18 +510,18 @@ function InputField({
 }) {
   return (
     <div>
-      <label className="block text-xs font-medium text-[var(--muted-foreground)] mb-1">
+      <label className="mb-1 block text-xs font-medium text-[var(--muted-foreground)]">
         {label}
       </label>
       <input
         type={type}
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="w-full px-3 py-1.5 text-sm border border-[var(--border)] rounded-lg bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] placeholder:text-[var(--muted-foreground)]"
+        className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-1.5 text-sm text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:ring-2 focus:ring-[var(--primary)] focus:outline-none"
         placeholder={placeholder}
       />
       {charCount !== undefined && charTarget && (
-        <p className="text-xs mt-1 text-[var(--muted-foreground)]">
+        <p className="mt-1 text-xs text-[var(--muted-foreground)]">
           {charCount} chars {charTarget}
         </p>
       )}
@@ -548,18 +548,18 @@ function TextareaField({
 }) {
   return (
     <div>
-      <label className="block text-xs font-medium text-[var(--muted-foreground)] mb-1">
+      <label className="mb-1 block text-xs font-medium text-[var(--muted-foreground)]">
         {label}
       </label>
       <textarea
         value={value}
         onChange={(e) => onChange(e.target.value)}
         rows={rows}
-        className="w-full px-3 py-1.5 text-sm border border-[var(--border)] rounded-lg bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] resize-none placeholder:text-[var(--muted-foreground)]"
+        className="w-full resize-none rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-1.5 text-sm text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:ring-2 focus:ring-[var(--primary)] focus:outline-none"
         placeholder={placeholder}
       />
       {charCount !== undefined && charTarget && (
-        <p className="text-xs mt-1 text-[var(--muted-foreground)]">
+        <p className="mt-1 text-xs text-[var(--muted-foreground)]">
           {charCount} chars {charTarget}
         </p>
       )}
@@ -622,24 +622,24 @@ export function SEOPanel({
   return (
     <div className="rounded-lg border border-[var(--border)] bg-[var(--card)]">
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--border)]">
-        <h3 className="font-semibold text-[var(--foreground)] flex items-center gap-2 text-sm">
-          <Search className="w-4 h-4" />
+      <div className="flex items-center justify-between border-b border-[var(--border)] px-4 py-3">
+        <h3 className="flex items-center gap-2 text-sm font-semibold text-[var(--foreground)]">
+          <Search className="h-4 w-4" />
           SEO
         </h3>
         <button
           onClick={() => update({ metaTitle: title, ogTitle: '', ogDescription: '' })}
-          className="text-xs text-[var(--primary)] hover:opacity-80 flex items-center gap-1"
+          className="flex items-center gap-1 text-xs text-[var(--primary)] hover:opacity-80"
         >
-          <RefreshCw className="w-3 h-3" />
+          <RefreshCw className="h-3 w-3" />
           Reset
         </button>
       </div>
 
       {/* Score */}
-      <div className="flex items-center gap-4 px-4 py-3 border-b border-[var(--border)]">
+      <div className="flex items-center gap-4 border-b border-[var(--border)] px-4 py-3">
         <ScoreRing score={score} />
-        <div className="text-xs text-[var(--muted-foreground)] space-y-0.5">
+        <div className="space-y-0.5 text-xs text-[var(--muted-foreground)]">
           <div className="flex items-center gap-1.5">
             <CheckCircle2 className="h-3 w-3 text-green-500" /> {goodCount} passed
           </div>
@@ -653,7 +653,7 @@ export function SEOPanel({
       </div>
 
       {/* Sections */}
-      <div className="p-3 space-y-2">
+      <div className="space-y-2 p-3">
         {/* SEO Analysis */}
         <Section
           id="analysis"
@@ -672,7 +672,7 @@ export function SEOPanel({
               <div key={c.id} className="flex items-start gap-2 py-1">
                 <StatusDot status={c.status} />
                 <div className="min-w-0">
-                  <p className="text-sm text-[var(--foreground)] leading-snug">{c.label}</p>
+                  <p className="text-sm leading-snug text-[var(--foreground)]">{c.label}</p>
                   <p className="text-xs text-[var(--muted-foreground)]">{c.detail}</p>
                 </div>
               </div>
@@ -719,8 +719,8 @@ export function SEOPanel({
             <span
               className={
                 readability.passiveEstimate > 15
-                  ? 'text-amber-500 font-medium'
-                  : 'text-green-500 font-medium'
+                  ? 'font-medium text-amber-500'
+                  : 'font-medium text-green-500'
               }
             >
               {readability.passiveEstimate}%
@@ -781,7 +781,7 @@ export function SEOPanel({
             <div>
               <label
                 id="robots-policy-label"
-                className="mb-1 block text-xs font-medium text-muted-foreground"
+                className="text-muted-foreground mb-1 block text-xs font-medium"
               >
                 Robots Policy
               </label>
@@ -794,21 +794,21 @@ export function SEOPanel({
               >
                 <Select.Trigger
                   aria-labelledby="robots-policy-label"
-                  className="flex w-full items-center justify-between rounded-lg border border-border bg-background px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+                  className="border-border bg-background text-foreground focus:ring-primary flex w-full items-center justify-between rounded-lg border px-3 py-1.5 text-sm focus:ring-2 focus:outline-none"
                 >
                   <Select.Value />
                   <Select.Icon>
-                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                    <ChevronDown className="text-muted-foreground h-4 w-4" />
                   </Select.Icon>
                 </Select.Trigger>
                 <Select.Portal>
-                  <Select.Content className="z-50 overflow-hidden rounded-lg border border-border bg-card shadow-md">
+                  <Select.Content className="border-border bg-card z-50 overflow-hidden rounded-lg border shadow-md">
                     <Select.Viewport className="p-1">
                       {ROBOTS_POLICY_OPTIONS.map((option) => (
                         <Select.Item
                           key={option.value}
                           value={option.value}
-                          className="relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-8 pr-3 text-sm text-foreground outline-none hover:bg-muted focus:bg-muted"
+                          className="text-foreground hover:bg-muted focus:bg-muted relative flex cursor-pointer items-center rounded-md py-1.5 pr-3 pl-8 text-sm outline-none select-none"
                         >
                           <Select.ItemIndicator className="absolute left-2 inline-flex items-center">
                             <Check className="h-4 w-4" />
@@ -820,7 +820,7 @@ export function SEOPanel({
                   </Select.Content>
                 </Select.Portal>
               </Select.Root>
-              <p className="mt-1 text-xs text-muted-foreground">
+              <p className="text-muted-foreground mt-1 text-xs">
                 Use inheritance for most pages. Override only when a page needs different
                 index/follow behavior.
               </p>
@@ -836,14 +836,14 @@ export function SEOPanel({
           expanded={expandedSections.includes('preview')}
           onToggle={toggleSection}
         >
-          <div className="rounded-lg border border-[var(--border)] p-3 bg-[var(--background)]">
-            <div className="text-sm text-blue-600 hover:underline cursor-pointer line-clamp-1">
+          <div className="rounded-lg border border-[var(--border)] bg-[var(--background)] p-3">
+            <div className="line-clamp-1 cursor-pointer text-sm text-blue-600 hover:underline">
               {metaTitle || title || 'Page Title'}
             </div>
-            <div className="text-xs text-green-700 mt-1 truncate">
+            <div className="mt-1 truncate text-xs text-green-700">
               {siteUrl}/{slug}
             </div>
-            <div className="text-sm text-[var(--muted-foreground)] mt-1 line-clamp-2">
+            <div className="mt-1 line-clamp-2 text-sm text-[var(--muted-foreground)]">
               {metaDesc ||
                 'Add a meta description to see how this page will appear in search results.'}
             </div>
@@ -880,8 +880,8 @@ export function SEOPanel({
               type="url"
             />
 
-            <div className="border-t border-[var(--border)] pt-3 mt-3">
-              <p className="text-xs font-medium text-[var(--muted-foreground)] mb-2">
+            <div className="mt-3 border-t border-[var(--border)] pt-3">
+              <p className="mb-2 text-xs font-medium text-[var(--muted-foreground)]">
                 Twitter / X Overrides
               </p>
               <div className="space-y-3">
@@ -910,31 +910,31 @@ export function SEOPanel({
 
             {/* Social preview card */}
             <div className="mt-3">
-              <p className="text-xs font-medium text-[var(--muted-foreground)] mb-2">
+              <p className="mb-2 text-xs font-medium text-[var(--muted-foreground)]">
                 Social Preview
               </p>
-              <div className="rounded-lg border border-[var(--border)] overflow-hidden bg-[var(--muted)]">
+              <div className="overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--muted)]">
                 {seoData.ogImage ? (
-                  <div className="aspect-video bg-[var(--muted)] flex items-center justify-center overflow-hidden">
+                  <div className="flex aspect-video items-center justify-center overflow-hidden bg-[var(--muted)]">
                     <img
                       src={seoData.ogImage}
                       alt="OG preview"
-                      className="w-full h-full object-cover"
+                      className="h-full w-full object-cover"
                     />
                   </div>
                 ) : (
-                  <div className="aspect-video bg-[var(--muted)] flex items-center justify-center text-[var(--muted-foreground)] text-sm">
+                  <div className="flex aspect-video items-center justify-center bg-[var(--muted)] text-sm text-[var(--muted-foreground)]">
                     No OG image set
                   </div>
                 )}
                 <div className="p-3">
-                  <div className="text-sm font-medium text-[var(--foreground)] line-clamp-1">
+                  <div className="line-clamp-1 text-sm font-medium text-[var(--foreground)]">
                     {displayTitle}
                   </div>
-                  <div className="text-xs text-[var(--muted-foreground)] mt-1 line-clamp-2">
+                  <div className="mt-1 line-clamp-2 text-xs text-[var(--muted-foreground)]">
                     {displayDesc.slice(0, 100)}
                   </div>
-                  <div className="text-xs text-[var(--muted-foreground)] mt-1 truncate">
+                  <div className="mt-1 truncate text-xs text-[var(--muted-foreground)]">
                     {siteUrl}
                   </div>
                 </div>
@@ -959,19 +959,19 @@ export function SEOPanel({
               onChange={(v) => update({ isCornerstone: v })}
             />
             {seoData.isCornerstone && (
-              <div className="flex items-center gap-1.5 text-xs text-amber-600 bg-amber-50 rounded-md px-2.5 py-1.5">
+              <div className="flex items-center gap-1.5 rounded-md bg-amber-50 px-2.5 py-1.5 text-xs text-amber-600">
                 <Star className="h-3.5 w-3.5" />
                 Cornerstone content is held to stricter SEO standards
               </div>
             )}
             <div>
-              <label className="block text-xs font-medium text-[var(--muted-foreground)] mb-1">
+              <label className="mb-1 block text-xs font-medium text-[var(--muted-foreground)]">
                 Schema Type
               </label>
               <select
                 value={seoData.schemaType ?? 'Article'}
                 onChange={(e) => update({ schemaType: e.target.value })}
-                className="w-full px-3 py-1.5 text-sm border border-[var(--border)] rounded-lg bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
+                className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-1.5 text-sm text-[var(--foreground)] focus:ring-2 focus:ring-[var(--primary)] focus:outline-none"
               >
                 {SCHEMA_TYPES.map((t) => (
                   <option key={t} value={t}>

package/src/components/SEOPerformance.tsx

@@ -27,7 +27,7 @@ function ScoreBadge({ score }: { score: number }) {
   const bg = score >= 80 ? 'bg-green-50' : score >= 60 ? 'bg-amber-50' : 'bg-red-50'
   return (
     <span
-      className={`inline-flex items-center justify-center w-9 h-9 rounded-full text-sm font-semibold ${color} ${bg}`}
+      className={`inline-flex h-9 w-9 items-center justify-center rounded-full text-sm font-semibold ${color} ${bg}`}
     >
       {score}
     </span>
@@ -53,10 +53,10 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
   const visible = topContent.slice(page * perPage, (page + 1) * perPage)
 
   return (
-    <div className="bg-white rounded-lg border border-gray-200">
-      <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+    <div className="rounded-lg border border-gray-200 bg-white">
+      <div className="flex items-center justify-between border-b border-gray-200 p-4">
         <div className="flex items-center gap-2">
-          <Search className="w-4 h-4 text-gray-500" />
+          <Search className="h-4 w-4 text-gray-500" />
           <h2 className="text-sm font-semibold text-gray-900">SEO Performance</h2>
         </div>
         {totalIssues > 0 && (
@@ -66,25 +66,25 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
         )}
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-12 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
-        <div className="lg:col-span-7 p-4">
-          <h3 className="text-sm font-medium text-gray-700 mb-3">Top Performing Content</h3>
+      <div className="grid grid-cols-1 divide-y divide-gray-200 lg:grid-cols-12 lg:divide-x lg:divide-y-0">
+        <div className="p-4 lg:col-span-7">
+          <h3 className="mb-3 text-sm font-medium text-gray-700">Top Performing Content</h3>
           <div className="space-y-2">
             {visible.map((item) => (
               <div key={item.id} className="flex items-center justify-between py-2">
-                <div className="flex-1 min-w-0 mr-3">
-                  <p className="text-sm font-medium text-gray-900 truncate">{item.title}</p>
+                <div className="mr-3 min-w-0 flex-1">
+                  <p className="truncate text-sm font-medium text-gray-900">{item.title}</p>
                   <p className="text-xs text-gray-500 capitalize">{item.collection}</p>
                 </div>
                 <ScoreBadge score={item.score} />
               </div>
             ))}
             {visible.length === 0 && (
-              <p className="text-sm text-gray-400 py-4 text-center">No published content yet</p>
+              <p className="py-4 text-center text-sm text-gray-400">No published content yet</p>
             )}
           </div>
           {topContent.length > perPage && (
-            <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-100 text-xs text-gray-500">
+            <div className="mt-3 flex items-center justify-between border-t border-gray-100 pt-3 text-xs text-gray-500">
               <span>
                 Showing {page * perPage + 1}-{Math.min((page + 1) * perPage, topContent.length)} of{' '}
                 {topContent.length}
@@ -93,9 +93,9 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
                 <button
                   onClick={() => setPage(Math.max(0, page - 1))}
                   disabled={page === 0}
-                  className="p-1 rounded hover:bg-gray-100 disabled:opacity-30"
+                  className="rounded p-1 hover:bg-gray-100 disabled:opacity-30"
                 >
-                  <ChevronLeft className="w-3.5 h-3.5" />
+                  <ChevronLeft className="h-3.5 w-3.5" />
                 </button>
                 <span>
                   Page {page + 1} of {totalPages}
@@ -103,21 +103,21 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
                 <button
                   onClick={() => setPage(Math.min(totalPages - 1, page + 1))}
                   disabled={page >= totalPages - 1}
-                  className="p-1 rounded hover:bg-gray-100 disabled:opacity-30"
+                  className="rounded p-1 hover:bg-gray-100 disabled:opacity-30"
                 >
-                  <ChevronRight className="w-3.5 h-3.5" />
+                  <ChevronRight className="h-3.5 w-3.5" />
                 </button>
               </div>
             </div>
           )}
         </div>
 
-        <div className="lg:col-span-5 p-4">
-          <h3 className="text-sm font-medium text-gray-700 mb-3">SEO Issues</h3>
+        <div className="p-4 lg:col-span-5">
+          <h3 className="mb-3 text-sm font-medium text-gray-700">SEO Issues</h3>
           <div className="space-y-3">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <FileWarning className="w-4 h-4 text-red-400" />
+                <FileWarning className="h-4 w-4 text-red-400" />
                 <span className="text-sm text-gray-700">Missing meta descriptions</span>
               </div>
               <span className="text-sm font-semibold text-gray-900">
@@ -126,7 +126,7 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
             </div>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <LinkIcon className="w-4 h-4 text-red-400" />
+                <LinkIcon className="h-4 w-4 text-red-400" />
                 <span className="text-sm text-gray-700">Broken internal links</span>
               </div>
               <span className="text-sm font-semibold text-gray-900">
@@ -135,7 +135,7 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
             </div>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <ImageOff className="w-4 h-4 text-red-400" />
+                <ImageOff className="h-4 w-4 text-red-400" />
                 <span className="text-sm text-gray-700">Missing alt text</span>
               </div>
               <span className="text-sm font-semibold text-gray-900">{issues.missingAltText}</span>
@@ -144,7 +144,7 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
           {totalIssues > 0 && (
             <button
               onClick={() => onNavigate?.('/seo')}
-              className="mt-4 text-sm text-blue-600 hover:text-blue-700 font-medium"
+              className="mt-4 text-sm font-medium text-blue-600 hover:text-blue-700"
             >
               View All Issues
             </button>

package/src/components/SchedulePublishDialog.tsx

@@ -0,0 +1,241 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Calendar, Clock, Loader2, X } from 'lucide-react'
+import { toast } from 'sonner'
+import { cmsApi } from '../lib/api.js'
+
+export interface SchedulePublishDialogProps {
+  collectionSlug: string
+  documentId: string
+  /** Existing scheduled publish time, if any. */
+  scheduledAt?: string | null
+  /** Existing scheduled unpublish time, if any. */
+  scheduledUnpublishAt?: string | null
+  open: boolean
+  onClose: () => void
+  /** Called with the updated schedule fields after a successful save. */
+  onScheduled?: (next: {
+    status: string
+    scheduledAt: string | null
+    scheduledUnpublishAt: string | null
+  }) => void
+}
+
+/**
+ * Convert a Date or ISO string to the `YYYY-MM-DDTHH:mm` shape that the
+ * `<input type="datetime-local">` element expects, in the user's local
+ * timezone (the input is timezone-naive but we present + parse it as local).
+ */
+function toLocalDateTimeInput(value: string | Date | null | undefined): string {
+  if (!value) return ''
+  const d = typeof value === 'string' ? new Date(value) : value
+  if (Number.isNaN(d.getTime())) return ''
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
+}
+
+/** Round "now + 1 hour" to the next quarter-hour for a friendly default. */
+function defaultScheduleTime(): string {
+  const d = new Date(Date.now() + 60 * 60 * 1000)
+  d.setMinutes(Math.ceil(d.getMinutes() / 15) * 15, 0, 0)
+  return toLocalDateTimeInput(d)
+}
+
+export function SchedulePublishDialog({
+  collectionSlug,
+  documentId,
+  scheduledAt,
+  scheduledUnpublishAt,
+  open,
+  onClose,
+  onScheduled,
+}: SchedulePublishDialogProps) {
+  const [publishAt, setPublishAt] = useState('')
+  const [unpublishAt, setUnpublishAt] = useState('')
+  const [includeUnpublish, setIncludeUnpublish] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [cancelling, setCancelling] = useState(false)
+
+  const hasExistingSchedule = Boolean(scheduledAt || scheduledUnpublishAt)
+
+  useEffect(() => {
+    if (!open) return
+    setPublishAt(scheduledAt ? toLocalDateTimeInput(scheduledAt) : defaultScheduleTime())
+    setUnpublishAt(scheduledUnpublishAt ? toLocalDateTimeInput(scheduledUnpublishAt) : '')
+    setIncludeUnpublish(Boolean(scheduledUnpublishAt))
+  }, [open, scheduledAt, scheduledUnpublishAt])
+
+  async function handleSave() {
+    if (!publishAt && !(includeUnpublish && unpublishAt)) {
+      toast.error('Pick a publish or unpublish time')
+      return
+    }
+
+    // datetime-local is parsed by the browser as local time; new Date() on
+    // that string respects the user's timezone and serialises to a UTC
+    // ISO string the server can compare against `Date.now()` cleanly.
+    const publishDate = publishAt ? new Date(publishAt) : null
+    const unpublishDate = includeUnpublish && unpublishAt ? new Date(unpublishAt) : null
+
+    if (publishDate && publishDate.getTime() <= Date.now()) {
+      toast.error('Publish time must be in the future')
+      return
+    }
+    if (unpublishDate && unpublishDate.getTime() <= Date.now()) {
+      toast.error('Unpublish time must be in the future')
+      return
+    }
+    if (publishDate && unpublishDate && unpublishDate <= publishDate) {
+      toast.error('Unpublish time must be after publish time')
+      return
+    }
+
+    setSaving(true)
+    const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}/schedule`, {
+      method: 'POST',
+      body: JSON.stringify({
+        scheduledAt: publishDate ? publishDate.toISOString() : null,
+        scheduledUnpublishAt: unpublishDate ? unpublishDate.toISOString() : null,
+      }),
+    })
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success(publishDate ? 'Publish scheduled' : 'Unpublish scheduled')
+    onScheduled?.({
+      status: res.data?.status ?? 'SCHEDULED',
+      scheduledAt: res.data?.scheduledAt ?? (publishDate ? publishDate.toISOString() : null),
+      scheduledUnpublishAt:
+        res.data?.scheduledUnpublishAt ?? (unpublishDate ? unpublishDate.toISOString() : null),
+    })
+    onClose()
+  }
+
+  async function handleCancelSchedule() {
+    setCancelling(true)
+    const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}/schedule`, {
+      method: 'DELETE',
+    })
+    setCancelling(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Schedule cancelled')
+    onScheduled?.({
+      status: res.data?.status ?? 'DRAFT',
+      scheduledAt: null,
+      scheduledUnpublishAt: null,
+    })
+    onClose()
+  }
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="fixed inset-0 bg-black/40" onClick={onClose} />
+      <div className="relative w-full max-w-md rounded-lg bg-white shadow-xl">
+        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
+          <div className="flex items-center gap-2">
+            <Calendar className="h-5 w-5 text-gray-600" />
+            <h2 className="text-lg font-semibold text-gray-900">Schedule publishing</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded-lg p-1.5 transition-colors hover:bg-gray-100"
+          >
+            <X className="h-5 w-5 text-gray-500" />
+          </button>
+        </div>
+
+        <div className="space-y-4 px-4 py-4">
+          <div className="space-y-1.5">
+            <label className="text-sm font-medium text-gray-700">Publish at</label>
+            <div className="relative">
+              <Clock className="pointer-events-none absolute top-2.5 left-2.5 h-4 w-4 text-gray-400" />
+              <input
+                type="datetime-local"
+                value={publishAt}
+                onChange={(e) => setPublishAt(e.target.value)}
+                min={toLocalDateTimeInput(new Date(Date.now() + 60 * 1000))}
+                className="w-full rounded-md border border-gray-300 bg-white py-2 pr-3 pl-9 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              />
+            </div>
+            <p className="text-xs text-gray-500">
+              The document will move from DRAFT to PUBLISHED at this time (your local timezone).
+            </p>
+          </div>
+
+          <label className="flex items-center gap-2 text-sm text-gray-700">
+            <input
+              type="checkbox"
+              checked={includeUnpublish}
+              onChange={(e) => setIncludeUnpublish(e.target.checked)}
+              className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+            />
+            Also schedule an unpublish
+          </label>
+
+          {includeUnpublish && (
+            <div className="space-y-1.5">
+              <label className="text-sm font-medium text-gray-700">Unpublish at</label>
+              <div className="relative">
+                <Clock className="pointer-events-none absolute top-2.5 left-2.5 h-4 w-4 text-gray-400" />
+                <input
+                  type="datetime-local"
+                  value={unpublishAt}
+                  onChange={(e) => setUnpublishAt(e.target.value)}
+                  min={publishAt || toLocalDateTimeInput(new Date(Date.now() + 60 * 1000))}
+                  className="w-full rounded-md border border-gray-300 bg-white py-2 pr-3 pl-9 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between gap-2 border-t border-gray-200 px-4 py-3">
+          {hasExistingSchedule ? (
+            <button
+              onClick={handleCancelSchedule}
+              disabled={cancelling || saving}
+              className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium text-red-700 hover:bg-red-50 disabled:opacity-50"
+            >
+              {cancelling ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <X className="h-4 w-4" />
+              )}
+              Cancel schedule
+            </button>
+          ) : (
+            <span />
+          )}
+          <div className="flex items-center gap-2">
+            <button
+              onClick={onClose}
+              className="rounded-md px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100"
+            >
+              Close
+            </button>
+            <button
+              onClick={handleSave}
+              disabled={saving || cancelling}
+              className="inline-flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+            >
+              {saving ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Calendar className="h-4 w-4" />
+              )}
+              {hasExistingSchedule ? 'Reschedule' : 'Schedule'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}