dara-core 1.21.23__py3-none-any.whl → 1.21.24__py3-none-any.whl

dara/core/umd/dara.core.umd.cjs

@@ -5561,6 +5561,9 @@
       teal: "#0790AE",
       orange: "#FF8F80",
       plum: "#BA3C8B",
+      carrot: "#E48015",
+      kale: "#277357",
+      chestnut: "#974741",
       error: "#DA6087",
       errorHover: "#D14975",
       errorDown: "#C33462",
@@ -5609,6 +5612,9 @@
       teal: "#00849F",
       orange: "#DB6D5E",
       plum: "#AB2178",
+      carrot: "#E48015",
+      kale: "#277357",
+      chestnut: "#974741",
       error: "#CA456F",
       errorHover: "#D1567E",
       errorDown: "#D7688B",
@@ -38514,23 +38520,41 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     svg:not(:last-of-type) {
         margin-right: 0.7rem;
     }
+`;
+  const SingleActionWrapper = styled(ActionWrapper)`
+    cursor: pointer;
+
+    position: absolute;
+    inset: 0;
+
+    width: 100%;
+    height: 100%;
 `;
   function ActionCell(props) {
     if (!props.column.actions) {
       throw new Error("Must pass an array of actions to the column def when using the ActionCell");
     }
+    const onClick = (e2, actionId) => {
+      var _a;
+      e2.stopPropagation();
+      (_a = props.onAction) === null || _a === void 0 ? void 0 : _a.call(props, actionId, props.row.original);
+    };
+    if (props.column.actions.length === 1) {
+      const action = props.column.actions[0];
+      const Icon2 = action.getIcon ? action.getIcon(props.row.original) : action.icon;
+      if (Icon2 === void 0) {
+        return;
+      }
+      const label = action.getLabel ? action.getLabel(props.row.original) : action.label;
+      return jsxRuntimeExports.jsx(SingleActionWrapper, { className: "table-action-cell", onClick: (e2) => onClick(e2, action.id), children: jsxRuntimeExports.jsx(Icon2, { asButton: true, title: label }, action.label) });
+    }
     return jsxRuntimeExports.jsx(ActionWrapper, { className: "table-action-cell", children: props.column.actions.map((action) => {
       const Icon2 = action.getIcon ? action.getIcon(props.row.original) : action.icon;
       if (Icon2 === void 0) {
         return;
       }
       const label = action.getLabel ? action.getLabel(props.row.original) : action.label;
-      const onClick = (e2) => {
-        var _a;
-        e2.stopPropagation();
-        (_a = props.onAction) === null || _a === void 0 ? void 0 : _a.call(props, action.id, props.row.original);
-      };
-      return jsxRuntimeExports.jsx(Icon2, { asButton: true, onClick, title: label }, action.label);
+      return jsxRuntimeExports.jsx(Icon2, { asButton: true, onClick: (e2) => onClick(e2, action.id), title: label }, action.label);
     }) });
   }
   function DatetimeCell(fmt = "yyyy-MM-dd HH:mm") {
@@ -50556,9 +50580,23 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     url.searchParams.set("token", sessionToken);
     return new WebSocketClient(socketUrl, sessionToken, liveReload);
   }
+  function createRouteMatches(uiMatches, definitionMap) {
+    return uiMatches.filter((m) => definitionMap.has(m.id)).map((m) => {
+      const routeDef = definitionMap.get(m.id);
+      return {
+        id: m.id,
+        pathname: m.pathname,
+        params: m.params,
+        definition: routeDef
+      };
+    });
+  }
   function isPathParamStore(store2) {
     return store2.__typename === "_PathParamStore";
   }
+  function isRouteMatchStore(store2) {
+    return store2.__typename === "_RouteMatchStore";
+  }
   var ComponentType = /* @__PURE__ */ ((ComponentType2) => {
     ComponentType2["JS"] = "js";
     ComponentType2["PY"] = "py";
@@ -51752,7 +51790,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       (match2, idx) => idx === pathMatches.length - 1 ? match2.pathname : match2.pathnameBase
     );
   }
-  function resolveTo(toArg, routePathnames, locationPathname, isPathRelative = false) {
+  function resolveTo$1(toArg, routePathnames, locationPathname, isPathRelative = false) {
     let to;
     if (typeof toArg === "string") {
       to = parsePath(toArg);
@@ -54289,7 +54327,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       contextualMatches = matches2;
       activeRouteMatch = matches2[matches2.length - 1];
     }
-    let path = resolveTo(
+    let path = resolveTo$1(
       to ? to : ".",
       getResolveToMatches(contextualMatches),
       stripBasename$1(location2.pathname, basename) || location2.pathname,
@@ -55931,7 +55969,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
           navigator2.go(to);
           return;
         }
-        let path = resolveTo(
+        let path = resolveTo$1(
           to,
           JSON.parse(routePathnamesJson),
           locationPathname,
@@ -55977,7 +56015,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     let { pathname: locationPathname } = useLocation();
     let routePathnamesJson = JSON.stringify(getResolveToMatches(matches2));
     return React__namespace.useMemo(
-      () => resolveTo(
+      () => resolveTo$1(
         to,
         JSON.parse(routePathnamesJson),
         locationPathname,
@@ -56832,7 +56870,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     let { matches: matches2 } = React__namespace.useContext(RouteContext);
     let { pathname: locationPathname } = useLocation();
     let navigate = useNavigate();
-    let path = resolveTo(
+    let path = resolveTo$1(
       to,
       getResolveToMatches(matches2),
       locationPathname,
@@ -64149,16 +64187,18 @@ ${String(error)}`;
     routeDefinitions,
     routeObjects,
     routeDefMap,
-    defaultPath
+    defaultPath,
+    routeMatches
   }) {
     const value = React__namespace.useMemo(
       () => ({
         routeDefinitions,
         routeObjects,
         routeDefMap,
-        defaultPath
+        defaultPath,
+        routeMatches
       }),
-      [routeDefinitions, routeObjects, routeDefMap, defaultPath]
+      [routeDefinitions, routeObjects, routeDefMap, defaultPath, routeMatches]
     );
     return /* @__PURE__ */ React__namespace.createElement(RouterContext.Provider, { value }, children);
   }
@@ -64181,179 +64221,19 @@ ${String(error)}`;
   function useSessionToken() {
     return React__namespace.useSyncExternalStore(onTokenChange, getSessionToken);
   }
-  function cleanSessionCache(sessionToken) {
-    for (const storage of [sessionStorage, localStorage]) {
-      const keys = Object.keys(storage);
-      keys.forEach((key) => {
-        if (key.startsWith("dara-session") && !key.startsWith(`dara-session-${sessionToken}`)) {
-          storage.removeItem(key);
-        }
-      });
-    }
-  }
-  function isJsComponent(component) {
-    return component.type === ComponentType.JS;
-  }
-  var isNull_1;
-  var hasRequiredIsNull;
-  function requireIsNull() {
-    if (hasRequiredIsNull) return isNull_1;
-    hasRequiredIsNull = 1;
-    function isNull2(value) {
-      return value === null;
-    }
-    isNull_1 = isNull2;
-    return isNull_1;
-  }
-  var isNullExports = requireIsNull();
-  const isNull = /* @__PURE__ */ getDefaultExportFromCjs(isNullExports);
-  var negate_1;
-  var hasRequiredNegate;
-  function requireNegate() {
-    if (hasRequiredNegate) return negate_1;
-    hasRequiredNegate = 1;
-    var FUNC_ERROR_TEXT = "Expected a function";
-    function negate(predicate) {
-      if (typeof predicate != "function") {
-        throw new TypeError(FUNC_ERROR_TEXT);
-      }
-      return function() {
-        var args = arguments;
-        switch (args.length) {
-          case 0:
-            return !predicate.call(this);
-          case 1:
-            return !predicate.call(this, args[0]);
-          case 2:
-            return !predicate.call(this, args[0], args[1]);
-          case 3:
-            return !predicate.call(this, args[0], args[1], args[2]);
-        }
-        return !predicate.apply(this, args);
-      };
-    }
-    negate_1 = negate;
-    return negate_1;
-  }
-  var _baseSet;
-  var hasRequired_baseSet;
-  function require_baseSet() {
-    if (hasRequired_baseSet) return _baseSet;
-    hasRequired_baseSet = 1;
-    var assignValue = require_assignValue(), castPath = require_castPath(), isIndex = require_isIndex(), isObject2 = requireIsObject(), toKey = require_toKey();
-    function baseSet(object2, path, value, customizer) {
-      if (!isObject2(object2)) {
-        return object2;
-      }
-      path = castPath(path, object2);
-      var index2 = -1, length = path.length, lastIndex = length - 1, nested = object2;
-      while (nested != null && ++index2 < length) {
-        var key = toKey(path[index2]), newValue = value;
-        if (key === "__proto__" || key === "constructor" || key === "prototype") {
-          return object2;
-        }
-        if (index2 != lastIndex) {
-          var objValue = nested[key];
-          newValue = customizer ? customizer(objValue, key, nested) : void 0;
-          if (newValue === void 0) {
-            newValue = isObject2(objValue) ? objValue : isIndex(path[index2 + 1]) ? [] : {};
-          }
-        }
-        assignValue(nested, key, newValue);
-        nested = nested[key];
-      }
-      return object2;
-    }
-    _baseSet = baseSet;
-    return _baseSet;
-  }
-  var _basePickBy;
-  var hasRequired_basePickBy;
-  function require_basePickBy() {
-    if (hasRequired_basePickBy) return _basePickBy;
-    hasRequired_basePickBy = 1;
-    var baseGet = require_baseGet(), baseSet = require_baseSet(), castPath = require_castPath();
-    function basePickBy(object2, paths, predicate) {
-      var index2 = -1, length = paths.length, result = {};
-      while (++index2 < length) {
-        var path = paths[index2], value = baseGet(object2, path);
-        if (predicate(value, path)) {
-          baseSet(result, castPath(path, object2), value);
-        }
-      }
-      return result;
-    }
-    _basePickBy = basePickBy;
-    return _basePickBy;
-  }
-  var pickBy_1;
-  var hasRequiredPickBy;
-  function requirePickBy() {
-    if (hasRequiredPickBy) return pickBy_1;
-    hasRequiredPickBy = 1;
-    var arrayMap = require_arrayMap(), baseIteratee = require_baseIteratee(), basePickBy = require_basePickBy(), getAllKeysIn = require_getAllKeysIn();
-    function pickBy(object2, predicate) {
-      if (object2 == null) {
-        return {};
+  const BaseRawCssInject = styled.div`
+    ${(props) => props.$rawCss}
+`;
+  function injectCss(component) {
+    if (typeof component === "string") {
+      if (component === "div") {
+        return BaseRawCssInject;
       }
-      var props = arrayMap(getAllKeysIn(object2), function(prop) {
-        return [prop];
-      });
-      predicate = baseIteratee(predicate);
-      return basePickBy(object2, props, function(value, path) {
-        return predicate(value, path[0]);
-      });
-    }
-    pickBy_1 = pickBy;
-    return pickBy_1;
-  }
-  var omitBy_1;
-  var hasRequiredOmitBy;
-  function requireOmitBy() {
-    if (hasRequiredOmitBy) return omitBy_1;
-    hasRequiredOmitBy = 1;
-    var baseIteratee = require_baseIteratee(), negate = requireNegate(), pickBy = requirePickBy();
-    function omitBy2(object2, predicate) {
-      return pickBy(object2, negate(baseIteratee(predicate)));
-    }
-    omitBy_1 = omitBy2;
-    return omitBy_1;
-  }
-  var omitByExports = requireOmitBy();
-  const omitBy = /* @__PURE__ */ getDefaultExportFromCjs(omitByExports);
-  function isTheme(configTheme) {
-    return typeof configTheme !== "string";
-  }
-  function resolveTheme(configTheme, baseTheme) {
-    if (!configTheme || configTheme === "light") {
-      return theme;
-    }
-    if (configTheme === "dark") {
-      return darkTheme;
-    }
-    if (isTheme(configTheme)) {
-      const original = baseTheme === "dark" ? darkTheme : theme;
-      return {
-        // Here we spread both first to pick up anything missing from the default theme and anything new/extra in
-        // the new theme.
-        ...original,
-        ...omitBy(configTheme, isNull),
-        colors: {
-          ...original.colors,
-          ...omitBy(configTheme.colors, isNull)
-        },
-        font: {
-          ...original.font,
-          ...omitBy(configTheme.font, isNull)
-        },
-        shadow: {
-          ...original.shadow,
-          ...omitBy(configTheme.shadow, isNull)
-        }
-      };
+      return BaseRawCssInject.withComponent(component);
     }
-    console.warn("No valid theme was found. Defaulting to light theme.");
-    return theme;
+    return styled(component)`
+        ${(props) => props.$rawCss}
+    `;
   }
   function useDeferLoadable(loadable, suspendOverride) {
     const { suspend: ctxSuspend } = useFallbackCtx();
@@ -64392,64 +64272,6 @@ ${String(error)}`;
     }
     return availableState;
   }
-  function useInterval(callback, delay2) {
-    React$1.useEffect(
-      () => {
-        if (delay2) {
-          const id = setInterval(callback, delay2 * 1e3);
-          return () => clearInterval(id);
-        }
-      },
-      useDeepCompare([delay2, callback])
-    );
-  }
-  function usePrevious$1(value, initialValue) {
-    const ref = React$1.useRef(initialValue);
-    React$1.useEffect(() => {
-      ref.current = value;
-    });
-    return ref.current;
-  }
-  function useWindowTitle(pageTitle, enabled = true) {
-    const config2 = useConfig();
-    React$1.useEffect(() => {
-      if (!enabled) {
-        return;
-      }
-      if (!pageTitle) {
-        document.title = config2.title;
-        return;
-      }
-      document.title = `${config2.title} - ${pageTitle}`;
-    }, [config2, config2.title, pageTitle, enabled]);
-  }
-  const BaseRawCssInject = styled.div`
-    ${(props) => props.$rawCss}
-`;
-  function injectCss(component) {
-    if (typeof component === "string") {
-      if (component === "div") {
-        return BaseRawCssInject;
-      }
-      return BaseRawCssInject.withComponent(component);
-    }
-    return styled(component)`
-        ${(props) => props.$rawCss}
-    `;
-  }
-  const Icon = injectCss("i");
-  function getIcon(icon) {
-    let iconClasses = icon;
-    if (typeof icon === "string" && !icon.includes("fa-")) {
-      const inferredIconName = icon.replace(/([A-Z])/g, " $1").trim().toLowerCase().split(" ").join("-");
-      iconClasses = `fa-solid fa-${inferredIconName}`;
-      console.warn(
-        `Invalid fontawesome class string "${icon}" provided to getIcon(). This behaviour is deprecated and will be removed in the next version, please use "dara_core.css.get_icon" method. 
-Inferred class string: "${iconClasses}."`
-      );
-    }
-    return (props) => /* @__PURE__ */ React.createElement(Icon, { ...props, className: `${String(props.className ?? "")} ${iconClasses}` });
-  }
   class EventBus {
     #events$ = new Subject();
     #parentBus = null;
@@ -69296,14 +69118,14 @@ Inferred class string: "${iconClasses}."`
     useEffect: useEffect$2,
     useRef: useRef$2
   } = React$1;
-  function usePrevious(value) {
+  function usePrevious$1(value) {
     const ref = useRef$2();
     useEffect$2(() => {
       ref.current = value;
     });
     return ref.current;
   }
-  var Recoil_usePrevious = usePrevious;
+  var Recoil_usePrevious = usePrevious$1;
   const {
     DefaultValue: DefaultValue$2
   } = Recoil_index;
@@ -69549,6 +69371,38 @@ Inferred class string: "${iconClasses}."`
     );
     return /* @__PURE__ */ React$1.createElement(RecoilSync_index_1, { listen: listenToStoreChanges, read: getStoreValue, storeKey: "ServerVariable" }, children);
   }
+  var _baseSet;
+  var hasRequired_baseSet;
+  function require_baseSet() {
+    if (hasRequired_baseSet) return _baseSet;
+    hasRequired_baseSet = 1;
+    var assignValue = require_assignValue(), castPath = require_castPath(), isIndex = require_isIndex(), isObject2 = requireIsObject(), toKey = require_toKey();
+    function baseSet(object2, path, value, customizer) {
+      if (!isObject2(object2)) {
+        return object2;
+      }
+      path = castPath(path, object2);
+      var index2 = -1, length = path.length, lastIndex = length - 1, nested = object2;
+      while (nested != null && ++index2 < length) {
+        var key = toKey(path[index2]), newValue = value;
+        if (key === "__proto__" || key === "constructor" || key === "prototype") {
+          return object2;
+        }
+        if (index2 != lastIndex) {
+          var objValue = nested[key];
+          newValue = customizer ? customizer(objValue, key, nested) : void 0;
+          if (newValue === void 0) {
+            newValue = isObject2(objValue) ? objValue : isIndex(path[index2 + 1]) ? [] : {};
+          }
+        }
+        assignValue(nested, key, newValue);
+        nested = nested[key];
+      }
+      return object2;
+    }
+    _baseSet = baseSet;
+    return _baseSet;
+  }
   var set_1;
   var hasRequiredSet;
   function requireSet() {
@@ -69563,6 +69417,17 @@ Inferred class string: "${iconClasses}."`
   }
   var setExports = requireSet();
   const set = /* @__PURE__ */ getDefaultExportFromCjs(setExports);
+  function useInterval(callback, delay2) {
+    React$1.useEffect(
+      () => {
+        if (delay2) {
+          const id = setInterval(callback, delay2 * 1e3);
+          return () => clearInterval(id);
+        }
+      },
+      useDeepCompare([delay2, callback])
+    );
+  }
   class DeferredImpl {
     #resolve;
     #reject;
@@ -70926,376 +70791,222 @@ Inferred class string: "${iconClasses}."`
     escapePathComponent,
     unescapePathComponent
   });
-  const STORE_EXTRAS_MAP = /* @__PURE__ */ new Map();
-  const STORE_VARIABLE_MAP = /* @__PURE__ */ new Map();
-  const STORE_SEQUENCE_MAP = /* @__PURE__ */ new Map();
-  const STORE_LATEST_VALUE_MAP = /* @__PURE__ */ new Map();
-  function BackendStoreSync({ children }) {
-    const { client: client2 } = React__namespace.useContext(websocketCtx);
-    const getStoreValue = React__namespace.useCallback(async (itemKey) => {
-      const serializableExtras = STORE_EXTRAS_MAP.get(itemKey);
-      const response = await request(`/api/core/store/${itemKey}`, {}, serializableExtras?.extras ?? {});
-      await handleAuthErrors(response, true);
-      await validateResponse(response, `Failed to fetch the store value for key: ${itemKey}`);
-      const { value, sequence_number } = await response.json();
-      STORE_LATEST_VALUE_MAP.set(itemKey, value);
-      STORE_SEQUENCE_MAP.set(itemKey, sequence_number);
-      return value;
-    }, []);
-    const syncStoreValues = React__namespace.useCallback(
-      async ({ diff }) => {
-        const extrasMap = /* @__PURE__ */ new Map();
-        Array.from(diff.entries()).filter(
-          ([itemKey, value]) => !STORE_LATEST_VALUE_MAP.has(itemKey) || STORE_LATEST_VALUE_MAP.get(itemKey) !== value
-        ).forEach(([itemKey, value]) => {
-          STORE_LATEST_VALUE_MAP.set(itemKey, value);
-          const extras = STORE_EXTRAS_MAP.get(itemKey);
-          if (!extrasMap.has(extras)) {
-            extrasMap.set(extras, {});
-          }
-          extrasMap.get(extras)[itemKey] = value;
-        });
-        async function sendRequest(serializableExtras, storeDiff) {
-          const response = await request(
-            `/api/core/store`,
-            {
-              body: JSON.stringify({
-                values: storeDiff,
-                ws_channel: await client2.getChannel()
-              }),
-              method: "POST"
-            },
-            serializableExtras.extras
-          );
-          await handleAuthErrors(response, true);
-          await validateResponse(response, `Failed to sync the store values`);
-        }
-        await Promise.allSettled(
-          Array.from(extrasMap.entries()).map(
-            ([serializableExtras, storeDiff]) => sendRequest(serializableExtras, storeDiff)
-          )
-        );
-      },
-      [client2]
-    );
-    const applyPatchesToAtoms = Recoil_index_31(
-      ({ snapshot, set: set2 }) => async (storeUid, patches, sequenceNumber) => {
-        const expectedSequence = STORE_SEQUENCE_MAP.get(storeUid) || 0;
-        if (sequenceNumber !== expectedSequence + 1) {
-          console.warn(
-            `Sequence number mismatch for store ${storeUid}. Expected: ${expectedSequence + 1}, Got: ${sequenceNumber}. Rejecting patch.`
-          );
-          return;
-        }
-        STORE_SEQUENCE_MAP.set(storeUid, sequenceNumber);
-        const variableUids = STORE_VARIABLE_MAP.get(storeUid);
-        if (!variableUids) {
-          return;
-        }
-        const atomsToUpdate = [];
-        for (const variableUid of variableUids) {
-          const directAtom = atomRegistry.get(variableUid);
-          if (directAtom) {
-            atomsToUpdate.push({ atom: directAtom, variableUid });
-            continue;
-          }
-          const atomFamily2 = atomFamilyRegistry.get(variableUid);
-          if (atomFamily2) {
-            const familyMembers = atomFamilyMembersRegistry.get(atomFamily2);
-            if (familyMembers) {
-              for (const [, atomInstance] of familyMembers) {
-                atomsToUpdate.push({ atom: atomInstance, variableUid });
-              }
-            }
-          }
-        }
-        const currentValues = await Promise.all(
-          atomsToUpdate.map(async ({ atom: atom2, variableUid }) => {
-            try {
-              return {
-                atom: atom2,
-                variableUid,
-                currentValue: await snapshot.getPromise(atom2),
-                error: null
-              };
-            } catch (error) {
-              return {
-                atom: atom2,
-                variableUid,
-                currentValue: null,
-                error
-              };
-            }
-          })
-        );
-        const applyPatchToValue = (currentValue, variableUid) => {
-          try {
-            return applyPatch(currentValue, patches, false, false).newDocument;
-          } catch (error) {
-            console.warn(`Failed to apply patch to atom ${variableUid}:`, error);
-            return currentValue;
-          }
-        };
-        currentValues.forEach(({ atom: atom2, variableUid, currentValue, error }) => {
-          if (error) {
-            console.warn(`Failed to read current value for atom ${variableUid}:`, error);
-            return;
-          }
-          const patchedValue = applyPatchToValue(currentValue, variableUid);
-          set2(atom2, patchedValue);
-          STORE_LATEST_VALUE_MAP.set(storeUid, patchedValue);
-        });
-      },
-      []
-    );
-    const listenToStoreChanges = React__namespace.useCallback(
-      ({ updateItem }) => {
-        if (!client2) {
-          return;
+  function cleanSessionCache(sessionToken) {
+    for (const storage of [sessionStorage, localStorage]) {
+      const keys = Object.keys(storage);
+      keys.forEach((key) => {
+        if (key.startsWith("dara-session") && !key.startsWith(`dara-session-${sessionToken}`)) {
+          storage.removeItem(key);
         }
-        const valueSub = client2.backendStoreMessages$().subscribe((message) => {
-          STORE_SEQUENCE_MAP.set(message.store_uid, message.sequence_number);
-          updateItem(message.store_uid, message.value);
-          STORE_LATEST_VALUE_MAP.set(message.store_uid, message.value);
-        });
-        const patchSub = client2.backendStorePatchMessages$().subscribe((message) => {
-          applyPatchesToAtoms(message.store_uid, message.patches, message.sequence_number);
-        });
-        return () => {
-          valueSub.unsubscribe();
-          patchSub.unsubscribe();
-        };
-      },
-      [client2, applyPatchesToAtoms]
-    );
-    return /* @__PURE__ */ React__namespace.createElement(RecoilSync_index_1, { listen: listenToStoreChanges, read: getStoreValue, storeKey: "BackendStore", write: syncStoreValues }, children);
+      });
+    }
   }
-  function backendStoreEffect(variable, requestExtras) {
-    STORE_EXTRAS_MAP.set(variable.store.uid, requestExtras);
-    if (!STORE_VARIABLE_MAP.has(variable.store.uid)) {
-      STORE_VARIABLE_MAP.set(variable.store.uid, /* @__PURE__ */ new Set());
+  function isJsComponent(component) {
+    return component.type === ComponentType.JS;
+  }
+  var isNull_1;
+  var hasRequiredIsNull;
+  function requireIsNull() {
+    if (hasRequiredIsNull) return isNull_1;
+    hasRequiredIsNull = 1;
+    function isNull2(value) {
+      return value === null;
     }
-    STORE_VARIABLE_MAP.get(variable.store.uid).add(variable.uid);
-    return RecoilSync_index_2({
-      /** Use store uid as the unique identifier */
-      itemKey: variable.store.uid,
-      refine: Refine_index_6(),
-      storeKey: "BackendStore",
-      write({ write: write2 }, newValue) {
-        if (variable.store.readonly) {
-          return;
+    isNull_1 = isNull2;
+    return isNull_1;
+  }
+  var isNullExports = requireIsNull();
+  const isNull = /* @__PURE__ */ getDefaultExportFromCjs(isNullExports);
+  var negate_1;
+  var hasRequiredNegate;
+  function requireNegate() {
+    if (hasRequiredNegate) return negate_1;
+    hasRequiredNegate = 1;
+    var FUNC_ERROR_TEXT = "Expected a function";
+    function negate(predicate) {
+      if (typeof predicate != "function") {
+        throw new TypeError(FUNC_ERROR_TEXT);
+      }
+      return function() {
+        var args = arguments;
+        switch (args.length) {
+          case 0:
+            return !predicate.call(this);
+          case 1:
+            return !predicate.call(this, args[0]);
+          case 2:
+            return !predicate.call(this, args[0], args[1]);
+          case 3:
+            return !predicate.call(this, args[0], args[1], args[2]);
         }
-        if (newValue instanceof Recoil_index_1) {
-          return;
+        return !predicate.apply(this, args);
+      };
+    }
+    negate_1 = negate;
+    return negate_1;
+  }
+  var _basePickBy;
+  var hasRequired_basePickBy;
+  function require_basePickBy() {
+    if (hasRequired_basePickBy) return _basePickBy;
+    hasRequired_basePickBy = 1;
+    var baseGet = require_baseGet(), baseSet = require_baseSet(), castPath = require_castPath();
+    function basePickBy(object2, paths, predicate) {
+      var index2 = -1, length = paths.length, result = {};
+      while (++index2 < length) {
+        var path = paths[index2], value = baseGet(object2, path);
+        if (predicate(value, path)) {
+          baseSet(result, castPath(path, object2), value);
         }
-        write2(variable.store.uid, newValue);
       }
-    });
-  }
-  function getSessionKey(uid2) {
-    if (isEmbedded()) {
-      return `dara-session-${window.frameElement.dataset.daraPageId}-var-${uid2}`;
+      return result;
     }
-    return `dara-session-${getSessionToken()}-var-${uid2}`;
+    _basePickBy = basePickBy;
+    return _basePickBy;
   }
-  function BrowserStoreSync({ children }) {
-    const getStoreValue = React__namespace.useCallback((itemKey) => {
-      const key = getSessionKey(itemKey);
-      return JSON.parse(localStorage.getItem(key) ?? "null");
-    }, []);
-    const syncStoreValues = React__namespace.useCallback(({ diff }) => {
-      for (const [itemKey, value] of diff.entries()) {
-        const key = getSessionKey(itemKey);
-        localStorage.setItem(key, JSON.stringify(value));
+  var pickBy_1;
+  var hasRequiredPickBy;
+  function requirePickBy() {
+    if (hasRequiredPickBy) return pickBy_1;
+    hasRequiredPickBy = 1;
+    var arrayMap = require_arrayMap(), baseIteratee = require_baseIteratee(), basePickBy = require_basePickBy(), getAllKeysIn = require_getAllKeysIn();
+    function pickBy(object2, predicate) {
+      if (object2 == null) {
+        return {};
       }
-    }, []);
-    const listenToStoreChanges = React__namespace.useCallback(({ updateItem }) => {
-      const listener2 = (e2) => {
-        if (e2.storageArea === localStorage) {
-          if (e2.key) {
-            const match2 = e2.key.match(/^dara-session-(.*)-var-(.*)$/);
-            if (match2) {
-              const [, sessionToken, uid2] = match2;
-              if (sessionToken === getSessionToken()) {
-                updateItem(uid2, JSON.parse(e2.newValue ?? "null"));
-              }
-            }
-          }
+      var props = arrayMap(getAllKeysIn(object2), function(prop) {
+        return [prop];
+      });
+      predicate = baseIteratee(predicate);
+      return basePickBy(object2, props, function(value, path) {
+        return predicate(value, path[0]);
+      });
+    }
+    pickBy_1 = pickBy;
+    return pickBy_1;
+  }
+  var omitBy_1;
+  var hasRequiredOmitBy;
+  function requireOmitBy() {
+    if (hasRequiredOmitBy) return omitBy_1;
+    hasRequiredOmitBy = 1;
+    var baseIteratee = require_baseIteratee(), negate = requireNegate(), pickBy = requirePickBy();
+    function omitBy2(object2, predicate) {
+      return pickBy(object2, negate(baseIteratee(predicate)));
+    }
+    omitBy_1 = omitBy2;
+    return omitBy_1;
+  }
+  var omitByExports = requireOmitBy();
+  const omitBy = /* @__PURE__ */ getDefaultExportFromCjs(omitByExports);
+  function isTheme(configTheme) {
+    return typeof configTheme !== "string";
+  }
+  function resolveTheme(configTheme, baseTheme) {
+    if (!configTheme || configTheme === "light") {
+      return theme;
+    }
+    if (configTheme === "dark") {
+      return darkTheme;
+    }
+    if (isTheme(configTheme)) {
+      const original = baseTheme === "dark" ? darkTheme : theme;
+      return {
+        // Here we spread both first to pick up anything missing from the default theme and anything new/extra in
+        // the new theme.
+        ...original,
+        ...omitBy(configTheme, isNull),
+        colors: {
+          ...original.colors,
+          ...omitBy(configTheme.colors, isNull)
+        },
+        font: {
+          ...original.font,
+          ...omitBy(configTheme.font, isNull)
+        },
+        shadow: {
+          ...original.shadow,
+          ...omitBy(configTheme.shadow, isNull)
         }
       };
-      window.addEventListener("storage", listener2);
-      return () => {
-        window.removeEventListener("storage", listener2);
-      };
-    }, []);
-    return /* @__PURE__ */ React__namespace.createElement(RecoilSync_index_1, { listen: listenToStoreChanges, read: getStoreValue, storeKey: "BrowserStore", write: syncStoreValues }, children);
+    }
+    console.warn("No valid theme was found. Defaulting to light theme.");
+    return theme;
   }
-  function PathParamSync({ children }) {
-    const navigate = useNavigate();
-    const location2 = useLocation();
-    const locationRef = useLatestRef$3(location2);
-    const matches2 = useMatches();
-    const matchesRef = useLatestRef$3(matches2);
-    const params = useParams();
-    const paramsRef = React__namespace.useRef(params);
-    const locationSubscribers = React__namespace.useRef([]);
-    React__namespace.useLayoutEffect(() => {
-      if (isEqual$4(paramsRef.current, params)) {
+  function usePrevious(value, initialValue) {
+    const ref = React$1.useRef(initialValue);
+    React$1.useEffect(() => {
+      ref.current = value;
+    });
+    return ref.current;
+  }
+  function useWindowTitle(pageTitle, enabled = true) {
+    const config2 = useConfig();
+    React$1.useEffect(() => {
+      if (!enabled) {
         return;
       }
-      paramsRef.current = params;
+      if (!pageTitle) {
+        document.title = config2.title;
+        return;
+      }
+      document.title = `${config2.title} - ${pageTitle}`;
+    }, [config2, config2.title, pageTitle, enabled]);
+  }
+  const Icon = injectCss("i");
+  function getIcon(icon) {
+    let iconClasses = icon;
+    if (typeof icon === "string" && !icon.includes("fa-")) {
+      const inferredIconName = icon.replace(/([A-Z])/g, " $1").trim().toLowerCase().split(" ").join("-");
+      iconClasses = `fa-solid fa-${inferredIconName}`;
+      console.warn(
+        `Invalid fontawesome class string "${icon}" provided to getIcon(). This behaviour is deprecated and will be removed in the next version, please use "dara_core.css.get_icon" method. 
+Inferred class string: "${iconClasses}."`
+      );
+    }
+    return (props) => /* @__PURE__ */ React.createElement(Icon, { ...props, className: `${String(props.className ?? "")} ${iconClasses}` });
+  }
+  function useUrlSync() {
+    const location2 = useLocation();
+    const locationSubscribers = React$1.useRef([]);
+    React$1.useEffect(() => {
       for (const subscriber of locationSubscribers.current) {
-        subscriber(params);
+        subscriber();
       }
-    }, [paramsRef, params]);
-    const getStoreValue = React__namespace.useCallback(
-      (paramName) => {
-        return paramsRef.current[paramName] ?? null;
-      },
-      [paramsRef]
-    );
-    const writeStoreValue = React__namespace.useCallback(
-      async ({ diff }) => {
-        const newParams = mapValues({ ...paramsRef.current, ...Object.fromEntries(diff) }, (v) => String(v));
-        const loaderData = matchesRef.current.at(-1).loaderData;
-        const data2 = loaderData.data instanceof Promise ? await loaderData.data : loaderData.data;
-        const fullPathname = data2.route_definition.full_path;
-        navigate({
-          pathname: generatePath(fullPathname, newParams),
-          // preserve current search
-          search: locationRef.current.search
-        });
-      },
-      [matchesRef, navigate, paramsRef, locationRef]
-    );
-    const listenToStoreChanges = React__namespace.useCallback(({ updateItems }) => {
-      function handleUpdate(newParams) {
-        updateItems(new Map(Object.entries(newParams)));
+    }, [location2]);
+    const urlSerializer = React$1.useCallback((val) => {
+      if (val === void 0 || val === null) {
+        return "";
       }
-      locationSubscribers.current.push(handleUpdate);
+      if (["string", "number", "boolean"].includes(typeof val)) {
+        return String(val);
+      }
+      return JSON.stringify(val);
+    }, []);
+    const urlDeserializer = React$1.useCallback((val) => {
+      if (val === "") {
+        return void 0;
+      }
+      try {
+        return JSON.parse(val);
+      } catch {
+        return val;
+      }
+    }, []);
+    const listenChangeURL = React$1.useCallback((handler) => {
+      locationSubscribers.current.push(handler);
       return () => {
-        locationSubscribers.current = locationSubscribers.current.filter((item) => item !== handleUpdate);
+        locationSubscribers.current = locationSubscribers.current.filter((item) => item !== handler);
       };
     }, []);
-    return /* @__PURE__ */ React__namespace.createElement(
-      RecoilSync_index_1,
-      {
-        listen: listenToStoreChanges,
-        read: getStoreValue,
-        write: writeStoreValue,
-        storeKey: "_PathParamStore"
-      },
-      children
-    );
-  }
-  function localStorageEffect(variable, extrasSerializable, wsClient, taskContext) {
-    let firstRun = false;
-    return RecoilSync_index_2({
-      itemKey: variable.uid,
-      read: ({ read: read2 }) => {
-        const readValue = read2(variable.uid);
-        if (!firstRun) {
-          firstRun = true;
-          if (!readValue) {
-            const isDefaultDerived = isDerivedVariable(variable.default);
-            return isDefaultDerived ? getOrRegisterDerivedVariable(
-              variable.default,
-              wsClient,
-              taskContext,
-              extrasSerializable.extras
-            ) : variable.default;
-          }
-        }
-        return readValue;
+    return {
+      browserInterface: {
+        listenChangeURL
       },
-      refine: Refine_index_6(),
-      storeKey: "BrowserStore"
-    });
-  }
-  function urlEffect(variable) {
-    return RecoilSync_index_6({
-      history: "push",
-      itemKey: variable.store.query,
-      refine: Refine_index_6()
-    });
-  }
-  function pathParamEffect(variable) {
-    const itemKey = variable.store.param_name;
-    const effect2 = RecoilSync_index_2({
-      itemKey,
-      refine: Refine_index_6(),
-      storeKey: "_PathParamStore"
-    });
-    return (effectParams) => {
-      const cleanup = effect2(effectParams);
-      effectParams.setSelf(effectParams.getLoadable(effectParams.node).valueOrThrow());
-      return () => {
-        cleanup?.();
-      };
-    };
-  }
-  const STORES = {
-    BackendStore: {
-      effect: backendStoreEffect
-    },
-    BrowserStore: {
-      effect: localStorageEffect
-    },
-    QueryParamStore: {
-      effect: urlEffect
-    },
-    _PathParamStore: {
-      effect: pathParamEffect
-    }
-  };
-  function getEffect(variable) {
-    const storeName = variable.store?.__typename;
-    if (!storeName || !(storeName in STORES)) {
-      return null;
-    }
-    return STORES[storeName]?.effect ?? null;
-  }
-  function StoreProviders({ children }) {
-    return /* @__PURE__ */ React__namespace.createElement(BackendStoreSync, null, /* @__PURE__ */ React__namespace.createElement(BrowserStoreSync, null, children));
-  }
-  function isConditionTrue(operator, value, other) {
-    if (operator === ConditionOperator.EQUAL) {
-      return value === other;
-    }
-    if (operator === ConditionOperator.NOT_EQUAL) {
-      return value !== other;
-    }
-    if (operator === ConditionOperator.GREATER_EQUAL) {
-      return value >= other;
-    }
-    if (operator === ConditionOperator.GREATER_THAN) {
-      return value > other;
-    }
-    if (operator === ConditionOperator.LESS_EQUAL) {
-      return value <= other;
-    }
-    if (operator === ConditionOperator.LESS_THAN) {
-      return value < other;
-    }
-    if (operator === ConditionOperator.TRUTHY) {
-      return !!value;
-    }
-    throw new Error(`Unexpected operator ${String(operator)} passed to conditional (If) component`);
-  }
-  function useConditionOrVariable(arg, opts = {}) {
-    if (isCondition(arg)) {
-      const value = useVariable(arg.variable, opts)[0];
-      const other = useVariable(arg.other, opts)[0];
-      return isConditionTrue(arg.operator, value, other);
-    }
-    return useVariable(arg, opts)[0];
-  }
-  function useSwitchVariable(variable) {
-    const value = useConditionOrVariable(variable.value, { suspend: false });
-    const [valueMap] = useVariable(variable.value_map, { suspend: false });
-    const [defaultValue] = useVariable(variable.default, { suspend: false });
-    const lookupKey = String(value);
-    return valueMap[lookupKey] ?? defaultValue;
+      deserialize: urlDeserializer,
+      location: { part: "queryParams" },
+      serialize: urlSerializer
+    };
   }
   const COLUMN_PREFIX_REGEX = /__(?:col|index)__\d+__/;
   function combineFilters(combinator, queries) {
@@ -71562,733 +71273,258 @@ Inferred class string: "${iconClasses}."`
     const response = result.value;
     return response.data;
   }
-  function warnUpdateOnDerivedState() {
-    console.warn("You tried to call update on variable with derived state, this is a noop and will be ignored.");
+  function useRefreshSelector() {
+    return Recoil_index_31(({ refresh }) => {
+      return (key, extras) => {
+        const family = selectorFamilyRegistry.get(key);
+        if (family) {
+          const selector2 = selectorFamilyMembersRegistry.get(family)?.get(extras);
+          if (selector2) {
+            refresh(selector2);
+          }
+        }
+      };
+    });
   }
-  function useVariable(variable, opts = { serverVariable: "disallow" }) {
+  function useVariableState() {
     const extras = useRequestExtras();
-    const { client: wsClient } = React$1.useContext(websocketCtx);
-    const taskContext = useTaskContext();
-    const variablesContext = React$1.useContext(variablesCtx);
-    const bus = useEventBus();
-    if (!isVariable(variable)) {
-      const [state, setState] = React$1.useState(variable);
-      const [prevVariable, setPrevVariable] = React$1.useState(variable);
-      if (!isEqual$4(variable, prevVariable)) {
-        setState(variable);
-        setPrevVariable(variable);
-      }
-      return [state, setState];
-    }
-    variablesContext?.variables.current.add(variable.uid);
-    React$1.useEffect(() => {
-      return () => {
-        variablesContext?.variables.current.delete(variable.uid);
+    const { client: client2 } = React$1.useContext(websocketCtx);
+    const taskCtx = useTaskContext();
+    return Recoil_index_31(({ snapshot }) => {
+      return async (variable) => {
+        if (!isRegistered(variable)) {
+          return "__NOT_REGISTERED__";
+        }
+        const resolvedVariable = await resolveVariable(
+          variable,
+          client2,
+          taskCtx,
+          extras,
+          (v) => snapshot.getLoadable(v).toPromise()
+        );
+        return resolvedVariable;
       };
     }, []);
-    if (isDerivedVariable(variable)) {
-      const selector2 = useDerivedVariable(variable, wsClient, taskContext, extras);
-      const selectorLoadable = Recoil_index_28(selector2);
-      React$1.useEffect(() => {
-        if (selectorLoadable.state !== "loading") {
-          bus.publish("DERIVED_VARIABLE_LOADED", { variable, value: selectorLoadable.contents });
-        }
-      }, [selectorLoadable]);
-      const deferred22 = useDeferLoadable(selectorLoadable, opts.suspend);
-      return [deferred22, warnUpdateOnDerivedState];
-    }
-    if (isSwitchVariable(variable)) {
-      return [useSwitchVariable(variable), warnUpdateOnDerivedState];
-    }
-    if (isStateVariable(variable)) {
-      const parentSelector = useDerivedVariable(variable.parent_variable, wsClient, taskContext, extras);
-      const parentLoadable = Recoil_index_28(parentSelector);
-      let stateValue;
-      switch (variable.property_name) {
-        case "loading":
-          stateValue = parentLoadable.state === "loading";
-          break;
-        case "error":
-          stateValue = parentLoadable.state === "hasError";
-          break;
-        case "hasValue":
-          stateValue = parentLoadable.state === "hasValue";
-          break;
-        default:
-          stateValue = false;
+  }
+  var _arrayAggregator;
+  var hasRequired_arrayAggregator;
+  function require_arrayAggregator() {
+    if (hasRequired_arrayAggregator) return _arrayAggregator;
+    hasRequired_arrayAggregator = 1;
+    function arrayAggregator(array2, setter, iteratee, accumulator) {
+      var index2 = -1, length = array2 == null ? 0 : array2.length;
+      while (++index2 < length) {
+        var value = array2[index2];
+        setter(accumulator, value, iteratee(value), array2);
       }
-      return [stateValue, warnUpdateOnDerivedState];
+      return accumulator;
     }
-    if (isServerVariable(variable)) {
-      if (opts.serverVariable === "disallow") {
-        throw new UserError("ServerVariable cannot be directly consumed by this component");
-      }
-      const atom2 = React$1.useMemo(() => getOrRegisterServerVariable(variable, extras), [variable, extras]);
-      const [seqNumber] = Recoil_index_22(atom2);
-      const fetcher = useTabularVariable(variable);
-      const { data: data2 } = reactQuery.useSuspenseQuery({
-        // use the seq number as a dependency to refetch on changes
-        queryKey: ["use-variable-server-variable", variable.uid, seqNumber],
-        queryFn: async () => {
-          const result = await fetcher(null, {
-            limit: 1,
-            offset: 0
-          });
-          return result.data;
-        },
-        refetchOnWindowFocus: false
+    _arrayAggregator = arrayAggregator;
+    return _arrayAggregator;
+  }
+  var _baseAggregator;
+  var hasRequired_baseAggregator;
+  function require_baseAggregator() {
+    if (hasRequired_baseAggregator) return _baseAggregator;
+    hasRequired_baseAggregator = 1;
+    var baseEach = require_baseEach();
+    function baseAggregator(collection, setter, iteratee, accumulator) {
+      baseEach(collection, function(value, key, collection2) {
+        setter(accumulator, value, iteratee(value), collection2);
       });
-      return [data2?.[0] ?? null, warnUpdateOnDerivedState];
+      return accumulator;
     }
-    const recoilState = getOrRegisterPlainVariable(variable, wsClient, taskContext, extras);
-    if (!isDerivedVariable(variable.default)) {
-      const [value, setValue] = Recoil_index_22(recoilState);
-      React$1.useEffect(() => {
-        bus.publish("PLAIN_VARIABLE_LOADED", { variable, value });
-      }, [value]);
-      return [value, setValue];
+    _baseAggregator = baseAggregator;
+    return _baseAggregator;
+  }
+  var _createAggregator;
+  var hasRequired_createAggregator;
+  function require_createAggregator() {
+    if (hasRequired_createAggregator) return _createAggregator;
+    hasRequired_createAggregator = 1;
+    var arrayAggregator = require_arrayAggregator(), baseAggregator = require_baseAggregator(), baseIteratee = require_baseIteratee(), isArray = requireIsArray();
+    function createAggregator(setter, initializer2) {
+      return function(collection, iteratee) {
+        var func = isArray(collection) ? arrayAggregator : baseAggregator, accumulator = initializer2 ? initializer2() : {};
+        return func(collection, setter, baseIteratee(iteratee, 2), accumulator);
+      };
     }
-    const [loadable, setLoadable] = Recoil_index_23(recoilState);
-    React$1.useEffect(() => {
-      if (loadable.state !== "loading") {
-        bus.publish("PLAIN_VARIABLE_LOADED", { variable, value: loadable.contents });
-      }
-    }, [loadable]);
-    const deferred2 = useDeferLoadable(loadable, opts.suspend);
-    return [deferred2, setLoadable];
+    _createAggregator = createAggregator;
+    return _createAggregator;
   }
-  function flexStyles(props, displayCtx2, useDisplayContext) {
-    let flexBasis = props.basis;
-    let flexShrink = props.shrink;
-    let flexGrow = props.grow;
-    if (useDisplayContext) {
-      if (props.width && displayCtx2.direction === "horizontal") {
-        flexBasis ??= props.width;
-        flexShrink ??= "0";
-        flexGrow ??= "0";
-      }
-      if (props.height && displayCtx2.direction === "vertical") {
-        flexBasis ??= props.height;
-        flexShrink ??= "0";
-        flexGrow ??= "0";
+  var groupBy_1;
+  var hasRequiredGroupBy;
+  function requireGroupBy() {
+    if (hasRequiredGroupBy) return groupBy_1;
+    hasRequiredGroupBy = 1;
+    var baseAssignValue = require_baseAssignValue(), createAggregator = require_createAggregator();
+    var objectProto = Object.prototype;
+    var hasOwnProperty2 = objectProto.hasOwnProperty;
+    var groupBy2 = createAggregator(function(result, value, key) {
+      if (hasOwnProperty2.call(result, key)) {
+        result[key].push(value);
+      } else {
+        baseAssignValue(result, key, [value]);
       }
+    });
+    groupBy_1 = groupBy2;
+    return groupBy_1;
+  }
+  var groupByExports = requireGroupBy();
+  const groupBy = /* @__PURE__ */ getDefaultExportFromCjs(groupByExports);
+  async function invokeAction(input, executionId, annotatedAction, actionCtx) {
+    const resolvedKwargs = await Promise.all(
+      Object.entries(annotatedAction.dynamic_kwargs).map(async ([k, value]) => {
+        const resolvedValue = isVariable(value) ? await resolveVariable(
+          value,
+          actionCtx.wsClient,
+          actionCtx.taskCtx,
+          actionCtx.extras,
+          (v) => actionCtx.snapshot.getLoadable(v).toPromise()
+        ) : value;
+        return [k, resolvedValue];
+      })
+    ).then((entries) => Object.fromEntries(entries));
+    const ws_channel = await actionCtx.wsClient.getChannel();
+    const res = await request(
+      `/api/core/action/${annotatedAction.definition_uid}`,
+      {
+        body: JSON.stringify({
+          execution_id: executionId,
+          input,
+          uid: annotatedAction.uid,
+          values: normalizeRequest(cleanKwargs(resolvedKwargs, null), annotatedAction.dynamic_kwargs),
+          ws_channel
+        }),
+        method: HTTP_METHOD.POST
+      },
+      actionCtx.extras
+    );
+    await handleAuthErrors(res, true);
+    await validateResponse(res, `Failed to fetch the action value with uid: ${annotatedAction.uid}`);
+    const resContent = await res.json();
+    if ("task_id" in resContent) {
+      const taskId = resContent.task_id;
+      actionCtx.taskCtx.startTask(taskId);
+      await actionCtx.wsClient.waitForTask(taskId);
+      actionCtx.taskCtx.endTask(taskId);
+      await fetchTaskResult(taskId, actionCtx.extras);
     }
-    if (props.hug || props.hug !== false && displayCtx2.hug) {
-      flexBasis ??= "content";
-      flexShrink ??= "1";
-      flexGrow ??= "0";
-    }
-    return { flexBasis, flexGrow, flexShrink };
   }
-  function parseRawCss(rawCss) {
-    const isRawObject = typeof rawCss === "object" && rawCss !== null && rawCss !== void 0;
-    const componentCss = !isRawObject && typeof rawCss === "string" ? rawCss : "";
-    const styles2 = isRawObject ? rawCss : {};
-    return [styles2, componentCss];
+  const ACTION_HANDLER_BY_NAME = {};
+  async function preloadActions(importers, actions) {
+    const componentsByModule = groupBy(actions, (actionDef) => actionDef.py_module);
+    await Promise.all(
+      Object.entries(componentsByModule).map(async ([module2, moduleActions]) => {
+        const moduleContent = await importers[module2]();
+        for (const action of moduleActions) {
+          if (ACTION_HANDLER_BY_NAME[action.name]) {
+            continue;
+          }
+          const actionHandler = moduleContent[action.name];
+          if (actionHandler) {
+            ACTION_HANDLER_BY_NAME[action.name] = actionHandler;
+          }
+        }
+      })
+    );
   }
-  function useComponentStyles(props, useDisplayContext = true, propName = "raw_css") {
-    const [rawCssValue] = useVariable(props[propName]);
-    const [rawStyles, rawCss] = parseRawCss(rawCssValue);
-    const displayCtx$1 = React$1.useContext(displayCtx);
-    const flexProps = flexStyles(props, displayCtx$1, useDisplayContext);
-    const styles2 = React$1.useMemo(() => {
-      const stylesObj = {
-        backgroundColor: props.background,
-        border: props.border,
-        borderRadius: props.border_radius,
-        color: props.color,
-        fontFamily: props.font,
-        fontSize: props.font_size,
-        fontStyle: props.italic ? "italic" : "normal",
-        fontWeight: props.bold ? "bold" : "normal",
-        gap: props.gap,
-        height: props.height,
-        margin: props.margin,
-        maxHeight: props.max_height,
-        maxWidth: props.max_width,
-        minHeight: props.min_height,
-        minWidth: props.min_width,
-        overflow: props.overflow,
-        padding: props.padding,
-        position: props.position,
-        textDecoration: props.underline ? "underline" : "none",
-        width: props.width,
-        ...flexProps,
-        ...rawStyles,
-        ...props.style ?? {}
-      };
-      return Object.fromEntries(Object.entries(stylesObj).filter(([, v]) => v !== null && v !== void 0));
-    }, [useDeepCompare(props), rawStyles, flexProps]);
-    return [styles2, rawCss];
+  function clearActionHandlerCache_TEST() {
+    Object.keys(ACTION_HANDLER_BY_NAME).forEach((k) => delete ACTION_HANDLER_BY_NAME[k]);
   }
-  function useUrlSync() {
-    const location2 = useLocation();
-    const locationSubscribers = React$1.useRef([]);
-    React$1.useEffect(() => {
-      for (const subscriber of locationSubscribers.current) {
-        subscriber();
-      }
-    }, [location2]);
-    const urlSerializer = React$1.useCallback((val) => {
-      if (val === void 0 || val === null) {
-        return "";
-      }
-      if (["string", "number", "boolean"].includes(typeof val)) {
-        return String(val);
-      }
-      return JSON.stringify(val);
-    }, []);
-    const urlDeserializer = React$1.useCallback((val) => {
-      if (val === "") {
-        return void 0;
+  class UnhandledActionError extends Error {
+    constructor(message, actionImpl) {
+      super(message);
+      this.actionImpl = actionImpl;
+    }
+  }
+  function resolveActionImpl(actionImpl, actionCtx) {
+    let actionHandler;
+    if (!ACTION_HANDLER_BY_NAME[actionImpl.name]) {
+      if (actionCtx.onUnhandledAction) {
+        actionHandler = actionCtx.onUnhandledAction;
+      } else {
+        throw new UnhandledActionError(`Action definition for impl "${actionImpl.name}" not found`, actionImpl);
       }
-      try {
-        return JSON.parse(val);
-      } catch {
-        return val;
+    } else {
+      actionHandler = ACTION_HANDLER_BY_NAME[actionImpl.name];
+    }
+    return actionHandler;
+  }
+  async function executeAction(input, action, actionCtx) {
+    if (isActionImpl(action)) {
+      const handler = resolveActionImpl(action, actionCtx);
+      const result = handler(actionCtx, action);
+      if (result instanceof Promise) {
+        await result;
       }
-    }, []);
-    const listenChangeURL = React$1.useCallback((handler) => {
-      locationSubscribers.current.push(handler);
-      return () => {
-        locationSubscribers.current = locationSubscribers.current.filter((item) => item !== handler);
+      return;
+    }
+    const executionId = nanoid$1();
+    const observable2 = actionCtx.wsClient.actionMessages$(executionId);
+    return new Promise((resolve, reject) => {
+      let activeTasks = 0;
+      let streamCompleted = false;
+      let isSettled = false;
+      let sub;
+      const checkForCompletion = () => {
+        if (!isSettled && streamCompleted && activeTasks === 0) {
+          isSettled = true;
+          sub.unsubscribe();
+          resolve();
+        }
       };
-    }, []);
-    return {
-      browserInterface: {
-        listenChangeURL
-      },
-      deserialize: urlDeserializer,
-      location: { part: "queryParams" },
-      serialize: urlSerializer
-    };
-  }
-  const StyledDots$1 = injectCss(Dots);
-  function DefaultFallback$1(props) {
-    const [style, css2] = useComponentStyles(props);
-    return /* @__PURE__ */ React.createElement(StyledDots$1, { $rawCss: css2, style });
+      const onError = (error) => {
+        if (!isSettled) {
+          isSettled = true;
+          sub.unsubscribe();
+          reject(error);
+        }
+      };
+      sub = observable2.pipe(
+        // eslint-disable-next-line @typescript-eslint/require-await
+        concatMap(async (actionImpl) => {
+          if (actionImpl) {
+            const handler = resolveActionImpl(actionImpl, actionCtx);
+            return [handler, actionImpl];
+          }
+          return null;
+        }),
+        takeWhile((res) => !!res)
+        // stop when falsy is returned from concatMap
+      ).subscribe({
+        complete: () => {
+          streamCompleted = true;
+          checkForCompletion();
+        },
+        error: onError,
+        // Reject the promise if there's an error in the stream
+        next: async ([handler, actionImpl]) => {
+          try {
+            activeTasks += 1;
+            const result = handler(actionCtx, actionImpl);
+            if (result instanceof Promise) {
+              await result;
+            }
+          } catch (error) {
+            onError(error);
+          } finally {
+            if (activeTasks > 0) {
+              activeTasks -= 1;
+            }
+            checkForCompletion();
+          }
+        }
+      });
+      invokeAction(input, executionId, action, actionCtx).catch(onError);
+    });
   }
-  function DefaultFallbackStatic() {
-    return /* @__PURE__ */ React.createElement(StyledDots$1, { grey3: theme.colors.grey3, grey4: theme.colors.grey4 });
-  }
-  const Center = styled.div`
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    width: 100%;
-    height: 100%;
-
-    background: ${(props) => props.colored ? props.theme.colors.blue1 : ""};
-`;
-  const Wrapper$1 = styled.div`
-    display: flex;
-    flex: 1 1 0%;
-    flex-direction: column;
-    justify-content: center;
-
-    min-height: 100%;
-
-    background: ${(props) => `radial-gradient(circle closest-corner at 50% 40%, ${curriedTransparentize$1(
-    0.9,
-    props.theme.colors.background
-  )} 0%, ${curriedTransparentize$1(
-    0.8,
-    props.theme.colors.blue4
-  )} 70%),radial-gradient(circle closest-corner at 20% 150%, ${curriedTransparentize$1(
-    0.8,
-    props.theme.colors.error
-  )} 0%, ${curriedTransparentize$1(0.2, props.theme.colors.blue4)} 230%)`};
-`;
-  const Card = styled.div`
-    padding: 1.5rem;
-
-    color: ${(props) => props.theme.colors.text};
-
-    background-color: ${(props) => props.theme.colors.blue1};
-    border-radius: 1rem;
-    box-shadow: ${(props) => props.theme.shadow.medium};
-
-    @media (width >= 640px) {
-        width: 100%;
-        max-width: 24rem;
-        margin-right: auto;
-        margin-left: auto;
-    }
-`;
-  const FormWrapper = styled.div`
-    margin-top: 1.5rem;
-`;
-  const Form = styled.form`
-    > * + * {
-        margin-top: 1.5rem;
-    }
-`;
-  const ErrorText$1 = styled.h3`
-    margin: 0;
-
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 1.25rem;
-    color: ${(props) => props.theme.colors.error};
-    letter-spacing: 0.025em;
-
-    visibility: ${(props) => props.$hidden ? "hidden" : "visible"};
-`;
-  const Label = styled.label`
-    font-weight: 500;
-    line-height: 1.5rem;
-`;
-  const StyledInput = styled.input`
-    display: flex;
-    display: block;
-    align-items: center;
-
-    width: 100%;
-    height: 2.5rem;
-    margin-top: 0.5rem;
-    padding: 0 1rem;
-
-    font-size: 1rem;
-    line-height: 1.5rem;
-    color: ${(props) => props.theme.colors.text};
-
-    background-color: ${(props) => props.theme.colors.blue1};
-    border: none;
-    border-radius: 0.25rem;
-    outline: none;
-    box-shadow:
-        inset 0 0 0 0 ${(props) => props.theme.colors.blue1},
-        inset 0 0 0 1px ${(props) => props.$error ? props.theme.colors.error : props.theme.colors.grey2},
-        0 1px 2px 0 rgb(0 0 0 / 5%);
-
-    :active,
-    :focus {
-        box-shadow:
-            inset 0 0 0 0 ${(props) => props.theme.colors.blue1},
-            inset 0 0 0 2px ${(props) => props.$error ? props.theme.colors.error : props.theme.colors.primary},
-            0 1px 2px 0 rgb(0 0 0 / 5%);
-    }
-`;
-  const StyledButton = styled(Button$1)`
-    width: 100%;
-    font-weight: 600;
-    line-height: 1.5rem;
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
-
-    :active,
-    :focus {
-        outline-color: ${(props) => props.theme.colors.primary};
-        outline-width: 2px;
-        outline-offset: 2px;
-    }
-`;
-  function BasicAuthLogin() {
-    const [isVerifyingToken, setIsVerifyingToken] = React$1.useState(true);
-    const [isLoggingIn, setIsLoggingIn] = React$1.useState(false);
-    const [username, setUsername] = React$1.useState("");
-    const [password, setPassword] = React$1.useState("");
-    const [isError2, setIsError] = React$1.useState(false);
-    const location2 = useLocation();
-    const navigate = useNavigate();
-    const { defaultPath } = useRouterContext();
-    const queryParams = new URLSearchParams(location2.search);
-    const previousLocation = queryParams.get("referrer") ?? defaultPath;
-    const login = async () => {
-      setIsLoggingIn(true);
-      setIsError(false);
-      try {
-        const sessionToken = await requestSessionToken({ password, username });
-        if (sessionToken) {
-          setSessionToken(sessionToken);
-          navigate(decodeURIComponent(previousLocation));
-        }
-      } catch {
-        setIsError(true);
-      }
-      setIsLoggingIn(false);
-    };
-    React$1.useEffect(() => {
-      if (getSessionToken()) {
-        verifySessionToken().then((verified) => {
-          if (verified) {
-            navigate(decodeURIComponent(previousLocation), { replace: true });
-          } else {
-            setIsVerifyingToken(false);
-          }
-        });
-      } else {
-        setIsVerifyingToken(false);
-      }
-    }, []);
-    if (isVerifyingToken) {
-      return /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(DefaultFallback$1, null));
-    }
-    return /* @__PURE__ */ React.createElement(Wrapper$1, null, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(FormWrapper, null, /* @__PURE__ */ React.createElement(
-      Form,
-      {
-        onSubmit: (e2) => {
-          e2.preventDefault();
-          login();
-        }
-      },
-      /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Label, { htmlFor: "username" }, "Username"), /* @__PURE__ */ React.createElement(
-        StyledInput,
-        {
-          $error: isError2,
-          id: "username",
-          onChange: (e2) => setUsername(e2.target.value),
-          required: true,
-          type: "text",
-          value: username
-        }
-      )),
-      /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Label, { htmlFor: "password" }, "Password"), /* @__PURE__ */ React.createElement(
-        StyledInput,
-        {
-          $error: isError2,
-          id: "password",
-          onChange: (e2) => setPassword(e2.target.value),
-          required: true,
-          type: "password",
-          value: password
-        }
-      )),
-      /* @__PURE__ */ React.createElement(ErrorText$1, { $hidden: !isError2, style: { marginTop: "1rem" } }, "Incorrect Username or Password"),
-      /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-        StyledButton,
-        {
-          loading: isLoggingIn,
-          style: { color: "white" },
-          styling: "primary",
-          type: "submit"
-        },
-        "Sign in"
-      ))
-    ))));
-  }
-  function BasicAuthLogout() {
-    React$1.useEffect(() => {
-      revokeSession().then(() => {
-        setSessionToken(null);
-        window.location.href = `${window.dara.base_url}/login`;
-      });
-    }, []);
-    return null;
-  }
-  function DefaultAuthLogin() {
-    const location2 = useLocation();
-    const navigate = useNavigate();
-    const { defaultPath } = useRouterContext();
-    const queryParams = new URLSearchParams(location2.search);
-    const previousLocation = queryParams.get("referrer") ?? defaultPath;
-    async function getNewToken() {
-      const sessionToken = await requestSessionToken({});
-      if (sessionToken) {
-        setSessionToken(sessionToken);
-        navigate(decodeURIComponent(previousLocation));
-      }
-    }
-    React$1.useEffect(() => {
-      if (getSessionToken()) {
-        verifySessionToken().then((verified) => {
-          if (verified) {
-            navigate(decodeURIComponent(previousLocation), { replace: true });
-          } else {
-            getNewToken();
-          }
-        });
-      } else {
-        getNewToken();
-      }
-    }, []);
-    return /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(DefaultFallback$1, null));
-  }
-  const CenteredDivWithGap$1 = styled(Center)`
-    gap: 1rem;
-    margin: 10px;
-    text-align: center;
-`;
-  const config401 = {
-    description: "Your login session may have expired. Try again.",
-    styling: "primary",
-    title: "We were not able to authenticate you"
-  };
-  const errorMessages = {
-    "403": {
-      description: "You are not authorised to access this application. Please contact the application owner to enable access.",
-      styling: "error",
-      title: "We were not able to authenticate you"
-    },
-    "404": {
-      description: "The requested page could not be found.",
-      styling: "error",
-      title: "Page not found"
-    },
-    "401": config401,
-    default: config401
-  };
-  function ErrorPage(props) {
-    const { search } = useLocation();
-    const query = React$1.useMemo(() => new URLSearchParams(search), [search]);
-    const code = props.code ?? query.get("code");
-    const errorConfig = code && errorMessages[code] || errorMessages.default;
-    return /* @__PURE__ */ React.createElement(CenteredDivWithGap$1, null, /* @__PURE__ */ React.createElement("h1", null, errorConfig.title), /* @__PURE__ */ React.createElement("p", null, errorConfig.description), /* @__PURE__ */ React.createElement(Button$1, { href: "/login", styling: errorConfig.styling }, "Retry"));
-  }
-  function useRefreshSelector() {
-    return Recoil_index_31(({ refresh }) => {
-      return (key, extras) => {
-        const family = selectorFamilyRegistry.get(key);
-        if (family) {
-          const selector2 = selectorFamilyMembersRegistry.get(family)?.get(extras);
-          if (selector2) {
-            refresh(selector2);
-          }
-        }
-      };
-    });
-  }
-  function useVariableState() {
-    const extras = useRequestExtras();
-    const { client: client2 } = React$1.useContext(websocketCtx);
-    const taskCtx = useTaskContext();
-    return Recoil_index_31(({ snapshot }) => {
-      return async (variable) => {
-        if (!isRegistered(variable)) {
-          return "__NOT_REGISTERED__";
-        }
-        const resolvedVariable = await resolveVariable(
-          variable,
-          client2,
-          taskCtx,
-          extras,
-          (v) => snapshot.getLoadable(v).toPromise()
-        );
-        return resolvedVariable;
-      };
-    }, []);
-  }
-  var _arrayAggregator;
-  var hasRequired_arrayAggregator;
-  function require_arrayAggregator() {
-    if (hasRequired_arrayAggregator) return _arrayAggregator;
-    hasRequired_arrayAggregator = 1;
-    function arrayAggregator(array2, setter, iteratee, accumulator) {
-      var index2 = -1, length = array2 == null ? 0 : array2.length;
-      while (++index2 < length) {
-        var value = array2[index2];
-        setter(accumulator, value, iteratee(value), array2);
-      }
-      return accumulator;
-    }
-    _arrayAggregator = arrayAggregator;
-    return _arrayAggregator;
-  }
-  var _baseAggregator;
-  var hasRequired_baseAggregator;
-  function require_baseAggregator() {
-    if (hasRequired_baseAggregator) return _baseAggregator;
-    hasRequired_baseAggregator = 1;
-    var baseEach = require_baseEach();
-    function baseAggregator(collection, setter, iteratee, accumulator) {
-      baseEach(collection, function(value, key, collection2) {
-        setter(accumulator, value, iteratee(value), collection2);
-      });
-      return accumulator;
-    }
-    _baseAggregator = baseAggregator;
-    return _baseAggregator;
-  }
-  var _createAggregator;
-  var hasRequired_createAggregator;
-  function require_createAggregator() {
-    if (hasRequired_createAggregator) return _createAggregator;
-    hasRequired_createAggregator = 1;
-    var arrayAggregator = require_arrayAggregator(), baseAggregator = require_baseAggregator(), baseIteratee = require_baseIteratee(), isArray = requireIsArray();
-    function createAggregator(setter, initializer2) {
-      return function(collection, iteratee) {
-        var func = isArray(collection) ? arrayAggregator : baseAggregator, accumulator = initializer2 ? initializer2() : {};
-        return func(collection, setter, baseIteratee(iteratee, 2), accumulator);
-      };
-    }
-    _createAggregator = createAggregator;
-    return _createAggregator;
-  }
-  var groupBy_1;
-  var hasRequiredGroupBy;
-  function requireGroupBy() {
-    if (hasRequiredGroupBy) return groupBy_1;
-    hasRequiredGroupBy = 1;
-    var baseAssignValue = require_baseAssignValue(), createAggregator = require_createAggregator();
-    var objectProto = Object.prototype;
-    var hasOwnProperty2 = objectProto.hasOwnProperty;
-    var groupBy2 = createAggregator(function(result, value, key) {
-      if (hasOwnProperty2.call(result, key)) {
-        result[key].push(value);
-      } else {
-        baseAssignValue(result, key, [value]);
-      }
-    });
-    groupBy_1 = groupBy2;
-    return groupBy_1;
-  }
-  var groupByExports = requireGroupBy();
-  const groupBy = /* @__PURE__ */ getDefaultExportFromCjs(groupByExports);
-  async function invokeAction(input, executionId, annotatedAction, actionCtx) {
-    const resolvedKwargs = await Promise.all(
-      Object.entries(annotatedAction.dynamic_kwargs).map(async ([k, value]) => {
-        const resolvedValue = isVariable(value) ? await resolveVariable(
-          value,
-          actionCtx.wsClient,
-          actionCtx.taskCtx,
-          actionCtx.extras,
-          (v) => actionCtx.snapshot.getLoadable(v).toPromise()
-        ) : value;
-        return [k, resolvedValue];
-      })
-    ).then((entries) => Object.fromEntries(entries));
-    const ws_channel = await actionCtx.wsClient.getChannel();
-    const res = await request(
-      `/api/core/action/${annotatedAction.definition_uid}`,
-      {
-        body: JSON.stringify({
-          execution_id: executionId,
-          input,
-          uid: annotatedAction.uid,
-          values: normalizeRequest(cleanKwargs(resolvedKwargs, null), annotatedAction.dynamic_kwargs),
-          ws_channel
-        }),
-        method: HTTP_METHOD.POST
-      },
-      actionCtx.extras
-    );
-    await handleAuthErrors(res, true);
-    await validateResponse(res, `Failed to fetch the action value with uid: ${annotatedAction.uid}`);
-    const resContent = await res.json();
-    if ("task_id" in resContent) {
-      const taskId = resContent.task_id;
-      actionCtx.taskCtx.startTask(taskId);
-      await actionCtx.wsClient.waitForTask(taskId);
-      actionCtx.taskCtx.endTask(taskId);
-      await fetchTaskResult(taskId, actionCtx.extras);
-    }
-  }
-  const ACTION_HANDLER_BY_NAME = {};
-  async function preloadActions(importers, actions) {
-    const componentsByModule = groupBy(actions, (actionDef) => actionDef.py_module);
-    await Promise.all(
-      Object.entries(componentsByModule).map(async ([module2, moduleActions]) => {
-        const moduleContent = await importers[module2]();
-        for (const action of moduleActions) {
-          if (ACTION_HANDLER_BY_NAME[action.name]) {
-            continue;
-          }
-          const actionHandler = moduleContent[action.name];
-          if (actionHandler) {
-            ACTION_HANDLER_BY_NAME[action.name] = actionHandler;
-          }
-        }
-      })
-    );
-  }
-  function clearActionHandlerCache_TEST() {
-    Object.keys(ACTION_HANDLER_BY_NAME).forEach((k) => delete ACTION_HANDLER_BY_NAME[k]);
-  }
-  class UnhandledActionError extends Error {
-    constructor(message, actionImpl) {
-      super(message);
-      this.actionImpl = actionImpl;
-    }
-  }
-  function resolveActionImpl(actionImpl, actionCtx) {
-    let actionHandler;
-    if (!ACTION_HANDLER_BY_NAME[actionImpl.name]) {
-      if (actionCtx.onUnhandledAction) {
-        actionHandler = actionCtx.onUnhandledAction;
-      } else {
-        throw new UnhandledActionError(`Action definition for impl "${actionImpl.name}" not found`, actionImpl);
-      }
-    } else {
-      actionHandler = ACTION_HANDLER_BY_NAME[actionImpl.name];
-    }
-    return actionHandler;
-  }
-  async function executeAction(input, action, actionCtx) {
-    if (isActionImpl(action)) {
-      const handler = resolveActionImpl(action, actionCtx);
-      const result = handler(actionCtx, action);
-      if (result instanceof Promise) {
-        await result;
-      }
-      return;
-    }
-    const executionId = nanoid$1();
-    const observable2 = actionCtx.wsClient.actionMessages$(executionId);
-    return new Promise((resolve, reject) => {
-      let activeTasks = 0;
-      let streamCompleted = false;
-      let isSettled = false;
-      let sub;
-      const checkForCompletion = () => {
-        if (!isSettled && streamCompleted && activeTasks === 0) {
-          isSettled = true;
-          sub.unsubscribe();
-          resolve();
-        }
-      };
-      const onError = (error) => {
-        if (!isSettled) {
-          isSettled = true;
-          sub.unsubscribe();
-          reject(error);
-        }
-      };
-      sub = observable2.pipe(
-        // eslint-disable-next-line @typescript-eslint/require-await
-        concatMap(async (actionImpl) => {
-          if (actionImpl) {
-            const handler = resolveActionImpl(actionImpl, actionCtx);
-            return [handler, actionImpl];
-          }
-          return null;
-        }),
-        takeWhile((res) => !!res)
-        // stop when falsy is returned from concatMap
-      ).subscribe({
-        complete: () => {
-          streamCompleted = true;
-          checkForCompletion();
-        },
-        error: onError,
-        // Reject the promise if there's an error in the stream
-        next: async ([handler, actionImpl]) => {
-          try {
-            activeTasks += 1;
-            const result = handler(actionCtx, actionImpl);
-            if (result instanceof Promise) {
-              await result;
-            }
-          } catch (error) {
-            onError(error);
-          } finally {
-            if (activeTasks > 0) {
-              activeTasks -= 1;
-            }
-            checkForCompletion();
-          }
-        }
-      });
-      invokeAction(input, executionId, action, actionCtx).catch(onError);
-    });
-  }
-  const noop = () => Promise.resolve();
-  function useActionIsLoading(action) {
-    if (!action || isActionImpl(action) || Array.isArray(action)) {
-      return false;
-    }
-    return useVariable(action.loading)[0];
+  const noop = () => Promise.resolve();
+  function useActionIsLoading(action) {
+    if (!action || isActionImpl(action) || Array.isArray(action)) {
+      return false;
+    }
+    return useVariable(action.loading)[0];
   }
   function useExecuteAction() {
     const { client: wsClient } = React$1.useContext(websocketCtx);
@@ -72434,16 +71670,55 @@ Inferred class string: "${iconClasses}."`
     }
     return callback;
   }
-  function isTaskResponse(response) {
-    return response && typeof response === "object" && "task_id" in response;
-  }
-  function getComponentRegistryKey(uid2, trigger, loopInstanceUid) {
-    let key = `_COMPONENT_${uid2}`;
-    if (trigger) {
-      key += "_TRIGGER";
+  function isConditionTrue(operator, value, other) {
+    if (operator === ConditionOperator.EQUAL) {
+      return value === other;
     }
-    if (loopInstanceUid) {
-      key += `_${loopInstanceUid}`;
+    if (operator === ConditionOperator.NOT_EQUAL) {
+      return value !== other;
+    }
+    if (operator === ConditionOperator.GREATER_EQUAL) {
+      return value >= other;
+    }
+    if (operator === ConditionOperator.GREATER_THAN) {
+      return value > other;
+    }
+    if (operator === ConditionOperator.LESS_EQUAL) {
+      return value <= other;
+    }
+    if (operator === ConditionOperator.LESS_THAN) {
+      return value < other;
+    }
+    if (operator === ConditionOperator.TRUTHY) {
+      return !!value;
+    }
+    throw new Error(`Unexpected operator ${String(operator)} passed to conditional (If) component`);
+  }
+  function useConditionOrVariable(arg, opts = {}) {
+    if (isCondition(arg)) {
+      const value = useVariable(arg.variable, opts)[0];
+      const other = useVariable(arg.other, opts)[0];
+      return isConditionTrue(arg.operator, value, other);
+    }
+    return useVariable(arg, opts)[0];
+  }
+  function useSwitchVariable(variable) {
+    const value = useConditionOrVariable(variable.value, { suspend: false });
+    const [valueMap] = useVariable(variable.value_map, { suspend: false });
+    const [defaultValue] = useVariable(variable.default, { suspend: false });
+    const lookupKey = String(value);
+    return valueMap[lookupKey] ?? defaultValue;
+  }
+  function isTaskResponse(response) {
+    return response && typeof response === "object" && "task_id" in response;
+  }
+  function getComponentRegistryKey(uid2, trigger, loopInstanceUid) {
+    let key = `_COMPONENT_${uid2}`;
+    if (trigger) {
+      key += "_TRIGGER";
+    }
+    if (loopInstanceUid) {
+      key += `_${loopInstanceUid}`;
     }
     return key;
   }
@@ -72686,6 +71961,18 @@ Inferred class string: "${iconClasses}."`
       [uid2]
     );
   }
+  const Center = styled.div`
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100%;
+
+    background: ${(props) => props.colored ? props.theme.colors.blue1 : ""};
+`;
   const ErrorBoundaryContext = React$1.createContext(null);
   const initialState = {
     didCatch: false,
@@ -72856,7 +72143,17 @@ Inferred class string: "${iconClasses}."`
     walk(renderer, []);
     return markers;
   }
-  function applyMarkers(renderer, markers, loopValue, itemKey) {
+  const MARKER_INDEX = "__index";
+  const MARKER_IS_LAST = "__is_last";
+  const MARKER_IS_FIRST = "__is_first";
+  function applyMarkers({
+    renderer,
+    markers,
+    loopValue,
+    itemKey,
+    index: index2,
+    itemsLength
+  }) {
     if (markers.length === 0) {
       return renderer;
     }
@@ -72864,7 +72161,17 @@ Inferred class string: "${iconClasses}."`
     for (const marker of markers) {
       switch (marker.type) {
         case "loop_var": {
-          set(clonedRenderer, marker.path, resolveNested(loopValue, marker.nested));
+          let value;
+          if (marker.nested.length === 1 && marker.nested[0] === MARKER_INDEX) {
+            value = index2;
+          } else if (marker.nested.length === 1 && marker.nested[0] === MARKER_IS_LAST) {
+            value = index2 === itemsLength - 1;
+          } else if (marker.nested.length === 1 && marker.nested[0] === MARKER_IS_FIRST) {
+            value = index2 === 0;
+          } else {
+            value = resolveNested(loopValue, marker.nested);
+          }
+          set(clonedRenderer, marker.path, value);
           break;
         }
         case "action": {
@@ -73087,7 +72394,7 @@ Inferred class string: "${iconClasses}."`
     line-height: 1.375rem;
     color: ${(props) => props.theme.colors.error};
 `;
-  const ErrorText = styled.span`
+  const ErrorText$1 = styled.span`
     font-size: 0.875rem;
     line-height: 1.25rem;
 `;
@@ -73132,7 +72439,7 @@ Inferred class string: "${iconClasses}."`
     const [cssValue] = useVariable(props.config?.raw_css);
     const [styles2, css2] = parseRawCss(cssValue);
     const defaultMessage = props.error instanceof UserError ? props.error.message : "Try again or contact the application owner.";
-    return /* @__PURE__ */ React.createElement(ErrorDisplayWrapper, { $rawCss: css2, style: styles2 }, /* @__PURE__ */ React.createElement(ContentWrapper, null, /* @__PURE__ */ React.createElement(ErrorContent, null, /* @__PURE__ */ React.createElement(ErrorTitle$1, null, /* @__PURE__ */ React.createElement(IconWrapper, null, /* @__PURE__ */ React.createElement(ErrorIcon, { "aria-hidden": true, className: "fa-solid fa-circle-xmark fa-lg" })), props?.config?.title ?? "Error"), /* @__PURE__ */ React.createElement(ErrorText, null, props?.config?.description ?? defaultMessage))), props.resetErrorBoundary && /* @__PURE__ */ React.createElement(RetryButton, { onClick: () => props.resetErrorBoundary(props.error), type: "button" }, /* @__PURE__ */ React.createElement("i", { "aria-hidden": true, className: "fa-solid fa-rotate fa-xl" })));
+    return /* @__PURE__ */ React.createElement(ErrorDisplayWrapper, { $rawCss: css2, style: styles2 }, /* @__PURE__ */ React.createElement(ContentWrapper, null, /* @__PURE__ */ React.createElement(ErrorContent, null, /* @__PURE__ */ React.createElement(ErrorTitle$1, null, /* @__PURE__ */ React.createElement(IconWrapper, null, /* @__PURE__ */ React.createElement(ErrorIcon, { "aria-hidden": true, className: "fa-solid fa-circle-xmark fa-lg" })), props?.config?.title ?? "Error"), /* @__PURE__ */ React.createElement(ErrorText$1, null, props?.config?.description ?? defaultMessage))), props.resetErrorBoundary && /* @__PURE__ */ React.createElement(RetryButton, { onClick: () => props.resetErrorBoundary(props.error), type: "button" }, /* @__PURE__ */ React.createElement("i", { "aria-hidden": true, className: "fa-solid fa-rotate fa-xl" })));
   }
   function cleanProps(props) {
     if ("children" in props && Array.isArray(props.children)) {
@@ -73927,7 +73234,7 @@ Inferred class string: "${iconClasses}."`
     }, [wsClient]);
     return /* @__PURE__ */ React.createElement(websocketCtx.Provider, { value: { client: wsClient } }, /* @__PURE__ */ React.createElement(DynamicContext, { contextComponents: props.daraData.context_components }, /* @__PURE__ */ React.createElement(StoreProviders, null, /* @__PURE__ */ React.createElement(ServerVariableSyncProvider, null, /* @__PURE__ */ React.createElement(RootWrapper, null, /* @__PURE__ */ React.createElement(NotificationWrapper, null), /* @__PURE__ */ React.createElement(Outlet, null), /* @__PURE__ */ React.createElement(VariableStateProvider, { wsClient }), props.daraData.enable_devtools && /* @__PURE__ */ React.createElement(DevTools, null))))));
   }
-  const Wrapper = styled.div`
+  const Wrapper$1 = styled.div`
     overflow: auto;
     display: flex;
     flex: 1 1 auto;
@@ -73938,6 +73245,1097 @@ Inferred class string: "${iconClasses}."`
 
     background-color: ${(props) => props.backgroundColor};
 `;
+  class SingleUseCache {
+    constructor(options = {}) {
+      this.cache = /* @__PURE__ */ new Map();
+      this.defaultTimeout = options.defaultTimeout ?? 5e3;
+    }
+    isEntryStale(entry, timeout) {
+      const timeoutMs = timeout ?? this.defaultTimeout;
+      return Date.now() - entry.timestamp > timeoutMs;
+    }
+    has(key, timeout) {
+      const entry = this.cache.get(key);
+      return entry ? !this.isEntryStale(entry, timeout) : false;
+    }
+    get(key, timeout) {
+      const entry = this.cache.get(key);
+      if (!entry || this.isEntryStale(entry, timeout)) {
+        return void 0;
+      }
+      this.delete(key);
+      return entry.data;
+    }
+    set(key, value) {
+      this.cache.set(key, {
+        data: value,
+        timestamp: Date.now()
+      });
+    }
+    delete(key) {
+      return this.cache.delete(key);
+    }
+    clear() {
+      this.cache.clear();
+    }
+    /**
+     * Set a value if it doesn't exist in the cache, otherwise return the existing value.
+     * The promise resolves the the new or existing value stored.
+     *
+     * @param key cache key
+     * @param computeFn function to compute the value
+     * @param timeout optional timeout in ms
+     */
+    setIfMissing(key, computeFn, timeout) {
+      const entry = this.cache.get(key);
+      if (entry && !this.isEntryStale(entry, timeout)) {
+        return Promise.resolve(entry.data);
+      }
+      const promise = computeFn();
+      this.set(key, promise);
+      return promise;
+    }
+    size() {
+      return this.cache.size;
+    }
+    keys() {
+      return this.cache.keys();
+    }
+    entries() {
+      return Array.from(this.cache.entries()).map(([key, entry]) => [key, entry.data]);
+    }
+  }
+  const NormalizedObject = object$3({
+    data: any(),
+    lookup: record(string(), any())
+  });
+  const TemplateChunk = object$3({
+    type: literal("template"),
+    template: NormalizedObject
+  });
+  const ActionChunk = object$3({
+    type: literal("actions"),
+    actions: record(string(), array$3(ActionImpl))
+  });
+  const DerivedVariableChunk = object$3({
+    type: literal("derived_variable"),
+    uid: string(),
+    result: object$3({ ok: boolean(), value: any() })
+  });
+  const PyComponentChunk = object$3({
+    type: literal("py_component"),
+    uid: string(),
+    result: object$3({ ok: boolean(), value: any() })
+  });
+  const ResponseChunk = union([TemplateChunk, ActionChunk, DerivedVariableChunk, PyComponentChunk]);
+  const PRELOAD_TIMEOUT = 5e3;
+  const preloadCache = new SingleUseCache({
+    defaultTimeout: PRELOAD_TIMEOUT
+  });
+  function createCacheKey(routeId, params) {
+    return `${routeId}:${JSON.stringify(params)}`;
+  }
+  async function* ndjson(response, signal) {
+    const reader = response.body.getReader();
+    const newline = /\r?\n/;
+    const decoder = new TextDecoder();
+    let buffer = "";
+    while (true) {
+      if (signal?.aborted) {
+        throw new DOMException("The operation was aborted", "AbortError");
+      }
+      const { done, value } = await reader.read();
+      if (done) {
+        if (buffer.length > 0) {
+          yield JSON.parse(buffer);
+        }
+        return;
+      }
+      const chunk = decoder.decode(value, { stream: true });
+      buffer += chunk;
+      const parts = buffer.split(newline);
+      buffer = parts.pop();
+      for (const part of parts) {
+        yield JSON.parse(part);
+      }
+    }
+  }
+  async function fetchRouteData(route, params, snapshot, signal) {
+    let actions = [];
+    if (Array.isArray(route.on_load)) {
+      actions = route.on_load;
+    } else if (route.on_load) {
+      actions = [route.on_load];
+    }
+    const actionPayloads = actions.filter(isAnnotatedAction).map((a2) => {
+      const kwargs = cleanKwargs(
+        Object.fromEntries(
+          Object.entries(a2.dynamic_kwargs).map(([k, v]) => {
+            return [k, resolveVariableStatic(v, snapshot, params)];
+          })
+        ),
+        null
+      );
+      return {
+        uid: a2.uid,
+        definition_uid: a2.definition_uid,
+        values: normalizeRequest(kwargs, a2.dynamic_kwargs)
+      };
+    });
+    const dvHandles = Object.values(route.dependency_graph?.derived_variables ?? {}).flatMap((dv) => {
+      const handle = preloadDerivedVariable(dv, snapshot, params);
+      if (!handle) {
+        return [];
+      }
+      return {
+        ...handle,
+        dv,
+        payload: {
+          values: normalizeRequest(cleanArgs(handle.result.values, null), dv.variables),
+          uid: dv.uid
+        }
+      };
+    });
+    const pyHandles = Object.values(route.dependency_graph?.py_components ?? {}).flatMap((py) => {
+      const handle = preloadServerComponent(py, snapshot, params);
+      if (!handle) {
+        return [];
+      }
+      const kwargValues = cleanKwargs(
+        Object.keys(py.props.dynamic_kwargs).reduce(
+          (acc, k, idx) => {
+            acc[k] = handle.result.values[idx];
+            return acc;
+          },
+          {}
+        )
+      );
+      return {
+        ...handle,
+        py,
+        payload: {
+          uid: py.uid,
+          name: py.name,
+          values: normalizeRequest(kwargValues, py.props.dynamic_kwargs)
+        }
+      };
+    });
+    const dvHandlesByUid = dvHandles.reduce(
+      (acc, h) => ({ ...acc, [h.dv.uid]: h }),
+      {}
+    );
+    const pyHandlesByUid = pyHandles.reduce(
+      (acc, h) => ({ ...acc, [h.py.uid]: h }),
+      {}
+    );
+    const wsClient = await window.dara.ws.getValue();
+    const wsChannel = await wsClient.getChannel();
+    const response = await request(`/api/core/route/${route.id}`, {
+      method: HTTP_METHOD.POST,
+      body: JSON.stringify({
+        action_payloads: actionPayloads,
+        derived_variable_payloads: dvHandles.map((h) => h.payload),
+        py_component_payloads: pyHandles.map((h) => h.payload),
+        ws_channel: wsChannel,
+        params
+      }),
+      signal
+    });
+    await handleAuthErrors(response, true);
+    if (!response.ok) {
+      const error = await response.json();
+      throw new LoaderError(error.detail);
+    }
+    const template = deferred();
+    const onLoadActions = deferred();
+    const resolvedDvs = /* @__PURE__ */ new Set();
+    const resolvedPyComponents = /* @__PURE__ */ new Set();
+    queueMicrotask(async () => {
+      try {
+        for await (const data2 of ndjson(response, signal)) {
+          const chunk = ResponseChunk.parse(data2);
+          if (chunk.type === "template") {
+            const component = denormalize(chunk.template.data, chunk.template.lookup);
+            template.resolve(component);
+          }
+          if (chunk.type === "actions") {
+            onLoadActions.resolve(actions.flatMap((a2) => isAnnotatedAction(a2) ? chunk.actions[a2.uid] : a2));
+          }
+          if (chunk.type === "derived_variable") {
+            dvHandlesByUid[chunk.uid]?.handle.resolve(chunk.result);
+            resolvedDvs.add(chunk.uid);
+          }
+          if (chunk.type === "py_component") {
+            pyHandlesByUid[chunk.uid]?.handle.resolve(chunk.result);
+            resolvedPyComponents.add(chunk.uid);
+          }
+        }
+      } catch (e2) {
+        template.reject(e2);
+        onLoadActions.reject(e2);
+        for (const [uid2, handle] of Object.entries(dvHandlesByUid)) {
+          if (!resolvedDvs.has(uid2)) {
+            handle.handle.reject(e2);
+          }
+        }
+        for (const [uid2, handle] of Object.entries(pyHandlesByUid)) {
+          if (!resolvedPyComponents.has(uid2)) {
+            handle.handle.reject(e2);
+          }
+        }
+      }
+    });
+    const [templateValue, onLoadActionsValue] = await Promise.all([template.getValue(), onLoadActions.getValue()]);
+    return {
+      template: templateValue,
+      on_load: onLoadActionsValue,
+      route_definition: route,
+      py_components: pyHandles,
+      derived_variables: dvHandles
+    };
+  }
+  function getFromPreloadCache(routeId, params) {
+    return preloadCache.get(createCacheKey(routeId, params));
+  }
+  function usePreloadRoute() {
+    const currentMatches = useMatches();
+    const { routeObjects, routeDefMap } = useRouterContext();
+    return Recoil_index_31(
+      ({ snapshot }) => async (url) => {
+        const matches2 = matchRoutes(routeObjects, url, window.dara?.base_url);
+        if (!matches2) {
+          return;
+        }
+        const release = snapshot.retain();
+        try {
+          await Promise.all(
+            matches2.filter(
+              (match2) => !currentMatches.some(
+                (m) => m.id === match2.route.id && isEqual$4(m.params, match2.params)
+              )
+            ).map((match2) => {
+              const routeDef = routeDefMap.get(match2.route.id);
+              if (!routeDef) {
+                return Promise.resolve();
+              }
+              return preloadCache.setIfMissing(createCacheKey(routeDef.id, match2.params), () => {
+                return fetchRouteData(routeDef, match2.params, snapshot);
+              });
+            })
+          );
+        } finally {
+          release();
+        }
+      },
+      [routeDefMap, routeObjects, currentMatches]
+    );
+  }
+  const STORE_EXTRAS_MAP = /* @__PURE__ */ new Map();
+  const STORE_VARIABLE_MAP = /* @__PURE__ */ new Map();
+  const STORE_SEQUENCE_MAP = /* @__PURE__ */ new Map();
+  const STORE_LATEST_VALUE_MAP = /* @__PURE__ */ new Map();
+  const ROUTE_MATCHES_KEY = "__route_matches";
+  function BackendStoreSync({ children }) {
+    const { client: client2 } = React__namespace.useContext(websocketCtx);
+    const getStoreValue = React__namespace.useCallback(async (itemKey) => {
+      const serializableExtras = STORE_EXTRAS_MAP.get(itemKey);
+      const response = await request(`/api/core/store/${itemKey}`, {}, serializableExtras?.extras ?? {});
+      await handleAuthErrors(response, true);
+      await validateResponse(response, `Failed to fetch the store value for key: ${itemKey}`);
+      const { value, sequence_number } = await response.json();
+      STORE_LATEST_VALUE_MAP.set(itemKey, value);
+      STORE_SEQUENCE_MAP.set(itemKey, sequence_number);
+      return value;
+    }, []);
+    const syncStoreValues = React__namespace.useCallback(
+      async ({ diff }) => {
+        const extrasMap = /* @__PURE__ */ new Map();
+        Array.from(diff.entries()).filter(
+          ([itemKey, value]) => !STORE_LATEST_VALUE_MAP.has(itemKey) || STORE_LATEST_VALUE_MAP.get(itemKey) !== value
+        ).forEach(([itemKey, value]) => {
+          STORE_LATEST_VALUE_MAP.set(itemKey, value);
+          const extras = STORE_EXTRAS_MAP.get(itemKey);
+          if (!extrasMap.has(extras)) {
+            extrasMap.set(extras, {});
+          }
+          extrasMap.get(extras)[itemKey] = value;
+        });
+        async function sendRequest(serializableExtras, storeDiff) {
+          const response = await request(
+            `/api/core/store`,
+            {
+              body: JSON.stringify({
+                values: storeDiff,
+                ws_channel: await client2.getChannel()
+              }),
+              method: "POST"
+            },
+            serializableExtras.extras
+          );
+          await handleAuthErrors(response, true);
+          await validateResponse(response, `Failed to sync the store values`);
+        }
+        await Promise.allSettled(
+          Array.from(extrasMap.entries()).map(
+            ([serializableExtras, storeDiff]) => sendRequest(serializableExtras, storeDiff)
+          )
+        );
+      },
+      [client2]
+    );
+    const applyPatchesToAtoms = Recoil_index_31(
+      ({ snapshot, set: set2 }) => async (storeUid, patches, sequenceNumber) => {
+        const expectedSequence = STORE_SEQUENCE_MAP.get(storeUid) || 0;
+        if (sequenceNumber !== expectedSequence + 1) {
+          console.warn(
+            `Sequence number mismatch for store ${storeUid}. Expected: ${expectedSequence + 1}, Got: ${sequenceNumber}. Rejecting patch.`
+          );
+          return;
+        }
+        STORE_SEQUENCE_MAP.set(storeUid, sequenceNumber);
+        const variableUids = STORE_VARIABLE_MAP.get(storeUid);
+        if (!variableUids) {
+          return;
+        }
+        const atomsToUpdate = [];
+        for (const variableUid of variableUids) {
+          const directAtom = atomRegistry.get(variableUid);
+          if (directAtom) {
+            atomsToUpdate.push({ atom: directAtom, variableUid });
+            continue;
+          }
+          const atomFamily2 = atomFamilyRegistry.get(variableUid);
+          if (atomFamily2) {
+            const familyMembers = atomFamilyMembersRegistry.get(atomFamily2);
+            if (familyMembers) {
+              for (const [, atomInstance] of familyMembers) {
+                atomsToUpdate.push({ atom: atomInstance, variableUid });
+              }
+            }
+          }
+        }
+        const currentValues = await Promise.all(
+          atomsToUpdate.map(async ({ atom: atom2, variableUid }) => {
+            try {
+              return {
+                atom: atom2,
+                variableUid,
+                currentValue: await snapshot.getPromise(atom2),
+                error: null
+              };
+            } catch (error) {
+              return {
+                atom: atom2,
+                variableUid,
+                currentValue: null,
+                error
+              };
+            }
+          })
+        );
+        const applyPatchToValue = (currentValue, variableUid) => {
+          try {
+            return applyPatch(currentValue, patches, false, false).newDocument;
+          } catch (error) {
+            console.warn(`Failed to apply patch to atom ${variableUid}:`, error);
+            return currentValue;
+          }
+        };
+        currentValues.forEach(({ atom: atom2, variableUid, currentValue, error }) => {
+          if (error) {
+            console.warn(`Failed to read current value for atom ${variableUid}:`, error);
+            return;
+          }
+          const patchedValue = applyPatchToValue(currentValue, variableUid);
+          set2(atom2, patchedValue);
+          STORE_LATEST_VALUE_MAP.set(storeUid, patchedValue);
+        });
+      },
+      []
+    );
+    const listenToStoreChanges = React__namespace.useCallback(
+      ({ updateItem }) => {
+        if (!client2) {
+          return;
+        }
+        const valueSub = client2.backendStoreMessages$().subscribe((message) => {
+          STORE_SEQUENCE_MAP.set(message.store_uid, message.sequence_number);
+          updateItem(message.store_uid, message.value);
+          STORE_LATEST_VALUE_MAP.set(message.store_uid, message.value);
+        });
+        const patchSub = client2.backendStorePatchMessages$().subscribe((message) => {
+          applyPatchesToAtoms(message.store_uid, message.patches, message.sequence_number);
+        });
+        return () => {
+          valueSub.unsubscribe();
+          patchSub.unsubscribe();
+        };
+      },
+      [client2, applyPatchesToAtoms]
+    );
+    return /* @__PURE__ */ React__namespace.createElement(RecoilSync_index_1, { listen: listenToStoreChanges, read: getStoreValue, storeKey: "BackendStore", write: syncStoreValues }, children);
+  }
+  function backendStoreEffect(variable, requestExtras) {
+    STORE_EXTRAS_MAP.set(variable.store.uid, requestExtras);
+    if (!STORE_VARIABLE_MAP.has(variable.store.uid)) {
+      STORE_VARIABLE_MAP.set(variable.store.uid, /* @__PURE__ */ new Set());
+    }
+    STORE_VARIABLE_MAP.get(variable.store.uid).add(variable.uid);
+    return RecoilSync_index_2({
+      /** Use store uid as the unique identifier */
+      itemKey: variable.store.uid,
+      refine: Refine_index_6(),
+      storeKey: "BackendStore",
+      write({ write: write2 }, newValue) {
+        if (variable.store.readonly) {
+          return;
+        }
+        if (newValue instanceof Recoil_index_1) {
+          return;
+        }
+        write2(variable.store.uid, newValue);
+      }
+    });
+  }
+  function getSessionKey(uid2) {
+    if (isEmbedded()) {
+      return `dara-session-${window.frameElement.dataset.daraPageId}-var-${uid2}`;
+    }
+    return `dara-session-${getSessionToken()}-var-${uid2}`;
+  }
+  function BrowserStoreSync({ children }) {
+    const getStoreValue = React__namespace.useCallback((itemKey) => {
+      const key = getSessionKey(itemKey);
+      return JSON.parse(localStorage.getItem(key) ?? "null");
+    }, []);
+    const syncStoreValues = React__namespace.useCallback(({ diff }) => {
+      for (const [itemKey, value] of diff.entries()) {
+        const key = getSessionKey(itemKey);
+        localStorage.setItem(key, JSON.stringify(value));
+      }
+    }, []);
+    const listenToStoreChanges = React__namespace.useCallback(({ updateItem }) => {
+      const listener2 = (e2) => {
+        if (e2.storageArea === localStorage) {
+          if (e2.key) {
+            const match2 = e2.key.match(/^dara-session-(.*)-var-(.*)$/);
+            if (match2) {
+              const [, sessionToken, uid2] = match2;
+              if (sessionToken === getSessionToken()) {
+                updateItem(uid2, JSON.parse(e2.newValue ?? "null"));
+              }
+            }
+          }
+        }
+      };
+      window.addEventListener("storage", listener2);
+      return () => {
+        window.removeEventListener("storage", listener2);
+      };
+    }, []);
+    return /* @__PURE__ */ React__namespace.createElement(RecoilSync_index_1, { listen: listenToStoreChanges, read: getStoreValue, storeKey: "BrowserStore", write: syncStoreValues }, children);
+  }
+  function PathParamSync({ children }) {
+    const navigate = useNavigate();
+    const location2 = useLocation();
+    const locationRef = useLatestRef$3(location2);
+    const matches2 = useMatches();
+    const matchesRef = useLatestRef$3(matches2);
+    const params = useParams();
+    const paramsRef = React__namespace.useRef(params);
+    const locationSubscribers = React__namespace.useRef([]);
+    React__namespace.useLayoutEffect(() => {
+      if (isEqual$4(paramsRef.current, params)) {
+        return;
+      }
+      paramsRef.current = params;
+      for (const subscriber of locationSubscribers.current) {
+        subscriber(params);
+      }
+    }, [paramsRef, params]);
+    const getStoreValue = React__namespace.useCallback(
+      (paramName) => {
+        return paramsRef.current[paramName] ?? null;
+      },
+      [paramsRef]
+    );
+    const writeStoreValue = React__namespace.useCallback(
+      async ({ diff }) => {
+        const newParams = mapValues({ ...paramsRef.current, ...Object.fromEntries(diff) }, (v) => String(v));
+        const loaderData = matchesRef.current.at(-1).loaderData;
+        const data2 = loaderData.data instanceof Promise ? await loaderData.data : loaderData.data;
+        const fullPathname = data2.route_definition.full_path;
+        navigate({
+          pathname: generatePath(fullPathname, newParams),
+          // preserve current search
+          search: locationRef.current.search
+        });
+      },
+      [matchesRef, navigate, paramsRef, locationRef]
+    );
+    const listenToStoreChanges = React__namespace.useCallback(({ updateItems }) => {
+      function handleUpdate(newParams) {
+        updateItems(new Map(Object.entries(newParams)));
+      }
+      locationSubscribers.current.push(handleUpdate);
+      return () => {
+        locationSubscribers.current = locationSubscribers.current.filter((item) => item !== handleUpdate);
+      };
+    }, []);
+    return /* @__PURE__ */ React__namespace.createElement(
+      RecoilSync_index_1,
+      {
+        listen: listenToStoreChanges,
+        read: getStoreValue,
+        write: writeStoreValue,
+        storeKey: "_PathParamStore"
+      },
+      children
+    );
+  }
+  function RouteMatchSync({ children }) {
+    const routerCtx = useRouterContext();
+    const matches2 = useMatches();
+    const matchesRef = React__namespace.useRef(matches2);
+    const matchesSubscribers = React__namespace.useRef([]);
+    React__namespace.useLayoutEffect(() => {
+      if (isEqual$4(matchesRef.current, matches2)) {
+        return;
+      }
+      matchesRef.current = matches2;
+      for (const subscriber of matchesSubscribers.current) {
+        subscriber(matches2);
+      }
+    }, [matchesRef, matches2]);
+    const getStoreValue = React__namespace.useCallback(() => {
+      return createRouteMatches(matchesRef.current, routerCtx.routeDefMap);
+    }, [matchesRef, routerCtx.routeDefMap]);
+    const listenToStoreChanges = React__namespace.useCallback(
+      ({ updateAllKnownItems }) => {
+        function handleUpdate(newMatches) {
+          const newRouteMatches = createRouteMatches(newMatches, routerCtx.routeDefMap);
+          updateAllKnownItems(/* @__PURE__ */ new Map([[ROUTE_MATCHES_KEY, newRouteMatches]]));
+        }
+        matchesSubscribers.current.push(handleUpdate);
+        return () => {
+          matchesSubscribers.current = matchesSubscribers.current.filter((item) => item !== handleUpdate);
+        };
+      },
+      [routerCtx.routeDefMap]
+    );
+    return (
+      // NOTE: write is not defined as we don't support updating the route matches
+      /* @__PURE__ */ React__namespace.createElement(RecoilSync_index_1, { listen: listenToStoreChanges, read: getStoreValue, storeKey: "_RouteMatchStore" }, children)
+    );
+  }
+  function localStorageEffect(variable, extrasSerializable, wsClient, taskContext) {
+    let firstRun = false;
+    return RecoilSync_index_2({
+      itemKey: variable.uid,
+      read: ({ read: read2 }) => {
+        const readValue = read2(variable.uid);
+        if (!firstRun) {
+          firstRun = true;
+          if (!readValue) {
+            const isDefaultDerived = isDerivedVariable(variable.default);
+            return isDefaultDerived ? getOrRegisterDerivedVariable(
+              variable.default,
+              wsClient,
+              taskContext,
+              extrasSerializable.extras
+            ) : variable.default;
+          }
+        }
+        return readValue;
+      },
+      refine: Refine_index_6(),
+      storeKey: "BrowserStore"
+    });
+  }
+  function urlEffect(variable) {
+    return RecoilSync_index_6({
+      history: "push",
+      itemKey: variable.store.query,
+      refine: Refine_index_6()
+    });
+  }
+  function pathParamEffect(variable) {
+    const itemKey = variable.store.param_name;
+    const effect2 = RecoilSync_index_2({
+      itemKey,
+      refine: Refine_index_6(),
+      storeKey: "_PathParamStore"
+    });
+    return (effectParams) => {
+      const cleanup = effect2(effectParams);
+      effectParams.setSelf(effectParams.getLoadable(effectParams.node).valueOrThrow());
+      return () => {
+        cleanup?.();
+      };
+    };
+  }
+  function routeMatchEffect() {
+    const effect2 = RecoilSync_index_2({
+      itemKey: ROUTE_MATCHES_KEY,
+      refine: Refine_index_6(),
+      storeKey: "_RouteMatchStore"
+    });
+    return (effectParams) => {
+      const cleanup = effect2(effectParams);
+      effectParams.setSelf(effectParams.getLoadable(effectParams.node).valueOrThrow());
+      return () => {
+        cleanup?.();
+      };
+    };
+  }
+  const STORES = {
+    BackendStore: {
+      effect: backendStoreEffect
+    },
+    BrowserStore: {
+      effect: localStorageEffect
+    },
+    QueryParamStore: {
+      effect: urlEffect
+    },
+    _PathParamStore: {
+      effect: pathParamEffect
+    },
+    _RouteMatchStore: {
+      effect: routeMatchEffect
+    }
+  };
+  function getEffect(variable) {
+    const storeName = variable.store?.__typename;
+    if (!storeName || !(storeName in STORES)) {
+      return null;
+    }
+    return STORES[storeName]?.effect ?? null;
+  }
+  function StoreProviders({ children }) {
+    return /* @__PURE__ */ React__namespace.createElement(BackendStoreSync, null, /* @__PURE__ */ React__namespace.createElement(BrowserStoreSync, null, children));
+  }
+  function warnUpdateOnDerivedState() {
+    console.warn("You tried to call update on variable with derived state, this is a noop and will be ignored.");
+  }
+  function useVariable(variable, opts = { serverVariable: "disallow" }) {
+    const extras = useRequestExtras();
+    const { client: wsClient } = React$1.useContext(websocketCtx);
+    const taskContext = useTaskContext();
+    const variablesContext = React$1.useContext(variablesCtx);
+    const bus = useEventBus();
+    if (!isVariable(variable)) {
+      const [state, setState] = React$1.useState(variable);
+      const [prevVariable, setPrevVariable] = React$1.useState(variable);
+      if (!isEqual$4(variable, prevVariable)) {
+        setState(variable);
+        setPrevVariable(variable);
+      }
+      return [state, setState];
+    }
+    variablesContext?.variables.current.add(variable.uid);
+    React$1.useEffect(() => {
+      return () => {
+        variablesContext?.variables.current.delete(variable.uid);
+      };
+    }, []);
+    if (isDerivedVariable(variable)) {
+      const selector2 = useDerivedVariable(variable, wsClient, taskContext, extras);
+      const selectorLoadable = Recoil_index_28(selector2);
+      React$1.useEffect(() => {
+        if (selectorLoadable.state !== "loading") {
+          bus.publish("DERIVED_VARIABLE_LOADED", { variable, value: selectorLoadable.contents });
+        }
+      }, [selectorLoadable]);
+      const deferred22 = useDeferLoadable(selectorLoadable, opts.suspend);
+      return [deferred22, warnUpdateOnDerivedState];
+    }
+    if (isSwitchVariable(variable)) {
+      return [useSwitchVariable(variable), warnUpdateOnDerivedState];
+    }
+    if (isStateVariable(variable)) {
+      const parentSelector = useDerivedVariable(variable.parent_variable, wsClient, taskContext, extras);
+      const parentLoadable = Recoil_index_28(parentSelector);
+      let stateValue;
+      switch (variable.property_name) {
+        case "loading":
+          stateValue = parentLoadable.state === "loading";
+          break;
+        case "error":
+          stateValue = parentLoadable.state === "hasError";
+          break;
+        case "hasValue":
+          stateValue = parentLoadable.state === "hasValue";
+          break;
+        default:
+          stateValue = false;
+      }
+      return [stateValue, warnUpdateOnDerivedState];
+    }
+    if (isServerVariable(variable)) {
+      if (opts.serverVariable === "disallow") {
+        throw new UserError("ServerVariable cannot be directly consumed by this component");
+      }
+      const atom2 = React$1.useMemo(() => getOrRegisterServerVariable(variable, extras), [variable, extras]);
+      const [seqNumber] = Recoil_index_22(atom2);
+      const fetcher = useTabularVariable(variable);
+      const { data: data2 } = reactQuery.useSuspenseQuery({
+        // use the seq number as a dependency to refetch on changes
+        queryKey: ["use-variable-server-variable", variable.uid, seqNumber],
+        queryFn: async () => {
+          const result = await fetcher(null, {
+            limit: 1,
+            offset: 0
+          });
+          return result.data;
+        },
+        refetchOnWindowFocus: false
+      });
+      return [data2?.[0] ?? null, warnUpdateOnDerivedState];
+    }
+    const recoilState = getOrRegisterPlainVariable(variable, wsClient, taskContext, extras);
+    if (!isDerivedVariable(variable.default)) {
+      const [value, setValue] = Recoil_index_22(recoilState);
+      React$1.useEffect(() => {
+        bus.publish("PLAIN_VARIABLE_LOADED", { variable, value });
+      }, [value]);
+      return [value, setValue];
+    }
+    const [loadable, setLoadable] = Recoil_index_23(recoilState);
+    React$1.useEffect(() => {
+      if (loadable.state !== "loading") {
+        bus.publish("PLAIN_VARIABLE_LOADED", { variable, value: loadable.contents });
+      }
+    }, [loadable]);
+    const deferred2 = useDeferLoadable(loadable, opts.suspend);
+    return [deferred2, setLoadable];
+  }
+  function flexStyles(props, displayCtx2, useDisplayContext) {
+    let flexBasis = props.basis;
+    let flexShrink = props.shrink;
+    let flexGrow = props.grow;
+    if (useDisplayContext) {
+      if (props.width && displayCtx2.direction === "horizontal") {
+        flexBasis ??= props.width;
+        flexShrink ??= "0";
+        flexGrow ??= "0";
+      }
+      if (props.height && displayCtx2.direction === "vertical") {
+        flexBasis ??= props.height;
+        flexShrink ??= "0";
+        flexGrow ??= "0";
+      }
+    }
+    if (props.hug || props.hug !== false && displayCtx2.hug) {
+      flexBasis ??= "content";
+      flexShrink ??= "1";
+      flexGrow ??= "0";
+    }
+    return { flexBasis, flexGrow, flexShrink };
+  }
+  function parseRawCss(rawCss) {
+    const isRawObject = typeof rawCss === "object" && rawCss !== null && rawCss !== void 0;
+    const componentCss = !isRawObject && typeof rawCss === "string" ? rawCss : "";
+    const styles2 = isRawObject ? rawCss : {};
+    return [styles2, componentCss];
+  }
+  function useComponentStyles(props, useDisplayContext = true, propName = "raw_css") {
+    const [rawCssValue] = useVariable(props[propName]);
+    const [rawStyles, rawCss] = parseRawCss(rawCssValue);
+    const displayCtx$1 = React$1.useContext(displayCtx);
+    const flexProps = flexStyles(props, displayCtx$1, useDisplayContext);
+    const styles2 = React$1.useMemo(() => {
+      const stylesObj = {
+        backgroundColor: props.background,
+        border: props.border,
+        borderRadius: props.border_radius,
+        color: props.color,
+        fontFamily: props.font,
+        fontSize: props.font_size,
+        fontStyle: props.italic ? "italic" : "normal",
+        fontWeight: props.bold ? "bold" : "normal",
+        gap: props.gap,
+        height: props.height,
+        margin: props.margin,
+        maxHeight: props.max_height,
+        maxWidth: props.max_width,
+        minHeight: props.min_height,
+        minWidth: props.min_width,
+        overflow: props.overflow,
+        padding: props.padding,
+        position: props.position,
+        textDecoration: props.underline ? "underline" : "none",
+        width: props.width,
+        ...flexProps,
+        ...rawStyles,
+        ...props.style ?? {}
+      };
+      return Object.fromEntries(Object.entries(stylesObj).filter(([, v]) => v !== null && v !== void 0));
+    }, [useDeepCompare(props), rawStyles, flexProps]);
+    return [styles2, rawCss];
+  }
+  const StyledDots$1 = injectCss(Dots);
+  function DefaultFallback$1(props) {
+    const [style, css2] = useComponentStyles(props);
+    return /* @__PURE__ */ React.createElement(StyledDots$1, { $rawCss: css2, style });
+  }
+  function DefaultFallbackStatic() {
+    return /* @__PURE__ */ React.createElement(StyledDots$1, { grey3: theme.colors.grey3, grey4: theme.colors.grey4 });
+  }
+  const Wrapper = styled.div`
+    display: flex;
+    flex: 1 1 0%;
+    flex-direction: column;
+    justify-content: center;
+
+    min-height: 100%;
+
+    background: ${(props) => `radial-gradient(circle closest-corner at 50% 40%, ${curriedTransparentize$1(
+    0.9,
+    props.theme.colors.background
+  )} 0%, ${curriedTransparentize$1(
+    0.8,
+    props.theme.colors.blue4
+  )} 70%),radial-gradient(circle closest-corner at 20% 150%, ${curriedTransparentize$1(
+    0.8,
+    props.theme.colors.error
+  )} 0%, ${curriedTransparentize$1(0.2, props.theme.colors.blue4)} 230%)`};
+`;
+  const Card = styled.div`
+    padding: 1.5rem;
+
+    color: ${(props) => props.theme.colors.text};
+
+    background-color: ${(props) => props.theme.colors.blue1};
+    border-radius: 1rem;
+    box-shadow: ${(props) => props.theme.shadow.medium};
+
+    @media (width >= 640px) {
+        width: 100%;
+        max-width: 24rem;
+        margin-right: auto;
+        margin-left: auto;
+    }
+`;
+  const FormWrapper = styled.div`
+    margin-top: 1.5rem;
+`;
+  const Form = styled.form`
+    > * + * {
+        margin-top: 1.5rem;
+    }
+`;
+  const ErrorText = styled.h3`
+    margin: 0;
+
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    color: ${(props) => props.theme.colors.error};
+    letter-spacing: 0.025em;
+
+    visibility: ${(props) => props.$hidden ? "hidden" : "visible"};
+`;
+  const Label = styled.label`
+    font-weight: 500;
+    line-height: 1.5rem;
+`;
+  const StyledInput = styled.input`
+    display: flex;
+    display: block;
+    align-items: center;
+
+    width: 100%;
+    height: 2.5rem;
+    margin-top: 0.5rem;
+    padding: 0 1rem;
+
+    font-size: 1rem;
+    line-height: 1.5rem;
+    color: ${(props) => props.theme.colors.text};
+
+    background-color: ${(props) => props.theme.colors.blue1};
+    border: none;
+    border-radius: 0.25rem;
+    outline: none;
+    box-shadow:
+        inset 0 0 0 0 ${(props) => props.theme.colors.blue1},
+        inset 0 0 0 1px ${(props) => props.$error ? props.theme.colors.error : props.theme.colors.grey2},
+        0 1px 2px 0 rgb(0 0 0 / 5%);
+
+    :active,
+    :focus {
+        box-shadow:
+            inset 0 0 0 0 ${(props) => props.theme.colors.blue1},
+            inset 0 0 0 2px ${(props) => props.$error ? props.theme.colors.error : props.theme.colors.primary},
+            0 1px 2px 0 rgb(0 0 0 / 5%);
+    }
+`;
+  const StyledButton = styled(Button$1)`
+    width: 100%;
+    font-weight: 600;
+    line-height: 1.5rem;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
+
+    :active,
+    :focus {
+        outline-color: ${(props) => props.theme.colors.primary};
+        outline-width: 2px;
+        outline-offset: 2px;
+    }
+`;
+  function BasicAuthLogin() {
+    const [isVerifyingToken, setIsVerifyingToken] = React$1.useState(true);
+    const [isLoggingIn, setIsLoggingIn] = React$1.useState(false);
+    const [username, setUsername] = React$1.useState("");
+    const [password, setPassword] = React$1.useState("");
+    const [isError2, setIsError] = React$1.useState(false);
+    const location2 = useLocation();
+    const navigate = useNavigate();
+    const { defaultPath } = useRouterContext();
+    const queryParams = new URLSearchParams(location2.search);
+    const previousLocation = queryParams.get("referrer") ?? defaultPath;
+    const login = async () => {
+      setIsLoggingIn(true);
+      setIsError(false);
+      try {
+        const sessionToken = await requestSessionToken({ password, username });
+        if (sessionToken) {
+          setSessionToken(sessionToken);
+          navigate(decodeURIComponent(previousLocation));
+        }
+      } catch {
+        setIsError(true);
+      }
+      setIsLoggingIn(false);
+    };
+    React$1.useEffect(() => {
+      if (getSessionToken()) {
+        verifySessionToken().then((verified) => {
+          if (verified) {
+            navigate(decodeURIComponent(previousLocation), { replace: true });
+          } else {
+            setIsVerifyingToken(false);
+          }
+        });
+      } else {
+        setIsVerifyingToken(false);
+      }
+    }, []);
+    if (isVerifyingToken) {
+      return /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(DefaultFallback$1, null));
+    }
+    return /* @__PURE__ */ React.createElement(Wrapper, null, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(FormWrapper, null, /* @__PURE__ */ React.createElement(
+      Form,
+      {
+        onSubmit: (e2) => {
+          e2.preventDefault();
+          login();
+        }
+      },
+      /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Label, { htmlFor: "username" }, "Username"), /* @__PURE__ */ React.createElement(
+        StyledInput,
+        {
+          $error: isError2,
+          id: "username",
+          onChange: (e2) => setUsername(e2.target.value),
+          required: true,
+          type: "text",
+          value: username
+        }
+      )),
+      /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Label, { htmlFor: "password" }, "Password"), /* @__PURE__ */ React.createElement(
+        StyledInput,
+        {
+          $error: isError2,
+          id: "password",
+          onChange: (e2) => setPassword(e2.target.value),
+          required: true,
+          type: "password",
+          value: password
+        }
+      )),
+      /* @__PURE__ */ React.createElement(ErrorText, { $hidden: !isError2, style: { marginTop: "1rem" } }, "Incorrect Username or Password"),
+      /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+        StyledButton,
+        {
+          loading: isLoggingIn,
+          style: { color: "white" },
+          styling: "primary",
+          type: "submit"
+        },
+        "Sign in"
+      ))
+    ))));
+  }
+  function BasicAuthLogout() {
+    React$1.useEffect(() => {
+      revokeSession().then(() => {
+        setSessionToken(null);
+        window.location.href = `${window.dara.base_url}/login`;
+      });
+    }, []);
+    return null;
+  }
+  function DefaultAuthLogin() {
+    const location2 = useLocation();
+    const navigate = useNavigate();
+    const { defaultPath } = useRouterContext();
+    const queryParams = new URLSearchParams(location2.search);
+    const previousLocation = queryParams.get("referrer") ?? defaultPath;
+    async function getNewToken() {
+      const sessionToken = await requestSessionToken({});
+      if (sessionToken) {
+        setSessionToken(sessionToken);
+        navigate(decodeURIComponent(previousLocation));
+      }
+    }
+    React$1.useEffect(() => {
+      if (getSessionToken()) {
+        verifySessionToken().then((verified) => {
+          if (verified) {
+            navigate(decodeURIComponent(previousLocation), { replace: true });
+          } else {
+            getNewToken();
+          }
+        });
+      } else {
+        getNewToken();
+      }
+    }, []);
+    return /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(DefaultFallback$1, null));
+  }
+  const CenteredDivWithGap$1 = styled(Center)`
+    gap: 1rem;
+    margin: 10px;
+    text-align: center;
+`;
+  const config401 = {
+    description: "Your login session may have expired. Try again.",
+    styling: "primary",
+    title: "We were not able to authenticate you"
+  };
+  const errorMessages = {
+    "403": {
+      description: "You are not authorised to access this application. Please contact the application owner to enable access.",
+      styling: "error",
+      title: "We were not able to authenticate you"
+    },
+    "404": {
+      description: "The requested page could not be found.",
+      styling: "error",
+      title: "Page not found"
+    },
+    "401": config401,
+    default: config401
+  };
+  function ErrorPage(props) {
+    const { search } = useLocation();
+    const query = React$1.useMemo(() => new URLSearchParams(search), [search]);
+    const code = props.code ?? query.get("code");
+    const errorConfig = code && errorMessages[code] || errorMessages.default;
+    return /* @__PURE__ */ React.createElement(CenteredDivWithGap$1, null, /* @__PURE__ */ React.createElement("h1", null, errorConfig.title), /* @__PURE__ */ React.createElement("p", null, errorConfig.description), /* @__PURE__ */ React.createElement(Button$1, { href: "/login", styling: errorConfig.styling }, "Retry"));
+  }
   const CenteredDivWithGap = styled.div`
     display: flex;
     flex: 1;
@@ -74076,292 +74474,7 @@ body,
         }
       }
     }, [navigation.state]);
-    return /* @__PURE__ */ React.createElement(PathParamSync, null, /* @__PURE__ */ React.createElement(RecoilSync_index_3, { ...syncOptions }, /* @__PURE__ */ React.createElement(StyleRoot, null, /* @__PURE__ */ React.createElement(Outlet, null))));
-  }
-  class SingleUseCache {
-    constructor(options = {}) {
-      this.cache = /* @__PURE__ */ new Map();
-      this.defaultTimeout = options.defaultTimeout ?? 5e3;
-    }
-    isEntryStale(entry, timeout) {
-      const timeoutMs = timeout ?? this.defaultTimeout;
-      return Date.now() - entry.timestamp > timeoutMs;
-    }
-    has(key, timeout) {
-      const entry = this.cache.get(key);
-      return entry ? !this.isEntryStale(entry, timeout) : false;
-    }
-    get(key, timeout) {
-      const entry = this.cache.get(key);
-      if (!entry || this.isEntryStale(entry, timeout)) {
-        return void 0;
-      }
-      this.delete(key);
-      return entry.data;
-    }
-    set(key, value) {
-      this.cache.set(key, {
-        data: value,
-        timestamp: Date.now()
-      });
-    }
-    delete(key) {
-      return this.cache.delete(key);
-    }
-    clear() {
-      this.cache.clear();
-    }
-    /**
-     * Set a value if it doesn't exist in the cache, otherwise return the existing value.
-     * The promise resolves the the new or existing value stored.
-     *
-     * @param key cache key
-     * @param computeFn function to compute the value
-     * @param timeout optional timeout in ms
-     */
-    setIfMissing(key, computeFn, timeout) {
-      const entry = this.cache.get(key);
-      if (entry && !this.isEntryStale(entry, timeout)) {
-        return Promise.resolve(entry.data);
-      }
-      const promise = computeFn();
-      this.set(key, promise);
-      return promise;
-    }
-    size() {
-      return this.cache.size;
-    }
-    keys() {
-      return this.cache.keys();
-    }
-    entries() {
-      return Array.from(this.cache.entries()).map(([key, entry]) => [key, entry.data]);
-    }
-  }
-  const NormalizedObject = object$3({
-    data: any(),
-    lookup: record(string(), any())
-  });
-  const TemplateChunk = object$3({
-    type: literal("template"),
-    template: NormalizedObject
-  });
-  const ActionChunk = object$3({
-    type: literal("actions"),
-    actions: record(string(), array$3(ActionImpl))
-  });
-  const DerivedVariableChunk = object$3({
-    type: literal("derived_variable"),
-    uid: string(),
-    result: object$3({ ok: boolean(), value: any() })
-  });
-  const PyComponentChunk = object$3({
-    type: literal("py_component"),
-    uid: string(),
-    result: object$3({ ok: boolean(), value: any() })
-  });
-  const ResponseChunk = union([TemplateChunk, ActionChunk, DerivedVariableChunk, PyComponentChunk]);
-  const PRELOAD_TIMEOUT = 5e3;
-  const preloadCache = new SingleUseCache({
-    defaultTimeout: PRELOAD_TIMEOUT
-  });
-  function createCacheKey(routeId, params) {
-    return `${routeId}:${JSON.stringify(params)}`;
-  }
-  async function* ndjson(response, signal) {
-    const reader = response.body.getReader();
-    const newline = /\r?\n/;
-    const decoder = new TextDecoder();
-    let buffer = "";
-    while (true) {
-      if (signal?.aborted) {
-        throw new DOMException("The operation was aborted", "AbortError");
-      }
-      const { done, value } = await reader.read();
-      if (done) {
-        if (buffer.length > 0) {
-          yield JSON.parse(buffer);
-        }
-        return;
-      }
-      const chunk = decoder.decode(value, { stream: true });
-      buffer += chunk;
-      const parts = buffer.split(newline);
-      buffer = parts.pop();
-      for (const part of parts) {
-        yield JSON.parse(part);
-      }
-    }
-  }
-  async function fetchRouteData(route, params, snapshot, signal) {
-    let actions = [];
-    if (Array.isArray(route.on_load)) {
-      actions = route.on_load;
-    } else if (route.on_load) {
-      actions = [route.on_load];
-    }
-    const actionPayloads = actions.filter(isAnnotatedAction).map((a2) => {
-      const kwargs = cleanKwargs(
-        Object.fromEntries(
-          Object.entries(a2.dynamic_kwargs).map(([k, v]) => {
-            return [k, resolveVariableStatic(v, snapshot, params)];
-          })
-        ),
-        null
-      );
-      return {
-        uid: a2.uid,
-        definition_uid: a2.definition_uid,
-        values: normalizeRequest(kwargs, a2.dynamic_kwargs)
-      };
-    });
-    const dvHandles = Object.values(route.dependency_graph?.derived_variables ?? {}).flatMap((dv) => {
-      const handle = preloadDerivedVariable(dv, snapshot, params);
-      if (!handle) {
-        return [];
-      }
-      return {
-        ...handle,
-        dv,
-        payload: {
-          values: normalizeRequest(cleanArgs(handle.result.values, null), dv.variables),
-          uid: dv.uid
-        }
-      };
-    });
-    const pyHandles = Object.values(route.dependency_graph?.py_components ?? {}).flatMap((py) => {
-      const handle = preloadServerComponent(py, snapshot, params);
-      if (!handle) {
-        return [];
-      }
-      const kwargValues = cleanKwargs(
-        Object.keys(py.props.dynamic_kwargs).reduce(
-          (acc, k, idx) => {
-            acc[k] = handle.result.values[idx];
-            return acc;
-          },
-          {}
-        )
-      );
-      return {
-        ...handle,
-        py,
-        payload: {
-          uid: py.uid,
-          name: py.name,
-          values: normalizeRequest(kwargValues, py.props.dynamic_kwargs)
-        }
-      };
-    });
-    const dvHandlesByUid = dvHandles.reduce(
-      (acc, h) => ({ ...acc, [h.dv.uid]: h }),
-      {}
-    );
-    const pyHandlesByUid = pyHandles.reduce(
-      (acc, h) => ({ ...acc, [h.py.uid]: h }),
-      {}
-    );
-    const wsClient = await window.dara.ws.getValue();
-    const wsChannel = await wsClient.getChannel();
-    const response = await request(`/api/core/route/${route.id}`, {
-      method: HTTP_METHOD.POST,
-      body: JSON.stringify({
-        action_payloads: actionPayloads,
-        derived_variable_payloads: dvHandles.map((h) => h.payload),
-        py_component_payloads: pyHandles.map((h) => h.payload),
-        ws_channel: wsChannel,
-        params
-      }),
-      signal
-    });
-    await handleAuthErrors(response, true);
-    if (!response.ok) {
-      const error = await response.json();
-      throw new LoaderError(error.detail);
-    }
-    const template = deferred();
-    const onLoadActions = deferred();
-    const resolvedDvs = /* @__PURE__ */ new Set();
-    const resolvedPyComponents = /* @__PURE__ */ new Set();
-    queueMicrotask(async () => {
-      try {
-        for await (const data2 of ndjson(response, signal)) {
-          const chunk = ResponseChunk.parse(data2);
-          if (chunk.type === "template") {
-            const component = denormalize(chunk.template.data, chunk.template.lookup);
-            template.resolve(component);
-          }
-          if (chunk.type === "actions") {
-            onLoadActions.resolve(actions.flatMap((a2) => isAnnotatedAction(a2) ? chunk.actions[a2.uid] : a2));
-          }
-          if (chunk.type === "derived_variable") {
-            dvHandlesByUid[chunk.uid]?.handle.resolve(chunk.result);
-            resolvedDvs.add(chunk.uid);
-          }
-          if (chunk.type === "py_component") {
-            pyHandlesByUid[chunk.uid]?.handle.resolve(chunk.result);
-            resolvedPyComponents.add(chunk.uid);
-          }
-        }
-      } catch (e2) {
-        template.reject(e2);
-        onLoadActions.reject(e2);
-        for (const [uid2, handle] of Object.entries(dvHandlesByUid)) {
-          if (!resolvedDvs.has(uid2)) {
-            handle.handle.reject(e2);
-          }
-        }
-        for (const [uid2, handle] of Object.entries(pyHandlesByUid)) {
-          if (!resolvedPyComponents.has(uid2)) {
-            handle.handle.reject(e2);
-          }
-        }
-      }
-    });
-    const [templateValue, onLoadActionsValue] = await Promise.all([template.getValue(), onLoadActions.getValue()]);
-    return {
-      template: templateValue,
-      on_load: onLoadActionsValue,
-      route_definition: route,
-      py_components: pyHandles,
-      derived_variables: dvHandles
-    };
-  }
-  function getFromPreloadCache(routeId, params) {
-    return preloadCache.get(createCacheKey(routeId, params));
-  }
-  function usePreloadRoute() {
-    const currentMatches = useMatches();
-    const { routeObjects, routeDefMap } = useRouterContext();
-    return Recoil_index_31(
-      ({ snapshot }) => async (url) => {
-        const matches2 = matchRoutes(routeObjects, url, window.dara?.base_url);
-        if (!matches2) {
-          return;
-        }
-        const release = snapshot.retain();
-        try {
-          await Promise.all(
-            matches2.filter(
-              (match2) => !currentMatches.some(
-                (m) => m.id === match2.route.id && isEqual$4(m.params, match2.params)
-              )
-            ).map((match2) => {
-              const routeDef = routeDefMap.get(match2.route.id);
-              if (!routeDef) {
-                return Promise.resolve();
-              }
-              return preloadCache.setIfMissing(createCacheKey(routeDef.id, match2.params), () => {
-                return fetchRouteData(routeDef, match2.params, snapshot);
-              });
-            })
-          );
-        } finally {
-          release();
-        }
-      },
-      [routeDefMap, routeObjects, currentMatches]
-    );
+    return /* @__PURE__ */ React.createElement(PathParamSync, null, /* @__PURE__ */ React.createElement(RouteMatchSync, null, /* @__PURE__ */ React.createElement(RecoilSync_index_3, { ...syncOptions }, /* @__PURE__ */ React.createElement(StyleRoot, null, /* @__PURE__ */ React.createElement(Outlet, null)))));
   }
   function shouldHoldPromise(route) {
     return !route.fallback;
@@ -74607,7 +74720,8 @@ body,
       routeDefinitions: config2.router.children,
       routeObjects: userRoutes,
       routeDefMap,
-      defaultPath
+      defaultPath,
+      routeMatches: config2.router.route_matches
     };
   }
   function RouterRoot({ daraData }) {
@@ -74619,7 +74733,8 @@ body,
         routeDefinitions: routerData.routeDefinitions,
         routeObjects: routerData.routeObjects,
         routeDefMap: routerData.routeDefMap,
-        defaultPath: routerData.defaultPath
+        defaultPath: routerData.defaultPath,
+        routeMatches: routerData.routeMatches
       },
       /* @__PURE__ */ React.createElement(RouterProvider2, { router: routerData.router })
     );
@@ -74644,6 +74759,46 @@ body,
     const root = clientExports.createRoot(container);
     root.render(/* @__PURE__ */ React.createElement(Root, { daraData, queryClient }));
   }
+  const safeGeneratePath = (path, params) => {
+    try {
+      return generatePath(path, params);
+    } catch {
+      return path;
+    }
+  };
+  function useResolvedTo(path) {
+    if (typeof path === "string") {
+      return path;
+    }
+    if (!path.params || !path.pathname) {
+      return path;
+    }
+    const resolvedParams = Object.fromEntries(
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      Object.entries(path.params).map(([key, value]) => [key, useVariable(value)[0]])
+    );
+    const resolvedPath = safeGeneratePath(path.pathname, resolvedParams);
+    return { ...path, pathname: resolvedPath };
+  }
+  async function resolveTo(path, ctx) {
+    if (typeof path === "string") {
+      return path;
+    }
+    if (!path.params || !path.pathname) {
+      return path;
+    }
+    const values = await Promise.all(
+      Object.values(path.params).map((value) => {
+        if (!isVariable(value)) {
+          return Promise.resolve(value);
+        }
+        return resolveVariable(value, ctx.wsClient, ctx.taskCtx, ctx.extras, (v) => ctx.snapshot.getPromise(v));
+      })
+    );
+    const resolvedParams = Object.fromEntries(Object.keys(path.params).map((key, idx) => [key, values[idx]]));
+    const resolvedPath = safeGeneratePath(path.pathname, resolvedParams);
+    return { ...path, pathname: resolvedPath };
+  }
   function getBasename() {
     if (window.dara.base_url !== "") {
       return new URL(window.dara.base_url, window.origin).pathname;
@@ -74665,7 +74820,7 @@ body,
     }
     return pathname.slice(startIndex) || "/";
   }
-  const NavigateTo = (ctx, actionImpl) => {
+  const NavigateTo = async (ctx, actionImpl) => {
     const basename = getBasename();
     let isExternal = false;
     let to = actionImpl.url;
@@ -74697,7 +74852,8 @@ body,
       window.location.href = to;
       return;
     }
-    ctx.navigate(to, actionImpl.options);
+    const resolvedTo = await resolveTo(to, ctx);
+    ctx.navigate(resolvedTo, actionImpl.options);
   };
   const ResetVariables = (ctx, actionImpl) => {
     actionImpl.variables.filter(isVariable).forEach((variable) => {
@@ -98212,7 +98368,7 @@ body,
         ${(props) => props.$inactiveCss}
     }
 `;
-  function Link(props) {
+  function LinkImpl(props) {
     const displayCtx$1 = React__namespace.useContext(displayCtx);
     const [style, css2] = useComponentStyles(props);
     const [activeStyle, activeCss] = useComponentStyles(props, true, "active_css");
@@ -98281,6 +98437,14 @@ body,
       props.children.map((child, idx) => /* @__PURE__ */ React__namespace.createElement(DynamicComponent$1, { component: child, key: idx }))
     ));
   }
+  function LinkResolveImpl(props) {
+    const to = useResolvedTo(props.to);
+    return /* @__PURE__ */ React__namespace.createElement(LinkImpl, { ...props, to });
+  }
+  function Link(props) {
+    const [to] = useVariable(props.to);
+    return /* @__PURE__ */ React__namespace.createElement(LinkResolveImpl, { ...props, to, key: JSON.stringify(to) });
+  }
   const StyledLink = styled(Link)`
     cursor: pointer;
 
@@ -98441,7 +98605,7 @@ body,
     const logoSrc = theme2.themeType === "dark" ? DaraDark : DaraLight;
     const daraLogo = /* @__PURE__ */ React.createElement("img", { alt: "Dara Logo", src: logoSrc });
     const showPoweredBy = props.powered_by_causalens ?? config2.powered_by_causalens;
-    return /* @__PURE__ */ React.createElement(Wrapper, { backgroundColor: theme2.colors.background }, props.side_bar_position === "right" && /* @__PURE__ */ React.createElement(Wrapper, null, props.content && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.content })), /* @__PURE__ */ React.createElement(SideBar, { style: { padding: props.side_bar_padding }, width: props.side_bar_width }, !props.hide_logo && props.logo_position !== "bottom" && logo, /* @__PURE__ */ React.createElement(Wrapper, { direction: "column" }, /* @__PURE__ */ React.createElement(directionCtx.Provider, { value: { direction: "column" } }, props.side_bar && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.side_bar }))), !props.hide_logo && props.logo_position === "bottom" && logo, /* @__PURE__ */ React.createElement(LogoutButton$1, { href: "/logout", styling: "error" }, /* @__PURE__ */ React.createElement(LogoutArrow$1, { style: { marginRight: "0.5rem" } }), "Logout"), /* @__PURE__ */ React.createElement(BuiltWithLink, { href: "https://github.com/causalens/dara", target: "_blank", rel: "noopener noreferrer" }, "Built with ", daraLogo), showPoweredBy && /* @__PURE__ */ React.createElement(PoweredByCausalens, null)), props.side_bar_position !== "right" && /* @__PURE__ */ React.createElement(Wrapper, { style: { padding: "2rem 3rem" } }, props.content && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.content })));
+    return /* @__PURE__ */ React.createElement(Wrapper$1, { backgroundColor: theme2.colors.background }, props.side_bar_position === "right" && /* @__PURE__ */ React.createElement(Wrapper$1, null, props.content && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.content })), /* @__PURE__ */ React.createElement(SideBar, { style: { padding: props.side_bar_padding }, width: props.side_bar_width }, !props.hide_logo && props.logo_position !== "bottom" && logo, /* @__PURE__ */ React.createElement(Wrapper$1, { direction: "column" }, /* @__PURE__ */ React.createElement(directionCtx.Provider, { value: { direction: "column" } }, props.side_bar && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.side_bar }))), !props.hide_logo && props.logo_position === "bottom" && logo, /* @__PURE__ */ React.createElement(LogoutButton$1, { href: "/logout", styling: "error" }, /* @__PURE__ */ React.createElement(LogoutArrow$1, { style: { marginRight: "0.5rem" } }), "Logout"), /* @__PURE__ */ React.createElement(BuiltWithLink, { href: "https://github.com/causalens/dara", target: "_blank", rel: "noopener noreferrer" }, "Built with ", daraLogo), showPoweredBy && /* @__PURE__ */ React.createElement(PoweredByCausalens, null)), props.side_bar_position !== "right" && /* @__PURE__ */ React.createElement(Wrapper$1, { style: { padding: "2rem 3rem" } }, props.content && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.content })));
   }
   const shouldForwardProp = (prop) => !["width"].includes(prop);
   const TopBar = styled.div.withConfig({ shouldForwardProp })`
@@ -98502,7 +98666,7 @@ body,
         color: ${(props) => props.theme.colors.blue1};
     }
 `;
-  const RouteButtons = styled(Wrapper)`
+  const RouteButtons = styled(Wrapper$1)`
     gap: 0.5rem;
     align-items: center;
 `;
@@ -98523,7 +98687,7 @@ body,
     const logo = props.logo_path && /* @__PURE__ */ React.createElement(LogoImage, { alt: "Logo", src: prependBaseUrl(props.logo_path), width: props.logo_width });
     const logoSrc = theme2.themeType === "dark" ? DaraDark : DaraLight;
     const daraLogo = /* @__PURE__ */ React.createElement("img", { alt: "Dara", src: logoSrc });
-    return /* @__PURE__ */ React.createElement(Wrapper, { backgroundColor: theme2.colors.background, direction: "column" }, /* @__PURE__ */ React.createElement(TopBar, { height: props.top_bar_height, style: { padding: props.top_bar_padding } }, /* @__PURE__ */ React.createElement(TopBarContent, null, !props.hide_logo && logo, props.top_bar && /* @__PURE__ */ React.createElement(RouteButtons, { direction: "row" }, /* @__PURE__ */ React.createElement(directionCtx.Provider, { value: { direction: "row" } }, props.top_bar && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.top_bar }))), /* @__PURE__ */ React.createElement(LogoutButton, { href: "/logout", styling: "error" }, /* @__PURE__ */ React.createElement(LogoutArrow, { style: { marginRight: "0.5rem" } }), "Logout")), /* @__PURE__ */ React.createElement(BuiltWithSpan, null, "Built with ", daraLogo)), /* @__PURE__ */ React.createElement(Wrapper, { style: { padding: "2rem 3rem" } }, props.content && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.content })));
+    return /* @__PURE__ */ React.createElement(Wrapper$1, { backgroundColor: theme2.colors.background, direction: "column" }, /* @__PURE__ */ React.createElement(TopBar, { height: props.top_bar_height, style: { padding: props.top_bar_padding } }, /* @__PURE__ */ React.createElement(TopBarContent, null, !props.hide_logo && logo, props.top_bar && /* @__PURE__ */ React.createElement(RouteButtons, { direction: "row" }, /* @__PURE__ */ React.createElement(directionCtx.Provider, { value: { direction: "row" } }, props.top_bar && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.top_bar }))), /* @__PURE__ */ React.createElement(LogoutButton, { href: "/logout", styling: "error" }, /* @__PURE__ */ React.createElement(LogoutArrow, { style: { marginRight: "0.5rem" } }), "Logout")), /* @__PURE__ */ React.createElement(BuiltWithSpan, null, "Built with ", daraLogo)), /* @__PURE__ */ React.createElement(Wrapper$1, { style: { padding: "2rem 3rem" } }, props.content && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.content })));
   }
   const RowDots = styled(Dots)`
     height: 2.5rem;
@@ -98536,6 +98700,19 @@ body,
   function DefaultFallback(props) {
     return /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.component });
   }
+  function Match(props) {
+    const [value] = useVariable(props.value, { suspend: false });
+    const component = React$1.useMemo(() => {
+      if (value in props.when) {
+        return props.when[value];
+      }
+      return props.default;
+    }, [value, props.when, props.default]);
+    if (!component) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(DynamicComponent$1, { component });
+  }
   const createItemData = (items, renderer, markers, getItemKey) => ({
     items,
     renderer,
@@ -98546,12 +98723,14 @@ body,
     const transformedRenderer = React__namespace.useMemo(() => {
       let component;
       try {
-        component = applyMarkers(
-          props.data.renderer,
-          props.data.markers,
-          props.data.items[props.index],
-          props.data.getItemKey(props.index, props.data)
-        );
+        component = applyMarkers({
+          renderer: props.data.renderer,
+          markers: props.data.markers,
+          loopValue: props.data.items[props.index],
+          itemKey: props.data.getItemKey(props.index, props.data),
+          index: props.index,
+          itemsLength: props.data.items.length
+        });
       } catch (e2) {
         console.error("Failed to apply markers", e2);
         component = copy(props.data.renderer);
@@ -98655,6 +98834,7 @@ body,
   exports.Link = Link;
   exports.LoaderError = LoaderError;
   exports.LockSecuredCache = SingleUseCache;
+  exports.Match = Match;
   exports.Menu = Menu;
   exports.MenuLink = MenuLink;
   exports.Navigate = Navigate;
@@ -98684,7 +98864,7 @@ body,
   exports.VariableCtx = variablesCtx;
   exports.WebSocketClient = WebSocketClient;
   exports.WebSocketCtx = websocketCtx;
-  exports.Wrapper = Wrapper;
+  exports.Wrapper = Wrapper$1;
   exports.atomFamilyMembersRegistry = atomFamilyMembersRegistry;
   exports.atomFamilyRegistry = atomFamilyRegistry;
   exports.atomRegistry = atomRegistry;
@@ -98695,6 +98875,7 @@ body,
   exports.clearRegistries_TEST = clearRegistries_TEST;
   exports.combineFilters = combineFilters;
   exports.createRouteLoader = createRouteLoader;
+  exports.createRouteMatches = createRouteMatches;
   exports.createRouter = createRouter;
   exports.default = run;
   exports.deferred = deferred;
@@ -98737,6 +98918,7 @@ body,
   exports.isResolvedDerivedVariable = isResolvedDerivedVariable;
   exports.isResolvedServerVariable = isResolvedServerVariable;
   exports.isResolvedSwitchVariable = isResolvedSwitchVariable;
+  exports.isRouteMatchStore = isRouteMatchStore;
   exports.isServerVariable = isServerVariable;
   exports.isSingleVariable = isSingleVariable;
   exports.isStateVariable = isStateVariable;
@@ -98777,7 +98959,7 @@ body,
   exports.useFetchTabularServerVariable = useFetchTabularServerVariable;
   exports.useInterval = useInterval;
   exports.usePreloadRoute = usePreloadRoute;
-  exports.usePrevious = usePrevious$1;
+  exports.usePrevious = usePrevious;
   exports.useRefreshSelector = useRefreshSelector;
   exports.useRefreshServerComponent = useRefreshServerComponent;
   exports.useRequestExtras = useRequestExtras;