@tiagojct/subsub 0.6.1 → 0.8.0

package/web/app.js

@@ -67,6 +67,24 @@ marked.use({
 		image(token) {
 			return escapeHtml(token.text || token.href || "");
 		},
+		table(token) {
+			let headerHtml = "";
+			for (let r = 0; r < token.header.length; r++) {
+				headerHtml += this.tablecell(token.header[r]);
+			}
+			let t = this.tablerow({ text: headerHtml });
+			let s = "";
+			for (let r = 0; r < token.rows.length; r++) {
+				let row = token.rows[r];
+				let n = "";
+				for (let o = 0; o < row.length; o++) {
+					n += this.tablecell(row[o]);
+				}
+				s += this.tablerow({ text: n });
+			}
+			if (s) s = `<tbody>${s}</tbody>`;
+			return `<div class="md-table-wrap"><table><thead>${t}</thead>${s}</table></div>`;
+		},
 	},
 });
 function md(text) {
@@ -77,9 +95,28 @@ function md(text) {
 	}
 }
 
-// ---------------------------------------------------------------- theme & language
+// ---------------------------------------------------------------- theme, layout & language
 
 let currentTheme = localStorage.getItem("subsub-theme") || "auto";
+let currentLayout = localStorage.getItem("subsub-layout") || "standard";
+
+function updateLayoutUI() {
+	const isWide = currentLayout === "wide";
+	document.body.classList.toggle("layout-full", isWide);
+	const textEl = $("width-btn-text");
+	if (textEl) textEl.textContent = t("layoutWide");
+	const btn = $("width-btn");
+	if (btn) {
+		btn.title = t("toggleWidth");
+		btn.setAttribute("aria-pressed", String(isWide));
+	}
+}
+
+function toggleLayout() {
+	currentLayout = currentLayout === "wide" ? "standard" : "wide";
+	localStorage.setItem("subsub-layout", currentLayout);
+	updateLayoutUI();
+}
 
 function themeLabel(theme) {
 	if (theme === "light") return t("themeLight");
@@ -87,16 +124,23 @@ function themeLabel(theme) {
 	return t("themeAuto");
 }
 
+/** Stroke icons for the theme button: fixed markup, no user text. */
+const THEME_ICONS = {
+	light: '<circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/>',
+	dark: '<path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z"/>',
+	auto: '<rect x="3" y="4.5" width="18" height="12" rx="1.5"/><path d="M8.5 20h7M12 16.5V20"/>',
+};
+
 function updateThemeUI() {
-	const icon = currentTheme === "light" ? "☀️" : currentTheme === "dark" ? "🌙" : "💻";
-	const label = `${icon} ${themeLabel(currentTheme)}`;
+	const label = `${t("theme")}: ${themeLabel(currentTheme)}`;
 	const btn = $("theme-btn");
 	if (btn) {
-		btn.textContent = label;
-		btn.title = t("themeToggle");
+		btn.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true">${THEME_ICONS[currentTheme] ?? THEME_ICONS.auto}</svg>`;
+		btn.append(el("span", { class: "visually-hidden", text: label }));
+		btn.title = `${label} (${t("themeToggle")})`;
 	}
 	const sideBtn = $("theme-btn-side");
-	if (sideBtn) sideBtn.textContent = label;
+	if (sideBtn) sideBtn.textContent = themeLabel(currentTheme);
 }
 
 function setTheme(theme) {
@@ -119,7 +163,10 @@ function toggleTheme() {
 function applyLang() {
 	document.documentElement.lang = lang === "pt" ? "pt-PT" : "en";
 	for (const e of document.querySelectorAll("[data-i18n]")) e.textContent = t(e.dataset.i18n);
+	for (const e of document.querySelectorAll("[data-i18n-placeholder]")) e.placeholder = t(e.dataset.i18nPlaceholder);
+	for (const e of document.querySelectorAll("[data-i18n-title]")) e.title = t(e.dataset.i18nTitle);
 	updateThemeUI();
+	updateLayoutUI();
 }
 
 function mode() {
@@ -130,6 +177,8 @@ function renderHeader() {
 	document.body.dataset.mode = mode();
 	for (const b of document.querySelectorAll(".modes button")) b.setAttribute("aria-pressed", String(b.dataset.mode === mode()));
 	if (state?.profile) $("profile").value = $("profile-side").value = state.profile;
+	$("starbuck-toggle").checked = Boolean(state?.starbuck);
+	$("starbuck-label").title = t("starbuckHint");
 	const m = state?.model ?? session?.model;
 	$("model-btn").textContent = $("model-btn-side").textContent = m ? m.id : t("noModel");
 	const lib = $("library");
@@ -143,16 +192,22 @@ function renderHeader() {
 		txt.textContent = t("zoteroDown");
 		lib.classList.add("down");
 	} else {
-		const parts = [t("items", { n: L.items ?? "?" })];
-		if (L.toReview) parts.push(t("toReview", { n: L.toReview }));
+		const num = (n) => (typeof n === "number" ? n.toLocaleString(lang === "pt" ? "pt-PT" : "en-GB") : (n ?? "?"));
+		const parts = [t("items", { n: num(L.items) })];
+		if (L.toReview) parts.push(t("toReview", { n: num(L.toReview) }));
 		txt.textContent = `Zotero: ${parts.join(", ")}`;
 		lib.classList.add("reachable");
 	}
 	if (state?.down?.length) {
-		txt.textContent += ` | ${t("serversDown", { x: state.down.join(", ") })}`;
+		txt.textContent += ` · ${t("serversDown", { x: state.down.join(", ") })}`;
 		lib.classList.add("down");
 	}
+	lib.title = txt.textContent;
 	$("input").placeholder = mode() === "librarian" ? t("placeholderLibrarian") : t("placeholderResearcher");
+	if (log.querySelector(".empty")) {
+		clearEmpty();
+		renderEmpty();
+	}
 	renderActions();
 	renderBanner();
 	updateThemeUI();
@@ -166,7 +221,9 @@ function hasCommand(name) {
 function renderActions() {
 	const box = $("actions");
 	box.replaceChildren();
-	const list = [...ACTIONS[mode()]].filter((a) => hasCommand(a.cmd));
+	const list = [...ACTIONS[mode()]].filter(
+		(a) => hasCommand(a.cmd) && (!a.needs || state?.[a.needs]) && (!a.profiles || a.profiles.includes(state?.profile ?? "scholar")),
+	);
 	for (const a of list) box.append(actionButton(a));
 	box.append(el("hr"));
 	for (const a of ACTIONS.both.filter((x) => hasCommand(x.cmd))) box.append(actionButton(a));
@@ -194,7 +251,7 @@ function renderBanner() {
 	b.replaceChildren();
 	const m = state?.model ?? session?.model;
 	if (!m && session) {
-		b.append(el("span", { text: t("connectModel") }), el("button", { type: "button", class: "primary small", text: t("connect"), onclick: openModels }));
+		b.append(el("span", { text: t("connectModel") }), el("button", { type: "button", class: "primary small", text: t("connect"), onclick: showModels }));
 		b.hidden = false;
 	} else b.hidden = true;
 }
@@ -317,14 +374,16 @@ function renderEmpty() {
 		el(
 			"div",
 			{ class: "empty" },
+			el("p", { class: "kicker", text: t(mode()) }),
 			el("h1", { text: t("emptyTitle") }),
+			el("p", { class: "lede", text: t(mode() === "librarian" ? "emptyLibrarian" : "emptyResearcher") }),
 			el(
 				"div",
 				{ class: "chips" },
 				s.map((x) =>
 					el("button", {
 						type: "button",
-						text: x.trim(),
+						text: x.endsWith(" ") ? `${x.trim()}…` : x,
 						onclick: () => {
 							const input = $("input");
 							input.value = x;
@@ -733,6 +792,7 @@ function nextDialog() {
 	const d = dialogs[0];
 	shownDialog = d;
 	const dlg = $("dialog");
+	$("dialog-kicker").textContent = d.method === "confirm" ? t("previewKicker") : "";
 	$("dialog-title").textContent = dialogTitle(d);
 	const hint = $("dialog-hint");
 	hint.textContent = d.method === "confirm" ? t("approveHint") : "";
@@ -790,6 +850,11 @@ function nextDialog() {
 
 // ---------------------------------------------------------------- models and keys
 
+/** Open the model dialog; a failure becomes a note, not an unhandled rejection. */
+function showModels() {
+	openModels().catch((err) => note(err.message, "warning"));
+}
+
 async function openModels() {
 	const dlg = $("model-dialog");
 	const ul = $("models");
@@ -973,11 +1038,24 @@ for (const b of document.querySelectorAll(".modes button")) {
 	});
 }
 $("profile").addEventListener("change", (e) => sendMessage(`/profile ${e.target.value}`));
+$("starbuck-toggle").addEventListener("change", async (e) => {
+	const on = e.target.checked;
+	e.target.disabled = true;
+	try {
+		await api("/api/addons", { starbuck: on });
+		note(t(on ? "starbuckOn" : "starbuckOff"), "info");
+	} catch (err) {
+		e.target.checked = !on;
+		note(err.message, "warning");
+	} finally {
+		e.target.disabled = false;
+	}
+});
 $("profile-side").addEventListener("change", (e) => sendMessage(`/profile ${e.target.value}`));
-$("model-btn").addEventListener("click", openModels);
+$("model-btn").addEventListener("click", showModels);
 $("model-btn-side").addEventListener("click", () => {
 	closeSide();
-	openModels();
+	showModels();
 });
 $("model-close").addEventListener("click", () => $("model-dialog").close());
 $("main").addEventListener("click", () => {
@@ -985,10 +1063,19 @@ $("main").addEventListener("click", () => {
 });
 $("menu-btn").addEventListener("click", (e) => {
 	e.stopPropagation();
-	const side = $("side");
-	side.classList.toggle("open");
-	$("menu-btn").setAttribute("aria-expanded", String(side.classList.contains("open")));
+	if (window.innerWidth > 832) {
+		const app = document.querySelector(".app");
+		app.classList.toggle("side-collapsed");
+		const collapsed = app.classList.contains("side-collapsed");
+		$("menu-btn").setAttribute("aria-expanded", String(!collapsed));
+		localStorage.setItem("subsub-side-collapsed", String(collapsed));
+	} else {
+		const side = $("side");
+		side.classList.toggle("open");
+		$("menu-btn").setAttribute("aria-expanded", String(side.classList.contains("open")));
+	}
 });
+$("width-btn")?.addEventListener("click", toggleLayout);
 $("theme-btn")?.addEventListener("click", toggleTheme);
 $("theme-btn-side")?.addEventListener("click", () => {
 	closeSide();
@@ -1029,5 +1116,10 @@ function connect() {
 }
 
 setTheme(currentTheme);
+updateLayoutUI();
+if (localStorage.getItem("subsub-side-collapsed") === "true" && window.innerWidth > 832) {
+	document.querySelector(".app")?.classList.add("side-collapsed");
+	$("menu-btn")?.setAttribute("aria-expanded", "false");
+}
 applyLang();
 connect();

package/web/i18n.js

@@ -68,13 +68,24 @@ export const STRINGS = {
 		themeLight: "Light",
 		themeDark: "Dark",
 		themeToggle: "Toggle theme",
+		layoutWide: "Wide",
+		layoutFocus: "Focus",
+		toggleWidth: "Toggle wide layout",
 		copy: "Copy",
-		copied: "Copied!",
+		copied: "Copied",
 		copyNote: "Copy text",
-		searchConversations: "Search conversations...",
+		searchConversations: "Search conversations",
 		export: "Export",
 		exportTitle: "Export conversation",
 		confirmShortcutHint: "Y to approve, N to decline",
+		starbuck: "Reference checks (Starbuck)",
+		starbuckHint: "Checks that cited works exist, match their citation and were not retracted. Sub-Sub restarts when you change this.",
+		starbuckOn: "Reference checks are on. Use /verify, or ask the researcher to check a manuscript's references.",
+		starbuckOff: "Reference checks are off.",
+		composerHint: "Enter sends. Shift+Enter starts a new line. / shows the commands.",
+		emptyResearcher: "The researcher reads your library and searches PubMed, Europe PMC and OpenAlex. It cannot change your library.",
+		emptyLibrarian: "The librarian changes your library. You see a preview of each change, and nothing changes until you approve it.",
+		previewKicker: "Preview",
 	},
 	pt: {
 		researcher: "Investigador",
@@ -142,13 +153,24 @@ export const STRINGS = {
 		themeLight: "Claro",
 		themeDark: "Escuro",
 		themeToggle: "Mudar tema",
+		layoutWide: "Largo",
+		layoutFocus: "Foco",
+		toggleWidth: "Mudar largura do ecrã",
 		copy: "Copiar",
-		copied: "Copiado!",
+		copied: "Copiado",
 		copyNote: "Copiar texto",
-		searchConversations: "Procurar conversas...",
+		searchConversations: "Procurar conversas",
 		export: "Exportar",
 		exportTitle: "Exportar conversa",
 		confirmShortcutHint: "Y para aprovar, N para recusar",
+		starbuck: "Verificação de referências (Starbuck)",
+		starbuckHint: "Verifica se as obras citadas existem, correspondem à citação e não foram retratadas. O Sub-Sub reinicia quando muda esta opção.",
+		starbuckOn: "A verificação de referências está ligada. Use /verify, ou peça ao investigador que verifique as referências de um manuscrito.",
+		starbuckOff: "A verificação de referências está desligada.",
+		composerHint: "Enter envia. Shift+Enter muda de linha. / mostra os comandos.",
+		emptyResearcher: "O investigador lê a sua biblioteca e pesquisa na PubMed, Europe PMC e OpenAlex. Não pode alterar a biblioteca.",
+		emptyLibrarian: "O bibliotecário altera a sua biblioteca. Vê uma pré-visualização de cada alteração, e nada muda até a aprovar.",
+		previewKicker: "Pré-visualização",
 	},
 };
 
@@ -156,11 +178,17 @@ export const STRINGS = {
 export const ACTIONS = {
 	researcher: [
 		{ cmd: "subsub", send: true, en: "Library overview", pt: "Resumo da biblioteca" },
+		{ cmd: "lit", fill: true, profiles: ["scholar", "author", "editor"], en: "Literature review", pt: "Revisão da literatura" },
+		{ cmd: "compare", fill: true, profiles: ["scholar", "author", "editor"], en: "Compare sources", pt: "Comparar fontes" },
 		{ cmd: "lit-note", fill: true, en: "Literature note", pt: "Nota de leitura" },
 		{ cmd: "synthesis", fill: true, en: "Synthesis", pt: "Síntese" },
 		{ cmd: "gaps", fill: true, en: "What is missing", pt: "O que falta" },
 		{ cmd: "manuscript", fill: true, en: "Check a manuscript", pt: "Verificar um manuscrito" },
+		{ cmd: "verify", fill: true, needs: "starbuck", en: "Check references", pt: "Verificar referências" },
+		{ cmd: "review", fill: true, profiles: ["author", "editor"], en: "Review a manuscript", pt: "Rever um manuscrito" },
 		{ cmd: "alert", send: true, en: "New publications", pt: "Novas publicações" },
+		{ cmd: "request-copy", fill: true, en: "Ask an author for a copy", pt: "Pedir uma cópia ao autor" },
+		{ cmd: "digest", send: true, profiles: ["scholar", "author", "editor"], en: "Digest of the week", pt: "Resumo da semana" },
 	],
 	librarian: [
 		{ cmd: "subsub", send: true, en: "Library overview", pt: "Resumo da biblioteca" },
@@ -228,6 +256,14 @@ export const TOOLS = {
 		queue_imports: "queue imports",
 		attach_note: "add a linked note",
 		check_manuscript: "check a manuscript",
+		verify_check_manuscript: "check the references",
+		search_europepmc: "search Europe PMC",
+		search_multi: "search PubMed, Europe PMC and OpenAlex",
+		read_oa_fulltext: "read the open-access full text",
+		find_contact: "find the author's address",
+		verify_check_references: "check references",
+		verify_prepare_claims: "prepare the claim check",
+		verify_record_claims: "record the claim check",
 		export_bibliography: "export a bibliography",
 		read: "read a file",
 		write: "write a file",
@@ -276,6 +312,14 @@ export const TOOLS = {
 		queue_imports: "pôr importações na fila",
 		attach_note: "acrescentar uma nota ligada",
 		check_manuscript: "verificar um manuscrito",
+		verify_check_manuscript: "verificar as referências",
+		search_europepmc: "pesquisar na Europe PMC",
+		search_multi: "pesquisar na PubMed, Europe PMC e OpenAlex",
+		read_oa_fulltext: "ler o texto integral em acesso aberto",
+		find_contact: "procurar o endereço do autor",
+		verify_check_references: "verificar referências",
+		verify_prepare_claims: "preparar a verificação das afirmações",
+		verify_record_claims: "registar a verificação das afirmações",
 		export_bibliography: "exportar uma bibliografia",
 		read: "ler um ficheiro",
 		write: "escrever um ficheiro",

package/web/icon.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#12161b"/><text x="16" y="21.5" text-anchor="middle" font-family="IBM Plex Mono, ui-monospace, monospace" font-size="14" font-weight="600" fill="#e0832a">SS</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="7" fill="#1d4f7c"/>
+  <rect x="5.5" y="8" width="21" height="16" rx="1.5" fill="#f7f6f2"/>
+  <path d="M9 12.5h8M9 16h14" stroke="#1d4f7c" stroke-width="1.6" stroke-linecap="round"/>
+  <circle cx="16" cy="20.3" r="1.5" fill="#1d4f7c"/>
+</svg>

package/web/index.html

@@ -6,22 +6,22 @@
 	<meta name="color-scheme" content="light dark">
 	<title>Sub-Sub</title>
 	<link rel="icon" href="/icon.svg" type="image/svg+xml">
-	<link rel="stylesheet" href="/glauca.css">
+	<link rel="preload" href="/fonts/IBMPlexSans.woff2" as="font" type="font/woff2" crossorigin>
 	<link rel="stylesheet" href="/app.css">
 	<script type="module" src="/app.js"></script>
 </head>
 <body data-mode="researcher">
 	<div class="app">
 		<header class="top">
-			<button type="button" class="ghost menu-btn" id="menu-btn" aria-controls="side" aria-expanded="false" data-i18n="menu">Menu</button>
-			<div class="brand"><span class="mark" aria-hidden="true">SS</span> Sub-Sub</div>
+			<button type="button" class="icon-btn" id="menu-btn" aria-controls="side" aria-expanded="true" data-i18n-title="menu" title="Menu"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M9.5 4.5v15"/></svg><span class="visually-hidden" data-i18n="menu">Menu</span></button>
+			<div class="brand"><svg class="mark" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="1.5"/><path d="M6.5 9h7M6.5 12h11"/><circle cx="12" cy="16" r="1.1"/></svg><span>Sub<span class="hyphen">-</span>Sub</span></div>
 			<div class="modes" role="group" aria-label="Mode">
 				<button type="button" data-mode="researcher" aria-pressed="true" data-i18n="researcher">Researcher</button>
 				<button type="button" data-mode="librarian" aria-pressed="false" data-i18n="librarian">Librarian</button>
 			</div>
 			<div class="status">
 				<span class="library" id="library"><span class="library-dot" aria-hidden="true"></span><span class="library-text"></span></span>
-				<label class="profile"><span class="visually-hidden" data-i18n="profile">Profile</span>
+				<label class="profile wide-only"><span class="visually-hidden" data-i18n="profile">Profile</span>
 					<select id="profile">
 						<option value="reader">Reader</option>
 						<option value="scholar">Scholar</option>
@@ -29,13 +29,14 @@
 						<option value="editor">Editor</option>
 					</select>
 				</label>
-				<button type="button" class="ghost model-btn" id="model-btn"></button>
-				<button type="button" class="ghost theme-btn" id="theme-btn" aria-label="Toggle theme" title="Toggle theme"></button>
+				<button type="button" class="chip-btn model-btn wide-only" id="model-btn"></button>
+				<button type="button" class="icon-btn wide-only" id="width-btn" aria-pressed="false"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h16M4 12l3.5-3.5M4 12l3.5 3.5M20 12l-3.5-3.5M20 12l-3.5 3.5"/></svg><span class="visually-hidden" id="width-btn-text">Wide</span></button>
+				<button type="button" class="icon-btn" id="theme-btn"></button>
 			</div>
 		</header>
 
 		<aside class="side" id="side">
-			<button type="button" class="primary block" id="new-btn" data-i18n="newConversation">New conversation</button>
+			<button type="button" class="new-btn" id="new-btn"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><span data-i18n="newConversation">New conversation</span></button>
 			<section class="phone-only settings">
 				<label><span data-i18n="profile">Profile</span>
 					<select id="profile-side">
@@ -49,7 +50,7 @@
 					<button type="button" class="secondary model-btn" id="model-btn-side"></button>
 				</label>
 				<label><span data-i18n="theme">Theme</span>
-					<button type="button" class="secondary theme-btn" id="theme-btn-side"></button>
+					<button type="button" class="secondary" id="theme-btn-side"></button>
 				</label>
 			</section>
 			<section>
@@ -59,16 +60,17 @@
 			<section class="grow">
 				<div class="side-subhead">
 					<h2 data-i18n="conversations">Conversations</h2>
-					<button type="button" class="ghost small" id="export-btn" title="Export conversation as Markdown" data-i18n="export">Export</button>
-				</div>
-				<div class="search-wrap">
-					<input type="search" id="session-search" placeholder="Search conversations..." autocomplete="off">
+					<button type="button" class="link-btn" id="export-btn" data-i18n="export" data-i18n-title="exportTitle">Export</button>
 				</div>
+				<input type="search" id="session-search" class="search" data-i18n-placeholder="searchConversations" placeholder="Search conversations" autocomplete="off">
 				<ul class="sessions" id="sessions"></ul>
 			</section>
 			<footer class="side-foot">
-				<button type="button" class="ghost small" id="quit-btn" data-i18n="quit">Close Sub-Sub</button>
-				<span class="version" id="version"></span>
+				<label class="switch" id="starbuck-label"><input type="checkbox" role="switch" id="starbuck-toggle"><span class="track" aria-hidden="true"></span><span data-i18n="starbuck">Reference checks (Starbuck)</span></label>
+				<div class="side-foot-row">
+					<button type="button" class="link-btn" id="quit-btn" data-i18n="quit">Close Sub-Sub</button>
+					<span class="version" id="version"></span>
+				</div>
 			</footer>
 		</aside>
 
@@ -77,10 +79,15 @@
 			<div class="log" id="log" aria-live="polite"></div>
 			<form class="composer" id="composer">
 				<div class="suggest" id="suggest" role="listbox" hidden></div>
-				<textarea id="input" rows="2" autocomplete="off" spellcheck="true"></textarea>
-				<div class="composer-buttons">
-					<button type="button" class="secondary" id="stop" hidden data-i18n="stop">Stop</button>
-					<button type="submit" class="primary" id="send" data-i18n="send">Send</button>
+				<div class="composer-box">
+					<textarea id="input" rows="1" autocomplete="off" spellcheck="true"></textarea>
+					<div class="composer-row">
+						<span class="composer-hint" data-i18n="composerHint">Enter to send, Shift+Enter for a new line, / for commands</span>
+						<div class="composer-buttons">
+							<button type="button" class="secondary" id="stop" hidden data-i18n="stop">Stop</button>
+							<button type="submit" class="primary" id="send" data-i18n="send">Send</button>
+						</div>
+					</div>
 				</div>
 			</form>
 		</main>
@@ -88,6 +95,7 @@
 
 	<dialog id="dialog" class="modal">
 		<form method="dialog" id="dialog-form">
+			<p class="modal-kicker" id="dialog-kicker"></p>
 			<h2 id="dialog-title"></h2>
 			<p class="hint" id="dialog-hint"></p>
 			<pre class="preview" id="dialog-message"></pre>
@@ -99,7 +107,7 @@
 	<dialog id="model-dialog" class="modal wide">
 		<div class="modal-head">
 			<h2 data-i18n="modelTitle">Model</h2>
-			<button type="button" class="ghost small" id="model-close" data-i18n="close">Close</button>
+			<button type="button" class="link-btn" id="model-close" data-i18n="close">Close</button>
 		</div>
 		<h3 data-i18n="chooseModel">Choose a model</h3>
 		<label class="check"><input type="checkbox" id="model-both" checked> <span data-i18n="forBoth">Use it in both modes</span></label>

package/web/glauca.css

@@ -1,106 +0,0 @@
-/* Generated from glauca.json. Edit the json, then `make generate`. */
-:root {
-  --gl-font-serif: "IBM Plex Serif", "IBM Plex Serif fallback", Georgia, serif;
-  --gl-font-sans: "IBM Plex Sans", "IBM Plex Sans fallback", system-ui, sans-serif;
-  --gl-font-mono: "IBM Plex Mono", "IBM Plex Mono fallback", ui-monospace, monospace;
-  --gl-font-reading: "IBM Plex Sans", "IBM Plex Sans fallback", system-ui, sans-serif;
-  --gl-text-xs: 0.64rem;
-  --gl-text-sm: 0.8rem;
-  --gl-text-base: 1rem;
-  --gl-text-lg: 1.25rem;
-  --gl-text-xl: 1.563rem;
-  --gl-text-2xl: 1.953rem;
-  --gl-text-3xl: 2.441rem;
-  --gl-text-4xl: 3.052rem;
-  --gl-text-display: clamp(2.5rem, 6vw, 4rem);
-  --gl-text-poster: clamp(3rem, 10vw, 6.5rem);
-  --gl-leading-tight: 1.08;
-  --gl-leading-snug: 1.3;
-  --gl-leading-normal: 1.55;
-  --gl-leading-relaxed: 1.7;
-  --gl-weight-regular: 400;
-  --gl-weight-medium: 500;
-  --gl-weight-semibold: 600;
-  --gl-weight-bold: 700;
-  --gl-space-0: 0;
-  --gl-space-1: 0.25rem;
-  --gl-space-2: 0.5rem;
-  --gl-space-3: 0.75rem;
-  --gl-space-4: 1rem;
-  --gl-space-5: 1.25rem;
-  --gl-space-6: 1.5rem;
-  --gl-space-8: 2rem;
-  --gl-space-10: 2.5rem;
-  --gl-space-12: 3rem;
-  --gl-space-16: 4rem;
-  --gl-space-20: 5rem;
-  --gl-space-24: 6rem;
-  --gl-radius-none: 0;
-  --gl-radius-sm: 2px;
-  --gl-radius-md: 4px;
-  --gl-radius-lg: 6px;
-  --gl-radius-pill: 999px;
-  --gl-border-width: 1px;
-}
-
-/* Pruina is the light default; Profundum is dark. */
-:root,
-[data-mode="light"],
-[data-theme="light"],
-html[data-theme="light"] {
-  --gl-bg: #f0f4f6;
-  --gl-surface: #f7fafb;
-  --gl-surface-raised: #ffffff;
-  --gl-text: #16222a;
-  --gl-text-muted: #55646d;
-  --gl-border: #cdd7dc;
-  --gl-accent: #0b62cf;
-  --gl-accent-bright: #007aff;
-  --gl-accent-deep: #084b96;
-  --gl-on-accent: #f2f7fb;
-  --gl-tint-deep: #16303f;
-  --gl-tint: #35576b;
-  --gl-tint-bright: #3e6d84;
-  --gl-tint-pale: #b7cdd6;
-  --gl-on-tint: #f2f7fb;
-}
-
-[data-mode="dark"],
-[data-theme="dark"],
-html[data-theme="dark"] {
-  --gl-bg: #10161c;
-  --gl-surface: #171f26;
-  --gl-surface-raised: #1f2932;
-  --gl-text: #e8eef2;
-  --gl-text-muted: #8c8c8c;
-  --gl-border: #2a3540;
-  --gl-accent: #3d97ff;
-  --gl-accent-bright: #6cb2ff;
-  --gl-accent-deep: #007aff;
-  --gl-on-accent: #0b1218;
-  --gl-tint-deep: #142430;
-  --gl-tint: #2b4356;
-  --gl-tint-bright: #4d7391;
-  --gl-tint-pale: #93b7c9;
-  --gl-on-tint: #0d1720;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --gl-bg: #10161c;
-    --gl-surface: #171f26;
-    --gl-surface-raised: #1f2932;
-    --gl-text: #e8eef2;
-    --gl-text-muted: #8c8c8c;
-    --gl-border: #2a3540;
-    --gl-accent: #3d97ff;
-    --gl-accent-bright: #6cb2ff;
-    --gl-accent-deep: #007aff;
-    --gl-on-accent: #0b1218;
-    --gl-tint-deep: #142430;
-    --gl-tint: #2b4356;
-    --gl-tint-bright: #4d7391;
-    --gl-tint-pale: #93b7c9;
-    --gl-on-tint: #0d1720;
-  }
-}