@aglyn/plugins-crm 1.0.0-beta.143

package/src/lib/components/new-contact-drawer.js

@@ -0,0 +1,343 @@
+/**
+ * @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 { CONTACT_LIFECYCLE_STAGE_LABELS, CONTACT_LIFECYCLE_STAGES, consentGroupDisclosure, normalizeAddress, normalizeContactEmail, normalizePhone } from "@aglyn/aglyn";
+import { ICON_VARIANT_CLOSE } from "@aglyn/shared-data-enums";
+import { Container, MdiIcon, SrOnly } from "@aglyn/shared-ui-jsx";
+import { NavigationDrawerComponent } from "@aglyn/shared-ui-jsx/components/navigation-drawer.component";
+import { Alert, Button, Checkbox, FormControlLabel, FormHelperText, IconButton, MenuItem, Stack, TextField, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+import { useCrmScope } from "../hooks/use-crm-scope.js";
+import { parseContactTags } from "../model/contact-record.js";
+import { CompanyPicker, useCompanyOptions, useCreateCompany } from "./company-picker.js";
+import { ContactAddressFields, EMPTY_ADDRESS } from "./contact-address-fields.js";
+import { CrmSitePicker } from "./crm-site-picker.js";
+/**
+ * ADDING ONE PERSON BY HAND, IN A DRAWER (AGL-2596).
+ *
+ * A drawer and not a form above the list: a create form sitting on top of a
+ * table is the shape every list in this console was built to stop. The
+ * button in the list's header opens this, and the list is exactly as it was
+ * behind it.
+ *
+ * ## What is checked here and what is not
+ *
+ * The two fields a person can mistype in a way the record cannot hold — the
+ * email and the phone number — are checked before the request leaves, with
+ * the same normalizers the route runs, so the refusal lands under the field
+ * rather than as a sentence from the server. Everything else is the route's
+ * to decide: whether the address already belongs to somebody (it merges),
+ * whether the plan's band has room (it refuses, and its sentence is shown
+ * above the form unchanged).
+ *
+ * ## The consent box is a claim, and says so
+ *
+ * The forms plugin's rule for the opt-in field is that submitting a form is
+ * never itself consent. Typing somebody into the CRM is not either — so the
+ * checkbox is worded as the person's act, not the operator's, and the helper
+ * carries the group disclosure the form would have shown them.
+ *
+ * ## The company is a record, picked or created here
+ *
+ * The Company field is the picker (AGL-2613): a choice from the companies
+ * this site may see, with a "Create …" row for a name none of them carry, so
+ * the person filing a contact never leaves the drawer to make the account.
+ * What leaves the drawer is the company's id AND its name — the id is the
+ * link the route writes into the facet, the name is the label the list
+ * column and the global search keep reading. The company listen opens with
+ * the drawer and closes with it, because the drawer is mounted only while
+ * it is open.
+ */ export function NewContactDrawer(props) {
+    var _ref;
+    const { open, onClose, hostId, org, busy, error, owners, ownersReady, onSubmit } = props;
+    /*
+   * The controller the consent checkbox records a basis FOR: the mounted
+   * site's group, or at the organization level the picked site's — the one
+   * the route will capture the contact under. `null` until a site is
+   * picked, and the submit waits on it.
+   */ const { createHostId, createGroup } = useCrmScope({
+        hostId,
+        org
+    });
+    const consentGroup = createGroup;
+    const companies = useCompanyOptions({
+        hostId,
+        org,
+        enabled: open
+    });
+    const createCompany = useCreateCompany({
+        hostId,
+        org
+    });
+    const [email, setEmail] = useState('');
+    const [name, setName] = useState('');
+    const [phone, setPhone] = useState('');
+    const [jobTitle, setJobTitle] = useState('');
+    const [company, setCompany] = useState(null);
+    const [ownerUid, setOwnerUid] = useState('');
+    const [lifecycleStage, setLifecycleStage] = useState('');
+    const [tags, setTags] = useState('');
+    const [address, setAddress] = useState(EMPTY_ADDRESS);
+    const [marketingConsent, setMarketingConsent] = useState(false);
+    const [emailError, setEmailError] = useState('');
+    const [phoneError, setPhoneError] = useState('');
+    /*
+   * A fresh form on every opening. The drawer stays mounted behind the list
+   * between uses, and a person typed and then abandoned must not reappear
+   * half-filled the next time somebody reaches for "New contact".
+   */ useEffect(()=>{
+        if (!open) return;
+        setEmail('');
+        setName('');
+        setPhone('');
+        setJobTitle('');
+        setCompany(null);
+        setOwnerUid('');
+        setLifecycleStage('');
+        setTags('');
+        setAddress(EMPTY_ADDRESS);
+        setMarketingConsent(false);
+        setEmailError('');
+        setPhoneError('');
+    }, [
+        open
+    ]);
+    const handleSubmit = ()=>{
+        var _ref;
+        const normalizedEmail = normalizeContactEmail(email);
+        const trimmedPhone = phone.trim();
+        const normalizedPhone = trimmedPhone ? normalizePhone(trimmedPhone) : '';
+        setEmailError(normalizedEmail ? '' : 'Enter a valid email address.');
+        setPhoneError(trimmedPhone && !normalizedPhone ? 'Enter it with its country code, like +1 512 555 0107.' : '');
+        if (!normalizedEmail || trimmedPhone && !normalizedPhone) return;
+        onSubmit({
+            email: normalizedEmail,
+            name: name.trim().slice(0, 120),
+            phone: normalizedPhone != null ? normalizedPhone : '',
+            jobTitle: jobTitle.trim().slice(0, 120),
+            companyName: company ? company.name.trim().slice(0, 120) : '',
+            companyId: (_ref = company == null ? void 0 : company.id) != null ? _ref : null,
+            ownerUid,
+            lifecycleStage,
+            tags: parseContactTags(tags),
+            address: normalizeAddress(address),
+            marketingConsent
+        });
+    };
+    const disclosure = consentGroup ? consentGroupDisclosure(consentGroup) : null;
+    return /*#__PURE__*/ _jsx(NavigationDrawerComponent, {
+        open: open,
+        anchor: "right",
+        variant: "temporary",
+        onClose: onClose,
+        AppBarProps: {
+            color: 'surface'
+        },
+        sx: {
+            '& .MuiDrawer-paper': {
+                width: {
+                    xs: '100%',
+                    sm: 480
+                }
+            }
+        },
+        appBarLeft: /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsxs(IconButton, {
+                    color: "inherit",
+                    edge: "start",
+                    onClick: onClose,
+                    sx: {
+                        mr: 2
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: ICON_VARIANT_CLOSE.path
+                        }),
+                        /*#__PURE__*/ _jsx(SrOnly, {
+                            children: "close drawer"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "h6",
+                    component: "div",
+                    children: 'New contact'
+                })
+            ]
+        }),
+        appBarRight: /*#__PURE__*/ _jsx(Button, {
+            variant: "outlined",
+            color: "inherit",
+            onClick: onClose,
+            children: 'Cancel'
+        }),
+        children: /*#__PURE__*/ _jsx(Container, {
+            gutterY: true,
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 2,
+                children: [
+                    error ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: "warning",
+                        children: error
+                    }) : null,
+                    /*#__PURE__*/ _jsx(CrmSitePicker, {
+                        hostId: hostId,
+                        disabled: Boolean(busy),
+                        helperText: "The site that captures this person — it decides which sites may see them and whose marketing consent the checkbox below records."
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        label: "Email",
+                        type: "email",
+                        value: email,
+                        onChange: (event)=>setEmail(event.target.value),
+                        error: Boolean(emailError),
+                        helperText: emailError || 'The one field that is required — it is what makes two captures one person.',
+                        required: true,
+                        fullWidth: true,
+                        autoFocus: true
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        label: "Name",
+                        value: name,
+                        onChange: (event)=>setName(event.target.value),
+                        slotProps: {
+                            htmlInput: {
+                                maxLength: 120
+                            }
+                        },
+                        fullWidth: true
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        label: "Phone",
+                        value: phone,
+                        onChange: (event)=>setPhone(event.target.value),
+                        error: Boolean(phoneError),
+                        helperText: phoneError || 'With the country code, like +1 512 555 0107',
+                        fullWidth: true
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        label: "Job title",
+                        value: jobTitle,
+                        onChange: (event)=>setJobTitle(event.target.value),
+                        slotProps: {
+                            htmlInput: {
+                                maxLength: 120
+                            }
+                        },
+                        fullWidth: true
+                    }),
+                    /*#__PURE__*/ _jsx(CompanyPicker, {
+                        options: companies.options,
+                        ready: companies.ready,
+                        truncated: companies.truncated,
+                        value: (_ref = company == null ? void 0 : company.id) != null ? _ref : null,
+                        onChange: (_id, picked)=>setCompany(picked),
+                        onCreate: createCompany,
+                        email: email,
+                        disabled: Boolean(busy),
+                        helperText: "The account this person works for. Type a name nobody has filed yet to create it."
+                    }),
+                    /*#__PURE__*/ _jsxs(TextField, {
+                        select: true,
+                        size: "small",
+                        label: "Lifecycle stage",
+                        value: lifecycleStage,
+                        onChange: (event)=>setLifecycleStage(event.target.value),
+                        fullWidth: true,
+                        children: [
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "",
+                                children: 'Not placed yet'
+                            }),
+                            CONTACT_LIFECYCLE_STAGES.map((stage)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                    value: stage,
+                                    children: CONTACT_LIFECYCLE_STAGE_LABELS[stage]
+                                }, stage))
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(TextField, {
+                        select: true,
+                        size: "small",
+                        label: "Owner",
+                        value: ownerUid,
+                        onChange: (event)=>setOwnerUid(event.target.value),
+                        helperText: ownersReady && !owners.length ? 'The team roster could not be read, so nobody can be picked yet.' : 'The team member responsible for this relationship',
+                        fullWidth: true,
+                        children: [
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "",
+                                children: 'Unassigned'
+                            }),
+                            owners.map((owner)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                    value: owner.uid,
+                                    children: owner.label
+                                }, owner.uid))
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        label: "Tags",
+                        placeholder: "vip, beta",
+                        helperText: "Comma-separated",
+                        value: tags,
+                        onChange: (event)=>setTags(event.target.value),
+                        fullWidth: true
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "subtitle2",
+                        children: 'Address'
+                    }),
+                    /*#__PURE__*/ _jsx(ContactAddressFields, {
+                        value: address,
+                        onChange: setAddress
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        children: [
+                            /*#__PURE__*/ _jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ _jsx(Checkbox, {
+                                    checked: marketingConsent,
+                                    onChange: (event)=>setMarketingConsent(event.target.checked)
+                                }),
+                                label: "This person opted in to marketing email"
+                            }),
+                            /*#__PURE__*/ _jsx(FormHelperText, {
+                                children: (disclosure ? `${disclosure} ` : '') + 'Tick it only if they agreed. Adding a contact is never itself consent.'
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        color: "primary",
+                        // Held until the capturing site is known: the route resolves the
+                        // org from it and stamps the record with it.
+                        disabled: Boolean(busy) || !createHostId,
+                        onClick: handleSubmit,
+                        children: busy ? 'Adding…' : 'Add contact'
+                    })
+                ]
+            })
+        })
+    });
+}
+export default NewContactDrawer;
+
+//# sourceMappingURL=new-contact-drawer.js.map

package/src/lib/components/new-contact-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/crm/src/lib/components/new-contact-drawer.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'use client'\n\nimport {\n  CONTACT_LIFECYCLE_STAGE_LABELS,\n  CONTACT_LIFECYCLE_STAGES,\n  consentGroupDisclosure,\n  type AglynOrgBilling,\n  type AglynPostalAddress,\n  type ConsentGroup,\n  type ContactLifecycleStage,\n  normalizeAddress,\n  normalizeContactEmail,\n  normalizePhone,\n} from '@aglyn/aglyn'\nimport { ICON_VARIANT_CLOSE } from '@aglyn/shared-data-enums'\nimport { Container, MdiIcon, SrOnly } from '@aglyn/shared-ui-jsx'\nimport { NavigationDrawerComponent } from '@aglyn/shared-ui-jsx/components/navigation-drawer.component'\nimport {\n  Alert,\n  Button,\n  Checkbox,\n  FormControlLabel,\n  FormHelperText,\n  IconButton,\n  MenuItem,\n  Stack,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { useEffect, useState } from 'react'\nimport { useCrmScope } from '../hooks/use-crm-scope'\nimport { parseContactTags } from '../model/contact-record'\nimport {\n  CompanyPicker,\n  type CompanyOption,\n  useCompanyOptions,\n  useCreateCompany,\n} from './company-picker'\nimport {\n  ContactAddressFields,\n  EMPTY_ADDRESS,\n  type AddressDraft,\n} from './contact-address-fields'\nimport { CrmSitePicker } from './crm-site-picker'\nimport type { OrgMemberOption } from './use-org-members'\n\n/** What the drawer hands back — already normalized where the route would. */\nexport interface NewContactValues {\n  email: string\n  name: string\n  phone: string\n  jobTitle: string\n  /** The picked company's name — the label the list column and the search read. */\n  companyName: string\n  /** The picked company, or `null` for none (AGL-2613). */\n  companyId: string | null\n  ownerUid: string\n  lifecycleStage: ContactLifecycleStage | ''\n  tags: string[]\n  address: AglynPostalAddress | null\n  marketingConsent: boolean\n}\n\nexport interface NewContactDrawerProps {\n  open: boolean\n  onClose: () => void\n  /**\n   * The site the contact is being added from — what scopes the company list\n   * and the controller the consent checkbox records a basis for. `null` at\n   * the organization level (AGL-2630), where the drawer asks which site\n   * with a picker and holds its submit until one is named.\n   */\n  hostId: string | null\n  /** The org document the shell passed, for the company picker's scope. */\n  org?: Partial<AglynOrgBilling> | null\n  /** The request is in flight — the form holds still and the button says so. */\n  busy?: boolean\n  /** What the route answered when it refused, shown above the form. */\n  error?: string | null\n  /** The team, for the owner picker. */\n  owners: OrgMemberOption[]\n  /** The roster has answered — an empty list is then \"nobody to pick\". */\n  ownersReady: boolean\n  onSubmit: (values: NewContactValues) => void\n}\n\n/**\n * ADDING ONE PERSON BY HAND, IN A DRAWER (AGL-2596).\n *\n * A drawer and not a form above the list: a create form sitting on top of a\n * table is the shape every list in this console was built to stop. The\n * button in the list's header opens this, and the list is exactly as it was\n * behind it.\n *\n * ## What is checked here and what is not\n *\n * The two fields a person can mistype in a way the record cannot hold — the\n * email and the phone number — are checked before the request leaves, with\n * the same normalizers the route runs, so the refusal lands under the field\n * rather than as a sentence from the server. Everything else is the route's\n * to decide: whether the address already belongs to somebody (it merges),\n * whether the plan's band has room (it refuses, and its sentence is shown\n * above the form unchanged).\n *\n * ## The consent box is a claim, and says so\n *\n * The forms plugin's rule for the opt-in field is that submitting a form is\n * never itself consent. Typing somebody into the CRM is not either — so the\n * checkbox is worded as the person's act, not the operator's, and the helper\n * carries the group disclosure the form would have shown them.\n *\n * ## The company is a record, picked or created here\n *\n * The Company field is the picker (AGL-2613): a choice from the companies\n * this site may see, with a \"Create …\" row for a name none of them carry, so\n * the person filing a contact never leaves the drawer to make the account.\n * What leaves the drawer is the company's id AND its name — the id is the\n * link the route writes into the facet, the name is the label the list\n * column and the global search keep reading. The company listen opens with\n * the drawer and closes with it, because the drawer is mounted only while\n * it is open.\n */\nexport function NewContactDrawer(props: NewContactDrawerProps) {\n  const {\n    open,\n    onClose,\n    hostId,\n    org,\n    busy,\n    error,\n    owners,\n    ownersReady,\n    onSubmit,\n  } = props\n  /*\n   * The controller the consent checkbox records a basis FOR: the mounted\n   * site's group, or at the organization level the picked site's — the one\n   * the route will capture the contact under. `null` until a site is\n   * picked, and the submit waits on it.\n   */\n  const { createHostId, createGroup } = useCrmScope({ hostId, org })\n  const consentGroup: ConsentGroup | null = createGroup\n  const companies = useCompanyOptions({ hostId, org, enabled: open })\n  const createCompany = useCreateCompany({ hostId, org })\n\n  const [email, setEmail] = useState('')\n  const [name, setName] = useState('')\n  const [phone, setPhone] = useState('')\n  const [jobTitle, setJobTitle] = useState('')\n  const [company, setCompany] = useState<CompanyOption | null>(null)\n  const [ownerUid, setOwnerUid] = useState('')\n  const [lifecycleStage, setLifecycleStage] = useState<\n    ContactLifecycleStage | ''\n  >('')\n  const [tags, setTags] = useState('')\n  const [address, setAddress] = useState<AddressDraft>(EMPTY_ADDRESS)\n  const [marketingConsent, setMarketingConsent] = useState(false)\n  const [emailError, setEmailError] = useState('')\n  const [phoneError, setPhoneError] = useState('')\n\n  /*\n   * A fresh form on every opening. The drawer stays mounted behind the list\n   * between uses, and a person typed and then abandoned must not reappear\n   * half-filled the next time somebody reaches for \"New contact\".\n   */\n  useEffect(() => {\n    if (!open) return\n    setEmail('')\n    setName('')\n    setPhone('')\n    setJobTitle('')\n    setCompany(null)\n    setOwnerUid('')\n    setLifecycleStage('')\n    setTags('')\n    setAddress(EMPTY_ADDRESS)\n    setMarketingConsent(false)\n    setEmailError('')\n    setPhoneError('')\n  }, [open])\n\n  const handleSubmit = () => {\n    const normalizedEmail = normalizeContactEmail(email)\n    const trimmedPhone = phone.trim()\n    const normalizedPhone = trimmedPhone ? normalizePhone(trimmedPhone) : ''\n    setEmailError(normalizedEmail ? '' : 'Enter a valid email address.')\n    setPhoneError(\n      trimmedPhone && !normalizedPhone\n        ? 'Enter it with its country code, like +1 512 555 0107.'\n        : '',\n    )\n    if (!normalizedEmail || (trimmedPhone && !normalizedPhone)) return\n    onSubmit({\n      email: normalizedEmail,\n      name: name.trim().slice(0, 120),\n      phone: normalizedPhone ?? '',\n      jobTitle: jobTitle.trim().slice(0, 120),\n      companyName: company ? company.name.trim().slice(0, 120) : '',\n      companyId: company?.id ?? null,\n      ownerUid,\n      lifecycleStage,\n      tags: parseContactTags(tags),\n      address: normalizeAddress(address),\n      marketingConsent,\n    })\n  }\n\n  const disclosure = consentGroup ? consentGroupDisclosure(consentGroup) : null\n\n  return (\n    <NavigationDrawerComponent\n      open={open}\n      anchor=\"right\"\n      variant=\"temporary\"\n      onClose={onClose}\n      AppBarProps={{ color: 'surface' }}\n      sx={{ '& .MuiDrawer-paper': { width: { xs: '100%', sm: 480 } } }}\n      appBarLeft={\n        <>\n          <IconButton\n            color=\"inherit\"\n            edge=\"start\"\n            onClick={onClose}\n            sx={{ mr: 2 }}\n          >\n            <MdiIcon path={ICON_VARIANT_CLOSE.path} />\n            <SrOnly>close drawer</SrOnly>\n          </IconButton>\n          <Typography variant=\"h6\" component=\"div\">\n            {'New contact'}\n          </Typography>\n        </>\n      }\n      appBarRight={\n        <Button variant=\"outlined\" color=\"inherit\" onClick={onClose}>\n          {'Cancel'}\n        </Button>\n      }\n    >\n      <Container gutterY>\n        <Stack spacing={2}>\n          {error ? <Alert severity=\"warning\">{error}</Alert> : null}\n          {/*\n            First, because everything below it is filed under the answer: the\n            site decides which of the org's sites may see the person and whose\n            consent the checkbox at the foot records. Renders nothing under a\n            site (AGL-2630).\n          */}\n          <CrmSitePicker\n            hostId={hostId}\n            disabled={Boolean(busy)}\n            helperText=\"The site that captures this person — it decides which sites may see them and whose marketing consent the checkbox below records.\"\n          />\n          <TextField\n            size=\"small\"\n            label=\"Email\"\n            type=\"email\"\n            value={email}\n            onChange={(event) => setEmail(event.target.value)}\n            error={Boolean(emailError)}\n            helperText={\n              emailError ||\n              'The one field that is required — it is what makes two captures one person.'\n            }\n            required\n            fullWidth\n            autoFocus\n          />\n          <TextField\n            size=\"small\"\n            label=\"Name\"\n            value={name}\n            onChange={(event) => setName(event.target.value)}\n            slotProps={{ htmlInput: { maxLength: 120 } }}\n            fullWidth\n          />\n          <TextField\n            size=\"small\"\n            label=\"Phone\"\n            value={phone}\n            onChange={(event) => setPhone(event.target.value)}\n            error={Boolean(phoneError)}\n            helperText={phoneError || 'With the country code, like +1 512 555 0107'}\n            fullWidth\n          />\n          <TextField\n            size=\"small\"\n            label=\"Job title\"\n            value={jobTitle}\n            onChange={(event) => setJobTitle(event.target.value)}\n            slotProps={{ htmlInput: { maxLength: 120 } }}\n            fullWidth\n          />\n          <CompanyPicker\n            options={companies.options}\n            ready={companies.ready}\n            truncated={companies.truncated}\n            value={company?.id ?? null}\n            onChange={(_id, picked) => setCompany(picked)}\n            onCreate={createCompany}\n            email={email}\n            disabled={Boolean(busy)}\n            helperText=\"The account this person works for. Type a name nobody has filed yet to create it.\"\n          />\n          <TextField\n            select\n            size=\"small\"\n            label=\"Lifecycle stage\"\n            value={lifecycleStage}\n            onChange={(event) =>\n              setLifecycleStage(event.target.value as ContactLifecycleStage | '')\n            }\n            fullWidth\n          >\n            <MenuItem value=\"\">{'Not placed yet'}</MenuItem>\n            {CONTACT_LIFECYCLE_STAGES.map((stage) => (\n              <MenuItem key={stage} value={stage}>\n                {CONTACT_LIFECYCLE_STAGE_LABELS[stage]}\n              </MenuItem>\n            ))}\n          </TextField>\n          <TextField\n            select\n            size=\"small\"\n            label=\"Owner\"\n            value={ownerUid}\n            onChange={(event) => setOwnerUid(event.target.value)}\n            helperText={\n              ownersReady && !owners.length\n                ? 'The team roster could not be read, so nobody can be picked yet.'\n                : 'The team member responsible for this relationship'\n            }\n            fullWidth\n          >\n            <MenuItem value=\"\">{'Unassigned'}</MenuItem>\n            {owners.map((owner) => (\n              <MenuItem key={owner.uid} value={owner.uid}>\n                {owner.label}\n              </MenuItem>\n            ))}\n          </TextField>\n          <TextField\n            size=\"small\"\n            label=\"Tags\"\n            placeholder=\"vip, beta\"\n            helperText=\"Comma-separated\"\n            value={tags}\n            onChange={(event) => setTags(event.target.value)}\n            fullWidth\n          />\n          <Typography variant=\"subtitle2\">{'Address'}</Typography>\n          <ContactAddressFields value={address} onChange={setAddress} />\n          <Stack>\n            <FormControlLabel\n              control={\n                <Checkbox\n                  checked={marketingConsent}\n                  onChange={(event) => setMarketingConsent(event.target.checked)}\n                />\n              }\n              label=\"This person opted in to marketing email\"\n            />\n            <FormHelperText>\n              {(disclosure ? `${disclosure} ` : '') +\n                'Tick it only if they agreed. Adding a contact is never itself consent.'}\n            </FormHelperText>\n          </Stack>\n          <Button\n            variant=\"contained\"\n            color=\"primary\"\n            // Held until the capturing site is known: the route resolves the\n            // org from it and stamps the record with it.\n            disabled={Boolean(busy) || !createHostId}\n            onClick={handleSubmit}\n          >\n            {busy ? 'Adding…' : 'Add contact'}\n          </Button>\n        </Stack>\n      </Container>\n    </NavigationDrawerComponent>\n  )\n}\n\nexport default NewContactDrawer\n"],"names":["CONTACT_LIFECYCLE_STAGE_LABELS","CONTACT_LIFECYCLE_STAGES","consentGroupDisclosure","normalizeAddress","normalizeContactEmail","normalizePhone","ICON_VARIANT_CLOSE","Container","MdiIcon","SrOnly","NavigationDrawerComponent","Alert","Button","Checkbox","FormControlLabel","FormHelperText","IconButton","MenuItem","Stack","TextField","Typography","useEffect","useState","useCrmScope","parseContactTags","CompanyPicker","useCompanyOptions","useCreateCompany","ContactAddressFields","EMPTY_ADDRESS","CrmSitePicker","NewContactDrawer","props","open","onClose","hostId","org","busy","error","owners","ownersReady","onSubmit","createHostId","createGroup","consentGroup","companies","enabled","createCompany","email","setEmail","name","setName","phone","setPhone","jobTitle","setJobTitle","company","setCompany","ownerUid","setOwnerUid","lifecycleStage","setLifecycleStage","tags","setTags","address","setAddress","marketingConsent","setMarketingConsent","emailError","setEmailError","phoneError","setPhoneError","handleSubmit","normalizedEmail","trimmedPhone","trim","normalizedPhone","slice","companyName","companyId","id","disclosure","anchor","variant","AppBarProps","color","sx","width","xs","sm","appBarLeft","edge","onClick","mr","path","component","appBarRight","gutterY","spacing","severity","disabled","Boolean","helperText","size","label","type","value","onChange","event","target","required","fullWidth","autoFocus","slotProps","htmlInput","maxLength","options","ready","truncated","_id","picked","onCreate","select","map","stage","length","owner","uid","placeholder","control","checked"],"mappings":"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"}

package/src/lib/components/org-lead-surfaces-note.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @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.
+ */
+/**
+ * How many sites the note opens with their forms showing. The rest sit
+ * behind a count until asked for — and, since a site's forms are read by
+ * the group that shows them, are not read until then either.
+ */
+export declare const ORG_LEAD_SURFACES_OPEN_SITES = 3;
+/**
+ * WHAT CREATES A LEAD, ACROSS THE ORGANIZATION (AGL-2638).
+ *
+ * The org-level Leads section lists every site's leads in one table, and
+ * for a while said nothing about why a form's people were in it: the
+ * per-site note was drawn only under a site. This is the same note grouped
+ * by site — each site's routed forms, the forms that could route with the
+ * switch beside them, and the forms that cannot with the reason as the
+ * tooltip — over the sites the mount already bounds. The always-on
+ * surfaces are named once at the top, because a member sign-up files a
+ * lead on every site and saying so three times would suggest otherwise.
+ *
+ * ## Bounded two ways
+ *
+ * The sites come from the mount, which the shell already capped; and only
+ * the first {@link ORG_LEAD_SURFACES_OPEN_SITES} groups mount their reader
+ * until the reader opens the rest, so an org with twenty sites opens three
+ * listeners on arrival and not twenty.
+ *
+ * ## Links
+ *
+ * A site's name opens its own Leads section, and a form its own page, both
+ * built from the mount's `hostsPath` and the site's subdomain the way the
+ * mount builds a site's hub; a site whose subdomain never resolved is named
+ * and not linked. No host-index read per site: the mount already answered.
+ *
+ * Rendered only beneath the org mount — under a site the hook answers
+ * `null` and so does the note, which keeps the section's one-line choice
+ * between the two notes honest.
+ */
+export declare function OrgLeadSurfacesNote(): import("react").JSX.Element;
+export declare namespace OrgLeadSurfacesNote {
+    var displayName: string;
+}
+export default OrgLeadSurfacesNote;

package/src/lib/components/org-lead-surfaces-note.js

@@ -0,0 +1,172 @@
+/**
+ * @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 { AppLink } from "@aglyn/shared-ui-jsx";
+import { Button, Stack, Typography } from "@mui/material";
+import { useCallback, useState } from "react";
+import { useCrmOrgMount } from "../hooks/use-crm-org-mount.js";
+import { LEAD_SURFACES_CONTACTS_TOO, LEAD_SURFACES_INTRO, LeadSurfaceFormList, UnroutedLeadSurfaces, useLeadSurfaceForms, useTurnOnLeadRouting } from "./lead-surfaces-note.js";
+/**
+ * How many sites the note opens with their forms showing. The rest sit
+ * behind a count until asked for — and, since a site's forms are read by
+ * the group that shows them, are not read until then either.
+ */ export const ORG_LEAD_SURFACES_OPEN_SITES = 3;
+/**
+ * WHAT CREATES A LEAD, ACROSS THE ORGANIZATION (AGL-2638).
+ *
+ * The org-level Leads section lists every site's leads in one table, and
+ * for a while said nothing about why a form's people were in it: the
+ * per-site note was drawn only under a site. This is the same note grouped
+ * by site — each site's routed forms, the forms that could route with the
+ * switch beside them, and the forms that cannot with the reason as the
+ * tooltip — over the sites the mount already bounds. The always-on
+ * surfaces are named once at the top, because a member sign-up files a
+ * lead on every site and saying so three times would suggest otherwise.
+ *
+ * ## Bounded two ways
+ *
+ * The sites come from the mount, which the shell already capped; and only
+ * the first {@link ORG_LEAD_SURFACES_OPEN_SITES} groups mount their reader
+ * until the reader opens the rest, so an org with twenty sites opens three
+ * listeners on arrival and not twenty.
+ *
+ * ## Links
+ *
+ * A site's name opens its own Leads section, and a form its own page, both
+ * built from the mount's `hostsPath` and the site's subdomain the way the
+ * mount builds a site's hub; a site whose subdomain never resolved is named
+ * and not linked. No host-index read per site: the mount already answered.
+ *
+ * Rendered only beneath the org mount — under a site the hook answers
+ * `null` and so does the note, which keeps the section's one-line choice
+ * between the two notes honest.
+ */ export function OrgLeadSurfacesNote() {
+    const mount = useCrmOrgMount();
+    const { turningOn, turnOn } = useTurnOnLeadRouting();
+    const [opened, setOpened] = useState(false);
+    if (!mount) return null;
+    const { hosts, hostsReady } = mount;
+    const shown = opened ? hosts : hosts.slice(0, ORG_LEAD_SURFACES_OPEN_SITES);
+    const folded = hosts.length - shown.length;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: `${LEAD_SURFACES_INTRO}, on every site. ${LEAD_SURFACES_CONTACTS_TOO}`
+            }),
+            !hostsReady ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: '…'
+            }) : !hosts.length ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'This organization has no sites yet.'
+            }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    shown.map((host)=>/*#__PURE__*/ _jsx(SiteLeadSurfaces, {
+                            host: host,
+                            mount: mount,
+                            turningOn: turningOn,
+                            onTurnOn: (form)=>void turnOn({
+                                    hostId: host.id,
+                                    form,
+                                    siteName: mount.siteName(host.id)
+                                })
+                        }, host.id)),
+                    folded > 0 ? /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        variant: "text",
+                        onClick: ()=>setOpened(true),
+                        sx: {
+                            alignSelf: 'flex-start'
+                        },
+                        children: `Show ${folded} more ${folded === 1 ? 'site' : 'sites'}`
+                    }) : hosts.length > ORG_LEAD_SURFACES_OPEN_SITES ? /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        variant: "text",
+                        onClick: ()=>setOpened(false),
+                        sx: {
+                            alignSelf: 'flex-start'
+                        },
+                        children: `Show the first ${ORG_LEAD_SURFACES_OPEN_SITES} sites only`
+                    }) : null
+                ]
+            })
+        ]
+    });
+}
+OrgLeadSurfacesNote.displayName = 'OrgLeadSurfacesNote';
+/**
+ * One site's group: its name, then the same two rows the site note draws,
+ * read by the same reader. A site with no forms says so in one line rather
+ * than drawing an empty "no form routes leads yet" that reads like a
+ * verdict on forms that do not exist.
+ */ function SiteLeadSurfaces(props) {
+    const { host, mount, turningOn, onTurnOn } = props;
+    const { routed, unrouted, truncated, status } = useLeadSurfaceForms(host.id);
+    const name = mount.siteName(host.id);
+    const hubHref = mount.siteHubHref(host.id);
+    const subdomain = mount.siteSubdomain(host.id);
+    const formHref = useCallback((formId)=>subdomain ? `${mount.hostsPath}/${encodeURIComponent(subdomain)}/forms/${encodeURIComponent(formId)}` : null, [
+        mount.hostsPath,
+        subdomain
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 0.25,
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "subtitle2",
+                component: "div",
+                children: hubHref ? /*#__PURE__*/ _jsx(AppLink, {
+                    href: `${hubHref}/leads`,
+                    underline: "hover",
+                    children: name
+                }) : name
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                component: "div",
+                children: status === 'loading' ? '…' : status === 'error' ? 'The forms on this site could not be read.' : !routed.length && !unrouted.length ? 'No forms on this site yet.' : routed.length ? /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        'Routing leads: ',
+                        /*#__PURE__*/ _jsx(LeadSurfaceFormList, {
+                            forms: routed,
+                            truncated: truncated,
+                            formHref: formHref
+                        }),
+                        '.'
+                    ]
+                }) : 'No form routes leads yet.'
+            }),
+            unrouted.length ? /*#__PURE__*/ _jsx(UnroutedLeadSurfaces, {
+                hostId: host.id,
+                forms: unrouted,
+                formHref: formHref,
+                turningOn: turningOn,
+                onTurnOn: onTurnOn
+            }) : null
+        ]
+    });
+}
+SiteLeadSurfaces.displayName = 'SiteLeadSurfaces';
+export default OrgLeadSurfacesNote;
+
+//# sourceMappingURL=org-lead-surfaces-note.js.map

package/src/lib/components/org-lead-surfaces-note.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/crm/src/lib/components/org-lead-surfaces-note.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 type { ConsolePluginOrgHost } from '@aglyn/aglyn'\nimport { AppLink } from '@aglyn/shared-ui-jsx'\nimport { Button, Stack, Typography } from '@mui/material'\nimport { useCallback, useState } from 'react'\nimport { type CrmOrgMount, useCrmOrgMount } from '../hooks/use-crm-org-mount'\nimport type { LeadSurfaceForm } from '../model/lead-surfaces'\nimport {\n  LEAD_SURFACES_CONTACTS_TOO,\n  LEAD_SURFACES_INTRO,\n  type LeadRoutingTarget,\n  LeadSurfaceFormList,\n  UnroutedLeadSurfaces,\n  useLeadSurfaceForms,\n  useTurnOnLeadRouting,\n} from './lead-surfaces-note'\n\n/**\n * How many sites the note opens with their forms showing. The rest sit\n * behind a count until asked for — and, since a site's forms are read by\n * the group that shows them, are not read until then either.\n */\nexport const ORG_LEAD_SURFACES_OPEN_SITES = 3\n\n/**\n * WHAT CREATES A LEAD, ACROSS THE ORGANIZATION (AGL-2638).\n *\n * The org-level Leads section lists every site's leads in one table, and\n * for a while said nothing about why a form's people were in it: the\n * per-site note was drawn only under a site. This is the same note grouped\n * by site — each site's routed forms, the forms that could route with the\n * switch beside them, and the forms that cannot with the reason as the\n * tooltip — over the sites the mount already bounds. The always-on\n * surfaces are named once at the top, because a member sign-up files a\n * lead on every site and saying so three times would suggest otherwise.\n *\n * ## Bounded two ways\n *\n * The sites come from the mount, which the shell already capped; and only\n * the first {@link ORG_LEAD_SURFACES_OPEN_SITES} groups mount their reader\n * until the reader opens the rest, so an org with twenty sites opens three\n * listeners on arrival and not twenty.\n *\n * ## Links\n *\n * A site's name opens its own Leads section, and a form its own page, both\n * built from the mount's `hostsPath` and the site's subdomain the way the\n * mount builds a site's hub; a site whose subdomain never resolved is named\n * and not linked. No host-index read per site: the mount already answered.\n *\n * Rendered only beneath the org mount — under a site the hook answers\n * `null` and so does the note, which keeps the section's one-line choice\n * between the two notes honest.\n */\nexport function OrgLeadSurfacesNote() {\n  const mount = useCrmOrgMount()\n  const { turningOn, turnOn } = useTurnOnLeadRouting()\n  const [opened, setOpened] = useState(false)\n  if (!mount) return null\n  const { hosts, hostsReady } = mount\n  const shown = opened ? hosts : hosts.slice(0, ORG_LEAD_SURFACES_OPEN_SITES)\n  const folded = hosts.length - shown.length\n  return (\n    <Stack spacing={1}>\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {`${LEAD_SURFACES_INTRO}, on every site. ${LEAD_SURFACES_CONTACTS_TOO}`}\n      </Typography>\n      {!hostsReady ? (\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          {'…'}\n        </Typography>\n      ) : !hosts.length ? (\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {'This organization has no sites yet.'}\n        </Typography>\n      ) : (\n        <>\n          {shown.map((host) => (\n            <SiteLeadSurfaces\n              key={host.id}\n              host={host}\n              mount={mount}\n              turningOn={turningOn}\n              onTurnOn={(form) =>\n                void turnOn({ hostId: host.id, form, siteName: mount.siteName(host.id) })\n              }\n            />\n          ))}\n          {folded > 0 ? (\n            <Button\n              size=\"small\"\n              variant=\"text\"\n              onClick={() => setOpened(true)}\n              sx={{ alignSelf: 'flex-start' }}\n            >\n              {`Show ${folded} more ${folded === 1 ? 'site' : 'sites'}`}\n            </Button>\n          ) : hosts.length > ORG_LEAD_SURFACES_OPEN_SITES ? (\n            <Button\n              size=\"small\"\n              variant=\"text\"\n              onClick={() => setOpened(false)}\n              sx={{ alignSelf: 'flex-start' }}\n            >\n              {`Show the first ${ORG_LEAD_SURFACES_OPEN_SITES} sites only`}\n            </Button>\n          ) : null}\n        </>\n      )}\n    </Stack>\n  )\n}\nOrgLeadSurfacesNote.displayName = 'OrgLeadSurfacesNote'\n\n/**\n * One site's group: its name, then the same two rows the site note draws,\n * read by the same reader. A site with no forms says so in one line rather\n * than drawing an empty \"no form routes leads yet\" that reads like a\n * verdict on forms that do not exist.\n */\nfunction SiteLeadSurfaces(props: {\n  host: ConsolePluginOrgHost\n  mount: CrmOrgMount\n  turningOn: LeadRoutingTarget | null\n  onTurnOn: (form: LeadSurfaceForm) => void\n}) {\n  const { host, mount, turningOn, onTurnOn } = props\n  const { routed, unrouted, truncated, status } = useLeadSurfaceForms(host.id)\n  const name = mount.siteName(host.id)\n  const hubHref = mount.siteHubHref(host.id)\n  const subdomain = mount.siteSubdomain(host.id)\n  const formHref = useCallback(\n    (formId: string) =>\n      subdomain\n        ? `${mount.hostsPath}/${encodeURIComponent(subdomain)}/forms/${encodeURIComponent(formId)}`\n        : null,\n    [mount.hostsPath, subdomain],\n  )\n  return (\n    <Stack spacing={0.25}>\n      <Typography variant=\"subtitle2\" component=\"div\">\n        {hubHref ? (\n          <AppLink href={`${hubHref}/leads`} underline=\"hover\">\n            {name}\n          </AppLink>\n        ) : (\n          name\n        )}\n      </Typography>\n      <Typography variant=\"body2\" color=\"text.secondary\" component=\"div\">\n        {status === 'loading' ? (\n          '…'\n        ) : status === 'error' ? (\n          'The forms on this site could not be read.'\n        ) : !routed.length && !unrouted.length ? (\n          'No forms on this site yet.'\n        ) : routed.length ? (\n          <>\n            {'Routing leads: '}\n            <LeadSurfaceFormList forms={routed} truncated={truncated} formHref={formHref} />\n            {'.'}\n          </>\n        ) : (\n          'No form routes leads yet.'\n        )}\n      </Typography>\n      {unrouted.length ? (\n        <UnroutedLeadSurfaces\n          hostId={host.id}\n          forms={unrouted}\n          formHref={formHref}\n          turningOn={turningOn}\n          onTurnOn={onTurnOn}\n        />\n      ) : null}\n    </Stack>\n  )\n}\nSiteLeadSurfaces.displayName = 'SiteLeadSurfaces'\n\nexport default OrgLeadSurfacesNote\n"],"names":["AppLink","Button","Stack","Typography","useCallback","useState","useCrmOrgMount","LEAD_SURFACES_CONTACTS_TOO","LEAD_SURFACES_INTRO","LeadSurfaceFormList","UnroutedLeadSurfaces","useLeadSurfaceForms","useTurnOnLeadRouting","ORG_LEAD_SURFACES_OPEN_SITES","OrgLeadSurfacesNote","mount","turningOn","turnOn","opened","setOpened","hosts","hostsReady","shown","slice","folded","length","spacing","variant","color","map","host","SiteLeadSurfaces","onTurnOn","form","hostId","id","siteName","size","onClick","sx","alignSelf","displayName","props","routed","unrouted","truncated","status","name","hubHref","siteHubHref","subdomain","siteSubdomain","formHref","formId","hostsPath","encodeURIComponent","component","href","underline","forms"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;AAGA,SAASA,OAAO,QAAQ,uBAAsB;AAC9C,SAASC,MAAM,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAe;AACzD,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAO;AAC7C,SAA2BC,cAAc,QAAQ,gCAA4B;AAE7E,SACEC,0BAA0B,EAC1BC,mBAAmB,EAEnBC,mBAAmB,EACnBC,oBAAoB,EACpBC,mBAAmB,EACnBC,oBAAoB,QACf,0BAAsB;AAE7B;;;;CAIC,GACD,OAAO,MAAMC,+BAA+B,EAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC;IACd,MAAMC,QAAQT;IACd,MAAM,EAAEU,SAAS,EAAEC,MAAM,EAAE,GAAGL;IAC9B,MAAM,CAACM,QAAQC,UAAU,GAAGd,SAAS;IACrC,IAAI,CAACU,OAAO,OAAO;IACnB,MAAM,EAAEK,KAAK,EAAEC,UAAU,EAAE,GAAGN;IAC9B,MAAMO,QAAQJ,SAASE,QAAQA,MAAMG,KAAK,CAAC,GAAGV;IAC9C,MAAMW,SAASJ,MAAMK,MAAM,GAAGH,MAAMG,MAAM;IAC1C,qBACE,MAACvB;QAAMwB,SAAS;;0BACd,KAACvB;gBAAWwB,SAAQ;gBAAQC,OAAM;0BAC/B,GAAGpB,oBAAoB,iBAAiB,EAAED,4BAA4B;;YAExE,CAACc,2BACA,KAAClB;gBAAWwB,SAAQ;gBAAUC,OAAM;0BACjC;iBAED,CAACR,MAAMK,MAAM,iBACf,KAACtB;gBAAWwB,SAAQ;gBAAQC,OAAM;0BAC/B;+BAGH;;oBACGN,MAAMO,GAAG,CAAC,CAACC,qBACV,KAACC;4BAECD,MAAMA;4BACNf,OAAOA;4BACPC,WAAWA;4BACXgB,UAAU,CAACC,OACT,KAAKhB,OAAO;oCAAEiB,QAAQJ,KAAKK,EAAE;oCAAEF;oCAAMG,UAAUrB,MAAMqB,QAAQ,CAACN,KAAKK,EAAE;gCAAE;2BALpEL,KAAKK,EAAE;oBASfX,SAAS,kBACR,KAACvB;wBACCoC,MAAK;wBACLV,SAAQ;wBACRW,SAAS,IAAMnB,UAAU;wBACzBoB,IAAI;4BAAEC,WAAW;wBAAa;kCAE7B,CAAC,KAAK,EAAEhB,OAAO,MAAM,EAAEA,WAAW,IAAI,SAAS,SAAS;yBAEzDJ,MAAMK,MAAM,GAAGZ,6CACjB,KAACZ;wBACCoC,MAAK;wBACLV,SAAQ;wBACRW,SAAS,IAAMnB,UAAU;wBACzBoB,IAAI;4BAAEC,WAAW;wBAAa;kCAE7B,CAAC,eAAe,EAAE3B,6BAA6B,WAAW,CAAC;yBAE5D;;;;;AAKd;AACAC,oBAAoB2B,WAAW,GAAG;AAElC;;;;;CAKC,GACD,SAASV,iBAAiBW,KAKzB;IACC,MAAM,EAAEZ,IAAI,EAAEf,KAAK,EAAEC,SAAS,EAAEgB,QAAQ,EAAE,GAAGU;IAC7C,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAAGnC,oBAAoBmB,KAAKK,EAAE;IAC3E,MAAMY,OAAOhC,MAAMqB,QAAQ,CAACN,KAAKK,EAAE;IACnC,MAAMa,UAAUjC,MAAMkC,WAAW,CAACnB,KAAKK,EAAE;IACzC,MAAMe,YAAYnC,MAAMoC,aAAa,CAACrB,KAAKK,EAAE;IAC7C,MAAMiB,WAAWhD,YACf,CAACiD,SACCH,YACI,GAAGnC,MAAMuC,SAAS,CAAC,CAAC,EAAEC,mBAAmBL,WAAW,OAAO,EAAEK,mBAAmBF,SAAS,GACzF,MACN;QAACtC,MAAMuC,SAAS;QAAEJ;KAAU;IAE9B,qBACE,MAAChD;QAAMwB,SAAS;;0BACd,KAACvB;gBAAWwB,SAAQ;gBAAY6B,WAAU;0BACvCR,wBACC,KAAChD;oBAAQyD,MAAM,GAAGT,QAAQ,MAAM,CAAC;oBAAEU,WAAU;8BAC1CX;qBAGHA;;0BAGJ,KAAC5C;gBAAWwB,SAAQ;gBAAQC,OAAM;gBAAiB4B,WAAU;0BAC1DV,WAAW,YACV,MACEA,WAAW,UACb,8CACE,CAACH,OAAOlB,MAAM,IAAI,CAACmB,SAASnB,MAAM,GACpC,+BACEkB,OAAOlB,MAAM,iBACf;;wBACG;sCACD,KAAChB;4BAAoBkD,OAAOhB;4BAAQE,WAAWA;4BAAWO,UAAUA;;wBACnE;;qBAGH;;YAGHR,SAASnB,MAAM,iBACd,KAACf;gBACCwB,QAAQJ,KAAKK,EAAE;gBACfwB,OAAOf;gBACPQ,UAAUA;gBACVpC,WAAWA;gBACXgB,UAAUA;iBAEV;;;AAGV;AACAD,iBAAiBU,WAAW,GAAG;AAE/B,eAAe3B,oBAAmB"}