themelia-react-ui 2.0.3 → 2.0.5

package/templates/products-template.tsx

@@ -0,0 +1,834 @@
+import { useMemo, useState } from 'react';
+
+import { Badge } from 'themelia-react-ui/base/badge';
+import { Card } from 'themelia-react-ui/base/cards';
+import { Select, ToggleField } from 'themelia-react-ui/base/choice-inputs';
+import { FormField, FormSection } from 'themelia-react-ui/base/forms';
+import { Grid, Stack } from 'themelia-react-ui/base/structure';
+import { Input, SlugField, Textarea } from 'themelia-react-ui/base/text-inputs';
+import { TagsInput } from 'themelia-react-ui/base/value-inputs';
+import { SeoListingCard } from 'themelia-react-ui/blocks/commerce';
+import { MetadataList } from 'themelia-react-ui/base/metadata-list';
+import { ActionDialog, ActionDrawer, useOverlayVisibility } from 'themelia-react-ui/features/overlays';
+import {
+	ProductVariantDetails,
+	ProductVariantEditor,
+	ProductVariantsManager,
+	type ProductChoice,
+	type ProductOptionEditDraft,
+	type ProductOptionGroup,
+	type ProductVariantEditableField,
+	type ProductVariantEditorValues,
+	type ProductVariantOptionField,
+	type ProductVariantRow,
+	type ProductVariantSummary,
+} from 'themelia-react-ui/features/products';
+import { TwoColumnLayout } from 'themelia-react-ui/layout/containers';
+import { Page } from 'themelia-react-ui/layout/page';
+import { useMoneyFormatter } from 'themelia-react-ui/primitives';
+import { DisplayLabel, Text } from 'themelia-react-ui/typography';
+
+const INITIAL_OPTION_GROUPS: ProductOptionGroup[] = [
+	{
+		id: 'color',
+		name: 'Color',
+		description: 'Yarn-dyed core colorways.',
+		usedForVariants: true,
+		values: [
+			{ id: 'heather-gray', label: 'Heather Gray' },
+			{ id: 'midnight-navy', label: 'Midnight Navy' },
+		],
+	},
+	{
+		id: 'size',
+		name: 'Size',
+		description: 'Standard unisex knitwear sizing.',
+		usedForVariants: true,
+		values: [
+			{ id: 'small', label: 'Small' },
+			{ id: 'medium', label: 'Medium' },
+			{ id: 'large', label: 'Large' },
+		],
+	},
+];
+
+const INITIAL_VARIANTS: ProductVariantRow[] = [
+	{
+		id: 'mwc-gry-s',
+		name: 'Heather Gray / Small',
+		sku: 'MWC-GRY-S',
+		price: '145.00',
+		inventory: '28',
+		status: 'Active',
+		statusTone: 'success',
+		optionValueIds: { color: 'heather-gray', size: 'small' },
+	},
+	{
+		id: 'mwc-gry-m',
+		name: 'Heather Gray / Medium',
+		sku: 'MWC-GRY-M',
+		price: '145.00',
+		inventory: '42',
+		status: 'Active',
+		statusTone: 'success',
+		optionValueIds: { color: 'heather-gray', size: 'medium' },
+	},
+	{
+		id: 'mwc-gry-l',
+		name: 'Heather Gray / Large',
+		sku: 'MWC-GRY-L',
+		price: '145.00',
+		inventory: '31',
+		status: 'Active',
+		statusTone: 'success',
+		optionValueIds: { color: 'heather-gray', size: 'large' },
+	},
+	{
+		id: 'mwc-nvy-s',
+		name: 'Midnight Navy / Small',
+		sku: 'MWC-NVY-S',
+		price: '145.00',
+		inventory: '24',
+		status: 'Active',
+		statusTone: 'success',
+		optionValueIds: { color: 'midnight-navy', size: 'small' },
+	},
+	{
+		id: 'mwc-nvy-m',
+		name: 'Midnight Navy / Medium',
+		sku: 'MWC-NVY-M',
+		price: '145.00',
+		inventory: '37',
+		status: 'Active',
+		statusTone: 'success',
+		optionValueIds: { color: 'midnight-navy', size: 'medium' },
+	},
+	{
+		id: 'mwc-nvy-l',
+		name: 'Midnight Navy / Large',
+		sku: 'MWC-NVY-L',
+		price: '145.00',
+		inventory: '6',
+		status: 'Low stock',
+		statusTone: 'warning',
+		optionValueIds: { color: 'midnight-navy', size: 'large' },
+	},
+];
+
+const PRODUCT_STATUS_OPTIONS = [
+	{ value: 'Active', label: 'Active' },
+	{ value: 'Draft', label: 'Draft' },
+	{ value: 'Archived', label: 'Archived' },
+];
+
+const PRODUCT_CATEGORY_OPTIONS = [
+	{ value: 'sweaters', label: 'Apparel & Accessories > Clothing > Sweaters' },
+	{ value: 'shirts', label: 'Apparel & Accessories > Clothing > Shirts & Tops' },
+	{ value: 'outerwear', label: 'Apparel & Accessories > Clothing > Outerwear' },
+];
+
+const COUNTRY_OPTIONS = [
+	{ value: 'PT', label: 'Portugal' },
+	{ value: 'IT', label: 'Italy' },
+	{ value: 'US', label: 'United States' },
+];
+
+const VARIANT_STATUS_CHOICES: ProductChoice[] = [
+	{ value: 'Active', label: 'Active' },
+	{ value: 'Low stock', label: 'Low stock' },
+	{ value: 'Draft', label: 'Draft' },
+];
+
+function updateVariantField(
+	rows: ProductVariantRow[],
+	variantId: string,
+	field: ProductVariantEditableField,
+	value: string,
+) {
+	return rows.map((row) => (row.id === variantId ? { ...row, [field]: value } : row));
+}
+
+export function ProductsAdminTemplate() {
+	// Sample records are priced in USD; bind that once for every text amount.
+	const formatMoney = useMoneyFormatter({ currency: 'USD' });
+	const [productTitle, setProductTitle] = useState('Merino Wool Crewneck Sweater');
+	const [productDescription, setProductDescription] = useState(
+		'Knitted in Braga, Portugal from 100% extra-fine Italian merino wool. Designed with a classic regular fit, saddle shoulders, and 1x1 ribbed collar, cuffs, and hem. Naturally breathable and temperature-regulating for three-season layering.',
+	);
+	const [productStatus, setProductStatus] = useState<'Active' | 'Draft' | 'Archived'>('Active');
+	const [savedRevision, setSavedRevision] = useState<number | null>(null);
+
+	// Shipping & customs state
+	const [isPhysicalProduct, setIsPhysicalProduct] = useState(true);
+	const [weightKg, setWeightKg] = useState('0.42');
+	const [countryOfOrigin, setCountryOfOrigin] = useState('PT');
+	const [hsCode, setHsCode] = useState('6110.11.00');
+
+	// Publishing, organization, collections & tags state
+	const [onlineStoreChannel, setOnlineStoreChannel] = useState(true);
+	const [posChannel, setPosChannel] = useState(true);
+	const [category, setCategory] = useState('sweaters');
+	const [productType, setProductType] = useState('Knitwear');
+	const [vendor, setVendor] = useState('Oak & Loom');
+	const [inAutumnCollection, setInAutumnCollection] = useState(true);
+	const [inMensKnitwear, setInMensKnitwear] = useState(true);
+	const [inMerinoEssentials, setInMerinoEssentials] = useState(false);
+	const [tags, setTags] = useState<string[]>([
+		'merino-wool',
+		'crewneck',
+		'italian-yarn',
+		'portugal',
+	]);
+
+	// Variants state (owns per-SKU price, compare-at price, cost, barcode, and stock)
+	const [optionState, setOptionState] = useState<ProductOptionGroup[]>(INITIAL_OPTION_GROUPS);
+	const [variantState, setVariantState] = useState<ProductVariantRow[]>(INITIAL_VARIANTS);
+	const [collapsedOptionIds, setCollapsedOptionIds] = useState<string[]>([]);
+	const [editingOptionId, setEditingOptionId] = useState<string | null>(null);
+	const [selectedVariantIds, setSelectedVariantIds] = useState<string[]>(['mwc-gry-m']);
+
+	const [editingVariantId, setEditingVariantId] = useState<string>('mwc-gry-m');
+	const [variantCompareAtPrice, setVariantCompareAtPrice] = useState('165.00');
+	const [variantCostPerItem, setVariantCostPerItem] = useState('52.00');
+	const [variantBarcode, setVariantBarcode] = useState('084291004218');
+	const [variantDraft, setVariantDraft] = useState<ProductVariantEditorValues>({
+		name: 'Heather Gray / Medium',
+		description: '100% Extra-Fine Merino Wool',
+		sku: 'MWC-GRY-M',
+		price: '145.00',
+		inventory: '42',
+		channels: 'Online Store, SoHo POS',
+		status: 'Active',
+		options: {
+			color: 'Heather Gray',
+			size: 'Medium',
+		},
+	});
+
+	// SEO state
+	const [seoTitle, setSeoTitle] = useState(
+		'Merino Wool Crewneck Sweater — Heather Gray & Navy | Oak & Loom',
+	);
+	const [seoSlug] = useState('merino-wool-crewneck-sweater');
+	const [seoDescription, setSeoDescription] = useState(
+		'Knitted in Portugal from 100% extra-fine Italian merino wool. Soft, breathable 7-gauge crewneck sweater built for everyday layering. Free US shipping & 30-day returns.',
+	);
+
+	const [seoDraft, setSeoDraft] = useState({ title: seoTitle, description: seoDescription });
+	const [savedVariantDetails, setSavedVariantDetails] = useState<Record<string, { compareAtPrice: string; costPerItem: string; barcode: string }>>({});
+	const variantDrawer = useOverlayVisibility();
+	const seoDialog = useOverlayVisibility();
+	const previewDialog = useOverlayVisibility();
+
+	const productSnapshot = JSON.stringify({
+		productTitle, productDescription, productStatus, isPhysicalProduct, weightKg,
+		countryOfOrigin, hsCode, onlineStoreChannel, posChannel, category, productType,
+		vendor, inAutumnCollection, inMensKnitwear, inMerinoEssentials, tags,
+		optionState, variantState, savedVariantDetails, seoTitle, seoDescription, seoSlug,
+	});
+	const [savedProductSnapshot, setSavedProductSnapshot] = useState(productSnapshot);
+	const productDirty = productSnapshot !== savedProductSnapshot;
+
+	const totalInventory = useMemo(
+		() =>
+			variantState.reduce(
+				(sum, row) => sum + (Number.parseInt(String(row.inventory ?? '0'), 10) || 0),
+				0,
+			),
+		[variantState],
+	);
+
+	const priceRangeLabel = useMemo(() => {
+		const prices = variantState
+			.map((row) => Number.parseFloat(String(row.price ?? '0')))
+			.filter((n) => Number.isFinite(n) && n > 0);
+		if (prices.length === 0) return formatMoney(0);
+		const min = Math.min(...prices);
+		const max = Math.max(...prices);
+		return min === max ? formatMoney(min) : `${formatMoney(min)} – ${formatMoney(max)}`;
+	}, [variantState, formatMoney]);
+
+	const variantSummaries: ProductVariantSummary[] = useMemo(
+		() =>
+			variantState.map((row) => ({
+				id: row.id,
+				name: row.name,
+				description: '100% Extra-Fine Merino Wool',
+				options: Object.values(row.optionValueIds ?? {}),
+				sku: row.sku,
+				price: formatMoney(String(row.price ?? '145.00')),
+				inventory: String(row.inventory ?? '0'),
+				channels: 'Online Store, POS',
+				updatedAt: 'Today',
+				status: row.status,
+				statusTone: row.statusTone,
+			})),
+		[variantState, formatMoney],
+	);
+
+	const variantOptionFields: ProductVariantOptionField[] = useMemo(
+		() =>
+			optionState.map((group) => ({
+				id: group.id,
+				label: String(group.name),
+				value: String(variantDraft.options?.[group.id] ?? group.values?.[0]?.label ?? ''),
+				choices: (group.values ?? []).map((v) => ({
+					value: String(v.label),
+					label: String(v.label),
+				})),
+			})),
+		[optionState, variantDraft.options],
+	);
+
+	const openVariantEditor = (row: ProductVariantRow) => {
+		setEditingVariantId(row.id);
+		const detail = savedVariantDetails[row.id];
+		setVariantCompareAtPrice(detail?.compareAtPrice ?? '165.00');
+		setVariantCostPerItem(detail?.costPerItem ?? '52.00');
+		setVariantBarcode(detail?.barcode ?? '084291004218');
+		const colorId = row.optionValueIds?.color ?? 'heather-gray';
+		const sizeId = row.optionValueIds?.size ?? 'medium';
+		const colorLabel = String(
+			optionState
+				.find((g) => g.id === 'color')
+				?.values?.find((v) => v.id === colorId)?.label ?? 'Heather Gray',
+		);
+		const sizeLabel = String(
+			optionState
+				.find((g) => g.id === 'size')
+				?.values?.find((v) => v.id === sizeId)?.label ?? 'Medium',
+		);
+
+		setVariantDraft({
+			name: String(row.name ?? ''),
+			description: '100% Extra-Fine Merino Wool',
+			sku: String(row.sku ?? ''),
+			price: String(row.price ?? '145.00'),
+			inventory: String(row.inventory ?? '0'),
+			channels: 'Online Store, SoHo POS',
+			status: String(row.status ?? 'Active'),
+			options: {
+				color: colorLabel,
+				size: sizeLabel,
+			},
+		});
+		variantDrawer.show();
+	};
+
+	const duplicateVariant = (variant: ProductVariantRow) => {
+		const copy = { ...variant, id: crypto.randomUUID(), sku: `${String(variant.sku ?? 'MWC')}-COPY` };
+		setVariantState((current) => [...current, copy]);
+		return copy;
+	};
+
+	const handleSaveVariantDraft = () => {
+		setSavedVariantDetails((current) => ({ ...current, [editingVariantId]: { compareAtPrice: variantCompareAtPrice, costPerItem: variantCostPerItem, barcode: variantBarcode } }));
+		const optionValueIds = Object.fromEntries(optionState.map((group) => [group.id, group.values?.find((value) => String(value.label) === variantDraft.options?.[group.id])?.id]).filter((entry): entry is [string, string] => typeof entry[1] === 'string'));
+		setVariantState((current) =>
+			current.map((row) =>
+				row.id === editingVariantId
+					? {
+							...row,
+							optionValueIds,
+							name: variantDraft.name || row.name,
+							sku: variantDraft.sku || row.sku,
+							price: variantDraft.price || row.price,
+							inventory: variantDraft.inventory || row.inventory,
+							status: variantDraft.status || row.status,
+							statusTone:
+								variantDraft.status === 'Active'
+									? 'success'
+									: variantDraft.status === 'Low stock'
+										? 'warning'
+										: 'secondary',
+						}
+					: row,
+			),
+		);
+		variantDrawer.hide();
+	};
+
+	const activeVariantSummary = useMemo<ProductVariantSummary | undefined>(
+		() => variantSummaries.find((item) => item.id === editingVariantId) ?? variantSummaries[0],
+		[variantSummaries, editingVariantId],
+	);
+
+	const statusBadgeTone =
+		productStatus === 'Active'
+			? 'success'
+			: productStatus === 'Draft'
+				? 'info'
+				: 'secondary';
+
+	return (
+		<Page
+			header={{
+				title: productTitle,
+				description:
+					productDirty ? 'Unsaved product changes' : savedRevision !== null
+						? `Saved revision #${savedRevision} · Updated just now`
+						: `Men’s Knitwear · ${variantState.length} variants (${totalInventory} in stock)`,
+				titleBadges: [{ label: productStatus, tone: statusBadgeTone }],
+				primaryAction: {
+					label: 'Save product',
+					disabled: !productDirty,
+					onClick: () => { setSavedProductSnapshot(productSnapshot); setSavedRevision((rev) => (rev ?? 0) + 1); },
+				},
+				secondaryActions: [{ label: 'Preview', onClick: previewDialog.show }],
+			}}
+		>
+			<TwoColumnLayout
+				stickyAside
+				main={
+					<Stack gap="2xl">
+						{/* 1. Product details */}
+						<Card title="Product details">
+							<Stack gap="lg">
+								<FormField label="Title" required>
+									<Input
+										aria-label="Title"
+										value={productTitle}
+										onChange={(event) => setProductTitle(event.target.value)}
+									/>
+								</FormField>
+
+								<FormField
+									label="Description"
+									hint="Displayed on the storefront under fabric, yarn origin, and fit details."
+								>
+									<Textarea
+										aria-label="Description"
+										rows={5}
+										value={productDescription}
+										onChange={(event) => setProductDescription(event.target.value)}
+									/>
+								</FormField>
+
+								<FormField label="URL handle">
+									<SlugField
+										aria-label="URL handle"
+										startAddon="/products/"
+										value={seoSlug}
+									/>
+								</FormField>
+							</Stack>
+						</Card>
+
+						{/* 2. Options & Variants (owns SKU pricing and stock per variant) */}
+						<ProductVariantsManager
+							surface="card"
+							optionGroups={optionState}
+							variants={variantState}
+							optionCombinationDisplay="tags"
+							cellDisplay={{ price: 'field', inventory: 'field' }}
+							visibleColumns={['variant', 'price', 'inventory']}
+							collapsedOptionIds={collapsedOptionIds}
+							onCollapsedOptionIdsChange={setCollapsedOptionIds}
+							editingOptionId={editingOptionId}
+							onEditingOptionIdChange={setEditingOptionId}
+							selectedVariantIds={selectedVariantIds}
+							onSelectedVariantIdsChange={setSelectedVariantIds}
+							onEditOption={(option) => setEditingOptionId(option.id)}
+							onCancelEditingOption={() => setEditingOptionId(null)}
+							onSaveEditingOption={(option, draft: ProductOptionEditDraft) => {
+								setOptionState((current) =>
+									current.map((item) =>
+										item.id === option.id
+											? {
+													...item,
+													name: draft.name.trim() || item.name,
+													values: draft.values.map((val, idx) => ({
+														...val,
+														id: val.id || `${item.id}-v-${idx + 1}`,
+														label: String(val.label).trim() || `Option ${idx + 1}`,
+													})),
+												}
+											: item,
+									),
+								);
+								setEditingOptionId(null);
+							}}
+							onCreateVariant={() => {
+								const nextIndex = variantState.length + 1;
+								setVariantState((current) => [
+									...current,
+									{
+										id: crypto.randomUUID(),
+										name: 'Heather Gray / Large',
+										sku: `MWC-GRY-L-${nextIndex}`,
+										price: '145.00',
+										inventory: '20',
+										status: 'Active',
+										statusTone: 'success',
+										optionValueIds: { color: 'heather-gray', size: 'large' },
+									},
+								]);
+							}}
+							onVariantFieldChange={(variant, field, value) => {
+								setVariantState((current) =>
+									updateVariantField(current, variant.id, field, value),
+								);
+							}}
+							onVariantFieldBlur={(variant, field, value) => {
+								setVariantState((current) =>
+									updateVariantField(current, variant.id, field, value.trim()),
+								);
+							}}
+							onSelectVariant={openVariantEditor}
+							onEditVariant={openVariantEditor}
+							onDuplicateVariant={duplicateVariant}
+							onDeleteVariant={(variant) => {
+								setVariantState((current) =>
+									current.filter((item) => item.id !== variant.id),
+								);
+							}}
+							strings={{
+								title: 'Variants',
+								description:
+									'Each variant manages its own SKU, retail price, compare-at price, barcode, and warehouse inventory.',
+							}}
+						/>
+
+						{/* 3. Shipping & customs */}
+						<Card
+							title="Shipping & customs"
+							description="Default package weight and customs tariff classification inherited by physical variants."
+						>
+							<Stack gap="lg">
+								<ToggleField
+									kind="checkbox"
+									value={isPhysicalProduct}
+									onValueChange={(checked) => setIsPhysicalProduct(Boolean(checked))}
+									label="This is a physical product requiring shipping"
+								/>
+
+								{isPhysicalProduct && (
+									<Grid columns={{ base: 1, sm: 3 }} gap="lg">
+										<FormField label="Package weight">
+											<Input
+												aria-label="Weight"
+												endAddon="kg"
+												value={weightKg}
+												onChange={(event) => setWeightKg(event.target.value)}
+											/>
+										</FormField>
+										<FormField label="Country/Region of origin">
+											<Select
+												aria-label="Country/Region of origin"
+												options={COUNTRY_OPTIONS}
+												value={countryOfOrigin}
+												onValueChange={(value) => setCountryOfOrigin(String(value))}
+											/>
+										</FormField>
+										<FormField label="HS tariff code">
+											<Input
+												aria-label="HS code"
+												value={hsCode}
+												onChange={(event) => setHsCode(event.target.value)}
+											/>
+										</FormField>
+									</Grid>
+								)}
+							</Stack>
+						</Card>
+
+						{/* 4. Search Engine Listing */}
+						<SeoListingCard
+							surface="card"
+							siteName="Oak & Loom"
+							baseUrl="https://oakandloom.com"
+							pathSegments={['collections', 'knitwear', 'products']}
+							permalink={seoSlug}
+							title={seoTitle}
+							description={seoDescription}
+							price={priceRangeLabel}
+							keyword="merino wool crewneck sweater"
+							onEdit={() => { setSeoDraft({ title: seoTitle, description: seoDescription }); seoDialog.show(); }}
+						/>
+					</Stack>
+				}
+				aside={
+					<Stack gap="2xl">
+						{/* 1. Status Card */}
+						<Card title="Status">
+							<Stack gap="lg">
+								<Select
+									aria-label="Product status"
+									options={PRODUCT_STATUS_OPTIONS}
+									value={productStatus}
+									onValueChange={(value) =>
+										setProductStatus(value as 'Active' | 'Draft' | 'Archived')
+									}
+								/>
+								<MetadataList
+									columns={1}
+									items={[
+										{
+											id: 'variant-count',
+											label: 'Variants',
+											value: `${variantState.length} SKUs`,
+										},
+										{
+											id: 'total-stock',
+											label: 'Total inventory',
+											value: `${totalInventory} units across 2 locations`,
+										},
+										{
+											id: 'price-range',
+											label: 'Variant price',
+											value: priceRangeLabel,
+										},
+									]}
+								/>
+							</Stack>
+						</Card>
+
+						{/* 2. Publishing Card */}
+						<Card title="Publishing">
+							<Stack gap="2xl">
+								<Stack gap="xs">
+									<DisplayLabel>Sales channels</DisplayLabel>
+									<ToggleField
+										kind="checkbox"
+										value={onlineStoreChannel}
+										onValueChange={(checked) => setOnlineStoreChannel(Boolean(checked))}
+										label="Online Store"
+									/>
+									<ToggleField
+										kind="checkbox"
+										value={posChannel}
+										onValueChange={(checked) => setPosChannel(Boolean(checked))}
+										label="Point of Sale (SoHo Flagship)"
+									/>
+								</Stack>
+
+								<MetadataList
+									columns={1}
+									items={[
+										{
+											id: 'markets',
+											label: 'Markets',
+											value: 'United States (USD) & EU (EUR)',
+										},
+									]}
+								/>
+							</Stack>
+						</Card>
+
+						{/* 3. Product organization Card (Category, Type, Vendor) */}
+						<Card title="Organization">
+							<Stack gap="lg">
+								<FormField label="Category">
+									<Select
+										aria-label="Category"
+										options={PRODUCT_CATEGORY_OPTIONS}
+										value={category}
+										onValueChange={(value) => setCategory(String(value))}
+									/>
+								</FormField>
+
+								<FormField label="Product type">
+									<Input
+										aria-label="Product type"
+										value={productType}
+										onChange={(event) => setProductType(event.target.value)}
+									/>
+								</FormField>
+
+								<FormField label="Vendor">
+									<Input
+										aria-label="Vendor"
+										value={vendor}
+										onChange={(event) => setVendor(event.target.value)}
+									/>
+								</FormField>
+							</Stack>
+						</Card>
+
+						{/* 4. Collections Card */}
+						<Card
+							title="Collections"
+							description="Assign this product to manual and automated storefront collections."
+						>
+							<Stack gap="sm">
+								<ToggleField
+									kind="checkbox"
+									value={inAutumnCollection}
+									onValueChange={(checked) => setInAutumnCollection(Boolean(checked))}
+									label="Autumn / Winter Knitwear"
+								/>
+								<ToggleField
+									kind="checkbox"
+									value={inMensKnitwear}
+									onValueChange={(checked) => setInMensKnitwear(Boolean(checked))}
+									label="Men’s Core Essentials"
+								/>
+								<ToggleField
+									kind="checkbox"
+									value={inMerinoEssentials}
+									onValueChange={(checked) => setInMerinoEssentials(Boolean(checked))}
+									label="Italian Merino Capsule"
+								/>
+							</Stack>
+						</Card>
+
+						{/* 5. Tags Card */}
+						<Card
+							title="Tags"
+							description="Used for storefront filtering and automated collection rules."
+						>
+							<FormField label="Product tags">
+								<TagsInput
+									aria-label="Tags"
+									value={tags}
+									onValueChange={setTags}
+									placeholder="Add tag…"
+								/>
+							</FormField>
+						</Card>
+					</Stack>
+				}
+			/>
+
+			<ActionDrawer
+				{...variantDrawer.overlayProps}
+				title={`Edit variant · ${variantDraft.name}`}
+				description="Manage variant-level pricing, cost margin, SKU barcode, and warehouse inventory."
+				width="lg"
+				showFooter={false}
+			>
+				<Stack gap="xl">
+					<ProductVariantDetails
+						variant={activeVariantSummary}
+						metadata={[
+							{
+								id: 'sku',
+								label: 'SKU',
+								value: { kind: 'mono', value: variantDraft.sku || 'MWC-GRY-M' },
+							},
+							{
+								id: 'barcode',
+								label: 'Barcode (GTIN)',
+								value: { kind: 'mono', value: variantBarcode },
+							},
+							{
+								id: 'compare-at',
+								label: 'Compare-at price',
+								value: formatMoney(variantCompareAtPrice),
+							},
+							{
+								id: 'unit-cost',
+								label: 'Unit cost',
+								value: formatMoney(variantCostPerItem),
+							},
+							{
+								id: 'brooklyn-stock',
+								label: 'Brooklyn Warehouse',
+								value: `${variantDraft.inventory ?? '42'} available`,
+							},
+						]}
+						onDuplicateVariant={() => { const source = variantState.find((row) => row.id === editingVariantId); if (source) openVariantEditor(duplicateVariant(source)); }}
+					/>
+					<FormSection title="Variant pricing & identifiers">
+						<Grid columns={{ base: 1, sm: 3 }} gap="lg">
+							<FormField label="Compare-at price">
+								<Input
+									aria-label="Compare-at price"
+									startAddon="$"
+									value={variantCompareAtPrice}
+									onChange={(event) => setVariantCompareAtPrice(event.target.value)}
+								/>
+							</FormField>
+							<FormField label="Cost per item">
+								<Input
+									aria-label="Cost per item"
+									startAddon="$"
+									value={variantCostPerItem}
+									onChange={(event) => setVariantCostPerItem(event.target.value)}
+								/>
+							</FormField>
+							<FormField label="Barcode (UPC / GTIN)">
+								<Input
+									aria-label="Barcode"
+									value={variantBarcode}
+									onChange={(event) => setVariantBarcode(event.target.value)}
+								/>
+							</FormField>
+						</Grid>
+					</FormSection>
+					<ProductVariantEditor
+						value={variantDraft}
+						statusOptions={VARIANT_STATUS_CHOICES}
+						optionFields={variantOptionFields}
+						onValueChange={setVariantDraft}
+						onCancel={variantDrawer.hide}
+						onSubmit={handleSaveVariantDraft}
+					/>
+				</Stack>
+			</ActionDrawer>
+
+			<ActionDialog
+				{...seoDialog.overlayProps}
+				title="Edit search engine listing"
+				description="Customize the page title and meta description shown in search results."
+				strings={{ confirm: 'Save SEO settings', cancel: 'Cancel' }}
+				onConfirm={() => { setSeoTitle(seoDraft.title); setSeoDescription(seoDraft.description); seoDialog.hide(); }}
+			>
+				<FormSection title="Search engine metadata">
+					<FormField label="Page title" required>
+						<Input
+							aria-label="Page title"
+							value={seoDraft.title}
+							onChange={(event) => setSeoDraft((draft) => ({ ...draft, title: event.target.value }))}
+						/>
+					</FormField>
+					<FormField label="Meta description">
+						<Textarea
+							aria-label="Meta description"
+							rows={4}
+							value={seoDraft.description}
+							onChange={(event) => setSeoDraft((draft) => ({ ...draft, description: event.target.value }))}
+						/>
+					</FormField>
+				</FormSection>
+			</ActionDialog>
+
+			<ActionDialog
+				{...previewDialog.overlayProps}
+				title="Storefront product preview"
+				description="Preview how this product appears on the Online Store."
+				strings={{ confirm: 'Done', cancel: 'Close' }}
+				onConfirm={previewDialog.hide}
+			>
+				<Stack gap="md">
+					<Stack direction="horizontal" justify="between" align="center" wrap>
+						<Text size="lg" weight="semibold">
+							{productTitle}
+						</Text>
+						<Badge tone="success">{priceRangeLabel}</Badge>
+					</Stack>
+					<Text size="sm" type="secondary">
+						{productDescription}
+					</Text>
+					<MetadataList
+						layout="rows"
+						density="compact"
+						items={[
+							{
+								id: 'vendor',
+								label: 'Vendor',
+								value: vendor,
+							},
+							{
+								id: 'variants',
+								label: 'Available variants',
+								value: `${variantState.length} options (${totalInventory} in stock)`,
+							},
+						]}
+					/>
+				</Stack>
+			</ActionDialog>
+		</Page>
+	);
+}
+export default ProductsAdminTemplate;