kaching-cli 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 kaching
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,23 @@
+# kaching CLI
+
+Build a real online store from your terminal — or let your coding agent do it.
+
+```bash
+npx kaching-cli login
+npx kaching-cli create my-store --currency usd
+cd my-store && npm run dev
+```
+
+| Command | What it does |
+| --- | --- |
+| `kaching login` | Approve this machine in the browser (saves an account token) |
+| `kaching create [dir]` | New store + Next.js storefront, keys in `.env.local`, deps installed |
+| `kaching link [store]` | Connect an existing folder to a store you own |
+| `kaching products create --title … --price 25` | Add products (`--variant "M:25:10"`, `--image`, `--type digital --file`) |
+| `kaching products import products.json` | Bulk import (API format, prices in minor units) |
+| `kaching shipping create --name Standard --price 5 --countries US,CA` | Shipping rates |
+| `kaching payments connect` | Link for the owner to finish Stripe onboarding (the one human step) |
+| `kaching orders list` / `orders fulfill <id>` | Orders |
+
+Every command takes `--json` for machine-readable output. Prices on the command line are in normal
+units (`24.90`); the API itself uses minor units (`2490`).

package/assets/sdk.json

@@ -0,0 +1 @@
+{"version":"0.1.0"}

package/assets/template/.env.example

@@ -0,0 +1,4 @@
+# From `kaching create` / the kaching dashboard. Publishable keys are safe in the browser.
+NEXT_PUBLIC_KACHING_PUBLISHABLE_KEY=kc_pk_test_...
+# Defaults to https://kaching.sh/api/v1
+NEXT_PUBLIC_KACHING_API_URL=

package/assets/template/AGENTS.md

@@ -0,0 +1,54 @@
+# kaching storefront
+
+A Next.js store wired to [kaching](https://kaching.sh): products, cart, Stripe checkout, orders and
+digital downloads are handled by the kaching API. This repo is only the storefront — you own every
+line of UI here, so change anything.
+
+## Where things live
+
+| To change…                         | Edit                                                        |
+| ---------------------------------- | ----------------------------------------------------------- |
+| Colors, radius                     | `src/app/globals.css` (`:root` tokens)                      |
+| Fonts                              | `src/app/layout.tsx` (`body` / `heading` next/font imports) |
+| Hero text, announcement bar, footer| `src/store.config.ts`                                       |
+| Home page layout                   | `src/app/page.tsx`                                          |
+| Product page                       | `src/app/products/[slug]/page.tsx`, `src/components/product-form.tsx` |
+| Cart drawer                        | `src/components/cart-drawer.tsx`                            |
+| Order confirmation                 | `src/components/order-confirmation.tsx`                     |
+
+Components use semantic Tailwind colors only (`bg-background`, `text-muted`, `border-border`,
+`bg-accent`, `text-sale`, `rounded-card`, `font-display`). Keep it that way so the theme stays in one place.
+
+## Data
+
+- **Server components** read the catalog with `src/lib/kaching.ts` (`getStore`, `getProducts`, `getProduct`).
+- **Client components** use `@kaching.sh/react`: `useCart()` (cart + `addItem`/`updateItem`/`removeItem`/`checkout`,
+  drawer `isOpen`/`open`/`close`) and `useOrder(sessionId)` on the success page.
+- Money is always an integer in minor units. Format with `formatMoney(amount, currency)`.
+- Store name, currency and products come from kaching — don't hardcode them. Change products with the
+  kaching CLI/MCP (or `@kaching.sh/sdk` with the secret key), not in this repo.
+
+## Rules
+
+- Only the **publishable** key (`kc_pk_...`) belongs here. Never put a secret key (`kc_sk_...`) in this repo
+  or in any `NEXT_PUBLIC_` variable.
+- Don't mark orders paid or fulfil anything from the success page — kaching does that from Stripe webhooks.
+- Checkout returns to `/checkout/success?session_id=...`. Keep that route (or pass `successPath` to
+  `KachingProvider` in `src/components/providers.tsx`).
+
+## Env
+
+```
+NEXT_PUBLIC_KACHING_PUBLISHABLE_KEY=kc_pk_...
+NEXT_PUBLIC_KACHING_API_URL=            # optional, defaults to https://kaching.sh/api/v1
+```
+
+<!-- BEGIN:nextjs-agent-rules -->
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
+<!-- END:nextjs-agent-rules -->

package/assets/template/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/assets/template/README.md

@@ -0,0 +1,11 @@
+# Storefront
+
+Built with [kaching](https://kaching.sh) — commerce for AI agents.
+
+```bash
+cp .env.example .env.local   # add your publishable key
+pnpm install
+pnpm dev                     # http://localhost:3001
+```
+
+Customize the look in `src/app/globals.css` and `src/store.config.ts`. See `AGENTS.md` for the map.

package/assets/template/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/assets/template/gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+!.env.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

package/assets/template/next.config.ts

@@ -0,0 +1,10 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  images: {
+    // Product images are hosted by kaching (Supabase Storage) or wherever the merchant points them.
+    remotePatterns: [{ protocol: "https", hostname: "**" }],
+  },
+};
+
+export default nextConfig;

package/assets/template/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@kaching/storefront-template",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3001",
+    "build": "next build",
+    "start": "next start -p 3001",
+    "lint": "eslint",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "16.3.6",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "@kaching.sh/react": "workspace:*",
+    "@kaching.sh/sdk": "workspace:*"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.3.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  },
+  "packageManager": "pnpm@11.18.0"
+}

package/assets/template/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/assets/template/src/app/checkout/success/page.tsx

@@ -0,0 +1,9 @@
+import { OrderConfirmation } from "@/components/order-confirmation";
+
+export const metadata = { title: "Thank you" };
+
+// Stripe redirects here with ?session_id=cs_... after payment.
+export default async function SuccessPage({ searchParams }: PageProps<"/checkout/success">) {
+  const { session_id } = await searchParams;
+  return <OrderConfirmation sessionId={typeof session_id === "string" ? session_id : null} />;
+}

package/assets/template/src/app/globals.css

@@ -0,0 +1,41 @@
+@import "tailwindcss";
+
+/*
+  Theme tokens — rebrand the whole store by editing these.
+  Components only use these semantic colors (bg-background, text-muted, border-border, ...).
+*/
+:root {
+  --background: #f7f4ef;
+  --foreground: #1f1b16;
+  --muted: #776e64;
+  --surface: #ffffff;
+  --border: #e4ddd3;
+  --accent: #1f1b16;
+  --accent-foreground: #f7f4ef;
+  --sale: #b4442c;
+  --radius: 14px;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-surface: var(--surface);
+  --color-border: var(--border);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-sale: var(--sale);
+  --radius-card: var(--radius);
+  --font-sans: var(--font-body);
+  --font-display: var(--font-heading);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+}
+
+::selection {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}

package/assets/template/src/app/layout.tsx

@@ -0,0 +1,47 @@
+import type { Metadata } from "next";
+import { Geist, Instrument_Serif } from "next/font/google";
+import { CartDrawer } from "@/components/cart-drawer";
+import { Header } from "@/components/header";
+import { Providers } from "@/components/providers";
+import { getStore } from "@/lib/kaching";
+import { storeConfig } from "@/store.config";
+import "./globals.css";
+
+// Fonts: swap these to rebrand. `--font-heading` is used by `font-display`.
+const body = Geist({ variable: "--font-body", subsets: ["latin"] });
+const heading = Instrument_Serif({ variable: "--font-heading", weight: "400", subsets: ["latin"] });
+
+export async function generateMetadata(): Promise<Metadata> {
+  const store = await getStore();
+  return {
+    title: { default: store.name, template: `%s · ${store.name}` },
+    description: storeConfig.hero.subtitle,
+  };
+}
+
+export default async function RootLayout({ children }: LayoutProps<"/">) {
+  const store = await getStore();
+  return (
+    <html lang="en" className={`${body.variable} ${heading.variable} antialiased`}>
+      <body className="flex min-h-dvh flex-col font-sans">
+        <Providers>
+          <Header storeName={store.name} />
+          <main className="flex-1">{children}</main>
+          <footer className="mt-24 border-t border-border">
+            <div className="mx-auto flex max-w-6xl flex-col gap-2 px-4 py-10 text-sm text-muted sm:flex-row sm:justify-between sm:px-6">
+              <p>
+                © {new Date().getFullYear()} {store.name}. {storeConfig.footer.blurb}
+              </p>
+              {store.support_email && (
+                <a href={`mailto:${store.support_email}`} className="hover:text-foreground">
+                  {store.support_email}
+                </a>
+              )}
+            </div>
+          </footer>
+          <CartDrawer />
+        </Providers>
+      </body>
+    </html>
+  );
+}

package/assets/template/src/app/not-found.tsx

@@ -0,0 +1,13 @@
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div className="mx-auto max-w-xl px-4 py-32 text-center">
+      <h1 className="font-display text-5xl">Not found</h1>
+      <p className="mt-4 text-muted">That page or product doesn&apos;t exist.</p>
+      <Link href="/" className="mt-8 inline-block underline underline-offset-4">
+        Back to the shop
+      </Link>
+    </div>
+  );
+}

package/assets/template/src/app/page.tsx

@@ -0,0 +1,37 @@
+import { ProductCard } from "@/components/product-card";
+import { getProducts, getStore } from "@/lib/kaching";
+import { storeConfig } from "@/store.config";
+
+export default async function HomePage() {
+  const [store, products] = await Promise.all([getStore(), getProducts()]);
+  const { hero } = storeConfig;
+
+  return (
+    <>
+      <section className="mx-auto max-w-6xl px-4 pb-16 pt-20 sm:px-6 sm:pt-28">
+        <p className="text-sm uppercase tracking-[0.2em] text-muted">{hero.eyebrow}</p>
+        <h1 className="mt-5 max-w-3xl font-display text-5xl leading-[1.05] tracking-tight sm:text-7xl">{hero.title}</h1>
+        <p className="mt-6 max-w-xl text-lg text-muted">{hero.subtitle}</p>
+      </section>
+
+      <section id="shop" className="mx-auto max-w-6xl scroll-mt-24 px-4 sm:px-6">
+        {products.length === 0 ? (
+          <div className="rounded-card border border-dashed border-border px-6 py-20 text-center text-muted">
+            No products yet. Add some with <code className="text-foreground">kaching products create</code> and they&apos;ll
+            appear here.
+          </div>
+        ) : (
+          <div
+            className={`grid grid-cols-1 gap-x-6 gap-y-12 sm:grid-cols-2 ${
+              storeConfig.gridColumns === 4 ? "lg:grid-cols-4" : "lg:grid-cols-3"
+            }`}
+          >
+            {products.map((product) => (
+              <ProductCard key={product.id} product={product} currency={store.currency} />
+            ))}
+          </div>
+        )}
+      </section>
+    </>
+  );
+}

package/assets/template/src/app/products/[slug]/page.tsx

@@ -0,0 +1,62 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { ProductForm } from "@/components/product-form";
+import { getProduct, getStore } from "@/lib/kaching";
+
+export async function generateMetadata({ params }: PageProps<"/products/[slug]">): Promise<Metadata> {
+  const { slug } = await params;
+  const product = await getProduct(slug);
+  return {
+    title: product.title,
+    description: product.description ?? undefined,
+    openGraph: { images: product.images.slice(0, 1) },
+  };
+}
+
+export default async function ProductPage({ params }: PageProps<"/products/[slug]">) {
+  const { slug } = await params;
+  const [store, product] = await Promise.all([getStore(), getProduct(slug)]);
+  const [cover, ...rest] = product.images;
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 pt-8 sm:px-6">
+      <Link href="/" className="text-sm text-muted hover:text-foreground">
+        ← All products
+      </Link>
+
+      <div className="mt-6 grid gap-10 lg:grid-cols-[1.1fr_1fr] lg:gap-16">
+        <div className="space-y-4">
+          <div className="relative aspect-[4/5] overflow-hidden rounded-card bg-surface">
+            {cover ? (
+              <Image src={cover} alt={product.title} fill priority sizes="(min-width: 1024px) 55vw, 100vw" className="object-cover" />
+            ) : (
+              <div className="grid h-full place-items-center font-display text-8xl text-muted/60">{product.title[0]}</div>
+            )}
+          </div>
+          {rest.length > 0 && (
+            <div className="grid grid-cols-2 gap-4">
+              {rest.map((src) => (
+                <div key={src} className="relative aspect-square overflow-hidden rounded-card bg-surface">
+                  <Image src={src} alt="" fill sizes="(min-width: 1024px) 27vw, 50vw" className="object-cover" />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="lg:sticky lg:top-28 lg:self-start">
+          <h1 className="font-display text-4xl leading-tight sm:text-5xl">{product.title}</h1>
+          <div className="mt-6">
+            <ProductForm product={product} currency={store.currency} />
+          </div>
+          {product.description && (
+            <div className="mt-10 whitespace-pre-line border-t border-border pt-8 leading-relaxed text-muted">
+              {product.description}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/assets/template/src/components/cart-button.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useCart } from "@kaching.sh/react";
+
+export function CartButton() {
+  const { cart, open } = useCart();
+  const count = cart?.item_count ?? 0;
+  return (
+    <button
+      type="button"
+      onClick={open}
+      className="flex items-center gap-2 rounded-full border border-border px-4 py-2 text-sm transition-colors hover:border-foreground"
+      aria-label={`Open cart, ${count} item${count === 1 ? "" : "s"}`}
+    >
+      Cart
+      <span className="grid h-5 min-w-5 place-items-center rounded-full bg-accent px-1.5 text-xs text-accent-foreground tabular-nums">
+        {count}
+      </span>
+    </button>
+  );
+}

package/assets/template/src/components/cart-drawer.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { formatMoney, useCart } from "@kaching.sh/react";
+import Link from "next/link";
+import { useEffect } from "react";
+
+export function CartDrawer() {
+  const { cart, isOpen, close, updateItem, removeItem, checkout, pending, error } = useCart();
+  const items = cart?.items ?? [];
+
+  // Close on Escape, lock page scroll while open.
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && close();
+    document.addEventListener("keydown", onKey);
+    const overflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = overflow;
+    };
+  }, [isOpen, close]);
+
+  return (
+    <div className={`fixed inset-0 z-50 ${isOpen ? "" : "pointer-events-none"}`} inert={!isOpen}>
+      <div
+        onClick={close}
+        className={`absolute inset-0 bg-foreground/30 transition-opacity duration-300 ${isOpen ? "opacity-100" : "opacity-0"}`}
+      />
+      <aside
+        role="dialog"
+        aria-label="Shopping cart"
+        className={`absolute right-0 top-0 flex h-full w-full max-w-md flex-col bg-background transition-transform duration-300 ease-out ${
+          isOpen ? "translate-x-0 shadow-2xl" : "translate-x-full"
+        }`}
+      >
+        <div className="flex items-center justify-between border-b border-border px-6 py-5">
+          <h2 className="font-display text-2xl">Your cart</h2>
+          <button type="button" onClick={close} className="text-sm text-muted hover:text-foreground">
+            Close
+          </button>
+        </div>
+
+        {items.length === 0 ? (
+          <div className="flex flex-1 flex-col items-center justify-center gap-4 px-6 text-center">
+            <p className="text-muted">Your cart is empty.</p>
+            <button type="button" onClick={close} className="text-sm underline underline-offset-4">
+              Keep shopping
+            </button>
+          </div>
+        ) : (
+          <>
+            <ul className="flex-1 divide-y divide-border overflow-y-auto px-6">
+              {items.map((item) => (
+                <li key={item.id} className="flex gap-4 py-5">
+                  <Link
+                    href={`/products/${item.product_slug}`}
+                    onClick={close}
+                    className="h-24 w-20 shrink-0 overflow-hidden rounded-[calc(var(--radius)*0.6)] bg-surface"
+                  >
+                    {item.image ? (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img src={item.image} alt="" className="h-full w-full object-cover" />
+                    ) : (
+                      <div className="grid h-full place-items-center font-display text-2xl text-muted">{item.title[0]}</div>
+                    )}
+                  </Link>
+                  <div className="flex min-w-0 flex-1 flex-col">
+                    <div className="flex justify-between gap-3">
+                      <div className="min-w-0">
+                        <p className="truncate font-medium">{item.title}</p>
+                        {item.variant_title && <p className="text-sm text-muted">{item.variant_title}</p>}
+                        {!item.available && <p className="text-sm text-sale">No longer available in this quantity</p>}
+                      </div>
+                      <p className="shrink-0 tabular-nums">{formatMoney(item.line_total, cart!.currency)}</p>
+                    </div>
+                    <div className="mt-auto flex items-center justify-between pt-3">
+                      <div className="flex items-center rounded-full border border-border">
+                        <button
+                          type="button"
+                          disabled={pending}
+                          onClick={() => updateItem(item.variant_id, item.quantity - 1)}
+                          className="h-8 w-8 text-muted hover:text-foreground disabled:opacity-40"
+                          aria-label="Decrease quantity"
+                        >
+                          −
+                        </button>
+                        <span className="w-6 text-center text-sm tabular-nums">{item.quantity}</span>
+                        <button
+                          type="button"
+                          disabled={pending}
+                          onClick={() => updateItem(item.variant_id, item.quantity + 1)}
+                          className="h-8 w-8 text-muted hover:text-foreground disabled:opacity-40"
+                          aria-label="Increase quantity"
+                        >
+                          +
+                        </button>
+                      </div>
+                      <button
+                        type="button"
+                        disabled={pending}
+                        onClick={() => removeItem(item.variant_id)}
+                        className="text-sm text-muted underline-offset-4 hover:text-foreground hover:underline"
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+
+            <div className="space-y-4 border-t border-border px-6 py-6">
+              {error && <p className="text-sm text-sale">{error.message}</p>}
+              <div className="flex justify-between text-lg">
+                <span>Subtotal</span>
+                <span className="tabular-nums">{formatMoney(cart!.subtotal, cart!.currency)}</span>
+              </div>
+              <p className="text-sm text-muted">
+                {cart!.requires_shipping ? "Shipping and taxes calculated at checkout." : "Taxes calculated at checkout."}
+              </p>
+              <button
+                type="button"
+                disabled={pending}
+                onClick={() => checkout()}
+                className="w-full rounded-full bg-accent py-4 text-accent-foreground transition-opacity hover:opacity-90 disabled:opacity-60"
+              >
+                {pending ? "One moment…" : "Checkout"}
+              </button>
+            </div>
+          </>
+        )}
+      </aside>
+    </div>
+  );
+}

package/assets/template/src/components/header.tsx

@@ -0,0 +1,26 @@
+import Link from "next/link";
+import { storeConfig } from "@/store.config";
+import { CartButton } from "./cart-button";
+
+export function Header({ storeName }: { storeName: string }) {
+  return (
+    <header className="sticky top-0 z-30 border-b border-border bg-background/85 backdrop-blur">
+      {storeConfig.announcement && (
+        <p className="bg-accent px-4 py-1.5 text-center text-xs tracking-wide text-accent-foreground">
+          {storeConfig.announcement}
+        </p>
+      )}
+      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4 sm:px-6">
+        <Link href="/" className="font-display text-2xl leading-none tracking-tight">
+          {storeName}
+        </Link>
+        <nav className="flex items-center gap-6 text-sm">
+          <Link href="/#shop" className="hidden text-muted transition-colors hover:text-foreground sm:block">
+            Shop
+          </Link>
+          <CartButton />
+        </nav>
+      </div>
+    </header>
+  );
+}