Update React Editor integration and clean up template

.env.example

@@ -1,12 +0,0 @@
-# Shopify Storefront
-NEXT_PUBLIC_SHOPIFY_DOMAIN=mock.shop
-# NEXT_PUBLIC_SHOPIFY_PUBLIC_ACCESS_TOKEN=
-# NEXT_PUBLIC_SHOPIFY_API_VERSION=2026-07
-
-# Store assistant — set to 1 to show the Ask launcher; anything else hides it
-NEXT_PUBLIC_ENABLE_AI=0
-
-# Store assistant (/api/chat) — https://openrouter.ai/keys
-OPENROUTER_API_KEY=
-# Optional; defaults to openai/gpt-5.6-luna-pro
-# OPENROUTER_MODEL=

README.md

@@ -1,6 +1,4 @@
-# React Editor Demo (Shopify)
+# Shopify Hydrogen
-
-Standalone Vite SPA wiring up the Shopify-aware React Editor via `<App />` from `@reacteditor/core`.
 
 ## What's here
 

app/about/editor/page.tsx

@@ -1,9 +1,6 @@
 import PageEditor from '@/components/page-editor';
 import pageData from '../page.json';
 
-// Editor for /about. Sitting under the route it edits means the preview
-// resolves the same params the public page gets, and `../page.json` is the
-// very file publishing writes back to.
 export default function EditorPage() {
-  return <PageEditor routeKey="/about" page={pageData} />;
+  return <PageEditor pagePath="app/about/page.json" page={pageData} />;
 }

app/api/chat/route.ts

@@ -9,10 +9,8 @@ import {
   getCollectionProductsPage,
   isDefaultTitleOption,
   isDefaultTitleSelection,
-} from '@/services/shopify/catalog';
+} from '@/services/shopify/shop';
 
-// Streaming needs the Node runtime here because the Storefront helpers run
-// server-side on each tool call.
 export const maxDuration = 30;
 
 const MODEL = process.env.OPENROUTER_MODEL ?? 'openai/gpt-5.6-luna-pro';
@@ -36,7 +34,6 @@ Guidelines:
 - You cannot place orders, change carts, process payments, or look up customer
   or order data. Say so and point the shopper to the relevant page instead.`;
 
-// Trim the Storefront payloads to what the model actually needs to answer.
 const summariseProduct = (product: {
   id: string;
   title: string;
@@ -88,12 +85,9 @@ export async function POST(req: Request) {
   const openrouter = createOpenRouter({ apiKey });
 
   const result = streamText({
-    // `reasoning` asks OpenRouter to stream the model's thinking; the UI
-    // renders it via the Reasoning component.
     model: openrouter(MODEL, { reasoning: { enabled: true, effort: 'medium' } }),
     system: SYSTEM_PROMPT,
     messages: await convertToModelMessages(messages),
-    // Let the model call a tool, read the result, then answer.
     stopWhen: stepCountIs(5),
     tools: {
       searchCatalogue: tool({
@@ -201,7 +195,5 @@ export async function POST(req: Request) {
     },
   });
 
-  // sendReasoning forwards reasoning parts to the client; without it the
-  // stream carries text and tool calls only.
   return result.toUIMessageStreamResponse({ sendReasoning: true });
 }

app/collections/[handle]/editor/page.tsx

@@ -1,9 +1,11 @@
 import PageEditor from '@/components/page-editor';
 import pageData from '../page.json';
 
-// Editor for /collections/[handle]. Sitting under the route it edits means the preview
-// resolves the same params the public page gets, and `../page.json` is the
-// very file publishing writes back to.
 export default function EditorPage() {
-  return <PageEditor routeKey="/collections/[handle]" page={pageData} />;
+  return (
+    <PageEditor
+      pagePath="app/collections/[handle]/page.json"
+      page={pageData}
+    />
+  );
 }

app/collections/[handle]/page.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
 import PageRender from '@/components/page-render';
 import { pageMetadata } from '@/lib/page-metadata';
-import { getCollectionProductsPage } from '@/services/shopify/catalog';
+import { getCollectionProductsPage } from '@/services/shopify/shop';
 import { truncate } from '@/lib/utils';
 import page from './page.json';
 
@@ -12,14 +12,11 @@ export async function generateMetadata({
 }): Promise<Metadata> {
   const { handle } = await params;
 
-  // No collection-only query exists, so ask for the smallest page of products
+  // Shopify exposes collection metadata through the products connection.
-  // and use just the collection node off it.
   const { collection } = await getCollectionProductsPage(handle, {
     first: 1,
   }).catch(() => ({ collection: null }));
 
-  // The blocks fetch client-side and render their own empty state, so a failed
-  // lookup falls back to the page.json tags rather than a 500.
   if (!collection) return pageMetadata(page);
 
   return pageMetadata(page, {

app/collections/editor/page.tsx

@@ -1,9 +1,6 @@
 import PageEditor from '@/components/page-editor';
 import pageData from '../page.json';
 
-// Editor for /collections. Sitting under the route it edits means the preview
-// resolves the same params the public page gets, and `../page.json` is the
-// very file publishing writes back to.
 export default function EditorPage() {
-  return <PageEditor routeKey="/collections" page={pageData} />;
+  return <PageEditor pagePath="app/collections/page.json" page={pageData} />;
 }

app/editor/page.tsx

@@ -1,9 +1,6 @@
 import PageEditor from '@/components/page-editor';
 import pageData from '../page.json';
 
-// Editor for /. Sitting under the route it edits means the preview
-// resolves the same params the public page gets, and `../page.json` is the
-// very file publishing writes back to.
 export default function EditorPage() {
-  return <PageEditor routeKey="/" page={pageData} />;
+  return <PageEditor pagePath="app/page.json" page={pageData} />;
 }

app/globals.css

@@ -3,53 +3,41 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-  /* Refined neutral modern palette */
   --color-background: hsl(0 0% 100%);
   --color-foreground: hsl(240 10% 3.9%);
 
-  /* Card */
   --color-card: hsl(0 0% 100%);
   --color-card-foreground: hsl(240 10% 3.9%);
 
-  /* Popover */
   --color-popover: hsl(0 0% 100%);
   --color-popover-foreground: hsl(240 10% 3.9%);
 
-  /* Primary - Deep neutral slate for professional look */
   --color-primary: hsl(240 5.9% 10%);
   --color-primary-foreground: hsl(0 0% 98%);
 
-  /* Secondary */
   --color-secondary: hsl(240 4.8% 95.9%);
   --color-secondary-foreground: hsl(240 5.9% 10%);
 
-  /* Muted */
   --color-muted: hsl(240 4.8% 95.9%);
   --color-muted-foreground: hsl(240 3.8% 46.1%);
 
-  /* Accent - Subtle warm gray */
   --color-accent: hsl(30 6.7% 95%);
   --color-accent-foreground: hsl(240 5.9% 10%);
 
-  /* Destructive */
   --color-destructive: hsl(0 84.2% 60.2%);
   --color-destructive-foreground: hsl(0 0% 98%);
 
-  /* Shop (accelerated checkout) purple */
   --color-shop: #5a31f4;
 
-  /* Border */
   --color-border: hsl(240 5.9% 90%);
   --color-input: hsl(240 5.9% 90%);
   --color-ring: hsl(240 5.9% 10%);
 
-  /* Radius - Modern larger corners */
   --radius-sm: 0.5rem;
   --radius-md: 0.75rem;
   --radius-lg: 1rem;
   --radius-xl: 1.25rem;
 
-  /* Typography — Geist Sans / Geist Mono */
   --font-sans: var(--font-geist-sans), system-ui, sans-serif;
   --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
   --font-heading: var(--font-geist-sans), system-ui, sans-serif;
@@ -57,10 +45,7 @@
   --font-poppins: var(--font-geist-sans), system-ui, sans-serif;
 }
 
-/* Base styles for light, modern Shopify storefront */
+/* Tailwind v4 otherwise defaults unqualified borders to currentColor. */
-/* Tailwind v4 defaults an unqualified `border` to currentColor. shadcn
-   components (e.g. Button's outline variant) rely on this base layer to pick up
-   the theme's border colour instead of the text colour. */
 @layer base {
   * {
     border-color: var(--color-border);
@@ -75,7 +60,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* Modern card design for products and collections */
 .card-modern {
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   border: 1px solid var(--color-border);
@@ -87,7 +71,6 @@ body {
   border-color: hsl(240 5.9% 85%);
 }
 
-/* Heading styles — regular weight, slightly tightened like the Geist reference */
 h1,
 h2,
 .font-heading {
@@ -95,7 +78,6 @@ h2,
   letter-spacing: -0.02em;
 }
 
-/* Swipeable rows (mobile galleries) without a visible scrollbar */
 .no-scrollbar {
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -105,7 +87,6 @@ h2,
   display: none;
 }
 
-/* Diagonal strike marking an unavailable product option (size pill, swatch) */
 .option-unavailable {
   background-image: linear-gradient(
     to top right,
@@ -116,7 +97,6 @@ h2,
   );
 }
 
-/* Product description (HTML returned by the Storefront API) */
 .product-description p {
   margin-bottom: 1rem;
 }
@@ -125,7 +105,6 @@ h2,
   margin-bottom: 0;
 }
 
-/* Shop policy body (HTML returned by the Storefront API) */
 .policy-body p,
 .policy-body ul,
 .policy-body ol {
@@ -164,7 +143,6 @@ h2,
   margin-bottom: 0;
 }
 
-/* Enhanced button styles */
 button,
 .btn-modern {
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -177,12 +155,10 @@ button,
     0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
 
-/* Hero section styles */
 .hero-bg {
   background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
 }
 
-/* Product gallery improvements */
 .product-gallery-main {
   transition: box-shadow 0.3s ease;
 }
@@ -191,7 +167,6 @@ button,
   box-shadow: 0 0 0 1px hsl(240 5.9% 80%) inset;
 }
 
-/* Clean price display */
 .price-display {
   font-feature-settings: 'tnum';
 }

app/layout.tsx

@@ -14,8 +14,6 @@ const geistMono = Geist_Mono({
   variable: '--font-geist-mono',
 });
 
-// Per-page tags come from each page.json's root props via pageMetadata(); this
-// is the fallback for routes that don't set their own.
 export const metadata: Metadata = {
   metadataBase: new URL(site.url),
   title: {
@@ -44,9 +42,6 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" className={`${geist.variable} ${geistMono.variable}`}>
-      {/* Header, footer and the store assistant are editable blocks now, so
-          each page.json carries its own chrome rather than the layout doing
-          it. Keeps what the editor shows identical to what the route ships. */}
       <body className="font-body antialiased bg-background text-foreground m-0 p-0 flex min-h-screen flex-col">
         <div className="flex-1">{children}</div>
       </body>

app/policies/[handle]/editor/page.tsx

@@ -1,9 +1,8 @@
 import PageEditor from '@/components/page-editor';
 import pageData from '../page.json';
 
-// Editor for /policies/[handle]. Sitting under the route it edits means the preview
-// resolves the same params the public page gets, and `../page.json` is the
-// very file publishing writes back to.
 export default function EditorPage() {
-  return <PageEditor routeKey="/policies/[handle]" page={pageData} />;
+  return (
+    <PageEditor pagePath="app/policies/[handle]/page.json" page={pageData} />
+  );
 }

app/products/[handle]/editor/page.tsx

@@ -1,9 +1,8 @@
 import PageEditor from '@/components/page-editor';
 import pageData from '../page.json';
 
-// Editor for /products/[handle]. Sitting under the route it edits means the preview
-// resolves the same params the public page gets, and `../page.json` is the
-// very file publishing writes back to.
 export default function EditorPage() {
-  return <PageEditor routeKey="/products/[handle]" page={pageData} />;
+  return (
+    <PageEditor pagePath="app/products/[handle]/page.json" page={pageData} />
+  );
 }

app/products/[handle]/page.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
 import PageRender from '@/components/page-render';
 import { pageMetadata } from '@/lib/page-metadata';
-import { getProduct } from '@/services/shopify/catalog';
+import { getProduct } from '@/services/shopify/shop';
 import { truncate } from '@/lib/utils';
 import page from './page.json';
 
@@ -12,8 +12,6 @@ export async function generateMetadata({
 }): Promise<Metadata> {
   const { handle } = await params;
 
-  // The blocks fetch client-side and render their own empty state, so a failed
-  // lookup falls back to the page.json tags rather than a 500.
   const product = await getProduct(handle).catch(() => null);
   if (!product) return pageMetadata(page);
 

app/search/editor/page.tsx

@@ -1,9 +1,6 @@
 import PageEditor from '@/components/page-editor';
 import pageData from '../page.json';
 
-// Editor for /search. Sitting under the route it edits means the preview
-// resolves the same params the public page gets, and `../page.json` is the
-// very file publishing writes back to.
 export default function EditorPage() {
-  return <PageEditor routeKey="/search" page={pageData} />;
+  return <PageEditor pagePath="app/search/page.json" page={pageData} />;
 }

app/shop/collections/page.tsx

@@ -1,12 +1,10 @@
 import type { Metadata } from 'next';
 import PageRender from '@/components/page-render';
 import { pageMetadata } from '@/lib/page-metadata';
-// Alias of /collections — same page.json, so editing that route updates both.
 import page from '../../collections/page.json';
 
 export const metadata: Metadata = {
   ...pageMetadata(page),
-  // Point crawlers at the canonical listing.
   alternates: { canonical: '/collections' },
 };
 

components/ai-elements/attachments.tsx

@@ -20,10 +20,6 @@ import {
 import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
 import { createContext, useCallback, useContext, useMemo } from "react";
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type AttachmentData =
   | (FileUIPart & { id: string })
   | (SourceDocumentUIPart & { id: string });
@@ -47,10 +43,6 @@ const mediaCategoryIcons: Record<AttachmentMediaCategory, typeof ImageIcon> = {
   video: VideoIcon,
 };
 
-// ============================================================================
-// Utility Functions
-// ============================================================================
-
 export const getMediaCategory = (
   data: AttachmentData
 ): AttachmentMediaCategory => {
@@ -108,10 +100,6 @@ const renderAttachmentImage = (
     />
   );
 
-// ============================================================================
-// Contexts
-// ============================================================================
-
 interface AttachmentsContextValue {
   variant: AttachmentVariant;
 }
@@ -127,10 +115,6 @@ interface AttachmentContextValue {
 
 const AttachmentContext = createContext<AttachmentContextValue | null>(null);
 
-// ============================================================================
-// Hooks
-// ============================================================================
-
 export const useAttachmentsContext = () =>
   useContext(AttachmentsContext) ?? { variant: "grid" as const };
 
@@ -142,10 +126,6 @@ export const useAttachmentContext = () => {
   return ctx;
 };
 
-// ============================================================================
-// Attachments - Container
-// ============================================================================
-
 export type AttachmentsProps = HTMLAttributes<HTMLDivElement> & {
   variant?: AttachmentVariant;
 };
@@ -175,10 +155,6 @@ export const Attachments = ({
   );
 };
 
-// ============================================================================
-// Attachment - Item
-// ============================================================================
-
 export type AttachmentProps = HTMLAttributes<HTMLDivElement> & {
   data: AttachmentData;
   onRemove?: () => void;
@@ -225,10 +201,6 @@ export const Attachment = ({
   );
 };
 
-// ============================================================================
-// AttachmentPreview - Media preview
-// ============================================================================
-
 export type AttachmentPreviewProps = HTMLAttributes<HTMLDivElement> & {
   fallbackIcon?: ReactNode;
 };
@@ -275,10 +247,6 @@ export const AttachmentPreview = ({
   );
 };
 
-// ============================================================================
-// AttachmentInfo - Name and type display
-// ============================================================================
-
 export type AttachmentInfoProps = HTMLAttributes<HTMLDivElement> & {
   showMediaType?: boolean;
 };
@@ -307,10 +275,6 @@ export const AttachmentInfo = ({
   );
 };
 
-// ============================================================================
-// AttachmentRemove - Remove button
-// ============================================================================
-
 export type AttachmentRemoveProps = ComponentProps<typeof Button> & {
   label?: string;
 };
@@ -365,10 +329,6 @@ export const AttachmentRemove = ({
   );
 };
 
-// ============================================================================
-// AttachmentHoverCard - Hover preview
-// ============================================================================
-
 export type AttachmentHoverCardProps = ComponentProps<typeof HoverCard>;
 
 export const AttachmentHoverCard = ({
@@ -403,10 +363,6 @@ export const AttachmentHoverCardContent = ({
   />
 );
 
-// ============================================================================
-// AttachmentEmpty - Empty state
-// ============================================================================
-
 export type AttachmentEmptyProps = HTMLAttributes<HTMLDivElement>;
 
 export const AttachmentEmpty = ({

components/ai-elements/markdown.tsx

@@ -24,16 +24,12 @@ import remarkRehype from "remark-rehype";
 import remend from "remend";
 import { unified } from "unified";
 
-// Raw HTML never reaches the tree: remark-rehype drops it (allowDangerousHtml
+// Sanitize model output and reject unsafe URL protocols.
-// is off by default) and rehype-sanitize is the second line of defence, mainly
-// for its href protocol allow-list — that is what stops `javascript:` URLs.
-// Relative hrefs carry no protocol, so storefront links pass through untouched.
 const schema = {
   ...defaultSchema,
   attributes: {
     ...defaultSchema.attributes,
-    // GFM task lists render as disabled checkboxes. The default schema allows
+    // Preserve checked state for sanitized GFM task lists.
-    // `type` and `disabled` but not `checked`, so every box would read unticked.
     input: [...(defaultSchema.attributes?.input ?? []), "checked"],
   },
 };
@@ -44,22 +40,15 @@ const processor = unified()
   .use(remarkRehype)
   .use(rehypeSanitize, schema);
 
-// `text-only` leaves a half-streamed `[label](htt` as plain text. remend's
+// Keep incomplete links as text while streaming.
-// default instead emits a `streamdown:incomplete-link` placeholder href, which
-// the sanitizer would strip anyway.
 const REMEND_OPTIONS = { linkMode: "text-only" } as const;
 
-// remend only ever runs on text that is still arriving. On finished text it can
+// Repair only streaming text; remend can corrupt settled italicized prices.
-// do damage: it reads `*$89*` as an unclosed italic (the `$` throws off its
-// closing-delimiter scan) and appends a stray `*`, which then parses as an empty
-// bullet. Prices in italics are ordinary storefront copy, so settled messages
-// render verbatim and only the in-flight one gets repaired.
 const repair = (markdown: string, isStreaming: boolean) =>
   isStreaming ? remend(markdown, REMEND_OPTIONS) : markdown;
 
 export interface LinkSafetyConfig {
   enabled: boolean;
-  /** Return true for links that may open without a confirmation step. */
   onLinkCheck?: (url: string) => boolean;
 }
 
@@ -71,9 +60,6 @@ type AnchorProps = ComponentProps<"a"> & {
 const LINK_CLASS =
   "font-medium underline underline-offset-4 hover:text-foreground";
 
-// Route-relative hrefs are the storefront links the assistant emits. Deciding
-// this from the string alone keeps the server and client passes identical;
-// `linkSafety.onLinkCheck` does the origin-aware check later, at click time.
 const isRouteHref = (href: string) => /^[/#?]/.test(href);
 
 const MarkdownLink = ({
@@ -82,8 +68,6 @@ const MarkdownLink = ({
   onUntrusted,
   ...props
 }: AnchorProps) => {
-  // Runs on click rather than on render so it can read `window.location`,
-  // which is unavailable during the server pass.
   const handleClick = useCallback(
     (event: MouseEvent<HTMLAnchorElement>) => {
       if (!href || !linkSafety?.enabled || !linkSafety.onLinkCheck) return;
@@ -95,8 +79,6 @@ const MarkdownLink = ({
     [href, linkSafety, onUntrusted]
   );
 
-  // In-app destinations navigate client-side in the same tab; sending a shopper
-  // to a product page in a new tab would strand the conversation behind it.
   if (href && isRouteHref(href)) {
     return <Link className={LINK_CLASS} href={href} {...props} />;
   }
@@ -113,7 +95,6 @@ const MarkdownLink = ({
   );
 };
 
-// Fenced code renders as plain preformatted text — no tokenizer, no themes.
 const buildComponents = (
   linkSafety: LinkSafetyConfig | undefined,
   onUntrusted: (url: string) => void
@@ -128,8 +109,6 @@ const buildComponents = (
     />
   ),
   code: ({ className, ...props }: ComponentProps<"code">) => {
-    // Only fenced blocks carry a language class, and those already sit inside a
-    // <pre>, so they must not get the inline pill treatment.
     const isBlock =
       typeof className === "string" && className.includes("language-");
 
@@ -167,8 +146,6 @@ const buildComponents = (
   hr: (props: ComponentProps<"hr">) => (
     <hr className="my-4 border-border" {...props} />
   ),
-  // GFM task-list boxes are display only; readOnly silences React's warning
-  // about a `checked` input with no change handler.
   input: (props: ComponentProps<"input">) => (
     <input className="mr-1.5 align-middle" readOnly {...props} />
   ),
@@ -213,7 +190,6 @@ const buildComponents = (
 
 export type MarkdownProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
   children: string;
-  /** True while tokens are still arriving; enables incomplete-syntax repair. */
   isAnimating?: boolean;
   linkSafety?: LinkSafetyConfig;
 };
@@ -231,8 +207,6 @@ export const Markdown = memo(
     const handleUntrusted = useCallback((url: string) => setPending(url), []);
 
     const content = useMemo(() => {
-      // While streaming, close syntax the model has not finished emitting so a
-      // partial `**bold` renders as bold rather than as literal asterisks.
       const source = repair(children ?? "", isAnimating === true);
       const tree = processor.runSync(processor.parse(source)) as Nodes;
 

components/ai-elements/message.tsx

@@ -202,7 +202,6 @@ export const MessageBranchContent = ({
     [children]
   );
 
-  // Use useEffect to update branches when they change
   useEffect(() => {
     if (branches.length !== childrenArray.length) {
       setBranches(childrenArray);
@@ -231,7 +230,6 @@ export const MessageBranchSelector = ({
 }: MessageBranchSelectorProps) => {
   const { totalBranches } = useMessageBranch();
 
-  // Don't render if there's only one branch
   if (totalBranches <= 1) {
     return null;
   }
@@ -317,7 +315,6 @@ export const MessageBranchPage = ({
 
 export type MessageResponseProps = ComponentProps<typeof Markdown>;
 
-// Markdown already memoises on children/isAnimating.
 export const MessageResponse = Markdown;
 
 export type MessageToolbarProps = ComponentProps<"div">;

components/ai-elements/prompt-input.tsx

@@ -74,15 +74,10 @@ import {
   useState,
 } from "react";
 
-// ============================================================================
-// Helpers
-// ============================================================================
-
 const convertBlobUrlToDataUrl = async (url: string): Promise<string | null> => {
   try {
     const response = await fetch(url);
     const blob = await response.blob();
-    // FileReader uses callback-based API, wrapping in Promise is necessary
     // oxlint-disable-next-line eslint-plugin-promise(avoid-new)
     return new Promise((resolve) => {
       const reader = new FileReader();
@@ -118,7 +113,6 @@ const captureScreenshot = async (): Promise<File | null> => {
 
     video.srcObject = stream;
 
-    // Video element uses callback-based API, wrapping in Promise is necessary
     // oxlint-disable-next-line eslint-plugin-promise(avoid-new)
     await new Promise<void>((resolve, reject) => {
       // oxlint-disable-next-line eslint-plugin-unicorn(prefer-add-event-listener)
@@ -144,7 +138,6 @@ const captureScreenshot = async (): Promise<File | null> => {
     }
 
     context.drawImage(video, 0, 0, width, height);
-    // canvas.toBlob uses callback-based API, wrapping in Promise is necessary
     // oxlint-disable-next-line eslint-plugin-promise(avoid-new)
     const blob = await new Promise<Blob | null>((resolve) => {
       canvas.toBlob(resolve, "image/png");
@@ -174,10 +167,6 @@ const captureScreenshot = async (): Promise<File | null> => {
   }
 };
 
-// ============================================================================
-// Provider Context & Types
-// ============================================================================
-
 export interface AttachmentsContext {
   files: (FileUIPart & { id: string })[];
   add: (files: File[] | FileList) => void;
@@ -196,7 +185,6 @@ export interface TextInputContext {
 export interface PromptInputControllerProps {
   textInput: TextInputContext;
   attachments: AttachmentsContext;
-  /** INTERNAL: Allows PromptInput to register its file textInput + "open" callback */
   __registerFileInput: (
     ref: RefObject<HTMLInputElement | null>,
     open: () => void
@@ -220,7 +208,6 @@ export const usePromptInputController = () => {
   return ctx;
 };
 
-// Optional variants (do NOT throw). Useful for dual-mode components.
 const useOptionalPromptInputController = () =>
   useContext(PromptInputController);
 
@@ -241,19 +228,14 @@ export type PromptInputProviderProps = PropsWithChildren<{
   initialInput?: string;
 }>;
 
-/**
+/** Lifts prompt state when shared control is needed. */
- * Optional global provider that lifts PromptInput state outside of PromptInput.
- * If you don't use it, PromptInput stays fully self-managed.
- */
 export const PromptInputProvider = ({
   initialInput: initialTextInput = "",
   children,
 }: PromptInputProviderProps) => {
-  // ----- textInput state
   const [textInput, setTextInput] = useState(initialTextInput);
   const clearInput = useCallback(() => setTextInput(""), []);
 
-  // ----- attachments state (global when wrapped)
   const [attachmentFiles, setAttachmentFiles] = useState<
     (FileUIPart & { id: string })[]
   >([]);
@@ -300,14 +282,13 @@ export const PromptInputProvider = ({
     });
   }, []);
 
-  // Keep a ref to attachments for cleanup on unmount (avoids stale closure)
+  // Keep the latest files available to the unmount cleanup.
   const attachmentsRef = useRef(attachmentFiles);
 
   useEffect(() => {
     attachmentsRef.current = attachmentFiles;
   }, [attachmentFiles]);
 
-  // Cleanup blob URLs on unmount to prevent memory leaks
   useEffect(
     () => () => {
       for (const f of attachmentsRef.current) {
@@ -365,14 +346,9 @@ export const PromptInputProvider = ({
   );
 };
 
-// ============================================================================
-// Component Context & Hooks
-// ============================================================================
-
 const LocalAttachmentsContext = createContext<AttachmentsContext | null>(null);
 
 export const usePromptInputAttachments = () => {
-  // Prefer local context (inside PromptInput) as it has validation, fall back to provider
   const provider = useOptionalProviderAttachments();
   const local = useContext(LocalAttachmentsContext);
   const context = local ?? provider;
@@ -384,10 +360,6 @@ export const usePromptInputAttachments = () => {
   return context;
 };
 
-// ============================================================================
-// Referenced Sources (Local to PromptInput)
-// ============================================================================
-
 export interface ReferencedSourcesContext {
   sources: (SourceDocumentUIPart & { id: string })[];
   add: (sources: SourceDocumentUIPart[] | SourceDocumentUIPart) => void;
@@ -490,16 +462,11 @@ export type PromptInputProps = Omit<
   HTMLAttributes<HTMLFormElement>,
   "onSubmit" | "onError"
 > & {
-  // e.g., "image/*" or leave undefined for any
   accept?: string;
   multiple?: boolean;
-  // When true, accepts drops anywhere on document. Default false (opt-in).
   globalDrop?: boolean;
-  // Render a hidden input with given name and keep it in sync for native form posts. Default false.
   syncHiddenInput?: boolean;
-  // Minimal constraints
   maxFiles?: number;
-  // bytes
   maxFileSize?: number;
   onError?: (err: {
     code: "max_files" | "max_file_size" | "accept";
@@ -524,24 +491,19 @@ export const PromptInput = ({
   children,
   ...props
 }: PromptInputProps) => {
-  // Try to use a provider controller if present
   const controller = useOptionalPromptInputController();
   const usingProvider = !!controller;
 
-  // Refs
   const inputRef = useRef<HTMLInputElement | null>(null);
   const formRef = useRef<HTMLFormElement | null>(null);
 
-  // ----- Local attachments (only used when no provider)
   const [items, setItems] = useState<(FileUIPart & { id: string })[]>([]);
   const files = usingProvider ? controller.attachments.files : items;
 
-  // ----- Local referenced sources (always local to PromptInput)
   const [referencedSources, setReferencedSources] = useState<
     (SourceDocumentUIPart & { id: string })[]
   >([]);
 
-  // Keep a ref to files for cleanup on unmount (avoids stale closure)
   const filesRef = useRef(files);
 
   useEffect(() => {
@@ -565,7 +527,6 @@ export const PromptInput = ({
 
       return patterns.some((pattern) => {
         if (pattern.endsWith("/*")) {
-          // e.g: image/* -> image/
           const prefix = pattern.slice(0, -1);
           return f.type.startsWith(prefix);
         }
@@ -638,7 +599,6 @@ export const PromptInput = ({
     []
   );
 
-  // Wrapper that validates files before calling provider's add
   const addWithProviderValidation = useCallback(
     (fileList: File[] | FileList) => {
       const incoming = [...fileList];
@@ -713,7 +673,6 @@ export const PromptInput = ({
     clearReferencedSources();
   }, [clearAttachments, clearReferencedSources]);
 
-  // Let provider know about our hidden file input so external menus can call openFileDialog()
   useEffect(() => {
     if (!usingProvider) {
       return;
@@ -721,22 +680,19 @@ export const PromptInput = ({
     controller.__registerFileInput(inputRef, () => inputRef.current?.click());
   }, [usingProvider, controller]);
 
-  // Note: File input cannot be programmatically set for security reasons
+  // Browsers forbid programmatically populating file inputs.
-  // The syncHiddenInput prop is no longer functional
   useEffect(() => {
     if (syncHiddenInput && inputRef.current && files.length === 0) {
       inputRef.current.value = "";
     }
   }, [files, syncHiddenInput]);
 
-  // Attach drop handlers on nearest form and document (opt-in)
   useEffect(() => {
     const form = formRef.current;
     if (!form) {
       return;
     }
     if (globalDrop) {
-      // when global drop is on, let the document-level handler own drops
       return;
     }
 
@@ -805,7 +761,6 @@ export const PromptInput = ({
       if (event.currentTarget.files) {
         add(event.currentTarget.files);
       }
-      // Reset input value to allow selecting files that were previously removed
       event.currentTarget.value = "";
     },
     [add]
@@ -853,19 +808,16 @@ export const PromptInput = ({
             return (formData.get("message") as string) || "";
           })();
 
-      // Reset form immediately after capturing text to avoid race condition
+      // Reset before async conversion so new input is not cleared afterward.
-      // where user input during async blob conversion would be lost
       if (!usingProvider) {
         form.reset();
       }
 
       try {
-        // Convert blob URLs to data URLs asynchronously
         const convertedFiles: FileUIPart[] = await Promise.all(
           files.map(async ({ id: _id, ...item }) => {
             if (item.url?.startsWith("blob:")) {
               const dataUrl = await convertBlobUrlToDataUrl(item.url);
-              // If conversion failed, keep the original blob URL
               return {
                 ...item,
                 url: dataUrl ?? item.url,
@@ -877,7 +829,6 @@ export const PromptInput = ({
 
         const result = onSubmit({ files: convertedFiles, text }, event);
 
-        // Handle both sync and async onSubmit
         if (result instanceof Promise) {
           try {
             await result;
@@ -886,23 +837,21 @@ export const PromptInput = ({
               controller.textInput.clear();
             }
           } catch {
-            // Don't clear on error - user may want to retry
+            // Preserve failed submissions for retry.
           }
         } else {
-          // Sync function completed without throwing, clear inputs
           clear();
           if (usingProvider) {
             controller.textInput.clear();
           }
         }
       } catch {
-        // Don't clear on error - user may want to retry
+        // Preserve failed submissions for retry.
       }
     },
     [usingProvider, controller, files, onSubmit, clear]
   );
 
-  // Render with or without local provider
   const inner = (
     <>
       <input
@@ -932,7 +881,6 @@ export const PromptInput = ({
     </LocalReferencedSourcesContext.Provider>
   );
 
-  // Always provide LocalAttachmentsContext so children get validated add function
   return (
     <LocalAttachmentsContext.Provider value={attachmentsCtx}>
       {withReferencedSources}
@@ -966,10 +914,8 @@ export const PromptInputTextarea = ({
 
   const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = useCallback(
     (e) => {
-      // Call the external onKeyDown handler first
       onKeyDown?.(e);
 
-      // If the external handler prevented default, don't run internal logic
       if (e.defaultPrevented) {
         return;
       }
@@ -983,7 +929,6 @@ export const PromptInputTextarea = ({
         }
         e.preventDefault();
 
-        // Check if the submit button is disabled before submitting
         const { form } = e.currentTarget;
         const submitButton = form?.querySelector(
           'button[type="submit"]'
@@ -995,7 +940,6 @@ export const PromptInputTextarea = ({
         form?.requestSubmit();
       }
 
-      // Remove last attachment when Backspace is pressed and textarea is empty
       if (
         e.key === "Backspace" &&
         e.currentTarget.value === "" &&
@@ -1205,9 +1149,6 @@ export const PromptInputActionMenuItem = ({
   <DropdownMenuItem className={cn(className)} {...props} />
 );
 
-// Note: Actions that perform side-effects (like opening a file dialog)
-// are provided in opt-in modules (e.g., prompt-input-attachments).
-
 export type PromptInputSubmitProps = ComponentProps<typeof InputGroupButton> & {
   status?: ChatStatus;
   onStop?: () => void;
@@ -1364,7 +1305,6 @@ export const PromptInputTabLabel = ({
   className,
   ...props
 }: PromptInputTabLabelProps) => (
-  // Content provided via children in props
   // oxlint-disable-next-line eslint-plugin-jsx-a11y(heading-has-content)
   <h3
     className={cn(

components/ai-elements/reasoning.tsx

@@ -63,7 +63,6 @@ export const Reasoning = memo(
     ...props
   }: ReasoningProps) => {
     const resolvedDefaultOpen = defaultOpen ?? isStreaming;
-    // Track if defaultOpen was explicitly set to false (to prevent auto-open)
     const isExplicitlyClosed = defaultOpen === false;
 
     const [isOpen, setIsOpen] = useControllableState<boolean>({
@@ -80,7 +79,6 @@ export const Reasoning = memo(
     const [hasAutoClosed, setHasAutoClosed] = useState(false);
     const startTimeRef = useRef<number | null>(null);
 
-    // Track when streaming starts and compute duration
     useEffect(() => {
       if (isStreaming) {
         hasEverStreamedRef.current = true;
@@ -93,14 +91,12 @@ export const Reasoning = memo(
       }
     }, [isStreaming, setDuration]);
 
-    // Auto-open when streaming starts (unless explicitly closed)
     useEffect(() => {
       if (isStreaming && !isOpen && !isExplicitlyClosed) {
         setIsOpen(true);
       }
     }, [isStreaming, isOpen, setIsOpen, isExplicitlyClosed]);
 
-    // Auto-close when streaming ends (once only, and only if it ever streamed)
     useEffect(() => {
       if (
         hasEverStreamedRef.current &&

components/ai-elements/shimmer.tsx

@@ -8,7 +8,6 @@ import { memo, useMemo } from "react";
 
 type MotionHTMLProps = MotionProps & Record<string, unknown>;
 
-// Cache motion components at module level to avoid creating during render
 const motionComponentCache = new Map<
   keyof JSX.IntrinsicElements,
   React.ComponentType<MotionHTMLProps>

components/logo.tsx

@@ -2,15 +2,10 @@ import React from 'react';
 import Link from 'next/link';
 
 interface LogoProps {
-  /** Logo image URL. Falls back to the store name as a wordmark when absent. */
   src?: string | null;
-  /** Wordmark text, and the image's alt text. */
   storeName?: string;
-  /** Where the logo links to. Pass null to render it unwrapped. */
   href?: string | null;
-  /** Sizing for the image — height only, so the aspect ratio is preserved. */
   imageClassName?: string;
-  /** Sizing and weight for the wordmark fallback. */
   textClassName?: string;
 }
 

components/page-editor.tsx

@@ -1,132 +1,51 @@
 'use client';
 
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
-import { useParams, usePathname, useRouter } from 'next/navigation';
 import { Editor, outlinePlugin, type Data } from '@reacteditor/core';
 import createTailwindCdnPlugin from '@reacteditor/plugin-tailwind-cdn';
 import { createShopifyPlugin } from '@reacteditor/plugin-shopify';
 import { appConfig } from '@/editor.config';
-import { ROUTE_KEYS, editorHref, findPageRoute } from '@/lib/pages';
 import { publishPage } from '@/lib/publish-page';
 import globals from '@/app.globals.json';
 
-// Plugin instances must keep a stable identity across renders, same as
+const plugins = [
-// `appConfig`, so they are built once at module scope.
+  outlinePlugin(),
-//
+  createTailwindCdnPlugin(),
-// The Tailwind CDN plugin only styles the editor's preview iframe; the public
+  createShopifyPlugin({
-// routes still get their utilities from the compiled `app/globals.css`.
-const tailwindCdn = createTailwindCdnPlugin();
-
-// Registers the `shopifyProduct` and `shopifyCollection` field types used by
-// the commerce blocks. Credentials are the same public storefront pair the
-// rendered components read — safe in the browser by definition.
-const shopify = createShopifyPlugin({
     storeDomain: process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? 'mock.shop',
     publicAccessToken:
       process.env.NEXT_PUBLIC_SHOPIFY_PUBLIC_ACCESS_TOKEN ?? undefined,
     apiVersion: process.env.NEXT_PUBLIC_SHOPIFY_API_VERSION ?? '2026-07',
-});
+  }),
-
+];
-// Adds the outline panel — the tree of blocks on the page, for selecting and
-// reordering without hunting through the preview.
-const outline = outlinePlugin();
-
-const plugins = [outline, tailwindCdn, shopify];
 
 export interface PageEditorProps {
-  /** Route key from `lib/pages.ts`, e.g. `/products/[handle]`. */
+  pagePath: string;
-  routeKey: string;
-  /**
-   * The route's own `page.json`, imported by the `editor/page.tsx` that mounts
-   * this — `import pageData from '../page.json'`. Bundled at build time, so the
-   * editor opens with the page already in hand and no request to wait on.
-   */
   page: Record<string, unknown>;
 }
 
-/**
+export default function PageEditor({ pagePath, page }: PageEditorProps) {
- * Shared editor shell, mounted by each route's `editor/page.tsx` child. The
- * public routes mount `PageRender` against the same `appConfig`, so the two
- * never drift.
- *
- * Being a child of the route it edits is what makes the preview real: the
- * editor sits on the same dynamic segments as the public page, so a block
- * calling `useParams()` inside the preview iframe sees the actual handle from
- * `/products/warrior-club-hoodie/editor` — no stand-in data required.
- *
- * Data comes in as a prop — the route's own `page.json`, imported by the
- * `editor/page.tsx` above it — and publishing writes that same file back to
- * disk through the `publishPage` server action.
- */
-export default function PageEditor({ routeKey, page }: PageEditorProps) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const params = useParams();
-
-  const [status, setStatus] = useState<string | null>(null);
-
-  // `app.globals.json` holds the props of blocks marked `global: true` (header,
-  // footer), which every page.json references via `"synced": true`. The editor
-  // needs them alongside the page so those blocks render their real content.
   const data = useMemo(
     () => ({ ...page, globals }) as unknown as Data,
     [page]
   );
 
-  // The editor lives at `<public path>/editor`; drop that segment to recover
-  // the page's own URL for the route descriptor and the URL bar.
-  const publicPath = useMemo(
-    () => (pathname ?? '/editor').replace(/\/editor\/?$/, '') || '/',
-    [pathname]
-  );
-
-  const routeParams = useMemo(() => {
-    const entries: Record<string, string | undefined> = {};
-    for (const [key, value] of Object.entries(params ?? {})) {
-      if (typeof value === 'string') entries[key] = value;
-    }
-    return entries;
-  }, [params]);
-
   const handlePublish = useCallback(
     async (published: Data) => {
-      setStatus('Saving…');
+      const result = await publishPage(pagePath, published);
-
+      if (result.error) throw new Error(result.error);
-      try {
-        const result = await publishPage(routeKey, published);
-
-        setStatus(
-          result.error ? result.error : `Saved to ${result.file}`
-        );
-      } catch {
-        setStatus('Could not reach the server.');
-      }
     },
-    [routeKey]
+    [pagePath]
   );
 
   return (
     <Editor
-      key={routeKey}
+      theme="light"
+      color="teal"
       config={appConfig as any}
       data={data}
       plugins={plugins}
-      routes={ROUTE_KEYS}
-      route={{ key: routeKey, path: publicPath, params: routeParams }}
-      onRouteChange={(nextKey) => {
-        // The picker hands back a route key; ignore anything not registered.
-        if (findPageRoute(nextKey)) router.push(editorHref(nextKey));
-      }}
       onPublish={handlePublish}
-      headerTitle={findPageRoute(routeKey)?.label ?? routeKey}
-      // The concrete URL being previewed. The editor's own URL bar shows the
-      // route key (the template being edited); this is the resolved path.
-      headerPath={publicPath}
-      renderHeaderActions={({ state }) => (
-        <span className="text-xs text-muted-foreground">
-          {status ?? `${state.data.content.length} blocks`}
-        </span>
-      )}
     />
   );
 }

components/page-render.tsx

@@ -10,20 +10,6 @@ export type PageData = {
   globals?: unknown;
 };
 
-/**
- * Shared renderer for a route. Drop a `page.json` next to a route's `page.tsx`,
- * import it, and hand it here:
- *
- *   import page from "./page.json";
- *   export default () => <PageRender page={page} />;
- *
- * The same `appConfig` backs `PageEditor`, so what an editor sees is what the
- * route ships.
- *
- * `app.globals.json` carries the props of blocks marked `global: true` — the
- * header and footer. Every page.json references them via `"synced": true`, so
- * editing the header once updates all thirteen routes.
- */
 export default function PageRender({ page }: { page: PageData }) {
   const data = { root: page.root, content: page.content, globals };
   return <Render config={appConfig as any} data={data as any} />;

components/shopify/cart-drawer.tsx

@@ -26,7 +26,7 @@ import {
   EmptyDescription,
   EmptyContent,
 } from '@/components/ui/empty';
-import { isDefaultTitleSelection } from '@/services/shopify/catalog';
+import { isDefaultTitleSelection } from '@/services/shopify/shop';
 
 const CartDrawer: React.FC = () => {
   const isOpen = useCartStore((s) => s.isOpen);
@@ -40,8 +40,7 @@ const CartDrawer: React.FC = () => {
   const [discountCode, setDiscountCode] = useState('');
   const [discountError, setDiscountError] = useState<string | null>(null);
   const [applyingDiscount, setApplyingDiscount] = useState(false);
-  // The store's `loading` flag is global, so track the specific line being
+  // Track row-level work separately from the cart's global loading state.
-  // changed to keep the other rows interactive.
   const [pendingLineId, setPendingLineId] = useState<string | null>(null);
 
   const runLineAction = async (lineId: string, action: () => Promise<unknown>) => {
@@ -80,7 +79,6 @@ const CartDrawer: React.FC = () => {
       setDiscountError(null);
       const updatedCart = await applyDiscountCode(code);
 
-      // Shopify accepts unknown codes silently, flagging them as inapplicable.
       const accepted = updatedCart.discountCodes?.some(
         (discount) =>
           discount.applicable &&
@@ -104,7 +102,6 @@ const CartDrawer: React.FC = () => {
   };
 
   const getSelectedOptions = (item: (typeof items)[0]) => {
-    // Single-SKU items carry a synthetic `Title: Default Title` — not worth a line.
     return (item.merchandise.selectedOptions ?? []).filter(
       (option) => !isDefaultTitleSelection(option)
     );
@@ -119,7 +116,6 @@ const CartDrawer: React.FC = () => {
       <AnimatePresence>
         {isOpen && (
           <SheetContent className="w-full max-w-md" showCloseButton={false}>
-            {/* Header */}
             <SheetHeader className="min-h-0 px-5 py-4 border-b-0">
               <div className="flex items-center justify-between w-full">
                 <SheetTitle className="text-base font-medium flex items-center gap-x-2">
@@ -140,7 +136,6 @@ const CartDrawer: React.FC = () => {
               </div>
             </SheetHeader>
 
-            {/* Cart Items */}
             <SheetBody className="px-5">
               {loading && items.length === 0 ? (
                 <div className="flex items-center justify-center py-12">
@@ -169,7 +164,6 @@ const CartDrawer: React.FC = () => {
 
                     return (
                       <div key={item.id} className="flex items-start gap-x-3">
-                        {/* Product Image */}
                         <div className="w-16 h-16 bg-zinc-100 overflow-hidden shrink-0">
                           {image ? (
                             <Image
@@ -186,7 +180,6 @@ const CartDrawer: React.FC = () => {
                           )}
                         </div>
 
-                        {/* Product Details */}
                         <div className="flex-1 min-w-0">
                           <div className="flex items-start justify-between gap-x-3">
                             <h4 className="text-sm font-medium text-foreground line-clamp-2">
@@ -209,7 +202,6 @@ const CartDrawer: React.FC = () => {
                             </div>
                           )}
 
-                          {/* Quantity Controls */}
                           <div className="flex items-center gap-x-2 mt-2">
                             <div className="inline-flex items-center rounded-full bg-secondary">
                               <Button
@@ -274,10 +266,8 @@ const CartDrawer: React.FC = () => {
               )}
             </SheetBody>
 
-            {/* Footer — discount, total, checkout */}
             {items.length > 0 && (
               <div className="px-5 py-5 space-y-4">
-                {/* Discount Code */}
                 <form onSubmit={handleApplyDiscount} className="flex gap-x-2">
                   <input
                     type="text"
@@ -309,7 +299,6 @@ const CartDrawer: React.FC = () => {
                   </p>
                 )}
 
-                {/* Estimated total */}
                 <div>
                   <div className="flex items-baseline justify-between">
                     <span className="text-base text-foreground">

components/shopify/collection-card.tsx

@@ -25,7 +25,6 @@ const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
       href={`/collections/${collection.handle}`}
       className="group block h-full"
     >
-      {/* Collection Image */}
       <div className="relative aspect-square overflow-hidden">
         {collection.image ? (
           <Image
@@ -42,7 +41,6 @@ const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
         )}
       </div>
 
-      {/* Collection Info */}
       <div className="flex flex-col flex-1 py-2.5">
         <h3 className="text-sm font-medium text-foreground line-clamp-1">
           {collection.title}

components/shopify/collection-detail.editor.tsx

@@ -8,11 +8,6 @@ export type CollectionDetailBlockProps = {
   title?: string;
 };
 
-/**
- * Used two ways: dropped on `/collections/[handle]` it follows the route, so
- * `collection` stays empty and the picker only drives the editor preview;
- * dropped on any other page it pins to whichever collection is picked.
- */
 const collectionDetailEditor: ComponentConfig<CollectionDetailBlockProps> = {
   label: 'Collection page',
   icon: <Boxes size={16} />,

components/shopify/collection-detail.tsx

@@ -33,12 +33,7 @@ const SORT_OPTIONS: SortOption[] = [
 ];
 
 interface CollectionDetailProps {
-  /**
-   * Pins the block to one collection. Left empty, it reads the `[handle]`
-   * segment instead, which is what the `/collections/[handle]` template does.
-   */
   handle?: string;
-  /** Overrides the collection's own title. Empty falls back to Shopify's. */
   title?: string;
 }
 
@@ -65,15 +60,12 @@ const CollectionDetail: React.FC<CollectionDetailProps> = ({
   const sort = SORT_OPTIONS[sortIndex];
   const activeKey = useMemo(() => activeFilters.join('|'), [activeFilters]);
 
-  // Fall back to the handle until the collection's real title arrives.
   const formattedTitle = handle
     ? handle.replace(/-/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())
     : 'Collection';
 
   useEffect(() => {
-    // Reached when the editor was opened on the literal `[handle]` pattern
+    // The literal editor route pattern has no collection to load.
-    // rather than a real collection URL. Drop the skeleton and say so rather
-    // than spinning forever.
     if (!handle || handle === '[handle]') {
       setLoading(false);
       setError(
@@ -106,8 +98,7 @@ const CollectionDetail: React.FC<CollectionDetailProps> = ({
         setProducts(page.products);
         setCursor(page.endCursor);
         setHasNextPage(page.hasNextPage);
-        // Keep the facet list stable while a selection is active, so options
+        // Do not remove active facet choices as result counts change.
-        // don't disappear out from under the panel.
         if (activeFilters.length === 0) setFilters(page.filters);
       } catch (err) {
         if (cancelled) return;

components/shopify/content-section.tsx

@@ -6,21 +6,11 @@ import Image from 'next/image';
 export interface ContentSectionProps {
   eyebrow?: React.ReactNode;
   heading?: React.ReactNode;
-  /**
-   * Plain text when it comes from a `page.json`; while the field is being
-   * edited inline the editor hands over a ReactNode instead, so this must not
-   * assume a string.
-   */
   body?: React.ReactNode;
   imageUrl?: string;
   imageAlt?: string;
 }
 
-/**
- * Generic prose section for the non-commerce routes (about, landing copy).
- * Typography matches the storefront's other sections — the editor supplies the
- * words and the image, never the layout.
- */
 const ContentSection: React.FC<ContentSectionProps> = ({
   eyebrow,
   heading,
@@ -48,8 +38,6 @@ const ContentSection: React.FC<ContentSectionProps> = ({
             <div className="relative mt-10 aspect-[3/2] overflow-hidden">
               <Image
                 src={imageUrl}
-                // `heading` is a node while it's edited inline, and alt text
-                // has to be a string — fall back to empty rather than stringify.
                 alt={imageAlt || (typeof heading === 'string' ? heading : '')}
                 fill
                 sizes="(min-width: 768px) 42rem, 100vw"
@@ -61,14 +49,11 @@ const ContentSection: React.FC<ContentSectionProps> = ({
           {body && (
             <div className="mt-8 flex flex-col gap-4 text-[15px] leading-7 text-foreground">
               {typeof body === 'string'
-                ? // Authored as plain paragraphs; blank lines separate them.
+                ? body
-                  body
                     .split(/\n{2,}/)
                     .filter((paragraph) => paragraph.trim())
                     .map((paragraph, index) => <p key={index}>{paragraph}</p>)
-                : // Mid-edit: render the editor's node as-is so inline editing
+                : body}
-                  // keeps working. Paragraph splitting resumes once saved.
-                  body}
             </div>
           )}
         </div>

components/shopify/footer.tsx

@@ -45,9 +45,6 @@ const Footer: React.FC<FooterProps> = ({
   return (
     <footer className="bg-background">
       <div className="max-w-screen-2xl mx-auto px-8 py-10">
-        {/* Left-aligned: the bottom-right corner belongs to the floating
-            assistant launcher. Links and socials sit on separate rows so the
-            icons aren't crammed onto the end of the link list. */}
         <div className="flex flex-col items-center gap-y-5 sm:items-start">
           <Logo
             src={logoUrl}

components/shopify/header.editor.tsx

@@ -11,16 +11,10 @@ export type HeaderBlockProps = {
   links?: Array<{ label: string; url: string }>;
 };
 
-/**
- * Content only: the store name, the logo, the announcement copy and the nav
- * labels. Stickiness, backdrop blur, spacing and the cart/search/account
- * affordances are the component's business, not the editor's.
- */
 const headerEditor: ComponentConfig<HeaderBlockProps> = {
   label: 'Header',
   icon: <Menu size={16} />,
   category: 'navigation',
-  // Shared across pages: edit it once and every page.json picks it up.
   global: true,
   defaultProps: {
     storeName: 'Shop',
@@ -47,9 +41,7 @@ const headerEditor: ComponentConfig<HeaderBlockProps> = {
     announcement: {
       label: 'Announcement',
       type: 'text',
-      // Deliberately not `contentEditable`: an inline-edited field arrives as a
+      // Keep this a string so blank copy can hide the announcement.
-      // ReactNode, which stays truthy once emptied, so the bar would linger as
-      // an empty band. Keeping it a plain string makes "blank hides it" work.
       placeholder: 'Leave empty to hide the bar',
     },
     announcementUrl: { label: 'Announcement link', type: 'text' },
@@ -76,9 +68,6 @@ const headerEditor: ComponentConfig<HeaderBlockProps> = {
       storeName={storeName}
       logoUrl={logoUrl}
       links={links}
-      // Header decides visibility: blank copy hides the bar, and the toggle
-      // hides it regardless — needed because an inline-edited field is a node,
-      // which can't be inspected for emptiness.
       showAnnouncement={showAnnouncement}
       announcement={announcement}
       announcementUrl={announcementUrl}

components/shopify/header.tsx

@@ -43,10 +43,8 @@ interface HeaderProps {
   storeName?: string;
   logoUrl?: string;
   links?: NavLink[];
-  /** Thin bar above the nav. Blank copy hides it. */
   announcement?: React.ReactNode;
   announcementUrl?: string;
-  /** Hides the bar outright, whatever the copy says. */
   showAnnouncement?: 'yes' | 'no';
 }
 
@@ -63,9 +61,7 @@ const Header: React.FC<HeaderProps> = ({
 }) => {
   const [menuOpen, setMenuOpen] = useState(false);
 
-  // Whitespace-only copy counts as empty. While the field is edited inline the
+  // Inline editing supplies a node, so only string values can be blank-checked.
-  // editor supplies a node rather than a string — it can't be inspected for
-  // emptiness, which is what the explicit toggle is for.
   const hasAnnouncementText =
     typeof announcement === 'string'
       ? announcement.trim() !== ''
@@ -75,7 +71,6 @@ const Header: React.FC<HeaderProps> = ({
 
   return (
     <>
-      {/* Sits above the sticky nav, so it scrolls away on its own. */}
       {showAnnouncementBar && (
         <div className="bg-muted text-foreground">
           <div className="max-w-screen-2xl mx-auto flex h-9 items-center justify-center px-8 text-center text-xs">
@@ -96,10 +91,8 @@ const Header: React.FC<HeaderProps> = ({
       <nav className="bg-background/95 backdrop-blur-md sticky top-0 z-50">
       <div className="max-w-screen-2xl mx-auto px-8">
         <div className="flex justify-between items-center h-14">
-          {/* Logo */}
           <Logo src={logoUrl} storeName={storeName} />
 
-          {/* Desktop Navigation */}
           <div className="hidden md:flex items-center gap-x-8 text-sm">
             <ShopMenu />
             {links.map((link, index) => (
@@ -113,12 +106,10 @@ const Header: React.FC<HeaderProps> = ({
             ))}
           </div>
 
-          {/* Actions */}
           <div className="flex items-center">
             <SearchDialog />
             <CartIcon />
 
-            {/* Mobile hamburger */}
             <Button
               onClick={() => setMenuOpen(!menuOpen)}
               variant="ghost"
@@ -136,7 +127,6 @@ const Header: React.FC<HeaderProps> = ({
         </div>
       </div>
 
-      {/* Mobile Menu */}
       {menuOpen && (
         <div className="md:hidden bg-background">
           <div className="max-w-screen-2xl mx-auto px-8 pb-6 flex flex-col gap-y-4 text-sm">

components/shopify/policy-body.editor.tsx

@@ -18,7 +18,6 @@ const policyBodyEditor: ComponentConfig<PolicyBodyProps> = {
     handle: {
       label: 'Policy',
       type: 'select',
-      // Empty follows the `[handle]` route segment on /policies/[handle].
       options: [
         { label: 'Follow the page URL', value: '' },
         ...POLICY_HANDLES.map((handle) => ({

components/shopify/policy-body.tsx

@@ -5,20 +5,11 @@ import { useParams } from 'next/navigation';
 import { getShopPolicy, type ShopPolicy } from '@/hooks/use-shopify-policies';
 
 export interface PolicyBodyProps {
-  /**
-   * Pins the block to one policy. Left empty, it reads the `[handle]` segment,
-   * which is what the `/policies/[handle]` template does.
-   */
   handle?: string;
-  /** Overrides the policy's own title. Empty falls back to Shopify's. */
   title?: string;
   notFoundMessage?: string;
 }
 
-/**
- * Policy copy is authored in the Shopify admin, not here — the editor only
- * chooses which policy to show and can override the heading.
- */
 const PolicyBody: React.FC<PolicyBodyProps> = ({
   handle: handleProp,
   title: titleProp,

components/shopify/product-card.tsx

@@ -66,7 +66,6 @@ const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
       href={`/products/${product.handle}`}
       className="group block h-full"
     >
-      {/* Product Image */}
       <div className="relative aspect-square overflow-hidden">
         {firstImage ? (
           <Image
@@ -95,7 +94,6 @@ const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
         )}
       </div>
 
-      {/* Product Info */}
       <div className="flex flex-col flex-1 py-2.5">
         <h3 className="text-sm font-medium text-foreground line-clamp-1">
           {truncate(product.title, 65)}

components/shopify/product-detail.editor.tsx

@@ -8,11 +8,6 @@ export type ProductDetailBlockProps = {
   addToCartLabel?: string;
 };
 
-/**
- * On `/products/[handle]` leave `product` empty so the block follows the route;
- * the picker then only chooses what the editor previews. Pinning a product
- * turns it into a featured-product block usable on any page.
- */
 const productDetailEditor: ComponentConfig<ProductDetailBlockProps> = {
   label: 'Product page',
   icon: <Tag size={16} />,

components/shopify/product-detail/index.tsx

@@ -60,7 +60,6 @@ const ProductDetail: React.FC<ProductDetailProps> = ({
   const [addingToCart, setAddingToCart] = useState(false);
   const [buyingNow, setBuyingNow] = useState(false);
 
-  // Initialize variant when product loads
   useEffect(() => {
     if (product) {
       const firstVariant = product.variants.edges[0]?.node;
@@ -78,9 +77,7 @@ const ProductDetail: React.FC<ProductDetailProps> = ({
     }
   }, [product]);
 
-  // A value is available if some in-stock variant carries it alongside the
+  // Unselected options act as wildcards when checking variant availability.
-  // other currently-selected options. Options the shopper hasn't chosen yet
-  // act as wildcards, so nothing is struck through before a full selection.
   const isOptionValueAvailable = (optionName: string, value: string) => {
     const variants = product?.variants.edges ?? [];
     if (variants.length === 0) return true;
@@ -100,7 +97,6 @@ const ProductDetail: React.FC<ProductDetailProps> = ({
     const newOptions = { ...selectedOptions, [optionName]: value };
     setSelectedOptions(newOptions);
 
-    // Find matching variant
     const matchingVariant = product?.variants.edges.find(({ node }) => {
       return node.selectedOptions.every(
         (option) => newOptions[option.name] === option.value
@@ -126,8 +122,6 @@ const ProductDetail: React.FC<ProductDetailProps> = ({
     }
   };
 
-  // Adds the item, then sends the shopper straight to the Shopify checkout
-  // (where Shop Pay is offered) rather than opening the cart drawer.
   const handleBuyNow = async () => {
     if (!selectedVariant || !product) return;
 
@@ -152,7 +146,6 @@ const ProductDetail: React.FC<ProductDetailProps> = ({
     return (
       <div className="max-w-screen-2xl mx-auto px-8 py-8">
         <div className="grid grid-cols-1 lg:grid-cols-5 gap-8 lg:gap-10">
-          {/* Image Gallery Skeleton */}
           <div className="lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 gap-3">
             {Array.from({ length: 4 }).map((_, i) => (
               <div
@@ -162,7 +155,6 @@ const ProductDetail: React.FC<ProductDetailProps> = ({
             ))}
           </div>
 
-          {/* Product Info Skeleton */}
           <div className="lg:col-span-2 animate-pulse">
             <div className="h-8 bg-zinc-100 w-2/3"></div>
             <div className="h-5 bg-zinc-100 w-24 mt-2"></div>

components/shopify/product-detail/product-detail-gallery.tsx

@@ -26,8 +26,6 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
 
   const close = useCallback(() => setZoomedIndex(null), []);
 
-  // The slide whose left edge sits closest to the scroller's left edge is the
-  // one in view. Measuring rects keeps this correct whatever the gap or width.
   const handleScroll = useCallback(() => {
     const scroller = scrollerRef.current;
     if (!scroller) return;
@@ -47,8 +45,7 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
     setActiveIndex(nearest);
   }, []);
 
-  // Touch already scrolls natively; this adds click-and-drag for pointers that
+  // Add pointer dragging without disrupting native touch scrolling.
-  // don't (mouse at mobile widths), suspending snap so the drag stays smooth.
   const drag = useRef<{ startX: number; startScroll: number } | null>(null);
 
   const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
@@ -74,7 +71,6 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
     if (!drag.current || !scroller) return;
 
     drag.current = null;
-    // Restoring snap lets the browser settle on the nearest slide.
     scroller.style.scrollSnapType = '';
   };
 
@@ -88,7 +84,6 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
     scroller.scrollTo({ left: scroller.scrollLeft + offset, behavior: 'smooth' });
   };
 
-  // Close on Escape, and keep the page behind the overlay from scrolling.
   useEffect(() => {
     if (!isZoomed) return;
 
@@ -119,7 +114,6 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
 
   return (
     <>
-      {/* Swipeable carousel on mobile, grid from sm up */}
       <div
         ref={scrollerRef}
         onScroll={handleScroll}
@@ -152,7 +146,6 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
         ))}
       </div>
 
-      {/* Carousel pagination — the grid needs no dots, so mobile only */}
       {!isSingle && (
         <div className="flex justify-center gap-2 pt-4 sm:hidden">
           {images.map((_, index) => (
@@ -182,15 +175,10 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
           <Image
             src={zoomedImage.url}
             alt={zoomedImage.altText || 'Product image'}
-            // Shopify gives us the intrinsic size; the square fallback only
-            // reserves space until CSS scales it down to fit the overlay.
             width={zoomedImage.width || 1600}
             height={zoomedImage.height || 1600}
             sizes="100vw"
             onClick={(event) => event.stopPropagation()}
-            // w/h-auto keeps the box at the image's own ratio; without it the
-            // width+height attributes make both axes definite and the element
-            // stretches to the overlay, swallowing backdrop clicks that close it.
             className="max-h-full max-w-full w-auto h-auto object-contain"
           />
 

components/shopify/product-detail/product-detail-info.tsx

@@ -5,7 +5,7 @@ import { RiSubtractLine, RiAddLine } from '@remixicon/react';
 import ShopPayButton from '@/components/shopify/shop-pay-button';
 import type { ProductOption, ProductOptionValue } from '@/hooks/use-shopify-products';
 import { isSwatchOptionName, swatchColorForName } from '@/config/swatches';
-import { isDefaultTitleOption } from '@/services/shopify/catalog';
+import { isDefaultTitleOption } from '@/services/shopify/shop';
 
 interface ProductPrice {
   amount: string;
@@ -52,15 +52,12 @@ interface ProductDetailInfoProps {
   handleAddToCart: () => void;
   handleBuyNow?: () => void;
   onOptionChange: (optionName: string, value: string) => void;
-  /** Whether an option value still has an in-stock variant behind it. */
   isOptionValueAvailable?: (optionName: string, value: string) => boolean;
   loading?: boolean;
   buyingNow?: boolean;
   addToCartLabel?: string;
 }
 
-// A swatch comes from the option value's own swatch (colour or image) or the
-// colour its name implies (see config/swatches) — never a variant photo.
 const swatchStyle = (
   value: ProductOptionValue
 ): { background?: string; image?: string } => {
@@ -103,13 +100,11 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
   const isSwatchOption = (option: ProductOption) =>
     isSwatchOptionName(option.name);
 
-  // Some products return Size before Color; show the swatches first either way.
+  // Show swatches first and omit Shopify's synthetic single-SKU option.
-  // Single-SKU products expose a synthetic `Title: Default Title` option — drop it.
   const orderedOptions = [...(product.options ?? [])]
     .filter((option) => !isDefaultTitleOption(option))
     .sort((a, b) => Number(isSwatchOption(b)) - Number(isSwatchOption(a)));
 
-  // `optionValues` carries the swatch data; fall back to plain `values`.
   const optionValuesFor = (option: ProductOption): ProductOptionValue[] =>
     option.optionValues?.length
       ? option.optionValues
@@ -131,7 +126,6 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
         )}
       </div>
 
-      {/* Product Options — colour swatches lead, whatever order the API returns */}
       {orderedOptions.map((option) => {
         const isSwatch = isSwatchOption(option);
         const selected = selectedOptions[option.name];
@@ -172,12 +166,6 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
                           : 'ring-1 ring-border hover:ring-foreground/40'
                       } ${isSoldOut ? 'option-unavailable text-foreground/60 opacity-60' : ''}`}
                       style={{
-                        // With no colour and no image the circle would be fully
-                        // transparent, leaving just a hairline ring that
-                        // antialiases unevenly and reads as a speckled border.
-                        // A neutral fill makes the initial-letter fallback look
-                        // deliberate. Set inline so it beats the ghost variant's
-                        // hover background.
                         backgroundColor:
                           background ??
                           (image ? undefined : 'var(--color-muted)'),
@@ -215,7 +203,6 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
         );
       })}
 
-      {/* Quantity + Add to Cart */}
       <div className="mt-8 flex items-stretch gap-3">
         <div className="flex items-center rounded-md border border-border h-11">
           <Button
@@ -252,7 +239,6 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
         </Button>
       </div>
 
-      {/* Cart permalink into Shop Pay; falls back to the cart checkout URL. */}
       <ShopPayButton
         className="mt-3"
         variants={
@@ -263,7 +249,6 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
         onFallbackClick={handleBuyNow}
       />
 
-      {/* Description */}
       {(product.descriptionHtml || product.description) && (
         <div className="mt-10 text-sm leading-6 text-foreground product-description">
           {product.descriptionHtml ? (

components/shopify/product-filters.tsx

@@ -12,13 +12,10 @@ import {
 import { Button } from '@/components/ui/button';
 import { RiCloseLine, RiCheckLine } from '@remixicon/react';
 import { swatchColorForName } from '@/config/swatches';
-// Shape of a Storefront facet — identical for `search.productFilters` and
-// `collection.products.filters`, so both pages share this panel.
 export interface ProductFilterValue {
   id: string;
   label: string;
   count: number;
-  /** JSON string accepted back as a `ProductFilter` input. */
   input: string;
 }
 
@@ -37,7 +34,6 @@ interface ProductFiltersProps {
   onActiveFiltersChange: (filters: string[]) => void;
 }
 
-// Colour facets render as swatches; everything else as a labelled list.
 const isColorFilter = (filter: ProductFilterFacet) =>
   /colou?r/i.test(filter.label) || filter.id.toLowerCase().includes('color');
 
@@ -55,7 +51,6 @@ const ProductFilters: React.FC<ProductFiltersProps> = ({
   const priceFilter = filters.find((filter) => filter.type === 'PRICE_RANGE');
 
   const activeSet = new Set(activeFilters);
-  // Price is rebuilt from the inputs rather than toggled, so track it apart.
   const activePriceInput = activeFilters.find((input) =>
     input.includes('"price"')
   );
@@ -93,7 +88,6 @@ const ProductFilters: React.FC<ProductFiltersProps> = ({
     onActiveFiltersChange([]);
   };
 
-  // Labels for the chips at the top of the panel.
   const activeChips = filters
     .flatMap((filter) => filter.values)
     .filter((value) => activeSet.has(value.input));
@@ -118,7 +112,6 @@ const ProductFilters: React.FC<ProductFiltersProps> = ({
             </SheetHeader>
 
             <SheetBody className="px-5">
-              {/* Active selections */}
               {(activeChips.length > 0 || activePriceInput) && (
                 <div className="mb-6 flex flex-wrap items-center gap-2">
                   {activeChips.map((value) => (
@@ -147,7 +140,6 @@ const ProductFilters: React.FC<ProductFiltersProps> = ({
                 </p>
               )}
 
-              {/* Price */}
               {priceFilter && (
                 <div className="mb-8">
                   <h3 className="mb-3 text-base text-foreground">Price</h3>
@@ -183,7 +175,6 @@ const ProductFilters: React.FC<ProductFiltersProps> = ({
                 </div>
               )}
 
-              {/* Facets */}
               {listFilters.map((filter) => (
                 <div key={filter.id} className="mb-8">
                   <h3 className="mb-3 text-base text-foreground">
@@ -209,9 +200,6 @@ const ProductFilters: React.FC<ProductFiltersProps> = ({
                                 : 'ring-1 ring-border hover:ring-foreground/40'
                             }`}
                             style={{
-                              // A colourless swatch would otherwise be a fully
-                              // transparent circle behind a hairline ring,
-                              // which antialiases into a speckled border.
                               backgroundColor: color ?? 'var(--color-muted)',
                             }}
                           >

components/shopify/product-recommendations.editor.tsx

@@ -23,7 +23,6 @@ const productRecommendationsEditor: ComponentConfig<ProductRecommendationsBlockP
       title: { label: 'Title', type: 'text', contentEditable: true },
       product: {
         label: 'Seed product',
-        // Empty follows the `[handle]` route segment; Shopify picks the rest.
         type: 'shopifyProduct',
       } as any,
       limit: { label: 'Products shown', type: 'number', min: 2, max: 12 },

components/shopify/product-recommendations.tsx

@@ -10,10 +10,6 @@ import ProductCard from './product-card';
 
 interface ProductRecommendationsProps {
   productId?: string;
-  /**
-   * Seeds recommendations from a specific product. Left empty, it reads the
-   * `[handle]` segment, which is what the `/products/[handle]` template does.
-   */
   handle?: string;
   title?: string;
   limit?: number;

components/shopify/product-toolbar.tsx

@@ -21,8 +21,6 @@ interface ProductToolbarProps {
   activeFilterCount?: number;
 }
 
-// Filters trigger on the left, item count and sort menu on the right — shared
-// by the search results and collection pages.
 const ProductToolbar: React.FC<ProductToolbarProps> = ({
   totalCount,
   onOpenFilters,
@@ -69,7 +67,6 @@ const ProductToolbar: React.FC<ProductToolbarProps> = ({
 
           {sortOpen && (
             <>
-              {/* Click-away layer sits under the menu, above the page. */}
               <div
                 className="fixed inset-0 z-40"
                 onClick={() => setSortOpen(false)}

components/shopify/products.editor.tsx

@@ -10,10 +10,6 @@ export type ProductsBlockProps = {
   limit?: number;
 };
 
-/**
- * Column counts, gutters and the card design are fixed in `products.tsx`. The
- * editor picks *which* products appear and what the section says about them.
- */
 const productsEditor: ComponentConfig<ProductsBlockProps> = {
   label: 'Product grid',
   icon: <LayoutGrid size={16} />,
@@ -30,8 +26,6 @@ const productsEditor: ComponentConfig<ProductsBlockProps> = {
     subtitle: { label: 'Subtitle', type: 'textarea', contentEditable: true },
     collection: {
       label: 'Collection',
-      // Registered by createShopifyPlugin — a live search against the store.
-      // Leave empty to show the newest products across the whole catalogue.
       type: 'shopifyCollection',
     } as any,
     limit: { label: 'Products shown', type: 'number', min: 2, max: 48 },

components/shopify/products.tsx

@@ -52,10 +52,6 @@ interface ProductsProps {
   subtitle?: string;
   limit?: number;
   showLoadMore?: boolean;
-  /**
-   * Narrows the grid to one collection. Empty shows the newest products across
-   * the whole catalogue, which is what the home page does.
-   */
   collectionHandle?: string;
 }
 
@@ -73,8 +69,6 @@ const Products: React.FC<ProductsProps> = ({
   const [hasMoreProducts, setHasMoreProducts] = useState(true);
   const [cursor, setCursor] = useState<string | null>(null);
 
-  // Paging is cursor-based: without `after`, Shopify returns the same first
-  // page every time and "load more" appends nothing.
   const fetchProducts = async (loadMore = false) => {
     try {
       if (loadMore) {
@@ -84,8 +78,6 @@ const Products: React.FC<ProductsProps> = ({
         setError(null);
       }
 
-      // A pinned collection uses the collection query so its own ordering
-      // applies; otherwise fall back to newest-first across the catalogue.
       const page = collectionHandle
         ? await getCollectionProductsPage(collectionHandle, {
             first: limit,

components/shopify/search-results.editor.tsx

@@ -6,10 +6,6 @@ export type SearchResultsBlockProps = {
   title?: string;
 };
 
-/**
- * The result set comes from the `?q=` param and the shopper's own filter and
- * sort choices, so the heading is the only thing left for the editor to own.
- */
 const searchResultsEditor: ComponentConfig<SearchResultsBlockProps> = {
   label: 'Search results',
   icon: <Search size={16} />,

components/shopify/search-results.tsx

@@ -50,7 +50,7 @@ const SearchResults: React.FC<SearchResultsProps> = ({ title = 'Search' }) => {
   const [activeFilters, setActiveFilters] = useState<string[]>([]);
 
   const sort = SORT_OPTIONS[sortIndex];
-  // Serialised so the effect re-runs when the selection changes, not the array.
+  // Stabilize the effect dependency by filter contents.
   const activeKey = useMemo(() => activeFilters.join('|'), [activeFilters]);
 
   useEffect(() => {
@@ -62,8 +62,6 @@ const SearchResults: React.FC<SearchResultsProps> = ({ title = 'Search' }) => {
         setError(null);
 
         const result = await searchProducts({
-          // An empty term still returns the catalogue, which is what an
-          // unqualified /search visit should show.
           query,
           first: PAGE_SIZE,
           sortKey: sort.sortKey,
@@ -77,8 +75,7 @@ const SearchResults: React.FC<SearchResultsProps> = ({ title = 'Search' }) => {
         setTotalCount(result.totalCount);
         setCursor(result.endCursor);
         setHasNextPage(result.hasNextPage);
-        // Facet counts change with the result set, but keep the panel stable
+        // Do not remove active facet choices as result counts change.
-        // while filters are applied so options don't vanish mid-selection.
         if (activeFilters.length === 0) setFilters(result.filters);
       } catch (err) {
         if (cancelled) return;
@@ -140,7 +137,6 @@ const SearchResults: React.FC<SearchResultsProps> = ({ title = 'Search' }) => {
           />
         </div>
 
-        {/* Results */}
         <div className="mt-8">
           {loading ? (
             <div className="grid grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-x-8 gap-y-12">

components/shopify/shop-menu.tsx

@@ -8,9 +8,7 @@ import { cn } from '@/lib/utils';
 
 interface ShopMenuProps {
   label?: string;
-  /** Renders inline inside the mobile menu instead of as a floating panel. */
   mobile?: boolean;
-  /** Fires after a collection is picked, so the mobile menu can close itself. */
   onNavigate?: () => void;
 }
 
@@ -22,7 +20,6 @@ const ShopMenu: React.FC<ShopMenuProps> = ({
   const [open, setOpen] = useState(false);
   const { collections, loading, error, load } = useCollectionsOnDemand();
 
-  // The collection list is only worth fetching once someone opens the menu.
   const toggle = () => {
     const next = !open;
     setOpen(next);
@@ -138,7 +135,6 @@ const ShopMenu: React.FC<ShopMenuProps> = ({
 
       {open && (
         <>
-          {/* Catches the click that dismisses the panel. */}
           <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
           <div className="absolute left-0 top-full z-50 mt-2 max-h-[70vh] w-64 overflow-y-auto rounded-md border border-border bg-background py-1 shadow-md">
             {body}

components/shopify/shop-pay-button.tsx

@@ -16,11 +16,10 @@ interface ShopPayButtonProps {
   disabled?: boolean;
   loading?: boolean;
   className?: string;
-  /** Used when no permalink can be built (missing domain or unusable IDs). */
   onFallbackClick?: () => void;
 }
 
-// Cart permalinks need the bare numeric ID; the Storefront API returns GIDs.
+// Cart permalinks require numeric IDs rather than Storefront GIDs.
 function toNumericVariantId(id: string): string | null {
   const trimmed = id.trim();
   const gid = trimmed.match(/^gid:\/\/shopify\/ProductVariant\/(\d+)/);
@@ -38,8 +37,6 @@ function toStoreUrl(domain?: string): string | null {
   }
 }
 
-// https://{shop}/cart/{variantId}:{qty},{variantId}:{qty}?payment=shop_pay
-// Loads the cart and drops the buyer straight into the Shop Pay checkout.
 export function buildShopPayUrl(variants: ShopPayVariant[]): string | null {
   const storeUrl = toStoreUrl(SHOPIFY_STORE_DOMAIN);
   if (!storeUrl || variants.length === 0) return null;
@@ -72,8 +69,6 @@ const ShopPayButton: React.FC<ShopPayButtonProps> = ({
     </>
   );
 
-  // An anchor keeps the checkout URL visible, openable in a new tab, and
-  // navigable without JS; the button only stands in when there's no URL.
   if (shopPayUrl && !disabled) {
     return (
       <a

components/shopify/shop-pay-logo.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-// "Buy with shop" lockup — the wordmark and the Shop mark are both in the path
-// data, so the button needs no additional text beyond a screen-reader label.
 const ShopPayLogo: React.FC<{ className?: string }> = ({
   className = 'h-auto w-[98px]',
 }) => (

components/shopify/store-assistant.editor.tsx

@@ -4,11 +4,6 @@ import StoreAssistant from '@/components/shopify/store-assistant';
 
 export type StoreAssistantBlockProps = Record<string, never>;
 
-/**
- * The floating AI shopping assistant. It has no editable copy — its prompts and
- * suggestions come from `/api/chat` — so it is registered purely so a page can
- * choose whether to carry it.
- */
 const storeAssistantEditor: ComponentConfig<StoreAssistantBlockProps> = {
   label: 'Store assistant',
   icon: <MessageCircle size={16} />,

components/shopify/store-assistant.tsx

@@ -64,8 +64,6 @@ import {
   RiShoppingBag3Line,
 } from '@remixicon/react';
 
-// Feature flag. Written as a static member expression so Next inlines it at
-// build time; the assistant is off unless the env var is explicitly "1".
 const AI_ENABLED = process.env.NEXT_PUBLIC_ENABLE_AI === '1';
 
 const SUGGESTIONS = [
@@ -101,8 +99,6 @@ const toolName = (type: string) =>
 const plural = (count: number, noun: string) =>
   `${count} ${noun}${count === 1 ? '' : 's'}`;
 
-// Turns a finished tool result into the one-line summary plus any products
-// worth previewing.
 const summariseTool = (
   name: string,
   output: Record<string, unknown> | undefined
@@ -166,7 +162,6 @@ const summariseTool = (
   }
 };
 
-// Storefront links stay in-app, so they skip Streamdown's external-link modal.
 const isInternalLink = (url: string) => {
   if (url.startsWith('/')) return true;
   try {
@@ -229,7 +224,6 @@ const AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {
     <AttachmentHoverCard key={attachment.id}>
       <AttachmentHoverCardTrigger asChild>
         <Attachment data={attachment} onRemove={handleRemove}>
-          {/* Thumbnail swaps to the remove button on hover. */}
           <div className="group relative size-5 shrink-0">
             <div className="absolute inset-0 transition-opacity group-hover:opacity-0">
               <AttachmentPreview />
@@ -270,7 +264,6 @@ const AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {
 
 AttachmentItem.displayName = 'AttachmentItem';
 
-// Pending uploads, shown inline above the textarea.
 const PromptInputAttachmentsDisplay = () => {
   const attachments = usePromptInputAttachments();
 
@@ -295,15 +288,12 @@ const PromptInputAttachmentsDisplay = () => {
 };
 
 const StoreAssistant: React.FC = () => {
-  // Returns before any hooks run — safe because the flag is a build-time
-  // constant and cannot change between renders.
   if (!AI_ENABLED) return null;
 
   const [open, setOpen] = useState(false);
   const [mounted, setMounted] = useState(false);
   const [input, setInput] = useState('');
 
-  // Drives the launcher's slide-in on first paint.
   useEffect(() => setMounted(true), []);
 
   const { messages, sendMessage, status, error } = useChat({
@@ -323,7 +313,6 @@ const StoreAssistant: React.FC = () => {
     setInput('');
   };
 
-  // Attachments arrive on the submitted message, so images go out with it.
   const handleSubmit = (message: PromptInputMessage) => {
     const text = (message.text ?? input).trim();
     const files = message.files ?? [];
@@ -335,7 +324,6 @@ const StoreAssistant: React.FC = () => {
 
   return (
     <>
-      {/* Popover panel, anchored above the launcher */}
       <div
         aria-hidden={!open}
         className={`fixed bottom-20 right-4 z-50 flex w-[calc(100vw-2rem)] max-w-sm flex-col overflow-hidden rounded-xl border border-border bg-background shadow-xl transition-all duration-200 sm:right-6 ${
@@ -365,8 +353,6 @@ const StoreAssistant: React.FC = () => {
                 title="Ask about the store"
                 description="Find products, compare options, browse collections."
               >
-                {/* w-full + wrap so chips stack in the narrow popover rather
-                    than scrolling off the edge. */}
                 <Suggestions className="mt-3 w-full flex-wrap justify-center">
                   {SUGGESTIONS.map((suggestion) => (
                     <Suggestion
@@ -393,8 +379,6 @@ const StoreAssistant: React.FC = () => {
                       return (
                         <MessageResponse
                           key={index}
-                          // Only repair half-written markdown while it streams;
-                          // settled text is rendered exactly as sent.
                           isAnimating={
                             status === 'streaming' && part.state === 'streaming'
                           }
@@ -432,8 +416,6 @@ const StoreAssistant: React.FC = () => {
                       };
                       const name = toolName(part.type);
 
-                      // Shimmer while the call is in flight; a quiet summary
-                      // line once it returns.
                       if (
                         toolPart.state === 'input-streaming' ||
                         toolPart.state === 'input-available'
@@ -472,7 +454,6 @@ const StoreAssistant: React.FC = () => {
                     return null;
                   })}
 
-                  {/* Images the shopper attached, shown under their message. */}
                   {fileParts.length > 0 && (
                     <Attachments variant="grid" className="ml-0 justify-start">
                       {fileParts.map((part, index) => (
@@ -544,9 +525,6 @@ const StoreAssistant: React.FC = () => {
         </div>
       </div>
 
-      {/* Launcher */}
-      {/* Rainbow treatment only while the assistant is open; otherwise the
-          launcher matches the rest of the site's buttons. */}
       {open ? (
         <RainbowButton
           onClick={() => setOpen(false)}

components/ui/command.tsx

@@ -36,8 +36,6 @@ function CommandDialog({
   children,
   className,
   showCloseButton = true,
-  // Forwarded to the inner Command so callers can drive filtering themselves
-  // (e.g. results already filtered server-side).
   shouldFilter,
   ...props
 }: React.ComponentProps<typeof Dialog> & {
@@ -56,7 +54,6 @@ function CommandDialog({
       <DialogContent
         className={cn(
           "overflow-hidden p-0",
-          // No fade/zoom on the command palette — it should appear instantly.
           "transition-none animate-none duration-0",
           "data-[state=closed]:animate-none data-[state=open]:animate-none",
           className

components/ui/input-group.tsx

@@ -17,16 +17,13 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
         "group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30",
         "h-9 min-w-0 has-[>textarea]:h-auto",
 
-        // Variants based on alignment.
         "has-[>[data-align=inline-start]]:[&>input]:pl-2",
         "has-[>[data-align=inline-end]]:[&>input]:pr-2",
         "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
         "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
 
-        // Focus state.
         "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
 
-        // Error state.
         "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
 
         className

components/ui/item.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 
-// Utility function to combine classNames
 function cn(...classes: (string | undefined | null | false)[]): string {
   return classes.filter(Boolean).join(' ');
 }
 
-// Item variants helper
 function getItemVariants(
   variant: 'default' | 'outline' | 'muted',
   size: 'default' | 'sm'
@@ -27,7 +25,6 @@ function getItemVariants(
   return cn(baseStyles, variantStyles[variant], sizeStyles[size]);
 }
 
-// Item media variants helper
 function getItemMediaVariants(variant: 'default' | 'icon' | 'image'): string {
   const baseStyles =
     'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5';

components/ui/progress.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-// Utility function to combine classNames
 function cn(...classes: (string | undefined | null | false)[]): string {
   return classes.filter(Boolean).join(' ');
 }

components/ui/remix-icon.tsx

@@ -16,12 +16,10 @@ const RemixIcon: React.FC<RemixIconProps> = ({
 }) => {
   if (!name) return null;
 
-  // Normalise: accept "RiTruckLine", "ri-truck-line", or "riTruckLine"
+  // Accept component, kebab-case, or camelCase icon names.
   const normalised = name
-    // ri-truck-line → RiTruckLine
     .replace(/^ri-/, 'Ri')
     .replace(/-([a-z])/g, (_, c) => c.toUpperCase())
-    // ensure first char is uppercase
     .replace(/^./, (c) => c.toUpperCase());
 
   const IconComponent = (

config/root.tsx

@@ -1,14 +1,5 @@
 import { RootConfig } from '@reacteditor/core';
 
-/**
- * Root props are the page's *content*, not its design. Colours, fonts, radius
- * and spacing all live in `app/globals.css` and in the components themselves —
- * the editor only owns the words and the imagery. See `editor.config.tsx` for
- * the same rule applied to every block.
- *
- * The field names below are the ones `pageMetadata()` reads, so editing a page
- * in the editor is what changes its `<head>` tags.
- */
 export type RootProps = {
   title?: string;
   description?: string;
@@ -16,10 +7,7 @@ export type RootProps = {
 };
 
 export const Root: RootConfig<{ props: RootProps }> = {
-  // Root props default to being shared across pages. These are per-page SEO
+  // SEO fields belong to each page rather than the global block store.
-  // tags — `pageMetadata()` reads them straight off each `page.json` — so
-  // opting out keeps every route's title and description its own. The header
-  // and footer blocks are the things that stay global.
   global: false,
   defaultProps: {
     title: 'Shop',
@@ -31,7 +19,6 @@ export const Root: RootConfig<{ props: RootProps }> = {
     description: { label: 'Meta description', type: 'textarea' },
     ogImage: { label: 'Social share image', type: 'image' },
   },
-  // No wrapper: the storefront's own layout and stylesheet own the chrome.
   render: ({ children }) => <>{children}</>,
 };
 

config/site.ts

@@ -1,17 +1,7 @@
-/**
- * Store-wide constants that aren't page content.
- *
- * Nav links, the logo and the footer used to live here; they're editor fields
- * on the header/footer blocks now, so a merchant changes them in the editor
- * rather than in code. What's left is the metadata fallback for routes that
- * haven't set their own.
- */
 export const site = {
   storeName: 'Shop',
   description:
     'An agent-friendly Shopify storefront built with Next.js and Hydrogen.',
-  // Absolute origin behind `metadataBase`, so Open Graph images resolve to full
-  // URLs. Vercel injects VERCEL_PROJECT_PRODUCTION_URL on deployed builds.
   url:
     process.env.NEXT_PUBLIC_SITE_URL ??
     (process.env.VERCEL_PROJECT_PRODUCTION_URL

config/swatches.ts

@@ -1,15 +1,5 @@
-// Swatch configuration for product option pickers.
-//
-// Shopify exposes a `swatch` on each option value, but plenty of products ship
-// without one configured. These settings decide which options render as colour
-// circles and what colour to use when the API doesn't supply one.
-
-// Option names (case-insensitive) rendered as colour circles instead of pills.
 export const SWATCH_OPTION_NAMES = ['color', 'colour'];
 
-// Fallback colours, keyed by lowercased option value name. The first group
-// mirrors hexes the store defines on other products, so a product missing its
-// swatches still matches the ones that have them. Add your own names here.
 export const SWATCH_COLORS: Record<string, string> = {
   clay: '#5a4b3c',
   green: '#81a69b',

editor.config.tsx

@@ -19,13 +19,6 @@ const categories = {
   content: { title: 'Content' },
 };
 
-/**
- * The block library. Every entry pairs a storefront component with a config
- * that exposes *content only* — copy, imagery, and which Shopify product or
- * collection to show. Design decisions (columns, spacing, tone, typography)
- * stay inside the components and `app/globals.css`, so editing a page can
- * never take the storefront off-brand.
- */
 export const appConfig: UserConfig = {
   root: Root,
   categories,

graphql/cart.ts

@@ -1,6 +1,5 @@
 import { gql } from '@shopify/hydrogen';
 
-// Cart Fragment for consistent cart data
 const CartFragment = gql(`
   fragment CartFragment on Cart {
     id
@@ -68,7 +67,6 @@ const CartFragment = gql(`
   }
 `);
 
-// Create a new cart
 export const CREATE_CART_MUTATION = gql(
   `
   mutation CreateCart($lines: [CartLineInput!], $country: CountryCode, $language: LanguageCode)
@@ -87,7 +85,6 @@ export const CREATE_CART_MUTATION = gql(
   [CartFragment]
 );
 
-// Add lines to cart
 export const ADD_CART_LINES_MUTATION = gql(
   `
   mutation AddCartLines($cartId: ID!, $lines: [CartLineInput!]!, $country: CountryCode, $language: LanguageCode)
@@ -106,7 +103,6 @@ export const ADD_CART_LINES_MUTATION = gql(
   [CartFragment]
 );
 
-// Update cart lines
 export const UPDATE_CART_LINES_MUTATION = gql(
   `
   mutation UpdateCartLines($cartId: ID!, $lines: [CartLineUpdateInput!]!, $country: CountryCode, $language: LanguageCode)
@@ -125,7 +121,6 @@ export const UPDATE_CART_LINES_MUTATION = gql(
   [CartFragment]
 );
 
-// Remove lines from cart
 export const REMOVE_CART_LINES_MUTATION = gql(
   `
   mutation RemoveCartLines($cartId: ID!, $lineIds: [ID!]!, $country: CountryCode, $language: LanguageCode)
@@ -144,7 +139,6 @@ export const REMOVE_CART_LINES_MUTATION = gql(
   [CartFragment]
 );
 
-// Apply (or clear) discount codes on the cart
 export const UPDATE_CART_DISCOUNT_CODES_MUTATION = gql(
   `
   mutation UpdateCartDiscountCodes($cartId: ID!, $discountCodes: [String!]!, $country: CountryCode, $language: LanguageCode)
@@ -163,7 +157,6 @@ export const UPDATE_CART_DISCOUNT_CODES_MUTATION = gql(
   [CartFragment]
 );
 
-// Get cart by ID
 export const GET_CART_QUERY = gql(
   `
   query GetCart($cartId: ID!, $country: CountryCode, $language: LanguageCode)

graphql/collections.ts

@@ -1,7 +1,6 @@
 import { gql } from '@shopify/hydrogen';
 import { ProductFragment } from '@/graphql/products';
 
-// Get all collections
 export const GET_COLLECTIONS_QUERY = gql(`
   query GetCollections($first: Int!, $country: CountryCode, $language: LanguageCode)
   @inContext(country: $country, language: $language) {
@@ -30,7 +29,6 @@ export const GET_COLLECTIONS_QUERY = gql(`
   }
 `);
 
-// Get products in a collection
 export const GET_COLLECTION_PRODUCTS_QUERY = gql(
   `
   query GetCollectionProducts(

graphql/policies.ts

@@ -1,7 +1,5 @@
 import { gql } from '@shopify/hydrogen';
 
-// Shop policies are exposed on the `shop` object of the Storefront API.
-// There is no lookup-by-handle field, so we fetch all of them and match.
 export const GET_SHOP_POLICIES_QUERY = gql(`
   query GetShopPolicies {
     shop {

graphql/products.ts

@@ -1,6 +1,5 @@
 import { gql } from '@shopify/hydrogen';
 
-// Product Fragment for consistent product data
 export const ProductFragment = gql(`
   fragment ProductFragment on Product {
     id
@@ -102,7 +101,6 @@ export const ProductFragment = gql(`
   }
 `);
 
-// Get multiple products
 export const GET_PRODUCTS_QUERY = gql(
   `
   query GetProducts($first: Int!, $after: String, $query: String, $sortKey: ProductSortKeys, $reverse: Boolean, $country: CountryCode, $language: LanguageCode)
@@ -123,7 +121,6 @@ export const GET_PRODUCTS_QUERY = gql(
   [ProductFragment]
 );
 
-// Get a single product by handle
 export const GET_PRODUCT_QUERY = gql(
   `
   query GetProduct($handle: String!, $country: CountryCode, $language: LanguageCode)
@@ -136,7 +133,6 @@ export const GET_PRODUCT_QUERY = gql(
   [ProductFragment]
 );
 
-// Get product recommendations
 export const QUERY_PRODUCT_RECOMMENDATIONS = gql(
   `
   query GetProductRecommendations($productId: ID!, $country: CountryCode, $language: LanguageCode)

graphql/search.ts

@@ -1,9 +1,6 @@
 import { gql } from '@shopify/hydrogen';
 import { ProductFragment } from '@/graphql/products';
 
-// Storefront search over products. `productFilters` accepts the raw `input`
-// values returned in `productFilters[].values[].input`, so facets round-trip
-// without the client needing to know each filter's shape.
 export const SEARCH_PRODUCTS_QUERY = gql(
   `
   query SearchProducts(
@@ -57,8 +54,6 @@ export const SEARCH_PRODUCTS_QUERY = gql(
   [ProductFragment]
 );
 
-// Lightweight variant for the autocomplete dropdown — just enough to render a
-// row, so the dialog stays responsive while typing.
 export const SEARCH_SUGGESTIONS_QUERY = gql(`
   query SearchSuggestions($query: String!, $first: Int!, $country: CountryCode, $language: LanguageCode)
   @inContext(country: $country, language: $language) {

hooks/use-shopify-cart.ts

@@ -12,8 +12,6 @@ import {
 } from '@/graphql/cart';
 import { useEffect } from 'react';
 
-// ─── Types ───────────────────────────────────────────────────────────
-
 export interface CartLineInput {
   merchandiseId: string;
   quantity: number;
@@ -91,13 +89,7 @@ export interface Cart {
   };
 }
 
-// ─── Shopify API functions ───────────────────────────────────────────
+/** Normalizes nullable Shopify cart mutation payloads. */
-
-/**
- * Every cart mutation returns the same `{ cart, userErrors }` payload, and both
- * the payload and the cart inside it are nullable — Shopify returns no cart when
- * the mutation could not be applied. Callers want a cart or an exception.
- */
 function unwrapCartPayload<T>(
   payload:
     | {
@@ -200,12 +192,9 @@ export function redirectToCheckout(checkoutUrl: string): void {
   }
 }
 
-// ─── Zustand Store ───────────────────────────────────────────────────
-
 const CART_ID_KEY = 'cartId';
 
 interface CartState {
-  // State
   isOpen: boolean;
   cartId: string | null;
   cart: Cart | null;
@@ -213,10 +202,6 @@ interface CartState {
   error: string | null;
   _initialized: boolean;
 
-  // Computed (derived in the hook)
-  // items, itemCount, totalAmount, checkoutUrl
-
-  // Actions
   openCart: () => void;
   closeCart: () => void;
   toggleCart: () => void;
@@ -229,7 +214,6 @@ interface CartState {
 }
 
 export const useCartStore = create<CartState>((set, get) => ({
-  // Initial state
   isOpen: false,
   cartId: null,
   cart: null,
@@ -237,12 +221,10 @@ export const useCartStore = create<CartState>((set, get) => ({
   error: null,
   _initialized: false,
 
-  // UI actions
   openCart: () => set({ isOpen: true }),
   closeCart: () => set({ isOpen: false }),
   toggleCart: () => set((s) => ({ isOpen: !s.isOpen })),
 
-  // Initialize cart from localStorage
   initCart: () => {
     if (get()._initialized) return;
     set({ _initialized: true });
@@ -276,12 +258,10 @@ export const useCartStore = create<CartState>((set, get) => ({
       });
   },
 
-  // Add item to cart (creates cart if needed)
   addItem: async (variantId: string, quantity: number = 1) => {
     try {
       set({ loading: true, error: null });
 
-      // Get or create cart
       let currentCartId = get().cartId;
       if (!currentCartId) {
         const storedCartId = localStorage.getItem(CART_ID_KEY);
@@ -309,7 +289,6 @@ export const useCartStore = create<CartState>((set, get) => ({
     }
   },
 
-  // Remove item from cart
   removeItem: async (lineId: string) => {
     const { cartId } = get();
     if (!cartId) throw new Error('No cart exists');
@@ -327,7 +306,6 @@ export const useCartStore = create<CartState>((set, get) => ({
     }
   },
 
-  // Update item quantity
   updateItemQuantity: async (lineId: string, quantity: number) => {
     const { cartId, removeItem } = get();
     if (!cartId) throw new Error('No cart exists');
@@ -351,8 +329,7 @@ export const useCartStore = create<CartState>((set, get) => ({
     }
   },
 
-  // Apply a discount code. Shopify accepts unknown codes and reports them back
+  // Invalid discount codes return `applicable: false` instead of an error.
-  // as `applicable: false`, so callers should check the returned cart.
   applyDiscountCode: async (code: string) => {
     const { cartId } = get();
     if (!cartId) throw new Error('No cart exists');
@@ -374,7 +351,6 @@ export const useCartStore = create<CartState>((set, get) => ({
     }
   },
 
-  // Refresh cart from Shopify
   refreshCart: async () => {
     const storedCartId = localStorage.getItem(CART_ID_KEY);
     if (!storedCartId) {
@@ -403,12 +379,9 @@ export const useCartStore = create<CartState>((set, get) => ({
   },
 }));
 
-// ─── Hook (backwards-compatible API) ─────────────────────────────────
-
 export function useShopifyCart() {
   const store = useCartStore();
 
-  // Initialize cart safely in an effect, not during render
   useEffect(() => {
     if (!store._initialized) {
       store.initCart();

hooks/use-shopify-collections.ts

@@ -4,26 +4,26 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 import {
   getCollections,
   getCollectionProducts,
-} from '@/services/shopify/catalog';
+} from '@/services/shopify/shop';
 
 export {
   getCollections,
   getCollectionProducts,
   getCollectionProductsPage,
-} from '@/services/shopify/catalog';
+} from '@/services/shopify/shop';
 export type {
   Collection,
   CollectionWithProducts,
   CollectionSortKey,
   CollectionProductsPage,
   ProductFilterFacet,
-} from '@/services/shopify/catalog';
+} from '@/services/shopify/shop';
 
 import type {
   Collection,
   CollectionWithProducts,
   CollectionSortKey,
-} from '@/services/shopify/catalog';
+} from '@/services/shopify/shop';
 
 interface UseCollectionProductsOptions {
   first?: number;
@@ -33,7 +33,6 @@ interface UseCollectionProductsOptions {
   filterInputs?: string[];
 }
 
-// Hook for fetching all collections
 export function useCollections(first = 50) {
   const [collections, setCollections] = useState<Collection[]>([]);
   const [loading, setLoading] = useState(true);
@@ -60,9 +59,7 @@ export function useCollections(first = 50) {
   return { collections, loading, error, refetch: fetchCollections };
 }
 
-// Deferred variant of useCollections: nothing is requested until `load` runs,
+// Fetch once on demand for menus that may never open.
-// so a menu can hold off until it's actually opened. The fetch happens once —
-// re-opening reuses what's already in state.
 export function useCollectionsOnDemand(first = 50) {
   const [collections, setCollections] = useState<Collection[]>([]);
   const [loading, setLoading] = useState(false);
@@ -79,7 +76,6 @@ export function useCollectionsOnDemand(first = 50) {
       setCollections(await getCollections(first));
     } catch (err) {
       console.error('Error fetching collections:', err);
-      // Let the next open (or a retry) try again.
       requested.current = false;
       setError(err instanceof Error ? err.message : 'Failed to load collections');
     } finally {
@@ -90,7 +86,6 @@ export function useCollectionsOnDemand(first = 50) {
   return { collections, loading, error, load };
 }
 
-// Hook for fetching products in a collection
 export function useCollectionProducts(
   handle: string | null,
   options: UseCollectionProductsOptions = {}

hooks/use-shopify-policies.ts

@@ -12,7 +12,6 @@ export interface ShopPolicy {
   url: string;
 }
 
-// Handles Shopify uses for each policy — also the routes under /policies/[handle].
 export const POLICY_HANDLES = [
   'terms-of-service',
   'privacy-policy',
@@ -21,8 +20,6 @@ export const POLICY_HANDLES = [
   'subscription-policy',
 ] as const;
 
-// Policies change rarely, so this reads through the cached client (revalidated
-// hourly) rather than the no-store one used for carts and products.
 export async function getShopPolicies(): Promise<ShopPolicy[]> {
   try {
     const data = unwrapStorefrontResult(
@@ -34,7 +31,6 @@ export async function getShopPolicies(): Promise<ShopPolicy[]> {
       (policy): policy is ShopPolicy => Boolean(policy?.handle)
     );
   } catch (err) {
-    // A storefront without policies configured shouldn't break the footer.
     console.error('Failed to load shop policies:', err);
     return [];
   }

hooks/use-shopify-products.ts

@@ -5,24 +5,22 @@ import {
   getProducts,
   getProduct,
   getProductRecommendations,
-} from '@/services/shopify/catalog';
+} from '@/services/shopify/shop';
 
-// Pure fetchers live in services/shopify/catalog so server code can use them
-// too; re-exported here so existing imports keep working.
 export {
   getProducts,
   getProductsPage,
   getProduct,
   getProductRecommendations,
-} from '@/services/shopify/catalog';
+} from '@/services/shopify/shop';
 export type {
   Product,
   ProductOption,
   ProductOptionValue,
   ProductsPage,
-} from '@/services/shopify/catalog';
+} from '@/services/shopify/shop';
 
-import type { Product } from '@/services/shopify/catalog';
+import type { Product } from '@/services/shopify/shop';
 
 interface UseProductsOptions {
   first?: number;
@@ -39,7 +37,6 @@ interface UseProductsReturn {
   refetch: () => Promise<void>;
 }
 
-// Hook for fetching multiple products
 export function useProducts(options: UseProductsOptions = {}): UseProductsReturn {
   const [products, setProducts] = useState<Product[]>([]);
   const [loading, setLoading] = useState(true);
@@ -66,7 +63,6 @@ export function useProducts(options: UseProductsOptions = {}): UseProductsReturn
   return { products, loading, error, refetch: fetchProducts };
 }
 
-// Hook for fetching a single product
 export function useProduct(handle: string | null) {
   const [product, setProduct] = useState<Product | null>(null);
   const [loading, setLoading] = useState(true);
@@ -101,7 +97,6 @@ export function useProduct(handle: string | null) {
   return { product, loading, error, refetch: fetchProduct };
 }
 
-// Hook for fetching product recommendations
 export function useProductRecommendations(productId: string | null) {
   const [recommendations, setRecommendations] = useState<Product[]>([]);
   const [loading, setLoading] = useState(true);

hooks/use-shopify-search.ts

@@ -1,10 +1,8 @@
-// Re-exported from the server-safe catalogue module so both client components
+export { searchProducts, searchSuggestions } from '@/services/shopify/shop';
-// and Route Handlers can search the storefront.
-export { searchProducts, searchSuggestions } from '@/services/shopify/catalog';
 export type {
   SearchSortKey,
   SearchFilter,
   SearchFilterValue,
   SearchProductsResult,
   SearchSuggestion,
-} from '@/services/shopify/catalog';
+} from '@/services/shopify/shop';

lib/cloud.ts

@@ -1,6 +1,3 @@
-// Server-only config for the Frontend Cloud proxy routes.
-// The API key lives here (read from a non-public env var) so it is never
-// shipped to the browser bundle.
 
 export const CLOUD_BASE = "https://cloud.frontend.co";
 

lib/page-metadata.ts

@@ -1,7 +1,6 @@
 import type { Metadata } from 'next';
 import { site } from '@/config/site';
 
-/** The subset of root props (see config/root.tsx) that describes a page. */
 interface EditorPage {
   root?: {
     props?: {
@@ -16,25 +15,16 @@ interface MetadataOverrides {
   title?: string;
   description?: string;
   image?: string;
-  /** Root-relative path, used for the canonical and og:url. */
   path?: string;
 }
 
-/**
- * Turns a page.json's root props into Next metadata. The editor exposes
- * title/description/ogImage on the root, so editing a page in the editor is
- * what changes its tags; `overrides` lets dynamic routes layer fetched product,
- * collection or policy data on top.
- */
 export function pageMetadata(
   page: EditorPage,
   overrides: MetadataOverrides = {}
 ): Metadata {
   const props = page.root?.props ?? {};
 
-  // Editor-authored titles already carry the brand ("About — Shop"), so they
+  // Editor titles already include the brand; fetched titles use the template.
-  // opt out of the root template with `absolute`. A fetched override is a bare
-  // product or collection name and flows through the template instead.
   const title = overrides.title ?? props.title ?? site.storeName;
   const socialTitle = overrides.title ? `${title} — ${site.storeName}` : title;
   const description =

lib/pages.ts

@@ -1,64 +0,0 @@
-/**
- * Every editor-driven route in the app.
- *
- * `key` is what the editor's page picker shows and what `onPublish` hands back;
- * `dir` is the folder under `app/` holding that route's `page.json`. Keeping
- * the list here means the publish action can validate a route key against it
- * rather than trusting a path from the browser.
- */
-export interface PageRoute {
-  key: string;
-  label: string;
-  /** Path under `app/`, relative and without a leading slash. */
-  dir: string;
-}
-
-export const PAGE_ROUTES: PageRoute[] = [
-  { key: '/', label: 'Home', dir: '' },
-  { key: '/about', label: 'About', dir: 'about' },
-  { key: '/collections', label: 'Collections', dir: 'collections' },
-  {
-    key: '/collections/[handle]',
-    label: 'Collection detail',
-    dir: 'collections/[handle]',
-  },
-  {
-    key: '/products/[handle]',
-    label: 'Product detail',
-    dir: 'products/[handle]',
-  },
-  { key: '/search', label: 'Search', dir: 'search' },
-  { key: '/policies/[handle]', label: 'Policy', dir: 'policies/[handle]' },
-];
-
-export const ROUTE_KEYS = PAGE_ROUTES.map((route) => route.key);
-
-export function findPageRoute(key: string): PageRoute | undefined {
-  return PAGE_ROUTES.find((route) => route.key === key);
-}
-
-/**
- * URL of the editor for a route: every public route has an `/editor` child, so
- * `/products/warrior-club-hoodie` is edited at
- * `/products/warrior-club-hoodie/editor`.
- *
- * Dynamic segments are filled from `params` when the caller knows them. The
- * page picker doesn't — switching to `/products/[handle]` there lands on the
- * literal `[handle]`, where the blocks render their empty state until a product
- * is picked. Opening the editor from a real product page is the path that
- * gives them concrete params.
- */
-export function editorHref(
-  routeKey: string,
-  params: Record<string, string | undefined> = {}
-): string {
-  const base =
-    routeKey === '/'
-      ? ''
-      : routeKey.replace(
-          /\[(\w+)\]/g,
-          (segment, name: string) => params[name] ?? segment
-        );
-
-  return `${base}/editor`;
-}

lib/publish-page.ts

@@ -2,50 +2,35 @@
 
 import { writeFile } from 'node:fs/promises';
 import path from 'node:path';
-import { findPageRoute } from '@/lib/pages';
 
-/**
- * Writes a published page straight to its `page.json` on disk.
- *
- * A server action rather than a route handler: the editor calls it like a
- * function, and there is no HTTP endpoint sitting in front of the filesystem.
- *
- * The path is built from the registry in `lib/pages.ts`, never from the caller,
- * so an unknown or crafted route key is rejected outright rather than escaping
- * the `app/` directory.
- */
-
-// Props of blocks marked `global: true` (header, footer) live in one file that
-// every page.json references, so editing them once updates every route.
 const GLOBALS_FILE = path.join(process.cwd(), 'app.globals.json');
 
 export interface PublishResult {
-  /** Path of the written file, relative to the project root. */
   file?: string;
   error?: string;
 }
 
 export async function publishPage(
-  routeKey: string,
+  pagePath: string,
   page: unknown
 ): Promise<PublishResult> {
-  const route = findPageRoute(routeKey);
-  if (!route) return { error: `Unknown route: ${routeKey}` };
-
   if (!page || typeof page !== 'object') {
     return { error: 'Expected a page object.' };
   }
 
   const appDir = path.join(process.cwd(), 'app');
-  const file = path.join(appDir, route.dir, 'page.json');
+  const file = path.resolve(process.cwd(), pagePath);
+  const relativeToApp = path.relative(appDir, file);
 
-  // Belt-and-braces against a registry entry with a traversing `dir`.
+  if (
-  if (file !== path.join(appDir, 'page.json') && !file.startsWith(appDir + path.sep)) {
+    !relativeToApp ||
-    return { error: `Unknown route: ${routeKey}` };
+    relativeToApp.startsWith(`..${path.sep}`) ||
+    path.isAbsolute(relativeToApp) ||
+    path.basename(file) !== 'page.json'
+  ) {
+    return { error: 'Invalid page file.' };
   }
 
-  // Globals belong to the whole site, not this route, so they go to their own
-  // file and are stripped from the page before it is written.
   const { globals, ...pageData } = page as Record<string, unknown>;
 
   try {
@@ -61,8 +46,6 @@ export async function publishPage(
 
     return { file: path.relative(process.cwd(), file) };
   } catch (err) {
-    // Read-only filesystems (most serverless hosts) land here. Say so plainly
-    // rather than reporting a save that did not happen.
     console.error(`Failed to write ${file}:`, err);
     return {
       error:

next-env.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.js

@@ -3,8 +3,7 @@ import { fileURLToPath } from 'node:url';
 
 export default {
   reactStrictMode: true,
-  // Sibling templates each carry a lockfile, so pin the tracing root here
+  // Prevent sibling lockfiles from changing Next's inferred tracing root.
-  // rather than letting Next infer one from a parent directory.
   outputFileTracingRoot: dirname(fileURLToPath(import.meta.url)),
   typescript: {
     ignoreBuildErrors: true,
@@ -15,7 +14,6 @@ export default {
         protocol: 'https',
         hostname: 'images.unsplash.com',
       },
-      // Covers cdn.shopify.com plus any other Shopify-hosted image subdomain.
       {
         protocol: 'https',
         hostname: '**.shopify.com',

package.json

@@ -17,7 +17,7 @@
     "@openrouter/ai-sdk-provider": "^3.0.0",
     "@radix-ui/react-slot": "^1.3.3",
     "@radix-ui/react-use-controllable-state": "^1.2.6",
-    "@reacteditor/core": "0.0.41-alpha.3",
+    "@reacteditor/core": "0.0.41-alpha.4",
     "@reacteditor/plugin-shopify": "0.0.1-alpha.1",
     "@reacteditor/plugin-tailwind-cdn": "0.0.3-alpha.2",
     "@remixicon/react": "^4.9.0",

services/shopify/client.ts

@@ -1,10 +1,3 @@
-// Storefront API clients, built on `@shopify/hydrogen`.
-//
-// Call sites use the package's own API — `storefront.graphql(DOCUMENT, {
-// variables })` — and pass the result through `unwrapStorefrontResult`, which
-// applies this app's error policy: fail loudly. Hydrogen deliberately does not
-// do that itself, because a 200 carrying partial data and GraphQL errors is a
-// valid response that some callers want to render.
 import {
   createShopifyRequestContext,
   createStorefrontClient,
@@ -16,31 +9,15 @@ import {
   SHOPIFY_STORE_DOMAIN,
 } from '@/services/shopify/config';
 
-// No incoming request and no buyer context: these clients are module-scoped and
+// Shared clients must not capture per-request buyer state.
-// serve both server rendering and the browser-side hooks, so they must not close
-// over per-request state. `$country`/`$language` are injected from this i18n.
 const requestContext = createShopifyRequestContext({
   request: { headers: new Headers() },
   i18n: { country: 'US', language: 'EN' },
 });
 
-/**
+// Real stores reject this Hydrogen header during browser CORS preflight.
- * Workaround for a bug in this preview build of `@shopify/hydrogen`.
- *
- * The client tags every request with `X-Hydrogen-Version`, but the Storefront
- * API does not list that header in its CORS `access-control-allow-headers`.
- * Browsers therefore reject the preflight and `fetch` throws, which hydrogen
- * reports as the generic "SFAPI request failed". It only bites against real
- * stores — `mock.shop` answers `access-control-allow-headers: *`.
- *
- * Stripped in the browser only: server-side requests are not subject to CORS,
- * so they keep sending the header. Remove this once the API allows it (or once
- * these queries move server-side, which is the better long-term fix).
- */
 const CORS_BLOCKED_HEADERS = ['X-Hydrogen-Version'];
 
-// Hydrogen calls `fetch(url, init, cacheOptions)`; Next's caching hints ride
-// along on `init`, which is how the two ways of caching get to coexist.
 const fetchWith = (overrides: RequestInit): typeof globalThis.fetch =>
   ((url, init) => {
     const headers = new Headers(init?.headers);
@@ -58,34 +35,21 @@ const config = {
   publicStorefrontToken: SHOPIFY_PUBLIC_ACCESS_TOKEN,
 };
 
-/**
+/** Uncached client for carts and customer data. */
- * Default client. Uncached, because carts and customer reads must never serve a
- * stale response.
- */
 export const storefront = createStorefrontClient({
   type: 'public',
   requestContext,
   config: { ...config, fetch: fetchWith({ cache: 'no-store' }) },
 });
 
-/**
+/** One-hour cache for stable storefront data. */
- * Client for data that changes rarely (shop policies, and anything else safe to
- * serve from Next's data cache for an hour).
- */
 export const cachedStorefront = createStorefrontClient({
   type: 'public',
   requestContext,
   config: { ...config, fetch: fetchWith({ next: { revalidate: 3600 } }) },
 });
 
-/**
+/** Returns GraphQL data or throws the first Shopify error. */
- * Returns the data from a `graphql()` result, throwing if Shopify reported any
- * GraphQL errors. Transport failures — non-200, timeouts, unparseable bodies —
- * have already thrown as `StorefrontApiError` by this point.
- *
- * `operation` names the query in the log and the thrown message, so a failure
- * points at the call site rather than just at "Shopify".
- */
 export function unwrapStorefrontResult<TData>(
   result: { data: TData | null; errors?: GraphQLFormattedError[] },
   operation: string

services/shopify/config.ts

@@ -1,14 +1,6 @@
-// Storefront configuration, read from the environment in one place.
-//
-// These are all `NEXT_PUBLIC_*`, so Next inlines them at build time and they are
-// safe to read from client components as well as server code.
 export const SHOPIFY_STORE_DOMAIN = process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN;
 
-/**
+// Never assign a private token to this public environment variable.
- * Public Storefront API access token. Safe to expose to the browser — that is
- * what "public" means here. Omitted for tokenless storefronts such as
- * `mock.shop`. Never put a *private* token behind a `NEXT_PUBLIC_` name.
- */
 export const SHOPIFY_PUBLIC_ACCESS_TOKEN =
   process.env.NEXT_PUBLIC_SHOPIFY_PUBLIC_ACCESS_TOKEN;
 

services/shopify/shop.ts

@@ -1,8 +1,3 @@
-// Server-safe Shopify catalogue access.
-//
-// These are plain async functions with no React imports, so they can be called
-// from Route Handlers (see app/api/chat/route.ts) as well as from the client
-// hooks in hooks/use-shopify-*.ts, which re-export them.
 import type { StorefrontApi } from '@shopify/hydrogen';
 import { storefront, unwrapStorefrontResult } from '@/services/shopify/client';
 import {
@@ -19,8 +14,6 @@ import {
   SEARCH_SUGGESTIONS_QUERY,
 } from '@/graphql/search';
 
-// Optional fields are `| null` rather than just optional: the Storefront API
-// returns explicit nulls, and the typed `gql()` documents now surface that.
 interface ProductImage {
   url: string;
   altText?: string | null;
@@ -67,10 +60,7 @@ export interface ProductOption {
   optionValues?: ProductOptionValue[];
 }
 
-/**
+/** Detects Shopify's synthetic option for single-variant products. */
- * Single-variant products still carry one synthetic option — `Title` with the
- * lone value `Default Title`. It isn't a real choice, so keep it out of the UI.
- */
 export const isDefaultTitleOption = (option: {
   name: string;
   values: string[];
@@ -79,7 +69,6 @@ export const isDefaultTitleOption = (option: {
   option.values.length === 1 &&
   option.values[0] === 'Default Title';
 
-/** Same synthetic option, as it appears on a variant's `selectedOptions`. */
 export const isDefaultTitleSelection = (selection: {
   name: string;
   value: string;
@@ -113,7 +102,6 @@ export interface Product {
 
 interface UseProductsOptions {
   first?: number;
-  /** Cursor from a previous page's `endCursor`; omit for the first page. */
   after?: string | null;
   query?: string;
   sortKey?: 'BEST_SELLING' | 'CREATED_AT' | 'PRICE' | 'TITLE';
@@ -126,14 +114,6 @@ export interface ProductsPage {
   endCursor: string | null;
 }
 
-interface UseProductsReturn {
-  products: Product[];
-  loading: boolean;
-  error: string | null;
-  refetch: () => Promise<void>;
-}
-
-// Fetch multiple products
 export async function getProducts(
   options: UseProductsOptions = {}
 ): Promise<Product[]> {
@@ -141,7 +121,6 @@ export async function getProducts(
   return products;
 }
 
-// Same fetch, but keeps the cursor so callers can page through the catalogue.
 export async function getProductsPage({
   first = 20,
   after = null,
@@ -165,7 +144,6 @@ export async function getProductsPage({
   };
 }
 
-// Fetch a single product by handle
 export async function getProduct(handle: string): Promise<Product | null> {
   const data = unwrapStorefrontResult(
     await storefront.graphql(GET_PRODUCT_QUERY, { variables: { handle } }),
@@ -175,7 +153,6 @@ export async function getProduct(handle: string): Promise<Product | null> {
   return data.product;
 }
 
-// Fetch product recommendations
 export async function getProductRecommendations(productId: string): Promise<Product[]> {
   const data = unwrapStorefrontResult(
     await storefront.graphql(QUERY_PRODUCT_RECOMMENDATIONS, {
@@ -218,7 +195,6 @@ interface UseCollectionProductsOptions {
   after?: string | null;
   sortKey?: CollectionSortKey;
   reverse?: boolean;
-  /** Raw `input` strings from the connection's `filters` facets. */
   filterInputs?: string[];
 }
 
@@ -242,7 +218,6 @@ export interface ProductFilterFacet {
   }>;
 }
 
-// Fetch all collections
 export async function getCollections(first = 50): Promise<Collection[]> {
   const data = unwrapStorefrontResult(
     await storefront.graphql(GET_COLLECTIONS_QUERY, { variables: { first } }),
@@ -252,7 +227,6 @@ export async function getCollections(first = 50): Promise<Collection[]> {
   return data.collections.edges.map((edge) => edge.node);
 }
 
-// Fetch products in a collection by handle
 export async function getCollectionProducts(
   handle: string,
   options: UseCollectionProductsOptions = {}
@@ -263,7 +237,6 @@ export async function getCollectionProducts(
   return { ...page.collection, products: page.products };
 }
 
-// Same fetch, but keeps the cursor and facet list for filtering and paging.
 export async function getCollectionProductsPage(
   handle: string,
   {
@@ -319,7 +292,6 @@ export interface SearchFilterValue {
   id: string;
   label: string;
   count: number;
-  /** JSON string accepted back as a `ProductFilter` input. */
   input: string;
 }
 
@@ -360,18 +332,14 @@ interface SearchProductsOptions {
   after?: string | null;
   sortKey?: SearchSortKey;
   reverse?: boolean;
-  /** Raw `input` strings from the facets, parsed back into filter objects. */
   filterInputs?: string[];
 }
 
-// The `ProductFilter` input shape, taken from the query that consumes it so it
-// tracks the schema rather than being restated here.
 type ProductFilterInput = NonNullable<
   StorefrontApi.VariablesOf<typeof GET_COLLECTION_PRODUCTS_QUERY>['filters']
 >[number];
 
-// Facet `input` values are opaque JSON strings produced by Shopify and handed
+// Shopify facet inputs are opaque JSON values intended for round-tripping.
-// straight back as filter inputs, so they are parsed, not constructed.
 function parseFilterInputs(inputs: string[]): ProductFilterInput[] {
   return inputs.flatMap((input) => {
     try {

yarn.lock

@@ -2316,9 +2316,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reacteditor/core@npm:0.0.41-alpha.3":
+"@reacteditor/core@npm:0.0.41-alpha.4":
-  version: 0.0.41-alpha.3
+  version: 0.0.41-alpha.4
-  resolution: "@reacteditor/core@npm:0.0.41-alpha.3"
+  resolution: "@reacteditor/core@npm:0.0.41-alpha.4"
   dependencies:
     "@chakra-ui/react": "npm:^3.35.0"
     "@dnd-kit/abstract": "npm:0.4.0"
@@ -2361,7 +2361,7 @@ __metadata:
     zustand: "npm:^5.0.13"
   peerDependencies:
     react: ^18.0.0 || ^19.0.0
-  checksum: 10c0/0d9ab9e02b7f639603c94b9c6e9068e60d7662eb2744896f20481a1a0bc93727204a79857fffdbdd1ae37b1e76d470a238d6528ebe25de7c08a25e23c0923240
+  checksum: 10c0/df326a5e43e7398e64a835d47f4a4daf6aea2715bc37dd61c6435e155178310ea342bc2eba4d781baa43f6e3520dc1fae8edd55f094d26052444f0737f093204
   languageName: node
   linkType: hard
 
@@ -2377,13 +2377,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reacteditor/plugin-tailwind-cdn@npm:0.0.3-alpha.1":
+"@reacteditor/plugin-tailwind-cdn@npm:0.0.3-alpha.2":
-  version: 0.0.3-alpha.1
+  version: 0.0.3-alpha.2
-  resolution: "@reacteditor/plugin-tailwind-cdn@npm:0.0.3-alpha.1"
+  resolution: "@reacteditor/plugin-tailwind-cdn@npm:0.0.3-alpha.2"
   peerDependencies:
-    "@reacteditor/core": ">=0.0.28"
+    "@reacteditor/core": ">=0.0.41-alpha.3"
     react: ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10c0/94215939cdc994e9323bf34123df4319a96f04d6422d6d10efcf5d56bb03f38eba3db637a35566c954fd4fc7ad344dc01926559dcb8060966a2a2c7a225f0034
+  checksum: 10c0/b49110df1640efa132bc1a48c0d38fe41f0fa775472b323dd31bb6c67cf926e3ee3bee495348ce344e9339474048846fda09332504b5011b01e16d6107f9c033
   languageName: node
   linkType: hard
 
@@ -5823,9 +5823,9 @@ __metadata:
     "@openrouter/ai-sdk-provider": "npm:^3.0.0"
     "@radix-ui/react-slot": "npm:^1.3.3"
     "@radix-ui/react-use-controllable-state": "npm:^1.2.6"
-    "@reacteditor/core": "npm:0.0.41-alpha.3"
+    "@reacteditor/core": "npm:0.0.41-alpha.4"
     "@reacteditor/plugin-shopify": "npm:0.0.1-alpha.1"
-    "@reacteditor/plugin-tailwind-cdn": "npm:0.0.3-alpha.1"
+    "@reacteditor/plugin-tailwind-cdn": "npm:0.0.3-alpha.2"
     "@remixicon/react": "npm:^4.9.0"
     "@shopify/hydrogen": "npm:0.0.0-preview-116d5d7-20260730141607"
     "@shopify/storefront-api-client": "npm:^1.0.0"