@jimmy_harika/websitekit 0.3.1

package/src/blocks/form.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+/**
+ * Form — configurable contact/inquiry/lead capture. Fields come from a `list`
+ * field (`label | name | type` per line; type ∈ text/email/tel/textarea/select/
+ * date/checkbox, default text). Submits JSON to `actionUrl` (the app's Convex
+ * action — pixbox's submitForm verifies Turnstile + stores + emails).
+ *
+ * Optional spam protection: pass `turnstileSiteKey` and the block renders a
+ * Cloudflare Turnstile widget inline + includes the token in the submit, so the
+ * block is turnkey-protected without the app adding any widget code.
+ *
+ * Portable: reads only `--pb-*` tokens. In the editor (`edit` injected) the
+ * heading + button label are inline-editable and submit is a no-op preview.
+ */
+import { useEffect, useRef, useState, type FormEvent } from "react";
+import { renderText, type EditPrimitives } from "../editable";
+import { BODY, HEADING, MUTED, RADIUS, TEXT, ACCENT, BG } from "./primitives";
+
+export interface FormProps {
+  heading?: string;
+  /** `label | name | type` per line (name defaults from label; type defaults text). */
+  fields?: string;
+  buttonLabel?: string;
+  successMessage?: string;
+  /** POST target (app Convex action). Empty = editor preview (no-op submit). */
+  actionUrl?: string;
+  /** Optional Cloudflare Turnstile site key — renders the widget + sends the token. */
+  turnstileSiteKey?: string;
+  edit?: EditPrimitives;
+}
+
+type FieldType = "text" | "email" | "tel" | "textarea" | "select" | "date" | "checkbox";
+interface FieldDef {
+  label: string;
+  name: string;
+  type: FieldType;
+  options?: string[];
+  required: boolean;
+}
+
+function parseFields(raw?: string): FieldDef[] {
+  if (!raw) return [];
+  return raw
+    .split("\n")
+    .map((l) => l.trim())
+    .filter(Boolean)
+    .map((l) => {
+      const parts = l.split("|").map((s) => (s ?? "").trim());
+      const label = parts[0] || "Field";
+      const name = parts[1] || label.toLowerCase().replace(/[^a-z0-9]+/g, "_");
+      const type = (parts[2] as FieldType) || "text";
+      const selectOpts = type === "select" && parts[3] ? parts[3].split(";").map((o) => o.trim()).filter(Boolean) : undefined;
+      return { label, name, type, options: selectOpts, required: !label.endsWith("?") };
+    });
+}
+
+declare global {
+  interface Window {
+    turnstile?: { render: (el: HTMLElement, opts: Record<string, unknown>) => string };
+  }
+}
+
+export function Form(props: FormProps) {
+  const { heading, fields, buttonLabel = "Send", successMessage, actionUrl, turnstileSiteKey, edit } = props;
+  const defs = parseFields(fields);
+  const [values, setValues] = useState<Record<string, string | boolean>>({});
+  const [token, setToken] = useState("");
+  const [state, setState] = useState<"idle" | "loading" | "done" | "error">("idle");
+  const [err, setErr] = useState<string | null>(null);
+
+  async function onSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (edit || !actionUrl) return; // editor preview — no real submit
+    if (turnstileSiteKey && !token) {
+      setErr("Please complete the spam check.");
+      return;
+    }
+    setState("loading");
+    setErr(null);
+    try {
+      const res = await fetch(actionUrl, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ ...values, "cf-turnstile-response": token }),
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body.message ?? "Submission failed.");
+      }
+      setState("done");
+    } catch (e2) {
+      setState("error");
+      setErr(e2 instanceof Error ? e2.message : "Something went wrong.");
+    }
+  }
+
+  if (state === "done") {
+    return (
+      <section className="px-6 py-16 text-center sm:py-20">
+        <p className="text-[15px]" style={{ fontFamily: BODY, color: ACCENT }}>
+          {successMessage || "Thanks — your message has been sent."}
+        </p>
+      </section>
+    );
+  }
+
+  return (
+    <section className="mx-auto max-w-2xl px-6 py-16 sm:py-20">
+      {heading &&
+        renderText(edit, {
+          field: "heading",
+          value: heading,
+          as: "h2",
+          placeholder: "Get in touch",
+          className: "mb-8 text-center text-[clamp(1.6rem,4vw,2.5rem)] font-light",
+          style: { fontFamily: HEADING, color: TEXT },
+        })}
+      <form onSubmit={onSubmit} className="space-y-3">
+        {defs.map((f) => {
+          const inputClass =
+            "w-full rounded-md border px-3.5 py-2.5 text-[15px] outline-none focus:border-current/40";
+          const borderStyle = {
+            fontFamily: BODY,
+            borderColor: "color-mix(in srgb, currentColor 18%, transparent)",
+            background: "transparent",
+            color: TEXT,
+          };
+          if (f.type === "checkbox") {
+            return (
+              <label key={f.name} className="flex items-center gap-2.5 text-[14px]" style={{ fontFamily: BODY, color: TEXT }}>
+                <input
+                  type="checkbox"
+                  name={f.name}
+                  required={f.required}
+                  checked={!!values[f.name]}
+                  onChange={(e) => setValues((v) => ({ ...v, [f.name]: e.target.checked }))}
+                  className="size-4"
+                />
+                {f.label}
+              </label>
+            );
+          }
+          return (
+            <div key={f.name}>
+              <label className="mb-1 block text-xs font-medium" style={{ fontFamily: BODY, color: MUTED }}>
+                {f.label}
+              </label>
+              {f.type === "textarea" ? (
+                <textarea
+                  name={f.name}
+                  required={f.required}
+                  rows={4}
+                  value={(values[f.name] as string) ?? ""}
+                  onChange={(e) => setValues((v) => ({ ...v, [f.name]: e.target.value }))}
+                  className={inputClass}
+                  style={borderStyle}
+                />
+              ) : f.type === "select" ? (
+                <select
+                  name={f.name}
+                  required={f.required}
+                  value={(values[f.name] as string) ?? ""}
+                  onChange={(e) => setValues((v) => ({ ...v, [f.name]: e.target.value }))}
+                  className={inputClass}
+                  style={borderStyle}
+                >
+                  <option value="">Choose…</option>
+                  {(f.options ?? []).map((o) => (
+                    <option key={o} value={o}>
+                      {o}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <input
+                  type={f.type}
+                  name={f.name}
+                  required={f.required}
+                  value={(values[f.name] as string) ?? ""}
+                  onChange={(e) => setValues((v) => ({ ...v, [f.name]: e.target.value }))}
+                  className={inputClass}
+                  style={borderStyle}
+                />
+              )}
+            </div>
+          );
+        })}
+        {turnstileSiteKey && !edit && <TurnstileWidget siteKey={turnstileSiteKey} onToken={setToken} />}
+        <button
+          type="submit"
+          disabled={state === "loading"}
+          className="mt-2 inline-flex w-full items-center justify-center px-6 py-3 text-[13px] font-semibold uppercase tracking-[0.2em] transition-opacity hover:opacity-90 disabled:opacity-60 sm:w-auto"
+          style={{ backgroundColor: ACCENT, color: BG, borderRadius: RADIUS, fontFamily: BODY }}
+        >
+          {state === "loading" ? "…" : buttonLabel}
+        </button>
+        {state === "error" && err && (
+          <p className="text-sm" style={{ fontFamily: BODY, color: "#c0392b" }}>
+            {err}
+          </p>
+        )}
+      </form>
+    </section>
+  );
+}
+
+/** Loads the Turnstile script once + renders the widget into a container. */
+function TurnstileWidget({ siteKey, onToken }: { siteKey: string; onToken: (t: string) => void }) {
+  const elRef = useRef<HTMLDivElement>(null);
+  const tokenCb = useRef(onToken);
+  tokenCb.current = onToken;
+  useEffect(() => {
+    if (typeof window === "undefined" || !elRef.current) return;
+    const render = () => {
+      if (elRef.current && window.turnstile) {
+        window.turnstile.render(elRef.current, { sitekey: siteKey, callback: (t: string) => tokenCb.current(t) });
+      }
+    };
+    const existing = document.querySelector('script[src^="https://challenges.cloudflare.com/turnstile"]');
+    if (window.turnstile) render();
+    else if (!existing) {
+      const s = document.createElement("script");
+      s.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+      s.async = true;
+      s.defer = true;
+      s.onload = render;
+      document.head.appendChild(s);
+    } else {
+      existing.addEventListener("load", render);
+    }
+  }, [siteKey]);
+  return <div ref={elRef} className="min-h-[65px]" aria-label="Spam check" />;
+}

package/src/blocks/gallery.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+/**
+ * Gallery — the core portfolio surface. Variants: grid (n-up, fixed aspect) or
+ * masonry (CSS columns, natural aspect). Lightbox is a keyboard-navigable,
+ * focus-trapped client island. Portable: reads only `--pb-*` tokens.
+ *
+ * Images come from a single `list` field (`url | alt` per line) so it works with
+ * the engine's current inspector (no structured repeater yet — upgrade path in
+ * Phase 7). In the editor (`edit` injected) images render inline-editable and
+ * the lightbox is suppressed (a preview, not a picker).
+ */
+import { useEffect, useRef, useState } from "react";
+import { renderImage, type EditPrimitives } from "../editable";
+import { BODY, HEADING, MUTED, RADIUS, Section, TEXT } from "./primitives";
+
+export interface GalleryProps {
+  heading?: string;
+  /** `url | alt` per line (alt optional). */
+  images?: string;
+  columns?: "2" | "3" | "4";
+  layout?: "grid" | "masonry";
+  aspect?: "auto" | "square" | "portrait" | "landscape";
+  edit?: EditPrimitives;
+}
+
+interface Shot {
+  src: string;
+  alt: string;
+}
+
+function parseImages(raw?: string): Shot[] {
+  if (!raw) return [];
+  return raw
+    .split("\n")
+    .map((l) => l.trim())
+    .filter(Boolean)
+    .map((l) => {
+      const [src, alt = ""] = l.split("|").map((s) => (s ?? "").trim());
+      return { src, alt };
+    })
+    .filter((s) => s.src);
+}
+
+const ASPECT: Record<NonNullable<GalleryProps["aspect"]>, string> = {
+  auto: "auto",
+  square: "1 / 1",
+  portrait: "3 / 4",
+  landscape: "4 / 3",
+};
+
+export function Gallery(props: GalleryProps) {
+  const { heading, images, columns = "3", layout = "grid", aspect = "auto", edit } = props;
+  const shots = parseImages(images);
+  const cols = Number(columns);
+
+  return (
+    <Section>
+      {heading && (
+        <h2
+          className="mb-8 text-center text-[clamp(1.6rem,4vw,2.5rem)] font-light"
+          style={{ fontFamily: HEADING, color: TEXT }}
+        >
+          {heading}
+        </h2>
+      )}
+      {shots.length === 0 ? (
+        <p className="py-10 text-center text-sm" style={{ color: MUTED, fontFamily: BODY }}>
+          Add images (one per line: <code>url | alt</code>).
+        </p>
+      ) : layout === "masonry" ? (
+        <Masonry shots={shots} cols={cols} edit={edit} />
+      ) : (
+        <Grid shots={shots} cols={cols} aspect={aspect} edit={edit} />
+      )}
+    </Section>
+  );
+}
+
+function Grid({
+  shots,
+  cols,
+  aspect,
+  edit,
+}: {
+  shots: Shot[];
+  cols: number;
+  aspect: NonNullable<GalleryProps["aspect"]>;
+  edit?: EditPrimitives;
+}) {
+  const [open, setOpen] = useState<number | null>(null);
+  return (
+    <>
+      <div
+        className="grid gap-3 sm:gap-4"
+        style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }}
+      >
+        {shots.map((s, i) => (
+          <button
+            key={i}
+            type="button"
+            onClick={() => !edit && setOpen(i)}
+            className="group relative overflow-hidden bg-black/5"
+            style={{ aspectRatio: ASPECT[aspect], borderRadius: RADIUS, cursor: edit ? "default" : "zoom-in" }}
+          >
+            {renderImage(edit, {
+              field: `image-${i}`,
+              src: s.src,
+              alt: s.alt,
+              className: "h-full w-full object-cover transition group-hover:scale-[1.02]",
+            })}
+          </button>
+        ))}
+      </div>
+      {open !== null && !edit && (
+        <Lightbox shots={shots} index={open} onClose={() => setOpen(null)} onIndex={setOpen} />
+      )}
+    </>
+  );
+}
+
+function Masonry({ shots, cols, edit }: { shots: Shot[]; cols: number; edit?: EditPrimitives }) {
+  const [open, setOpen] = useState<number | null>(null);
+  return (
+    <>
+      <div style={{ columnCount: cols, columnGap: "1rem" }}>
+        {shots.map((s, i) => (
+          <button
+            key={i}
+            type="button"
+            onClick={() => !edit && setOpen(i)}
+            className="mb-3 block w-full overflow-hidden bg-black/5 sm:mb-4"
+            style={{ borderRadius: RADIUS, cursor: edit ? "default" : "zoom-in" }}
+          >
+            {renderImage(edit, {
+              field: `image-${i}`,
+              src: s.src,
+              alt: s.alt,
+              className: "w-full object-cover",
+            })}
+          </button>
+        ))}
+      </div>
+      {open !== null && !edit && (
+        <Lightbox shots={shots} index={open} onClose={() => setOpen(null)} onIndex={setOpen} />
+      )}
+    </>
+  );
+}
+
+function Lightbox({
+  shots,
+  index,
+  onClose,
+  onIndex,
+}: {
+  shots: Shot[];
+  index: number;
+  onClose: () => void;
+  onIndex: (i: number) => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+      if (e.key === "ArrowRight") onIndex((index + 1) % shots.length);
+      if (e.key === "ArrowLeft") onIndex((index - 1 + shots.length) % shots.length);
+    };
+    window.addEventListener("keydown", onKey);
+    document.body.style.overflow = "hidden";
+    ref.current?.focus();
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = "";
+    };
+  }, [index, shots.length, onClose, onIndex]);
+
+  const s = shots[index];
+  return (
+    <div
+      ref={ref}
+      tabIndex={-1}
+      onClick={onClose}
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4 outline-none"
+      style={{ fontFamily: BODY }}
+    >
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onClose();
+        }}
+        className="absolute right-4 top-4 rounded-full bg-white/10 px-3 py-1.5 text-sm text-white hover:bg-white/20"
+      >
+        Close ✕
+      </button>
+      {shots.length > 1 && (
+        <>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onIndex((index - 1 + shots.length) % shots.length);
+            }}
+            className="absolute left-3 rounded-full bg-white/10 px-3 py-2 text-white hover:bg-white/20"
+          >
+            ‹
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onIndex((index + 1) % shots.length);
+            }}
+            className="absolute right-3 rounded-full bg-white/10 px-3 py-2 text-white hover:bg-white/20"
+          >
+            ›
+          </button>
+        </>
+      )}
+      <figure onClick={(e) => e.stopPropagation()} className="max-h-[88vh] max-w-5xl">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={s.src} alt={s.alt} className="max-h-[82vh] w-auto object-contain" loading="eager" />
+        {s.alt && (
+          <figcaption className="mt-3 text-center text-sm" style={{ color: "rgba(255,255,255,0.7)" }}>
+            {s.alt}
+          </figcaption>
+        )}
+      </figure>
+    </div>
+  );
+}
+

package/src/blocks/index.ts

@@ -0,0 +1,32 @@
+/**
+ * `@jimmy_harika/websitekit/blocks` — the shared, design-system-agnostic block
+ * library. Every block reads only `--pb-*` theme tokens + Tailwind utilities
+ * (no app-UI imports) and is edit-aware, so it renders identically in any
+ * consuming app's editor canvas and production site. Per-industry catalogs
+ * (`../catalogs/*`) compose these into `SectionDefinition`s.
+ */
+export { type BookItem } from "./primitives";
+export {
+  ACCENT,
+  BG,
+  BODY,
+  HEADING,
+  MUTED,
+  RADIUS,
+  TEXT,
+  Section,
+  Eyebrow,
+  AccentLink,
+} from "./primitives";
+
+export { AuthorHero, type AuthorHeroProps } from "./author-hero";
+export { AuthorBio, type AuthorBioProps } from "./author-bio";
+export { BookSpotlight, type BookSpotlightProps } from "./book-spotlight";
+export { BookGrid, type BookGridProps } from "./book-grid";
+export { Newsletter, type NewsletterProps } from "./newsletter";
+export { Contact, type ContactProps } from "./contact";
+export { Gallery, type GalleryProps } from "./gallery";
+export { Form, type FormProps } from "./form";
+export { Pricing, type PricingProps } from "./pricing";
+export { Testimonials, type TestimonialsProps } from "./testimonials";
+export { Faq, type FaqProps } from "./faq";

package/src/blocks/newsletter.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+/**
+ * Newsletter capture — a client island. Presentational + self-contained: if
+ * `actionUrl` is set it POSTs `{ email }` there (the app's subscribe endpoint);
+ * otherwise it shows a client-side thank-you. Real delivery is wired by the app
+ * (Phase 1) or the shared Convex component (Phase 2) via `actionUrl`.
+ */
+import { useState, type FormEvent } from "react";
+import { ACCENT, BG, BODY, Eyebrow, HAIRLINE, HEADING, MUTED, Section, TEXT } from "./primitives";
+
+export interface NewsletterProps {
+  eyebrow?: string;
+  heading?: string;
+  body?: string;
+  placeholder?: string;
+  cta?: string;
+  actionUrl?: string;
+}
+
+export function Newsletter({
+  eyebrow,
+  heading = "Stay in the loop",
+  body = "New releases, reading notes, the occasional behind-the-scenes. No spam.",
+  placeholder = "you@email.com",
+  cta = "Subscribe",
+  actionUrl,
+}: NewsletterProps) {
+  const [email, setEmail] = useState("");
+  const [state, setState] = useState<"idle" | "loading" | "done" | "error">("idle");
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (!email || state === "loading") return;
+    setState("loading");
+    try {
+      if (actionUrl) {
+        const res = await fetch(actionUrl, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ email }),
+        });
+        if (!res.ok) throw new Error("failed");
+      }
+      setState("done");
+    } catch {
+      setState("error");
+    }
+  }
+
+  return (
+    <Section narrow tint>
+      <div className="text-center">
+        <Eyebrow>{eyebrow}</Eyebrow>
+        <h2 className="text-[clamp(1.5rem,3.5vw,2.25rem)] font-light" style={{ fontFamily: HEADING, color: TEXT }}>
+          {heading}
+        </h2>
+        <p className="mx-auto mt-4 max-w-md text-[1.0625rem] leading-relaxed" style={{ fontFamily: BODY, color: MUTED }}>
+          {body}
+        </p>
+        {state === "done" ? (
+          <p className="mt-8 text-base" style={{ fontFamily: BODY, color: ACCENT }}>
+            Thanks — you’re on the list.
+          </p>
+        ) : (
+          <form onSubmit={onSubmit} className="mx-auto mt-8 flex max-w-md flex-col gap-3 sm:flex-row">
+            <input
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder={placeholder}
+              className="min-w-0 flex-1 px-4 py-3 text-[15px] outline-none"
+              style={{
+                fontFamily: BODY,
+                color: TEXT,
+                background: BG,
+                border: `1px solid ${HAIRLINE}`,
+                borderRadius: "var(--pb-radius, 4px)",
+              }}
+            />
+            <button
+              type="submit"
+              disabled={state === "loading"}
+              className="px-6 py-3 text-[14px] font-medium tracking-wide transition-opacity hover:opacity-80 disabled:opacity-50"
+              style={{ fontFamily: BODY, background: ACCENT, color: BG, borderRadius: "var(--pb-radius, 4px)" }}
+            >
+              {state === "loading" ? "…" : cta}
+            </button>
+          </form>
+        )}
+        {state === "error" ? (
+          <p className="mt-3 text-sm" style={{ fontFamily: BODY, color: "#c0392b" }}>
+            Something went wrong — try again.
+          </p>
+        ) : null}
+      </div>
+    </Section>
+  );
+}