@farming-labs/svelte-theme 0.0.53 → 0.0.55

package/package.json

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

package/src/components/DocsContent.svelte

@@ -13,6 +13,8 @@
   let copyLabel = $state("Copy page");
   let copied = $state(false);
   let selectedFeedback = $state(null);
+  let feedbackComment = $state("");
+  let feedbackStatus = $state("idle");
 
   let titleSuffix = $derived(
     config?.metadata?.titleTemplate
@@ -122,12 +124,17 @@
   );
   let showActionsAbove = $derived(pageActionsPosition === "above-title" && showPageActions);
   let showActionsBelow = $derived(pageActionsPosition === "below-title" && showPageActions);
+  let feedbackPathKey = $derived(
+    `${data.locale ?? ""}:${data.entry ?? config?.entry ?? "docs"}:${data.slug ?? ""}`
+  );
   let feedbackConfig = $derived.by(() => {
     const defaults = {
       enabled: false,
       question: "How is this guide?",
+      placeholder: "Leave your feedback...",
       positiveLabel: "Good",
       negativeLabel: "Bad",
+      submitLabel: "Submit",
       onFeedback: undefined,
     };
 
@@ -137,12 +144,21 @@
     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,
       onFeedback: typeof feedback.onFeedback === "function" ? feedback.onFeedback : undefined,
     };
   });
 
+  $effect(() => {
+    feedbackPathKey;
+    selectedFeedback = null;
+    feedbackComment = "";
+    feedbackStatus = "idle";
+  });
+
   function handleCopyPage() {
     let text = "";
     if (data.rawMarkdown && typeof data.rawMarkdown === "string" && data.rawMarkdown.length > 0) {
@@ -191,9 +207,7 @@
     closeDropdown();
   }
 
-  function handleFeedback(value) {
-    selectedFeedback = value;
-
+  function buildFeedbackPayload() {
     const pathname =
       typeof window !== "undefined"
         ? window.location.pathname.replace(/\/$/, "") || "/"
@@ -201,8 +215,9 @@
           ? `/${data.entry ?? config?.entry ?? "docs"}/${data.slug}`
           : `/${data.entry ?? config?.entry ?? "docs"}`;
 
-    const payload = {
-      value,
+    return {
+      value: selectedFeedback,
+      comment: feedbackComment.trim() ? feedbackComment.trim() : undefined,
       title: data.title,
       description: data.description,
       url: typeof window !== "undefined" ? window.location.href : pathname,
@@ -212,21 +227,50 @@
       slug: data.slug ?? "",
       locale: data.locale,
     };
+  }
+
+  async function emitFeedback(payload) {
+    let firstError = null;
 
     try {
-      feedbackConfig.onFeedback?.(payload);
-    } catch {}
+      await feedbackConfig.onFeedback?.(payload);
+    } catch (error) {
+      firstError ??= error;
+    }
 
     try {
       const docsWindow = typeof window !== "undefined" ? window : undefined;
       if (docsWindow && typeof docsWindow.__fdOnFeedback__ === "function") {
-        docsWindow.__fdOnFeedback__(payload);
+        await docsWindow.__fdOnFeedback__(payload);
       }
-    } catch {}
+    } catch (error) {
+      firstError ??= error;
+    }
 
     if (typeof window !== "undefined") {
       window.dispatchEvent(new CustomEvent("fd:feedback", { detail: payload }));
     }
+
+    if (firstError) throw firstError;
+  }
+
+  function handleFeedback(value) {
+    selectedFeedback = value;
+    if (feedbackStatus !== "idle") feedbackStatus = "idle";
+  }
+
+  async function submitFeedback() {
+    if (!selectedFeedback || feedbackStatus === "submitting" || feedbackStatus === "submitted") {
+      return;
+    }
+
+    try {
+      feedbackStatus = "submitting";
+      await emitFeedback(buildFeedbackPayload());
+      feedbackStatus = "submitted";
+    } catch {
+      feedbackStatus = "error";
+    }
   }
 
   function handleClickOutside(e) {
@@ -411,9 +455,10 @@
             <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={selectedFeedback === "positive"}
                 data-selected={selectedFeedback === "positive" ? "true" : undefined}
+                disabled={feedbackStatus === "submitting"}
                 onclick={() => handleFeedback("positive")}
               >
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
@@ -429,9 +474,10 @@
               </button>
               <button
                 type="button"
-                class="fd-page-action-btn"
+                class="fd-page-action-btn fd-feedback-choice"
                 aria-pressed={selectedFeedback === "negative"}
                 data-selected={selectedFeedback === "negative" ? "true" : undefined}
+                disabled={feedbackStatus === "submitting"}
                 onclick={() => handleFeedback("negative")}
               >
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
@@ -447,6 +493,57 @@
               </button>
             </div>
           </div>
+          {#if selectedFeedback}
+            <div class="fd-feedback-form">
+              <textarea
+                class="fd-feedback-input"
+                aria-label="Additional feedback"
+                placeholder={feedbackConfig.placeholder}
+                bind:value={feedbackComment}
+                disabled={feedbackStatus === "submitting"}
+                oninput={() => {
+                  if (feedbackStatus !== "idle") feedbackStatus = "idle";
+                }}
+              ></textarea>
+              <div class="fd-feedback-submit-row">
+                <button
+                  type="button"
+                  class="fd-page-action-btn fd-feedback-submit"
+                  disabled={feedbackStatus === "submitting" || feedbackStatus === "submitted"}
+                  onclick={() => void submitFeedback()}
+                >
+                  {#if feedbackStatus === "submitting"}
+                    <span class="fd-feedback-spinner" aria-hidden="true"></span>
+                  {:else if feedbackStatus === "submitted"}
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                      <path
+                        d="M20 6 9 17l-5-5"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  {/if}
+                  <span>
+                    {feedbackStatus === "submitted"
+                        ? "Submitted"
+                        : feedbackConfig.submitLabel}
+                  </span>
+                </button>
+                {#if feedbackStatus === "submitted"}
+                  <p class="fd-feedback-status" data-status="success" role="status" aria-live="polite">
+                    Thanks for the feedback.
+                  </p>
+                {/if}
+              </div>
+              {#if feedbackStatus === "error"}
+                <p class="fd-feedback-status" data-status="error" role="status" aria-live="polite">
+                  Could not send feedback. Please try again.
+                </p>
+              {/if}
+            </div>
+          {/if}
         </section>
       {/if}
     </div>

package/styles/colorful.css

@@ -328,3 +328,18 @@
 .fd-ai-floating-trigger .ask-ai-trigger:hover {
   box-shadow: 0 10px 40px 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

@@ -275,3 +275,22 @@ code:not(pre code) {
   background: var(--color-fd-accent) !important;
   color: var(--color-fd-accent-foreground) !important;
 }
+
+/* ─── 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

@@ -726,6 +726,7 @@ samp {
 
 .fd-feedback {
   margin-top: 2rem;
+  margin-bottom: 1.25rem;
   padding-top: 1.25rem;
   border-top: 1px solid var(--color-fd-border);
 }
@@ -753,6 +754,122 @@ samp {
   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.75rem;
+  line-height: 1.3;
+  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;
+}
+
+.fd-feedback-status[data-status="success"] {
+  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;
+  }
+}
+
 /* ─── Breadcrumb ─────────────────────────────────────────────────────── */
 
 .fd-breadcrumb {

package/styles/greentree.css

@@ -892,3 +892,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

@@ -848,3 +848,20 @@ code:not(pre code) {
 .fd-page-action-menu-item:first-child {
   border-top: none !important;
 }
+
+/* ─── 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, var(--font-geist-mono, ui-monospace, monospace));
+  text-transform: uppercase;
+}