@farming-labs/astro-theme 0.0.53 → 0.0.54

package/package.json

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

package/src/components/DocsContent.astro

@@ -101,8 +101,10 @@ const feedbackConfig = (() => {
   const defaults = {
     enabled: false,
     question: "How is this guide?",
+    placeholder: "Leave your feedback...",
     positiveLabel: "Good",
     negativeLabel: "Bad",
+    submitLabel: "Submit",
   };
   const feedback = config?.feedback;
   if (feedback === undefined || feedback === false) return defaults;
@@ -111,8 +113,10 @@ const feedbackConfig = (() => {
   return {
     enabled: feedback.enabled !== false,
     question: feedback.question ?? defaults.question,
+    placeholder: feedback.placeholder ?? defaults.placeholder,
     positiveLabel: feedback.positiveLabel ?? defaults.positiveLabel,
     negativeLabel: feedback.negativeLabel ?? defaults.negativeLabel,
+    submitLabel: feedback.submitLabel ?? defaults.submitLabel,
   };
 })();
 const feedbackEntry = data.entry ?? config?.entry ?? "docs";
@@ -247,7 +251,7 @@ const htmlWithoutFirstH1 = (data.html || "").replace(/<h1[^>]*>[\s\S]*?<\/h1>\s*
         <div class="fd-feedback-actions" role="group" aria-label={feedbackConfig.question}>
           <button
             type="button"
-            class="fd-page-action-btn"
+            class="fd-page-action-btn fd-feedback-choice"
             aria-pressed="false"
             data-feedback-button
             data-feedback-value="positive"
@@ -265,7 +269,7 @@ const htmlWithoutFirstH1 = (data.html || "").replace(/<h1[^>]*>[\s\S]*?<\/h1>\s*
           </button>
           <button
             type="button"
-            class="fd-page-action-btn"
+            class="fd-page-action-btn fd-feedback-choice"
             aria-pressed="false"
             data-feedback-button
             data-feedback-value="negative"
@@ -283,6 +287,62 @@ const htmlWithoutFirstH1 = (data.html || "").replace(/<h1[^>]*>[\s\S]*?<\/h1>\s*
           </button>
         </div>
       </div>
+      <div class="fd-feedback-form" hidden data-feedback-form>
+        <textarea
+          class="fd-feedback-input"
+          aria-label="Additional feedback"
+          placeholder={feedbackConfig.placeholder}
+          data-feedback-input
+        ></textarea>
+        <div class="fd-feedback-submit-row">
+          <button
+            type="button"
+            class="fd-page-action-btn fd-feedback-submit"
+            data-feedback-submit
+            disabled
+          >
+            <span class="fd-feedback-spinner" aria-hidden="true" hidden data-feedback-spinner></span>
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              aria-hidden="true"
+              hidden
+              data-feedback-check
+            >
+              <path
+                d="M20 6 9 17l-5-5"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            <span data-feedback-submit-label>{feedbackConfig.submitLabel}</span>
+          </button>
+          <p
+            class="fd-feedback-status"
+            data-status="success"
+            role="status"
+            aria-live="polite"
+            hidden
+            data-feedback-success
+          >
+            Thanks for the feedback.
+          </p>
+        </div>
+        <p
+          class="fd-feedback-status"
+          data-status="error"
+          role="status"
+          aria-live="polite"
+          hidden
+          data-feedback-error
+        >
+          Could not send feedback. Please try again.
+        </p>
+      </div>
     </section>
   )}
 </DocsPage>
@@ -310,6 +370,26 @@ const htmlWithoutFirstH1 = (data.html || "").replace(/<h1[^>]*>[\s\S]*?<\/h1>\s*
       var feedbackTitleVal = typeof feedbackTitle === "string" ? feedbackTitle : undefined;
       var feedbackDescriptionVal = typeof feedbackDescription === "string" ? feedbackDescription : undefined;
 
+      function emitFeedback(data) {
+        var firstError = null;
+
+        return Promise.resolve()
+          .then(function () {
+            if (typeof window !== "undefined" && typeof window.__fdOnFeedback__ === "function") {
+              return window.__fdOnFeedback__(data);
+            }
+          })
+          .catch(function (error) {
+            firstError = firstError || error;
+          })
+          .then(function () {
+            if (typeof window !== "undefined") {
+              window.dispatchEvent(new CustomEvent("fd:feedback", { detail: data }));
+            }
+            if (firstError) throw firstError;
+          });
+      }
+
       function init() {
         document.querySelectorAll("[data-copy-page]").forEach(function (btn) {
           btn.addEventListener("click", function () {
@@ -380,42 +460,130 @@ const htmlWithoutFirstH1 = (data.html || "").replace(/<h1[^>]*>[\s\S]*?<\/h1>\s*
           });
         });
 
-        document.querySelectorAll("[data-feedback-button]").forEach(function (btn) {
-          btn.addEventListener("click", function () {
-            var value = btn.getAttribute("data-feedback-value");
-            if (value !== "positive" && value !== "negative") return;
-
-            document.querySelectorAll("[data-feedback-button]").forEach(function (item) {
-              if (!(item instanceof HTMLElement)) return;
-              var selected = item.getAttribute("data-feedback-value") === value;
-              if (selected) item.setAttribute("data-selected", "true");
-              else item.removeAttribute("data-selected");
-              item.setAttribute("aria-pressed", String(selected));
-            });
+        document.querySelectorAll(".fd-feedback").forEach(function (section) {
+          if (!(section instanceof HTMLElement)) return;
+          if (section.dataset.feedbackInitialized === "true") return;
+          section.dataset.feedbackInitialized = "true";
 
-            var pathnameCurrent = window.location.pathname.replace(/\/$/, "") || "/";
-            var data = {
-              value: value,
-              title: feedbackTitleVal,
-              description: feedbackDescriptionVal,
-              url: window.location.href,
-              pathname: pathnameCurrent,
-              path: pathnameCurrent,
-              entry: feedbackEntryVal,
-              slug: feedbackSlugVal,
-              locale: feedbackLocaleVal,
-            };
-
-            try {
-              if (typeof window !== "undefined" && window.__fdOnFeedback__) {
-                window.__fdOnFeedback__(data);
+          var selectedValue = null;
+          var status = "idle";
+          var buttons = Array.prototype.slice.call(
+            section.querySelectorAll("[data-feedback-button]")
+          );
+          var form = section.querySelector("[data-feedback-form]");
+          var input = section.querySelector("[data-feedback-input]");
+          var submitButton = section.querySelector("[data-feedback-submit]");
+          var submitLabel = section.querySelector("[data-feedback-submit-label]");
+          var spinner = section.querySelector("[data-feedback-spinner]");
+          var check = section.querySelector("[data-feedback-check]");
+          var success = section.querySelector("[data-feedback-success]");
+          var error = section.querySelector("[data-feedback-error]");
+
+          function setStatus(nextStatus) {
+            status = nextStatus;
+
+            if (spinner) spinner.hidden = status !== "submitting";
+            if (check) check.hidden = status !== "submitted";
+            if (success) success.hidden = status !== "submitted";
+            if (error) error.hidden = status !== "error";
+            if (submitLabel) {
+              submitLabel.textContent =
+                status === "submitted"
+                    ? "Submitted"
+                    : submitLabel.getAttribute("data-default-label") || "Submit";
+            }
+
+            if (submitButton instanceof HTMLButtonElement) {
+              submitButton.disabled =
+                !selectedValue || status === "submitting" || status === "submitted";
+            }
+
+            buttons.forEach(function (button) {
+              if (button instanceof HTMLButtonElement) {
+                button.disabled = status === "submitting";
               }
-            } catch (_) {}
+            });
 
-            if (typeof window !== "undefined") {
-              window.dispatchEvent(new CustomEvent("fd:feedback", { detail: data }));
+            if (input instanceof HTMLTextAreaElement) {
+              input.disabled = status === "submitting";
+            }
+          }
+
+          if (submitLabel instanceof HTMLElement) {
+            submitLabel.setAttribute("data-default-label", submitLabel.textContent || "Submit");
+          }
+
+          if (form instanceof HTMLElement) {
+            form.hidden = true;
+          }
+          setStatus("idle");
+
+          function selectValue(value) {
+            selectedValue = value;
+            buttons.forEach(function (button) {
+              if (!(button instanceof HTMLElement)) return;
+              var selected = button.getAttribute("data-feedback-value") === value;
+              if (selected) button.setAttribute("data-selected", "true");
+              else button.removeAttribute("data-selected");
+              button.setAttribute("aria-pressed", String(selected));
+            });
+            if (form instanceof HTMLElement) {
+              form.hidden = false;
+            }
+            if (status !== "idle") {
+              setStatus("idle");
+            } else if (submitButton instanceof HTMLButtonElement) {
+              submitButton.disabled = false;
             }
+          }
+
+          buttons.forEach(function (btn) {
+            btn.addEventListener("click", function () {
+              var value = btn.getAttribute("data-feedback-value");
+              if (value !== "positive" && value !== "negative") return;
+              selectValue(value);
+            });
           });
+
+          if (input instanceof HTMLTextAreaElement) {
+            input.addEventListener("input", function () {
+              if (status !== "idle") setStatus("idle");
+            });
+          }
+
+          if (submitButton instanceof HTMLButtonElement) {
+            submitButton.addEventListener("click", function () {
+              if (!selectedValue || status === "submitting" || status === "submitted") return;
+
+              setStatus("submitting");
+
+              var pathnameCurrent = window.location.pathname.replace(/\/$/, "") || "/";
+              var data = {
+                value: selectedValue,
+                comment:
+                  input instanceof HTMLTextAreaElement && input.value.trim().length > 0
+                    ? input.value.trim()
+                    : undefined,
+                title: feedbackTitleVal,
+                description: feedbackDescriptionVal,
+                url: window.location.href,
+                pathname: pathnameCurrent,
+                path: pathnameCurrent,
+                entry: feedbackEntryVal,
+                slug: feedbackSlugVal,
+                locale: feedbackLocaleVal,
+              };
+
+              emitFeedback(data).then(
+                function () {
+                  setStatus("submitted");
+                },
+                function () {
+                  setStatus("error");
+                }
+              );
+            });
+          }
         });
       }
 

package/styles/colorful.css

@@ -318,3 +318,18 @@
 .fd-ai-floating-trigger .ask-ai-trigger:hover {
   box-shadow: 0 2px 30px rgba(180, 140, 20, 0.4);
 }
+
+/* ─── Feedback (colorful theme) ──────────────────────────────────── */
+
+.fd-feedback-input,
+.fd-feedback-submit {
+  border-radius: 0.5rem;
+}
+
+.fd-feedback-choice[data-selected="true"] {
+  background: color-mix(in srgb, var(--color-fd-primary) 12%, var(--color-fd-secondary));
+}
+
+.fd-feedback-status[data-status="success"] {
+  color: var(--color-fd-primary);
+}

package/styles/darksharp.css

@@ -222,3 +222,22 @@ code:not(pre code) {
 .fd-ai-fm-input-bar .fd-ai-floating-trigger .ask-ai-trigger:hover {
   transform: none;
 }
+
+/* ─── Feedback (darksharp theme) ─────────────────────────────────── */
+
+.fd-feedback-input,
+.fd-feedback-submit {
+  border-radius: 0.2rem !important;
+}
+
+.dark .fd-feedback-input {
+  background: hsl(0 0% 4%);
+}
+
+.dark .fd-feedback-choice[data-selected="true"] {
+  background: hsl(0 0% 8%);
+}
+
+.dark .fd-feedback-status[data-status="success"] {
+  color: hsl(0 0% 90%);
+}

package/styles/docs.css

@@ -1622,6 +1622,7 @@ html.dark pre.shiki {
 
 .fd-feedback {
   margin-top: 2rem;
+  margin-bottom: 1.25rem;
   padding-top: 1.25rem;
   border-top: 1px solid var(--color-fd-border);
 }
@@ -1649,7 +1650,118 @@ html.dark pre.shiki {
   flex-wrap: wrap;
 }
 
+.fd-feedback-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: 0.875rem;
+}
+
+.fd-feedback-form[hidden],
+.fd-feedback-spinner[hidden],
+.fd-feedback-status[hidden],
+.fd-feedback-submit svg[hidden] {
+  display: none !important;
+}
+
+.fd-feedback-choice[data-selected="true"] {
+  background: var(--color-fd-accent);
+  color: var(--color-fd-accent-foreground);
+  border-color: color-mix(in srgb, var(--color-fd-primary, currentColor) 65%, transparent);
+}
+
+.fd-feedback-input {
+  width: 100%;
+  min-height: 4.75rem;
+  resize: vertical;
+  padding: 0.875rem 1rem;
+  border: 1px solid
+    color-mix(in srgb, var(--color-fd-border) 78%, var(--color-fd-foreground) 22%);
+  border-radius: 0.5rem;
+  background: var(--color-fd-card, transparent);
+  color: var(--color-fd-foreground);
+  font: inherit;
+  line-height: 1.55;
+  outline: none;
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease,
+    background-color 150ms ease;
+}
+
+.fd-feedback-input::placeholder {
+  color: var(--color-fd-muted-foreground);
+}
+
+.fd-feedback-input:focus {
+  border-color: var(--color-fd-ring, var(--color-fd-primary, currentColor));
+  box-shadow: 0 0 0 1px var(--color-fd-ring, var(--color-fd-primary, currentColor));
+}
+
+.fd-feedback-submit-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: nowrap;
+  min-height: 2rem;
+}
+
+.fd-feedback-submit {
+  min-width: 7rem;
+  padding-inline: 0.875rem;
+  justify-content: center;
+}
+
+.fd-feedback-submit:disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+.fd-feedback-spinner {
+  width: 0.875rem;
+  height: 0.875rem;
+  border-radius: 9999px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  animation: fd-feedback-spin 0.8s linear infinite;
+}
+
+.fd-feedback-status {
+  margin: 0 !important;
+  font-size: 0.8125rem;
+  line-height: 1.35;
+  color: var(--color-fd-muted-foreground);
+}
+
+.fd-feedback-status[data-status="success"] {
+  display: inline-flex;
+  align-self: center;
+  align-items: center;
+  gap: 0.4rem;
+  min-height: 2rem;
+  color: color-mix(in srgb, var(--color-fd-primary) 85%, var(--color-fd-foreground));
+}
+
+.fd-feedback-status[data-status="error"] {
+  color: var(--color-fd-foreground);
+}
+
+@keyframes fd-feedback-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 @media (max-width: 640px) {
+  .fd-feedback-content {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .fd-feedback-submit-row {
+    flex-wrap: wrap;
+  }
+
   .fd-last-modified {
     width: 100%;
   }

package/styles/greentree.css

@@ -831,3 +831,18 @@ details > :not(summary) {
 .fd-sidebar::-webkit-scrollbar-track {
   background: transparent;
 }
+
+/* ─── Feedback (greentree theme) ─────────────────────────────────── */
+
+.fd-feedback-input,
+.fd-feedback-submit {
+  border-radius: 0.75rem;
+}
+
+.fd-feedback-choice[data-selected="true"] {
+  background: color-mix(in srgb, var(--color-fd-primary) 12%, var(--color-fd-secondary));
+}
+
+.fd-feedback-status[data-status="success"] {
+  color: var(--color-fd-primary);
+}

package/styles/pixel-border.css

@@ -765,3 +765,20 @@ code:not(pre code) {
 :root:not(.dark) .fd-ai-code-block code {
   color: #1f2937;
 }
+
+/* ─── Feedback (pixel-border theme) ──────────────────────────────── */
+
+.fd-feedback-input,
+.fd-feedback-submit {
+  border-radius: 0 !important;
+  box-shadow: 3px 3px 0 0 var(--color-fd-border);
+}
+
+.fd-feedback-choice[data-selected="true"] {
+  background: var(--color-fd-secondary);
+}
+
+.fd-feedback-status[data-status="success"] {
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  text-transform: uppercase;
+}