@aglyn/plugins-marketplace 1.0.0-beta.143

package/src/lib/components/listing-content.component.js

@@ -0,0 +1,1880 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { LISTING_README_MAX_CHARS, listingArtifactType, installsUnreviewedFallback, listingArtifactLabel, listingInclusions, hasLivePurchaseOf, hasOrgLicenceOf, licensedOrgIdsFor, installTargetsFor, isListingDeleted, isPrivateListing, resolveInstallPlan, resolveOrgInstallSummary, resolvePluginInstallState, resolveUninstallTargets, safePublisherHref } from "../model/marketplace.js";
+import UninstallImpactDialog from "./uninstall-impact-dialog.component.js";
+import { ListingImage } from "./listing-image.component.js";
+import { buildRoute, parseMarkdownLite, PLATFORM_BRAND_NAME, offeredPluginVersion, PLUGIN_HOST_ABI_VERSION, pluginDocsHelp, resolveMarkdownLink, resolveMediaSrc, resolveUpdateState, Route, updateStateLabel } from "@aglyn/aglyn";
+import { mdiCheckCircle, mdiCheckCircleOutline, mdiEmailOutline, mdiGithub, mdiInformationOutline, mdiLifebuoy, mdiLinkedin, mdiStorefrontOutline, mdiTwitter, mdiWeb } from "@aglyn/shared-data-mdi";
+import { AppLink, CardDisplay, Container, GridItems, MdiIcon } from "@aglyn/shared-ui-jsx";
+import { NextPageTitle } from "@aglyn/shared-ui-next/contexts/next-page-title-provider";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { Alert, Avatar, Box, Button, Checkbox, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Divider, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, IconButton, Link as MuiLink, Rating, Stack, Tooltip, Typography } from "@mui/material";
+import { collection, doc, documentId, getDoc, limit, orderBy, query, where } from "firebase/firestore";
+import { useEffect, useMemo, useState } from "react";
+import { useConsoleHostRoute, useFirestore, useFirestoreCollection, useFirestoreDoc, useHostOrgId, useUser, useScopeTokens } from "@aglyn/tenant-feature-instance";
+/*
+ * The MODULE, not the barrel, for the two PURE helpers — the specs that render
+ * this page mock `@aglyn/tenant-feature-instance` wholesale to stage their
+ * Firestore hooks, and a query builder imported through that barrel disappears
+ * under the mock. Neither of these is a hook.
+ */ import { ceilingedWindow, collectionCeiling } from "@aglyn/tenant-feature-instance/hooks/host-collection-queries";
+import ListingReviews from "./listing-reviews.component.js";
+import ReportTarget from "./report-target.component.js";
+import PluginSiteSet from "./plugin-site-set.component.js";
+import { MenuItem, TextField } from "@mui/material";
+import { useMarketplaceActions } from "../hooks/use-marketplace-actions.js";
+import { useArtifactUpdate } from "../hooks/use-artifact-update.js";
+import ArtifactUpdateDialog from "./artifact-update-dialog.component.js";
+/**
+ * How many of the site's components the page reads to answer one question.
+ *
+ * A LOOKUP ceiling, not a list: nothing here renders these documents. It only
+ * has to be wide enough that a component install of this listing is inside it.
+ */ const COMPONENT_LOOKUP_CEILING = 100;
+/**
+ * How many of the buyer's purchase documents the page reads.
+ *
+ * Wider than the other lookups on purpose — see the query, which explains what
+ * a miss costs on the one panel that offers to take money.
+ */ const PURCHASE_LOOKUP_CEILING = 200;
+/**
+ * How many installs OF THIS LISTING the page reads per artifact type.
+ *
+ * Narrow because the query already is: both reads carry the listing id, so
+ * this bounds "how many times one workspace installed one thing" rather than a
+ * collection.
+ */ const ARTIFACT_INSTALL_CEILING = 20;
+const renderInlines = (inlines)=>inlines.map((inline, index)=>{
+        switch(inline.type){
+            case 'bold':
+                return /*#__PURE__*/ _jsx("strong", {
+                    children: inline.text
+                }, index);
+            case 'italic':
+                return /*#__PURE__*/ _jsx("em", {
+                    children: inline.text
+                }, index);
+            case 'link':
+                {
+                    /*
+          No routing map is passed, and that is the answer rather than an
+          omission (AGL-3118). A link REFERENCE names a screen, listing, entry
+          or feed of the SITE a document was written for; a listing README is
+          read in the console, which serves none of them, so a reference here
+          resolves to nothing and renders as its words — never as an anchor
+          holding `entry:…`.
+        */ const link = resolveMarkdownLink(inline.href);
+                    if (!('href' in link)) return /*#__PURE__*/ _jsx("span", {
+                        children: inline.text
+                    }, index);
+                    return /*#__PURE__*/ _jsx(MuiLink, {
+                        href: link.href,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        color: "primary",
+                        underline: "hover",
+                        children: inline.text
+                    }, index);
+                }
+            default:
+                return /*#__PURE__*/ _jsx("span", {
+                    children: inline.text
+                }, index);
+        }
+    });
+/**
+ * Publisher README (AGL-431), rendered through markdown-lite — the parser
+ * only ever emits text/bold/italic/http(s)-links/images, so publisher-
+ * written docs can't inject markup or javascript: URLs. Code blocks and
+ * tables carry text only (AGL-974); the same guarantee holds for both.
+ */ /**
+ * What changed between versions (AGL-976).
+ *
+ * The changelog was already collected per version and already returned by the
+ * versions endpoint, but the only place it appeared was a caption in the
+ * sidebar timeline — plain text, in a narrow column, next to a date. A buyer
+ * deciding whether to upgrade reads this, and publishers write it as ordinary
+ * markdown: a config note, a list of fixes, sometimes a fenced snippet.
+ *
+ * So it renders through the same markdown-lite path as the README, which
+ * gained code fences and tables in AGL-974 — and inherits the same safety
+ * posture: no raw HTML, `safeUrl` gating every link.
+ *
+ * APPROVED VERSIONS ONLY, and that is enforced server-side rather than here
+ * (AGL-976). A filter in the renderer would leave the same data leaking
+ * through the endpoint to anything else that reads it.
+ */ function ListingChangelog({ versions }) {
+    const entries = useMemo(()=>versions.filter((entry)=>{
+            var _entry_changelog;
+            return String((_entry_changelog = entry.changelog) != null ? _entry_changelog : '').trim();
+        }), [
+        versions
+    ]);
+    // Nothing to say is different from nothing to show: a listing whose
+    // publisher has never written a changelog should not get an empty card
+    // implying they withheld one.
+    if (!entries.length) return null;
+    return /*#__PURE__*/ _jsx(CardDisplay, {
+        header: 'Changelog',
+        help: pluginDocsHelp('publisherHandbook', {
+            anchor: '#versioning--updates'
+        }),
+        contentGutterX: true,
+        contentGutterY: true,
+        children: /*#__PURE__*/ _jsx(Stack, {
+            spacing: 2.5,
+            children: entries.map((entry, index)=>{
+                var _entry_changelog;
+                return /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 1,
+                    children: [
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            sx: {
+                                alignItems: 'center',
+                                flexWrap: 'wrap'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "subtitle2",
+                                    children: `v${entry.version}`
+                                }),
+                                index === 0 ? /*#__PURE__*/ _jsx(Chip, {
+                                    size: "small",
+                                    label: "Latest"
+                                }) : null,
+                                entry.trust === 'realm' ? /*#__PURE__*/ _jsx(Chip, {
+                                    size: "small",
+                                    color: "success",
+                                    label: "Realm-trusted"
+                                }) : null,
+                                entry.publishedAtMs ? /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: new Date(entry.publishedAtMs).toLocaleDateString()
+                                }) : null
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(ListingReadme, {
+                            readme: String((_entry_changelog = entry.changelog) != null ? _entry_changelog : '')
+                        }),
+                        index < entries.length - 1 ? /*#__PURE__*/ _jsx(Divider, {}) : null
+                    ]
+                }, entry.version);
+            })
+        })
+    });
+}
+// Exported for the renderer-parity spec (AGL-1315).
+export function ListingReadme({ readme }) {
+    const blocks = useMemo(()=>parseMarkdownLite(readme.slice(0, LISTING_README_MAX_CHARS)), [
+        readme
+    ]);
+    return /*#__PURE__*/ _jsx(Stack, {
+        spacing: 1.5,
+        children: blocks.map((block, index)=>{
+            switch(block.type){
+                case 'heading':
+                    return /*#__PURE__*/ _jsx(Typography, {
+                        variant: block.level === 2 ? 'h6' : 'subtitle1',
+                        children: renderInlines(block.inlines)
+                    }, index);
+                case 'image':
+                    return /*#__PURE__*/ _jsx(Box, {
+                        component: "img",
+                        // Resolved like `ListingImage` next door (AGL-1686). No
+                        // `hostId`: a listing belongs to a publishing ORG, not to a
+                        // site, so the scope the picker baked in is already the right
+                        // one and there is no rendering host to re-point it at.
+                        src: resolveMediaSrc(block.src),
+                        alt: block.alt,
+                        loading: "lazy",
+                        sx: {
+                            maxWidth: '100%',
+                            borderRadius: 1,
+                            border: 1,
+                            borderColor: 'divider'
+                        }
+                    }, index);
+                case 'list':
+                    return /*#__PURE__*/ _jsx(Stack, {
+                        component: "ul",
+                        spacing: 0.5,
+                        sx: {
+                            my: 0
+                        },
+                        children: block.items.map((item, itemIndex)=>/*#__PURE__*/ _jsx(Typography, {
+                                component: "li",
+                                variant: "body2",
+                                children: renderInlines(item)
+                            }, itemIndex))
+                    }, index);
+                // A README's install steps (AGL-1320) — a real `<ol>` carrying
+                // `start`, so step 4 of a continued run still reads as step 4.
+                case 'orderedList':
+                    return /*#__PURE__*/ _jsx(Stack, {
+                        component: "ol",
+                        start: block.start,
+                        spacing: 0.5,
+                        sx: {
+                            my: 0
+                        },
+                        children: block.items.map((item, itemIndex)=>/*#__PURE__*/ _jsx(Typography, {
+                                component: "li",
+                                variant: "body2",
+                                children: renderInlines(item)
+                            }, itemIndex))
+                    }, index);
+                // A README's example snippet (AGL-974). Scrolls rather than wraps —
+                // a wrapped command line reads as two commands.
+                case 'code':
+                    return /*#__PURE__*/ _jsx(Box, {
+                        component: "pre",
+                        sx: {
+                            my: 0,
+                            p: 1.5,
+                            overflowX: 'auto',
+                            borderRadius: 1,
+                            border: 1,
+                            borderColor: 'divider',
+                            bgcolor: 'action.hover',
+                            typography: 'body2',
+                            fontFamily: 'monospace'
+                        },
+                        children: /*#__PURE__*/ _jsx("code", {
+                            children: block.text
+                        })
+                    }, index);
+                // The config table (AGL-974) — the block a plugin README is
+                // mostly made of. Wrapped in its own scroller so a wide table
+                // never pushes the page sideways.
+                case 'table':
+                    return /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            overflowX: 'auto'
+                        },
+                        children: /*#__PURE__*/ _jsxs(Box, {
+                            component: "table",
+                            sx: {
+                                borderCollapse: 'collapse',
+                                width: '100%',
+                                '& th, & td': {
+                                    border: 1,
+                                    borderColor: 'divider',
+                                    px: 1,
+                                    py: 0.5
+                                },
+                                '& th': {
+                                    bgcolor: 'action.hover'
+                                }
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("thead", {
+                                    children: /*#__PURE__*/ _jsx("tr", {
+                                        children: block.header.map((cell, cellIndex)=>{
+                                            var _block_align_cellIndex;
+                                            return /*#__PURE__*/ _jsx(Typography, {
+                                                component: "th",
+                                                variant: "body2",
+                                                sx: {
+                                                    textAlign: (_block_align_cellIndex = block.align[cellIndex]) != null ? _block_align_cellIndex : 'left',
+                                                    fontWeight: 600
+                                                },
+                                                children: renderInlines(cell)
+                                            }, cellIndex);
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx("tbody", {
+                                    children: block.rows.map((row, rowIndex)=>/*#__PURE__*/ _jsx("tr", {
+                                            children: row.map((cell, cellIndex)=>{
+                                                var _block_align_cellIndex;
+                                                return /*#__PURE__*/ _jsx(Typography, {
+                                                    component: "td",
+                                                    variant: "body2",
+                                                    sx: {
+                                                        textAlign: (_block_align_cellIndex = block.align[cellIndex]) != null ? _block_align_cellIndex : 'left'
+                                                    },
+                                                    children: renderInlines(cell)
+                                                }, cellIndex);
+                                            })
+                                        }, rowIndex))
+                                })
+                            ]
+                        })
+                    }, index);
+                // A README quote (AGL-1315) — the surface's body size, italic
+                // behind a left accent in the theme's divider tone.
+                case 'quote':
+                    return /*#__PURE__*/ _jsx(Typography, {
+                        component: "blockquote",
+                        variant: "body2",
+                        sx: {
+                            my: 0,
+                            mx: 0,
+                            pl: 1.5,
+                            borderLeft: 3,
+                            borderColor: 'divider',
+                            fontStyle: 'italic',
+                            color: 'text.secondary'
+                        },
+                        children: renderInlines(block.inlines)
+                    }, index);
+                default:
+                    return /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        children: renderInlines(block.inlines)
+                    }, index);
+            }
+        })
+    });
+}
+/**
+ * Whether the detail page has nothing to show, so the zero state stands in
+ * for the listing (AGL-998).
+ *
+ * Existence is `$id`, which `useFirestoreDoc`'s `idField` stamps on every
+ * snapshot that exists and on none that does not. A listing FIELD cannot
+ * answer this question: browse asks nothing about a publisher, so gating on
+ * `profileId` takes a listing the grid is happily showing and 404s it the
+ * moment someone opens it (AGL-2700). Deletion is the shared predicate, for
+ * the reason its own docblock gives.
+ *
+ * `!== 'loading'` and not `=== 'success'` (AGL-1066): a refused read reaches
+ * 'error', and a listing page rendered over `undefined` is worse than the
+ * zero state this exists to show.
+ */ export function listingIsMissing(listing, status) {
+    if (status === 'loading') return false;
+    return !(listing == null ? void 0 : listing.$id) || isListingDeleted(listing);
+}
+/**
+ * Marketplace listing detail (AGL-95/419), relocated from the app route —
+ * the app keeps the Dashboard chrome and renders this through the
+ * 'marketplaceListing' widget slot. Full description, preview image,
+ * version history, publisher block, and the install/buy CTA.
+ */ export function MarketplaceListingContent({ hostId, listingId, permissions, orgScoped, orgSlug: orgSlugProp, hosts }) {
+    var _ref, _ref1, _pluginState_scope, _ref2, _ref3, _ref4, _listing_ratingAverage, _listing_ratingAverage1, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19;
+    var _componentInstall_marketplace;
+    // The publisher link was `/{hostDocId}/marketplace/publisher/{id}` — the
+    // pre-AGL-621 shape, dead since. The sibling browse grid was fixed for
+    // exactly this (AGL-673) and this file was missed; both now build the
+    // route from the shared table (AGL-685).
+    const { orgSlug: resolvedOrgSlug, subdomain } = useConsoleHostRoute(hostId);
+    // Prefer the URL slug (AGL-869): synchronous and always present at org scope.
+    const orgSlug = orgSlugProp != null ? orgSlugProp : resolvedOrgSlug;
+    const firestore = useFirestore();
+    const { data: user } = useUser();
+    const { enqueueSnackbar } = useSnackbar();
+    // Hoisted above the actions hook (AGL-2331): a purchase licenses an
+    // ORGANIZATION, so `buy` has to name the workspace it is buying for rather
+    // than let the server infer it from whichever site the surface happens to
+    // be acting through.
+    const orgId = useHostOrgId(hostId);
+    const { install, installPlan, buy, uninstall } = useMarketplaceActions(hostId, orgId);
+    /** The uninstall awaiting its impact check and confirmation (AGL-1027). */ const [pendingUninstall, setPendingUninstall] = useState(null);
+    const [installScope, setInstallScope] = useState('org');
+    // Confirm before writing install pins (AGL-867): the install is deliberate
+    // and site-scoped, so it names its targets before committing.
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    // Updating a COPIED artifact is never a plain re-install (AGL-1018): the
+    // copy has been edited in the workspace, so the update is previewed field by
+    // field before anything is written.
+    const { preview: updatePreview, loading: updateLoading, loadPreview, applyUpdate, setPreview: setUpdatePreview } = useArtifactUpdate(hostId);
+    const [updateOpen, setUpdateOpen] = useState(false);
+    // Screenshot lightbox (AGL-869): the clicked screenshot's URL, or null.
+    const [lightboxUrl, setLightboxUrl] = useState(null);
+    // Org-scope install targeting (AGL-773): All sites vs a chosen subset. Only
+    // engaged at org scope with a known site list; otherwise the per-site tab's
+    // simpler org/host choice (AGL-656) still applies.
+    const orgTargeting = Boolean(orgScoped && hosts && hosts.length > 0);
+    const [targeting, setTargeting] = useState('all-sites');
+    const [selectedHostIds, setSelectedHostIds] = useState([]);
+    const allHostIds = useMemo(()=>(hosts != null ? hosts : []).map((h)=>h.id), [
+        hosts
+    ]);
+    // Listings are org-owned (AGL-652) — "did I publish this" is an org
+    // comparison, resolved from the routing mirror like the browse grid.
+    const [viewerOrgId, setViewerOrgId] = useState(null);
+    useEffect(()=>{
+        let active = true;
+        void getDoc(doc(firestore, 'hostIndex', hostId)).then((snapshot)=>{
+            var _snapshot_get;
+            if (active) setViewerOrgId((_snapshot_get = snapshot.get('orgId')) != null ? _snapshot_get : null);
+        }).catch(()=>undefined);
+        return ()=>{
+            active = false;
+        };
+    }, [
+        firestore,
+        hostId
+    ]);
+    const { data: listing, status } = useFirestoreDoc(()=>doc(firestore, 'marketplaceListings', listingId || '-missing-'), [
+        firestore,
+        listingId
+    ], {
+        idField: '$id'
+    });
+    // Targets this artifact type can actually install to (AGL-656) — only
+    // plugins have an org-scoped pin, so only plugins get a choice.
+    const installTargets = useMemo(()=>listing ? installTargetsFor(listing) : [
+            'host'
+        ], [
+        listing
+    ]);
+    const { data: profile } = useFirestoreDoc(()=>{
+        var _ref;
+        return doc(firestore, 'publisherProfiles', (_ref = listing == null ? void 0 : listing.profileId) != null ? _ref : '-anonymous-');
+    }, [
+        firestore,
+        listing == null ? void 0 : listing.profileId
+    ], {
+        idField: '$id'
+    });
+    /*
+   * ORDERED AND CEILINGED (AGL-2501). The page folds this into ONE answer —
+   * is a component install of THIS listing present — so a bare `limit`, which
+   * Firestore answers in document-id order, would let an arbitrary hundred of
+   * the site's components decide it. A site past such a window reads as
+   * not-installed, and the button below then offers to install it again.
+   */ const { data: installedRead } = useFirestoreCollection(()=>collectionCeiling(collection(firestore, 'hosts', hostId, 'components'), COMPONENT_LOOKUP_CEILING), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
+    const { rows: installedDocs, truncated: installedTruncated } = useMemo(()=>ceilingedWindow(installedRead, COMPONENT_LOOKUP_CEILING), [
+        installedRead
+    ]);
+    // Held at null until the uid resolves (AGL-1440): `marketplacePurchases`
+    // is buyer/seller-gated and a LIST is evaluated against the QUERY, so the
+    // `-anonymous-` sentinel was denied wholesale on every mount and retried
+    // on the refusal cadence. A signed-out viewer simply has no purchases.
+    /*
+   * ORDERED AND CEILINGED, and the ceiling stays wide (AGL-2501).
+   *
+   * `orderBy(documentId())` costs nothing here: an equality `where` plus
+   * `orderBy(__name__)` is served by the automatic single-field index on
+   * `buyerUid`, so no composite index stands between this page and a buyer's
+   * licences. Ordering on `purchasedAt` would need one, and would also DROP
+   * any purchase written without the field.
+   *
+   * The window is wider than the others because of what a miss costs here.
+   * Every other lookup on this page decides a chip; this one decides whether
+   * the Buy button appears, so a purchase that falls outside it does not
+   * merely under-report state — it offers to sell a licence the buyer already
+   * holds. The probe row is what lets the panel say so.
+   */ const { data: purchaseRead } = useFirestoreCollection(()=>(user == null ? void 0 : user.uid) ? query(collection(firestore, 'marketplacePurchases'), where('buyerUid', '==', user.uid), orderBy(documentId()), limit(PURCHASE_LOOKUP_CEILING + 1)) : null, [
+        firestore,
+        user == null ? void 0 : user.uid
+    ], {
+        idField: '$id'
+    });
+    const { rows: purchaseDocs, truncated: purchasesTruncated } = useMemo(()=>ceilingedWindow(purchaseRead, PURCHASE_LOOKUP_CEILING), [
+        purchaseRead
+    ]);
+    const artifactType = listing ? listingArtifactType(listing) : null;
+    const isPlugin = artifactType === 'plugin';
+    // Plugin installs are version PINS, not component snapshots (AGL-656): a
+    // host pin lives at `hosts/{h}/installs/{id}`, an org pin at
+    // `orgs/{o}/installs/{id}` and applies to every site. Reading only
+    // `components` above never sees either, so an installed plugin read as
+    // "not installed" here; the two pins tell the honest story, host over org.
+    // (`orgId` is resolved above, where `buy` needs it.)
+    const { data: hostPin } = useFirestoreDoc(()=>doc(firestore, 'hosts', hostId, 'installs', listingId || '-missing-'), [
+        firestore,
+        hostId,
+        listingId
+    ], {
+        idField: '$id'
+    });
+    // Held at null while `useHostOrgId` is in flight, never `orgs/-pending-`
+    // (AGL-1440): installs are member-gated, so the sentinel was a
+    // guaranteed-denied listen on every listing view.
+    const { data: orgPin } = useFirestoreDoc(()=>orgId && listingId ? doc(firestore, 'orgs', orgId, 'installs', listingId) : null, [
+        firestore,
+        orgId,
+        listingId
+    ], {
+        idField: '$id'
+    });
+    // Every site's pin, not just the acting one (AGL-997). At org scope the
+    // question is "which of my sites is this on", and the two subscriptions
+    // above can only answer for one arbitrary site. Read as a fan-in rather
+    // than a subscription per host: the host count is a prop, so a per-host
+    // hook would change the hook count between renders, and a collection-group
+    // query would need an index plus a rules audit to read other orgs' pins
+    // it must never see. `pinsNonce` re-reads after this page's own writes,
+    // which are the only thing that changes these docs while it is open.
+    const [sitePins, setSitePins] = useState({});
+    const [pinsNonce, setPinsNonce] = useState(0);
+    const hostIdsKey = (hosts != null ? hosts : []).map((host)=>host.id).join('|');
+    useEffect(()=>{
+        if (!orgScoped || !listingId || !(hosts == null ? void 0 : hosts.length)) return;
+        let active = true;
+        void Promise.all(hosts.map(async (host)=>{
+            const snapshot = await getDoc(doc(firestore, 'hosts', host.id, 'installs', listingId));
+            return [
+                host.id,
+                snapshot.exists() ? snapshot.data() : null
+            ];
+        })).then((entries)=>{
+            if (active) setSitePins(Object.fromEntries(entries));
+        }).catch(()=>undefined);
+        return ()=>{
+            active = false;
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        firestore,
+        listingId,
+        hostIdsKey,
+        orgScoped,
+        pinsNonce
+    ]);
+    // datasetSchema/emailTemplate installs live in neither collection above
+    // (AGL-789) — they become an org dataset or a draft email version, each
+    // stamped with the listing it came from. Scoped to this listing rather than
+    // reading the whole collection, since the detail page only speaks for one.
+    // Scoped (AGL-1044): the AGL-1041 rules reject an unfiltered list for a
+    // scoped member, so this would error rather than show fewer installs.
+    //
+    // Wait for the member doc before listing (AGL-1047). `useScopeTokens`
+    // reports `orgWide: true` while loading, so without `scopeLoaded` a scoped
+    // collaborator's first render computes `needsScope: false` and sends an
+    // UNFILTERED list that the AGL-1041 rules deny per document. It recovers
+    // on the next render, which is what makes it easy to miss: the page looks
+    // right and logs a denial every mount.
+    const { tokens: scopeTokens, orgWide: viewerOrgWide, loaded: scopeLoaded } = useScopeTokens(orgId != null ? orgId : undefined);
+    const needsScope = Boolean(orgId) && !viewerOrgWide;
+    /*
+   * ORDERED (AGL-2501). These two are already narrowed to ONE listing, so the
+   * twenty is generous rather than tight — but `artifactInstall` below takes
+   * the FIRST live row out of whatever comes back, and an unordered `limit` is
+   * answered in document-id order, which makes "the first" an arbitrary one.
+   * On an org holding more than twenty installs of a single listing the window
+   * could hold only deleted rows while a live one sat outside it, and the page
+   * would offer to install what is already installed.
+   *
+   * `documentId()` is what the existing composite index on
+   * (`source.listingId`, `visibleTo`) already orders by — Firestore appends the
+   * document name to every index — so this needs no new one.
+   */ const { data: datasetInstalls } = useFirestoreCollection(()=>orgId && scopeLoaded ? query(collection(firestore, 'orgs', orgId, 'datasets'), where('source.listingId', '==', listingId || '-missing-'), ...needsScope ? [
+            where('visibleTo', 'array-contains-any', scopeTokens)
+        ] : [], orderBy(documentId()), limit(ARTIFACT_INSTALL_CEILING)) : null, [
+        firestore,
+        orgId,
+        scopeLoaded,
+        listingId,
+        needsScope,
+        scopeTokens
+    ], // Same mutable-predicate exposure as the browse datasets query:
+    // `visibleTo` is rewritten by every scope edit, and the rule requires the
+    // constraint for anyone who is not org-wide (AGL-1196).
+    {
+        idField: '$id',
+        confirmDisappearances: true
+    });
+    const { data: emailInstalls } = useFirestoreCollection(()=>query(collection(firestore, 'hosts', hostId, 'emailTemplates'), where('installedFrom.listingId', '==', listingId || '-missing-'), orderBy(documentId()), limit(ARTIFACT_INSTALL_CEILING)), [
+        firestore,
+        hostId,
+        listingId
+    ], {
+        idField: '$id'
+    });
+    // A theme installs onto the host document itself (AGL-1020) rather than into
+    // a collection, so there is no per-listing query to scope — the site either
+    // runs this listing's theme or it does not.
+    const { data: themeHostDoc } = useFirestoreDoc(()=>artifactType === 'theme' ? doc(firestore, 'hosts', hostId) : null, [
+        firestore,
+        hostId,
+        artifactType
+    ], {
+        idField: '$id'
+    });
+    const artifactInstall = useMemo(()=>{
+        if (artifactType === 'datasetSchema') {
+            var _ref;
+            var _hit_source;
+            const hit = (datasetInstalls != null ? datasetInstalls : []).find((entry)=>!entry.deletedAt);
+            return hit ? {
+                version: (_ref = (_hit_source = hit.source) == null ? void 0 : _hit_source.version) != null ? _ref : null
+            } : undefined;
+        }
+        if (artifactType === 'emailTemplate') {
+            var _ref1;
+            var _hit_installedFrom;
+            const hit = (emailInstalls != null ? emailInstalls : []).find((entry)=>!entry.deletedAt);
+            return hit ? {
+                version: (_ref1 = (_hit_installedFrom = hit.installedFrom) == null ? void 0 : _hit_installedFrom.version) != null ? _ref1 : null
+            } : undefined;
+        }
+        if (artifactType === 'theme') {
+            var _ref2;
+            const stamp = themeHostDoc == null ? void 0 : themeHostDoc.themeInstalledFrom;
+            return (stamp == null ? void 0 : stamp.listingId) === listingId ? {
+                version: (_ref2 = stamp == null ? void 0 : stamp.version) != null ? _ref2 : null
+            } : undefined;
+        }
+        return undefined;
+    }, [
+        artifactType,
+        datasetInstalls,
+        emailInstalls,
+        themeHostDoc,
+        listingId
+    ]);
+    /**
+   * The kill switch, on the page with the Install button (AGL-2368).
+   *
+   * One document read for the whole page — the switch is listing-scoped —
+   * and public, which is what lets the marketplace loaders and the
+   * host-plugins card read it already.
+   */ const { data: revocation } = useFirestoreDoc(()=>isPlugin && listingId ? doc(firestore, 'revocations', listingId) : null, [
+        firestore,
+        isPlugin,
+        listingId
+    ]);
+    /**
+   * The version this listing actually offers (AGL-1016, AGL-2368).
+   *
+   * For a plugin that is the newest INSTALLABLE version, not `latestVersion`
+   * and not merely the newest approved one. This page used to compare against
+   * `latestVersion`, so publishing v1.1.0 lit up "Update to v1.1.0" for every
+   * workspace the moment it was uploaded — and the install route then refused
+   * it, because AGL-966 only ever hands out reviewed bytes. The badge was
+   * advertising what the marketplace would not give you.
+   *
+   * `latestApprovedVersion` fixed that and left the same defect one state
+   * over: approval is a review verdict and revocation does not clear it, so a
+   * killed version stayed the offer. This is the page with the Install and
+   * Buy buttons on it, so it cross-checks the mirror against the switch
+   * rather than trusting a cache two writes behind.
+   */ const offeredVersion = isPlugin ? offeredPluginVersion(listing, revocation) : listing == null ? void 0 : listing.latestVersion;
+    /**
+   * The publisher installing their OWN unreviewed bytes (AGL-1083).
+   *
+   * `install-plugin` deliberately allows it — you cannot test a version you
+   * cannot install, and the AGL-969 checklist asks a publisher to confirm
+   * they tested these exact bytes on a site they control. But the affordance
+   * said nothing, so it read exactly like installing reviewed, signed code.
+   *
+   * The condition mirrors the route's fallback rather than approximating it:
+   * there, `newest ?? fallback` hands over `latestVersion` ONLY when the
+   * owner asks and no approved version exists at all. With an approved
+   * version present the server serves that one, and this is not an
+   * unreviewed install however new the pending one is.
+   */ const unreviewedInstall = isPlugin && installsUnreviewedFallback(listing, viewerOrgId, revocation);
+    /** What would actually land — the route's fallback, named. */ const installingVersion = unreviewedInstall ? listing == null ? void 0 : listing.latestVersion : offeredVersion;
+    const pluginState = useMemo(()=>resolvePluginInstallState(offeredVersion, isPlugin ? hostPin : null, isPlugin ? orgPin : null), [
+        offeredVersion,
+        isPlugin,
+        hostPin,
+        orgPin
+    ]);
+    // Public version history + trust tier (AGL-431): the pluginVersions
+    // docs are server-only, so the marketplace API exposes the buyer-safe
+    // subset (version/changelog/trust/hostAbi/date).
+    const [versions, setVersions] = useState([]);
+    const [totals, setTotals] = useState(null);
+    useEffect(()=>{
+        // Every artifact type now, not just plugins (AGL-1036): the route serves
+        // the per-version install counts for all of them, and a component's
+        // publisher wants "who is still on v1" as much as a plugin's does.
+        if (!listing || !listingId) return;
+        let active = true;
+        void fetch(`/api/marketplace/listing-versions?listingId=${encodeURIComponent(listingId)}`).then((response)=>response.ok ? response.json() : {
+                versions: []
+            }).then((payload)=>{
+            var _ref, _payload_installCount, _payload_activeInstalls, _payload_untrackedActiveInstalls, _payload_untrackedInstallCount;
+            if (!active) return;
+            setVersions((_ref = payload == null ? void 0 : payload.versions) != null ? _ref : []);
+            setTotals(typeof (payload == null ? void 0 : payload.activeInstalls) === 'number' ? {
+                installCount: Number((_payload_installCount = payload.installCount) != null ? _payload_installCount : 0),
+                activeInstalls: Number((_payload_activeInstalls = payload.activeInstalls) != null ? _payload_activeInstalls : 0),
+                untrackedActiveInstalls: Number((_payload_untrackedActiveInstalls = payload.untrackedActiveInstalls) != null ? _payload_untrackedActiveInstalls : 0),
+                // THIS PROJECTION is where the field died (AGL-2339). The
+                // route served it from both branches; the client copied its
+                // sibling and not it, so the page could never render what the
+                // server had already computed.
+                untrackedInstallCount: Number((_payload_untrackedInstallCount = payload.untrackedInstallCount) != null ? _payload_untrackedInstallCount : 0)
+            } : null);
+        }).catch(()=>undefined);
+        return ()=>{
+            active = false;
+        };
+    // Keyed on the listing's id, not its legacy `type` (AGL-864): an
+    // artifactType-only plugin has no `type`, so keying on it left the effect
+    // stuck at its undefined first value and the versions fetch never fired.
+    //
+    // `pinsNonce` re-reads after this page's own writes, so the per-version
+    // install counts (AGL-1036) are not left showing the tally from before the
+    // update the user just pressed.
+    }, [
+        listing == null ? void 0 : listing.$id,
+        listingId,
+        pinsNonce
+    ]);
+    /**
+   * The install numbers this page is allowed to print (AGL-1418).
+   *
+   * The route's reconciled totals when they have arrived, and the listing
+   * document's own copy only until then. That fallback cannot reintroduce the
+   * contradiction it replaced: the version history it used to disagree with is
+   * fed by the same response, so before it lands there is nothing on screen to
+   * disagree with.
+   */ const installTotals = useMemo(()=>{
+        var _ref, _ref1;
+        if (totals) return totals;
+        const stored = Number((_ref = listing == null ? void 0 : listing.activeInstalls) != null ? _ref : Number.NaN);
+        if (!Number.isFinite(stored)) return null;
+        return {
+            installCount: Number((_ref1 = listing == null ? void 0 : listing.installCount) != null ? _ref1 : 0),
+            activeInstalls: stored,
+            // Zero on the fallback, because the listing document holds no split at
+            // all — claiming a shortfall it cannot know would be the contradiction
+            // this fallback exists to avoid.
+            untrackedActiveInstalls: 0,
+            untrackedInstallCount: 0
+        };
+    }, [
+        totals,
+        listing == null ? void 0 : listing.activeInstalls,
+        listing == null ? void 0 : listing.installCount
+    ]);
+    const latestEntry = versions[0];
+    const realmTrusted = versions.some((entry)=>entry.trust === 'realm');
+    const abiIncompatible = (latestEntry == null ? void 0 : latestEntry.hostAbi) != null && latestEntry.hostAbi !== PLUGIN_HOST_ABI_VERSION;
+    // Component listings still install into `hosts/{h}/components`; plugin
+    // state comes from the pins above. `installed` unifies the two so the CTA
+    // and the buy gate read the same for either artifact type.
+    const componentInstall = useMemo(()=>(installedDocs != null ? installedDocs : []).find((definition)=>{
+            var _definition_marketplace;
+            return (definition == null ? void 0 : (_definition_marketplace = definition.marketplace) == null ? void 0 : _definition_marketplace.listingId) === listingId && !definition.deletedAt;
+        }), [
+        installedDocs,
+        listingId
+    ]);
+    // The SERVER's predicate, imported rather than restated (AGL-2158). This
+    // used to be `some(p => p.listingId === listingId)` with no refund test,
+    // while `hasLivePurchase` — the gate on all eight ways into paid content —
+    // treats a purchase carrying `refundedAt` as absent. The one buyer the two
+    // must agree about is the refunded one, and they disagreed: the page said
+    // "Purchased" and hid the buy button, the install routes answered 402, and
+    // the buyer could neither install nor buy it again.
+    //
+    // ORG-SCOPED SINCE AGL-2331. `hasLivePurchaseOf` answers "did this PERSON
+    // buy it", which is no longer the question either the install routes or the
+    // checkout guard ask: a licence belongs to a workspace, so the acting org is
+    // what decides whether this page may install. Reading the person's answer
+    // here would put the CTA back in the disagreement AGL-2158 closed — an
+    // agency owner would see "Purchased" in a client workspace that holds no
+    // licence, and the install would 402.
+    const purchased = useMemo(()=>hasOrgLicenceOf(purchaseDocs != null ? purchaseDocs : [], listingId, {
+            orgId,
+            uid: user == null ? void 0 : user.uid
+        }), [
+        purchaseDocs,
+        listingId,
+        orgId,
+        user == null ? void 0 : user.uid
+    ]);
+    /**
+   * The buyer holds a licence for this listing — in some OTHER workspace
+   * (AGL-2331).
+   *
+   * The state that has no honest rendering without it: an agency developer who
+   * bought this component for one client opens it in the next client's
+   * workspace and sees a plain Buy button, with nothing to distinguish "you
+   * have never bought this" from "you own one, it just does not cover the
+   * workspace you are standing in". Both are a purchase — but only one of them
+   * is a surprise when the invoice arrives.
+   *
+   * Reads the buyer's OWN purchase documents, which the rules have always let
+   * them read, so this needs no cross-org read to answer.
+   */ const licensedElsewhere = useMemo(()=>!purchased && hasLivePurchaseOf(purchaseDocs != null ? purchaseDocs : [], listingId) && licensedOrgIdsFor(purchaseDocs != null ? purchaseDocs : [], listingId).some((licensed)=>licensed !== orgId), [
+        purchased,
+        purchaseDocs,
+        listingId,
+        orgId
+    ]);
+    const missing = listingIsMissing(listing, status);
+    // Somewhere to go from the zero state (AGL-998). Same surface split as
+    // every other link here: org route at org scope, host route otherwise,
+    // and undefined rather than a link to nowhere when the slug is unresolved.
+    const marketplaceHref = orgScoped ? orgSlug ? buildRoute(Route.ORG_MARKETPLACE, {
+        orgSlug
+    }) : undefined : // so both branches now land on the same org-scope page and the
+    // subdomain is no longer part of the URL.
+    orgSlug ? buildRoute(Route.ORG_MARKETPLACE, {
+        orgSlug
+    }) : undefined;
+    const installed = isPlugin ? pluginState.scope != null : Boolean(componentInstall != null ? componentInstall : artifactInstall);
+    const installedVersion = isPlugin ? pluginState.installedVersion : (_ref = componentInstall == null ? void 0 : (_componentInstall_marketplace = componentInstall.marketplace) == null ? void 0 : _componentInstall_marketplace.version) != null ? _ref : artifactInstall == null ? void 0 : artifactInstall.version;
+    const upToDate = isPlugin ? installed && !pluginState.updateAvailable : componentInstall && installedVersion >= (listing == null ? void 0 : listing.latestVersion);
+    /**
+   * The same update comparison the Plugins index and the installation page
+   * make (AGL-1016), so all three agree on the version pair rather than each
+   * re-deriving it. Only rendered when the viewer already has it installed —
+   * "you have v1.0.0 · v1.1.0 available" is meaningless to a first-time buyer.
+   */ const updateStatus = useMemo(()=>resolveUpdateState(isPlugin ? hostPin != null ? hostPin : orgPin : // collections here, each with its own field for the version, so
+        // they are normalised to the one shape provenance reads. The
+        // `installedFrom` stamp wins when AGL-1015 wrote one.
+        _extends({}, (componentInstall == null ? void 0 : componentInstall.installedFrom) ? {
+            installedFrom: componentInstall.installedFrom
+        } : {}, installedVersion != null && listingId ? {
+            listingId,
+            version: installedVersion
+        } : {}), listing != null ? listing : null, artifactType, // The kill switch (AGL-2368) — this line said "Update to vX" for a
+        // version the install route refuses, because approval survives it.
+        revocation), // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        isPlugin,
+        hostPin,
+        orgPin,
+        componentInstall,
+        installedVersion,
+        listingId,
+        listing,
+        artifactType,
+        revocation
+    ]);
+    const priceUsd = Number((_ref1 = listing == null ? void 0 : listing.priceUsd) != null ? _ref1 : 0);
+    const mustBuy = priceUsd > 0 && !purchased && (listing == null ? void 0 : listing.profileId) !== viewerOrgId && !installed;
+    // Updating an installed plugin stays at its current scope; a fresh install
+    // uses the picker (plugins) or the artifact's only target (everything else).
+    const installTargetScope = isPlugin && installed ? (_pluginState_scope = pluginState.scope) != null ? _pluginState_scope : undefined : installTargets.length > 1 ? installScope : undefined;
+    // Org-scope targeting (AGL-773): "Selected sites" is only offered when the
+    // artifact can host-pin (plugins, components, templates, layouts) — an
+    // org-only artifact can't target a subset.
+    const canSelectSites = installTargets.includes('host');
+    const installPlanSteps = useMemo(()=>listing ? resolveInstallPlan(listing, targeting, {
+            selectedHostIds,
+            allHostIds
+        }) : [], [
+        listing,
+        targeting,
+        selectedHostIds,
+        allHostIds
+    ]);
+    const versionHistory = Array.isArray(listing == null ? void 0 : listing.versionHistory) ? [
+        ...listing.versionHistory
+    ].sort((a, b)=>b.version - a.version) : [];
+    // Human summary of exactly where this install lands (AGL-867), read from the
+    // same targeting the CTA acts on. An org pin covers every site (now and
+    // future); host pins are named so "Selected sites" can't silently mean
+    // something else.
+    const installTargetSummary = ()=>{
+        if (orgTargeting && !installed) {
+            var _installPlanSteps_;
+            if (installPlanSteps.length === 1 && ((_installPlanSteps_ = installPlanSteps[0]) == null ? void 0 : _installPlanSteps_.scope) === 'org') {
+                return 'the whole organization — every site, including sites added later';
+            }
+            const names = installPlanSteps.filter((step)=>step.scope === 'host').map((step)=>{
+                var _ref;
+                var _find;
+                return (_ref = (_find = (hosts != null ? hosts : []).find((host)=>host.id === step.hostId)) == null ? void 0 : _find.label) != null ? _ref : step.hostId;
+            });
+            if (names.length) {
+                return `${names.length} site${names.length === 1 ? '' : 's'}: ${names.join(', ')}`;
+            }
+            return 'the selected targets';
+        }
+        // Org-only artifacts (dataset schema) always land org-wide — including on
+        // re-add, where installTargetScope isn't set (AGL-867).
+        if (installTargetScope === 'org' || installTargets.length === 1 && installTargets[0] === 'org') {
+            return 'the whole organization — every site';
+        }
+        return 'this site';
+    };
+    // The org-wide picture (AGL-997): which sites run this, at which version,
+    // and which are still free to add. Only meaningful at org scope for a
+    // plugin — everything else installs INTO a site and has no pin to survey.
+    const orgPluginScope = Boolean(orgTargeting && isPlugin);
+    const orgInstall = useMemo(()=>resolveOrgInstallSummary(hosts != null ? hosts : [], sitePins, orgPin != null ? orgPin : null), [
+        hosts,
+        sitePins,
+        orgPin
+    ]);
+    /** Run a pin write, then re-read every site's pin. */ const runSiteEdit = async (work)=>{
+        try {
+            await work();
+        } finally{
+            setPinsNonce((current)=>current + 1);
+        }
+    };
+    /**
+   * A copied artifact with a newer version on offer (AGL-1018).
+   *
+   * The distinction that matters: a plugin takes an update by moving a pointer,
+   * but a component, layout or dataset schema was copied in and then EDITED
+   * here, so "Update" is a merge. It goes through the review dialog, never
+   * straight to the install route.
+   */ //
+    // Every non-current state, not just `update-available` (AGL-1034): a copy
+    // whose versions cannot be ordered, or that reports `ahead`, is still a copy
+    // this workspace may have edited, and sending it to the install route would
+    // dead-end on the divergence 409 with nothing offering the review it names.
+    const copiedUpdatable = !isPlugin && installed && // A theme is a copied artifact like a component, just stored as a field on
+    // the site rather than as its own document (AGL-1020) — so it takes the
+    // same diff-first update path, and must not fall through to the plain
+    // install that would overwrite the site's edits.
+    Boolean(componentInstall || artifactType === 'theme' && artifactInstall) && updateStatus.state !== 'current';
+    const openUpdateReview = ()=>{
+        setUpdatePreview(null);
+        setUpdateOpen(true);
+        if (listingId) void loadPreview(listingId);
+    };
+    /**
+   * "Install as a new copy", which means different things per type.
+   *
+   * Only a component or layout has a link that can be DETACHED, leaving the
+   * customised copy in place as an ordinary artifact — the update route does
+   * that. For the others a fresh copy is exactly what the ordinary install
+   * already produces (another empty dataset, another inactive draft, a replaced
+   * template bundle), quota checks included, so it goes there rather than
+   * through a second implementation that would drift from it.
+   */ const runCopy = async ()=>{
+        if (artifactType === 'component' || artifactType === 'layout') {
+            return void await runUpdate('copy');
+        }
+        setUpdateOpen(false);
+        await runSiteEdit(()=>install(listing, installTargetScope, {
+                onDiverged: openUpdateReview
+            }));
+    };
+    const runUpdate = async (mode, takePaths = [], confirmDestructive = false)=>{
+        if (!listingId) return;
+        const done = await applyUpdate(listingId, {
+            mode,
+            takePaths,
+            confirmDestructive
+        });
+        // Left open on failure — a destructive schema update comes back asking for
+        // the confirmation tick, and closing would hide the question.
+        if (done) {
+            setUpdateOpen(false);
+            // Re-read the install state and the per-version counts this just moved.
+            setPinsNonce((current)=>current + 1);
+        }
+    };
+    // The actual pin write, run only after the confirm dialog (AGL-867).
+    const runInstall = ()=>{
+        setConfirmOpen(false);
+        // Re-read every site's pin afterwards (AGL-997). The acting host's pin is
+        // a live subscription, but the other sites' are a fan-in read — without
+        // this the page went straight from "Install" to a bare disabled
+        // "Installed" button, because the panel that explains WHERE it landed
+        // had not seen the write yet.
+        void runSiteEdit(()=>orgTargeting && !installed ? installPlan(listing, installPlanSteps) : // instead of toasting advice nothing here acts on (AGL-1034).
+            install(listing, installTargetScope, {
+                onDiverged: openUpdateReview
+            }));
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(NextPageTitle, {
+                screen: (_ref2 = listing == null ? void 0 : listing.displayName) != null ? _ref2 : 'Marketplace listing'
+            }),
+            /*#__PURE__*/ _jsxs(Container, {
+                gutterY: true,
+                maxWidth: "xl",
+                children: [
+                    missing ? /*#__PURE__*/ _jsx(CardDisplay, {
+                        contentGutterX: true,
+                        contentGutterY: true,
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 1.5,
+                            sx: {
+                                alignItems: 'center',
+                                textAlign: 'center',
+                                py: 6
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(MdiIcon, {
+                                    path: mdiStorefrontOutline.path,
+                                    color: "disabled",
+                                    sx: {
+                                        fontSize: 48
+                                    }
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "h6",
+                                    children: 'This listing isn’t here'
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    color: "text.secondary",
+                                    sx: {
+                                        maxWidth: 440
+                                    },
+                                    children: 'It may have been unpublished by its publisher, taken ' + 'down, or the link may point somewhere that no longer ' + 'exists. Anything you already installed from it keeps ' + 'working.'
+                                }),
+                                marketplaceHref ? /*#__PURE__*/ _jsx(AppLink, {
+                                    href: marketplaceHref,
+                                    children: /*#__PURE__*/ _jsx(Button, {
+                                        variant: "contained",
+                                        color: "primary",
+                                        component: "span",
+                                        children: 'Back to the marketplace'
+                                    })
+                                }) : null
+                            ]
+                        })
+                    }) : /*#__PURE__*/ _jsx(GridItems, {
+                        spacing: 3,
+                        // Masonry. Source order here is body (8),
+                        // changelog (8), sidebar (4) — and two eights cannot share a
+                        // twelve-column row, so the changelog wrapped and dragged the
+                        // sidebar down with it. `Install`, the point of the page, opened
+                        // below the fold under a screen of blank space. Masonry places
+                        // the sidebar in the columns beside the body card where it
+                        // belongs, and no card can be pushed past the container's edge.
+                        masonry: true,
+                        items: [
+                            {
+                                size: {
+                                    xs: 12,
+                                    md: 8
+                                },
+                                // No card header (AGL-1000): the page's hero now carries the
+                                // listing's name, and the only route that renders this
+                                // widget is the org listing page — the per-site one
+                                // redirects to it (AGL-775) — so a heading here would just
+                                // print the same words twice, inches apart.
+                                children: /*#__PURE__*/ _jsx(CardDisplay, {
+                                    contentGutterX: true,
+                                    contentGutterY: true,
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        spacing: 2,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(ListingImage, {
+                                                src: listing == null ? void 0 : listing.previewImageUrl,
+                                                alt: `${listing == null ? void 0 : listing.displayName} preview`,
+                                                sx: {
+                                                    width: '100%',
+                                                    maxHeight: 360,
+                                                    objectFit: 'cover',
+                                                    borderRadius: 1,
+                                                    border: 1,
+                                                    borderColor: 'divider'
+                                                }
+                                            }),
+                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                direction: "row",
+                                                spacing: 1,
+                                                sx: {
+                                                    alignItems: 'center',
+                                                    flexWrap: 'wrap'
+                                                },
+                                                children: [
+                                                    (listing == null ? void 0 : listing.logoUrl) ? /*#__PURE__*/ _jsx(Box, {
+                                                        component: "img",
+                                                        src: listing.logoUrl,
+                                                        alt: `${listing == null ? void 0 : listing.displayName} logo`,
+                                                        sx: {
+                                                            width: 32,
+                                                            height: 32,
+                                                            borderRadius: 1,
+                                                            objectFit: 'cover'
+                                                        }
+                                                    }) : null,
+                                                    listing ? /*#__PURE__*/ _jsx(Chip, {
+                                                        size: "small",
+                                                        color: "primary",
+                                                        label: listingArtifactLabel(listing)
+                                                    }) : null,
+                                                    ((_ref3 = listing == null ? void 0 : listing.categories) != null ? _ref3 : []).map((entry)=>/*#__PURE__*/ _jsx(Chip, {
+                                                            size: "small",
+                                                            label: entry
+                                                        }, entry)),
+                                                    (listing == null ? void 0 : listing.category) && !((_ref4 = listing == null ? void 0 : listing.categories) != null ? _ref4 : []).length ? /*#__PURE__*/ _jsx(Chip, {
+                                                        size: "small",
+                                                        label: listing.category
+                                                    }) : null,
+                                                    (listing == null ? void 0 : listing.license) ? /*#__PURE__*/ _jsx(Chip, {
+                                                        size: "small",
+                                                        variant: "outlined",
+                                                        label: listing.license
+                                                    }) : null,
+                                                    isPlugin ? realmTrusted ? /*#__PURE__*/ _jsx(Chip, {
+                                                        size: "small",
+                                                        color: "success",
+                                                        label: "Realm-trusted"
+                                                    }) : /*#__PURE__*/ _jsx(Chip, {
+                                                        size: "small",
+                                                        variant: "outlined",
+                                                        label: "Sandboxed"
+                                                    }) : null,
+                                                    (listing == null ? void 0 : listing.reviewStatus) === 'verified' ? /*#__PURE__*/ _jsx(Tooltip, {
+                                                        title: `A human at ${PLATFORM_BRAND_NAME} confirmed ` + 'who this ' + 'publisher is, and that the listing describes ' + 'what the code does. A claim about the ' + 'publisher, not this release — it survives a ' + 'version bump.',
+                                                        children: /*#__PURE__*/ _jsx(Chip, {
+                                                            size: "small",
+                                                            color: "info",
+                                                            label: "Verified publisher"
+                                                        })
+                                                    }) : null,
+                                                    (listing == null ? void 0 : listing.latestVersionReviewState) === 'approved' ? /*#__PURE__*/ _jsx(Tooltip, {
+                                                        title: `A human at ${PLATFORM_BRAND_NAME} read these ` + 'exact bytes — ' + 'the version on offer — against a required ' + 'checklist. Re-earned per version. Not a ' + 'security guarantee: every plugin runs in the ' + 'same sandbox either way.',
+                                                        children: /*#__PURE__*/ _jsx(Chip, {
+                                                            size: "small",
+                                                            color: "success",
+                                                            label: "Reviewed"
+                                                        })
+                                                    }) : null,
+                                                    isPrivateListing(listing != null ? listing : {}) ? /*#__PURE__*/ _jsx(Chip, {
+                                                        size: "small",
+                                                        variant: "outlined",
+                                                        label: "Private"
+                                                    }) : null,
+                                                    /*#__PURE__*/ _jsx(Chip, {
+                                                        size: "small",
+                                                        color: priceUsd > 0 ? 'primary' : 'default',
+                                                        label: priceUsd > 0 ? `$${priceUsd}` : 'Free'
+                                                    }),
+                                                    (listing == null ? void 0 : listing.ratingCount) ? /*#__PURE__*/ _jsxs(Stack, {
+                                                        direction: "row",
+                                                        spacing: 0.5,
+                                                        sx: {
+                                                            alignItems: 'center'
+                                                        },
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Rating, {
+                                                                size: "small",
+                                                                readOnly: true,
+                                                                precision: 0.1,
+                                                                value: Number((_listing_ratingAverage = listing.ratingAverage) != null ? _listing_ratingAverage : 0)
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Typography, {
+                                                                variant: "caption",
+                                                                color: "text.secondary",
+                                                                children: `${(_listing_ratingAverage1 = listing.ratingAverage) != null ? _listing_ratingAverage1 : 0} (${listing.ratingCount})`
+                                                            })
+                                                        ]
+                                                    }) : null,
+                                                    /*#__PURE__*/ _jsx(Tooltip, {
+                                                        title: 'Counted once per install, whether it covers a ' + 'single site or a whole organization — and ' + 'including the publisher’s own. “All time” ' + 'counts installs that have since been removed, ' + 'so it never falls.',
+                                                        children: /*#__PURE__*/ _jsxs(Typography, {
+                                                            variant: "caption",
+                                                            color: "text.secondary",
+                                                            children: [
+                                                                `v${(_ref5 = listing == null ? void 0 : listing.latestVersion) != null ? _ref5 : '…'}`,
+                                                                (installTotals == null ? void 0 : installTotals.installCount) || (installTotals == null ? void 0 : installTotals.activeInstalls) ? ` · ${installTotals.activeInstalls} active ` + `install${installTotals.activeInstalls === 1 ? '' : 's'}` : '',
+                                                                (installTotals == null ? void 0 : installTotals.installCount) ? ` · ${installTotals.installCount} all time` : ''
+                                                            ]
+                                                        })
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "body2",
+                                                color: "text.secondary",
+                                                children: (_ref6 = listing == null ? void 0 : listing.description) != null ? _ref6 : 'No description provided.'
+                                            }),
+                                            isPlugin && !realmTrusted && (listing == null ? void 0 : listing.latestVersionReviewState) !== 'approved' ? /*#__PURE__*/ _jsx(Alert, {
+                                                severity: "info",
+                                                children: 'Marketplace plugin: runs sandboxed and cannot ' + 'access your site data directly. Review the ' + 'publisher and docs before installing.'
+                                            }) : null,
+                                            isPrivateListing(listing != null ? listing : {}) ? /*#__PURE__*/ _jsx(Alert, {
+                                                severity: "info",
+                                                children: 'Private plugin: it is never listed in the ' + 'marketplace, and only your organization’s ' + 'sites can install it. It passes the same ' + 'review as every other plugin.'
+                                            }) : null,
+                                            abiIncompatible ? /*#__PURE__*/ _jsx(Alert, {
+                                                severity: "warning",
+                                                children: `Built for platform generation ${latestEntry == null ? void 0 : latestEntry.hostAbi}; ` + `this platform runs ${PLUGIN_HOST_ABI_VERSION}. ` + 'It will not load until the publisher ships a ' + 'compatible version.'
+                                            }) : null,
+                                            ((_ref7 = listing == null ? void 0 : listing.screenshots) != null ? _ref7 : []).length ? /*#__PURE__*/ _jsx(Stack, {
+                                                direction: "row",
+                                                spacing: 1,
+                                                sx: {
+                                                    overflowX: 'auto',
+                                                    pb: 0.5
+                                                },
+                                                children: listing.screenshots.map((url)=>// Click to zoom (AGL-869) — the strip thumbnails
+                                                    // are too small to actually evaluate a UI from.
+                                                    /*#__PURE__*/ _jsx(Box, {
+                                                        component: "img",
+                                                        src: url,
+                                                        alt: `${listing == null ? void 0 : listing.displayName} screenshot`,
+                                                        loading: "lazy",
+                                                        onClick: ()=>setLightboxUrl(url),
+                                                        sx: {
+                                                            height: 180,
+                                                            borderRadius: 1,
+                                                            border: 1,
+                                                            borderColor: 'divider',
+                                                            cursor: 'zoom-in'
+                                                        }
+                                                    }, url))
+                                            }) : null,
+                                            (listing == null ? void 0 : listing.readme) ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Divider, {}),
+                                                    /*#__PURE__*/ _jsx(ListingReadme, {
+                                                        readme: listing.readme
+                                                    })
+                                                ]
+                                            }) : null
+                                        ]
+                                    })
+                                })
+                            },
+                            {
+                                size: {
+                                    xs: 12,
+                                    md: 8
+                                },
+                                children: /*#__PURE__*/ _jsx(ListingChangelog, {
+                                    versions: versions
+                                })
+                            },
+                            {
+                                size: {
+                                    xs: 12,
+                                    md: 4
+                                },
+                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                    spacing: 3,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(CardDisplay, {
+                                            header: 'Install',
+                                            help: pluginDocsHelp('installYourFirstPlugin', {
+                                                anchor: '#step-4-targeting'
+                                            }),
+                                            contentGutterX: true,
+                                            contentGutterY: true,
+                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                spacing: 1.5,
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs(Stack, {
+                                                        direction: "row",
+                                                        spacing: 1,
+                                                        sx: {
+                                                            alignItems: 'baseline'
+                                                        },
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Typography, {
+                                                                variant: "h6",
+                                                                children: priceUsd > 0 ? `$${priceUsd}` : 'Free'
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Typography, {
+                                                                variant: "caption",
+                                                                color: "text.secondary",
+                                                                children: `v${(_ref8 = listing == null ? void 0 : listing.latestVersion) != null ? _ref8 : '…'}`
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Divider, {}),
+                                                    /*#__PURE__*/ _jsxs(Stack, {
+                                                        spacing: 0.75,
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Typography, {
+                                                                variant: "overline",
+                                                                color: "text.secondary",
+                                                                children: "What's included"
+                                                            }),
+                                                            listingInclusions(listing != null ? listing : {}, {
+                                                                reviewedVersion: (listing == null ? void 0 : listing.latestVersionReviewState) === 'approved'
+                                                            }).map((row)=>/*#__PURE__*/ _jsxs(Stack, {
+                                                                    direction: "row",
+                                                                    spacing: 1,
+                                                                    sx: {
+                                                                        alignItems: 'flex-start'
+                                                                    },
+                                                                    children: [
+                                                                        /*#__PURE__*/ _jsx(MdiIcon, {
+                                                                            path: row.tone === 'included' ? mdiCheckCircleOutline : mdiInformationOutline,
+                                                                            size: 0.8,
+                                                                            color: row.tone === 'included' ? 'success' : 'disabled'
+                                                                        }),
+                                                                        /*#__PURE__*/ _jsx(Typography, {
+                                                                            variant: "body2",
+                                                                            children: row.label
+                                                                        })
+                                                                    ]
+                                                                }, row.label))
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Divider, {}),
+                                                    unreviewedInstall ? /*#__PURE__*/ _jsxs(Alert, {
+                                                        severity: "warning",
+                                                        variant: "outlined",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Typography, {
+                                                                variant: "body2",
+                                                                children: `No reviewer has approved v${listing == null ? void 0 : listing.latestVersion} yet.`
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Typography, {
+                                                                variant: "caption",
+                                                                component: "div",
+                                                                children: 'You can install it because you publish it — ' + 'that is how you test a version before ' + 'submitting it. Nobody else can install it ' + 'until it is approved.'
+                                                            })
+                                                        ]
+                                                    }) : null,
+                                                    installed && updateStatus.state !== 'current' && updateStatus.installedVersion ? /*#__PURE__*/ _jsx(Alert, {
+                                                        severity: updateStatus.state === 'update-available' ? 'info' : 'warning',
+                                                        variant: "outlined",
+                                                        children: updateStateLabel(updateStatus)
+                                                    }) : null,
+                                                    orgPluginScope ? /*#__PURE__*/ _jsx(PluginSiteSet, {
+                                                        listing: listing,
+                                                        hosts: hosts != null ? hosts : [],
+                                                        orgInstall: orgInstall,
+                                                        latestVersion: offeredVersion,
+                                                        installPlan: installPlan,
+                                                        uninstall: uninstall,
+                                                        onChanged: ()=>setPinsNonce((current)=>current + 1)
+                                                    }) : null,
+                                                    !orgPluginScope && isPlugin && installed ? /*#__PURE__*/ _jsx(Stack, {
+                                                        spacing: 1,
+                                                        children: /*#__PURE__*/ _jsxs(Stack, {
+                                                            direction: "row",
+                                                            spacing: 1,
+                                                            sx: {
+                                                                alignItems: 'flex-start'
+                                                            },
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(MdiIcon, {
+                                                                    path: mdiCheckCircle.path,
+                                                                    color: "success",
+                                                                    sx: {
+                                                                        fontSize: 20,
+                                                                        mt: '2px'
+                                                                    }
+                                                                }),
+                                                                /*#__PURE__*/ _jsxs(Typography, {
+                                                                    variant: "body2",
+                                                                    children: [
+                                                                        pluginState.shadowed ? `Installed on this site (v${installedVersion}), ` + 'overriding the organization-wide install.' : pluginState.scope === 'org' ? `Installed for the whole organization ` + `(v${installedVersion}) — available on every site.` : `Installed on this site (v${installedVersion}).`,
+                                                                        pluginState.updateAvailable ? ` A newer version (v${offeredVersion}) is available.` : ''
+                                                                    ]
+                                                                })
+                                                            ]
+                                                        })
+                                                    }) : null,
+                                                    orgTargeting && !installed && !(orgPluginScope && orgInstall.installedAnywhere) ? /*#__PURE__*/ _jsxs(Stack, {
+                                                        spacing: 1.5,
+                                                        sx: {
+                                                            maxWidth: 420
+                                                        },
+                                                        children: [
+                                                            /*#__PURE__*/ _jsxs(TextField, {
+                                                                select: true,
+                                                                size: "small",
+                                                                label: "Install to",
+                                                                value: targeting,
+                                                                onChange: (event)=>setTargeting(event.target.value),
+                                                                helperText: targeting === 'all-sites' ? installTargets.includes('org') ? 'Available on every site — including sites you add later.' : `Installs to all ${allHostIds.length} site` + (allHostIds.length === 1 ? '' : 's') + ". New sites won't get it automatically." : 'Installs only to the sites you choose.',
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx(MenuItem, {
+                                                                        value: "all-sites",
+                                                                        children: 'All sites'
+                                                                    }),
+                                                                    canSelectSites ? /*#__PURE__*/ _jsx(MenuItem, {
+                                                                        value: "selected-sites",
+                                                                        children: 'Selected sites'
+                                                                    }) : null
+                                                                ]
+                                                            }),
+                                                            targeting === 'selected-sites' && canSelectSites ? /*#__PURE__*/ _jsxs(FormControl, {
+                                                                component: "fieldset",
+                                                                error: !selectedHostIds.length,
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx(FormLabel, {
+                                                                        component: "legend",
+                                                                        sx: {
+                                                                            typography: 'caption'
+                                                                        },
+                                                                        children: 'Sites'
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(FormGroup, {
+                                                                        // Scrolls rather than pushing Install off
+                                                                        // the page on an org with many sites.
+                                                                        sx: {
+                                                                            maxHeight: 240,
+                                                                            overflowY: 'auto'
+                                                                        },
+                                                                        children: (hosts != null ? hosts : []).map((host)=>/*#__PURE__*/ _jsx(FormControlLabel, {
+                                                                                control: /*#__PURE__*/ _jsx(Checkbox, {
+                                                                                    size: "small",
+                                                                                    checked: selectedHostIds.includes(host.id),
+                                                                                    onChange: (event)=>setSelectedHostIds((current)=>event.target.checked ? [
+                                                                                                ...current,
+                                                                                                host.id
+                                                                                            ] : current.filter((id)=>id !== host.id))
+                                                                                }),
+                                                                                label: host.label,
+                                                                                slotProps: {
+                                                                                    typography: {
+                                                                                        variant: 'body2'
+                                                                                    }
+                                                                                }
+                                                                            }, host.id))
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(FormHelperText, {
+                                                                        children: selectedHostIds.length ? `${selectedHostIds.length} of ${(hosts != null ? hosts : []).length} selected.` : 'Pick at least one site.'
+                                                                    })
+                                                                ]
+                                                            }) : null
+                                                        ]
+                                                    }) : installTargets.length > 1 && !installed ? /*#__PURE__*/ _jsxs(TextField, {
+                                                        select: true,
+                                                        size: "small",
+                                                        label: "Install to",
+                                                        value: installScope,
+                                                        onChange: (event)=>setInstallScope(event.target.value),
+                                                        helperText: installScope === 'org' ? 'Available to every site in this organization. A site can still override it for itself.' : 'This site only.',
+                                                        sx: {
+                                                            maxWidth: 360
+                                                        },
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(MenuItem, {
+                                                                value: "org",
+                                                                children: 'This organization — all sites'
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(MenuItem, {
+                                                                value: "host",
+                                                                children: 'This site only'
+                                                            })
+                                                        ]
+                                                    }) : null,
+                                                    mustBuy && licensedElsewhere ? /*#__PURE__*/ _jsx(Alert, {
+                                                        severity: "info",
+                                                        sx: {
+                                                            mb: 1
+                                                        },
+                                                        children: 'You already own this in another workspace. A ' + 'license covers one organization, so this one ' + 'needs its own.'
+                                                    }) : null,
+                                                    purchasesTruncated || installedTruncated ? /*#__PURE__*/ _jsx(Alert, {
+                                                        severity: "warning",
+                                                        sx: {
+                                                            mb: 1
+                                                        },
+                                                        children: (purchasesTruncated ? `Checked against the first ${PURCHASE_LOOKUP_CEILING} of your purchases, ordered by id; you have more. ` : `Checked against the first ${COMPONENT_LOOKUP_CEILING} components on this site, ordered by id; there are more. `) + 'If you already own or installed this, it may ' + 'not be reflected here — check your receipts ' + 'before buying again.'
+                                                    }) : null,
+                                                    /*#__PURE__*/ _jsx(Box, {
+                                                        sx: {
+                                                            display: orgPluginScope && orgInstall.installedAnywhere ? 'none' : undefined
+                                                        },
+                                                        children: /*#__PURE__*/ _jsx(Button, {
+                                                            // Full-width and contained (AGL-1005): in a
+                                                            // sidebar card this is the page's primary action,
+                                                            // and "already installed and current" is the only
+                                                            // state where it steps back to an outline.
+                                                            fullWidth: true,
+                                                            variant: upToDate ? 'outlined' : 'contained',
+                                                            color: "primary",
+                                                            disabled: Boolean(upToDate) || !(listing == null ? void 0 : listing.profileId) || // Nothing selected to install to (AGL-773).
+                                                            orgTargeting && !installed && !mustBuy && installPlanSteps.length === 0,
+                                                            onClick: permissions.installPlugins ? ()=>// Buying goes straight to Stripe checkout,
+                                                                // which is its own confirmation; a free or
+                                                                // entitled install confirms its targets
+                                                                // first (AGL-867). Updating a copied
+                                                                // artifact reviews the diff before writing
+                                                                // anything (AGL-1018).
+                                                                mustBuy ? buy(listing) : copiedUpdatable ? openUpdateReview() : setConfirmOpen(true) : ()=>enqueueSnackbar('Your team role does not allow installing from the marketplace', {
+                                                                    variant: 'warning',
+                                                                    persist: false
+                                                                }),
+                                                            children: upToDate ? `Installed (v${installedVersion})` : copiedUpdatable ? // update would do and writes nothing. Without
+                                                            // an ordered version pair there is no "to
+                                                            // vN" to promise (AGL-1034), so it says the
+                                                            // honest, smaller thing.
+                                                            updateStatus.state === 'update-available' ? `Review update to v${offeredVersion}` : 'Review this version' : artifactInstall ? // draft, so this stays enabled (AGL-789). A
+                                                            // theme has no "again" — there is one per
+                                                            // site, and re-pressing this re-applies it.
+                                                            artifactType === 'theme' ? `Applied (v${installedVersion}) · re-apply` : `${artifactType === 'emailTemplate' ? 'Draft added' : 'Added'} (v${installedVersion}) · add again` : installed ? `Update to v${offeredVersion}` : mustBuy ? licensedElsewhere ? `Buy for this workspace — $${priceUsd}` : `Buy for $${priceUsd}` : unreviewedInstall ? `Install unreviewed v${listing == null ? void 0 : listing.latestVersion} for testing` : orgTargeting || installTargets.length > 1 ? 'Install' : 'Add to this site'
+                                                        })
+                                                    }),
+                                                    !orgPluginScope && isPlugin && installed ? /*#__PURE__*/ _jsx(Button, {
+                                                        fullWidth: true,
+                                                        size: "small",
+                                                        color: "inherit",
+                                                        onClick: ()=>setPendingUninstall({
+                                                                scope: pluginState.scope === 'org' ? 'org' : 'host',
+                                                                targets: resolveUninstallTargets(orgInstall, pluginState.scope === 'org' ? 'org' : 'host', hostId)
+                                                            }),
+                                                        children: pluginState.scope === 'org' ? 'Uninstall org-wide' : 'Uninstall'
+                                                    }) : null
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(CardDisplay, {
+                                            header: 'Publisher',
+                                            help: pluginDocsHelp('publisherHandbook', {
+                                                anchor: '#before-your-first-publish'
+                                            }),
+                                            contentGutterX: true,
+                                            contentGutterY: true,
+                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                spacing: 0.5,
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Avatar, {
+                                                        src: safePublisherHref(profile == null ? void 0 : profile.avatarUrl),
+                                                        alt: (_ref9 = profile == null ? void 0 : profile.displayName) != null ? _ref9 : 'Publisher',
+                                                        variant: "rounded",
+                                                        sx: {
+                                                            width: 40,
+                                                            height: 40,
+                                                            mb: 0.5
+                                                        },
+                                                        children: String((_ref10 = (_ref11 = profile == null ? void 0 : profile.displayName) != null ? _ref11 : profile == null ? void 0 : profile.handle) != null ? _ref10 : '?').slice(0, 1).toUpperCase()
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(MuiLink, {
+                                                        href: !(listing == null ? void 0 : listing.profileId) ? undefined : orgScoped ? orgSlug ? buildRoute(Route.ORG_MARKETPLACE_PUBLISHER, {
+                                                            orgSlug,
+                                                            // Handle, not id (AGL-1001); the id
+                                                            // still resolves for the beat
+                                                            // before the profile loads.
+                                                            handle: (_ref12 = profile == null ? void 0 : profile.handle) != null ? _ref12 : listing.profileId
+                                                        }) : undefined : orgSlug && subdomain ? buildRoute(Route.ORG_MARKETPLACE_PUBLISHER, {
+                                                            orgSlug,
+                                                            handle: (_ref13 = profile == null ? void 0 : profile.handle) != null ? _ref13 : listing.profileId
+                                                        }) : undefined,
+                                                        color: "primary",
+                                                        underline: "hover",
+                                                        variant: "body2",
+                                                        children: (_ref14 = profile == null ? void 0 : profile.displayName) != null ? _ref14 : (profile == null ? void 0 : profile.handle) ? `@${profile.handle}` : '…'
+                                                    }),
+                                                    (profile == null ? void 0 : profile.handle) ? /*#__PURE__*/ _jsx(Typography, {
+                                                        variant: "caption",
+                                                        color: "text.secondary",
+                                                        children: `@${profile.handle}`
+                                                    }) : null,
+                                                    (profile == null ? void 0 : profile.bio) ? /*#__PURE__*/ _jsx(Typography, {
+                                                        variant: "body2",
+                                                        color: "text.secondary",
+                                                        children: profile.bio
+                                                    }) : null,
+                                                    (()=>{
+                                                        const links = [
+                                                            {
+                                                                key: 'website',
+                                                                label: 'Website',
+                                                                icon: mdiWeb.path,
+                                                                href: safePublisherHref(profile == null ? void 0 : profile.website)
+                                                            },
+                                                            {
+                                                                key: 'support',
+                                                                label: 'Support',
+                                                                icon: mdiLifebuoy.path,
+                                                                href: safePublisherHref(profile == null ? void 0 : profile.supportUrl)
+                                                            },
+                                                            {
+                                                                key: 'github',
+                                                                label: 'GitHub',
+                                                                icon: mdiGithub.path,
+                                                                href: safePublisherHref(profile == null ? void 0 : profile.githubUrl)
+                                                            },
+                                                            {
+                                                                key: 'x',
+                                                                label: 'X',
+                                                                icon: mdiTwitter.path,
+                                                                href: safePublisherHref(profile == null ? void 0 : profile.xUrl)
+                                                            },
+                                                            {
+                                                                key: 'linkedin',
+                                                                label: 'LinkedIn',
+                                                                icon: mdiLinkedin.path,
+                                                                href: safePublisherHref(profile == null ? void 0 : profile.linkedinUrl)
+                                                            }
+                                                        ].filter((entry)=>entry.href);
+                                                        const email = typeof (profile == null ? void 0 : profile.supportEmail) === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(profile.supportEmail) ? profile.supportEmail : undefined;
+                                                        if (!links.length && !email) return null;
+                                                        return /*#__PURE__*/ _jsxs(Stack, {
+                                                            direction: "row",
+                                                            spacing: 0.5,
+                                                            children: [
+                                                                email ? /*#__PURE__*/ _jsx(Tooltip, {
+                                                                    title: `Support: ${email}`,
+                                                                    children: /*#__PURE__*/ _jsx(IconButton, {
+                                                                        size: "small",
+                                                                        component: "a",
+                                                                        href: `mailto:${email}`,
+                                                                        "aria-label": `Email support at ${email}`,
+                                                                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                                                            path: mdiEmailOutline.path,
+                                                                            fontSize: "small"
+                                                                        })
+                                                                    })
+                                                                }) : null,
+                                                                links.map((entry)=>/*#__PURE__*/ _jsx(Tooltip, {
+                                                                        title: entry.label,
+                                                                        children: /*#__PURE__*/ _jsx(IconButton, {
+                                                                            size: "small",
+                                                                            component: "a",
+                                                                            href: entry.href,
+                                                                            target: "_blank",
+                                                                            rel: "noopener noreferrer",
+                                                                            "aria-label": entry.label,
+                                                                            children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                                                                path: entry.icon,
+                                                                                fontSize: "small"
+                                                                            })
+                                                                        })
+                                                                    }, entry.key))
+                                                            ]
+                                                        });
+                                                    })()
+                                                ]
+                                            })
+                                        }),
+                                        (listing == null ? void 0 : listing.homepageUrl) || (listing == null ? void 0 : listing.repositoryUrl) ? /*#__PURE__*/ _jsx(CardDisplay, {
+                                            header: 'Links',
+                                            help: pluginDocsHelp('publisherHandbook', {
+                                                anchor: '#authoring-your-listing'
+                                            }),
+                                            contentGutterX: true,
+                                            contentGutterY: true,
+                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                spacing: 0.5,
+                                                children: [
+                                                    (listing == null ? void 0 : listing.homepageUrl) ? /*#__PURE__*/ _jsx(MuiLink, {
+                                                        href: listing.homepageUrl,
+                                                        target: "_blank",
+                                                        rel: "noopener noreferrer",
+                                                        color: "primary",
+                                                        underline: "hover",
+                                                        variant: "body2",
+                                                        children: 'Homepage'
+                                                    }) : null,
+                                                    (listing == null ? void 0 : listing.repositoryUrl) ? /*#__PURE__*/ _jsx(MuiLink, {
+                                                        href: listing.repositoryUrl,
+                                                        target: "_blank",
+                                                        rel: "noopener noreferrer",
+                                                        color: "primary",
+                                                        underline: "hover",
+                                                        variant: "body2",
+                                                        children: 'Source repository'
+                                                    }) : null
+                                                ]
+                                            })
+                                        }) : null,
+                                        /*#__PURE__*/ _jsx(CardDisplay, {
+                                            header: 'Version history',
+                                            help: pluginDocsHelp('publisherHandbook', {
+                                                anchor: '#shipping-a-new-version'
+                                            }),
+                                            contentGutterX: true,
+                                            contentGutterY: true,
+                                            children: versions.length ? /*#__PURE__*/ _jsxs(Stack, {
+                                                spacing: 1,
+                                                children: [
+                                                    versions.map((entry, index)=>{
+                                                        var _entry_activeInstalls;
+                                                        return /*#__PURE__*/ _jsxs(Stack, {
+                                                            spacing: 0.25,
+                                                            children: [
+                                                                /*#__PURE__*/ _jsxs(Stack, {
+                                                                    direction: "row",
+                                                                    spacing: 1,
+                                                                    sx: {
+                                                                        alignItems: 'center'
+                                                                    },
+                                                                    children: [
+                                                                        /*#__PURE__*/ _jsx(Typography, {
+                                                                            variant: "body2",
+                                                                            children: `v${entry.version}`
+                                                                        }),
+                                                                        index === 0 ? /*#__PURE__*/ _jsx(Chip, {
+                                                                            size: "small",
+                                                                            label: "Latest"
+                                                                        }) : null,
+                                                                        entry.trust === 'realm' ? /*#__PURE__*/ _jsx(Chip, {
+                                                                            size: "small",
+                                                                            color: "success",
+                                                                            label: "Realm-trusted"
+                                                                        }) : null,
+                                                                        /*#__PURE__*/ _jsx(Typography, {
+                                                                            variant: "caption",
+                                                                            color: "text.secondary",
+                                                                            children: entry.publishedAtMs ? new Date(entry.publishedAtMs).toLocaleDateString() : ''
+                                                                        })
+                                                                    ]
+                                                                }),
+                                                                entry.installCount || entry.activeInstalls ? /*#__PURE__*/ _jsxs(Typography, {
+                                                                    variant: "caption",
+                                                                    color: "text.secondary",
+                                                                    children: [
+                                                                        `${(_entry_activeInstalls = entry.activeInstalls) != null ? _entry_activeInstalls : 0} on this version`,
+                                                                        entry.installCount ? ` · ${entry.installCount} all time` : ''
+                                                                    ]
+                                                                }) : null
+                                                            ]
+                                                        }, entry.version);
+                                                    }),
+                                                    (installTotals == null ? void 0 : installTotals.untrackedActiveInstalls) || (installTotals == null ? void 0 : installTotals.untrackedInstallCount) ? /*#__PURE__*/ _jsx(Typography, {
+                                                        variant: "caption",
+                                                        color: "text.secondary",
+                                                        children: `${installTotals.untrackedInstallCount} ` + `install${installTotals.untrackedInstallCount === 1 ? '' : 's'} all-time and ${installTotals.untrackedActiveInstalls} still active predate per-version ` + 'tracking, and are not counted above.'
+                                                    }) : null
+                                                ]
+                                            }) : versionHistory.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "body2",
+                                                color: "text.secondary",
+                                                children: `Latest version: v${(_ref15 = listing == null ? void 0 : listing.latestVersion) != null ? _ref15 : '…'}`
+                                            }) : /*#__PURE__*/ _jsx(Stack, {
+                                                spacing: 0.5,
+                                                children: versionHistory.map((entry, index)=>{
+                                                    var _entry_publishedAt;
+                                                    return /*#__PURE__*/ _jsxs(Stack, {
+                                                        direction: "row",
+                                                        spacing: 1,
+                                                        sx: {
+                                                            alignItems: 'center'
+                                                        },
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Typography, {
+                                                                variant: "body2",
+                                                                children: `v${entry.version}`
+                                                            }),
+                                                            index === 0 ? /*#__PURE__*/ _jsx(Chip, {
+                                                                size: "small",
+                                                                label: "Latest"
+                                                            }) : null,
+                                                            /*#__PURE__*/ _jsx(Typography, {
+                                                                variant: "caption",
+                                                                color: "text.secondary",
+                                                                children: ((_entry_publishedAt = entry.publishedAt) == null ? void 0 : _entry_publishedAt.toDate) ? entry.publishedAt.toDate().toLocaleDateString() : ''
+                                                            })
+                                                        ]
+                                                    }, entry.version);
+                                                })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(ListingReviews, {
+                                            listingId: listingId,
+                                            listing: listing
+                                        }),
+                                        /*#__PURE__*/ _jsx(ReportTarget, {
+                                            listingId: listingId,
+                                            label: String((_ref16 = listing == null ? void 0 : listing.displayName) != null ? _ref16 : 'this listing')
+                                        })
+                                    ]
+                                })
+                            }
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Dialog, {
+                        open: confirmOpen,
+                        onClose: ()=>setConfirmOpen(false),
+                        maxWidth: "xs",
+                        fullWidth: true,
+                        children: [
+                            /*#__PURE__*/ _jsx(DialogTitle, {
+                                children: unreviewedInstall ? 'Install an unreviewed version?' : installed ? 'Update this listing?' : 'Install this listing?'
+                            }),
+                            /*#__PURE__*/ _jsx(DialogContent, {
+                                dividers: true,
+                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                    spacing: 1,
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(Typography, {
+                                            variant: "body2",
+                                            children: [
+                                                installed ? 'Update ' : 'Install ',
+                                                /*#__PURE__*/ _jsx("strong", {
+                                                    children: listing == null ? void 0 : listing.displayName
+                                                }),
+                                                listing ? ` (${listingArtifactLabel(listing)}, v${listing == null ? void 0 : listing.latestVersion})` : '',
+                                                '.'
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Typography, {
+                                            variant: "body2",
+                                            color: "text.secondary",
+                                            children: [
+                                                'This will be installed to ',
+                                                /*#__PURE__*/ _jsx("strong", {
+                                                    children: installTargetSummary()
+                                                }),
+                                                '.'
+                                            ]
+                                        }),
+                                        unreviewedInstall ? /*#__PURE__*/ _jsx(Alert, {
+                                            severity: "warning",
+                                            children: `v${listing == null ? void 0 : listing.latestVersion} has not passed review. ` + 'Every site you install it to is publicly reachable — ' + 'there is no staging site here — so unreviewed code ' + 'will serve real visitors until you uninstall it.'
+                                        }) : null
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs(DialogActions, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        onClick: ()=>setConfirmOpen(false),
+                                        children: 'Cancel'
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "contained",
+                                        color: "primary",
+                                        onClick: runInstall,
+                                        children: unreviewedInstall ? 'Install for testing' : installed ? 'Update' : 'Install'
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(ArtifactUpdateDialog, {
+                        open: updateOpen,
+                        onClose: ()=>setUpdateOpen(false),
+                        artifactName: (_ref17 = listing == null ? void 0 : listing.displayName) != null ? _ref17 : 'this listing',
+                        preview: updatePreview,
+                        loading: updateLoading,
+                        onApplyMerge: (takePaths, confirmDestructive)=>void runUpdate('merge', takePaths, confirmDestructive),
+                        onApplyCopy: ()=>void runCopy()
+                    }),
+                    /*#__PURE__*/ _jsx(UninstallImpactDialog, {
+                        open: pendingUninstall !== null,
+                        listing: listing,
+                        scope: (_ref18 = pendingUninstall == null ? void 0 : pendingUninstall.scope) != null ? _ref18 : 'host',
+                        targets: (_ref19 = pendingUninstall == null ? void 0 : pendingUninstall.targets) != null ? _ref19 : [],
+                        onCancel: ()=>setPendingUninstall(null),
+                        onConfirm: async ()=>{
+                            const target = pendingUninstall;
+                            setPendingUninstall(null);
+                            if (!target) return;
+                            await uninstall(listing, target.scope);
+                            setPinsNonce((nonce)=>nonce + 1);
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Dialog, {
+                        open: Boolean(lightboxUrl),
+                        onClose: ()=>setLightboxUrl(null),
+                        maxWidth: "lg",
+                        children: lightboxUrl ? /*#__PURE__*/ _jsx(Box, {
+                            component: "img",
+                            src: lightboxUrl,
+                            alt: `${listing == null ? void 0 : listing.displayName} screenshot`,
+                            onClick: ()=>setLightboxUrl(null),
+                            sx: {
+                                display: 'block',
+                                maxWidth: '100%',
+                                maxHeight: '85vh',
+                                cursor: 'zoom-out'
+                            }
+                        }) : null
+                    })
+                ]
+            })
+        ]
+    });
+}
+export default MarketplaceListingContent;
+
+//# sourceMappingURL=listing-content.component.js.map