style: update CSS for a bitmap aesthetic, enhance export options in templates, and streamline form field styling

assets/css/main.css

@@ -23,5 +23,20 @@ body {
 }
 
 .document-page {
-  @apply max-w-4xl mx-auto bg-white relative p-8 border-1 border-neutral-900 dark:border-neutral-100;
-}
+  @apply max-w-4xl mx-auto  relative p-8 border-1 border-neutral-900 dark:border-neutral-100;
+}
+
+
+/* Bitmap aesthetic overrides - remove all rounded corners */
+* {
+  border-radius: 0 !important;
+  font-family: "Ubuntu", monospace !important;
+}
+
+/* Form fields with bitmap styling */
+input,
+textarea,
+select {
+  font-family: "Ubuntu Mono", monospace !important;
+}
+

components/ExportOptions.vue

@@ -0,0 +1,718 @@
+<template>
+  <div class="export-options" :class="containerClass">
+    <div class="export-content">
+      <div class="export-section">
+        <h3 class="export-title">Export Options:</h3>
+        <div class="export-buttons">
+          <button 
+            @click="copyToClipboard" 
+            class="export-btn"
+            :disabled="isProcessing"
+            ref="copyButton">
+            <UIcon name="i-heroicons-clipboard" />
+            <span>Copy as Text</span>
+            <UIcon 
+              v-if="showCopySuccess" 
+              name="i-heroicons-check" 
+              class="success-icon" />
+          </button>
+          
+          <button 
+            @click="downloadAsMarkdown" 
+            class="export-btn"
+            :disabled="isProcessing"
+            ref="downloadButton">
+            <UIcon name="i-heroicons-arrow-down-tray" />
+            <span>Download Markdown</span>
+            <UIcon 
+              v-if="showDownloadSuccess" 
+              name="i-heroicons-check" 
+              class="success-icon" />
+          </button>
+          
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  exportData: any;
+  filename?: string;
+  title?: string;
+  containerClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  filename: 'export',
+  title: 'Export Data',
+  containerClass: 'centered'
+});
+
+const isProcessing = ref(false);
+const showCopySuccess = ref(false);
+const showDownloadSuccess = ref(false);
+
+const copyButton = ref<HTMLButtonElement>();
+const downloadButton = ref<HTMLButtonElement>();
+
+// Success feedback animation
+const showSuccessFeedback = (buttonRef: Ref<HTMLButtonElement | undefined>, successRef: Ref<boolean>) => {
+  if (!buttonRef.value) return;
+  
+  successRef.value = true;
+  
+  // Add checkmark overlay animation
+  const button = buttonRef.value;
+  button.classList.add('success-state');
+  
+  setTimeout(() => {
+    successRef.value = false;
+    button.classList.remove('success-state');
+  }, 2000);
+};
+
+const copyToClipboard = async () => {
+  if (isProcessing.value) return;
+  
+  isProcessing.value = true;
+  
+  try {
+    const textContent = extractTextContent();
+    
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(textContent);
+    } else {
+      // Fallback for browsers without clipboard API
+      const textarea = document.createElement('textarea');
+      textarea.value = textContent;
+      textarea.style.position = 'fixed';
+      textarea.style.opacity = '0';
+      document.body.appendChild(textarea);
+      textarea.focus();
+      textarea.select();
+      
+      const successful = document.execCommand('copy');
+      document.body.removeChild(textarea);
+      
+      if (!successful) {
+        throw new Error('execCommand copy failed');
+      }
+    }
+    
+    showSuccessFeedback(copyButton, showCopySuccess);
+  } catch (error) {
+    console.error('Copy failed:', error);
+    alert('Copy failed. Please try again or use the download option.');
+  } finally {
+    isProcessing.value = false;
+  }
+};
+
+const downloadAsMarkdown = () => {
+  if (isProcessing.value) return;
+  
+  isProcessing.value = true;
+  
+  try {
+    const content = convertToMarkdown();
+    downloadFile(content, `${props.filename}.md`, 'text/markdown');
+    showSuccessFeedback(downloadButton, showDownloadSuccess);
+  } catch (error) {
+    console.error('Markdown download failed:', error);
+    alert('Download failed. Please try again.');
+  } finally {
+    isProcessing.value = false;
+  }
+};
+
+
+const extractTextContent = (): string => {
+  const today = new Date().toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+
+  let content = `${props.title.toUpperCase()}\n${'='.repeat(props.title.length)}\n\nExported ${today}\n\n`;
+  
+  // Convert data to readable text format
+  if (props.exportData) {
+    content += formatDataAsText(props.exportData);
+  }
+  
+  return content;
+};
+
+const convertToMarkdown = (): string => {
+  const today = new Date().toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+
+  let content = `# ${props.title}\n\n*Exported ${today}*\n\n`;
+  
+  // Convert data to markdown format
+  if (props.exportData) {
+    content += formatDataAsMarkdown(props.exportData);
+  }
+  
+  return content;
+};
+
+const formatDataAsText = (data: any): string => {
+  // Special handling for different template types
+  if (data.section === 'tech-charter') {
+    return formatTechCharterAsText(data);
+  } else if (data.section === 'membership-agreement') {
+    return formatMembershipAgreementAsText(data);
+  } else if (data.section === 'conflict-resolution-framework') {
+    return formatConflictResolutionAsText(data);
+  } else if (data.section === 'decision-framework') {
+    return formatDecisionFrameworkAsText(data);
+  }
+  
+  if (Array.isArray(data)) {
+    return data.map((item, index) => `${index + 1}. ${formatObjectAsText(item)}`).join('\n');
+  } else if (typeof data === 'object' && data !== null) {
+    return formatObjectAsText(data);
+  }
+  return String(data);
+};
+
+const formatDataAsMarkdown = (data: any): string => {
+  // Special handling for different template types
+  if (data.section === 'tech-charter') {
+    return formatTechCharterAsMarkdown(data);
+  } else if (data.section === 'membership-agreement') {
+    return formatMembershipAgreementAsMarkdown(data);
+  } else if (data.section === 'conflict-resolution-framework') {
+    return formatConflictResolutionAsMarkdown(data);
+  } else if (data.section === 'decision-framework') {
+    return formatDecisionFrameworkAsMarkdown(data);
+  }
+  
+  if (Array.isArray(data)) {
+    return data.map((item, index) => `${index + 1}. ${formatObjectAsMarkdown(item)}`).join('\n\n');
+  } else if (typeof data === 'object' && data !== null) {
+    return formatObjectAsMarkdown(data);
+  }
+  return String(data);
+};
+
+const formatTechCharterAsText = (data: any): string => {
+  let content = `PURPOSE\n-------\n\n${data.charterPurpose}\n\n`;
+
+  const selectedPrinciples = Object.keys(data.principleWeights).filter(
+    (p) => data.principleWeights[p] > 0
+  );
+  
+  if (selectedPrinciples.filter((p) => !data.nonNegotiables.includes(p)).length > 0) {
+    content += `CORE PRINCIPLES\n---------------\n\n`;
+    selectedPrinciples
+      .filter((p) => !data.nonNegotiables.includes(p))
+      .forEach((pId) => {
+        const principle = data.principles.find((p: any) => p.id === pId);
+        if (principle) {
+          content += `• ${principle.name}\n`;
+        }
+      });
+    content += "\n";
+  }
+
+  if (data.nonNegotiables.length > 0) {
+    content += `NON-NEGOTIABLE REQUIREMENTS\n---------------------------\n\nAny vendor failing these requirements is automatically disqualified.\n\n`;
+    data.nonNegotiables.forEach((pId: string) => {
+      const principle = data.principles.find((p: any) => p.id === pId);
+      if (principle) {
+        content += `• ${principle.name}\n`;
+      }
+    });
+    content += "\n";
+  }
+
+  content += `TECHNICAL CONSTRAINTS\n---------------------\n\n`;
+  content += `• Authentication: ${data.constraints.sso}\n`;
+  content += `• Hosting: ${data.constraints.hosting}\n`;
+  if (data.constraints.integrations.length > 0) {
+    content += `• Required Integrations: ${data.constraints.integrations.join(", ")}\n`;
+  }
+  content += `• Support Level: ${data.constraints.support}\n`;
+  content += `• Migration Timeline: ${data.constraints.timeline}\n\n`;
+
+  if (data.sortedWeights.length > 0) {
+    content += `EVALUATION RUBRIC\n-----------------\n\nScore each vendor option using these weighted criteria (0-5 scale):\n\n`;
+    data.sortedWeights.forEach((principle: any) => {
+      content += `${principle.name} (Weight: ${data.principleWeights[principle.id]})\n${principle.rubricDescription}\n\n`;
+    });
+  }
+
+  return content;
+};
+
+const formatTechCharterAsMarkdown = (data: any): string => {
+  let content = `## Purpose\n\n${data.charterPurpose}\n\n`;
+
+  const selectedPrinciples = Object.keys(data.principleWeights).filter(
+    (p) => data.principleWeights[p] > 0
+  );
+  
+  if (selectedPrinciples.filter((p) => !data.nonNegotiables.includes(p)).length > 0) {
+    content += `## Core Principles\n\n`;
+    selectedPrinciples
+      .filter((p) => !data.nonNegotiables.includes(p))
+      .forEach((pId) => {
+        const principle = data.principles.find((p: any) => p.id === pId);
+        if (principle) {
+          content += `- ${principle.name}\n`;
+        }
+      });
+    content += "\n";
+  }
+
+  if (data.nonNegotiables.length > 0) {
+    content += `## Non-Negotiable Requirements\n\n**Any vendor failing these requirements is automatically disqualified.**\n\n`;
+    data.nonNegotiables.forEach((pId: string) => {
+      const principle = data.principles.find((p: any) => p.id === pId);
+      if (principle) {
+        content += `- **${principle.name}**\n`;
+      }
+    });
+    content += "\n";
+  }
+
+  content += `## Technical Constraints\n\n`;
+  content += `- Authentication: ${data.constraints.sso}\n`;
+  content += `- Hosting: ${data.constraints.hosting}\n`;
+  if (data.constraints.integrations.length > 0) {
+    content += `- Required Integrations: ${data.constraints.integrations.join(", ")}\n`;
+  }
+  content += `- Support Level: ${data.constraints.support}\n`;
+  content += `- Migration Timeline: ${data.constraints.timeline}\n\n`;
+
+  if (data.sortedWeights.length > 0) {
+    content += `## Evaluation Rubric\n\nScore each vendor option using these weighted criteria (0-5 scale):\n\n`;
+    content += `| Criterion | Description | Weight |\n`;
+    content += `|-----------|-------------|--------|\n`;
+    data.sortedWeights.forEach((principle: any) => {
+      content += `| ${principle.name} | ${principle.rubricDescription} | ${data.principleWeights[principle.id]} |\n`;
+    });
+  }
+
+  return content;
+};
+
+const formatObjectAsText = (obj: any): string => {
+  if (!obj || typeof obj !== 'object') return String(obj);
+  
+  return Object.entries(obj)
+    .filter(([key, value]) => value !== null && value !== undefined && key !== 'id')
+    .map(([key, value]) => {
+      const formattedKey = key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
+      if (typeof value === 'object') {
+        return `${formattedKey}: ${JSON.stringify(value)}`;
+      }
+      return `${formattedKey}: ${value}`;
+    })
+    .join('\n');
+};
+
+const formatObjectAsMarkdown = (obj: any): string => {
+  if (!obj || typeof obj !== 'object') return String(obj);
+  
+  return Object.entries(obj)
+    .filter(([key, value]) => value !== null && value !== undefined && key !== 'id')
+    .map(([key, value]) => {
+      const formattedKey = key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
+      if (typeof value === 'object') {
+        return `**${formattedKey}**: \`${JSON.stringify(value)}\``;
+      }
+      return `**${formattedKey}**: ${value}`;
+    })
+    .join('  \n');
+};
+
+// Membership Agreement formatting
+const formatMembershipAgreementAsText = (data: any): string => {
+  let content = `MEMBERSHIP AGREEMENT\n====================\n\n`;
+  content += `Cooperative Name: ${data.cooperativeName}\n`;
+  content += `Member Name: ${data.formData.memberName || '[Member Name]'}\n`;
+  content += `Effective Date: ${data.formData.effectiveDate || '[Date]'}\n\n`;
+  
+  if (data.formData.purpose) {
+    content += `PURPOSE\n-------\n${data.formData.purpose}\n\n`;
+  }
+  
+  if (data.formData.membershipRequirements) {
+    content += `MEMBERSHIP REQUIREMENTS\n----------------------\n${data.formData.membershipRequirements}\n\n`;
+  }
+  
+  if (data.formData.rightsAndResponsibilities) {
+    content += `RIGHTS AND RESPONSIBILITIES\n--------------------------\n${data.formData.rightsAndResponsibilities}\n\n`;
+  }
+  
+  return content;
+};
+
+const formatMembershipAgreementAsMarkdown = (data: any): string => {
+  let content = `## Membership Agreement\n\n`;
+  content += `**Cooperative Name:** ${data.cooperativeName}  \n`;
+  content += `**Member Name:** ${data.formData.memberName || '[Member Name]'}  \n`;
+  content += `**Effective Date:** ${data.formData.effectiveDate || '[Date]'}  \n\n`;
+  
+  if (data.formData.purpose) {
+    content += `### Purpose\n\n${data.formData.purpose}\n\n`;
+  }
+  
+  if (data.formData.membershipRequirements) {
+    content += `### Membership Requirements\n\n${data.formData.membershipRequirements}\n\n`;
+  }
+  
+  if (data.formData.rightsAndResponsibilities) {
+    content += `### Rights and Responsibilities\n\n${data.formData.rightsAndResponsibilities}\n\n`;
+  }
+  
+  return content;
+};
+
+// Conflict Resolution Framework formatting
+const formatConflictResolutionAsText = (data: any): string => {
+  let content = `CONFLICT RESOLUTION FRAMEWORK\n=============================\n\n`;
+  content += `Organization: ${data.orgName}\n`;
+  content += `Organization Type: ${data.orgType}\n`;
+  content += `Member Count: ${data.memberCount}\n\n`;
+  
+  if (data.coreValues?.length > 0) {
+    content += `CORE VALUES\n-----------\n`;
+    data.coreValues.forEach((value: string, index: number) => {
+      content += `${index + 1}. ${value}\n`;
+    });
+    content += '\n';
+  }
+  
+  if (data.principles?.length > 0) {
+    content += `PRINCIPLES\n----------\n`;
+    data.principles.forEach((principle: string, index: number) => {
+      content += `${index + 1}. ${principle}\n`;
+    });
+    content += '\n';
+  }
+  
+  if (data.policies) {
+    content += `POLICIES\n--------\n`;
+    Object.entries(data.policies).forEach(([key, value]) => {
+      if (value) {
+        const formattedKey = key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
+        content += `${formattedKey}: ${value}\n`;
+      }
+    });
+  }
+  
+  return content;
+};
+
+const formatConflictResolutionAsMarkdown = (data: any): string => {
+  let content = `## Conflict Resolution Framework\n\n`;
+  content += `**Organization:** ${data.orgName}  \n`;
+  content += `**Organization Type:** ${data.orgType}  \n`;
+  content += `**Member Count:** ${data.memberCount}  \n\n`;
+  
+  if (data.coreValues?.length > 0) {
+    content += `### Core Values\n\n`;
+    data.coreValues.forEach((value: string, index: number) => {
+      content += `${index + 1}. ${value}\n`;
+    });
+    content += '\n';
+  }
+  
+  if (data.principles?.length > 0) {
+    content += `### Principles\n\n`;
+    data.principles.forEach((principle: string, index: number) => {
+      content += `${index + 1}. ${principle}\n`;
+    });
+    content += '\n';
+  }
+  
+  if (data.policies) {
+    content += `### Policies\n\n`;
+    Object.entries(data.policies).forEach(([key, value]) => {
+      if (value) {
+        const formattedKey = key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
+        content += `**${formattedKey}:** ${value}  \n`;
+      }
+    });
+  }
+  
+  return content;
+};
+
+// Decision Framework formatting
+const formatDecisionFrameworkAsText = (data: any): string => {
+  let content = `DECISION FRAMEWORK RESULTS\n=========================\n\n`;
+  
+  if (data.surveyResponses) {
+    content += `SURVEY RESPONSES\n----------------\n`;
+    content += `Urgency: ${data.surveyResponses.urgency}\n`;
+    content += `Reversible: ${data.surveyResponses.reversible}\n`;
+    content += `Expertise: ${data.surveyResponses.expertise}\n`;
+    content += `Impact: ${data.surveyResponses.impact}\n`;
+    content += `Options: ${data.surveyResponses.options}\n`;
+    content += `Investment: ${data.surveyResponses.investment}\n`;
+    content += `Team Size: ${data.surveyResponses.teamSize}\n\n`;
+  }
+  
+  if (data.recommendedFramework) {
+    const framework = data.recommendedFramework;
+    content += `RECOMMENDED FRAMEWORK\n--------------------\n`;
+    content += `Method: ${framework.method}\n`;
+    content += `Tagline: ${framework.tagline}\n\n`;
+    content += `Reasoning: ${framework.reasoning}\n\n`;
+    
+    if (framework.steps) {
+      content += `IMPLEMENTATION STEPS\n-------------------\n`;
+      framework.steps.forEach((step: string, index: number) => {
+        content += `${index + 1}. ${step}\n`;
+      });
+      content += '\n';
+    }
+    
+    if (framework.tips) {
+      content += `PRO TIPS\n--------\n`;
+      framework.tips.forEach((tip: string, index: number) => {
+        content += `${index + 1}. ${tip}\n`;
+      });
+      content += '\n';
+    }
+  }
+  
+  return content;
+};
+
+const formatDecisionFrameworkAsMarkdown = (data: any): string => {
+  let content = `## Decision Framework Results\n\n`;
+  
+  if (data.surveyResponses) {
+    content += `### Survey Responses\n\n`;
+    content += `**Urgency:** ${data.surveyResponses.urgency}  \n`;
+    content += `**Reversible:** ${data.surveyResponses.reversible}  \n`;
+    content += `**Expertise:** ${data.surveyResponses.expertise}  \n`;
+    content += `**Impact:** ${data.surveyResponses.impact}  \n`;
+    content += `**Options:** ${data.surveyResponses.options}  \n`;
+    content += `**Investment:** ${data.surveyResponses.investment}  \n`;
+    content += `**Team Size:** ${data.surveyResponses.teamSize}  \n\n`;
+  }
+  
+  if (data.recommendedFramework) {
+    const framework = data.recommendedFramework;
+    content += `### Recommended Framework\n\n`;
+    content += `**Method:** ${framework.method}  \n`;
+    content += `**Tagline:** ${framework.tagline}  \n\n`;
+    content += `**Reasoning:** ${framework.reasoning}\n\n`;
+    
+    if (framework.steps) {
+      content += `#### Implementation Steps\n\n`;
+      framework.steps.forEach((step: string, index: number) => {
+        content += `${index + 1}. ${step}\n`;
+      });
+      content += '\n';
+    }
+    
+    if (framework.tips) {
+      content += `#### Pro Tips\n\n`;
+      framework.tips.forEach((tip: string, index: number) => {
+        content += `${index + 1}. ${tip}\n`;
+      });
+      content += '\n';
+    }
+  }
+  
+  return content;
+};
+
+const downloadFile = (content: string, filename: string, type: string) => {
+  const blob = new Blob([content], { type });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+};
+</script>
+
+<style scoped>
+.export-options {
+  margin: 2rem auto;
+  background: white;
+  border: 2px solid #000;
+  position: relative;
+  box-shadow: 4px 4px 0px #000;
+}
+
+.export-options.centered {
+  text-align: center;
+}
+
+.export-options::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  right: -2px;
+  bottom: -2px;
+  background: #000;
+  background-image: radial-gradient(white 1px, transparent 1px);
+  background-size: 3px 3px;
+  z-index: -1;
+}
+
+.export-content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  gap: 1rem;
+}
+
+.export-section {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+}
+
+.export-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.export-title {
+  font-weight: 700;
+  color: #374151;
+  margin: 0;
+  white-space: nowrap;
+  font-size: 1.1rem;
+}
+
+.export-btn {
+  background: #f9fafb;
+  border: 2px solid #000;
+  color: #374151;
+  padding: 0.75rem 1rem;
+  border-radius: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-decoration: none;
+  min-width: fit-content;
+  position: relative;
+  overflow: hidden;
+}
+
+.export-btn:hover:not(:disabled) {
+  background: #000;
+  color: #fff;
+  transform: translateY(-2px) translateX(-2px);
+  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
+}
+
+.export-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.export-btn.success-state {
+  background: #10b981 !important;
+  color: white !important;
+  border-color: #10b981 !important;
+}
+
+.success-icon {
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  transform: translateY(-50%);
+  animation: successPulse 2s ease-out;
+  color: #10b981;
+}
+
+.export-btn.success-state .success-icon {
+  color: white;
+}
+
+@keyframes successPulse {
+  0% {
+    opacity: 0;
+    transform: translateY(-50%) scale(0.5);
+  }
+  20% {
+    opacity: 1;
+    transform: translateY(-50%) scale(1.2);
+  }
+  40% {
+    transform: translateY(-50%) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-50%) scale(1);
+  }
+}
+
+/* Dark mode styles */
+html.dark .export-options {
+  background: #0a0a0a;
+  border-color: white;
+}
+
+html.dark .export-options::before {
+  background: white;
+  background-image: radial-gradient(black 1px, transparent 1px);
+}
+
+html.dark .export-title {
+  color: #e5e7eb;
+}
+
+html.dark .export-btn {
+  background: #0a0a0a;
+  border-color: white;
+  color: white;
+}
+
+html.dark .export-btn:hover:not(:disabled) {
+  background: white;
+  color: black;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .export-content {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .export-section {
+    justify-content: center;
+  }
+  
+  .export-buttons {
+    justify-content: center;
+  }
+  
+  .export-btn {
+    flex: 1;
+    justify-content: center;
+    min-width: 140px;
+  }
+}
+</style>

pages/templates/decision-framework.vue

@@ -3,6 +3,14 @@
     <!-- Wizard Subnav -->
     <WizardSubnav />
 
+    <!-- Export Options at Top -->
+    <div class="flex justify-center py-6">
+      <ExportOptions
+        :export-data="exportData"
+        filename="decision-framework"
+        title="Decision Framework Helper" />
+    </div>
+
     <div
       class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100"
       style="font-family: 'Ubuntu', monospace">
@@ -385,10 +393,20 @@
         </div>
       </div>
     </div>
+
+    <!-- Export Options at Bottom -->
+    <div class="flex justify-center py-6">
+      <ExportOptions
+        :export-data="exportData"
+        filename="decision-framework"
+        title="Decision Framework Helper" />
+    </div>
   </div>
 </template>
 
 <script setup>
+import ExportOptions from '~/components/ExportOptions.vue'
+
 const state = reactive({
   urgency: 3,
   reversible: null,
@@ -916,6 +934,35 @@ function printResult() {
   window.print();
 }
 
+// Export data for standardized export component
+const exportData = computed(() => ({
+  formData: {
+    state: state,
+    currentStep: currentStep.value,
+    showResult: showResult.value,
+    result: result.value
+  },
+  surveyResponses: {
+    urgency: state.urgency,
+    reversible: state.reversible,
+    expertise: state.expertise,
+    impact: state.impact,
+    options: state.options,
+    investment: state.investment,
+    teamSize: state.teamSize
+  },
+  recommendedFramework: result.value || null,
+  metadata: {
+    completedAt: showResult.value ? new Date().toISOString() : null,
+    totalSteps: totalSteps,
+    progressPercentage: Math.round((currentStep.value / totalSteps) * 100)
+  },
+  exportedAt: new Date().toISOString(),
+  section: "decision-framework",
+  title: "Decision Framework Helper",
+  description: "Interactive wizard to find the right way to decide together"
+}))
+
 // Keyboard navigation
 onMounted(() => {
   const handleKeydown = (event) => {

pages/wizards.vue

@@ -112,8 +112,7 @@
                   EXPORT OPTIONS
                 </h3>
                 <p class="text-sm text-neutral-700 dark:text-neutral-200">
-                  Download as PDF (print), plain text, Markdown, or Word
-                  document.
+                  Download as PDF, plain text, Markdown.
                 </p>
               </div>
               <div>