roxxie-proxy-u-prod 0.1.0 → 0.2.2

package/scripts/verify.mjs

@@ -1,6 +1,7 @@
 /* SPDX-License-Identifier: AGPL-3.0-only */
 
 import { access, readFile, readdir, stat } from "node:fs/promises";
+import { createHash } from "node:crypto";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -8,14 +9,22 @@ const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
 const manifest = JSON.parse(
 	await readFile(join(packageRoot, "package.json"), "utf8")
 );
-const expectedCdn = `https://cdn.jsdelivr.net/npm/${manifest.name}@${manifest.version}/dist/`;
+const packageSpec = `${manifest.name}@${manifest.version}`;
+const expectedCdnRoot = `https://cdn.jsdelivr.net/npm/${packageSpec}/`;
+const expectedCdn = `${expectedCdnRoot}dist/`;
+const expectedRuntimeBase = `/${packageSpec}/runtime/`;
+const expectedShell = `https://unpkg.com${expectedRuntimeBase}index.html`;
 const required = [
 	"embed.js",
+	"standalone.html",
+	"examples/single-page.html",
 	"LICENSE",
 	"SOURCE.md",
 	"THIRD_PARTY_NOTICES.md",
 	"dist",
+	"dist/favicon.png",
 	"source/packages/chrome/src",
+	"source/packages/chrome/public/favicon.png",
 	"source/packages/chrome/src/adblock/assets/filters.bin",
 	"source/packages/cdp/dist/chobitsu.js",
 	"source/packages/cdp/src",
@@ -67,10 +76,93 @@ async function* walkFiles(root, relativeRoot = "") {
 
 for (const path of required) await access(join(packageRoot, path));
 
+const expectedLogoSha256 =
+	"fda3eb53c94eb3ef61e24e2724b4a87e863e0ce4135767f0041beb86e7107472";
+for (const path of [
+	"dist/favicon.png",
+	"source/packages/chrome/public/favicon.png",
+]) {
+	const digest = createHash("sha256")
+		.update(await readFile(join(packageRoot, path)))
+		.digest("hex");
+	if (digest !== expectedLogoSha256) {
+		throw new Error(`${path} does not contain the approved Roxxie logo`);
+	}
+}
+
+const themeSource = await readFile(
+	join(packageRoot, "source/packages/chrome/src/themes.ts"),
+	"utf8"
+);
+for (const requiredThemeValue of [
+	' name: "EDUrocks Dark"',
+	' toolbar: "#222230"',
+	' field: "#11111b"',
+	' accent: "#eb458b"',
+]) {
+	if (!themeSource.includes(requiredThemeValue.trimStart())) {
+		throw new Error(`Branded theme is missing ${requiredThemeValue.trim()}`);
+	}
+}
+
+const startScreenSource = await readFile(
+	join(packageRoot, "source/packages/chrome/src/components/StartScreen.tsx"),
+	"utf8"
+);
+if (!startScreenSource.includes("--start-action: #eb458b")) {
+	throw new Error("Start screen does not use the EDUrocks accent color");
+}
+if (
+	/\b(?:linear|radial)-gradient\s*\(|text-shadow\s*:/iu.test(startScreenSource)
+) {
+	throw new Error("Start screen must remain flat and glow-free");
+}
+
+if (manifest.version !== "0.2.2") {
+	throw new Error("This production release must be version 0.2.2");
+}
+
+const embedBytes = await readFile(join(packageRoot, "embed.js"));
+const embed = embedBytes.toString("utf8");
+const expectedEmbedIntegrity = `sha384-${createHash("sha384")
+	.update(embedBytes)
+	.digest("base64")}`;
+if (!embed.includes(expectedShell)) {
+	throw new Error(`embed.js must default to ${expectedShell}`);
+}
+if (/100\.58\.76\.81\/browser/iu.test(embed)) {
+	throw new Error("embed.js must not depend on tracker-hosted browser files");
+}
+
+for (const path of ["standalone.html", "examples/single-page.html"]) {
+	const document = await readFile(join(packageRoot, path), "utf8");
+	if (!document.includes(`${expectedCdnRoot}embed.js`)) {
+		throw new Error(`${path} must load the exact pinned jsDelivr embed`);
+	}
+	if (!document.includes(`integrity="${expectedEmbedIntegrity}"`)) {
+		throw new Error(`${path} must pin embed.js with ${expectedEmbedIntegrity}`);
+	}
+	if (!document.includes('crossorigin="anonymous"')) {
+		throw new Error(`${path} must request the SRI-protected embed anonymously`);
+	}
+	if (/data-roxxie-src=/iu.test(document)) {
+		throw new Error(
+			`${path} must exercise embed.js's production default shell`
+		);
+	}
+}
+
 const shell = await readFile(join(packageRoot, "runtime/index.html"), "utf8");
 if (!shell.includes(expectedCdn)) {
 	throw new Error(`runtime/index.html must reference ${expectedCdn}`);
 }
+if (
+	!shell.includes('rel="icon"') ||
+	!shell.includes('type="image/png"') ||
+	!shell.includes(`${expectedCdn}favicon.png`)
+) {
+	throw new Error("Runtime shell does not reference the pinned branded PNG");
+}
 if (/127\.0\.0\.1|localhost/.test(shell)) {
 	throw new Error("Production shell contains a loopback address");
 }
@@ -95,9 +187,16 @@ if (outputFiles.some((path) => path.endsWith(".map"))) {
 if (outputFiles.includes("index.html")) {
 	throw new Error("CDN dist must not claim that jsDelivr can execute HTML");
 }
+let hasVersionedRuntimeBase = false;
 for (const path of JavaScriptFiles) {
 	const source = await readFile(join(packageRoot, "dist", path), "utf8");
 	assertNoLocalPath(`dist/${path}`, source);
+	if (source.includes(expectedRuntimeBase)) hasVersionedRuntimeBase = true;
+}
+if (!hasVersionedRuntimeBase) {
+	throw new Error(
+		`Production JavaScript must use the unpkg runtime base ${expectedRuntimeBase}`
+	);
 }
 for await (const path of walkFiles(packageRoot)) {
 	const contents = await readFile(join(packageRoot, path));

package/source/packages/chrome/index.html

@@ -2,14 +2,15 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="/roxxie-icon.svg" />
+		<link rel="icon" type="image/png" sizes="any" href="/favicon.png" />
+		<meta name="theme-color" content="#222230" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Roxxie Proxy U</title>
 
 		<!--ssr-head-->
 	</head>
 
-	<body class="light-mode">
+	<body>
 		<!--ssr-body-->
 		<div id="app"></div>
 		<script type="module" src="/src/index.ts"></script>

package/source/packages/chrome/src/Tab/Tab.tsx

@@ -138,7 +138,7 @@ export class Tab extends StatefulClass {
 		this.url = url;
 		this.icon = defaultFaviconUrl;
 		if (url.protocol == INTERNAL_URL_PROTOCOL) {
-			this.icon = null;
+			this.icon = roxxieIconUrl;
 			this.history.current().favicon = roxxieIconUrl;
 			switch (url.host) {
 				case "newtab":

package/source/packages/chrome/src/assets/favicon.ts

@@ -1,4 +1,4 @@
 import defaultFavicon from "/defaultfavicon.png";
 
 export const defaultFaviconUrl = defaultFavicon;
-export const roxxieIconUrl = `${import.meta.env.BASE_URL}roxxie-icon.svg`;
+export const roxxieIconUrl = `${import.meta.env.BASE_URL}favicon.png`;

package/source/packages/chrome/src/components/Button.tsx

@@ -34,34 +34,23 @@ Button.style = css`
 	}
 	:scope:not(.icon):hover {
 		background: var(--text-10);
-		background-image: radial-gradient(
-			70% 80% at 50% 100%,
-			var(--text-8),
-			var(--text-5)
-		);
+		border-color: var(--text-30);
 	}
 	:scope.primary {
-		background-color: var(--tab_line);
-		background-image: radial-gradient(
-			70% 80% at 50% 100%,
-			var(--tab_line),
-			var(--accent-shade-20)
-		);
-		box-shadow: inset 0px 0.05em 0.025em rgb(255 255 255 / 30%);
-		text-shadow: 0 0.055em 0.05em var(--accent-shade-20);
-		color: white;
-		font-weight: 500;
+		background: var(--tab_line);
+		color: #11111b;
+		font-weight: 650;
 		border-color: var(--tab_line);
 	}
 
 	:scope.primary:hover {
-		background-color: var(--accent-shade-10);
-		background-image: radial-gradient(
-			70% 80% at 50% 100%,
-			var(--accent-shade-5),
-			var(--accent-shade-25)
-		);
-		filter: saturate(1.1);
+		background: var(--accent-shade-10);
+		border-color: var(--accent-shade-10);
+	}
+
+	:scope:not(.icon):focus-visible {
+		outline: 2px solid var(--tab_line);
+		outline-offset: 2px;
 	}
 
 	:scope:disabled,

package/source/packages/chrome/src/components/Checkbox.tsx

@@ -47,8 +47,7 @@ Checkbox.style = css`
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: var(--toolbar_field);
-		text-shadow: 0 0.055em 0.05em var(--accent-shade-20);
+		color: #11111b;
 		font-size: 0.8em;
 		transform: scale(0);
 		transition: transform 120ms cubic-bezier(0.43, 0.91, 0.34, 1.3);
@@ -56,16 +55,13 @@ Checkbox.style = css`
 	}
 
 	:scope:has(input:checked) {
-		background-color: var(--tab_line);
-		background-image: radial-gradient(
-			70% 50% at 50% 100%,
-			var(--accent-tint-20),
-			var(--accent-shade-10)
-		);
-		box-shadow:
-			inset 0px 0.05em 0.025em rgb(255 255 255 / 40%),
-			inset 0px -0.05em 0.04em rgb(0 0 0 / 20%);
-		border: none;
+		background: var(--tab_line);
+		border-color: var(--tab_line);
+	}
+
+	:scope:has(input:focus-visible) {
+		outline: 2px solid var(--tab_line);
+		outline-offset: 2px;
 	}
 
 	:scope:has(input:checked)::after {

package/source/packages/chrome/src/components/Input.tsx

@@ -61,14 +61,13 @@ Input.style = css`
 		font-size: 0.9em;
 		color: var(--toolbar_field_text);
 		outline: none;
-		transition:
-			border-color 0.2s ease,
-			box-shadow 0.2s ease;
+		transition: border-color 0.2s ease;
 	}
 
 	input:focus {
 		border-color: var(--tab_line);
-		box-shadow: 0 0 0 2px var(--accent-20);
+		outline: 2px solid var(--tab_line);
+		outline-offset: 2px;
 	}
 
 	input:disabled {

package/source/packages/chrome/src/components/StartScreen.tsx

@@ -61,9 +61,14 @@ export function StartScreen(this: FC<StartScreenProps, StartScreenState>) {
 		<div class="start-screen">
 			<main class="start-panel" aria-labelledby="start-title">
 				<header class="product-name">
-					<span class="product-mark" aria-hidden="true">
-						R
-					</span>
+					<img
+						class="product-mark"
+						src={`${import.meta.env.BASE_URL}favicon.png`}
+						alt=""
+						aria-hidden="true"
+						width="56"
+						height="56"
+					/>
 					<span>Roxxie Proxy U</span>
 				</header>
 
@@ -164,17 +169,18 @@ export function mountStartScreen(props: StartScreenProps): HTMLElement {
 
 StartScreen.style = css`
 	:scope {
-		--start-background: #f2f1ed;
-		--start-panel: #ffffff;
-		--start-text: #1c1d1f;
-		--start-muted: #64676c;
-		--start-border: #d5d4cf;
-		--start-subtle: #f7f7f5;
-		--start-action: #245e4a;
-		--start-action-hover: #194936;
-		--start-error-background: #fff7f5;
-		--start-error-border: #c98d83;
-		--start-error-text: #732d24;
+		--start-background: #11111b;
+		--start-panel: #222230;
+		--start-text: #ebeff5;
+		--start-muted: #b2bdcb;
+		--start-border: #4f526b;
+		--start-subtle: #191925;
+		--start-action: #eb458b;
+		--start-action-hover: #d6387a;
+		--start-action-text: #11111b;
+		--start-error-background: #2d1d26;
+		--start-error-border: #a85173;
+		--start-error-text: #f3afcb;
 
 		width: 100%;
 		height: 100%;
@@ -201,29 +207,23 @@ StartScreen.style = css`
 		padding: 2rem;
 		background: var(--start-panel);
 		border: 1px solid var(--start-border);
-		border-radius: 6px;
+		border-radius: 16px;
 	}
 
 	.product-name {
 		display: flex;
 		align-items: center;
-		gap: 0.65rem;
+		gap: 0.8rem;
 		font-size: 0.9rem;
 		font-weight: 650;
 		letter-spacing: 0.01em;
 	}
 
 	.product-mark {
-		width: 1.75rem;
-		height: 1.75rem;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 4px;
-		background: var(--start-action);
-		color: #ffffff;
-		font-size: 0.95rem;
-		font-weight: 750;
+		width: 3.5rem;
+		height: 3.5rem;
+		object-fit: contain;
+		flex: 0 0 auto;
 	}
 
 	.introduction {
@@ -266,7 +266,7 @@ StartScreen.style = css`
 		padding: 0.9rem 1rem;
 		background: var(--start-subtle);
 		border: 1px solid var(--start-border);
-		border-radius: 4px;
+		border-radius: 10px;
 	}
 
 	.status-label {
@@ -288,7 +288,7 @@ StartScreen.style = css`
 		padding: 1rem;
 		background: var(--start-error-background);
 		border: 1px solid var(--start-error-border);
-		border-radius: 4px;
+		border-radius: 10px;
 		color: var(--start-error-text);
 		font-size: 0.85rem;
 	}
@@ -323,8 +323,8 @@ StartScreen.style = css`
 		padding: 0.7rem 1rem;
 		background: var(--start-action);
 		border: 1px solid var(--start-action);
-		border-radius: 4px;
-		color: #ffffff;
+		border-radius: 10px;
+		color: var(--start-action-text);
 		font: inherit;
 		font-size: 0.95rem;
 		font-weight: 650;
@@ -337,13 +337,14 @@ StartScreen.style = css`
 	}
 
 	.start-button:focus-visible {
-		outline: 3px solid #8ba99e;
+		outline: 3px solid #f3afcb;
 		outline-offset: 2px;
 	}
 
 	.start-button:disabled {
-		background: #7c9189;
-		border-color: #7c9189;
+		background: #6b4056;
+		border-color: #6b4056;
+		color: var(--start-muted);
 		cursor: wait;
 	}
 
@@ -352,22 +353,6 @@ StartScreen.style = css`
 		font-size: 0.78rem;
 	}
 
-	@media (prefers-color-scheme: dark) {
-		:scope {
-			--start-background: #181a1b;
-			--start-panel: #222526;
-			--start-text: #f1f2ef;
-			--start-muted: #b4b8b5;
-			--start-border: #444846;
-			--start-subtle: #292c2d;
-			--start-action: #3d8068;
-			--start-action-hover: #4a9278;
-			--start-error-background: #322321;
-			--start-error-border: #875c55;
-			--start-error-text: #f0c1b9;
-		}
-	}
-
 	@media (max-width: 34rem) {
 		:scope {
 			align-items: flex-start;

package/source/packages/chrome/src/components/TopSiteButton.tsx

@@ -132,8 +132,8 @@ TopSiteButton.style = css`
 
 	.top-site-button:focus-visible .tile {
 		border-color: var(--tab_line);
-		box-shadow: 0 0 0 2px var(--accent-20);
-		outline: none;
+		outline: 2px solid var(--tab_line);
+		outline-offset: 2px;
 	}
 
 	.icon-wrapper {

package/source/packages/chrome/src/pages/NewTabPage.tsx

@@ -74,12 +74,15 @@ export function NewTabPage(this: FC<{ tab: Tab }>) {
 		<div>
 			<div class="logo">
 				<img
-					src={`${import.meta.env.BASE_URL}roxxie-icon.svg`}
+					src={`${import.meta.env.BASE_URL}favicon.png`}
 					alt="Roxxie Proxy U logo"
-					width="56"
-					height="56"
+					width="80"
+					height="80"
 				/>
-				<h1>Roxxie Proxy U</h1>
+				<div class="logo-copy">
+					<span>EDUrocks network</span>
+					<h1>Roxxie Proxy U</h1>
+				</div>
 			</div>
 			<div class="topbar">
 				<div class="inputcontainercontainer">
@@ -153,16 +156,32 @@ NewTabPage.style = css`
 	.logo {
 		display: flex;
 		align-items: center;
-		gap: 1rem;
+		gap: 1.1rem;
 		margin-bottom: 2rem;
 	}
+	.logo-copy {
+		display: flex;
+		flex-direction: column;
+		gap: 0.2rem;
+	}
+	.logo-copy span {
+		color: var(--ntp-text-60);
+		font-size: 0.74rem;
+		font-weight: 700;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+	}
 	.logo h1 {
-		font-size: 2.25rem;
-		font-weight: 600;
+		font-size: 2.1rem;
+		font-weight: 650;
+		letter-spacing: -0.025em;
 		user-select: none;
 	}
 	.logo img {
 		display: inline-block;
+		width: 5rem;
+		height: 5rem;
+		object-fit: contain;
 		user-select: none;
 	}
 	.clock {
@@ -187,7 +206,6 @@ NewTabPage.style = css`
 		align-items: center;
 		transition:
 			border-color 0.15s ease-out,
-			box-shadow 0.15s ease-out,
 			background-color 0.15s ease-out;
 	}
 
@@ -199,8 +217,8 @@ NewTabPage.style = css`
 
 	.inputcontainer:focus-within {
 		border-color: var(--tab_line);
-		box-shadow: 0 0 0 2px var(--accent-20);
-		outline: none;
+		outline: 2px solid var(--tab_line);
+		outline-offset: 2px;
 	}
 	input {
 		font-size: 1.05rem;
@@ -260,5 +278,19 @@ NewTabPage.style = css`
 		.top-sites-list {
 			grid-template-columns: repeat(auto-fit, minmax(6.25rem, 6.25rem));
 		}
+
+		.logo {
+			align-items: flex-start;
+			gap: 0.8rem;
+		}
+
+		.logo img {
+			width: 4rem;
+			height: 4rem;
+		}
+
+		.logo h1 {
+			font-size: 1.65rem;
+		}
 	}
 `;

package/source/packages/chrome/src/pages/SettingsPage.tsx

@@ -1313,7 +1313,7 @@ export function SettingsPage(
 										<div class="about-info">
 											<img
 												class="browser-logo"
-												src={`${import.meta.env.BASE_URL}roxxie-icon.svg`}
+												src={`${import.meta.env.BASE_URL}favicon.png`}
 												alt="Roxxie Proxy U logo"
 											/>
 											<div class="browser-info">
@@ -1505,7 +1505,8 @@ SettingsPage.style = css`
 
 	.search-input input:focus {
 		border-color: var(--tab_line);
-		box-shadow: 0 0 0 2px var(--accent-20);
+		outline: 2px solid var(--tab_line);
+		outline-offset: 2px;
 	}
 
 	.search-input .icon {
@@ -1653,16 +1654,11 @@ SettingsPage.style = css`
 		cursor: pointer;
 		display: flex;
 		flex-direction: column;
-		transition:
-			border-color 0.15s ease,
-			box-shadow 0.15s ease,
-			transform 0.15s ease;
+		transition: border-color 0.15s ease;
 	}
 
 	.layout-card:hover {
 		border-color: var(--tab_line);
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-		transform: translateY(-1px);
 	}
 
 	.layout-card:focus-within {
@@ -1672,7 +1668,8 @@ SettingsPage.style = css`
 
 	.layout-card.selected {
 		border-color: var(--tab_line);
-		box-shadow: 0 0 0 3px var(--accent-20);
+		outline: 2px solid var(--tab_line);
+		outline-offset: 2px;
 	}
 
 	.layout-radio {
@@ -1833,6 +1830,7 @@ SettingsPage.style = css`
 	.browser-logo {
 		width: 5rem;
 		height: 5rem;
+		object-fit: contain;
 	}
 
 	.browser-info h3 {
@@ -1894,6 +1892,7 @@ SettingsPage.style = css`
 	}
 
 	.theme-card {
+		border: 1px solid var(--ntp-text-15);
 		border-radius: var(--radius-md);
 		overflow: hidden;
 		cursor: pointer;
@@ -1903,12 +1902,12 @@ SettingsPage.style = css`
 
 	.theme-card:hover {
 		border-color: var(--tab_line);
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 	}
 
 	.theme-card.selected {
 		border-color: var(--tab_line);
-		box-shadow: 0 0 0 3px var(--accent-20);
+		outline: 2px solid var(--tab_line);
+		outline-offset: 2px;
 	}
 
 	.theme-info {

package/source/packages/chrome/src/runtime-base.ts

@@ -4,7 +4,7 @@
  * Static assets may be delivered by a CDN while configuration and service
  * workers must remain on the application's own origin. Development and the
  * standalone build use Vite's ordinary base URL; the production npm build
- * supplies `/browser/` explicitly.
+ * supplies its versioned, same-origin unpkg runtime directory explicitly.
  */
 export function runtimeBaseUrl(): URL {
 	const configuredBase = import.meta.env.VITE_RUNTIME_BASE?.trim();

package/source/packages/chrome/src/services/SettingsService.ts

@@ -29,7 +29,7 @@ export type Settings = {
 export type TabLayoutMode = Settings["tabLayout"];
 
 const DEFAULT_SETTINGS: Settings = {
-	appearance: "system",
+	appearance: "dark",
 	tabLayout: "horizontal",
 	verticalTabJustify: "left",
 	sidebarWidth: null,

package/source/packages/chrome/src/style.css

@@ -33,8 +33,8 @@ iframe {
 html,
 body {
 	font-family: var(--font);
-	color: var(--toolbar_text);
-	background: var(--toolbar);
+	color: var(--toolbar_text, #ebeff5);
+	background: var(--toolbar, #222230);
 	accent-color: var(--tab_line);
 	color-scheme: dark;
 
@@ -93,11 +93,11 @@ body {
 	--accent-shade-40: color-mix(in oklab, black 40%, var(--tab_line));
 	--accent-shade-50: color-mix(in oklab, black 50%, var(--tab_line));
 
-	--radius-xs: 3px;
-	--radius-sm: 4px;
-	--radius-md: 5px;
-	--radius-lg: 6px;
-	--radius-xl: 8px;
+	--radius-xs: 4px;
+	--radius-sm: 6px;
+	--radius-md: 8px;
+	--radius-lg: 12px;
+	--radius-xl: 16px;
 
 	--space-xxs: 0.15rem;
 	--space-xs: 0.225rem;