Carry BeatAPI code textures across BeatGeo workspaces

.changeset/beat-code-texture.md

@@ -0,0 +1,6 @@
+---
+"@workspace/web": patch
+"@workspace/og": patch
+---
+
+Add subtle BeatAPI code textures to the workspace and setup screens, and ensure their embedded font dependencies resolve after installation.

THIRD_PARTY_NOTICES.md

@@ -4,7 +4,7 @@ BeatGeo is maintained by BeatAPI and incorporates the MIT-licensed Elmo codebase
 
 Inherited statistics include share-of-voice and citation-stability calculations. The local metrics module reuses the same answer-level share-of-voice ratio.
 
-[BeatBrowser](https://github.com/BeatAPI/BeatBrowser) is included as a pinned MIT dependency (`d116e0a3613b39455557eec1ec8a89f4e2b198bf`); its original license and notices remain in the package. Its Chrome extension is copied locally during setup, with no separate product account or database.
+[BeatBrowser](https://github.com/BeatAPI/BeatBrowser) is included as a pinned MIT dependency (`d93e0bc38fd8047fbcdb2b307f668abbeae775a0`); its original license and notices remain in the package. Its Chrome extension is copied locally during setup, with no separate product account or database.
 
 Research references, not bundled complete products:
 

apps/browser-lab/public/style.css

@@ -282,14 +282,14 @@ nav a.active {
 	flex-direction: column;
 }
 #main {
+	position: relative;
+	isolation: isolate;
 	margin-left: var(--sidebar);
 	min-height: 100vh;
 }
 .education {
 	padding: 24px;
-	background-color: #1d1c1b;
-	background-image: radial-gradient(#33312f 1px, transparent 1px);
-	background-size: 10px 10px;
+	background: transparent;
 }
 .education-card {
 	border: 1px solid #3a3835;
@@ -584,6 +584,7 @@ dialog textarea {
 	background: var(--side);
 }
 table {
+	background: var(--bg);
 	width: 100%;
 	border-collapse: collapse;
 	font-size: 13px;
@@ -621,6 +622,7 @@ td {
 	color: var(--muted);
 }
 .metrics {
+	background: var(--bg);
 	display: grid;
 	grid-template-columns: repeat(4, 1fr);
 	border: 1px solid var(--line);
@@ -829,3 +831,17 @@ td {
 		animation: none !important;
 	}
 }
+
+/* Same static code texture as the product dashboard, on the existing dark palette. */
+#main::before {
+	content: "";
+	position: absolute;
+	inset: 0;
+	z-index: -1;
+	pointer-events: none;
+	background: url("/assets/code-texture.svg") top right / 1200px 960px no-repeat;
+	opacity: 0.25;
+}
+@media print {
+	#main::before { display: none; }
+}

apps/web/src/components/app-shell.tsx

@@ -16,7 +16,7 @@ export function AppShell({
 			{/* `overflow-clip`, not `overflow-hidden`: both clip to the rounded corners,
 			    but `hidden` makes this a scroll container, which stops descendants from
 			    sticking to the viewport (the site header included). */}
-			<SidebarInset className="md:border md:border-border/60 md:rounded-xl overflow-clip">
+			<SidebarInset className="beat-workspace md:border md:border-border/60 md:rounded-xl overflow-clip">
 				{header}
 				{children}
 			</SidebarInset>

apps/web/src/components/auth/auth-split-layout.tsx

@@ -37,7 +37,7 @@ const BAND = "flex w-full flex-col lg:min-h-[39rem]";
 
 export function AuthSplitLayout({ title, subtitle, children, pitch, footer }: AuthSplitLayoutProps) {
 	return (
-		<div className="grid min-h-svh grid-cols-1 lg:grid-cols-2">
+		<div className="beat-workspace grid min-h-svh grid-cols-1 lg:grid-cols-2">
 			<div className={COLUMN}>
 				<div className={`${BAND} max-w-sm`}>
 					<Logo />
@@ -53,10 +53,6 @@ export function AuthSplitLayout({ title, subtitle, children, pitch, footer }: Au
 			</div>
 
 			<aside className={`relative border-t bg-muted/40 lg:border-l lg:border-t-0 ${COLUMN}`}>
-				<div
-					aria-hidden="true"
-					className="pointer-events-none absolute inset-0 [background-image:linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] [background-size:48px_48px] opacity-40 [mask-image:linear-gradient(to_bottom,black,transparent_90%)]"
-				/>
 				<div className={`relative mx-auto ${BAND} max-w-lg`}>{pitch}</div>
 			</aside>
 		</div>

apps/web/src/routes/_authed/setup.tsx

@@ -51,7 +51,7 @@ function SetupPage() {
 	});
 
 	return (
-		<main className="min-h-svh bg-muted/20">
+		<main className="beat-workspace min-h-svh bg-muted/20">
 			<header className="border-b bg-background">
 				<div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-5 py-5 md:px-10">
 					<Link to="/app" aria-label="BeatGeo home">

apps/web/src/styles.css

@@ -180,3 +180,37 @@
 		color-adjust: exact !important;
 	}
 }
+
+/* Brand texture is decorative; opaque data surfaces keep charts and text clear. */
+.beat-workspace {
+	position: relative;
+	isolation: isolate;
+}
+.beat-workspace::before {
+	content: "";
+	position: absolute;
+	inset: 0;
+	z-index: -1;
+	pointer-events: none;
+	background: url("/code-texture.svg") top right / 1200px 960px no-repeat;
+	opacity: 0.2;
+}
+.dark .beat-workspace::before {
+	opacity: 0.24;
+}
+.beat-workspace [data-slot="table-container"] {
+	background: var(--background);
+}
+@media (max-width: 640px) {
+	.beat-workspace::before,
+	.dark .beat-workspace::before {
+		background-position: top right -150px;
+		background-size: 900px 720px;
+		opacity: 0.13;
+	}
+}
+@media print {
+	.beat-workspace::before {
+		display: none;
+	}
+}

package.json

@@ -47,6 +47,6 @@
     "typescript": "^7.0.2"
   },
   "dependencies": {
-    "@beatapi/beat-browser": "github:BeatAPI/BeatBrowser#d116e0a3613b39455557eec1ec8a89f4e2b198bf"
+    "@beatapi/beat-browser": "github:BeatAPI/BeatBrowser#d93e0bc38fd8047fbcdb2b307f668abbeae775a0"
   }
 }

packages/og/package.json

@@ -15,6 +15,9 @@
 		"./virtual": "./src/virtual.d.ts"
 	},
 	"dependencies": {
+		"@fontsource/geist-mono": "^5.3.0",
+		"@fontsource/geist-sans": "^5.3.0",
+		"@fontsource/titan-one": "^5.3.0",
 		"@takumi-rs/core": "^2.14.0",
 		"@takumi-rs/helpers": "^2.13.5",
 		"@workspace/config": "workspace:*",