@joewinke/jatui 0.1.25 → 0.1.27

package/dist/actions/railNav.js

@@ -0,0 +1,351 @@
+/**
+ * Keyboard-rail navigation primitive — action + composable.
+ *
+ * A drawer / form is a vertical sequence of "rungs". Focus starts in the first
+ * field. Up / Down (and j / k when NOT typing) step between rungs. Left / Right
+ * acts on the focused rung (cycle a value, switch a tab, open a picker). Escape
+ * pops focus out of a field back to the container, then fires `onEscape`.
+ *
+ * Rungs are ordinary HTML elements tagged with a `data-rail-id` attribute (or
+ * whatever attribute `attr` specifies). The consumer supplies an `order` array
+ * of ids that defines traversal; ids whose element is not currently rendered
+ * in the container are skipped at move time.
+ *
+ * ─── CSS contract ─────────────────────────────────────────────────────────────
+ *
+ * The controller applies two classes to rung host elements. Style them in your
+ * stylesheet (or in a parent scope):
+ *
+ *   .rail-focus   — persistent: applied to the currently active rung host. Use
+ *                   `:focus-visible` / `:has(:focus-visible)` inside the rule so
+ *                   only keyboard-driven focus shows a visible ring.
+ *
+ *   .rail-cycled  — transient (~280ms): applied when Left / Right changes a
+ *                   rung's value via `rail.bump(host)`. Use for a brief pulse
+ *                   that confirms the value changed.
+ *
+ * ─── Usage — action form (simplest) ──────────────────────────────────────────
+ *
+ *   <div use:railNav={{
+ *     order: () => ['title', 'type', 'priority'],
+ *     onAction: (id, dir, host) => cycleField(id, dir),
+ *     onEscape: () => closeDrawer(),
+ *   }}>
+ *     <input data-rail-id="title" />
+ *     <div   data-rail-id="type"     tabindex="-1">…</div>
+ *     <div   data-rail-id="priority" tabindex="-1">…</div>
+ *   </div>
+ *
+ * ─── Usage — composable form ──────────────────────────────────────────────────
+ *
+ *   const rail = createRailNav({
+ *     container: panelEl,
+ *     order: () => currentOrder,
+ *     onAction: (id, dir, host) => { rail.bump(host); cycleField(id, dir); },
+ *     onEscape: () => closeDrawer(),
+ *   });
+ *
+ *   // Wire both listeners on the container:
+ *   panelEl.addEventListener('keydown',  (e) => rail.handleKeydown(e));
+ *   panelEl.addEventListener('focusin',  (e) => rail.handleFocusin(e));
+ *
+ * ─── How to wire a drawer to railNav ──────────────────────────────────────────
+ *
+ *   1. Tag each rung host with `data-rail-id`:
+ *        <div data-rail-id="type" tabindex="-1">…</div>
+ *
+ *   2. Apply the action (or composable) to the drawer panel:
+ *        <div bind:this={panel} use:railNav={{ order, onAction, onEscape }} …>
+ *
+ *   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`.
+ * Wraps around. Returns `current` unchanged when the list is empty.
+ *
+ * @example
+ *   cycle(['bug', 'feature', 'task'], 'feature',  1)  // → 'task'
+ *   cycle(['bug', 'feature', 'task'], 'bug',      -1)  // → 'task'
+ *   cycle(['a', 'b'],                'z',          1)  // → 'a'  (not found → start)
+ */
+export function cycle(list, current, dir) {
+    if (list.length === 0)
+        return 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.
+    var base = i === -1 ? -1 : i;
+    return list[(((base + dir) % list.length) + list.length) % list.length];
+}
+// ─── Internals ─────────────────────────────────────────────────────────────────
+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) {
+    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) {
+    var container = optsRef.current.container;
+    if (!container)
+        return [];
+    var attr = resolveAttr(optsRef.current);
+    var order = resolveOrder(optsRef.current);
+    return order
+        .map(function (id) { return container.querySelector("[".concat(attr, "=\"").concat(id, "\"]")); })
+        .filter(function (el) { return !!el; });
+}
+/**
+ * Focus the most appropriate control inside a rung host:
+ *
+ *  1. If the host itself is directly focusable (input / select / textarea /
+ *     button / [contenteditable] / [tabindex]), focus it.
+ *  2. Otherwise search for a real field before a trigger button. We use an
+ *     explicit selector for real fields first because `querySelector` resolves
+ *     by document order — a label's `<button>` can appear before the field it
+ *     accompanies (e.g. a voice-mic button before a contenteditable).
+ *  3. Fall back to any `.sd-trigger,button` (SearchDropdown trigger etc.).
+ *  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;
+    }
+    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) {
+    var _currentRailId = '';
+    var _lastFocusedHost = null;
+    function applyFocusClass(host) {
+        if (_lastFocusedHost && _lastFocusedHost !== host) {
+            _lastFocusedHost.classList.remove(RAIL_FOCUS_CLASS);
+        }
+        if (host)
+            host.classList.add(RAIL_FOCUS_CLASS);
+        _lastFocusedHost = host;
+    }
+    function bump(host) {
+        if (!host)
+            return;
+        host.classList.remove(RAIL_CYCLED_CLASS);
+        void host.offsetWidth; // reflow so the animation restarts on rapid presses
+        host.classList.add(RAIL_CYCLED_CLASS);
+        setTimeout(function () { return host.classList.remove(RAIL_CYCLED_CLASS); }, BUMP_DURATION_MS);
+    }
+    function focus(id) {
+        var container = optsRef.current.container;
+        if (!container)
+            return;
+        var attr = resolveAttr(optsRef.current);
+        var host = container.querySelector("[".concat(attr, "=\"").concat(id, "\"]"));
+        if (host) {
+            focusRailHost(host);
+            applyFocusClass(host);
+            _currentRailId = id;
+        }
+        else {
+            container.focus();
+        }
+    }
+    function moveRung(dir) {
+        var _a;
+        var hosts = resolveHosts(optsRef);
+        if (hosts.length === 0)
+            return;
+        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).
+        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;
+        var next = (((pos + dir) % hosts.length) + hosts.length) % hosts.length;
+        focusRailHost(hosts[next]);
+        applyFocusClass(hosts[next]);
+        _currentRailId = ids[next];
+    }
+    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).
+        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;
+            }
+        }
+    }
+    function handleFocusin(event) {
+        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.
+        if (id && order.includes(id)) {
+            _currentRailId = id;
+            applyFocusClass(host);
+        }
+    }
+    function handleKeydown(event) {
+        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);
+        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.
+        var trap = opts.trap !== false;
+        if (trap && !isTextField)
+            event.stopPropagation();
+        // Escape cascade:
+        //  1. popover open → close popover (e.g. project dropdown)
+        //  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) {
+            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();
+                (_c = opts.onPopoverEscape) === null || _c === void 0 ? void 0 : _c.call(opts);
+                return true;
+            }
+            var container = opts.container;
+            if (container && el && el !== container && container.contains(el)) {
+                event.preventDefault();
+                container.focus();
+                return true;
+            }
+            event.preventDefault();
+            (_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.
+        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.
+            var goDown = event.key === 'ArrowDown' || event.key === 'j';
+            var goUp = event.key === 'ArrowUp' || event.key === 'k';
+            if (goDown || goUp) {
+                var isVimKey = event.key === 'j' || event.key === 'k';
+                var blocked = isVimKey ? isTextField : isMultiline;
+                if (!blocked) {
+                    event.preventDefault();
+                    moveRung(goDown ? 1 : -1);
+                    return true;
+                }
+            }
+            // Horizontal: ArrowLeft / ArrowRight dispatch to `onAction`.
+            // Skipped inside text fields so caret-left / caret-right keep working.
+            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') &&
+                !isTextField) {
+                event.preventDefault();
+                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).
+                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) {
+                    var rungId = (_h = focusedHost.getAttribute(attr)) !== null && _h !== void 0 ? _h : '';
+                    opts.onAction(rungId, event.key === 'ArrowRight' ? 1 : -1, focusedHost);
+                }
+                return true;
+            }
+        }
+        return false;
+    }
+    return {
+        handleKeydown: handleKeydown,
+        handleFocusin: handleFocusin,
+        moveRung: moveRung,
+        focus: focus,
+        refresh: refresh,
+        currentId: function () { return _currentRailId; },
+        bump: bump,
+    };
+}
+// ─── Composable ────────────────────────────────────────────────────────────────
+/**
+ * Imperative composable — use when you already own keydown / focusin handlers
+ * and want `railNav` to decide whether to consume the event.
+ *
+ * You **must** supply `options.container` and wire both events:
+ *
+ *   const rail = createRailNav({ container: panel, order, onAction, onEscape });
+ *   panel.addEventListener('keydown', (e) => rail.handleKeydown(e));
+ *   panel.addEventListener('focusin', (e) => rail.handleFocusin(e));
+ */
+export function createRailNav(options) {
+    var ref = { current: options };
+    return makeController(ref);
+}
+// ─── Action ────────────────────────────────────────────────────────────────────
+/**
+ * Svelte action — attaches `keydown` and `focusin` listeners to `node` and
+ * handles rung stepping, horizontal action dispatch, and Escape cascade.
+ *
+ * @example
+ *   <div use:railNav={{ order, onAction, onEscape }}>
+ *     <input data-rail-id="title" />
+ *     <div   data-rail-id="type"     tabindex="-1">…</div>
+ *     <div   data-rail-id="priority" tabindex="-1">…</div>
+ *   </div>
+ */
+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);
+    }
+    function onFocusin(e) {
+        controller.handleFocusin(e);
+    }
+    node.addEventListener('keydown', onKeydown);
+    node.addEventListener('focusin', onFocusin);
+    return {
+        update: function (next) {
+            if (next === void 0) { next = { order: [] }; }
+            ref.current = __assign(__assign({}, next), { container: node });
+            controller.refresh();
+        },
+        destroy: function () {
+            node.removeEventListener('keydown', onKeydown);
+            node.removeEventListener('focusin', onFocusin);
+        },
+    };
+};

package/dist/components/AnnotationLayer.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import type { Annotation, AnnotationThread } from '../types/annotation'
+
+  interface Props {
+    annotations: Annotation[]
+    activeAnnotationId?: string | null
+    annotationMode?: boolean
+    showResolved?: boolean
+    onAnnotationClick?: (annotation: Annotation) => void
+    onImageClick?: (x: number, y: number) => void
+  }
+
+  let {
+    annotations = [],
+    activeAnnotationId = null,
+    annotationMode = false,
+    showResolved = false,
+    onAnnotationClick,
+    onImageClick,
+  }: Props = $props()
+
+  // Group into threads (only show root pins)
+  const threads = $derived.by(() => {
+    const roots = annotations.filter((a) => !a.parent_annotation_id)
+    return roots
+      .filter((r) => showResolved || !r.resolved)
+      .map((root) => ({
+        root,
+        replies: annotations.filter((a) => a.parent_annotation_id === root.id),
+      }))
+  })
+
+  function handleOverlayClick(e: MouseEvent) {
+    if (!annotationMode || !onImageClick) return
+    const target = e.currentTarget as HTMLElement
+    const rect = target.getBoundingClientRect()
+    const x = ((e.clientX - rect.left) / rect.width) * 100
+    const y = ((e.clientY - rect.top) / rect.height) * 100
+    onImageClick(Math.round(x * 1000) / 1000, Math.round(y * 1000) / 1000)
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="absolute inset-0 z-10"
+  class:cursor-crosshair={annotationMode}
+  class:pointer-events-none={!annotationMode && threads.length === 0}
+  onclick={handleOverlayClick}
+>
+  {#each threads as thread (thread.root.id)}
+    {@const isActive = activeAnnotationId === thread.root.id}
+    {@const replyCount = thread.replies.length}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="absolute pointer-events-auto"
+      style="left: {thread.root.x_percent}%; top: {thread.root.y_percent}%; transform: translate(-50%, -100%);"
+    >
+      <button
+        class="relative group flex flex-col items-center"
+        onclick={(e) => { e.stopPropagation(); onAnnotationClick?.(thread.root) }}
+        title={thread.root.content.slice(0, 80)}
+      >
+        <!-- Pin icon -->
+        <div
+          class="w-7 h-7 rounded-full flex items-center justify-center shadow-lg border-2 transition-all
+            {isActive
+              ? 'bg-primary border-primary text-primary-content scale-125'
+              : thread.root.resolved
+                ? 'bg-success/80 border-success/60 text-success-content'
+                : 'bg-warning border-warning/80 text-warning-content hover:scale-110'}"
+        >
+          {#if thread.root.resolved}
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
+            </svg>
+          {:else}
+            <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z" />
+            </svg>
+          {/if}
+        </div>
+
+        <!-- Reply count badge -->
+        {#if replyCount > 0}
+          <span class="absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full bg-base-content text-base-100 text-[10px] font-bold flex items-center justify-center">
+            {replyCount}
+          </span>
+        {/if}
+
+        <!-- Pin tail -->
+        <div
+          class="w-0.5 h-2 -mt-0.5 {isActive ? 'bg-primary' : thread.root.resolved ? 'bg-success/60' : 'bg-warning/80'}"
+        ></div>
+      </button>
+    </div>
+  {/each}
+
+  <!-- Placement indicator when in annotation mode -->
+  {#if annotationMode}
+    <div class="absolute inset-0 border-2 border-dashed border-primary/30 rounded pointer-events-none">
+      <div class="absolute top-2 left-1/2 -translate-x-1/2 bg-primary/90 text-primary-content text-xs px-3 py-1 rounded-full shadow whitespace-nowrap">
+        Click to place annotation
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/components/AnnotationLayer.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Annotation } from '../types/annotation';
+interface Props {
+    annotations: Annotation[];
+    activeAnnotationId?: string | null;
+    annotationMode?: boolean;
+    showResolved?: boolean;
+    onAnnotationClick?: (annotation: Annotation) => void;
+    onImageClick?: (x: number, y: number) => void;
+}
+declare const AnnotationLayer: import("svelte").Component<Props, {}, "">;
+type AnnotationLayer = ReturnType<typeof AnnotationLayer>;
+export default AnnotationLayer;