npm - kapi-ui - Versions diffs - 0.1.0 - Mend

kapi-ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md +1 -0
package/dist/comments.js +363 -0
package/dist/constants.js +1 -0
package/dist/hover-panel.js +118 -0
package/dist/inspector.js +168 -0
package/dist/location-transform.js +47 -0
package/dist/overlay.js +378 -0
package/dist/server.js +118 -0
package/dist/setup.js +46 -0
package/dist/socket.js +36 -0
package/dist/types.js +1 -0
package/dist/utils.js +44 -0
package/dist/vite-plugin.js +44 -0
package/package.json +46 -0

package/README.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ # kapi

package/dist/comments.js ADDED Viewed

@@ -0,0 +1,363 @@
+import { lockHighlightOn, unlockHighlight, getSourceLocation } from './inspector.js';
+const TAG = 'kapi-comments';
+const STORAGE_KEY = `kapi-comments:${location.pathname}`;
+const MARKER_COLOR = '34, 197, 94'; // green-500, matches the hover highlight
+const MARKER_SIZE = 22;
+const MARKER_RADIUS = MARKER_SIZE / 2;
+const PANEL_WIDTH = 240; // shared fixed width for both the composer and the submitted tooltip
+// viewBox is cropped to the path's actual ink bounding box (0,0 to ~4.08,4.08),
+// not the original 0 0 5 5 -- the artwork isn't centered in that stated box,
+// so a naive flex-centered render looks visibly off.
+const ARROW_SVG = `<svg viewBox="0 0 4.08228 4.08228" width="10" height="10" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M4.08228 1.9241L3.65301 2.33273L2.35468 1.10883L2.35468 4.08228L1.72761 4.08228L1.72761 1.10883L0.431375 2.33273L-9.43368e-08 1.9241L2.04114 -6.76765e-06L4.08228 1.9241Z" fill="#1E1E1F"/></svg>`;
+const STYLES = `
+  :host {
+    all: initial;
+    color-scheme: dark;
+  }
+  .kapi-comment {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2147483647;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    pointer-events: none;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+  .kapi-comment-marker {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: ${MARKER_SIZE}px;
+    height: ${MARKER_SIZE}px;
+    border-radius: 50%;
+    background: rgb(${MARKER_COLOR});
+    color: #fff;
+    font-size: 11px;
+    font-weight: 600;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+    pointer-events: auto;
+    cursor: default;
+    flex: none;
+    user-select: none;
+  }
+  .kapi-comment-tooltip,
+  .kapi-comment-composer {
+    display: none;
+    position: absolute;
+    left: ${MARKER_SIZE + 8}px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: ${PANEL_WIDTH}px;
+    box-sizing: border-box;
+    border-radius: 12px;
+    background: #1e1e1f;
+    box-shadow:
+      inset 0 0 0 1px rgba(255, 255, 255, 0.14),
+      0 2px 4px rgba(0, 0, 0, 0.2),
+      0 8px 16px rgba(0, 0, 0, 0.2);
+    pointer-events: auto;
+  }
+  .kapi-comment-tooltip {
+    flex-direction: column;
+    gap: 2px;
+    padding: 8px 14px;
+    color: #fff;
+    font-size: 13px;
+    line-height: 1.3;
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+  .kapi-comment.kapi-hovering .kapi-comment-tooltip {
+    display: flex;
+  }
+  .kapi-comment-tooltip-source {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 11px;
+    font-weight: 600;
+    color: rgb(${MARKER_COLOR});
+  }
+  .kapi-comment-composer {
+    display: flex;
+    align-items: flex-end;
+    gap: 8px;
+    padding: 6px 6px 6px 14px;
+  }
+  .kapi-comment-input {
+    all: unset;
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    max-height: 120px;
+    overflow-y: auto;
+    resize: none;
+    color: #fff;
+    font-family: inherit;
+    font-size: 13px;
+    line-height: 1.3;
+    padding: 5px 0;
+  }
+  .kapi-comment-input::placeholder {
+    color: rgba(255, 255, 255, 0.4);
+  }
+  .kapi-comment-send {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 24px;
+    height: 24px;
+    border-radius: 8px;
+    background: #fff;
+    cursor: pointer;
+    flex: none;
+  }
+`;
+let root = null;
+let comments = [];
+let draft = null;
+// Builds a positional selector (nth-child chain from <body>) so a comment's
+// element can be re-found across page reloads without relying on id/class.
+function buildUniqueSelector(el) {
+    const parts = [];
+    let node = el;
+    while (node && node !== document.body) {
+        const parentEl = node.parentElement;
+        if (!parentEl)
+            break;
+        const index = Array.from(parentEl.children).indexOf(node) + 1;
+        parts.unshift(`${node.tagName.toLowerCase()}:nth-child(${index})`);
+        node = parentEl;
+    }
+    parts.unshift('body');
+    return parts.join(' > ');
+}
+function saveToStorage() {
+    const data = comments.map((c) => ({
+        id: c.id,
+        selector: buildUniqueSelector(c.el),
+        ratioX: c.ratioX,
+        ratioY: c.ratioY,
+        text: c.text,
+        source: c.source,
+    }));
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+    }
+    catch {
+        /* ignore (storage disabled/full) */
+    }
+}
+function loadFromStorage() {
+    let data;
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (!raw)
+            return;
+        data = JSON.parse(raw);
+    }
+    catch {
+        return; // ignore corrupt/inaccessible storage
+    }
+    for (const item of data) {
+        const el = document.querySelector(item.selector);
+        if (!el)
+            continue; // page structure changed since this was saved; skip it
+        comments.push({ id: item.id, el, ratioX: item.ratioX, ratioY: item.ratioY, text: item.text, source: item.source });
+    }
+}
+function ensureRoot() {
+    if (root)
+        return root;
+    const host = document.createElement(TAG);
+    root = host.attachShadow({ mode: 'open' });
+    const style = document.createElement('style');
+    style.textContent = STYLES;
+    root.appendChild(style);
+    document.body.appendChild(host);
+    return root;
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function position(target, wrapper) {
+    const rect = target.el.getBoundingClientRect();
+    const x = rect.left + target.ratioX * rect.width;
+    const y = rect.top + target.ratioY * rect.height;
+    wrapper.style.transform = `translate(${x - MARKER_RADIUS}px, ${y - MARKER_RADIUS}px)`;
+}
+function renderMarker(number, target, text, source) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'kapi-comment';
+    const marker = document.createElement('div');
+    marker.className = 'kapi-comment-marker';
+    marker.textContent = String(number);
+    const tooltip = document.createElement('div');
+    tooltip.className = 'kapi-comment-tooltip';
+    if (source) {
+        const sourceEl = document.createElement('div');
+        sourceEl.className = 'kapi-comment-tooltip-source';
+        sourceEl.textContent = `${source.file}:${source.line}:${source.column}`;
+        tooltip.appendChild(sourceEl);
+    }
+    const textEl = document.createElement('div');
+    textEl.textContent = text;
+    tooltip.appendChild(textEl);
+    marker.addEventListener('mouseenter', () => wrapper.classList.add('kapi-hovering'));
+    marker.addEventListener('mouseleave', () => wrapper.classList.remove('kapi-hovering'));
+    wrapper.append(marker, tooltip);
+    position(target, wrapper);
+    return wrapper;
+}
+function renderComposer(number, target) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'kapi-comment';
+    const marker = document.createElement('div');
+    marker.className = 'kapi-comment-marker';
+    marker.textContent = String(number);
+    const composer = document.createElement('div');
+    composer.className = 'kapi-comment-composer';
+    const input = document.createElement('textarea');
+    input.className = 'kapi-comment-input';
+    input.placeholder = 'Add a comment';
+    input.rows = 1;
+    const autoGrow = () => {
+        input.style.height = 'auto';
+        input.style.height = `${input.scrollHeight}px`;
+    };
+    input.addEventListener('input', autoGrow);
+    const sendBtn = document.createElement('button');
+    sendBtn.type = 'button';
+    sendBtn.className = 'kapi-comment-send';
+    sendBtn.setAttribute('aria-label', 'Submit comment');
+    sendBtn.innerHTML = ARROW_SVG;
+    const submit = () => submitDraft(input.value);
+    sendBtn.addEventListener('click', submit);
+    input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            submit();
+        }
+        if (e.key === 'Escape')
+            cancelDraft();
+    });
+    composer.append(input, sendBtn);
+    wrapper.append(marker, composer);
+    position(target, wrapper);
+    queueMicrotask(() => {
+        input.focus();
+        autoGrow();
+    });
+    return wrapper;
+}
+function render() {
+    const r = ensureRoot();
+    r.querySelectorAll('.kapi-comment').forEach((n) => n.remove());
+    for (const entry of comments) {
+        r.appendChild(renderMarker(entry.id, entry, entry.text, entry.source));
+    }
+    if (draft) {
+        r.appendChild(renderComposer(comments.length + 1, draft));
+    }
+}
+function repositionAll() {
+    if (!root)
+        return;
+    const wrappers = root.querySelectorAll('.kapi-comment');
+    const targets = [...comments];
+    if (draft)
+        targets.push(draft);
+    wrappers.forEach((wrapper, i) => {
+        const target = targets[i];
+        if (target)
+            position(target, wrapper);
+    });
+}
+window.addEventListener('resize', repositionAll);
+window.addEventListener('scroll', repositionAll, true);
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && draft)
+        cancelDraft();
+}, true);
+function submitDraft(rawText) {
+    if (!draft)
+        return;
+    const text = rawText.trim();
+    if (!text) {
+        cancelDraft();
+        return;
+    }
+    comments.push({
+        id: comments.length + 1,
+        el: draft.el,
+        ratioX: draft.ratioX,
+        ratioY: draft.ratioY,
+        text,
+        source: getSourceLocation(draft.el),
+    });
+    draft = null;
+    unlockHighlight();
+    saveToStorage();
+    render();
+}
+function cancelDraft() {
+    draft = null;
+    unlockHighlight();
+    render();
+}
+export function cancelOpenDraft() {
+    if (draft)
+        cancelDraft();
+}
+export function buildCommentsPrompt() {
+    if (comments.length === 0)
+        return null;
+    const lines = comments.map((c) => {
+        const location = c.source ? `${c.source.file}:${c.source.line}:${c.source.column}` : buildUniqueSelector(c.el);
+        return `${c.id}. [${location}] ${c.text}`;
+    });
+    return [
+        'Address each of the following review comments left on specific elements in this app:',
+        '',
+        ...lines,
+    ].join('\n');
+}
+export function clearAllComments() {
+    comments = [];
+    if (draft) {
+        draft = null;
+        unlockHighlight();
+    }
+    try {
+        localStorage.removeItem(STORAGE_KEY);
+    }
+    catch {
+        /* ignore (storage disabled) */
+    }
+    render();
+}
+export function beginComment(el, clientX, clientY) {
+    if (draft)
+        return; // a draft is already open; must be sent (or Escaped) before starting another
+    const rect = el.getBoundingClientRect();
+    const ratioX = rect.width > 0 ? clamp((clientX - rect.left) / rect.width, 0, 1) : 0.5;
+    const ratioY = rect.height > 0 ? clamp((clientY - rect.top) / rect.height, 0, 1) : 0.5;
+    draft = { el, ratioX, ratioY };
+    lockHighlightOn(el);
+    render();
+}
+loadFromStorage();
+render();

package/dist/constants.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export const KAPI_SERVER_PORT = 6767;

package/dist/hover-panel.js ADDED Viewed

@@ -0,0 +1,118 @@
+const PANEL_TAG = 'kapi-hover-panel';
+const STYLES = `
+  :host {
+    all: initial;
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 2147483647;
+    color-scheme: dark;
+  }
+  .kapi-hover-panel {
+    display: none;
+    max-width: 360px;
+    box-sizing: border-box;
+    padding: 8px 12px;
+    border-radius: 10px;
+    background: #1e1e1f;
+    box-shadow:
+      inset 0 0 0 1px rgba(255, 255, 255, 0.14),
+      0 2px 4px rgba(0, 0, 0, 0.2),
+      0 8px 16px rgba(0, 0, 0, 0.2);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 12px;
+    line-height: 1.5;
+    color: rgba(255, 255, 255, 0.75);
+    word-break: break-word;
+  }
+  .kapi-hover-panel.kapi-visible {
+    display: block;
+  }
+  .kapi-hover-panel b {
+    color: rgb(74, 222, 128);
+    font-weight: 600;
+  }
+  .kapi-hover-panel-source {
+    color: rgb(74, 222, 128);
+    font-weight: 600;
+    margin-bottom: 2px;
+  }
+  .kapi-hover-panel-selector {
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 11px;
+  }
+  .kapi-hover-panel-status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: rgba(255, 255, 255, 0.85);
+  }
+  .kapi-hover-panel-status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: rgb(74, 222, 128);
+    flex: none;
+    animation: kapi-pulse 1s ease-in-out infinite;
+  }
+  @keyframes kapi-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.3; }
+  }
+`;
+let host = null;
+let panel = null;
+function ensurePanel() {
+    if (panel)
+        return panel;
+    host = document.createElement(PANEL_TAG);
+    const root = host.attachShadow({ mode: 'open' });
+    const style = document.createElement('style');
+    style.textContent = STYLES;
+    root.appendChild(style);
+    panel = document.createElement('div');
+    panel.className = 'kapi-hover-panel';
+    root.appendChild(panel);
+    document.body.appendChild(host);
+    return panel;
+}
+export function updateHoverPanel(location) {
+    const el = ensurePanel();
+    if (!location) {
+        el.classList.remove('kapi-visible');
+        return;
+    }
+    el.replaceChildren();
+    if (location.source) {
+        const sourceEl = document.createElement('div');
+        sourceEl.className = 'kapi-hover-panel-source';
+        sourceEl.textContent = `${location.source.file}:${location.source.line}:${location.source.column}`;
+        el.appendChild(sourceEl);
+    }
+    const selectorEl = document.createElement('div');
+    selectorEl.className = 'kapi-hover-panel-selector';
+    selectorEl.textContent = location.selector;
+    el.appendChild(selectorEl);
+    el.classList.add('kapi-visible');
+}
+export function showProcessingStatus(status) {
+    const el = ensurePanel();
+    el.replaceChildren();
+    const row = document.createElement('div');
+    row.className = 'kapi-hover-panel-status';
+    const dot = document.createElement('span');
+    dot.className = 'kapi-hover-panel-status-dot';
+    const text = document.createElement('span');
+    text.textContent = status;
+    row.append(dot, text);
+    el.appendChild(row);
+    el.classList.add('kapi-visible');
+}

package/dist/inspector.js ADDED Viewed

@@ -0,0 +1,168 @@
+const HIGHLIGHT_COLOR = '34, 197, 94'; // green-500, as an rgb triplet for reuse in rgba()
+const IGNORE_SELECTOR = 'kapi-overlay, kapi-hover-panel, kapi-comments';
+let highlightEl = null;
+let blockerEl = null;
+let hoveredEl = null;
+let active = false;
+let locked = false;
+let disabled = false;
+let onHover = null;
+let onElementClick = null;
+function ensureHighlightEl() {
+    if (highlightEl)
+        return highlightEl;
+    const el = document.createElement('div');
+    el.style.cssText = `
+    position: fixed;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    box-sizing: border-box;
+    background: rgba(${HIGHLIGHT_COLOR}, 0.2);
+    border: 2px solid rgb(${HIGHLIGHT_COLOR});
+    z-index: 2147483646;
+    display: none;
+  `;
+    document.body.appendChild(el);
+    highlightEl = el;
+    return el;
+}
+function handleBlockerClick(e) {
+    const stack = document.elementsFromPoint(e.clientX, e.clientY);
+    const el = stack.find(isInspectable) ?? null;
+    if (!el)
+        return;
+    onElementClick?.(el, e.clientX, e.clientY);
+}
+function ensureBlockerEl() {
+    if (blockerEl)
+        return blockerEl;
+    const el = document.createElement('div');
+    el.style.cssText = `
+    position: fixed;
+    inset: 0;
+    pointer-events: auto;
+    background: transparent;
+    z-index: 2147483645;
+    display: none;
+  `;
+    el.addEventListener('click', handleBlockerClick);
+    document.body.appendChild(el);
+    blockerEl = el;
+    return el;
+}
+function isInspectable(el) {
+    if (!el)
+        return false;
+    if (el === blockerEl)
+        return false;
+    if (el.closest(IGNORE_SELECTOR))
+        return false;
+    return true;
+}
+function buildSelectorPath(el) {
+    const parts = [];
+    let node = el;
+    while (node && node !== document.body && node !== document.documentElement) {
+        let part = node.tagName.toLowerCase();
+        if (node.id)
+            part += `#${node.id}`;
+        else if (node.classList.length > 0)
+            part += `.${node.classList[0]}`;
+        parts.unshift(part);
+        node = node.parentElement;
+    }
+    return parts.join(' > ') || el.tagName.toLowerCase();
+}
+export function getSourceLocation(el) {
+    const host = el.closest('[data-kapi-loc]');
+    if (!host)
+        return null;
+    const raw = host.getAttribute('data-kapi-loc');
+    const lastColon = raw.lastIndexOf(':');
+    const secondLastColon = raw.lastIndexOf(':', lastColon - 1);
+    if (lastColon === -1 || secondLastColon === -1)
+        return null;
+    return {
+        file: raw.slice(0, secondLastColon),
+        line: Number(raw.slice(secondLastColon + 1, lastColon)),
+        column: Number(raw.slice(lastColon + 1)),
+    };
+}
+export function describeElement(el) {
+    return {
+        tag: el.tagName.toLowerCase(),
+        id: el.id || null,
+        classes: [...el.classList],
+        selector: buildSelectorPath(el),
+        source: getSourceLocation(el),
+    };
+}
+function paintHighlight(el) {
+    const box = ensureHighlightEl();
+    const rect = el.getBoundingClientRect();
+    box.style.display = 'block';
+    box.style.transform = `translate(${rect.left}px, ${rect.top}px)`;
+    box.style.width = `${rect.width}px`;
+    box.style.height = `${rect.height}px`;
+}
+function clearHighlight() {
+    if (highlightEl)
+        highlightEl.style.display = 'none';
+    hoveredEl = null;
+    onHover?.(null);
+}
+function handlePointerMove(e) {
+    if (locked)
+        return;
+    const stack = document.elementsFromPoint(e.clientX, e.clientY);
+    const el = stack.find(isInspectable) ?? null;
+    if (!el) {
+        clearHighlight();
+        return;
+    }
+    if (el === hoveredEl)
+        return;
+    hoveredEl = el;
+    paintHighlight(el);
+    onHover?.(el);
+}
+export function setOnHover(callback) {
+    onHover = callback;
+}
+export function lockHighlightOn(el) {
+    locked = true;
+    hoveredEl = el;
+    paintHighlight(el);
+    onHover?.(el);
+}
+export function unlockHighlight() {
+    locked = false;
+}
+export function setOnElementClick(callback) {
+    onElementClick = callback;
+}
+export function startInspecting() {
+    if (active || disabled)
+        return;
+    active = true;
+    document.addEventListener('pointermove', handlePointerMove, true);
+    ensureBlockerEl().style.display = 'block';
+}
+export function stopInspecting() {
+    if (!active)
+        return;
+    active = false;
+    document.removeEventListener('pointermove', handlePointerMove, true);
+    clearHighlight();
+    if (blockerEl)
+        blockerEl.style.display = 'none';
+}
+// Forcibly disables inspecting regardless of the bar's expand/collapse state,
+// and blocks it from being re-enabled until re-allowed (e.g. while Claude is
+// processing submitted comments).
+export function setDisabled(value) {
+    disabled = value;
+    if (disabled)
+        stopInspecting();
+}

package/dist/location-transform.js ADDED Viewed

@@ -0,0 +1,47 @@
+// Matches an opening HTML/Vue tag, tolerating quoted attribute values that
+// contain `>` (e.g. `v-if="a > b"`) so we don't mistake them for the tag end.
+const TAG_RE = /<([a-zA-Z][\w-]*)(?:\s+[^"'>]*(?:"[^"]*"|'[^']*')?)*\s*\/?>/g;
+function computeLineCol(code, index) {
+    let line = 1;
+    let lastNewlineIndex = -1;
+    for (let i = 0; i < index; i++) {
+        if (code.charCodeAt(i) === 10 /* \n */) {
+            line++;
+            lastNewlineIndex = i;
+        }
+    }
+    return { line, column: index - lastNewlineIndex };
+}
+/**
+ * Stamps every element inside a Vue SFC's <template> block with a
+ * `data-kapi-loc="relativeFile:line:column"` attribute, computed from the
+ * raw source text before @vitejs/plugin-vue compiles the template away.
+ */
+export function stampTemplateLocations(code, relativeFile) {
+    const templateOpenMatch = code.match(/<template\b[^>]*>/);
+    if (!templateOpenMatch || templateOpenMatch.index === undefined)
+        return code;
+    const templateContentStart = templateOpenMatch.index + templateOpenMatch[0].length;
+    const templateCloseIndex = code.lastIndexOf('</template>');
+    if (templateCloseIndex === -1 || templateCloseIndex <= templateContentStart)
+        return code;
+    let result = '';
+    let cursor = 0;
+    TAG_RE.lastIndex = templateContentStart;
+    let match;
+    while ((match = TAG_RE.exec(code))) {
+        if (match.index >= templateCloseIndex)
+            break;
+        const tagName = match[1];
+        const isRootTemplateTag = match.index === templateOpenMatch.index;
+        if (tagName.toLowerCase() === 'template' && isRootTemplateTag)
+            continue;
+        const { line, column } = computeLineCol(code, match.index);
+        const tagNameEnd = match.index + 1 + tagName.length;
+        const insertion = ` data-kapi-loc="${relativeFile}:${line}:${column}"`;
+        result += code.slice(cursor, tagNameEnd) + insertion;
+        cursor = tagNameEnd;
+    }
+    result += code.slice(cursor);
+    return result;
+}