@homebound/beam 4.12.0 → 4.13.0

package/dist/index.d.cts

@@ -7881,11 +7881,13 @@ type AiLoadingPanelProps = {
     title?: string;
     message?: ReactNode;
     omitBg?: boolean;
+    /** Caller-owned footer progress status, such as "usually takes 3 minutes". Hidden when unset. */
+    progressText?: string;
 };
 /**
  * Tells the user AI work is running, and that they're free to go do something else.
  *
- * Indeterminate — these steps don't report progress, so this never shows a percentage or ETA.
+ * The spinner stays indeterminate. `progressText` is an optional status line the caller supplies to give the user a better idea of the progress.
  */
 declare function AiLoadingPanel(props: AiLoadingPanelProps): React$1.JSX.Element;
 
@@ -10965,10 +10967,12 @@ type FormSectionLayoutProps = {
     /** When true, wraps in {@link AiCard} and applies AI title styling. */
     aiMode?: boolean;
     /**
-     * When true, show a JumpLinks rail from section titles (needs 2+ includable sections; hidden on `sm`).
+     * When true, show a JumpLinks rail from section titles (needs 2+ includable links; hidden on `sm`).
      * Default false — opt in for FocusedForm / Stepper form steps that want the rail.
      */
     withJumpLinks?: boolean;
+    /** When true with `withJumpLinks`, prepend the form `title` as the first rail link. */
+    includeTitleJumpLink?: boolean;
     /**
      * Opt into the document-scroll detail pane (`useRightPane`).
      * Hosts JumpLinks + form — do not also set `withRightPane` on the inner `CenteredLayout`.

package/dist/index.d.ts

@@ -7881,11 +7881,13 @@ type AiLoadingPanelProps = {
     title?: string;
     message?: ReactNode;
     omitBg?: boolean;
+    /** Caller-owned footer progress status, such as "usually takes 3 minutes". Hidden when unset. */
+    progressText?: string;
 };
 /**
  * Tells the user AI work is running, and that they're free to go do something else.
  *
- * Indeterminate — these steps don't report progress, so this never shows a percentage or ETA.
+ * The spinner stays indeterminate. `progressText` is an optional status line the caller supplies to give the user a better idea of the progress.
  */
 declare function AiLoadingPanel(props: AiLoadingPanelProps): React$1.JSX.Element;
 
@@ -10965,10 +10967,12 @@ type FormSectionLayoutProps = {
     /** When true, wraps in {@link AiCard} and applies AI title styling. */
     aiMode?: boolean;
     /**
-     * When true, show a JumpLinks rail from section titles (needs 2+ includable sections; hidden on `sm`).
+     * When true, show a JumpLinks rail from section titles (needs 2+ includable links; hidden on `sm`).
      * Default false — opt in for FocusedForm / Stepper form steps that want the rail.
      */
     withJumpLinks?: boolean;
+    /** When true with `withJumpLinks`, prepend the form `title` as the first rail link. */
+    includeTitleJumpLink?: boolean;
     /**
      * Opt into the document-scroll detail pane (`useRightPane`).
      * Hosts JumpLinks + form — do not also set `withRightPane` on the inner `CenteredLayout`.

package/dist/index.js

@@ -14867,10 +14867,11 @@ import { jsx as jsx62, jsxs as jsxs41 } from "react/jsx-runtime";
 function AiLoadingPanel(props) {
   const {
     title = "Importing Details...",
-    message = defaultMessage,
-    omitBg = false
+    omitBg = false,
+    progressText
   } = props;
   const tid = useTestIds(props, "aiLoadingPanel");
+  const message = props.message ?? `${progressText === void 0 ? "This process can take a few minutes. " : ""}Feel free to keep working in another tab. Once imported, you may edit or add to content before saving.`;
   const card = (
     // `status` rather than `alert` so assistive tech waits for a pause instead of interrupting, and
     // `aria-busy` so it knows the surrounding content is still settling.
@@ -14885,12 +14886,31 @@ function AiLoadingPanel(props) {
           "--color": "var(--b-on-surface)"
         }],
         textAlign: "tac"
-      }), ...tid.message, children: message })
+      }), ...tid.message, children: message }),
+      progressText !== void 0 && /* @__PURE__ */ jsxs41("div", { ...trussProps42({
+        width: "w100",
+        display: "df",
+        alignItems: "aic",
+        justifyContent: "jcc",
+        gap: "g_1",
+        marginTop: "mt1",
+        paddingTop: "pt2",
+        borderTopStyle: "bts_solid",
+        borderTopWidth: "btw_1px",
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-surface-separator)"
+        }],
+        fontWeight: "fw4",
+        fontSize: "fz_12px",
+        lineHeight: "lh_16px"
+      }), children: [
+        /* @__PURE__ */ jsx62(Icon, { icon: "time", inc: 2 }),
+        /* @__PURE__ */ jsx62("span", { ...tid.progressText, children: progressText })
+      ] })
     ] }) })
   );
   return omitBg ? card : /* @__PURE__ */ jsx62(AiPanel, { padding: "lg", ...tid, children: card });
 }
-var defaultMessage = "This process can take a few minutes. Feel free to keep working in another tab. Once imported, you may edit or add to content before saving.";
 
 // src/components/AiSlimBanner.tsx
 import { jsx as jsx63, jsxs as jsxs42 } from "react/jsx-runtime";
@@ -29081,6 +29101,7 @@ function FormSectionLayout(props) {
     sections,
     aiMode = false,
     withJumpLinks = false,
+    includeTitleJumpLink = false,
     withRightPane
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
@@ -29088,13 +29109,19 @@ function FormSectionLayout(props) {
     sm: isMobile
   } = useBreakpoint();
   const rightPane = resolveWithRightPaneOptions(withRightPane);
-  const jumpLinks = (sections ?? []).filter((section) => !section.excludeJumpLink).map((section) => {
+  const formSectionLayoutTitleId = "formSectionLayoutTitle";
+  const sectionLinks = (sections ?? []).filter((section) => !section.excludeJumpLink).map((section) => {
     const id = defaultTestId(section.title);
     return {
       id,
       label: section.title
     };
   });
+  const titleAnchor = withJumpLinks && includeTitleJumpLink;
+  const jumpLinks = [...titleAnchor ? [{
+    id: formSectionLayoutTitleId,
+    label: title
+  }] : [], ...sectionLinks];
   const showRail = withJumpLinks && jumpLinks.length >= 2 && !isMobile;
   const activeId = useActiveJumpLink(showRail ? jumpLinks.map((link) => link.id) : []);
   const content2 = /* @__PURE__ */ jsxs123("div", { ...trussProps134({
@@ -29108,7 +29135,16 @@ function FormSectionLayout(props) {
       paddingLeft: "pl3"
     } : {}
   }), children: [
-    /* @__PURE__ */ jsxs123("div", { className: "df fdc g_3", children: [
+    /* @__PURE__ */ jsxs123("div", { id: titleAnchor ? formSectionLayoutTitleId : void 0, ...trussProps134({
+      display: "df",
+      flexDirection: "fdc",
+      gap: "g_3",
+      ...titleAnchor ? {
+        scrollMarginTop: ["scrollMarginTop_var", {
+          "--scrollMarginTop": maybeCssVar67(stickyNavAndHeaderOffset())
+        }]
+      } : {}
+    }), children: [
       /* @__PURE__ */ jsx230(ContentHeader, { ...tid, title, description, actions, withAutoSave, level: 2, aiMode }),
       initialFields
     ] }),