@joewinke/jatui 0.2.11 → 0.2.13
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.
- package/dist/actions/attention.js +21 -13
- package/dist/actions/collapse.js +15 -29
- package/dist/actions/floating.js +29 -37
- package/dist/actions/listNav.js +108 -137
- package/dist/actions/railNav.js +72 -89
- package/dist/actions/staggerEntrance.js +19 -23
- package/dist/actions/tooltip.js +63 -51
- package/dist/assets/sounds/error.js +1 -1
- package/dist/assets/sounds/notify.js +1 -1
- package/dist/assets/sounds/pop.js +1 -1
- package/dist/assets/sounds/send.js +1 -1
- package/dist/assets/sounds/success.js +1 -1
- package/dist/assets/sounds/toggle.js +1 -1
- package/dist/components/graph/theme.js +26 -36
- package/dist/components/markup.js +59 -62
- package/dist/components/session-nav/transcriptModel.js +49 -66
- package/dist/components/shell/shell.js +14 -15
- package/dist/components/table/flexRender.js +2 -2
- package/dist/data/emojis.js +4 -4
- package/dist/dnd/autoScroll.js +10 -12
- package/dist/dnd/createDndBoard.js +104 -184
- package/dist/dnd/draggable.js +15 -23
- package/dist/dnd/dropTarget.js +15 -29
- package/dist/dnd/types.d.ts +9 -0
- package/dist/dnd/types.js +2 -14
- package/dist/showcase/generative/intent.js +19 -21
- package/dist/showcase/generative/manifest.js +27 -80
- package/dist/showcase/scroll/scrollProgress.js +20 -22
- package/dist/showcase/scroll/scrollReveal.js +17 -20
- package/dist/stores/commandPalette.js +18 -46
- package/dist/stores/confirmDialog.js +9 -9
- package/dist/stores/inputDialog.js +9 -9
- package/dist/stores/toast.js +10 -33
- package/dist/transitions/glide.js +29 -25
- package/dist/types/booking.js +4 -4
- package/dist/types/comments.js +2 -2
- package/dist/types/messaging.js +3 -3
- package/dist/types/pipeline.js +2 -2
- package/dist/utils/currency.js +2 -4
- package/dist/utils/daisyuiColors.js +25 -27
- package/dist/utils/dateFormatters.js +44 -44
- package/dist/utils/googleMapsLoader.js +46 -100
- package/dist/utils/mentionParser.js +30 -30
- package/dist/utils/phone.js +21 -27
- package/dist/utils/phoneFormat.js +9 -9
- package/dist/utils/sound.js +27 -78
- package/dist/utils/splitText.js +15 -26
- package/dist/utils/taskUtils.js +1 -1
- package/dist/utils/themeWipe.js +27 -72
- package/dist/utils/viewTransition.js +6 -51
- package/package.json +7 -3
- package/dist/dnd/createDndBoard.test.d.ts +0 -1
- package/dist/dnd/createDndBoard.test.js +0 -261
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
* Reduced-motion: skipped entirely.
|
|
15
15
|
*/
|
|
16
16
|
export function attention(node, options) {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
let currentTrigger = options.trigger;
|
|
18
|
+
let pingEl = null;
|
|
19
|
+
let shakeId = null;
|
|
20
20
|
function prefersReduced() {
|
|
21
21
|
return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
22
22
|
}
|
|
@@ -39,7 +39,7 @@ export function attention(node, options) {
|
|
|
39
39
|
clearShake();
|
|
40
40
|
// 3 oscillations × 2 half-cycles = 6 keyframe segments in ~280ms
|
|
41
41
|
// translate: 0 → +5px → -5px → +4px → -4px → +2px → 0
|
|
42
|
-
|
|
42
|
+
const kf = [
|
|
43
43
|
{ transform: 'translateX(0)' },
|
|
44
44
|
{ transform: 'translateX(5px)' },
|
|
45
45
|
{ transform: 'translateX(-5px)' },
|
|
@@ -54,20 +54,28 @@ export function attention(node, options) {
|
|
|
54
54
|
if (prefersReduced())
|
|
55
55
|
return;
|
|
56
56
|
clearPing();
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
const rect = node.getBoundingClientRect();
|
|
58
|
+
const size = Math.max(rect.width, rect.height);
|
|
59
59
|
// Ensure node is position-capable for the pseudo-ring
|
|
60
|
-
|
|
60
|
+
const pos = getComputedStyle(node).position;
|
|
61
61
|
if (pos === 'static')
|
|
62
62
|
node.style.position = 'relative';
|
|
63
63
|
pingEl = document.createElement('span');
|
|
64
|
-
pingEl.style.cssText =
|
|
64
|
+
pingEl.style.cssText = `
|
|
65
|
+
position:absolute;
|
|
66
|
+
inset:-4px;
|
|
67
|
+
border-radius:inherit;
|
|
68
|
+
border:2px solid currentColor;
|
|
69
|
+
opacity:0.7;
|
|
70
|
+
pointer-events:none;
|
|
71
|
+
z-index:-1;
|
|
72
|
+
`;
|
|
65
73
|
node.appendChild(pingEl);
|
|
66
|
-
|
|
74
|
+
const scale = 1 + 24 / size;
|
|
67
75
|
pingEl.animate([
|
|
68
76
|
{ transform: 'scale(1)', opacity: '0.7' },
|
|
69
|
-
{ transform:
|
|
70
|
-
], { duration: 600, easing: 'ease-out', fill: 'forwards' }).onfinish =
|
|
77
|
+
{ transform: `scale(${scale.toFixed(2)})`, opacity: '0' }
|
|
78
|
+
], { duration: 600, easing: 'ease-out', fill: 'forwards' }).onfinish = () => clearPing();
|
|
71
79
|
}
|
|
72
80
|
function fire(effect) {
|
|
73
81
|
if (effect === 'shake')
|
|
@@ -80,13 +88,13 @@ export function attention(node, options) {
|
|
|
80
88
|
fire(options.effect);
|
|
81
89
|
}
|
|
82
90
|
return {
|
|
83
|
-
update
|
|
91
|
+
update(newOptions) {
|
|
84
92
|
if (newOptions.trigger !== currentTrigger) {
|
|
85
93
|
currentTrigger = newOptions.trigger;
|
|
86
94
|
fire(newOptions.effect);
|
|
87
95
|
}
|
|
88
96
|
},
|
|
89
|
-
destroy
|
|
97
|
+
destroy() {
|
|
90
98
|
clearShake();
|
|
91
99
|
clearPing();
|
|
92
100
|
}
|
package/dist/actions/collapse.js
CHANGED
|
@@ -58,34 +58,22 @@
|
|
|
58
58
|
* state (e.g. a `SvelteSet` of ids, with the id interpolating the row's own id) —
|
|
59
59
|
* one action instance attaches per row element.
|
|
60
60
|
*/
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}
|
|
68
|
-
return t;
|
|
69
|
-
};
|
|
70
|
-
return __assign.apply(this, arguments);
|
|
71
|
-
};
|
|
72
|
-
var DEFAULTS = { threshold: 120, expanded: false, fadeStart: 55, epsilon: 4 };
|
|
73
|
-
export function collapse(node, options) {
|
|
74
|
-
if (options === void 0) { options = {}; }
|
|
75
|
-
var opts = __assign(__assign({}, DEFAULTS), options);
|
|
76
|
-
var collapsible = false;
|
|
77
|
-
var rafId = 0;
|
|
78
|
-
var applied = false;
|
|
61
|
+
const DEFAULTS = { threshold: 120, expanded: false, fadeStart: 55, epsilon: 4 };
|
|
62
|
+
export function collapse(node, options = {}) {
|
|
63
|
+
let opts = { ...DEFAULTS, ...options };
|
|
64
|
+
let collapsible = false;
|
|
65
|
+
let rafId = 0;
|
|
66
|
+
let applied = false;
|
|
79
67
|
function gradient() {
|
|
80
|
-
return
|
|
68
|
+
return `linear-gradient(to bottom, black ${opts.fadeStart}%, transparent 100%)`;
|
|
81
69
|
}
|
|
82
70
|
function apply() {
|
|
83
|
-
|
|
71
|
+
const shouldCollapse = collapsible && !opts.expanded;
|
|
84
72
|
if (shouldCollapse === applied)
|
|
85
73
|
return; // idempotent — avoids RO feedback loops
|
|
86
74
|
applied = shouldCollapse;
|
|
87
75
|
if (shouldCollapse) {
|
|
88
|
-
node.style.maxHeight =
|
|
76
|
+
node.style.maxHeight = `${opts.threshold}px`;
|
|
89
77
|
node.style.overflow = 'hidden';
|
|
90
78
|
node.style.maskImage = gradient();
|
|
91
79
|
node.style.webkitMaskImage = gradient();
|
|
@@ -98,12 +86,11 @@ export function collapse(node, options) {
|
|
|
98
86
|
}
|
|
99
87
|
}
|
|
100
88
|
function measure() {
|
|
101
|
-
var _a;
|
|
102
89
|
// scrollHeight is the full content height even while collapsed.
|
|
103
|
-
|
|
90
|
+
const next = node.scrollHeight > opts.threshold + opts.epsilon;
|
|
104
91
|
if (next !== collapsible) {
|
|
105
92
|
collapsible = next;
|
|
106
|
-
|
|
93
|
+
opts.onCollapsible?.(collapsible);
|
|
107
94
|
}
|
|
108
95
|
apply();
|
|
109
96
|
}
|
|
@@ -112,13 +99,12 @@ export function collapse(node, options) {
|
|
|
112
99
|
rafId = requestAnimationFrame(measure);
|
|
113
100
|
}
|
|
114
101
|
// Re-measure when the content's natural size changes (streaming, {@html}, lazy images).
|
|
115
|
-
|
|
102
|
+
const ro = new ResizeObserver(scheduleMeasure);
|
|
116
103
|
ro.observe(node);
|
|
117
104
|
scheduleMeasure();
|
|
118
105
|
return {
|
|
119
|
-
update
|
|
120
|
-
|
|
121
|
-
opts = __assign(__assign({}, DEFAULTS), next);
|
|
106
|
+
update(next = {}) {
|
|
107
|
+
opts = { ...DEFAULTS, ...next };
|
|
122
108
|
// expanded/threshold/fade may have changed — re-measure and let
|
|
123
109
|
// apply() compare the freshly computed shouldCollapse against the
|
|
124
110
|
// real last-applied state. (Force-flipping `applied` here used to make
|
|
@@ -126,7 +112,7 @@ export function collapse(node, options) {
|
|
|
126
112
|
// silently skipping the style update.)
|
|
127
113
|
scheduleMeasure();
|
|
128
114
|
},
|
|
129
|
-
destroy
|
|
115
|
+
destroy() {
|
|
130
116
|
cancelAnimationFrame(rafId);
|
|
131
117
|
ro.disconnect();
|
|
132
118
|
},
|
package/dist/actions/floating.js
CHANGED
|
@@ -26,17 +26,6 @@
|
|
|
26
26
|
* - The node must already carry role="menu" / role="listbox" etc. — this action
|
|
27
27
|
* does not set ARIA roles.
|
|
28
28
|
*/
|
|
29
|
-
var __assign = (this && this.__assign) || function () {
|
|
30
|
-
__assign = Object.assign || function(t) {
|
|
31
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
32
|
-
s = arguments[i];
|
|
33
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
34
|
-
t[p] = s[p];
|
|
35
|
-
}
|
|
36
|
-
return t;
|
|
37
|
-
};
|
|
38
|
-
return __assign.apply(this, arguments);
|
|
39
|
-
};
|
|
40
29
|
import { computePosition, autoUpdate, flip, shift, offset as fuOffset } from '@floating-ui/dom';
|
|
41
30
|
/**
|
|
42
31
|
* Create a virtual anchor from a viewport point (e.g. cursor coordinates).
|
|
@@ -44,17 +33,17 @@ import { computePosition, autoUpdate, flip, shift, offset as fuOffset } from '@f
|
|
|
44
33
|
*/
|
|
45
34
|
export function makeVirtualAnchor(x, y) {
|
|
46
35
|
return {
|
|
47
|
-
getBoundingClientRect
|
|
36
|
+
getBoundingClientRect() {
|
|
48
37
|
return {
|
|
49
38
|
width: 0,
|
|
50
39
|
height: 0,
|
|
51
|
-
x
|
|
52
|
-
y
|
|
40
|
+
x,
|
|
41
|
+
y,
|
|
53
42
|
top: y,
|
|
54
43
|
left: x,
|
|
55
44
|
right: x,
|
|
56
45
|
bottom: y,
|
|
57
|
-
toJSON
|
|
46
|
+
toJSON() { return this; }
|
|
58
47
|
};
|
|
59
48
|
}
|
|
60
49
|
};
|
|
@@ -64,23 +53,29 @@ function prefersReducedMotion() {
|
|
|
64
53
|
window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
65
54
|
}
|
|
66
55
|
export function floating(node, options) {
|
|
67
|
-
|
|
68
|
-
|
|
56
|
+
let opts = {
|
|
57
|
+
placement: 'bottom-start',
|
|
58
|
+
flip: true,
|
|
59
|
+
shift: true,
|
|
60
|
+
offset: 4,
|
|
61
|
+
...options
|
|
62
|
+
};
|
|
63
|
+
let cleanup = null;
|
|
69
64
|
// Remember the element focused before this floating opened so we can return focus on dismiss.
|
|
70
|
-
|
|
65
|
+
const returnFocusTarget = document.activeElement;
|
|
71
66
|
// Entrance animation
|
|
72
67
|
node.style.opacity = '0';
|
|
73
68
|
node.style.transform = 'translateY(2px)';
|
|
74
69
|
node.style.transition = prefersReducedMotion()
|
|
75
70
|
? 'none'
|
|
76
71
|
: [
|
|
77
|
-
|
|
78
|
-
|
|
72
|
+
`opacity var(--motion-fast, 150ms) var(--motion-glide, cubic-bezier(0.16,1,0.3,1))`,
|
|
73
|
+
`transform var(--motion-fast, 150ms) var(--motion-glide, cubic-bezier(0.16,1,0.3,1))`
|
|
79
74
|
].join(', ');
|
|
80
75
|
function applyPosition() {
|
|
81
76
|
if (!opts.anchor)
|
|
82
77
|
return;
|
|
83
|
-
|
|
78
|
+
const middlewares = [];
|
|
84
79
|
if (opts.offset != null)
|
|
85
80
|
middlewares.push(fuOffset(opts.offset));
|
|
86
81
|
if (opts.flip)
|
|
@@ -91,21 +86,20 @@ export function floating(node, options) {
|
|
|
91
86
|
placement: opts.placement,
|
|
92
87
|
strategy: 'fixed',
|
|
93
88
|
middleware: middlewares,
|
|
94
|
-
}).then(
|
|
95
|
-
var x = _a.x, y = _a.y;
|
|
89
|
+
}).then(({ x, y }) => {
|
|
96
90
|
node.style.position = 'fixed';
|
|
97
|
-
node.style.left =
|
|
98
|
-
node.style.top =
|
|
91
|
+
node.style.left = `${x}px`;
|
|
92
|
+
node.style.top = `${y}px`;
|
|
99
93
|
});
|
|
100
94
|
}
|
|
101
95
|
function startAutoUpdate() {
|
|
102
|
-
cleanup
|
|
96
|
+
cleanup?.();
|
|
103
97
|
cleanup = null;
|
|
104
98
|
if (!opts.anchor)
|
|
105
99
|
return;
|
|
106
100
|
// For virtual anchors (plain objects), autoUpdate won't observe DOM mutations
|
|
107
101
|
// on the reference. That's fine — the caller re-runs update() when coords change.
|
|
108
|
-
|
|
102
|
+
const isVirtual = !('nodeType' in opts.anchor);
|
|
109
103
|
if (isVirtual) {
|
|
110
104
|
applyPosition();
|
|
111
105
|
return;
|
|
@@ -113,15 +107,13 @@ export function floating(node, options) {
|
|
|
113
107
|
cleanup = autoUpdate(opts.anchor, node, applyPosition);
|
|
114
108
|
}
|
|
115
109
|
function handleOutsidePointer(e) {
|
|
116
|
-
var _a;
|
|
117
110
|
if (!node.contains(e.target)) {
|
|
118
|
-
|
|
111
|
+
opts.onDismiss?.();
|
|
119
112
|
}
|
|
120
113
|
}
|
|
121
114
|
function handleKeydown(e) {
|
|
122
|
-
var _a;
|
|
123
115
|
if (e.key === 'Escape') {
|
|
124
|
-
|
|
116
|
+
opts.onDismiss?.();
|
|
125
117
|
}
|
|
126
118
|
}
|
|
127
119
|
function returnFocus() {
|
|
@@ -131,24 +123,24 @@ export function floating(node, options) {
|
|
|
131
123
|
}
|
|
132
124
|
startAutoUpdate();
|
|
133
125
|
// Animate in after first position has been applied (next microtask)
|
|
134
|
-
requestAnimationFrame(
|
|
126
|
+
requestAnimationFrame(() => {
|
|
135
127
|
node.style.opacity = '1';
|
|
136
128
|
node.style.transform = 'translateY(0)';
|
|
137
129
|
});
|
|
138
130
|
// Defer outside-pointer listeners to avoid catching the opening event itself
|
|
139
|
-
|
|
131
|
+
const listenerTimer = setTimeout(() => {
|
|
140
132
|
document.addEventListener('click', handleOutsidePointer, true);
|
|
141
133
|
document.addEventListener('contextmenu', handleOutsidePointer, true);
|
|
142
134
|
}, 0);
|
|
143
135
|
document.addEventListener('keydown', handleKeydown);
|
|
144
136
|
return {
|
|
145
|
-
update
|
|
146
|
-
opts =
|
|
137
|
+
update(next) {
|
|
138
|
+
opts = { placement: 'bottom-start', flip: true, shift: true, offset: 4, ...next };
|
|
147
139
|
startAutoUpdate();
|
|
148
140
|
},
|
|
149
|
-
destroy
|
|
141
|
+
destroy() {
|
|
150
142
|
clearTimeout(listenerTimer);
|
|
151
|
-
cleanup
|
|
143
|
+
cleanup?.();
|
|
152
144
|
document.removeEventListener('click', handleOutsidePointer, true);
|
|
153
145
|
document.removeEventListener('contextmenu', handleOutsidePointer, true);
|
|
154
146
|
document.removeEventListener('keydown', handleKeydown);
|