feat: sync package manager selection across all install/copy blocks on page

.gitignore

@@ -0,0 +1,24 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

src/components/docs/ComponentPreview.astro

@@ -289,13 +289,40 @@ const normalizedCode = displayCode
           });
         }
 
+        // Apply stored preference on init (sync with other blocks on page)
+        const PM_STORAGE_KEY = "bearnie-pm";
+        if (pmTabs.length > 0) {
+          try {
+            const stored = sessionStorage.getItem(PM_STORAGE_KEY);
+            if (stored && Array.from(pmTabs).some((t) => t.getAttribute("data-pm-tab") === stored)) {
+              setActivePmTab(stored);
+            }
+          } catch (_) {}
+        }
+
         pmTabs.forEach((tab) => {
           tab.addEventListener("click", () => {
             const value = tab.getAttribute("data-pm-tab");
-            if (value) setActivePmTab(value);
+            if (value) {
+              setActivePmTab(value);
+              try {
+                sessionStorage.setItem(PM_STORAGE_KEY, value);
+                document.dispatchEvent(new CustomEvent("bearnie-pm-change", { detail: value }));
+              } catch (_) {}
+            }
           });
         });
 
+        // Sync when user selects a PM in another block on the page
+        if (pmTabs.length > 0) {
+          document.addEventListener("bearnie-pm-change", (e: Event) => {
+            const value = (e as CustomEvent<string>).detail;
+            if (Array.from(pmTabs).some((t) => t.getAttribute("data-pm-tab") === value)) {
+              setActivePmTab(value);
+            }
+          });
+        }
+
         // Copy functionality
         copyButtons.forEach((copyButton) => {
           const copyIcon = copyButton.querySelector("[data-copy-icon]");

src/components/docs/InstallTabs.astro

@@ -87,6 +87,8 @@ const packageManagers = type === "create"
 </div>
 
 <script>
+  const PM_STORAGE_KEY = "bearnie-pm";
+
   function initInstallTabs() {
     document.querySelectorAll("[data-install-tabs]").forEach((container) => {
       if (container.hasAttribute("data-initialized")) return;
@@ -117,13 +119,35 @@ const packageManagers = type === "create"
         });
       }
 
+      // Apply stored preference on init (so all blocks show same PM)
+      try {
+        const stored = sessionStorage.getItem(PM_STORAGE_KEY);
+        if (stored && Array.from(pmTabs).some((t) => t.getAttribute("data-pm-tab") === stored)) {
+          setActivePmTab(stored);
+        }
+      } catch (_) {}
+
       pmTabs.forEach((tab) => {
         tab.addEventListener("click", () => {
           const value = tab.getAttribute("data-pm-tab");
-          if (value) setActivePmTab(value);
+          if (value) {
+            setActivePmTab(value);
+            try {
+              sessionStorage.setItem(PM_STORAGE_KEY, value);
+              document.dispatchEvent(new CustomEvent("bearnie-pm-change", { detail: value }));
+            } catch (_) {}
+          }
         });
       });
 
+      // Sync when user selects a PM in another block on the page
+      document.addEventListener("bearnie-pm-change", (e: Event) => {
+        const value = (e as CustomEvent<string>).detail;
+        if (Array.from(pmTabs).some((t) => t.getAttribute("data-pm-tab") === value)) {
+          setActivePmTab(value);
+        }
+      });
+
       // Copy functionality
       copyButton?.addEventListener("click", async () => {
         const visiblePanel = container.querySelector("[data-pm-panel]:not(.hidden)");