@okjt/site 0.0.0-stage → 0.2.0

package/dist/PricingSection.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { Container, PillLink, SectionHeading } from "./ui.js";
+import { SECTION_OFFSET } from "./SectionNav.js";
+function PricingSection({ id = "pricing", eyebrow = "Pricing", title, text, plans, footnote }) {
+  return /* @__PURE__ */ jsx("section", { id, className: `${SECTION_OFFSET} py-24`, children: /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(
+      SectionHeading,
+      {
+        eyebrow,
+        title,
+        text
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mx-auto mt-14 grid max-w-5xl gap-6 md:grid-cols-2", children: plans.map((plan) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `relative flex flex-col overflow-hidden rounded-[2rem] p-8 sm:p-10 ${plan.highlight ? "bg-fill text-on-ink shadow-[0_40px_80px_-40px_color-mix(in_srgb,var(--okjt-shadow,var(--color-ink))_80%,transparent)]" : "border border-line bg-surface"}`,
+        children: [
+          plan.highlight && /* @__PURE__ */ jsx("div", { className: "absolute -right-16 -top-16 h-48 w-48 rounded-full bg-accent-soft/20 blur-2xl", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("div", { className: `text-xs font-semibold uppercase tracking-[0.2em] ${plan.highlight ? "text-accent-soft" : "text-accent"}`, children: plan.name }),
+          /* @__PURE__ */ jsx("div", { className: `mt-3 font-display text-3xl font-light tracking-tight sm:text-4xl ${plan.highlight ? "text-on-ink" : "text-ink"}`, children: plan.price }),
+          /* @__PURE__ */ jsx("div", { className: `mt-2 text-sm ${plan.highlight ? "text-on-ink/70" : "text-soft"}`, children: plan.tagline }),
+          /* @__PURE__ */ jsx("ul", { className: "mt-8 flex-1 space-y-3 text-sm", children: plan.lines.map((feature) => /* @__PURE__ */ jsxs("li", { className: "flex gap-3", children: [
+            /* @__PURE__ */ jsx("span", { className: `mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full ${plan.highlight ? "bg-on-ink/10 text-accent-soft" : "bg-tint text-accent"}`, children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) }),
+            feature
+          ] }, feature)) }),
+          /* @__PURE__ */ jsx(PillLink, { to: plan.cta.to, variant: plan.highlight ? "light" : "dark", className: "mt-10", children: plan.cta.label })
+        ]
+      },
+      plan.id
+    )) }),
+    footnote && /* @__PURE__ */ jsx("div", { className: "mt-8 text-center text-sm text-soft", children: footnote })
+  ] }) });
+}
+export {
+  PricingSection as default
+};

package/dist/RollingWord.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+function RollingWord({ item, className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `relative block h-[1.15em] overflow-hidden ${className}`, ...rest, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      lang: item.code,
+      initial: { y: "70%", opacity: 0 },
+      animate: { y: 0, opacity: 1, transition: { duration: 0.6, delay: 0.15, ease: [0.22, 1, 0.36, 1] } },
+      exit: { y: "-70%", opacity: 0, transition: { duration: 0.3, ease: "easeIn" } },
+      className: "absolute inset-x-0 block whitespace-nowrap",
+      children: item.phrase
+    },
+    item.phrase
+  ) }) });
+}
+export {
+  RollingWord
+};

package/dist/SectionNav.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import useScrollSpy from "./useScrollSpy.js";
+import { Container } from "./ui.js";
+const SECTION_OFFSET = "scroll-mt-36";
+function SectionNav({ sections, label, numbered = false, className = "" }) {
+  const active = useScrollSpy(sections.map((s) => s.id));
+  const bar = useRef(null);
+  useEffect(() => {
+    const nav = bar.current;
+    const chip = nav?.querySelector("[aria-current]");
+    if (!nav || !chip) return;
+    const left = chip.offsetLeft - nav.clientWidth / 2 + chip.clientWidth / 2;
+    nav.scrollTo?.({ left, behavior: "smooth" });
+  }, [active]);
+  return /* @__PURE__ */ jsx("div", { className: `okjt-section-nav sticky top-[var(--okjt-nav-h,4.25rem)] z-30 border-y border-line/70 bg-tint/90 backdrop-blur-xl ${className}`, children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx("nav", { ref: bar, "aria-label": label, className: "-mx-4 flex items-center gap-2 overflow-x-auto px-4 py-3 [scrollbar-width:none] [mask-image:linear-gradient(to_right,black_calc(100%-2.5rem),transparent)]", children: sections.map((section, i) => {
+    const current = active === section.id;
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: `#${section.id}`,
+        "aria-current": current ? "location" : void 0,
+        className: `shrink-0 rounded-full px-4 py-2 text-xs font-semibold transition-colors ${current ? "bg-fill text-on-ink" : "bg-surface text-soft hover:text-ink"}`,
+        children: [
+          numbered && /* @__PURE__ */ jsx("span", { className: `mr-1.5 tabular-nums ${current ? "text-accent-soft" : "text-faint"}`, children: String(i + 1).padStart(2, "0") }),
+          section.label
+        ]
+      },
+      section.id
+    );
+  }) }) }) });
+}
+export {
+  SECTION_OFFSET,
+  SectionNav as default
+};

package/dist/Seo.js

@@ -0,0 +1,55 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { useSite } from "./SiteProvider.js";
+function getMetadata(seo, pathname) {
+  const path = pathname.replace(/\/$/, "") || "/";
+  const fallback = { title: seo.defaultTitle, description: seo.defaultDescription, indexable: false };
+  const resolved = seo.resolve?.(path);
+  if (resolved) return { ...fallback, indexable: true, ...resolved };
+  const metadata = seo.pages?.[path];
+  if (metadata) return { ...metadata, indexable: true };
+  return fallback;
+}
+function upsertMeta(attribute, key, value) {
+  let node = document.head.querySelector(`meta[${attribute}="${key}"]`);
+  if (!node) {
+    node = document.createElement("meta");
+    node.setAttribute(attribute, key);
+    document.head.appendChild(node);
+  }
+  node.setAttribute("content", value);
+}
+function upsertLink(rel, href) {
+  let node = document.head.querySelector(`link[rel="${rel}"]`);
+  if (!node) {
+    node = document.createElement("link");
+    node.setAttribute("rel", rel);
+    document.head.appendChild(node);
+  }
+  node.setAttribute("href", href);
+}
+function Seo() {
+  const { seo } = useSite();
+  const { pathname } = useLocation();
+  useEffect(() => {
+    const metadata = getMetadata(seo, pathname);
+    const canonical = `${seo.origin}${pathname === "/" ? "/" : pathname.replace(/\/$/, "")}`;
+    document.title = metadata.title;
+    upsertMeta("name", "description", metadata.description);
+    upsertMeta("name", "robots", metadata.indexable ? "index, follow" : "noindex, nofollow");
+    upsertLink("canonical", canonical);
+    upsertMeta("property", "og:type", "website");
+    upsertMeta("property", "og:site_name", seo.siteName);
+    upsertMeta("property", "og:title", metadata.title);
+    upsertMeta("property", "og:description", metadata.description);
+    upsertMeta("property", "og:url", canonical);
+    upsertMeta("property", "og:locale", seo.locale);
+    upsertMeta("name", "twitter:card", "summary");
+    upsertMeta("name", "twitter:title", metadata.title);
+    upsertMeta("name", "twitter:description", metadata.description);
+  }, [seo, pathname]);
+  return null;
+}
+export {
+  Seo as default
+};

package/dist/ShowcaseCarousel.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { MediaFill } from "./MediaFrame.js";
+import { useSite } from "./SiteProvider.js";
+import { Chip, SectionHeading } from "./ui.js";
+function ShowcaseCarousel({ eyebrow, title, text, items }) {
+  const { media: MEDIA = {} } = useSite();
+  const [index, setIndex] = useState(0);
+  const go = (step) => setIndex((i) => (i + step + items.length) % items.length);
+  const item = items[index];
+  const next = items[(index + 1) % items.length];
+  const shape = MEDIA[item.media]?.phone ? "mx-auto aspect-[9/16] max-w-xs" : "aspect-[4/3]";
+  return /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(SectionHeading, { eyebrow, title, text, align: "left" }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-8 flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => go(-1), "aria-label": "Previous", className: "grid h-12 w-12 place-items-center rounded-full bg-surface text-ink shadow-[0_10px_30px_-12px_color-mix(in_srgb,var(--okjt-shadow,var(--color-ink))_35%,transparent)] transition-transform hover:-translate-x-0.5", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" }) }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => go(1), "aria-label": "Next", className: "grid h-12 w-12 place-items-center rounded-full bg-surface text-ink shadow-[0_10px_30px_-12px_color-mix(in_srgb,var(--okjt-shadow,var(--color-ink))_35%,transparent)] transition-transform hover:translate-x-0.5", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" }) }),
+        /* @__PURE__ */ jsxs("span", { className: "ml-3 text-sm tabular-nums text-muted", "aria-live": "polite", children: [
+          index + 1,
+          " / ",
+          items.length
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("ol", { className: "mt-8 hidden space-y-2 text-sm lg:block", children: items.map((it, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => setIndex(i), className: `text-left transition-colors ${i === index ? "font-semibold text-ink" : "text-muted hover:text-body"}`, children: [
+        String(i + 1).padStart(2, "0"),
+        " \xB7 ",
+        it.title
+      ] }) }, it.title)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative mx-auto w-full max-w-xl pr-4 sm:pr-8", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-y-6 right-0 w-full overflow-hidden rounded-[2rem] opacity-60", "aria-hidden": "true", children: /* @__PURE__ */ jsx(MediaFill, { media: next.media }) }),
+      /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          initial: { opacity: 0, x: 40 },
+          animate: { opacity: 1, x: 0 },
+          exit: { opacity: 0, x: -40 },
+          transition: { duration: 0.4 },
+          className: `relative overflow-hidden rounded-[2rem] border-[6px] border-surface bg-surface shadow-[0_40px_80px_-30px_color-mix(in_srgb,var(--okjt-shadow,var(--color-ink))_60%,transparent)] ${shape}`,
+          children: [
+            /* @__PURE__ */ jsx(MediaFill, { media: item.media }),
+            /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-ink-deep/90 via-ink-deep/60 to-transparent p-4 pt-12 text-white sm:p-6 sm:pt-24", children: [
+              /* @__PURE__ */ jsx("div", { className: "hidden flex-wrap gap-2 sm:flex", children: item.tags.map((tag) => /* @__PURE__ */ jsx(Chip, { children: tag }, tag)) }),
+              /* @__PURE__ */ jsx("h3", { className: "!font-display text-lg !font-normal tracking-tight !text-white sm:mt-3 sm:text-3xl", children: item.title }),
+              /* @__PURE__ */ jsx("div", { className: "mt-2 hidden text-sm leading-relaxed text-white/80 sm:block", children: item.text })
+            ] })
+          ]
+        },
+        item.title
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-4 text-sm leading-relaxed text-soft sm:hidden", children: item.text })
+    ] })
+  ] });
+}
+export {
+  ShowcaseCarousel as default
+};

package/dist/SiteFooter.js

@@ -0,0 +1,74 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
+import { ArrowUpRight } from "lucide-react";
+import Photo from "./Photo.js";
+import { Container, Eyebrow, Logo, PillLink } from "./ui.js";
+import { usePlaces, useSignedIn, useSite } from "./SiteProvider.js";
+function FooterCta({ cta }) {
+  const place = usePlaces();
+  return /* @__PURE__ */ jsx(Container, { className: "pb-6", children: /* @__PURE__ */ jsxs("div", { className: "group relative isolate overflow-hidden rounded-[2rem] bg-tint px-6 py-16 text-center sm:px-12 lg:py-24", children: [
+    /* @__PURE__ */ jsx(Photo, { image: place(cta.place), width: 1800, className: "-z-20" }),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 bg-gradient-to-r from-tint via-tint/90 to-tint/30" }),
+    /* @__PURE__ */ jsx(Eyebrow, { children: cta.eyebrow }),
+    /* @__PURE__ */ jsx("h2", { className: "mx-auto mt-4 max-w-3xl !font-display text-4xl !font-light leading-tight tracking-tight !text-ink sm:text-5xl lg:text-6xl", children: cta.title }),
+    /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 max-w-xl text-soft", children: cta.text }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-col justify-center gap-3 sm:flex-row", children: [
+      /* @__PURE__ */ jsx(PillLink, { to: cta.primary.to, size: "lg", children: cta.primary.label }),
+      /* @__PURE__ */ jsx(PillLink, { to: cta.secondary.to, variant: "light", size: "lg", arrow: true, children: cta.secondary.label })
+    ] })
+  ] }) });
+}
+function SiteFooter({ cta = true }) {
+  const { footer, accountLinks: links } = useSite();
+  const isAuthenticated = useSignedIn();
+  const year = (/* @__PURE__ */ new Date()).getFullYear();
+  const shown = (link) => link.signedIn === void 0 || link.signedIn === Boolean(isAuthenticated);
+  return /* @__PURE__ */ jsxs("footer", { className: "pt-10", children: [
+    cta && footer.cta && /* @__PURE__ */ jsx(FooterCta, { cta: footer.cta }),
+    /* @__PURE__ */ jsx("div", { className: "px-2 pb-2 sm:px-4 sm:pb-4", children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-[2rem] bg-panel text-white", children: [
+      /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute -bottom-10 right-0 select-none font-display text-[9rem] font-semibold leading-none tracking-tighter text-white/[0.04] sm:text-[16rem] lg:text-[22rem]", "aria-hidden": "true", children: footer.watermark }),
+      /* @__PURE__ */ jsxs(Container, { className: "relative py-14 lg:py-20", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-12", children: [
+          /* @__PURE__ */ jsxs("div", { className: "lg:col-span-4", children: [
+            /* @__PURE__ */ jsx(Logo, { light: true }),
+            /* @__PURE__ */ jsx("div", { className: "mt-5 max-w-sm text-sm leading-relaxed text-white/65", children: footer.about }),
+            /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap gap-3", children: isAuthenticated ? /* @__PURE__ */ jsx(PillLink, { to: links.home.to, variant: "light", size: "sm", children: links.home.label }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(PillLink, { to: links.signUp.to, variant: "light", size: "sm", children: links.signUp.label }),
+              /* @__PURE__ */ jsx(PillLink, { to: links.signIn.to, variant: "glass", size: "sm", children: links.signIn.label })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8 sm:grid-cols-3 lg:col-span-8", children: footer.columns.map((column) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-accent-soft", children: column.title }),
+            /* @__PURE__ */ jsx("ul", { className: "mt-4 space-y-3 text-sm", children: column.links.filter(shown).map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { to: link.to, className: "text-white/70 transition-colors hover:text-white", children: link.label }) }, link.to)) })
+          ] }, column.title)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-14 grid gap-3 sm:grid-cols-3", children: footer.promises.map((promise) => {
+          const Icon = promise.icon;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white/75", children: [
+            /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 text-accent-soft", "aria-hidden": "true" }),
+            promise.text
+          ] }, promise.text);
+        }) }),
+        /* @__PURE__ */ jsx("div", { className: "mt-10 flex flex-col gap-4 border-t border-white/10 pt-6 text-xs text-white/50 lg:flex-row lg:items-center lg:justify-between", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            "\xA9 ",
+            year,
+            " ",
+            footer.copyright,
+            ". All rights reserved."
+          ] }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+          /* @__PURE__ */ jsx("span", { children: footer.madeBy.label }),
+          /* @__PURE__ */ jsxs("a", { href: footer.madeBy.href, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1.5 text-white/70 hover:text-white", children: [
+            /* @__PURE__ */ jsx("img", { src: footer.madeBy.logo, alt: "", className: "h-6 w-6 brightness-0 invert" }),
+            footer.madeBy.name,
+            /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-3 w-3", "aria-hidden": "true" })
+          ] })
+        ] }) })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  SiteFooter as default
+};

package/dist/SiteLayout.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import SiteNav from "./SiteNav.js";
+import SiteFooter from "./SiteFooter.js";
+import Seo from "./Seo.js";
+function useScrollToHash() {
+  const { pathname, hash } = useLocation();
+  useEffect(() => {
+    if (!hash) {
+      window.scrollTo(0, 0);
+      return void 0;
+    }
+    let tries = 0;
+    const timer = setInterval(() => {
+      const el = document.getElementById(decodeURIComponent(hash.slice(1)));
+      if (el || ++tries > 20) {
+        clearInterval(timer);
+        el?.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+    }, 50);
+    return () => clearInterval(timer);
+  }, [pathname, hash]);
+}
+function SiteLayout({ overlay = false, cta = true, children }) {
+  useScrollToHash();
+  return /* @__PURE__ */ jsxs("div", { className: "okjt-site min-h-dvh bg-tint font-sans text-ink antialiased", children: [
+    /* @__PURE__ */ jsx(Seo, {}),
+    /* @__PURE__ */ jsx(SiteNav, { overlay }),
+    /* @__PURE__ */ jsx("main", { className: overlay ? "" : "pt-24", children }),
+    /* @__PURE__ */ jsx(SiteFooter, { cta })
+  ] });
+}
+export {
+  SiteLayout as default
+};

package/dist/SiteNav.js

@@ -0,0 +1,100 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Link, NavLink } from "react-router-dom";
+import { ChevronDown, Menu, X } from "lucide-react";
+import { useSignedIn, useSite } from "./SiteProvider.js";
+import { Container, Logo, PillLink } from "./ui.js";
+function SiteNav({ overlay = false }) {
+  const { nav, accountLinks: links } = useSite();
+  const isAuthenticated = useSignedIn();
+  const megaItem = nav.find((item) => item.mega);
+  const [open, setOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const [mega, setMega] = useState(false);
+  const header = useRef(null);
+  useEffect(() => {
+    const el = header.current;
+    if (!el || typeof ResizeObserver === "undefined") return void 0;
+    const root = document.documentElement;
+    const set = () => root.style.setProperty("--okjt-nav-h", `${el.offsetHeight}px`);
+    set();
+    const observer = new ResizeObserver(set);
+    observer.observe(el, { box: "border-box" });
+    return () => {
+      observer.disconnect();
+      root.style.removeProperty("--okjt-nav-h");
+    };
+  }, []);
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 24);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+  useEffect(() => {
+    if (!mega) return void 0;
+    const onKey = (e) => {
+      if (e.key === "Escape") setMega(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [mega]);
+  const light = overlay && !scrolled && !open && !mega;
+  const closeAll = () => {
+    setMega(false);
+    setOpen(false);
+  };
+  const pillLink = ({ isActive }) => `rounded-full px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.12em] transition-colors ${isActive ? "bg-surface text-ink shadow-sm" : light ? "text-white/85 hover:text-white" : "text-soft hover:text-ink"}`;
+  const isPage = (to) => !to.includes("#");
+  return /* @__PURE__ */ jsxs("header", { ref: header, onMouseLeave: () => setMega(false), className: `okjt-site-nav ${light ? "okjt-site-nav-over" : "okjt-site-nav-solid"} fixed inset-x-0 top-0 z-40 transition-all duration-300 ${light ? "py-5" : "border-b border-line/70 bg-tint/85 py-3 backdrop-blur-xl"}`, children: [
+    /* @__PURE__ */ jsxs(Container, { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx(Logo, { light }),
+      /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: `hidden items-center gap-1 rounded-full p-1 lg:flex ${light ? "border border-white/30 bg-white/10 backdrop-blur-md" : "border border-line bg-tint/70"}`, children: nav.map((item) => {
+        if (item.mega) {
+          return /* @__PURE__ */ jsxs("span", { className: "flex items-center", onMouseEnter: () => setMega(true), children: [
+            /* @__PURE__ */ jsx(NavLink, { to: item.to, onClick: closeAll, className: (state) => `${pillLink({ isActive: state.isActive || mega })} pr-2`, children: item.label }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `${item.label}: ${item.mega.buttonLabel}`,
+                "aria-expanded": mega,
+                "aria-controls": item.mega.id,
+                onClick: (e) => setMega((v) => e.detail === 0 ? !v : true),
+                className: `-ml-1 rounded-full p-1.5 ${light ? "text-white/85 hover:text-white" : "text-soft hover:text-ink"}`,
+                children: /* @__PURE__ */ jsx(ChevronDown, { className: `h-3.5 w-3.5 transition-transform ${mega ? "rotate-180" : ""}`, "aria-hidden": "true" })
+              }
+            )
+          ] }, item.to);
+        }
+        return isPage(item.to) ? /* @__PURE__ */ jsx(NavLink, { to: item.to, end: true, className: pillLink, onMouseEnter: () => setMega(false), children: item.label }, item.to) : /* @__PURE__ */ jsx(Link, { to: item.to, className: pillLink({ isActive: false }), onMouseEnter: () => setMega(false), children: item.label }, item.to);
+      }) }),
+      /* @__PURE__ */ jsx("div", { className: "hidden items-center gap-3 lg:flex", children: isAuthenticated ? /* @__PURE__ */ jsx(PillLink, { to: links.home.to, variant: light ? "light" : "dark", size: "sm", children: links.home.label }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Link, { to: links.signIn.to, className: `text-xs font-semibold uppercase tracking-[0.12em] ${light ? "text-white hover:text-white/80" : "text-body hover:text-ink"}`, children: links.signIn.label }),
+        /* @__PURE__ */ jsx(PillLink, { to: links.signUp.to, variant: light ? "light" : "dark", size: "sm", children: links.signUp.label })
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `rounded-full p-2 lg:hidden ${light ? "text-white" : "text-body"}`,
+          "aria-label": open ? "Close menu" : "Open menu",
+          "aria-expanded": open,
+          onClick: () => setOpen((v) => !v),
+          children: open ? /* @__PURE__ */ jsx(X, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx(Menu, { className: "h-6 w-6" })
+        }
+      )
+    ] }),
+    mega && megaItem && /* @__PURE__ */ jsx(megaItem.mega.Menu, { id: megaItem.mega.id, onNavigate: closeAll }),
+    open && /* @__PURE__ */ jsx(Container, { className: "lg:hidden", children: /* @__PURE__ */ jsxs("nav", { "aria-label": "Main", className: "mt-3 max-h-[calc(100svh-6rem)] overflow-y-auto rounded-3xl border border-line bg-surface p-3 shadow-xl", children: [
+      nav.map((item) => item.mega ? /* @__PURE__ */ jsx(item.mega.MobileList, { onNavigate: closeAll }, item.to) : /* @__PURE__ */ jsx(Link, { to: item.to, onClick: () => setOpen(false), className: "block rounded-2xl px-4 py-3 text-body hover:bg-tint", children: item.label }, item.to)),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 flex gap-3 border-t border-line pt-3", children: [
+        /* @__PURE__ */ jsx(PillLink, { to: isAuthenticated ? links.home.to : links.signIn.to, variant: "outline", size: "sm", className: "flex-1", children: isAuthenticated ? links.home.label : links.signIn.label }),
+        !isAuthenticated && /* @__PURE__ */ jsx(PillLink, { to: links.signUp.to, size: "sm", className: "flex-1", children: links.signUp.label })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  SiteNav as default
+};

package/dist/SiteProvider.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const SiteContext = createContext(null);
+function SiteProvider({ site, children }) {
+  return /* @__PURE__ */ jsx(SiteContext.Provider, { value: site, children });
+}
+function useSite() {
+  const site = useContext(SiteContext);
+  if (!site) throw new Error("@okjt/site: wrap the app in <SiteProvider site={\u2026}>");
+  return site;
+}
+function useSignedIn() {
+  const { useAccount } = useSite();
+  return Boolean(useAccount?.().signedIn);
+}
+function usePhotos() {
+  return useSite().usePhotos();
+}
+function usePlaces() {
+  return useSite().usePlaces();
+}
+function useMedia(media) {
+  const { media: catalogue = {} } = useSite();
+  return typeof media === "string" ? catalogue[media] : media;
+}
+export {
+  SiteProvider,
+  useMedia,
+  usePhotos,
+  usePlaces,
+  useSignedIn,
+  useSite
+};

package/dist/index.js

@@ -0,0 +1,58 @@
+import { SiteProvider, useSite, useSignedIn, usePhotos, usePlaces, useMedia } from "./SiteProvider.js";
+import { Container, Logo, PillLink, Eyebrow, Chip, SectionHeading } from "./ui.js";
+import { default as default2 } from "./SiteLayout.js";
+import { default as default3 } from "./SiteNav.js";
+import { default as default4 } from "./SiteFooter.js";
+import { default as default5 } from "./Seo.js";
+import { default as default6 } from "./Photo.js";
+import { default as default7, HeroOrnament } from "./PhotoHero.js";
+import { default as default8 } from "./ImageCard.js";
+import { default as default9, MediaFill } from "./MediaFrame.js";
+import { default as default10 } from "./FeatureExplorer.js";
+import { default as default11 } from "./FeatureGroup.js";
+import { JourneyGlance, JourneyChapter } from "./Journey.js";
+import { default as default12 } from "./ShowcaseCarousel.js";
+import { default as default13, SECTION_OFFSET } from "./SectionNav.js";
+import { default as default14 } from "./FaqSection.js";
+import { default as default15 } from "./PricingSection.js";
+import { default as default16 } from "./LegalPage.js";
+import { RollingWord } from "./RollingWord.js";
+import { default as default17 } from "./useRolling.js";
+import { default as default18 } from "./useScrollSpy.js";
+export {
+  Chip,
+  Container,
+  Eyebrow,
+  default14 as FaqSection,
+  default10 as FeatureExplorer,
+  default11 as FeatureGroup,
+  HeroOrnament,
+  default8 as ImageCard,
+  JourneyChapter,
+  JourneyGlance,
+  default16 as LegalPage,
+  Logo,
+  MediaFill,
+  default9 as MediaFrame,
+  default6 as Photo,
+  default7 as PhotoHero,
+  PillLink,
+  default15 as PricingSection,
+  RollingWord,
+  SECTION_OFFSET,
+  SectionHeading,
+  default13 as SectionNav,
+  default5 as Seo,
+  default12 as ShowcaseCarousel,
+  default4 as SiteFooter,
+  default2 as SiteLayout,
+  default3 as SiteNav,
+  SiteProvider,
+  useMedia,
+  usePhotos,
+  usePlaces,
+  default17 as useRolling,
+  default18 as useScrollSpy,
+  useSignedIn,
+  useSite
+};

package/dist/ui.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
+import { ArrowUpRight } from "lucide-react";
+import { useSite } from "./SiteProvider.js";
+function Container({ className = "", children }) {
+  return /* @__PURE__ */ jsx("div", { className: `mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 ${className}`, children });
+}
+function Logo({ light = false, className = "" }) {
+  const { brand } = useSite();
+  return /* @__PURE__ */ jsx(Link, { to: "/", className: `flex items-center gap-2.5 ${className}`, "aria-label": `${brand.name} home`, children: /* @__PURE__ */ jsx("img", { src: light ? brand.logo.light : brand.logo.dark, alt: "", className: "h-8 w-auto" }) });
+}
+const PILL_VARIANTS = {
+  dark: "bg-fill text-on-ink hover:bg-fill-hover shadow-[0_10px_30px_-12px_color-mix(in_srgb,var(--okjt-shadow,var(--color-ink))_60%,transparent)]",
+  light: "bg-surface text-ink hover:bg-tint shadow-[0_10px_30px_-12px_color-mix(in_srgb,var(--okjt-shadow,var(--color-ink))_35%,transparent)]",
+  outline: "border border-line-strong text-body hover:border-accent hover:text-ink",
+  glass: "border border-white/40 bg-white/10 text-white backdrop-blur hover:bg-white/20"
+};
+function PillLink({ to, variant = "dark", size = "md", arrow = false, className = "", children, ...rest }) {
+  const sizes = { sm: "px-4 py-2 text-xs", md: "px-6 py-3 text-sm", lg: "px-7 py-3.5 text-sm sm:text-base" };
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      to,
+      className: `okjt-pill okjt-pill-${variant} inline-flex items-center justify-center gap-2 rounded-full font-semibold uppercase tracking-[0.08em] transition-colors ${sizes[size]} ${PILL_VARIANTS[variant]} ${className}`,
+      ...rest,
+      children: [
+        children,
+        arrow && /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-4 w-4", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+function Eyebrow({ light = false, className = "", children }) {
+  return /* @__PURE__ */ jsx("div", { className: `text-[11px] font-semibold uppercase tracking-[0.22em] ${light ? "text-white/75" : "text-accent"} ${className}`, children });
+}
+function Chip({ light = true, children }) {
+  return /* @__PURE__ */ jsx("span", { className: `inline-flex rounded-full px-3 py-1 text-[11px] font-semibold ${light ? "bg-surface text-ink" : "bg-ink/5 text-body"}`, children });
+}
+function SectionHeading({ eyebrow, title, text, align = "center", light = false, as = "h2", className = "" }) {
+  const Tag = as;
+  const centered = align === "center";
+  return /* @__PURE__ */ jsxs("div", { className: `${centered ? "mx-auto max-w-3xl text-center" : "max-w-2xl"} ${className}`, children: [
+    eyebrow && /* @__PURE__ */ jsx(Eyebrow, { light, children: eyebrow }),
+    /* @__PURE__ */ jsx(Tag, { className: `mt-3 !font-display text-4xl !font-light leading-[1.05] tracking-tight sm:text-5xl lg:text-6xl ${light ? "!text-white" : "!text-ink"}`, children: title }),
+    text && /* @__PURE__ */ jsx("div", { className: `mt-5 text-base leading-relaxed sm:text-lg ${centered ? "mx-auto max-w-2xl" : ""} ${light ? "text-white/80" : "text-soft"}`, children: text })
+  ] });
+}
+export {
+  Chip,
+  Container,
+  Eyebrow,
+  Logo,
+  PillLink,
+  SectionHeading
+};

package/dist/useRolling.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+import { useReducedMotion } from "framer-motion";
+function useRolling(phrases, { interval = 2800 } = {}) {
+  const [index, setIndex] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const still = useReducedMotion();
+  useEffect(() => {
+    if (still || paused || hovered) return void 0;
+    const timer = setInterval(() => setIndex((i) => (i + 1) % phrases.length), interval);
+    return () => clearInterval(timer);
+  }, [still, paused, hovered, interval, phrases.length]);
+  const hold = { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false) };
+  return { item: phrases[index], paused, still, toggle: () => setPaused((v) => !v), hold };
+}
+export {
+  useRolling as default
+};

package/dist/useScrollSpy.js

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+function useScrollSpy(ids) {
+  const [active, setActive] = useState(ids[0]);
+  const key = ids.join("|");
+  useEffect(() => {
+    const list = key.split("|");
+    const onScroll = () => {
+      const line = window.innerHeight / 3;
+      let current = list[0];
+      for (const id of list) {
+        const el = document.getElementById(id);
+        if (el && el.getBoundingClientRect().top <= line) current = id;
+      }
+      setActive(current);
+    };
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll);
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [key]);
+  return active;
+}
+export {
+  useScrollSpy as default
+};