@mohasinac/appkit 2.8.3 → 2.8.5

package/dist/features/admin/components/AdminStoresView.js

@@ -1,5 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { sortBy } from "@mohasinac/appkit";
 import React, { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { FilterChipGroup, ListingLayout, RowActionMenu, useToast } from "../../../ui";
@@ -43,12 +45,12 @@ export function AdminStoresView({ children, ...props }) {
         searchPlaceholder: "Search stores, slugs, or owner names",
         emptyLabel: "No stores found",
         filterKeys: ["status"],
-        defaultSort: "-createdAt",
+        defaultSort: sortBy("createdAt", "DESC"),
         queryKey: ["admin", "stores", "listing"],
         endpoint: ADMIN_ENDPOINTS.STORES,
         sortOptions: [
-            { value: "-createdAt", label: "Newest" },
-            { value: "createdAt", label: "Oldest" },
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
+            { value: sortBy("createdAt", "ASC"), label: "Oldest" },
             { value: "storeName", label: "Name A–Z" },
         ],
         mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
@@ -63,7 +65,7 @@ export function AdminStoresView({ children, ...props }) {
             _raw: item,
         })),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
-        buildFilters: (state) => state.status && state.status !== "All" ? `status==${state.status}` : undefined,
+        buildFilters: (state) => state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : undefined,
         onRowClick: (row) => setEditorRow(row),
         buildBulkActions: (selection) => [
             {

package/dist/features/admin/components/AdminSublistingCategoriesView.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { sortBy } from "@mohasinac/appkit";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
@@ -12,14 +13,14 @@ export function AdminSublistingCategoriesView({ onBulkDelete, }) {
         searchPlaceholder: "Search sub-listing categories…",
         emptyLabel: "No sub-listing categories found",
         filterKeys: [],
-        defaultSort: "name",
+        defaultSort: sortBy("name", "ASC"),
         queryKey: ["admin", "sublisting-categories", "listing"],
         endpoint: ADMIN_ENDPOINTS.SUBLISTING_CATEGORIES,
         sortOptions: [
-            { value: "name", label: "Name A–Z" },
-            { value: "-name", label: "Name Z–A" },
-            { value: "-productCount", label: "Most listings" },
-            { value: "-createdAt", label: "Newest" },
+            { value: sortBy("name", "ASC"), label: "Name A–Z" },
+            { value: sortBy("name", "DESC"), label: "Name Z–A" },
+            { value: sortBy("productCount", "DESC"), label: "Most listings" },
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
         ],
         mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
             id: toStringValue(item.id, `sc-${index}`),

package/dist/features/admin/components/AdminSupportTicketDetailView.js

@@ -250,7 +250,6 @@ export function AdminSupportTicketDetailView({ open, onClose, ticketId, subject,
                             ["bidId", "Bid ID"],
                         ].map(([key, label]) => (_jsx(Input, { label: label, type: "text", value: parties[key] ?? "", onChange: (e) => setParties((p) => ({ ...p, [key]: e.target.value })), placeholder: label }, key)))] }), isOrderModificationRequest && (_jsx(OrderItemsPanel, { linkedOrderId: linkedOrderId, orderItemsOpen: orderItemsOpen, setOrderItemsOpen: setOrderItemsOpen, orderItems: orderItems, setOrderItems: setOrderItems, loadOrderItems: loadOrderItems, applyOrderItems: applyOrderItems })), isStoreChangeRequest && (_jsx(StoreChangePanel, { linkedStoreId: linkedStoreId, storeStatus: storeStatus, setStoreStatus: setStoreStatus, storeIsVerified: storeIsVerified, setStoreIsVerified: setStoreIsVerified, storeIsFeatured: storeIsFeatured, setStoreIsFeatured: setStoreIsFeatured, applyStoreChange: applyStoreChange })), isUnbanRequest && (_jsx(UnbanRequestPanel, { linkedUserId: linkedUserId, liftHardBan: liftHardBan, liftSoftBanTickets: liftSoftBanTickets })), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", isLoading: updateMutation.isPending, disabled: !ticketId || updateMutation.isPending, onClick: () => updateMutation.mutate(), children: "Save changes" })] })] }) }));
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function OrderItemsPanel(props) {
     const { linkedOrderId, orderItemsOpen, setOrderItemsOpen, orderItems, setOrderItems, loadOrderItems, applyOrderItems, } = props;
     const updateQty = (idx, raw) => {
@@ -259,7 +258,6 @@ function OrderItemsPanel(props) {
     };
     return (_jsxs(Div, { padding: "sm", className: "flex flex-col gap-2 rounded-lg border border-info/40 bg-info-surface/40", children: [_jsx(Text, { className: "text-xs font-semibold text-info uppercase tracking-wide", children: "Modify order items" }), linkedOrderId ? (_jsxs(_Fragment, { children: [_jsxs(Text, { className: "text-xs text-zinc-600 dark:text-zinc-300", children: ["Editing order: ", _jsx("code", { className: "font-mono", children: linkedOrderId })] }), !orderItemsOpen ? (_jsx(Button, { type: "button", variant: "secondary", size: "sm", isLoading: loadOrderItems.isPending, disabled: loadOrderItems.isPending, onClick: () => loadOrderItems.mutate(), children: "Load current items" })) : (_jsxs(_Fragment, { children: [orderItems.length === 0 ? (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Order has no items." })) : (_jsx(Div, { className: "flex flex-col gap-2", children: orderItems.map((it, idx) => (_jsxs(Div, { className: "flex items-center gap-2 rounded border border-zinc-200 dark:border-zinc-700 px-2 py-1", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "text-xs font-medium truncate", children: it.productTitle }), _jsxs(Text, { size: "xs", color: "muted", children: [it.productId, " \u00B7 \u20B9", (it.unitPrice / 100).toFixed(2), "/ea"] })] }), _jsx("input", { type: "number", min: "0", value: it.quantity, onChange: (e) => updateQty(idx, e.target.value), className: "w-16 rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-2 py-1 text-xs" })] }, `${it.productId}-${idx}`))) })), _jsxs(Row, { gap: "sm", children: [_jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: () => setOrderItemsOpen(false), children: "Cancel" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", isLoading: applyOrderItems.isPending, disabled: applyOrderItems.isPending, onClick: () => applyOrderItems.mutate(), children: "Apply changes" })] })] }))] })) : (_jsxs(Text, { className: "text-xs text-zinc-600 dark:text-zinc-300", children: ["Set the", " ", _jsx(Text, { as: "span", weight: "semibold", children: "Order ID" }), " ", "field in the Linked parties panel above to enable this action."] }))] }));
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function StoreChangePanel(props) {
     const { linkedStoreId, storeStatus, setStoreStatus, storeIsVerified, setStoreIsVerified, storeIsFeatured, setStoreIsFeatured, applyStoreChange, } = props;
     return (_jsxs(Div, { padding: "sm", className: "flex flex-col gap-2 rounded-lg border border-warning/40 bg-warning-surface/40", children: [_jsx(Text, { className: "text-xs font-semibold text-warning uppercase tracking-wide", children: "Apply store change" }), linkedStoreId ? (_jsxs(_Fragment, { children: [_jsxs(Text, { className: "text-xs text-zinc-600 dark:text-zinc-300", children: ["Editing store: ", _jsx("code", { className: "font-mono", children: linkedStoreId })] }), _jsx(Select, { label: "Store status", options: [
@@ -269,7 +267,6 @@ function StoreChangePanel(props) {
                             { label: "Rejected", value: "rejected" },
                         ], value: storeStatus, onValueChange: setStoreStatus }), _jsx(Toggle, { label: "Verified badge", checked: storeIsVerified, onChange: setStoreIsVerified }), _jsx(Toggle, { label: "Featured store", checked: storeIsFeatured, onChange: setStoreIsFeatured }), _jsx(Button, { type: "button", variant: "primary", size: "sm", isLoading: applyStoreChange.isPending, disabled: applyStoreChange.isPending, onClick: () => applyStoreChange.mutate(), children: "Apply store change" })] })) : (_jsxs(Text, { className: "text-xs text-zinc-600 dark:text-zinc-300", children: ["Set the", " ", _jsx(Text, { as: "span", weight: "semibold", children: "Store slug" }), " ", "field in the Linked parties panel above to enable this action."] }))] }));
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function UnbanRequestPanel(props) {
     const { linkedUserId, liftHardBan, liftSoftBanTickets } = props;
     return (_jsxs(Div, { padding: "sm", className: "flex flex-col gap-2 rounded-lg border border-error/40 bg-error-surface/40", children: [_jsx(Text, { className: "text-xs font-semibold text-error uppercase tracking-wide", children: "Lift account ban" }), linkedUserId ? (_jsxs(_Fragment, { children: [_jsxs(Text, { className: "text-xs text-zinc-600 dark:text-zinc-300", children: ["Appellant: ", _jsx("code", { className: "font-mono", children: linkedUserId })] }), _jsx(Text, { size: "xs", color: "muted", children: "Resolves the ticket and appends an audit note on success." }), _jsxs(Row, { gap: "sm", children: [_jsx(Button, { type: "button", variant: "primary", size: "sm", isLoading: liftHardBan.isPending, disabled: liftHardBan.isPending, onClick: () => liftHardBan.mutate(), children: "Lift hard ban" }), _jsx(Button, { type: "button", variant: "secondary", size: "sm", isLoading: liftSoftBanTickets.isPending, disabled: liftSoftBanTickets.isPending, onClick: () => liftSoftBanTickets.mutate(), children: "Lift ticket soft ban" })] })] })) : (_jsxs(Text, { className: "text-xs text-zinc-600 dark:text-zinc-300", children: ["Set the", " ", _jsx(Text, { as: "span", weight: "semibold", children: "User slug" }), " ", "field in the Linked parties panel above to enable these actions."] }))] }));

package/dist/features/admin/components/AdminSupportTicketsView.js

@@ -1,5 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { sortBy } from "@mohasinac/appkit";
 import React, { useState } from "react";
 import { Div, FilterChipGroup, ListingLayout, RowActionMenu, Span, Text } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
@@ -55,13 +57,13 @@ export function AdminSupportTicketsView({ children, ...props }) {
         searchPlaceholder: "Search by subject",
         emptyLabel: "No support tickets found",
         filterKeys: ["status", "priority"],
-        defaultSort: "-createdAt",
+        defaultSort: sortBy("createdAt", "DESC"),
         queryKey: ["admin", "support-tickets", "listing"],
         endpoint: ADMIN_ENDPOINTS.SUPPORT_TICKETS,
         sortOptions: [
-            { value: "-createdAt", label: "Newest" },
-            { value: "createdAt", label: "Oldest" },
-            { value: "-updatedAt", label: "Recently updated" },
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
+            { value: sortBy("createdAt", "ASC"), label: "Oldest" },
+            { value: sortBy("updatedAt", "DESC"), label: "Recently updated" },
         ],
         columns: TICKET_COLUMNS,
         mapRows: (response) => toRecordArray(response.tickets).map((item, index) => ({
@@ -90,9 +92,9 @@ export function AdminSupportTicketsView({ children, ...props }) {
         buildFilters: (f) => {
             const parts = [];
             if (f.status && f.status !== "All")
-                parts.push(`status==${f.status}`);
+                parts.push(sieveFilter("status", SIEVE_OP.EQ, f.status));
             if (f.priority && f.priority !== "All")
-                parts.push(`priority==${f.priority}`);
+                parts.push(sieveFilter("priority", SIEVE_OP.EQ, f.priority));
             return parts.join(",") || undefined;
         },
         renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [

package/dist/features/admin/components/AdminTeamView.js

@@ -1,5 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { sortBy } from "@mohasinac/appkit";
 import React, { useState, useCallback } from "react";
 import { UserPlus } from "lucide-react";
 import { Button, FilterChipGroup, ListingLayout, RowActionMenu } from "../../../ui";
@@ -58,12 +60,12 @@ export function AdminTeamView({ children, onBulkRemove, ...props }) {
         searchPlaceholder: "Search by name or email",
         emptyLabel: "No employees found",
         filterKeys: ["group"],
-        defaultSort: "-createdAt",
+        defaultSort: sortBy("createdAt", "DESC"),
         queryKey: ["admin", "team", "listing"],
         endpoint: ADMIN_ENDPOINTS.TEAM,
         sortOptions: [
-            { value: "-createdAt", label: "Newest" },
-            { value: "createdAt", label: "Oldest" },
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
+            { value: sortBy("createdAt", "ASC"), label: "Oldest" },
             { value: "displayName", label: "Name A–Z" },
         ],
         mapRows: (response) => toRecordArray(response.users).map((item, index) => ({
@@ -90,7 +92,7 @@ export function AdminTeamView({ children, onBulkRemove, ...props }) {
                 return response.total;
             return mappedRows.length;
         },
-        buildFilters: (state) => state.group && state.group !== "All" ? `permissionGroup==${state.group}` : undefined,
+        buildFilters: (state) => state.group && state.group !== "All" ? sieveFilter("permissionGroup", SIEVE_OP.EQ, state.group) : undefined,
         toolbarExtra: (_jsxs(Button, { type: "button", variant: "primary", onClick: openInvite, className: "flex items-center gap-1.5 whitespace-nowrap", children: [_jsx(UserPlus, { className: "h-4 w-4" }), "Invite Employee"] })),
         buildBulkActions: onBulkRemove
             ? (selection) => [

package/dist/features/admin/components/AdminUsersView.js

@@ -1,5 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { sortBy } from "@mohasinac/appkit";
 import React, { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Button, FilterChipGroup, Form, FormActions, Input, ListingLayout, Modal, RowActionMenu, Text as AppText, useToast, } from "../../../ui";
@@ -54,12 +56,12 @@ export function AdminUsersView({ children, ...props }) {
         searchPlaceholder: "Search users, email, or seller handles",
         emptyLabel: "No users found",
         filterKeys: ["status", "role"],
-        defaultSort: "-createdAt",
+        defaultSort: sortBy("createdAt", "DESC"),
         queryKey: ["admin", "users", "listing"],
         endpoint: ADMIN_ENDPOINTS.USERS,
         sortOptions: [
-            { value: "-createdAt", label: "Newest" },
-            { value: "createdAt", label: "Oldest" },
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
+            { value: sortBy("createdAt", "ASC"), label: "Oldest" },
             { value: "displayName", label: "Name A–Z" },
         ],
         mapRows: (response) => toRecordArray(response.users).map((item, index) => {
@@ -98,7 +100,7 @@ export function AdminUsersView({ children, ...props }) {
                 parts.push(f.status === "Active" ? "disabled==false" : "disabled==true");
             }
             if (f.role && f.role !== "All")
-                parts.push(`role==${f.role}`);
+                parts.push(sieveFilter("role", SIEVE_OP.EQ, f.role));
             return parts.join(",") || undefined;
         },
         onRowClick: (row) => {

package/dist/features/admin/components/AdminWishlistsView.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { sortBy } from "@mohasinac/appkit";
 import React from "react";
 import { ListingLayout } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
@@ -11,12 +12,12 @@ const ADMIN_WISHLISTS_CONFIG = {
     searchPlaceholder: "Search by user ID",
     emptyLabel: "No user wishlists found",
     filterKeys: [],
-    defaultSort: "-updatedAt",
+    defaultSort: sortBy("updatedAt", "DESC"),
     queryKey: ["admin", "wishlists", "listing"],
     endpoint: ADMIN_ENDPOINTS.ADMIN_WISHLISTS,
     sortOptions: [
-        { value: "-updatedAt", label: "Recently updated" },
-        { value: "-itemCount", label: "Largest first" },
+        { value: sortBy("updatedAt", "DESC"), label: "Recently updated" },
+        { value: sortBy("itemCount", "DESC"), label: "Largest first" },
     ],
     mapRows: (response) => toRecordArray(response.items).map((item, index) => {
         const itemCount = typeof item.itemCount === "number" ? item.itemCount : 0;

package/dist/features/admin/components/DashboardStats.js

@@ -15,7 +15,11 @@ const BRAND_FROM = "var(--appkit-color-primary-700, #1343de)";
 const BRAND_MID = "var(--appkit-color-cobalt, #3570fc)";
 const BRAND_TO = "var(--appkit-color-secondary-400, #84e122)";
 function StatCard({ label, value, sub, icon: Icon, gradient, iconColor }) {
-    return (_jsxs(Div, { className: `relative rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${__O.hidden} shadow-sm hover:shadow-md transition-shadow`, children: [_jsx(Div, { className: "absolute top-0 left-0 right-0 h-[3px]", style: { background: gradient }, "aria-hidden": "true" }), _jsxs(Div, { className: "px-5 pb-5 pt-6 flex items-start justify-between gap-3", children: [_jsxs(Div, { className: `min-w-0 flex-1 ${__O.hidden}`, children: [_jsx(Text, { className: "text-[11px] font-semibold uppercase tracking-widest text-[var(--appkit-color-text-muted)] truncate", children: label }), _jsx(Text, { className: "mt-2 text-xl font-bold text-[var(--appkit-color-text)] tabular-nums leading-tight break-words", children: value }), sub && (_jsx(Text, { className: "mt-1.5 text-xs text-[var(--appkit-color-text-muted)]", children: sub }))] }), _jsx(Div, { className: "flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center", style: { background: gradient, opacity: 0.92 }, children: _jsx(Icon, { className: "w-5 h-5 text-white drop-shadow-sm" }) })] })] }));
+    return (_jsxs(Div, { className: `relative rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${__O.hidden} shadow-sm hover:shadow-md transition-shadow`, children: [_jsx(Div, { className: "absolute top-0 left-0 right-0 h-[3px]", 
+                // audit-inline-style-ok: runtime theme gradient
+                style: { background: gradient }, "aria-hidden": "true" }), _jsxs(Div, { className: "px-5 pb-5 pt-6 flex items-start justify-between gap-3", children: [_jsxs(Div, { className: `min-w-0 flex-1 ${__O.hidden}`, children: [_jsx(Text, { className: "text-[11px] font-semibold uppercase tracking-widest text-[var(--appkit-color-text-muted)] truncate", children: label }), _jsx(Text, { className: "mt-2 text-xl font-bold text-[var(--appkit-color-text)] tabular-nums leading-tight break-words", children: value }), sub && (_jsx(Text, { className: "mt-1.5 text-xs text-[var(--appkit-color-text-muted)]", children: sub }))] }), _jsx(Div, { className: "flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center", 
+                        // audit-inline-style-ok: runtime theme gradient
+                        style: { background: gradient, opacity: 0.92 }, children: _jsx(Icon, { className: "w-5 h-5 text-white drop-shadow-sm" }) })] })] }));
 }
 function SkeletonCard() {
     return (_jsxs(Div, { className: `relative rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${__O.hidden} ${__P.p5} animate-pulse`, children: [_jsx(Div, { className: "absolute top-0 left-0 right-0 h-[3px] bg-[var(--appkit-color-border)]" }), _jsxs(Div, { className: "flex items-start justify-between gap-3 pt-1", children: [_jsxs(Div, { className: "flex-1 space-y-2", children: [_jsx(Div, { className: "h-2.5 w-20 rounded bg-[var(--appkit-color-border)]" }), _jsx(Div, { className: "h-7 w-24 rounded bg-[var(--appkit-color-border)]" })] }), _jsx(Div, { className: "w-10 h-10 rounded-lg bg-[var(--appkit-color-border)]" })] })] }));

package/dist/features/admin/components/analytics/AdminAnalyticsCharts.js

@@ -19,7 +19,9 @@ const CartesianGrid = dynamic(() => import("recharts").then((m) => m.CartesianGr
 const Tooltip = dynamic(() => import("recharts").then((m) => m.Tooltip), { ssr: false });
 // Shared chart card wrapper
 function ChartCard({ title, children, className = "", }) {
-    return (_jsxs(Div, { className: `relative rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden shadow-sm ${className}`, children: [_jsx("div", { className: "absolute top-0 left-0 right-0 h-[3px]", style: {
+    return (_jsxs(Div, { className: `relative rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden shadow-sm ${className}`, children: [_jsx("div", { className: "absolute top-0 left-0 right-0 h-[3px]", 
+                // audit-inline-style-ok: dynamic CSS
+                style: {
                     background: "linear-gradient(to right, var(--appkit-color-primary-700,#1343de) 0%, var(--appkit-color-cobalt,#3570fc) 55%, var(--appkit-color-secondary-400,#84e122) 100%)",
                 }, "aria-hidden": "true" }), _jsxs(Div, { className: `${__P.p4} sm:${__P.p6} pt-5 sm:pt-7`, children: [title && (_jsx(Heading, { level: 3, className: "text-sm font-semibold text-[var(--appkit-color-text)] mb-4", children: title })), children] })] }));
 }

package/dist/features/admin/components/analytics/AdminStatCard.js

@@ -12,5 +12,9 @@ const GRADIENTS = {
 };
 export function AdminStatCard({ label, value, sub, icon, gradient = "brand", className = "", }) {
     const resolvedGradient = GRADIENTS[gradient] ?? gradient;
-    return (_jsxs(Div, { className: `relative rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden shadow-sm hover:shadow-md transition-shadow ${className}`, children: [_jsx("div", { className: "absolute top-0 left-0 right-0 h-[3px]", style: { background: resolvedGradient }, "aria-hidden": "true" }), _jsxs(Div, { className: "px-5 pb-5 pt-6 flex items-start justify-between gap-3", children: [_jsxs(Div, { className: "min-w-0 flex-1", children: [_jsx(Text, { className: "text-[11px] font-semibold uppercase tracking-widest text-[var(--appkit-color-text-muted)]", children: label }), _jsx(Heading, { level: 3, className: "mt-2 text-2xl font-bold tabular-nums leading-none text-[var(--appkit-color-text)]", children: value }), sub && (_jsx(Text, { className: "mt-1.5 text-xs text-[var(--appkit-color-text-muted)]", children: sub }))] }), icon && (_jsx(Div, { className: "flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center text-xl", style: { background: resolvedGradient }, children: icon }))] })] }));
+    return (_jsxs(Div, { className: `relative rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden shadow-sm hover:shadow-md transition-shadow ${className}`, children: [_jsx("div", { className: "absolute top-0 left-0 right-0 h-[3px]", 
+                // audit-inline-style-ok: dynamic CSS
+                style: { background: resolvedGradient }, "aria-hidden": "true" }), _jsxs(Div, { className: "px-5 pb-5 pt-6 flex items-start justify-between gap-3", children: [_jsxs(Div, { className: "min-w-0 flex-1", children: [_jsx(Text, { className: "text-[11px] font-semibold uppercase tracking-widest text-[var(--appkit-color-text-muted)]", children: label }), _jsx(Heading, { level: 3, className: "mt-2 text-2xl font-bold tabular-nums leading-none text-[var(--appkit-color-text)]", children: value }), sub && (_jsx(Text, { className: "mt-1.5 text-xs text-[var(--appkit-color-text-muted)]", children: sub }))] }), icon && (_jsx(Div, { className: "flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center text-xl", 
+                        // audit-inline-style-ok: dynamic CSS
+                        style: { background: resolvedGradient }, children: icon }))] })] }));
 }

package/dist/features/admin/constants/filter-tabs.d.ts

@@ -10,7 +10,7 @@
  * primitive and stay in sync when statuses are added.
  */
 export interface AdminFilterTab {
-    /** Filter value — empty when `id === "All"`. */
+    /** Filter value — empty when sieveFilter("id", SIEVE_OP.EQ, "= "All""). */
     id: string;
     /** Display text. */
     label: string;

package/dist/features/admin/constants/filter-tabs.js

@@ -1,14 +1,3 @@
-/**
- * Admin filter-chip tab sets (SB10-C completion, S8 2026-05-13).
- *
- * Match current view-filter values exactly so migrating an inline
- * `STATUS_OPTIONS` array to one of these constants is a behaviour-preserving
- * rename. The `ALL_TAB` sentinel collapses to an empty filter string when
- * clicked.
- *
- * Each entry is a typed `{ id, label }` row so views render with one
- * primitive and stay in sync when statuses are added.
- */
 export const ALL_TAB = { id: "All", label: "All" };
 /** Admin > Products — listing status filter chip set. */
 export const ADMIN_PRODUCT_STATUS_TABS = [

package/dist/features/admin/hooks/useAdmin.d.ts

@@ -3,7 +3,7 @@ export declare function useDashboardStats(opts?: {
     initialData?: DashboardStats;
     enabled?: boolean;
 }): {
-    stats: NoInfer<DashboardStats> | undefined;
+    stats: DashboardStats | undefined;
     isLoading: boolean;
     error: Error | null;
 };

package/dist/features/admin/hooks/useAdminSectionsListing.d.ts

@@ -23,6 +23,6 @@ export declare function useAdminSectionsListing({ page, pageSize, sorts, filters
     hasMore: boolean;
     isLoading: boolean;
     errorMessage: string | undefined;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<AdminSectionsListingResponse>, ApiClientError>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<AdminSectionsListingResponse, ApiClientError>>;
 };
 export {};

package/dist/features/admin/hooks/useChat.d.ts

@@ -16,7 +16,7 @@ export interface UseChatReturn {
 export declare function useChat(chatId: string | null, options?: {
     realtimeProvider?: IClientRealtimeProvider;
 }): UseChatReturn;
-export declare function useChatRooms(): import("@tanstack/react-query").UseQueryResult<NoInfer<unknown[]>, Error>;
+export declare function useChatRooms(): import("@tanstack/react-query").UseQueryResult<unknown[], Error>;
 export declare function useCreateChatRoom(): import("@tanstack/react-query").UseMutationResult<unknown, Error, {
     orderId: string;
     ownerId: string;

package/dist/features/admin/hooks/useChat.js

@@ -14,6 +14,7 @@ export function useChat(chatId, options) {
     const tokenExpiresAtRef = useRef(0);
     const unsubscribeRef = useRef(null);
     const connectAndSubscribe = useCallback(async () => {
+        // toast-intentionally-silent — error stored in setError() for UI inline render
         if (!chatId)
             return;
         setIsLoading(true);

package/dist/features/admin/types/index.d.ts

@@ -4,7 +4,7 @@ export type { AdminProduct, AdminProductStatus, AdminProductDrawerMode, } from "
 export { ADMIN_PRODUCT_STATUS_OPTIONS } from "./product.types";
 /**
  * Admin-specific column definition that narrows `render` to `React.ReactNode`.
- * Extends `TableColumn<T>` from `@mohasinac/contracts` so it is compatible
+ * Extends sieveFilter("TableColumn", SIEVE_OP.LT, "T>") from `@mohasinac/contracts` so it is compatible
  * with column arrays built from the base type.
  */
 export interface AdminTableColumn<T = Record<string, unknown>> extends Omit<TableColumn<T>, "render"> {

package/dist/features/auctions/actions/bid-actions.js

@@ -4,6 +4,8 @@
  * Business logic for auction bidding. Auth, rate-limiting, and
  * input validation are handled by the calling server action.
  */
+import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { sortBy } from "@mohasinac/appkit";
 import { serverLogger } from "../../../monitoring";
 import { bidRepository } from "../repository/bid.repository";
 import { productRepository } from "../../products/repository/products.repository";
@@ -215,8 +217,8 @@ export async function buyNowAuction(userId, userName, userEmail, input) {
 }
 export async function listBidsByProduct(productId, params) {
     const result = await bidRepository.list({
-        filters: `productId==${productId}`,
-        sorts: "-bidDate",
+        filters: sieveFilter("productId", SIEVE_OP.EQ, productId),
+        sorts: sortBy("bidDate", "DESC"),
         page: params?.page ?? 1,
         pageSize: params?.pageSize ?? 20,
     });

package/dist/features/auctions/components/AuctionBidsTable.js

@@ -54,7 +54,11 @@ function AuctionRow({ auction, portal, }) {
     const sorted = useMemo(() => [...auction.bids].sort((a, b) => b.bidAmount - a.bidAmount), [auction.bids]);
     const highest = sorted[0]?.bidAmount ?? 0;
     const isWinning = auction.bids.some((b) => b.isWinning);
-    return (_jsxs(Div, { className: `border border-[var(--appkit-color-border)] rounded-xl ${__O.hidden} bg-[var(--appkit-color-surface)] shadow-sm`, children: [_jsxs("button", { type: "button", onClick: () => setExpanded((v) => !v), className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-[var(--appkit-color-border-subtle)] transition-colors text-left", "aria-expanded": expanded, children: [_jsx(ChevronRight, { className: `shrink-0 text-[var(--appkit-color-text-muted)] transition-transform ${expanded ? "rotate-90" : ""}`, size: 16 }), _jsx(Div, { className: "flex-1 min-w-0", children: _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text)] line-clamp-1", children: auction.productTitle }) }), _jsxs(Row, { gap: "sm", className: "shrink-0", children: [isWinning && (_jsx(Badge, { variant: "active", children: "Winning" })), _jsxs(Text, { variant: "secondary", className: "text-xs", children: [auction.bids.length, " bid", auction.bids.length !== 1 ? "s" : ""] }), _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text)]", children: paise(highest) })] })] }), expanded && (_jsxs(Div, { className: "border-t border-[var(--appkit-color-border)]", children: [_jsxs("div", { className: "grid text-xs font-medium text-[var(--appkit-color-text-muted)] uppercase tracking-wide px-4 py-2 border-b border-[var(--appkit-color-border-subtle)]", style: { gridTemplateColumns: portal === "buyer" ? "1fr auto auto" : "1fr 1fr auto auto" }, children: [_jsx("span", { children: portal === "buyer" ? "Amount" : "Bidder" }), portal !== "buyer" && _jsx("span", { children: "Amount" }), _jsx("span", { children: "Status" }), _jsx("span", { className: "text-right", children: "Time" })] }), sorted.map((bid) => (_jsxs("div", { className: "grid items-center px-4 py-2.5 border-b border-[var(--appkit-color-border-subtle)] last:border-0 hover:bg-[var(--appkit-color-border-subtle)] transition-colors", style: { gridTemplateColumns: portal === "buyer" ? "1fr auto auto" : "1fr 1fr auto auto" }, children: [portal !== "buyer" && (_jsx(Text, { className: "text-sm text-[var(--appkit-color-text)] truncate pr-3", children: bid.userName || bid.userId })), _jsx(Text, { className: "text-sm font-medium text-[var(--appkit-color-text)]", children: paise(bid.bidAmount) }), _jsx(Badge, { variant: STATUS_VARIANT[bid.status] ?? "pending", className: "capitalize", children: bid.status }), _jsx(Text, { variant: "secondary", className: "text-xs text-right", children: relDate(bid.bidDate) })] }, bid.id)))] }))] }));
+    return (_jsxs(Div, { className: `border border-[var(--appkit-color-border)] rounded-xl ${__O.hidden} bg-[var(--appkit-color-surface)] shadow-sm`, children: [_jsxs("button", { type: "button", onClick: () => setExpanded((v) => !v), className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-[var(--appkit-color-border-subtle)] transition-colors text-left", "aria-expanded": expanded, children: [_jsx(ChevronRight, { className: `shrink-0 text-[var(--appkit-color-text-muted)] transition-transform ${expanded ? "rotate-90" : ""}`, size: 16 }), _jsx(Div, { className: "flex-1 min-w-0", children: _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text)] line-clamp-1", children: auction.productTitle }) }), _jsxs(Row, { gap: "sm", className: "shrink-0", children: [isWinning && (_jsx(Badge, { variant: "active", children: "Winning" })), _jsxs(Text, { variant: "secondary", className: "text-xs", children: [auction.bids.length, " bid", auction.bids.length !== 1 ? "s" : ""] }), _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text)]", children: paise(highest) })] })] }), expanded && (_jsxs(Div, { className: "border-t border-[var(--appkit-color-border)]", children: [_jsxs("div", { className: "grid text-xs font-medium text-[var(--appkit-color-text-muted)] uppercase tracking-wide px-4 py-2 border-b border-[var(--appkit-color-border-subtle)]", 
+                        // audit-inline-style-ok: runtime grid template
+                        style: { gridTemplateColumns: portal === "buyer" ? "1fr auto auto" : "1fr 1fr auto auto" }, children: [_jsx("span", { children: portal === "buyer" ? "Amount" : "Bidder" }), portal !== "buyer" && _jsx("span", { children: "Amount" }), _jsx("span", { children: "Status" }), _jsx("span", { className: "text-right", children: "Time" })] }), sorted.map((bid) => (_jsxs("div", { className: "grid items-center px-4 py-2.5 border-b border-[var(--appkit-color-border-subtle)] last:border-0 hover:bg-[var(--appkit-color-border-subtle)] transition-colors", 
+                        // audit-inline-style-ok: runtime grid template
+                        style: { gridTemplateColumns: portal === "buyer" ? "1fr auto auto" : "1fr 1fr auto auto" }, children: [portal !== "buyer" && (_jsx(Text, { className: "text-sm text-[var(--appkit-color-text)] truncate pr-3", children: bid.userName || bid.userId })), _jsx(Text, { className: "text-sm font-medium text-[var(--appkit-color-text)]", children: paise(bid.bidAmount) }), _jsx(Badge, { variant: STATUS_VARIANT[bid.status] ?? "pending", className: "capitalize", children: bid.status }), _jsx(Text, { variant: "secondary", className: "text-xs text-right", children: relDate(bid.bidDate) })] }, bid.id)))] }))] }));
 }
 export function AuctionBidsTable({ bids, portal = "buyer", emptyLabel = "No bids found.", }) {
     const auctions = useMemo(() => groupByAuction(bids), [bids]);

package/dist/features/auctions/components/AuctionsListView.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
 import { productRepository } from "../../../repositories";
 import { Container, Heading, Main, Section } from "../../../ui";
 import { AdSlot } from "../../homepage/components/AdSlot";
@@ -16,23 +17,23 @@ function buildAuctionFilters(params) {
     const minBid = sp(params, "minBid");
     const maxBid = sp(params, "maxBid");
     if (minBid)
-        parts.push(`currentBid>=${minBid}`);
+        parts.push(sieveFilter("currentBid", SIEVE_OP.GTE, minBid));
     if (maxBid)
-        parts.push(`currentBid<=${maxBid}`);
+        parts.push(sieveFilter("currentBid", SIEVE_OP.LTE, maxBid));
     const store = sp(params, "store");
     if (store) {
         const values = store.split("|").filter(Boolean);
         if (values.length === 1)
-            parts.push(`storeId==${values[0]}`);
+            parts.push(sieveFilter("storeId", SIEVE_OP.EQ, values[0]));
         else if (values.length > 1)
-            parts.push(`storeId==${values.join("|")}`);
+            parts.push(sieveFilter("storeId", SIEVE_OP.EQ, values.join("|")));
     }
     const dateFrom = sp(params, "dateFrom");
     const dateTo = sp(params, "dateTo");
     if (dateFrom)
-        parts.push(`auctionEndDate>=${dateFrom}`);
+        parts.push(sieveFilter("auctionEndDate", SIEVE_OP.GTE, dateFrom));
     if (dateTo)
-        parts.push(`auctionEndDate<=${dateTo}`);
+        parts.push(sieveFilter("auctionEndDate", SIEVE_OP.LTE, dateTo));
     return parts.join(",");
 }
 export async function AuctionsListView({ searchParams = {} }) {

package/dist/features/auctions/hooks/useAuctions.d.ts

@@ -17,22 +17,22 @@ interface UseAuctionDetailOptions {
     bidsQueryKeyPrefix?: string;
 }
 export declare function useAuctions(params?: AuctionListQuery, opts?: UseAuctionsOptions): {
-    data: NoInfer<AuctionListResponse> | undefined;
+    data: AuctionListResponse | undefined;
     auctions: AuctionItem[];
     total: number;
     totalPages: number;
     hasMore: boolean;
     isLoading: boolean;
     error: string | null;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<AuctionListResponse>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<AuctionListResponse, Error>>;
 };
 export declare function useAuction(slug: string, opts?: {
     enabled?: boolean;
 }): {
-    auction: NonNullable<NoInfer<AuctionItem | null>> | null;
+    auction: AuctionItem | null;
     isLoading: boolean;
     error: string | null;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<AuctionItem | null>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<AuctionItem | null, Error>>;
 };
 export declare function useAuctionBids(auctionSlug: string, limit?: number, opts?: {
     enabled?: boolean;
@@ -43,9 +43,9 @@ export declare function useAuctionBids(auctionSlug: string, limit?: number, opts
     error: string | null;
 };
 export declare function useAuctionDetail(id: string, opts?: UseAuctionDetailOptions): {
-    productQuery: import("@tanstack/react-query").UseQueryResult<NoInfer<ProductItem | null>, Error>;
-    product: NonNullable<NoInfer<ProductItem | null>> | null;
-    bidsQuery: import("@tanstack/react-query").UseQueryResult<NoInfer<PublicBid[]>, Error>;
-    bids: NoInfer<PublicBid[]>;
+    productQuery: import("@tanstack/react-query").UseQueryResult<ProductItem | null, Error>;
+    product: ProductItem | null;
+    bidsQuery: import("@tanstack/react-query").UseQueryResult<PublicBid[], Error>;
+    bids: PublicBid[];
 };
 export {};

package/dist/features/auth/hooks/useAuth.d.ts

@@ -4,11 +4,11 @@ interface UseCurrentUserOptions {
     enabled?: boolean;
 }
 export declare function useCurrentUser(opts?: UseCurrentUserOptions): {
-    user: NonNullable<NoInfer<AuthUser | null>> | null;
+    user: AuthUser | null;
     isLoading: boolean;
     isAuthenticated: boolean;
     error: Error | null;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<AuthUser | null>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<AuthUser | null, Error>>;
 };
 export interface LoginCredentials {
     email: string;

package/dist/features/auth/hooks/useAuth.js

@@ -119,6 +119,7 @@ export function useGoogleLogin(options) {
         return () => window.removeEventListener("message", handleMessage);
     }, []); // mount once — uses refs, no stale closure risk
     const mutate = useCallback(async () => {
+        // toast-intentionally-silent — errors surfaced via onErrorRef.current() callback
         calledRef.current = false; // reset for each new auth flow
         const popup = window.open(`${window.location.origin}/auth.html`, "oauth_google", "width=500,height=660,left=400,top=100");
         if (!popup) {

package/dist/features/blog/actions/blog-actions.js

@@ -1,3 +1,4 @@
+import { sortBy } from "@mohasinac/appkit";
 import { z } from "zod";
 import { serverLogger } from "../../../monitoring";
 import { blogRepository } from "../repository/blog.repository";
@@ -104,11 +105,11 @@ export async function listBlogPosts(params) {
     return blogRepository.listPublished({ category: params?.category }, sieve);
 }
 export async function getFeaturedBlogPosts(count = 3) {
-    const result = await blogRepository.listPublished({ featuredOnly: true }, { sorts: "-publishedAt", page: 1, pageSize: count });
+    const result = await blogRepository.listPublished({ featuredOnly: true }, { sorts: sortBy("publishedAt", "DESC"), page: 1, pageSize: count });
     return result.items;
 }
 export async function getLatestBlogPosts(count = 5) {
-    const result = await blogRepository.listPublished({}, { sorts: "-publishedAt", page: 1, pageSize: count });
+    const result = await blogRepository.listPublished({}, { sorts: sortBy("publishedAt", "DESC"), page: 1, pageSize: count });
     return result.items;
 }
 export async function getBlogPostById(id) {

package/dist/features/blog/components/BlogFeaturedCard.js

@@ -31,5 +31,7 @@ export function BlogFeaturedCard({ post, href, labels = {}, className = "", sele
             day: "numeric",
         })
         : "";
-    return (_jsxs(Article, { className: `group relative flex h-full flex-col overflow-hidden rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm hover:shadow-md transition-shadow duration-200 ${isSelected ? "ring-2 ring-primary outline outline-2 outline-primary" : ""} ${className}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(post.id, !isSelected); }, label: isSelected ? "Deselect post" : "Select post", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsxs(TextLink, { href: href, className: "flex h-full flex-col", children: [_jsx(Div, { className: `aspect-video ${__O.hidden} flex-shrink-0`, children: coverImageUrl ? (_jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${coverImageUrl})` } })) : (_jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-gradient-to-br from-zinc-200 via-zinc-100 to-zinc-300 dark:from-slate-800 dark:via-slate-700 dark:to-slate-900" })) }), _jsxs(Div, { className: `flex flex-1 flex-col ${__P.p4}`, children: [_jsxs(Row, { className: "gap-1.5 mb-2 flex-wrap", children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-block px-2 py-0.5 rounded-full capitalize ${CATEGORY_BADGE[post.category] ?? "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"}`, children: post.category }), post.isFeatured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, children: labels.featuredBadge ?? "Featured" }))] }), _jsx(Heading, { level: 3, className: `font-semibold text-neutral-900 dark:text-zinc-100 text-base leading-snug mb-1 ${THEME_CONSTANTS.utilities.textClamp2}`, children: safeTitle }), post.excerpt && (_jsx(Text, { className: `text-neutral-500 dark:text-zinc-400 text-sm ${THEME_CONSTANTS.utilities.textClamp2} mb-3`, children: post.excerpt })), _jsxs(Row, { className: "mt-auto gap-3 text-xs text-zinc-400 dark:text-zinc-400 flex-wrap", children: [post.authorName && (_jsx(Span, { children: safeDisplayName(post.authorName, "Author") })), post.readTimeMinutes != null && (_jsxs(Span, { children: [post.readTimeMinutes, " ", labels.readTime ?? "min read"] })), date && _jsx(Span, { children: date })] })] })] })] }));
+    return (_jsxs(Article, { className: `group relative flex h-full flex-col overflow-hidden rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm hover:shadow-md transition-shadow duration-200 ${isSelected ? "ring-2 ring-primary outline outline-2 outline-primary" : ""} ${className}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(post.id, !isSelected); }, label: isSelected ? "Deselect post" : "Select post", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsxs(TextLink, { href: href, className: "flex h-full flex-col", children: [_jsx(Div, { className: `aspect-video ${__O.hidden} flex-shrink-0`, children: coverImageUrl ? (_jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105", 
+                            // audit-inline-style-ok: dynamic image URL
+                            style: { backgroundImage: `url(${coverImageUrl})` } })) : (_jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-gradient-to-br from-zinc-200 via-zinc-100 to-zinc-300 dark:from-slate-800 dark:via-slate-700 dark:to-slate-900" })) }), _jsxs(Div, { className: `flex flex-1 flex-col ${__P.p4}`, children: [_jsxs(Row, { className: "gap-1.5 mb-2 flex-wrap", children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-block px-2 py-0.5 rounded-full capitalize ${CATEGORY_BADGE[post.category] ?? "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"}`, children: post.category }), post.isFeatured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, children: labels.featuredBadge ?? "Featured" }))] }), _jsx(Heading, { level: 3, className: `font-semibold text-neutral-900 dark:text-zinc-100 text-base leading-snug mb-1 ${THEME_CONSTANTS.utilities.textClamp2}`, children: safeTitle }), post.excerpt && (_jsx(Text, { className: `text-neutral-500 dark:text-zinc-400 text-sm ${THEME_CONSTANTS.utilities.textClamp2} mb-3`, children: post.excerpt })), _jsxs(Row, { className: "mt-auto gap-3 text-xs text-zinc-400 dark:text-zinc-400 flex-wrap", children: [post.authorName && (_jsx(Span, { children: safeDisplayName(post.authorName, "Author") })), post.readTimeMinutes != null && (_jsxs(Span, { children: [post.readTimeMinutes, " ", labels.readTime ?? "min read"] })), date && _jsx(Span, { children: date })] })] })] })] }));
 }

package/dist/features/blog/components/BlogListView.js

@@ -26,7 +26,11 @@ export function BlogCard({ post, href, onClick, className = "" }) {
     const isInteractive = !!(href || onClick);
     const card = (_jsxs(Article, { role: onClick && !href ? "button" : undefined, tabIndex: onClick && !href ? 0 : undefined, onKeyDown: onClick && !href
             ? (e) => (e.key === "Enter" || e.key === " ") && onClick(post)
-            : undefined, onClick: onClick && !href ? () => onClick(post) : undefined, className: `group flex flex-col h-full overflow-hidden rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm transition hover:shadow-md ${isInteractive ? "cursor-pointer" : ""} ${className}`, children: [_jsx(Div, { className: `aspect-video w-full ${__O.hidden} bg-neutral-100 dark:bg-slate-800 flex-shrink-0`, children: coverImageUrl ? (_jsx(Div, { role: "img", "aria-label": post.title, className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${coverImageUrl})` } })) : (_jsx(Div, { className: "h-full w-full bg-gradient-to-br from-zinc-200 via-zinc-100 to-zinc-300 dark:from-slate-800 dark:via-slate-700 dark:to-slate-900 flex items-center justify-center", children: _jsx(Span, { className: "text-4xl opacity-30", "aria-hidden": "true", children: "\u270D\uFE0F" }) })) }), _jsxs(Div, { className: `flex flex-1 flex-col ${__P.p5}`, children: [_jsxs(Row, { className: "mb-2 gap-2 flex-wrap", children: [_jsx(Span, { size: "xs", weight: "medium", className: "rounded-full bg-primary/10 px-2 py-0.5 capitalize text-primary", children: post.category }), post.isFeatured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, children: "Featured" })), post.readTimeMinutes && (_jsxs(Span, { size: "xs", className: "text-zinc-400 dark:text-zinc-400", children: [post.readTimeMinutes, " min read"] }))] }), _jsx(Heading, { level: 3, className: `${THEME_CONSTANTS.utilities.textClamp2} text-base font-semibold text-neutral-900 dark:text-zinc-100 group-hover:text-primary`, children: post.title }), post.excerpt && (_jsx(Text, { className: `mt-2 ${THEME_CONSTANTS.utilities.textClamp3} flex-1 text-sm text-neutral-500 dark:text-zinc-400`, children: post.excerpt })), _jsxs(Row, { className: "mt-auto pt-3 gap-3", children: [post.authorAvatar ? (_jsx(Div, { role: "img", "aria-label": post.authorName ?? "author", className: "h-7 w-7 flex-shrink-0 rounded-full bg-center bg-cover", style: { backgroundImage: `url(${post.authorAvatar})` } })) : post.authorName ? (_jsx(Div, { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary", children: post.authorName.charAt(0).toUpperCase() })) : null, _jsxs(Text, { className: "text-xs text-neutral-500 dark:text-zinc-400 min-w-0", children: [post.authorName && (_jsx(Span, { weight: "medium", className: "text-neutral-700 dark:text-zinc-300", children: safeDisplayName(post.authorName, "Author") })), date && _jsxs(Span, { className: "ml-1 text-neutral-400", children: ["\u00B7 ", date] })] })] })] })] }));
+            : undefined, onClick: onClick && !href ? () => onClick(post) : undefined, className: `group flex flex-col h-full overflow-hidden rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm transition hover:shadow-md ${isInteractive ? "cursor-pointer" : ""} ${className}`, children: [_jsx(Div, { className: `aspect-video w-full ${__O.hidden} bg-neutral-100 dark:bg-slate-800 flex-shrink-0`, children: coverImageUrl ? (_jsx(Div, { role: "img", "aria-label": post.title, className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", 
+                    // audit-inline-style-ok: dynamic image URL
+                    style: { backgroundImage: `url(${coverImageUrl})` } })) : (_jsx(Div, { className: "h-full w-full bg-gradient-to-br from-zinc-200 via-zinc-100 to-zinc-300 dark:from-slate-800 dark:via-slate-700 dark:to-slate-900 flex items-center justify-center", children: _jsx(Span, { className: "text-4xl opacity-30", "aria-hidden": "true", children: "\u270D\uFE0F" }) })) }), _jsxs(Div, { className: `flex flex-1 flex-col ${__P.p5}`, children: [_jsxs(Row, { className: "mb-2 gap-2 flex-wrap", children: [_jsx(Span, { size: "xs", weight: "medium", className: "rounded-full bg-primary/10 px-2 py-0.5 capitalize text-primary", children: post.category }), post.isFeatured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, children: "Featured" })), post.readTimeMinutes && (_jsxs(Span, { size: "xs", className: "text-zinc-400 dark:text-zinc-400", children: [post.readTimeMinutes, " min read"] }))] }), _jsx(Heading, { level: 3, className: `${THEME_CONSTANTS.utilities.textClamp2} text-base font-semibold text-neutral-900 dark:text-zinc-100 group-hover:text-primary`, children: post.title }), post.excerpt && (_jsx(Text, { className: `mt-2 ${THEME_CONSTANTS.utilities.textClamp3} flex-1 text-sm text-neutral-500 dark:text-zinc-400`, children: post.excerpt })), _jsxs(Row, { className: "mt-auto pt-3 gap-3", children: [post.authorAvatar ? (_jsx(Div, { role: "img", "aria-label": post.authorName ?? "author", className: "h-7 w-7 flex-shrink-0 rounded-full bg-center bg-cover", 
+                                // audit-inline-style-ok: dynamic image URL
+                                style: { backgroundImage: `url(${post.authorAvatar})` } })) : post.authorName ? (_jsx(Div, { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary", children: post.authorName.charAt(0).toUpperCase() })) : null, _jsxs(Text, { className: "text-xs text-neutral-500 dark:text-zinc-400 min-w-0", children: [post.authorName && (_jsx(Span, { weight: "medium", className: "text-neutral-700 dark:text-zinc-300", children: safeDisplayName(post.authorName, "Author") })), date && _jsxs(Span, { className: "ml-1 text-neutral-400", children: ["\u00B7 ", date] })] })] })] })] }));
     if (href) {
         return (_jsx(Link, { href: href, className: "block h-full", children: card }));
     }

package/dist/features/blog/components/BlogPostView.js

@@ -53,5 +53,7 @@ export function BlogPostView({ slug, initialData, labels = {}, renderImage, rend
         })
         : "";
     const coverImageUrl = getMediaUrl(post.coverImage);
-    return (_jsxs(Div, { className: `min-h-screen ${className}`, children: [coverImageUrl && (_jsxs(Div, { className: `relative h-72 md:h-96 ${__O.hidden}`, children: [renderImage ? (renderImage(post)) : (_jsx(Div, { role: "img", "aria-label": post.title, className: "h-full w-full bg-cover bg-center", style: { backgroundImage: `url(${coverImageUrl})` } })), _jsx(Div, { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" })] })), _jsxs(Div, { className: "max-w-3xl mx-auto px-4 py-12", children: [renderBlogPostHeader(post, date, labels), post.tags && post.tags.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mb-8", children: post.tags.map((tag) => (_jsxs(Link, { href: `${String(ROUTES.PUBLIC.BLOG)}?tags=${encodeURIComponent(tag)}`, className: "inline-block px-3 py-1 rounded-full bg-neutral-100 dark:bg-zinc-800 hover:bg-primary/10 text-zinc-600 dark:text-zinc-400 hover:text-primary text-xs font-medium transition-colors", children: ["#", tag] }, tag))) })), renderAuthorBio && _jsx(Div, { className: "mb-6", children: renderAuthorBio(post) }), _jsx(Div, { surface: "card", padding: "xl", className: "mb-12", children: renderContent ? renderContent(post) : (_jsx(RichText, { html: normalizeRichTextHtml(post.content ?? ""), proseClass: "prose max-w-none dark:prose-invert" })) }), renderBlogPostRelated(related, labels, renderRelatedCard), renderBackButton && _jsx(Div, { className: "mt-10 pt-8 border-t border-zinc-200 dark:border-zinc-700", children: renderBackButton() })] })] }));
+    return (_jsxs(Div, { className: `min-h-screen ${className}`, children: [coverImageUrl && (_jsxs(Div, { className: `relative h-72 md:h-96 ${__O.hidden}`, children: [renderImage ? (renderImage(post)) : (_jsx(Div, { role: "img", "aria-label": post.title, className: "h-full w-full bg-cover bg-center", 
+                        // audit-inline-style-ok: dynamic image URL
+                        style: { backgroundImage: `url(${coverImageUrl})` } })), _jsx(Div, { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" })] })), _jsxs(Div, { className: "max-w-3xl mx-auto px-4 py-12", children: [renderBlogPostHeader(post, date, labels), post.tags && post.tags.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mb-8", children: post.tags.map((tag) => (_jsxs(Link, { href: `${String(ROUTES.PUBLIC.BLOG)}?tags=${encodeURIComponent(tag)}`, className: "inline-block px-3 py-1 rounded-full bg-neutral-100 dark:bg-zinc-800 hover:bg-primary/10 text-zinc-600 dark:text-zinc-400 hover:text-primary text-xs font-medium transition-colors", children: ["#", tag] }, tag))) })), renderAuthorBio && _jsx(Div, { className: "mb-6", children: renderAuthorBio(post) }), _jsx(Div, { surface: "card", padding: "xl", className: "mb-12", children: renderContent ? renderContent(post) : (_jsx(RichText, { html: normalizeRichTextHtml(post.content ?? ""), proseClass: "prose max-w-none dark:prose-invert" })) }), renderBlogPostRelated(related, labels, renderRelatedCard), renderBackButton && _jsx(Div, { className: "mt-10 pt-8 border-t border-zinc-200 dark:border-zinc-700", children: renderBackButton() })] })] }));
 }