@usequeek/theme-kit 0.1.0

package/components/cart/default-cart-shell.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import Link from 'next/link';
+import type { CartShellProps } from '../../types/theme';
+import { useHref } from '../../hooks/use-href';
+import { useCheckoutStore } from '../../stores/checkout-store';
+import { useRelatedProducts } from '../../hooks/use-related-products';
+import { useCart } from '../../hooks/use-cart';
+import { formatMoney } from '../../utils/format';
+import { productRequiresVariant } from '../../utils/match-variant';
+import { Image } from '../image';
+
+/**
+ * The cart page's shared, root design — every theme's shells/cart-shell.tsx
+ * delegates to this (all thin passthroughs today) unless one chooses to
+ * build its own; the override mechanism stays real, it's just unused today.
+ */
+export function DefaultCartShell({
+  items,
+  currency,
+  total,
+  empty,
+  onIncrease,
+  onDecrease,
+  onRemove,
+}: CartShellProps): JSX.Element {
+  const href = useHref();
+  const { addProduct } = useCart();
+  const vendorNote = useCheckoutStore((s) => s.vendorNote);
+  const setVendorNote = useCheckoutStore((s) => s.setVendorNote);
+  const [noteOpen, setNoteOpen] = useState(false);
+  const [agreed, setAgreed] = useState(false);
+  const relatedRef = useRef<HTMLDivElement>(null);
+
+  const firstSlug = items.find((item) => item.slug)?.slug ?? '';
+  const { products: related } = useRelatedProducts(firstSlug, 6);
+
+  const scrollRelated = (dir: number): void => {
+    const el = relatedRef.current;
+    if (!el) return;
+    const card = el.querySelector<HTMLElement>('.core-cart-page__related-card');
+    const amount = card ? card.offsetWidth + 16 : el.clientWidth * 0.8;
+    el.scrollBy({ left: dir * amount, behavior: 'smooth' });
+  };
+
+  if (empty) {
+    return (
+      <div className="core-cart-page">
+        <h1 className="core-cart-page__title">Your cart</h1>
+        <div className="core-cart-page__empty">
+          <p>Your cart is empty.</p>
+          <Link href={href('/')} className="core-checkout__back-link">Browse products</Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="core-cart-page">
+      <h1 className="core-cart-page__title">Your cart</h1>
+
+      <div className="core-cart-page__grid">
+        <div className="core-cart-page__main">
+          <div className="core-cart-page__items-card">
+            <ul className="core-cart-page__items">
+              {items.map((item) => (
+                <li key={`${item.shop_id}-${item.id}`} className="core-cart-page__item">
+                  {item.image ? (
+                    <Image src={item.image} alt={item.title} className="core-cart-page__item-img" />
+                  ) : (
+                    <div className="core-cart-page__item-img core-cart-page__item-img--placeholder" />
+                  )}
+                  <div className="core-cart-page__item-info">
+                    <span className="core-cart-page__item-title">{item.title}</span>
+                    <span className="core-cart-page__item-price">{formatMoney(item.unit_price, currency)} each</span>
+                  </div>
+                  <div className="core-cart-page__item-qty">
+                    <button type="button" onClick={() => onDecrease(item.id, item.shop_id)} aria-label={`Decrease ${item.title}`}>
+                      <svg width="10" height="10" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2 6h8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg>
+                    </button>
+                    <span>{item.quantity}</span>
+                    <button type="button" onClick={() => onIncrease(item.id, item.shop_id)} aria-label={`Increase ${item.title}`}>
+                      <svg width="10" height="10" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M6 2v8M2 6h8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg>
+                    </button>
+                  </div>
+                  <span className="core-cart-page__item-total">{formatMoney(item.unit_price * item.quantity, currency)}</span>
+                  <button type="button" className="core-cart-page__item-remove" onClick={() => onRemove(item.id, item.shop_id)} aria-label={`Remove ${item.title}`}>
+                    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+                      <path d="M4 6h12M8 6V4.5A1.5 1.5 0 019.5 3h1A1.5 1.5 0 0112 4.5V6m-6 0v9.5A1.5 1.5 0 007.5 17h5a1.5 1.5 0 001.5-1.5V6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {related.length > 0 ? (
+            <section className="core-cart-page__related">
+              <div className="core-cart-page__related-head">
+                <h2>You may also like</h2>
+                <div className="core-cart-page__related-nav">
+                  <button type="button" onClick={() => scrollRelated(-1)} aria-label="Previous">
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M10 13L5 8l5-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
+                  </button>
+                  <button type="button" onClick={() => scrollRelated(1)} aria-label="Next">
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6 3l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
+                  </button>
+                </div>
+              </div>
+              <div className="core-cart-page__related-row" ref={relatedRef}>
+                {related.map((product) => (
+                  <div key={product.id} className="core-cart-page__related-card">
+                    {product.media.thumbnail ? (
+                      <Image
+                        src={product.media.thumbnail}
+                        alt={product.title}
+                        className="core-cart-page__related-img"
+                        variants={product.media.image_variants}
+                        intent="avatar"
+                      />
+                    ) : (
+                      <div className="core-cart-page__related-img core-cart-page__related-img--placeholder" />
+                    )}
+                    <div className="core-cart-page__related-info">
+                      <span className="core-cart-page__related-title">{product.title}</span>
+                      <span className="core-cart-page__related-price">{product.pricing.is_price_from ? 'From ' : ''}{formatMoney(product.pricing.sale_amount, currency)}</span>
+                    </div>
+                    {productRequiresVariant(product) ? (
+                      <Link
+                        className="core-cart-page__related-add"
+                        href={href(`/products/${product.slug}`)}
+                        aria-label={`Choose options for ${product.title}`}
+                      >
+                        <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+                          <path d="M7 4l6 6-6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                        </svg>
+                      </Link>
+                    ) : (
+                    <button
+                      type="button"
+                      className="core-cart-page__related-add"
+                      aria-label={`Add ${product.title} to cart`}
+                      onClick={() => addProduct(product)}
+                    >
+                      <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+                        <path d="M2 3h2l2.4 9.6a1 1 0 001 .4H15a1 1 0 00.97-.76L17 7H5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                        <circle cx="8" cy="17" r="1" fill="currentColor" />
+                        <circle cx="14" cy="17" r="1" fill="currentColor" />
+                      </svg>
+                    </button>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </section>
+          ) : null}
+        </div>
+
+        <div className="core-cart-page__summary">
+          <div className="core-cart-page__summary-card">
+            <h2 className="core-cart-page__summary-title">Order summary</h2>
+
+            <button type="button" className="core-cart-page__note-toggle" onClick={() => setNoteOpen((v) => !v)}>
+              Add order note
+              <span aria-hidden="true">{noteOpen ? '−' : '+'}</span>
+            </button>
+            {noteOpen ? (
+              <textarea
+                className="core-textarea core-cart-page__note-input"
+                rows={3}
+                value={vendorNote}
+                onChange={(event) => setVendorNote(event.target.value)}
+                placeholder="Order instructions (optional)"
+              />
+            ) : null}
+
+            <div className="core-cart-page__subtotal">
+              <span>Subtotal:</span>
+              <strong>{formatMoney(total, currency)} {currency}</strong>
+            </div>
+
+            <label className="core-cart-page__terms">
+              <input type="checkbox" checked={agreed} onChange={(event) => setAgreed(event.target.checked)} />
+              <span>I agree to the <Link href={href('/policies')}>terms and refund policy</Link></span>
+            </label>
+
+            <Link
+              href={href('/checkout')}
+              className="core-cart-page__checkout-btn"
+              aria-disabled={!agreed}
+              onClick={(event) => { if (!agreed) event.preventDefault(); }}
+            >
+              <svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+                <path d="M2 3h2l2.4 9.6a1 1 0 001 .4H15a1 1 0 00.97-.76L17 7H5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                <circle cx="8" cy="17" r="1" fill="currentColor" />
+                <circle cx="14" cy="17" r="1" fill="currentColor" />
+              </svg>
+              Checkout
+            </Link>
+            <Link href={href('/')} className="core-cart-page__continue-link">Continue shopping</Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/checkout/checkout-contact.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useAuth } from '../../hooks/use-auth';
+import { Image } from '../image';
+
+/**
+ * First section of the checkout form — shows who's checking out. Ordering
+ * requires auth (`canCheckout` in checkout-controller.tsx), so unlike
+ * Shopify's guest-friendly email field this is purely an identity
+ * confirmation: avatar + email when signed in, a sign-in prompt otherwise.
+ */
+export function CheckoutContactSection(): JSX.Element {
+  const { user, isAuthenticated, openAuthModal, logout } = useAuth();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onClick = (event: MouseEvent): void => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', onClick);
+    return () => document.removeEventListener('mousedown', onClick);
+  }, [menuOpen]);
+
+  if (!isAuthenticated || !user) {
+    return (
+      <section className="core-checkout__section core-checkout-contact">
+        <div className="core-checkout-contact__row">
+          <span className="core-checkout-contact__label">Contact</span>
+          <button
+            type="button"
+            className="core-checkout-contact__signin"
+            onClick={() => openAuthModal('login')}
+          >
+            Sign in
+          </button>
+        </div>
+      </section>
+    );
+  }
+
+  const initial = (user.first_name || user.name || '?').charAt(0).toUpperCase();
+  const contact = user.email || user.phone || '';
+
+  return (
+    <section className="core-checkout__section core-checkout-contact">
+      <div className="core-checkout-contact__row" ref={menuRef}>
+        <div className="core-checkout-contact__identity">
+          {user.avatar ? (
+            <Image src={user.avatar} alt={user.name} className="core-checkout-contact__avatar" />
+          ) : (
+            <span className="core-checkout-contact__avatar core-checkout-contact__avatar--initial">{initial}</span>
+          )}
+          <span className="core-checkout-contact__email">{contact}</span>
+        </div>
+        <div className="core-checkout-contact__menu-wrap">
+          <button
+            type="button"
+            className="core-checkout-contact__menu-btn"
+            aria-label="Account options"
+            onClick={() => setMenuOpen((v) => !v)}
+          >
+            <svg width="18" height="18" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <circle cx="10" cy="4" r="1.5" />
+              <circle cx="10" cy="10" r="1.5" />
+              <circle cx="10" cy="16" r="1.5" />
+            </svg>
+          </button>
+          {menuOpen ? (
+            <div className="core-checkout-contact__menu">
+              <button type="button" onClick={() => { setMenuOpen(false); logout(); }}>
+                Sign out
+              </button>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}

package/components/checkout/default-checkout-shell.tsx

@@ -0,0 +1,177 @@
+'use client';
+import Link from 'next/link';
+import type { CheckoutShellProps } from '../../types/theme';
+import { formatMoney } from '../../utils/format';
+import { useHref } from '../../hooks/use-href';
+import { CheckoutContactSection } from './checkout-contact';
+import { PolicyLinks } from './policy-links';
+
+export function DefaultCheckoutShell({
+  cartItems,
+  deliveryModes,
+  addressPicker,
+  deliverySourcePicker,
+  shippingZonePicker,
+  schedulePicker,
+  paymentPicker,
+  promoInput,
+  noteInputs,
+  feesBreakdown,
+  deliveryMessage,
+  submitButton,
+  activeTab,
+  onTabChange,
+  totalCount,
+  subtotal,
+  currency,
+  mode = 'panel',
+  policies,
+}: CheckoutShellProps): JSX.Element {
+  const href = useHref();
+
+  if (mode === 'page') {
+    if (totalCount === 0) {
+      return (
+        <div className="core-checkout core-checkout--page">
+          <div className="core-checkout__empty">
+            <p>Your cart is empty.</p>
+            <Link href={href('/')} className="core-checkout__back-link">Browse products</Link>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="core-checkout core-checkout--page">
+        <div className="core-checkout__page-grid">
+          {/* Left pane: white — form */}
+          <div className="core-checkout__page-form">
+            <div className="core-checkout__page-header">
+              <Link href={href('/')} className="core-checkout__back">
+                <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" width="14" height="14">
+                  <path d="M10 13L5 8l5-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+                Continue shopping
+              </Link>
+            </div>
+            <CheckoutContactSection />
+            <section className="core-checkout__section">
+              <h3 className="core-checkout__section-title">How you&apos;ll get it</h3>
+              {deliveryModes}
+            </section>
+            {shippingZonePicker ? (
+              <section className="core-checkout__section">
+                <h3 className="core-checkout__section-title">Shipping zone</h3>
+                {shippingZonePicker}
+              </section>
+            ) : null}
+            {addressPicker ? (
+              <section className="core-checkout__section">
+                <h3 className="core-checkout__section-title">Delivery address</h3>
+                {addressPicker}
+              </section>
+            ) : null}
+            {deliverySourcePicker ? (
+              <section className="core-checkout__section">
+                {deliverySourcePicker}
+              </section>
+            ) : null}
+            {schedulePicker ? (
+              <section className="core-checkout__section">
+                <h3 className="core-checkout__section-title">Schedule</h3>
+                {schedulePicker}
+              </section>
+            ) : null}
+            <section className="core-checkout__section">
+              <h3 className="core-checkout__payment-title">Payment</h3>
+              <p className="core-checkout__payment-subtitle">All transactions are secure and encrypted.</p>
+              {paymentPicker}
+            </section>
+            <section className="core-checkout__section">
+              {noteInputs}
+            </section>
+            <PolicyLinks policies={policies} />
+          </div>
+
+          {/* Right pane: off-white — order summary */}
+          <div className="core-checkout__page-summary">
+            <div className="core-checkout__summary-card">
+              <h3 className="core-checkout__section-title">Order summary</h3>
+              {cartItems}
+              <div className="core-checkout__summary-promo">{promoInput}</div>
+              <div className="core-checkout__summary-fees">{feesBreakdown}</div>
+              {deliveryMessage ? (
+                <div className={`core-checkout__delivery-message core-checkout__delivery-message--${deliveryMessage.type}`}>
+                  {deliveryMessage.message}
+                </div>
+              ) : null}
+              <div className="core-checkout__actions">{submitButton}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Panel / modal mode (original tab behavior)
+  return (
+    <div className="core-checkout">
+      <div className="core-checkout__tabs">
+        <button
+          type="button"
+          className={`core-checkout__tab${activeTab === 'summary' ? ' is-active' : ''}`}
+          onClick={() => onTabChange('summary')}
+        >
+          Summary {totalCount > 0 ? `(${totalCount})` : ''}
+        </button>
+        <button
+          type="button"
+          className={`core-checkout__tab${activeTab === 'checkout' ? ' is-active' : ''}`}
+          onClick={() => onTabChange('checkout')}
+          disabled={totalCount === 0}
+        >
+          Checkout
+        </button>
+      </div>
+
+      {activeTab === 'summary' ? (
+        <div className="core-checkout__summary">
+          {totalCount === 0 ? (
+            <div className="core-checkout__empty"><p>Your cart is empty</p></div>
+          ) : (
+            <>
+              {cartItems}
+              <div className="core-checkout__summary-footer">
+                <div className="core-checkout__subtotal">
+                  <span>Subtotal</span>
+                  <span>{formatMoney(subtotal, currency)}</span>
+                </div>
+                <button type="button" className="core-submit-btn" onClick={() => onTabChange('checkout')}>
+                  Proceed to checkout
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      ) : (
+        <div className="core-checkout__form">
+          <section className="core-checkout__section">{deliveryModes}</section>
+          {shippingZonePicker ? <section className="core-checkout__section">{shippingZonePicker}</section> : null}
+          {addressPicker ? <section className="core-checkout__section">{addressPicker}</section> : null}
+          {deliverySourcePicker ? <section className="core-checkout__section">{deliverySourcePicker}</section> : null}
+          {schedulePicker ? <section className="core-checkout__section">{schedulePicker}</section> : null}
+          <section className="core-checkout__section">{paymentPicker}</section>
+          <section className="core-checkout__section">{noteInputs}</section>
+          <section className="core-checkout__section">{promoInput}</section>
+          <section className="core-checkout__section">{feesBreakdown}</section>
+          {deliveryMessage ? (
+            <div className={`core-checkout__delivery-message core-checkout__delivery-message--${deliveryMessage.type}`}>
+              {deliveryMessage.message}
+            </div>
+          ) : null}
+          <div className="core-checkout__actions">{submitButton}</div>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/checkout/policy-links.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { useEffect, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import Link from 'next/link';
+import type { Page } from '../../types/page';
+import { useHref } from '../../hooks/use-href';
+import { usePolicyModalStore } from '../../stores/policy-modal-store';
+import { PageRenderer } from '../../page-renderer';
+
+/**
+ * Checkout-footer policy links (refund, shipping, privacy, terms — whatever
+ * the vendor has published). Clicking opens the policy content inline in a
+ * modal instead of navigating away from checkout; the modal still links to
+ * the real `/[vendor]/[slug]` page for the full read.
+ */
+// SSR-safe "has this hydrated on the client yet" check for the portal target
+// (document.body doesn't exist during SSR) — no subscription needed, the
+// snapshot just flips once from the server render to the client render.
+function subscribeNoop(): () => void {
+  return () => {};
+}
+
+export function PolicyLinks({ policies }: { policies: Page[] }): JSX.Element | null {
+  const activeSlug = usePolicyModalStore((s) => s.activeSlug);
+  const open = usePolicyModalStore((s) => s.open);
+  const close = usePolicyModalStore((s) => s.close);
+  const href = useHref();
+  const mounted = useSyncExternalStore(subscribeNoop, () => true, () => false);
+
+  const active = policies.find((p) => p.slug === activeSlug) ?? null;
+
+  useEffect(() => {
+    if (!active) return;
+    const onKey = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') close();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [active, close]);
+
+  if (policies.length === 0) return null;
+
+  // Portaled to document.body — this component renders inline among the
+  // checkout form's sections (width-capped by `.core-checkout__page-form > *`),
+  // and a plain nested overlay would inherit that constraint instead of
+  // covering the viewport. A portal makes the modal immune to whatever
+  // ancestor layout the page around it does, now or later.
+  const modal = active && mounted
+    ? createPortal(
+      <div className="core-policy-modal__overlay" role="presentation" onClick={close}>
+        <div
+          className="core-policy-modal"
+          role="dialog"
+          aria-modal="true"
+          aria-label={active.title}
+          onClick={(event) => event.stopPropagation()}
+        >
+          <div className="core-policy-modal__head">
+            <h2 className="core-policy-modal__title">{active.title}</h2>
+            <button type="button" className="core-policy-modal__close" aria-label="Close" onClick={close}>
+              <svg width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+                <path d="M5 5l10 10M15 5L5 15" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+              </svg>
+            </button>
+          </div>
+          <div className="core-policy-modal__body">
+            <PageRenderer blocks={active.content} />
+          </div>
+          <div className="core-policy-modal__foot">
+            <Link href={href(`/${active.slug}`)} className="core-policy-modal__full-link" onClick={close}>
+              View full page
+            </Link>
+          </div>
+        </div>
+      </div>,
+      document.body,
+    )
+    : null;
+
+  return (
+    <>
+      <nav className="core-checkout-policies" aria-label="Store policies">
+        {policies.map((policy) => (
+          <button
+            key={policy.id}
+            type="button"
+            className="core-checkout-policies__link"
+            onClick={() => open(policy.slug)}
+          >
+            {policy.title}
+          </button>
+        ))}
+      </nav>
+      {modal}
+    </>
+  );
+}