@stigmer/react 3.41.0 → 3.41.1-dev.20261003133619.g58ac1f23a411

package/src/identity-provider/IdentityProviderListPanel.tsx

@@ -10,6 +10,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js"
 import { useIdentityProviderList } from "./useIdentityProviderList.js";
 import { useDeleteIdentityProvider } from "./useDeleteIdentityProvider.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 /** Props for {@link IdentityProviderListPanel}. */
 export interface IdentityProviderListPanelProps {
@@ -75,10 +76,9 @@ export function IdentityProviderListPanel({
 
   if (isLoading) {
     return (
-      <div
+      <LoadingRegion
         className={cn("stg:space-y-2", className)}
-        aria-busy="true"
-        aria-label="Loading identity providers"
+        label="Loading identity providers"
       >
         {Array.from({ length: 2 }, (_, i) => (
           <div
@@ -86,7 +86,7 @@ export function IdentityProviderListPanel({
             className="stg:bg-muted-subtle stg:h-14 stg:animate-pulse stg:rounded-lg"
           />
         ))}
-      </div>
+      </LoadingRegion>
     );
   }
 

package/src/identity-provider/IdentityProviderWizard.tsx

@@ -557,7 +557,7 @@ function ReviewStep({
         value={userinfoEndpoint}
         onChange={onUserinfoEndpointChange}
         placeholder="https://example.com/userinfo"
-        hint="Optional — used to fetch user profile data during token exchange"
+        hint="Optional. Read only when Stigmer creates an account from a token with no email claim"
         disabled={isCreating}
       />
 

package/src/identity-provider/SsoLoginPrompt.tsx

@@ -186,6 +186,7 @@ function resolvePhase(
 
 import { forwardRef, useId } from "react";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 interface OrgInputFormProps {
   readonly value: string;
@@ -241,16 +242,16 @@ const OrgInputForm = forwardRef<HTMLInputElement, OrgInputFormProps>(
 
 function LoadingState({ org }: { org: string }) {
   return (
-    <div
+    <LoadingRegion
       className="stg:flex stg:flex-col stg:items-center stg:gap-3 stg:py-4"
-      aria-busy="true"
-      aria-label={`Looking up SSO provider for ${org}`}
+      label={`Looking up SSO provider for ${org}`}
     >
       <SpinnerIcon size={20} className="stg:text-muted-foreground" />
-      <p className="stg:text-sm stg:text-muted-foreground">
+      {/* The hidden label says it in full; this is its short visible form. */}
+      <p className="stg:text-sm stg:text-muted-foreground" aria-hidden="true">
         Looking up <span className="stg:font-medium stg:text-foreground">{org}</span>&hellip;
       </p>
-    </div>
+    </LoadingRegion>
   );
 }
 

package/src/identity-provider/useIdentityProviderList.ts

@@ -32,8 +32,8 @@ export interface UseIdentityProviderListReturn {
  *
  * @example
  * ```tsx
- * function IdpSettings({ orgId }: { orgId: string }) {
- *   const { identityProviders, isLoading, error } = useIdentityProviderList(orgId);
+ * function IdpSettings({ org }: { org: string }) {
+ *   const { identityProviders, isLoading, error } = useIdentityProviderList(org);
  *
  *   if (isLoading) return <Skeleton />;
  *   if (error) return <ErrorMessage error={error} />;

package/src/index.ts

@@ -1123,6 +1123,7 @@ export {
   useOrg,
   useActiveOrgSlug,
   useActiveOrgId,
+  useFollowSessionOrganization,
   useOrgGate,
   useOrganization,
   useCreateOrganization,

package/src/inline-edit/InlineEditImage.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import type { InlineEditBaseProps } from "./types.js";
+import { useInlineDraft } from "./useInlineDraft.js";
 
 /** Props for {@link InlineEditImage}. */
 export interface InlineEditImageProps extends InlineEditBaseProps {
@@ -21,6 +22,10 @@ export interface InlineEditImageProps extends InlineEditBaseProps {
  *
  * Shows the current image (or fallback icon). On click, reveals
  * an input for entering a new image URL with confirm/cancel.
+ *
+ * The draft is seeded from `value` when editing opens. While the editor is
+ * open, a draft the user has edited keeps their text if `value` changes, and
+ * an untouched draft follows the new `value`.
  */
 export function InlineEditImage({
   value,
@@ -32,18 +37,15 @@ export function InlineEditImage({
   error,
   className,
 }: InlineEditImageProps) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [draft, setDraft] = useState(value);
   const [localError, setLocalError] = useState<string | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const { isEditing, setIsEditing, draft, setDraft, startEditing } =
+    useInlineDraft(value, inputRef);
 
-  useEffect(() => {
-    if (isEditing) {
-      setDraft(value);
-      setLocalError(null);
-      requestAnimationFrame(() => inputRef.current?.focus());
-    }
-  }, [isEditing, value]);
+  const handleEdit = useCallback(() => {
+    setLocalError(null);
+    startEditing();
+  }, [startEditing]);
 
   const handleConfirm = useCallback(async () => {
     const trimmed = draft.trim();
@@ -81,7 +83,7 @@ export function InlineEditImage({
       <div className={cn("stg:group/inline-edit stg:inline-flex", className)}>
         <button
           type="button"
-          onClick={() => { if (!disabled) setIsEditing(true); }}
+          onClick={() => { if (!disabled) handleEdit(); }}
           disabled={disabled}
           className={cn(
             "stg:relative stg:rounded-md stg:p-0.5 stg:transition-colors",

package/src/inline-edit/InlineEditText.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import type { InlineEditBaseProps } from "./types.js";
+import { useInlineDraft } from "./useInlineDraft.js";
 
 /** Props for {@link InlineEditText}. */
 export interface InlineEditTextProps extends InlineEditBaseProps {
@@ -24,6 +25,10 @@ export interface InlineEditTextProps extends InlineEditBaseProps {
  * Displays the value as styled text. On click, transitions to an input
  * with inline confirm/cancel controls. Confirm triggers `onSave`;
  * cancel reverts. Escape key also cancels.
+ *
+ * The draft is seeded from `value` when editing opens. While the editor is
+ * open, a draft the user has edited keeps their text if `value` changes, and
+ * an untouched draft follows the new `value`.
  */
 export function InlineEditText({
   value,
@@ -36,18 +41,15 @@ export function InlineEditText({
   error,
   className,
 }: InlineEditTextProps) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [draft, setDraft] = useState(value);
   const [localError, setLocalError] = useState<string | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const { isEditing, setIsEditing, draft, setDraft, startEditing } =
+    useInlineDraft(value, inputRef);
 
-  useEffect(() => {
-    if (isEditing) {
-      setDraft(value);
-      setLocalError(null);
-      requestAnimationFrame(() => inputRef.current?.focus());
-    }
-  }, [isEditing, value]);
+  const handleEdit = useCallback(() => {
+    setLocalError(null);
+    startEditing();
+  }, [startEditing]);
 
   const handleConfirm = useCallback(async () => {
     const trimmed = draft.trim();
@@ -91,7 +93,7 @@ export function InlineEditText({
       <div className={cn("stg:group/inline-edit", className)}>
         <button
           type="button"
-          onClick={() => { if (!disabled) setIsEditing(true); }}
+          onClick={() => { if (!disabled) handleEdit(); }}
           disabled={disabled}
           className={cn(
             "stg:inline-flex stg:w-full stg:items-center stg:gap-1.5 stg:rounded-md stg:px-1.5 stg:py-0.5 stg:text-left stg:transition-colors",

package/src/inline-edit/InlineEditTextarea.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import type { InlineEditBaseProps } from "./types.js";
+import { useInlineDraft } from "./useInlineDraft.js";
 
 /** Props for {@link InlineEditTextarea}. */
 export interface InlineEditTextareaProps extends InlineEditBaseProps {
@@ -23,6 +24,10 @@ export interface InlineEditTextareaProps extends InlineEditBaseProps {
  *
  * In read mode, renders the value as preformatted text with expand/collapse.
  * On click, opens a textarea with confirm/cancel. Ctrl+Enter confirms.
+ *
+ * The draft is seeded from `value` when editing opens. While the editor is
+ * open, a draft the user has edited keeps their text if `value` changes, and
+ * an untouched draft follows the new `value`.
  */
 export function InlineEditTextarea({
   value,
@@ -35,24 +40,15 @@ export function InlineEditTextarea({
   error,
   className,
 }: InlineEditTextareaProps) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [draft, setDraft] = useState(value);
   const [localError, setLocalError] = useState<string | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const { isEditing, setIsEditing, draft, setDraft, startEditing } =
+    useInlineDraft(value, textareaRef, { caretAtEnd: true });
 
-  useEffect(() => {
-    if (isEditing) {
-      setDraft(value);
-      setLocalError(null);
-      requestAnimationFrame(() => {
-        const ta = textareaRef.current;
-        if (ta) {
-          ta.focus();
-          ta.selectionStart = ta.value.length;
-        }
-      });
-    }
-  }, [isEditing, value]);
+  const handleEdit = useCallback(() => {
+    setLocalError(null);
+    startEditing();
+  }, [startEditing]);
 
   // Auto-resize textarea
   useEffect(() => {
@@ -103,7 +99,7 @@ export function InlineEditTextarea({
       <div className={cn("stg:group/inline-edit", className)}>
         <button
           type="button"
-          onClick={() => { if (!disabled) setIsEditing(true); }}
+          onClick={() => { if (!disabled) handleEdit(); }}
           disabled={disabled}
           className={cn(
             "stg:w-full stg:rounded-md stg:px-2 stg:py-1.5 stg:text-left stg:transition-colors",

package/src/inline-edit/useInlineDraft.ts

@@ -0,0 +1,85 @@
+"use client";
+
+/**
+ * The draft, focus and caret contract shared by the click-to-edit text
+ * editors (`InlineEditText`, `InlineEditTextarea`, `InlineEditImage`), kept in
+ * one place so the three cannot drift apart. Internal: not exported from the
+ * package.
+ *
+ * - Opening seeds the draft from the stored value and focuses the field in
+ *   the commit that shows it, never a frame later, so a selection made right
+ *   after opening (select-all, then type) is not collapsed afterwards
+ *   (stigmer/stigmer#1575). A layout effect is used rather than a passive one
+ *   because, in a browser, a passive effect may run after paint and after the
+ *   next input.
+ * - An untouched draft follows the stored value, so a save never writes a
+ *   stale copy over a change made elsewhere; once the user edits, the draft
+ *   is theirs until they save or cancel. The follow is adjusted during render
+ *   (the `ResizableSplit` idiom), so the field never shows the stale value.
+ */
+import { useCallback, useLayoutEffect, useMemo, useState } from "react";
+import type { RefObject } from "react";
+
+/** Return value of {@link useInlineDraft}. */
+export interface UseInlineDraftReturn {
+  /** `true` while the field is open for editing. */
+  readonly isEditing: boolean;
+  /** Open or close the field without reseeding the draft. */
+  readonly setIsEditing: (editing: boolean) => void;
+  /** The text in the field. */
+  readonly draft: string;
+  /** Replace the text in the field (the user typed, or a control reset it). */
+  readonly setDraft: (draft: string) => void;
+  /** Open the field with the draft seeded from the stored value. */
+  readonly startEditing: () => void;
+}
+
+/**
+ * Holds an inline editor's open state and draft, and places focus when the
+ * field opens (the contract in this module's header).
+ *
+ * @param value - The stored value.
+ * @param fieldRef - The input or textarea shown while editing.
+ * @param options.caretAtEnd - Place the caret after the text on opening.
+ */
+export function useInlineDraft(
+  value: string,
+  fieldRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,
+  options?: { readonly caretAtEnd?: boolean },
+): UseInlineDraftReturn {
+  const caretAtEnd = options?.caretAtEnd ?? false;
+  const [isEditing, setIsEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  // The stored value the draft was last seeded from.
+  const [seed, setSeed] = useState(value);
+
+  // An untouched draft follows the stored value (see the module header).
+  if (value !== seed) {
+    setSeed(value);
+    if (draft === seed) setDraft(value);
+  }
+
+  const startEditing = useCallback(() => {
+    setDraft(value);
+    setSeed(value);
+    setIsEditing(true);
+  }, [value]);
+
+  // A layout effect, not a frame later: focus (and the caret) land in the
+  // commit that shows the field, before the browser handles the next input.
+  useLayoutEffect(() => {
+    if (!isEditing) return;
+    const field = fieldRef.current;
+    if (!field) return;
+    field.focus();
+    if (caretAtEnd) {
+      const end = field.value.length;
+      field.setSelectionRange(end, end);
+    }
+  }, [isEditing, fieldRef, caretAtEnd]);
+
+  return useMemo(
+    () => ({ isEditing, setIsEditing, draft, setDraft, startEditing }),
+    [isEditing, draft, startEditing],
+  );
+}

package/src/internal/DialogShell.tsx

@@ -1,8 +1,17 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
-import type { MouseEvent, ReactNode, SyntheticEvent } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type {
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+  SyntheticEvent,
+} from "react";
 import { cn } from "@stigmer/theme";
+import {
+  PortalContainerContext,
+  useStigmerPortalContainer,
+} from "../portal-container.js";
 
 /**
  * Width presets for {@link DialogShell}, mapping to Tailwind `max-w-*`
@@ -79,6 +88,27 @@ export interface DialogShellProps {
  * escaped the #652 fence, and animation classes present on some dialogs and
  * missing from others.
  *
+ * Popups opened inside a modal shell render inside it (stigmer#1509). A
+ * modal `<dialog>` sits in the browser's top layer and makes the rest of
+ * the document inert, so a popover, menu or tooltip portaled into the
+ * provider's `document.body` container would paint beneath the dialog and
+ * refuse every click. The shell therefore owns an empty portal target as
+ * its last child and re-provides it through {@link PortalContainerContext}:
+ * every SDK popup below it lands in the top layer with the dialog, themed
+ * by ordinary inheritance from the provider's in-tree scope. The target is
+ * a zero-size fixed box, so the dialog's own scrolling box never clips a
+ * popup that extends past its edge. The target
+ * carries no `data-stgm-portal` marker; that selector keeps meaning the one
+ * body container. A non-modal shell is in-flow, so it keeps the provider's
+ * container.
+ *
+ * Because those popups now receive keys, Escape pressed while one is open
+ * belongs to the popup: Base UI closes it but does not prevent the
+ * keydown's default, which is the dialog's own close request. The shell
+ * notes, before any popup handler runs, whether its target held a popup,
+ * and keeps the dialog open for that one close request; the next Escape
+ * closes the dialog.
+ *
  * Internal on purpose — not exported from the package until a host needs it.
  * The `stigmer/no-handrolled-dialog` lint rule fences new `<dialog>`
  * elements onto this shell.
@@ -102,6 +132,19 @@ export function DialogShell({
   "aria-labelledby": ariaLabelledby,
 }: DialogShellProps) {
   const dialogRef = useRef<HTMLDialogElement>(null);
+  const inheritedPortalContainer = useStigmerPortalContainer();
+  // State, not a ref: children must re-render with the element once it
+  // mounts. Until then the value is `null`, which Base UI reads as "wait
+  // for a container" — no popup flashes into the body first.
+  const [portalTarget, setPortalTarget] = useState<HTMLDivElement | null>(
+    null,
+  );
+  // Set while one Escape keydown is in flight and a popup was open when it
+  // started; see the doc comment. Cleared by the cancel it guards, or by a
+  // task queued at keydown time when the browser sends no cancel (it may
+  // skip one for a repeated Escape without user activation), so it can
+  // never swallow a later Escape meant for the dialog.
+  const escapeClosesPopupRef = useRef(false);
 
   // Sync the native top-layer state to the controlled prop. Runs on mount
   // too, so a shell mounted with `open` already true shows immediately.
@@ -121,11 +164,28 @@ export function DialogShell({
   const handleCancel = useCallback(
     (e: SyntheticEvent<HTMLDialogElement>) => {
       e.preventDefault();
+      if (escapeClosesPopupRef.current) {
+        escapeClosesPopupRef.current = false;
+        return;
+      }
       onOpenChange(false);
     },
     [onOpenChange],
   );
 
+  // Capture phase: runs before the popup's own key handlers, which stop
+  // propagation, while the popup is certainly still mounted.
+  const handleKeyDownCapture = useCallback(
+    (e: KeyboardEvent<HTMLDialogElement>) => {
+      if (e.key !== "Escape" || !portalTarget?.hasChildNodes()) return;
+      escapeClosesPopupRef.current = true;
+      setTimeout(() => {
+        escapeClosesPopupRef.current = false;
+      }, 0);
+    },
+    [portalTarget],
+  );
+
   // A native close the effect did not perform (e.g. a `method="dialog"`
   // form submit) must not leave the controlled state stranded open.
   const handleClose = useCallback(() => {
@@ -146,6 +206,7 @@ export function DialogShell({
       ref={dialogRef}
       open={modal ? undefined : open || undefined}
       onCancel={modal ? handleCancel : undefined}
+      onKeyDownCapture={modal ? handleKeyDownCapture : undefined}
       onClose={modal ? handleClose : undefined}
       onClick={modal && dismissOnBackdrop ? handleClick : undefined}
       aria-label={ariaLabel}
@@ -163,7 +224,23 @@ export function DialogShell({
         className,
       )}
     >
-      {children}
+      <PortalContainerContext.Provider
+        value={modal ? portalTarget : inheritedPortalContainer}
+      >
+        {children}
+      </PortalContainerContext.Provider>
+      {/* A zero-size fixed box at the viewport origin, not an in-flow
+          div: a fixed box's containing block is the viewport, so popups
+          positioned inside it escape the dialog's own overflow clip (a
+          modal dialog scrolls its content) while staying in its top layer.
+          An in-flow target left every popup cut off at the dialog's edge
+          in Chromium. */}
+      {modal && (
+        <div
+          ref={setPortalTarget}
+          className="stg:fixed stg:top-0 stg:left-0 stg:size-0"
+        />
+      )}
     </dialog>
   );
 }

package/src/internal/LoadingRegion.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+
+/**
+ * The SDK's container for a labelled loading region: the region a skeleton
+ * fills while its data is in flight, marked busy and named for a screen reader
+ * without a role. A skeleton with no name needs none of this and stays a bare
+ * busy element.
+ *
+ * Why hidden text, not `aria-label`: a `div` with no role may not take
+ * `aria-label` (axe `aria-prohibited-attr`, WCAG 4.1.2), so a labelled
+ * skeleton fails any page audit it is on screen for (stigmer/stigmer#1653).
+ * Why no role: `status` is what this console's phase badges, empty states and
+ * notices carry, and `progressbar` its usage gauge, so a skeleton with either
+ * would answer locators meant for them.
+ *
+ * Why not a live region: a loading placeholder is not news. The content that
+ * replaces it is what a screen reader user reads, and an announcement per
+ * skeleton would talk over every panel that loads at once.
+ *
+ * `label` names a wordless skeleton ("Loading sessions"). Leave it out, or
+ * empty, when the children already say what is loading in visible text, so a
+ * screen reader does not read it twice. The hidden text comes first: the
+ * containers space their children with `space-y-*` and `gap-*`, and an
+ * absolutely positioned first child changes neither, where a trailing one
+ * would give the last placeholder a margin it never had. The
+ * `stigmer/require-loading-region` lint rule sends a busy element here when
+ * axe would refuse its name, or when it takes role="status".
+ *
+ * @internal Not part of the public API.
+ */
+export function LoadingRegion({
+  label,
+  className,
+  children,
+}: {
+  readonly label?: string;
+  readonly className?: string;
+  readonly children?: ReactNode;
+}) {
+  return (
+    <div className={className} aria-busy="true">
+      {label ? <span className="stg:sr-only">{label}</span> : null}
+      {children}
+    </div>
+  );
+}

package/src/internal/loading-region-markup.json

@@ -0,0 +1,71 @@
+{
+  "$comment": "Which elements axe-core refuses a name on, for the stigmer/require-loading-region lint rule (tools/eslint-plugin-stigmer/rules/require-loading-region.js), which reports a busy, labelled element with no role written when its tag is in namelessElements. Measured, not judged: src/internal/__tests__/a11y/loading-region-markup.browser.test.ts renders every HTML element, busy, labelled, empty and with no role, through axe's aria-prohibited-attr in Chromium, and fails, printing what axe measured, when these lists disagree. Update a list by copying that output.",
+  "axeCore": "4.11.4",
+  "namelessElements": [
+    "abbr",
+    "address",
+    "b",
+    "bdi",
+    "bdo",
+    "blockquote",
+    "br",
+    "caption",
+    "cite",
+    "code",
+    "col",
+    "colgroup",
+    "data",
+    "del",
+    "div",
+    "em",
+    "figcaption",
+    "hgroup",
+    "i",
+    "ins",
+    "kbd",
+    "legend",
+    "map",
+    "mark",
+    "p",
+    "picture",
+    "pre",
+    "q",
+    "rt",
+    "ruby",
+    "s",
+    "samp",
+    "small",
+    "span",
+    "strong",
+    "sub",
+    "sup",
+    "time",
+    "u",
+    "var",
+    "wbr"
+  ],
+  "elementsLeftToAxe": {
+    "a": {
+      "reason": "an a with an href is a link, which takes a name; the rule cannot see an href passed in a spread",
+      "accepted": "<a id=\"probe\" href=\"#x\" aria-busy=\"true\" aria-label=\"Loading\"></a>"
+    },
+    "td": {
+      "reason": "a table cell takes a name inside a table; axe cannot judge one alone",
+      "accepted": "<table><tbody><tr><td id=\"probe\" aria-busy=\"true\" aria-label=\"Loading\"></td></tr></tbody></table>"
+    },
+    "th": {
+      "reason": "a header cell takes a name inside a table; axe cannot judge one alone",
+      "accepted": "<table><tbody><tr><th id=\"probe\" aria-busy=\"true\" aria-label=\"Loading\"></th></tr></tbody></table>"
+    }
+  },
+  "elementsAxeSkips": {
+    "area": "hidden by default",
+    "audio": "hidden by default without controls",
+    "datalist": "hidden by default",
+    "dialog": "hidden until opened",
+    "noscript": "not rendered while scripting runs",
+    "rp": "hidden by default",
+    "template": "inert content",
+    "slot": "outside axe's tree"
+  }
+}

package/src/internal/markdown-components.tsx

@@ -97,7 +97,7 @@ export function unwrapEnclosingMarkdownFence(
  * blank lines only). Group 1 is the heading text; the match spans through the
  * heading's trailing newline(s) so `body` starts at the first content line.
  */
-const LEADING_H1_RE = /^#[ \t]+(.+?)[ \t]*(?:\r?\n+|$)/;
+const LEADING_H1_MARKER = /^#[ \t]+/;
 
 /**
  * Splits a markdown document into its leading `# H1` title and the remaining
@@ -115,10 +115,21 @@ export function extractLeadingH1(markdown: string): {
   readonly title: string | null;
   readonly body: string;
 } {
+  // Read line by line: a single pattern over the heading and the newlines
+  // after it backtracks on a long run of spaces.
   const trimmed = markdown.trim();
-  const match = LEADING_H1_RE.exec(trimmed);
-  if (!match) return { title: null, body: markdown };
-  return { title: match[1], body: trimmed.slice(match[0].length) };
+  const lineEnd = trimmed.indexOf("\n");
+  const firstLine = lineEnd === -1 ? trimmed : trimmed.slice(0, lineEnd);
+  const marker = LEADING_H1_MARKER.exec(firstLine);
+  if (!marker) return { title: null, body: markdown };
+  const rawTitle = firstLine.slice(marker[0].length).replace(/\r$/, "");
+  let titleEnd = rawTitle.length;
+  while (titleEnd > 0 && (rawTitle[titleEnd - 1] === " " || rawTitle[titleEnd - 1] === "\t")) titleEnd -= 1;
+  const title = rawTitle.slice(0, titleEnd);
+  if (title === "") return { title: null, body: markdown };
+  let bodyStart = lineEnd === -1 ? trimmed.length : lineEnd + 1;
+  while (trimmed[bodyStart] === "\n") bodyStart += 1;
+  return { title, body: trimmed.slice(bodyStart) };
 }
 
 /**

package/src/internal/trim.ts

@@ -0,0 +1,10 @@
+/**
+ * `value` without its trailing run of `char`. A `/x+$/` regex rescans the run
+ * from every starting position, so a long run costs quadratic time; this walks
+ * it once.
+ */
+export function trimTrailing(value: string, char: string): string {
+  let end = value.length;
+  while (end > 0 && value[end - 1] === char) end -= 1;
+  return end === value.length ? value : value.slice(0, end);
+}

package/src/invitation/InvitationManager.tsx

@@ -21,6 +21,7 @@ import { RoleSelector } from "../iam-policy/RoleSelector.js";
 import { useOwnerAssignment } from "../iam-policy/useOwnerAssignment.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 import { useCopyFeedback } from "../internal/useCopyFeedback.js";
+import { LoadingRegion } from "../internal/LoadingRegion.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -115,10 +116,9 @@ export function InvitationManager({
 
   if (isLoading) {
     return (
-      <div
+      <LoadingRegion
         className={cn("stg:space-y-2", className)}
-        aria-busy="true"
-        aria-label="Loading invitations"
+        label="Loading invitations"
       >
         {Array.from({ length: 2 }, (_, i) => (
           <div
@@ -126,7 +126,7 @@ export function InvitationManager({
             className="stg:bg-muted-subtle stg:h-14 stg:animate-pulse stg:rounded-lg"
           />
         ))}
-      </div>
+      </LoadingRegion>
     );
   }