@jimmy_harika/websitekit 0.4.0 → 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/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>
   );
 }

package/src/theme.ts

@@ -28,6 +28,8 @@ function spacingScale(s: ThemeTokens["spacing"]): string {
 export function themeVars(theme: ThemeTokens): CSSProperties {
   const heading = fontStack(theme.fontHeading, "serif");
   const body = fontStack(theme.fontBody, "sans-serif");
+  // v0.5 optional treatments — computed here so blocks only ever read vars.
+  const filled = theme.buttonStyle !== "outline";
   const vars: Record<string, string> = {
     // legacy storefront tokens (existing renderers depend on these)
     "--sf-font-heading": heading,
@@ -46,6 +48,13 @@ export function themeVars(theme: ThemeTokens): CSSProperties {
     "--pb-color-muted": theme.colors.muted,
     "--pb-radius": radiusPx(theme.radius),
     "--pb-spacing": spacingScale(theme.spacing),
+    // v0.5: heading case — blocks apply `textTransform: var(--pb-heading-case, none)`.
+    "--pb-heading-case": theme.headingCase === "uppercase" ? "uppercase" : "none",
+    // v0.5: button treatment — filled (bg=primary, fg=page bg, border=primary)
+    // or outline (transparent bg, fg=text, border=accent). Blocks read the vars.
+    "--pb-btn-bg": filled ? theme.colors.primary : "transparent",
+    "--pb-btn-fg": filled ? theme.colors.bg : theme.colors.text,
+    "--pb-btn-border": filled ? theme.colors.primary : theme.colors.accent,
   };
   return {
     ...(vars as CSSProperties),
@@ -73,6 +82,8 @@ export const FONT_PAIRS: { id: string; label: string; heading: string; body: str
   { id: "modern", label: "Modern", heading: "Fraunces", body: "Manrope" },
   { id: "grotesk", label: "Grotesk", heading: "Space Grotesk", body: "Inter" },
   { id: "warm", label: "Warm", heading: "DM Serif Display", body: "DM Sans" },
+  { id: "cinematic", label: "Cinematic", heading: "Archivo", body: "Roboto Mono" },
+  { id: "romantic", label: "Romantic", heading: "Cormorant Garamond", body: "EB Garamond" },
 ];
 
 /** Curated palettes offered in the theme panel. */
@@ -82,4 +93,6 @@ export const PALETTES: { id: string; label: string; colors: ThemeTokens["colors"
   { id: "blush", label: "Blush", colors: { bg: "#fbf6f3", text: "#2b2422", primary: "#2b2422", accent: "#c98b7e", muted: "#8a7d78" } },
   { id: "sage", label: "Sage", colors: { bg: "#f4f6f2", text: "#22281f", primary: "#22281f", accent: "#7c8a6a", muted: "#7a8073" } },
   { id: "cobalt", label: "Cobalt", colors: { bg: "#ffffff", text: "#0f172a", primary: "#0f172a", accent: "#2f5cff", muted: "#64748b" } },
+  { id: "porcelain", label: "Porcelain", colors: { bg: "#faf9f6", text: "#1c1a17", primary: "#1c1a17", accent: "#a8894e", muted: "#7c766b" } },
+  { id: "onyx-mono", label: "Onyx Mono", colors: { bg: "#0c0c0c", text: "#f2efe9", primary: "#f2efe9", accent: "#9c968b", muted: "#7d786f" } },
 ];