@patch-adams/plugin-feedback 1.0.0

package/dist/index.js

@@ -0,0 +1,1009 @@
+import { z } from 'zod';
+
+// src/config.ts
+var IssueSubtypeSchema = z.object({
+  /** Unique identifier for the subtype */
+  id: z.string().min(1),
+  /** Display label for the subtype */
+  label: z.string().min(1)
+});
+var IssueTypeSchema = z.object({
+  /** Unique identifier for the issue type */
+  id: z.string().min(1),
+  /** Display label for the issue type */
+  label: z.string().min(1),
+  /** Optional subtypes that appear when this type is selected */
+  subtypes: z.array(IssueSubtypeSchema).optional()
+});
+var MetadataOptionsSchema = z.object({
+  /** Include the course ID from LRS bridge (if available) */
+  courseId: z.boolean().default(true),
+  /** Include the current lesson/page ID (URL hash or pathname) */
+  lessonId: z.boolean().default(true),
+  /** Include the browser user agent */
+  userAgent: z.boolean().default(true),
+  /** Include timestamp of submission */
+  timestamp: z.boolean().default(true),
+  /** Include the full current URL */
+  url: z.boolean().default(true)
+});
+var DEFAULT_ISSUE_TYPES = [
+  {
+    id: "content",
+    label: "Content Issue",
+    subtypes: [
+      { id: "typo", label: "Typo / Grammar" },
+      { id: "incorrect", label: "Incorrect Information" },
+      { id: "unclear", label: "Unclear / Confusing" },
+      { id: "outdated", label: "Outdated Content" }
+    ]
+  },
+  {
+    id: "technical",
+    label: "Technical Issue",
+    subtypes: [
+      { id: "audio", label: "Audio Problem" },
+      { id: "video", label: "Video Problem" },
+      { id: "navigation", label: "Navigation Issue" },
+      { id: "display", label: "Display / Layout Issue" }
+    ]
+  },
+  {
+    id: "suggestion",
+    label: "Suggestion"
+  },
+  {
+    id: "other",
+    label: "Other"
+  }
+];
+var FeedbackConfigSchema = z.object({
+  /** Whether the feedback plugin is enabled */
+  enabled: z.boolean().default(true),
+  // === Endpoint Configuration ===
+  /** API endpoint URL for submitting feedback (optional - if not set, logs to console) */
+  endpoint: z.string().url().optional(),
+  /** HTTP method for the endpoint (default: POST) */
+  method: z.enum(["POST", "PUT"]).default("POST"),
+  /** Additional headers to send with the request */
+  headers: z.record(z.string()).optional(),
+  // === Appearance ===
+  /** Position of the feedback tab (left or right side of screen) */
+  position: z.enum(["left", "right"]).default("right"),
+  /** Text displayed on the feedback tab */
+  tabText: z.string().default("Feedback"),
+  /** Background color of the feedback tab */
+  tabColor: z.string().default("#007bff"),
+  /** Text color of the feedback tab */
+  tabTextColor: z.string().default("#ffffff"),
+  /** Z-index for the feedback widget (default: 9999) */
+  zIndex: z.number().default(9999),
+  // === Form Fields ===
+  /** Show star rating field */
+  showRating: z.boolean().default(true),
+  /** Whether rating is required to submit */
+  ratingRequired: z.boolean().default(false),
+  /** Number of stars in the rating (default: 5) */
+  ratingStars: z.number().min(3).max(10).default(5),
+  /** Show issue type dropdown */
+  showIssueType: z.boolean().default(true),
+  /** Whether issue type is required to submit */
+  issueTypeRequired: z.boolean().default(false),
+  /** Available issue types (uses defaults if not provided) */
+  issueTypes: z.array(IssueTypeSchema).optional(),
+  /** Show comment textarea */
+  showComment: z.boolean().default(true),
+  /** Whether comment is required to submit */
+  commentRequired: z.boolean().default(false),
+  /** Maximum length for comments (default: 500) */
+  commentMaxLength: z.number().min(50).max(5e3).default(500),
+  /** Placeholder text for comment field (uses translation if not set) */
+  commentPlaceholder: z.string().optional(),
+  // === Language / i18n ===
+  /** Locale for UI text (en or fr) */
+  locale: z.enum(["en", "fr"]).default("en"),
+  /** Custom translations (overrides built-in translations) */
+  translations: z.record(z.string()).optional(),
+  // === Metadata ===
+  /** What metadata to include with feedback submissions */
+  includeMetadata: MetadataOptionsSchema.default({}),
+  // === Behavior ===
+  /** Auto-close modal after successful submission (default: true) */
+  autoClose: z.boolean().default(true),
+  /** Delay in ms before auto-closing after success (default: 2000) */
+  autoCloseDelay: z.number().min(500).max(1e4).default(2e3),
+  /** Enable debug logging (default: false) */
+  debug: z.boolean().default(false)
+});
+
+// src/i18n/en.json
+var en_default = {
+  title: "Send Feedback",
+  ratingLabel: "How would you rate this content?",
+  issueTypeLabel: "What type of feedback?",
+  selectIssueType: "Select type...",
+  subtypeLabel: "More specifically:",
+  selectSubtype: "Select...",
+  commentLabel: "Your feedback",
+  commentPlaceholder: "Please describe your feedback in detail...",
+  submit: "Send Feedback",
+  submitting: "Sending...",
+  thankYou: "Thank you for your feedback!",
+  errorSubmitting: "Failed to send feedback. Please try again.",
+  errorRequired: "Please fill in the required fields.",
+  characterCount: "{current}/{max}"
+};
+
+// src/i18n/fr.json
+var fr_default = {
+  title: "Envoyer un commentaire",
+  ratingLabel: "Comment \xE9valuez-vous ce contenu?",
+  issueTypeLabel: "Type de commentaire",
+  selectIssueType: "S\xE9lectionner...",
+  subtypeLabel: "Plus pr\xE9cis\xE9ment:",
+  selectSubtype: "S\xE9lectionner...",
+  commentLabel: "Votre commentaire",
+  commentPlaceholder: "Veuillez d\xE9crire votre commentaire en d\xE9tail...",
+  submit: "Envoyer",
+  submitting: "Envoi en cours...",
+  thankYou: "Merci pour votre commentaire!",
+  errorSubmitting: "\xC9chec de l'envoi. Veuillez r\xE9essayer.",
+  errorRequired: "Veuillez remplir les champs obligatoires.",
+  characterCount: "{current}/{max}"
+};
+
+// src/i18n/index.ts
+var translations = {
+  en: en_default,
+  fr: fr_default
+};
+function getTranslations(locale, overrides) {
+  const base = translations[locale] || translations.en;
+  if (overrides) {
+    return { ...base, ...overrides };
+  }
+  return base;
+}
+
+// src/widget.ts
+function generateFeedbackWidget(config) {
+  const t = getTranslations(config.locale, config.translations);
+  const issueTypes = config.issueTypes || DEFAULT_ISSUE_TYPES;
+  return `
+(function() {
+  'use strict';
+
+  // ============================================================================
+  // FEEDBACK WIDGET - Patch-Adams Plugin v1.0.0
+  // ============================================================================
+
+  var FEEDBACK = window.pa_patcher = window.pa_patcher || {};
+  FEEDBACK.feedback = {
+    version: '1.0.0',
+    isOpen: false,
+    rating: 0,
+    config: ${JSON.stringify({
+    endpoint: config.endpoint,
+    method: config.method,
+    headers: config.headers,
+    position: config.position,
+    showRating: config.showRating,
+    ratingRequired: config.ratingRequired,
+    ratingStars: config.ratingStars,
+    showIssueType: config.showIssueType,
+    issueTypeRequired: config.issueTypeRequired,
+    showComment: config.showComment,
+    commentRequired: config.commentRequired,
+    commentMaxLength: config.commentMaxLength,
+    autoClose: config.autoClose,
+    autoCloseDelay: config.autoCloseDelay,
+    debug: config.debug,
+    includeMetadata: config.includeMetadata
+  })},
+    translations: ${JSON.stringify(t)},
+    issueTypes: ${JSON.stringify(issueTypes)},
+  };
+
+  var FB = FEEDBACK.feedback;
+
+  function log() {
+    if (FB.config.debug) {
+      console.log.apply(console, ['[PA-Feedback]'].concat(Array.prototype.slice.call(arguments)));
+    }
+  }
+
+  // ============================================================================
+  // DOM CREATION
+  // ============================================================================
+
+  function createWidget() {
+    var container = document.createElement('div');
+    container.id = 'pa-feedback-container';
+    container.className = 'pa-feedback-${config.position}';
+    container.innerHTML = buildWidgetHtml();
+    document.body.appendChild(container);
+    setupEventListeners();
+    log('Widget created');
+  }
+
+  function buildWidgetHtml() {
+    var html = '';
+
+    // Tab button
+    html += '<button id="pa-feedback-tab" class="pa-feedback-tab" aria-label="' + FB.translations.title + '">';
+    html += '<span class="pa-feedback-tab-text">${config.tabText}</span>';
+    html += '</button>';
+
+    // Modal
+    html += '<div id="pa-feedback-modal" class="pa-feedback-modal pa-feedback-hidden" role="dialog" aria-modal="true" aria-labelledby="pa-feedback-title">';
+    html += '<div class="pa-feedback-content">';
+
+    // Header
+    html += '<div class="pa-feedback-header">';
+    html += '<h3 id="pa-feedback-title">' + FB.translations.title + '</h3>';
+    html += '<button id="pa-feedback-close" class="pa-feedback-close" aria-label="Close">&times;</button>';
+    html += '</div>';
+
+    // Form
+    html += '<form id="pa-feedback-form">';
+
+    // Rating (if enabled)
+    ${config.showRating ? `
+    html += '<div class="pa-feedback-field">';
+    html += '<label class="pa-feedback-label">' + FB.translations.ratingLabel + '${config.ratingRequired ? ' <span class="pa-feedback-required">*</span>' : ""}</label>';
+    html += '<div class="pa-feedback-stars" role="radiogroup" aria-label="Rating">';
+    for (var i = 1; i <= ${config.ratingStars}; i++) {
+      html += '<button type="button" class="pa-feedback-star" data-value="' + i + '" role="radio" aria-checked="false" aria-label="' + i + ' star">&#9734;</button>';
+    }
+    html += '</div>';
+    html += '</div>';
+    ` : ""}
+
+    // Issue Type (if enabled)
+    ${config.showIssueType ? `
+    html += '<div class="pa-feedback-field">';
+    html += '<label class="pa-feedback-label" for="pa-feedback-issue-type">' + FB.translations.issueTypeLabel + '${config.issueTypeRequired ? ' <span class="pa-feedback-required">*</span>' : ""}</label>';
+    html += '<select id="pa-feedback-issue-type" class="pa-feedback-select">';
+    html += '<option value="">' + FB.translations.selectIssueType + '</option>';
+    FB.issueTypes.forEach(function(type) {
+      html += '<option value="' + type.id + '">' + type.label + '</option>';
+    });
+    html += '</select>';
+    html += '</div>';
+
+    // Subtype container (hidden by default)
+    html += '<div id="pa-feedback-subtype-field" class="pa-feedback-field pa-feedback-hidden">';
+    html += '<label class="pa-feedback-label" for="pa-feedback-subtype">' + FB.translations.subtypeLabel + '</label>';
+    html += '<select id="pa-feedback-subtype" class="pa-feedback-select">';
+    html += '<option value="">' + FB.translations.selectSubtype + '</option>';
+    html += '</select>';
+    html += '</div>';
+    ` : ""}
+
+    // Comment (if enabled)
+    ${config.showComment ? `
+    html += '<div class="pa-feedback-field">';
+    html += '<label class="pa-feedback-label" for="pa-feedback-comment">' + FB.translations.commentLabel + '${config.commentRequired ? ' <span class="pa-feedback-required">*</span>' : ""}</label>';
+    html += '<textarea id="pa-feedback-comment" class="pa-feedback-textarea" maxlength="${config.commentMaxLength}" placeholder="${config.commentPlaceholder || ""}" rows="4"></textarea>';
+    html += '<div class="pa-feedback-counter"><span id="pa-feedback-char-count">0</span>/${config.commentMaxLength}</div>';
+    html += '</div>';
+    ` : ""}
+
+    // Error message area
+    html += '<div id="pa-feedback-error" class="pa-feedback-error pa-feedback-hidden"></div>';
+
+    // Submit button
+    html += '<button type="submit" id="pa-feedback-submit" class="pa-feedback-submit">';
+    html += '<span class="pa-feedback-submit-text">' + FB.translations.submit + '</span>';
+    html += '<span class="pa-feedback-submit-loading pa-feedback-hidden">' + FB.translations.submitting + '</span>';
+    html += '</button>';
+
+    html += '</form>';
+
+    // Success message
+    html += '<div id="pa-feedback-success" class="pa-feedback-success pa-feedback-hidden">';
+    html += '<div class="pa-feedback-checkmark">&#10003;</div>';
+    html += '<p>' + FB.translations.thankYou + '</p>';
+    html += '</div>';
+
+    html += '</div>'; // content
+    html += '</div>'; // modal
+
+    return html;
+  }
+
+  // ============================================================================
+  // EVENT HANDLERS
+  // ============================================================================
+
+  function setupEventListeners() {
+    // Tab click
+    document.getElementById('pa-feedback-tab').addEventListener('click', toggleModal);
+
+    // Close button
+    document.getElementById('pa-feedback-close').addEventListener('click', closeModal);
+
+    // Form submit
+    document.getElementById('pa-feedback-form').addEventListener('submit', handleSubmit);
+
+    // Click outside to close
+    document.getElementById('pa-feedback-modal').addEventListener('click', function(e) {
+      if (e.target === this) closeModal();
+    });
+
+    // Escape key to close
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && FB.isOpen) closeModal();
+    });
+
+    ${config.showRating ? `
+    // Star rating
+    var stars = document.querySelectorAll('.pa-feedback-star');
+    stars.forEach(function(star, index) {
+      star.addEventListener('click', function() {
+        FB.rating = index + 1;
+        updateStars();
+      });
+      star.addEventListener('mouseenter', function() {
+        highlightStars(index + 1);
+      });
+    });
+    document.querySelector('.pa-feedback-stars').addEventListener('mouseleave', function() {
+      highlightStars(FB.rating);
+    });
+    ` : ""}
+
+    ${config.showIssueType ? `
+    // Issue type change
+    document.getElementById('pa-feedback-issue-type').addEventListener('change', updateSubtypes);
+    ` : ""}
+
+    ${config.showComment ? `
+    // Character counter
+    document.getElementById('pa-feedback-comment').addEventListener('input', updateCharCount);
+    ` : ""}
+  }
+
+  function toggleModal() {
+    if (FB.isOpen) {
+      closeModal();
+    } else {
+      openModal();
+    }
+  }
+
+  function openModal() {
+    FB.isOpen = true;
+    document.getElementById('pa-feedback-modal').classList.remove('pa-feedback-hidden');
+    document.getElementById('pa-feedback-tab').classList.add('pa-feedback-tab-active');
+    log('Modal opened');
+  }
+
+  function closeModal() {
+    FB.isOpen = false;
+    document.getElementById('pa-feedback-modal').classList.add('pa-feedback-hidden');
+    document.getElementById('pa-feedback-tab').classList.remove('pa-feedback-tab-active');
+    log('Modal closed');
+  }
+
+  ${config.showRating ? `
+  function updateStars() {
+    var stars = document.querySelectorAll('.pa-feedback-star');
+    stars.forEach(function(star, index) {
+      var isFilled = index < FB.rating;
+      star.innerHTML = isFilled ? '&#9733;' : '&#9734;';
+      star.classList.toggle('pa-feedback-star-filled', isFilled);
+      star.setAttribute('aria-checked', isFilled ? 'true' : 'false');
+    });
+  }
+
+  function highlightStars(count) {
+    var stars = document.querySelectorAll('.pa-feedback-star');
+    stars.forEach(function(star, index) {
+      var isFilled = index < count;
+      star.innerHTML = isFilled ? '&#9733;' : '&#9734;';
+      star.classList.toggle('pa-feedback-star-hover', isFilled && count > FB.rating);
+    });
+  }
+  ` : ""}
+
+  ${config.showIssueType ? `
+  function updateSubtypes() {
+    var typeSelect = document.getElementById('pa-feedback-issue-type');
+    var subtypeField = document.getElementById('pa-feedback-subtype-field');
+    var subtypeSelect = document.getElementById('pa-feedback-subtype');
+    var selectedType = typeSelect.value;
+
+    // Find the selected issue type
+    var issueType = FB.issueTypes.find(function(t) { return t.id === selectedType; });
+
+    if (issueType && issueType.subtypes && issueType.subtypes.length > 0) {
+      // Populate subtypes
+      subtypeSelect.innerHTML = '<option value="">' + FB.translations.selectSubtype + '</option>';
+      issueType.subtypes.forEach(function(subtype) {
+        subtypeSelect.innerHTML += '<option value="' + subtype.id + '">' + subtype.label + '</option>';
+      });
+      subtypeField.classList.remove('pa-feedback-hidden');
+    } else {
+      subtypeField.classList.add('pa-feedback-hidden');
+      subtypeSelect.value = '';
+    }
+  }
+  ` : ""}
+
+  ${config.showComment ? `
+  function updateCharCount() {
+    var textarea = document.getElementById('pa-feedback-comment');
+    var counter = document.getElementById('pa-feedback-char-count');
+    counter.textContent = textarea.value.length;
+  }
+  ` : ""}
+
+  // ============================================================================
+  // FORM SUBMISSION
+  // ============================================================================
+
+  function validateForm() {
+    var errors = [];
+
+    ${config.showRating && config.ratingRequired ? `
+    if (FB.rating === 0) {
+      errors.push('Rating is required');
+    }
+    ` : ""}
+
+    ${config.showIssueType && config.issueTypeRequired ? `
+    if (!document.getElementById('pa-feedback-issue-type').value) {
+      errors.push('Issue type is required');
+    }
+    ` : ""}
+
+    ${config.showComment && config.commentRequired ? `
+    if (!document.getElementById('pa-feedback-comment').value.trim()) {
+      errors.push('Comment is required');
+    }
+    ` : ""}
+
+    return errors;
+  }
+
+  function collectFormData() {
+    var data = {};
+
+    ${config.showRating ? `data.rating = FB.rating;` : ""}
+    ${config.showIssueType ? `
+    data.issueType = document.getElementById('pa-feedback-issue-type').value || null;
+    data.issueSubtype = document.getElementById('pa-feedback-subtype').value || null;
+    ` : ""}
+    ${config.showComment ? `data.comment = document.getElementById('pa-feedback-comment').value.trim();` : ""}
+
+    // Add metadata
+    data.metadata = collectMetadata();
+
+    return data;
+  }
+
+  function collectMetadata() {
+    var meta = {};
+    var cfg = FB.config.includeMetadata;
+
+    if (cfg.courseId && window.pa_patcher && window.pa_patcher.lrs && window.pa_patcher.lrs.courseInfo) {
+      meta.courseId = window.pa_patcher.lrs.courseInfo.id;
+      meta.courseTitle = window.pa_patcher.lrs.courseInfo.title;
+    }
+
+    if (cfg.lessonId) {
+      meta.lessonId = window.location.hash || window.location.pathname;
+    }
+
+    if (cfg.userAgent) {
+      meta.userAgent = navigator.userAgent;
+    }
+
+    if (cfg.timestamp) {
+      meta.timestamp = new Date().toISOString();
+    }
+
+    if (cfg.url) {
+      meta.url = window.location.href;
+    }
+
+    return meta;
+  }
+
+  function showError(message) {
+    var errorEl = document.getElementById('pa-feedback-error');
+    errorEl.textContent = message;
+    errorEl.classList.remove('pa-feedback-hidden');
+  }
+
+  function hideError() {
+    document.getElementById('pa-feedback-error').classList.add('pa-feedback-hidden');
+  }
+
+  function setSubmitting(isSubmitting) {
+    var submitBtn = document.getElementById('pa-feedback-submit');
+    var textEl = submitBtn.querySelector('.pa-feedback-submit-text');
+    var loadingEl = submitBtn.querySelector('.pa-feedback-submit-loading');
+
+    submitBtn.disabled = isSubmitting;
+    textEl.classList.toggle('pa-feedback-hidden', isSubmitting);
+    loadingEl.classList.toggle('pa-feedback-hidden', !isSubmitting);
+  }
+
+  function showSuccess() {
+    document.getElementById('pa-feedback-form').classList.add('pa-feedback-hidden');
+    document.getElementById('pa-feedback-success').classList.remove('pa-feedback-hidden');
+
+    if (FB.config.autoClose) {
+      setTimeout(function() {
+        closeModal();
+        resetForm();
+      }, FB.config.autoCloseDelay);
+    }
+  }
+
+  function resetForm() {
+    var form = document.getElementById('pa-feedback-form');
+    form.reset();
+    form.classList.remove('pa-feedback-hidden');
+    document.getElementById('pa-feedback-success').classList.add('pa-feedback-hidden');
+    hideError();
+
+    FB.rating = 0;
+    ${config.showRating ? "updateStars();" : ""}
+    ${config.showComment ? "updateCharCount();" : ""}
+    ${config.showIssueType ? `
+    document.getElementById('pa-feedback-subtype-field').classList.add('pa-feedback-hidden');
+    ` : ""}
+  }
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    hideError();
+
+    // Validate
+    var errors = validateForm();
+    if (errors.length > 0) {
+      showError(FB.translations.errorRequired);
+      return;
+    }
+
+    // Collect data
+    var data = collectFormData();
+    log('Submitting:', data);
+
+    // Submit
+    setSubmitting(true);
+
+    try {
+      ${config.endpoint ? `
+      var response = await fetch('${config.endpoint}', {
+        method: '${config.method}',
+        headers: Object.assign({
+          'Content-Type': 'application/json',
+        }, FB.config.headers || {}),
+        body: JSON.stringify(data),
+      });
+
+      if (!response.ok) {
+        throw new Error('HTTP ' + response.status);
+      }
+
+      log('Submitted successfully');
+      ` : `
+      // No endpoint configured - just log
+      console.log('[PA-Feedback] Feedback submitted:', data);
+      log('No endpoint configured, feedback logged to console');
+      `}
+
+      showSuccess();
+    } catch (err) {
+      log('Submit error:', err);
+      showError(FB.translations.errorSubmitting);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  // ============================================================================
+  // INITIALIZATION
+  // ============================================================================
+
+  function init() {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', createWidget);
+    } else {
+      createWidget();
+    }
+    log('Initialized');
+  }
+
+  init();
+
+})();
+`;
+}
+
+// src/styles.ts
+function generateFeedbackStyles(config) {
+  const position = config.position;
+  const tabColor = config.tabColor;
+  const tabTextColor = config.tabTextColor;
+  const zIndex = config.zIndex;
+  return `
+/* ============================================================================
+   FEEDBACK WIDGET STYLES - Patch-Adams Plugin v1.0.0
+   ============================================================================ */
+
+#pa-feedback-container {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #333;
+  box-sizing: border-box;
+}
+
+#pa-feedback-container *,
+#pa-feedback-container *::before,
+#pa-feedback-container *::after {
+  box-sizing: inherit;
+}
+
+/* Hidden utility class */
+#pa-feedback-container .pa-feedback-hidden {
+  display: none !important;
+}
+
+/* ============================================================================
+   TAB BUTTON
+   ============================================================================ */
+
+#pa-feedback-tab {
+  position: fixed;
+  ${position}: 0;
+  top: 50%;
+  transform: translateY(-50%) rotate(${position === "right" ? "-90deg" : "90deg"});
+  transform-origin: ${position === "right" ? "right center" : "left center"};
+  ${position === "right" ? "right: -32px;" : "left: -32px;"}
+  z-index: ${zIndex};
+  background: ${tabColor};
+  color: ${tabTextColor};
+  border: none;
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  border-radius: ${position === "right" ? "0 0 8px 8px" : "8px 8px 0 0"};
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+#pa-feedback-tab:hover {
+  background: ${adjustColor(tabColor, -15)};
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+#pa-feedback-tab:focus {
+  outline: 2px solid ${tabColor};
+  outline-offset: 2px;
+}
+
+#pa-feedback-tab.pa-feedback-tab-active {
+  background: ${adjustColor(tabColor, -20)};
+}
+
+/* ============================================================================
+   MODAL
+   ============================================================================ */
+
+#pa-feedback-modal {
+  position: fixed;
+  ${position}: 0;
+  top: 0;
+  width: 360px;
+  height: 100%;
+  z-index: ${zIndex + 1};
+  background: rgba(0, 0, 0, 0.3);
+  display: flex;
+  justify-content: flex-${position === "right" ? "end" : "start"};
+  animation: pa-feedback-fade-in 0.2s ease;
+}
+
+@keyframes pa-feedback-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+#pa-feedback-container .pa-feedback-content {
+  width: 100%;
+  max-width: 360px;
+  height: 100%;
+  background: #fff;
+  box-shadow: ${position === "right" ? "-4px" : "4px"} 0 20px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  animation: pa-feedback-slide-in 0.2s ease;
+}
+
+@keyframes pa-feedback-slide-in {
+  from {
+    transform: translateX(${position === "right" ? "100%" : "-100%"});
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* ============================================================================
+   HEADER
+   ============================================================================ */
+
+#pa-feedback-container .pa-feedback-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e5e5e5;
+  background: #fafafa;
+}
+
+#pa-feedback-container .pa-feedback-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #222;
+}
+
+#pa-feedback-container .pa-feedback-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: #666;
+  cursor: pointer;
+  padding: 4px 8px;
+  line-height: 1;
+  border-radius: 4px;
+  transition: all 0.15s ease;
+}
+
+#pa-feedback-container .pa-feedback-close:hover {
+  background: #e5e5e5;
+  color: #333;
+}
+
+/* ============================================================================
+   FORM
+   ============================================================================ */
+
+#pa-feedback-form {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+#pa-feedback-container .pa-feedback-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+#pa-feedback-container .pa-feedback-label {
+  font-weight: 500;
+  color: #444;
+  font-size: 14px;
+}
+
+#pa-feedback-container .pa-feedback-required {
+  color: #dc3545;
+}
+
+/* ============================================================================
+   STAR RATING
+   ============================================================================ */
+
+#pa-feedback-container .pa-feedback-stars {
+  display: flex;
+  gap: 4px;
+}
+
+#pa-feedback-container .pa-feedback-star {
+  background: none;
+  border: none;
+  font-size: 28px;
+  color: #ccc;
+  cursor: pointer;
+  padding: 4px;
+  line-height: 1;
+  transition: all 0.15s ease;
+}
+
+#pa-feedback-container .pa-feedback-star:hover {
+  transform: scale(1.1);
+}
+
+#pa-feedback-container .pa-feedback-star-filled,
+#pa-feedback-container .pa-feedback-star-hover {
+  color: #ffc107;
+}
+
+/* ============================================================================
+   SELECT & TEXTAREA
+   ============================================================================ */
+
+#pa-feedback-container .pa-feedback-select {
+  width: 100%;
+  padding: 10px 12px;
+  font-size: 14px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: #fff;
+  color: #333;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+#pa-feedback-container .pa-feedback-select:focus {
+  outline: none;
+  border-color: ${tabColor};
+  box-shadow: 0 0 0 3px ${hexToRgba(tabColor, 0.1)};
+}
+
+#pa-feedback-container .pa-feedback-textarea {
+  width: 100%;
+  padding: 12px;
+  font-size: 14px;
+  font-family: inherit;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  resize: vertical;
+  min-height: 100px;
+  transition: border-color 0.15s ease;
+}
+
+#pa-feedback-container .pa-feedback-textarea:focus {
+  outline: none;
+  border-color: ${tabColor};
+  box-shadow: 0 0 0 3px ${hexToRgba(tabColor, 0.1)};
+}
+
+#pa-feedback-container .pa-feedback-textarea::placeholder {
+  color: #999;
+}
+
+#pa-feedback-container .pa-feedback-counter {
+  text-align: right;
+  font-size: 12px;
+  color: #888;
+}
+
+/* ============================================================================
+   ERROR MESSAGE
+   ============================================================================ */
+
+#pa-feedback-container .pa-feedback-error {
+  background: #fee2e2;
+  color: #dc2626;
+  padding: 10px 14px;
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+/* ============================================================================
+   SUBMIT BUTTON
+   ============================================================================ */
+
+#pa-feedback-container .pa-feedback-submit {
+  width: 100%;
+  padding: 12px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+  background: ${tabColor};
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  margin-top: auto;
+}
+
+#pa-feedback-container .pa-feedback-submit:hover:not(:disabled) {
+  background: ${adjustColor(tabColor, -15)};
+}
+
+#pa-feedback-container .pa-feedback-submit:focus {
+  outline: 2px solid ${tabColor};
+  outline-offset: 2px;
+}
+
+#pa-feedback-container .pa-feedback-submit:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+/* ============================================================================
+   SUCCESS MESSAGE
+   ============================================================================ */
+
+#pa-feedback-container .pa-feedback-success {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+}
+
+#pa-feedback-container .pa-feedback-checkmark {
+  width: 64px;
+  height: 64px;
+  background: #10b981;
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  margin-bottom: 20px;
+  animation: pa-feedback-pop 0.3s ease;
+}
+
+@keyframes pa-feedback-pop {
+  0% { transform: scale(0); }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}
+
+#pa-feedback-container .pa-feedback-success p {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+}
+`;
+}
+function adjustColor(hex, percent) {
+  hex = hex.replace(/^#/, "");
+  let r = parseInt(hex.substring(0, 2), 16);
+  let g = parseInt(hex.substring(2, 4), 16);
+  let b = parseInt(hex.substring(4, 6), 16);
+  r = Math.min(255, Math.max(0, r + r * percent / 100));
+  g = Math.min(255, Math.max(0, g + g * percent / 100));
+  b = Math.min(255, Math.max(0, b + b * percent / 100));
+  return "#" + Math.round(r).toString(16).padStart(2, "0") + Math.round(g).toString(16).padStart(2, "0") + Math.round(b).toString(16).padStart(2, "0");
+}
+function hexToRgba(hex, alpha) {
+  hex = hex.replace(/^#/, "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+// src/index.ts
+var feedbackPlugin = {
+  name: "feedback",
+  version: "1.0.0",
+  description: "Inject a feedback form widget into Rise courses for collecting user feedback",
+  configSchema: FeedbackConfigSchema,
+  generateCss(config) {
+    return {
+      after: generateFeedbackStyles(config)
+    };
+  },
+  generateJs(config) {
+    return {
+      after: generateFeedbackWidget(config)
+    };
+  }
+};
+var index_default = feedbackPlugin;
+
+export { DEFAULT_ISSUE_TYPES, FeedbackConfigSchema, index_default as default, feedbackPlugin, generateFeedbackStyles, generateFeedbackWidget, getTranslations, translations };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map