@aglyn/plugins-ai 1.0.0-beta.264 → 1.0.0-beta.268

package/src/lib/components/ai-site-start-card.component.js

@@ -15,54 +15,34 @@
  * 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { lockdownRefusalText, parseLockdownRefusal, PLATFORM_BRAND_NAME } from "@aglyn/aglyn";
 import { trackEvent } from "@aglyn/aglyn/app-utils/analytics-events";
 import { ICON_VARIANT_CLOSE } from "@aglyn/shared-data-enums";
-import { mdiAccount, mdiBookOpenPageVariant, mdiBriefcaseOutline, mdiCalendarHeart, mdiCamera, mdiClockOutline, mdiContentCut, mdiCreation, mdiDumbbell, mdiHandHeart, mdiHeartPulse, mdiHomeCity, mdiMusic, mdiPaletteOutline, mdiRocketLaunch, mdiScaleBalance, mdiSchool, mdiShopping, mdiSilverwareForkKnife, mdiViewGridOutline, mdiWrench, mdiYoga, mdiPageLayoutHeaderFooter } from "@aglyn/shared-data-mdi";
+import { mdiCreation, mdiPageLayoutHeaderFooter } from "@aglyn/shared-data-mdi";
 import { pluginDocsHelp } from "@aglyn/aglyn/app-utils/docs-help";
 import { HelpTip, MdiIcon } from "@aglyn/shared-ui-jsx";
-import { OptionCardGrid } from "@aglyn/shared-ui-jsx/components/option-card-grid.component";
 import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
 import { useUser } from "@aglyn/tenant-feature-instance";
-import { Alert, AppBar, Box, Button, Card, CardActionArea, Chip, CircularProgress, Container, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, MenuItem, Stack, Step, StepLabel, Stepper, TextField, Toolbar, Typography } from "@mui/material";
-import { alpha } from "@mui/material/styles";
+import { Alert, AppBar, Box, Button, Card, CardActionArea, Chip, CircularProgress, Container, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Stack, Toolbar, Typography, useMediaQuery } from "@mui/material";
+import { alpha, useTheme } from "@mui/material/styles";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
-import { AI_JOB_AUTO_CONFIRM_INPUT, AI_SITE_FREE_PAGES, AI_SITE_FREE_PAGES_NOTE, AI_SITE_SUBMISSION_CHOICES, aiFreeCreditsNoneLeftText, aiFreeCreditsResetLabel, aiFreeSiteCreditRange, aiFreeSitePrompt, aiSiteCreditRange, aiSitePagesBand } from "../model/ai-site-job.js";
+import { AI_JOB_AUTO_CONFIRM_INPUT, AI_SITE_FREE_PAGES, aiFreeCreditsNoneLeftText, aiFreeCreditsResetLabel, aiFreeSiteCreditRange, aiFreeSitePrompt, aiSiteCreditRange, aiSitePagesBand } from "../model/ai-site-job.js";
 import { FREE_AI_TASTE_CREDITS_PER_MONTH } from "../plan-entitlements.js";
 import { AI_CREDITS_CONFIRM_CODE, aiCreditRangeText } from "../model/ai-credit-estimate.js";
 import { AiCreditsPromptNotice } from "./ai-credits-prompt.component.js";
-import { AI_SITE_START_ANSWERS, AI_SITE_START_TYPES, aiSiteStartBrief, aiSiteStartKind, aiSiteStartInputs, aiSiteStartRefusal } from "../model/ai-site-start.js";
-import { AI_SITE_KINDS, aiSiteKindOfInputs } from "../model/ai-site-kinds.js";
-/** The icon each kind of site's card shows. */ const AI_SITE_KIND_ICONS = {
-    business: mdiBriefcaseOutline.path,
-    trades: mdiWrench.path,
-    professional: mdiScaleBalance.path,
-    wellness: mdiHeartPulse.path,
-    restaurant: mdiSilverwareForkKnife.path,
-    store: mdiShopping.path,
-    portfolio: mdiViewGridOutline.path,
-    studio: mdiPaletteOutline.path,
-    photography: mdiCamera.path,
-    blog: mdiBookOpenPageVariant.path,
-    events: mdiCalendarHeart.path,
-    fitness: mdiDumbbell.path,
-    yoga: mdiYoga.path,
-    beauty: mdiContentCut.path,
-    realestate: mdiHomeCity.path,
-    education: mdiSchool.path,
-    nonprofit: mdiHandHeart.path,
-    music: mdiMusic.path,
-    personal: mdiAccount.path,
-    landing: mdiRocketLaunch.path,
-    'coming-soon': mdiClockOutline.path
-};
+import { AI_SITE_START_ANSWERS, aiSiteStartBrief, aiSiteStartInputs, aiSiteStartRefusal } from "../model/ai-site-start.js";
+import { aiSiteStartFieldErrors, aiSiteStartFirstInvalidStep, aiSiteStartNextStep, aiSiteStartPreviousStep, aiSiteStartStepErrors, aiSiteStartStepIndex, AI_SITE_START_STEP_FIELDS } from "../model/ai-site-start-steps.js";
+import { aiSiteKindOfInputs } from "../model/ai-site-kinds.js";
+import { aiSiteStartClickOf, useAiSiteStartTracking } from "./ai-site-start-tracking.js";
+import { AudienceStep, DetailsStep, KindStep, ReviewStep, StartProgress, StepHelp, StyleStep } from "./ai-site-start-steps.component.js";
 import { AiJobFollow } from "./ai-job-follow.component.js";
 import { AiModelSelector } from "./ai-model-selector.component.js";
 import { useAiModelChoice } from "./use-ai-model-choice.js";
 import { aiCreditsBillingHref, aiSiteBuildHref } from "./ai-job-links.js";
 import { publishAiJob } from "./ai-jobs-store.js";
+import { clearAiSiteStartAnswers, readAiSiteStartAnswers } from "../model/ai-site-start-handoff.js";
 /** Labels the dialog for a reader, from its own heading. */ const TITLE_ID = 'ai-site-start-title';
 /**
  * The takeover's surface, for its paper, its bar and its footer alike: the
@@ -71,10 +51,6 @@ import { publishAiJob } from "./ai-jobs-store.js";
  */ export const AI_SITE_START_SURFACE_SX = {
     bgcolor: 'background.default'
 };
-/** The two steps, as the indicator under the header names them. */ const STEP_LABELS = [
-    'Choose',
-    'Describe'
-];
 /** The soft round badge an icon sits in, in its accent's tint. */ function IconBadge({ accent, children }) {
     return /*#__PURE__*/ _jsx(Box, {
         "aria-hidden": true,
@@ -179,18 +155,6 @@ import { publishAiJob } from "./ai-jobs-store.js";
         anchor: '#how-do-you-want-to-start',
         excerpt: 'The starter site gives you a ready-made home page to edit. Start with AI asks a few questions, then plans, writes and publishes your pages.'
     }),
-    business: pluginDocsHelp('aiStart', {
-        anchor: '#your-business',
-        excerpt: 'What kind of site it is picks its style and pages; who it is for is who every page and the contact form are written for.'
-    }),
-    style: pluginDocsHelp('aiSiteLooks', {
-        anchor: '#choose-a-style',
-        excerpt: 'The style decides the look — theme, colors, fonts, buttons — and which pages the site usually has. Every site gets its own variation.'
-    }),
-    details: pluginDocsHelp('aiStart', {
-        anchor: '#details',
-        excerpt: 'Where contact form messages go, how many pages to write, and on paid plans whether to draft a welcome email. All can be changed later.'
-    }),
     estimate: pluginDocsHelp('aiCredits', {
         anchor: '#before-a-job-starts',
         excerpt: 'About what a start like this costs, measured on real builds, and the most it can cost. What it really costs is what each step spends, and you can watch that add up while it runs.'
@@ -217,8 +181,19 @@ function SectionLabel({ children, help }) {
         ]
     });
 }
-export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leave, pendingSite, initialAnswers = null }) {
-    var _ref, _ref1, _aiFreeSitePrompt;
+/**
+ * The questions are one decision a step (AGL-3898): what kind of site it is
+ * (typed, or a card), who it is for, the style (cards that show each one,
+ * "Pick for me" first and picked), the details, and a review that plans the
+ * site (`ai-site-start-steps.component.tsx`). Back and Next keep every
+ * answer; Enter in a text answer is Next; each step's heading takes the focus
+ * when it is drawn; a step that cannot go forward says why beside the field
+ * and puts the cursor in it. The answers are the same object the single form
+ * held, and only the review turns them into the job, through the same
+ * `aiSiteStartBrief` and `aiSiteStartInputs`. Each step is reported as a
+ * funnel, with where people struggle (`ai-site-start-tracking.ts`).
+ */ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leave, pendingSite, initialAnswers = null }) {
+    var _ref, _ref1, _ref2, _aiFreeSitePrompt;
     var _aiSiteKindOfInputs, _modelChoice_options_options_find, _modelChoice_options;
     const { data: user } = useUser();
     const router = useRouter();
@@ -228,10 +203,28 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
     userRef.current = user;
     const uid = (_ref = user == null ? void 0 : user.uid) != null ? _ref : null;
     const [verdict, setVerdict] = useState('checking');
+    // "Start again" on a start whose empty site was removed (AGL-3936) opens
+    // Create site with that start's answers: read once, and only here, where
+    // the site does not exist yet. It opens on the first question, where the
+    // site's name and address are asked, with every answer after it filled in.
+    const [handedOff] = useState(()=>pendingSite && !initialAnswers ? readAiSiteStartAnswers() : null);
     // Read once: a start reopened on its answers stays one while it is open.
-    const reopened = useRef(initialAnswers !== null);
-    const [step, setStep] = useState(initialAnswers ? 'describe' : 'choose');
-    const [answers, setAnswers] = useState(initialAnswers != null ? initialAnswers : AI_SITE_START_ANSWERS);
+    const reopened = useRef(initialAnswers !== null || handedOff !== null);
+    // A start reopened on its answers opens on the review, every answer there to change.
+    const [step, setStep] = useState(initialAnswers ? 'review' : 'choose');
+    const [answers, setAnswers] = useState((_ref1 = initialAnswers != null ? initialAnswers : handedOff) != null ? _ref1 : AI_SITE_START_ANSWERS);
+    // The steps whose reasons not to go forward are shown: the ones Next was refused on.
+    const [checked, setChecked] = useState(()=>new Set());
+    // A step opened from the review's Edit goes back to the review on Next.
+    const [returnTo, setReturnTo] = useState(null);
+    // Each step's heading takes the focus when the step changes, never on the first draw.
+    const headingRef = useRef(null);
+    const drawnStep = useRef(null);
+    const fieldRefs = useRef({});
+    const theme = useTheme();
+    const compact = useMediaQuery(theme.breakpoints.down('sm'), {
+        noSsr: true
+    });
     const [busy, setBusy] = useState(false);
     // The starter card's own busy state while `startBlank` runs (AGL-3594).
     const [startingStarter, setStartingStarter] = useState(false);
@@ -254,6 +247,8 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
     const pendingRef = useRef(pendingSite);
     pendingRef.current = pendingSite;
     const creating = Boolean(pendingSite) && !(pendingSite == null ? void 0 : pendingSite.created);
+    // The funnel (AGL-3898): each step drawn, left and abandoned, and where people struggle.
+    const tracker = useAiSiteStartTracking(step, verdict === 'ready');
     useEffect(()=>{
         if (!orgId || !uid) return;
         let active = true;
@@ -306,7 +301,7 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
         answers.pages
     ]);
     // A store's first products and a blog's first posts are part of the start (AGL-3676, AGL-3798).
-    const siteKind = (_ref1 = (_aiSiteKindOfInputs = aiSiteKindOfInputs(aiSiteStartInputs(answers))) == null ? void 0 : _aiSiteKindOfInputs.id) != null ? _ref1 : null;
+    const siteKind = (_ref2 = (_aiSiteKindOfInputs = aiSiteKindOfInputs(aiSiteStartInputs(answers))) == null ? void 0 : _aiSiteKindOfInputs.id) != null ? _ref2 : null;
     const prompt = freeTaste ? (_aiFreeSitePrompt = aiFreeSitePrompt(freeCredits, answers.pages, {
         siteKind
     })) != null ? _aiFreeSitePrompt : serverPrompt : null;
@@ -328,7 +323,7 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
     // and the list is otherwise read when the picker opens.
     const { load: loadModels, model: rememberedModel } = modelChoice;
     useEffect(()=>{
-        if (!freeTaste && step === 'describe' && rememberedModel) loadModels();
+        if (!freeTaste && step === 'review' && rememberedModel) loadModels();
     }, [
         freeTaste,
         step,
@@ -425,6 +420,11 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
             }
             // The indicator and the launcher count it from the moment it exists.
             publishAiJob(created);
+            // A removed start's answers have been used (AGL-3936).
+            clearAiSiteStartAnswers();
+            // The funnel's last step: the site is started, and nothing after is leaving it.
+            tracker.complete();
+            tracker.finish();
             // Where the next step is (AGL-3594): the site's "Building your site"
             // page for this job. The zone closes without the starter first, so the
             // setup page does not ask again behind it.
@@ -455,7 +455,8 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
         router,
         pickedModel,
         pendingSite,
-        siteKind
+        siteKind,
+        tracker
     ]);
     // The zone's `startBlank`. Before the site exists it creates it with the
     // starter, and answers `false` when it could not — most often a name or
@@ -478,24 +479,106 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
         trackEvent('site_start_choice', {
             choice: 'starter'
         });
+        // The starter is a way to start, not a way to leave: no abandonment after it.
+        tracker.finish();
         runStartBlank();
     }, [
         pendingSite,
-        runStartBlank
+        runStartBlank,
+        tracker
     ]);
     const chooseAi = useCallback(()=>{
         if (pendingSite && !pendingSite.created && !pendingSite.check()) return;
         trackEvent('site_start_choice', {
             choice: 'ai'
         });
-        setStep('describe');
+        tracker.complete();
+        setStep('kind');
     }, [
-        pendingSite
+        pendingSite,
+        tracker
     ]);
+    // The heading of each step takes the focus as the step is drawn, so a
+    // keyboard and a screen reader start where the new question does.
+    useEffect(()=>{
+        var _headingRef_current;
+        if (verdict !== 'ready') return;
+        if (drawnStep.current !== null && drawnStep.current !== step) (_headingRef_current = headingRef.current) == null ? void 0 : _headingRef_current.focus();
+        drawnStep.current = step;
+    }, [
+        step,
+        verdict
+    ]);
+    /** Forward from a question step, when its answers may go forward. */ const next = useCallback(()=>{
+        if (step === 'choose' || step === 'review') return;
+        const errors = aiSiteStartStepErrors(step, answers, {
+            freeTaste
+        });
+        if (errors.length) {
+            var _fieldRefs_current_errors__field;
+            setChecked((current)=>new Set(current).add(step));
+            for (const error of errors)tracker.fieldError(error.field, error.code);
+            (_fieldRefs_current_errors__field = fieldRefs.current[errors[0].field]) == null ? void 0 : _fieldRefs_current_errors__field.focus();
+            return;
+        }
+        tracker.complete();
+        const target = returnTo != null ? returnTo : aiSiteStartNextStep(step);
+        setReturnTo(null);
+        // A review reached with an answer that cannot go forward opens on that answer instead.
+        if (target === 'review') {
+            const invalid = aiSiteStartFirstInvalidStep(answers, {
+                freeTaste
+            });
+            if (invalid && invalid !== 'review') {
+                setChecked((current)=>new Set(current).add(invalid));
+                setStep(invalid);
+                return;
+            }
+        }
+        if (target) setStep(target);
+    }, [
+        step,
+        answers,
+        freeTaste,
+        returnTo,
+        tracker
+    ]);
+    /** Back one step, keeping every answer. */ const back = useCallback(()=>{
+        const target = aiSiteStartPreviousStep(step);
+        if (!target) return;
+        tracker.back();
+        setReturnTo(null);
+        setStep(target);
+    }, [
+        step,
+        tracker
+    ]);
+    /** From the review, to the step that asks an answer, and back to the review on Next. */ const edit = useCallback((target)=>{
+        tracker.back();
+        setReturnTo('review');
+        setStep(target);
+    }, [
+        tracker
+    ]);
+    /** From the progress, back to a step already answered: from the review it is Edit. */ const goBackTo = (target)=>{
+        if (aiSiteStartStepIndex(target) >= aiSiteStartStepIndex(step)) return;
+        if (step === 'review') {
+            edit(target);
+            return;
+        }
+        tracker.back();
+        setReturnTo(null);
+        setStep(target);
+    };
     if (verdict !== 'ready') return null;
     // Before a job is started Skip is the blank site, which writes the starter
     // (AGL-3594); after, it only closes — the job builds the site.
     const exit = started ? leave != null ? leave : runStartBlank : runStartBlank;
+    // Skip, as the header draws it: before a site is started it is leaving the questions.
+    const skip = ()=>{
+        if (!started) tracker.abandon('skip');
+        exit();
+    };
     // Escape and the close control. Before "Create site" has made the site
     // (AGL-3761) there is nothing to give a starter to, so they only close,
     // and nothing is created; otherwise they are the same way out as Skip.
@@ -513,11 +596,16 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
             if (root && target instanceof Node && !root.contains(target)) return;
         }
         if (drafted) setConfirmingLeave(true);
-        else dismissTo();
+        else closeTo();
+    };
+    // The dismissal itself, once nothing typed is in the way of it.
+    const closeTo = ()=>{
+        if (!started) tracker.abandon('close');
+        dismissTo();
     };
     const leaveDraft = ()=>{
         setConfirmingLeave(false);
-        dismissTo();
+        closeTo();
     };
     // The chosen model's cost against Auto's, as the model list states it.
     const modelMultiplier = pickedModel && ((_modelChoice_options = modelChoice.options) == null ? void 0 : (_modelChoice_options_options_find = _modelChoice_options.options.find((option)=>option.id === pickedModel)) == null ? void 0 : _modelChoice_options_options_find.multiplier) || 1;
@@ -538,12 +626,71 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
     // Free workspaces — never the month's whole allowance as if none were spent.
     const estimateText = freeTaste ? freeCredits ? `${aiCreditRangeText(estimate)}. You have ${freeCredits.left.toLocaleString('en-US')} of your ${freeCredits.total.toLocaleString('en-US')} free AI credits left this month, until ${aiFreeCreditsResetLabel(freeCredits.resetsOn)}` : `${aiCreditRangeText(estimate)}, of the ${FREE_AI_TASTE_CREDITS_PER_MONTH} AI credits you get free each month` : `${aiCreditRangeText(estimate)}, estimated`;
     const choosing = step === 'choose' && !started;
+    const reviewing = step === 'review' && !started;
+    const asking = step !== 'choose' && !started;
+    // Each answer's reason not to go forward, shown on a step once Next was refused there.
+    const fieldErrors = aiSiteStartFieldErrors(answers, {
+        freeTaste
+    });
+    const shownErrors = Object.fromEntries(AI_SITE_START_STEP_FIELDS[step].filter((field)=>checked.has(step) && fieldErrors[field]).map((field)=>[
+            field,
+            fieldErrors[field]
+        ]));
+    const stepProps = {
+        answers,
+        answer,
+        tracker,
+        errors: shownErrors,
+        fieldRef: (field)=>(node)=>{
+                fieldRefs.current[field] = node;
+            }
+    };
+    const HEADINGS = {
+        choose: {
+            title: 'How do you want to start?',
+            lede: creating ? 'Name your site, then choose how it starts. You can change everything later.' : 'You can change everything later.'
+        },
+        kind: {
+            title: 'What are you building?',
+            lede: `Say it in a few words, or pick the closest. ${PLATFORM_BRAND_NAME} AI plans and writes your pages from it.`
+        },
+        audience: {
+            title: 'Who is it for?',
+            lede: 'The pages and the contact form are written for them.'
+        },
+        style: {
+            title: 'Choose a style',
+            lede: 'Each picture is an example home page in that style. Yours is written for your business, with its own colors and fonts within the style you pick.'
+        },
+        details: {
+            title: 'A few details',
+            lede: 'Where messages go, how many pages, and what else to draft. All can be changed later.'
+        },
+        review: {
+            title: 'Review your site',
+            lede: started ? `${PLATFORM_BRAND_NAME} AI is on it.` : `${PLATFORM_BRAND_NAME} AI plans and writes your pages from these answers, then publishes your site.`
+        }
+    };
+    const heading = HEADINGS[step];
+    // Enter in a text answer is Next. A select, a card or a button keeps its own Enter.
+    const onStepKeyDown = (event)=>{
+        if (event.key !== 'Enter' || event.nativeEvent.isComposing || !asking || reviewing) return;
+        const target = event.target;
+        if (target.tagName !== 'INPUT' || target.type === 'hidden') return;
+        event.preventDefault();
+        next();
+    };
     return /*#__PURE__*/ _jsxs(Dialog, {
         open: true,
         fullScreen: true,
         ref: dialogRef,
         onClose: dismiss,
         "aria-labelledby": TITLE_ID,
+        // Where people get lost (AGL-3898): any input puts off the idle signal,
+        // and every click is read for rage and dead clicks.
+        onClickCapture: (event)=>tracker.click(aiSiteStartClickOf(event)),
+        onKeyDownCapture: ()=>tracker.activity(),
+        onInputCapture: ()=>tracker.activity(),
         // The console's own page surface, in both modes. A Dialog's paper sits
         // at elevation 24 by default, and in dark mode MUI lightens an elevated
         // paper with a white overlay, which turned the whole takeover a
@@ -561,6 +708,7 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
                 color: "inherit",
                 elevation: 0,
                 enableColorOnDark: true,
+                "data-start-area": "header",
                 sx: _extends({}, AI_SITE_START_SURFACE_SX, {
                     borderBottom: 1,
                     borderColor: 'divider'
@@ -593,7 +741,7 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
                         }),
                         /*#__PURE__*/ _jsx(Button, {
                             color: "inherit",
-                            onClick: exit,
+                            onClick: skip,
                             "aria-label": started ? 'Close' : 'Skip and start blank',
                             children: started ? 'Close' : 'Skip'
                         })
@@ -607,8 +755,9 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
                         sm: 3
                     }
                 },
+                onKeyDown: onStepKeyDown,
                 children: /*#__PURE__*/ _jsx(Container, {
-                    maxWidth: choosing ? 'md' : 'sm',
+                    maxWidth: choosing || step === 'kind' || step === 'style' ? 'md' : 'sm',
                     disableGutters: true,
                     sx: {
                         py: {
@@ -619,30 +768,39 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
                     children: /*#__PURE__*/ _jsxs(Stack, {
                         spacing: 4,
                         children: [
-                            /*#__PURE__*/ _jsx(Stepper, {
-                                activeStep: choosing ? 0 : 1,
-                                "aria-label": choosing ? 'Step 1 of 2' : 'Step 2 of 2',
+                            /*#__PURE__*/ _jsx(Box, {
                                 sx: {
-                                    maxWidth: (theme)=>theme.spacing(40),
+                                    maxWidth: (t)=>t.spacing(80),
                                     width: '100%',
                                     mx: 'auto'
                                 },
-                                children: STEP_LABELS.map((label)=>/*#__PURE__*/ _jsx(Step, {
-                                        children: /*#__PURE__*/ _jsx(StepLabel, {
-                                            children: label
-                                        })
-                                    }, label))
+                                children: /*#__PURE__*/ _jsx(StartProgress, {
+                                    step: step,
+                                    compact: compact,
+                                    onStep: started ? undefined : goBackTo
+                                })
                             }),
                             /*#__PURE__*/ _jsxs(Stack, {
                                 spacing: 1,
                                 sx: {
                                     textAlign: choosing ? 'center' : 'left'
                                 },
+                                "data-start-area": "heading",
                                 children: [
                                     /*#__PURE__*/ _jsx(Typography, {
+                                        ref: headingRef,
+                                        tabIndex: -1,
                                         variant: "h4",
                                         component: "h1",
-                                        children: choosing ? 'How do you want to start?' : 'Tell us about your site'
+                                        sx: {
+                                            '&:focus': {
+                                                outline: 'none'
+                                            },
+                                            '&:focus-visible': {
+                                                outline: 'none'
+                                            }
+                                        },
+                                        children: heading.title
                                     }),
                                     /*#__PURE__*/ _jsxs(Typography, {
                                         variant: "body1",
@@ -652,18 +810,22 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
                                                 sx: {
                                                     float: 'right'
                                                 }
-                                            }, START_HELP.choose)) : null,
-                                            choosing ? creating ? 'Name your site, then choose how it starts. You can change everything later.' : 'You can change everything later.' : `A few answers and ${PLATFORM_BRAND_NAME} AI plans and writes your pages, then publishes your site.`
+                                            }, START_HELP.choose)) : /*#__PURE__*/ _jsx(StepHelp, {
+                                                step: step
+                                            }),
+                                            heading.lede
                                         ]
                                     })
                                 ]
                             }),
                             notice && /*#__PURE__*/ _jsx(Alert, {
                                 severity: "info",
+                                "data-start-area": "notice",
                                 children: notice
                             }),
-                            step === 'describe' && !started && noneLeft && freeCredits && /*#__PURE__*/ _jsx(Alert, {
+                            asking && noneLeft && freeCredits && /*#__PURE__*/ _jsx(Alert, {
                                 severity: "warning",
+                                "data-start-area": "notice",
                                 action: orgSlug ? /*#__PURE__*/ _jsx(Button, {
                                     color: "inherit",
                                     size: "small",
@@ -672,19 +834,6 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
                                 }) : undefined,
                                 children: aiFreeCreditsNoneLeftText(freeCredits.resetsOn)
                             }),
-                            step === 'describe' && !started && !noneLeft && prompt && /*#__PURE__*/ _jsx(AiCreditsPromptNotice, {
-                                prompt: prompt,
-                                noun: "site",
-                                orgSlug: orgSlug,
-                                busy: busy,
-                                onBuildWhatFits: ()=>void plan({
-                                        creditsConfirmed: true
-                                    }),
-                                onSmaller: ()=>void plan({
-                                        creditsConfirmed: true,
-                                        pages: 1
-                                    })
-                            }),
                             choosing && creating && pendingSite ? /*#__PURE__*/ _jsxs(Stack, {
                                 spacing: 2,
                                 component: "section",
@@ -697,6 +846,7 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
                                 ]
                             }) : null,
                             choosing ? /*#__PURE__*/ _jsxs(Box, {
+                                "data-start-area": "choose-cards",
                                 sx: {
                                     display: 'grid',
                                     gridTemplateColumns: {
@@ -754,153 +904,33 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
                                     // Full screen: AI jobs opens in the panel this dialog covers.
                                     onOpenJobs: exit
                                 })
-                            }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                            }) : /*#__PURE__*/ _jsxs(Box, {
+                                component: "section",
                                 children: [
-                                    /*#__PURE__*/ _jsxs(Stack, {
-                                        spacing: 2,
-                                        component: "section",
-                                        "aria-label": "Your business",
-                                        children: [
-                                            /*#__PURE__*/ _jsx(SectionLabel, {
-                                                help: START_HELP.business,
-                                                children: 'Your business'
-                                            }),
-                                            /*#__PURE__*/ _jsx(TextField, {
-                                                fullWidth: true,
-                                                required: true,
-                                                label: "What kind of site are you creating?",
-                                                placeholder: "a neighborhood dog groomer that takes bookings",
-                                                value: answers.siteType,
-                                                onChange: (event)=>answer({
-                                                        siteType: event.target.value
-                                                    }),
-                                                helperText: "A few words is enough, or pick one below."
-                                            }),
-                                            /*#__PURE__*/ _jsx(Box, {
-                                                sx: {
-                                                    display: 'flex',
-                                                    flexWrap: 'wrap',
-                                                    gap: 1
-                                                },
-                                                children: AI_SITE_START_TYPES.map((type)=>/*#__PURE__*/ _jsx(Chip, {
-                                                        label: type,
-                                                        size: "small",
-                                                        color: answers.siteType === type ? 'primary' : 'default',
-                                                        variant: answers.siteType === type ? 'filled' : 'outlined',
-                                                        onClick: ()=>answer({
-                                                                siteType: type
-                                                            })
-                                                    }, type))
-                                            }),
-                                            /*#__PURE__*/ _jsx(TextField, {
-                                                fullWidth: true,
-                                                label: "Who is it for?",
-                                                placeholder: "local dog owners who want a regular groom booked online",
-                                                value: answers.audience,
-                                                onChange: (event)=>answer({
-                                                        audience: event.target.value
-                                                    }),
-                                                helperText: "Optional. It narrows who the pages are written for."
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsxs(Stack, {
-                                        spacing: 2,
-                                        component: "section",
-                                        "aria-label": "Style",
-                                        children: [
-                                            /*#__PURE__*/ _jsx(SectionLabel, {
-                                                help: START_HELP.style,
-                                                children: 'Style'
-                                            }),
-                                            /*#__PURE__*/ _jsx(Typography, {
-                                                variant: "body2",
-                                                color: "text.secondary",
-                                                children: answers.kind ? 'This decides how your site looks and which pages it usually has.' : 'Picked from your answer above. Choose another to change how your site looks and which pages it usually has.'
-                                            }),
-                                            /*#__PURE__*/ _jsx(OptionCardGrid, {
-                                                label: "Style of site",
-                                                options: AI_SITE_KINDS.map((kind)=>({
-                                                        id: kind.id,
-                                                        title: kind.label,
-                                                        description: kind.blurb,
-                                                        icon: AI_SITE_KIND_ICONS[kind.id]
-                                                    })),
-                                                value: aiSiteStartKind(answers).id,
-                                                onChange: (kind)=>answer({
-                                                        kind
-                                                    })
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsxs(Stack, {
-                                        spacing: 2,
-                                        component: "section",
-                                        "aria-label": "Details",
-                                        children: [
-                                            /*#__PURE__*/ _jsx(SectionLabel, {
-                                                help: START_HELP.details,
-                                                children: 'Details'
-                                            }),
-                                            /*#__PURE__*/ _jsx(TextField, {
-                                                select: true,
-                                                fullWidth: true,
-                                                label: "Where do form submissions go?",
-                                                value: answers.submissions,
-                                                onChange: (event)=>answer({
-                                                        submissions: event.target.value
-                                                    }),
-                                                helperText: "You can change this on the form itself afterwards.",
-                                                children: AI_SITE_SUBMISSION_CHOICES.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                                        value: option.id,
-                                                        children: `${option.label} — ${option.blurb}`
-                                                    }, option.id))
-                                            }),
-                                            /*#__PURE__*/ _jsxs(Stack, {
-                                                direction: {
-                                                    xs: 'column',
-                                                    sm: 'row'
-                                                },
-                                                spacing: 2,
-                                                children: [
-                                                    /*#__PURE__*/ _jsx(TextField, {
-                                                        select: true,
-                                                        fullWidth: true,
-                                                        label: "Pages",
-                                                        value: answers.pages,
-                                                        onChange: (event)=>answer({
-                                                                pages: Number(event.target.value)
-                                                            }),
-                                                        helperText: freeTaste ? AI_SITE_FREE_PAGES_NOTE : undefined,
-                                                        children: Array.from({
-                                                            length: band.max - band.min + 1
-                                                        }, (_, index)=>band.min + index).map((count)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                                                value: count,
-                                                                children: count
-                                                            }, count))
-                                                    }),
-                                                    !freeTaste && /*#__PURE__*/ _jsxs(TextField, {
-                                                        select: true,
-                                                        fullWidth: true,
-                                                        label: "Welcome email",
-                                                        value: answers.welcomeEmail ? 'yes' : 'no',
-                                                        onChange: (event)=>answer({
-                                                                welcomeEmail: event.target.value === 'yes'
-                                                            }),
-                                                        children: [
-                                                            /*#__PURE__*/ _jsx(MenuItem, {
-                                                                value: "yes",
-                                                                children: 'Draft one'
-                                                            }),
-                                                            /*#__PURE__*/ _jsx(MenuItem, {
-                                                                value: "no",
-                                                                children: 'No'
-                                                            })
-                                                        ]
-                                                    })
-                                                ]
-                                            })
-                                        ]
+                                    step === 'kind' && /*#__PURE__*/ _jsx(KindStep, _extends({}, stepProps)),
+                                    step === 'audience' && /*#__PURE__*/ _jsx(AudienceStep, _extends({}, stepProps)),
+                                    step === 'style' && /*#__PURE__*/ _jsx(StyleStep, _extends({}, stepProps)),
+                                    step === 'details' && /*#__PURE__*/ _jsx(DetailsStep, _extends({}, stepProps, {
+                                        freeTaste: freeTaste,
+                                        band: band
+                                    })),
+                                    step === 'review' && /*#__PURE__*/ _jsx(ReviewStep, {
+                                        answers: answers,
+                                        freeTaste: freeTaste,
+                                        onEdit: edit,
+                                        children: !noneLeft && prompt && /*#__PURE__*/ _jsx(AiCreditsPromptNotice, {
+                                            prompt: prompt,
+                                            noun: "site",
+                                            orgSlug: orgSlug,
+                                            busy: busy,
+                                            onBuildWhatFits: ()=>void plan({
+                                                    creditsConfirmed: true
+                                                }),
+                                            onSmaller: ()=>void plan({
+                                                    creditsConfirmed: true,
+                                                    pages: 1
+                                                })
+                                        })
                                     })
                                 ]
                             })
@@ -908,8 +938,9 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
                     })
                 })
             }),
-            step === 'describe' && !started && /* The footer stays put while the questions scroll. It wraps, because
+            asking && /* The footer stays put while the questions scroll. It wraps, because
            the estimate, the reason and the buttons are wider than a phone. */ /*#__PURE__*/ _jsxs(DialogActions, {
+                "data-start-area": "footer",
                 sx: _extends({
                     px: {
                         xs: 2,
@@ -923,7 +954,7 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
                     borderColor: 'divider'
                 }, AI_SITE_START_SURFACE_SX),
                 children: [
-                    /*#__PURE__*/ _jsxs(Stack, {
+                    reviewing && /*#__PURE__*/ _jsxs(Stack, {
                         direction: "row",
                         spacing: 0.5,
                         sx: {
@@ -942,20 +973,23 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
                             }))
                         ]
                     }),
-                    refusal && /*#__PURE__*/ _jsx(Typography, {
+                    reviewing && refusal && /*#__PURE__*/ _jsx(Typography, {
                         variant: "body2",
                         color: "text.secondary",
                         children: refusal
                     }),
-                    !freeTaste && /*#__PURE__*/ _jsx(AiModelSelector, {
+                    reviewing && !freeTaste && /*#__PURE__*/ _jsx(AiModelSelector, {
                         choice: modelChoice,
                         disabled: busy
                     }),
                     /*#__PURE__*/ _jsx(Button, {
-                        onClick: ()=>setStep('choose'),
+                        onClick: back,
+                        sx: reviewing ? undefined : {
+                            mr: 'auto'
+                        },
                         children: 'Back'
                     }),
-                    /*#__PURE__*/ _jsx(Button, {
+                    reviewing ? /*#__PURE__*/ _jsx(Button, {
                         variant: "contained",
                         size: "large",
                         disabled: busy || Boolean(refusal) || Boolean(prompt) || noneLeft,
@@ -964,6 +998,11 @@ export function AiSiteStartCard({ hostId, orgId, orgSlug, host, startBlank, leav
                             path: mdiCreation.path
                         }),
                         children: busy ? 'Starting…' : 'Plan my site'
+                    }) : /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        size: "large",
+                        onClick: next,
+                        children: returnTo === 'review' ? 'Back to review' : 'Next'
                     })
                 ]
             }),