@joewinke/jatui 0.1.31 → 0.2.0

package/dist/actions/railNav.js

@@ -60,6 +60,17 @@
  *   3. Handle Left/Right in `onAction` and call `rail.bump(host)` on change:
  *        onAction: (id, dir, host) => { formData[id] = cycle(opts[id], …, dir); rail.bump(host); }
  */
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 // ─── Exported helpers ──────────────────────────────────────────────────────────
 /**
  * Cycle through `list`, returning the item `dir` steps from `current`.
@@ -73,39 +84,40 @@
 export function cycle(list, current, dir) {
     if (list.length === 0)
         return current;
-    const i = list.indexOf(current);
+    var i = list.indexOf(current);
     // When `current` is not in the list, treat it as if we're at position -1
     // so that `dir=1` lands at index 0 (the first item) and `dir=-1` lands at
     // the last item — matching the "not found → start from the beginning" idiom.
-    const base = i === -1 ? -1 : i;
+    var base = i === -1 ? -1 : i;
     return list[(((base + dir) % list.length) + list.length) % list.length];
 }
 // ─── Internals ─────────────────────────────────────────────────────────────────
-const BUMP_DURATION_MS = 280;
-const RAIL_FOCUS_CLASS = 'rail-focus';
-const RAIL_CYCLED_CLASS = 'rail-cycled';
+var BUMP_DURATION_MS = 280;
+var RAIL_FOCUS_CLASS = 'rail-focus';
+var RAIL_CYCLED_CLASS = 'rail-cycled';
 function resolveOrder(opts) {
     return typeof opts.order === 'function' ? opts.order() : opts.order;
 }
 function resolveAttr(opts) {
-    return opts.attr ?? 'data-rail-id';
+    var _a;
+    return (_a = opts.attr) !== null && _a !== void 0 ? _a : 'data-rail-id';
 }
 /** Return all currently-rendered rung hosts in the rail order. */
 function resolveHosts(optsRef) {
-    const { container } = optsRef.current;
+    var container = optsRef.current.container;
     if (!container)
         return [];
-    const attr = resolveAttr(optsRef.current);
-    const order = resolveOrder(optsRef.current);
+    var attr = resolveAttr(optsRef.current);
+    var order = resolveOrder(optsRef.current);
     return order
-        .map((id) => container.querySelector(`[${attr}="${id}"]`))
+        .map(function (id) { return container.querySelector("[".concat(attr, "=\"").concat(id, "\"]")); })
         // checkVisibility() correctly returns false for elements inside a closed <details>
         // (browsers keep offsetParent non-null for those, so that check alone is insufficient).
         // Where checkVisibility is unavailable (jsdom, older engines) treat the rung as
         // visible — a rendered element in `order` is navigable by default; only the
         // closed-<details> case needs the extra exclusion, and that only exists in a
         // real layout engine.
-        .filter((el) => !!el && (el.checkVisibility?.() ?? true));
+        .filter(function (el) { var _a, _b; return !!el && ((_b = (_a = el.checkVisibility) === null || _a === void 0 ? void 0 : _a.call(el)) !== null && _b !== void 0 ? _b : true); });
 }
 /**
  * Focus the most appropriate control inside a rung host:
@@ -120,17 +132,17 @@ function resolveHosts(optsRef) {
  *  4. Last resort: focus the host itself (requires tabindex on the host).
  */
 function focusRailHost(host) {
+    var _a;
     if (host.matches('input,select,textarea,button,[contenteditable="true"],[tabindex]')) {
         host.focus();
         return;
     }
-    const inner = host.querySelector('[contenteditable="true"],input,select,textarea') ??
-        host.querySelector('.sd-trigger,button');
-    (inner ?? host).focus();
+    var inner = (_a = host.querySelector('[contenteditable="true"],input,select,textarea')) !== null && _a !== void 0 ? _a : host.querySelector('.sd-trigger,button');
+    (inner !== null && inner !== void 0 ? inner : host).focus();
 }
 function makeController(optsRef) {
-    let _currentRailId = '';
-    let _lastFocusedHost = null;
+    var _currentRailId = '';
+    var _lastFocusedHost = null;
     function applyFocusClass(host) {
         if (_lastFocusedHost && _lastFocusedHost !== host) {
             _lastFocusedHost.classList.remove(RAIL_FOCUS_CLASS);
@@ -145,14 +157,14 @@ function makeController(optsRef) {
         host.classList.remove(RAIL_CYCLED_CLASS);
         void host.offsetWidth; // reflow so the animation restarts on rapid presses
         host.classList.add(RAIL_CYCLED_CLASS);
-        setTimeout(() => host.classList.remove(RAIL_CYCLED_CLASS), BUMP_DURATION_MS);
+        setTimeout(function () { return host.classList.remove(RAIL_CYCLED_CLASS); }, BUMP_DURATION_MS);
     }
     function focus(id) {
-        const { container } = optsRef.current;
+        var container = optsRef.current.container;
         if (!container)
             return;
-        const attr = resolveAttr(optsRef.current);
-        const host = container.querySelector(`[${attr}="${id}"]`);
+        var attr = resolveAttr(optsRef.current);
+        var host = container.querySelector("[".concat(attr, "=\"").concat(id, "\"]"));
         if (host) {
             focusRailHost(host);
             applyFocusClass(host);
@@ -163,20 +175,21 @@ function makeController(optsRef) {
         }
     }
     function moveRung(dir) {
-        const hosts = resolveHosts(optsRef);
+        var _a;
+        var hosts = resolveHosts(optsRef);
         if (hosts.length === 0)
             return;
-        const attr = resolveAttr(optsRef.current);
-        const ids = hosts.map((h) => h.getAttribute(attr));
+        var attr = resolveAttr(optsRef.current);
+        var ids = hosts.map(function (h) { return h.getAttribute(attr); });
         // Anchor on the actually-focused rung first. Fall back to the last tracked
         // rung (covers focus parked on the container after an Escape pop-out).
-        const active = document.activeElement;
-        const activeFocused = (active?.closest(`[${attr}]`))?.getAttribute(attr);
-        const fromId = activeFocused && ids.includes(activeFocused) ? activeFocused : _currentRailId;
-        let pos = fromId ? ids.indexOf(fromId) : -1;
+        var active = document.activeElement;
+        var activeFocused = (_a = (active === null || active === void 0 ? void 0 : active.closest("[".concat(attr, "]")))) === null || _a === void 0 ? void 0 : _a.getAttribute(attr);
+        var fromId = activeFocused && ids.includes(activeFocused) ? activeFocused : _currentRailId;
+        var pos = fromId ? ids.indexOf(fromId) : -1;
         if (pos === -1)
             pos = dir === 1 ? -1 : hosts.length;
-        const next = (((pos + dir) % hosts.length) + hosts.length) % hosts.length;
+        var next = (((pos + dir) % hosts.length) + hosts.length) % hosts.length;
         focusRailHost(hosts[next]);
         applyFocusClass(hosts[next]);
         _currentRailId = ids[next];
@@ -184,9 +197,10 @@ function makeController(optsRef) {
     function refresh() {
         // Re-derive hosts; re-apply focus class if the current rung is still rendered
         // (DOM may have been reconstructed by Svelte's reactive updates).
-        const hosts = resolveHosts(optsRef);
-        const attr = resolveAttr(optsRef.current);
-        for (const h of hosts) {
+        var hosts = resolveHosts(optsRef);
+        var attr = resolveAttr(optsRef.current);
+        for (var _i = 0, hosts_1 = hosts; _i < hosts_1.length; _i++) {
+            var h = hosts_1[_i];
             if (h.getAttribute(attr) === _currentRailId) {
                 applyFocusClass(h);
                 return;
@@ -194,10 +208,11 @@ function makeController(optsRef) {
         }
     }
     function handleFocusin(event) {
-        const attr = resolveAttr(optsRef.current);
-        const order = resolveOrder(optsRef.current);
-        const host = event.target?.closest(`[${attr}]`);
-        const id = host?.getAttribute(attr);
+        var _a;
+        var attr = resolveAttr(optsRef.current);
+        var order = resolveOrder(optsRef.current);
+        var host = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest("[".concat(attr, "]"));
+        var id = host === null || host === void 0 ? void 0 : host.getAttribute(attr);
         // Only track rungs that are in the rail order. Tabbing into an off-rail
         // control (e.g. a description textarea) leaves the last real rung intact
         // so Up / Down can resume from it after the user tabs back out.
@@ -207,17 +222,18 @@ function makeController(optsRef) {
         }
     }
     function handleKeydown(event) {
-        const opts = optsRef.current;
-        const el = document.activeElement;
-        const tag = el?.tagName;
-        const isTextField = !!el &&
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var opts = optsRef.current;
+        var el = document.activeElement;
+        var tag = el === null || el === void 0 ? void 0 : el.tagName;
+        var isTextField = !!el &&
             (tag === 'INPUT' || tag === 'TEXTAREA' || el.isContentEditable === true);
-        const isMultiline = !!el && (tag === 'TEXTAREA' || el.isContentEditable === true);
-        const hasMod = event.metaKey || event.ctrlKey || event.altKey;
+        var isMultiline = !!el && (tag === 'TEXTAREA' || el.isContentEditable === true);
+        var hasMod = event.metaKey || event.ctrlKey || event.altKey;
         // Modal trap — stop non-text keystrokes from bubbling to window-level page
         // listeners (e.g., a listNav attached to `window`). Text-field keystrokes
         // propagate normally so typing in the drawer doesn't interfere.
-        const trap = opts.trap !== false;
+        var trap = opts.trap !== false;
         if (trap && !isTextField)
             event.stopPropagation();
         // Escape cascade:
@@ -225,33 +241,33 @@ function makeController(optsRef) {
         //  2. focus inside a descendant control → pop back to container
         //  3. focus already on the container (or just popped) → call onEscape
         if (event.key === 'Escape' && !hasMod) {
-            const popoverOpen = opts.isPopoverOpen?.() ?? false;
-            if (popoverOpen) {
+            var popoverOpen_1 = (_b = (_a = opts.isPopoverOpen) === null || _a === void 0 ? void 0 : _a.call(opts)) !== null && _b !== void 0 ? _b : false;
+            if (popoverOpen_1) {
                 event.preventDefault();
-                opts.onPopoverEscape?.();
+                (_c = opts.onPopoverEscape) === null || _c === void 0 ? void 0 : _c.call(opts);
                 return true;
             }
-            const { container } = opts;
+            var container = opts.container;
             if (container && el && el !== container && container.contains(el)) {
                 event.preventDefault();
                 container.focus();
                 return true;
             }
             event.preventDefault();
-            opts.onEscape?.();
+            (_d = opts.onEscape) === null || _d === void 0 ? void 0 : _d.call(opts);
             return true;
         }
         // Rail motion — suppressed when a popover is open or a modifier is held.
-        const popoverOpen = opts.isPopoverOpen?.() ?? false;
+        var popoverOpen = (_f = (_e = opts.isPopoverOpen) === null || _e === void 0 ? void 0 : _e.call(opts)) !== null && _f !== void 0 ? _f : false;
         if (!hasMod && !popoverOpen) {
             // Vertical: ArrowDown / j step down; ArrowUp / k step up.
             // j / k are blocked in ANY text field; arrows are blocked only inside
             // multiline fields so the caret can still move line-by-line.
-            const goDown = event.key === 'ArrowDown' || event.key === 'j';
-            const goUp = event.key === 'ArrowUp' || event.key === 'k';
+            var goDown = event.key === 'ArrowDown' || event.key === 'j';
+            var goUp = event.key === 'ArrowUp' || event.key === 'k';
             if (goDown || goUp) {
-                const isVimKey = event.key === 'j' || event.key === 'k';
-                const blocked = isVimKey ? isTextField : isMultiline;
+                var isVimKey = event.key === 'j' || event.key === 'k';
+                var blocked = isVimKey ? isTextField : isMultiline;
                 if (!blocked) {
                     event.preventDefault();
                     moveRung(goDown ? 1 : -1);
@@ -263,15 +279,14 @@ function makeController(optsRef) {
             if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') &&
                 !isTextField) {
                 event.preventDefault();
-                const attr = resolveAttr(opts);
+                var attr = resolveAttr(opts);
                 // Prefer the element that actually has DOM focus, then fall back to
                 // the last tracked rung (focus parked on the container after pop-out).
-                const focusedHost = (el?.closest(`[${attr}]`)) ??
-                    (opts.container && _currentRailId
-                        ? opts.container.querySelector(`[${attr}="${_currentRailId}"]`)
-                        : null);
+                var focusedHost = (_g = (el === null || el === void 0 ? void 0 : el.closest("[".concat(attr, "]")))) !== null && _g !== void 0 ? _g : (opts.container && _currentRailId
+                    ? opts.container.querySelector("[".concat(attr, "=\"").concat(_currentRailId, "\"]"))
+                    : null);
                 if (focusedHost && opts.onAction) {
-                    const rungId = focusedHost.getAttribute(attr) ?? '';
+                    var rungId = (_h = focusedHost.getAttribute(attr)) !== null && _h !== void 0 ? _h : '';
                     opts.onAction(rungId, event.key === 'ArrowRight' ? 1 : -1, focusedHost);
                 }
                 return true;
@@ -280,13 +295,13 @@ function makeController(optsRef) {
         return false;
     }
     return {
-        handleKeydown,
-        handleFocusin,
-        moveRung,
-        focus,
-        refresh,
-        currentId: () => _currentRailId,
-        bump,
+        handleKeydown: handleKeydown,
+        handleFocusin: handleFocusin,
+        moveRung: moveRung,
+        focus: focus,
+        refresh: refresh,
+        currentId: function () { return _currentRailId; },
+        bump: bump,
     };
 }
 // ─── Composable ────────────────────────────────────────────────────────────────
@@ -301,7 +316,7 @@ function makeController(optsRef) {
  *   panel.addEventListener('focusin', (e) => rail.handleFocusin(e));
  */
 export function createRailNav(options) {
-    const ref = { current: options };
+    var ref = { current: options };
     return makeController(ref);
 }
 // ─── Action ────────────────────────────────────────────────────────────────────
@@ -316,9 +331,10 @@ export function createRailNav(options) {
  *     <div   data-rail-id="priority" tabindex="-1">…</div>
  *   </div>
  */
-export const railNav = (node, initial = { order: [] }) => {
-    const ref = { current: { ...initial, container: node } };
-    const controller = makeController(ref);
+export var railNav = function (node, initial) {
+    if (initial === void 0) { initial = { order: [] }; }
+    var ref = { current: __assign(__assign({}, initial), { container: node }) };
+    var controller = makeController(ref);
     function onKeydown(e) {
         controller.handleKeydown(e);
     }
@@ -328,11 +344,12 @@ export const railNav = (node, initial = { order: [] }) => {
     node.addEventListener('keydown', onKeydown);
     node.addEventListener('focusin', onFocusin);
     return {
-        update(next = { order: [] }) {
-            ref.current = { ...next, container: node };
+        update: function (next) {
+            if (next === void 0) { next = { order: [] }; }
+            ref.current = __assign(__assign({}, next), { container: node });
             controller.refresh();
         },
-        destroy() {
+        destroy: function () {
             node.removeEventListener('keydown', onKeydown);
             node.removeEventListener('focusin', onFocusin);
         },

package/dist/actions/staggerEntrance.d.ts

@@ -0,0 +1,28 @@
+export interface StaggerEntranceOptions {
+    /** Delay between successive children in ms. Default 35. */
+    stepMs?: number;
+    /** Maximum total stagger time in ms; caps step for large lists. Default 250. */
+    maxTotalMs?: number;
+    /** translateY distance in px for the rise effect. Default 8. */
+    rise?: number;
+}
+/**
+ * Stagger-entrance action — apply to a list container to fan children in on
+ * mount with a sequenced fade + rise. Each child fades from opacity 0 → 1 and
+ * rises from translateY(risepx) → 0, staggered by stepMs.
+ *
+ * The total stagger time is capped at maxTotalMs regardless of child count,
+ * so large lists don't drag on. Runs once per mount; re-mount re-runs it.
+ *
+ * Reduced-motion: children are set visible immediately with no transition.
+ *
+ * Usage:
+ *   <ul use:staggerEntrance={{ stepMs: 35, maxTotalMs: 250, rise: 8 }}>
+ *     {#each items as item}
+ *       <li>{item}</li>
+ *     {/each}
+ *   </ul>
+ */
+export declare function staggerEntrance(node: HTMLElement, options?: StaggerEntranceOptions): {
+    destroy(): void;
+};

package/dist/actions/staggerEntrance.js

@@ -0,0 +1,71 @@
+/**
+ * Stagger-entrance action — apply to a list container to fan children in on
+ * mount with a sequenced fade + rise. Each child fades from opacity 0 → 1 and
+ * rises from translateY(risepx) → 0, staggered by stepMs.
+ *
+ * The total stagger time is capped at maxTotalMs regardless of child count,
+ * so large lists don't drag on. Runs once per mount; re-mount re-runs it.
+ *
+ * Reduced-motion: children are set visible immediately with no transition.
+ *
+ * Usage:
+ *   <ul use:staggerEntrance={{ stepMs: 35, maxTotalMs: 250, rise: 8 }}>
+ *     {#each items as item}
+ *       <li>{item}</li>
+ *     {/each}
+ *   </ul>
+ */
+export function staggerEntrance(node, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.stepMs, stepMs = _a === void 0 ? 35 : _a, _b = options.maxTotalMs, maxTotalMs = _b === void 0 ? 250 : _b, _c = options.rise, rise = _c === void 0 ? 8 : _c;
+    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    var children = Array.from(node.children);
+    if (prefersReduced || children.length === 0) {
+        // Render final state immediately — no animation
+        return { destroy: function () { } };
+    }
+    // Cap the per-item step so total time doesn't exceed maxTotalMs
+    var effectiveStep = children.length > 1
+        ? Math.min(stepMs, Math.floor(maxTotalMs / (children.length - 1)))
+        : stepMs;
+    var duration = 200; // var(--motion-enter) = 200ms
+    // Set all children to their start state (opacity 0, risen)
+    for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
+        var child = children_1[_i];
+        child.style.opacity = '0';
+        child.style.transform = "translateY(".concat(rise, "px)");
+        child.style.transition = 'none';
+    }
+    // Trigger entrance in next frame so the start state has been painted
+    var rafId = requestAnimationFrame(function () {
+        children.forEach(function (child, i) {
+            var delay = i * effectiveStep;
+            child.style.transition = "opacity ".concat(duration, "ms var(--motion-glide) ").concat(delay, "ms, transform ").concat(duration, "ms var(--motion-glide) ").concat(delay, "ms");
+            child.style.opacity = '1';
+            child.style.transform = 'translateY(0)';
+        });
+        // Clean up inline styles after all transitions complete
+        var totalMs = (children.length - 1) * effectiveStep + duration + 50;
+        var cleanupId = setTimeout(function () {
+            for (var _i = 0, children_2 = children; _i < children_2.length; _i++) {
+                var child = children_2[_i];
+                child.style.opacity = '';
+                child.style.transform = '';
+                child.style.transition = '';
+            }
+        }, totalMs);
+        return function () { return clearTimeout(cleanupId); };
+    });
+    return {
+        destroy: function () {
+            cancelAnimationFrame(rafId);
+            // Ensure children are visible if action is destroyed mid-animation
+            for (var _i = 0, children_3 = children; _i < children_3.length; _i++) {
+                var child = children_3[_i];
+                child.style.opacity = '';
+                child.style.transform = '';
+                child.style.transition = '';
+            }
+        }
+    };
+}

package/dist/actions/tooltip.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Tooltip Svelte action — use:tooltip={{ text, placement?, delayMs? }}
+ *
+ * Warm/cool window: the first tooltip on a page waits delayMs (default 400ms)
+ * before appearing. If another tooltip was shown within the last ~500ms the
+ * warm window is still active, so the new tooltip appears instantly — the
+ * cursor is already "in tooltip mode".
+ *
+ * Animation: fade-in + 2px upward rise, var(--motion-glide) var(--motion-fast).
+ * Exit is instant (no delay, no motion) so it disappears as soon as you leave.
+ *
+ * Placement: 'top' | 'bottom' | 'left' | 'right' (default 'top'). Flips to
+ * the opposite side when the tooltip would overflow the viewport.
+ *
+ * Accessibility: sets aria-describedby on the host element.
+ * Escape key hides the active tooltip.
+ * Focus events (focusin/focusout) trigger alongside mouse hover.
+ */
+export interface TooltipOptions {
+    text: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** ms to wait before showing (default 400). 0 = instant. */
+    delayMs?: number;
+}
+export declare function tooltip(node: HTMLElement, options: TooltipOptions): {
+    update(next: TooltipOptions): void;
+    destroy(): void;
+};

package/dist/actions/tooltip.js

@@ -0,0 +1,186 @@
+/**
+ * Tooltip Svelte action — use:tooltip={{ text, placement?, delayMs? }}
+ *
+ * Warm/cool window: the first tooltip on a page waits delayMs (default 400ms)
+ * before appearing. If another tooltip was shown within the last ~500ms the
+ * warm window is still active, so the new tooltip appears instantly — the
+ * cursor is already "in tooltip mode".
+ *
+ * Animation: fade-in + 2px upward rise, var(--motion-glide) var(--motion-fast).
+ * Exit is instant (no delay, no motion) so it disappears as soon as you leave.
+ *
+ * Placement: 'top' | 'bottom' | 'left' | 'right' (default 'top'). Flips to
+ * the opposite side when the tooltip would overflow the viewport.
+ *
+ * Accessibility: sets aria-describedby on the host element.
+ * Escape key hides the active tooltip.
+ * Focus events (focusin/focusout) trigger alongside mouse hover.
+ */
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var COOL_WINDOW_MS = 500;
+var GAP = 8;
+var tooltipEl = null;
+var lastHideTime = 0;
+var idCounter = 0;
+function getOrCreatePortal() {
+    if (tooltipEl)
+        return tooltipEl;
+    tooltipEl = document.createElement('div');
+    tooltipEl.id = 'jatui-tooltip-portal';
+    tooltipEl.style.cssText = "\n\t\tposition: fixed;\n\t\ttop: 0; left: 0;\n\t\tpointer-events: none;\n\t\tz-index: 9999;\n\t";
+    document.body.appendChild(tooltipEl);
+    return tooltipEl;
+}
+function createBubble(text) {
+    var el = document.createElement('div');
+    el.role = 'tooltip';
+    el.textContent = text;
+    el.style.cssText = "\n\t\tposition: absolute;\n\t\tpadding: 4px 10px;\n\t\tborder-radius: 6px;\n\t\tfont-size: 0.8125rem;\n\t\tline-height: 1.4;\n\t\twhite-space: nowrap;\n\t\tmax-width: 240px;\n\t\twhite-space: normal;\n\t\tword-break: break-word;\n\t\tbackground: oklch(var(--b3, 20% 0 0));\n\t\tcolor: oklch(var(--bc, 95% 0 0));\n\t\tbox-shadow: 0 2px 6px oklch(0% 0 0 / 18%);\n\t\topacity: 0;\n\t\ttransform: translateY(4px);\n\t\ttransition:\n\t\t\topacity var(--motion-fast, 150ms) var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1)),\n\t\t\ttransform var(--motion-fast, 150ms) var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1));\n\t";
+    // reduced-motion: remove transform, keep opacity fade
+    el.dataset.tooltipBubble = '1';
+    return el;
+}
+function positionBubble(bubble, anchor, placement) {
+    var rect = anchor.getBoundingClientRect();
+    var bw = bubble.offsetWidth;
+    var bh = bubble.offsetHeight;
+    var vw = window.innerWidth;
+    var vh = window.innerHeight;
+    var top;
+    var left;
+    var resolved = placement;
+    // Compute primary position, then flip if needed
+    var placements = {
+        top: function () { return ({ top: rect.top - bh - GAP, left: rect.left + rect.width / 2 - bw / 2 }); },
+        bottom: function () { return ({ top: rect.bottom + GAP, left: rect.left + rect.width / 2 - bw / 2 }); },
+        left: function () { return ({ top: rect.top + rect.height / 2 - bh / 2, left: rect.left - bw - GAP }); },
+        right: function () { return ({ top: rect.top + rect.height / 2 - bh / 2, left: rect.right + GAP }); },
+    };
+    var pos = placements[resolved]();
+    top = pos.top;
+    left = pos.left;
+    // Flip on viewport edge
+    if (resolved === 'top' && top < 0) {
+        resolved = 'bottom';
+        var p = placements.bottom();
+        top = p.top;
+        left = p.left;
+    }
+    else if (resolved === 'bottom' && top + bh > vh) {
+        resolved = 'top';
+        var p = placements.top();
+        top = p.top;
+        left = p.left;
+    }
+    else if (resolved === 'left' && left < 0) {
+        resolved = 'right';
+        var p = placements.right();
+        top = p.top;
+        left = p.left;
+    }
+    else if (resolved === 'right' && left + bw > vw) {
+        resolved = 'left';
+        var p = placements.left();
+        top = p.top;
+        left = p.left;
+    }
+    // Clamp horizontal within viewport
+    left = Math.max(GAP, Math.min(left, vw - bw - GAP));
+    top = Math.max(GAP, Math.min(top, vh - bh - GAP));
+    // Rise direction depends on resolved placement
+    var riseY = resolved === 'bottom' ? -4 : 4;
+    bubble.style.setProperty('--tooltip-rise-y', "".concat(riseY, "px"));
+    bubble.style.top = "".concat(top, "px");
+    bubble.style.left = "".concat(left, "px");
+}
+function isWarm() {
+    return Date.now() - lastHideTime < COOL_WINDOW_MS;
+}
+export function tooltip(node, options) {
+    var opts = __assign({ placement: 'top', delayMs: 400 }, options);
+    var bubble = null;
+    var showTimer = null;
+    var tooltipId = "jatui-tt-".concat(++idCounter);
+    function show() {
+        var portal = getOrCreatePortal();
+        if (bubble) {
+            // Already showing — update text and reposition
+            bubble.textContent = opts.text;
+            positionBubble(bubble, node, opts.placement);
+            return;
+        }
+        bubble = createBubble(opts.text);
+        bubble.id = tooltipId;
+        portal.appendChild(bubble);
+        node.setAttribute('aria-describedby', tooltipId);
+        // Force a reflow so the initial transform is applied before transitioning
+        void bubble.offsetHeight;
+        // Measure and position after layout
+        positionBubble(bubble, node, opts.placement);
+        // Animate in
+        bubble.style.opacity = '1';
+        bubble.style.transform = 'translateY(0)';
+    }
+    function hide() {
+        if (showTimer) {
+            clearTimeout(showTimer);
+            showTimer = null;
+        }
+        if (bubble) {
+            lastHideTime = Date.now();
+            bubble.remove();
+            bubble = null;
+            node.removeAttribute('aria-describedby');
+        }
+    }
+    function scheduleShow() {
+        if (showTimer || bubble)
+            return;
+        var delay = isWarm() ? 0 : opts.delayMs;
+        if (delay === 0) {
+            show();
+        }
+        else {
+            showTimer = setTimeout(function () {
+                showTimer = null;
+                show();
+            }, delay);
+        }
+    }
+    function handleKeydown(e) {
+        if (e.key === 'Escape')
+            hide();
+    }
+    node.addEventListener('mouseenter', scheduleShow);
+    node.addEventListener('mouseleave', hide);
+    node.addEventListener('focusin', scheduleShow);
+    node.addEventListener('focusout', hide);
+    document.addEventListener('keydown', handleKeydown);
+    return {
+        update: function (next) {
+            opts = __assign({ placement: 'top', delayMs: 400 }, next);
+            if (bubble) {
+                bubble.textContent = opts.text;
+                positionBubble(bubble, node, opts.placement);
+            }
+        },
+        destroy: function () {
+            hide();
+            node.removeEventListener('mouseenter', scheduleShow);
+            node.removeEventListener('mouseleave', hide);
+            node.removeEventListener('focusin', scheduleShow);
+            node.removeEventListener('focusout', hide);
+            document.removeEventListener('keydown', handleKeydown);
+        },
+    };
+}