2026-06-01 16:30:29 +02:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
2026-07-04 09:07:49 +02:00
< link rel = "icon" href = "/favicon.ico" sizes = "32x32" / >
< link rel = "icon" type = "image/svg+xml" href = "/favicon.svg" / >
< link rel = "apple-touch-icon" href = "/apple-touch-icon.png" / >
< title > PCBJam - KiCad demo< / title >
comments-ux: figma bubble pins, floating panel, seen/reactions/mentions UI, theme follow (0001 A–E + 0002)
- GAL pin = one closed polygon: round body, squared-off bottom-left corner
ON the anchor; PIN gains unread (accent ring); tuner knobs; shipped
defaults r9/ring4/alpha.9. DOM hit/highlight sized+offset from a LIVE
pin-geometry radius store the tuner feeds.
- Floating comments panel: draggable (shared useDraggablePanel with
always-onscreen restore; overlay FAB retrofitted), collapsible to header,
header carries add/show-hide/mark-all; unread badges (rose on mention).
- Reactions (emoji-mart lazy, quick-row) + @-mention autocomplete
(MentionInput; backend roster with presence/author fallback).
- Theme: ?theme= > storage > OS, no-flash boot, toggles (HomePage + overlay
View row), boot-seeded pcbjam-dark schematic colors + kicadSetColorTheme /
kicadSetDarkChrome bridges (canvas + wx chrome live flip), light/dark
variants across all overlay surfaces.
- e2e: panel/seen/reactions/mentions/theme specs + resize-spec geometry;
bumps pcbjam-shared (flat-key seen/reactions + listCollaborators) and
wxwidgets (dark chrome) pointers.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HLwn1toiNKi1MgxGKnZTes
2026-07-24 13:21:22 +02:00
<!-- No - flash theme boot (comments - ux 0002): ?theme= (platform hand - off,
persisted) > localStorage > OS preference, applied before first paint.
Keep the key + precedence in sync with src/lib/theme.ts. -->
< script >
(function () {
try {
var p = new URLSearchParams(location.search).get("theme");
var t = p === "light" || p === "dark" ? p : null;
if (t) localStorage.setItem("pcbjam-theme", t);
else t = localStorage.getItem("pcbjam-theme");
if (t !== "light" & & t !== "dark") {
t = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
document.documentElement.classList.toggle("dark", t === "dark");
} catch (e) {
/* storage/matchMedia unavailable — stay light */
}
})();
< / script >
2026-07-04 09:07:49 +02:00
< meta
name="description"
content="Early-access alpha of PCBJam — KiCad running in your browser. Open the example boards or your own KiCad project. No install, nothing uploaded."
/>
<!-- OG/Twitter URLs must be absolute for link - preview crawlers; this page
only ships at demo.pcbjam.com, so they are hardcoded. -->
< meta property = "og:type" content = "website" / >
< meta property = "og:site_name" content = "PCBJam" / >
< meta property = "og:title" content = "PCBJam - KiCad demo" / >
< meta
property="og:description"
content="Early-access alpha of PCBJam — KiCad running in your browser. Open the example boards or your own KiCad project. No install, nothing uploaded."
/>
< meta property = "og:url" content = "https://demo.pcbjam.com/" / >
< meta property = "og:image" content = "https://demo.pcbjam.com/og/og-demo.png" / >
< meta name = "twitter:card" content = "summary_large_image" / >
< meta name = "twitter:title" content = "PCBJam - KiCad demo" / >
< meta
name="twitter:description"
content="Early-access alpha of PCBJam — KiCad running in your browser. Open the example boards or your own KiCad project. No install, nothing uploaded."
/>
< meta name = "twitter:image" content = "https://demo.pcbjam.com/og/og-demo.png" / >
2026-06-01 16:30:29 +02:00
< / head >
< body >
< div id = "root" > < / div >
< script type = "module" src = "/src/main.tsx" > < / script >
< / body >
< / html >
