@pylonsync/create-pylon 0.3.274 → 0.3.275

package/templates/local-service/app/login/page.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Link, type Metadata, type PageProps } from "@pylonsync/react";
+import { AuthForm } from "../auth-form";
+import { siteConfig } from "@/lib/site.config";
+
+export const metadata: Metadata = {
+  title: `Sign in — ${siteConfig.brand.name}`,
+  robots: "noindex",
+};
+
+// `app/login/page.tsx` → `/login`. The owner's sign-in. Rendered bare (the
+// layout suppresses the marketing nav/footer for /login). Already signed in?
+// Skip straight to the dashboard — `response.redirect` in the synchronous shell
+// render is a real 307 before any HTML is sent.
+export default function LoginPage({ auth, response }: PageProps) {
+  // Already signed in (a real account, not an anonymous guest)? Skip the form.
+  if (auth.user_id && !auth.user_id.startsWith("guest_")) response.redirect("/dashboard");
+  const { brand } = siteConfig;
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-white px-6 py-12">
+      <div className="w-full max-w-[400px] rounded-2xl border border-zinc-200/70 p-8">
+        <Link href="/" className="inline-flex">
+          <span className="flex size-9 items-center justify-center rounded-xl bg-zinc-900 text-base font-bold text-white">
+            {brand.letter}
+          </span>
+        </Link>
+        <h1 className="mt-5 text-[22px] font-semibold tracking-tight text-zinc-900">
+          {brand.name} dashboard
+        </h1>
+        <p className="mt-1 text-[13px] text-zinc-500">
+          Sign in to manage your bookings.
+        </p>
+        <div className="mt-6">
+          <AuthForm />
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/local-service/app/not-found.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Link, type NotFoundProps } from "@pylonsync/react";
+
+// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL (and when a
+// page calls `response.notFound()`). Hydrated, so the link is a client nav.
+export default function NotFound(_props: NotFoundProps) {
+  return (
+    <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">
+      <h1 className="text-3xl font-semibold tracking-tight">404</h1>
+      <p className="mt-2 text-zinc-500">We couldn&apos;t find that page.</p>
+      <Link
+        href="/"
+        className="mt-6 inline-flex h-10 items-center rounded-full bg-zinc-900 px-5 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
+      >
+        Back home
+      </Link>
+    </div>
+  );
+}

package/templates/local-service/app/page.tsx

@@ -0,0 +1,233 @@
+import React from "react";
+import { type Metadata } from "@pylonsync/react";
+import {
+  WRAP,
+  Eyebrow,
+  Divider,
+  SectionHead,
+  ImagePlaceholder,
+  LiveBadge,
+} from "@/components/marketing";
+import { BookingWidget } from "./booking-widget";
+import { siteConfig } from "@/lib/site.config";
+
+export const metadata: Metadata = {
+  title: siteConfig.seo.title,
+  description: siteConfig.seo.description,
+  openGraph: {
+    title: siteConfig.seo.title,
+    description: siteConfig.seo.description,
+    type: "website",
+  },
+};
+
+// `app/page.tsx` → `/`. Server-rendered single-page site for an appointment
+// business. Hero, services, reviews, location, and FAQ are static server HTML
+// (SEO + first paint); the booking section (#book) is a client island
+// (<BookingWidget>) with live slot availability. All copy comes from siteConfig.
+//
+// Does not read `auth`, so the public page stays cacheable; the nav's signed-in
+// state is resolved in the layout.
+export default function LandingPage() {
+  const { hero, services, booking, reviews, location, faq } = siteConfig;
+
+  return (
+    <div className="bg-white text-zinc-900">
+      {/* ============================= HERO ============================= */}
+      <section className={`${WRAP} pt-16 pb-14 sm:pt-20`}>
+        <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-14">
+          <div>
+            <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-brand">
+              {hero.tagline}
+            </p>
+            <h1 className="mt-4 text-balance text-[2.5rem] font-semibold leading-[1.04] tracking-[-0.02em] sm:text-[3.25rem]">
+              {hero.headline}
+            </h1>
+            <p className="mt-5 max-w-xl text-[17px] leading-relaxed text-zinc-500">
+              {hero.subcopy}
+            </p>
+            <div className="mt-7 flex flex-wrap items-center gap-4">
+              <a
+                href="#book"
+                className="inline-flex items-center rounded-full bg-brand px-5 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-90"
+              >
+                {hero.ctaLabel}
+              </a>
+              <a href="#services" className="text-sm font-medium text-zinc-700 hover:text-zinc-900">
+                See the menu →
+              </a>
+            </div>
+            <dl className="mt-10 grid max-w-lg grid-cols-3 gap-4 border-t border-zinc-200/70 pt-6">
+              <QuickFact label="Hours" value={hero.quickFacts.hours} />
+              <QuickFact label="Area" value={hero.quickFacts.area} />
+              <QuickFact label="Call" value={hero.quickFacts.phone} />
+            </dl>
+          </div>
+
+          {/* Hero photo — replace the placeholder with a real shot of your shop. */}
+          <div className="relative mx-auto w-full max-w-sm lg:max-w-none">
+            <ImagePlaceholder
+              shape="portrait"
+              title="A photo of your shop"
+              hint="Swap for an <img> in app/page.tsx"
+            />
+            <div className="absolute left-4 top-4">
+              <LiveBadge>Availability updates live</LiveBadge>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* =========================== SERVICES ========================== */}
+      <Divider />
+      <section id="services" className={`${WRAP} py-14`}>
+        <SectionHead eyebrow={services.eyebrow} title={services.headline} />
+        <div className="mt-8 grid gap-4 sm:grid-cols-2">
+          {services.items.map((s) => (
+            <div
+              key={s.slug}
+              className="flex items-start justify-between gap-4 rounded-xl border border-zinc-200 bg-paper p-5"
+            >
+              <div>
+                <h3 className="text-[15px] font-semibold text-zinc-900">{s.name}</h3>
+                {s.description ? (
+                  <p className="mt-1.5 text-[13.5px] leading-relaxed text-zinc-500">
+                    {s.description}
+                  </p>
+                ) : null}
+                <p className="mt-2 text-[12px] uppercase tracking-wide text-zinc-400">
+                  {s.durationMin} min
+                </p>
+              </div>
+              <div className="shrink-0 text-[15px] font-semibold text-brand">{s.price}</div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ============================ BOOKING ========================== */}
+      {booking.enabled ? (
+        <>
+          <Divider />
+          <section id="book" className={`${WRAP} py-14`}>
+            <SectionHead
+              eyebrow={booking.eyebrow}
+              title={booking.headline}
+              body={booking.subcopy}
+            />
+            <div className="mt-8">
+              <BookingWidget />
+            </div>
+          </section>
+        </>
+      ) : null}
+
+      {/* ============================ REVIEWS ========================== */}
+      {reviews && reviews.items.length > 0 ? (
+        <>
+          <Divider />
+          <section className={`${WRAP} py-14`}>
+            <SectionHead eyebrow={reviews.eyebrow} title={reviews.headline} />
+            <div className="mt-8 grid gap-5 sm:grid-cols-3">
+              {reviews.items.map((r) => (
+                <figure
+                  key={r.name}
+                  className="flex flex-col rounded-2xl border border-zinc-200 bg-paper p-6"
+                >
+                  {r.rating ? (
+                    <div className="text-[13px] tracking-wide text-brand">
+                      {"★".repeat(r.rating)}
+                      <span className="text-zinc-200">{"★".repeat(5 - r.rating)}</span>
+                    </div>
+                  ) : null}
+                  <blockquote className="mt-3 text-[14px] leading-relaxed text-zinc-600">
+                    &ldquo;{r.quote}&rdquo;
+                  </blockquote>
+                  <figcaption className="mt-4 text-[13px] font-semibold text-zinc-900">
+                    {r.name}
+                  </figcaption>
+                </figure>
+              ))}
+            </div>
+          </section>
+        </>
+      ) : null}
+
+      {/* =========================== LOCATION ========================== */}
+      <Divider />
+      <section className={`${WRAP} py-14`}>
+        <div className="grid gap-8 lg:grid-cols-[1fr_1fr]">
+          <div>
+            <SectionHead eyebrow={location.eyebrow} title={location.headline} />
+            <div className="mt-6 space-y-3 text-[14px] leading-relaxed text-zinc-600">
+              <p>{location.address}</p>
+              <p className="text-zinc-500">{location.hoursText}</p>
+              <p>
+                <a href={`tel:${location.phone}`} className="font-medium text-brand">
+                  {location.phone}
+                </a>{" "}
+                ·{" "}
+                <a href={`mailto:${location.email}`} className="text-zinc-600 hover:text-zinc-900">
+                  {location.email}
+                </a>
+              </p>
+              <a
+                href="#book"
+                className="mt-2 inline-flex items-center rounded-full bg-zinc-900 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
+              >
+                {siteConfig.hero.ctaLabel}
+              </a>
+            </div>
+          </div>
+          {location.mapEmbedUrl ? (
+            <iframe
+              title="Map"
+              src={location.mapEmbedUrl}
+              className="h-64 w-full rounded-2xl border border-zinc-200"
+              loading="lazy"
+            />
+          ) : (
+            <div className="grid h-64 place-items-center rounded-2xl border border-zinc-200 bg-paper text-sm text-zinc-400">
+              Drop a Google Maps embed URL in <code className="mx-1">location.mapEmbedUrl</code>
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* ============================== FAQ ============================ */}
+      {faq && faq.items.length > 0 ? (
+        <>
+          <Divider />
+          <section className={`${WRAP} py-14`}>
+            <Eyebrow>{faq.eyebrow}</Eyebrow>
+            <h2 className="mt-4 text-balance text-2xl font-semibold leading-[1.15] tracking-[-0.02em] sm:text-3xl">
+              {faq.headline}
+            </h2>
+            <div className="mt-8 divide-y divide-zinc-200/70 border-y border-zinc-200/70">
+              {faq.items.map((f) => (
+                <details key={f.q} className="group py-5">
+                  <summary className="flex cursor-pointer items-center justify-between text-[15px] font-medium text-zinc-900 marker:hidden [&::-webkit-details-marker]:hidden">
+                    {f.q}
+                    <span className="text-brand transition-transform group-open:rotate-45">+</span>
+                  </summary>
+                  <p className="mt-3 max-w-2xl text-[14px] leading-relaxed text-zinc-500">
+                    {f.a}
+                  </p>
+                </details>
+              ))}
+            </div>
+          </section>
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+function QuickFact({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <dt className="text-[11px] font-medium uppercase tracking-wide text-zinc-400">{label}</dt>
+      <dd className="mt-1 text-[13.5px] font-medium text-zinc-900">{value}</dd>
+    </div>
+  );
+}

package/templates/local-service/app/robots.ts

@@ -0,0 +1,12 @@
+import type { Robots } from "@pylonsync/react";
+
+// app/robots.ts → served at /robots.txt. Point SITE_URL at your domain in prod.
+const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+
+export default function robots(): Robots {
+  return {
+    // Keep the owner dashboard and the API out of the index.
+    rules: { userAgent: "*", allow: "/", disallow: ["/dashboard", "/login", "/api/"] },
+    sitemap: `${SITE}/sitemap.xml`,
+  };
+}

package/templates/local-service/app/sitemap.ts

@@ -0,0 +1,9 @@
+import type { Sitemap } from "@pylonsync/react";
+
+// app/sitemap.ts → served at /sitemap.xml. Point SITE_URL at your domain in
+// production. The waitlist is a single public page, so the sitemap is just "/".
+const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+
+export default async function sitemap(): Promise<Sitemap> {
+  return [{ url: `${SITE}/`, changeFrequency: "weekly", priority: 1 }];
+}

package/templates/local-service/app.ts

@@ -0,0 +1,131 @@
+import {
+  entity,
+  field,
+  policy,
+  auth,
+  buildManifest,
+  discoverAppRoutes,
+} from "@pylonsync/sdk";
+
+// ---------------------------------------------------------------------------
+// local-service — an appointment business (salon, barber, trainer, clinic,
+// trades…) with LIVE slot availability. The realtime hook: the time picker
+// subscribes to the day's booked slots, so the instant someone books, that
+// slot greys out for everyone with the page open — no double-booking, no
+// refresh. The server also re-checks at insert time to close the race.
+//
+// Two entities carry the booking; a third is the PII-free projection the public
+// page is allowed to read:
+//   • Booking    — the real appointment, with the customer's name/email/phone.
+//                  Holds PII, so it denies ALL client reads/writes.
+//   • BookedSlot — a name/email-free { startsAt, endsAt } projection of a busy
+//                  slot, PUBLIC-READ so the picker can grey out taken times
+//                  live. createBooking writes both; cancelling frees the slot.
+//   • User       — the business owner's account (email/password), for the
+//                  dashboard.
+//
+// Services and weekly hours are CONFIG (lib/site.config.ts) — the generator
+// produces one typed file. Bookings reference a service by its config `slug`.
+// ---------------------------------------------------------------------------
+
+// The real appointment. `status` ∈ "pending" | "confirmed" | "cancelled".
+// Everything except status is set once at booking time. Indexed by start so the
+// owner dashboard + the server-side overlap re-check scan a day cheaply.
+const Booking = entity(
+  "Booking",
+  {
+    serviceSlug: field.string(),
+    startsAt: field.datetime(),
+    endsAt: field.datetime(),
+    customerName: field.string(),
+    customerEmail: field.string(),
+    customerPhone: field.string().optional(),
+    status: field.string().default("pending"),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_start", fields: ["startsAt"], unique: false }] },
+);
+
+// The PII-FREE projection of a busy slot. This is the ONLY booking data the
+// public page reads — just the time range (and which service), never a name or
+// email. The picker subscribes with `db.useQuery("BookedSlot")` so a newly
+// taken slot greys out across every open tab through the replica. Cancelling a
+// booking deletes its BookedSlot, which frees the time live.
+const BookedSlot = entity(
+  "BookedSlot",
+  {
+    serviceSlug: field.string(),
+    startsAt: field.datetime(),
+    endsAt: field.datetime(),
+    bookingId: field.id("Booking"),
+  },
+  { indexes: [{ name: "by_start", fields: ["startsAt"], unique: false }] },
+);
+
+// The business owner's account (email/password is built in against "User").
+const User = entity(
+  "User",
+  {
+    email: field.string(),
+    displayName: field.string().optional(),
+    passwordHash: field.string().serverOnly().optional(),
+    avatarColor: field.string().optional(),
+    emailVerified: field.datetime().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_email", fields: ["email"], unique: true }] },
+);
+
+// PRIVACY — Booking holds the customer's name/email/phone, so it denies EVERY
+// client read and write. No `db.useQuery("Booking")` can pull a row. Writes go
+// only through the createBooking mutation; the owner reads them only through the
+// owner-gated `bookingsForOwner` function. A booking site must never leak its
+// customers' contact details.
+const bookingPolicy = policy({
+  name: "booking_private",
+  entity: "Booking",
+  allowRead: "false",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+// The busy-slot projection is public to READ (it's just a time range — the
+// point is that the picker shows taken slots live to everyone). Clients can't
+// WRITE it; only createBooking / cancelBooking maintain it server-side.
+const bookedSlotPolicy = policy({
+  name: "booked_slot_public_read",
+  entity: "BookedSlot",
+  allowRead: "true",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+// The owner reads their own User row (the owner gate resolves their email).
+const userPolicy = policy({
+  name: "user_self",
+  entity: "User",
+  allowRead: "auth.userId == data.id",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+const manifest = buildManifest({
+  name: "__APP_NAME__",
+  version: "0.1.0",
+  entities: [Booking, BookedSlot, User],
+  // createBooking (public mutation), bookingsForOwner (owner query),
+  // confirmBooking / cancelBooking (owner mutations) live in functions/ and are
+  // discovered automatically.
+  queries: [],
+  actions: [],
+  policies: [bookingPolicy, bookedSlotPolicy, userPolicy],
+  auth: auth(),
+  routes: await discoverAppRoutes(),
+});
+
+console.log(JSON.stringify(manifest, null, 2));
+
+export default manifest;

package/templates/local-service/components/marketing.tsx

@@ -0,0 +1,162 @@
+import React from "react";
+
+// Reusable presentational pieces for the landing page. All server-rendered —
+// no client JS. Restyle here and the whole page follows. The brand accent
+// (`text-brand`, `bg-brand-soft`) comes from CSS vars set on <html> in
+// app/layout.tsx, which read lib/site.config.ts — so re-theming is one edit.
+
+// Shared container: a contained, centered column.
+export const WRAP = "mx-auto w-full max-w-5xl px-6";
+
+export function Eyebrow({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.14em] text-brand">
+      {children}
+    </p>
+  );
+}
+
+// "New / Coming soon"-style pill for the hero.
+export function Badge({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white py-1 pl-1.5 pr-3 text-[13px] text-zinc-600 shadow-sm">
+      <span className="inline-block size-1.5 rounded-full bg-brand" />
+      {children}
+    </span>
+  );
+}
+
+export function Divider() {
+  return (
+    <div className={WRAP}>
+      <div className="border-t border-zinc-200/70" />
+    </div>
+  );
+}
+
+export function SectionHead({
+  eyebrow,
+  title,
+  body,
+}: {
+  eyebrow: string;
+  title: string;
+  body?: string;
+}) {
+  return (
+    <div>
+      <Eyebrow>{eyebrow}</Eyebrow>
+      <h2 className="mt-4 text-balance text-2xl font-semibold leading-[1.15] tracking-[-0.02em] sm:text-3xl">
+        {title}
+      </h2>
+      {body ? (
+        <p className="mt-4 max-w-xl text-[15px] leading-relaxed text-zinc-500">
+          {body}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+// A grid of value props — icon + title + body.
+export function FeatureGrid({
+  items,
+}: {
+  items: { title: string; body: string; icon?: string }[];
+}) {
+  return (
+    <div className="grid gap-6 sm:grid-cols-3">
+      {items.map((f) => (
+        <div key={f.title}>
+          {f.icon ? (
+            <span className="flex size-9 items-center justify-center rounded-lg bg-brand-soft text-brand">
+              {f.icon}
+            </span>
+          ) : null}
+          <h3 className="mt-4 text-[15px] font-semibold text-zinc-900">
+            {f.title}
+          </h3>
+          <p className="mt-2 text-[14px] leading-relaxed text-zinc-500">
+            {f.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Initials for testimonial avatars, so the cards look finished without a photo.
+export function initials(name: string) {
+  return name
+    .split(/\s+/)
+    .map((w) => w[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+// A deliberately-obvious image placeholder. Real sites drop a photo here; this
+// makes the spot unmistakable — dashed border, a photo glyph, and a one-line
+// "swap this" instruction telling you exactly what to replace and where. Looks
+// tidy enough to demo, but no one will mistake it for a finished design.
+//
+//   shape  — "landscape" | "portrait" | "square" | "circle"
+//   title  — what photo belongs here ("A photo of your shop")
+//   hint   — how to replace it ("Swap for an <img> in app/page.tsx")
+export function ImagePlaceholder({
+  shape = "landscape",
+  title,
+  hint,
+  className = "",
+}: {
+  shape?: "landscape" | "portrait" | "square" | "circle";
+  title: string;
+  hint?: string;
+  className?: string;
+}) {
+  const aspect =
+    shape === "portrait"
+      ? "aspect-[4/5]"
+      : shape === "square" || shape === "circle"
+        ? "aspect-square"
+        : "aspect-[4/3]";
+  const radius = shape === "circle" ? "rounded-full" : "rounded-2xl";
+  return (
+    <div
+      className={`relative grid place-items-center overflow-hidden border-2 border-dashed border-zinc-300 bg-zinc-50 ${aspect} ${radius} ${className}`}
+    >
+      <div className="px-6 text-center">
+        <svg
+          className="mx-auto size-7 text-zinc-300"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden
+        >
+          <rect x="3" y="3" width="18" height="18" rx="2" />
+          <circle cx="9" cy="9" r="1.6" />
+          <path d="m21 15-4.5-4.5L7 20" />
+        </svg>
+        <p className="mt-3 text-[13px] font-medium text-zinc-500">{title}</p>
+        {hint ? <p className="mt-1 text-[11.5px] leading-snug text-zinc-400">{hint}</p> : null}
+      </div>
+    </div>
+  );
+}
+
+// A small "live" pill — float it over a hero image to keep the realtime hook
+// visible (e.g. "Availability updates live"). Pure decoration; no client JS.
+export function LiveBadge({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white/95 px-3 py-1.5 text-[12.5px] font-medium text-zinc-700 shadow-sm backdrop-blur">
+      <span className="relative flex size-2">
+        <span className="absolute inline-flex size-2 animate-ping rounded-full bg-green-500/60" />
+        <span className="relative inline-flex size-2 rounded-full bg-green-600" />
+      </span>
+      {children}
+    </span>
+  );
+}

package/templates/local-service/components/section-scroller.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useEffect } from "react";
+
+// Makes in-page section links work. A hydrated Pylon page updates the URL for a
+// plain `<a href="#section">` click but doesn't perform the browser's native
+// fragment scroll, so the page jumps nowhere. This installs ONE delegated click
+// handler that catches any same-page `#`/`/#` anchor and scrolls to it smoothly.
+//
+// Render it once (in the root layout). Renders nothing. Real route links should
+// still use `<Link>` from @pylonsync/react — this only handles `#` anchors.
+export function SectionScroller() {
+  useEffect(() => {
+    function onClick(e: MouseEvent) {
+      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+        return;
+      }
+      const target = e.target as Element | null;
+      const link = target?.closest?.('a[href^="#"], a[href^="/#"]') as HTMLAnchorElement | null;
+      if (!link) return;
+      const href = link.getAttribute("href") || "";
+      const id = href.slice(href.indexOf("#") + 1);
+      if (!id) return;
+      const el = document.getElementById(id);
+      if (!el) return; // target not on this page — leave it to the browser
+      e.preventDefault();
+      el.scrollIntoView({ block: "start" });
+      history.replaceState(null, "", "#" + id);
+    }
+    document.addEventListener("click", onClick);
+    return () => document.removeEventListener("click", onClick);
+  }, []);
+
+  return null;
+}