@drawnagency/primitives 0.1.40 → 0.1.41

package/dist/components/shell/BugReportFAB.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    siteId: string;
+}
+export declare function BugReportFAB({ siteId }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=BugReportFAB.d.ts.map

package/dist/components/shell/BugReportFAB.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BugReportFAB.d.ts","sourceRoot":"","sources":["../../../src/components/shell/BugReportFAB.tsx"],"names":[],"mappings":"AAMA,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAyBD,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,kDAsT7C"}

package/dist/components/shell/EditorShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAqDjD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAQxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,GACZ,EAAE,KAAK,2CAsoBP"}
+{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAsDjD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAQxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,GACZ,EAAE,KAAK,2CAwoBP"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",

package/src/components/shell/BugReportFAB.tsx

@@ -0,0 +1,344 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import { createClient } from "@supabase/supabase-js";
+import { EditorModal } from "./EditorModal";
+import { useEditorContext } from "./EditorContext";
+import { env } from "../../lib/env";
+
+interface Props {
+  siteId: string;
+}
+
+type Category = "Visual" | "Unexpected Behavior" | "Media / Media Library" | "Save / Publish" | "Other";
+
+const CATEGORIES: Category[] = [
+  "Visual",
+  "Unexpected Behavior",
+  "Media / Media Library",
+  "Save / Publish",
+  "Other",
+];
+
+interface CapturedContext {
+  url: string;
+  section_id: null;
+  user_agent: string;
+  viewport_width: number;
+  viewport_height: number;
+}
+
+interface ImagePreview {
+  dataUri: string;
+  name: string;
+}
+
+export function BugReportFAB({ siteId }: Props) {
+  const { isEditMode, historyState } = useEditorContext();
+  const [isOpen, setIsOpen] = useState(false);
+  const [category, setCategory] = useState<Category>("Visual");
+  const [isCritical, setIsCritical] = useState(false);
+  const [description, setDescription] = useState("");
+  const [images, setImages] = useState<ImagePreview[]>([]);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [descriptionError, setDescriptionError] = useState<string | null>(null);
+  const [toast, setToast] = useState<string | null>(null);
+  const capturedContextRef = useRef<CapturedContext | null>(null);
+  const dropZoneRef = useRef<HTMLDivElement>(null);
+
+  const resetForm = useCallback(() => {
+    setCategory("Visual");
+    setIsCritical(false);
+    setDescription("");
+    setImages([]);
+    setSubmitError(null);
+    setDescriptionError(null);
+    capturedContextRef.current = null;
+  }, []);
+
+  const handleOpen = useCallback(() => {
+    capturedContextRef.current = {
+      url: window.location.pathname,
+      section_id: null,
+      user_agent: navigator.userAgent,
+      viewport_width: window.innerWidth,
+      viewport_height: window.innerHeight,
+    };
+    setIsOpen(true);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    resetForm();
+  }, [resetForm]);
+
+  const fileToDataUri = useCallback((file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  }, []);
+
+  const addImageFiles = useCallback(async (files: File[]) => {
+    const imageFiles = files.filter((f) => f.type.startsWith("image/"));
+    if (imageFiles.length === 0) return;
+    const newPreviews = await Promise.all(
+      imageFiles.map(async (file) => ({
+        dataUri: await fileToDataUri(file),
+        name: file.name,
+      })),
+    );
+    setImages((prev) => [...prev, ...newPreviews].slice(0, 5));
+  }, [fileToDataUri]);
+
+  const handleRemoveImage = useCallback((index: number) => {
+    setImages((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    if (dropZoneRef.current && !dropZoneRef.current.contains(e.relatedTarget as Node)) {
+      setIsDragOver(false);
+    }
+  }, []);
+
+  const handleDrop = useCallback(async (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    const files = Array.from(e.dataTransfer.files);
+    await addImageFiles(files);
+  }, [addImageFiles]);
+
+  // Document-level paste listener when modal is open
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handlePaste = async (e: ClipboardEvent) => {
+      const items = e.clipboardData?.items;
+      if (!items) return;
+      const files: File[] = [];
+      for (const item of Array.from(items)) {
+        if (item.type.startsWith("image/")) {
+          const file = item.getAsFile();
+          if (file) files.push(file);
+        }
+      }
+      if (files.length > 0) {
+        await addImageFiles(files);
+      }
+    };
+
+    document.addEventListener("paste", handlePaste);
+    return () => document.removeEventListener("paste", handlePaste);
+  }, [isOpen, addImageFiles]);
+
+  const handleSubmit = useCallback(async () => {
+    if (!description.trim()) {
+      setDescriptionError("Please describe the issue.");
+      return;
+    }
+    setDescriptionError(null);
+    setSubmitError(null);
+    setIsSubmitting(true);
+
+    try {
+      const supabase = createClient(
+        env("SUPABASE_URL"),
+        env("SUPABASE_ANON_KEY"),
+      );
+
+      const { data: userData } = await supabase.auth.getUser();
+      const userId = userData?.user?.id ?? null;
+
+      const { error } = await supabase.from("bug_reports").insert({
+        site_id: siteId,
+        user_id: userId,
+        category,
+        is_critical: isCritical,
+        description: description.trim(),
+        images: images.map((img) => img.dataUri),
+        context: capturedContextRef.current,
+      });
+
+      if (error) {
+        setSubmitError(error.message);
+        return;
+      }
+
+      handleClose();
+      setToast("Bug report submitted");
+      setTimeout(() => setToast(null), 3000);
+    } catch (err) {
+      setSubmitError(err instanceof Error ? err.message : "Submission failed");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [siteId, category, isCritical, description, images, handleClose]);
+
+  const visible = isEditMode && historyState === null;
+
+  if (!visible && !isOpen && !toast) return null;
+
+  return (
+    <>
+      {/* FAB button */}
+      {visible && (
+        <button
+          type="button"
+          onClick={handleOpen}
+          aria-label="Report a bug"
+          className="cursor-pointer fixed bottom-16 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
+        >
+          {/* Bug / beetle SVG icon */}
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path d="M19 8h-1.26A6.003 6.003 0 0012 4a6.003 6.003 0 00-5.74 4H5a1 1 0 000 2h1.05A6.04 6.04 0 006 12H5a1 1 0 000 2h1c0 .34.03.67.08 1H5a1 1 0 000 2h1.26a6 6 0 0011.48 0H19a1 1 0 000-2h-1.08c.05-.33.08-.66.08-1h1a1 1 0 000-2h-1a6.04 6.04 0 00-.05-2H19a1 1 0 000-2zM12 6c1.7 0 3.16.88 4 2.19V8a1 1 0 10-2 0v.04A3.97 3.97 0 0012 8a3.97 3.97 0 00-2 .04V8a1 1 0 10-2 0v.19A4.69 4.69 0 018 6a4 4 0 014 0zm0 14a4 4 0 01-4-4v-4a4 4 0 018 0v4a4 4 0 01-4 4z"/>
+          </svg>
+        </button>
+      )}
+
+      {/* Modal */}
+      <EditorModal
+        isOpen={isOpen}
+        onClose={handleClose}
+        title="Report a Bug"
+      >
+        <div className="space-y-4">
+          {/* Category */}
+          <div>
+            <label className="mb-1 block text-sm font-medium text-base-contrast" htmlFor="bug-category">
+              Category
+            </label>
+            <select
+              id="bug-category"
+              value={category}
+              onChange={(e) => setCategory(e.target.value as Category)}
+              className="w-full rounded-md border border-base-200 bg-base px-3 py-2 text-sm text-base-contrast"
+            >
+              {CATEGORIES.map((cat) => (
+                <option key={cat} value={cat}>{cat}</option>
+              ))}
+            </select>
+          </div>
+
+          {/* Critical toggle */}
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              role="switch"
+              aria-checked={isCritical}
+              onClick={() => setIsCritical((prev) => !prev)}
+              className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ${
+                isCritical
+                  ? "bg-red-600 focus-visible:ring-red-600"
+                  : "bg-base-200 focus-visible:ring-base-200"
+              }`}
+            >
+              <span
+                className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform ${
+                  isCritical ? "translate-x-5" : "translate-x-0.5"
+                } mt-0.5`}
+              />
+            </button>
+            <span className="text-sm text-base-contrast">This is blocking my work</span>
+          </div>
+
+          {/* Description */}
+          <div>
+            <label className="mb-1 block text-sm font-medium text-base-contrast" htmlFor="bug-description">
+              Description
+            </label>
+            <textarea
+              id="bug-description"
+              rows={4}
+              value={description}
+              onChange={(e) => {
+                setDescription(e.target.value);
+                if (descriptionError && e.target.value.trim()) {
+                  setDescriptionError(null);
+                }
+              }}
+              placeholder="Describe the issue..."
+              className="w-full rounded-md border border-base-200 bg-base px-3 py-2 text-sm text-base-contrast placeholder:text-base-contrast/50 resize-none"
+            />
+            {descriptionError && (
+              <p className="mt-1 text-xs text-red-600">{descriptionError}</p>
+            )}
+          </div>
+
+          {/* Screenshots drop zone */}
+          <div>
+            <label className="mb-1 block text-sm font-medium text-base-contrast">
+              Screenshots
+            </label>
+            <div
+              ref={dropZoneRef}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+              className={`rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors ${
+                isDragOver
+                  ? "border-primary bg-primary/5"
+                  : "border-base-200 bg-base-accent/30"
+              }`}
+            >
+              <p className="text-sm text-base-contrast/60">
+                Drop images here or paste from clipboard
+              </p>
+            </div>
+
+            {/* Thumbnail previews */}
+            {images.length > 0 && (
+              <div className="mt-2 flex flex-wrap gap-2">
+                {images.map((img, index) => (
+                  <div key={index} className="group relative h-16 w-16">
+                    <img
+                      src={img.dataUri}
+                      alt={img.name}
+                      className="h-16 w-16 rounded object-cover border border-base-200"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveImage(index)}
+                      aria-label={`Remove screenshot ${img.name}`}
+                      className="absolute -top-1.5 -right-1.5 hidden h-5 w-5 items-center justify-center rounded-full bg-red-600 text-white text-xs group-hover:flex"
+                    >
+                      ×
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Submit error */}
+          {submitError && (
+            <p className="text-sm text-red-600">{submitError}</p>
+          )}
+
+          {/* Submit button */}
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={isSubmitting}
+            className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-contrast hover:opacity-90 transition-opacity disabled:opacity-60"
+          >
+            {isSubmitting ? "Submitting..." : "Submit Report"}
+          </button>
+        </div>
+      </EditorModal>
+
+      {/* Toast */}
+      {toast && (
+        <div className="fixed bottom-4 left-1/2 z-[60] -translate-x-1/2 rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white shadow-lg">
+          {toast}
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/shell/EditorShell.tsx

@@ -21,6 +21,7 @@ import { ensureSectionsRegistered } from "../sections/register";
 import { getSection, getAllSections } from "../../lib/registry";
 
 ensureSectionsRegistered();
+import { BugReportFAB } from "./BugReportFAB";
 import { SectionWrapper } from "../editor/SectionWrapper";
 import { SectionOrderingModal } from "../editor/SectionOrderingModal";
 import { SectionLayout } from "../sections/SectionLayout";
@@ -633,6 +634,8 @@ export default function EditorShell({
             onOrderingClick={() => setShowOrderingModal(true)}
           />
 
+          <BugReportFAB siteId={siteId} />
+
           <HistoryOrEditorContent sections={sections}>
             <EditorContent
               sections={sections}