🎨 Palette: Add "Copy to Clipboard" utility to OS*2 code blocks

.jules/palette.md

@@ -0,0 +1,3 @@
+## 2026-05-22 - Code Block Copy Utility
+**Learning:** For terminal-inspired UIs, code block interaction is a high-value micro-UX. Using Tailwind's `group` and `group-hover` allows for a clean default UI that stays interactive. Providing immediate visual feedback (text change + color swap) is more effective than a passive "toast" notification in this aesthetic.
+**Action:** Use `opacity-0 group-hover:opacity-100 focus:opacity-100` for contextual actions. Always provide a fallback for `navigator.clipboard` using a temporary `textarea` and `execCommand('copy')` to ensure reliability in all environments.

os2.html

@@ -84,7 +84,14 @@ <h4 class="text-lime-500 font-black text-xs uppercase mb-2">The Zest UI</h4>
                         </div>
                     </div>
                 </div>
-                <div class="code-window">
+                <div class="code-window group">
+                    <button
+                        onclick="copyCode(this)"
+                        class="absolute top-4 right-4 px-3 py-1 bg-slate-800 text-[10px] font-black uppercase tracking-widest text-slate-400 hover:text-white border border-slate-700 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-all z-10"
+                        aria-label="Copy code to clipboard"
+                    >
+                        Copy
+                    </button>
                     <pre class="text-lime-500 text-xs leading-loose">
 ; OS*2 SYSTEM_INIT
 move rdi 10          ; ALLOC_SOVEREIGNTY
@@ -148,6 +155,36 @@ <h4 class="text-[10px] font-black text-slate-400 uppercase mb-6 tracking-widest"
     </footer>
 
     <script>
+        function copyCode(btn) {
+            const code = btn.nextElementSibling.innerText;
+            const originalText = btn.innerText;
+
+            const handleSuccess = () => {
+                btn.innerText = "Copied!";
+                btn.classList.add('!bg-lime-500', '!text-black', '!border-lime-500');
+                setTimeout(() => {
+                    btn.innerText = originalText;
+                    btn.classList.remove('!bg-lime-500', '!text-black', '!border-lime-500');
+                }, 2000);
+            };
+
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                navigator.clipboard.writeText(code).then(handleSuccess);
+            } else {
+                const textArea = document.createElement("textarea");
+                textArea.value = code;
+                document.body.appendChild(textArea);
+                textArea.select();
+                try {
+                    document.execCommand('copy');
+                    handleSuccess();
+                } catch (err) {
+                    console.error('Fallback copy failed', err);
+                }
+                document.body.removeChild(textArea);
+            }
+        }
+
         async function checkAvailability() {
             const btn = document.getElementById('download-btn');
             const status = document.getElementById('system-status');