@tower_74/cms-app 0.5.0 → 0.6.0

package/package.json

@@ -1,51 +1,51 @@
 {
-  "name": "@tower_74/cms-app",
-  "version": "0.5.0",
-  "description": "Front-end app shell for the Base CMS — Inertia/Vue pages, layouts, components and composables. Ships source; consumed by client sites as a versioned dependency (ADR-0023) and overridable per site.",
-  "type": "module",
-  "license": "UNLICENSED",
-  "private": false,
-  "files": [
-    "src"
-  ],
-  "exports": {
-    ".": "./src/index.ts",
-    "./pages": "./src/pages.ts"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/JMancuso79/cms-app.git"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "scripts": {
-    "lint": "eslint . --fix",
-    "format": "prettier --write src/",
-    "format:check": "prettier --check src/"
-  },
-  "peerDependencies": {
-    "@inertiajs/vue3": "^2.0.0-beta.3",
-    "@tower_74/cms-ui": "^0.13.0",
-    "@vueuse/core": "^12.0.0",
-    "laravel-vite-plugin": "^1.0",
-    "lucide-vue-next": "^0.468.0",
-    "pinia": "^3.0.4",
-    "radix-vue": "^1.9.11",
-    "vue": "^3.5.13",
-    "ziggy-js": "^2.4.2"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.19.0",
-    "@vue/eslint-config-typescript": "^14.3.0",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-vue": "^9.32.0",
-    "prettier": "^3.4.2",
-    "prettier-plugin-organize-imports": "^4.3.0",
-    "typescript": "^5.2.2",
-    "typescript-eslint": "^8.23.0",
-    "vue": "^3.5.13",
-    "vue-tsc": "^3.3.5"
-  }
+    "name": "@tower_74/cms-app",
+    "version": "0.6.0",
+    "description": "Front-end app shell for the Base CMS — Inertia/Vue pages, layouts, components and composables. Ships source; consumed by client sites as a versioned dependency (ADR-0023) and overridable per site.",
+    "type": "module",
+    "license": "UNLICENSED",
+    "private": false,
+    "files": [
+        "src"
+    ],
+    "exports": {
+        ".": "./src/index.ts",
+        "./pages": "./src/pages.ts"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/JMancuso79/cms-app.git"
+    },
+    "engines": {
+        "node": ">=18"
+    },
+    "scripts": {
+        "lint": "eslint . --fix",
+        "format": "prettier --write src/",
+        "format:check": "prettier --check src/"
+    },
+    "peerDependencies": {
+        "@inertiajs/vue3": "^2.0.0-beta.3",
+        "@tower_74/cms-ui": "^0.13.0",
+        "@vueuse/core": "^12.0.0",
+        "laravel-vite-plugin": "^1.0",
+        "lucide-vue-next": "^0.468.0",
+        "pinia": "^3.0.4",
+        "radix-vue": "^1.9.11",
+        "vue": "^3.5.13",
+        "ziggy-js": "^2.4.2"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.19.0",
+        "@vue/eslint-config-typescript": "^14.3.0",
+        "eslint": "^9.17.0",
+        "eslint-config-prettier": "^10.0.1",
+        "eslint-plugin-vue": "^9.32.0",
+        "prettier": "^3.4.2",
+        "prettier-plugin-organize-imports": "^4.3.0",
+        "typescript": "^5.2.2",
+        "typescript-eslint": "^8.23.0",
+        "vue": "^3.5.13",
+        "vue-tsc": "^3.3.5"
+    }
 }

package/src/layouts/AdminLayout.vue

@@ -18,23 +18,7 @@ import {
 } from '@/components/ui/sidebar';
 import { pluginIcons } from '@/plugins';
 import { Link, usePage } from '@inertiajs/vue3';
-import {
-    Box,
-    FileStack,
-    FileText,
-    Folder,
-    Image,
-    Inbox,
-    LayoutGrid,
-    ListOrdered,
-    Menu,
-    Paintbrush,
-    Puzzle,
-    Settings,
-    ShoppingBag,
-    Tag,
-    Users,
-} from 'lucide-vue-next';
+import { Box, FileStack, FileText, Folder, Image, Inbox, LayoutGrid, Menu, Paintbrush, Puzzle, Settings, Tag, Users } from 'lucide-vue-next';
 import { type Component, computed, ref, watch } from 'vue';
 
 interface NavItem {
@@ -54,8 +38,6 @@ const nav: NavItem[] = [
     { label: 'Tags', href: '/admin/taxonomy/post_tag', icon: Tag, permission: 'taxonomy' },
     { label: 'Media', href: '/admin/media', icon: Image, permission: 'media' },
     { label: 'Forms', href: '/admin/forms', icon: Inbox, permission: 'forms' },
-    { label: 'Products', href: '/admin/commerce/products', icon: ShoppingBag, permission: 'products' },
-    { label: 'Orders', href: '/admin/commerce/orders', icon: ListOrdered, permission: 'orders' },
     { label: 'Menus', href: '/admin/menus', icon: Menu, permission: 'menus' },
     { label: 'Users', href: '/admin/users', icon: Users, permission: 'users' },
     { label: 'Theme', href: '/admin/appearance/theme', icon: Paintbrush, permission: 'theme' },

package/src/components/commerce/OptionsEditor.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { Button, Input } from '@tower_74/cms-ui';
-
-interface Option {
-    name: string;
-    values: string[];
-}
-
-const props = defineProps<{ modelValue: Option[] }>();
-const emit = defineEmits<{ 'update:modelValue': [value: Option[]] }>();
-
-const commit = (options: Option[]) => emit('update:modelValue', options);
-
-const add = () => commit([...props.modelValue, { name: '', values: [] }]);
-const remove = (i: number) => {
-    const options = [...props.modelValue];
-    options.splice(i, 1);
-    commit(options);
-};
-const setName = (i: number, name: string) => {
-    const options = [...props.modelValue];
-    options[i] = { ...options[i], name };
-    commit(options);
-};
-const setValues = (i: number, csv: string) => {
-    const options = [...props.modelValue];
-    options[i] = {
-        ...options[i],
-        values: csv
-            .split(',')
-            .map((s) => s.trim())
-            .filter(Boolean),
-    };
-    commit(options);
-};
-const valuesText = (option: Option) => option.values.join(', ');
-</script>
-
-<template>
-    <div class="space-y-3">
-        <div v-for="(option, i) in modelValue" :key="i" class="flex items-end gap-2 rounded-lg border border-border bg-background p-3">
-            <div class="w-48">
-                <label class="mb-1 block text-xs font-medium text-muted">Option</label>
-                <Input :model-value="option.name" placeholder="Size" @update:model-value="setName(i, $event)" />
-            </div>
-            <div class="flex-1">
-                <label class="mb-1 block text-xs font-medium text-muted">Values (comma-separated)</label>
-                <Input :model-value="valuesText(option)" placeholder="S, M, L" @update:model-value="setValues(i, $event)" />
-            </div>
-            <Button type="button" variant="danger" size="sm" @click="remove(i)">✕</Button>
-        </div>
-
-        <Button type="button" variant="secondary" @click="add">Add option</Button>
-    </div>
-</template>

package/src/components/commerce/VariantsEditor.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { Button, Input, Select } from '@tower_74/cms-ui';
-
-interface Option {
-    name: string;
-    values: string[];
-}
-interface Variant {
-    sku: string;
-    price: string;
-    stock: number | string;
-    options: Record<string, string>;
-}
-
-const props = defineProps<{ modelValue: Variant[]; options: Option[]; currencySymbol: string }>();
-const emit = defineEmits<{ 'update:modelValue': [value: Variant[]] }>();
-
-const commit = (variants: Variant[]) => emit('update:modelValue', variants);
-
-const add = () => {
-    const options: Record<string, string> = {};
-    props.options.forEach((o) => (options[o.name] = o.values[0] ?? ''));
-    commit([...props.modelValue, { sku: '', price: '', stock: 0, options }]);
-};
-const remove = (i: number) => {
-    const variants = [...props.modelValue];
-    variants.splice(i, 1);
-    commit(variants);
-};
-const setField = (i: number, key: 'sku' | 'price' | 'stock', value: string) => {
-    const variants = [...props.modelValue];
-    variants[i] = { ...variants[i], [key]: value };
-    commit(variants);
-};
-const setOption = (i: number, name: string, value: string) => {
-    const variants = [...props.modelValue];
-    variants[i] = { ...variants[i], options: { ...variants[i].options, [name]: value } };
-    commit(variants);
-};
-const optionsFor = (option: Option) => option.values.map((v) => ({ label: v, value: v }));
-</script>
-
-<template>
-    <div class="space-y-3">
-        <div v-for="(variant, i) in modelValue" :key="i" class="flex flex-wrap items-end gap-2 rounded-lg border border-border bg-background p-3">
-            <div v-for="option in options" :key="option.name" class="w-32">
-                <label class="mb-1 block text-xs font-medium text-muted">{{ option.name }}</label>
-                <Select
-                    :model-value="variant.options[option.name] ?? ''"
-                    :options="optionsFor(option)"
-                    @update:model-value="setOption(i, option.name, $event)"
-                />
-            </div>
-            <div class="w-40">
-                <label class="mb-1 block text-xs font-medium text-muted">SKU</label>
-                <Input :model-value="variant.sku" placeholder="ABC-001" @update:model-value="setField(i, 'sku', $event)" />
-            </div>
-            <div class="w-28">
-                <label class="mb-1 block text-xs font-medium text-muted">Price ({{ currencySymbol }})</label>
-                <Input :model-value="String(variant.price)" type="number" @update:model-value="setField(i, 'price', $event)" />
-            </div>
-            <div class="w-24">
-                <label class="mb-1 block text-xs font-medium text-muted">Stock</label>
-                <Input :model-value="String(variant.stock)" type="number" @update:model-value="setField(i, 'stock', $event)" />
-            </div>
-            <Button type="button" variant="danger" size="sm" @click="remove(i)">✕</Button>
-        </div>
-
-        <Button type="button" variant="secondary" @click="add">Add variant</Button>
-    </div>
-</template>

package/src/pages/Admin/Commerce/Orders/Index.vue

@@ -1,80 +0,0 @@
-<script setup lang="ts">
-import Pagination from '@/components/Pagination.vue';
-import AdminLayout from '@/layouts/AdminLayout.vue';
-import { Link } from '@inertiajs/vue3';
-import { Badge, Button, DataTable } from '@tower_74/cms-ui';
-
-interface OrderRow {
-    id: number;
-    number: string;
-    date: string | null;
-    email: string;
-    status: string;
-    payment_status: string;
-    total: string;
-}
-interface PageLink {
-    url: string | null;
-    label: string;
-    active: boolean;
-}
-
-defineProps<{ orders: { data: OrderRow[]; links: PageLink[] } }>();
-
-const columns = [
-    { key: 'number', label: 'Order' },
-    { key: 'date', label: 'Date' },
-    { key: 'email', label: 'Customer' },
-    { key: 'status', label: 'Status' },
-    { key: 'payment_status', label: 'Payment' },
-    { key: 'total', label: 'Total', align: 'right' as const },
-    { key: 'actions', label: '', align: 'right' as const },
-];
-
-const statusVariant = (status: string) =>
-    ({
-        completed: 'success',
-        processing: 'info',
-        on_hold: 'warning',
-        cancelled: 'neutral',
-        failed: 'danger',
-        refunded: 'neutral',
-        pending: 'neutral',
-    })[status] ?? 'neutral';
-
-const paymentVariant = (status: string) =>
-    ({
-        paid: 'success',
-        unpaid: 'neutral',
-        authorized: 'info',
-        partially_refunded: 'warning',
-        refunded: 'neutral',
-        failed: 'danger',
-    })[status] ?? 'neutral';
-
-const label = (value: string) => value.replace(/_/g, ' ');
-</script>
-
-<template>
-    <AdminLayout>
-        <template #title>Orders</template>
-
-        <h2 class="mb-4 text-lg font-semibold">Orders</h2>
-
-        <DataTable :columns="columns" :rows="orders.data" empty="No orders yet.">
-            <template #cell-status="{ value }">
-                <Badge :variant="statusVariant(value as string)">{{ label(value as string) }}</Badge>
-            </template>
-            <template #cell-payment_status="{ value }">
-                <Badge :variant="paymentVariant(value as string)">{{ label(value as string) }}</Badge>
-            </template>
-            <template #cell-actions="{ row }">
-                <Link :href="`/admin/commerce/orders/${(row as OrderRow).number}`">
-                    <Button variant="ghost" size="sm">View</Button>
-                </Link>
-            </template>
-        </DataTable>
-
-        <Pagination :links="orders.links" />
-    </AdminLayout>
-</template>

package/src/pages/Admin/Commerce/Orders/Show.vue

@@ -1,200 +0,0 @@
-<script setup lang="ts">
-import AdminLayout from '@/layouts/AdminLayout.vue';
-import { Link, router } from '@inertiajs/vue3';
-import { Badge, Button, Card, Select } from '@tower_74/cms-ui';
-import { ref } from 'vue';
-
-interface OrderItem {
-    name: string;
-    variant: string | null;
-    sku: string | null;
-    quantity: number;
-    unit: string;
-    total: string;
-}
-interface Address {
-    first_name?: string;
-    last_name?: string;
-    line1?: string;
-    line2?: string;
-    city?: string;
-    region?: string;
-    postal_code?: string;
-    country?: string;
-    phone?: string;
-}
-interface Order {
-    id: number;
-    number: string;
-    date: string | null;
-    email: string;
-    status: string;
-    paymentStatus: string;
-    billing: Address | null;
-    shipping: Address | null;
-    shippingMethod: string | null;
-    note: string | null;
-    isPaid: boolean;
-    items: OrderItem[];
-    totals: { subtotal: string; discount?: string | null; shipping?: string | null; tax?: string | null; total: string };
-    payments: Array<{ gateway: string; transactionId: string | null; amount: string; status: string }>;
-}
-
-const props = defineProps<{
-    order: Order;
-    fulfillmentStatuses: string[];
-    canEdit: boolean;
-    canRefund: boolean;
-    canDelete: boolean;
-}>();
-
-const label = (value: string) => value.replace(/_/g, ' ');
-
-const statusVariant = (status: string) =>
-    ({ completed: 'success', processing: 'info', on_hold: 'warning', failed: 'danger', refunded: 'neutral' })[status] ?? 'neutral';
-
-const newStatus = ref(props.order.status);
-
-const statusOptions = props.fulfillmentStatuses.map((value) => ({ label: label(value), value }));
-
-const updateStatus = () => router.patch(`/admin/commerce/orders/${props.order.number}/status`, { status: newStatus.value }, { preserveScroll: true });
-
-const refund = () => {
-    if (confirm('Issue a refund for this order? The gateway will confirm it shortly.')) {
-        router.post(`/admin/commerce/orders/${props.order.number}/refund`, {}, { preserveScroll: true });
-    }
-};
-
-const destroy = () => {
-    if (confirm(`Delete order ${props.order.number}? This cannot be undone.`)) {
-        router.delete(`/admin/commerce/orders/${props.order.number}`);
-    }
-};
-
-const formatAddress = (a: Address | null) =>
-    a
-        ? [
-              `${a.first_name ?? ''} ${a.last_name ?? ''}`.trim(),
-              a.line1,
-              a.line2,
-              [a.city, a.region, a.postal_code].filter(Boolean).join(' '),
-              a.country,
-              a.phone,
-          ].filter(Boolean)
-        : [];
-</script>
-
-<template>
-    <AdminLayout>
-        <template #title>Order {{ order.number }}</template>
-
-        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
-            <div class="flex items-center gap-3">
-                <Link href="/admin/commerce/orders" class="text-sm text-muted hover:underline">← Orders</Link>
-                <h2 class="text-lg font-semibold">{{ order.number }}</h2>
-                <Badge :variant="statusVariant(order.status)">{{ label(order.status) }}</Badge>
-                <Badge :variant="order.paymentStatus === 'paid' ? 'success' : 'neutral'">{{ label(order.paymentStatus) }}</Badge>
-            </div>
-            <a :href="`/admin/commerce/orders/${order.number}/invoice`">
-                <Button variant="secondary" size="sm">Download invoice</Button>
-            </a>
-        </div>
-
-        <div class="grid gap-6 lg:grid-cols-[1fr_320px]">
-            <div class="space-y-6">
-                <Card title="Items">
-                    <table class="w-full text-sm">
-                        <thead>
-                            <tr class="border-b border-border text-left text-muted">
-                                <th class="py-2">Item</th>
-                                <th class="py-2 text-right">Qty</th>
-                                <th class="py-2 text-right">Unit</th>
-                                <th class="py-2 text-right">Total</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="(item, i) in order.items" :key="i" class="border-b border-border last:border-0">
-                                <td class="py-2">
-                                    {{ item.name }}
-                                    <span v-if="item.variant" class="block text-xs text-muted">{{ item.variant }}</span>
-                                </td>
-                                <td class="py-2 text-right">{{ item.quantity }}</td>
-                                <td class="py-2 text-right">{{ item.unit }}</td>
-                                <td class="py-2 text-right">{{ item.total }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-
-                    <dl class="mt-4 space-y-1 border-t border-border pt-4 text-sm">
-                        <div class="flex justify-between">
-                            <dt class="text-muted">Subtotal</dt>
-                            <dd>{{ order.totals.subtotal }}</dd>
-                        </div>
-                        <div v-if="order.totals.discount" class="flex justify-between">
-                            <dt class="text-muted">Discount</dt>
-                            <dd>-{{ order.totals.discount }}</dd>
-                        </div>
-                        <div v-if="order.totals.shipping" class="flex justify-between">
-                            <dt class="text-muted">Shipping</dt>
-                            <dd>{{ order.totals.shipping }}</dd>
-                        </div>
-                        <div v-if="order.totals.tax" class="flex justify-between">
-                            <dt class="text-muted">Tax</dt>
-                            <dd>{{ order.totals.tax }}</dd>
-                        </div>
-                        <div class="flex justify-between border-t border-border pt-2 font-semibold">
-                            <dt>Total</dt>
-                            <dd>{{ order.totals.total }}</dd>
-                        </div>
-                    </dl>
-                </Card>
-
-                <Card title="Payments">
-                    <p v-if="!order.payments.length" class="text-sm text-muted">No payments recorded.</p>
-                    <ul v-else class="space-y-2 text-sm">
-                        <li v-for="(p, i) in order.payments" :key="i" class="flex items-center justify-between">
-                            <span>
-                                <span class="font-medium">{{ p.amount }}</span>
-                                <span class="text-muted"> · {{ p.gateway }} · {{ label(p.status) }}</span>
-                            </span>
-                            <span class="font-mono text-xs text-muted">{{ p.transactionId }}</span>
-                        </li>
-                    </ul>
-                </Card>
-            </div>
-
-            <div class="space-y-6">
-                <Card title="Customer">
-                    <p class="text-sm">{{ order.email }}</p>
-                    <p class="mt-1 text-xs text-muted">Placed {{ order.date }}</p>
-                </Card>
-
-                <Card title="Shipping address">
-                    <p v-for="(line, i) in formatAddress(order.shipping)" :key="i" class="text-sm">{{ line }}</p>
-                    <p v-if="order.shippingMethod" class="mt-2 text-xs text-muted">Method: {{ order.shippingMethod }}</p>
-                </Card>
-
-                <Card title="Billing address">
-                    <p v-for="(line, i) in formatAddress(order.billing)" :key="i" class="text-sm">{{ line }}</p>
-                </Card>
-
-                <Card v-if="order.note" title="Customer note">
-                    <p class="text-sm">{{ order.note }}</p>
-                </Card>
-
-                <Card title="Manage">
-                    <div v-if="canEdit" class="space-y-2">
-                        <label class="text-xs font-medium text-muted">Fulfillment status</label>
-                        <Select v-model="newStatus" :options="statusOptions" />
-                        <Button size="sm" class="w-full" @click="updateStatus">Update status</Button>
-                    </div>
-
-                    <div class="mt-4 space-y-2 border-t border-border pt-4">
-                        <Button v-if="canRefund && order.isPaid" variant="secondary" size="sm" class="w-full" @click="refund"> Refund order </Button>
-                        <Button v-if="canDelete" variant="danger" size="sm" class="w-full" @click="destroy"> Delete order </Button>
-                    </div>
-                </Card>
-            </div>
-        </div>
-    </AdminLayout>
-</template>

package/src/pages/Admin/Commerce/Products/Edit.vue

@@ -1,167 +0,0 @@
-<script setup lang="ts">
-import BlockEditor from '@/components/BlockEditor.vue';
-import OptionsEditor from '@/components/commerce/OptionsEditor.vue';
-import VariantsEditor from '@/components/commerce/VariantsEditor.vue';
-import AdminLayout from '@/layouts/AdminLayout.vue';
-import { Link, useForm } from '@inertiajs/vue3';
-import { Button, FormBuilder, FormField, MediaPicker, type MediaItem, type MediaSelection } from '@tower_74/cms-ui';
-import axios from 'axios';
-import { computed, ref } from 'vue';
-
-interface Option {
-    name: string;
-    values: string[];
-}
-interface Variant {
-    sku: string;
-    price: string;
-    stock: number | string;
-    options: Record<string, string>;
-}
-interface Block {
-    type: string;
-    data: Record<string, unknown>;
-}
-interface BlockDef {
-    type: string;
-    label: string;
-    fields: Array<Record<string, unknown>>;
-    defaults: Record<string, unknown>;
-}
-interface ProductData {
-    id: number;
-    name: string;
-    description: string | null;
-    status: string;
-    tax_class: string;
-    featured_media_id: number | null;
-    options: Option[];
-    variants: Variant[];
-}
-
-const props = defineProps<{
-    product: ProductData | null;
-    currencySymbol: string;
-    featuredMedia: MediaItem | null;
-    mediaItems: MediaItem[];
-    blocks: Block[];
-    blockRegistry: BlockDef[];
-}>();
-
-const isEdit = computed(() => props.product !== null);
-
-const fields = [
-    { name: 'name', label: 'Name', required: true },
-    {
-        name: 'status',
-        label: 'Status',
-        type: 'select' as const,
-        options: [
-            { label: 'Draft', value: 'draft' },
-            { label: 'Published', value: 'published' },
-        ],
-    },
-    {
-        name: 'tax_class',
-        label: 'Tax class',
-        type: 'select' as const,
-        options: [
-            { label: 'Standard', value: 'standard' },
-            { label: 'Reduced', value: 'reduced' },
-            { label: 'Zero-rated', value: 'zero' },
-        ],
-    },
-    { name: 'description', label: 'Description', type: 'textarea' as const },
-];
-
-const form = useForm({
-    name: props.product?.name ?? '',
-    status: props.product?.status ?? 'draft',
-    tax_class: props.product?.tax_class ?? 'standard',
-    description: props.product?.description ?? '',
-    featured_media_id: props.product?.featured_media_id ?? null,
-    options: (props.product?.options ?? []) as Option[],
-    variants: (props.product?.variants ?? []) as Variant[],
-    blocks: (props.blocks ?? []) as Block[],
-});
-
-const model = computed({
-    get: () => ({ name: form.name, status: form.status, tax_class: form.tax_class, description: form.description }),
-    set: (value: Record<string, unknown>) => {
-        form.name = (value.name as string) ?? '';
-        form.status = (value.status as string) ?? 'draft';
-        form.tax_class = (value.tax_class as string) ?? 'standard';
-        form.description = (value.description as string) ?? '';
-    },
-});
-
-const optionsModel = computed({ get: () => form.options, set: (value: Option[]) => (form.options = value) });
-const variantsModel = computed({ get: () => form.variants, set: (value: Variant[]) => (form.variants = value) });
-const blocksModel = computed({ get: () => form.blocks, set: (value: Block[]) => (form.blocks = value) });
-
-// Shared media library for the featured-image picker and any block galleries.
-const mediaItems = ref<MediaItem[]>([...props.mediaItems]);
-const onUpload = async (file: File) => {
-    const data = new FormData();
-    data.append('file', file);
-    const { data: res } = await axios.post('/admin/media/upload', data);
-    mediaItems.value = [res.item, ...mediaItems.value];
-};
-
-const featured = ref<MediaSelection | null>(
-    props.featuredMedia ? { id: props.featuredMedia.id, src: props.featuredMedia.url, alt: props.featuredMedia.name ?? '' } : null,
-);
-const onFeatured = (value: MediaSelection | MediaSelection[] | null) => {
-    featured.value = (value as MediaSelection | null) ?? null;
-    form.featured_media_id = featured.value?.id ?? null;
-};
-
-const submit = () => {
-    if (isEdit.value && props.product) {
-        form.put(`/admin/commerce/products/${props.product.id}`);
-    } else {
-        form.post('/admin/commerce/products');
-    }
-};
-</script>
-
-<template>
-    <AdminLayout>
-        <template #title>{{ isEdit ? 'Edit product' : 'New product' }}</template>
-
-        <form class="max-w-4xl" @submit.prevent="submit">
-            <div class="max-w-xl">
-                <FormBuilder v-model="model" :fields="fields" :errors="form.errors" />
-
-                <div class="mt-4">
-                    <FormField label="Featured image" :error="form.errors.featured_media_id" help="Shown on the product card and page.">
-                        <MediaPicker :model-value="featured" :items="mediaItems" @update:model-value="onFeatured" @upload="onUpload" />
-                    </FormField>
-                </div>
-            </div>
-
-            <div class="mt-8">
-                <h3 class="mb-3 text-base font-semibold">Options</h3>
-                <OptionsEditor v-model="optionsModel" />
-            </div>
-
-            <div class="mt-8">
-                <h3 class="mb-3 text-base font-semibold">Variants</h3>
-                <p v-if="form.errors.variants" class="mb-2 text-sm text-danger">{{ form.errors.variants }}</p>
-                <VariantsEditor v-model="variantsModel" :options="form.options" :currency-symbol="currencySymbol" />
-            </div>
-
-            <div class="mt-8">
-                <h3 class="mb-3 text-base font-semibold">Product page blocks</h3>
-                <BlockEditor v-model="blocksModel" :registry="blockRegistry" :media-items="mediaItems" @upload="onUpload" />
-            </div>
-
-            <div class="mt-8 flex items-center gap-2">
-                <Button type="submit" :disabled="form.processing">
-                    {{ isEdit ? 'Save changes' : 'Create product' }}
-                </Button>
-                <Link href="/admin/commerce/products"><Button variant="ghost" type="button">Cancel</Button></Link>
-            </div>
-        </form>
-    </AdminLayout>
-</template>

package/src/pages/Admin/Commerce/Products/Index.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import Pagination from '@/components/Pagination.vue';
-import AdminLayout from '@/layouts/AdminLayout.vue';
-import { Link, router } from '@inertiajs/vue3';
-import { Badge, Button, DataTable } from '@tower_74/cms-ui';
-
-interface ProductRow {
-    id: number;
-    name: string;
-    status: string;
-    variants_count: number;
-    price_from: string | null;
-}
-interface PageLink {
-    url: string | null;
-    label: string;
-    active: boolean;
-}
-
-defineProps<{ products: { data: ProductRow[]; links: PageLink[] } }>();
-
-const columns = [
-    { key: 'name', label: 'Name' },
-    { key: 'status', label: 'Status' },
-    { key: 'variants_count', label: 'Variants', align: 'right' as const },
-    { key: 'price_from', label: 'From', align: 'right' as const },
-    { key: 'actions', label: '', align: 'right' as const },
-];
-
-const destroy = (row: ProductRow) => {
-    if (confirm(`Delete “${row.name}”?`)) {
-        router.delete(`/admin/commerce/products/${row.id}`, { preserveScroll: true });
-    }
-};
-</script>
-
-<template>
-    <AdminLayout>
-        <template #title>Products</template>
-
-        <div class="mb-4 flex items-center justify-between">
-            <h2 class="text-lg font-semibold">Products</h2>
-            <Link href="/admin/commerce/products/create"><Button>New product</Button></Link>
-        </div>
-
-        <DataTable :columns="columns" :rows="products.data" empty="No products yet.">
-            <template #cell-status="{ value }">
-                <Badge :variant="value === 'published' ? 'success' : 'neutral'">{{ value }}</Badge>
-            </template>
-            <template #cell-price_from="{ value }">
-                <span class="text-muted">{{ value ?? '—' }}</span>
-            </template>
-            <template #cell-actions="{ row }">
-                <div class="flex justify-end gap-2">
-                    <Link :href="`/admin/commerce/products/${(row as ProductRow).id}/edit`">
-                        <Button variant="ghost" size="sm">Edit</Button>
-                    </Link>
-                    <Button variant="danger" size="sm" @click="destroy(row as ProductRow)">Delete</Button>
-                </div>
-            </template>
-        </DataTable>
-
-        <Pagination :links="products.links" />
-    </AdminLayout>
-</template>

package/src/pages/Public/Cart/Index.vue

@@ -1,108 +0,0 @@
-<script setup lang="ts">
-import Seo from '@/components/Seo.vue';
-import PublicLayout from '@/layouts/PublicLayout.vue';
-import { Link, router } from '@inertiajs/vue3';
-import { type Block, Button, CartLineItem, CartSummary } from '@tower_74/cms-ui';
-
-interface CartItem {
-    variant_id: number;
-    name: string;
-    variant: string | null;
-    price: string;
-    quantity: number;
-    line_total: string;
-    max: number;
-    image: { src: string; alt?: string } | null;
-}
-interface ShippingOption {
-    id: string;
-    label: string;
-    cost: string;
-}
-
-defineProps<{
-    site: { name: string };
-    menu: Array<{ label: string; url: string }>;
-    footerWidgets: Block[];
-    cartCount?: number | null;
-    items: CartItem[];
-    shippingOptions: ShippingOption[];
-    selectedShipping: string | null;
-    summary: { subtotal: string; shipping?: string | null; tax?: string | null; total: string };
-    seo: { title: string; description?: string | null; url?: string | null; image?: string | null; type?: string | null };
-}>();
-
-const updateQty = (variantId: number, quantity: number) => router.patch(`/cart/${variantId}`, { quantity }, { preserveScroll: true });
-
-const removeItem = (variantId: number) => router.delete(`/cart/${variantId}`, { preserveScroll: true });
-
-const chooseShipping = (method: string) => router.post('/cart/shipping', { method }, { preserveScroll: true });
-</script>
-
-<template>
-    <Seo :seo="seo" />
-
-    <PublicLayout :site="site" :menu="menu" :footer-widgets="footerWidgets" :cart-count="cartCount">
-        <div class="mx-auto max-w-5xl px-4 py-12 sm:px-6">
-            <h1 class="mb-8 text-3xl font-bold tracking-tight">Cart</h1>
-
-            <div v-if="items.length" class="grid gap-10 lg:grid-cols-[1fr_320px]">
-                <div>
-                    <CartLineItem
-                        v-for="item in items"
-                        :key="item.variant_id"
-                        :name="item.name"
-                        :variant="item.variant ?? undefined"
-                        :image="item.image ?? undefined"
-                        :price="item.price"
-                        :quantity="item.quantity"
-                        :line-total="item.line_total"
-                        :max="item.max"
-                        @update:quantity="updateQty(item.variant_id, $event)"
-                        @remove="removeItem(item.variant_id)"
-                    />
-
-                    <div v-if="shippingOptions.length" class="mt-6">
-                        <h2 class="mb-2 text-sm font-medium">Shipping</h2>
-                        <label
-                            v-for="option in shippingOptions"
-                            :key="option.id"
-                            class="flex cursor-pointer items-center justify-between rounded border border-border px-3 py-2 text-sm"
-                            :class="option.id === selectedShipping ? 'border-primary' : ''"
-                        >
-                            <span class="flex items-center gap-2">
-                                <input
-                                    type="radio"
-                                    name="shipping"
-                                    :value="option.id"
-                                    :checked="option.id === selectedShipping"
-                                    @change="chooseShipping(option.id)"
-                                />
-                                {{ option.label }}
-                            </span>
-                            <span class="text-muted">{{ option.cost }}</span>
-                        </label>
-                    </div>
-                </div>
-
-                <CartSummary
-                    :subtotal="summary.subtotal"
-                    :shipping="summary.shipping ?? undefined"
-                    :tax="summary.tax ?? undefined"
-                    :total="summary.total"
-                >
-                    <template #actions>
-                        <Link href="/checkout"><Button class="w-full">Checkout</Button></Link>
-                    </template>
-                </CartSummary>
-            </div>
-
-            <div v-else class="rounded-lg border border-border bg-background px-4 py-16 text-center">
-                <p class="text-muted">Your cart is empty.</p>
-                <Link href="/shop" class="mt-4 inline-block">
-                    <Button variant="secondary">Continue shopping</Button>
-                </Link>
-            </div>
-        </div>
-    </PublicLayout>
-</template>

package/src/pages/Public/Checkout/Confirmation.vue

@@ -1,110 +0,0 @@
-<script setup lang="ts">
-import Seo from '@/components/Seo.vue';
-import PublicLayout from '@/layouts/PublicLayout.vue';
-import { Link, router } from '@inertiajs/vue3';
-import { type Block, Button, OrderSummary } from '@tower_74/cms-ui';
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
-
-interface OrderItem {
-    name: string;
-    variant: string | null;
-    quantity: number;
-    lineTotal: string;
-}
-
-const props = defineProps<{
-    site: { name: string };
-    menu: Array<{ label: string; url: string }>;
-    footerWidgets: Block[];
-    cartCount?: number | null;
-    order: {
-        number: string;
-        status: string;
-        paymentStatus: string;
-        email: string;
-        items: OrderItem[];
-        subtotal: string;
-        discount?: string | null;
-        shipping?: string | null;
-        tax?: string | null;
-        total: string;
-    };
-    seo: { title: string; description?: string | null; url?: string | null; image?: string | null; type?: string | null };
-}>();
-
-// The webhook — not this redirect — sets the true payment status, so poll until paid
-// (or failed) instead of assuming success (PLANNING §13.4 step 10).
-const paymentStatus = ref(props.order.paymentStatus);
-const isPaid = computed(() => paymentStatus.value === 'paid');
-const isFailed = computed(() => paymentStatus.value === 'failed');
-const pending = computed(() => !isPaid.value && !isFailed.value);
-
-let timer: ReturnType<typeof setInterval> | undefined;
-
-const poll = async () => {
-    try {
-        const response = await fetch(`/checkout/status/${props.order.number}`, {
-            headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
-            credentials: 'same-origin',
-        });
-        if (!response.ok) return;
-        const data = await response.json();
-        paymentStatus.value = data.paymentStatus;
-        if (!pending.value && timer) clearInterval(timer);
-    } catch {
-        // transient; the next tick retries
-    }
-};
-
-onMounted(() => {
-    if (pending.value) {
-        timer = setInterval(poll, 3000);
-    }
-});
-
-onBeforeUnmount(() => {
-    if (timer) clearInterval(timer);
-});
-
-const refresh = () => router.reload();
-</script>
-
-<template>
-    <Seo :seo="seo" />
-
-    <PublicLayout :site="site" :menu="menu" :footer-widgets="footerWidgets" :cart-count="cartCount">
-        <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6">
-            <div class="mb-8 text-center">
-                <h1 class="text-3xl font-bold tracking-tight">
-                    <span v-if="isPaid">Thank you for your order!</span>
-                    <span v-else-if="isFailed">Payment failed</span>
-                    <span v-else>We're confirming your payment…</span>
-                </h1>
-                <p class="mt-2 text-muted">
-                    Order <span class="font-medium text-text">{{ order.number }}</span> — a receipt is on its way to {{ order.email }}.
-                </p>
-
-                <p v-if="pending" class="mt-4 inline-flex items-center gap-2 rounded-full bg-surface px-4 py-1.5 text-sm text-muted">
-                    <span class="h-2 w-2 animate-pulse rounded-full bg-primary" />
-                    Awaiting payment confirmation…
-                </p>
-                <p v-else-if="isFailed" class="mt-4 text-sm text-danger">Your payment didn't go through. Please try again from your cart.</p>
-            </div>
-
-            <OrderSummary
-                :items="order.items"
-                :subtotal="order.subtotal"
-                :discount="order.discount ?? undefined"
-                :shipping="order.shipping ?? undefined"
-                :tax="order.tax ?? undefined"
-                :total="order.total"
-                title="Order details"
-            />
-
-            <div class="mt-8 flex justify-center gap-3">
-                <Link href="/shop"><Button variant="secondary">Continue shopping</Button></Link>
-                <Button v-if="pending" variant="ghost" @click="refresh">Refresh status</Button>
-            </div>
-        </div>
-    </PublicLayout>
-</template>

package/src/pages/Public/Checkout/Index.vue

@@ -1,174 +0,0 @@
-<script setup lang="ts">
-import Seo from '@/components/Seo.vue';
-import PublicLayout from '@/layouts/PublicLayout.vue';
-import { router } from '@inertiajs/vue3';
-import { type Block, Button, CheckoutForm, OrderSummary } from '@tower_74/cms-ui';
-import { nextTick, ref } from 'vue';
-
-interface SummaryItem {
-    name: string;
-    variant: string | null;
-    image: { src: string; alt?: string } | null;
-    quantity: number;
-    lineTotal: string;
-}
-interface ShippingOption {
-    id: string;
-    label: string;
-    cost: string;
-}
-
-const props = defineProps<{
-    site: { name: string };
-    menu: Array<{ label: string; url: string }>;
-    footerWidgets: Block[];
-    cartCount?: number | null;
-    summary: {
-        items: SummaryItem[];
-        subtotal: string;
-        discount?: string | null;
-        shipping?: string | null;
-        tax?: string | null;
-        total: string;
-    };
-    shippingOptions: ShippingOption[];
-    selectedShipping: string | null;
-    gateway: string;
-    stripeKey: string | null;
-    seo: { title: string; description?: string | null; url?: string | null; image?: string | null; type?: string | null };
-}>();
-
-const errors = ref<Record<string, string>>({});
-const generalError = ref<string | null>(null);
-const processing = ref(false);
-
-// Stripe (browser-only; loaded lazily so SSR stays clean).
-const showPayment = ref(false);
-const paymentEl = ref<HTMLDivElement | null>(null);
-
-let stripe: any = null;
-
-let elements: any = null;
-let returnUrl = '';
-
-const onShippingChange = (id: string) => router.post('/cart/shipping', { method: id }, { preserveScroll: true, preserveState: true });
-
-const placeOrder = async (payload: any) => {
-    processing.value = true;
-    errors.value = {};
-    generalError.value = null;
-
-    try {
-        const response = await fetch('/checkout', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: 'application/json',
-                'X-Requested-With': 'XMLHttpRequest',
-                'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content ?? '',
-            },
-            credentials: 'same-origin',
-            body: JSON.stringify(payload),
-        });
-
-        const data = await response.json();
-
-        if (response.status === 422) {
-            errors.value = data.errors ? flattenErrors(data.errors) : {};
-            generalError.value = data.errors ? null : (data.message ?? 'Please check your details.');
-            return;
-        }
-        if (!response.ok) {
-            generalError.value = data.message ?? 'Something went wrong. Please try again.';
-            return;
-        }
-
-        returnUrl = data.returnUrl;
-
-        if (data.gateway === 'stripe' && props.stripeKey) {
-            await mountStripe(data.clientSecret);
-        } else {
-            router.visit(returnUrl);
-        }
-    } catch {
-        generalError.value = 'We could not reach the payment service. Please try again.';
-    } finally {
-        processing.value = false;
-    }
-};
-
-const flattenErrors = (raw: Record<string, string[]>): Record<string, string> =>
-    Object.fromEntries(Object.entries(raw).map(([key, value]) => [key, value[0]]));
-
-const mountStripe = async (clientSecret: string) => {
-    const { loadStripe } = await import('@stripe/stripe-js');
-    stripe = await loadStripe(props.stripeKey as string);
-    if (!stripe) {
-        generalError.value = 'Stripe failed to load.';
-        return;
-    }
-    elements = stripe.elements({ clientSecret });
-    showPayment.value = true;
-    await nextTick();
-    elements.create('payment').mount(paymentEl.value);
-};
-
-const confirmPayment = async () => {
-    if (!stripe || !elements) return;
-    processing.value = true;
-    const { error } = await stripe.confirmPayment({
-        elements,
-        confirmParams: { return_url: returnUrl },
-    });
-    if (error) {
-        generalError.value = error.message ?? 'Payment could not be completed.';
-        processing.value = false;
-    }
-};
-</script>
-
-<template>
-    <Seo :seo="seo" />
-
-    <PublicLayout :site="site" :menu="menu" :footer-widgets="footerWidgets" :cart-count="cartCount">
-        <div class="mx-auto max-w-6xl px-4 py-12 sm:px-6">
-            <h1 class="mb-8 text-3xl font-bold tracking-tight">Checkout</h1>
-
-            <div class="grid gap-12 lg:grid-cols-[1fr_360px]">
-                <div>
-                    <p v-if="generalError" class="border-danger/40 bg-danger/10 mb-6 rounded border px-4 py-3 text-sm text-danger">
-                        {{ generalError }}
-                    </p>
-
-                    <CheckoutForm
-                        v-if="!showPayment"
-                        :shipping-options="shippingOptions"
-                        :selected-shipping="selectedShipping"
-                        :errors="errors"
-                        :processing="processing"
-                        submit-label="Continue to payment"
-                        @update:shipping-method="onShippingChange"
-                        @submit="placeOrder"
-                    />
-
-                    <div v-else>
-                        <h2 class="mb-4 text-lg font-semibold">Payment</h2>
-                        <div ref="paymentEl" class="mb-6" />
-                        <Button size="lg" class="w-full" :disabled="processing" @click="confirmPayment">
-                            {{ processing ? 'Processing…' : 'Pay now' }}
-                        </Button>
-                    </div>
-                </div>
-
-                <OrderSummary
-                    :items="summary.items"
-                    :subtotal="summary.subtotal"
-                    :discount="summary.discount ?? undefined"
-                    :shipping="summary.shipping ?? undefined"
-                    :tax="summary.tax ?? undefined"
-                    :total="summary.total"
-                />
-            </div>
-        </div>
-    </PublicLayout>
-</template>

package/src/pages/Public/Shop/Index.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import Pagination from '@/components/Pagination.vue';
-import Seo from '@/components/Seo.vue';
-import PublicLayout from '@/layouts/PublicLayout.vue';
-import { type Block, ProductGrid } from '@tower_74/cms-ui';
-
-interface ProductItem {
-    name: string;
-    url: string;
-    price: string | null;
-    image: { src: string; alt?: string } | null;
-}
-interface PageLink {
-    url: string | null;
-    label: string;
-    active: boolean;
-}
-
-defineProps<{
-    site: { name: string };
-    menu: Array<{ label: string; url: string }>;
-    footerWidgets: Block[];
-    cartCount?: number | null;
-    products: { data: ProductItem[]; links: PageLink[] };
-    seo: { title: string; description?: string | null; url?: string | null; image?: string | null; type?: string | null };
-}>();
-</script>
-
-<template>
-    <Seo :seo="seo" />
-
-    <PublicLayout :site="site" :menu="menu" :footer-widgets="footerWidgets" :cart-count="cartCount">
-        <div class="mx-auto max-w-6xl px-4 py-12 sm:px-6">
-            <h1 class="mb-8 text-3xl font-bold tracking-tight">Shop</h1>
-            <ProductGrid :products="products.data" :columns="3" empty="No products available yet." />
-            <Pagination :links="products.links" />
-        </div>
-    </PublicLayout>
-</template>

package/src/pages/Public/Shop/Show.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import Seo from '@/components/Seo.vue';
-import PublicLayout from '@/layouts/PublicLayout.vue';
-import { pluginBlocks } from '@/plugins';
-import { router } from '@inertiajs/vue3';
-import { type Block, BlockRenderer, ProductOverview } from '@tower_74/cms-ui';
-
-interface ProductData {
-    name: string;
-    description: string | null;
-    image: { src: string; alt?: string } | null;
-    blocks: Block[];
-    options: Array<{ name: string; values: string[] }>;
-    variants: Array<{ id: number; options: Record<string, string>; price: string; available: boolean }>;
-}
-
-defineProps<{
-    site: { name: string };
-    menu: Array<{ label: string; url: string }>;
-    footerWidgets: Block[];
-    cartCount?: number | null;
-    product: ProductData;
-    seo: { title: string; description?: string | null; url?: string | null; image?: string | null; type?: string | null };
-}>();
-
-const addToCart = (payload: { variantId: number | string; quantity: number }) => {
-    // Wired to the cart in Phase 8.3. For now this posts to the (future) cart endpoint.
-    router.post('/cart', { variant_id: payload.variantId, quantity: payload.quantity }, { preserveScroll: true });
-};
-</script>
-
-<template>
-    <Seo :seo="seo" />
-
-    <PublicLayout :site="site" :menu="menu" :footer-widgets="footerWidgets" :cart-count="cartCount">
-        <ProductOverview
-            :name="product.name"
-            :description="product.description ?? undefined"
-            :image="product.image ?? undefined"
-            :options="product.options"
-            :variants="product.variants"
-            @add-to-cart="addToCart"
-        />
-
-        <BlockRenderer v-if="product.blocks.length" :blocks="product.blocks" :components="pluginBlocks()" />
-    </PublicLayout>
-</template>