@farming-labs/nuxt-theme 0.1.58 → 0.1.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/nuxt-theme",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "description": "Nuxt/Vue UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "docs",
@@ -81,7 +81,7 @@
   },
   "dependencies": {
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.1.58"
+    "@farming-labs/docs": "0.1.60"
   },
   "peerDependencies": {
     "nuxt": ">=3.0.0",

package/src/components/DocsPage.vue

@@ -88,6 +88,48 @@ function closeOpenHoverLinks(event: Event) {
   });
 }
 
+async function fallbackCopyPromptText(text: string): Promise<boolean> {
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.top = "0";
+  textarea.style.left = "0";
+  textarea.style.opacity = "0";
+  textarea.style.pointerEvents = "none";
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+
+  let copied = false;
+  try {
+    copied = document.execCommand("copy");
+  } catch {
+    copied = false;
+  } finally {
+    document.body.removeChild(textarea);
+  }
+
+  return copied;
+}
+
+function setPromptMenuOpen(root: HTMLElement, open: boolean) {
+  const trigger = root.querySelector("[data-prompt-trigger]");
+  const menu = root.querySelector("[data-prompt-menu]");
+  if (!(trigger instanceof HTMLElement) || !(menu instanceof HTMLElement)) return;
+
+  trigger.setAttribute("aria-expanded", String(open));
+  menu.hidden = !open;
+}
+
+function closeOpenPromptMenus(event: Event) {
+  document.querySelectorAll("[data-prompt-dropdown]").forEach((root) => {
+    if (!(root instanceof HTMLElement)) return;
+    if (event.target instanceof Node && root.contains(event.target)) return;
+    setPromptMenuOpen(root, false);
+  });
+}
+
 function wireInteractive() {
   requestAnimationFrame(() => {
     document.querySelectorAll(".fd-copy-btn").forEach((btn) => {
@@ -216,6 +258,91 @@ function wireInteractive() {
       document.addEventListener("pointerdown", closeOpenHoverLinks);
       document.addEventListener("focusin", closeOpenHoverLinks);
     }
+
+    document.querySelectorAll("[data-prompt-card]").forEach((root) => {
+      if (!(root instanceof HTMLElement)) return;
+      if (root.dataset.fdPromptBound === "true") return;
+      root.dataset.fdPromptBound = "true";
+
+      const promptTextNode = root.querySelector("[data-prompt-text]");
+      const promptText = promptTextNode?.textContent?.trim() ?? "";
+
+      const copyButton = root.querySelector("[data-prompt-copy]");
+      if (copyButton instanceof HTMLButtonElement && promptText) {
+        copyButton.addEventListener("click", async () => {
+          const defaultIcon = copyButton.querySelector(".fd-prompt-action-icon");
+          const copiedIcon = copyButton.querySelector(".fd-prompt-action-icon-copied");
+          const label = copyButton.querySelector("[data-prompt-copy-label]");
+          const copiedLabel = label?.getAttribute("data-prompt-copy-label") ?? "Copied";
+          const defaultLabel =
+            label?.getAttribute("data-prompt-default-label") ??
+            label?.textContent ??
+            "Copy prompt";
+
+          let copied = false;
+          try {
+            if (navigator.clipboard?.writeText) {
+              await navigator.clipboard.writeText(promptText);
+              copied = true;
+            } else {
+              copied = await fallbackCopyPromptText(promptText);
+            }
+          } catch {
+            copied = await fallbackCopyPromptText(promptText);
+          }
+
+          if (!copied || !(label instanceof HTMLElement)) return;
+
+          copyButton.dataset.copied = "true";
+          label.textContent = copiedLabel;
+          if (defaultIcon instanceof HTMLElement) defaultIcon.hidden = true;
+          if (copiedIcon instanceof HTMLElement) copiedIcon.hidden = false;
+
+          window.setTimeout(() => {
+            copyButton.dataset.copied = "false";
+            label.textContent = defaultLabel;
+            if (defaultIcon instanceof HTMLElement) defaultIcon.hidden = false;
+            if (copiedIcon instanceof HTMLElement) copiedIcon.hidden = true;
+          }, 2000);
+        });
+      }
+
+      const directOpen = root.querySelector("[data-prompt-open-direct]");
+      if (directOpen instanceof HTMLButtonElement && promptText) {
+        directOpen.addEventListener("click", () => {
+          const template = directOpen.getAttribute("data-url-template");
+          if (!template) return;
+          const url = template.replace(/\{prompt\}/g, encodeURIComponent(promptText));
+          window.open(url, "_blank", "noopener,noreferrer");
+        });
+      }
+
+      const dropdown = root.querySelector("[data-prompt-dropdown]");
+      const trigger = root.querySelector("[data-prompt-trigger]");
+      if (dropdown instanceof HTMLElement && trigger instanceof HTMLButtonElement) {
+        trigger.addEventListener("click", () => {
+          const isOpen = trigger.getAttribute("aria-expanded") === "true";
+          setPromptMenuOpen(dropdown, !isOpen);
+        });
+      }
+
+      root.querySelectorAll("[data-prompt-open-provider]").forEach((providerButton) => {
+        if (!(providerButton instanceof HTMLButtonElement) || !promptText) return;
+        providerButton.addEventListener("click", () => {
+          const template = providerButton.getAttribute("data-url-template");
+          if (!template) return;
+          const url = template.replace(/\{prompt\}/g, encodeURIComponent(promptText));
+          window.open(url, "_blank", "noopener,noreferrer");
+          if (dropdown instanceof HTMLElement) setPromptMenuOpen(dropdown, false);
+        });
+      });
+    });
+
+    if (document.documentElement.dataset.fdPromptGlobalBound !== "true") {
+      document.documentElement.dataset.fdPromptGlobalBound = "true";
+      document.addEventListener("pointerdown", closeOpenPromptMenus);
+      document.addEventListener("focusin", closeOpenPromptMenus);
+    }
   });
 }
 

package/styles/docs.css

@@ -1002,6 +1002,189 @@ samp {
   color: var(--color-fd-foreground);
 }
 
+/* ─── Prompt Cards ─────────────────────────────────────────────────── */
+
+.fd-prompt {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+  margin: 1.25rem 0;
+  padding: 1rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.75rem;
+  background: color-mix(in srgb, var(--color-fd-card) 78%, transparent);
+}
+
+.fd-prompt-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.fd-prompt-icon,
+.fd-prompt-action-icon,
+.fd-prompt-menu-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.fd-prompt-icon {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid color-mix(in srgb, var(--color-fd-border) 80%, transparent);
+  background: color-mix(in srgb, var(--color-fd-background) 55%, transparent);
+  color: var(--color-fd-foreground);
+}
+
+.fd-prompt-icon svg,
+.fd-prompt-action-icon svg,
+.fd-prompt-menu-icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.fd-prompt-copy {
+  min-width: 0;
+}
+
+.fd-prompt-title {
+  margin: 0;
+  color: var(--color-fd-foreground);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.fd-prompt-description {
+  margin: 0.25rem 0 0;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.875rem;
+  line-height: 1.55;
+}
+
+.fd-prompt-body {
+  margin: 0;
+  padding: 0.875rem 1rem;
+  border-radius: 0.625rem;
+  border: 1px solid color-mix(in srgb, var(--color-fd-border) 82%, transparent);
+  background: color-mix(in srgb, var(--color-fd-background) 45%, transparent);
+  overflow-x: auto;
+}
+
+.fd-prompt-body > pre.fd-prompt-code {
+  margin: 0;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: var(--color-fd-foreground);
+  font-size: 0.875rem;
+  line-height: 1.65;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(
+    --fd-font-mono,
+    ui-monospace,
+    "SF Mono",
+    SFMono-Regular,
+    Menlo,
+    Consolas,
+    monospace
+  );
+}
+
+.fd-prompt-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.fd-prompt-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4375rem;
+  min-height: 2rem;
+  padding: 0.375rem 0.75rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.375rem;
+  background: var(--color-fd-secondary);
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+}
+
+.fd-prompt-action-btn:hover {
+  color: var(--color-fd-accent-foreground);
+  background: var(--color-fd-accent);
+}
+
+.fd-prompt-action-btn[data-copied="true"] {
+  color: var(--color-fd-foreground);
+}
+
+.fd-prompt-action-icon-copied[hidden] {
+  display: none !important;
+}
+
+.fd-prompt-dropdown {
+  position: relative;
+}
+
+.fd-prompt-menu {
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  right: 0;
+  z-index: 50;
+  min-width: 220px;
+  padding: 0.375rem;
+  background: var(--color-fd-popover, var(--color-fd-background));
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 24px hsl(0 0% 0% / 0.15);
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.fd-prompt-menu[hidden] {
+  display: none !important;
+}
+
+.fd-prompt-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.35rem 0.625rem;
+  font-size: 0.8125rem;
+  font-weight: 400;
+  color: var(--color-fd-foreground);
+  background: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s, color 0.1s;
+}
+
+.fd-prompt-menu-item:hover {
+  background: var(--color-fd-accent);
+  color: var(--color-fd-accent-foreground);
+}
+
+.fd-prompt-menu-label {
+  flex: 1;
+}
+
 /* ─── Theme Toggle ───────────────────────────────────────────────────── */
 
 .fd-theme-toggle {

package/styles/pixel-border.css

@@ -781,6 +781,66 @@ code:not(pre code) {
   color: #1f2937;
 }
 
+/* ─── Prompt (pixel-border theme) ──────────────────────────────── */
+
+.fd-prompt {
+  border-radius: 0 !important;
+  border: 1px solid var(--color-fd-border, #262626) !important;
+  background: var(--color-fd-card, var(--color-fd-background)) !important;
+  box-shadow: 4px 4px 0 0 var(--color-fd-border, #262626) !important;
+}
+
+.fd-prompt-body {
+  border-radius: 0 !important;
+  border-top: 1px solid var(--color-fd-border, #262626) !important;
+  background: var(--color-fd-background, #0c0c0c) !important;
+}
+
+.fd-prompt-action-btn {
+  text-transform: uppercase !important;
+  box-shadow: 2px 2px 0 0 var(--color-fd-border, #262626) !important;
+  font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
+  border-radius: 0 !important;
+  font-size: 0.75rem !important;
+  letter-spacing: 0.03em !important;
+  background: var(--color-fd-background) !important;
+  color: var(--color-fd-foreground) !important;
+  border: 1px solid var(--color-fd-border) !important;
+}
+
+.fd-prompt-action-btn:hover {
+  background: var(--color-fd-muted) !important;
+  color: var(--color-fd-foreground) !important;
+}
+
+.fd-prompt-menu {
+  border-radius: 0 !important;
+  box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%)), 0 4px 24px hsl(0 0% 0% / 0.5) !important;
+  background: var(--color-fd-popover) !important;
+  border: 2px solid var(--color-fd-border) !important;
+  padding: 0.375rem !important;
+}
+
+.fd-prompt-menu-item {
+  border-radius: 0 !important;
+  font-size: 0.8rem !important;
+  font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.03em !important;
+  color: var(--color-fd-popover-foreground) !important;
+  background: transparent !important;
+  border-top: 1px solid var(--color-fd-border) !important;
+}
+
+.fd-prompt-menu-item:first-child {
+  border-top: none !important;
+}
+
+.fd-prompt-menu-item:hover {
+  background: var(--color-fd-muted) !important;
+  color: var(--color-fd-foreground) !important;
+}
+
 /* ─── Feedback (pixel-border theme) ──────────────────────────────── */
 
 .fd-feedback-input,