@mkbabb/glass-ui 3.10.0 → 3.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/{ToggleGroupItem-Cev4pOVK.js → ToggleGroupItem-COu_4IW4.js} +17 -13
  2. package/dist/api/index.d.ts +1 -1
  3. package/dist/api.js +2 -2
  4. package/dist/aurora.js +77 -77
  5. package/dist/components/custom/aurora/constants/presets.d.ts +62 -5
  6. package/dist/components/custom/aurora/index.d.ts +1 -1
  7. package/dist/components/custom/dock/GlassDock.vue.d.ts +5 -1
  8. package/dist/components/custom/expandable-container/ExpandableContainer.vue.d.ts +10 -7
  9. package/dist/components/custom/handmark/brush.d.ts +23 -0
  10. package/dist/components/custom/handmark/geometry.d.ts +20 -2
  11. package/dist/components/custom/handmark/index.d.ts +2 -2
  12. package/dist/components/custom/handmark/useHandMark.d.ts +26 -5
  13. package/dist/components/ui/toggle/Toggle.vue.d.ts +1 -1
  14. package/dist/components/ui/toggle/index.d.ts +1 -1
  15. package/dist/components/ui/toggle-group/ToggleGroup.vue.d.ts +7 -1
  16. package/dist/components/ui/toggle-group/ToggleGroupItem.vue.d.ts +3 -1
  17. package/dist/components/ui/toggle-group/toggleGroupContext.d.ts +13 -0
  18. package/dist/composables/dark/index.d.ts +1 -1
  19. package/dist/composables/dark/useGlobalDark.d.ts +21 -1
  20. package/dist/controls.js +1 -1
  21. package/dist/dark.d.ts +1 -1
  22. package/dist/dark.js +1 -1
  23. package/dist/dock.js +191 -174
  24. package/dist/expandable-container.js +67 -49
  25. package/dist/fourier-field.js +1 -1
  26. package/dist/glass-ui.css +1 -1
  27. package/dist/glass-ui.js +2 -2
  28. package/dist/handmark.js +176 -123
  29. package/dist/labeled-field.js +1 -1
  30. package/dist/{presets-Dkdv55Gt.js → presets-BP_ALM0m.js} +14 -1
  31. package/dist/{slider-CyzcxBoh.js → slider-ClgpP7EB.js} +1 -1
  32. package/dist/slider.js +1 -1
  33. package/dist/styles/animations.css +40 -0
  34. package/dist/styles/components.css +1 -1
  35. package/dist/styles/tokens.css +5 -0
  36. package/dist/styles/utilities.css +44 -13
  37. package/dist/toggle-group.js +1 -1
  38. package/dist/{useGlobalDark-d6waty-X.js → useGlobalDark-D1wgEqfW.js} +21 -2
  39. package/package.json +10 -4
  40. package/src/styles/animations.css +40 -0
  41. package/src/styles/tokens.css +5 -0
  42. package/src/styles/utilities.css +44 -13
package/dist/dock.js CHANGED
@@ -6,10 +6,10 @@ import { t as i } from "./useTouchGate-WFyJYsth.js";
6
6
  import { n as a, t as o } from "./createContext-B44Sah_H.js";
7
7
  import { i as s, n as c, r as l, t as u } from "./dockContext-BKeIMmNk.js";
8
8
  import { i as d, n as f, r as p, t as m } from "./TabsList-B8CVOQPC.js";
9
- import { Fragment as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createVNode as x, defineComponent as S, mergeModels as C, mergeProps as w, nextTick as T, normalizeClass as E, normalizeStyle as ee, onBeforeUnmount as D, onMounted as te, onUnmounted as O, openBlock as k, readonly as A, ref as j, renderList as M, renderSlot as N, resolveDynamicComponent as P, toDisplayString as F, unref as I, useAttrs as L, useId as ne, useModel as R, useTemplateRef as z, watch as B, withCtx as V } from "vue";
10
- import { DropdownMenuTrigger as H, Primitive as U, SelectIcon as W, SelectTrigger as re, useForwardProps as G } from "reka-ui";
11
- import { SpringProgress as K } from "@mkbabb/keyframes.js";
12
- var ie = t("pause", [["rect", {
9
+ import { Fragment as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createVNode as x, defineComponent as S, getCurrentInstance as C, mergeModels as w, mergeProps as T, nextTick as E, normalizeClass as D, normalizeStyle as ee, onBeforeUnmount as te, onMounted as ne, onUnmounted as O, openBlock as k, readonly as A, ref as j, renderList as M, renderSlot as N, resolveDynamicComponent as P, toDisplayString as F, unref as I, useAttrs as L, useId as re, useModel as R, useTemplateRef as z, watch as B, withCtx as V } from "vue";
10
+ import { DropdownMenuTrigger as H, Primitive as U, SelectIcon as ie, SelectTrigger as ae, useForwardProps as W } from "reka-ui";
11
+ import { SpringProgress as G } from "@mkbabb/keyframes.js";
12
+ var K = t("pause", [["rect", {
13
13
  x: "14",
14
14
  y: "3",
15
15
  width: "5",
@@ -23,10 +23,10 @@ var ie = t("pause", [["rect", {
23
23
  height: "18",
24
24
  rx: "1",
25
25
  key: "1wsw3u"
26
- }]]), q = t("play", [["path", {
26
+ }]]), oe = t("play", [["path", {
27
27
  d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",
28
28
  key: "10ikf1"
29
- }]]), ae = ["data-orientation", "aria-orientation"], oe = /* @__PURE__ */ S({
29
+ }]]), se = ["data-orientation", "aria-orientation"], ce = /* @__PURE__ */ S({
30
30
  __name: "DockSeparator",
31
31
  setup(e) {
32
32
  let t = s(), n = g(() => t?.orientation.value ?? "horizontal"), r = g(() => n.value), i = g(() => n.value === "vertical" ? "horizontal" : "vertical");
@@ -35,19 +35,19 @@ var ie = t("pause", [["rect", {
35
35
  role: "separator",
36
36
  "data-orientation": r.value,
37
37
  "aria-orientation": i.value
38
- }, null, 8, ae));
38
+ }, null, 8, se));
39
39
  }
40
40
  });
41
41
  //#endregion
42
42
  //#region src/components/custom/dock/composables/isTeleportedTarget.ts
43
- function J(e, t) {
43
+ function q(e, t) {
44
44
  if (!(e instanceof Element)) return !1;
45
45
  let n = e.closest("[data-glass-dock-portal]");
46
46
  return n ? t ? n.getAttribute("data-glass-dock-owner") === t : !0 : !1;
47
47
  }
48
48
  //#endregion
49
49
  //#region src/components/custom/dock/composables/useDockState.ts
50
- function se(e) {
50
+ function le(e) {
51
51
  let { collapseDelay: t = 2500, rootEl: n, alwaysExpanded: r = !1, isTransitioning: i, dockId: a, onStateChange: o } = e, s = () => typeof r == "boolean" ? r : r.value, c = s(), l = j(c ? "pinned" : "collapsed"), u = j(c), d = j(c), f = null, p = j(0), m = g(() => p.value > 0), h = null, _ = null, v = !1, y = l.value;
52
52
  function b() {
53
53
  s() && (l.value = "pinned"), u.value = l.value !== "collapsed", d.value = l.value === "pinned", o && y !== l.value && o(l.value, y), y = l.value;
@@ -79,14 +79,14 @@ function se(e) {
79
79
  }
80
80
  v ||= (v = !0, x(), T(), l.value = "collapsed", b(), !1);
81
81
  }
82
- function ee() {
82
+ function D() {
83
83
  if (s()) {
84
84
  l.value = "pinned", b();
85
85
  return;
86
86
  }
87
87
  x(), l.value = "hover", b();
88
88
  }
89
- function D() {
89
+ function ee() {
90
90
  s() || (x(), l.value === "collapsed" && (l.value = "hover", b()));
91
91
  }
92
92
  function te(e) {
@@ -94,43 +94,43 @@ function se(e) {
94
94
  if (p.value > 0) return;
95
95
  if (e) {
96
96
  let t = n.value;
97
- if (t && e.relatedTarget instanceof Node && t.contains(e.relatedTarget) || J(e.relatedTarget, a)) return;
97
+ if (t && e.relatedTarget instanceof Node && t.contains(e.relatedTarget) || q(e.relatedTarget, a)) return;
98
98
  }
99
99
  w();
100
100
  }
101
101
  }
102
- function k() {
102
+ function ne() {
103
103
  s() || (x(), l.value === "collapsed" && (l.value = "hover", b()));
104
104
  }
105
- function A(e) {
105
+ function k(e) {
106
106
  if (s() || l.value !== "hover" || p.value > 0) return;
107
107
  let t = e.currentTarget;
108
- e.relatedTarget && t.contains(e.relatedTarget) || J(e.relatedTarget, a) || w();
108
+ e.relatedTarget && t.contains(e.relatedTarget) || q(e.relatedTarget, a) || w();
109
109
  }
110
- function M() {
110
+ function A() {
111
111
  if (s()) {
112
112
  l.value = "pinned", b();
113
113
  return;
114
114
  }
115
115
  x(), l.value = "pinned", b();
116
116
  }
117
- function N() {
117
+ function M() {
118
118
  p.value++, x();
119
119
  }
120
- function P() {
120
+ function N() {
121
121
  p.value = Math.max(0, p.value - 1), p.value === 0 && l.value === "hover" && (x(), f = setTimeout(() => {
122
122
  p.value === 0 && l.value === "hover" && w();
123
123
  }, Math.min(t, 800)));
124
124
  }
125
- function F(e) {
125
+ function P(e) {
126
126
  if (s() || i?.value) return;
127
127
  let t = n.value;
128
- !t || t.contains(e.target) || J(e.target, a) || E();
128
+ !t || t.contains(e.target) || q(e.target, a) || E();
129
129
  }
130
130
  return B(u, (e) => {
131
131
  e ? (C(), _ = requestAnimationFrame(() => {
132
- _ = null, u.value && (document.addEventListener("pointerdown", F, !0), h = () => {
133
- document.removeEventListener("pointerdown", F, !0), h = null;
132
+ _ = null, u.value && (document.addEventListener("pointerdown", P, !0), h = () => {
133
+ document.removeEventListener("pointerdown", P, !0), h = null;
134
134
  });
135
135
  })) : C();
136
136
  }), typeof r == "boolean" ? r && (l.value = "pinned", b()) : B(r, (e) => {
@@ -146,29 +146,29 @@ function se(e) {
146
146
  expanded: u,
147
147
  isPinned: d,
148
148
  isHeld: m,
149
- onMouseEnter: D,
149
+ onMouseEnter: ee,
150
150
  onMouseLeave: te,
151
- onFocusIn: k,
152
- onFocusOut: A,
153
- onClickCollapsed: M,
154
- keepOpen: N,
155
- release: P,
156
- expand: ee,
151
+ onFocusIn: ne,
152
+ onFocusOut: k,
153
+ onClickCollapsed: A,
154
+ keepOpen: M,
155
+ release: N,
156
+ expand: D,
157
157
  collapse: E
158
158
  };
159
159
  }
160
160
  //#endregion
161
161
  //#region src/components/custom/dock/composables/dockMorphContext.ts
162
- var ce = {
162
+ var J = {
163
163
  response: .32,
164
164
  dampingFraction: .7
165
165
  }, Y = o("glass-ui:dock-morph-context");
166
166
  Y.KEY;
167
- function le(e) {
167
+ function ue(e) {
168
168
  Y.provide(e);
169
169
  }
170
- var ue = Y.use;
171
- function de(e) {
170
+ var de = Y.use;
171
+ function fe(e) {
172
172
  let { rootEl: t, outerEl: n, outerActiveLayer: r, outerAxis: i } = e, a = null, o = /* @__PURE__ */ new Set();
173
173
  function s() {
174
174
  return t.value;
@@ -208,9 +208,9 @@ function de(e) {
208
208
  if (!s()) return;
209
209
  let e = a !== null && !a.settled ? a.velocity : 0;
210
210
  if (!a || a.settled) {
211
- c(), a = new K({
212
- response: ce.response,
213
- dampingFraction: ce.dampingFraction,
211
+ c(), a = new G({
212
+ response: J.response,
213
+ dampingFraction: J.dampingFraction,
214
214
  initial: 0,
215
215
  respectReducedMotion: !0
216
216
  });
@@ -312,17 +312,20 @@ function de(e) {
312
312
  }
313
313
  //#endregion
314
314
  //#region src/components/custom/dock/GlassDock.vue?vue&type=script&setup=true&lang.ts
315
- var fe = [
315
+ var pe = [
316
316
  "data-density",
317
317
  "data-held",
318
318
  "data-container-name"
319
- ], pe = {
319
+ ], me = {
320
320
  key: 0,
321
321
  class: "dock-persistent"
322
- }, me = ["inert"], he = ["inert"], ge = {
323
- key: 2,
322
+ }, he = ["inert"], ge = ["inert"], _e = {
323
+ key: 0,
324
+ class: "dock-layers dock-layer--vertical-body"
325
+ }, ve = { class: "dock-layer--vertical-section" }, ye = {
326
+ key: 1,
324
327
  class: "dock-layers dock-layer--vertical-body"
325
- }, _e = { class: "dock-layer--vertical-section" }, X = /* @__PURE__ */ S({
328
+ }, be = ["inert"], xe = ["inert"], Se = /* @__PURE__ */ S({
326
329
  __name: "GlassDock",
327
330
  props: {
328
331
  variant: {},
@@ -348,154 +351,168 @@ var fe = [
348
351
  function a(e) {
349
352
  return e.variant !== "rail" && e.variant !== "instrument-strip";
350
353
  }
351
- let o = g(() => a(n) ? n.collapseDelay ?? 2e3 : 2e3), s = g(() => a(n) ? n.startCollapsed ?? !0 : !1), l = g(() => a(n) ? n.layout ?? "linear" : "linear"), u = z("dockEl"), d = z("layersEl"), f = g(() => n.variant ?? "dock"), p = g(() => n.shape ?? "pill"), m = l, _ = g(() => n.variant === "rail" || n.variant === "instrument-strip" ? "vertical" : n.orientation ?? "horizontal"), S = g(() => n.density ?? "comfortable"), C = g(() => n.overflow === "scroll" ? _.value === "vertical" ? "dock-scroll-y" : "dock-scroll-x" : null), w = g(() => n.alwaysExpanded || _.value === "vertical" || l.value === "grid"), T = g(() => n.fitContent || n.variant === "rail" || n.variant === "instrument-strip"), O = j(!1), A = i(o.value), M = `glass-dock-${ne()}`, P = null, F = 0, { expanded: L, isPinned: R, isHeld: V, onMouseEnter: H, onMouseLeave: U, onFocusIn: W, onFocusOut: re, onClickCollapsed: G, keepOpen: K, release: ie, expand: q, collapse: ae } = se({
354
+ let o = g(() => a(n) ? n.collapseDelay ?? 2e3 : 2e3), s = g(() => a(n) ? n.startCollapsed ?? !0 : !1), l = g(() => a(n) ? n.layout ?? "linear" : "linear"), u = z("dockEl"), d = z("layersEl"), f = g(() => n.variant ?? "dock"), p = g(() => n.shape ?? "pill"), m = l, _ = g(() => n.variant === "rail" || n.variant === "instrument-strip" ? "vertical" : n.orientation ?? "horizontal"), S = g(() => n.density ?? "comfortable"), w = g(() => n.overflow === "scroll" ? _.value === "vertical" ? "dock-scroll-y" : "dock-scroll-x" : null), T = C(), E = g(() => {
355
+ let e = T?.vnode.props;
356
+ if (e && !(!("alwaysExpanded" in e) && !("always-expanded" in e))) return n.alwaysExpanded;
357
+ }), O = g(() => (E.value ?? _.value === "vertical") || l.value === "grid"), A = g(() => n.fitContent || n.variant === "rail" || n.variant === "instrument-strip"), M = j(!1), P = i(o.value), F = `glass-dock-${re()}`, L = null, R = 0, { expanded: V, isPinned: H, isHeld: U, onMouseEnter: ie, onMouseLeave: ae, onFocusIn: W, onFocusOut: G, onClickCollapsed: K, keepOpen: oe, release: se, expand: q, collapse: J } = le({
352
358
  collapseDelay: o.value,
353
359
  rootEl: u,
354
- alwaysExpanded: w,
355
- isTransitioning: O,
356
- dockId: M
360
+ alwaysExpanded: O,
361
+ isTransitioning: M,
362
+ dockId: F
357
363
  });
358
364
  c({
359
- id: M,
365
+ id: F,
360
366
  orientation: _,
361
367
  layout: m,
362
- keepOpen: K,
363
- release: ie,
364
- held: V
368
+ keepOpen: oe,
369
+ release: se,
370
+ held: U
365
371
  });
366
- let J = g(() => w.value || L.value), { context: ce, onOuterTransitionEnd: Y } = de({
372
+ let Y = g(() => O.value || V.value), { context: de, onOuterTransitionEnd: Se } = fe({
367
373
  rootEl: u,
368
374
  outerEl: d,
369
- outerActiveLayer: g(() => J.value ? "full" : "summary"),
375
+ outerActiveLayer: g(() => Y.value ? "full" : "summary"),
370
376
  outerAxis: g(() => "horizontal")
371
377
  });
372
- le(ce);
373
- let ue = g(() => ({ "view-transition-name": M.replace(/[^a-zA-Z0-9_-]/g, "-") }));
374
- function X(e) {
378
+ ue(de);
379
+ let X = g(() => ({ "view-transition-name": F.replace(/[^a-zA-Z0-9_-]/g, "-") }));
380
+ function Z(e) {
375
381
  let t = e.trim();
376
382
  return t ? t.endsWith("ms") ? Number.parseFloat(t) : t.endsWith("s") ? Number.parseFloat(t) * 1e3 : Number.parseFloat(t) || 0 : 0;
377
383
  }
378
- function Z(e) {
379
- let t = getComputedStyle(e), n = t.transitionDuration.split(",").map(X), r = t.transitionDelay.split(",").map(X);
384
+ function Ce(e) {
385
+ let t = getComputedStyle(e), n = t.transitionDuration.split(",").map(Z), r = t.transitionDelay.split(",").map(Z);
380
386
  return Math.max(0, ...n.map((e, t) => e + (r[t] ?? r[0] ?? 0)));
381
387
  }
382
- function ve(e) {
383
- let t = X(getComputedStyle(e).getPropertyValue("--duration-normal") || "0.3s");
388
+ function we(e) {
389
+ let t = Z(getComputedStyle(e).getPropertyValue("--duration-normal") || "0.3s");
384
390
  return Math.max(t > 0 ? t * 2 : 0, 600);
385
391
  }
386
392
  function Q() {
387
- P &&= (clearTimeout(P), null);
393
+ L &&= (clearTimeout(L), null);
388
394
  }
389
- let ye = new Set([
395
+ let Te = new Set([
390
396
  "width",
391
397
  "height",
392
398
  "padding",
393
399
  "transform"
394
400
  ]);
395
- function be() {
401
+ function Ee() {
396
402
  let e = u.value;
397
403
  if (!e) return;
398
- let t = ++F;
399
- Q(), O.value = !0, P = setTimeout(() => {
400
- t === F && (O.value = !1, P = null);
401
- }, Math.max(Z(e), ve(e)) + 50);
404
+ let t = ++R;
405
+ Q(), M.value = !0, L = setTimeout(() => {
406
+ t === R && (M.value = !1, L = null);
407
+ }, Math.max(Ce(e), we(e)) + 50);
402
408
  }
403
- function xe(e) {
404
- e.target === u.value && ye.has(e.propertyName) && (Q(), F++, O.value = !1);
409
+ function De(e) {
410
+ e.target === u.value && Te.has(e.propertyName) && (Q(), R++, M.value = !1);
405
411
  }
406
- te(() => {
407
- (n.alwaysExpanded || !s.value) && q();
412
+ ne(() => {
413
+ if (O.value) {
414
+ q();
415
+ return;
416
+ }
417
+ _.value === "horizontal" && !s.value && q();
408
418
  });
409
419
  function $() {
410
- return _.value === "horizontal" && !w.value;
420
+ return _.value === "horizontal" && !O.value;
411
421
  }
412
- function Se(e) {
413
- if (!$() || J.value) return;
422
+ function Oe(e) {
423
+ if (!$() || Y.value) return;
414
424
  let t = u.value, n = e.touches[0];
415
- !t || !n || A.handleTouchStart(t, n.clientY);
425
+ !t || !n || P.handleTouchStart(t, n.clientY);
416
426
  }
417
- function Ce(e) {
418
- $() && A.handleScrollCheck(e);
427
+ function ke(e) {
428
+ $() && P.handleScrollCheck(e);
419
429
  }
420
- function we() {
430
+ function Ae() {
421
431
  if (!$()) return;
422
- let e = A.isActive.value;
423
- A.handleTouchEnd(), !e && A.isActive.value && !J.value && q();
432
+ let e = P.isActive.value;
433
+ P.handleTouchEnd(), !e && P.isActive.value && !Y.value && q();
424
434
  }
425
- return B(A.isActive, (e) => {
426
- !e && L.value && !R.value && !w.value && ae();
427
- }), B(J, (e) => {
428
- be(), e || A.deactivate();
429
- }), D(Q), t({
430
- expanded: L,
431
- isPinned: R,
432
- isHeld: V,
433
- isTransitioning: O,
435
+ return B(P.isActive, (e) => {
436
+ !e && V.value && !H.value && !O.value && J();
437
+ }), B(Y, (e) => {
438
+ Ee(), e || P.deactivate();
439
+ }), te(Q), t({
440
+ expanded: V,
441
+ isPinned: H,
442
+ isHeld: U,
443
+ isTransitioning: M,
434
444
  expand: q,
435
- collapse: ae,
436
- keepOpen: K,
437
- release: ie
445
+ collapse: J,
446
+ keepOpen: oe,
447
+ release: se
438
448
  }), (t, n) => (k(), y("div", {
439
449
  ref_key: "dockEl",
440
450
  ref: u,
441
- class: E(["glass-dock", [
451
+ class: D(["glass-dock", [
442
452
  _.value,
443
453
  `variant-${f.value}`,
444
454
  `shape-${p.value}`,
445
455
  `layout-${I(m)}`,
446
- C.value,
456
+ w.value,
447
457
  {
448
- expanded: J.value,
449
- collapsed: !J.value,
450
- pinned: I(R),
451
- "fit-content": T.value,
452
- "always-expanded": w.value,
458
+ expanded: Y.value,
459
+ collapsed: !Y.value,
460
+ pinned: I(H),
461
+ "fit-content": A.value,
462
+ "always-expanded": O.value,
453
463
  "dock-overflow-wrap": e.overflow === "wrap" && _.value !== "vertical"
454
464
  },
455
465
  e.position === "fixed" ? "fixed bottom-[var(--dock-pos)] left-1/2 -translate-x-1/2" : e.position === "sticky" ? "dock-sticky" : "dock-inline"
456
466
  ]]),
457
467
  "data-density": S.value,
458
- "data-held": I(V) || void 0,
468
+ "data-held": I(U) || void 0,
459
469
  "data-container-name": e.containerName || void 0,
460
- style: ee([r.value, ue.value]),
461
- onMouseenter: n[2] ||= (...e) => I(H) && I(H)(...e),
462
- onMouseleave: n[3] ||= (e) => I(U)(e),
463
- onFocusin: n[4] ||= (...e) => I(W) && I(W)(...e),
464
- onFocusout: n[5] ||= (...e) => I(re) && I(re)(...e),
465
- onTouchstart: Se,
466
- onTouchmove: Ce,
467
- onTouchend: we,
468
- onTransitionend: xe,
469
- onTransitioncancel: xe
470
- }, [t.$slots.persistent ? (k(), y("div", pe, [N(t.$slots, "persistent")])) : v("", !0), _.value === "horizontal" ? (k(), y("div", {
470
+ style: ee([r.value, X.value]),
471
+ onMouseenter: n[3] ||= (...e) => I(ie) && I(ie)(...e),
472
+ onMouseleave: n[4] ||= (e) => I(ae)(e),
473
+ onFocusin: n[5] ||= (...e) => I(W) && I(W)(...e),
474
+ onFocusout: n[6] ||= (...e) => I(G) && I(G)(...e),
475
+ onTouchstart: Oe,
476
+ onTouchmove: ke,
477
+ onTouchend: Ae,
478
+ onTransitionend: De,
479
+ onTransitioncancel: De
480
+ }, [t.$slots.persistent ? (k(), y("div", me, [N(t.$slots, "persistent")])) : v("", !0), _.value === "horizontal" ? (k(), y("div", {
471
481
  key: 1,
472
482
  ref_key: "layersEl",
473
483
  ref: d,
474
484
  class: "dock-layers",
475
- onTransitionend: n[1] ||= (...e) => I(Y) && I(Y)(...e)
485
+ onTransitionend: n[1] ||= (...e) => I(Se) && I(Se)(...e)
476
486
  }, [b("div", {
477
- class: E(["dock-layer dock-layer--full", { "is-active": J.value }]),
478
- inert: !I(L) || void 0
479
- }, [N(t.$slots, "default")], 10, me), b("div", {
480
- class: E(["dock-layer dock-layer--summary", { "is-active": !J.value }]),
481
- inert: I(L) || void 0,
482
- onClick: n[0] ||= (...e) => I(G) && I(G)(...e)
483
- }, [N(t.$slots, "collapsed")], 10, he)], 544)) : (k(), y("div", ge, [N(t.$slots, "default"), t.$slots.collapsed ? (k(), y(h, { key: 0 }, [x(oe), b("div", _e, [N(t.$slots, "collapsed")])], 64)) : v("", !0)]))], 46, fe));
484
- }
485
- }), Z = a("glass-ui:dock-layer-group", "[glass-ui:dock] <DockLayer> must be used inside <DockLayerGroup>");
486
- Z.KEY;
487
- function ve(e) {
488
- Z.provide(e);
487
+ class: D(["dock-layer dock-layer--full", { "is-active": Y.value }]),
488
+ inert: !I(V) || void 0
489
+ }, [N(t.$slots, "default")], 10, he), b("div", {
490
+ class: D(["dock-layer dock-layer--summary", { "is-active": !Y.value }]),
491
+ inert: I(V) || void 0,
492
+ onClick: n[0] ||= (...e) => I(K) && I(K)(...e)
493
+ }, [N(t.$slots, "collapsed")], 10, ge)], 544)) : (k(), y(h, { key: 2 }, [O.value ? (k(), y("div", _e, [N(t.$slots, "default"), t.$slots.collapsed ? (k(), y(h, { key: 0 }, [x(ce), b("div", ve, [N(t.$slots, "collapsed")])], 64)) : v("", !0)])) : (k(), y("div", ye, [b("div", {
494
+ class: D(["dock-layer dock-layer--full", { "is-active": Y.value }]),
495
+ inert: !I(V) || void 0
496
+ }, [N(t.$slots, "default")], 10, be), b("div", {
497
+ class: D(["dock-layer dock-layer--summary", { "is-active": !Y.value }]),
498
+ inert: I(V) || void 0,
499
+ onClick: n[2] ||= (...e) => I(K) && I(K)(...e)
500
+ }, [N(t.$slots, "collapsed")], 10, xe)]))], 64))], 46, pe));
501
+ }
502
+ }), X = a("glass-ui:dock-layer-group", "[glass-ui:dock] <DockLayer> must be used inside <DockLayerGroup>");
503
+ X.KEY;
504
+ function Z(e) {
505
+ X.provide(e);
489
506
  }
490
- var Q = Z.use;
491
- Z.useOptional;
507
+ var Ce = X.use;
508
+ X.useOptional;
492
509
  //#endregion
493
510
  //#region src/components/custom/dock/composables/useLayerTransition.ts
494
- var ye = {
511
+ var we = {
495
512
  response: .32,
496
513
  dampingFraction: .7
497
514
  };
498
- function be(e) {
515
+ function Q(e) {
499
516
  let { containerEl: t, activeLayer: n, axis: r } = e, i = g(() => r?.value === "vertical" ? "height" : "width"), a = g(() => i.value === "width" ? "inline-size" : "block-size"), o = (e) => e.getBoundingClientRect()[i.value], s = j(n.value), c = j(null), l = 0, u = null, d = null;
500
517
  function f() {
501
518
  u &&= (u.dispose(), null), d = null;
@@ -514,9 +531,9 @@ function be(e) {
514
531
  h(e, t);
515
532
  return;
516
533
  }
517
- e.style.setProperty("--dock-morph-from", `${r}px`), e.style.setProperty("--dock-morph-to", `${i}px`), t.style.setProperty("--dock-morph-t", "0"), t.setAttribute("data-morphing", ""), o || (f(), u = new K({
518
- response: ye.response,
519
- dampingFraction: ye.dampingFraction,
534
+ e.style.setProperty("--dock-morph-from", `${r}px`), e.style.setProperty("--dock-morph-to", `${i}px`), t.style.setProperty("--dock-morph-t", "0"), t.setAttribute("data-morphing", ""), o || (f(), u = new G({
535
+ response: we.response,
536
+ dampingFraction: we.dampingFraction,
520
537
  initial: 0,
521
538
  respectReducedMotion: !0
522
539
  }), d = e);
@@ -555,9 +572,9 @@ function be(e) {
555
572
  }
556
573
  //#endregion
557
574
  //#region src/components/custom/dock/DockLayerGroup.vue?vue&type=script&setup=true&lang.ts
558
- var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
575
+ var Te = { key: 1 }, Ee = { key: 2 }, De = /* @__PURE__ */ S({
559
576
  __name: "DockLayerGroup",
560
- props: /* @__PURE__ */ C({
577
+ props: /* @__PURE__ */ w({
561
578
  orientation: {},
562
579
  showRail: {
563
580
  type: Boolean,
@@ -577,16 +594,16 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
577
594
  function c(e) {
578
595
  i.value = i.value.filter((t) => t.id !== e);
579
596
  }
580
- let l = g(() => t.orientation ?? r?.orientation.value ?? "horizontal"), u = g(() => l.value === "vertical" ? "horizontal" : "vertical"), S = ue(), C, w, T;
597
+ let l = g(() => t.orientation ?? r?.orientation.value ?? "horizontal"), u = g(() => l.value === "vertical" ? "horizontal" : "vertical"), S = de(), C, w, T;
581
598
  if (S) {
582
599
  let e = S.registerGroup({
583
600
  containerEl: a,
584
601
  activeLayer: n,
585
602
  axis: l
586
603
  });
587
- C = e.currentLayer, w = e.leavingLayer, T = () => {}, D(() => e.release());
604
+ C = e.currentLayer, w = e.leavingLayer, T = () => {}, te(() => e.release());
588
605
  } else {
589
- let e = be({
606
+ let e = Q({
590
607
  containerEl: a,
591
608
  activeLayer: n,
592
609
  axis: l,
@@ -597,28 +614,28 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
597
614
  });
598
615
  C = A(e.currentLayer), w = A(e.leavingLayer), T = e.onTransitionEnd;
599
616
  }
600
- let te = typeof document < "u" && "startViewTransition" in document, O = ne(), L = g(() => te ? {
601
- "view-transition-name": `gl-dock-stack-${O.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
617
+ let E = typeof document < "u" && "startViewTransition" in document, ne = re(), O = g(() => E ? {
618
+ "view-transition-name": `gl-dock-stack-${ne.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
602
619
  "view-transition-class": "gl-dock-layer"
603
620
  } : void 0);
604
- ve({
621
+ Z({
605
622
  register: o,
606
623
  unregister: c,
607
624
  currentLayerId: C,
608
625
  leavingLayerId: w
609
626
  });
610
- function B(e) {
627
+ function L(e) {
611
628
  return typeof e == "object" && !!e;
612
629
  }
613
- let H = j(!1);
614
- function U() {
615
- H.value || (H.value = !0, r?.keepOpen());
630
+ let B = j(!1);
631
+ function H() {
632
+ B.value || (B.value = !0, r?.keepOpen());
616
633
  }
617
- function W(e) {
634
+ function U(e) {
618
635
  let t = e.relatedTarget, n = e.currentTarget;
619
- t && n?.contains(t) || H.value && (H.value = !1, r?.release());
636
+ t && n?.contains(t) || B.value && (B.value = !1, r?.release());
620
637
  }
621
- return (t, r) => (k(), y("div", { class: E(["dock-layer-group", [l.value, `rail-${e.railPosition}`]]) }, [e.showRail && i.value.length > 1 ? (k(), _(I(d), {
638
+ return (t, r) => (k(), y("div", { class: D(["dock-layer-group", [l.value, `rail-${e.railPosition}`]]) }, [e.showRail && i.value.length > 1 ? (k(), _(I(d), {
622
639
  key: 0,
623
640
  modelValue: n.value,
624
641
  "onUpdate:modelValue": r[0] ||= (e) => n.value = e,
@@ -626,10 +643,10 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
626
643
  "as-child": !0
627
644
  }, {
628
645
  default: V(() => [x(I(m), {
629
- class: E(["dock-layer-rail", e.railPosition]),
646
+ class: D(["dock-layer-rail", e.railPosition]),
630
647
  indicator: !1,
631
- onFocusin: U,
632
- onFocusout: W
648
+ onFocusin: H,
649
+ onFocusout: U
633
650
  }, {
634
651
  default: V(() => [(k(!0), y(h, null, M(i.value, (e) => (k(), _(I(p), {
635
652
  key: e.id,
@@ -638,10 +655,10 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
638
655
  title: e.label,
639
656
  "aria-label": e.label ?? e.id
640
657
  }, {
641
- default: V(() => [B(e.icon) ? (k(), _(P(e.icon), {
658
+ default: V(() => [L(e.icon) ? (k(), _(P(e.icon), {
642
659
  key: 0,
643
660
  class: "size-4"
644
- })) : typeof e.icon == "string" ? (k(), y("span", xe, F(e.icon), 1)) : (k(), y("span", $, F((e.label ?? e.id).charAt(0)), 1))]),
661
+ })) : typeof e.icon == "string" ? (k(), y("span", Te, F(e.icon), 1)) : (k(), y("span", Ee, F((e.label ?? e.id).charAt(0)), 1))]),
645
662
  _: 2
646
663
  }, 1032, [
647
664
  "value",
@@ -655,15 +672,15 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
655
672
  ref_key: "containerEl",
656
673
  ref: a,
657
674
  class: "dock-layer-stack",
658
- style: ee(L.value),
675
+ style: ee(O.value),
659
676
  onTransitionend: r[1] ||= (...e) => I(T) && I(T)(...e)
660
677
  }, [N(t.$slots, "default")], 36)], 2));
661
678
  }
662
- }), Ce = [
679
+ }), $ = [
663
680
  "inert",
664
681
  "aria-hidden",
665
682
  "tabindex"
666
- ], we = /* @__PURE__ */ S({
683
+ ], Oe = /* @__PURE__ */ S({
667
684
  __name: "DockLayer",
668
685
  props: {
669
686
  id: {},
@@ -671,14 +688,14 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
671
688
  icon: {}
672
689
  },
673
690
  setup(e) {
674
- let t = e, n = Q();
675
- te(() => {
691
+ let t = e, n = Ce();
692
+ ne(() => {
676
693
  n.register({
677
694
  id: t.id,
678
695
  label: t.label,
679
696
  icon: t.icon
680
697
  });
681
- }), D(() => {
698
+ }), te(() => {
682
699
  n.unregister(t.id);
683
700
  });
684
701
  let r = g(() => n.currentLayerId.value === t.id), i = g(() => n.leavingLayerId.value === t.id), a = z("hostEl");
@@ -686,20 +703,20 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
686
703
  !e || t || typeof document < "u" && (() => {
687
704
  let e = document.activeElement;
688
705
  return !e || e === document.body ? !0 : !!e.closest("[inert]");
689
- })() && (await T(), a.value?.focus());
706
+ })() && (await E(), a.value?.focus());
690
707
  }), (e, t) => (k(), y("div", {
691
708
  ref_key: "hostEl",
692
709
  ref: a,
693
- class: E(["dock-layer-item-host", {
710
+ class: D(["dock-layer-item-host", {
694
711
  "is-active": r.value,
695
712
  "is-leaving": i.value
696
713
  }]),
697
714
  inert: r.value ? void 0 : !0,
698
715
  "aria-hidden": r.value ? void 0 : !0,
699
716
  tabindex: r.value ? -1 : void 0
700
- }, [N(e.$slots, "default")], 10, Ce));
717
+ }, [N(e.$slots, "default")], 10, $));
701
718
  }
702
- }), Te = /* @__PURE__ */ S({
719
+ }), ke = /* @__PURE__ */ S({
703
720
  __name: "DockIconButton",
704
721
  props: {
705
722
  compact: {
@@ -722,7 +739,7 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
722
739
  },
723
740
  setup(t) {
724
741
  let n = t, i = g(() => e("dock-icon-button glass-specular-track", { "dock-icon-button--compact": n.compact }, n.class)), { specularStyle: a, onPointerMove: o } = r(), s = g(() => !n.asChild && n.as === "button" ? { type: n.type } : {});
725
- return (e, n) => (k(), _(I(U), w({
742
+ return (e, n) => (k(), _(I(U), T({
726
743
  as: t.as,
727
744
  "as-child": t.asChild
728
745
  }, s.value, {
@@ -740,7 +757,7 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
740
757
  "onPointermove"
741
758
  ]));
742
759
  }
743
- }), Ee = /* @__PURE__ */ S({
760
+ }), Ae = /* @__PURE__ */ S({
744
761
  __name: "DockBackgroundToggle",
745
762
  props: {
746
763
  paused: {
@@ -756,18 +773,18 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
756
773
  function a() {
757
774
  r("update:paused", !n.paused);
758
775
  }
759
- return (t, n) => (k(), _(Te, {
776
+ return (t, n) => (k(), _(ke, {
760
777
  type: "button",
761
778
  "aria-pressed": e.paused,
762
779
  "aria-label": i.value,
763
780
  title: i.value,
764
781
  onClick: a
765
782
  }, {
766
- default: V(() => [e.paused ? (k(), _(I(q), {
783
+ default: V(() => [e.paused ? (k(), _(I(oe), {
767
784
  key: 0,
768
785
  size: 18,
769
786
  "aria-hidden": "true"
770
- })) : (k(), _(I(ie), {
787
+ })) : (k(), _(I(K), {
771
788
  key: 1,
772
789
  size: 18,
773
790
  "aria-hidden": "true"
@@ -779,7 +796,7 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
779
796
  "title"
780
797
  ]));
781
798
  }
782
- }), De = /* @__PURE__ */ S({
799
+ }), je = /* @__PURE__ */ S({
783
800
  __name: "DockTabButton",
784
801
  props: {
785
802
  as: { default: "button" },
@@ -800,7 +817,7 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
800
817
  return (e, n) => (k(), _(I(U), {
801
818
  as: t.as,
802
819
  "as-child": t.asChild,
803
- class: E(a.value)
820
+ class: D(a.value)
804
821
  }, {
805
822
  default: V(() => [N(e.$slots, "default")]),
806
823
  _: 3
@@ -810,7 +827,7 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
810
827
  "class"
811
828
  ]));
812
829
  }
813
- }), Oe = /* @__PURE__ */ S({
830
+ }), Me = /* @__PURE__ */ S({
814
831
  __name: "DockSelectTrigger",
815
832
  props: {
816
833
  disabled: { type: Boolean },
@@ -826,19 +843,19 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
826
843
  ] }
827
844
  },
828
845
  setup(t) {
829
- let r = t, i = G(g(() => {
846
+ let r = t, i = W(g(() => {
830
847
  let { class: e, ...t } = r;
831
848
  return t;
832
849
  }));
833
- return (t, a) => (k(), _(I(re), w(I(i), { class: I(e)("dock-select-trigger", r.class) }), {
834
- default: V(() => [N(t.$slots, "default"), x(I(W), { "as-child": "" }, {
850
+ return (t, a) => (k(), _(I(ae), T(I(i), { class: I(e)("dock-select-trigger", r.class) }), {
851
+ default: V(() => [N(t.$slots, "default"), x(I(ie), { "as-child": "" }, {
835
852
  default: V(() => [N(t.$slots, "icon", {}, () => [x(I(n), { class: "dock-select-trigger__chevron" })])]),
836
853
  _: 3
837
854
  })]),
838
855
  _: 3
839
856
  }, 16, ["class"]));
840
857
  }
841
- }), ke = /* @__PURE__ */ S({
858
+ }), Ne = /* @__PURE__ */ S({
842
859
  __name: "DockDropdownTrigger",
843
860
  props: {
844
861
  disabled: { type: Boolean },
@@ -854,15 +871,15 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
854
871
  ] }
855
872
  },
856
873
  setup(t) {
857
- let n = t, r = G(g(() => {
874
+ let n = t, r = W(g(() => {
858
875
  let { class: e, ...t } = n;
859
876
  return t;
860
877
  }));
861
- return (t, i) => (k(), _(I(H), w(I(r), { class: I(e)("dock-dropdown-trigger", n.class) }), {
878
+ return (t, i) => (k(), _(I(H), T(I(r), { class: I(e)("dock-dropdown-trigger", n.class) }), {
862
879
  default: V(() => [N(t.$slots, "default")]),
863
880
  _: 3
864
881
  }, 16, ["class"]));
865
882
  }
866
883
  });
867
884
  //#endregion
868
- export { u as DOCK_CONTEXT_KEY, Ee as DockBackgroundToggle, ke as DockDropdownTrigger, Te as DockIconButton, we as DockLayer, Se as DockLayerGroup, Oe as DockSelectTrigger, oe as DockSeparator, De as DockTabButton, X as GlassDock, c as provideDockContext, l as useDockContext, be as useLayerTransition, s as useOptionalDockContext };
885
+ export { u as DOCK_CONTEXT_KEY, Ae as DockBackgroundToggle, Ne as DockDropdownTrigger, ke as DockIconButton, Oe as DockLayer, De as DockLayerGroup, Me as DockSelectTrigger, ce as DockSeparator, je as DockTabButton, Se as GlassDock, c as provideDockContext, l as useDockContext, Q as useLayerTransition, s as useOptionalDockContext };