rimelight-components 1.1.3 → 1.1.4

package/dist/module.mjs

@@ -39,9 +39,15 @@ const module = defineNuxtModule({
           ]
         }
       }
+    },
+    "motion-v/nuxt": {
+      version: ">=1.7.2",
+      optional: false,
+      overrides: {},
+      defaults: {}
     }
   },
-  setup() {
+  setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     addComponentsDir({
       path: resolver.resolve("./runtime/components/"),
@@ -50,6 +56,7 @@ const module = defineNuxtModule({
       global: true
     });
     addImportsDir(resolver.resolve("./runtime/composables"));
+    addImportsDir(resolver.resolve("./runtime/utils"));
   },
   onInstall() {
     console.log("Setting up rimelight-components for the first time!");

package/dist/runtime/components/{app/ConstructionBanner.d.vue.ts → feedback/Feedback.d.vue.ts}

@@ -1,5 +1,8 @@
 type __VLS_Props = {
-    to: string;
+    page: {
+        title: string;
+        stem: string;
+    };
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/feedback/Feedback.vue

@@ -0,0 +1,207 @@
+<script setup>
+import { AnimatePresence, MotionConfig, motion } from "motion-v";
+const {} = defineProps({
+  page: { type: Object, required: true }
+});
+const {
+  formState,
+  isExpanded,
+  isSubmitted,
+  isSubmitting,
+  handleRatingSelect,
+  submitFeedback
+} = useFeedbackForm(props);
+</script>
+
+<template>
+  <MotionConfig
+    :transition="{ type: 'spring', visualDuration: 0.25, bounce: 0 }"
+  >
+    <motion.div layout class="max-w-md rounded-lg">
+      <AnimatePresence mode="wait">
+        <!-- Success State -->
+        <motion.div
+          v-if="isSubmitted"
+          key="success"
+          :initial="{ opacity: 0, scale: 0.95 }"
+          :animate="{ opacity: 1, scale: 1 }"
+          :transition="{ duration: 0.3 }"
+          class="flex items-center gap-3 py-2"
+          role="status"
+          aria-live="polite"
+          aria-label="Feedback submitted successfully"
+        >
+          <motion.div
+            :initial="{ scale: 0 }"
+            :animate="{ scale: 1 }"
+            :transition="{ delay: 0.1, type: 'spring', visualDuration: 0.4 }"
+            class="text-xl"
+            aria-hidden="true"
+          >
+            ✨
+          </motion.div>
+          <motion.div
+            :initial="{ opacity: 0, x: 10 }"
+            :animate="{ opacity: 1, x: 0 }"
+            :transition="{ delay: 0.2, duration: 0.3 }"
+          >
+            <div class="text-sm font-medium text-highlighted">
+              Thank you for your feedback!
+            </div>
+            <div class="mt-1 text-xs text-muted">
+              Your input helps us improve the documentation.
+            </div>
+          </motion.div>
+        </motion.div>
+
+        <motion.div v-else key="feedback">
+          <fieldset>
+            <motion.div layout class="flex items-center gap-3">
+              <motion.legend
+                id="feedback-legend"
+                layout
+                class="text-sm font-medium whitespace-nowrap text-highlighted"
+              >
+                Was this helpful?
+              </motion.legend>
+
+              <motion.div
+                layout
+                class="flex gap-2"
+                role="radiogroup"
+                aria-labelledby="feedback-legend"
+              >
+                <UButton
+                  v-for="option in FEEDBACK_OPTIONS"
+                  :key="option.value"
+                  class="flex size-8 items-center justify-center rounded-lg border grayscale-80 transition-all duration-150 hover:grayscale-0 focus:outline-2 focus:outline-offset-2 focus:outline-primary"
+                  :class="[
+  formState.rating === option.value ? 'border-primary bg-primary/20 grayscale-0 hover:bg-primary/30' : 'border-default bg-accented/20 hover:border-accented/70 hover:bg-accented/80'
+]"
+                  :aria-label="`Rate as ${option.label}`"
+                  :aria-pressed="formState.rating === option.value"
+                  role="radio"
+                  :aria-checked="formState.rating === option.value"
+                  @click="handleRatingSelect(option.value)"
+                >
+                  <span class="text-lg">{{ option.emoji }}</span>
+                </UButton>
+              </motion.div>
+            </motion.div>
+          </fieldset>
+
+          <AnimatePresence>
+            <motion.div
+              v-if="isExpanded"
+              key="expanded-form"
+              :initial="{ opacity: 0, height: 0, marginTop: 0 }"
+              :animate="{ opacity: 1, height: 'auto', marginTop: 8 }"
+              :exit="{ opacity: 0, height: 0, marginTop: 0 }"
+              :transition="{ duration: 0.3, ease: 'easeInOut' }"
+              class="overflow-hidden"
+              role="region"
+              aria-label="Additional feedback form"
+            >
+              <motion.div
+                :initial="{ opacity: 0 }"
+                :animate="{ opacity: 1 }"
+                :transition="{ delay: 0.15, duration: 0.2 }"
+                class="space-y-1"
+              >
+                <UForm
+                  :state="formState"
+                  :schema="feedbackFormSchema"
+                  @submit="submitFeedback"
+                >
+                  <UFormField name="feedback">
+                    <label for="feedback-textarea" class="sr-only">
+                      Additional feedback (optional)
+                    </label>
+                    <UTextarea
+                      id="feedback-textarea"
+                      ref="textareaRef"
+                      v-model="formState.feedback"
+                      class="resize-vertical w-full rounded-xl text-sm leading-relaxed"
+                      placeholder="Share your thoughts... (optional)"
+                      :rows="4"
+                      autoresize
+                      aria-describedby="feedback-help"
+                    />
+                    <div id="feedback-help" class="sr-only">
+                      Provide additional details about your experience with this
+                      page
+                    </div>
+                  </UFormField>
+                  <div class="mt-2 flex items-center">
+                    <div class="flex gap-2">
+                      <UButton
+                        size="sm"
+                        :disabled="isSubmitting"
+                        type="submit"
+                        class="focus:outline-0"
+                        :aria-label="
+  isSubmitting ? 'Sending feedback...' : 'Send feedback'
+"
+                      >
+                        <motion.span
+                          class="flex items-center"
+                          :transition="{ duration: 0.2, ease: 'easeInOut' }"
+                        >
+                          <motion.div
+                            :animate="{
+  width: isSubmitting ? '14px' : '0px',
+  marginRight: isSubmitting ? '6px' : '0px',
+  opacity: isSubmitting ? 1 : 0,
+  scale: isSubmitting ? 1 : 0,
+  rotate: isSubmitting ? 360 : 0
+}"
+                            :transition="{
+  width: { duration: 0.2, ease: 'easeInOut' },
+  marginRight: { duration: 0.2, ease: 'easeInOut' },
+  opacity: { duration: 0.2 },
+  scale: {
+    duration: 0.2,
+    type: 'spring',
+    bounce: 0.3
+  },
+  rotate: {
+    duration: 1,
+    ease: 'linear',
+    repeat: Infinity
+  }
+}"
+                            class="flex items-center justify-center overflow-hidden"
+                          >
+                            <Icon
+                              name="mdi:loading"
+                              class="size-3.5 shrink-0"
+                            />
+                          </motion.div>
+                          <motion.span
+                            :animate="{
+  opacity: 1
+}"
+                            :transition="{ duration: 0.2, ease: 'easeInOut' }"
+                          >
+                            {{ isSubmitting ? "Sending..." : "Send" }}
+                          </motion.span>
+                        </motion.span>
+                      </UButton>
+                    </div>
+                  </div>
+                </UForm>
+              </motion.div>
+            </motion.div>
+          </AnimatePresence>
+        </motion.div>
+      </AnimatePresence>
+
+      <div aria-live="polite" class="sr-only">
+        <span v-if="isSubmitting">Sending your feedback...</span>
+        <span v-else-if="isExpanded && formState.rating">
+          Feedback form expanded. You can now add additional comments.
+        </span>
+      </div>
+    </motion.div>
+  </MotionConfig>
+</template>

package/dist/runtime/components/{app/ConstructionBanner.vue.d.ts → feedback/Feedback.vue.d.ts}

@@ -1,5 +1,8 @@
 type __VLS_Props = {
-    to: string;
+    page: {
+        title: string;
+        stem: string;
+    };
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/feedback/FeedbackChart.d.vue.ts

@@ -0,0 +1,18 @@
+type PageAnalytic = {
+    path: string;
+    total: number;
+    positive: number;
+    negative: number;
+    averageScore: number;
+    positivePercentage: number;
+    feedback: any[];
+    lastFeedback: any;
+    createdAt: Date;
+    updatedAt: Date;
+};
+type __VLS_Props = {
+    pageAnalytics: PageAnalytic[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/feedback/FeedbackChart.vue

@@ -0,0 +1,604 @@
+<script setup>
+const {} = defineProps({
+  pageAnalytics: { type: Array, required: true }
+});
+const { dateRange } = useDateRange();
+const chartType = ref(`line`);
+const selectedPagePaths = ref([]);
+const showPageSelector = ref(false);
+const pageSearchQuery = ref(``);
+const hasValidData = computed(() => {
+  return props.pageAnalytics && props.pageAnalytics.length > 0 && props.pageAnalytics.some((p) => p && p.total > 0);
+});
+const availablePages = computed(() => {
+  if (!props.pageAnalytics) return [];
+  const pages = props.pageAnalytics.filter((p) => p && p.total > 0).sort((a, b) => b.total - a.total).map((page) => ({
+    path: page.path,
+    title: page.lastFeedback?.title || page.path,
+    total: page.total,
+    score: page.averageScore
+  }));
+  if (!pageSearchQuery.value.trim()) {
+    return pages;
+  }
+  const searchTerm = pageSearchQuery.value.toLowerCase().trim();
+  return pages.filter(
+    (page) => page.title.toLowerCase().includes(searchTerm) || page.path.toLowerCase().includes(searchTerm)
+  );
+});
+watch(
+  () => props.pageAnalytics,
+  (analytics) => {
+    if (selectedPagePaths.value.length === 0 && analytics && analytics.length > 0) {
+      const validAnalytics = analytics.filter((p) => p && p.total > 0);
+      if (validAnalytics.length > 0) {
+        const topPages = validAnalytics.sort((a, b) => b.total - a.total).slice(0, Math.min(5, validAnalytics.length));
+        selectedPagePaths.value = topPages.map((p) => p.path);
+      }
+    }
+  },
+  {
+    immediate: true
+  }
+);
+const overallChartData = computed(() => {
+  const data = [];
+  const endDate = dateRange.value.end;
+  const startDate = dateRange.value.start;
+  const daysDiff = Math.ceil(
+    (endDate.getTime() - startDate.getTime()) / (1e3 * 60 * 60 * 24)
+  );
+  const dailyScores = {};
+  if (hasValidData.value && props.pageAnalytics) {
+    props.pageAnalytics.forEach((page) => {
+      if (!page || !page.feedback) return;
+      page.feedback.forEach((feedback) => {
+        const feedbackDate = new Date(feedback.createdAt);
+        if (feedbackDate >= startDate && feedbackDate <= endDate) {
+          const dateStr = feedbackDate.toISOString().split(`T`)[0];
+          if (!dailyScores[dateStr]) {
+            dailyScores[dateStr] = [];
+          }
+          const ratingScore = FEEDBACK_OPTIONS.find((opt) => opt.value === feedback.rating)?.score || 0;
+          dailyScores[dateStr].push(ratingScore);
+        }
+      });
+    });
+  }
+  let lastKnownValue = 0;
+  for (let i = daysDiff - 1; i >= 0; i--) {
+    const date = new Date(endDate);
+    date.setDate(date.getDate() - i);
+    const dateStr = date.toISOString().split(`T`)[0];
+    const entry = {
+      date: dateStr,
+      day: date.toLocaleDateString(`en-US`, {
+        month: `short`,
+        day: `numeric`
+      })
+    };
+    if (hasValidData.value && dailyScores[dateStr] && dailyScores[dateStr].length > 0) {
+      const dayAverage = dailyScores[dateStr].reduce((sum, score) => sum + score, 0) / dailyScores[dateStr].length;
+      lastKnownValue = Math.min(4, Number(dayAverage.toFixed(2)));
+    }
+    entry.average = lastKnownValue;
+    data.push(entry);
+  }
+  return data;
+});
+const timeBasedChartData = computed(() => {
+  const data = [];
+  const endDate = dateRange.value.end;
+  const startDate = dateRange.value.start;
+  const daysDiff = Math.ceil(
+    (endDate.getTime() - startDate.getTime()) / (1e3 * 60 * 60 * 24)
+  );
+  if (!hasValidData.value || selectedPagePaths.value.length === 0 || !props.pageAnalytics) {
+    for (let i = daysDiff - 1; i >= 0; i--) {
+      const date = new Date(endDate);
+      date.setDate(date.getDate() - i);
+      data.push({
+        date: date.toISOString().split(`T`)[0],
+        day: date.toLocaleDateString(`en-US`, {
+          month: `short`,
+          day: `numeric`
+        }),
+        placeholder: 0
+      });
+    }
+    return data;
+  }
+  const dailyScores = {};
+  const selectedPages = props.pageAnalytics.filter(
+    (p) => p && selectedPagePaths.value.includes(p.path)
+  );
+  selectedPages.forEach((page) => {
+    if (!page || !page.feedback) return;
+    const pageKey = page.path.split(`/`).pop()?.replace(/[^a-z0-9]/gi, ``) || `page`;
+    page.feedback.forEach((feedback) => {
+      const feedbackDate = new Date(feedback.createdAt);
+      if (feedbackDate >= startDate && feedbackDate <= endDate) {
+        const dateStr = feedbackDate.toISOString().split(`T`)[0];
+        if (!dailyScores[dateStr]) {
+          dailyScores[dateStr] = {};
+        }
+        if (!dailyScores[dateStr][pageKey]) {
+          dailyScores[dateStr][pageKey] = [];
+        }
+        const ratingScore = FEEDBACK_OPTIONS.find((opt) => opt.value === feedback.rating)?.score || 0;
+        dailyScores[dateStr][pageKey].push(ratingScore);
+      }
+    });
+  });
+  const lastKnownValues = {};
+  for (let i = daysDiff - 1; i >= 0; i--) {
+    const date = new Date(endDate);
+    date.setDate(date.getDate() - i);
+    const dateStr = date.toISOString().split(`T`)[0];
+    const entry = {
+      date: dateStr,
+      day: date.toLocaleDateString(`en-US`, {
+        month: `short`,
+        day: `numeric`
+      })
+    };
+    selectedPages.forEach((page) => {
+      if (!page) return;
+      const pageKey = page.path.split(`/`).pop()?.replace(/[^a-z0-9]/gi, ``) || `page`;
+      if (dailyScores[dateStr] && dailyScores[dateStr][pageKey] && dailyScores[dateStr][pageKey].length > 0) {
+        const dayAverage = dailyScores[dateStr][pageKey].reduce((sum, score) => sum + score, 0) / dailyScores[dateStr][pageKey].length;
+        lastKnownValues[pageKey] = Math.min(4, Number(dayAverage.toFixed(2)));
+      }
+      entry[pageKey] = lastKnownValues[pageKey] || 0;
+    });
+    data.push(entry);
+  }
+  return data;
+});
+const comparisonChartData = computed(() => {
+  if (!hasValidData.value || selectedPagePaths.value.length === 0 || !props.pageAnalytics) {
+    return [
+      {
+        page: `No Data`,
+        positive: 0,
+        negative: 0
+      }
+    ];
+  }
+  return props.pageAnalytics.filter((p) => p && selectedPagePaths.value.includes(p.path)).map((page) => {
+    const title = page.lastFeedback?.title || page.path;
+    const shortTitle = title.length > 15 ? title.substring(0, 15) + `...` : title;
+    return {
+      page: shortTitle,
+      positive: page.positive,
+      negative: page.negative
+    };
+  });
+});
+const chartData = computed(() => {
+  if (chartType.value === `compare`) return comparisonChartData.value;
+  if (chartType.value === `overall`) return overallChartData.value;
+  return timeBasedChartData.value;
+});
+const chartCategories = computed(() => {
+  if (!hasValidData.value) {
+    return {
+      placeholder: {
+        name: `No Data Available`,
+        color: `#6b7280`
+      }
+    };
+  }
+  if (chartType.value === `compare`) {
+    return {
+      positive: {
+        name: `Positive`,
+        color: `var(--ui-success)`
+      },
+      negative: {
+        name: `Negative`,
+        color: `var(--ui-error)`
+      }
+    };
+  }
+  if (chartType.value === `overall`) {
+    return {
+      average: {
+        name: `Overall Rating`,
+        color: `#3b82f6`
+      }
+    };
+  }
+  if (selectedPagePaths.value.length === 0 || !props.pageAnalytics) {
+    return {
+      placeholder: {
+        name: `No Pages Selected`,
+        color: `#6b7280`
+      }
+    };
+  }
+  const selectedPages = props.pageAnalytics.filter(
+    (p) => p && selectedPagePaths.value.includes(p.path)
+  );
+  const colors = [
+    `#3b82f6`,
+    `#10b981`,
+    `#f59e0b`,
+    `#ef4444`,
+    `#8b5cf6`,
+    `#06b6d4`,
+    `#84cc16`,
+    `#f97316`
+  ];
+  return selectedPages.reduce(
+    (acc, page, index) => {
+      if (!page) return acc;
+      const key = page.path.split(`/`).pop()?.replace(/[^a-z0-9]/gi, ``) || `page`;
+      const title = page.lastFeedback?.title || page.path;
+      acc[key] = {
+        name: title.length > 25 ? title.substring(0, 25) + `...` : title,
+        color: colors[index % colors.length]
+      };
+      return acc;
+    },
+    {}
+  );
+});
+const xFormatter = (index) => {
+  if (chartType.value === `compare`) {
+    return comparisonChartData.value[index]?.page || ``;
+  }
+  if (chartType.value === `overall`) {
+    return overallChartData.value[index]?.day || ``;
+  }
+  return timeBasedChartData.value[index]?.day || ``;
+};
+const yFormatter = (value) => {
+  if (chartType.value === `compare`) {
+    return Math.round(value).toString();
+  }
+  return value === 0 ? `0` : `${Number(value).toFixed(1)}/4`;
+};
+const dateRangeLabel = computed(() => {
+  if (chartType.value === `compare`) {
+    return `Selected Pages (${selectedPagePaths.value.length})`;
+  }
+  const daysDiff = Math.ceil(
+    (dateRange.value.end.getTime() - dateRange.value.start.getTime()) / (1e3 * 60 * 60 * 24)
+  );
+  if (daysDiff <= 7) return `Last ${daysDiff} days`;
+  if (daysDiff <= 31) return `Last ${daysDiff} days`;
+  if (daysDiff <= 93) return `Last ${Math.round(daysDiff / 30)} months`;
+  if (daysDiff <= 186) return `Last ${Math.round(daysDiff / 30)} months`;
+  return `Last ${Math.round(daysDiff / 365)} year${daysDiff > 730 ? `s` : ``}`;
+});
+const chartTitle = computed(() => {
+  switch (chartType.value) {
+    case `line`:
+      return `Rating Evolution`;
+    case `compare`:
+      return `Page Comparison`;
+    case `overall`:
+      return `Overall Documentation Rating`;
+    default:
+      return `Rating Evolution`;
+  }
+});
+const chartDescription = computed(() => {
+  switch (chartType.value) {
+    case `line`:
+      return `Track selected pages satisfaction over time`;
+    case `compare`:
+      return `Compare feedback distribution across pages`;
+    case `overall`:
+      return `Global documentation satisfaction evolution`;
+    default:
+      return `Track selected pages satisfaction over time`;
+  }
+});
+const chartIcon = computed(() => {
+  switch (chartType.value) {
+    case `line`:
+      return `i-lucide-trending-up`;
+    case `compare`:
+      return `i-lucide-bar-chart-4`;
+    case `overall`:
+      return `i-lucide-activity`;
+    default:
+      return `i-lucide-trending-up`;
+  }
+});
+const availableChartTypes = [
+  {
+    value: `line`,
+    label: `Line`,
+    icon: `i-lucide-trending-up`
+  },
+  {
+    value: `compare`,
+    label: `Compare`,
+    icon: `i-lucide-bar-chart-4`
+  },
+  {
+    value: `overall`,
+    label: `Overall`,
+    icon: `i-lucide-activity`
+  }
+];
+function togglePageSelection(pagePath) {
+  const index = selectedPagePaths.value.indexOf(pagePath);
+  if (index > -1) {
+    selectedPagePaths.value.splice(index, 1);
+  } else {
+    selectedPagePaths.value.push(pagePath);
+  }
+}
+function selectTopPages(count) {
+  if (!props.pageAnalytics) return;
+  const pages = props.pageAnalytics.filter((p) => p && p.total > 0).sort((a, b) => b.total - a.total).slice(0, count);
+  selectedPagePaths.value = pages.map((p) => p.path);
+}
+function selectBestRatedPages(count) {
+  if (!props.pageAnalytics) return;
+  const pages = props.pageAnalytics.filter((p) => p && p.total > 0).sort((a, b) => b.averageScore - a.averageScore).slice(0, count);
+  selectedPagePaths.value = pages.map((p) => p.path);
+}
+function selectWorstPages(count) {
+  if (!props.pageAnalytics) return;
+  const pages = props.pageAnalytics.filter((p) => p && p.total > 0).sort((a, b) => a.averageScore - b.averageScore).slice(0, count);
+  selectedPagePaths.value = pages.map((p) => p.path);
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div
+      class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between"
+    >
+      <Motion
+        :key="`header-${chartType}`"
+        :initial="{ opacity: 0, y: 10 }"
+        :animate="{ opacity: 1, y: 0 }"
+        :transition="{ duration: 0.4, ease: 'easeInOut' }"
+        class="flex items-center gap-3"
+      >
+        <UIcon
+          :name="chartIcon"
+          class="size-6 shrink-0 text-primary sm:size-5"
+        />
+        <div class="min-w-0">
+          <h3 class="truncate text-lg font-semibold">
+            {{ chartTitle }}
+          </h3>
+          <p class="text-sm text-muted">
+            {{ chartDescription }}
+          </p>
+        </div>
+      </Motion>
+
+      <div
+        class="flex flex-wrap items-center gap-2 max-sm:flex-row-reverse max-sm:justify-end"
+      >
+        <AnimatePresence mode="wait">
+          <Motion
+            v-if="chartType !== 'overall'"
+            :initial="{ opacity: 0, scale: 0.9 }"
+            :animate="{ opacity: 1, scale: 1 }"
+            :exit="{ opacity: 0, scale: 0.9 }"
+            :transition="{ duration: 0.3 }"
+          >
+            <UChip :text="selectedPagePaths.length" size="3xl">
+              <UButton
+                color="neutral"
+                variant="outline"
+                icon="i-lucide-settings"
+                @click="showPageSelector = true"
+              />
+            </UChip>
+          </Motion>
+        </AnimatePresence>
+
+        <div
+          class="flex items-center gap-1 rounded-lg border border-default p-1"
+        >
+          <UButton
+            v-for="type in availableChartTypes"
+            :key="type.value"
+            :color="chartType === type.value ? 'primary' : 'neutral'"
+            :variant="chartType === type.value ? 'solid' : 'ghost'"
+            size="sm"
+            :icon="type.icon"
+            :label="type.label"
+            @click="chartType = type.value"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="relative mb-8 overflow-hidden rounded-xl">
+      <div class="dot-pattern -top-5 right-0 left-0 h-[300px]" />
+
+      <LineChart
+        v-if="chartType === 'overall'"
+        :data="chartData"
+        :categories="chartCategories"
+        :x-formatter="xFormatter"
+        :y-formatter="yFormatter"
+        :x-label="dateRangeLabel"
+        y-label="Rating (out of 4)"
+        :show-tooltip="true"
+      />
+
+      <LineChart
+        v-else-if="chartType === 'line'"
+        :data="chartData"
+        :categories="chartCategories"
+        :x-formatter="xFormatter"
+        :y-formatter="yFormatter"
+        :x-label="dateRangeLabel"
+        y-label="Rating (out of 4)"
+        :show-tooltip="true"
+        class="min-h-[300px]"
+      />
+
+      <BarChart
+        v-else-if="chartType === 'compare'"
+        :data="chartData"
+        :categories="chartCategories"
+        :y-axis="['positive', 'negative']"
+        :stacked="true"
+        :x-formatter="xFormatter"
+        :y-formatter="yFormatter"
+        :x-label="dateRangeLabel"
+        y-label="Feedback Count"
+        :height="300"
+        :bar-padding="0.2"
+        :y-grid-line="false"
+        class="min-h-[300px]"
+      />
+    </div>
+
+    <div v-if="!hasValidData" class="py-4 text-center">
+      <p class="text-sm text-muted">
+        Chart shows no data - will display real trends once feedback is
+        collected
+      </p>
+    </div>
+
+    <UModal v-model:open="showPageSelector" :ui="{ content: 'max-w-2xl' }">
+      <template #content>
+        <UCard>
+          <template #header>
+            <UButton
+              size="sm"
+              variant="ghost"
+              color="neutral"
+              icon="i-lucide-x"
+              class="absolute top-2 right-2"
+              @click="showPageSelector = false"
+            />
+            <div class="space-y-3">
+              <h3 class="text-lg font-semibold">
+                Select Pages to {{ chartType === "line" ? "Track" : "Compare" }}
+              </h3>
+              <div class="flex flex-wrap items-center gap-2">
+                <span class="text-sm font-medium text-muted"
+                  >Quick select:</span
+                >
+                <UButton
+                  size="sm"
+                  variant="soft"
+                  color="neutral"
+                  label="Best Rated 5"
+                  @click="selectBestRatedPages(5)"
+                />
+                <UButton
+                  size="sm"
+                  variant="soft"
+                  color="neutral"
+                  label="Most Popular 5"
+                  @click="selectTopPages(5)"
+                />
+                <UButton
+                  size="sm"
+                  variant="soft"
+                  color="neutral"
+                  label="Worst Rated 5"
+                  @click="selectWorstPages(5)"
+                />
+                <UButton
+                  size="sm"
+                  variant="soft"
+                  color="neutral"
+                  label="Worst Rated 10"
+                  @click="selectWorstPages(10)"
+                />
+              </div>
+            </div>
+          </template>
+
+          <div class="mb-4">
+            <UInput
+              v-model="pageSearchQuery"
+              placeholder="Search pages..."
+              icon="i-lucide-search"
+              class="w-full"
+              :ui="{ trailing: 'pe-1' }"
+            >
+              <template v-if="pageSearchQuery?.length" #trailing>
+                <UButton
+                  color="neutral"
+                  variant="link"
+                  size="sm"
+                  icon="i-lucide-circle-x"
+                  aria-label="Clear input"
+                  @click="pageSearchQuery = ''"
+                />
+              </template>
+            </UInput>
+          </div>
+
+          <div class="max-h-96 space-y-3 overflow-y-auto">
+            <div
+              v-for="page in availablePages"
+              :key="page.path"
+              class="flex cursor-pointer items-center justify-between rounded-lg border border-default p-3 transition-colors hover:bg-muted/50"
+              :class="{
+  'border-primary/20 bg-primary/5 hover:bg-primary/10': selectedPagePaths.includes(page.path)
+}"
+              @click="togglePageSelection(page.path)"
+            >
+              <div class="flex min-w-0 flex-1 items-center gap-3">
+                <UCheckbox
+                  :model-value="selectedPagePaths.includes(page.path)"
+                  @update:model-value="togglePageSelection(page.path)"
+                />
+                <div class="min-w-0 flex-1">
+                  <div class="truncate text-sm font-medium">
+                    {{ page.title }}
+                  </div>
+                  <code class="block truncate text-xs text-muted">{{
+                    page.path
+                  }}</code>
+                </div>
+              </div>
+              <div class="flex shrink-0 items-center gap-2 text-sm sm:gap-4">
+                <div class="text-center">
+                  <div class="font-semibold">
+                    {{ page.total }}
+                  </div>
+                  <div class="text-xs text-muted">resp.</div>
+                </div>
+                <div class="text-center">
+                  <div
+                    class="font-semibold"
+                    :class="
+  page.score >= 3.5 ? 'text-success' : page.score >= 3 ? 'text-warning' : 'text-error'
+"
+                  >
+                    {{ page.score.toFixed(1) }}/4
+                  </div>
+                  <div class="text-xs text-muted">score</div>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="availablePages.length === 0" class="py-8 text-center">
+              <UIcon
+                name="i-lucide-search-x"
+                class="mx-auto mb-2 size-8 text-muted"
+              />
+              <p class="text-sm text-muted">
+                No pages found matching your search
+              </p>
+            </div>
+          </div>
+        </UCard>
+      </template>
+    </UModal>
+  </div>
+</template>
+
+<style>
+:root{--vis-tooltip-background-color:hsla(0,0%,100%,.95)!important;--vis-tooltip-border-color:rgba(0,0,0,.1)!important;--vis-tooltip-text-color:rgba(0,0,0,.9)!important;--vis-tooltip-label-color:rgba(0,0,0,.7)!important;--vis-tooltip-value-color:#000!important;--vis-axis-grid-color:hsla(0,0%,100%,.1)!important;--vis-axis-tick-label-color:var(--ui-text-muted)!important;--vis-axis-label-color:var(--ui-text-toned)!important;--vis-legend-label-color:var(--ui-text-muted)!important;--dot-pattern-color:#111827}.dark{--vis-tooltip-background-color:rgba(15,23,42,.95)!important;--vis-tooltip-border-color:hsla(0,0%,100%,.1)!important;--vis-tooltip-text-color:hsla(0,0%,100%,.9)!important;--vis-tooltip-label-color:hsla(0,0%,100%,.7)!important;--vis-tooltip-value-color:#fff!important;--dot-pattern-color:#9ca3af}.dot-pattern{background-image:radial-gradient(var(--dot-pattern-color) 1px,transparent 1px);background-position:-8.5px -8.5px;background-size:7px 7px;-webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 75%);mask-image:radial-gradient(ellipse at center,#000,transparent 75%);opacity:20%;position:absolute}
+</style>

package/dist/runtime/components/feedback/FeedbackChart.vue.d.ts

@@ -0,0 +1,18 @@
+type PageAnalytic = {
+    path: string;
+    total: number;
+    positive: number;
+    negative: number;
+    averageScore: number;
+    positivePercentage: number;
+    feedback: any[];
+    lastFeedback: any;
+    createdAt: Date;
+    updatedAt: Date;
+};
+type __VLS_Props = {
+    pageAnalytics: PageAnalytic[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/feedback/FeedbackDatePicker.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/feedback/FeedbackDatePicker.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { getLocalTimeZone, CalendarDate, today } from "@internationalized/date";
+import { formatDateRange } from "little-date";
+const { dateRange, setDateRange, setPresetRange } = useDateRange();
+const formattedDateRange = computed(() => {
+  if (dateRange.value.start && dateRange.value.end) {
+    return formatDateRange(dateRange.value.start, dateRange.value.end, {
+      includeTime: false
+    });
+  }
+  return null;
+});
+const ranges = [
+  {
+    label: `Last 7 days`,
+    preset: `week`
+  },
+  {
+    label: `Last 30 days`,
+    preset: `month`
+  },
+  {
+    label: `Last 3 months`,
+    preset: `3months`
+  },
+  {
+    label: `Last 6 months`,
+    preset: `6months`
+  },
+  {
+    label: `Last year`,
+    preset: `year`
+  }
+];
+const toCalendarDate = (date) => {
+  return new CalendarDate(
+    date.getFullYear(),
+    date.getMonth() + 1,
+    date.getDate()
+  );
+};
+const calendarRange = computed({
+  get: () => ({
+    start: dateRange.value.start ? toCalendarDate(dateRange.value.start) : void 0,
+    end: dateRange.value.end ? toCalendarDate(dateRange.value.end) : void 0
+  }),
+  set: (newValue) => {
+    if (newValue.start && newValue.end) {
+      setDateRange({
+        start: newValue.start.toDate(getLocalTimeZone()),
+        end: newValue.end.toDate(getLocalTimeZone())
+      });
+    }
+  }
+});
+const isRangeSelected = (preset) => {
+  if (!dateRange.value.start || !dateRange.value.end) return false;
+  const currentDate = today(getLocalTimeZone());
+  let startDate = currentDate.copy();
+  switch (preset) {
+    case `week`:
+      startDate = startDate.subtract({
+        days: 7
+      });
+      break;
+    case `month`:
+      startDate = startDate.subtract({
+        days: 30
+      });
+      break;
+    case `3months`:
+      startDate = startDate.subtract({
+        months: 3
+      });
+      break;
+    case `6months`:
+      startDate = startDate.subtract({
+        months: 6
+      });
+      break;
+    case `year`:
+      startDate = startDate.subtract({
+        years: 1
+      });
+      break;
+  }
+  const selectedStart = toCalendarDate(dateRange.value.start);
+  const selectedEnd = toCalendarDate(dateRange.value.end);
+  return Math.abs(
+    selectedStart.toDate(getLocalTimeZone()).getTime() - startDate.toDate(getLocalTimeZone()).getTime()
+  ) < 24 * 60 * 60 * 1e3 && Math.abs(
+    selectedEnd.toDate(getLocalTimeZone()).getTime() - currentDate.toDate(getLocalTimeZone()).getTime()
+  ) < 24 * 60 * 60 * 1e3;
+};
+</script>
+
+<template>
+  <div class="mb-4 flex w-full items-center justify-center">
+    <UPopover :content="{ align: 'center' }" :modal="true">
+      <UButton
+        color="neutral"
+        variant="outline"
+        icon="i-lucide-calendar"
+        class="group min-w-fit data-[state=open]:bg-elevated"
+      >
+        <span class="truncate">
+          <template v-if="formattedDateRange">
+            {{ formattedDateRange }}
+          </template>
+          <template v-else> Pick a date range </template>
+        </span>
+
+        <template #trailing>
+          <UIcon
+            name="i-lucide-chevron-down"
+            class="size-5 shrink-0 text-dimmed transition-transform duration-200 group-data-[state=open]:rotate-180"
+          />
+        </template>
+      </UButton>
+
+      <template #content>
+        <div class="flex items-stretch divide-default sm:divide-x">
+          <div class="hidden min-w-[140px] flex-col justify-center sm:flex">
+            <UButton
+              v-for="(range, index) in ranges"
+              :key="index"
+              :label="range.label"
+              color="neutral"
+              variant="ghost"
+              class="justify-start rounded-none px-4"
+              :class="[
+  isRangeSelected(range.preset) ? 'bg-elevated' : 'hover:bg-elevated/50'
+]"
+              truncate
+              @click="setPresetRange(range.preset)"
+            />
+          </div>
+
+          <UCalendar
+            v-model="calendarRange"
+            class="p-2"
+            :number-of-months="2"
+            range
+          />
+        </div>
+      </template>
+    </UPopover>
+  </div>
+</template>

package/dist/runtime/components/feedback/FeedbackDatePicker.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/feedback/FeedbackItem.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    feedback: FeedbackItem;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    delete: (id: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((id: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/feedback/FeedbackItem.vue

@@ -0,0 +1,77 @@
+<script setup>
+const {} = defineProps({
+  feedback: { type: null, required: true }
+});
+const emit = defineEmits([]);
+const { getRatingFromFeedback, getScoreColor } = useFeedbackRatings();
+const rating = computed(() => getRatingFromFeedback(props.feedback));
+const isDeleting = ref(false);
+async function handleDelete() {
+  if (!confirm(`Are you sure you want to delete this feedback?`)) {
+    return;
+  }
+  isDeleting.value = true;
+  try {
+    emit(`delete`, props.feedback.id);
+  } finally {
+    isDeleting.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="rounded-lg border border-default p-4">
+    <div class="mb-3 flex items-start justify-between">
+      <div class="flex items-center gap-3">
+        <div class="flex flex-col items-center">
+          <span class="text-2xl">{{ rating.emoji }}</span>
+          <span class="text-xs font-bold" :class="getScoreColor(rating.score)">
+            {{ rating.score }}/4
+          </span>
+        </div>
+        <div>
+          <div class="mb-1 flex items-center gap-2">
+            <span class="text-sm font-medium">{{ rating.label }}</span>
+          </div>
+          <div class="flex items-center gap-3 text-xs text-muted">
+            <span class="flex items-center gap-1">
+              <UIcon name="i-lucide-calendar" class="size-3" />
+              {{
+                new Date(feedback.updatedAt).toLocaleDateString("en-US", {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+  hour: "2-digit",
+  minute: "2-digit"
+})
+              }}
+            </span>
+            <span v-if="feedback.country" class="flex items-center gap-1">
+              <UIcon name="i-lucide-map-pin" class="size-3" />
+              {{ feedback.country }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <UButton
+        color="error"
+        variant="ghost"
+        size="sm"
+        icon="i-lucide-trash-2"
+        :loading="isDeleting"
+        :disabled="isDeleting"
+        @click="handleDelete"
+      />
+    </div>
+
+    <div
+      v-if="feedback.feedback"
+      class="rounded bg-muted/30 p-3 text-sm leading-relaxed"
+    >
+      "{{ feedback.feedback }}"
+    </div>
+    <div v-else class="text-sm text-muted italic">
+      No additional comment provided
+    </div>
+  </div>
+</template>

package/dist/runtime/components/feedback/FeedbackItem.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    feedback: FeedbackItem;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    delete: (id: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((id: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/feedback/FeedbackStatCard.d.vue.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    icon: string;
+    iconColor?: string;
+    value: number | string;
+    label: string;
+    description?: string;
+    descriptionColor?: string;
+    popoverStats?: {
+        percentage?: string;
+        trend?: string;
+        lastPeriod?: string;
+        details?: string;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/feedback/FeedbackStatCard.vue

@@ -0,0 +1,66 @@
+<script setup>
+const { iconColor = `text-primary`, descriptionColor = `text-muted` } = defineProps({
+  icon: { type: String, required: true },
+  iconColor: { type: String, required: false },
+  value: { type: [Number, String], required: true },
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  descriptionColor: { type: String, required: false },
+  popoverStats: { type: Object, required: false }
+});
+</script>
+
+<template>
+  <UPopover mode="hover" arrow :open-delay="300" :close-delay="200">
+    <div
+      class="flex cursor-pointer items-center gap-3 rounded-lg border border-default bg-muted/20 px-4 py-3 transition-colors hover:bg-muted/30"
+    >
+      <UIcon :name="icon" :class="`size-6 ${iconColor} shrink-0`" />
+      <div>
+        <div class="text-xl font-bold">
+          {{ value }}
+        </div>
+        <div class="text-sm text-muted">
+          {{ label }}
+        </div>
+      </div>
+    </div>
+
+    <template #content>
+      <div class="min-w-64 p-4">
+        <div class="mb-3 flex items-center gap-2">
+          <UIcon :name="icon" :class="`size-5 ${iconColor}`" />
+          <h3 class="font-semibold">{{ label }} Details</h3>
+        </div>
+
+        <div class="space-y-2 text-sm">
+          <div v-if="popoverStats?.percentage" class="flex justify-between">
+            <span class="text-muted">Percentage:</span>
+            <span class="font-medium">{{ popoverStats.percentage }}</span>
+          </div>
+
+          <div v-if="popoverStats?.trend" class="flex justify-between">
+            <span class="text-muted">Status:</span>
+            <span class="font-medium">
+              {{ popoverStats.trend }}
+            </span>
+          </div>
+
+          <div v-if="popoverStats?.lastPeriod" class="flex justify-between">
+            <span class="text-muted">Last 7 days:</span>
+            <span class="font-medium">{{ popoverStats.lastPeriod }}</span>
+          </div>
+
+          <div
+            v-if="popoverStats?.details"
+            class="border-t border-default pt-2"
+          >
+            <p class="text-xs text-muted">
+              {{ popoverStats.details }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>

package/dist/runtime/components/feedback/FeedbackStatCard.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    icon: string;
+    iconColor?: string;
+    value: number | string;
+    label: string;
+    description?: string;
+    descriptionColor?: string;
+    popoverStats?: {
+        percentage?: string;
+        trend?: string;
+        lastPeriod?: string;
+        details?: string;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "rimelight-components",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "My new Nuxt module",
-  "repository": "RimelightEntertainment/rimelight-components",
+  "repository": "Rimelight  Entertainment/rimelight-components",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -38,7 +38,9 @@
     "playground"
   ],
   "dependencies": {
+    "@nuxt/image": "^1.11.0",
     "@nuxt/kit": "^4.1.3",
+    "@nuxt/ui": "^4.0.1",
     "date-fns": "^4.1.0",
     "nuxt": "^4.1.3",
     "tailwind-variants": "^3.1.1",
@@ -49,14 +51,23 @@
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.1.3",
     "@nuxt/test-utils": "^3.19.2",
+    "@prettier/plugin-oxc": "^0.0.4",
     "@types/node": "latest",
     "changelogen": "^0.6.2",
-    "typescript": "~5.9.3",
-    "vitest": "^3.2.4",
-    "vue-tsc": "^3.1.0",
-    "@prettier/plugin-oxc": "^0.0.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "motion-v": "^1.7.2",
     "oxlint": "^1.21.0",
     "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.6.14"
-  }
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3",
+    "vitest": "^3.2.4",
+    "vue-tsc": "^3.1.0"
+  },
+  "trustedDependencies": [
+    "@parcel/watcher",
+    "@tailwindcss/oxide"
+  ]
 }

package/dist/runtime/components/app/ConstructionBanner.vue

@@ -1,23 +0,0 @@
-<script setup>
-import { ref } from "vue";
-const { to } = defineProps({
-  to: { type: String, required: true }
-});
-const actions = ref([
-  {
-    label: "View on GitHub",
-    trailingIcon: "mdi:github",
-    to
-  }
-]);
-</script>
-
-<template>
-  <UBanner
-      color="primary"
-      icon="lucide:construction"
-      title="This website is currently under construction. Feel free to report any issues!"
-      :actions="actions"
-      close
-  />
-</template>