@mohasinac/appkit 4.70.0 → 4.71.2

package/dist/features/about/components/PolicyPageView.js

@@ -11,6 +11,34 @@ import { Section } from "../../../ui/components/Semantic.js";
 import { Stack } from "../../../ui/components/Layout.js";
 import { TextLink } from "../../../ui/components/TextLink.js";
 import { siteSettingsRepository } from "../../admin/repository/site-settings.repository.js";
+import { getCompositeSentence } from "../../../_internal/shared/content/composite-sentences/index.js";
+import { getFragmentedParagraph } from "../../../_internal/shared/content/fragmented-paragraphs/index.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
+/**
+ * The numbered "step 1 → step N" card list six of the seven how-X-works
+ * guides each hand-rolled as their own `renderXStepsSection` — same circle
+ * icon, same number-dot title, same secondary description, differing only in
+ * the data. Lifted here verbatim (not generalised further) once a seventh
+ * near-identical copy made the duplication the thing worth fixing.
+ *
+ * Deliberately NOT wired into `PolicyPageViewProps` as a positioned slot —
+ * guide pages differ in WHERE this sits relative to their other content
+ * (EMI's eligibility alert has to come before it, everyone else's doesn't),
+ * so this is a plain composable export a caller places inside `children`
+ * wherever its own order requires, same as `FlowDiagram` already is.
+ */
+export function PolicySteps({ title, items }) {
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8", align: "center", children: title }), _jsx(Stack, { gap: "5", children: items.map(({ number, icon, title: stepTitle, text }) => (_jsxs(Row, { className: "p-[var(--appkit-space-5)]", border: "default", surface: "muted", align: "start", gap: "md", rounded: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: "flex-shrink-0 w-10 h-10 bg-primary/10 dark:bg-primary/15", rounded: "full", children: icon }), _jsxs(Div, { children: [_jsxs(Text, { className: "mb-0.5", weight: "semibold", children: [number, ". ", stepTitle] }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: text })] })] }, number))) })] }));
+}
+/**
+ * The centered, bordered "browse more / related guide" panel every one of
+ * the seven how-X-works guides ends on — each had its own byte-for-byte
+ * `renderXCtaSection` differing only in copy and links. Lifted here verbatim
+ * for the same reason as `PolicySteps` above.
+ */
+export function PolicyCta({ title, text, primary, secondary }) {
+    return (_jsxs(Section, { className: "p-[var(--appkit-space-8)] text-center", border: "default", surface: "subtle", rounded: "2xl", children: [_jsx(Heading, { level: 2, className: "mb-3", children: title }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: text }), _jsxs(Row, { align: "center", justify: "center", gap: "md", wrap: true, children: [_jsx(TextLink, { href: primary.href, children: primary.label }), secondary && (_jsx(TextLink, { href: secondary.href, variant: "muted", children: secondary.label }))] })] }));
+}
 /**
  * Single source of truth for every policy page this shell can render.
  *
@@ -76,15 +104,30 @@ const POLICY_META = {
     },
 };
 const POLICY_KEYS = Object.keys(POLICY_META);
-export async function PolicyPageView({ policy, children, }) {
+export async function PolicyPageView({ policy, pageId, pageRegionCards = [], children, title, subtitle, containerSize, }) {
     const page = { container: PAGE_CONTAINER };
+    /*
+     * Guide mode — no `policy`, so none of the i18n/admin-HTML-override/
+     * related-policies machinery below applies. This is the shell every
+     * how-X-works guide used to hand-roll (identical negative-margin wrapper,
+     * identical `ProseHero` call with no overrides, identical
+     * `AdminComposableRegion` mount) — lifted here so it is ONE copy instead
+     * of eight. Everything from the `meta = POLICY_META[policy]` line down is
+     * the original policy-mode implementation, untouched.
+     */
+    if (!policy) {
+        const size = containerSize ?? "md";
+        return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { title: title, subtitle: subtitle }), _jsxs(Stack, { gap: "14", className: `${page.container[size]}`, padding: "content-banner", children: [_jsx(AdminComposableRegion, { pageId: pageId, initialCards: pageRegionCards }), children] })] }));
+    }
     const meta = POLICY_META[policy];
-    const { getTranslations } = await import("next-intl/server");
+    const { getTranslations, getLocale } = await import("next-intl/server");
     const t = await getTranslations(meta.namespace);
+    const locale = await getLocale();
     // Check Firestore for admin-overridden HTML content
     let adminHtml = "";
+    let settings;
     try {
-        const settings = await siteSettingsRepository.getSingleton();
+        settings = await siteSettingsRepository.getSingleton();
         adminHtml = settings.legalPages?.[meta.firestoreField] ?? "";
     }
     catch (_err) {
@@ -101,13 +144,29 @@ export async function PolicyPageView({ policy, children, }) {
     // i18n fallback sections
     const rawSections = t.raw("sections");
     const sections = Array.isArray(rawSections) ? rawSections : [];
+    /*
+     * 1A-ii composite-sentence cascade — `cancellationPolicy`'s section 3
+     * heading names collector-drop/pre-order/clearance inline ("Collector
+     * Drops, pre-orders and prize draws"). Overridden here rather than left as
+     * static i18n so disabling one of those types drops it from the heading,
+     * same as everywhere else this mechanism applies. Scoped to this one
+     * (policy, index) pair deliberately — the OTHER 7 policy pages' sections
+     * are plain single-topic prose with nothing to cascade.
+     */
+    if (policy === "cancellation" && sections[3]) {
+        sections[3] = {
+            ...sections[3],
+            heading: getCompositeSentence("cancellationPolicy.sections.3.heading", locale, settings),
+            body: getFragmentedParagraph("cancellationPolicy.sections.3.body", locale, settings),
+        };
+    }
     // Derived from POLICY_META, so a newly added policy appears in every other
     // page's related list automatically and can never link to itself.
     const relatedLinks = POLICY_KEYS.filter((key) => key !== policy).map((key) => ({
         label: t(POLICY_META[key].relatedLabelKey),
         href: POLICY_META[key].path,
     }));
-    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { width: "sm", centered: false, subtitleSize: "sm", title: t("title"), subtitle: t("lastUpdated") }), _jsxs(Div, { className: `${page.container.sm}`, padding: "content-banner", children: [adminHtml ? (
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { width: "sm", centered: false, subtitleSize: "sm", title: t("title"), subtitle: t("lastUpdated") }), _jsxs(Div, { className: `${page.container.sm}`, padding: "content-banner", children: [_jsx(AdminComposableRegion, { pageId: pageId, initialCards: pageRegionCards }), adminHtml ? (
                     /* Admin-set HTML takes priority */
                     _jsx(Div, { className: "prose max-w-none", dangerouslySetInnerHTML: { __html: adminHtml } })) : (_jsxs(_Fragment, { children: [t.has("intro") && (_jsx(Text, { variant: "secondary", className: "mb-10 leading-relaxed", size: "base", children: t("intro") })), _jsx(Stack, { gap: "xl", children: sections.map((section, i) => (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-3", children: section.heading }), _jsx(Text, { variant: "secondary", className: "leading-relaxed whitespace-pre-line", children: section.body })] }, i))) }), children] })), relatedLinks.length > 0 && (_jsxs(Div, { className: `mt-14 border-t`, border: "default", padding: "t-xl", children: [_jsx(Heading, { level: 3, className: "mb-3 uppercase tracking-wide", color: "muted", size: "sm", weight: "semibold", children: t("relatedTitle") }), _jsx(Row, { wrap: true, gap: "md", children: relatedLinks.map((l) => (_jsx(TextLink, { href: l.href, variant: "muted", size: "sm", children: l.label }, l.href))) })] }))] })] }));
 }

package/dist/features/about/components/PublicProfileView.d.ts

@@ -1,3 +1,4 @@
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface PublicProfileViewProps {
     userId: string;
     /**
@@ -7,5 +8,14 @@ export interface PublicProfileViewProps {
      * or unrecognized.
      */
     tab?: string;
+    /**
+     * Stable, hand-chosen page-region id (Phase 12) — this one view is shared
+     * by three distinct routes (`/profile/[userId]`, `/profile/[userId]/[tab]`,
+     * `/sellers/[id]`), so every caller computes its own route-template-derived
+     * id rather than this component guessing one.
+     */
+    pageId: string;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function PublicProfileView({ userId, tab, }: PublicProfileViewProps): Promise<import("react").JSX.Element>;
+export declare function PublicProfileView({ userId, tab, pageId, pageRegionCards, }: PublicProfileViewProps): Promise<import("react").JSX.Element>;

package/dist/features/about/components/PublicProfileView.js

@@ -13,7 +13,7 @@ import { Grid, Row, Stack } from "../../../ui/components/Layout.js";
 import { Heading, Span, Text } from "../../../ui/components/Typography.js";
 import { Section } from "../../../ui/components/Semantic.js";
 import { TextLink } from "../../../ui/components/TextLink.js";
-import { MediaImage } from "../../media/MediaImage.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
 import { ProductCard } from "../../products/components/ProductGrid.js";
 import { ReviewCard } from "../../reviews/components/ReviewsList.js";
 import { PublicCatalogueView } from "../../catalogue/components/PublicCatalogueView.js";
@@ -22,6 +22,7 @@ import { normalizeListingType } from "../../products/utils/listing-type.js";
 import { isAdminUser, isSellerUser } from "../../auth/role-predicates.js";
 import { User, Star, ShoppingBag, Package, Trophy, Globe, MapPin, ExternalLink } from "lucide-react";
 import { OwnerQuickActions } from "../../admin/components/OwnerQuickActions.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
     p6: "p-[var(--appkit-space-6)]",
@@ -72,7 +73,7 @@ function toProductItem(p) {
 function getProductHref(p) {
     return pluginFor(normalizeListingType(p)).detailRoute(p.id);
 }
-export async function PublicProfileView({ userId, tab, }) {
+export async function PublicProfileView({ userId, tab, pageId, pageRegionCards = [], }) {
     const page = { container: PAGE_CONTAINER };
     const flex = { center: FLEX_CENTER };
     const { getTranslations } = await import("next-intl/server");
@@ -118,28 +119,28 @@ export async function PublicProfileView({ userId, tab, }) {
     const listingCount = products.length;
     const reviewCount = reviewsAuthored.length + reviewsReceivedAsBuyer.length;
     const itemsSold = stats?.itemsSold ?? 0;
-    const auctionsWon = stats?.auctionsWon ?? 0;
+    const collectorDropsWon = stats?.collectorDropsWon ?? 0;
     const totalOrders = stats?.totalOrders ?? 0;
     const storeSlug = profile?.storeSlug;
     const storeName = store?.storeName ?? pub?.storeName ?? displayName;
     const storeDescription = store?.storeDescription ?? pub?.storeDescription;
     const profileHeroCtx = { displayName, photoURL, memberSince, isSeller, storeSlug, flex, page };
-    const statItems = buildProfileStatItems(t, { listingCount, reviewCount, itemsSold, auctionsWon, totalOrders, isSeller });
+    const statItems = buildProfileStatItems(t, { listingCount, reviewCount, itemsSold, collectorDropsWon, totalOrders, isSeller });
     const activeTab = tab === "catalogue" ? "catalogue" : "overview";
-    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [renderProfileHero(t, profileHeroCtx), _jsxs(Stack, { gap: "2xl", className: `${page.container.md}`, paddingY: "y-3xl", children: [_jsx(Row, { justify: "end", children: _jsx(OwnerQuickActions, { resource: "USER", placement: "detail", recordLabel: displayName, editHref: String(ROUTES.ADMIN.USER_EDIT(userId)) }) }), _jsxs(Row, { gap: "md", padding: "t-xs", border: "bottom", children: [_jsx(TextLink, { href: `/profile/${userId}/overview`, variant: activeTab === "overview" ? "default" : "muted", weight: activeTab === "overview" ? "semibold" : "normal", children: "Overview" }), _jsx(TextLink, { href: `/profile/${userId}/catalogue`, variant: activeTab === "catalogue" ? "default" : "muted", weight: activeTab === "catalogue" ? "semibold" : "normal", children: "Catalogue" })] }), activeTab === "catalogue" ? (_jsx(PublicCatalogueView, { ownerSlug: userId })) : (_jsxs(_Fragment, { children: [renderProfileStatsRow(flex, statItems), renderProfileBioSection(pub), renderStoreDescriptionSection(isSeller, storeSlug ?? null, storeDescription ?? null, storeName, t), renderProfileListingsSection(t, products, storeSlug ?? null), renderAuthoredReviewsSection(t, reviewsAuthored, displayName), reviewsReceivedAsBuyer.length > 0 && renderBuyerReceivedReviewsSection(t, reviewsReceivedAsBuyer)] })), _jsx(Row, { justify: "center", padding: "t-xs", children: _jsxs(Link, { href: String(ROUTES.HOME), className: "text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-faint)] hover:text-[var(--appkit-color-text-muted)]", children: ["\u2190 ", t("backHome")] }) })] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [renderProfileHero(t, profileHeroCtx), _jsxs(Stack, { gap: "2xl", className: `${page.container.md}`, paddingY: "y-3xl", children: [_jsx(AdminComposableRegion, { pageId: pageId, initialCards: pageRegionCards }), _jsx(Row, { justify: "end", children: _jsx(OwnerQuickActions, { resource: "USER", placement: "detail", recordLabel: displayName, editHref: String(ROUTES.ADMIN.USER_EDIT(userId)) }) }), _jsxs(Row, { gap: "md", padding: "t-xs", border: "bottom", children: [_jsx(TextLink, { href: `/profile/${userId}/overview`, variant: activeTab === "overview" ? "default" : "muted", weight: activeTab === "overview" ? "semibold" : "normal", children: "Overview" }), _jsx(TextLink, { href: `/profile/${userId}/catalogue`, variant: activeTab === "catalogue" ? "default" : "muted", weight: activeTab === "catalogue" ? "semibold" : "normal", children: "Catalogue" })] }), activeTab === "catalogue" ? (_jsx(PublicCatalogueView, { ownerSlug: userId })) : (_jsxs(_Fragment, { children: [renderProfileStatsRow(flex, statItems), renderProfileBioSection(pub), renderStoreDescriptionSection(isSeller, storeSlug ?? null, storeDescription ?? null, storeName, t), renderProfileListingsSection(t, products, storeSlug ?? null), renderAuthoredReviewsSection(t, reviewsAuthored, displayName), reviewsReceivedAsBuyer.length > 0 && renderBuyerReceivedReviewsSection(t, reviewsReceivedAsBuyer)] })), _jsx(Row, { justify: "center", padding: "t-xs", children: _jsxs(Link, { href: String(ROUTES.HOME), className: "text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-faint)] hover:text-[var(--appkit-color-text-muted)]", children: ["\u2190 ", t("backHome")] }) })] })] }));
 }
 function buildProfileStatItems(t, ctx) {
-    const { listingCount, reviewCount, itemsSold, auctionsWon, totalOrders, isSeller } = ctx;
+    const { listingCount, reviewCount, itemsSold, collectorDropsWon, totalOrders, isSeller } = ctx;
     return [
         { icon: ShoppingBag, label: t("statListings"), value: String(listingCount) },
         { icon: Star, label: t("statReviews"), value: String(reviewCount) },
         ...(isSeller
             ? [
                 { icon: Package, label: t("statSold"), value: String(itemsSold) },
-                { icon: Trophy, label: t("statAuctions"), value: String(auctionsWon) },
+                { icon: Trophy, label: t("statCollectorDrops"), value: String(collectorDropsWon) },
             ]
             : [
-                { icon: Trophy, label: t("statAuctions"), value: String(auctionsWon) },
+                { icon: Trophy, label: t("statCollectorDrops"), value: String(collectorDropsWon) },
                 { icon: Package, label: t("statOrders"), value: String(totalOrders) },
             ]),
     ];

package/dist/features/about/components/SecurityPrivacyView.d.ts

@@ -1,3 +1,6 @@
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface SecurityPrivacyViewProps {
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function SecurityPrivacyView({}?: SecurityPrivacyViewProps): Promise<import("react").JSX.Element>;
+export declare function SecurityPrivacyView({ pageRegionCards, }?: SecurityPrivacyViewProps): Promise<import("react").JSX.Element>;

package/dist/features/about/components/SecurityPrivacyView.js

@@ -9,11 +9,12 @@ import { Row, Stack } from "../../../ui/components/Layout.js";
 import { Section } from "../../../ui/components/Semantic.js";
 import { TextLink } from "../../../ui/components/TextLink.js";
 import { Shield, Lock, Search, Globe, Database, KeyRound, FileText, Upload, ShieldCheck, Scale, } from "lucide-react";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const __P = {
     p5: "p-[var(--appkit-space-5)]",
     p8: "p-[var(--appkit-space-8)]",
 };
-export async function SecurityPrivacyView({} = {}) {
+export async function SecurityPrivacyView({ pageRegionCards = [], } = {}) {
     const page = { container: PAGE_CONTAINER };
     const { getTranslations } = await import("next-intl/server");
     const t = await getTranslations("securityPage");
@@ -126,7 +127,7 @@ export async function SecurityPrivacyView({} = {}) {
             desc: t("diagramStep5Desc"),
         },
     ];
-    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { title: t("title"), subtitle: t("subtitle") }), _jsxs(Stack, { gap: "14", className: `${page.container.md}`, padding: "content-banner", children: [_jsxs(Section, { className: "text-center", children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("overviewTitle") }), _jsx(Text, { variant: "secondary", className: "max-w-2xl mx-auto", children: t("overviewText") })] }), renderSecurityCardsSection(SECTIONS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🛡️ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsx(Text, { variant: "secondary", size: "sm", align: "center", children: t("lastUpdated") }), renderSecurityCtaSection(t)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { title: t("title"), subtitle: t("subtitle") }), _jsxs(Stack, { gap: "14", className: `${page.container.md}`, padding: "content-banner", children: [_jsx(AdminComposableRegion, { pageId: "security", initialCards: pageRegionCards }), _jsxs(Section, { className: "text-center", children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("overviewTitle") }), _jsx(Text, { variant: "secondary", className: "max-w-2xl mx-auto", children: t("overviewText") })] }), renderSecurityCardsSection(SECTIONS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🛡️ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsx(Text, { variant: "secondary", size: "sm", align: "center", children: t("lastUpdated") }), renderSecurityCtaSection(t)] })] }));
 }
 function renderSecurityCardsSection(cards) {
     return (_jsx(Section, { children: _jsx(Div, { layout: "grid", gap: "5", className: "md:grid-cols-2", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs(Div, { className: `border ${__P.p5} ${color}`, rounded: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: `w-10 h-10 mb-3`, surface: "default", rounded: "lg", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "mb-1", weight: "semibold", children: title }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: text })] }, title))) }) }));

package/dist/features/about/components/ShippingPolicyView.d.ts

@@ -1,3 +1,6 @@
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface ShippingPolicyViewProps {
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function ShippingPolicyView({}?: ShippingPolicyViewProps): Promise<import("react").JSX.Element>;
+export declare function ShippingPolicyView({ pageRegionCards, }?: ShippingPolicyViewProps): Promise<import("react").JSX.Element>;

package/dist/features/about/components/ShippingPolicyView.js

@@ -11,8 +11,9 @@ import { Section } from "../../../ui/components/Semantic.js";
 import { Stack } from "../../../ui/components/Layout.js";
 import { FlowDiagram } from "../../../ui/components/FlowDiagram.js";
 import { TextLink } from "../../../ui/components/TextLink.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const CLS_FOOTER_LINK = "text-sky-600 dark:text-sky-400 hover:underline";
-export async function ShippingPolicyView({} = {}) {
+export async function ShippingPolicyView({ pageRegionCards = [], } = {}) {
     const page = { container: PAGE_CONTAINER };
     const { getTranslations } = await import("next-intl/server");
     const t = await getTranslations("shippingPolicy");
@@ -50,7 +51,7 @@ export async function ShippingPolicyView({} = {}) {
         { title: t("standardTitle"), text: t("standardText") },
         { title: t("expressTitle"), text: t("expressText") },
         { title: t("freeShippingTitle"), text: t("freeShippingText") },
-        { title: t("auctionShippingTitle"), text: t("auctionShippingText") },
+        { title: t("collectorDropShippingTitle"), text: t("collectorDropShippingText") },
         { title: t("trackingTitle"), text: t("trackingText") },
         { title: t("internationalTitle"), text: t("internationalText") },
         { title: t("damagedTitle"), text: t("damagedText") },
@@ -92,7 +93,7 @@ export async function ShippingPolicyView({} = {}) {
             desc: t("diagramStatus5Desc"),
         },
     ];
-    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { width: "sm", centered: false, subtitleSize: "sm", title: t("title"), subtitle: t("lastUpdated") }), _jsxs(Div, { className: `${page.container.sm}`, padding: "content-banner", children: [adminHtml ? (
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { width: "sm", centered: false, subtitleSize: "sm", title: t("title"), subtitle: t("lastUpdated") }), _jsxs(Div, { className: `${page.container.sm}`, padding: "content-banner", children: [_jsx(AdminComposableRegion, { pageId: "shipping-policy", initialCards: pageRegionCards }), adminHtml ? (
                     /*
                       Admin-set HTML replaces the WHOLE body — subtitle, sections,
                       diagram and contact block — matching PolicyPageView's behaviour

package/dist/features/about/components/SpotAFakeView.d.ts

@@ -1,4 +1,7 @@
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface SpotAFakeViewProps {
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
 /**
  * D6 — the spot-a-fake guide.
@@ -26,4 +29,4 @@ export interface SpotAFakeViewProps {
  * weight" without somewhere to check it against would be advice shaped like
  * help, so each signal links to the surface that answers it.
  */
-export declare function SpotAFakeView({}?: SpotAFakeViewProps): Promise<import("react").JSX.Element>;
+export declare function SpotAFakeView({ pageRegionCards }?: SpotAFakeViewProps): Promise<import("react").JSX.Element>;

package/dist/features/about/components/SpotAFakeView.js

@@ -8,6 +8,7 @@ import { Heading, Text } from "../../../ui/components/Typography.js";
 import { Row, Stack } from "../../../ui/components/Layout.js";
 import { Section } from "../../../ui/components/Semantic.js";
 import { TextLink } from "../../../ui/components/TextLink.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const __P = {
     p5: "p-[var(--appkit-space-5)]",
 };
@@ -37,7 +38,7 @@ const __P = {
  * weight" without somewhere to check it against would be advice shaped like
  * help, so each signal links to the surface that answers it.
  */
-export async function SpotAFakeView({} = {}) {
+export async function SpotAFakeView({ pageRegionCards = [] } = {}) {
     const page = { container: PAGE_CONTAINER };
     const themed = { bgPrimary: THEMED_BG_PRIMARY, bgSecondary: THEMED_BG_SECONDARY };
     const { getTranslations } = await import("next-intl/server");
@@ -50,5 +51,5 @@ export async function SpotAFakeView({} = {}) {
         { n: 5, title: t("signal5Title"), text: t("signal5Text"), href: null },
         { n: 6, title: t("signal6Title"), text: t("signal6Text"), href: null },
     ];
-    return (_jsxs(Div, { children: [_jsx(Section, { className: themed.bgPrimary, padding: "y-2xl", children: _jsxs(Div, { className: page.container.lg, children: [_jsx(Heading, { level: 1, size: "3xl", mdSize: "4xl", weight: "bold", className: "mb-3", children: t("title") }), _jsx(Text, { size: "lg", color: "muted", className: "max-w-3xl", children: t("intro") })] }) }), _jsx(Section, { padding: "y-xl", children: _jsxs(Div, { className: page.container.lg, children: [_jsxs(Alert, { variant: "warning", className: "mb-8", children: [_jsx(Text, { weight: "semibold", children: t("whyTitle") }), _jsx(Text, { size: "sm", children: t("whyText") })] }), _jsx(Heading, { level: 2, size: "xl", weight: "semibold", className: "mb-4", children: t("signalsTitle") }), _jsx(Stack, { gap: "md", children: SIGNALS.map((s) => (_jsxs(Div, { className: __P.p5, surface: "card", rounded: "xl", border: "subtle", children: [_jsx(Heading, { level: 3, size: "lg", weight: "semibold", className: "mb-1", children: `${s.n}. ${s.title}` }), _jsx(Text, { color: "muted", children: s.text }), s.href && (_jsx(Div, { padding: "t-xs", children: _jsx(TextLink, { href: s.href, size: "sm", children: s.n === 1 ? t("linkTools") : t("linkParts") }) }))] }, s.n))) })] }) }), _jsx(Section, { className: themed.bgSecondary, padding: "y-xl", children: _jsx(Div, { className: page.container.lg, children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Div, { className: __P.p5, surface: "card", rounded: "xl", border: "subtle", children: [_jsx(Heading, { level: 3, size: "lg", weight: "semibold", className: "mb-2", children: t("authenticityTitle") }), _jsx(Text, { color: "muted", children: t("authenticityText") })] }), _jsxs(Div, { className: __P.p5, surface: "card", rounded: "xl", border: "subtle", children: [_jsx(Heading, { level: 3, size: "lg", weight: "semibold", className: "mb-2", children: t("reportTitle") }), _jsx(Text, { color: "muted", children: t("reportText") }), _jsxs(Row, { gap: "md", wrap: true, className: "mt-3", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.REPORT_ENTITY), children: t("linkReport") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.SCAMS), children: t("linkScams") })] })] })] }) }) })] }));
+    return (_jsxs(Div, { children: [_jsx(Section, { className: themed.bgPrimary, padding: "y-2xl", children: _jsxs(Div, { className: page.container.lg, children: [_jsx(Heading, { level: 1, size: "3xl", mdSize: "4xl", weight: "bold", className: "mb-3", children: t("title") }), _jsx(Text, { size: "lg", color: "muted", className: "max-w-3xl", children: t("intro") })] }) }), _jsx(Section, { padding: "y-lg", children: _jsx(Div, { className: page.container.lg, children: _jsx(AdminComposableRegion, { pageId: "spot-a-fake", initialCards: pageRegionCards }) }) }), _jsx(Section, { padding: "y-xl", children: _jsxs(Div, { className: page.container.lg, children: [_jsxs(Alert, { variant: "warning", className: "mb-8", children: [_jsx(Text, { weight: "semibold", children: t("whyTitle") }), _jsx(Text, { size: "sm", children: t("whyText") })] }), _jsx(Heading, { level: 2, size: "xl", weight: "semibold", className: "mb-4", children: t("signalsTitle") }), _jsx(Stack, { gap: "md", children: SIGNALS.map((s) => (_jsxs(Div, { className: __P.p5, surface: "card", rounded: "xl", border: "subtle", children: [_jsx(Heading, { level: 3, size: "lg", weight: "semibold", className: "mb-1", children: `${s.n}. ${s.title}` }), _jsx(Text, { color: "muted", children: s.text }), s.href && (_jsx(Div, { padding: "t-xs", children: _jsx(TextLink, { href: s.href, size: "sm", children: s.n === 1 ? t("linkTools") : t("linkParts") }) }))] }, s.n))) })] }) }), _jsx(Section, { className: themed.bgSecondary, padding: "y-xl", children: _jsx(Div, { className: page.container.lg, children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Div, { className: __P.p5, surface: "card", rounded: "xl", border: "subtle", children: [_jsx(Heading, { level: 3, size: "lg", weight: "semibold", className: "mb-2", children: t("authenticityTitle") }), _jsx(Text, { color: "muted", children: t("authenticityText") })] }), _jsxs(Div, { className: __P.p5, surface: "card", rounded: "xl", border: "subtle", children: [_jsx(Heading, { level: 3, size: "lg", weight: "semibold", className: "mb-2", children: t("reportTitle") }), _jsx(Text, { color: "muted", children: t("reportText") }), _jsxs(Row, { gap: "md", wrap: true, className: "mt-3", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.REPORT_ENTITY), children: t("linkReport") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.SCAMS), children: t("linkScams") })] })] })] }) }) })] }));
 }

package/dist/features/about/components/TrackOrderView.d.ts

@@ -1,3 +1,6 @@
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface TrackOrderViewProps {
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function TrackOrderView({}?: TrackOrderViewProps): Promise<import("react").JSX.Element>;
+export declare function TrackOrderView({ pageRegionCards, }?: TrackOrderViewProps): Promise<import("react").JSX.Element>;

package/dist/features/about/components/TrackOrderView.js

@@ -10,7 +10,8 @@ import { Grid, Stack } from "../../../ui/components/Layout.js";
 import { Section } from "../../../ui/components/Semantic.js";
 import { TextLink } from "../../../ui/components/TextLink.js";
 import { ShoppingBag, Truck, MapPin, CheckCircle2 } from "lucide-react";
-export async function TrackOrderView({} = {}) {
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
+export async function TrackOrderView({ pageRegionCards = [], } = {}) {
     const themed = {
         bgPrimary: THEMED_BG_PRIMARY,
         bgSecondary: THEMED_BG_SECONDARY,
@@ -51,5 +52,5 @@ export async function TrackOrderView({} = {}) {
             bg: "bg-emerald-100 dark:bg-emerald-900/40",
         },
     ];
-    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { width: "sm", title: t("title"), subtitle: t("subtitle") }), _jsx(Div, { className: page.container.md, padding: "y-4xl", children: _jsxs(Stack, { gap: "hero", children: [_jsxs(Section, { className: `text-center`, border: "default", surface: "subtle", rounded: "2xl", padding: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: `w-16 h-16 bg-primary/10 dark:bg-primary/15 mx-auto mb-4`, rounded: "full", children: _jsx(ShoppingBag, { className: "w-8 h-8 text-primary" }) }), _jsx(Heading, { level: 2, className: "mb-3", children: t("signInPrompt") }), _jsxs(Stack, { direction: "sm-row", justify: "center", className: "mt-6", gap: "3", children: [_jsx(TextLink, { rounded: "lg", paddingX: "xl", paddingY: "md", layout: "inline-flex", align: "center", justify: "center", gap: "sm", href: String(ROUTES.AUTH.LOGIN), className: `bg-primary hover:bg-primary/90 text-white transition-colors`, weight: "medium", children: t("signIn") }), _jsx(TextLink, { rounded: "lg", paddingX: "xl", paddingY: "md", layout: "inline-flex", align: "center", justify: "center", gap: "sm", href: String(ROUTES.USER.ORDERS), className: `${themed.bgPrimary} border ${themed.border} ${themed.textPrimary} hover:opacity-80 transition-opacity`, weight: "medium", children: t("viewOrders") })] })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-10", align: "center", children: t("howItWorksTitle") }), _jsx(Grid, { className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4", gap: "lg", children: STEPS.map(({ icon: Icon, title, text, color, bg }, index) => (_jsxs(Div, { rounded: "xl", padding: "lg", className: `${themed.bgSecondary} border ${themed.border} relative`, children: [_jsx(Caption, { className: "absolute top-4 right-4", weight: "bold", children: String(index + 1).padStart(2, "0") }), _jsx(Row, { align: "center", justify: "center", className: `w-12 h-12 ${bg} mb-4`, rounded: "xl", children: _jsx(Icon, { className: `w-6 h-6 ${color}` }) }), _jsx(Heading, { level: 3, className: "mb-2", children: title }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { layout: "flex-sm-row-between", gap: "md", border: "default", surface: "subtle", rounded: "xl", padding: "lg", children: [_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "mb-1", children: t("needHelpTitle") }), _jsx(Text, { variant: "secondary", size: "sm", children: t("needHelpText") })] }), _jsxs(Row, { gap: "3", className: "flex-shrink-0", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), className: `${themed.textSecondary} hover:text-primary underline underline-offset-4 transition-colors`, size: "sm", children: t("helpCenter") }), _jsx(TextLink, { rounded: "lg", paddingX: "md", paddingY: "xs", href: String(ROUTES.PUBLIC.CONTACT), className: "bg-primary hover:bg-primary/90 text-white transition-colors", size: "sm", children: t("contactSupport") })] })] })] }) })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { width: "sm", title: t("title"), subtitle: t("subtitle") }), _jsx(Div, { className: page.container.md, padding: "y-4xl", children: _jsxs(Stack, { gap: "hero", children: [_jsx(AdminComposableRegion, { pageId: "track", initialCards: pageRegionCards }), _jsxs(Section, { className: `text-center`, border: "default", surface: "subtle", rounded: "2xl", padding: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: `w-16 h-16 bg-primary/10 dark:bg-primary/15 mx-auto mb-4`, rounded: "full", children: _jsx(ShoppingBag, { className: "w-8 h-8 text-primary" }) }), _jsx(Heading, { level: 2, className: "mb-3", children: t("signInPrompt") }), _jsxs(Stack, { direction: "sm-row", justify: "center", className: "mt-6", gap: "3", children: [_jsx(TextLink, { rounded: "lg", paddingX: "xl", paddingY: "md", layout: "inline-flex", align: "center", justify: "center", gap: "sm", href: String(ROUTES.AUTH.LOGIN), className: `bg-primary hover:bg-primary/90 text-white transition-colors`, weight: "medium", children: t("signIn") }), _jsx(TextLink, { rounded: "lg", paddingX: "xl", paddingY: "md", layout: "inline-flex", align: "center", justify: "center", gap: "sm", href: String(ROUTES.USER.ORDERS), className: `${themed.bgPrimary} border ${themed.border} ${themed.textPrimary} hover:opacity-80 transition-opacity`, weight: "medium", children: t("viewOrders") })] })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-10", align: "center", children: t("howItWorksTitle") }), _jsx(Grid, { className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4", gap: "lg", children: STEPS.map(({ icon: Icon, title, text, color, bg }, index) => (_jsxs(Div, { rounded: "xl", padding: "lg", className: `${themed.bgSecondary} border ${themed.border} relative`, children: [_jsx(Caption, { className: "absolute top-4 right-4", weight: "bold", children: String(index + 1).padStart(2, "0") }), _jsx(Row, { align: "center", justify: "center", className: `w-12 h-12 ${bg} mb-4`, rounded: "xl", children: _jsx(Icon, { className: `w-6 h-6 ${color}` }) }), _jsx(Heading, { level: 3, className: "mb-2", children: title }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { layout: "flex-sm-row-between", gap: "md", border: "default", surface: "subtle", rounded: "xl", padding: "lg", children: [_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "mb-1", children: t("needHelpTitle") }), _jsx(Text, { variant: "secondary", size: "sm", children: t("needHelpText") })] }), _jsxs(Row, { gap: "3", className: "flex-shrink-0", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), className: `${themed.textSecondary} hover:text-primary underline underline-offset-4 transition-colors`, size: "sm", children: t("helpCenter") }), _jsx(TextLink, { rounded: "lg", paddingX: "md", paddingY: "xs", href: String(ROUTES.PUBLIC.CONTACT), className: "bg-primary hover:bg-primary/90 text-white transition-colors", size: "sm", children: t("contactSupport") })] })] })] }) })] }));
 }

package/dist/features/about/index.d.ts

@@ -29,8 +29,8 @@ export { FAQPageView } from "./components/FAQPageView";
 export type { FAQPageViewProps } from "./components/FAQPageView";
 export { HelpPageView } from "./components/HelpPageView";
 export type { HelpPageViewProps } from "./components/HelpPageView";
-export { HowAuctionsWorkView } from "./components/HowAuctionsWorkView";
-export type { HowAuctionsWorkViewProps } from "./components/HowAuctionsWorkView";
+export { HowCollectorDropsWorkView } from "./components/HowCollectorDropsWorkView";
+export type { HowCollectorDropsWorkViewProps } from "./components/HowCollectorDropsWorkView";
 export { HowPayoutsWorkView } from "./components/HowPayoutsWorkView";
 export type { HowPayoutsWorkViewProps } from "./components/HowPayoutsWorkView";
 export { HowPreOrdersWorkView } from "./components/HowPreOrdersWorkView";

package/dist/features/about/index.js

@@ -17,7 +17,7 @@ export { PolicyPageView } from "./components/PolicyPageView.js";
 export { DeveloperView } from "./components/DeveloperView.js";
 export { FAQPageView } from "./components/FAQPageView.js";
 export { HelpPageView } from "./components/HelpPageView.js";
-export { HowAuctionsWorkView } from "./components/HowAuctionsWorkView.js";
+export { HowCollectorDropsWorkView } from "./components/HowCollectorDropsWorkView.js";
 export { HowPayoutsWorkView } from "./components/HowPayoutsWorkView.js";
 export { HowPreOrdersWorkView } from "./components/HowPreOrdersWorkView.js";
 export { PublicProfileView } from "./components/PublicProfileView.js";

package/dist/features/about/schemas/index.d.ts

@@ -7,13 +7,13 @@ export declare const aboutHowItemSchema: z.ZodObject<{
     tone: z.ZodOptional<z.ZodEnum<["indigo", "teal", "amber", "rose"]>>;
 }, "strip", z.ZodTypeAny, {
     title: string;
-    icon: string;
     text: string;
+    icon: string;
     tone?: "indigo" | "teal" | "amber" | "rose" | undefined;
 }, {
     title: string;
-    icon: string;
     text: string;
+    icon: string;
     tone?: "indigo" | "teal" | "amber" | "rose" | undefined;
 }>;
 export declare const aboutValueItemSchema: z.ZodObject<{
@@ -22,12 +22,12 @@ export declare const aboutValueItemSchema: z.ZodObject<{
     icon: z.ZodString;
 }, "strip", z.ZodTypeAny, {
     title: string;
-    icon: string;
     text: string;
+    icon: string;
 }, {
     title: string;
-    icon: string;
     text: string;
+    icon: string;
 }>;
 export declare const aboutMilestoneSchema: z.ZodObject<{
     year: z.ZodString;
@@ -47,15 +47,15 @@ export declare const aboutTeamMemberSchema: z.ZodObject<{
     isFounder: z.ZodOptional<z.ZodBoolean>;
     isDeveloper: z.ZodOptional<z.ZodBoolean>;
 }, "strip", z.ZodTypeAny, {
-    name: string;
     role: string;
+    name: string;
     bio: string;
     photoUrl?: string | undefined;
     isFounder?: boolean | undefined;
     isDeveloper?: boolean | undefined;
 }, {
-    name: string;
     role: string;
+    name: string;
     bio: string;
     photoUrl?: string | undefined;
     isFounder?: boolean | undefined;
@@ -74,13 +74,13 @@ export declare const aboutContentSchema: z.ZodObject<{
         tone: z.ZodOptional<z.ZodEnum<["indigo", "teal", "amber", "rose"]>>;
     }, "strip", z.ZodTypeAny, {
         title: string;
-        icon: string;
         text: string;
+        icon: string;
         tone?: "indigo" | "teal" | "amber" | "rose" | undefined;
     }, {
         title: string;
-        icon: string;
         text: string;
+        icon: string;
         tone?: "indigo" | "teal" | "amber" | "rose" | undefined;
     }>, "many">;
     valuesTitle: z.ZodString;
@@ -90,12 +90,12 @@ export declare const aboutContentSchema: z.ZodObject<{
         icon: z.ZodString;
     }, "strip", z.ZodTypeAny, {
         title: string;
-        icon: string;
         text: string;
+        icon: string;
     }, {
         title: string;
-        icon: string;
         text: string;
+        icon: string;
     }>, "many">;
     milestonesTitle: z.ZodString;
     milestones: z.ZodArray<z.ZodObject<{
@@ -118,15 +118,15 @@ export declare const aboutContentSchema: z.ZodObject<{
         isFounder: z.ZodOptional<z.ZodBoolean>;
         isDeveloper: z.ZodOptional<z.ZodBoolean>;
     }, "strip", z.ZodTypeAny, {
-        name: string;
         role: string;
+        name: string;
         bio: string;
         photoUrl?: string | undefined;
         isFounder?: boolean | undefined;
         isDeveloper?: boolean | undefined;
     }, {
-        name: string;
         role: string;
+        name: string;
         bio: string;
         photoUrl?: string | undefined;
         isFounder?: boolean | undefined;
@@ -154,18 +154,18 @@ export declare const aboutContentSchema: z.ZodObject<{
     ctaShop: string;
     howItems: {
         title: string;
-        icon: string;
         text: string;
+        icon: string;
         tone?: "indigo" | "teal" | "amber" | "rose" | undefined;
     }[];
     valueItems: {
         title: string;
-        icon: string;
         text: string;
+        icon: string;
     }[];
     teamMembers: {
-        name: string;
         role: string;
+        name: string;
         bio: string;
         photoUrl?: string | undefined;
         isFounder?: boolean | undefined;
@@ -190,18 +190,18 @@ export declare const aboutContentSchema: z.ZodObject<{
     ctaShop: string;
     howItems: {
         title: string;
-        icon: string;
         text: string;
+        icon: string;
         tone?: "indigo" | "teal" | "amber" | "rose" | undefined;
     }[];
     valueItems: {
         title: string;
-        icon: string;
         text: string;
+        icon: string;
     }[];
     teamMembers: {
-        name: string;
         role: string;
+        name: string;
         bio: string;
         photoUrl?: string | undefined;
         isFounder?: boolean | undefined;

package/dist/features/account/components/AddressBook.d.ts

@@ -1,5 +1,5 @@
 import type { UserAddress } from "../types";
-import type { JsonValue } from "@mohasinac/appkit";
+import type { JsonValue } from "../../../schemas/types";
 export interface AddressCardAddress {
     id: string;
     label?: string;

package/dist/features/account/components/AddressForm.js

@@ -30,10 +30,21 @@ import { FormErrorSummary, applyZodIssues } from "../../../ui/forms/index.js";
 import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell.js";
 import { buildSectionsFromSchema, visibleValues } from "../../shell/build-sections.js";
 import { SectionForm, useSectionFormNav } from "../../shell/SectionForm.js";
+import { useFieldVisibility } from "../../shell/useFieldVisibility.js";
 import { addressFormSchema } from "../../addresses/schemas/address-form.js";
 import { usePostalLookup } from "../../addresses/hooks/usePostalLookup.js";
 import { AddressLocationFields } from "../../addresses/components/AddressLocationFields.js";
 import { COUNTRIES, DEFAULT_COUNTRY } from "../../../constants/geo/countries.js";
+import { useEditMode } from "../../../edit-mode/index.js";
+/**
+ * Admin field-visibility surface id (3B hard gate — PII-forms migration,
+ * 2026-11-05). One shared id, deliberately, matching this component's own
+ * "purely presentational, reused as-is" contract (see `StoreAddressClients`'s
+ * header comment) — buyer address book and seller pickup address are both
+ * this same component with no per-caller config today, so a per-caller
+ * surface id would contradict that existing design rather than extend it.
+ */
+const FIELD_VISIBILITY_SURFACE_ID = "address-form";
 const COUNTRY_OPTIONS = Object.values(COUNTRIES).map((c) => ({
     value: c.code,
     label: c.name,
@@ -66,21 +77,34 @@ export function AddressForm({ initialData, onSubmit, onCancel, isLoading = false
         })),
         enabled: !isLoading,
     });
+    const { editMode } = useEditMode();
+    const { fields: visibilityFields, setVisible: setFieldVisible } = useFieldVisibility(FIELD_VISIBILITY_SURFACE_ID);
     const sections = React.useMemo(() => buildSectionsFromSchema(addressFormSchema, {
         options: { country: COUNTRY_OPTIONS },
+        fieldVisibility: visibilityFields,
+        editMode,
+        onToggleFieldVisibility: setFieldVisible,
         renderers: {
             /*
              * State, postal code and country move together: the country decides
              * whether state is a picker or free text AND what a valid postal
              * code looks like, so one component owns all three rather than three
              * renderers each re-deriving the same country.
+             *
+             * 🛑 Hiding `state` via the admin field-visibility toggle hides this
+             * whole combined control — postal code and country included — since
+             * they render `null` on their own and have nothing to show
+             * independently. Toggling `postalCode`/`country` individually is
+             * therefore a no-op; `state` is the one toggle that does anything.
+             * Same property `StoreCreateForm`'s own proven wiring has for any
+             * multi-field custom renderer — not a new limitation.
              */
             state: ({ values, onChange, errors }) => (_jsx(AddressLocationFields, { country: values.country, state: values.state, postalCode: values.postalCode, errors: errors, isLooking: isLooking, onChange: onChange, onPostalSettled: lookup })),
             // Rendered by the component above.
             postalCode: () => null,
             country: () => null,
         },
-    }), [isLooking, lookup]);
+    }), [isLooking, lookup, visibilityFields, editMode, setFieldVisible]);
     const nav = useSectionFormNav(sections, form, { scope: "user:address" });
     const { shellCtx, setFieldError, clearErrors } = useFormShellState(addressFormSchema, {
         sections: nav.sectionMeta,

package/dist/features/account/components/BecomeSellerView.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface BecomeSellerViewLabels {
     title?: string;
     applyButton?: string;
@@ -24,5 +25,7 @@ export interface BecomeSellerViewProps {
     /** Which state to render. Shell exposes all four slots; consumer controls which is active. */
     state?: BecomeSellerState;
     className?: string;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function BecomeSellerView({ labels, renderGuide, renderSuccess, renderCreateStore, renderAlreadySeller, state, className, }: BecomeSellerViewProps): React.JSX.Element;
+export declare function BecomeSellerView({ labels, renderGuide, renderSuccess, renderCreateStore, renderAlreadySeller, state, className, pageRegionCards, }: BecomeSellerViewProps): React.JSX.Element;

package/dist/features/account/components/BecomeSellerView.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div } from "../../../ui/components/Div.js";
 import { Heading } from "../../../ui/components/Typography.js";
-export function BecomeSellerView({ labels = {}, renderGuide, renderSuccess, renderCreateStore, renderAlreadySeller, state = "guide", className = "", }) {
-    return (_jsxs(Div, { className: className, children: [labels.title && state === "guide" && (_jsx(Heading, { level: 1, className: "mb-6", size: "2xl", weight: "bold", children: labels.title })), state === "guide" && renderGuide?.(), state === "success" && renderSuccess?.(), state === "create-store" && renderCreateStore?.(), state === "already-seller" && renderAlreadySeller?.()] }));
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
+export function BecomeSellerView({ labels = {}, renderGuide, renderSuccess, renderCreateStore, renderAlreadySeller, state = "guide", className = "", pageRegionCards = [], }) {
+    return (_jsxs(Div, { className: className, children: [labels.title && state === "guide" && (_jsx(Heading, { level: 1, className: "mb-6", size: "2xl", weight: "bold", children: labels.title })), state === "guide" && renderGuide?.(), state === "success" && renderSuccess?.(), state === "create-store" && renderCreateStore?.(), state === "already-seller" && renderAlreadySeller?.(), _jsx(AdminComposableRegion, { pageId: "user-become-seller", initialCards: pageRegionCards })] }));
 }