@jimmy_harika/websitekit 0.3.1 → 0.5.0

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

@@ -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/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/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<

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