@jimmy_harika/websitekit 0.5.0 → 0.5.1

package/README.md

@@ -7,7 +7,29 @@ verticals land here and upgrade all consumers at once.
 
 This is the **single home** for the builder: the engine, a design-system-agnostic
 block library, and per-industry catalogs all live in this repo and ship as one
-private package.
+public package (`@jimmy_harika/websitekit`).
+
+## Consumers (keep them in sync)
+
+| App | Repo | Job |
+|---|---|---|
+| **pixbox** studio Website tool | `convex-pixbox` (`apps/pixbox`) | Multi-page photographer portfolio |
+| **guestcard** event websites | `convex-pixbox` (`apps/invite`) | Per-event invite / event site |
+| Future (authors, vendors, …) | other apps | Same engine, own catalog + persistence |
+
+**Release path (every shared fix/feature):**
+
+1. Land change in **this repo** (`src/`) — not in a consumer’s `node_modules` fork.
+2. `bun run typecheck` → `npm version patch|minor|major` → `npm publish`.
+3. In **each** consumer monorepo, bump `"@jimmy_harika/websitekit": "^x.y.z"` on **all** apps that depend on it (pixbox + invite together), then `bun install`.
+
+**Local dual-dev** (iterate without publishing every minute): from the consumer monorepo root,
+
+```bash
+bun add @jimmy_harika/websitekit@link:../websitekit --filter <app>
+```
+
+Restore the published `^x.y.z` before merge. App-only glue (Convex adapters, plan gates, SEO Manager UI, image upload) stays in the consumer — never pull app UI or Convex into this package.
 
 ## Why custom (not Puck / GrapesJS)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jimmy_harika/websitekit",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Snow Labs website builder engine. Block-agnostic, curated-section. One shared builder across every Snow Labs app — engine + design-system-agnostic blocks + per-industry catalogs (author, photographer, …). Each app plugs in a catalog + theme + persistence adapter.",
   "license": "UNLICENSED",
   "private": false,

package/src/editor/Inspector.tsx

@@ -292,11 +292,12 @@ function ImageField({
       if (blobRef.current) URL.revokeObjectURL(blobRef.current);
     };
   }, []);
-  async function pick(e: ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0];
-    e.target.value = "";
-    if (!file) return;
+  const [err, setErr] = useState<string | null>(null);
+  const [dragOver, setDragOver] = useState(false);
+
+  async function uploadFile(file: File) {
     setBusy(true);
+    setErr(null);
     try {
       const usedFallback = !caps.uploadImage;
       const url = caps.uploadImage
@@ -307,18 +308,57 @@ function ImageField({
         blobRef.current = url;
       }
       onChange(url);
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : "Upload failed");
     } finally {
       setBusy(false);
     }
   }
+
+  async function pick(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file) return;
+    await uploadFile(file);
+  }
   return (
     <div className="space-y-2">
       {value ? (
         // eslint-disable-next-line @next/next/no-img-element
-        <img src={value} alt={altValue ?? ""} className="h-24 w-full rounded-md object-cover" />
+        <img
+          src={value}
+          alt={altValue ?? ""}
+          className={`h-24 w-full rounded-md object-cover ${dragOver ? "ring-2 ring-sky-400" : ""}`}
+          onDragOver={(e) => {
+            e.preventDefault();
+            setDragOver(true);
+          }}
+          onDragLeave={() => setDragOver(false)}
+          onDrop={(e) => {
+            e.preventDefault();
+            setDragOver(false);
+            const f = e.dataTransfer.files?.[0];
+            if (f) void uploadFile(f);
+          }}
+        />
       ) : (
-        <div className="flex h-24 items-center justify-center rounded-md border border-dashed text-xs text-muted-foreground/70">
-          No image
+        <div
+          className={`flex h-24 items-center justify-center rounded-md border border-dashed text-xs text-muted-foreground/70 ${
+            dragOver ? "border-sky-400 bg-sky-400/10" : ""
+          }`}
+          onDragOver={(e) => {
+            e.preventDefault();
+            setDragOver(true);
+          }}
+          onDragLeave={() => setDragOver(false)}
+          onDrop={(e) => {
+            e.preventDefault();
+            setDragOver(false);
+            const f = e.dataTransfer.files?.[0];
+            if (f) void uploadFile(f);
+          }}
+        >
+          {busy ? "Uploading…" : "No image — click or drop"}
         </div>
       )}
       <div className="flex gap-2">
@@ -337,7 +377,8 @@ function ImageField({
           </button>
         )}
       </div>
-      <input ref={ref} type="file" accept="image/*" hidden onChange={pick} />
+      {err && <p className="text-[10px] text-red-600 dark:text-red-400">{err}</p>}
+      <input ref={ref} type="file" accept="image/*,.heic,.heif,image/heic,image/heif" hidden onChange={pick} />
       <input
         value={value}
         onChange={(e) => onChange(e.target.value)}
@@ -376,12 +417,16 @@ function useImageUploads() {
     try {
       const urls: string[] = [];
       for (const file of files) {
-        if (caps.uploadImage) {
-          urls.push(await caps.uploadImage(file));
-        } else {
-          const u = URL.createObjectURL(file);
-          blobsRef.current.push(u);
-          urls.push(u);
+        try {
+          if (caps.uploadImage) {
+            urls.push(await caps.uploadImage(file));
+          } else {
+            const u = URL.createObjectURL(file);
+            blobsRef.current.push(u);
+            urls.push(u);
+          }
+        } catch {
+          // Skip failed files; caller can show partial results
         }
       }
       return urls;
@@ -415,14 +460,20 @@ function ImageListField({
   const [urlDraft, setUrlDraft] = useState("");
   const room = max ? Math.max(0, max - value.length) : Infinity;
 
-  async function pick(e: ChangeEvent<HTMLInputElement>) {
-    const files = Array.from(e.target.files ?? []);
-    e.target.value = "";
+  const [dragOver, setDragOver] = useState(false);
+
+  async function addFiles(files: File[]) {
     if (!files.length) return;
     const urls = await upload(max ? files.slice(0, room) : files);
     if (urls.length) onChange([...value, ...urls]);
   }
 
+  async function pick(e: ChangeEvent<HTMLInputElement>) {
+    const files = Array.from(e.target.files ?? []);
+    e.target.value = "";
+    await addFiles(files);
+  }
+
   return (
     <div className="space-y-2">
       {value.length > 0 ? (
@@ -462,18 +513,51 @@ function ImageListField({
           ))}
         </div>
       ) : (
-        <div className="flex h-16 items-center justify-center rounded-md border border-dashed text-xs text-muted-foreground/70">
-          No images yet
+        <div
+          className={`flex h-16 items-center justify-center rounded-md border border-dashed text-xs text-muted-foreground/70 ${
+            dragOver ? "border-sky-400 bg-sky-400/10" : ""
+          }`}
+          onDragOver={(e) => {
+            e.preventDefault();
+            setDragOver(true);
+          }}
+          onDragLeave={() => setDragOver(false)}
+          onDrop={(e) => {
+            e.preventDefault();
+            setDragOver(false);
+            void addFiles(Array.from(e.dataTransfer.files ?? []));
+          }}
+        >
+          No images yet — drop here
         </div>
       )}
       <button
         onClick={() => ref.current?.click()}
         disabled={busy || room === 0}
-        className="w-full rounded-md border px-2 py-1.5 text-xs hover:bg-muted disabled:opacity-50"
+        className={`w-full rounded-md border px-2 py-1.5 text-xs hover:bg-muted disabled:opacity-50 ${
+          dragOver ? "border-sky-400" : ""
+        }`}
+        onDragOver={(e) => {
+          e.preventDefault();
+          setDragOver(true);
+        }}
+        onDragLeave={() => setDragOver(false)}
+        onDrop={(e) => {
+          e.preventDefault();
+          setDragOver(false);
+          void addFiles(Array.from(e.dataTransfer.files ?? []));
+        }}
       >
-        {busy ? "Uploading…" : room === 0 ? `Limit of ${max} reached` : "Add images"}
+        {busy ? "Uploading…" : room === 0 ? `Limit of ${max} reached` : "Add images (click or drop)"}
       </button>
-      <input ref={ref} type="file" accept="image/*" multiple hidden onChange={pick} />
+      <input
+        ref={ref}
+        type="file"
+        accept="image/*,.heic,.heif,image/heic,image/heif"
+        multiple
+        hidden
+        onChange={pick}
+      />
       <div className="flex gap-1.5">
         <input
           value={urlDraft}

package/src/editor/edit-primitives.tsx

@@ -86,12 +86,17 @@ function EditableText({
   );
 }
 
+const IMAGE_ACCEPT =
+  "image/*,.heic,.heif,image/heic,image/heif";
+
 function EditableImage({ field, src, alt, className, style, width, height, priority }: ImageEditProps) {
   const sectionId = useContext(EditSectionContext);
   const updateProps = useBuilder((s) => s.updateProps);
   const caps = useContext(EditorCapsContext);
   const inputRef = useRef<HTMLInputElement>(null);
   const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const [dragOver, setDragOver] = useState(false);
   // Track object URLs we minted so we can revoke them (avoid leaks on replace/unmount).
   const blobRef = useRef<string | null>(null);
   useEffect(() => {
@@ -100,11 +105,10 @@ function EditableImage({ field, src, alt, className, style, width, height, prior
     };
   }, []);
 
-  async function onPick(e: ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0];
-    e.target.value = "";
-    if (!file || !sectionId) return;
+  async function uploadFile(file: File) {
+    if (!sectionId) return;
     setBusy(true);
+    setErr(null);
     try {
       const usedFallback = !caps.uploadImage;
       const url = caps.uploadImage
@@ -115,16 +119,49 @@ function EditableImage({ field, src, alt, className, style, width, height, prior
         blobRef.current = url;
       }
       updateProps(sectionId, { [field]: url });
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : "Upload failed");
     } finally {
       setBusy(false);
     }
   }
 
+  async function onPick(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file) return;
+    await uploadFile(file);
+  }
+
   const open = (e: ReactMouseEvent) => {
     e.stopPropagation();
     inputRef.current?.click();
   };
 
+  const onDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(true);
+  };
+  const onDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+  };
+  const onDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+    const file = e.dataTransfer.files?.[0];
+    if (file) void uploadFile(file);
+  };
+
+  const dropProps = {
+    onDragOver,
+    onDragLeave,
+    onDrop,
+  };
+
   return (
     <>
       {src ? (
@@ -136,24 +173,36 @@ function EditableImage({ field, src, alt, className, style, width, height, prior
           height={height}
           loading={priority ? "eager" : "lazy"}
           fetchPriority={priority ? "high" : "auto"}
-          className={cn("cursor-pointer outline-2 outline-offset-2 outline-transparent hover:outline-sky-400", className)}
+          className={cn(
+            "cursor-pointer outline-2 outline-offset-2 outline-transparent hover:outline-sky-400",
+            dragOver && "outline-sky-400",
+            className,
+          )}
           style={style}
-          title={busy ? "Uploading…" : "Click to replace"}
+          title={busy ? "Uploading…" : err ?? "Click or drop to replace"}
           onClick={open}
+          {...dropProps}
         />
       ) : (
         <div
           className={cn(
             "flex cursor-pointer items-center justify-center bg-black/[0.04] text-[11px] uppercase tracking-wider opacity-50 outline-2 outline-dashed outline-black/15 hover:outline-sky-400",
+            dragOver && "outline-sky-400 opacity-80",
             className,
           )}
           style={style}
           onClick={open}
+          {...dropProps}
         >
-          {busy ? "Uploading…" : "Add image"}
+          {busy ? "Uploading…" : err ? "Upload failed — try again" : "Add image (click or drop)"}
         </div>
       )}
-      <input ref={inputRef} type="file" accept="image/*" hidden onChange={onPick} />
+      {err && (
+        <p className="mt-1 text-[10px] text-red-600 dark:text-red-400" title={err}>
+          {err}
+        </p>
+      )}
+      <input ref={inputRef} type="file" accept={IMAGE_ACCEPT} hidden onChange={onPick} />
     </>
   );
 }