create-bridgething 0.8.0 → 0.9.1

package/dist/index.mjs

@@ -5,10 +5,6 @@ import { dirname, extname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { v7 } from "uuid";
 //#region src/index.ts
-//! `create-bridgething` - copy the bundled template into a new directory,
-//! substitute the project name, print next steps. Opinionated stack:
-//! React 19 + Vite + Tailwind v4 + TypeScript strict, plus
-//! `@bridgething/client` preinstalled.
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const TEMPLATE_DIR = resolve(__dirname, "..", "template");
 const VARIANTS = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bridgething",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "type": "module",
   "description": "Scaffold a new bridgething webapp (React + Vite + Tailwind v4)",
   "license": "MIT",

package/template/package.json

@@ -12,7 +12,7 @@
     "update": "bunx @bridgething/updater"
   },
   "dependencies": {
-    "@bridgething/client": "^0.8.0",
+    "@bridgething/client": "^0.9.1",
     "preact": "^10.29.7",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"

package/template/scripts/push.ts

@@ -1,8 +1,4 @@
 #!/usr/bin/env bun
-// Build this webapp and install it onto a connected Car Thing, then make it
-// visible: a plain app becomes active, a launcher takes the home-screen slot,
-// an overlay takes the overlay slot. Run with --help for the flags.
-//
 // Generated from @bridgething/webapp-shared. It is yours now; tweak it freely.
 import { decode as msgpackDecode, encode as msgpackEncode } from '@msgpack/msgpack';
 import { spawn } from 'node:child_process';

package/template/src/App.tsx

@@ -1,9 +1,6 @@
 import { BridgethingClient, type ConnectionState, type PlayerState } from '@bridgething/client';
 import { useEffect, useMemo, useState } from 'react';
 
-// Production: the webapp is served by the daemon on the device, so a
-// relative `ws://<location.host>/` reaches it. In dev (vite on your
-// laptop) point at the device explicitly with VITE_BRIDGETHING_URL.
 const wsUrl =
   import.meta.env.VITE_BRIDGETHING_URL ??
   (typeof window !== 'undefined' ? `ws://${window.location.host}/` : 'ws://127.0.0.1:8891/');
@@ -56,41 +53,43 @@ export default function App() {
   const playing = state?.playback.state === 'playing';
 
   return (
-    <div className="flex h-full w-full items-center justify-center gap-12 bg-bt-charcoal p-12 text-bt-off-white">
+    <div className="flex h-full w-full items-center justify-center gap-12 bg-bg p-12 text-off-white">
       {artUrl ? (
-        <img src={artUrl} alt="" className="h-full max-h-96 w-auto rounded-2xl shadow-2xl" />
+        <img src={artUrl} alt="" className="h-full max-h-96 w-auto border border-rule" />
       ) : (
-        <div className="grid h-96 w-96 place-items-center rounded-2xl bg-black/40 text-sm text-bt-soft-gray">
+        <div className="grid h-96 w-96 place-items-center border border-rule bg-screen font-mono text-body text-dim">
           {conn === 'open' ? 'no track' : conn}
         </div>
       )}
       <div className="flex flex-col gap-3">
-        <div className="text-xs uppercase tracking-widest text-bt-soft-gray">{conn}</div>
+        <div className="font-mono text-eyebrow tracking-[0.25em] text-dim uppercase">{conn}</div>
         {track ? (
           <>
-            <div className="text-3xl font-semibold leading-tight">{track.title ?? 'unknown'}</div>
-            <div className="text-xl text-bt-soft-gray">{track.artist ?? ''}</div>
-            <div className="text-sm text-bt-soft-gray/70">{track.album ?? ''}</div>
+            <div className="font-display text-3xl font-medium leading-tight tracking-display">
+              {track.title ?? 'unknown'}
+            </div>
+            <div className="text-xl text-soft">{track.artist ?? ''}</div>
+            <div className="font-mono text-hint text-dim">{track.album ?? ''}</div>
             <div className="mt-6 flex gap-4">
               <button
-                className="rounded-full bg-white/10 px-6 py-3 text-sm font-medium transition active:bg-white/20"
+                className="border border-edge px-6 py-3 font-mono text-row text-near transition active:bg-neutral-soft"
                 onClick={() => client.player.skipPrev()}>
                 ◀◀
               </button>
               <button
-                className="rounded-full bg-bt-blue px-6 py-3 text-sm font-medium text-bt-charcoal transition active:scale-95"
+                className="border border-accent bg-accent px-6 py-3 font-mono text-row text-screen transition active:opacity-80"
                 onClick={() => (playing ? client.player.pause() : client.player.resume())}>
                 {playing ? '❚❚' : '▶'}
               </button>
               <button
-                className="rounded-full bg-white/10 px-6 py-3 text-sm font-medium transition active:bg-white/20"
+                className="border border-edge px-6 py-3 font-mono text-row text-near transition active:bg-neutral-soft"
                 onClick={() => client.player.skipNext()}>
                 ▶▶
               </button>
             </div>
           </>
         ) : (
-          <div className="text-2xl text-bt-soft-gray">connect a phone to see now playing</div>
+          <div className="text-title text-soft">connect a phone to see now playing</div>
         )}
       </div>
     </div>

package/template/src/index.css

@@ -17,36 +17,67 @@
 }
 
 @theme {
-  --color-bt-charcoal: #1b1f23;
-  --color-bt-off-white: #efefef;
-  --color-bt-blue: #00a8e8;
-  --color-bt-soft-gray: #a7adb5;
+  --color-off-white: #efefef;
+  --color-bg: #0a0c0e;
+  --color-screen: #060809;
+  --color-fg: #efefef;
+  --color-muted: #a7adb5;
+  --color-accent: #00a8e8;
+  --color-ok: #3ddc84;
+  --color-err: #dc3d3d;
+  --color-warn: #ff7070;
+  --color-experimental: #ffb066;
+
+  --color-rule: color-mix(in srgb, var(--color-fg) 10%, transparent);
+  --color-rule-strong: color-mix(in srgb, var(--color-fg) 15%, transparent);
+  --color-edge: color-mix(in srgb, var(--color-fg) 25%, transparent);
+  --color-dim: color-mix(in srgb, var(--color-fg) 35%, transparent);
+  --color-soft: color-mix(in srgb, var(--color-fg) 55%, transparent);
+  --color-near: color-mix(in srgb, var(--color-fg) 80%, transparent);
+
+  --color-accent-soft: color-mix(in srgb, var(--color-accent) 14%, transparent);
+  --color-ok-soft: color-mix(in srgb, var(--color-ok) 14%, transparent);
+  --color-err-soft: color-mix(in srgb, var(--color-err) 14%, transparent);
+  --color-warn-soft: color-mix(in srgb, var(--color-warn) 14%, transparent);
+  --color-experimental-soft: color-mix(in srgb, var(--color-experimental) 14%, transparent);
+  --color-neutral-soft: color-mix(in srgb, var(--color-fg) 8%, transparent);
+
+  --text-eyebrow: 0.6875rem;
+  --text-hint: 0.75rem;
+  --text-body: 0.875rem;
+  --text-row: 0.9375rem;
+  --text-row-lg: 1.0625rem;
+  --text-title: 1.25rem;
+  --text-hero: 1.375rem;
+  --text-screen-title: 2.125rem;
 
   --font-display: "Outfit", system-ui, sans-serif;
-  --font-sans: "Inter", system-ui, sans-serif;
+  --font-body: "Inter", system-ui, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+
+  --tracking-wordmark: -0.03em;
+  --tracking-display: -0.02em;
+  --tracking-tight-1: -0.01em;
+
+  --radius-none: 0;
 }
 
 @layer base {
   :root {
     color-scheme: dark;
   }
+
   * {
     -webkit-tap-highlight-color: transparent;
   }
+
   html,
   body {
+    @apply bg-bg text-off-white font-body antialiased scheme-only-dark;
     width: 800px;
     height: 480px;
     margin: 0;
     overflow: hidden;
     overscroll-behavior: none;
-    font-family: var(--font-sans);
-    background: var(--color-bt-charcoal);
-    color: var(--color-bt-off-white);
   }
 }
-
-@utility bt-wordmark {
-  font-family: var(--font-display);
-  letter-spacing: -0.02em;
-}