import { ref as et, nextTick as vt, getCurrentInstance as yt, onMounted as nt, onUnmounted as wt, unref as o, defineComponent as _t, watch as bt, onBeforeUnmount as St, resolveComponent as O, openBlock as v, createElementBlock as b, normalizeStyle as xt, createCommentVNode as Tt, createVNode as Y, createElementVNode as p, toDisplayString as It, Fragment as K, renderList as B, normalizeClass as kt, createBlock as U, mergeProps as Et, withCtx as Dt } from "vue";
import { useUser as Ct, useColor as Ot, useSpace as Pt, useDebounceFn as Mt, useDraw as $t, selectedUser as S, safeHash as Lt } from "./composables-5f691338.js";
function At() {
  try {
    return "constructor" in GestureEvent;
  } catch {
    return !1;
  }
}
function st() {
  return typeof window < "u" && "ontouchstart" in window;
}
function rt(e) {
  return "pointerId" in e ? null : e.type === "touchend" ? e.changedTouches : e.targetTouches;
}
function it(e) {
  return Array.from(rt(e)).map((t) => t.identifier);
}
function F(e) {
  const t = "buttons" in e ? e.buttons : 0, { shiftKey: n, altKey: s, metaKey: r, ctrlKey: i } = e;
  return { buttons: t, shiftKey: n, altKey: s, metaKey: r, ctrlKey: i };
}
const zt = (e) => e;
function H(e, t = zt) {
  const n = rt(e), { clientX: s, clientY: r } = n ? n[0] : e;
  return t([s, r]);
}
function ot() {
}
function at(...e) {
  return e.length === 0 ? ot : e.length === 1 ? e[0] : function() {
    var t;
    for (let n of e)
      t = n.apply(this, arguments) || t;
    return t;
  };
}
function x(e, t) {
  if (e === void 0) {
    if (t === void 0)
      throw new Error("Must define fallback value if undefined is expected");
    e = t;
  }
  return Array.isArray(e) ? e : [e, e];
}
function X(e, ...t) {
  return typeof e == "function" ? e(...t) : e;
}
function P(e) {
  return {
    _active: !1,
    _blocked: !1,
    _intentional: [!1, !1],
    _movement: [0, 0],
    _initial: [0, 0],
    _bounds: [
      [-1 / 0, 1 / 0],
      [-1 / 0, 1 / 0]
    ],
    _lastEventType: void 0,
    _dragStarted: !1,
    _dragPreventScroll: !1,
    _dragIsTap: !0,
    _dragDelayed: !1,
    event: void 0,
    intentional: !1,
    values: [0, 0],
    velocities: [0, 0],
    delta: [0, 0],
    movement: [0, 0],
    offset: [0, 0],
    lastOffset: [0, 0],
    direction: [0, 0],
    initial: [0, 0],
    previous: [0, 0],
    first: !1,
    last: !1,
    active: !1,
    timeStamp: 0,
    startTime: 0,
    elapsedTime: 0,
    cancel: ot,
    canceled: !1,
    memo: void 0,
    args: void 0,
    ...e
  };
}
function lt() {
  const e = {
    hovering: !1,
    scrolling: !1,
    wheeling: !1,
    dragging: !1,
    moving: !1,
    pinching: !1,
    touches: 0,
    buttons: 0,
    down: !1,
    shiftKey: !1,
    altKey: !1,
    metaKey: !1,
    ctrlKey: !1,
    locked: !1
  }, t = P({
    _pointerId: void 0,
    axis: void 0,
    xy: [0, 0],
    vxvy: [0, 0],
    velocity: 0,
    distance: 0,
    tap: !1,
    swipe: [0, 0]
  }), n = P({
    _pointerIds: [],
    da: [0, 0],
    vdva: [0, 0],
    origin: void 0,
    turns: 0
  }), s = P({
    axis: void 0,
    xy: [0, 0],
    vxvy: [0, 0],
    velocity: 0,
    distance: 0
  }), r = P({
    axis: void 0,
    xy: [0, 0],
    vxvy: [0, 0],
    velocity: 0,
    distance: 0
  }), i = P({
    axis: void 0,
    xy: [0, 0],
    vxvy: [0, 0],
    velocity: 0,
    distance: 0
  });
  return { shared: e, drag: t, pinch: n, wheel: s, move: r, scroll: i };
}
class Gt {
  constructor(t) {
    this.classes = t, this.pointerIds = /* @__PURE__ */ new Set(), this.touchIds = /* @__PURE__ */ new Set(), this.supportsTouchEvents = st(), this.supportsGestureEvents = At(), this.bind = (...n) => {
      const s = {};
      for (let r of this.classes)
        new r(this, n).addBindings(s);
      for (let r in this.nativeRefs)
        y(s, r, (i) => this.nativeRefs[r]({ ...this.state.shared, event: i, args: n }));
      return this.config.domTarget ? Nt(this, s) : Vt(this, s);
    }, this.clean = () => {
      const { eventOptions: n, domTarget: s } = this.config, r = o(s);
      r && M(r, ct(this.domListeners), n), Object.values(this.timeouts).forEach(clearTimeout), Ut(this);
    }, this.classes = t, this.state = lt(), this.timeouts = {}, this.domListeners = [], this.windowListeners = {};
  }
}
function Kt(e, t) {
  "pointerId" in t ? e.pointerIds.add(t.pointerId) : e.touchIds = new Set(it(t));
}
function Bt(e, t) {
  "pointerId" in t ? e.pointerIds.delete(t.pointerId) : it(t).forEach((n) => e.touchIds.delete(n));
}
function Ut(e) {
  const {
    config: { window: t, eventOptions: n },
    windowListeners: s
  } = e, r = o(t);
  if (r) {
    for (let i in s) {
      const l = s[i];
      M(r, l, n);
    }
    e.windowListeners = {};
  }
}
function jt({ config: e, windowListeners: t }, n, s = e.eventOptions) {
  const r = o(e.window);
  r && (M(r, t[n], s), delete t[n]);
}
function Rt({ config: e, windowListeners: t }, n, s = [], r = e.eventOptions) {
  const i = o(e.window);
  i && (M(i, t[n], r), ut(i, t[n] = s, r));
}
function Nt({ config: e, domListeners: t }, n) {
  const { eventOptions: s, domTarget: r } = e, i = o(r);
  if (!i)
    throw new Error("domTarget must be defined");
  M(i, ct(t), s);
  for (let [l, a] of Object.entries(n)) {
    const c = l.slice(2).toLowerCase();
    t.push([c, at(...a)]);
  }
  ut(i, t, s);
}
function Vt({ config: e }, t) {
  const n = {}, s = e.eventOptions.capture ? "Capture" : "";
  for (let [r, i] of Object.entries(t)) {
    const l = Array.isArray(i) ? i : [i], a = r + s;
    n[a] = at(...l);
  }
  return n;
}
function ct(e = []) {
  return e.splice(0, e.length);
}
function y(e, t, n) {
  e[t] || (e[t] = []), e[t].push(n);
}
function ut(e, t = [], n = {}) {
  if (e)
    for (let [s, r] of t)
      e.addEventListener(s, r, n);
}
function M(e, t = [], n = {}) {
  if (e)
    for (let [s, r] of t)
      e.removeEventListener(s, r, n);
}
function R(e, t) {
  return e.map((n, s) => n + t[s]);
}
function ft(e, t) {
  return e.map((n, s) => n - t[s]);
}
function N(e) {
  return Math.hypot(...e);
}
function Wt(e, t, n) {
  const s = N(t), r = s === 0 ? 0 : 1 / s, i = n === 0 ? 0 : 1 / n, l = i * s, a = t.map((h) => i * h), c = t.map((h) => r * h), u = N(e);
  return { velocities: a, velocity: l, distance: u, direction: c };
}
function V(e) {
  return Math.sign ? Math.sign(e) : +(e > 0) - +(e < 0) || +e;
}
function Yt(e, t, n) {
  return Math.max(t, Math.min(e, n));
}
function Ft(e, t) {
  return Math.pow(e, t * 5);
}
function q(e, t, n) {
  return t === 0 || Math.abs(t) === 1 / 0 ? Ft(e, n) : e * t * n / (t + n * e);
}
function J(e, t, n, s = 0.15) {
  return s === 0 ? Yt(e, t, n) : e < t ? -q(t - e, n - t, s) + t : e > n ? +q(e - n, n - t, s) + n : e;
}
const T = /* @__PURE__ */ new Map(), Ht = (e) => e;
class Xt {
  constructor(t, n = []) {
    this.controller = t, this.args = n, this.debounced = !0, this.setTimeout = (s, r = 140, ...i) => {
      clearTimeout(this.controller.timeouts[this.stateKey]), this.controller.timeouts[this.stateKey] = window.setTimeout(s, r, ...i);
    }, this.clearTimeout = () => {
      clearTimeout(this.controller.timeouts[this.stateKey]);
    }, this.fireGestureHandler = (s = !1) => {
      if (this.state._blocked)
        return this.debounced || (this.state._active = !1, this.clean()), null;
      if (!s && !this.state.intentional && !this.config.triggerAllEvents)
        return null;
      if (this.state.intentional) {
        const c = this.state.active, u = this.state._active;
        this.state.active = u, this.state.first = u && !c, this.state.last = c && !u, this.controller.state.shared[this.ingKey] = u;
      }
      const r = this.controller.pointerIds.size || this.controller.touchIds.size, i = this.controller.state.shared.buttons > 0 || r > 0, l = {
        ...this.controller.state.shared,
        ...this.state,
        ...this.mapStateValues(this.state),
        locked: !!document.pointerLockElement,
        touches: r,
        down: i
      }, a = this.handler(l);
      return this.state.memo = a !== void 0 ? a : this.state.memo, l;
    }, this.controller = t, this.args = n;
  }
  get config() {
    return this.controller.config[this.stateKey];
  }
  get enabled() {
    return this.controller.config.enabled && this.config.enabled;
  }
  get state() {
    return this.controller.state[this.stateKey];
  }
  get handler() {
    return this.controller.handlers[this.stateKey];
  }
  get transform() {
    return this.config.transform || this.controller.config.transform || Ht;
  }
  updateSharedState(t) {
    Object.assign(this.controller.state.shared, t);
  }
  updateGestureState(t) {
    Object.assign(this.state, t);
  }
  checkIntentionality(t, n) {
    return { _intentional: t, _blocked: !1 };
  }
  getMovement(t) {
    const { rubberband: n, threshold: s } = this.config, {
      _bounds: r,
      _initial: i,
      _active: l,
      _intentional: a,
      lastOffset: c,
      movement: u
    } = this.state, h = this.getInternalMovement(t, this.state), I = this.transform(s).map(Math.abs), k = a[0] === !1 ? Q(h[0], I[0]) : a[0], E = a[1] === !1 ? Q(h[1], I[1]) : a[1], w = this.checkIntentionality([k, E], h);
    if (w._blocked)
      return { ...w, _movement: h, delta: [0, 0] };
    const m = w._intentional, D = h;
    let _ = [
      m[0] !== !1 ? h[0] - m[0] : 0,
      m[1] !== !1 ? h[1] - m[1] : 0
    ];
    const C = R(_, c), $ = l ? n : [0, 0];
    return _ = Z(r, R(_, i), $), {
      ...w,
      intentional: m[0] !== !1 || m[1] !== !1,
      _initial: i,
      _movement: D,
      movement: _,
      values: t,
      offset: Z(r, C, $),
      delta: ft(_, u)
    };
  }
  clean() {
    this.clearTimeout();
  }
}
function Q(e, t) {
  return Math.abs(e) >= t ? V(e) * t : !1;
}
function Z(e, [t, n], [s, r]) {
  const [[i, l], [a, c]] = e;
  return [
    J(t, i, l, s),
    J(n, a, c, r)
  ];
}
function j({ state: e }, t, n) {
  const { timeStamp: s, type: r } = t, i = e.values, l = n ? 0 : s - e.startTime;
  return { _lastEventType: r, event: t, timeStamp: s, elapsedTime: l, previous: i };
}
function qt({ state: e, config: t, stateKey: n, args: s }, r, i) {
  const l = e.offset, a = i.timeStamp, { initial: c, bounds: u } = t, h = {
    ...lt()[n],
    _active: !0,
    args: s,
    values: r,
    initial: r,
    offset: l,
    lastOffset: l,
    startTime: a
  };
  return {
    ...h,
    _initial: X(c, h),
    _bounds: X(u, h)
  };
}
class Jt extends Xt {
  getInternalMovement(t, n) {
    return ft(t, n.initial);
  }
  checkIntentionality(t, n) {
    if (t[0] === !1 && t[1] === !1)
      return { _intentional: t, axis: this.state.axis };
    const [s, r] = n.map(Math.abs), i = this.state.axis || (s > r ? "x" : s < r ? "y" : void 0);
    return !this.config.axis && !this.config.lockDirection ? { _intentional: t, _blocked: !1, axis: i } : i ? this.config.axis && i !== this.config.axis ? { _intentional: t, _blocked: !0, axis: i } : (t[i === "x" ? 1 : 0] = !1, { _intentional: t, _blocked: !1, axis: i }) : { _intentional: [!1, !1], _blocked: !1, axis: i };
  }
  getKinematics(t, n) {
    const s = this.getMovement(t);
    if (!s._blocked) {
      const r = n.timeStamp - this.state.timeStamp;
      Object.assign(s, Wt(s.movement, s.delta, r));
    }
    return s;
  }
  mapStateValues(t) {
    return { xy: t.values, vxvy: t.velocities };
  }
}
const Qt = 3;
function tt(e) {
  "persist" in e && typeof e.persist == "function" && e.persist();
}
class Zt extends Jt {
  constructor() {
    super(...arguments), this.ingKey = "dragging", this.stateKey = "drag", this.setPointerCapture = (t) => {
      if (this.config.useTouch || document.pointerLockElement)
        return;
      const { target: n, pointerId: s } = t;
      n && "setPointerCapture" in n && n.setPointerCapture(s), this.updateGestureState({
        _dragTarget: n,
        _dragPointerId: s
      });
    }, this.releasePointerCapture = () => {
      if (this.config.useTouch || document.pointerLockElement)
        return;
      const { _dragTarget: t, _dragPointerId: n } = this.state;
      if (n && t && "releasePointerCapture" in t && (!("hasPointerCapture" in t) || t.hasPointerCapture(n)))
        try {
          t.releasePointerCapture(n);
        } catch {
        }
    }, this.preventScroll = (t) => {
      this.state._dragPreventScroll && t.cancelable && t.preventDefault();
    }, this.getEventId = (t) => this.config.useTouch ? t.changedTouches[0].identifier : t.pointerId, this.isValidEvent = (t) => this.state._pointerId === this.getEventId(t), this.shouldPreventWindowScrollY = this.config.preventWindowScrollY && this.controller.supportsTouchEvents, this.setUpWindowScrollDetection = (t) => {
      tt(t), Rt(this.controller, this.stateKey, [
        ["touchmove", this.preventScroll],
        ["touchend", this.clean.bind(this)],
        ["touchcancel", this.clean.bind(this)]
      ], { passive: !1 }), this.setTimeout(this.startDrag.bind(this), 250, t);
    }, this.setUpDelayedDragTrigger = (t) => {
      this.state._dragDelayed = !0, tt(t), this.setTimeout(this.startDrag.bind(this), this.config.delay, t);
    }, this.setStartState = (t) => {
      const n = H(t, this.transform);
      this.updateSharedState(F(t)), this.updateGestureState({
        ...qt(this, n, t),
        ...j(this, t, !0),
        _pointerId: this.getEventId(t)
      }), this.updateGestureState(this.getMovement(n));
    }, this.onDragStart = (t) => {
      Kt(this.controller, t), !(!this.enabled || this.state._active) && (this.setStartState(t), this.setPointerCapture(t), this.shouldPreventWindowScrollY ? this.setUpWindowScrollDetection(t) : this.config.delay > 0 ? this.setUpDelayedDragTrigger(t) : this.startDrag(t, !0));
    }, this.onDragChange = (t) => {
      if (this.state.canceled || !this.state._active || !this.isValidEvent(t) || this.state._lastEventType === t.type && t.timeStamp === this.state.timeStamp)
        return;
      let n;
      if (document.pointerLockElement) {
        const { movementX: c, movementY: u } = t;
        n = R(this.transform([c, u]), this.state.values);
      } else
        n = H(t, this.transform);
      const s = this.getKinematics(n, t);
      if (!this.state._dragStarted) {
        if (this.state._dragDelayed) {
          this.startDrag(t);
          return;
        }
        if (this.shouldPreventWindowScrollY)
          if (!this.state._dragPreventScroll && s.axis)
            if (s.axis === "x")
              this.startDrag(t);
            else {
              this.state._active = !1;
              return;
            }
          else
            return;
        else
          return;
      }
      const r = F(t);
      this.updateSharedState(r);
      const i = j(this, t), l = N(s._movement);
      let { _dragIsTap: a } = this.state;
      a && l >= Qt && (a = !1), this.updateGestureState({ ...i, ...s, _dragIsTap: a }), this.fireGestureHandler();
    }, this.onDragEnd = (t) => {
      if (Bt(this.controller, t), !this.isValidEvent(t) || (this.clean(), !this.state._active))
        return;
      this.state._active = !1;
      const n = this.state._dragIsTap, [s, r] = this.state.velocities, [i, l] = this.state.movement, [a, c] = this.state._intentional, [u, h] = this.config.swipeVelocity, [I, k] = this.config.swipeDistance, E = this.config.swipeDuration, w = {
        ...j(this, t),
        ...this.getMovement(this.state.values)
      }, m = [0, 0];
      w.elapsedTime < E && (a !== !1 && Math.abs(s) > u && Math.abs(i) > I && (m[0] = V(s)), c !== !1 && Math.abs(r) > h && Math.abs(l) > k && (m[1] = V(r))), this.updateSharedState({ buttons: 0 }), this.updateGestureState({ ...w, tap: n, swipe: m }), this.fireGestureHandler(this.config.filterTaps && n === !0);
    }, this.clean = () => {
      super.clean(), this.state._dragStarted = !1, this.releasePointerCapture(), jt(this.controller, this.stateKey);
    }, this.onCancel = () => {
      this.state.canceled || (this.updateGestureState({ canceled: !0, _active: !1 }), this.updateSharedState({ buttons: 0 }), vt(this.fireGestureHandler));
    }, this.onClick = (t) => {
      this.state._dragIsTap || t.stopPropagation();
    };
  }
  startDrag(t, n = !1) {
    !this.state._active || this.state._dragStarted || (n || this.setStartState(t), this.updateGestureState({
      _dragStarted: !0,
      _dragPreventScroll: !0,
      cancel: this.onCancel
    }), this.clearTimeout(), this.fireGestureHandler());
  }
  addBindings(t) {
    if (this.config.useTouch ? (y(t, "onTouchStart", this.onDragStart), y(t, "onTouchMove", this.onDragChange), y(t, "onTouchEnd", this.onDragEnd), y(t, "onTouchCancel", this.onDragEnd)) : (y(t, "onPointerDown", this.onDragStart), y(t, "onPointerMove", this.onDragChange), y(t, "onPointerUp", this.onDragEnd), y(t, "onPointerCancel", this.onDragEnd)), this.config.filterTaps) {
      const n = this.controller.config.eventOptions.capture ? "onClick" : "onClickCapture";
      y(t, n, this.onClick);
    }
  }
}
function te(e, t) {
  let n, s = [], r, i = !1;
  function l(...a) {
    return i && n === this && t(a, s) || (r = e.apply(this, a), i = !0, n = this, s = a), r;
  }
  return l;
}
function z(e, t) {
  if (e === t)
    return !0;
  if (e && t && typeof e == "object" && typeof t == "object") {
    if (e.constructor !== t.constructor)
      return !1;
    let n, s, r;
    if (Array.isArray(e)) {
      if (n = e.length, n !== t.length)
        return !1;
      for (s = n; s-- !== 0; )
        if (!z(e[s], t[s]))
          return !1;
      return !0;
    }
    let i;
    if (typeof Map == "function" && e instanceof Map && t instanceof Map) {
      if (e.size !== t.size)
        return !1;
      for (i = e.entries(); !(s = i.next()).done; )
        if (!t.has(s.value[0]))
          return !1;
      for (i = e.entries(); !(s = i.next()).done; )
        if (!z(s.value[1], t.get(s.value[0])))
          return !1;
      return !0;
    }
    if (typeof Set == "function" && e instanceof Set && t instanceof Set) {
      if (e.size !== t.size)
        return !1;
      for (i = e.entries(); !(s = i.next()).done; )
        if (!t.has(s.value[0]))
          return !1;
      return !0;
    }
    if (e.constructor === RegExp)
      return e.source === t.source && e.flags === t.flags;
    if (e.valueOf !== Object.prototype.valueOf)
      return e.valueOf() === t.valueOf();
    if (e.toString !== Object.prototype.toString)
      return e.toString() === t.toString();
    if (r = Object.keys(e), n = r.length, n !== Object.keys(t).length)
      return !1;
    for (s = n; s-- !== 0; )
      if (!Object.prototype.hasOwnProperty.call(t, r[s]))
        return !1;
    if (typeof Element < "u" && e instanceof Element)
      return !1;
    for (s = n; s-- !== 0; )
      if (!(r[s] === "_owner" && e.$$typeof) && !z(e[r[s]], t[r[s]]))
        return !1;
    return !0;
  }
  return e !== e && t !== t;
}
function ee(e, t) {
  try {
    return z(e, t);
  } catch (n) {
    if ((n.message || "").match(/stack|recursion/i))
      return console.warn("react-fast-compare cannot handle circular refs"), !1;
    throw n;
  }
}
function W(e = {}, t) {
  const n = {};
  for (const [s, r] of Object.entries(t))
    switch (typeof r) {
      case "function":
        n[s] = r.call(n, e[s], s, e);
        break;
      case "object":
        n[s] = W(e[s], r);
        break;
      case "boolean":
        r && (n[s] = e[s]);
        break;
    }
  return n;
}
const ne = 180, se = 0.15, re = 0.5, ie = 50, oe = 250, ae = {
  threshold(e = 0) {
    return x(e);
  },
  rubberband(e = 0) {
    switch (e) {
      case !0:
        return x(se);
      case !1:
        return x(0);
      default:
        return x(e);
    }
  },
  enabled(e = !0) {
    return e;
  },
  triggerAllEvents(e = !1) {
    return e;
  },
  initial(e = 0) {
    return typeof e == "function" ? e : x(e);
  },
  transform: !0
}, ht = {
  ...ae,
  axis: !0,
  lockDirection(e = !1) {
    return e;
  },
  bounds(e = {}) {
    if (typeof e == "function")
      return (i) => ht.bounds(e(i));
    const {
      left: t = -1 / 0,
      right: n = 1 / 0,
      top: s = -1 / 0,
      bottom: r = 1 / 0
    } = e;
    return [
      [t, n],
      [s, r]
    ];
  }
}, le = typeof window < "u" && window.document && window.document.createElement, ce = {
  enabled(e = !0) {
    return e;
  },
  domTarget: !0,
  window(e = le ? window : void 0) {
    return e;
  },
  eventOptions({ passive: e = !0, capture: t = !1 } = {}) {
    return { passive: e, capture: t };
  },
  transform: !0
}, ue = {
  ...ht,
  useTouch(e = !0) {
    return e && st();
  },
  preventWindowScrollY(e = !1) {
    return e;
  },
  threshold(e, t, { filterTaps: n = !1, lockDirection: s = !1, axis: r = void 0 }) {
    const i = x(e, n ? 3 : s || r ? 1 : 0);
    return this.filterTaps = n, i;
  },
  swipeVelocity(e = re) {
    return x(e);
  },
  swipeDistance(e = ie) {
    return x(e);
  },
  swipeDuration(e = oe) {
    return e;
  },
  delay(e = 0) {
    switch (e) {
      case !0:
        return ne;
      case !1:
        return 0;
      default:
        return e;
    }
  }
};
function fe(e) {
  return W(e, ce);
}
function he(e = {}) {
  return W(e, ue);
}
function de({
  domTarget: e,
  eventOptions: t,
  window: n,
  enabled: s,
  ...r
}) {
  const i = fe({
    domTarget: e,
    eventOptions: t,
    window: n,
    enabled: s
  });
  return i.drag = he(r), i;
}
function pe(e, t, n = {}) {
  const s = ge(e), r = new Gt(s);
  return r.config = t, r.handlers = e, r.nativeRefs = n, yt() && !t.manual && (nt(r.bind), wt(r.clean)), r;
}
function ge(e) {
  const t = /* @__PURE__ */ new Set();
  return e.drag && t.add(T.get("drag")), e.wheel && t.add(T.get("wheel")), e.scroll && t.add(T.get("scroll")), e.move && t.add(T.get("move")), e.pinch && t.add(T.get("pinch")), e.hover && t.add(T.get("hover")), t;
}
function me(e, t = {}) {
  T.set("drag", Zt);
  const n = et();
  return n.value || (n.value = te(de, ee)), pe({ drag: e }, n.value(t));
}
const ve = { class: "flex flex-col items-center" }, ye = ["viewBox"], we = /* @__PURE__ */ p("defs", null, [
  /* @__PURE__ */ p("filter", {
    id: "shadowButton",
    x: "-50%",
    height: "200%",
    width: "300%"
  }, [
    /* @__PURE__ */ p("feDropShadow", {
      dx: "0",
      dy: "3",
      stdDeviation: "3",
      "flood-color": "#2225"
    })
  ])
], -1), _e = /* @__PURE__ */ p("defs", null, [
  /* @__PURE__ */ p("clipPath", {
    id: "mask",
    clipPathUnits: "objectBoundingBox"
  }, [
    /* @__PURE__ */ p("circle", {
      r: ".5",
      cx: ".5",
      cy: ".5"
    })
  ])
], -1), be = ["transform"], Se = ["innerHTML"], xe = ["x", "y", "viewBox"], Te = ["x", "y", "width", "height"], Ie = { class: "link" }, ke = ["x1", "x2", "y1", "y2", "stroke"], Ee = ["transform"], De = { class: "mouse" }, Ce = ["fill"], Oe = { class: "arrows" }, Pe = { class: "guests" }, Ae = /* @__PURE__ */ _t({
  __name: "SpacePlane",
  props: {
    pad: {
      type: Number,
      default: 50
    },
    coord: {
      type: String,
      default: ""
    }
  },
  emits: ["user", "enter", "leave", "chat", "update:coord"],
  setup(e, { emit: t }) {
    const { user: n } = Ct();
    Ot("deep");
    const {
      space: s,
      plane: r,
      pos: i,
      zoom: l,
      links: a,
      width: c,
      height: u,
      guests: h,
      guestCount: I,
      area: k,
      join: E,
      place: w
    } = Pt({
      TIMEOUT: 1e4
    });
    bt(I, (g, d) => {
      g > d ? t("enter") : t("leave");
    });
    const m = Mt((g) => {
      w({
        x: g[0],
        y: g[1]
      }), t("update:coord", `${g[0]},${g[1]}`);
    }, 200);
    me(
      (g) => {
        if (!(g.delta[0] && g.delta[1]) || C.ing)
          return;
        const [d, G] = g.delta;
        i[0] -= d, i[1] -= G, m(i);
      },
      {
        domTarget: r
      }
    );
    const D = et(), { drauu: _, draw: C, loadCanvas: $ } = $t();
    return nt(() => {
      _.mount(D.value, D.value.parentElement), $();
    }), St(() => {
      _.unmount();
    }), (g, d) => {
      const G = O("space-draw"), dt = O("space-arrow"), pt = O("space-guest"), gt = O("account-home"), mt = O("ui-layer");
      return v(), b("div", ve, [
        !o(s).joined && o(n).is ? (v(), b("div", {
          key: 0,
          class: "text-2xl p-8 top-15vh cursor-pointer absolute rounded-3xl shadow-xl border-4",
          style: xt({ borderColor: o(n).color }),
          onClick: d[0] || (d[0] = (f) => {
            o(E)();
          })
        }, "Click anywhere to join the space", 4)) : Tt("", !0),
        Y(G, { class: "z-500" }),
        (v(), b("svg", {
          class: "h-full w-full z-200 bg-dark-100 bg-opacity-5 cursor-pointer touch-none",
          ref_key: "plane",
          ref: r,
          xmlns: "http://www.w3.org/2000/svg",
          version: "1.1",
          baseProfile: "full",
          "font-family": "Commissioner , sans-serif",
          "text-anchor": "middle",
          "dominant-baseline": "middle",
          viewBox: `${-e.pad + o(i)[0] - o(c) / 2} ${-e.pad + o(i)[1] - o(u) / 2} ${o(c) * o(l) + 2 * e.pad} ${o(u) * o(l) + 2 * e.pad}`,
          onClick: d[2] || (d[2] = (f) => {
            o(n).is || (o(n).auth = !0);
          })
        }, [
          we,
          _e,
          p("text", {
            class: "text-xs",
            "text-anchor": "end",
            transform: `translate(${o(i)[0] + o(c) / 2 - 10} ${o(i)[1] - o(u) / 2 + 20})`
          }, It(o(i)), 9, be),
          (v(!0), b(K, null, B(o(h), (f) => (v(), b("g", {
            class: "opacity-90",
            key: f.draw,
            innerHTML: f.draw
          }, null, 8, Se))), 128)),
          (v(), b("svg", {
            class: kt(["opacity-70", { "pointer-events-none": !o(C).enabled, "touch-none": o(C).enabled }]),
            ref_key: "paper",
            ref: D,
            x: o(i)[0] - o(c) / 2 - e.pad,
            y: o(i)[1] - o(u) / 2 - e.pad,
            viewBox: `${-e.pad + o(i)[0] - o(c) / 2} ${-e.pad + o(i)[1] - o(u) / 2} ${o(c) + 2 * e.pad} ${o(u) + 2 * e.pad}`
          }, null, 10, xe)),
          p("rect", {
            ref_key: "area",
            ref: k,
            x: o(i)[0] - o(c) / 2,
            y: o(i)[1] - o(u) / 2,
            rx: "12",
            width: o(c),
            height: o(u),
            fill: "none",
            stroke: "#3333",
            "stroke-width": "1"
          }, null, 8, Te),
          p("g", Ie, [
            p("line", {
              x1: o(i)[0],
              x2: o(s).my.mouse.x,
              y1: o(i)[1],
              y2: o(s).my.mouse.y,
              stroke: o(n).color,
              "stroke-dasharray": "6"
            }, null, 8, ke)
          ]),
          p("g", {
            class: "pointer",
            transform: `translate(${o(i)[0]} ${o(i)[1]})`
          }, [
            p("g", De, [
              p("circle", {
                style: { filter: "url(#shadowButton)" },
                fill: o(n).color,
                r: "8"
              }, null, 8, Ce)
            ])
          ], 8, Ee),
          p("g", Oe, [
            (v(!0), b(K, null, B(o(a), (f, L) => (v(), U(dt, {
              key: L,
              link: f,
              onUser: d[1] || (d[1] = (A) => o(S).pub = A)
            }, null, 8, ["link"]))), 128))
          ]),
          p("g", Pe, [
            (v(!0), b(K, null, B(o(h), (f) => {
              var L, A;
              return v(), U(pt, Et({
                class: "cursor-pointer transition-all ease-out duration-600",
                key: f
              }, f, {
                style: { transform: `translate(${(L = f == null ? void 0 : f.pos) == null ? void 0 : L.x}px, ${(A = f == null ? void 0 : f.pos) == null ? void 0 : A.y}px)` },
                onClick: (Me) => o(S).pub = f.pub
              }), null, 16, ["style", "onClick"]);
            }), 128))
          ])
        ], 8, ye)),
        Y(mt, {
          class: "z-4000",
          open: !!o(S).pub,
          onClose: d[7] || (d[7] = (f) => o(S).pub = null)
        }, {
          default: Dt(() => [
            (v(), U(gt, {
              class: "max-w-600px",
              key: o(S).pub,
              pub: o(S).pub,
              onUser: d[3] || (d[3] = (f) => g.$emit("user", f)),
              onPost: d[4] || (d[4] = (f) => g.$emit("post", o(Lt)(f))),
              onChat: d[5] || (d[5] = (f) => g.$emit("chat", o(S).pub)),
              onClose: d[6] || (d[6] = (f) => o(S).pub = null)
            }, null, 8, ["pub"]))
          ]),
          _: 1
        }, 8, ["open"])
      ]);
    };
  }
});
export {
  Ae as default
};
//# sourceMappingURL=SpacePlane-5f0e4d55.js.map
