@bagelink/vue 0.0.1260 → 0.0.1268

package/dist/index.cjs

@@ -5,51 +5,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 const vueRouter = require("vue-router");
-const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  get arrField() {
-    return arrField;
-  },
-  get bglForm() {
-    return bglForm;
-  },
-  get checkField() {
-    return checkField;
-  },
-  get dateField() {
-    return dateField;
-  },
-  get findBglFieldById() {
-    return findBglFieldById;
-  },
-  get frmRow() {
-    return frmRow;
-  },
-  get getBaseField() {
-    return getBaseField;
-  },
-  get numField() {
-    return numField;
-  },
-  get richText() {
-    return richText;
-  },
-  get selectField() {
-    return selectField;
-  },
-  get slctField() {
-    return slctField;
-  },
-  get telField() {
-    return telField;
-  },
-  get txtField() {
-    return txtField;
-  },
-  get uploadField() {
-    return uploadField;
-  }
-}, Symbol.toStringTag, { value: "Module" }));
 const _sfc_main$1m = /* @__PURE__ */ vue.defineComponent({
   __name: "Accordion",
   setup(__props) {
@@ -10772,7 +10727,7 @@ function useTableData(options) {
     return currentData.map(transform).sort((a2, z2) => {
       const aValue = a2[computedSortField.value] ?? "";
       const bValue = z2[computedSortField.value] ?? "";
-      if (isDate(aValue) && isDate(bValue)) {
+      if (isDate$2(aValue) && isDate$2(bValue)) {
         return sortDirection.value === "ASC" ? new Date(aValue).getTime() - new Date(bValue).getTime() : new Date(bValue).getTime() - new Date(aValue).getTime();
       }
       const numAValue = Number.parseInt(`${aValue}`.replaceAll(NON_DIGIT_REGEX, ""), 10);
@@ -11515,7 +11470,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
   emits: /* @__PURE__ */ vue.mergeModels(["update:selectedItems", "orderBy", "select", "lastItemVisible"], ["update:loading", "update:itemHeight", "update:selectedItems"]),
   setup(__props, { emit: __emit }) {
     vue.useCssVars((_ctx) => ({
-      "3ee4947a": vue.unref(computedItemHeight)
+      "40bb5b9a": vue.unref(computedItemHeight)
     }));
     const props2 = __props;
     const emit2 = __emit;
@@ -11578,7 +11533,12 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
     function renderFieldForRow(field, row) {
       const { renderField } = useSchemaField({
         mode: "table",
-        getRowData: () => row
+        getRowData: () => {
+          if (field.id) {
+            return { [field.id]: getNestedValue(row, field.id) };
+          }
+          return row;
+        }
       });
       return renderField({ ...field, label: "" }, slots);
     }
@@ -11694,7 +11654,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-3668ec69"]]);
+const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-89f6838b"]]);
 function useDraggable(options = {}) {
   const isDragging = vue.ref(false);
   const dragElement = vue.ref(null);
@@ -14804,7 +14764,9 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
     round: { type: Boolean },
     placement: {},
     noAutoFocus: { type: Boolean },
-    positioningDisabled: { type: Boolean }
+    positioningDisabled: { type: Boolean },
+    autoHide: { type: Boolean },
+    triggers: {}
   }, {
     "shown": {
       type: Boolean,
@@ -14837,6 +14799,8 @@ const _sfc_main$V = /* @__PURE__ */ vue.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"))
       }, {
@@ -14863,7 +14827,7 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
           ])
         ]),
         _: 3
-      }, 8, ["shown", "disabled", "noAutoFocus", "placement"]);
+      }, 8, ["shown", "disabled", "noAutoFocus", "placement", "autoHide", "triggers"]);
     };
   }
 });
@@ -14916,6 +14880,385 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-f99f1900"]]);
+function getBaseField(id, labelOrRest = {}, rest = {}) {
+  if (typeof labelOrRest === "object") return { id, ...labelOrRest };
+  return { id, label: labelOrRest, ...rest };
+}
+function richText(id, label, options) {
+  return {
+    $el: "richtext",
+    class: options == null ? void 0 : options.class,
+    required: options == null ? void 0 : options.required,
+    id,
+    label,
+    vIf: options == null ? void 0 : options.vIf,
+    placeholder: options == null ? void 0 : options.placeholder,
+    attrs: {}
+  };
+}
+function txtField(id, label, options) {
+  return {
+    $el: "text",
+    class: options == null ? void 0 : options.class,
+    required: options == null ? void 0 : options.required,
+    id,
+    label,
+    vIf: options == null ? void 0 : options.vIf,
+    disabled: options == null ? void 0 : options.disabled,
+    placeholder: options == null ? void 0 : options.placeholder,
+    defaultValue: options == null ? void 0 : options.defaultValue,
+    attrs: {
+      type: options == null ? void 0 : options.type,
+      pattern: options == null ? void 0 : options.pattern,
+      multiline: options == null ? void 0 : options.multiline
+    }
+  };
+}
+function selectField(id, label, options, config) {
+  return {
+    $el: "select",
+    id,
+    options,
+    class: config == null ? void 0 : config.class,
+    placeholder: config == null ? void 0 : config.placeholder,
+    required: config == null ? void 0 : config.required,
+    label,
+    defaultValue: config == null ? void 0 : config.defaultValue,
+    vIf: config == null ? void 0 : config.vIf,
+    attrs: {
+      disabled: config == null ? void 0 : config.disabled,
+      searchable: config == null ? void 0 : config.searchable,
+      multiselect: config == null ? void 0 : config.multiselect,
+      onSearch: config == null ? void 0 : config.onSearch,
+      clearable: config == null ? void 0 : config.clearable
+    }
+  };
+}
+const slctField = selectField;
+function checkField(id, label, options) {
+  return {
+    $el: "check",
+    class: options == null ? void 0 : options.class,
+    required: options == null ? void 0 : options.required,
+    id,
+    label
+  };
+}
+function dateField(id, label, options) {
+  return {
+    $el: "date",
+    class: options == null ? void 0 : options.class,
+    required: options == null ? void 0 : options.required,
+    id,
+    disabled: options == null ? void 0 : options.disabled,
+    label,
+    defaultValue: options == null ? void 0 : options.defaultValue,
+    vIf: options == null ? void 0 : options.vIf,
+    attrs: {
+      disabled: options == null ? void 0 : options.disabled
+    }
+  };
+}
+function numField$1(id, label, options) {
+  return {
+    $el: "number",
+    class: options == null ? void 0 : options.class,
+    required: options == null ? void 0 : options.required,
+    defaultValue: options == null ? void 0 : options.defaultValue,
+    id,
+    label,
+    disabled: options == null ? void 0 : options.disabled,
+    placeholder: options == null ? void 0 : options.placeholder,
+    helptext: options == null ? void 0 : options.helptext,
+    vIf: options == null ? void 0 : options.vIf,
+    attrs: {
+      step: options == null ? void 0 : options.step,
+      min: options == null ? void 0 : options.min,
+      max: options == null ? void 0 : options.max,
+      layout: options == null ? void 0 : options.layout,
+      padZero: options == null ? void 0 : options.padZero,
+      center: options == null ? void 0 : options.center
+    }
+  };
+}
+function frmRow$1(...children2) {
+  return {
+    $el: "div",
+    class: "flex gap-1 m_block align-items-end",
+    children: children2
+  };
+}
+function uploadField(id, label, options) {
+  return {
+    $el: "upload",
+    id,
+    label,
+    vIf: options == null ? void 0 : options.vIf,
+    attrs: {
+      ...options
+    }
+  };
+}
+function bglForm(idOrField, ...schema) {
+  if (typeof idOrField === "string") {
+    return {
+      $el: "bagelform",
+      id: idOrField,
+      attrs: {
+        schema: [idOrField, ...schema]
+      }
+    };
+  }
+  return {
+    $el: "bagelform",
+    attrs: {
+      schema: [idOrField, ...schema]
+    }
+  };
+}
+function telField(id, label, options) {
+  return {
+    $el: vue.markRaw(TelInput),
+    id,
+    label,
+    vIf: options == null ? void 0 : options.vIf,
+    attrs: options
+  };
+}
+function findBglFieldById(id, _schema) {
+  for (const field of _schema) {
+    if (field.id === id) return field;
+    if (field.children && Number(field.children.length) > 0) {
+      const fieldChildren = field.children.filter((c2) => typeof c2 === "object" && "$el" in c2);
+      const child = findBglFieldById(id, fieldChildren);
+      if (child) return child;
+    }
+  }
+  return void 0;
+}
+function arrField(id, label, schema, options) {
+  return {
+    label,
+    id,
+    $el: "array",
+    vIf: options == null ? void 0 : options.vIf,
+    attrs: { schema, delete: true, add: true, ...options }
+  };
+}
+const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  arrField,
+  bglForm,
+  checkField,
+  dateField,
+  findBglFieldById,
+  frmRow: frmRow$1,
+  getBaseField,
+  numField: numField$1,
+  richText,
+  selectField,
+  slctField,
+  telField,
+  txtField,
+  uploadField
+}, Symbol.toStringTag, { value: "Module" }));
+const state$1 = vue.reactive({
+  defaultLang: "",
+  availableLangs: [],
+  lang: "en"
+});
+function $tdb(langEl) {
+  if (!langEl) {
+    console.warn("No language element provided for $tdb function");
+    return "";
+  }
+  return langEl[state$1.lang] || langEl[state$1.defaultLang] || "";
+}
+function useLang() {
+  const lang = vue.computed({
+    get: () => state$1.lang,
+    set: (val) => state$1.lang = val
+  });
+  const availableLangs = vue.computed({
+    get: () => state$1.availableLangs,
+    set: (val) => state$1.availableLangs = val
+  });
+  const defaultLang = vue.computed({
+    get: () => state$1.defaultLang,
+    set: (val) => state$1.defaultLang = val
+  });
+  return {
+    lang,
+    $tdb,
+    availableLangs,
+    defaultLang
+  };
+}
+function formatString(str, format2) {
+  if (format2 === "titleCase") {
+    return str.split("_").map((word) => word[0].toUpperCase() + word.slice(1).toLocaleLowerCase()).join(" ");
+  }
+  if (format2 === "pascal") {
+    return str.split("_").map((word) => word[0].toUpperCase() + word.slice(1).toLocaleLowerCase()).join("");
+  }
+  if (format2 === "camel") {
+    return str.split("_").map((word, index2) => index2 === 0 ? word : word[0].toUpperCase() + word.slice(1)).join("");
+  }
+  if (format2 === "snake") {
+    return [...str].map((letter) => {
+      if (letter === letter.toUpperCase()) {
+        return `_${letter.toLowerCase()}`;
+      }
+      return letter;
+    }).join("");
+  }
+  return str;
+}
+const debouncers = /* @__PURE__ */ new Map();
+function debounce(fn2, wait = 500) {
+  clearTimeout(debouncers.get(fn2));
+  const timeout = setTimeout(() => {
+    fn2();
+    debouncers.delete(fn2);
+  }, wait);
+  debouncers.set(fn2, timeout);
+}
+function slugify(str) {
+  return str.toLowerCase().replace(/[^a-z0-9-\s]/g, "").split(/[\s-]+/).join("-");
+}
+function keyToLabel(key) {
+  if (key === void 0) return key;
+  return key.split("_").map((k2) => k2.charAt(0).toUpperCase() + k2.slice(1)).join(" ") || key;
+}
+async function copyText(text, cb) {
+  await navigator.clipboard.writeText(text);
+  if (cb) cb("Copied to clipboard");
+}
+function initials(...strArr) {
+  strArr = strArr.flatMap((str) => str.split(/\s/));
+  return strArr.map((str) => str.charAt(0)).join("");
+}
+function useEscape(event, closeModel) {
+  if (event.key === "Escape") {
+    closeModel();
+  }
+}
+function classify(fieldVal, row, ...classes) {
+  return classes.map((cls) => {
+    if (typeof cls === "function") return cls(fieldVal, row);
+    return cls;
+  }).join(" ");
+}
+function bindAttrs(attrs, fieldVal, row) {
+  if (!attrs) return {};
+  const exclude = ["class"];
+  const arr = Object.entries(attrs).filter(([key]) => !exclude.includes(key)).map(([key, value]) => [
+    key,
+    typeof value === "function" ? value(fieldVal, row) : value
+  ]);
+  const resolvedAttrs = Object.fromEntries(arr);
+  return resolvedAttrs;
+}
+function iffer(field, itemData) {
+  var _a2;
+  if (field["v-if"] === void 0) return true;
+  if (typeof field["v-if"] === "boolean") return field["v-if"];
+  if (typeof field["v-if"] === "string") return true;
+  if (typeof field["v-if"] === "function")
+    return (_a2 = field["v-if"]) == null ? void 0 : _a2.call(field, itemData == null ? void 0 : itemData[field.id], itemData);
+  return true;
+}
+function denullify(itemData, fieldID) {
+  if (!fieldID) return;
+  return itemData ? itemData[fieldID] : void 0;
+}
+const isDate$2 = (dateToTest) => !Number.isNaN(Date.parse(dateToTest));
+function getFallbackSchema(data2, showFields) {
+  const keys4 = Array.from(new Set((data2 ?? []).flatMap(Object.keys)));
+  const schema = keys4.map((id) => ({
+    id,
+    label: keyToLabel(id),
+    transform: (val) => {
+      const dateFields = ["created_at", "updated_at"];
+      if (dateFields.includes(id)) return val ? new Date(val).toLocaleString() : val;
+      return val;
+    }
+  }));
+  return showFields ? schema.filter((f2) => showFields.includes(f2.id) || !f2.id) : schema;
+}
+function sleep(ms = 100) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function appendScript(src, options) {
+  return new Promise((resolve, reject3) => {
+    if (options == null ? void 0 : options.id) {
+      if (document.getElementById(options.id)) {
+        resolve();
+        return;
+      }
+    } else if (document.querySelector(`script[src="${src}"]`)) {
+      resolve();
+      return;
+    }
+    const script2 = document.createElement("script");
+    script2.src = src;
+    if (options == null ? void 0 : options.id) {
+      script2.id = options.id;
+    }
+    script2.onload = () => {
+      resolve();
+    };
+    script2.onerror = reject3;
+    document.head.append(script2);
+  });
+}
+function appendStyle(src) {
+  return new Promise((resolve, reject3) => {
+    if (document.querySelector(`link[href="${src}"]`)) {
+      resolve();
+      return;
+    }
+    const link = document.createElement("link");
+    link.href = src;
+    link.rel = "stylesheet";
+    link.onload = () => {
+      resolve();
+    };
+    link.onerror = reject3;
+    document.head.append(link);
+  });
+}
+function normalizeURL(url) {
+  if (url.startsWith("https://")) return url;
+  url = url.replace(/http:\/\//, "");
+  return `https://${url}`;
+}
+function normalizeDimension(value, defaultMetric = "px") {
+  if (typeof value === "number") return `${value}${defaultMetric}`;
+  return value;
+}
+const fileBaseUrl = "https://files.bagel.design".replace(/\/$/, "");
+const bagelBaseUrl = void 0;
+function pathKeyToURL(pathKey) {
+  const urlRE = /^https?:\/\/|^\/\//;
+  if (!pathKey || urlRE.test(pathKey)) return pathKey;
+  if (pathKey.startsWith("static/")) {
+    return `${bagelBaseUrl}/${pathKey}`;
+  }
+  return `${fileBaseUrl}/${pathKey}`;
+}
+function getNestedValue(obj, path, defaultValue = void 0) {
+  if (!path) return obj;
+  const keys4 = path.split(/[.[]/);
+  let current = obj;
+  for (const key of keys4) {
+    if (!current || typeof current !== "object" || !(key in current)) {
+      return defaultValue;
+    }
+    current = current[key];
+  }
+  return current ?? defaultValue;
+}
 const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
   __name: "BagelForm",
   props: {
@@ -14965,15 +15308,6 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
         return false;
       }
     });
-    function getNestedValue(obj, path) {
-      const keys4 = path.split(".");
-      let current = obj;
-      for (const key of keys4) {
-        if (current === void 0 || current === null) return void 0;
-        current = current[key];
-      }
-      return current;
-    }
     function updateFormData(fieldId, value) {
       const keys4 = fieldId.split(".");
       const newData = safeClone2(formData.value);
@@ -15013,7 +15347,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
         return {
           ...formData.value,
           // Add a special getter to handle nested paths
-          get: (path) => getNestedValue(formData.value, path)
+          get: (path) => getNestedValue(formData.value, path, "")
         };
       },
       onUpdate: (field, value) => {
@@ -15441,33 +15775,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__ */ vue.defineComponent({
   __name: "DateInput",
   props: {
@@ -15481,7 +15813,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.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 }
   },
@@ -15489,235 +15821,392 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
-    let isOpen = vue.ref(false);
-    let currentMonth = vue.ref(/* @__PURE__ */ new Date());
-    let currentView = vue.ref("days");
+    const isOpen = vue.ref(false);
+    const currentMonth = vue.ref(/* @__PURE__ */ new Date());
+    const currentView = vue.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 = vue.computed(() => formatDisplayDate(props2.modelValue));
-    const formattedMin = vue.computed(() => formatDate(props2.min));
-    const formattedMax = vue.computed(() => formatDate(props2.max));
-    const selectedDate = vue.computed(() => {
-      if (!props2.modelValue) return null;
-      return typeof props2.modelValue === "string" ? new Date(props2.modelValue) : props2.modelValue;
-    });
-    const currentMonthDays = vue.computed(() => {
-      const year = currentMonth.value.getFullYear();
-      const month = currentMonth.value.getMonth();
-      return time.getCalendarMonthSplitInWeeks(year, month).flat();
-    });
-    const currentMonthValue = vue.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 = vue.computed(() => Array.from({ length: 12 }, (_2, i2) => {
-      const date2 = new Date(currentMonthValue.value.year, i2, 1);
+    function useDateState() {
+      const { formatDisplayDate, formatDate } = useFormatting();
+      const formattedDisplayValue2 = vue.computed(() => formatDisplayDate(props2.modelValue));
+      const formattedMin2 = vue.computed(() => formatDate(props2.min));
+      const formattedMax2 = vue.computed(() => formatDate(props2.max));
+      const selectedDate2 = vue.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 = vue.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 = vue.computed(() => {
+        const year = currentMonth.value.getFullYear();
+        const month = currentMonth.value.getMonth();
+        return time.getCalendarMonthSplitInWeeks(year, month).flat();
+      });
+      const currentMonthValue2 = vue.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 = vue.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 = vue.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 = vue.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 = vue.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 = vue.computed(() => {
+        var _a2;
+        return ((_a2 = selectedDate.value) == null ? void 0 : _a2.getHours()) ?? 0;
+      });
+      const minutes2 = vue.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 = vue.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 = vue.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 = vue.computed(() => {
-      var _a2;
-      return ((_a2 = selectedDate.value) == null ? void 0 : _a2.getHours()) ?? 0;
-    });
-    const minutes = vue.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 = vue.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 = vue.ref(null);
+    const calendarRef = vue.ref(null);
+    vue.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);
+      vue.onBeforeUnmount(() => {
+        document.removeEventListener("click", handleDocumentClick);
+      });
     });
-    function isNotInMonth(date2) {
-      return time.isTrailingOrLeadingDate(date2, currentMonth.value.getMonth());
-    }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
-        title: _ctx.label
+        title: _ctx.label,
+        onFocusin: _cache[6] || (_cache[6] = //@ts-ignore
+        (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args))
       }, [
         _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$t, [
           vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
           _ctx.required ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$o, "*")) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true),
         vue.createVNode(vue.unref(_sfc_main$V), {
-          shown: vue.unref(isOpen),
+          shown: isOpen.value,
           placement: "bottom-start",
-          onApplyShow: _cache[4] || (_cache[4] = ($event) => vue.isRef(isOpen) ? isOpen.value = true : isOpen = true),
-          onApplyHide: _cache[5] || (_cache[5] = ($event) => vue.isRef(isOpen) ? isOpen.value = false : isOpen = false)
+          autoHide: false,
+          triggers: ["click"]
         }, {
           trigger: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_4$g, [
+            vue.createElementVNode("div", {
+              ref_key: "datePickerRef",
+              ref: datePickerRef,
+              class: "date-picker-container",
+              onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+              }, ["stop"])),
+              onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+              }, ["stop"]))
+            }, [
               vue.createVNode(vue.unref(TextInput), {
-                modelValue: formattedDisplayValue.value,
+                modelValue: vue.unref(formattedDisplayValue),
                 icon: "calendar",
-                min: formattedMin.value,
-                max: formattedMax.value,
+                min: vue.unref(formattedMin),
+                max: vue.unref(formattedMax),
                 required: _ctx.required,
                 disabled: !_ctx.editMode,
                 class: vue.normalizeClass(["date-input", {
                   "txt-center": _ctx.center
                 }]),
-                readonly: "",
-                onClick: _cache[0] || (_cache[0] = ($event) => vue.isRef(isOpen) ? isOpen.value = true : isOpen = true)
-              }, null, 8, ["modelValue", "min", "max", "required", "disabled", "class"])
-            ])
+                readonly: false,
+                onInput: vue.unref(handleInput),
+                onFocus: vue.unref(handleFocus),
+                onClick: vue.unref(handleClick),
+                onKeydown: vue.unref(handleKeydown)
+              }, null, 8, ["modelValue", "min", "max", "required", "disabled", "class", "onInput", "onFocus", "onClick", "onKeydown"])
+            ], 544)
           ]),
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_5$f, [
-              vue.createElementVNode("div", _hoisted_6$c, [
-                vue.createElementVNode("div", _hoisted_7$9, [
-                  vue.unref(currentView) === "days" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            vue.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] = vue.withModifiers(() => {
+              }, ["stop"]))
+            }, [
+              vue.createElementVNode("div", _hoisted_4$g, [
+                vue.createElementVNode("div", _hoisted_5$f, [
+                  currentView.value === "days" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                     vue.createVNode(vue.unref(Btn), {
                       flat: "",
                       icon: "chevron_left",
-                      onClick: previousMonth
-                    }),
-                    vue.createElementVNode("div", _hoisted_8$6, [
+                      onClick: vue.unref(previousMonth)
+                    }, null, 8, ["onClick"]),
+                    vue.createElementVNode("div", _hoisted_6$c, [
                       vue.createVNode(vue.unref(Btn), {
                         flat: "",
                         class: "month-btn",
-                        onClick: _cache[1] || (_cache[1] = ($event) => vue.isRef(currentView) ? currentView.value = "months" : currentView = "months")
+                        onClick: _cache[2] || (_cache[2] = ($event) => currentView.value = "months")
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createTextVNode(vue.toDisplayString(currentMonthValue.value.formatted.month), 1)
+                          vue.createTextVNode(vue.toDisplayString(vue.unref(currentMonthValue).formatted.month), 1)
                         ]),
                         _: 1
                       }),
                       vue.createVNode(vue.unref(Btn), {
                         flat: "",
                         class: "year-btn",
-                        onClick: _cache[2] || (_cache[2] = ($event) => vue.isRef(currentView) ? currentView.value = "years" : currentView = "years")
+                        onClick: _cache[3] || (_cache[3] = ($event) => currentView.value = "years")
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createTextVNode(vue.toDisplayString(currentMonthValue.value.formatted.year), 1)
+                          vue.createTextVNode(vue.toDisplayString(vue.unref(currentMonthValue).formatted.year), 1)
                         ]),
                         _: 1
                       })
@@ -15725,114 +16214,114 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
                     vue.createVNode(vue.unref(Btn), {
                       flat: "",
                       icon: "chevron_right",
-                      onClick: nextMonth
-                    })
+                      onClick: vue.unref(nextMonth)
+                    }, null, 8, ["onClick"])
                   ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                     vue.createVNode(vue.unref(Btn), {
                       flat: "",
                       icon: "chevron_left",
-                      onClick: previousYear
-                    }),
-                    vue.createElementVNode("span", _hoisted_9$5, vue.toDisplayString(currentMonthValue.value.formatted.year), 1),
+                      onClick: vue.unref(previousYear)
+                    }, null, 8, ["onClick"]),
+                    vue.createElementVNode("span", _hoisted_7$9, vue.toDisplayString(vue.unref(currentMonthValue).formatted.year), 1),
                     vue.createVNode(vue.unref(Btn), {
                       flat: "",
                       icon: "chevron_right",
-                      onClick: nextYear
-                    })
+                      onClick: vue.unref(nextYear)
+                    }, null, 8, ["onClick"])
                   ], 64))
                 ]),
-                vue.unref(currentView) === "days" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$5, [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(weekDays.value, (day) => {
+                currentView.value === "days" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$6, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(weekDays), (day) => {
                     return vue.openBlock(), vue.createElementBlock("div", {
                       key: day,
                       class: "txt-center txt-12 opacity-6"
                     }, vue.toDisplayString(day), 1);
                   }), 128)),
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(currentMonthDays.value, (date2) => {
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(currentMonthDays), (date2) => {
                     return vue.openBlock(), vue.createElementBlock("button", {
                       key: date2 == null ? void 0 : date2.toISOString(),
                       type: "button",
                       class: vue.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": vue.unref(isSelected)(date2),
+                        "today": vue.unref(isToday)(date2),
+                        "disabled": vue.unref(isDateDisabled)(date2),
+                        "not-in-month": vue.unref(isNotInMonth)(date2)
                       }]),
-                      disabled: isDateDisabled(date2),
+                      disabled: vue.unref(isDateDisabled)(date2),
                       onClick: ($event) => selectDate(date2)
-                    }, vue.toDisplayString(date2 == null ? void 0 : date2.getDate()), 11, _hoisted_11$5);
+                    }, vue.toDisplayString(date2 == null ? void 0 : date2.getDate()), 11, _hoisted_9$5);
                   }), 128))
-                ])) : vue.unref(currentView) === "months" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$5, [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(months.value, (month) => {
+                ])) : currentView.value === "months" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$5, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(months), (month) => {
                     return vue.openBlock(), vue.createElementBlock("button", {
                       key: month.value,
                       class: vue.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 === vue.unref(currentMonthValue).month,
                         disabled: month.disabled
                       }]),
                       disabled: month.disabled,
-                      onClick: ($event) => selectMonth(month.value)
-                    }, vue.toDisplayString(month.name), 11, _hoisted_13$4);
+                      onClick: ($event) => vue.unref(selectMonth)(month.value)
+                    }, vue.toDisplayString(month.name), 11, _hoisted_11$5);
                   }), 128))
-                ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$4, [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(years.value, (year) => {
+                ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$5, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(years), (year) => {
                     return vue.openBlock(), vue.createElementBlock("button", {
                       key: year.value,
                       class: vue.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 === vue.unref(currentMonthValue).year,
                         disabled: year.disabled
                       }]),
                       disabled: year.disabled,
-                      onClick: ($event) => selectYear(year.value)
-                    }, vue.toDisplayString(year.value), 11, _hoisted_15$4);
+                      onClick: ($event) => vue.unref(selectYear)(year.value)
+                    }, vue.toDisplayString(year.value), 11, _hoisted_13$4);
                   }), 128))
                 ]))
               ]),
-              _ctx.enableTime && vue.unref(currentView) === "days" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$4, [
-                vue.createElementVNode("div", _hoisted_17$4, [
+              _ctx.enableTime && currentView.value === "days" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$4, [
+                vue.createElementVNode("div", _hoisted_15$4, [
                   vue.createVNode(vue.unref(NumberInput), {
                     center: "",
-                    "model-value": hours.value,
-                    disabled: !selectedDate.value,
+                    "model-value": vue.unref(hours),
+                    disabled: !vue.unref(selectedDate),
                     min: 0,
                     max: 23,
                     layout: "vertical",
                     padZero: 2,
-                    "onUpdate:modelValue": handleHourInput
-                  }, null, 8, ["model-value", "disabled"]),
-                  _cache[6] || (_cache[6] = vue.createElementVNode("p", { class: "pb-075" }, " : ", -1)),
+                    "onUpdate:modelValue": vue.unref(handleHourInput)
+                  }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"]),
+                  _cache[7] || (_cache[7] = vue.createElementVNode("p", { class: "pb-075" }, " : ", -1)),
                   vue.createVNode(vue.unref(NumberInput), {
                     center: "",
-                    "model-value": minutes.value,
-                    disabled: !selectedDate.value,
+                    "model-value": vue.unref(minutes),
+                    disabled: !vue.unref(selectedDate),
                     min: 0,
                     max: 59,
                     padZero: 2,
                     layout: "vertical",
-                    "onUpdate:modelValue": handleMinuteInput
-                  }, null, 8, ["model-value", "disabled"])
+                    "onUpdate:modelValue": vue.unref(handleMinuteInput)
+                  }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"])
                 ]),
-                vue.createElementVNode("span", _hoisted_18$2, vue.toDisplayString(timezoneDisplay.value), 1),
-                selectedDate.value ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
+                vue.createElementVNode("span", _hoisted_16$4, vue.toDisplayString(vue.unref(timezoneDisplay)), 1),
+                vue.unref(selectedDate) ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
                   key: 0,
                   flat: "",
-                  onClick: _cache[3] || (_cache[3] = ($event) => vue.isRef(isOpen) ? isOpen.value = false : isOpen = false)
+                  onClick: _cache[4] || (_cache[4] = ($event) => isOpen.value = false)
                 }, {
-                  default: vue.withCtx(() => _cache[7] || (_cache[7] = [
+                  default: vue.withCtx(() => _cache[8] || (_cache[8] = [
                     vue.createTextVNode(" Done ")
                   ])),
                   _: 1
                 })) : vue.createCommentVNode("", true)
               ])) : vue.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 = {
@@ -16399,11 +16888,11 @@ function compareAsc(dateLeft, dateRight) {
     return diff;
   }
 }
-function isDate$2(value) {
+function isDate$1(value) {
   return value instanceof Date || typeof value === "object" && Object.prototype.toString.call(value) === "[object Date]";
 }
 function isValid(date2) {
-  if (!isDate$2(date2) && typeof date2 !== "number") {
+  if (!isDate$1(date2) && typeof date2 !== "number") {
     return false;
   }
   const _date = toDate(date2);
@@ -20085,7 +20574,7 @@ const bl = (e, t) => e == null ? void 0 : e.querySelector(`[data-dp-element="${t
     return l2 && e.preventDefault(), t();
 }, on$1 = (e, t, l2, a2, n2, c2) => {
   const v2 = parse$1(e, t.slice(0, e.length), /* @__PURE__ */ new Date(), { locale: c2 });
-  return isValid(v2) && isDate$2(v2) ? a2 || n2 ? v2 : set(v2, {
+  return isValid(v2) && isDate$1(v2) ? a2 || n2 ? v2 : set(v2, {
     hours: +l2.hours,
     minutes: +(l2 == null ? void 0 : l2.minutes),
     seconds: +(l2 == null ? void 0 : l2.seconds),
@@ -25659,7 +26148,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
   __name: "PasswordInput",
@@ -26074,53 +26563,27 @@ const _sfc_main$C = /* @__PURE__ */ vue.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 = [
@@ -26138,7 +26601,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" },
@@ -26228,7 +26691,7 @@ const _hoisted_1$t = {
 const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
   __name: "EditorToolbar",
   props: {
-    config: { default: defaultToolbarConfig },
+    config: { default: basicToolbarConfig },
     selectedStyles: {}
   },
   emits: ["action"],
@@ -26283,45 +26746,50 @@ const _sfc_main$A = /* @__PURE__ */ vue.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;
@@ -26525,7 +26993,7 @@ function formatting(state2) {
   };
   return { text, block, list, clear };
 }
-const { frmRow: frmRow$1, numField: numField$1 } = bagelFormUtils;
+const { frmRow, numField } = bagelFormUtils;
 function insertImage(modal, state2) {
   const { range: range2, doc } = state2;
   if (!range2 || !doc) return;
@@ -26534,9 +27002,9 @@ function insertImage(modal, state2) {
     schema: [
       { id: "src", $el: "file", attrs: { bindkey: "url" } },
       { id: "alt", $el: "text", label: "Alt Text" },
-      frmRow$1(
-        numField$1("width", "Width", { min: 1 }),
-        numField$1("height", "Height", { min: 1 })
+      frmRow(
+        numField("width", "Width", { min: 1 }),
+        numField("height", "Height", { min: 1 })
       ),
       { id: "figcaption", $el: "check", label: "Show Caption" }
     ],
@@ -26581,6 +27049,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");
@@ -26702,145 +27216,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 = vue.ref();
   const modal = useModal();
+  let cleanupListeners = null;
   const state2 = vue.reactive({
     content: "",
     doc: void 0,
@@ -26854,95 +27616,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) {
@@ -26957,12 +27766,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);
           }
@@ -26972,237 +27779,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 = {
@@ -27223,58 +28076,104 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     const emit2 = __emit;
     const iframe = vue.ref();
     const editor = useEditor();
-    const commands = useCommands(editor.state, props2.debug ? editor.debug : void 0);
-    const debugMethods = vue.computed(() => props2.debug ? editor.debug : void 0);
+    const isInitializing = vue.ref(false);
+    const hasInitialized = vue.ref(false);
+    if (props2.debug) {
+      editor.initDebugger();
+    }
+    const commands = useCommands(editor.state, editor.state.debug);
+    const debugMethods = vue.computed(() => editor.state.debug);
     const hasRTL = vue.computed(() => /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(props2.modelValue));
+    vue.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 Promise.resolve().then(() => require("./editor-B3mMCQSg.cjs"))).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 Promise.resolve().then(() => require("./editor-CpMNx6Eo.cjs"));
+        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();
     }
-    vue.watch(() => props2.modelValue, (newValue) => {
+    vue.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");
+        }
       }
     });
     vue.watch(() => editor.state.content, (newValue) => {
@@ -27307,6 +28206,8 @@ const _sfc_main$z = /* @__PURE__ */ vue.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)
             ]),
@@ -27315,7 +28216,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
               modelValue: vue.unref(editor).state.content,
               "onUpdate:modelValue": [
                 _cache[0] || (_cache[0] = ($event) => vue.unref(editor).state.content = $event),
-                _cache[1] || (_cache[1] = ($event) => vue.unref(editor).updateContent("html"))
+                _cache[1] || (_cache[1] = ($event) => vue.unref(editor).updateState.content("html"))
               ],
               language: "html"
             }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true)
@@ -27364,7 +28265,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.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 };
@@ -31118,7 +32019,7 @@ const isPlainObject = (val) => {
   const prototype2 = getPrototypeOf(val);
   return (prototype2 === null || prototype2 === Object.prototype || Object.getPrototypeOf(prototype2) === null) && !(Symbol.toStringTag in val) && !(Symbol.iterator in val);
 };
-const isDate$1 = kindOfTest("Date");
+const isDate = kindOfTest("Date");
 const isFile = kindOfTest("File");
 const isBlob = kindOfTest("Blob");
 const isFileList = kindOfTest("FileList");
@@ -31413,7 +32314,7 @@ const utils$1 = {
   isResponse,
   isHeaders,
   isUndefined,
-  isDate: isDate$1,
+  isDate,
   isFile,
   isBlob,
   isRegExp,
@@ -41387,15 +42288,15 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-915732c1"]]);
-const state$1 = vue.reactive(/* @__PURE__ */ new Map());
+const state = vue.reactive(/* @__PURE__ */ new Map());
 function useTabs(group) {
-  if (!state$1.has(group)) {
-    state$1.set(group, vue.reactive({ currentTab: void 0 }));
+  if (!state.has(group)) {
+    state.set(group, vue.reactive({ currentTab: void 0 }));
   }
   const currentTab = vue.computed({
-    get: () => state$1.get(group).currentTab,
+    get: () => state.get(group).currentTab,
     set: (val) => {
-      state$1.get(group).currentTab = val;
+      state.get(group).currentTab = val;
     }
   });
   return { currentTab };
@@ -43571,19 +44472,7 @@ function safeClone(obj) {
 function provideBagelFormState(initialData) {
   const data2 = vue.ref(initialData);
   const isDirty = vue.ref(false);
-  const getFieldData = (path) => {
-    if (!path) return "";
-    const keys4 = path.split(/[.[]/);
-    let current = data2.value;
-    for (let i2 = 0; i2 < keys4.length; i2++) {
-      const key = keys4[i2];
-      if (!current || typeof current !== "object" || !(key in current)) {
-        return "";
-      }
-      current = current[key];
-    }
-    return current ?? "";
-  };
+  const getFieldData = (path) => getNestedValue(data2.value, path, "");
   const updateField = (path, value) => {
     const keys4 = path.split(/[.[]/);
     if (typeof data2.value !== "object" || data2.value === null) {
@@ -44397,356 +45286,6 @@ const ripple = {
     }
   }
 };
-function getBaseField(id, labelOrRest = {}, rest = {}) {
-  if (typeof labelOrRest === "object") return { id, ...labelOrRest };
-  return { id, label: labelOrRest, ...rest };
-}
-function richText(id, label, options) {
-  return {
-    $el: "richtext",
-    class: options == null ? void 0 : options.class,
-    required: options == null ? void 0 : options.required,
-    id,
-    label,
-    vIf: options == null ? void 0 : options.vIf,
-    placeholder: options == null ? void 0 : options.placeholder,
-    attrs: {}
-  };
-}
-function txtField(id, label, options) {
-  return {
-    $el: "text",
-    class: options == null ? void 0 : options.class,
-    required: options == null ? void 0 : options.required,
-    id,
-    label,
-    vIf: options == null ? void 0 : options.vIf,
-    disabled: options == null ? void 0 : options.disabled,
-    placeholder: options == null ? void 0 : options.placeholder,
-    defaultValue: options == null ? void 0 : options.defaultValue,
-    attrs: {
-      type: options == null ? void 0 : options.type,
-      pattern: options == null ? void 0 : options.pattern,
-      multiline: options == null ? void 0 : options.multiline
-    }
-  };
-}
-function selectField(id, label, options, config) {
-  return {
-    $el: "select",
-    id,
-    options,
-    class: config == null ? void 0 : config.class,
-    placeholder: config == null ? void 0 : config.placeholder,
-    required: config == null ? void 0 : config.required,
-    label,
-    defaultValue: config == null ? void 0 : config.defaultValue,
-    vIf: config == null ? void 0 : config.vIf,
-    attrs: {
-      disabled: config == null ? void 0 : config.disabled,
-      searchable: config == null ? void 0 : config.searchable,
-      multiselect: config == null ? void 0 : config.multiselect,
-      onSearch: config == null ? void 0 : config.onSearch,
-      clearable: config == null ? void 0 : config.clearable
-    }
-  };
-}
-const slctField = selectField;
-function checkField(id, label, options) {
-  return {
-    $el: "check",
-    class: options == null ? void 0 : options.class,
-    required: options == null ? void 0 : options.required,
-    id,
-    label
-  };
-}
-function dateField(id, label, options) {
-  return {
-    $el: "date",
-    class: options == null ? void 0 : options.class,
-    required: options == null ? void 0 : options.required,
-    id,
-    disabled: options == null ? void 0 : options.disabled,
-    label,
-    defaultValue: options == null ? void 0 : options.defaultValue,
-    vIf: options == null ? void 0 : options.vIf,
-    attrs: {
-      disabled: options == null ? void 0 : options.disabled
-    }
-  };
-}
-function numField(id, label, options) {
-  return {
-    $el: "number",
-    class: options == null ? void 0 : options.class,
-    required: options == null ? void 0 : options.required,
-    defaultValue: options == null ? void 0 : options.defaultValue,
-    id,
-    label,
-    disabled: options == null ? void 0 : options.disabled,
-    placeholder: options == null ? void 0 : options.placeholder,
-    helptext: options == null ? void 0 : options.helptext,
-    vIf: options == null ? void 0 : options.vIf,
-    attrs: {
-      step: options == null ? void 0 : options.step,
-      min: options == null ? void 0 : options.min,
-      max: options == null ? void 0 : options.max,
-      layout: options == null ? void 0 : options.layout,
-      padZero: options == null ? void 0 : options.padZero,
-      center: options == null ? void 0 : options.center
-    }
-  };
-}
-function frmRow(...children2) {
-  return {
-    $el: "div",
-    class: "flex gap-1 m_block align-items-end",
-    children: children2
-  };
-}
-function uploadField(id, label, options) {
-  return {
-    $el: "upload",
-    id,
-    label,
-    vIf: options == null ? void 0 : options.vIf,
-    attrs: {
-      ...options
-    }
-  };
-}
-function bglForm(idOrField, ...schema) {
-  if (typeof idOrField === "string") {
-    return {
-      $el: "bagelform",
-      id: idOrField,
-      attrs: {
-        schema: [idOrField, ...schema]
-      }
-    };
-  }
-  return {
-    $el: "bagelform",
-    attrs: {
-      schema: [idOrField, ...schema]
-    }
-  };
-}
-function telField(id, label, options) {
-  return {
-    $el: vue.markRaw(TelInput),
-    id,
-    label,
-    vIf: options == null ? void 0 : options.vIf,
-    attrs: options
-  };
-}
-function findBglFieldById(id, _schema) {
-  for (const field of _schema) {
-    if (field.id === id) return field;
-    if (field.children && Number(field.children.length) > 0) {
-      const fieldChildren = field.children.filter((c2) => typeof c2 === "object" && "$el" in c2);
-      const child = findBglFieldById(id, fieldChildren);
-      if (child) return child;
-    }
-  }
-  return void 0;
-}
-function arrField(id, label, schema, options) {
-  return {
-    label,
-    id,
-    $el: "array",
-    vIf: options == null ? void 0 : options.vIf,
-    attrs: { schema, delete: true, add: true, ...options }
-  };
-}
-const state = vue.reactive({
-  defaultLang: "",
-  availableLangs: [],
-  lang: "en"
-});
-function $tdb(langEl) {
-  if (!langEl) {
-    console.warn("No language element provided for $tdb function");
-    return "";
-  }
-  return langEl[state.lang] || langEl[state.defaultLang] || "";
-}
-function useLang() {
-  const lang = vue.computed({
-    get: () => state.lang,
-    set: (val) => state.lang = val
-  });
-  const availableLangs = vue.computed({
-    get: () => state.availableLangs,
-    set: (val) => state.availableLangs = val
-  });
-  const defaultLang = vue.computed({
-    get: () => state.defaultLang,
-    set: (val) => state.defaultLang = val
-  });
-  return {
-    lang,
-    $tdb,
-    availableLangs,
-    defaultLang
-  };
-}
-function formatString(str, format2) {
-  if (format2 === "titleCase") {
-    return str.split("_").map((word) => word[0].toUpperCase() + word.slice(1).toLocaleLowerCase()).join(" ");
-  }
-  if (format2 === "pascal") {
-    return str.split("_").map((word) => word[0].toUpperCase() + word.slice(1).toLocaleLowerCase()).join("");
-  }
-  if (format2 === "camel") {
-    return str.split("_").map((word, index2) => index2 === 0 ? word : word[0].toUpperCase() + word.slice(1)).join("");
-  }
-  if (format2 === "snake") {
-    return [...str].map((letter) => {
-      if (letter === letter.toUpperCase()) {
-        return `_${letter.toLowerCase()}`;
-      }
-      return letter;
-    }).join("");
-  }
-  return str;
-}
-const debouncers = /* @__PURE__ */ new Map();
-function debounce(fn2, wait = 500) {
-  clearTimeout(debouncers.get(fn2));
-  const timeout = setTimeout(() => {
-    fn2();
-    debouncers.delete(fn2);
-  }, wait);
-  debouncers.set(fn2, timeout);
-}
-function slugify(str) {
-  return str.toLowerCase().replace(/[^a-z0-9-\s]/g, "").split(/[\s-]+/).join("-");
-}
-function keyToLabel(key) {
-  if (key === void 0) return key;
-  return key.split("_").map((k2) => k2.charAt(0).toUpperCase() + k2.slice(1)).join(" ") || key;
-}
-async function copyText(text, cb) {
-  await navigator.clipboard.writeText(text);
-  if (cb) cb("Copied to clipboard");
-}
-function initials(...strArr) {
-  strArr = strArr.flatMap((str) => str.split(/\s/));
-  return strArr.map((str) => str.charAt(0)).join("");
-}
-function useEscape(event, closeModel) {
-  if (event.key === "Escape") {
-    closeModel();
-  }
-}
-function classify(fieldVal, row, ...classes) {
-  return classes.map((cls) => {
-    if (typeof cls === "function") return cls(fieldVal, row);
-    return cls;
-  }).join(" ");
-}
-function bindAttrs(attrs, fieldVal, row) {
-  if (!attrs) return {};
-  const exclude = ["class"];
-  const arr = Object.entries(attrs).filter(([key]) => !exclude.includes(key)).map(([key, value]) => [
-    key,
-    typeof value === "function" ? value(fieldVal, row) : value
-  ]);
-  const resolvedAttrs = Object.fromEntries(arr);
-  return resolvedAttrs;
-}
-function iffer(field, itemData) {
-  var _a2;
-  if (field["v-if"] === void 0) return true;
-  if (typeof field["v-if"] === "boolean") return field["v-if"];
-  if (typeof field["v-if"] === "string") return true;
-  if (typeof field["v-if"] === "function")
-    return (_a2 = field["v-if"]) == null ? void 0 : _a2.call(field, itemData == null ? void 0 : itemData[field.id], itemData);
-  return true;
-}
-function denullify(itemData, fieldID) {
-  if (!fieldID) return;
-  return itemData ? itemData[fieldID] : void 0;
-}
-const isDate = (dateToTest) => !Number.isNaN(Date.parse(dateToTest));
-function getFallbackSchema(data2, showFields) {
-  const keys4 = Array.from(new Set((data2 ?? []).flatMap(Object.keys)));
-  const schema = keys4.map((id) => ({
-    id,
-    label: keyToLabel(id),
-    transform: (val) => {
-      const dateFields = ["created_at", "updated_at"];
-      if (dateFields.includes(id)) return val ? new Date(val).toLocaleString() : val;
-      return val;
-    }
-  }));
-  return showFields ? schema.filter((f2) => showFields.includes(f2.id) || !f2.id) : schema;
-}
-function sleep(ms = 100) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-function appendScript(src, options) {
-  return new Promise((resolve, reject3) => {
-    if (options == null ? void 0 : options.id) {
-      if (document.getElementById(options.id)) {
-        resolve();
-        return;
-      }
-    } else if (document.querySelector(`script[src="${src}"]`)) {
-      resolve();
-      return;
-    }
-    const script2 = document.createElement("script");
-    script2.src = src;
-    if (options == null ? void 0 : options.id) {
-      script2.id = options.id;
-    }
-    script2.onload = () => {
-      resolve();
-    };
-    script2.onerror = reject3;
-    document.head.append(script2);
-  });
-}
-function appendStyle(src) {
-  return new Promise((resolve, reject3) => {
-    if (document.querySelector(`link[href="${src}"]`)) {
-      resolve();
-      return;
-    }
-    const link = document.createElement("link");
-    link.href = src;
-    link.rel = "stylesheet";
-    link.onload = () => {
-      resolve();
-    };
-    link.onerror = reject3;
-    document.head.append(link);
-  });
-}
-function normalizeURL(url) {
-  if (url.startsWith("https://")) return url;
-  url = url.replace(/http:\/\//, "");
-  return `https://${url}`;
-}
-function normalizeDimension(value, defaultMetric = "px") {
-  if (typeof value === "number") return `${value}${defaultMetric}`;
-  return value;
-}
-const fileBaseUrl = "https://files.bagel.design".replace(/\/$/, "");
-const bagelBaseUrl = void 0;
-function pathKeyToURL(pathKey) {
-  const urlRE = /^https?:\/\/|^\/\//;
-  if (!pathKey || urlRE.test(pathKey)) return pathKey;
-  if (pathKey.startsWith("static/")) {
-    return `${bagelBaseUrl}/${pathKey}`;
-  }
-  return `${fileBaseUrl}/${pathKey}`;
-}
 const clickOutside = {
   beforeMount(el, binding) {
     el.clickOutsideEvent = (event) => {
@@ -45364,10 +45903,11 @@ exports.debounce = debounce;
 exports.denullify = denullify;
 exports.formatString = formatString;
 exports.getFallbackSchema = getFallbackSchema;
+exports.getNestedValue = getNestedValue;
 exports.i18nTInjectionKey = i18nTInjectionKey;
 exports.iffer = iffer;
 exports.initials = initials;
-exports.isDate = isDate;
+exports.isDate = isDate$2;
 exports.keyToLabel = keyToLabel;
 exports.localRef = localRef;
 exports.normalizeDimension = normalizeDimension;