kaafil-react-uikit 0.4.1 → 0.4.2

package/dist/{chunk-VAJ4D7EF.js → chunk-QMUIZHJO.js}

@@ -1,8 +1,10 @@
-import { createDomainHook, useSnapshotList, classifyError } from './chunk-EP4VCID7.js';
-import { useServerTime } from './chunk-DABF4PUI.js';
-import { useOfflineMutation, useKaafilClient, useCapabilityRows, deriveCapabilityTriple, useRequiredContext, ConfigContext } from './chunk-ABWNV4N4.js';
-import { useCallback, useState, useEffect, useRef, useMemo } from 'react';
-import { SyncOpMethod } from 'kaafil-js/client';
+import { createDomainHook, useSnapshotList, classifyError } from './chunk-3E2FN5JJ.js';
+import { useServerTime } from './chunk-ITGVRN2S.js';
+import { useOfflineMutation, useKaafilClient, useCapabilityRows, deriveCapabilityTriple, tokenStyle, ConfigContext, KaafilClientContext, usePersona, useSession, OfflineEngineContext, SessionContext, BrandShell, I18nShell, isDevelopment } from './chunk-6FUVFVYY.js';
+import { useCallback, createContext, useState, useEffect, useRef, useMemo, useContext, Component, Fragment } from 'react';
+import { SyncOpMethod, KaafilClient } from 'kaafil-js/client';
+import { createPortal } from 'react-dom';
+import { jsx, Fragment as Fragment$1, jsxs } from 'react/jsx-runtime';
 
 function useAgencyAdminMe() {
   const client = useKaafilClient();
@@ -290,7 +292,7 @@ function useAgencyManagerProfile(managerRef) {
 }
 function useAgencySettings() {
   const client = useKaafilClient();
-  const [document, setDocument] = useState(void 0);
+  const [document2, setDocument] = useState(void 0);
   const [loaded, setLoaded] = useState(false);
   const [lastFetchFailed, setLastFetchFailed] = useState(false);
   const refresh = useCallback(async () => {
@@ -314,7 +316,7 @@ function useAgencySettings() {
     },
     [client, refresh]
   );
-  return { document, loaded, lastFetchFailed, refresh, patchSettings };
+  return { document: document2, loaded, lastFetchFailed, refresh, patchSettings };
 }
 function useAgencyTrip(tripRef) {
   const client = useKaafilClient();
@@ -742,12 +744,6 @@ function usePaginatedList(fetch, options) {
     loadPrev
   };
 }
-
-// src/core/hooks/useResolvedSetting.ts
-function useResolvedSetting(key) {
-  const config = useRequiredContext(ConfigContext, "useResolvedSetting", "ConfigShell");
-  return config.resolveSetting(key);
-}
 var SHARE_SECTION_KEYS = [
   "itinerary",
   "rooming",
@@ -889,6 +885,504 @@ function useTravellerFormResponses(tripRef, travellerRef) {
   }, [refresh]);
   return { responses, readFailed, refresh };
 }
+var ThemeAttributesContext = createContext(null);
+var FAMILY_DEFAULT_FRAME = {
+  admin: "desk",
+  manager: "field",
+  traveller: "document"
+};
+var DESK_MINIMUM_CONTAINER_WIDTH_PX = 640;
+function ShadowIsolationBoundary({
+  className,
+  children
+}) {
+  const hostRef = useRef(null);
+  const [shadowContainer, setShadowContainer] = useState(null);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (host === null) {
+      return;
+    }
+    const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+    let container = shadow.querySelector("div[data-kf-shadow-content]");
+    if (container === null) {
+      container = document.createElement("div");
+      container.setAttribute("data-kf-shadow-content", "");
+      shadow.appendChild(container);
+    }
+    setShadowContainer(container);
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref: hostRef, className, "data-kf-isolation": "shadow", children: shadowContainer !== null ? createPortal(children, shadowContainer) : null });
+}
+function useDeskMinimumWidthWarning(rootRef, frame) {
+  useEffect(() => {
+    if (frame !== "desk" || !isDevelopment() || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const node = rootRef.current;
+    if (node === null) {
+      return;
+    }
+    let warned = false;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry === void 0 || warned) {
+        return;
+      }
+      if (entry.contentRect.width < DESK_MINIMUM_CONTAINER_WIDTH_PX) {
+        warned = true;
+        console.warn(
+          `kaafil-react-uikit: the 'desk' frame's .kf-root is narrower than the stated minimum container width (05-theming-and-branding.md \xA74.4). AppShell never auto-swaps frames \u2014 mount the manager family, or pass frame="field" explicitly, for this container.`
+        );
+      }
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [rootRef, frame]);
+}
+function useUnfilledConnectivitySlotWarning(frame, connectivitySlot) {
+  useEffect(() => {
+    if (frame === "field" && connectivitySlot === void 0 && isDevelopment()) {
+      console.warn(
+        `kaafil-react-uikit: AppShell's "field" frame has no connectivitySlot filled \u2014 the permanently-visible connectivity/sync region this frame reserves is empty (01-app-shell.md, briefing \xA727.2).`
+      );
+    }
+  }, [frame, connectivitySlot]);
+}
+function AppShell({
+  frame,
+  family,
+  isolation = "scoped",
+  navSlot,
+  actionBarSlot,
+  connectivitySlot,
+  children,
+  style
+}) {
+  const themeAttributes = useContext(ThemeAttributesContext);
+  const rootRef = useRef(null);
+  const resolvedFrame = frame ?? (family !== void 0 ? FAMILY_DEFAULT_FRAME[family] : "document");
+  useDeskMinimumWidthWarning(rootRef, resolvedFrame);
+  useUnfilledConnectivitySlotWarning(resolvedFrame, connectivitySlot);
+  const dataAttributes = {
+    "data-kf-frame": resolvedFrame
+  };
+  if (family !== void 0) {
+    dataAttributes["data-kf-family"] = family;
+  }
+  if (themeAttributes !== null) {
+    dataAttributes["data-kf-theme"] = themeAttributes.theme;
+    if (themeAttributes.density !== void 0) {
+      dataAttributes["data-kf-density"] = themeAttributes.density;
+    }
+  }
+  const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    resolvedFrame === "desk" && navSlot !== void 0 ? /* @__PURE__ */ jsx("div", { className: "kf-app-shell__nav", children: navSlot }) : null,
+    /* @__PURE__ */ jsx("div", { className: "kf-app-shell__content", children }),
+    resolvedFrame === "field" && actionBarSlot !== void 0 ? /* @__PURE__ */ jsx("div", { className: "kf-app-shell__action-bar", children: actionBarSlot }) : null,
+    resolvedFrame === "field" && connectivitySlot !== void 0 ? /* @__PURE__ */ jsx("div", { className: "kf-app-shell__connectivity", children: connectivitySlot }) : null,
+    /* @__PURE__ */ jsx("div", { className: "kf-app-shell__live-region", role: "status", "aria-live": "polite" })
+  ] });
+  if (isolation === "shadow") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: rootRef,
+        className: "kf-root",
+        "data-kf-isolation": "shadow",
+        ...dataAttributes,
+        style: tokenStyle(style),
+        children: /* @__PURE__ */ jsx(ShadowIsolationBoundary, { className: "kf-app-shell__shadow-host", children: content })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: rootRef,
+      className: "kf-root",
+      "data-kf-isolation": "scoped",
+      ...dataAttributes,
+      style: tokenStyle(style),
+      children: content
+    }
+  );
+}
+function ConfigShell({ seedConfig = {}, children }) {
+  const value = useMemo(
+    () => ({
+      resolveSetting(key) {
+        const agencyValue = seedConfig.agency?.[key];
+        if (agencyValue !== void 0) {
+          return agencyValue;
+        }
+        const tenantValue = seedConfig.tenant?.[key];
+        return tenantValue === void 0 ? void 0 : tenantValue;
+      }
+    }),
+    [seedConfig.agency, seedConfig.tenant]
+  );
+  return /* @__PURE__ */ jsx(ConfigContext.Provider, { value, children });
+}
+function classifyForFallback(error) {
+  const classification = classifyError(error);
+  if (classification.code === "RESOURCE_NOT_FOUND") {
+    return { classification: "isolation", code: classification.code };
+  }
+  if (classification.path === "parked" || classification.unsatisfiableScheme) {
+    return { classification: "parked", code: classification.code };
+  }
+  return { classification: "retryable", code: classification.code };
+}
+var FALLBACK_STYLE = {
+  fontFamily: "system-ui, sans-serif",
+  padding: "1.5rem",
+  border: "1px solid #999",
+  borderRadius: "4px",
+  color: "#1a1a1a",
+  background: "#fff"
+};
+function DefaultFallback({
+  ctx,
+  onRetry
+}) {
+  const role = ctx.classification === "retryable" ? "status" : "alert";
+  const ariaLive = ctx.classification === "retryable" ? "polite" : "assertive";
+  const message = ctx.classification === "isolation" ? "Not found." : ctx.classification === "parked" ? "This action can't be completed right now." : "Something went wrong.";
+  return /* @__PURE__ */ jsxs("div", { style: FALLBACK_STYLE, role, "aria-live": ariaLive, children: [
+    /* @__PURE__ */ jsx("p", { style: { margin: 0 }, children: message }),
+    ctx.classification === "retryable" ? /* @__PURE__ */ jsx("button", { type: "button", onClick: onRetry, style: { marginTop: "0.75rem" }, children: "Try again" }) : null
+  ] });
+}
+var ErrorShell = class extends Component {
+  state = { caught: null, retryKey: 0 };
+  static getDerivedStateFromError(error) {
+    return { caught: { error } };
+  }
+  handleRetry = () => {
+    this.setState((current) => ({ caught: null, retryKey: current.retryKey + 1 }));
+  };
+  render() {
+    if (this.state.caught !== null) {
+      const ctx = classifyForFallback(this.state.caught.error);
+      if (this.props.fallbackSlot !== void 0) {
+        return this.props.fallbackSlot(ctx);
+      }
+      return /* @__PURE__ */ jsx(DefaultFallback, { ctx, onRetry: this.handleRetry });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: this.props.children }, this.state.retryKey);
+  }
+};
+var SessionExpiryBridgeContext = createContext(void 0);
+function OfflineShell({
+  storage,
+  blob,
+  conflictResolver,
+  readEntity,
+  scope,
+  children
+}) {
+  const client = useContext(KaafilClientContext);
+  const persona = usePersona();
+  const session = useSession();
+  const reportExpired = useContext(SessionExpiryBridgeContext);
+  const [engine, setEngine] = useState(null);
+  const engineRef = useRef(null);
+  const derivedScope = scope ?? `${persona}:${session.agencyRef ?? "share"}`;
+  useEffect(() => {
+    if (session.status !== "authenticated" || client === null) {
+      return;
+    }
+    const newEngine = client.openOffline({
+      storage,
+      scope: derivedScope,
+      ...readEntity !== void 0 ? { readEntity } : {},
+      ...conflictResolver !== void 0 ? { conflictResolver } : {},
+      ...blob !== void 0 ? { blob } : {}
+      // GAP flagged in this phase's report: a share session's local
+      // `expiresAt` enforcement (`OpenOfflineOptions.share`,
+      // `07-offline-and-sync.md §8`) needs an `expiresAt` this shell has no
+      // source for yet — it is not on `useSession()`'s derived shape and no
+      // prop carries it. Omitted here rather than guessed; a share engine
+      // opens without the local expiry/grace/purge enforcement until that
+      // value has a wire source.
+    });
+    engineRef.current = newEngine;
+    let opened = false;
+    let disposed = false;
+    void newEngine.open().then(() => {
+      opened = true;
+      if (disposed) {
+        newEngine.close();
+        return;
+      }
+      if (engineRef.current === newEngine) setEngine(newEngine);
+    }).catch(() => {
+      if (!disposed && engineRef.current === newEngine) setEngine(null);
+    });
+    const unsubscribeSessionExpired = persona !== "share" ? newEngine.events.on("session.expired", () => reportExpired?.("session")) : void 0;
+    const unsubscribeShareExpired = persona === "share" ? newEngine.events.on("share.expired", () => reportExpired?.("share")) : void 0;
+    const unsubscribeShareRevoked = persona === "share" ? newEngine.events.on("share.revoked", () => reportExpired?.("share")) : void 0;
+    return () => {
+      unsubscribeSessionExpired?.();
+      unsubscribeShareExpired?.();
+      unsubscribeShareRevoked?.();
+      disposed = true;
+      if (opened) newEngine.close();
+      if (engineRef.current === newEngine) {
+        engineRef.current = null;
+      }
+    };
+  }, [client, derivedScope, session.status, persona, reportExpired]);
+  return /* @__PURE__ */ jsx(OfflineEngineContext.Provider, { value: engine, children });
+}
+
+// src/core/shells/internal/jwtKind.ts
+function base64UrlDecode(segment) {
+  const padded = segment.replace(/-/g, "+").replace(/_/g, "/");
+  const withPadding = padded + "=".repeat((4 - padded.length % 4) % 4);
+  return atob(withPadding);
+}
+function decodeManagerOrAgencyAdminKind(accessToken) {
+  const segments = accessToken.split(".");
+  const payloadSegment = segments[1];
+  if (segments.length !== 3 || payloadSegment === void 0) {
+    throw new Error(
+      'SessionShell could not parse "accessToken" as a JWT \u2014 it does not have the three dot-separated segments every manager/agencyAdmin session token has.'
+    );
+  }
+  let claim;
+  try {
+    claim = JSON.parse(base64UrlDecode(payloadSegment));
+  } catch {
+    throw new Error(
+      `SessionShell could not decode "accessToken"'s payload segment as JSON \u2014 the value handed to <KaafilUIKitProvider accessToken> is not a well-formed JWT.`
+    );
+  }
+  const kind = claim.kind;
+  if (kind === "agencyAdmin") {
+    return "agencyAdmin";
+  }
+  if (kind === "managerSession" || kind === "manager") {
+    return "managerSession";
+  }
+  throw new Error(
+    `SessionShell read an unrecognised "kind" claim ("${String(kind)}") off "accessToken" \u2014 expected the manager or agencyAdmin session JWT shape (00-decisions.md U-003).`
+  );
+}
+async function resolveCredential(props) {
+  if (props.credentialResolver !== void 0) {
+    const resolved = await props.credentialResolver();
+    if ("shareToken" in resolved) {
+      return { kind: "share", shareToken: resolved.shareToken };
+    }
+    const kind2 = decodeManagerOrAgencyAdminKind(resolved.accessToken) === "agencyAdmin" ? "agencyAdmin" : "manager";
+    return { kind: kind2, ...resolved };
+  }
+  if (props.shareToken !== void 0) {
+    return { kind: "share", shareToken: props.shareToken };
+  }
+  const kind = decodeManagerOrAgencyAdminKind(props.accessToken) === "agencyAdmin" ? "agencyAdmin" : "manager";
+  return {
+    kind,
+    accessToken: props.accessToken,
+    refreshToken: props.refreshToken,
+    agencyRef: props.agencyRef
+  };
+}
+function SessionShell(props) {
+  const { environment = "live", onRefresh, onSessionExpired, children } = props;
+  const [state, setState] = useState(null);
+  const expiredCallbackFiredRef = useRef(false);
+  const currentPersonaRef = useRef("manager");
+  const reportExpired = useCallback(() => {
+    if (expiredCallbackFiredRef.current) {
+      return;
+    }
+    expiredCallbackFiredRef.current = true;
+    onSessionExpired?.(currentPersonaRef.current);
+    setState(
+      (current) => current === null ? current : { ...current, session: { ...current.session, status: "expired" } }
+    );
+  }, [onSessionExpired]);
+  const accessTokenDep = "accessToken" in props ? props.accessToken : void 0;
+  const refreshTokenDep = "refreshToken" in props ? props.refreshToken : void 0;
+  const agencyRefDep = "agencyRef" in props ? props.agencyRef : void 0;
+  const shareTokenDep = "shareToken" in props ? props.shareToken : void 0;
+  useEffect(() => {
+    let cancelled = false;
+    const client = new KaafilClient({ environment });
+    expiredCallbackFiredRef.current = false;
+    async function open() {
+      const credential = await resolveCredential(props);
+      if (cancelled) {
+        return;
+      }
+      currentPersonaRef.current = credential.kind;
+      if (credential.kind === "share") {
+        client.share.open({ token: credential.shareToken });
+      } else if (credential.kind === "agencyAdmin") {
+        client.admin.open({
+          accessToken: credential.accessToken,
+          refreshToken: credential.refreshToken,
+          agencyRef: credential.agencyRef,
+          ...onRefresh !== void 0 ? { onRefresh } : {}
+        });
+      } else {
+        client.session.open({
+          accessToken: credential.accessToken,
+          refreshToken: credential.refreshToken,
+          agencyRef: credential.agencyRef,
+          ...onRefresh !== void 0 ? { onRefresh } : {}
+        });
+      }
+      setState({
+        client,
+        session: {
+          status: "authenticated",
+          persona: credential.kind,
+          agencyRef: credential.agencyRef,
+          environment
+        }
+      });
+    }
+    void open();
+    return () => {
+      cancelled = true;
+      client.close();
+    };
+  }, [environment, accessTokenDep, refreshTokenDep, agencyRefDep, shareTokenDep]);
+  if (state === null) {
+    return /* @__PURE__ */ jsx(SessionExpiryBridgeContext.Provider, { value: reportExpired, children: /* @__PURE__ */ jsx(
+      SessionContext.Provider,
+      {
+        value: { status: "opening", persona: "manager", agencyRef: void 0, environment },
+        children
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(SessionExpiryBridgeContext.Provider, { value: reportExpired, children: /* @__PURE__ */ jsx(KaafilClientContext.Provider, { value: state.client, children: /* @__PURE__ */ jsx(SessionContext.Provider, { value: state.session, children }) }) });
+}
+function emit(onEvent, event) {
+  if (onEvent === void 0) {
+    return;
+  }
+  try {
+    onEvent(event);
+  } catch {
+  }
+}
+function TelemetryShell({ onEvent, children }) {
+  const session = useSession();
+  const serverTime = useServerTime();
+  const previousStatusRef = useRef(void 0);
+  useEffect(() => {
+    const previousStatus = previousStatusRef.current;
+    if (serverTime.sinceLastSync !== void 0) {
+      if (session.status === "authenticated" && previousStatus !== "authenticated") {
+        emit(onEvent, {
+          type: "session.opened",
+          timestamp: serverTime.now(),
+          persona: session.persona
+        });
+      }
+      if (session.status === "expired" && previousStatus !== "expired") {
+        emit(onEvent, {
+          type: "session.expired",
+          timestamp: serverTime.now(),
+          persona: session.persona
+        });
+      }
+    }
+    previousStatusRef.current = session.status;
+  }, [session.status, serverTime.sinceLastSync]);
+  return /* @__PURE__ */ jsx(Fragment$1, { children });
+}
+function resolveSystemTheme() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return "light";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function ThemeShell({ theme = "system", density, children }) {
+  const [systemTheme, setSystemTheme] = useState(
+    () => theme === "system" ? resolveSystemTheme() : theme
+  );
+  useEffect(() => {
+    if (theme !== "system" || typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const query = window.matchMedia("(prefers-color-scheme: dark)");
+    const listener = (event) => {
+      setSystemTheme(event.matches ? "dark" : "light");
+    };
+    query.addEventListener("change", listener);
+    return () => query.removeEventListener("change", listener);
+  }, [theme]);
+  const resolvedTheme = theme === "system" ? systemTheme : theme;
+  const value = useMemo(() => ({ theme: resolvedTheme, density }), [resolvedTheme, density]);
+  return /* @__PURE__ */ jsx(ThemeAttributesContext.Provider, { value, children });
+}
+var DefaultCapabilityViewsContext = createContext({});
+function useDefaultCapabilityViews() {
+  return useContext(DefaultCapabilityViewsContext);
+}
+var BuildShareUrlContext = createContext(null);
+function useBuildShareUrl() {
+  return useContext(BuildShareUrlContext);
+}
+function KaafilUIKitProvider(props) {
+  const {
+    environment,
+    onSessionExpired,
+    density,
+    theme,
+    brand,
+    locale,
+    isolation,
+    onEvent,
+    storage,
+    blob,
+    conflictResolver,
+    readEntity,
+    offlineScope,
+    seedConfig,
+    defaultCapabilityViews,
+    buildShareUrl,
+    children,
+    ...credential
+  } = props;
+  const inner = /* @__PURE__ */ jsx(BuildShareUrlContext.Provider, { value: buildShareUrl ?? null, children: /* @__PURE__ */ jsx(DefaultCapabilityViewsContext.Provider, { value: defaultCapabilityViews ?? {}, children: /* @__PURE__ */ jsx(ConfigShell, { seedConfig, children: /* @__PURE__ */ jsx(
+    BrandShell,
+    {
+      appName: brand?.appName,
+      logo: brand?.logo,
+      logoMark: brand?.logoMark,
+      favicon: brand?.favicon,
+      headStrategy: brand?.headStrategy,
+      children: /* @__PURE__ */ jsx(TelemetryShell, { onEvent, children })
+    }
+  ) }) }) });
+  return /* @__PURE__ */ jsx(ErrorShell, { children: /* @__PURE__ */ jsx(ThemeShell, { theme, density, children: /* @__PURE__ */ jsx(I18nShell, { locale, children: /* @__PURE__ */ jsx(AppShell, { isolation, children: /* @__PURE__ */ jsx(
+    SessionShell,
+    {
+      ...credential,
+      environment,
+      onSessionExpired,
+      children: storage !== void 0 ? /* @__PURE__ */ jsx(
+        OfflineShell,
+        {
+          storage,
+          blob,
+          conflictResolver,
+          readEntity,
+          scope: offlineScope,
+          children: inner
+        }
+      ) : inner
+    }
+  ) }) }) }) });
+}
 
 // src/core/routing/deepLinks.ts
 var CLOSEOUT_ACTION_TAB = {
@@ -970,6 +1464,6 @@ var TRIP_TAB_KEY_SET = {
   forms: true
 };
 
-export { CLOSEOUT_ACTION_TAB, familySafeSections, fromSearchParams, isTripTabKey, resolveBlockerDeepLink, toSearchParams, useAgencyAdminMe, useAgencyChecklistTemplates, useAgencyForms, useAgencyJourneyTriggers, useAgencyManagerProfile, useAgencySettings, useAgencyTrip, useAgencyTripManifest, useAgencyTrips, useBookings, useCapabilityStatuses, useDirectories, usePaginatedList, useResolvedSetting, useShareLinks, useTravellerFormResponses };
-//# sourceMappingURL=chunk-VAJ4D7EF.js.map
-//# sourceMappingURL=chunk-VAJ4D7EF.js.map
+export { AppShell, CLOSEOUT_ACTION_TAB, ConfigShell, ErrorShell, KaafilUIKitProvider, OfflineShell, SessionShell, TelemetryShell, ThemeShell, familySafeSections, fromSearchParams, isTripTabKey, resolveBlockerDeepLink, toSearchParams, useAgencyAdminMe, useAgencyChecklistTemplates, useAgencyForms, useAgencyJourneyTriggers, useAgencyManagerProfile, useAgencySettings, useAgencyTrip, useAgencyTripManifest, useAgencyTrips, useBookings, useBuildShareUrl, useCapabilityStatuses, useDefaultCapabilityViews, useDirectories, usePaginatedList, useShareLinks, useTravellerFormResponses };
+//# sourceMappingURL=chunk-QMUIZHJO.js.map
+//# sourceMappingURL=chunk-QMUIZHJO.js.map