@bagelink/vue 0.0.1262 → 0.0.1268

package/dist/index.mjs

@@ -11468,7 +11468,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["update:selectedItems", "orderBy", "select", "lastItemVisible"], ["update:loading", "update:itemHeight", "update:selectedItems"]),
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "1ab0cc24": unref(computedItemHeight)
+      "40bb5b9a": unref(computedItemHeight)
     }));
     const props2 = __props;
     const emit2 = __emit;
@@ -11652,7 +11652,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-8e14fc71"]]);
+const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-89f6838b"]]);
 function useDraggable(options = {}) {
   const isDragging = ref(false);
   const dragElement = ref(null);
@@ -14762,7 +14762,9 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     round: { type: Boolean },
     placement: {},
     noAutoFocus: { type: Boolean },
-    positioningDisabled: { type: Boolean }
+    positioningDisabled: { type: Boolean },
+    autoHide: { type: Boolean },
+    triggers: {}
   }, {
     "shown": {
       type: Boolean,
@@ -14795,6 +14797,8 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
         disabled: _ctx.disabled,
         noAutoFocus: _ctx.noAutoFocus,
         placement: _ctx.placement,
+        autoHide: _ctx.autoHide,
+        triggers: _ctx.triggers,
         onHide: _cache[1] || (_cache[1] = ($event) => emit2("hide")),
         onShow: _cache[2] || (_cache[2] = ($event) => emit2("show"))
       }, {
@@ -14821,7 +14825,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
           ])
         ]),
         _: 3
-      }, 8, ["shown", "disabled", "noAutoFocus", "placement"]);
+      }, 8, ["shown", "disabled", "noAutoFocus", "placement", "autoHide", "triggers"]);
     };
   }
 });
@@ -15769,33 +15773,31 @@ const _hoisted_3$o = {
   key: 0,
   class: "required"
 };
-const _hoisted_4$g = { class: "date-picker-container" };
-const _hoisted_5$f = { class: "flex gap-075 p-05 m_flex-wrap calendar-container justify-content-center h-100p" };
-const _hoisted_6$c = { class: "calendar-section m_border-none pe-05 m_p-0" };
-const _hoisted_7$9 = { class: "flex space-between pb-1" };
-const _hoisted_8$6 = { class: "flex gap-05" };
-const _hoisted_9$5 = { class: "month-year" };
-const _hoisted_10$5 = {
+const _hoisted_4$g = { class: "calendar-section m_border-none pe-05 m_p-0" };
+const _hoisted_5$f = { class: "flex space-between pb-1" };
+const _hoisted_6$c = { class: "flex gap-05" };
+const _hoisted_7$9 = { class: "month-year" };
+const _hoisted_8$6 = {
   key: 0,
   class: "calendar-grid grid gap-025"
 };
-const _hoisted_11$5 = ["disabled", "onClick"];
-const _hoisted_12$5 = {
+const _hoisted_9$5 = ["disabled", "onClick"];
+const _hoisted_10$5 = {
   key: 1,
   class: "month-grid grid gap-05 p-05"
 };
-const _hoisted_13$4 = ["disabled", "onClick"];
-const _hoisted_14$4 = {
+const _hoisted_11$5 = ["disabled", "onClick"];
+const _hoisted_12$5 = {
   key: 2,
   class: "year-grid grid gap-05 p-0"
 };
-const _hoisted_15$4 = ["disabled", "onClick"];
-const _hoisted_16$4 = {
+const _hoisted_13$4 = ["disabled", "onClick"];
+const _hoisted_14$4 = {
   key: 0,
   class: "time-picker border-start flex column gap-1 w-120px"
 };
-const _hoisted_17$4 = { class: "flex gap-025" };
-const _hoisted_18$2 = { class: "txt-center opacity-6 txt14" };
+const _hoisted_15$4 = { class: "flex gap-025" };
+const _hoisted_16$4 = { class: "txt-center opacity-6 txt14" };
 const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "DateInput",
   props: {
@@ -15809,7 +15811,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     max: {},
     timezone: { default: "UTC" },
     mode: { default: "day" },
-    firstDayOfWeek: { default: WEEK_START_DAY.MONDAY },
+    firstDayOfWeek: { default: WEEK_START_DAY.SUNDAY },
     locale: { default: "" },
     center: { type: Boolean }
   },
@@ -15817,235 +15819,392 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
-    let isOpen = ref(false);
-    let currentMonth = ref(/* @__PURE__ */ new Date());
-    let currentView = ref("days");
+    const isOpen = ref(false);
+    const currentMonth = ref(/* @__PURE__ */ new Date());
+    const currentView = ref("days");
     const time = new Time(props2.firstDayOfWeek, props2.locale);
-    function formatDisplayDate(date2) {
-      if (!date2) return "";
-      const dateObj = typeof date2 === "string" ? new Date(date2) : date2;
-      if (props2.enableTime) {
-        return dateObj.toLocaleString(props2.locale || void 0, {
+    function useFormatting() {
+      const formatDisplayDate = (date2) => {
+        if (!date2) return "";
+        const dateObj = typeof date2 === "string" ? new Date(date2) : date2;
+        const options = {
           year: "numeric",
           month: "short",
           day: "numeric",
-          hour: "2-digit",
-          minute: "2-digit",
+          ...props2.enableTime && {
+            hour: "2-digit",
+            minute: "2-digit"
+          },
           timeZone: props2.timezone
-        });
-      }
-      return dateObj.toLocaleString(props2.locale || void 0, {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-        timeZone: props2.timezone
-      });
+        };
+        return dateObj.toLocaleString(props2.locale || void 0, options);
+      };
+      const formatDate = (date2) => {
+        if (!date2) return "";
+        const dateObj = typeof date2 === "string" ? new Date(date2) : date2;
+        return props2.enableTime ? dateObj.toISOString().slice(0, 16) : dateObj.toISOString().split("T")[0];
+      };
+      const parseUserInput = (input) => {
+        const date2 = new Date(input);
+        if (!Number.isNaN(date2.getTime())) {
+          return date2;
+        }
+        const parts = input.split(/[/.-]/);
+        if (parts.length === 3) {
+          const [day, month, year] = parts.map((p2) => Number.parseInt(p2, 10));
+          if (!Number.isNaN(day) && !Number.isNaN(month) && !Number.isNaN(year)) {
+            const date22 = new Date(year, month - 1, day);
+            if (date22.getFullYear() === year && date22.getMonth() === month - 1 && date22.getDate() === day) {
+              return date22;
+            }
+          }
+        }
+        return null;
+      };
+      return {
+        formatDisplayDate,
+        formatDate,
+        parseUserInput
+      };
     }
-    function formatDate(date2) {
-      if (!date2) return "";
-      const dateObj = typeof date2 === "string" ? new Date(date2) : date2;
-      return props2.enableTime ? dateObj.toISOString().slice(0, 16) : dateObj.toISOString().split("T")[0];
+    function useDateValidation() {
+      const isDateDisabled2 = (date2) => {
+        if (!date2) return true;
+        const minDate = props2.min ? new Date(props2.min) : null;
+        const maxDate = props2.max ? new Date(props2.max) : null;
+        if (minDate && date2 < minDate) return true;
+        if (maxDate && date2 > maxDate) return true;
+        return false;
+      };
+      const isYearDisabled2 = (year) => {
+        const minDate = props2.min ? new Date(props2.min) : null;
+        const maxDate = props2.max ? new Date(props2.max) : null;
+        if (minDate && year < minDate.getFullYear()) return true;
+        if (maxDate && year > maxDate.getFullYear()) return true;
+        return false;
+      };
+      return {
+        isDateDisabled: isDateDisabled2,
+        isYearDisabled: isYearDisabled2
+      };
     }
-    const formattedDisplayValue = computed(() => formatDisplayDate(props2.modelValue));
-    const formattedMin = computed(() => formatDate(props2.min));
-    const formattedMax = computed(() => formatDate(props2.max));
-    const selectedDate = computed(() => {
-      if (!props2.modelValue) return null;
-      return typeof props2.modelValue === "string" ? new Date(props2.modelValue) : props2.modelValue;
-    });
-    const currentMonthDays = computed(() => {
-      const year = currentMonth.value.getFullYear();
-      const month = currentMonth.value.getMonth();
-      return time.getCalendarMonthSplitInWeeks(year, month).flat();
-    });
-    const currentMonthValue = computed(() => ({
-      month: currentMonth.value.getMonth(),
-      year: currentMonth.value.getFullYear(),
-      formatted: {
-        month: time.getLocalizedNameOfMonth(currentMonth.value, "long"),
-        year: time.getLocalizedDateString(currentMonth.value).split("/").pop()
-        // Get just the year part
-      }
-    }));
-    const months = computed(() => Array.from({ length: 12 }, (_2, i2) => {
-      const date2 = new Date(currentMonthValue.value.year, i2, 1);
+    function useDateState() {
+      const { formatDisplayDate, formatDate } = useFormatting();
+      const formattedDisplayValue2 = computed(() => formatDisplayDate(props2.modelValue));
+      const formattedMin2 = computed(() => formatDate(props2.min));
+      const formattedMax2 = computed(() => formatDate(props2.max));
+      const selectedDate2 = computed(() => {
+        if (!props2.modelValue) return null;
+        return typeof props2.modelValue === "string" ? new Date(props2.modelValue) : props2.modelValue;
+      });
       return {
-        name: time.getLocalizedNameOfMonth(date2, "short"),
-        value: i2,
-        disabled: isDateDisabled(date2)
+        formattedDisplayValue: formattedDisplayValue2,
+        formattedMin: formattedMin2,
+        formattedMax: formattedMax2,
+        selectedDate: selectedDate2
       };
-    }));
-    const years = computed(() => {
-      const startYear = currentMonthValue.value.year - 10;
-      return Array.from({ length: 21 }, (_2, i2) => ({
-        value: startYear + i2,
-        disabled: isYearDisabled(startYear + i2)
+    }
+    const { isDateDisabled, isYearDisabled } = useDateValidation();
+    const { formattedDisplayValue, formattedMin, formattedMax, selectedDate } = useDateState();
+    function useCalendarView() {
+      const currentMonthDays2 = computed(() => {
+        const year = currentMonth.value.getFullYear();
+        const month = currentMonth.value.getMonth();
+        return time.getCalendarMonthSplitInWeeks(year, month).flat();
+      });
+      const currentMonthValue2 = computed(() => ({
+        month: currentMonth.value.getMonth(),
+        year: currentMonth.value.getFullYear(),
+        formatted: {
+          month: time.getLocalizedNameOfMonth(currentMonth.value, "long"),
+          year: time.getLocalizedDateString(currentMonth.value).split("/").pop()
+        }
       }));
-    });
-    const weekDays = computed(() => {
-      const weekStart = /* @__PURE__ */ new Date();
-      weekStart.setDate(weekStart.getDate() - weekStart.getDay() + (props2.firstDayOfWeek === WEEK_START_DAY.MONDAY ? 1 : 0));
-      return Array.from({ length: 7 }, (_2, i2) => {
-        const day = new Date(weekStart);
-        day.setDate(weekStart.getDate() + i2);
-        return time.getLocalizedNameOfWeekday(day, "short");
+      const months2 = computed(() => Array.from({ length: 12 }, (_2, i2) => {
+        const date2 = new Date(currentMonthValue2.value.year, i2, 1);
+        return {
+          name: time.getLocalizedNameOfMonth(date2, "short"),
+          value: i2,
+          disabled: isDateDisabled(date2)
+        };
+      }));
+      const years2 = computed(() => {
+        const startYear = currentMonthValue2.value.year - 10;
+        return Array.from({ length: 21 }, (_2, i2) => ({
+          value: startYear + i2,
+          disabled: isYearDisabled(startYear + i2)
+        }));
       });
-    });
-    function isDateDisabled(date2) {
-      if (!date2) return true;
-      const minDate = props2.min ? new Date(props2.min) : null;
-      const maxDate = props2.max ? new Date(props2.max) : null;
-      if (minDate && date2 < minDate) return true;
-      if (maxDate && date2 > maxDate) return true;
-      return false;
-    }
-    function isYearDisabled(year) {
-      const minDate = props2.min ? new Date(props2.min) : null;
-      const maxDate = props2.max ? new Date(props2.max) : null;
-      if (minDate && year < minDate.getFullYear()) return true;
-      if (maxDate && year > maxDate.getFullYear()) return true;
-      return false;
-    }
-    function selectMonth(monthIndex) {
-      currentMonth.value = new Date(currentMonth.value.getFullYear(), monthIndex, 1);
-      currentView.value = "days";
-    }
-    function selectYear(year) {
-      currentMonth.value = new Date(year, currentMonth.value.getMonth(), 1);
-      currentView.value = "months";
-    }
-    function previousMonth() {
-      currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() - 1, 1);
+      const weekDays2 = computed(() => {
+        const weekStart = /* @__PURE__ */ new Date();
+        weekStart.setDate(weekStart.getDate() - weekStart.getDay() + (props2.firstDayOfWeek === WEEK_START_DAY.MONDAY ? 1 : 0));
+        return Array.from({ length: 7 }, (_2, i2) => {
+          const day = new Date(weekStart);
+          day.setDate(weekStart.getDate() + i2);
+          return time.getLocalizedNameOfWeekday(day, "short");
+        });
+      });
+      const isSelected2 = (date2) => {
+        if (!date2 || !selectedDate.value) return false;
+        return date2.getFullYear() === selectedDate.value.getFullYear() && date2.getMonth() === selectedDate.value.getMonth() && date2.getDate() === selectedDate.value.getDate();
+      };
+      const isToday2 = (date2) => {
+        if (!date2) return false;
+        return time.dateIsToday(date2);
+      };
+      const isNotInMonth2 = (date2) => {
+        return time.isTrailingOrLeadingDate(date2, currentMonth.value.getMonth());
+      };
+      return {
+        currentMonthDays: currentMonthDays2,
+        currentMonthValue: currentMonthValue2,
+        months: months2,
+        years: years2,
+        weekDays: weekDays2,
+        isSelected: isSelected2,
+        isToday: isToday2,
+        isNotInMonth: isNotInMonth2
+      };
     }
-    function nextMonth() {
-      currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() + 1, 1);
+    function useNavigation() {
+      const selectMonth2 = (monthIndex) => {
+        currentMonth.value = new Date(currentMonth.value.getFullYear(), monthIndex, 1);
+        currentView.value = "days";
+      };
+      const selectYear2 = (year) => {
+        currentMonth.value = new Date(year, currentMonth.value.getMonth(), 1);
+        currentView.value = "months";
+      };
+      const previousMonth2 = () => {
+        currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() - 1, 1);
+      };
+      const nextMonth2 = () => {
+        currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() + 1, 1);
+      };
+      const previousYear2 = () => {
+        const offset2 = currentView.value === "months" ? 1 : 21;
+        currentMonth.value = new Date(currentMonth.value.getFullYear() - offset2, currentMonth.value.getMonth(), 1);
+      };
+      const nextYear2 = () => {
+        const offset2 = currentView.value === "months" ? 1 : 21;
+        currentMonth.value = new Date(currentMonth.value.getFullYear() + offset2, currentMonth.value.getMonth(), 1);
+      };
+      return {
+        selectMonth: selectMonth2,
+        selectYear: selectYear2,
+        previousMonth: previousMonth2,
+        nextMonth: nextMonth2,
+        previousYear: previousYear2,
+        nextYear: nextYear2
+      };
     }
-    function previousYear() {
-      const offset2 = currentView.value === "months" ? 1 : 21;
-      currentMonth.value = new Date(currentMonth.value.getFullYear() - offset2, currentMonth.value.getMonth(), 1);
+    function useTimeHandling() {
+      const hours2 = computed(() => {
+        var _a2;
+        return ((_a2 = selectedDate.value) == null ? void 0 : _a2.getHours()) ?? 0;
+      });
+      const minutes2 = computed(() => {
+        var _a2;
+        return ((_a2 = selectedDate.value) == null ? void 0 : _a2.getMinutes()) ?? 0;
+      });
+      const handleHourInput2 = (value) => {
+        if (!selectedDate.value) return;
+        const newDate = new Date(selectedDate.value);
+        newDate.setHours(value);
+        emit2("update:modelValue", newDate.toISOString());
+      };
+      const handleMinuteInput2 = (value) => {
+        if (!selectedDate.value) return;
+        const newDate = new Date(selectedDate.value);
+        newDate.setMinutes(value);
+        emit2("update:modelValue", newDate.toISOString());
+      };
+      const timezoneDisplay2 = computed(() => {
+        if (!props2.enableTime) return "";
+        try {
+          return (/* @__PURE__ */ new Date()).toLocaleString("en-US", {
+            timeZoneName: "short",
+            timeZone: props2.timezone
+          }).split(" ").pop();
+        } catch {
+          return "UTC";
+        }
+      });
+      return {
+        hours: hours2,
+        minutes: minutes2,
+        handleHourInput: handleHourInput2,
+        handleMinuteInput: handleMinuteInput2,
+        timezoneDisplay: timezoneDisplay2
+      };
     }
-    function nextYear() {
-      const offset2 = currentView.value === "months" ? 1 : 21;
-      currentMonth.value = new Date(currentMonth.value.getFullYear() + offset2, currentMonth.value.getMonth(), 1);
+    function useInputHandling() {
+      const { parseUserInput } = useFormatting();
+      const inputValue2 = ref("");
+      const handleInput2 = (event) => {
+        const input = event.target;
+        inputValue2.value = input.value;
+        const date2 = parseUserInput(input.value);
+        if (date2) {
+          if (props2.enableTime) {
+            emit2("update:modelValue", date2.toISOString());
+          } else {
+            const utcDate = new Date(Date.UTC(date2.getFullYear(), date2.getMonth(), date2.getDate()));
+            emit2("update:modelValue", utcDate.toISOString().split("T")[0]);
+          }
+        }
+      };
+      const handleFocus2 = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        isOpen.value = true;
+      };
+      const handleClick2 = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      };
+      const handleKeydown2 = (event) => {
+        if (event.key === "Escape") {
+          isOpen.value = false;
+        } else if (event.key === "Enter" && inputValue2.value) {
+          const date2 = parseUserInput(inputValue2.value);
+          if (date2) {
+            if (props2.enableTime) {
+              emit2("update:modelValue", date2.toISOString());
+            } else {
+              const utcDate = new Date(Date.UTC(date2.getFullYear(), date2.getMonth(), date2.getDate()));
+              emit2("update:modelValue", utcDate.toISOString().split("T")[0]);
+            }
+            isOpen.value = false;
+          }
+        }
+      };
+      return {
+        inputValue: inputValue2,
+        handleInput: handleInput2,
+        handleFocus: handleFocus2,
+        handleClick: handleClick2,
+        handleKeydown: handleKeydown2
+      };
     }
+    const { inputValue, handleInput, handleFocus, handleClick, handleKeydown } = useInputHandling();
+    const { currentMonthDays, currentMonthValue, months, years, weekDays, isSelected, isToday, isNotInMonth } = useCalendarView();
+    const { selectMonth, selectYear, previousMonth, nextMonth, previousYear, nextYear } = useNavigation();
+    const { hours, minutes, handleHourInput, handleMinuteInput, timezoneDisplay } = useTimeHandling();
     function selectDate(date2) {
       var _a2, _b;
       if (!date2 || !props2.editMode) return;
+      const tzOffset = (/* @__PURE__ */ new Date()).getTimezoneOffset();
       const newDate = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
       if (props2.enableTime) {
         const currentHours = ((_a2 = selectedDate.value) == null ? void 0 : _a2.getHours()) ?? (/* @__PURE__ */ new Date()).getHours();
         const currentMinutes = ((_b = selectedDate.value) == null ? void 0 : _b.getMinutes()) ?? (/* @__PURE__ */ new Date()).getMinutes();
         newDate.setHours(currentHours);
         newDate.setMinutes(currentMinutes);
+        if (props2.timezone === "UTC") {
+          newDate.setMinutes(newDate.getMinutes() + tzOffset);
+        }
         emit2("update:modelValue", newDate.toISOString());
       } else {
-        newDate.setUTCHours(0, 0, 0, 0);
-        emit2("update:modelValue", newDate.toISOString().split("T")[0]);
+        const utcDate = new Date(Date.UTC(date2.getFullYear(), date2.getMonth(), date2.getDate()));
+        emit2("update:modelValue", utcDate.toISOString().split("T")[0]);
         isOpen.value = false;
       }
     }
-    const hours = computed(() => {
-      var _a2;
-      return ((_a2 = selectedDate.value) == null ? void 0 : _a2.getHours()) ?? 0;
-    });
-    const minutes = computed(() => {
-      var _a2;
-      return ((_a2 = selectedDate.value) == null ? void 0 : _a2.getMinutes()) ?? 0;
-    });
-    function handleHourInput(value) {
-      if (!selectedDate.value) return;
-      const newDate = new Date(selectedDate.value);
-      newDate.setHours(value);
-      emit2("update:modelValue", newDate.toISOString());
-    }
-    function handleMinuteInput(value) {
-      if (!selectedDate.value) return;
-      const newDate = new Date(selectedDate.value);
-      newDate.setMinutes(value);
-      emit2("update:modelValue", newDate.toISOString());
-    }
-    function isSelected(date2) {
-      if (!date2 || !selectedDate.value) return false;
-      return date2.toISOString().split("T")[0] === selectedDate.value.toISOString().split("T")[0];
-    }
-    function isToday(date2) {
-      if (!date2) return false;
-      return time.dateIsToday(date2);
-    }
-    const timezoneDisplay = computed(() => {
-      if (!props2.enableTime) return "";
-      try {
-        return (/* @__PURE__ */ new Date()).toLocaleString("en-US", {
-          timeZoneName: "short",
-          timeZone: props2.timezone
-        }).split(" ").pop();
-      } catch {
-        return "UTC";
-      }
+    const datePickerRef = ref(null);
+    const calendarRef = ref(null);
+    onMounted(() => {
+      const handleDocumentClick = (e) => {
+        var _a2, _b;
+        const target = e.target;
+        if (!((_a2 = datePickerRef.value) == null ? void 0 : _a2.contains(target)) && !((_b = calendarRef.value) == null ? void 0 : _b.contains(target))) {
+          isOpen.value = false;
+        }
+      };
+      document.addEventListener("click", handleDocumentClick);
+      onBeforeUnmount(() => {
+        document.removeEventListener("click", handleDocumentClick);
+      });
     });
-    function isNotInMonth(date2) {
-      return time.isTrailingOrLeadingDate(date2, currentMonth.value.getMonth());
-    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
-        title: _ctx.label
+        title: _ctx.label,
+        onFocusin: _cache[6] || (_cache[6] = //@ts-ignore
+        (...args) => unref(handleFocus) && unref(handleFocus)(...args))
       }, [
         _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$t, [
           createTextVNode(toDisplayString(_ctx.label) + " ", 1),
           _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_3$o, "*")) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
         createVNode(unref(_sfc_main$V), {
-          shown: unref(isOpen),
+          shown: isOpen.value,
           placement: "bottom-start",
-          onApplyShow: _cache[4] || (_cache[4] = ($event) => isRef(isOpen) ? isOpen.value = true : isOpen = true),
-          onApplyHide: _cache[5] || (_cache[5] = ($event) => isRef(isOpen) ? isOpen.value = false : isOpen = false)
+          autoHide: false,
+          triggers: ["click"]
         }, {
           trigger: withCtx(() => [
-            createElementVNode("div", _hoisted_4$g, [
+            createElementVNode("div", {
+              ref_key: "datePickerRef",
+              ref: datePickerRef,
+              class: "date-picker-container",
+              onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
+              }, ["stop"])),
+              onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+              }, ["stop"]))
+            }, [
               createVNode(unref(TextInput), {
-                modelValue: formattedDisplayValue.value,
+                modelValue: unref(formattedDisplayValue),
                 icon: "calendar",
-                min: formattedMin.value,
-                max: formattedMax.value,
+                min: unref(formattedMin),
+                max: unref(formattedMax),
                 required: _ctx.required,
                 disabled: !_ctx.editMode,
                 class: normalizeClass(["date-input", {
                   "txt-center": _ctx.center
                 }]),
-                readonly: "",
-                onClick: _cache[0] || (_cache[0] = ($event) => isRef(isOpen) ? isOpen.value = true : isOpen = true)
-              }, null, 8, ["modelValue", "min", "max", "required", "disabled", "class"])
-            ])
+                readonly: false,
+                onInput: unref(handleInput),
+                onFocus: unref(handleFocus),
+                onClick: unref(handleClick),
+                onKeydown: unref(handleKeydown)
+              }, null, 8, ["modelValue", "min", "max", "required", "disabled", "class", "onInput", "onFocus", "onClick", "onKeydown"])
+            ], 544)
           ]),
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_5$f, [
-              createElementVNode("div", _hoisted_6$c, [
-                createElementVNode("div", _hoisted_7$9, [
-                  unref(currentView) === "days" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createElementVNode("div", {
+              ref_key: "calendarRef",
+              ref: calendarRef,
+              class: "ltr flex gap-075 p-05 m_flex-wrap calendar-container justify-content-center h-100p",
+              onClick: _cache[5] || (_cache[5] = withModifiers(() => {
+              }, ["stop"]))
+            }, [
+              createElementVNode("div", _hoisted_4$g, [
+                createElementVNode("div", _hoisted_5$f, [
+                  currentView.value === "days" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                     createVNode(unref(Btn), {
                       flat: "",
                       icon: "chevron_left",
-                      onClick: previousMonth
-                    }),
-                    createElementVNode("div", _hoisted_8$6, [
+                      onClick: unref(previousMonth)
+                    }, null, 8, ["onClick"]),
+                    createElementVNode("div", _hoisted_6$c, [
                       createVNode(unref(Btn), {
                         flat: "",
                         class: "month-btn",
-                        onClick: _cache[1] || (_cache[1] = ($event) => isRef(currentView) ? currentView.value = "months" : currentView = "months")
+                        onClick: _cache[2] || (_cache[2] = ($event) => currentView.value = "months")
                       }, {
                         default: withCtx(() => [
-                          createTextVNode(toDisplayString(currentMonthValue.value.formatted.month), 1)
+                          createTextVNode(toDisplayString(unref(currentMonthValue).formatted.month), 1)
                         ]),
                         _: 1
                       }),
                       createVNode(unref(Btn), {
                         flat: "",
                         class: "year-btn",
-                        onClick: _cache[2] || (_cache[2] = ($event) => isRef(currentView) ? currentView.value = "years" : currentView = "years")
+                        onClick: _cache[3] || (_cache[3] = ($event) => currentView.value = "years")
                       }, {
                         default: withCtx(() => [
-                          createTextVNode(toDisplayString(currentMonthValue.value.formatted.year), 1)
+                          createTextVNode(toDisplayString(unref(currentMonthValue).formatted.year), 1)
                         ]),
                         _: 1
                       })
@@ -16053,114 +16212,114 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                     createVNode(unref(Btn), {
                       flat: "",
                       icon: "chevron_right",
-                      onClick: nextMonth
-                    })
+                      onClick: unref(nextMonth)
+                    }, null, 8, ["onClick"])
                   ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                     createVNode(unref(Btn), {
                       flat: "",
                       icon: "chevron_left",
-                      onClick: previousYear
-                    }),
-                    createElementVNode("span", _hoisted_9$5, toDisplayString(currentMonthValue.value.formatted.year), 1),
+                      onClick: unref(previousYear)
+                    }, null, 8, ["onClick"]),
+                    createElementVNode("span", _hoisted_7$9, toDisplayString(unref(currentMonthValue).formatted.year), 1),
                     createVNode(unref(Btn), {
                       flat: "",
                       icon: "chevron_right",
-                      onClick: nextYear
-                    })
+                      onClick: unref(nextYear)
+                    }, null, 8, ["onClick"])
                   ], 64))
                 ]),
-                unref(currentView) === "days" ? (openBlock(), createElementBlock("div", _hoisted_10$5, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(weekDays.value, (day) => {
+                currentView.value === "days" ? (openBlock(), createElementBlock("div", _hoisted_8$6, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(weekDays), (day) => {
                     return openBlock(), createElementBlock("div", {
                       key: day,
                       class: "txt-center txt-12 opacity-6"
                     }, toDisplayString(day), 1);
                   }), 128)),
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(currentMonthDays.value, (date2) => {
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(currentMonthDays), (date2) => {
                     return openBlock(), createElementBlock("button", {
                       key: date2 == null ? void 0 : date2.toISOString(),
                       type: "button",
                       class: normalizeClass(["day aspect-ratio-1 flex align-items-center justify-content-center pointer round txt14 p-0", {
-                        "selected": isSelected(date2),
-                        "today": isToday(date2),
-                        "disabled": isDateDisabled(date2),
-                        "not-in-month": isNotInMonth(date2)
+                        "selected": unref(isSelected)(date2),
+                        "today": unref(isToday)(date2),
+                        "disabled": unref(isDateDisabled)(date2),
+                        "not-in-month": unref(isNotInMonth)(date2)
                       }]),
-                      disabled: isDateDisabled(date2),
+                      disabled: unref(isDateDisabled)(date2),
                       onClick: ($event) => selectDate(date2)
-                    }, toDisplayString(date2 == null ? void 0 : date2.getDate()), 11, _hoisted_11$5);
+                    }, toDisplayString(date2 == null ? void 0 : date2.getDate()), 11, _hoisted_9$5);
                   }), 128))
-                ])) : unref(currentView) === "months" ? (openBlock(), createElementBlock("div", _hoisted_12$5, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(months.value, (month) => {
+                ])) : currentView.value === "months" ? (openBlock(), createElementBlock("div", _hoisted_10$5, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(months), (month) => {
                     return openBlock(), createElementBlock("button", {
                       key: month.value,
                       class: normalizeClass(["month-item flex align-items-center justify-content-center pointer rounded p-05 txt14 border-none", {
-                        selected: month.value === currentMonthValue.value.month,
+                        selected: month.value === unref(currentMonthValue).month,
                         disabled: month.disabled
                       }]),
                       disabled: month.disabled,
-                      onClick: ($event) => selectMonth(month.value)
-                    }, toDisplayString(month.name), 11, _hoisted_13$4);
+                      onClick: ($event) => unref(selectMonth)(month.value)
+                    }, toDisplayString(month.name), 11, _hoisted_11$5);
                   }), 128))
-                ])) : (openBlock(), createElementBlock("div", _hoisted_14$4, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(years.value, (year) => {
+                ])) : (openBlock(), createElementBlock("div", _hoisted_12$5, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(years), (year) => {
                     return openBlock(), createElementBlock("button", {
                       key: year.value,
                       class: normalizeClass(["year-item flex align-items-center justify-content-center pointer rounded p-05 txt14 border-none", {
-                        selected: year.value === currentMonthValue.value.year,
+                        selected: year.value === unref(currentMonthValue).year,
                         disabled: year.disabled
                       }]),
                       disabled: year.disabled,
-                      onClick: ($event) => selectYear(year.value)
-                    }, toDisplayString(year.value), 11, _hoisted_15$4);
+                      onClick: ($event) => unref(selectYear)(year.value)
+                    }, toDisplayString(year.value), 11, _hoisted_13$4);
                   }), 128))
                 ]))
               ]),
-              _ctx.enableTime && unref(currentView) === "days" ? (openBlock(), createElementBlock("div", _hoisted_16$4, [
-                createElementVNode("div", _hoisted_17$4, [
+              _ctx.enableTime && currentView.value === "days" ? (openBlock(), createElementBlock("div", _hoisted_14$4, [
+                createElementVNode("div", _hoisted_15$4, [
                   createVNode(unref(NumberInput), {
                     center: "",
-                    "model-value": hours.value,
-                    disabled: !selectedDate.value,
+                    "model-value": unref(hours),
+                    disabled: !unref(selectedDate),
                     min: 0,
                     max: 23,
                     layout: "vertical",
                     padZero: 2,
-                    "onUpdate:modelValue": handleHourInput
-                  }, null, 8, ["model-value", "disabled"]),
-                  _cache[6] || (_cache[6] = createElementVNode("p", { class: "pb-075" }, " : ", -1)),
+                    "onUpdate:modelValue": unref(handleHourInput)
+                  }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"]),
+                  _cache[7] || (_cache[7] = createElementVNode("p", { class: "pb-075" }, " : ", -1)),
                   createVNode(unref(NumberInput), {
                     center: "",
-                    "model-value": minutes.value,
-                    disabled: !selectedDate.value,
+                    "model-value": unref(minutes),
+                    disabled: !unref(selectedDate),
                     min: 0,
                     max: 59,
                     padZero: 2,
                     layout: "vertical",
-                    "onUpdate:modelValue": handleMinuteInput
-                  }, null, 8, ["model-value", "disabled"])
+                    "onUpdate:modelValue": unref(handleMinuteInput)
+                  }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"])
                 ]),
-                createElementVNode("span", _hoisted_18$2, toDisplayString(timezoneDisplay.value), 1),
-                selectedDate.value ? (openBlock(), createBlock(unref(Btn), {
+                createElementVNode("span", _hoisted_16$4, toDisplayString(unref(timezoneDisplay)), 1),
+                unref(selectedDate) ? (openBlock(), createBlock(unref(Btn), {
                   key: 0,
                   flat: "",
-                  onClick: _cache[3] || (_cache[3] = ($event) => isRef(isOpen) ? isOpen.value = false : isOpen = false)
+                  onClick: _cache[4] || (_cache[4] = ($event) => isOpen.value = false)
                 }, {
-                  default: withCtx(() => _cache[7] || (_cache[7] = [
+                  default: withCtx(() => _cache[8] || (_cache[8] = [
                     createTextVNode(" Done ")
                   ])),
                   _: 1
                 })) : createCommentVNode("", true)
               ])) : createCommentVNode("", true)
-            ])
+            ], 512)
           ]),
           _: 1
         }, 8, ["shown"])
-      ], 10, _hoisted_1$F);
+      ], 42, _hoisted_1$F);
     };
   }
 });
-const DateInput = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-a2f98d6e"]]);
+const DateInput = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-5d1b6a15"]]);
 const _hoisted_1$E = ["title"];
 const _hoisted_2$s = { key: 0 };
 const _hoisted_3$n = {
@@ -25987,7 +26146,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   }
 });
 const OTP = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-8e8db33e"]]);
-const _hoisted_1$y = { class: "relative" };
+const _hoisted_1$y = { class: "relative passwordInput" };
 const _hoisted_2$n = { class: "m-password position-bottom-end flex column justify-content-center" };
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "PasswordInput",
@@ -26402,53 +26561,27 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-25d991e5"]]);
-const tableTools = [
-  "mergeCells",
-  "splitCells",
-  "addRowBefore",
-  "addRowAfter",
-  "deleteRow",
-  "insertColumnLeft",
-  "insertColumnRight",
-  "deleteColumn",
-  "alignLeft",
-  "alignCenter",
-  "alignRight",
-  "alignJustify",
-  "deleteTable"
-];
-const defaultToolbarConfig = [
+const basicToolbarConfig = [
   "h2",
   "h3",
   "h4",
   "h5",
   "h6",
   "separator",
-  "bold",
-  "italic",
-  "underline",
-  "separator",
-  "fontColor",
-  "bgColor",
-  "separator",
   "p",
   "blockquote",
   "orderedList",
   "unorderedList",
-  "indent",
-  "outdent",
+  "separator",
+  "bold",
+  "italic",
+  "underline",
   "separator",
   "link",
   "image",
-  // 'youtube',
-  "separator",
-  "splitView",
+  "embed",
   "clear",
-  "insertTable",
-  ...tableTools,
-  "separator",
-  "undo",
-  "redo",
+  "splitView",
   "fullScreen"
 ];
 const toolbarOptions = [
@@ -26466,7 +26599,7 @@ const toolbarOptions = [
   { name: "unorderedList", label: "Unordered List", icon: "format_list_bulleted" },
   { name: "link", label: "Link", icon: "add_link" },
   { name: "image", label: "Image", icon: "add_photo_alternate" },
-  { name: "youtube", label: "YouTube", icon: "youtube_activity" },
+  { name: "embed", label: "Embed", icon: "media_link" },
   { name: "splitView", label: "Split View", icon: "code" },
   { name: "clear", label: "Clear Formatting", icon: "format_clear" },
   { name: "alignLeft", label: "Align Left", icon: "format_align_left" },
@@ -26556,7 +26689,7 @@ const _hoisted_1$t = {
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "EditorToolbar",
   props: {
-    config: { default: defaultToolbarConfig },
+    config: { default: basicToolbarConfig },
     selectedStyles: {}
   },
   emits: ["action"],
@@ -26611,45 +26744,50 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-bcd681b9"]]);
-function createCommandExecutor(state2, commands) {
-  return {
-    execute(command, value) {
-      const cmd = commands[command];
-      if (cmd) {
-        cmd.execute(state2, value);
-      }
-    },
-    isActive(command) {
-      var _a2;
-      const cmd = commands[command];
-      return ((_a2 = cmd.isActive) == null ? void 0 : _a2.call(cmd, state2)) || false;
-    },
-    getValue(command) {
-      var _a2;
-      const cmd = commands[command];
-      return ((_a2 = cmd.getValue) == null ? void 0 : _a2.call(cmd, state2)) || null;
-    }
-  };
-}
+const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-9d8a6eb6"]]);
 function isStyleActive(style, doc) {
   const selection = doc.getSelection();
   if (!selection || !selection.rangeCount) return false;
   const range2 = selection.getRangeAt(0);
   const container = range2.commonAncestorContainer;
-  const parent = container.nodeType === 3 ? container.parentElement : container;
+  const parent = container.nodeType === Node.TEXT_NODE ? container.parentElement : container;
   if (!parent) return false;
-  const checkParent = (element, tags) => {
-    if (!element) return false;
-    if (tags.includes(element.tagName.toLowerCase())) return true;
-    return checkParent(element.parentElement, tags);
-  };
-  const styleTags = {
+  const checkParent = (element, tags2) => {
+    if (!element || !element.tagName) return false;
+    const tagName = element.tagName.toLowerCase();
+    if (tags2.includes(tagName)) return true;
+    return checkParent(element.parentElement, tags2);
+  };
+  const styleMappings = {
+    // Inline styles
     bold: ["strong", "b"],
     italic: ["em", "i"],
-    underline: ["u"]
-  };
-  return checkParent(parent, styleTags[style] ?? [style]);
+    underline: ["u"],
+    // Block styles
+    h1: ["h1"],
+    h2: ["h2"],
+    h3: ["h3"],
+    h4: ["h4"],
+    h5: ["h5"],
+    h6: ["h6"],
+    p: ["p"],
+    blockquote: ["blockquote"],
+    // List styles
+    orderedList: ["ol"],
+    unorderedList: ["ul"]
+  };
+  if (["splitView", "codeView", "fullScreen"].includes(style)) {
+    return false;
+  }
+  if (style === "orderedList" || style === "unorderedList") {
+    const listParent = parent.closest(style === "orderedList" ? "ol" : "ul");
+    return !!listParent;
+  }
+  const tags = styleMappings[style];
+  if (tags) {
+    return checkParent(parent, tags);
+  }
+  return checkParent(parent, [style]);
 }
 function analyzeSelection(doc, range2) {
   const container = range2.commonAncestorContainer;
@@ -26909,6 +27047,52 @@ function insertLink(modal, state2) {
     }
   });
 }
+function insertEmbed(modal, state2) {
+  const { range: range2, doc } = state2;
+  if (!range2 || !doc) return;
+  modal.showModalForm({
+    title: "Insert Embed",
+    schema: [
+      { id: "url", $el: "text", label: "URL", attrs: { placeholder: "Enter URL (YouTube, Vimeo, etc.)" } },
+      frmRow(
+        numField("width", "Width", { min: 200, placeholder: "560" }),
+        numField("height", "Height", { min: 200, placeholder: "315" })
+      ),
+      { id: "allowFullscreen", $el: "check", label: "Allow Fullscreen", value: true }
+    ],
+    onSubmit: (data2) => {
+      if (!data2.url) return;
+      const url = new URL(data2.url);
+      let embedUrl = data2.url;
+      if (url.hostname.includes("youtube.com") || url.hostname === "youtu.be") {
+        const videoId = url.hostname === "youtu.be" ? url.pathname.slice(1) : url.searchParams.get("v");
+        if (videoId) {
+          embedUrl = `https://www.youtube.com/embed/${videoId}`;
+        }
+      } else if (url.hostname.includes("vimeo.com")) {
+        const videoId = url.pathname.split("/").pop();
+        if (videoId) {
+          embedUrl = `https://player.vimeo.com/video/${videoId}`;
+        }
+      }
+      const iframe = doc.createElement("iframe");
+      Object.assign(iframe, {
+        src: embedUrl,
+        width: data2.width || 560,
+        height: data2.height || 315,
+        frameBorder: "0",
+        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+        allowFullscreen: data2.allowFullscreen
+      });
+      const wrapper = doc.createElement("div");
+      wrapper.style.textAlign = "center";
+      wrapper.style.margin = "1em 0";
+      wrapper.appendChild(iframe);
+      range2.deleteContents();
+      range2.insertNode(wrapper);
+    }
+  });
+}
 function insertTable(rows, cols, state2) {
   if (!state2.doc) return;
   const table = state2.doc.createElement("table");
@@ -27030,145 +27214,393 @@ function alignColumn(range2, alignment) {
     }
   }
 }
-function useCommands(state2, debug) {
-  const format2 = () => formatting(state2);
-  const commands = {
-    // Text formatting commands
-    bold: {
-      name: "Bold",
-      execute: (state22) => {
-        format2().text("bold");
-      },
-      isActive: (state22) => state22.selectedStyles.has("bold")
-    },
-    italic: {
-      name: "Italic",
-      execute: (state22) => {
-        format2().text("italic");
-      },
-      isActive: (state22) => state22.selectedStyles.has("italic")
-    },
-    underline: {
-      name: "Underline",
-      execute: (state22) => {
-        format2().text("underline");
-      },
-      isActive: (state22) => state22.selectedStyles.has("underline")
-    },
-    // Block formatting commands
-    h1: { name: "Heading 1", execute: (state22) => {
-      format2().block("h1", "h1");
-    }, isActive: (state22) => state22.selectedStyles.has("h1") },
-    h2: { name: "Heading 2", execute: (state22) => {
-      format2().block("h2", "h2");
-    }, isActive: (state22) => state22.selectedStyles.has("h2") },
-    h3: { name: "Heading 3", execute: (state22) => {
-      format2().block("h3", "h3");
-    }, isActive: (state22) => state22.selectedStyles.has("h3") },
-    h4: { name: "Heading 4", execute: (state22) => {
-      format2().block("h4", "h4");
-    }, isActive: (state22) => state22.selectedStyles.has("h4") },
-    h5: { name: "Heading 5", execute: (state22) => {
-      format2().block("h5", "h5");
-    }, isActive: (state22) => state22.selectedStyles.has("h5") },
-    h6: { name: "Heading 6", execute: (state22) => {
-      format2().block("h6", "h6");
-    }, isActive: (state22) => state22.selectedStyles.has("h6") },
-    p: { name: "Paragraph", execute: (state22) => {
-      format2().block("p", "p");
-    }, isActive: (state22) => state22.selectedStyles.has("p") },
-    blockquote: {
-      name: "Blockquote",
-      execute: (state22) => {
-        format2().block("blockquote", "blockquote");
-      },
-      isActive: (state22) => state22.selectedStyles.has("blockquote")
+function createCommand(name, execute, isActive) {
+  return {
+    name,
+    execute: (state2, value) => {
+      if (!state2.doc) return;
+      execute(state2, value);
     },
-    // List commands
-    orderedList: {
-      name: "Ordered List",
-      execute: (state22) => {
-        format2().list("orderedList");
-      },
-      isActive: (state22) => state22.selectedStyles.has("orderedList")
+    isActive
+  };
+}
+function createFormattingCommand(state2, type3, command, tag) {
+  const format2 = formatting(state2);
+  return createCommand(
+    command,
+    () => {
+      var _a2, _b;
+      if (!state2.doc) return;
+      if (type3 === "text") {
+        if (command === "bold") state2.doc.execCommand("bold", false);
+        else if (command === "italic") state2.doc.execCommand("italic", false);
+        else if (command === "underline") state2.doc.execCommand("underline", false);
+        else format2.text(command);
+      } else if (type3 === "block") {
+        state2.doc.execCommand("formatBlock", false, `<${command}>`);
+      } else if (type3 === "list") {
+        const selection = state2.doc.getSelection();
+        if (!selection || !selection.rangeCount) return;
+        const range2 = selection.getRangeAt(0);
+        if (range2.collapsed && (!((_a2 = range2.startContainer.textContent) == null ? void 0 : _a2.trim()) || range2.startContainer === state2.doc.body)) {
+          const list = state2.doc.createElement(command === "orderedList" ? "ol" : "ul");
+          const li = state2.doc.createElement("li");
+          li.innerHTML = "&nbsp;<br>";
+          list.appendChild(li);
+          const currentBlock = range2.startContainer.nodeType === 1 ? range2.startContainer : range2.startContainer.parentElement;
+          if ((currentBlock == null ? void 0 : currentBlock.tagName.toLowerCase()) === "p" && isNodeEmpty$1(currentBlock)) {
+            (_b = currentBlock.parentNode) == null ? void 0 : _b.replaceChild(list, currentBlock);
+          } else {
+            range2.insertNode(list);
+          }
+          range2.selectNodeContents(li);
+          range2.collapse(true);
+          selection.removeAllRanges();
+          selection.addRange(range2);
+        } else {
+          state2.doc.execCommand(
+            command === "orderedList" ? "insertOrderedList" : "insertUnorderedList",
+            false
+          );
+        }
+      }
     },
-    unorderedList: {
-      name: "Unordered List",
-      execute: (state22) => {
-        format2().list("unorderedList");
-      },
-      isActive: (state22) => state22.selectedStyles.has("unorderedList")
-    },
-    // Table commands
-    insertTable: {
-      name: "Insert Table",
-      execute: (state22, value) => {
-        const [rows, cols] = (value == null ? void 0 : value.split("x").map(Number)) || [3, 3];
-        insertTable(rows, cols, state22);
-      }
-    },
-    deleteTable: { name: "Delete Table", execute: (state22) => state22.range && deleteTable(state22.range) },
-    mergeCells: { name: "Merge Cells", execute: (state22) => state22.range && state22.doc && mergeCells(state22.range, state22.doc) },
-    splitCells: { name: "Split Cells", execute: (state22) => state22.range && state22.doc && splitCell(state22.range, state22.doc) },
-    addRowBefore: { name: "Add Row Before", execute: (state22) => state22.range && state22.doc && addRow("before", state22.range, state22.doc) },
-    addRowAfter: { name: "Add Row After", execute: (state22) => state22.range && state22.doc && addRow("after", state22.range, state22.doc) },
-    deleteRow: { name: "Delete Row", execute: (state22) => state22.range && deleteRow(state22.range) },
-    insertColumnLeft: { name: "Insert Column Left", execute: (state22) => state22.range && insertColumn("before", state22.range) },
-    insertColumnRight: { name: "Insert Column Right", execute: (state22) => state22.range && insertColumn("after", state22.range) },
-    deleteColumn: { name: "Delete Column", execute: (state22) => state22.range && deleteColumn(state22.range) },
-    // Alignment commands
-    alignLeft: { name: "Align Left", execute: (state22) => state22.range && alignColumn(state22.range, "left") },
-    alignCenter: { name: "Align Center", execute: (state22) => state22.range && alignColumn(state22.range, "center") },
-    alignRight: { name: "Align Right", execute: (state22) => state22.range && alignColumn(state22.range, "right") },
-    alignJustify: { name: "Align Justify", execute: (state22) => state22.range && alignColumn(state22.range, "justify") },
-    // Media commands
-    image: { name: "Insert Image", execute: (state22) => state22.modal && insertImage(state22.modal, state22) },
-    link: { name: "Insert Link", execute: (state22) => state22.modal && state22.range && insertLink(state22.modal, state22) },
-    // Other commands
-    clear: { name: "Clear Formatting", execute: (state22) => {
-      format2().clear();
-    } },
-    indent: { name: "Indent", execute: (state22) => {
-      format2().text("indent");
-    } },
-    outdent: { name: "Outdent", execute: (state22) => {
-      format2().text("outdent");
-    } },
-    fullScreen: {
-      name: "Full Screen",
-      execute: (state22) => {
-        state22.isFullscreen = !state22.isFullscreen;
-      },
-      isActive: (state22) => state22.isFullscreen
+    () => state2.selectedStyles.has(command)
+  );
+}
+function isNodeEmpty$1(node) {
+  var _a2;
+  const text = ((_a2 = node.textContent) == null ? void 0 : _a2.trim()) || "";
+  if (text) return false;
+  const brElements = node.getElementsByTagName("br");
+  if (brElements.length === 0) return true;
+  return brElements.length === 1 && node.childNodes.length === 1;
+}
+function createCommandRegistry(state2) {
+  const format2 = formatting(state2);
+  const historyCommands = {
+    undo: createCommand("Undo", () => {
+      var _a2;
+      return (_a2 = state2.doc) == null ? void 0 : _a2.execCommand("undo", false);
+    }),
+    redo: createCommand("Redo", () => {
+      var _a2;
+      return (_a2 = state2.doc) == null ? void 0 : _a2.execCommand("redo", false);
+    })
+  };
+  const textCommands = ["bold", "italic", "underline"].reduce((acc, cmd) => ({
+    ...acc,
+    [cmd]: createFormattingCommand(state2, "text", cmd)
+  }), {});
+  const headingCommands = ["h1", "h2", "h3", "h4", "h5", "h6"].reduce((acc, cmd) => ({
+    ...acc,
+    [cmd]: createFormattingCommand(state2, "block", cmd)
+  }), {});
+  const blockCommands = {
+    p: createFormattingCommand(state2, "block", "p"),
+    blockquote: createFormattingCommand(state2, "block", "blockquote")
+  };
+  const listCommands = {
+    orderedList: createFormattingCommand(state2, "list", "orderedList"),
+    unorderedList: createFormattingCommand(state2, "list", "unorderedList")
+  };
+  const tableCommands = {
+    insertTable: createCommand("Insert Table", (state22, value) => {
+      const [rows, cols] = (value == null ? void 0 : value.split("x").map(Number)) || [3, 3];
+      insertTable(rows, cols, state22);
+    }),
+    deleteTable: createCommand("Delete Table", (state22) => state22.range && deleteTable(state22.range)),
+    mergeCells: createCommand("Merge Cells", (state22) => state22.range && state22.doc && mergeCells(state22.range, state22.doc)),
+    splitCells: createCommand("Split Cells", (state22) => state22.range && state22.doc && splitCell(state22.range, state22.doc)),
+    addRowBefore: createCommand("Add Row Before", (state22) => state22.range && state22.doc && addRow("before", state22.range, state22.doc)),
+    addRowAfter: createCommand("Add Row After", (state22) => state22.range && state22.doc && addRow("after", state22.range, state22.doc)),
+    deleteRow: createCommand("Delete Row", (state22) => state22.range && deleteRow(state22.range)),
+    insertColumnLeft: createCommand("Insert Column Left", (state22) => state22.range && insertColumn("before", state22.range)),
+    insertColumnRight: createCommand("Insert Column Right", (state22) => state22.range && insertColumn("after", state22.range)),
+    deleteColumn: createCommand("Delete Column", (state22) => state22.range && deleteColumn(state22.range))
+  };
+  const alignmentCommands = ["Left", "Center", "Right", "Justify"].reduce((acc, align) => ({
+    ...acc,
+    [`align${align}`]: createCommand(`Align ${align}`, (state22) => state22.range && alignColumn(state22.range, align.toLowerCase()))
+  }), {});
+  const viewCommands = {
+    fullScreen: createCommand("Full Screen", (state22) => {
+      state22.isFullscreen = !state22.isFullscreen;
+    }, (state22) => state22.isFullscreen),
+    splitView: createCommand("Split View", (state22) => {
+      state22.isSplitView = !state22.isSplitView;
+    }, (state22) => state22.isSplitView),
+    codeView: createCommand("Code View", (state22) => {
+      state22.isCodeView = !state22.isCodeView;
+    }, (state22) => state22.isCodeView)
+  };
+  const mediaCommands = {
+    image: createCommand("Insert Image", (state22) => state22.modal && insertImage(state22.modal, state22)),
+    link: createCommand("Insert Link", (state22) => state22.modal && state22.range && insertLink(state22.modal, state22)),
+    embed: createCommand("Insert Embed", (state22) => state22.modal && insertEmbed(state22.modal, state22))
+  };
+  const otherCommands = {
+    clear: createCommand("Clear Formatting", () => {
+      format2.clear();
+    }),
+    indent: createCommand("Indent", () => {
+      format2.text("indent");
+    }),
+    outdent: createCommand("Outdent", () => {
+      format2.text("outdent");
+    })
+  };
+  return {
+    ...historyCommands,
+    ...textCommands,
+    ...headingCommands,
+    ...blockCommands,
+    ...listCommands,
+    ...tableCommands,
+    ...alignmentCommands,
+    ...viewCommands,
+    ...mediaCommands,
+    ...otherCommands
+  };
+}
+function createCommandExecutor(state2, commands) {
+  return {
+    execute(command, value) {
+      const cmd = commands[command];
+      if (cmd) {
+        cmd.execute(state2, value);
+      }
     },
-    splitView: {
-      name: "Split View",
-      execute: (state22) => {
-        state22.isSplitView = !state22.isSplitView;
-      },
-      isActive: (state22) => state22.isSplitView
+    isActive(command) {
+      var _a2;
+      const cmd = commands[command];
+      return ((_a2 = cmd.isActive) == null ? void 0 : _a2.call(cmd, state2)) || false;
     },
-    codeView: {
-      name: "Code View",
-      execute: (state22) => {
-        state22.isCodeView = !state22.isCodeView;
-      },
-      isActive: (state22) => state22.isCodeView
+    getValue(command) {
+      var _a2;
+      const cmd = commands[command];
+      return ((_a2 = cmd.getValue) == null ? void 0 : _a2.call(cmd, state2)) || null;
     }
   };
+}
+function useCommands(state2, debug) {
+  const commands = createCommandRegistry(state2);
   const executor = createCommandExecutor(state2, commands);
   return {
     execute: (command, value) => {
+      if (!state2.doc) return;
+      console.log("[useCommands.execute] Starting command execution:", command, value);
       debug == null ? void 0 : debug.logCommand(command, value);
+      if (["splitView", "codeView", "fullScreen"].includes(command)) {
+        console.log("[useCommands.execute] Handling view state command:", command);
+        switch (command) {
+          case "splitView":
+            state2.isSplitView = !state2.isSplitView;
+            return;
+          case "codeView":
+            state2.isCodeView = !state2.isCodeView;
+            return;
+          case "fullScreen":
+            state2.isFullscreen = !state2.isFullscreen;
+            return;
+        }
+      }
+      console.log("[useCommands.execute] Focusing editor");
+      state2.doc.body.focus();
+      console.log("[useCommands.execute] Executing command");
       executor.execute(command, value);
+      const newContent = state2.doc.body.innerHTML;
+      console.log("[useCommands.execute] Checking content changes");
+      console.log("[useCommands.execute] Old content length:", state2.content.length);
+      console.log("[useCommands.execute] New content length:", newContent.length);
+      if (newContent !== state2.content) {
+        console.log("[useCommands.execute] Content changed, updating state");
+        state2.content = newContent;
+      }
+      console.log("[useCommands.execute] Checking selection changes");
+      const selection = state2.doc.getSelection();
+      if (selection == null ? void 0 : selection.rangeCount) {
+        const hasSelectionChanged = !state2.selection || state2.selection !== selection || state2.rangeCount !== selection.rangeCount;
+        console.log("[useCommands.execute] Selection changed:", hasSelectionChanged);
+        if (hasSelectionChanged) {
+          console.log("[useCommands.execute] Updating selection state");
+          state2.selection = selection;
+          state2.range = selection.getRangeAt(0).cloneRange();
+          state2.rangeCount = selection.rangeCount;
+        }
+      }
     },
     isActive: executor.isActive,
     getValue: executor.getValue
   };
 }
+class EditorDebugger {
+  constructor(maxActions = 1e3) {
+    __publicField(this, "session");
+    __publicField(this, "maxActions");
+    __publicField(this, "isDevelopment");
+    this.maxActions = maxActions;
+    this.session = this.createNewSession();
+    this.isDevelopment = false;
+  }
+  createNewSession() {
+    return {
+      id: `session_${Date.now()}`,
+      startTime: Date.now(),
+      actions: []
+    };
+  }
+  getNodeDescription(node) {
+    var _a2;
+    if (node.nodeType === Node.TEXT_NODE) {
+      return `Text("${(_a2 = node.textContent) == null ? void 0 : _a2.slice(0, 20)}${node.textContent && node.textContent.length > 20 ? "..." : ""}")`;
+    }
+    const element = node;
+    return `${element.tagName.toLowerCase()}${element.id ? `#${element.id}` : ""}`;
+  }
+  captureState(state2) {
+    if (!state2.doc || !state2.selection) {
+      return {
+        content: "",
+        selection: null,
+        activeStyles: [],
+        caretPosition: null
+      };
+    }
+    const { selection } = state2;
+    const range2 = selection.rangeCount ? selection.getRangeAt(0) : null;
+    return {
+      content: state2.doc.body.innerHTML,
+      selection: range2 ? {
+        start: range2.startOffset,
+        end: range2.endOffset,
+        collapsed: range2.collapsed,
+        text: range2.toString()
+      } : null,
+      activeStyles: Array.from(state2.selectedStyles),
+      caretPosition: range2 ? {
+        node: this.getNodeDescription(range2.startContainer),
+        offset: range2.startOffset
+      } : null
+    };
+  }
+  logCommand(command, value, state2) {
+    this.addAction({
+      type: "command",
+      name: command,
+      timestamp: Date.now(),
+      details: { value },
+      state: this.captureState(state2)
+    });
+  }
+  logPaste(data2, state2) {
+    this.addAction({
+      type: "paste",
+      name: "paste",
+      timestamp: Date.now(),
+      details: {
+        html: data2.getData("text/html"),
+        text: data2.getData("text/plain"),
+        types: Array.from(data2.types)
+      },
+      state: this.captureState(state2)
+    });
+  }
+  logKeyboard(event, state2) {
+    this.addAction({
+      type: "keyboard",
+      name: "keypress",
+      timestamp: Date.now(),
+      details: {
+        key: event.key,
+        code: event.code,
+        ctrl: event.ctrlKey,
+        alt: event.altKey,
+        shift: event.shiftKey,
+        meta: event.metaKey
+      },
+      state: this.captureState(state2)
+    });
+  }
+  logSelection(state2) {
+    this.addAction({
+      type: "selection",
+      name: "selection_change",
+      timestamp: Date.now(),
+      details: {},
+      state: this.captureState(state2)
+    });
+  }
+  logInput(inputType, data2, state2) {
+    this.addAction({
+      type: "input",
+      name: inputType,
+      timestamp: Date.now(),
+      details: { data: data2 },
+      state: this.captureState(state2)
+    });
+  }
+  addAction(action) {
+    this.session.actions.push(action);
+    if (this.session.actions.length > this.maxActions) {
+      this.session.actions.shift();
+    }
+    if (this.isDevelopment) {
+      console.log("Editor Action:", action);
+    }
+  }
+  getSession() {
+    return this.session;
+  }
+  clearSession() {
+    this.session = this.createNewSession();
+  }
+  exportSession() {
+    return JSON.stringify(this.session, null, 2);
+  }
+  downloadSession() {
+    const blob = new Blob([this.exportSession()], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a2 = document.createElement("a");
+    a2.href = url;
+    a2.download = `editor_session_${this.session.id}.json`;
+    document.body.appendChild(a2);
+    a2.click();
+    document.body.removeChild(a2);
+    URL.revokeObjectURL(url);
+  }
+  exportSessionWithPrompt(userMessage) {
+    const prompt = {
+      message: userMessage || "here is a debug log, can you analyze and fix accordingly?",
+      session: this.session
+    };
+    return JSON.stringify(prompt, null, 2);
+  }
+}
+function preserveIframes(content) {
+  const temp = document.createElement("div");
+  temp.innerHTML = content;
+  const iframes = [];
+  temp.querySelectorAll("iframe").forEach((iframe, index2) => {
+    const placeholder = `<!--iframe-${index2}-->`;
+    iframes.push(iframe.cloneNode(true));
+    iframe.replaceWith(placeholder);
+  });
+  return {
+    html: temp.innerHTML,
+    iframes
+  };
+}
+function restoreIframes(doc, content, iframes) {
+  const placeholderPattern = /<!--iframe-(\d+)-->/g;
+  doc.body.innerHTML = content.replace(placeholderPattern, (_2, index2) => {
+    const iframe = iframes[Number(index2)];
+    return iframe ? iframe.outerHTML : "";
+  });
+}
 function useEditor() {
-  const editorDebugger = ref();
   const modal = useModal();
+  let cleanupListeners = null;
   const state2 = reactive({
     content: "",
     doc: void 0,
@@ -27182,95 +27614,142 @@ function useEditor() {
     redoStack: [],
     rangeCount: 0,
     range: null,
-    modal
+    modal,
+    debug: void 0
   });
-  function updateActiveStyles() {
-    if (!state2.doc) return;
-    const styles = /* @__PURE__ */ new Set();
-    const styleTypes = [
-      "bold",
-      "italic",
-      "underline",
-      "h1",
-      "h2",
-      "h3",
-      "h4",
-      "h5",
-      "h6",
-      "blockquote",
-      "table",
-      "p",
-      "ol",
-      "li"
-    ];
-    styleTypes.forEach((style) => {
-      if (state2.doc && isStyleActive(style, state2.doc)) {
-        styles.add(style);
+  const updateState = {
+    styles: () => {
+      if (!state2.doc) return;
+      console.log("[updateState.styles] Starting style update");
+      const styles = /* @__PURE__ */ new Set();
+      const styleTypes = [
+        "bold",
+        "italic",
+        "underline",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "blockquote",
+        "table",
+        "p",
+        "ol",
+        "li"
+      ];
+      styleTypes.forEach((style) => {
+        if (state2.doc && isStyleActive(style, state2.doc)) {
+          styles.add(style);
+        }
+      });
+      console.log("[updateState.styles] New styles:", Array.from(styles));
+      state2.selectedStyles = styles;
+    },
+    content: (source) => {
+      if (!state2.doc) return;
+      console.log("[updateState.content] Starting content update, source:", source);
+      const currentContent = state2.doc.body.innerHTML;
+      console.log("[updateState.content] Current content length:", currentContent.length);
+      console.log("[updateState.content] State content length:", state2.content.length);
+      if (currentContent !== state2.content) {
+        console.log("[updateState.content] Content changed, pushing to undo stack");
+        state2.undoStack.push(state2.content);
+        state2.redoStack = [];
+      }
+      const selection = state2.doc.getSelection();
+      const range2 = (selection == null ? void 0 : selection.rangeCount) ? selection.getRangeAt(0).cloneRange() : null;
+      console.log("[updateState.content] Has selection:", !!selection, "Has range:", !!range2);
+      if (source === "html") {
+        console.log("[updateState.content] Processing HTML content");
+        const preserved = preserveIframes(state2.content);
+        console.log("[updateState.content] Preserved iframes count:", preserved.iframes.length);
+        state2.doc.body.innerHTML = preserved.html;
+        setTimeout(() => {
+          console.log("[updateState.content] Restoring iframes");
+          if (state2.doc) {
+            restoreIframes(state2.doc, state2.content, preserved.iframes);
+            if (range2 && selection) {
+              try {
+                selection.removeAllRanges();
+                selection.addRange(range2);
+                console.log("[updateState.content] Selection restored");
+              } catch (e) {
+                console.warn("[updateState.content] Could not restore selection:", e);
+              }
+            }
+          }
+        }, 0);
+      } else {
+        console.log("[updateState.content] Setting text content");
+        state2.doc.body.textContent = state2.content;
       }
-    });
-    state2.selectedStyles = styles;
-  }
-  function updateContent(source) {
-    if (!state2.doc) return;
-    state2.undoStack.push(state2.content);
-    state2.redoStack = [];
-    if (source === "html") {
-      state2.doc.body.innerHTML = state2.content;
-    } else {
-      state2.doc.body.textContent = state2.content;
-    }
-    updateActiveStyles();
-  }
-  function updateSelection() {
-    if (!state2.doc) return;
-    state2.selection = state2.doc.getSelection();
-    if (!state2.selection) return;
-    try {
-      if (!state2.doc.body.contains(state2.selection.anchorNode)) {
-        state2.doc.body.focus();
+    },
+    selection: () => {
+      if (!state2.doc) return;
+      console.log("[updateState.selection] Starting selection update");
+      const newSelection = state2.doc.getSelection();
+      if (!newSelection) {
+        console.log("[updateState.selection] No selection available");
         return;
       }
-      state2.rangeCount = state2.selection.rangeCount;
-      if (!state2.rangeCount) {
-        const range2 = state2.doc.createRange();
-        range2.selectNodeContents(state2.doc.body);
-        range2.collapse(false);
-        state2.selection.removeAllRanges();
-        state2.selection.addRange(range2);
+      try {
+        if (!state2.doc.body.contains(newSelection.anchorNode)) {
+          console.log("[updateState.selection] Selection outside editor body, refocusing");
+          state2.doc.body.focus();
+          return;
+        }
+        const hasSelectionChanged = !state2.selection || state2.selection !== newSelection || state2.rangeCount !== newSelection.rangeCount || newSelection.rangeCount > 0 && state2.range && (state2.range.startContainer !== newSelection.getRangeAt(0).startContainer || state2.range.startOffset !== newSelection.getRangeAt(0).startOffset || state2.range.endContainer !== newSelection.getRangeAt(0).endContainer || state2.range.endOffset !== newSelection.getRangeAt(0).endOffset);
+        console.log("[updateState.selection] Selection changed:", hasSelectionChanged);
+        if (hasSelectionChanged) {
+          state2.selection = newSelection;
+          state2.rangeCount = newSelection.rangeCount;
+          if (newSelection.rangeCount > 0) {
+            state2.range = newSelection.getRangeAt(0).cloneRange();
+            console.log("[updateState.selection] New range:", {
+              startOffset: state2.range.startOffset,
+              endOffset: state2.range.endOffset,
+              collapsed: state2.range.collapsed
+            });
+          }
+          requestAnimationFrame(() => {
+            console.log("[updateState.selection] Updating styles in RAF");
+            updateState.styles();
+          });
+        }
+      } catch (e) {
+        console.warn("[updateState.selection] Selection error:", e);
+        state2.selection = null;
+        state2.range = null;
+        state2.rangeCount = 0;
+        state2.selectedStyles = /* @__PURE__ */ new Set();
       }
-      state2.range = state2.selection.getRangeAt(0).cloneRange();
-      updateActiveStyles();
-    } catch (e) {
-      console.warn("Selection error:", e);
-      state2.selection = null;
-      state2.range = null;
-      state2.rangeCount = 0;
-      state2.selectedStyles = /* @__PURE__ */ new Set();
     }
-  }
-  function setupEventListeners(doc) {
-    doc.addEventListener("input", () => {
-      state2.content = doc.body.innerHTML;
-      updateActiveStyles();
-    });
-    doc.addEventListener("selectionchange", () => {
-      updateSelection();
-    });
-    doc.addEventListener("mouseup", () => {
-      updateSelection();
-    });
-    doc.addEventListener("keyup", (e) => {
-      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
-        updateSelection();
+  };
+  const history = {
+    undo: () => {
+      if (state2.undoStack.length === 0) return;
+      state2.redoStack.push(state2.content);
+      const lastContent = state2.undoStack.pop();
+      if (lastContent !== void 0) {
+        state2.content = lastContent;
+        updateState.content("html");
       }
-    });
-    const cleanEmptyTags = () => {
+    },
+    redo: () => {
+      if (state2.redoStack.length === 0) return;
+      state2.undoStack.push(state2.content);
+      const nextContent = state2.redoStack.pop();
+      if (nextContent !== void 0) {
+        state2.content = nextContent;
+        updateState.content("html");
+      }
+    }
+  };
+  const cleanup = {
+    emptyTags: (doc) => {
       var _a2, _b;
-      const walker = doc.createTreeWalker(
-        doc.body,
-        NodeFilter.SHOW_ELEMENT,
-        null
-      );
+      const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_ELEMENT, null);
       const nodesToRemove = [];
       let node = walker.nextNode();
       while (node) {
@@ -27285,12 +27764,10 @@ function useEditor() {
         const isEmpty = !textContent && !innerHTML;
         const isDirectChildOfBody = node.parentElement === doc.body;
         if (isEmpty || hasOnlyNbsp || hasOnlyBr && !isDirectChildOfBody) {
-          if (isDirectChildOfBody) {
-            if (!node.matches("p")) {
-              const p2 = doc.createElement("p");
-              p2.innerHTML = "<br>";
-              (_b = node.parentNode) == null ? void 0 : _b.replaceChild(p2, node);
-            }
+          if (isDirectChildOfBody && !node.matches("p")) {
+            const p2 = doc.createElement("p");
+            p2.innerHTML = "<br>";
+            (_b = node.parentNode) == null ? void 0 : _b.replaceChild(p2, node);
           } else {
             nodesToRemove.push(node);
           }
@@ -27300,237 +27777,283 @@ function useEditor() {
       nodesToRemove.forEach((node2) => {
         node2.remove();
       });
+    },
+    normalizeContent: (doc) => {
+      if (!doc.body.firstElementChild) {
+        const p2 = doc.createElement("p");
+        p2.dir = doc.body.dir;
+        p2.innerHTML = "<br>";
+        doc.body.appendChild(p2);
+      } else {
+        const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT);
+        const textNodes = [];
+        let node;
+        while (node = walker.nextNode()) {
+          if (node.parentElement === doc.body) {
+            textNodes.push(node);
+          }
+        }
+        textNodes.forEach((textNode) => {
+          var _a2;
+          if ((_a2 = textNode.textContent) == null ? void 0 : _a2.trim()) {
+            const p2 = doc.createElement("p");
+            p2.dir = doc.body.dir;
+            p2.appendChild(textNode.cloneNode());
+            doc.body.replaceChild(p2, textNode);
+          } else {
+            doc.body.removeChild(textNode);
+          }
+        });
+      }
+    }
+  };
+  function setupEventListeners(doc) {
+    console.log("[setupEventListeners] Starting setup");
+    if (cleanupListeners) {
+      console.log("[setupEventListeners] Cleaning up existing listeners");
+      cleanupListeners();
+      cleanupListeners = null;
+    }
+    let isUpdating = false;
+    let contentUpdateTimeout = null;
+    let selectionUpdateTimeout = null;
+    let updateCount = 0;
+    const events = {
+      input: () => {
+        updateCount++;
+        console.log(`[input event #${updateCount}] Starting, isUpdating:`, isUpdating);
+        if (isUpdating) {
+          console.log(`[input event #${updateCount}] Skipped - already updating`);
+          return;
+        }
+        isUpdating = true;
+        if (contentUpdateTimeout) {
+          console.log(`[input event #${updateCount}] Clearing previous timeout`);
+          window.clearTimeout(contentUpdateTimeout);
+        }
+        contentUpdateTimeout = window.setTimeout(() => {
+          console.log(`[input event #${updateCount}] Timeout fired`);
+          const newContent = doc.body.innerHTML;
+          if (newContent !== state2.content) {
+            console.log(`[input event #${updateCount}] Content changed, updating state`);
+            state2.content = newContent;
+          } else {
+            console.log(`[input event #${updateCount}] Content unchanged`);
+          }
+          isUpdating = false;
+        }, 100);
+      },
+      selectionchange: () => {
+        updateCount++;
+        console.log(`[selectionchange #${updateCount}] Starting, isUpdating:`, isUpdating);
+        if (isUpdating) {
+          console.log(`[selectionchange #${updateCount}] Skipped - already updating`);
+          return;
+        }
+        if (selectionUpdateTimeout) {
+          console.log(`[selectionchange #${updateCount}] Clearing previous timeout`);
+          window.clearTimeout(selectionUpdateTimeout);
+        }
+        selectionUpdateTimeout = window.setTimeout(() => {
+          console.log(`[selectionchange #${updateCount}] Timeout fired`);
+          if (!isUpdating) {
+            updateState.selection();
+          } else {
+            console.log(`[selectionchange #${updateCount}] Skipped - still updating`);
+          }
+        }, 150);
+      },
+      mouseup: () => {
+        updateCount++;
+        console.log(`[mouseup #${updateCount}] Starting, isUpdating:`, isUpdating);
+        if (isUpdating) return;
+        updateState.selection();
+      },
+      keyup: (e) => {
+        updateCount++;
+        console.log(`[keyup #${updateCount}] Key:`, e.key, "isUpdating:", isUpdating);
+        if (isUpdating) return;
+        if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
+          updateState.selection();
+        }
+      }
+    };
+    Object.entries(events).forEach(([event, handler]) => {
+      doc.addEventListener(event, handler);
+      console.log("[setupEventListeners] Added listener for:", event);
+    });
+    cleanupListeners = () => {
+      console.log("[setupEventListeners] Cleaning up event listeners");
+      if (contentUpdateTimeout) window.clearTimeout(contentUpdateTimeout);
+      if (selectionUpdateTimeout) window.clearTimeout(selectionUpdateTimeout);
+      Object.entries(events).forEach(([event, handler]) => {
+        doc.removeEventListener(event, handler);
+      });
     };
-    const observer = new MutationObserver(() => {
-      cleanEmptyTags();
-    });
-    observer.observe(doc.body, {
-      childList: true,
-      subtree: true,
-      characterData: true
-    });
+    return cleanupListeners;
   }
   function init(doc) {
+    console.log("[init] Starting initialization");
+    if (state2.hasInit) {
+      console.log("[init] Already initialized, cleaning up first");
+      if (cleanupListeners) {
+        cleanupListeners();
+        cleanupListeners = null;
+      }
+    }
     state2.doc = doc;
     state2.hasInit = true;
-    setupEventListeners(doc);
-    updateContent("html");
-  }
-  function handleUndo() {
-    if (state2.undoStack.length === 0) return;
-    state2.redoStack.push(state2.content);
-    const lastContent = state2.undoStack.pop();
-    if (lastContent !== void 0) {
-      state2.content = lastContent;
-      updateContent("html");
-    }
-  }
-  function handleRedo() {
-    if (state2.redoStack.length === 0) return;
-    state2.undoStack.push(state2.content);
-    const nextContent = state2.redoStack.pop();
-    if (nextContent !== void 0) {
-      state2.content = nextContent;
-      updateContent("html");
-    }
-  }
-  function handleToolbarAction(action, value) {
-    if (!state2.doc) return;
-    if (action === "undo") {
-      handleUndo();
-      return;
-    }
-    if (action === "redo") {
-      handleRedo();
-      return;
-    }
-    if (action === "fullScreen") {
-      state2.isFullscreen = !state2.isFullscreen;
-      return;
-    }
-    if (action === "splitView") {
-      state2.isSplitView = !state2.isSplitView;
-      return;
+    if (state2.content) {
+      const preserved = preserveIframes(state2.content);
+      doc.body.innerHTML = preserved.html;
+      setTimeout(() => {
+        if (state2.doc) {
+          restoreIframes(doc, state2.content, preserved.iframes);
+        }
+      }, 0);
     }
-    if (action === "codeView") {
-      state2.isCodeView = !state2.isCodeView;
-      return;
+    cleanup.normalizeContent(doc);
+    const range2 = doc.createRange();
+    const selection = doc.getSelection();
+    if (selection) {
+      range2.selectNodeContents(doc.body);
+      range2.collapse(false);
+      selection.removeAllRanges();
+      selection.addRange(range2);
+      state2.range = range2.cloneRange();
+      state2.selection = selection;
+      state2.rangeCount = selection.rangeCount;
+    }
+    cleanupListeners = setupEventListeners(doc);
+  }
+  function initDebugger() {
+    if (!state2.debug) {
+      const debugInstance = new EditorDebugger();
+      const debug = {
+        debugger: debugInstance,
+        logCommand: (command, value) => {
+          debugInstance.logCommand(command, value, state2);
+        },
+        getSession: () => debugInstance.getSession(),
+        clearSession: () => {
+          debugInstance.clearSession();
+        },
+        downloadSession: () => {
+          debugInstance.downloadSession();
+        },
+        exportDebugWithPrompt: (message2) => debugInstance.exportSessionWithPrompt(message2)
+      };
+      state2.debug = debug;
     }
-    const format2 = formatting(state2);
-    state2.doc.body.focus();
-    switch (action) {
-      case "bold":
-      case "italic":
-      case "underline":
-        format2.text(action);
-        break;
-      case "orderedList":
-        format2.list("ol");
-        break;
-      case "unorderedList":
-        format2.list("ul");
-        break;
-      case "blockquote":
-      case "p":
-      case "h1":
-      case "h2":
-      case "h3":
-      case "h4":
-      case "h5":
-      case "h6":
-        format2.block(action, action);
-        break;
-      case "insertTable": {
-        const [rows, cols] = (value == null ? void 0 : value.split("x").map(Number)) || [3, 3];
-        insertTable(rows, cols, state2);
-        break;
+  }
+  if (typeof window !== "undefined") {
+    window.addEventListener("beforeunload", () => {
+      if (cleanupListeners) {
+        cleanupListeners();
       }
-      case "deleteTable":
-        if (state2.range) deleteTable(state2.range);
-        break;
-      case "mergeCells":
-        if (state2.range && state2.doc) mergeCells(state2.range, state2.doc);
-        break;
-      case "splitCells":
-        if (state2.range && state2.doc) splitCell(state2.range, state2.doc);
-        break;
-      case "addRowBefore":
-      case "addRowAfter":
-        if (state2.range && state2.doc) {
-          addRow(action === "addRowBefore" ? "before" : "after", state2.range, state2.doc);
-        }
-        break;
-      case "deleteRow":
-        if (state2.range) deleteRow(state2.range);
-        break;
-      case "insertColumnLeft":
-      case "insertColumnRight":
-        if (state2.range) {
-          insertColumn(action === "insertColumnLeft" ? "before" : "after", state2.range);
-        }
-        break;
-      case "deleteColumn":
-        if (state2.range) deleteColumn(state2.range);
-        break;
-      case "alignLeft":
-      case "alignCenter":
-      case "alignRight":
-      case "alignJustify":
-        if (state2.range) {
-          alignColumn(state2.range, action.replace("align", "").toLowerCase());
-        }
-        break;
-      case "clear":
-        format2.clear();
-        break;
-      default:
-        format2.text(action);
-    }
-    updateContent("html");
+    });
   }
-  const getDebugSession = () => {
-    var _a2;
-    return (_a2 = editorDebugger.value) == null ? void 0 : _a2.getSession();
-  };
-  const clearDebugSession = () => {
-    var _a2;
-    return (_a2 = editorDebugger.value) == null ? void 0 : _a2.clearSession();
-  };
-  const downloadDebugSession = () => {
-    var _a2;
-    return (_a2 = editorDebugger.value) == null ? void 0 : _a2.downloadSession();
-  };
-  const logCommand = (command, value) => {
-    var _a2;
-    return (_a2 = editorDebugger.value) == null ? void 0 : _a2.logCommand(command, value, state2);
-  };
-  const exportDebugWithPrompt = (message2) => {
-    var _a2;
-    return (_a2 = editorDebugger.value) == null ? void 0 : _a2.exportSessionWithPrompt(message2);
-  };
   return {
     state: state2,
     init,
-    handleToolbarAction,
-    updateContent,
-    handleUndo,
-    handleRedo,
-    // Debug methods
-    debug: {
-      getSession: getDebugSession,
-      clearSession: clearDebugSession,
-      downloadSession: downloadDebugSession,
-      logCommand,
-      exportDebugWithPrompt
-    }
-  };
-}
-function useEditorKeyboard(doc, handleToolbarAction) {
+    updateState,
+    history,
+    initDebugger,
+    cleanup: () => {
+      if (cleanupListeners) {
+        cleanupListeners();
+        cleanupListeners = null;
+      }
+    }
+  };
+}
+const shortcuts = [
+  { key: "b", command: "bold" },
+  { key: "i", command: "italic" },
+  { key: "u", command: "underline" },
+  { key: "z", command: "undo" },
+  { key: "z", modifiers: { shift: true }, command: "redo" },
+  { key: "y", command: "redo" },
+  { key: ".", modifiers: { shift: true }, command: "orderedList" },
+  { key: "/", modifiers: { shift: true }, command: "unorderedList" },
+  { key: "]", command: "indent" },
+  { key: "[", command: "outdent" },
+  ...Array.from({ length: 6 }, (_2, i2) => ({
+    key: String(i2 + 1),
+    modifiers: { alt: true },
+    command: `h${i2 + 1}`
+  }))
+];
+function useEditorKeyboard(doc, executor) {
   doc.addEventListener("keydown", (e) => {
-    if (e.ctrlKey || e.metaKey) {
-      switch (e.key) {
-        case "b":
-          e.preventDefault();
-          handleToolbarAction("bold");
-          break;
-        case "i":
-          e.preventDefault();
-          handleToolbarAction("italic");
-          break;
-        case "u":
-          e.preventDefault();
-          handleToolbarAction("underline");
-          break;
-        case "z":
-          e.preventDefault();
-          if (e.shiftKey) {
-            handleToolbarAction("redo");
-          } else {
-            handleToolbarAction("undo");
-          }
-          break;
-        case "y":
-          e.preventDefault();
-          handleToolbarAction("redo");
-          break;
-        // List shortcuts
-        case ".":
-          if (e.shiftKey) {
-            e.preventDefault();
-            handleToolbarAction("orderedList");
-          }
-          break;
-        case "/":
-          if (e.shiftKey) {
+    var _a2, _b;
+    if (e.key === "Enter" && !e.shiftKey) {
+      const selection = doc.getSelection();
+      if (!selection || !selection.rangeCount) return;
+      const range2 = selection.getRangeAt(0);
+      const container = range2.commonAncestorContainer;
+      const listItem = (_a2 = container.nodeType === 3 ? container.parentElement : container) == null ? void 0 : _a2.closest("li");
+      if (listItem) {
+        if (range2.collapsed && isAtEndOfNode(listItem, range2)) {
+          if (isNodeEmpty(listItem)) {
             e.preventDefault();
-            handleToolbarAction("unorderedList");
-          }
-          break;
-        // Heading shortcuts
-        case "1":
-        case "2":
-        case "3":
-        case "4":
-        case "5":
-        case "6":
-          if (e.altKey) {
+            const list = listItem.parentElement;
+            if (!list) return;
+            listItem.remove();
+            if (!list.querySelector("li")) {
+              const p2 = doc.createElement("p");
+              p2.innerHTML = "<br>";
+              (_b = list.parentNode) == null ? void 0 : _b.replaceChild(p2, list);
+              range2.selectNodeContents(p2);
+              range2.collapse(true);
+              selection.removeAllRanges();
+              selection.addRange(range2);
+            }
+          } else {
             e.preventDefault();
-            handleToolbarAction(`h${e.key}`);
+            const newLi = doc.createElement("li");
+            newLi.innerHTML = "&nbsp;<br>";
+            listItem.insertAdjacentElement("afterend", newLi);
+            range2.selectNodeContents(newLi);
+            range2.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(range2);
           }
-          break;
-        // Indentation
-        case "]":
-          e.preventDefault();
-          handleToolbarAction("indent");
-          break;
-        case "[":
-          e.preventDefault();
-          handleToolbarAction("outdent");
-          break;
+        }
       }
     }
+    if (!e.ctrlKey && !e.metaKey) return;
+    const matchingShortcut = shortcuts.find((shortcut) => {
+      const keyMatch = shortcut.key === e.key;
+      const modifiersMatch = !shortcut.modifiers || (!shortcut.modifiers.ctrl || e.ctrlKey || e.metaKey) && (!shortcut.modifiers.alt || e.altKey) && (!shortcut.modifiers.shift || e.shiftKey);
+      return keyMatch && modifiersMatch;
+    });
+    if (matchingShortcut) {
+      e.preventDefault();
+      executor.execute(matchingShortcut.command);
+    }
   });
 }
+function isAtEndOfNode(node, range2) {
+  var _a2;
+  if (node.nodeType === 3) {
+    return range2.startOffset === node.length;
+  }
+  const { lastChild: lastChild2 } = node;
+  if (!lastChild2) return true;
+  if (lastChild2.nodeType === 3) {
+    return range2.startContainer === lastChild2 && range2.startOffset === ((_a2 = lastChild2.textContent) == null ? void 0 : _a2.length);
+  }
+  return range2.startContainer === node && range2.startOffset === node.childNodes.length;
+}
+function isNodeEmpty(node) {
+  var _a2;
+  const text = ((_a2 = node.textContent) == null ? void 0 : _a2.replace(/\s/g, "")) || "";
+  if (text) return false;
+  const brElements = node.getElementsByTagName("br");
+  if (brElements.length === 0) return true;
+  return brElements.length === 1 && node.childNodes.length <= 2;
+}
 const _hoisted_1$s = { class: "bagel-input" };
 const _hoisted_2$i = { class: "content-area radius-05" };
 const _hoisted_3$e = {
@@ -27551,58 +28074,104 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     const emit2 = __emit;
     const iframe = ref();
     const editor = useEditor();
-    const commands = useCommands(editor.state, props2.debug ? editor.debug : void 0);
-    const debugMethods = computed(() => props2.debug ? editor.debug : void 0);
+    const isInitializing = ref(false);
+    const hasInitialized = ref(false);
+    if (props2.debug) {
+      editor.initDebugger();
+    }
+    const commands = useCommands(editor.state, editor.state.debug);
+    const debugMethods = computed(() => editor.state.debug);
     const hasRTL = computed(() => /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(props2.modelValue));
+    onUnmounted(() => {
+      editor.cleanup();
+    });
     async function initEditor() {
       var _a2;
-      if (!iframe.value) {
-        setTimeout(initEditor, 100);
+      console.log("[initEditor] Starting, isInitializing:", isInitializing.value, "hasInitialized:", hasInitialized.value);
+      if (isInitializing.value || !iframe.value || hasInitialized.value) {
+        console.log("[initEditor] Skipped - already initializing/initialized or no iframe");
         return;
       }
-      editor.state.content = props2.modelValue || "";
-      const doc = iframe.value.contentDocument || ((_a2 = iframe.value.contentWindow) == null ? void 0 : _a2.document);
-      if (!doc) return;
-      doc.designMode = "on";
-      doc.body.contentEditable = "true";
-      doc.body.dir = hasRTL.value ? "rtl" : "ltr";
-      const style = doc.createElement("style");
-      style.textContent = (await import("./editor-BKPRpAjr.js")).default;
-      doc.head.appendChild(style);
-      editor.init(doc);
-      useEditorKeyboard(doc, commands.execute);
-      if (!doc.body.firstElementChild) {
-        const p2 = doc.createElement("p");
-        p2.dir = doc.body.dir;
-        p2.innerHTML = "<br>";
-        doc.body.appendChild(p2);
-      } else {
-        const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT);
-        const textNodes = [];
-        let node;
-        while (node = walker.nextNode()) {
-          if (node.parentElement === doc.body) {
-            textNodes.push(node);
-          }
+      isInitializing.value = true;
+      try {
+        const editorStyles = await import("./editor-7QC0nG_c.js");
+        const htmlContent = `
+			<!DOCTYPE html>
+			<html>
+			<head>
+				<meta charset="UTF-8">
+				<meta name="viewport" content="width=device-width, initial-scale=1.0">
+				<meta http-equiv="Content-Security-Policy" content="
+					default-src * data: blob: 'unsafe-inline' 'unsafe-eval';
+					img-src * data: blob:;
+					style-src * 'unsafe-inline';
+					script-src * 'unsafe-inline' 'unsafe-eval';
+					frame-src * data: blob:;
+					connect-src *;
+					media-src *;
+				">
+				<base target="_blank">
+				<style id="editor-styles">${editorStyles.default}</style>
+			</head>
+			<body>${props2.modelValue || ""}</body>
+			</html>
+		`;
+        const doc = iframe.value.contentDocument || ((_a2 = iframe.value.contentWindow) == null ? void 0 : _a2.document);
+        if (!doc) {
+          console.warn("[initEditor] No document found");
+          return;
         }
-        textNodes.forEach((textNode) => {
-          var _a3;
-          if ((_a3 = textNode.textContent) == null ? void 0 : _a3.trim()) {
-            const p2 = doc.createElement("p");
-            p2.dir = doc.body.dir;
-            p2.appendChild(textNode.cloneNode());
-            doc.body.replaceChild(p2, textNode);
-          } else {
-            doc.body.removeChild(textNode);
+        doc.open();
+        doc.write(htmlContent);
+        doc.close();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        doc.designMode = "on";
+        doc.body.contentEditable = "true";
+        doc.body.dir = hasRTL.value ? "rtl" : "ltr";
+        editor.init(doc);
+        useEditorKeyboard(doc, commands);
+        if (!doc.body.firstElementChild) {
+          const p2 = doc.createElement("p");
+          p2.dir = doc.body.dir;
+          p2.innerHTML = "<br>";
+          doc.body.appendChild(p2);
+        } else {
+          const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT);
+          const textNodes = [];
+          let node;
+          while (node = walker.nextNode()) {
+            if (node.parentElement === doc.body) {
+              textNodes.push(node);
+            }
           }
-        });
+          textNodes.forEach((textNode) => {
+            var _a3;
+            if ((_a3 = textNode.textContent) == null ? void 0 : _a3.trim()) {
+              const p2 = doc.createElement("p");
+              p2.dir = doc.body.dir;
+              p2.appendChild(textNode.cloneNode());
+              doc.body.replaceChild(p2, textNode);
+            } else {
+              doc.body.removeChild(textNode);
+            }
+          });
+        }
+        doc.body.focus();
+        hasInitialized.value = true;
+      } catch (error) {
+        console.error("[initEditor] Error during initialization:", error);
+      } finally {
+        isInitializing.value = false;
       }
-      doc.body.focus();
     }
-    watch(() => props2.modelValue, (newValue) => {
+    watch(() => props2.modelValue, (newValue, oldValue) => {
       if (newValue !== editor.state.content) {
-        editor.state.content = newValue;
-        editor.updateContent("html");
+        if (!oldValue || Math.abs(newValue.length - oldValue.length) > 50) {
+          console.log("[watch] Significant content change, resetting initialization state");
+          hasInitialized.value = false;
+          editor.state.content = newValue;
+          editor.updateState.content("html");
+        }
       }
     });
     watch(() => editor.state.content, (newValue) => {
@@ -27635,6 +28204,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
                 ref: iframe,
                 class: "editableContent",
                 title: "Editor",
+                sandbox: "allow-same-origin allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts allow-top-navigation allow-top-navigation-by-user-activation",
+                src: "about:blank",
                 onLoad: initEditor
               }, null, 544)
             ]),
@@ -27643,7 +28214,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
               modelValue: unref(editor).state.content,
               "onUpdate:modelValue": [
                 _cache[0] || (_cache[0] = ($event) => unref(editor).state.content = $event),
-                _cache[1] || (_cache[1] = ($event) => unref(editor).updateContent("html"))
+                _cache[1] || (_cache[1] = ($event) => unref(editor).updateState.content("html"))
               ],
               language: "html"
             }, null, 8, ["modelValue"])) : createCommentVNode("", true)
@@ -27692,7 +28263,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-08117333"]]);
+const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-b58de58d"]]);
 const _hoisted_1$r = { class: "flex gap-05" };
 const _hoisted_2$h = ["disabled"];
 const _hoisted_3$d = { key: 1 };