pinprompt 0.0.1-alpha.0 → 0.0.1-alpha.1

package/README.md

@@ -1,8 +1,17 @@
 # pinprompt
 
-**Click your UI, type what you want, paste an exact prompt into your AI.**
+[![npm](https://img.shields.io/npm/v/pinprompt)](https://www.npmjs.com/package/pinprompt)
+[![downloads](https://img.shields.io/npm/dw/pinprompt)](https://www.npmjs.com/package/pinprompt)
+[![CI](https://github.com/ueqeb/pinprompt/actions/workflows/ci.yml/badge.svg)](https://github.com/ueqeb/pinprompt/actions/workflows/ci.yml)
+[![Socket](https://socket.dev/api/badge/npm/package/pinprompt)](https://socket.dev/npm/package/pinprompt)
+![dependencies](https://img.shields.io/badge/dependencies-0-brightgreen)
+[![license](https://img.shields.io/npm/l/pinprompt)](LICENSE)
 
-A dev-only Vite plugin for SvelteKit. Instead of describing elements in words, you click them, and pinprompt writes where they live in your code. Built for Claude Code; the output is plain text, so any AI can read it.
+**Stop describing where to change, waiting for your AI to find it, and paying for the search.**
+
+Click elements in your SvelteKit app; pinprompt puts their exact source location in your prompt.
+
+![pinprompt demo: open the bar, click two elements, press Enter, get a prompt with file:line references](docs/demo.gif)
 
 ```
 move [click] above [click]
@@ -22,15 +31,11 @@ move [1] above [2]
 
 ## Why
 
-**For you**
-- Point instead of describing. No hunting for file names and line numbers.
-- Pick the exact instance: which card, which loop item, which component usage.
-- Works where you already are: your running app, your AI tool, your clipboard.
-
-**For your AI**
-- Goes straight to `file:line` instead of searching the codebase.
-- Fewer turns, fewer tokens, fewer edits to the wrong element.
-- Compact on purpose: no framework internals, no whole files pulled into context.
+| Pain | With pinprompt |
+|---|---|
+| Describing exactly where to change | Click it. The prompt gets `file:line`, the component and which loop item |
+| Waiting while the AI searches | It goes straight to the line: **2.4× faster** |
+| Paying for that search | Fewer turns and tokens: **39% cheaper** |
 
 ## Benchmark
 
@@ -65,7 +70,7 @@ Start your dev server, then:
 | **Alt+P** | open the prompt bar |
 | click | reference an element |
 | **↑ / ↓** | widen to the parent element / narrow back |
-| **Enter** | copy the prompt |
+| **Enter** | copy the prompt (it stays shown: copy all again, or select just a part) |
 | **Esc** | close (your draft is kept) |
 
 ## Feedback wanted

package/dist/client.js

@@ -2853,6 +2853,49 @@ var all_registered_events = /* @__PURE__ */ new Set();
 var root_event_handles = /* @__PURE__ */ new Set();
 /**
 * @param {string} event_name
+* @param {EventTarget} dom
+* @param {EventListener} [handler]
+* @param {AddEventListenerOptions} [options]
+*/
+function create_event(event_name, dom, handler, options = {}) {
+	/**
+	* @this {EventTarget}
+	*/
+	function target_handler(event) {
+		if (!options.capture) handle_event_propagation.call(dom, event);
+		if (!event.cancelBubble) return without_reactive_context(() => {
+			return handler?.call(this, event);
+		});
+	}
+	if (event_name.startsWith("pointer") || event_name.startsWith("touch") || event_name === "wheel") {
+		target_handler.__removed = false;
+		queue_micro_task(() => {
+			if (!target_handler.__removed) dom.addEventListener(event_name, target_handler, options);
+		});
+	} else dom.addEventListener(event_name, target_handler, options);
+	return target_handler;
+}
+/**
+* @param {string} event_name
+* @param {Element} dom
+* @param {EventListener} [handler]
+* @param {boolean} [capture]
+* @param {boolean} [passive]
+* @returns {void}
+*/
+function event(event_name, dom, handler, capture, passive) {
+	var options = {
+		capture,
+		passive
+	};
+	var target_handler = create_event(event_name, dom, handler, options);
+	if (dom === document.body || dom === window || dom === document || dom instanceof HTMLMediaElement) teardown(() => {
+		target_handler.__removed = true;
+		dom.removeEventListener(event_name, target_handler, options);
+	});
+}
+/**
+* @param {string} event_name
 * @param {Element} element
 * @param {EventListener} [handler]
 * @returns {void}
@@ -4662,13 +4705,13 @@ var root = /* @__PURE__ */ from_html(`<div class="box picked svelte-4537t3"><spa
 var root_1 = /* @__PURE__ */ from_html(`<div class="box hover svelte-4537t3"><span class="tag svelte-4537t3"> </span></div>`);
 var root_2 = /* @__PURE__ */ from_html(`<li class="svelte-4537t3"><b class="svelte-4537t3"> </b> </li>`);
 var root_3 = /* @__PURE__ */ from_html(`<ul class="refs svelte-4537t3"></ul>`);
-var root_4 = /* @__PURE__ */ from_html(`<button class="output svelte-4537t3" title="Copy again"><pre class="svelte-4537t3"> </pre></button> <div class="hint svelte-4537t3"><span class="svelte-4537t3"><span> </span> · click to copy again · Esc dismiss</span> <button class="dismiss svelte-4537t3" title="Dismiss">✕</button></div>`, 1);
+var root_4 = /* @__PURE__ */ from_html(`<pre class="output svelte-4537t3" tabindex="-1"> </pre> <div class="hint svelte-4537t3"><span class="svelte-4537t3"><span> </span> · select to copy part · Esc dismiss</span> <span class="actions svelte-4537t3"><button class="copy svelte-4537t3">Copy all</button> <button class="dismiss svelte-4537t3" title="Dismiss">✕</button></span></div>`, 1);
 var root_5 = /* @__PURE__ */ from_html(`<textarea rows="2" placeholder="Type what you want, click elements to reference them…" class="svelte-4537t3"></textarea> <div class="hint svelte-4537t3"><span class="svelte-4537t3">Click to reference · ↑↓ parent/child · Enter copy · Esc close</span> <span class="svelte-4537t3"> </span></div>`, 1);
 var root_6 = /* @__PURE__ */ from_html(`<!> <!> <div class="bar svelte-4537t3"><!> <!></div>`, 1);
 var root_7 = /* @__PURE__ */ from_html(`<button class="launcher svelte-4537t3" title="pinprompt (Alt+P)">pinprompt</button>`);
 var $$css = {
 	hash: "svelte-4537t3",
-	code: ".svelte-4537t3 {box-sizing:border-box;}.box.svelte-4537t3 {position:fixed;z-index:2147483646;pointer-events:none;border-radius:3px;}.hover.svelte-4537t3 {outline:2px dashed #3b82f6;background:rgb(59 130 246 / 0.08);}.picked.svelte-4537t3 {outline:2px solid var(--c);}.tag.svelte-4537t3 {position:absolute;left:-2px;bottom:100%;padding:1px 6px;border-radius:3px 3px 0 0;background:var(--c, #3b82f6);color:#fff;font:600 11px/1.5 ui-monospace, monospace;white-space:nowrap;}.bar.svelte-4537t3 {position:fixed;z-index:2147483647;left:50%;bottom:16px;width:min(640px, calc(100vw - 32px));transform:translateX(-50%);padding:8px;border-radius:10px;background:#18181b;color:#fafafa;box-shadow:0 8px 30px rgb(0 0 0 / 0.35);font:13px/1.4 system-ui, sans-serif;}.refs.svelte-4537t3 {display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px;padding:0;list-style:none;}.refs.svelte-4537t3 li:where(.svelte-4537t3) {padding:1px 6px;border-left:3px solid var(--c);border-radius:3px;background:#27272a;font-size:12px;}textarea.svelte-4537t3 {display:block;width:100%;resize:none;padding:6px 8px;border:1px solid #3f3f46;border-radius:6px;background:#09090b;color:inherit;font:14px/1.4 ui-monospace, monospace;outline:none;}textarea.svelte-4537t3:focus {border-color:#3b82f6;}.hint.svelte-4537t3 {display:flex;justify-content:space-between;margin-top:4px;color:#a1a1aa;font-size:11px;}.status.svelte-4537t3 {color:#4ade80;}.status.failed.svelte-4537t3 {color:#f87171;}.output.svelte-4537t3 {display:block;width:100%;max-height:40vh;overflow:auto;padding:6px 8px;border:1px solid #3f3f46;border-radius:6px;background:#09090b;color:inherit;text-align:left;cursor:copy;}.output.svelte-4537t3:hover,\n	.output.svelte-4537t3:focus-visible {border-color:#3b82f6;outline:none;}.output.svelte-4537t3 pre:where(.svelte-4537t3) {margin:0;font:12px/1.45 ui-monospace, monospace;white-space:pre-wrap;word-break:break-word;}.dismiss.svelte-4537t3 {padding:0 4px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;}.dismiss.svelte-4537t3:hover {color:#fafafa;}.launcher.svelte-4537t3 {position:fixed;z-index:2147483647;right:12px;bottom:12px;padding:4px 10px;border:0;border-radius:6px;background:#18181b;color:#fafafa;font:12px/1.4 system-ui, sans-serif;cursor:pointer;opacity:0.6;}.launcher.svelte-4537t3:hover {opacity:1;}"
+	code: ".svelte-4537t3 {box-sizing:border-box;}.box.svelte-4537t3 {position:fixed;z-index:2147483646;pointer-events:none;border-radius:3px;}.hover.svelte-4537t3 {outline:2px dashed #3b82f6;background:rgb(59 130 246 / 0.08);}.picked.svelte-4537t3 {outline:2px solid var(--c);}.tag.svelte-4537t3 {position:absolute;left:-2px;bottom:100%;padding:1px 6px;border-radius:3px 3px 0 0;background:var(--c, #3b82f6);color:#fff;font:600 11px/1.5 ui-monospace, monospace;white-space:nowrap;}.bar.svelte-4537t3 {position:fixed;z-index:2147483647;left:50%;bottom:16px;width:min(640px, calc(100vw - 32px));transform:translateX(-50%);padding:8px;border-radius:10px;background:#18181b;color:#fafafa;box-shadow:0 8px 30px rgb(0 0 0 / 0.35);font:13px/1.4 system-ui, sans-serif;}.refs.svelte-4537t3 {display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px;padding:0;list-style:none;}.refs.svelte-4537t3 li:where(.svelte-4537t3) {padding:1px 6px;border-left:3px solid var(--c);border-radius:3px;background:#27272a;font-size:12px;}textarea.svelte-4537t3 {display:block;width:100%;resize:none;padding:6px 8px;border:1px solid #3f3f46;border-radius:6px;background:#09090b;color:inherit;font:14px/1.4 ui-monospace, monospace;outline:none;}textarea.svelte-4537t3:focus {border-color:#3b82f6;}.hint.svelte-4537t3 {display:flex;justify-content:space-between;margin-top:4px;color:#a1a1aa;font-size:11px;}.status.svelte-4537t3 {color:#4ade80;}.status.failed.svelte-4537t3 {color:#f87171;}.output.svelte-4537t3 {max-height:40vh;overflow:auto;margin:0;padding:6px 8px;border:1px solid #3f3f46;border-radius:6px;background:#09090b;font:12px/1.45 ui-monospace, monospace;white-space:pre-wrap;word-break:break-word;user-select:text;cursor:text;outline:none;}.actions.svelte-4537t3 {display:flex;gap:6px;align-items:center;}.copy.svelte-4537t3 {padding:1px 8px;border:1px solid #3f3f46;border-radius:4px;background:#27272a;color:#fafafa;font:inherit;cursor:pointer;}.copy.svelte-4537t3:hover,\n	.copy.svelte-4537t3:focus-visible {border-color:#3b82f6;outline:none;}.dismiss.svelte-4537t3 {padding:0 4px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;}.dismiss.svelte-4537t3:hover {color:#fafafa;}.launcher.svelte-4537t3 {position:fixed;z-index:2147483647;right:12px;bottom:12px;padding:4px 10px;border:0;border-radius:6px;background:#18181b;color:#fafafa;font:12px/1.4 system-ui, sans-serif;cursor:pointer;opacity:0.6;}.launcher.svelte-4537t3:hover {opacity:1;}"
 };
 function Overlay($$anchor, $$props) {
 	push($$props, true);
@@ -4711,6 +4754,9 @@ function Overlay($$anchor, $$props) {
 			if (e.altKey && !e.ctrlKey && !e.metaKey && e.code === "KeyP") {
 				e.preventDefault();
 				toggle();
+			} else if (e.key === "Escape" && get(output) && e.composedPath().includes($$props.host)) {
+				e.preventDefault();
+				dismiss();
 			}
 		};
 		window.addEventListener("keydown", onKey, true);
@@ -4789,12 +4835,6 @@ function Overlay($$anchor, $$props) {
 		set(output, "");
 		set(status, "");
 	}
-	function onResultKeydown(e) {
-		if (e.key === "Escape") {
-			e.preventDefault();
-			dismiss();
-		}
-	}
 	function onKeydown(e) {
 		if (e.isComposing || e.keyCode === 229) return;
 		if (e.key === "Enter" && !e.shiftKey) {
@@ -4890,26 +4930,28 @@ function Overlay($$anchor, $$props) {
 		var node_5 = sibling(node_4, 2);
 		var consequent_3 = ($$anchor) => {
 			var fragment_3 = root_4();
-			var button = first_child(fragment_3);
-			var text_5 = only_child(child(button), true);
-			reset(button);
-			bind_this(button, ($$value) => set(result, $$value), () => get(result));
-			var div_3 = sibling(button, 2);
+			var pre = first_child(fragment_3);
+			var text_5 = only_child(pre, true);
+			var div_3 = sibling(pre, 2);
 			var span_2 = child(div_3);
 			var span_3 = child(span_2);
 			let classes;
 			var text_6 = only_child(span_3, true);
 			next();
 			reset(span_2);
-			var button_1 = sibling(span_2, 2);
+			var span_4 = sibling(span_2, 2);
+			var button = child(span_4);
+			bind_this(button, ($$value) => set(result, $$value), () => get(result));
+			var button_1 = sibling(button, 2);
+			reset(span_4);
 			reset(div_3);
 			template_effect(() => {
 				set_text(text_5, get(output));
 				classes = set_class(span_3, 1, "status svelte-4537t3", null, classes, { failed: get(failed) });
 				set_text(text_6, get(status) || "Copied");
 			});
+			event("copy", pre, () => (set(status, "Copied selection"), set(failed, false)));
 			delegated("click", button, copy);
-			delegated("keydown", button, onResultKeydown);
 			delegated("click", button_1, dismiss);
 			append($$anchor, fragment_3);
 		};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "pinprompt",
-	"version": "0.0.1-alpha.0",
-	"description": "Point at your app, say what you want, and paste a prompt that tells your AI exactly which code you mean.",
+	"version": "0.0.1-alpha.1",
+	"description": "Click your SvelteKit UI to tell your AI exactly where to change. Less describing, waiting and paying.",
 	"keywords": [
 		"svelte",
 		"sveltekit",
@@ -27,6 +27,7 @@
 	"engines": {
 		"node": ">=18"
 	},
+	"packageManager": "pnpm@12.9.1",
 	"files": [
 		"dist"
 	],