@mohasinac/appkit 2.8.4 → 2.8.6

package/dist/features/shell/FormShell.js

@@ -113,8 +113,16 @@ export function FormShell({ isOpen, onClose, title, breadcrumb, isDirty = false,
     };
     if (!isOpen)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { className: "fixed inset-0 bg-black/50 backdrop-blur-[2px]", style: { zIndex: "calc(var(--appkit-z-modal) - 1)" }, "aria-hidden": "true", onClick: attemptClose }), _jsxs(Div, { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed top-0 bottom-0 left-0 right-0 lg:left-[10%] lg:right-[10%] flex flex-col bg-[var(--appkit-color-surface)] shadow-2xl", style: { zIndex: "var(--appkit-z-modal)" }, children: [_jsxs(Row, { gap: "sm", className: "flex-shrink-0 sticky top-0 z-10 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-5 py-3", children: [previewMode ? (_jsxs("button", { type: "button", onClick: () => setPreviewMode(false), "aria-label": "Back to edit", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors flex-shrink-0 flex items-center gap-1.5 text-sm", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), _jsx(Span, { className: "hidden sm:inline", children: "Back to Edit" })] })) : (_jsx("button", { type: "button", onClick: attemptClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors flex-shrink-0", children: _jsx(X, { className: "w-5 h-5" }) })), _jsxs(Div, { className: "flex-1 min-w-0", children: [breadcrumb && (_jsx(Text, { className: "text-xs text-[var(--appkit-color-text-muted)] truncate mb-0.5", children: breadcrumb })), _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text)] truncate", children: previewMode ? `Preview — ${title}` : title })] }), _jsx(Row, { gap: "xs", className: "flex-shrink-0", children: previewMode ? null : (_jsxs(_Fragment, { children: [previewSlot && (_jsxs("button", { type: "button", onClick: () => setPreviewMode(true), className: "flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors border border-[var(--appkit-color-border)]", children: [_jsx(Eye, { className: "w-4 h-4" }), _jsx(Span, { className: "hidden sm:inline", children: "Preview" })] })), onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsx(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: publishLabel }))] })) })] }), _jsxs(Div, { className: `flex flex-1 ${__O.hidden}`, children: [sections && sections.length > 0 && !previewMode && (_jsx("nav", { "aria-label": "Form sections", className: "hidden lg:flex flex-col flex-shrink-0 w-48 border-r border-[var(--appkit-color-border)] py-4 px-3 gap-1 overflow-y-auto", children: sections.map((sec) => (_jsx("button", { type: "button", onClick: () => scrollToSection(sec.id), className: "text-left text-sm px-3 py-2 rounded-lg text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors", children: sec.label }, sec.id))) })), sections && sections.length > 0 && !previewMode && (_jsx(Row, { gap: "px", className: `lg:hidden fixed top-[var(--form-shell-topbar-h,57px)] left-0 right-0 z-10 ${__O.xAuto} px-5 py-2 bg-[var(--appkit-color-surface)] border-b border-[var(--appkit-color-border)]`, children: sections.map((sec) => (_jsx("button", { type: "button", onClick: () => scrollToSection(sec.id), className: "flex-shrink-0 text-xs px-3 py-1.5 rounded-full border border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] transition-colors whitespace-nowrap", children: sec.label }, sec.id))) })), _jsx(Div, { ref: bodyRef, className: classNames("flex-1 overflow-y-auto", sections && sections.length > 0 && !previewMode ? "pt-0 lg:pt-0" : ""), children: previewMode && previewSlot ? (_jsxs(_Fragment, { children: [_jsxs(Row, { gap: "xs", className: "sticky top-0 z-10 bg-[var(--appkit-color-warning-surface)] border-b border-[var(--appkit-color-warning)] px-4 py-2 text-sm text-[var(--appkit-color-warning-text,var(--appkit-color-warning))]", children: [_jsx(Eye, { className: "w-4 h-4 flex-shrink-0" }), _jsx(Span, { children: "Preview \u2014 not visible to buyers until published" })] }), _jsx(Div, { className: "py-4", children: previewSlot() })] })) : splitPreview && previewSlot ? (
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { className: "fixed inset-0 bg-black/50 backdrop-blur-[2px]", 
+                // audit-inline-style-ok: z-index token
+                style: { zIndex: "calc(var(--appkit-z-modal) - 1)" }, "aria-hidden": "true", onClick: attemptClose }), _jsxs(Div, { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed top-0 bottom-0 left-0 right-0 lg:left-[10%] lg:right-[10%] flex flex-col bg-[var(--appkit-color-surface)] shadow-2xl", 
+                // audit-inline-style-ok: z-index token
+                style: { zIndex: "var(--appkit-z-modal)" }, children: [_jsxs(Row, { gap: "sm", className: "flex-shrink-0 sticky top-0 z-10 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-5 py-3", children: [previewMode ? (_jsxs("button", { type: "button", onClick: () => setPreviewMode(false), "aria-label": "Back to edit", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors flex-shrink-0 flex items-center gap-1.5 text-sm", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), _jsx(Span, { className: "hidden sm:inline", children: "Back to Edit" })] })) : (_jsx("button", { type: "button", onClick: attemptClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors flex-shrink-0", children: _jsx(X, { className: "w-5 h-5" }) })), _jsxs(Div, { className: "flex-1 min-w-0", children: [breadcrumb && (_jsx(Text, { className: "text-xs text-[var(--appkit-color-text-muted)] truncate mb-0.5", children: breadcrumb })), _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text)] truncate", children: previewMode ? `Preview — ${title}` : title })] }), _jsx(Row, { gap: "xs", className: "flex-shrink-0", children: previewMode ? null : (_jsxs(_Fragment, { children: [previewSlot && (_jsxs("button", { type: "button", onClick: () => setPreviewMode(true), className: "flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors border border-[var(--appkit-color-border)]", children: [_jsx(Eye, { className: "w-4 h-4" }), _jsx(Span, { className: "hidden sm:inline", children: "Preview" })] })), onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsx(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: publishLabel }))] })) })] }), _jsxs(Div, { className: `flex flex-1 ${__O.hidden}`, children: [sections && sections.length > 0 && !previewMode && (_jsx("nav", { "aria-label": "Form sections", className: "hidden lg:flex flex-col flex-shrink-0 w-48 border-r border-[var(--appkit-color-border)] py-4 px-3 gap-1 overflow-y-auto", children: sections.map((sec) => (_jsx("button", { type: "button", onClick: () => scrollToSection(sec.id), className: "text-left text-sm px-3 py-2 rounded-lg text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors", children: sec.label }, sec.id))) })), sections && sections.length > 0 && !previewMode && (_jsx(Row, { gap: "px", className: `lg:hidden fixed top-[var(--form-shell-topbar-h,57px)] left-0 right-0 z-10 ${__O.xAuto} px-5 py-2 bg-[var(--appkit-color-surface)] border-b border-[var(--appkit-color-border)]`, children: sections.map((sec) => (_jsx("button", { type: "button", onClick: () => scrollToSection(sec.id), className: "flex-shrink-0 text-xs px-3 py-1.5 rounded-full border border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] transition-colors whitespace-nowrap", children: sec.label }, sec.id))) })), _jsx(Div, { ref: bodyRef, className: classNames("flex-1 overflow-y-auto", sections && sections.length > 0 && !previewMode ? "pt-0 lg:pt-0" : ""), children: previewMode && previewSlot ? (_jsxs(_Fragment, { children: [_jsxs(Row, { gap: "xs", className: "sticky top-0 z-10 bg-[var(--appkit-color-warning-surface)] border-b border-[var(--appkit-color-warning)] px-4 py-2 text-sm text-[var(--appkit-color-warning-text,var(--appkit-color-warning))]", children: [_jsx(Eye, { className: "w-4 h-4 flex-shrink-0" }), _jsx(Span, { children: "Preview \u2014 not visible to buyers until published" })] }), _jsx(Div, { className: "py-4", children: previewSlot() })] })) : splitPreview && previewSlot ? (
                                 // S-STORE-3-D — desktop 60/40 split: form left, preview right.
                                 // Below `lg`, falls back to single-column form (preview-as-modal via existing toggle).
-                                _jsxs(Div, { className: "lg:grid lg:grid-cols-[3fr_2fr] lg:gap-6 lg:px-6 lg:py-6 lg:max-w-[1400px] lg:mx-auto", children: [_jsx(Div, { className: "max-w-3xl mx-auto px-5 py-6 sm:px-6 lg:max-w-none lg:px-0 lg:py-0", children: children }), _jsxs(Div, { className: `hidden lg:block sticky lg:top-4 lg:self-start lg:max-h-[calc(100vh-6rem)] ${__O.yAuto} border border-[var(--appkit-color-border)] rounded-lg bg-[var(--appkit-color-surface-raised)] ${__P.p4}`, children: [_jsxs(Row, { gap: "xs", className: "mb-3 text-xs font-semibold uppercase tracking-wide text-[var(--appkit-color-text-muted)]", children: [_jsx(Eye, { className: "w-3.5 h-3.5" }), _jsx(Span, { children: "Live preview" })] }), previewSlot()] })] })) : (_jsx(Div, { className: "max-w-3xl mx-auto px-5 py-6 sm:px-6", children: children })) })] }), !previewMode && renderBottomBar ? (renderBottomBar()) : !previewMode && (onSaveDraft || onPublish) ? (_jsxs(Row, { justify: "between", className: "flex-shrink-0 sticky bottom-0 z-10 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-5 py-3", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: attemptClose, disabled: isLoading, children: FORM_ACTION_META[FORM_ACTION_ID.DISCARD].label }), _jsxs(Row, { gap: "xs", children: [onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsxs(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: [publishLabel, " \u2192"] }))] })] })) : null] }), showUnsaved && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "fixed inset-0 bg-black/60", style: { zIndex: "calc(var(--appkit-z-modal) + 5)" }, onClick: () => setShowUnsaved(false) }), _jsxs(Div, { className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-sm bg-[var(--appkit-color-surface)] rounded-xl shadow-2xl p-6", style: { zIndex: "calc(var(--appkit-z-modal) + 5)" }, children: [_jsxs(Row, { gap: "sm", align: "start", className: "mb-4", children: [_jsx(Span, { className: "flex-shrink-0 w-10 h-10 rounded-full bg-[var(--appkit-color-warning-surface)] flex items-center justify-center", children: _jsx(AlertTriangle, { className: "w-5 h-5 text-[var(--appkit-color-warning)]" }) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)]", children: "Unsaved changes" }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: "You have unsaved changes. Leave without saving?" })] })] }), _jsxs(Row, { gap: "xs", justify: "end", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowUnsaved(false), children: "Stay" }), _jsx(Button, { variant: "danger", size: "sm", onClick: () => { setShowUnsaved(false); onClose(); }, children: "Leave" })] })] })] }))] }));
+                                _jsxs(Div, { className: "lg:grid lg:grid-cols-[3fr_2fr] lg:gap-6 lg:px-6 lg:py-6 lg:max-w-[1400px] lg:mx-auto", children: [_jsx(Div, { className: "max-w-3xl mx-auto px-5 py-6 sm:px-6 lg:max-w-none lg:px-0 lg:py-0", children: children }), _jsxs(Div, { className: `hidden lg:block sticky lg:top-4 lg:self-start lg:max-h-[calc(100vh-6rem)] ${__O.yAuto} border border-[var(--appkit-color-border)] rounded-lg bg-[var(--appkit-color-surface-raised)] ${__P.p4}`, children: [_jsxs(Row, { gap: "xs", className: "mb-3 text-xs font-semibold uppercase tracking-wide text-[var(--appkit-color-text-muted)]", children: [_jsx(Eye, { className: "w-3.5 h-3.5" }), _jsx(Span, { children: "Live preview" })] }), previewSlot()] })] })) : (_jsx(Div, { className: "max-w-3xl mx-auto px-5 py-6 sm:px-6", children: children })) })] }), !previewMode && renderBottomBar ? (renderBottomBar()) : !previewMode && (onSaveDraft || onPublish) ? (_jsxs(Row, { justify: "between", className: "flex-shrink-0 sticky bottom-0 z-10 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-5 py-3", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: attemptClose, disabled: isLoading, children: FORM_ACTION_META[FORM_ACTION_ID.DISCARD].label }), _jsxs(Row, { gap: "xs", children: [onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsxs(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: [publishLabel, " \u2192"] }))] })] })) : null] }), showUnsaved && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "fixed inset-0 bg-black/60", 
+                        // audit-inline-style-ok: z-index token
+                        style: { zIndex: "calc(var(--appkit-z-modal) + 5)" }, onClick: () => setShowUnsaved(false) }), _jsxs(Div, { className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-sm bg-[var(--appkit-color-surface)] rounded-xl shadow-2xl p-6", 
+                        // audit-inline-style-ok: z-index token
+                        style: { zIndex: "calc(var(--appkit-z-modal) + 5)" }, children: [_jsxs(Row, { gap: "sm", align: "start", className: "mb-4", children: [_jsx(Span, { className: "flex-shrink-0 w-10 h-10 rounded-full bg-[var(--appkit-color-warning-surface)] flex items-center justify-center", children: _jsx(AlertTriangle, { className: "w-5 h-5 text-[var(--appkit-color-warning)]" }) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)]", children: "Unsaved changes" }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: "You have unsaved changes. Leave without saving?" })] })] }), _jsxs(Row, { gap: "xs", justify: "end", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowUnsaved(false), children: "Stay" }), _jsx(Button, { variant: "danger", size: "sm", onClick: () => { setShowUnsaved(false); onClose(); }, children: "Leave" })] })] })] }))] }));
 }

package/dist/features/shell/QuickFormDrawer.js

@@ -66,7 +66,6 @@ export function QuickFormDrawer({ isOpen, onClose, title, fields, defaultValues,
         setValues(initValues(fields, defaultValues));
         setErrors({});
         onClose();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [fields, defaultValues, onClose]);
     // Keyboard: Esc → close; Tab → trap focus
     useEffect(() => {
@@ -104,7 +103,11 @@ export function QuickFormDrawer({ isOpen, onClose, title, fields, defaultValues,
     if (!isOpen)
         return null;
     const busy = submitting || isLoading;
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { className: "fixed inset-0 bg-black/40 backdrop-blur-[2px]", style: { zIndex: "calc(var(--appkit-z-modal) + 1)" }, "aria-hidden": "true", onClick: handleClose }), _jsxs("div", { ref: drawerRef, role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed inset-y-0 right-0 flex flex-col bg-[var(--appkit-color-surface)] shadow-2xl w-full lg:w-[40%]", style: { zIndex: "calc(var(--appkit-z-modal) + 2)" }, children: [_jsxs(Div, { className: "flex-shrink-0 flex items-center gap-3 px-4 py-4 border-b border-[var(--appkit-color-border)]", children: [_jsx(Text, { className: "flex-1 text-base font-semibold text-[var(--appkit-color-text)]", children: title }), _jsx("button", { type: "button", onClick: handleClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs("form", { className: "flex-1 overflow-y-auto px-4 py-5 space-y-4", onSubmit: handleSubmit, noValidate: true, children: [fields.map((field) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { className: "fixed inset-0 bg-black/40 backdrop-blur-[2px]", 
+                // audit-inline-style-ok: z-index token
+                style: { zIndex: "calc(var(--appkit-z-modal) + 1)" }, "aria-hidden": "true", onClick: handleClose }), _jsxs("div", { ref: drawerRef, role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed inset-y-0 right-0 flex flex-col bg-[var(--appkit-color-surface)] shadow-2xl w-full lg:w-[40%]", 
+                // audit-inline-style-ok: z-index token
+                style: { zIndex: "calc(var(--appkit-z-modal) + 2)" }, children: [_jsxs(Div, { className: "flex-shrink-0 flex items-center gap-3 px-4 py-4 border-b border-[var(--appkit-color-border)]", children: [_jsx(Text, { className: "flex-1 text-base font-semibold text-[var(--appkit-color-text)]", children: title }), _jsx("button", { type: "button", onClick: handleClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs("form", { className: "flex-1 overflow-y-auto px-4 py-5 space-y-4", onSubmit: handleSubmit, noValidate: true, children: [fields.map((field) => {
                                 const value = values[field.name];
                                 if (field.type === "toggle") {
                                     return (_jsxs(Div, { className: "space-y-1", children: [_jsx(Toggle, { checked: !!value, onChange: (checked) => set(field.name, checked), label: field.label }), field.helperText && (_jsx(Text, { className: "text-xs text-[var(--appkit-color-text-muted)]", children: field.helperText }))] }, field.name));

package/dist/features/stores/components/StoreHeader.js

@@ -11,7 +11,11 @@ const CLS_STARS = "inline-flex items-center gap-1 text-amber-500";
 const CLS_FOLLOW_BTN = "rounded-lg border border-orange-500 px-4 py-2 text-sm font-medium text-orange-500 hover:bg-orange-50 transition-colors";
 const CLS_WARN_BANNER = "mt-3 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 px-3 py-2 text-sm text-yellow-700 dark:text-yellow-300";
 export function StoreHeader({ store, labels = {}, onFollow, className = "", }) {
-    return (_jsxs(Section, { surface: "default", className: `border-b border-gray-200 dark:border-slate-700 ${className}`, children: [store.storeBannerURL && (_jsx(Div, { className: `h-40 md:h-56 ${__O.hidden} bg-gray-100 dark:bg-slate-800`, children: _jsx(Div, { role: "img", "aria-label": `${store.storeName} banner`, className: "h-full w-full bg-center bg-cover", style: { backgroundImage: `url(${store.storeBannerURL})` } }) })), _jsxs(Div, { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4", children: [_jsxs(Div, { className: "flex items-end gap-4", children: [store.storeLogoURL ? (_jsx(Div, { role: "img", "aria-label": store.storeName, className: "-mt-8 h-16 w-16 rounded-xl border-2 border-white dark:border-slate-800 bg-center bg-cover shadow-sm", style: { backgroundImage: `url(${store.storeLogoURL})` } })) : (_jsx(Div, { className: CLS_AVATAR, children: store.storeName[0]?.toUpperCase() })), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Div, { className: "flex flex-wrap items-center gap-2 mb-0.5", children: [_jsx(Heading, { level: 1, className: "text-xl font-bold text-gray-900 dark:text-zinc-100", children: store.storeName }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Span, { size: "sm", weight: "medium", className: CLS_STARS, children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Row, { className: "gap-3 text-xs text-gray-500 dark:text-zinc-400 mb-0.5", children: [store.category && _jsx(Span, { className: "capitalize", children: store.category }), store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { children: [store.totalProducts, " ", labels.products ?? "products"] })), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { children: [store.totalReviews, " ", labels.reviews ?? "reviews"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { children: [store.itemsSold, " ", labels.sold ?? "sold"] }))] }), store.storeDescription && (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), copyableCode: true, className: "mt-0.5" }))] }), _jsxs(Row, { gap: "sm", align: "center", className: "shrink-0", children: [_jsx(ShareButton, { title: store.storeName }), onFollow && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onFollow(store.storeSlug), className: CLS_FOLLOW_BTN, children: labels.follow ?? "Follow" }))] })] }), store.isVacationMode && (_jsx(Text, { className: CLS_WARN_BANNER, children: store.vacationMessage ??
+    return (_jsxs(Section, { surface: "default", className: `border-b border-gray-200 dark:border-slate-700 ${className}`, children: [store.storeBannerURL && (_jsx(Div, { className: `h-40 md:h-56 ${__O.hidden} bg-gray-100 dark:bg-slate-800`, children: _jsx(Div, { role: "img", "aria-label": `${store.storeName} banner`, className: "h-full w-full bg-center bg-cover", 
+                    // audit-inline-style-ok: dynamic image URL
+                    style: { backgroundImage: `url(${store.storeBannerURL})` } }) })), _jsxs(Div, { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4", children: [_jsxs(Div, { className: "flex items-end gap-4", children: [store.storeLogoURL ? (_jsx(Div, { role: "img", "aria-label": store.storeName, className: "-mt-8 h-16 w-16 rounded-xl border-2 border-white dark:border-slate-800 bg-center bg-cover shadow-sm", 
+                                // audit-inline-style-ok: dynamic image URL
+                                style: { backgroundImage: `url(${store.storeLogoURL})` } })) : (_jsx(Div, { className: CLS_AVATAR, children: store.storeName[0]?.toUpperCase() })), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Div, { className: "flex flex-wrap items-center gap-2 mb-0.5", children: [_jsx(Heading, { level: 1, className: "text-xl font-bold text-gray-900 dark:text-zinc-100", children: store.storeName }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Span, { size: "sm", weight: "medium", className: CLS_STARS, children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Row, { className: "gap-3 text-xs text-gray-500 dark:text-zinc-400 mb-0.5", children: [store.category && _jsx(Span, { className: "capitalize", children: store.category }), store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { children: [store.totalProducts, " ", labels.products ?? "products"] })), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { children: [store.totalReviews, " ", labels.reviews ?? "reviews"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { children: [store.itemsSold, " ", labels.sold ?? "sold"] }))] }), store.storeDescription && (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), copyableCode: true, className: "mt-0.5" }))] }), _jsxs(Row, { gap: "sm", align: "center", className: "shrink-0", children: [_jsx(ShareButton, { title: store.storeName }), onFollow && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onFollow(store.storeSlug), className: CLS_FOLLOW_BTN, children: labels.follow ?? "Follow" }))] })] }), store.isVacationMode && (_jsx(Text, { className: CLS_WARN_BANNER, children: store.vacationMessage ??
                             labels.vacationMode ??
                             "Store is on vacation mode" })), _jsx(Div, { className: "mt-3", children: _jsx(StoreScopedSearch, { storeId: store.storeSlug, storeName: store.storeName }) })] })] }));
 }

package/dist/features/support/repository/support.repository.js

@@ -1,6 +1,7 @@
 import { firebaseFieldOps } from "../../../providers/db-firebase";
 import { BaseRepository, prepareForFirestore, } from "../../../providers/db-firebase";
 import { DatabaseError } from "../../../errors";
+import { SUPPORT_TICKET_FIELDS } from "../../../constants/field-names";
 import { SUPPORT_TICKET_COLLECTION, ACTIVE_TICKET_STATUSES, } from "../schemas/firestore";
 export class SupportRepository extends BaseRepository {
     constructor() {
@@ -38,8 +39,8 @@ export class SupportRepository extends BaseRepository {
     async countActiveTickets(userId) {
         const col = this.db.collection(SUPPORT_TICKET_COLLECTION);
         const snaps = await Promise.all(ACTIVE_TICKET_STATUSES.map((s) => col
-            .where("userId", "==", userId)
-            .where("status", "==", s)
+            .where(SUPPORT_TICKET_FIELDS.USER_ID, "==", userId)
+            .where(SUPPORT_TICKET_FIELDS.STATUS, "==", s)
             .select()
             .get()));
         return snaps.reduce((total, snap) => total + snap.size, 0);
@@ -47,9 +48,9 @@ export class SupportRepository extends BaseRepository {
     async getActiveOrderTicket(userId, orderId) {
         const col = this.db.collection(SUPPORT_TICKET_COLLECTION);
         const snap = await col
-            .where("userId", "==", userId)
+            .where(SUPPORT_TICKET_FIELDS.USER_ID, "==", userId)
             .where("orderId", "==", orderId)
-            .where("status", "in", ACTIVE_TICKET_STATUSES)
+            .where(SUPPORT_TICKET_FIELDS.STATUS, "in", ACTIVE_TICKET_STATUSES)
             .limit(1)
             .get();
         if (snap.empty)
@@ -60,9 +61,9 @@ export class SupportRepository extends BaseRepository {
     async getActiveCategoryTicket(userId, category) {
         const col = this.db.collection(SUPPORT_TICKET_COLLECTION);
         const snap = await col
-            .where("userId", "==", userId)
-            .where("category", "==", category)
-            .where("status", "==", "waiting_on_user")
+            .where(SUPPORT_TICKET_FIELDS.USER_ID, "==", userId)
+            .where(SUPPORT_TICKET_FIELDS.CATEGORY, "==", category)
+            .where(SUPPORT_TICKET_FIELDS.STATUS, "==", "waiting_on_user")
             .limit(1)
             .get();
         if (snap.empty)

package/dist/features/wishlist/components/WishlistPage.js

@@ -6,7 +6,9 @@ const CLS_REMOVE_BTN = "self-start text-zinc-400 dark:text-zinc-400 transition h
 export function WishlistCard({ item, onRemove, onProductClick, }) {
     return (_jsxs(Div, { surface: "card", padding: "sm", className: "flex gap-4", children: [_jsx(Div, { role: onProductClick ? "button" : undefined, tabIndex: onProductClick ? 0 : undefined, onClick: onProductClick ? () => onProductClick(item) : undefined, onKeyDown: onProductClick
                     ? (e) => e.key === "Enter" && onProductClick(item)
-                    : undefined, className: `h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-neutral-100 dark:bg-slate-800 ${onProductClick ? "cursor-pointer" : ""}`, children: item.productImage && (_jsx(Div, { role: "img", "aria-label": item.productTitle ?? "", className: "h-full w-full bg-center bg-cover", style: { backgroundImage: `url(${item.productImage})` } })) }), _jsxs(Div, { className: "flex flex-1 flex-col justify-between", children: [_jsx(Text, { className: `font-medium text-neutral-900 dark:text-zinc-100 ${THEME_CONSTANTS.utilities.textClamp2}`, children: item.productTitle }), item.productPrice !== undefined && (_jsx(Text, { className: "text-sm font-semibold text-neutral-900 dark:text-zinc-100", children: formatCurrency(item.productPrice, item.productCurrency) }))] }), onRemove && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onRemove(item.id), "aria-label": "Remove from wishlist", className: CLS_REMOVE_BTN, children: "\u2715" }))] }));
+                    : undefined, className: `h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-neutral-100 dark:bg-slate-800 ${onProductClick ? "cursor-pointer" : ""}`, children: item.productImage && (_jsx(Div, { role: "img", "aria-label": item.productTitle ?? "", className: "h-full w-full bg-center bg-cover", 
+                    // audit-inline-style-ok: dynamic image URL
+                    style: { backgroundImage: `url(${item.productImage})` } })) }), _jsxs(Div, { className: "flex flex-1 flex-col justify-between", children: [_jsx(Text, { className: `font-medium text-neutral-900 dark:text-zinc-100 ${THEME_CONSTANTS.utilities.textClamp2}`, children: item.productTitle }), item.productPrice !== undefined && (_jsx(Text, { className: "text-sm font-semibold text-neutral-900 dark:text-zinc-100", children: formatCurrency(item.productPrice, item.productCurrency) }))] }), onRemove && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onRemove(item.id), "aria-label": "Remove from wishlist", className: CLS_REMOVE_BTN, children: "\u2715" }))] }));
 }
 export function WishlistPage({ items, isLoading, onRemove, onProductClick, emptyLabel = "Your wishlist is empty", }) {
     if (isLoading) {

package/dist/providers/db-firebase/admin.js

@@ -8,7 +8,6 @@ function nodeCwd() { return module.require("process").cwd(); }
 // Lazy loaders — prevents webpack from bundling firebase-admin into browser chunks.
 // (module as any).require() is used because webpack's static analysis does NOT trace
 // module.require() calls, unlike calls to the literal `require` or aliased `require`.
-/* eslint-disable @typescript-eslint/no-require-imports */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function loadApp() {
     return module.require("firebase-admin/app");

package/dist/seed/products-auctions-seed-data.js

@@ -676,6 +676,113 @@ const _adminAuctionsSeedData = [
         createdAt: new Date("2026-05-05"),
         updatedAt: new Date("2026-05-21"),
     },
+    // ===== Category-coverage backfill (BGS / CGC / Raw NM / set-specific era tags) =====
+    {
+        id: "auction-bgs-blue-eyes-sdk",
+        slug: "auction-bgs-blue-eyes-sdk",
+        title: "Blue-Eyes White Dragon (SDK BGS 9.5)",
+        description: "Starter Deck Kaiba Blue-Eyes White Dragon graded BGS 9.5 (Gem Mint).",
+        categorySlugs: ["category-graded-cards", "category-bgs-graded", "category-duel-monsters-era"],
+        categoryNames: ["Graded Cards", "BGS Slabs", "Duel Monsters Era"],
+        brandSlug: "brand-konami",
+        brand: "Konami",
+        startingBid: 1899900,
+        buyItNowPriceInPaise: 3499900,
+        currentBid: 2399900,
+        currency: "INR",
+        auctionEndDate: new Date(Date.now() + 4 * 24 * 60 * 60 * 1000),
+        bidCount: 5,
+        bidsHaveStarted: true,
+        isSold: false,
+        mainImage: `https://images.ygoprodeck.com/images/cards/${CARD_IDS.blueEyesWhiteDragon}.jpg`,
+        images: [`https://images.ygoprodeck.com/images/cards/${CARD_IDS.blueEyesWhiteDragon}.jpg`],
+        status: PRODUCT_FIELDS.STATUS_VALUES.PUBLISHED,
+        grading: { service: "BGS", grade: 9.5, certNumber: "BGS-YGO-557788" },
+        condition: PRODUCT_FIELDS.CONDITION_VALUES.NEW,
+        storeId: "store-kaiba-corp-cards",
+        storeName: "Kaiba Corp Card Vault",
+        createdAt: new Date("2026-05-20"),
+        updatedAt: new Date("2026-05-22"),
+    },
+    {
+        id: "auction-cgc-jinzo-psv",
+        slug: "auction-cgc-jinzo-psv",
+        title: "Jinzo (PSV 1st Ed CGC 9)",
+        description: "Pharaoh's Servant 1st Edition Jinzo graded CGC 9 (Mint).",
+        categorySlugs: ["category-graded-cards", "category-cgc-graded", "category-pharaoh-servant", "category-duel-monsters-era"],
+        categoryNames: ["Graded Cards", "CGC Slabs", "Pharaoh's Servant", "Duel Monsters Era"],
+        brandSlug: "brand-konami",
+        brand: "Konami",
+        startingBid: 1199900,
+        buyItNowPriceInPaise: 2299900,
+        currentBid: 1599900,
+        currency: "INR",
+        auctionEndDate: new Date(Date.now() + 6 * 24 * 60 * 60 * 1000),
+        bidCount: 3,
+        bidsHaveStarted: true,
+        isSold: false,
+        mainImage: `https://images.ygoprodeck.com/images/cards/${CARD_IDS.jinzo}.jpg`,
+        images: [`https://images.ygoprodeck.com/images/cards/${CARD_IDS.jinzo}.jpg`],
+        status: PRODUCT_FIELDS.STATUS_VALUES.PUBLISHED,
+        grading: { service: "CGC", grade: 9, certNumber: "CGC-YGO-220033" },
+        condition: PRODUCT_FIELDS.CONDITION_VALUES.NEW,
+        storeId: "store-kaiba-corp-cards",
+        storeName: "Kaiba Corp Card Vault",
+        createdAt: new Date("2026-05-19"),
+        updatedAt: new Date("2026-05-22"),
+    },
+    {
+        id: "auction-raw-nm-gate-guardian-mrd",
+        slug: "auction-raw-nm-gate-guardian-mrd",
+        title: "Gate Guardian (MRD 1st Ed, Raw NM)",
+        description: "Metal Raiders 1st Edition Gate Guardian, ungraded, certified near-mint by independent reviewer.",
+        categorySlugs: ["category-monster-cards", "category-singles", "category-raw-near-mint", "category-metal-raiders", "category-duel-monsters-era"],
+        categoryNames: ["Monster Cards", "Singles", "Raw NM", "Metal Raiders", "Duel Monsters Era"],
+        brandSlug: "brand-konami",
+        brand: "Konami",
+        startingBid: 499900,
+        buyItNowPriceInPaise: 999900,
+        currentBid: 699900,
+        currency: "INR",
+        auctionEndDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
+        bidCount: 2,
+        bidsHaveStarted: true,
+        isSold: false,
+        mainImage: `https://images.ygoprodeck.com/images/cards/${CARD_IDS.gateGuardian}.jpg`,
+        images: [`https://images.ygoprodeck.com/images/cards/${CARD_IDS.gateGuardian}.jpg`],
+        status: PRODUCT_FIELDS.STATUS_VALUES.PUBLISHED,
+        condition: PRODUCT_FIELDS.CONDITION_VALUES.USED,
+        storeId: "store-kaiba-corp-cards",
+        storeName: "Kaiba Corp Card Vault",
+        createdAt: new Date("2026-05-18"),
+        updatedAt: new Date("2026-05-22"),
+    },
+    {
+        id: "auction-soi-rainbow-dragon",
+        slug: "auction-soi-rainbow-dragon",
+        title: "Rainbow Dragon (SOI 1st Ed)",
+        description: "Shadow of Infinity 1st Edition Rainbow Dragon. GX-era ultimate beast.",
+        categorySlugs: ["category-extra-deck-cards", "category-singles", "category-shadow-of-infinity", "category-gx-era"],
+        categoryNames: ["Extra Deck Cards", "Singles", "Shadow of Infinity", "GX Era"],
+        brandSlug: "brand-konami",
+        brand: "Konami",
+        startingBid: 799900,
+        buyItNowPriceInPaise: 1599900,
+        currentBid: 1099900,
+        currency: "INR",
+        auctionEndDate: new Date(Date.now() + 9 * 24 * 60 * 60 * 1000),
+        bidCount: 4,
+        bidsHaveStarted: true,
+        isSold: false,
+        mainImage: `https://images.ygoprodeck.com/images/cards/${CARD_IDS.rainbowDragon}.jpg`,
+        images: [`https://images.ygoprodeck.com/images/cards/${CARD_IDS.rainbowDragon}.jpg`],
+        status: PRODUCT_FIELDS.STATUS_VALUES.PUBLISHED,
+        condition: PRODUCT_FIELDS.CONDITION_VALUES.USED,
+        storeId: "store-kaiba-corp-cards",
+        storeName: "Kaiba Corp Card Vault",
+        createdAt: new Date("2026-05-17"),
+        updatedAt: new Date("2026-05-22"),
+    },
 ];
 export const productsAuctionsSeedData = [
     ..._kaibaAuctionsSeedData.map((a) => withTokens({

package/dist/ui/DataTable.js

@@ -134,7 +134,9 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
                                                         ? "ascending"
                                                         : "descending"
                                                     : "none"
-                                                : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, style: { width: col.width }, onClick: () => col.sortable && handleSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { className: "text-zinc-400 dark:text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? (sortDirection === "asc" ? ("↑") : ("↓")) : (_jsx(Span, { className: "opacity-30", children: "\u2195" })) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
+                                                : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, 
+                                            // audit-inline-style-ok: dynamic CSS
+                                            style: { width: col.width }, onClick: () => col.sortable && handleSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { className: "text-zinc-400 dark:text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? (sortDirection === "asc" ? ("↑") : ("↓")) : (_jsx(Span, { className: "opacity-30", children: "\u2195" })) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
                                         "appkit-data-table__row",
                                         striped && index % 2 === 1
                                             ? "appkit-data-table__row--striped"
@@ -159,7 +161,9 @@ function DataTableTableView({ columns, paginatedData, keyExtractor, selectable,
                                         ? sortKey === col.key
                                             ? sortDirection === "asc" ? "ascending" : "descending"
                                             : "none"
-                                        : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, style: { width: col.width }, onClick: () => col.sortable && onSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { className: "text-zinc-400 dark:text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? (sortDirection === "asc" ? "↑" : "↓") : _jsx(Span, { className: "opacity-30", children: "\u2195" }) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
+                                        : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, 
+                                    // audit-inline-style-ok: dynamic CSS
+                                    style: { width: col.width }, onClick: () => col.sortable && onSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { className: "text-zinc-400 dark:text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? (sortDirection === "asc" ? "↑" : "↓") : _jsx(Span, { className: "opacity-30", children: "\u2195" }) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
                                 "appkit-data-table__row",
                                 striped && index % 2 === 1 ? "appkit-data-table__row--striped" : "",
                                 onRowClick ? "appkit-data-table__row--clickable" : "",

package/dist/ui/components/AvatarDisplay.js

@@ -44,7 +44,9 @@ export function AvatarDisplay({ cropData, size = "md", className = "", alt = "Pr
             className,
         ]
             .filter(Boolean)
-            .join(" "), "data-section": "avatardisplay-div-455", children: _jsx("div", { className: UI_AVATAR_DISPLAY.imageInner, style: {
+            .join(" "), "data-section": "avatardisplay-div-455", children: _jsx("div", { className: UI_AVATAR_DISPLAY.imageInner, 
+            // audit-inline-style-ok: dynamic CSS
+            style: {
                 backgroundImage: `url(${cropData.url})`,
                 backgroundSize: "cover",
                 width: `${(cropData.zoom || 1) * 100}%`,

package/dist/ui/components/BackgroundRenderer.js

@@ -36,7 +36,9 @@ export function BackgroundRenderer({ mode, lightMode, darkMode, }) {
             opacity: config.overlay.opacity,
         }
         : { display: "none" };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-bg-renderer", style: getBackgroundStyle(), "data-section": "backgroundrenderer-div-456", children: config.type === "video" && (_jsxs("video", { ref: videoRef, autoPlay: true, loop: true, muted: true, playsInline: true, onLoadedData: () => setIsVideoLoaded(true), className: `appkit-bg-renderer__video ${isVideoLoaded
+    return (_jsxs(_Fragment, { children: ["// audit-inline-style-ok: computed style fn", _jsx("div", { className: "appkit-bg-renderer", style: getBackgroundStyle(), "data-section": "backgroundrenderer-div-456", children: config.type === "video" && (_jsxs("video", { ref: videoRef, autoPlay: true, loop: true, muted: true, playsInline: true, onLoadedData: () => setIsVideoLoaded(true), className: `appkit-bg-renderer__video ${isVideoLoaded
                         ? "appkit-bg-renderer__video--loaded"
-                        : "appkit-bg-renderer__video--loading"}`, children: [_jsx("source", { src: config.value, type: "video/mp4" }), "Your browser does not support the video tag."] })) }), _jsx("div", { className: "appkit-bg-renderer__overlay", style: overlayStyle })] }));
+                        : "appkit-bg-renderer__video--loading"}`, children: [_jsx("source", { src: config.value, type: "video/mp4" }), "Your browser does not support the video tag."] })) })
+            // audit-inline-style-ok: pass-through style prop
+            , "// audit-inline-style-ok: pass-through style prop", _jsx("div", { className: "appkit-bg-renderer__overlay", style: overlayStyle })] }));
 }

package/dist/ui/components/Card.js

@@ -53,9 +53,13 @@ export function Card({ children, variant = "flat", padding = "md", hover = false
         const whileTap = animate === "pressScale" || animate === "both"
             ? { scale: 0.97 }
             : undefined;
-        return (_jsx(motion.div, { className: cls, style: style, onClick: onClick, whileHover: whileHover, whileTap: whileTap, transition: SPRING_SNAPPY, "data-section": "card-div-463", children: children }));
+        return (_jsx(motion.div, { className: cls, 
+            // audit-inline-style-ok: pass-through style prop
+            style: style, onClick: onClick, whileHover: whileHover, whileTap: whileTap, transition: SPRING_SNAPPY, "data-section": "card-div-463", children: children }));
     }
-    return (_jsx("div", { className: cls, style: style, onClick: onClick, "data-section": "card-div-463", children: children }));
+    return (_jsx("div", { className: cls, 
+        // audit-inline-style-ok: pass-through style prop
+        style: style, onClick: onClick, "data-section": "card-div-463", children: children }));
 }
 export function CardHeader({ children, className = "" }) {
     return (_jsx("div", { className: ["appkit-card__header", className].filter(Boolean).join(" "), "data-section": "card-div-464", children: children }));

package/dist/ui/components/ImageGallery.js

@@ -91,7 +91,9 @@ export default function ImageGallery({ images, initialIndex = 0, showThumbnails
     if (images.length === 0) {
         return (_jsx("div", { className: `appkit-image-gallery ${flex.center} p-8 ${themed.bgTertiary} rounded-lg ${className}`, "data-section": "imagegallery-div-515", children: _jsx(Text, { className: themed.textMuted, children: "No images to display" }) }));
     }
-    return (_jsxs("div", { className: `appkit-image-gallery ${className}`, "data-section": "imagegallery-div-516", children: [_jsxs("div", { ref: imageContainerRef, className: `appkit-image-gallery__viewport ${themed.bgSecondary}`, "data-section": "imagegallery-div-517", children: [_jsxs("div", { className: "appkit-image-gallery__image-frame", "data-section": "imagegallery-div-518", children: [_jsx("div", { role: "img", "aria-label": currentImage.alt, className: "appkit-image-gallery__image", style: {
+    return (_jsxs("div", { className: `appkit-image-gallery ${className}`, "data-section": "imagegallery-div-516", children: [_jsxs("div", { ref: imageContainerRef, className: `appkit-image-gallery__viewport ${themed.bgSecondary}`, "data-section": "imagegallery-div-517", children: [_jsxs("div", { className: "appkit-image-gallery__image-frame", "data-section": "imagegallery-div-518", children: [_jsx("div", { role: "img", "aria-label": currentImage.alt, className: "appkit-image-gallery__image", 
+                                // audit-inline-style-ok: dynamic CSS
+                                style: {
                                     backgroundImage: `url(${currentImage.src})`,
                                     transform: `scale(${scale})`,
                                     cursor: allowZoom

package/dist/ui/components/ImageLightbox.js

@@ -89,7 +89,9 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, showTh
     const image = images[currentIndex];
     const hasMultiple = images.length > 1;
     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: () => { setZoom(100); setRotation(0); }, className: iconBtnClass, "aria-label": "Reset", children: _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: [_jsx("img", { src: image.src, alt: image.alt ?? "", className: "appkit-lightbox__img", draggable: false, 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", { 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: () => { setZoom(100); setRotation(0); }, className: iconBtnClass, "aria-label": "Reset", children: _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" }) })), "// audit-inline-style-ok: dynamic CSS", _jsxs("div", { className: "appkit-lightbox__image-wrap", style: { cursor: zoom > 100 ? "grab" : "default" }, children: [_jsx("img", { src: image.src, alt: image.alt ?? "", className: "appkit-lightbox__img", draggable: false, 
+                        // audit-inline-style-ok: dynamic CSS
+                        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: () => {

package/dist/ui/components/PasswordStrengthIndicator.js

@@ -30,5 +30,7 @@ export function PasswordStrengthIndicator({ password, minLength = 8, showRequire
             : strength <= 75
                 ? "bg-yellow-500"
                 : "bg-green-500";
-    return (_jsxs("div", { className: "appkit-password-strength", "aria-live": "polite", "aria-atomic": "true", "data-section": "passwordstrengthindicator-div-567", children: [_jsxs(Row, { gap: "sm", className: "mb-2", children: [_jsx("div", { className: "appkit-password-strength__track", "data-section": "passwordstrengthindicator-div-568", children: _jsx("div", { className: `appkit-password-strength__fill ${strengthColor}`, style: { width: `${strength}%` }, role: "progressbar", "aria-valuenow": Math.round(strength), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Password strength: ${strengthLabel}` }) }), _jsx(Span, { className: "appkit-password-strength__label", children: strengthLabel })] }), showRequirements ? (_jsx(Ul, { className: "appkit-password-strength__requirements", children: requirements.map((req) => (_jsxs(Li, { className: `appkit-password-strength__requirement ${req.met ? "appkit-password-strength__requirement--met" : ""}`, children: [_jsx(Span, { className: "sr-only", children: req.met ? "Met: " : "Not met: " }), req.label] }, req.label))) })) : null] }));
+    return (_jsxs("div", { className: "appkit-password-strength", "aria-live": "polite", "aria-atomic": "true", "data-section": "passwordstrengthindicator-div-567", children: [_jsxs(Row, { gap: "sm", className: "mb-2", children: [_jsx("div", { className: "appkit-password-strength__track", "data-section": "passwordstrengthindicator-div-568", children: _jsx("div", { className: `appkit-password-strength__fill ${strengthColor}`, 
+                            // audit-inline-style-ok: computed percentage
+                            style: { width: `${strength}%` }, role: "progressbar", "aria-valuenow": Math.round(strength), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Password strength: ${strengthLabel}` }) }), _jsx(Span, { className: "appkit-password-strength__label", children: strengthLabel })] }), showRequirements ? (_jsx(Ul, { className: "appkit-password-strength__requirements", children: requirements.map((req) => (_jsxs(Li, { className: `appkit-password-strength__requirement ${req.met ? "appkit-password-strength__requirement--met" : ""}`, children: [_jsx(Span, { className: "sr-only", children: req.met ? "Met: " : "Not met: " }), req.label] }, req.label))) })) : null] }));
 }

package/dist/ui/components/Progress.js

@@ -13,7 +13,9 @@ export function Progress({ value, max = 100, variant = "primary", size = "md", l
         warning: "appkit-progress__bar--warning",
         error: "appkit-progress__bar--error",
     };
-    return (_jsxs("div", { className: `appkit-progress ${className}`, "data-section": "progress-div-569", children: [(label || showValue) && (_jsxs("div", { className: "appkit-progress__meta", "data-section": "progress-div-570", children: [label && _jsx(Span, { className: "appkit-progress__label", children: label }), showValue && (_jsxs(Span, { className: "appkit-progress__value", children: [Math.round(percentage), "%"] }))] })), _jsx("div", { className: `appkit-progress__track ${sizeClasses[size]}`, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": label || `Progress: ${Math.round(percentage)}%`, "data-section": "progress-div-571", children: _jsx("div", { className: `appkit-progress__bar ${variantClasses[variant]}`, style: { width: `${percentage}%` } }) })] }));
+    return (_jsxs("div", { className: `appkit-progress ${className}`, "data-section": "progress-div-569", children: [(label || showValue) && (_jsxs("div", { className: "appkit-progress__meta", "data-section": "progress-div-570", children: [label && _jsx(Span, { className: "appkit-progress__label", children: label }), showValue && (_jsxs(Span, { className: "appkit-progress__value", children: [Math.round(percentage), "%"] }))] })), _jsx("div", { className: `appkit-progress__track ${sizeClasses[size]}`, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": label || `Progress: ${Math.round(percentage)}%`, "data-section": "progress-div-571", children: _jsx("div", { className: `appkit-progress__bar ${variantClasses[variant]}`, 
+                    // audit-inline-style-ok: computed percentage
+                    style: { width: `${percentage}%` } }) })] }));
 }
 export function IndeterminateProgress({ variant = "primary", size = "md", label, className = "", }) {
     const sizeClasses = {
@@ -27,5 +29,7 @@ export function IndeterminateProgress({ variant = "primary", size = "md", label,
         warning: "appkit-progress__bar--warning",
         error: "appkit-progress__bar--error",
     };
-    return (_jsxs("div", { className: `appkit-progress ${className}`, "data-section": "progress-div-572", children: [label && (_jsx(Span, { className: "appkit-progress__label appkit-progress__label--block", children: label })), _jsx("div", { className: `appkit-progress__track appkit-progress__track--indeterminate ${sizeClasses[size]}`, role: "progressbar", "aria-label": label || "Loading...", "data-section": "progress-div-573", children: _jsx("div", { className: `appkit-progress__bar appkit-progress__bar--indeterminate ${variantClasses[variant]}`, style: { width: "40%" } }) })] }));
+    return (_jsxs("div", { className: `appkit-progress ${className}`, "data-section": "progress-div-572", children: [label && (_jsx(Span, { className: "appkit-progress__label appkit-progress__label--block", children: label })), _jsx("div", { className: `appkit-progress__track appkit-progress__track--indeterminate ${sizeClasses[size]}`, role: "progressbar", "aria-label": label || "Loading...", "data-section": "progress-div-573", children: _jsx("div", { className: `appkit-progress__bar appkit-progress__bar--indeterminate ${variantClasses[variant]}`, 
+                    // audit-inline-style-ok: dynamic CSS
+                    style: { width: "40%" } }) })] }));
 }

package/dist/ui/components/RowActionMenu.js

@@ -38,7 +38,9 @@ export function RowActionMenu({ actions, align = "right", }) {
         setOpen((v) => !v);
     }, [open, align]);
     const dropdown = open && pos && mounted
-        ? createPortal(_jsx("div", { ref: dropdownRef, role: "menu", className: "appkit-row-action-menu__dropdown", style: {
+        ? createPortal(_jsx("div", { ref: dropdownRef, role: "menu", className: "appkit-row-action-menu__dropdown", 
+            // audit-inline-style-ok: dynamic CSS
+            style: {
                 position: "fixed",
                 zIndex: "var(--appkit-z-modal)",
                 top: pos.top,

package/dist/ui/components/SiteLogo.js

@@ -14,5 +14,11 @@ export function SiteLogo({ className = "h-7", title = "LetItRip.in", variant = "
         _jsx("img", { src: src, alt: title, "data-testid": "site-logo", className: `block w-auto object-contain ${className}` }));
     }
     const fill = variant === "gradient" ? `url(#${GRADIENT_ID})` : "currentColor";
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 214 56", role: "img", "aria-label": title, "data-testid": "site-logo", className: `block w-auto ${className}`, children: [_jsx("title", { children: title }), variant === "gradient" && (_jsx("defs", { children: _jsxs("linearGradient", { id: GRADIENT_ID, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", style: { stopColor: "var(--appkit-color-primary-700, #1343de)" } }), _jsx("stop", { offset: "55%", style: { stopColor: "var(--appkit-color-cobalt, #3570fc)" } }), _jsx("stop", { offset: "100%", style: { stopColor: "var(--appkit-color-secondary-400, #84e122)" } })] }) })), _jsx("text", { x: "0", y: "44", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "800", fontSize: "44", letterSpacing: "-1.5", fill: fill, children: "LetItRip" }), _jsx("rect", { x: "169", y: "5", width: "43", height: "21", rx: "10.5", fill: fill, opacity: "0.12" }), _jsx("text", { x: "174", y: "21", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "700", fontSize: "15", letterSpacing: "0.2", fill: fill, children: ".in" })] }));
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 214 56", role: "img", "aria-label": title, "data-testid": "site-logo", className: `block w-auto ${className}`, children: [_jsx("title", { children: title }), variant === "gradient" && (_jsx("defs", { children: _jsxs("linearGradient", { id: GRADIENT_ID, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", 
+                            // audit-inline-style-ok: SVG gradient stop
+                            style: { stopColor: "var(--appkit-color-primary-700, #1343de)" } }), _jsx("stop", { offset: "55%", 
+                            // audit-inline-style-ok: SVG gradient stop
+                            style: { stopColor: "var(--appkit-color-cobalt, #3570fc)" } }), _jsx("stop", { offset: "100%", 
+                            // audit-inline-style-ok: SVG gradient stop
+                            style: { stopColor: "var(--appkit-color-secondary-400, #84e122)" } })] }) })), _jsx("text", { x: "0", y: "44", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "800", fontSize: "44", letterSpacing: "-1.5", fill: fill, children: "LetItRip" }), _jsx("rect", { x: "169", y: "5", width: "43", height: "21", rx: "10.5", fill: fill, opacity: "0.12" }), _jsx("text", { x: "174", y: "21", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "700", fontSize: "15", letterSpacing: "0.2", fill: fill, children: ".in" })] }));
 }

package/dist/ui/components/Skeleton.js

@@ -17,5 +17,7 @@ export function Skeleton({ variant = "text", width, height, className = "", anim
         width: width ?? defaultSize.width,
         height: height ?? defaultSize.height,
     };
-    return (_jsx("div", { className: `appkit-skeleton ${variantClass} ${animationClass} ${className}`, style: style, role: "status", "aria-label": "Loading", "data-section": "skeleton-div-606", children: _jsx("span", { className: "appkit-sr-only", children: "Loading..." }) }));
+    return (_jsx("div", { className: `appkit-skeleton ${variantClass} ${animationClass} ${className}`, 
+        // audit-inline-style-ok: pass-through style prop
+        style: style, role: "status", "aria-label": "Loading", "data-section": "skeleton-div-606", children: _jsx("span", { className: "appkit-sr-only", children: "Loading..." }) }));
 }

package/dist/ui/components/Slider.js

@@ -30,7 +30,9 @@ export function Slider({ value: controlledValue, defaultValue = 0, min = 0, max
                         ].join(" "), "data-section": "slider-div-610", children: _jsx("div", { className: [
                                 "h-full rounded-full bg-lime-600 dark:bg-pink-500",
                                 SIZE_CLASSES[size],
-                            ].join(" "), style: { width: `${Math.max(0, Math.min(100, percentage))}%` } }) }), _jsx("input", { id: inputId, type: "range", min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, onMouseUp: handleChangeEnd, onTouchEnd: handleChangeEnd, className: [
+                            ].join(" "), 
+                            // audit-inline-style-ok: computed percentage
+                            style: { width: `${Math.max(0, Math.min(100, percentage))}%` } }) }), _jsx("input", { id: inputId, type: "range", min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, onMouseUp: handleChangeEnd, onTouchEnd: handleChangeEnd, className: [
                             "appkit-slider relative z-10 bg-transparent",
                             disabled ? "appkit-slider--disabled" : "cursor-pointer",
                             SIZE_CLASSES[size],

package/dist/ui/components/TabStrip.js

@@ -42,7 +42,9 @@ export function TabStrip({ tabs, activeKey, onChange, minTabWidth = FLUID_GRID_M
         }
     }, [activeKey, scrollOffset, visibleCount, tabs, setScrollOffset]);
     const visible = tabs.slice(scrollOffset, scrollOffset + visibleCount);
-    return (_jsxs("div", { ref: containerRef, role: "tablist", className: ["appkit-tab-strip", className ?? ""].join(" ").trim(), children: [hasOverflow && (_jsx("button", { type: "button", onClick: scrollLeft, disabled: !canScrollLeft, "aria-label": "Previous tabs", className: "appkit-tab-strip__arrow", children: "\u2039" })), visible.map((tab) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": tab.key === activeKey, "aria-disabled": tab.disabled, onClick: () => !tab.disabled && onChange(tab.key), style: { minWidth: `${minTabWidth}px` }, className: [
+    return (_jsxs("div", { ref: containerRef, role: "tablist", className: ["appkit-tab-strip", className ?? ""].join(" ").trim(), children: [hasOverflow && (_jsx("button", { type: "button", onClick: scrollLeft, disabled: !canScrollLeft, "aria-label": "Previous tabs", className: "appkit-tab-strip__arrow", children: "\u2039" })), visible.map((tab) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": tab.key === activeKey, "aria-disabled": tab.disabled, onClick: () => !tab.disabled && onChange(tab.key), 
+                // audit-inline-style-ok: computed pixel offset
+                style: { minWidth: `${minTabWidth}px` }, className: [
                     "appkit-tab-strip__tab",
                     tab.key === activeKey
                         ? "appkit-tab-strip__tab--active"

package/package.json

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