{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "social-media-post-scheduler",
  "title": "Social Media Post Scheduler",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-vue/blocks/social-media-post-scheduler/SocialMediaPostScheduler.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport {\n  Bookmark,\n  Calendar,\n  Check,\n  CheckCircle2,\n  Clock,\n  Eye,\n  Globe,\n  Heart,\n  Image as ImageIcon,\n  MessageCircle,\n  MessageSquare,\n  MoreHorizontal,\n  Repeat2,\n  Send,\n  Share2,\n  Sparkles,\n  ThumbsUp,\n  Trash2,\n  UploadCloud,\n  X,\n} from 'lucide-vue-next'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\nimport { Textarea } from '@/components/ui/textarea'\nimport { cn } from '@/lib/utils'\n\nexport interface SocialMediaPostSchedulerProps {\n  initialContent?: string\n  initialChannels?: string[]\n  initialMediaUrl?: string\n  initialDate?: string\n  initialTime?: string\n  initialAutoRepost?: boolean\n}\n\nconst props = withDefaults(defineProps<SocialMediaPostSchedulerProps>(), {\n  initialContent:\n    'Excited to announce the new component release for our open source design system! 🚀 Built with accessible keyboard ergonomics, fluid motion, and crisp token hierarchy out of the box.\\n\\n#UI #Developer #OpenSource',\n  initialChannels: () => ['twitter', 'linkedin', 'instagram', 'threads'],\n  initialMediaUrl: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1200&auto=format&fit=crop',\n  initialDate: '2026-08-25',\n  initialTime: '10:00 AM EST',\n  initialAutoRepost: true,\n})\n\n// State\nconst content = ref(props.initialContent)\nconst selectedChannels = ref<string[]>([...props.initialChannels])\nconst activeTab = ref('twitter')\nconst mediaUrl = ref<string | null>(props.initialMediaUrl)\nconst scheduledDate = ref(props.initialDate)\nconst scheduledTime = ref(props.initialTime)\nconst autoRepost = ref(props.initialAutoRepost)\nconst firstCommentThread = ref(true)\nconst isLikedInPreview = ref(false)\nconst notificationMessage = ref<string | null>(null)\nconst notificationType = ref<'success' | 'draft'>('success')\n\n// Hardcoded Author Profile Data\nconst author = {\n  name: 'Alex Morgan',\n  role: 'Staff Product Engineer',\n  headline: 'Staff Product Engineer · Building open-source UI design systems & web tools',\n  twitterHandle: '@alexmorgan_dev',\n  instagramHandle: 'alexmorgan.dev',\n  threadsHandle: 'alexmorgan',\n  avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop',\n  initials: 'AM',\n}\n\n// Media Presets\nconst sampleImages = [\n  {\n    id: 'dashboard',\n    label: 'Dashboard Preview',\n    url: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1200&auto=format&fit=crop',\n    dimensions: '1200 × 675 px · 284 KB',\n    aspect: '16:9 Landscape',\n  },\n  {\n    id: 'workspace',\n    label: 'Dev Workspace',\n    url: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1200&auto=format&fit=crop',\n    dimensions: '1200 × 800 px · 340 KB',\n    aspect: '3:2 Photo',\n  },\n  {\n    id: 'design',\n    label: 'Design Canvas',\n    url: 'https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?q=80&w=1200&auto=format&fit=crop',\n    dimensions: '1080 × 1080 px · 410 KB',\n    aspect: '1:1 Square',\n  },\n]\n\n// Suggested Hashtags\nconst suggestedHashtags = [\n  '#UI',\n  '#Developer',\n  '#OpenSource',\n  '#DesignSystem',\n  '#WebDev',\n  '#Frontend',\n  '#Tech',\n  '#SaaS',\n]\n\n// Quick Emojis\nconst quickEmojis = ['🚀', '✨', '💡', '🔥', '📊', '🧵', '🎉', '⚡', '👇', '🎯']\n\n// Recommended Time Slots\nconst timeSlots = ['09:00 AM EST', '10:00 AM EST', '01:30 PM EST', '05:00 PM EST']\n\n// Platform Specs\nconst platformLimits: Record<string, { name: string; limit: number; color: string }> = {\n  twitter: { name: 'X (Twitter)', limit: 280, color: 'text-info' },\n  threads: { name: 'Threads', limit: 500, color: 'text-foreground' },\n  instagram: { name: 'Instagram', limit: 2200, color: 'text-pink-500' },\n  linkedin: { name: 'LinkedIn', limit: 3000, color: 'text-info' },\n}\n\n// Channel Toggle Logic\nfunction toggleChannel(channelId: string) {\n  if (selectedChannels.value.includes(channelId)) {\n    if (selectedChannels.value.length > 1) {\n      selectedChannels.value = selectedChannels.value.filter((c) => c !== channelId)\n    }\n  } else {\n    selectedChannels.value.push(channelId)\n  }\n}\n\nfunction isChannelSelected(channelId: string) {\n  return selectedChannels.value.includes(channelId)\n}\n\n// Hashtag & Emoji Insertion\nfunction insertHashtag(tag: string) {\n  if (content.value.includes(tag)) return\n  if (!content.value.trim()) {\n    content.value = tag\n  } else {\n    content.value = `${content.value.trim()} ${tag}`\n  }\n}\n\nfunction insertEmoji(emoji: string) {\n  content.value = `${content.value}${emoji}`\n}\n\nfunction polishWithAi() {\n  content.value =\n    '🚀 Excited to announce our newest UI component release! Built with zero-dependency headless primitives, fluid spring physics, and full OKLCH dark mode tokens.\\n\\nExplore the interactive playground & let us know your thoughts below! 👇\\n\\n#UI #Developer #OpenSource #DesignSystem'\n}\n\nfunction setPresetImage(url: string) {\n  mediaUrl.value = url\n}\n\nfunction removeMedia() {\n  mediaUrl.value = null\n}\n\nfunction saveDraft() {\n  notificationType.value = 'draft'\n  notificationMessage.value =\n    'Post draft saved locally. All changes, media attachments, and channel targets are up to date.'\n}\n\nfunction schedulePost() {\n  notificationType.value = 'success'\n  notificationMessage.value = `Post scheduled for ${scheduledDate.value} at ${scheduledTime.value} across ${selectedChannels.value.length} connected channels!`\n}\n\nfunction dismissNotification() {\n  notificationMessage.value = null\n}\n\n// Character Limit Computed\nconst currentLength = computed(() => content.value.length)\nconst currentPlatformLimit = computed(() => platformLimits[activeTab.value]?.limit ?? 280)\nconst isOverLimit = computed(() => currentLength.value > currentPlatformLimit.value)\nconst isWarningLimit = computed(() => currentLength.value > currentPlatformLimit.value - 40 && !isOverLimit.value)\n\n// Text tokens parsing for hashtag highlighting in preview\nconst formattedContentSegments = computed(() => {\n  if (!content.value) return []\n  // Split by hashtags or newlines\n  const words = content.value.split(/(\\s+)/)\n  return words.map((word) => ({\n    text: word,\n    isHashtag: word.startsWith('#') && word.length > 1,\n    isMention: word.startsWith('@') && word.length > 1,\n  }))\n})\n</script>\n\n<template>\n  <div data-slot=\"social-media-post-scheduler\" class=\"bg-background text-foreground flex w-full flex-col gap-6\">\n    <!-- Top Global Header -->\n    <header\n      class=\"bg-card border-border flex flex-col gap-4 rounded-xl border p-5 shadow-xs sm:flex-row sm:items-center sm:justify-between\"\n    >\n      <div class=\"space-y-1\">\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg\">\n            <Calendar class=\"size-4\" />\n          </div>\n          <h1 class=\"text-foreground text-lg font-semibold tracking-tight\">Social Post Composer & Scheduler</h1>\n          <Badge variant=\"secondary\" class=\"font-mono text-xs\"> {{ selectedChannels.length }} / 4 Networks </Badge>\n        </div>\n        <p class=\"text-muted-foreground text-sm\">\n          Compose, calibrate, and orchestrate cross-platform social broadcasts with live authentic previews.\n        </p>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-2.5\">\n        <Button variant=\"outline\" size=\"sm\" @click=\"saveDraft\">\n          <Bookmark class=\"mr-1.5 size-3.5\" />\n          Save Draft\n        </Button>\n        <Button size=\"sm\" @click=\"schedulePost\">\n          <Calendar class=\"mr-1.5 size-3.5\" />\n          Schedule Post\n        </Button>\n      </div>\n    </header>\n\n    <!-- Feedback Notification Toast Banner -->\n    <div\n      v-if=\"notificationMessage\"\n      :class=\"\n        cn(\n          'flex items-center justify-between rounded-lg border p-3.5 text-sm shadow-xs transition-colors',\n          notificationType === 'success'\n            ? 'border-success/30 bg-success/10 text-success'\n            : 'bg-primary/10 border-primary/20 text-primary',\n        )\n      \"\n    >\n      <div class=\"flex flex-wrap items-center gap-2.5\">\n        <CheckCircle2 v-if=\"notificationType === 'success'\" class=\"size-4 shrink-0\" />\n        <Bookmark v-else class=\"size-4 shrink-0\" />\n        <span>{{ notificationMessage }}</span>\n      </div>\n      <button\n        type=\"button\"\n        aria-label=\"Dismiss notification\"\n        class=\"text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded p-1 focus-visible:ring-2 focus-visible:outline-none\"\n        @click=\"dismissNotification\"\n      >\n        <X class=\"size-4\" />\n      </button>\n    </div>\n\n    <!-- 2-Column Composer & Live Preview Grid -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n      <!-- Left Column: Composer, Channels, Media, Schedule Settings -->\n      <section class=\"space-y-6 lg:col-span-6\">\n        <!-- Target Channels Selection Card -->\n        <Card>\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex items-center justify-between\">\n              <CardTitle class=\"text-base font-semibold\">Publishing Channels</CardTitle>\n              <span class=\"text-muted-foreground text-xs font-medium\">Select all target feeds</span>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Toggle the target social accounts for this scheduled broadcast.\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div class=\"grid grid-cols-2 gap-2.5 sm:grid-cols-4\">\n              <!-- X (Twitter) Pill -->\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'group focus-visible:ring-ring relative flex flex-col items-start gap-1.5 rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                    isChannelSelected('twitter')\n                      ? 'border-primary bg-primary/5 ring-primary ring-1'\n                      : 'border-border bg-card hover:bg-accent/50 opacity-65',\n                  )\n                \"\n                @click=\"toggleChannel('twitter')\"\n              >\n                <div class=\"flex w-full items-center justify-between\">\n                  <div class=\"bg-foreground text-background flex size-6 items-center justify-center rounded-md\">\n                    <svg class=\"size-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                      <path\n                        d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 24.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\n                      />\n                    </svg>\n                  </div>\n                  <div\n                    :class=\"\n                      cn(\n                        'flex size-4 items-center justify-center rounded-full text-xs',\n                        isChannelSelected('twitter') ? 'bg-primary text-primary-foreground' : 'border-border border',\n                      )\n                    \"\n                  >\n                    <Check v-if=\"isChannelSelected('twitter')\" class=\"size-2.5 stroke-[3]\" />\n                  </div>\n                </div>\n                <div>\n                  <div class=\"text-xs font-semibold\">X / Twitter</div>\n                  <div class=\"text-muted-foreground text-xs\">280 chars</div>\n                </div>\n              </button>\n\n              <!-- LinkedIn Pill -->\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'group focus-visible:ring-ring relative flex flex-col items-start gap-1.5 rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                    isChannelSelected('linkedin')\n                      ? 'border-info bg-info/5 ring-1 ring-blue-600'\n                      : 'border-border bg-card hover:bg-accent/50 opacity-65',\n                  )\n                \"\n                @click=\"toggleChannel('linkedin')\"\n              >\n                <div class=\"flex w-full items-center justify-between\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md bg-[#0077B5] text-white\">\n                    <svg class=\"size-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                      <path\n                        d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.46 8.76a1.45 1.45 0 1 0 0-2.9 1.45 1.45 0 0 0 0 2.9m1.4 9.74v-8.37H5.06v8.37z\"\n                      />\n                    </svg>\n                  </div>\n                  <div\n                    :class=\"\n                      cn(\n                        'flex size-4 items-center justify-center rounded-full text-xs',\n                        isChannelSelected('linkedin') ? 'bg-info text-white' : 'border-border border',\n                      )\n                    \"\n                  >\n                    <Check v-if=\"isChannelSelected('linkedin')\" class=\"size-2.5 stroke-[3]\" />\n                  </div>\n                </div>\n                <div>\n                  <div class=\"text-xs font-semibold\">LinkedIn</div>\n                  <div class=\"text-muted-foreground text-xs\">3,000 chars</div>\n                </div>\n              </button>\n\n              <!-- Instagram Pill -->\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'group focus-visible:ring-ring relative flex flex-col items-start gap-1.5 rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                    isChannelSelected('instagram')\n                      ? 'border-pink-500 bg-pink-500/5 ring-1 ring-pink-500'\n                      : 'border-border bg-card hover:bg-accent/50 opacity-65',\n                  )\n                \"\n                @click=\"toggleChannel('instagram')\"\n              >\n                <div class=\"flex w-full items-center justify-between\">\n                  <div\n                    class=\"flex size-6 items-center justify-center rounded-md bg-gradient-to-tr from-[#f09433] via-[#dc2743] to-[#bc1888] text-white\"\n                  >\n                    <svg class=\"size-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                      <path\n                        d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\n                      />\n                    </svg>\n                  </div>\n                  <div\n                    :class=\"\n                      cn(\n                        'flex size-4 items-center justify-center rounded-full text-xs',\n                        isChannelSelected('instagram') ? 'bg-pink-500 text-white' : 'border-border border',\n                      )\n                    \"\n                  >\n                    <Check v-if=\"isChannelSelected('instagram')\" class=\"size-2.5 stroke-[3]\" />\n                  </div>\n                </div>\n                <div>\n                  <div class=\"text-xs font-semibold\">Instagram</div>\n                  <div class=\"text-muted-foreground text-xs\">2,200 chars</div>\n                </div>\n              </button>\n\n              <!-- Threads Pill -->\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'group focus-visible:ring-ring relative flex flex-col items-start gap-1.5 rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                    isChannelSelected('threads')\n                      ? 'border-foreground bg-foreground/5 ring-foreground ring-1'\n                      : 'border-border bg-card hover:bg-accent/50 opacity-65',\n                  )\n                \"\n                @click=\"toggleChannel('threads')\"\n              >\n                <div class=\"flex w-full items-center justify-between\">\n                  <div class=\"bg-foreground text-background flex size-6 items-center justify-center rounded-md\">\n                    <svg class=\"size-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                      <path\n                        d=\"M12.186 24C5.454 24 0 18.618 0 12.016 0 5.414 5.454.032 12.186.032c6.64 0 11.966 5.228 12.004 11.758a12.08 12.08 0 0 1-3.69 8.643 11.85 11.85 0 0 1-8.314 3.567zm0-2.352a9.66 9.66 0 0 0 6.84-2.88 9.77 9.77 0 0 0 2.83-6.978c-.03-5.263-4.3-9.458-9.67-9.458-5.438 0-9.845 4.343-9.845 9.684 0 5.342 4.407 9.632 9.845 9.632z\"\n                      />\n                    </svg>\n                  </div>\n                  <div\n                    :class=\"\n                      cn(\n                        'flex size-4 items-center justify-center rounded-full text-xs',\n                        isChannelSelected('threads') ? 'bg-foreground text-background' : 'border-border border',\n                      )\n                    \"\n                  >\n                    <Check v-if=\"isChannelSelected('threads')\" class=\"size-2.5 stroke-[3]\" />\n                  </div>\n                </div>\n                <div>\n                  <div class=\"text-xs font-semibold\">Threads</div>\n                  <div class=\"text-muted-foreground text-xs\">500 chars</div>\n                </div>\n              </button>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Post Content Composer Card -->\n        <Card>\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex items-center justify-between\">\n              <CardTitle class=\"text-base font-semibold\">Post Content</CardTitle>\n              <Button variant=\"ghost\" size=\"xs\" class=\"text-primary hover:text-primary gap-1\" @click=\"polishWithAi\">\n                <Sparkles class=\"size-3.5\" />\n                <span>AI Polish</span>\n              </Button>\n            </div>\n          </CardHeader>\n          <CardContent class=\"space-y-4\">\n            <!-- Textarea -->\n            <div class=\"space-y-2\">\n              <Textarea\n                v-model=\"content\"\n                rows=\"6\"\n                placeholder=\"What would you like to share? Write once, preview across all social platforms...\"\n                class=\"min-h-[140px] text-sm\"\n              />\n\n              <!-- Bottom Bar: Emojis & Character Counter -->\n              <div class=\"flex flex-wrap items-center justify-between gap-2 pt-1\">\n                <!-- Quick Emojis -->\n                <div class=\"flex flex-wrap items-center gap-1\">\n                  <button\n                    v-for=\"emoji in quickEmojis\"\n                    :key=\"emoji\"\n                    type=\"button\"\n                    class=\"hover:bg-muted text-muted-foreground hover:text-foreground focus-visible:ring-ring flex size-7 items-center justify-center rounded text-sm transition-colors focus-visible:ring-1 focus-visible:outline-none\"\n                    @click=\"insertEmoji(emoji)\"\n                  >\n                    {{ emoji }}\n                  </button>\n                </div>\n\n                <!-- Character Counter with dynamic limits -->\n                <div class=\"flex items-center gap-2\">\n                  <Badge\n                    :variant=\"isOverLimit ? 'destructive' : isWarningLimit ? 'warning' : 'secondary'\"\n                    class=\"font-mono text-xs\"\n                  >\n                    {{ currentLength }} / {{ currentPlatformLimit }}\n                  </Badge>\n                </div>\n              </div>\n            </div>\n\n            <!-- Hashtag suggestions chips -->\n            <div class=\"space-y-1.5 pt-1\">\n              <span class=\"text-muted-foreground text-xs font-medium\">Recommended Hashtags</span>\n              <div class=\"flex flex-wrap gap-1.5\">\n                <button\n                  v-for=\"tag in suggestedHashtags\"\n                  :key=\"tag\"\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'focus-visible:ring-ring min-h-6 rounded-md border px-2 py-0.5 text-xs font-medium transition-colors focus-visible:ring-1 focus-visible:outline-none',\n                      content.includes(tag)\n                        ? 'border-primary/40 bg-primary/10 text-primary'\n                        : 'border-border bg-card text-muted-foreground hover:border-foreground/30 hover:text-foreground',\n                    )\n                  \"\n                  @click=\"insertHashtag(tag)\"\n                >\n                  {{ tag }}\n                </button>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Media Attachment Dropzone Card -->\n        <Card>\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex items-center justify-between\">\n              <CardTitle class=\"text-base font-semibold\">Media Attachment</CardTitle>\n              <Badge v-if=\"mediaUrl\" variant=\"success\" class=\"text-xs\">Attached</Badge>\n              <Badge v-else variant=\"outline\" class=\"text-xs\">Optional</Badge>\n            </div>\n          </CardHeader>\n          <CardContent class=\"space-y-3\">\n            <!-- Active Media Preview -->\n            <div\n              v-if=\"mediaUrl\"\n              class=\"border-border bg-muted/20 relative flex flex-col gap-3 rounded-lg border p-3 sm:flex-row sm:items-center sm:justify-between\"\n            >\n              <div class=\"flex items-center gap-3\">\n                <div class=\"border-border relative size-16 shrink-0 overflow-hidden rounded-md border\">\n                  <img :src=\"mediaUrl\" alt=\"Post attachment preview\" class=\"size-full object-cover\" />\n                </div>\n                <div class=\"space-y-1\">\n                  <div class=\"text-foreground text-xs font-semibold\">product-launch-graphic.png</div>\n                  <div class=\"text-muted-foreground text-xs\">1200 × 675 px · 284 KB</div>\n                  <Badge variant=\"secondary\" class=\"text-xs\">16:9 Aspect</Badge>\n                </div>\n              </div>\n\n              <div class=\"flex items-center gap-2\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  class=\"text-destructive hover:text-destructive hover:bg-destructive/10\"\n                  @click=\"removeMedia\"\n                >\n                  <Trash2 class=\"mr-1.5 size-3.5\" />\n                  Remove\n                </Button>\n              </div>\n            </div>\n\n            <!-- Upload Dropzone (when empty) -->\n            <div\n              v-else\n              class=\"border-border hover:border-primary/50 flex flex-col items-center justify-center rounded-lg border border-dashed p-6 text-center transition-colors\"\n            >\n              <div class=\"bg-muted text-muted-foreground flex size-10 items-center justify-center rounded-full\">\n                <UploadCloud class=\"size-5\" />\n              </div>\n              <p class=\"text-foreground mt-2 text-xs font-semibold\">Drag & drop media attachment</p>\n              <p class=\"text-muted-foreground text-xs\">PNG, JPG, GIF or MP4 up to 25MB</p>\n            </div>\n\n            <!-- Preset Sample Selector -->\n            <div class=\"space-y-1.5 pt-1\">\n              <span class=\"text-muted-foreground text-xs font-medium\">Quick Sample Media:</span>\n              <div class=\"flex flex-wrap gap-2\">\n                <button\n                  v-for=\"sample in sampleImages\"\n                  :key=\"sample.id\"\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'focus-visible:ring-ring min-h-6 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-1 focus-visible:outline-none',\n                      mediaUrl === sample.url\n                        ? 'border-primary bg-primary/10 text-primary'\n                        : 'border-border bg-card text-muted-foreground hover:text-foreground',\n                    )\n                  \"\n                  @click=\"setPresetImage(sample.url)\"\n                >\n                  {{ sample.label }}\n                </button>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Schedule Configuration Card -->\n        <Card>\n          <CardHeader class=\"pb-3\">\n            <CardTitle class=\"text-base font-semibold\">Schedule Settings</CardTitle>\n            <CardDescription class=\"text-xs\">\n              Determine publish timing and automated amplification rules.\n            </CardDescription>\n          </CardHeader>\n          <CardContent class=\"space-y-4\">\n            <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n              <div class=\"space-y-1.5\">\n                <label class=\"text-foreground text-xs font-medium\">Publish Date</label>\n                <Input v-model=\"scheduledDate\" type=\"date\" class=\"text-xs\" />\n              </div>\n              <div class=\"space-y-1.5\">\n                <label class=\"text-foreground text-xs font-medium\">Publish Time</label>\n                <Input v-model=\"scheduledTime\" placeholder=\"10:00 AM EST\" class=\"text-xs\" />\n              </div>\n            </div>\n\n            <!-- Optimal engagement recommendation banner -->\n            <div class=\"bg-primary/5 border-primary/20 flex items-start gap-2.5 rounded-lg border p-3 text-xs\">\n              <Clock class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              <div class=\"space-y-1\">\n                <span class=\"text-foreground font-semibold\">Optimal window: 10:00 AM EST</span>\n                <p class=\"text-muted-foreground leading-relaxed\">\n                  Based on your audience timezone, posting between 09:30 AM – 10:30 AM EST generates +34% higher average\n                  CTR.\n                </p>\n                <div class=\"flex flex-wrap gap-1.5 pt-1\">\n                  <button\n                    v-for=\"slot in timeSlots\"\n                    :key=\"slot\"\n                    type=\"button\"\n                    :class=\"\n                      cn(\n                        'focus-visible:ring-ring min-h-6 rounded border px-2 py-0.5 text-xs transition-colors focus-visible:ring-1 focus-visible:outline-none',\n                        scheduledTime === slot\n                          ? 'border-primary bg-primary text-primary-foreground font-medium'\n                          : 'border-border bg-card text-muted-foreground hover:text-foreground',\n                      )\n                    \"\n                    @click=\"scheduledTime = slot\"\n                  >\n                    {{ slot }}\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <Separator />\n\n            <!-- Switches -->\n            <div class=\"space-y-3\">\n              <div class=\"flex items-center justify-between gap-2\">\n                <div class=\"space-y-0.5\">\n                  <span class=\"text-foreground text-xs font-medium\">Auto-repost evergreen content</span>\n                  <p class=\"text-muted-foreground text-xs\">\n                    Reshuffle and repost to X & Threads after 24h if initial engagement crosses 100 interactions.\n                  </p>\n                </div>\n                <Switch v-model=\"autoRepost\" />\n              </div>\n\n              <div class=\"flex items-center justify-between gap-2\">\n                <div class=\"space-y-0.5\">\n                  <span class=\"text-foreground text-xs font-medium\">Auto-append first comment / thread link</span>\n                  <p class=\"text-muted-foreground text-xs\">\n                    Places outbound GitHub & documentation links in the first comment to avoid algorithm penalty.\n                  </p>\n                </div>\n                <Switch v-model=\"firstCommentThread\" />\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </section>\n\n      <!-- Right Column: Live Social Feed Preview -->\n      <section class=\"space-y-4 lg:col-span-6\">\n        <Card class=\"flex h-full flex-col\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <CardTitle class=\"text-base font-semibold\">Live Social Feed Preview</CardTitle>\n                <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success gap-1 text-xs\">\n                  <span class=\"bg-success size-1.5 animate-pulse rounded-full\" />\n                  Live Sync\n                </Badge>\n              </div>\n              <span class=\"text-muted-foreground font-mono text-xs\">\n                Scheduled: {{ scheduledDate }} · {{ scheduledTime }}\n              </span>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Preview pixel-accurate mockups in authentic platform containers.\n            </CardDescription>\n          </CardHeader>\n\n          <CardContent class=\"flex flex-1 flex-col space-y-4\">\n            <!-- Platform Preview Switcher Tabs -->\n            <Tabs v-model=\"activeTab\" class=\"w-full\">\n              <TabsList class=\"grid w-full grid-cols-4\">\n                <TabsTrigger value=\"twitter\" class=\"gap-1.5 text-xs\">\n                  <svg class=\"size-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                    <path\n                      d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 24.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\n                    />\n                  </svg>\n                  <span>X / Twitter</span>\n                </TabsTrigger>\n                <TabsTrigger value=\"linkedin\" class=\"gap-1.5 text-xs\">\n                  <svg class=\"size-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                    <path\n                      d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.46 8.76a1.45 1.45 0 1 0 0-2.9 1.45 1.45 0 0 0 0 2.9m1.4 9.74v-8.37H5.06v8.37z\"\n                    />\n                  </svg>\n                  <span>LinkedIn</span>\n                </TabsTrigger>\n                <TabsTrigger value=\"instagram\" class=\"gap-1.5 text-xs\">\n                  <svg class=\"size-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                    <path\n                      d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\n                    />\n                  </svg>\n                  <span>Instagram</span>\n                </TabsTrigger>\n                <TabsTrigger value=\"threads\" class=\"gap-1.5 text-xs\">\n                  <svg class=\"size-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                    <path\n                      d=\"M12.186 24C5.454 24 0 18.618 0 12.016 0 5.414 5.454.032 12.186.032c6.64 0 11.966 5.228 12.004 11.758a12.08 12.08 0 0 1-3.69 8.643 11.85 11.85 0 0 1-8.314 3.567zm0-2.352a9.66 9.66 0 0 0 6.84-2.88 9.77 9.77 0 0 0 2.83-6.978c-.03-5.263-4.3-9.458-9.67-9.458-5.438 0-9.845 4.343-9.845 9.684 0 5.342 4.407 9.632 9.845 9.632z\"\n                    />\n                  </svg>\n                  <span>Threads</span>\n                </TabsTrigger>\n              </TabsList>\n\n              <!-- TAB 1: X / Twitter Mockup -->\n              <TabsContent value=\"twitter\" class=\"mt-4\">\n                <div class=\"border-border bg-card rounded-xl border p-4 shadow-xs\">\n                  <div class=\"flex items-start gap-3\">\n                    <Avatar class=\"size-10\">\n                      <AvatarImage :src=\"author.avatar\" :alt=\"author.name\" />\n                      <AvatarFallback>{{ author.initials }}</AvatarFallback>\n                    </Avatar>\n\n                    <div class=\"flex-1 space-y-2\">\n                      <!-- X Header -->\n                      <div class=\"flex items-center justify-between\">\n                        <div class=\"flex flex-wrap items-center gap-1.5\">\n                          <span class=\"text-foreground text-sm font-bold\">{{ author.name }}</span>\n                          <!-- Verified blue check badge -->\n                          <svg class=\"fill-info text-info size-4 shrink-0\" viewBox=\"0 0 24 24\">\n                            <path\n                              fill-rule=\"evenodd\"\n                              clip-rule=\"evenodd\"\n                              d=\"M8.603 3.799A4.49 4.49 0 0112 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 013.498 1.307 4.491 4.491 0 011.307 3.497A4.49 4.49 0 0121.75 12a4.49 4.49 0 01-1.549 3.397 4.491 4.491 0 01-1.307 3.497 4.491 4.491 0 01-3.497 1.307A4.49 4.49 0 0112 21.75a4.49 4.49 0 01-3.397-1.549 4.49 4.49 0 01-3.498-1.306 4.491 4.491 0 01-1.307-3.498A4.49 4.49 0 012.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 011.307-3.497 4.49 4.49 0 013.497-1.307zm7.004 6.308a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\n                            />\n                          </svg>\n                          <span class=\"text-muted-foreground text-xs\">{{ author.twitterHandle }}</span>\n                          <span class=\"text-muted-foreground text-xs\">· Scheduled</span>\n                        </div>\n                        <MoreHorizontal class=\"text-muted-foreground size-4\" />\n                      </div>\n\n                      <!-- X Body -->\n                      <div class=\"text-foreground text-sm leading-relaxed whitespace-pre-wrap\">\n                        <template v-for=\"(seg, idx) in formattedContentSegments\" :key=\"idx\">\n                          <span v-if=\"seg.isHashtag\" class=\"text-info cursor-pointer font-normal hover:underline\">{{\n                            seg.text\n                          }}</span>\n                          <span v-else>{{ seg.text }}</span>\n                        </template>\n                        <span v-if=\"!content\" class=\"text-muted-foreground italic\">Post body is empty...</span>\n                      </div>\n\n                      <!-- Attached Media -->\n                      <div v-if=\"mediaUrl\" class=\"border-border mt-3 overflow-hidden rounded-2xl border\">\n                        <img :src=\"mediaUrl\" alt=\"Post preview image\" class=\"max-h-72 w-full object-cover\" />\n                      </div>\n\n                      <!-- Scheduled Metadata Stamp -->\n                      <div class=\"text-muted-foreground flex items-center gap-1.5 pt-1 text-xs\">\n                        <Clock class=\"size-3\" />\n                        <span>Will publish on {{ scheduledDate }} at {{ scheduledTime }}</span>\n                      </div>\n\n                      <Separator class=\"my-2\" />\n\n                      <!-- X Action Bar -->\n                      <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n                        <button\n                          type=\"button\"\n                          class=\"hover:text-info flex min-h-6 items-center gap-1.5 transition-colors\"\n                        >\n                          <MessageCircle class=\"size-4\" />\n                          <span>24</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"hover:text-success flex min-h-6 items-center gap-1.5 transition-colors\"\n                        >\n                          <Repeat2 class=\"size-4\" />\n                          <span>12</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"hover:text-destructive flex min-h-6 items-center gap-1.5 transition-colors\"\n                          :class=\"isLikedInPreview ? 'text-destructive' : ''\"\n                          @click=\"isLikedInPreview = !isLikedInPreview\"\n                        >\n                          <Heart class=\"size-4\" :class=\"isLikedInPreview ? 'fill-destructive' : ''\" />\n                          <span>{{ isLikedInPreview ? 159 : 158 }}</span>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"hover:text-info flex min-h-6 items-center gap-1.5 transition-colors\"\n                        >\n                          <Eye class=\"size-4\" />\n                          <span>4.2K</span>\n                        </button>\n                        <div class=\"flex items-center gap-2\">\n                          <Bookmark class=\"hover:text-foreground size-4 cursor-pointer\" />\n                          <Share2 class=\"hover:text-foreground size-4 cursor-pointer\" />\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </TabsContent>\n\n              <!-- TAB 2: LinkedIn Mockup -->\n              <TabsContent value=\"linkedin\" class=\"mt-4\">\n                <div class=\"border-border bg-card rounded-xl border p-4 shadow-xs\">\n                  <!-- LinkedIn Header -->\n                  <div class=\"flex items-start justify-between\">\n                    <div class=\"flex items-start gap-3\">\n                      <Avatar class=\"size-11\">\n                        <AvatarImage :src=\"author.avatar\" :alt=\"author.name\" />\n                        <AvatarFallback>{{ author.initials }}</AvatarFallback>\n                      </Avatar>\n                      <div class=\"space-y-0.5\">\n                        <div class=\"flex items-center gap-1.5\">\n                          <span class=\"text-foreground text-sm font-semibold\">{{ author.name }}</span>\n                          <span class=\"text-muted-foreground text-xs\">• 1st</span>\n                        </div>\n                        <p class=\"text-muted-foreground line-clamp-1 text-xs\">{{ author.headline }}</p>\n                        <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                          <span>Scheduled ({{ scheduledDate }})</span>\n                          <span>•</span>\n                          <Globe class=\"size-3\" />\n                        </div>\n                      </div>\n                    </div>\n                    <MoreHorizontal class=\"text-muted-foreground size-4\" />\n                  </div>\n\n                  <!-- LinkedIn Body -->\n                  <div class=\"text-foreground mt-3 text-sm leading-relaxed whitespace-pre-wrap\">\n                    <template v-for=\"(seg, idx) in formattedContentSegments\" :key=\"idx\">\n                      <span\n                        v-if=\"seg.isHashtag\"\n                        class=\"text-info text-info cursor-pointer font-medium hover:underline\"\n                        >{{ seg.text }}</span\n                      >\n                      <span v-else>{{ seg.text }}</span>\n                    </template>\n                    <span v-if=\"!content\" class=\"text-muted-foreground italic\">Post body is empty...</span>\n                  </div>\n\n                  <!-- LinkedIn Media -->\n                  <div v-if=\"mediaUrl\" class=\"border-border mt-3 overflow-hidden rounded-lg border\">\n                    <img :src=\"mediaUrl\" alt=\"Post preview image\" class=\"max-h-72 w-full object-cover\" />\n                  </div>\n\n                  <!-- LinkedIn Reaction Metrics -->\n                  <div class=\"text-muted-foreground flex items-center justify-between pt-3 text-xs\">\n                    <div class=\"flex items-center gap-1.5\">\n                      <div class=\"flex -space-x-1\">\n                        <span class=\"bg-info flex size-4 items-center justify-center rounded-full text-xs text-white\"\n                          >👍</span\n                        >\n                        <span\n                          class=\"bg-destructive flex size-4 items-center justify-center rounded-full text-xs text-white\"\n                          >❤️</span\n                        >\n                        <span class=\"bg-warning flex size-4 items-center justify-center rounded-full text-xs text-white\"\n                          >💡</span\n                        >\n                      </div>\n                      <span class=\"font-medium\">89</span>\n                    </div>\n                    <span>14 comments · 6 reposts</span>\n                  </div>\n\n                  <Separator class=\"my-2\" />\n\n                  <!-- LinkedIn Action Buttons -->\n                  <div class=\"text-muted-foreground grid grid-cols-4 gap-1 text-center text-xs font-medium\">\n                    <button\n                      type=\"button\"\n                      class=\"hover:bg-muted hover:text-foreground flex items-center justify-center gap-1.5 rounded-md py-2 transition-colors\"\n                      :class=\"isLikedInPreview ? 'text-info font-semibold' : ''\"\n                      @click=\"isLikedInPreview = !isLikedInPreview\"\n                    >\n                      <ThumbsUp class=\"size-4\" />\n                      <span>Like</span>\n                    </button>\n                    <button\n                      type=\"button\"\n                      class=\"hover:bg-muted hover:text-foreground flex items-center justify-center gap-1.5 rounded-md py-2 transition-colors\"\n                    >\n                      <MessageSquare class=\"size-4\" />\n                      <span>Comment</span>\n                    </button>\n                    <button\n                      type=\"button\"\n                      class=\"hover:bg-muted hover:text-foreground flex items-center justify-center gap-1.5 rounded-md py-2 transition-colors\"\n                    >\n                      <Repeat2 class=\"size-4\" />\n                      <span>Repost</span>\n                    </button>\n                    <button\n                      type=\"button\"\n                      class=\"hover:bg-muted hover:text-foreground flex items-center justify-center gap-1.5 rounded-md py-2 transition-colors\"\n                    >\n                      <Send class=\"size-4\" />\n                      <span>Send</span>\n                    </button>\n                  </div>\n                </div>\n              </TabsContent>\n\n              <!-- TAB 3: Instagram Mockup -->\n              <TabsContent value=\"instagram\" class=\"mt-4\">\n                <div class=\"border-border bg-card mx-auto max-w-md overflow-hidden rounded-xl border shadow-xs\">\n                  <!-- IG Header -->\n                  <div class=\"flex items-center justify-between p-3\">\n                    <div class=\"flex flex-wrap items-center gap-2.5\">\n                      <div class=\"rounded-full bg-gradient-to-tr from-amber-500 via-rose-500 to-purple-600 p-0.5\">\n                        <Avatar class=\"border-background size-8 border-2\">\n                          <AvatarImage :src=\"author.avatar\" :alt=\"author.name\" />\n                          <AvatarFallback>{{ author.initials }}</AvatarFallback>\n                        </Avatar>\n                      </div>\n                      <div>\n                        <div class=\"text-foreground text-xs font-semibold\">{{ author.instagramHandle }}</div>\n                        <div class=\"text-muted-foreground text-xs\">San Francisco, California</div>\n                      </div>\n                    </div>\n                    <MoreHorizontal class=\"text-muted-foreground size-4\" />\n                  </div>\n\n                  <!-- IG Media Container -->\n                  <div class=\"border-border/60 bg-muted/40 relative aspect-square w-full border-y\">\n                    <img v-if=\"mediaUrl\" :src=\"mediaUrl\" alt=\"Instagram post preview\" class=\"size-full object-cover\" />\n                    <div\n                      v-else\n                      class=\"text-muted-foreground flex size-full flex-col items-center justify-center gap-2 p-6 text-center\"\n                    >\n                      <ImageIcon class=\"size-10 stroke-[1.5]\" />\n                      <p class=\"text-xs\">Attach an image on the left to see Instagram photo preview</p>\n                    </div>\n                  </div>\n\n                  <!-- IG Actions & Caption -->\n                  <div class=\"space-y-2 p-3\">\n                    <div class=\"flex items-center justify-between\">\n                      <div class=\"flex items-center gap-3\">\n                        <Heart\n                          class=\"size-5 cursor-pointer transition-colors\"\n                          :class=\"\n                            isLikedInPreview\n                              ? 'fill-destructive text-destructive'\n                              : 'text-foreground hover:text-destructive'\n                          \"\n                          @click=\"isLikedInPreview = !isLikedInPreview\"\n                        />\n                        <MessageCircle class=\"text-foreground hover:text-muted-foreground size-5 cursor-pointer\" />\n                        <Send class=\"text-foreground hover:text-muted-foreground size-5 cursor-pointer\" />\n                      </div>\n                      <Bookmark class=\"text-foreground hover:text-muted-foreground size-5 cursor-pointer\" />\n                    </div>\n\n                    <div class=\"text-foreground text-xs font-semibold\">\n                      {{ isLikedInPreview ? '343 likes' : '342 likes' }}\n                    </div>\n\n                    <!-- IG Caption Text -->\n                    <div class=\"text-foreground text-xs leading-relaxed\">\n                      <span class=\"mr-1.5 font-semibold\">{{ author.instagramHandle }}</span>\n                      <template v-for=\"(seg, idx) in formattedContentSegments\" :key=\"idx\">\n                        <span\n                          v-if=\"seg.isHashtag\"\n                          class=\"text-info text-info cursor-pointer font-medium hover:underline\"\n                          >{{ seg.text }}</span\n                        >\n                        <span v-else>{{ seg.text }}</span>\n                      </template>\n                    </div>\n\n                    <div class=\"text-muted-foreground cursor-pointer text-xs\">View all 28 comments</div>\n                    <div class=\"text-muted-foreground text-xs tracking-wider uppercase\">\n                      SCHEDULED FOR {{ scheduledDate }} · {{ scheduledTime }}\n                    </div>\n                  </div>\n                </div>\n              </TabsContent>\n\n              <!-- TAB 4: Threads Mockup -->\n              <TabsContent value=\"threads\" class=\"mt-4\">\n                <div class=\"border-border bg-card rounded-xl border p-4 shadow-xs\">\n                  <div class=\"flex items-start gap-3\">\n                    <div class=\"flex flex-col items-center\">\n                      <Avatar class=\"size-10\">\n                        <AvatarImage :src=\"author.avatar\" :alt=\"author.name\" />\n                        <AvatarFallback>{{ author.initials }}</AvatarFallback>\n                      </Avatar>\n                      <div class=\"bg-border mt-2 h-20 w-0.5 rounded-full\" />\n                    </div>\n\n                    <div class=\"flex-1 space-y-2\">\n                      <div class=\"flex items-center justify-between\">\n                        <div class=\"flex items-center gap-1.5\">\n                          <span class=\"text-foreground text-sm font-semibold\">{{ author.threadsHandle }}</span>\n                          <svg class=\"fill-info text-info size-3.5 shrink-0\" viewBox=\"0 0 24 24\">\n                            <path\n                              fill-rule=\"evenodd\"\n                              clip-rule=\"evenodd\"\n                              d=\"M8.603 3.799A4.49 4.49 0 0112 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 013.498 1.307 4.491 4.491 0 011.307 3.497A4.49 4.49 0 0121.75 12a4.49 4.49 0 01-1.549 3.397 4.491 4.491 0 01-1.307 3.497 4.491 4.491 0 01-3.497 1.307A4.49 4.49 0 0112 21.75a4.49 4.49 0 01-3.397-1.549 4.49 4.49 0 01-3.498-1.306 4.491 4.491 0 01-1.307-3.498A4.49 4.49 0 012.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 011.307-3.497 4.49 4.49 0 013.497-1.307zm7.004 6.308a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\n                            />\n                          </svg>\n                          <span class=\"text-muted-foreground text-xs\">· Scheduled</span>\n                        </div>\n                        <MoreHorizontal class=\"text-muted-foreground size-4\" />\n                      </div>\n\n                      <div class=\"text-foreground text-sm leading-relaxed whitespace-pre-wrap\">\n                        <template v-for=\"(seg, idx) in formattedContentSegments\" :key=\"idx\">\n                          <span\n                            v-if=\"seg.isHashtag\"\n                            class=\"text-foreground cursor-pointer font-semibold hover:underline\"\n                            >{{ seg.text }}</span\n                          >\n                          <span v-else>{{ seg.text }}</span>\n                        </template>\n                        <span v-if=\"!content\" class=\"text-muted-foreground italic\">Post body is empty...</span>\n                      </div>\n\n                      <div v-if=\"mediaUrl\" class=\"border-border mt-3 overflow-hidden rounded-xl border\">\n                        <img :src=\"mediaUrl\" alt=\"Post preview image\" class=\"max-h-72 w-full object-cover\" />\n                      </div>\n\n                      <div class=\"flex items-center gap-4 pt-2\">\n                        <Heart\n                          class=\"size-4 cursor-pointer transition-colors\"\n                          :class=\"\n                            isLikedInPreview\n                              ? 'fill-destructive text-destructive'\n                              : 'text-muted-foreground hover:text-foreground'\n                          \"\n                          @click=\"isLikedInPreview = !isLikedInPreview\"\n                        />\n                        <MessageCircle class=\"text-muted-foreground hover:text-foreground size-4 cursor-pointer\" />\n                        <Repeat2 class=\"text-muted-foreground hover:text-foreground size-4 cursor-pointer\" />\n                        <Send class=\"text-muted-foreground hover:text-foreground size-4 cursor-pointer\" />\n                      </div>\n\n                      <div class=\"text-muted-foreground pt-1 text-xs\">48 replies · 312 likes</div>\n                    </div>\n                  </div>\n                </div>\n              </TabsContent>\n            </Tabs>\n          </CardContent>\n\n          <CardFooter\n            class=\"border-border/60 text-muted-foreground flex items-center justify-between border-t pt-4 text-xs\"\n          >\n            <span>Synchronized with Buffer & Hootsuite OAuth queues</span>\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"bg-success size-2 rounded-full\" />\n              <span>4 channels ready</span>\n            </div>\n          </CardFooter>\n        </Card>\n      </section>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:page",
      "target": "~/app/components/blocks/SocialMediaPostScheduler.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/switch.json",
    "https://uipkge.dev/r/vue/tabs.json",
    "https://uipkge.dev/r/vue/textarea.json"
  ],
  "description": "Multi-platform social media composer and post scheduler. Features channel toggles, rich text composer with emoji & hashtag insertion, character counter, media upload preview, scheduled time picker with best-time recommendations, auto-repost toggle, and high-fidelity live social feed previews for X (Twitter), LinkedIn, Instagram, and Threads.",
  "categories": [
    "marketing",
    "app"
  ]
}