@cimplify/sdk 0.41.0 → 0.42.1

package/templates/storefront-fashion/app/track-order/track-order-form.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+/**
+ * Guest order tracker. Routes /orders/<id> with the entered id; the
+ * post-checkout confirmation page already lives at /orders/[id] so this
+ * just sends the visitor there. Replace the redirect with a real lookup
+ * (e.g. Cimplify orders API + email-match guard) for production.
+ */
+export function TrackOrderForm() {
+  const router = useRouter();
+  const [orderId, setOrderId] = useState("");
+  const [email, setEmail] = useState("");
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (!orderId.trim()) return;
+        router.push(`/orders/${encodeURIComponent(orderId.trim())}`);
+      }}
+      className="space-y-4 rounded-2xl border border-border bg-card p-6"
+    >
+      <div>
+        <label
+          htmlFor="orderId"
+          className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5"
+        >
+          Order number
+        </label>
+        <input
+          id="orderId"
+          name="orderId"
+          required
+          value={orderId}
+          onChange={(e) => setOrderId(e.target.value)}
+          placeholder="ord_abc123…"
+          className="w-full px-4 py-3 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm"
+        />
+      </div>
+      <div>
+        <label
+          htmlFor="email"
+          className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5"
+        >
+          Order email
+        </label>
+        <input
+          id="email"
+          name="email"
+          type="email"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="you@email.com"
+          className="w-full px-4 py-3 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm"
+        />
+      </div>
+      <button
+        type="submit"
+        className="w-full inline-flex items-center justify-center px-5 py-3 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors"
+      >
+        Track order
+      </button>
+    </form>
+  );
+}

package/templates/storefront-fashion/components/account-iframe.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { CimplifyAccount } from "@cimplify/sdk/react";
+
+/**
+ * Cimplify Account portal — iframe-mounted UI hosted by Cimplify Link.
+ * Handles sign-in, sign-up, OTP, addresses, payment methods, sessions,
+ * and order history. The iframe owns auth state; we just choose which
+ * `section` to land on.
+ */
+export function AccountIframe({ section }: { section?: string }) {
+  return <CimplifyAccount section={section} />;
+}

package/templates/storefront-fashion/components/policy-page.tsx

@@ -0,0 +1,49 @@
+import type { BrandPolicySection } from "@/lib/brand";
+
+interface PolicyShape {
+  eyebrow: string;
+  title: string;
+  lastUpdated?: string;
+  sections: BrandPolicySection[];
+}
+
+/**
+ * Shared layout for shipping / returns / accessibility / terms / privacy.
+ * Reads a `{ eyebrow, title, lastUpdated, sections[] }` block from brand.
+ */
+export function PolicyPage({ policy }: { policy: PolicyShape }) {
+  return (
+    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
+        {policy.eyebrow}
+      </p>
+      <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-2 -tracking-[0.02em]">
+        {policy.title}
+      </h1>
+      {policy.lastUpdated && (
+        <p className="text-sm text-muted-foreground not-prose mb-10">
+          Last updated: {policy.lastUpdated}
+        </p>
+      )}
+      <section className="space-y-5 leading-relaxed text-foreground/90">
+        {policy.sections.map((s) => (
+          <div key={s.heading}>
+            <h2 className="text-2xl font-semibold mt-0">{s.heading}</h2>
+            {typeof s.body === "string" ? (
+              <p>{s.body}</p>
+            ) : (
+              <>
+                <p>{s.body.intro}</p>
+                <ul className="list-disc pl-6 space-y-2">
+                  {s.body.bullets.map((b) => (
+                    <li key={b}>{b}</li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </div>
+        ))}
+      </section>
+    </article>
+  );
+}

package/templates/storefront-fashion/lib/brand.ts

@@ -62,6 +62,20 @@ export interface Brand {
   };
   terms: { eyebrow: string; title: string; lastUpdated: string; sections: BrandPolicySection[] };
   privacy: { eyebrow: string; title: string; lastUpdated: string; sections: BrandPolicySection[] };
+  shipping: { eyebrow: string; title: string; lastUpdated: string; sections: BrandPolicySection[] };
+  returns: { eyebrow: string; title: string; lastUpdated: string; sections: BrandPolicySection[] };
+  accessibility: { eyebrow: string; title: string; lastUpdated: string; sections: BrandPolicySection[] };
+  account: {
+    loginEyebrow: string; loginTitle: string; loginSubtitle: string;
+    signupEyebrow: string; signupTitle: string; signupSubtitle: string;
+    accountEyebrow: string; accountTitle: string;
+  };
+  contactPage: {
+    eyebrow: string; title: string; body: string;
+    reasons: string[];
+    directLines: { label: string; value: string; href: string }[];
+  };
+  trackOrder: { eyebrow: string; title: string; body: string };
   footer: {
     blurb: string; sitemap: BrandSitemapSection[];
     poweredBy?: { label: string; href: string };
@@ -365,6 +379,74 @@ export const brand: Brand = {
     ],
   },
 
+  shipping: {
+    eyebrow: "Shipping",
+    title: "Shipping",
+    lastUpdated: "1 May 2026",
+    sections: [
+      { heading: "Worldwide via DHL Express", body: "2–4 business days from order. Free over $80 (or local equivalent)." },
+      { heading: "Customs & duties", body: "Charged on delivery in some countries — DHL contacts you. Prepay for orders over $300; email help@studiofrx.test before placing the order." },
+      { heading: "Studio pickup", body: "Free, ready in 30 minutes. Tue–Sat 11am–8pm at Osu Oxford Street, Accra." },
+      { heading: "Tracking", body: "DHL tracking link sent by email and SMS within an hour of dispatch." },
+    ],
+  },
+
+  returns: {
+    eyebrow: "Returns",
+    title: "Returns & Exchanges",
+    lastUpdated: "1 May 2026",
+    sections: [
+      { heading: "30 days, on us (US/UK/EU)", body: "Free return labels prepaid by us. Item must be unworn with original tags." },
+      { heading: "Worldwide", body: "Return shipping is on you, but we'll refund or exchange immediately on receipt." },
+      { heading: "Final sale", body: "Underwear, swim, custom pieces, and anything marked final-sale on the product page is non-returnable." },
+      { heading: "How to start", body: "Email help@studiofrx.test with your order number. We'll send a label or instructions within 24 hours." },
+    ],
+  },
+
+  accessibility: {
+    eyebrow: "Accessibility",
+    title: "Accessibility Statement",
+    lastUpdated: "1 May 2026",
+    sections: [
+      { heading: "Our commitment", body: "We aim for WCAG 2.1 AA on this site, tested on each release." },
+      { heading: "What we've done", body: { intro: "Specifically, we've:", bullets: [
+        "Maintained a minimum 4.5:1 contrast on body text.",
+        "Ensured every interactive element is keyboard-reachable.",
+        "Provided alt text on every image, including lookbook editorials.",
+        "Respected `prefers-reduced-motion` for the homepage editorial transitions.",
+      ] } },
+      { heading: "Reporting issues", body: "Email accessibility@studiofrx.test. We respond within 5 business days." },
+    ],
+  },
+
+  account: {
+    loginEyebrow: "Welcome back",
+    loginTitle: "Sign in to FRX",
+    loginSubtitle: "Track orders, manage your collective access, and view past drops.",
+    signupEyebrow: "Welcome",
+    signupTitle: "Create your account",
+    signupSubtitle: "First-look at the next drop, faster checkout, and your size remembered.",
+    accountEyebrow: "Your account",
+    accountTitle: "Welcome back",
+  },
+
+  contactPage: {
+    eyebrow: "Contact",
+    title: "Talk to the studio.",
+    body: "Order question, sizing help, collab pitch — message us and we'll reply within a business day.",
+    reasons: ["General question", "An order issue", "Sizing help", "Returns / exchanges", "Press / collabs", "Wholesale"],
+    directLines: [
+      { label: "Email", value: "help@studiofrx.test", href: "mailto:help@studiofrx.test" },
+      { label: "Phone", value: "+233 244 000 000", href: "tel:+233244000000" },
+    ],
+  },
+
+  trackOrder: {
+    eyebrow: "Track an order",
+    title: "Where's my drop?",
+    body: "Enter your order number and the email used at checkout. We'll show DHL's latest scan and the live ETA.",
+  },
+
   footer: {
     blurb:
       "Limited-run streetwear from Accra. Heavyweight cotton, hand-screened, numbered. Each drop is a closed run.",
@@ -392,10 +474,21 @@ export const brand: Brand = {
       {
         title: "Help",
         links: [
-          { label: "Contact", href: "mailto:help@studiofrx.test" },
-          { label: "Sizing", href: "/faq" },
-          { label: "Shipping", href: "/faq" },
-          { label: "Returns", href: "/faq" },
+          { label: "Contact", href: "/contact" },
+          { label: "Track an order", href: "/track-order" },
+          { label: "Size guide", href: "/size-guide" },
+          { label: "Shipping", href: "/shipping" },
+          { label: "Returns", href: "/returns" },
+          { label: "FAQ", href: "/faq" },
+        ],
+      },
+      {
+        title: "Account",
+        links: [
+          { label: "Sign in", href: "/login" },
+          { label: "Create account", href: "/signup" },
+          { label: "Your orders", href: "/account/orders" },
+          { label: "Settings", href: "/account/settings" },
         ],
       },
       {
@@ -403,6 +496,8 @@ export const brand: Brand = {
         links: [
           { label: "Terms of Service", href: "/terms" },
           { label: "Privacy Policy", href: "/privacy" },
+          { label: "Accessibility", href: "/accessibility" },
+          { label: "Sitemap", href: "/sitemap-page" },
         ],
       },
     ],

package/templates/storefront-grocery/AGENTS.md

@@ -10,24 +10,69 @@ If you are an AI agent (Claude, Cursor, Aider, devin, …) working on this store
 
 ## Aesthetic
 
-Approachable grocer — Trader Joe's / Whole Foods / abundant-feel:
-
 - **Inter sans only** (no serif) — friendly, readable for dense product grids.
-- **Fresh green + cream**: vibrant green primary, warm cream background.
+- **Fresh green + cream** — vibrant green primary, warm cream background.
 - **Generous radius**: `0.875rem` — softer than retail.
 - **Bold, slightly heavy** headings.
+- Schema.org `@type` is `GroceryStore`.
+
+## Page surface
+
+```
+app/
+  page.tsx                       Home — hero ("Free delivery over GH₵150"),
+                                  collection strips, category grid, newsletter
+  shop/page.tsx                  Aisle (SDK <CataloguePage/>)
+  search/page.tsx                Search
+  collections/[slug]/page.tsx    Collection landing (e.g. weekly box, deals)
+  categories/[slug]/page.tsx     Category landing
+
+  cart/page.tsx, checkout/page.tsx, orders/[id]/page.tsx
+
+  account/page.tsx               <CimplifyAccount /> (iframe)
+  account/orders/page.tsx        <CimplifyAccount section="orders" />
+  account/addresses/page.tsx     <CimplifyAccount section="addresses" />
+  account/settings/page.tsx      <CimplifyAccount section="settings" />
+  login/page.tsx, signup/page.tsx  redirects → /account
+
+  contact/page.tsx, track-order/page.tsx
+
+  about/page.tsx, faq/page.tsx
+  shipping/page.tsx (delivery + slots), returns/page.tsx (quality guarantee),
+  accessibility/page.tsx, terms/page.tsx, privacy/page.tsx
+
+  sitemap-page/page.tsx, sitemap.ts, robots.ts, llms.txt/route.ts, opensearch.xml/route.ts
+  error.tsx, not-found.tsx
+```
+
+## File ↔ brand-field map
+
+| File | Reads from `brand` |
+|---|---|
+| `app/layout.tsx` | identity, contact, socials, GroceryStore JSON-LD |
+| `app/page.tsx` | `brand.hero` (free-delivery badge) |
+| `app/about/page.tsx` | `brand.about` |
+| `app/faq/page.tsx` | `brand.faq` (delivery slots, sourcing, subscription boxes) |
+| `app/shipping/page.tsx` | `brand.shipping` (delivery slots + free-over threshold) |
+| `app/returns/page.tsx` | `brand.returns` (quality guarantee) |
+| `app/accessibility/page.tsx` | `brand.accessibility` |
+| `app/terms/page.tsx`, `app/privacy/page.tsx` | `brand.terms`, `brand.privacy` |
+| `app/contact/page.tsx` | `brand.contactPage`, `brand.contact` |
+| `app/track-order/page.tsx` | `brand.trackOrder` |
+| `app/account/*/page.tsx` | `brand.account` (iframe owns UI) |
+| `app/llms.txt/route.ts` | `brand.llms`, contact, currency |
+| `components/header.tsx`, `footer.tsx` | `brand.header`, `brand.footer`, `brand.contact`, `brand.socials` |
 
-## Industry-specific copy patterns
+## Grocery-specific notes
 
-- `brand.hero.badge` is `"Free delivery over GH₵150"` — pricing-led trust signal.
-- `brand.hero.primaryCtaLabel` is `"Shop the aisle"`.
-- `brand.tradeIn` is omitted.
-- `brand.faq` covers delivery slots, sourcing/quality, subscription boxes.
-- Schema.org type is `GroceryStore`.
+- **Subscription boxes** are modelled as products with `billing_plans` (renders the SubscriptionCard variant). The basket-box landing lives at `/categories/baskets`.
+- **Weight-based pricing**: SDK supports `quantity_pricing` tiers per product, but most grocery products are sold by unit/kg. Real weight-at-pack pricing happens on the backend pricing rule.
+- Mock seed: `--seed grocery` (FreshMart).
 
-## Mock seed
+## Known TODOs
 
-Wired to `--seed grocery` (FreshMart).
+- Contact + newsletter fake submits.
+- Hero / category / product imagery is Unsplash placeholder — replace with merchant photography.
 
 ## Quick start
 

package/templates/storefront-grocery/app/accessibility/page.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+import { PolicyPage } from "@/components/policy-page";
+
+export const metadata: Metadata = {
+  title: `${brand.accessibility.title} — ${brand.name}`,
+};
+
+export default function AccessibilityPage() {
+  return <PolicyPage policy={brand.accessibility} />;
+}

package/templates/storefront-grocery/app/account/addresses/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Addresses — ${brand.name}`,
+};
+
+export default function AddressesPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Your addresses
+      </h1>
+      <AccountIframe section="addresses" />
+    </article>
+  );
+}

package/templates/storefront-grocery/app/account/orders/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Orders — ${brand.name}`,
+};
+
+export default function OrdersPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Your orders
+      </h1>
+      <AccountIframe section="orders" />
+    </article>
+  );
+}

package/templates/storefront-grocery/app/account/page.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Account — ${brand.name}`,
+  description: brand.account.signupSubtitle,
+};
+
+export default function AccountPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        {brand.account.accountEyebrow}
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        {brand.account.accountTitle}
+      </h1>
+      <AccountIframe />
+    </article>
+  );
+}

package/templates/storefront-grocery/app/account/settings/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Settings — ${brand.name}`,
+};
+
+export default function SettingsPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Settings
+      </h1>
+      <AccountIframe section="settings" />
+    </article>
+  );
+}

package/templates/storefront-grocery/app/contact/contact-form.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useState } from "react";
+
+/**
+ * Local-only contact form. On submit, fakes a successful response so the
+ * template ships a usable interaction. Wire to a real handler (Server
+ * Action posting to your CRM, support inbox, or Cimplify Support API)
+ * before going to production.
+ */
+export function ContactForm({ reasons }: { reasons: string[] }) {
+  const [submitted, setSubmitted] = useState(false);
+  const [reason, setReason] = useState(reasons[0] ?? "");
+
+  if (submitted) {
+    return (
+      <div className="rounded-2xl border border-border bg-card p-8">
+        <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+          ✓ Sent
+        </p>
+        <h2 className="font-serif text-2xl font-semibold mb-2">Thanks — we'll be in touch.</h2>
+        <p className="text-muted-foreground">
+          We respond within one business day. Check your spam folder if you don't see a
+          reply by tomorrow.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        setSubmitted(true);
+      }}
+      className="space-y-5"
+    >
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <Field label="Your name" name="name" required />
+        <Field label="Email" name="email" type="email" required />
+      </div>
+      <div>
+        <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5">
+          What's it about?
+        </label>
+        <select
+          name="reason"
+          value={reason}
+          onChange={(e) => setReason(e.target.value)}
+          className="w-full px-4 py-2.5 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm"
+        >
+          {reasons.map((r) => (
+            <option key={r} value={r}>
+              {r}
+            </option>
+          ))}
+        </select>
+      </div>
+      <Field label="Order number (optional)" name="order" />
+      <div>
+        <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5">
+          Message
+        </label>
+        <textarea
+          name="message"
+          required
+          rows={6}
+          className="w-full px-4 py-2.5 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm resize-y"
+        />
+      </div>
+      <button
+        type="submit"
+        className="inline-flex items-center justify-center px-5 py-3 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors"
+      >
+        Send message
+      </button>
+    </form>
+  );
+}
+
+function Field({
+  label,
+  name,
+  type = "text",
+  required,
+}: {
+  label: string;
+  name: string;
+  type?: string;
+  required?: boolean;
+}) {
+  return (
+    <div>
+      <label
+        htmlFor={name}
+        className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5"
+      >
+        {label}
+      </label>
+      <input
+        id={name}
+        name={name}
+        type={type}
+        required={required}
+        className="w-full px-4 py-2.5 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm"
+      />
+    </div>
+  );
+}

package/templates/storefront-grocery/app/contact/page.tsx

@@ -0,0 +1,54 @@
+import type { Metadata } from "next";
+import { ContactForm } from "./contact-form";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Contact — ${brand.name}`,
+  description: brand.contactPage.body,
+};
+
+export default function ContactPage() {
+  const c = brand.contactPage;
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-16">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        {c.eyebrow}
+      </p>
+      <h1 className="font-serif text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-4 -tracking-[0.02em]">
+        {c.title}
+      </h1>
+      <p className="text-lg text-muted-foreground max-w-2xl mb-12 leading-relaxed">{c.body}</p>
+
+      <div className="grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-10 items-start">
+        <ContactForm reasons={c.reasons} />
+        <aside className="space-y-5 lg:pl-10 lg:border-l border-border">
+          <div>
+            <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground mb-3">
+              Direct lines
+            </p>
+            <ul className="space-y-3 list-none p-0 m-0">
+              {c.directLines.map((line) => (
+                <li key={line.label}>
+                  <p className="text-xs text-muted-foreground m-0">{line.label}</p>
+                  <a
+                    href={line.href}
+                    className="text-foreground hover:text-primary transition-colors"
+                  >
+                    {line.value}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div>
+            <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground mb-3">
+              Visit
+            </p>
+            <p className="text-foreground m-0">{brand.contact.address}</p>
+            <p className="text-xs text-muted-foreground mt-1">{brand.contact.hours}</p>
+          </div>
+        </aside>
+      </div>
+    </article>
+  );
+}

package/templates/storefront-grocery/app/login/page.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Sign in — ${brand.name}`,
+  description: brand.account.loginSubtitle,
+};
+
+/**
+ * Cimplify Link (the iframe in `<CimplifyAccount>`) handles sign-in
+ * automatically when no session exists. We just bounce /login to /account
+ * so consumers landing here get the right UI without a duplicate form.
+ */
+export default function LoginPage(): never {
+  redirect("/account");
+}

package/templates/storefront-grocery/app/opensearch.xml/route.ts

@@ -0,0 +1,37 @@
+import { brand } from "@/lib/brand";
+
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+
+/**
+ * OpenSearch description document — lets browsers add this site to the
+ * address bar's search engine list. When users press Tab after typing the
+ * domain, they get an inline search box that hits /search?q=...
+ */
+export async function GET(): Promise<Response> {
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
+  <ShortName>${escapeXml(brand.shortName)}</ShortName>
+  <Description>Search ${escapeXml(brand.name)}</Description>
+  <InputEncoding>UTF-8</InputEncoding>
+  <Url type="text/html" method="get" template="${SITE_URL}/search?q={searchTerms}" />
+  <Url type="application/opensearchdescription+xml" rel="self" template="${SITE_URL}/opensearch.xml" />
+  <moz:SearchForm>${SITE_URL}/search</moz:SearchForm>
+</OpenSearchDescription>
+`;
+  return new Response(xml, {
+    headers: {
+      "Content-Type": "application/opensearchdescription+xml; charset=utf-8",
+      "Cache-Control": "public, max-age=86400",
+    },
+  });
+}
+
+function escapeXml(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}