nuxt-ui-elements-pro 0.1.9 → 0.1.11

package/dist/module.d.mts

@@ -1,4 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { FeedbackModuleConfig } from '../dist/runtime/types/feedback-widget.js';
 export * from '../dist/runtime/types/index.js';
 
 interface ModuleOptions {
@@ -12,6 +13,10 @@ interface ModuleOptions {
      * Can also be set via NUXT_UI_ELEMENTS_PRO_KEY env variable
      */
     license?: string;
+    /**
+     * Feedback widget server-side configuration
+     */
+    feedback?: FeedbackModuleConfig;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-ui-elements-pro",
   "configKey": "uiElementsPro",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { addTemplate, useLogger, defineNuxtModule, createResolver, addImportsDir, addComponentsDir } from '@nuxt/kit';
+import { addTemplate, useLogger, defineNuxtModule, createResolver, addImportsDir, addComponentsDir, addServerHandler } from '@nuxt/kit';
 import { kebabCase } from 'scule';
 import { ofetch } from 'ofetch';
 
@@ -15,9 +15,10 @@ const eventCalendar = (options) => ({
     weekdayCell: "py-2 text-center text-xs font-medium text-muted uppercase tracking-wider",
     monthBody: "flex flex-col select-none",
     monthWeekRow: "relative",
-    dayCell: "border-b border-r border-default hover:bg-elevated/50 cursor-pointer",
+    dayCell: "relative border-b border-r border-default hover:bg-elevated/50 cursor-pointer",
     dayCellOutside: "bg-muted/20",
-    monthDayNumber: "relative z-[1] p-1",
+    monthDayCell: "absolute inset-0 pointer-events-none",
+    monthDayNumber: "relative z-[1] p-1 pointer-events-none",
     dayNumber: "text-xs font-medium p-1 leading-none",
     dayNumberToday: "inline-flex items-center justify-center size-6 rounded-full text-inverted font-semibold",
     dayNumberOutside: "text-muted",
@@ -50,6 +51,7 @@ const eventCalendar = (options) => ({
       "relative z-[2] flex items-center text-xs px-1.5 truncate cursor-pointer",
       "text-[var(--event-color)]"
     ],
+    timeGridWrapper: "relative flex-1 min-h-0 flex flex-col",
     timeGrid: "relative flex items-start flex-1 min-h-0 overflow-auto select-none",
     timeGutter: "sticky left-0 z-10 w-16 shrink-0 bg-default border-r border-default",
     timeGutterSlot: "relative border-b border-default/50",
@@ -215,9 +217,220 @@ const orgChart = (options) => ({
   }
 });
 
+const feedbackWidget = (options) => ({
+  slots: {
+    // Root wrapper (positioned fixed)
+    root: "fixed z-50",
+    // Floating trigger button
+    button: [
+      "flex items-center justify-center rounded-full shadow-lg cursor-pointer",
+      "size-12 transition-all duration-200 hover:scale-105 hover:shadow-xl"
+    ],
+    buttonIcon: "size-5 text-inverted",
+    // Panel container
+    panel: [
+      "flex flex-col rounded-xl border border-default bg-default shadow-2xl",
+      "w-[380px] max-h-[520px] overflow-hidden",
+      "transition-all duration-200"
+    ],
+    panelHidden: "scale-95 opacity-0 pointer-events-none",
+    panelVisible: "scale-100 opacity-100",
+    // Panel header
+    panelHeader: "flex items-center justify-between px-4 py-3 border-b border-default",
+    panelTitle: "text-sm font-semibold text-highlighted",
+    panelCloseButton: "text-muted hover:text-highlighted cursor-pointer",
+    // Type selector
+    typeSelector: "grid gap-2 p-4",
+    typeOption: [
+      "flex items-center gap-3 rounded-lg border border-default p-3 cursor-pointer",
+      "hover:bg-elevated/50 transition-colors"
+    ],
+    typeOptionSelected: "ring-2",
+    typeOptionIcon: "size-5 shrink-0",
+    typeOptionLabel: "text-sm font-medium text-highlighted",
+    typeOptionDescription: "text-xs text-muted",
+    // Back button
+    backButton: "w-fit",
+    // Form
+    form: "flex flex-col gap-3 p-4 overflow-y-auto",
+    formField: "flex flex-col gap-1",
+    formLabel: "text-xs font-medium text-muted",
+    formInput: "",
+    formTextarea: "",
+    // Screenshot
+    screenshotButton: "flex items-center gap-1.5 text-xs text-muted hover:text-highlighted cursor-pointer",
+    screenshotPreview: "relative rounded-md border border-default overflow-hidden",
+    screenshotImage: "w-full h-20 object-cover",
+    screenshotRemove: "absolute top-1 right-1 size-5 flex items-center justify-center rounded-full bg-default/80 cursor-pointer",
+    // Honeypot (visually hidden)
+    honeypot: "absolute -left-[9999px] opacity-0 h-0 w-0 overflow-hidden",
+    // CAPTCHA container
+    captchaContainer: "flex justify-center py-2",
+    // Submit area
+    submitArea: "flex items-center justify-between px-4 py-3 border-t border-default",
+    submitButton: "",
+    // Success state
+    successState: "flex flex-col items-center justify-center gap-3 p-8 text-center",
+    successIcon: "size-12",
+    successTitle: "text-sm font-semibold text-highlighted",
+    successMessage: "text-xs text-muted",
+    // Error message
+    errorMessage: "text-xs text-error px-4 pb-2"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    position: {
+      "bottom-right": "",
+      "bottom-left": "",
+      "top-right": "",
+      "top-left": ""
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      class: {
+        button: `bg-${color} hover:bg-${color}/90`,
+        typeOptionSelected: `ring-${color} bg-${color}/5`,
+        successIcon: `text-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      class: {
+        button: "bg-inverted hover:bg-inverted/90",
+        typeOptionSelected: "ring-inverted bg-inverted/5",
+        successIcon: "text-inverted"
+      }
+    },
+    {
+      position: "bottom-right",
+      class: {
+        root: "bottom-4 right-4",
+        panel: "absolute bottom-16 right-0 origin-bottom-right"
+      }
+    },
+    {
+      position: "bottom-left",
+      class: {
+        root: "bottom-4 left-4",
+        panel: "absolute bottom-16 left-0 origin-bottom-left"
+      }
+    },
+    {
+      position: "top-right",
+      class: {
+        root: "top-4 right-4",
+        panel: "absolute top-16 right-0 origin-top-right"
+      }
+    },
+    {
+      position: "top-left",
+      class: {
+        root: "top-4 left-4",
+        panel: "absolute top-16 left-0 origin-top-left"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    position: "bottom-right"
+  }
+});
+
+const ganttChart = (options) => ({
+  slots: {
+    // Root container
+    root: "relative w-full border border-default rounded-lg bg-default flex flex-col overflow-hidden",
+    // Header bar
+    header: "flex items-center justify-between px-4 py-3 border-b border-default",
+    headerTitle: "text-base font-semibold text-highlighted",
+    headerActions: "flex items-center gap-2",
+    headerNav: "flex items-center gap-1",
+    zoomSwitcher: "flex items-center gap-0.5 bg-elevated rounded-lg p-0.5",
+    // Body (scrollable container)
+    body: "flex-1 overflow-auto relative",
+    // Timeline
+    timeline: "relative min-w-full",
+    timelineHeader: "sticky top-0 z-10 bg-default border-b border-default",
+    headerGroupRow: "flex border-b border-default",
+    headerGroup: "flex items-center justify-center text-xs font-medium text-muted border-r border-default py-1.5 shrink-0",
+    headerColumnRow: "flex",
+    headerColumn: "flex items-center justify-center text-xs text-muted border-r border-default py-1 shrink-0",
+    headerColumnWeekend: "bg-muted/10",
+    headerColumnToday: "font-semibold text-highlighted",
+    // Grid
+    grid: "relative",
+    gridLine: "absolute top-0 bottom-0 border-r border-default/20 shrink-0",
+    weekendColumn: "bg-muted/5",
+    row: "absolute left-0 right-0 border-b border-default/10",
+    rowEven: "bg-elevated/20",
+    // Today marker
+    todayMarker: "absolute top-0 bottom-0 w-0.5 z-[5]",
+    // Task bar — per-task color via --task-color CSS variable set by getTaskStyle()
+    taskBar: [
+      "absolute flex items-center rounded cursor-pointer group select-none z-[2]",
+      "text-xs overflow-hidden",
+      "hover:shadow-md transition-shadow"
+    ],
+    taskBarInner: "absolute inset-0 rounded opacity-20 bg-[var(--task-color)]",
+    taskBarProgress: "absolute inset-y-0 left-0 rounded-l opacity-30 bg-[var(--task-color)]",
+    taskBarTitle: "relative z-[1] px-2 truncate font-medium text-[var(--task-color)]",
+    // Group bar
+    groupBar: "absolute flex items-center cursor-pointer select-none z-[2]",
+    groupBarShape: "absolute bottom-1 left-0 right-0 h-1.5 rounded-full opacity-60 bg-[var(--task-color)]",
+    groupBarEndCap: "absolute bottom-1 w-1.5 h-3 rounded-sm opacity-60 bg-[var(--task-color)]",
+    groupToggle: "size-4 shrink-0 flex items-center justify-center cursor-pointer text-muted hover:text-highlighted",
+    groupTitle: "text-xs font-semibold text-highlighted truncate ml-1",
+    // Milestone
+    milestone: "absolute flex items-center justify-center z-[2]",
+    milestoneDiamond: "size-3.5 rotate-45 rounded-sm bg-[var(--task-color)]",
+    // Resize handles
+    resizeHandleLeft: "absolute left-0 top-0 bottom-0 w-1.5 cursor-w-resize opacity-0 group-hover:opacity-100 transition-opacity rounded-l z-[2] bg-[var(--task-color)]",
+    resizeHandleRight: "absolute right-0 top-0 bottom-0 w-1.5 cursor-e-resize opacity-0 group-hover:opacity-100 transition-opacity rounded-r z-[2] bg-[var(--task-color)]",
+    // Dependency layer
+    dependencyLayer: "absolute inset-0 pointer-events-none overflow-visible z-[1]",
+    dependencyArrow: "fill-none text-muted stroke-current",
+    // Loading
+    loadingOverlay: "absolute inset-0 z-30 flex items-center justify-center bg-default/60",
+    // Empty state
+    emptyState: "flex flex-col items-center justify-center gap-2 py-14 text-center",
+    emptyStateText: "text-sm text-muted"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    }
+  },
+  compoundVariants: [
+    // todayMarker uses the component-level color variant (not per-task)
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      class: {
+        todayMarker: `bg-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      class: {
+        todayMarker: "bg-inverted"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary"
+  }
+});
+
 const theme = {
   __proto__: null,
   eventCalendar: eventCalendar,
+  feedbackWidget: feedbackWidget,
+  ganttChart: ganttChart,
   orgChart: orgChart
 };
 
@@ -350,6 +563,33 @@ Add it to your \`.env\` file to build for production.`
       prefix: options.prefix,
       pattern: "*.vue"
     });
+    if (options.feedback) {
+      const fb = options.feedback;
+      nuxt.options.runtimeConfig.public = nuxt.options.runtimeConfig.public || {};
+      nuxt.options.runtimeConfig.public.uiElementsProFeedback = {
+        captchaProvider: fb.captcha?.provider,
+        captchaSiteKey: fb.captcha?.siteKey
+      };
+      nuxt.options.runtimeConfig.uiElementsProFeedback = {
+        webhook: fb.webhook,
+        emailTo: fb.email?.to,
+        emailFrom: fb.email?.from,
+        smtpHost: fb.email?.smtp?.host,
+        smtpPort: fb.email?.smtp?.port,
+        smtpSecure: fb.email?.smtp?.secure,
+        smtpUser: fb.email?.smtp?.auth?.user,
+        smtpPass: fb.email?.smtp?.auth?.pass,
+        captchaSecretKey: fb.captcha?.secretKey,
+        captchaProvider: fb.captcha?.provider,
+        rateLimitMax: fb.rateLimit?.max,
+        rateLimitWindow: fb.rateLimit?.window
+      };
+      addServerHandler({
+        route: "/api/_feedback",
+        method: "post",
+        handler: resolver.resolve("./runtime/server/api/_feedback.post")
+      });
+    }
   }
 });
 

package/dist/runtime/components/EventCalendar.d.vue.ts

@@ -108,6 +108,10 @@ export interface EventCalendarSlots {
     "month-day-header"?: (props: {
         day: CalendarDay;
     }) => any;
+    /** Full day-cell overlay for custom interactive content (month view). Container has pointer-events: none; use pointer-events-auto on your content. */
+    "month-day-cell"?: (props: {
+        day: CalendarDay;
+    }) => any;
     /** Customize "+N more" indicator (month view) */
     "month-more-events"?: (props: {
         events: CalendarEvent[];

package/dist/runtime/components/EventCalendar.vue

@@ -102,11 +102,11 @@ const selection = useEventCalendarSelect({
   },
   startHour: () => {
     const v = internalView.value;
-    return v === "day" ? props.dayOptions?.startHour ?? 7 : props.weekOptions?.startHour ?? 7;
+    return v === "day" ? props.dayOptions?.startHour ?? 0 : props.weekOptions?.startHour ?? 0;
   },
   endHour: () => {
     const v = internalView.value;
-    return v === "day" ? props.dayOptions?.endHour ?? 22 : props.weekOptions?.endHour ?? 22;
+    return v === "day" ? props.dayOptions?.endHour ?? 24 : props.weekOptions?.endHour ?? 24;
   },
   onSelect: (payload) => emit("select", payload)
 });
@@ -229,6 +229,9 @@ defineExpose({
         <template v-if="slots['month-day-header']" #month-day-header="dayProps">
           <slot name="month-day-header" v-bind="dayProps" />
         </template>
+        <template v-if="slots['month-day-cell']" #month-day-cell="cellProps">
+          <slot name="month-day-cell" v-bind="cellProps" />
+        </template>
         <template v-if="slots['month-more-events']" #month-more-events="moreProps">
           <slot name="month-more-events" v-bind="moreProps" />
         </template>

package/dist/runtime/components/EventCalendar.vue.d.ts

@@ -108,6 +108,10 @@ export interface EventCalendarSlots {
     "month-day-header"?: (props: {
         day: CalendarDay;
     }) => any;
+    /** Full day-cell overlay for custom interactive content (month view). Container has pointer-events: none; use pointer-events-auto on your content. */
+    "month-day-cell"?: (props: {
+        day: CalendarDay;
+    }) => any;
     /** Customize "+N more" indicator (month view) */
     "month-more-events"?: (props: {
         events: CalendarEvent[];

package/dist/runtime/components/FeedbackWidget.d.vue.ts

@@ -0,0 +1,118 @@
+import type { AppConfig } from "@nuxt/schema";
+import type { ComponentConfig } from "nuxt-ui-elements";
+import type { FeedbackType, FeedbackTypeId, FeedbackSubmission, FeedbackSubmitResult, FeedbackWidgetPosition, FeedbackWidgetContext } from "../types/feedback-widget.js";
+import { type Component } from "vue";
+import theme from "#build/ui-elements-pro/feedback-widget";
+type FeedbackWidgetTheme = ComponentConfig<typeof theme, AppConfig, "feedbackWidget">;
+export interface FeedbackWidgetProps {
+    /** Rendered element type @defaultValue 'div' */
+    as?: string | Component;
+    /** Configurable feedback type options @defaultValue bug/feature/general */
+    feedbackTypes?: FeedbackType[];
+    /** Widget position @defaultValue 'bottom-right' */
+    position?: FeedbackWidgetPosition;
+    /** Theme color @defaultValue 'primary' */
+    color?: FeedbackWidgetTheme["variants"]["color"];
+    /** Show screenshot capture button @defaultValue false */
+    showScreenshot?: boolean;
+    /** Custom button icon @defaultValue 'i-lucide-message-square-plus' */
+    buttonIcon?: string;
+    /** Button label (screen reader) @defaultValue 'Send feedback' */
+    buttonLabel?: string;
+    /** Panel title @defaultValue 'Send Feedback' */
+    title?: string;
+    /** Email field placeholder @defaultValue 'your@email.com' */
+    emailPlaceholder?: string;
+    /** Message field placeholder @defaultValue 'Tell us what you think...' */
+    messagePlaceholder?: string;
+    /** Custom submit handler. If provided, bypasses built-in server route. */
+    onSubmit?: (submission: FeedbackSubmission) => Promise<FeedbackSubmitResult> | FeedbackSubmitResult;
+    /** Built-in endpoint path @defaultValue '/api/_feedback' */
+    submitEndpoint?: string;
+    /** Slot class overrides */
+    ui?: FeedbackWidgetTheme["slots"];
+}
+export interface FeedbackWidgetEmits {
+    /** Fires when the panel opens */
+    open: [];
+    /** Fires when the panel closes */
+    close: [];
+    /** Fires after successful submission */
+    success: [submission: FeedbackSubmission];
+    /** Fires on submission error */
+    error: [message: string];
+}
+export interface FeedbackWidgetSlots {
+    /** Compound mode: full rendering control */
+    default?: (props: FeedbackWidgetContext) => any;
+    /** Custom trigger button */
+    button?: (props: {
+        open: () => void;
+        close: () => void;
+        toggle: () => void;
+        isOpen: boolean;
+    }) => any;
+    /** Custom panel header */
+    "panel-header"?: (props: {
+        title: string;
+        close: () => void;
+    }) => any;
+    /** Custom type selector */
+    "type-selector"?: (props: {
+        types: FeedbackType[];
+        selected: FeedbackTypeId | null;
+        select: (id: FeedbackTypeId) => void;
+    }) => any;
+    /** Custom form fields */
+    form?: (props: {
+        email: string;
+        message: string;
+        screenshot: string | null;
+    }) => any;
+    /** Custom success state */
+    success?: (props: {
+        reset: () => void;
+        close: () => void;
+    }) => any;
+    /** Custom submit button area */
+    "submit-area"?: (props: {
+        submit: () => void;
+        isValid: boolean;
+        isSubmitting: boolean;
+    }) => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FeedbackWidgetProps, {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    reset: () => void;
+    submit: () => Promise<void>;
+    isOpen: import("vue").Ref<boolean, boolean>;
+    isSubmitted: import("vue").Ref<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    success: (submission: FeedbackSubmission) => any;
+    error: (message: string) => any;
+    close: () => any;
+    open: () => any;
+}, string, import("vue").PublicProps, Readonly<FeedbackWidgetProps> & Readonly<{
+    onSuccess?: ((submission: FeedbackSubmission) => any) | undefined;
+    onError?: ((message: string) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+}>, {
+    title: string;
+    position: FeedbackWidgetPosition;
+    buttonIcon: string;
+    showScreenshot: boolean;
+    buttonLabel: string;
+    emailPlaceholder: string;
+    messagePlaceholder: string;
+    submitEndpoint: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FeedbackWidgetSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FeedbackWidget.vue

@@ -0,0 +1,141 @@
+<script>
+import { Primitive } from "reka-ui";
+import { computed, provide, useSlots } from "vue";
+import { tv } from "../utils/tv";
+import { useFeedbackWidget } from "../composables/useFeedbackWidget";
+import { feedbackWidgetContextKey } from "../composables/useFeedbackWidgetContext";
+import FeedbackWidgetButton from "./feedback-widget/FeedbackWidgetButton.vue";
+import FeedbackWidgetPanel from "./feedback-widget/FeedbackWidgetPanel.vue";
+import { useRuntimeConfig } from "#imports";
+import theme from "#build/ui-elements-pro/feedback-widget";
+const DEFAULT_TYPES = [
+  { id: "bug", label: "Bug Report", icon: "i-lucide-bug", description: "Something isn't working" },
+  { id: "feature", label: "Feature Request", icon: "i-lucide-lightbulb", description: "Suggest an improvement" },
+  { id: "general", label: "General Feedback", icon: "i-lucide-message-circle", description: "Share your thoughts" }
+];
+</script>
+
+<script setup>
+const props = defineProps({
+  as: { type: null, required: false },
+  feedbackTypes: { type: Array, required: false },
+  position: { type: String, required: false, default: "bottom-right" },
+  color: { type: null, required: false },
+  showScreenshot: { type: Boolean, required: false, default: false },
+  buttonIcon: { type: String, required: false, default: "i-lucide-message-square-plus" },
+  buttonLabel: { type: String, required: false, default: "Send feedback" },
+  title: { type: String, required: false, default: "Send Feedback" },
+  emailPlaceholder: { type: String, required: false, default: "your@email.com" },
+  messagePlaceholder: { type: String, required: false, default: "Tell us what you think..." },
+  onSubmit: { type: Function, required: false },
+  submitEndpoint: { type: String, required: false, default: "/api/_feedback" },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["open", "close", "success", "error"]);
+defineSlots();
+const slots = useSlots();
+const runtimeConfig = useRuntimeConfig();
+const captchaPublic = computed(() => runtimeConfig.public?.uiElementsProFeedback);
+const ui = computed(
+  () => tv({
+    extend: tv(theme)
+  })({
+    color: props.color ?? "primary",
+    position: props.position
+  })
+);
+const widget = useFeedbackWidget({
+  feedbackTypes: () => props.feedbackTypes ?? DEFAULT_TYPES,
+  position: () => props.position,
+  showScreenshot: () => props.showScreenshot,
+  emailPlaceholder: () => props.emailPlaceholder,
+  messagePlaceholder: () => props.messagePlaceholder,
+  captchaEnabled: () => !!captchaPublic.value?.captchaSiteKey,
+  captchaProvider: () => captchaPublic.value?.captchaProvider ?? null,
+  captchaSiteKey: () => captchaPublic.value?.captchaSiteKey ?? null,
+  submitEndpoint: () => props.submitEndpoint,
+  onSubmit: () => props.onSubmit,
+  onOpen: () => emit("open"),
+  onClose: () => emit("close"),
+  onSuccess: (submission) => emit("success", submission),
+  onError: (message) => emit("error", message)
+});
+const ctx = {
+  isOpen: widget.isOpen,
+  isSubmitting: widget.isSubmitting,
+  isSubmitted: widget.isSubmitted,
+  submitError: widget.submitError,
+  selectedType: widget.selectedType,
+  email: widget.email,
+  message: widget.message,
+  screenshot: widget.screenshot,
+  honeypot: widget.honeypot,
+  feedbackTypes: widget.feedbackTypes,
+  position: widget.position,
+  showScreenshot: widget.showScreenshot,
+  emailPlaceholder: widget.emailPlaceholder,
+  messagePlaceholder: widget.messagePlaceholder,
+  captchaEnabled: widget.captchaEnabled,
+  captchaProvider: widget.captchaProvider,
+  captchaSiteKey: widget.captchaSiteKey,
+  open: widget.open,
+  close: widget.close,
+  toggle: widget.toggle,
+  reset: widget.reset,
+  submit: widget.submit,
+  captureScreenshot: widget.captureScreenshot,
+  removeScreenshot: widget.removeScreenshot,
+  setCaptchaToken: widget.setCaptchaToken,
+  isValid: widget.isValid,
+  color: computed(() => props.color ?? "primary"),
+  ui,
+  propUi: computed(() => props.ui)
+};
+provide(feedbackWidgetContextKey, ctx);
+defineExpose({
+  open: widget.open,
+  close: widget.close,
+  toggle: widget.toggle,
+  reset: widget.reset,
+  submit: widget.submit,
+  isOpen: widget.isOpen,
+  isSubmitted: widget.isSubmitted
+});
+</script>
+
+<template>
+  <Primitive :as="props.as ?? 'div'" data-slot="root" :class="ui.root({ class: props.ui?.root })">
+    <!-- Compound mode: user provides #default and owns rendering -->
+    <slot v-if="slots.default" v-bind="ctx" />
+
+    <!-- Auto mode: render everything with slot forwarding -->
+    <template v-else>
+      <FeedbackWidgetButton
+        :icon="props.buttonIcon"
+        :label="props.buttonLabel"
+      >
+        <template v-if="slots.button" #default="btnProps">
+          <slot name="button" v-bind="btnProps" />
+        </template>
+      </FeedbackWidgetButton>
+
+      <FeedbackWidgetPanel :title="props.title">
+        <template v-if="slots['panel-header']" #header="headerProps">
+          <slot name="panel-header" v-bind="headerProps" />
+        </template>
+        <template v-if="slots['type-selector']" #type-selector="typeProps">
+          <slot name="type-selector" v-bind="typeProps" />
+        </template>
+        <template v-if="slots.form" #form="formProps">
+          <slot name="form" v-bind="formProps" />
+        </template>
+        <template v-if="slots.success" #success="successProps">
+          <slot name="success" v-bind="successProps" />
+        </template>
+        <template v-if="slots['submit-area']" #submit-area="submitProps">
+          <slot name="submit-area" v-bind="submitProps" />
+        </template>
+      </FeedbackWidgetPanel>
+    </template>
+  </Primitive>
+</template>