Brand colours on the marks; round the app's corners; move the lights in

Simple Icons publishes each brand's own hex next to its glyph, and the
build was throwing it away. Tiles now carry it - Gmail red, Drive blue,
Chat green, Gemini violet - and the glyph is drawn black or white by the
tile's perceived brightness, since brand colours are picked to look right
rather than to carry a white mark. GitHub and Notion are near-black,
Snapchat is pure yellow, and a fixed white glyph loses one end of that.

An app's right corners are now rounded on its own layer. The container's
rounded-xl could never have clipped them: an app is a native view sitting
on top, not something the shell lays out, so it kept square corners and
overhung the curve. Only the right pair - the left edge butts against the
nav, and rounding it would notch the middle of the window.

The traffic lights move to (26, 24) and the drag strip deepens to match,
so they sit inside the window's margin instead of against its corner.

Adds Gemini, Claude, ChatGPT, Linear, ClickUp, HubSpot, Shopify and
Cloudflare to the host table.

src/App.tsx

@@ -17,6 +17,7 @@ export default function App() {
   const [theme, setTheme] = useAppearance("system");
   const [unread, setUnread] = useState<Record<string, number>>({});
   const [fullscreen, setFullscreen] = useState(false);
+  const fullscreenRef = useRef(false);
   const [backdrop, setBackdrop] = useState<string | null>(null);
 
   const stageRef = useRef<HTMLDivElement>(null);
@@ -34,7 +35,11 @@ export default function App() {
      it and gives the room back. */
   useEffect(() => {
     const w = getCurrentWindow();
-    const check = () => void w.isFullscreen().then(setFullscreen);
+    const check = () =>
+      void w.isFullscreen().then((f) => {
+        fullscreenRef.current = f;
+        setFullscreen(f);
+      });
     check();
     const un = w.onResized(check);
     return () => {
@@ -62,7 +67,9 @@ export default function App() {
     const el = stageRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
-    void api.setStage(r.x, r.y, r.width, r.height);
+    // The radius goes with it: an app is a native view, so the container's
+    // rounded corners cannot clip it and its own layer has to be told.
+    void api.setStage(r.x, r.y, r.width, r.height, fullscreenRef.current ? 0 : 12);
   }, []);
 
   useLayoutEffect(() => {
@@ -87,6 +94,10 @@ export default function App() {
     void api.bootstrap();
   }, [config, report]);
 
+  useEffect(() => {
+    report();
+  }, [fullscreen, report]);
+
   useEffect(() => {
     if (activeId) void api.setActive(activeId);
   }, [activeId]);