fix(showcase/shell-docs): copy-button surfaces clipboard failure

- Replace the silent empty `catch {}` with a proper error state:
  clipboard write failures now set state to "error", surface a
  "Copy blocked" label for 2s, and log the original error so devs
  can debug (permissions, insecure context, etc.) instead of the
  button failing invisibly.
- Collapse the two booleans into a single `CopyState` so idle/copied/
  error styling and aria-label stay in sync.

Author: jpr5

showcase/shell-docs/src/components/copy-button.tsx

@@ -5,8 +5,18 @@
 
 import React, { useState } from "react";
 
+type CopyState = "idle" | "copied" | "error";
+
 export function CopyButton({ text }: { text: string }) {
-  const [copied, setCopied] = useState(false);
+  const [state, setState] = useState<CopyState>("idle");
+
+  const copied = state === "copied";
+  const error = state === "error";
+
+  let label: string;
+  if (copied) label = "Copied";
+  else if (error) label = "Copy blocked";
+  else label = "Copy";
 
   return (
     <button
@@ -15,27 +25,40 @@ export function CopyButton({ text }: { text: string }) {
         e.preventDefault();
         try {
           await navigator.clipboard.writeText(text);
-          setCopied(true);
-          setTimeout(() => setCopied(false), 1500);
-        } catch {
-          // noop — clipboard blocked by browser
+          setState("copied");
+          setTimeout(() => setState("idle"), 1500);
+        } catch (err) {
+          // Clipboard blocked (permissions, insecure context, etc.) — surface
+          // the failure to the user so they know the button didn't work, and
+          // log enough for devs to debug rather than silently swallowing.
+          console.warn("[copy-button] clipboard write failed", err);
+          setState("error");
+          setTimeout(() => setState("idle"), 2000);
         }
       }}
-      aria-label={copied ? "Copied" : "Copy code"}
+      aria-label={label}
       style={{
         padding: "2px 8px",
         fontSize: "10px",
         lineHeight: 1.2,
         border: "1px solid var(--border)",
         borderRadius: "4px",
-        background: copied ? "var(--accent-light)" : "var(--bg-surface)",
-        color: copied ? "var(--accent)" : "var(--text-muted)",
+        background: copied
+          ? "var(--accent-light)"
+          : error
+            ? "var(--bg-elevated)"
+            : "var(--bg-surface)",
+        color: copied
+          ? "var(--accent)"
+          : error
+            ? "var(--text)"
+            : "var(--text-muted)",
         cursor: "pointer",
         fontFamily: "inherit",
         transition: "background 120ms, color 120ms",
       }}
     >
-      {copied ? "Copied" : "Copy"}
+      {label}
     </button>
   );
 }