@vc-shell/framework 1.1.2 → 1.1.3

package/dist/assets/shared-components-CfAt2hC6.js

@@ -1,1501 +0,0 @@
-import { defineComponent, computed, createElementBlock, openBlock, createBlock, createVNode, normalizeStyle, unref, Transition, withCtx, withDirectives, createElementVNode, toDisplayString, vShow, Fragment, renderList, resolveDynamicComponent, mergeProps, createCommentVNode, withModifiers, ref, normalizeClass, renderSlot, resolveComponent, normalizeProps, createTextVNode, inject, onMounted, onUnmounted, watch, resolveDirective } from 'vue';
-import { l as useSettingsMenu, b as _sfc_main$b, j as useDashboard } from './ui-app-D31Pr1WY.js';
-import { e as useUser } from './ui-navigation-BtHa6ovW.js';
-import { u as useNotifications } from './core-composables-DYxpIWyY.js';
-import 'vee-validate';
-import './ui-indicators-mIQeEqha.js';
-import { _ as _sfc_main$a } from './ui-media-WWYrwmZw.js';
-import './ui-controls-nmDJYLmC.js';
-import { d as _sfc_main$d } from './ui-layout-v2XBQky3.js';
-import './ui-helpers-CF-EUlOg.js';
-import { i as _sfc_main$c } from './ui-content-B7SxH8y9.js';
-import './ui-form-Cs5ooOo7.js';
-import { u as useI18n, m as hooks } from './ui-form-fields-DFQi31jT.js';
-import { u as useMenuExpanded } from './shared-composables-v9NkNuAe.js';
-import './core-plugins-wv2bDZ0l.js';
-import 'vue-router';
-import './shared-modules-CDP-H5ZB.js';
-import { N as NotificationTemplatesSymbol } from './ui-data-Ci3b1ye0.js';
-import './ui-media-advanced-T8ibi153.js';
-import { m as useLocalStorage } from './vueuse-CTQm4Zh0.js';
-
-const _hoisted_1$4 = { class: "vc-user-info" };
-const _hoisted_2$2 = { class: "vc-user-info__info" };
-const _hoisted_3$2 = { class: "vc-user-info__name" };
-const _hoisted_4$2 = { class: "vc-user-info__role" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  __name: "user-info",
-  props: {
-    avatarUrl: {},
-    name: {},
-    role: {},
-    isExpanded: { type: Boolean }
-  },
-  setup(__props) {
-    const props = __props;
-    const { user } = useUser();
-    const imageHandler = computed(() => {
-      if (props.avatarUrl) {
-        return `background-image: url(${CSS.escape(props.avatarUrl)})`;
-      }
-      return void 0;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
-        _ctx.avatarUrl ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: "vc-user-info__avatar",
-          style: normalizeStyle(imageHandler.value)
-        }, null, 4)) : (openBlock(), createBlock(unref(_sfc_main$a), {
-          key: 1,
-          icon: "material-account_circle",
-          class: "vc-user-info__icon"
-        })),
-        createVNode(Transition, { name: "opacity" }, {
-          default: withCtx(() => [
-            withDirectives(createElementVNode("div", _hoisted_2$2, [
-              createElementVNode("div", _hoisted_3$2, toDisplayString(_ctx.name || unref(user) && "fullName" in unref(user) && unref(user).fullName || unref(user)?.userName), 1),
-              createElementVNode("div", _hoisted_4$2, toDisplayString(_ctx.role && _ctx.$t(`SHELL.USER.ROLE.${_ctx.role}`) || (unref(user)?.isAdministrator ? _ctx.$t("SHELL.USER.ROLE.ADMINISTRATOR") : "")), 1)
-            ], 512), [
-              [vShow, _ctx.isExpanded || _ctx.$isMobile.value]
-            ])
-          ]),
-          _: 1
-        })
-      ]);
-    };
-  }
-});
-
-const _hoisted_1$3 = { class: "vc-settings-menu" };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "settings-menu",
-  setup(__props) {
-    const settingsMenu = useSettingsMenu();
-    const { items } = settingsMenu;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (item) => {
-          return openBlock(), createBlock(resolveDynamicComponent(item.component), mergeProps({
-            key: item.id,
-            ref_for: true
-          }, item.props || {}), null, 16);
-        }), 128))
-      ]);
-    };
-  }
-});
-
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  __name: "user-sidebar",
-  props: {
-    isOpened: { type: Boolean }
-  },
-  emits: ["update:isOpened", "item:click"],
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$b), {
-        "is-expanded": _ctx.isOpened,
-        position: "left",
-        render: "always",
-        title: _ctx.$t("SHELL.ACCOUNT.SETTINGS"),
-        onClose: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:isOpened", false))
-      }, {
-        content: withCtx(() => [
-          _ctx.isOpened ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: "vc-user-sidebar__menu",
-            onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.$emit("update:isOpened", false), ["stop"]))
-          }, [
-            createVNode(unref(_sfc_main$8))
-          ])) : createCommentVNode("", true)
-        ]),
-        _: 1
-      }, 8, ["is-expanded", "title"]);
-    };
-  }
-});
-
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  __name: "user-dropdown-button",
-  props: {
-    avatarUrl: {},
-    name: {},
-    role: {},
-    disabled: { type: Boolean }
-  },
-  setup(__props) {
-    const { t } = useI18n({ useScope: "global" });
-    const isSidebarOpened = ref(false);
-    const { isExpanded, isHoverExpanded } = useMenuExpanded();
-    function handleMenuItemClick(item) {
-      item.clickHandler?.();
-    }
-    function handleClick() {
-      isSidebarOpened.value = !isSidebarOpened.value;
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        createElementVNode("button", {
-          type: "button",
-          class: normalizeClass(["vc-user-dropdown-button", {
-            "vc-user-dropdown-button--active": false,
-            "vc-user-dropdown-button--auto-width": _ctx.disabled,
-            "vc-user-dropdown-button--mobile": _ctx.$isMobile.value,
-            "vc-user-dropdown-button--collapsed": !unref(isExpanded) && _ctx.$isDesktop.value
-          }]),
-          onClick: handleClick
-        }, [
-          createElementVNode("div", {
-            class: normalizeClass(["vc-user-dropdown-button__wrap", {
-              "vc-user-dropdown-button__wrap--active": false
-            }])
-          }, [
-            createVNode(_sfc_main$9, {
-              "avatar-url": _ctx.avatarUrl,
-              name: _ctx.name,
-              role: _ctx.role,
-              "is-expanded": unref(isExpanded) || unref(isHoverExpanded)
-            }, null, 8, ["avatar-url", "name", "role", "is-expanded"]),
-            _cache[1] || (_cache[1] = createElementVNode("div", { class: "vc-user-dropdown-button__actions" }, [
-              createElementVNode("div", { class: "vc-user-dropdown-button__trigger" })
-            ], -1))
-          ])
-        ], 2),
-        createVNode(_sfc_main$7, {
-          "is-opened": isSidebarOpened.value,
-          "onUpdate:isOpened": _cache[0] || (_cache[0] = ($event) => isSidebarOpened.value = $event),
-          "onItem:click": handleMenuItemClick
-        }, null, 8, ["is-opened"])
-      ]);
-    };
-  }
-});
-
-const UserDropdownButton = _sfc_main$6;
-
-const _hoisted_1$2 = { class: "vc-notification-template" };
-const _hoisted_2$1 = { class: "vc-notification-template__content" };
-const _hoisted_3$1 = { class: "vc-notification-template__time" };
-const _hoisted_4$1 = {
-  key: 0,
-  class: "vc-notification-template__content-body"
-};
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  __name: "notification-template",
-  props: {
-    color: {},
-    icon: {},
-    title: {},
-    notification: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const locale = window.navigator.language;
-    const pushTime = computed(() => {
-      return hooks(props.notification.created).locale(locale).format("L LT");
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
-        createElementVNode("div", {
-          class: normalizeClass(["vc-notification-template__container", {
-            "vc-notification-template__container--mobile": _ctx.$isMobile.value
-          }])
-        }, [
-          createElementVNode("div", _hoisted_2$1, [
-            createElementVNode("p", {
-              class: normalizeClass(["vc-notification-template__title", { "vc-notification-template__title--desktop": _ctx.$isDesktop.value }])
-            }, toDisplayString(_ctx.title), 3),
-            createElementVNode("p", _hoisted_3$1, toDisplayString(pushTime.value), 1),
-            _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
-              renderSlot(_ctx.$slots, "default")
-            ])) : createCommentVNode("", true)
-          ])
-        ], 2)
-      ]);
-    };
-  }
-});
-
-const NotificationTemplate = _sfc_main$5;
-
-const _hoisted_1$1 = { class: "tw-flex tw-p-3 tw-w-full" };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "notification",
-  props: {
-    notification: {},
-    templates: {}
-  },
-  emits: ["onClick"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const currentTemplate = computed(() => props.templates?.find((x) => x?.notifyType === props.notification.notifyType));
-    const templateProps = computed(() => ({
-      notification: props.notification
-    }));
-    const handleClick = () => {
-      emit("onClick", props.notification);
-    };
-    const notificationStyle = computed(() => ({
-      color: "var(--notification-icon-color)",
-      icon: "material-exclamation"
-    }));
-    return (_ctx, _cache) => {
-      const _component_VcHint = resolveComponent("VcHint");
-      const _component_VcRow = resolveComponent("VcRow");
-      return openBlock(), createElementBlock("div", _hoisted_1$1, [
-        createVNode(_component_VcRow, { class: "tw-justify-between tw-grow tw-basis-0 !tw-flex" }, {
-          default: withCtx(() => [
-            createElementVNode("div", { onClick: handleClick }, [
-              currentTemplate.value ? (openBlock(), createBlock(resolveDynamicComponent(currentTemplate.value), normalizeProps(mergeProps({ key: 0 }, templateProps.value)), null, 16)) : (openBlock(), createBlock(unref(NotificationTemplate), {
-                key: 1,
-                color: notificationStyle.value.color,
-                title: _ctx.notification.title ?? "",
-                icon: notificationStyle.value.icon,
-                notification: _ctx.notification
-              }, {
-                default: withCtx(() => [
-                  _ctx.notification.description ? (openBlock(), createBlock(_component_VcHint, {
-                    key: 0,
-                    class: "tw-mb-1"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(_ctx.notification.description), 1)
-                    ]),
-                    _: 1
-                  })) : createCommentVNode("", true)
-                ]),
-                _: 1
-              }, 8, ["color", "title", "icon", "notification"]))
-            ])
-          ]),
-          _: 1
-        })
-      ]);
-    };
-  }
-});
-
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "notification-dropdown",
-  setup(__props) {
-    const notificationTemplates = inject(NotificationTemplatesSymbol);
-    const { t } = useI18n({ useScope: "global" });
-    const { notifications, markAllAsRead } = useNotifications();
-    const hasUnreadNotifications = computed(() => {
-      return notifications.value.some((item) => item.isNew);
-    });
-    function onOpen(state) {
-      if (state && notifications.value.some((x) => x.isNew)) {
-        markAllAsRead();
-      }
-    }
-    onMounted(() => {
-      onOpen(hasUnreadNotifications.value);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$c), {
-        items: unref(notifications),
-        "empty-text": unref(t)("COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY")
-      }, {
-        item: withCtx(({ item }) => [
-          createVNode(_sfc_main$4, {
-            notification: item,
-            templates: unref(notificationTemplates) || []
-          }, null, 8, ["notification", "templates"])
-        ]),
-        _: 1
-      }, 8, ["items", "empty-text"]);
-    };
-  }
-});
-
-const NotificationDropdown = _sfc_main$3;
-
-function useLayoutPersistence(storageKey, updateCallback) {
-  const savedLayout = useLocalStorage(storageKey, {});
-  const saveLayout = (layout) => {
-    try {
-      const layoutData = {};
-      layout.forEach((position, widgetId) => {
-        layoutData[widgetId] = position;
-      });
-      savedLayout.value = layoutData;
-    } catch (error) {
-      console.error("Failed to save dashboard layout to localStorage:", error);
-    }
-  };
-  const loadLayout = (widgets) => {
-    try {
-      if (!savedLayout.value || Object.keys(savedLayout.value).length === 0) {
-        return false;
-      }
-      Object.entries(savedLayout.value).forEach(([widgetId, position]) => {
-        const widget = widgets.find((w) => w.id === widgetId);
-        if (widget) {
-          updateCallback(widgetId, position);
-        }
-      });
-      return true;
-    } catch (error) {
-      console.error("Failed to load dashboard layout from localStorage:", error);
-      return false;
-    }
-  };
-  const clearSavedLayout = () => {
-    savedLayout.value = {};
-  };
-  const hasSavedLayout = () => {
-    return Object.keys(savedLayout.value).length > 0;
-  };
-  return {
-    saveLayout,
-    loadLayout,
-    clearSavedLayout,
-    hasSavedLayout
-  };
-}
-
-const GRID_COLUMNS = 12;
-const MIN_GRID_ROWS = 12;
-const ROWS_BUFFER = 10;
-function useGridSystem() {
-  const dynamicRows = ref(MIN_GRID_ROWS);
-  const updateGridRows = (widgets, layout) => {
-    if (widgets.length === 0) {
-      dynamicRows.value = MIN_GRID_ROWS;
-      return dynamicRows.value;
-    }
-    const maxY = Math.max(
-      ...Array.from(layout.values()).map((pos, index) => {
-        const widget = widgets.find((w) => w.id === Array.from(layout.keys())[index]);
-        return widget ? pos.y + widget.size.height : pos.y + 1;
-      }),
-      0
-    );
-    dynamicRows.value = Math.max(maxY + ROWS_BUFFER, MIN_GRID_ROWS);
-    return dynamicRows.value;
-  };
-  const hasCollision = (widget, position, widgets, layout, excludeWidgetId) => {
-    if (position.x < 0 || position.x + widget.size.width > GRID_COLUMNS || position.y < 0) {
-      return true;
-    }
-    const occupiedCells = /* @__PURE__ */ new Set();
-    widgets.forEach((other) => {
-      if (other.id === widget.id || excludeWidgetId && other.id === excludeWidgetId) {
-        return;
-      }
-      const otherPos = layout.get(other.id);
-      if (!otherPos) return;
-      for (let x = otherPos.x; x < otherPos.x + other.size.width; x++) {
-        for (let y = otherPos.y; y < otherPos.y + other.size.height; y++) {
-          occupiedCells.add(`${x},${y}`);
-        }
-      }
-    });
-    for (let x = position.x; x < position.x + widget.size.width; x++) {
-      for (let y = position.y; y < position.y + widget.size.height; y++) {
-        if (occupiedCells.has(`${x},${y}`)) {
-          return true;
-        }
-      }
-    }
-    return false;
-  };
-  const isAreaFree = (x, y, width, height, occupiedCells) => {
-    if (x < 0 || x + width > GRID_COLUMNS || y < 0) {
-      return false;
-    }
-    for (let ix = x; ix < x + width; ix++) {
-      for (let iy = y; iy < y + height; iy++) {
-        if (occupiedCells.has(`${ix},${iy}`)) {
-          return false;
-        }
-      }
-    }
-    return true;
-  };
-  const createOccupiedCellsMap = (widgets, layout, excludeWidgetId) => {
-    const occupiedCells = /* @__PURE__ */ new Set();
-    widgets.forEach((widget) => {
-      if (excludeWidgetId && widget.id === excludeWidgetId) {
-        return;
-      }
-      const pos = layout.get(widget.id);
-      if (!pos) return;
-      for (let x = pos.x; x < pos.x + widget.size.width; x++) {
-        for (let y = pos.y; y < pos.y + widget.size.height; y++) {
-          occupiedCells.add(`${x},${y}`);
-        }
-      }
-    });
-    return occupiedCells;
-  };
-  return {
-    GRID_COLUMNS,
-    MIN_GRID_ROWS,
-    ROWS_BUFFER,
-    dynamicRows,
-    updateGridRows,
-    hasCollision,
-    isAreaFree,
-    createOccupiedCellsMap
-  };
-}
-
-const SEARCH_DIRECTIONS = [
-  { dx: 0, dy: 0 },
-  // Current position
-  { dx: 0, dy: 1 },
-  // Down
-  { dx: 1, dy: 0 },
-  // Right
-  { dx: 0, dy: -1 },
-  // Up
-  { dx: -1, dy: 0 },
-  // Left
-  { dx: 1, dy: 1 },
-  // Right-down
-  { dx: -1, dy: 1 },
-  // Left-down
-  { dx: 1, dy: -1 },
-  // Right-up
-  { dx: -1, dy: -1 }
-  // Left-up
-];
-function useWidgetLayout(updatePositionCallback) {
-  const grid = useGridSystem();
-  const findFreePosition = (widget, widgets, layout) => {
-    const currentPos = layout.get(widget.id);
-    if (currentPos && !grid.hasCollision(widget, currentPos, widgets, layout, widget.id)) {
-      return currentPos;
-    }
-    const startX = currentPos?.x || 0;
-    const startY = currentPos?.y || 0;
-    let layer = 0;
-    const maxLayers = Math.max(grid.GRID_COLUMNS, grid.dynamicRows.value);
-    while (layer < maxLayers) {
-      for (const { dx, dy } of SEARCH_DIRECTIONS) {
-        const x = startX + dx * layer;
-        const y = startY + dy * layer;
-        const position = { x, y };
-        if (!grid.hasCollision(widget, position, widgets, layout, widget.id)) {
-          return position;
-        }
-      }
-      layer++;
-    }
-    return {
-      x: 0,
-      y: grid.dynamicRows.value
-    };
-  };
-  const findOptimalPosition = (widget, occupiedCells, maxRows) => {
-    let bestPos = { x: 0, y: 0 };
-    let minY = Number.MAX_SAFE_INTEGER;
-    for (let y = 0; y < maxRows; y++) {
-      for (let x = 0; x <= grid.GRID_COLUMNS - widget.size.width; x++) {
-        if (grid.isAreaFree(x, y, widget.size.width, widget.size.height, occupiedCells)) {
-          if (y < minY) {
-            minY = y;
-            bestPos = { x, y };
-          } else if (y === minY && x < bestPos.x) {
-            bestPos = { x, y };
-          }
-          if (y === 0) {
-            return bestPos;
-          }
-        }
-      }
-      if (minY !== Number.MAX_SAFE_INTEGER && y > minY) {
-        break;
-      }
-    }
-    if (minY === Number.MAX_SAFE_INTEGER) {
-      return { x: 0, y: maxRows };
-    }
-    return bestPos;
-  };
-  const arrangeWidgetsInRows = (widgetsToArrange, allWidgets, layout) => {
-    if (widgetsToArrange.length === 0) return;
-    const sortedWidgets = [...widgetsToArrange].sort((a, b) => {
-      const aSize = a.size.width * a.size.height;
-      const bSize = b.size.width * b.size.height;
-      return bSize - aSize;
-    });
-    let currentX = 0;
-    let currentY = 0;
-    let rowHeight = 0;
-    sortedWidgets.forEach((widget) => {
-      if (currentX + widget.size.width > grid.GRID_COLUMNS) {
-        currentX = 0;
-        currentY += rowHeight;
-        rowHeight = 0;
-      }
-      const position = { x: currentX, y: currentY };
-      updatePositionCallback(widget.id, position);
-      currentX += widget.size.width;
-      rowHeight = Math.max(rowHeight, widget.size.height);
-    });
-  };
-  const initializeWithBuiltInPositions = (widgets, layout) => {
-    if (widgets.length === 0) return false;
-    const widgetsWithPositions = widgets.filter((widget) => widget.position);
-    const widgetsWithoutPositions = widgets.filter((widget) => !widget.position);
-    if (widgetsWithPositions.length === 0) return false;
-    const sortedWidgets = [...widgetsWithPositions].sort((a, b) => {
-      if (!a.position || !b.position) return 0;
-      if (a.position.y !== b.position.y) return a.position.y - b.position.y;
-      return a.position.x - b.position.x;
-    });
-    layout.clear();
-    sortedWidgets.forEach((widget) => {
-      if (widget.position) {
-        updatePositionCallback(widget.id, widget.position);
-      }
-    });
-    let hasCollisions;
-    do {
-      hasCollisions = false;
-      for (const widget of sortedWidgets) {
-        if (!widget.position) continue;
-        const position = layout.get(widget.id);
-        if (position && grid.hasCollision(widget, position, widgets, layout, widget.id)) {
-          hasCollisions = true;
-          const freePosition = findFreePosition(widget, widgets, layout);
-          updatePositionCallback(widget.id, freePosition);
-        }
-      }
-    } while (hasCollisions);
-    const occupiedCells = grid.createOccupiedCellsMap(widgets, layout);
-    const sortedRemaining = [...widgetsWithoutPositions].sort((a, b) => {
-      const aSize = a.size.width * a.size.height;
-      const bSize = b.size.width * b.size.height;
-      return bSize - aSize;
-    });
-    for (const widget of sortedRemaining) {
-      const position = findOptimalPosition(widget, occupiedCells, grid.dynamicRows.value + grid.ROWS_BUFFER);
-      updatePositionCallback(widget.id, position);
-      for (let x = position.x; x < position.x + widget.size.width; x++) {
-        for (let y = position.y; y < position.y + widget.size.height; y++) {
-          occupiedCells.add(`${x},${y}`);
-        }
-      }
-    }
-    return true;
-  };
-  return {
-    findFreePosition,
-    findOptimalPosition,
-    arrangeWidgetsInRows,
-    initializeWithBuiltInPositions
-  };
-}
-
-const DASHBOARD_LAYOUT_KEY = "vc-dashboard-layout";
-function useDashboardGrid() {
-  const dashboard = useDashboard();
-  const widgets = computed(() => dashboard.getWidgets());
-  const layout = computed(() => dashboard.getLayout());
-  const grid = useGridSystem();
-  const widgetLayout = useWidgetLayout(dashboard.updateWidgetPosition);
-  const persistence = useLayoutPersistence(DASHBOARD_LAYOUT_KEY, dashboard.updateWidgetPosition);
-  const getGridRows = () => {
-    return grid.updateGridRows(widgets.value, layout.value);
-  };
-  const saveLayoutToLocalStorage = () => {
-    persistence.saveLayout(layout.value);
-  };
-  const loadLayoutFromLocalStorage = () => {
-    return persistence.loadLayout(widgets.value);
-  };
-  const arrangeWidgetsInRows = (widgetsToArrange) => {
-    widgetLayout.arrangeWidgetsInRows(widgetsToArrange, widgets.value, layout.value);
-  };
-  const initializeWithBuiltInPositions = () => {
-    return widgetLayout.initializeWithBuiltInPositions(widgets.value, layout.value);
-  };
-  const initializeLayout = () => {
-    const layoutLoadedFromStorage = loadLayoutFromLocalStorage();
-    if (!layoutLoadedFromStorage) {
-      const usedBuiltInPositions = initializeWithBuiltInPositions();
-      if (!usedBuiltInPositions) {
-        arrangeWidgetsInRows(widgets.value);
-      }
-    }
-  };
-  return {
-    widgets,
-    layout,
-    GRID_COLUMNS: grid.GRID_COLUMNS,
-    getGridRows,
-    saveLayoutToLocalStorage,
-    loadLayoutFromLocalStorage,
-    arrangeWidgetsInRows,
-    initializeWithBuiltInPositions,
-    initializeLayout
-  };
-}
-
-function useDragClone() {
-  const dragClone = ref(null);
-  const createDragClone = (element) => {
-    const widgetElement = element.closest(".dashboard-widget");
-    if (!widgetElement) return null;
-    const clone = widgetElement.cloneNode(true);
-    const rect = widgetElement.getBoundingClientRect();
-    const scrollX = window.scrollX || window.pageXOffset;
-    const scrollY = window.scrollY || window.pageYOffset;
-    const computedStyle = window.getComputedStyle(widgetElement);
-    clone.style.position = "fixed";
-    clone.style.width = `${rect.width}px`;
-    clone.style.height = `${rect.height}px`;
-    clone.style.left = `${rect.left + scrollX}px`;
-    clone.style.top = `${rect.top + scrollY}px`;
-    clone.style.zIndex = "9999";
-    clone.style.pointerEvents = "none";
-    clone.style.opacity = "0.95";
-    clone.style.transform = "scale(1.02)";
-    clone.style.transition = "transform 0.1s ease, opacity 0.2s ease";
-    clone.style.boxShadow = "0 10px 25px rgba(0,0,0,0.15)";
-    clone.style.willChange = "transform";
-    clone.style.backgroundColor = computedStyle.backgroundColor;
-    clone.style.borderRadius = computedStyle.borderRadius;
-    clone.classList.add("dashboard-widget-clone");
-    requestAnimationFrame(() => {
-      clone.style.transform = "scale(1.02)";
-      clone.style.opacity = "0.92";
-    });
-    document.body.appendChild(clone);
-    dragClone.value = clone;
-    return clone;
-  };
-  const updateDragClonePosition = (deltaX, deltaY) => {
-    if (!dragClone.value) return;
-    dragClone.value.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
-  };
-  const removeDragClone = () => {
-    if (!dragClone.value) return;
-    if (dragClone.value.parentNode) {
-      document.body.removeChild(dragClone.value);
-    }
-    dragClone.value = null;
-  };
-  return {
-    dragClone,
-    createDragClone,
-    updateDragClonePosition,
-    removeDragClone
-  };
-}
-
-function useEventCoordinates() {
-  const initialPosition = ref({ clientX: 0, clientY: 0 });
-  const isTouchDevice = ref(false);
-  const getEventCoordinates = (event) => {
-    if ("touches" in event) {
-      isTouchDevice.value = true;
-      return {
-        clientX: event.touches[0].clientX,
-        clientY: event.touches[0].clientY
-      };
-    }
-    isTouchDevice.value = false;
-    return {
-      clientX: event.clientX,
-      clientY: event.clientY
-    };
-  };
-  const saveInitialPosition = (event) => {
-    initialPosition.value = getEventCoordinates(event);
-  };
-  const calculateDelta = (currentCoordinates) => {
-    return {
-      deltaX: currentCoordinates.clientX - initialPosition.value.clientX,
-      deltaY: currentCoordinates.clientY - initialPosition.value.clientY
-    };
-  };
-  const hasMovedBeyondThreshold = (currentCoordinates, threshold = 3) => {
-    const { deltaX, deltaY } = calculateDelta(currentCoordinates);
-    return Math.abs(deltaX) > threshold || Math.abs(deltaY) > threshold;
-  };
-  return {
-    initialPosition,
-    isTouchDevice,
-    getEventCoordinates,
-    saveInitialPosition,
-    calculateDelta,
-    hasMovedBeyondThreshold
-  };
-}
-
-function useCollisionDetection() {
-  const displacedWidgets = ref(/* @__PURE__ */ new Map());
-  const intersect = (widgetA, posA, widgetB, posB) => {
-    const verticalDistance = Math.abs(posA.y - posB.y);
-    if (verticalDistance > widgetA.size.height + widgetB.size.height) {
-      return false;
-    }
-    const horizontalDistance = Math.abs(posA.x - posB.x);
-    if (horizontalDistance > widgetA.size.width + widgetB.size.width) {
-      return false;
-    }
-    const aLeft = posA.x;
-    const aRight = posA.x + widgetA.size.width;
-    const aTop = posA.y;
-    const aBottom = posA.y + widgetA.size.height;
-    const bLeft = posB.x;
-    const bRight = posB.x + widgetB.size.width;
-    const bTop = posB.y;
-    const bBottom = posB.y + widgetB.size.height;
-    return !(aRight <= bLeft || aLeft >= bRight || aBottom <= bTop || aTop >= bBottom);
-  };
-  const updateDisplacedWidgets = (draggedWidget, previewPosition, widgets, layout) => {
-    if (!draggedWidget || !previewPosition) {
-      displacedWidgets.value.clear();
-      return;
-    }
-    const newDisplacements = /* @__PURE__ */ new Map();
-    const processedWidgets = /* @__PURE__ */ new Set();
-    const directCollisionWidgets = /* @__PURE__ */ new Set();
-    for (const widget of widgets) {
-      if (widget.id === draggedWidget.id) continue;
-      const pos = layout.get(widget.id);
-      if (!pos) continue;
-      if (intersect(draggedWidget, previewPosition, widget, pos)) {
-        directCollisionWidgets.add(widget.id);
-      }
-    }
-    if (directCollisionWidgets.size === 0) {
-      displacedWidgets.value = newDisplacements;
-      return;
-    }
-    const sortedWidgets = [...widgets].filter((w) => w.id !== draggedWidget.id).sort((a, b) => {
-      const posA = layout.get(a.id);
-      const posB = layout.get(b.id);
-      if (!posA || !posB) return 0;
-      return posA.y === posB.y ? posA.x - posB.x : posA.y - posB.y;
-    });
-    const collisionCache = /* @__PURE__ */ new Map();
-    const checkCollision = (widget, position) => {
-      const cacheKey = `${widget.id}_${position.x}_${position.y}`;
-      if (collisionCache.has(cacheKey)) {
-        return collisionCache.get(cacheKey);
-      }
-      let hasCollision = intersect(draggedWidget, previewPosition, widget, position);
-      if (!hasCollision) {
-        for (const [id, pos] of newDisplacements) {
-          const w = widgets.find((w2) => w2.id === id);
-          if (w && intersect(widget, position, w, pos)) {
-            hasCollision = true;
-            break;
-          }
-        }
-      }
-      collisionCache.set(cacheKey, hasCollision);
-      return hasCollision;
-    };
-    for (const widget of sortedWidgets) {
-      if (processedWidgets.has(widget.id)) continue;
-      const currentPos = layout.get(widget.id);
-      if (!currentPos) continue;
-      if (!directCollisionWidgets.has(widget.id) && newDisplacements.size === 0) continue;
-      const hasCollision = checkCollision(widget, currentPos);
-      if (hasCollision) {
-        const newY = Math.max(previewPosition.y + draggedWidget.size.height, currentPos.y + 1);
-        let finalY = newY;
-        const maxIterations = 50;
-        let iterations = 0;
-        while (checkCollision(widget, { x: currentPos.x, y: finalY }) && iterations < maxIterations) {
-          finalY++;
-          iterations++;
-        }
-        newDisplacements.set(widget.id, { x: currentPos.x, y: finalY });
-        processedWidgets.add(widget.id);
-        for (const w of sortedWidgets) {
-          if (w.id !== widget.id && !processedWidgets.has(w.id)) {
-            const pos = layout.get(w.id);
-            if (pos && intersect(widget, { x: currentPos.x, y: finalY }, w, pos)) {
-              directCollisionWidgets.add(w.id);
-            }
-          }
-        }
-      }
-    }
-    displacedWidgets.value = newDisplacements;
-  };
-  const clearDisplacedWidgets = () => {
-    displacedWidgets.value.clear();
-  };
-  const isWidgetDisplaced = (widgetId) => {
-    return displacedWidgets.value.has(widgetId);
-  };
-  const getDisplacedPosition = (widgetId) => {
-    return displacedWidgets.value.get(widgetId);
-  };
-  return {
-    displacedWidgets,
-    intersect,
-    updateDisplacedWidgets,
-    clearDisplacedWidgets,
-    isWidgetDisplaced,
-    getDisplacedPosition
-  };
-}
-
-function useGridPosition(gridColumns, getGridRows) {
-  const previewPosition = ref(null);
-  const dragOffset = ref({ x: 0, y: 0 });
-  const calculateDragOffset = (event, element, cellSize) => {
-    const rect = element.getBoundingClientRect();
-    let clientX, clientY;
-    if ("touches" in event) {
-      clientX = event.touches[0].clientX;
-      clientY = event.touches[0].clientY;
-    } else {
-      clientX = event.clientX;
-      clientY = event.clientY;
-    }
-    dragOffset.value = {
-      x: (clientX - rect.left) / cellSize.cellWidth,
-      y: (clientY - rect.top) / cellSize.cellHeight
-    };
-  };
-  const mouseToGridCoordinates = (coords, containerRect, cellSize, scrollOffset) => {
-    const mouseX = coords.clientX - containerRect.left + scrollOffset.left;
-    const mouseY = coords.clientY - containerRect.top + scrollOffset.top;
-    const gridX = Math.round(mouseX / cellSize.cellWidth - dragOffset.value.x);
-    const gridY = Math.round(mouseY / cellSize.cellHeight - dragOffset.value.y);
-    return { gridX, gridY };
-  };
-  const constrainToGrid = (gridX, gridY, widgetWidth, widgetHeight) => {
-    gridX = Math.max(0, gridX);
-    gridY = Math.max(0, gridY);
-    const gridWidth = gridColumns;
-    const gridHeight = getGridRows?.() || 100;
-    gridX = Math.min(gridX, gridWidth - widgetWidth);
-    gridY = Math.min(gridY, gridHeight - widgetHeight);
-    return { gridX, gridY };
-  };
-  const updatePreviewPosition = (position) => {
-    previewPosition.value = position;
-    return position;
-  };
-  const resetPosition = () => {
-    previewPosition.value = null;
-    dragOffset.value = { x: 0, y: 0 };
-  };
-  return {
-    previewPosition,
-    dragOffset,
-    calculateDragOffset,
-    mouseToGridCoordinates,
-    constrainToGrid,
-    updatePreviewPosition,
-    resetPosition
-  };
-}
-
-const CELL_HEIGHT$1 = 80;
-function useDashboardDragAndDrop(updateWidgetPosition, getGridRows) {
-  const dashboard = useDashboard();
-  const widgets = computed(() => dashboard.getWidgets());
-  const gridContainer = ref(null);
-  const draggedWidget = ref(null);
-  const isDragging = ref(false);
-  const { dragClone, createDragClone, updateDragClonePosition, removeDragClone } = useDragClone();
-  const { initialPosition, isTouchDevice, getEventCoordinates, saveInitialPosition, hasMovedBeyondThreshold } = useEventCoordinates();
-  const { displacedWidgets, updateDisplacedWidgets, isWidgetDisplaced, getDisplacedPosition } = useCollisionDetection();
-  const {
-    previewPosition,
-    calculateDragOffset,
-    mouseToGridCoordinates,
-    constrainToGrid,
-    updatePreviewPosition,
-    resetPosition
-  } = useGridPosition(GRID_COLUMNS, getGridRows);
-  const calculateCellSize = () => {
-    if (!gridContainer.value) return { cellWidth: 0, cellHeight: CELL_HEIGHT$1 };
-    const rect = gridContainer.value.getBoundingClientRect();
-    return {
-      cellWidth: rect.width / GRID_COLUMNS,
-      cellHeight: CELL_HEIGHT$1
-    };
-  };
-  const updateDragPosition = (event) => {
-    if (!gridContainer.value || !draggedWidget.value || !dragClone.value) return;
-    const coords = getEventCoordinates(event);
-    requestAnimationFrame(() => {
-      if (!gridContainer.value || !draggedWidget.value || !dragClone.value) return;
-      const rect = gridContainer.value.getBoundingClientRect();
-      const cellSize = calculateCellSize();
-      const { deltaX, deltaY } = {
-        deltaX: coords.clientX - initialPosition.value.clientX,
-        deltaY: coords.clientY - initialPosition.value.clientY
-      };
-      updateDragClonePosition(deltaX, deltaY);
-      const scrollOffset = {
-        left: gridContainer.value.scrollLeft,
-        top: gridContainer.value.scrollTop
-      };
-      const { gridX, gridY } = mouseToGridCoordinates(coords, rect, cellSize, scrollOffset);
-      const constrainedPosition = constrainToGrid(
-        gridX,
-        gridY,
-        draggedWidget.value.size.width,
-        draggedWidget.value.size.height
-      );
-      if (!previewPosition.value || previewPosition.value.x !== constrainedPosition.gridX || previewPosition.value.y !== constrainedPosition.gridY) {
-        const newPosition = {
-          x: constrainedPosition.gridX,
-          y: constrainedPosition.gridY
-        };
-        updatePreviewPosition(newPosition);
-        updateDisplacedWidgets(draggedWidget.value, newPosition, widgets.value, new Map(dashboard.getLayout()));
-      }
-    });
-  };
-  const handleMouseMove = (event) => {
-    if (!isDragging.value || !draggedWidget.value || !gridContainer.value || !dragClone.value) return;
-    updateDragPosition(event);
-  };
-  const handleTouchMove = (event) => {
-    if (!isDragging.value || !draggedWidget.value || !gridContainer.value || !dragClone.value) return;
-    event.preventDefault();
-    updateDragPosition(event);
-  };
-  const handleMouseUp = () => {
-    finishDrag();
-  };
-  const handleTouchEnd = () => {
-    finishDrag();
-  };
-  const finishDrag = () => {
-    if (!isDragging.value || !draggedWidget.value || !previewPosition.value) return;
-    const draggedWidgetId = draggedWidget.value.id;
-    const finalPosition = previewPosition.value;
-    if (dragClone.value) {
-      const originalWidget = document.querySelector(`.dashboard-widget[data-id="${draggedWidgetId}"]`);
-      if (originalWidget) {
-        const cellSize = calculateCellSize();
-        const widgetGap = 20;
-        const cloneRect = dragClone.value.getBoundingClientRect();
-        const scrollX = window.scrollX || window.pageXOffset;
-        const scrollY = window.scrollY || window.pageYOffset;
-        const gridRect = gridContainer.value.getBoundingClientRect();
-        const gridScrollLeft = gridContainer.value.scrollLeft;
-        const gridScrollTop = gridContainer.value.scrollTop;
-        const relX = cloneRect.left + scrollX - (gridRect.left + scrollX) + gridScrollLeft;
-        const relY = cloneRect.top + scrollY - (gridRect.top + scrollY) + gridScrollTop;
-        const finalX = finalPosition.x * cellSize.cellWidth + widgetGap / 2;
-        const finalY = finalPosition.y * cellSize.cellHeight + widgetGap / 2;
-        originalWidget.style.transition = "none";
-        originalWidget.style.transform = `translate(${relX}px, ${relY}px)`;
-        originalWidget.style.opacity = "1";
-        originalWidget.style.zIndex = "1000";
-        removeDragClone();
-        originalWidget.offsetHeight;
-        updateWidgetPosition(draggedWidgetId, finalPosition);
-        for (const [widgetId, position] of displacedWidgets.value.entries()) {
-          updateWidgetPosition(widgetId, position);
-        }
-        setTimeout(() => {
-          originalWidget.style.transition = `transform var(--dashboard-transition-duration) var(--dashboard-transition-timing)`;
-          originalWidget.style.transform = `translate(${finalX}px, ${finalY}px)`;
-        }, 20);
-      } else {
-        removeDragClone();
-        updateWidgetPosition(draggedWidgetId, finalPosition);
-        for (const [widgetId, position] of displacedWidgets.value.entries()) {
-          updateWidgetPosition(widgetId, position);
-        }
-      }
-    } else {
-      updateWidgetPosition(draggedWidgetId, finalPosition);
-      for (const [widgetId, position] of displacedWidgets.value.entries()) {
-        updateWidgetPosition(widgetId, position);
-      }
-    }
-    document.removeEventListener("mousemove", handleMouseMove);
-    document.removeEventListener("mouseup", handleMouseUp);
-    document.removeEventListener("touchmove", handleTouchMove, { passive: false });
-    document.removeEventListener("touchend", handleTouchEnd);
-    document.removeEventListener("touchcancel", handleTouchEnd);
-    setTimeout(() => {
-      isDragging.value = false;
-      draggedWidget.value = null;
-      resetPosition();
-    }, 50);
-  };
-  const handleMouseDown = (event, widget, element) => {
-    if (!gridContainer.value) return;
-    if ("touches" in event) {
-      isTouchDevice.value = true;
-    }
-    if (!isTouchDevice.value) {
-      event.preventDefault();
-    }
-    event.stopPropagation();
-    saveInitialPosition(event);
-    let hasDragStarted = false;
-    const widgetElement = element.closest(".dashboard-widget");
-    if (!widgetElement) return;
-    const cellSize = calculateCellSize();
-    const tempMoveHandler = (moveEvent) => {
-      if (hasDragStarted) return;
-      const currentCoords = getEventCoordinates(moveEvent);
-      if (hasMovedBeyondThreshold(currentCoords, 3)) {
-        hasDragStarted = true;
-        isDragging.value = true;
-        draggedWidget.value = widget;
-        calculateDragOffset(event, widgetElement, cellSize);
-        createDragClone(element);
-        document.removeEventListener("mousemove", tempMoveHandler);
-        document.removeEventListener("touchmove", tempMoveHandler);
-        document.removeEventListener("mouseup", tempUpHandler);
-        document.removeEventListener("touchend", tempUpHandler);
-        if (isTouchDevice.value) {
-          document.addEventListener("touchmove", handleTouchMove, { passive: false });
-          document.addEventListener("touchend", handleTouchEnd);
-          document.addEventListener("touchcancel", handleTouchEnd);
-        } else {
-          document.addEventListener("mousemove", handleMouseMove, { passive: true });
-          document.addEventListener("mouseup", handleMouseUp);
-        }
-      }
-    };
-    const tempUpHandler = () => {
-      if (!hasDragStarted) {
-        document.removeEventListener("mousemove", tempMoveHandler);
-        document.removeEventListener("touchmove", tempMoveHandler);
-        document.removeEventListener("mouseup", tempUpHandler);
-        document.removeEventListener("touchend", tempUpHandler);
-      }
-    };
-    if (isTouchDevice.value) {
-      document.addEventListener("touchmove", tempMoveHandler, { passive: true });
-      document.addEventListener("touchend", tempUpHandler);
-    } else {
-      document.addEventListener("mousemove", tempMoveHandler, { passive: true });
-      document.addEventListener("mouseup", tempUpHandler);
-    }
-  };
-  const setGridContainer = (container) => {
-    gridContainer.value = container;
-  };
-  onUnmounted(() => {
-    finishDrag();
-  });
-  return {
-    draggedWidget,
-    previewPosition,
-    displacedWidgets,
-    isDragging,
-    handleMouseDown,
-    // Now handles both mouse and touch events
-    setGridContainer,
-    isWidgetDisplaced,
-    getDisplacedPosition
-  };
-}
-
-const CELL_HEIGHT = 80;
-const HORIZONTAL_PADDING = 18;
-function useCellSizeCalculator(gridColumns) {
-  const cellSizeCache = ref(null);
-  const previousContainerWidth = ref(0);
-  const calculateCellSize = (container, useCache = true) => {
-    if (useCache && cellSizeCache.value) return cellSizeCache.value;
-    if (!container) return { width: 0, height: CELL_HEIGHT };
-    const rect = container.getBoundingClientRect();
-    const availableWidth = rect.width - 2 * HORIZONTAL_PADDING;
-    const cellWidth = availableWidth / gridColumns;
-    const size = {
-      width: Math.max(cellWidth, 0),
-      // Protection against negative values
-      height: CELL_HEIGHT
-    };
-    cellSizeCache.value = size;
-    previousContainerWidth.value = rect.width;
-    return size;
-  };
-  const clearCache = () => {
-    cellSizeCache.value = null;
-  };
-  const shouldRecalculate = (newWidth) => {
-    if (previousContainerWidth.value === 0) return true;
-    const widthChange = Math.abs(newWidth - previousContainerWidth.value);
-    const widthChangePercent = widthChange / previousContainerWidth.value * 100;
-    return widthChangePercent > 5 || widthChange > 50;
-  };
-  const handleContainerResize = (container) => {
-    if (!container) return;
-    const newWidth = container.getBoundingClientRect().width;
-    clearCache();
-    if (shouldRecalculate(newWidth)) {
-      calculateCellSize(container, false);
-    }
-    previousContainerWidth.value = newWidth;
-  };
-  return {
-    calculateCellSize,
-    clearCache,
-    shouldRecalculate,
-    handleContainerResize,
-    previousContainerWidth
-  };
-}
-
-const WIDGET_GAP = 20;
-function useWidgetStyles(getCellSize) {
-  const getPreviewStyles = (widget, position) => {
-    const cellSize = getCellSize();
-    if (!position || !widget?.size) return {};
-    const widgetWidth = widget.size.width * cellSize.width - WIDGET_GAP;
-    const widgetHeight = widget.size.height * cellSize.height - WIDGET_GAP;
-    const translateX = position.x * cellSize.width + WIDGET_GAP / 2;
-    const translateY = position.y * cellSize.height + WIDGET_GAP / 2;
-    return {
-      width: `${widgetWidth}px`,
-      height: `${widgetHeight}px`,
-      transform: `translate(${translateX}px, ${translateY}px)`
-    };
-  };
-  const getWidgetStyles = (widget, position, isDragged = false, displacedPosition) => {
-    if (!position) return { display: "none" };
-    const cellSize = getCellSize();
-    const width = widget.size.width * cellSize.width - WIDGET_GAP;
-    const height = widget.size.height * cellSize.height - WIDGET_GAP;
-    const left = position.x * cellSize.width + WIDGET_GAP / 2;
-    const top = position.y * cellSize.height + WIDGET_GAP / 2;
-    const baseStyles = {
-      position: "absolute",
-      width: `${width}px`,
-      height: `${height}px`
-    };
-    if (displacedPosition) {
-      const newLeft = displacedPosition.x * cellSize.width + WIDGET_GAP / 2;
-      const newTop = displacedPosition.y * cellSize.height + WIDGET_GAP / 2;
-      return {
-        ...baseStyles,
-        transform: `translate(${newLeft}px, ${newTop}px)`,
-        transition: "transform var(--dashboard-transition-duration) var(--dashboard-transition-timing)",
-        zIndex: "10"
-      };
-    }
-    if (isDragged) {
-      return {
-        ...baseStyles,
-        transform: `translate(${left}px, ${top}px)`,
-        opacity: "0",
-        // Hide the original, since the clone is displayed
-        pointerEvents: "none",
-        zIndex: "1",
-        transition: "none"
-        // Disable animations for the original widget
-      };
-    }
-    return {
-      ...baseStyles,
-      transform: `translate(${left}px, ${top}px)`,
-      transition: "transform var(--dashboard-transition-duration) var(--dashboard-transition-timing)"
-    };
-  };
-  return {
-    getPreviewStyles,
-    getWidgetStyles,
-    WIDGET_GAP
-  };
-}
-
-function useResizeObserver(callback, options) {
-  const observer = ref(null);
-  const debounceTimer = ref(null);
-  const isSupported = typeof window !== "undefined" && "ResizeObserver" in window;
-  const handleResize = (entries) => {
-    {
-      if (debounceTimer.value !== null) {
-        window.clearTimeout(debounceTimer.value);
-        debounceTimer.value = null;
-      }
-      debounceTimer.value = window.setTimeout(() => {
-        callback(entries);
-      }, options.debounceMs);
-    }
-  };
-  const observe = (element) => {
-    if (!isSupported) return;
-    if (!observer.value) {
-      observer.value = new ResizeObserver(handleResize);
-    }
-    observer.value.observe(element);
-  };
-  const unobserve = (element) => {
-    if (!isSupported || !observer.value) return;
-    observer.value.unobserve(element);
-  };
-  const disconnect = () => {
-    if (!isSupported || !observer.value) return;
-    observer.value.disconnect();
-    observer.value = null;
-    if (debounceTimer.value !== null) {
-      window.clearTimeout(debounceTimer.value);
-      debounceTimer.value = null;
-    }
-  };
-  onUnmounted(() => {
-    disconnect();
-  });
-  return {
-    observe,
-    unobserve,
-    disconnect,
-    isSupported
-  };
-}
-
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "DashboardWidget",
-  props: {
-    widget: {}
-  },
-  emits: ["drag"],
-  setup(__props, { emit: __emit }) {
-    const interactiveSelectors = [
-      "button",
-      "a",
-      "input",
-      "select",
-      "textarea",
-      "label",
-      '[role="button"]',
-      '[role="checkbox"]',
-      '[role="radio"]',
-      '[role="switch"]',
-      '[role="tab"]',
-      '[role="link"]'
-    ];
-    const isInteractiveElement = (target) => {
-      if (!target || !(target instanceof Element)) return false;
-      return interactiveSelectors.some((selector) => {
-        return target.matches(selector) || !!target.closest(selector);
-      });
-    };
-    const handleWidgetMouseDown = (event) => {
-      if (isInteractiveElement(event.target)) {
-        return;
-      }
-      event.preventDefault();
-      event.stopPropagation();
-      emit("drag", event);
-    };
-    const handleWidgetTouchStart = (event) => {
-      if (isInteractiveElement(event.target)) {
-        return;
-      }
-      emit("drag", event);
-    };
-    const emit = __emit;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "dashboard-widget",
-        "data-test": "dashboard-widget",
-        onMousedown: handleWidgetMouseDown,
-        onTouchstartPassive: handleWidgetTouchStart
-      }, [
-        (openBlock(), createBlock(resolveDynamicComponent(_ctx.widget.component), mergeProps(_ctx.widget.props || {}, { class: "dashboard-widget__content" }), null, 16))
-      ], 32);
-    };
-  }
-});
-
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "DraggableDashboard",
-  setup(__props, { expose: __expose }) {
-    const gridContainerRef = ref(null);
-    const dashboard = useDashboard();
-    const {
-      widgets,
-      layout,
-      GRID_COLUMNS,
-      getGridRows,
-      arrangeWidgetsInRows,
-      initializeLayout,
-      saveLayoutToLocalStorage,
-      initializeWithBuiltInPositions
-    } = useDashboardGrid();
-    const cellSizeCalculator = useCellSizeCalculator(GRID_COLUMNS);
-    const getCellSize = () => {
-      return cellSizeCalculator.calculateCellSize(gridContainerRef.value);
-    };
-    const widgetStyles = useWidgetStyles(getCellSize);
-    const {
-      draggedWidget,
-      previewPosition,
-      isDragging,
-      handleMouseDown,
-      setGridContainer,
-      isWidgetDisplaced,
-      getDisplacedPosition
-    } = useDashboardDragAndDrop(dashboard.updateWidgetPosition, getGridRows);
-    watch(gridContainerRef, (container) => {
-      if (container) {
-        setGridContainer(container);
-      }
-    });
-    watch(
-      layout,
-      () => {
-        saveLayoutToLocalStorage();
-      },
-      { deep: true }
-    );
-    const handleContainerResize = (entries) => {
-      if (!entries.length || isDragging.value) return;
-      entries[0];
-      const container = gridContainerRef.value;
-      if (container) {
-        cellSizeCalculator.handleContainerResize(container);
-      }
-    };
-    const resizeObserver = useResizeObserver(handleContainerResize, { debounceMs: 300 });
-    const getWidgetStylesWithState = (widget) => {
-      const position = layout.value.get(widget.id);
-      const isDragged = draggedWidget.value?.id === widget.id;
-      const displacedPosition = isWidgetDisplaced(widget.id) ? getDisplacedPosition(widget.id) : void 0;
-      return widgetStyles.getWidgetStyles(widget, position, isDragged, displacedPosition);
-    };
-    const rearrangeWidgets = () => {
-      arrangeWidgetsInRows(widgets.value);
-    };
-    const recalculateLayout = () => {
-      cellSizeCalculator.clearCache();
-      recalculateWidgetPositions();
-    };
-    const saveLayout = () => {
-      saveLayoutToLocalStorage();
-    };
-    const useBuiltInPositions = () => {
-      const result = initializeWithBuiltInPositions();
-      return result;
-    };
-    const recalculateWidgetPositions = () => {
-      getCellSize();
-      if (gridContainerRef.value) {
-        cellSizeCalculator.previousContainerWidth.value = gridContainerRef.value.getBoundingClientRect().width;
-      }
-    };
-    onMounted(() => {
-      initializeLayout();
-      getCellSize();
-      if (gridContainerRef.value && resizeObserver.isSupported) {
-        resizeObserver.observe(gridContainerRef.value);
-      }
-      window.addEventListener("resize", cellSizeCalculator.clearCache);
-    });
-    onUnmounted(() => {
-      window.removeEventListener("resize", cellSizeCalculator.clearCache);
-    });
-    __expose({
-      rearrangeWidgets,
-      recalculateLayout,
-      saveLayout,
-      useBuiltInPositions
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$d, {
-        "no-padding": "",
-        class: "vc-dashboard-grid"
-      }, {
-        default: withCtx(() => [
-          createElementVNode("div", {
-            ref_key: "gridContainerRef",
-            ref: gridContainerRef,
-            class: "vc-dashboard-grid__container"
-          }, [
-            unref(draggedWidget) && unref(previewPosition) ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: normalizeClass(["vc-dashboard-grid__position-preview", {
-                "is-animating": unref(isDragging)
-              }]),
-              style: normalizeStyle(unref(widgetStyles).getPreviewStyles(unref(draggedWidget), unref(previewPosition)))
-            }, null, 6)) : createCommentVNode("", true),
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(widgets), (widget) => {
-              return openBlock(), createBlock(_sfc_main$2, {
-                key: widget.id,
-                widget,
-                style: normalizeStyle(getWidgetStylesWithState(widget)),
-                "is-dragging": unref(draggedWidget)?.id === widget.id,
-                class: normalizeClass({
-                  "is-dragging": unref(draggedWidget)?.id === widget.id,
-                  "is-displaced": unref(isWidgetDisplaced)(widget.id),
-                  "is-animating": unref(isDragging) && (unref(draggedWidget)?.id === widget.id || unref(isWidgetDisplaced)(widget.id))
-                }),
-                "data-id": widget.id,
-                onDrag: (e) => unref(handleMouseDown)(e, widget, e.target)
-              }, null, 8, ["widget", "style", "is-dragging", "class", "data-id", "onDrag"]);
-            }), 128))
-          ], 512)
-        ]),
-        _: 1
-      });
-    };
-  }
-});
-
-const _hoisted_1 = { class: "dashboard-widget-card" };
-const _hoisted_2 = { class: "dashboard-widget-card__header-wrapper" };
-const _hoisted_3 = { class: "dashboard-widget-card__header" };
-const _hoisted_4 = { class: "dashboard-widget-card__header-content" };
-const _hoisted_5 = { class: "dashboard-widget-card__header" };
-const _hoisted_6 = { class: "dashboard-widget-card__actions" };
-const _hoisted_7 = { class: "dashboard-widget-card__body" };
-const _hoisted_8 = {
-  key: 0,
-  class: "dashboard-widget-card__body-content"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "dashboard-widget-card",
-  props: {
-    header: {},
-    icon: {},
-    loading: { type: Boolean }
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      const _component_VcIcon = resolveComponent("VcIcon");
-      const _directive_loading = resolveDirective("loading");
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          createElementVNode("div", _hoisted_3, [
-            renderSlot(_ctx.$slots, "header", {}, () => [
-              createElementVNode("div", _hoisted_4, [
-                _ctx.icon ? (openBlock(), createBlock(_component_VcIcon, {
-                  key: 0,
-                  class: "dashboard-widget-card__icon",
-                  icon: _ctx.icon,
-                  size: "xl"
-                }, null, 8, ["icon"])) : createCommentVNode("", true),
-                createElementVNode("div", _hoisted_5, toDisplayString(props.header), 1)
-              ])
-            ])
-          ]),
-          createElementVNode("div", _hoisted_6, [
-            renderSlot(_ctx.$slots, "actions")
-          ])
-        ]),
-        createElementVNode("div", _hoisted_7, [
-          _ctx.$isDesktop.value || !_ctx.$slots["mobile-content"] ? withDirectives((openBlock(), createElementBlock("div", _hoisted_8, [
-            renderSlot(_ctx.$slots, "content")
-          ])), [
-            [_directive_loading, _ctx.loading]
-          ]) : createCommentVNode("", true)
-        ])
-      ]);
-    };
-  }
-});
-
-export { NotificationDropdown as N, UserDropdownButton as U, _sfc_main as _, _sfc_main$1 as a, NotificationTemplate as b };