create-brainerce-store 1.74.0 → 1.75.0

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.74.0",
+      version: "1.75.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"
@@ -47,7 +47,8 @@ var require_package = __commonJS({
         dev: "tsup --watch",
         clean: "rimraf dist",
         release: "pnpm build && node ../../scripts/publish-workspace-package.js .",
-        prepublishOnly: "node ../../scripts/check-publishable.js ./package.json"
+        "check:template-parity": "node scripts/check-template-parity.js",
+        prepublishOnly: "node scripts/check-template-parity.js && node ../../scripts/check-publishable.js ./package.json"
       },
       dependencies: {
         chalk: "^4.1.2",
@@ -264,11 +265,13 @@ var BRAINERCE_RUNTIME_DEPS = Object.freeze({
   // top level instead of per card. Typing the prop as `CheckoutTender[]` does
   // not compile against `checkout.tenders`.)
   //
-  // ⛔ 2.1.0 IS NOT PUBLISHED YET (npm latest is 2.0.2). Per the RELEASE ORDER
-  // rule above, publishing this CLI before the SDK makes the range
-  // unsatisfiable and kills every scaffold at install. Publish brainerce
-  // 2.1.0 first, confirm it on the registry, then publish the CLI.
-  brainerce: "^2.1.0",
+  // 2.1.0 was published on 2026-09-03 and the tarball was checked for the
+  // methods the template calls, so this range is satisfiable. The RELEASE ORDER
+  // rule above still stands for the NEXT bump: publish brainerce first, confirm
+  // it on the registry with `npm pack` (not `npm view`, which serves a stale
+  // cache), and only then publish the CLI — a floor above the published SDK is
+  // unsatisfiable and kills every scaffold at install.
+  brainerce: "^2.2.0",
   "isomorphic-dompurify": "^3.8.0"
 });
 

package/messages/en.json

@@ -62,7 +62,8 @@
     "monthNovember": "November",
     "monthDecember": "December",
     "giftCard": "Gift card",
-    "amountDue": "Amount due"
+    "amountDue": "Amount due",
+    "amountCharged": "Amount charged"
   },
   "nav": {
     "products": "Products",

package/messages/he.json

@@ -62,7 +62,8 @@
     "monthNovember": "נובמבר",
     "monthDecember": "דצמבר",
     "giftCard": "כרטיס מתנה",
-    "amountDue": "לתשלום"
+    "amountDue": "לתשלום",
+    "amountCharged": "חויב בפועל"
   },
   "nav": {
     "products": "מוצרים",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.74.0",
+  "version": "1.75.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"
@@ -16,7 +16,8 @@
     "dev": "tsup --watch",
     "clean": "rimraf dist",
     "release": "pnpm build && node ../../scripts/publish-workspace-package.js .",
-    "prepublishOnly": "node ../../scripts/check-publishable.js ./package.json"
+    "check:template-parity": "node scripts/check-template-parity.js",
+    "prepublishOnly": "node scripts/check-template-parity.js && node ../../scripts/check-publishable.js ./package.json"
   },
   "dependencies": {
     "chalk": "^4.1.2",

package/templates/nextjs/base/src/app/order-confirmation/page.tsx

@@ -333,6 +333,43 @@ function ConfirmationLineItems({ order }: { order: Order | null }) {
           {formatPrice(parseFloat(totalAmount), { currency }) as string}
         </span>
       </div>
+
+      {/* What actually paid.
+          This is the first screen a customer sees after handing over money, and
+          a total with no gift-card line tells them they paid an amount they did
+          not. The total above is what the order was WORTH and stays unreduced —
+          tax was calculated on it — so the cards sit below it, followed by what
+          the card or wallet was really charged. */}
+      {order.tenders && order.tenders.length > 0 && (
+        <>
+          {order.tenders.map((tender) => (
+            <div key={tender.id} className="mt-2 flex items-center justify-between text-sm">
+              <span className="text-muted-foreground">
+                {tender.giftCard?.codeLast4
+                  ? `${tc('giftCard')} ····${tender.giftCard.codeLast4}`
+                  : tc('giftCard')}
+              </span>
+              <span className="text-primary">
+                -{formatPrice(parseFloat(tender.amountBase), { currency }) as string}
+              </span>
+            </div>
+          ))}
+          <div className="border-border mt-2 flex items-center justify-between border-t pt-2">
+            <span className="text-foreground text-sm font-medium">{tc('amountCharged')}</span>
+            <span className="text-foreground text-sm font-semibold">
+              {
+                formatPrice(
+                  order.tenders.reduce(
+                    (due, tn) => due - parseFloat(tn.amountBase),
+                    parseFloat(totalAmount)
+                  ),
+                  { currency }
+                ) as string
+              }
+            </span>
+          </div>
+        </>
+      )}
     </div>
   );
 }

package/templates/nextjs/base/src/components/account/order-history.tsx

@@ -417,6 +417,40 @@ function OrderFinancialSummary({ order, currency }: { order: Order; currency: st
           {formatPrice(parseFloat(totalAmount), { currency }) as string}
         </span>
       </div>
+
+      {/* Order history is the record a customer checks a card statement
+          against, months later. A total with no gift-card line is the one that
+          makes them think they were charged twice. */}
+      {order.tenders && order.tenders.length > 0 && (
+        <>
+          {order.tenders.map((tender) => (
+            <div key={tender.id} className="flex items-center justify-between">
+              <span className="text-muted-foreground">
+                {tender.giftCard?.codeLast4
+                  ? `${tc('giftCard')} ····${tender.giftCard.codeLast4}`
+                  : tc('giftCard')}
+              </span>
+              <span className="text-primary">
+                -{formatPrice(parseFloat(tender.amountBase), { currency }) as string}
+              </span>
+            </div>
+          ))}
+          <div className="border-border flex items-center justify-between border-t pt-1">
+            <span className="text-foreground font-medium">{tc('amountCharged')}</span>
+            <span className="text-foreground font-semibold">
+              {
+                formatPrice(
+                  order.tenders.reduce(
+                    (due, tn) => due - parseFloat(tn.amountBase),
+                    parseFloat(totalAmount)
+                  ),
+                  { currency }
+                ) as string
+              }
+            </span>
+          </div>
+        </>
+      )}
     </div>
   );
 }

package/templates/nextjs/ui-canvas/layout/header-search.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+/**
+ * Header search with autocomplete (bare skeleton).
+ *
+ * The header itself is a server component (merchant-configured Content), so
+ * the search box is a client island — the same bridge `HeaderAccount` uses.
+ *
+ * Everything here is BEHAVIOUR and is already correct; only the presentation is
+ * yours to write. Keep all of it:
+ *   - `useSearch()` supplies the suggestions (300ms debounce, 2-char minimum,
+ *     abort on re-query). This component owns only the input + dropdown.
+ *   - Submitting navigates to `/products?search=<query>`, which is exactly
+ *     what `use-product-listing` reads back off the URL.
+ *   - Picking a product suggestion goes to its PDP; picking a category goes to
+ *     the listing filtered by `?category=<id>`, because a CategorySuggestion
+ *     carries `id` + `name` + `productCount` and no slug.
+ *   - Keyboard: ArrowDown / ArrowUp move the active option, Enter opens it (or
+ *     submits the raw query when nothing is active), Escape closes the panel.
+ *     A pointerdown outside the widget closes it.
+ *
+ * The ARIA wiring (`role="combobox"`, `aria-expanded`, `aria-controls`,
+ * `aria-activedescendant`, `role="listbox"`/`"option"`, `aria-selected`) is
+ * load-bearing for screen readers — style around it, do not remove it.
+ */
+
+import * as React from 'react';
+import { useRouter } from '@/core/lib/navigation';
+import { useSearch } from '@/core/hooks/use-search';
+import { useTranslations } from '@/core/lib/translations';
+
+interface HeaderSearchProps {
+  className?: string;
+}
+
+/** One flattened dropdown row — products first, then categories. */
+type Option =
+  | { kind: 'product'; id: string; label: string; href: string }
+  | { kind: 'category'; id: string; label: string; href: string };
+
+export function HeaderSearch({ className }: HeaderSearchProps) {
+  const router = useRouter();
+  const t = useTranslations('nav');
+  const tc = useTranslations('common');
+  const tp = useTranslations('products');
+
+  const [query, setQuery] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const { suggestions, loading } = useSearch(query);
+
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const listboxId = React.useId();
+
+  // Products first, then categories — one flat list so the arrow keys can walk
+  // the whole panel without caring which section a row came from.
+  const options: Option[] = React.useMemo(() => {
+    if (!suggestions) return [];
+    const rows: Option[] = [];
+    for (const product of suggestions.products) {
+      rows.push({
+        kind: 'product',
+        id: product.id,
+        label: product.name,
+        // `slug` is nullable on a ProductSuggestion — fall back to the id.
+        href: `/products/${product.slug || product.id}`,
+      });
+    }
+    for (const category of suggestions.categories) {
+      rows.push({
+        kind: 'category',
+        id: category.id,
+        label: category.name,
+        // CategorySuggestion carries no slug, so filter the listing by id.
+        href: `/products?category=${encodeURIComponent(category.id)}`,
+      });
+    }
+    return rows;
+  }, [suggestions]);
+
+  // A fresh result set invalidates whatever row was highlighted.
+  React.useEffect(() => {
+    setActiveIndex(-1);
+  }, [options]);
+
+  // Close when the click lands outside the widget. Pointerdown rather than
+  // click so the panel is gone before a link underneath activates.
+  React.useEffect(() => {
+    if (!open) return;
+    function onPointerDown(event: PointerEvent) {
+      if (!rootRef.current) return;
+      if (!rootRef.current.contains(event.target as Node)) setOpen(false);
+    }
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [open]);
+
+  function go(href: string) {
+    setOpen(false);
+    setActiveIndex(-1);
+    router.push(href);
+  }
+
+  function submit() {
+    const trimmed = query.trim();
+    if (!trimmed) return;
+    go(`/products?search=${encodeURIComponent(trimmed)}`);
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (event.key === 'Escape') {
+      setOpen(false);
+      setActiveIndex(-1);
+      return;
+    }
+
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      if (options.length === 0) return;
+      event.preventDefault();
+      setOpen(true);
+      setActiveIndex((prev) => {
+        const step = event.key === 'ArrowDown' ? 1 : -1;
+        const next = prev + step;
+        if (next < 0) return options.length - 1;
+        if (next >= options.length) return 0;
+        return next;
+      });
+      return;
+    }
+
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      const active = activeIndex >= 0 ? options[activeIndex] : undefined;
+      if (active) {
+        go(active.href);
+      } else {
+        submit();
+      }
+    }
+  }
+
+  // The panel is only worth showing once the hook has something to say —
+  // either rows, a spinner, or an explicit "nothing matched".
+  const showPanel = open && (loading || suggestions !== null);
+  const activeOptionId = activeIndex >= 0 ? `${listboxId}-${activeIndex}` : undefined;
+  const productCount = suggestions?.products.length ?? 0;
+
+  return (
+    <div ref={rootRef} className={className}>
+      {/* DESIGN ME — header search. Compose with the shadcn/ui primitives in
+          src/components/ui (Input, Command, Popover, Skeleton, ...) + lucide-react
+          icons. The panel below wants to overlay the page, so give this wrapper a
+          positioning context and the panel an elevated layer. */}
+      <form
+        role="search"
+        onSubmit={(event) => {
+          event.preventDefault();
+          submit();
+        }}
+      >
+        <label htmlFor={`${listboxId}-input`} className="sr-only">
+          {t('search')}
+        </label>
+        <input
+          id={`${listboxId}-input`}
+          type="search"
+          role="combobox"
+          autoComplete="off"
+          aria-expanded={showPanel}
+          aria-controls={listboxId}
+          aria-activedescendant={activeOptionId}
+          placeholder={t('searchPlaceholder')}
+          value={query}
+          onChange={(event) => {
+            setQuery(event.target.value);
+            setOpen(true);
+          }}
+          onFocus={() => setOpen(true)}
+          onKeyDown={handleKeyDown}
+        />
+      </form>
+
+      {showPanel && (
+        <div>
+          {/* DESIGN ME — suggestions panel. */}
+          {loading && options.length === 0 ? (
+            <p>{tc('loading')}</p>
+          ) : options.length === 0 ? (
+            <p>{tc('noResults')}</p>
+          ) : (
+            <ul id={listboxId} role="listbox" aria-label={t('search')}>
+              {options.map((option, index) => (
+                <React.Fragment key={`${option.kind}-${option.id}`}>
+                  {index === 0 && productCount > 0 && (
+                    <li role="presentation">{tp('pageTitle')}</li>
+                  )}
+                  {index === productCount && option.kind === 'category' && (
+                    <li role="presentation">{t('categories')}</li>
+                  )}
+                  <li
+                    id={`${listboxId}-${index}`}
+                    role="option"
+                    aria-selected={index === activeIndex}
+                    onPointerDown={(event) => {
+                      // Keep focus in the input so the blur handler cannot
+                      // close the panel before the navigation runs.
+                      event.preventDefault();
+                      go(option.href);
+                    }}
+                    onMouseEnter={() => setActiveIndex(index)}
+                  >
+                    {option.label}
+                  </li>
+                </React.Fragment>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/layout/site-header.tsx.ejs

@@ -18,6 +18,7 @@ import * as React from 'react';
 import { Link } from '@/core/lib/navigation';
 import type { Content } from 'brainerce';
 import { HeaderAccount } from './header-account';
+import { HeaderSearch } from './header-search';
 <% if (i18nEnabled) { %>
 import { LanguageSwitcher } from '@/ui/layout/language-switcher';
 <% } %>
@@ -53,6 +54,9 @@ export function SiteHeader({ header, storeName }: SiteHeaderProps) {
             <LanguageSwitcher />
             <% } %>
             <RegionSwitcher />
+            {/* Search is a MANDATORY feature, not decoration — the island carries the
+                debounce, keyboard navigation and ARIA wiring already. */}
+            <HeaderSearch />
             <HeaderAccount />
             <Link href="/cart" aria-label="Cart">
               Cart
@@ -96,6 +100,8 @@ export function SiteHeader({ header, storeName }: SiteHeaderProps) {
           <% } %>
           <RegionSwitcher />
 
+          <HeaderSearch />
+
           <HeaderAccount />
 
           <Link href="/cart" aria-label="Cart">