@jimmy_harika/websitekit 0.3.1 → 0.5.0

package/src/blocks/nav.tsx

@@ -0,0 +1,149 @@
+/**
+ * NavBlock — the site header as a section. Server-safe: desktop links are pure
+ * markup with CSS-only hover/focus dropdowns; only the mobile hamburger menu is
+ * a client island (./nav-menu). Elegant, letterspaced small-caps via tokens.
+ *
+ * `transparent` floats the nav over the NEXT section (absolute, light-on-dark
+ * text — pair it with a full-bleed hero). `sticky` pins an opaque nav to the
+ * top on scroll (ignored when transparent).
+ */
+import { renderImage, renderText, type EditPrimitives } from "../editable";
+import { NavMenu } from "./nav-menu";
+import { BG, BODY, HAIRLINE, HEADING, TEXT } from "./primitives";
+
+export interface NavLinkItem {
+  label: string;
+  href: string;
+  children?: { label: string; href: string }[];
+}
+
+export interface NavBlockProps {
+  logoText?: string;
+  logoImage?: string;
+  links?: NavLinkItem[];
+  layout?: "split-center" | "left" | "center";
+  /** Float over the next section (light text — pair with a photo hero). */
+  transparent?: boolean;
+  /** Pin an opaque nav to the top on scroll (ignored when transparent). */
+  sticky?: boolean;
+  edit?: EditPrimitives;
+}
+
+export function NavBlock({
+  logoText,
+  logoImage,
+  links = [],
+  layout = "left",
+  transparent = false,
+  sticky = false,
+  edit,
+}: NavBlockProps) {
+  const color = transparent ? "#ffffff" : TEXT;
+
+  const logo = logoImage ? (
+    renderImage(edit, {
+      field: "logoImage",
+      src: logoImage,
+      alt: logoText ?? "Logo",
+      className: "h-8 w-auto object-contain",
+      style: transparent ? { filter: "brightness(0) invert(1)" } : undefined,
+    })
+  ) : (
+    renderText(edit, {
+      field: "logoText",
+      value: logoText ?? "",
+      as: "span",
+      placeholder: "Studio Name",
+      className: "text-[15px] uppercase tracking-[0.35em]",
+      style: { fontFamily: HEADING, color, fontWeight: 400 },
+    })
+  );
+
+  const linkList = (items: NavLinkItem[]) => (
+    <ul className="flex items-center gap-8">
+      {items.map((link, i) => (
+        <li key={i} className="group relative">
+          <a
+            href={link.href || "#"}
+            className="text-[11px] uppercase tracking-[0.25em] transition-opacity hover:opacity-70"
+            style={{ fontFamily: BODY, color }}
+          >
+            {link.label}
+          </a>
+          {link.children && link.children.length > 0 && (
+            <div className="invisible absolute left-1/2 top-full z-30 -translate-x-1/2 pt-3 opacity-0 transition-all duration-200 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100">
+              <div
+                className="flex min-w-[180px] flex-col gap-2.5 px-5 py-4"
+                style={{
+                  background: BG,
+                  border: `1px solid ${HAIRLINE}`,
+                  borderRadius: "var(--pb-radius, 4px)",
+                }}
+              >
+                {link.children.map((child, j) => (
+                  <a
+                    key={j}
+                    href={child.href || "#"}
+                    className="whitespace-nowrap text-[11px] uppercase tracking-[0.2em] transition-opacity hover:opacity-70"
+                    style={{ fontFamily: BODY, color: TEXT }}
+                  >
+                    {child.label}
+                  </a>
+                ))}
+              </div>
+            </div>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+
+  // split-center: links split around a centered logo. Odd counts weigh left.
+  const splitAt = Math.ceil(links.length / 2);
+  const inner =
+    layout === "center" ? (
+      <div className="flex flex-col items-center gap-5">
+        {logo}
+        <nav aria-label="Site" className="hidden md:block">
+          {linkList(links)}
+        </nav>
+      </div>
+    ) : layout === "split-center" ? (
+      <div className="flex items-center justify-between gap-6">
+        <nav aria-label="Site" className="hidden flex-1 justify-end md:flex">
+          {linkList(links.slice(0, splitAt))}
+        </nav>
+        <div className="shrink-0 md:px-6">{logo}</div>
+        <nav aria-label="Site" className="hidden flex-1 md:flex">
+          {linkList(links.slice(splitAt))}
+        </nav>
+      </div>
+    ) : (
+      <div className="flex items-center justify-between gap-6">
+        {logo}
+        <nav aria-label="Site" className="hidden md:block">
+          {linkList(links)}
+        </nav>
+      </div>
+    );
+
+  const position = transparent
+    ? "absolute inset-x-0 top-0 z-40"
+    : sticky
+      ? "sticky top-0 z-40"
+      : "relative";
+
+  return (
+    <header
+      className={`${position} w-full px-6 py-5 sm:px-10`}
+      style={transparent ? undefined : { background: BG, borderBottom: `1px solid ${HAIRLINE}` }}
+    >
+      <div className="relative mx-auto max-w-6xl">
+        {inner}
+        <div className="absolute right-0 top-1/2 -translate-y-1/2">
+          <NavMenu links={links} logoText={logoText} light={transparent} />
+        </div>
+      </div>
+    </header>
+  );
+}

package/src/blocks/primitives.tsx

@@ -22,6 +22,16 @@ export const TINT = "color-mix(in srgb, var(--pb-color-text, #1a1a1a) 4%, transp
 /** A hairline border that adapts to the theme. */
 export const HAIRLINE = "color-mix(in srgb, var(--pb-color-text, #1a1a1a) 12%, transparent)";
 
+/* ── v0.5 theme treatments (computed by themeVars from buttonStyle/headingCase) ── */
+/** Button surface — primary when the theme is "filled", transparent when "outline". */
+export const BTN_BG = "var(--pb-btn-bg, var(--pb-color-primary, #1a1a1a))";
+/** Button label color matching BTN_BG. */
+export const BTN_FG = "var(--pb-btn-fg, var(--pb-color-bg, #ffffff))";
+/** Button border matching the theme's button treatment. */
+export const BTN_BORDER = "var(--pb-btn-border, var(--pb-color-primary, #1a1a1a))";
+/** Heading text-transform driven by the theme ("none" | "uppercase"). */
+export const HEADING_CASE = "var(--pb-heading-case, none)" as CSSProperties["textTransform"];
+
 /** One book, as a block sees it — purely presentational. The app resolves live
  *  data (e.g. an author's real books) into this shape before render. */
 export interface BookItem {
@@ -74,6 +84,50 @@ export function Eyebrow({ children }: { children?: ReactNode }) {
   );
 }
 
+/**
+ * Theme-driven button link (v0.5). Reads the `--pb-btn-*` vars so one component
+ * follows the theme's `buttonStyle` (filled/outline). `outline` forces the
+ * outline treatment regardless of theme (e.g. teaser cards).
+ */
+export function TokenButton({
+  href,
+  children,
+  outline = false,
+}: {
+  href: string;
+  children: ReactNode;
+  outline?: boolean;
+}) {
+  const external = href?.startsWith("http");
+  return (
+    <a
+      href={href || "#"}
+      target={external ? "_blank" : undefined}
+      rel={external ? "noopener noreferrer" : undefined}
+      className="inline-flex items-center justify-center px-6 py-3 text-[12px] font-medium uppercase tracking-[0.2em] transition-opacity hover:opacity-80"
+      style={
+        outline
+          ? {
+              background: "transparent",
+              color: TEXT,
+              border: `1px solid ${ACCENT}`,
+              borderRadius: RADIUS,
+              fontFamily: BODY,
+            }
+          : {
+              background: BTN_BG,
+              color: BTN_FG,
+              border: `1px solid ${BTN_BORDER}`,
+              borderRadius: RADIUS,
+              fontFamily: BODY,
+            }
+      }
+    >
+      {children}
+    </a>
+  );
+}
+
 /** Pill / link button in the theme accent — used for book buy links + CTAs. */
 export function AccentLink({
   href,

package/src/blocks/reveal.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+/**
+ * <Reveal> — scroll-reveal wrapper (v0.5). Fades + slides a section in the
+ * first time ~15% of it enters the viewport. Children render immediately (the
+ * wrapper is a plain block div — no layout shift, only opacity/transform).
+ * Respects `prefers-reduced-motion: reduce` and degrades to a static render
+ * when IntersectionObserver is unavailable. The production PageRenderer wraps
+ * sections in this when `doc.theme.reveal === true`; the editor canvas never
+ * does (reveals would fight inline editing).
+ */
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+export interface RevealProps {
+  children: ReactNode;
+}
+
+export function Reveal({ children }: RevealProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [shown, setShown] = useState(false);
+  // Becomes true only when we know we can (and should) animate — keeps the
+  // server render static so no-JS/reduced-motion visitors see content.
+  const [armed, setArmed] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const reduced =
+      typeof window.matchMedia === "function" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduced || typeof IntersectionObserver === "undefined") {
+      setShown(true);
+      return;
+    }
+    // Already in view at hydration (above the fold): stay static instead of
+    // hiding then re-animating content the visitor is already reading.
+    const rect = el.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) {
+      setShown(true);
+      return;
+    }
+    // Sections taller than the viewport can never reach a 0.15 ratio — scale
+    // the threshold down so they still reveal.
+    const threshold = Math.min(0.15, (window.innerHeight / Math.max(el.offsetHeight, 1)) * 0.15);
+    setArmed(true);
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setShown(true);
+            io.disconnect();
+          }
+        }
+      },
+      { threshold },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+
+  const hidden = armed && !shown;
+  return (
+    <div
+      ref={ref}
+      style={{
+        opacity: hidden ? 0 : 1,
+        transform: hidden ? "translateY(24px)" : "none",
+        transition: "opacity 500ms ease-out, transform 500ms ease-out",
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/blocks/site-footer.tsx

@@ -0,0 +1,190 @@
+/**
+ * SiteFooterBlock — site footer as a section. Variants:
+ * - "mega":     Instagram thumb strip + handle, nav, socials, bottom bar
+ * - "minimal":  one-line © + socials
+ * - "centered": nav + socials + © stacked and centered
+ * Server-safe; the optional back-to-top control is a micro client island.
+ * Social links render as letterspaced small-caps text (icon sets don't cover
+ * every network consistently — type does, and matches the aesthetic).
+ */
+import { BackToTop } from "./back-to-top";
+import { BODY, HAIRLINE, MUTED, TEXT } from "./primitives";
+
+export type SiteFooterSocialKind =
+  | "instagram"
+  | "facebook"
+  | "pinterest"
+  | "tiktok"
+  | "x"
+  | "email";
+
+export interface SiteFooterSocial {
+  kind: SiteFooterSocialKind;
+  href: string;
+}
+
+export interface SiteFooterNavLink {
+  label: string;
+  href: string;
+}
+
+export interface SiteFooterBlockProps {
+  variant?: "mega" | "minimal" | "centered";
+  instagramHandle?: string;
+  /** Thumbnail strip (mega variant) — recent-work square crops. */
+  instagramImages?: string[];
+  social?: SiteFooterSocial[];
+  nav?: SiteFooterNavLink[];
+  copyright?: string;
+  backToTop?: boolean;
+}
+
+const SOCIAL_LABEL: Record<SiteFooterSocialKind, string> = {
+  instagram: "Instagram",
+  facebook: "Facebook",
+  pinterest: "Pinterest",
+  tiktok: "TikTok",
+  x: "X",
+  email: "Email",
+};
+
+function SocialLinks({ social }: { social: SiteFooterSocial[] }) {
+  if (social.length === 0) return null;
+  return (
+    <ul className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
+      {social.map((s, i) => (
+        <li key={i}>
+          <a
+            href={s.href || "#"}
+            target={s.kind === "email" ? undefined : "_blank"}
+            rel={s.kind === "email" ? undefined : "noopener noreferrer"}
+            className="text-[11px] uppercase tracking-[0.25em] transition-opacity hover:opacity-70"
+            style={{ fontFamily: BODY, color: TEXT }}
+          >
+            {SOCIAL_LABEL[s.kind]}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function NavLinks({ nav }: { nav: SiteFooterNavLink[] }) {
+  if (nav.length === 0) return null;
+  return (
+    <ul className="flex flex-wrap items-center justify-center gap-x-8 gap-y-2">
+      {nav.map((link, i) => (
+        <li key={i}>
+          <a
+            href={link.href || "#"}
+            className="text-[11px] uppercase tracking-[0.25em] transition-opacity hover:opacity-70"
+            style={{ fontFamily: BODY, color: TEXT }}
+          >
+            {link.label}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Copyright({ text }: { text?: string }) {
+  return (
+    <p className="text-[11px] tracking-[0.1em]" style={{ fontFamily: BODY, color: MUTED }}>
+      {text || `© ${new Date().getFullYear()}`}
+    </p>
+  );
+}
+
+export function SiteFooterBlock({
+  variant = "centered",
+  instagramHandle,
+  instagramImages = [],
+  social = [],
+  nav = [],
+  copyright,
+  backToTop = false,
+}: SiteFooterBlockProps) {
+  if (variant === "minimal") {
+    return (
+      <footer
+        className="w-full px-6 py-8 sm:px-10"
+        style={{ borderTop: `1px solid ${HAIRLINE}` }}
+      >
+        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 sm:flex-row">
+          <Copyright text={copyright} />
+          <div className="flex items-center gap-6">
+            <SocialLinks social={social} />
+            {backToTop && <BackToTop />}
+          </div>
+        </div>
+      </footer>
+    );
+  }
+
+  if (variant === "mega") {
+    const igHref =
+      social.find((s) => s.kind === "instagram")?.href ||
+      (instagramHandle ? `https://instagram.com/${instagramHandle.replace(/^@/, "")}` : "#");
+    return (
+      <footer className="w-full" style={{ borderTop: `1px solid ${HAIRLINE}` }}>
+        {instagramImages.length > 0 && (
+          <a
+            href={igHref}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={instagramHandle ? `Instagram ${instagramHandle}` : "Instagram"}
+            className="grid grid-cols-3 sm:grid-cols-6"
+          >
+            {instagramImages.slice(0, 6).map((src, i) => (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                key={i}
+                src={src}
+                alt=""
+                loading="lazy"
+                className={`aspect-square w-full object-cover transition-opacity hover:opacity-90 ${i >= 3 ? "hidden sm:block" : ""}`}
+              />
+            ))}
+          </a>
+        )}
+        <div className="mx-auto flex max-w-6xl flex-col items-center gap-8 px-6 py-14 sm:px-10">
+          {instagramHandle && (
+            <a
+              href={igHref}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-[13px] uppercase tracking-[0.35em] transition-opacity hover:opacity-70"
+              style={{ fontFamily: BODY, color: TEXT }}
+            >
+              @{instagramHandle.replace(/^@/, "")}
+            </a>
+          )}
+          <NavLinks nav={nav} />
+          <SocialLinks social={social} />
+        </div>
+        <div className="px-6 py-5 sm:px-10" style={{ borderTop: `1px solid ${HAIRLINE}` }}>
+          <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-3 sm:flex-row">
+            <Copyright text={copyright} />
+            {backToTop && <BackToTop />}
+          </div>
+        </div>
+      </footer>
+    );
+  }
+
+  // centered
+  return (
+    <footer
+      className="w-full px-6 py-14 sm:px-10"
+      style={{ borderTop: `1px solid ${HAIRLINE}` }}
+    >
+      <div className="mx-auto flex max-w-4xl flex-col items-center gap-7 text-center">
+        <NavLinks nav={nav} />
+        <SocialLinks social={social} />
+        <Copyright text={copyright} />
+        {backToTop && <BackToTop />}
+      </div>
+    </footer>
+  );
+}

package/src/blocks/slider.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+/**
+ * <Slider> — the shared client island behind every sliding block (v0.5:
+ * hero-slideshow, testimonial-slider). Owns index state + next/prev + optional
+ * autoplay; slides are pre-rendered ReactNodes (server components pass them
+ * in), so blocks stay server-safe and only this primitive ships JS.
+ *
+ * Variants:
+ * - "fade":  slides stacked, crossfade. With `overlay` set the overlay defines
+ *            the container height (slides all absolute behind it — hero-style);
+ *            without it the ACTIVE slide is in-flow and defines the height.
+ * - "track": center-dominant filmstrip — fixed-width slides on a translating
+ *            flex track, neighbors peeking on both sides.
+ *
+ * Accessibility: arrows are real <button>s (keyboard-operable), slides are
+ * labelled groups, inactive fade slides are aria-hidden. Autoplay is disabled
+ * under `prefers-reduced-motion` and stops on manual navigation.
+ */
+import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+
+export interface SliderProps {
+  slides: ReactNode[];
+  variant?: "fade" | "track";
+  /** Milliseconds between auto-advances. 0/undefined = no autoplay. */
+  autoplayMs?: number;
+  arrows?: "overlay" | "below" | "none";
+  /** Extra classes on the root (size fade sliders here, e.g. `min-h-[70vh]`). */
+  className?: string;
+  /** Static content rendered above fade slides (defines height — hero copy). */
+  overlay?: ReactNode;
+  /** CSS length of each track-mode slide, e.g. "min(72vw, 880px)". */
+  slideWidth?: string;
+  /** Accessible name for the carousel region. */
+  label?: string;
+}
+
+const TRACK_GAP_PX = 24;
+
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mq.matches);
+    const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+
+export function Slider({
+  slides,
+  variant = "fade",
+  autoplayMs,
+  arrows = "overlay",
+  className = "",
+  overlay,
+  slideWidth = "min(72vw, 880px)",
+  label = "Slideshow",
+}: SliderProps) {
+  const count = slides.length;
+  const [index, setIndex] = useState(0);
+  const interactedRef = useRef(false);
+  const reduced = usePrefersReducedMotion();
+
+  const go = (delta: number, manual = false) => {
+    if (manual) interactedRef.current = true;
+    setIndex((i) => (i + delta + count) % count);
+  };
+
+  useEffect(() => {
+    if (!autoplayMs || autoplayMs <= 0 || count < 2 || reduced) return;
+    const t = window.setInterval(() => {
+      if (!interactedRef.current) setIndex((i) => (i + 1) % count);
+    }, autoplayMs);
+    return () => window.clearInterval(t);
+  }, [autoplayMs, count, reduced]);
+
+  if (count === 0) return null;
+  const duration = reduced ? "0ms" : undefined;
+  const showArrows = count > 1 && arrows !== "none";
+
+  const arrowButtons = (overlayStyle: boolean) => (
+    <>
+      <ArrowButton dir="prev" overlay={overlayStyle} onClick={() => go(-1, true)} />
+      <ArrowButton dir="next" overlay={overlayStyle} onClick={() => go(1, true)} />
+    </>
+  );
+
+  if (variant === "track") {
+    const w = `(${slideWidth})`;
+    return (
+      <section aria-roledescription="carousel" aria-label={label} className={className}>
+        <div className="overflow-hidden">
+          <div
+            className="flex transition-transform duration-500 ease-out"
+            style={{
+              gap: `${TRACK_GAP_PX}px`,
+              transform: `translateX(calc(50% - ${w} / 2 - ${index} * (${w} + ${TRACK_GAP_PX}px)))`,
+              transitionDuration: duration,
+            }}
+          >
+            {slides.map((slide, i) => (
+              <div
+                key={i}
+                role="group"
+                aria-roledescription="slide"
+                aria-label={`${i + 1} of ${count}`}
+                className="shrink-0 transition-opacity duration-500"
+                style={{ width: slideWidth, opacity: i === index ? 1 : 0.45, transitionDuration: duration }}
+              >
+                {slide}
+              </div>
+            ))}
+          </div>
+        </div>
+        {showArrows && (
+          <div className="mt-6 flex justify-center gap-3">{arrowButtons(false)}</div>
+        )}
+      </section>
+    );
+  }
+
+  // fade
+  const sizedByOverlay = overlay != null;
+  return (
+    <section
+      aria-roledescription="carousel"
+      aria-label={label}
+      className={`relative overflow-hidden ${className}`}
+    >
+      {slides.map((slide, i) => {
+        const active = i === index;
+        const style: CSSProperties = {
+          opacity: active ? 1 : 0,
+          transition: "opacity 700ms ease-out",
+          transitionDuration: duration,
+          pointerEvents: active ? undefined : "none",
+        };
+        return (
+          <div
+            key={i}
+            role="group"
+            aria-roledescription="slide"
+            aria-label={`${i + 1} of ${count}`}
+            aria-hidden={!active}
+            className={sizedByOverlay || !active ? "absolute inset-0" : "relative"}
+            style={style}
+          >
+            {slide}
+          </div>
+        );
+      })}
+      {overlay != null && <div className="relative z-10">{overlay}</div>}
+      {showArrows && arrows === "overlay" && (
+        <div className="pointer-events-none absolute inset-x-0 top-1/2 z-20 flex -translate-y-1/2 justify-between px-4">
+          {arrowButtons(true)}
+        </div>
+      )}
+      {showArrows && arrows === "below" && (
+        <div className="relative z-10 mt-6 flex justify-center gap-3">{arrowButtons(false)}</div>
+      )}
+    </section>
+  );
+}
+
+function ArrowButton({
+  dir,
+  overlay,
+  onClick,
+}: {
+  dir: "prev" | "next";
+  overlay: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={dir === "prev" ? "Previous slide" : "Next slide"}
+      className={
+        overlay
+          ? "pointer-events-auto flex size-10 items-center justify-center rounded-full bg-black/30 text-lg text-white transition hover:bg-black/50"
+          : "flex size-10 items-center justify-center rounded-full border text-lg transition hover:opacity-70"
+      }
+      style={
+        overlay
+          ? undefined
+          : {
+              borderColor: "color-mix(in srgb, var(--pb-color-text, #1a1a1a) 25%, transparent)",
+              color: "var(--pb-color-text, #1a1a1a)",
+            }
+      }
+    >
+      <span aria-hidden>{dir === "prev" ? "‹" : "›"}</span>
+    </button>
+  );
+}