admin-ui-starter-kit 0.6.8 → 0.7.0

package/.agents/skills/component-library-rules/references/components/composed__commerce.md

@@ -1,31 +1,25 @@
 ---
 id: composed/commerce
 title: "Composed · Commerce"
-description: "Bookings, loyalty, discount stacks, shipment tracking, cart, coupons, payment, tax, subscription, refund, address, and voucher surfaces."
+description: "Commerce component family for product, order, payment, fulfillment, promotion, and customer-detail surfaces. Each component has its own page and examples."
 layer: composed
 family: "Commerce"
 sourcePath: src/components/composed/commerce
 examples:
-  - UpcomingBookings
-  - LoyaltyPoints
-  - DiscountStack
-  - ShipmentTracking
 imports:
-  - @/components/base/cards
-  - @/components/composed/commerce
 publicImport: admin-ui-starter-kit/composed/commerce
 tags:
   - composed
   - commerce
-  - bookings
-  - loyalty
-  - discount
-  - stacks
+  - component
+  - family
+  - product
+  - order
 ---
 
 # Composed · Commerce
 
-Bookings, loyalty, discount stacks, shipment tracking, cart, coupons, payment, tax, subscription, refund, address, and voucher surfaces.
+Commerce component family for product, order, payment, fulfillment, promotion, and customer-detail surfaces. Each component has its own page and examples.
 
 **Layer:** `composed`
 **Source:** `src/components/composed/commerce`
@@ -36,135 +30,27 @@ Bookings, loyalty, discount stacks, shipment tracking, cart, coupons, payment, t
 Consumers import this surface from `admin-ui-starter-kit/composed/commerce`.
 The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
 
-## Cart and promotions
-
-<Example name="CartSummaryCardExample" source={extrasSource}>
-	<ExtraExamples.CartSummaryCardExample />
-</Example>
-
-<Example name="CouponInputCardEmptyApplied" source={extrasSource}>
-	<ExtraExamples.CouponInputCardEmptyApplied />
-</Example>
-
-<Example name="VoucherEntryCardExample" source={extrasSource}>
-	<ExtraExamples.VoucherEntryCardExample />
-</Example>
-
-## Fulfillment and billing
-
-<Example name="OrderStatusCardExample" source={extrasSource}>
-	<ExtraExamples.OrderStatusCardExample />
-</Example>
-
-<Example name="PaymentMethodCardExample" source={extrasSource}>
-	<ExtraExamples.PaymentMethodCardExample />
-</Example>
-
-<Example name="TaxBreakdownCardExample" source={extrasSource}>
-	<ExtraExamples.TaxBreakdownCardExample />
-</Example>
-
-## Subscription and customer details
-
-<Example name="SubscriptionSummaryCardExample" source={extrasSource}>
-	<ExtraExamples.SubscriptionSummaryCardExample />
-</Example>
-
-<Example name="RefundStatusCardExample" source={extrasSource}>
-	<ExtraExamples.RefundStatusCardExample />
-</Example>
-
-<Example name="AddressCardExample" source={extrasSource}>
-	<ExtraExamples.AddressCardExample />
-</Example>
-
-## Examples
-
-```tsx
-import {
-	DiscountStackPreview,
-	LoyaltyPointsCard,
-	ShipmentTrackingCard,
-	UpcomingBookingRow,
-} from '@/components/composed/commerce';
-import { SmartCard } from '@/components/base/cards';
-
-export function UpcomingBookings() {
-	return (
-		<div className="w-full max-w-xl">
-			<SmartCard>
-				<UpcomingBookingRow
-					timePlacement="inline-trailing"
-					bookings={[
-						{ id: '1', date: new Date(2026, 2, 28), service: 'Wine Tasting Tour', customer: 'Daniel Smith', time: '14:00', amount: '370 USD' },
-						{ id: '2', date: new Date(2026, 3, 3), service: 'Luxury Spa Day', customer: 'Emma Garcia', time: '10:00', amount: '320 USD' },
-						{ id: '3', date: new Date(2026, 3, 7), service: 'Hot Air Balloon', customer: 'David Williams', time: '06:30', amount: '580 USD' },
-					]}
-				/>
-			</SmartCard>
-		</div>
-	);
-}
-
-export function LoyaltyPoints() {
-	return (
-		<div className="w-full max-w-md">
-			<LoyaltyPointsCard
-				balance="4,830"
-				tier="Gold Tier"
-				history={[
-					{ label: 'Spa booking', points: '+250', date: 'Mar 24', positive: true },
-					{ label: 'Redeemed coupon', points: '-500', date: 'Mar 18', positive: false },
-					{ label: 'Wine tasting order', points: '+180', date: 'Mar 12', positive: true },
-				]}
-				onRedeem={() => {}}
-			/>
-		</div>
-	);
-}
-
-export function DiscountStack() {
-	return (
-		<div className="w-full max-w-lg">
-			<DiscountStackPreview
-				discounts={[
-					{ type: 'Coupon', label: 'SPRING2026 — 25% off', amount: '-88.40 USD', badge: 'info' },
-					{ type: 'Loyalty', label: 'Gold tier — 5% extra', amount: '-17.68 USD', badge: 'warning' },
-					{ type: 'Promo', label: 'Free shipping over 500 USD', amount: '-12.00 USD', badge: 'success' },
-				]}
-				totalSavings="-118.08 USD"
-			/>
-		</div>
-	);
-}
-
-export function ShipmentTracking() {
-	return (
-		<div className="w-full max-w-xl">
-			<ShipmentTrackingCard
-				trackingNumber="TRK-9847261035"
-				carrier="Speedy"
-				status="In Transit"
-				steps={[
-					{ label: 'Picked up', done: true },
-					{ label: 'In transit', done: true },
-					{ label: 'Out for delivery', done: false },
-					{ label: 'Delivered', done: false },
-				]}
-				details={[
-					{ label: 'Est. Delivery', value: 'Mar 29, 2026' },
-					{ label: 'Recipient', value: 'Daniel Smith' },
-				]}
-			/>
-		</div>
-	);
-}
-```
-
-## Example exports
-
-- `UpcomingBookings`
-- `LoyaltyPoints`
-- `DiscountStack`
-- `ShipmentTracking`
+## Component pages
+
+The Commerce family is split into focused component pages so each surface has
+its own examples, props table, and usage context.
+
+- [Upcoming booking](#/composed/commerce-upcoming-booking)
+- [Loyalty points](#/composed/commerce-loyalty-points)
+- [Discount stack](#/composed/commerce-discount-stack)
+- [Shipment tracking](#/composed/commerce-shipment-tracking)
+- [Cart summary](#/composed/commerce-cart-summary)
+- [Coupon input](#/composed/commerce-coupon-input)
+- [Voucher entry](#/composed/commerce-voucher-entry)
+- [Order status](#/composed/commerce-order-status)
+- [Payment method](#/composed/commerce-payment-method)
+- [Tax breakdown](#/composed/commerce-tax-breakdown)
+- [Subscription summary](#/composed/commerce-subscription-summary)
+- [Refund status](#/composed/commerce-refund-status)
+- [Address card](#/composed/commerce-address-card)
+- [SEO listing](#/composed/commerce-seo-listing)
+- [Inventory section](#/composed/commerce-inventory-section)
+
+All components import from the same public package surface:
+`admin-ui-starter-kit/composed/commerce`.
 

package/.agents/skills/component-library-rules/references/components/features__products.md

@@ -6,18 +6,8 @@ layer: features
 family: "Commerce"
 sourcePath: src/components/features/products
 examples:
-  - ProductEditor
-  - OptionsAndVariants
-  - VariantDetailsAndEditor
-  - StandaloneActionMenus
-  - ProductSupportRail
 imports:
-  - @/components/base/badge
-  - @/components/base/buttons
-  - @/components/base/cards
-  - @/components/composed/data-display/metadata
   - @/components/features/products
-  - @/components/typography
 publicImport: admin-ui-starter-kit/features/products
 tags:
   - features
@@ -42,466 +32,32 @@ Shopify-style product editor surfaces built from standalone product feature comp
 Consumers import this surface from `admin-ui-starter-kit/features/products`.
 The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
 
+## Child pages
+
+- [Variant management](#/features/products/variant-management) — option matrix, editable generated variants, bulk actions, and table controls.
+- [Variant details and editor](#/features/products/variant-details) — variant detail surface and form editor.
+- [Action menus](#/features/products/actions) — option and variant action menu contracts.
+- [Support rail](#/features/products/support-rail) — readiness, structure, operations, quote, and policy cards.
+
 ## Full editor
 
 <Example name="ProductEditor" source={examplesSource}>
 	<Examples.ProductEditor />
 </Example>
 
-## Options and variants
-
-<Example name="OptionsAndVariants" source={examplesSource}>
-	<Examples.OptionsAndVariants />
-</Example>
-
-<Example name="VariantDetailsAndEditor" source={examplesSource}>
-	<Examples.VariantDetailsAndEditor />
-</Example>
-
-## Action menus
-
-<Example name="StandaloneActionMenus" source={examplesSource}>
-	<Examples.StandaloneActionMenus />
-</Example>
-
-## Support rail
-
-<Example name="ProductSupportRail" source={examplesSource}>
-	<Examples.ProductSupportRail />
-</Example>
-
 ## Examples
 
 ```tsx
-import { useState, type ReactNode } from 'react';
-import { Image, Languages, PackageCheck, Tags } from 'lucide-react';
-
-import { Badge } from '@/components/base/badge';
-import { Button } from '@/components/base/buttons';
-import { SmartCard } from '@/components/base/cards';
-import { MetadataList } from '@/components/composed/data-display/metadata';
-import { Heading, Text } from '@/components/typography';
-import {
-	ProductOptionActionMenu,
-	ProductOperationsCard,
-	ProductOptionsSummary,
-	Products,
-	ProductPoliciesCard,
-	ProductQuotePreviewCard,
-	ProductReadinessCard,
-	ProductStructureCard,
-	ProductVariantActionMenu,
-	ProductVariantDetails,
-	ProductVariantEditor,
-	ProductVariantsTable,
-	type ProductChoice,
-	type ProductOptionSummary,
-	type ProductVariantEditorValues,
-	type ProductVariantOptionField,
-	type ProductVariantSummary,
-} from '@/components/features/products';
-import heroUrl from '@/assets/hero.png';
-import { cn } from '@/lib/utils';
-
-const variants: ProductVariantSummary[] = [
-	{
-		id: 'classic',
-		name: 'Classic bottle',
-		description: 'Standard retail pack',
-		options: ['375 ml', 'Classic label'],
-		sku: 'BAL-375-CL',
-		price: 'US$ 18.00',
-		inventory: '82',
-		channels: 'Online store, POS',
-		updatedAt: 'Today',
-		status: 'Active',
-		statusVariant: 'success',
-	},
-	{
-		id: 'gift',
-		name: 'Gift box',
-		description: 'Bottle, pourer, tasting card',
-		options: ['750 ml', 'Gift packaging'],
-		sku: 'BAL-750-GF',
-		price: 'US$ 46.00',
-		inventory: '28',
-		channels: 'Online store',
-		updatedAt: 'Yesterday',
-		status: 'Review',
-		statusVariant: 'warning',
-	},
-	{
-		id: 'case',
-		name: 'Case of six',
-		description: 'Wholesale case pack',
-		options: ['6 x 750 ml', 'Wholesale'],
-		sku: 'BAL-CASE-6',
-		price: 'US$ 132.00',
-		inventory: '14',
-		channels: 'B2B',
-		updatedAt: 'Jun 12',
-		status: 'Active',
-		statusVariant: 'success',
-	},
-];
-
-const options: ProductOptionSummary[] = [
-	{
-		id: 'size',
-		label: 'Size',
-		description: 'Controls bottle volume and variant price.',
-		values: ['375 ml', '750 ml', 'Case of six'],
-		value: '3 values',
-		tone: 'primary',
-	},
-	{
-		id: 'packaging',
-		label: 'Packaging',
-		description: 'Customer-facing presentation options.',
-		values: ['Classic label', 'Gift packaging', 'Wholesale'],
-		value: '3 values',
-		tone: 'neutral',
-	},
-	{
-		id: 'gift-message',
-		label: 'Gift message',
-		description: 'Optional card text collected at checkout.',
-		values: ['None', 'Printed card'],
-		value: 'Optional',
-		tone: 'success',
-	},
-];
-
-const noop = () => {};
-
-const variantStatusOptions: ProductChoice[] = [
-	{ value: 'active', label: 'Active' },
-	{ value: 'review', label: 'Review' },
-	{ value: 'draft', label: 'Draft' },
-];
-
-const variantOptionFields: ProductVariantOptionField[] = [
-	{
-		id: 'size',
-		label: 'Size',
-		choices: [
-			{ value: '375 ml', label: '375 ml' },
-			{ value: '750 ml', label: '750 ml' },
-			{ value: 'Case of six', label: 'Case of six' },
-		],
-	},
-	{
-		id: 'packaging',
-		label: 'Packaging',
-		choices: [
-			{ value: 'Classic label', label: 'Classic label' },
-			{ value: 'Gift packaging', label: 'Gift packaging' },
-			{ value: 'Wholesale', label: 'Wholesale' },
-		],
-	},
-];
-
-const variantEditorValue: ProductVariantEditorValues = {
-	name: 'Classic bottle',
-	description: 'Standard retail pack',
-	sku: 'BAL-375-CL',
-	price: 'US$ 18.00',
-	inventory: '82',
-	status: 'active',
-	channels: 'Online store, POS',
-	options: {
-		size: '375 ml',
-		packaging: 'Classic label',
-	},
-};
-
-function ProductPreviewViewport({ children }: { children: ReactNode }) {
-	return (
-		<div className="max-h-[42rem] overflow-auto pr-2">
-			{children}
-		</div>
-	);
-}
-
-function ProductMediaPreview({ frame = 'square' }: { frame?: 'square' | 'wide' }) {
-	return (
-		<div className={cn(
-			'relative overflow-hidden rounded-md border border-border bg-muted',
-			frame === 'square' ? 'aspect-square' : 'aspect-[4/3] max-h-72',
-		)}
-		>
-			<img src={heroUrl} alt="Balsamic tasting set" className="h-full w-full object-cover" />
-			<div className="absolute inset-x-0 bottom-0 bg-background/85 px-3 py-2 backdrop-blur-sm">
-				<Text size="xs" weight="semibold">Primary media</Text>
-				<Text size="xs" type="secondary">Alt text and gallery remain app-owned.</Text>
-			</div>
-		</div>
-	);
-}
-
-function productOverviewProps() {
-	return {
-		details: {
-			media: <ProductMediaPreview />,
-			metadata: [
-				{ label: 'Status', value: <Badge variant="success">Active</Badge> },
-				{ label: 'Vendor', value: 'Aegean Pantry Co.' },
-				{ label: 'Category', value: 'Food & pantry' },
-				{ label: 'Product type', value: 'Physical good' },
-				{ label: 'Base price', value: 'US$ 18.00' },
-				{ label: 'Tax class', value: 'Standard' },
-			],
-		},
-		contract: {
-			metrics: [
-				{ id: 'margin', label: 'Margin', value: '48%', description: 'After landed cost', tone: 'success' as const },
-				{ id: 'lead-time', label: 'Lead time', value: '3 days', description: 'Warehouse average', tone: 'info' as const },
-				{ id: 'tax', label: 'Tax', value: 'Included', description: 'Shown in checkout', tone: 'neutral' as const },
-			],
-			terms: [
-				{ label: 'Payment', value: 'Due at checkout' },
-				{ label: 'Fulfilment', value: 'Warehouse dispatch' },
-				{ label: 'Cancellation', value: 'Before dispatch' },
-				{ label: 'Availability', value: 'Stock constrained' },
-			],
-			rules: [
-				{ id: 'gross', label: 'Tax included', description: 'Customer quotes show gross pricing.', tone: 'success' as const },
-				{ id: 'b2b', label: 'Wholesale allowed', description: 'Case pack available to the B2B channel.', tone: 'info' as const },
-			],
-		},
-		options: {
-			options,
-			onManageOptions: noop,
-			onCreateOption: noop,
-			onSelectOption: noop,
-			onEditOption: noop,
-			onDeleteOption: noop,
-		},
-		variants: {
-			variants,
-			onCreateVariant: noop,
-			onSelectVariant: noop,
-			onEditVariant: noop,
-			onDuplicateVariant: noop,
-			onDeleteVariant: noop,
-		},
-	};
-}
-
-function railProps() {
-	return {
-		readiness: {
-			score: 86,
-			summary: 'Ready to publish once translation review and replenishment dates are confirmed.',
-			onCreateReadinessItem: noop,
-			onSelectReadinessItem: noop,
-			onEditReadinessItem: noop,
-			onDeleteReadinessItem: noop,
-			items: [
-				{ id: 'copy', label: 'Product copy', description: 'Title, description, SEO summary complete.', completed: true },
-				{ id: 'media', label: 'Media', description: 'Cover image and gallery uploaded.', completed: true },
-				{ id: 'translation', label: 'Translations', description: 'Greek and German copy need review.', value: '2 locales', tone: 'warning' as const },
-				{ id: 'inventory', label: 'Inventory policy', description: 'Restock date still needs supplier confirmation.', value: 'Review', tone: 'warning' as const },
-			],
-		},
-		structure: {
-			onCreateMetric: noop,
-			onSelectMetric: noop,
-			onEditMetric: noop,
-			onDeleteMetric: noop,
-			metrics: [
-				{ id: 'media', label: 'Media', value: '8', description: '1 cover, 7 gallery', tone: 'success' as const, icon: <Image className="size-4" /> },
-				{ id: 'categories', label: 'Collections', value: '3', description: 'Pantry, gifts, tasting', tone: 'info' as const, icon: <Tags className="size-4" /> },
-				{ id: 'locales', label: 'Locales', value: '2 / 4', description: 'EN live, EL review', tone: 'warning' as const, icon: <Languages className="size-4" /> },
-				{ id: 'variants', label: 'Variants', value: '3', description: 'All sellable', tone: 'success' as const, icon: <PackageCheck className="size-4" /> },
-			],
-		},
-		operations: {
-			onCreateOperation: noop,
-			onSelectOperation: noop,
-			onEditOperation: noop,
-			onDeleteOperation: noop,
-			items: [
-				{ id: 'stock', label: 'Stock policy', description: 'Checkout blocked below available inventory.', value: 'Active', tone: 'success' as const },
-				{ id: 'channels', label: 'Sales channels', description: 'Online store, POS, and B2B market enabled.', value: '3', tone: 'info' as const },
-				{ id: 'calendar', label: 'Restock calendar', description: 'Next supplier run pending confirmation.', value: 'Review', tone: 'warning' as const },
-			],
-		},
-		quote: {
-			onCreateLine: noop,
-			onSelectLine: noop,
-			onEditLine: noop,
-			onDeleteLine: noop,
-			lines: [
-				{ id: 'bottle', label: 'Classic bottle', quantity: '2 x US$ 18.00', amount: 'US$ 36.00' },
-				{ id: 'gift', label: 'Gift packaging', quantity: '1 x US$ 5.00', amount: 'US$ 5.00' },
-			],
-			subtotal: 'US$ 41.00',
-			tax: 'Included',
-			total: 'US$ 41.00',
-		},
-		policies: {
-			onCreatePolicy: noop,
-			onSelectPolicy: noop,
-			onEditPolicy: noop,
-			onDeletePolicy: noop,
-			policies: [
-				{ id: 'returns', label: 'Returns', description: 'Unopened goods can be returned within 14 days.', tone: 'success' as const },
-				{ id: 'shipping', label: 'Shipping', description: 'Ambient warehouse dispatch only.', tone: 'neutral' as const },
-			],
-		},
-	};
-}
-
-export function ProductEditor() {
-	const main = productOverviewProps();
-	const rail = railProps();
-
-	return (
-		<ProductPreviewViewport>
-			<div className="w-full rounded-lg border border-border bg-muted/20 p-4">
-				<div className="mb-4 flex flex-col gap-4 border-b border-border pb-4 lg:flex-row lg:items-start lg:justify-between">
-					<div className="min-w-0 space-y-3">
-						<div className="flex flex-wrap items-center gap-2">
-							<Badge variant="success">Active</Badge>
-							<Badge variant="info">3 variants</Badge>
-							<Badge variant="warning">2 review items</Badge>
-						</div>
-						<div>
-							<Heading tag="h2" className="border-none pb-0">Balsamic tasting set</Heading>
-							<Text type="secondary" className="mt-1 max-w-3xl">
-								Shopify-style product editor composed from product details, options, variants, readiness, operations, and quote cards.
-							</Text>
-						</div>
-						<MetadataList
-							layout="horizontal"
-							items={[
-								{ label: 'SKU', value: 'BAL-TASTE-01' },
-								{ label: 'Vendor', value: 'Aegean Pantry Co.' },
-								{ label: 'Market', value: 'US online store' },
-								{ label: 'Updated', value: 'Today' },
-							]}
-							columns={4}
-						/>
-					</div>
-					<div className="flex shrink-0 flex-wrap gap-2">
-						<Button variant="secondary" buttonStyle="outline">Preview</Button>
-						<Button>Save product</Button>
-					</div>
-				</div>
-
-				<Products
-					details={main.details}
-					contract={main.contract}
-					options={main.options}
-					variants={main.variants}
-					readiness={rail.readiness}
-					structure={rail.structure}
-					operations={rail.operations}
-					quote={rail.quote}
-					policies={rail.policies}
-				/>
-			</div>
-		</ProductPreviewViewport>
-	);
-}
-
-export function OptionsAndVariants() {
-	const main = productOverviewProps();
-
-	return (
-		<ProductPreviewViewport>
-			<div className="grid w-full gap-4">
-				<ProductOptionsSummary {...main.options} />
-				<ProductVariantsTable {...main.variants} />
-			</div>
-		</ProductPreviewViewport>
-	);
-}
-
-export function VariantDetailsAndEditor() {
-	const [value, setValue] = useState<ProductVariantEditorValues>(variantEditorValue);
-
-	return (
-		<ProductPreviewViewport>
-			<div className="grid w-full gap-4 xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
-				<ProductVariantDetails
-					variant={variants[0]}
-					optionItems={options.slice(0, 2)}
-					media={<ProductMediaPreview frame="wide" />}
-					onBack={noop}
-					onSelectVariant={noop}
-					onEditVariant={noop}
-					onDuplicateVariant={noop}
-					onDeleteVariant={noop}
-					onSelectOption={noop}
-				/>
-				<ProductVariantEditor
-					value={value}
-					optionFields={variantOptionFields}
-					statusOptions={variantStatusOptions}
-					onValueChange={setValue}
-					onSubmit={noop}
-					onCancel={noop}
-					onDelete={noop}
-				/>
-			</div>
-		</ProductPreviewViewport>
-	);
-}
-
-export function StandaloneActionMenus() {
-	return (
-		<div className="grid w-full gap-4 sm:grid-cols-2">
-			<SmartCard
-				title="Option actions"
-				description="The menu can be used next to any option row or custom layout."
-			>
-				<ProductOptionActionMenu
-					option={options[0]}
-					onSelectOption={noop}
-					onEditOption={noop}
-					onDeleteOption={noop}
-				/>
-			</SmartCard>
-			<SmartCard
-				title="Variant actions"
-				description="The same variant actions work outside the table."
-			>
-				<ProductVariantActionMenu
-					variant={variants[0]}
-					onSelectVariant={noop}
-					onEditVariant={noop}
-					onDuplicateVariant={noop}
-					onDeleteVariant={noop}
-				/>
-			</SmartCard>
-		</div>
-	);
-}
-
-export function ProductSupportRail() {
-	const rail = railProps();
-
-	return (
-		<ProductPreviewViewport>
-			<div className="grid w-full gap-4 lg:grid-cols-2">
-				<ProductReadinessCard {...rail.readiness} />
-				<ProductStructureCard {...rail.structure} />
-				<ProductOperationsCard {...rail.operations} />
-				<ProductQuotePreviewCard {...rail.quote} />
-				<ProductPoliciesCard {...rail.policies} />
-			</div>
-		</ProductPreviewViewport>
-	);
-}
+export type { ProductVariantsManagerProps } from '@/components/features/products';
+
+export { ProductEditor } from './products/overview.examples';
+export { ProductSupportRail } from './products/support-rail.examples';
+export { StandaloneActionMenus } from './products/action-menus.examples';
+export { VariantDetailsAndEditor } from './products/variant-details.examples';
+export {
+	VariantManagement,
+	VariantManagement as OptionsAndVariants,
+	VariantTableControls,
+} from './products/variant-management.examples';
 ```
 
-## Example exports
-
-- `ProductEditor`
-- `OptionsAndVariants`
-- `VariantDetailsAndEditor`
-- `StandaloneActionMenus`
-- `ProductSupportRail`
-