@vitrine-kit/vitrine 0.3.0 → 0.4.0

package/kit/templates/base/files/.claude/commands/setup.md

@@ -0,0 +1,15 @@
+---
+description: First-time project setup — dependencies, env, start the dev server
+---
+
+Bring this Vitrine project up locally. Work step by step, stop on errors:
+
+1. Check Node >= 20 (`node -v`). If lower, ask to upgrade (Node 20 LTS).
+2. `pnpm install` (the `@vitrine-kit/*` packages are public on npm — no token needed).
+3. If there's no `.env` — `cp .env.example .env`. Go through the keys and suggest what to fill in
+   (production requires a real `DATABASE_URL`; dev has a SQLite fallback).
+4. Start the dev server; see `README.md` for backend specifics:
+   - Payload: `pnpm dev` → storefront `http://localhost:3000`, admin `/admin`.
+   - Vendure: `pnpm vendure` (Shop API on :3001, separate terminal) + `pnpm dev` (:3000).
+5. Make sure the page opens. Briefly report the status and the next step
+   (`/design` for branding or `/add-feature` for features).

package/kit/templates/base/files/.claude/commands/update.md

@@ -0,0 +1,16 @@
+---
+description: Update Vitrine features (kit update → diff → update → doctor)
+argument-hint: [feature]
+---
+
+Update features from the registry while keeping the client's edits:
+
+1. `vitrine kit update` — refresh the local registry/templates cache from GitHub
+   (needs `gh` and `tar`; cache in `~/.vitrine`).
+2. `vitrine kit status` — see what's newer than what's installed.
+3. `vitrine diff $ARGUMENTS` — preview changes without writing (for each feature being updated).
+4. `vitrine update $ARGUMENTS` — 3-way merge (base = your snapshot in `.vitrine/originals/`).
+   Without an argument it updates all features.
+5. If the merge produced conflicts — open the files with git markers (`<<<<<<<` / `=======` / `>>>>>>>`),
+   resolve them by hand, keeping both the client's edit and the new version from the registry.
+6. `vitrine doctor` — check consistency. Run `pnpm build` and report the result.

package/kit/templates/base/files/AGENTS.md

@@ -0,0 +1,20 @@
+# AGENTS.md
+
+This project is a storefront built on **Vitrine** (an agentic starter kit). The canonical guide for
+the AI agent and the full CLI command reference live in [`CLAUDE.md`](./CLAUDE.md). Read it
+before working.
+
+In short:
+
+- All starter-kit operations go through the `vitrine` CLI (`add` / `remove` / `list` /
+  `update` / `diff` / `doctor` / `kit update` / `design apply`), not manual edits.
+  The full command table is in `CLAUDE.md`.
+- **Don't edit generated/managed files** (`lib/slots.ts`, `lib/payments.ts`,
+  `lib/blueprint.ts`, the managed regions of `site.config.ts`, `vitrine.json`, the feature table in
+  `CLAUDE.md`, `.env*`) — the CLI overwrites them from state.
+- **Design = token values only** in `theme/client.css` (via `vitrine design apply`):
+  don't touch logic/data/routing/component structure.
+- **The user makes commits** — don't commit without an explicit request.
+
+Ready-made flows for Claude Code are the slash commands in [`.claude/commands/`](./.claude/commands)
+(`/setup`, `/add-feature`, `/design`, `/update`, `/doctor`).

package/kit/templates/base/files/app/(frontend)/categories/[slug]/page.tsx

@@ -0,0 +1,28 @@
+// Category listing. Filtered by category slug via the CatalogSource contract.
+import { notFound } from 'next/navigation';
+import { Slot } from '@vitrine-kit/core/react';
+import { getCatalogSource } from '@/lib/adapter';
+import { loadCategories, loadProducts } from '@/lib/catalog/data';
+import { ProductGrid } from '@/components/catalog/ProductGrid';
+
+interface PageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export default async function CategoryPage({ params }: PageProps) {
+  const { slug } = await params;
+  const source = await getCatalogSource();
+  const category = (await loadCategories(source)).find((c) => c.slug === slug);
+  if (!category) notFound();
+
+  const products = await loadProducts(source, { category: slug });
+
+  return (
+    <div className="flex flex-col gap-section">
+      <Slot name="category.header" category={category} />
+      <h1 className="font-heading text-fg">{category.title}</h1>
+      <ProductGrid products={products} />
+      <Slot name="category.below-products" />
+    </div>
+  );
+}

package/kit/templates/base/files/app/(frontend)/layout.tsx

@@ -0,0 +1,32 @@
+// Root storefront layout (route group (frontend)). The Payload admin lives in
+// its own route group (payload) with its own layout — so there's no root app/layout,
+// and each group renders its own <html> (the Payload 3 + Next pattern).
+import type { ReactNode } from 'react';
+import type { Metadata } from 'next';
+import '../globals.css';
+import { siteConfig } from '@/site.config';
+import { registerSlots } from '@/lib/slots';
+import { Slot } from '@vitrine-kit/core/react';
+import { SiteHeader } from '@/components/layout/SiteHeader';
+import { SiteFooter } from '@/components/layout/SiteFooter';
+
+// Register installed features' slots (lib/slots.ts is generated by the CLI).
+registerSlots();
+
+export const metadata: Metadata = {
+  title: { default: 'Vitrine', template: '%s · Vitrine' },
+};
+
+export default function FrontendLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang={siteConfig.i18n.defaultLocale}>
+      <body className="min-h-screen bg-bg font-sans text-fg antialiased">
+        <Slot name="global.banner-top" />
+        <SiteHeader />
+        <main className="mx-auto w-full max-w-container px-gutter py-section">{children}</main>
+        <SiteFooter />
+        <Slot name="global.body-end" />
+      </body>
+    </html>
+  );
+}

package/kit/templates/base/files/app/(frontend)/page.tsx

@@ -0,0 +1,27 @@
+// Storefront home: catalog listing. Data via the CatalogSource contract
+// (backend-agnostic); the grid is the catalog feature's component.
+import { Slot } from '@vitrine-kit/core/react';
+import { getCatalogSource } from '@/lib/adapter';
+import { loadProducts } from '@/lib/catalog/data';
+import { ProductGrid } from '@/components/catalog/ProductGrid';
+
+export default async function HomePage() {
+  const source = await getCatalogSource();
+  const products = await loadProducts(source, { perPage: 12 });
+
+  return (
+    <div className="flex flex-col gap-section">
+      <Slot name="home.hero" />
+      <section aria-labelledby="catalog-heading" className="flex flex-col gap-gutter">
+        <h1 id="catalog-heading" className="font-heading text-fg">
+          Catalog
+        </h1>
+        <Slot name="catalog.grid-top" />
+        <ProductGrid products={products} />
+        <Slot name="catalog.grid-bottom" />
+      </section>
+      <Slot name="home.sections" />
+      <Slot name="home.bottom" />
+    </div>
+  );
+}

package/kit/templates/base/files/app/(frontend)/products/[slug]/page.tsx

@@ -0,0 +1,43 @@
+// Product page. ProductView (the product-page feature) hosts the product.* slots.
+// Metadata and JSON-LD come from the seo feature.
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { getCatalogSource } from '@/lib/adapter';
+import { loadProduct } from '@/lib/catalog/data';
+import { ProductView } from '@/components/product/ProductView';
+import { buildProductMetadata } from '@/lib/seo/metadata';
+import { productJsonLd } from '@/lib/seo/jsonld';
+import { JsonLd } from '@/components/seo/JsonLd';
+import { baseUrl } from '@/lib/site';
+
+interface PageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const source = await getCatalogSource();
+  const product = await loadProduct(source, slug);
+  if (!product) return {};
+  const meta = buildProductMetadata(product, { baseUrl });
+  return {
+    title: meta.title,
+    description: meta.description,
+    alternates: meta.canonical ? { canonical: meta.canonical } : undefined,
+    openGraph: meta.openGraph,
+  };
+}
+
+export default async function ProductPage({ params }: PageProps) {
+  const { slug } = await params;
+  const source = await getCatalogSource();
+  const product = await loadProduct(source, slug);
+  if (!product) notFound();
+
+  return (
+    <>
+      <JsonLd data={productJsonLd(product, { baseUrl })} />
+      <ProductView product={product} />
+    </>
+  );
+}

package/kit/templates/base/files/app/globals.css

@@ -0,0 +1,6 @@
+/* The client's token values are set by the design step (vitrine design apply). */
+@import '../theme/client.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/kit/templates/base/files/components/layout/SiteFooter.tsx

@@ -0,0 +1,15 @@
+// Storefront footer. Hosts the global.footer slot.
+import { Slot } from '@vitrine-kit/core/react';
+
+export function SiteFooter() {
+  return (
+    <footer className="mt-section border-t border-border">
+      <div className="mx-auto max-w-container px-gutter py-section text-muted-fg">
+        <Slot
+          name="global.footer"
+          fallback={<p>© {new Date().getFullYear()}</p>}
+        />
+      </div>
+    </footer>
+  );
+}

package/kit/templates/base/files/components/layout/SiteHeader.tsx

@@ -0,0 +1,23 @@
+// Storefront header. Hosts the global.header-nav slot (where the catalog feature's
+// CategoryNav mounts) and passes it categories from the active CatalogSource.
+import { Slot } from '@vitrine-kit/core/react';
+import { getCatalogSource } from '@/lib/adapter';
+
+export async function SiteHeader() {
+  const source = await getCatalogSource();
+  const categories = await source.listCategories();
+
+  return (
+    <header className="border-b border-border">
+      <div className="mx-auto flex max-w-container items-center justify-between gap-gutter px-gutter py-unit">
+        <a href="/" className="font-heading text-fg">
+          <Slot name="global.header-start" fallback={<span>Vitrine</span>} />
+        </a>
+        <Slot name="global.header-nav" categories={categories} />
+        <div className="flex items-center gap-unit">
+          <Slot name="global.header-actions" />
+        </div>
+      </div>
+    </header>
+  );
+}

package/kit/templates/base/files/design/README.md

@@ -0,0 +1,9 @@
+# /design — export from Claude Design
+
+Drop your design export here (React/HTML/CSS, tokens, screenshots) and run
+`vitrine design apply`. The AI step reads this folder and the instruction from `CLAUDE.md`,
+then sets **only the token values** in `theme/client.css` (palette, typography, spacing, radii,
+shadows).
+
+This folder is isolated from behavior: its contents don't affect logic, data, routing, or a11y —
+only the look, via tokens. Re-running the design step is safe.

package/kit/templates/base/files/lib/site.ts

@@ -0,0 +1,10 @@
+// Aggregated site parameters from site.config + env. Safe to import on both
+// the server and the client (public values only).
+import { siteConfig } from '@/site.config';
+
+/** Base URL for canonical/OG. Overridden by NEXT_PUBLIC_SITE_URL. */
+export const baseUrl = process.env.NEXT_PUBLIC_SITE_URL ?? 'http://localhost:3000';
+
+export const currency = siteConfig.i18n.currency;
+export const defaultLocale = siteConfig.i18n.defaultLocale;
+export const locales = siteConfig.i18n.locales;

package/kit/templates/base/files/next.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+};
+
+// backend-payload overwrites this file (wraps it in withPayload).
+export default nextConfig;

package/kit/templates/base/files/postcss.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('postcss-load-config').Config} */
+export default {
+  plugins: {
+    'tailwindcss': {},
+    'autoprefixer': {},
+  },
+};

package/kit/templates/base/files/tailwind.config.ts

@@ -0,0 +1,13 @@
+// The client's Tailwind: the Vitrine preset maps classes to the token contract's
+// CSS variables (--vt-*). The variable values live in theme/client.css (design step).
+import type { Config } from 'tailwindcss';
+import { vitrinePreset } from '@vitrine-kit/contracts';
+
+export default {
+  presets: [vitrinePreset as Partial<Config>],
+  content: [
+    './app/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './lib/**/*.{ts,tsx}',
+  ],
+} satisfies Config;

package/kit/templates/base/files/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "preserve",
+    "strict": true,
+    "noEmit": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "incremental": true,
+    "baseUrl": ".",
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./*"],
+      "@payload-config": ["./payload.config.ts"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules", ".vitrine"]
+}

package/kit/templates/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "//": "We typecheck only the pure template files (contracts + node) — the zero-config critical logic and the mappers. Files that import Next/Payload are checked when the client is instantiated (the stack is installed there).",
+  "include": [
+    "backend-payload/files/lib/adapter/db-decision.ts",
+    "backend-payload/files/lib/adapter/db-ping.ts",
+    "backend-payload/files/lib/adapter/payload-types.ts",
+    "backend-payload/files/lib/adapter/map.ts",
+    "backend-payload/files/lib/seed/demo.ts",
+    "backend-payload/files/lib/seed/guards.ts",
+    "backend-vendure/files/lib/adapter/vendure-types.ts",
+    "backend-vendure/files/lib/adapter/map.ts"
+  ]
+}

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@vitrine-kit/vitrine",
-  "version": "0.3.0",
-  "description": "Vitrine CLI — примитив установки фичи, init (визард), add, update, doctor, design apply.",
+  "version": "0.4.0",
+  "description": "Vitrine CLI — feature install primitive, init (wizard), add, update, doctor, design apply.",
   "license": "MIT",
   "type": "module",
   "bin": {
     "vitrine": "./dist/index.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "kit"
   ],
   "publishConfig": {
     "access": "public"
@@ -21,11 +22,11 @@
   "dependencies": {
     "@clack/prompts": "^0.8.2",
     "commander": "^12.1.0",
-    "@vitrine-kit/contracts": "1.1.0"
+    "@vitrine-kit/contracts": "1.2.0"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm --clean",
-    "typecheck": "tsc --noEmit",
+    "build": "node scripts/generate-kit-versions.mjs && tsup src/index.ts --format esm --clean && node scripts/copy-kit.mjs",
+    "typecheck": "node scripts/generate-kit-versions.mjs && tsc --noEmit",
     "test": "vitest run --passWithNoTests"
   }
 }