@mohasinac/appkit 3.4.8 → 3.5.0

package/dist/features/shipments/schemas/validation.js

@@ -0,0 +1,96 @@
+import { z } from "zod";
+import { mediaFieldSchema } from "../../media/types/index";
+import { MAX_ITEMS_PER_LOT } from "./firestore";
+export const shipmentStatusSchema = z.enum([
+    "planning",
+    "ordered",
+    "in_transit",
+    "customs",
+    "received",
+    "processing",
+    "completed",
+    "cancelled",
+]);
+const productConditionSchema = z.enum([
+    "new",
+    "like_new",
+    "good",
+    "fair",
+    "poor",
+    "used",
+    "refurbished",
+    "broken",
+    "graded",
+]);
+// Mirrors ProductDocument's ListingType union (products/types/index.ts) — the
+// linked-product type a main item can be turned into via the link route.
+const listingTypeSchema = z.enum([
+    "standard",
+    "auction",
+    "pre-order",
+    "prize-draw",
+    "classified",
+    "digital-code",
+    "live",
+    "art",
+    "stickers",
+]);
+export const createShipmentSchema = z.object({
+    shipmentNumber: z.string().min(1, "Shipment number is required"),
+    supplierName: z.string().min(1, "Supplier name is required"),
+    originCountry: z.string().optional(),
+    status: shipmentStatusSchema,
+    trackingNumber: z.string().optional(),
+    carrier: z.string().optional(),
+    etaDate: z.union([z.string(), z.date()]).optional(),
+    receivedDate: z.union([z.string(), z.date()]).optional(),
+    notes: z.string().optional(),
+    customsTotalPaise: z.number().int().min(0),
+    shippingTotalPaise: z.number().int().min(0),
+    laborHoursSpent: z.number().min(0).optional(),
+    laborRatePaisePerHour: z.number().int().min(0).optional(),
+});
+export const updateShipmentSchema = createShipmentSchema.partial();
+export const createShipmentLotSchema = z.object({
+    lotName: z.string().min(1, "Lot name is required"),
+    supplierOrderRef: z.string().optional(),
+    weightGrams: z.number().min(0),
+    purchaseCostPaise: z.number().int().min(0),
+    images: z.array(mediaFieldSchema).optional().default([]),
+    remainderItemCount: z.number().int().min(0).optional(),
+    remainderEstimatedValuePaise: z.number().int().min(0).optional(),
+});
+export const updateShipmentLotSchema = createShipmentLotSchema.partial();
+const shipmentItemBaseSchema = z.object({
+    title: z.string().min(1, "Item title is required"),
+    quantity: z.number().int().min(1),
+    isForSelfUse: z.boolean(),
+    price: z.number().int().min(0).optional(),
+    condition: productConditionSchema.optional(),
+    categorySlugs: z.array(z.string()).optional(),
+    brandSlug: z.string().optional(),
+    notes: z.string().optional(),
+});
+export const createShipmentItemSchema = shipmentItemBaseSchema.refine((item) => item.isForSelfUse || typeof item.price === "number", { message: "Projected sale price is required unless the item is for self use", path: ["price"] });
+export const updateShipmentItemSchema = shipmentItemBaseSchema.partial().extend({
+    // Link/unlink fields — written by the link route and by the unlink action
+    // (PATCH with `null` to clear). Not part of item creation, so kept out of
+    // shipmentItemBaseSchema and declared nullable here rather than merely
+    // optional, since Zod strips unknown keys and silently drops any field the
+    // schema doesn't declare — omitting these here would make "unlink" a no-op.
+    linkedProductId: z.string().nullable().optional(),
+    linkedProductSlug: z.string().nullable().optional(),
+    linkedProductListingType: listingTypeSchema.nullable().optional(),
+});
+/**
+ * Bulk paste-import payload — capped at MAX_ITEMS_PER_LOT (500), matching
+ * Firestore's native batched-write limit so the route can write the whole
+ * import in one WriteBatch with no chunking logic.
+ */
+export const bulkShipmentItemsSchema = z
+    .array(shipmentItemBaseSchema)
+    .min(1, "Add at least one item")
+    .max(MAX_ITEMS_PER_LOT, `A single import cannot exceed ${MAX_ITEMS_PER_LOT} items`)
+    .refine((items) => items.every((item) => item.isForSelfUse || typeof item.price === "number"), {
+    message: "Every row needs a projected sale price unless marked self-use",
+});

package/dist/features/shipments/utils/cost-allocation.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Procurement Shipment cost allocation.
+ *
+ * Authoritative caller is the Firestore-triggered Function cascade
+ * (appkit/src/_internal/server/functions/firestore/on-shipment-lot-write.ts)
+ * — totals are never computed inline in a Vercel route or React component.
+ * The admin editor may still call this client-side for a cosmetic live
+ * preview, but only the Function's write is ever persisted.
+ */
+import type { ShipmentLot, ShipmentTotals } from "../schemas/firestore";
+export type LotAllocationInput = Pick<ShipmentLot, "id" | "purchaseCostPaise" | "weightGrams" | "mainItemsProjectedRevenuePaise" | "remainderEstimatedValuePaise" | "itemCount">;
+export type LotAllocationResult = Pick<ShipmentLot, "customsAllocatedPaise" | "shippingAllocatedPaise" | "totalLandedCostPaise" | "projectedRevenuePaise" | "projectedProfitPaise">;
+export interface AllocateShipmentCostsInput {
+    lots: LotAllocationInput[];
+    customsTotalPaise: number;
+    shippingTotalPaise: number;
+    laborHoursSpent: number;
+    laborRatePaisePerHour: number;
+    maxHoursPerDay: number;
+}
+export interface AllocateShipmentCostsResult {
+    perLot: Record<string, LotAllocationResult>;
+    totals: ShipmentTotals;
+}
+export declare function allocateShipmentCosts(input: AllocateShipmentCostsInput): AllocateShipmentCostsResult;

package/dist/features/shipments/utils/cost-allocation.js

@@ -0,0 +1,83 @@
+/**
+ * Procurement Shipment cost allocation.
+ *
+ * Authoritative caller is the Firestore-triggered Function cascade
+ * (appkit/src/_internal/server/functions/firestore/on-shipment-lot-write.ts)
+ * — totals are never computed inline in a Vercel route or React component.
+ * The admin editor may still call this client-side for a cosmetic live
+ * preview, but only the Function's write is ever persisted.
+ */
+/**
+ * Splits `totalPaise` across `weights` proportionally, with the remainder
+ * corrected onto the last non-zero-weight entry so the sum always
+ * reconciles exactly to `totalPaise` (integer-paise-safe).
+ */
+function allocateProportionally(totalPaise, weights) {
+    const totalWeight = weights.reduce((s, w) => s + w, 0);
+    if (totalWeight <= 0 || totalPaise === 0)
+        return weights.map(() => 0);
+    const shares = weights.map((w) => Math.round((totalPaise * w) / totalWeight));
+    const allocated = shares.reduce((s, v) => s + v, 0);
+    const remainder = totalPaise - allocated;
+    if (remainder !== 0) {
+        let lastPositiveIndex = -1;
+        for (let i = weights.length - 1; i >= 0; i--) {
+            if (weights[i] > 0) {
+                lastPositiveIndex = i;
+                break;
+            }
+        }
+        if (lastPositiveIndex >= 0)
+            shares[lastPositiveIndex] += remainder;
+    }
+    return shares;
+}
+export function allocateShipmentCosts(input) {
+    const { lots, customsTotalPaise, shippingTotalPaise, laborHoursSpent, laborRatePaisePerHour, maxHoursPerDay } = input;
+    const costWeights = lots.map((lot) => lot.purchaseCostPaise);
+    const weightWeights = lots.map((lot) => lot.weightGrams);
+    const customsShares = allocateProportionally(customsTotalPaise, costWeights);
+    const shippingShares = allocateProportionally(shippingTotalPaise, weightWeights);
+    const perLot = {};
+    let totalProjectedRevenuePaise = 0;
+    let totalItemCount = 0;
+    lots.forEach((lot, i) => {
+        const customsAllocatedPaise = customsShares[i];
+        const shippingAllocatedPaise = shippingShares[i];
+        const totalLandedCostPaise = lot.purchaseCostPaise + customsAllocatedPaise + shippingAllocatedPaise;
+        const projectedRevenuePaise = lot.mainItemsProjectedRevenuePaise + (lot.remainderEstimatedValuePaise ?? 0);
+        const projectedProfitPaise = projectedRevenuePaise - totalLandedCostPaise;
+        perLot[lot.id] = {
+            customsAllocatedPaise,
+            shippingAllocatedPaise,
+            totalLandedCostPaise,
+            projectedRevenuePaise,
+            projectedProfitPaise,
+        };
+        totalProjectedRevenuePaise += projectedRevenuePaise;
+        totalItemCount += lot.itemCount;
+    });
+    const lotsCostPaise = costWeights.reduce((s, v) => s + v, 0);
+    const laborCostPaise = Math.round(laborHoursSpent * laborRatePaisePerHour);
+    const totalShipmentCostPaise = lotsCostPaise + customsTotalPaise + shippingTotalPaise;
+    const projectedProfitPaise = totalProjectedRevenuePaise - totalShipmentCostPaise;
+    const projectedProfitAfterLaborPaise = projectedProfitPaise - laborCostPaise;
+    const totalWeightGrams = weightWeights.reduce((s, v) => s + v, 0);
+    const totals = {
+        lotsCostPaise,
+        customsTotalPaise,
+        shippingTotalPaise,
+        laborCostPaise,
+        totalShipmentCostPaise,
+        totalProjectedRevenuePaise,
+        projectedProfitPaise,
+        projectedProfitAfterLaborPaise,
+        projectedMarginPercent: totalProjectedRevenuePaise > 0 ? (projectedProfitPaise / totalProjectedRevenuePaise) * 100 : 0,
+        projectedRoiPercent: totalShipmentCostPaise > 0 ? (projectedProfitPaise / totalShipmentCostPaise) * 100 : 0,
+        totalWeightGrams,
+        totalItemCount,
+        lotCount: lots.length,
+        estimatedProcessingDays: maxHoursPerDay > 0 ? laborHoursSpent / maxHoursPerDay : 0,
+    };
+    return { perLot, totals };
+}

package/dist/features/site-settings/components/ActionPermissionsManager.js

@@ -8,7 +8,7 @@ import { useToast } from "../../../ui";
 const __O = {
     hidden: "overflow-hidden",
 };
-const CLS_CUSTOM_PILL = "inline-block rounded-full bg-warning-surface px-2 py-0.5 text-xs font-medium text-warning dark:bg-warning-surface dark:text-warning";
+const CLS_CUSTOM_PILL = "inline-block rounded-full bg-warning-surface px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[length:var(--appkit-text-xs)] font-medium text-warning dark:bg-warning-surface dark:text-warning";
 const CATEGORY_LABELS = {
     "buy-now": "Public CTA",
     "add-to-cart": "Public CTA",
@@ -92,7 +92,7 @@ export function ActionPermissionsManager({ initialConfig, onUpdate }) {
         });
     };
     const isEnabled = (id) => config[id]?.enabled ?? ACTION_META[id]?.defaultEnabled ?? true;
-    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Row, { align: "center", gap: "3", children: [_jsx(Input, { placeholder: "Search actions\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "h-9 max-w-sm text-sm" }), _jsxs(Text, { size: "sm", color: "muted", children: [filteredActions.length, " action", filteredActions.length !== 1 ? "s" : ""] })] }), _jsx(Div, { className: `${__O.hidden}`, rounded: "xl", border: "default", children: _jsxs(Table, { size: "sm", children: [_jsx(Thead, { children: _jsxs(Tr, { surface: "subtle", border: "default", children: [_jsx(Th, { className: "text-left", padding: "md", color: "primary", weight: "semibold", children: "Action" }), _jsx(Th, { className: "text-left", padding: "md", color: "primary", weight: "semibold", children: "Category" }), _jsx(Th, { className: "text-left", padding: "md", color: "primary", weight: "semibold", children: "Auth" }), _jsx(Th, { className: "text-left", padding: "md", color: "primary", weight: "semibold", children: "Permission" }), _jsx(Th, { className: "text-right", padding: "md", color: "primary", weight: "semibold", children: "Enabled" })] }) }), _jsx(Tbody, { children: filteredActions.map((id, idx) => {
+    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Row, { align: "center", gap: "3", children: [_jsx(Input, { placeholder: "Search actions\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "h-9 max-w-sm text-[length:var(--appkit-text-sm)]" }), _jsxs(Text, { size: "sm", color: "muted", children: [filteredActions.length, " action", filteredActions.length !== 1 ? "s" : ""] })] }), _jsx(Div, { className: `${__O.hidden}`, rounded: "xl", border: "default", children: _jsxs(Table, { size: "sm", children: [_jsx(Thead, { children: _jsxs(Tr, { surface: "subtle", border: "default", children: [_jsx(Th, { className: "text-left", padding: "md", color: "primary", weight: "semibold", children: "Action" }), _jsx(Th, { className: "text-left", padding: "md", color: "primary", weight: "semibold", children: "Category" }), _jsx(Th, { className: "text-left", padding: "md", color: "primary", weight: "semibold", children: "Auth" }), _jsx(Th, { className: "text-left", padding: "md", color: "primary", weight: "semibold", children: "Permission" }), _jsx(Th, { className: "text-right", padding: "md", color: "primary", weight: "semibold", children: "Enabled" })] }) }), _jsx(Tbody, { children: filteredActions.map((id, idx) => {
                                 const meta = ACTION_META[id];
                                 const enabled = isEnabled(id);
                                 const category = CATEGORY_LABELS[id] ?? "Other";

package/dist/features/stores/components/InteractiveStoreCard.js

@@ -9,7 +9,7 @@ import { useLongPress } from "../../../react/hooks/useLongPress";
 const __O = {
     hidden: "overflow-hidden",
 };
-const CLS_RATING_BADGE = "absolute top-2 right-2 flex items-center gap-1 rounded-full bg-black/50 backdrop-blur-sm px-2 py-0.5 text-xs font-semibold text-warning";
+const CLS_RATING_BADGE = "absolute top-2 right-2 flex items-center gap-[var(--appkit-space-1)] rounded-full bg-black/50 backdrop-blur-sm px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[length:var(--appkit-text-xs)] font-semibold text-warning";
 export function InteractiveStoreCard({ store, href, selectable, isSelected = false, onSelect, labels = {}, className = "", }) {
     const initial = store.storeName[0]?.toUpperCase() ?? "S";
     const [logoBroken, setLogoBroken] = useState(false);
@@ -25,5 +25,5 @@ export function InteractiveStoreCard({ store, href, selectable, isSelected = fal
         ].join(" "), onMouseDown: !isSelected ? longPress.onMouseDown : undefined, onMouseUp: !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: !isSelected ? longPress.onTouchEnd : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => {
                     e.preventDefault();
                     onSelect(store.id, !isSelected);
-                }, label: isSelected ? "Deselect store" : "Select store", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsxs(Link, { href: href, className: "flex flex-col flex-1 min-h-0", children: [_jsxs(Div, { surface: "muted", className: `relative aspect-video w-full ${__O.hidden} flex-shrink-0`, children: [hasBanner ? (_jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner", className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" })) : (_jsx(Row, { className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-20 select-none", size: "5xl", "aria-hidden": "true", children: "\uD83C\uDFEA" }) })), _jsx(Scrim, { direction: "bottom-up", intensity: "subtle", className: "absolute inset-x-0 bottom-0 h-12" }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Div, { className: CLS_RATING_BADGE, children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Stack, { paddingY: "b-md", className: "flex-1", padding: "x-md", children: [_jsx(Row, { className: "-mt-5 mb-2", align: "end", justify: "between", children: _jsx(Div, { className: "flex-shrink-0", children: hasLogo ? (_jsx(Div, { className: "relative h-10 w-10 border-2 border-white border-[var(--appkit-color-border-subtle)] bg-[var(--appkit-color-surface)]", rounded: "lg", shadow: "md", overflow: "hidden", children: _jsx(MediaImage, { src: store.storeLogoURL, alt: store.storeName, size: "thumbnail", onError: () => setLogoBroken(true) }) })) : (_jsx(Row, { textWeight: "bold", textSize: "base", className: "h-10 w-10 border-2 border-white bg-primary/10 dark:bg-primary/20 text-primary", align: "center", justify: "center", rounded: "lg", shadow: "md", children: initial })) }) }), _jsx(Heading, { level: 3, className: `group-hover:text-primary transition-colors`, truncate: true, size: "sm", weight: "bold", color: "primary", children: store.storeName }), store.storeDescription ? (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mt-1 line-clamp-2 text-xs text-[var(--appkit-color-text-muted)] flex-1" })) : (_jsx(Div, { className: "flex-1" })), _jsxs(Row, { color: "muted", textSize: "xs", gap: "sm", className: "mt-2.5", wrap: true, children: [store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), " ", store.totalProducts, " ", labels.products ?? "products"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDECD\uFE0F" }), " ", store.itemsSold, " ", labels.sold ?? "sold"] }))] }), _jsxs(Row, { border: "top-subtle", paddingY: "y-xs-tall", className: "mt-3", align: "center", justify: "between", children: [_jsxs(Span, { size: "xs", weight: "semibold", className: "text-primary group-hover:underline transition-colors", children: [labels.visitStore ?? "Visit store", " \u2192"] }), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { size: "xs", color: "muted", children: [store.totalReviews, " ", labels.reviews ?? "reviews"] }))] })] })] })] }));
+                }, label: isSelected ? "Deselect store" : "Select store", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsxs(Link, { href: href, className: "flex flex-col flex-1 min-h-0", children: [_jsxs(Div, { surface: "muted", className: `relative aspect-video w-full ${__O.hidden} flex-shrink-0`, children: [hasBanner ? (_jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner", className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" })) : (_jsx(Row, { className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-20 select-none", size: "5xl", "aria-hidden": "true", children: "\uD83C\uDFEA" }) })), _jsx(Scrim, { direction: "bottom-up", intensity: "subtle", className: "absolute inset-x-0 bottom-0 h-12" }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Div, { className: CLS_RATING_BADGE, children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Stack, { paddingY: "b-md", className: "flex-1", padding: "x-md", children: [_jsx(Row, { className: "-mt-5 mb-2", align: "end", justify: "between", children: _jsx(Div, { className: "flex-shrink-0", children: hasLogo ? (_jsx(Div, { className: "relative h-10 w-10 border-2 border-white border-[var(--appkit-color-border-subtle)] bg-[var(--appkit-color-surface)]", rounded: "lg", shadow: "md", overflow: "hidden", children: _jsx(MediaImage, { src: store.storeLogoURL, alt: store.storeName, size: "thumbnail", onError: () => setLogoBroken(true) }) })) : (_jsx(Row, { textWeight: "bold", textSize: "base", className: "h-10 w-10 border-2 border-white bg-primary/10 dark:bg-primary/20 text-primary", align: "center", justify: "center", rounded: "lg", shadow: "md", children: initial })) }) }), _jsx(Heading, { level: 3, className: `group-hover:text-primary transition-colors`, truncate: true, size: "sm", weight: "bold", color: "primary", children: store.storeName }), store.storeDescription ? (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mt-1 line-clamp-2 text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)] flex-1" })) : (_jsx(Div, { className: "flex-1" })), _jsxs(Row, { color: "muted", textSize: "xs", gap: "sm", className: "mt-2.5", wrap: true, children: [store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), " ", store.totalProducts, " ", labels.products ?? "products"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDECD\uFE0F" }), " ", store.itemsSold, " ", labels.sold ?? "sold"] }))] }), _jsxs(Row, { border: "top-subtle", paddingY: "y-xs-tall", className: "mt-3", align: "center", justify: "between", children: [_jsxs(Span, { size: "xs", weight: "semibold", className: "text-primary group-hover:underline transition-colors", children: [labels.visitStore ?? "Visit store", " \u2192"] }), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { size: "xs", color: "muted", children: [store.totalReviews, " ", labels.reviews ?? "reviews"] }))] })] })] })] }));
 }

package/dist/features/stores/components/StoreAboutView.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Row } from "@mohasinac/appkit/ui";
 import { Anchor, Div, Heading, RichText, Stack, Text } from "../../../ui";
 const CLS_LABEL = "font-medium text-neutral-700 min-w-[120px]";
-const CLS_WARN_BOX = "bg-warning-surface border border-warning rounded-lg p-4";
+const CLS_WARN_BOX = "bg-warning-surface border border-warning rounded-lg p-[var(--appkit-space-4)]";
 const CLS_WARN_TITLE = "text-warning font-medium";
 const CLS_WARN_BODY = "text-warning mt-1";
 import { getDefaultLocale } from "../../../core/baseline-resolver";

package/dist/features/stores/components/StoreAuctionsListing.js

@@ -15,7 +15,7 @@ import { pushWishlistOp } from "../../cart/utils/pending-ops";
 import { PRODUCT_FIELDS } from "../../../constants/field-names";
 import { sortBy } from "../../../constants/sort";
 const __P = {
-    p3: "p-3",
+    p3: "p-[var(--appkit-space-3)]",
 };
 const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.AUCTION_END_DATE, "ASC");
 const AUCTION_SORT_OPTIONS = [
@@ -105,7 +105,7 @@ export function StoreAuctionsListing({ storeId, initialData }) {
         },
         isWishlisted: (productId) => wishlistedIds.has(productId),
     };
-    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4";
+    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-[var(--appkit-space-4)]";
     return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search store auctions...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: AUCTION_SORT_OPTIONS, onSortChange: (v) => {
                     table.set("sort", v);
                 }, view: view, onViewChange: (v) => {
@@ -113,7 +113,7 @@ export function StoreAuctionsListing({ storeId, initialData }) {
                         return;
                     setView(v);
                     table.set("view", v);
-                }, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Div, { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: "overflow-hidden animate-pulse", border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-square", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-8", surface: "subtle", rounded: "default" })] })] }, i))) })) : (_jsx(MarketplaceAuctionGrid, { auctions: auctions, variant: view === "list" ? "list" : "grid", gridClassName: view === "list" ? "flex flex-col gap-4" : gridClass, wishlistActions: wishlistActions, labels: {
+                }, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Div, { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: "overflow-hidden animate-pulse", border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-square", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-8", surface: "subtle", rounded: "default" })] })] }, i))) })) : (_jsx(MarketplaceAuctionGrid, { auctions: auctions, variant: view === "list" ? "list" : "grid", gridClassName: view === "list" ? "flex flex-col gap-[var(--appkit-space-4)]" : gridClass, wishlistActions: wishlistActions, labels: {
                         emptyTitle: "No auctions yet",
                         emptyDescription: "This store has no active auctions.",
                     } })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(AuctionFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));

package/dist/features/stores/components/StoreAuctionsView.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SlottedListingView } from "../../../ui";
 export function StoreAuctionsView({ labels = {}, renderAuctions, renderPagination, items = [], total = 0, isLoading = false, ...rest }) {
-    return (_jsx(SlottedListingView, { portal: "public", ...rest, title: labels.title, className: `py-4 ${rest.className ?? ""}`, renderTable: () => renderAuctions(items, isLoading), renderPagination: () => renderPagination?.(total) ?? null, total: total, isLoading: isLoading }));
+    return (_jsx(SlottedListingView, { portal: "public", ...rest, title: labels.title, className: `py-[var(--appkit-space-4)] ${rest.className ?? ""}`, renderTable: () => renderAuctions(items, isLoading), renderPagination: () => renderPagination?.(total) ?? null, total: total, isLoading: isLoading }));
 }

package/dist/features/stores/components/StoreCapabilitiesGuideView.js

@@ -4,7 +4,7 @@ import { Alert, Code, Div, Heading, Li, Row, Section, Span, Stack, Table, Tbody,
 import { ROUTES } from "../../../next/routing/route-map";
 const SUBHEADING = "mb-1 font-semibold text-[var(--appkit-color-text)]";
 const LIST_DISC = "list-disc leading-relaxed";
-const SECTION_BODY = "space-y-4 text-sm text-[var(--appkit-color-text-muted)]";
+const SECTION_BODY = "space-y-4 text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)]";
 // -- Section wrapper -----------------------------------------------------------
 function GuideSection({ title, children, }) {
     return (_jsxs(Section, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "xl", shadow: "sm", padding: "lg", children: [_jsx(Heading, { level: 2, className: "mb-4 text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: title }), children] }));

package/dist/features/stores/components/StoreClassifiedsListing.js

@@ -39,10 +39,10 @@ export function StoreClassifiedsListing({ storeId, initialData }) {
         listingType: "classified",
     };
     const { products, totalPages, page, isLoading } = useProducts(params, { initialData });
-    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4";
+    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-[var(--appkit-space-4)]";
     return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search store classifieds\u2026", onSearchChange: setSearchInput, onSearchCommit: () => table.set("q", searchInput.trim()), sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => table.set("sort", v), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: _jsx(Div, { className: gridClass, children: isLoading
                         ? Array.from({ length: 8 }).map((_, i) => _jsx(Div, { surface: "muted", rounded: "xl", className: "aspect-square animate-pulse" }, i))
                         : products.length === 0
-                            ? _jsx(Div, { paddingY: "y-4xl", className: "col-span-full text-center", children: _jsx(Text, { color: "muted", children: "No classified listings in this store yet." }) })
+                            ? _jsx(Div, { paddingY: "y-4xl", className: "col-span-full text-left", children: _jsx(Text, { color: "muted", children: "No classified listings in this store yet." }) })
                             : products.map((p) => (_jsx(InteractiveProductCard, { product: p, href: String(ROUTES.PUBLIC.CLASSIFIED_DETAIL(p.slug ?? p.id)) }, p.id))) }) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ClassifiedFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) })] }));
 }

package/dist/features/stores/components/StoreDetailLayoutView.js

@@ -31,7 +31,7 @@ function tabLabel(base, count) {
 export async function StoreDetailLayoutView({ storeSlug, activeTab, children, }) {
     const store = await getStoreBySlug(storeSlug);
     if (!store) {
-        return (_jsx(Main, { children: _jsx(Section, { padding: "y-5xl", children: _jsx(Container, { size: "md", children: _jsx(Text, { align: "center", color: "muted", children: "Store not found." }) }) }) }));
+        return (_jsx(Main, { children: _jsx(Section, { padding: "y-5xl", children: _jsx(Container, { size: "md", children: _jsx(Text, { align: "start", color: "muted", children: "Store not found." }) }) }) }));
     }
     const storeId = store?.id;
     const settings = await siteSettingsRepository.findById("global").catch(() => null);

package/dist/features/stores/components/StoreDigitalCodesListing.js

@@ -39,10 +39,10 @@ export function StoreDigitalCodesListing({ storeId, initialData }) {
         listingType: "digital-code",
     };
     const { products, totalPages, page, isLoading } = useProducts(params, { initialData });
-    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4";
+    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-[var(--appkit-space-4)]";
     return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search digital codes\u2026", onSearchChange: setSearchInput, onSearchCommit: () => table.set("q", searchInput.trim()), sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => table.set("sort", v), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: _jsx(Div, { className: gridClass, children: isLoading
                         ? Array.from({ length: 8 }).map((_, i) => _jsx(Div, { surface: "muted", rounded: "xl", className: "aspect-square animate-pulse" }, i))
                         : products.length === 0
-                            ? _jsx(Div, { paddingY: "y-4xl", className: "col-span-full text-center", children: _jsx(Text, { color: "muted", children: "No digital codes in this store yet." }) })
+                            ? _jsx(Div, { paddingY: "y-4xl", className: "col-span-full text-left", children: _jsx(Text, { color: "muted", children: "No digital codes in this store yet." }) })
                             : products.map((p) => (_jsx(InteractiveProductCard, { product: p, href: String(ROUTES.PUBLIC.DIGITAL_CODE_DETAIL(p.slug ?? p.id)) }, p.id))) }) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(DigitalCodeFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) })] }));
 }

package/dist/features/stores/components/StoreFinanceGuideView.js

@@ -5,8 +5,8 @@ import { Alert, Code, Div, Heading, Li, Section, Span, Stack, Text, TextLink, Ul
 import { ROUTES } from "../../../next/routing/route-map";
 const SUBHEADING = "mb-1 font-semibold text-[var(--appkit-color-text)]";
 const LIST_DISC = "list-disc leading-relaxed";
-const SECTION_BODY = "space-y-4 text-sm text-[var(--appkit-color-text-muted)]";
-const MONO_MUTED = "font-mono text-xs text-[var(--appkit-color-text-muted)]";
+const SECTION_BODY = "space-y-4 text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)]";
+const MONO_MUTED = "font-mono text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)]";
 // -- Section wrapper -----------------------------------------------------------
 function GuideSection({ title, children, }) {
     return (_jsxs(Section, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "xl", shadow: "sm", padding: "lg", children: [_jsx(Heading, { level: 2, className: "mb-4 text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: title }), children] }));

package/dist/features/stores/components/StoreGuideHubView.js

@@ -3,8 +3,8 @@ import { Package, ShoppingBag, Wallet, Settings, Shield, Headphones, CheckCircle
 import { Div, Heading, Progress, Row, Section, Stack, Text, TextLink } from "../../../ui";
 import { ROUTES } from "../../../next/routing/route-map";
 const CLS_CHECK_ICON = "w-5 h-5 flex-shrink-0 text-emerald-500";
-const CLS_SUCCESS_BOX = "rounded-xl border border-emerald-200 bg-emerald-50 dark:bg-emerald-950/30 dark:border-emerald-800 px-5 py-4";
-const CLS_SUCCESS_BODY = "text-sm font-medium text-emerald-700 dark:text-emerald-400";
+const CLS_SUCCESS_BOX = "rounded-xl border border-emerald-200 bg-emerald-50 dark:bg-emerald-950/30 dark:border-emerald-800 px-[var(--appkit-space-5)] py-[var(--appkit-space-4)]";
+const CLS_SUCCESS_BODY = "text-[length:var(--appkit-text-sm)] font-medium text-emerald-700 dark:text-emerald-400";
 const GUIDE_CARDS = [
     {
         Icon: Package,

package/dist/features/stores/components/StoreHeader.js

@@ -7,10 +7,10 @@ import { StoreScopedSearch } from "./StoreScopedSearch";
 const __O = {
     hidden: "overflow-hidden",
 };
-const CLS_AVATAR = "-mt-8 h-16 w-16 rounded-xl border-2 border-white border-[var(--appkit-color-border-subtle)] bg-warning-surface dark:bg-warning-surface flex items-center justify-center text-warning dark:text-warning font-bold text-2xl shadow-sm";
-const CLS_STARS = "inline-flex items-center gap-1 text-warning";
-const CLS_FOLLOW_BTN = "rounded-lg border border-warning px-4 py-2 text-sm font-medium text-warning hover:bg-warning-surface transition-colors";
-const CLS_WARN_BANNER = "mt-3 rounded-lg bg-warning-surface dark:bg-warning-surface border border-warning dark:border-warning px-3 py-2 text-sm text-warning dark:text-warning";
+const CLS_AVATAR = "-mt-8 h-16 w-16 rounded-xl border-2 border-white border-[var(--appkit-color-border-subtle)] bg-warning-surface dark:bg-warning-surface flex items-center justify-center text-warning dark:text-warning font-bold text-[length:var(--appkit-text-2xl)] shadow-sm";
+const CLS_STARS = "inline-flex items-center gap-[var(--appkit-space-1)] text-warning";
+const CLS_FOLLOW_BTN = "rounded-lg border border-warning px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium text-warning hover:bg-warning-surface transition-colors";
+const CLS_WARN_BANNER = "mt-3 rounded-lg bg-warning-surface dark:bg-warning-surface border border-warning dark:border-warning px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] text-warning dark:text-warning";
 export function StoreHeader({ store, labels = {}, onFollow, className = "", }) {
     return (_jsxs(Section, { surface: "default", border: "bottom", className: className, children: [store.storeBannerURL && (_jsx(Div, { className: `relative h-40 md:h-56 ${__O.hidden} bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface-elevated)]`, children: _jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner" }) })), _jsxs(Div, { paddingX: "x-page", className: "max-w-7xl mx-auto", padding: "y-md", children: [_jsxs(Row, { align: "end", gap: "md", children: [store.storeLogoURL ? (_jsx(Div, { className: "relative -mt-8 h-16 w-16 border-2 border-white", rounded: "xl", shadow: "sm", overflow: "hidden", children: _jsx(MediaImage, { src: store.storeLogoURL, alt: store.storeName, size: "avatar" }) })) : (_jsx(Div, { className: CLS_AVATAR, children: store.storeName[0]?.toUpperCase() })), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Row, { className: "mb-0.5", align: "center", gap: "sm", wrap: true, children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "xl", weight: "bold", children: store.storeName }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Span, { size: "sm", weight: "medium", className: CLS_STARS, children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Row, { textSize: "xs", className: "text-[var(--appkit-color-text-muted)] mb-0.5", gap: "3", children: [store.category && _jsx(Span, { transform: "capitalize", children: store.category }), store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { children: [store.totalProducts, " ", labels.products ?? "products"] })), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { children: [store.totalReviews, " ", labels.reviews ?? "reviews"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { children: [store.itemsSold, " ", labels.sold ?? "sold"] }))] }), store.storeDescription && (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), copyableCode: true, className: "mt-0.5" }))] }), _jsxs(Row, { gap: "sm", align: "center", className: "shrink-0", children: [_jsx(ShareButton, { title: store.storeName }), onFollow && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onFollow(store.storeSlug), className: CLS_FOLLOW_BTN, children: labels.follow ?? "Follow" }))] })] }), store.isVacationMode && (_jsx(Text, { className: CLS_WARN_BANNER, children: store.vacationMessage ??
                             labels.vacationMode ??

package/dist/features/stores/components/StoreLiveItemsListing.js

@@ -39,10 +39,10 @@ export function StoreLiveItemsListing({ storeId, initialData }) {
         listingType: "live",
     };
     const { products, totalPages, page, isLoading } = useProducts(params, { initialData });
-    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4";
+    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-[var(--appkit-space-4)]";
     return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search live animals & plants\u2026", onSearchChange: setSearchInput, onSearchCommit: () => table.set("q", searchInput.trim()), sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => table.set("sort", v), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: _jsx(Div, { className: gridClass, children: isLoading
                         ? Array.from({ length: 8 }).map((_, i) => _jsx(Div, { surface: "muted", rounded: "xl", className: "aspect-square animate-pulse" }, i))
                         : products.length === 0
-                            ? _jsx(Div, { paddingY: "y-4xl", className: "col-span-full text-center", children: _jsx(Text, { color: "muted", children: "No live items in this store yet." }) })
+                            ? _jsx(Div, { paddingY: "y-4xl", className: "col-span-full text-left", children: _jsx(Text, { color: "muted", children: "No live items in this store yet." }) })
                             : products.map((p) => (_jsx(InteractiveProductCard, { product: p, href: String(ROUTES.PUBLIC.LIVE_DETAIL(p.slug ?? p.id)) }, p.id))) }) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(LiveItemFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) })] }));
 }

package/dist/features/stores/components/StoreNavTabs.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { Div, TextLink } from "../../../ui";
+import { Button, Div, TextLink } from "../../../ui";
 export function StoreNavTabs({ tabs, activeValue, onTabChange, renderTabBar, className = "", }) {
     const handleChange = (v) => onTabChange?.(v);
     if (renderTabBar) {
@@ -7,7 +7,7 @@ export function StoreNavTabs({ tabs, activeValue, onTabChange, renderTabBar, cla
     }
     return (_jsx(Div, { layout: "flex", gap: "2", role: "tablist", border: "bottom", className: `overflow-x-auto ${className}`, children: tabs.map((tab) => tab.href ? (_jsx(TextLink, { variant: "bare", href: tab.href, role: "tab", "aria-selected": activeValue === tab.value, paddingX: "md", paddingY: "xs", size: "sm", weight: "medium", className: `whitespace-nowrap border-b-2 -mb-px transition-colors ${activeValue === tab.value
                 ? "border-primary text-primary"
-                : "border-transparent text-[var(--appkit-color-text-muted)] text-[var(--appkit-color-text-muted)] hover:text-neutral-800 hover:text-[var(--appkit-color-text-muted)]"}`, children: tab.label }, tab.value)) : (_jsx("button", { type: "button", role: "tab", "aria-selected": activeValue === tab.value, onClick: () => handleChange(tab.value), className: `px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition-colors ${activeValue === tab.value
+                : "border-transparent text-[var(--appkit-color-text-muted)] text-[var(--appkit-color-text-muted)] hover:text-neutral-800 hover:text-[var(--appkit-color-text-muted)]"}`, children: tab.label }, tab.value)) : (_jsx(Button, { variant: "ghost", type: "button", role: "tab", "aria-selected": activeValue === tab.value, onClick: () => handleChange(tab.value), paddingX: "md", paddingY: "sm", textSize: "sm", weight: "medium", rounded: "none", className: `whitespace-nowrap border-b-2 -mb-px transition-colors ${activeValue === tab.value
                 ? "border-primary text-primary"
                 : "border-transparent text-[var(--appkit-color-text-muted)] text-[var(--appkit-color-text-muted)] hover:text-neutral-800 hover:text-[var(--appkit-color-text-muted)]"}`, children: tab.label }, tab.value))) }));
 }

package/dist/features/stores/components/StoreOrdersGuideView.js

@@ -4,7 +4,7 @@ import { Accordion, Alert, Code, Div, Heading, Li, Ol, Row, Section, Span, Stack
 import { ROUTES } from "../../../next/routing/route-map";
 const SUBHEADING = "mb-1 font-semibold text-[var(--appkit-color-text)]";
 const LIST_DISC = "list-disc leading-relaxed";
-const SECTION_BODY = "space-y-4 text-sm text-[var(--appkit-color-text-muted)]";
+const SECTION_BODY = "space-y-4 text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)]";
 // -- Section wrapper -----------------------------------------------------------
 function GuideSection({ title, children, }) {
     return (_jsxs(Section, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "xl", shadow: "sm", padding: "lg", children: [_jsx(Heading, { level: 2, className: "mb-4 text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: title }), children] }));

package/dist/features/stores/components/StorePreOrdersListing.js

@@ -11,7 +11,7 @@ import { ROUTES } from "../../../next";
 import { PRODUCT_FIELDS } from "../../../constants/field-names";
 import { sortBy } from "../../../constants/sort";
 const __P = {
-    p3: "p-3",
+    p3: "p-[var(--appkit-space-3)]",
 };
 const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.CREATED_AT);
 const PREORDER_SORT_OPTIONS = [
@@ -58,7 +58,7 @@ export function StorePreOrdersListing({ storeId, initialData }) {
         // table.set("q", v) already resets page to 1 — see root-cause #13.
         table.set("q", searchInput.trim());
     }, [searchInput, table]);
-    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4";
+    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-[var(--appkit-space-4)]";
     return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search store pre-orders...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: PREORDER_SORT_OPTIONS, onSortChange: (v) => {
                     table.set("sort", v);
                 }, view: view, onViewChange: (v) => {
@@ -66,5 +66,5 @@ export function StorePreOrdersListing({ storeId, initialData }) {
                         return;
                     setView(v);
                     table.set("view", v);
-                }, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Div, { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: "overflow-hidden animate-pulse", border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-square", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-8", surface: "subtle", rounded: "default" })] })] }, i))) })) : preOrders.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "center", children: "This store has no pre-orders yet." })) : view === "list" ? (_jsx(Stack, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", border: "subtle", rounded: "xl", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)) }, product.id))) })) : (_jsx(Div, { className: gridClass, children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)) }, product.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) })] }));
+                }, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Div, { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: "overflow-hidden animate-pulse", border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-square", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-8", surface: "subtle", rounded: "default" })] })] }, i))) })) : preOrders.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: "This store has no pre-orders yet." })) : view === "list" ? (_jsx(Stack, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", border: "subtle", rounded: "xl", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)) }, product.id))) })) : (_jsx(Div, { className: gridClass, children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)) }, product.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) })] }));
 }

package/dist/features/stores/components/StoreProductsListing.js

@@ -14,7 +14,7 @@ import { useGuestCart } from "../../cart/hooks/useGuestCart";
 import { useGuestWishlist } from "../../wishlist/hooks/useGuestWishlist";
 import { pushCartOp, pushWishlistOp } from "../../cart/utils/pending-ops";
 const __P = {
-    p3: "p-3",
+    p3: "p-[var(--appkit-space-3)]",
 };
 const FILTER_KEYS = ["condition", "brand", "minPrice", "maxPrice"];
 export function StoreProductsListing({ storeId, initialData }) {

package/dist/features/stores/components/StoreReviewsListing.js

@@ -10,7 +10,7 @@ import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
 import { sortBy } from "../../../constants/sort";
 import { REVIEW_FIELDS } from "../../../constants/field-names";
 const __P = {
-    p4: "p-4",
+    p4: "p-[var(--appkit-space-4)]",
 };
 const __O = {
     hidden: "overflow-hidden",
@@ -107,5 +107,5 @@ export function StoreReviewsListing({ storeSlug }) {
         value: opt.value,
         label: SORT_OPTION_LABELS[opt.key] ?? opt.key,
     }));
-    return (_jsxs(Div, { className: "min-h-screen", children: [totalReviews > 0 && (_jsxs(Row, { border: "default", align: "center", gap: "sm", className: "border-b", padding: "inline", children: [_jsx(Span, { weight: "bold", size: "2xl", color: "primary", children: averageRating.toFixed(1) }), _jsxs(Span, { size: "sm", color: "muted", children: ["/ 5 \u00B7 ", totalReviews, " reviews"] })] })), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search reviews...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: sortOptions, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { paddingY: "y-lg", paddingX: "x-md", children: isLoading ? (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: _jsxs(Stack, { className: `${__P.p4}`, gap: "3", children: [_jsx(Div, { className: "h-4 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-2/3", surface: "subtle", rounded: "default" })] }) }, i))) })) : reviews.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "center", children: "No reviews found." })) : view === "list" ? (_jsx(Stack, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", border: "subtle", rounded: "xl", children: reviews.map((review) => (_jsx(ReviewCard, { review: review, context: "store" }, review.id))) })) : (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: reviews.map((review) => (_jsx(ReviewCard, { review: review, context: "store" }, review.id))) })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(ReviewFilters, { table: pendingTable, variant: "public" }) })] }));
+    return (_jsxs(Div, { className: "min-h-screen", children: [totalReviews > 0 && (_jsxs(Row, { border: "default", align: "center", gap: "sm", className: "border-b", padding: "inline", children: [_jsx(Span, { weight: "bold", size: "2xl", color: "primary", children: averageRating.toFixed(1) }), _jsxs(Span, { size: "sm", color: "muted", children: ["/ 5 \u00B7 ", totalReviews, " reviews"] })] })), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search reviews...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: sortOptions, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { paddingY: "y-lg", paddingX: "x-md", children: isLoading ? (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: _jsxs(Stack, { className: `${__P.p4}`, gap: "3", children: [_jsx(Div, { className: "h-4 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-2/3", surface: "subtle", rounded: "default" })] }) }, i))) })) : reviews.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: "No reviews found." })) : view === "list" ? (_jsx(Stack, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", border: "subtle", rounded: "xl", children: reviews.map((review) => (_jsx(ReviewCard, { review: review, context: "store" }, review.id))) })) : (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: reviews.map((review) => (_jsx(ReviewCard, { review: review, context: "store" }, review.id))) })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(ReviewFilters, { table: pendingTable, variant: "public" }) })] }));
 }

package/dist/features/stores/components/StoreReviewsView.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SlottedListingView } from "../../../ui";
 export function StoreReviewsView({ labels = {}, renderReviews, renderSummary, renderPagination, items = [], total = 0, isLoading = false, ...rest }) {
-    return (_jsx(SlottedListingView, { portal: "public", ...rest, title: labels.title, className: `py-4 ${rest.className ?? ""}`, renderFilters: () => renderSummary?.() ?? null, renderTable: () => renderReviews(items, isLoading), renderPagination: () => renderPagination?.(total) ?? null, total: total, isLoading: isLoading }));
+    return (_jsx(SlottedListingView, { portal: "public", ...rest, title: labels.title, className: `py-[var(--appkit-space-4)] ${rest.className ?? ""}`, renderFilters: () => renderSummary?.() ?? null, renderTable: () => renderReviews(items, isLoading), renderPagination: () => renderPagination?.(total) ?? null, total: total, isLoading: isLoading }));
 }

package/dist/features/stores/components/StoreSettingsGuideView.js

@@ -5,7 +5,7 @@ import { Alert, Code, Div, Heading, Li, Section, Span, Stack, Text, TextLink, Ul
 import { ROUTES } from "../../../next/routing/route-map";
 const SUBHEADING = "mb-1 font-semibold text-[var(--appkit-color-text)]";
 const LIST_DISC = "list-disc leading-relaxed";
-const SECTION_BODY = "space-y-4 text-sm text-[var(--appkit-color-text-muted)]";
+const SECTION_BODY = "space-y-4 text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)]";
 // -- Section wrapper -----------------------------------------------------------
 function GuideSection({ title, children, }) {
     return (_jsxs(Section, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "xl", shadow: "sm", padding: "lg", children: [_jsx(Heading, { level: 2, className: "mb-4 text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: title }), children] }));