@farming-labs/astro-theme 0.1.58 → 0.1.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/astro-theme",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "description": "Astro UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "astro",
@@ -109,8 +109,8 @@
   },
   "dependencies": {
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.1.58",
-    "@farming-labs/astro": "0.1.58"
+    "@farming-labs/docs": "0.1.60",
+    "@farming-labs/astro": "0.1.60"
   },
   "peerDependencies": {
     "astro": ">=4.0.0"

package/src/components/DocsPage.astro

@@ -128,6 +128,7 @@ const localizedParentUrl = withLang(parentUrl);
 
 <script>
   let hoverLinkGlobalsBound = false;
+  let promptGlobalsBound = false;
 
   function setHoverLinkOpen(root, open) {
     if (!(root instanceof HTMLElement)) return;
@@ -225,6 +226,137 @@ const localizedParentUrl = withLang(parentUrl);
     document.addEventListener('focusin', closeOpenHoverLinks);
   }
 
+  async function fallbackCopyPromptText(text) {
+    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, open) {
+    if (!(root instanceof HTMLElement)) return;
+    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) {
+    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 bindPromptCards() {
+    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 (promptGlobalsBound) return;
+    promptGlobalsBound = true;
+
+    document.addEventListener('pointerdown', closeOpenPromptMenus);
+    document.addEventListener('focusin', closeOpenPromptMenus);
+  }
+
   function getItemOffset(depth) {
     if (depth <= 2) return 14;
     if (depth === 3) return 26;
@@ -236,6 +368,7 @@ const localizedParentUrl = withLang(parentUrl);
   }
 
   function initDocsPage() {
+    bindPromptCards();
     const container = document.querySelector('.fd-page-body');
     const tocList = document.getElementById('fd-toc-list');
     const tocAside = document.getElementById('fd-toc');

package/styles/docs.css

@@ -790,7 +790,8 @@ samp {
   display: none !important;
 }
 
-.fd-page-action-menu-item {
+.fd-page-action-menu-item,
+.fd-prompt-menu-item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -808,11 +809,6 @@ samp {
   transition: background 0.1s, color 0.1s;
 }
 
-.fd-page-action-menu-item:hover {
-  background: var(--color-fd-accent);
-  color: var(--color-fd-accent-foreground);
-}
-
 .fd-page-action-menu-label {
   flex: 1;
 }
@@ -828,6 +824,173 @@ samp {
   text-decoration: none !important;
 }
 
+/* ─── 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-page-action-menu-item:hover,
+.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

@@ -780,6 +780,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,