@ostack.tech/ui-kform 0.3.4 → 0.4.0

package/dist/ostack-ui-kform.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { usePrefix as usePrefix$1, useControllableState, combineEventHandlers, LocalizationProvider as LocalizationProvider$1, useLatestValues, useConstant, useSpacing, useCssVars, NATIVE_CONTROLS, useResponsiveValues, useCombinedRef, cx, useIsInRoot, warnOnce, PrefixProvider, Root, computed, TabContent, ErrorBoundary, DocumentTitle, Spinner, useToastManager, Tabs, useErrorReporter, EMPTY_STORE, Field, Feedback, FeedbackList, FeedbackPopover, useMediaBreakpointUp, DropdownMenu, DropdownMenuTrigger, Button, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem, useAlertDialog, DropdownMenuRadioItem, controlStatusToAccent, VisuallyHidden, IconButton, Tab, boolDataAttr, TabList, useIsInTableCell, useDataTableColumnLabel, useOnFieldLabelChange, Checkbox, OptionsGroup, Option, CheckboxGroup, useDateTransformer, DateInput, DateRangeInput, Input, Dialog, Tooltip, DialogTrigger, ControlAddon, Icon, DialogContent, DialogHeader, DialogTitle, DialogBody, Alert, Stack, Popover, PopoverTrigger, PopoverContent, useMeasure, Container, Select, MenuListItem, MenuList, StepContent, Step, StepList, Stepper, CloseButton, useScrollPosition, setBoolDataAttr, Card, CardHeader, CardTitle, CardBody, useIntersectionObserver, useKeyboardShortcut, NumericInput, Link, RadioGroup, Radio, ButtonGroup, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogBody, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, DataTableCell, DataTableRow, useDataTableApiRef, DataTable, Slot, DataTableContent, DataTablePagination, DataTableRowsPerPage, TextArea, PortalContext } from "@ostack.tech/ui";
-import { AbsolutePathFragment, PathMultimap, AbsolutePath, sliceTable, listableSize, ValidationFailure, Path, nullableSchemaInnerSchema, compareSchemaPaths, PromiseCancellationException, arrayToTable, indexOfTableRowId, isComputedSchema } from "@ostack.tech/kform";
-import { equals, useFormController, useResolvedPath, useForm, FormContext, CurrentPath, useCurrentPath, useFormManager, useFormattedValue, InvalidPathError, AtPathError, useIssuesTracker, useFormContext, useInput, useListableInput, formatTemporalAsString, useTemporalInput, useFileInput, useController, useNumericInput, formatNumericAsString, useFormatter } from "@ostack.tech/kform-react";
-import { createContext, useContext, useCallback, useMemo, useRef, useEffect, forwardRef, useState, useImperativeHandle, startTransition, Suspense, useDeferredValue, createElement, memo } from "react";
+import { usePrefix as usePrefix$1, useControllableState, useLatestValues, combineEventHandlers, LocalizationProvider as LocalizationProvider$1, useConstant, useSpacing, useCssVars, NATIVE_CONTROLS, useResponsiveValues, useCombinedRef, cx, useIsInRoot, warnOnce, PrefixProvider, Root, computed, TabContent, ErrorBoundary, DocumentTitle, Spinner, useToastManager, Tabs, useErrorReporter, EMPTY_STORE, Field, Feedback, FeedbackList, FeedbackPopover, useMediaBreakpointUp, DropdownMenu, DropdownMenuTrigger, Button, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem, useAlertDialog, DropdownMenuRadioItem, controlStatusToAccent, VisuallyHidden, IconButton, Tab, boolDataAttr, TabList, useIsInTableCell, useDataTableColumnLabel, useOnFieldLabelChange, Checkbox, OptionsGroup, Option, CheckboxGroup, useDateTransformer, DateInput, DateRangeInput, Input, Dialog, Tooltip, DialogTrigger, ControlAddon, Icon, DialogContent, DialogHeader, DialogTitle, DialogBody, Alert, Stack, Popover, PopoverTrigger, PopoverContent, useMeasure, Container, Select, MenuListItem, MenuList, StepContent, Step, StepList, Stepper, CloseButton, useScrollPosition, setBoolDataAttr, Card, CardHeader, CardTitle, CardBody, useIntersectionObserver, useKeyboardShortcut, NumericInput, Link, RadioGroup, Radio, ButtonGroup, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogBody, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, DataTableCell, DataTableRow, useDataTableApiRef, DataTable, Slot, DataTableContent, DataTablePagination, DataTableRowsPerPage, TextArea, PortalContext } from "@ostack.tech/ui";
+import { AbsolutePath, AbsolutePathFragment, PathMultimap, sliceTable, listableSize, Path, ValidationFailure, nullableSchemaInnerSchema, compareSchemaPaths, PromiseCancellationException, arrayToTable, indexOfTableRowId, isComputedSchema } from "@ostack.tech/kform";
+import { useResolvedPath, equals, useFormController, useForm, FormContext, CurrentPath, useCurrentPath, useFormManager, useFormattedValue, InvalidPathError, AtPathError, useIssuesTracker, useFormContext, useInput, useListableInput, formatTemporalAsString, useTemporalInput, useFileInput, useController, useNumericInput, formatNumericAsString, useFormatter } from "@ostack.tech/kform-react";
+import { createContext, useContext, useCallback, useMemo, useRef, useEffect, forwardRef, useState, useImperativeHandle, startTransition, Suspense, useDeferredValue, Children, isValidElement, createElement, memo } from "react";
 import { createStore, useStore } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
 import { useShallow } from "zustand/react/shallow";
@@ -41,6 +41,58 @@ function usePrefix() {
     [prefix, prefixSuffix]
   );
 }
+const ActivePathContext = createContext(
+  null
+);
+function useActivePathContext() {
+  const activePathContext = useContext(ActivePathContext);
+  if (!activePathContext) {
+    throw new Error("Active path context not in scope");
+  }
+  return activePathContext;
+}
+function ActivePathProvider({
+  defaultActivePath,
+  activePath: controlledActivePath,
+  onActivePathChange,
+  children
+}) {
+  const [activePath, setActivePath] = useControllableState(
+    defaultActivePath,
+    controlledActivePath
+  );
+  const resolvedActivePath = useResolvedPath(activePath);
+  const latest = useLatestValues({ resolvedActivePath, onActivePathChange });
+  const handleActivePathChange = useCallback(
+    (newActivePath) => {
+      const activePath2 = latest.resolvedActivePath;
+      if (typeof newActivePath === "string") {
+        newActivePath = new AbsolutePath(newActivePath);
+      } else {
+        newActivePath ??= AbsolutePath.ROOT;
+      }
+      if (!activePath2.equals(newActivePath) && !newActivePath.append(AbsolutePathFragment.RecursiveWildcard).contains(activePath2)) {
+        const replace = activePath2.append(AbsolutePathFragment.RecursiveWildcard).contains(newActivePath);
+        setActivePath(newActivePath);
+        latest.onActivePathChange?.(newActivePath, { replace });
+      }
+    },
+    [latest, setActivePath]
+  );
+  return /* @__PURE__ */ jsx(
+    ActivePathContext,
+    {
+      value: useMemo(
+        () => ({
+          activePath: resolvedActivePath,
+          onActivePathChange: handleActivePathChange
+        }),
+        [handleActivePathChange, resolvedActivePath]
+      ),
+      children
+    }
+  );
+}
 const LocalizationContext = createContext(null);
 function LocalizationProvider({
   defaultLocale,
@@ -128,7 +180,7 @@ function useCreateFormAppContext({
         leftSidebarWidth: 0,
         bottomPanelHeight: 0,
         startIssuesNavigation: void 0,
-        activePath: AbsolutePath.ROOT,
+        latestInteraction: AbsolutePath.ROOT,
         registeredControllers: [new PathMultimap()],
         registeredIssueMessages: [new PathMultimap()],
         deferredIssueMessageRemovalEntryIds: [],
@@ -210,8 +262,8 @@ function useCreateFormAppContext({
             };
           },
           isRegistered: (path) => get().registeredControllers[0].containsPath(path),
-          setActivePath: (path) => {
-            set({ activePath: path });
+          setLatestInteraction: (path) => {
+            set({ latestInteraction: path });
           },
           registerIssueMessages: (basePath, issueMessages, priority = 0) => {
             if (issueMessages == null) {
@@ -406,13 +458,16 @@ function useIsRegistered(path) {
     (state) => path != null && state.actions.isRegistered(path)
   );
 }
-function useActivePath() {
-  return useStore(useFormAppContext().store, (state) => state.activePath);
+function useLatestInteraction() {
+  return useStore(
+    useFormAppContext().store,
+    (state) => state.latestInteraction
+  );
 }
-function useSetActivePath() {
+function useSetLatestInteraction() {
   return useStore(
     useFormAppContext().store,
-    (state) => state.actions.setActivePath
+    (state) => state.actions.setLatestInteraction
   );
 }
 function useRegisterIssueMessages(path, issueMessages, priority) {
@@ -697,6 +752,10 @@ const FormApp = forwardRef(function FormApp2({
   issueMessages,
   issuesDisplayMode = "inline",
   displayIssueCodes = false,
+  // activePathSearchParam,
+  defaultActivePath,
+  activePath,
+  onActivePathChange,
   onPathFocus,
   minHeight,
   apiRef,
@@ -850,14 +909,22 @@ const FormApp = forwardRef(function FormApp2({
       locale: controlledLocale,
       onLocaleChange,
       children: /* @__PURE__ */ jsx(FormContext.Provider, { value: formContext, children: /* @__PURE__ */ jsx(FormAppContext.Provider, { value: formAppContextValue, children: /* @__PURE__ */ jsx(
-        FormAppIssueMessages,
+        ActivePathProvider,
         {
-          issueMessages: locale.FormApp.issueMessages,
-          priority: -1,
-          children: /* @__PURE__ */ jsxs(FormAppIssueMessages, { issueMessages, children: [
-            /* @__PURE__ */ jsx(FormAppAutoFocus, {}),
-            isInRoot ? formAppEl : /* @__PURE__ */ jsx(Root, { asChild: true, ...rootProps, children: formAppEl })
-          ] })
+          defaultActivePath,
+          activePath,
+          onActivePathChange,
+          children: /* @__PURE__ */ jsx(
+            FormAppIssueMessages,
+            {
+              issueMessages: locale.FormApp.issueMessages,
+              priority: -1,
+              children: /* @__PURE__ */ jsxs(FormAppIssueMessages, { issueMessages, children: [
+                /* @__PURE__ */ jsx(FormAppAutoFocus, {}),
+                isInRoot ? formAppEl : /* @__PURE__ */ jsx(Root, { asChild: true, ...rootProps, children: formAppEl })
+              ] })
+            }
+          )
         }
       ) }) })
     }
@@ -916,9 +983,12 @@ function useCreateAnnexesContext({
   onAnnexAdd,
   onAnnexRemove
 }) {
-  const setActivePath = useSetActivePath();
+  const setLatestInteraction = useSetLatestInteraction();
+  const { activePath, onActivePathChange } = useActivePathContext();
+  activeAnnex ??= activePath;
   const latest = useLatestValues({
     formManager,
+    onActivePathChange,
     onActiveAnnexChange,
     onAnnexAdd,
     onAnnexRemove
@@ -1066,10 +1136,11 @@ function useCreateAnnexesContext({
               startTransition(() => {
                 set({ activeAnnex: newActiveAnnex });
                 if (newActiveAnnex != null) {
-                  setActivePath(newActiveAnnex);
+                  setLatestInteraction(newActiveAnnex);
                 }
+                latest.onActivePathChange(newActiveAnnex);
+                latest.onActiveAnnexChange?.(newActiveAnnex);
               });
-              latest.onActiveAnnexChange?.(newActiveAnnex);
             }
           },
           updateActiveAnnex: (oldActiveAnnexIndex) => {
@@ -1188,7 +1259,20 @@ function useAnnexState(path, selector) {
   );
 }
 const Annex = forwardRef(
-  function Annex2({ path, ...otherProps }, forwardedRef) {
+  function Annex2({
+    path,
+    // `AnnexObject` props
+    title: _title,
+    subtitle: _subtitle,
+    description: _description,
+    issuesPanelLabel: _issuesPanelLabel,
+    itemTitle: _itemTitle,
+    itemIssuesPanelLabel: _itemIssuesPanelLabel,
+    documentTitle: _documentTitle,
+    maxAnnexes: _maxAnnexes,
+    getValue: _getValue,
+    ...otherProps
+  }, forwardedRef) {
     const annexPath = useResolvedPath(path);
     const store = useAnnexesContext();
     const activeAnnex = useStore(store, (state) => state.activeAnnex);
@@ -1210,39 +1294,37 @@ const Annex = forwardRef(
     });
   }
 );
-const AnnexTabContent = forwardRef(
-  function AnnexTabContent2({
-    disabled = false,
-    readOnly = false,
-    issueMessages,
-    children,
-    className,
-    errorBoundaryProps,
-    ...otherProps
-  }, forwardedRef) {
-    const prefix = usePrefix();
-    const annexPath = useCurrentPath();
-    const documentTitle = useAnnexState(
-      annexPath,
-      (state) => state === null ? null : state.documentTitle
-    );
-    if (documentTitle === void 0) {
-      warnOnce(
-        `Annex: At '${annexPath.toString()}': \`documentTitle\` should be set manually since either \`title\` or \`subtitle\` is not a string.`
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      TabContent,
-      {
-        className: cx(prefix("annexes__annex"), className),
-        value: annexPath.toString(),
-        ...otherProps,
-        ref: forwardedRef,
-        children: /* @__PURE__ */ jsx(ErrorBoundary, { ...errorBoundaryProps, children: /* @__PURE__ */ jsx(DocumentTitle, { title: documentTitle ?? void 0, children: /* @__PURE__ */ jsx(FormAppStatus, { disabled, readOnly, children: /* @__PURE__ */ jsx(FormAppIssueMessages, { issueMessages, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Spinner, { size: "xl", color: "primary" }), children }) }) }) }) })
-      }
+const AnnexTabContent = forwardRef(function AnnexTabContent2({
+  disabled = false,
+  readOnly = false,
+  issueMessages,
+  children,
+  className,
+  errorBoundaryProps,
+  ...otherProps
+}, forwardedRef) {
+  const prefix = usePrefix();
+  const annexPath = useCurrentPath();
+  const documentTitle = useAnnexState(
+    annexPath,
+    (state) => state === null ? null : state.documentTitle
+  );
+  if (documentTitle === void 0) {
+    warnOnce(
+      `Annex: At '${annexPath.toString()}': \`documentTitle\` should be set manually since either \`title\` or \`subtitle\` is not a string.`
     );
   }
-);
+  return /* @__PURE__ */ jsx(
+    TabContent,
+    {
+      className: cx(prefix("annexes__annex"), className),
+      value: annexPath.toString(),
+      ...otherProps,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx(ErrorBoundary, { ...errorBoundaryProps, children: /* @__PURE__ */ jsx(DocumentTitle, { title: documentTitle ?? void 0, children: /* @__PURE__ */ jsx(FormAppStatus, { disabled, readOnly, children: /* @__PURE__ */ jsx(FormAppIssueMessages, { issueMessages, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Spinner, { size: "xl", color: "primary" }), children }) }) }) }) })
+    }
+  );
+});
 function useFormLoader({
   decode,
   path,
@@ -1375,92 +1457,6 @@ function useFormLoader({
 function useFormIsLoading() {
   return useFormController().useState((state) => state.loading);
 }
-const Annexes = forwardRef(
-  function Annexes2({
-    path,
-    annexes,
-    defaultActiveAnnex,
-    activeAnnex,
-    onActiveAnnexChange,
-    onAnnexAdd,
-    onAnnexRemove,
-    variant = "annexes",
-    className,
-    ...otherProps
-  }, forwardedRef) {
-    const prefix = usePrefix();
-    const formManager = useFormManager();
-    const absolutePath = useResolvedPath(path);
-    const resolvedAnnexes = useMemo(
-      () => annexes.map((annex) => ({
-        ...annex,
-        path: absolutePath.resolve(annex.path)
-      })),
-      [absolutePath, annexes]
-    );
-    if (!formManager.isValidPath(absolutePath)) {
-      throw new Error(`Invalid path: '${absolutePath.toString()}'`);
-    }
-    if (absolutePath.fragments.some(
-      (frag) => !(frag instanceof AbsolutePathFragment.Id)
-    )) {
-      throw new Error("Annexes base path must only contain ids.");
-    }
-    for (const annex of resolvedAnnexes) {
-      if (!formManager.isValidPath(annex.path)) {
-        throw new Error(`Invalid path: '${annex.path.toString()}'`);
-      }
-      if (annex.path.fragments.some(
-        (frag, i, { length }) => !(frag instanceof AbsolutePathFragment.Id) && (frag !== AbsolutePathFragment.Wildcard || i !== length - 1)
-      )) {
-        throw new Error(
-          "Annex path must either only contain ids, or ids followed by a single wildcard at the end."
-        );
-      }
-    }
-    const store = useCreateAnnexesContext({
-      formManager,
-      basePath: absolutePath,
-      resolvedAnnexes,
-      defaultActiveAnnex,
-      activeAnnex,
-      onActiveAnnexChange,
-      onAnnexAdd,
-      onAnnexRemove
-    });
-    const activeAnnexString = useStore(
-      store,
-      (state) => state.activeAnnex?.toString() ?? ""
-    );
-    const handleValueChange = useCallback(
-      (value) => store.getState().actions.setActiveAnnex(value),
-      [store]
-    );
-    return /* @__PURE__ */ jsx(CurrentPath, { path: absolutePath, children: /* @__PURE__ */ jsxs(AnnexesContext.Provider, { value: store, children: [
-      resolvedAnnexes.map(
-        (annex) => annex.path.lastFragment === AbsolutePathFragment.Wildcard ? /* @__PURE__ */ jsx(
-          RepetitiveAnnexRegistrar,
-          {
-            ...annex
-          },
-          annex.path.toString()
-        ) : /* @__PURE__ */ jsx(AnnexRegistrar, { ...annex }, annex.path.toString())
-      ),
-      /* @__PURE__ */ jsx(
-        Tabs,
-        {
-          className: cx(prefix("annexes"), className),
-          variant,
-          activationMode: "manual",
-          value: activeAnnexString,
-          onValueChange: handleValueChange,
-          ...otherProps,
-          ref: forwardedRef
-        }
-      )
-    ] }) });
-  }
-);
 function AnnexRegistrar({
   path,
   title,
@@ -1610,6 +1606,108 @@ function RepetitiveAnnexRegistrar({
     rowId
   ));
 }
+const Annexes = forwardRef(
+  function Annexes2({
+    path,
+    annexes,
+    defaultActiveAnnex,
+    activeAnnex,
+    onActiveAnnexChange,
+    onAnnexAdd,
+    onAnnexRemove,
+    variant = "annexes",
+    className,
+    children,
+    ...otherProps
+  }, forwardedRef) {
+    const prefix = usePrefix();
+    const formManager = useFormManager();
+    const absolutePath = useResolvedPath(path);
+    annexes ??= Children.toArray(children).filter(
+      (child) => isValidElement(child) && child.type === Annex
+    ).map((annex) => ({
+      path: annex.props.path,
+      title: annex.props.title,
+      subtitle: annex.props.subtitle,
+      description: annex.props.description,
+      issuesPanelLabel: annex.props.issuesPanelLabel,
+      itemTitle: annex.props.itemTitle,
+      itemIssuesPanelLabel: annex.props.itemIssuesPanelLabel,
+      documentTitle: annex.props.documentTitle,
+      maxAnnexes: annex.props.maxAnnexes,
+      getValue: annex.props.getValue
+    }));
+    const resolvedAnnexes = useMemo(
+      () => annexes.map((annex) => ({
+        ...annex,
+        path: absolutePath.resolve(annex.path ?? Path.CURRENT)
+      })),
+      [absolutePath, annexes]
+    );
+    if (!formManager.isValidPath(absolutePath)) {
+      throw new Error(`Invalid path: '${absolutePath.toString()}'`);
+    }
+    if (absolutePath.fragments.some(
+      (frag) => !(frag instanceof AbsolutePathFragment.Id)
+    )) {
+      throw new Error("Annexes base path must only contain ids.");
+    }
+    for (const annex of resolvedAnnexes) {
+      if (!formManager.isValidPath(annex.path)) {
+        throw new Error(`Invalid path: '${annex.path.toString()}'`);
+      }
+      if (annex.path.fragments.some(
+        (frag, i, { length }) => !(frag instanceof AbsolutePathFragment.Id) && (frag !== AbsolutePathFragment.Wildcard || i !== length - 1)
+      )) {
+        throw new Error(
+          "Annex path must either only contain ids, or ids followed by a single wildcard at the end."
+        );
+      }
+    }
+    const store = useCreateAnnexesContext({
+      formManager,
+      basePath: absolutePath,
+      resolvedAnnexes,
+      defaultActiveAnnex,
+      activeAnnex,
+      onActiveAnnexChange,
+      onAnnexAdd,
+      onAnnexRemove
+    });
+    const activeAnnexString = useStore(
+      store,
+      (state) => state.activeAnnex?.toString() ?? ""
+    );
+    const handleValueChange = useCallback(
+      (value) => store.getState().actions.setActiveAnnex(value),
+      [store]
+    );
+    return /* @__PURE__ */ jsx(CurrentPath, { path: absolutePath, children: /* @__PURE__ */ jsxs(AnnexesContext.Provider, { value: store, children: [
+      resolvedAnnexes.map(
+        (annex) => annex.path.lastFragment === AbsolutePathFragment.Wildcard ? /* @__PURE__ */ jsx(
+          RepetitiveAnnexRegistrar,
+          {
+            ...annex
+          },
+          annex.path.toString()
+        ) : /* @__PURE__ */ jsx(AnnexRegistrar, { ...annex }, annex.path.toString())
+      ),
+      /* @__PURE__ */ jsx(
+        Tabs,
+        {
+          className: cx(prefix("annexes"), className),
+          variant,
+          activationMode: "manual",
+          value: activeAnnexString,
+          onValueChange: handleValueChange,
+          ...otherProps,
+          ref: forwardedRef,
+          children
+        }
+      )
+    ] }) });
+  }
+);
 class ValidationFailureError extends AtPathError {
   constructor(path, issue) {
     super(path, `Failed to run validation '${issue.validation}'`);
@@ -2472,14 +2570,14 @@ function useRegisterControl({
     controller,
     !preventAutoFocus
   );
-  const setActivePath = useSetActivePath();
+  const setLatestInteraction = useSetLatestInteraction();
   const handleFocus = useCallback(
     (event) => {
       if (event.target === event.currentTarget && !event.defaultPrevented) {
-        setActivePath(controller.getState().path);
+        setLatestInteraction(controller.getState().path);
       }
     },
-    [controller, setActivePath]
+    [controller, setLatestInteraction]
   );
   return useMemo(
     () => ({
@@ -3425,8 +3523,10 @@ function useCreateFormPagesContext({
   activePage,
   onActivePageChange
 }) {
-  const setActivePath = useSetActivePath();
-  const latest = useLatestValues({ onActivePageChange });
+  const setLatestInteraction = useSetLatestInteraction();
+  const { activePath, onActivePathChange } = useActivePathContext();
+  activePage ??= activePath;
+  const latest = useLatestValues({ onActivePathChange, onActivePageChange });
   const store = useConstant(
     () => createStore()(
       subscribeWithSelector((set, get) => ({
@@ -3459,10 +3559,11 @@ function useCreateFormPagesContext({
               startTransition(() => {
                 set({ activePage: newActivePage });
                 if (newActivePage != null) {
-                  setActivePath(newActivePage);
+                  setLatestInteraction(newActivePage);
                 }
+                latest.onActivePathChange(newActivePage);
+                latest.onActivePageChange?.(newActivePage);
               });
-              latest.onActivePageChange?.(newActivePage);
             }
           },
           updateActivePage: (oldActivePageIndex) => {
@@ -3676,6 +3777,11 @@ const FormPageHeader = forwardRef(function FormPageHeader2({
 const FormPage = forwardRef(
   function FormPage2({
     path,
+    // `FormPageObject` props
+    title: _title,
+    documentTitle: _documentTitle,
+    code: _code,
+    issuesPanelLabel: _issuesPanelLabel,
     disabled = false,
     readOnly = false,
     className,
@@ -3786,6 +3892,60 @@ const FormPage = forwardRef(
     ) }) }) : null;
   }
 );
+function FormPageRegistrar({
+  path,
+  title,
+  documentTitle,
+  code,
+  issuesPanelLabel
+}) {
+  const store = useFormPagesContext();
+  const controller = useController(
+    path.append(AbsolutePathFragment.RecursiveWildcard),
+    { enabled: !useFormIsLoading() }
+  );
+  const absolutePath = controller.usePath();
+  const exists = controller.useState(
+    (state) => state.initialized && state.exists
+  );
+  const deferredValue = useDeferredValue(controller.useValue());
+  const deferredIssuesToDisplay = useDeferredValue(
+    controller.useState((state) => state.touched ? state.issues : [], {
+      equalityFn: shallow
+    })
+  );
+  const deferredDisplayStatus = useDeferredValue(controller.useDisplayStatus());
+  const actualTitle = typeof title === "function" ? deferredValue === void 0 ? null : title(deferredValue) : title;
+  const actualDocumentTitle = typeof documentTitle === "function" ? deferredValue === void 0 ? null : documentTitle(deferredValue) : documentTitle === void 0 ? actualTitle === null || typeof actualTitle === "string" ? actualTitle : void 0 : documentTitle;
+  useEffect(() => {
+    const { registerPageState } = store.getState().actions;
+    registerPageState(absolutePath, {
+      exists,
+      path: absolutePath,
+      deferredIssuesToDisplay,
+      deferredDisplayStatus,
+      title: actualTitle,
+      documentTitle: actualDocumentTitle,
+      code
+    });
+  }, [
+    absolutePath,
+    actualDocumentTitle,
+    actualTitle,
+    code,
+    deferredDisplayStatus,
+    deferredIssuesToDisplay,
+    exists,
+    store,
+    title
+  ]);
+  useRegisterController(controller);
+  useRegisterLabel(
+    absolutePath,
+    /* @__PURE__ */ jsx(CurrentPath, { path: absolutePath, children: typeof issuesPanelLabel === "function" ? deferredValue === void 0 ? null : issuesPanelLabel(deferredValue) : issuesPanelLabel || actualTitle })
+  );
+  return null;
+}
 const FormPages = forwardRef(
   function FormPages2({
     path,
@@ -3794,6 +3954,7 @@ const FormPages = forwardRef(
     activePage,
     onActivePageChange,
     className,
+    children,
     ...otherProps
   }, forwardedRef) {
     const prefix = usePrefix();
@@ -3801,6 +3962,15 @@ const FormPages = forwardRef(
     const formManager = useFormManager();
     const absolutePath = useResolvedPath(path);
     const isLargeScreen = useMediaBreakpointUp("sm");
+    pages ??= Children.toArray(children).filter(
+      (child) => isValidElement(child) && child.type === FormPage
+    ).map((child) => ({
+      path: child.props.path,
+      title: child.props.title,
+      documentTitle: child.props.documentTitle,
+      code: child.props.code,
+      issuesPanelLabel: child.props.issuesPanelLabel
+    }));
     const resolvedPages = useMemo(
       () => pages.map((page) => ({
         ...page,
@@ -3865,66 +4035,13 @@ const FormPages = forwardRef(
           className: cx(prefix("form-pages"), className),
           "data-navigation-mode": isLargeScreen ? "sidebar" : "select",
           ...otherProps,
-          ref: combinedFormPagesRef
+          ref: combinedFormPagesRef,
+          children
         }
       )
     ] }) });
   }
 );
-function FormPageRegistrar({
-  path,
-  title,
-  documentTitle,
-  code,
-  issuesPanelLabel
-}) {
-  const store = useFormPagesContext();
-  const controller = useController(
-    path.append(AbsolutePathFragment.RecursiveWildcard),
-    { enabled: !useFormIsLoading() }
-  );
-  const absolutePath = controller.usePath();
-  const exists = controller.useState(
-    (state) => state.initialized && state.exists
-  );
-  const deferredValue = useDeferredValue(controller.useValue());
-  const deferredIssuesToDisplay = useDeferredValue(
-    controller.useState((state) => state.touched ? state.issues : [], {
-      equalityFn: shallow
-    })
-  );
-  const deferredDisplayStatus = useDeferredValue(controller.useDisplayStatus());
-  const actualTitle = typeof title === "function" ? deferredValue === void 0 ? null : title(deferredValue) : title;
-  const actualDocumentTitle = typeof documentTitle === "function" ? deferredValue === void 0 ? null : documentTitle(deferredValue) : documentTitle === void 0 ? actualTitle === null || typeof actualTitle === "string" ? actualTitle : void 0 : documentTitle;
-  useEffect(() => {
-    const { registerPageState } = store.getState().actions;
-    registerPageState(absolutePath, {
-      exists,
-      path: absolutePath,
-      deferredIssuesToDisplay,
-      deferredDisplayStatus,
-      title: actualTitle,
-      documentTitle: actualDocumentTitle,
-      code
-    });
-  }, [
-    absolutePath,
-    actualDocumentTitle,
-    actualTitle,
-    code,
-    deferredDisplayStatus,
-    deferredIssuesToDisplay,
-    exists,
-    store,
-    title
-  ]);
-  useRegisterController(controller);
-  useRegisterLabel(
-    absolutePath,
-    /* @__PURE__ */ jsx(CurrentPath, { path: absolutePath, children: typeof issuesPanelLabel === "function" ? deferredValue === void 0 ? null : issuesPanelLabel(deferredValue) : issuesPanelLabel || actualTitle })
-  );
-  return null;
-}
 function FormPagesSelectOption({ path }) {
   const prefix = usePrefix();
   const disabled = useFormPageState(path, (state) => !state?.exists);
@@ -4168,9 +4285,12 @@ function useCreateFormStepperContext({
   preventFocusOnError
 }) {
   const focus = useFocus();
-  const setActivePath = useSetActivePath();
+  const setLatestInteraction = useSetLatestInteraction();
+  const { activePath, onActivePathChange } = useActivePathContext();
+  activeStep ??= activePath;
   const latest = useLatestValues({
     formManager,
+    onActivePathChange,
     onActiveStepChange,
     onStepValidation,
     skipStepValidationOnForwardNavigation,
@@ -4208,15 +4328,16 @@ function useCreateFormStepperContext({
               startTransition(() => {
                 set({ activeStep: step });
                 if (step != null) {
-                  setActivePath(step.path);
+                  setLatestInteraction(step.path);
+                }
+                latest.onActivePathChange(step?.path ?? null);
+                if (callListener) {
+                  latest.onActiveStepChange?.(
+                    step?.path ?? null,
+                    step?.index ?? -1
+                  );
                 }
               });
-              if (callListener) {
-                latest.onActiveStepChange?.(
-                  step?.path ?? null,
-                  step?.index ?? -1
-                );
-              }
             }
           },
           updateActiveStep: () => {
@@ -4400,6 +4521,50 @@ const FormStepList = forwardRef(function FormStepperSidebar({ className, ...othe
     }
   );
 });
+function FormStepRegistrar({
+  index,
+  path,
+  title,
+  documentTitle,
+  issuesPanelLabel
+}) {
+  const store = useFormStepperContext();
+  const controller = useController(path, { enabled: !useFormIsLoading() });
+  const absolutePath = controller.usePath();
+  const exists = controller.useState(
+    (state) => state.initialized && state.exists
+  );
+  const deferredValue = useDeferredValue(controller.useValue());
+  const deferredDisplayStatus = useDeferredValue(controller.useDisplayStatus());
+  const actualTitle = typeof title === "function" ? deferredValue === void 0 ? null : title(deferredValue) : title;
+  const actualDocumentTitle = typeof documentTitle === "function" ? deferredValue === void 0 ? null : documentTitle(deferredValue) : documentTitle === void 0 ? actualTitle === null || typeof actualTitle === "string" ? actualTitle : void 0 : documentTitle;
+  useEffect(() => {
+    const { registerStepState } = store.getState().actions;
+    registerStepState(absolutePath, {
+      exists,
+      path: absolutePath,
+      deferredDisplayStatus,
+      index,
+      title: actualTitle,
+      documentTitle: actualDocumentTitle
+    });
+  }, [
+    absolutePath,
+    actualDocumentTitle,
+    actualTitle,
+    deferredDisplayStatus,
+    exists,
+    index,
+    store,
+    title
+  ]);
+  useRegisterController(controller);
+  useRegisterLabel(
+    absolutePath,
+    /* @__PURE__ */ jsx(CurrentPath, { path: absolutePath, children: typeof issuesPanelLabel === "function" ? deferredValue === void 0 ? null : issuesPanelLabel(deferredValue) : issuesPanelLabel || actualTitle })
+  );
+  return null;
+}
 const FormStepper = forwardRef(function FormStepper2({
   path,
   steps,
@@ -4470,50 +4635,6 @@ const FormStepper = forwardRef(function FormStepper2({
     )
   ] }) });
 });
-function FormStepRegistrar({
-  index,
-  path,
-  title,
-  documentTitle,
-  issuesPanelLabel
-}) {
-  const store = useFormStepperContext();
-  const controller = useController(path, { enabled: !useFormIsLoading() });
-  const absolutePath = controller.usePath();
-  const exists = controller.useState(
-    (state) => state.initialized && state.exists
-  );
-  const deferredValue = useDeferredValue(controller.useValue());
-  const deferredDisplayStatus = useDeferredValue(controller.useDisplayStatus());
-  const actualTitle = typeof title === "function" ? deferredValue === void 0 ? null : title(deferredValue) : title;
-  const actualDocumentTitle = typeof documentTitle === "function" ? deferredValue === void 0 ? null : documentTitle(deferredValue) : documentTitle === void 0 ? actualTitle === null || typeof actualTitle === "string" ? actualTitle : void 0 : documentTitle;
-  useEffect(() => {
-    const { registerStepState } = store.getState().actions;
-    registerStepState(absolutePath, {
-      exists,
-      path: absolutePath,
-      deferredDisplayStatus,
-      index,
-      title: actualTitle,
-      documentTitle: actualDocumentTitle
-    });
-  }, [
-    absolutePath,
-    actualDocumentTitle,
-    actualTitle,
-    deferredDisplayStatus,
-    exists,
-    index,
-    store,
-    title
-  ]);
-  useRegisterController(controller);
-  useRegisterLabel(
-    absolutePath,
-    /* @__PURE__ */ jsx(CurrentPath, { path: absolutePath, children: typeof issuesPanelLabel === "function" ? deferredValue === void 0 ? null : issuesPanelLabel(deferredValue) : issuesPanelLabel || actualTitle })
-  );
-  return null;
-}
 const IssueAlert = forwardRef(function IssueMessage2({ path, code, children, ...otherProps }, forwardedRef) {
   const { info } = useIssuesTracker(path);
   const relevantIssues = (info?.flatMap((info2) => info2.issues) ?? []).filter(
@@ -5052,7 +5173,7 @@ const IssuesPanel = forwardRef(function ValidationPanel({
     issuesOrderCompareFn
   });
   useReportValidationFailures(issuesTrackerResult.info);
-  const activePath = useActivePath();
+  const latestInteraction = useLatestInteraction();
   const deferredIssuesTrackerResult = useDeferredValue(issuesTrackerResult);
   const { info } = deferredIssuesTrackerResult;
   const nPages = info?.length ?? 0;
@@ -5119,7 +5240,7 @@ const IssuesPanel = forwardRef(function ValidationPanel({
         goToPath(
           mostRelevantIssuePath(
             issuesTrackerResult.info,
-            activePath,
+            latestInteraction,
             formSchema,
             issuesOrderCompareFnRef.current
           )
@@ -5128,11 +5249,11 @@ const IssuesPanel = forwardRef(function ValidationPanel({
       setStarting(false);
     }
   }, [
-    activePath,
     formSchema,
     goToPath,
     issuesTrackerResult.info,
     issuesTrackerResult.initialized,
+    latestInteraction,
     starting
   ]);
   const listeners = useLatestValues({ onOpenChange });
@@ -5263,21 +5384,21 @@ const IssuesPanel = forwardRef(function ValidationPanel({
     }
   );
 });
-function mostRelevantIssuePath(info, activePath, formSchema, issuesOrderCompareFn) {
+function mostRelevantIssuePath(info, latestInteraction, formSchema, issuesOrderCompareFn) {
   if (issuesOrderCompareFn) {
     for (const infoIssues of info) {
-      if (activePath.equals(infoIssues.path)) {
-        return activePath;
+      if (latestInteraction.equals(infoIssues.path)) {
+        return latestInteraction;
       }
     }
   }
   let indexOfInfoPathGteActivePath = info.findIndex(
-    (issuesInfo) => (issuesOrderCompareFn?.(issuesInfo.path, activePath) || compareSchemaPaths(formSchema, issuesInfo.path, activePath)) >= 0
+    (issuesInfo) => (issuesOrderCompareFn?.(issuesInfo.path, latestInteraction) || compareSchemaPaths(formSchema, issuesInfo.path, latestInteraction)) >= 0
   );
   if (indexOfInfoPathGteActivePath === -1) {
     indexOfInfoPathGteActivePath = info.length;
   }
-  let curPath = activePath;
+  let curPath = latestInteraction;
   while (!curPath.isRoot) {
     const curPathWithDescendants = curPath.append(
       AbsolutePathFragment.RecursiveWildcard
@@ -6745,10 +6866,10 @@ const TableControlAddRowTrigger = forwardRef(function TableControlAddRowTrigger2
   const { controller, size, maxRows } = useTableControlContext();
   const controlIsDisabled = useFormIsDisabled();
   const controlIsReadOnly = useFormIsReadOnly();
-  const setActivePath = useSetActivePath();
+  const setLatestInteraction = useSetLatestInteraction();
   const handleClick = async () => {
     await controller.addRow();
-    setActivePath(controller.getState().path);
+    setLatestInteraction(controller.getState().path);
     onRowAdded?.();
   };
   const shouldDisable = controller.useState(
@@ -6800,7 +6921,7 @@ const TableControlRemoveRowTrigger = forwardRef(function TableControlRemoveRowTr
   const { getState, index, useInitialized, useExists } = useTableControlRowContext();
   const initialized = useInitialized();
   const exists = useExists();
-  const setActivePath = useSetActivePath();
+  const setLatestInteraction = useSetLatestInteraction();
   const [removing, setRemoving] = useState(false);
   const handleClick = async () => {
     const { path, dirty } = getState();
@@ -6815,7 +6936,7 @@ const TableControlRemoveRowTrigger = forwardRef(function TableControlRemoveRowTr
     setRemoving(true);
     onConfirmRowRemoval?.();
     await controller.removeRow(path);
-    setActivePath(controller.getState().path);
+    setLatestInteraction(controller.getState().path);
     onRowRemoved?.();
   };
   const As = Slot;
@@ -7103,7 +7224,10 @@ function ValidateAction({
   );
 }
 export {
+  ActivePathContext,
+  ActivePathProvider,
   Annex,
+  AnnexRegistrar,
   Annexes,
   AnnexesManager,
   CheckboxControl,
@@ -7116,10 +7240,12 @@ export {
   FormAppIssueMessages,
   FormAppStatus,
   FormPage,
+  FormPageRegistrar,
   FormPages,
   FormPagesNavigation,
   FormStepContent,
   FormStepList,
+  FormStepRegistrar,
   FormStepper,
   IssueAlert,
   IssueMessages,
@@ -7133,6 +7259,7 @@ export {
   PrefixSuffixContext,
   PrefixSuffixProvider,
   RadioGroupControl,
+  RepetitiveAnnexRegistrar,
   SaveAction,
   SelectControl,
   SelectMultipleControl,
@@ -7158,6 +7285,7 @@ export {
   tableControlActionsColumn,
   tableControlIndexColumn,
   useActiveIssuesPanelBreadcrumb,
+  useActivePathContext,
   useControlIssues,
   useDisplayIssueCodesInIssueMessages,
   useFocus,