@mohasinac/appkit 2.7.50 → 2.7.52

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

@@ -1,13 +1,12 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { Button, Form, Heading, Input, RichTextEditor, RichTextRenderer, Select, StackedViewShell, TagInput, Text, Toggle, useToast } from "../../../ui";
-import { FieldInput, FormShellContext, useFormShellState } from "../../../ui/forms";
-import { ImageUpload } from "../../media/upload/ImageUpload";
-import { useMediaUpload } from "../../media";
+import { Button, ConfirmDeleteModal, Div, Heading, Input, RichTextEditor, RichTextRenderer, Select, StackedViewShell, TagInput, Text, Toggle, useToast, } from "../../../ui";
+import { ImageUpload, useMediaUpload } from "../../media";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { StepForm } from "../../shell";
 // --- Helpers -----------------------------------------------------------------
 const STATUS_OPTIONS = [
     { label: "Draft", value: "draft" },
@@ -21,6 +20,22 @@ const CATEGORY_OPTIONS = [
     { label: "Updates", value: "updates" },
     { label: "Community", value: "community" },
 ];
+const DEFAULT_DRAFT = {
+    title: "",
+    slug: "",
+    excerpt: "",
+    content: "",
+    coverImage: "",
+    youtubeId: "",
+    category: "news",
+    tags: [],
+    status: "published",
+    isFeatured: true,
+    authorName: "Admin",
+    publishedAt: "",
+    metaTitle: "",
+    metaDescription: "",
+};
 function toSlug(str) {
     const base = str
         .toLowerCase()
@@ -42,23 +57,15 @@ function toDateInputValue(val) {
 // --- Component ---------------------------------------------------------------
 export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...rest }) {
     const isEdit = Boolean(postId);
-    const [title, setTitle] = React.useState("");
-    const [slug, setSlug] = React.useState("");
+    const [draft, setDraft] = React.useState(DEFAULT_DRAFT);
     const [slugManual, setSlugManual] = React.useState(false);
-    const [excerpt, setExcerpt] = React.useState("");
-    const [content, setContent] = React.useState("");
-    const [coverImage, setCoverImage] = React.useState("");
-    const [category, setCategory] = React.useState("news");
-    const [tags, setTags] = React.useState([]);
-    const [status, setStatus] = React.useState("draft");
-    const [isFeatured, setIsFeatured] = React.useState(false);
-    const [authorName, setAuthorName] = React.useState("Admin");
-    const [publishedAt, setPublishedAt] = React.useState("");
-    const [metaTitle, setMetaTitle] = React.useState("");
-    const [metaDescription, setMetaDescription] = React.useState("");
+    const [currentStep, setCurrentStep] = React.useState(0);
+    const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
     const { showToast } = useToast();
     const { upload } = useMediaUpload();
-    const { shellCtx, setFieldError, clearErrors } = useFormShellState();
+    const update = React.useCallback((partial) => {
+        setDraft((prev) => ({ ...prev, ...partial }));
+    }, []);
     // --- load existing post (edit mode) ---
     const postQuery = useQuery({
         queryKey: ["admin", "blog", postId],
@@ -72,49 +79,46 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
         const p = postQuery.data;
         if (!p)
             return;
-        setTitle(p.title ?? "");
-        setSlug(p.slug ?? "");
+        setDraft({
+            title: p.title ?? "",
+            slug: p.slug ?? "",
+            excerpt: p.excerpt ?? "",
+            content: p.content ?? "",
+            coverImage: typeof p.coverImage === "string" ? p.coverImage : p.coverImage?.url ?? "",
+            youtubeId: p.youtubeId ?? "",
+            category: p.category ?? "news",
+            tags: Array.isArray(p.tags) ? p.tags : [],
+            status: p.status ?? "published",
+            isFeatured: p.isFeatured ?? true,
+            authorName: p.authorName ?? "Admin",
+            publishedAt: toDateInputValue(p.publishedAt),
+            metaTitle: p.metaTitle ?? "",
+            metaDescription: p.metaDescription ?? "",
+        });
         setSlugManual(true);
-        setExcerpt(p.excerpt ?? "");
-        setContent(p.content ?? "");
-        setCoverImage(typeof p.coverImage === "string"
-            ? p.coverImage
-            : p.coverImage?.url ?? "");
-        setCategory(p.category ?? "news");
-        setTags(Array.isArray(p.tags) ? p.tags : []);
-        setStatus(p.status ?? "draft");
-        setIsFeatured(p.isFeatured ?? false);
-        setAuthorName(p.authorName ?? "Admin");
-        setPublishedAt(toDateInputValue(p.publishedAt));
-        setMetaTitle(p.metaTitle ?? "");
-        setMetaDescription(p.metaDescription ?? "");
     }, [postQuery.data]);
-    const handleTitleChange = (value) => {
-        setTitle(value);
-        if (!slugManual)
-            setSlug(toSlug(value));
-    };
     // --- save ---
     const saveMutation = useMutation({
         mutationFn: async () => {
             const payload = {
-                title,
-                slug: slug || toSlug(title),
-                excerpt,
-                content,
-                coverImage: coverImage || undefined,
-                category,
-                tags,
-                status,
-                isFeatured,
-                authorName,
-                publishedAt: status === "published" && !publishedAt
+                title: draft.title,
+                slug: draft.slug || toSlug(draft.title),
+                excerpt: draft.excerpt,
+                content: draft.content,
+                coverImage: draft.coverImage || undefined,
+                youtubeId: draft.youtubeId || undefined,
+                category: draft.category,
+                tags: draft.tags,
+                status: draft.status,
+                isFeatured: draft.isFeatured,
+                authorName: draft.authorName,
+                publishedAt: draft.status === "published" && !draft.publishedAt
                     ? new Date().toISOString()
-                    : publishedAt
-                        ? new Date(publishedAt).toISOString()
+                    : draft.publishedAt
+                        ? new Date(draft.publishedAt).toISOString()
                         : undefined,
-                metaTitle: metaTitle || undefined,
-                metaDescription: metaDescription || undefined,
+                metaTitle: draft.metaTitle || undefined,
+                metaDescription: draft.metaDescription || undefined,
             };
             if (isEdit) {
                 return apiClient.patch(ADMIN_ENDPOINTS.BLOG_BY_ID(postId), payload);
@@ -122,7 +126,7 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
             return apiClient.post(ADMIN_ENDPOINTS.BLOG, {
                 ...payload,
                 authorId: "admin",
-                readTimeMinutes: Math.max(1, Math.round(content.replace(/<[^>]*>/g, "").split(/\s+/).length / 200)),
+                readTimeMinutes: Math.max(1, Math.round(draft.content.replace(/<[^>]*>/g, "").split(/\s+/).filter(Boolean).length / 200)),
                 views: 0,
             });
         },
@@ -146,30 +150,49 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
         },
         onError: (err) => showToast(err?.message ?? "Failed to delete post.", "error"),
     });
-    const isSubmitting = saveMutation.isPending || postQuery.isLoading;
-    const canSave = Boolean(title);
-    const formSection = (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Form, { onSubmit: (e) => {
-                e.preventDefault();
-                clearErrors();
-                if (!title.trim()) {
-                    setFieldError("title", "Title is required");
-                    return;
-                }
-                saveMutation.mutate();
-            }, className: "space-y-5", children: [_jsx(FieldInput, { name: "title", label: "Title", value: title, onChange: (v) => handleTitleChange(v), required: true, placeholder: "e.g. How to Grade Pok\u00E9mon Cards" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
-                        setSlug(e.target.value);
-                        setSlugManual(true);
-                    }, placeholder: "blog-how-to-grade-pokemon-cards", helperText: "Auto-generated from title. Must start with 'blog-'." }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: category, onValueChange: (v) => setCategory(v) }), _jsx(Select, { label: "Status", options: STATUS_OPTIONS, value: status, onValueChange: (v) => setStatus(v) })] }), _jsx(Input, { label: "Excerpt", value: excerpt, onChange: (e) => setExcerpt(e.target.value), placeholder: "Short summary shown in listings and cards" }), _jsx(ImageUpload, { label: "Cover image", currentImage: coverImage, onUpload: (file) => upload(file, "blog", true, { type: "blog-cover", title: title || slug, category }), onChange: setCoverImage }), _jsxs("div", { className: "space-y-1", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Content" }), _jsx(RichTextEditor, { value: content, onChange: setContent, placeholder: "Write your article here...", minHeightClassName: "min-h-[320px]" })] }), _jsx(TagInput, { label: "Tags", value: tags, onChange: setTags, placeholder: "e.g. pokemon, grading, tcg" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Input, { label: "Author name", value: authorName, onChange: (e) => setAuthorName(e.target.value), placeholder: "Author display name" }), _jsx(Input, { label: "Publish date (optional)", value: publishedAt, onChange: (e) => setPublishedAt(e.target.value), type: "date", helperText: "Auto-set to now when publishing." })] }), _jsx(Toggle, { label: "Featured post", checked: isFeatured, onChange: setIsFeatured }), _jsx(Input, { label: "Meta title (optional)", value: metaTitle, onChange: (e) => setMetaTitle(e.target.value), placeholder: "Defaults to post title" }), _jsx(Input, { label: "Meta description (optional)", value: metaDescription, onChange: (e) => setMetaDescription(e.target.value), placeholder: "SEO description \u2014 max 160 chars", maxLength: 160 }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, children: isEdit ? "Save changes" : "Create post" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
-                                if (confirm("Delete this post? This cannot be undone.")) {
-                                    deleteMutation.mutate();
-                                }
-                            }, children: "Delete post" }))] })] }, "blog-form") }));
+    const isLoading = saveMutation.isPending || postQuery.isLoading;
+    const steps = [
+        {
+            label: "Content",
+            validate: (values) => !values.title.trim() ? "Title is required" : null,
+            render: ({ values, onChange }) => (_jsxs("div", { className: "space-y-5", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Content" }), _jsx(Input, { label: "Title", value: values.title, onChange: (e) => {
+                            const v = e.target.value;
+                            onChange({ title: v, ...(!slugManual && { slug: toSlug(v) }) });
+                        }, placeholder: "e.g. How to Grade Pok\u00E9mon Cards" }), _jsx(Input, { label: "Slug", value: values.slug, onChange: (e) => {
+                            setSlugManual(true);
+                            onChange({ slug: e.target.value });
+                        }, placeholder: "blog-how-to-grade-pokemon-cards", helperText: "Auto-generated from title. Must start with 'blog-'." }), _jsx(Input, { label: "Excerpt", value: values.excerpt, onChange: (e) => onChange({ excerpt: e.target.value }), placeholder: "Short summary shown in listings and cards" }), _jsxs("div", { className: "space-y-1", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Content" }), _jsx(RichTextEditor, { value: values.content, onChange: (v) => onChange({ content: v }), placeholder: "Write your article here...", minHeightClassName: "min-h-[320px]" })] })] })),
+        },
+        {
+            label: "Media",
+            render: ({ values, onChange }) => (_jsxs("div", { className: "space-y-5", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Media" }), _jsx(ImageUpload, { label: "Cover Image", currentImage: values.coverImage, onUpload: (file) => upload(file, "blog", true, {
+                            type: "blog-cover",
+                            title: values.title || values.slug,
+                            category: values.category,
+                        }), onChange: (url) => onChange({ coverImage: url }) }), _jsx(Input, { label: "YouTube Video ID (optional)", value: values.youtubeId, onChange: (e) => onChange({ youtubeId: e.target.value }), placeholder: "e.g. dQw4w9WgXcQ", helperText: "The 11-character video ID from the YouTube URL." })] })),
+        },
+        {
+            label: "SEO & Tags",
+            render: ({ values, onChange }) => {
+                const readTime = Math.max(1, Math.round(values.content.replace(/<[^>]*>/g, "").split(/\s+/).filter(Boolean).length / 200));
+                return (_jsxs("div", { className: "space-y-5", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "SEO & Tags" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: values.category, onValueChange: (v) => onChange({ category: v }) }), _jsxs(Div, { children: [_jsx(Text, { className: "text-sm font-medium mb-1.5", children: "Estimated Read Time" }), _jsxs(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: ["~", readTime, " min (auto-calculated from content)"] })] })] }), _jsx(TagInput, { label: "Tags", value: values.tags, onChange: (t) => onChange({ tags: t }), placeholder: "e.g. pokemon, grading, tcg" }), _jsx(Input, { label: "Meta Title (optional)", value: values.metaTitle, onChange: (e) => onChange({ metaTitle: e.target.value }), placeholder: "Defaults to post title" }), _jsx(Input, { label: "Meta Description (optional)", value: values.metaDescription, onChange: (e) => onChange({ metaDescription: e.target.value }), placeholder: "SEO description \u2014 max 160 chars", maxLength: 160 })] }));
+            },
+        },
+        {
+            label: "Publish",
+            render: ({ values, onChange }) => (_jsxs("div", { className: "space-y-5", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Publish Settings" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Select, { label: "Status", options: STATUS_OPTIONS, value: values.status, onValueChange: (v) => onChange({ status: v }) }), _jsx(Input, { label: "Publish date (optional)", value: values.publishedAt, onChange: (e) => onChange({ publishedAt: e.target.value }), type: "date", helperText: "Auto-set to now when publishing." })] }), _jsx(Input, { label: "Author Name", value: values.authorName, onChange: (e) => onChange({ authorName: e.target.value }), placeholder: "Author display name" }), _jsx(Toggle, { label: "Featured post", checked: values.isFeatured, onChange: (checked) => onChange({ isFeatured: checked }) }), isEdit && (_jsx("div", { className: "pt-4 border-t border-[var(--appkit-color-border)]", children: _jsx(Button, { type: "button", variant: "danger", size: "sm", onClick: () => setShowDeleteConfirm(true), isLoading: deleteMutation.isPending, children: "Delete post" }) }))] })),
+        },
+    ];
+    const deleteModal = (_jsx(ConfirmDeleteModal, { isOpen: showDeleteConfirm, onConfirm: () => {
+            setShowDeleteConfirm(false);
+            deleteMutation.mutate();
+        }, onClose: () => setShowDeleteConfirm(false), title: "Delete post", message: "This will permanently delete the blog post. This cannot be undone." }));
+    const formContent = (_jsxs(_Fragment, { children: [_jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: () => { saveMutation.mutate(); }, formId: "admin-blog", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: isEdit ? "Save Changes" : "Create Post", isLoading: isLoading }), deleteModal] }));
     if (embedded) {
-        return _jsx("div", { className: "overflow-y-auto p-4", children: formSection });
+        return _jsx("div", { className: "overflow-y-auto p-4", children: formContent });
     }
-    // S-STORE-9B-D — rendered preview pane alongside the editor.
-    const previewSection = (_jsxs("div", { className: "rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-raised)] p-5 max-h-[calc(100vh-12rem)] overflow-y-auto", children: [_jsx("div", { className: "flex items-center gap-2 mb-3 text-xs font-semibold uppercase tracking-wide text-[var(--appkit-color-text-muted)]", children: _jsx("span", { children: "Live preview" }) }), coverImage ? (_jsx("img", { src: coverImage, alt: "", className: "w-full rounded-md mb-4 object-cover max-h-64" })) : null, _jsx(Heading, { level: 1, className: "text-2xl font-bold mb-1", children: title || "Untitled post" }), _jsxs(Text, { className: "text-xs text-[var(--appkit-color-text-muted)] mb-4", children: [authorName || "Anonymous", category ? ` · ${category}` : ""] }), excerpt ? (_jsx(Text, { className: "italic text-[var(--appkit-color-text-secondary)] mb-4", children: excerpt })) : null, _jsx(RichTextRenderer, { html: content || "<em>No content yet…</em>" }), tags.length > 0 ? (_jsx("div", { className: "mt-6 flex flex-wrap gap-1.5", children: tags.map((t) => (_jsxs("span", { className: "px-2 py-0.5 rounded-full bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)] text-xs", children: ["#", t] }, t))) })) : null] }, "preview"));
+    const previewSection = (_jsxs("div", { className: "rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-raised)] p-5 max-h-[calc(100vh-12rem)] overflow-y-auto", children: [_jsx("div", { className: "flex items-center gap-2 mb-3 text-xs font-semibold uppercase tracking-wide text-[var(--appkit-color-text-muted)]", children: _jsx("span", { children: "Live preview" }) }), draft.coverImage ? (_jsx("img", { src: draft.coverImage, alt: "", className: "w-full rounded-md mb-4 object-cover max-h-64" })) : null, _jsx(Heading, { level: 1, className: "text-2xl font-bold mb-1", children: draft.title || "Untitled post" }), _jsxs(Text, { className: "text-xs text-[var(--appkit-color-text-muted)] mb-4", children: [draft.authorName || "Anonymous", draft.category ? ` · ${draft.category}` : ""] }), draft.excerpt ? (_jsx(Text, { className: "italic text-[var(--appkit-color-text-secondary)] mb-4", children: draft.excerpt })) : null, _jsx(RichTextRenderer, { html: draft.content || "<em>No content yet…</em>" }), draft.tags.length > 0 ? (_jsx("div", { className: "mt-6 flex flex-wrap gap-1.5", children: draft.tags.map((t) => (_jsxs("span", { className: "px-2 py-0.5 rounded-full bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)] text-xs", children: ["#", t] }, t))) })) : null] }, "preview"));
     return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Post" : "New Blog Post", sections: [
-            _jsxs("div", { className: "lg:grid lg:grid-cols-[3fr_2fr] lg:gap-6", children: [_jsx("div", { children: formSection }), _jsx("div", { className: "mt-6 lg:mt-0 lg:sticky lg:top-4 lg:self-start", children: previewSection })] }, "split"),
+            _jsxs("div", { className: "lg:grid lg:grid-cols-[3fr_2fr] lg:gap-6", children: [_jsx("div", { children: formContent }), _jsx("div", { className: "mt-6 lg:mt-0 lg:sticky lg:top-4 lg:self-start", children: previewSection })] }, "split"),
         ] }));
 }

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

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Button, Checkbox, Container, Heading, Input, Row, Section, Select, Stack, Text, Textarea, } from "../../../ui";
+import { FieldInput, FormShellContext, useFormShellState } from "../../../ui/forms";
 import { BundleItemsPicker, defaultBundleItemsFetch, } from "../../categories/components/BundleItemsPicker";
 import { BundleDynamicRuleEditor } from "../../categories/components/BundleDynamicRuleEditor";
 import { BUNDLE_COPY } from "../../../_internal/shared/features/categories/bundle-copy";
@@ -76,8 +77,9 @@ export function AdminBundleEditorView({ bundleId, onSaved, onDeleted, }) {
     const [loading, setLoading] = useState(isEdit);
     const [saving, setSaving] = useState(false);
     const [deleting, setDeleting] = useState(false);
-    const [error, setError] = useState(null);
+    const [apiError, setApiError] = useState(null);
     const [metadata, setMetadata] = useState({});
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState();
     // Load existing bundle on mount when editing
     useEffect(() => {
         if (!bundleId)
@@ -97,7 +99,7 @@ export function AdminBundleEditorView({ bundleId, onSaved, onDeleted, }) {
             .catch((err) => {
             if (cancelled)
                 return;
-            setError(err instanceof Error
+            setApiError(err instanceof Error
                 ? err.message
                 : BUNDLE_COPY.adminEditor.errors.loadFailed);
         })
@@ -110,16 +112,20 @@ export function AdminBundleEditorView({ bundleId, onSaved, onDeleted, }) {
         };
     }, [bundleId]);
     const handleSave = useCallback(async () => {
-        setError(null);
+        clearErrors();
+        setApiError(null);
         const priceInPaise = parsePriceRupees(form.priceRupees);
+        let hasError = false;
         if (!form.name.trim()) {
-            setError(BUNDLE_COPY.adminEditor.errors.nameRequired);
-            return;
+            setFieldError("name", BUNDLE_COPY.adminEditor.errors.nameRequired);
+            hasError = true;
         }
         if (priceInPaise === null) {
-            setError(BUNDLE_COPY.adminEditor.errors.priceInvalid);
-            return;
+            setFieldError("price", BUNDLE_COPY.adminEditor.errors.priceInvalid);
+            hasError = true;
         }
+        if (hasError)
+            return;
         setSaving(true);
         try {
             // SB-UNI-5 2026-05-13 — static vs dynamic rule branching.
@@ -171,14 +177,14 @@ export function AdminBundleEditorView({ bundleId, onSaved, onDeleted, }) {
             }
         }
         catch (err) {
-            setError(err instanceof Error
+            setApiError(err instanceof Error
                 ? err.message
                 : BUNDLE_COPY.adminEditor.errors.saveFailed);
         }
         finally {
             setSaving(false);
         }
-    }, [form, bundleId, isEdit, onSaved]);
+    }, [form, bundleId, isEdit, onSaved, clearErrors, setFieldError]);
     const handleDelete = useCallback(async () => {
         if (!bundleId)
             return;
@@ -186,7 +192,7 @@ export function AdminBundleEditorView({ bundleId, onSaved, onDeleted, }) {
             return;
         }
         setDeleting(true);
-        setError(null);
+        setApiError(null);
         try {
             const res = await fetch(`/api/admin/bundles/${encodeURIComponent(bundleId)}`, { method: "DELETE" });
             if (!res.ok)
@@ -194,7 +200,7 @@ export function AdminBundleEditorView({ bundleId, onSaved, onDeleted, }) {
             onDeleted?.();
         }
         catch (err) {
-            setError(err instanceof Error
+            setApiError(err instanceof Error
                 ? err.message
                 : BUNDLE_COPY.adminEditor.errors.deleteFailed);
         }
@@ -206,7 +212,7 @@ export function AdminBundleEditorView({ bundleId, onSaved, onDeleted, }) {
     if (loading) {
         return (_jsx(Section, { className: "py-10", children: _jsx(Container, { size: "lg", children: _jsx(Text, { children: BUNDLE_COPY.adminEditor.loading }) }) }));
     }
-    return (_jsx(Section, { className: "py-10", children: _jsx(Container, { size: "lg", children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", className: "flex-wrap", children: [_jsx(Heading, { level: 1, className: "text-2xl font-semibold text-zinc-900 dark:text-zinc-100", children: isEdit
-                                    ? BUNDLE_COPY.adminEditorTitleEdit
-                                    : BUNDLE_COPY.adminEditorTitleNew }), isEdit && (_jsx(Button, { variant: "danger", onClick: handleDelete, disabled: deleting, children: BUNDLE_COPY.adminEditor.deleteButton(deleting) }))] }), error && (_jsx(Text, { color: "danger", role: "alert", children: error })), _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.fields.nameLabel }), _jsx(Input, { type: "text", value: form.name, onChange: (e) => setForm((f) => ({ ...f, name: e.target.value })), placeholder: BUNDLE_COPY.adminEditor.fields.namePlaceholder, disabled: saving })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.fields.descriptionLabel }), _jsx(Textarea, { value: form.description, onChange: (e) => setForm((f) => ({ ...f, description: e.target.value })), placeholder: BUNDLE_COPY.adminEditor.fields.descriptionPlaceholder, rows: 4, disabled: saving })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.fields.priceLabel }), _jsx(Input, { type: "number", inputMode: "decimal", min: 1, step: 1, value: form.priceRupees, onChange: (e) => setForm((f) => ({ ...f, priceRupees: e.target.value })), placeholder: BUNDLE_COPY.adminEditor.fields.pricePlaceholder, disabled: saving }), _jsx(Text, { size: "xs", color: "muted", children: BUNDLE_COPY.adminEditor.fields.pricePaiseHint(parsePriceRupees(form.priceRupees)) })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.fields.coverImageLabel }), _jsx(Input, { type: "url", value: form.coverImage, onChange: (e) => setForm((f) => ({ ...f, coverImage: e.target.value })), placeholder: "https://\u2026", disabled: saving })] }), _jsx(Checkbox, { checked: form.isActive, onChange: (e) => setForm((f) => ({ ...f, isActive: e.target.checked })), disabled: saving, label: BUNDLE_COPY.adminEditor.fields.activeLabel }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.ruleTypeLabel }), _jsx(Select, { options: RULE_TYPE_OPTIONS, value: form.ruleType, onValueChange: (next) => setForm((f) => ({ ...f, ruleType: next })), disabled: saving, "aria-label": BUNDLE_COPY.adminEditor.ruleTypeLabel })] }), form.ruleType === "static" ? (_jsx(BundleItemsPicker, { value: form.productIds, onChange: (next) => setForm((f) => ({ ...f, productIds: next })), fetchProducts: fetchProducts, initialMetadata: metadata })) : (_jsx(BundleDynamicRuleEditor, { value: form.dynamicRule, onChange: (next) => setForm((f) => ({ ...f, dynamicRule: next })), disabled: saving }))] }), _jsx(Row, { gap: "sm", align: "center", justify: "end", children: _jsx(Button, { variant: "primary", onClick: handleSave, disabled: saving, "aria-busy": saving, children: BUNDLE_COPY.adminEditor.saveButton(saving, isEdit) }) })] }) }) }));
+    return (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsx(Section, { className: "py-10", children: _jsx(Container, { size: "lg", children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", className: "flex-wrap", children: [_jsx(Heading, { level: 1, className: "text-2xl font-semibold text-zinc-900 dark:text-zinc-100", children: isEdit
+                                        ? BUNDLE_COPY.adminEditorTitleEdit
+                                        : BUNDLE_COPY.adminEditorTitleNew }), isEdit && (_jsx(Button, { variant: "danger", onClick: handleDelete, disabled: deleting, children: BUNDLE_COPY.adminEditor.deleteButton(deleting) }))] }), apiError && (_jsx(Text, { color: "danger", role: "alert", children: apiError })), _jsxs(Stack, { gap: "md", children: [_jsx(FieldInput, { name: "name", label: BUNDLE_COPY.adminEditor.fields.nameLabel, value: form.name, onChange: (v) => setForm((f) => ({ ...f, name: v })), placeholder: BUNDLE_COPY.adminEditor.fields.namePlaceholder, disabled: saving, required: true }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.fields.descriptionLabel }), _jsx(Textarea, { value: form.description, onChange: (e) => setForm((f) => ({ ...f, description: e.target.value })), placeholder: BUNDLE_COPY.adminEditor.fields.descriptionPlaceholder, rows: 4, disabled: saving })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(FieldInput, { name: "price", label: BUNDLE_COPY.adminEditor.fields.priceLabel, type: "number", inputMode: "decimal", min: 1, step: 1, value: form.priceRupees, onChange: (v) => setForm((f) => ({ ...f, priceRupees: v })), placeholder: BUNDLE_COPY.adminEditor.fields.pricePlaceholder, disabled: saving, required: true }), _jsx(Text, { size: "xs", color: "muted", children: BUNDLE_COPY.adminEditor.fields.pricePaiseHint(parsePriceRupees(form.priceRupees)) })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.fields.coverImageLabel }), _jsx(Input, { type: "url", value: form.coverImage, onChange: (e) => setForm((f) => ({ ...f, coverImage: e.target.value })), placeholder: "https://\u2026", disabled: saving })] }), _jsx(Checkbox, { checked: form.isActive, onChange: (e) => setForm((f) => ({ ...f, isActive: e.target.checked })), disabled: saving, label: BUNDLE_COPY.adminEditor.fields.activeLabel }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.ruleTypeLabel }), _jsx(Select, { options: RULE_TYPE_OPTIONS, value: form.ruleType, onValueChange: (next) => setForm((f) => ({ ...f, ruleType: next })), disabled: saving, "aria-label": BUNDLE_COPY.adminEditor.ruleTypeLabel })] }), form.ruleType === "static" ? (_jsx(BundleItemsPicker, { value: form.productIds, onChange: (next) => setForm((f) => ({ ...f, productIds: next })), fetchProducts: fetchProducts, initialMetadata: metadata })) : (_jsx(BundleDynamicRuleEditor, { value: form.dynamicRule, onChange: (next) => setForm((f) => ({ ...f, dynamicRule: next })), disabled: saving }))] }), _jsx(Row, { gap: "sm", align: "center", justify: "end", children: _jsx(Button, { variant: "primary", onClick: handleSave, disabled: saving, "aria-busy": saving, children: BUNDLE_COPY.adminEditor.saveButton(saving, isEdit) }) })] }) }) }) }));
 }

package/dist/features/admin/components/AdminBundlesView.d.ts

@@ -1,9 +1,7 @@
 export interface AdminBundlesViewProps {
-    /** Builds the href for the row-click edit action. */
     getEditHref: (row: {
         id: string;
     }) => string;
-    /** Builds the href for the "New bundle" CTA. */
     newHref: string;
 }
-export declare function AdminBundlesView({ getEditHref, newHref, }: AdminBundlesViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminBundlesView({ getEditHref, newHref }: AdminBundlesViewProps): import("react/jsx-runtime").JSX.Element;