From 1b72211607a67afd50f55a886f6e01f0195ebd07 Mon Sep 17 00:00:00 2001
From: A-PachecoT <andre.pacheco.t@uni.pe>
Date: Fri, 22 May 2026 12:57:47 -0500
Subject: [PATCH] fix(command-palette): eager-inject styles so trigger renders
 styled on first paint [0.6.1]
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CommandPaletteTrigger flashed unstyled until the palette was opened once,
because the singleton <style id="cp-styles"> injection was inside
PaletteSurface's mount effect — which only fires on open=true. The trigger
pill mounts long before then.

Fix: call ensureCommandPaletteStyles() at module-import time (after
COMMAND_PALETTE_CSS is initialized — avoids TDZ — behind the
`typeof document` guard inside the helper, so SSR stays safe).

Trigger now renders styled from the first paint regardless of palette state.
21/21 palette tests still pass.
---
 CHANGELOG.md                                      |  6 ++++++
 package.json                                      |  2 +-
 src/components/command-palette/CommandPalette.tsx | 10 ++++++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 800821d..20ce82f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to `@cofoundy/ui` are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.6.1] — 2026-05-22
+
+### Fixed
+
+- **`CommandPaletteTrigger` flashed unstyled before the palette was first opened.** The singleton stylesheet (`<style id="cp-styles">`) was injected inside `PaletteSurface`'s mount effect, which only runs when `open=true`. The trigger pill mounts long before that, so its `.cp-trigger` rules didn't exist on first paint. Moved the injection to module-import time (after `COMMAND_PALETTE_CSS` is initialized, behind a `typeof document` guard so SSR stays safe). The trigger now renders styled from the first render, regardless of whether the palette has ever been opened.
+
 ## [0.6.0] — 2026-05-22
 
 ### Added
diff --git a/package.json b/package.json
index 76e9709..c8d92fa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cofoundy/ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "private": true,
   "type": "module",
   "main": "./src/index.ts",
diff --git a/src/components/command-palette/CommandPalette.tsx b/src/components/command-palette/CommandPalette.tsx
index a8f8042..d713c6a 100644
--- a/src/components/command-palette/CommandPalette.tsx
+++ b/src/components/command-palette/CommandPalette.tsx
@@ -250,6 +250,9 @@ function ensureCommandPaletteStyles() {
   document.head.appendChild(el);
   stylesInjected = true;
 }
+// NOTE: the eager-inject call lives at the bottom of this file, after
+// COMMAND_PALETTE_CSS is initialized. Calling it here would hit a TDZ since
+// the const-style template literal isn't bound yet at module-evaluation top.
 
 /**
  * Body scroll-lock counter. Composes safely with sibling modals — the lock
@@ -1806,4 +1809,11 @@ const COMMAND_PALETTE_CSS = `
 .cp-kbd-meta { font-size: 11px; margin-right: 1px; }
 `;
 
+// Eager-inject the singleton stylesheet on client-side module import so
+// `CommandPaletteTrigger` renders styled even before the palette has ever
+// opened. Without this, the trigger pill loses its `.cp-trigger` rules until
+// the user fires Cmd+K once — every consumer's header pill flashes unstyled
+// on first paint. SSR-safe via the `typeof document` guard inside the helper.
+if (typeof document !== 'undefined') ensureCommandPaletteStyles();
+
 export default CommandPalette;