@jimmy_harika/websitekit 0.4.0 → 0.5.1

package/src/blocks/teaser-cards.tsx

@@ -0,0 +1,77 @@
+/**
+ * TeaserCardsBlock — 3-up internal-navigation cards (e.g. Weddings / Portraits
+ * / About) with outline buttons. Server-safe, edit-aware heading.
+ */
+import { renderText, type EditPrimitives } from "../editable";
+import {
+  BODY,
+  HAIRLINE,
+  HEADING,
+  HEADING_CASE,
+  MUTED,
+  RADIUS,
+  Section,
+  TEXT,
+  TokenButton,
+} from "./primitives";
+
+export interface TeaserCardItem {
+  title: string;
+  sub?: string;
+  href: string;
+  buttonLabel?: string;
+}
+
+export interface TeaserCardsBlockProps {
+  heading?: string;
+  items?: TeaserCardItem[];
+  edit?: EditPrimitives;
+}
+
+export function TeaserCardsBlock({ heading, items = [], edit }: TeaserCardsBlockProps) {
+  return (
+    <Section>
+      {(heading || edit) &&
+        renderText(edit, {
+          field: "heading",
+          value: heading ?? "",
+          as: "h2",
+          placeholder: "Where to next",
+          className: "mb-10 text-center text-[clamp(1.6rem,4vw,2.5rem)] font-light",
+          style: { fontFamily: HEADING, color: TEXT, textTransform: HEADING_CASE },
+        })}
+      {items.length === 0 ? (
+        <p className="py-8 text-center text-sm" style={{ color: MUTED, fontFamily: BODY }}>
+          Add teaser cards (title, line, link).
+        </p>
+      ) : (
+        <div className="grid gap-5 md:grid-cols-3">
+          {items.map((item, i) => (
+            <div
+              key={i}
+              className="flex flex-col items-center gap-4 px-8 py-12 text-center"
+              style={{ border: `1px solid ${HAIRLINE}`, borderRadius: RADIUS }}
+            >
+              <h3
+                className="text-[clamp(1.25rem,2.5vw,1.75rem)] font-light"
+                style={{ fontFamily: HEADING, color: TEXT, textTransform: HEADING_CASE }}
+              >
+                {item.title}
+              </h3>
+              {item.sub && (
+                <p className="max-w-xs text-[15px] leading-relaxed" style={{ fontFamily: BODY, color: MUTED }}>
+                  {item.sub}
+                </p>
+              )}
+              <div className="mt-auto pt-4">
+                <TokenButton href={item.href} outline>
+                  {item.buttonLabel || "Explore"}
+                </TokenButton>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </Section>
+  );
+}

package/src/blocks/testimonial-slider.tsx

@@ -0,0 +1,167 @@
+/**
+ * TestimonialSliderBlock — kind words with three treatments:
+ * - "overlay":     full-bleed photo behind each quote, crossfade slider
+ * - "split-panel": quote panel left / portrait right, both swap together
+ * - "band":        static tinted band with up to three quotes (no slider)
+ * Server-safe; sliding variants reuse the shared <Slider> island.
+ */
+import { renderText, type EditPrimitives } from "../editable";
+import { ACCENT, BODY, HEADING, MUTED, RADIUS, Section, TEXT, TINT } from "./primitives";
+import { Slider } from "./slider";
+
+export interface TestimonialSlideItem {
+  quote: string;
+  name: string;
+  image?: string;
+}
+
+export interface TestimonialSliderBlockProps {
+  heading?: string;
+  items?: TestimonialSlideItem[];
+  variant?: "overlay" | "split-panel" | "band";
+  edit?: EditPrimitives;
+}
+
+export function TestimonialSliderBlock({
+  heading,
+  items = [],
+  variant = "split-panel",
+  edit,
+}: TestimonialSliderBlockProps) {
+  if (items.length === 0) {
+    return (
+      <Section>
+        <p className="py-8 text-center text-sm" style={{ color: MUTED, fontFamily: BODY }}>
+          Add testimonials (quote, name, optional photo).
+        </p>
+      </Section>
+    );
+  }
+
+  const headingEl =
+    heading || edit
+      ? renderText(edit, {
+          field: "heading",
+          value: heading ?? "",
+          as: "h2",
+          placeholder: "Kind words",
+          className: "mb-10 text-center text-[11px] uppercase tracking-[0.3em]",
+          style: { fontFamily: BODY, color: ACCENT },
+        })
+      : null;
+
+  if (variant === "overlay") {
+    return (
+      <Slider
+        variant="fade"
+        arrows="overlay"
+        label={heading || "Testimonials"}
+        slides={items.map((item, i) => (
+          <div key={i} className="relative">
+            {item.image && (
+              <div className="absolute inset-0">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={item.image} alt="" loading="lazy" className="h-full w-full object-cover" />
+              </div>
+            )}
+            <div
+              className="absolute inset-0"
+              style={{ background: item.image ? "rgba(0,0,0,0.55)" : TINT }}
+            />
+            <figure className="relative flex min-h-[70vh] flex-col items-center justify-center px-8 py-20 text-center sm:px-16">
+              <blockquote
+                className="max-w-3xl text-[clamp(1.3rem,3vw,2rem)] font-light italic leading-snug"
+                style={{ fontFamily: HEADING, color: item.image ? "#ffffff" : TEXT }}
+              >
+                &ldquo;{item.quote}&rdquo;
+              </blockquote>
+              <figcaption
+                className="mt-8 text-[11px] uppercase tracking-[0.3em]"
+                style={{ fontFamily: BODY, color: item.image ? "rgba(255,255,255,0.75)" : MUTED }}
+              >
+                {item.name}
+              </figcaption>
+            </figure>
+          </div>
+        ))}
+      />
+    );
+  }
+
+  if (variant === "split-panel") {
+    return (
+      <Section>
+        {headingEl}
+        <Slider
+          variant="fade"
+          arrows="below"
+          label={heading || "Testimonials"}
+          slides={items.map((item, i) => (
+            <div key={i} className="grid items-stretch gap-0 md:grid-cols-2">
+              <figure
+                className="flex flex-col justify-center px-8 py-14 sm:px-12"
+                style={{ background: TINT, borderRadius: RADIUS }}
+              >
+                <blockquote
+                  className="text-[clamp(1.15rem,2.4vw,1.6rem)] font-light italic leading-snug"
+                  style={{ fontFamily: HEADING, color: TEXT }}
+                >
+                  &ldquo;{item.quote}&rdquo;
+                </blockquote>
+                <figcaption
+                  className="mt-6 text-[11px] uppercase tracking-[0.3em]"
+                  style={{ fontFamily: BODY, color: MUTED }}
+                >
+                  {item.name}
+                </figcaption>
+              </figure>
+              <div
+                className="hidden aspect-[4/3] w-full overflow-hidden md:block md:aspect-auto"
+                style={{ borderRadius: RADIUS }}
+              >
+                {item.image && (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img src={item.image} alt={item.name} loading="lazy" className="h-full w-full object-cover" />
+                )}
+              </div>
+            </div>
+          ))}
+        />
+      </Section>
+    );
+  }
+
+  // band — static, up to three quotes.
+  return (
+    <Section tint>
+      {headingEl}
+      <div className="grid gap-10 md:grid-cols-3">
+        {items.slice(0, 3).map((item, i) => (
+          <figure key={i} className="text-center">
+            {item.image && (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={item.image}
+                alt={item.name}
+                loading="lazy"
+                className="mx-auto mb-5 size-14 rounded-full object-cover"
+              />
+            )}
+            <blockquote
+              className="text-[15px] font-light italic leading-relaxed"
+              style={{ fontFamily: HEADING, color: TEXT }}
+            >
+              &ldquo;{item.quote}&rdquo;
+            </blockquote>
+            <figcaption
+              className="mt-4 text-[11px] uppercase tracking-[0.3em]"
+              style={{ fontFamily: BODY, color: MUTED }}
+            >
+              {item.name}
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+    </Section>
+  );
+}

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} />
     </>
   );
 }

package/src/model.ts

@@ -10,6 +10,8 @@
 
 export type ThemeRadius = "none" | "sm" | "md" | "lg";
 export type ThemeSpacing = "tight" | "normal" | "roomy";
+export type ThemeButtonStyle = "filled" | "outline";
+export type ThemeHeadingCase = "none" | "uppercase";
 
 /** Responsive breakpoints a section can be hidden on. mobile <640, tablet
  *  640–1024, desktop ≥1024 (Tailwind sm / lg boundaries). */
@@ -31,6 +33,12 @@ export interface ThemeTokens {
   colors: ThemePalette;
   radius: ThemeRadius;
   spacing: ThemeSpacing;
+  /** Button treatment across all blocks (v0.5, optional — defaults to "filled"). */
+  buttonStyle?: ThemeButtonStyle;
+  /** Heading text-transform across all blocks (v0.5, optional — defaults to "none"). */
+  headingCase?: ThemeHeadingCase;
+  /** Scroll-reveal sections on the published site (v0.5, optional — off by default). */
+  reveal?: boolean;
 }
 
 export interface Section {

package/src/renderer/index.tsx

@@ -1,36 +1,44 @@
 /**
- * Production renderer — RSC-safe. No client imports, no hooks. The published
- * site uses this: server-renders a `PageDocument` to static HTML, theme tokens
- * on the container, each section via its catalog `Component` (no `edit` prop →
- * pure/static). The editor canvas renders the same components with `edit`
- * injected (see editor/Canvas).
+ * Production renderer — RSC-safe. The published site uses this: server-renders
+ * a `PageDocument` to static HTML, theme tokens on the container, each section
+ * via its catalog `Component` (no `edit` prop → pure/static). The editor canvas
+ * renders the same components with `edit` injected (see editor/Canvas).
+ *
+ * The only client import is the `<Reveal>` island, used solely when
+ * `doc.theme.reveal === true` (v0.5 scroll-reveal). The editor canvas does NOT
+ * go through `renderSection`, so reveals never run while editing.
  */
-import { createElement, type ReactNode } from "react";
+import { createElement, Fragment, type ReactNode } from "react";
 import type { PageDocument, Section } from "../model";
 import { hideOnClasses } from "../model";
 import { type Catalog, getDefinition, resolveProps } from "../registry";
 import { googleFontsHref, themeVars } from "../theme";
+import { Reveal } from "../blocks/reveal";
 
-/** One section, statically. Unknown types render an inert placeholder. */
-export function renderSection(catalog: Catalog, section: Section): ReactNode {
+/**
+ * One section, statically. Unknown types render an inert placeholder.
+ * `reveal` (PageRenderer-only) wraps the section in the scroll-reveal island.
+ */
+export function renderSection(catalog: Catalog, section: Section, reveal = false): ReactNode {
   const def = getDefinition(catalog, section.type);
   const visibility = hideOnClasses(section.hideOn);
+  let node: ReactNode;
   if (!def) {
-    return createElement(
+    node = createElement(
       "div",
-      {
-        key: section.id,
-        className: `px-6 py-8 text-center text-xs opacity-40 ${visibility}`,
-      },
+      { className: `px-6 py-8 text-center text-xs opacity-40 ${visibility}` },
       `Unknown section: ${section.type}`,
     );
+  } else {
+    const props = resolveProps(def, section.props);
+    // Wrap only when the section is hidden on a breakpoint — keeps the DOM flat
+    // for normally-visible sections (no wrapper to disturb full-bleed layouts).
+    node = visibility
+      ? createElement("div", { className: visibility }, createElement(def.Component, props))
+      : createElement(def.Component, props);
   }
-  const props = resolveProps(def, section.props);
-  // Wrap only when the section is hidden on a breakpoint — keeps the DOM flat
-  // for normally-visible sections (no wrapper to disturb full-bleed layouts).
-  if (!visibility) return createElement(def.Component, { key: section.id, ...props });
-  const el = createElement(def.Component, props);
-  return createElement("div", { key: section.id, className: visibility }, el);
+  if (reveal) node = createElement(Reveal, null, node);
+  return createElement(Fragment, { key: section.id }, node);
 }
 
 export function PageRenderer({
@@ -42,9 +50,12 @@ export function PageRenderer({
   catalog: Catalog;
   className?: string;
 }) {
+  const reveal = doc.theme.reveal === true;
   return (
     <div style={themeVars(doc.theme)} className={className}>
-      {doc.sections.map((section) => renderSection(catalog, section))}
+      {/* Section 0 is never reveal-wrapped: it's above the fold (static anyway)
+          and a wrapper div would defeat a sticky/transparent NavBlock there. */}
+      {doc.sections.map((section, i) => renderSection(catalog, section, reveal && i > 0))}
     </div>
   );
 }