@aglyn/plugins-marketplace 1.2.0 → 1.3.0

package/src/lib/components/marketplace-pay-panel.component.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @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.
+ */
+import type { BillingAddressValue } from '@aglyn/shared-ui-jsx/stripe/billing-address-form.component';
+import { type PayPrerequisite, type PayQuote } from '../model/marketplace-pay';
+/** Which part of paying for a listing is on screen. */
+export type PayStep = {
+    kind: 'confirm';
+    quote: PayQuote;
+}
+/** A card is needed, and this person can add one: `null` until its form has a secret. */
+ | {
+    kind: 'card';
+    clientSecret: string | null;
+} | {
+    kind: 'address';
+}
+/** Something is needed that this person cannot add. */
+ | {
+    kind: 'ask-billing';
+    need: PayPrerequisite;
+    amountCents: number | null;
+};
+export interface MarketplacePayPanelProps {
+    step: PayStep;
+    listingName: string;
+    busy: boolean;
+    /** Stripe's reason, or ours, for the last thing that did not go through. */
+    error: string | null;
+    /** The workspace's Billing page, when its address is known. */
+    billingHref?: string | null;
+    onPay: () => void;
+    onCardSaved: (setupIntentId: string) => Promise<void> | void;
+    onAddressSaved: (address: BillingAddressValue) => Promise<void> | void;
+    onCancel: () => void;
+}
+/**
+ * Paying for a listing, in place (AGL-4049).
+ *
+ * Inline, under the button that asked for it, in the listing's sidebar and in
+ * Create site alike, for the reason the billing card form is inline: a payment
+ * surface that appears over the page and looks like a different product is a
+ * reason to stop buying. Nothing here is a Dialog, and the card and address
+ * fields are Stripe's own, so the card data guarantee is the billing page's.
+ *
+ * The total is on screen before the Pay button is: a saved card charged
+ * without one is not a purchase anybody agreed to.
+ *
+ * Figma: "Aglyn Console (web)" → page "Marketplace · Publish & review" →
+ * section "✅ CURRENT · Paying in the console", and page "Sites · Create site"
+ * → frames "Choose your starter · Buy (card on file)" and "· Buy (add a card)".
+ */
+export declare function MarketplacePayPanel(props: MarketplacePayPanelProps): import("react").JSX.Element;
+export default MarketplacePayPanel;

package/src/lib/components/marketplace-pay-panel.component.js

@@ -0,0 +1,228 @@
+/**
+ * @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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { orgPermissionLabel } from "@aglyn/aglyn/app-utils/org-permissions";
+import { PrerequisiteNotice } from "@aglyn/shared-ui-jsx/components/prerequisite-notice.component";
+import { LazyBillingAddressForm, LazyBillingCardForm } from "@aglyn/shared-ui-jsx/stripe/lazy-stripe";
+import { Alert, Button, CircularProgress, Divider, Stack, Typography } from "@mui/material";
+import { Suspense } from "react";
+import { formatPayCents, payCardLabel } from "../model/marketplace-pay.js";
+const SUMMARY_LINE_SX = {
+    justifyContent: 'space-between'
+};
+function SummaryLine(props) {
+    const variant = props.strong ? 'subtitle2' : 'body2';
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 2,
+        sx: SUMMARY_LINE_SX,
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: variant,
+                children: props.label
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: variant,
+                children: props.value
+            })
+        ]
+    });
+}
+const FormLoading = ()=>/*#__PURE__*/ _jsx(CircularProgress, {
+        size: 24,
+        "aria-label": "Loading the card form"
+    });
+/**
+ * Paying for a listing, in place (AGL-4049).
+ *
+ * Inline, under the button that asked for it, in the listing's sidebar and in
+ * Create site alike, for the reason the billing card form is inline: a payment
+ * surface that appears over the page and looks like a different product is a
+ * reason to stop buying. Nothing here is a Dialog, and the card and address
+ * fields are Stripe's own, so the card data guarantee is the billing page's.
+ *
+ * The total is on screen before the Pay button is: a saved card charged
+ * without one is not a purchase anybody agreed to.
+ *
+ * Figma: "Aglyn Console (web)" → page "Marketplace · Publish & review" →
+ * section "✅ CURRENT · Paying in the console", and page "Sites · Create site"
+ * → frames "Choose your starter · Buy (card on file)" and "· Buy (add a card)".
+ */ export function MarketplacePayPanel(props) {
+    const { step, listingName, busy, error, billingHref, onPay, onCardSaved, onAddressSaved, onCancel } = props;
+    const failure = error ? /*#__PURE__*/ _jsx(Alert, {
+        severity: "warning",
+        "data-marketplace-pay-error": true,
+        children: error
+    }) : null;
+    if (step.kind === 'confirm') {
+        const { quote } = step;
+        return /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 1.5,
+            "data-marketplace-pay": "confirm",
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "subtitle2",
+                    children: `Buy ${quote.listingName}`
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.5,
+                    children: [
+                        /*#__PURE__*/ _jsx(SummaryLine, {
+                            label: "Price",
+                            value: formatPayCents(quote.amountCents)
+                        }),
+                        /*#__PURE__*/ _jsx(SummaryLine, {
+                            label: "Sales tax",
+                            value: formatPayCents(quote.taxCents)
+                        }),
+                        /*#__PURE__*/ _jsx(Divider, {}),
+                        /*#__PURE__*/ _jsx(SummaryLine, {
+                            label: "Total",
+                            value: formatPayCents(quote.totalCents),
+                            strong: true
+                        })
+                    ]
+                }),
+                quote.canPay ? /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: `Charged to ${payCardLabel(quote.card)}. The receipt lands in Billing.`
+                        }),
+                        error ? /*#__PURE__*/ _jsx(PrerequisiteNotice, {
+                            severity: "warning",
+                            href: billingHref != null ? billingHref : undefined,
+                            actionLabel: "Open Billing",
+                            children: error
+                        }) : null,
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "contained",
+                                    size: "small",
+                                    disabled: busy,
+                                    onClick: onPay,
+                                    children: busy ? 'Paying…' : `Pay ${formatPayCents(quote.totalCents)}`
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    disabled: busy,
+                                    onClick: onCancel,
+                                    children: 'Cancel'
+                                })
+                            ]
+                        })
+                    ]
+                }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(PrerequisiteNotice, {
+                            severity: "warning",
+                            children: `Buying this charges your workspace's card, which takes the "${orgPermissionLabel('billing.manage')}" permission. Ask someone who manages billing to buy it.`
+                        }),
+                        /*#__PURE__*/ _jsx(Stack, {
+                            direction: "row",
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                onClick: onCancel,
+                                children: 'Close'
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+    if (step.kind === 'card') {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 1.5,
+            "data-marketplace-pay": "card",
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "subtitle2",
+                    children: `Add a card to buy ${listingName}`
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: 'It stays on file for this workspace, in Billing, where you can change or remove it.'
+                }),
+                failure,
+                /*#__PURE__*/ _jsx(Suspense, {
+                    fallback: /*#__PURE__*/ _jsx(FormLoading, {}),
+                    children: step.clientSecret ? /*#__PURE__*/ _jsx(LazyBillingCardForm, {
+                        clientSecret: step.clientSecret,
+                        onConfirmed: onCardSaved,
+                        onCancel: onCancel
+                    }) : /*#__PURE__*/ _jsx(FormLoading, {})
+                })
+            ]
+        });
+    }
+    if (step.kind === 'address') {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 1.5,
+            "data-marketplace-pay": "address",
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "subtitle2",
+                    children: 'Add a billing address'
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: 'Sales tax is calculated from it. It stays on file for this workspace, in Billing.'
+                }),
+                failure,
+                /*#__PURE__*/ _jsx(Suspense, {
+                    fallback: /*#__PURE__*/ _jsx(FormLoading, {}),
+                    children: /*#__PURE__*/ _jsx(LazyBillingAddressForm, {
+                        onConfirmed: onAddressSaved,
+                        onCancel: onCancel
+                    })
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1.5,
+        "data-marketplace-pay": "ask-billing",
+        children: [
+            step.amountCents === null ? null : /*#__PURE__*/ _jsx(SummaryLine, {
+                label: "Price",
+                value: formatPayCents(step.amountCents)
+            }),
+            /*#__PURE__*/ _jsx(PrerequisiteNotice, {
+                severity: "warning",
+                children: `${step.need === 'card_required' ? 'This workspace needs a card on file to buy this.' : 'This workspace needs a billing address to buy this: sales tax is calculated from it.'} Someone with the "${orgPermissionLabel('billing.manage')}" permission can add it in Billing.`
+            }),
+            /*#__PURE__*/ _jsx(Stack, {
+                direction: "row",
+                children: /*#__PURE__*/ _jsx(Button, {
+                    size: "small",
+                    onClick: onCancel,
+                    children: 'Close'
+                })
+            })
+        ]
+    });
+}
+export default MarketplacePayPanel;
+
+//# sourceMappingURL=marketplace-pay-panel.component.js.map

package/src/lib/components/marketplace-pay-panel.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/marketplace/src/lib/components/marketplace-pay-panel.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport { orgPermissionLabel } from '@aglyn/aglyn/app-utils/org-permissions'\nimport { PrerequisiteNotice } from '@aglyn/shared-ui-jsx/components/prerequisite-notice.component'\nimport type { BillingAddressValue } from '@aglyn/shared-ui-jsx/stripe/billing-address-form.component'\nimport { LazyBillingAddressForm, LazyBillingCardForm } from '@aglyn/shared-ui-jsx/stripe/lazy-stripe'\nimport { Alert, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material'\nimport { Suspense } from 'react'\nimport {\n  formatPayCents,\n  payCardLabel,\n  type PayPrerequisite,\n  type PayQuote,\n} from '../model/marketplace-pay'\n\n/** Which part of paying for a listing is on screen. */\nexport type PayStep =\n  | { kind: 'confirm'; quote: PayQuote }\n  /** A card is needed, and this person can add one: `null` until its form has a secret. */\n  | { kind: 'card'; clientSecret: string | null }\n  | { kind: 'address' }\n  /** Something is needed that this person cannot add. */\n  | { kind: 'ask-billing'; need: PayPrerequisite; amountCents: number | null }\n\nexport interface MarketplacePayPanelProps {\n  step: PayStep\n  listingName: string\n  busy: boolean\n  /** Stripe's reason, or ours, for the last thing that did not go through. */\n  error: string | null\n  /** The workspace's Billing page, when its address is known. */\n  billingHref?: string | null\n  onPay: () => void\n  onCardSaved: (setupIntentId: string) => Promise<void> | void\n  onAddressSaved: (address: BillingAddressValue) => Promise<void> | void\n  onCancel: () => void\n}\n\nconst SUMMARY_LINE_SX = { justifyContent: 'space-between' } as const\n\nfunction SummaryLine(props: { label: string; value: string; strong?: boolean }) {\n  const variant = props.strong ? 'subtitle2' : 'body2'\n  return (\n    <Stack direction=\"row\" spacing={2} sx={SUMMARY_LINE_SX}>\n      <Typography variant={variant}>{props.label}</Typography>\n      <Typography variant={variant}>{props.value}</Typography>\n    </Stack>\n  )\n}\n\nconst FormLoading = () => <CircularProgress size={24} aria-label=\"Loading the card form\" />\n\n/**\n * Paying for a listing, in place (AGL-4049).\n *\n * Inline, under the button that asked for it, in the listing's sidebar and in\n * Create site alike, for the reason the billing card form is inline: a payment\n * surface that appears over the page and looks like a different product is a\n * reason to stop buying. Nothing here is a Dialog, and the card and address\n * fields are Stripe's own, so the card data guarantee is the billing page's.\n *\n * The total is on screen before the Pay button is: a saved card charged\n * without one is not a purchase anybody agreed to.\n *\n * Figma: \"Aglyn Console (web)\" → page \"Marketplace · Publish & review\" →\n * section \"✅ CURRENT · Paying in the console\", and page \"Sites · Create site\"\n * → frames \"Choose your starter · Buy (card on file)\" and \"· Buy (add a card)\".\n */\nexport function MarketplacePayPanel(props: MarketplacePayPanelProps) {\n  const { step, listingName, busy, error, billingHref, onPay, onCardSaved, onAddressSaved, onCancel } =\n    props\n  const failure = error ? (\n    <Alert severity=\"warning\" data-marketplace-pay-error>\n      {error}\n    </Alert>\n  ) : null\n\n  if (step.kind === 'confirm') {\n    const { quote } = step\n    return (\n      <Stack spacing={1.5} data-marketplace-pay=\"confirm\">\n        <Typography variant=\"subtitle2\">{`Buy ${quote.listingName}`}</Typography>\n        <Stack spacing={0.5}>\n          <SummaryLine label=\"Price\" value={formatPayCents(quote.amountCents)} />\n          <SummaryLine label=\"Sales tax\" value={formatPayCents(quote.taxCents)} />\n          <Divider />\n          <SummaryLine label=\"Total\" value={formatPayCents(quote.totalCents)} strong />\n        </Stack>\n        {quote.canPay ? (\n          <>\n            <Typography variant=\"body2\" color=\"text.secondary\">\n              {`Charged to ${payCardLabel(quote.card)}. The receipt lands in Billing.`}\n            </Typography>\n            {/* A card that will not pay is changed in Billing: the way there is beside the reason. */}\n            {error ? (\n              <PrerequisiteNotice severity=\"warning\" href={billingHref ?? undefined} actionLabel=\"Open Billing\">\n                {error}\n              </PrerequisiteNotice>\n            ) : null}\n            <Stack direction=\"row\" spacing={1}>\n              <Button variant=\"contained\" size=\"small\" disabled={busy} onClick={onPay}>\n                {busy ? 'Paying…' : `Pay ${formatPayCents(quote.totalCents)}`}\n              </Button>\n              <Button size=\"small\" disabled={busy} onClick={onCancel}>\n                {'Cancel'}\n              </Button>\n            </Stack>\n          </>\n        ) : (\n          <>\n            <PrerequisiteNotice severity=\"warning\">\n              {`Buying this charges your workspace's card, which takes the \"${orgPermissionLabel('billing.manage')}\" permission. Ask someone who manages billing to buy it.`}\n            </PrerequisiteNotice>\n            <Stack direction=\"row\">\n              <Button size=\"small\" onClick={onCancel}>\n                {'Close'}\n              </Button>\n            </Stack>\n          </>\n        )}\n      </Stack>\n    )\n  }\n\n  if (step.kind === 'card') {\n    return (\n      <Stack spacing={1.5} data-marketplace-pay=\"card\">\n        <Typography variant=\"subtitle2\">{`Add a card to buy ${listingName}`}</Typography>\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {'It stays on file for this workspace, in Billing, where you can change or remove it.'}\n        </Typography>\n        {failure}\n        <Suspense fallback={<FormLoading />}>\n          {step.clientSecret ? (\n            <LazyBillingCardForm\n              clientSecret={step.clientSecret}\n              onConfirmed={onCardSaved}\n              onCancel={onCancel}\n            />\n          ) : (\n            <FormLoading />\n          )}\n        </Suspense>\n      </Stack>\n    )\n  }\n\n  if (step.kind === 'address') {\n    return (\n      <Stack spacing={1.5} data-marketplace-pay=\"address\">\n        <Typography variant=\"subtitle2\">{'Add a billing address'}</Typography>\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {'Sales tax is calculated from it. It stays on file for this workspace, in Billing.'}\n        </Typography>\n        {failure}\n        <Suspense fallback={<FormLoading />}>\n          <LazyBillingAddressForm onConfirmed={onAddressSaved} onCancel={onCancel} />\n        </Suspense>\n      </Stack>\n    )\n  }\n\n  return (\n    <Stack spacing={1.5} data-marketplace-pay=\"ask-billing\">\n      {step.amountCents === null ? null : (\n        <SummaryLine label=\"Price\" value={formatPayCents(step.amountCents)} />\n      )}\n      <PrerequisiteNotice severity=\"warning\">\n        {`${\n          step.need === 'card_required'\n            ? 'This workspace needs a card on file to buy this.'\n            : 'This workspace needs a billing address to buy this: sales tax is calculated from it.'\n        } Someone with the \"${orgPermissionLabel('billing.manage')}\" permission can add it in Billing.`}\n      </PrerequisiteNotice>\n      <Stack direction=\"row\">\n        <Button size=\"small\" onClick={onCancel}>\n          {'Close'}\n        </Button>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default MarketplacePayPanel\n"],"names":["orgPermissionLabel","PrerequisiteNotice","LazyBillingAddressForm","LazyBillingCardForm","Alert","Button","CircularProgress","Divider","Stack","Typography","Suspense","formatPayCents","payCardLabel","SUMMARY_LINE_SX","justifyContent","SummaryLine","props","variant","strong","direction","spacing","sx","label","value","FormLoading","size","aria-label","MarketplacePayPanel","step","listingName","busy","error","billingHref","onPay","onCardSaved","onAddressSaved","onCancel","failure","severity","data-marketplace-pay-error","kind","quote","data-marketplace-pay","amountCents","taxCents","totalCents","canPay","color","card","href","undefined","actionLabel","disabled","onClick","fallback","clientSecret","onConfirmed","need"],"mappings":"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"}

package/src/lib/components/publish-artifact-dialog.component.d.ts

@@ -14,7 +14,7 @@ import type { ConsoleArtifactPublishZoneProps } from '@aglyn/aglyn';
  * with no widget on that zone leaves the offer out entirely, which is why
  * this may safely draw nothing for a kind it does not sell.
  */
-export declare function PublishArtifactDialog({ artifact, onClose, }: ConsoleArtifactPublishZoneProps): import("react").JSX.Element;
+export declare function PublishArtifactDialog(props: ConsoleArtifactPublishZoneProps): import("react").JSX.Element;
 export declare namespace PublishArtifactDialog {
     var displayName: string;
 }

package/src/lib/components/publish-artifact-dialog.component.js

@@ -18,11 +18,16 @@ import { _ as _extends } from "@swc/helpers/_/_extends";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { isBelowMarketplacePriceFloor, marketplacePriceCostNote, marketplacePriceFloorHint } from "../model/listing-price-floor.js";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { BlockedControl } from "@aglyn/shared-ui-jsx/components/blocked-control.component";
+import { PrerequisiteNotice } from "@aglyn/shared-ui-jsx/components/prerequisite-notice.component";
 import { useUser } from "@aglyn/tenant-feature-instance";
 import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, TextField, Typography } from "@mui/material";
+import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, TextField, Typography } from "@mui/material";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useStarterPublishFacts } from "../hooks/use-starter-publish-facts.js";
+import { starterPublishBody, starterPublishSteps, starterRefusalLink } from "../model/starter-publish.js";
 import { PublisherAgreementCheckbox, usePublisherAgreementConsent } from "./publisher-agreement-checkbox.component.js";
+import { PublishStarterFields } from "./publish-starter-fields.component.js";
 /**
  * WHERE EACH KIND GOES, which is the knowledge that used to sit in the app
  * (AGL-3080).
@@ -114,6 +119,17 @@ import { PublisherAgreementCheckbox, usePublisherAgreementConsent } from "./publ
                 },
                 noun: 'email starter'
             };
+        // A whole site, as a site starter people create a new site from (AGL-4049).
+        case 'siteStarter':
+            return {
+                endpoint: 'marketplace/publish-starter',
+                payload: {
+                    hostId
+                },
+                noun: 'starter',
+                categoryLabel: 'What kind of site is it?',
+                categoryPlaceholder: 'e.g. Bakery, Law firm, Wedding'
+            };
         default:
             return null;
     }
@@ -132,8 +148,30 @@ import { PublisherAgreementCheckbox, usePublisherAgreementConsent } from "./publ
  * publish keeps the control that opens it and never imports this. A page
  * with no widget on that zone leaves the offer out entirely, which is why
  * this may safely draw nothing for a kind it does not sell.
- */ export function PublishArtifactDialog({ artifact, onClose }) {
-    var _ref, _ref1, _ref2, _marketplacePriceCostNote;
+ */ export function PublishArtifactDialog(props) {
+    var _props_artifact;
+    return ((_props_artifact = props.artifact) == null ? void 0 : _props_artifact.kind) === 'siteStarter' ? /*#__PURE__*/ _jsx(PublishStarterDialog, _extends({}, props)) : /*#__PURE__*/ _jsx(PublishArtifactForm, _extends({}, props, {
+        starterReads: null
+    }));
+}
+PublishArtifactDialog.displayName = 'PublishArtifactDialog';
+/**
+ * The form for a site starter (AGL-4049), with what it reads before the
+ * click: the site's theme and pages, the org's publisher profile and plan.
+ * Its own component so no other kind ever issues those reads.
+ */ function PublishStarterDialog(props) {
+    var _props_artifact, _props_artifact1;
+    const reads = useStarterPublishFacts({
+        hostId: (_props_artifact = props.artifact) == null ? void 0 : _props_artifact.hostId,
+        orgId: (_props_artifact1 = props.artifact) == null ? void 0 : _props_artifact1.orgId
+    });
+    return /*#__PURE__*/ _jsx(PublishArtifactForm, _extends({}, props, {
+        starterReads: reads
+    }));
+}
+/** The listing form every kind shares, with a starter's half when it has one. */ function PublishArtifactForm({ artifact, onClose, starterReads }) {
+    var _ref, _ref1, _ref2, _ref3, _marketplacePriceCostNote, _starterRefusalLink_href, _ref4;
+    var _steps_;
     // Memoized because it is a dependency of the publish callback: rebuilt
     // every render, it would rebuild that callback every render too.
     const target = useMemo(()=>artifact ? publishRequestFor(artifact) : null, [
@@ -150,6 +188,27 @@ import { PublisherAgreementCheckbox, usePublisherAgreementConsent } from "./publ
     // above the button, unticked for every artifact the dialog opens on.
     const agreement = usePublisherAgreementConsent();
     const { reset: resetAgreement } = agreement;
+    /*
+   * A SITE STARTER'S OWN HALF (AGL-4049). Its theme shape is the
+   * publisher's choice and starts unchosen; what it captures and every setup
+   * step in its way are read before the click, so they are said with where
+   * each is fixed rather than refused after it. For any other kind the facts
+   * hook is handed no site and reads nothing.
+   */ const starter = !!starterReads && !!target;
+    const [themeChoice, setThemeChoice] = useState(null);
+    const [styleKind, setStyleKind] = useState('');
+    // What the door last refused, in its words, shown in the form to fix it.
+    const [refusal, setRefusal] = useState(null);
+    const starterFacts = starterReads ? _extends({}, starterReads.facts, {
+        priceUsd: Number(price) || 0
+    }) : null;
+    const steps = starter && starterFacts ? starterPublishSteps(starterFacts) : [];
+    const starterBody = starter && starterReads ? starterPublishBody({
+        choice: themeChoice,
+        builtin: starterReads.builtin,
+        kind: styleKind || null
+    }) : null;
+    const agreementRefused = refusal && (refusal.status === 428 || refusal.status === 409);
     useEffect(()=>{
         var _artifact_displayName, _artifact_description;
         if (!artifact) return;
@@ -157,6 +216,9 @@ import { PublisherAgreementCheckbox, usePublisherAgreementConsent } from "./publ
         setDescription((_artifact_description = artifact.description) != null ? _artifact_description : '');
         setCategory('');
         setPrice('');
+        setThemeChoice(null);
+        setStyleKind('');
+        setRefusal(null);
         resetAgreement();
     }, [
         artifact,
@@ -164,7 +226,9 @@ import { PublisherAgreementCheckbox, usePublisherAgreementConsent } from "./publ
     ]);
     const handlePublish = useCallback(async ()=>{
         if (!target || !name.trim() || busy || !agreement.consent) return;
+        if (starter && (!starterBody || steps.length)) return;
         setBusy(true);
+        setRefusal(null);
         try {
             const response = await authorizedFetch(user, `/api/${target.endpoint}`, {
                 method: 'POST',
@@ -177,9 +241,24 @@ import { PublisherAgreementCheckbox, usePublisherAgreementConsent } from "./publ
                     category: category.trim(),
                     priceUsd: Number(price) || 0,
                     agreement: agreement.consent
-                }))
+                }, starterBody))
             });
             const payload = await response.json().catch(()=>({}));
+            if (!response.ok && starter) {
+                // In the form, in the door's words, so the publisher can fix it
+                // there: another theme, a page, a setup step. Every problem a
+                // theme check names is listed, not only the first.
+                const error = typeof (payload == null ? void 0 : payload.error) === 'string' && payload.error ? payload.error : 'Publish failed';
+                const more = Array.isArray(payload == null ? void 0 : payload.errors) ? payload.errors.map((entry)=>entry == null ? void 0 : entry.message).filter((message)=>typeof message === 'string' && message !== error) : [];
+                setRefusal({
+                    status: response.status,
+                    error,
+                    more
+                });
+                // An agreement refused is asked for again, by a fresh tick.
+                if (response.status === 428 || response.status === 409) resetAgreement();
+                return;
+            }
             if (!response.ok) {
                 var _ref;
                 // 412 means a setup step is missing (publisher profile, payouts) —
@@ -189,7 +268,7 @@ import { PublisherAgreementCheckbox, usePublisherAgreementConsent } from "./publ
                     allowDuplicate: true
                 });
             }
-            enqueueSnackbar(`Published v${payload.version} to the marketplace`, {
+            enqueueSnackbar(starter ? Number(payload.version) > 1 ? `Published v${payload.version} of your starter` : 'Sent your starter for review. It is listed once it has been reviewed.' : `Published v${payload.version} to the marketplace`, {
                 variant: 'success',
                 persist: false
             });
@@ -216,7 +295,10 @@ import { PublisherAgreementCheckbox, usePublisherAgreementConsent } from "./publ
         enqueueSnackbar,
         onClose,
         agreement.consent,
-        resetAgreement
+        resetAgreement,
+        starter,
+        starterBody,
+        steps.length
     ]);
     if (artifact && !target) {
         return /*#__PURE__*/ _jsxs(Dialog, {
@@ -249,11 +331,11 @@ import { PublisherAgreementCheckbox, usePublisherAgreementConsent } from "./publ
         children: /*#__PURE__*/ _jsxs(Dialog, {
             open: !!target,
             onClose: busy ? undefined : onClose,
-            maxWidth: "xs",
+            maxWidth: starter ? 'sm' : 'xs',
             fullWidth: true,
             children: [
                 /*#__PURE__*/ _jsx(DialogTitle, {
-                    children: `Publish ${(_ref = target == null ? void 0 : target.noun) != null ? _ref : 'artifact'}`
+                    children: starter ? 'Publish as a starter' : `Publish ${(_ref = target == null ? void 0 : target.noun) != null ? _ref : 'artifact'}`
                 }),
                 /*#__PURE__*/ _jsx(DialogContent, {
                     children: /*#__PURE__*/ _jsxs(Stack, {
@@ -265,7 +347,7 @@ import { PublisherAgreementCheckbox, usePublisherAgreementConsent } from "./publ
                             /*#__PURE__*/ _jsx(Typography, {
                                 variant: "body2",
                                 color: "text.secondary",
-                                children: `Publishes the current published version of this ` + `${(_ref1 = target == null ? void 0 : target.noun) != null ? _ref1 : 'artifact'} so other organizations can ` + 'install it. Your site is unaffected.'
+                                children: starter ? 'Publishes this site as a site starter: a ready-made website ' + 'people create a new site from. A new starter is reviewed ' + 'before anyone else can see it. Your site is unaffected.' : `Publishes the current published version of this ` + `${(_ref1 = target == null ? void 0 : target.noun) != null ? _ref1 : 'artifact'} so other organizations can ` + 'install it. Your site is unaffected.'
                             }),
                             /*#__PURE__*/ _jsx(TextField, {
                                 autoFocus: true,
@@ -288,8 +370,8 @@ import { PublisherAgreementCheckbox, usePublisherAgreementConsent } from "./publ
                             }),
                             /*#__PURE__*/ _jsx(TextField, {
                                 size: "small",
-                                label: "Category",
-                                placeholder: (_ref2 = target == null ? void 0 : target.categoryPlaceholder) != null ? _ref2 : 'e.g. Marketing, Docs',
+                                label: (_ref2 = target == null ? void 0 : target.categoryLabel) != null ? _ref2 : 'Category',
+                                placeholder: (_ref3 = target == null ? void 0 : target.categoryPlaceholder) != null ? _ref3 : 'e.g. Marketing, Docs',
                                 value: category,
                                 onChange: (event)=>setCategory(event.target.value),
                                 disabled: busy,
@@ -312,10 +394,48 @@ import { PublisherAgreementCheckbox, usePublisherAgreementConsent } from "./publ
                                 disabled: busy,
                                 fullWidth: true
                             }),
+                            starter && starterReads ? /*#__PURE__*/ _jsx(PublishStarterFields, {
+                                builtin: starterReads.builtin,
+                                hostReady: starterReads.hostReady,
+                                pages: starterReads.facts.pages,
+                                steps: steps,
+                                choice: themeChoice,
+                                onChoiceChange: setThemeChoice,
+                                styleKind: styleKind,
+                                onStyleKindChange: setStyleKind,
+                                disabled: busy
+                            }) : null,
+                            refusal && !agreementRefused ? refusal.status === 412 && starterFacts ? /*#__PURE__*/ _jsx(PrerequisiteNotice, {
+                                severity: "warning",
+                                href: (_starterRefusalLink_href = starterRefusalLink(starterFacts).href) != null ? _starterRefusalLink_href : undefined,
+                                actionLabel: starterRefusalLink(starterFacts).actionLabel,
+                                children: refusal.error
+                            }) : /*#__PURE__*/ _jsxs(Alert, {
+                                severity: "error",
+                                "data-starter-publish": "refusal",
+                                children: [
+                                    refusal.error,
+                                    refusal.more.length ? /*#__PURE__*/ _jsx(Stack, {
+                                        component: "ul",
+                                        spacing: 0.5,
+                                        sx: {
+                                            m: 0,
+                                            mt: 1,
+                                            pl: 2.5
+                                        },
+                                        children: refusal.more.map((message)=>/*#__PURE__*/ _jsx(Typography, {
+                                                component: "li",
+                                                variant: "body2",
+                                                children: message
+                                            }, message))
+                                    }) : null
+                                ]
+                            }) : null,
                             /*#__PURE__*/ _jsx(PublisherAgreementCheckbox, {
                                 checked: agreement.agreed,
                                 onChange: agreement.setAgreed,
-                                disabled: busy
+                                disabled: busy,
+                                error: agreementRefused ? refusal.error : null
                             })
                         ]
                     })
@@ -328,13 +448,17 @@ import { PublisherAgreementCheckbox, usePublisherAgreementConsent } from "./publ
                             disabled: busy,
                             children: 'Cancel'
                         }),
-                        /*#__PURE__*/ _jsx(Button, {
-                            size: "small",
-                            variant: "contained",
-                            color: "primary",
-                            disabled: busy || !name.trim() || isBelowMarketplacePriceFloor(price) || !agreement.agreed,
-                            onClick: ()=>void handlePublish(),
-                            children: busy ? 'Publishing…' : 'Publish'
+                        /*#__PURE__*/ _jsx(BlockedControl, {
+                            blocked: steps.length > 0,
+                            reason: (_ref4 = (_steps_ = steps[0]) == null ? void 0 : _steps_.text) != null ? _ref4 : '',
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                variant: "contained",
+                                color: "primary",
+                                disabled: busy || !name.trim() || isBelowMarketplacePriceFloor(price) || !agreement.agreed || starter && !starterBody,
+                                onClick: ()=>void handlePublish(),
+                                children: busy ? 'Publishing…' : 'Publish'
+                            })
                         })
                     ]
                 })
@@ -342,7 +466,7 @@ import { PublisherAgreementCheckbox, usePublisherAgreementConsent } from "./publ
         })
     });
 }
-PublishArtifactDialog.displayName = 'PublishArtifactDialog';
+PublishArtifactForm.displayName = 'PublishArtifactForm';
 export default PublishArtifactDialog;
 
 //# sourceMappingURL=publish-artifact-dialog.component.js.map