Aedis UI

mf-context

Keeps an embedded app in step with its host: theme, locale and session, over mf-bridge.

// Hostconst [bridge, setBridge] = useState<Bridge<typeof hostMessages> | null>(null);const endSession = useMfContextHost(bridge, { mode, theme, locale });<MfFrame src={AGENT_URL} title="Agent panel" messages={hostMessages} onBridge={setBridge} />// on logout: endSession(); then sign out// Embedded appconst { locale } = useMfContext({ hostOrigins: [BACKOFFICE_ORIGIN], locales: ["en", "pt-BR", "es"], onSessionEnd: signOut });

Installation

Once per app, set up Aedis UI. The CLI verifies the signed release before writing anything and pins every dependency:

npx @aedis/cli@0.1.0 init

Import the theme once in your global CSS, after Tailwind:

app/globals.css
@import "tailwindcss";@import "./styles/aedis-theme.css";

Then add the component:

npx @aedis/cli@0.1.0 add mf-context# pnpm dlx @aedis/cli@0.1.0 add mf-context · yarn dlx @aedis/cli@0.1.0 add mf-context · bunx @aedis/cli@0.1.0 add mf-context

Props

PropTypeDefaultDescription
useMfContextHost(bridge, { mode, theme?, locale })() => void—Sends theme and locale on change; returns endSession for logout; relays the child's activity to useIdleTimeout.
useMfContext({ hostOrigins, locales, onSessionEnd, activityEveryMs? }){ locale; mode }—Applies the host's theme, follows its locale, ends the session with it and reports activity (every 30 s at most).
hostMessages / childMessages(locales)message specs—What each side accepts.
ACTIVITY_EVENTstring—Dispatch on window to make useIdleTimeout count activity it cannot see.

Security

  • Logout in the host ends the embedded app's session (session:end), so a session never outlives the host's.
  • Idle time is shared: activity in the embedded app keeps the host's useIdleTimeout alive, and the host's timeout ends both.
  • Theme and locale travel as data: the theme passes validateTheme again and is applied through the CSSOM; unknown locales are ignored.
  • Built on mf-bridge: exact origins, source checks and no tokens in messages.