starlight-onetag 0.1.0 → 0.2.0

package/README.md

@@ -69,6 +69,32 @@ This key is designed to be public, like an analytics ID: it ends up in the built
 
 Nothing is stored on a server. OneTag AI keeps token counts and timestamps, not questions or page text.
 
+## More AI features in this package
+
+Five more plugins ship in the same package. Add the ones you want next to `starlightOnetag()`; they share the key and add no component overrides.
+
+```js
+import starlightOnetag from "starlight-onetag";
+import starlightOnetagSearch from "starlight-onetag/search";
+import starlightOnetagTranslate from "starlight-onetag/translate";
+import starlightOnetagExplain from "starlight-onetag/explain";
+import starlightOnetagSummary from "starlight-onetag/summary";
+import starlightOnetagSelection from "starlight-onetag/selection";
+
+starlight({
+  plugins: [
+    starlightOnetag(),
+    starlightOnetagSearch(),    // AI answer inside the search dialog, above the Pagefind results
+    starlightOnetagTranslate(), // "Read in <your language>": AI translation of the page for the reader
+    starlightOnetagExplain(),   // "Explain this code" under every code block
+    starlightOnetagSummary(),   // "Summarize this page" on long pages
+    starlightOnetagSelection(), // select text, click Ask AI, get it explained in context
+  ],
+});
+```
+
+Each one has its own page with screenshots and options: [search](https://github.com/fengyiqicoder/starlight-onetag-search), [translate](https://github.com/fengyiqicoder/starlight-onetag-translate), [explain](https://github.com/fengyiqicoder/starlight-onetag-explain), [summary](https://github.com/fengyiqicoder/starlight-onetag-summary), [selection](https://github.com/fengyiqicoder/starlight-onetag-selection). The options are the same as listed there; the key also comes from `PUBLIC_ONETAG_KEY`.
+
 ## See also
 
 - [Astro AI Docs](https://github.com/fengyiqicoder/astro-ai-docs): a docs template that ships with this dialog built in.

package/package.json

@@ -1,17 +1,55 @@
 {
   "name": "starlight-onetag",
-  "version": "0.1.0",
-  "description": "Ask AI for Starlight docs: a dialog that answers from your own pages using the Pagefind index Starlight already builds. No backend; answers via OneTag AI with a public key.",
+  "version": "0.2.0",
+  "description": "AI for Starlight docs, no backend: Ask AI dialog, AI answers in search, one-click page translation for readers, Explain this code, page summaries and ask-about-selection. Answers via OneTag AI with a public key.",
   "type": "module",
   "license": "MIT",
-  "keywords": ["astro", "starlight", "starlight-plugin", "withastro", "docs", "ask-ai", "search", "chatbot", "onetag", "no-backend"],
-  "repository": { "type": "git", "url": "git+https://github.com/fengyiqicoder/starlight-onetag.git" },
+  "keywords": [
+    "ai-search",
+    "ask-ai",
+    "astro",
+    "chatbot",
+    "code",
+    "docs",
+    "explain",
+    "i18n",
+    "no-backend",
+    "onetag",
+    "pagefind",
+    "search",
+    "starlight",
+    "starlight-plugin",
+    "summary",
+    "translate",
+    "translation",
+    "withastro"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fengyiqicoder/starlight-onetag.git"
+  },
   "homepage": "https://github.com/fengyiqicoder/starlight-onetag",
   "exports": {
     ".": "./index.js",
-    "./Search.astro": "./components/Search.astro"
+    "./Search.astro": "./components/Search.astro",
+    "./translate": "./plugins/translate/index.js",
+    "./translate/client": "./plugins/translate/client.js",
+    "./explain": "./plugins/explain/index.js",
+    "./explain/client": "./plugins/explain/client.js",
+    "./summary": "./plugins/summary/index.js",
+    "./summary/client": "./plugins/summary/client.js",
+    "./search": "./plugins/search/index.js",
+    "./search/client": "./plugins/search/client.js",
+    "./selection": "./plugins/selection/index.js",
+    "./selection/client": "./plugins/selection/client.js"
   },
-  "files": ["index.js", "components", "README.md", "LICENSE"],
+  "files": [
+    "index.js",
+    "components",
+    "plugins",
+    "README.md",
+    "LICENSE"
+  ],
   "dependencies": {
     "onetagai": "^1.2.0"
   },

package/plugins/explain/client.js

@@ -0,0 +1,96 @@
+// Browser side of starlight-onetag-explain.
+import { addStyle, answerLanguage, BASE_CSS, contentRoot, demoNote, el, errorText, pageTitle, stream } from '../shared.js';
+
+// The text around a code block: the heading it sits under and the paragraph before it.
+function context(block) {
+	let heading = '';
+	let before = '';
+	let n = block;
+	while (n && n.parentElement !== contentRoot()) n = n.parentElement;
+	for (let p = n?.previousElementSibling; p; p = p.previousElementSibling) {
+		if (!before && !p.matches('.expressive-code, pre')) before = p.textContent.trim().slice(0, 1200);
+		if (/^H[2-4]$/.test(p.tagName) || p.querySelector?.(':scope > h2, :scope > h3, :scope > h4')) {
+			heading = p.textContent.replace(/Section titled.*$/, '').trim();
+			break;
+		}
+	}
+	return { heading, before };
+}
+
+export default function init(cfg) {
+	const root = contentRoot();
+	if (!root) return;
+	const blocks = [...root.querySelectorAll('.expressive-code')];
+	root.querySelectorAll('pre').forEach((pre) => {
+		if (!pre.closest('.expressive-code')) blocks.push(pre);
+	});
+	if (!blocks.length) return;
+	addStyle('starlight-onetag-explain', BASE_CSS + CSS);
+
+	blocks.forEach((block) => {
+		const pre = block.matches('pre') ? block : block.querySelector('pre');
+		const code = (pre?.innerText || '').trim();
+		if (!code || code.split('\n').length < cfg.minLines) return;
+		const lang = pre.getAttribute('data-language') || '';
+		const title = block.querySelector('figcaption .title')?.textContent?.trim() || '';
+
+		let controller = null;
+		const answer = el('div', { class: 'onetag-answer' });
+		const status = el('p', { class: 'onetag-status', 'aria-live': 'polite' });
+		const close = el('button', { type: 'button', class: 'onetag-link', onclick: () => {
+			controller?.abort();
+			panel.hidden = true;
+			button.hidden = false;
+			button.focus();
+		} }, 'Close');
+		const panel = el('div', { class: 'onetag-panel', hidden: true, 'data-onetag-ui': '' }, status, answer, demoNote(cfg), el('p', { class: 'onetag-foot' }, 'Explained by AI. ', close));
+		const button = el('button', { type: 'button', class: 'onetag-btn onetag-explain-btn', 'data-onetag-ui': '', onclick: run }, spark(), cfg.label);
+		block.after(button, panel);
+
+		async function run() {
+			controller?.abort();
+			controller = new AbortController();
+			const { signal } = controller;
+			button.hidden = true;
+			panel.hidden = false;
+			answer.replaceChildren();
+			status.classList.remove('error');
+			status.textContent = 'Reading the code…';
+			const { heading, before } = context(block);
+			const input = [
+				`Page: ${pageTitle()}`,
+				heading && `Section: ${heading}`,
+				before && `Text before the code:\n${before}`,
+				`Code${lang ? ' (' + lang + ')' : ''}${title ? ', file ' + title : ''}:\n${code.slice(0, 12000)}`,
+			].filter(Boolean);
+			try {
+				await stream(cfg, `Explain this code to a reader of the docs. Answer in ${answerLanguage(cfg)}.`, input, answer, {
+					system: cfg.rules,
+					signal,
+					onDelta: () => (status.textContent = ''),
+				});
+				status.textContent = '';
+			} catch (e) {
+				if (signal.aborted) return;
+				status.textContent = errorText(e);
+				status.classList.add('error');
+			}
+		}
+	});
+}
+
+function spark() {
+	const s = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+	s.setAttribute('width', '14');
+	s.setAttribute('height', '14');
+	s.setAttribute('viewBox', '0 0 24 24');
+	s.setAttribute('aria-hidden', 'true');
+	s.innerHTML = '<path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/>';
+	return s;
+}
+
+const CSS = `
+.sl-markdown-content .onetag-explain-btn { margin-top: .5rem; border-color: transparent; background: transparent; color: var(--sl-color-gray-2); padding-inline: .25rem; }
+.sl-markdown-content .onetag-explain-btn:hover { color: var(--sl-color-text-accent); border-color: transparent; }
+.sl-markdown-content .onetag-panel { margin-top: .5rem; }
+`;

package/plugins/explain/index.js

@@ -0,0 +1,26 @@
+/**
+ * starlight-onetag-explain: an "Explain" button under every code block in Starlight docs.
+ *
+ *   import starlightOnetagExplain from "starlight-onetag/explain";
+ *   starlight({ plugins: [starlightOnetagExplain()] })
+ */
+import { makePlugin } from '../plugin.js';
+
+export default function starlightOnetagExplain(options = {}) {
+	return makePlugin(
+		'starlight-onetag-explain',
+		{
+			key: options.key ?? '',
+			site: options.site ?? 'https://onetagai.com',
+			label: options.label ?? 'Explain this code',
+			minLines: options.minLines ?? 1,
+			lang: options.lang ?? '',
+			rules:
+				options.rules ??
+				'You explain code samples in documentation to readers who are learning. Walk through what the code does, step by step, in plain words. Mention what they need to change before using it (placeholders, keys, paths). Use short paragraphs or a short list, under 180 words. Wrap identifiers and commands in backticks. No headings.',
+			maxTokens: options.maxTokens ?? 600,
+		},
+		'code explanations',
+		'starlight-onetag/explain/client'
+	);
+}

package/plugins/plugin.js

@@ -0,0 +1,47 @@
+// Plugin factory shared by the starlight-onetag-* packages: injects the browser script with the
+// options, reads the key from the option or PUBLIC_ONETAG_KEY, and warns at build time without one.
+import { existsSync, readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { join } from 'node:path';
+
+function envHasKey(root) {
+	if (process.env.PUBLIC_ONETAG_KEY) return true;
+	const dir = root instanceof URL ? fileURLToPath(root) : String(root || '.');
+	for (const f of ['.env', '.env.production', '.env.local', '.env.production.local']) {
+		const p = join(dir, f);
+		if (existsSync(p) && /^\s*PUBLIC_ONETAG_KEY\s*=\s*\S+/m.test(readFileSync(p, 'utf8'))) return true;
+	}
+	return false;
+}
+
+export function makePlugin(name, opts, label, client = name + '/client') {
+	return {
+		name,
+		hooks: {
+			'config:setup'({ addIntegration }) {
+				addIntegration({
+					name,
+					hooks: {
+						'astro:config:setup'({ injectScript, command, config, logger }) {
+							// Page scripts from every integration share one module: keep the names unique.
+							const id = name.replace(/\W/g, '_');
+							const cfg = JSON.stringify({ ...opts, via: name, base: (config.base || '/').replace(/\/?$/, '/') });
+							injectScript(
+								'page',
+								`import ${id}_init from ${JSON.stringify(client)};\n` +
+									`const ${id}_cfg = ${cfg};\n${id}_cfg.key = ${id}_cfg.key || import.meta.env.PUBLIC_ONETAG_KEY || "";\n${id}_init(${id}_cfg);`
+							);
+							if (command === 'build' && !opts.key && !envHasKey(config.root)) {
+								logger.warn(
+									`No OneTag AI key: ${label} will not work on the deployed site. Get a free key (email only): ` +
+										`curl -X POST https://onetagai.com/api/signup -H "Content-Type: application/json" -d '{"email":"you@example.com"}' ` +
+										`then pass it as { key } or set PUBLIC_ONETAG_KEY.`
+								);
+							}
+						},
+					},
+				});
+			},
+		},
+	};
+}

package/plugins/search/client.js

@@ -0,0 +1,149 @@
+// Browser side of starlight-onetag-search.
+import { addStyle, BASE_CSS, demoNote, el, errorText, pageText, pageTitle, stream } from '../shared.js';
+
+const STOP = new Set(('a an and are as at be by can could do does for from how i if in into is it its me my of on or ' +
+	'our should site that the their there these this to use using we what when where which who why will with you your').split(' '));
+function keywords(q) {
+	const words = (q.toLowerCase().match(/[\p{L}\p{N}][\p{L}\p{N}'-]*/gu) || []).filter((w) => w.length > 1 && !STOP.has(w));
+	const unique = [...new Set(words)].sort((a, b) => b.length - a.length).slice(0, 6);
+	return unique.length ? unique : [q];
+}
+
+// Top pages for the question from the Pagefind index Starlight builds. Pagefind matches every
+// word of a query, so keywords are searched one by one and pages ranked by how many they match.
+async function retrieve(cfg, question) {
+	try {
+		const pf = await import(/* @vite-ignore */ cfg.base + 'pagefind/pagefind.js');
+		await pf.init();
+		const searches = await Promise.all(keywords(question).map((w) => pf.search(w)));
+		const scores = new Map();
+		searches.forEach((s) =>
+			s.results.slice(0, 10).forEach((r, rank) => {
+				const cur = scores.get(r.id) || { score: 0, result: r };
+				cur.score += 1 + Math.max(0, 10 - rank) / 20 + (r.score || 0) / 100;
+				scores.set(r.id, cur);
+			})
+		);
+		const top = [...scores.values()].sort((a, b) => b.score - a.score).slice(0, cfg.topPages);
+		const hits = await Promise.all(top.map((t) => t.result.data()));
+		const pages = hits.map((h) => ({ title: h.meta?.title || h.url, url: h.url, text: (h.content || h.excerpt || '').slice(0, cfg.perPage) }));
+		if (pages.length) return pages;
+	} catch {}
+	// No index (astro dev) or nothing matched: fall back to llms-full.txt, then the current page.
+	for (const name of ['llms-full.txt', 'llms-small.txt']) {
+		try {
+			const r = await fetch(cfg.base + name);
+			if (!r.ok) continue;
+			const text = await r.text();
+			if (text.length <= cfg.maxContext) return [{ title: 'All pages', url: cfg.base + name, text }];
+		} catch {}
+	}
+	return [{ title: pageTitle(), url: location.pathname, text: pageText(cfg.perPage) }];
+}
+
+export default function init(cfg) {
+	const host = document.getElementById('starlight__search');
+	if (!host) return;
+	addStyle('starlight-onetag-search', BASE_CSS + CSS);
+
+	let controller = null;
+	let asked = '';
+	const label = el('span', { class: 'onetag-search-q' });
+	const button = el('button', { type: 'button', class: 'onetag-search-ask', onclick: () => ask(current()) }, spark(), el('span', {}, cfg.label + ': '), label);
+	const status = el('p', { class: 'onetag-status', 'aria-live': 'polite' });
+	const answer = el('div', { class: 'onetag-answer' });
+	const sources = el('p', { class: 'onetag-foot onetag-sources' });
+	const result = el('div', { class: 'onetag-search-result', hidden: true }, status, answer, sources, demoNote(cfg));
+	const box = el('div', { class: 'onetag-search', hidden: true, 'data-onetag-ui': '' }, button, result);
+
+	const input = () => host.querySelector('.pagefind-ui__search-input');
+	const current = () => (input()?.value || '').trim();
+
+	function place() {
+		const i = input();
+		if (!i) return;
+		const after = host.querySelector('.pagefind-ui__search-clear') || i;
+		if (after.nextElementSibling !== box) after.after(box);
+	}
+	function update() {
+		place();
+		const q = current();
+		box.hidden = q.length < cfg.minChars;
+		label.textContent = '“' + q + '”';
+		button.hidden = q === asked && !result.hidden;
+		if (q !== asked) result.hidden = true;
+	}
+
+	new MutationObserver(() => {
+		const i = input();
+		if (i && !i.dataset.onetag) {
+			i.dataset.onetag = '1';
+			i.addEventListener('input', update);
+		}
+		place();
+	}).observe(host, { childList: true, subtree: true });
+
+	async function ask(q) {
+		if (!q) return;
+		controller?.abort();
+		controller = new AbortController();
+		const { signal } = controller;
+		asked = q;
+		button.hidden = true;
+		result.hidden = false;
+		answer.replaceChildren();
+		sources.replaceChildren();
+		status.classList.remove('error');
+		status.textContent = 'Reading the docs…';
+		try {
+			const pages = await retrieve(cfg, q);
+			let budget = cfg.maxContext;
+			const parts = [];
+			for (const p of pages) {
+				const chunk = `Page: ${p.title} (${p.url})\n${p.text}`.slice(0, budget);
+				if (!chunk) break;
+				parts.push(chunk);
+				budget -= chunk.length;
+			}
+			await stream(cfg, q + '\n\n(Reply in the same language as the question above.)', parts, answer, {
+				system: cfg.rules,
+				signal,
+				onDelta: () => (status.textContent = ''),
+			});
+			if (signal.aborted) return;
+			status.textContent = '';
+			const real = pages.filter((p) => p.title !== 'All pages' && p.url !== location.pathname).slice(0, 3);
+			if (real.length) {
+				sources.append('From: ');
+				real.forEach((p, i) => {
+					if (i) sources.append(' · ');
+					sources.append(el('a', { href: p.url }, p.title));
+				});
+			}
+		} catch (e) {
+			if (signal.aborted) return;
+			status.textContent = errorText(e);
+			status.classList.add('error');
+		}
+	}
+}
+
+function spark() {
+	const s = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+	s.setAttribute('width', '16');
+	s.setAttribute('height', '16');
+	s.setAttribute('viewBox', '0 0 24 24');
+	s.setAttribute('aria-hidden', 'true');
+	s.innerHTML = '<path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/>';
+	return s;
+}
+
+const CSS = `
+.onetag-search { margin-top: 1rem; }
+.onetag-search-ask { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: start; font: inherit; font-size: var(--sl-text-base); padding: .75rem 1rem; border: 1px solid var(--sl-color-gray-5); border-radius: .4rem; background: var(--sl-color-black); color: var(--sl-color-white); cursor: pointer; }
+.onetag-search-ask:hover, .onetag-search-ask:focus-visible { border-color: var(--sl-color-accent); outline: none; background: var(--sl-color-accent-low); }
+.onetag-search-ask svg { color: var(--sl-color-text-accent); flex: none; }
+.onetag-search-q { color: var(--sl-color-text-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.onetag-search-result { padding: .75rem 1rem; border: 1px solid var(--sl-color-gray-5); border-inline-start: 3px solid var(--sl-color-accent); border-radius: .4rem; background: var(--sl-color-black); color: var(--sl-color-text); font-size: var(--sl-text-sm); }
+.onetag-search-result a { color: var(--sl-color-text-accent); }
+`;

package/plugins/search/index.js

@@ -0,0 +1,28 @@
+/**
+ * starlight-onetag-search: an "Ask AI" answer inside Starlight's search dialog, above the Pagefind results.
+ *
+ *   import starlightOnetagSearch from "starlight-onetag/search";
+ *   starlight({ plugins: [starlightOnetagSearch()] })
+ */
+import { makePlugin } from '../plugin.js';
+
+export default function starlightOnetagSearch(options = {}) {
+	return makePlugin(
+		'starlight-onetag-search',
+		{
+			key: options.key ?? '',
+			site: options.site ?? 'https://onetagai.com',
+			label: options.label ?? 'Ask AI',
+			minChars: options.minChars ?? 3,
+			rules:
+				options.rules ??
+				'You answer questions typed into the search box of a documentation site. Answer only from the pages provided. When they cover the question, answer it directly in under 120 words and stop. When they do not, say so in one sentence and name the closest page. Plain text, no headings. Answer in the language of the question.',
+			topPages: options.topPages ?? 5,
+			perPage: options.perPage ?? 5000,
+			maxContext: options.maxContext ?? 20000,
+			maxTokens: options.maxTokens ?? 400,
+		},
+		'AI search answers',
+		'starlight-onetag/search/client'
+	);
+}

package/plugins/selection/client.js

@@ -0,0 +1,137 @@
+// Browser side of starlight-onetag-selection.
+import { addStyle, answerLanguage, BASE_CSS, contentRoot, demoNote, el, errorText, pageText, pageTitle, stream } from '../shared.js';
+
+export default function init(cfg) {
+	const root = contentRoot();
+	if (!root) return;
+	addStyle('starlight-onetag-selection', BASE_CSS + CSS);
+
+	let picked = null; // { text, paragraph, rect }
+	let controller = null;
+	let history = [];
+
+	const pill = el('button', { type: 'button', class: 'onetag-pill', hidden: true, 'data-onetag-ui': '', onmousedown: (e) => e.preventDefault(), onclick: () => open() }, spark(), cfg.label);
+	const quote = el('p', { class: 'onetag-quote' });
+	const status = el('p', { class: 'onetag-status', 'aria-live': 'polite' });
+	const answer = el('div', { class: 'onetag-answer' });
+	const field = el('input', { type: 'text', maxlength: '300', placeholder: 'Ask a follow-up', 'aria-label': 'Ask a follow-up about the selection' });
+	const form = el('form', { class: 'onetag-follow', onsubmit: (e) => {
+		e.preventDefault();
+		const q = field.value.trim();
+		if (!q) return;
+		field.value = '';
+		ask(q);
+	} }, field, el('button', { type: 'submit', class: 'onetag-btn' }, 'Ask'));
+	const close = el('button', { type: 'button', class: 'onetag-link', onclick: () => hideCard() }, 'Close');
+	const card = el('div', { class: 'onetag-card', hidden: true, role: 'dialog', 'aria-label': 'AI explanation of the selected text', 'data-onetag-ui': '' },
+		quote, status, answer, form, demoNote(cfg), el('p', { class: 'onetag-foot' }, 'Explained by AI from this page. ', close));
+	document.body.append(pill, card);
+
+	function selection() {
+		const sel = getSelection();
+		if (!sel || sel.isCollapsed || !sel.rangeCount) return null;
+		const text = sel.toString().trim();
+		if (text.length < cfg.minChars || text.length > cfg.maxChars) return null;
+		const range = sel.getRangeAt(0);
+		const node = range.commonAncestorContainer;
+		const elm = node.nodeType === 1 ? node : node.parentElement;
+		if (!root.contains(elm) || elm.closest('[data-onetag-ui], input, textarea')) return null;
+		const block = elm.closest('p, li, td, pre, blockquote, dd, h2, h3, h4, .expressive-code') || elm;
+		const rects = range.getClientRects();
+		const rect = rects[rects.length - 1] || range.getBoundingClientRect();
+		return { text, paragraph: block.textContent.trim().slice(0, 1500), rect };
+	}
+
+	function position(node, rect, below = 8) {
+		const width = node.offsetWidth;
+		const left = Math.min(Math.max(8, rect.left + scrollX), scrollX + document.documentElement.clientWidth - width - 8);
+		node.style.left = left + 'px';
+		node.style.top = rect.bottom + scrollY + below + 'px';
+	}
+
+	let timer = 0;
+	const check = () => {
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			if (!card.hidden) return;
+			const s = selection();
+			if (!s) return (pill.hidden = true);
+			picked = s;
+			pill.hidden = false;
+			position(pill, s.rect, 6);
+		}, 250);
+	};
+	document.addEventListener('selectionchange', check);
+	document.addEventListener('keydown', (e) => {
+		if (e.key === 'Escape') {
+			pill.hidden = true;
+			if (!card.hidden) hideCard();
+		}
+	});
+	document.addEventListener('mousedown', (e) => {
+		if (!card.hidden && !card.contains(e.target)) hideCard();
+	});
+
+	function hideCard() {
+		controller?.abort();
+		card.hidden = true;
+		pill.hidden = true;
+	}
+
+	function open() {
+		if (!picked) return;
+		pill.hidden = true;
+		history = [];
+		quote.textContent = '“' + (picked.text.length > 160 ? picked.text.slice(0, 160) + '…' : picked.text) + '”';
+		card.hidden = false;
+		position(card, picked.rect, 10);
+		ask(null);
+	}
+
+	async function ask(followUp) {
+		controller?.abort();
+		controller = new AbortController();
+		const { signal } = controller;
+		answer.replaceChildren();
+		status.classList.remove('error');
+		status.textContent = 'Reading the page…';
+		const prompt = followUp || `Explain the selected text: "${picked.text}". Answer in ${answerLanguage(cfg)}.`;
+		const input = [`Page: ${pageTitle()}`, `Selected text: ${picked.text}`, `Where it appears: ${picked.paragraph}`, `The page:\n${pageText(12000)}`];
+		try {
+			const text = await stream(cfg, prompt, input, answer, {
+				system: cfg.rules,
+				history,
+				signal,
+				onDelta: () => (status.textContent = ''),
+			});
+			if (signal.aborted) return;
+			status.textContent = '';
+			history.push({ role: 'user', content: prompt }, { role: 'assistant', content: text });
+			history = history.slice(-6);
+		} catch (e) {
+			if (signal.aborted) return;
+			status.textContent = errorText(e);
+			status.classList.add('error');
+		}
+	}
+}
+
+function spark() {
+	const s = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+	s.setAttribute('width', '14');
+	s.setAttribute('height', '14');
+	s.setAttribute('viewBox', '0 0 24 24');
+	s.setAttribute('aria-hidden', 'true');
+	s.innerHTML = '<path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/>';
+	return s;
+}
+
+const CSS = `
+.onetag-pill { position: absolute; z-index: 30; display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: var(--sl-text-sm); padding: .3rem .65rem; border: 1px solid var(--sl-color-accent); border-radius: 999px; background: var(--sl-color-accent-low); color: var(--sl-color-white); box-shadow: var(--sl-shadow-md); cursor: pointer; }
+.onetag-pill:hover { background: var(--sl-color-accent); color: var(--sl-color-black); }
+.onetag-card { position: absolute; z-index: 31; width: min(28rem, calc(100vw - 1rem)); padding: .9rem 1rem; border: 1px solid var(--sl-color-gray-5); border-radius: .5rem; background: var(--sl-color-gray-6); color: var(--sl-color-text); box-shadow: var(--sl-shadow-lg); }
+.onetag-quote { color: var(--sl-color-gray-2); font-style: italic; overflow-wrap: anywhere; }
+.onetag-follow { display: flex; gap: .4rem; margin-top: .6rem; }
+.onetag-follow input { flex: 1; min-width: 0; font: inherit; font-size: var(--sl-text-sm); padding: .3rem .5rem; border: 1px solid var(--sl-color-gray-5); border-radius: .4rem; background: var(--sl-color-black); color: var(--sl-color-white); }
+.onetag-follow input:focus { outline: 2px solid var(--sl-color-accent); outline-offset: 0; }
+`;

package/plugins/selection/index.js

@@ -0,0 +1,27 @@
+/**
+ * starlight-onetag-selection: select text in Starlight docs, click "Ask AI", get it explained in context.
+ *
+ *   import starlightOnetagSelection from "starlight-onetag/selection";
+ *   starlight({ plugins: [starlightOnetagSelection()] })
+ */
+import { makePlugin } from '../plugin.js';
+
+export default function starlightOnetagSelection(options = {}) {
+	return makePlugin(
+		'starlight-onetag-selection',
+		{
+			key: options.key ?? '',
+			site: options.site ?? 'https://onetagai.com',
+			label: options.label ?? 'Ask AI',
+			minChars: options.minChars ?? 2,
+			maxChars: options.maxChars ?? 2000,
+			lang: options.lang ?? '',
+			rules:
+				options.rules ??
+				'A reader selected part of a documentation page and wants it explained. Explain the selected text in the context of the page: what it means, why it matters here, and an example if that helps. Plain words, under 120 words, no headings. If they ask a follow-up, answer it from the page.',
+			maxTokens: options.maxTokens ?? 400,
+		},
+		'selection explanations',
+		'starlight-onetag/selection/client'
+	);
+}

package/plugins/shared.js

@@ -0,0 +1,175 @@
+// Shared helpers for the starlight-onetag-* plugins. Copied into each package so every
+// plugin installs on its own.
+
+const ERRORS = {
+	no_key: 'AI is not set up on this site yet: the site owner needs to add a OneTag AI key.',
+	bad_key: 'AI is not set up correctly on this site: its OneTag AI key is not valid.',
+	domain_not_allowed: 'This site is not allowed to use its OneTag AI key.',
+	quota_exceeded: 'This site has used up its AI allowance for now.',
+	paused: 'The AI service is paused for today. Try again after 00:00 UTC.',
+	rate_limited: 'Too many requests in one minute. Give it a moment.',
+	too_large: 'That is too long to send in one request.',
+	network: 'Could not reach the AI service. Check your connection and try again.',
+	upstream: 'The AI provider had a problem. Try again in a few seconds.',
+	aborted: 'Stopped.',
+};
+
+export function errorText(e) {
+	return ERRORS[e?.code] || (e?.code && e.message) || 'Could not load the AI service. Check your connection and try again.';
+}
+
+export function isLocal() {
+	return /^(|localhost|127\.0\.0\.1|\[::1\]|.+\.localhost)$/.test(location.hostname);
+}
+
+// The onetagai SDK is its own chunk, fetched the first time a reader uses the feature.
+let sdkPromise = null;
+export function loadSdk(site) {
+	if (!sdkPromise) {
+		sdkPromise = import('onetagai').then((sdk) => {
+			if (site && site !== 'https://onetagai.com') sdk.configure({ endpoint: site.replace(/\/$/, '') + '/v1/ask' });
+			return sdk;
+		});
+		sdkPromise.catch(() => (sdkPromise = null));
+	}
+	return sdkPromise;
+}
+
+export function contentRoot() {
+	return document.querySelector('.sl-markdown-content');
+}
+
+export function pageTitle() {
+	return document.querySelector('h1#_top')?.textContent?.trim() || document.title;
+}
+
+// Text of the docs content without code-copy buttons or our own UI.
+export function pageText(max = 24000) {
+	const root = contentRoot();
+	if (!root) return '';
+	const clone = root.cloneNode(true);
+	clone.querySelectorAll('[data-onetag-ui], .copy, script, style, svg').forEach((n) => n.remove());
+	return (clone.innerText || clone.textContent || '').replace(/\n{3,}/g, '\n\n').trim().slice(0, max);
+}
+
+export function addStyle(id, css) {
+	if (document.getElementById(id)) return;
+	const s = document.createElement('style');
+	s.id = id;
+	s.textContent = css;
+	document.head.append(s);
+}
+
+export function el(tag, attrs = {}, ...children) {
+	const n = document.createElement(tag);
+	for (const [k, v] of Object.entries(attrs)) {
+		if (v === false || v == null) continue;
+		if (k === 'class') n.className = v;
+		else if (k.startsWith('on')) n.addEventListener(k.slice(2), v);
+		else n.setAttribute(k, v === true ? '' : v);
+	}
+	n.append(...children.filter((c) => c != null));
+	return n;
+}
+
+// A small, safe renderer for model answers: paragraphs, "- " lists, `code` and **bold**.
+// Everything goes in as text nodes; nothing the model writes is parsed as HTML.
+function inline(text) {
+	const out = [];
+	text.split(/(`[^`]+`|\*\*[^*]+\*\*)/g).forEach((part) => {
+		if (!part) return;
+		if (part.startsWith('`') && part.endsWith('`') && part.length > 2) out.push(el('code', {}, part.slice(1, -1)));
+		else if (part.startsWith('**') && part.endsWith('**') && part.length > 4) out.push(el('strong', {}, part.slice(2, -2)));
+		else out.push(document.createTextNode(part));
+	});
+	return out;
+}
+export function render(target, text) {
+	const nodes = [];
+	let list = null;
+	text.replace(/\r/g, '').split('\n').forEach((line) => {
+		const item = line.match(/^\s*(?:[-*•]|\d+[.)])\s+(.*)$/);
+		if (item) {
+			if (!list) nodes.push((list = el('ul')));
+			list.append(el('li', {}, ...inline(item[1])));
+			return;
+		}
+		list = null;
+		const t = line.replace(/^#+\s*/, '').trim();
+		if (t) nodes.push(el('p', {}, ...inline(t)));
+	});
+	target.replaceChildren(...nodes);
+}
+
+// Ask the model and stream into a target element. Returns the full text.
+export async function stream(cfg, prompt, input, target, opts = {}) {
+	const sdk = await loadSdk(cfg.site);
+	let shown = '';
+	const text = await sdk.ask(prompt, input, {
+		key: cfg.key || undefined,
+		via: cfg.via,
+		system: opts.system,
+		history: opts.history,
+		maxTokens: opts.maxTokens || cfg.maxTokens,
+		signal: opts.signal,
+		stream: target
+			? (d) => {
+					shown += d;
+					render(target, shown);
+					opts.onDelta?.();
+				}
+			: undefined,
+	});
+	if (target) render(target, text);
+	return text;
+}
+
+// The language readers see answers in: the option, else the page's own language.
+export function answerLanguage(cfg) {
+	if (cfg.lang) return cfg.lang;
+	const code = document.documentElement.lang || 'en';
+	try {
+		return new Intl.DisplayNames(['en'], { type: 'language' }).of(code) || code;
+	} catch {
+		return code;
+	}
+}
+
+export function store(key, value) {
+	try {
+		if (value === undefined) return JSON.parse(localStorage.getItem(key) || 'null');
+		localStorage.setItem(key, JSON.stringify(value));
+	} catch {}
+	return null;
+}
+
+export function hash(s) {
+	let h = 5381;
+	for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) | 0;
+	return (h >>> 0).toString(36);
+}
+
+// Shown once per page to the site owner on localhost when no key is set.
+export function demoNote(cfg) {
+	if (cfg.key || !isLocal()) return null;
+	return el('p', { class: 'onetag-note' }, 'No key set: on localhost the answers come from a shared demo key. Add your own free OneTag AI key before you deploy.');
+}
+
+export const BASE_CSS = `
+[data-onetag-ui] { font-size: var(--sl-text-sm); }
+[data-onetag-ui] [hidden], [data-onetag-ui][hidden] { display: none !important; }
+[data-onetag-ui] p { margin: 0 0 .5em; }
+[data-onetag-ui] p:last-child { margin-bottom: 0; }
+[data-onetag-ui] ul { margin: 0 0 .5em; padding-inline-start: 1.2em; }
+[data-onetag-ui] code { font-size: .9em; }
+.onetag-btn { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: var(--sl-text-sm); padding: .25rem .6rem; border: 1px solid var(--sl-color-gray-5); border-radius: .4rem; background: var(--sl-color-gray-6); color: var(--sl-color-text); cursor: pointer; line-height: 1.5; }
+.onetag-btn:hover { border-color: var(--sl-color-accent); color: var(--sl-color-white); }
+.onetag-btn:focus-visible { outline: 2px solid var(--sl-color-accent); outline-offset: 2px; }
+.onetag-btn[disabled] { opacity: .6; cursor: wait; }
+.onetag-link { border: 0; background: none; padding: 0; font: inherit; color: var(--sl-color-text-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
+.onetag-status { color: var(--sl-color-gray-3); }
+.onetag-status.error { color: var(--sl-color-red-high, #f87171); }
+.onetag-note { color: var(--sl-color-gray-3); font-size: var(--sl-text-xs); }
+.onetag-foot { color: var(--sl-color-gray-3); font-size: var(--sl-text-xs); margin-top: .5em; }
+.onetag-panel { margin-top: .75rem; padding: .75rem 1rem; border: 1px solid var(--sl-color-gray-5); border-inline-start: 3px solid var(--sl-color-accent); border-radius: .4rem; background: var(--sl-color-gray-6); }
+`;

package/plugins/summary/client.js

@@ -0,0 +1,66 @@
+// Browser side of starlight-onetag-summary.
+import { addStyle, answerLanguage, BASE_CSS, contentRoot, demoNote, el, errorText, hash, pageText, pageTitle, render, store, stream } from '../shared.js';
+
+export default function init(cfg) {
+	const h1 = document.querySelector('h1#_top');
+	if (!h1 || !contentRoot()) return;
+	const text = pageText(28000);
+	if (text.length < cfg.minChars) return;
+	addStyle('starlight-onetag-summary', BASE_CSS + CSS);
+
+	const cacheKey = 'starlight-onetag-summary:' + location.pathname + ':' + hash(text);
+	const answer = el('div', { class: 'onetag-answer' });
+	const status = el('p', { class: 'onetag-status', 'aria-live': 'polite' });
+	const hide = el('button', { type: 'button', class: 'onetag-link', onclick: () => {
+		panel.hidden = true;
+		button.hidden = false;
+		button.focus();
+	} }, 'Hide');
+	const panel = el('div', { class: 'onetag-panel onetag-summary', hidden: true, 'data-onetag-ui': '' }, el('p', { class: 'onetag-summary-title' }, 'Summary'), status, answer, demoNote(cfg), el('p', { class: 'onetag-foot' }, 'Summarized by AI from this page. ', hide));
+	const button = el('button', { type: 'button', class: 'onetag-btn', 'data-onetag-ui': '', onclick: run }, lines(), cfg.label);
+	const wrap = el('div', { class: 'onetag-summary-wrap', 'data-onetag-ui': '' }, button, panel);
+	(document.querySelector('.onetag-translate') || h1).after(wrap);
+
+	let done = false;
+	async function run() {
+		button.hidden = true;
+		panel.hidden = false;
+		if (done) return;
+		const cached = cfg.cache ? store(cacheKey) : null;
+		if (typeof cached === 'string' && cached) {
+			render(answer, cached);
+			done = true;
+			return;
+		}
+		status.classList.remove('error');
+		status.textContent = 'Reading the page…';
+		try {
+			const out = await stream(cfg, `Summarize this page. Answer in ${answerLanguage(cfg)}.`, [`Page: ${pageTitle()}`, text], answer, {
+				system: cfg.rules,
+				onDelta: () => (status.textContent = ''),
+			});
+			status.textContent = '';
+			done = true;
+			if (cfg.cache) store(cacheKey, out);
+		} catch (e) {
+			status.textContent = errorText(e);
+			status.classList.add('error');
+		}
+	}
+	if (cfg.auto) run();
+}
+
+function lines() {
+	const s = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+	s.setAttribute('width', '15');
+	s.setAttribute('height', '15');
+	s.setAttribute('viewBox', '0 0 24 24');
+	s.setAttribute('aria-hidden', 'true');
+	s.innerHTML = '<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M4 6h16M4 12h10M4 18h13"/>';
+	return s;
+}
+
+const CSS = `
+.onetag-summary-wrap { margin-top: .75rem; }
+.onetag-summary-title { font-weight: 600; color: var(--sl-color-white); }
+`;

package/plugins/summary/index.js

@@ -0,0 +1,28 @@
+/**
+ * starlight-onetag-summary: a "Summarize this page" box at the top of Starlight docs pages.
+ *
+ *   import starlightOnetagSummary from "starlight-onetag/summary";
+ *   starlight({ plugins: [starlightOnetagSummary()] })
+ */
+import { makePlugin } from '../plugin.js';
+
+export default function starlightOnetagSummary(options = {}) {
+	return makePlugin(
+		'starlight-onetag-summary',
+		{
+			key: options.key ?? '',
+			site: options.site ?? 'https://onetagai.com',
+			label: options.label ?? 'Summarize this page',
+			minChars: options.minChars ?? 1500,
+			auto: options.auto ?? false,
+			cache: options.cache ?? true,
+			lang: options.lang ?? '',
+			rules:
+				options.rules ??
+				'You summarize a documentation page for a reader deciding whether it answers their question. Give 3 to 5 bullets, each one line, with the concrete facts: what the page lets them do, the key steps, commands or options, and any warning. No intro, no heading, no closing line.',
+			maxTokens: options.maxTokens ?? 400,
+		},
+		'page summaries',
+		'starlight-onetag/summary/client'
+	);
+}

package/plugins/translate/client.js

@@ -0,0 +1,176 @@
+// Browser side of starlight-onetag-translate.
+import { addStyle, BASE_CSS, contentRoot, el, errorText, hash, loadSdk, store, demoNote } from '../shared.js';
+
+const SKIP = 'pre, code, kbd, samp, script, style, svg, .expressive-code, [translate="no"], .notranslate, [data-onetag-ui], .sl-anchor-link';
+const PREF = 'starlight-onetag-translate:lang';
+
+function name(code, inLang) {
+	try {
+		return new Intl.DisplayNames([inLang || code], { type: 'language' }).of(code) || code;
+	} catch {
+		return code;
+	}
+}
+const base = (c) => String(c || '').toLowerCase().split('-')[0];
+const same = (a, b) => {
+	a = String(a || '').toLowerCase();
+	b = String(b || '').toLowerCase();
+	if (base(a) !== base(b)) return false;
+	// Simplified and Traditional Chinese count as different languages.
+	const trad = (c) => /zh-(tw|hk|mo|hant)/.test(c);
+	return base(a) !== 'zh' || trad(a) === trad(b);
+};
+
+// Text nodes worth translating, in reading order: the page title and the docs content.
+function collect() {
+	const roots = [document.querySelector('h1#_top'), contentRoot()].filter(Boolean);
+	const nodes = [];
+	for (const root of roots) {
+		const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+			acceptNode: (n) => (!n.nodeValue.trim() || n.parentElement?.closest(SKIP) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT),
+		});
+		while (walker.nextNode()) nodes.push(walker.currentNode);
+	}
+	return nodes;
+}
+
+function batches(texts, size) {
+	const out = [];
+	let cur = [];
+	let len = 0;
+	texts.forEach((t, i) => {
+		if (cur.length && len + t.length > size) {
+			out.push(cur);
+			cur = [];
+			len = 0;
+		}
+		cur.push(i);
+		len += t.length + 6;
+	});
+	if (cur.length) out.push(cur);
+	return out;
+}
+
+const SYSTEM =
+	'You translate documentation for readers. Translate each numbered segment into the target language. ' +
+	'Segments are fragments of one page in reading order and may break mid-sentence: translate each fragment so that, read in order, the page reads naturally. ' +
+	'Translate every segment, including short fragments such as a single word or "Push to". Keep code identifiers, commands, file names, URLs, product names and placeholders unchanged. ' +
+	'Output one line per segment, starting with its marker, for example «3» text. Same count, same order, nothing else.';
+
+export default function init(cfg) {
+	const h1 = document.querySelector('h1#_top');
+	if (!h1 || !contentRoot()) return;
+	addStyle('starlight-onetag-translate', BASE_CSS + CSS);
+
+	const pageLang = document.documentElement.lang || 'en';
+	const reader = navigator.language && !same(navigator.language, pageLang) ? navigator.language : null;
+	const langs = [...new Set(cfg.languages.filter((l) => !same(l, pageLang)))];
+	if (reader && !langs.some((l) => same(l, reader))) langs.unshift(reader);
+
+	let nodes = null;
+	let originals = null;
+	let controller = null;
+	let current = null;
+
+	const status = el('span', { class: 'onetag-status', 'aria-live': 'polite' });
+	const select = el('select', { 'aria-label': 'Translate this page into' },
+		el('option', { value: '' }, 'Translate…'),
+		...langs.map((l) => el('option', { value: l }, name(l)))
+	);
+	const quick = reader ? el('button', { type: 'button', class: 'onetag-btn', onclick: () => translate(reader) }, globe(), 'Read in ' + name(reader)) : null;
+	const original = el('button', { type: 'button', class: 'onetag-link', hidden: true, onclick: () => restore(true) }, 'Show original');
+	const note = demoNote(cfg);
+	const bar = el('div', { class: 'onetag-translate', 'data-onetag-ui': '' }, quick, select, status, original);
+	h1.after(bar);
+	if (note) bar.after(note), note.setAttribute('data-onetag-ui', '');
+
+	select.addEventListener('change', () => select.value && translate(select.value));
+
+	function restore(forget) {
+		if (controller) controller.abort();
+		if (nodes && originals) nodes.forEach((n, i) => (n.nodeValue = originals[i]));
+		current = null;
+		original.hidden = true;
+		status.textContent = '';
+		status.classList.remove('error');
+		select.value = '';
+		if (quick) quick.hidden = false;
+		if (forget) store(PREF, '');
+	}
+
+	async function translate(lang) {
+		if (current === lang) return;
+		if (current) restore(false);
+		if (controller) controller.abort();
+		controller = new AbortController();
+		const { signal } = controller;
+		nodes = nodes || collect();
+		originals = originals || nodes.map((n) => n.nodeValue);
+		const texts = originals.map((t) => t.replace(/\s+/g, ' ').trim());
+		current = lang;
+		if (cfg.remember) store(PREF, lang);
+		select.value = lang;
+		if (quick) quick.hidden = true;
+		status.classList.remove('error');
+		const cacheKey = 'starlight-onetag-translate:' + location.pathname + ':' + lang + ':' + hash(texts.join('\n'));
+		const cached = cfg.cache ? store(cacheKey) : null;
+		const result = Array.isArray(cached) && cached.length === texts.length ? cached : new Array(texts.length).fill(null);
+		const apply = () =>
+			result.forEach((t, i) => {
+				if (t == null) return;
+				const lead = originals[i].match(/^\s*/)[0];
+				const trail = originals[i].match(/\s*$/)[0];
+				nodes[i].nodeValue = lead + t + trail;
+			});
+		apply();
+		const todo = batches(texts, cfg.batchChars).filter((b) => b.some((i) => result[i] == null));
+		try {
+			const sdk = todo.length ? await loadSdk(cfg.site) : null;
+			for (let k = 0; k < todo.length; k++) {
+				status.textContent = `Translating ${k + 1}/${todo.length}…`;
+				const ids = todo[k];
+				const input = ids.map((i, j) => `«${j + 1}» ${texts[i]}`).join('\n');
+				const text = await sdk.ask(`Target language: ${name(lang, 'en')} (${lang}).`, input, {
+					key: cfg.key || undefined,
+					via: cfg.via,
+					system: SYSTEM,
+					maxTokens: cfg.maxTokens,
+					signal,
+				});
+				if (signal.aborted) return;
+				for (const line of text.split('\n')) {
+					const m = line.match(/^\s*«(\d+)»\s?(.*)$/);
+					if (m && ids[m[1] - 1] != null && m[2].trim()) result[ids[m[1] - 1]] = m[2].trim();
+				}
+				apply();
+			}
+			status.textContent = 'Translated by AI.';
+			original.hidden = false;
+			if (cfg.cache) store(cacheKey, result.map((t, i) => t ?? texts[i]));
+		} catch (e) {
+			if (signal.aborted) return;
+			status.textContent = errorText(e);
+			status.classList.add('error');
+			original.hidden = false;
+		}
+	}
+
+	const saved = cfg.remember ? store(PREF) : null;
+	if (saved && !same(saved, pageLang)) translate(saved);
+}
+
+function globe() {
+	const s = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+	s.setAttribute('width', '15');
+	s.setAttribute('height', '15');
+	s.setAttribute('viewBox', '0 0 24 24');
+	s.setAttribute('aria-hidden', 'true');
+	s.innerHTML = '<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z"/></g>';
+	return s;
+}
+
+const CSS = `
+.onetag-translate { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .75rem; font-size: var(--sl-text-sm); }
+.onetag-translate select { font: inherit; font-size: var(--sl-text-sm); padding: .25rem .4rem; border: 1px solid var(--sl-color-gray-5); border-radius: .4rem; background: var(--sl-color-gray-6); color: var(--sl-color-text); }
+.onetag-translate select:focus-visible { outline: 2px solid var(--sl-color-accent); outline-offset: 2px; }
+`;

package/plugins/translate/index.js

@@ -0,0 +1,25 @@
+/**
+ * starlight-onetag-translate: a "Read in <your language>" button on every Starlight page.
+ * One click translates the page for the reader with AI; nothing to maintain on your side.
+ *
+ *   import starlightOnetagTranslate from "starlight-onetag/translate";
+ *   starlight({ plugins: [starlightOnetagTranslate()] })
+ */
+import { makePlugin } from '../plugin.js';
+
+export default function starlightOnetagTranslate(options = {}) {
+	return makePlugin(
+		'starlight-onetag-translate',
+		{
+			key: options.key ?? '',
+			site: options.site ?? 'https://onetagai.com',
+			languages: options.languages ?? ['en', 'zh-CN', 'zh-TW', 'ja', 'ko', 'es', 'pt-BR', 'fr', 'de', 'ru', 'it', 'tr', 'vi', 'id', 'ar', 'hi'],
+			remember: options.remember ?? true,
+			cache: options.cache ?? true,
+			batchChars: options.batchChars ?? 3500,
+			maxTokens: options.maxTokens ?? 4000,
+		},
+		'page translation',
+		'starlight-onetag/translate/client'
+	);
+}