From 4f4992343ab493a9293457637befbcbffda24e45 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 7 May 2026 09:30:28 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20contextual=20co?=
 =?UTF-8?q?py-to-clipboard=20utility=20to=20os2.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added a "Copy" button to the terminal feed code block.
- Implemented hover and focus reveal using Tailwind group utilities.
- Created a robust copy function with clipboard fallback and visual feedback.
- Used inline SVGs to avoid external icon dependencies.
- Ensured keyboard accessibility with proper focus states and aria-labels.

Co-authored-by: rtech-technologies <254326487+rtech-technologies@users.noreply.github.com>
---
 .jules/palette.md |  3 +++
 os2.html          | 36 ++++++++++++++++++++++++++++++++++--
 2 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..880b995
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-05-07 - Contextual Copy Utility
+**Learning:** Using Tailwind's `group-hover` and `focus` utilities (e.g., `opacity-0 group-hover:opacity-100 focus:opacity-100`) allows for contextual actions like "Copy" buttons to remain hidden by default, preserving the clean terminal aesthetic, while ensuring they are immediately available to both mouse users and keyboard users upon interaction.
+**Action:** Implement similar reveal patterns for secondary actions to maintain a minimalist UI without sacrificing accessibility.
diff --git a/os2.html b/os2.html
index fb439ec..1e15005 100644
--- a/os2.html
+++ b/os2.html
@@ -84,8 +84,16 @@ <h4 class="text-lime-500 font-black text-xs uppercase mb-2">The Zest UI</h4>
                         </div>
                     </div>
                 </div>
-                <div class="code-window">
-                    <pre class="text-lime-500 text-xs leading-loose">
+                <div class="code-window group">
+                    <button
+                        onclick="copyCode(this)"
+                        aria-label="Copy code to clipboard"
+                        class="absolute top-4 right-4 p-2 bg-slate-900 border border-slate-700 text-slate-400 hover:text-white hover:bg-slate-800 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-all duration-200 flex items-center gap-2"
+                    >
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+                        <span class="text-[10px] font-black uppercase tracking-widest">Copy</span>
+                    </button>
+                    <pre id="system-init-code" class="text-lime-500 text-xs leading-loose">
 ; OS*2 SYSTEM_INIT
 move rdi 10          ; ALLOC_SOVEREIGNTY
 push rdi             ; SECURE_REGISTER
@@ -148,6 +156,30 @@ <h4 class="text-[10px] font-black text-slate-400 uppercase mb-6 tracking-widest"
     </footer>
 
     <script>
+        function copyCode(btn) {
+            const code = document.getElementById('system-init-code').innerText;
+            const originalContent = btn.innerHTML;
+            const fallbackCopy = (text) => {
+                const textArea = document.createElement("textarea");
+                textArea.value = text;
+                textArea.style.position = "fixed";
+                textArea.style.left = "-999999px";
+                document.body.appendChild(textArea);
+                textArea.select();
+                try { document.execCommand('copy'); } catch (err) {}
+                textArea.remove();
+            };
+
+            (navigator.clipboard && window.isSecureContext ? navigator.clipboard.writeText(code) : Promise.resolve().then(() => fallbackCopy(code)))
+            .then(() => {
+                btn.innerHTML = `
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-lime-500"><polyline points="20 6 9 17 4 12"/></svg>
+                    <span class="text-[10px] font-black uppercase tracking-widest text-lime-500">Copied!</span>
+                `;
+                setTimeout(() => btn.innerHTML = originalContent, 2000);
+            });
+        }
+
         async function checkAvailability() {
             const btn = document.getElementById('download-btn');
             const status = document.getElementById('system-status');