@woven-canvas/vue 0.1.0 → 0.1.1

package/build/index.js

@@ -17003,7 +17003,7 @@ const rP = { key: 0 }, oP = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"],
     return (b, k) => (T(), O("div", {
       ref_key: "containerRef",
       ref: n,
-      class: "ic-arc-arrow"
+      class: "wov-arc-arrow"
     }, [
       (T(), O("svg", dP, [
         f.value && g.value ? (T(), O("path", {
@@ -17049,7 +17049,7 @@ const rP = { key: 0 }, oP = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"],
               d: g.value,
               class: "highlight-overlay",
               fill: "none",
-              style: { "stroke-width": "calc(2px / var(--ic-zoom))" },
+              style: { "stroke-width": "calc(2px / var(--wov-zoom))" },
               "stroke-linecap": "round"
             }, null, 8, pP)) : y.value ? (T(), O("line", {
               key: 1,
@@ -17059,25 +17059,25 @@ const rP = { key: 0 }, oP = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"],
               y2: y.value.y2,
               class: "highlight-overlay",
               fill: "none",
-              style: { "stroke-width": "calc(2px / var(--ic-zoom))" },
+              style: { "stroke-width": "calc(2px / var(--wov-zoom))" },
               "stroke-linecap": "round"
             }, null, 8, mP)) : ne("", !0),
             m.value.startHead !== "none" ? (T(), se(po, {
               key: 2,
               position: m.value.start,
               direction: m.value.startDir,
-              thickness: "calc(2px / var(--ic-zoom))",
+              thickness: "calc(2px / var(--wov-zoom))",
               "arrow-thickness": c.value,
-              color: "var(--ic-highlighted-block-outline-color)",
+              color: "var(--wov-highlighted-block-outline-color)",
               kind: m.value.startHead
             }, null, 8, ["position", "direction", "arrow-thickness", "kind"])) : ne("", !0),
             m.value.endHead !== "none" ? (T(), se(po, {
               key: 3,
               position: m.value.end,
               direction: m.value.endDir,
-              thickness: "calc(2px / var(--ic-zoom))",
+              thickness: "calc(2px / var(--wov-zoom))",
               "arrow-thickness": c.value,
-              color: "var(--ic-highlighted-block-outline-color)",
+              color: "var(--wov-highlighted-block-outline-color)",
               kind: m.value.endHead
             }, null, 8, ["position", "direction", "arrow-thickness", "kind"])) : ne("", !0)
           ], 64)) : ne("", !0)
@@ -17090,17 +17090,17 @@ const rP = { key: 0 }, oP = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"],
   for (const [r, o] of e)
     n[r] = o;
   return n;
-}, yP = /* @__PURE__ */ bs(gP, [["__scopeId", "data-v-1c72b3f0"]]), vP = {}, wP = { class: "ic-arrow-handle" };
+}, yP = /* @__PURE__ */ bs(gP, [["__scopeId", "data-v-bcf5b4f3"]]), vP = {}, wP = { class: "wov-arrow-handle" };
 function bP(t, e) {
   return T(), O("div", wP, [...e[0] || (e[0] = [
-    A("div", { class: "ic-arrow-handle-inner" }, null, -1)
+    A("div", { class: "wov-arrow-handle-inner" }, null, -1)
   ])]);
 }
-const kP = /* @__PURE__ */ bs(vP, [["render", bP]]), SP = {}, xP = { class: "ic-arrow-terminal" };
+const kP = /* @__PURE__ */ bs(vP, [["render", bP]]), SP = {}, xP = { class: "wov-arrow-terminal" };
 function CP(t, e) {
   return T(), O("div", xP, [...e[0] || (e[0] = [
-    A("div", { class: "ic-arrow-terminal-ring" }, [
-      A("div", { class: "ic-arrow-terminal-fill" })
+    A("div", { class: "wov-arrow-terminal-ring" }, [
+      A("div", { class: "wov-arrow-terminal-fill" })
     ], -1)
   ])]);
 }
@@ -17198,7 +17198,7 @@ const EP = /* @__PURE__ */ bs(SP, [["render", CP]]), TP = {
     return (m, g) => (T(), O("div", {
       ref_key: "containerRef",
       ref: n,
-      class: "ic-elbow-arrow"
+      class: "wov-elbow-arrow"
     }, [
       (T(), O("svg", TP, [
         a.value && h.value.length > 0 ? (T(!0), O(De, { key: 0 }, Wt(h.value, (y, v) => (T(), O("line", {
@@ -17209,7 +17209,7 @@ const EP = /* @__PURE__ */ bs(SP, [["render", CP]]), TP = {
           y2: y.end[1],
           class: "highlight-bg",
           fill: "none",
-          style: { "stroke-width": "calc(2px / var(--ic-zoom))", "stroke-dasharray": "calc(12px / var(--ic-zoom))" },
+          style: { "stroke-width": "calc(2px / var(--wov-zoom))", "stroke-dasharray": "calc(12px / var(--wov-zoom))" },
           "stroke-linecap": "round"
         }, null, 8, MP))), 128)) : ne("", !0),
         p.value ? (T(), O(De, { key: 1 }, [
@@ -17251,25 +17251,25 @@ const EP = /* @__PURE__ */ bs(SP, [["render", CP]]), TP = {
               y2: y.end[1],
               class: "highlight-overlay",
               fill: "none",
-              style: { "stroke-width": "calc(2px / var(--ic-zoom))" },
+              style: { "stroke-width": "calc(2px / var(--wov-zoom))" },
               "stroke-linecap": "round"
             }, null, 8, AP))), 128)),
             p.value.startHead !== "none" ? (T(), se(po, {
               key: 0,
               position: p.value.startPos,
               direction: p.value.startDir,
-              thickness: "calc(2px / var(--ic-zoom))",
+              thickness: "calc(2px / var(--wov-zoom))",
               "arrow-thickness": u.value,
-              color: "var(--ic-highlighted-block-outline-color)",
+              color: "var(--wov-highlighted-block-outline-color)",
               kind: p.value.startHead
             }, null, 8, ["position", "direction", "arrow-thickness", "kind"])) : ne("", !0),
             p.value.endHead !== "none" ? (T(), se(po, {
               key: 1,
               position: p.value.endPos,
               direction: p.value.endDir,
-              thickness: "calc(2px / var(--ic-zoom))",
+              thickness: "calc(2px / var(--wov-zoom))",
               "arrow-thickness": u.value,
-              color: "var(--ic-highlighted-block-outline-color)",
+              color: "var(--wov-highlighted-block-outline-color)",
               kind: p.value.endHead
             }, null, 8, ["position", "direction", "arrow-thickness", "kind"])) : ne("", !0)
           ], 64)) : ne("", !0)
@@ -17277,7 +17277,7 @@ const EP = /* @__PURE__ */ bs(SP, [["render", CP]]), TP = {
       ]))
     ], 512));
   }
-}), PP = /* @__PURE__ */ bs(IP, [["__scopeId", "data-v-b8587777"]]);
+}), PP = /* @__PURE__ */ bs(IP, [["__scopeId", "data-v-b2719db1"]]);
 var OP = Object.defineProperty, _f = (t, e) => {
   for (var n in e)
     OP(t, n, { get: e[n], enumerable: !0 });
@@ -17645,7 +17645,7 @@ function nO(t, e = {}) {
 function xd(t, e = {}) {
   return tO(nO(t, e), e);
 }
-const rO = { class: "ic-eraser-stroke" }, oO = { preserveAspectRatio: "none" }, sO = ["d"], iO = "#88888833", aO = /* @__PURE__ */ oe({
+const rO = { class: "wov-eraser-stroke" }, oO = { preserveAspectRatio: "none" }, sO = ["d"], iO = "#88888833", aO = /* @__PURE__ */ oe({
   __name: "Eraser",
   props: {
     entityId: {}
@@ -17716,16 +17716,16 @@ const rO = { class: "ic-eraser-stroke" }, oO = { preserveAspectRatio: "none" },
       ]))
     ]));
   }
-}), lO = { class: "ic-image-block" }, cO = {
+}), lO = { class: "wov-image-block" }, cO = {
   key: 0,
-  class: "ic-image-placeholder"
+  class: "wov-image-placeholder"
 }, uO = {
   key: 1,
-  class: "ic-image-placeholder ic-image-error"
+  class: "wov-image-placeholder wov-image-error"
 }, dO = ["src", "alt"], fO = {
   key: 3,
-  class: "ic-image-upload-overlay"
-}, hO = { class: "ic-image-upload-status" }, pO = /* @__PURE__ */ oe({
+  class: "wov-image-upload-overlay"
+}, hO = { class: "wov-image-upload-status" }, pO = /* @__PURE__ */ oe({
   __name: "ImageBlock",
   props: {
     entityId: {},
@@ -18187,7 +18187,7 @@ const OO = ["data-complete"], DO = { preserveAspectRatio: "none" }, NO = ["d", "
     return (d, f) => {
       var h;
       return T(), O("div", {
-        class: "ic-pen-stroke",
+        class: "wov-pen-stroke",
         "data-complete": ((h = L(n)) == null ? void 0 : h.isComplete) || void 0
       }, [
         (T(), O("svg", DO, [
@@ -18199,8 +18199,8 @@ const OO = ["data-complete"], DO = { preserveAspectRatio: "none" }, NO = ["d", "
         u.value ? (T(), O("svg", BO, [
           A("path", {
             d: i.value,
-            stroke: "var(--ic-highlighted-block-outline-color)",
-            style: { "stroke-width": "calc(1px / var(--ic-zoom))" },
+            stroke: "var(--wov-highlighted-block-outline-color)",
+            style: { "stroke-width": "calc(1px / var(--wov-zoom))" },
             fill: "none",
             "stroke-linecap": "round",
             "stroke-linejoin": "round"
@@ -18209,7 +18209,7 @@ const OO = ["data-complete"], DO = { preserveAspectRatio: "none" }, NO = ["d", "
       ], 8, OO);
     };
   }
-}), $O = /* @__PURE__ */ bs(zO, [["__scopeId", "data-v-d1b5e99c"]]);
+}), $O = /* @__PURE__ */ bs(zO, [["__scopeId", "data-v-9b41c649"]]);
 function en() {
   const t = At(fr);
   if (!t)
@@ -32884,7 +32884,7 @@ function Dz(t, e, n) {
   return { width: t / r - s * o / r, height: s };
 }
 function ah(t, e, n) {
-  const r = t.closest(".ic-block");
+  const r = t.closest(".wov-block");
   if (!r) {
     const C = t.getBoundingClientRect();
     return { width: C.width, height: C.height, left: 0, top: 0 };
@@ -33199,7 +33199,7 @@ function Vz(t, e) {
 }
 function gg(t) {
   const e = document.querySelector(`[data-entity-id="${t}"]`);
-  return e ? e.querySelector(".ic-editable-text") : null;
+  return e ? e.querySelector(".wov-editable-text") : null;
 }
 function yg(t, e, n, r) {
   var a;
@@ -33668,7 +33668,7 @@ const Kz = { key: 1 }, Yz = ["innerHTML"], ch = /* @__PURE__ */ oe({
     }), (w, C) => (T(), O("div", {
       ref_key: "editableTextRef",
       ref: u,
-      class: "ic-editable-text",
+      class: "wov-editable-text",
       style: ot(y.value),
       onKeydown: v,
       onPointerdown: b,
@@ -33687,7 +33687,7 @@ const Kz = { key: 1 }, Yz = ["innerHTML"], ch = /* @__PURE__ */ oe({
     ], 36));
   }
 }), qz = {
-  class: "ic-shape-svg",
+  class: "wov-shape-svg",
   viewBox: "0 0 100 100",
   preserveAspectRatio: "none"
 }, Jz = ["d", "fill", "stroke", "stroke-width", "stroke-dasharray"], Xz = /* @__PURE__ */ oe({
@@ -33747,7 +33747,7 @@ const Kz = { key: 1 }, Yz = ["innerHTML"], ch = /* @__PURE__ */ oe({
     return (m, g) => (T(), O("div", {
       ref_key: "containerRef",
       ref: o,
-      class: "ic-shape-block"
+      class: "wov-shape-block"
     }, [
       (T(), O("svg", qz, [
         A("path", {
@@ -33762,7 +33762,7 @@ const Kz = { key: 1 }, Yz = ["innerHTML"], ch = /* @__PURE__ */ oe({
         }, null, 8, Jz)
       ])),
       A("div", {
-        class: "ic-shape-content",
+        class: "wov-shape-content",
         style: ot(f.value)
       }, [
         he(ch, Nt(e, {
@@ -33796,7 +33796,7 @@ const Kz = { key: 1 }, Yz = ["innerHTML"], ch = /* @__PURE__ */ oe({
     return (i, a) => (T(), O("div", {
       ref_key: "containerRef",
       ref: n,
-      class: "ic-text-block",
+      class: "wov-text-block",
       "data-text-empty": o.value || void 0
     }, [
       he(ch, Nt(e, {
@@ -34893,7 +34893,7 @@ const j$ = ["menu-open"], Ar = /* @__PURE__ */ oe({
       A("div", {
         ref_key: "buttonRef",
         ref: l,
-        class: Qt(["ic-menu-dropdown-trigger", { "is-open": a.value }]),
+        class: Qt(["wov-menu-dropdown-trigger", { "is-open": a.value }]),
         "menu-open": a.value || void 0,
         onMousedown: y[0] || (y[0] = Eo(() => {
         }, ["prevent"])),
@@ -34911,7 +34911,7 @@ const j$ = ["menu-open"], Ar = /* @__PURE__ */ oe({
           key: 0,
           ref_key: "dropdownRef",
           ref: c,
-          class: "ic-menu-dropdown",
+          class: "wov-menu-dropdown",
           style: ot(L(u))
         }, [
           Ue(g.$slots, "dropdown", { close: f })
@@ -34922,14 +34922,14 @@ const j$ = ["menu-open"], Ar = /* @__PURE__ */ oe({
 }), Z$ = {}, K$ = {
   viewBox: "0 0 512 320",
   fill: "currentColor",
-  style: { width: "7px", color: "var(--ic-gray-300)" }
+  style: { width: "7px", color: "var(--wov-gray-300)" }
 };
 function Y$(t, e) {
   return T(), O("svg", K$, [...e[0] || (e[0] = [
     A("path", { d: "M233.4 278.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 210.7 86.6 41.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" }, null, -1)
   ])]);
 }
-const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-button" }, J$ = ["innerHTML"], X$ = ["onClick"], G$ = ["innerHTML"], _g = /* @__PURE__ */ oe({
+const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "wov-menu-button" }, J$ = ["innerHTML"], X$ = ["onClick"], G$ = ["innerHTML"], _g = /* @__PURE__ */ oe({
   __name: "ArrowHeadButton",
   props: {
     entityIds: {},
@@ -34996,13 +34996,13 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
             fill: "none",
             innerHTML: i(o.value)
           }, null, 8, J$)),
-          he(Ir, { class: "ic-chevron-down" })
+          he(Ir, { class: "wov-chevron-down" })
         ])
       ]),
       dropdown: ke(() => [
         (T(!0), O(De, null, Wt(L(av), (c) => (T(), O("button", {
           key: c.kind,
-          class: Qt(["ic-menu-option", { "is-active": r.value === c.kind }]),
+          class: Qt(["wov-menu-option", { "is-active": r.value === c.kind }]),
           onClick: (u) => s(c.kind)
         }, [
           (T(), O("svg", {
@@ -35018,7 +35018,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
       _: 1
     }, 8, ["title"]));
   }
-}), Q$ = { class: "ic-menu-button" }, e4 = ["onClick"], t4 = /* @__PURE__ */ oe({
+}), Q$ = { class: "wov-menu-button" }, e4 = ["onClick"], t4 = /* @__PURE__ */ oe({
   __name: "ArrowThicknessButton",
   props: {
     entityIds: {}
@@ -35098,13 +35098,13 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
               "stroke-width": "4"
             })
           ], -1)),
-          he(Ir, { class: "ic-chevron-down" })
+          he(Ir, { class: "wov-chevron-down" })
         ])
       ]),
       dropdown: ke(() => [
         (T(), O(De, null, Wt(e, (l) => A("button", {
           key: l.value,
-          class: Qt(["ic-menu-option ic-arrow-thickness-option", { "is-active": o.value === l.value }]),
+          class: Qt(["wov-menu-option wov-arrow-thickness-option", { "is-active": o.value === l.value }]),
           onClick: (c) => s(l.value)
         }, Xt(l.label), 11, e4)), 64))
       ]),
@@ -35156,8 +35156,8 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
       }
     }
     return (u, d) => (T(), O("input", {
-      id: "ic-color-input",
-      class: "ic-color-input",
+      id: "wov-color-input",
+      class: "wov-color-input",
       type: "text",
       size: "1",
       "aria-label": "Hex color value",
@@ -35198,16 +35198,16 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
     return e({ isDragging: s }), (c, u) => (T(), O("div", {
       ref_key: "sliderRef",
       ref: o,
-      class: "ic-color-slider",
+      class: "wov-color-slider",
       onPointerdown: Eo(i, ["prevent"])
     }, [
       t.background ? (T(), O("div", {
         key: 0,
-        class: "ic-color-slider-gradient",
+        class: "wov-color-slider-gradient",
         style: ot({ background: t.background })
       }, null, 4)) : ne("", !0),
       A("div", {
-        class: "ic-color-slider-thumb",
+        class: "wov-color-slider-thumb",
         style: ot({
           top: `${t.modelValue}%`,
           backgroundColor: t.thumbColor
@@ -35215,7 +35215,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
       }, null, 4)
     ], 544));
   }
-}), o4 = { class: "ic-color-picker" }, s4 = { class: "ic-color-picker-area" }, i4 = { class: "ic-color-picker-selector-gradient" }, a4 = "linear-gradient(to bottom, red 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%)", l4 = /* @__PURE__ */ oe({
+}), o4 = { class: "wov-color-picker" }, s4 = { class: "wov-color-picker-area" }, i4 = { class: "wov-color-picker-selector-gradient" }, a4 = "linear-gradient(to bottom, red 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%)", l4 = /* @__PURE__ */ oe({
   __name: "ColorPicker",
   props: {
     modelValue: {},
@@ -35292,13 +35292,13 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
         A("div", {
           ref_key: "selectorRef",
           ref: i,
-          class: "ic-color-picker-selector",
+          class: "wov-color-picker-selector",
           style: ot({ backgroundColor: h.value }),
           onPointerdown: Eo(b, ["prevent"])
         }, [
           A("div", i4, [
             A("div", {
-              class: "ic-color-picker-selector-thumb",
+              class: "wov-color-picker-selector-thumb",
               style: ot({
                 left: `${a.value.x}%`,
                 top: `${a.value.y}%`,
@@ -35323,14 +35323,14 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
           "onUpdate:modelValue": E[1] || (E[1] = (D) => c.value = D),
           thumbColor: p.value,
           background: g.value,
-          class: "ic-color-picker-opacity"
+          class: "wov-color-picker-opacity"
         }, null, 8, ["modelValue", "thumbColor", "background"])) : ne("", !0)
       ])
     ]));
   }
-}), c4 = { class: "ic-color-bubbles-container" }, u4 = {
+}), c4 = { class: "wov-color-bubbles-container" }, u4 = {
   key: 1,
-  class: "ic-color-bubbles"
+  class: "wov-color-bubbles"
 }, d4 = ["onClick"], Wc = /* @__PURE__ */ oe({
   __name: "ColorBubbles",
   props: {
@@ -35398,7 +35398,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
       }, null, 8, ["modelValue", "withOpacity"])) : (T(), O("div", u4, [
         (T(!0), O(De, null, Wt(s.value, (g) => (T(), O("div", {
           key: g,
-          class: Qt(["ic-color-bubble", { selected: c(g) }]),
+          class: Qt(["wov-color-bubble", { selected: c(g) }]),
           style: ot({ backgroundColor: g }),
           onMousedown: m[1] || (m[1] = Eo(() => {
           }, ["prevent"])),
@@ -35406,7 +35406,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
         }, null, 46, d4))), 128)),
         t.withPicker ? (T(), O("div", {
           key: 0,
-          class: Qt(["ic-color-bubble ic-rainbow-bubble", { selected: u() }]),
+          class: Qt(["wov-color-bubble wov-rainbow-bubble", { selected: u() }]),
           onMousedown: m[2] || (m[2] = Eo(() => {
           }, ["prevent"])),
           onClick: f
@@ -35414,7 +35414,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
       ]))
     ]));
   }
-}), f4 = { class: "ic-color-button" }, h4 = /* @__PURE__ */ oe({
+}), f4 = { class: "wov-color-button" }, h4 = /* @__PURE__ */ oe({
   __name: "ColorButton",
   props: {
     entityIds: {}
@@ -35449,10 +35449,10 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
       button: ke(() => [
         A("div", f4, [
           A("div", {
-            class: "ic-color-swatch",
+            class: "wov-color-swatch",
             style: ot(a.value)
           }, null, 4),
-          he(Ir, { class: "ic-chevron-down" })
+          he(Ir, { class: "wov-chevron-down" })
         ])
       ]),
       dropdown: ke(() => [
@@ -35486,7 +35486,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
     return (u, d) => (T(), O("button", {
       ref_key: "buttonRef",
       ref: o,
-      class: "ic-menu-button",
+      class: "wov-menu-button",
       onClick: a,
       onMouseenter: l,
       onMouseleave: c
@@ -35515,7 +35515,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
       key: 0,
       to: L(r)
     }, [
-      he(Yd, { name: "ic-tooltip-fade" }, {
+      he(Yd, { name: "wov-tooltip-fade" }, {
         default: ke(() => {
           var u;
           return [
@@ -35523,7 +35523,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
               key: 0,
               ref_key: "tooltipRef",
               ref: o,
-              class: "ic-menu-tooltip",
+              class: "wov-menu-tooltip",
               style: ot(L(i))
             }, Xt((u = L(e)) == null ? void 0 : u.text), 5)) : ne("", !0)
           ];
@@ -35532,7 +35532,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
       })
     ], 8, ["to"])) : ne("", !0);
   }
-}), p4 = { class: "ic-menu-button" }, m4 = ["onClick"], g4 = /* @__PURE__ */ oe({
+}), p4 = { class: "wov-menu-button" }, m4 = ["onClick"], g4 = /* @__PURE__ */ oe({
   __name: "PenStrokeThicknessButton",
   props: {
     entityIds: {}
@@ -35595,22 +35595,22 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
               "stroke-width": "4"
             })
           ], -1)),
-          he(Ir, { class: "ic-chevron-down" })
+          he(Ir, { class: "wov-chevron-down" })
         ])
       ]),
       dropdown: ke(() => [
         (T(), O(De, null, Wt(e, (c) => A("button", {
           key: c.value,
-          class: Qt(["ic-menu-option ic-pen-thickness-option", { "is-active": s.value === c.value }]),
+          class: Qt(["wov-menu-option wov-pen-thickness-option", { "is-active": s.value === c.value }]),
           onClick: (u) => i(c.value)
         }, Xt(c.label), 11, m4)), 64))
       ]),
       _: 1
     }));
   }
-}), y4 = { class: "ic-fill-color-button" }, v4 = { class: "ic-fill-dropdown" }, w4 = {
+}), y4 = { class: "wov-fill-color-button" }, v4 = { class: "wov-fill-dropdown" }, w4 = {
   key: 0,
-  class: "ic-fill-mode-section"
+  class: "wov-fill-mode-section"
 }, b4 = ["title", "onClick"], k4 = {
   viewBox: "0 0 24 24",
   fill: "none"
@@ -35672,7 +35672,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
         A("div", y4, [
           p[1] || (p[1] = A("svg", {
             viewBox: "0 0 20 20",
-            class: "ic-fill-color-icon",
+            class: "wov-fill-color-icon",
             stroke: "currentColor",
             fill: "none",
             "stroke-linecap": "round",
@@ -35687,7 +35687,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
               "stroke-width": "1.25"
             })
           ], -1)),
-          he(Ir, { class: "ic-chevron-down" })
+          he(Ir, { class: "wov-chevron-down" })
         ])
       ]),
       dropdown: ke(() => [
@@ -35695,7 +35695,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
           f.value ? ne("", !0) : (T(), O("div", w4, [
             (T(), O(De, null, Wt(o, (m) => A("button", {
               key: m.mode,
-              class: Qt(["ic-fill-mode-option", {
+              class: Qt(["wov-fill-mode-option", {
                 "is-active": !i.value && m.mode === s.value
               }]),
               title: m.label,
@@ -35731,9 +35731,9 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
       _: 1
     }));
   }
-}), C4 = { class: "ic-shape-kind-button" }, E4 = { class: "ic-shape-kind-dropdown" }, T4 = ["onClick"], M4 = {
+}), C4 = { class: "wov-shape-kind-button" }, E4 = { class: "wov-shape-kind-dropdown" }, T4 = ["onClick"], M4 = {
   viewBox: "0 0 20 20",
-  class: "ic-shape-option-icon",
+  class: "wov-shape-option-icon",
   fill: "none",
   stroke: "currentColor",
   "stroke-width": "4"
@@ -35770,7 +35770,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
         A("div", C4, [
           c[0] || (c[0] = A("svg", {
             viewBox: "0 0 20 20",
-            class: "ic-shape-kind-icon",
+            class: "wov-shape-kind-icon",
             fill: "none",
             stroke: "currentColor",
             "stroke-width": "1.5"
@@ -35785,17 +35785,17 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
               y: "6",
               width: "10",
               height: "10",
-              fill: "var(--ic-gray-600)"
+              fill: "var(--wov-gray-600)"
             })
           ], -1)),
-          he(Ir, { class: "ic-chevron-down" })
+          he(Ir, { class: "wov-chevron-down" })
         ])
       ]),
       dropdown: ke(() => [
         A("div", E4, [
           (T(!0), O(De, null, Wt(i.value, (u) => (T(), O("button", {
             key: u.kind,
-            class: Qt(["ic-shape-kind-option", {
+            class: Qt(["wov-shape-kind-option", {
               "is-selected": !s.value && u.kind === o.value
             }]),
             onClick: (d) => a(u.kind)
@@ -35813,7 +35813,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
       _: 1
     }));
   }
-}), I4 = { class: "ic-stroke-style-section" }, P4 = ["title", "onClick"], O4 = {
+}), I4 = { class: "wov-stroke-style-section" }, P4 = ["title", "onClick"], O4 = {
   viewBox: "0 0 24 8",
   fill: "none",
   stroke: "currentColor",
@@ -35848,7 +35848,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
     return (i, a) => (T(), O("div", I4, [
       (T(), O(De, null, Wt(r, (l) => A("button", {
         key: l.kind,
-        class: Qt(["ic-stroke-style-option", {
+        class: Qt(["wov-stroke-style-option", {
           "is-active": !t.hasMultipleStyles && l.kind === t.currentStyle
         }]),
         title: l.label,
@@ -35869,9 +35869,9 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
       ], 10, P4)), 64))
     ]));
   }
-}), B4 = { class: "ic-stroke-color-button" }, R4 = { class: "ic-stroke-dropdown" }, z4 = {
+}), B4 = { class: "wov-stroke-color-button" }, R4 = { class: "wov-stroke-dropdown" }, z4 = {
   key: 1,
-  class: "ic-stroke-divider"
+  class: "wov-stroke-divider"
 }, $4 = /* @__PURE__ */ oe({
   __name: "ShapeStrokeColorButton",
   props: {
@@ -35921,7 +35921,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
         A("div", B4, [
           h[1] || (h[1] = A("svg", {
             viewBox: "0 0 20 20",
-            class: "ic-stroke-color-icon",
+            class: "wov-stroke-color-icon",
             fill: "none",
             stroke: "currentColor",
             "stroke-linecap": "round",
@@ -35932,7 +35932,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
               "stroke-width": "1.25"
             })
           ], -1)),
-          he(Ir, { class: "ic-chevron-down" })
+          he(Ir, { class: "wov-chevron-down" })
         ])
       ]),
       dropdown: ke(() => [
@@ -36021,7 +36021,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
     return (o, s) => L(n).showTextMenuButtons ? (T(), se(Ea, {
       key: 0,
       title: "Bold",
-      class: Qt({ "ic-active": L(n).isBold }),
+      class: Qt({ "wov-active": L(n).isBold }),
       onClick: L(r).toggleBold
     }, {
       default: ke(() => [...s[0] || (s[0] = [
@@ -36036,7 +36036,7 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
       _: 1
     }, 8, ["class", "onClick"])) : ne("", !0);
   }
-}), j4 = { class: "ic-text-color-button" }, Z4 = { class: "ic-text-icon-container" }, K4 = /* @__PURE__ */ oe({
+}), j4 = { class: "wov-text-color-button" }, Z4 = { class: "wov-text-icon-container" }, K4 = /* @__PURE__ */ oe({
   __name: "TextColorButton",
   props: {
     entityIds: {}
@@ -36057,16 +36057,16 @@ const Ir = /* @__PURE__ */ bs(Z$, [["render", Y$]]), q$ = { class: "ic-menu-butt
               xmlns: "http://www.w3.org/2000/svg",
               viewBox: "0 0 640 640",
               fill: "currentColor",
-              class: "ic-text-icon"
+              class: "wov-text-icon"
             }, [
               A("path", { d: "M349.1 114.7C343.9 103.3 332.5 96 320 96C307.5 96 296.1 103.3 290.9 114.7L123.5 480L112 480C94.3 480 80 494.3 80 512C80 529.7 94.3 544 112 544L200 544C217.7 544 232 529.7 232 512C232 494.3 217.7 480 200 480L193.9 480L215.9 432L424.2 432L446.2 480L440.1 480C422.4 480 408.1 494.3 408.1 512C408.1 529.7 422.4 544 440.1 544L528.1 544C545.8 544 560.1 529.7 560.1 512C560.1 494.3 545.8 480 528.1 480L516.6 480L349.2 114.7zM394.8 368L245.2 368L320 204.8L394.8 368z" })
             ], -1)),
             A("div", {
-              class: "ic-color-underline",
+              class: "wov-color-underline",
               style: ot(s.value)
             }, null, 4)
           ]),
-          he(Ir, { class: "ic-chevron-down" })
+          he(Ir, { class: "wov-chevron-down" })
         ])
       ]),
       dropdown: ke(() => [
@@ -36089,7 +36089,7 @@ function Y4() {
     return e ? e.fonts.filter((n) => n.selectable) : [];
   });
 }
-const q4 = { class: "ic-font-family-button" }, J4 = { class: "ic-font-family-label" }, X4 = { class: "ic-font-list" }, G4 = ["onClick"], Q4 = ["src", "alt"], eL = /* @__PURE__ */ oe({
+const q4 = { class: "wov-font-family-button" }, J4 = { class: "wov-font-family-label" }, X4 = { class: "wov-font-list" }, G4 = ["onClick"], Q4 = ["src", "alt"], eL = /* @__PURE__ */ oe({
   __name: "TextFontFamilyButton",
   props: {
     entityIds: {}
@@ -36118,12 +36118,12 @@ const q4 = { class: "ic-font-family-button" }, J4 = { class: "ic-font-family-lab
       button: ke(() => [
         A("div", q4, [
           A("span", J4, Xt(a.value), 1),
-          he(Ir, { class: "ic-chevron-down" })
+          he(Ir, { class: "wov-chevron-down" })
         ])
       ]),
       dropdown: ke(() => [
         A("div", {
-          class: "ic-font-family-menu",
+          class: "wov-font-family-menu",
           onWheel: c,
           onClick: d[0] || (d[0] = Eo(() => {
           }, ["stop"]))
@@ -36131,17 +36131,17 @@ const q4 = { class: "ic-font-family-button" }, J4 = { class: "ic-font-family-lab
           A("div", X4, [
             (T(!0), O(De, null, Wt(s.value, (f) => (T(), O("div", {
               key: f.name,
-              class: Qt(["ic-font-item", { active: i.value === f.name }]),
+              class: Qt(["wov-font-item", { active: i.value === f.name }]),
               onClick: (h) => l(f.name)
             }, [
               f.previewImage ? (T(), O("img", {
                 key: 0,
-                class: "ic-font-preview",
+                class: "wov-font-preview",
                 src: f.previewImage,
                 alt: f.name
               }, null, 8, Q4)) : (T(), O("span", {
                 key: 1,
-                class: "ic-font-name",
+                class: "wov-font-name",
                 style: ot({ fontFamily: f.name })
               }, Xt(f.displayName), 5))
             ], 10, G4))), 128))
@@ -36151,13 +36151,13 @@ const q4 = { class: "ic-font-family-button" }, J4 = { class: "ic-font-family-lab
       _: 1
     })) : ne("", !0);
   }
-}), tL = { class: "ic-font-size-button" }, nL = { class: "ic-font-size-label" }, rL = ["onClick"], oL = {
+}), tL = { class: "wov-font-size-button" }, nL = { class: "wov-font-size-label" }, rL = ["onClick"], oL = {
   key: 0,
-  class: "ic-check-icon",
+  class: "wov-check-icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 448 512",
   fill: "currentColor"
-}, sL = { class: "ic-input-container" }, iL = ["value"], aL = /* @__PURE__ */ oe({
+}, sL = { class: "wov-input-container" }, iL = ["value"], aL = /* @__PURE__ */ oe({
   __name: "TextFontSizeButton",
   props: {
     entityIds: {}
@@ -36197,39 +36197,39 @@ const q4 = { class: "ic-font-family-button" }, J4 = { class: "ic-font-family-lab
       button: ke(() => [
         A("div", tL, [
           A("span", nL, Xt(i.value), 1),
-          he(Ir, { class: "ic-chevron-down" })
+          he(Ir, { class: "wov-chevron-down" })
         ])
       ]),
       dropdown: ke(() => [
         A("div", {
-          class: "ic-font-size-menu",
+          class: "wov-font-size-menu",
           onWheel: d,
           onClick: h[0] || (h[0] = Eo(() => {
           }, ["stop"]))
         }, [
           (T(), O(De, null, Wt(o, (p) => A("div", {
             key: p.value,
-            class: Qt(["ic-font-size-option", { active: s.value === p.value }]),
+            class: Qt(["wov-font-size-option", { active: s.value === p.value }]),
             onClick: (m) => l(p.value)
           }, [
             s.value === p.value ? (T(), O("svg", oL, [...h[1] || (h[1] = [
               A("path", { d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }, null, -1)
             ])])) : ne("", !0),
             A("span", {
-              class: "ic-option-label",
+              class: "wov-option-label",
               style: ot({ fontSize: `${p.displayValue}px` })
             }, Xt(p.label), 5)
           ], 10, rL)), 64)),
-          h[3] || (h[3] = A("div", { class: "ic-separator" }, null, -1)),
+          h[3] || (h[3] = A("div", { class: "wov-separator" }, null, -1)),
           A("div", sL, [
             A("input", {
-              class: "ic-custom-input",
+              class: "wov-custom-input",
               value: a.value,
               onInput: c,
               onKeydown: u,
               placeholder: "Custom size"
             }, null, 40, iL),
-            h[2] || (h[2] = A("span", { class: "ic-px-suffix" }, "px", -1))
+            h[2] || (h[2] = A("span", { class: "wov-px-suffix" }, "px", -1))
           ])
         ], 32)
       ]),
@@ -36246,7 +36246,7 @@ const q4 = { class: "ic-font-family-button" }, J4 = { class: "ic-font-family-lab
     return (o, s) => L(n).showTextMenuButtons ? (T(), se(Ea, {
       key: 0,
       title: "Italic",
-      class: Qt({ "ic-active": L(n).isItalic }),
+      class: Qt({ "wov-active": L(n).isItalic }),
       onClick: L(r).toggleItalic
     }, {
       default: ke(() => [...s[0] || (s[0] = [
@@ -36271,7 +36271,7 @@ const q4 = { class: "ic-font-family-button" }, J4 = { class: "ic-font-family-lab
     return (o, s) => L(n).showTextMenuButtons ? (T(), se(Ea, {
       key: 0,
       title: "Underline",
-      class: Qt({ "ic-active": L(n).isUnderline }),
+      class: Qt({ "wov-active": L(n).isUnderline }),
       onClick: L(r).toggleUnderline
     }, {
       default: ke(() => [...s[0] || (s[0] = [
@@ -36620,7 +36620,7 @@ const fL = {
     return bn(() => {
       n();
     }), (c, u) => (T(), O("div", {
-      class: "ic-floating-menu-bar",
+      class: "wov-floating-menu-bar",
       onMouseleave: l
     }, [
       (T(!0), O(De, null, Wt(a.value, (d) => Ue(c.$slots, `button:${d}`, {
@@ -36672,14 +36672,14 @@ const fL = {
           he(aL, { entityIds: L(o) }, null, 8, ["entityIds"]),
           u[0] || (u[0] = A("div", {
             divider: "",
-            class: "ic-divider"
+            class: "wov-divider"
           }, null, -1)),
           he(U4, { entityIds: L(o) }, null, 8, ["entityIds"]),
           he(lL, { entityIds: L(o) }, null, 8, ["entityIds"]),
           he(cL, { entityIds: L(o) }, null, 8, ["entityIds"]),
           u[1] || (u[1] = A("div", {
             divider: "",
-            class: "ic-divider"
+            class: "wov-divider"
           }, null, -1)),
           he(K4, { entityIds: L(o) }, null, 8, ["entityIds"]),
           he(H4, { entityIds: L(o) }, null, 8, ["entityIds"]),
@@ -36692,7 +36692,7 @@ const fL = {
       he(cb)
     ], 32));
   }
-}), yL = { class: "ic-floating-menu-inner" }, vL = /* @__PURE__ */ oe({
+}), yL = { class: "wov-floating-menu-inner" }, vL = /* @__PURE__ */ oe({
   __name: "FloatingMenu",
   setup(t) {
     const e = At(fr), n = Oz([_, It]), r = ln(Se), o = ln(Gt), s = ln(lr), i = Bc(), a = I(
@@ -36765,13 +36765,13 @@ const fL = {
     ], y = I(
       () => n.value.length > 0 && !m.value && !g.includes(s.value.state)
     );
-    return (v, b) => (T(), se(Yd, { name: "ic-fade" }, {
+    return (v, b) => (T(), se(Yd, { name: "wov-fade" }, {
       default: ke(() => [
         y.value ? (T(), O("div", {
           key: 0,
           ref_key: "floatingRef",
           ref: h,
-          class: "ic-floating-menu",
+          class: "wov-floating-menu",
           style: ot(L(p))
         }, [
           A("div", yL, [
@@ -36786,8 +36786,8 @@ const fL = {
   }
 }), wL = {
   key: 0,
-  class: "ic-loading-overlay"
-}, bL = { class: "ic-loading-spinner" }, kL = /* @__PURE__ */ oe({
+  class: "wov-loading-overlay"
+}, bL = { class: "wov-loading-spinner" }, kL = /* @__PURE__ */ oe({
   __name: "LoadingOverlay",
   props: {
     isLoading: { type: Boolean }
@@ -36802,7 +36802,7 @@ const fL = {
       }, 100);
     }), bn(() => {
       r !== null && clearInterval(r);
-    }), (o, s) => (T(), se(Yd, { name: "ic-loading-fade" }, {
+    }), (o, s) => (T(), se(Yd, { name: "wov-loading-fade" }, {
       default: ke(() => [
         t.isLoading ? (T(), O("div", wL, [
           A("div", bL, Xt(e.value), 1)
@@ -36845,7 +36845,7 @@ const fL = {
     return (h, p) => (T(), O("button", {
       ref_key: "buttonRef",
       ref: o,
-      class: Qt(["ic-toolbar-button", { selected: a.value }]),
+      class: Qt(["wov-toolbar-button", { selected: a.value }]),
       onClick: l,
       onPointerdown: c,
       onPointerup: u,
@@ -37227,7 +37227,7 @@ const fL = {
       A("button", {
         ref_key: "buttonRef",
         ref: i,
-        class: "ic-toolbar-button",
+        class: "wov-toolbar-button",
         onClick: l,
         onMouseenter: d,
         onMouseleave: f
@@ -37269,7 +37269,7 @@ const fL = {
       }, null, 544)
     ], 64));
   }
-}), RL = { class: "ic-toolbar-container" }, zL = /* @__PURE__ */ oe({
+}), RL = { class: "wov-toolbar-container" }, zL = /* @__PURE__ */ oe({
   __name: "Toolbar",
   setup(t) {
     const e = Bg(), { reset: n } = Es(), { nextEditorTick: r } = en(), o = re(null), s = re(null), i = ln(pt), a = I(() => i.value.leftMouseTool);
@@ -37303,7 +37303,7 @@ const fL = {
       onToolPointerUp: d
     }), (p, m) => (T(), O("div", RL, [
       A("div", {
-        class: "ic-toolbar",
+        class: "wov-toolbar",
         onMouseleave: f
       }, [
         L(e).default ? Ue(p.$slots, "default", { key: 0 }) : (T(), O(De, { key: 1 }, [
@@ -37450,7 +37450,7 @@ function WL(t, e, n = {}) {
     }
   } : m;
 }
-const HL = { class: "ic-user-presence-avatars" }, UL = ["src", "alt"], jL = { class: "ic-user-presence-list" }, ZL = ["src", "alt"], KL = { class: "ic-user-presence-name" }, YL = 4, qL = /* @__PURE__ */ oe({
+const HL = { class: "wov-user-presence-avatars" }, UL = ["src", "alt"], jL = { class: "wov-user-presence-list" }, ZL = ["src", "alt"], KL = { class: "wov-user-presence-name" }, YL = 4, qL = /* @__PURE__ */ oe({
   __name: "UserPresence",
   props: {
     users: {}
@@ -37478,23 +37478,23 @@ const HL = { class: "ic-user-presence-avatars" }, UL = ["src", "alt"], jL = { cl
       key: 0,
       ref_key: "containerRef",
       ref: r,
-      class: "ic-user-presence"
+      class: "wov-user-presence"
     }, [
       A("button", {
-        class: Qt(["ic-user-presence-trigger", { "is-open": n.value }]),
+        class: Qt(["wov-user-presence-trigger", { "is-open": n.value }]),
         onClick: l[0] || (l[0] = (c) => n.value = !n.value)
       }, [
         A("div", HL, [
           (T(!0), O(De, null, Wt(i.value, (c) => (T(), O("div", {
             key: c.sessionId,
-            class: "ic-user-avatar",
+            class: "wov-user-avatar",
             style: ot({ backgroundColor: c.avatar ? "transparent" : c.color })
           }, [
             c.avatar ? (T(), O("img", {
               key: 0,
               src: c.avatar,
               alt: c.name,
-              class: "ic-user-avatar-img"
+              class: "wov-user-avatar-img"
             }, null, 8, UL)) : (T(), O(De, { key: 1 }, [
               $u(Xt(c.initials), 1)
             ], 64))
@@ -37503,17 +37503,17 @@ const HL = { class: "ic-user-presence-avatars" }, UL = ["src", "alt"], jL = { cl
       ], 2),
       n.value ? (T(), O("div", {
         key: 0,
-        class: "ic-user-presence-dropdown",
+        class: "wov-user-presence-dropdown",
         onWheel: l[1] || (l[1] = Eo(() => {
         }, ["stop"]))
       }, [
         A("div", jL, [
           (T(!0), O(De, null, Wt(s.value, (c) => (T(), O("div", {
             key: c.sessionId,
-            class: "ic-user-presence-item"
+            class: "wov-user-presence-item"
           }, [
             A("div", {
-              class: "ic-user-avatar ic-user-avatar-small",
+              class: "wov-user-avatar wov-user-avatar-small",
               style: ot({
                 backgroundColor: c.avatar ? "transparent" : c.color
               })
@@ -37522,7 +37522,7 @@ const HL = { class: "ic-user-presence-avatars" }, UL = ["src", "alt"], jL = { cl
                 key: 0,
                 src: c.avatar,
                 alt: c.name,
-                class: "ic-user-avatar-img"
+                class: "wov-user-avatar-img"
               }, null, 8, ZL)) : (T(), O(De, { key: 1 }, [
                 $u(Xt(c.initials), 1)
               ], 64))
@@ -37951,17 +37951,17 @@ function iF(t = {}) {
   };
 }
 var aF = (t = {}) => iF(t);
-const lF = { class: "ic-selection-box" }, cF = /* @__PURE__ */ oe({
+const lF = { class: "wov-selection-box" }, cF = /* @__PURE__ */ oe({
   __name: "SelectionBox",
   setup(t) {
     return (e, n) => (T(), O("div", lF));
   }
-}), uF = { class: "ic-transform-box" }, dF = /* @__PURE__ */ oe({
+}), uF = { class: "wov-transform-box" }, dF = /* @__PURE__ */ oe({
   __name: "TransformBox",
   setup(t) {
     return (e, n) => (T(), O("div", uF));
   }
-}), fF = {}, hF = { class: "ic-transform-handle" };
+}), fF = {}, hF = { class: "wov-transform-handle" };
 function pF(t, e) {
   return T(), O("div", hF);
 }
@@ -38000,7 +38000,7 @@ const mF = /* @__PURE__ */ bs(fF, [["render", pF]]), gF = /* @__PURE__ */ oe({
     return (l, c) => (T(), O("div", {
       ref_key: "containerRef",
       ref: o,
-      class: "ic-sticky-note",
+      class: "wov-sticky-note",
       style: ot(i.value)
     }, [
       he(ch, Nt(e, {
@@ -38153,8 +38153,8 @@ function xF(t) {
     ]
   };
 }
-const CF = { class: "ic-user-cursors" }, EF = {
-  class: "ic-cursor-svg",
+const CF = { class: "wov-user-cursors" }, EF = {
+  class: "wov-cursor-svg",
   viewBox: "0 0 4.35 4.75",
   width: "20",
   height: "20"
@@ -38176,7 +38176,7 @@ const CF = { class: "ic-user-cursors" }, EF = {
     return (r, o) => (T(), O("div", CF, [
       (T(!0), O(De, null, Wt(n.value, (s) => (T(), O("div", {
         key: s.sessionId,
-        class: "ic-user-cursor",
+        class: "wov-user-cursor",
         style: ot({
           transform: `translate(${s.screenX}px, ${s.screenY}px)`
         })
@@ -38191,7 +38191,7 @@ const CF = { class: "ic-user-cursors" }, EF = {
           }, null, 8, TF)
         ])),
         A("span", {
-          class: "ic-cursor-label",
+          class: "wov-cursor-label",
           style: ot({ backgroundColor: s.color })
         }, Xt(s.name), 5)
       ], 4))), 128))
@@ -38199,7 +38199,7 @@ const CF = { class: "ic-user-cursors" }, EF = {
   }
 }), AF = {
   key: 0,
-  class: "ic-offline-indicator"
+  class: "wov-offline-indicator"
 }, IF = /* @__PURE__ */ oe({
   __name: "OfflineIndicator",
   props: {
@@ -38210,7 +38210,7 @@ const CF = { class: "ic-user-cursors" }, EF = {
   }
 }), PF = {
   key: 0,
-  class: "ic-version-mismatch-overlay"
+  class: "wov-version-mismatch-overlay"
 }, OF = /* @__PURE__ */ oe({
   __name: "VersionMismatch",
   props: {
@@ -38221,7 +38221,7 @@ const CF = { class: "ic-user-cursors" }, EF = {
       window.location.reload();
     }
     return (n, r) => t.versionMismatch ? (T(), O("div", PF, [
-      A("div", { class: "ic-version-mismatch-dialog" }, [
+      A("div", { class: "wov-version-mismatch-dialog" }, [
         r[0] || (r[0] = A("p", null, "A new version is available.", -1)),
         r[1] || (r[1] = A("p", null, "Please refresh the page to continue.", -1)),
         A("button", { onClick: e }, "Refresh")
@@ -38263,7 +38263,7 @@ const CF = { class: "ic-user-cursors" }, EF = {
     }
     return (l, c) => i.value ? (T(), O("button", {
       key: 0,
-      class: "ic-back-to-content",
+      class: "wov-back-to-content",
       onClick: a
     }, [...c[0] || (c[0] = [
       A("svg", {
@@ -38549,7 +38549,7 @@ const CF = { class: "ic-user-cursors" }, EF = {
         opacity: H,
         pointerEvents: "none",
         userSelect: "none",
-        "--ic-held-by-color": ee ?? void 0,
+        "--wov-held-by-color": ee ?? void 0,
         // Delay fade-in (0→1) to allow dimensions to settle, but hide immediately (1→0)
         transition: H === 1 ? "opacity 0ms 32ms" : void 0
       };
@@ -38557,7 +38557,7 @@ const CF = { class: "ic-user-cursors" }, EF = {
     return (N, me) => (T(), O("div", {
       ref_key: "containerRef",
       ref: f,
-      class: "ic-root",
+      class: "wov-root",
       style: {
         position: "relative",
         width: "100%",
@@ -38572,12 +38572,12 @@ const CF = { class: "ic-user-cursors" }, EF = {
         he(uL, { background: t.background }, null, 8, ["background"])
       ]) : ne("", !0),
       A("div", {
-        class: "ic-canvas",
+        class: "wov-canvas",
         style: ot({
           position: "absolute",
           transformOrigin: "0 0",
           transform: `scale(${W.value.zoom}) translate(${-W.value.left}px, ${-W.value.top}px)`,
-          "--ic-zoom": W.value.zoom
+          "--wov-zoom": W.value.zoom
         })
       }, [
         (T(!0), O(De, null, Wt(C.value, (j) => (T(), O("div", {
@@ -38587,7 +38587,7 @@ const CF = { class: "ic-user-cursors" }, EF = {
           "data-selected": j.value.selected || void 0,
           "data-held-by-other": wi(j.value) !== null || void 0,
           "data-hovered": j.value.hovered || void 0,
-          class: "ic-block"
+          class: "wov-block"
         }, [
           Ue(N.$slots, `block:${j.value.block.tag}`, Nt({ ref_for: !0 }, j.value), () => [
             j.value.block.tag === "selection-box" ? (T(), se(cF, Nt({