{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "matrix-swot-analysis",
  "title": "Matrix Swot Analysis",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/matrix-swot-analysis/MatrixSwotAnalysis.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, type HTMLAttributes } from 'vue'\nimport {\n  AlertTriangle,\n  Calendar,\n  Check,\n  Clock,\n  Download,\n  Layers,\n  Plus,\n  Share2,\n  ShieldAlert,\n  ShieldCheck,\n  Trash2,\n  TrendingUp,\n  Zap,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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'\n\nexport interface SwotItem {\n  id: string\n  title: string\n  description: string\n  impact: 'high' | 'medium' | 'low'\n  tag: string\n}\n\nexport interface StrategicInitiative {\n  id: string\n  title: string\n  description: string\n  strategyType: 'SO' | 'WO' | 'ST' | 'WT'\n  strategyLabel: string\n  priority: 'Critical' | 'High' | 'Strategic'\n  timeframe: string\n  targetMetric: string\n}\n\ninterface Props {\n  title?: string\n  project?: string\n  lastUpdated?: string\n  initialStrengths?: SwotItem[]\n  initialWeaknesses?: SwotItem[]\n  initialOpportunities?: SwotItem[]\n  initialThreats?: SwotItem[]\n  initiatives?: StrategicInitiative[]\n  readonly?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  title: 'SWOT Strategic Analysis Canvas',\n  project: 'UIPKGE Unbundled UI Registry Strategy · Q3 2026',\n  lastUpdated: 'Aug 21, 2026',\n  readonly: false,\n})\n\nconst defaultStrengths: SwotItem[] = [\n  {\n    id: 's-1',\n    title: 'Zero npm dependency overhead',\n    description:\n      'Components are copied directly into consumer project codebases, eliminating semver dependency locks, version skew, and transitive package bloat.',\n    impact: 'high',\n    tag: 'Core Architecture',\n  },\n  {\n    id: 's-2',\n    title: '100% code ownership for consumers',\n    description:\n      'Engineering teams retain complete control over markup, styles, accessibility props, and internal behaviors with zero upstream constraints.',\n    impact: 'high',\n    tag: 'Developer Autonomy',\n  },\n  {\n    id: 's-3',\n    title: 'Dual-framework Vue & React parity',\n    description:\n      'Strict visual, token, and functional symmetry between Vue 3 (Reka UI) and React (Radix UI) enables cross-stack design system alignment.',\n    impact: 'high',\n    tag: 'Market Breadth',\n  },\n  {\n    id: 's-4',\n    title: 'Tailwind v4 OKLCH token architecture',\n    description:\n      'CSS-first theme configuration using semantic surface variables, calibrated dark-mode layering, and WCAG AA compliant contrast ratios.',\n    impact: 'medium',\n    tag: 'Design System',\n  },\n]\n\nconst defaultWeaknesses: SwotItem[] = [\n  {\n    id: 'w-1',\n    title: 'Manual upgrade path without semver',\n    description:\n      'Consuming codebases must manually pull code diffs or re-execute CLI add commands when library enhancements or bug fixes are published.',\n    impact: 'high',\n    tag: 'Maintenance Model',\n  },\n  {\n    id: 'w-2',\n    title: 'Initial learning curve for monorepos',\n    description:\n      'Junior developers accustomed to single-command npm package installs may face an initial cognitive hurdle managing raw unbundled components.',\n    impact: 'medium',\n    tag: 'Developer DX',\n  },\n  {\n    id: 'w-3',\n    title: 'Build time for 1,300+ SSG pages',\n    description:\n      'Synthesizing static island previews, AST code extraction, and multi-format LLM documentation across dual registries requires high memory in CI.',\n    impact: 'medium',\n    tag: 'Tooling Scale',\n  },\n]\n\nconst defaultOpportunities: SwotItem[] = [\n  {\n    id: 'o-1',\n    title: 'AI Copilot workflows demanding raw source code',\n    description:\n      'LLM coding assistants (Claude, Cursor, Copilot) perform substantially better when refactoring transparent local SFCs than navigating opaque compiled dependencies.',\n    impact: 'high',\n    tag: 'AI Ergonomics',\n  },\n  {\n    id: 'o-2',\n    title: 'Enterprise design system white-labeling',\n    description:\n      'B2B organizations seeking unbranded, custom-styled design systems can adopt UIPKGE as their modular, open-source architectural baseline.',\n    impact: 'high',\n    tag: 'Enterprise B2B',\n  },\n  {\n    id: 'o-3',\n    title: 'E-Commerce and Healthcare template verticals',\n    description:\n      'Surging industry appetite for pre-built reference architectures (HRMS, Hospital Management, Logistics tracking) powered by composable blocks.',\n    impact: 'high',\n    tag: 'Vertical Growth',\n  },\n  {\n    id: 'o-4',\n    title: 'Community contributions of domain blocks',\n    description:\n      'Open-source contributors can rapidly publish specialized workflow blocks (radar charts, KYC wizards, audit logs) without semver packaging bottlenecks.',\n    impact: 'medium',\n    tag: 'Community',\n  },\n]\n\nconst defaultThreats: SwotItem[] = [\n  {\n    id: 't-1',\n    title: 'Official shadcn expanding into Vue ecosystem',\n    description:\n      'Potential first-party Vue support by upstream shadcn could consolidate developer attention away from independent unbundled registries.',\n    impact: 'high',\n    tag: 'Competitive Risk',\n  },\n  {\n    id: 't-2',\n    title: 'Upstream Reka UI headless breaking changes',\n    description:\n      'Substantial architectural shifts or breaking release cycles in upstream headless libraries require immediate parity synchronization.',\n    impact: 'high',\n    tag: 'Upstream Drift',\n  },\n  {\n    id: 't-3',\n    title: 'Browser CSS specification shifts',\n    description:\n      'Rapid evolution in CSS @scope, anchor positioning, and native light-dark() CSS functions may require recurring baseline refactoring.',\n    impact: 'medium',\n    tag: 'Web Standards',\n  },\n]\n\nconst defaultInitiatives: StrategicInitiative[] = [\n  {\n    id: 'init-1',\n    title: 'Automate Upstream Sync & Breaking Change Detection',\n    description:\n      'Implement automated CI regression monitoring against Reka UI and upstream shadcn tokens to maintain 100% runtime compatibility without breaking consumer projects.',\n    strategyType: 'SO',\n    strategyLabel: 'SO Strategy (Strengths × Opportunities)',\n    priority: 'Critical',\n    timeframe: 'Q4 2026',\n    targetMetric: '< 24h Upstream Parity Turnaround',\n  },\n  {\n    id: 'init-2',\n    title: 'AI-Native Context & CLI Smart Upgrade Engine',\n    description:\n      'Ship an intelligent CLI diff command and fine-tuned llms.txt vector context to let AI coding agents auto-patch and upgrade local consumer components directly.',\n    strategyType: 'WO',\n    strategyLabel: 'WO Strategy (Weaknesses × Opportunities)',\n    priority: 'High',\n    timeframe: 'Q4 2026',\n    targetMetric: 'Zero-Friction AST Upgrade Patches',\n  },\n  {\n    id: 'init-3',\n    title: 'Curated Vertical Template Packs & Enterprise Baseline',\n    description:\n      'Deliver production-grade Nuxt 4 and Next.js vertical boilerplate templates (HRMS, HMS, Logistics) to eliminate monorepo onboarding friction for enterprise builders.',\n    strategyType: 'ST',\n    strategyLabel: 'ST Strategy (Strengths × Threats)',\n    priority: 'Strategic',\n    timeframe: 'Q1 2027',\n    targetMetric: '4 Turnkey Vertical Reference Apps',\n  },\n]\n\nconst strengths = ref<SwotItem[]>(props.initialStrengths ?? defaultStrengths)\nconst weaknesses = ref<SwotItem[]>(props.initialWeaknesses ?? defaultWeaknesses)\nconst opportunities = ref<SwotItem[]>(props.initialOpportunities ?? defaultOpportunities)\nconst threats = ref<SwotItem[]>(props.initialThreats ?? defaultThreats)\nconst strategicInitiatives = ref<StrategicInitiative[]>(props.initiatives ?? defaultInitiatives)\n\nconst inputStrength = ref('')\nconst inputWeakness = ref('')\nconst inputOpportunity = ref('')\nconst inputThreat = ref('')\n\nconst isCopied = ref(false)\nconst isExporting = ref(false)\n\nfunction addStrength() {\n  const text = inputStrength.value.trim()\n  if (!text) return\n  strengths.value.push({\n    id: `s-${Date.now()}`,\n    title: text,\n    description: 'Custom strategic strength added during canvas session.',\n    impact: 'high',\n    tag: 'Internal Strategic Advantage',\n  })\n  inputStrength.value = ''\n}\n\nfunction removeStrength(id: string) {\n  strengths.value = strengths.value.filter((item) => item.id !== id)\n}\n\nfunction addWeakness() {\n  const text = inputWeakness.value.trim()\n  if (!text) return\n  weaknesses.value.push({\n    id: `w-${Date.now()}`,\n    title: text,\n    description: 'Custom strategic vulnerability identified for remediation.',\n    impact: 'medium',\n    tag: 'Internal Remediation',\n  })\n  inputWeakness.value = ''\n}\n\nfunction removeWeakness(id: string) {\n  weaknesses.value = weaknesses.value.filter((item) => item.id !== id)\n}\n\nfunction addOpportunity() {\n  const text = inputOpportunity.value.trim()\n  if (!text) return\n  opportunities.value.push({\n    id: `o-${Date.now()}`,\n    title: text,\n    description: 'External market dynamic or technological growth tailwind.',\n    impact: 'high',\n    tag: 'External Opportunity',\n  })\n  inputOpportunity.value = ''\n}\n\nfunction removeOpportunity(id: string) {\n  opportunities.value = opportunities.value.filter((item) => item.id !== id)\n}\n\nfunction addThreat() {\n  const text = inputThreat.value.trim()\n  if (!text) return\n  threats.value.push({\n    id: `t-${Date.now()}`,\n    title: text,\n    description: 'External industry risk factor requiring proactive defensive mitigation.',\n    impact: 'high',\n    tag: 'External Threat',\n  })\n  inputThreat.value = ''\n}\n\nfunction removeThreat(id: string) {\n  threats.value = threats.value.filter((item) => item.id !== id)\n}\n\nfunction handleShare() {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(window.location.href)\n    isCopied.value = true\n    setTimeout(() => {\n      isCopied.value = false\n    }, 2000)\n  }\n}\n\nfunction handleExportPdf() {\n  isExporting.value = true\n  setTimeout(() => {\n    isExporting.value = false\n  }, 1500)\n}\n\nconst totalCards = computed(\n  () => strengths.value.length + weaknesses.value.length + opportunities.value.length + threats.value.length,\n)\n</script>\n\n<template>\n  <div data-slot=\"matrix-swot-analysis\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Header Surface -->\n    <div\n      class=\"bg-card text-card-foreground flex flex-col gap-5 rounded-xl border p-5 shadow-xs sm:p-6 lg:flex-row lg:items-center lg:justify-between\"\n    >\n      <div class=\"space-y-1.5\">\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <h2 class=\"text-xl font-bold tracking-tight sm:text-2xl\">{{ props.title }}</h2>\n          <Badge wrap variant=\"outline\" class=\"bg-primary/5 text-primary border-primary/20 text-xs font-medium\">\n            2×2 TOWS Matrix\n          </Badge>\n          <Badge wrap variant=\"secondary\" class=\"text-xs font-normal\"> {{ totalCards }} Strategic Factors </Badge>\n        </div>\n\n        <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1 text-xs sm:text-sm\">\n          <div class=\"flex items-center gap-1.5\">\n            <Layers class=\"size-3.5\" />\n            <span class=\"text-foreground font-medium\">{{ props.project }}</span>\n          </div>\n          <span class=\"hidden sm:inline\">·</span>\n          <div class=\"flex items-center gap-1.5\">\n            <Calendar class=\"size-3.5\" />\n            <span>Updated {{ props.lastUpdated }}</span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Action Toolbar -->\n      <div class=\"flex flex-wrap items-center gap-2.5\">\n        <Button\n          aria-label=\"Download attachment\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"h-9 gap-2 text-xs shadow-xs\"\n          :disabled=\"isExporting\"\n          @click=\"handleExportPdf\"\n        >\n          <Download v-if=\"!isExporting\" class=\"size-3.5\" />\n          <Clock v-else class=\"size-3.5 animate-spin\" />\n          <span>{{ isExporting ? 'Generating PDF...' : 'Export Canvas PDF' }}</span>\n        </Button>\n\n        <Button variant=\"default\" size=\"sm\" class=\"h-9 gap-2 text-xs shadow-xs\" @click=\"handleShare\">\n          <Check v-if=\"isCopied\" class=\"size-3.5\" />\n          <Share2 v-else class=\"size-3.5\" />\n          <span>{{ isCopied ? 'Link Copied!' : 'Share Strategy' }}</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- 2x2 Matrix Axis Guide Legend -->\n    <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4\">\n      <div\n        class=\"border-success/20 bg-success/5 text-success text-success flex items-center justify-between rounded-lg border px-3.5 py-2.5 text-xs font-medium shadow-xs\"\n      >\n        <div class=\"flex items-center gap-2\">\n          <ShieldCheck class=\"text-success size-4 shrink-0\" />\n          <span>Internal Attributes</span>\n        </div>\n        <Badge wrap variant=\"outline\" class=\"border-success/30 bg-success/10 text-xs\">Helpful (+)</Badge>\n      </div>\n\n      <div\n        class=\"border-destructive/20 bg-destructive/5 text-destructive text-destructive flex items-center justify-between rounded-lg border px-3.5 py-2.5 text-xs font-medium shadow-xs\"\n      >\n        <div class=\"flex items-center gap-2\">\n          <AlertTriangle class=\"text-destructive size-4 shrink-0\" />\n          <span>Internal Attributes</span>\n        </div>\n        <Badge wrap variant=\"outline\" class=\"border-destructive/30 bg-destructive/10 text-xs\">Harmful (−)</Badge>\n      </div>\n\n      <div\n        class=\"border-info/20 bg-info/5 text-info text-info flex items-center justify-between rounded-lg border px-3.5 py-2.5 text-xs font-medium shadow-xs\"\n      >\n        <div class=\"flex items-center gap-2\">\n          <TrendingUp class=\"text-info size-4 shrink-0\" />\n          <span>External Dynamics</span>\n        </div>\n        <Badge wrap variant=\"outline\" class=\"border-info/30 bg-info/10 text-xs\">Helpful (+)</Badge>\n      </div>\n\n      <div\n        class=\"border-warning/20 bg-warning/5 text-warning flex items-center justify-between rounded-lg border px-3.5 py-2.5 text-xs font-medium shadow-xs\"\n      >\n        <div class=\"flex items-center gap-2\">\n          <ShieldAlert class=\"text-warning size-4 shrink-0\" />\n          <span>External Dynamics</span>\n        </div>\n        <Badge wrap variant=\"outline\" class=\"border-warning/30 bg-warning/10 text-warning text-xs\">Harmful (−)</Badge>\n      </div>\n    </div>\n\n    <!-- 2x2 SWOT Grid -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n      <!-- QUADRANT 1: STRENGTHS (Internal / Positive) -->\n      <Card class=\"border-success/30 border-success/20 flex flex-col justify-between shadow-xs\">\n        <CardHeader class=\"border-border/60 bg-success/5 dark:bg-success/10 border-b pb-4\">\n          <div class=\"flex items-start justify-between gap-3\">\n            <div class=\"flex items-center gap-3\">\n              <div\n                class=\"border-success/20 bg-success/10 text-success text-success flex size-9 items-center justify-center rounded-lg border shadow-xs\"\n              >\n                <ShieldCheck class=\"size-5\" />\n              </div>\n              <div>\n                <div class=\"flex items-center gap-2\">\n                  <CardTitle class=\"text-base font-bold sm:text-lg\">Strengths</CardTitle>\n                  <Badge wrap class=\"border-success/20 bg-success/15 text-success text-xs font-semibold\">\n                    {{ strengths.length }}\n                  </Badge>\n                </div>\n                <CardDescription class=\"text-xs\">\n                  Internal attributes &amp; distinct technical capabilities\n                </CardDescription>\n              </div>\n            </div>\n\n            <div class=\"flex items-center gap-1.5\">\n              <Badge\n                wrap\n                variant=\"outline\"\n                class=\"border-success/30 text-success text-success hidden text-xs sm:inline-flex\"\n              >\n                Internal\n              </Badge>\n              <Badge wrap variant=\"outline\" class=\"border-success/30 text-success text-xs\"> Positive </Badge>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent class=\"flex-1 space-y-3 p-4 sm:p-5\">\n          <div\n            v-for=\"item in strengths\"\n            :key=\"item.id\"\n            class=\"group bg-card hover:border-success/40 relative rounded-lg border p-3.5 shadow-xs transition-[border-color,box-shadow]\"\n          >\n            <div class=\"flex items-start justify-between gap-2\">\n              <div class=\"space-y-1\">\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <h4 class=\"text-foreground text-sm leading-snug font-semibold\">{{ item.title }}</h4>\n                  <Badge\n                    wrap\n                    variant=\"outline\"\n                    class=\"border-success/20 bg-success/10 text-success text-xs font-normal\"\n                  >\n                    {{ item.tag }}\n                  </Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">{{ item.description }}</p>\n              </div>\n\n              <Button\n                v-if=\"!props.readonly\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"text-muted-foreground hover:text-destructive hover:bg-destructive/10 -mt-1 -mr-1 size-7 shrink-0 p-0 opacity-80 group-hover:opacity-100\"\n                aria-label=\"Remove strength item\"\n                @click=\"removeStrength(item.id)\"\n              >\n                <Trash2 class=\"size-3.5\" />\n              </Button>\n            </div>\n          </div>\n\n          <div\n            v-if=\"strengths.length === 0\"\n            class=\"text-muted-foreground rounded-lg border border-dashed py-8 text-center text-xs\"\n          >\n            No strength items listed. Add a core advantage below.\n          </div>\n        </CardContent>\n\n        <CardFooter v-if=\"!props.readonly\" class=\"border-border/60 bg-muted/20 border-t p-3 sm:p-4\">\n          <form class=\"flex w-full items-center gap-2\" @submit.prevent=\"addStrength\">\n            <Input\n              v-model=\"inputStrength\"\n              type=\"text\"\n              placeholder=\"Add key strength... (Press Enter)\"\n              class=\"h-8.5 text-xs shadow-xs\"\n            />\n            <Button\n              type=\"submit\"\n              size=\"sm\"\n              class=\"bg-success hover:bg-success/90 h-8.5 shrink-0 gap-1.5 text-xs text-white shadow-xs\"\n            >\n              <Plus class=\"size-3.5\" />\n              <span>Add</span>\n            </Button>\n          </form>\n        </CardFooter>\n      </Card>\n\n      <!-- QUADRANT 2: WEAKNESSES (Internal / Negative) -->\n      <Card class=\"border-destructive/30 border-destructive/20 flex flex-col justify-between shadow-xs\">\n        <CardHeader class=\"border-border/60 bg-destructive/5 dark:bg-destructive/10 border-b pb-4\">\n          <div class=\"flex items-start justify-between gap-3\">\n            <div class=\"flex items-center gap-3\">\n              <div\n                class=\"border-destructive/20 bg-destructive/10 text-destructive text-destructive flex size-9 items-center justify-center rounded-lg border shadow-xs\"\n              >\n                <AlertTriangle class=\"size-5\" />\n              </div>\n              <div>\n                <div class=\"flex items-center gap-2\">\n                  <CardTitle class=\"text-base font-bold sm:text-lg\">Weaknesses</CardTitle>\n                  <Badge wrap class=\"border-destructive/20 bg-destructive/15 text-destructive text-xs font-semibold\">\n                    {{ weaknesses.length }}\n                  </Badge>\n                </div>\n                <CardDescription class=\"text-xs\">\n                  Internal limitations &amp; operational friction points\n                </CardDescription>\n              </div>\n            </div>\n\n            <div class=\"flex items-center gap-1.5\">\n              <Badge\n                wrap\n                variant=\"outline\"\n                class=\"border-destructive/30 text-destructive text-destructive hidden text-xs sm:inline-flex\"\n              >\n                Internal\n              </Badge>\n              <Badge wrap variant=\"outline\" class=\"border-destructive/30 text-destructive text-xs\"> Negative </Badge>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent class=\"flex-1 space-y-3 p-4 sm:p-5\">\n          <div\n            v-for=\"item in weaknesses\"\n            :key=\"item.id\"\n            class=\"group bg-card hover:border-destructive/40 relative rounded-lg border p-3.5 shadow-xs transition-[border-color,box-shadow]\"\n          >\n            <div class=\"flex items-start justify-between gap-2\">\n              <div class=\"space-y-1\">\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <h4 class=\"text-foreground text-sm leading-snug font-semibold\">{{ item.title }}</h4>\n                  <Badge\n                    wrap\n                    variant=\"outline\"\n                    class=\"border-destructive/20 bg-destructive/10 text-destructive text-xs font-normal\"\n                  >\n                    {{ item.tag }}\n                  </Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">{{ item.description }}</p>\n              </div>\n\n              <Button\n                v-if=\"!props.readonly\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"text-muted-foreground hover:text-destructive hover:bg-destructive/10 -mt-1 -mr-1 size-7 shrink-0 p-0 opacity-80 group-hover:opacity-100\"\n                aria-label=\"Remove weakness item\"\n                @click=\"removeWeakness(item.id)\"\n              >\n                <Trash2 class=\"size-3.5\" />\n              </Button>\n            </div>\n          </div>\n\n          <div\n            v-if=\"weaknesses.length === 0\"\n            class=\"text-muted-foreground rounded-lg border border-dashed py-8 text-center text-xs\"\n          >\n            No weakness items listed. Add an area for improvement below.\n          </div>\n        </CardContent>\n\n        <CardFooter v-if=\"!props.readonly\" class=\"border-border/60 bg-muted/20 border-t p-3 sm:p-4\">\n          <form class=\"flex w-full items-center gap-2\" @submit.prevent=\"addWeakness\">\n            <Input\n              v-model=\"inputWeakness\"\n              type=\"text\"\n              placeholder=\"Add key weakness... (Press Enter)\"\n              class=\"h-8.5 text-xs shadow-xs\"\n            />\n            <Button\n              type=\"submit\"\n              size=\"sm\"\n              class=\"bg-destructive hover:bg-destructive/90 h-8.5 shrink-0 gap-1.5 text-xs text-white shadow-xs\"\n            >\n              <Plus class=\"size-3.5\" />\n              <span>Add</span>\n            </Button>\n          </form>\n        </CardFooter>\n      </Card>\n\n      <!-- QUADRANT 3: OPPORTUNITIES (External / Positive) -->\n      <Card class=\"border-info/30 border-info/20 flex flex-col justify-between shadow-xs\">\n        <CardHeader class=\"border-border/60 bg-info/5 dark:bg-info/10 border-b pb-4\">\n          <div class=\"flex items-start justify-between gap-3\">\n            <div class=\"flex items-center gap-3\">\n              <div\n                class=\"border-info/20 bg-info/10 text-info text-info flex size-9 items-center justify-center rounded-lg border shadow-xs\"\n              >\n                <TrendingUp class=\"size-5\" />\n              </div>\n              <div>\n                <div class=\"flex items-center gap-2\">\n                  <CardTitle class=\"text-base font-bold sm:text-lg\">Opportunities</CardTitle>\n                  <Badge wrap class=\"border-info/20 bg-info/15 text-info text-xs font-semibold\">\n                    {{ opportunities.length }}\n                  </Badge>\n                </div>\n                <CardDescription class=\"text-xs\">\n                  External tailwinds &amp; strategic expansion opportunities\n                </CardDescription>\n              </div>\n            </div>\n\n            <div class=\"flex items-center gap-1.5\">\n              <Badge wrap variant=\"outline\" class=\"border-info/30 text-info text-info hidden text-xs sm:inline-flex\">\n                External\n              </Badge>\n              <Badge wrap variant=\"outline\" class=\"border-info/30 text-info text-xs\"> Positive </Badge>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent class=\"flex-1 space-y-3 p-4 sm:p-5\">\n          <div\n            v-for=\"item in opportunities\"\n            :key=\"item.id\"\n            class=\"group bg-card hover:border-info/40 relative rounded-lg border p-3.5 shadow-xs transition-[border-color,box-shadow]\"\n          >\n            <div class=\"flex items-start justify-between gap-2\">\n              <div class=\"space-y-1\">\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <h4 class=\"text-foreground text-sm leading-snug font-semibold\">{{ item.title }}</h4>\n                  <Badge wrap variant=\"outline\" class=\"border-info/20 bg-info/10 text-info text-xs font-normal\">\n                    {{ item.tag }}\n                  </Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">{{ item.description }}</p>\n              </div>\n\n              <Button\n                v-if=\"!props.readonly\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"text-muted-foreground hover:text-destructive hover:bg-destructive/10 -mt-1 -mr-1 size-7 shrink-0 p-0 opacity-80 group-hover:opacity-100\"\n                aria-label=\"Remove opportunity item\"\n                @click=\"removeOpportunity(item.id)\"\n              >\n                <Trash2 class=\"size-3.5\" />\n              </Button>\n            </div>\n          </div>\n\n          <div\n            v-if=\"opportunities.length === 0\"\n            class=\"text-muted-foreground rounded-lg border border-dashed py-8 text-center text-xs\"\n          >\n            No opportunity items listed. Add a market growth vector below.\n          </div>\n        </CardContent>\n\n        <CardFooter v-if=\"!props.readonly\" class=\"border-border/60 bg-muted/20 border-t p-3 sm:p-4\">\n          <form class=\"flex w-full items-center gap-2\" @submit.prevent=\"addOpportunity\">\n            <Input\n              v-model=\"inputOpportunity\"\n              type=\"text\"\n              placeholder=\"Add key opportunity... (Press Enter)\"\n              class=\"h-8.5 text-xs shadow-xs\"\n            />\n            <Button\n              type=\"submit\"\n              size=\"sm\"\n              class=\"bg-info hover:bg-info/90 h-8.5 shrink-0 gap-1.5 text-xs text-white shadow-xs\"\n            >\n              <Plus class=\"size-3.5\" />\n              <span>Add</span>\n            </Button>\n          </form>\n        </CardFooter>\n      </Card>\n\n      <!-- QUADRANT 4: THREATS (External / Negative) -->\n      <Card class=\"border-warning/30 dark:border-warning/20 flex flex-col justify-between shadow-xs\">\n        <CardHeader class=\"border-border/60 bg-warning/5 dark:bg-warning/10 border-b pb-4\">\n          <div class=\"flex items-start justify-between gap-3\">\n            <div class=\"flex items-center gap-3\">\n              <div\n                class=\"border-warning/20 bg-warning/10 text-warning flex size-9 items-center justify-center rounded-lg border shadow-xs\"\n              >\n                <ShieldAlert class=\"size-5\" />\n              </div>\n              <div>\n                <div class=\"flex items-center gap-2\">\n                  <CardTitle class=\"text-base font-bold sm:text-lg\">Threats</CardTitle>\n                  <Badge wrap class=\"border-warning/20 bg-warning/15 text-warning text-xs font-semibold\">\n                    {{ threats.length }}\n                  </Badge>\n                </div>\n                <CardDescription class=\"text-xs\">\n                  External risks, competitive forces &amp; ecosystem shifts\n                </CardDescription>\n              </div>\n            </div>\n\n            <div class=\"flex items-center gap-1.5\">\n              <Badge wrap variant=\"outline\" class=\"border-warning/30 text-warning hidden text-xs sm:inline-flex\">\n                External\n              </Badge>\n              <Badge wrap variant=\"outline\" class=\"border-warning/30 text-warning text-xs\"> Negative </Badge>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent class=\"flex-1 space-y-3 p-4 sm:p-5\">\n          <div\n            v-for=\"item in threats\"\n            :key=\"item.id\"\n            class=\"bg-card hover:border-warning/40 relative rounded-lg border p-3.5 shadow-xs transition-[border-color,box-shadow]\"\n          >\n            <div class=\"flex items-start justify-between gap-2\">\n              <div class=\"space-y-1\">\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <h4 class=\"text-foreground text-sm leading-snug font-semibold\">{{ item.title }}</h4>\n                  <Badge\n                    wrap\n                    variant=\"outline\"\n                    class=\"border-warning/20 bg-warning/10 text-warning text-xs font-normal\"\n                  >\n                    {{ item.tag }}\n                  </Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">{{ item.description }}</p>\n              </div>\n\n              <Button\n                v-if=\"!props.readonly\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"text-muted-foreground hover:text-destructive hover:bg-destructive/10 -mt-1 -mr-1 size-7 shrink-0 p-0 opacity-80 group-hover:opacity-100\"\n                aria-label=\"Remove threat item\"\n                @click=\"removeThreat(item.id)\"\n              >\n                <Trash2 class=\"size-3.5\" />\n              </Button>\n            </div>\n          </div>\n\n          <div\n            v-if=\"threats.length === 0\"\n            class=\"text-muted-foreground rounded-lg border border-dashed py-8 text-center text-xs\"\n          >\n            No threat items listed. Add an external risk factor below.\n          </div>\n        </CardContent>\n\n        <CardFooter v-if=\"!props.readonly\" class=\"border-border/60 bg-muted/20 border-t p-3 sm:p-4\">\n          <form class=\"flex w-full items-center gap-2\" @submit.prevent=\"addThreat\">\n            <Input\n              v-model=\"inputThreat\"\n              type=\"text\"\n              placeholder=\"Add key threat... (Press Enter)\"\n              class=\"h-8.5 text-xs shadow-xs\"\n            />\n            <Button\n              type=\"submit\"\n              size=\"sm\"\n              class=\"bg-warning text-warning-foreground hover:bg-warning/90 h-8.5 shrink-0 gap-1.5 text-xs shadow-xs\"\n            >\n              <Plus class=\"size-3.5\" />\n              <span>Add</span>\n            </Button>\n          </form>\n        </CardFooter>\n      </Card>\n    </div>\n\n    <!-- Strategic Synthesis & Key Next Actions Card (TOWS Strategy) -->\n    <Card class=\"shadow-xs\">\n      <CardHeader class=\"border-border/60 bg-muted/15 border-b pb-4\">\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center gap-2\">\n              <Zap class=\"text-primary size-4\" />\n              <CardTitle class=\"text-base font-bold sm:text-lg\">Strategic Synthesis &amp; Key Next Actions</CardTitle>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Actionable strategic initiatives bridging internal capabilities with external market dynamics (TOWS matrix\n              formulation).\n            </CardDescription>\n          </div>\n\n          <Badge wrap variant=\"outline\" class=\"w-fit text-xs font-medium\"> 3 Active Initiatives </Badge>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-4 sm:p-6\">\n        <div class=\"grid grid-cols-1 gap-4 lg:grid-cols-3\">\n          <div\n            v-for=\"initiative in strategicInitiatives\"\n            :key=\"initiative.id\"\n            class=\"bg-muted/30 hover:border-primary/40 flex flex-col justify-between rounded-xl border p-4 shadow-xs transition-[border-color,box-shadow]\"\n          >\n            <div class=\"space-y-3\">\n              <div class=\"flex items-center justify-between gap-2\">\n                <Badge\n                  wrap\n                  variant=\"outline\"\n                  :class=\"\n                    cn(\n                      'text-xs font-semibold',\n                      initiative.strategyType === 'SO' && 'border-success/20 bg-success/10 text-success',\n                      initiative.strategyType === 'WO' && 'border-info/20 bg-info/10 text-info',\n                      initiative.strategyType === 'ST' && 'border-warning/20 bg-warning/10 text-warning',\n                      initiative.strategyType === 'WT' && 'border-destructive/20 bg-destructive/10 text-destructive',\n                    )\n                  \"\n                >\n                  {{ initiative.strategyType }} Strategy\n                </Badge>\n\n                <Badge\n                  :variant=\"initiative.priority === 'Critical' ? 'destructive' : 'secondary'\"\n                  class=\"text-xs font-medium whitespace-normal\"\n                >\n                  {{ initiative.priority }}\n                </Badge>\n              </div>\n\n              <div class=\"space-y-1.5\">\n                <h4 class=\"text-foreground text-sm leading-snug font-semibold\">{{ initiative.title }}</h4>\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">{{ initiative.description }}</p>\n              </div>\n            </div>\n\n            <div class=\"border-border/50 mt-4 flex items-center justify-between gap-2 border-t pt-3 text-xs\">\n              <div class=\"text-muted-foreground flex items-center gap-1.5\">\n                <Clock class=\"size-3.5\" />\n                <span>{{ initiative.timeframe }}</span>\n              </div>\n              <span class=\"bg-primary/10 text-primary rounded px-2 py-0.5 text-xs font-medium\">\n                {{ initiative.targetMetric }}\n              </span>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/MatrixSwotAnalysis.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "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"
  ],
  "description": "Strategic planning 2x2 SWOT analysis matrix (Strengths, Weaknesses, Opportunities, Threats) with dynamic card management, quadrant counters, TOWS strategic initiatives, and PDF/share toolbar.",
  "categories": [
    "productivity",
    "dashboard",
    "app",
    "data"
  ]
}