@mohasinac/appkit 4.37.1 → 4.39.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/FilePickerButton.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { ButtonProps } from "./Button";
+/**
+ * A button that opens the native file picker.
+ *
+ * 🛑 THE RAW `<input type="file">` BELONGS HERE, and only here. Rule #9 bans raw
+ * form elements in product code and points every case at a primitive; there was
+ * no primitive for a file picker, so the one feature that needed one
+ * (`DigitalContentPoolManager`) had to carry a raw input plus a suppression
+ * marker — and `audit-no-suppression-comments` is strict-zero and says, in its
+ * own header, "do NOT add a new marker or exception". The only close available
+ * was to extend the primitive layer, which is exactly what Root Cause #22 says
+ * to do before reaching for a marker.
+ *
+ * Deliberately NOT built on `MediaUploadField`. That component drives the public
+ * `/api/media/*` pipeline, which ends by minting a `/media/{shortId}` URL served
+ * with no authentication — correct for product photography, catastrophic for a
+ * paid download. This primitive hands the caller a `File` and has no opinion
+ * about where the bytes go.
+ *
+ * The input is visually hidden rather than styled, because a styled file input
+ * cannot be made to match `<Button>` across browsers — Safari and Firefox each
+ * render their own immovable "Choose file" text inside it.
+ */
+export interface FilePickerButtonProps extends Omit<ButtonProps, "onClick" | "type" | "children"> {
+    /** Called with the chosen file. Never called with null. */
+    onFile: (file: File) => void;
+    /** Native `accept` string, e.g. `"image/*"`. Omit to accept anything. */
+    accept?: string;
+    children: React.ReactNode;
+}
+export declare function FilePickerButton({ onFile, accept, children, ...buttonProps }: FilePickerButtonProps): React.JSX.Element;

package/dist/ui/components/FilePickerButton.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef } from "react";
+import { Button } from "./Button";
+// No forwardRef: appkit's <Button> does not accept a ref, so there is nothing
+// to forward one to. Adding the plumbing would be a prop that silently does
+// nothing, which is worse than its absence.
+export function FilePickerButton({ onFile, accept, children, ...buttonProps }) {
+    const inputRef = useRef(null);
+    const inputId = useId();
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { ...buttonProps, type: "button", onClick: () => inputRef.current?.click(), children: children }), _jsx("input", { ref: inputRef, id: inputId, type: "file", accept: accept, hidden: true, onChange: (ev) => {
+                    const file = ev.target.files?.[0];
+                    /*
+                     * Reset BEFORE handing the file on. Without it, picking the same file
+                     * twice in a row fires no change event the second time — the value is
+                     * unchanged — and the control silently does nothing, which reads as a
+                     * broken button rather than as a no-op.
+                     */
+                    ev.target.value = "";
+                    if (file)
+                        onFile(file);
+                } })] }));
+}

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

@@ -33,6 +33,8 @@ export type { SkeletonProps } from "./components/Skeleton";
 export { Skeleton } from "./components/Skeleton";
 export type { ButtonProps } from "./components/Button";
 export { Button } from "./components/Button";
+export { FilePickerButton } from "./components/FilePickerButton";
+export type { FilePickerButtonProps } from "./components/FilePickerButton";
 export type { IconButtonProps } from "./components/IconButton";
 export { IconButton } from "./components/IconButton";
 export type { IconProps, IconTone } from "./components/Icon";
@@ -115,6 +117,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

@@ -19,6 +19,13 @@ export { SiteLogo } from "./components/SiteLogo";
 export { SiteMark } from "./components/SiteMark";
 export { Skeleton } from "./components/Skeleton";
 export { Button } from "./components/Button";
+/*
+ * The one primitive allowed to own a raw <input type="file">. Rule #9 sends
+ * every raw form element to a primitive and there was none for a file picker,
+ * so the only feature that needed one had to carry a suppression marker that
+ * audit-no-suppression-comments (strict-zero) correctly refuses.
+ */
+export { FilePickerButton } from "./components/FilePickerButton";
 export { IconButton } from "./components/IconButton";
 export { Icon } from "./components/Icon";
 export { ICONS, ICON_SIZE, isIconKey, resolveIcon, } from "./icons/icon-registry";
@@ -60,6 +67,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.39.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"