@joewinke/jatui 0.1.33 → 0.2.1

package/CLAUDE.md

@@ -239,6 +239,28 @@ If the project uses JST (Joe's Software Template), browse component demos at `/c
 - Check the component source in `src/lib/components/` for full prop types
 - Prefer jatui components over building custom ones when there's a match
 
+# Layering Policy (DaisyUI is an implementation detail)
+
+Three rules keep DaisyUI swappable instead of load-bearing:
+
+1. **jatui is the only API consumers touch.** App code imports `<Button>`,
+   `<TextInput>`, `<Modal>` — it never hand-writes `btn btn-primary` for
+   anything jatui covers. Consumer repos enforce this with the ratchet:
+   `node scripts/check-daisy-leakage.mjs <src> --baseline <file>` (count may
+   only shrink; marketing routes can be `--allow`ed).
+2. **DaisyUI class names live only inside jatui components.** They are
+   internal skin, like vendored CSS — never part of a component's public
+   props/API.
+3. **jatui owns the token layer.** Components consume `--jatui-*`
+   (`styles/tokens.css`: radius/spacing/border) and `--motion-*`
+   (`styles/motion.css`: easing/duration) custom properties. DaisyUI theme
+   variables feed INTO those tokens (as fallback-chained inputs), never
+   appear directly in component styles for values the tokens cover.
+
+Net effect: dropping or replacing DaisyUI would be a change to the token
+files and component internals — a skin swap inside this package, not an
+app-wide migration for consumers.
+
 # Accessibility (a11y)
 
 @~/code/jat/shared/a11y-patterns.md

package/dist/actions/attention.d.ts

@@ -0,0 +1,24 @@
+export type AttentionEffect = 'shake' | 'ping';
+export interface AttentionOptions {
+    effect: AttentionEffect;
+    /** Change this value to retrigger. Any truthy/changing value fires the effect. */
+    trigger?: unknown;
+}
+/**
+ * Retriggerable attention action — fires once per `trigger` change.
+ *
+ * use:attention={{ effect: 'shake', trigger: myTrigger }}
+ *
+ * shake — horizontal translate, 4–6px amplitude, 2–3 oscillations, ≤300ms total.
+ *   Use for invalid-input / reject feedback. Pair with a static error affordance
+ *   (color, icon, label) so the state survives without motion.
+ *   Reduced-motion: skipped entirely.
+ *
+ * ping — single expanding fading ring behind the element. Use for notification
+ *   dots and badges. Fires once per trigger change; NEVER loops infinitely.
+ *   Reduced-motion: skipped entirely.
+ */
+export declare function attention(node: HTMLElement, options: AttentionOptions): {
+    update(newOptions: AttentionOptions): void;
+    destroy(): void;
+};

package/dist/actions/attention.js

@@ -0,0 +1,94 @@
+// direction taxonomy after animista.net (Ana Travas, BSD-2-Clause site license); keyframes re-authored on jatui motion tokens
+/**
+ * Retriggerable attention action — fires once per `trigger` change.
+ *
+ * use:attention={{ effect: 'shake', trigger: myTrigger }}
+ *
+ * shake — horizontal translate, 4–6px amplitude, 2–3 oscillations, ≤300ms total.
+ *   Use for invalid-input / reject feedback. Pair with a static error affordance
+ *   (color, icon, label) so the state survives without motion.
+ *   Reduced-motion: skipped entirely.
+ *
+ * ping — single expanding fading ring behind the element. Use for notification
+ *   dots and badges. Fires once per trigger change; NEVER loops infinitely.
+ *   Reduced-motion: skipped entirely.
+ */
+export function attention(node, options) {
+    var currentTrigger = options.trigger;
+    var pingEl = null;
+    var shakeId = null;
+    function prefersReduced() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+    function clearShake() {
+        node.style.animation = '';
+        if (shakeId !== null) {
+            clearTimeout(shakeId);
+            shakeId = null;
+        }
+    }
+    function clearPing() {
+        if (pingEl) {
+            pingEl.remove();
+            pingEl = null;
+        }
+    }
+    function runShake() {
+        if (prefersReduced())
+            return;
+        clearShake();
+        // 3 oscillations × 2 half-cycles = 6 keyframe segments in ~280ms
+        // translate: 0 → +5px → -5px → +4px → -4px → +2px → 0
+        var kf = [
+            { transform: 'translateX(0)' },
+            { transform: 'translateX(5px)' },
+            { transform: 'translateX(-5px)' },
+            { transform: 'translateX(4px)' },
+            { transform: 'translateX(-4px)' },
+            { transform: 'translateX(2px)' },
+            { transform: 'translateX(0)' }
+        ];
+        node.animate(kf, { duration: 280, easing: 'ease-in-out', fill: 'none' });
+    }
+    function runPing() {
+        if (prefersReduced())
+            return;
+        clearPing();
+        var rect = node.getBoundingClientRect();
+        var size = Math.max(rect.width, rect.height);
+        // Ensure node is position-capable for the pseudo-ring
+        var pos = getComputedStyle(node).position;
+        if (pos === 'static')
+            node.style.position = 'relative';
+        pingEl = document.createElement('span');
+        pingEl.style.cssText = "\n\t\t\tposition:absolute;\n\t\t\tinset:-4px;\n\t\t\tborder-radius:inherit;\n\t\t\tborder:2px solid currentColor;\n\t\t\topacity:0.7;\n\t\t\tpointer-events:none;\n\t\t\tz-index:-1;\n\t\t";
+        node.appendChild(pingEl);
+        var scale = 1 + 24 / size;
+        pingEl.animate([
+            { transform: 'scale(1)', opacity: '0.7' },
+            { transform: "scale(".concat(scale.toFixed(2), ")"), opacity: '0' }
+        ], { duration: 600, easing: 'ease-out', fill: 'forwards' }).onfinish = function () { return clearPing(); };
+    }
+    function fire(effect) {
+        if (effect === 'shake')
+            runShake();
+        else
+            runPing();
+    }
+    // Fire on mount if trigger is set
+    if (options.trigger !== undefined) {
+        fire(options.effect);
+    }
+    return {
+        update: function (newOptions) {
+            if (newOptions.trigger !== currentTrigger) {
+                currentTrigger = newOptions.trigger;
+                fire(newOptions.effect);
+            }
+        },
+        destroy: function () {
+            clearShake();
+            clearPing();
+        }
+    };
+}

package/dist/actions/floating.d.ts

@@ -0,0 +1,53 @@
+/**
+ * use:floating — anchored-positioning Svelte action
+ *
+ * Wraps @floating-ui/dom computePosition + autoUpdate so every popover-like
+ * component shares one battle-tested positioning primitive instead of each
+ * hand-rolling viewport clamping.
+ *
+ * Usage (element anchor):
+ *   <div use:floating={{ anchor: triggerEl, placement: 'bottom-start', flip: true, shift: true, offset: 4, onDismiss: close }}>
+ *
+ * Usage (virtual / cursor point anchor):
+ *   const virtualAnchor = makeVirtualAnchor(x, y)
+ *   <div use:floating={{ anchor: virtualAnchor, placement: 'bottom-start', onDismiss: close }}>
+ *
+ * Animation: entrance fade + 2px rise, var(--motion-glide) var(--motion-fast).
+ * Exit is handled by the caller removing the element from the DOM.
+ * Reduced-motion guard: animation is skipped when the user prefers reduced motion.
+ *
+ * Dismiss:
+ *   - Click outside the floating element fires onDismiss
+ *   - Escape key fires onDismiss
+ *   - Focus returns to the anchor element (or document.activeElement before mount)
+ *     when the floating element is dismissed
+ *
+ * Accessibility:
+ *   - The node must already carry role="menu" / role="listbox" etc. — this action
+ *     does not set ARIA roles.
+ */
+import type { Placement, ReferenceElement } from '@floating-ui/dom';
+export type { Placement };
+export interface FloatingOptions {
+    /** Anchor element or virtual element (with getBoundingClientRect). */
+    anchor: ReferenceElement | null;
+    /** Preferred placement. @floating-ui/dom may flip/shift if enabled. Default 'bottom-start'. */
+    placement?: Placement;
+    /** Whether to flip to the opposite side when there's not enough room. Default true. */
+    flip?: boolean;
+    /** Whether to shift along the axis to stay in view. Default true. */
+    shift?: boolean;
+    /** Pixel distance between anchor and floating element. Default 4. */
+    offset?: number;
+    /** Called when the floating element should be dismissed (outside-click or Escape). */
+    onDismiss?: () => void;
+}
+/**
+ * Create a virtual anchor from a viewport point (e.g. cursor coordinates).
+ * Pass the returned object as `anchor` when there is no real DOM element to anchor to.
+ */
+export declare function makeVirtualAnchor(x: number, y: number): ReferenceElement;
+export declare function floating(node: HTMLElement, options: FloatingOptions): {
+    update(next: FloatingOptions): void;
+    destroy(): void;
+};

package/dist/actions/floating.js

@@ -0,0 +1,158 @@
+/**
+ * use:floating — anchored-positioning Svelte action
+ *
+ * Wraps @floating-ui/dom computePosition + autoUpdate so every popover-like
+ * component shares one battle-tested positioning primitive instead of each
+ * hand-rolling viewport clamping.
+ *
+ * Usage (element anchor):
+ *   <div use:floating={{ anchor: triggerEl, placement: 'bottom-start', flip: true, shift: true, offset: 4, onDismiss: close }}>
+ *
+ * Usage (virtual / cursor point anchor):
+ *   const virtualAnchor = makeVirtualAnchor(x, y)
+ *   <div use:floating={{ anchor: virtualAnchor, placement: 'bottom-start', onDismiss: close }}>
+ *
+ * Animation: entrance fade + 2px rise, var(--motion-glide) var(--motion-fast).
+ * Exit is handled by the caller removing the element from the DOM.
+ * Reduced-motion guard: animation is skipped when the user prefers reduced motion.
+ *
+ * Dismiss:
+ *   - Click outside the floating element fires onDismiss
+ *   - Escape key fires onDismiss
+ *   - Focus returns to the anchor element (or document.activeElement before mount)
+ *     when the floating element is dismissed
+ *
+ * Accessibility:
+ *   - The node must already carry role="menu" / role="listbox" etc. — this action
+ *     does not set ARIA roles.
+ */
+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);
+};
+import { computePosition, autoUpdate, flip, shift, offset as fuOffset } from '@floating-ui/dom';
+/**
+ * Create a virtual anchor from a viewport point (e.g. cursor coordinates).
+ * Pass the returned object as `anchor` when there is no real DOM element to anchor to.
+ */
+export function makeVirtualAnchor(x, y) {
+    return {
+        getBoundingClientRect: function () {
+            return {
+                width: 0,
+                height: 0,
+                x: x,
+                y: y,
+                top: y,
+                left: x,
+                right: x,
+                bottom: y,
+                toJSON: function () { return this; }
+            };
+        }
+    };
+}
+function prefersReducedMotion() {
+    return typeof window !== 'undefined' &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+export function floating(node, options) {
+    var opts = __assign({ placement: 'bottom-start', flip: true, shift: true, offset: 4 }, options);
+    var cleanup = null;
+    // Remember the element focused before this floating opened so we can return focus on dismiss.
+    var returnFocusTarget = document.activeElement;
+    // Entrance animation
+    node.style.opacity = '0';
+    node.style.transform = 'translateY(2px)';
+    node.style.transition = prefersReducedMotion()
+        ? 'none'
+        : [
+            "opacity var(--motion-fast, 150ms) var(--motion-glide, cubic-bezier(0.16,1,0.3,1))",
+            "transform var(--motion-fast, 150ms) var(--motion-glide, cubic-bezier(0.16,1,0.3,1))"
+        ].join(', ');
+    function applyPosition() {
+        if (!opts.anchor)
+            return;
+        var middlewares = [];
+        if (opts.offset != null)
+            middlewares.push(fuOffset(opts.offset));
+        if (opts.flip)
+            middlewares.push(flip());
+        if (opts.shift)
+            middlewares.push(shift({ padding: 8 }));
+        computePosition(opts.anchor, node, {
+            placement: opts.placement,
+            strategy: 'fixed',
+            middleware: middlewares,
+        }).then(function (_a) {
+            var x = _a.x, y = _a.y;
+            node.style.position = 'fixed';
+            node.style.left = "".concat(x, "px");
+            node.style.top = "".concat(y, "px");
+        });
+    }
+    function startAutoUpdate() {
+        cleanup === null || cleanup === void 0 ? void 0 : cleanup();
+        cleanup = null;
+        if (!opts.anchor)
+            return;
+        // For virtual anchors (plain objects), autoUpdate won't observe DOM mutations
+        // on the reference. That's fine — the caller re-runs update() when coords change.
+        var isVirtual = !('nodeType' in opts.anchor);
+        if (isVirtual) {
+            applyPosition();
+            return;
+        }
+        cleanup = autoUpdate(opts.anchor, node, applyPosition);
+    }
+    function handleOutsidePointer(e) {
+        var _a;
+        if (!node.contains(e.target)) {
+            (_a = opts.onDismiss) === null || _a === void 0 ? void 0 : _a.call(opts);
+        }
+    }
+    function handleKeydown(e) {
+        var _a;
+        if (e.key === 'Escape') {
+            (_a = opts.onDismiss) === null || _a === void 0 ? void 0 : _a.call(opts);
+        }
+    }
+    function returnFocus() {
+        if (returnFocusTarget && typeof returnFocusTarget.focus === 'function') {
+            returnFocusTarget.focus();
+        }
+    }
+    startAutoUpdate();
+    // Animate in after first position has been applied (next microtask)
+    requestAnimationFrame(function () {
+        node.style.opacity = '1';
+        node.style.transform = 'translateY(0)';
+    });
+    // Defer outside-pointer listeners to avoid catching the opening event itself
+    var listenerTimer = setTimeout(function () {
+        document.addEventListener('click', handleOutsidePointer, true);
+        document.addEventListener('contextmenu', handleOutsidePointer, true);
+    }, 0);
+    document.addEventListener('keydown', handleKeydown);
+    return {
+        update: function (next) {
+            opts = __assign({ placement: 'bottom-start', flip: true, shift: true, offset: 4 }, next);
+            startAutoUpdate();
+        },
+        destroy: function () {
+            clearTimeout(listenerTimer);
+            cleanup === null || cleanup === void 0 ? void 0 : cleanup();
+            document.removeEventListener('click', handleOutsidePointer, true);
+            document.removeEventListener('contextmenu', handleOutsidePointer, true);
+            document.removeEventListener('keydown', handleKeydown);
+            returnFocus();
+        }
+    };
+}

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);
+        },
+    };
+}