@aglyn/plugins-marketplace 1.0.0-beta.143

package/src/lib/components/marketplace-browse.component.js

@@ -0,0 +1,802 @@
+/**
+ * @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 { mdiCheckDecagram } from "@aglyn/shared-data-mdi";
+import { AppLink, CardDisplay, MdiIcon } from "@aglyn/shared-ui-jsx";
+import { ListPagination } from "@aglyn/shared-ui-jsx/components/list-pagination.component";
+import { TABLE_PAGE_SIZE_DEFAULT } from "@aglyn/shared-ui-jsx/const/table-pagination";
+import { Alert, Chip, Tooltip, Grid, MenuItem, Rating, Stack, TextField, Typography } from "@mui/material";
+import { collection, doc, documentId, getDoc, limit, orderBy, query, where } from "firebase/firestore";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { buildRoute, PLATFORM_BRAND_NAME, pluginDocsHelp, Route } from "@aglyn/aglyn";
+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 grid 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 { isListingBrowsable, isListingDeleted, isPrivateListing, listingArtifactType, listingArtifactLabel, resolvePluginInstallState } from "../model/marketplace.js";
+import { ListingImage } from "./listing-image.component.js";
+// The console route table is shared (AGL-685), so these go through
+// buildRoute rather than being reassembled from a base string — the shape
+// of `/[orgSlug]/hosts/[host]/marketplace/…` is not this plugin's to know.
+/**
+ * How many install records the shelf reads to decide what it already runs.
+ *
+ * One number for the five collections that answer that question, because the
+ * card reads them together and a reader comparing a plugin's chip to a
+ * dataset's should not have to know which window was twice the other. It
+ * bounds an install-state LOOKUP, not the shelf: the listings query has its
+ * own cap, and the grid pages what survives the filters.
+ */ const INSTALL_STATE_CEILING = 100;
+/**
+ * Marketplace components browse (AGL-44). A read-only catalogue: each card links
+ * to the listing's detail page, which is the only place an install happens
+ * (AGL-867) — installing from a grid card was too easy and skipped the
+ * site-targeting choice. The card still shows install STATE (installed,
+ * org-wide) so the shelf reads honestly, but carries no install action.
+ */ export function MarketplaceBrowse(props) {
+    const { hostId } = props;
+    const firestore = useFirestore();
+    const { data: user } = useUser();
+    const { orgScoped, orgSlug: orgSlugProp, publisherId } = props;
+    const [handles, setHandles] = useState({});
+    // Listings are org-owned (AGL-652), so "is this mine" is an org comparison.
+    // Resolved from the routing mirror rather than a new prop so the component
+    // stays self-contained; hostIndex is signed-in readable.
+    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
+    ]);
+    // Card links were built as `/{hostDocId}/marketplace/…`, a shape that has
+    // not resolved since AGL-621/622 — every listing and publisher link on
+    // this grid 404'd. One shared resolution (AGL-673); null renders plain
+    // text rather than a link to nowhere.
+    const { orgSlug: resolvedOrgSlug, subdomain } = useConsoleHostRoute(hostId);
+    // Prefer the URL-supplied slug (AGL-867) — synchronous and always present at
+    // org scope — over the async host resolution, which the per-site route still
+    // relies on.
+    const orgSlug = orgSlugProp != null ? orgSlugProp : resolvedOrgSlug;
+    // Link targets differ by surface (AGL-772): the org marketplace resolves
+    // to the org route (`/[orgSlug]/marketplace/[listingId]`), the per-site tab
+    // to the host route. Null → plain text, never a link to nowhere. Publisher
+    // pages have no org route yet, so they stay text at org scope for now.
+    const listingHref = (listingId)=>orgScoped ? orgSlug ? buildRoute(Route.ORG_MARKETPLACE_LISTING, {
+            orgSlug,
+            listingId
+        }) : undefined : orgSlug && subdomain ? buildRoute(Route.ORG_MARKETPLACE_LISTING, {
+            orgSlug,
+            listingId
+        }) : undefined;
+    // Storefront links carry the publisher's HANDLE (AGL-1001), the identity
+    // shown right beside them on the card. The id remains a valid segment on
+    // the page itself, so a publisher whose handle hasn't loaded yet still
+    // links somewhere real rather than nowhere.
+    const publisherHref = (profileId)=>{
+        var _handles_profileId, _handles_profileId1;
+        return orgScoped ? // listings. Needs the URL slug, which is passed in at org scope.
+        orgSlug ? buildRoute(Route.ORG_MARKETPLACE_PUBLISHER, {
+            orgSlug,
+            handle: (_handles_profileId = handles[profileId]) != null ? _handles_profileId : profileId
+        }) : undefined : orgSlug && subdomain ? buildRoute(Route.ORG_MARKETPLACE_PUBLISHER, {
+            orgSlug,
+            handle: (_handles_profileId1 = handles[profileId]) != null ? _handles_profileId1 : profileId
+        }) : undefined;
+    };
+    /**
+   * NO `where('deletedAt','==',null)` HERE — soft-deleted listings are dropped
+   * in `items` below instead (AGL-1196).
+   *
+   * `deletedAt` flips every time a publisher unpublishes or republishes. A
+   * document that stops matching a live query leaves the query target, and the
+   * client can cache a `noDocument` tombstone at its own path — which is then
+   * served to every reader of that path, including the detail page, which
+   * reads `marketplaceListings/{id}` BY ID. So a browse session open across an
+   * unpublish could 404 a listing that exists, and republishing would not
+   * clear it: a resumed listen only pulls deltas, so an otherwise-unchanged
+   * document is never re-sent (AGL-827, AGL-929).
+   *
+   * Dropping the predicate removes the mechanism rather than healing it: with
+   * no `where`, no document can stop matching. The rule permits it —
+   * `marketplaceListings` is `allow read: if true`, with no `resource.data`
+   * term, so an unconstrained list is not denied. (That is NOT true of the
+   * scoped `datasets` query below, which is why this fix does not generalise.)
+   *
+   * It also fixes a quieter bug: `== null` matches only an EXPLICIT null, and
+   * Firestore cannot express "field is absent". Every publish path stamps
+   * `deletedAt: null` today, so this happens to be exact — but any future
+   * write path that omits the field would make a live listing silently
+   * invisible. An in-memory falsy check treats absent as live, which is what
+   * the dataset and email-template filters in this file already do.
+   *
+   * The cap counts CANDIDATES, not results — private and unreviewed listings
+   * already consume slots and get filtered below, so this is the same class of
+   * consumption, nudged up to leave room for soft-deleted rows. Measured on
+   * production 2026-08-03: 7 listings, 0 soft-deleted, 0 missing the field.
+   *
+   * ## The cap DOES take an `orderBy`, and it is not the same decision
+   *
+   * A `limit` with no ordering is answered in document-id order, and listing
+   * ids are random — so the ninety this loaded were an arbitrary ninety, and
+   * the client sort below then arranged that sample by date and called it
+   * "Newest". The window is now the newest ninety, which is what the default
+   * sort already claimed it was.
+   *
+   * `orderBy` carries the drop the `where` above was removed to avoid — it
+   * matches only documents that HAVE the field, so a listing without
+   * `createdAt` would not be mis-ordered, it would be invisible. That is safe
+   * here for a reason the `deletedAt` predicate could not offer: a listing is
+   * created by exactly two paths, `publish.ts` and `publish-plugin.ts`, and
+   * both stamp `createdAt` in the same `set` that brings the document into
+   * existence. Every other writer resolves an EXISTING listing by id and
+   * refuses when it is absent, so none of them can produce one without the
+   * field.
+   *
+   * It also cannot reproduce the tombstone (AGL-827/929) that made a mutable
+   * `where` unsafe: `createdAt` is written under `existing.empty` and never
+   * rewritten, so no document can stop matching mid-session and leave a
+   * `noDocument` cached at a path the detail page reads by id.
+   */ const { data: listings } = useFirestoreCollection(()=>query(collection(firestore, 'marketplaceListings'), orderBy('createdAt', 'desc'), limit(90)), [
+        firestore
+    ], {
+        idField: '$id'
+    });
+    /*
+   * ## The install-state lookups are ORDERED too, and they are not lists
+   *
+   * The five queries below (this one, the two pin collections, the org
+   * datasets and the site's email templates) answer one question per card:
+   * has this listing already been installed here. None of them is rendered —
+   * each is folded into a map keyed by listing id — so the fix that suits the
+   * shelf above does not suit them: there is no page to walk and no footer to
+   * put a control in.
+   *
+   * What they share with it is the defect. A bare `limit` is answered in
+   * DOCUMENT-ID order, so an unnamed window is an arbitrary slice of its
+   * collection, and a lookup MISS is indistinguishable from a genuine
+   * not-installed: a workspace past such a window is shown "Add to this site"
+   * beside something it already runs, and the detail page — which reads its
+   * own pins by id — disagrees with the grid it was reached from.
+   *
+   * `collectionCeiling` names the order and asks for one row past the
+   * ceiling, which is what turns "the window may have bitten" into a fact the
+   * shelf can state rather than a silence it cannot.
+   */ const { data: installedRead } = useFirestoreCollection(()=>collectionCeiling(collection(firestore, 'hosts', hostId, 'components'), INSTALL_STATE_CEILING), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
+    const { rows: installedDocs, truncated: installedTruncated } = useMemo(()=>ceilingedWindow(installedRead, INSTALL_STATE_CEILING), [
+        installedRead
+    ]);
+    // listingId → installed component doc (deleted installs don't count).
+    const installed = useMemo(()=>{
+        const map = {};
+        for (const definition of installedDocs != null ? installedDocs : []){
+            var _definition_marketplace;
+            const listingId = definition == null ? void 0 : (_definition_marketplace = definition.marketplace) == null ? void 0 : _definition_marketplace.listingId;
+            if (listingId && !definition.deletedAt) map[listingId] = definition;
+        }
+        return map;
+    }, [
+        installedDocs
+    ]);
+    // Plugin installs are version PINS, not component snapshots (AGL-656): the
+    // `components` map above never holds one, so a plugin already installed —
+    // at host or org scope — showed "Add to this site". These two pin
+    // collections are what the loader honors (a host pin shadows an org pin).
+    const orgId = useHostOrgId(hostId);
+    const { data: hostPinRead } = useFirestoreCollection(()=>collectionCeiling(collection(firestore, 'hosts', hostId, 'installs'), INSTALL_STATE_CEILING), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
+    const { rows: hostPinDocs, truncated: hostPinsTruncated } = useMemo(()=>ceilingedWindow(hostPinRead, INSTALL_STATE_CEILING), [
+        hostPinRead
+    ]);
+    // Held at null while `useHostOrgId` is in flight, never `orgs/-pending-`
+    // (AGL-1440): the AGL-1047 comment seven lines below records the same
+    // denial-every-mount shape for `useScopeTokens` — this listen had it too.
+    const { data: orgPinRead } = useFirestoreCollection(()=>orgId ? collectionCeiling(collection(firestore, 'orgs', orgId, 'installs'), INSTALL_STATE_CEILING) : null, [
+        firestore,
+        orgId
+    ], {
+        idField: '$id'
+    });
+    const { rows: orgPinDocs, truncated: orgPinsTruncated } = useMemo(()=>ceilingedWindow(orgPinRead, INSTALL_STATE_CEILING), [
+        orgPinRead
+    ]);
+    // Scoped (AGL-1044): an unfiltered list is REJECTED for a scoped member,
+    // not filtered, so this would error without the constraint.
+    //
+    // 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;
+    // The AGL-657 types land in neither the components collection nor a pin
+    // (AGL-789): a dataset schema becomes an org dataset, an email template a
+    // draft version. Both installers stamp the source listing, so read those.
+    /*
+   * `documentId()` rather than a field, for the reason the audience sweep in
+   * `campaign-send.ts` gives: Firestore's automatic single-field index for an
+   * array member is keyed on the value and the document name, so
+   * `array-contains-any` plus `orderBy(__name__)` is served by it. Ordering on
+   * anything else would need a composite index per scope shape.
+   *
+   * The ceiling is the shared one. It is not sized for the dataset
+   * collection: it is sized for the number of LISTINGS whose install state a
+   * shelf of ninety cards can describe, which is the same question its four
+   * neighbours answer, so it is the same number.
+   */ const { data: datasetRead } = useFirestoreCollection(()=>orgId && scopeLoaded ? query(collection(firestore, 'orgs', orgId, 'datasets'), ...needsScope ? [
+            where('visibleTo', 'array-contains-any', scopeTokens)
+        ] : [], orderBy(documentId()), limit(INSTALL_STATE_CEILING + 1)) : null, [
+        firestore,
+        orgId,
+        scopeLoaded,
+        needsScope,
+        scopeTokens
+    ], // `visibleTo` is MUTABLE — every scope edit rewrites it — so this query
+    // can tombstone a dataset the way AGL-827 tombstoned a host. The rule
+    // requires the constraint for anyone who is not org-wide, so unlike the
+    // listings query above the predicate cannot simply be dropped (AGL-1196).
+    {
+        idField: '$id',
+        confirmDisappearances: true
+    });
+    const { rows: datasetDocs, truncated: datasetsTruncated } = useMemo(()=>ceilingedWindow(datasetRead, INSTALL_STATE_CEILING), [
+        datasetRead
+    ]);
+    const { data: emailRead } = useFirestoreCollection(()=>collectionCeiling(collection(firestore, 'hosts', hostId, 'emailTemplates'), INSTALL_STATE_CEILING), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
+    const { rows: emailDocs, truncated: emailsTruncated } = useMemo(()=>ceilingedWindow(emailRead, INSTALL_STATE_CEILING), [
+        emailRead
+    ]);
+    // A theme is not a document in a collection — it is a field on the site
+    // (AGL-1020) — so its install is read from the host doc rather than from a
+    // per-artifact query like the two above.
+    const { data: hostDoc } = useFirestoreDoc(()=>doc(firestore, 'hosts', hostId), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
+    // listingId → the newest install of it. A schema install deliberately makes
+    // a NEW dataset every time, so this is genuinely one-to-many; the highest
+    // installed version is what the card should speak for.
+    const artifactInstalls = useMemo(()=>{
+        var _hostDoc_themeInstalledFrom, _hostDoc_themeInstalledFrom1;
+        const map = {};
+        const note = (listingId, version)=>{
+            var _map_id;
+            const id = listingId ? String(listingId) : '';
+            if (!id) return;
+            const next = version != null ? String(version) : null;
+            const seen = (_map_id = map[id]) == null ? void 0 : _map_id.version;
+            if (!seen || next && next > seen) map[id] = {
+                version: next
+            };
+        };
+        for (const dataset of datasetDocs != null ? datasetDocs : []){
+            var _dataset_source, _dataset_source1;
+            if (dataset.deletedAt) continue;
+            note((_dataset_source = dataset.source) == null ? void 0 : _dataset_source.listingId, (_dataset_source1 = dataset.source) == null ? void 0 : _dataset_source1.version);
+        }
+        for (const template of emailDocs != null ? emailDocs : []){
+            var _template_installedFrom, _template_installedFrom1;
+            if (template.deletedAt) continue;
+            note((_template_installedFrom = template.installedFrom) == null ? void 0 : _template_installedFrom.listingId, (_template_installedFrom1 = template.installedFrom) == null ? void 0 : _template_installedFrom1.version);
+        }
+        note(hostDoc == null ? void 0 : (_hostDoc_themeInstalledFrom = hostDoc.themeInstalledFrom) == null ? void 0 : _hostDoc_themeInstalledFrom.listingId, hostDoc == null ? void 0 : (_hostDoc_themeInstalledFrom1 = hostDoc.themeInstalledFrom) == null ? void 0 : _hostDoc_themeInstalledFrom1.version);
+        return map;
+    }, [
+        datasetDocs,
+        emailDocs,
+        hostDoc
+    ]);
+    const hostPins = useMemo(()=>{
+        const map = {};
+        for (const pin of hostPinDocs != null ? hostPinDocs : [])map[pin.$id] = pin;
+        return map;
+    }, [
+        hostPinDocs
+    ]);
+    const orgPins = useMemo(()=>{
+        const map = {};
+        for (const pin of orgPinDocs != null ? orgPinDocs : [])map[pin.$id] = pin;
+        return map;
+    }, [
+        orgPinDocs
+    ]);
+    // Resolve each listing's publisher handle once. `handles` must NOT be a
+    // dependency here: the effect writes `handles`, so listing it would make the
+    // effect re-run on its own output. During the post-load window, when
+    // `listings` arrives while every other subscription on this always-mounted
+    // grid is also settling, that self-retrigger adds render+effect cycles to an
+    // already dense flurry — enough that a concurrent update elsewhere can trip
+    // React's nested-update limit (AGL-785). A ref of already-requested ids
+    // dedupes instead, so the effect depends only on `listings`.
+    const requestedHandles = useRef(new Set());
+    useEffect(()=>{
+        const profileIds = [
+            ...new Set((listings != null ? listings : []).map((listing)=>listing.profileId))
+        ].filter((profileId)=>profileId && !requestedHandles.current.has(String(profileId)));
+        if (!profileIds.length) return;
+        for (const profileId of profileIds)requestedHandles.current.add(String(profileId));
+        let cancelled = false;
+        Promise.all(profileIds.map(async (profileId)=>{
+            var _ref;
+            const snapshot = await getDoc(doc(firestore, 'publisherProfiles', String(profileId))).catch(()=>null);
+            return [
+                profileId,
+                (_ref = snapshot == null ? void 0 : snapshot.get('handle')) != null ? _ref : ''
+            ];
+        })).then((entries)=>{
+            if (!cancelled) {
+                setHandles((prev)=>_extends({}, prev, Object.fromEntries(entries)));
+            }
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        listings,
+        firestore
+    ]);
+    // Browse controls (AGL-95): client-side search/filter/sort over the
+    // fetched page of listings.
+    const [search, setSearch] = useState('');
+    const [category, setCategory] = useState(null);
+    const [sort, setSort] = useState('newest');
+    const categories = useMemo(()=>[
+            ...new Set((listings != null ? listings : []).map((listing)=>listing.category).filter(Boolean))
+        ].sort(), [
+        listings
+    ]);
+    const items = useMemo(()=>{
+        const needle = search.trim().toLowerCase();
+        const filtered = (listings != null ? listings : []).filter((listing)=>{
+            // Private plugins never appear here, not even for the org that owns
+            // them (AGL-968/993). The owner exemption below exists so a publisher
+            // can watch their own SUBMISSION move through review — but a private
+            // listing is not waiting to be listed, it is deliberately not for the
+            // marketplace, and showing it in this grid is the one thing "private"
+            // promises will not happen. Owners reach theirs from
+            // Marketplace › Listings, whose View opens the same detail page
+            // installs happen on.
+            // Soft-deleted listings used to be excluded by the query itself; they
+            // are dropped here now so no mutable field sits in a `where`
+            // (AGL-1196). Unconditional — unlike the review gate below, deletion
+            // has no owner exemption.
+            if (isListingDeleted(listing)) return false;
+            if (isPrivateListing(listing)) return false;
+            // Review queue gate (AGL-432): unreviewed/rejected plugin listings
+            // stay off the public browse; the owner still sees their own (the
+            // detail page shows them the status). UX-level only — the docs are
+            // public-readable by design.
+            if (!isListingBrowsable(listing) && listing.profileId !== viewerOrgId) {
+                return false;
+            }
+            // Publisher page (AGL-869): only this publisher's listings.
+            if (publisherId && listing.profileId !== publisherId) return false;
+            if (category && listing.category !== category) return false;
+            if (!needle) return true;
+            return [
+                listing.displayName,
+                listing.description,
+                listing.category
+            ].filter(Boolean).some((value)=>value.toLowerCase().includes(needle));
+        });
+        return [
+            ...filtered
+        ].sort((a, b)=>{
+            var _ref, _ref1;
+            var _b_createdAt, _a_createdAt;
+            if (sort === 'installed') {
+                var _b_installCount, _a_installCount;
+                return ((_b_installCount = b.installCount) != null ? _b_installCount : 0) - ((_a_installCount = a.installCount) != null ? _a_installCount : 0);
+            }
+            if (sort === 'rated') {
+                var _b_ratingAverage, _a_ratingAverage, _b_ratingCount, _a_ratingCount;
+                // Unrated listings sort last rather than as zero-stars — a new
+                // listing has not been judged badly, it has not been judged.
+                const byAverage = ((_b_ratingAverage = b.ratingAverage) != null ? _b_ratingAverage : -1) - ((_a_ratingAverage = a.ratingAverage) != null ? _a_ratingAverage : -1);
+                return byAverage || ((_b_ratingCount = b.ratingCount) != null ? _b_ratingCount : 0) - ((_a_ratingCount = a.ratingCount) != null ? _a_ratingCount : 0);
+            }
+            return ((_ref = (_b_createdAt = b.createdAt) == null ? void 0 : _b_createdAt.seconds) != null ? _ref : 0) - ((_ref1 = (_a_createdAt = a.createdAt) == null ? void 0 : _a_createdAt.seconds) != null ? _ref1 : 0);
+        });
+    }, [
+        listings,
+        search,
+        category,
+        sort,
+        publisherId,
+        user == null ? void 0 : user.uid
+    ]);
+    /*
+   * The shelf PAGES (AGL-2501). It used to render every card the window held
+   * in one wall, so the only control over how much arrived at once was the
+   * cap in the query — a number the reader cannot see and cannot change.
+   *
+   * Client-side, deliberately, and this is the case `ListPagination`'s
+   * `count` prop exists for. The search box, the category chips and the
+   * owner/review gates are all resolved in memory, so a server page would be
+   * a page of CANDIDATES: a reader filtering to one category would get pages
+   * that were mostly empty and a count that meant nothing. Paging what is
+   * left after the filter is the only version whose numbers are about what is
+   * on screen.
+   */ /**
+   * The install-state lookups did not read everything they were asked about.
+   *
+   * Said on the SHELF rather than on the card that is wrong, because there is
+   * no way to know which card that is: a miss and a genuine not-installed are
+   * the same absence from the same map. What the reader can act on is that the
+   * chips are a floor — anything marked installed is installed, and something
+   * unmarked may still be.
+   */ const installStateTruncated = installedTruncated || hostPinsTruncated || orgPinsTruncated || datasetsTruncated || emailsTruncated;
+    const [page, setPage] = useState(0);
+    const [pageSize, setPageSize] = useState(TABLE_PAGE_SIZE_DEFAULT);
+    /*
+   * A new query starts at page one. Page four of a category with two pages
+   * does not exist, and an out-of-range page renders as an empty grid with
+   * nothing saying why — which reads as the filter having broken.
+   */ useEffect(()=>{
+        setPage(0);
+    }, [
+        search,
+        category,
+        sort,
+        pageSize
+    ]);
+    const shown = useMemo(()=>items.slice(page * pageSize, (page + 1) * pageSize), [
+        items,
+        page,
+        pageSize
+    ]);
+    return /*#__PURE__*/ _jsxs(CardDisplay, {
+        header: 'Marketplace components',
+        help: pluginDocsHelp('plugins', {
+            anchor: '#install--upgrade'
+        }),
+        contentGutterX: true,
+        contentGutterY: true,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    mb: 2,
+                    alignItems: 'center',
+                    flexWrap: 'wrap',
+                    rowGap: 1
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        placeholder: "Search components…",
+                        value: search,
+                        onChange: (event)=>setSearch(event.target.value),
+                        size: "small",
+                        sx: {
+                            minWidth: 200
+                        }
+                    }),
+                    categories.map((value)=>/*#__PURE__*/ _jsx(Chip, {
+                            label: value,
+                            variant: category === value ? 'filled' : 'outlined',
+                            color: category === value ? 'primary' : 'default',
+                            onClick: ()=>setCategory((previous)=>previous === value ? null : value)
+                        }, value)),
+                    /*#__PURE__*/ _jsxs(TextField, {
+                        value: sort,
+                        onChange: (event)=>setSort(event.target.value),
+                        size: "small",
+                        select: true,
+                        sx: {
+                            ml: 'auto',
+                            minWidth: 150
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "newest",
+                                children: 'Newest'
+                            }),
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "installed",
+                                children: 'Most installed'
+                            }),
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "rated",
+                                children: 'Highest rated'
+                            })
+                        ]
+                    })
+                ]
+            }),
+            installStateTruncated ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "info",
+                sx: {
+                    mb: 2
+                },
+                children: `Installed state is resolved from the first ${INSTALL_STATE_CEILING} ` + 'install records in this workspace, ordered by id. There are ' + 'more, so a card may not be marked installed even though it is. ' + 'Open a listing to see what this workspace actually runs.'
+            }) : null,
+            items.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'No marketplace components published yet — publish one of your ' + 'reusable components from the Setup page to be the first.'
+            }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Grid, {
+                        container: true,
+                        spacing: 2,
+                        children: shown.map((listing)=>{
+                            var _ref, _listing_priceUsd, _listing_ratingAverage, _listing_ratingAverage1;
+                            var _componentInstall_marketplace;
+                            const artifactType = listingArtifactType(listing);
+                            const isPlugin = artifactType === 'plugin';
+                            const pluginState = resolvePluginInstallState(listing.latestVersion, isPlugin ? hostPins[listing.$id] : null, isPlugin ? orgPins[listing.$id] : null);
+                            const componentInstall = installed[listing.$id];
+                            // datasetSchema/emailTemplate installs are tracked by the source
+                            // listing stamped on what they created (AGL-789).
+                            //
+                            // `emailStarter` is deliberately absent. Every other type has ONE
+                            // install per site to point at — a pin, a dataset, a draft on a
+                            // fixed catalog key, the site's theme — so "Installed" names
+                            // something. A starter installs as a NEW email each time, and a
+                            // site may keep five of them; there is no single copy for a chip
+                            // to describe, and marking the listing installed would grey out
+                            // the button that makes the sixth.
+                            const artifactInstall = artifactType === 'datasetSchema' || artifactType === 'emailTemplate' || artifactType === 'theme' ? artifactInstalls[listing.$id] : undefined;
+                            const isInstalled = 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 priceUsd = Number((_listing_priceUsd = listing.priceUsd) != null ? _listing_priceUsd : 0);
+                            const detailHref = listingHref(listing.$id);
+                            return /*#__PURE__*/ _jsx(Grid, {
+                                size: {
+                                    xs: 12,
+                                    sm: 6,
+                                    md: 4
+                                },
+                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                    spacing: 1,
+                                    sx: {
+                                        border: 1,
+                                        borderColor: 'divider',
+                                        borderRadius: 1,
+                                        p: 2,
+                                        height: '100%'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(ListingImage, {
+                                            src: listing.previewImageUrl,
+                                            alt: `${listing.displayName} preview`,
+                                            sx: {
+                                                width: '100%',
+                                                height: 120,
+                                                objectFit: 'cover',
+                                                borderRadius: 1
+                                            }
+                                        }),
+                                        /*#__PURE__*/ _jsx(AppLink, {
+                                            href: listingHref(listing.$id),
+                                            color: "inherit",
+                                            underline: "hover",
+                                            variant: "subtitle2",
+                                            children: listing.displayName
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Stack, {
+                                            direction: "row",
+                                            spacing: 1,
+                                            sx: {
+                                                alignItems: 'center',
+                                                flexWrap: 'wrap',
+                                                rowGap: 1
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Chip, {
+                                                    size: "small",
+                                                    color: "primary",
+                                                    label: listingArtifactLabel(listing)
+                                                }),
+                                                listing.category ? /*#__PURE__*/ _jsx(Chip, {
+                                                    size: "small",
+                                                    label: listing.category
+                                                }) : null,
+                                                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. ' + 'It is a claim about the publisher, not about this ' + 'release — it survives a version bump.',
+                                                    children: /*#__PURE__*/ _jsx(Chip, {
+                                                        size: "small",
+                                                        color: "info",
+                                                        label: "Verified publisher",
+                                                        // Carries more weight than the neighbouring
+                                                        // classification chips on purpose: it is the only one
+                                                        // that says a human vouched for the code, and the
+                                                        // rest are just taxonomy. The icon is what makes it
+                                                        // findable when scanning a grid rather than reading
+                                                        // one card.
+                                                        icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                                                            path: mdiCheckDecagram.path,
+                                                            sx: {
+                                                                fontSize: 16
+                                                            }
+                                                        }),
+                                                        sx: {
+                                                            fontWeight: 600
+                                                        }
+                                                    })
+                                                }) : null,
+                                                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, so a new release starts ' + 'without it. Not a security guarantee: every plugin ' + 'runs in the same sandbox either way.',
+                                                    children: /*#__PURE__*/ _jsx(Chip, {
+                                                        size: "small",
+                                                        color: "success",
+                                                        label: "Reviewed"
+                                                    })
+                                                }) : null,
+                                                /*#__PURE__*/ _jsx(Chip, {
+                                                    size: "small",
+                                                    color: priceUsd > 0 ? 'primary' : 'success',
+                                                    variant: priceUsd > 0 ? 'filled' : 'outlined',
+                                                    label: priceUsd > 0 ? `$${priceUsd}` : 'Free'
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Typography, {
+                                            variant: "caption",
+                                            color: "text.secondary",
+                                            children: [
+                                                `v${listing.latestVersion}`,
+                                                handles[listing.profileId] ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                                    children: [
+                                                        ' · by ',
+                                                        /*#__PURE__*/ _jsx(AppLink, {
+                                                            href: publisherHref(listing.profileId),
+                                                            color: "primary",
+                                                            underline: "hover",
+                                                            children: `@${handles[listing.profileId]}`
+                                                        })
+                                                    ]
+                                                }) : '',
+                                                listing.installCount ? ` · ${listing.installCount} install${listing.installCount === 1 ? '' : 's'}` : ''
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(Stack, {
+                                            direction: "row",
+                                            spacing: 0.5,
+                                            sx: {
+                                                alignItems: 'center'
+                                            },
+                                            children: listing.ratingCount ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                                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})`
+                                                    })
+                                                ]
+                                            }) : /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                color: "text.secondary",
+                                                children: 'Not yet rated'
+                                            })
+                                        }),
+                                        listing.description ? /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "body2",
+                                            color: "text.secondary",
+                                            sx: {
+                                                flex: 1
+                                            },
+                                            // Four lines, then ellipsis (AGL-1002). Grid rows
+                                            // stretch to their tallest card, so one publisher's
+                                            // essay used to leave every card beside it mostly white
+                                            // space; the full text is one click away.
+                                            //
+                                            // Plain `style`, not `sx`: emotion drops the
+                                            // `-webkit-box` display value on the way through, and
+                                            // without it the other three properties clamp nothing
+                                            // (measured — `display` computed to `flow-root` while
+                                            // line-clamp and box-orient came through fine). Nothing
+                                            // here reads the theme, so there is nothing to lose.
+                                            style: {
+                                                display: '-webkit-box',
+                                                WebkitBoxOrient: 'vertical',
+                                                WebkitLineClamp: 4,
+                                                overflow: 'hidden'
+                                            },
+                                            children: listing.description
+                                        }) : /*#__PURE__*/ _jsx("span", {
+                                            style: {
+                                                flex: 1
+                                            }
+                                        }),
+                                        isInstalled ? /*#__PURE__*/ _jsxs(Stack, {
+                                            direction: "row",
+                                            spacing: 0.75,
+                                            sx: {
+                                                alignItems: 'center',
+                                                flexWrap: 'wrap'
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Typography, {
+                                                    variant: "caption",
+                                                    color: "success.main",
+                                                    children: `Installed${installedVersion ? ` (v${installedVersion})` : ''}`
+                                                }),
+                                                isPlugin && pluginState.scope === 'org' ? /*#__PURE__*/ _jsx(Chip, {
+                                                    size: "small",
+                                                    variant: "outlined",
+                                                    label: pluginState.shadowed ? 'Org-wide (shadowed)' : 'Org-wide'
+                                                }) : null
+                                            ]
+                                        }) : null,
+                                        /*#__PURE__*/ _jsx(AppLink, {
+                                            componentVariant: "button",
+                                            size: "small",
+                                            variant: "outlined",
+                                            color: "primary",
+                                            href: detailHref != null ? detailHref : '',
+                                            disabled: !detailHref,
+                                            children: priceUsd > 0 && !isInstalled ? `View details · $${priceUsd}` : 'View details'
+                                        })
+                                    ]
+                                })
+                            }, listing.$id);
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(ListPagination, {
+                        page: page,
+                        pageSize: pageSize,
+                        rowCount: shown.length,
+                        count: items.length,
+                        onPageChange: setPage,
+                        onPageSizeChange: setPageSize
+                    })
+                ]
+            })
+        ]
+    });
+}
+MarketplaceBrowse.displayName = 'MarketplaceBrowse';
+export default MarketplaceBrowse;
+
+//# sourceMappingURL=marketplace-browse.component.js.map