Promote to production: signage-kit 2026.7.2 chrome (rail badge)

assets/static/js/main.ts

@@ -2,6 +2,10 @@
 // degraded mode (shared across all apps). Must stay first so the shim is in
 // place before any render.
 import '@screenly-labs/signage-kit/polyfills'
+// On a Screenly player the viewer is already a customer, so the promotional
+// Screenly badge (.brand) is removed; every other browser keeps it. Shared with
+// every signage app via the kit.
+import { removeScreenlyBranding } from '@screenly-labs/signage-kit/branding'
 import qrcode from 'qrcode-generator'
 import { hostLabel, largestFit, relativeTime } from './render'
 // The wire contract is defined once in the worker's parser. `import type` is
@@ -411,15 +415,6 @@ interface FeedResponse {
     stage?.style.setProperty('--rotate-ms', `${rotateMs}ms`)
   }
 
-  // On a Screenly player the viewer is already a Screenly customer, so the
-  // promotional Screenly badge is removed. The 'screenly-viewer' token in the
-  // user agent marks these devices; every other browser keeps the badge.
-  const removeScreenlyBranding = (): void => {
-    if (navigator.userAgent.includes('screenly-viewer')) {
-      document.querySelector('.brand')?.remove()
-    }
-  }
-
   const init = (): void => {
     removeScreenlyBranding()
     readConfig()

assets/static/styles/main.css

@@ -10,43 +10,11 @@
    orientations; the per-item fit is finished in main.ts.
    ========================================================================= */
 
-@font-face {
-  font-family: "Bricolage Grotesque";
-  font-weight: 200 800;
-  font-style: normal;
-  font-optical-sizing: auto;
-  font-display: swap;
-  src: url("/static/fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2");
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
-  font-family: "Hanken Grotesk";
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
-  src: url("/static/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
-  font-family: "Space Mono";
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-  src: url("/static/fonts/space-mono-latin-400-normal.woff2") format("woff2");
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
-  font-family: "Space Mono";
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-  src: url("/static/fonts/space-mono-latin-700-normal.woff2") format("woff2");
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
+/* Webfonts (@font-face) come from @screenly-labs/signage-kit — build.ts prepends
+   styles/fonts.css to this file before down-leveling. The Screenly badge stays in
+   the rail (see .brand below), not the kit's fixed corner badge, because a QR
+   lockup owns the bottom-right corner here. This file keeps the app's own tokens,
+   reset, fluid root, and "The Wire" component styles. */
 
 :root {
   --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
@@ -154,7 +122,10 @@ body {
   font-weight: 700;
   white-space: nowrap;
 }
-.rail__brand {
+/* Screenly badge — carried in the rail (not the kit's fixed corner badge): a QR
+   "scan to read" lockup owns the bottom-right corner here. Kept as `.brand` so
+   the shared removeScreenlyBranding() hides it on Screenly players. */
+.brand {
   flex: none;
   display: flex;
   align-items: center;
@@ -163,7 +134,7 @@ body {
   border-inline-start: 1px solid var(--hairline);
   opacity: 0.85;
 }
-.rail__brand img {
+.brand img {
   block-size: clamp(0.7rem, 1vmin + 0.5rem, 1.4rem);
   inline-size: auto;
   display: block;

build.ts

@@ -16,12 +16,23 @@
 // CSS step (used by `bun run dev`, which only needs the JS bundle, so the
 // working-tree CSS stays unminified for editing).
 
+import { readFileSync } from 'node:fs'
 import { Glob } from 'bun'
 import { bundleJs, processCss } from '@screenly-labs/signage-kit/build'
 import { run as syncFonts } from './sync-fonts'
 
 const clientOnly = process.argv.includes('--client')
 
+// Shared chrome CSS from @screenly-labs/signage-kit — the canonical @font-face
+// set. Prepended to this app's raw main.css at build time (a raw-CSS Worker
+// can't resolve a bare `@import`). NOT the kit's brand.css: this app carries the
+// Screenly badge in its top rail, and a QR "scan to read" lockup already sits in
+// the bottom-right corner, so the kit's fixed corner badge would overlap it. The
+// badge stays in the rail (`.brand`, below); only the removal logic is shared.
+const sharedCss = ['fonts.css']
+  .map((f) => readFileSync(Bun.resolveSync(`@screenly-labs/signage-kit/styles/${f}`, import.meta.dir), 'utf8'))
+  .join('\n')
+
 // Vendor the Bun-managed webfonts into ./assets first.
 await syncFonts()
 
@@ -47,7 +58,7 @@ console.log('✓ JS: assets/static/js/main.js (iife, es2017)')
 if (!clientOnly) {
   for await (const path of new Glob('assets/static/styles/*.css').scan('.')) {
     try {
-      const code = await processCss(await Bun.file(path).text(), {
+      const code = await processCss(`${sharedCss}\n${await Bun.file(path).text()}`, {
         includeDegraded: true,
         filename: path
       })

package.json

@@ -17,10 +17,7 @@
   },
   "license": "AGPL-3.0-only",
   "dependencies": {
-    "@fontsource-variable/bricolage-grotesque": "^5.2.10",
-    "@fontsource-variable/hanken-grotesk": "^5.2.8",
-    "@fontsource/space-mono": "^5.2.9",
-    "@screenly-labs/signage-kit": "github:Screenly-Labs/signage-kit#2026.7.0",
+    "@screenly-labs/signage-kit": "github:Screenly-Labs/signage-kit#2026.7.2",
     "hono": "^4.12.27",
     "qrcode-generator": "^2.0.4"
   },

src/components/App.tsx

@@ -30,7 +30,7 @@ const App = ({ env, feedId, feedTitle, v }: AppProps) => {
           </span>
           <span class="rail__pos" id="rail-pos" aria-hidden="true" />
           <a
-            class="rail__brand"
+            class="brand"
             href="https://www.screenly.io"
             target="_blank"
             rel="noopener noreferrer"

sync-fonts.ts

@@ -1,42 +1,14 @@
 #!/usr/bin/env bun
-// Copies the self-hosted webfont files out of the Bun-managed @fontsource
-// packages and into ./assets/static/fonts, where wrangler's [site] config
-// serves them at /static/fonts/. Bun owns the font versions (package.json);
-// this step vendors the exact files we ship and serve ourselves — no CDN.
-//
-// "The Wire" type system: Bricolage Grotesque (variable opsz+wght "standard"
-// axis) for headlines, Hanken Grotesk for body, Space Mono (400/700) as the
-// teletype/utility face for the wire rail, datelines, and the QR label.
+// Vendor this app's webfonts into ./assets/static/fonts. The files, versions,
+// and copy logic all live in @screenly-labs/signage-kit — this just names the
+// families "The Wire" uses: Bricolage Grotesque headlines, Hanken Grotesk body,
+// Space Mono (400/700) for the wire rail / datelines / QR stamp.
 
-const FONTS = [
-  '@fontsource-variable/bricolage-grotesque/files/bricolage-grotesque-latin-standard-normal.woff2',
-  '@fontsource-variable/hanken-grotesk/files/hanken-grotesk-latin-wght-normal.woff2',
-  '@fontsource/space-mono/files/space-mono-latin-400-normal.woff2',
-  '@fontsource/space-mono/files/space-mono-latin-700-normal.woff2'
-]
-const DEST_DIR = 'assets/static/fonts'
+import { syncFonts } from '@screenly-labs/signage-kit/sync-fonts'
 
-export const run = async (): Promise<void> => {
-  let count = 0
+export const run = (): Promise<number> =>
+  syncFonts(['bricolage-grotesque', 'hanken-grotesk', 'space-mono'])
 
-  for (const rel of FONTS) {
-    const file = rel.split('/').pop()
-    const src = Bun.file(`node_modules/${rel}`)
-
-    if (!(await src.exists())) {
-      console.error(`✗ Missing ${file} — run \`bun install\` first.`)
-      process.exit(1)
-    }
-
-    await Bun.write(`${DEST_DIR}/${file}`, src)
-    console.log(`✓ Font: ${DEST_DIR}/${file}`)
-    count++
-  }
-
-  console.log(`Fonts synced — ${count} file(s) vendored from @fontsource.`)
-}
-
-// Allow running standalone: `bun run sync-fonts.ts`
 if (import.meta.main) {
   await run()
 }