@mohasinac/appkit 4.37.1 → 4.38.0

package/dist/react/contexts/SessionContext.js

@@ -19,7 +19,22 @@ const DEFAULT_ENDPOINTS = {
 // ---------------------------------------------------------------------------
 const SESSION_COOKIE = "__session";
 const SESSION_ID_COOKIE = "__session_id";
-const ACTIVITY_INTERVAL_MS = 5 * 60 * 1000; // 5 minutes
+/**
+ * How often a VISIBLE tab pings session activity and re-reads RBAC flags.
+ *
+ * Each tick costs two function invocations (`sessionActivity`, then the
+ * piggybacked profile re-fetch below), per open tab, wall-clock rather than
+ * activity-gated. At the original 5 minutes that was 24 invocations/hour for
+ * every tab any signed-in user had left open, and it contributed to the Vercel
+ * overage that paused the account (2026-09-14).
+ *
+ * 15 minutes is safe because it is a BACKSTOP, not the primary freshness
+ * mechanism: `RoleGuard` calls `refreshUser()` on every mount of a role-gated
+ * layout, so navigating into /admin, /store or /user re-reads the flags
+ * immediately, and the visibility handler below re-reads them the moment a
+ * backgrounded tab is looked at again.
+ */
+const ACTIVITY_INTERVAL_MS = 15 * 60 * 1000; // 15 minutes
 // ---------------------------------------------------------------------------
 // Context
 // ---------------------------------------------------------------------------
@@ -166,6 +181,14 @@ export function SessionProvider({ children, initialUser, endpoints: endpointOver
         const currentSessionId = getSessionIdFromCookie();
         if (!currentSessionId || !user)
             return;
+        // A hidden tab is not "activity", so reporting it as such is both wasteful
+        // and wrong — an abandoned background tab used to keep both requests below
+        // firing indefinitely. The visibility handler re-runs this immediately when
+        // the tab is looked at again, so nothing is merely deferred into staleness.
+        if (typeof document !== "undefined" &&
+            document.visibilityState === "hidden") {
+            return;
+        }
         try {
             await apiClient.post(ep.sessionActivity, {
                 sessionId: currentSessionId,
@@ -203,6 +226,22 @@ export function SessionProvider({ children, initialUser, endpoints: endpointOver
     useEffect(() => {
         updateSessionActivityRef.current = updateSessionActivity;
     }, [updateSessionActivity]);
+    // Re-read session activity and RBAC flags the moment a backgrounded tab is
+    // looked at again. This is what lets the interval above be 15 minutes and the
+    // hidden-tab skip be safe: the user-visible freshness guarantee is now "fresh
+    // whenever you are actually looking at it", which is strictly better than the
+    // old fixed 5-minute tick that fired whether anyone was there or not.
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const onVisible = () => {
+            if (document.visibilityState === "visible") {
+                void updateSessionActivityRef.current?.();
+            }
+        };
+        document.addEventListener("visibilitychange", onVisible);
+        return () => document.removeEventListener("visibilitychange", onVisible);
+    }, []);
     // -----------------------------------------------------------------------
     // Refresh helpers
     // -----------------------------------------------------------------------

package/dist/react/hooks/useCanSeePrices.d.ts

@@ -0,0 +1,37 @@
+export interface CanSeePricesState {
+    /** The viewer is signed in and may be shown money amounts. */
+    canSeePrices: boolean;
+    /**
+     * The session has not resolved yet. Render a neutral placeholder while this
+     * is true — NEVER the sign-in prompt. See the note below.
+     */
+    isAuthResolving: boolean;
+}
+/**
+ * May the current viewer be shown money amounts on a public listing surface?
+ *
+ * Prices, current bids, deposits and per-entry amounts are hidden from
+ * signed-out visitors so the catalogue cannot be read at scale without an
+ * account. Signed-in users see everything exactly as before.
+ *
+ * ## Why there are THREE states, not two
+ *
+ * `SessionProvider` is mounted `initialUser={null}` because the root locale
+ * layout must stay static (Root Cause #82), so `loading` starts `true` on every
+ * hard load — for signed-in users too, until Firebase persistence resolves and
+ * `/api/user/profile` returns. A naive `!user` test therefore renders
+ * "Sign in to see price" at an already-signed-in user for several hundred
+ * milliseconds on every page load.
+ *
+ * So: `isAuthResolving` means "don't know yet" and must render a neutral
+ * placeholder. Only `canSeePrices === false && isAuthResolving === false` is a
+ * confirmed guest.
+ *
+ * ## Why `useOptionalSession`
+ *
+ * This is library code that ADJUSTS for the viewer rather than requiring one.
+ * `useSession()` throws without a provider, which would turn an optional
+ * refinement into a breaking contract for every consumer (Root Cause #20). With
+ * no provider we fail CLOSED — no session means no prices.
+ */
+export declare function useCanSeePrices(): CanSeePricesState;

package/dist/react/hooks/useCanSeePrices.js

@@ -0,0 +1,40 @@
+"use client";
+import { useOptionalSession } from "../contexts/SessionContext";
+/**
+ * May the current viewer be shown money amounts on a public listing surface?
+ *
+ * Prices, current bids, deposits and per-entry amounts are hidden from
+ * signed-out visitors so the catalogue cannot be read at scale without an
+ * account. Signed-in users see everything exactly as before.
+ *
+ * ## Why there are THREE states, not two
+ *
+ * `SessionProvider` is mounted `initialUser={null}` because the root locale
+ * layout must stay static (Root Cause #82), so `loading` starts `true` on every
+ * hard load — for signed-in users too, until Firebase persistence resolves and
+ * `/api/user/profile` returns. A naive `!user` test therefore renders
+ * "Sign in to see price" at an already-signed-in user for several hundred
+ * milliseconds on every page load.
+ *
+ * So: `isAuthResolving` means "don't know yet" and must render a neutral
+ * placeholder. Only `canSeePrices === false && isAuthResolving === false` is a
+ * confirmed guest.
+ *
+ * ## Why `useOptionalSession`
+ *
+ * This is library code that ADJUSTS for the viewer rather than requiring one.
+ * `useSession()` throws without a provider, which would turn an optional
+ * refinement into a breaking contract for every consumer (Root Cause #20). With
+ * no provider we fail CLOSED — no session means no prices.
+ */
+export function useCanSeePrices() {
+    const session = useOptionalSession();
+    // No provider: fail closed, and don't claim to be mid-resolution — there is
+    // nothing in flight that will ever change the answer.
+    if (!session)
+        return { canSeePrices: false, isAuthResolving: false };
+    return {
+        canSeePrices: Boolean(session.user?.uid),
+        isAuthResolving: session.loading,
+    };
+}

package/dist/seed/addresses-seed-data.js

@@ -3,12 +3,12 @@
  *      addresses live entirely in store-addresses-seed-data.ts (merged in at the API route
  *      level) — this file only carries ownerType:"user" entries now, to avoid seeding two
  *      overlapping sources of store address data.
- * WHAT: Exports 3 user addresses. Top-level collection (SB-UNI-A) with ownerType discriminator.
+ * WHAT: Exports 4 user addresses. Top-level collection (SB-UNI-A) with ownerType discriminator.
  *       PII encrypted via HMAC blind indices (emailIndex, phoneIndex). Composite indexes
  *       (ownerType, ownerId, createdAt desc) + (ownerType, ownerId, isDefault).
  *
  * EXPORTS:
- *   addressesSeedData — Array of 3 user address documents
+ *   addressesSeedData — Array of 4 user address documents
  *
  * @tag domain:addresses,shipping
  * @tag layer:seed
@@ -74,5 +74,39 @@ const _rawAddressesSeedData = [
         createdAt: daysAgo(365),
         updatedAt: daysAgo(5),
     },
+    /*
+     * Automated checklist runner — delivery address.
+     *
+     * 🛑 THIS ROW IS WHY CHECKOUT CAN BE TESTED AT ALL.
+     *
+     * `user-claude-tester` had no address, so /checkout stopped dead at "Step 1 of 3:
+     * Shipping Address — No saved addresses yet." Every order, payment, coupon-at-placement,
+     * offer-checkout and forfeited-bid case died there: 117 blocked cases, 27% of everything
+     * the run could not test, and the single largest blocker by a wide margin (measured,
+     * run 1789300124915).
+     *
+     * It has to be SEEDED rather than created by the runner mid-run. `addresses` is PRESERVE
+     * tier in tester/scripts/lib/collections.mjs — teardown deliberately never touches it,
+     * because real people's saved addresses live there — so a row the runner created at
+     * runtime would survive every future run with nothing owning its cleanup. Seeded, it is
+     * idempotent: `appkit-seed load` upserts this exact id, and re-running changes nothing.
+     */
+    {
+        id: "addr-claude-tester-home",
+        ownerType: "user",
+        ownerId: "user-claude-tester",
+        label: "Home",
+        fullName: "Claude (automated)",
+        phone: "+91-99999-00019",
+        addressLine1: "1 Automation Street",
+        addressLine2: "Koramangala",
+        city: "Bengaluru",
+        state: "Karnataka",
+        postalCode: "560034",
+        country: "India",
+        isDefault: true,
+        createdAt: daysAgo(1),
+        updatedAt: daysAgo(1),
+    },
 ];
 export const addressesSeedData = _rawAddressesSeedData;

package/dist/seed/users-seed-data.js

@@ -546,8 +546,16 @@ export const usersSeedData = [
         isBot: true,
         emailVerified: true,
         disabled: false,
-        storeId: "store-tester-qa-seller",
-        storeSlug: "store-tester-qa-seller",
+        // 🛑 This MUST name a store whose own `ownerId` is this uid. It used to say
+        // "store-tester-qa-seller", which is owned by `user-tester-qa` — so the app, which
+        // resolves sellers by `ownerId`, answered every /api/store/* call with 403
+        // "No store found for this account" while the client, reading `role` and `storeId`
+        // off this document, rendered the entire Store Panel over it. 36 checklist cases were
+        // blocked by that one-way pointer (measured, run 1789300124915).
+        // See stores-tester-seed-data.ts for why the shared sandbox could not simply be
+        // repointed at this account instead.
+        storeId: "store-claude-tester",
+        storeSlug: "store-claude-tester",
         storeStatus: "approved",
         publicProfile: {
             isPublic: false,

package/dist/seo/json-ld.d.ts

@@ -84,6 +84,27 @@ export interface BlogPostJsonLdInput {
     metaTitle?: string;
     metaDescription?: string;
 }
+/**
+ * Declares that this page's price is behind a sign-in gate.
+ *
+ * Prices are hidden from signed-out visitors, and Googlebot crawls signed out —
+ * so the crawler sees "Sign in to see price" while the Product JSON-LD beside it
+ * declares a real `offers.price`. Left undeclared, that is a structured-data
+ * mismatch: Google requires marked-up content to be visible to the user, and an
+ * unexplained gap can cost the rich result.
+ *
+ * `isAccessibleForFree: false` + `hasPart`/`cssSelector` is the supported way to
+ * say "the markup is richer than what an anonymous visitor sees". It lives on a
+ * `WebPage` node rather than on the Product, because `isAccessibleForFree` is a
+ * `CreativeWork` property and `Product` is not a `CreativeWork`.
+ *
+ * Serving the price to crawler user-agents but not to people would be cloaking,
+ * which is a harder violation; this declares the gate instead of hiding it.
+ *
+ * 🛑 Emit this on EVERY page that emits `offers.price`. The audit enforces the
+ * pairing precisely so nobody removes one half later.
+ */
+export declare function gatedPriceWebPageJsonLd(path: string): Record<string, JsonLdValue>;
 export declare function productJsonLd(product: ProductJsonLdInput): Record<string, JsonLdValue>;
 export declare function reviewJsonLd(review: ReviewJsonLdInput): Record<string, JsonLdValue>;
 export declare function aggregateRatingJsonLd(product: Pick<ProductJsonLdInput, "title" | "slug">, stats: {

package/dist/seo/json-ld.js

@@ -39,6 +39,51 @@ function absoluteUrl(value, base = SITE_URL) {
 import { ProductStatusValues } from "../features/products/schemas";
 import { getDefaultCurrency } from "../core/baseline-resolver";
 // --- Helpers -----------------------------------------------------------------
+/**
+ * The CSS selector the price gate renders in every state.
+ *
+ * 🛑 Must equal `GATED_PRICE_CLASS` in `ui/components/GatedPrice.tsx`. It is
+ * duplicated as a literal here rather than imported because `seo/` is reached
+ * from server-only metadata paths and must not pull in a `"use client"` module
+ * (Root Cause #76). `audit-guest-price-leak` cross-checks the two.
+ */
+const GATED_PRICE_SELECTOR = ".appkit-gated-price";
+/**
+ * Declares that this page's price is behind a sign-in gate.
+ *
+ * Prices are hidden from signed-out visitors, and Googlebot crawls signed out —
+ * so the crawler sees "Sign in to see price" while the Product JSON-LD beside it
+ * declares a real `offers.price`. Left undeclared, that is a structured-data
+ * mismatch: Google requires marked-up content to be visible to the user, and an
+ * unexplained gap can cost the rich result.
+ *
+ * `isAccessibleForFree: false` + `hasPart`/`cssSelector` is the supported way to
+ * say "the markup is richer than what an anonymous visitor sees". It lives on a
+ * `WebPage` node rather than on the Product, because `isAccessibleForFree` is a
+ * `CreativeWork` property and `Product` is not a `CreativeWork`.
+ *
+ * Serving the price to crawler user-agents but not to people would be cloaking,
+ * which is a harder violation; this declares the gate instead of hiding it.
+ *
+ * 🛑 Emit this on EVERY page that emits `offers.price`. The audit enforces the
+ * pairing precisely so nobody removes one half later.
+ */
+export function gatedPriceWebPageJsonLd(path) {
+    return {
+        "@context": "https://schema.org",
+        "@type": "WebPage",
+        // Absolutised against the ONE canonical host, never a second definition of
+        // it (Root Cause #81) — a WebPage node naming a host the sitemap does not
+        // advertise is the same split-identity bug in miniature.
+        url: absoluteUrl(path),
+        isAccessibleForFree: false,
+        hasPart: {
+            "@type": "WebPageElement",
+            isAccessibleForFree: false,
+            cssSelector: GATED_PRICE_SELECTOR,
+        },
+    };
+}
 export function productJsonLd(product) {
     const url = `${SITE_URL}/products/${product.slug}`;
     // Absolutise, then de-duplicate: `mainImage` is very often also `images[0]`,

package/dist/styles.css

@@ -3295,6 +3295,47 @@
   color: var(--appkit-color-emerald-300);
 }
 
+/**
+ * Sign-in gate for money amounts on public listing surfaces.
+ *
+ * The pending state must occupy the SAME vertical space as a rendered price, or
+ * every card in a grid reflows once the session resolves. It is deliberately a
+ * silent placeholder rather than a shimmer: the wait is short, and an animated
+ * skeleton on 24 cards reads as a page that failed to load.
+ */
+.appkit-gated-price__pending {
+  display: inline-block;
+  min-width: 5rem;
+  height: 1.25rem;
+  border-radius: 0.25rem;
+  background: var(--appkit-color-surface-muted);
+}
+
+.appkit-gated-price__prompt {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  color: var(--appkit-color-primary);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.appkit-gated-price__prompt:hover {
+  text-decoration: underline;
+}
+
+/* A lock glyph via ::before rather than an icon component: this renders inside
+   card grids, where 24 extra SVG trees per page is real weight for decoration
+   that carries no meaning the label doesn't already state. */
+.appkit-gated-price__prompt::before {
+  content: "\1F512";
+  font-size: 0.75rem;
+  line-height: 1;
+}
+
 .appkit-item-row {
   display: flex;
   align-items: flex-start;

package/dist/ui/components/GatedPrice.d.ts

@@ -0,0 +1,66 @@
+import React from "react";
+/**
+ * 🛑 CONTRACT WITH THE STRUCTURED DATA — do not rename.
+ *
+ * The Product/Auction JSON-LD declares this exact selector in its paywalled
+ * content markup (`hasPart.cssSelector`, see `appkit/src/seo/json-ld.ts`), which
+ * is what tells Google the page legitimately carries an `offers.price` that an
+ * anonymous visitor cannot see. Rename this and the selector silently matches
+ * nothing, which reads to a crawler as an undeclared content mismatch.
+ *
+ * It is rendered in EVERY state — signed in, signed out and resolving — because
+ * the markup describes the region, not the refusal.
+ */
+export declare const GATED_PRICE_CLASS = "appkit-gated-price";
+export interface GatedPriceProps {
+    /** The amount to show once the viewer is allowed to see it. */
+    amount?: number;
+    currency?: string;
+    /** Struck-through "was" price; a discount badge is derived from the pair. */
+    originalAmount?: number;
+    variant?: "compact" | "detail";
+    className?: string;
+    /**
+     * Copy for the signed-out state. Default: "Sign in to see price". Override
+     * when the amount isn't a price — "Sign in to see the current bid".
+     */
+    label?: string;
+    /**
+     * Arbitrary money content to gate, for the sites that don't render a bare
+     * amount ("Buy Now — ₹1,200", "min increment ₹100", a composite row). When
+     * given, `amount` is ignored and this is what renders once allowed.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Renders its children only when the viewer may see prices; renders NOTHING
+ * otherwise — no prompt, no placeholder.
+ *
+ * For SECONDARY money details that sit beside an already-gated primary amount:
+ * a handling fee, a deposit note, a "you save ₹X" line, a min-bid increment.
+ * Those read as broken copy when gated in place ("min increment Sign in to see
+ * price"), and the prompt is already on screen one line up, so repeating it is
+ * noise rather than an affordance.
+ *
+ * 🛑 Do NOT use this for a listing's primary price. A card whose price row
+ * simply vanishes reads as a rendering bug, and its height stops matching its
+ * neighbours — use `<GatedPrice>` there, which keeps the row and explains it.
+ *
+ * Renders nothing while the session resolves, so a signed-in viewer sees these
+ * appear rather than flash the wrong state.
+ */
+export declare function PricesOnly({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element | null;
+/**
+ * A money amount that only signed-in visitors may read.
+ *
+ * Three states, and the middle one is the whole reason this is a component
+ * rather than an inline `user ? price : prompt` at each call site — see
+ * `useCanSeePrices` for why "resolving" must not render the prompt.
+ *
+ * The amount is still present in the page payload and in the structured data;
+ * this gates the RENDER. Withholding it from the response entirely would mean
+ * fetching prices separately on every listing page — deliberately out of scope.
+ */
+export declare function GatedPrice({ amount, currency, originalAmount, variant, className, label, children, }: GatedPriceProps): React.JSX.Element | null;

package/dist/ui/components/GatedPrice.js

@@ -0,0 +1,80 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Span } from "./Typography";
+import { Row } from "./Layout";
+import { ROUTES } from "../../next/routing/route-map";
+import { getDefaultCurrency } from "../../core/baseline-resolver";
+import { formatCurrency, formatPercentage } from "../../utils/number.formatter";
+import { useCanSeePrices } from "../../react/hooks/useCanSeePrices";
+/**
+ * 🛑 CONTRACT WITH THE STRUCTURED DATA — do not rename.
+ *
+ * The Product/Auction JSON-LD declares this exact selector in its paywalled
+ * content markup (`hasPart.cssSelector`, see `appkit/src/seo/json-ld.ts`), which
+ * is what tells Google the page legitimately carries an `offers.price` that an
+ * anonymous visitor cannot see. Rename this and the selector silently matches
+ * nothing, which reads to a crawler as an undeclared content mismatch.
+ *
+ * It is rendered in EVERY state — signed in, signed out and resolving — because
+ * the markup describes the region, not the refusal.
+ */
+export const GATED_PRICE_CLASS = "appkit-gated-price";
+const DEFAULT_LABEL = "Sign in to see price";
+/**
+ * Renders its children only when the viewer may see prices; renders NOTHING
+ * otherwise — no prompt, no placeholder.
+ *
+ * For SECONDARY money details that sit beside an already-gated primary amount:
+ * a handling fee, a deposit note, a "you save ₹X" line, a min-bid increment.
+ * Those read as broken copy when gated in place ("min increment Sign in to see
+ * price"), and the prompt is already on screen one line up, so repeating it is
+ * noise rather than an affordance.
+ *
+ * 🛑 Do NOT use this for a listing's primary price. A card whose price row
+ * simply vanishes reads as a rendering bug, and its height stops matching its
+ * neighbours — use `<GatedPrice>` there, which keeps the row and explains it.
+ *
+ * Renders nothing while the session resolves, so a signed-in viewer sees these
+ * appear rather than flash the wrong state.
+ */
+export function PricesOnly({ children }) {
+    const { canSeePrices } = useCanSeePrices();
+    if (!canSeePrices)
+        return null;
+    return _jsx(_Fragment, { children: children });
+}
+/**
+ * A money amount that only signed-in visitors may read.
+ *
+ * Three states, and the middle one is the whole reason this is a component
+ * rather than an inline `user ? price : prompt` at each call site — see
+ * `useCanSeePrices` for why "resolving" must not render the prompt.
+ *
+ * The amount is still present in the page payload and in the structured data;
+ * this gates the RENDER. Withholding it from the response entirely would mean
+ * fetching prices separately on every listing page — deliberately out of scope.
+ */
+export function GatedPrice({ amount, currency = getDefaultCurrency(), originalAmount, variant = "compact", className, label = DEFAULT_LABEL, children, }) {
+    const { canSeePrices, isAuthResolving } = useCanSeePrices();
+    const rootClass = `${GATED_PRICE_CLASS} ${className ?? ""}`.trim();
+    if (isAuthResolving) {
+        return (_jsx(Span, { className: `${rootClass} appkit-gated-price__pending`, "aria-hidden": "true" }));
+    }
+    if (!canSeePrices) {
+        return (_jsx("a", { href: String(ROUTES.AUTH.LOGIN), className: `${rootClass} appkit-gated-price__prompt`, children: label }));
+    }
+    if (children !== undefined) {
+        return _jsx(Span, { className: rootClass, children: children });
+    }
+    if (amount === undefined)
+        return null;
+    const hasDiscount = originalAmount !== undefined && originalAmount > amount;
+    const discountPct = hasDiscount ? (originalAmount - amount) / originalAmount : 0;
+    const priceClass = variant === "detail"
+        ? "appkit-price-display__price appkit-price-display__price--detail"
+        : "appkit-price-display__price appkit-price-display__price--compact";
+    const originalClass = variant === "detail"
+        ? "appkit-price-display__original appkit-price-display__original--detail"
+        : "appkit-price-display__original appkit-price-display__original--compact";
+    return (_jsxs(Row, { wrap: true, align: "baseline", gap: "xs", className: `appkit-price-display ${rootClass}`, children: [_jsx(Span, { className: priceClass, children: formatCurrency(amount, currency) }), hasDiscount && (_jsxs(_Fragment, { children: [_jsx(Span, { className: originalClass, children: formatCurrency(originalAmount, currency) }), _jsxs(Span, { className: "appkit-price-display__discount", children: ["-", formatPercentage(discountPct, 0)] })] }))] }));
+}

package/dist/ui/components/GatedPrice.style.css

@@ -0,0 +1,40 @@
+/**
+ * Sign-in gate for money amounts on public listing surfaces.
+ *
+ * The pending state must occupy the SAME vertical space as a rendered price, or
+ * every card in a grid reflows once the session resolves. It is deliberately a
+ * silent placeholder rather than a shimmer: the wait is short, and an animated
+ * skeleton on 24 cards reads as a page that failed to load.
+ */
+.appkit-gated-price__pending {
+  display: inline-block;
+  min-width: 5rem;
+  height: 1.25rem;
+  border-radius: 0.25rem;
+  background: var(--appkit-color-surface-muted);
+}
+
+.appkit-gated-price__prompt {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  color: var(--appkit-color-primary);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.appkit-gated-price__prompt:hover {
+  text-decoration: underline;
+}
+
+/* A lock glyph via ::before rather than an icon component: this renders inside
+   card grids, where 24 extra SVG trees per page is real weight for decoration
+   that carries no meaning the label doesn't already state. */
+.appkit-gated-price__prompt::before {
+  content: "\1F512";
+  font-size: 0.75rem;
+  line-height: 1;
+}

package/dist/ui/components/PriceDisplay.d.ts

@@ -5,4 +5,16 @@ export interface PriceDisplayProps {
     variant?: "compact" | "detail";
     className?: string;
 }
+/**
+ * A product price on a public surface — gated behind sign-in.
+ *
+ * This is now a thin wrapper over `<GatedPrice>`, with no opt-out, because both
+ * of its consumers (`ProductGrid`'s card + list rows, and the generic
+ * `ProductDetailPageView`) are public listing surfaces. There is deliberately no
+ * `ungated` prop: nothing in admin, seller, cart, checkout or orders uses this
+ * component, so an escape hatch here would exist only to be misused. Those
+ * surfaces call `formatCurrency` directly and are signed-in by definition.
+ *
+ * Rendering, discount badge and markup are unchanged for a signed-in viewer.
+ */
 export declare function PriceDisplay({ amount, currency, originalAmount, variant, className, }: PriceDisplayProps): import("react").JSX.Element;

package/dist/ui/components/PriceDisplay.js

@@ -1,18 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Span } from "./Typography";
-import { Row } from "./Layout";
-import { getDefaultCurrency } from "../../core/baseline-resolver";
-import { formatCurrency, formatPercentage } from "../../utils/number.formatter";
-export function PriceDisplay({ amount, currency = getDefaultCurrency(), originalAmount, variant = "compact", className, }) {
-    const hasDiscount = originalAmount !== undefined && originalAmount > amount;
-    const discountPct = hasDiscount
-        ? (originalAmount - amount) / originalAmount
-        : 0;
-    const priceClass = variant === "detail"
-        ? "appkit-price-display__price appkit-price-display__price--detail"
-        : "appkit-price-display__price appkit-price-display__price--compact";
-    const originalClass = variant === "detail"
-        ? "appkit-price-display__original appkit-price-display__original--detail"
-        : "appkit-price-display__original appkit-price-display__original--compact";
-    return (_jsxs(Row, { wrap: true, align: "baseline", gap: "xs", className: `appkit-price-display ${className ?? ""}`.trim(), children: [_jsx(Span, { className: priceClass, children: formatCurrency(amount, currency) }), hasDiscount && (_jsxs(_Fragment, { children: [_jsx(Span, { className: originalClass, children: formatCurrency(originalAmount, currency) }), _jsxs(Span, { className: "appkit-price-display__discount", children: ["-", formatPercentage(discountPct, 0)] })] }))] }));
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GatedPrice } from "./GatedPrice";
+/**
+ * A product price on a public surface — gated behind sign-in.
+ *
+ * This is now a thin wrapper over `<GatedPrice>`, with no opt-out, because both
+ * of its consumers (`ProductGrid`'s card + list rows, and the generic
+ * `ProductDetailPageView`) are public listing surfaces. There is deliberately no
+ * `ungated` prop: nothing in admin, seller, cart, checkout or orders uses this
+ * component, so an escape hatch here would exist only to be misused. Those
+ * surfaces call `formatCurrency` directly and are signed-in by definition.
+ *
+ * Rendering, discount badge and markup are unchanged for a signed-in viewer.
+ */
+export function PriceDisplay({ amount, currency, originalAmount, variant = "compact", className, }) {
+    return (_jsx(GatedPrice, { amount: amount, currency: currency, originalAmount: originalAmount, variant: variant, className: className }));
 }

package/dist/ui/components/index.style.css

@@ -21,6 +21,7 @@
 @import "./Skeleton.style.css";
 @import "./RatingDisplay.style.css";
 @import "./PriceDisplay.style.css";
+@import "./GatedPrice.style.css";
 @import "./ItemRow.style.css";
 @import "./Tooltip.style.css";
 @import "./Layout.style.css";

package/dist/ui/index.d.ts

@@ -115,6 +115,8 @@ export type { RatingDisplayProps } from "./components/RatingDisplay";
 export { RatingDisplay } from "./components/RatingDisplay";
 export type { PriceDisplayProps } from "./components/PriceDisplay";
 export { PriceDisplay } from "./components/PriceDisplay";
+export type { GatedPriceProps } from "./components/GatedPrice";
+export { GatedPrice, PricesOnly, GATED_PRICE_CLASS } from "./components/GatedPrice";
 export type { StatsGridProps, StatItem } from "./components/StatsGrid";
 export { StatsGrid } from "./components/StatsGrid";
 export type { SummaryCardProps, SummaryLine } from "./components/SummaryCard";

package/dist/ui/index.js

@@ -60,6 +60,7 @@ export { StepperNav } from "./components/StepperNav";
 export { ViewToggle } from "./components/ViewToggle";
 export { RatingDisplay } from "./components/RatingDisplay";
 export { PriceDisplay } from "./components/PriceDisplay";
+export { GatedPrice, PricesOnly, GATED_PRICE_CLASS } from "./components/GatedPrice";
 export { StatsGrid } from "./components/StatsGrid";
 export { SummaryCard } from "./components/SummaryCard";
 export { CountdownDisplay } from "./components/CountdownDisplay";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "4.37.1",
+  "version": "4.38.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"