@mohasinac/appkit 4.12.0 → 4.12.2

package/dist/tokens/color-pairs.js

@@ -51,6 +51,7 @@ export const SURFACE_TEXT_PAIR_MAP = {
         textMutedVar: "var(--appkit-color-info)",
         textFaintVar: "var(--appkit-color-text-muted)",
     },
+    frost: ON_PRIMARY_PAIR,
     "overlay-xs": ON_PRIMARY_PAIR,
     "overlay-sm": ON_PRIMARY_PAIR,
     "overlay-md": ON_PRIMARY_PAIR,

package/dist/tokens/tokens.css

@@ -284,6 +284,31 @@
   --appkit-color-info-surface:     #f0f9ff;    /* sky-50 */
   --appkit-color-star:             #facc15;    /* yellow-400 — star ratings (decorative convention) */
 
+  /* Solid status fills — the OVERLAY counterpart to the `-surface` tints above.
+     `-surface` is a light tint in light themes and a dark tint in dark themes,
+     so it must pair with the matching `--appkit-color-STATUS` ink (which flips
+     the opposite way) to stay readable. That pairing is correct for an inline
+     chip, but too pale for a badge sitting on a product photo. These `-solid`
+     values are deliberately NOT theme-inverted: they stay a dark, saturated
+     fill in every theme so `-on-solid` can stay white in every theme.
+     Pairing rule, using `warning` as the worked example:
+       chip    -> bg-warning-surface + text-warning
+       overlay -> bg-warning-solid   + text-warning-on-solid
+     NB: never write a curly brace in a comment in this file. audit-theme-drift
+     matches each rule block with a non-greedy `:root ... ` regex, so a stray
+     closing brace inside a comment truncates the block and silently hides
+     every token declared below it from the drift check.
+     Both naive spellings are broken in exactly one theme, which is why
+     `audit-status-color-pairs.mjs` blocks them. */
+  --appkit-color-success-solid:    #15803d;    /* green-700 */
+  --appkit-color-success-on-solid: #ffffff;
+  --appkit-color-warning-solid:    #b45309;    /* amber-700 */
+  --appkit-color-warning-on-solid: #ffffff;
+  --appkit-color-error-solid:      #b91c1c;    /* red-700 */
+  --appkit-color-error-on-solid:   #ffffff;
+  --appkit-color-info-solid:       #0369a1;    /* sky-700 */
+  --appkit-color-info-on-solid:    #ffffff;
+
   --appkit-color-focus-ring:       #0d9488;    /* primary-600 = teal */
 }
 
@@ -616,6 +641,14 @@
      etc. — the highest of those is 65). Set above tooltip so it's the
      unconditional top of the interactive-overlay stack. */
   --appkit-z-confirm:        90;
+  /* Back-to-top floating control — the frontmost layer. It previously shared
+     `--appkit-z-bottom-nav` (40), so it tied with the bottom navbar and lost
+     to every sticky toolbar, drawer and toast on the page: the button was
+     scrolled to but unclickable (or entirely hidden) on most long pages,
+     which is exactly the surface it exists for. It is a small, dismissible,
+     non-blocking affordance, so sitting above the overlay stack costs
+     nothing — it never covers content, only floats in the corner gutter. */
+  --appkit-z-back-to-top:    95;
 
   /* Layout dimensions */
   --appkit-navbar-height:     2.5rem;  /* h-10 = 40px (mobile), h-12 = 48px (md) */

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

@@ -205,9 +205,30 @@
   animation: appkit-spin 1s linear infinite;
 }
 
+/*
+ * The content wrapper exists purely so the label paints above the ripple
+ * (z-index above). It must NOT introduce a new sizing context — before it
+ * existed, a child was a direct flex item of the button and could resolve
+ * `width:100%` / `height:100%` against the button's own definite box.
+ *
+ * Without `flex: 1 1 auto` + `align-self: stretch` this span is shrink-to-fit
+ * in BOTH axes, so any fill-style child (`<MediaImage>`, an `absolute inset-0`
+ * overlay, a `<Image fill>`) collapses to 0x0 and the button renders blank.
+ * That is exactly what happened to every image-tile button in the app when
+ * the ripple landed.
+ *
+ * `justify-content` / `gap` are inherited so the button's own `justify` and
+ * `gap` props keep reaching the real children now that they sit one level
+ * deeper than the flex container that declares them.
+ */
 .appkit-button__content {
   display: inline-flex;
   align-items: center;
+  justify-content: inherit;
+  gap: inherit;
+  flex: 1 1 auto;
+  align-self: stretch;
+  min-width: 0;
 }
 
 .appkit-button__content--loading {

package/dist/ui/components/ImageLightbox.js

@@ -8,7 +8,7 @@ import { Div } from "./Div";
 import { Text, Span } from "./Typography";
 import { MediaImage } from "../../features/media/MediaImage";
 import { getYouTubeVideoId } from "../../utils/media-url";
-const CLS_CLOSE_BTN = "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-error-surface text-white flex items-center justify-center";
+const CLS_CLOSE_BTN = "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-error-solid text-error-on-solid flex items-center justify-center";
 const MIN_ZOOM = 10;
 const MAX_ZOOM = 300;
 const ZOOM_STEP = 20;
@@ -124,19 +124,22 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, showTh
     const hasMultiple = images.length > 1;
     const youtubeId = image.kind === "video" ? getYouTubeVideoId(image.src) : null;
     const iconBtnClass = "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white flex items-center justify-center";
-    return createPortal(_jsxs("div", { ref: overlayRef, tabIndex: -1, className: "appkit-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", onKeyDown: handleKeyDown, onWheel: handleWheel, children: [_jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3 bg-gradient-to-b from-black/60 to-transparent", children: [_jsx(Span, { size: "sm", weight: "medium", className: "text-white/70", children: hasMultiple ? `${currentIndex + 1} / ${images.length}` : "" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(-ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom out", disabled: zoom <= MIN_ZOOM, children: _jsx(ZoomOut, { className: "w-4 h-4" }) }), _jsxs("button", { type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: "text-white/70 hover:text-white text-xs font-mono min-w-[3rem] text-center", "aria-label": "Reset zoom", children: [zoom, "%"] }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom in", disabled: zoom >= MAX_ZOOM, children: _jsx(ZoomIn, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => setRotation((r) => (r + 90) % 360), className: iconBtnClass, "aria-label": "Rotate 90\u00B0", children: _jsx(RotateCw, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: toggleFullscreen, className: iconBtnClass, "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen", children: isFullscreen ? _jsx(Minimize2, { className: "w-4 h-4" }) : _jsx(Maximize2, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: CLS_CLOSE_BTN, "aria-label": "Close lightbox", children: _jsx(X, { className: "w-5 h-5" }) })] })] }), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(-1), className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Previous image", children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsxs("div", { className: "appkit-lightbox__image-wrap", style: { cursor: zoom > 100 ? "grab" : "default" }, children: [image.kind === "video" ? (youtubeId ? (_jsx("iframe", { src: `https://www.youtube-nocookie.com/embed/${youtubeId}?playsinline=1&rel=0`, title: image.alt ?? "Video", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, className: "appkit-lightbox__img appkit-lightbox__video border-0" })) : (_jsx("video", { src: image.src, poster: image.poster, controls: true, playsInline: true, "aria-label": image.alt ?? "Video", className: "appkit-lightbox__img appkit-lightbox__video", style: {
+    return createPortal(_jsxs("div", { ref: overlayRef, tabIndex: -1, className: "appkit-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", onKeyDown: handleKeyDown, onWheel: handleWheel, children: [_jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3 bg-gradient-to-b from-black/60 to-transparent", children: [_jsx(Span, { size: "sm", weight: "medium", className: "text-white/70", children: hasMultiple ? `${currentIndex + 1} / ${images.length}` : "" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(-ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom out", disabled: zoom <= MIN_ZOOM, children: _jsx(ZoomOut, { className: "w-4 h-4" }) }), _jsxs(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: "text-white/70 hover:text-white text-xs font-mono min-w-[3rem] text-center p-0 !min-h-0", "aria-label": "Reset zoom", children: [zoom, "%"] }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom in", disabled: zoom >= MAX_ZOOM, children: _jsx(ZoomIn, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => setRotation((r) => (r + 90) % 360), className: iconBtnClass, "aria-label": "Rotate 90\u00B0", children: _jsx(RotateCw, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: toggleFullscreen, className: iconBtnClass, "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen", children: isFullscreen ? _jsx(Minimize2, { className: "w-4 h-4" }) : _jsx(Maximize2, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: CLS_CLOSE_BTN, "aria-label": "Close lightbox", children: _jsx(X, { className: "w-5 h-5" }) })] })] }), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(-1), className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Previous image", children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsxs("div", { className: "appkit-lightbox__image-wrap", style: { cursor: zoom > 100 ? "grab" : "default" }, children: [image.kind === "video" ? (youtubeId ? (_jsx("iframe", { src: `https://www.youtube-nocookie.com/embed/${youtubeId}?playsinline=1&rel=0`, title: image.alt ?? "Video", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, className: "appkit-lightbox__img appkit-lightbox__video border-0" })) : (_jsx("video", { src: image.src, poster: image.poster, controls: true, playsInline: true, "aria-label": image.alt ?? "Video", className: "appkit-lightbox__img appkit-lightbox__video", style: {
                             transform: `scale(${zoom / 100}) rotate(${rotation}deg)`,
                             transition: "transform 0.2s ease",
                         } }))) : (_jsx(MediaImage, { src: image.src, alt: image.alt ?? "", size: "hero", objectFit: "contain", className: "appkit-lightbox__img", style: {
                             transform: `scale(${zoom / 100}) rotate(${rotation}deg)`,
                             transition: "transform 0.2s ease",
-                        } })), image.badge && (_jsx(Div, { className: "absolute left-3 top-3 rounded bg-black/70 px-2 py-1 text-xs font-semibold text-white pointer-events-none", children: image.badge }))] }), (image.caption || image.sub) && (_jsxs("div", { className: "flex-shrink-0 text-center px-8 pb-2", children: [image.caption && (_jsx(Text, { size: "sm", variant: "secondary", className: "!text-white/80", children: image.caption })), image.sub && (_jsx(Text, { size: "sm", variant: "secondary", className: "!text-white/50", children: image.sub }))] })), showThumbnails && images.length > 1 && (_jsx("div", { className: "flex-shrink-0 flex gap-2 overflow-x-auto px-4 pb-3 justify-center", children: images.map((thumb, i) => (_jsx("button", { type: "button", onClick: () => {
+                        } })), image.badge && (_jsx(Div, { className: "absolute left-3 top-3 rounded bg-black/70 px-2 py-1 text-xs font-semibold text-white pointer-events-none", children: image.badge }))] }), (image.caption || image.sub) && (_jsxs("div", { className: "flex-shrink-0 text-center px-8 pb-2", children: [image.caption && (_jsx(Text, { size: "sm", variant: "secondary", className: "!text-white/80", children: image.caption })), image.sub && (_jsx(Text, { size: "sm", variant: "secondary", className: "!text-white/50", children: image.sub }))] })), showThumbnails && images.length > 1 && (_jsx("div", { className: "flex-shrink-0 flex gap-2 overflow-x-auto px-4 pb-3 justify-center", children: images.map((thumb, i) => (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => {
                         setCurrentIndex(i);
                         setZoom(100);
                         setRotation(0);
                         onNavigate?.(i);
                     }, className: [
-                        "h-14 w-14 flex-shrink-0 overflow-hidden rounded-lg border-2 transition-all",
+                        // p-0/!min-h-0 neutralise the Button's own padding and min-height —
+                        // this is a 56px image tile, and without them the primitive's
+                        // internal spacing stretches the thumbnail strip (Root Cause #15).
+                        "h-14 w-14 flex-shrink-0 overflow-hidden rounded-lg border-2 transition-all p-0 !min-h-0",
                         i === currentIndex
                             ? "scale-110 border-white"
                             : "border-transparent opacity-50 hover:opacity-90",

package/dist/ui/components/surface-tokens.d.ts

@@ -14,6 +14,13 @@ export declare const SURFACE_MAP: {
     readonly "danger-surface": "bg-[var(--appkit-color-error-surface)]";
     readonly "warning-surface": "bg-[var(--appkit-color-warning-surface)]";
     readonly "info-surface": "bg-[var(--appkit-color-info-surface)]";
+    /** Translucent WHITE chip on a dark/branded backdrop (hero banner, gradient
+     *  card, media overlay). The light counterpart to the `overlay-*` scrims:
+     *  those darken, this lightens. Deliberately not theme-tinted — it exists
+     *  precisely for surfaces that stay dark in every theme, where a
+     *  theme-relative surface token would resolve to white and give
+     *  white-on-white. Pairs with on-primary (white) text. */
+    readonly frost: "bg-white/15";
     readonly "overlay-xs": "bg-black/40";
     readonly "overlay-sm": "bg-black/50";
     readonly "overlay-md": "bg-black/55";

package/dist/ui/components/surface-tokens.js

@@ -27,6 +27,13 @@ export const SURFACE_MAP = {
     // Dark overlay scrim presets — used for image dimming, modal backdrops,
     // hover overlays. Backdrop-blur should be paired separately via className
     // when needed (backdrop-blur is not a colour utility, not in audit scope).
+    /** Translucent WHITE chip on a dark/branded backdrop (hero banner, gradient
+     *  card, media overlay). The light counterpart to the `overlay-*` scrims:
+     *  those darken, this lightens. Deliberately not theme-tinted — it exists
+     *  precisely for surfaces that stay dark in every theme, where a
+     *  theme-relative surface token would resolve to white and give
+     *  white-on-white. Pairs with on-primary (white) text. */
+    frost: "bg-white/15",
     "overlay-xs": "bg-black/40",
     "overlay-sm": "bg-black/50",
     "overlay-md": "bg-black/55",

package/package.json

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

package/dist/_internal/server/jobs/core/onBidPlaced.d.ts

@@ -1,15 +0,0 @@
-import type { JobContext } from "../runtime/types";
-export interface NewBid {
-    id: string;
-    productId: string;
-    productTitle: string;
-    userId: string;
-    userName: string;
-    bidAmount: number;
-    currency: string;
-}
-export interface HandleBidPlacedInput {
-    bidId: string;
-    bid: NewBid;
-}
-export declare function handleBidPlaced(input: HandleBidPlacedInput, ctx: JobContext): Promise<void>;

package/dist/_internal/server/jobs/core/onBidPlaced.js

@@ -1,63 +0,0 @@
-import { normalizeError } from "../../../../errors/normalize";
-import { bidRepository, productRepository, } from "../../../../repositories";
-import { decryptPii } from "../../../../security/index";
-import { sendNotification } from "../../../../features/admin/actions/notification-actions";
-import { getAdminRealtimeDb } from "../../../../providers/db-firebase";
-import { BID_MESSAGES } from "../handlers/messages";
-const BIDS_COLLECTION = "bids";
-export async function handleBidPlaced(input, ctx) {
-    const { bidId, bid: newBid } = input;
-    newBid.userName = decryptPii(newBid.userName);
-    try {
-        const prevWinning = await bidRepository.getWinningBid(newBid.productId);
-        const batch = ctx.db.batch();
-        const newBidRef = ctx.db.collection(BIDS_COLLECTION).doc(bidId);
-        bidRepository.markWinning(batch, newBidRef);
-        let outbidUserId = null;
-        if (prevWinning && prevWinning.data.userId !== newBid.userId) {
-            outbidUserId = prevWinning.data.userId;
-            bidRepository.markOutbid(batch, prevWinning.ref);
-        }
-        productRepository.incrementBidCountInBatch(batch, newBid.productId, newBid.bidAmount, newBid.userId);
-        await batch.commit();
-        if (outbidUserId) {
-            const outbidMessage = BID_MESSAGES.OUTBID_MESSAGE(newBid.productTitle, newBid.currency, newBid.bidAmount);
-            await sendNotification({
-                userId: outbidUserId,
-                type: "bid_outbid",
-                priority: "high",
-                title: BID_MESSAGES.OUTBID_TITLE,
-                message: outbidMessage,
-                relatedId: newBid.productId,
-                relatedType: "product",
-            });
-            try {
-                await getAdminRealtimeDb()
-                    .ref(`notifications/${outbidUserId}`)
-                    .push({
-                    type: "bid_outbid",
-                    title: BID_MESSAGES.OUTBID_TITLE,
-                    message: outbidMessage,
-                    timestamp: Date.now(),
-                    read: false,
-                });
-            }
-            catch (rtdbError) {
-                void normalizeError(rtdbError);
-                ctx.logger.error("Realtime DB push failed (non-fatal)", rtdbError);
-            }
-        }
-        ctx.logger.info(`Bid placed on ${newBid.productId}`, {
-            bidId,
-            amount: newBid.bidAmount,
-            outbidUserId,
-        });
-    }
-    catch (error) {
-        ctx.logger.error("Error handling bid placement", error, {
-            bidId,
-            productId: newBid.productId,
-        });
-        throw error;
-    }
-}

package/dist/_internal/server/jobs/handlers/onBidPlaced.d.ts

@@ -1,3 +0,0 @@
-import type { FirestoreTriggerHandler } from "../runtime/types";
-import { type NewBid } from "../core/onBidPlaced";
-export declare const onBidPlacedHandler: FirestoreTriggerHandler<null, NewBid>;

package/dist/_internal/server/jobs/handlers/onBidPlaced.js

@@ -1,9 +0,0 @@
-import { handleBidPlaced } from "../core/onBidPlaced";
-export const onBidPlacedHandler = async (event, ctx) => {
-    const newBid = event.after;
-    if (!newBid) {
-        ctx.logger.error("No snapshot data", null);
-        return;
-    }
-    await handleBidPlaced({ bidId: event.params.bidId, bid: newBid }, ctx);
-};