@farming-labs/svelte-theme 0.1.57 → 0.1.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/svelte-theme",
-  "version": "0.1.57",
+  "version": "0.1.59",
   "description": "Svelte UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "docs",
@@ -112,8 +112,8 @@
   "dependencies": {
     "gray-matter": "^4.0.3",
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.1.57",
-    "@farming-labs/svelte": "0.1.57"
+    "@farming-labs/docs": "0.1.59",
+    "@farming-labs/svelte": "0.1.59"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"

package/src/components/DocsPage.svelte

@@ -59,6 +59,49 @@
     });
   }
 
+  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);
+    });
+  }
+
   onMount(() => {
     scanHeadings();
     wireInteractive();
@@ -203,6 +246,91 @@
         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);
+      }
     });
   }
 </script>

package/styles/docs.css

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

@@ -863,6 +863,66 @@ code:not(pre code) {
   border-top: none !important;
 }
 
+/* ─── 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,