@mkbabb/glass-ui 3.4.0 → 3.5.1

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 (65) hide show
  1. package/dist/{DataTable-FfkaAg2z.js → DataTable-DyKc_26a.js} +144 -106
  2. package/dist/{NumberFieldContent-iOTQ5rGO.js → NumberFieldContent-jO-zGOHf.js} +1 -1
  3. package/dist/api/index.d.ts +1 -0
  4. package/dist/{button-Ckn3eDfB.js → button-i8Ek5vvg.js} +1 -1
  5. package/dist/button.js +1 -1
  6. package/dist/carousel.js +1 -1
  7. package/dist/components/custom/deck-progress/DeckProgress.vue.d.ts +27 -0
  8. package/dist/components/custom/deck-progress/index.d.ts +2 -0
  9. package/dist/components/custom/dock/composables/useLayerTransition.d.ts +11 -0
  10. package/dist/components/ui/data-table/composables/useDataTableResponsive.d.ts +28 -0
  11. package/dist/components/ui/data-table/composables/useDataTableRowIdentity.d.ts +33 -0
  12. package/dist/composables/dark/useGlobalDark.d.ts +17 -6
  13. package/dist/composables/dom/index.d.ts +3 -0
  14. package/dist/composables/dom/useBreakpoint.d.ts +38 -0
  15. package/dist/composables/dom/useIdleReady.d.ts +63 -0
  16. package/dist/composables/dom/useTokenColor.d.ts +13 -0
  17. package/dist/composables/dom/useViewportReady.d.ts +87 -0
  18. package/dist/composables/glass/index.d.ts +1 -1
  19. package/dist/composables/glass/useGlassRenderer.d.ts +10 -3
  20. package/dist/composables/motion/core/index.d.ts +1 -0
  21. package/dist/composables/motion/index.d.ts +1 -0
  22. package/dist/composables/motion/useAnimatedNumber.d.ts +8 -2
  23. package/dist/composables/motion/useAnimatedNumberMap.d.ts +29 -0
  24. package/dist/composables/motion/useCountup.d.ts +8 -2
  25. package/dist/composables/motion/useNumericTransition.d.ts +17 -6
  26. package/dist/composables/motion/useStagger.d.ts +50 -0
  27. package/dist/composables/motion/useViewTransition.d.ts +16 -1
  28. package/dist/confirm-dialog.js +1 -1
  29. package/dist/data-table.js +1 -1
  30. package/dist/dock.js +169 -158
  31. package/dist/dom.js +4 -4
  32. package/dist/glass-panel.js +14 -14
  33. package/dist/glass-ui.css +1 -1
  34. package/dist/glass-ui.js +134 -119
  35. package/dist/goo-blob.js +108 -89
  36. package/dist/index.d.ts +1 -0
  37. package/dist/labeled-field.js +1 -1
  38. package/dist/motion-core.js +88 -47
  39. package/dist/motion.js +29 -19
  40. package/dist/number-field.js +1 -1
  41. package/dist/search.js +1 -1
  42. package/dist/{slider-BOh8ycfZ.js → slider-CgNzRSh6.js} +1 -1
  43. package/dist/slider.js +1 -1
  44. package/dist/styles/components.css +1 -1
  45. package/dist/styles/dock.css +91 -36
  46. package/dist/styles/glass.css +44 -1
  47. package/dist/styles/instrument-chassis.css +10 -13
  48. package/dist/styles/instrument-rail.css +11 -12
  49. package/dist/styles/tokens.css +9 -7
  50. package/dist/styles/utilities.css +20 -0
  51. package/dist/styles/view-transition.css +24 -0
  52. package/dist/tabs.js +1 -1
  53. package/dist/timeline.js +1 -1
  54. package/dist/useViewTransition-CJnqg6wl.js +21 -0
  55. package/dist/useViewportReady-Dcvf0c4p.js +191 -0
  56. package/package.json +2 -1
  57. package/src/styles/dock.css +91 -36
  58. package/src/styles/glass.css +44 -1
  59. package/src/styles/instrument-chassis.css +10 -13
  60. package/src/styles/instrument-rail.css +11 -12
  61. package/src/styles/tokens.css +9 -7
  62. package/src/styles/utilities.css +20 -0
  63. package/src/styles/view-transition.css +24 -0
  64. package/dist/useClipboard-D8vFyRCa.js +0 -97
  65. package/dist/useViewTransition-D4ssvnXZ.js +0 -18
@@ -17,6 +17,9 @@
17
17
 
18
18
  @layer components {
19
19
  .instrument-rail {
20
+ /* AW.W15 — consume the shared twin-line α pair (the sibling-divider
21
+ ::before/::after rules below read --twin-line-catch/--twin-line-shadow). */
22
+ @apply twin-line-divider;
20
23
  position: relative;
21
24
  display: flex;
22
25
  flex-direction: column;
@@ -71,13 +74,17 @@
71
74
  a sibling ::before/::after stack keeps consumers free of manual
72
75
  <ChassisDivider> slotting. Status header is excluded — the
73
76
  opening-edge status light reads as a region, not a sibling. */
77
+ /* AW.W15 — the twin-line α pair reads from the shared `twin-line-divider`
78
+ tokens (`@apply`ed on `.instrument-rail` above; dark-adaptive there), so
79
+ the prior per-variant light pair + the `.dark` re-declaration collapse
80
+ onto the single source. */
74
81
  .instrument-rail[data-divider-rule][data-variant="vertical"]
75
82
  > :not(:first-child):not(.instrument-rail-status)::before {
76
83
  content: "";
77
84
  display: block;
78
85
  height: 1px;
79
86
  margin-block-end: 1px;
80
- background: rgb(255 255 255 / 0.10);
87
+ background: var(--twin-line-catch);
81
88
  }
82
89
 
83
90
  .instrument-rail[data-divider-rule][data-variant="vertical"]
@@ -86,7 +93,7 @@
86
93
  display: block;
87
94
  height: 1px;
88
95
  margin-block-start: -1px;
89
- background: rgb(0 0 0 / 0.12);
96
+ background: var(--twin-line-shadow);
90
97
  }
91
98
 
92
99
  .instrument-rail[data-divider-rule][data-variant="horizontal"]
@@ -95,7 +102,7 @@
95
102
  display: block;
96
103
  width: 1px;
97
104
  margin-inline-end: 1px;
98
- background: rgb(255 255 255 / 0.10);
105
+ background: var(--twin-line-catch);
99
106
  }
100
107
 
101
108
  .instrument-rail[data-divider-rule][data-variant="horizontal"]
@@ -104,15 +111,7 @@
104
111
  display: block;
105
112
  width: 1px;
106
113
  margin-inline-start: -1px;
107
- background: rgb(0 0 0 / 0.12);
108
- }
109
-
110
- .dark .instrument-rail[data-divider-rule] > :not(:first-child):not(.instrument-rail-status)::before {
111
- background: rgb(255 255 255 / 0.06);
112
- }
113
-
114
- .dark .instrument-rail[data-divider-rule] > :not(:first-child):not(.instrument-rail-status)::after {
115
- background: rgb(0 0 0 / 0.18);
114
+ background: var(--twin-line-shadow);
116
115
  }
117
116
 
118
117
  /* Status header — pinned to the opening edge, flush against the
@@ -146,7 +146,7 @@
146
146
  snappy: (0.35s, ζ=0.65) — quick crisp, overshoot ~+6.8%
147
147
  bouncy: (0.50s, ζ=0.45) — emphatic overshoot ~+20.5%
148
148
  gentle: (0.70s, ζ=1.00) — patient critically-damped
149
- dock: (0.50s, ζ=0.50) — dock expand/collapse morph, overshoot ~+18.5%
149
+ dock: (0.32s, ζ=0.70) — dock expand/collapse morph, overshoot ~+4.6%
150
150
 
151
151
  Note on `smooth`: at ζ=0.86 the analytic solver produces a peak
152
152
  of 1.00498 (+0.5%) at the 24% slot — mathematically present but
@@ -160,7 +160,7 @@
160
160
  --spring-snappy: linear(0, 0.10438 2.041%, 0.32622 4.082%, 0.56668 6.122%, 0.77153 8.163%, 0.91961 10.204%, 1.01073 12.245%, 1.05549 14.286%, 1.06804 16.327%, 1.06171 18.367%, 1.04686 20.408%, 1.03044 22.449%, 1.01629 24.490%, 1.00596 26.531%, 0.99954 28.571%, 0.99633 30.612%, 0.99537 32.653%, 0.99575 34.694%, 0.99674 36.735%, 0.99786 38.776%, 0.99884 40.816%, 0.99956 42.857%, 1.00001 44.898%, 1.00024 46.939%, 1.00000 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
161
161
  --spring-bouncy: linear(0, 0.11105 2.041%, 0.36430 4.082%, 0.65496 6.122%, 0.90929 8.163%, 1.08828 10.204%, 1.18289 12.245%, 1.20482 14.286%, 1.17641 16.327%, 1.12214 18.367%, 1.06276 20.408%, 1.01239 22.449%, 0.97809 24.490%, 0.96099 26.531%, 0.95826 28.571%, 0.96514 30.612%, 0.97666 32.653%, 0.98873 34.694%, 0.99867 36.735%, 1.00520 38.776%, 1.00825 40.816%, 1.00847 42.857%, 1.00686 44.898%, 1.00443 46.939%, 1.00199 48.980%, 1.00004 51.020%, 0.99880 53.061%, 0.99827 55.102%, 0.99829 57.143%, 0.99866 59.184%, 0.99916 61.224%, 0.99966 63.265%, 1.00004 65.306%, 1.00027 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
162
162
  --spring-gentle: linear(0, 0.09415 2.041%, 0.27374 4.082%, 0.45506 6.122%, 0.60779 8.163%, 0.72570 10.204%, 0.81213 12.245%, 0.87336 14.286%, 0.91570 16.327%, 0.94445 18.367%, 0.96371 20.408%, 0.97645 22.449%, 0.98481 24.490%, 0.99025 26.531%, 0.99377 28.571%, 0.99604 30.612%, 0.99749 32.653%, 0.99841 34.694%, 0.99900 36.735%, 0.99937 38.776%, 0.99961 40.816%, 0.99975 42.857%, 0.99985 44.898%, 1.00000 46.939%, 1.00000 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
163
- --spring-dock: linear(0, 0.10932 2.041%, 0.35412 4.082%, 0.63074 6.122%, 0.87072 8.163%, 1.04044 10.204%, 1.13391 12.245%, 1.16292 14.286%, 1.14748 16.327%, 1.10854 18.367%, 1.06337 20.408%, 1.02357 22.449%, 0.99499 24.490%, 0.97889 26.531%, 0.97350 28.571%, 0.97561 30.612%, 0.98178 32.653%, 0.98915 34.694%, 0.99574 36.735%, 1.00055 38.776%, 1.00332 40.816%, 1.00431 42.857%, 1.00403 44.898%, 1.00305 46.939%, 1.00186 48.980%, 1.00076 51.020%, 0.99996 53.061%, 0.99948 55.102%, 0.99930 57.143%, 0.99933 59.184%, 0.99949 61.224%, 0.99968 63.265%, 0.99986 65.306%, 1.00000 67.347%, 1.00008 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
163
+ --spring-dock: linear(0, 0.10282 2.041%, 0.31773 4.082%, 0.54783 6.122%, 0.74309 8.163%, 0.88550 10.204%, 0.97598 12.245%, 1.02452 14.286%, 1.04368 16.327%, 1.04501 18.367%, 1.03739 20.408%, 1.02681 22.449%, 1.01672 24.490%, 1.00873 26.531%, 1.00323 28.571%, 0.99996 30.612%, 0.99837 32.653%, 0.99789 34.694%, 0.99805 36.735%, 0.99848 38.776%, 0.99897 40.816%, 0.99940 42.857%, 0.99972 44.898%, 0.99993 46.939%, 1.00004 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
164
164
 
165
165
  /* Core cubic-bezier (exits, fallbacks, non-spring uses) */
166
166
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1287,17 +1287,19 @@
1287
1287
  both engine paths are timing-IDENTICAL: the FLIP fallback (via
1288
1288
  `--dock-motion-resize`), the native View-Transition group (its
1289
1289
  `animation-timing-function`), AND the runtime SpringProgress driver
1290
- (AU.W8.3) consume this same `(0.5, 0.5)` source curve. Retires the AQ.W6
1290
+ (AU.W8.3) consume this same `(0.32, 0.7)` source curve. Retires the AQ.W6
1291
1291
  fork where the VT path ran `--vt-ease` (apple-spring, +27.5% overshoot)
1292
1292
  while the FLIP ran the snappy spring. `--vt-ease` still defaults the
1293
1293
  other VT recipes (`.gl-list-item`).
1294
1294
 
1295
1295
  AU.W8 — RETARGET snappy → dock. `--spring-snappy` (ζ=0.65, +6.8%) read as
1296
1296
  mechanical: a stiff plateau at ~48% with too little overshoot to feel
1297
- alive ("not iOS-smooth"). `--spring-dock` ((0.5, 0.5), ~+18.5%) sits in
1298
- the springy 15-30% band — the user-felt iOS bounce. The runtime driver's
1299
- DOCK_SPRING const MIRRORS the (0.5, 0.5) PRESETS row, so the CSS token and
1300
- the JS-driven morph are bit-identical. */
1297
+ alive ("not iOS-smooth"). AW.W2 then retuned the dock spring to the
1298
+ iOS-control register: `--spring-dock` ((0.32, 0.7), ~+4.6%) settles snappy
1299
+ with a restrained overshoot — the felt iOS dock morph, off the prior
1300
+ playful +18.5% register. The runtime driver's DOCK_SPRING const MIRRORS the
1301
+ (0.32, 0.7) PRESETS row, so the CSS token and the JS-driven morph are
1302
+ bit-identical. */
1301
1303
  --dock-resize-spring: var(--spring-dock);
1302
1304
 
1303
1305
  /* AT.W7-dock-b — dock-control press micro-feedback spring. A TRANSFORM-ONLY
@@ -688,6 +688,26 @@
688
688
  }
689
689
  }
690
690
 
691
+ /* ── Twin-line divider — the chassis catch-light / under-shadow groove ───────
692
+ AW.W15 DRY extraction. The twin-line idiom (a 1px white catch-light over a
693
+ 1px black under-shadow reading as one engraved hairline groove) is the
694
+ chassis-divider signature. The exact light/dark α pair was DUPLICATED in
695
+ `instrument-chassis.css` (`.bezel-line.top`/`.bottom`) and `instrument-rail.css`
696
+ (the sibling `::before`/`::after`). This utility is the SINGLE source of that
697
+ α pair: it publishes `--twin-line-catch` (the top catch-light) and
698
+ `--twin-line-shadow` (the bottom under-shadow) as cascade tokens, dark-adaptive
699
+ by construction (the `.dark &` arm re-resolves them). Both consumers read the
700
+ tokens; a retint touches one rule. Real DRY, ≥2 consumers. */
701
+ @utility twin-line-divider {
702
+ --twin-line-catch: rgb(255 255 255 / 0.10);
703
+ --twin-line-shadow: rgb(0 0 0 / 0.12);
704
+
705
+ :where(.dark) & {
706
+ --twin-line-catch: rgb(255 255 255 / 0.06);
707
+ --twin-line-shadow: rgb(0 0 0 / 0.18);
708
+ }
709
+ }
710
+
691
711
  /* ── Control transition recipe (AU.W8b.4) ───────────────────────────────
692
712
  Shared compound transition for interactive controls that animate their
693
713
  surface (background-color/color/box-shadow/border-color) on the four-state
@@ -61,6 +61,30 @@
61
61
  animation-timing-function: var(--dock-resize-spring, var(--spring-dock));
62
62
  }
63
63
 
64
+ /* AW.W3 — typed directional dock curves. The swap tags the active transition
65
+ * `dock-expand` / `dock-collapse` (the outer collapsed↔expanded pair) and
66
+ * `layer-forward` / `layer-back` (the inner DockLayerGroup pane swap) via the
67
+ * `types` argument to `startViewTransition` (Chrome 140+; feature-detected, the
68
+ * untyped fallback is the symmetric `.gl-dock-layer` curve above). iOS-feel
69
+ * motion is ASYMMETRIC — a snappier exit, a softer entry-overshoot. EXPAND
70
+ * (and forward) lead with the overshooting `--spring-dock`; COLLAPSE (and back)
71
+ * exit on the non-overshooting `--spring-snappy` (a quicker settle, no bounce on
72
+ * the way out). The shorter `--duration-fast` on the exit reads as the crisp
73
+ * dismiss. A non-typed engine never matches these — it runs the symmetric curve,
74
+ * which is the acceptable contract. PRM zeroes the animation (the `@media` at
75
+ * the top of this file). */
76
+ :active-view-transition-type(dock-expand) ::view-transition-group(.gl-dock-layer),
77
+ :active-view-transition-type(layer-forward) ::view-transition-group(.gl-dock-layer) {
78
+ animation-duration: var(--vt-duration, var(--duration-normal));
79
+ animation-timing-function: var(--dock-resize-spring, var(--spring-dock));
80
+ }
81
+
82
+ :active-view-transition-type(dock-collapse) ::view-transition-group(.gl-dock-layer),
83
+ :active-view-transition-type(layer-back) ::view-transition-group(.gl-dock-layer) {
84
+ animation-duration: var(--vt-duration-exit, var(--duration-fast));
85
+ animation-timing-function: var(--spring-snappy);
86
+ }
87
+
64
88
  @keyframes gl-vt-slide-in { from { opacity: 0; translate: 0 var(--vt-rise, 8px); } }
65
89
  @keyframes gl-vt-slide-out { to { opacity: 0; translate: 0 var(--vt-rise, 8px); } }
66
90
 
@@ -1,97 +0,0 @@
1
- import { getCurrentScope as e, onMounted as t, onScopeDispose as n, ref as r, toValue as i, watch as a } from "vue";
2
- //#region src/composables/dom/useTokenColor.ts
3
- function o(o, s = {}) {
4
- let c = s.fallback ?? "", l = r(c);
5
- function u() {
6
- if (typeof document > "u") return c;
7
- let e = i(o);
8
- if (!e) return c;
9
- let t = (s.element ? i(s.element) : null) ?? document.documentElement;
10
- return t && getComputedStyle(t).getPropertyValue(e).trim() || c;
11
- }
12
- function d() {
13
- l.value = u();
14
- }
15
- if (d(), t(d), typeof document < "u") {
16
- let t = new MutationObserver(d);
17
- t.observe(document.documentElement, {
18
- attributes: !0,
19
- attributeFilter: ["class"]
20
- });
21
- let r = typeof window < "u" && window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
22
- r?.addEventListener?.("change", d), e() && n(() => {
23
- t.disconnect(), r?.removeEventListener?.("change", d);
24
- });
25
- }
26
- return a(() => i(o), d), s.element !== void 0 && a(() => i(s.element), d), {
27
- value: l,
28
- refresh: d
29
- };
30
- }
31
- //#endregion
32
- //#region src/composables/dom/useClipboard.ts
33
- async function s(e) {
34
- if (typeof navigator > "u" || !navigator.clipboard?.writeText) return {
35
- ok: !1,
36
- reason: "no-api"
37
- };
38
- try {
39
- return await navigator.clipboard.writeText(e), { ok: !0 };
40
- } catch {
41
- return {
42
- ok: !1,
43
- reason: "clipboard-api"
44
- };
45
- }
46
- }
47
- function c(e) {
48
- if (typeof document > "u") return {
49
- ok: !1,
50
- reason: "no-api"
51
- };
52
- let t = document.createElement("textarea");
53
- t.value = e, t.setAttribute("readonly", ""), t.style.position = "fixed", t.style.top = "-9999px", document.body.appendChild(t), t.select();
54
- let n = !1;
55
- try {
56
- n = document.execCommand("copy");
57
- } catch {
58
- n = !1;
59
- }
60
- return document.body.removeChild(t), n ? { ok: !0 } : {
61
- ok: !1,
62
- reason: "exec-command"
63
- };
64
- }
65
- async function l(e, t) {
66
- let n = await s(e);
67
- if (n.ok) return n;
68
- let r = c(e);
69
- if (r.ok) return r;
70
- let i = r.reason ?? n.reason ?? "no-api";
71
- return t?.(i), {
72
- ok: !1,
73
- reason: i
74
- };
75
- }
76
- async function u(e, t = {}) {
77
- let { ok: n } = await l(e, t.onCopyError);
78
- return n;
79
- }
80
- function d(e = {}) {
81
- let t = e.resetMs ?? 1500, i = r(!1), a = null;
82
- function o() {
83
- a != null && (clearTimeout(a), a = null);
84
- }
85
- async function s(n) {
86
- let r = await l(n, e.onCopyError);
87
- return r.ok && (i.value = !0, o(), a = setTimeout(() => {
88
- i.value = !1, a = null;
89
- }, t)), r;
90
- }
91
- return n(o), {
92
- copied: i,
93
- copy: s
94
- };
95
- }
96
- //#endregion
97
- export { d as n, o as r, u as t };
@@ -1,18 +0,0 @@
1
- //#region src/composables/motion/useViewTransition.ts
2
- function e() {
3
- return typeof document < "u" && typeof document.startViewTransition == "function";
4
- }
5
- function t(e) {
6
- let t = typeof document > "u" ? void 0 : document;
7
- if (!t || typeof t.startViewTransition != "function") return e(), {
8
- finished: Promise.resolve(),
9
- transitioned: !1
10
- };
11
- let n = t.startViewTransition(() => e());
12
- return n.ready?.catch(() => {}), {
13
- finished: n.finished.then(() => void 0, () => void 0),
14
- transitioned: !0
15
- };
16
- }
17
- //#endregion
18
- export { e as n, t };