@mindbill/react 0.21.0 → 0.21.2

package/README.md

@@ -153,14 +153,16 @@ The component includes the interaction model, not just the markup:
 - a responsive two-column review form (one column on narrow screens);
 - paste-friendly `MM/DD/YYYY` date fields and required-field asterisks;
 - ZIP-to-city/state completion through MindBill's authenticated postal directory;
-- complete, server-backed ICD-10 search, common-injury quick picks, and removable chips;
+- complete, server-backed ICD-10 search with an alphabetized 100-code first page, automatic 100-code scroll paging, common-injury quick picks, and removable chips;
 - canonical claims-administrator search through the authenticated MindBill payer directory;
 - QME, AME, and Psych QME evaluation modes with medical-legal modifier defaults;
 - searchable workers-comp procedure/modifier controls, medical-legal fee-schedule amounts, totals, valid manual CPT/HCPCS entry, and an automatically maintained empty line;
-- removable source documents, a locked auto-attached practice W-9, and click, panel-drop, or whole-page PDF upload.
+- removable source documents with new-tab previews, a locked auto-attached practice W-9, and a full-width click, panel-drop, or whole-page PDF upload area. Every visible source document is included until removed; uploaded PDFs do not require document-type tagging.
 
 Partners supply tenant-specific bootstrap data, one short-lived browser session callback, and the final server submission callback. Required fields, validation, ZIP lookup, ICD-10 and payer directories, service-line behavior, attachments, and submission UX stay inside `@mindbill/react`, so every integration receives the same billing workflow. Optional `diagnosisOptions`, `procedureOptions`, `modifierOptions`, and lookup callbacks extend or replace defaults when a partner has licensed or organization-specific data.
 
+Validation is component-owned as well. A missing routing payer is highlighted immediately; Submit highlights every invalid control with a specific message, focuses and scrolls to the first problem, and continues validating as the user corrects the form.
+
 `BILL_SUBMISSION_REQUIRED_FIELDS` and `validateBillSubmission` expose the same contract for tests and non-visual integrations. The component never creates a draft; its callback fires only when the user submits a locally valid snapshot.
 
 `BillReviewForm` remains available for legacy integrations that already own a custom review model. New integrations should use `BillSubmissionForm`.

package/dist/index.d.ts

@@ -453,6 +453,7 @@ type BillSubmissionSourceAttachment = {
     fileName: string;
     documentType: BillSubmissionDocumentType;
     description?: string;
+    /** @deprecated Source attachments shown in the form are included until removed. */
     selected?: boolean;
     /** Auto-attached documents such as a practice W-9 cannot be deselected. */
     autoAttached?: boolean;
@@ -480,7 +481,7 @@ type BillSubmissionFormProps = {
     fetch?: typeof globalThis.fetch;
     onSearchClaimsAdministrators?: (query: string, claimNumber?: string) => Promise<BillReviewPayer$1[]>;
     diagnosisOptions?: BillSubmissionDiagnosisOption[];
-    onSearchDiagnoses?: (query: string) => Promise<BillSubmissionDiagnosisOption[]>;
+    onSearchDiagnoses?: (query: string, limit?: number, offset?: number) => Promise<BillSubmissionDiagnosisOption[]>;
     onLookupPostalCode?: (postalCode: string) => Promise<BillSubmissionPostalPlace | null>;
     procedureOptions?: BillSubmissionProcedureOption[];
     modifierOptions?: BillSubmissionModifierOption[];

package/dist/index.js

@@ -1320,7 +1320,13 @@ var documentLabels = {
 var MAX_PDF_BYTES = 25 * 1024 * 1024;
 var MAX_UPLOAD_BYTES = 100 * 1024 * 1024;
 var MAX_DOCUMENTS = 25;
+var DIAGNOSIS_PAGE_SIZE = 100;
 var EMPTY_ATTACHMENTS = [];
+function previewUploadedPdf(file) {
+  const url = URL.createObjectURL(file);
+  window.open(url, "_blank", "noopener,noreferrer");
+  window.setTimeout(() => URL.revokeObjectURL(url), 6e4);
+}
 function blankLine() {
   return { code: "", modifiers: [], units: 1 };
 }
@@ -1384,19 +1390,19 @@ function cloneBill(bill) {
 }
 function validateBillSubmission(bill) {
   const errors = {};
-  const required = (path, value) => {
-    if (typeof value !== "string" || !value.trim()) errors[path] = "Required";
+  const required = (path, value, message) => {
+    if (typeof value !== "string" || !value.trim()) errors[path] = message;
   };
-  required("patient.firstName", bill.patient.firstName);
-  required("patient.lastName", bill.patient.lastName);
-  required("patient.dateOfBirth", bill.patient.dateOfBirth);
-  required("patient.address.line1", bill.patient.address.line1);
-  required("patient.address.city", bill.patient.address.city);
-  required("patient.address.state", bill.patient.address.state);
-  required("patient.address.postalCode", bill.patient.address.postalCode);
-  required("claim.claimNumber", bill.claim.claimNumber);
-  required("claim.claimsAdministrator", bill.claim.claimsAdministrator?.name);
-  required("service.date", bill.service.date);
+  required("patient.firstName", bill.patient.firstName, "Enter the patient's first name.");
+  required("patient.lastName", bill.patient.lastName, "Enter the patient's last name.");
+  required("patient.dateOfBirth", bill.patient.dateOfBirth, "Enter the patient's date of birth.");
+  required("patient.address.line1", bill.patient.address.line1, "Enter the patient's street address.");
+  required("patient.address.city", bill.patient.address.city, "Enter the patient's city.");
+  required("patient.address.state", bill.patient.address.state, "Enter the patient's 2-letter state code.");
+  required("patient.address.postalCode", bill.patient.address.postalCode, "Enter the patient's ZIP code.");
+  required("claim.claimNumber", bill.claim.claimNumber, "Enter the claim number.");
+  required("claim.claimsAdministrator", bill.claim.claimsAdministrator?.name, "Select a claims administrator so MindBill can route this bill.");
+  required("service.date", bill.service.date, "Enter the date of service.");
   if (bill.claim.claimsAdministrator?.name && !bill.claim.claimsAdministrator.id) {
     errors["claim.claimsAdministrator"] = "Select a claims administrator from the payer directory.";
   }
@@ -1405,7 +1411,7 @@ function validateBillSubmission(bill) {
   const lines = submittedLines(bill.serviceLines);
   if (!lines.length) errors.serviceLines = "Add at least one service line";
   lines.forEach((line, index) => {
-    required(`serviceLines.${index}.code`, line.code);
+    required(`serviceLines.${index}.code`, line.code, "Select a procedure code.");
     if (!Number.isInteger(line.units) || (line.units ?? 0) < 1) errors[`serviceLines.${index}.units`] = "Enter at least 1 unit";
     if (bill.billingMode === "professional" && (!Number.isFinite(line.charge) || (line.charge ?? 0) < 0)) errors[`serviceLines.${index}.charge`] = "Enter the billed charge";
   });
@@ -1414,25 +1420,25 @@ function validateBillSubmission(bill) {
 var css = `
 .mbsf{display:grid;gap:20px;color:var(--mb-text);font-family:var(--mb-font);font-size:15px}.mbsf *{box-sizing:border-box}
 .mbsf-head,.mbsf-section-head,.mbsf-attach-row,.mbsf-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}.mbsf-title{margin:0;font-size:24px}.mbsf-copy,.mbsf-help{color:var(--mb-muted);margin:5px 0 0}.mbsf-required{font-size:13px;color:var(--mb-muted);white-space:nowrap}.mbsf-star,.mbsf-error{color:var(--mb-danger)}
-.mbsf-card{min-width:0;margin:0;padding:24px;border:1px solid var(--mb-border);border-radius:var(--mb-radius);background:var(--mb-surface);box-shadow:var(--mb-shadow)}.mbsf-legend{padding:0 10px;font-size:18px;font-weight:760}.mbsf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}.mbsf-span{grid-column:1/-1}.mbsf-field{display:grid;align-content:start;gap:7px;min-width:0}.mbsf-label{font-weight:680}.mbsf-input,.mbsf-select{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--mb-border);border-radius:var(--mb-control-radius);background:var(--mb-input);color:var(--mb-text);font:inherit}.mbsf-input:focus,.mbsf-select:focus{outline:3px solid color-mix(in srgb,var(--mb-accent) 22%,transparent);border-color:var(--mb-accent)}
-.mbsf-combo{position:relative}.mbsf-menu{position:absolute;z-index:20;top:calc(100% + 5px);left:0;right:0;max-height:min(300px,42vh);overflow:auto;overscroll-behavior:contain;padding:7px;border:1px solid var(--mb-border);border-radius:12px;background:var(--mb-surface);box-shadow:0 14px 35px rgba(17,38,49,.16)}.mbsf-option{display:grid;width:100%;gap:2px;padding:10px;border:0;border-radius:8px;background:transparent;color:var(--mb-text);font:inherit;text-align:left;cursor:pointer}.mbsf-option:hover,.mbsf-option:focus{background:color-mix(in srgb,var(--mb-accent) 9%,var(--mb-surface))}.mbsf-option small{color:var(--mb-muted)}
+.mbsf-card{min-width:0;margin:0;padding:24px;border:1px solid var(--mb-border);border-radius:var(--mb-radius);background:var(--mb-surface);box-shadow:var(--mb-shadow)}.mbsf-legend{padding:0 10px;font-size:18px;font-weight:760}.mbsf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}.mbsf-span{grid-column:1/-1}.mbsf-field{display:grid;align-content:start;gap:7px;min-width:0}.mbsf-label{font-weight:680}.mbsf-input,.mbsf-select{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--mb-border);border-radius:var(--mb-control-radius);background:var(--mb-input);color:var(--mb-text);font:inherit}.mbsf-input:focus,.mbsf-select:focus{outline:3px solid color-mix(in srgb,var(--mb-accent) 22%,transparent);border-color:var(--mb-accent)}.mbsf-field[data-invalid=true] .mbsf-input,.mbsf-field[data-invalid=true] .mbsf-select,.mbsf-invalid-control .mbsf-input{border-color:var(--mb-danger);background:color-mix(in srgb,var(--mb-danger) 4%,var(--mb-input))}.mbsf-field[data-invalid=true] .mbsf-input:focus,.mbsf-field[data-invalid=true] .mbsf-select:focus{outline-color:color-mix(in srgb,var(--mb-danger) 24%,transparent)}
+.mbsf-combo{position:relative}.mbsf-menu{position:absolute;z-index:20;top:calc(100% + 5px);left:0;right:0;max-height:min(360px,46vh);overflow:auto;overscroll-behavior:contain;padding:7px;border:1px solid var(--mb-border);border-radius:12px;background:var(--mb-surface);box-shadow:0 14px 35px rgba(17,38,49,.16)}.mbsf-option{display:grid;width:100%;gap:2px;padding:10px;border:0;border-radius:8px;background:transparent;color:var(--mb-text);font:inherit;text-align:left;cursor:pointer}.mbsf-option:hover,.mbsf-option:focus{background:color-mix(in srgb,var(--mb-accent) 9%,var(--mb-surface))}.mbsf-option small{color:var(--mb-muted)}.mbsf-menu-status{padding:12px;text-align:center;color:var(--mb-muted);font-size:13px}
 .mbsf-chips,.mbsf-quick-picks{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}.mbsf-chip,.mbsf-quick-pick{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid var(--mb-border);border-radius:999px;background:var(--mb-input)}.mbsf-chip button{border:0;background:transparent;color:var(--mb-muted);cursor:pointer;font:inherit}.mbsf-quick-pick{color:var(--mb-text);font:inherit;cursor:pointer}.mbsf-quick-pick[data-selected=true]{border-color:var(--mb-accent);color:var(--mb-accent)}
 .mbsf-segments{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--mb-border);border-radius:var(--mb-control-radius);overflow:hidden}.mbsf-segment{min-height:44px;border:0;border-right:1px solid var(--mb-border);background:var(--mb-input);color:var(--mb-text);font:inherit;font-weight:700;cursor:pointer}.mbsf-segment:last-child{border-right:0}.mbsf-segment[aria-pressed=true]{background:var(--mb-accent);color:var(--mb-accent-contrast)}
-.mbsf-lines{margin-top:18px;border:1px solid var(--mb-border);border-radius:var(--mb-control-radius);overflow:visible}.mbsf-line-head,.mbsf-line{display:grid;grid-template-columns:minmax(190px,1.05fr) minmax(220px,1.5fr) 100px 120px 42px;gap:12px;align-items:start;padding:12px}.mbsf-line-head{color:var(--mb-muted);font-size:13px;font-weight:700;border-bottom:1px solid var(--mb-border)}.mbsf-line{border-bottom:1px solid var(--mb-border)}.mbsf-line:last-child{border-bottom:0}.mbsf-money{padding-top:12px;text-align:right;font-variant-numeric:tabular-nums}.mbsf-total{display:flex;justify-content:flex-end;gap:45px;padding:16px 56px 16px 16px;font-size:17px;font-weight:760}
-.mbsf-icon-btn{width:40px;height:42px;border:0;background:transparent;color:var(--mb-text);font-size:22px;cursor:pointer}.mbsf-secondary{min-height:40px;padding:8px 14px;border:1px solid var(--mb-border);border-radius:var(--mb-control-radius);background:var(--mb-surface);color:var(--mb-text);font:inherit;font-weight:680;cursor:pointer}.mbsf-attach-list{display:grid;gap:10px;margin-bottom:18px}.mbsf-attach-row{padding:14px;border:1px solid var(--mb-border);border-radius:var(--mb-control-radius)}.mbsf-attach-row[data-auto=true]{border-color:color-mix(in srgb,#159447 45%,var(--mb-border));background:color-mix(in srgb,#159447 5%,var(--mb-surface))}.mbsf-file{min-width:0}.mbsf-file strong{overflow-wrap:anywhere}.mbsf-badge{display:inline-block;margin-left:8px;padding:2px 7px;border:1px solid var(--mb-border);border-radius:7px;color:var(--mb-muted);font-size:12px;font-weight:600}.mbsf-drop{display:grid;place-items:center;min-height:180px;padding:24px;border:2px dashed color-mix(in srgb,var(--mb-muted) 55%,transparent);border-radius:var(--mb-control-radius);background:color-mix(in srgb,var(--mb-accent) 3%,var(--mb-surface));text-align:center;cursor:pointer}.mbsf-drop[data-active=true]{border-color:var(--mb-accent);background:color-mix(in srgb,var(--mb-accent) 10%,var(--mb-surface))}.mbsf-alert{padding:12px 14px;border-radius:var(--mb-control-radius);background:color-mix(in srgb,var(--mb-danger) 10%,transparent);color:var(--mb-danger)}.mbsf-actions{justify-content:flex-end}.mbsf-submit{min-width:180px;min-height:48px;padding:11px 24px;border:0;border-radius:var(--mb-control-radius);background:var(--mb-accent);color:var(--mb-accent-contrast);font:inherit;font-weight:780;cursor:pointer}
-@media(max-width:820px){.mbsf{gap:16px}.mbsf-grid{grid-template-columns:1fr}.mbsf-span{grid-column:auto}.mbsf-card{padding:18px 16px}.mbsf-line-head{display:none}.mbsf-line{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 86px;gap:14px;padding:18px 16px}.mbsf-line>div:before{display:block;margin-bottom:6px;color:var(--mb-muted);font-size:12px;font-weight:700;content:attr(data-label)}.mbsf-line>div:nth-child(1),.mbsf-line>div:nth-child(2){grid-column:1/-1}.mbsf-money{align-self:end;padding:0 0 12px;text-align:right}.mbsf-line .mbsf-icon-btn{position:absolute;right:8px;bottom:3px}.mbsf-total{padding:16px 18px;gap:24px}.mbsf-head{align-items:flex-start}.mbsf-segments{grid-template-columns:repeat(3,minmax(0,1fr))}.mbsf-segment{min-width:0;padding:8px 4px;border-right:1px solid var(--mb-border);border-bottom:0;font-size:13px}.mbsf-segment:last-child{border-right:0}.mbsf-attach-row{align-items:flex-start;flex-wrap:wrap}.mbsf-actions{position:sticky;bottom:86px;z-index:10}.mbsf-submit{width:100%}}
+.mbsf-lines{margin-top:18px;border:1px solid var(--mb-border);border-radius:var(--mb-control-radius);overflow:visible}.mbsf-lines[data-invalid=true]{border-color:var(--mb-danger)}.mbsf-line-head,.mbsf-line{display:grid;grid-template-columns:minmax(190px,1.05fr) minmax(220px,1.5fr) 100px 120px 42px;gap:12px;align-items:start;padding:12px}.mbsf-line-head{color:var(--mb-muted);font-size:13px;font-weight:700;border-bottom:1px solid var(--mb-border)}.mbsf-line{border-bottom:1px solid var(--mb-border)}.mbsf-line:last-child{border-bottom:0}.mbsf-line [data-invalid=true] .mbsf-input{border-color:var(--mb-danger);background:color-mix(in srgb,var(--mb-danger) 4%,var(--mb-input))}.mbsf-money{padding-top:12px;text-align:right;font-variant-numeric:tabular-nums}.mbsf-total{display:flex;justify-content:flex-end;gap:45px;padding:16px 56px 16px 16px;font-size:17px;font-weight:760}
+.mbsf-icon-btn{width:40px;height:42px;border:0;background:transparent;color:var(--mb-text);font-size:22px;cursor:pointer}.mbsf-secondary{min-height:40px;padding:8px 14px;border:1px solid var(--mb-border);border-radius:var(--mb-control-radius);background:var(--mb-surface);color:var(--mb-text);font:inherit;font-weight:680;cursor:pointer}.mbsf-attach-list{display:grid;gap:10px;margin-bottom:18px}.mbsf-attach-row{padding:14px;border:1px solid var(--mb-border);border-radius:var(--mb-control-radius)}.mbsf-attach-row[data-auto=true]{border-color:color-mix(in srgb,#159447 45%,var(--mb-border));background:color-mix(in srgb,#159447 5%,var(--mb-surface))}.mbsf-attach-main{display:flex;align-items:center;gap:12px;min-width:0;flex:1}.mbsf-attach-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}.mbsf-file{min-width:0}.mbsf-file strong{overflow-wrap:anywhere}.mbsf-badge{display:inline-block;margin-left:8px;padding:2px 7px;border:1px solid var(--mb-border);border-radius:7px;color:var(--mb-muted);font-size:12px;font-weight:600}.mbsf-drop{display:grid;width:100%;place-items:center;min-height:210px;padding:30px;border:2px dashed color-mix(in srgb,var(--mb-muted) 55%,transparent);border-radius:var(--mb-control-radius);background:color-mix(in srgb,var(--mb-accent) 3%,var(--mb-surface));color:var(--mb-text);font:inherit;text-align:center;cursor:pointer}.mbsf-drop[data-active=true]{border-color:var(--mb-accent);background:color-mix(in srgb,var(--mb-accent) 10%,var(--mb-surface))}.mbsf-alert{padding:12px 14px;border-radius:var(--mb-control-radius);background:color-mix(in srgb,var(--mb-danger) 10%,transparent);color:var(--mb-danger)}.mbsf-actions{justify-content:flex-end}.mbsf-submit{min-width:180px;min-height:48px;padding:11px 24px;border:0;border-radius:var(--mb-control-radius);background:var(--mb-accent);color:var(--mb-accent-contrast);font:inherit;font-weight:780;cursor:pointer}
+@media(max-width:820px){.mbsf{gap:16px}.mbsf-grid{grid-template-columns:1fr}.mbsf-span{grid-column:auto}.mbsf-card{padding:18px 16px}.mbsf-line-head{display:none}.mbsf-line{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 86px;gap:14px;padding:18px 16px}.mbsf-line>div:before{display:block;margin-bottom:6px;color:var(--mb-muted);font-size:12px;font-weight:700;content:attr(data-label)}.mbsf-line>div:nth-child(1),.mbsf-line>div:nth-child(2){grid-column:1/-1}.mbsf-money{align-self:end;padding:0 0 12px;text-align:right}.mbsf-line .mbsf-icon-btn{position:absolute;right:8px;bottom:3px}.mbsf-total{padding:16px 18px;gap:24px}.mbsf-head{align-items:flex-start}.mbsf-segments{grid-template-columns:repeat(3,minmax(0,1fr))}.mbsf-segment{min-width:0;padding:8px 4px;border-right:1px solid var(--mb-border);border-bottom:0;font-size:13px}.mbsf-segment:last-child{border-right:0}.mbsf-attach-row{align-items:flex-start;flex-wrap:wrap}.mbsf-attach-main{align-items:flex-start}.mbsf-attach-actions{margin-left:auto}.mbsf-drop{min-height:190px;padding:24px 18px}.mbsf-actions{position:sticky;bottom:86px;z-index:10}.mbsf-submit{width:100%}}
 `;
 function RequiredMark() {
   return /* @__PURE__ */ jsx3("span", { className: "mbsf-star", children: " *" });
 }
-function Field2({ label, required, error, span, children }) {
-  return /* @__PURE__ */ jsxs3("label", { className: `mbsf-field${span ? " mbsf-span" : ""}`, children: [
+function Field2({ label, required, error, path, span, children }) {
+  return /* @__PURE__ */ jsxs3("label", { className: `mbsf-field${span ? " mbsf-span" : ""}`, "data-field-path": path, "data-invalid": Boolean(error), children: [
     /* @__PURE__ */ jsxs3("span", { className: "mbsf-label", children: [
       label,
       required ? /* @__PURE__ */ jsx3(RequiredMark, {}) : null
     ] }),
     children,
-    error ? /* @__PURE__ */ jsx3("small", { className: "mbsf-error", children: error }) : null
+    error ? /* @__PURE__ */ jsx3("small", { className: "mbsf-error", role: "alert", children: error }) : null
   ] });
 }
 function TextDateInput({ value, onChange, disabled, required, ariaLabel }) {
@@ -1454,7 +1460,7 @@ function TextDateInput({ value, onChange, disabled, required, ariaLabel }) {
     invalid ? /* @__PURE__ */ jsx3("small", { className: "mbsf-error", children: "Use MM/DD/YYYY" }) : null
   ] });
 }
-function ComboBox({ value, placeholder, options, disabled, loading, onQuery, onSelect, createOption, ariaLabel }) {
+function ComboBox({ value, placeholder, options, disabled, loading, loadingMore, invalid, onOpen, onQuery, onEndReached, onSelect, createOption, ariaLabel }) {
   const [open, setOpen] = useState2(false);
   const [query, setQuery] = useState2("");
   const visible = useMemo2(() => {
@@ -1465,24 +1471,50 @@ function ComboBox({ value, placeholder, options, disabled, loading, onQuery, onS
   }, [createOption, options, query]);
   const showMenu = open && (loading || visible.length > 0 || query.trim().length >= 2);
   return /* @__PURE__ */ jsxs3("div", { className: "mbsf-combo", children: [
-    /* @__PURE__ */ jsx3("input", { className: "mbsf-input", role: "combobox", "aria-label": ariaLabel, "aria-expanded": showMenu, autoComplete: "off", disabled, placeholder, value: open ? query : value, onFocus: () => {
+    /* @__PURE__ */ jsx3("input", { className: "mbsf-input", role: "combobox", "aria-label": ariaLabel, "aria-invalid": invalid, "aria-expanded": showMenu, autoComplete: "off", disabled, placeholder, value: open ? query : value, onFocus: () => {
       setOpen(true);
       setQuery("");
+      onOpen?.();
     }, onChange: (event) => {
       setOpen(true);
       setQuery(event.target.value);
       onQuery?.(event.target.value);
     }, onBlur: () => setTimeout(() => setOpen(false), 120) }),
-    showMenu ? /* @__PURE__ */ jsx3("div", { className: "mbsf-menu", role: "listbox", children: loading ? /* @__PURE__ */ jsx3("div", { className: "mbsf-option", children: "Searching\u2026" }) : visible.length ? visible.map((option) => /* @__PURE__ */ jsxs3("button", { className: "mbsf-option", type: "button", role: "option", onMouseDown: (event) => event.preventDefault(), onClick: () => {
-      onSelect(option);
-      setOpen(false);
-      setQuery("");
+    showMenu ? /* @__PURE__ */ jsxs3("div", { className: "mbsf-menu", role: "listbox", onScroll: (event) => {
+      const menu = event.currentTarget;
+      if (menu.scrollHeight - menu.scrollTop - menu.clientHeight < 120) onEndReached?.();
     }, children: [
-      /* @__PURE__ */ jsx3("strong", { children: option.label }),
-      option.detail ? /* @__PURE__ */ jsx3("small", { children: option.detail }) : null
-    ] }, option.id)) : /* @__PURE__ */ jsx3("div", { className: "mbsf-option", children: "No matches" }) }) : null
+      loading && !visible.length ? /* @__PURE__ */ jsx3("div", { className: "mbsf-menu-status", children: "Loading codes\u2026" }) : visible.length ? visible.map((option) => /* @__PURE__ */ jsxs3("button", { className: "mbsf-option", type: "button", role: "option", onMouseDown: (event) => event.preventDefault(), onClick: () => {
+        onSelect(option);
+        setOpen(false);
+        setQuery("");
+      }, children: [
+        /* @__PURE__ */ jsx3("strong", { children: option.label }),
+        option.detail ? /* @__PURE__ */ jsx3("small", { children: option.detail }) : null
+      ] }, option.id)) : /* @__PURE__ */ jsx3("div", { className: "mbsf-option", children: "No matches" }),
+      loadingMore ? /* @__PURE__ */ jsx3("div", { className: "mbsf-menu-status", children: "Loading more\u2026" }) : null
+    ] }) : null
   ] });
 }
+function focusFirstInvalid(form) {
+  const field = form.querySelector('[data-invalid="true"]');
+  if (!field) return;
+  const control = field.querySelector('input,select,textarea,button,[tabindex]:not([tabindex="-1"])');
+  control?.focus({ preventScroll: true });
+  const fieldRect = field.getBoundingClientRect();
+  let scrollParent = field.parentElement;
+  while (scrollParent) {
+    const style = window.getComputedStyle(scrollParent);
+    if (/(auto|scroll)/.test(style.overflowY) && scrollParent.scrollHeight > scrollParent.clientHeight) break;
+    scrollParent = scrollParent.parentElement;
+  }
+  if (scrollParent) {
+    const parentRect = scrollParent.getBoundingClientRect();
+    scrollParent.scrollTo({ top: Math.max(0, scrollParent.scrollTop + fieldRect.top - parentRect.top - 24), behavior: "smooth" });
+  } else {
+    window.scrollTo({ top: Math.max(0, window.scrollY + fieldRect.top - 24), behavior: "smooth" });
+  }
+}
 function customProcedureOption(query) {
   const code = query.trim().toUpperCase().replace(/\s+/g, "");
   if (!/^(?:\d{5}|[A-Z]\d{4}|ML(?:20[0-5]|PRR))$/.test(code)) return null;
@@ -1493,6 +1525,9 @@ function mergeOptions(defaults, supplied) {
   supplied?.forEach((item) => map.set(item.code.toUpperCase(), item));
   return [...map.values()];
 }
+function mergeDiagnosisOptions(options) {
+  return [...new Map(options.map((item) => [item.code.toUpperCase(), item])).values()].sort((left, right) => left.code.localeCompare(right.code, void 0, { numeric: true }));
+}
 function BillSubmissionForm({
   initialBill,
   attachments = EMPTY_ATTACHMENTS,
@@ -1516,19 +1551,26 @@ function BillSubmissionForm({
   description = "Review the bill details, add attachments, and submit."
 }) {
   const [bill, setBill] = useState2(() => cloneBill(initialBill));
-  const [selectedIds, setSelectedIds] = useState2(() => attachments.filter((item) => item.selected !== false || item.autoAttached || item.documentType === "w9").map((item) => item.id));
+  const [selectedIds, setSelectedIds] = useState2(() => attachments.map((item) => item.id));
   const [removedSourceIds, setRemovedSourceIds] = useState2([]);
   const [uploads, setUploads] = useState2([]);
   const [errors, setErrors] = useState2({});
+  const [validationActive, setValidationActive] = useState2(false);
   const [formError, setFormError] = useState2(null);
   const [submitting, setSubmitting] = useState2(false);
   const [payerResults, setPayerResults] = useState2([]);
   const [payerLoading, setPayerLoading] = useState2(false);
-  const [diagnosisResults, setDiagnosisResults] = useState2(diagnosisOptions);
+  const [diagnosisResults, setDiagnosisResults] = useState2([]);
   const [diagnosisLoading, setDiagnosisLoading] = useState2(false);
+  const [diagnosisLoadingMore, setDiagnosisLoadingMore] = useState2(false);
+  const [diagnosisQuery, setDiagnosisQuery] = useState2(null);
+  const [diagnosisHasMore, setDiagnosisHasMore] = useState2(true);
   const [postalStatus, setPostalStatus] = useState2(null);
   const [dragActive, setDragActive] = useState2(false);
+  const formRef = useRef2(null);
   const fileInput = useRef2(null);
+  const diagnosisRequest = useRef2(0);
+  const diagnosisAppendPending = useRef2(false);
   const procedures = useMemo2(() => mergeOptions(DEFAULT_BILL_SUBMISSION_PROCEDURES, procedureOptions), [procedureOptions]);
   const modifiers = useMemo2(() => mergeOptions(DEFAULT_BILL_SUBMISSION_MODIFIERS, modifierOptions), [modifierOptions]);
   const [evaluationType, setEvaluationType] = useState2(() => initialBill.renderingProvider?.isAme ? "ame" : initialBill.renderingProvider?.specialty?.toLowerCase().includes("psych") ? "psych_qme" : "qme");
@@ -1536,12 +1578,21 @@ function BillSubmissionForm({
   const locked = disabled || submitting;
   useEffect2(() => {
     setBill(cloneBill(initialBill));
-    setSelectedIds(attachments.filter((item) => item.selected !== false || item.autoAttached || item.documentType === "w9").map((item) => item.id));
+    setSelectedIds(attachments.map((item) => item.id));
     setRemovedSourceIds([]);
     setUploads([]);
     setErrors({});
+    setValidationActive(false);
     setFormError(null);
+    setDiagnosisResults([]);
+    setDiagnosisQuery(null);
+    setDiagnosisHasMore(true);
+    diagnosisRequest.current += 1;
+    diagnosisAppendPending.current = false;
   }, [initialBill, attachments]);
+  useEffect2(() => {
+    if (validationActive) setErrors(validateBillSubmission(bill).fieldErrors);
+  }, [bill, validationActive]);
   const addFiles = useCallback((fileList) => {
     const files = Array.from(fileList);
     if (!files.length) return;
@@ -1605,13 +1656,43 @@ function BillSubmissionForm({
     }
     void search(query, bill.claim.claimNumber).then(setPayerResults).catch((caught) => setFormError(caught instanceof Error ? caught.message : "Claims administrator search is unavailable.")).finally(() => setPayerLoading(false));
   };
-  const searchDiagnoses = (query) => {
-    if (query.trim().length < 2) return;
+  const loadDiagnoses = (query, append = false) => {
+    const trimmed = query.trim();
     const search = onSearchDiagnoses ?? referenceClient?.searchDiagnosisCodes;
-    if (!search) return;
-    setDiagnosisLoading(true);
-    void search(query).then(setDiagnosisResults).catch(() => setDiagnosisResults([])).finally(() => setDiagnosisLoading(false));
+    if (!search) {
+      setDiagnosisResults(mergeDiagnosisOptions(diagnosisOptions));
+      setDiagnosisHasMore(false);
+      setDiagnosisQuery(trimmed);
+      return;
+    }
+    const continuing = append && diagnosisQuery === trimmed;
+    if (continuing && (!diagnosisHasMore || diagnosisAppendPending.current)) return;
+    const offset = continuing ? diagnosisResults.length : 0;
+    const request = ++diagnosisRequest.current;
+    if (continuing) {
+      diagnosisAppendPending.current = true;
+      setDiagnosisLoadingMore(true);
+    } else {
+      setDiagnosisLoading(true);
+      setDiagnosisLoadingMore(false);
+      setDiagnosisQuery(trimmed);
+      setDiagnosisHasMore(true);
+    }
+    void search(trimmed, DIAGNOSIS_PAGE_SIZE, offset).then((page) => {
+      if (request !== diagnosisRequest.current) return;
+      setDiagnosisResults((current) => mergeDiagnosisOptions(continuing ? [...current, ...page] : page));
+      setDiagnosisHasMore(page.length >= DIAGNOSIS_PAGE_SIZE);
+    }).catch(() => {
+      if (request === diagnosisRequest.current && !continuing) setDiagnosisResults([]);
+    }).finally(() => {
+      if (request !== diagnosisRequest.current) return;
+      diagnosisAppendPending.current = false;
+      setDiagnosisLoading(false);
+      setDiagnosisLoadingMore(false);
+    });
   };
+  const searchDiagnoses = (query) => loadDiagnoses(query);
+  const diagnosisChoices = useMemo2(() => mergeDiagnosisOptions([...diagnosisOptions, ...diagnosisResults]), [diagnosisOptions, diagnosisResults]);
   const updatePostalCode = (postalCode) => {
     setAddress({ postalCode });
     setPostalStatus(null);
@@ -1636,9 +1717,18 @@ function BillSubmissionForm({
       return charge == null ? line : { ...line, charge };
     }) };
     const validation = validateBillSubmission(clean);
+    setValidationActive(true);
     setErrors(validation.fieldErrors);
     setFormError(null);
-    if (!validation.valid) return setFormError("Complete the required fields before submitting.");
+    if (!validation.valid) {
+      const count = Object.keys(validation.fieldErrors).length;
+      const first = Object.values(validation.fieldErrors)[0];
+      setFormError(`Fix ${count} highlighted field${count === 1 ? "" : "s"} before submitting. ${first}`);
+      window.requestAnimationFrame(() => {
+        if (formRef.current) focusFirstInvalid(formRef.current);
+      });
+      return;
+    }
     if (selectedIds.length + uploads.length > MAX_DOCUMENTS) return setFormError(`A bill can include at most ${MAX_DOCUMENTS} attachments.`);
     setSubmitting(true);
     try {
@@ -1649,7 +1739,8 @@ function BillSubmissionForm({
       setSubmitting(false);
     }
   }
-  return /* @__PURE__ */ jsxs3("form", { className: `${className} mbsf`, style: { ...mindBillAppearanceStyle(appearance), ...style }, onSubmit: (event) => {
+  const claimsAdministratorError = errors["claim.claimsAdministrator"] ?? (!bill.claim.claimsAdministrator?.id ? "Required for routing \u2014 search and select a claims administrator." : void 0);
+  return /* @__PURE__ */ jsxs3("form", { ref: formRef, className: `${className} mbsf`, style: { ...mindBillAppearanceStyle(appearance), ...style }, onSubmit: (event) => {
     event.preventDefault();
     void submit();
   }, noValidate: true, children: [
@@ -1667,29 +1758,29 @@ function BillSubmissionForm({
     /* @__PURE__ */ jsxs3("fieldset", { className: "mbsf-card", disabled: locked, children: [
       /* @__PURE__ */ jsx3("legend", { className: "mbsf-legend", children: "Patient" }),
       /* @__PURE__ */ jsxs3("div", { className: "mbsf-grid", children: [
-        /* @__PURE__ */ jsx3(Field2, { label: "First name", required: true, error: errors["patient.firstName"], children: text(bill.patient.firstName, (firstName) => setBill((c) => ({ ...c, patient: { ...c.patient, firstName } }))) }),
-        /* @__PURE__ */ jsx3(Field2, { label: "Last name", required: true, error: errors["patient.lastName"], children: text(bill.patient.lastName, (lastName) => setBill((c) => ({ ...c, patient: { ...c.patient, lastName } }))) }),
+        /* @__PURE__ */ jsx3(Field2, { path: "patient.firstName", label: "First name", required: true, error: errors["patient.firstName"], children: text(bill.patient.firstName, (firstName) => setBill((c) => ({ ...c, patient: { ...c.patient, firstName } }))) }),
+        /* @__PURE__ */ jsx3(Field2, { path: "patient.lastName", label: "Last name", required: true, error: errors["patient.lastName"], children: text(bill.patient.lastName, (lastName) => setBill((c) => ({ ...c, patient: { ...c.patient, lastName } }))) }),
         /* @__PURE__ */ jsx3(Field2, { label: "Middle name", children: text(bill.patient.middleName, (middleName) => setBill((c) => ({ ...c, patient: { ...c.patient, middleName } }))) }),
         /* @__PURE__ */ jsx3(Field2, { label: "Phone (optional)", children: text(bill.patient.phone, (phone) => setBill((c) => ({ ...c, patient: { ...c.patient, phone } })), { type: "tel" }) }),
-        /* @__PURE__ */ jsx3(Field2, { label: "Date of birth", required: true, error: errors["patient.dateOfBirth"], children: /* @__PURE__ */ jsx3(TextDateInput, { ariaLabel: "Date of birth", value: bill.patient.dateOfBirth, disabled: locked, required: true, onChange: (dateOfBirth) => setBill((c) => ({ ...c, patient: { ...c.patient, dateOfBirth } })) }) }),
-        /* @__PURE__ */ jsx3(Field2, { label: "Address", required: true, span: true, error: errors["patient.address.line1"], children: text(bill.patient.address.line1, (line1) => setAddress({ line1 }), { placeholder: "Street address" }) }),
-        /* @__PURE__ */ jsxs3(Field2, { label: "ZIP", required: true, error: errors["patient.address.postalCode"], children: [
+        /* @__PURE__ */ jsx3(Field2, { path: "patient.dateOfBirth", label: "Date of birth", required: true, error: errors["patient.dateOfBirth"], children: /* @__PURE__ */ jsx3(TextDateInput, { ariaLabel: "Date of birth", value: bill.patient.dateOfBirth, disabled: locked, required: true, onChange: (dateOfBirth) => setBill((c) => ({ ...c, patient: { ...c.patient, dateOfBirth } })) }) }),
+        /* @__PURE__ */ jsx3(Field2, { path: "patient.address.line1", label: "Address", required: true, span: true, error: errors["patient.address.line1"], children: text(bill.patient.address.line1, (line1) => setAddress({ line1 }), { placeholder: "Street address" }) }),
+        /* @__PURE__ */ jsxs3(Field2, { path: "patient.address.postalCode", label: "ZIP", required: true, error: errors["patient.address.postalCode"], children: [
           text(bill.patient.address.postalCode, updatePostalCode, { maxLength: 10 }),
           postalStatus ? /* @__PURE__ */ jsx3("small", { className: "mbsf-help", children: postalStatus }) : null
         ] }),
-        /* @__PURE__ */ jsx3(Field2, { label: "City", required: true, error: errors["patient.address.city"], children: text(bill.patient.address.city, (city) => setAddress({ city })) }),
-        /* @__PURE__ */ jsx3(Field2, { label: "State", required: true, error: errors["patient.address.state"], children: text(bill.patient.address.state, (state) => setAddress({ state: state.toUpperCase() }), { maxLength: 2 }) })
+        /* @__PURE__ */ jsx3(Field2, { path: "patient.address.city", label: "City", required: true, error: errors["patient.address.city"], children: text(bill.patient.address.city, (city) => setAddress({ city })) }),
+        /* @__PURE__ */ jsx3(Field2, { path: "patient.address.state", label: "State", required: true, error: errors["patient.address.state"], children: text(bill.patient.address.state, (state) => setAddress({ state: state.toUpperCase() }), { maxLength: 2 }) })
       ] })
     ] }),
     /* @__PURE__ */ jsxs3("fieldset", { className: "mbsf-card", disabled: locked, children: [
       /* @__PURE__ */ jsx3("legend", { className: "mbsf-legend", children: "Injury & claim" }),
       /* @__PURE__ */ jsxs3("div", { className: "mbsf-grid", children: [
-        /* @__PURE__ */ jsx3(Field2, { label: "Date of service", required: true, error: errors["service.date"], children: /* @__PURE__ */ jsx3(TextDateInput, { ariaLabel: "Date of service", value: bill.service.date, disabled: locked, required: true, onChange: (date2) => setBill((c) => ({ ...c, service: { ...c.service, date: date2 } })) }) }),
+        /* @__PURE__ */ jsx3(Field2, { path: "service.date", label: "Date of service", required: true, error: errors["service.date"], children: /* @__PURE__ */ jsx3(TextDateInput, { ariaLabel: "Date of service", value: bill.service.date, disabled: locked, required: true, onChange: (date2) => setBill((c) => ({ ...c, service: { ...c.service, date: date2 } })) }) }),
         /* @__PURE__ */ jsx3(Field2, { label: "Date of injury", children: /* @__PURE__ */ jsx3(TextDateInput, { ariaLabel: "Date of injury", value: bill.claim.dateOfInjury, disabled: locked, onChange: (dateOfInjury) => setBill((c) => ({ ...c, claim: { ...c.claim, dateOfInjury } })) }) }),
         /* @__PURE__ */ jsx3(Field2, { label: "Employer (optional)", children: text(bill.claim.employer, (employer) => setBill((c) => ({ ...c, claim: { ...c.claim, employer } }))) }),
-        /* @__PURE__ */ jsx3(Field2, { label: "Claim number", required: true, error: errors["claim.claimNumber"], children: text(bill.claim.claimNumber, (claimNumber) => setBill((c) => ({ ...c, claim: { ...c.claim, claimNumber } }))) }),
+        /* @__PURE__ */ jsx3(Field2, { path: "claim.claimNumber", label: "Claim number", required: true, error: errors["claim.claimNumber"], children: text(bill.claim.claimNumber, (claimNumber) => setBill((c) => ({ ...c, claim: { ...c.claim, claimNumber } }))) }),
         /* @__PURE__ */ jsx3(Field2, { label: "WCAB / ADJ number (optional)", children: text(bill.claim.adjNumber, (adjNumber) => setBill((c) => ({ ...c, claim: { ...c.claim, adjNumber } }))) }),
-        /* @__PURE__ */ jsx3(Field2, { label: "Claims administrator", required: true, span: true, error: errors["claim.claimsAdministrator"], children: /* @__PURE__ */ jsx3(ComboBox, { ariaLabel: "Claims administrator", disabled: locked, loading: payerLoading, value: bill.claim.claimsAdministrator?.name ?? "", placeholder: "Search the payer directory\u2026", options: payerResults.map((payer) => ({ id: payer.id, label: payer.name, detail: [payer.hasElectronic ? "Electronic" : "Work comp", ...payer.states ?? []].join(" \xB7 ") })), onQuery: searchPayers, onSelect: (option) => setBill((c) => ({ ...c, claim: { ...c.claim, claimsAdministrator: { id: option.id, name: option.label } } })) }) }),
+        /* @__PURE__ */ jsx3(Field2, { path: "claim.claimsAdministrator", label: "Claims administrator", required: true, span: true, error: claimsAdministratorError, children: /* @__PURE__ */ jsx3(ComboBox, { ariaLabel: "Claims administrator", invalid: Boolean(claimsAdministratorError), disabled: locked, loading: payerLoading, value: bill.claim.claimsAdministrator?.name ?? "", placeholder: "Search the payer directory\u2026", options: payerResults.map((payer) => ({ id: payer.id, label: payer.name, detail: [payer.hasElectronic ? "Electronic" : "Work comp", ...payer.states ?? []].join(" \xB7 ") })), onQuery: searchPayers, onSelect: (option) => setBill((c) => ({ ...c, claim: { ...c.claim, claimsAdministrator: { id: option.id, name: option.label } } })) }) }),
         /* @__PURE__ */ jsx3(Field2, { label: "Injury description (optional)", span: true, children: text(bill.claim.description, (description2) => setBill((c) => ({ ...c, claim: { ...c.claim, description: description2 } }))) }),
         /* @__PURE__ */ jsxs3(Field2, { label: "Diagnosis codes (ICD-10)", span: true, children: [
           /* @__PURE__ */ jsx3("div", { className: "mbsf-quick-picks", "aria-label": "Common diagnosis codes", children: BILL_SUBMISSION_DIAGNOSIS_QUICK_PICKS.map((option) => {
@@ -1701,14 +1792,16 @@ function BillSubmissionForm({
             ] }, option.code);
           }) }),
           /* @__PURE__ */ jsx3("div", { className: "mbsf-chips", children: (bill.diagnoses ?? []).map((code) => {
-            const option = [...BILL_SUBMISSION_DIAGNOSIS_QUICK_PICKS, ...diagnosisOptions, ...diagnosisResults].find((item) => item.code === code);
+            const option = [...BILL_SUBMISSION_DIAGNOSIS_QUICK_PICKS, ...diagnosisChoices].find((item) => item.code === code);
             return /* @__PURE__ */ jsxs3("span", { className: "mbsf-chip", children: [
               /* @__PURE__ */ jsx3("strong", { children: code }),
               option?.description ? ` ${option.description}` : "",
               /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": `Remove ${code}`, onClick: () => setBill((c) => ({ ...c, diagnoses: (c.diagnoses ?? []).filter((item) => item !== code) })), children: "\xD7" })
             ] }, code);
           }) }),
-          /* @__PURE__ */ jsx3(ComboBox, { ariaLabel: "Add diagnosis code", disabled: locked, loading: diagnosisLoading, value: "", placeholder: bill.diagnoses?.length ?? 0 ? `${bill.diagnoses.length} selected \u2014 add more\u2026` : "Search ICD-10 codes\u2026", options: [...new Map([...BILL_SUBMISSION_DIAGNOSIS_QUICK_PICKS, ...diagnosisOptions, ...diagnosisResults].map((item) => [item.code, item])).values()].filter((item) => !(bill.diagnoses ?? []).includes(item.code)).map((item) => ({ id: item.code, label: item.code, detail: item.description })), onQuery: searchDiagnoses, onSelect: (option) => setBill((c) => ({ ...c, diagnoses: [.../* @__PURE__ */ new Set([...c.diagnoses ?? [], option.id])] })) })
+          /* @__PURE__ */ jsx3(ComboBox, { ariaLabel: "Add diagnosis code", disabled: locked, loading: diagnosisLoading, loadingMore: diagnosisLoadingMore, value: "", placeholder: bill.diagnoses?.length ?? 0 ? `${bill.diagnoses.length} selected \u2014 add more\u2026` : "Search ICD-10 codes\u2026", options: diagnosisChoices.filter((item) => !(bill.diagnoses ?? []).includes(item.code)).map((item) => ({ id: item.code, label: item.code, detail: item.description })), onOpen: () => {
+            if (diagnosisQuery !== "") loadDiagnoses("");
+          }, onQuery: searchDiagnoses, onEndReached: () => loadDiagnoses(diagnosisQuery ?? "", true), onSelect: (option) => setBill((c) => ({ ...c, diagnoses: [.../* @__PURE__ */ new Set([...c.diagnoses ?? [], option.id])] })) })
         ] })
       ] })
     ] }),
@@ -1733,7 +1826,7 @@ function BillSubmissionForm({
       /* @__PURE__ */ jsx3("p", { className: "mbsf-help", children: "Sets the evaluator/specialty modifier on medical-legal evaluation lines." }),
       /* @__PURE__ */ jsx3("div", { className: "mbsf-segments", role: "group", "aria-label": "Evaluation type", children: [["qme", "QME (default)"], ["ame", "AME"], ["psych_qme", "Psych QME"]].map(([type, label]) => /* @__PURE__ */ jsx3("button", { className: "mbsf-segment", type: "button", "aria-pressed": evaluationType === type, onClick: () => changeEvaluation(type), children: label }, type)) }),
       /* @__PURE__ */ jsx3("p", { className: "mbsf-help", children: evaluationType === "ame" ? "Agreed Medical Evaluator \u2014 eligible ML evaluation codes default to modifier -94." : evaluationType === "psych_qme" ? "Psychiatric QME \u2014 eligible ML evaluation codes default to modifier -96 (-95 for ML200)." : "Qualified Medical Evaluator \u2014 eligible ML evaluation codes default to modifier -95." }),
-      /* @__PURE__ */ jsxs3("div", { className: "mbsf-lines", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "mbsf-lines", "data-field-path": "serviceLines", "data-invalid": Boolean(errors.serviceLines), children: [
         /* @__PURE__ */ jsxs3("div", { className: "mbsf-line-head", children: [
           /* @__PURE__ */ jsx3("span", { children: "Procedure code" }),
           /* @__PURE__ */ jsx3("span", { children: "Modifiers" }),
@@ -1743,13 +1836,13 @@ function BillSubmissionForm({
           " "
         ] }),
         bill.serviceLines.map((line, index) => /* @__PURE__ */ jsxs3("div", { className: "mbsf-line", children: [
-          /* @__PURE__ */ jsxs3("div", { "data-label": "Procedure code", children: [
-            /* @__PURE__ */ jsx3(ComboBox, { ariaLabel: `Procedure code ${index + 1}`, disabled: locked, value: line.code, placeholder: "Search or enter code\u2026", options: procedures.map((item) => ({ id: item.code, label: item.code, detail: item.description })), createOption: customProcedureOption, onSelect: (option) => {
+          /* @__PURE__ */ jsxs3("div", { "data-label": "Procedure code", "data-field-path": `serviceLines.${index}.code`, "data-invalid": Boolean(errors[`serviceLines.${index}.code`]), children: [
+            /* @__PURE__ */ jsx3(ComboBox, { ariaLabel: `Procedure code ${index + 1}`, invalid: Boolean(errors[`serviceLines.${index}.code`]), disabled: locked, value: line.code, placeholder: "Search or enter code\u2026", options: procedures.map((item) => ({ id: item.code, label: item.code, detail: item.description })), createOption: customProcedureOption, onSelect: (option) => {
               const auto = evaluationModifier(evaluationType, option.id);
               setLine(index, { code: option.id, ...auto ? { modifiers: [auto, ...(line.modifiers ?? []).filter((item) => !["94", "95", "96"].includes(item.replace(/^-/, "")))] } : line.modifiers ? { modifiers: line.modifiers } : {} });
             } }),
             line.code ? /* @__PURE__ */ jsx3("small", { className: "mbsf-help", children: procedures.find((item) => item.code === line.code)?.description ?? "Custom CPT, HCPCS, or medical-legal code" }) : null,
-            errors[`serviceLines.${index}.code`] ? /* @__PURE__ */ jsx3("small", { className: "mbsf-error", children: errors[`serviceLines.${index}.code`] }) : null
+            errors[`serviceLines.${index}.code`] ? /* @__PURE__ */ jsx3("small", { className: "mbsf-error", role: "alert", children: errors[`serviceLines.${index}.code`] }) : null
           ] }),
           /* @__PURE__ */ jsxs3("div", { "data-label": "Modifiers", children: [
             /* @__PURE__ */ jsx3("div", { className: "mbsf-chips", children: (line.modifiers ?? []).map((modifier) => /* @__PURE__ */ jsxs3("span", { className: "mbsf-chip", children: [
@@ -1759,9 +1852,9 @@ function BillSubmissionForm({
             ] }, modifier)) }),
             /* @__PURE__ */ jsx3(ComboBox, { ariaLabel: `Modifiers ${index + 1}`, disabled: locked, value: "", placeholder: line.modifiers?.length ?? 0 ? `${line.modifiers.length} modifier${line.modifiers.length === 1 ? "" : "s"}` : "Add modifiers\u2026", options: modifiers.filter((item) => !(line.modifiers ?? []).includes(item.code)).map((item) => ({ id: item.code, label: `\u2212${item.code}`, detail: item.description })), onSelect: (option) => setLine(index, { modifiers: [.../* @__PURE__ */ new Set([...line.modifiers ?? [], option.id])] }) })
           ] }),
-          /* @__PURE__ */ jsxs3("div", { "data-label": "Units", children: [
-            /* @__PURE__ */ jsx3("input", { className: "mbsf-input", "aria-label": `Units ${index + 1}`, type: "number", min: 1, value: line.units ?? 1, onChange: (event) => setLine(index, { units: Number(event.target.value) }) }),
-            errors[`serviceLines.${index}.units`] ? /* @__PURE__ */ jsx3("small", { className: "mbsf-error", children: errors[`serviceLines.${index}.units`] }) : null
+          /* @__PURE__ */ jsxs3("div", { "data-label": "Units", "data-field-path": `serviceLines.${index}.units`, "data-invalid": Boolean(errors[`serviceLines.${index}.units`]), children: [
+            /* @__PURE__ */ jsx3("input", { className: "mbsf-input", "aria-label": `Units ${index + 1}`, "aria-invalid": Boolean(errors[`serviceLines.${index}.units`]), type: "number", min: 1, value: line.units ?? 1, onChange: (event) => setLine(index, { units: Number(event.target.value) }) }),
+            errors[`serviceLines.${index}.units`] ? /* @__PURE__ */ jsx3("small", { className: "mbsf-error", role: "alert", children: errors[`serviceLines.${index}.units`] }) : null
           ] }),
           /* @__PURE__ */ jsx3("div", { className: "mbsf-money", "data-label": "Allowed", children: lineCharge(line) == null ? "\u2014" : lineCharge(line).toLocaleString(void 0, { style: "currency", currency: "USD" }) }),
           /* @__PURE__ */ jsx3("button", { className: "mbsf-icon-btn", type: "button", "aria-label": `Remove service line ${index + 1}`, disabled: locked || !lineHasContent(line) && index === bill.serviceLines.length - 1, onClick: () => setBill((c) => ({ ...c, serviceLines: ensureTrailingBillSubmissionLine(c.serviceLines.filter((_, itemIndex) => itemIndex !== index)) })), children: "\xD7" })
@@ -1771,41 +1864,44 @@ function BillSubmissionForm({
           /* @__PURE__ */ jsx3("span", { children: total.toLocaleString(void 0, { style: "currency", currency: "USD" }) })
         ] })
       ] }),
-      errors.serviceLines ? /* @__PURE__ */ jsx3("p", { className: "mbsf-error", children: errors.serviceLines }) : null
+      errors.serviceLines ? /* @__PURE__ */ jsx3("p", { className: "mbsf-error", role: "alert", children: errors.serviceLines }) : null
     ] }),
     /* @__PURE__ */ jsxs3("fieldset", { className: "mbsf-card", disabled: locked, children: [
       /* @__PURE__ */ jsx3("legend", { className: "mbsf-legend", children: "Attachments" }),
       /* @__PURE__ */ jsxs3("div", { className: "mbsf-attach-list", children: [
         attachments.filter((attachment) => !removedSourceIds.includes(attachment.id)).map((attachment) => {
           const auto = attachment.autoAttached || attachment.documentType === "w9";
-          const selected = selectedIds.includes(attachment.id);
           const removable = !auto && attachment.removable !== false;
           return /* @__PURE__ */ jsxs3("div", { className: "mbsf-attach-row", "data-auto": auto, children: [
-            /* @__PURE__ */ jsxs3("label", { className: "mbsf-attach-row", style: { border: 0, padding: 0, flex: 1, justifyContent: "flex-start" }, children: [
-              auto ? /* @__PURE__ */ jsx3("span", { "aria-label": "Always attached", role: "img", children: "\u2713" }) : /* @__PURE__ */ jsx3("input", { type: "checkbox", checked: selected, disabled: locked, onChange: (event) => setSelectedIds((current) => event.target.checked ? [.../* @__PURE__ */ new Set([...current, attachment.id])] : current.filter((id) => id !== attachment.id)) }),
+            /* @__PURE__ */ jsxs3("div", { className: "mbsf-attach-main", children: [
+              auto ? /* @__PURE__ */ jsx3("span", { "aria-label": "Always attached", role: "img", children: "\u2713" }) : null,
               /* @__PURE__ */ jsxs3("span", { className: "mbsf-file", children: [
                 /* @__PURE__ */ jsx3("strong", { children: attachment.fileName }),
                 /* @__PURE__ */ jsx3("span", { className: "mbsf-badge", children: auto ? "Auto-attached" : documentLabels[attachment.documentType] }),
                 /* @__PURE__ */ jsx3("span", { className: "mbsf-help", style: { display: "block" }, children: attachment.description || (auto ? "Included automatically with every bill." : documentLabels[attachment.documentType]) })
               ] })
             ] }),
-            attachment.previewUrl ? /* @__PURE__ */ jsx3("a", { className: "mbsf-secondary", href: attachment.previewUrl, target: "_blank", rel: "noreferrer", children: "View" }) : null,
-            removable ? /* @__PURE__ */ jsx3("button", { className: "mbsf-icon-btn", type: "button", "aria-label": `Remove ${attachment.fileName}`, disabled: locked, onClick: () => {
-              setSelectedIds((current) => current.filter((id) => id !== attachment.id));
-              setRemovedSourceIds((current) => [.../* @__PURE__ */ new Set([...current, attachment.id])]);
-            }, children: "\xD7" }) : null
+            /* @__PURE__ */ jsxs3("div", { className: "mbsf-attach-actions", children: [
+              attachment.previewUrl ? /* @__PURE__ */ jsx3("a", { className: "mbsf-secondary", href: attachment.previewUrl, target: "_blank", rel: "noopener noreferrer", children: "Preview" }) : null,
+              removable ? /* @__PURE__ */ jsx3("button", { className: "mbsf-icon-btn", type: "button", "aria-label": `Remove ${attachment.fileName}`, disabled: locked, onClick: () => {
+                setSelectedIds((current) => current.filter((id) => id !== attachment.id));
+                setRemovedSourceIds((current) => [.../* @__PURE__ */ new Set([...current, attachment.id])]);
+              }, children: "\xD7" }) : null
+            ] })
           ] }, attachment.id);
         }),
         uploads.map((upload, index) => /* @__PURE__ */ jsxs3("div", { className: "mbsf-attach-row", children: [
-          /* @__PURE__ */ jsxs3("span", { className: "mbsf-file", children: [
+          /* @__PURE__ */ jsx3("div", { className: "mbsf-attach-main", children: /* @__PURE__ */ jsxs3("span", { className: "mbsf-file", children: [
             /* @__PURE__ */ jsx3("strong", { children: upload.file.name }),
             /* @__PURE__ */ jsxs3("span", { className: "mbsf-help", style: { display: "block" }, children: [
               (upload.file.size / 1024 / 1024).toFixed(1),
               " MB"
             ] })
-          ] }),
-          /* @__PURE__ */ jsx3("select", { className: "mbsf-select", style: { width: 190 }, value: upload.documentType, onChange: (event) => setUploads((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, documentType: event.target.value } : item)), children: BILL_SUBMISSION_DOCUMENT_TYPES.map((type) => /* @__PURE__ */ jsx3("option", { value: type, children: documentLabels[type] }, type)) }),
-          /* @__PURE__ */ jsx3("button", { className: "mbsf-icon-btn", type: "button", "aria-label": `Remove ${upload.file.name}`, onClick: () => setUploads((current) => current.filter((_, itemIndex) => itemIndex !== index)), children: "\xD7" })
+          ] }) }),
+          /* @__PURE__ */ jsxs3("div", { className: "mbsf-attach-actions", children: [
+            /* @__PURE__ */ jsx3("button", { className: "mbsf-secondary", type: "button", onClick: () => previewUploadedPdf(upload.file), children: "Preview" }),
+            /* @__PURE__ */ jsx3("button", { className: "mbsf-icon-btn", type: "button", "aria-label": `Remove ${upload.file.name}`, onClick: () => setUploads((current) => current.filter((_, itemIndex) => itemIndex !== index)), children: "\xD7" })
+          ] })
         ] }, `${upload.file.name}-${index}`))
       ] }),
       /* @__PURE__ */ jsx3("input", { ref: fileInput, hidden: true, type: "file", accept: "application/pdf,.pdf", multiple: true, onChange: (event) => {