@mohasinac/appkit 2.3.2 → 2.4.1

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

@@ -11,39 +11,39 @@ const daysAgo = (n) => new Date(NOW.getTime() - n * 86400000);
 export const wishlistsSeedData = [
     // Ash wants Charizard and Blastoise — the classic rivalry cards
     {
-        userId: "user-ash-ketchum-pallet-ash",
+        userId: "user-ash-ketchum-buyer",
         productId: "product-charizard-base1-4-holo-rare-fire-blaine-1",
         addedAt: daysAgo(7),
     },
     {
-        userId: "user-ash-ketchum-pallet-ash",
+        userId: "user-ash-ketchum-buyer",
         productId: "product-blastoise-base1-2-holo-rare-water-misty-1",
         addedAt: daysAgo(5),
     },
     {
-        userId: "user-ash-ketchum-pallet-ash",
+        userId: "user-ash-ketchum-buyer",
         productId: "product-mewtwo-base1-10-holo-rare-psychic-surge-1",
         addedAt: daysAgo(3),
     },
     // Gary wants the rarest — the 1st edition auction Charizard and Mewtwo PSA 9
     {
-        userId: "user-gary-oak-pallet-gary",
+        userId: "user-gary-oak-buyer",
         productId: "auction-charizard-1st-ed-base1-4-fire-blaine-auction-1",
         addedAt: daysAgo(6),
     },
     {
-        userId: "user-gary-oak-pallet-gary",
+        userId: "user-gary-oak-buyer",
         productId: "auction-mewtwo-base1-10-psychic-surge-auction-1",
         addedAt: daysAgo(4),
     },
     // Brock wants solid Rock-type adjacent picks and sealed product
     {
-        userId: "user-brock-pewter-brock",
+        userId: "user-brock-pewter-buyer",
         productId: "product-base-set-booster-pack-sealed-blaine-1",
         addedAt: daysAgo(8),
     },
     {
-        userId: "user-brock-pewter-brock",
+        userId: "user-brock-pewter-buyer",
         productId: "product-venusaur-base1-15-holo-rare-grass-blaine-1",
         addedAt: daysAgo(4),
     },
@@ -82,34 +82,34 @@ export const wishlistsSeedData = [
     },
     // Professor Oak wants everything for research — the binder and trainer cards
     {
-        userId: "user-prof-oak-pallet-oak",
+        userId: "user-dawn-sinnoh-buyer",
         productId: "product-pokemon-9-pocket-binder-misty-1",
         addedAt: daysAgo(10),
     },
     {
-        userId: "user-prof-oak-pallet-oak",
+        userId: "user-dawn-sinnoh-buyer",
         productId: "product-professor-oak-base1-88-uncommon-trainer-surge-1",
         addedAt: daysAgo(6),
     },
     // Sabrina loves Psychic — and the Haunter is a natural fit
     {
-        userId: "user-sabrina-saffron-sabrina",
+        userId: "user-may-hoenn-buyer",
         productId: "product-haunter-base1-24-non-holo-rare-psychic-surge-1",
         addedAt: daysAgo(5),
     },
     {
-        userId: "user-sabrina-saffron-sabrina",
+        userId: "user-may-hoenn-buyer",
         productId: "product-mewtwo-base1-10-holo-rare-psychic-surge-1",
         addedAt: daysAgo(3),
     },
     // Erika loves Grass — Beedrill and Clefairy are her targets
     {
-        userId: "user-erika-celadon-erika",
+        userId: "user-dawn-sinnoh-buyer",
         productId: "product-beedrill-base1-17-non-holo-rare-grass-blaine-1",
         addedAt: daysAgo(3),
     },
     {
-        userId: "user-erika-celadon-erika",
+        userId: "user-dawn-sinnoh-buyer",
         productId: "product-clefairy-base1-35-uncommon-colorless-misty-1",
         addedAt: daysAgo(1),
     },

package/dist/server.d.ts

@@ -203,7 +203,7 @@ export { enforceConsentOtpRateLimit } from "./features/auth/server";
 export { generateOtpCode } from "./features/auth/server";
 export { generateToken } from "./features/auth/server";
 export { getPublicUserProfile } from "./features/auth/server";
-export { getSellerProducts } from "./features/auth/server";
+export { getProfileStoreProducts } from "./features/auth/server";
 export { getSellerReviews } from "./features/auth/server";
 export { getUserProfile } from "./features/auth/server";
 export { getUserSessions } from "./features/auth/server";
@@ -221,6 +221,7 @@ export { blogSlugGET } from "./features/blog/server";
 export { createBlogPost } from "./features/blog/server";
 export { createBlogPostSchema } from "./features/blog/server";
 export { deleteBlogPost } from "./features/blog/server";
+export { getBrandBySlug } from "./features/brands/server";
 export { getBlogPostById } from "./features/blog/server";
 export { getBlogPostBySlug } from "./features/blog/server";
 export { getFeaturedBlogPosts } from "./features/blog/server";
@@ -331,7 +332,7 @@ export { getLatestPreOrders } from "./features/products/server";
 export { getLatestProducts } from "./features/products/server";
 export { getProductById } from "./features/products/server";
 export { getRelatedProducts } from "./features/products/server";
-export { getSellerStorefrontProducts } from "./features/products/server";
+export { getStoreStorefrontProducts } from "./features/products/server";
 export { listAuctions } from "./features/products/server";
 export { listPreOrders } from "./features/products/server";
 export { listProducts } from "./features/products/server";
@@ -412,6 +413,8 @@ export { buildStatusNotificationURL } from "./features/whatsapp-bot/server";
 export { isAdminNumber } from "./features/whatsapp-bot/server";
 export { parseIncomingWebhookPayload } from "./features/whatsapp-bot/server";
 export { sendWhatsAppMessage } from "./features/whatsapp-bot/server";
+export { sendWhatsAppBusinessMessage, syncProductsToCatalog, buildPurchaseAnnouncementMessage, buildGroupShareLink } from "./features/whatsapp-bot/server";
+export type { WaBusinessSendInput, CatalogSyncProduct, CatalogSyncInput, CatalogSyncResult, PurchaseAnnouncementInput } from "./features/whatsapp-bot/server";
 export { addToWishlist } from "./features/wishlist/server";
 export { getWishlistForUser } from "./features/wishlist/server";
 export { removeFromWishlist } from "./features/wishlist/server";
@@ -436,3 +439,7 @@ export { organizationJsonLd } from "./seo/index";
 export { searchBoxJsonLd } from "./seo/index";
 export type { SeoConfig, ProductSeoInput, CategorySeoInput, BlogSeoInput, AuctionSeoInput, } from "./seo/index";
 export { mergeFeatureMessages } from "./cli/index";
+export { fetchInstagramPosts, fetchFacebookPosts, fetchTikTokPosts, fetchDeviantArtPosts, } from "./features/homepage/lib/social-feed-fetcher";
+export type { SocialPost, SocialPlatform, SocialPostType, SocialFeedLayout, SocialFeedSectionConfig, } from "./features/homepage/schemas";
+export { fetchGoogleReviews } from "./features/homepage/lib/google-reviews-fetcher";
+export type { GoogleReview, GoogleReviewsResult } from "./features/homepage/lib/google-reviews-fetcher";

package/dist/server.js

@@ -615,8 +615,8 @@ export { generateToken } from "./features/auth/server";
 // getPublicUserProfile - Helper for get public user profile.
 export { getPublicUserProfile } from "./features/auth/server";
 // [SERVER-ONLY]-Server-only — uses Node.js, Next.js server internals, or third-party server SDKs (auth, email, payment, shipping).
-// getSellerProducts - Helper for get seller products.
-export { getSellerProducts } from "./features/auth/server";
+// getProfileStoreProducts - Helper for get store products for public profile view.
+export { getProfileStoreProducts } from "./features/auth/server";
 // [SERVER-ONLY]-Server-only — uses Node.js, Next.js server internals, or third-party server SDKs (auth, email, payment, shipping).
 // getSellerReviews - Helper for get seller reviews.
 export { getSellerReviews } from "./features/auth/server";
@@ -669,6 +669,8 @@ export { createBlogPostSchema } from "./features/blog/server";
 // deleteBlogPost - Helper for delete blog post.
 export { deleteBlogPost } from "./features/blog/server";
 // [SERVER-ONLY]-Server-only — uses Node.js, Next.js server internals, or third-party server SDKs (auth, email, payment, shipping).
+// getBrandBySlug - Helper for get brand by slug.
+export { getBrandBySlug } from "./features/brands/server";
 // getBlogPostById - Helper for get blog post by id.
 export { getBlogPostById } from "./features/blog/server";
 // [SERVER-ONLY]-Server-only — uses Node.js, Next.js server internals, or third-party server SDKs (auth, email, payment, shipping).
@@ -999,8 +1001,8 @@ export { getProductById } from "./features/products/server";
 // getRelatedProducts - Helper for get related products.
 export { getRelatedProducts } from "./features/products/server";
 // [SERVER-ONLY]-Server-only — uses Node.js, Next.js server internals, or third-party server SDKs (auth, email, payment, shipping).
-// getSellerStorefrontProducts - Helper for get seller storefront products.
-export { getSellerStorefrontProducts } from "./features/products/server";
+// getStoreStorefrontProducts - Helper for get store storefront products.
+export { getStoreStorefrontProducts } from "./features/products/server";
 // [SERVER-ONLY]-Server-only — uses Node.js, Next.js server internals, or third-party server SDKs (auth, email, payment, shipping).
 // listAuctions - Helper for list auctions.
 export { listAuctions } from "./features/products/server";
@@ -1241,6 +1243,8 @@ export { parseIncomingWebhookPayload } from "./features/whatsapp-bot/server";
 // [SERVER-ONLY]-Server-only — uses Node.js, Next.js server internals, or third-party server SDKs (auth, email, payment, shipping).
 // sendWhatsAppMessage - Shared export for send whats app message.
 export { sendWhatsAppMessage } from "./features/whatsapp-bot/server";
+// [SERVER-ONLY]-Server-only — Meta Cloud API helpers (WA3).
+export { sendWhatsAppBusinessMessage, syncProductsToCatalog, buildPurchaseAnnouncementMessage, buildGroupShareLink } from "./features/whatsapp-bot/server";
 // [SERVER-ONLY]-Server-only — uses Node.js, Next.js server internals, or third-party server SDKs (auth, email, payment, shipping).
 // addToWishlist - Helper for add to wishlist.
 export { addToWishlist } from "./features/wishlist/server";
@@ -1296,3 +1300,7 @@ export { searchBoxJsonLd } from "./seo/index";
 // -- i18n / messages ---------------------------------------------------------
 // mergeFeatureMessages - Merge per-feature message files into a single bundle.
 export { mergeFeatureMessages } from "./cli/index";
+// -- Social Feed (server-only: fetches from platform APIs using credentials) --
+export { fetchInstagramPosts, fetchFacebookPosts, fetchTikTokPosts, fetchDeviantArtPosts, } from "./features/homepage/lib/social-feed-fetcher";
+// -- Google Reviews (server-only: calls Google Places API) --------------------
+export { fetchGoogleReviews } from "./features/homepage/lib/google-reviews-fetcher";

package/dist/tokens/tokens.css

@@ -15,34 +15,43 @@
  */
 
 /* --- Colour — Brand ------------------------------------------------------- */
+/*
+ * Light mode  (image 1 — cobalt-blue body + lime-green blades):
+ *   primary   = Cobalt Blue   (dominant body colour)
+ *   secondary = Lime Green    (blade / accent colour)
+ *
+ * Dark mode   (image 2 — hot-pink blades + near-black body):
+ *   primary   = Hot Pink      (dominant accent colour)   ← overridden in .dark below
+ *   secondary = Hot Pink      (same — unified accent)    ← overridden in .dark below
+ */
 :root {
-  /* Primary — Lime Green (Beyblade green blades) */
-  --appkit-color-primary:          #84e122;
-  --appkit-color-primary-50:       #f3ffe3;
-  --appkit-color-primary-100:      #e4ffc5;
-  --appkit-color-primary-200:      #c8ff90;
-  --appkit-color-primary-300:      #a3f550;
-  --appkit-color-primary-400:      #84e122;
-  --appkit-color-primary-500:      #65c408;
-  --appkit-color-primary-600:      #509c02;
-  --appkit-color-primary-700:      #3e7708;
-  --appkit-color-primary-800:      #345e0d;
-  --appkit-color-primary-900:      #2c5011;
-  --appkit-color-primary-950:      #142d03;
-
-  /* Secondary — Hot Pink / Magenta (dark mode accent, pink Beyblade blades) */
-  --appkit-color-secondary:        #e91e8c;
-  --appkit-color-secondary-50:     #fdf0f8;
-  --appkit-color-secondary-100:    #fce2f2;
-  --appkit-color-secondary-200:    #fac6e6;
-  --appkit-color-secondary-300:    #f79dd2;
-  --appkit-color-secondary-400:    #f063b9;
-  --appkit-color-secondary-500:    #e91e8c;
-  --appkit-color-secondary-600:    #d4107a;
-  --appkit-color-secondary-700:    #b00d66;
-  --appkit-color-secondary-800:    #900f56;
-  --appkit-color-secondary-900:    #771249;
-  --appkit-color-secondary-950:    #480525;
+  /* Primary — Cobalt Blue (light mode dominant, matches Beyblade 1 blue body) */
+  --appkit-color-primary:          #3570fc;
+  --appkit-color-primary-50:       #eef5ff;
+  --appkit-color-primary-100:      #d9e8ff;
+  --appkit-color-primary-200:      #bcd4ff;
+  --appkit-color-primary-300:      #8eb9ff;
+  --appkit-color-primary-400:      #5992ff;
+  --appkit-color-primary-500:      #3570fc;
+  --appkit-color-primary-600:      #1a55f2;
+  --appkit-color-primary-700:      #1343de;
+  --appkit-color-primary-800:      #1536b4;
+  --appkit-color-primary-900:      #18318e;
+  --appkit-color-primary-950:      #111e58;
+
+  /* Secondary — Lime Green (light mode accent, matches Beyblade 1 green blades) */
+  --appkit-color-secondary:        #65c408;
+  --appkit-color-secondary-50:     #f3ffe3;
+  --appkit-color-secondary-100:    #e4ffc5;
+  --appkit-color-secondary-200:    #c8ff90;
+  --appkit-color-secondary-300:    #a3f550;
+  --appkit-color-secondary-400:    #84e122;
+  --appkit-color-secondary-500:    #65c408;
+  --appkit-color-secondary-600:    #509c02;
+  --appkit-color-secondary-700:    #3e7708;
+  --appkit-color-secondary-800:    #345e0d;
+  --appkit-color-secondary-900:    #2c5011;
+  --appkit-color-secondary-950:    #142d03;
 
   /* Cobalt — Blue accent (links, nav) */
   --appkit-color-cobalt:           #3570fc;
@@ -91,10 +100,41 @@
 
   --appkit-color-success:          #059669;    /* emerald-600 */
   --appkit-color-warning:          #d97706;    /* amber-600 */
+  --appkit-color-warning-surface:  #fffbeb;    /* amber-50 */
   --appkit-color-error:            #dc2626;    /* red-600 */
   --appkit-color-info:             #0284c7;    /* sky-600 */
 
-  --appkit-color-focus-ring:       #65c408;    /* primary-500 */
+  --appkit-color-focus-ring:       #3570fc;    /* primary-500 = cobalt blue */
+}
+
+/* --- Colour — Brand (dark mode overrides) --------------------------------- */
+/* Dark mode: both primary & secondary become Hot Pink (Beyblade 2 dominant colour) */
+.dark {
+  --appkit-color-primary:          #e91e8c;
+  --appkit-color-primary-50:       #fdf0f8;
+  --appkit-color-primary-100:      #fce2f2;
+  --appkit-color-primary-200:      #fac6e6;
+  --appkit-color-primary-300:      #f79dd2;
+  --appkit-color-primary-400:      #f063b9;
+  --appkit-color-primary-500:      #e91e8c;
+  --appkit-color-primary-600:      #d4107a;
+  --appkit-color-primary-700:      #b00d66;
+  --appkit-color-primary-800:      #900f56;
+  --appkit-color-primary-900:      #771249;
+  --appkit-color-primary-950:      #480525;
+
+  --appkit-color-secondary:        #e91e8c;
+  --appkit-color-secondary-50:     #fdf0f8;
+  --appkit-color-secondary-100:    #fce2f2;
+  --appkit-color-secondary-200:    #fac6e6;
+  --appkit-color-secondary-300:    #f79dd2;
+  --appkit-color-secondary-400:    #f063b9;
+  --appkit-color-secondary-500:    #e91e8c;
+  --appkit-color-secondary-600:    #d4107a;
+  --appkit-color-secondary-700:    #b00d66;
+  --appkit-color-secondary-800:    #900f56;
+  --appkit-color-secondary-900:    #771249;
+  --appkit-color-secondary-950:    #480525;
 }
 
 /* --- Colour — Semantic (dark mode overrides) ------------------------------ */
@@ -113,10 +153,14 @@
 
   --appkit-color-success:          #34d399;    /* emerald-400 */
   --appkit-color-warning:          #fbbf24;    /* amber-400 */
+  --appkit-color-warning-surface:  #1c1508;    /* dark amber tint */
   --appkit-color-error:            #f87171;    /* red-400 */
   --appkit-color-info:             #38bdf8;    /* sky-400 */
 
-  --appkit-color-focus-ring:       #f063b9;    /* secondary-400 */
+  --appkit-color-focus-ring:       #f063b9;    /* primary-400 in dark = hot pink */
+  /* Dark-mode glow: use hot pink instead of cobalt */
+  --appkit-shadow-glow:            0 0 0 1px rgba(233,30,140,0.12), 0 4px 16px -4px rgba(233,30,140,0.22);
+  --appkit-shadow-glow-pink:       0 0 0 1px rgba(233,30,140,0.14), 0 4px 20px -4px rgba(233,30,140,0.28);
 }
 
 /* --- Typography ----------------------------------------------------------- */
@@ -186,8 +230,9 @@
   --appkit-shadow-lg:      0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
   --appkit-shadow-xl:      0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
   --appkit-shadow-soft:    0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04);
-  --appkit-shadow-glow:    0 0 20px rgba(80, 156, 2, 0.45);
-  --appkit-shadow-glow-pink: 0 0 20px rgba(233, 30, 140, 0.5);
+  /* Themed glow: tight ring + soft bloom — no bleed into neighbours */
+  --appkit-shadow-glow:      0 0 0 1px rgba(53,112,252,0.10), 0 4px 16px -4px rgba(53,112,252,0.20);
+  --appkit-shadow-glow-pink: 0 0 0 1px rgba(233,30,140,0.12), 0 4px 16px -4px rgba(233,30,140,0.22);
 }
 
 /* --- Z-index -------------------------------------------------------------- */

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

@@ -58,16 +58,14 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-avatar {
-    background: #1e293b;
-  }
-  .appkit-avatar--fallback {
-    background: #334155;
-    color: #e2e8f0;
-  }
-  .appkit-avatar-group__overflow {
-    background: #475569;
-    color: #e2e8f0;
-  }
+.dark .appkit-avatar {
+  background: #1e293b;
+}
+.dark .appkit-avatar--fallback {
+  background: #334155;
+  color: #e2e8f0;
+}
+.dark .appkit-avatar-group__overflow {
+  background: #475569;
+  color: #e2e8f0;
 }

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

@@ -6,6 +6,11 @@ export interface BaseListingCardRootProps {
     variant?: "grid" | "list";
     onClick?: () => void;
     children?: ReactNode;
+    onMouseDown?: () => void;
+    onMouseUp?: () => void;
+    onMouseLeave?: () => void;
+    onTouchStart?: () => void;
+    onTouchEnd?: () => void;
 }
 export interface BaseListingCardHeroProps {
     aspect?: string;
@@ -27,9 +32,9 @@ export interface BaseListingCardCheckboxProps {
     position?: string;
     className?: string;
 }
-declare function BaseListingCardRoot({ className, isSelected, isDisabled, onClick, children, }: BaseListingCardRootProps): import("react/jsx-runtime").JSX.Element;
-declare function BaseListingCardHero({ aspect, className, children, onMouseEnter, onMouseLeave, }: BaseListingCardHeroProps): import("react/jsx-runtime").JSX.Element;
-declare function BaseListingCardInfo({ className, children, }: BaseListingCardInfoProps): import("react/jsx-runtime").JSX.Element;
+declare function BaseListingCardRoot({ className, isSelected, isDisabled, variant, onClick, onMouseDown, onMouseUp, onMouseLeave, onTouchStart, onTouchEnd, children, }: BaseListingCardRootProps): import("react/jsx-runtime").JSX.Element;
+declare function BaseListingCardHero({ aspect, variant, className, children, onMouseEnter, onMouseLeave, }: BaseListingCardHeroProps): import("react/jsx-runtime").JSX.Element;
+declare function BaseListingCardInfo({ variant, className, children, }: BaseListingCardInfoProps): import("react/jsx-runtime").JSX.Element;
 declare function BaseListingCardCheckbox({ selected, onSelect, label, position, className, }: BaseListingCardCheckboxProps): import("react/jsx-runtime").JSX.Element;
 export declare const BaseListingCard: typeof BaseListingCardRoot & {
     Hero: typeof BaseListingCardHero;

package/dist/ui/components/BaseListingCard.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "./Button";
 import { Span } from "./Typography";
-function BaseListingCardRoot({ className = "", isSelected, isDisabled, onClick, children, }) {
-    return (_jsx("div", { onClick: onClick, className: [
-            "relative flex flex-col w-full min-w-0 overflow-hidden rounded-xl border bg-white dark:bg-zinc-900 transition-shadow",
+function BaseListingCardRoot({ className = "", isSelected, isDisabled, variant = "grid", onClick, onMouseDown, onMouseUp, onMouseLeave, onTouchStart, onTouchEnd, children, }) {
+    return (_jsx("div", { onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseLeave: onMouseLeave, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, className: [
+            "group relative w-full min-w-0 overflow-hidden rounded-xl border bg-white dark:bg-zinc-900 transition-shadow",
+            variant === "list" ? "flex flex-row items-stretch" : "flex flex-col",
             isSelected
                 ? "border-primary outline outline-2 outline-primary shadow-sm"
                 : "border-zinc-200 dark:border-zinc-700 shadow-sm hover:shadow-md",
@@ -14,7 +15,16 @@ function BaseListingCardRoot({ className = "", isSelected, isDisabled, onClick,
             .filter(Boolean)
             .join(" "), children: children }));
 }
-function BaseListingCardHero({ aspect, className = "", children, onMouseEnter, onMouseLeave, }) {
+function BaseListingCardHero({ aspect, variant = "grid", className = "", children, onMouseEnter, onMouseLeave, }) {
+    if (variant === "list") {
+        return (_jsx("div", { className: [
+                "relative overflow-hidden bg-zinc-100 dark:bg-zinc-800 flex-shrink-0",
+                "w-20 h-20 sm:w-28 sm:h-28",
+                className,
+            ]
+                .filter(Boolean)
+                .join(" "), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children }));
+    }
     const aspectClass = aspect === "square"
         ? "aspect-square"
         : aspect === "4/3" || !aspect
@@ -28,9 +38,10 @@ function BaseListingCardHero({ aspect, className = "", children, onMouseEnter, o
             .filter(Boolean)
             .join(" "), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children }));
 }
-function BaseListingCardInfo({ className = "", children, }) {
+function BaseListingCardInfo({ variant = "grid", className = "", children, }) {
     return (_jsx("div", { className: [
-            "p-3 flex flex-col flex-1 gap-1.5",
+            "flex flex-col flex-1 min-w-0 gap-1",
+            variant === "list" ? "p-2 sm:p-3 justify-center" : "p-3",
             className,
         ]
             .filter(Boolean)

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

@@ -14,7 +14,9 @@
 }
 
 :is(.dark) .appkit-listing-card {
-  border-color: #374151;
+  background-color: #0f172a;  /* slate-900 — matches --appkit-color-surface dark */
+  border-color: #334155;       /* slate-700 — matches --appkit-color-border dark */
+  color: #f1f5f9;
 }
 
 .appkit-listing-card--selected {

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

@@ -0,0 +1,16 @@
+import React from "react";
+export interface BulkAction {
+    key: string;
+    label: string;
+    icon?: React.ReactNode;
+    onClick: () => void;
+    variant?: "primary" | "secondary" | "danger";
+    requiresAuth?: boolean;
+}
+export interface BulkActionsBarProps {
+    selectedCount: number;
+    onClearSelection: () => void;
+    actions: BulkAction[];
+    isAuthenticated?: boolean;
+}
+export declare function BulkActionsBar({ selectedCount, onClearSelection, actions, isAuthenticated, }: BulkActionsBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/BulkActionsBar.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { Button } from "./Button";
+const ACTION_VARIANT_CLASS = {
+    primary: "bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-white hover:opacity-90 btn-glow",
+    secondary: "border border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800",
+    danger: "bg-[var(--appkit-color-danger,theme(colors.rose.500))] text-white hover:opacity-90",
+};
+export function BulkActionsBar({ selectedCount, onClearSelection, actions, isAuthenticated = false, }) {
+    return (_jsx("div", { className: [
+            "fixed inset-x-0 bottom-0 transition-transform duration-300 ease-out",
+            selectedCount > 0 ? "translate-y-0" : "translate-y-full",
+        ].join(" "), style: { zIndex: "var(--appkit-z-modal, 1000)" }, "aria-live": "polite", "aria-label": `${selectedCount} items selected`, children: _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 bg-white/[.98] dark:bg-slate-900/[.98] backdrop-blur-md px-4 py-3 shadow-2xl", children: _jsxs("div", { className: "mx-auto flex max-w-5xl items-center gap-3", children: [_jsxs("span", { className: "shrink-0 text-sm font-semibold text-zinc-700 dark:text-zinc-200", children: [selectedCount, " selected"] }), _jsx("div", { className: "h-4 w-px shrink-0 bg-zinc-200 dark:bg-slate-700" }), _jsx("div", { className: "flex flex-1 flex-wrap items-center gap-2", children: actions.map((action) => {
+                            if (action.requiresAuth && !isAuthenticated)
+                                return null;
+                            return (_jsxs("button", { type: "button", onClick: action.onClick, className: [
+                                    "flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold transition-all active:scale-95",
+                                    ACTION_VARIANT_CLASS[action.variant ?? "secondary"],
+                                ].join(" "), children: [action.icon, action.label] }, action.key));
+                        }) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClearSelection, "aria-label": "Clear selection", className: "ml-auto flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-zinc-400 hover:bg-zinc-100 dark:hover:bg-slate-800 hover:text-zinc-600 dark:hover:text-zinc-200 transition-colors", children: _jsx(X, { className: "h-4 w-4" }) })] }) }) }));
+}

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

@@ -48,79 +48,79 @@
 }
 
 .appkit-button--primary {
-  background: #3e7708;
-  color: #ffffff;
+  background: var(--appkit-color-primary-700, #3e7708);
+  color: var(--appkit-color-text-on-primary, #ffffff);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }
 
 .appkit-button--primary:hover:not(:disabled) {
-  background: #2f5a06;
+  background: var(--appkit-color-primary-800, #2f5a06);
 }
 
 .dark .appkit-button--primary {
-  background: #e91e8c;
+  background: var(--appkit-color-secondary, #e91e8c);
 }
 
 .dark .appkit-button--primary:hover:not(:disabled) {
-  background: #f063b9;
+  background: var(--appkit-color-secondary-400, #f063b9);
 }
 
 .appkit-button--secondary {
-  background: #3e7708;
-  color: #ffffff;
+  background: var(--appkit-color-primary-700, #3e7708);
+  color: var(--appkit-color-text-on-primary, #ffffff);
 }
 
 .appkit-button--secondary:hover:not(:disabled) {
-  background: #509c02;
+  background: var(--appkit-color-primary-600, #509c02);
 }
 
 .dark .appkit-button--secondary {
-  background: #b00d66;
+  background: var(--appkit-color-secondary-700, #b00d66);
 }
 
 .dark .appkit-button--secondary:hover:not(:disabled) {
-  background: #d4107a;
+  background: var(--appkit-color-secondary-600, #d4107a);
 }
 
 .appkit-button--outline {
-  background: #ffffff;
-  border-color: #e4e4e7;
-  color: #18181b;
+  background: var(--appkit-color-surface, #ffffff);
+  border-color: var(--appkit-color-border, #e4e4e7);
+  color: var(--appkit-color-text, #18181b);
 }
 
 .appkit-button--outline:hover:not(:disabled) {
-  background: #fafafa;
+  background: var(--appkit-color-bg, #fafafa);
 }
 
 .dark .appkit-button--outline {
   background: transparent;
-  border-color: #334155;
-  color: #f8fafc;
+  border-color: var(--appkit-color-border, #334155);
+  color: var(--appkit-color-text, #f8fafc);
 }
 
 .dark .appkit-button--outline:hover:not(:disabled) {
-  background: #1e293b;
+  background: rgba(30, 41, 59, 0.5);
 }
 
 .appkit-button--ghost {
   background: transparent;
-  color: #3f3f46;
+  color: var(--appkit-color-text, #3f3f46);
 }
 
 .appkit-button--ghost:hover:not(:disabled) {
-  background: #f4f4f5;
+  background: var(--appkit-color-border-subtle, #f4f4f5);
 }
 
 .dark .appkit-button--ghost {
-  color: #cbd5e1;
+  color: var(--appkit-color-text-muted, #cbd5e1);
 }
 
 .dark .appkit-button--ghost:hover:not(:disabled) {
-  background: #1e293b;
+  background: rgba(30, 41, 59, 0.5);
 }
 
 .appkit-button--danger {
-  background: #dc2626;
+  background: var(--appkit-color-error, #dc2626);
   color: #ffffff;
 }
 
@@ -129,7 +129,7 @@
 }
 
 .appkit-button--warning {
-  background: #f59e0b;
+  background: var(--appkit-color-warning, #f59e0b);
   color: #ffffff;
 }