@jimmy_harika/websitekit 0.3.1 → 0.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jimmy_harika/websitekit",
-  "version": "0.3.1",
-  "description": "Snow Labs website builder engine. Block-agnostic, curated-section. One shared builder across every Snow Labs app \u2014 engine + design-system-agnostic blocks + per-industry catalogs (author, photographer, \u2026). Each app plugs in a catalog + theme + persistence adapter.",
+  "version": "0.4.0",
+  "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,
   "publishConfig": {

package/src/editor/Inspector.tsx

@@ -237,6 +237,22 @@ function Field({
           }
           onAltChange={(alt) => field.altKey && setProp(field.altKey, alt)}
         />
+      ) : field.widget === "imageList" ? (
+        <ImageListField
+          value={Array.isArray(value) ? (value as string[]) : []}
+          max={field.max}
+          onChange={onChange}
+        />
+      ) : field.widget === "itemList" ? (
+        <ItemListField
+          value={
+            Array.isArray(value) ? (value as Record<string, string>[]) : []
+          }
+          itemFields={field.itemFields}
+          imageKey={field.imageKey}
+          addLabel={field.addLabel}
+          onChange={onChange}
+        />
       ) : (
         <input
           type={field.widget === "url" ? "url" : "text"}
@@ -339,3 +355,272 @@ function ImageField({
     </div>
   );
 }
+
+/**
+ * Upload files through the app-injected capability, falling back to local
+ * object URLs when the app didn't wire `uploadImage` (dev/demo). Object URLs
+ * are tracked and revoked on unmount so replaced previews don't leak.
+ */
+function useImageUploads() {
+  const caps = useContext(EditorCapsContext);
+  const [busy, setBusy] = useState(false);
+  const blobsRef = useRef<string[]>([]);
+  useEffect(() => {
+    const blobs = blobsRef.current;
+    return () => {
+      for (const b of blobs) URL.revokeObjectURL(b);
+    };
+  }, []);
+  async function upload(files: File[]): Promise<string[]> {
+    setBusy(true);
+    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);
+        }
+      }
+      return urls;
+    } finally {
+      setBusy(false);
+    }
+  }
+  return { upload, busy };
+}
+
+/** Move `arr[from]` to `to`, returning a new array. */
+function moved<T>(arr: T[], from: number, to: number): T[] {
+  const next = [...arr];
+  const [x] = next.splice(from, 1);
+  next.splice(to, 0, x);
+  return next;
+}
+
+/** `imageList` widget — thumbnails with reorder/remove + multi-file upload. */
+function ImageListField({
+  value,
+  max,
+  onChange,
+}: {
+  value: string[];
+  max?: number;
+  onChange: (val: unknown) => void;
+}) {
+  const { upload, busy } = useImageUploads();
+  const ref = useRef<HTMLInputElement>(null);
+  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 = "";
+    if (!files.length) return;
+    const urls = await upload(max ? files.slice(0, room) : files);
+    if (urls.length) onChange([...value, ...urls]);
+  }
+
+  return (
+    <div className="space-y-2">
+      {value.length > 0 ? (
+        <div className="grid grid-cols-3 gap-1.5">
+          {value.map((url, i) => (
+            <div key={`${url}-${i}`} className="group relative">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={url} alt="" className="aspect-square w-full rounded-md object-cover" />
+              <div className="absolute inset-0 hidden items-end justify-between rounded-md bg-black/40 p-1 group-hover:flex">
+                <div className="flex gap-0.5">
+                  <button
+                    title="Move left"
+                    disabled={i === 0}
+                    onClick={() => onChange(moved(value, i, i - 1))}
+                    className="rounded bg-white/90 px-1 text-[11px] leading-5 text-black disabled:opacity-40"
+                  >
+                    ←
+                  </button>
+                  <button
+                    title="Move right"
+                    disabled={i === value.length - 1}
+                    onClick={() => onChange(moved(value, i, i + 1))}
+                    className="rounded bg-white/90 px-1 text-[11px] leading-5 text-black disabled:opacity-40"
+                  >
+                    →
+                  </button>
+                </div>
+                <button
+                  title="Remove"
+                  onClick={() => onChange(value.filter((_, j) => j !== i))}
+                  className="rounded bg-white/90 px-1 text-[11px] leading-5 text-black"
+                >
+                  ×
+                </button>
+              </div>
+            </div>
+          ))}
+        </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>
+      )}
+      <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"
+      >
+        {busy ? "Uploading…" : room === 0 ? `Limit of ${max} reached` : "Add images"}
+      </button>
+      <input ref={ref} type="file" accept="image/*" multiple hidden onChange={pick} />
+      <div className="flex gap-1.5">
+        <input
+          value={urlDraft}
+          onChange={(e) => setUrlDraft(e.target.value)}
+          placeholder="or paste image URL"
+          className="min-w-0 flex-1 rounded-md border border-border px-2.5 py-1.5 text-xs"
+        />
+        <button
+          disabled={!urlDraft.trim() || room === 0}
+          onClick={() => {
+            onChange([...value, urlDraft.trim()]);
+            setUrlDraft("");
+          }}
+          className="rounded-md border px-2 py-1.5 text-xs hover:bg-muted disabled:opacity-50"
+        >
+          Add
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/** `itemList` widget — structured rows (mini-form each) with optional image chip. */
+function ItemListField({
+  value,
+  itemFields,
+  imageKey,
+  addLabel,
+  onChange,
+}: {
+  value: Record<string, string>[];
+  itemFields: { key: string; label: string; placeholder?: string }[];
+  imageKey?: string;
+  addLabel?: string;
+  onChange: (val: unknown) => void;
+}) {
+  const { upload, busy } = useImageUploads();
+  const fileRef = useRef<HTMLInputElement>(null);
+  // Which row the pending file-pick belongs to.
+  const pickRow = useRef<number | null>(null);
+
+  const setRow = (i: number, patch: Record<string, string>) =>
+    onChange(value.map((row, j) => (j === i ? { ...row, ...patch } : row)));
+
+  async function pick(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    const i = pickRow.current;
+    pickRow.current = null;
+    if (!file || i == null || !imageKey) return;
+    const [url] = await upload([file]);
+    if (url) setRow(i, { [imageKey]: url });
+  }
+
+  return (
+    <div className="space-y-2">
+      {value.map((row, i) => (
+        <div key={i} className="space-y-1.5 rounded-md border border-border p-2">
+          <div className="flex items-start gap-2">
+            {imageKey && (
+              <button
+                title={row[imageKey] ? "Replace photo" : "Add photo"}
+                disabled={busy}
+                onClick={() => {
+                  pickRow.current = i;
+                  fileRef.current?.click();
+                }}
+                className="relative size-10 shrink-0 overflow-hidden rounded-full border border-dashed"
+              >
+                {row[imageKey] ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img src={row[imageKey]} alt="" className="size-full object-cover" />
+                ) : (
+                  <span className="text-[10px] text-muted-foreground/70">+</span>
+                )}
+              </button>
+            )}
+            <div className="min-w-0 flex-1 space-y-1">
+              {itemFields.map((f) => (
+                <input
+                  key={f.key}
+                  defaultValue={row[f.key] ?? ""}
+                  placeholder={f.placeholder ?? f.label}
+                  onBlur={(e) => {
+                    if (e.target.value !== (row[f.key] ?? "")) {
+                      setRow(i, { [f.key]: e.target.value });
+                    }
+                  }}
+                  className="w-full rounded-md border border-border px-2 py-1 text-xs"
+                />
+              ))}
+            </div>
+            <div className="flex shrink-0 flex-col gap-0.5">
+              <button
+                title="Move up"
+                disabled={i === 0}
+                onClick={() => onChange(moved(value, i, i - 1))}
+                className="rounded border px-1 text-[10px] leading-4 disabled:opacity-40"
+              >
+                ↑
+              </button>
+              <button
+                title="Move down"
+                disabled={i === value.length - 1}
+                onClick={() => onChange(moved(value, i, i + 1))}
+                className="rounded border px-1 text-[10px] leading-4 disabled:opacity-40"
+              >
+                ↓
+              </button>
+              <button
+                title="Remove"
+                onClick={() => onChange(value.filter((_, j) => j !== i))}
+                className="rounded border px-1 text-[10px] leading-4 text-red-600"
+              >
+                ×
+              </button>
+            </div>
+          </div>
+          {imageKey && row[imageKey] && (
+            <button
+              onClick={() => setRow(i, { [imageKey]: "" })}
+              className="text-[10px] text-muted-foreground/70 hover:text-foreground"
+            >
+              Remove photo
+            </button>
+          )}
+        </div>
+      ))}
+      <button
+        onClick={() =>
+          onChange([
+            ...value,
+            Object.fromEntries(
+              [...itemFields.map((f) => f.key), ...(imageKey ? [imageKey] : [])].map((k) => [
+                k,
+                "",
+              ]),
+            ),
+          ])
+        }
+        className="w-full rounded-md border px-2 py-1.5 text-xs hover:bg-muted"
+      >
+        {addLabel ?? "Add item"}
+      </button>
+      {imageKey && (
+        <input ref={fileRef} type="file" accept="image/*" hidden onChange={pick} />
+      )}
+    </div>
+  );
+}

package/src/registry.ts

@@ -55,6 +55,32 @@ export type FieldDescriptor =
       altKey?: string;
       placeholder?: string;
       help?: string;
+    }
+  | {
+      key: string;
+      label: string;
+      /** Multi-image manager for `string[]` props — upload several, reorder, remove. */
+      widget: "imageList";
+      /** Soft cap on image count (layout sanity). */
+      max?: number;
+      help?: string;
+    }
+  | {
+      key: string;
+      label: string;
+      /**
+       * Structured row list for `Array<Record<string, string>>` props — one
+       * mini-form per row (add/remove/reorder), e.g. wedding-party members or
+       * testimonials. Set `imageKey` to give each row an image chip + upload.
+       */
+      widget: "itemList";
+      /** Text sub-fields per row, rendered in order. */
+      itemFields: { key: string; label: string; placeholder?: string }[];
+      /** Row sub-field holding an image URL (upload chip per row). */
+      imageKey?: string;
+      /** Label for the add-row button, e.g. "Add person". */
+      addLabel?: string;
+      help?: string;
     };
 
 export interface SectionDefinition<